diff --git a/.babelrc b/.babelrc deleted file mode 100644 index d44724705..000000000 --- a/.babelrc +++ /dev/null @@ -1,5 +0,0 @@ -{ - "presets": [ - "next/babel" - ] -} diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000..38972655f --- /dev/null +++ b/.eslintignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 6d2b19f3c..000000000 --- a/.eslintrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["wesbos"] -} diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 000000000..ebc19589f --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,30 @@ +module.exports = { + root: true, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:svelte/recommended', + 'prettier' + ], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint'], + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020, + extraFileExtensions: ['.svelte'] + }, + env: { + browser: true, + es2017: true, + node: true + }, + overrides: [ + { + files: ['*.svelte'], + parser: 'svelte-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser' + } + } + ] +}; diff --git a/.github/workflows/build_and_reimport.yml b/.github/workflows/build_and_reimport.yml new file mode 100644 index 000000000..5776ca93c --- /dev/null +++ b/.github/workflows/build_and_reimport.yml @@ -0,0 +1,40 @@ +name: Build and ReImport + +on: + push: + branches: + - main + pull_request: + types: [closed] + branches: + - main + +jobs: + build: + runs-on: ubuntu-latest + if: github.event.pull_request.merged == true || github.event_name == 'push' + + steps: + - name: Checkout code + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v2 + with: + node-version: '18' + + - name: Install pnpm + run: npm install -g pnpm + + - name: Install dependencies + run: pnpm install + + - name: Build project + run: pnpm build + + - name: Notify + run: | + STATUS=$? + if [[ "$STATUS" -eq 0 ]]; then + curl -X POST "http://beta.syntax.fm/webhooks/refresh" -H "Content-Type: application/json" -d '{"status":"success"}' + fi diff --git a/.github/workflows/playwright-tests.yml b/.github/workflows/playwright-tests.yml new file mode 100644 index 000000000..daf77aa94 --- /dev/null +++ b/.github/workflows/playwright-tests.yml @@ -0,0 +1,44 @@ +name: Run_Playwright_Tests_on_PRs + +on: + pull_request: + branches: + - v2 + +jobs: + test: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v2 + + - name: pnpm-setup + uses: pnpm/action-setup@v2 + with: + version: 8 + + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: 20.5.0 + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install + + - name: Setup DB + run: pnpm db:generate + + - name: Install playwright browsers + run: pnpx playwright install --with-deps + + - name: Run Playwright tests + run: pnpm run test + env: + PUBLIC_GITHUB_ID: ${{ secrets.PUBLIC_GITHUB_ID }} + GH_SECRET: ${{ secrets.GH_SECRET }} + DEEPGRAM_SECRET: ${{ secrets.DEEPGRAM_SECRET }} + PUBLIC_URL: ${{ secrets.PUBLIC_URL }} + SENTRY_AUTH_TOKEN: '' + DATABASE_URL: ${{ secrets.DATABASE_URL }} diff --git a/.github/workflows/svelte_check.yml b/.github/workflows/svelte_check.yml new file mode 100644 index 000000000..aa53ce625 --- /dev/null +++ b/.github/workflows/svelte_check.yml @@ -0,0 +1,41 @@ +name: Run_Svelte_Check_on_PRs + +on: + pull_request: + branches: + - v2 + +jobs: + test: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v2 + + - name: pnpm-setup + uses: pnpm/action-setup@v2 + with: + version: 8 + + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: 20.5.0 + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install + + - name: Setup DB + run: pnpm db:generate + + - name: Run Svelte Check + run: pnpm check + env: + PUBLIC_GITHUB_ID: ${{ secrets.PUBLIC_GITHUB_ID }} + GH_SECRET: ${{ secrets.GH_SECRET }} + DEEPGRAM_SECRET: ${{ secrets.DEEPGRAM_SECRET }} + PUBLIC_URL: ${{ secrets.PUBLIC_URL }} + SENTRY_AUTH_TOKEN: '' + DATABASE_URL: ${{ secrets.DATABASE_URL }} diff --git a/.gitignore b/.gitignore index 34a542a33..f19f56df0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,23 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example .next/ -node_modules/ -.DS_store -*.log +vite.config.js.timestamp-* +vite.config.ts.timestamp-* haters/ +# Sentry +.sentryclirc +transcripts-flagged/ + +test-results .vercel .env .svelte-kit -.sentryclirc \ No newline at end of file +.sentryclirc +# Temp +# core.wasm diff --git a/.npmrc b/.npmrc index f6bb56158..b6f27f135 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1 @@ -fund=false -audit=false -legacy-peer-deps=true +engine-strict=true diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..38972655f --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 000000000..d58caf37d --- /dev/null +++ b/.prettierrc @@ -0,0 +1,16 @@ +{ + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ], + "pluginSearchDirs": ["."], + "plugins": ["prettier-plugin-svelte"], + "printWidth": 100, + "singleQuote": true, + "trailingComma": "none", + "useTabs": true +} diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..757f5968a --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,7 @@ +{ + "recommendations": [ + "svelte.svelte-vscode", + "ardenivanov.svelte-intellisense", + "fivethree.vscode-svelte-snippets", + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 1a30107c3..038585fdc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,22 +1,22 @@ { - // These are all my auto-save configs - "editor.formatOnSave": true, - // turn it off for JS and JSX, we will do this via eslint - "[javascript]": { - "editor.formatOnSave": false - }, - "[javascriptreact]": { - "editor.formatOnSave": false - }, - // show eslint icon at bottom toolbar - "eslint.alwaysShowStatus": true, - // tell the ESLint plugin to run on save - "editor.codeActionsOnSave": { - "source.fixAll": true - }, - // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already - "prettier.disableLanguages": [ - "javascript", - "javascriptreact" - ], -} \ No newline at end of file + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true, + "source.fixAll.prettier": true + }, + "[javascript]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascriptreact]": { + "editor.formatOnSave": true + }, + "[typescript]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescriptreact]": { + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "cSpell.words": ["Deepgram", "openai", "popovertarget", "Tolinski", "waait"] +} diff --git a/README.md b/README.md index da524d26f..53ec59855 100755 --- a/README.md +++ b/README.md @@ -4,20 +4,64 @@ A tasty treats podcast for Web Developers. This is the site that runs [Syntax.fm](https://syntax.fm) — go there to listen to it! -This site is built on React and Next.js +This site is built on SvelteKit ## Requirements -- Node 18.1.2 or higher +- Node 20.0.0 or higher + +## Database + +Make sure to have a `DATABASE_URL` environmental variable set. + +If this is your first time, run `pnpm db:push` to create the tables in your database. + +Then run `pnpm db:seed` to scaffold out the user roles. ## Development -First you `npm install` +First you `pnpm install` + +Then you `pnpm dev` and visit `http://localhost:5173`. + +### Scripts + +Generate Types `pnpm db:generate` +DB studio `pnpm db:studio` +DB Migrations `pnpm db:push` +DB Seed `pnpm db:seed` + +### About this codebase + +Just about all major code folders live in `/src` with the exception of `/shows` - the md source of truth for all podcast episodes as well as `/prisma` for our db connections and schema. + +| | | Alias | +| ------------ | --------------------------------------------------------------------------------------------- | ---------- | +| `/actions` | Svelte Actions, these are reusable functions that act as lifecycle on DOM elements | $actions | +| `/assets` | Static assets that are used via @import | $assets | +| `/server` | All database and server-side only reusable code | $server | +| `/lib` | (SK Paradigm) Components and files that are used in more than one route | $lib | +| `/params` | (SK Paradigm) This is a SvelteKit specific folder to add validation on parameter based routes | | +| `/routes` | (SK Paradigm) File System based routing | | +| `/state` | Global State containers and resolvers | $state | +| `/styles` | CSS | +| `/utilities` | Global Utility functions | $utilities | -Then you `npm run dev` and visit `http://localhost:6969`. +### Stylin' -Then you do some work. +These are the available media queries -When you are ready for prime time, you can just submit a PR to this repo and it will be deployed once it's accepted. +```css +@custom-media --below_small (width < 400px); +@custom-media --below_med (width < 700px); +@custom-media --below_large (width < 900px); +@custom-media --below_xlarge (width < 1200px); +@custom-media --above_small (width > 400px); +@custom-media --above_med (width > 700px); +@custom-media --above_large (width > 900px); +@custom-media --above_xlarge (width > 1200px); -If you want to build your own version, just run `npm run build` and then I'd recommend deploying with `now`. +// Usage +@media (--above_med) { +} +``` diff --git a/components/Footer.js b/components/Footer.js deleted file mode 100644 index 634480d95..000000000 --- a/components/Footer.js +++ /dev/null @@ -1,33 +0,0 @@ -import Link from 'next/link'; - -const Footer = () => ( - -); - -export default Footer; diff --git a/components/Header.js b/components/Header.js deleted file mode 100644 index a972b2588..000000000 --- a/components/Header.js +++ /dev/null @@ -1,88 +0,0 @@ -import Link from 'next/link'; -import Subscribe from './Subscribe'; - -const Header = () => ( -
-
- - - Syntax - - -
-
-
-

A Tasty Treats Podcast for Web Developers.

- - Ask a Potluck Question → - -
-
-
- Wes Bos -

Wes Bos

- - @wesbos - -

- Full Stack JavaScript Developer. Creator of really good{' '} - - web development courses - - . BBQ enthusiast. -

-
- -
- Scott Tolinski -

Scott Tolinski

- - @stolinski - -

- Web Developer, Creator of{' '} - Level Up Tuts, Bboy, - Robotops Crew and{' '} - - Youtuber - -

-
-
-
- -
-); - -export default Header; diff --git a/components/Page.js b/components/Page.js deleted file mode 100644 index 31c90ae9f..000000000 --- a/components/Page.js +++ /dev/null @@ -1,25 +0,0 @@ -import PropTypes from 'prop-types'; -import Header from './Header'; -import Footer from './Footer'; - -function Page({ children }) { - return ( -
- - Skip to content - -
- {children} -
- ); -} - -Page.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]).isRequired, -}; - -export default Page; diff --git a/components/Player.js b/components/Player.js deleted file mode 100644 index af66a4163..000000000 --- a/components/Player.js +++ /dev/null @@ -1,282 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { FaPlay, FaPause } from 'react-icons/fa'; -import formatTime from '../lib/formatTime'; -import VolumeBars from './VolumeBars'; - -export default class Player extends React.Component { - constructor(props) { - super(props); - - let lastPlayed = 0; - let lastVolumePref = 1; - let lastPlaybackRate = 1; - - // for Server Side Rendering - if (typeof window !== 'undefined') { - const { show } = this.props; - const lp = localStorage.getItem(`lastPlayed${show.number}`); - const lastVolume = localStorage.getItem(`lastVolumeSetting`); - const lastPlayback = localStorage.getItem(`lastPlaybackSetting`); - - if (lp) lastPlayed = JSON.parse(lp).lastPlayed; //eslint-disable-line - if (lastVolume) lastVolumePref = JSON.parse(lastVolume).lastVolumePref; //eslint-disable-line - if (lastPlayback) - lastPlaybackRate = JSON.parse(lastPlayback).lastPlaybackRate; //eslint-disable-line - } - - this.state = { - progressTime: 50, - playing: false, - duration: 0, - currentTime: lastPlayed, - currentVolume: lastVolumePref, - playbackRate: lastPlaybackRate, - timeWasLoaded: lastPlayed !== 0, - showTooltip: false, - tooltipPosition: 0, - tooltipTime: '0:00', - }; - } // END Constructor - - componentWillUpdate(nextProps, nextState) { //eslint-disable-line - this.audio.playbackRate = nextState.playbackRate; - } - - componentDidUpdate(prevProps, prevState) { //eslint-disable-line - const { show } = this.props; - const { currentTime, currentVolume, playbackRate } = this.state; - if (show.number !== prevProps.show.number) { - const lp = localStorage.getItem(`lastPlayed${show.number}`); - if (lp) { - const lastVolume = localStorage.getItem(`lastVolumeSetting`); - const lastPlayback = localStorage.getItem(`lastPlaybackSetting`); - const data = JSON.parse(lp); - const data2 = JSON.parse(lastVolume); - const data3 = JSON.parse(lastPlayback); - // eslint-disable-next-line - this.setState({ - currentTime: data.lastPlayed, - currentVolume: data2.lastVolumePref, - playbackRate: data3.lastPlaybackRate, - }); - this.audio.currentTime = data.lastPlayed; - this.audio.volume = data2.lastVolumePref; - this.audio.playbackRate = data3.lastPlaybackRate; - } - this.audio.play(); - } else { - localStorage.setItem( - `lastPlayed${show.number}`, - JSON.stringify({ lastPlayed: currentTime }) - ); - localStorage.setItem( - `lastVolumeSetting`, - JSON.stringify({ lastVolumePref: currentVolume }) - ); - localStorage.setItem( - `lastPlaybackSetting`, - JSON.stringify({ lastPlaybackRate: playbackRate }) - ); - } - } - - timeUpdate = (e) => { - // console.log('Updating Time'); - const { show } = this.props; - const { timeWasLoaded } = this.state; - // Check if the user already had a curent time - if (timeWasLoaded) { - const lp = localStorage.getItem(`lastPlayed${show.number}`); - - if (lp) { - e.currentTarget.currentTime = JSON.parse(lp).lastPlayed; - } - this.setState({ timeWasLoaded: false }); - } else { - const { currentTime = 0, duration = 0 } = e.currentTarget; - - const progressTime = (currentTime / duration) * 100; - if (Number.isNaN(progressTime)) return; - this.setState({ progressTime, currentTime, duration }); - } - }; - - volumeUpdate = (e) => { - const { timeWasLoaded } = this.state; - // Check if the user already had a curent volume - if (timeWasLoaded) { - const lastVolume = localStorage.getItem(`lastVolumeSetting`); - if (lastVolume) { - e.currentTarget.volume = JSON.parse(lastVolume).lastVolumePref; - } - this.setState({ timeWasLoaded: false }); - } - }; - - groupUpdates = (e) => { - this.timeUpdate(e); - this.volumeUpdate(e); - }; - - togglePlay = () => { - const { playing } = this.state; - const method = playing ? 'pause' : 'play'; - this.audio[method](); - }; - - scrubTime = (eventData) => - (eventData.nativeEvent.offsetX / this.progress.offsetWidth) * - this.audio.duration; - - scrub = (e) => { - this.audio.currentTime = this.scrubTime(e); - }; - - seekTime = (e) => { - this.setState({ - tooltipPosition: e.nativeEvent.offsetX, - tooltipTime: formatTime(this.scrubTime(e)), - }); - }; - - playPause = () => { - const { onPlayPause } = this.props; - this.setState({ playing: !this.audio.paused }); - onPlayPause(this.audio); - }; - - volume = (e) => { - this.audio.volume = e.currentTarget.value; - this.setState({ - currentVolume: `${e.currentTarget.value}`, - }); - }; - - speedUp = () => { - this.speed(0.25); - }; - - speedDown = (e) => { - e.preventDefault(); - this.speed(-0.25); - }; - - speed = (change) => { - const playbackRateMax = 2.5; - const playbackRateMin = 0.75; - - let playbackRate = this.state.playbackRate + change; //eslint-disable-line - - if (playbackRate > playbackRateMax) { - playbackRate = playbackRateMin; - } - - if (playbackRate < playbackRateMin) { - playbackRate = playbackRateMax; - } - - this.setState({ playbackRate }); - }; - - render() { - const { show } = this.props; - const { - playing, - playbackRate, - progressTime, - currentTime, - duration, - showTooltip, - tooltipPosition, - tooltipTime, - } = this.state; - - return ( -
-
- -
- -
- {/* eslint-disable */} -
{ - this.setState({ showTooltip: true }); - }} - onMouseLeave={() => { - this.setState({ showTooltip: false }); - }} - ref={x => (this.progress = x)} - > - {/* eslint-enable */} - -
-
-

- Playing: {show.displayNumber}: {show.title} -

-
- {tooltipTime} -
-
- -
- -
-

LOUDNESS

-
- -
-
-
- {/* eslint-disable */} - -
- ); - } -} - -Player.propTypes = { - show: PropTypes.object.isRequired, - onPlayPause: PropTypes.func, -}; diff --git a/components/Show.js b/components/Show.js deleted file mode 100644 index 399153397..000000000 --- a/components/Show.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import slug from 'speakingurl'; -import { FaPlay } from 'react-icons/fa'; -import Link from 'next/link'; -import Bars from './bars'; - -export default class Show extends React.Component { - render() { - const { show, currentPlaying, currentShow, setCurrentPlaying, isPlaying } = - this.props; - return ( -
- - -
-

- Episode {show.displayNumber} -

- | -

{show.displayDate}

-
-

{show.title}

- - - -
- {currentPlaying === show.displayNumber ? ( - - ) : ( - - )} -
-
- ); - } -} - -Show.propTypes = { - show: PropTypes.object.isRequired, - currentPlaying: PropTypes.string.isRequired, - currentShow: PropTypes.string.isRequired, - setCurrentPlaying: PropTypes.func.isRequired, - isPlaying: PropTypes.bool, -}; diff --git a/components/ShowList.js b/components/ShowList.js deleted file mode 100644 index bc03b9e31..000000000 --- a/components/ShowList.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Show from './Show'; - -const ShowList = ({ - shows, - currentPlaying, - currentShow, - setCurrentPlaying, - isPlaying, -}) => ( -
- {shows.map((show) => ( - - ))} -
-
-); - -ShowList.propTypes = { - shows: PropTypes.array.isRequired, - currentPlaying: PropTypes.string.isRequired, - currentShow: PropTypes.string.isRequired, - setCurrentPlaying: PropTypes.func.isRequired, - isPlaying: PropTypes.bool.isRequired, -}; - -export default ShowList; diff --git a/components/ShowNotes.js b/components/ShowNotes.js deleted file mode 100644 index 8d8ddc953..000000000 --- a/components/ShowNotes.js +++ /dev/null @@ -1,72 +0,0 @@ -/* eslint-disable react/no-danger */ -import React, { useEffect } from 'react'; -import PropTypes from 'prop-types'; - -export default function ShowNotes({ show, setCurrentPlaying }) { - useEffect(() => { - document.querySelector('.showNotes').scrollTop = 0; - }); - - async function handleClick(e) { - const { target } = e; - if (target.matches(`a[href*='#t=']`)) { - e.preventDefault(); - const { href } = target; - const seconds = href - .split('#t=') - .at(-1) - .split(':') - .reverse() - .map(Number) - .map((num, i) => num * 60 ** i) - .reduce((acc, num) => acc + num, 0); - // TODO: This shouldn't use querySelector. It should use a ref. Meh its fine - setCurrentPlaying(show.displayNumber); - const audio = document.querySelector('audio'); - await audio.play(); - audio.currentTime = seconds; - } - } - - return ( -
-

{show.displayDate}

-

{show.title}

- - - 👇 Download Show - - - ✏️ Edit Show Notes - - {/* eslint-disable */} -
- {/* eslint-enable */} -
- ); -} - -ShowNotes.propTypes = { - show: PropTypes.object.isRequired, - setCurrentPlaying: PropTypes.func.isRequired, -}; diff --git a/components/Subscribe.js b/components/Subscribe.js deleted file mode 100644 index cf8528f2e..000000000 --- a/components/Subscribe.js +++ /dev/null @@ -1,73 +0,0 @@ -function Subscribe() { - return ( -
- -
- ); -} - -export default Subscribe; diff --git a/components/VideoPlayer.js b/components/VideoPlayer.js deleted file mode 100644 index dd0032622..000000000 --- a/components/VideoPlayer.js +++ /dev/null @@ -1,21 +0,0 @@ -import ReactHlsPlayer from 'react-hls-player'; - -export default function VideoPlayer() { - return ( -
- -
- ); -} diff --git a/components/VolumeBars.js b/components/VolumeBars.js deleted file mode 100644 index 336891ab6..000000000 --- a/components/VolumeBars.js +++ /dev/null @@ -1,102 +0,0 @@ -import React, { Component, Fragment } from 'react'; -import PropTypes from 'prop-types'; - -// TODO Fix all eslint issues - -// data generator -> to create 11 volume bars -const getItems = (count) => - Array.from({ length: count }, (v, i) => (i + 1) * 10).map((k) => { - const decimal = k / 110; - return { - integer: `${k}`, - deci: `${decimal}`, - vol: `vol${k}`, - level: `Volume Level ${k}/110`, - checked: true, - }; - }); // END MAP // END ARROW -class VolumeBars extends Component { - constructor(props) { - super(props); - this.state = { - volumeBarList: getItems(11), - }; - } - - componentDidMount() { - const localKey = `lastVolumeBarsOn`; - const localStorageRef = localStorage.getItem(localKey); - if (localStorageRef) { - this.setState({ volumeBarList: JSON.parse(localStorageRef) }); - } - } - - componentDidUpdate() { - const localKey = `lastVolumeBarsOn`; - const { volumeBarList } = this.state; - const localValue = JSON.stringify(volumeBarList); - localStorage.setItem(localKey, localValue); - } - - // We are going to track which volume bars are "checked" - handleOnClick = (index) => { - // make a copy of state - const { volumeBarList } = this.state; - const volumeBarListCopy = [...volumeBarList]; - // Get the index positions from 0 till index (index clicked) - for (let i = 0; i <= index; i += 1) { - volumeBarListCopy[i].checked = true; - } - // Get the index positions of the remaining non-checked - for (let i = index + 1; i < 11; i += 1) { - volumeBarListCopy[i].checked = null; - } - // Update State - this.setState({ - volumeBarList: volumeBarListCopy, - }); - }; - - render() { - const { volume } = this.props; - const { volumeBarList } = this.state; - return ( - <> - {volumeBarList.map((item, index) => ( - - { - this.handleOnClick(index); - }} - onChange={volume} - type="radio" - name="volume" - value={item.deci} - id={item.vol} - className="sr-only" - /> - - - ))} - - ); - } -} - -VolumeBars.propTypes = { - volume: PropTypes.func.isRequired, -}; - -export default VolumeBars; diff --git a/components/bars.js b/components/bars.js deleted file mode 100644 index 7e99a6331..000000000 --- a/components/bars.js +++ /dev/null @@ -1,19 +0,0 @@ -import PropTypes from 'prop-types'; - -const Bars = ({ isPlaying }) => ( -
-
-
-
-
-
-
-
-
-); - -Bars.propTypes = { - isPlaying: PropTypes.bool, -}; - -export default Bars; diff --git a/components/meta.js b/components/meta.js deleted file mode 100644 index 561a87059..000000000 --- a/components/meta.js +++ /dev/null @@ -1,64 +0,0 @@ -import Head from 'next/head'; -import PropTypes from 'prop-types'; -import slug from 'speakingurl'; - -const Meta = ({ show, staticPage }) => ( - - {show ? ( - <> - - {show.title} — Syntax Podcast {show.displayNumber} - - - - - - - - - ) : ( - - {staticPage && staticPage.title && `${staticPage.title} – `}Syntax - Podcast - - )} - -); - -const requiredPropsCheck = (props, propName, componentName) => { - if (!props.show && !props.staticPage) { - return new Error( - `One of 'show' or 'staticPage' is required by '${componentName}' component.` - ); - } - if (props.show && props.staticPage) { - return new Error( - `Only one of 'show' or 'staticPage' should be passed to '${componentName}' component, not both.` - ); - } - if (props[propName]) { - const myPropType = { - [propName]: PropTypes.shape({ - title: PropTypes.string.isRequired, - }), - }; - PropTypes.checkPropTypes(myPropType, props, propName, componentName); - } -}; - -Meta.propTypes = { - show: requiredPropsCheck, - staticPage: PropTypes.shape({ - title: PropTypes.string.isRequired, - }), -}; - -export default Meta; diff --git a/lib/formatTime.js b/lib/formatTime.js deleted file mode 100644 index 8d6bdc72c..000000000 --- a/lib/formatTime.js +++ /dev/null @@ -1,19 +0,0 @@ -// TODO figure out the ~~ thing - -export default function formatTime(time) { - // Hours, minutes and seconds - const hrs = Math.floor(~~(time / 3600)); // eslint-disable-line - const mins = Math.floor(~~((time % 3600) / 60)); // eslint-disable-line - const secs = Math.floor(time % 60); - - // Output like "1:01" or "4:03:59" or "123:03:59" - let ret = ''; - - if (hrs > 0) { - ret += `${hrs}:${mins < 10 ? '0' : ''}`; - } - - ret += `${mins}:${secs < 10 ? '0' : ''}`; - ret += `${secs}`; - return ret; -} diff --git a/lib/getShows.js b/lib/getShows.js deleted file mode 100644 index cd9127ac7..000000000 --- a/lib/getShows.js +++ /dev/null @@ -1,117 +0,0 @@ -const { promisify } = require('util'); -const path = require('path'); -const marked = require('meta-marked'); -const { readFile, readdir } = require('fs'); -const slug = require('speakingurl'); - -const readAFile = promisify(readFile); -const readDirContents = promisify(readdir); -const format = require('date-fns/format'); - -const pad = (num) => `000${num}`.substr(-3); - -let shows; - -const renderer = new marked.Renderer(); -renderer.link = function (href, title, text) { - return ` ${text}`; -}; - -const loadShows = async () => { - // Cached shows - if (shows) { - return shows; - } - - const showsDir = path.join(process.cwd(), 'shows'); - const files = (await readDirContents(showsDir)).filter((file) => - file.endsWith('.md') - ); - - const markdownPromises = files.map((file) => - readAFile(path.join(showsDir, file), 'utf-8') - ); - const showMarkdown = await Promise.all(markdownPromises); - - shows = showMarkdown - .map((md) => marked(md, { renderer })) // convert to markdown - .map((show, i) => { - const { number } = show.meta; - - return { - ...show.meta, - slug: `/show/${number}/${slug(show.meta.title)}`, - html: show.html, - notesFile: files[i], - displayDate: format(parseFloat(show.meta.date), 'MMM do, yyyy'), - displayNumber: pad(number), - }; - }) // flatten - .reverse(); - - return shows; -}; -async function getShows(filter) { - // eslint-disable-next-line no-shadow - const showsForGetShows = await loadShows(); - const now = Date.now(); - return filter === 'all' - ? showsForGetShows - : showsForGetShows.filter((show) => show.date < now); -} - -async function getShowsList() { - const showsForList = await getShows(); - return showsForList.map((show) => ({ - id: show.number, - title: show.title, - slug: show.slug, - date: show.date, - displayDate: show.displayDate, - displayNumber: show.displayNumber, - url: show.url, - number: show.number, - })); -} - -async function getShow(number) { - const showsForGetShow = await loadShows(); - const show = showsForGetShow.find( - (showItem) => showItem.displayNumber === number - ); - return show; -} - -async function getAllShowSickPicks() { - // Since the sick picks parsed markdown id is not consistent, - // this RegEx finds the first

tag with an id that contains - // the sequential characters "icks" from "picks" and selects - // characters from the string up until the next

tag - // i.e. the next section (usually Shameless Plugs) - const sickPickRegex = /(

*[\s\S]*?(?= - const showsForSickPicks = await getShows(); - return showsForSickPicks.reduce((sickPicksAcc, show) => { - const episode = `

Episode Number: ${show.number} - Sick Picks`; - const sickPickMatch = show.html.match(sickPickRegex); - - if (sickPickMatch) { - const html = sickPickMatch[0].replace(headerRegex, episode); - const sickPick = { - id: show.number, - html, - }; - - return sickPicksAcc.concat(sickPick); - } - - return sickPicksAcc; - }, []); -} - -module.exports = { - getShows, - getShow, - getAllShowSickPicks, - getShowsList, -}; diff --git a/lib/initMiddleware.js b/lib/initMiddleware.js deleted file mode 100644 index a70041d7d..000000000 --- a/lib/initMiddleware.js +++ /dev/null @@ -1,13 +0,0 @@ -// Helper method to wait for a middleware to execute before continuing -// And to throw an error when an error happens in a middleware -export default function initMiddleware(middleware) { - return (req, res) => - new Promise((resolve, reject) => { - middleware(req, res, (result) => { - if (result instanceof Error) { - return reject(result); - } - return resolve(result); - }); - }); -} diff --git a/next.config.js b/next.config.js deleted file mode 100644 index 857bd0ffe..000000000 --- a/next.config.js +++ /dev/null @@ -1,48 +0,0 @@ -const path = require('path'); -const glob = require('glob'); - -module.exports = { - rewrites() { - return [ - { - source: '/', - destination: '/show/latest/latest', - }, - ]; - }, - webpack: (config) => { - config.module.rules.push( - { - test: /\.(css|styl)/, - loader: 'emit-file-loader', - options: { - name: 'dist/[path][name].[ext]', - }, - }, - { - test: /\.css$/, - use: ['babel-loader', 'raw-loader', 'postcss-loader'], - }, - { - test: /\.styl$/, - use: [ - // 'babel-loader', - 'raw-loader', - 'postcss-loader', - { - loader: 'stylus-loader', - options: { - stylusOptions: { - includePaths: ['styles', 'node_modules'] - .map((d) => path.join(__dirname, d)) - .map((g) => glob.sync(g)) - .reduce((a, c) => a.concat(c), []), - }, - }, - }, - ], - } - ); - return config; - }, -}; diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index dd786962e..000000000 --- a/package-lock.json +++ /dev/null @@ -1,12915 +0,0 @@ -{ - "name": "syntax", - "lockfileVersion": 2, - "requires": true, - "packages": { - "": { - "name": "syntax", - "dependencies": { - "@babel/eslint-parser": "^7.16.5", - "@babel/preset-react": "^7.16.7", - "@types/node": "^16.11.19", - "@typescript-eslint/eslint-plugin": "^5.9.1", - "@typescript-eslint/parser": "^5.9.1", - "autoprefixer": "10.4.1", - "babel-loader": "^7.1.5", - "cors": "^2.8.5", - "date-fns": "^2.28.0", - "emit-file-loader": "^0.0.2", - "eslint-config-airbnb-typescript": "^16.1.0", - "glob": "7.2.0", - "meta-marked": "^0.5.0", - "next": "^12.0.7", - "now": "^20.1.2", - "postcss-easy-import": "3.0.0", - "postcss-loader": "6.2.1", - "prop-types": "^15.8.0", - "raw-loader": "^4.0.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-hls-player": "^3.0.7", - "react-icons": "^4.3.1", - "speakingurl": "^14.0.1", - "typescript": "^4.5.4" - }, - "devDependencies": { - "@babel/core": "^7.16.7", - "eslint": "^8.6.0", - "eslint-config-airbnb": "^19.0.4", - "eslint-config-prettier": "^8.3.0", - "eslint-config-wesbos": "^3.0.2", - "eslint-plugin-html": "^6.2.0", - "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.3.0", - "prettier": "^2.5.1", - "stylus": "^0.56.0", - "stylus-loader": "^6.2.0" - }, - "engines": { - "node": ">=18.0.0" - } - }, - "node_modules/@babel/code-frame": { - "version": "7.12.11", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz", - "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==", - "dependencies": { - "@babel/highlight": "^7.10.4" - } - }, - "node_modules/@babel/compat-data": { - "version": "7.16.4", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.4.tgz", - "integrity": "sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==", - "dev": true, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/core": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.7.tgz", - "integrity": "sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.16.7", - "@babel/helper-compilation-targets": "^7.16.7", - "@babel/helper-module-transforms": "^7.16.7", - "@babel/helpers": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7", - "convert-source-map": "^1.7.0", - "debug": "^4.1.0", - "gensync": "^1.0.0-beta.2", - "json5": "^2.1.2", - "semver": "^6.3.0", - "source-map": "^0.5.0" - }, - "engines": { - "node": ">=6.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/babel" - } - }, - "node_modules/@babel/core/node_modules/@babel/code-frame": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", - "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, - "dependencies": { - "@babel/highlight": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/core/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/core/node_modules/json5": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", - "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, - "dependencies": { - "minimist": "^1.2.5" - }, - "bin": { - "json5": "lib/cli.js" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@babel/core/node_modules/source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/@babel/core/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/eslint-parser": { - "version": "7.16.5", - "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.5.tgz", - "integrity": "sha512-mUqYa46lgWqHKQ33Q6LNCGp/wPR3eqOYTUixHFsfrSQqRxH0+WOzca75iEjFr5RDGH1dDz622LaHhLOzOuQRUA==", - "dependencies": { - "eslint-scope": "^5.1.1", - "eslint-visitor-keys": "^2.1.0", - "semver": "^6.3.0" - }, - "engines": { - "node": "^10.13.0 || ^12.13.0 || >=14.0.0" - }, - "peerDependencies": { - "@babel/core": ">=7.11.0", - "eslint": "^7.5.0 || ^8.0.0" - } - }, - "node_modules/@babel/eslint-parser/node_modules/eslint-scope": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", - "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", - "dependencies": { - "esrecurse": "^4.3.0", - "estraverse": "^4.1.1" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/@babel/eslint-parser/node_modules/eslint-visitor-keys": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", - "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", - "engines": { - "node": ">=10" - } - }, - "node_modules/@babel/eslint-parser/node_modules/estraverse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", - "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", - "engines": { - "node": ">=4.0" - } - }, - "node_modules/@babel/generator": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz", - "integrity": "sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7", - "jsesc": "^2.5.1", - "source-map": "^0.5.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/generator/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/generator/node_modules/source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/@babel/generator/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-annotate-as-pure": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz", - "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==", - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-annotate-as-pure/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-annotate-as-pure/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-compilation-targets": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz", - "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==", - "dev": true, - "dependencies": { - "@babel/compat-data": "^7.16.4", - "@babel/helper-validator-option": "^7.16.7", - "browserslist": "^4.17.5", - "semver": "^6.3.0" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0" - } - }, - "node_modules/@babel/helper-environment-visitor": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz", - "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-environment-visitor/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-environment-visitor/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-function-name": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz", - "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==", - "dev": true, - "dependencies": { - "@babel/helper-get-function-arity": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-function-name/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-function-name/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-get-function-arity": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz", - "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-get-function-arity/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-get-function-arity/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-hoist-variables": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz", - "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-hoist-variables/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-hoist-variables/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-module-imports": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", - "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-module-imports/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-module-imports/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-module-transforms": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz", - "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==", - "dev": true, - "dependencies": { - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-module-imports": "^7.16.7", - "@babel/helper-simple-access": "^7.16.7", - "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/helper-validator-identifier": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-module-transforms/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-module-transforms/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-plugin-utils": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz", - "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==", - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-simple-access": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz", - "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-simple-access/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-simple-access/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-split-export-declaration": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz", - "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==", - "dev": true, - "dependencies": { - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-split-export-declaration/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-split-export-declaration/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/helper-validator-identifier": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz", - "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==", - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helper-validator-option": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz", - "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==", - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helpers": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz", - "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==", - "dev": true, - "dependencies": { - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helpers/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/helpers/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.7.tgz", - "integrity": "sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==", - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "chalk": "^2.0.0", - "js-tokens": "^4.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight/node_modules/js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" - }, - "node_modules/@babel/parser": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.7.tgz", - "integrity": "sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==", - "dev": true, - "bin": { - "parser": "bin/babel-parser.js" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@babel/plugin-syntax-jsx": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz", - "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==", - "dependencies": { - "@babel/helper-plugin-utils": "^7.14.5" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@babel/plugin-transform-react-display-name": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz", - "integrity": "sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==", - "dependencies": { - "@babel/helper-plugin-utils": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@babel/plugin-transform-react-jsx": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.7.tgz", - "integrity": "sha512-8D16ye66fxiE8m890w0BpPpngG9o9OVBBy0gH2E+2AR7qMR2ZpTYJEqLxAsoroenMId0p/wMW+Blc0meDgu0Ag==", - "dependencies": { - "@babel/helper-annotate-as-pure": "^7.16.7", - "@babel/helper-module-imports": "^7.16.7", - "@babel/helper-plugin-utils": "^7.16.7", - "@babel/plugin-syntax-jsx": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@babel/plugin-transform-react-jsx-development": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz", - "integrity": "sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==", - "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/plugin-syntax-jsx": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz", - "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==", - "dependencies": { - "@babel/helper-plugin-utils": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/types": { - "version": "7.16.8", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz", - "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==", - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/plugin-transform-react-jsx/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/plugin-transform-react-pure-annotations": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz", - "integrity": "sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==", - "dependencies": { - "@babel/helper-annotate-as-pure": "^7.16.7", - "@babel/helper-plugin-utils": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@babel/preset-react": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.16.7.tgz", - "integrity": "sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==", - "dependencies": { - "@babel/helper-plugin-utils": "^7.16.7", - "@babel/helper-validator-option": "^7.16.7", - "@babel/plugin-transform-react-display-name": "^7.16.7", - "@babel/plugin-transform-react-jsx": "^7.16.7", - "@babel/plugin-transform-react-jsx-development": "^7.16.7", - "@babel/plugin-transform-react-pure-annotations": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0-0" - } - }, - "node_modules/@babel/runtime": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz", - "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==", - "dependencies": { - "regenerator-runtime": "^0.13.4" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/runtime-corejs3": { - "version": "7.12.1", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.12.1.tgz", - "integrity": "sha512-umhPIcMrlBZ2aTWlWjUseW9LjQKxi1dpFlQS8DzsxB//5K+u6GLTC/JliPKHsd5kJVPIU6X/Hy0YvWOYPcMxBw==", - "dev": true, - "dependencies": { - "core-js-pure": "^3.0.0", - "regenerator-runtime": "^0.13.4" - } - }, - "node_modules/@babel/runtime-corejs3/node_modules/regenerator-runtime": { - "version": "0.13.7", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==", - "dev": true - }, - "node_modules/@babel/runtime/node_modules/regenerator-runtime": { - "version": "0.13.7", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==" - }, - "node_modules/@babel/template": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", - "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/template/node_modules/@babel/code-frame": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", - "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, - "dependencies": { - "@babel/highlight": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/template/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/template/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/traverse": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.7.tgz", - "integrity": "sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.16.7", - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-function-name": "^7.16.7", - "@babel/helper-hoist-variables": "^7.16.7", - "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/types": "^7.16.7", - "debug": "^4.1.0", - "globals": "^11.1.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/traverse/node_modules/@babel/code-frame": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", - "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, - "dependencies": { - "@babel/highlight": "^7.16.7" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/traverse/node_modules/@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "dependencies": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/traverse/node_modules/globals": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/traverse/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/types": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", - "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", - "dependencies": { - "@babel/helper-validator-identifier": "^7.14.9", - "to-fast-properties": "^2.0.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/types/node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "engines": { - "node": ">=4" - } - }, - "node_modules/@eslint/eslintrc": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz", - "integrity": "sha512-BLxsnmK3KyPunz5wmCCpqy0YelEoxxGmH73Is+Z74oOTMtExcjkr3dDR6quwrjh1YspA8DH9gnX1o069KiS9AQ==", - "dev": true, - "dependencies": { - "ajv": "^6.12.4", - "debug": "^4.3.2", - "espree": "^9.2.0", - "globals": "^13.9.0", - "ignore": "^4.0.6", - "import-fresh": "^3.2.1", - "js-yaml": "^4.1.0", - "minimatch": "^3.0.4", - "strip-json-comments": "^3.1.1" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - } - }, - "node_modules/@eslint/eslintrc/node_modules/globals": { - "version": "13.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz", - "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==", - "dev": true, - "dependencies": { - "type-fest": "^0.20.2" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@eslint/eslintrc/node_modules/type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@hapi/accept": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@hapi/accept/-/accept-5.0.2.tgz", - "integrity": "sha512-CmzBx/bXUR8451fnZRuZAJRlzgm0Jgu5dltTX/bszmR2lheb9BpyN47Q1RbaGTsvFzn0PXAEs+lXDKfshccYZw==", - "dependencies": { - "@hapi/boom": "9.x.x", - "@hapi/hoek": "9.x.x" - } - }, - "node_modules/@hapi/boom": { - "version": "9.1.4", - "resolved": "https://registry.npmjs.org/@hapi/boom/-/boom-9.1.4.tgz", - "integrity": "sha512-Ls1oH8jaN1vNsqcaHVYJrKmgMcKsC1wcp8bujvXrHaAqD2iDYq3HoOwsxwo09Cuda5R5nC0o0IxlrlTuvPuzSw==", - "dependencies": { - "@hapi/hoek": "9.x.x" - } - }, - "node_modules/@hapi/hoek": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz", - "integrity": "sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==" - }, - "node_modules/@humanwhocodes/config-array": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz", - "integrity": "sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==", - "dev": true, - "dependencies": { - "@humanwhocodes/object-schema": "^1.2.1", - "debug": "^4.1.1", - "minimatch": "^3.0.4" - }, - "engines": { - "node": ">=10.10.0" - } - }, - "node_modules/@humanwhocodes/object-schema": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", - "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", - "dev": true - }, - "node_modules/@napi-rs/triples": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz", - "integrity": "sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==" - }, - "node_modules/@next/env": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.7.tgz", - "integrity": "sha512-TNDqBV37wd95SiNdZsSUq8gnnrTwr+aN9wqy4Zxrxw4bC/jCHNsbK94DxjkG99VL30VCRXXDBTA1/Wa2jIpF9Q==" - }, - "node_modules/@next/polyfill-module": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.7.tgz", - "integrity": "sha512-sA8LAMMlmcspIZw/jeQuJTyA3uGrqOhTBaQE+G9u6DPohqrBFRkaz7RzzJeqXkUXw600occsIBknSjyVd1R67A==" - }, - "node_modules/@next/react-dev-overlay": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.7.tgz", - "integrity": "sha512-dSQLgpZ5uzyittFtIHlJCLAbc0LlMFbRBSYuGsIlrtGyjYN+WMcnz8lK48VLxNPFGuB/hEzkWV4TW5Zu75+Fzg==", - "dependencies": { - "@babel/code-frame": "7.12.11", - "anser": "1.4.9", - "chalk": "4.0.0", - "classnames": "2.2.6", - "css.escape": "1.5.1", - "data-uri-to-buffer": "3.0.1", - "platform": "1.3.6", - "shell-quote": "1.7.3", - "source-map": "0.8.0-beta.0", - "stacktrace-parser": "0.1.10", - "strip-ansi": "6.0.1" - }, - "peerDependencies": { - "react": "^17.0.2", - "react-dom": "^17.0.2", - "webpack": "^4 || ^5" - }, - "peerDependenciesMeta": { - "webpack": { - "optional": true - } - } - }, - "node_modules/@next/react-dev-overlay/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/@next/react-dev-overlay/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@next/react-dev-overlay/node_modules/chalk": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz", - "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@next/react-dev-overlay/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@next/react-dev-overlay/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "node_modules/@next/react-dev-overlay/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/@next/react-dev-overlay/node_modules/source-map": { - "version": "0.8.0-beta.0", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz", - "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==", - "dependencies": { - "whatwg-url": "^7.0.0" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/@next/react-dev-overlay/node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/@next/react-dev-overlay/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/@next/react-refresh-utils": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.7.tgz", - "integrity": "sha512-Pglj1t+7RxH0txEqVcD8ZxrJgqLDmKvQDqxKq3ZPRWxMv7LTl7FVT2Pnb36QFeBwCvMVl67jxsADKsW0idz8sA==", - "peerDependencies": { - "react-refresh": "0.8.3", - "webpack": "^4 || ^5" - }, - "peerDependenciesMeta": { - "webpack": { - "optional": true - } - } - }, - "node_modules/@next/swc-darwin-x64": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.7.tgz", - "integrity": "sha512-km+6Rx6TvbraoQ1f0MXa69ol/x0RxzucFGa2OgZaYJERas0spy0iwW8hpASsGcf597D8VRW1x+R2C7ZdjVBSTw==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@nodelib/fs.scandir": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", - "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", - "dependencies": { - "@nodelib/fs.stat": "2.0.5", - "run-parallel": "^1.1.9" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/@nodelib/fs.stat": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", - "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", - "engines": { - "node": ">= 8" - } - }, - "node_modules/@nodelib/fs.walk": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", - "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", - "dependencies": { - "@nodelib/fs.scandir": "2.1.5", - "fastq": "^1.6.0" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/@sindresorhus/is": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", - "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==", - "engines": { - "node": ">=6" - } - }, - "node_modules/@szmarczak/http-timer": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", - "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==", - "dependencies": { - "defer-to-connect": "^1.0.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/@types/json-schema": { - "version": "7.0.9", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz", - "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==" - }, - "node_modules/@types/json5": { - "version": "0.0.29", - "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", - "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", - "dev": true - }, - "node_modules/@types/node": { - "version": "16.11.19", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.19.tgz", - "integrity": "sha512-BPAcfDPoHlRQNKktbsbnpACGdypPFBuX4xQlsWDE7B8XXcfII+SpOLay3/qZmCLb39kV5S1RTYwXdkx2lwLYng==" - }, - "node_modules/@types/parse-json": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" - }, - "node_modules/@typescript-eslint/eslint-plugin": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.9.1.tgz", - "integrity": "sha512-Xv9tkFlyD4MQGpJgTo6wqDqGvHIRmRgah/2Sjz1PUnJTawjHWIwBivUE9x0QtU2WVii9baYgavo/bHjrZJkqTw==", - "dependencies": { - "@typescript-eslint/experimental-utils": "5.9.1", - "@typescript-eslint/scope-manager": "5.9.1", - "@typescript-eslint/type-utils": "5.9.1", - "debug": "^4.3.2", - "functional-red-black-tree": "^1.0.1", - "ignore": "^5.1.8", - "regexpp": "^3.2.0", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "@typescript-eslint/parser": "^5.0.0", - "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", - "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==", - "engines": { - "node": ">= 4" - } - }, - "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@typescript-eslint/experimental-utils": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.9.1.tgz", - "integrity": "sha512-cb1Njyss0mLL9kLXgS/eEY53SZQ9sT519wpX3i+U457l2UXRDuo87hgKfgRazmu9/tQb0x2sr3Y0yrU+Zz0y+w==", - "dependencies": { - "@types/json-schema": "^7.0.9", - "@typescript-eslint/scope-manager": "5.9.1", - "@typescript-eslint/types": "5.9.1", - "@typescript-eslint/typescript-estree": "5.9.1", - "eslint-scope": "^5.1.1", - "eslint-utils": "^3.0.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" - } - }, - "node_modules/@typescript-eslint/experimental-utils/node_modules/eslint-scope": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", - "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", - "dependencies": { - "esrecurse": "^4.3.0", - "estraverse": "^4.1.1" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/@typescript-eslint/experimental-utils/node_modules/estraverse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", - "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", - "engines": { - "node": ">=4.0" - } - }, - "node_modules/@typescript-eslint/parser": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.9.1.tgz", - "integrity": "sha512-PLYO0AmwD6s6n0ZQB5kqPgfvh73p0+VqopQQLuNfi7Lm0EpfKyDalchpVwkE+81k5HeiRrTV/9w1aNHzjD7C4g==", - "dependencies": { - "@typescript-eslint/scope-manager": "5.9.1", - "@typescript-eslint/types": "5.9.1", - "@typescript-eslint/typescript-estree": "5.9.1", - "debug": "^4.3.2" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/@typescript-eslint/scope-manager": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.9.1.tgz", - "integrity": "sha512-8BwvWkho3B/UOtzRyW07ffJXPaLSUKFBjpq8aqsRvu6HdEuzCY57+ffT7QoV4QXJXWSU1+7g3wE4AlgImmQ9pQ==", - "dependencies": { - "@typescript-eslint/types": "5.9.1", - "@typescript-eslint/visitor-keys": "5.9.1" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/@typescript-eslint/type-utils": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.9.1.tgz", - "integrity": "sha512-tRSpdBnPRssjlUh35rE9ug5HrUvaB9ntREy7gPXXKwmIx61TNN7+l5YKgi1hMKxo5NvqZCfYhA5FvyuJG6X6vg==", - "dependencies": { - "@typescript-eslint/experimental-utils": "5.9.1", - "debug": "^4.3.2", - "tsutils": "^3.21.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "*" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/@typescript-eslint/types": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.9.1.tgz", - "integrity": "sha512-SsWegWudWpkZCwwYcKoDwuAjoZXnM1y2EbEerTHho19Hmm+bQ56QG4L4jrtCu0bI5STaRTvRTZmjprWlTw/5NQ==", - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/@typescript-eslint/typescript-estree": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.9.1.tgz", - "integrity": "sha512-gL1sP6A/KG0HwrahVXI9fZyeVTxEYV//6PmcOn1tD0rw8VhUWYeZeuWHwwhnewnvEMcHjhnJLOBhA9rK4vmb8A==", - "dependencies": { - "@typescript-eslint/types": "5.9.1", - "@typescript-eslint/visitor-keys": "5.9.1", - "debug": "^4.3.2", - "globby": "^11.0.4", - "is-glob": "^4.0.3", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } - } - }, - "node_modules/@typescript-eslint/typescript-estree/node_modules/array-union": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", - "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", - "engines": { - "node": ">=8" - } - }, - "node_modules/@typescript-eslint/typescript-estree/node_modules/globby": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", - "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", - "dependencies": { - "array-union": "^2.1.0", - "dir-glob": "^3.0.1", - "fast-glob": "^3.2.9", - "ignore": "^5.2.0", - "merge2": "^1.4.1", - "slash": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/@typescript-eslint/typescript-estree/node_modules/ignore": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", - "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==", - "engines": { - "node": ">= 4" - } - }, - "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/@typescript-eslint/visitor-keys": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.9.1.tgz", - "integrity": "sha512-Xh37pNz9e9ryW4TVdwiFzmr4hloty8cFj8GTWMXh3Z8swGwyQWeCcNgF0hm6t09iZd6eiZmIf4zHedQVP6TVtg==", - "dependencies": { - "@typescript-eslint/types": "5.9.1", - "eslint-visitor-keys": "^3.0.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - } - }, - "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz", - "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==", - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - } - }, - "node_modules/@vercel/build-utils": { - "version": "2.5.4", - "resolved": "https://registry.npmjs.org/@vercel/build-utils/-/build-utils-2.5.4.tgz", - "integrity": "sha512-xPvYkxhpBXNIZQUrsmC3g58Heapaev4D8vrH3UcBgsvttU8uTQiuuISOOeTwZpufPxgZT5wgF0DRBybEulnCew==" - }, - "node_modules/@vercel/go": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/@vercel/go/-/go-1.1.6.tgz", - "integrity": "sha512-swA2crS08fkPmw4UkR9yjmoL8FOCzuNHLFDqj8oM1V9ni610ibJ7Xk57jI8uyS7bTecQVh8VUxihb+SF0GT+aw==" - }, - "node_modules/@vercel/node": { - "version": "1.8.4", - "resolved": "https://registry.npmjs.org/@vercel/node/-/node-1.8.4.tgz", - "integrity": "sha512-4bwJVqia4e/qDgBbdDWL2INZS5F/nouUDK+onJwi3xKGy7829cb8b9g2j7pMcqonv2U/xzOCUMyTr+uESx9hHQ==", - "dependencies": { - "@types/node": "*", - "ts-node": "8.9.1", - "typescript": "3.9.3" - } - }, - "node_modules/@vercel/node/node_modules/typescript": { - "version": "3.9.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.3.tgz", - "integrity": "sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==", - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, - "node_modules/@vercel/python": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@vercel/python/-/python-1.2.3.tgz", - "integrity": "sha512-DJRvL6bmt4m0xrkzSKUbP8mK57YSDdTBWoo0JYyXq/o2golQrv/wQTalbNchd4P8NhVL3mZuk/1JNYuv5u1rKQ==" - }, - "node_modules/@vercel/ruby": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@vercel/ruby/-/ruby-1.2.4.tgz", - "integrity": "sha512-g19vrrmJ4MTJCRB/bvx8DahIsml1iPn7wsdHf5k3QVN6lT0dlDILSBwpERC4hqzndimaApsmWOfjYtY9/L6+tQ==" - }, - "node_modules/acorn": { - "version": "8.7.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz", - "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==", - "dev": true, - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/acorn-jsx": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, - "peerDependencies": { - "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" - } - }, - "node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, - "node_modules/anser": { - "version": "1.4.9", - "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.9.tgz", - "integrity": "sha512-AI+BjTeGt2+WFk4eWcqbQ7snZpDBt8SaLlj0RT2h5xfdWaiy51OjYvqwMrNzJLGy8iOAL6nKDITWO+rd4MkYEA==" - }, - "node_modules/ansi-align": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz", - "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==", - "dependencies": { - "string-width": "^3.0.0" - } - }, - "node_modules/ansi-align/node_modules/ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "engines": { - "node": ">=6" - } - }, - "node_modules/ansi-align/node_modules/emoji-regex": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" - }, - "node_modules/ansi-align/node_modules/is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=", - "engines": { - "node": ">=4" - } - }, - "node_modules/ansi-align/node_modules/string-width": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", - "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", - "dependencies": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/ansi-align/node_modules/strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "dependencies": { - "ansi-regex": "^4.1.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/ansi-colors": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", - "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dependencies": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/arg": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", - "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==" - }, - "node_modules/argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, - "node_modules/aria-query": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz", - "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.10.2", - "@babel/runtime-corejs3": "^7.10.2" - }, - "engines": { - "node": ">=6.0" - } - }, - "node_modules/array-includes": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz", - "integrity": "sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1", - "get-intrinsic": "^1.1.1", - "is-string": "^1.0.7" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/array-union": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", - "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", - "dependencies": { - "array-uniq": "^1.0.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array-uniq": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", - "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/array.prototype.flat": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz", - "integrity": "sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/array.prototype.flatmap": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz", - "integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.0", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/asn1.js": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz", - "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==", - "dependencies": { - "bn.js": "^4.0.0", - "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0", - "safer-buffer": "^2.1.0" - } - }, - "node_modules/asn1.js/node_modules/bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - }, - "node_modules/assert": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz", - "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==", - "dependencies": { - "es6-object-assign": "^1.1.0", - "is-nan": "^1.2.1", - "object-is": "^1.0.1", - "util": "^0.12.0" - } - }, - "node_modules/ast-types-flow": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", - "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=", - "dev": true - }, - "node_modules/atob": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "dev": true, - "bin": { - "atob": "bin/atob.js" - }, - "engines": { - "node": ">= 4.5.0" - } - }, - "node_modules/autoprefixer": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz", - "integrity": "sha512-B3ZEG7wtzXDRCEFsan7HmR2AeNsxdJB0+sEC0Hc5/c2NbhJqPwuZm+tn233GBVw82L+6CtD6IPSfVruwKjfV3A==", - "dependencies": { - "browserslist": "^4.19.1", - "caniuse-lite": "^1.0.30001294", - "fraction.js": "^4.1.2", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, - "node_modules/available-typed-arrays": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", - "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/axe-core": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz", - "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/axobject-query": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", - "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", - "dev": true - }, - "node_modules/babel-loader": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-7.1.5.tgz", - "integrity": "sha512-iCHfbieL5d1LfOQeeVJEUyD9rTwBcP/fcEbRCfempxTDuqrKpu0AZjLAQHEQa3Yqyj9ORKe2iHfoj4rHLf7xpw==", - "dependencies": { - "find-cache-dir": "^1.0.0", - "loader-utils": "^1.0.2", - "mkdirp": "^0.5.1" - }, - "engines": { - "node": ">=4" - }, - "peerDependencies": { - "babel-core": "6", - "webpack": "2 || 3 || 4" - } - }, - "node_modules/balanced-match": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" - }, - "node_modules/base64-js": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", - "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, - "node_modules/big.js": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", - "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", - "engines": { - "node": "*" - } - }, - "node_modules/binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "engines": { - "node": ">=8" - } - }, - "node_modules/bn.js": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz", - "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==" - }, - "node_modules/boxen": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz", - "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==", - "dependencies": { - "ansi-align": "^3.0.0", - "camelcase": "^5.3.1", - "chalk": "^3.0.0", - "cli-boxes": "^2.2.0", - "string-width": "^4.1.0", - "term-size": "^2.1.0", - "type-fest": "^0.8.1", - "widest-line": "^3.1.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/boxen/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/boxen/node_modules/camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", - "engines": { - "node": ">=6" - } - }, - "node_modules/boxen/node_modules/chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/boxen/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/boxen/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "node_modules/boxen/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/boxen/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/boxen/node_modules/type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", - "engines": { - "node": ">=8" - } - }, - "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dependencies": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dependencies": { - "fill-range": "^7.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/brorand": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", - "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=" - }, - "node_modules/browserify-aes": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", - "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", - "dependencies": { - "buffer-xor": "^1.0.3", - "cipher-base": "^1.0.0", - "create-hash": "^1.1.0", - "evp_bytestokey": "^1.0.3", - "inherits": "^2.0.1", - "safe-buffer": "^5.0.1" - } - }, - "node_modules/browserify-cipher": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz", - "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==", - "dependencies": { - "browserify-aes": "^1.0.4", - "browserify-des": "^1.0.0", - "evp_bytestokey": "^1.0.0" - } - }, - "node_modules/browserify-des": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz", - "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==", - "dependencies": { - "cipher-base": "^1.0.1", - "des.js": "^1.0.0", - "inherits": "^2.0.1", - "safe-buffer": "^5.1.2" - } - }, - "node_modules/browserify-rsa": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz", - "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==", - "dependencies": { - "bn.js": "^5.0.0", - "randombytes": "^2.0.1" - } - }, - "node_modules/browserify-sign": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz", - "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==", - "dependencies": { - "bn.js": "^5.1.1", - "browserify-rsa": "^4.0.1", - "create-hash": "^1.2.0", - "create-hmac": "^1.1.7", - "elliptic": "^6.5.3", - "inherits": "^2.0.4", - "parse-asn1": "^5.1.5", - "readable-stream": "^3.6.0", - "safe-buffer": "^5.2.0" - } - }, - "node_modules/browserify-zlib": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz", - "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==", - "dependencies": { - "pako": "~1.0.5" - } - }, - "node_modules/browserslist": { - "version": "4.19.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz", - "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==", - "dependencies": { - "caniuse-lite": "^1.0.30001286", - "electron-to-chromium": "^1.4.17", - "escalade": "^3.1.1", - "node-releases": "^2.0.1", - "picocolors": "^1.0.0" - }, - "bin": { - "browserslist": "cli.js" - }, - "engines": { - "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } - }, - "node_modules/buffer": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz", - "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==", - "dependencies": { - "base64-js": "^1.0.2", - "ieee754": "^1.1.4" - } - }, - "node_modules/buffer-from": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", - "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==" - }, - "node_modules/buffer-xor": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz", - "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=" - }, - "node_modules/builtin-status-codes": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", - "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=" - }, - "node_modules/cacheable-request": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz", - "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==", - "dependencies": { - "clone-response": "^1.0.2", - "get-stream": "^5.1.0", - "http-cache-semantics": "^4.0.0", - "keyv": "^3.0.0", - "lowercase-keys": "^2.0.0", - "normalize-url": "^4.1.0", - "responselike": "^1.0.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/cacheable-request/node_modules/get-stream": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", - "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", - "dependencies": { - "pump": "^3.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/cacheable-request/node_modules/lowercase-keys": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz", - "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==", - "engines": { - "node": ">=8" - } - }, - "node_modules/call-bind": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", - "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", - "dependencies": { - "function-bind": "^1.1.1", - "get-intrinsic": "^1.0.2" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/caniuse-lite": { - "version": "1.0.30001457", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001457.tgz", - "integrity": "sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA==", - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/caniuse-lite" - } - ] - }, - "node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/chokidar": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", - "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", - "dependencies": { - "anymatch": "~3.1.1", - "braces": "~3.0.2", - "glob-parent": "~5.1.0", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.5.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.1" - } - }, - "node_modules/chokidar/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/ci-info": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz", - "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==" - }, - "node_modules/cipher-base": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz", - "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==", - "dependencies": { - "inherits": "^2.0.1", - "safe-buffer": "^5.0.1" - } - }, - "node_modules/classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" - }, - "node_modules/cli-boxes": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz", - "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==", - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/clone-response": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz", - "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=", - "dependencies": { - "mimic-response": "^1.0.0" - } - }, - "node_modules/clone-response/node_modules/mimic-response": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", - "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==", - "engines": { - "node": ">=4" - } - }, - "node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" - }, - "node_modules/colorette": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", - "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==" - }, - "node_modules/commondir": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", - "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=" - }, - "node_modules/concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" - }, - "node_modules/configstore": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", - "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==", - "dependencies": { - "dot-prop": "^5.2.0", - "graceful-fs": "^4.1.2", - "make-dir": "^3.0.0", - "unique-string": "^2.0.0", - "write-file-atomic": "^3.0.0", - "xdg-basedir": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/confusing-browser-globals": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz", - "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==" - }, - "node_modules/constants-browserify": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", - "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=" - }, - "node_modules/convert-source-map": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", - "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", - "dependencies": { - "safe-buffer": "~5.1.1" - } - }, - "node_modules/convert-source-map/node_modules/safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" - }, - "node_modules/core-js-pure": { - "version": "3.6.5", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.6.5.tgz", - "integrity": "sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==", - "dev": true, - "hasInstallScript": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, - "node_modules/cors": { - "version": "2.8.5", - "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", - "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", - "dependencies": { - "object-assign": "^4", - "vary": "^1" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/cosmiconfig": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", - "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", - "dependencies": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.2.1", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.10.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/create-ecdh": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", - "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==", - "dependencies": { - "bn.js": "^4.1.0", - "elliptic": "^6.5.3" - } - }, - "node_modules/create-ecdh/node_modules/bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - }, - "node_modules/create-hash": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", - "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", - "dependencies": { - "cipher-base": "^1.0.1", - "inherits": "^2.0.1", - "md5.js": "^1.3.4", - "ripemd160": "^2.0.1", - "sha.js": "^2.4.0" - } - }, - "node_modules/create-hmac": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", - "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", - "dependencies": { - "cipher-base": "^1.0.3", - "create-hash": "^1.1.0", - "inherits": "^2.0.1", - "ripemd160": "^2.0.0", - "safe-buffer": "^5.0.1", - "sha.js": "^2.4.8" - } - }, - "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, - "dependencies": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/crypto-browserify": { - "version": "3.12.0", - "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz", - "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==", - "dependencies": { - "browserify-cipher": "^1.0.0", - "browserify-sign": "^4.0.0", - "create-ecdh": "^4.0.0", - "create-hash": "^1.1.0", - "create-hmac": "^1.1.0", - "diffie-hellman": "^5.0.0", - "inherits": "^2.0.1", - "pbkdf2": "^3.0.3", - "public-encrypt": "^4.0.0", - "randombytes": "^2.0.0", - "randomfill": "^1.0.3" - }, - "engines": { - "node": "*" - } - }, - "node_modules/crypto-random-string": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", - "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==", - "engines": { - "node": ">=8" - } - }, - "node_modules/css": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", - "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", - "dev": true, - "dependencies": { - "inherits": "^2.0.4", - "source-map": "^0.6.1", - "source-map-resolve": "^0.6.0" - } - }, - "node_modules/css.escape": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" - }, - "node_modules/cssnano-preset-simple": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz", - "integrity": "sha512-vxQPeoMRqUT3c/9f0vWeVa2nKQIHFpogtoBvFdW4GQ3IvEJ6uauCP6p3Y5zQDLFcI7/+40FTgX12o7XUL0Ko+w==", - "dependencies": { - "caniuse-lite": "^1.0.30001202" - }, - "peerDependencies": { - "postcss": "^8.2.15" - } - }, - "node_modules/cssnano-simple": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssnano-simple/-/cssnano-simple-3.0.0.tgz", - "integrity": "sha512-oU3ueli5Dtwgh0DyeohcIEE00QVfbPR3HzyXdAl89SfnQG3y0/qcpfLVW+jPIh3/rgMZGwuW96rejZGaYE9eUg==", - "dependencies": { - "cssnano-preset-simple": "^3.0.0" - }, - "peerDependencies": { - "postcss": "^8.2.15" - }, - "peerDependenciesMeta": { - "postcss": { - "optional": true - } - } - }, - "node_modules/damerau-levenshtein": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", - "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==", - "dev": true - }, - "node_modules/data-uri-to-buffer": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz", - "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==", - "engines": { - "node": ">= 6" - } - }, - "node_modules/date-fns": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz", - "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==", - "engines": { - "node": ">=0.11" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/date-fns" - } - }, - "node_modules/debug": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", - "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, - "node_modules/debug/node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - }, - "node_modules/decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "dev": true, - "engines": { - "node": ">=0.10" - } - }, - "node_modules/deep-extend": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", - "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/deep-is": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", - "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=", - "dev": true - }, - "node_modules/defer-to-connect": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz", - "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==" - }, - "node_modules/define-properties": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", - "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", - "dependencies": { - "object-keys": "^1.0.12" - }, - "engines": { - "node": ">= 0.4" - } - }, - "node_modules/depd": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", - "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/des.js": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", - "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==", - "dependencies": { - "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0" - } - }, - "node_modules/diff": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", - "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "engines": { - "node": ">=0.3.1" - } - }, - "node_modules/diffie-hellman": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", - "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", - "dependencies": { - "bn.js": "^4.1.0", - "miller-rabin": "^4.0.0", - "randombytes": "^2.0.0" - } - }, - "node_modules/diffie-hellman/node_modules/bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - }, - "node_modules/dir-glob": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", - "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", - "dependencies": { - "path-type": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/doctrine": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", - "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", - "dev": true, - "dependencies": { - "esutils": "^2.0.2" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/dom-serializer": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", - "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", - "dev": true, - "dependencies": { - "domelementtype": "^2.0.1", - "domhandler": "^4.2.0", - "entities": "^2.0.0" - }, - "funding": { - "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" - } - }, - "node_modules/dom-serializer/node_modules/entities": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", - "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", - "dev": true, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, - "node_modules/domain-browser": { - "version": "4.19.0", - "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz", - "integrity": "sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://bevry.me/fund" - } - }, - "node_modules/domelementtype": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", - "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ] - }, - "node_modules/domhandler": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz", - "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==", - "dev": true, - "dependencies": { - "domelementtype": "^2.2.0" - }, - "engines": { - "node": ">= 4" - }, - "funding": { - "url": "https://github.com/fb55/domhandler?sponsor=1" - } - }, - "node_modules/domutils": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", - "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", - "dev": true, - "dependencies": { - "dom-serializer": "^1.0.1", - "domelementtype": "^2.2.0", - "domhandler": "^4.2.0" - }, - "funding": { - "url": "https://github.com/fb55/domutils?sponsor=1" - } - }, - "node_modules/dot-prop": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", - "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", - "dependencies": { - "is-obj": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/duplexer3": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", - "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=" - }, - "node_modules/electron-to-chromium": { - "version": "1.4.32", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.32.tgz", - "integrity": "sha512-7QRVfMlccTFs7cZV3lB0k9Wcm6R6F+w1yBPX+xBAlAP/1oJIstxTev3A4r8REnUUAFph/cIB8y/EBU7PDbJTQw==" - }, - "node_modules/elliptic": { - "version": "6.5.4", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", - "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==", - "dependencies": { - "bn.js": "^4.11.9", - "brorand": "^1.1.0", - "hash.js": "^1.0.0", - "hmac-drbg": "^1.0.1", - "inherits": "^2.0.4", - "minimalistic-assert": "^1.0.1", - "minimalistic-crypto-utils": "^1.0.1" - } - }, - "node_modules/elliptic/node_modules/bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - }, - "node_modules/emit-file-loader": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/emit-file-loader/-/emit-file-loader-0.0.2.tgz", - "integrity": "sha512-2da7hleO5XD//6jt/2Q0LsPnYE/H7AgmVcKGeq2HD+4C+NuN91UM6VT06jasFwzINRuMdV0ORhojPfn2sTFQ3Q==", - "dependencies": { - "loader-utils": "^1.1.0" - } - }, - "node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "node_modules/emojis-list": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", - "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", - "engines": { - "node": ">= 4" - } - }, - "node_modules/encoding": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", - "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "dependencies": { - "iconv-lite": "^0.6.2" - } - }, - "node_modules/encoding/node_modules/iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/end-of-stream": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", - "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", - "dependencies": { - "once": "^1.4.0" - } - }, - "node_modules/enquirer": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", - "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==", - "dev": true, - "dependencies": { - "ansi-colors": "^4.1.1" - }, - "engines": { - "node": ">=8.6" - } - }, - "node_modules/entities": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", - "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", - "dev": true, - "engines": { - "node": ">=0.12" - }, - "funding": { - "url": "https://github.com/fb55/entities?sponsor=1" - } - }, - "node_modules/error-ex": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", - "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dependencies": { - "is-arrayish": "^0.2.1" - } - }, - "node_modules/error-ex/node_modules/is-arrayish": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" - }, - "node_modules/es-abstract": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz", - "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==", - "dependencies": { - "call-bind": "^1.0.2", - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "get-intrinsic": "^1.1.1", - "get-symbol-description": "^1.0.0", - "has": "^1.0.3", - "has-symbols": "^1.0.2", - "internal-slot": "^1.0.3", - "is-callable": "^1.2.4", - "is-negative-zero": "^2.0.1", - "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.1", - "is-string": "^1.0.7", - "is-weakref": "^1.0.1", - "object-inspect": "^1.11.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.2", - "string.prototype.trimend": "^1.0.4", - "string.prototype.trimstart": "^1.0.4", - "unbox-primitive": "^1.0.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/es-to-primitive": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", - "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", - "dependencies": { - "is-callable": "^1.1.4", - "is-date-object": "^1.0.1", - "is-symbol": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/es6-object-assign": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz", - "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=" - }, - "node_modules/escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==", - "engines": { - "node": ">=6" - } - }, - "node_modules/escape-goat": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz", - "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==", - "engines": { - "node": ">=8" - } - }, - "node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "engines": { - "node": ">=0.8.0" - } - }, - "node_modules/eslint": { - "version": "8.6.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.6.0.tgz", - "integrity": "sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw==", - "dev": true, - "dependencies": { - "@eslint/eslintrc": "^1.0.5", - "@humanwhocodes/config-array": "^0.9.2", - "ajv": "^6.10.0", - "chalk": "^4.0.0", - "cross-spawn": "^7.0.2", - "debug": "^4.3.2", - "doctrine": "^3.0.0", - "enquirer": "^2.3.5", - "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.1.0", - "eslint-utils": "^3.0.0", - "eslint-visitor-keys": "^3.1.0", - "espree": "^9.3.0", - "esquery": "^1.4.0", - "esutils": "^2.0.2", - "fast-deep-equal": "^3.1.3", - "file-entry-cache": "^6.0.1", - "functional-red-black-tree": "^1.0.1", - "glob-parent": "^6.0.1", - "globals": "^13.6.0", - "ignore": "^4.0.6", - "import-fresh": "^3.0.0", - "imurmurhash": "^0.1.4", - "is-glob": "^4.0.0", - "js-yaml": "^4.1.0", - "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.4.1", - "lodash.merge": "^4.6.2", - "minimatch": "^3.0.4", - "natural-compare": "^1.4.0", - "optionator": "^0.9.1", - "progress": "^2.0.0", - "regexpp": "^3.2.0", - "semver": "^7.2.1", - "strip-ansi": "^6.0.1", - "strip-json-comments": "^3.1.0", - "text-table": "^0.2.0", - "v8-compile-cache": "^2.0.3" - }, - "bin": { - "eslint": "bin/eslint.js" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "url": "https://opencollective.com/eslint" - } - }, - "node_modules/eslint-config-airbnb": { - "version": "19.0.4", - "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz", - "integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==", - "dev": true, - "dependencies": { - "eslint-config-airbnb-base": "^15.0.0", - "object.assign": "^4.1.2", - "object.entries": "^1.1.5" - }, - "engines": { - "node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "peerDependencies": { - "eslint": "^7.32.0 || ^8.2.0", - "eslint-plugin-import": "^2.25.3", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.3.0" - } - }, - "node_modules/eslint-config-airbnb-base": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz", - "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==", - "dependencies": { - "confusing-browser-globals": "^1.0.10", - "object.assign": "^4.1.2", - "object.entries": "^1.1.5", - "semver": "^6.3.0" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - }, - "peerDependencies": { - "eslint": "^7.32.0 || ^8.2.0", - "eslint-plugin-import": "^2.25.2" - } - }, - "node_modules/eslint-config-airbnb-typescript": { - "version": "16.1.0", - "resolved": "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-16.1.0.tgz", - "integrity": "sha512-W5Cq20KpEx5ZLC54bnVrC37zq2+WD956Kp/Ma3nYFRjT1v9KM63v+DPkrrmmrVqrlDKaD0ivm/qeYmyHV6qKlw==", - "dependencies": { - "eslint-config-airbnb-base": "^15.0.0" - }, - "peerDependencies": { - "@typescript-eslint/eslint-plugin": "^5.0.0", - "@typescript-eslint/parser": "^5.0.0" - } - }, - "node_modules/eslint-config-prettier": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", - "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", - "dev": true, - "bin": { - "eslint-config-prettier": "bin/cli.js" - }, - "peerDependencies": { - "eslint": ">=7.0.0" - } - }, - "node_modules/eslint-config-wesbos": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/eslint-config-wesbos/-/eslint-config-wesbos-3.0.2.tgz", - "integrity": "sha512-lzyvce/Eprb1dST3c5DMwhm7oqb8TpFCwPb1BrNgdVKp+2jdc/yBVEAnwq/One8Avhy9defQUXrVGBusm2v00w==", - "dev": true, - "peerDependencies": { - "@babel/core": "^7.16.0", - "@babel/eslint-parser": "^7.16.3", - "@babel/preset-react": "^7.16.0", - "@types/node": "^16.11.12", - "@typescript-eslint/eslint-plugin": "^5.6.0", - "@typescript-eslint/parser": "^5.6.0", - "eslint": "^8.4.1", - "eslint-config-airbnb": "^19.0.2", - "eslint-config-airbnb-typescript": "^16.1.0", - "eslint-config-prettier": "^8.3.0", - "eslint-plugin-html": "^6.2.0", - "eslint-plugin-import": "^2.25.3", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.27.1", - "eslint-plugin-react-hooks": "^4.3.0", - "prettier": "^2.5.1", - "typescript": "^4.5.2" - } - }, - "node_modules/eslint-import-resolver-node": { - "version": "0.3.6", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz", - "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==", - "dev": true, - "dependencies": { - "debug": "^3.2.7", - "resolve": "^1.20.0" - } - }, - "node_modules/eslint-import-resolver-node/node_modules/debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", - "dev": true, - "dependencies": { - "ms": "^2.1.1" - } - }, - "node_modules/eslint-import-resolver-node/node_modules/ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true - }, - "node_modules/eslint-import-resolver-node/node_modules/resolve": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", - "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dev": true, - "dependencies": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/eslint-module-utils": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz", - "integrity": "sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==", - "dev": true, - "dependencies": { - "debug": "^3.2.7", - "find-up": "^2.1.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint-module-utils/node_modules/debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", - "dev": true, - "dependencies": { - "ms": "^2.1.1" - } - }, - "node_modules/eslint-module-utils/node_modules/find-up": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", - "dev": true, - "dependencies": { - "locate-path": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint-module-utils/node_modules/locate-path": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", - "dev": true, - "dependencies": { - "p-locate": "^2.0.0", - "path-exists": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint-module-utils/node_modules/ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true - }, - "node_modules/eslint-module-utils/node_modules/p-limit": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", - "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", - "dev": true, - "dependencies": { - "p-try": "^1.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint-module-utils/node_modules/p-locate": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", - "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", - "dev": true, - "dependencies": { - "p-limit": "^1.1.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint-module-utils/node_modules/p-try": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", - "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/eslint-plugin-html": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.2.0.tgz", - "integrity": "sha512-vi3NW0E8AJombTvt8beMwkL1R/fdRWl4QSNRNMhVQKWm36/X0KF0unGNAY4mqUF06mnwVWZcIcerrCnfn9025g==", - "dev": true, - "dependencies": { - "htmlparser2": "^7.1.2" - } - }, - "node_modules/eslint-plugin-import": { - "version": "2.25.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz", - "integrity": "sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==", - "dev": true, - "dependencies": { - "array-includes": "^3.1.4", - "array.prototype.flat": "^1.2.5", - "debug": "^2.6.9", - "doctrine": "^2.1.0", - "eslint-import-resolver-node": "^0.3.6", - "eslint-module-utils": "^2.7.2", - "has": "^1.0.3", - "is-core-module": "^2.8.0", - "is-glob": "^4.0.3", - "minimatch": "^3.0.4", - "object.values": "^1.1.5", - "resolve": "^1.20.0", - "tsconfig-paths": "^3.12.0" - }, - "engines": { - "node": ">=4" - }, - "peerDependencies": { - "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8" - } - }, - "node_modules/eslint-plugin-import/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/eslint-plugin-import/node_modules/doctrine": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", - "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", - "dev": true, - "dependencies": { - "esutils": "^2.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/eslint-plugin-import/node_modules/resolve": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", - "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dev": true, - "dependencies": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/eslint-plugin-jsx-a11y": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz", - "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.16.3", - "aria-query": "^4.2.2", - "array-includes": "^3.1.4", - "ast-types-flow": "^0.0.7", - "axe-core": "^4.3.5", - "axobject-query": "^2.2.0", - "damerau-levenshtein": "^1.0.7", - "emoji-regex": "^9.2.2", - "has": "^1.0.3", - "jsx-ast-utils": "^3.2.1", - "language-tags": "^1.0.5", - "minimatch": "^3.0.4" - }, - "engines": { - "node": ">=4.0" - }, - "peerDependencies": { - "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" - } - }, - "node_modules/eslint-plugin-jsx-a11y/node_modules/@babel/runtime": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz", - "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==", - "dev": true, - "dependencies": { - "regenerator-runtime": "^0.13.4" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "dev": true - }, - "node_modules/eslint-plugin-jsx-a11y/node_modules/regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true - }, - "node_modules/eslint-plugin-prettier": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz", - "integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==", - "dev": true, - "dependencies": { - "prettier-linter-helpers": "^1.0.0" - }, - "engines": { - "node": ">=6.0.0" - }, - "peerDependencies": { - "eslint": ">=7.28.0", - "prettier": ">=2.0.0" - }, - "peerDependenciesMeta": { - "eslint-config-prettier": { - "optional": true - } - } - }, - "node_modules/eslint-plugin-react": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz", - "integrity": "sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==", - "dev": true, - "dependencies": { - "array-includes": "^3.1.4", - "array.prototype.flatmap": "^1.2.5", - "doctrine": "^2.1.0", - "estraverse": "^5.3.0", - "jsx-ast-utils": "^2.4.1 || ^3.0.0", - "minimatch": "^3.0.4", - "object.entries": "^1.1.5", - "object.fromentries": "^2.0.5", - "object.hasown": "^1.1.0", - "object.values": "^1.1.5", - "prop-types": "^15.7.2", - "resolve": "^2.0.0-next.3", - "semver": "^6.3.0", - "string.prototype.matchall": "^4.0.6" - }, - "engines": { - "node": ">=4" - }, - "peerDependencies": { - "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" - } - }, - "node_modules/eslint-plugin-react-hooks": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz", - "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==", - "dev": true, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" - } - }, - "node_modules/eslint-plugin-react/node_modules/doctrine": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", - "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", - "dev": true, - "dependencies": { - "esutils": "^2.0.2" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/eslint-plugin-react/node_modules/resolve": { - "version": "2.0.0-next.3", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz", - "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==", - "dev": true, - "dependencies": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/eslint-scope": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz", - "integrity": "sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==", - "dev": true, - "dependencies": { - "esrecurse": "^4.3.0", - "estraverse": "^5.2.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - } - }, - "node_modules/eslint-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", - "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", - "dependencies": { - "eslint-visitor-keys": "^2.0.0" - }, - "engines": { - "node": "^10.0.0 || ^12.0.0 || >= 14.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/mysticatea" - }, - "peerDependencies": { - "eslint": ">=5" - } - }, - "node_modules/eslint-utils/node_modules/eslint-visitor-keys": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", - "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==", - "engines": { - "node": ">=10" - } - }, - "node_modules/eslint/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/eslint/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/eslint/node_modules/chalk": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", - "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/eslint/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/eslint/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/eslint/node_modules/escape-string-regexp": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", - "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/eslint/node_modules/eslint-visitor-keys": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz", - "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==", - "dev": true, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - } - }, - "node_modules/eslint/node_modules/globals": { - "version": "13.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz", - "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==", - "dev": true, - "dependencies": { - "type-fest": "^0.20.2" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/eslint/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/eslint/node_modules/semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/eslint/node_modules/strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "dependencies": { - "ansi-regex": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/eslint/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/eslint/node_modules/type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/espree": { - "version": "9.3.0", - "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.0.tgz", - "integrity": "sha512-d/5nCsb0JcqsSEeQzFZ8DH1RmxPcglRWh24EFTlUEmCKoehXGdpsx0RkHDubqUI8LSAIKMQp4r9SzQ3n+sm4HQ==", - "dev": true, - "dependencies": { - "acorn": "^8.7.0", - "acorn-jsx": "^5.3.1", - "eslint-visitor-keys": "^3.1.0" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - } - }, - "node_modules/espree/node_modules/eslint-visitor-keys": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz", - "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==", - "dev": true, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - } - }, - "node_modules/esprima": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", - "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==", - "bin": { - "esparse": "bin/esparse.js", - "esvalidate": "bin/esvalidate.js" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/esquery": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz", - "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==", - "dev": true, - "dependencies": { - "estraverse": "^5.1.0" - }, - "engines": { - "node": ">=0.10" - } - }, - "node_modules/esrecurse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", - "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", - "dependencies": { - "estraverse": "^5.2.0" - }, - "engines": { - "node": ">=4.0" - } - }, - "node_modules/estraverse": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", - "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", - "engines": { - "node": ">=4.0" - } - }, - "node_modules/esutils": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/etag": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", - "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" - }, - "node_modules/events": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", - "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==", - "engines": { - "node": ">=0.8.x" - } - }, - "node_modules/evp_bytestokey": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz", - "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==", - "dependencies": { - "md5.js": "^1.3.4", - "safe-buffer": "^5.1.1" - } - }, - "node_modules/fast-deep-equal": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" - }, - "node_modules/fast-diff": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", - "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", - "dev": true - }, - "node_modules/fast-glob": { - "version": "3.2.10", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.10.tgz", - "integrity": "sha512-s9nFhFnvR63wls6/kM88kQqDhMu0AfdjqouE2l5GVQPbqLgyFjjU5ry/r2yKsJxpb9Py1EYNqieFrmMaX4v++A==", - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "engines": { - "node": ">=8.6.0" - } - }, - "node_modules/fast-glob/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/fast-json-stable-stringify": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", - "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" - }, - "node_modules/fast-levenshtein": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", - "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", - "dev": true - }, - "node_modules/fastq": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", - "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==", - "dependencies": { - "reusify": "^1.0.4" - } - }, - "node_modules/file-entry-cache": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", - "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", - "dev": true, - "dependencies": { - "flat-cache": "^3.0.4" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - } - }, - "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dependencies": { - "to-regex-range": "^5.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/find-cache-dir": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz", - "integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=", - "dependencies": { - "commondir": "^1.0.1", - "make-dir": "^1.0.0", - "pkg-dir": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/find-cache-dir/node_modules/find-up": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", - "dependencies": { - "locate-path": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/find-cache-dir/node_modules/locate-path": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", - "dependencies": { - "p-locate": "^2.0.0", - "path-exists": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/find-cache-dir/node_modules/make-dir": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", - "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", - "dependencies": { - "pify": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/find-cache-dir/node_modules/p-limit": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", - "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", - "dependencies": { - "p-try": "^1.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/find-cache-dir/node_modules/p-locate": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", - "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", - "dependencies": { - "p-limit": "^1.1.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/find-cache-dir/node_modules/p-try": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", - "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", - "engines": { - "node": ">=4" - } - }, - "node_modules/find-cache-dir/node_modules/pkg-dir": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz", - "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=", - "dependencies": { - "find-up": "^2.1.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/flat-cache": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", - "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", - "dev": true, - "dependencies": { - "flatted": "^3.1.0", - "rimraf": "^3.0.2" - }, - "engines": { - "node": "^10.12.0 || >=12.0.0" - } - }, - "node_modules/flatted": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz", - "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==", - "dev": true - }, - "node_modules/foreach": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz", - "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=" - }, - "node_modules/fraction.js": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz", - "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==", - "engines": { - "node": "*" - }, - "funding": { - "type": "patreon", - "url": "https://www.patreon.com/infusion" - } - }, - "node_modules/fs.realpath": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" - }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, - "node_modules/function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" - }, - "node_modules/functional-red-black-tree": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", - "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" - }, - "node_modules/gensync": { - "version": "1.0.0-beta.2", - "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", - "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", - "dev": true, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/get-intrinsic": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", - "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==", - "dependencies": { - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/get-orientation": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/get-orientation/-/get-orientation-1.1.2.tgz", - "integrity": "sha512-/pViTfifW+gBbh/RnlFYHINvELT9Znt+SYyDKAUL6uV6By019AK/s+i9XP4jSwq7lwP38Fd8HVeTxym3+hkwmQ==", - "dependencies": { - "stream-parser": "^0.3.1" - } - }, - "node_modules/get-stream": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", - "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", - "dependencies": { - "pump": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/get-symbol-description": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz", - "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==", - "dependencies": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/glob": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", - "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/glob-parent": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", - "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", - "dev": true, - "dependencies": { - "is-glob": "^4.0.3" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/glob-to-regexp": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", - "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" - }, - "node_modules/global-dirs": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.0.1.tgz", - "integrity": "sha512-5HqUqdhkEovj2Of/ms3IeS/EekcO54ytHRLV4PEY2rhRwrHXLQjeVEES0Lhka0xwNDtGYn58wyC4s5+MHsOO6A==", - "dependencies": { - "ini": "^1.3.5" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/globby": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", - "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", - "dependencies": { - "array-union": "^1.0.1", - "glob": "^7.0.3", - "object-assign": "^4.0.1", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/globby/node_modules/pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/got": { - "version": "9.6.0", - "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", - "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==", - "dependencies": { - "@sindresorhus/is": "^0.14.0", - "@szmarczak/http-timer": "^1.1.2", - "cacheable-request": "^6.0.0", - "decompress-response": "^3.3.0", - "duplexer3": "^0.1.4", - "get-stream": "^4.1.0", - "lowercase-keys": "^1.0.1", - "mimic-response": "^1.0.1", - "p-cancelable": "^1.0.0", - "to-readable-stream": "^1.0.0", - "url-parse-lax": "^3.0.0" - }, - "engines": { - "node": ">=8.6" - } - }, - "node_modules/got/node_modules/decompress-response": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz", - "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=", - "dependencies": { - "mimic-response": "^1.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/got/node_modules/mimic-response": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", - "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==", - "engines": { - "node": ">=4" - } - }, - "node_modules/graceful-fs": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", - "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==" - }, - "node_modules/has": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", - "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "dependencies": { - "function-bind": "^1.1.1" - }, - "engines": { - "node": ">= 0.4.0" - } - }, - "node_modules/has-bigints": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz", - "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "engines": { - "node": ">=4" - } - }, - "node_modules/has-symbols": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz", - "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-tostringtag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", - "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", - "dependencies": { - "has-symbols": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/has-yarn": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz", - "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==", - "engines": { - "node": ">=8" - } - }, - "node_modules/hash-base": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz", - "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==", - "dependencies": { - "inherits": "^2.0.4", - "readable-stream": "^3.6.0", - "safe-buffer": "^5.2.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/hash.js": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz", - "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==", - "dependencies": { - "inherits": "^2.0.3", - "minimalistic-assert": "^1.0.1" - } - }, - "node_modules/he": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", - "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", - "bin": { - "he": "bin/he" - } - }, - "node_modules/hls.js": { - "version": "0.14.17", - "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-0.14.17.tgz", - "integrity": "sha512-25A7+m6qqp6UVkuzUQ//VVh2EEOPYlOBg32ypr34bcPO7liBMOkKFvbjbCBfiPAOTA/7BSx1Dujft3Th57WyFg==", - "dependencies": { - "eventemitter3": "^4.0.3", - "url-toolkit": "^2.1.6" - } - }, - "node_modules/hmac-drbg": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", - "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=", - "dependencies": { - "hash.js": "^1.0.3", - "minimalistic-assert": "^1.0.0", - "minimalistic-crypto-utils": "^1.0.1" - } - }, - "node_modules/htmlparser2": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz", - "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==", - "dev": true, - "funding": [ - "https://github.com/fb55/htmlparser2?sponsor=1", - { - "type": "github", - "url": "https://github.com/sponsors/fb55" - } - ], - "dependencies": { - "domelementtype": "^2.0.1", - "domhandler": "^4.2.2", - "domutils": "^2.8.0", - "entities": "^3.0.1" - } - }, - "node_modules/http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==" - }, - "node_modules/https-browserify": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", - "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" - }, - "node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/ieee754": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", - "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, - "node_modules/ignore": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", - "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", - "dev": true, - "engines": { - "node": ">= 4" - } - }, - "node_modules/image-size": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz", - "integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==", - "dependencies": { - "queue": "6.0.2" - }, - "bin": { - "image-size": "bin/image-size.js" - }, - "engines": { - "node": ">=12.0.0" - } - }, - "node_modules/import-fresh": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", - "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==", - "dependencies": { - "parent-module": "^1.0.0", - "resolve-from": "^4.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/import-lazy": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", - "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=", - "engines": { - "node": ">=4" - } - }, - "node_modules/imurmurhash": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", - "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", - "engines": { - "node": ">=0.8.19" - } - }, - "node_modules/inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "dependencies": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "node_modules/inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" - }, - "node_modules/ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", - "deprecated": "Please update to ini >=1.3.6 to avoid a prototype pollution issue", - "engines": { - "node": "*" - } - }, - "node_modules/internal-slot": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz", - "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==", - "dependencies": { - "get-intrinsic": "^1.1.0", - "has": "^1.0.3", - "side-channel": "^1.0.4" - }, - "engines": { - "node": ">= 0.4" - } - }, - "node_modules/is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-bigint": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", - "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==", - "dependencies": { - "has-bigints": "^1.0.1" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dependencies": { - "binary-extensions": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/is-boolean-object": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", - "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==", - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-callable": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz", - "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-ci": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz", - "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==", - "dependencies": { - "ci-info": "^2.0.0" - }, - "bin": { - "is-ci": "bin.js" - } - }, - "node_modules/is-core-module": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz", - "integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==", - "dev": true, - "dependencies": { - "has": "^1.0.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-date-object": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", - "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", - "dependencies": { - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "engines": { - "node": ">=8" - } - }, - "node_modules/is-generator-function": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", - "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", - "dependencies": { - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dependencies": { - "is-extglob": "^2.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/is-installed-globally": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz", - "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==", - "dependencies": { - "global-dirs": "^2.0.1", - "is-path-inside": "^3.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/is-nan": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz", - "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==", - "dependencies": { - "call-bind": "^1.0.0", - "define-properties": "^1.1.3" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-negative-zero": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", - "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==", - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-npm": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz", - "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==", - "engines": { - "node": ">=8" - } - }, - "node_modules/is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "engines": { - "node": ">=0.12.0" - } - }, - "node_modules/is-number-object": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.6.tgz", - "integrity": "sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==", - "dependencies": { - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-obj": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz", - "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==", - "engines": { - "node": ">=8" - } - }, - "node_modules/is-path-inside": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.2.tgz", - "integrity": "sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==", - "engines": { - "node": ">=8" - } - }, - "node_modules/is-regex": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", - "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", - "dependencies": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-shared-array-buffer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz", - "integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-string": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", - "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==", - "dependencies": { - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-symbol": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz", - "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==", - "dependencies": { - "has-symbols": "^1.0.2" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-typed-array": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.8.tgz", - "integrity": "sha512-HqH41TNZq2fgtGT8WHVFVJhBVGuY3AnP3Q36K8JKXUxSxRgk/d+7NjmwG2vo2mYmXK8UYZKu0qH8bVP5gEisjA==", - "dependencies": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", - "es-abstract": "^1.18.5", - "foreach": "^2.0.5", - "has-tostringtag": "^1.0.0" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-typedarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" - }, - "node_modules/is-weakref": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", - "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==", - "dependencies": { - "call-bind": "^1.0.2" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/is-yarn-global": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz", - "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==" - }, - "node_modules/isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", - "dev": true - }, - "node_modules/jest-worker": { - "version": "27.0.0-next.5", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.0-next.5.tgz", - "integrity": "sha512-mk0umAQ5lT+CaOJ+Qp01N6kz48sJG2kr2n1rX0koqKf6FIygQV0qLOdN9SCYID4IVeSigDOcPeGLozdMLYfb5g==", - "dependencies": { - "@types/node": "*", - "merge-stream": "^2.0.0", - "supports-color": "^8.0.0" - }, - "engines": { - "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0" - } - }, - "node_modules/jest-worker/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/jest-worker/node_modules/supports-color": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/supports-color?sponsor=1" - } - }, - "node_modules/js-tokens": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" - }, - "node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "dependencies": { - "argparse": "^2.0.1" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, - "node_modules/jsesc": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true, - "bin": { - "jsesc": "bin/jsesc" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/json-buffer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", - "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=" - }, - "node_modules/json-parse-even-better-errors": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" - }, - "node_modules/json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" - }, - "node_modules/json-stable-stringify-without-jsonify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", - "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", - "dev": true - }, - "node_modules/json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", - "dependencies": { - "minimist": "^1.2.0" - }, - "bin": { - "json5": "lib/cli.js" - } - }, - "node_modules/jsx-ast-utils": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz", - "integrity": "sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==", - "dev": true, - "dependencies": { - "array-includes": "^3.1.3", - "object.assign": "^4.1.2" - }, - "engines": { - "node": ">=4.0" - } - }, - "node_modules/keyv": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz", - "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==", - "dependencies": { - "json-buffer": "3.0.0" - } - }, - "node_modules/klona": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz", - "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==", - "engines": { - "node": ">= 8" - } - }, - "node_modules/language-subtag-registry": { - "version": "0.3.21", - "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz", - "integrity": "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==", - "dev": true - }, - "node_modules/language-tags": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz", - "integrity": "sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=", - "dev": true, - "dependencies": { - "language-subtag-registry": "~0.3.2" - } - }, - "node_modules/latest-version": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz", - "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==", - "dependencies": { - "package-json": "^6.3.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/levn": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", - "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", - "dev": true, - "dependencies": { - "prelude-ls": "^1.2.1", - "type-check": "~0.4.0" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/lines-and-columns": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz", - "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=" - }, - "node_modules/loader-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", - "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^1.0.1" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" - }, - "node_modules/lodash.merge": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true - }, - "node_modules/lodash.sortby": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", - "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=" - }, - "node_modules/loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dependencies": { - "js-tokens": "^3.0.0 || ^4.0.0" - }, - "bin": { - "loose-envify": "cli.js" - } - }, - "node_modules/lowercase-keys": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", - "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dependencies": { - "semver": "^6.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/make-error": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", - "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==" - }, - "node_modules/marked": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/marked/-/marked-0.8.2.tgz", - "integrity": "sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==", - "bin": { - "marked": "bin/marked" - }, - "engines": { - "node": ">= 8.16.2" - } - }, - "node_modules/md5.js": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", - "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==", - "dependencies": { - "hash-base": "^3.0.0", - "inherits": "^2.0.1", - "safe-buffer": "^5.1.2" - } - }, - "node_modules/merge-stream": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", - "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==" - }, - "node_modules/merge2": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", - "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", - "engines": { - "node": ">= 8" - } - }, - "node_modules/meta-marked": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/meta-marked/-/meta-marked-0.5.0.tgz", - "integrity": "sha512-HjeWE9veMSpu3KQz66jRiZj/eD7FpW36JIPY+hgjSjbom+Gf2c86BCfKJPMTKeSl1eCGvvFte3sePciIsPqh8Q==", - "dependencies": { - "js-yaml": "~3.14.0", - "marked": "~0.8.2" - } - }, - "node_modules/meta-marked/node_modules/argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dependencies": { - "sprintf-js": "~1.0.2" - } - }, - "node_modules/meta-marked/node_modules/js-yaml": { - "version": "3.14.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", - "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", - "dependencies": { - "argparse": "^1.0.7", - "esprima": "^4.0.0" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, - "node_modules/micromatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", - "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==", - "dependencies": { - "braces": "^3.0.1", - "picomatch": "^2.2.3" - }, - "engines": { - "node": ">=8.6" - } - }, - "node_modules/miller-rabin": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz", - "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==", - "dependencies": { - "bn.js": "^4.0.0", - "brorand": "^1.0.1" - }, - "bin": { - "miller-rabin": "bin/miller-rabin" - } - }, - "node_modules/miller-rabin/node_modules/bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - }, - "node_modules/minimalistic-assert": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", - "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==" - }, - "node_modules/minimalistic-crypto-utils": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz", - "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=" - }, - "node_modules/minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "dependencies": { - "brace-expansion": "^1.1.7" - }, - "engines": { - "node": "*" - } - }, - "node_modules/minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" - }, - "node_modules/mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", - "dependencies": { - "minimist": "^1.2.5" - }, - "bin": { - "mkdirp": "bin/cmd.js" - } - }, - "node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" - }, - "node_modules/nanoid": { - "version": "3.1.30", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", - "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==", - "bin": { - "nanoid": "bin/nanoid.cjs" - }, - "engines": { - "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" - } - }, - "node_modules/natural-compare": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", - "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", - "dev": true - }, - "node_modules/next": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/next/-/next-12.0.7.tgz", - "integrity": "sha512-sKO8GJJYfuk9c+q+zHSNumvff+wP7ufmOlwT6BuzwiYfFJ61VTTkfTcDLSJ+95ErQJiC54uS4Yg5JEE8H6jXRA==", - "dependencies": { - "@babel/runtime": "7.15.4", - "@hapi/accept": "5.0.2", - "@napi-rs/triples": "1.0.3", - "@next/env": "12.0.7", - "@next/polyfill-module": "12.0.7", - "@next/react-dev-overlay": "12.0.7", - "@next/react-refresh-utils": "12.0.7", - "acorn": "8.5.0", - "assert": "2.0.0", - "browserify-zlib": "0.2.0", - "browserslist": "4.16.6", - "buffer": "5.6.0", - "caniuse-lite": "^1.0.30001228", - "chalk": "2.4.2", - "chokidar": "3.5.1", - "constants-browserify": "1.0.0", - "crypto-browserify": "3.12.0", - "cssnano-simple": "3.0.0", - "domain-browser": "4.19.0", - "encoding": "0.1.13", - "etag": "1.8.1", - "events": "3.3.0", - "find-cache-dir": "3.3.1", - "get-orientation": "1.1.2", - "https-browserify": "1.0.0", - "image-size": "1.0.0", - "jest-worker": "27.0.0-next.5", - "node-fetch": "2.6.1", - "node-html-parser": "1.4.9", - "os-browserify": "0.3.0", - "p-limit": "3.1.0", - "path-browserify": "1.0.1", - "postcss": "8.2.15", - "process": "0.11.10", - "querystring-es3": "0.2.1", - "raw-body": "2.4.1", - "react-is": "17.0.2", - "react-refresh": "0.8.3", - "regenerator-runtime": "0.13.4", - "stream-browserify": "3.0.0", - "stream-http": "3.1.1", - "string_decoder": "1.3.0", - "styled-jsx": "5.0.0-beta.3", - "timers-browserify": "2.0.12", - "tty-browserify": "0.0.1", - "use-subscription": "1.5.1", - "util": "0.12.4", - "vm-browserify": "1.1.2", - "watchpack": "2.3.0" - }, - "bin": { - "next": "dist/bin/next" - }, - "engines": { - "node": ">=12.22.0" - }, - "optionalDependencies": { - "@next/swc-android-arm64": "12.0.7", - "@next/swc-darwin-arm64": "12.0.7", - "@next/swc-darwin-x64": "12.0.7", - "@next/swc-linux-arm-gnueabihf": "12.0.7", - "@next/swc-linux-arm64-gnu": "12.0.7", - "@next/swc-linux-arm64-musl": "12.0.7", - "@next/swc-linux-x64-gnu": "12.0.7", - "@next/swc-linux-x64-musl": "12.0.7", - "@next/swc-win32-arm64-msvc": "12.0.7", - "@next/swc-win32-ia32-msvc": "12.0.7", - "@next/swc-win32-x64-msvc": "12.0.7" - }, - "peerDependencies": { - "fibers": ">= 3.1.0", - "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0", - "react": "^17.0.2 || ^18.0.0-0", - "react-dom": "^17.0.2 || ^18.0.0-0", - "sass": "^1.3.0" - }, - "peerDependenciesMeta": { - "fibers": { - "optional": true - }, - "node-sass": { - "optional": true - }, - "sass": { - "optional": true - } - } - }, - "node_modules/next/node_modules/acorn": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz", - "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==", - "bin": { - "acorn": "bin/acorn" - }, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/next/node_modules/browserslist": { - "version": "4.16.6", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", - "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==", - "dependencies": { - "caniuse-lite": "^1.0.30001219", - "colorette": "^1.2.2", - "electron-to-chromium": "^1.3.723", - "escalade": "^3.1.1", - "node-releases": "^1.1.71" - }, - "bin": { - "browserslist": "cli.js" - }, - "engines": { - "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/browserslist" - } - }, - "node_modules/next/node_modules/bytes": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", - "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==", - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/next/node_modules/find-cache-dir": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", - "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==", - "dependencies": { - "commondir": "^1.0.1", - "make-dir": "^3.0.2", - "pkg-dir": "^4.1.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/avajs/find-cache-dir?sponsor=1" - } - }, - "node_modules/next/node_modules/http-errors": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", - "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==", - "dependencies": { - "depd": "~1.1.2", - "inherits": "2.0.4", - "setprototypeof": "1.1.1", - "statuses": ">= 1.5.0 < 2", - "toidentifier": "1.0.0" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/next/node_modules/node-releases": { - "version": "1.1.77", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", - "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==" - }, - "node_modules/next/node_modules/p-limit": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", - "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", - "dependencies": { - "yocto-queue": "^0.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/next/node_modules/raw-body": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz", - "integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==", - "dependencies": { - "bytes": "3.1.0", - "http-errors": "1.7.3", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/next/node_modules/react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" - }, - "node_modules/next/node_modules/regenerator-runtime": { - "version": "0.13.4", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz", - "integrity": "sha512-plpwicqEzfEyTQohIKktWigcLzmNStMGwbOUbykx51/29Z3JOGYldaaNGK7ngNXV+UcoqvIMmloZ48Sr74sd+g==" - }, - "node_modules/next/node_modules/setprototypeof": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", - "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" - }, - "node_modules/next/node_modules/toidentifier": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", - "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==", - "engines": { - "node": ">=0.6" - } - }, - "node_modules/node-fetch": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", - "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==", - "engines": { - "node": "4.x || >=6.0.0" - } - }, - "node_modules/node-html-parser": { - "version": "1.4.9", - "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-1.4.9.tgz", - "integrity": "sha512-UVcirFD1Bn0O+TSmloHeHqZZCxHjvtIeGdVdGMhyZ8/PWlEiZaZ5iJzR189yKZr8p0FXN58BUeC7RHRkf/KYGw==", - "dependencies": { - "he": "1.2.0" - } - }, - "node_modules/node-releases": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", - "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==" - }, - "node_modules/normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/normalize-range": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", - "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/normalize-url": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz", - "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/now": { - "version": "20.1.2", - "resolved": "https://registry.npmjs.org/now/-/now-20.1.2.tgz", - "integrity": "sha512-uzc143R5l7pZBq9HqUmmALndTdwH+btaZlTW843qx9GTaLr+C/bgH7YCic2eBOSTKVBAfBExSaNE+yEYHn70qw==", - "deprecated": "\"now\" is deprecated and will stop receiving updates on December 31, 2020. Please use \"vercel\" instead.", - "hasInstallScript": true, - "dependencies": { - "@vercel/build-utils": "2.5.4", - "@vercel/go": "1.1.6", - "@vercel/node": "1.8.4", - "@vercel/python": "1.2.3", - "@vercel/ruby": "1.2.4", - "update-notifier": "4.1.0" - }, - "bin": { - "now": "dist/index.js" - }, - "engines": { - "node": ">= 10" - } - }, - "node_modules/object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/object-inspect": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz", - "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/object-is": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz", - "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==", - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/object-keys": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", - "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", - "engines": { - "node": ">= 0.4" - } - }, - "node_modules/object.assign": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz", - "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==", - "dependencies": { - "call-bind": "^1.0.0", - "define-properties": "^1.1.3", - "has-symbols": "^1.0.1", - "object-keys": "^1.1.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/object.entries": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz", - "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==", - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1" - }, - "engines": { - "node": ">= 0.4" - } - }, - "node_modules/object.fromentries": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz", - "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/object.hasown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz", - "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==", - "dev": true, - "dependencies": { - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/object.values": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz", - "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "dependencies": { - "wrappy": "1" - } - }, - "node_modules/optionator": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", - "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", - "dev": true, - "dependencies": { - "deep-is": "^0.1.3", - "fast-levenshtein": "^2.0.6", - "levn": "^0.4.1", - "prelude-ls": "^1.2.1", - "type-check": "^0.4.0", - "word-wrap": "^1.2.3" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/os-browserify": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz", - "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=" - }, - "node_modules/p-cancelable": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz", - "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==", - "engines": { - "node": ">=6" - } - }, - "node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", - "engines": { - "node": ">=6" - } - }, - "node_modules/package-json": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz", - "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==", - "dependencies": { - "got": "^9.6.0", - "registry-auth-token": "^4.0.0", - "registry-url": "^5.0.0", - "semver": "^6.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/pako": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", - "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==" - }, - "node_modules/parent-module": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", - "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "dependencies": { - "callsites": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/parent-module/node_modules/callsites": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", - "engines": { - "node": ">=6" - } - }, - "node_modules/parse-asn1": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz", - "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==", - "dependencies": { - "asn1.js": "^5.2.0", - "browserify-aes": "^1.0.0", - "evp_bytestokey": "^1.0.0", - "pbkdf2": "^3.0.3", - "safe-buffer": "^5.1.1" - } - }, - "node_modules/parse-json": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz", - "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==", - "dependencies": { - "@babel/code-frame": "^7.0.0", - "error-ex": "^1.3.1", - "json-parse-even-better-errors": "^2.3.0", - "lines-and-columns": "^1.1.6" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/path-browserify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", - "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==" - }, - "node_modules/path-exists": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", - "engines": { - "node": ">=4" - } - }, - "node_modules/path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" - }, - "node_modules/path-type": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==", - "engines": { - "node": ">=8" - } - }, - "node_modules/pbkdf2": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz", - "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==", - "dependencies": { - "create-hash": "^1.1.2", - "create-hmac": "^1.1.4", - "ripemd160": "^2.0.1", - "safe-buffer": "^5.0.1", - "sha.js": "^2.4.8" - }, - "engines": { - "node": ">=0.12" - } - }, - "node_modules/picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, - "node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=", - "engines": { - "node": ">=4" - } - }, - "node_modules/pinkie": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", - "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/pinkie-promise": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", - "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", - "dependencies": { - "pinkie": "^2.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "dependencies": { - "find-up": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/pkg-dir/node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/pkg-dir/node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dependencies": { - "p-locate": "^4.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/pkg-dir/node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dependencies": { - "p-limit": "^2.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/pkg-dir/node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "engines": { - "node": ">=8" - } - }, - "node_modules/platform": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz", - "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==" - }, - "node_modules/postcss": { - "version": "8.2.15", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz", - "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==", - "dependencies": { - "colorette": "^1.2.2", - "nanoid": "^3.1.23", - "source-map": "^0.6.1" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - } - }, - "node_modules/postcss-easy-import": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz", - "integrity": "sha512-cfNsear/v8xlkl9v5Wm8y4Do/puiDQTFF+WX2Fo++h7oKt1fKWVVW/5Ca8hslYDQWnjndrg813cA23Pt1jsYdg==", - "dependencies": { - "globby": "^6.1.0", - "is-glob": "^4.0.0", - "lodash": "^4.17.4", - "object-assign": "^4.0.1", - "pify": "^3.0.0", - "postcss": "^6.0.11", - "postcss-import": "^10.0.0", - "resolve": "^1.1.7" - } - }, - "node_modules/postcss-easy-import/node_modules/postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "dependencies": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/postcss-import": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-10.0.0.tgz", - "integrity": "sha1-TIXJewmRNsxeoCQNwd/b/eTi674=", - "dependencies": { - "object-assign": "^4.0.1", - "postcss": "^6.0.1", - "postcss-value-parser": "^3.2.3", - "read-cache": "^1.0.0", - "resolve": "^1.1.7" - } - }, - "node_modules/postcss-import/node_modules/postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "dependencies": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/postcss-import/node_modules/postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" - }, - "node_modules/postcss-loader": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz", - "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==", - "dependencies": { - "cosmiconfig": "^7.0.0", - "klona": "^2.0.5", - "semver": "^7.3.5" - }, - "engines": { - "node": ">= 12.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "postcss": "^7.0.0 || ^8.0.1", - "webpack": "^5.0.0" - } - }, - "node_modules/postcss-loader/node_modules/semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "dependencies": { - "lru-cache": "^6.0.0" - }, - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" - }, - "node_modules/prelude-ls": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", - "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", - "dev": true, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/prepend-http": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", - "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=", - "engines": { - "node": ">=4" - } - }, - "node_modules/prettier": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", - "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", - "dev": true, - "bin": { - "prettier": "bin-prettier.js" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "dependencies": { - "fast-diff": "^1.1.2" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/process": { - "version": "0.11.10", - "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", - "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=", - "engines": { - "node": ">= 0.6.0" - } - }, - "node_modules/progress": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", - "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", - "dev": true, - "engines": { - "node": ">=0.4.0" - } - }, - "node_modules/prop-types": { - "version": "15.8.0", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.0.tgz", - "integrity": "sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==", - "dependencies": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.13.1" - } - }, - "node_modules/public-encrypt": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz", - "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==", - "dependencies": { - "bn.js": "^4.1.0", - "browserify-rsa": "^4.0.0", - "create-hash": "^1.1.0", - "parse-asn1": "^5.0.0", - "randombytes": "^2.0.1", - "safe-buffer": "^5.1.2" - } - }, - "node_modules/public-encrypt/node_modules/bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - }, - "node_modules/pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "dependencies": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - }, - "node_modules/punycode": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", - "engines": { - "node": ">=6" - } - }, - "node_modules/pupa": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz", - "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==", - "dependencies": { - "escape-goat": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/querystring-es3": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz", - "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=", - "engines": { - "node": ">=0.4.x" - } - }, - "node_modules/queue": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", - "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", - "dependencies": { - "inherits": "~2.0.3" - } - }, - "node_modules/queue-microtask": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", - "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, - "node_modules/randombytes": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", - "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", - "dependencies": { - "safe-buffer": "^5.1.0" - } - }, - "node_modules/randomfill": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz", - "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==", - "dependencies": { - "randombytes": "^2.0.5", - "safe-buffer": "^5.1.0" - } - }, - "node_modules/raw-loader": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz", - "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==", - "dependencies": { - "loader-utils": "^2.0.0", - "schema-utils": "^3.0.0" - }, - "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "webpack": "^4.0.0 || ^5.0.0" - } - }, - "node_modules/raw-loader/node_modules/ajv-keywords": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "peerDependencies": { - "ajv": "^6.9.1" - } - }, - "node_modules/raw-loader/node_modules/json5": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz", - "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==", - "dependencies": { - "minimist": "^1.2.5" - }, - "bin": { - "json5": "lib/cli.js" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/raw-loader/node_modules/loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - }, - "engines": { - "node": ">=8.9.0" - } - }, - "node_modules/raw-loader/node_modules/schema-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", - "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", - "dependencies": { - "@types/json-schema": "^7.0.6", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - }, - "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - } - }, - "node_modules/rc": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", - "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", - "dependencies": { - "deep-extend": "^0.6.0", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" - }, - "bin": { - "rc": "cli.js" - } - }, - "node_modules/rc/node_modules/strip-json-comments": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - }, - "peerDependencies": { - "react": "17.0.2" - } - }, - "node_modules/react-hls-player": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/react-hls-player/-/react-hls-player-3.0.7.tgz", - "integrity": "sha512-i5QWNyLmaUhV/mgnpljRJT0CBfJnylClV/bne8aiXO3ZqU0+D3U/jtTDwdXM4i5qHhyFy9lemyZ179IgadKd0Q==", - "dependencies": { - "hls.js": "^0.14.17" - }, - "peerDependencies": { - "react": "^16.13.1", - "react-dom": "^16.13.1" - } - }, - "node_modules/react-icons": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", - "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", - "peerDependencies": { - "react": "*" - } - }, - "node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, - "node_modules/react-refresh": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", - "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/read-cache": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", - "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", - "dependencies": { - "pify": "^2.3.0" - } - }, - "node_modules/read-cache/node_modules/pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/readable-stream": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", - "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", - "dependencies": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/readdirp": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", - "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } - }, - "node_modules/regexp.prototype.flags": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz", - "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/regexpp": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz", - "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/mysticatea" - } - }, - "node_modules/registry-auth-token": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.0.tgz", - "integrity": "sha512-P+lWzPrsgfN+UEpDS3U8AQKg/UjZX6mQSJueZj3EK+vNESoqBSpBUD3gmu4sF9lOsjXWjF11dQKUqemf3veq1w==", - "dependencies": { - "rc": "^1.2.8" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/registry-url": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz", - "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==", - "dependencies": { - "rc": "^1.2.8" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/resolve": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz", - "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==", - "dependencies": { - "path-parse": "^1.0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/resolve-from": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", - "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", - "engines": { - "node": ">=4" - } - }, - "node_modules/responselike": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz", - "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=", - "dependencies": { - "lowercase-keys": "^1.0.0" - } - }, - "node_modules/reusify": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", - "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", - "engines": { - "iojs": ">=1.0.0", - "node": ">=0.10.0" - } - }, - "node_modules/rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "dev": true, - "dependencies": { - "glob": "^7.1.3" - }, - "bin": { - "rimraf": "bin.js" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, - "node_modules/ripemd160": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz", - "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==", - "dependencies": { - "hash-base": "^3.0.0", - "inherits": "^2.0.1" - } - }, - "node_modules/run-parallel": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", - "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "dependencies": { - "queue-microtask": "^1.2.2" - } - }, - "node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, - "node_modules/safer-buffer": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" - }, - "node_modules/sax": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", - "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", - "dev": true - }, - "node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/semver-diff": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz", - "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==", - "dependencies": { - "semver": "^6.3.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/setimmediate": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" - }, - "node_modules/sha.js": { - "version": "2.4.11", - "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", - "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", - "dependencies": { - "inherits": "^2.0.1", - "safe-buffer": "^5.0.1" - }, - "bin": { - "sha.js": "bin.js" - } - }, - "node_modules/shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "dependencies": { - "shebang-regex": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/shell-quote": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz", - "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==" - }, - "node_modules/side-channel": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", - "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", - "dependencies": { - "call-bind": "^1.0.0", - "get-intrinsic": "^1.0.2", - "object-inspect": "^1.9.0" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/signal-exit": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", - "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" - }, - "node_modules/slash": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", - "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", - "engines": { - "node": ">=8" - } - }, - "node_modules/source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/source-map-resolve": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz", - "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==", - "dev": true, - "dependencies": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0" - } - }, - "node_modules/source-map-support": { - "version": "0.5.19", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", - "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", - "dependencies": { - "buffer-from": "^1.0.0", - "source-map": "^0.6.0" - } - }, - "node_modules/speakingurl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz", - "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/sprintf-js": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" - }, - "node_modules/stacktrace-parser": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz", - "integrity": "sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==", - "dependencies": { - "type-fest": "^0.7.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/statuses": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", - "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=", - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/stream-browserify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz", - "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==", - "dependencies": { - "inherits": "~2.0.4", - "readable-stream": "^3.5.0" - } - }, - "node_modules/stream-http": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-3.1.1.tgz", - "integrity": "sha512-S7OqaYu0EkFpgeGFb/NPOoPLxFko7TPqtEeFg5DXPB4v/KETHG0Ln6fRFrNezoelpaDKmycEmmZ81cC9DAwgYg==", - "dependencies": { - "builtin-status-codes": "^3.0.0", - "inherits": "^2.0.4", - "readable-stream": "^3.6.0", - "xtend": "^4.0.2" - } - }, - "node_modules/stream-parser": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/stream-parser/-/stream-parser-0.3.1.tgz", - "integrity": "sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=", - "dependencies": { - "debug": "2" - } - }, - "node_modules/stream-parser/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "dependencies": { - "safe-buffer": "~5.2.0" - } - }, - "node_modules/string-hash": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", - "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=" - }, - "node_modules/string-width": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz", - "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/string-width/node_modules/ansi-regex": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", - "engines": { - "node": ">=8" - } - }, - "node_modules/string-width/node_modules/strip-ansi": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", - "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "dependencies": { - "ansi-regex": "^5.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/string.prototype.matchall": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz", - "integrity": "sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==", - "dev": true, - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1", - "get-intrinsic": "^1.1.1", - "has-symbols": "^1.0.2", - "internal-slot": "^1.0.3", - "regexp.prototype.flags": "^1.3.1", - "side-channel": "^1.0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/string.prototype.trimend": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz", - "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==", - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/string.prototype.trimstart": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz", - "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==", - "dependencies": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/strip-bom": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/strip-json-comments": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", - "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "dev": true, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/styled-jsx": { - "version": "5.0.0-beta.3", - "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0-beta.3.tgz", - "integrity": "sha512-HtDDGSFPvmjHIqWf9n8Oo54tAoY/DTplvlyOH2+YOtD80Sp31Ap8ffSmxhgk5EkUoJ7xepdXMGT650mSffWuRA==", - "dependencies": { - "@babel/plugin-syntax-jsx": "7.14.5", - "@babel/types": "7.15.0", - "convert-source-map": "1.7.0", - "loader-utils": "1.2.3", - "source-map": "0.7.3", - "string-hash": "1.1.3", - "stylis": "3.5.4", - "stylis-rule-sheet": "0.0.10" - }, - "engines": { - "node": ">= 12.0.0" - }, - "peerDependencies": { - "react": ">= 16.8.0 || 17.x.x || 18.x.x" - }, - "peerDependenciesMeta": { - "@babel/core": { - "optional": true - } - } - }, - "node_modules/styled-jsx/node_modules/emojis-list": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=", - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/styled-jsx/node_modules/loader-utils": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", - "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^2.0.0", - "json5": "^1.0.1" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/styled-jsx/node_modules/source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "engines": { - "node": ">= 8" - } - }, - "node_modules/stylis": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", - "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" - }, - "node_modules/stylis-rule-sheet": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "peerDependencies": { - "stylis": "^3.5.0" - } - }, - "node_modules/stylus": { - "version": "0.56.0", - "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.56.0.tgz", - "integrity": "sha512-Ev3fOb4bUElwWu4F9P9WjnnaSpc8XB9OFHSFZSKMFL1CE1oM+oFXWEgAqPmmZIyhBihuqIQlFsVTypiiS9RxeA==", - "dev": true, - "dependencies": { - "css": "^3.0.0", - "debug": "^4.3.2", - "glob": "^7.1.6", - "safer-buffer": "^2.1.2", - "sax": "~1.2.4", - "source-map": "^0.7.3" - }, - "bin": { - "stylus": "bin/stylus" - }, - "engines": { - "node": "*" - } - }, - "node_modules/stylus-loader": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-6.2.0.tgz", - "integrity": "sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==", - "dev": true, - "dependencies": { - "fast-glob": "^3.2.7", - "klona": "^2.0.4", - "normalize-path": "^3.0.0" - }, - "engines": { - "node": ">= 12.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "stylus": ">=0.52.4", - "webpack": "^5.0.0" - } - }, - "node_modules/stylus/node_modules/source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true, - "engines": { - "node": ">= 8" - } - }, - "node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dependencies": { - "has-flag": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/term-size": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz", - "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/text-table": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", - "dev": true - }, - "node_modules/timers-browserify": { - "version": "2.0.12", - "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz", - "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==", - "dependencies": { - "setimmediate": "^1.0.4" - }, - "engines": { - "node": ">=0.6.0" - } - }, - "node_modules/to-readable-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz", - "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==", - "engines": { - "node": ">=6" - } - }, - "node_modules/to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dependencies": { - "is-number": "^7.0.0" - }, - "engines": { - "node": ">=8.0" - } - }, - "node_modules/tr46": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz", - "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", - "dependencies": { - "punycode": "^2.1.0" - } - }, - "node_modules/ts-node": { - "version": "8.9.1", - "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.9.1.tgz", - "integrity": "sha512-yrq6ODsxEFTLz0R3BX2myf0WBCSQh9A+py8PBo1dCzWIOcvisbyH6akNKqDHMgXePF2kir5mm5JXJTH3OUJYOQ==", - "dependencies": { - "arg": "^4.1.0", - "diff": "^4.0.1", - "make-error": "^1.1.1", - "source-map-support": "^0.5.17", - "yn": "3.1.1" - }, - "bin": { - "ts-node": "dist/bin.js", - "ts-node-script": "dist/bin-script.js", - "ts-node-transpile-only": "dist/bin-transpile.js", - "ts-script": "dist/bin-script-deprecated.js" - }, - "engines": { - "node": ">=6.0.0" - }, - "peerDependencies": { - "typescript": ">=2.7" - } - }, - "node_modules/tsconfig-paths": { - "version": "3.12.0", - "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz", - "integrity": "sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==", - "dev": true, - "dependencies": { - "@types/json5": "^0.0.29", - "json5": "^1.0.1", - "minimist": "^1.2.0", - "strip-bom": "^3.0.0" - } - }, - "node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "node_modules/tsutils": { - "version": "3.21.0", - "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", - "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==", - "dependencies": { - "tslib": "^1.8.1" - }, - "engines": { - "node": ">= 6" - }, - "peerDependencies": { - "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" - } - }, - "node_modules/tty-browserify": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz", - "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==" - }, - "node_modules/type-check": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", - "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", - "dev": true, - "dependencies": { - "prelude-ls": "^1.2.1" - }, - "engines": { - "node": ">= 0.8.0" - } - }, - "node_modules/type-fest": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz", - "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==", - "engines": { - "node": ">=8" - } - }, - "node_modules/typedarray-to-buffer": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", - "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", - "dependencies": { - "is-typedarray": "^1.0.0" - } - }, - "node_modules/typescript": { - "version": "4.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz", - "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==", - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, - "node_modules/unbox-primitive": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", - "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==", - "dependencies": { - "function-bind": "^1.1.1", - "has-bigints": "^1.0.1", - "has-symbols": "^1.0.2", - "which-boxed-primitive": "^1.0.2" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/unique-string": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz", - "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==", - "dependencies": { - "crypto-random-string": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/unpipe": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", - "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/update-notifier": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-4.1.0.tgz", - "integrity": "sha512-w3doE1qtI0/ZmgeoDoARmI5fjDoT93IfKgEGqm26dGUOh8oNpaSTsGNdYRN/SjOuo10jcJGwkEL3mroKzktkew==", - "dependencies": { - "boxen": "^4.2.0", - "chalk": "^3.0.0", - "configstore": "^5.0.1", - "has-yarn": "^2.1.0", - "import-lazy": "^2.1.0", - "is-ci": "^2.0.0", - "is-installed-globally": "^0.3.1", - "is-npm": "^4.0.0", - "is-yarn-global": "^0.3.0", - "latest-version": "^5.0.0", - "pupa": "^2.0.1", - "semver-diff": "^3.1.1", - "xdg-basedir": "^4.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/yeoman/update-notifier?sponsor=1" - } - }, - "node_modules/update-notifier/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/update-notifier/node_modules/chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/update-notifier/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/update-notifier/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "node_modules/update-notifier/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "engines": { - "node": ">=8" - } - }, - "node_modules/update-notifier/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/uri-js": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", - "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==", - "dependencies": { - "punycode": "^2.1.0" - } - }, - "node_modules/url-parse-lax": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", - "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=", - "dependencies": { - "prepend-http": "^2.0.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/url-toolkit": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz", - "integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ==" - }, - "node_modules/use-subscription": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", - "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==", - "dependencies": { - "object-assign": "^4.1.1" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0" - } - }, - "node_modules/util": { - "version": "0.12.4", - "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz", - "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==", - "dependencies": { - "inherits": "^2.0.3", - "is-arguments": "^1.0.4", - "is-generator-function": "^1.0.7", - "is-typed-array": "^1.1.3", - "safe-buffer": "^5.1.2", - "which-typed-array": "^1.1.2" - } - }, - "node_modules/util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" - }, - "node_modules/v8-compile-cache": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz", - "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==", - "dev": true - }, - "node_modules/vary": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", - "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/vm-browserify": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", - "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" - }, - "node_modules/watchpack": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.0.tgz", - "integrity": "sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==", - "dependencies": { - "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.1.2" - }, - "engines": { - "node": ">=10.13.0" - } - }, - "node_modules/webidl-conversions": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", - "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==" - }, - "node_modules/whatwg-url": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz", - "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==", - "dependencies": { - "lodash.sortby": "^4.7.0", - "tr46": "^1.0.1", - "webidl-conversions": "^4.0.2" - } - }, - "node_modules/which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "node-which": "bin/node-which" - }, - "engines": { - "node": ">= 8" - } - }, - "node_modules/which-boxed-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz", - "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==", - "dependencies": { - "is-bigint": "^1.0.1", - "is-boolean-object": "^1.1.0", - "is-number-object": "^1.0.4", - "is-string": "^1.0.5", - "is-symbol": "^1.0.3" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/which-typed-array": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.7.tgz", - "integrity": "sha512-vjxaB4nfDqwKI0ws7wZpxIlde1XrLX5uB0ZjpfshgmapJMD7jJWhZI+yToJTqaFByF0eNBcYxbjmCzoRP7CfEw==", - "dependencies": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", - "es-abstract": "^1.18.5", - "foreach": "^2.0.5", - "has-tostringtag": "^1.0.0", - "is-typed-array": "^1.1.7" - }, - "engines": { - "node": ">= 0.4" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/widest-line": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz", - "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==", - "dependencies": { - "string-width": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/word-wrap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" - }, - "node_modules/write-file-atomic": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", - "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", - "dependencies": { - "imurmurhash": "^0.1.4", - "is-typedarray": "^1.0.0", - "signal-exit": "^3.0.2", - "typedarray-to-buffer": "^3.1.5" - } - }, - "node_modules/xdg-basedir": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz", - "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==", - "engines": { - "node": ">=8" - } - }, - "node_modules/xtend": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", - "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", - "engines": { - "node": ">=0.4" - } - }, - "node_modules/yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" - }, - "node_modules/yaml": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz", - "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==", - "engines": { - "node": ">= 6" - } - }, - "node_modules/yn": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", - "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "engines": { - "node": ">=6" - } - }, - "node_modules/yocto-queue": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", - "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - } - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.12.11", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz", - "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==", - "requires": { - "@babel/highlight": "^7.10.4" - } - }, - "@babel/compat-data": { - "version": "7.16.4", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.16.4.tgz", - "integrity": "sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==", - "dev": true - }, - "@babel/core": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.7.tgz", - "integrity": "sha512-aeLaqcqThRNZYmbMqtulsetOQZ/5gbR/dWruUCJcpas4Qoyy+QeagfDsPdMrqwsPRDNxJvBlRiZxxX7THO7qtA==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.16.7", - "@babel/helper-compilation-targets": "^7.16.7", - "@babel/helper-module-transforms": "^7.16.7", - "@babel/helpers": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7", - "convert-source-map": "^1.7.0", - "debug": "^4.1.0", - "gensync": "^1.0.0-beta.2", - "json5": "^2.1.2", - "semver": "^6.3.0", - "source-map": "^0.5.0" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", - "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, - "requires": { - "@babel/highlight": "^7.16.7" - } - }, - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "json5": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", - "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", - "dev": true, - "requires": { - "minimist": "^1.2.5" - } - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/eslint-parser": { - "version": "7.16.5", - "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.5.tgz", - "integrity": "sha512-mUqYa46lgWqHKQ33Q6LNCGp/wPR3eqOYTUixHFsfrSQqRxH0+WOzca75iEjFr5RDGH1dDz622LaHhLOzOuQRUA==", - "requires": { - "eslint-scope": "^5.1.1", - "eslint-visitor-keys": "^2.1.0", - "semver": "^6.3.0" - }, - "dependencies": { - "eslint-scope": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", - "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", - "requires": { - "esrecurse": "^4.3.0", - "estraverse": "^4.1.1" - } - }, - "eslint-visitor-keys": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", - "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==" - }, - "estraverse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", - "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==" - } - } - }, - "@babel/generator": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.7.tgz", - "integrity": "sha512-/ST3Sg8MLGY5HVYmrjOgL60ENux/HfO/CsUh7y4MalThufhE/Ff/6EibFDHi4jiDCaWfJKoqbE6oTh21c5hrRg==", - "dev": true, - "requires": { - "@babel/types": "^7.16.7", - "jsesc": "^2.5.1", - "source-map": "^0.5.0" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "source-map": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/helper-annotate-as-pure": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz", - "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==", - "requires": { - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" - } - } - }, - "@babel/helper-compilation-targets": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz", - "integrity": "sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==", - "dev": true, - "requires": { - "@babel/compat-data": "^7.16.4", - "@babel/helper-validator-option": "^7.16.7", - "browserslist": "^4.17.5", - "semver": "^6.3.0" - } - }, - "@babel/helper-environment-visitor": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz", - "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==", - "dev": true, - "requires": { - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/helper-function-name": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz", - "integrity": "sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==", - "dev": true, - "requires": { - "@babel/helper-get-function-arity": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/helper-get-function-arity": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz", - "integrity": "sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==", - "dev": true, - "requires": { - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/helper-hoist-variables": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz", - "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==", - "dev": true, - "requires": { - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/helper-module-imports": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz", - "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==", - "requires": { - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" - } - } - }, - "@babel/helper-module-transforms": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz", - "integrity": "sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==", - "dev": true, - "requires": { - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-module-imports": "^7.16.7", - "@babel/helper-simple-access": "^7.16.7", - "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/helper-validator-identifier": "^7.16.7", - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/helper-plugin-utils": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz", - "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==" - }, - "@babel/helper-simple-access": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz", - "integrity": "sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==", - "dev": true, - "requires": { - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/helper-split-export-declaration": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz", - "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==", - "dev": true, - "requires": { - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/helper-validator-identifier": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz", - "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==" - }, - "@babel/helper-validator-option": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz", - "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==" - }, - "@babel/helpers": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.16.7.tgz", - "integrity": "sha512-9ZDoqtfY7AuEOt3cxchfii6C7GDyyMBffktR5B2jvWv8u2+efwvpnVKXMWzNehqy68tKgAfSwfdw/lWpthS2bw==", - "dev": true, - "requires": { - "@babel/template": "^7.16.7", - "@babel/traverse": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/highlight": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.7.tgz", - "integrity": "sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==", - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "chalk": "^2.0.0", - "js-tokens": "^4.0.0" - }, - "dependencies": { - "js-tokens": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" - } - } - }, - "@babel/parser": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.7.tgz", - "integrity": "sha512-sR4eaSrnM7BV7QPzGfEX5paG/6wrZM3I0HDzfIAK06ESvo9oy3xBuVBxE3MbQaKNhvg8g/ixjMWo2CGpzpHsDA==", - "dev": true - }, - "@babel/plugin-syntax-jsx": { - "version": "7.14.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz", - "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==", - "requires": { - "@babel/helper-plugin-utils": "^7.14.5" - } - }, - "@babel/plugin-transform-react-display-name": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz", - "integrity": "sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==", - "requires": { - "@babel/helper-plugin-utils": "^7.16.7" - } - }, - "@babel/plugin-transform-react-jsx": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.16.7.tgz", - "integrity": "sha512-8D16ye66fxiE8m890w0BpPpngG9o9OVBBy0gH2E+2AR7qMR2ZpTYJEqLxAsoroenMId0p/wMW+Blc0meDgu0Ag==", - "requires": { - "@babel/helper-annotate-as-pure": "^7.16.7", - "@babel/helper-module-imports": "^7.16.7", - "@babel/helper-plugin-utils": "^7.16.7", - "@babel/plugin-syntax-jsx": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/plugin-syntax-jsx": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz", - "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==", - "requires": { - "@babel/helper-plugin-utils": "^7.16.7" - } - }, - "@babel/types": { - "version": "7.16.8", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.8.tgz", - "integrity": "sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==", - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" - } - } - }, - "@babel/plugin-transform-react-jsx-development": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz", - "integrity": "sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==", - "requires": { - "@babel/plugin-transform-react-jsx": "^7.16.7" - } - }, - "@babel/plugin-transform-react-pure-annotations": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.16.7.tgz", - "integrity": "sha512-hs71ToC97k3QWxswh2ElzMFABXHvGiJ01IB1TbYQDGeWRKWz/MPUTh5jGExdHvosYKpnJW5Pm3S4+TA3FyX+GA==", - "requires": { - "@babel/helper-annotate-as-pure": "^7.16.7", - "@babel/helper-plugin-utils": "^7.16.7" - } - }, - "@babel/preset-react": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.16.7.tgz", - "integrity": "sha512-fWpyI8UM/HE6DfPBzD8LnhQ/OcH8AgTaqcqP2nGOXEUV+VKBR5JRN9hCk9ai+zQQ57vtm9oWeXguBCPNUjytgA==", - "requires": { - "@babel/helper-plugin-utils": "^7.16.7", - "@babel/helper-validator-option": "^7.16.7", - "@babel/plugin-transform-react-display-name": "^7.16.7", - "@babel/plugin-transform-react-jsx": "^7.16.7", - "@babel/plugin-transform-react-jsx-development": "^7.16.7", - "@babel/plugin-transform-react-pure-annotations": "^7.16.7" - } - }, - "@babel/runtime": { - "version": "7.15.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz", - "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==", - "requires": { - "regenerator-runtime": "^0.13.4" - }, - "dependencies": { - "regenerator-runtime": { - "version": "0.13.7", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==" - } - } - }, - "@babel/runtime-corejs3": { - "version": "7.12.1", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.12.1.tgz", - "integrity": "sha512-umhPIcMrlBZ2aTWlWjUseW9LjQKxi1dpFlQS8DzsxB//5K+u6GLTC/JliPKHsd5kJVPIU6X/Hy0YvWOYPcMxBw==", - "dev": true, - "requires": { - "core-js-pure": "^3.0.0", - "regenerator-runtime": "^0.13.4" - }, - "dependencies": { - "regenerator-runtime": { - "version": "0.13.7", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==", - "dev": true - } - } - }, - "@babel/template": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", - "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/types": "^7.16.7" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", - "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, - "requires": { - "@babel/highlight": "^7.16.7" - } - }, - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/traverse": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.16.7.tgz", - "integrity": "sha512-8KWJPIb8c2VvY8AJrydh6+fVRo2ODx1wYBU2398xJVq0JomuLBZmVQzLPBblJgHIGYG4znCpUZUZ0Pt2vdmVYQ==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.16.7", - "@babel/generator": "^7.16.7", - "@babel/helper-environment-visitor": "^7.16.7", - "@babel/helper-function-name": "^7.16.7", - "@babel/helper-hoist-variables": "^7.16.7", - "@babel/helper-split-export-declaration": "^7.16.7", - "@babel/parser": "^7.16.7", - "@babel/types": "^7.16.7", - "debug": "^4.1.0", - "globals": "^11.1.0" - }, - "dependencies": { - "@babel/code-frame": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz", - "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==", - "dev": true, - "requires": { - "@babel/highlight": "^7.16.7" - } - }, - "@babel/types": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.7.tgz", - "integrity": "sha512-E8HuV7FO9qLpx6OtoGfUQ2cjIYnbFwvZWYBS+87EwtdMvmUPJSwykpovFB+8insbpF0uJcpr8KMUi64XZntZcg==", - "dev": true, - "requires": { - "@babel/helper-validator-identifier": "^7.16.7", - "to-fast-properties": "^2.0.0" - } - }, - "globals": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true - }, - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", - "dev": true - } - } - }, - "@babel/types": { - "version": "7.15.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz", - "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==", - "requires": { - "@babel/helper-validator-identifier": "^7.14.9", - "to-fast-properties": "^2.0.0" - }, - "dependencies": { - "to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=" - } - } - }, - "@eslint/eslintrc": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz", - "integrity": "sha512-BLxsnmK3KyPunz5wmCCpqy0YelEoxxGmH73Is+Z74oOTMtExcjkr3dDR6quwrjh1YspA8DH9gnX1o069KiS9AQ==", - "dev": true, - "requires": { - "ajv": "^6.12.4", - "debug": "^4.3.2", - "espree": "^9.2.0", - "globals": "^13.9.0", - "ignore": "^4.0.6", - "import-fresh": "^3.2.1", - "js-yaml": "^4.1.0", - "minimatch": "^3.0.4", - "strip-json-comments": "^3.1.1" - }, - "dependencies": { - "globals": { - "version": "13.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz", - "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==", - "dev": true, - "requires": { - "type-fest": "^0.20.2" - } - }, - "type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true - } - } - }, - "@hapi/accept": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@hapi/accept/-/accept-5.0.2.tgz", - "integrity": "sha512-CmzBx/bXUR8451fnZRuZAJRlzgm0Jgu5dltTX/bszmR2lheb9BpyN47Q1RbaGTsvFzn0PXAEs+lXDKfshccYZw==", - "requires": { - "@hapi/boom": "9.x.x", - "@hapi/hoek": "9.x.x" - } - }, - "@hapi/boom": { - "version": "9.1.4", - "resolved": "https://registry.npmjs.org/@hapi/boom/-/boom-9.1.4.tgz", - "integrity": "sha512-Ls1oH8jaN1vNsqcaHVYJrKmgMcKsC1wcp8bujvXrHaAqD2iDYq3HoOwsxwo09Cuda5R5nC0o0IxlrlTuvPuzSw==", - "requires": { - "@hapi/hoek": "9.x.x" - } - }, - "@hapi/hoek": { - "version": "9.2.1", - "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz", - "integrity": "sha512-gfta+H8aziZsm8pZa0vj04KO6biEiisppNgA1kbJvFrrWu9Vm7eaUEy76DIxsuTaWvti5fkJVhllWc6ZTE+Mdw==" - }, - "@humanwhocodes/config-array": { - "version": "0.9.2", - "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.2.tgz", - "integrity": "sha512-UXOuFCGcwciWckOpmfKDq/GyhlTf9pN/BzG//x8p8zTOFEcGuA68ANXheFS0AGvy3qgZqLBUkMs7hqzqCKOVwA==", - "dev": true, - "requires": { - "@humanwhocodes/object-schema": "^1.2.1", - "debug": "^4.1.1", - "minimatch": "^3.0.4" - } - }, - "@humanwhocodes/object-schema": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz", - "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", - "dev": true - }, - "@napi-rs/triples": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@napi-rs/triples/-/triples-1.0.3.tgz", - "integrity": "sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==" - }, - "@next/env": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/env/-/env-12.0.7.tgz", - "integrity": "sha512-TNDqBV37wd95SiNdZsSUq8gnnrTwr+aN9wqy4Zxrxw4bC/jCHNsbK94DxjkG99VL30VCRXXDBTA1/Wa2jIpF9Q==" - }, - "@next/polyfill-module": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-12.0.7.tgz", - "integrity": "sha512-sA8LAMMlmcspIZw/jeQuJTyA3uGrqOhTBaQE+G9u6DPohqrBFRkaz7RzzJeqXkUXw600occsIBknSjyVd1R67A==" - }, - "@next/react-dev-overlay": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-12.0.7.tgz", - "integrity": "sha512-dSQLgpZ5uzyittFtIHlJCLAbc0LlMFbRBSYuGsIlrtGyjYN+WMcnz8lK48VLxNPFGuB/hEzkWV4TW5Zu75+Fzg==", - "requires": { - "@babel/code-frame": "7.12.11", - "anser": "1.4.9", - "chalk": "4.0.0", - "classnames": "2.2.6", - "css.escape": "1.5.1", - "data-uri-to-buffer": "3.0.1", - "platform": "1.3.6", - "shell-quote": "1.7.3", - "source-map": "0.8.0-beta.0", - "stacktrace-parser": "0.1.10", - "strip-ansi": "6.0.1" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==" - }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz", - "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==", - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" - }, - "source-map": { - "version": "0.8.0-beta.0", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz", - "integrity": "sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==", - "requires": { - "whatwg-url": "^7.0.0" - } - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "requires": { - "ansi-regex": "^5.0.1" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, - "@next/react-refresh-utils": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-12.0.7.tgz", - "integrity": "sha512-Pglj1t+7RxH0txEqVcD8ZxrJgqLDmKvQDqxKq3ZPRWxMv7LTl7FVT2Pnb36QFeBwCvMVl67jxsADKsW0idz8sA==" - }, - "@next/swc-darwin-x64": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.7.tgz", - "integrity": "sha512-km+6Rx6TvbraoQ1f0MXa69ol/x0RxzucFGa2OgZaYJERas0spy0iwW8hpASsGcf597D8VRW1x+R2C7ZdjVBSTw==", - "optional": true - }, - "@nodelib/fs.scandir": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", - "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", - "requires": { - "@nodelib/fs.stat": "2.0.5", - "run-parallel": "^1.1.9" - } - }, - "@nodelib/fs.stat": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", - "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==" - }, - "@nodelib/fs.walk": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", - "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", - "requires": { - "@nodelib/fs.scandir": "2.1.5", - "fastq": "^1.6.0" - } - }, - "@sindresorhus/is": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", - "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==" - }, - "@szmarczak/http-timer": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz", - "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==", - "requires": { - "defer-to-connect": "^1.0.1" - } - }, - "@types/json-schema": { - "version": "7.0.9", - "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz", - "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==" - }, - "@types/json5": { - "version": "0.0.29", - "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", - "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", - "dev": true - }, - "@types/node": { - "version": "16.11.19", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.19.tgz", - "integrity": "sha512-BPAcfDPoHlRQNKktbsbnpACGdypPFBuX4xQlsWDE7B8XXcfII+SpOLay3/qZmCLb39kV5S1RTYwXdkx2lwLYng==" - }, - "@types/parse-json": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", - "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" - }, - "@typescript-eslint/eslint-plugin": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.9.1.tgz", - "integrity": "sha512-Xv9tkFlyD4MQGpJgTo6wqDqGvHIRmRgah/2Sjz1PUnJTawjHWIwBivUE9x0QtU2WVii9baYgavo/bHjrZJkqTw==", - "requires": { - "@typescript-eslint/experimental-utils": "5.9.1", - "@typescript-eslint/scope-manager": "5.9.1", - "@typescript-eslint/type-utils": "5.9.1", - "debug": "^4.3.2", - "functional-red-black-tree": "^1.0.1", - "ignore": "^5.1.8", - "regexpp": "^3.2.0", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - }, - "dependencies": { - "ignore": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", - "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==" - }, - "semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "requires": { - "lru-cache": "^6.0.0" - } - } - } - }, - "@typescript-eslint/experimental-utils": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.9.1.tgz", - "integrity": "sha512-cb1Njyss0mLL9kLXgS/eEY53SZQ9sT519wpX3i+U457l2UXRDuo87hgKfgRazmu9/tQb0x2sr3Y0yrU+Zz0y+w==", - "requires": { - "@types/json-schema": "^7.0.9", - "@typescript-eslint/scope-manager": "5.9.1", - "@typescript-eslint/types": "5.9.1", - "@typescript-eslint/typescript-estree": "5.9.1", - "eslint-scope": "^5.1.1", - "eslint-utils": "^3.0.0" - }, - "dependencies": { - "eslint-scope": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", - "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==", - "requires": { - "esrecurse": "^4.3.0", - "estraverse": "^4.1.1" - } - }, - "estraverse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", - "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==" - } - } - }, - "@typescript-eslint/parser": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.9.1.tgz", - "integrity": "sha512-PLYO0AmwD6s6n0ZQB5kqPgfvh73p0+VqopQQLuNfi7Lm0EpfKyDalchpVwkE+81k5HeiRrTV/9w1aNHzjD7C4g==", - "requires": { - "@typescript-eslint/scope-manager": "5.9.1", - "@typescript-eslint/types": "5.9.1", - "@typescript-eslint/typescript-estree": "5.9.1", - "debug": "^4.3.2" - } - }, - "@typescript-eslint/scope-manager": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.9.1.tgz", - "integrity": "sha512-8BwvWkho3B/UOtzRyW07ffJXPaLSUKFBjpq8aqsRvu6HdEuzCY57+ffT7QoV4QXJXWSU1+7g3wE4AlgImmQ9pQ==", - "requires": { - "@typescript-eslint/types": "5.9.1", - "@typescript-eslint/visitor-keys": "5.9.1" - } - }, - "@typescript-eslint/type-utils": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.9.1.tgz", - "integrity": "sha512-tRSpdBnPRssjlUh35rE9ug5HrUvaB9ntREy7gPXXKwmIx61TNN7+l5YKgi1hMKxo5NvqZCfYhA5FvyuJG6X6vg==", - "requires": { - "@typescript-eslint/experimental-utils": "5.9.1", - "debug": "^4.3.2", - "tsutils": "^3.21.0" - } - }, - "@typescript-eslint/types": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.9.1.tgz", - "integrity": "sha512-SsWegWudWpkZCwwYcKoDwuAjoZXnM1y2EbEerTHho19Hmm+bQ56QG4L4jrtCu0bI5STaRTvRTZmjprWlTw/5NQ==" - }, - "@typescript-eslint/typescript-estree": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.9.1.tgz", - "integrity": "sha512-gL1sP6A/KG0HwrahVXI9fZyeVTxEYV//6PmcOn1tD0rw8VhUWYeZeuWHwwhnewnvEMcHjhnJLOBhA9rK4vmb8A==", - "requires": { - "@typescript-eslint/types": "5.9.1", - "@typescript-eslint/visitor-keys": "5.9.1", - "debug": "^4.3.2", - "globby": "^11.0.4", - "is-glob": "^4.0.3", - "semver": "^7.3.5", - "tsutils": "^3.21.0" - }, - "dependencies": { - "array-union": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", - "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==" - }, - "globby": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", - "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", - "requires": { - "array-union": "^2.1.0", - "dir-glob": "^3.0.1", - "fast-glob": "^3.2.9", - "ignore": "^5.2.0", - "merge2": "^1.4.1", - "slash": "^3.0.0" - } - }, - "ignore": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz", - "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==" - }, - "semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "requires": { - "lru-cache": "^6.0.0" - } - } - } - }, - "@typescript-eslint/visitor-keys": { - "version": "5.9.1", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.9.1.tgz", - "integrity": "sha512-Xh37pNz9e9ryW4TVdwiFzmr4hloty8cFj8GTWMXh3Z8swGwyQWeCcNgF0hm6t09iZd6eiZmIf4zHedQVP6TVtg==", - "requires": { - "@typescript-eslint/types": "5.9.1", - "eslint-visitor-keys": "^3.0.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz", - "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==" - } - } - }, - "@vercel/build-utils": { - "version": "2.5.4", - "resolved": "https://registry.npmjs.org/@vercel/build-utils/-/build-utils-2.5.4.tgz", - "integrity": "sha512-xPvYkxhpBXNIZQUrsmC3g58Heapaev4D8vrH3UcBgsvttU8uTQiuuISOOeTwZpufPxgZT5wgF0DRBybEulnCew==" - }, - "@vercel/go": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/@vercel/go/-/go-1.1.6.tgz", - "integrity": "sha512-swA2crS08fkPmw4UkR9yjmoL8FOCzuNHLFDqj8oM1V9ni610ibJ7Xk57jI8uyS7bTecQVh8VUxihb+SF0GT+aw==" - }, - "@vercel/node": { - "version": "1.8.4", - "resolved": "https://registry.npmjs.org/@vercel/node/-/node-1.8.4.tgz", - "integrity": "sha512-4bwJVqia4e/qDgBbdDWL2INZS5F/nouUDK+onJwi3xKGy7829cb8b9g2j7pMcqonv2U/xzOCUMyTr+uESx9hHQ==", - "requires": { - "@types/node": "*", - "ts-node": "8.9.1", - "typescript": "3.9.3" - }, - "dependencies": { - "typescript": { - "version": "3.9.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.3.tgz", - "integrity": "sha512-D/wqnB2xzNFIcoBG9FG8cXRDjiqSTbG2wd8DMZeQyJlP1vfTkIxH4GKveWaEBYySKIg+USu+E+EDIR47SqnaMQ==" - } - } - }, - "@vercel/python": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/@vercel/python/-/python-1.2.3.tgz", - "integrity": "sha512-DJRvL6bmt4m0xrkzSKUbP8mK57YSDdTBWoo0JYyXq/o2golQrv/wQTalbNchd4P8NhVL3mZuk/1JNYuv5u1rKQ==" - }, - "@vercel/ruby": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/@vercel/ruby/-/ruby-1.2.4.tgz", - "integrity": "sha512-g19vrrmJ4MTJCRB/bvx8DahIsml1iPn7wsdHf5k3QVN6lT0dlDILSBwpERC4hqzndimaApsmWOfjYtY9/L6+tQ==" - }, - "acorn": { - "version": "8.7.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz", - "integrity": "sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==", - "dev": true - }, - "acorn-jsx": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", - "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true - }, - "ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "requires": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - } - }, - "anser": { - "version": "1.4.9", - "resolved": "https://registry.npmjs.org/anser/-/anser-1.4.9.tgz", - "integrity": "sha512-AI+BjTeGt2+WFk4eWcqbQ7snZpDBt8SaLlj0RT2h5xfdWaiy51OjYvqwMrNzJLGy8iOAL6nKDITWO+rd4MkYEA==" - }, - "ansi-align": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz", - "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==", - "requires": { - "string-width": "^3.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==" - }, - "emoji-regex": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz", - "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==" - }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" - }, - "string-width": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", - "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==", - "requires": { - "emoji-regex": "^7.0.1", - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^5.1.0" - } - }, - "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", - "requires": { - "ansi-regex": "^4.1.0" - } - } - } - }, - "ansi-colors": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", - "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==", - "dev": true - }, - "ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "requires": { - "color-convert": "^1.9.0" - } - }, - "anymatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", - "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "requires": { - "normalize-path": "^3.0.0", - "picomatch": "^2.0.4" - } - }, - "arg": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", - "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==" - }, - "argparse": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true - }, - "aria-query": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz", - "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==", - "dev": true, - "requires": { - "@babel/runtime": "^7.10.2", - "@babel/runtime-corejs3": "^7.10.2" - } - }, - "array-includes": { - "version": "3.1.4", - "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz", - "integrity": "sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==", - "dev": true, - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1", - "get-intrinsic": "^1.1.1", - "is-string": "^1.0.7" - } - }, - "array-union": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", - "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", - "requires": { - "array-uniq": "^1.0.1" - } - }, - "array-uniq": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", - "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=" - }, - "array.prototype.flat": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz", - "integrity": "sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==", - "dev": true, - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.0" - } - }, - "array.prototype.flatmap": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz", - "integrity": "sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==", - "dev": true, - "requires": { - "call-bind": "^1.0.0", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.0" - } - }, - "asn1.js": { - "version": "5.4.1", - "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz", - "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==", - "requires": { - "bn.js": "^4.0.0", - "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0", - "safer-buffer": "^2.1.0" - }, - "dependencies": { - "bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - } - } - }, - "assert": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz", - "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==", - "requires": { - "es6-object-assign": "^1.1.0", - "is-nan": "^1.2.1", - "object-is": "^1.0.1", - "util": "^0.12.0" - } - }, - "ast-types-flow": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz", - "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=", - "dev": true - }, - "atob": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "dev": true - }, - "autoprefixer": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.1.tgz", - "integrity": "sha512-B3ZEG7wtzXDRCEFsan7HmR2AeNsxdJB0+sEC0Hc5/c2NbhJqPwuZm+tn233GBVw82L+6CtD6IPSfVruwKjfV3A==", - "requires": { - "browserslist": "^4.19.1", - "caniuse-lite": "^1.0.30001294", - "fraction.js": "^4.1.2", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - } - }, - "available-typed-arrays": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", - "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==" - }, - "axe-core": { - "version": "4.3.5", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.5.tgz", - "integrity": "sha512-WKTW1+xAzhMS5dJsxWkliixlO/PqC4VhmO9T4juNYcaTg9jzWiJsou6m5pxWYGfigWbwzJWeFY6z47a+4neRXA==", - "dev": true - }, - "axobject-query": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", - "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==", - "dev": true - }, - "babel-loader": { - "version": "7.1.5", - "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-7.1.5.tgz", - "integrity": "sha512-iCHfbieL5d1LfOQeeVJEUyD9rTwBcP/fcEbRCfempxTDuqrKpu0AZjLAQHEQa3Yqyj9ORKe2iHfoj4rHLf7xpw==", - "requires": { - "find-cache-dir": "^1.0.0", - "loader-utils": "^1.0.2", - "mkdirp": "^0.5.1" - } - }, - "balanced-match": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" - }, - "base64-js": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", - "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==" - }, - "big.js": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", - "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==" - }, - "binary-extensions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" - }, - "bn.js": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz", - "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==" - }, - "boxen": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz", - "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==", - "requires": { - "ansi-align": "^3.0.0", - "camelcase": "^5.3.1", - "chalk": "^3.0.0", - "cli-boxes": "^2.2.0", - "string-width": "^4.1.0", - "term-size": "^2.1.0", - "type-fest": "^0.8.1", - "widest-line": "^3.1.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "requires": { - "color-convert": "^2.0.1" - } - }, - "camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==" - }, - "chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "requires": { - "has-flag": "^4.0.0" - } - }, - "type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==" - } - } - }, - "brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "requires": { - "balanced-match": "^1.0.0", - "concat-map": "0.0.1" - } - }, - "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "requires": { - "fill-range": "^7.0.1" - } - }, - "brorand": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz", - "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=" - }, - "browserify-aes": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz", - "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==", - "requires": { - "buffer-xor": "^1.0.3", - "cipher-base": "^1.0.0", - "create-hash": "^1.1.0", - "evp_bytestokey": "^1.0.3", - "inherits": "^2.0.1", - "safe-buffer": "^5.0.1" - } - }, - "browserify-cipher": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz", - "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==", - "requires": { - "browserify-aes": "^1.0.4", - "browserify-des": "^1.0.0", - "evp_bytestokey": "^1.0.0" - } - }, - "browserify-des": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz", - "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==", - "requires": { - "cipher-base": "^1.0.1", - "des.js": "^1.0.0", - "inherits": "^2.0.1", - "safe-buffer": "^5.1.2" - } - }, - "browserify-rsa": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz", - "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==", - "requires": { - "bn.js": "^5.0.0", - "randombytes": "^2.0.1" - } - }, - "browserify-sign": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz", - "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==", - "requires": { - "bn.js": "^5.1.1", - "browserify-rsa": "^4.0.1", - "create-hash": "^1.2.0", - "create-hmac": "^1.1.7", - "elliptic": "^6.5.3", - "inherits": "^2.0.4", - "parse-asn1": "^5.1.5", - "readable-stream": "^3.6.0", - "safe-buffer": "^5.2.0" - } - }, - "browserify-zlib": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz", - "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==", - "requires": { - "pako": "~1.0.5" - } - }, - "browserslist": { - "version": "4.19.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz", - "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==", - "requires": { - "caniuse-lite": "^1.0.30001286", - "electron-to-chromium": "^1.4.17", - "escalade": "^3.1.1", - "node-releases": "^2.0.1", - "picocolors": "^1.0.0" - } - }, - "buffer": { - "version": "5.6.0", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz", - "integrity": "sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==", - "requires": { - "base64-js": "^1.0.2", - "ieee754": "^1.1.4" - } - }, - "buffer-from": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz", - "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==" - }, - "buffer-xor": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz", - "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=" - }, - "builtin-status-codes": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", - "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=" - }, - "cacheable-request": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz", - "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==", - "requires": { - "clone-response": "^1.0.2", - "get-stream": "^5.1.0", - "http-cache-semantics": "^4.0.0", - "keyv": "^3.0.0", - "lowercase-keys": "^2.0.0", - "normalize-url": "^4.1.0", - "responselike": "^1.0.2" - }, - "dependencies": { - "get-stream": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", - "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", - "requires": { - "pump": "^3.0.0" - } - }, - "lowercase-keys": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz", - "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==" - } - } - }, - "call-bind": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", - "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", - "requires": { - "function-bind": "^1.1.1", - "get-intrinsic": "^1.0.2" - } - }, - "caniuse-lite": { - "version": "1.0.30001457", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001457.tgz", - "integrity": "sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA==" - }, - "chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "requires": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - } - }, - "chokidar": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", - "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", - "requires": { - "anymatch": "~3.1.1", - "braces": "~3.0.2", - "fsevents": "~2.3.1", - "glob-parent": "~5.1.0", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.5.0" - }, - "dependencies": { - "glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "requires": { - "is-glob": "^4.0.1" - } - } - } - }, - "ci-info": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz", - "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==" - }, - "cipher-base": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz", - "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==", - "requires": { - "inherits": "^2.0.1", - "safe-buffer": "^5.0.1" - } - }, - "classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" - }, - "cli-boxes": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz", - "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==" - }, - "clone-response": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz", - "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=", - "requires": { - "mimic-response": "^1.0.0" - }, - "dependencies": { - "mimic-response": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", - "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==" - } - } - }, - "color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" - }, - "colorette": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", - "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==" - }, - "commondir": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", - "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=" - }, - "concat-map": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" - }, - "configstore": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", - "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==", - "requires": { - "dot-prop": "^5.2.0", - "graceful-fs": "^4.1.2", - "make-dir": "^3.0.0", - "unique-string": "^2.0.0", - "write-file-atomic": "^3.0.0", - "xdg-basedir": "^4.0.0" - } - }, - "confusing-browser-globals": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz", - "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==" - }, - "constants-browserify": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", - "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=" - }, - "convert-source-map": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz", - "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==", - "requires": { - "safe-buffer": "~5.1.1" - }, - "dependencies": { - "safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" - } - } - }, - "core-js-pure": { - "version": "3.6.5", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.6.5.tgz", - "integrity": "sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==", - "dev": true - }, - "cors": { - "version": "2.8.5", - "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", - "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", - "requires": { - "object-assign": "^4", - "vary": "^1" - } - }, - "cosmiconfig": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz", - "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==", - "requires": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.2.1", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.10.0" - } - }, - "create-ecdh": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz", - "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==", - "requires": { - "bn.js": "^4.1.0", - "elliptic": "^6.5.3" - }, - "dependencies": { - "bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - } - } - }, - "create-hash": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", - "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==", - "requires": { - "cipher-base": "^1.0.1", - "inherits": "^2.0.1", - "md5.js": "^1.3.4", - "ripemd160": "^2.0.1", - "sha.js": "^2.4.0" - } - }, - "create-hmac": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz", - "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==", - "requires": { - "cipher-base": "^1.0.3", - "create-hash": "^1.1.0", - "inherits": "^2.0.1", - "ripemd160": "^2.0.0", - "safe-buffer": "^5.0.1", - "sha.js": "^2.4.8" - } - }, - "cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", - "dev": true, - "requires": { - "path-key": "^3.1.0", - "shebang-command": "^2.0.0", - "which": "^2.0.1" - } - }, - "crypto-browserify": { - "version": "3.12.0", - "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz", - "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==", - "requires": { - "browserify-cipher": "^1.0.0", - "browserify-sign": "^4.0.0", - "create-ecdh": "^4.0.0", - "create-hash": "^1.1.0", - "create-hmac": "^1.1.0", - "diffie-hellman": "^5.0.0", - "inherits": "^2.0.1", - "pbkdf2": "^3.0.3", - "public-encrypt": "^4.0.0", - "randombytes": "^2.0.0", - "randomfill": "^1.0.3" - } - }, - "crypto-random-string": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", - "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==" - }, - "css": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz", - "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==", - "dev": true, - "requires": { - "inherits": "^2.0.4", - "source-map": "^0.6.1", - "source-map-resolve": "^0.6.0" - } - }, - "css.escape": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=" - }, - "cssnano-preset-simple": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz", - "integrity": "sha512-vxQPeoMRqUT3c/9f0vWeVa2nKQIHFpogtoBvFdW4GQ3IvEJ6uauCP6p3Y5zQDLFcI7/+40FTgX12o7XUL0Ko+w==", - "requires": { - "caniuse-lite": "^1.0.30001202" - } - }, - "cssnano-simple": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/cssnano-simple/-/cssnano-simple-3.0.0.tgz", - "integrity": "sha512-oU3ueli5Dtwgh0DyeohcIEE00QVfbPR3HzyXdAl89SfnQG3y0/qcpfLVW+jPIh3/rgMZGwuW96rejZGaYE9eUg==", - "requires": { - "cssnano-preset-simple": "^3.0.0" - } - }, - "damerau-levenshtein": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz", - "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==", - "dev": true - }, - "data-uri-to-buffer": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-3.0.1.tgz", - "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==" - }, - "date-fns": { - "version": "2.28.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz", - "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==" - }, - "debug": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz", - "integrity": "sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==", - "requires": { - "ms": "2.1.2" - }, - "dependencies": { - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" - } - } - }, - "decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "dev": true - }, - "deep-extend": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", - "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" - }, - "deep-is": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", - "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=", - "dev": true - }, - "defer-to-connect": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz", - "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==" - }, - "define-properties": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", - "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", - "requires": { - "object-keys": "^1.0.12" - } - }, - "depd": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", - "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" - }, - "des.js": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz", - "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==", - "requires": { - "inherits": "^2.0.1", - "minimalistic-assert": "^1.0.0" - } - }, - "diff": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", - "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==" - }, - "diffie-hellman": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", - "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==", - "requires": { - "bn.js": "^4.1.0", - "miller-rabin": "^4.0.0", - "randombytes": "^2.0.0" - }, - "dependencies": { - "bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - } - } - }, - "dir-glob": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", - "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", - "requires": { - "path-type": "^4.0.0" - } - }, - "doctrine": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", - "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", - "dev": true, - "requires": { - "esutils": "^2.0.2" - } - }, - "dom-serializer": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", - "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==", - "dev": true, - "requires": { - "domelementtype": "^2.0.1", - "domhandler": "^4.2.0", - "entities": "^2.0.0" - }, - "dependencies": { - "entities": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", - "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", - "dev": true - } - } - }, - "domain-browser": { - "version": "4.19.0", - "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz", - "integrity": "sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ==" - }, - "domelementtype": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz", - "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==", - "dev": true - }, - "domhandler": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz", - "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==", - "dev": true, - "requires": { - "domelementtype": "^2.2.0" - } - }, - "domutils": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", - "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==", - "dev": true, - "requires": { - "dom-serializer": "^1.0.1", - "domelementtype": "^2.2.0", - "domhandler": "^4.2.0" - } - }, - "dot-prop": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", - "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==", - "requires": { - "is-obj": "^2.0.0" - } - }, - "duplexer3": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", - "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=" - }, - "electron-to-chromium": { - "version": "1.4.32", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.32.tgz", - "integrity": "sha512-7QRVfMlccTFs7cZV3lB0k9Wcm6R6F+w1yBPX+xBAlAP/1oJIstxTev3A4r8REnUUAFph/cIB8y/EBU7PDbJTQw==" - }, - "elliptic": { - "version": "6.5.4", - "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz", - "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==", - "requires": { - "bn.js": "^4.11.9", - "brorand": "^1.1.0", - "hash.js": "^1.0.0", - "hmac-drbg": "^1.0.1", - "inherits": "^2.0.4", - "minimalistic-assert": "^1.0.1", - "minimalistic-crypto-utils": "^1.0.1" - }, - "dependencies": { - "bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - } - } - }, - "emit-file-loader": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/emit-file-loader/-/emit-file-loader-0.0.2.tgz", - "integrity": "sha512-2da7hleO5XD//6jt/2Q0LsPnYE/H7AgmVcKGeq2HD+4C+NuN91UM6VT06jasFwzINRuMdV0ORhojPfn2sTFQ3Q==", - "requires": { - "loader-utils": "^1.1.0" - } - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "emojis-list": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", - "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==" - }, - "encoding": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", - "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "requires": { - "iconv-lite": "^0.6.2" - }, - "dependencies": { - "iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "requires": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - } - } - } - }, - "end-of-stream": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", - "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==", - "requires": { - "once": "^1.4.0" - } - }, - "enquirer": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", - "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==", - "dev": true, - "requires": { - "ansi-colors": "^4.1.1" - } - }, - "entities": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz", - "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==", - "dev": true - }, - "error-ex": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", - "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "requires": { - "is-arrayish": "^0.2.1" - }, - "dependencies": { - "is-arrayish": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" - } - } - }, - "es-abstract": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz", - "integrity": "sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==", - "requires": { - "call-bind": "^1.0.2", - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "get-intrinsic": "^1.1.1", - "get-symbol-description": "^1.0.0", - "has": "^1.0.3", - "has-symbols": "^1.0.2", - "internal-slot": "^1.0.3", - "is-callable": "^1.2.4", - "is-negative-zero": "^2.0.1", - "is-regex": "^1.1.4", - "is-shared-array-buffer": "^1.0.1", - "is-string": "^1.0.7", - "is-weakref": "^1.0.1", - "object-inspect": "^1.11.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.2", - "string.prototype.trimend": "^1.0.4", - "string.prototype.trimstart": "^1.0.4", - "unbox-primitive": "^1.0.1" - } - }, - "es-to-primitive": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", - "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", - "requires": { - "is-callable": "^1.1.4", - "is-date-object": "^1.0.1", - "is-symbol": "^1.0.2" - } - }, - "es6-object-assign": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz", - "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw=" - }, - "escalade": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", - "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==" - }, - "escape-goat": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz", - "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==" - }, - "escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" - }, - "eslint": { - "version": "8.6.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.6.0.tgz", - "integrity": "sha512-UvxdOJ7mXFlw7iuHZA4jmzPaUqIw54mZrv+XPYKNbKdLR0et4rf60lIZUU9kiNtnzzMzGWxMV+tQ7uG7JG8DPw==", - "dev": true, - "requires": { - "@eslint/eslintrc": "^1.0.5", - "@humanwhocodes/config-array": "^0.9.2", - "ajv": "^6.10.0", - "chalk": "^4.0.0", - "cross-spawn": "^7.0.2", - "debug": "^4.3.2", - "doctrine": "^3.0.0", - "enquirer": "^2.3.5", - "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.1.0", - "eslint-utils": "^3.0.0", - "eslint-visitor-keys": "^3.1.0", - "espree": "^9.3.0", - "esquery": "^1.4.0", - "esutils": "^2.0.2", - "fast-deep-equal": "^3.1.3", - "file-entry-cache": "^6.0.1", - "functional-red-black-tree": "^1.0.1", - "glob-parent": "^6.0.1", - "globals": "^13.6.0", - "ignore": "^4.0.6", - "import-fresh": "^3.0.0", - "imurmurhash": "^0.1.4", - "is-glob": "^4.0.0", - "js-yaml": "^4.1.0", - "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.4.1", - "lodash.merge": "^4.6.2", - "minimatch": "^3.0.4", - "natural-compare": "^1.4.0", - "optionator": "^0.9.1", - "progress": "^2.0.0", - "regexpp": "^3.2.0", - "semver": "^7.2.1", - "strip-ansi": "^6.0.1", - "strip-json-comments": "^3.1.0", - "text-table": "^0.2.0", - "v8-compile-cache": "^2.0.3" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true - }, - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", - "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "escape-string-regexp": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", - "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", - "dev": true - }, - "eslint-visitor-keys": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz", - "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==", - "dev": true - }, - "globals": { - "version": "13.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.12.0.tgz", - "integrity": "sha512-uS8X6lSKN2JumVoXrbUz+uG4BYG+eiawqm3qFcT7ammfbUHeCBoJMlHcec/S3krSk73/AE/f0szYFmgAA3kYZg==", - "dev": true, - "requires": { - "type-fest": "^0.20.2" - } - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, - "semver": { - "version": "7.3.2", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz", - "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==", - "dev": true - }, - "strip-ansi": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", - "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.1" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - }, - "type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true - } - } - }, - "eslint-config-airbnb": { - "version": "19.0.4", - "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz", - "integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==", - "dev": true, - "requires": { - "eslint-config-airbnb-base": "^15.0.0", - "object.assign": "^4.1.2", - "object.entries": "^1.1.5" - } - }, - "eslint-config-airbnb-base": { - "version": "15.0.0", - "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz", - "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==", - "requires": { - "confusing-browser-globals": "^1.0.10", - "object.assign": "^4.1.2", - "object.entries": "^1.1.5", - "semver": "^6.3.0" - } - }, - "eslint-config-airbnb-typescript": { - "version": "16.1.0", - "resolved": "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-16.1.0.tgz", - "integrity": "sha512-W5Cq20KpEx5ZLC54bnVrC37zq2+WD956Kp/Ma3nYFRjT1v9KM63v+DPkrrmmrVqrlDKaD0ivm/qeYmyHV6qKlw==", - "requires": { - "eslint-config-airbnb-base": "^15.0.0" - } - }, - "eslint-config-prettier": { - "version": "8.3.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz", - "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==", - "dev": true - }, - "eslint-config-wesbos": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/eslint-config-wesbos/-/eslint-config-wesbos-3.0.2.tgz", - "integrity": "sha512-lzyvce/Eprb1dST3c5DMwhm7oqb8TpFCwPb1BrNgdVKp+2jdc/yBVEAnwq/One8Avhy9defQUXrVGBusm2v00w==", - "dev": true - }, - "eslint-import-resolver-node": { - "version": "0.3.6", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz", - "integrity": "sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==", - "dev": true, - "requires": { - "debug": "^3.2.7", - "resolve": "^1.20.0" - }, - "dependencies": { - "debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", - "dev": true, - "requires": { - "ms": "^2.1.1" - } - }, - "ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true - }, - "resolve": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", - "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dev": true, - "requires": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - } - } - } - }, - "eslint-module-utils": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.2.tgz", - "integrity": "sha512-zquepFnWCY2ISMFwD/DqzaM++H+7PDzOpUvotJWm/y1BAFt5R4oeULgdrTejKqLkz7MA/tgstsUMNYc7wNdTrg==", - "dev": true, - "requires": { - "debug": "^3.2.7", - "find-up": "^2.1.0" - }, - "dependencies": { - "debug": { - "version": "3.2.7", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", - "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", - "dev": true, - "requires": { - "ms": "^2.1.1" - } - }, - "find-up": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", - "dev": true, - "requires": { - "locate-path": "^2.0.0" - } - }, - "locate-path": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", - "dev": true, - "requires": { - "p-locate": "^2.0.0", - "path-exists": "^3.0.0" - } - }, - "ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true - }, - "p-limit": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", - "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", - "dev": true, - "requires": { - "p-try": "^1.0.0" - } - }, - "p-locate": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", - "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", - "dev": true, - "requires": { - "p-limit": "^1.1.0" - } - }, - "p-try": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", - "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=", - "dev": true - } - } - }, - "eslint-plugin-html": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-html/-/eslint-plugin-html-6.2.0.tgz", - "integrity": "sha512-vi3NW0E8AJombTvt8beMwkL1R/fdRWl4QSNRNMhVQKWm36/X0KF0unGNAY4mqUF06mnwVWZcIcerrCnfn9025g==", - "dev": true, - "requires": { - "htmlparser2": "^7.1.2" - } - }, - "eslint-plugin-import": { - "version": "2.25.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz", - "integrity": "sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==", - "dev": true, - "requires": { - "array-includes": "^3.1.4", - "array.prototype.flat": "^1.2.5", - "debug": "^2.6.9", - "doctrine": "^2.1.0", - "eslint-import-resolver-node": "^0.3.6", - "eslint-module-utils": "^2.7.2", - "has": "^1.0.3", - "is-core-module": "^2.8.0", - "is-glob": "^4.0.3", - "minimatch": "^3.0.4", - "object.values": "^1.1.5", - "resolve": "^1.20.0", - "tsconfig-paths": "^3.12.0" - }, - "dependencies": { - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, - "requires": { - "ms": "2.0.0" - } - }, - "doctrine": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", - "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", - "dev": true, - "requires": { - "esutils": "^2.0.2" - } - }, - "resolve": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", - "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", - "dev": true, - "requires": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - } - } - } - }, - "eslint-plugin-jsx-a11y": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz", - "integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==", - "dev": true, - "requires": { - "@babel/runtime": "^7.16.3", - "aria-query": "^4.2.2", - "array-includes": "^3.1.4", - "ast-types-flow": "^0.0.7", - "axe-core": "^4.3.5", - "axobject-query": "^2.2.0", - "damerau-levenshtein": "^1.0.7", - "emoji-regex": "^9.2.2", - "has": "^1.0.3", - "jsx-ast-utils": "^3.2.1", - "language-tags": "^1.0.5", - "minimatch": "^3.0.4" - }, - "dependencies": { - "@babel/runtime": { - "version": "7.16.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.7.tgz", - "integrity": "sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==", - "dev": true, - "requires": { - "regenerator-runtime": "^0.13.4" - } - }, - "emoji-regex": { - "version": "9.2.2", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", - "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", - "dev": true - }, - "regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", - "dev": true - } - } - }, - "eslint-plugin-prettier": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.0.0.tgz", - "integrity": "sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==", - "dev": true, - "requires": { - "prettier-linter-helpers": "^1.0.0" - } - }, - "eslint-plugin-react": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.28.0.tgz", - "integrity": "sha512-IOlFIRHzWfEQQKcAD4iyYDndHwTQiCMcJVJjxempf203jnNLUnW34AXLrV33+nEXoifJE2ZEGmcjKPL8957eSw==", - "dev": true, - "requires": { - "array-includes": "^3.1.4", - "array.prototype.flatmap": "^1.2.5", - "doctrine": "^2.1.0", - "estraverse": "^5.3.0", - "jsx-ast-utils": "^2.4.1 || ^3.0.0", - "minimatch": "^3.0.4", - "object.entries": "^1.1.5", - "object.fromentries": "^2.0.5", - "object.hasown": "^1.1.0", - "object.values": "^1.1.5", - "prop-types": "^15.7.2", - "resolve": "^2.0.0-next.3", - "semver": "^6.3.0", - "string.prototype.matchall": "^4.0.6" - }, - "dependencies": { - "doctrine": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", - "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", - "dev": true, - "requires": { - "esutils": "^2.0.2" - } - }, - "resolve": { - "version": "2.0.0-next.3", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz", - "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==", - "dev": true, - "requires": { - "is-core-module": "^2.2.0", - "path-parse": "^1.0.6" - } - } - } - }, - "eslint-plugin-react-hooks": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz", - "integrity": "sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==", - "dev": true - }, - "eslint-scope": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz", - "integrity": "sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==", - "dev": true, - "requires": { - "esrecurse": "^4.3.0", - "estraverse": "^5.2.0" - } - }, - "eslint-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz", - "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==", - "requires": { - "eslint-visitor-keys": "^2.0.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz", - "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==" - } - } - }, - "espree": { - "version": "9.3.0", - "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.0.tgz", - "integrity": "sha512-d/5nCsb0JcqsSEeQzFZ8DH1RmxPcglRWh24EFTlUEmCKoehXGdpsx0RkHDubqUI8LSAIKMQp4r9SzQ3n+sm4HQ==", - "dev": true, - "requires": { - "acorn": "^8.7.0", - "acorn-jsx": "^5.3.1", - "eslint-visitor-keys": "^3.1.0" - }, - "dependencies": { - "eslint-visitor-keys": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.1.0.tgz", - "integrity": "sha512-yWJFpu4DtjsWKkt5GeNBBuZMlNcYVs6vRCLoCVEJrTjaSB6LC98gFipNK/erM2Heg/E8mIK+hXG/pJMLK+eRZA==", - "dev": true - } - } - }, - "esprima": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", - "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" - }, - "esquery": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz", - "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==", - "dev": true, - "requires": { - "estraverse": "^5.1.0" - } - }, - "esrecurse": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", - "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", - "requires": { - "estraverse": "^5.2.0" - } - }, - "estraverse": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", - "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==" - }, - "esutils": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", - "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", - "dev": true - }, - "etag": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", - "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" - }, - "eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" - }, - "events": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz", - "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==" - }, - "evp_bytestokey": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz", - "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==", - "requires": { - "md5.js": "^1.3.4", - "safe-buffer": "^5.1.1" - } - }, - "fast-deep-equal": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" - }, - "fast-diff": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz", - "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", - "dev": true - }, - "fast-glob": { - "version": "3.2.10", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.10.tgz", - "integrity": "sha512-s9nFhFnvR63wls6/kM88kQqDhMu0AfdjqouE2l5GVQPbqLgyFjjU5ry/r2yKsJxpb9Py1EYNqieFrmMaX4v++A==", - "requires": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "dependencies": { - "glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "requires": { - "is-glob": "^4.0.1" - } - } - } - }, - "fast-json-stable-stringify": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", - "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" - }, - "fast-levenshtein": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", - "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", - "dev": true - }, - "fastq": { - "version": "1.13.0", - "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz", - "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==", - "requires": { - "reusify": "^1.0.4" - } - }, - "file-entry-cache": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", - "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", - "dev": true, - "requires": { - "flat-cache": "^3.0.4" - } - }, - "fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "requires": { - "to-regex-range": "^5.0.1" - } - }, - "find-cache-dir": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz", - "integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=", - "requires": { - "commondir": "^1.0.1", - "make-dir": "^1.0.0", - "pkg-dir": "^2.0.0" - }, - "dependencies": { - "find-up": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", - "requires": { - "locate-path": "^2.0.0" - } - }, - "locate-path": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", - "requires": { - "p-locate": "^2.0.0", - "path-exists": "^3.0.0" - } - }, - "make-dir": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", - "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", - "requires": { - "pify": "^3.0.0" - } - }, - "p-limit": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz", - "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==", - "requires": { - "p-try": "^1.0.0" - } - }, - "p-locate": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", - "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", - "requires": { - "p-limit": "^1.1.0" - } - }, - "p-try": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", - "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=" - }, - "pkg-dir": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz", - "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=", - "requires": { - "find-up": "^2.1.0" - } - } - } - }, - "flat-cache": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", - "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", - "dev": true, - "requires": { - "flatted": "^3.1.0", - "rimraf": "^3.0.2" - } - }, - "flatted": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz", - "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==", - "dev": true - }, - "foreach": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz", - "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=" - }, - "fraction.js": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz", - "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==" - }, - "fs.realpath": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" - }, - "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "optional": true - }, - "function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" - }, - "functional-red-black-tree": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", - "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" - }, - "gensync": { - "version": "1.0.0-beta.2", - "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz", - "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==", - "dev": true - }, - "get-intrinsic": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", - "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==", - "requires": { - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1" - } - }, - "get-orientation": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/get-orientation/-/get-orientation-1.1.2.tgz", - "integrity": "sha512-/pViTfifW+gBbh/RnlFYHINvELT9Znt+SYyDKAUL6uV6By019AK/s+i9XP4jSwq7lwP38Fd8HVeTxym3+hkwmQ==", - "requires": { - "stream-parser": "^0.3.1" - } - }, - "get-stream": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", - "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", - "requires": { - "pump": "^3.0.0" - } - }, - "get-symbol-description": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz", - "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==", - "requires": { - "call-bind": "^1.0.2", - "get-intrinsic": "^1.1.1" - } - }, - "glob": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", - "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==", - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "glob-parent": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", - "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", - "dev": true, - "requires": { - "is-glob": "^4.0.3" - } - }, - "glob-to-regexp": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", - "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==" - }, - "global-dirs": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.0.1.tgz", - "integrity": "sha512-5HqUqdhkEovj2Of/ms3IeS/EekcO54ytHRLV4PEY2rhRwrHXLQjeVEES0Lhka0xwNDtGYn58wyC4s5+MHsOO6A==", - "requires": { - "ini": "^1.3.5" - } - }, - "globby": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", - "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", - "requires": { - "array-union": "^1.0.1", - "glob": "^7.0.3", - "object-assign": "^4.0.1", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" - }, - "dependencies": { - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" - } - } - }, - "got": { - "version": "9.6.0", - "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", - "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==", - "requires": { - "@sindresorhus/is": "^0.14.0", - "@szmarczak/http-timer": "^1.1.2", - "cacheable-request": "^6.0.0", - "decompress-response": "^3.3.0", - "duplexer3": "^0.1.4", - "get-stream": "^4.1.0", - "lowercase-keys": "^1.0.1", - "mimic-response": "^1.0.1", - "p-cancelable": "^1.0.0", - "to-readable-stream": "^1.0.0", - "url-parse-lax": "^3.0.0" - }, - "dependencies": { - "decompress-response": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz", - "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=", - "requires": { - "mimic-response": "^1.0.0" - } - }, - "mimic-response": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz", - "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==" - } - } - }, - "graceful-fs": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", - "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==" - }, - "has": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", - "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", - "requires": { - "function-bind": "^1.1.1" - } - }, - "has-bigints": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz", - "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==" - }, - "has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" - }, - "has-symbols": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz", - "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==" - }, - "has-tostringtag": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz", - "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==", - "requires": { - "has-symbols": "^1.0.2" - } - }, - "has-yarn": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz", - "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==" - }, - "hash-base": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz", - "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==", - "requires": { - "inherits": "^2.0.4", - "readable-stream": "^3.6.0", - "safe-buffer": "^5.2.0" - } - }, - "hash.js": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz", - "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==", - "requires": { - "inherits": "^2.0.3", - "minimalistic-assert": "^1.0.1" - } - }, - "he": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", - "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" - }, - "hls.js": { - "version": "0.14.17", - "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-0.14.17.tgz", - "integrity": "sha512-25A7+m6qqp6UVkuzUQ//VVh2EEOPYlOBg32ypr34bcPO7liBMOkKFvbjbCBfiPAOTA/7BSx1Dujft3Th57WyFg==", - "requires": { - "eventemitter3": "^4.0.3", - "url-toolkit": "^2.1.6" - } - }, - "hmac-drbg": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", - "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=", - "requires": { - "hash.js": "^1.0.3", - "minimalistic-assert": "^1.0.0", - "minimalistic-crypto-utils": "^1.0.1" - } - }, - "htmlparser2": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz", - "integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==", - "dev": true, - "requires": { - "domelementtype": "^2.0.1", - "domhandler": "^4.2.2", - "domutils": "^2.8.0", - "entities": "^3.0.1" - } - }, - "http-cache-semantics": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz", - "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==" - }, - "https-browserify": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", - "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" - }, - "iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "requires": { - "safer-buffer": ">= 2.1.2 < 3" - } - }, - "ieee754": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", - "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==" - }, - "ignore": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", - "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", - "dev": true - }, - "image-size": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz", - "integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==", - "requires": { - "queue": "6.0.2" - } - }, - "import-fresh": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", - "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==", - "requires": { - "parent-module": "^1.0.0", - "resolve-from": "^4.0.0" - } - }, - "import-lazy": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", - "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=" - }, - "imurmurhash": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", - "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=" - }, - "inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "requires": { - "once": "^1.3.0", - "wrappy": "1" - } - }, - "inherits": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" - }, - "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" - }, - "internal-slot": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz", - "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==", - "requires": { - "get-intrinsic": "^1.1.0", - "has": "^1.0.3", - "side-channel": "^1.0.4" - } - }, - "is-arguments": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz", - "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==", - "requires": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - } - }, - "is-bigint": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz", - "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==", - "requires": { - "has-bigints": "^1.0.1" - } - }, - "is-binary-path": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", - "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "requires": { - "binary-extensions": "^2.0.0" - } - }, - "is-boolean-object": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", - "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==", - "requires": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - } - }, - "is-callable": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz", - "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==" - }, - "is-ci": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz", - "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==", - "requires": { - "ci-info": "^2.0.0" - } - }, - "is-core-module": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz", - "integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==", - "dev": true, - "requires": { - "has": "^1.0.3" - } - }, - "is-date-object": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz", - "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==", - "requires": { - "has-tostringtag": "^1.0.0" - } - }, - "is-extglob": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" - }, - "is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==" - }, - "is-generator-function": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz", - "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==", - "requires": { - "has-tostringtag": "^1.0.0" - } - }, - "is-glob": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "requires": { - "is-extglob": "^2.1.1" - } - }, - "is-installed-globally": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz", - "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==", - "requires": { - "global-dirs": "^2.0.1", - "is-path-inside": "^3.0.1" - } - }, - "is-nan": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz", - "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==", - "requires": { - "call-bind": "^1.0.0", - "define-properties": "^1.1.3" - } - }, - "is-negative-zero": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz", - "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==" - }, - "is-npm": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz", - "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==" - }, - "is-number": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" - }, - "is-number-object": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.6.tgz", - "integrity": "sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==", - "requires": { - "has-tostringtag": "^1.0.0" - } - }, - "is-obj": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz", - "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==" - }, - "is-path-inside": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.2.tgz", - "integrity": "sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==" - }, - "is-regex": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz", - "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==", - "requires": { - "call-bind": "^1.0.2", - "has-tostringtag": "^1.0.0" - } - }, - "is-shared-array-buffer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz", - "integrity": "sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==" - }, - "is-string": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz", - "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==", - "requires": { - "has-tostringtag": "^1.0.0" - } - }, - "is-symbol": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz", - "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==", - "requires": { - "has-symbols": "^1.0.2" - } - }, - "is-typed-array": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.8.tgz", - "integrity": "sha512-HqH41TNZq2fgtGT8WHVFVJhBVGuY3AnP3Q36K8JKXUxSxRgk/d+7NjmwG2vo2mYmXK8UYZKu0qH8bVP5gEisjA==", - "requires": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", - "es-abstract": "^1.18.5", - "foreach": "^2.0.5", - "has-tostringtag": "^1.0.0" - } - }, - "is-typedarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" - }, - "is-weakref": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", - "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==", - "requires": { - "call-bind": "^1.0.2" - } - }, - "is-yarn-global": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz", - "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==" - }, - "isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", - "dev": true - }, - "jest-worker": { - "version": "27.0.0-next.5", - "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.0-next.5.tgz", - "integrity": "sha512-mk0umAQ5lT+CaOJ+Qp01N6kz48sJG2kr2n1rX0koqKf6FIygQV0qLOdN9SCYID4IVeSigDOcPeGLozdMLYfb5g==", - "requires": { - "@types/node": "*", - "merge-stream": "^2.0.0", - "supports-color": "^8.0.0" - }, - "dependencies": { - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" - }, - "supports-color": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, - "js-tokens": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" - }, - "js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, - "requires": { - "argparse": "^2.0.1" - } - }, - "jsesc": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", - "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true - }, - "json-buffer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz", - "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=" - }, - "json-parse-even-better-errors": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", - "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==" - }, - "json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" - }, - "json-stable-stringify-without-jsonify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", - "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=", - "dev": true - }, - "json5": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz", - "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==", - "requires": { - "minimist": "^1.2.0" - } - }, - "jsx-ast-utils": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz", - "integrity": "sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==", - "dev": true, - "requires": { - "array-includes": "^3.1.3", - "object.assign": "^4.1.2" - } - }, - "keyv": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz", - "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==", - "requires": { - "json-buffer": "3.0.0" - } - }, - "klona": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz", - "integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==" - }, - "language-subtag-registry": { - "version": "0.3.21", - "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz", - "integrity": "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==", - "dev": true - }, - "language-tags": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz", - "integrity": "sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=", - "dev": true, - "requires": { - "language-subtag-registry": "~0.3.2" - } - }, - "latest-version": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz", - "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==", - "requires": { - "package-json": "^6.3.0" - } - }, - "levn": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", - "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", - "dev": true, - "requires": { - "prelude-ls": "^1.2.1", - "type-check": "~0.4.0" - } - }, - "lines-and-columns": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz", - "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=" - }, - "loader-utils": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz", - "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==", - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^1.0.1" - } - }, - "lodash": { - "version": "4.17.15", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", - "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" - }, - "lodash.merge": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true - }, - "lodash.sortby": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", - "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=" - }, - "loose-envify": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", - "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "requires": { - "js-tokens": "^3.0.0 || ^4.0.0" - } - }, - "lowercase-keys": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", - "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==" - }, - "lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "requires": { - "yallist": "^4.0.0" - } - }, - "make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "requires": { - "semver": "^6.0.0" - } - }, - "make-error": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", - "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==" - }, - "marked": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/marked/-/marked-0.8.2.tgz", - "integrity": "sha512-EGwzEeCcLniFX51DhTpmTom+dSA/MG/OBUDjnWtHbEnjAH180VzUeAw+oE4+Zv+CoYBWyRlYOTR0N8SO9R1PVw==" - }, - "md5.js": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", - "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==", - "requires": { - "hash-base": "^3.0.0", - "inherits": "^2.0.1", - "safe-buffer": "^5.1.2" - } - }, - "merge-stream": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", - "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==" - }, - "merge2": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", - "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==" - }, - "meta-marked": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/meta-marked/-/meta-marked-0.5.0.tgz", - "integrity": "sha512-HjeWE9veMSpu3KQz66jRiZj/eD7FpW36JIPY+hgjSjbom+Gf2c86BCfKJPMTKeSl1eCGvvFte3sePciIsPqh8Q==", - "requires": { - "js-yaml": "~3.14.0", - "marked": "~0.8.2" - }, - "dependencies": { - "argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "requires": { - "sprintf-js": "~1.0.2" - } - }, - "js-yaml": { - "version": "3.14.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", - "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", - "requires": { - "argparse": "^1.0.7", - "esprima": "^4.0.0" - } - } - } - }, - "micromatch": { - "version": "4.0.4", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz", - "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==", - "requires": { - "braces": "^3.0.1", - "picomatch": "^2.2.3" - } - }, - "miller-rabin": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz", - "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==", - "requires": { - "bn.js": "^4.0.0", - "brorand": "^1.0.1" - }, - "dependencies": { - "bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - } - } - }, - "minimalistic-assert": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", - "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==" - }, - "minimalistic-crypto-utils": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz", - "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=" - }, - "minimatch": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "requires": { - "brace-expansion": "^1.1.7" - } - }, - "minimist": { - "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", - "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" - }, - "mkdirp": { - "version": "0.5.5", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz", - "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==", - "requires": { - "minimist": "^1.2.5" - } - }, - "ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" - }, - "nanoid": { - "version": "3.1.30", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz", - "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==" - }, - "natural-compare": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", - "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=", - "dev": true - }, - "next": { - "version": "12.0.7", - "resolved": "https://registry.npmjs.org/next/-/next-12.0.7.tgz", - "integrity": "sha512-sKO8GJJYfuk9c+q+zHSNumvff+wP7ufmOlwT6BuzwiYfFJ61VTTkfTcDLSJ+95ErQJiC54uS4Yg5JEE8H6jXRA==", - "requires": { - "@babel/runtime": "7.15.4", - "@hapi/accept": "5.0.2", - "@napi-rs/triples": "1.0.3", - "@next/env": "12.0.7", - "@next/polyfill-module": "12.0.7", - "@next/react-dev-overlay": "12.0.7", - "@next/react-refresh-utils": "12.0.7", - "@next/swc-android-arm64": "12.0.7", - "@next/swc-darwin-arm64": "12.0.7", - "@next/swc-darwin-x64": "12.0.7", - "@next/swc-linux-arm-gnueabihf": "12.0.7", - "@next/swc-linux-arm64-gnu": "12.0.7", - "@next/swc-linux-arm64-musl": "12.0.7", - "@next/swc-linux-x64-gnu": "12.0.7", - "@next/swc-linux-x64-musl": "12.0.7", - "@next/swc-win32-arm64-msvc": "12.0.7", - "@next/swc-win32-ia32-msvc": "12.0.7", - "@next/swc-win32-x64-msvc": "12.0.7", - "acorn": "8.5.0", - "assert": "2.0.0", - "browserify-zlib": "0.2.0", - "browserslist": "4.16.6", - "buffer": "5.6.0", - "caniuse-lite": "^1.0.30001228", - "chalk": "2.4.2", - "chokidar": "3.5.1", - "constants-browserify": "1.0.0", - "crypto-browserify": "3.12.0", - "cssnano-simple": "3.0.0", - "domain-browser": "4.19.0", - "encoding": "0.1.13", - "etag": "1.8.1", - "events": "3.3.0", - "find-cache-dir": "3.3.1", - "get-orientation": "1.1.2", - "https-browserify": "1.0.0", - "image-size": "1.0.0", - "jest-worker": "27.0.0-next.5", - "node-fetch": "2.6.1", - "node-html-parser": "1.4.9", - "os-browserify": "0.3.0", - "p-limit": "3.1.0", - "path-browserify": "1.0.1", - "postcss": "8.2.15", - "process": "0.11.10", - "querystring-es3": "0.2.1", - "raw-body": "2.4.1", - "react-is": "17.0.2", - "react-refresh": "0.8.3", - "regenerator-runtime": "0.13.4", - "stream-browserify": "3.0.0", - "stream-http": "3.1.1", - "string_decoder": "1.3.0", - "styled-jsx": "5.0.0-beta.3", - "timers-browserify": "2.0.12", - "tty-browserify": "0.0.1", - "use-subscription": "1.5.1", - "util": "0.12.4", - "vm-browserify": "1.1.2", - "watchpack": "2.3.0" - }, - "dependencies": { - "acorn": { - "version": "8.5.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz", - "integrity": "sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==" - }, - "browserslist": { - "version": "4.16.6", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz", - "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==", - "requires": { - "caniuse-lite": "^1.0.30001219", - "colorette": "^1.2.2", - "electron-to-chromium": "^1.3.723", - "escalade": "^3.1.1", - "node-releases": "^1.1.71" - } - }, - "bytes": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", - "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" - }, - "find-cache-dir": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", - "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==", - "requires": { - "commondir": "^1.0.1", - "make-dir": "^3.0.2", - "pkg-dir": "^4.1.0" - } - }, - "http-errors": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz", - "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==", - "requires": { - "depd": "~1.1.2", - "inherits": "2.0.4", - "setprototypeof": "1.1.1", - "statuses": ">= 1.5.0 < 2", - "toidentifier": "1.0.0" - } - }, - "node-releases": { - "version": "1.1.77", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz", - "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ==" - }, - "p-limit": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", - "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", - "requires": { - "yocto-queue": "^0.1.0" - } - }, - "raw-body": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz", - "integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==", - "requires": { - "bytes": "3.1.0", - "http-errors": "1.7.3", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" - } - }, - "react-is": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" - }, - "regenerator-runtime": { - "version": "0.13.4", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.4.tgz", - "integrity": "sha512-plpwicqEzfEyTQohIKktWigcLzmNStMGwbOUbykx51/29Z3JOGYldaaNGK7ngNXV+UcoqvIMmloZ48Sr74sd+g==" - }, - "setprototypeof": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", - "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" - }, - "toidentifier": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", - "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" - } - } - }, - "node-fetch": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", - "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" - }, - "node-html-parser": { - "version": "1.4.9", - "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-1.4.9.tgz", - "integrity": "sha512-UVcirFD1Bn0O+TSmloHeHqZZCxHjvtIeGdVdGMhyZ8/PWlEiZaZ5iJzR189yKZr8p0FXN58BUeC7RHRkf/KYGw==", - "requires": { - "he": "1.2.0" - } - }, - "node-releases": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz", - "integrity": "sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==" - }, - "normalize-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" - }, - "normalize-range": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", - "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=" - }, - "normalize-url": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz", - "integrity": "sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==" - }, - "now": { - "version": "20.1.2", - "resolved": "https://registry.npmjs.org/now/-/now-20.1.2.tgz", - "integrity": "sha512-uzc143R5l7pZBq9HqUmmALndTdwH+btaZlTW843qx9GTaLr+C/bgH7YCic2eBOSTKVBAfBExSaNE+yEYHn70qw==", - "requires": { - "@vercel/build-utils": "2.5.4", - "@vercel/go": "1.1.6", - "@vercel/node": "1.8.4", - "@vercel/python": "1.2.3", - "@vercel/ruby": "1.2.4", - "update-notifier": "4.1.0" - } - }, - "object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" - }, - "object-inspect": { - "version": "1.12.0", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.0.tgz", - "integrity": "sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==" - }, - "object-is": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz", - "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==", - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - } - }, - "object-keys": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", - "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==" - }, - "object.assign": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz", - "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==", - "requires": { - "call-bind": "^1.0.0", - "define-properties": "^1.1.3", - "has-symbols": "^1.0.1", - "object-keys": "^1.1.1" - } - }, - "object.entries": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz", - "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==", - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1" - } - }, - "object.fromentries": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz", - "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==", - "dev": true, - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1" - } - }, - "object.hasown": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.0.tgz", - "integrity": "sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1" - } - }, - "object.values": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz", - "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==", - "dev": true, - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1" - } - }, - "once": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", - "requires": { - "wrappy": "1" - } - }, - "optionator": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz", - "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==", - "dev": true, - "requires": { - "deep-is": "^0.1.3", - "fast-levenshtein": "^2.0.6", - "levn": "^0.4.1", - "prelude-ls": "^1.2.1", - "type-check": "^0.4.0", - "word-wrap": "^1.2.3" - } - }, - "os-browserify": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz", - "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=" - }, - "p-cancelable": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz", - "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==" - }, - "p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "requires": { - "p-try": "^2.0.0" - } - }, - "p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==" - }, - "package-json": { - "version": "6.5.0", - "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz", - "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==", - "requires": { - "got": "^9.6.0", - "registry-auth-token": "^4.0.0", - "registry-url": "^5.0.0", - "semver": "^6.2.0" - } - }, - "pako": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", - "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==" - }, - "parent-module": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", - "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", - "requires": { - "callsites": "^3.0.0" - }, - "dependencies": { - "callsites": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", - "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==" - } - } - }, - "parse-asn1": { - "version": "5.1.6", - "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz", - "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==", - "requires": { - "asn1.js": "^5.2.0", - "browserify-aes": "^1.0.0", - "evp_bytestokey": "^1.0.0", - "pbkdf2": "^3.0.3", - "safe-buffer": "^5.1.1" - } - }, - "parse-json": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz", - "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==", - "requires": { - "@babel/code-frame": "^7.0.0", - "error-ex": "^1.3.1", - "json-parse-even-better-errors": "^2.3.0", - "lines-and-columns": "^1.1.6" - } - }, - "path-browserify": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", - "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==" - }, - "path-exists": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=" - }, - "path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" - }, - "path-key": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", - "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", - "dev": true - }, - "path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" - }, - "path-type": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", - "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==" - }, - "pbkdf2": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz", - "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==", - "requires": { - "create-hash": "^1.1.2", - "create-hmac": "^1.1.4", - "ripemd160": "^2.0.1", - "safe-buffer": "^5.0.1", - "sha.js": "^2.4.8" - } - }, - "picocolors": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" - }, - "picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" - }, - "pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" - }, - "pinkie": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", - "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=" - }, - "pinkie-promise": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", - "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", - "requires": { - "pinkie": "^2.0.0" - } - }, - "pkg-dir": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz", - "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==", - "requires": { - "find-up": "^4.0.0" - }, - "dependencies": { - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - }, - "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "requires": { - "p-locate": "^4.1.0" - } - }, - "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "requires": { - "p-limit": "^2.2.0" - } - }, - "path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==" - } - } - }, - "platform": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz", - "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==" - }, - "postcss": { - "version": "8.2.15", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz", - "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==", - "requires": { - "colorette": "^1.2.2", - "nanoid": "^3.1.23", - "source-map": "^0.6.1" - } - }, - "postcss-easy-import": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-easy-import/-/postcss-easy-import-3.0.0.tgz", - "integrity": "sha512-cfNsear/v8xlkl9v5Wm8y4Do/puiDQTFF+WX2Fo++h7oKt1fKWVVW/5Ca8hslYDQWnjndrg813cA23Pt1jsYdg==", - "requires": { - "globby": "^6.1.0", - "is-glob": "^4.0.0", - "lodash": "^4.17.4", - "object-assign": "^4.0.1", - "pify": "^3.0.0", - "postcss": "^6.0.11", - "postcss-import": "^10.0.0", - "resolve": "^1.1.7" - }, - "dependencies": { - "postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "requires": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - } - } - } - }, - "postcss-import": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-10.0.0.tgz", - "integrity": "sha1-TIXJewmRNsxeoCQNwd/b/eTi674=", - "requires": { - "object-assign": "^4.0.1", - "postcss": "^6.0.1", - "postcss-value-parser": "^3.2.3", - "read-cache": "^1.0.0", - "resolve": "^1.1.7" - }, - "dependencies": { - "postcss": { - "version": "6.0.23", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz", - "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==", - "requires": { - "chalk": "^2.4.1", - "source-map": "^0.6.1", - "supports-color": "^5.4.0" - } - }, - "postcss-value-parser": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", - "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==" - } - } - }, - "postcss-loader": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.2.1.tgz", - "integrity": "sha512-WbbYpmAaKcux/P66bZ40bpWsBucjx/TTgVVzRZ9yUO8yQfVBlameJ0ZGVaPfH64hNSBh63a+ICP5nqOpBA0w+Q==", - "requires": { - "cosmiconfig": "^7.0.0", - "klona": "^2.0.5", - "semver": "^7.3.5" - }, - "dependencies": { - "semver": { - "version": "7.3.5", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", - "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "requires": { - "lru-cache": "^6.0.0" - } - } - } - }, - "postcss-value-parser": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" - }, - "prelude-ls": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", - "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", - "dev": true - }, - "prepend-http": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz", - "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=" - }, - "prettier": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", - "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", - "dev": true - }, - "prettier-linter-helpers": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", - "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", - "dev": true, - "requires": { - "fast-diff": "^1.1.2" - } - }, - "process": { - "version": "0.11.10", - "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", - "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=" - }, - "progress": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", - "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==", - "dev": true - }, - "prop-types": { - "version": "15.8.0", - "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.0.tgz", - "integrity": "sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==", - "requires": { - "loose-envify": "^1.4.0", - "object-assign": "^4.1.1", - "react-is": "^16.13.1" - } - }, - "public-encrypt": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz", - "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==", - "requires": { - "bn.js": "^4.1.0", - "browserify-rsa": "^4.0.0", - "create-hash": "^1.1.0", - "parse-asn1": "^5.0.0", - "randombytes": "^2.0.1", - "safe-buffer": "^5.1.2" - }, - "dependencies": { - "bn.js": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz", - "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==" - } - } - }, - "pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", - "requires": { - "end-of-stream": "^1.1.0", - "once": "^1.3.1" - } - }, - "punycode": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" - }, - "pupa": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz", - "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==", - "requires": { - "escape-goat": "^2.0.0" - } - }, - "querystring-es3": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz", - "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=" - }, - "queue": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", - "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", - "requires": { - "inherits": "~2.0.3" - } - }, - "queue-microtask": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", - "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==" - }, - "randombytes": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", - "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==", - "requires": { - "safe-buffer": "^5.1.0" - } - }, - "randomfill": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz", - "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==", - "requires": { - "randombytes": "^2.0.5", - "safe-buffer": "^5.1.0" - } - }, - "raw-loader": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz", - "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==", - "requires": { - "loader-utils": "^2.0.0", - "schema-utils": "^3.0.0" - }, - "dependencies": { - "ajv-keywords": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" - }, - "json5": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz", - "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==", - "requires": { - "minimist": "^1.2.5" - } - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "schema-utils": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", - "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", - "requires": { - "@types/json-schema": "^7.0.6", - "ajv": "^6.12.5", - "ajv-keywords": "^3.5.2" - } - } - } - }, - "rc": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", - "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", - "requires": { - "deep-extend": "^0.6.0", - "ini": "~1.3.0", - "minimist": "^1.2.0", - "strip-json-comments": "~2.0.1" - }, - "dependencies": { - "strip-json-comments": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" - } - } - }, - "react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - } - }, - "react-hls-player": { - "version": "3.0.7", - "resolved": "https://registry.npmjs.org/react-hls-player/-/react-hls-player-3.0.7.tgz", - "integrity": "sha512-i5QWNyLmaUhV/mgnpljRJT0CBfJnylClV/bne8aiXO3ZqU0+D3U/jtTDwdXM4i5qHhyFy9lemyZ179IgadKd0Q==", - "requires": { - "hls.js": "^0.14.17" - } - }, - "react-icons": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", - "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==" - }, - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, - "react-refresh": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", - "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" - }, - "read-cache": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", - "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=", - "requires": { - "pify": "^2.3.0" - }, - "dependencies": { - "pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" - } - } - }, - "readable-stream": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", - "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", - "requires": { - "inherits": "^2.0.3", - "string_decoder": "^1.1.1", - "util-deprecate": "^1.0.1" - } - }, - "readdirp": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", - "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", - "requires": { - "picomatch": "^2.2.1" - } - }, - "regexp.prototype.flags": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz", - "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==", - "dev": true, - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - } - }, - "regexpp": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz", - "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==" - }, - "registry-auth-token": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.0.tgz", - "integrity": "sha512-P+lWzPrsgfN+UEpDS3U8AQKg/UjZX6mQSJueZj3EK+vNESoqBSpBUD3gmu4sF9lOsjXWjF11dQKUqemf3veq1w==", - "requires": { - "rc": "^1.2.8" - } - }, - "registry-url": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz", - "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==", - "requires": { - "rc": "^1.2.8" - } - }, - "resolve": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz", - "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==", - "requires": { - "path-parse": "^1.0.6" - } - }, - "resolve-from": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", - "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" - }, - "responselike": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz", - "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=", - "requires": { - "lowercase-keys": "^1.0.0" - } - }, - "reusify": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", - "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==" - }, - "rimraf": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", - "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "dev": true, - "requires": { - "glob": "^7.1.3" - } - }, - "ripemd160": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz", - "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==", - "requires": { - "hash-base": "^3.0.0", - "inherits": "^2.0.1" - } - }, - "run-parallel": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", - "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", - "requires": { - "queue-microtask": "^1.2.2" - } - }, - "safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" - }, - "safer-buffer": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" - }, - "sax": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", - "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", - "dev": true - }, - "scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" - }, - "semver-diff": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz", - "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==", - "requires": { - "semver": "^6.3.0" - } - }, - "setimmediate": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", - "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" - }, - "sha.js": { - "version": "2.4.11", - "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz", - "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==", - "requires": { - "inherits": "^2.0.1", - "safe-buffer": "^5.0.1" - } - }, - "shebang-command": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", - "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", - "dev": true, - "requires": { - "shebang-regex": "^3.0.0" - } - }, - "shebang-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", - "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", - "dev": true - }, - "shell-quote": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.3.tgz", - "integrity": "sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==" - }, - "side-channel": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", - "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", - "requires": { - "call-bind": "^1.0.0", - "get-intrinsic": "^1.0.2", - "object-inspect": "^1.9.0" - } - }, - "signal-exit": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", - "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==" - }, - "slash": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", - "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" - }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" - }, - "source-map-resolve": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz", - "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==", - "dev": true, - "requires": { - "atob": "^2.1.2", - "decode-uri-component": "^0.2.0" - } - }, - "source-map-support": { - "version": "0.5.19", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz", - "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==", - "requires": { - "buffer-from": "^1.0.0", - "source-map": "^0.6.0" - } - }, - "speakingurl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz", - "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==" - }, - "sprintf-js": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" - }, - "stacktrace-parser": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz", - "integrity": "sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==", - "requires": { - "type-fest": "^0.7.1" - } - }, - "statuses": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", - "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" - }, - "stream-browserify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz", - "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==", - "requires": { - "inherits": "~2.0.4", - "readable-stream": "^3.5.0" - } - }, - "stream-http": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-3.1.1.tgz", - "integrity": "sha512-S7OqaYu0EkFpgeGFb/NPOoPLxFko7TPqtEeFg5DXPB4v/KETHG0Ln6fRFrNezoelpaDKmycEmmZ81cC9DAwgYg==", - "requires": { - "builtin-status-codes": "^3.0.0", - "inherits": "^2.0.4", - "readable-stream": "^3.6.0", - "xtend": "^4.0.2" - } - }, - "stream-parser": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/stream-parser/-/stream-parser-0.3.1.tgz", - "integrity": "sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=", - "requires": { - "debug": "2" - }, - "dependencies": { - "debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "requires": { - "ms": "2.0.0" - } - } - } - }, - "string_decoder": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", - "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", - "requires": { - "safe-buffer": "~5.2.0" - } - }, - "string-hash": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", - "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=" - }, - "string-width": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz", - "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", - "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==" - }, - "strip-ansi": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", - "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "requires": { - "ansi-regex": "^5.0.0" - } - } - } - }, - "string.prototype.matchall": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz", - "integrity": "sha512-6WgDX8HmQqvEd7J+G6VtAahhsQIssiZ8zl7zKh1VDMFyL3hRTJP4FTNA3RbIp2TOQ9AYNDcc7e3fH0Qbup+DBg==", - "dev": true, - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.1", - "get-intrinsic": "^1.1.1", - "has-symbols": "^1.0.2", - "internal-slot": "^1.0.3", - "regexp.prototype.flags": "^1.3.1", - "side-channel": "^1.0.4" - } - }, - "string.prototype.trimend": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz", - "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==", - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - } - }, - "string.prototype.trimstart": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz", - "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==", - "requires": { - "call-bind": "^1.0.2", - "define-properties": "^1.1.3" - } - }, - "strip-bom": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", - "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=", - "dev": true - }, - "strip-json-comments": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", - "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", - "dev": true - }, - "styled-jsx": { - "version": "5.0.0-beta.3", - "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0-beta.3.tgz", - "integrity": "sha512-HtDDGSFPvmjHIqWf9n8Oo54tAoY/DTplvlyOH2+YOtD80Sp31Ap8ffSmxhgk5EkUoJ7xepdXMGT650mSffWuRA==", - "requires": { - "@babel/plugin-syntax-jsx": "7.14.5", - "@babel/types": "7.15.0", - "convert-source-map": "1.7.0", - "loader-utils": "1.2.3", - "source-map": "0.7.3", - "string-hash": "1.1.3", - "stylis": "3.5.4", - "stylis-rule-sheet": "0.0.10" - }, - "dependencies": { - "emojis-list": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", - "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" - }, - "loader-utils": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz", - "integrity": "sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==", - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^2.0.0", - "json5": "^1.0.1" - } - }, - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==" - } - } - }, - "stylis": { - "version": "3.5.4", - "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", - "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" - }, - "stylis-rule-sheet": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" - }, - "stylus": { - "version": "0.56.0", - "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.56.0.tgz", - "integrity": "sha512-Ev3fOb4bUElwWu4F9P9WjnnaSpc8XB9OFHSFZSKMFL1CE1oM+oFXWEgAqPmmZIyhBihuqIQlFsVTypiiS9RxeA==", - "dev": true, - "requires": { - "css": "^3.0.0", - "debug": "^4.3.2", - "glob": "^7.1.6", - "safer-buffer": "^2.1.2", - "sax": "~1.2.4", - "source-map": "^0.7.3" - }, - "dependencies": { - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true - } - } - }, - "stylus-loader": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-6.2.0.tgz", - "integrity": "sha512-5dsDc7qVQGRoc6pvCL20eYgRUxepZ9FpeK28XhdXaIPP6kXr6nI1zAAKFQgP5OBkOfKaURp4WUpJzspg1f01Gg==", - "dev": true, - "requires": { - "fast-glob": "^3.2.7", - "klona": "^2.0.4", - "normalize-path": "^3.0.0" - } - }, - "supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "requires": { - "has-flag": "^3.0.0" - } - }, - "term-size": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz", - "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==" - }, - "text-table": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", - "dev": true - }, - "timers-browserify": { - "version": "2.0.12", - "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz", - "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==", - "requires": { - "setimmediate": "^1.0.4" - } - }, - "to-readable-stream": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz", - "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==" - }, - "to-regex-range": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", - "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "requires": { - "is-number": "^7.0.0" - } - }, - "tr46": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz", - "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=", - "requires": { - "punycode": "^2.1.0" - } - }, - "ts-node": { - "version": "8.9.1", - "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.9.1.tgz", - "integrity": "sha512-yrq6ODsxEFTLz0R3BX2myf0WBCSQh9A+py8PBo1dCzWIOcvisbyH6akNKqDHMgXePF2kir5mm5JXJTH3OUJYOQ==", - "requires": { - "arg": "^4.1.0", - "diff": "^4.0.1", - "make-error": "^1.1.1", - "source-map-support": "^0.5.17", - "yn": "3.1.1" - } - }, - "tsconfig-paths": { - "version": "3.12.0", - "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz", - "integrity": "sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==", - "dev": true, - "requires": { - "@types/json5": "^0.0.29", - "json5": "^1.0.1", - "minimist": "^1.2.0", - "strip-bom": "^3.0.0" - } - }, - "tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, - "tsutils": { - "version": "3.21.0", - "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz", - "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==", - "requires": { - "tslib": "^1.8.1" - } - }, - "tty-browserify": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.1.tgz", - "integrity": "sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==" - }, - "type-check": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", - "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", - "dev": true, - "requires": { - "prelude-ls": "^1.2.1" - } - }, - "type-fest": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz", - "integrity": "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==" - }, - "typedarray-to-buffer": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz", - "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==", - "requires": { - "is-typedarray": "^1.0.0" - } - }, - "typescript": { - "version": "4.5.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz", - "integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==" - }, - "unbox-primitive": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz", - "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==", - "requires": { - "function-bind": "^1.1.1", - "has-bigints": "^1.0.1", - "has-symbols": "^1.0.2", - "which-boxed-primitive": "^1.0.2" - } - }, - "unique-string": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz", - "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==", - "requires": { - "crypto-random-string": "^2.0.0" - } - }, - "unpipe": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", - "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" - }, - "update-notifier": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-4.1.0.tgz", - "integrity": "sha512-w3doE1qtI0/ZmgeoDoARmI5fjDoT93IfKgEGqm26dGUOh8oNpaSTsGNdYRN/SjOuo10jcJGwkEL3mroKzktkew==", - "requires": { - "boxen": "^4.2.0", - "chalk": "^3.0.0", - "configstore": "^5.0.1", - "has-yarn": "^2.1.0", - "import-lazy": "^2.1.0", - "is-ci": "^2.0.0", - "is-installed-globally": "^0.3.1", - "is-npm": "^4.0.0", - "is-yarn-global": "^0.3.0", - "latest-version": "^5.0.0", - "pupa": "^2.0.1", - "semver-diff": "^3.1.1", - "xdg-basedir": "^4.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, - "uri-js": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", - "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==", - "requires": { - "punycode": "^2.1.0" - } - }, - "url-parse-lax": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", - "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=", - "requires": { - "prepend-http": "^2.0.0" - } - }, - "url-toolkit": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz", - "integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ==" - }, - "use-subscription": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.5.1.tgz", - "integrity": "sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==", - "requires": { - "object-assign": "^4.1.1" - } - }, - "util": { - "version": "0.12.4", - "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz", - "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==", - "requires": { - "inherits": "^2.0.3", - "is-arguments": "^1.0.4", - "is-generator-function": "^1.0.7", - "is-typed-array": "^1.1.3", - "safe-buffer": "^5.1.2", - "which-typed-array": "^1.1.2" - } - }, - "util-deprecate": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" - }, - "v8-compile-cache": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz", - "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==", - "dev": true - }, - "vary": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", - "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" - }, - "vm-browserify": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", - "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" - }, - "watchpack": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.0.tgz", - "integrity": "sha512-MnN0Q1OsvB/GGHETrFeZPQaOelWh/7O+EiFlj8sM9GPjtQkis7k01aAxrg/18kTfoIVcLL+haEVFlXDaSRwKRw==", - "requires": { - "glob-to-regexp": "^0.4.1", - "graceful-fs": "^4.1.2" - } - }, - "webidl-conversions": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz", - "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==" - }, - "whatwg-url": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz", - "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==", - "requires": { - "lodash.sortby": "^4.7.0", - "tr46": "^1.0.1", - "webidl-conversions": "^4.0.2" - } - }, - "which": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", - "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", - "dev": true, - "requires": { - "isexe": "^2.0.0" - } - }, - "which-boxed-primitive": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz", - "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==", - "requires": { - "is-bigint": "^1.0.1", - "is-boolean-object": "^1.1.0", - "is-number-object": "^1.0.4", - "is-string": "^1.0.5", - "is-symbol": "^1.0.3" - } - }, - "which-typed-array": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.7.tgz", - "integrity": "sha512-vjxaB4nfDqwKI0ws7wZpxIlde1XrLX5uB0ZjpfshgmapJMD7jJWhZI+yToJTqaFByF0eNBcYxbjmCzoRP7CfEw==", - "requires": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", - "es-abstract": "^1.18.5", - "foreach": "^2.0.5", - "has-tostringtag": "^1.0.0", - "is-typed-array": "^1.1.7" - } - }, - "widest-line": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz", - "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==", - "requires": { - "string-width": "^4.0.0" - } - }, - "word-wrap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", - "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", - "dev": true - }, - "wrappy": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" - }, - "write-file-atomic": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz", - "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==", - "requires": { - "imurmurhash": "^0.1.4", - "is-typedarray": "^1.0.0", - "signal-exit": "^3.0.2", - "typedarray-to-buffer": "^3.1.5" - } - }, - "xdg-basedir": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz", - "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==" - }, - "xtend": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", - "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==" - }, - "yallist": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" - }, - "yaml": { - "version": "1.10.0", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz", - "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==" - }, - "yn": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", - "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==" - }, - "yocto-queue": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", - "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==" - } - } -} diff --git a/package.json b/package.json old mode 100755 new mode 100644 index a99dc0090..921a0a60a --- a/package.json +++ b/package.json @@ -1,65 +1,103 @@ { - "name": "syntax", - "description": "Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.", - "engines": { - "node": ">=18.0.0" - }, - "scripts": { - "dev": "next dev --port 6969", - "build": "next build", - "start": "next start", - "deploy": "now", - "alias": "now alias", - "lint": "eslint .", - "lint:fix": "eslint . --fix" - }, - "now": { - "alias": [ - "syntax", - "syntax.fm" - ] - }, - "dependencies": { - "@babel/eslint-parser": "^7.16.5", - "@babel/preset-react": "^7.16.7", - "@types/node": "^16.11.19", - "@typescript-eslint/eslint-plugin": "^5.9.1", - "@typescript-eslint/parser": "^5.9.1", - "autoprefixer": "10.4.1", - "babel-loader": "^7.1.5", - "cors": "^2.8.5", - "date-fns": "^2.28.0", - "emit-file-loader": "^0.0.2", - "eslint-config-airbnb-typescript": "^16.1.0", - "glob": "7.2.0", - "meta-marked": "^0.5.0", - "next": "^12.0.7", - "now": "^20.1.2", - "postcss-easy-import": "3.0.0", - "postcss-loader": "6.2.1", - "prop-types": "^15.8.0", - "raw-loader": "^4.0.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-hls-player": "^3.0.7", - "react-icons": "^4.3.1", - "speakingurl": "^14.0.1", - "typescript": "^4.5.4" - }, - "devDependencies": { - "@babel/core": "^7.16.7", - "eslint": "^8.6.0", - "eslint-config-airbnb": "^19.0.4", - "eslint-config-prettier": "^8.3.0", - "eslint-config-wesbos": "^3.0.2", - "eslint-plugin-html": "^6.2.0", - "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.28.0", - "eslint-plugin-react-hooks": "^4.3.0", - "prettier": "^2.5.1", - "stylus": "^0.56.0", - "stylus-loader": "^6.2.0" - } + "name": "syntax", + "version": "2.0.0", + "private": true, + "scripts": { + "dev": "vite dev", + "start": "pnpm dev", + "copy-files": "zx ./why_do_i_need_this.mjs", + "build": "run-s i-changed-the-schema build:svelte copy-files", + "build:svelte": "vite build", + "preview": "vite preview", + "test": "svelte-kit sync && playwright test", + "test:ui": "svelte-kit sync && playwright test --ui", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "test:unit": "svelte-kit sync && vitest", + "lint": "prettier --plugin-search-dir . --check . && eslint .", + "format": "prettier --plugin-search-dir . --write .", + "site:update": "pnpm update -i -L", + "db:studio": "prisma studio", + "db:push": "prisma db push", + "db:generate": "prisma generate", + "db:seed": "prisma db seed", + "i-changed-the-schema": "pnpm run db:push && pnpm run db:generate" + }, + "devDependencies": { + "@playwright/test": "^1.38.1", + "@resvg/resvg-js": "^2.4.1", + "@sveltejs/adapter-auto": "^2.1.0", + "@sveltejs/kit": "^1.25.2", + "@types/core-js": "^2.5.6", + "@types/js-cookie": "^3.0.4", + "@types/node": "^20.8.4", + "@types/speakingurl": "^13.0.5", + "@typescript-eslint/eslint-plugin": "^6.7.5", + "@typescript-eslint/parser": "^6.7.5", + "eslint": "^8.51.0", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-svelte": "^2.34.0", + "postcss": "^8.4.31", + "postcss-custom-media": "^10.0.2", + "postcss-import": "^15.1.0", + "postcss-import-ext-glob": "^2.1.1", + "postcss-load-config": "^4.0.1", + "postcss-preset-env": "^9.2.0", + "prettier": "^3.0.3", + "prettier-plugin-svelte": "^3.0.3", + "prisma": "^5.4.2", + "satori": "^0.10.9", + "satori-html": "^0.3.2", + "svelte": "^4.2.1", + "svelte-check": "^3.5.2", + "svelte-preprocess": "^5.0.4", + "tslib": "^2.6.2", + "typescript": "^5.2.2", + "vite": "^4.4.11", + "vitest": "^0.34.6" + }, + "type": "module", + "engines": { + "node": ">=18.0.0 <19.0.0 || >=20.0.0 <21.0.0", + "pnpm": ">=8" + }, + "dependencies": { + "@anthropic-ai/sdk": "^0.6.2", + "@deepgram/sdk": "^2.4.0", + "@ffmpeg.wasm/core-mt": "0.13.2", + "@ffmpeg.wasm/main": "^0.13.1", + "@heyputer/kv.js": "^0.1.5", + "@leveluptuts/svelte-side-menu": "^1.0.5", + "@prisma/client": "^5.4.2", + "@sentry/sveltekit": "^7.73.0", + "@sparticuz/chromium": "^117.0.0", + "core-js": "^3.33.0", + "date-fns": "^2.30.0", + "flexsearch": "^0.7.31", + "gpt-3-encoder": "^1.1.4", + "gray-matter": "^4.0.3", + "js-cookie": "^3.0.5", + "media-chrome": "^1.4.3", + "npm-run-all": "^4.1.5", + "openai": "^3.3.0", + "puppeteer-core": "^21.3.8", + "rehype-highlight": "^7.0.0", + "rehype-raw": "^7.0.0", + "rehype-stringify": "^10.0.0", + "remark-gfm": "^4.0.0", + "remark-parse": "^11.0.0", + "remark-rehype": "^11.0.0", + "sk-form-data": "^1.0.1", + "speakingurl": "^14.0.1", + "svelte-french-toast": "1.2.0", + "svelte-local-storage-store": "^0.6.4", + "sveltekit-search-params": "^1.0.15", + "ts-node": "^10.9.1", + "unified": "^11.0.3", + "waait": "^1.0.5", + "zx": "^7.2.3" + }, + "prisma": { + "seed": "node --loader ts-node/esm prisma/seed.ts" + } } diff --git a/pages/200.js b/pages/200.js deleted file mode 100644 index a2710cdad..000000000 --- a/pages/200.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import Meta from '../components/meta'; -import Page from '../components/Page'; - -export default class TwoHundy extends React.Component { - render() { - return ( - - -
-

Episode 200!

-

- Ask us anything in the form below and tune in around 11:30ET for a - live stream! -

- -

- Huge thanks to{' '} - - Pigeon Hole - {' '} - for supplying the software for this Q+A. 👇🏻 -

- +
+ diff --git a/src/routes/(site)/rss/+server.ts b/src/routes/(site)/rss/+server.ts new file mode 100644 index 000000000..018084fe4 --- /dev/null +++ b/src/routes/(site)/rss/+server.ts @@ -0,0 +1,38 @@ +import { PUBLIC_URL } from '$env/static/public'; +import { replace_special_chars } from '$utilities/replace_special_chars'; +import type { Show } from '@prisma/client'; +import type { RequestHandler } from './$types'; + +export const GET: RequestHandler = async function ({ setHeaders, locals }) { + const shows = await locals.prisma.show.findMany({ orderBy: { number: 'desc' } }); + const feed_text = ` + + + Syntax - Tasty Web Development Treats + https://${PUBLIC_URL}/shows + Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.> + en + ${shows + .map( + (show: Show) => ` + + ${replace_special_chars(show.title)} + + https://${PUBLIC_URL}/shows/${show.number}/${show.slug} + + + ${show.number} + ${show.date} + ` + ) + .join('')} + +`; + + setHeaders({ + 'Cache-Control': 'max-age=0, s-maxage=3600', + 'Content-Type': 'application/xml' + }); + + return new Response(feed_text); +}; diff --git a/src/routes/(site)/search/+page.svelte b/src/routes/(site)/search/+page.svelte new file mode 100644 index 000000000..6d750606f --- /dev/null +++ b/src/routes/(site)/search/+page.svelte @@ -0,0 +1,10 @@ + + +{#if browser} + + +{/if} diff --git a/src/routes/(site)/sentry-example/+page.svelte b/src/routes/(site)/sentry-example/+page.svelte new file mode 100644 index 000000000..eebfbc7a8 --- /dev/null +++ b/src/routes/(site)/sentry-example/+page.svelte @@ -0,0 +1,100 @@ + + + + +
+ + Sentry Onboarding + + + +
+

+ + + +

+

+ Get Started with this simple Example: +

+ +

1. Send us a sample error:

+ + +

+ 2. Look for the error on the + Issues Page. +

+

+ For more information, take a look at the + + Sentry SvelteKit Documentation + +

+
+
+ + diff --git a/src/routes/(site)/sentry-example/+server.js b/src/routes/(site)/sentry-example/+server.js new file mode 100644 index 000000000..beec95933 --- /dev/null +++ b/src/routes/(site)/sentry-example/+server.js @@ -0,0 +1,6 @@ +// This is just a very simple API route that throws an example error. +// Feel free to delete this file and the entire sentry route. + +export const GET = async () => { + throw new Error("Sentry Example API Route Error"); +}; diff --git a/src/routes/(site)/show/[...all]/+page.server.ts b/src/routes/(site)/show/[...all]/+page.server.ts new file mode 100644 index 000000000..a469c7b3e --- /dev/null +++ b/src/routes/(site)/show/[...all]/+page.server.ts @@ -0,0 +1,7 @@ +import { redirect } from '@sveltejs/kit'; +import type { PageServerLoad } from '../../shows/$types'; + +export const load: PageServerLoad = async function () { + // They visited /show, redirect to /shows + throw redirect(302, `/shows`); +}; diff --git a/src/routes/(site)/show/[show_number]/[slug]/[[tab]]/+page.server.ts b/src/routes/(site)/show/[show_number]/[slug]/[[tab]]/+page.server.ts new file mode 100644 index 000000000..f98e75519 --- /dev/null +++ b/src/routes/(site)/show/[show_number]/[slug]/[[tab]]/+page.server.ts @@ -0,0 +1,86 @@ +import remarkGfm from 'remark-gfm'; +import { unified } from 'unified'; +import remarkParse from 'remark-parse'; +import remarkRehype from 'remark-rehype'; +import rehypeRaw from 'rehype-raw'; +import rehypeStringify from 'rehype-stringify'; +import highlight from 'rehype-highlight'; +import { cache } from '$lib/cache/cache'; +import { transcript_with_utterances } from '$server/ai/queries.js'; +import type { Prisma, Show } from '@prisma/client'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = async function ({ setHeaders, params, locals, url }) { + const { show_number } = params; + const query = { + where: { number: parseInt(show_number) }, + include: { + guests: { + select: { + Guest: true + } + }, + transcript: transcript_with_utterances, + aiShowNote: { + include: { + topics: true, + links: true, + summary: true, + tweets: true + } + } + } + }; + type ShowTemp = Prisma.ShowGetPayload; + let show_raw: (ShowTemp & Show) | null = null; + const cache_key = `show:${show_number}`; + + //Check cache first + const show_cached = await cache.get(cache_key); + + if (show_cached && process.env.NODE_ENV === 'production') { + show_raw = show_cached; + } else { + show_raw = await locals.prisma.show.findFirst(query); + //Set cache after DB query + if (show_raw) { + cache.set(cache_key, show_raw); + } + } + + const body_excerpt = await unified() + .use(remarkParse) + .use(remarkGfm) + .use(remarkRehype, { allowDangerousHtml: true }) + .use(rehypeRaw) + .use(highlight) + .use(rehypeStringify) + .process(show_raw?.show_notes || ''); + + // Regular expression pattern and replacement + const pattern = /(

)(?!Show Notes<\/h2>)(.*?)(<\/h2>)/g; + const replacement = '

$2

'; + + const body_string = body_excerpt.toString(); + // the md has h2s in it, it's not reasonable to change all of the md, + // so I'm making them be h3s instead + // maybe that's a todo for another day + const with_h3_body = body_string.replace(pattern, replacement); + + setHeaders({ + 'cache-control': 'max-age=240' + }); + + return { + show: { + ...show_raw, + show_notes: with_h3_body + } as ShowTemp & Show, + meta: { + title: show_raw?.title, + image: `https://${url.host}/og.png?show=${show_number}`, + description: + show_raw?.aiShowNote?.description ?? show_raw?.show_notes?.match(/(.*?)(?=## )/s)?.[0] + } + }; +}; diff --git a/src/routes/(site)/show/[show_number]/[slug]/[[tab]]/+page.svelte b/src/routes/(site)/show/[show_number]/[slug]/[[tab]]/+page.svelte new file mode 100644 index 000000000..e8dbebacc --- /dev/null +++ b/src/routes/(site)/show/[show_number]/[slug]/[[tab]]/+page.svelte @@ -0,0 +1,241 @@ + + + + +
+ {show.number} +

+ {format(new Date(show.date), 'MMMM do, yyyy')} + × + + {#each show.aiShowNote?.topics?.slice(0, 5) || [] as topic} + {topic.name.startsWith('#') ? '' : '#'}{topic.name} + {/each} + +

+ +

+ {show.title} +

+ {#if show.aiShowNote?.description} +

{show.aiShowNote?.description}

+ {/if} +
+ +
+ +
+ +
+
+
+ + or + +
+ +
+
+
+ + + Show Notes + Transcript + + + + + + + +
+ {#if $page.params.tab === 'transcript'} + {#if show?.transcript} + + {:else} +

Transcript not available yet! We have the AI robots on the job, check back soon!

+ {/if} + {:else} +
+
+ {@html show.show_notes} +
+
+ +
+
+ +
+
+ {/if} +
+ + diff --git a/src/routes/(site)/shows/+page.server.ts b/src/routes/(site)/shows/+page.server.ts new file mode 100644 index 000000000..b3b989a73 --- /dev/null +++ b/src/routes/(site)/shows/+page.server.ts @@ -0,0 +1,78 @@ +import { PER_PAGE } from '$const'; +// import { cache } from '$lib/cache/cache'; +import { SHOW_QUERY } from '$server/ai/queries'; +import { $Enums } from '@prisma/client'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = async function ({ locals, url, setHeaders }) { + setHeaders({ + 'cache-control': 'max-age=240' + }); + + const order_val = url.searchParams.get('order'); + const take = parseInt(url.searchParams.get('perPage') || PER_PAGE.toString()); + const order = order_val === 'desc' || !order_val ? 'desc' : 'asc'; // Ensure order can only be 'asc' or 'desc' + const show_type = url.searchParams.get('type')?.toUpperCase(); + const page = parseInt(url.searchParams.get('page') || '1'); + // const limit = url.searchParams.get('limit') || 100; + + function isShowType(type: string | null | undefined): type is $Enums.ShowType { + if (!type) return false; + return $Enums.ShowType.hasOwnProperty(type); + } + + const query = SHOW_QUERY({ + take, + order, + skip: page ? page * take - take : 0, + show_type: isShowType(show_type) ? show_type : undefined + }); + return { + shows: locals.prisma.show.findMany(query), + // Todo: This needs to include where clause when we get hasty/tasty/supper/special filtering + // https://github.com/prisma/prisma/discussions/3087#discussioncomment-6857217 + count: locals.prisma.show.count() + }; + + // let whereClause = ''; + // const params = []; + + // if (filter) { + // switch (filter) { + // case 'hasty': + // whereClause += 'DAYOFWEEK(date) = ?'; + // params.push(2); // Monday + // break; + // case 'tasty': + // whereClause += 'DAYOFWEEK(date) = ?'; + // params.push(4); // Wednesday + // break; + // case 'supper': + // whereClause += 'DAYOFWEEK(date) = ?'; + // params.push(6); // Friday + // break; + // case 'special': + // whereClause += 'DAYOFWEEK(date) NOT IN (?, ?, ?)'; + // params.push(2, 4, 6); // Not Monday, Wednesday, or Friday + // break; + // } + // } + + // const cache_key = `shows:${epoch_day}:${filter}:${order}:${limit}`; + + // let sqlQuery = 'SELECT id, number, title, date, slug, url FROM `Show`'; + // if (whereClause !== '') { + // sqlQuery += ` WHERE ${whereClause}`; + // } + // sqlQuery += ` ORDER BY number ${order} LIMIT ${limit}`; + // let shows = await cache.get(cache_key); + + // if (!shows) { + // shows = await locals.prisma.$queryRawUnsafe(sqlQuery, ...params); + // cache.set(cache_key, shows); + // } + + // return { + // shows + // }; +}; diff --git a/src/routes/(site)/shows/+page.svelte b/src/routes/(site)/shows/+page.svelte new file mode 100644 index 000000000..f52253456 --- /dev/null +++ b/src/routes/(site)/shows/+page.svelte @@ -0,0 +1,106 @@ + + +
+
+

All Episodes

+
+ { + $store.type = e.detail; + }} + button_text="Type" + button_icon="filter" + value={$store.type || ''} + options={[ + { value: '', label: 'All' }, + { value: 'hasty', label: 'Hasty' }, + { value: 'tasty', label: 'Tasty' }, + { value: 'supper', label: 'Supper Club' }, + { value: 'special', label: 'Special' } + ]} + /> + { + $store.perPage = e.detail; + }} + value_as_label + button_text="Per Page" + value={$store.perPage?.toString() || '10'} + options={[ + { value: '10', label: '10' }, + { value: '20', label: '20' }, + { value: '40', label: '40' } + ]} + /> + { + $store.order = e.detail; + }} + value={$store.order || 'desc'} + button_text="Sort" + button_icon="sort" + options={[ + { value: 'desc', label: 'Newest To Oldest' }, + { value: 'asc', label: 'Oldest To Newest' } + ]} + /> +
+
+ + + +
+ {#each shows as show (show.id)} + + + {/each} +
+ + +
+ + diff --git a/src/routes/(site)/style.css b/src/routes/(site)/style.css new file mode 100644 index 000000000..7f564fb63 --- /dev/null +++ b/src/routes/(site)/style.css @@ -0,0 +1,46 @@ +/* +░██████╗██╗░░░██╗███╗░░██╗ +██╔════╝╚██╗░██╔╝████╗░██║ +╚█████╗░░╚████╔╝░██╔██╗██║ +░╚═══██╗░░╚██╔╝░░██║╚████║ +██████╔╝░░░██║░░░██║░╚███║ +╚═════╝░░░░╚═╝░░░╚═╝░░╚══╝ + +████████╗░█████╗░██╗░░██╗ +╚══██╔══╝██╔══██╗╚██╗██╔╝ +░░░██║░░░███████║░╚███╔╝░ +░░░██║░░░██╔══██║░██╔██╗░ +░░░██║░░░██║░░██║██╔╝╚██╗ +░░░╚═╝░░░╚═╝░░╚═╝╚═╝░░╚═╝ */ + +/* The main css entry. Primarily used to import stuff */ + +@layer reset base utilities layout theme; + +/* Import all css themes */ +@import '../../styles/base.css'; +@import '../../styles/variables.css'; +@import '../../styles/utilities.css'; +@import '../../styles/layout.css'; +@import '../../styles/forms.css'; +@import '../../styles/buttons.css'; + +/* FYI you have to use import-glob for all of these or else it gets mad */ + +/* Global Utilities */ +.center { + text-align: center; +} + +html::view-transition-old() { + animation-name: -ua-view-transition-fade-out; +} + +html::view-transition-new() { + animation-name: -ua-view-transition-fade-in; +} + +::view-transition-old(root), +::view-transition-new(root) { + animation-duration: 0.2s; +} diff --git a/src/routes/(site)/suggest/+page.svelte b/src/routes/(site)/suggest/+page.svelte new file mode 100644 index 000000000..a948d901e --- /dev/null +++ b/src/routes/(site)/suggest/+page.svelte @@ -0,0 +1 @@ + diff --git a/src/routes/(site)/svg/grit.svg/+server.ts b/src/routes/(site)/svg/grit.svg/+server.ts new file mode 100644 index 000000000..d70c133d6 --- /dev/null +++ b/src/routes/(site)/svg/grit.svg/+server.ts @@ -0,0 +1,57 @@ +let isDark = false; +let w = 1000; +let h = 1000; +let count = 100; + +function rando(under: number, lower?: number) { + const minimum = lower ?? 0; + return Math.random() * (under - minimum) + minimum; +} + +const grits = [ + 'M1,2 C1.6,2 2,1.6 2,1 C2,0.4 1.6,0 1,0 C0.4,0 0,0.4 0,1 C0,1.6 0.4,2 1,2 Z', + 'M2.857,4 C4.381,4 6.286,3 6.857,2 L8,0 L5.143,0 C3.619,0 1.714,0.8 1.143,2 L0,4 L2.857,4 Z', + 'M3.238,4 C3.619,4 4,3 4,2 L4,0 L1.905,0 L0,0 L1.143,2 C1.714,3 2.667,4 3.238,4 Z', + 'M2.391,3.48892289 C3.913,2.62492289 5,1.54592289 5,0.89792289 C5,-0.82807711 3.043,0.03492289 1.522,2.62492289 L0,4.99992289 L2.391,3.48892289 Z', + 'M0,5 L1.615,3.846 L3,2.5 L1.615,1.154 L0,0 L0,2.5 Z', + 'M2.5,3 L3.846,1.615 L5,0 L2.5,0 L0,0 L1.154,1.615 Z', + 'M4,6 L2.8,3.077 C1.4,-0.429 0,-1.014 0,1.713 C0,2.882 0.8,4.246 2,4.831 L4,6 Z', + 'M3,9 L5,7.085 L7,5.17 L6,2.489 L5,0 L4.8,3.447 L4.6,6.894 L2.2,5.553 L0,4.213 L1.6,6.511 Z', + 'M3.238,4 C3.619,4 4,3 4,2 L4,0 L1.905,0 L0,0 L1.143,2 C1.714,3 2.667,4 3.238,4 Z', + 'M10,5.949 L10,3.077 L10,0 L8.2,0 C7.4,0 6.6,1.026 6.6,2.256 L6.6,4.513 L3.4,3.282 L0,2.051 L2.4,4.923 L4.8,8 L7.4,6.974 L10,5.949 Z' +]; + +function render() { + return ` + + + ${Array.from({ length: count }) + .map(() => { + const x = rando(w); + const y = rando(h); + return ``; + }) + .join('')} + + + `; +} + +export function GET({ request, url }) { + isDark = !!url.searchParams.has('dark'); + w = parseInt(url.searchParams.get('w') || '1000'); + h = parseInt(url.searchParams.get('h') || '1000'); + count = parseInt(url.searchParams.get('count') || '100'); + + const svg = render(); + return new Response(svg, { + headers: { + 'content-type': 'image/svg+xml', + 'cache-control': 'private, max-age=3600' + } + }); +} diff --git a/src/routes/(site)/svg/grit.svg/Path.svg b/src/routes/(site)/svg/grit.svg/Path.svg new file mode 100644 index 000000000..5a7abd710 --- /dev/null +++ b/src/routes/(site)/svg/grit.svg/Path.svg @@ -0,0 +1,5 @@ + + + Path + + \ No newline at end of file diff --git a/src/routes/(site)/svg/wave.svg/+server.ts b/src/routes/(site)/svg/wave.svg/+server.ts new file mode 100644 index 000000000..91692cac5 --- /dev/null +++ b/src/routes/(site)/svg/wave.svg/+server.ts @@ -0,0 +1,20 @@ +// TODO +// This is on hold until I figure out a way to correctly calculate css values from variables. +import wave from './waves.svg?raw'; + +export function GET({ request, url }) { + const fill = decodeURIComponent(url.searchParams.get('f')) || '#fff'; + console.log('fill', fill); + const stroke = url.searchParams.get('s') || '#000'; + const replaced_fill_svg = wave.replaceAll('#fill', fill); + // h = parseInt(url.searchParams.get('h') || '1000'); + // count = parseInt(url.searchParams.get('count') || '100'); + + // const svg = render(); + return new Response(replaced_fill_svg, { + headers: { + 'content-type': 'image/svg+xml', + 'cache-control': 'private, max-age=3600' + } + }); +} diff --git a/src/routes/(site)/svg/wave.svg/waves.svg b/src/routes/(site)/svg/wave.svg/waves.svg new file mode 100644 index 000000000..82fd3ea6f --- /dev/null +++ b/src/routes/(site)/svg/wave.svg/waves.svg @@ -0,0 +1,9 @@ + + + waves + + + + + + diff --git a/src/routes/(site)/system/+layout.svelte b/src/routes/(site)/system/+layout.svelte new file mode 100644 index 000000000..d8734813b --- /dev/null +++ b/src/routes/(site)/system/+layout.svelte @@ -0,0 +1,21 @@ + + + + diff --git a/src/routes/(site)/system/colors/+page.svelte b/src/routes/(site)/system/colors/+page.svelte new file mode 100644 index 000000000..cea9fb5e9 --- /dev/null +++ b/src/routes/(site)/system/colors/+page.svelte @@ -0,0 +1,104 @@ + + + + +
+ {#each COLORS as color} +
+
{ + if (e.key === 'Enter' || e.keyCode === 13) { + copy_color(color); + } + }} + class="primary box" + on:click={() => copy_color(color)} + style={`--fg_demo_box_color: var(--${color})`} + > + {color} +
+ {#each Array(10) as item, index} +
{ + if (e.key === 'Enter' || e.keyCode === 13) { + copy_color(color); + } + }} + on:click={() => copy_color(`${color}-${index + 1}`)} + class={`box`} + style={`--fg_demo_color: var(--${color}-${pick_color( + index + )}); --fg_demo_box_color: var(--${color}-${index + 1});`} + > + {color}-{index + 1} +
+ {/each} +
+ {/each} + + +
+ + diff --git a/src/routes/(site)/system/colors/colors-in-js.svelte b/src/routes/(site)/system/colors/colors-in-js.svelte new file mode 100644 index 000000000..c81dcf8f5 --- /dev/null +++ b/src/routes/(site)/system/colors/colors-in-js.svelte @@ -0,0 +1,25 @@ + + +
+

Computed CSS Variables

+ {#each colors as [val, key]} +

{val} {key}

+ {/each} +
+ + diff --git a/src/routes/(site)/system/components/+page.svelte b/src/routes/(site)/system/components/+page.svelte new file mode 100644 index 000000000..68938b86f --- /dev/null +++ b/src/routes/(site)/system/components/+page.svelte @@ -0,0 +1,9 @@ + + + diff --git a/src/routes/(site)/system/layout/+page.svelte b/src/routes/(site)/system/layout/+page.svelte new file mode 100644 index 000000000..147230f67 --- /dev/null +++ b/src/routes/(site)/system/layout/+page.svelte @@ -0,0 +1,35 @@ +
+

.layout

+
Left Margin
+
Main
+
Sidebar
+
Right Margin
+
Left Margin
+
Content
+
Right Margin
+
Full
+
+ +
+

.grid

+
+
+
+
+
+
+
+
+
+ + diff --git a/src/routes/(site)/system/theme/+page.server.ts b/src/routes/(site)/system/theme/+page.server.ts new file mode 100644 index 000000000..07493af84 --- /dev/null +++ b/src/routes/(site)/system/theme/+page.server.ts @@ -0,0 +1,10 @@ +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = async ({ locals, setHeaders }) => { + setHeaders({ + 'cache-control': 'max-age=240' + }); + return { + show: locals.prisma.show.findFirst({ orderBy: { number: 'desc' } }) + }; +}; diff --git a/src/routes/(site)/system/theme/+page.svelte b/src/routes/(site)/system/theme/+page.svelte new file mode 100644 index 000000000..04863fd15 --- /dev/null +++ b/src/routes/(site)/system/theme/+page.svelte @@ -0,0 +1,55 @@ + + +
+

Normal Zone

+

+ By default zones don't have any padding, but they do enable easy setting of local --bg and --fg + variables. +

+
+
+

Inverse Zone

+

+ By default zones don't have any padding, but they do enable easy setting of local --bg and --fg + variables. +

+
+
+

Always Dark Zone

+

+ By default zones don't have any padding, but they do enable easy setting of local --bg and --fg + variables. +

+
+ +
+

Zone With Accent

+

+ A zone with accents is just a zone with custom style, --bg, --radius, --border values. This + utilizes the --bg-1 variable to control accents in themes. +

+
+ +{#if show} +

Grid With Cards

+
+ + +
+{/if} diff --git a/src/routes/(site)/system/typography/+page.svelte b/src/routes/(site)/system/typography/+page.svelte new file mode 100644 index 000000000..2d89dfca2 --- /dev/null +++ b/src/routes/(site)/system/typography/+page.svelte @@ -0,0 +1,52 @@ +
+

Typography

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+

Syntax.fm

+

Web Development Insights

+

+ Introduction to Web Development: Web development is the process of creating websites and web + applications. It involves various disciplines such as HTML, CSS, and JavaScript. A web + developer's role is to design, code, and maintain websites, ensuring they are functional, + user-friendly, and visually appealing. With the ever-growing importance of digital presence, web + development skills have become highly sought after in today's technology-driven world. +

+ +

Hosted by Wes Bos and Scott Tolinski

+

+ The Power of Artificial Intelligence: Artificial Intelligence (AI) is revolutionizing numerous + industries. AI enables machines to learn from data, recognize patterns, and make intelligent + decisions. It has applications in fields like healthcare, finance, transportation, and more. As + AI continues to advance, its potential to solve complex problems and automate tasks is expanding + rapidly, leading to exciting advancements in areas like robotics, natural language processing, + and computer vision. +

+ +

Stay Updated with the Latest Trends

+
Informative and Engaging Discussions
+

+ Exploring Sustainable Energy Sources: The transition to sustainable energy sources is vital for + mitigating climate change and reducing dependence on fossil fuels. Renewable energy sources such + as solar, wind, hydro, and geothermal power offer cleaner alternatives to traditional energy + generation methods. Governments, businesses, and individuals around the world are increasingly + investing in renewable energy infrastructure and adopting sustainable practices to create a + greener and more sustainable future. +

+ +

+ Syntax.fm is a popular podcast hosted by Wes Bos and Scott Tolinski, two experienced web + developers and educators. The podcast focuses on web development topics and provides valuable + insights, tips, and discussions relevant to both beginner and advanced developers. + Each episode covers various programming languages, frameworks, tools, and best practices for building + modern websites and web applications. With a friendly and casual tone, Wes and Scott deliver their + expertise in an approachable manner, making complex topics easy to understand. Syntax.fm is known + for its informative content, practical advice, and engaging discussions, making it a go-to resource + for developers seeking to enhance their skills and stay up-to-date with the latest trends in web + development. +

+

Small Paragraph

+
diff --git a/src/routes/api/oauth/github/+server.ts b/src/routes/api/oauth/github/+server.ts new file mode 100644 index 000000000..7f7422e22 --- /dev/null +++ b/src/routes/api/oauth/github/+server.ts @@ -0,0 +1,35 @@ +import { randomUUID } from 'crypto'; +import { GITHUB_AUTH_URL } from '$const'; +import { PUBLIC_GITHUB_ID } from '$env/static/public'; +import type { RequestHandler } from '@sveltejs/kit'; + +export const GET: RequestHandler = async function ({ locals, cookies }) { + const access_token = cookies.get('access_token'); + + if (!access_token) { + // Create session token + const session_token = randomUUID(); + + try { + // Create a session with the session token to verify the user later + await locals.prisma.session.create({ + data: { + session_token, + ip: locals.session.ip, + country: locals.session.country + } + }); + } catch (error) { + console.error('ERROR', error); + return new Response('Auth Failed', { status: 401 }); + } + // Redirect request to GitHub authentication endpoint with CLIENT_ID + return new Response('Redirecting to GitHub', { + status: 302, + headers: { + location: `${GITHUB_AUTH_URL}?client_id=${PUBLIC_GITHUB_ID}&state=${session_token}` + } + }); + } + return new Response('Already logged in', { status: 200 }); +}; diff --git a/src/routes/api/oauth/github/callback/+server.ts b/src/routes/api/oauth/github/callback/+server.ts new file mode 100644 index 000000000..e8d455637 --- /dev/null +++ b/src/routes/api/oauth/github/callback/+server.ts @@ -0,0 +1,62 @@ +import { get_access_token } from '../../../../../server/auth/access_token'; +import { get_github_user } from '../../../../../server/auth/github_user_methods'; +import { find_session } from '../../../../../server/auth/sessions'; +import { find_or_create_user } from '../../../../../server/auth/users'; + +// This route runs after the user has been successfully validated on GitHub +export async function GET({ url, cookies, locals }) { + // *** ฅ^•ﻌ•^ฅ *** // + // *** SyNtAx AuTh *** // + // 1. Pull code from Github response, this is the callback from Github + // 2. Use code to get access token from Github + // 3. Use access token to get user data from Github + // 4. Use user data to create user in database + // 5. Create session in database + // 6. Set access token as httpOnly cookie + // 7. Redirect to home page + // *** *** *** *** // + // *** ฅ^•ﻌ•^ฅ *** // + + // 1. Get the code from the URL to be used to get the access token + const code = url.searchParams.get('code'); + const session_token = url.searchParams.get('state'); + const { ip, country } = locals.session; + + // If the code exists, get the access token from GitHub + if (code && session_token) { + // 2. Use code to get access token from Github + const access_token = await get_access_token(code); + + if (access_token) { + // 3. Use access token to get user data from Github + const github_user = await get_github_user(access_token); + + // 4. Use user data to create user in database + const user = await find_or_create_user({ github_user }); + + // 5. Create session in database + // Check to see if session exists in the database + await find_session(access_token, session_token, user, { + ip, + country + }); + + // 5. Set the access token as an httpOnly cookie + cookies.set('access_token', access_token, { + httpOnly: true, + path: '/', + secure: true, + sameSite: 'strict', + maxAge: 60 * 60 * 24 * 365 // 1 year + }); + + return new Response('', { + status: 302, + headers: { + location: '/' + } + }); + } + } + return new Response('Auth Failed', { status: 401 }); +} diff --git a/src/routes/api/shows/+server.ts b/src/routes/api/shows/+server.ts new file mode 100644 index 000000000..adba341f0 --- /dev/null +++ b/src/routes/api/shows/+server.ts @@ -0,0 +1,31 @@ +import { json } from '@sveltejs/kit'; +import { format } from 'date-fns'; + +export async function GET({ locals }) { + const data = await locals.prisma.show.findMany({ + orderBy: { number: 'desc' }, + include: { + guests: { + select: { + Guest: { + select: { + github: true, + name: true + } + } + } + } + } + }); + + const shows = data.map((show) => { + return { + ...show, + notesFile: show?.md_file, + displayNumber: show?.number.toString(), + displayDate: format(new Date(show.date), 'MMMM do, yyyy') + }; + }); + + if (data) return json(shows); +} diff --git a/src/routes/api/shows/[number=show_number]/+server.ts b/src/routes/api/shows/[number=show_number]/+server.ts new file mode 100644 index 000000000..010aa850e --- /dev/null +++ b/src/routes/api/shows/[number=show_number]/+server.ts @@ -0,0 +1,30 @@ +import { json } from '@sveltejs/kit'; +import { format } from 'date-fns'; + +export async function GET({ locals, params }) { + const data = await locals.prisma.show.findFirst({ + where: { + number: parseInt(params.number) + }, + orderBy: { number: 'desc' }, + include: { + guests: { + select: { + Guest: { + select: { + github: true, + name: true + } + } + } + } + } + }); + if (data) + return json({ + ...data, + notesFile: data?.md_file, + displayNumber: data?.number.toString(), + displayDate: format(new Date(data.date), 'MMMM do, yyyy') + }); +} diff --git a/src/routes/api/shows/latest/+server.ts b/src/routes/api/shows/latest/+server.ts new file mode 100644 index 000000000..74f2c3ea7 --- /dev/null +++ b/src/routes/api/shows/latest/+server.ts @@ -0,0 +1,27 @@ +import { json } from '@sveltejs/kit'; +import { format } from 'date-fns'; + +export async function GET({ locals }) { + const data = await locals.prisma.show.findFirst({ + orderBy: { number: 'desc' }, + include: { + guests: { + select: { + Guest: { + select: { + github: true, + name: true + } + } + } + } + } + }); + if (data) + return json({ + ...data, + notesFile: data?.md_file, + displayNumber: data?.number.toString(), + displayDate: format(new Date(data.date), 'MMMM do, yyyy') + }); +} diff --git a/src/routes/content.json/+server.ts b/src/routes/content.json/+server.ts new file mode 100644 index 000000000..bd3660ff9 --- /dev/null +++ b/src/routes/content.json/+server.ts @@ -0,0 +1,11 @@ +import { content } from './content.server.js'; +import { json } from '@sveltejs/kit'; + +export const prerender = true; + +export async function GET() { + const data = await content(); + return json({ + blocks: data + }); +} diff --git a/src/routes/content.json/content.server.ts b/src/routes/content.json/content.server.ts new file mode 100644 index 000000000..44909be1c --- /dev/null +++ b/src/routes/content.json/content.server.ts @@ -0,0 +1,23 @@ +import { prisma_client } from '../../hooks.server'; +import type { Show } from '@prisma/client'; + +interface Block { + breadcrumbs: string[]; + content: string; + href: string; +} + +export async function content() { + const blocks: (Block & Show)[] = []; + const shows = await prisma_client.show.findMany({ orderBy: { number: 'desc' } }); + + shows.forEach((show) => { + blocks.push({ + breadcrumbs: [show.title], + content: show.show_notes, + href: `/shows/${show.number}/${show.slug}`, + ...show + }); + }); + return blocks; +} diff --git a/src/routes/webhooks/ai/+server.ts b/src/routes/webhooks/ai/+server.ts new file mode 100644 index 000000000..6ad669de5 --- /dev/null +++ b/src/routes/webhooks/ai/+server.ts @@ -0,0 +1,53 @@ +import { error, json } from '@sveltejs/kit'; +import type { RequestEvent } from './$types'; +import { save_ai_notes_to_db } from '$server/ai/db'; +import { generate_ai_notes } from '$server/ai/openai'; +import { transcript_with_utterances } from '$server/ai/queries'; +import { has_auth } from '../transcripts/has_auth'; + +export const config = { + maxDuration: 300 // vercel timeout +}; + +export const GET = async function transcriptCronHandler({ request, locals }: RequestEvent) { + const start = Date.now(); + const allowed = has_auth(request); + // 1. Make sure we have an API key + if (!allowed) { + throw error(401, 'Get outta here - Wrong Cron key or auth header'); + } + // 2. Get the latest show without a transcript + const show = await locals.prisma.show.findFirst({ + where: { + // Where there is no AI Show Note, and there is a transcript + aiShowNote: null, + transcript: { + isNot: null + } + }, + include: { + transcript: transcript_with_utterances + }, + orderBy: { + number: 'desc' + } + }); + + if (!show) { + return json({ message: 'No shows without AI Show notes found.' }); + } + + console.log(`🤖 Found a show that needs AI show notes: show ${show.number} - ${show.title}`); + + const result = await generate_ai_notes(show); + await save_ai_notes_to_db(result, show); + // console.log(result); + const duration = Date.now() - start; + const minutes = Math.floor(duration / 60000); + const seconds = (duration % 60000) / 1000; + const message = `ai Cron Ran for Show #${show.number} ${show.title}. Took ${minutes}m ${seconds}s`; + console.log(message); + return json({ + message + }); +}; diff --git a/src/routes/webhooks/refresh/+server.ts b/src/routes/webhooks/refresh/+server.ts new file mode 100644 index 000000000..7e2d156f3 --- /dev/null +++ b/src/routes/webhooks/refresh/+server.ts @@ -0,0 +1,9 @@ +import { import_or_update_all_changed_shows } from '../../../server/shows'; +import { json } from '@sveltejs/kit'; +import type { RequestHandler } from './$types'; + +export const POST: RequestHandler = async function () { + console.log('🤖 Pod Sync Requested via /webhooks/refresh'); + const data = await import_or_update_all_changed_shows(); + return json(data); +}; diff --git a/src/routes/webhooks/refresh_all/+server.ts b/src/routes/webhooks/refresh_all/+server.ts new file mode 100644 index 000000000..711e33995 --- /dev/null +++ b/src/routes/webhooks/refresh_all/+server.ts @@ -0,0 +1,9 @@ +import { import_or_update_all_shows } from '../../../server/shows'; +import { json } from '@sveltejs/kit'; +import type { RequestHandler } from './$types'; + +export const POST: RequestHandler = async function () { + console.log('🤖 Pod Sync Requested via /webhooks/refresh_all'); + const data = await import_or_update_all_shows(); + return json(data); +}; diff --git a/src/routes/webhooks/transcripts/+server.ts b/src/routes/webhooks/transcripts/+server.ts new file mode 100644 index 000000000..3f175d37d --- /dev/null +++ b/src/routes/webhooks/transcripts/+server.ts @@ -0,0 +1,43 @@ +import { error, json } from '@sveltejs/kit'; +import type { RequestEvent } from './$types'; +import { get_transcript } from '$server/transcripts/deepgram'; +import { has_auth } from './has_auth'; + +export const config = { + maxDuration: 300 // vercel timeout +}; + +export const GET = async function transcriptCronHandler({ request, locals }: RequestEvent) { + const start = Date.now(); + const allowed = has_auth(request); + // 1. Make sure we have an API key + if (!allowed) { + console.log('🤖 Unauthorized Transcript Cron Request'); + throw error(401, 'Get outta here - Wrong Cron key or auth header'); + } + // 2. Get the latest show without a transcript + const show = await locals.prisma.show.findFirst({ + where: { + transcript: null + }, + orderBy: { + number: 'desc' + } + }); + + if (!show) { + return json({ message: 'No shows without transcripts found.' }); + } + + console.log(`🤖 Found a show that needs a transcript: show ${show.number} - ${show.title}`); + const result = await get_transcript(show.number); + console.log(result); + const duration = Date.now() - start; + const minutes = Math.floor(duration / 60000); + const seconds = (duration % 60000) / 1000; + const message = `Transcript Cron Ran for Show #${show.number} ${show.title}. Took ${minutes}m ${seconds}s`; + console.log(message); + return json({ + message + }); +}; diff --git a/src/routes/webhooks/transcripts/has_auth.ts b/src/routes/webhooks/transcripts/has_auth.ts new file mode 100644 index 000000000..ed98b2c09 --- /dev/null +++ b/src/routes/webhooks/transcripts/has_auth.ts @@ -0,0 +1,8 @@ +export function has_auth(request: Request) { + const url = new URL(request.url); + const auth_header = request.headers.get('authorization'); + const cron_secret = url.searchParams.get('CRON_SECRET') === process.env.CRON_SECRET; + const has_auth_header = auth_header === `Bearer ${process.env.CRON_SECRET}`; + const has_auth = cron_secret || has_auth_header; + return has_auth; +} diff --git a/src/server/ai/anthropic.ts b/src/server/ai/anthropic.ts new file mode 100644 index 000000000..50e26946f --- /dev/null +++ b/src/server/ai/anthropic.ts @@ -0,0 +1,26 @@ +import Anthropic from '@anthropic-ai/sdk'; +import { CreateChatCompletionRequest } from 'openai'; + +export const anthropic = new Anthropic({ + apiKey: process.env.ANTHROPIC_KEY +}); + +const promptMap = new Map([ + ['system', Anthropic.AI_PROMPT], + ['user', Anthropic.HUMAN_PROMPT] +]); + +export function convert_openai_to_anthropic(completion: CreateChatCompletionRequest) { + const messages = completion.messages.map((message) => { + return `${Anthropic.HUMAN_PROMPT} ${message.content}`; + }); + return `${messages.join('')} ${Anthropic.AI_PROMPT}`; +} + +export function anthropic_completion(prompt: string) { + return anthropic.completions.create({ + model: 'claude-2', + max_tokens_to_sample: 75000, + prompt + }); +} diff --git a/src/server/ai/db.ts b/src/server/ai/db.ts new file mode 100644 index 000000000..5e9cb284a --- /dev/null +++ b/src/server/ai/db.ts @@ -0,0 +1,36 @@ +import { generate_ai_notes } from './openai'; +import { prisma_client } from '../../hooks.server'; + +type Show = { number: number }; +type Result = Awaited>; + +export async function save_ai_notes_to_db(result: Result, show: Show) { + return prisma_client.aiShowNote.create({ + data: { + show: { + connect: { + number: show.number + } + }, + title: result.title, + description: result.description, + summary: { + create: result.summary + }, + tweets: { + create: result.tweets.map((tweet) => ({ content: tweet })) + }, + topics: { + create: result.topics.map((topic) => ({ name: topic })) + }, + links: { + create: result.links.map((link) => ({ + name: link.name, + url: link.url, + timestamp: link.timestamp + })) + }, + provider: 'anthropic' + } + }); +} diff --git a/src/server/ai/openai.ts b/src/server/ai/openai.ts new file mode 100644 index 000000000..19d144519 --- /dev/null +++ b/src/server/ai/openai.ts @@ -0,0 +1,208 @@ +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck +// TODO remove this ts-nocheck. I've added this until this is more complete or confirmed to be complete +import { Configuration, type CreateChatCompletionRequest, OpenAIApi } from 'openai'; +import { createCondensePrompt, summarizePrompt, summarizePrompt2 } from './prompts'; +import { + SlimUtterance, + TranscribedShow, + formatAsTranscript, + getSlimUtterances +} from '$server/transcripts/utils'; +import { encode } from 'gpt-3-encoder'; +import wait from 'waait'; +import type { Prisma } from '@prisma/client'; + +export const TOKEN_LIMIT = 7000; +export const COMPLETION_TOKEN_IDEAL = 1500; // how many tokens we should reserve to the completion - otherwise the responses are poor quality +const TOKEN_INPUT_LIMIT = TOKEN_LIMIT - COMPLETION_TOKEN_IDEAL; +// export const MODEL = 'gpt-3.5-turbo-16k'; // Was gpt-4 before token limit was increased +export const MODEL = 'gpt-4'; +export const EMBEDDING_MODEL = 'text-embedding-ada-002'; +export const CONDENSE_THRESHOLD = 100; +const configuration = new Configuration({ + apiKey: process.env.OPENAI_API_KEY +}); +import { AINoteSelect, AIPodcastSummaryResponse } from './queries'; +import { anthropic_completion, convert_openai_to_anthropic } from './anthropic'; +export const openai = new OpenAIApi(configuration); + +export async function condense( + transcript: string, + show: TranscribedShow, + options: { + skip: boolean; + } +): Promise { + // Figure out how large the input is + const inputTokensLength = encode(`${transcript} ${summarizePrompt}`).length; + // If its under the limit, return the transcript as is + if (inputTokensLength < TOKEN_INPUT_LIMIT || options.skip) { + console.log( + `========== Skipping condensing show ${show.number} - Size is ${inputTokensLength} and acceptable ============` + ); + return show.utterances; + } + console.log(`========== Condensing show ${show.number} ============`); + // Figure out how many hunks we need to split this string into + console.log(`inputTokensLength size: ${inputTokensLength}`); + console.log(`Token input limit: ${TOKEN_INPUT_LIMIT}`); + const factorSmaller = 1 - TOKEN_INPUT_LIMIT / inputTokensLength; + console.log(`Factor smaller: ${factorSmaller}`); + // Group utterances + const slimUtterances = getSlimUtterances(show.utterances, show.number, false); + console.log(slimUtterances.length, show.utterances.length); + // Split the transcript into hunks + const utteranceFuncs = slimUtterances.map((utterance, index) => { + return async function getCondenseUtterance(): Promise { + // Wait a random amount of time to avoid rate limiting. Between 0 and 10 seconds + const waitTime = Math.floor(Math.random() * 10000); + await wait(waitTime); + console.time(`Condensing ${index} of ${slimUtterances.length}`); + const size = encode(utterance.transcript).length; + // If under 50 chars, leave it alone. Return it via a promise + if (utterance.transcript.length < CONDENSE_THRESHOLD) { + console.log(`Skipping condensing of ${index} of ${slimUtterances.length}`); + return Promise.resolve(utterance); + } + // If it's over 50 chars, condense it via openAI + const input: CreateChatCompletionRequest = { + model: 'gpt-3.5-turbo', // Summarize + messages: [ + // { "role": "system", "content": `You are a helpful service that condenses text.` }, + { role: 'system', content: createCondensePrompt(`${Math.floor(factorSmaller * 100)}%`) }, + { role: 'user', content: utterance.transcript } + ], + max_tokens: Math.round(size * factorSmaller) + // "temperature": 0.3 + }; + console.log(`Condensing`, index, `of`, slimUtterances.length); + const completion = await openai.createChatCompletion(input).catch((err) => { + // Catch the error in transcribing so we can at least save the utterance without the condensed transcript + console.log(`❗️ Error Condensing`, index, `of`, slimUtterances.length); + console.dir(err.response.data); + console.dir(err.response.headers); + }); + const condensed = completion?.data?.choices?.at(0)?.message?.content; + // Inject the condensed transcript into the utterance + if (condensed) { + utterance.condensedTranscript = condensed; + } + if (condensed.length > utterance.transcript.length) { + console.log(`Condensed transcript is longer than original transcript. + Condensed: ${condensed} + Original: ${utterance.transcript} + `); + return Promise.resolve(utterance); + } + const smaller = encode(condensed || '').length; + const original = encode(utterance.transcript).length; + console.log( + index, + '/', + slimUtterances.length, + `Condensed from ${original} to ${smaller} tokens - ${Math.round( + (smaller / original) * 100 + )}% of original` + ); + console.timeEnd(`Condensing ${index} of ${slimUtterances.length}`); + // Return the modifined utterance + return utterance; + }; + }); + // Run the functions in parallel + const utteranceResults = await Promise.allSettled(utteranceFuncs.map((func) => func())); + console.log('Done condensing'); + // Get the results + const utterances = utteranceResults + .filter((result): result is PromiseFulfilledResult => { + return result.status === 'fulfilled'; + }) + .map((result) => result.value); + + console.log(`Finished Condensing ${show.number}`); + return utterances; +} + +type GenerateAINotesInput = { + transcript: Prisma.TranscriptGetPayload<{ + include: { + utterances: { + include: { + transcript: true; + words: true; + }; + }; + }; + }>; + show: Prisma.ShowGetPayload; +}; + +export async function generate_ai_notes( + show: Prisma.ShowGetPayload<{ + select: AINoteSelect; + }>, + provider: 'openai' | 'anthropic' = 'anthropic' +) { + const slimUtterance = getSlimUtterances(show.transcript?.utterances || [], show.number); + const transcript = formatAsTranscript(slimUtterance); + // Condense + const slimUtterancesWithCondensed = await condense( + transcript, + { + name: show.title, + number: show.number, + utterances: slimUtterance + }, + { + skip: provider === 'anthropic' + } + ); + const condensedTranscript = formatAsTranscript(slimUtterancesWithCondensed); + const links = show.show_notes + .match(/\[([^\[]+)\](\(.*\))/g) + .filter((link) => link.includes('http')); + + const input: CreateChatCompletionRequest = { + // model: 'gpt-4', + model: 'gpt-3.5-turbo-16k', + temperature: 0, + messages: [ + { + role: 'system', + content: + 'You summarize web development podcasts and output the result as JSON format. Your tone is casual and humorous.' + }, + { + role: 'user', + content: 'Syntax is a podcast about web development. Available at https://Syntax.fm' + }, + { role: 'user', content: `This episode is #${show.number} entitled ${show.title}` }, + { role: 'user', content: summarizePrompt2 }, + { role: 'user', content: `${condensedTranscript}` }, + { role: 'user', content: `Remember to only return JSON in the format specified` } + ] + }; + console.log(`Creating AI notes for ${show.number}`); + if (provider === 'anthropic') { + console.log(`Using anthropic for ${show.number}`); + const anthropicInput = convert_openai_to_anthropic(input); + const anthropicResult = await anthropic_completion(anthropicInput); + console.log(anthropicResult); + const startIndex = anthropicResult.completion.indexOf('{'); + const endIndex = anthropicResult.completion.lastIndexOf('}'); + const jsonPart = anthropicResult.completion.substring(startIndex, endIndex + 1); + console.log(`JSON Part: ${jsonPart}`); + const aparsed = JSON.parse(jsonPart) as AIPodcastSummaryResponse; + return { ...aparsed, provider: 'anthropic' }; + } + // OpenAI + console.log(`Using openai for ${show.number}`); + const completion = await openai.createChatCompletion(input).catch((err) => { + console.dir(err.response.data.error, { depth: null }); + }); + const maybeJSON = completion.data.choices.at(0)?.message?.content; + console.log(maybeJSON); + const parsed = JSON.parse(maybeJSON || '') as AIPodcastSummaryResponse; + return { ...parsed, provider: 'gpt3.5' }; +} diff --git a/src/server/ai/prompts.ts b/src/server/ai/prompts.ts new file mode 100644 index 000000000..b3efa7fa4 --- /dev/null +++ b/src/server/ai/prompts.ts @@ -0,0 +1,84 @@ +export const createCondensePrompt = (size = '50%') => + `You will condense this text to about ${size} shorter - give or take 15%. You keep every detail, even if you think it does not matter. You keep the tone and style of speaking as well:`; + +export const grammarPrompt = `Apply spelling, grammar and incorrectly transcribed word fixes to this transcript. Do not remove or add anything except paragraph spacing where you feel necessary.`; + +export const midjourney = `simple vector. visualization of accepting money online, in the style of Netflix movie cover, golden yellow background. black and white , monochrome. painted illustrations, grainy. --v 5 --ar 16:9`; + +export const misspellings = ` +Please replace all instances of the following words with the correct spelling: + +1. Replace "Century" with "Sentry" +2. Replace "Cintax", "Cintech", and "Cintacs" with "Syntax" +`; + +export const summarizePrompt = `Summarize the provided podcast transcript into very succinct bullet points, each containing just a few words. The bullet points should correspond to sections, questions or topics discussed in the podcast with points at least every 3-5 minutes. For each bullet point, you may also provide a longer 1-2 sentence summary of the topic if necessary, which may also include the host's opinions, names and thoughts. Do not skip topics. + +Remember, the key here is to read through the transcript carefully, identify all points, topics, questions and even banter, and then condense each one into a very brief, clear statement. It's also important to include timestamps if they're provided in the transcript, as they can help give a sense of the flow and structure of the podcast. + +Additionally, Please create the following for this podcast episode: + +1. 1-2 sentence description about what is covered in the podcast. This should be a short, catchy, and interesting description. It should provoke the listener to stop what they are doing and listen to the podcast. +2. 6-7 tweets for this podcast episode. These tweets should be short, catchy, and interesting. They should provoke the twitter user to respond an join in the conversation. Do not add any hashtags or emojis. Use exclamation points sparingly. +3. 6-7 tweets about this podcast that can be tweeted by listeners of the show. Some examples are "This is a fantastic episode about ___", or "I really enjoyed the part about ____". They should mention @syntaxfm. Do not add any hashtags or emojis. Use exclamation points sparingly. +4. 3-4 hashtags that categorize the episode. these will be used as topic tags on the website. +5. A summary of the podcast into a title. It should be catchy, slightly click-baity, mention a few topics covered and make the listener want to stop what they are doing and watch it. +6. Keep track of any links or websites mentioned in the podcast. These will be used as links on the website. If we don't explicitly mention a website, but instead mention a company, service or resource, find the associated website. Provide the timestamp of when the link is first mentioned. Do not skip links. +8. Provide a list of guest names. If the transcript doesn't include their real name, try to infer it. + +${misspellings} + +If you, the AI, have feedback or clarifications on your response, please put them in the notes section. + +Return each of these things in JSON format that looks like this: + +{ + "title": "...", + "description": "...", + "notes": "...", + "summary": [{"time": "02:33", "text": "...", "description": "..."}], + "tweets": ["..."], + "topics": ["...", "..."], + "links": [{ "name": "Name of link", "url": "https://example.com", "timestamp": "02:45" }], + "guests": ["..."] +}`; + +export const summarizePrompt2 = `Summarize the provided podcast transcript into very succinct bullet points, each containing just a few words. The bullet points should correspond to sections, questions or distinct topics discussed in the podcast with points at least every 3-5 minutes. + +summary: For each bullet point, provide: + +1. time: A timestamp of when the topic is first mentioned +2. text: A short, clear, and concise summary of the topic. This should be a short, catchy, and interesting description. It should provoke the listener to stop what they are doing and listen to the podcast. Leave off any intro wording such as "Discussion on" and "Explanation of" +3. description: 1 to 3 words MAX summarizing the previously mentioned text. Do not provide more than 3 words. If you provide + +Remember, the key here is to read through the transcript carefully, identify all points, topics, questions and even banter, and then condense each one into a very brief, clear statement. It's also important to include timestamps if they're provided in the transcript, as they can help give a sense of the flow and structure of the podcast. Do not leave out any topics. + +Additionally, Please create the following for this podcast episode: + +1. description: 1-2 sentence description about what is covered in the podcast. This should be a short, catchy, and interesting description. It should provoke the listener to stop what they are doing and listen to the podcast. +2. title: A summary of the podcast into a title. It should be catchy, slightly click-baity, mention a few topics covered and make the listener want to stop what they are doing and watch it. +3. tweets: 6-7 tweets for this podcast episode. These tweets should be short, catchy, and interesting. They should provoke the twitter user to respond an join in the conversation. Do not add any hashtags or emojis. Use exclamation points sparingly. +4. topics: 3-4 hashtags that categorize the episode. these will be used as topic tags on the website. +6. links: Keep track of any links or websites mentioned in the podcast. These will be used as links on the website. If we don't explicitly mention a website, but instead mention a company, service or resource, find the associated website. Provide the timestamp of when the link is first mentioned. Do not skip links. +8. guests: Provide a list of guest names. If the transcript doesn't include their real name, try to infer it. + +${misspellings} + +If you, the AI, have feedback or clarifications on your response, please put them in the notes property. + +Return each of these things in JSON format that looks like this: + +{ + "summary": [{"time": "02:33", "text": "...", "description": "..."}], + "description": "...", + "title": "...", + "notes": "...", + "tweets": ["..."], + "topics": ["...", "..."], + "links": [{ "name": "Name of link", "url": "https://example.com", "timestamp": "02:45" }], + "guests": ["..."] +} + +Your response must be 100% JSON. Do not respond with any other text or characters. + +`; diff --git a/src/server/ai/queries.ts b/src/server/ai/queries.ts new file mode 100644 index 000000000..4ae3f8243 --- /dev/null +++ b/src/server/ai/queries.ts @@ -0,0 +1,103 @@ +import { PER_PAGE } from '$const'; +import { Prisma, $Enums } from '@prisma/client'; + +export const transcript_with_utterances = Prisma.validator()({ + include: { + utterances: { + include: { + words: false // Way too big for client side + }, + orderBy: { + start: 'asc' + } + } + } +}); + +export const ai_note_with_friends = Prisma.validator()({ + include: { + links: true, + summary: true, + topics: true, + tweets: true + } +}); + +export type TranscriptWithUtterances = Prisma.TranscriptGetPayload< + typeof transcript_with_utterances +>; +export type AINoteWithFriends = Prisma.AiShowNoteGetPayload; + +type SummaryItem = { + time: string; + text: string; + description: string; +}; + +type Link = { + name: string; + url: string; +}; + +type SpeakerTime = { + name: string; + time: string; +}; + +export type AIPodcastSummaryResponse = { + title: string; + description: string; + notes: string; + summary: SummaryItem[]; + tweets: string[]; + listener_tweets: string[]; + topics: string[]; + links: Link[]; + speaker_times: SpeakerTime[]; + guests: string[]; +}; + +type QueryInputs = { + take?: number; + order?: 'asc' | 'desc'; + skip?: number; + show_type?: $Enums.ShowType; +}; + +export const SHOW_QUERY = ( + { take, order, skip, show_type }: QueryInputs = { take: PER_PAGE, order: 'desc', skip: 0 } +) => { + const today = new Date(); + + return Prisma.validator()({ + take, + orderBy: { number: order }, + skip, + where: { + ...(show_type && { show_type: show_type }), + date: { + lte: today + } + }, + include: { + guests: { + select: { + Guest: { + select: { + github: true, + name: true + } + } + } + }, + aiShowNote: { + select: { + description: true, + topics: true + } + } + } + }); +}; + +export type LatestShow = Prisma.ShowGetPayload>; diff --git a/src/server/ai/requestHandlers.ts b/src/server/ai/requestHandlers.ts new file mode 100644 index 000000000..75334c1ba --- /dev/null +++ b/src/server/ai/requestHandlers.ts @@ -0,0 +1,45 @@ +// TODO WES BOS Remove +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck + +import { error, type RequestEvent } from '@sveltejs/kit'; +import { transcript_with_utterances } from './queries'; +import { generate_ai_notes } from './openai'; +import { save_ai_notes_to_db } from './db'; + +export async function aiNoteRequestHandler({ request, locals }: RequestEvent) { + const data = await request.formData(); + const show_number = parseInt(data.get('show_number')?.toString() || ''); + + if (!show_number) { + throw error(400, 'Invalid Show Number'); + } + + const show = await locals.prisma.show.findUnique({ + where: { number: show_number }, + include: { + transcript: transcript_with_utterances + } + }); + + if (!show?.transcript) { + throw error(400, 'No show, or no transcript for this show'); + } + // delete any existing ai notes + await locals.prisma.aiShowNote.deleteMany({ + where: { + show: { + number: show_number + } + } + }); + + // Get the AI transcript for this show + const result = await generate_ai_notes(show); + // Save to DB + console.log(`🤖 Saving AI Notes to DB for Show ${show_number}`); + console.dir(result); + await save_ai_notes_to_db(result, show); + + return { message: 'AI Notes Created' }; +} diff --git a/src/server/ai/summarize.ts b/src/server/ai/summarize.ts new file mode 100644 index 000000000..8c074a7da --- /dev/null +++ b/src/server/ai/summarize.ts @@ -0,0 +1,27 @@ +import { openai } from './openai'; + +// split the transcript on blank lines +export type TranscriptBlock = { + speaker: string; + time: string; + lines: string; +} + +export async function summarize(block: TranscriptBlock) { + const prompt = ` +Create a detailed summary of this text. Provide only the summary and avoid introducing it with a title or other text. + +${block.lines} +` + const response = await openai.createChatCompletion({ + model: "gpt-3.5-turbo", + max_tokens: 20, + messages: [ + { role: 'user', content: prompt }, + ] + }); + return { + ...block, + summary: response.data.choices.at(0)?.message?.content + }; +} diff --git a/src/server/auth/access_token.ts b/src/server/auth/access_token.ts new file mode 100644 index 000000000..57393f59d --- /dev/null +++ b/src/server/auth/access_token.ts @@ -0,0 +1,32 @@ +import { PUBLIC_GITHUB_ID } from '$env/static/public'; +import { GH_SECRET } from '$env/static/private'; +const tokenURL = 'https://github.com/login/oauth/access_token'; + +export async function get_access_token(code: string): Promise { + try { + const response = await fetch(tokenURL, { + method: 'POST', + headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, + body: JSON.stringify({ + client_id: PUBLIC_GITHUB_ID, + client_secret: GH_SECRET, + code + }) + }); + + if (!response.ok) { + throw new Error(`Error fetching access token: ${response.statusText}`); + } + + const data = await response.json(); + + if (data.error) { + throw new Error(`Error fetching access token: ${data.error_description}`); + } + + return data.access_token; + } catch (error) { + console.error('Error:', error); + throw error; + } +} diff --git a/src/server/auth/github_user_methods.ts b/src/server/auth/github_user_methods.ts new file mode 100644 index 000000000..79f9ff034 --- /dev/null +++ b/src/server/auth/github_user_methods.ts @@ -0,0 +1,10 @@ +import { GITHUB_USER_URL, type GithubUser } from '$const'; + +export function get_github_user(access_token: string): Promise { + return fetch(GITHUB_USER_URL, { + headers: { + Accept: 'application/json', + Authorization: `Bearer ${access_token}` + } + }).then((r) => r.json()); +} diff --git a/src/server/auth/sessions.ts b/src/server/auth/sessions.ts new file mode 100644 index 000000000..89c6ae4d6 --- /dev/null +++ b/src/server/auth/sessions.ts @@ -0,0 +1,25 @@ +import type { Session, User } from '@prisma/client'; +import { prisma_client } from '../../hooks.server'; + +export async function find_session( + access_token: string, + session_token: string, + user: User, + details: { + ip: string; + country: string; + } +): Promise { + return prisma_client.session.update({ + where: { + session_token + }, + data: { + access_token, + user_id: user.id, + session_token, + ip: details.ip, + country: details.country + } + }); +} diff --git a/src/server/auth/users.ts b/src/server/auth/users.ts new file mode 100644 index 000000000..b555cc940 --- /dev/null +++ b/src/server/auth/users.ts @@ -0,0 +1,86 @@ +import type { GithubUser } from '$const'; +import { add_user_to_role } from '../roles'; +import { prisma_client } from '../../hooks.server'; +import type { User } from '@prisma/client'; + +export interface UserWithRoles extends User { + roles: string[] +} + +interface Create_User { + github_user: GithubUser; +} + +export function create_user({ github_user }: Create_User) { + return prisma_client.user.create({ + data: { + avatar_url: github_user.avatar_url, + email: github_user.email, + github_id: github_user.id, + username: github_user.login + } + }); +} + +export async function find_or_create_user({ github_user }: Create_User) { + const user = await prisma_client.user.findUnique({ + where: { + github_id: github_user.id + } + }); + if (user) { + return user; + } else { + const new_user = await create_user({ github_user }); + // if it's Wes or Scott. Upgrade that shit + if (['wesbos', 'stolinski'].includes(github_user.login)) { + add_user_to_role(new_user.id, 'admin'); + } + return new_user; + } +} + +// look up current user via their access token. First by finding the session then user +export async function find_user_by_access_token(access_token: string) { + // Get session from access token + const session = await prisma_client.session.findUnique({ + where: { + access_token + } + }); + // If a session exists that is tied to a user + if (session?.user_id) { + return find_user_with_roles(session.user_id); + } + return null; +} + +// Because of how roles are done, the find returns an array of objects +// Here we select from the roles table to populate a user with their roles, but then convert the roles into +// an array of strings +export async function find_user_with_roles(user_id: string): Promise { + const user_with_roles = await prisma_client.user.findUnique({ + where: { id: user_id }, + include: { + roles: { + select: { + role: { + select: { + name: true + } + } + } + } + } + }); + if (!user_with_roles) { + throw new Error('User not found'); + } + + const user = { + ...user_with_roles, + roles: user_with_roles.roles.map((user_role) => user_role.role.name) + }; + + return user; +} diff --git a/src/server/roles.ts b/src/server/roles.ts new file mode 100644 index 000000000..760e8cd46 --- /dev/null +++ b/src/server/roles.ts @@ -0,0 +1,32 @@ +import { prisma_client } from '../hooks.server'; + +export async function add_user_to_role(userId: string, roleName: string) { + // Find the role by its name + const role = await prisma_client.role.findUnique({ + where: { + name: roleName + } + }); + + if (!role) { + throw new Error(`Role with name '${roleName}' not found.`); + } + + // Create a UserRole entry linking the user and the role + const userRole = await prisma_client.userRole.create({ + data: { + user: { + connect: { + id: userId + } + }, + role: { + connect: { + id: role.id + } + } + } + }); + + return userRole; +} diff --git a/src/server/shows.ts b/src/server/shows.ts new file mode 100644 index 000000000..5241bd5d3 --- /dev/null +++ b/src/server/shows.ts @@ -0,0 +1,210 @@ +import slug from 'speakingurl'; +import matter from 'gray-matter'; +import { prisma_client as prisma } from '../hooks.server'; +import { import_all_md_files_from_glob } from '$utilities/file_utilities/get_md_from_folder'; +import { get_hash_from_content } from '$utilities/file_utilities/get_hash_from_content'; +import { error } from '@sveltejs/kit'; +import { DAYS_OF_WEEK_TYPES } from '$const'; +import { left_pad } from '$utilities/left_pad'; + +interface FrontMatterGuest { + name: string; + twitter: string; + url: string; + social: string[]; +} + +export async function import_or_update_all_shows() { + try { + // Filter only .md files + const md_files = await import_all_md_files_from_glob(); + + // Read and process each .md file + for (const md_file_path in md_files) { + const { number, hash, md_file_contents } = await get_show_data_from_glob( + md_files[md_file_path], + md_file_path + ); + await parse_and_save_show_notes(md_file_contents, hash, number, md_file_path); + } + } catch (err) { + console.error('❌ Pod Sync Error:', err); + throw error(500, 'Error Importing Shows'); + } + console.log('🤖 Pod Sync Complete ✅'); + return { message: 'Import All Shows' }; +} + +export async function import_or_update_all_changed_shows() { + try { + // Filter only .md files + const md_files = await import_all_md_files_from_glob(); + + // Read and process each .md file + for (const md_file_path in md_files) { + const { number, hash, md_file_contents } = await get_show_data_from_glob( + md_files[md_file_path], + md_file_path + ); + + const existing_show = await prisma.show.findFirst({ + where: { number: number } + }); + + // If show doesn't exist or the hash has changed. Refresh + if (!existing_show || existing_show.hash !== hash) { + await parse_and_save_show_notes(md_file_contents, hash, number, md_file_path); + } + } + } catch (err) { + console.error('❌ Pod Sync Error:', err); + throw error(500, 'Error Importing Shows'); + } + console.log('🤖 Pod Sync Complete ✅'); + return { message: 'Import All Shows' }; +} + +async function get_show_data_from_glob(md_file_contents: string, md_file_path: string) { + const hash = await get_hash_from_content(md_file_contents); + const cleaned_path = md_file_path.replace('/shows/', ''); + const number = parseInt(cleaned_path.split(' - ')[0]); + return { number, hash, md_file_contents }; +} + +// Takes a string of a .md show notes and adds it to the database and adds the guests +export async function parse_and_save_show_notes( + notes: string, + hash: string, + number: number, + md_file: string +) { + // Parse the front matter + const { data, content } = matter(notes); + + const date = new Date(data.date); // Parse the date string into a Date object + + const dayOfWeek: number = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, ...) + const id = get_id_from_show_number(number); + + const show_type: 'HASTY' | 'TASTY' | 'SUPPER' | 'SPECIAL' = + DAYS_OF_WEEK_TYPES[dayOfWeek] || 'SPECIAL'; + // Save or update the show + try { + const show = await prisma.show.upsert({ + where: { id }, + update: { + title: data.title, + slug: slug(data.title), + date, + number, + url: data.url, + show_notes: content, + hash: hash, + md_file, + show_type // Assign the calculated show_type + }, + create: { + id, + slug: slug(data.title), + number, + title: data.title, + date, + url: data.url, + show_notes: content, + hash: hash, + md_file, + show_type // Assign the calculated show_type + } + }); + + // If data guest + if (data?.guest && Array.isArray(data?.guest)) { + // Iterate through guests and save or update them + const guest_promises = data.guest.map((guest) => add_or_update_guest(guest, show.id)); + // Save guests + await Promise.all(guest_promises); + // Otherwise as long as data.guest exists + } else if (data?.guest) { + try { + await add_or_update_guest(data?.guest, show.id); + } catch (err) { + console.error('Error Importing Show and Guests:', show.number, data.guest, err); + } + } + console.log(`Episode # ${show.number} imported successfully`); + } catch (err) { + console.error('Error Importing Show:', err, data, content); + // Throw an error to stop the import process + throw new Error('Error Importing Shows'); + } +} + +async function add_or_update_guest(guest: FrontMatterGuest, show_id: string) { + try { + const { social, name, ...guest_without_socials } = guest; + const name_slug = slug(name); + + const guest_record = await prisma.$transaction(async (prisma) => { + const existingGuest = await prisma.guest.findUnique({ where: { name_slug } }); + if (existingGuest) { + return await prisma.guest.update({ + where: { name_slug }, + data: { ...guest_without_socials, name, name_slug } + }); + } else { + return await prisma.guest.create({ + data: { + ...guest_without_socials, + name_slug, + name + } + }); + } + }); + + // now do the same for showGuest + await prisma.$transaction(async (prisma) => { + const existingShowGuest = await prisma.showGuest.findUnique({ + where: { showId_guestId: { showId: show_id, guestId: guest_record.id } } + }); + + if (existingShowGuest) { + return; // if the show guest already exists, we do nothing + } else { + await prisma.showGuest.create({ + data: { showId: show_id, guestId: guest_record.id } + }); + } + }); + + if (social) { + let socialLinks = []; + // If social is a string, convert it to an array with one element + if (typeof social === 'string') { + socialLinks = [social]; + } else if (Array.isArray(social)) { + socialLinks = social; + } else { + console.error('Unexpected data type for social:', typeof social); + return; + } + const socialLink_promises = socialLinks.map((social_link) => + prisma.socialLink.upsert({ + where: { link_guest_id: { link: social_link, guest_id: guest_record.id } }, + update: { link: social_link, guest: { connect: { id: guest_record.id } } }, + create: { link: social_link, guest: { connect: { id: guest_record.id } } } + }) + ); + await Promise.all(socialLink_promises); + } + return guest_record; + } catch (err) { + console.error('Error Importing Guests:', show_id, guest, err); + } +} + +export function get_id_from_show_number(num: number) { + return `syntax_podcast_show_${left_pad(num)}`; +} + +// TODO Delete Cache for each new show diff --git a/src/server/transcripts/audio/scott-flagger.mp3 b/src/server/transcripts/audio/scott-flagger.mp3 new file mode 100644 index 000000000..9ee5cd73c Binary files /dev/null and b/src/server/transcripts/audio/scott-flagger.mp3 differ diff --git a/src/server/transcripts/audio/wes-flagger.mp3 b/src/server/transcripts/audio/wes-flagger.mp3 new file mode 100644 index 000000000..5e4ba6783 Binary files /dev/null and b/src/server/transcripts/audio/wes-flagger.mp3 differ diff --git a/src/server/transcripts/core.wasm b/src/server/transcripts/core.wasm new file mode 100644 index 000000000..1780c2fc2 Binary files /dev/null and b/src/server/transcripts/core.wasm differ diff --git a/src/server/transcripts/deepgram.ts b/src/server/transcripts/deepgram.ts new file mode 100644 index 000000000..9ad8c993f --- /dev/null +++ b/src/server/transcripts/deepgram.ts @@ -0,0 +1,73 @@ +// TODO WES BOS Remove +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-nocheck +import DeepgramPkg from '@deepgram/sdk'; +const { Deepgram } = DeepgramPkg; +import { prisma_client as prisma } from '../../hooks.server'; +import { error } from '@sveltejs/kit'; +import { keywords } from './fixes'; +import { addFlaggerAudio } from './flagger'; +import { save_transcript_to_db } from './transcripts'; +import type { PrerecordedTranscriptionResponse } from '@deepgram/sdk/dist/types'; +const deepgramApiKey = process.env.DEEPGRAM_SECRET; +if (!deepgramApiKey) { + console.error('Please set the DEEPGRAM_SECRET environment variable.'); + process.exit(1); +} + +// Initializes the Deepgram SDK +export const deepgramClient = new Deepgram(deepgramApiKey, 'api.deepgram.com'); + +export async function get_transcript(showNumber: number) { + const show = await prisma.show.findUnique({ + where: { number: showNumber }, + include: { + transcript: true + } + }); + + if (!show) { + throw error(500, `Show #${showNumber} not found.`); + } + if (show.transcript) { + throw error( + 409, + `Transcript for show #${show.number} already exists. Delete it if you want to re-fetch it.` + ); + } + const showBuffer = await addFlaggerAudio(show); + console.log(`Fetching transcript for show #${show.number} - ${show.title}...`); + console.log(showBuffer); + // const filePath = join(process.cwd(), 'temp-transcript.json'); + const transcript: PrerecordedTranscriptionResponse = await deepgramClient.transcription + .preRecorded( + { + buffer: showBuffer, + mimetype: 'audio/mpeg' + }, + { + punctuate: true, + model: 'nova-2-ea', + language: 'en-US', + detect_entities: true, + diarize: true, + smart_format: true, + paragraphs: true, // Not very good + utterances: true, + detect_topics: false, // not very good + keywords + } + ) + .catch((e) => { + console.log(`Error fetching transcript for show #${show.number} - ${show.title}.`); + console.log(e); + }); + // Temp: Write to disk as temp-transcript.json + // const transcript = JSON.parse(await readFile(filePath, 'utf-8')); + // await writeFile(filePath, JSON.stringify(transcript, null, 2)); + console.log(`Transcript for show #${show.number} - ${show.title} fetched.`); + await save_transcript_to_db(show, transcript.results?.utterances || []); + + // await writeFile(filePath, JSON.stringify(transcript, null, 2)); + console.log(`Transcript for show #${show.number} - ${show.title} saved.`); +} diff --git a/src/server/transcripts/fixes.ts b/src/server/transcripts/fixes.ts new file mode 100644 index 000000000..f18f2a6b8 --- /dev/null +++ b/src/server/transcripts/fixes.ts @@ -0,0 +1,27 @@ +export const keywords = [ + 'CSS', + 'ESLint', + 'Vercel', + 'JavaScript', + 'TypeScript', + 'Deno', + 'npm', + 'GitHub', + 'Node', + 'Yarn', + 'pnpm', + 'warp', + 'Wes Bos', + 'Wes', + 'Scott', + 'Sanity', + 'Scott Tolinski', + 'JS', +] + +export const replacements = new Map([ + ['West Boss', 'Wes Bos'], + ['Ryan Doll', 'Ryan Dahl'], + ['C Plus Plus', 'C++'], + ['Zelensky', 'Tolinski'], +]) diff --git a/src/server/transcripts/flagger.ts b/src/server/transcripts/flagger.ts new file mode 100644 index 000000000..2cb420ffc --- /dev/null +++ b/src/server/transcripts/flagger.ts @@ -0,0 +1,93 @@ +// import { createFFmpeg, fetchFile, type ProgressCallback } from '@ffmpeg.wasm/main'; +import { FFmpeg } from '@ffmpeg.wasm/main'; +import type { Show } from '@prisma/client'; +import { readFile, readdir } from 'fs/promises'; +import { logProgress } from './logProgress'; +import core from '@ffmpeg.wasm/core-mt'; +const flagPaths = ['./audio/wes-flagger.mp3', './audio/scott-flagger.mp3']; +import wasmPathAb from '@ffmpeg.wasm/core-mt/dist/core.wasm?url'; +import { env } from '$env/dynamic/private'; +export type ProgressEvent = { + duration?: number; + ratio?: number; + time: number; + percentage: number; +}; + +/** + * Concatenates a show with flagger audio to help with diatirization + * @returns {Promise} - The concatenated show + * @param {string} mp3URL - The URL of the show to concat + **/ +export async function addFlaggerAudio(show: Show): Promise { + console.log('ADDING FLAGGER AUDIO'); + const url = new URL(show.url); + // Get the filename + const fileName = `${show.number}.mp3`; + // Get the base name + const [baseName, extension] = fileName.split('.'); + // create the output filename + const outputFilename = `${show.number}-flagged.${extension}`; + console.log(`Downloading #${show.number} - ${show.title}`); + console.log('Creating ffmpeg instance'); + const ffmpeg = await FFmpeg.create({ + log: true, + core: core, + // Specify WASM paths for Vercel. These are copied into the function via a post-build script https://github.com/syntaxfm/website/issues/1175 + ...(env.VERCEL && { + coreOptions: { + wasmPath: './core.wasm', + workerPath: './core.worker.cjs' + } + }), + logger: (type, ...message) => { + logProgress(message.join(' ')); + } + }); + console.log('Loading ffmpeg'); + // await ffmpeg.load(); + // 1. download the show + // 1.1 See if the file exists first + const { ok } = await fetch(url, { method: 'HEAD' }); + console.log(`Fetching ${url}`); + const fetchBuffer = await fetch(url) + .then((res) => res.arrayBuffer()) + .then((buf) => Buffer.from(new Uint8Array(buf))); + // Load it into ffmpeg memory + // ffmpeg.FS('writeFile', fileName, await fetchFile(fetchBuffer)); + ffmpeg.fs.writeFile(fileName, fetchBuffer); + + console.log(`wrote ${fileName} to ffmpeg memory`); + // Write Flaggers to ffmpeg memory + for (const [i, flagPath] of flagPaths.entries()) { + const __dirname = new URL('.', import.meta.url).pathname; + const flagBuffer = await readFile(env.VERCEL ? flagPath : `${__dirname}/${flagPath}`); + ffmpeg.fs.writeFile(`flagger-${baseName}-${i}.mp3`, flagBuffer); + console.log(`wrote flagger-${baseName}-${i}.mp3 to ffmpeg memory`); + } + + // Create the Command + const command = [ + '-i', + fileName, + ...flagPaths.map((flagPath, i) => ['-i', `flagger-${baseName}-${i}.mp3`]).flat(), + '-filter_complex', + '[0:a:0][1:a:0][2:a:0]concat=n=3:v=0:a=1[outa]', + '-map', + '[outa]', + outputFilename + ]; + + console.log(`Running ffmpeg with command: ${command.join(' ')}`); + // Run ffmpeg + await ffmpeg.run(...command); + // Get the Uint8Array + const data = ffmpeg.fs.readFile(outputFilename); + // Convert to buffer + const buffer = Buffer.from(data.buffer); + // progressBar.stop(); + console.log(`FFMpeg Merging `); + // Write to disk from buffer for DEbugging + // await writeFile(`./audio-out/${outputFilename}`, buffer); + return buffer; +} diff --git a/src/server/transcripts/logProgress.ts b/src/server/transcripts/logProgress.ts new file mode 100644 index 000000000..b3029cbaa --- /dev/null +++ b/src/server/transcripts/logProgress.ts @@ -0,0 +1,25 @@ +let duration = 0; + +const ts2sec = (ts: string) => { + const [h, m, s] = ts.split(':'); + return (parseFloat(h) * 60 * 60) + (parseFloat(m) * 60) + parseFloat(s); +}; + +export const logProgress = (message: string) => { + if (typeof message === 'string') { + if (message.startsWith(' Duration')) { + const ts = message.split(', ')[0].split(': ')[1]; + const d = ts2sec(ts); + // Add duration to total + duration += d; + } else if (message.startsWith('frame') || message.startsWith('size')) { + const ts = message.split('time=')[1].split(' ')[0]; + const t = ts2sec(ts); + const percent = Math.round(t / duration * 100); + console.log(`FFMpeg Merging ${percent.toString()}%`); + } else if (message.startsWith('video:')) { + // Reset duration + duration = 0; + } + } +}; diff --git a/src/server/transcripts/transcripts.ts b/src/server/transcripts/transcripts.ts new file mode 100644 index 000000000..2f13d7fa4 --- /dev/null +++ b/src/server/transcripts/transcripts.ts @@ -0,0 +1,155 @@ +import { prisma_client as prisma } from '../../hooks.server'; +import fs, { readFile } from 'fs/promises'; +import path from 'path'; +import { error } from '@sveltejs/kit'; +import type { PrerecordedTranscriptionResponse, Utterance } from '@deepgram/sdk/dist/types'; +import type { Show } from '@prisma/client'; +import { detectSpeakerNames, getSlimUtterances } from './utils'; + +interface FrontMatterGuest { + name: string; + twitter: string; + url: string; + social: string[]; +} + +const transcripts_path = path.join(process.cwd(), 'src/assets/transcripts-flagged'); + +export async function save_transcript_to_db(show: Show, utterances: Utterance[]) { + // Create Slim Utterances for Speaker Detection + const slim_utterances = getSlimUtterances(utterances, show.number); + // Detect Speakers + const speakerMap = detectSpeakerNames(slim_utterances); + const who = speakerMap.get(0); + + // Create Utterances + const create_utterances = utterances.map((utterance) => { + const words = utterance.words?.map((word) => { + return { + start: word.start, + end: word.end, + punctuated_word: word.punctuated_word || word.word, + word: word.word, + speaker_confidence: word.confidence, + speaker: word.speaker || 99, + confidence: word.confidence + }; + }); + return { + start: utterance.start, + end: utterance.end, + transcript_value: utterance.transcript, + channel: utterance.channel, + confidence: utterance.confidence, + speaker: utterance.speaker || 99, + speakerName: speakerMap.get(utterance.speaker || 99), + words: { + create: words + } + }; + }); + + const start = Date.now(); + console.log(`About to Save to the DB`); + + // 1. Create the Transcript Record + const transcript = await prisma.transcript.create({ + data: { + show_number: show.number + } + }); + // console.log(`Created Transcript Record: ${transcript.id}`); + // 2. Create the Utterances + for (const { words, ...utterance } of create_utterances) { + const utteranceRecord = await prisma.transcriptUtterance.create({ + data: { + ...utterance, + transcriptId: transcript.id // Associate the Utterance with the Transcript + } + }); + // console.log(`Created Utterance Record: ${utteranceRecord.id}`); + // 3. Create the Words + const wordIds = await prisma.transcriptUtteranceWord.createMany({ + data: words.create.map((word) => { + return { + ...word, + // Associate the Word with the Utterance + transcriptUtteranceId: utteranceRecord.id + }; + }) + }); + // console.log(`Created ${wordIds.count} Word Records for Utterance ${utteranceRecord.id}`); + } + + return transcript; + + // // Loop over each utterance and create it + // for (const utterance of create_utterances) { + // console.log('Create Word REcords'); + // const wordIds = await prisma.transcriptUtteranceWord.createMany({ + // data: [ + // { tra} + // ] + // }); + // console.log('Word Ids: ', wordIds); + // } + + // const create = prisma.transcript.create({ + // data: { + // show_number: show.number, + // utterances: { + // create: create_utterances + // } + // } + // }); +} + +// Import Transcripts from JSON file - used for the initial import +export async function import_transcripts() { + try { + const files = await fs.readdir(transcripts_path); + // Filter only .md files + const transcriptFiles = files.filter((file) => file.endsWith('.json')); + // Loop over each one and import + const transcript_promises = transcriptFiles.map(async (file) => { + console.log(`Importing ${file}`); + const transcript: PrerecordedTranscriptionResponse = JSON.parse( + await readFile(path.join(transcripts_path, file), 'utf-8') + ); + const show_number = parseInt(file.split(' - ')[0]); + // Check if there is already a transcript for this show + const existing_transcript = await prisma.transcript.findUnique({ where: { show_number } }); + if (existing_transcript) { + // console.log('Transcript already exists, skipping'); + return; + } + // Find the show this transcript belongs to + const show = await prisma.show.findUnique({ where: { number: show_number } }); + if (!show) { + console.log('No associated show found'); + return; + } + if (!transcript.results?.utterances) { + console.log('No utterances found'); + return; + } + // Save to utterances to DB + console.log( + `Saving ${transcript.results?.utterances.length} utterances to DB for show ${show.number}` + ); + await save_transcript_to_db(show, transcript.results?.utterances); + }); + const results = await Promise.allSettled(transcript_promises); + const success = results.filter((promise) => promise.status === 'fulfilled'); + + return { + message: `Transcripts Import finished: ${success.length} out of ${transcript_promises.length} successfull` + }; + } catch (err) { + if (typeof err === 'string') throw error(500, err); + if (err instanceof Error) { + console.error('❌ Transcript Import Error:', err.message); + throw error(500, `Error Importing Transcript: ${err.message}`); + } + } +} diff --git a/src/server/transcripts/types.ts b/src/server/transcripts/types.ts new file mode 100644 index 000000000..7840921b8 --- /dev/null +++ b/src/server/transcripts/types.ts @@ -0,0 +1,27 @@ +import type { Prisma } from '@prisma/client'; + +export type SlimUtterance = { + speaker?: string; + speakerId: number; + transcript: string; + condensedTranscript?: string; + start: number; + end: number; + utteranceIndex: number; + showNumber: number; +}; + +export type TranscribedShow = { + name: string; + number: number; + utterances: SlimUtterance[]; +}; + +export type SpeakerMap = Map; + +// Slim Utterance joins utterances together if a speaker is the same making it easier to read as well as detect speakers names. We can run this on already saved utterances, or on utterances that have just been fetched from Deepgram +export type PrismaUtterance = Prisma.TranscriptUtteranceGetPayload<{ + include: { + transcript: true; + }; +}>; diff --git a/src/server/transcripts/utils.ts b/src/server/transcripts/utils.ts new file mode 100644 index 000000000..597119012 --- /dev/null +++ b/src/server/transcripts/utils.ts @@ -0,0 +1,158 @@ +// TODO remove this ts-nocheck. I've added this until this is more complete or confirmed to be complete +import type { Utterance } from '@deepgram/sdk/dist/types/utterance'; +import type { PrismaUtterance, SlimUtterance, SpeakerMap } from './types'; + +export function getSlimUtterances( + utterances: (PrismaUtterance | Utterance)[], + showNumber: number, + groupForPunctuation = true +): SlimUtterance[] { + const start: SlimUtterance[] = []; + const slim = utterances.reduce((acc, utterance) => { + const { speaker, start, end } = utterance; + const transcript_value = + 'transcript_value' in utterance ? utterance.transcript_value : utterance.transcript; + const lastUtterance = acc[acc.length - 1]; + + // If its the same speaker as the last one. Tack it onto that last one + const last_speaker_is_current_speaker = lastUtterance?.speakerId === speaker; + // If the last utterance ended in `.` or `?` or `!` + const last_utterance_ended_in_punctuation = + groupForPunctuation && + (lastUtterance?.transcript.endsWith('.') || + lastUtterance?.transcript.endsWith('!') || + lastUtterance?.transcript.endsWith('!')); + + if (last_speaker_is_current_speaker && !last_utterance_ended_in_punctuation) { + lastUtterance.transcript += ` ${transcript_value}`; + lastUtterance.end = end; + return acc; + } + // Otherwise create a new item in the utterance array + const slimUtterance: Partial = { + speakerId: speaker as number, // we always have a speaker id + transcript: transcript_value, + start, + end, + showNumber + }; + return [...acc, slimUtterance]; + }, start); + const speakerNames = detectSpeakerNames(slim); + // Add speaker names and index to existing utterances + return slim.map((utterance, utteranceIndex: number) => { + const speakerName = speakerNames.get(utterance.speakerId); + return { + ...utterance, + utteranceIndex, + speaker: speakerName + }; + }); +} + +// Format time function, converts seconds into MM:SS or HH:MM:SS +export function formatTime(secs: number) { + const seconds = Math.round(secs); + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds - hours * 3600) / 60); + const remainingSeconds = seconds - hours * 3600 - minutes * 60; + const minutesString = minutes < 10 ? `0${minutes}` : `${minutes}`; + const secondsString = remainingSeconds < 10 ? `0${remainingSeconds}` : `${remainingSeconds}`; + if (hours > 0) { + const hoursString = hours < 10 ? `0${hours}` : `${hours}`; + return `${hoursString}:${minutesString}:${secondsString}`; + } + return `${minutesString}:${secondsString}`; +} + +function getSpeakerShortName(speaker: string | undefined) { + const shortForms = new Map([ + ['Scott Tolinski', 'Scott'], + ['Wes Bos', 'Wes'] + ]); + return shortForms.get(speaker) || speaker; +} + +export function formatAsTranscript(utterances: SlimUtterance[]) { + return utterances.reduce((acc, utterance) => { + // TODO: We might need to reinstate condensedTranscript here + const timestamp = formatTime(utterance.start); + return `${acc}\n${timestamp} ${getSpeakerShortName(utterance.speaker)}:\n${ + utterance.condensedTranscript || utterance.transcript + }\n`; + }, ''); +} + +/** + * @description Format the utterances for embedding - The goal here is to make it as small as possible so we can fit within the 8k token limit + */ +export function formatForEmbedding(utterances: SlimUtterance[]) { + return utterances.reduce((acc, utterance) => { + const { transcript, condensedTranscript } = utterance; + return `${acc}\n${condensedTranscript || transcript}`; + }, ''); +} + +// export function formatAsSTR(utterances: SlimUtterance[]) { +// // TODO +// } + +export function detectSpeakerNames(utterances: SlimUtterance[]): SpeakerMap { + // Logic: + // Scott always says "drop a review if you like this show" at the end of each podcast + // Wes wes Often says "the podcast with the tastiest" web development treats + // Wes and Scott often say "My name is Scott | Wes". Account for "West" currently + // Scott often says "I'm from Denver" + // Wes often says "I'm (a developer) from Canada" + // The announcer, "Growler", is always first, therefor Speaker 0 + // Any other speakers are guests and can be Labeled from the show notes + const sayings: [string | RegExp, string][] = [ + // Scott + ['purple cheese before meeting', 'Scott Tolinski'], + ['drop a review if you like this show', 'Scott Tolinski'], + ['My name is Scott', 'Scott Tolinski'], + [/^(I'm\s+)?(a\s+)?(developer\s+)?from\s+Denver$/, 'Scott Tolinski'], + // Wes + [/my dog eats food ?(?:on)? the moon/i, 'Wes Bos'], + ['welcome to syntax the podcast with the tastiest', 'Wes Bos'], + ['My name is Wes', 'Wes Bos'], + ['My name is West', 'Wes Bos'], + ['pretty stoked', 'Wes Bos'], + ['pretty nifty', 'Wes Bos'], + ['forward slash courses', 'Wes Bos'], + ['eats food', 'Wes Bos'], + [/^(I'm\s+)?(a\s+)?(developer\s+)?from\s+Canada$/i, 'Wes Bos'], + ['Mr. Scott Tolinski', 'Wes Bos'], + // Growler + ['Open wide dev', 'Announcer'], + ['to use human language', 'Announcer'], + ['Strap yourself in', 'Announcer'] + ]; + // First get a list of all speakers + const speakerNumbers = new Set(utterances.map((utt) => utt.speakerId)); + // console.log(`We have ${speakerNumbers.size} speakers`); + const speakers = new Map(); + for (const utterance of utterances) { + // If this speaker has already been identified, skip it + if (speakers.get(utterance.speakerId)) continue; + // Otherwise look for a match + for (const [saying, speaker] of sayings) { + // console.log('Checking', saying, speaker,); + const regex = typeof saying === 'string' ? new RegExp(saying, 'i') : saying; + if (regex.test(utterance.transcript)) { + // console.log(`Found ${speaker}!`, saying); + speakers.set(utterance.speakerId, speaker); + break; + } + } + } + // Todo Handle guests somehow + // For now set anyone else as a guest + for (const speaker of speakerNumbers) { + if (!speakers.get(speaker)) { + speakers.set(speaker, `Guest ${speaker}`); + } + } + + return speakers; +} diff --git a/src/state/debug.ts b/src/state/debug.ts new file mode 100644 index 000000000..80bd542b0 --- /dev/null +++ b/src/state/debug.ts @@ -0,0 +1,3 @@ +import { storable } from './storable'; + +export const debug_mode = storable(false); diff --git a/src/state/loading.ts b/src/state/loading.ts new file mode 100644 index 000000000..77ce145f1 --- /dev/null +++ b/src/state/loading.ts @@ -0,0 +1,36 @@ +import { writable } from 'svelte/store'; + +const newLoading = () => { + const { subscribe, update, set } = writable({ + status: 'IDLE', // IDLE, LOADING, NAVIGATING + message: '' + }); + + function setNavigate(isNavigating: boolean) { + update(() => { + return { + status: isNavigating ? 'NAVIGATING' : 'IDLE', + message: '' + }; + }); + } + + function setLoading(isLoading: boolean, message = '') { + update(() => { + return { + status: isLoading ? 'LOADING' : 'IDLE', + message: isLoading ? message : '' + }; + }); + } + + return { + subscribe, + update, + set, + setNavigate, + setLoading + }; +}; + +export const loading = newLoading(); diff --git a/src/state/player.ts b/src/state/player.ts new file mode 100644 index 000000000..1236566a7 --- /dev/null +++ b/src/state/player.ts @@ -0,0 +1,98 @@ +import type { Show } from '@prisma/client'; +import { writable } from 'svelte/store'; + +export interface Timestamp { + label: string; + time_stamp: number; + duration: number; + percentage: number; + startingPosition: number; + href: string; +} + +const new_player_state = () => { + const { subscribe, update, set } = writable<{ + status: 'HIDDEN' | 'ACTIVE' | 'EXPANDED'; + current_show: null | Show; + playing: boolean; + audio?: HTMLAudioElement; + currentTime: number; + }>({ + status: 'HIDDEN', + current_show: null, + playing: false, + audio: undefined, + currentTime: 0 + }); + + function play_show(show: Show) { + update((state) => { + state.status = 'ACTIVE'; + state.current_show = show; + if (state.audio) { + state.audio.pause(); + state.audio.src = show.url; + state.audio.crossOrigin = 'anonymous'; + + // Wait for the audio to be ready to play + state.audio.addEventListener('loadedmetadata', () => { + if (state.audio) { + state.audio.currentTime = 0; + state.audio.play(); + } + }); + } + + return state; + }); + } + + function update_time(href: string, show?: Show) { + const split_time_stamp = href.split('#t=').at(-1) || ''; + const time_stamp = split_time_stamp + .split(':') + .reverse() + .map(Number) + .map((num, i) => num * 60 ** i) + .reduce((acc, num) => acc + num, 0); + + if (show) { + update((state) => { + state.current_show = show; + state.status = 'ACTIVE'; + state.audio?.play(); + return state; + }); + } + + subscribe((state) => { + if (state.audio) state.audio.currentTime = time_stamp; + }); + } + + function toggle_expand() { + update((state) => { + state.status = state.status === 'ACTIVE' ? 'EXPANDED' : 'ACTIVE'; + return state; + }); + } + + function close() { + update((state) => { + state.status = 'HIDDEN'; + return state; + }); + } + + return { + subscribe, + update, + play_show, + toggle_expand, + close, + update_time, + set + }; +}; + +export const player = new_player_state(); diff --git a/src/state/search.ts b/src/state/search.ts new file mode 100644 index 000000000..e2fa58529 --- /dev/null +++ b/src/state/search.ts @@ -0,0 +1,7 @@ +import { persisted } from 'svelte-local-storage-store'; +import { writable } from 'svelte/store'; + +export const searching = writable(false); +export const overlay_open = writable(false); +export const search_query = writable(''); +export const search_recent = persisted('svelte:recent-searches', []); diff --git a/src/state/storable.ts b/src/state/storable.ts new file mode 100644 index 000000000..ba02f619a --- /dev/null +++ b/src/state/storable.ts @@ -0,0 +1,23 @@ +import { get, writable } from 'svelte/store'; + +export function storable(data: unknown) { + const store = writable(data); + const { subscribe, set } = store; + const isBrowser = typeof window !== 'undefined'; + + isBrowser && localStorage.storable && set(JSON.parse(localStorage.storable)); + + return { + subscribe, + set: (n: unknown) => { + isBrowser && (localStorage.storable = JSON.stringify(n)); + set(n); + }, + update: (cb: (_: unknown) => unknown) => { + const updatedStore = cb(get(store)); + + isBrowser && (localStorage.storable = JSON.stringify(updatedStore)); + set(updatedStore); + } + }; +} diff --git a/src/state/theme.ts b/src/state/theme.ts new file mode 100644 index 000000000..2c21c9b43 --- /dev/null +++ b/src/state/theme.ts @@ -0,0 +1,41 @@ +import { writable } from 'svelte/store'; +import Cookie from 'js-cookie'; + +const default_theme = Cookie.get('theme') || null; + +export const theme = writable(default_theme); + +const new_theme_maker = () => { + const { subscribe, update, set } = writable({ + status: 'CLOSED' + }); + + function open() { + update((theme) => { + return { ...theme, status: 'OPEN' }; + }); + } + + function close() { + update((theme) => { + return { ...theme, status: 'CLOSED' }; + }); + } + + function toggle() { + update((theme) => { + return { ...theme, status: status === 'CLOSED' ? 'OPEN' : 'CLOSED' }; + }); + } + + return { + subscribe, + update, + set, + close, + open, + toggle + }; +}; + +export const theme_maker = new_theme_maker(); diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 000000000..568dc69e7 --- /dev/null +++ b/src/styles/base.css @@ -0,0 +1,336 @@ +@layer base { + * { + box-sizing: border-box; + } + + html { + box-sizing: border-box; + } + + *, + *::before-, + *::after { + box-sizing: inherit; + } + + @font-face { + font-family: 'MDIO'; + src: + url('/fonts/MDIO-Regular.woff2') format('woff2'), + url('/fonts/MDIO-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + } + + @font-face { + font-family: 'MDIO'; + src: + url('/fonts/MDIO-Black.woff2') format('woff2'), + url('/fonts/MDIO-Black.woff') format('woff'); + font-weight: 900; /* Black */ + font-style: normal; + } + + @font-face { + font-family: 'MDIO'; + src: + url('/fonts/MDIO-Bold.woff2') format('woff2'), + url('/fonts/MDIO-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + } + + @font-face { + font-family: 'MDIO'; + src: + url('/fonts/MDIO-BoldItalic.woff2') format('woff2'), + url('/fonts/MDIO-BoldItalic.woff') format('woff'); + font-weight: bold; + font-style: italic; + } + + @font-face { + font-family: 'MDIO'; + src: + url('/fonts/MDIO-BlackItalic.woff2') format('woff2'), + url('/fonts/MDIO-BlackItalic.woff') format('woff'); + font-weight: 900; /* Black */ + font-style: italic; + } + + @font-face { + font-family: 'MDIO'; + src: + url('/fonts/MDIO-Medium.woff2') format('woff2'), + url('/fonts/MDIO-Medium.woff') format('woff'); + font-weight: 500; /* Medium */ + font-style: normal; + } + + @font-face { + font-family: 'MDIO'; + src: + url('/fonts/MDIO-MediumItalic.woff2') format('woff2'), + url('/fonts/MDIO-MediumItalic.woff') format('woff'); + font-weight: 500; /* Medium */ + font-style: italic; + } + + /* FYI haven'te installed this font yet, just trying it for fun with my installed version */ + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: 'MDIO'; + /* font-family: '💪'; */ + font-weight: 700; + letter-spacing: -0.04em; + line-height: 1.4; + margin-block: 0.2em; + mask-image: url('$assets/Grit Mask@2x.png'); + mask-image-repeat: repeat; + mask-size: 250px; + text-wrap: balance; + font-style: italic; + } + + h1, + .h1 { + font-size: var(--font-size-xxxl); + } + h2, + .h2 { + font-size: var(--font-size-xxl); + /* font-weight: 700; */ + } + h3, + .h3 { + font-size: var(--font-size-xl); + /* font-weight: 700; */ + } + h4, + .h4 { + font-size: var(--font-size-lg); + /* font-weight: 400; */ + } + h5, + .h5 { + font-size: var(--font-size-md); + } + + .h6, + h6, + p, + li { + font-size: var(--font-size-base); + } + + .spa-ran-wrap { + --color: var(--spa-ran-wrap-bg, transparent); + --size: 2.33456789ex; + background-image: linear-gradient( + 180deg, + var(--color) 0%, + var(--color) 50%, + transparent 50%, + transparent 100% + ); + background-size: auto var(--size); + background-position: 10px calc(var(--size) / 4); + } + + /* Show Notes Typography - coming from markdown so it must be global */ + .show-notes { + h2, + h3 { + font-size: var(--font-size-lg); + } + ul { + padding-left: 20px; + } + } + + html { + font-family: 'MDIO'; + } + + body { + padding: 0; + margin: 0; + background: var(--black); + } + + a, + .a { + color: var(--link-fg, var(--fg)); + text-decoration: none; + } + + a:hover { + cursor: pointer; + } + + :is(p, li) a, + .a { + color: var(--color-sheet); + text-decoration: underline; + text-decoration-color: var(--primary); + text-decoration-thickness: 1.5px; + } + + p { + line-height: 1.7; + } + ul { + @media (--below_med) { + padding: 0; + } + } + + li { + line-height: 2.2; + list-style-type: circle; + } + + ol li { + list-style-type: decimal; + } + + a[href^='#t='] { + background: var(--bg-1); + padding: 4px 6px; + border-bottom: none; + text-decoration: none; + color: var(--color-2); + font-weight: normal; + border-radius: 4px; + position: relative; + font-size: var(--font-size-sm); + font-weight: 900; + @media (--above_med) { + left: -17px; + } + } + + [popover] { + position: fixed; + z-index: 2147483647; + inset: 0; + padding: 0.25em; + width: fit-content; + height: fit-content; + border-width: initial; + border-color: initial; + border-image: initial; + border-style: solid; + background-color: canvas; + color: canvastext; + overflow: auto; + margin: auto; + } + + /* stylelint-disable selector-class-pattern */ + [popover]:not(.\:popover-open) { + display: none; + } + + [popover]:is(dialog[open]) { + display: revert; + } + + [anchor].\:popover-open { + inset: auto; + } + + /* This older `:open` pseudo selector is deprecated and support will be removed +in a later release. */ + @supports selector([popover]:open) { + [popover]:not(.\:popover-open, dialog[open]) { + display: revert; + } + + /* stylelint-disable selector-pseudo-class-no-unknown */ + [anchor]:is(:open) { + inset: auto; + } + /* stylelint-enable selector-pseudo-class-no-unknown */ + } + + @supports selector([popover]:popover-open) { + [popover]:not(.\:popover-open, dialog[open]) { + display: revert; + } + + /* stylelint-disable selector-pseudo-class-no-unknown */ + [anchor]:is(:popover-open) { + inset: auto; + } + /* stylelint-enable selector-pseudo-class-no-unknown */ + } + /* stylelint-enable selector-class-pattern */ + + @supports not (background-color: canvas) { + [popover] { + background-color: white; + color: black; + } + } + + @supports (width: -moz-fit-content) { + [popover] { + /* stylelint-disable value-no-vendor-prefix */ + width: -moz-fit-content; + height: -moz-fit-content; + /* stylelint-enable value-no-vendor-prefix */ + } + } + + @supports not (inset: 0) { + [popover] { + /* stylelint-disable declaration-block-no-redundant-longhand-properties */ + top: 0; + left: 0; + right: 0; + bottom: 0; + /* stylelint-enable declaration-block-no-redundant-longhand-properties */ + } + } +} + +/* Popover */ + +/* All External Links */ +a[href^='http']:not(.social-icon, .button, .icon, .naked):after, +a[href^='https']:not(.social-icon, .button, .icon, .naked):after { + content: '↗'; + margin-left: 4px; + font-size: 12px; +} + +/* Selection */ +::selection { + background: var(--primary); + color: var(--dark); +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + border: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; +} + +/* Scrollbars */ +html { + --track: var(--black); + --thumb: var(--primary); + scrollbar-color: var(--thumb) var(--track); + scrollbar-width: thin; +} diff --git a/src/styles/buttons.css b/src/styles/buttons.css new file mode 100644 index 000000000..30e490f39 --- /dev/null +++ b/src/styles/buttons.css @@ -0,0 +1,111 @@ +@layer base { + .theme-wrapper { + --button-bg: var(--primary); + --button-color: var(--yellow-8); + --button-border-size: 1.5px; + } + + button, + a.button { + white-space: nowrap; + cursor: pointer; + text-decoration: none; + border: none; + font-family: var(--body-font-familly); + font-weight: 600; + padding: 6px 15px; + font-size: var(--body-font-size); + border-radius: var(--brad); + background: var(--button-bg); + width: auto; + color: var(--button-color); + display: inline-flex; + justify-content: center; + align-items: center; + gap: 10px; + box-shadow: inset 0 0 0 var(--button-border-size) oklch(var(--blacklch) / 0.2); + transition: background 0.2s ease-in-out; + @media (--below_large) { + font-size: var(--font-size-sm); + } + } + + :is(button, .button).ghost { + --button-bg: transparent; + --button-color: var(--primary); + box-shadow: inset 0 0 0 var(--button-border-size) var(--primary); + &:hover { + --button-bg: var(--primary); + --button-color: var(--black); + } + } + + :is(button, .button).subtle { + --button-bg: var(--bg-1); + --button-color: var(--fg); + font-weight: 400; + box-shadow: inset 0 0 0 1px var(--subtle); + } + + :is(button, .button).warning { + --button-bg: var(--red); + --button-color: var(--white); + box-shadow: inset 0 0 0 var(--button-border-size) oklch(var(--blacklch) / 0.2); + } + + :is(button, .button).big { + font-size: var(--font-size-md); + padding: 10px 20px; + box-shadow: inset 0 0 0 var(--button-border-size) oklch(var(--blacklch) / 0.2); + } + + :is(button, .button).play { + --button-bg: linear-gradient(to right, var(--success), var(--accent)); + --button-color: var(--black-8); + font-size: var(--font-size-md); + padding: 10px 20px; + box-shadow: inset 0 0 0 var(--button-border-size) oklch(var(--blacklch) / 0.2); + transition: background-size 1s ease-in-out; + background-size: 100%; + &:hover { + background-size: 200%; + } + } + + :is(button, .button).close { + --button-bg: var(--red); + --button-color: var(--white); + --size: 30px; + font-size: var(--font-size-md); + width: var(--size); + height: var(--size); + padding: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--size); + box-shadow: inset 0 0 0 var(--button-border-size) oklch(var(--blacklch) / 0.2); + transition: background-size 1s ease-in-out; + font-weight: 100; + } + + button.button-reset { + background: transparent; + box-shadow: none; + } + button.button-nunya { + background: none; + appearance: none; + box-shadow: none; + padding: 0; + color: inherit; + } + + .play-button { + background: linear-gradient(to right, var(--black-2), var(--black-1)); + border-radius: 50%; + border-width: 1px; + padding: 10px; + box-shadow: inset 0 0 0 var(--button-border-size) oklch(var(--blacklch) / 0.2); + } +} diff --git a/src/styles/forms.css b/src/styles/forms.css new file mode 100644 index 000000000..2793cc24a --- /dev/null +++ b/src/styles/forms.css @@ -0,0 +1,2 @@ +@layer base { +} diff --git a/src/styles/layout.css b/src/styles/layout.css new file mode 100644 index 000000000..45bf3ea07 --- /dev/null +++ b/src/styles/layout.css @@ -0,0 +1,109 @@ +@layer layout { + .layout { + display: grid; + grid-template-columns: [start] 5px [content] auto [content] 5px [end]; + + @media (--above_med) { + column-gap: 10px; + grid-template-columns: + [start l-margin] 10px [l-margin content main] minmax(0, 812px) [main sidebar] minmax( + 0, + 322px + ) + [sidebar content-end r-margin] 10px [r-margin end]; + } + + @media (--above_xlarge) { + column-gap: 48px; + display: grid; + grid-template-columns: + [start l-margin] minmax(144px, auto) [l-margin content main] minmax(0, 812px) [main sidebar] minmax( + 0, + 322px + ) + [sidebar content-end r-margin] minmax(144px, auto) [r-margin end]; + } + /* 812 */ + /* 322 */ + + > * { + grid-column: content / content; + } + + .full { + width: 100%; + grid-column: start / end; + } + + .content { + width: 100%; + grid-column: content / content; + } + + .l-margin { + width: 100%; + grid-column: l-margin / l-margin; + } + + .r-margin { + width: 100%; + grid-column: r-margin / r-margin; + } + .sidebar { + width: 100%; + grid-column: sidebar / sidebar; + } + .main { + width: 100%; + grid-column: main / main; + } + } + + .grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); + grid-gap: 20px; + } + + .zone { + color: var(--fg); + background: var(--bg) var(--bgGrit); + background-size: 250px; + border-radius: var(--radius, 0); + --subtle: color-mix(in lch, var(--fg), var(--bg) 90%); + } + + .sticky { + position: sticky; + top: 0; + } + + .flex { + display: flex; + } + + /* END @layer layout */ +} + +/* Debug -> Ignore */ + +.debug :is(.layout, .grid) { + outline: solid 1px red; + &:after { + content: ''; + background: red; + position: absolute; + color: white; + } +} + +.debug .layout { + &:after { + content: '.layout'; + } +} +.debug .grid { + &:after { + content: '.grid'; + } +} diff --git a/src/styles/themes/README.md b/src/styles/themes/README.md new file mode 100644 index 000000000..d76a7a745 --- /dev/null +++ b/src/styles/themes/README.md @@ -0,0 +1,5 @@ +### Syntax Themes + +All css files in this directory will be loaded as themes for users to select. If you would like to submit your own theme, please submit a PR with a screenshot attached. + +More docs on tokens and how to develop themes incoming. Ultimately you have full control of the css here, so go nuts. diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css new file mode 100644 index 000000000..c9ff83cb5 --- /dev/null +++ b/src/styles/themes/dark.css @@ -0,0 +1,61 @@ +/* System theme */ +.theme-system { + --bg-sheet: var(--white); + --bg: var(--black); + --fg: var(--white); + --fg-sheet: var(--black); + --primary: var(--yellow); + --accent: var(--teal); + --warning: var(--red); + --bgGrit: var(--bgGritLight); + @media (prefers-color-scheme: dark) { + --fg-sheet: var(--white); + --bg-sheet: var(--black); + --primary: var(--yellow); + --accent: var(--teal); + --subtle-accent: var(--yellow-1); + --warning: var(--red); + --bg-2: var(--black); + --bg-1: var(--black); + --bg: var(--black); + --fg-2: var(--black-3); + --border: solid var(--border-size) var(--fg-sheet); + + --spa-ran-wrap-bg: var(--black); + --bgGrit: var(--bgGritDark); + .border-on-dark { + border: var(--border); + } + } +} +/* Same as prefers color scheme dark */ +.theme-dark { + --fg-sheet: var(--white); + --bg-sheet: var(--black); + --primary: var(--yellow); + --accent: var(--teal); + --subtle-accent: var(--yellow-1); + --warning: var(--red); + --bg-2: var(--black-8); + --bg-1: var(--black); + --bg: var(--black); + --fg-2: var(--black-3); + --border-color: var(--bg-sheet); + --border: solid var(--border-size) var(--fg-sheet); + --spa-ran-wrap-bg: var(--black); + --bgGrit: var(--bgGritDark); + .border-on-dark { + border: var(--border); + } +} + +.theme-light { + --bg-sheet: var(--white); + --bg: var(--black); + --fg: var(--white); + --fg-sheet: var(--black); + --primary: var(--yellow); + --accent: var(--teal); + --warning: var(--red); + --bgGrit: var(--bgGritLight); +} diff --git a/src/styles/themes/level-up.css b/src/styles/themes/level-up.css new file mode 100644 index 000000000..d6b95e552 --- /dev/null +++ b/src/styles/themes/level-up.css @@ -0,0 +1,13 @@ +/* Level Up Theme */ +.theme-level-up { + background-image: none; + --fg-sheet: #ebebe3; + --bg: #191324; + --bg-1: #191324; + --bg-2: var(--black-6); + --bg-sheet: #191324; + --primary: #82d8d8; + --border-color: #82d8d8; + --border: solid 4px var(--border-color); + --subtle-accent: var(--purple-3); +} diff --git a/src/styles/themes/sentry.css b/src/styles/themes/sentry.css new file mode 100644 index 000000000..4c58af6f2 --- /dev/null +++ b/src/styles/themes/sentry.css @@ -0,0 +1,9 @@ +.theme-sentry { + --bg-sheet: var(--white); + --bg: #2d1130; + --fg: var(--white); + --fg-sheet: var(--black); + --bgGrit: var(--bgGritLight); + --primary: #d15f7c; + --accent: #f9dc65; +} diff --git a/src/styles/utilities.css b/src/styles/utilities.css new file mode 100644 index 000000000..a342e7b69 --- /dev/null +++ b/src/styles/utilities.css @@ -0,0 +1,86 @@ +@layer utilities { + .readable { + max-width: 900px; + width: 100%; + } + .small { + font-size: var(--font-size-sm); + } + .center { + margin: 0 auto; + } + .text-xs { + font-size: var(--font-size-xs); + } + .text-sm { + font-size: var(--font-size-sm); + } + .text-base { + font-size: var(--font-size-base); + } + .text-md { + font-size: var(--font-size-md); + } + .text-lg { + font-size: var(--font-size-lg); + } + .text-xl { + font-size: var(--font-size-xl); + } + .text-xxl { + font-size: var(--font-size-xxl); + } + .text-xxxl { + font-size: var(--font-size-xxxl); + } + .text-left { + text-align: left; + } + .text-center { + text-align: center; + } + .text-right { + text-align: right; + } + .text-justify { + text-align: justify; + } + .text-start { + text-align: start; + } + .text-end { + text-align: end; + } + + .lines { + display: grid; + grid-template-columns: 1fr auto 1fr; + grid-gap: 1rem; + align-items: center; + &:before, + &:after { + content: ''; + display: block; + width: 100%; + height: clamp(1px, 0.1ch, 2px); + background-color: var(--line-color, currentcolor); + } + } + + .grit { + mask-image: url('$assets/Grit Mask@2x.png'); + mask-image-repeat: repeat; + mask-size: 250px; + } + .grid-center { + display: grid; + place-items: center; + } + + .hidden-mobile { + display: none; + @media (--below_med) { + display: initial; + } + } +} diff --git a/src/styles/variables.css b/src/styles/variables.css new file mode 100644 index 000000000..6b7f186fa --- /dev/null +++ b/src/styles/variables.css @@ -0,0 +1,157 @@ +:root { + /* 🧑‍🚒 💩 */ + + @custom-media --below_small (width < 400px); + @custom-media --below_med (width < 700px); + @custom-media --below_large (width < 900px); + @custom-media --below_xlarge (width < 1200px); + + @custom-media --above_small (width >400px); + @custom-media --above_med (width > 700px); + @custom-media --above_large (width > 900px); + @custom-media --above_xlarge (width > 1200px); + + /* Color System */ + --yellow-hue: 81.72; + --yellow-1: oklch(99% 0.02 var(--yellow-hue)); + --yellow-2: oklch(95% 0.05 var(--yellow-hue)); + --yellow-3: oklch(83.77% 0.148 var(--yellow-hue)); + --yellow-4: oklch(72% 0.148 var(--yellow-hue)); + --yellow-5: oklch(67% 0.148 var(--yellow-hue)); + --yellow-6: oklch(50% 0.148 var(--yellow-hue)); + --yellow-7: oklch(35% 0.148 var(--yellow-hue)); + --yellow-8: oklch(25% 0.148 var(--yellow-hue)); + --yellow-9: oklch(18% 0.1 var(--yellow-hue)); + --yellow-10: oklch(15% 0.1 var(--yellow-hue)); + --yellow: var(--yellow-3); + + /* --teal: #03fff3; */ + --teal-hue: 188.71; + --teal-1: oklch(99% 0.05 188.71); + --teal-2: oklch(95% 0.08 188.71); + --teal-3: oklch(90.16% 0.173 188.71); + --teal-4: oklch(80% 0.173 188.71); + --teal-5: oklch(70% 0.173 188.71); + --teal-6: oklch(50% 0.173 188.71); + --teal-7: oklch(35% 0.173 188.71); + --teal-8: oklch(25% 0.173 188.71); + --teal-9: oklch(18% 0.173 188.71); + --teal-10: oklch(15% 0.173 188.71); + --teal: var(--teal-3); + + /* --green: #cdff5c; */ + --green-hue: 124.67; + --green-1: oklch(99% 0.05 var(--green-hue)); + --green-2: oklch(95% 0.1 var(--green-hue)); + --green-3: oklch(92.06% 0.269 var(--green-hue)); + --green-4: oklch(80% 0.269 var(--green-hue)); + --green-5: oklch(70% 0.269 var(--green-hue)); + --green-6: oklch(50% 0.269 var(--green-hue)); + --green-7: oklch(35% 0.269 var(--green-hue)); + --green-8: oklch(25% 0.269 var(--green-hue)); + --green-9: oklch(18% 0.269 var(--green-hue)); + --green-10: oklch(15% 0.269 var(--green-hue)); + --green: var(--green-3); + + /* --red: #eb5757; */ + --red-hue: 23.68; + --red-1: oklch(99% 0.05 var(--red-hue)); + --red-2: oklch(90% 0.1 var(--red-hue)); + --red-3: oklch(83% 0.221 var(--red-hue)); + --red-4: oklch(72% 0.221 var(--red-hue)); + --red-5: oklch(67% 0.221 var(--red-hue)); + --red-6: oklch(50% 0.221 var(--red-hue)); + --red-7: oklch(35% 0.221 var(--red-hue)); + --red-8: oklch(25% 0.221 var(--red-hue)); + --red-9: oklch(13% 0.221 var(--red-hue)); + --red-10: oklch(5% 0.221 var(--red-hue)); + --red: var(--red-5); + + --black-hue: none; + --blacklch: 0% none var(--black-hue); + --black-1: oklch(97% 0 var(--black-hue)); + --black-2: oklch(90% 0 var(--black-hue)); + --black-3: oklch(83% 0 var(--black-hue)); + --black-4: oklch(72% 0 var(--black-hue)); + --black-5: oklch(67% 0 var(--black-hue)); + --black-6: oklch(50% 0 var(--black-hue)); + --black-7: oklch(35% 0 var(--black-hue)); + --black-8: oklch(23.08% 0 var(--black-hue)); + --black-9: oklch(13% 0 var(--black-hue)); + --black-10: oklch(var(--blacklch)); + --black: var(--black-10); + --blackish: var(--black-8); + --white: oklch(100% none none); + + /* --purple: #362d59; */ + --purple-hue: 291.04; + --purple-1: oklch(99% 0.076 var(--purple-hue)); + --purple-2: oklch(90% 0.05 var(--purple-hue)); + --purple-3: oklch(83% 0.076 var(--purple-hue)); + --purple-4: oklch(72% 0.1 var(--purple-hue)); + --purple-5: oklch(67% 0.1 var(--purple-hue)); + --purple-6: oklch(50% 0.1 var(--purple-hue)); + --purple-7: oklch(32.98% 0.076 var(--purple-hue)); + --purple-8: oklch(25% 0.076 var(--purple-hue)); + --purple-9: oklch(20% 0.076 var(--purple-hue)); + --purple-10: oklch(10% 0.076 var(--purple-hue)); + --purple: var(--purple-7); + + /* Typography */ + --body-font-family: 'MDIO', 'Operator Mono', Consolas, Menlo, Monaco, 'Courier New', monospace; + --heading-font-family: 'MDIO', 'Operator Mono', Consolas, Menlo, Monaco, 'Courier New', monospace; + --font-size-xs: clamp(0.6rem, 0.17vw + 0.76rem, 0.7rem); + --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem); + --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); + --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem); + --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem); + --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem); + --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3rem); + --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem); + + /* Shadow */ + --shadow-strength: 10%; + --shadow-color: 220 40% 2%; + --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), + 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), + 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), + 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)), + 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); + + --default_padding: 1rem; + + /* THEME COLORS */ + /* Light Theme as the default */ + /* Backgrounds */ + + --bg: var(--black); + --bg-1: var(--black-1); + --bg-2: var(--black-2); + --bg-sheet: var(--white); + + /* Foreground */ + --fg: var(--white); + --fg-1: var(--black-8); + --fg-2: var(--black-9); + --fg-sheet: var(--black); + + /* Interface Color */ + --primary: var(--yellow); + --accent: var(--teal); + --subtle-accent: var(--purple); + --warning: var(--red); + --success: var(--green); + --line: var(--black-2); + + /* Borders */ + --brad: 5px; + --border-size: 1.5px; + --border: solid var(--border-size) var(--fg-sheet); + + /* ?? */ + --dark: var(--black); + --bgGritLight: url('/svg/grit.svg?light&count=50&w=1000&h=2000'); + --bgGritDark: url('/svg/grit.svg?dark&count=50&w=1000&h=2000'); +} diff --git a/src/utilities/capitalize.ts b/src/utilities/capitalize.ts new file mode 100644 index 000000000..f81a0386e --- /dev/null +++ b/src/utilities/capitalize.ts @@ -0,0 +1,3 @@ +export function capitalize(s: string) { + return s[0].toUpperCase() + s.slice(1); +} diff --git a/src/utilities/file_utilities/exists.ts b/src/utilities/file_utilities/exists.ts new file mode 100644 index 000000000..73c452536 --- /dev/null +++ b/src/utilities/file_utilities/exists.ts @@ -0,0 +1,10 @@ +import { access } from 'fs/promises'; + +export async function exists(path: string) { + try { + await access(path); + return true; + } catch (err) { + return false; + } +} diff --git a/src/utilities/file_utilities/get_file_hash.ts b/src/utilities/file_utilities/get_file_hash.ts new file mode 100644 index 000000000..dbba1e321 --- /dev/null +++ b/src/utilities/file_utilities/get_file_hash.ts @@ -0,0 +1,15 @@ +import { createHash } from 'crypto'; +import { createReadStream } from 'fs'; +import { promisify } from 'util'; +import stream from 'stream'; + +const pipeline = promisify(stream.pipeline); + +export async function get_file_hash(file_path: string) { + const hash = createHash('sha256'); + const readStream = createReadStream(file_path); + + await pipeline(readStream, hash); + + return hash.digest('hex'); +} diff --git a/src/utilities/file_utilities/get_hash_from_content.ts b/src/utilities/file_utilities/get_hash_from_content.ts new file mode 100644 index 000000000..b7ff502db --- /dev/null +++ b/src/utilities/file_utilities/get_hash_from_content.ts @@ -0,0 +1,5 @@ +import { createHash } from 'crypto'; + +export async function get_hash_from_content(content: string) { + return createHash('sha256').update(content).digest('hex'); +} diff --git a/src/utilities/file_utilities/get_md_from_folder.ts b/src/utilities/file_utilities/get_md_from_folder.ts new file mode 100644 index 000000000..0c6a706fd --- /dev/null +++ b/src/utilities/file_utilities/get_md_from_folder.ts @@ -0,0 +1,4 @@ +export async function import_all_md_files_from_glob() { + const context = import.meta.glob('/shows/**/*.md', { as: 'raw', eager: true }); + return context; +} diff --git a/src/utilities/format_show_type.ts b/src/utilities/format_show_type.ts new file mode 100644 index 000000000..0b681e591 --- /dev/null +++ b/src/utilities/format_show_type.ts @@ -0,0 +1,7 @@ +export function format_show_type(show_date: Date) { + // Check if the show is released on monday + if (show_date.getDay() === 1) return 'Hasty'; + if (show_date.getDay() === 3) return 'Tasty'; + if (show_date.getDay() === 5) return 'Supper Club'; + return 'Special'; +} diff --git a/src/utilities/format_time.ts b/src/utilities/format_time.ts new file mode 100644 index 000000000..6e359e824 --- /dev/null +++ b/src/utilities/format_time.ts @@ -0,0 +1,29 @@ +export default function format_time(time: number) { + // Hours, minutes and seconds + const hrs = Math.floor(~~(time / 3600)); // eslint-disable-line + const mins = Math.floor(~~((time % 3600) / 60)); // eslint-disable-line + const secs = Math.floor(time % 60); + + // Output like "1:01" or "4:03:59" or "123:03:59" + let ret = ''; + + if (hrs > 0) { + ret += `${hrs}:${mins < 10 ? '0' : ''}`; + } + + ret += `${mins}:${secs < 10 ? '0' : ''}`; + ret += `${secs}`; + return ret; +} + +export function tsToS(timestamp: string): number { + const parts = timestamp.split(':').map(parseFloat); + let [hours, minutes, seconds] = parts; + if (parts.length === 2) { + seconds = minutes; + minutes = hours; + hours = 0; + } + + return hours * 60 * 60 + minutes * 60 + seconds; +} diff --git a/src/utilities/left_pad.ts b/src/utilities/left_pad.ts new file mode 100644 index 000000000..5ba7a5568 --- /dev/null +++ b/src/utilities/left_pad.ts @@ -0,0 +1,3 @@ +export function left_pad(num: number) { + return String(num).padStart(5, '0'); +} diff --git a/src/utilities/replace_special_chars.ts b/src/utilities/replace_special_chars.ts new file mode 100644 index 000000000..70f2dee20 --- /dev/null +++ b/src/utilities/replace_special_chars.ts @@ -0,0 +1,13 @@ +export function replace_special_chars(str: string) { + return str.replace(/[&<>"']/g, (match) => { + return ( + { + '&': '&', + '<': '<', + '>': '>', + '"': '"', + "'": ''' + }[match] || '' + ); + }); +} diff --git a/src/utilities/slug.ts b/src/utilities/slug.ts new file mode 100644 index 000000000..953b13c71 --- /dev/null +++ b/src/utilities/slug.ts @@ -0,0 +1,3 @@ +export default function get_show_path(show: { number: number; slug: string }) { + return `/show/${show.number}/${show.slug}`; +} diff --git a/static/android-chrome-192x192.png b/static/android-chrome-192x192.png new file mode 100644 index 000000000..83b6d5a78 Binary files /dev/null and b/static/android-chrome-192x192.png differ diff --git a/static/android-chrome-512x512.png b/static/android-chrome-512x512.png new file mode 100644 index 000000000..0c9ea912b Binary files /dev/null and b/static/android-chrome-512x512.png differ diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png new file mode 100644 index 000000000..3c99b2ac1 Binary files /dev/null and b/static/apple-touch-icon.png differ diff --git a/static/black_grunge.png b/static/black_grunge.png new file mode 100644 index 000000000..675a233b1 Binary files /dev/null and b/static/black_grunge.png differ diff --git a/static/favicon-16x16.png b/static/favicon-16x16.png new file mode 100644 index 000000000..fc7e9bee2 Binary files /dev/null and b/static/favicon-16x16.png differ diff --git a/static/favicon-32x32.png b/static/favicon-32x32.png new file mode 100644 index 000000000..a96797c68 Binary files /dev/null and b/static/favicon-32x32.png differ diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 000000000..fad27f85f Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/fonts/MDIO-Black.woff b/static/fonts/MDIO-Black.woff new file mode 100644 index 000000000..0437dfbf0 Binary files /dev/null and b/static/fonts/MDIO-Black.woff differ diff --git a/static/fonts/MDIO-Black.woff2 b/static/fonts/MDIO-Black.woff2 new file mode 100644 index 000000000..007496a81 Binary files /dev/null and b/static/fonts/MDIO-Black.woff2 differ diff --git a/static/fonts/MDIO-BlackItalic.woff b/static/fonts/MDIO-BlackItalic.woff new file mode 100644 index 000000000..440fef388 Binary files /dev/null and b/static/fonts/MDIO-BlackItalic.woff differ diff --git a/static/fonts/MDIO-BlackItalic.woff2 b/static/fonts/MDIO-BlackItalic.woff2 new file mode 100644 index 000000000..0fe0095e8 Binary files /dev/null and b/static/fonts/MDIO-BlackItalic.woff2 differ diff --git a/static/fonts/MDIO-Bold.woff b/static/fonts/MDIO-Bold.woff new file mode 100644 index 000000000..3723d32d7 Binary files /dev/null and b/static/fonts/MDIO-Bold.woff differ diff --git a/static/fonts/MDIO-Bold.woff2 b/static/fonts/MDIO-Bold.woff2 new file mode 100644 index 000000000..7dd514479 Binary files /dev/null and b/static/fonts/MDIO-Bold.woff2 differ diff --git a/static/fonts/MDIO-BoldItalic.woff b/static/fonts/MDIO-BoldItalic.woff new file mode 100644 index 000000000..970060dc0 Binary files /dev/null and b/static/fonts/MDIO-BoldItalic.woff differ diff --git a/static/fonts/MDIO-BoldItalic.woff2 b/static/fonts/MDIO-BoldItalic.woff2 new file mode 100644 index 000000000..6b46038e1 Binary files /dev/null and b/static/fonts/MDIO-BoldItalic.woff2 differ diff --git a/static/fonts/MDIO-Italic.woff b/static/fonts/MDIO-Italic.woff new file mode 100644 index 000000000..75593feea Binary files /dev/null and b/static/fonts/MDIO-Italic.woff differ diff --git a/static/fonts/MDIO-Italic.woff2 b/static/fonts/MDIO-Italic.woff2 new file mode 100644 index 000000000..df03df586 Binary files /dev/null and b/static/fonts/MDIO-Italic.woff2 differ diff --git a/static/fonts/MDIO-Light.woff b/static/fonts/MDIO-Light.woff new file mode 100644 index 000000000..d4f5cdb43 Binary files /dev/null and b/static/fonts/MDIO-Light.woff differ diff --git a/static/fonts/MDIO-Light.woff2 b/static/fonts/MDIO-Light.woff2 new file mode 100644 index 000000000..5d99ab893 Binary files /dev/null and b/static/fonts/MDIO-Light.woff2 differ diff --git a/static/fonts/MDIO-LightItalic.woff b/static/fonts/MDIO-LightItalic.woff new file mode 100644 index 000000000..cca8a9a12 Binary files /dev/null and b/static/fonts/MDIO-LightItalic.woff differ diff --git a/static/fonts/MDIO-LightItalic.woff2 b/static/fonts/MDIO-LightItalic.woff2 new file mode 100644 index 000000000..c0f5096ef Binary files /dev/null and b/static/fonts/MDIO-LightItalic.woff2 differ diff --git a/static/fonts/MDIO-Medium.woff b/static/fonts/MDIO-Medium.woff new file mode 100644 index 000000000..697014d13 Binary files /dev/null and b/static/fonts/MDIO-Medium.woff differ diff --git a/static/fonts/MDIO-Medium.woff2 b/static/fonts/MDIO-Medium.woff2 new file mode 100644 index 000000000..a3db9ded4 Binary files /dev/null and b/static/fonts/MDIO-Medium.woff2 differ diff --git a/static/fonts/MDIO-MediumItalic.woff b/static/fonts/MDIO-MediumItalic.woff new file mode 100644 index 000000000..3e080f971 Binary files /dev/null and b/static/fonts/MDIO-MediumItalic.woff differ diff --git a/static/fonts/MDIO-MediumItalic.woff2 b/static/fonts/MDIO-MediumItalic.woff2 new file mode 100644 index 000000000..e28a42747 Binary files /dev/null and b/static/fonts/MDIO-MediumItalic.woff2 differ diff --git a/static/fonts/MDIO-Regular.woff b/static/fonts/MDIO-Regular.woff new file mode 100644 index 000000000..fdd8e2222 Binary files /dev/null and b/static/fonts/MDIO-Regular.woff differ diff --git a/static/fonts/MDIO-Regular.woff2 b/static/fonts/MDIO-Regular.woff2 new file mode 100644 index 000000000..0919377bf Binary files /dev/null and b/static/fonts/MDIO-Regular.woff2 differ diff --git a/static/fonts/MDIO-Semibold.woff b/static/fonts/MDIO-Semibold.woff new file mode 100644 index 000000000..fc581ca24 Binary files /dev/null and b/static/fonts/MDIO-Semibold.woff differ diff --git a/static/fonts/MDIO-Semibold.woff2 b/static/fonts/MDIO-Semibold.woff2 new file mode 100644 index 000000000..fabb34062 Binary files /dev/null and b/static/fonts/MDIO-Semibold.woff2 differ diff --git a/static/fonts/MDIO-SemiboldItalic.woff b/static/fonts/MDIO-SemiboldItalic.woff new file mode 100644 index 000000000..8a34f0002 Binary files /dev/null and b/static/fonts/MDIO-SemiboldItalic.woff differ diff --git a/static/fonts/MDIO-SemiboldItalic.woff2 b/static/fonts/MDIO-SemiboldItalic.woff2 new file mode 100644 index 000000000..6137b1554 Binary files /dev/null and b/static/fonts/MDIO-SemiboldItalic.woff2 differ diff --git a/static/fonts/MDIO-Thin.woff b/static/fonts/MDIO-Thin.woff new file mode 100644 index 000000000..66861a783 Binary files /dev/null and b/static/fonts/MDIO-Thin.woff differ diff --git a/static/fonts/MDIO-Thin.woff2 b/static/fonts/MDIO-Thin.woff2 new file mode 100644 index 000000000..893e2f61c Binary files /dev/null and b/static/fonts/MDIO-Thin.woff2 differ diff --git a/static/fonts/MDIO-ThinItalic.woff b/static/fonts/MDIO-ThinItalic.woff new file mode 100644 index 000000000..cf255c301 Binary files /dev/null and b/static/fonts/MDIO-ThinItalic.woff differ diff --git a/static/fonts/MDIO-ThinItalic.woff2 b/static/fonts/MDIO-ThinItalic.woff2 new file mode 100644 index 000000000..fc1694f9f Binary files /dev/null and b/static/fonts/MDIO-ThinItalic.woff2 differ diff --git a/static/fonts/MDIO-Ultra.woff b/static/fonts/MDIO-Ultra.woff new file mode 100644 index 000000000..41bcdf472 Binary files /dev/null and b/static/fonts/MDIO-Ultra.woff differ diff --git a/static/fonts/MDIO-Ultra.woff2 b/static/fonts/MDIO-Ultra.woff2 new file mode 100644 index 000000000..a9483fafd Binary files /dev/null and b/static/fonts/MDIO-Ultra.woff2 differ diff --git a/static/fonts/MDIO-UltraItalic.woff b/static/fonts/MDIO-UltraItalic.woff new file mode 100644 index 000000000..cf85c76a1 Binary files /dev/null and b/static/fonts/MDIO-UltraItalic.woff differ diff --git a/static/fonts/MDIO-UltraItalic.woff2 b/static/fonts/MDIO-UltraItalic.woff2 new file mode 100644 index 000000000..90cbd60cc Binary files /dev/null and b/static/fonts/MDIO-UltraItalic.woff2 differ diff --git a/static/fonts/MDIO-VF.woff b/static/fonts/MDIO-VF.woff new file mode 100644 index 000000000..e2d53783a Binary files /dev/null and b/static/fonts/MDIO-VF.woff differ diff --git a/static/fonts/MDIO-VF.woff2 b/static/fonts/MDIO-VF.woff2 new file mode 100644 index 000000000..7fea5cd4f Binary files /dev/null and b/static/fonts/MDIO-VF.woff2 differ diff --git a/public/static/icons/breaker.jpg b/static/icons/breaker.jpg similarity index 100% rename from public/static/icons/breaker.jpg rename to static/icons/breaker.jpg diff --git a/public/static/icons/google_podcasts.svg b/static/icons/google_podcasts.svg similarity index 100% rename from public/static/icons/google_podcasts.svg rename to static/icons/google_podcasts.svg diff --git a/public/static/icons/googleplay.png b/static/icons/googleplay.png similarity index 100% rename from public/static/icons/googleplay.png rename to static/icons/googleplay.png diff --git a/public/static/icons/itunes.jpg b/static/icons/itunes.jpg similarity index 100% rename from public/static/icons/itunes.jpg rename to static/icons/itunes.jpg diff --git a/public/static/icons/overcast.jpg b/static/icons/overcast.jpg similarity index 100% rename from public/static/icons/overcast.jpg rename to static/icons/overcast.jpg diff --git a/public/static/icons/pocketcasts.jpg b/static/icons/pocketcasts.jpg similarity index 100% rename from public/static/icons/pocketcasts.jpg rename to static/icons/pocketcasts.jpg diff --git a/public/static/icons/rss.jpg b/static/icons/rss.jpg similarity index 100% rename from public/static/icons/rss.jpg rename to static/icons/rss.jpg diff --git a/public/static/icons/rss.svg b/static/icons/rss.svg similarity index 100% rename from public/static/icons/rss.svg rename to static/icons/rss.svg diff --git a/public/static/icons/spotify.svg b/static/icons/spotify.svg similarity index 100% rename from public/static/icons/spotify.svg rename to static/icons/spotify.svg diff --git a/public/static/icons/stitcher.jpg b/static/icons/stitcher.jpg similarity index 100% rename from public/static/icons/stitcher.jpg rename to static/icons/stitcher.jpg diff --git a/static/popover.js b/static/popover.js new file mode 100644 index 000000000..d70a846be --- /dev/null +++ b/static/popover.js @@ -0,0 +1,532 @@ +// src/events.ts +var ToggleEvent = class extends Event { + oldState; + newState; + constructor(type, { oldState = '', newState = '', ...init } = {}) { + super(type, init); + this.oldState = String(oldState || ''); + this.newState = String(newState || ''); + } +}; +var popoverToggleTaskQueue = /* @__PURE__ */ new WeakMap(); +function queuePopoverToggleEventTask(element, oldState, newState) { + popoverToggleTaskQueue.set( + element, + setTimeout(() => { + if (!popoverToggleTaskQueue.has(element)) return; + element.dispatchEvent( + new ToggleEvent('toggle', { + cancelable: false, + oldState, + newState + }) + ); + }, 0) + ); +} + +// src/popover-helpers.ts +var ShadowRoot = globalThis.ShadowRoot || function () {}; +var HTMLDialogElement = globalThis.HTMLDialogElement || function () {}; +var topLayerElements = /* @__PURE__ */ new WeakMap(); +var autoPopoverList = /* @__PURE__ */ new WeakMap(); +var visibilityState = /* @__PURE__ */ new WeakMap(); +function getPopoverVisibilityState(popover) { + return visibilityState.get(popover) || 'hidden'; +} +var popoverInvoker = /* @__PURE__ */ new WeakMap(); +function popoverTargetAttributeActivationBehavior(element) { + const popover = element.popoverTargetElement; + if (!popover) { + return; + } + const visibility = getPopoverVisibilityState(popover); + if (element.popoverTargetAction === 'show' && visibility === 'showing') { + return; + } + if (element.popoverTargetAction === 'hide' && visibility === 'hidden') return; + if (visibility === 'showing') { + hidePopover(popover, true, true); + } else if (checkPopoverValidity(popover, false)) { + popoverInvoker.set(popover, element); + showPopover(popover); + } +} +function checkPopoverValidity(element, expectedToBeShowing) { + if (element.popover !== 'auto' && element.popover !== 'manual') { + return false; + } + if (!element.isConnected) return false; + if (expectedToBeShowing && getPopoverVisibilityState(element) !== 'showing') { + return false; + } + if (!expectedToBeShowing && getPopoverVisibilityState(element) !== 'hidden') { + return false; + } + if (element instanceof HTMLDialogElement && element.hasAttribute('open')) { + return false; + } + if (document.fullscreenElement === element) return false; + return true; +} +function getStackPosition(popover) { + if (!popover) return 0; + return Array.from(autoPopoverList.get(popover.ownerDocument) || []).indexOf(popover) + 1; +} +function topMostClickedPopover(target) { + const clickedPopover = nearestInclusiveOpenPopover(target); + const invokerPopover = nearestInclusiveTargetPopoverForInvoker(target); + if (getStackPosition(clickedPopover) > getStackPosition(invokerPopover)) { + return clickedPopover; + } + return invokerPopover; +} +function topMostAutoPopover(document2) { + const documentPopovers = autoPopoverList.get(document2); + for (const popover of documentPopovers || []) { + if (!popover.isConnected) { + documentPopovers.delete(popover); + } else { + return popover; + } + } + return null; +} +function getRootNode(node) { + if (typeof node.getRootNode === 'function') { + return node.getRootNode(); + } + if (node.parentNode) return getRootNode(node.parentNode); + return node; +} +function nearestInclusiveOpenPopover(node) { + while (node) { + if ( + node instanceof HTMLElement && + node.popover === 'auto' && + visibilityState.get(node) === 'showing' + ) { + return node; + } + node = node.parentElement || getRootNode(node); + if (node instanceof ShadowRoot) node = node.host; + if (node instanceof Document) return; + } +} +function nearestInclusiveTargetPopoverForInvoker(node) { + while (node) { + const nodePopover = node.popoverTargetElement; + if (nodePopover) return nodePopover; + node = node.parentElement || getRootNode(node); + if (node instanceof ShadowRoot) node = node.host; + if (node instanceof Document) return; + } +} +function topMostPopoverAncestor(newPopover) { + const popoverPositions = /* @__PURE__ */ new Map(); + let i = 0; + const document2 = newPopover.ownerDocument; + for (const popover of autoPopoverList.get(document2) || []) { + popoverPositions.set(popover, i); + i += 1; + } + popoverPositions.set(newPopover, i); + i += 1; + let topMostPopoverAncestor2 = null; + function checkAncestor(candidate) { + const candidateAncestor = nearestInclusiveOpenPopover(candidate); + if (candidateAncestor === null) return null; + const candidatePosition = popoverPositions.get(candidateAncestor); + if ( + topMostPopoverAncestor2 === null || + popoverPositions.get(topMostPopoverAncestor2) < candidatePosition + ) { + topMostPopoverAncestor2 = candidateAncestor; + } + } + checkAncestor(newPopover?.parentElement); + return topMostPopoverAncestor2; +} +function isFocusable(focusTarget) { + if (focusTarget.hidden) return false; + if ( + focusTarget instanceof HTMLButtonElement || + focusTarget instanceof HTMLInputElement || + focusTarget instanceof HTMLSelectElement || + focusTarget instanceof HTMLTextAreaElement || + focusTarget instanceof HTMLOptGroupElement || + focusTarget instanceof HTMLOptionElement || + focusTarget instanceof HTMLFieldSetElement + ) { + if (focusTarget.disabled) return false; + } + if (focusTarget instanceof HTMLInputElement && focusTarget.type === 'hidden') { + return false; + } + if (focusTarget instanceof HTMLAnchorElement && focusTarget.href === '') { + return false; + } + return focusTarget.tabIndex !== -1; +} +function focusDelegate(focusTarget) { + if (focusTarget.shadowRoot && focusTarget.shadowRoot.delegatesFocus !== true) { + return null; + } + let whereToLook = focusTarget; + if (whereToLook.shadowRoot) { + whereToLook = whereToLook.shadowRoot; + } + const autoFocusDelegate = whereToLook.querySelector('[autofocus]'); + if (autoFocusDelegate) { + return autoFocusDelegate; + } + const walker = focusTarget.ownerDocument.createTreeWalker(whereToLook, NodeFilter.SHOW_ELEMENT); + let descendant = walker.currentNode; + while (descendant) { + if (isFocusable(descendant)) { + return descendant; + } + descendant = walker.nextNode(); + } +} +function popoverFocusingSteps(subject) { + focusDelegate(subject)?.focus(); +} +var previouslyFocusedElements = /* @__PURE__ */ new WeakMap(); +function showPopover(element) { + if (!checkPopoverValidity(element, false)) { + return; + } + const document2 = element.ownerDocument; + if ( + !element.dispatchEvent( + new ToggleEvent('beforetoggle', { + cancelable: true, + oldState: 'closed', + newState: 'open' + }) + ) + ) { + return; + } + if (!checkPopoverValidity(element, false)) { + return; + } + let shouldRestoreFocus = false; + if (element.popover === 'auto') { + const originalType = element.getAttribute('popover'); + const ancestor = topMostPopoverAncestor(element) || document2; + hideAllPopoversUntil(ancestor, false, true); + if (originalType !== element.getAttribute('popover') || !checkPopoverValidity(element, false)) { + return; + } + } + if (!topMostAutoPopover(document2)) { + shouldRestoreFocus = true; + } + previouslyFocusedElements.delete(element); + const originallyFocusedElement = document2.activeElement; + element.classList.add(':popover-open'); + visibilityState.set(element, 'showing'); + if (!topLayerElements.has(document2)) { + topLayerElements.set(document2, /* @__PURE__ */ new Set()); + } + topLayerElements.get(document2).add(element); + popoverFocusingSteps(element); + if (element.popover === 'auto') { + if (!autoPopoverList.has(document2)) { + autoPopoverList.set(document2, /* @__PURE__ */ new Set()); + } + autoPopoverList.get(document2).add(element); + setInvokerAriaExpanded(popoverInvoker.get(element), true); + } + if (shouldRestoreFocus && originallyFocusedElement && element.popover === 'auto') { + previouslyFocusedElements.set(element, originallyFocusedElement); + } + queuePopoverToggleEventTask(element, 'closed', 'open'); +} +function hidePopover(element, focusPreviousElement = false, fireEvents = false) { + if (!checkPopoverValidity(element, true)) { + return; + } + const document2 = element.ownerDocument; + if (element.popover === 'auto') { + hideAllPopoversUntil(element, focusPreviousElement, fireEvents); + if (!checkPopoverValidity(element, true)) { + return; + } + } + setInvokerAriaExpanded(popoverInvoker.get(element), false); + popoverInvoker.delete(element); + if (fireEvents) { + element.dispatchEvent( + new ToggleEvent('beforetoggle', { + oldState: 'open', + newState: 'closed' + }) + ); + if (!checkPopoverValidity(element, true)) { + return; + } + } + topLayerElements.get(document2)?.delete(element); + autoPopoverList.get(document2)?.delete(element); + element.classList.remove(':popover-open'); + visibilityState.set(element, 'hidden'); + if (fireEvents) { + queuePopoverToggleEventTask(element, 'open', 'closed'); + } + const previouslyFocusedElement = previouslyFocusedElements.get(element); + if (previouslyFocusedElement) { + previouslyFocusedElements.delete(element); + if (focusPreviousElement) { + previouslyFocusedElement.focus(); + } + } +} +function closeAllOpenPopovers(document2, focusPreviousElement = false, fireEvents = false) { + let popover = topMostAutoPopover(document2); + while (popover) { + hidePopover(popover, focusPreviousElement, fireEvents); + popover = topMostAutoPopover(document2); + } +} +function hideAllPopoversUntil(endpoint, focusPreviousElement, fireEvents) { + const document2 = endpoint.ownerDocument || endpoint; + if (endpoint instanceof Document) { + return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents); + } + let lastToHide = null; + let foundEndpoint = false; + for (const popover of autoPopoverList.get(document2) || []) { + if (popover === endpoint) { + foundEndpoint = true; + } else if (foundEndpoint) { + lastToHide = popover; + break; + } + } + if (!foundEndpoint) { + return closeAllOpenPopovers(document2, focusPreviousElement, fireEvents); + } + while ( + lastToHide && + getPopoverVisibilityState(lastToHide) === 'showing' && + autoPopoverList.get(document2)?.size + ) { + hidePopover(lastToHide, focusPreviousElement, fireEvents); + } +} +var popoverPointerDownTargets = /* @__PURE__ */ new WeakMap(); +function lightDismissOpenPopovers(event) { + if (!event.isTrusted) return; + const target = event.composedPath()[0]; + if (!target) return; + const document2 = target.ownerDocument; + const topMostPopover = topMostAutoPopover(document2); + if (!topMostPopover) return; + const ancestor = topMostClickedPopover(target); + if (ancestor && event.type === 'pointerdown') { + popoverPointerDownTargets.set(document2, ancestor); + } else if (event.type === 'pointerup') { + const sameTarget = popoverPointerDownTargets.get(document2) === ancestor; + popoverPointerDownTargets.delete(document2); + if (sameTarget) { + hideAllPopoversUntil(ancestor || document2, false, true); + } + } +} +var initialAriaExpandedValue = /* @__PURE__ */ new WeakMap(); +function setInvokerAriaExpanded(el, force = false) { + if (!el) return; + if (!initialAriaExpandedValue.has(el)) { + initialAriaExpandedValue.set(el, el.getAttribute('aria-expanded')); + } + const popover = el.popoverTargetElement; + if (popover && popover.popover === 'auto') { + el.setAttribute('aria-expanded', String(force)); + } else { + const initialValue = initialAriaExpandedValue.get(el); + if (!initialValue) { + el.removeAttribute('aria-expanded'); + } else { + el.setAttribute('aria-expanded', initialValue); + } + } +} + +// src/popover.ts +var ShadowRoot2 = globalThis.ShadowRoot || function () {}; +function isSupported() { + return ( + typeof HTMLElement !== 'undefined' && + typeof HTMLElement.prototype === 'object' && + 'popover' in HTMLElement.prototype + ); +} +function patchSelectorFn(object, name, mapper) { + const original = object[name]; + Object.defineProperty(object, name, { + value(selector) { + return original.call(this, mapper(selector)); + } + }); +} +var nonEscapedPopoverSelector = /(^|[^\\]):popover-open\b/g; +function apply() { + window.ToggleEvent = window.ToggleEvent || ToggleEvent; + function rewriteSelector(selector) { + if (selector?.includes(':popover-open')) { + selector = selector.replace(nonEscapedPopoverSelector, '$1.\\:popover-open'); + } + return selector; + } + patchSelectorFn(Document.prototype, 'querySelector', rewriteSelector); + patchSelectorFn(Document.prototype, 'querySelectorAll', rewriteSelector); + patchSelectorFn(Element.prototype, 'querySelector', rewriteSelector); + patchSelectorFn(Element.prototype, 'querySelectorAll', rewriteSelector); + patchSelectorFn(Element.prototype, 'matches', rewriteSelector); + patchSelectorFn(Element.prototype, 'closest', rewriteSelector); + patchSelectorFn(DocumentFragment.prototype, 'querySelectorAll', rewriteSelector); + patchSelectorFn(DocumentFragment.prototype, 'querySelectorAll', rewriteSelector); + Object.defineProperties(HTMLElement.prototype, { + popover: { + enumerable: true, + configurable: true, + get() { + if (!this.hasAttribute('popover')) return null; + const value = (this.getAttribute('popover') || '').toLowerCase(); + if (value === '' || value == 'auto') return 'auto'; + return 'manual'; + }, + set(value) { + this.setAttribute('popover', value); + } + }, + showPopover: { + enumerable: true, + configurable: true, + value() { + showPopover(this); + } + }, + hidePopover: { + enumerable: true, + configurable: true, + value() { + hidePopover(this, true, true); + } + }, + togglePopover: { + enumerable: true, + configurable: true, + value(force) { + if ((visibilityState.get(this) === 'showing' && force === void 0) || force === false) { + hidePopover(this, true, true); + } else if (force === void 0 || force === true) { + showPopover(this); + } + } + } + }); + const popoverTargetAssociatedElements = /* @__PURE__ */ new WeakMap(); + function applyPopoverInvokerElementMixin(ElementClass) { + Object.defineProperties(ElementClass.prototype, { + popoverTargetElement: { + enumerable: true, + configurable: true, + set(targetElement) { + if (targetElement === null) { + this.removeAttribute('popovertarget'); + popoverTargetAssociatedElements.delete(this); + } else if (!(targetElement instanceof Element)) { + throw new TypeError(`popoverTargetElement must be an element or null`); + } else { + this.setAttribute('popovertarget', ''); + popoverTargetAssociatedElements.set(this, targetElement); + } + }, + get() { + if (this.localName !== 'button' && this.localName !== 'input') { + return null; + } + if ( + this.localName === 'input' && + this.type !== 'reset' && + this.type !== 'image' && + this.type !== 'button' + ) { + return null; + } + if (this.disabled) { + return null; + } + if (this.form && this.type === 'submit') { + return null; + } + const targetElement = popoverTargetAssociatedElements.get(this); + if (targetElement && targetElement.isConnected) { + return targetElement; + } else if (targetElement && !targetElement.isConnected) { + popoverTargetAssociatedElements.delete(this); + return null; + } + const root = getRootNode(this); + const idref = this.getAttribute('popovertarget'); + if ((root instanceof Document || root instanceof ShadowRoot2) && idref) { + return root.getElementById(idref) || null; + } + return null; + } + }, + popoverTargetAction: { + enumerable: true, + configurable: true, + get() { + const value = (this.getAttribute('popovertargetaction') || '').toLowerCase(); + if (value === 'show' || value === 'hide') return value; + return 'toggle'; + }, + set(value) { + this.setAttribute('popovertargetaction', value); + } + } + }); + } + applyPopoverInvokerElementMixin(HTMLButtonElement); + applyPopoverInvokerElementMixin(HTMLInputElement); + const handleInvokerActivation = (event) => { + if (!event.isTrusted) return; + const target = event.composedPath()[0]; + if (!(target instanceof Element) || target?.shadowRoot) { + return; + } + const root = getRootNode(target); + if (!(root instanceof ShadowRoot2 || root instanceof Document)) { + return; + } + const invoker = target.closest('[popovertargetaction],[popovertarget]'); + if (invoker) { + popoverTargetAttributeActivationBehavior(invoker); + return; + } + }; + const onKeydown = (event) => { + const key = event.key; + const target = event.target; + if (target && (key === 'Escape' || key === 'Esc')) { + hideAllPopoversUntil(target.ownerDocument, true, true); + } + }; + const addEventListeners = (root) => { + root.addEventListener('click', handleInvokerActivation); + root.addEventListener('keydown', onKeydown); + root.addEventListener('pointerdown', lightDismissOpenPopovers); + root.addEventListener('pointerup', lightDismissOpenPopovers); + }; + addEventListeners(document); +} + +// src/index.ts +if (!isSupported()) apply(); +//# sourceMappingURL=popover.js.map diff --git a/static/robots.txt b/static/robots.txt new file mode 100644 index 000000000..77470cb39 --- /dev/null +++ b/static/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / \ No newline at end of file diff --git a/static/site.webmanifest b/static/site.webmanifest new file mode 100644 index 000000000..527487486 --- /dev/null +++ b/static/site.webmanifest @@ -0,0 +1,19 @@ +{ + "background_color": "#000000", + "display": "standalone", + "icons": [ + { + "sizes": "192x192", + "src": "/android-chrome-192x192.png", + "type": "image/png" + }, + { + "sizes": "512x512", + "src": "/android-chrome-512x512.png", + "type": "image/png" + } + ], + "name": "Syntax Podcast", + "short_name": "Syntax", + "theme_color": "#000000" +} diff --git a/styles/_bars.styl b/styles/_bars.styl deleted file mode 100644 index d25145847..000000000 --- a/styles/_bars.styl +++ /dev/null @@ -1,63 +0,0 @@ -.bars { - height: 30px; - width: 40px; - position relative -} - -.bar { - background: green; - bottom: 1px; - height: 3px; - position: absolute; - width: 3px; - animation: sound 0ms -800ms linear infinite alternate; -} - -.bars--paused > * { - animation-play-state: paused; -} - -@keyframes sound { - 0% { - opacity: .35; - background: yellow; - height: 3px; - } - 100% { - opacity: 1; - background darken(yellow,20%) - height: 28px; - } -} - -.bar:nth-child(1) - left 1px - animation-duration 474ms -.bar:nth-child(2) - left 5px - animation-duration 433ms -.bar:nth-child(3) - left 9px - animation-duration 407ms -.bar:nth-child(4) - left 13px - animation-duration 458ms -.bar:nth-child(5) - left 17px - animation-duration 400ms -.bar:nth-child(6) - left 21px - animation-duration 427ms -.bar:nth-child(7) - left 25px - animation-duration 441ms -.bar:nth-child(8) - left 29px - animation-duration 419ms -.bar:nth-child(9) - left 33px - animation-duration 487ms - -.bar:nth-child(10) - left: 37px - animation-duration 442ms diff --git a/styles/_button.styl b/styles/_button.styl deleted file mode 100644 index 75a1f46b0..000000000 --- a/styles/_button.styl +++ /dev/null @@ -1,18 +0,0 @@ -.button, a.button - border 0 - background lightgrey - color black - padding 0 - line-height 1 - font-size 1.5rem - padding 1rem - display inline-block - transition all 0.2s - margin-right 1rem - &:hover - background darken(lightgrey, 3%) - .icon - border-right 1px solid grey - padding-right 0.5rem - margin-right 0.5rem - diff --git a/styles/_footer.styl b/styles/_footer.styl deleted file mode 100644 index 660de050b..000000000 --- a/styles/_footer.styl +++ /dev/null @@ -1,3 +0,0 @@ -.bottom - text-align center - color white diff --git a/styles/_header.styl b/styles/_header.styl deleted file mode 100644 index 779f737d7..000000000 --- a/styles/_header.styl +++ /dev/null @@ -1,152 +0,0 @@ -.header - display flex - color white - flex-wrap wrap - margin 2rem auto - &__left - width 30% - text-align center - @media (max-width: 800px) - width 100% - &__right - width 70% - display flex - flex-direction column - justify-content center - @media (max-width: 800px) - width 100% - &__logo - margin-left -3rem - max-width 300px - text-align center - @media (max-width: 800px) - margin-left -2rem -.title - position relative - &__potluck-btn - border 1px solid yellow - border-radius 3px - padding 5px 10px - position absolute - right 0 - top 5px - font-size 12px - &:hover - border 1px dotted - @media (max-width: 1000px) - position relative - margin 10px 0 - text-align center - display block - top 0 -.subscribe - width 100% - &__links - margin 0 - padding 0 - display flex - list-style none - align-items stretch - flex-wrap wrap - justify-content space-between - @media (max-width: 800px) - justify-content space-between - @supports (display grid) - @media (max-width: 1000px) - display grid - grid-template-columns repeat(auto-fit, minmax(18em, 1fr)) - grid-gap 2rem - @media (max-width: 800px) - grid-gap 1rem - @media (max-width: 670px) - display flex - &__link - flex 0 1 auto - margin-bottom 1rem - @supports (display grid) - margin-bottom 0 - @media (max-width: 670px) - flex 1 1 auto - margin-right 1rem - margin-bottom 1rem - @supports (display grid) - margin-right 0 - margin-bottom 0 - @media (max-width: 670px) - margin-right 1rem - margin-bottom 1rem - a - background yellow - display block - color rgba(0,0,0,0.8) - text-shadow: 1px 1px 0 rgba(255,255,255,0.2) - box-shadow inset 0 0 0 2px rgba(0,0,0,0.05) - font-size 1.5rem - padding 0.7rem 1rem - text-align center - border-radius 3px - font-family sans-serif - transition all 0.2s - display flex - align-items center - &:hover - box-shadow inset 0 0 0 2px rgba(0,0,0,0.4) - &:before - display inline-block - width 20px - height 20px - content '' - margin-right 0.7rem - background-size cover - border-radius 5px - box-shadow 0 0 0 2px rgba(0,0,0,0.05) - - &--subscribe - @media (max-width: 1000px) - display none - a - pointer-events none - background: linear-gradient(to bottom, yellow 0%, lighten(yellow, 2%) 100%); - text-decoration none - &:before - width 0 - box-shadow none - margin 0 - - &--itunes a - background: linear-gradient(to bottom, rgb(205, 102, 246) 0%, rgb(154, 61, 209) 80%, rgb(142, 52, 201) 100%); - &:before - background-image url('/static/icons/itunes.jpg') - &--overcast a - background: linear-gradient(to bottom, rgb(255, 138, 10) 0%, rgb(255, 105, 48) 100%); - &:before - background-image url('/static/icons/overcast.jpg') - &--rss a - background: linear-gradient(to bottom, rgb(247, 163, 54) 0%, rgb(235, 109, 30) 96%, rgb(235, 108, 30) 100%); - &:before - background-image url('/static/icons/rss.svg') - &--stitcher a - background: linear-gradient(to bottom, rgb(204, 213, 87) 0%, rgb(200, 208, 91) 94%); - &:before - background-image url('/static/icons/stitcher.jpg') - &--breaker a - background: linear-gradient(105deg, rgb(0, 173, 234) 0%, rgb(21, 184, 236) 100%); - &:before - background-image url('/static/icons/breaker.jpg') - &--pocketcasts a - background: linear-gradient(to bottom, rgb(242, 43, 36) 0%, rgb(215, 12, 11) 100%); - &:before - background-image url('/static/icons/pocketcasts.jpg') - &--googleplay a - background: linear-gradient(to bottom, rgb(37, 187, 195) 0%, rgb(56, 215, 223) 100%); - &:before - background-image url('/static/icons/googleplay.png') - background-color white - &--spotify a - background: linear-gradient(to bottom, rgb(4, 160, 59) 0%, rgb(16, 172, 71) 100%); - &:before - background-image url('/static/icons/spotify.svg') - &--google a - background: linear-gradient(to bottom, rgb(245, 121, 23) 0%, rgb(254, 185, 90) 100%); - &:before - background-image url('/static/icons/google_podcasts.svg') diff --git a/styles/_layout.styl b/styles/_layout.styl deleted file mode 100644 index c9c924253..000000000 --- a/styles/_layout.styl +++ /dev/null @@ -1,13 +0,0 @@ -.wrapper, .header, .footer - max-width: 1000px - margin 0 auto - &--text - background white - padding 2rem - font-size 1.7rem - @media (max-width: 1000px) - padding 0 2rem - -body - background black url('/static/background.jpg') - border-top 3px solid yellow diff --git a/styles/_live.styl b/styles/_live.styl deleted file mode 100644 index 4920bc53b..000000000 --- a/styles/_live.styl +++ /dev/null @@ -1,20 +0,0 @@ -.live-wrap - color white - text-align: center - -.live__callin-btn - border 1px solid yellow - border-radius 3px - padding 5px 10px - font-size 18px - &:hover - border 1px dotted - -.live__callin-callout - background: rgba(255,255,255,0.07) - padding: 20px - p - font-size: 18px - .live__callin-alert - margin-top: 0 - font-size: 24px \ No newline at end of file diff --git a/styles/_normalize.styl b/styles/_normalize.styl deleted file mode 100644 index 4de3bcf5b..000000000 --- a/styles/_normalize.styl +++ /dev/null @@ -1,11 +0,0 @@ -article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:700;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em;}pre{white-space:pre-wrap;word-wrap:break-word;}q{quotes:\201C \201D \2018 \2019;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,html input[type=button],/* 1 */ -input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],input[disabled]{cursor:default;}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0;}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}body,figure{margin:0;}legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;} - -.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } - -* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } - - -img { - max-width: 100% -} diff --git a/styles/_person.styl b/styles/_person.styl deleted file mode 100644 index 12dce599c..000000000 --- a/styles/_person.styl +++ /dev/null @@ -1,37 +0,0 @@ -.people - display flex - justify-content space-between - margin 1rem 0 - flex-wrap wrap - font-size 1.4rem - -.person - background rgba(255,255,255,0.07) - padding 1rem - width 48% - @media (max-width: 800px) - width 100% - margin-bottom 1rem - p - margin-bottom 0 - clear left - h3 - margin 0 - margin-top 10px - font-size 2rem - @media (max-width: 800px) - margin-top 0 - em - font-size 1rem - -.avatar - border-radius 50% - width 80px - float left - margin-right 20px - margin-bottom 15px - border 3px solid white - box-shadow inset 0 0 10px red - @media (max-width: 800px) - width 50px - border-width 1px diff --git a/styles/_player.styl b/styles/_player.styl deleted file mode 100644 index 26b791292..000000000 --- a/styles/_player.styl +++ /dev/null @@ -1,153 +0,0 @@ -// accessible way of hiding inputs and labels -.sr-only - border 0 !important - clip rect(1px, 1px, 1px, 1px) !important - clip-path inset(50%) !important - height 1px !important - overflow hidden !important - padding 0 !important - position absolute !important - width 1px !important - white-space nowrap !important - -.player - bottom 0 - width 100% - background black - border-top 1px solid yellow - color white - display flex - flex-wrap wrap - position relative - position sticky - position -webkit-sticky - top: -1px - z-index 2 - // flex-wrap wrap - &__section - order 2 - &--left - width 100px - min-width 80px - @media (max-width: 650px) - flex 1 - & > * - width 100% - &--middle - position relative - flex 1 1 auto - border-right 1px solid rgba(0,0,0,0.6) - display flex - flex-direction column - @media (max-width: 650px) - order 1 - width 100% - &--right - display flex - @media (max-width: 650px) - flex 2 - & > * - width 100% - &__icon - font-size 2rem - line-height 0.5 - &__title - font-size 1.5rem - margin 0 - flex 1 0 auto - display flex - align-items center - padding-left 2rem - max-width 650px - @media (max-width: 650px) - padding 1rem - &__tooltip - position absolute - top 22px - transform translate(-50%) - opacity 0 - &:after - content " " - position absolute - bottom 94% - left 50% - margin-left -2px - border-width 2px - border-style solid - border-color transparent transparent white transparent - button - background black - border 0 - color white - padding 1rem - border-right 1px solid rgba(0,0,0,0.6) - outline-color yellow - &__speeddisplay - &__speeddisplay - height 2.5rem - display flex - justify-content center - align-items center - &__speed - flex 0 1 auto - padding 1rem - display flex - flex-wrap wrap - justify-content space-around - flex-direction column - align-items center - & > * - width 100% - margin 0 - &__display - height 2.5rem - &__inputs - font-size 0 - &__volume - width 120px - text-align center - display flex - flex-direction column - justify-content space-around - align-items center - padding 1rem - flex-wrap wrap - flex 1 0 auto - &:focus-within - outline: yellow auto 5px; - &:hover - label - border-top 1px solid yellow - label - border-top 1px solid green - &:hover - & ~ label - border-top 1px solid black - p - width 100% - margin 0 - input ~ label - background green - border-right 2px solid black - display inline-block - width 8px - height 2.5rem - input:checked ~ label - background grey - input:checked + label - background green - -.progress - background lighten(#000,5%) - height 2rem - cursor crosshair - overflow hidden - &__time - background green - border-right 1px solid rgba(0,0,0,0.1) - min-width 20px - height 100% - transition width 0.1s - background grad - - diff --git a/styles/_show.styl b/styles/_show.styl deleted file mode 100644 index 42b986bfa..000000000 --- a/styles/_show.styl +++ /dev/null @@ -1,127 +0,0 @@ -.show - border-right 1px solid grey - border-bottom 1px solid grey - border-left 10px solid grey - background lightgrey - position relative - display flex - @media (max-width: 650px) - flex 1 0 auto - a - flex 1 1 auto - padding 10px - &__playcontrols - display flex - align-items center - justify-content center - width 5rem - flex-shrink 0 - padding 1rem - button - background none - border 0 - outline-color yellow - &:hover - color yellow - &--dummy - flex 1 0 auto - &--active - border-right-color white - background white - border-left 0 - padding-left 1rem - &:before - display block - background grad - width 10px - height 100% - content '' - position absolute - top 0 - left 0 - &__container - display flex - &__displayNumber - text-transform uppercase - margin 0 6px 0 0 - font-size 11px - color gray2 - &__title - color black - font-size 1.5rem - margin 0 - &__date - margin-top 0 - text-align right - color gray3 - font-size 1.2rem - &__modifiedDate - font-size 11px - font-weight 100 - color gray3 - margin 0 0 0 6px - -.show-wrap - background white - display flex - flex-wrap wrap - -.showList - width 38% - display flex - flex-direction column - @media (max-width: 650px) - height 300px - width 100% - overflow-x auto - overflow-y scroll - -.showNotes - position sticky - top 102px - height calc(100vh - 102px) - overflow-y scroll - padding 2rem - width 62% - font-size 1.5rem - @media (max-width: 650px) - width 100% - .button - border-bottom 0 - ul - padding-left 2rem - list-style-type circle - li - margin 10px 0 - h1,h2,h3,h4,h5,h6 - font-family 'Operator Mono', 'Fira Code', 'Courier New', Courier, monospace - font-weight 200 - border-bottom 1px solid grey - padding-bottom 1rem - &:before - padding-right 1rem - pre - background lightgrey - padding 1rem - h1,h2 - font-size 2.5rem - a - color lighten(black, 20%) - border-bottom 1px solid yellow - text-decoration none - code - background: #f4f4f4; - border: 1px solid #ddd; - border-left: 3px solid #F1C15D; - color: #666; - page-break-inside: avoid; - font-family: monospace; - font-size: 15px; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1em 1.5em; - display: block; - word-wrap: break-word; - diff --git a/styles/_skiplink.styl b/styles/_skiplink.styl deleted file mode 100644 index 8bf606c10..000000000 --- a/styles/_skiplink.styl +++ /dev/null @@ -1,21 +0,0 @@ -.skip-link - position: absolute - top: -1000px - left: -1000px - width: 1px - height: 1px - overflow: hidden - border: 2px solid yellow - padding: 10px 15px - font-size: 16px - background: #000 - &:active - &:focus - &:hover - top: 20px - left: 50% - transform: translateX(-50%) - z-index: 1 - width: auto - height: auto - overflow: visible diff --git a/styles/_sponsor.styl b/styles/_sponsor.styl deleted file mode 100644 index 462b459aa..000000000 --- a/styles/_sponsor.styl +++ /dev/null @@ -1,23 +0,0 @@ -figure - -figcaption - font-size 10px - text-align right - -.wrapper--text - ul, ol - list-style square - strong - font-weight 900 - h1 - font-size 50px - margin-top 0 - margin-bottom 0 - h2 - font-size 40px - h1,h2 - padding-bottom 10px - border-bottom 2px solid yellow - a - color black - border-bottom 1px solid yellow \ No newline at end of file diff --git a/styles/_subscribe.styl b/styles/_subscribe.styl deleted file mode 100644 index ce046685b..000000000 --- a/styles/_subscribe.styl +++ /dev/null @@ -1,3 +0,0 @@ -.subscribe__link a - &:focus - outline-color yellow \ No newline at end of file diff --git a/styles/_type.styl b/styles/_type.styl deleted file mode 100644 index 169c9f588..000000000 --- a/styles/_type.styl +++ /dev/null @@ -1,36 +0,0 @@ -@font-face - font-family: '💪' - src: url('/static/fonts/Radnika-Bold.woff2') format('woff2'), - url('/static/fonts/Radnika-Bold.woff') format('woff') - -h1,h2,h3,h4,h5,h6 - font-family '💪' - font-weight 100 - -@font-face { - font-family: 'rad'; - src: url('/static/fonts/Radnika-Light.woff2') format('woff2'), - url('/static/fonts/Radnika-Light.woff') format('woff'); -} - -html - font-size 10px - -body - font-family 'rad' - color black - line-height: 1.5 - -li - line-height 1.7 -a - color yellow - text-decoration none - -.tagline - font-size 2.5rem - margin 0 - @media (max-width: 1000px) - text-align center - @media (max-width: 800px) - font-size 1.5rem diff --git a/styles/_variables.styl b/styles/_variables.styl deleted file mode 100644 index 06aa88178..000000000 --- a/styles/_variables.styl +++ /dev/null @@ -1,15 +0,0 @@ -yellow = #FABF46 -black = #1d1d1d -grey = #e4e4e4 -gray = grey // 🇨🇦 -grey2 = #4b4747 -gray2 = grey2 // 🇨🇦 -grey3 = #666666 -gray3 = grey3 // 🇨🇦 -lightgrey = #f9f9f9 -lightgray = lightgrey -green = #03fff3 -newgrey = #645555 - - -grad = linear-gradient(30deg, #d2ff52 0%, green 100%); diff --git a/styles/style.styl b/styles/style.styl deleted file mode 100644 index 32cab4d6b..000000000 --- a/styles/style.styl +++ /dev/null @@ -1,15 +0,0 @@ -@import '_normalize.styl' -@import '_variables.styl' -@import '_type.styl' -@import '_layout.styl' -@import '_skiplink.styl' -@import '_header.styl' -@import '_person.styl' -@import '_player.styl' -@import '_bars.styl' -@import '_footer.styl' -@import '_show.styl' -@import '_live.styl' -@import '_button.styl' -@import '_sponsor.styl' -@import '_subscribe.styl' diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 000000000..598990093 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,54 @@ +import adapter from '@sveltejs/adapter-auto'; +import preprocess from 'svelte-preprocess'; +import postcssPresetEnv from 'postcss-preset-env'; +import atImport from 'postcss-import'; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + preprocess: [ + preprocess({ + postcss: { + prependData: ` + @custom-media --below_small (width < 400px); + @custom-media --below_med (width < 700px); + @custom-media --below_large (width < 900px); + @custom-media --below_xlarge (width < 1200px); + @custom-media --above_small (width > 400px); + @custom-media --above_med (width > 700px); + @custom-media --above_large (width > 900px); + @custom-media --above_xlarge (width > 1200px); + `, + plugins: [ + atImport, + postcssPresetEnv({ + stage: 2, + features: { + 'nesting-rules': true, + 'custom-media-queries': true, + 'media-query-ranges': true + } + }) + ] + } + }) + ], + + kit: { + adapter: adapter(), + alias: { + $actions: 'src/actions', + $assets: 'src/assets', + $const: 'src/const.ts', + $server: 'src/server', + $shows: 'shows', + $state: 'src/state', + $styles: 'src/styles', + $utilities: 'src/utilities' + }, + }, + compilerOptions: { + enableSourcemap: true, + } +}; + +export default config; diff --git a/tests/default.test.ts b/tests/default.test.ts new file mode 100644 index 000000000..ff4245c82 --- /dev/null +++ b/tests/default.test.ts @@ -0,0 +1,51 @@ +import { expect, test } from '@playwright/test'; + +test('index page has expected h1', async ({ page }) => { + await page.goto('/'); + await expect( + page.getByRole('heading', { name: 'A Tasty Treats Podcast for Web Developers' }) + ).toBeVisible(); +}); + +test('index newsletter signup exists', async ({ page }) => { + await page.goto('/'); + await expect(page.getByRole('heading', { name: 'Join our newsletter' })).toBeVisible(); +}); + +test('Got about page', async ({ page }) => { + await page.goto('/'); + await page.click('a:has-text("About")'); + // Check for an h1 with the text "All Episodes" + await expect(page.locator('h1:has-text("About Syntax")')).toBeVisible(); +}); +test('Got to podcast detail page', async ({ page }) => { + await page.goto('/'); + // Click the navigation link named "Shows" + await page.click('a:has-text("Shows")'); + + // Check for an h1 with the text "All Episodes" + await expect(page.locator('h1:has-text("All Episodes")')).toBeVisible(); + + // Find the first link under the .list class and save the h4 value as title + const titleElement = await page.waitForSelector('.list a .show-title'); + const title = await titleElement.textContent(); + + // Click the first link under the .list class + await page.click('.list a'); + + // Check the next page for an h1 with the same title + const h1Element = await page.waitForSelector(`h1:has-text("${title}")`); + const h1Text = await h1Element.textContent(); + expect(h1Text).toBe(title); +}); + +test('make sure all pages load without error', async ({ page }) => { + await page.goto('/'); + + // Wait for the page to be fully loaded + await page.waitForLoadState('load'); + + const bodyElement = await page.$('body'); + + expect(bodyElement).toBeTruthy(); +}); diff --git a/tests/player.test.ts b/tests/player.test.ts new file mode 100644 index 000000000..f0a1a7022 --- /dev/null +++ b/tests/player.test.ts @@ -0,0 +1,25 @@ +import { expect, test } from '@playwright/test'; + +test('Player works episode button and check if audio is playing', async ({ page }) => { + await page.goto('/'); // Navigate to the root page + + const titleElement = await page.getByTestId('show-card-title').first(); + const title = await titleElement.textContent(); + + // Click the button with text that includes "play episode" (case-insensitive) + await page.getByTestId('play-show').first().click(); + await page.waitForTimeout(500); + + // Execute JavaScript within the page to check if the audio is playing + const isPlaying = await page.evaluate(() => { + const audioElement = document.querySelector('audio'); // Adjust the selector as needed + return !audioElement?.paused; // Returns false if paused, true if playing + }); + + expect(isPlaying).toBe(true); // Assert that the audio is playing + + const playerHeader = await page.waitForSelector('.player header p'); + const playerTitle = await playerHeader.textContent(); + + expect(playerTitle).toContain(title); +}); diff --git a/transcripts/Syntax0.srt b/transcripts/Syntax0.srt deleted file mode 100644 index cff744359..000000000 --- a/transcripts/Syntax0.srt +++ /dev/null @@ -1,44 +0,0 @@ -1 -00:00:02,460 --> 00:00:21,120 -Wes Bos: Hello, everybody, and welcome to syntax. This is a new podcast that Scott and I are launching. And we already have three episodes recorded. And we'll be launching them shortly. For now we just wanted to let you know that we're going to be launching this podcast. And to sort of get you subscribe to the feed so that when they're ready to drop, you're ready to get them. - -2 -00:00:21,300 --> 00:00:27,660 -Scott Tolinski: And this is a web development podcast filled with tasty tips and treats for web developers. - -3 -00:00:27,960 --> 00:00:39,420 -Wes Bos: Oh, oh, yeah. So a little bit about ourselves. My name is Wes Bos. I am a full stack developer from Canada. And I essentially create training courses that help web developers get better at their job. - -4 -00:00:39,660 --> 00:00:50,520 -Scott Tolinski: And I am Scott Tolinski, a full stack web developer from Denver, Colorado, where I have created over 1000 free tutorials on YouTube at level up tutorials. - -5 -00:00:50,660 --> 00:01:21,290 -Wes Bos: Awesome. So the idea with this podcast is it's going to be a web development podcast where we take a topic and sort of dive deep into explaining both what that topic is, and all the stuff that surrounds it, as well as talk about our experience with that specific topic. So we're going to go all over t he place everything from JavaScript frameworks, CSS, advancements, CSS frameworks, all the way through to command line tooling, and even some of the other stuff like soft skills that we need as web developers. - -6 -00:01:21,380 --> 00:01:37,970 -Scott Tolinski: Yeah. And we're really super excited about launching this thing. And we really need your help to make it launch with a bang. So head over to syntax.fm where you can find buttons to subscribe on all of your favorite podcast players like iTunes, Stitcher and overcast - -7 -00:01:38,200 --> 00:01:45,730 -Wes Bos: awesome so actually do that please like Don't be like oh, it should subscribe do it because when it drops, we really want to get this thing to the top of the charts. - -8 -00:01:45,870 --> 00:01:49,680 -Scott Tolinski: Yeah, just Yeah, really push that like button as hard as you can. - -9 -00:01:51,210 --> 00:02:06,420 -Wes Bos: force touch that like button. Awesome. So we're a syntax FM on Twitter, and the website to grab all of those buttons is syntax.fm. As always, I'm at Wes Bos on Twitter and Scott - -10 -00:02:06,540 --> 00:02:12,000 -Scott Tolinski: is @stolinski Awesome. - -11 -00:02:12,030 --> 00:02:15,840 -Wes Bos: So with that, we'll see you in the first podcast and a couple days. - diff --git a/transcripts/Syntax1.srt b/transcripts/Syntax1.srt deleted file mode 100644 index 91533fb3b..000000000 --- a/transcripts/Syntax1.srt +++ /dev/null @@ -1,516 +0,0 @@ -1 -00:00:01,800 --> 00:00:07,080 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:08,490 --> 00:00:18,660 -Wes Bos: Welcome, welcome to the first ever syntax.fm podcast. Thanks so much for tuning in. My name is Wes. And here we have Scott say, Hello, Scott. - -3 -00:00:18,660 --> 00:00:19,260 -Scott Tolinski: Hey, - -4 -00:00:19,260 --> 00:01:01,950 -Wes Bos: are we go. So this might be a little bit rough because it's our first podcast, which sort of trying to figure things out. But thanks so much for joining us. Today, we are going to be talking all about react tools, different pieces, different frameworks, different things that you can use with react, and we're sort of going to take a stab at explaining what they are, where they fit in what they do, why would you ever want to use one sort of just clarify, what's this space? And all the different things are? So Well, I don't know. Why don't we kick it off? Just saying hello, until we'll tell a little bit about ourselves for those who are new, and then we'll dive right in. So Scott, hello, hello. Hey, hey, hey, yeah, hey. So - -5 -00:01:01,950 --> 00:01:23,100 -Scott Tolinski: I'm Scott Tolinksi. I'm the creator of level up tutorials where I publish tons and tons of free web development tutorials on YouTube, and then a lot of premium and paid products as well. But really, I've just been a developer for a long time and love to sort of share what I learned. That's that's sort of my whole thing. That's cool. - -6 -00:01:23,160 --> 00:01:26,250 -Wes Bos: So what's what's your website? And what's your YouTube? - -7 -00:01:26,550 --> 00:01:40,350 -Scott Tolinski: My YouTube is level up tutorials, or YouTube slash user slash level up, tuts, you could just find it through either of those. My personal website is just Scott tolinksi.com. You can get to anything from there as well. - -8 -00:01:40,410 --> 00:01:47,040 -Wes Bos: And it's likely that you've probably taken one of Scott's tutorials already. He has almost 200,000 YouTube subscribers. 200,000. - -9 -00:01:47,040 --> 00:01:51,840 -Scott Tolinski: Yeah, I'm at like, 192,000 Oh, man. That's it. - -10 -00:01:51,840 --> 00:01:53,040 -Wes Bos: 200 Yeah, I - -11 -00:01:53,040 --> 00:02:00,900 -Scott Tolinski: have over 1000 videos uploaded to YouTube. So yeah, wow. And that's, that's just YouTube, I have a bunch of elsewhere as well. So - -12 -00:02:01,050 --> 00:02:29,580 -Wes Bos: impressive. So my name is Wes. And I do similar stuff to Scott as well. I build courses for web developers who want to get better at what they do. So I've got a number of different free ones on everything from Flexbox over to Redux, as well as some premium courses on react node ESX. A bunch of stuff and a bunch of stuff that's coming out, too. So if you're interested in it's at Wes, bos.com, there's a list of all my courses. Awesome. - -13 -00:02:29,659 --> 00:02:30,659 -Scott Tolinski: Yeah, great stuff. Cool. - -14 -00:02:30,659 --> 00:02:39,930 -Wes Bos: So um, I don't know why should we kick it off? Or you have any or I guess we should we want to talk a little bit about what are we working on right now? - -15 -00:02:40,159 --> 00:02:45,060 -Scott Tolinski: Yeah, let's let's go this go for it. Since I went first last time. Tell us what you're working on, Wes. - -16 -00:02:45,449 --> 00:03:39,240 -Wes Bos: Sure. So right now I've been, I just released my node course about a month ago, maybe a little bit less than a month ago. And I've been spending the time working on platform improvements. So I built this thing called boss monster that runs all of my paid and all of my free courses. And then it's I've just been working on the coupon codes, I've added percentage base coupons were previously only had like a fixed fixed amount off. I'm working on some geo geo coded discounts. Meaning that like, I've gotten a lot of people coming from India, Brazil, and the 60 hundred dollar $120 for a course is just way too much. It's like, like a month's rent for them. So it depends on where they're coming from. So I'm working on implementing some special coupons, depending on where you're visiting the actual website. - -17 -00:03:39,379 --> 00:03:45,629 -Scott Tolinski: Wow, cool. Yeah, I'm excited to see some of that stuff. At least how you pull it off. It seems really cool. - -18 -00:03:45,629 --> 00:04:03,569 -Wes Bos: That's it's pretty neat. I'm using CloudFlare, which will give you a header and it will tell you which country the person is coming from, which I found out is extremely reliable, and also somewhat hard to spoof, with some of the more popular free VPN. So really, - -19 -00:04:04,020 --> 00:04:08,370 -Scott Tolinski: yeah, it actually works surprisingly well. Nice. Super cool. Anything else? So - -20 -00:04:08,370 --> 00:04:15,659 -Wes Bos: what about you know, that's all I got? I got a new laptop, new MacBook Pro, which I've tried to hook up all the dongles and - -21 -00:04:15,720 --> 00:04:18,079 -Scott Tolinski: stuff that up. Yeah, lots of dongles. Yeah, - -22 -00:04:18,120 --> 00:04:20,699 -Wes Bos: yeah. That's about it. What about you, Don? I'm - -23 -00:04:20,699 --> 00:04:28,519 -Scott Tolinski: doing a lot of just a lot of coding. I have several, several projects. I just did my very first live stream - -24 -00:04:28,860 --> 00:04:34,200 -Wes Bos: level up tuts I saw that my phone buzzed, and I joined it for a second. - -25 -00:04:34,230 --> 00:05:39,300 -Scott Tolinski: Yeah, it was, uh, that was wild because I've never done a live stream and apparently I wasn't quite prepared enough. But uh, yeah, that's sort of what they say is to just go in and do it. So in that live stream, I was just upgrading the level AppStore to react router for so I have so many little projects like that I have. The level of site overall is like kind of an old version of a router. So I'd love to get it on not only react router but react router for with server side rendering. All that stuff. So just really like code upgrades, code updates here and there. And then I have another small project that I'm, I recently met a developer on Reddit, who's also a breakdancer. For those who don't know, I've been breakdancing for 1314 years now. And I built a web app called B boy tools. And it allows basically a whole bunch of like tools that are really awesome for breakdance practice. And I found this guy who's also a developer breakdancer, who, who's now like, thrown up commits left and right, so I'm stepping up my game a little bit on it to really move that project alone. - -26 -00:05:39,930 --> 00:05:53,910 -Wes Bos: Wow, that's really cool. It's It's funny how often you you go into these like weird areas of your life, whether it's music, or breakdancing, and then you find like other other people that are just like you. - -27 -00:05:53,969 --> 00:05:57,360 -Scott Tolinski: Yeah, I know. It's a, it's actually a really, really nice thing. - -28 -00:05:58,080 --> 00:06:34,290 -Wes Bos: Awesome. Well, let's get right into it. We're going to be covering. Let's see here, we're going to talk about next js, create react app, React dev tools, real quick on react and Inferno, react, storybook, and then Meteor. So we're gonna kind of go through all of these different ones, section by section. Some of them I have absolutely no idea about some of them. I've used quite a bit. I'm by no means an expert on any of these. But I think that's what's going to make this podcast kind of nice, where you're sort of getting a look into these tools as everyday developer wouldn't would be working on them. - -29 -00:06:34,320 --> 00:06:39,209 -Scott Tolinski: Yeah, absolutely. I think that's a different strength. - -30 -00:06:39,720 --> 00:06:48,959 -Wes Bos: Yeah, I think that's also why a lot of people like Scott nice tutorials is that we're not the smartest shove shovels in the shed is that to say, - -31 -00:06:49,680 --> 00:06:56,640 -Scott Tolinski: as evidenced by my live stream yesterday, a lot of people commenting Well, it's good to see someone else struggling. - -32 -00:06:59,550 --> 00:09:17,700 -Wes Bos: Oh, that's great. Cool. So we're gonna start off with next chasse, which I've actually been working with quite a bit lately, I've been building a sort of an administrative dashboard for myself on my courses. So my own course platform, a lot of my admin has actually been just query it up in the database, open up the raw Mongo file, and then edit it from there. And now I'm adding much more reporting, being able to edit, reset and refund customers, all that good stuff. So react is a perfect use case for billing an admin dashboard, because there's a lot that's going on there. And also, that when you're searching for people and filtering data, you don't want to have to do a full page reload on each of those. So I decided to build it in react. And with that, I'm using this new framework called next j s. And it's, it's from the folks you've probably used hyper term before or now to sh, which is a new sort of hosting platform. And what it does is, the big thing that it does is server side rendering without any of the the tears or the pain that comes along with trying to do server side rendering. So out of the box, what you do is you have a pages folder. And if you want to build a website that has like an about page or a customer page, all you have to do is create a component in your pages folder called customer dot j s. And what that will do is it exports a component, a react component, and then when somebody visits that URL, it's automatically going to be rendered right to that URL. So it takes care of all the routing for you. There's there's no react router setup. And yes, it does. It's all its own routing, and then it does the server side rendering of all of your components. So that's really neat if you are either worried about a search engines hitting all of your pages, or be what's called pre loading. So let's say I'm on a homepage, and I want to preload my pricing page. What we can do is we can preload the the entire pricing page component. And then when someone clicks on the pricing page, it's just going to be an instant cut over to the pricing page. Because we've already decided to preload that link. - -33 -00:09:19,670 --> 00:09:20,400 -Unknown: Nice. What else does - -34 -00:09:20,400 --> 00:09:21,390 -Wes Bos: it do? Yeah, - -35 -00:09:21,410 --> 00:10:03,450 -Scott Tolinski: yeah, I mean, to me, I love I love things that that take care of that many things for you. I know some some you know, it gets into that, like the magic territory, right? where some people like a little bit of magic, and I've never been the type to shy away from a little bit of magic, right? I think in when the rails community was in in full force. I think that was one of the most attractive things about rails. Was that it? It did a lot for you. And yeah, I haven't used next to myself, but I've been I've been checking it out quite a bit and that built in server side rendering with the node router just seems like a really nice little time saver. Cuz I mean, yeah, who wants to write routing every single time? - -36 -00:10:04,020 --> 00:11:20,250 -Wes Bos: Yeah, and there there is stuff. If you want to do custom routes, I'm sure um, but you can get away with like Ford slash customers. And then I would pass the customer ID via query string. And then I didn't have to set up any custom routing, it does all of the the baybel in the web pack stuff for you, as well. And it's just a right about a right amount of magic for me, because it does expose a config file, which will will sort of fold into your web pack. So if there's anything extra that you want to do, it will, it'll do that for you. Yeah, um, one thing I wanted to, to talk about, which is pretty neat is that it adds this concept called get initial props, which is not a standard react lifecycle method. But they add it in. And the way that it works is that it's, it's in a sync method, which means that you have to actually return a value from it before it will actually render your component. And by doing that, what you can do is you if you need to fetch any data on the server, before it actually kicks the HTML out to, what it will do is it will hold up rendering that component, because it's a sink, until you do like, an Ajax requests or something that needs to take a little bit of time to actually fetch some data and bring it back - -37 -00:11:20,280 --> 00:11:30,120 -Scott Tolinski: for the render to happen. So does this give you access to maybe some sort of like a loading component? While you're waiting for that data? Is there like a, you know, while this is loading, throw this up? - -38 -00:11:30,150 --> 00:11:59,670 -Wes Bos: Yeah. Um, what it will do is, because it can fetch everything, it fetches everything without a page reload, there's a little component. And if you look at the Hacker News example that they have, it's great. They have this little, you know, some websites have this like little loading bar across the top where it sort of cuts across, it gives you one of those. So it gives you some progress in terms of how it needs but again, that that's not there, if you if you need to preload, if you preload some of your pages. Awesome. - -39 -00:11:59,700 --> 00:12:00,750 -Scott Tolinski: Yeah, that sounds great. - -40 -00:12:01,260 --> 00:12:14,610 -Wes Bos: Yeah, big fan, I am definitely going to be recommending it for people starting out in in react because it just does away with any of the the pain that comes along with with setting up your own - -41 -00:12:14,880 --> 00:12:31,710 -Scott Tolinski: nice. And so it doesn't require like servers. It's not basically any server side code or anything like that. It's just essentially, your server side rendering and your routing. But we don't have straight up database queries or anything with it Next, no, it doesn't - -42 -00:12:31,980 --> 00:12:43,680 -Wes Bos: have any of the any of that server side stuff included, you sort of bring your own back end, whether that's graph QL. In my case, I integrated it into an existing Express app. Right. So it has support for that as well. - -43 -00:12:43,710 --> 00:12:49,920 -Scott Tolinski: Cool. Yeah. Yeah, a graph. qL is another one of those things that I think we're probably gonna have to have a whole episode on. - -44 -00:12:49,950 --> 00:12:59,580 -Wes Bos: Do a whole show on that. Yeah. Big fan. I'm drinking what is I'm drinking the Kool Aid, which is the graph qL cute. - -45 -00:13:00,450 --> 00:13:02,040 -Scott Tolinski: I've never heard that before. That's great. So - -46 -00:13:02,040 --> 00:13:06,210 -Wes Bos: when I someone on Twitter said they love the Kulin, I thought that was hilarious. - -47 -00:13:07,380 --> 00:13:10,890 -Scott Tolinski: Have you you've checked in to Apollo and stuff like that? - -48 -00:13:11,610 --> 00:13:20,070 -Wes Bos: Yeah, very, very high level had a call with the folks from graph. Cool. Yeah. Which is like a hosted graph. qL pretty neat. They - -49 -00:13:20,070 --> 00:13:21,150 -Scott Tolinski: love these names. - -50 -00:13:21,570 --> 00:13:28,440 -Wes Bos: Yeah, people are just kind of, it's really funny to see like this, like enterprise database company with like, a hilarious name. - -51 -00:13:30,030 --> 00:13:32,820 -Scott Tolinski: I appreciate it, though. I love that. I love every second. - -52 -00:13:33,330 --> 00:13:44,250 -Wes Bos: It's so for those who are wondering, it's graph. Cool. Because it's a graph QL. But it's graph. Cool. Anyways, create react app is Next up, have you used create react app, Scott. - -53 -00:13:44,730 --> 00:14:41,250 -Scott Tolinski: You know what I've I've used it, but only at a brief level to basically explore maybe doing a tutorial series on react. And that was the hardest thing about for me getting a tutorial series on react was the initial setup part of it, right? Because everyone has opinions about what they want to use. And, and I don't want to spend, you know, two whole videos on setup. And if I'm going to do Webpack, I don't want to have to teach you Webpack from the start. So for me, the Create react app was like the perfect solution for getting something like that going. Yeah, but I haven't used it in any major projects, just tutorial based stuff. But it's a fantastic way to get off off the ground. Like I said, there's nothing I hate more than spending so much time writing tooling and stuff like that. Yeah, do not copy and paste. Uh, you know, like, I remember when Gulp was the thing, it was just sort of like you move your Gulp file from one project to the next. - -54 -00:14:41,490 --> 00:14:44,190 -Wes Bos: Yeah, you have like 800 Gold files going at once. - -55 -00:14:44,190 --> 00:14:50,220 -Scott Tolinski: Yeah, yeah, exactly. So anything that can reduce that amount of time for me is is a plus. - -56 -00:14:50,610 --> 00:16:55,770 -Wes Bos: Yeah. So for those who've never heard of crate react app, it's essentially like a kind of like a starter kit for react. Um, if you think back to the like, If you've got kids, you got like a Friday night with three hours to kill, and you're like, Oh, I'm gonna try out react tonight, and it's gonna be good. And then, and then cut the three hours later. And you're just sobbing on StackOverflow. Why? Why syntax error angle bracket what is going on. And so what create react app does, it just sort of like sweeps, it's more magic, it sweeps all of the bundling, and build steps and server steps. And all of that complexity gets swept under the rug. And you don't have any dependencies except this thing called react scripts. And it will just take your your main js file in a file called index HTML, it will serve up your index HTML, and bundle your react app for you. And then, at a certain point, you you have all this, it gives you your build server gives you hot reloading, it gives you CSS importing, it just gives you all of that for free, which is great. And then at a certain point it it, it gets to a point where you actually need to customize it a little bit because whereas something like next j s is meant to always be built in next jass create react app is more to like, just get you started to build your application. And then when you need to do something custom, like, for example, one thing it doesn't do is CSS preprocessors currently, so if you want sass or something like that, either got to do it totally separate with a gulp task or a node script, or you have to eject from create react app. And then what that will do is it will, it'll go under the rug and take out all of the magic that it was doing, and give you access to everything that you needed, which is I really like that approach because you just want to get going sometimes. And then once you've got the sort of the MVP up and running, you need a little bit more control, then you can sort of bring it out from the closet and start to work work on it. Yeah, - -57 -00:16:55,770 --> 00:17:46,610 -Scott Tolinski: yeah, no, it's one of those things that I you know, we'll get into this later. But one of those things I love about Meteor, right? It, it allows you to get going with like, absolute no effort, right? Get going, Yeah, do what you got to do. And then let's say the idea you're thinking of is a total bust and you want to blow it up. You didn't just waste a whole bunch of time, on the Getting Started stuff. There's there's nothing more frustrated than like, getting all going finally getting into code and then just being like, I don't really feel like doing this anymore. And I just yeah, this time. Yeah. So no, I love tools like this. I'm glad to see this, this come out. I'm really happy to see that, you know, maybe some command line stuff coming to the React community. Again, that was one of the things I loved about the rails community, the rails command line interface, that sort of stuff. So yeah, a plus a plus for me. - -58 -00:17:47,160 --> 00:19:05,790 -Wes Bos: Okay, cool. All right. So next up, just a quick one, React dev tools and Redux dev tools, likely you have already used them. If you haven't. React dev tools and Redux Dev Tools essentially allow you to view your application as react sees it not as the the render Dom output. And that's extremely helpful. Because react is all about thinking in components and thinking in terms of state and props. And allow you sort of just appear into that you can change props, and view state and whatnot. So a couple quick tips, I thought that not everybody necessarily knows, when you select a component in react dev tools, what that will do is it'll give you $1 r in your in your JavaScript console and dollar R will be equal to whatever is the currently selected component in your your console. And that's great, because sometimes people are confused by the idea of components. But when you see $1 on the console, you realize, Oh, it's just an object, and there's state and props and, and methods on this thing. And I can call them right from the console without having to necessarily, the thing I use it most for is that like, if I build a method, and I want to call that method, and I don't necessarily want to like hook it up to a button, nice, um, I'll just select the component and then manually call the method right from the right from DevTools. Yeah, - -59 -00:19:06,030 --> 00:19:50,520 -Scott Tolinski: I think that's, uh, I haven't done that personally, myself. But that seems like a really nice use case. You don't have to wire it up for anything. You know? Yeah. I think even just like giving a straight up view into what that object is, is just one of the things that is definitely an aha moment in react. Because, yeah, you know, even when you're first learning things, and they show you, you know, maybe like a basic, like rafs example, where you're just using refs very basically, right? And you're assigning a ref, but you might not know that it's just throwing it on to the component, right? It's just in that object. So just really having a total understanding of what is in that object. And what's available to you is endlessly helpful, I think. - -60 -00:19:50,550 --> 00:20:03,000 -Wes Bos: Yeah, absolutely. And when I teach react in a workshop, and I show people that there's a lot of Oh, it's just an object. Yeah, the day Like not this like sort of like, mystical, - -61 -00:20:03,030 --> 00:20:10,340 -Scott Tolinski: yeah, mystical thing, CML element thing that has methods into it? Yeah, yeah, yeah, - -62 -00:20:10,470 --> 00:20:48,860 -Wes Bos: um, another little tip I have is sometimes I find people have a hard time finding the component that they're looking for, where they know where it is in their HTML. But what component that is in the React dev tools. If you know what the name is, you can quickly search for it. But if you don't know what the name is, what you can do is you select the element in your your elements panel in the DOM, your regular elements panel, and then you flip over to the React dev tools. And it will try to figure out what is the equivalent react component, and then that will allow you to quickly get to the actual component that is making and rendering out that that HTML to the page. - -63 -00:20:48,900 --> 00:21:36,900 -Scott Tolinski: And you know, it actually, I think that's a newer feature, too, because that was a pet peeve of mine was that if you hadn't first loaded react dev tools, you'd have to load react dev tools, first let it sort of get itself then you could find your element, then you had to go back to it, and then it would find it every single time. But yeah, even you know, I don't know how recently that was. But that was a just a such a nice thing. When I opened it up, I clicked on the React, you know, tab in your dev tools, and it was already selecting the element. Yeah, that was a nice little improvement there. And I super handy, I do love that they're constantly improving it too. It was one of those things where you have it, and it's an extremely useful tool, but then it just keeps getting better. And you know, that those kind of things are invaluable. - -64 -00:21:37,340 --> 00:21:47,400 -Wes Bos: Yeah, I love it, I even use it. If you want to open up netflix.com with react dev tools. Um, I think it's at least last time I checked, they don't strip the names of their components - -65 -00:21:47,400 --> 00:22:59,610 -Scott Tolinski: nice when they push to production. So it's kind of cool, because you can see how Netflix architects, their their components, they have this thing called a job bone that when you click on like a movie, it will drop down the movie details underneath it. They call that a job bone. And it's really neat, like, the react or Netflix has some of the best react devs out there. So it's it's very interesting to take a look at what they're doing. Yeah, it's almost like a new style of looking at someone's CSS, which was like, I always used to love going in and exploring the big guns, CSS and sort of seeing what they're doing maybe why they're doing it. Yeah, I mean, it was like back way, way, way, way back in the day, when Amazon was using as or eBay, whoever is using a spreadsheet. And people all of a sudden, were starting to talk about sprites. Yeah. And it was like stuff like that you didn't know that these people were doing until you dove into their code, or someone did a blog post on it. So being able to see someone else's component structure, sort of see how someone else thinks about react, but not only just someone else, but somebody like the amazing devs over at someplace like Netflix, you know, yeah, to get their ideas onto it is just really awesome. - -66 -00:23:00,720 --> 00:23:55,230 -Wes Bos: That's pretty neat. Real quick, I'll run through Redux dev tools as well. So Redux is sort of a state management library for react. And they have their own dev tools, which allow you to first see what is in your your store, which holds all of your data. In Second, it will, it'll show you exactly what actions have happened. So if you comment on a post, or like a post, or fetch some data, you can kind of they call it time traveling, which means that you can go back in time and and turn off some of those things. And your UI will update as if those things never actually happened. But it's neat, because you can go like, you could go in the middle of five things and turn off the two. And the the first two in the last two would would still work. So I'm a big fan of the Redux dev tools. Obviously, if you're working with Redux, you probably are already using - -67 -00:23:55,230 --> 00:24:04,350 -Scott Tolinski: Yeah, I think the council complaints do with both react and Redux, right, doesn't it? tell you hey, you're not using the dev tools? Oh, yeah, - -68 -00:24:04,380 --> 00:24:22,140 -Wes Bos: it'll tell you hey, check out the the Redux dev tools. Yeah, yeah, have them installed. It's a little trickier to get set up because your requires buy in from the code side of things right. To communicate with the dev tools, not like reactive tools, but it's definitely worth the pain of getting that installed. Awesome. - -69 -00:24:22,830 --> 00:24:23,490 -Scott Tolinski: Great stuff. - -70 -00:24:23,970 --> 00:24:30,660 -Wes Bos: Yeah, um, have you let's talk about preact and Inferno you if you heard of it, these used them before? - -71 -00:24:30,690 --> 00:25:03,720 -Scott Tolinski: Yeah, so I haven't used I've heard about I've read about I've seen all the the speed comparisons. I've read the blog posts, I have not used preact or Inferno, yet, but I know basic concepts about them. Basically, what they're they're the same API it's supposed to be as similar to using react as it can be, meanwhile, focused on speed and bundle size. So I think I don't know necessary. Why you wouldn't use them? I just haven't. To be honest. - -72 -00:25:04,859 --> 00:25:44,400 -Wes Bos: I'm sort of in the same boat where it will work with your existing react code. I'm assuming you've written in ESX API. So no create class, but extending and whatnot. But one reason is that it doesn't support React Native. It doesn't have the virtual Dom part of things it has. It just uses the real DOM. And it's funny, like react is working on on making it much faster. But there's pretty much just one guy behind each of these projects, or the guy from Inferno now works on react, yeah, like, Hey, we have all of these resources. How are you doing? - -73 -00:25:44,400 --> 00:25:46,920 -Scott Tolinski: Yes, yours is faster somehow, okay. - -74 -00:25:48,660 --> 00:26:09,030 -Wes Bos: And react is pretty much just one guy, he actually lives around the corner from me nice. And just doing amazing things in terms of performance and whatnot. So it's a whole nother level. That's not really where I'm at right now with the in terms of knowing how all these perfect things happen, but some, some smart people behind it. - -75 -00:26:09,060 --> 00:26:58,800 -Scott Tolinski: Yeah, and what I think with any of these things, you know, preact and reef Inferno are both sound like amazing options, right? Because of that speed. But at the end of the day, you know, Facebook, like they did is going to, to learn and you know, snatch these people up, or or just improve their code to the point where are these libraries worth? Maybe diving into really heavily other than from like a theoretical standpoint to understand how they work? Because with react fiber and version 16, coming out, is that necessarily a great investment of your, your time or whatever? Because, yeah, no, who knows fiber fiber? Seems like it's going to be a total game changer. And I'm getting excited for it. But we'll have to see when it's fully released. - -76 -00:26:59,640 --> 00:27:26,070 -Wes Bos: As far as I see it, it shouldn't even, hopefully not be an investment because you should just be able to alias react to react. And then if you've written your code properly, it should work. But then I don't know I've never done it. So we'll have to see how that pans out. If you are, specifically if you're in I think like the mobile space, or you're very performance conscious. It's definitely something worth looking into. Yeah. - -77 -00:27:26,310 --> 00:27:41,280 -Scott Tolinski: Yeah, I think even react performance would be another topic I think we could dive so much into because there's a lot of neat little tricks, tips and tricks that I think a lot of people just overlook, or maybe don't know about, maybe the rendering cycle and stuff like that. - -78 -00:27:42,540 --> 00:27:44,880 -Wes Bos: Yeah, yeah, let's let's put that on the list. - -79 -00:27:45,210 --> 00:27:47,190 -Scott Tolinski: Nice building the list. Cool. - -80 -00:27:48,840 --> 00:28:06,120 -Wes Bos: By the way, if you have any suggestions for topics that you'd like us to talk about the whole idea with this podcast is we're going to talk about web development stuff, but also like sort of stuff that's related whether it's productivity or fitness or breakdancing, whatever it is. Yeah, - -81 -00:28:06,330 --> 00:28:09,480 -Scott Tolinski: I can I can. I don't know about Wes. But I can speak on breakdancing. - -82 -00:28:10,320 --> 00:30:19,020 -Wes Bos: I can't speak on breakdancing go. But with everything else, I'll try to speak as if I do no. Fair enough. Next up, we got react storybook. This is another one which I have not used. But I'm have recommended to many people because they love the the sort of idea behind it, have you maybe maybe I should explain it real quick. And then I'll yeah, flip it over to you to see your thoughts on it. So the whole idea behind react is that you build not pages or not parts of your site, but you build components. And you build this really modular things that can be moved around anywhere in your app. And as long as you feed your components, the right things, you feed them the right data, you feed them the right functions that they need to to work, then they should be movable anywhere in your application. So I always like to equate this to CSS. If you've ever built something in the sidebar of a website, and then tried to move that maybe to the footer or to like the main section and then your CSS breaks. That's because you are dependent on your sidebar CSS for something that is in your sidebar. Ideally, you would write your CSS so that the CSS just applies directly to that component, regardless of where it shows up on your website. So the same idea is with react where you can then apply, you can put these components anywhere. So react storybook aims to take you out of your application, and build your components in isolation. So what you can do is you build this library of all of your different UI components, maybe have a button, maybe have a danger button, maybe have a button with text in it. Maybe you have a video player, maybe you have a video player with multiple videos and then you can sort of just how Have a list of all of these different components and all the different places or all of the different ways that they may be rendered. And then you can just work on the component where via your styling and your functionality and, and whatnot. And then you just build them in. And then it's like Lego, you got all these components, you started to just click them together and start to build your application. Yeah, - -83 -00:30:19,020 --> 00:32:46,140 -Scott Tolinski: and you can have various states of props in there, too. So you can show off one component with x props, and another component with y props, or whatever. So you can see all these different essentially versions of your components that can potentially be modified by what you're passing in. I have used it. In fact, I like it. A lot of the biggest problems I have with react storybook are getting it to play nice with my environment. Whereas I'm not doing all of my CSS in line, I'm doing some CSS in line, but I'm not doing all of it in line, right. So having it work with my CSS preprocessor. And getting it all sort of set up that way, isn't necessarily the most fun thing for me. Yeah. But in terms of like the features that you get, I do love seeing your components in isolation, I love being able to sort of modify how you think about your components that way, and seeing them pulled out gives you a different view and can potentially illuminate some issues that you hadn't necessarily thought of that it's so easy to just think about these whole things in the system that they exist in. But the moment you pull them out of that system, why is this breaking? Or maybe you've not having your your correct, either default props or required props or stuff like that, that you may not have thought of being required or needed. So for me, it's one of those things that's really nice. I like it a lot. But does it necessarily find itself in my sort of heavy workload? That that's the hard part for me is finding time, if it was an automatic, like, here's the kind of tool that I would love it to be, I would love it to scan my directory and just pull out all my components and do it for me, right? Which is not a bad idea. Yeah, it's it's a little outrageous, but it's not, you know, if it could do that, then I would be on board in one second, obviously, because there's no time overhead. But as it is right now, I'm spending a lot of time coding and testing and whatever. And I don't know if storybook ends up finding its way if I if I'm on a team, maybe more time available, I think it would be a superduper great resource, but as like a solo Dev. Not I'm not quite sure I have the personal capacity for it. Yeah, - -84 -00:32:46,140 --> 00:33:06,840 -Wes Bos: that's true. It definitely would save time on larger sites with a bigger team. Especially if you have different people working on the on different components. Oh, it's pretty nice. That's that's another show we should do is talking about style components and inline CSS in your components versus just a style sheet for your actual application versus - -85 -00:33:06,900 --> 00:33:10,530 -Scott Tolinski: Yeah, something like I am it's Oh, and that's a fiery one to people. - -86 -00:33:10,560 --> 00:33:15,900 -Wes Bos: Yeah, people get work But wait, hold on. We have a name for that. What is it? Mama drama - -87 -00:33:15,930 --> 00:33:23,610 -Scott Tolinski: mama drama. That's some hot hot takes. Yeah, that that episode will be a soundboard full of hot takes. Yeah, we got to get a soundboard. - -88 -00:33:24,180 --> 00:33:28,950 -Wes Bos: We're gonna get a soundboard where whenever there's drama, we're gonna it's gonna be like mama drama, - -89 -00:33:29,130 --> 00:33:30,690 -Scott Tolinski: or some drama, Mama, - -90 -00:33:30,960 --> 00:33:41,610 -Wes Bos: drama, drama Mama. All right. Last one, we got Meteor, which is something I've never used. So I'm gonna flip this over to Scott. - -91 -00:33:41,610 --> 00:36:17,150 -Scott Tolinski: Yeah, so I use Meteor all the time, especially in react projects, for a lot of reasons. For instance, basically, it gets a number of reasons it gets getting started really easy. It has a built in database, which you know, uses Mongo for better or for worse, it's easy to get set up. It bundles it all in, there's basically no tooling configuration out of the box. If you want to add stylist, you want to add sass, you just do Meteor add, stylist, whatever. It takes care of everything, in terms of the build tools, compressing all of that sort of stuff. But really, it basically just allows you to have a lot of things at your fingertips that you wouldn't have reduces a lot of boilerplate. So you have server side code, with node, basically out of the box along with methods that allow you to communicate between the server and the client without having to write an API yourself. So for instance, on the client side, I want to update something in the database, I can just run a meteor call and then the method name, pass in some information, data, whatever, sends it to the the server side, server side can hit the database, do whatever you want. In addition, it also has things like in the latest version of Meteor. There's a lot of really nice code splitting and bundle bundle stuff. So you can do conditional module loading, especially with react, it really makes it. So you can basically have these conditional bundles that greatly reduce the initial load time, right. So if you're only loading up, maybe whatever the user seeing, you can have these bundles of your different components that load at any given point, you can cache those bundles, you can split your your bundle size up that way. So it basically gives you a lot of tools that might be sort of complex, either through a Webpack config or something like that. Or even having to write a like an express back end, it gives you all that stuff out of the box makes it nice and painless. And then it In addition, it comes with this like prototyping insecure mode, where you can actually do database writes directly from the client side. So in your react component, you could do a Mongo insert directly from a method or something like that. It's obviously not something you'd want to leave in. But if you're doing a pet project or something like that, you just want to try something out. Not having to write that API or anything like that can save you a whole ton of time. - -92 -00:36:17,520 --> 00:36:39,780 -Wes Bos: Yeah, that's pretty sweet. I think a lot of the stuff that we're talking about today all breaks down to, I'm super excited about this thing. I've got a couple hours, and I want to jam on it right now. And these tools are great for that. And they also allow you to sort of say, Okay, this is getting real, how do I settle down and make this actual into a production application? - -93 -00:36:39,809 --> 00:37:16,079 -Scott Tolinski: Yeah, and I think there's a lot of, if there's any concern about Meteor, it's either one that it forces you to use Mongo, which I don't think is going to be forever, the same team that's behind Apollo is believed mostly behind Meteor. So I could see a future where Meteor is using Apollo by default. Is that you that way, you could use whatever database you would like. But in addition, you know, I have several large production apps in Meteor. And if there's any concerns about scaling, I think it's totally overblown. I think you can scale up and Meteor really well. Just Yeah, - -94 -00:37:16,260 --> 00:37:40,610 -Wes Bos: yeah. And same for Mongo too. I get a lot of people Pooh poohing Mongo, and I have a couple of fairly large applications running on MongoDB as well, obviously, it's, it's not the most relational thing, if you're gonna do a lot of relationships, that's probably a Postgres or MySQL is, is a good pick for that. But you have to be doing some serious stuff to actually start to run into these issues. - -95 -00:37:40,610 --> 00:38:23,340 -Scott Tolinski: Yeah, in interest. I mean, that's a big thing is is this fear of scaling up? But how many of these projects need to scale up to the size of something where it actually becomes an issue? Like, yeah, I would have to assume that if anything I made that started in Meteor was ever going to get to be the size of Twitter, or something like that. I would have a team of engineers who can figure that out, right? Like I did that that doesn't need to be a concern right now that needs to be concerned, potentially somewhere in the future. For me, I'm definitely in the camp of Get up Get going. Get get something rather than actually, those were actual lyrics to a goody mob song. By the way, get up. - -96 -00:38:23,630 --> 00:38:24,170 -Wes Bos: Get some - -97 -00:38:26,960 --> 00:38:30,980 -Scott Tolinski: CeeLo Green right there. There's like 90s, cielo 1990s. - -98 -00:38:31,050 --> 00:38:31,710 -Wes Bos: That's awesome. - -99 -00:38:31,710 --> 00:38:37,050 -Scott Tolinski: I'm just dropping rap lyrics by accident. Wow. It's a It's a gift in a curse. - -100 -00:38:39,630 --> 00:38:52,469 -Wes Bos: Oh, that's great. Cool. So what what is a feature of Meteor look like? I realized that like Meteor just sort of dropped what was it was a blade as their their templating engine in place? Yeah, Blaze or react. Right. - -101 -00:38:52,469 --> 00:40:02,340 -Scott Tolinski: So I don't think that they're they're still supporting Blaise, but what they did is they open sourced it. So Blaze is actually totally underrated as a front end framework. And I think the reason specifically why it is is because there's no like, there's no one using blaze standalone. But if you were to use Blaze, I think you'd be pleasantly surprised. It basically uses a variation of handlebars called space bars. There's some really nice integration with like just general actions, dealing with events and stuff like that. But for the most part, you can use, you can choose to use any front end framework you'd like. So Blaze, view, Angular, whatever, and it plays really nicely. The for me, the future of Meteor, I think is going to be more in the the data layer, we'll have to see. They're doing an incremental update right now to get it on. I think node eight right now is the next version of Meteor. But this 1.5 just came out with the the bundle splitting and stuff like that. And there's like a really cool, I don't know if you've ever used the application days. disk to see what's on your hard drive. - -102 -00:40:02,340 --> 00:40:03,599 -Wes Bos: I have open right now. - -103 -00:40:03,599 --> 00:41:56,150 -Scott Tolinski: Yeah, Daisy disk love it. So that should be one of the sick to sick pics at some point. But yeah, so Daisy disk has that really cool circular visualization, right. And then the latest version of Meteor, there's a core package that you just add just by Meteor add bundle visualization or bundle visualizer. And it shows you all of where this basically just like Daisy disk where the size of your application is based on what you're importing, and when you're importing it. So that way, you can look at it very clearly and say, hey, why is you know, this being loaded right now when I'm not using it? Except for I'm only using the whole administrative side of the site. When you're on slash admin? Why is it all being loaded? bundle size is huge because of it, you can then figure out really nice ways to not only trim your dependencies, but also trim up your bundle size a whole bunch. Yeah, yeah. So I mean, meteors dropping great features left and right, the team behind it's excellent, really great, talented people. So, you know, I would love to see better integrations with Apollo, if you end up getting sort of like a graph qL system out of it as easily as the meteors tracker system works currently. Then that would be really great there right now, their whole, their whole thing is this pub sub system where you're publishing and subscribing to data, and then it's automatically reactive. So you know, changes on the database automatically get pushed through a socket to your front end. Yeah. So I could see a future where you know that that system is integrated in a way with Apollo or something like that, and then you can have all the benefits of graph QL. Meanwhile, having this the same sort of pub sub system, obviously, I'm not a developer on it. I have no real insight there. But I think it could be a, you know, a really cool future for Meteor if it continues to grow. - -104 -00:41:56,630 --> 00:42:10,079 -Wes Bos: Yeah, yeah, I definitely think that that's something we're gonna be seeing, or you can already do it now in graph qL, so on called subscriptions. I think that is interesting that that might be one of your back end choices for building - -105 -00:42:10,079 --> 00:42:24,230 -Scott Tolinski: an app. Yeah. Yeah. Like I said, I'm a big fan. I've published, I don't know, five or six, large Meteor and react applications. And right now, it's my favorite stack. But, you know, obviously, this stuff changes all the time. - -106 -00:42:25,500 --> 00:42:30,750 -Wes Bos: Cool. All right. Well, now it's time for the part of the show that like we like to call - -107 -00:42:30,780 --> 00:42:33,480 -Scott Tolinski: sick pigs, sick pigs. - -108 -00:42:35,099 --> 00:43:53,820 -Wes Bos: This is the part of the show where we tell you one thing that we are enjoying this week. And that you should check out and it might be a tool might be a thing might be a dongle, you don't know. So my sick pick this week is an application for OSX for your iPhone. And I think for Android, and a web app is called parcel. And I'm doing a lot of ordering stuff online. I get sticker ship from China, I buy a bunch of stuff from Amazon. And I always hate having to like find the tracking number and check where it is. So personal app will allow you just to throw all your tracking numbers into the app. And then it will give you a push notification on your desktop and on your phone. When there's a change in that actual the tracking of that, which is pretty sweet. And then the One really cool thing is that you can it gives you an email address that you just forward your emails to and then it will it'll sort of detect the tracking number in the email. And then it will add it automatically. So every single time you get an email from Amazon, you can even set up a rule in Gmail, when there is a email that says your order has shipped, then forward to the special number and automatically add it to your parcel app. - -109 -00:43:53,849 --> 00:45:42,329 -Scott Tolinski: Cool. Yeah, I've never heard of that before. I could see like an everyday situation where that'd be nice. Check it out. Yeah. So my sick pick is something that I've used for a little while. Now, this isn't necessarily anything new, but I feel like not enough people talk about it or know about it. It's a fish shell. I know z sh is really popular. And I personally use GSH for a long time. But fish shell is pretty much just like that fish, z sh where it's a replacement for bash for your shell. And it basically it adds a ton of excellent features fresh out of the box, like the auto completion features and ghosting of your files. So when you're typing, it has like a ghosting auto completion. So you instead of like sort of guessing when you hit tab, like what is this going to autocomplete to if you have two files that are similar name, you can actually see that ghosting and you can change between them. So if you can see that it's you can type in a couple of letters, you can see that it's finding a particular file. I think it's just the up or down key allows you to change which particular file Actually selecting. In addition to that, it's, it's just really nice. There's a ton of extensions and themes and there's additional like, Oh, my z sh stuff. There's also Oh, my fish or fishermen, which are two two versions of that package fishermen. Yeah. And they're both great. You can you can use the command line to download and install themes. I have obviously like a cute little theme with like a little guy like sparkling rays out towards the, the the command and stuff like that, or even just showing you get features and things like that. So my pick is fish shell. I feel like there's probably not enough people using it. It's an excellent replacement for bash or z. Sh, who highly recommend. - -110 -00:45:43,139 --> 00:45:50,460 -Wes Bos: Cool. I've heard heard some really nice things about it. I have a, I've got a course on z sh or Zed sh as we say over here. Oh, - -111 -00:45:50,820 --> 00:45:52,110 -Scott Tolinski: yeah, I forgot about that. It's - -112 -00:45:52,110 --> 00:45:54,719 -Wes Bos: funny. People are like, What are you saying? Zed sh for? - -113 -00:45:55,829 --> 00:45:58,349 -Unknown: Your extra? Yeah, extra carrots and - -114 -00:45:58,349 --> 00:46:16,469 -Wes Bos: shells. It's it's I don't know, I think Canada should should abandon that said. It doesn't make sense. But I've got a command line power user.com, which shows you how to use the Z shell. In a lot of people have been showing me some pretty nifty things with fish as well. Yeah. Apparently, it's it's fast, - -115 -00:46:16,469 --> 00:46:31,260 -Scott Tolinski: really fast as well. Very fast. Yeah, both of them are big improvements over bash. So as long as you're using z, sh or fish, I sort of latched on to fish recently and have been very big fan. But yeah. Cool. - -116 -00:46:31,260 --> 00:46:35,940 -Wes Bos: That should be another. I just wrote that in the doc. That's another we'll do a whole episode on the command line. - -117 -00:46:35,940 --> 00:46:40,380 -Scott Tolinski: Hey, yeah, I think that's an underrated skill to have Definitely, - -118 -00:46:40,440 --> 00:46:42,389 -Wes Bos: yeah. should be taught in grade schools - -119 -00:46:42,420 --> 00:46:43,889 -Scott Tolinski: should be taught in grade school. - -120 -00:46:46,500 --> 00:47:21,750 -Wes Bos: Awesome. Well, that's it. That's the first show in the book. All right, the last segment of this is called shameless plugs. It's where we plug stuff, we try to get you to spend all of your money on us, or our friends, or whatever it is that we need to direct stuff to. So I'm gonna plug my learn node course right now I just released it about a month ago, it goes into building an application with Express Mongo passport. pug, it just shows you how to build an API as well as a server rendered application right on the server. It's become super popular, - -121 -00:47:21,750 --> 00:48:25,590 -Scott Tolinski: I think it's sold over 6000 copies so far, and people are really, really enjoying it. Yeah, excellent, excellent stuff. Um, and I am going to shamelessly plug my latest series which is React Native for everyone, which is basically getting started with React Native. And you don't have to know react, you don't have to know React Native, only thing that's required. It's a little bit of JavaScript. And we use the Create React Native app, which bless you build an app and something called Expo, which Expo basically holds your hand a little bit makes it really easy to get up and running. And look just like create react app, you can eject out of it anytime you want. If you want to use straight up, create, just React Native. But basically, it takes you through, we build a tip calculator, and by the end of it, you'll actually have an APK file signed and ready to get uploaded to the Google Play Store. As well as whatever the iOS file is, I'm not quite sure what it you know, and you don't end up working with those that much so. - -122 -00:48:26,040 --> 00:48:36,510 -Wes Bos: So you would just there's a bit of an aside, but Expo Expo means you don't have to install Xcode or whatever the dog of react. Android is, right? Correct. But - -123 -00:48:36,510 --> 00:49:18,659 -Scott Tolinski: we do in this series anyways. Okay, so you don't have to install Xcode, you don't have to install the Android SDK. But with Expo, basically, it allows you to essentially push the code without rebuilding a native app every single time, it sort of like a native app shell that goes around your native code, it makes it makes one, when you save an update, it makes everything a lot faster, in terms of seeing your changes. But it also like you said, it reduces the overhead of the amount of things you have to install. And you can install Xcode or the Android SDK if you want to use those emulators and stuff as well. - -124 -00:49:20,400 --> 00:49:24,000 -Wes Bos: Cool. That's a good good so check out Scott's course on - -125 -00:49:24,000 --> 00:49:35,429 -Scott Tolinski: Oh yeah, I forgot to mention Where's store dot level up tutorials.com you can over there. There's a bunch of series but it should be number one on the front page there. - -126 -00:49:36,360 --> 00:50:01,380 -Wes Bos: Awesome. So that is the first show in the books. Thanks so much for tuning in. If you could give this a five star or one star or whatever star you thought review on iTunes or whatever pod catcher you are using that would mean the world to us. We're gonna try try like really pump this thing up so that we can get a lot of subscribers and and and really devote some time to doing the show. Isn't that is that it on your - -127 -00:50:01,380 --> 00:50:02,639 -Scott Tolinski: end, Scott. That's it. - -128 -00:50:02,670 --> 00:50:05,909 -Wes Bos: I got nothing. Awesome. See you later folks yet. - -129 -00:50:07,109 --> 00:50:17,609 -Scott Tolinski: Head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player in drop a review if you'd like this show. Until next time - diff --git a/transcripts/Syntax10.srt b/transcripts/Syntax10.srt deleted file mode 100644 index cccf17b10..000000000 --- a/transcripts/Syntax10.srt +++ /dev/null @@ -1,256 +0,0 @@ -1 -00:00:06,000 --> 00:00:11,219 -Unknown: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:14,910 --> 00:03:18,930 -Welcome to syntax, in this episode, we're gonna be talking about using CSS in JavaScript, a little bit of maybe the libraries involved in that, some of the what and whys and we're gonna take this one pretty lightly, because I know this is a fiery topic. So we're gonna just talk about this from based on our experience, sort of what we like and dislike about the different processes and libraries and stuff like that. So to get things started, we want to have a word from our sponsor. Thanks so much to Freshbooks, for sponsoring this episode of syntax. We'll talk a little bit more about them later on in the show. But make sure you head on over to freshbooks.com forward slash syntax and enter syntax into the How did you hear about us section? All right, well, we're gonna kick it off talking about CSS and j. s, or inline styles, they don't seem to be called inline styles anymore, I think because a lot of people got a bit butthurt over that, that they thought that it meant that you're actually writing your like styles in a style attribute on your HTML tag. And that's not what it is at all. css in js is, essentially, when you're writing an application in view, or Angular or react, or any of these things that is very component based, it's starting to make sense to couple your CSS that styles that component with that component itself. So that's the whole idea of CSS in js, where you couple those things together, it's sort of throwing the whole separations of concerns out the window, and saying more like, Well, actually, you probably do want this template and the CSS to be tightly bound together. So that's sort of that's sort of where I'm coming at it from maybe Scott has some ideas of what is styled components or what is CSS and j. s, and what problems does it solve? Yeah, so you know, CSS and j s really starts to make sense, like you said, with this componentized workflow, and you end up really having your components existing. And you know, things like react storybook, where you you see your components isolated from the rest of your application, is is a one way that really kind of opened up styled components for me, because if you think about your components in isolation a lot, sometimes that's hard to think about when you have either I know it's not necessarily a massive stylesheet. But even if you have your stylesheet, broken up via partials and stuff like that, you still have essentially a massive stylesheet. And it's separate from your components. And so if you're thinking about these things in isolation, it starts to make sense as to what aspects of these components in isolation are unique to these particular components that are styles that you're never going to see elsewhere in your app, or at least maybe not going to see in the same sort of way. So in that for me, in that case, that's when it really starts to make sense, when you have these individual components that, you know, you start to actually understand a little bit more about the hierarchy of the design, - -3 -00:03:20,160 --> 00:04:14,220 -by having these components in sort of isolation. So that that's where it is for me. I think, um, if we think back to the React episode, where are we talking about, sometimes this stuff seems a little bit harder than it should be at first. A lot of the benefits of of these things that seemed like a little bit more work upfront, definitely pan out in maintainability. And simplicity in the long run. So if you think back to any website you've maybe been working on for more than three years, chances are that you have a lot of CSS in that website. And chances are that you have a lot of styles that accidentally get applied to other pieces on the page. Because up until just a couple of months ago, maybe six months ago, CSS doesn't have a concept of scoping, meaning that everything is absolutely global. So if you style A p tag - -4 -00:04:15,240 --> 00:04:29,370 -in one file, and then you try to style A p tag in another file, those styles are going to conflict, you got specificity wars, maybe you have styles that are leaking outside and accidentally applying to other thing. Now there's lots of things you can do to - -5 -00:04:30,930 --> 00:04:59,910 -to sort of fix that using a methodology such as bem will definitely fix that for you. But this takes it a little bit further and actually scopes the CSS to that specific component. So you're absolutely sure that nothing will ever leak outside and apply to any other elements on the page. So the huge for a win for maintainability huge win for large teams. Some of these companies have out 2030 developers touching the CSS at any given time. - -6 -00:05:00,240 --> 00:06:14,190 -And that can be a nightmare when it comes to making sure that you're actually breaking something. Imagine JavaScript was all global variables, you didn't have the concept of scope. That's sort of a problem that you can you could run into with CSS. And I say, could because a lot of people don't have CSS woes. And I think a lot of the JavaScript people are coming in here and trying to fix problems that people don't necessarily have, or don't necessarily know that they have. So maybe take this episode as just have an open mind, I definitely still have an open mind about it. Some of the stuff doesn't make a whole lot of sense to me. A lot of the other stuff is like, Oh, this is actually nice after using it. So yeah, yeah, and I'm definitely the same way. I think, too often we have these things that are people see them as one or the other black or white, it's either you have to accept CSS and JavaScript as your Overlord, or you are working entirely in CSS and embracing the cascade. And for me, I'm like, I'm somewhere in the middle, I embrace the cascade, and I still use CSS with my style components in many cases. And, you know, you use the style components for these things that you need that that scoping for. But, you know, I'm not essentially, - -7 -00:06:15,390 --> 00:06:43,560 -you know, super, super stuck in any particular way. It's more of like, let's see what works well, for me. And right now, using styled components, has been working very, very nicely for me. So definitely one of those things. And I think one of the concerns that people have, a lot of the times the concerns that people have, I think, are either based out of fear of using something they you know, why would I do this? Right? So then they start to look for reasons why - -8 -00:06:44,670 --> 00:08:35,640 -to support that. And some of those reasons might be well, okay, inline styles, performance is worse than, you know, CSS performance. But if you look at libraries, like styled components, what it's actually doing is adding classes to your divs and writing CSS to attach to those classes. So it's generating unique classes that you don't have to ever worry about interacting. I mean, there are there, you know, unique ID identifiers. So it's not actually inserting a CSS into your style tags on your elements. It's writing real CSS, right? So I think a lot of these things are maybe misunderstandings about how these libraries are being used, or maybe just fear out of trying something totally foreign. Right. I remember when I first saw people talking about using CSS and JavaScript, I think my eyes rolled so hard that, like, damage them permanently, I was just like, I can't I keep people to try to do everything in JavaScript. And obviously, that's a bad reaction. Because, you know, that's limiting sort of your creativity. So, you know, I opened my mind a little bit, tried it out. And sure enough, guess what I'm using it and I like it. So that's, that's sort of how it goes. Yeah, give it a chance. Um, I think it may be should just be called like CSS in JS for writing. But then it turns out to be CSS at the end of the day, or something like that, because it does eventually get compiled down to raw CSS. And it is injected into your page via a CSS file or via a style tag when that component mounts. So that's really nice for that, as well as one other point I should I should mention about this is maintainability. Like, how many of you got check how many of you have some CSS right now, and you don't know if you're allowed to remove it. If you look at some CSS, you should be able to - -9 -00:08:36,900 --> 00:09:57,990 -say I can totally delete that with confidence and know that it will not break my app. Or if you don't no longer use a component, that CSS should no longer make its way in for the party in your final bundle CSS file. So it's kind of kind of nice to be able to do that. I know there's tools out there that will scan your page and look at what you have. But this is definitely a much saner way to do it. Yeah. So I mean, do you want to do some want to run down some pros and cons here? And since we're kind of doing that right now, I guess, in this little intro? Yeah, yeah. So I guess a pro would be maintainability. And the ability to delete CSS figure out, just keep your CSS as lean as possible. Don't ship anything that you don't necessarily need to. Yeah, that that that is a great point. I mean, reduce your bundle size, overall, reduce your initial download size. And if you're doing like code splitting, and all that sort of stuff. And your CSS is in those JavaScript files that goes along with that. So you're not you're only loading what you what you need at that given point. Yeah, another, you know, Pro is interaction with JavaScript and the environment. So being able to accept props and JavaScript properties into Well, I'm in react, I guess, I should mention that I speak on this as using styled components, with react and not any of the other - -10 -00:09:59,010 --> 00:10:00,000 -front end frameworks. Really - -11 -00:10:00,450 --> 00:13:51,810 -So being able to pass in props and actually modify or have real JavaScript logic, in your CSS, or in your Yeah, I mean, that, to me is a nice killer feature, you can develop some really nice complex components that accept properties to modify them and things like that. Yeah, how many times if you wanted an if statement inside of CSS, some, I don't know, maybe seven, or Wow, I don't know how many times I've wanted it. But it's Yeah, I know that I think about like, hmm, it would be nice. Or you've had to pop in a media query, just for one little thing to do a check, or you've had to write some hack in CSS, and being able to have full access to a programming language inside of your CSS is super helpful. I also think it makes for much better readability in your code. So if you use styled components, you end up having the component with ever whatever name so you're essentially trading class names for components, if you think about it that way. And so if you have, instead of having a dot card, or whatever, if you have a card class name, you now have a card component, and you're not reading div class name card, rather than you're just reading card. That's what it is, right? So it's not a div with the descriptor of card ID, it is a card. And to me that really helps with readability when I'm looking at my my react code overall. Yeah, I think one big con. And I think as people what why people have a bit of a knee jerk reaction to it at first is that it doesn't look always like CSS. There's a couple we'll talk about this more when we get into it. But some of the implementation of CSS and j s, do not look like CSS and people love writing CSS, they love the syntax. And if you ask them to switch to something that looks a little bit different, whether using camelcase, instead of dashes, or whether you've got these arrow functions all over the place for media queries, instead of just writing a proper media query. Yeah, the syntax can be a little bit funky. And I definitely am a huge proponent of you should still be able to write regular CSS in these files, with your regular syntax highlighting with your regular shortcuts in everything, because it shouldn't feel like you are trading off something in order to get the benefit, you should be able to just write your regular CSS in. So that's totally possible with some of these libraries. Yeah, and another. That's another con is the tooling, right? How many things they used to that you use all the time in CSS that go out the window? For me, it's things like Emmet, or I used to use Haiku on Sublime Text. But the tooling just isn't there yet. Because you're I mean, your properties are based on the Library, they're not all the same. So you have all these different libraries. And the tooling for each library is up to essentially the community around that library. So unless there's one, you know, standout winner amongst everything like that, the tooling is going to suffer a little bit, because at the end of the day, there's a billion more people writing CSS than there is CSS in JavaScript. So for me, I found that to be a bit of a pain point not being able to use my keyboard shortcuts that I'm totally used to within CSS. Yeah, and I think that this is just a temporary problem. I've looked into a lot of these like, kind of selfish developer pain points that I've had around tooling and syntax highlighting, and they are all being worked on. So I think that absolutely got a lot of people blazing the way right now in in a year or so. It's going to be very comfortable to be able to write your CSS in j. s, and in your regular editors. Yeah, definitely. Yeah. And it has gotten better. I mean, when I first started, there wasn't a syntax highlighting for styled components. And then sure enough, like a week after there was a syntax highlighting for style components, so it is growing, it's a new thing. And with new things, it's always a little bit of a lag behind on on stuff. - -12 -00:13:53,130 --> 00:14:36,600 -So yeah, what are some of their pros and cons here? One of the cons that a lot of people say is that it's ugly. And I used to be this way about them, you know, with bam, you write these really crazy long CSS classes, and then you apply your CSS to it. And people myself included, you get so hung up on writing beautiful CSS, when at the end of the day, it really should just boil down to like, is this maintainable? And is this going to do the best job for my CSS? So with bem you, yeah, you have to write out your HTML is a little bit fuller, but no one cares what your HTML looks like. It doesn't have to be beautiful. You can have 1000 class names, or you can have really long class names on it. And it's not going to be a problem. So - -13 -00:14:37,770 --> 00:14:59,910 -with style components, it will most of these libraries will generate a unique class and apply it to your element. So it'll be like 4899, a five one, and then it will have that selector in a style tag or a CSS file that then correlates with that actual element. So that looks ugly. But again, that's something a source map can do and - -14 -00:15:00,000 --> 00:17:37,740 -Again, a source map is something that will show you as you've authored it in your source file rather than the compiled output, which you shouldn't be fretting all too much about. Yeah, yeah, here, here's a pro that is kind of interesting, something I kind of ran across by accident when I was developing sort of a elements folder for myself of, of a structure of basic elements of styled components for my level of tut's site. And in that process, I found out basically, if you're containing each of these elements in a file, you can export these in a way where you could export everything, import everything in sort of generate a style guide for yourself, just simply through JavaScript, right, you could grab all of these components that are defined in a file, you can output them any way you'd like. And then you get these style guides. And if I were to add another component to that file, it would just add it to the style guide for me. So using the components name, and whatever structure I determined it to have, but either way, that was like such a huge thing. Because Sure enough, I just I made a kitchen sink page for myself, in absolutely no time, I didn't have to write the HTML myself, I just said, hey, go in this file, grab me all these components out, put them in this way. And then that's it. So that was such a huge benefit, for me is like an automated style guide that I didn't even have to think about. Absolutely, I think the the last pro that I have here is shareability. It kind of similar to what you said is that these things are literally scoped into themselves. And you can bring them anywhere that you want them. So if you have a specific button or a specific grid, and you a lot of people have multiple applications, multiple code bases, and trying to get those things to look the same across all of your apps, is hard. So if you can build something where you can just npm install a component and the CSS comes along for free, or you can you share them between all your applications, it's going to be a lot easier to maintain a consistent style across all your apps. Yeah. And they're easy to extend with that, right. So if you have maybe your own library of base components, and installed components, you can take that let's say that card and do card dot extend, and then write any sort of modifications. And it's just like adding an additional class modifier and bam, or something like that. But either way, it's taking that component that exists and in modifying it. So just really, really nice way to collect your styles that need to be scoped to that particular thing. Right. - -15 -00:17:38,910 --> 00:18:49,290 -Exactly, exactly. So let's jump into some of the different libraries out there are there, we're just going to go over the few that we know, I know that there are tons out there, it's really cool. Because there's a lot of people putting a lot of time and energy into figuring is figuring this problem out. And we're gonna go through style components radium emotion, glamorous and style JSX. Again, there's a lot more out there. So feel free to look into the different ones. Yeah. And I mentioned before my experiences primarily through react, so Angular and view, folks. Yeah, we I don't have the experience in styled components or, or whatever you even call it's CSS and j. s, within view or Angular myself, but I would assume that you know, that the libraries are there. So I guess I don't know if you know, of any particular libraries for those plans. Yeah, I know, view itself has the built in ability to write all of your logic JavaScript, your templating, which is HTML ish, and your CSS all in one single file, which is really cool as well. So it comes along with the whole idea of this being isolated from from all of them. - -16 -00:18:50,370 --> 00:19:58,530 -ie up And today, we have Freshbooks sponsoring us once more. Thanks so much for sponsoring, if you haven't heard of Freshbooks, by now, it's cloud accounting software, which is essential tool for anyone that runs any sort of small, medium, large size business, it needs to build people has expenses has taxes has all kinds of numbers that need to be put in. So maybe for this one, I want to focus on one of my favorite parts of Freshbooks, which is the iPhone or the Android app. A lot of my business is done on the road, I don't necessarily have time to sit down at my computer. So the app is really really good for checking who owes me money, who is paid. Often what I used to do is when I deposited a check into the bank, and then I'd forget to mark it as paid. And then two months later, I'd be like, did they pay that or didn't they? So now what I do is I just open the app as soon as I deposit the check marked as paid. If I've got a receipt, I'll take a picture of it. Fantastic app. If you're running a sort of small business, go for freshbooks.com forward slash syntax and enter syntax into the How did you hear about a section Thanks so much to them for sponsoring. - -17 -00:19:59,580 --> 00:20:00,000 -So let's - -18 -00:20:00,000 --> 00:20:34,680 -Start off, I'll kick it off with style components. This is probably the one that Scott and I both have the most experience with. So we'll probably talk most about this. And it seems to be the most popular one out there, not that you should just go ahead and pick that one. But it's definitely one that you should be considering if you're looking, looking at different ones out there. So the way that style components works, and a lot of people say when you when you pick up CSS and j, s, and you, you learn it, you're good you go, that's it. And it's funny, because it really isn't all that complicated. So let's say you wanted to create - -19 -00:20:35,730 --> 00:22:12,750 -a button. The way that it works is that you import the styled from styled components into your JavaScript, and styled has all of the the elements built into it. So what all of your regular elements here your anchor links, your buttons, your h1 through h6, your paragraph, your div, any element you use to select your use the styling in HTML, you just say const button equals in this example, from their website, style dot A. So if you want to make a anchor link that has some style applied to it, you just create a brand new component, that is called a button or call the buy it now or called, I have one called take my money in an app I'm building right now because it's it's like a really shiny, nice button that displays the product name as well as the how much it costs and whatnot. So what that does is you use a style dot A, and then you use es six bactec. So this is using something in ESX, called a tag template literal. And it's kind of like being able to run a function against a string. So you just you just write style dot A or style dot P or style dot div, whatever element you want to use, you open up your backticks. And then inside of that, you just write all of your regular CSS that needs to be applied to that. So you can say display block background, red, margin, to REM width, and you can use JavaScript with your dollar curly brackets inside of any of these if you ever need to do any sort of - -20 -00:22:14,490 --> 00:23:00,960 -any sort of logic inside of it. So then once you have that, and you can, of course do nested selectors as well, sometimes people think like, seriously, I have to make a new one for like, Can I not just select the span inside of it? Or can I not just select the paragraph inside of this div? And the answer that is yes, you can just do child selectors, like you would in sass or stylus or anything like that, apply all of it. And then when you want to go to use it, rather than adding a class to your div, you just have are adding a class to your button, you just have this new component called button, and you use the button in your markup or in your JSX as if you were using just an anchor tag. And you can give it all the other properties that you are then used to and it will render out to a proper anchor tag. - -21 -00:23:01,980 --> 00:24:24,090 -So yeah, how did I do and explaining that you fill in the gap? I thought that was fantastic. Yeah. You know, the, um, the using the backticks, as a function was something that I had never seen before I use style components. And it was really, really like, wow, you can do that. It was is a really good moment for me, because I had no idea you could do that before this. But one of the things that impressed me most about stub components compared to its counterparts was that you aren't writing a different syntax, you're writing CSS inside of that, that string right? inside of that string. You're still using display colon, inline hyphen, block, semi colon, right? I mean, it's, it feels just like writing CSS, and you're not having to do your camel cased properties and stuff like that or camel cased values. And I really really appreciated that because what it did make because it would have made was it made really like converting CSS over to styled components really easy because I could just copy and paste it Now granted, I was pasting from stylist so I had to go in and add colons and semicolons and that kind of got it in yeah I had to I quickly googled stylist syntax and styled components only defined you know there's there's nothing out there you know what somebody tweeted me like two days ago with a screenshot of - -22 -00:24:25,110 --> 00:25:00,000 -the ability to use stylist in backticks. And it's not adapted for style components yet but it looks like it's coming in. He sent it to me specifically because they know that I love stylist, so excited about that. Yeah, I would I would be down with a discount for that because I am just you know, I've been using this and that is the the only pain point for me is having to add the colons and semicolons but for the most part, I really loved the system within styled components more so than the other options because it felt very comfortable to to me as a - -23 -00:25:00,000 --> 00:28:43,680 -CSS writer, you know, I mean, my background primarily is in CSS and front end tools more so than JavaScript, right? So coming in being able to write the CSS I'm so used to was like a really, really important thing for me. And to me, I think some of these things like being able to pass in props and access your JavaScript is easily because it's a just string interpolation. It's on backticks. Right. So using that dollar sign bracket, it's just JavaScript syntax or JavaScript syntax that you know, and love. And being able to inject that actual JavaScript into your CSS, I found to be extremely powerful. Some of the pain points for me with styled components are things like media queries, I've you define your media queries a certain way. But then after that, the syntax highlighting and tooling is sort of not caught up. So if I do a media query, and I do it using the syntax that style components, defines here in their documentation, right? In VS code, with my setup, it everything inside of the media query, like just becomes a flat string color now, so it's not like green, or whatever I have it set to, and it doesn't get the proper syntax highlighting, like everything else does. So minor pain point there, I don't know if that's just a tooling thing that will get updated at some point eventually be totally gone. But I did find some things like that a little, little clunky. But for the most part, I really liked it, all of their documentation is excellent. It shows you really practical examples about getting started, you can use it as much or as little as you need to, you don't need to use any of the advanced stuff like theming, and things like that. But you can if you want to, and they're all there and the documentation is there. And it's good, which is definitely one of those things that you know, it's easy to take for granted when documentation is complete. And, and good, right? Yeah. And I want to run over one more example of something that you run into, often, which is sort of doing a variant on a style that you have. So like, let's say you have a Buy button, and it's blue background white text. And then you have like a sale Buy button in in that case, you would change the background to red or increase the font size, or put some confetti on it or whatever it is that you want to do. And if that's the case, the question becomes like, What do I do? Do I just copy paste and make another component? And the answer is obviously, no, there's two ways you can you can sort of tackle that. The first is that you can, you can pass props to your to your component, meaning that like you might have a button called take my money. And then you might have a sale button that says take my money, and then it just has a sale attribute. So you just write sale or sale equals true. And then when you are styling these things, you have this props object available to you and you can do a check with JavaScript, little Turner Turner airy, I can never see her near ternary Oh, man is there in there, I don't know, I don't know there's no, I just continually screwed up anyways, you can just do a little turn, say it for me ternary ternary operator in there to check if there is like props dot sale. And then if it's true, then you can write background blue. Now if you've got 1516 styles that you'd like to change on that button, in that case, you can just take your your base button, not use props, and just extend it into a secondary button to maybe call the sale button. And then that will then you have two components, one that's based off of another one. But as we know, extending things can, - -24 -00:28:44,760 --> 00:29:51,750 -can get out of hand. So you gotta gotta be careful with that. Yeah. And I found extending to be much nicer in something like styled components. And I don't know if it's just because of how you're viewing these things. I don't know if the process is necessarily any different if you really think about it, but you know, I extend things to have, like, obviously, I have a main button right just button and then I have you know, primary button. And that marry button extends off of main button and changes maybe the color or something like that. But then I use props, like you mentioned for things like size, so like, size equals larger size equals smaller, whatever. And, and that will determine so you don't have a large primary button, I have a primary button with the property of large. And so like making those decisions, I found to be an interesting exercise in how you think about your components. And it has led to a lot more clarity in how I think about scoping these things. And obviously these things can all be done with CSS without JavaScript in some some sort of way. But like, I don't know if it's just the visual aspect, but it just feels - -25 -00:29:53,130 --> 00:29:57,750 -it feels more I don't know just very like - -26 -00:29:59,340 --> 00:29:59,970 -clear - -27 -00:30:00,000 --> 00:30:42,030 -More better, yeah feels more better and clear. I think what it comes down to is when you actually wrote your initial CSS, where you have the mindset where you did something like them, where you had like a button component, and then you had a modifier on that. So it's button dash dash large. And if that's the case, then it gets all the button styles, and then you have a button dash large that will overwrite or add selectors onto it. Whereas there's a whole nother set of people who prefer to have 12,000 classes like Pb 10, Patty, bottom 10, f Zed 20, which was Fanta, and then you just like you just like, take these, what's the name of that? - -28 -00:30:43,440 --> 00:31:43,980 -Oh, utility classes. Utility classes. Yeah, exactly. So those are those is it just a bit of a different way? I think the people that prefer utility classes probably go a lot more heavy on props, whereas people like more bem style will probably do a little bit more extending. And I don't know if this is necessarily fits the definition of ironic or not, but to me, like utility classes, I'm not hating on these free utility class people, by the way, utility classes, to me is much more of an inline style system than writing JavaScript, or CSS and JavaScript, because you're essentially defining your styles through class names, right? rather than, you know, I mean, yeah, rather than their class descriptions or something like that. Like I said, I'm not trying to start a flame war here or something like that. I will accept any, anything that has its share of benefits. Awesome. So that is style components. There's a whole lot more to it. But that's like, I hope hope that you get like a basic idea of like, what is it and and why does it seem to be - -29 -00:31:45,090 --> 00:32:07,590 -very popular? Yeah. So so that's styled components. Next up, we have a library that's actually really similar to styled components in syntax, which is emotion. Now, emotion is sort of it basically, I mean, a flat out says that it took the ideas from these other libraries, and it has a focus on making them a little bit lighter. - -30 -00:32:10,110 --> 00:32:22,830 -I was reading that the the performance, or the overall bundle size is supposed to be smaller. However, I just had it there, their GitHub page, and I'm not necessarily seeing that being pointed out anymore. I - -31 -00:32:23,880 --> 00:32:40,920 -do. Do you know if that's changed in their system? No, this is actually not something I've ever had, a lot of people have recommended it to me. But I don't really pay all that much attention. Because at the end of the day, I don't really have CSS performance issues. - -32 -00:32:42,330 --> 00:32:55,950 -I think it's a bit a bit splitting hairs. In a lot of cases, I'm sure there's applications out there where you really need to hunker down on it. But it's never really been a huge issue for myself. There's this bench CSS and JS benchmarks, - -33 -00:32:57,090 --> 00:33:34,590 -GitHub repo, which lists out all of the different ways. There's probably 20 of them here. And we'll talk about the mount time and the render time that is used in that. Let's take a look here at emotion. Yeah, so emotion has, the reason why I wanted to bring this up now is because it has the really similar syntax to styled components, where you're using the same backtick function style thing, the only difference is, you are using a CSS not styled. So it's very similar. I found two styled components, and maybe like syntactical ways, - -34 -00:33:36,090 --> 00:34:30,900 -but just a little little bit nicer. Yeah, I'm looking at the the render time here. And it looks like emotion is the fastest besides react without any styles. And then if you go down, go down the list to styled components, it looks like style component is almost double the render time. So definitely something to think about if you're running into issues with perf. Yeah, and as I'm seeing this, it looks like they do have the same styled object with you know, all of the different, you know, HTML properties. So like style dot h3, so it looks like to hear from their syntax, you might be able to mostly do just a standard drop in replacement from this to style components. Like I said, I I don't have the experience using it. So I can't confirm That's true. But this example right here that I'm looking at looks just like styled components. So yeah, it definitely wanted to keep an eye on - -35 -00:34:32,430 --> 00:34:33,300 -pretty sweet. - -36 -00:34:34,410 --> 00:35:00,000 -So next up, we have another one which is radium, is that correct? That is correct. And this is from formidable labs, which they do quite a bit of stuff in, in the React space. So it's something that I would definitely trust. Have you used this one before? No. But this was the first library that I saw when people were starting to talk about libraries for styled components. radium was was one of the first to do - -37 -00:35:00,000 --> 00:39:59,970 -It I think, at least like a very more mature way. And I never used it, I think this when this came out, I was still in the whatever CSS and JavaScript sort of mode. And one of those reasons why that I was in that mode is because this is more JavaScript based, where you are defining an object of styles. And it's all very JavaScript, right? It actually feels more like writing styles in React Native or react in general, where you haven't an object property, your your CSS property becomes a, a object key, and your value becomes a string, or in some cases, is they're all strings, I'm not quite positive, they're all strings or not, but most likely a string or something like that. So to me, it's, it's a little bit more foreign. And that makes me scared. And, yeah, I think that's probably why I never latched on to it. Yeah, this is just looking at the the base syntax of nested objects and having to use quotes around your actual values and, and having to camelcase maybe like font size, instead of font, dash size, and all those things. I think that that's a lot of people don't care about that. But I think that most people will care about it. And especially if you're trying to bring on, maybe you have people on your team that write the J s, you have other people on your team that write CSS, there's no way you're going to be able to convince those people, they're not going to be happy switching over to such a rigid way of actually styling your application. So that's one reason why I have never checked this out before. And I think that also goes for, for glamorous as well, where a glamorous seems to do most of the stuff that comes along with style components. But at the end of the day, the fact that it uses camel case and an object style your stuff is a bit of a deal breaker for me. So that's a reason why I have not never checked it out. Yeah, I think that is a it's a barrier to entry for CSS, people who like writing CSS, and I mean, the the joke all the time is that, you know, everyone hates CSS, it sucks, or whatever. But I love writing CSS. And I know a lot of people really like writing CSS, you know, embrace, embrace the cascade and all sorts of stuff, right? They just like they come from this CSS background. And so for me, like you said, that is a deal breaker, it pushes me a little bit too far into the I'm uncomfortable territory, to necessarily like really reaping the benefits. I mean, I can't copy and paste my CSS code that exists into a glamorous object without doing some heavy modification. It's not just adding semi colons and colons or whatever, it's heavy modification. And that to me is is a bit of a bummer. That will put me off from using it. Yeah, yeah, absolutely. I feel exactly the same way. So I'm have used glamours. Before. Note, taking a look at it, I've taken a look at all of them, I did a bit of a drive by tour to like, check out all of them. And I was like, trying to see, you know, everyone's telling me about the hype, hype hype about CSS and .js. But most of the time, people were mentioning styled components. So I had that one in my mind is like, Hey, this is the one I really want to look at, because my audience is telling me about it. But at the end of the day, I was like, I don't want to make a decision, because my audience is telling me about I want to explore all of these. And like I said, I did a bit of a tour and was just like really not feeling the JavaScript object syntax. And like I said that that is probably because I come from a CSS primarily background then rather than a JavaScript heavy background. Yeah, absolutely. And I think that if you are still out making a decision, for sure, take a look at all of these and make your own decisions. I know that when we announced that we're doing a CSS and JS podcast, I got messages from at least four people being like, Hey, can I chat with you before you do that, to make sure that you know, absolutely everything about this, because the stakes are high. And there's a lot of a lot of stuff moving quickly right now. And there's a lot of misconceptions around that stuff. So definitely don't take everything that we're saying to heart, do your own research and take take a look into all of it. Yeah, for real? Yeah, I think that is a big thing. And it's just fiery, right? People get really, really upset about this. Oh, I have more so than in like most other I mean, people get upset about, like JS frameworks or databases or whatever, but like people get upset about CSS and JavaScript. So yeah, yeah, definitely do your research and what works for you. I definitely think the the JavaScript community came at it a little bit harsh, because it was kind of like, like kicking someone's door down. It'd been like Don't worry, I'm here to save you. But and then people are just saying that right in there bem styles mean like, Ah, I'm pretty happy. I'm fine. Thank you though. And then there are no - -38 -00:40:00,000 --> 00:41:48,000 -You must use this. So sometimes when people are so passionate about it, whether it's being a vegan or CrossFit, or CSS and j s, they could come off a little hard. But definitely don't let that deter you from actually checking these things out and, and seeing some of the real benefits to that. Yeah, and I'm going to take a moderate stance here and say that I like it. But I also have not abandon my CSS or my global styles, like I do use global styles still. And I do use CSS still, in addition to style components, it doesn't have to be your inner ear out, you can use a little bit of style components where it makes sense. And you can use a little bit of CSS where it makes sense. It's all about you know, what works for you, and what makes sense within, you know, whatever is maintainable within your code and your team, I have the added benefit of being the only developer on my site. So it's like, I'm the only developer, I can make these choices. And I can deal with a little bit of transition pain while I move things over and can keep some of my CSS and j. s and some of my CSS and stylus and exactly how do you like, let's take a question here. How do you handle global styles? And what do you do for that are global style styles? Yeah, so for me, I have global styles really set up and in a really basic sense of just like straight up elements stuff. So I determine what my h3 will look like, what my h2 will look like, whatever my headers, my paragraphs, all that sort of base size along with, like, what, what they do at different browser sizes. So I am still thinking as like, Hey, this is an H three, this is what h threes look like, I'm not always thinking, Hey, this is a card header, this is what the card headers look like. And obviously, you can go all the way with that and make out all your elements, - -39 -00:41:49,200 --> 00:42:21,660 -you know, really, really scoped components. But you know, I don't, I don't mind I have h threes across my site. And this is what they look like period. And if I want to modify those inside of those, I can use styled components, let's say I have a card, and you can have that scoped h3 inside of your cart, well inside of the car to the h3 is now all of a sudden, this size, or these colors, or whatever. And that is scoped to that card, because that's the only way it's used. So I have basically a general rule set applied to things like font sizes, font styles, - -40 -00:42:23,130 --> 00:43:42,270 -basic colors, and stuff like that defined in my CSS, and then most everything else moved into components. Yeah, I'm exactly the same way I've been moving over. Moving over to that way as well, I find that it's a bit too slow. And I don't necessarily know if that's the way to go is to, to redo all of the font size and padding for all of your type in every single component. So what I'll do is I'll style all my headings, all my paragraphs, all the fonts, all of the the padding, and I have a nice quick base style. And then I can I feel like I can work quickly, once I have that base style done, because I'm not spending a lot of time redoing the same work over and over again, obviously, you can you can set a set of base styles and import and export them into your components every single time. But at least for me being the only developer I don't have, it's not really a pain point for me, that that I have. So I'm fine with having them global. And I feel like I can work a lot quicker. Yeah. And for me, it's more of a personalized CSS reset, right? It's a reset for my brand, right? It's not resetting to absolutely blank, everything it's resetting to the defaults for my brand. And that's just the way it is. So yeah, that's sort of how I look at it. Not only that, but like sort of, you know, what's left in terms of, - -41 -00:43:43,350 --> 00:44:20,160 -you know, CSS, I'm slowly moving it all over. So whatever is left in CSS will kind of remain there. But there's a lot of great feelings with vanquishing a ton of lines of CSS code that you no longer need, or maybe never weren't even using anyways. But, you know, we're just sitting in your stylesheet for legacy reasons, or because they were required at some point. And you missed that, right. I know, there's tools to pull that stuff out. But either way, there is a nice amount of good feelings that come along with doing a bit of spring cleaning, and really thinking about your app from a component based style if it already exists. - -42 -00:44:21,270 --> 00:44:59,970 -Absolutely. Let's talk about the last one, which is styled JSX. And this is the one that comes baked into next j s if you've ever used that before. And the way that style JSX works is it's actually not the same as the rest of them where you you create a paragraph tag and you apply styles to it. The way that it works is that you simply just have a style tag in your component. So maybe you have a div and a paragraph and h3 and a couple other things and then you what you do is you just pop open a style tag, and then you just write regular CSS inside of that style tag but the style tag will help - -43 -00:45:00,000 --> 00:47:01,980 -Have a JSX attribute on it. And then what you can do is your selectors are just like paragraph. Or you can use class names if you want. But But generally, you can get away with just using elements, selectors, h3, paragraph, whatever. And it's going to scope those styles to only the elements and components in your, your main component. So it's not going to leak anywhere outside. So you're just write regular old CSS. But really, the only difference between this and regular old CSS is that the CSS will be transformed and only applied to those elements in that component, and nothing else in the entire application. So same benefits, just slightly different way of authoring it, which to a lot of people is is welcome. Because it's it's exactly like CSS. Yeah. And I'm gonna go ahead and say there, there's one thing that I don't like about style JSX. In that it doesn't, to me, this is me personally, if if you're not this way, don't worry about it. It doesn't feel more readable. When I look at the code. Like I said, with styled components, I look at the element and I'm no longer seeing a div, which is like an arbitrary definition, right? I'm seeing a card. But with this, I don't I don't get that same sort of further clarity in my CSS or in my components, which is why I would choose something else over this. I do like that. You can write legit CSS in this. But yeah, I think it doesn't add, it doesn't get any clarity points for me, personally, which is probably why I'm not using it. Yeah, exactly. And I think, with style components, obviously, with both of these you can, you can create these reusable components that are only style based. And then you have other components that does all of your logic, your fetching your data, and whatnot. And you can you can reuse these buttons all over the place. And they're just like just styled buttons. And with style components, the it the style dot div, it actually exports a component right for you, you don't even need to make like - -44 -00:47:03,420 --> 00:48:10,380 -an arrow function component or whatever with react on this. So pretty neat in that regard. I built a couple things with style JSX. And I built a couple things with style components. And I'm definitely on Team style components now. Yeah, yeah. here's a here's a question I have for you. That's not related to anyone in particular, but more about styles, I guess it makes more sense with things like emotion and style components or anything where you get an actual component, how what, what is your particular style of storing your styled components? For me personally, I have sort of base components and, and things that I use all the time within their own files and file structures and stuff like that. But then I also have a class of styled components that live within an individual components file, which sort of breaks some rules about one component per file. Yeah, but I'll throw it at the bottom of the React file. So it kind of stays out of the way. And this might be an extension on a component that only exists within this particular react component. And that's it. - -45 -00:48:11,430 --> 00:50:00,000 -Do you do something like that? Or do you have more of a everything lives in its own folder and file kind of thing? Yeah, it's funny, because we were just talking about this whole idea on Twitter the other day with Apollo enhancers does the same idea it's a Hierarch, high order component, do you keep that in a separate file? Or do you put it in the same file and sort of what I've settled on right now, and I could be swayed either way is, I always do them in the same file, just for my own sanity sake, especially if I'm trying to teach something to people, I want them all. I want them all readable in the same file. And if I need that thing more than once, I will put it into its own file and import it, import it in. So it's sort of like as I need it all all refactored out into its own component and import and export. But in a lot of cases, you only need it in that one file. And you're really not reusing it all that much. So I think it's totally fine to put it in the same file. Yeah, that's pretty much exactly how I do it. If it needs to be reviewed, reused. Things like layouts, buttons, that sort of stuff. headers, paragraphs. Yeah, yeah, typography, which I think makes people who love rules Twitch, because people always ask me like, what do you do? I'm like, kind of a bit of both. And it kind of feel it out depending on what you want. And people love, like, strict rules of always do it in a separate file or always don't. And that's just not the way that I'm going about that. So sorry, if it's making you twitch now. Yeah, right. Exactly. Again, the benefit of not being on a large team here, because you can make those decisions that that might be a little bit confusing for some people and your overall team or might make maintainability a little bit of an issue or whatever. I don't know I totally agree if this if this component is not leaving this other react component, then what is the purpose of - -46 -00:50:00,000 --> 00:51:09,390 -Moving into its own file. But yeah, again, I could be swayed either way. Cool. Um, let's finish it up with some common questions that myself I've had as well as you sort of hear, maybe people ask about it. One of the big ones is what about a framework? What if I'm using a framework like bootstrap or foundation? How do I then use that framework as well as use my my styled components? So I'll answer this one from the standpoint of style components, you still have the ability to add classes on to your elements regardless, so you don't have to go all in on this, you can just add classes with style components, there's the ability to add an options object, where you can give it additional class names, as well as give it your own CSS. That's what it will do. When it creates the element at the end of the day, it will give the CSS class to it. So no need to sweat it, you can definitely use both of those. And and build a nice app as well. Have you had to use those together? Scott, I haven't haven't done much work with CSS frameworks really, overall, or at least not recently. So - -47 -00:51:10,410 --> 00:51:39,150 -yeah, I think that's a great solution, though, because then you still get all of that good stuff that comes with. And, you know, it's nice that the tools offer that ability to not have to totally abandon all of that stuff that exists and makes some people's lives a lot easier. So yeah, exactly. Even if you're like migrating something over as well, you might want to take the existing styles class, and then start applying your new stuff on top and slowly phase out that that class name that you've had, Yeah, totally. - -48 -00:51:41,670 --> 00:52:05,400 -Um, what about vendor? prefixing? You know anything about this? Oh, to be honest, stealth components, I think brings in a certain level of vendor prefixing that you can adjust. It doesn't not? Yes, it has exactly. Because I haven't thought about Auto prefixing. Since I started using style components, you know, when you're inspecting your CSS, you can see it's getting those prefixes. - -49 -00:52:06,750 --> 00:52:31,380 -I'm embarrassed to admit that I did not look into the configuration of that. And I was just like, okay, it's getting the prefixes. Okay, cool. Yeah, it just works. So you don't have to worry about it. Because I believe all of these things we've talked about today, come with autoprefixer built in. And then if you ever do need to pass additional options to these things, you generally can do that in your, your Webpack config, or your next j s config. - -50 -00:52:33,300 --> 00:53:51,930 -Word. And then the last one, we talked a little bit about already, which is what about Emmet, and syntax highlighting which I have not personally gotten Emmet, to work within VS code and style components. And I have syntax highlighting working, definitely if it's in its own file, but if it's a part of a another react component file, it becomes a little bit trickier. I mentioned before that if you have things like this extra Meteor query syntax that the second layer of code wasn't getting syntax highlighting for me. So I don't know if you found any other solutions for any of this stuff. Yeah, um, so the way that these editors work is that you have scope. And what scope means is that you can write some regex, to tell your editor that when you are inside a style tag, you are writing CSS. So all that needs to be changed in these things is that you need to rewrite one of those red X's that will tell you when somebody writes style dot div or style dot something, it will kick in the CSS syntax highlighting rather than the JavaScript syntax highlighting. So and then once that's the case, all of your plugins like Emmet, and whatever, all of your auto completion, all of your things that are only triggered when you're in the scope of CSS will then start to work. So - -51 -00:53:52,980 --> 00:54:19,560 -sublime has absolutely nothing for this right now, which is a bit of a bummer. I think it's because it's a bit we're a bit limited and sublime in terms of how much fine grained control we have. I think that's part of the reason why VS code and Adam are becoming so popular right now is that you don't have to wait for the mothership to add in something to the JavaScript highlighter, like for example, in - -52 -00:54:20,670 --> 00:54:59,970 -the JavaScript highlighter in sublime was broken for a long time when we started writing ESX. So somebody wrote this thing called Babel, or Babel, syntax highlighter for sublime. And that was able to highlight all the new vs six stuff as well as highlight JSX, right, because JSX is not part of JavaScript, but someone is able to modify it. So now we have to wait for either the mothership of Sublime Text to update it or wait for the person who's writing the babble one two to implement this as well, which is kind of a bummer. And I know Adam and VS code, allow anyone just to go in there and add themselves rather than - -53 -00:55:00,000 --> 00:55:29,190 -having to wait for your your syntax highlighter to do it. So I'm definitely looking at switching over to VS code right now just because of this. I don't know, I don't know if there's any movement in sublime, but I haven't seen a whole lot of info about it. Yeah, I'm 100% in VS code territory lately. I think some of the some of the issues that I might be having might be related to the insiders build that I'm on. I'm on like a beta version of vs. code. And they actually use an entirely like, new Emmet system, - -54 -00:55:30,480 --> 00:56:22,560 -which I have found, because it's obviously it's in beta, I found to be extremely buggy from time to time, but obviously, it's beta version, right? You can't expect anything else. So that to me has been sort of bouncing around. And each each update that comes each nightly update. I'm sort of like, Oh, please fix this. And this, okay. Yeah, sometimes they're fixed. Sometimes you're not. And sometimes it breaks whatever. And yeah, that's what you get for trusting beta software. Exactly, then this stuff I think will be fixed soon, I hope will be fixed. Because there's no way that we're going to get big adoption of CSS and JS before all of these things are hundred percent fixed. Because if you tell any developer who's used to doing their job, everyone has deadlines, and you try to switch them to a new method of doing it and tell them get the same amount of work done. They're going to be extremely frustrated not to have the regular tooling and - -55 -00:56:23,790 --> 00:56:25,650 -in highlighting that that's available to them. - -56 -00:56:27,780 --> 01:00:00,000 -Word. Cool, so let's switch over Is that good? Yeah, I think it's good. It's, uh, we're at an hour. So all right, let's switch over to our sick pics. What do you got for me today, Scott? Yeah. All right. I have a email client for Oh, s x, or I guess it's Mac OS now that with everything matte or OSX, and I have to research for Mac OS. Okay. This is boxy. And this is boxy. app.co boxy is a paid mail client. It's cheap. Let me see how much it is here. For Yeah, Mac OS. It's 499. I was having a major struggles trying to find a nice email client. I opened up Apple Mail, because I just got a new laptop. I opened up Apple Mail for the first time in this century and was like, well, let's check out Apple Mail. It looks the exact same it sucks it honestly, I feel really bad saying that. I think one of their developers tweeted at me when I said it was archaic looking. I felt really bad about it. Because like, No, I mean, the the whoever works on it, I'm sure that it's all Apple legacy stuff. But it honestly it felt old. It felt clumsy. It felt featureless. So I started looking for mail apps that had a lot of the features that inbox has I use inbox, Google comm for all my mail stuff, because of the snoozing, and the sorting and the pinning and all that good stuff it does. And boxy is essentially a you know, a I don't know if it's an electron app, I would assume it is. But it's essentially inbox for Google on the desktop. And it has a bunch of fancy features that are outside of the scope of inbox. So I've been using it. It's really nice. It feels and looks just like inbox. It has themes. It has account switching. And they just had a new version come out like this week, like a day ago or so like boxy. It's, you know, the next version of it. I actually haven't even downloaded the second one. But the first one is so good. That, yeah, I'm assuming this is just going to be the next step and making it super nice. But overall, definitely a big fan. If you're looking for a nice email client. That's pretty cheap for 99 on the Mac App Store. Yeah, I bought this after you had recommended it. And so far, so good. I'm not totally sold on inbox feel like it's a bit not as information dense as I'm used to in regular Gmail. Mm hmm. And I feel like I often will, like lose emails for some reason, just because it's like, it's a little bit scattered in terms of seeing everything at once. Yeah, but I'm wondering if they'll they'll have the ability to make it a little less spaced and more information dense. See, to me this is like the it is like the exact same as the desktop, or the the browser version. And I really have been using it since it came out and that that interface for me has been like, my primary email interface for like a year, two years now whatever. And I think that's probably why it's not so shocking to me. You know, I could definitely see it. It's, it's, it's different. And it does take a little bit of getting used to, but coming from inbox and if you like inbox, it's basically the same thing. So you're gonna love it. So yeah, that's my son Jake pig sick. That is a sick pick. Yeah. My sick pick is the apple air pods that I got about a week and a half ago, two weeks ago. - -57 -01:00:00,630 --> 01:00:25,620 -And when they first came out, everyone had their jokes, they're gonna fall out, you're gonna lose them. They look like toothbrushes in your ear. But they and then whenever you see someone get them, they can't stop talking about how amazing they are. So they are incredible, best headphones besides the Bose QC 35 best headphones I've ever had. Because there's no wires being able to go to the gym go for a run, - -58 -01:00:26,790 --> 01:00:36,150 -just you just pop them in. And you don't have to worry about you can put your phone in your pocket and zip it up. You don't have to worry about having a wire, dropping it or anything like that. - -59 -01:00:37,410 --> 01:02:06,480 -The pairing process is incredible. So you flip it open, and all sudden, it comes open on your iPhone. And it shows you what the battery is on both headphones as well as what the battery is in the pack. And then you and then when you put them in your ears, it turns on. And when you take them out of your ears, it detects that you've moved them and it will unpair them immediately. But then just put them back in your ears and immediately. They don't have to like mess around with the Bluetooth. I hate Bluetooth so much. It never works properly. And I'm always stuck in this like pairing hell. And it's just like a seamless experience, being able to hook it up to my iPhone as well as to my, to my computer. So I'm pleasantly surprised that they they were they're so nice. I thought that they would be a bit of a bomb. Nice. Yeah, I'm still a little skeptical because I'm on the Android camp. So I'm sort of waiting to see what Google puts out. But they look super nice for bluetooth headphones. Again, also in the position of hating Bluetooth, generally. So yeah, we'll see. I'll see if Google can put out anything but those air pods. That whole process seems really super nice. And that's the last thing you want is a pain in the ass for pairing when you're trying to just listen to anything really. Yeah, exactly. And you can also just put one in at once and leave the other one charging in the case. And the battery life so far has been been really good. So nothing but but happy about these. - -60 -01:02:07,860 --> 01:04:58,920 -Nice, super nice. Ah, yeah. What about shameless plugs, any any shameless plugs that we got today. I don't have anything to plug really. I'm so like, I'm working on this large figma series. And it's, it's great. But I don't want to release it until I released my new subscription payment processing and all that sort of stuff. So I'm hunkered down, I'm just trying to get this out. I've been working pretty heavily in the the subscription and payment area and stuff like that. And I can confidently say it's going to be done in like the next week here, I'm just getting the final ducks in a row sort of with everything. And then after that, there will be a new, a new enlarge figma series for me basically teaching you the entirety of figma. So keep your eyes open for that. And I guess your ears a decent shameless plug, the subscription service for levelup pro when I migrate over, because I've had so much exclusive content now the price is going to be going up. So if you want to get in at the 899 price now or it's 95 a year. If you get it now, you'll hold on to that until you cancel your subscription. Whereas if you wait maybe like a week or two and this new series comes out, it's gonna be 19 bucks. So get in Yeah, if you get in now, you'll hold on to that for all of the future content I release. So yeah, that I guess that is a shameless plug here. Even though I didn't think I was gonna. Haha, there you go. Make sure you grab that I'm gonna plug Boomer Hamza. I don't know if I butchered his last name. But he has a course called modern dev tools. And I got a lot of times people emailing me asking if they'll, if I'll tweet their course or plug it or send it to my email list or something like that. But I've actually learned quite a bit from Kumar's dev tools, tips, you probably have seen them all over Twitter, anytime. There's a animated GIF, showing a tip in dev tools, it's most likely his. And what he's done is he's bundled it all all up and built this really amazing course called modern dev tools. And it just goes into like all of like the like the hard parts of dev tools, obviously, anyone can inspect element, but some of the performance stuff part of some of the more advanced dev tool stuff. It's crazy how much that goes into dev tools that we don't even know about. And he Amy accesses, I've watched a couple of them so far, it's really, really good stuff. I'm excited to dive a little bit more into it. Because not only is that going to make you like a better developer and quicker at debugging, but I think it's also going to help your performance of your website. So you know, exactly like, what am I looking at this like yellow and blue graph? What does this actually mean? Yeah, that's that modern dev tools.com those dev tool I mean, this, the dev tools in Chrome are totally invaluable when you like really dive into them. So yeah, I haven't seen this course but I'm definitely gonna check it out after hearing this sick pic - -61 -01:05:00,000 --> 01:05:13,799 -Pick away that sick pick. That's your shameless plug. That's a shame. Shameful plug. Shameless plug. Yeah, shameless. Yeah, that I mean that's a sick pick shameless plug right there. Yeah, exactly. I think these things are kind of the same but whatever. - -62 -01:05:15,299 --> 01:05:32,940 -So that's that's episode. Hopefully you enjoyed it. Feel free to angrily tweet your CSS and j s opinions as Scott. He is as solinsky let me know what I did wrong. Please, spare me. All of your opinions, please. That - -63 -01:05:34,230 --> 01:05:36,480 -we'll see you next week. See ya. Bye. - -64 -01:05:38,880 --> 01:05:49,320 -Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show until next time. - diff --git a/transcripts/Syntax100.srt b/transcripts/Syntax100.srt deleted file mode 100644 index b618dd42a..000000000 --- a/transcripts/Syntax100.srt +++ /dev/null @@ -1,748 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:03,059 --> 00:00:04,590 -Unknown: podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:05,760 -development treats out there. - -4 -00:00:05,760 --> 00:00:07,260 -strap yourself in and get - -5 -00:00:07,260 --> 00:00:09,600 -ready to live ski and West - -6 -00:00:09,600 --> 00:00:10,530 -boss. Welcome - -7 -00:00:10,530 --> 00:00:18,960 -Wes Bos: to Episode 100 Hold on, let me get the soundboard on - -8 -00:00:18,960 --> 00:00:22,440 -Unknown: board coming in tasty, sick pig. - -9 -00:00:22,469 --> 00:00:25,770 -Wes Bos: Oh, hell yes, schema, shameless plug. - -10 -00:00:31,020 --> 00:00:34,650 -Scott Tolinski: We need a specificity on that soundboard as well, we need - -11 -00:00:35,130 --> 00:01:08,510 -Wes Bos: definitely needs to be added. So welcome to the 100th episode of syntax. I can't believe we've been doing it for 100 episodes already, it feels like we just just kick this thing off. But today we're gonna do sort of a meta episode, which is a syntax episode about syntax. We're gonna go through some of our most favorite episodes, some of the most popular episodes which countries are listening in, which apps people are using. We'll talk a little bit about sponsors some questions we have from you regarding the episode, and we just got a whole bag of just random thoughts talking about about the podcast should be a fun one. - -12 -00:01:08,550 --> 00:01:17,580 -Scott Tolinski: I should mention that this won't be a clip show. This is not going to be like no family matters episode where you're showing every miracle did or something like that. It's not gonna be Oh, do you - -13 -00:01:17,580 --> 00:01:46,920 -Wes Bos: remember that frustration of like sitting down for a nice like, I just happened the other day I sat down for the new Sunny in Philadelphia. I was like, come on. I was like sitting I did chips in a beer. And I was so excited. This is not a clip show. Today's episode is brought to you by Sentry, which does client side server side exception and error tracking and Freshbooks as cloud accounting. We'll talk about them partway through the episode. So Scott, congratulations, one episode, or 100 episodes, - -14 -00:01:46,950 --> 00:02:38,060 -Scott Tolinski: we've done one episode for those of you don't know, this is a web development podcast. If this is the first time you're tuning in, you are turning into the 100th episode. My name is Scott Toulon ski with me is Wes Bos. We're both web developers. We both work full stack, primarily JavaScript based stuff, but we've been around the block. So to say, I'm from Denver, West is from Hamilton, Ontario. And we are just, I don't know, I'm personally just pumped. I'm feeling I'm feeling jack today. I'm just excited that this is our 100th episode. I don't know how to else to express that. So thank you, for everyone who's listened to to syntax for all episodes, even if this is your first episode. Thank you for being a part of this. This is the 100th episode. And yeah, I hope it's a lot of fun. Again, not a clip show, I think that should be the title, the title of this episode, - -15 -00:02:38,780 --> 00:03:10,800 -Wes Bos: I just thought of a really good coding exercise, I would love to know how many minutes or hours or days are there of us talking because we've done 100 episodes, I think probably about 60 or 70 of those are full, like hour long episodes. And then the rest of them are tasty treats, which go anywhere from 12 minutes to 45 minutes sometimes, but a kind of a cool coding challenge would be download our RSS feed, parse all of the episodes and then do a giant reduce to figure out how long there are in total. - -16 -00:03:10,860 --> 00:03:37,380 -Scott Tolinski: And that wouldn't be too hard. You've got no feed. So you have all the data. And with a lovely array methods that we have, it should be too tough. So I think that would be a fun challenge. And one that for those of you who are maybe you know, picking up the array methods or or learning this kind of stuff, I think it would be a good challenge. And one that shouldn't stress you out too much. But at the same time, you might not get on your first try. I think that's a good. That's a Yeah, coding challenge. - -17 -00:03:37,500 --> 00:03:43,560 -Wes Bos: The first person that does that, I will send out a free course. Oh, and I'll send you some stickers as well. Dang, - -18 -00:03:43,590 --> 00:03:46,560 -Scott Tolinski: he's putting it out there. That's the Yeah, that's gonna get it done. - -19 -00:03:46,560 --> 00:03:50,310 -Wes Bos: I think that's going to add syntax FM, and we'll we'll hook it up. - -20 -00:03:50,370 --> 00:03:58,199 -Scott Tolinski: Nice. Nice. We should do coding challenges more often. I think that's a nice little invention. You just did just now it just Yeah, yeah, - -21 -00:03:58,229 --> 00:04:17,520 -Wes Bos: maybe that's what we should add with 100 wrap. So we have new ideas. That's kind of how am I my JavaScript 30 came across. I used to just tweet out these coding challenges. And it was really fun. And I decided to make them into an actual course and show the answer because people would always be like, Here's mine, but I don't know if it's any good. How would you do it? So that's how my JavaScript 30 came around, - -22 -00:04:17,520 --> 00:05:16,260 -Scott Tolinski: I think, let's talk about the podcast. So the first ever episode was about react tools. And when when was that it was July 5 2017. And we released our first episode, where we talked about some really cool stuff. We talked about all the things that make your life easier when you're working react, some other hosts. We talked about some tools, we talked about graph qL, which is kind of fun, because I don't think I was doing a little bit of graph qL at that point, but I think it was still pretty new for both of us. We talked about the dev tools we talked about additional libraries. We talked about react storybook which is now just storybook so things things have changed pretty substantially since that first episode and and here we are talking about react. tools and it took us I don't know however many episodes before we actually had an episode on just react it took a 66 more episodes before we had an episode called the React episode. So our first one started out a little bit a little bit higher level than we eventually got to with react. - -23 -00:05:16,470 --> 00:05:47,310 -Wes Bos: Yeah, I think that's one thing I've learned overdoing it is people really enjoy the very concrete. Like, that's kind of the whole idea behind our podcast is that these are applicable things you can take away to become a better developer, whether it's soft skills or hard skills. And sometimes that is talking about different tools. And then sometimes it is just about like, let's just have an episode that talks about how react works. And that was a extremely popular one where we just explained the very basics of how react worked ridiculous, hasty - -24 -00:05:47,370 --> 00:05:48,210 -Scott Tolinski: sick. - -25 -00:05:48,210 --> 00:06:03,390 -Wes Bos: So this is a this is the soundboard that we have that we removed because it made a couple of people angry that we kept having we seek more data. I don't know if we overdid the soundboard. I would say we did it correctly. I - -26 -00:06:03,390 --> 00:06:19,890 -Scott Tolinski: think if we would have continued to do it at the rate that we were, then it might have been overdone. But I still shady. Andre, thank you for making this on board. Because this thing is so funny. We'll have that I love it in the description of the podcast or the notes. But this thing is absolutely great. - -27 -00:06:20,850 --> 00:07:28,920 -Wes Bos: All right, let's talk about our first sponsor ever was delicious brains. We started off the podcast as not necessarily a way to make money but just as a way to promote our own courses. So Scott and I, obviously I sell individual courses. Wes Bos calm force us courses. Scott has a subscription Toro service called level up tutorials. And I just love talking tax. That's one thing. And second podcast is a great way to advertise and to reach new people. Because I'm on YouTube, I blog. I'm on Twitter, but there's this whole audience of people who are not necessarily on those mediums, and primarily people who are commuting, and they have like an hour or two every single day and need to listen to something productive at that point. So starting on the podcast gave us access to this whole new audience where almost every week I hear from someone saying, hey, Weiss, I heard I found your stuff through the podcast. I'm so happy when that happens. Because that means like, sometimes you think, oh, there's everybody's on Twitter. That's where everyone is. Right? But no, there's there's people who don't do email. There's people that don't do YouTube, they don't do Twitter. And they just found you by searching web development on a podcast player. - -28 -00:07:29,040 --> 00:08:01,710 -Scott Tolinski: Yeah. And at least did stayed first and foremost that this podcast is never and will never, and has never been about promoting our stuff. Even though we do have a section called shameless plugs at the end. There's a reason why that's at the very end of the show. Because it'll you know, if you if you want to skip that part, you can skip that part. It's totally cool. It's it's no, no biggie. But the podcast first and foremost is to provide quality educational material that you can take away something from each episode. So I hope that does come across in every single episode that we do. - -29 -00:08:01,890 --> 00:08:30,270 -Wes Bos: Absolutely. So we did have delicious brains, which has a plugin for WordPress called WP migrate DB Pro, they approached us to say hey, can we sponsor the podcast? And of course, we said yes. And we scrambled it didn't know how much to charge we were totally new to it, which is great. Because like we didn't, didn't come into it thinking like, Oh, this could be a money making thing. But we'll talk about this a little later in the episode. But it's pretty cool to be able to surface and work with these cool companies that need to be put in touch with the people that listen to this podcast. - -30 -00:08:30,300 --> 00:09:21,169 -Scott Tolinski: Yeah, we were sort of talking before this episode started that. It's less of like, we're we're not trying to sell you things. But more or less, these are services that we want to make you aware of, because a lot of the times, it's stuff that we use every day, and we absolutely love. So it's like a joy to work with a lot of these sponsors, because sometimes you're just like, I think it was Netlify Oh, when I first used Netlify, I was like, holy cow. I want to tell people about this. And so I reached out to them, and was like, Hey, I love your thing. Would you be interested in sponsoring the podcast. So a lot of times, it's not just them coming to us. But it's a two way street. And we're we love these services and products and stuff like that. And again, it's all genuine there in terms of what we're presenting to you as sponsored material here. Again, we want to match you up with some of the services that could help you in your dev life rather than just sell yarns and stuff. - -31 -00:09:21,240 --> 00:09:26,029 -Wes Bos: Except for those brushes that you put in your drill, which everybody bought. Yes. - -32 -00:09:26,029 --> 00:09:33,390 -Scott Tolinski: Which are incredible. I just used them to clean clean my bath or my shower the other day, and it was awesome. It was just a great, - -33 -00:09:33,409 --> 00:10:40,110 -Wes Bos: amazing. I've been using mine all over the house. I love it. Yeah, let's get into the most popular episodes. So this is these stats are a little bit skewed. And that's because on November 1 2017, which I think was about four or five months after we launched the podcast, our podcast rider which is Lipson as well as a whole bunch of other podcast provider like blueberry and a couple other ones. They all sort of standardize on how do you Count a podcast download because everyone's stats were all over the place. And sometimes there was people that use a specific provider and their stats were much higher than, than they should be. So there was like this big thing on November 1 2017, where they adjusted it and a lot of podcasts actually lost about half of their listenership, because of things like pinging, like the headers. If you ping the headers of an mp3 file, it counted that as a download, when it really shouldn't. And like crawlers, thing like bots that crawl mp3, that's not really a listen, all kinds of stuff like that. So we didn't actually know about that happening, because we were just getting started at that point. And our stats were just growing every single episode. So we didn't notice any sort of drop - -34 -00:10:40,110 --> 00:10:43,909 -Scott Tolinski: off on there. And we didn't notice the drop off, because we're too popular is what you're saying - -35 -00:10:43,980 --> 00:11:01,289 -Wes Bos: no. But you just have to know that these stats might be a little bit skewed from the first 20 episodes or so they might not show up in here, just because the way that libsyn works is that you can't query the old data as well as the new data in one go, which is done. - -36 -00:11:01,320 --> 00:11:44,700 -Scott Tolinski: So but yeah, let's do it. We're going to do a countdown from number 10. All the way up to number one. So if you're interested in some of the most recent most popular episodes here, this is going to be a good list to get started. Number 10. Okay, number 10 is oddly enough, when that starts with the number 11, which is 11 Habits of Highly Effective developers. And this episode is all about things that you can do to essentially set yourself up for success is like, here's how you can get a platform for success if you follow these sort of tips and tricks. And that for those of you who are looking to find this in your podcast player syntax FM that was Episode Number 7411 Habits of Highly Effective developers. I really like that one. - -37 -00:11:44,850 --> 00:12:14,580 -Wes Bos: Number nine was is jQuery dead? This is a question that we get all the time for people being like, Is it still worth learning jQuery? Should I still be using jQuery? Is it dead or not? There's always that answer is jQuery dead? No. But it's really not used all that often. And we kind of go into it with this less, less of a fiery approach than most of these, like, jQuery is old and antiquated and slow and stuff like that. And we've just dove into some of the ideas surrounding it and why you might not want to be using jQuery in your next project. - -38 -00:12:14,610 --> 00:12:21,600 -Scott Tolinski: Yeah. And that was probably maybe is that the most click Beatty title that we have had so far? Maybe? Yeah, - -39 -00:12:21,899 --> 00:12:36,659 -Wes Bos: that's funny thing about these podcasts is the more click Beatty title, the more listens, you get to the actual episode. So writing the episode title is always a task in itself to make sure like you spend so much time building this podcast, you want to make sure people actually listen to it. - -40 -00:12:36,899 --> 00:13:01,950 -Scott Tolinski: Yeah. All right. Next one is number eight, which is what's new in JavaScript, which is episode number 46. And this was basically a lot of s six s next stuff, that we were just basically talking about new things that have either come or are coming into JavaScript, and should you be aware of them or what you should be worried about, or what you should be thinking of her just to put some of the stuff on your radar. - -41 -00:13:02,100 --> 00:13:15,570 -Wes Bos: Number seven was Episode 48. That was VS code round two. So I should say, if the numbers were in line with all the way back since the start of the podcast, I bet that via our VS code show would be very high up in this list as well. Yeah, - -42 -00:13:15,570 --> 00:13:18,149 -Scott Tolinski: that was one of our most popular ones to start. - -43 -00:13:18,419 --> 00:13:38,190 -Wes Bos: I think that's the episode that converted a lot of people to actually starting to use VS code. And then we did about a year later, we did a VS code, round two, which we updated a whole bunch of the new stuff in VS code, as well as some of the stuff that we love about it. So it kind of rehashing some of the content there. People are so hungry for VS code. Maybe we should do episode round three for that. - -44 -00:13:38,220 --> 00:13:57,750 -Scott Tolinski: Yeah, we should. And I mean, there's just so much stuff. It's one of those apps that just evolves 24. Seven, we should also put together a list of what we consider to be our greatest hits that make it nice and easy on the site or something like that. If somebody wants to contribute a new page that's like Greatest Hits or something, maybe we can make like a pared down list of the ones that we think are - -45 -00:13:57,779 --> 00:14:09,600 -Wes Bos: excellent. Yeah, we need something on the website that will allow us to surface because we have so many episodes. Now we need there's a couple features that are going to be coming to the site fairly soon, that will be able to make it a little bit more discoverable. - -46 -00:14:09,690 --> 00:14:39,179 -Scott Tolinski: Yeah. discoverability. Next up is number six, which is progressive web apps, which is episode number 50. And this was basically a what when, where, why sort of outlook on how you can get started making progressive web apps, what the heck they even are and sort of the tech behind it and why it's important. I think this is a topic that is again, it's no surprise that this one's popular to me specifically, just because this tech is exceedingly more popular now than it was, you know, two years ago or whatever, when it was still just blossoming. - -47 -00:14:39,299 --> 00:15:25,500 -Wes Bos: I like those type of episodes where they're explainer episodes, because you hear that term thrown around a lot. And sometimes people just need to be sat down and explained what all the different pieces are so that you're able to have those conversations and not like I'm not sure what all these moving parts are or what a ServiceWorker is, or all these things. So whenever we can have an explainer episode like that. I'm Pretty happy. Yeah, number 18. I'm sorry, number five. But Episode Number 18 is all about CSS Grid. This was over a year ago before I even released my CSS Grid course, which is free at CSS grid.io. We just explained all of the thoughts and ideas behind CSS Grid, what the benefits of CSS Grid are, why you might want to use it, versus Flexbox some of the downsides to it. So that was another really good explainer episode that I liked. - -48 -00:15:25,549 --> 00:15:52,649 -Scott Tolinski: Yeah, that was a certainly a good one. I mean, we both love and use CSS Grid. So I think that comes out in that episode. Next step is number four, which is our workflows, design, development, get deployment, all that good stuff. It's episode number 51. And this one was a little surprising to me that it was number four, because, you know, my workflow is refined to a point, but I don't you know, I don't know if it's something that is just incredible, or something like that. I don't know, no, I'm - -49 -00:15:52,649 --> 00:15:54,090 -Wes Bos: not proud of my workflow. - -50 -00:15:54,210 --> 00:15:58,200 -Scott Tolinski: I think this episode might be more interesting than super useful, you know, - -51 -00:15:58,320 --> 00:16:41,490 -Wes Bos: yeah, that's true. People like to peer into how other people do it, or what the ideas are. Number three was Episode Number 66 of the React episode. This is came out in August. So really not all that long ago. And it's it's the third most popular episode that we have. And we just detail into the ideas behind components JSX data fetching props, event handlers, instance classes, lifecycle methods, all that good stuff. So I'm glad to see that that one again, that's another explainer episode where we just take a topic and try to distill it down. It's kind of neat, looking at the top ones, where a lot of the top ones are just explainer episodes. Next one, also explainer Episode 20 JavaScript array methods to make you a better developer. This - -52 -00:16:41,490 --> 00:17:22,020 -Scott Tolinski: one also, is there no click Beatty title, Episode Number 43. It has elements of both the usefulness and clickbait Enos in the title, and it's totally accurate. This episode is no surprise that this one's number two, I would expect this one to even be number one. And it's pretty close, to be honest. But this one, we got a lot of feedback that a lot of people said that this episode, open their brain to these array methods in JavaScript and how they're useful. So if you hear the words array methods in JavaScript, and you're not like, Oh, yeah, I know all about that. And you're working in JavaScript put this episode on, because we've heard from a lot of people that it's one of the most helpful resources that they've had on these particular array methods. - -53 -00:17:22,169 --> 00:17:52,650 -Wes Bos: I can't believe it probably at least once a week or twice a week we hear I get a tweet from someone saying I refactor my code. And it smells so much smaller or reads much nicer, or I don't have this mutation that was used to be happening with a for loop. And it's just so cool to see people actually take these things because, like, they were things that Scott and I use all day long. But it's something that I noticed from code that other people write just from teaching in person seeing examples online, where the code could just be so much simpler, if you refactor it to use these array and object methods. - -54 -00:17:52,680 --> 00:18:52,410 -Scott Tolinski: Yeah, absolutely. Number one, this is a I'm gonna say this is amazing that this is number one, this this episode is my baby. How to learn new things quickly, Episode Number 44. Coming in at number one here. And again, this episode was based off of a talk I did called a too fast, too furious how to learn modern web development quickly or something that you can find that talk on YouTube. It was at Site day, at these eight day conference in 2018. This episode basically took that it just turned it from a 20 minute talk into an hour long podcast where we dove a little bit more into the topics at hand, which is basically some of the stuff that you know, Wes and I were both having to constantly learn new things to present them to teach them to use them in our daily life. Yeah. So this is more or less our tips and tricks as to how we are able to pick things up quickly. And again, I'm really proud of this episode, I can't believe that it's number one, because again, it's based off of a talk I did and all that sort of stuff. So I'm just I'm endlessly psyched about that. - -55 -00:18:52,500 --> 00:19:23,730 -Wes Bos: Yeah, I was very not surprised. But happy to see that it was number one, because it's a soft skills episode. And every maybe like, once or twice a month, we'll try to do a soft skills episode, which is things that we've learned as being web developers, or just in life in general, whether it's getting things done, or whether it's just approaching things in a certain way has nothing to do with code, but just how you manage yourself. And number one, which is getting how to learn new things quickly. And number 10, which is 11 Habits of Highly Effective developers. Those were both soft skills, and I'm happy to see them in the top 10. - -56 -00:19:23,810 --> 00:21:34,260 -Scott Tolinski: Yeah, I think the soft skills ones are easily my favorite episodes, because I like that stuff. I listen to a lot of books about that stuff. I listen to a lot of podcasts about that stuff. And that's really like sort of where my head is at in a lot of ways. And, you know, I don't know the sort of skills are the skills that you you take for granted a lot, especially in web development, podcasts. And some of the other skills that well you might take for granted might be your ability to solve bugs and to fix those bugs. And this way that you can do that is by using services to help you find Discover all those good things. And the service that we love over here at syntax is century. Now I personally love and use Sentry for levelup tutorials. And it is an invaluable tool in my toolbox. One of the coolest things about Sentry is this ability to mark bugs as resolved. And now it seems like that's not like that amazing. But the fact that you can come in here you can get an output if your bugs, you can select your bug or the error that you're getting. And you can say, Okay, I found this bug, I have fixed this bug, and I've pushed a new release. And you can even attach your releases in here and everything too. But if I marked this bug as resolved, and well it comes back if for some reason, right? Maybe you weren't anticipating it to ever come back? It is now it's now as a distinction as being a regression. And that lets you know that hey, this thing that you did that you thought you fixed well, No, you didn't. And maybe you should be taking another look at this. So Sentry again is basically a bug tracking software that gives you all the great information allows you to attach to GitHub issues allows you to find and solve bugs easily. So check out century@century.io and use the coupon code tasty treat and you will get two months for free. And that's even if you already have an account there so check out use that that to that coupon code a tasty treat, get those two months free. See why Wes and I both love and queues century. It's an invaluable tool in my toolbox. - -57 -00:21:34,590 --> 00:21:43,650 -Wes Bos: Alright, let's talk about some of the top countries so this data here is coming from we actually just pass right before we started recording 3 million downloads of our podcasts which is - -58 -00:21:43,800 --> 00:21:46,740 -Scott Tolinski: really good that needs a bigger a bigger emphasis than - -59 -00:21:46,770 --> 00:21:49,100 -Unknown: Oh, let me get going here note - -60 -00:21:54,660 --> 00:21:57,810 -Scott Tolinski: 38 inches man because it's long, cheap. - -61 -00:21:58,950 --> 00:22:02,610 -Wes Bos: I love that one. Get in there and fix it. Yeah, do you smell - -62 -00:22:07,980 --> 00:22:15,060 -what is the sirens hold on we shady - -63 -00:22:16,020 --> 00:22:22,860 -Scott Tolinski: These are great. So that is the that I think that's the proper introduction that our 3 million downloads deserve 3 - -64 -00:22:22,890 --> 00:22:58,620 -Wes Bos: million downloads it not too long ago that we passed to Milly as well. It's it's the podcast is it doesn't grow in leaps and bounds but it every single day you get a few more listeners. And over time that really starts to add up. That is over 94 episodes. So we pre record at least two or three episodes ahead of time all the time. Right now we're a little bit more ahead of that because we're trying to get ahead of it for Christmas so we can take some time off. So that works out to be about 30 to 33,000 downloads per episode or so. Which is pretty good. Obviously some of our top ones have much more than that and it all kind of evens out. - -65 -00:22:58,830 --> 00:23:03,720 -Scott Tolinski: Yeah, and who knows maybe by the time you listen to this, we'll be at 4 million Who knows? - -66 -00:23:03,930 --> 00:23:13,500 -Wes Bos: Maybe Maybe let's go through a top 10 countries so number 10 with so out of those 3 million downloads 38,000 in Poland - -67 -00:23:13,530 --> 00:23:15,540 -Scott Tolinski: hey my people what's up? - -68 -00:23:16,380 --> 00:23:17,250 -Wes Bos: Are you polish? - -69 -00:23:17,490 --> 00:23:18,840 -Scott Tolinski: Yeah, dude Delinski - -70 -00:23:20,430 --> 00:23:23,430 -Wes Bos: Well, I'm glad that my people are beating your people. - -71 -00:23:28,650 --> 00:23:30,600 -So now what's number 10? Or number nine? - -72 -00:23:30,630 --> 00:23:34,350 -Scott Tolinski: Number nine is Brazil with 40,000 - -73 -00:23:34,530 --> 00:23:41,910 -Wes Bos: number eight is my people the Netherlands with 47,000 clearly beating Poland right out Oh come on. - -74 -00:23:41,910 --> 00:23:46,590 -Scott Tolinski: Next up we have India with 50,000 and some big numbers from India. - -75 -00:23:46,680 --> 00:24:13,320 -Wes Bos: India doesn't surprise me usually in most of the things I do online India's and top five. Usually reef three. Yeah, this next one in this there's a lot of people in India so what the next one is Sweden with 55,000 of those 3 million which is amazing because I really want to go to Sweden so I'm glad to know we have a lot of listeners there we should put this up against like, like a population like what population Yes, we did. Listen this isn't the - -76 -00:24:15,210 --> 00:24:19,740 -Scott Tolinski: next step we have Australia Coming in at number five and - -77 -00:24:19,800 --> 00:25:06,090 -Wes Bos: with Australia had 80,000 now they're starting to really climb these are top four countries. So number four is Germany at 109 and that doesn't surprise me as well Germany is in the top I think that Germans in top four for selling courses as well for me nice a big which is funny because German people have so much holidays that anytime I send a email blast out I get like 40 million German has been like I have like a Yeah, I have like a huge out of office filter reply and I had to figure out like what is out of office out today. Not no longer here or something I had to figure out what all those words were in German and then automatically filter them out of my inbox. Because I literally get maybe 100 just from Germans alone every time I send an email out, yeah. Oh, that's funny. - -78 -00:25:07,140 --> 00:25:16,860 -Scott Tolinski: Next up at number three is your land is the land of maple syrup. And hockey is Canada at 138,000. Yeah, - -79 -00:25:16,890 --> 00:25:40,440 -Wes Bos: yeah, that surprises me because there's not there's like only 30 million people in Canada. But then again, I've also I've taught probably 100 Canadians to code so that's probably a little bit biased in my direction. Number two 231,000 is the United Kingdom, which is pretty cool. Yeah, super cool. And then number one, Scott, what do you think it's gonna be? Oh, gonna be China. - -80 -00:25:40,469 --> 00:25:56,790 -Scott Tolinski: Russia. Number one coming in hot is the Philippines. No, it's the United States of America. 1,200,000. And that is the massive numbers from the US of A so go America. We got the red, white and blue up here on top. - -81 -00:25:57,180 --> 00:26:08,550 -Wes Bos: So about a third, just over a third of our listeners are from the US. It looks like which is good. Like we're pretty spread out around the world, which is kind of cool. I want to see if we can also get city info. Let - -82 -00:26:08,550 --> 00:26:23,340 -Scott Tolinski: me pull that up real quick. I want to see what do you think our biggest city is a biggest city. I would have thought it was somewhere in California. But I've already spoiled the results for me. So I am surprised to see that Washington DC is coming in at number one at 43,000. - -83 -00:26:23,670 --> 00:26:36,180 -Wes Bos: The lowest country to get with coming in with one download is the Virgin Islands British Virgin Islands. Swaziland. Northern Mariana Islands. Well, French Polynesia. - -84 -00:26:36,180 --> 00:26:36,750 -Scott Tolinski: Wow. - -85 -00:26:36,930 --> 00:26:43,620 -Wes Bos: nambia. I wonder if we're represented every single country? I'd like to see at one point, you know, it's funny. - -86 -00:26:43,650 --> 00:27:08,370 -Scott Tolinski: Let's look at some of our hometowns. Denver is the seventh most listened to city in the United States, you might be able to call that my hometown. I'm not originally from Denver. But I've been living here for a little while now. Wonder where Detroit area figures on this graph? Hey, there it is. It's coming at like 17 Oh, Canada is not showing me the cities. Okay, it's showing me Ontario is the most province. - -87 -00:27:08,400 --> 00:27:30,690 -Wes Bos: So in in Canada, we only see that a majority of the people are from Ontario. After that it looks like British Columbia and Quebec are big. And then the rest are almost almost no, almost no downloads. Just kind of interesting. They're in the northern territories. I got to go on tour and make sure we get up to all those episodes. Nice. - -88 -00:27:30,989 --> 00:27:49,860 -Scott Tolinski: Cool. Next up, we have, instead of top countries, let's go to the top podcast players to the software. You're using it somebody surprised me a little bit. The first one obviously the most listened to is going to be coming in from apple core media, which you'd guess is probably just the podcasting. I don't even know what you iPhone users use in your podcast to know that it's - -89 -00:27:49,860 --> 00:27:58,170 -Wes Bos: the podcast player. That's kind of like iTunes. It's so confusing. I don't use it. But that's what most people use to listen to. - -90 -00:27:58,259 --> 00:28:02,280 -Scott Tolinski: That's amazing to me. But it's not that surprised. Yeah, I guess because they did come up with it. - -91 -00:28:02,460 --> 00:28:29,970 -Wes Bos: Yeah. Number two, and I don't even know like this number right here. 313,000. I don't know what that is out of. But I'll give you some context. 313,000 is iTunes underneath that is overcast, at 123,000. So just over a third of iTunes is overcast. And that's a very popular iPhone client that's made from what's his name, Marco arment. I use that personally, myself. It's an awesome podcast player. - -92 -00:28:30,090 --> 00:28:44,370 -Scott Tolinski: Next is Chrome, which surprises me is this people listening@syntax.fm? Because it's coming in at 117. That's quite a bit. So yeah, it's just people listening online, which is a little surprising to me, because podcast apps are pretty darn slick. - -93 -00:28:44,520 --> 00:29:15,110 -Wes Bos: Yeah, I think it's because people are sitting at their desk and listening. And so they just play it right on the actual player. So what that makes me think is that we should get push notifications. I've already logged in issue in our repo for this nice not push notifications by default, because those are annoying as hell. But if a large percentage of our users are listening on Chrome, there's no mechanism to get them back or to let them know when there's a new podcast other than our Twitter feed. So if we had push notifications, I think that's a pretty good use case for it when people opt in. - -94 -00:29:15,239 --> 00:29:40,470 -Scott Tolinski: Yeah, I think that's great. Next up is pocket casts. And number four, and this is my podcast app that I use. I didn't make this I just use it. This app is awesome. It just had a big redesign. Lately, I didn't know if you're in the Android world, you can sign up for the beta and get access to the redesign. And it is slick. I love this app. I've been using it for years. That's pretty much the only podcast app I've used and loved for so long. So pocket casts coming in big 72,000. - -95 -00:29:40,710 --> 00:30:32,130 -Wes Bos: And that number five on this list is iTunes which I guess does not get lumped in with the iPhone podcast app. I guess there's people listening to podcasts on their desktop with the iTunes software. And it's pretty surprising actually. One thing that's pretty popular lately is Spotify has been coming out of nowhere with podcasts. Listen, I think it's about 8% of our Audience I looked at it a couple weeks ago, for some weird reason. Spotify stats are totally separate from all the other stats in our Lipson dashboard, which is bizarre to do that, but listen to the large percentage did you do Really? Yeah. That's amazing. That's kind of interesting to see what all the different players are where people are, because that also helps us design a better experience better shownotes. If you know that more people are on their mobile and more people are on the desktop. How can we make those experiences better for the parts that are not just listening to us? - -96 -00:30:32,189 --> 00:30:50,250 -Scott Tolinski: Cool. All right, let's get into some of our lessons learned about sponsors. And again, we mentioned at the top of the episode that like the sponsors that we work with just companies that we love, and love to work with and want to share with you more than anything else. So I hope it never sounds like we're trying too hard to to sell you on something that we don't believe in, you know, - -97 -00:30:50,309 --> 00:32:00,780 -Wes Bos: totally. So sponsors are pretty cool. They pay the bills, obviously, we have to pay for hosting this thing we have to pay our editor who is Adam, Adam is our editor. And he makes us sound so much smarter than we actually are, cuts out all of the arms and ahhs and things that we accidentally say, and we shouldn't make it into the podcast and things like that he is that podcast Royale dotnet. If you are looking for someone to do your podcast editing, he does a fantastic job, we're really happy with him. So we pay him we have to pay to host the podcast as well. And then our time I'll say pay for our own time that goes into it. So we record two a week. One of them's usually about an hour, the other ones a half an hour, each of those takes sometimes the episodes require like hours of research to go into it. Sometimes they're a little bit more off the cuff and but we always do spend at least half an hour 45 minutes prepping for every single episode and some of the other ones where it's like, like the progressive web apps, one was probably at least a full day of doing demos and stuff like that, because that's the thing about doing a podcast, you need to know what you're talking about, at least at some point, right? Like we're not experts on everything. But we need to be able to talk about this stuff. Otherwise, it wouldn't be all that interesting of a podcast. - -98 -00:32:00,780 --> 00:32:16,770 -Scott Tolinski: Yeah, absolutely. We have to be smart to do this about the stuff that we we are researching. And so that the topics are things that we like just talk about every day all day anyway. So it's like, oh, what are we doing this episode on react? Okay, let me prepare for the topic on react. - -99 -00:32:17,360 --> 00:33:36,960 -Wes Bos: Yeah, that was a quick one. Because we can just look we've teach react, we'd write react all day long. It's not a big deal to talk about something like that. Yeah, for sure. What else about sponsors, they always want hard numbers. So we maintain all of our listens and things like that on there. We're working on getting some like case studies, we have one dev lifts case study, which Devlin sponsored our fitness podcast, it works super well for them, they came back for a whole bunch more, but things like Log Rocket Freshbooks Sentry, it's it's like working really well enough that they can keep sponsoring the podcast. So that's really cool. hard numbers is hard to do with podcasting, because it's not like you can track a click Yeah, you don't get watched by code. Yeah, you can give people coupon codes, or you can give people like a specific link to go to, but a lot of times, it's like, oh, I need a I need like invoicing, or I need like an error tracking thing. Like, oh, what said, West talked about something like that, like 40 times on the podcast. And now I know, right? That's kind of where the benefit where a lot of these come in, it's just kind of like knowing about them. And then at some point, you're going to need one of these services, and you're going to try them out, which is pretty cool. Which is why we love it when people tell our sponsors that they came through syntax, because that shows them that it's working. We've had even I think as Log Rocket says, Man, your your listeners are loyal, they always tell me that they came through syntax. So cool to hear - -100 -00:33:37,019 --> 00:34:05,880 -Scott Tolinski: you to everyone who does that. And if you're, if you're going to do that, thank you. Because really, those are the kinds of things that are free for you to do. Right. It's free for you to tell the sponsor that that's how you heard about them. But it helps us so incredibly much. It definitely lets sponsors know that you know, what they're paying for is working or is doing the right thing. So I thank you so much for anyone who does that, because that is an awesome thing for you for to do. But yeah, I think that's pretty much it on sponsors. - -101 -00:34:05,909 --> 00:35:08,900 -Wes Bos: I got one more thing. People ask me all the time, how do you get these sponsors, and it's probably about half people just contact us. They listen to the podcast themselves, or their developers listen to the podcast. And they need to be put in front of some developers. So they come through that I also get tons of email about people who want to do like a YouTube video, or they want to, like pay me to tweet about them. And I don't really do that kind of thing. So I always try to like turn that into No, but do you want to sponsor the podcast? Or will often have people say, Can we like Manning is a good example. Manny wanted to have their authors Come on the podcast and talk about the books and we said, we don't do that. That's not the kind of podcast we are. But do you want to sponsor the podcast and we can maybe feature a couple bucks every single episode and you can still get in front of the the right audience and then it works out nicely. And they said, Yeah, that's a great idea. And we jumped on a call and talk through what that would look like. So it's always about I would just like I see what you're trying to ask from me. But I think that the sponsoring the podcast would probably be a good one. A good way to go about that. Nice. Cool. - -102 -00:35:08,900 --> 00:35:27,600 -Scott Tolinski: So let's get into our favorite episodes. And this is actually really funny, something that I didn't even realize, until just now about our favorite episodes are Oh, service. Our favorite episodes are consecutive they were released one after the other. So Wes, what was your favorite episode? Ah, - -103 -00:35:27,780 --> 00:35:42,230 -Wes Bos: that's great. My favorite episode was object in array methods one episode 43. I talked about why just because the amount of value that people have got from that one just makes me feel good. It's such a pickable thing. You can say like I made this code better because of this episode. - -104 -00:35:42,300 --> 00:36:15,840 -Scott Tolinski: Yeah. And my favorite episode is the how to learn things quickly, I mentioned that it's based on one of my talks. I felt really strongly about that topic. And it's when I put a lot of effort into and that was episode number 44. So it's actually this is hilarious because our two favorite episodes are consecutive 44 and 43, or 43, and 44. And they're also consecutive in terms of our most listened to episodes, which is number one and two on our most listened to episodes list, which would you prove that we peaked at Episode 43 and 44. - -105 -00:36:16,050 --> 00:36:23,250 -Wes Bos: It's all downhill from here. I can turn it turn it off now. That's it? Yeah, we've done our thing. - -106 -00:36:25,050 --> 00:36:55,170 -Scott Tolinski: Yeah, it seems like we really need to, we need to, we need to get some fresher topics to bump up those later episodes. But we also need to get some fresher books to do all the sponsors that we'll be getting with our new fresh episode. So this episode is also sponsored by one of our longtime sponsors. So it's appropriate that Sentry and Freshbooks are both sponsoring this particular episode because they've been with us. And they've heard so much. So freshbooks is another sponsor of this episode with the more about cloud accounting software, like fresh books is Wes. - -107 -00:36:55,230 --> 00:38:33,540 -Wes Bos: Yeah, he's gonna tell you a story about fresh books, as you've probably heard me explaining what it is it's cloud accounting, you can do your track your hours, you can make bills on there, you can get invoices, get your invoices out to your clients, you can track all your expenses. But here's a quick little example that I had, somebody contacted me the other day, sometimes people want to buy my courses and they need an invoice before they can pay for it because they have to get a purchase order and the purchase order gets approved. And then that gets sent over. It's like all like, the bigger the business, the harder it is to actually sell something to a big, big company. What happened is that I was doing my Black Friday sale, and someone's like, I want to buy all of them and but I need an invoice and need to go get it approved, and then it needs to come back and then they need to pay it and then you can set me up with the course. So I set up I just shot off an invoice on Freshbooks to them and and sent it on over and then I went and got lunch and then I got an email says hey, I can't pay this thing. I thought you said I could pay with credit card and I said Oh shoot, I forgot to turn on the option because there's an option in Freshbooks or you can turn on paying by credit card and all sometimes turn that off because I don't want to I'd rather them send a check. I don't have to take eat the 3% that the credit card is going to take but in this case, I was fine with it. It wasn't that expensive. So I forgot it. They're standing their credit card and hand eating ramen at us thing and I got this email like Oh crap, but we open the iPhone app, click the Edit invoice button, slide that checkbox on Click Save reply to the email. They paid it within two minutes. And it was amazing. I was like that. How awesome is that? Or I didn't even have to put down my chopsticks. And I got paid. And I think that that just goes to show how awesome Freshbooks Cloud accounting is. Where if you can send off an invoice and manage your client while enjoying some ramen, then you're probably in a good spot. - -108 -00:38:33,570 --> 00:39:00,810 -Scott Tolinski: Yeah. Nice. Yeah, I love that real world stuff. I think that's uh, there you go. It's important. Cool. So thank you so much for fresh books for sponsoring this episode along with so many episodes that they have sponsored for us so big, big time. Thank you to Freshbooks Next up we have some questions that we've been asked about the podcast itself and I think this is a great one. This is a question for me. And it's what's your favorite soundboard sound? I have no idea - -109 -00:39:02,460 --> 00:39:03,390 -Unknown: how did you have that so - -110 -00:39:03,390 --> 00:39:09,980 -Wes Bos: ready to go That was amazing. I was just like scanning really quickly. I was like what one wouldn't be funny here. Oh, oh. - -111 -00:39:12,810 --> 00:39:15,210 -Unknown: Downtown job downtown job - -112 -00:39:15,210 --> 00:39:28,320 -Wes Bos: is one of my favorite syntax isms. Where if you didn't hear Scott's Dad told him to do it make sure he does a downtown job with just like to go over and beyond with with the quality of something Yeah, and ever since I - -113 -00:39:28,320 --> 00:39:59,400 -Scott Tolinski: just call everything a downtown job but a great great and he is absolutely ecstatic that people are using it cuz it's Oh yeah, it was like we were doing yard work yard work for a neighbor or something. You just come out and just be like, you guys didn't even pick up those leaves over there. What are you doing? Gotta be? Yeah. I have probably two I think the 38 inches man is hilarious. That's like a fan favorite. But also, I think my more one of my new favorites. The sirens - -114 -00:40:00,480 --> 00:40:01,350 -Wes Bos: Which one is that? - -115 -00:40:01,380 --> 00:40:02,460 -Scott Tolinski: It's in your column? - -116 -00:40:06,000 --> 00:40:06,900 -Wes Bos: blazin. - -117 -00:40:06,980 --> 00:40:08,630 -Scott Tolinski: Yeah. Those are all good. - -118 -00:40:08,630 --> 00:40:13,770 -Wes Bos: Where did that come from? I just out of context, these things are so hilarious. - -119 -00:40:13,800 --> 00:40:15,810 -Unknown: They're great essay critics. - -120 -00:40:15,840 --> 00:40:28,860 -Wes Bos: Yeah. That's my dog. Nice. I think my favorite one is schema schema, because for some reason I say it funny. I think it's because I'm Canadian. I just don't understand how to say it. Otherwise, schema schema. - -121 -00:40:29,670 --> 00:40:31,590 -Scott Tolinski: schema, like I'm going schema - -122 -00:40:31,800 --> 00:40:34,440 -Wes Bos: schema, like skeeball schema schema? - -123 -00:40:34,500 --> 00:40:37,290 -Scott Tolinski: I'm going skiing with my MA schema schema. - -124 -00:40:37,920 --> 00:40:40,230 -Wes Bos: But there's a s ch Sure. - -125 -00:40:40,290 --> 00:40:41,100 -Unknown: Yeah, I don't have a - -126 -00:40:41,630 --> 00:40:47,880 -Wes Bos: schema. Although the thing I love about this podcast is everyone always gives us a hard time when we miss. - -127 -00:40:48,710 --> 00:41:00,750 -Scott Tolinski: Yeah, and another thing stop giving us fake names. When we're trying to read out your your questions. We have a hard enough time already with them. We're getting fake names. And I'm gonna my global enough I'm gonna believe every fake name you give me and I'm gonna feel bad. - -128 -00:41:00,959 --> 00:41:09,650 -Wes Bos: When tweeted this morning that Mike Roach was supposed to be Mike rock. my crotch. my crotch that's come on. Come on. That went by both of us. - -129 -00:41:09,780 --> 00:41:11,150 -Scott Tolinski: Yep. Got by the sensors. - -130 -00:41:11,189 --> 00:41:25,530 -Wes Bos: Next question we have here is what is your recording process? Like? Do you record your streams locally and edit them together? Are there any hacks you've cooked up as developers? So we both have pretty good recording gear, you can go back to the episodes about that. We do it for a living, we - -131 -00:41:25,530 --> 00:41:28,800 -Scott Tolinski: record things for a living. So yeah, the gear is important. So - -132 -00:41:28,800 --> 00:42:01,400 -Wes Bos: we are on zoom right now just so we can hear each other. But we don't record on zoom. Because that that compresses it doesn't sound that good. So we record locally. I use QuickTime and Scott you What do you Scott logic logic. We just record our our own. We drop it in Dropbox to send it off to our editor, Adam, and then he edits it all together. When else we put our show notes in Dropbox paper, which is kind of like Google Docs. Not sure why we use Dropbox paper and not Google Docs. Do you have any ideas? Why we do that? No. - -133 -00:42:01,439 --> 00:42:04,170 -Scott Tolinski: Because you started it? No. And I just went along with it. - -134 -00:42:05,100 --> 00:42:16,290 -Wes Bos: It's it works pretty well. It's pretty, pretty nice. I like it. That's what it is. shownotes we send that off to Adam as well. He takes our like, jumbled thoughts and makes it into timestamped shownotes. - -135 -00:42:16,400 --> 00:42:21,780 -Scott Tolinski: Yeah, Adam is invaluable, invaluable. Is that the right word? I don't know. He's endlessly valuable. - -136 -00:42:23,520 --> 00:43:47,130 -Wes Bos: He has value he has value isn't much value. Yes. And then he makes it sound better. I think he applies some maybe add a maybe can cut in I think about what you add to our voices here. But I think it always sounds really good. Well, hey, they're all you syntax listeners, if you thought I was gonna pass up an opportunity to plug podcast way out. Well, you were wrong. That's crazy duck. Actually, I'm not going to talk about podcast right now. But if you want to have a podcast, that sounds as great as syntax does, there are three things you need to remember all of which Scott and Wes do extremely well. Number one, be interesting. Number two, record high quality audio, it is so much easier to produce good audio than it is to fix bad audio. And Wes and Scott are great at this. They have good quality recording gear and they record in quiet environments. They record on separate tracks. They do all that stuff, right. And honestly, it makes my job super easy. And last but not least edit, you always have to edit the first draft is exactly that it's a first draft, it's not going to be perfect. But that's the whole point of editing. Great podcasts are edited. So take the time to edit your show. And your listeners will thank you. Alright, well, congrats guys on 100 episodes, and thanks for letting me be a part of it. Question does Scott practices segways? Or do they come on the fly? Oh, they - -137 -00:43:47,130 --> 00:44:15,900 -Scott Tolinski: come on the fly? And then I have a little sunglasses emoji guy? No. In fact, you might often hear with his reaction to my segways because he doesn't know they're coming. A lot of times you might know that that that he might know that there is a Segway coming and that he just doesn't know how it's going to work. Other times. I'll spring them on I'm totally out of nowhere. No, I make them up on the spot. And sometimes they're not as good because of that. But I think that adds to the whole the whole the term of it. - -138 -00:44:16,140 --> 00:44:24,840 -Wes Bos: Yeah, that's one thing we didn't talk about was sponsors is that we don't do the typical, like record it after and put some music in the background or something like that. Yeah. - -139 -00:44:24,840 --> 00:44:26,550 -Scott Tolinski: And we're not reading scripts. - -140 -00:44:27,000 --> 00:45:14,970 -Wes Bos: Nobody knows. It's great. We tell people give us some bullet points of what you want us to cover coupon codes tracking, a free month, whatever it is that you want us to get across to your users. And then we'll we'll just riff on that. And that tends to do the best for our listeners because it's our own experience with the product we've tried. We usually try it out before see what it's like talk about some some pains that we have and where it might solve like that. So I like it. I don't I don't think too many people. Fast forward through the sponsors. I know some some people do. That's I do that with a lot of my podcasts but a lot of people say you're the The only podcast that actually listened to the sponsor spot because we just talked about our own lives. That's One really cool thing about having technical sponsors on the podcast. So we're not just trying to sell razors or something like that. Yeah. Yes. Although we'd - -141 -00:45:14,970 --> 00:45:26,940 -Scott Tolinski: like to stay on the cutting edge. So let's talk about Harry's razors. We're here. All right. Yeah. I mean, we could have a whole episode where you're just feeding me sponsors. I'll give you 10 transitions all day until I get tired. - -142 -00:45:29,430 --> 00:45:31,740 -Wes Bos: Alright, what's the next question? You got one? Next question. - -143 -00:45:31,740 --> 00:45:45,960 -Scott Tolinski: Although I am all for peace. Why did you choose peace as your outro statement? Because it was funny. I think we just wrote it in there. I think you even originally wrote it in our document as a PA Why - -144 -00:45:47,190 --> 00:45:49,800 -Wes Bos: cacc? Yeah. - -145 -00:45:50,520 --> 00:45:58,710 -Scott Tolinski: We wanted an emphasize piece. No, I think it was just funny that there's nothing behind it. Although it would be nice. That'd be great, too. - -146 -00:45:58,950 --> 00:46:27,870 -Wes Bos: Sometimes the goofiness of this podcast is lost on people or it doesn't translate to maybe other cultures. And we get we get like messages being like this podcast is so cringy Oh, we know it's good. Yeah, we're trying to be goofy. We're just having fun. That's what that's probably the biggest compliment we get about it as well is that it's not dry. And it's it's not like so so stodgy. We are having fun here. And we are enjoying ourselves. And that's why it's so easy to listen to, - -147 -00:46:27,870 --> 00:47:37,680 -Scott Tolinski: it would be difficult for me to do a not fun podcast, like I would probably be not having fun. I'm just reading you documentation or something like that. Next one we have How did you meet each other and decide to start a podcast? We get asked this question a lot. we've answered it before we can answer it again. Wes, and I both released a course around the same time with the same name called react for beginners. And at the time, I don't want to offend us, but I had never heard of you or your courses. So when you messaged me, and like I have a course with the same name. I was sort of like oh to this guy. And then I went to your thing and saw you had a big audience and that if your course was bigger than my course, and was like, Oh, and I released it afterwards, I guess I'm sort of the dick in this situation. So I will definitely change it. I agreed to change it in like two seconds. And I did already Yeah, it was out of my naming scheme for things. Anyways, I was like, You know what? react for everyone, which is the original title of it isn't as easily found on Google is react for a beginner, so I'll change it. Sure enough, obviously, I didn't do any research, which is something I probably should have done that time. - -148 -00:47:38,730 --> 00:47:55,470 -Wes Bos: Yeah, that was that was really cool of you. So after that, we just got talking. I had been following Scott's YouTube, specifically for the sketch tutorials for like way before that, and I'm not sure how I found it. Someone maybe sent it to me or it just popped up in my YouTube feed. watches on - -149 -00:47:55,470 --> 00:47:57,150 -Scott Tolinski: YouTube. Yeah. I don't know how that happened. - -150 -00:47:57,630 --> 00:48:33,270 -Wes Bos: Yeah. But so I asked Scott, if he'd be interested in joining what's called a mastermind, which is a you meet up once a week and just chit chat about business and what's working and what's not. And we started up a mastermind, me and Scott Joel from egghead and Josh, who he doesn't do training he I think he does training at inside of a company now. He had a lot of Meteor stuff as well. We ran that for about a year. And we just talked about starting a podcast for about a year until after a year, we actually started up the whole thing. So we have a little bit more on our origin story about how we met, you can go listen to those, but that's the short and skinny of it right now. Yeah, - -151 -00:48:33,420 --> 00:49:28,080 -Scott Tolinski: it's funny, because maybe like a couple weeks before that, I had been looking for a mastermind group. Anyways, I had applied to be in a mastermind group, and really me like a trial run. And it was very serious. There was like seven or eight people in this mastermind group. And I was sort of like, Hey, we're looking for a new member, one of our members left, and we'll give like eight people a trial run. They gave me a trial run. And you know, here's what I believe. I believe that someone was salty enough, because I gave them website advice. And maybe they didn't ask for it. I believe I was denied that position. And that startup group, just simply because they did not like that. I told them that they were loading too many Java scripts and too many CSS is in their website, that's firmly what I believe. Instead of just yeah, I gave him some speed advice, and Hey, man, you're loading jQuery plugin, and you're not using it, but you're loading in anyways. You should not do that. - -152 -00:49:28,530 --> 00:49:59,940 -Wes Bos: People ask me all the time, like, Where do I find a mastermind group? And the answer is you just start asking people because there's it's not like a thing that they're always taking people on. So I reached out to probably eight different creators. Yep. And Scott, Joel and Josh was the The only people that were interested in it. Everyone else is either busier or didn't want the me to steal their secrets. It's kind of a weird thing to get together with your competitors and share what's working and what's not working. But I highly recommend it if you are trying to do something like that. Yeah. - -153 -00:50:00,000 --> 00:50:19,470 -Scott Tolinski: Somebody asked me in my Ask me anything on Reddit, if I view you as a competitor, I do not Oh, yeah, who is a competitor, man, I want you to succeed more than anything. Like I share your stuff all the time. And I'm not putting referral links on there or whatever I just want, you know, I just want to I just want to be big ups to Wes Bos, you know, I want, I want everyone to succeed. - -154 -00:50:19,650 --> 00:50:49,950 -Wes Bos: That's a kind of cool thing is like, I think there's enough out there for the both of us, we both make a good living off of it and enjoy what we do. So the fact that we do this podcast together, maybe we'll talk about that is, even though we do sort of sell the same thing, we just reach so many more people, because we can come together and make this awesome podcast and then eventually reach more people. Because I was asking Scott this earlier, like, we never really gave coupon codes or anything out there. But I definitely think that this podcast has helped my business immensely. What would you say about that? - -155 -00:50:50,100 --> 00:51:50,640 -Scott Tolinski: Yeah, I would say level up tutorials is not the same business as it was before we started this podcast by a longshot, you know, and and it's, it's, it's done a lot of things for me as a business owner and understanding that sort of thing. And I'm now have the resources to, like see sort of my dreams and goals through in terms of running a business. So it's only going to change even more over the next 100 episodes of syntax. So I'm just psyched. I'm psyched about the whole thing. It's, it's all been great. So next, let's get into the questions that we get asked the most. These aren't direct questions that we were asked, but this is just stuff that people ask us all the time. And so we might not have some answers for you. But we definitely have lots of questions here. The first one is, what episode was it that you blank? What episode was it that so and so sponsor? What episode was that? He talked about this, what episode was it that he talked about the drill brushes, which episode blah, blah, blah. And this all goes back to the fact that we don't have a lot of good filtering on the site, which is something that we'd like to probably improve? - -156 -00:51:50,730 --> 00:52:32,070 -Wes Bos: Yeah, we had some plans for search, I think algolia was gonna hook up something like that with their open source plan. I'm not sure what happened to that probably fizzled out or something like that. But we're gonna get search in there at some point. For now, you can just search on Google and say site colon syntax.fm. And that will allow you to search all of the Sona shownotes it is server rendered react, so you can search them all works. Well. Another question we get is, Can my boss come on the show and talk about Bitcoin? So it's hilarious. anytime anyone releases a book, or is doing some sort of PR tour, we get an email from like a PR person or like an assistant or something like that, who wants to have their like, their boss come on the show and talk about their book. They just - -157 -00:52:32,070 --> 00:52:34,740 -Scott Tolinski: see us in training and technology. And they're like, let's - -158 -00:52:34,890 --> 00:52:37,200 -Wes Bos: just do with web development. - -159 -00:52:37,230 --> 00:52:39,690 -Scott Tolinski: Yeah, blast the trending and technology people. - -160 -00:52:39,870 --> 00:52:53,190 -Wes Bos: So we I've only ever had one guest on and that progress has not gone live at the time recording this. So we'll see how it goes. But we would like we'll talk about a little bit more about that near the end, though. What other questions do we get? Can you do an episode on view j. s? - -161 -00:52:54,030 --> 00:53:13,200 -Scott Tolinski: That's a great one. And the answer is whenever Wes gets his act together, we can do an episode on Vue JS because I've been ready to go since like episode number 30. Whenever I released my DJ course, I've been ready to go west is dragging his feet here. We need to get west to the altar here. So to say, no? - -162 -00:53:14,070 --> 00:53:56,460 -Wes Bos: Yeah, it'll come soon. We'll also get asked about Angular episodes. And I can probably say that will never happen, just because I don't know anything about Angular anymore. I did do Angular many years ago. But it's all changed since then. And it's probably not something I'm going to spend a whole lot of time learning people ask me that with my course as well. Like, are you going to do an Angular course? And the answer to that is probably not just because, like I consider myself pretty good at react. And I don't want to just make a course on Angular when I haven't built any, like real world applications with it. I don't think that would be a very good course. I don't think you should trust somebody who doesn't actually build this stuff every day. Yeah, do it. - -163 -00:53:56,550 --> 00:54:29,820 -Scott Tolinski: Yeah, absolutely. And Angular actually like a very deep well, it's a very deep well of of topics and their way of doing things where like Vue js, if you have view, you're gonna feel very at home and a lot of the concepts and especially me, because there's concepts from like Angular one, there's concepts from Blaze and Meteor concepts from react, and it all sort of works really well together. Okay, next, we're going to talk about some of our just thoughts. Here's some, here's some thoughts about syntax from the syntax crew. So what are some of your random thoughts here? Wes, - -164 -00:54:30,000 --> 00:55:40,680 -Wes Bos: I think that it's pretty cool that we have a community built around syntax you can you can see it like on Twitter, people are always giving you the gears like like not being mean, but like, like it's an inside joke about specifity or drill brushes or, or things like that, which is really funny. The Twitter is awesome. There's almost 16,000 people on the Twitter account and I just really liked the syntax Twitter because it's a you can just like retweet the crap out of anyone's stuff or questions that they may have or things that they've built in. You can ask questions on it. You can get some really good feedback. And I think because it doesn't have like a face to it, there's never any of the, like angriness that comes along with like my regular Twitter where you tweet anything and you get like the the D bags come out of the woodwork anytime you post anything. And it's just so refreshing on the syntax, because it's just people that care enough to actually listen to this entire podcast. So it's just a cool community. There's lots of experts on there. So if you have like a question about something or you want someone to weigh in, before we record an episode, I can just send out a tweet on the syntax, and you'll get experts chiming in on specific things about service workers or whatever, because that's where they spend all of their time. - -165 -00:55:40,860 --> 00:56:14,040 -Scott Tolinski: Yeah, absolutely. That's super cool. And I think some of the things too, is just that, like, there's a lot of podcasts and a lot of voices. But I'd like to think that our voices and how we're like now, not the tambor tambor of our voices, specifically, but like our versions of explaining things and stuff like that, I'd like to think that we have a unique way of explaining things that makes our podcasts special. So that's just sort of a little random out there. I you know, there's a billion people can talk about react, but I think our, our the way that we talk about react or whatever it is important. - -166 -00:56:14,160 --> 00:57:14,700 -Wes Bos: Yeah, like, we've definitely found our little group of folks who support us by buying our courses, listen to the podcast, so we can get sponsors and like, it's really cool. Because like, my, our stuff is not for everybody, right? Like the things that I create is not meant to make everybody happy. The things that I agreed to, it was meant to resonate with a certain kind of person. And we definitely feel like we found those people through both my courses, as well as through the podcast. So people that like the way that we explain things, they found us, which is great. Yeah. So we're glad you found us. What else do we have here? I've just learned a lot from some researching shows asking for feedback from the community. It's amazing. Just this platform, anytime you have a question about anything, or anytime you want to run a show, and you ask for feedback, before you record, you often will get the people that are the experts at something chiming in and giving you some some helpful info. So that's really cool. Well, let's talk about the future. What is the future of syntax look like? Scott? Yeah, so 200? What is it gonna be? - -167 -00:57:14,790 --> 00:58:03,120 -Scott Tolinski: It's gonna look a lot like Episode Number 43 and 44. Because that was our golden era syntax. No, it's gonna it's gonna be awesome. I'm, I'm so excited. Because he would think that we would be running out of topics, we have too many topics to pick from every single time we want to record an episode, we're throwing out like five or six different topics that we could do it on. So it sounds like we're gonna be running out of ideas here. What I'm excited for in the future of syntax is basically that the podcast will always remain number one at the forefront of it being a most helpful resource, right? The goals of each episode should be that you can walk away learning something every single time and that it's going to help you in your day to day web development, your career or whatever. And that's, that's it that that needs to be the goal of every episode. And I'm confident that it will be. - -168 -00:58:03,330 --> 00:59:23,040 -Wes Bos: Yeah, that's what the tasty treats that's why we say it's a web development, tasty treat podcast, because we want you to walk away being like, Huh, that array method tasted great taste, you know, like to walk away with something or, huh, I'm gonna try that that audiobook that's got recommended or just something like that. Because it's, it's really cool to walk away and say, I'm going to try X, Y, or Z the next time I come across that. Yeah, absolutely. We are toying with the thought of doing some interviews, we've been doing really well with with no interviews. So far, we've been toying with the idea of doing these shows where you do talking to people, where it's not necessarily get the same folks on who go on every single podcast and talk about their open source project or what they're working on or whatever. But more like, we have this huge list. I've sourced from Twitter, were talking to someone who learned to code after having kids. So there's probably a lot of valuable information that it's gotten. I don't have there that it could be extremely valuable to our audience. So we're like, like, how can we use this platform to help people even more by possibly bringing on people and asking them questions or talking to people who did a boot camp talking to people who work at a big company? I learned this really cool. What's this acronym? Facebook, Google, Amazon Fang, have you heard this acronym? - -169 -00:59:23,280 --> 00:59:24,780 -Scott Tolinski: No. Facebook, - -170 -00:59:24,810 --> 01:00:30,720 -Wes Bos: Fang stands for Facebook, apple, Amazon, Netflix and Google. So talking to people, what is it like working at Google? Is there slides? Is there like lots of our slides. So we have this massive list of things that we want to talk to people about the problem with interviews is that scheduling is often really hard and the audio is not always great. And those are two things that we hold in high regard between Scott and I because we need to record during business hours. Most of the time. We broke that once talking to Sasha because he lives in Japan. And Second, the audio is always a hard thing. So like we can send people a microphone, that's 50 hundred bucks, but that they might be sitting in one of those like trendy fishbowl offices where it's it's echoey. And for me bad audio on a podcast is a huge turnoff. It's a Yeah, it's a turn off. I will literally turn off podcasts, this sounds like garbage. So those are things we have to figure out just yet. But I do think that we can tackle them because of the possible information that lives in other people's brands as well. - -171 -01:00:30,780 --> 01:01:15,750 -Scott Tolinski: Yeah, I don't think I think the big thing with interviews is that so many times that not only is it bad audio, but the podcast is is transparently just a stop on the promotional tour. Like here, I see you're releasing a book, let's talk about your book. Let's talk about this. Oh, yeah. And I don't want it to ever be that because there's enough podcasts that do that. Totally. Again, the idea would be that it would be helpful, I have a number in my head number, I mean, like two or three guests that I think will be really, really interesting for our listeners, and we can talk about it after, after the show is recording. I don't want to spoil anything. But I have a couple of guests that I think would be able to solve all of the problems that we have in terms of audio quality while remaining very, very interesting guests. So maybe some to look forward to that a little teaser, a little teaser, right? - -172 -01:01:15,780 --> 01:01:39,180 -Wes Bos: Oh, cool. All right. So that's it. Thank you so much for making this podcast a thing. It's amazing that we can do this as part of our jobs. I think it's it's really good just for our own skills, being able to I feel like I'm better at explaining things, I'm able to much better hold up a conversation in person just from the sheer amount of time that we've thrown at creating this podcast. - -173 -01:01:39,330 --> 01:01:49,980 -Scott Tolinski: Sick. Thank you so much for anyone who's listened to any of these 100 episodes. And those of you who've listened to all 100 episodes, Jai ganttic Thank you. - -174 -01:01:50,040 --> 01:01:51,150 -Unknown: Yeah, you are. Yeah, - -175 -01:01:51,150 --> 01:01:53,400 -Scott Tolinski: you are amazing. That's awesome. - -176 -01:01:53,459 --> 01:02:16,770 -Wes Bos: That's always the funniest part where somebody like finds a podcast like two months ago, and then they're listening to one every day. And then all of a sudden, they it's like they're listening to all 100 I listened to one a day. And you have to wait for one or twice a week is when we put it out. So props to you if you keep up with the the amount because I definitely have some podcasts where it's just way too, too much for me. - -177 -01:02:17,100 --> 01:02:30,300 -Scott Tolinski: We've missed one section of this episode, which would have been what are your favorite podcast episode titles, and mine would be Keeping Up With The Kardashians. That's my favorite episode title. And I know everyone hates it. So there that's uh, that's it. That's all I got. - -178 -01:02:30,540 --> 01:02:35,190 -Wes Bos: I don't have a favorite podcast episode name, maybe big zips? That was a good one. - -179 -01:02:35,220 --> 01:04:33,840 -Scott Tolinski: Yeah, that was a good one. That was a definitely a good one. I think it was well read. Just Well, let's go ahead and talk about sick pics, do you have a sick pig cuz I have a sick pick that I've been very fond of. While you're looking for your sick pick, I will go ahead with mine. My sick pick is an app called notion. And now, this app is probably no mystery, because it's been out for a little bit. But I've kept my eyes on it for a little bit. And I'm starting to actually use it very intensely now. And that notion is available at notion. So I'm not affiliated with them. However, I will have a link to my referral link in the show notes. So if you want to help support us in that way, and you want to sign up for notion, click my referral link, that'd be great. But notion is basically you could think of it as like a note taking app on steroids, it does notes, it does like knowledge base stuff, it does cabanne boards, it does spreadsheets and databases, it does to do lists, and it has a bunch of templates in it. And one of the things that I think this is like really sets us apart from other apps is that it definitely feels more like a web site sort of thing. Because you're creating pages, within pages within pages that I'll automatically create hyperlinks for you and stuff like that. And what it turns into is like a giant data resource. And I can have so many things on here. So for level up tutorials I can have which contractors I'm working with at the current time, you know, the status of invoices, I could have a to do list for my video series. So I have like a whole in production verse in progress sort of thing. And I have my design system stuff in here. And the coolest stuff about is you can link in and insert embed current things like I've embedded my figma documents in here. So you can embed your color themes and stuff like that directly in here. There's a desktop app, there's a mobile app, I have been loving this thing I have been spending all of my time in it, and I can't get enough of it. - -180 -01:04:34,050 --> 01:05:20,280 -Wes Bos: Awesome. I'm going to sic pick MongoDB compass Community Edition, which is the free version of it. I'm not sure what the other version if you have to pay for it or not. But if you are using MongoDB, and you need some sort of GUI tool to interface with your data, and this is often the case with me because if I build something, I might not build an actual admin UI until it's completely fleshed out and I just need to be able to edit my data directly. I've used all kinds of have apps I use one called Mongo hub for the longest time, but MongoDB compass is fairly actively developed. And I've noticed in the last six months or so it's been getting pretty good. It's a lot of the rough edges that I initially had with it are seemingly gone. So check it out if you need a GUI for managing your MongoDB. It's called MongoDB. compass. Cool. - -181 -01:05:20,310 --> 01:05:30,390 -Scott Tolinski: I use studio three t. I am interested in learning about compass here, because it looks like it was designed in 1990 and has not changed. So - -182 -01:05:30,750 --> 01:05:47,340 -Wes Bos: yeah, there's a lot of these like Java apps that like use their own GUI that are like pixelated and things like that. So yeah, this is such I think this is built in I think that's an electron app. It feels like an electron app. Which, which by I mean, it feels like a like a web app. Yeah. Yeah. That's pretty cool. - -183 -01:05:47,340 --> 01:05:51,450 -Scott Tolinski: I feel like notion is probably an electron app as well. Do you have any shameless plugs? - -184 -01:05:51,570 --> 01:06:04,830 -Wes Bos: It's gonna shamelessly plug all of my courses Wes Bos calm for slash courses. I probably just sent you tons of emails from Black Friday. So I won't push any further on that. But thank you so much. If you didn't pick it up on Black Friday, Cyber Monday means a lot to me. - -185 -01:06:04,980 --> 01:06:52,290 -Scott Tolinski: Yeah. And I'm going to again, I'm also going to, shamelessly plug levelup Pro, which is a subscription service for mobile tutorials. You'd access to over like something outrageous, I think was like 400 Premium tutorials right now. And then there's going to be like 300 more over the next year. If you send that yearly save 25%. And I'm going to announce right now you have very little time before the prices are going up. We have so much content right now, so many improvements coming to the platform prices are going up January 1. So if you miss the Black Friday sale, and you still want to get in at a low rate, and you want to be locked into that rate forever, sign up for it level up tutorials.com forward slash pro right now for one year, and you'll be locked into that rate while the prices go up. So thank you so so much for everyone who's subscribed so far. And yeah, appreciate it. - -186 -01:06:52,530 --> 01:07:00,030 -Wes Bos: Alright, that's it for today. Thanks for tuning in. See you at Episode 101101. Yeah, please, please. - -187 -01:07:01,830 --> 01:07:11,580 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax101.srt b/transcripts/Syntax101.srt deleted file mode 100644 index 1ca4c22a5..000000000 --- a/transcripts/Syntax101.srt +++ /dev/null @@ -1,200 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. Totally at ski. - -2 -00:00:25,980 --> 00:00:26,610 -Unknown: Oh, welcome - -3 -00:00:26,610 --> 00:02:10,650 -Scott Tolinski: to syntax today is a hasty treat in the craziest tastiest podcast around we're going to be talking all about where are they now, we're gonna be talking a lot about libraries that have been hot or somewhat hot in the past things that have been widely used or hyped up, and maybe are less widely used or hyped up or if all around disappeared. Today, we're gonna be doing a little bit of where are they now with some of these libraries. Oh, my name is Scott Tolinksi. And with me, as always, is Wes Bos. And this episode is sponsored by our friends over at content full. Now content fall is a great way to host your data. Now in the modern front end web. We're working a lot with front end technologies. And that leaves out a big piece of the puzzle, which is your data. Where does this live? How does it stored these things that you don't even want to have to worry about right? Just give me a list of blog posts and let the website figure it out. So content fold makes that really super easy by allowing you to organize, manage and completely control all of your data. Not only that, but it makes it really easy to access your data when you need it. So we really love content fall as a platform for all of our front end code pulling in data. Anytime that you need to store some stuff, it is the back end CMS of the future. So check it out, head on over to content fool.com forward slash syntax FM and if you sign up for content full, you get a free pair of content full socks, and let me tell you these socks are awesome. What's and I both have the socks, and I'm wearing mine right now. So I'm a huge, huge fan of content fall. And I know Wes is as well. So check it out again, and content fool.com forward slash syntax FM. Alright, so - -4 -00:02:10,650 --> 00:02:58,800 -Wes Bos: we're gonna talk about where are they now? frameworks, libraries, things that we use in web development. And probably about maybe five years ago, they were the hotness as we say, these were the up and coming or the super popular pieces of technology in web development. And now five years later, you look back and go Hmm, it's interesting that you don't see that all that much anymore. So it's important to note that we're not going to say that these things are dead, because at some point, you're going to choose these technologies, and you're going to have to commit to them for however many years, it's you can't move around as quickly as that when you have a business to run. But we're saying that these are sort of the Macaulay Culkin of web development technologies where that guy is still around, he's living his life enjoying things, but you don't hear from him all that much anymore. And you think back? Uh huh. Whatever happened to that? Yeah, - -5 -00:02:58,890 --> 00:03:03,510 -Scott Tolinski: yeah. So what you're saying is that these are gonna make me slap my cheeks and scream. - -6 -00:03:04,680 --> 00:03:35,400 -Wes Bos: Oh, my gosh, oh, that's terrible. I also want to say that no shade thrown on any maintainers or developers behind these frameworks, I think that's really important. Because often, there are people who take on these projects that are a little bit older and maintain them for security for features for bug fixes, things like that, because their company or their projects actually need them to survive. So props to them for doing that. This is not to say anyone who's worked hard building a framework or maintaining a framework should have any shade thrown on them for that. Yeah, - -7 -00:03:35,400 --> 00:03:37,770 -Scott Tolinski: we were talking about no shade zone, - -8 -00:03:37,860 --> 00:04:13,950 -Wes Bos: no shade zone, we're talking on Twitter about this. And somebody said, anything that Jeremy ashkenaz put out, and so he's the developer behind backbone underscore a lot of the jQuery stuff, it was hugely influenced influential in the JavaScript community. And anything he touched, was just turned to gold, which is such like, he really shaped how JavaScript like push forward in the last couple of years. A lot of the things that he built are on this list, but I thought that was important to note as well. So let's start it off. Why don't you grab the first one there, Scott? Yeah. First - -9 -00:04:13,950 --> 00:04:29,490 -Scott Tolinski: one is, we have a couple of tools here. So these aren't the same tool, but they're both sort of in the same category, one of which is grunt and one of which is Gulp, both of which had some cute logos. We had one that had like a wild boar when they had like a cup. I mean, was the cup with the straw and 711. - -10 -00:04:29,490 --> 00:04:31,350 -Wes Bos: Big, big gulp. - -11 -00:04:31,380 --> 00:05:19,470 -Scott Tolinski: Yeah, so these tools were largely considered to just be build tools. Now people would call them like a task runner or something, you know, who knows what everyone had like a marketing slang for it. But at the end of the day, the whole thing, the whole thing that these things were doing was taking your code, building it into something that the browser can understand. And then outputting some other code. So whether or not that is things like, you know, collecting your JavaScript files, whether or not it's compiling your sass or stylus, which I would imagine is the first time that a lot of people use some of these was just simply working with sasser or one of those technologies. It would also do things like compress your images, it might build a web font or something like that. It there's a host of tools that these things could do. But at the end of the day, everything involved here was really just a build tool. - -12 -00:05:19,500 --> 00:06:58,080 -Wes Bos: Yeah, I think that I still use Gulp in a whole bunch of my projects. Yeah, I still look at Gulp as one of the best things that I've used in the last five, six years, because it was so easy to use, so easy to build plugins for the plugin ecosystem was was massive. And when we moved over to using the replacements, which is more things like using parcel or Webpack, or whatever, it sucked, because like, first of all, I was coming from this idea of taking something, piping it through all of these transform, and then outputting it somewhere. And Webpack has a whole different thought. And the way that we build apps is totally different. These days, where it's more of like a No, your application requires these assets. And Webpack is smart enough to detect those as the throw. So you approach it in a bit of a different way. So I don't think that Gulp is really going anywhere. I know that a lot of people are still building websites where they just need to be able to pipe in some images and some sass and some JavaScript, they need to run it through whatever transforms they need to do, and then kick it out to a build process. But I do think that because of the different types of apps we are building, especially when you look at things like Gatsby, or next, or, or whatever the tools need to be built into these frameworks for us, which I wholeheartedly welcome. Because I don't just not use Gulp anymore. I very rarely ever have to touch something like Webpack because the frameworks or something like parcel just does it for us. So yeah, I think we went we went back a little bit for a little bit there with Webpack. Obviously, people still using Webpack. But I prefer these tools that use Webpack or parcel under the hood and do the hard work for me. - -13 -00:06:58,110 --> 00:07:43,020 -Scott Tolinski: Yeah. And I'll even still reach for Gulp in situations that are like, Alright, I need six images output in different sizes and dimensions or whatever. And instead of using like Automator, or some built in Mac OS thing, I'll reach for Gulp because it's just like a syntax. I know. I know the plugins I know just write a simple utility for myself. So I still see Gulp used all the time. grunt not so much. I don't do like I don't see a ton of people using grunt are suggesting to use grunt as more. I remember when Gulp first came out, I was sort of like, Oh, this is a lot nicer to me than than grunt. And I dropped grunt very quickly. But I'd be interested to hear what percentage of people are still using grunt specifically? Because I just don't i don't see it that much anymore. - -14 -00:07:43,169 --> 00:07:51,870 -Wes Bos: Yeah, I forget what the differences were, it was something to do with streams versus like, temporary files. And how fast Gulp was over grunt, - -15 -00:07:51,870 --> 00:07:54,900 -Scott Tolinski: I remember was a lot of extra syntax compared to go, - -16 -00:07:55,110 --> 00:08:28,650 -Wes Bos: Yeah, it was. That's the whole like coding versus configuration. A golf was a huge config file, which web pack also is I much prefer the Gulp approach to things where you would just code JavaScript, and pipe them through all of your your, your plugins that you have. So kind of interesting to see us move along. That's probably the saddest one that I see moving on. But I understand why it is. Because the tools are getting better. And the needs, especially with JavaScript, our needs are much bigger with things like code splitting, tree shaking, it's just a lot more complicated that you simply just can't do that with something like gob. - -17 -00:08:28,680 --> 00:09:43,110 -Scott Tolinski: Yeah. And I think another thing that these tools that we should mention is that they were an important to bridge to a gap that was like, people who who are getting into compiling things, they would use an app like compass app or code kit was used for a long time. And there were some others, I forget their names even now. But like these tools allowed us to understand the build process more than just opening up an app and selecting a folder and having it do its thing. So let's get into the next one, which is one that we briefly mentioned in the intro, the star which is backbone, and it's sort of counterpart library that's often used, why I would say mostly used with it, which would be Marionette which you would be described as a backbone framework. It just makes writing backbone code easier. backbone would be considered one of the sort of Oji web frameworks In my opinion, were like, this was one of the very first JavaScript based frameworks, front end frameworks, I should say that that really took off to the point where it was highly used and things like enterprise and I remember interviewing for a lot of jobs, even well into Angular, angular one's heyday, that we're still using backbone and lots and lots and lots of work on backbone itself. This is this was one of the first ones West Did you ever have any experience using backbone yourself? - -18 -00:09:43,199 --> 00:09:52,830 -Wes Bos: Yeah, I think back to it. I remember so clearly taking the peep code backbone tutorial, which was a huge motivation for me building my own - -19 -00:09:52,949 --> 00:09:54,270 -Scott Tolinski: Ember tutorial. So - -20 -00:09:54,290 --> 00:10:18,480 -Wes Bos: yeah, deep code. code was awesome. For those that don't know it. He was one of the early like, screencast stirs that would sell modern web development screencasts. And the whole company got bought up by I think it was Pluralsight, which I thought was kind of cool. So I did build a couple things. I don't think I ever deployed any production backbone code, just because by the time I got up and running with backbone, angular was becoming popular. That is - -21 -00:10:18,480 --> 00:10:24,180 -Scott Tolinski: that I don't know if that was an intentional joke about backbone, but it could be read as one. And in that case, what - -22 -00:10:24,180 --> 00:10:25,040 -Unknown: was the joke? - -23 -00:10:25,140 --> 00:10:29,820 -Scott Tolinski: The joke is that backbone was difficult to learn. And so by the time you got up and running with it, - -24 -00:10:32,220 --> 00:11:09,600 -Wes Bos: I think it was definitely difficult to learn. But also it was the first like frame where there was like knockout as well. Yeah, at the same time, and can j s was a big one, or but even before that, we had something called JavaScript MVC. But that was like the first time that people were looking away from jQuery and saying, Hmm, maybe we should use a framework. And it was like a totally different mindset to approaching especially front end developers who had never built any sort of complex logic on the on the back end, you had to like relearn a lot of stuff. And I know people had that having to relearn when they first learned Angular for certain react. But the whole industry sort of was shook up when when backbone came on the scene. - -25 -00:11:09,630 --> 00:12:11,670 -Scott Tolinski: Yeah, I read the book, human JavaScript. And that sort of opened my eyes to backbone. And then I actually picked it up, I decided I was going to do a tour of the front end framework. So I picked up backbone, I picked up Ember, which was still pretty young at that time. And I picked up Angular, which was also pretty young at that time. But I remember just being like the Angular, I think picking up Angular was faster. And like you were instantly a little bit more productive with it, even though it wasn't necessarily as structured. And so for me, I like gravitated towards Angular immediately, just because it was easier. But then I did have to learn backbone for a few job interviews and things like that. And I actually went on one job interview, and they were just like, so can you code out for us two way data binding in backbone. I was like, well, I've never done it in backbone. But, you know, I've only been working in Angular lately, the past like few months. And they were just like, Well, can you do an example of two way data binding in Angular? I was like, I mean, I could, but it's going to be worthwhile for this interview. Because it's too easy. It's like, - -26 -00:12:13,020 --> 00:12:13,530 -Wes Bos: yeah, you - -27 -00:12:13,530 --> 00:12:15,270 -Scott Tolinski: don't have to do anything. Yeah. - -28 -00:12:17,220 --> 00:12:22,140 -Wes Bos: So that's, that's interesting. What was Marionette I have never looked into that. I remember hearing a lot about it. - -29 -00:12:22,320 --> 00:12:57,930 -Scott Tolinski: Yeah. So Marionette was basically just a way to make backbone less verbose, less, sort of boilerplate D, it was sort of just like an extension on the backbone. And most of the time, people I don't think use backbone too much without Marionette. I could be totally wrong on that. But from the things that I worked on, and people I've talked to Marionette was almost always used side by side with it in larger projects. Because when I even interviewed for one backbone job, I didn't, I didn't do very much Marionette, I'd only done just straight up backbone, because I'd read some books and done some examples. And they're like, Oh, you should be using Marionette. Okay. Okay. So - -30 -00:12:57,960 --> 00:13:13,350 -Wes Bos: yeah. Interesting. Next one we have here is package manager. So for the longest time, we didn't have a package manager for JavaScript, you simply would just go to a GitHub or even before that you just go to like a random website or a Google remember Google Code. - -31 -00:13:13,380 --> 00:13:17,220 -Scott Tolinski: Yep. Maybe grab the script, download CDN, and just pay Yeah, you - -32 -00:13:17,490 --> 00:13:27,840 -Wes Bos: just pasted all these like script tags in the head of your document, and then your page load would be super slow. And that would be your dependency management. And if there was ever and like an update, you probably would never get that. Or you would probably - -33 -00:13:27,840 --> 00:13:38,190 -Scott Tolinski: never even know, I just remember like loading scripts directly from a CDN and being like, I don't know why this is be a problem ever. It's easy. how things have changed. Well, what - -34 -00:13:38,190 --> 00:13:50,100 -Wes Bos: came around in the early days was we had NPM, which is the node package manager. And then there was a huge push to make something called Bower, which is a front end package manager for JavaScript and CSS. Another cute logo - -35 -00:13:50,100 --> 00:13:50,820 -Scott Tolinski: here. - -36 -00:13:50,850 --> 00:15:02,280 -Wes Bos: Yeah, that was that was that was a good good quality logo. I think sticker mule still uses that logo as like their example sticker, which is fine. Right. And the other one was components, which is by TJ Holloway, Chuck. He's the developer behind everything, everything on the internet like Express and I can't what they are stylus, Jade, pretty much anything I love. He's one of those one of my darling web developers. He unfortunately is a go developer. Now, he doesn't do a whole lot of JavaScript anymore, which made me sad. But so he came up with components. We had Bower, they had a big push. But it was frustrating. Because there were like library authors that were like taking sides and being like, No, I'm only pushing to Bower or I'm only pushing. Because what happened is people just started putting packages in NPM for front end, and we're like, what are you doing? This is node package manager. But NPM was like alright, bring it on. We'll be like the the package manager for web development. And slowly Bower and component never components never really got a whole lot of traction. Bower got some initial traction, but people started to side with NPM and I am so glad that as much as people complain about NPM I'm so glad that we only have one person Yeah, now instead of multiple, - -37 -00:15:02,370 --> 00:15:23,130 -Scott Tolinski: I understood like the use case for Bower, but it was like solving a problem that I didn't like totally understand at the time or feel like I had. So like I ever reached for Bower, I think I only used Bower and projects where as part of the boilerplate, and it was like, Okay, this is part of the flow of this project. But I don't think I ever really was like, this is the this is the right answer. I am - -38 -00:15:23,160 --> 00:15:41,130 -Wes Bos: Yeah, my my only experience with that was, like I composer or PIP on Python, and I almost my only experience was it never freakin work. Yeah, you just like pip install, blah, blah, blah, it would just puke onto the screen, and then it would be broken. And five years later now NPM does that just as well. So? - -39 -00:15:41,910 --> 00:17:18,860 -Scott Tolinski: Yeah. Nice. Cool. So next up we have was compass. Now compass is one of those things that again, was primarily used as a package deal along with sass, when sass first came out, it was sort of like, well, you're going to use sass, and you're going to use compass, because compass gives you all of this extra additional functionality that is more or less not to what a processor does, or preprocessor does, but as stuff you're going to need in CSS, so compass gave you a lot of CSS, like utilities, or sass, things like prefixing, there were some really cool sprite generation tools, there was like a billion mix ins they came in at, you could do things like create triangles and stuff like that really easily with a mixin rather than seat like having to write out that CSS every time. And there was just a whole bunch of stuff that that made your life a little bit better when working with CSS. And I was such a huge, huge fan of compass for a very long time I use compass, it was actually I am going to credit Chris Epstein of compass with some of the I don't know, the the drive that at least started level up tutorials to be big as it is. Because in 2012, I released a couple of tutorials on Drupal and sort of stuff like that. And it just sort of sat around and I released some sass tutorials. And I don't think the world was really ready for sass. At that time, at least the YouTube world wasn't ready for it. And then I released some compass tutorials. And Chris, he started tweeting out my compass tutorials, and that seriously took off my YouTube channel. So I owe a huge amount to the compass project in general. But I'm just a huge fan of this. And I even used the compass app for a very long time as well. This was a big one for me. - -40 -00:17:18,930 --> 00:18:20,730 -Wes Bos: Yeah, I remember seeing the sprite generation alone. So we maybe should explain what sprites are for the kids to the podcast. So back in the day, you would have all these little icons that were a PNG. So you'd have like your little search icon that was a PNG. And you would have like a background gradient that would repeat on the X or Y axis that was like a little PNG, or you'd have all of your icons every like little image that you needed to make your website work you needed to have as a PNG and that would slow your website down. Because if you have 40 different little icons and borders and things that are all PNG based, you would have to put them in one big PNG file called a sprite, you set the background position of each of your divs. Like you would say like this span is 50 pixels wide and 50 pixels high. And the background position is like 300 pixels over 200. You'd like battleship Yeah, to figure out where on the sprite. That image was. And it would just show that little thing. Yeah, yeah. Was there one post? I - -41 -00:18:20,730 --> 00:18:27,080 -Scott Tolinski: think it was like about how Amazon use CSS sprites or something. And that like blog post, like blew up of CSS - -42 -00:18:27,080 --> 00:18:27,590 -Unknown: sprites? - -43 -00:18:27,660 --> 00:18:46,920 -Wes Bos: Yeah, I remember that coming out. And then every time I would like inspect element on like a search button on Google, you would find the link to their spray. Yeah. Yeah, they would need Yeah, he was fine. The spreadsheet. So that was a pain because you would have to make your own sprite sheets, or I used this website from Jake Archibald called Sprite. Yeah, I love this breakout. Yeah. - -44 -00:18:47,040 --> 00:18:47,790 -Unknown: Oh my god, - -45 -00:18:47,810 --> 00:20:15,320 -Wes Bos: it was so hard to make them because if someone was like, cool, but can we have a red search icon, you'd be like, Oh my God. Now I have to like change my sprite sheet. So what this did is you would just export all of your images as separate PNG files. And then you would just set the background image to be like background image, lemonade, search dot png, and then the lemonade script would collect all of your PNGs put them into one big file and then replace the CSS to wherever that image was in the destination, which is such a roundabout way. And now we don't even have to think about that because you have things like svgs and and whatnot. You don't have to worry about it. You don't have like interface rasters anymore. Yeah, totally. So sprite generation. What happened to Compass it basically, it didn't become unpopular. It's just that the entire language progress. So the vendor prefixing either went away, vendor prefixes are almost not a thing anymore, or they got replaced with autoprefixer. And people started to get a little bit overwhelmed with how messy compass code could get because people got like so excited about all of these mix ins and having a variable for absolutely everything. I remember how A project where I was like, Where's this border radius? Sen. Oh, it said in this file, it's related in this file treasure that is imported from this. And I would just like being chasing around, I'm like, I just want a border radius variable, or I just want to type five, and have it show up, right? - -46 -00:20:15,540 --> 00:20:34,550 -Scott Tolinski: That was always the worst when you had like a big framework type project. And it would be like, Alright, now I want to change this one particular element, you go to that particular element, and it said as a variable, that when you change that variable changed like eight other things. So then you had to make a decision. Do I want to branch this off from this? Or like, How do you like it would just it like complicated things before it needed to be? - -47 -00:20:34,610 --> 00:21:18,720 -Wes Bos: Yeah, Foundation, I think foundation two was very heavy, very heavy on these these calculations. And I often found myself being like, this is unnecessary. For me, at least, that happened. And then the big thing that killed it was that the maintainers themselves sort of like gave it the kiss of death intentionally. They said, We are not going to port compass over to two node sass or lib sass or anything like that. So it was only in Ruby sass. That's what sass initially was in. But that was very slow. So it got rewritten in C. And it got rewritten in Dart as well. And the maintainers of Chris said, I will not port this over because it's not necessary. We have better things now. And this project served its purpose, but we don't need to go any further with it. - -48 -00:21:18,720 --> 00:21:46,800 -Scott Tolinski: Yeah. And cheers for that. It made my life so much better at the time. Yeah, cool. So I think that's it, we have a lot more of these, we're gonna be doing more of these episodes sprinkled out whenever we have, there's a lot of tech that you know, was once used and is no longer used. So I hope you found this episode to be interesting. And we're gonna keep these going. You'll have another one next week. So we're gonna do another Where are they now next week, and we got some more really exciting fun stuff for you planned. So yeah, keep your ears open for that one. - -49 -00:21:46,800 --> 00:21:49,820 -Wes Bos: All right. Thanks for tuning in. We'll see you Wednesday, please. - -50 -00:21:52,290 --> 00:22:02,070 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax102.srt b/transcripts/Syntax102.srt deleted file mode 100644 index a1ab29e3c..000000000 --- a/transcripts/Syntax102.srt +++ /dev/null @@ -1,284 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:05,760 -development treats out there, - -3 -00:00:05,760 --> 00:00:49,409 -Scott Tolinski: strap yourself in and get ready to live ski and West boss. So welcome to syntax. In this episode, we are going to be doing a another potluck like we do every single month where we answer listener submitted questions. So if you have questions of your own, and you'd like to hear them on a potluck episode, First, make sure it's a good question. Second, head on over to syntax FM, and submit this question that we have a I think it's a button in the top right that just says ask a potluck question. So go ahead and click on that button, ask your question there, it gets submitted to our sheet. And then we go ahead and pick the ones that we think are going to be very good for everyone else to listen to. My name is Scott to Lenski and with me as always is West boss. - -4 -00:00:49,469 --> 00:00:53,580 -Wes Bos: I am hungry for some tasty treats today. Scott, I can't tell you that Oh, yeah, I'm hungry - -5 -00:00:53,580 --> 00:01:20,700 -Scott Tolinski: to this episode is sponsored by as Wes said before the show two types of books, fresh books in Manning books, which is the joke I think we made before. So there we go. When we want to get further on in the episode, we'll give our sponsors a little bit more time talking a little bit about fresh books and Manning books. So let's get into this potluck where we have a whole bunch of fun questions lined up for you here. I think it's gonna be really good one. Do you want to take this first one? Yes, - -6 -00:01:20,759 --> 00:04:30,720 -Wes Bos: I do. So the question is from Aaron Kessler, how do you distinguish between normal and virtual pixels on high DPI devices? How do you call pixels? Which tools do you use for optimizing images? So interesting question. So real quick, if you're not familiar, device, screen resolutions are getting really high. So the way it used to be is you'd get like a 19 inch monitor, it would be 1080 P, and you'd have 1920 pixels by 10 ADP pixels. And the actual pixels in the monitor are the actual pixels that show up on the screen. Now we start to get higher DPI devices. So think of a 4k TV, a 4k TV or a 4k monitor has four times the amount of pixels. But if you were to run it at those pixels just get much smaller, because they can still you can still get a 4k 19 inch monitor. It's just that the pixels are much smaller and everything is much crisper. And the problem with that is if you were just to run it at, like however many pixels 4000 pixels wide, everything would be extremely tiny. And you can't necessarily do that. So what high DPI does is that it will scale up the content like your phone, for example is not the first retina iPhone was not 320 pixels wide, it was 640 pixels wide. And then it just doubled everything up. So you you as the developer still thought it was 320, but everything was just twice as crisp. So that's the whole idea behind high DPI, I recently upgraded to a 32 inch 4k display. And this is really good because you can everything. It's not totally retina but everything is very nice and crisp. So the question is how do you handle this way back when the first retina iPhone came out? What happened is that everyone was still using like PNGs for like icons and stuff like that. And you still see it on websites, you'll you'll see a company's logo, and it'll look pixelated, and everything else will look nice and crisp. And that's because they are using a raster based logo or raster based images for that. So what are the solutions, I almost don't care about this at all, because it's Yeah, the devices problem to figure out what the resolution is, whether that's your Mac, and you're changing the resolution for more space or less space, or whether that's a phone where they are scaling up the pixels, you should mostly be using things that are vector base like type is vector based SVG is vector base, all of CSS is vector based. So you don't have to worry about any of that you don't have to worry about sizing or anything. Really the only spot you do have to care about is raster base images. And if that's the case, I will almost for logos, I'll just export it at twice the size for JPEGs. I mostly don't care about it, I just I don't want to people were exporting like double the JPEG for a long time. And then that just caused your your download size to bloat because now you're serving it, you can use things like was this source set on an image tag to provide different images for different resolutions if you want, but I mostly just lean on using vector based things and for raster based just make them a little bit bigger than they have to be so that they do look fairly crisp on high DPI devices. Yeah, - -7 -00:04:30,749 --> 00:07:18,450 -Scott Tolinski: I mean, my answers the exact same really, I don't think about it. And then the only time I do think about it is with my like course thumbnails, which are raster images, and even then it's like just a hold out of an older website. So I think though, those are gonna be going away. And the idea here is that well, now you can do shapes with CSS, you can do shapes with SVG. I mean, you can do so much. So between CSS and SVG, there's really not a whole lot of reasons to really care about this too much more other than just to be aware of that. It's a Cool. So next one we have is from AJ. He told us just to pronounce his name AJ, which is nice. And this question is, what are your thoughts on TypeScript? And selfishly I'd like to be learning about using it with react, any temptation to try it out if you're not already doing so why why not any sources you'd like to share on TypeScript? I recently released a course in November called level one TypeScript. So I have quite a bit of little experience here lately, picking up TypeScript and using in practical ways and things like that. And for a long time, I know we both sort of had been talking about some of these type systems for JavaScript as being like sort of a little bit of the Wild Wild West right now in terms of, there's a bunch of different ones. And you know, what are the best ones which are going to arise and which ones are going to really take care of the market share and things like that, if you've been paying attention, or looking at this stuff at all, you really see TypeScript and reason, both getting a lot of push lately, and I think TypeScript in particular is really sort of like the the popular solution. So I've become a big fan of TypeScript. And over the course of using it, and diving in deeper while making a tutorial series on TypeScript. There are things I don't necessarily like about it. But there, there are so many things to like about having types in JavaScript, in general. So I got used to types. The, I think, mostly just via one back end sort of programming, but also the graph, qL, and Apollo, I mean, everything's typed there. And if everything is typed there, it's going to be really nice to have your whole system be typed, because you can see the benefits of a type system immediately. And TypeScript In my opinion, does have the most to give you a straight up type system with getting in the way the least. And so that's personally why I like TypeScript, I think it's a good thing to learn, it's the thing that you're going to start seeing a lot on job applications and stuff like that. So I would personally add it to your list of skills, it's not a huge time sink to learn it, I don't think it's a huge investment to learn it. So if you're looking to learn in you know, you can subscribe to level up pro or by whatever not intending this to be an ad, you can find videos on YouTube as well just go ahead and at least at least get a basic understanding of what it is and how to use it. - -8 -00:07:18,690 --> 00:10:43,159 -Wes Bos: I'm pretty much of the same way. I think it's really neat. Doing graph qL has made me realize that types are awesome. And it would be great, I don't think I'd recommend it for someone who is brand new to JavaScript to learn it, I think is first learn regular JavaScript and then sort of move up to that it has this there's this really interesting tweet by Devin COVID, who's the the dev behind parcel, that amazing developer and he said, why he's not using TypeScript and people got spicy about that, I thought it was really interesting. And like, you're obviously free to use whatever it looks like he's using flow, which is a another way to do typed JavaScript. It's not its own language. It's just a syntax syntax that you add to your existing JavaScript to get types in it. But it's kind of one of these things like CrossFit, where people start using it. And they're just like, this is amazing. To tell everyone, I think people come off a little bit heavy sometimes. But I think there's a reason behind is that it's, it is awesome. So I'm really looking forward to to picking up a project in it in the future, because I've used it in a couple little demos here or there. But I haven't done anything like significant in it. And it's on my list of highly requested tutorials. So yeah, pretty cool. I think you should definitely check out TypeScript. If you are wondering, I don't think it's going anywhere, especially with the tooling of VS code. Now as well, word next question we have from Luke, I have heard you guys say good things about Digital Ocean before, but I am reading a lot of bad reviews about them on various websites. Are these just frustrated developers? Are there any merit to these claims? So Digital Ocean for those who don't know is like virtual private server, meaning that you can pay five bucks a month and you get a server quote, unquote, and a dedicated IP address, and you get some dedicated RAM and you get some space, put your stuff in, it's just a raw Linux box that you can log into and install all your stuff. They also have this idea of like droplets, your install is a droplet, but they have this idea of like pre made droplet. So you can you can grab like a Rails droplet or a node droplet and just get up and running immediately. The downside to that is that you it's still a Linux box, and you still are managing the box yourself. You're responsible for security updates you're responsible for if you just nuke the whole thing, and it doesn't work. It's not like when your WordPress goes down, you can just call GoDaddy and ask them why is my WordPress broken? Because at the end of the day, this is just it's just a resource. It's just a service that you you can buy. So I think when people the Digital Ocean is amazing, one of my favorite companies ever they are making some amazing stuff. I love everything they do. I think people who are frustrated with digitalocean are frustrated because it's not the handholding that they may have been expecting. Right And the reason it's cheap is because it's a raw box and you Gotta do it yourself. If you do need a little bit more hand holding, you need to go for some sort of managed service like like a Heroku, or now.sh, or WP engine or something like that, where these are services that are meant for hosting your, like Netlify or, or anything like that, where these are services that are meant for specifically hosting specific types of content. And it's going to be easier, but it's just probably going to be a little bit more expensive as well, the the more low level you go, the cheaper it gets, like the the very low level, you get like AWS lambda, which is impossible to configure, but the very cheapest, you could run your website on three cents a month, probably. And then the very expensive is the easiest. - -9 -00:10:43,230 --> 00:12:04,020 -Scott Tolinski: Yeah, I remember when I signed up for digitalocean. And I was just like, oh my god, I can't believe how cheap This is. And then I learned everything I had to do myself, which I had never had the experience of managing a VPS before then actually, I guess I had with a media temple. But I don't know, for some reason digitalocean just felt a little bit different. And I really loved it simplicity and the documentation. I agree. I think most people guys are amazing. Yeah, that would get upset with that maybe it got in a little over their head without knowing what they were expected to be doing themselves on this platform. Or maybe they don't have the DevOps training or something like that. I personally didn't. But I have such a fondness of hacking away at those little things and gaining that Yeah, like little knowledge, you're experimenting that way. It's like a fun thing for me to figure out. And digitalocean One of the things that they do better than anybody is in their docks they like they really always have security first. And so they're always telling you to do like best practices and in configuring and you know how to how to do this and how to change the port and which you SSH on and stuff like that. And, and all sorts of like little things that I think that other platforms might just overlook showing you the bare minimum. And so I'm just a huge fan of digitalocean because of that. But again, it is a custom platform, and it requires a lot of work in that regard. So if you don't have that knowledge, by all means, take something that's a little bit more suitable for you. - -10 -00:12:04,289 --> 00:12:10,140 -Wes Bos: Yeah, like I had to figure out how to install swap memory. Have you ever heard of what that is? No, - -11 -00:12:10,230 --> 00:12:13,649 -Scott Tolinski: I've heard of swap memory. But I have not, I'm not going to work with it, - -12 -00:12:13,710 --> 00:12:45,840 -Wes Bos: you only get like half a gig of memory on your like $5 box. And if you want to npm install that will most likely like rollover, because 512 Meg's is not enough memory to do an npm install. So if that's the case, you need to use some other hard drive on the box as temporary memory. That's what swap memory is. And you have to you have to like dedicate part of the hard drive to it. And it'll it'll temporarily put those things on the hard drive as memory and read them back. And I was like, why do I know this? I'm a JavaScript developer, but it worked. So it was good. - -13 -00:12:46,260 --> 00:15:47,610 -Scott Tolinski: Nice. Alright, so the next question is from amo. And this question is really interesting, because we both run our own e commerce platforms, I thought this would be a good fit for both of us. So if you were to build an e commerce store, given that your business requirements specify that custom functionality is needed? Would it be smart to roll your own service? Or use Magento? Shopify WooCommerce? If if the latter what is the development experience like, which is shown a greater ability to implement custom functionality for server and client side code? Assume and time and budget is somewhat favorable? This is a tough question. And this is a question I think a lot of people might I think a lot of people might struggle with the e commerce is not a whole lot of fun in this territory. I know Shopify is is pretty flexible. I haven't used it myself. I have used Magento. extensively. Those of you who have been following level up tutorials for some time knows that Magento tutorials have been around for a long time. I don't want to say I hate Magento. I don't like Magento. Yeah, it's slow. It's incredibly annoying to develop on. And I don't know if Magento two has gotten that much better. But Magento one for the time that I spent with it was never any fun to work with. And we had projects with a huge amounts of skews and stuff like that, and, and the flexibility is fine. If you're good PHP developer, I'm sure you can can make sense of everything. I don't know, I just never loved working in it. I think one of the options here that is missing is a platform called reaction, commerce. And if you check out reaction commerce, they're gonna you're gonna like their website. It's a cute website. I'm going to tell you that right now. They have really nice little design here. But reaction commerce is maybe more of a modern stack of things where it has react on the front end and stuff like that. It's it's quote unquote, a developer's playground. This is the only e commerce platform that I considered when I was building level up tutorials. This is the only one I considered because it's the only one I felt like I could hack together. The things I wanted to do. In fact, the I think the original version of the level AppStore was on reaction commerce that just never went live. So I like reaction commerce for this kind of thing. At some point, you have to ask yourself, Is it really that difficult to build your own thing? We have one of our sponsors snip cart is a really good option to, I guess it depends on what your needs are snip carts really great because they take some of the back end sort of some of the the structure. So to get out of the way. Yeah, it's for jam stack, but I wouldn't necessarily limited to jam stack, I think it just makes the process a little bit easier of building a custom cart. So it's somewhat in between an e commerce platform and a custom cart. So yeah, I think there's a lot of options here. And I don't necessarily have a great answer for you. I'm interested to hear what other people on Twitter or whatever saying about these platforms, I know Shopify is really heavily used. But I would check out reaction commerce. - -14 -00:15:47,789 --> 00:17:22,610 -Wes Bos: I think it really like Scott says it depends on what you're trying to do. If you're just if you are trying to get up a store up and running as fast as possible, I would definitely reach for something like Shopify, but Shopify, I know I have friends who run clothing companies on Shopify, it can get expensive really quickly, where you have all of these different add ons every time you want to add a new feature either to build something or pay monthly for one of these specific special add ons that go onto your website. And if you have like multiple currencies, then sometimes they have to run to different stores at the same time. So it can get really expensive really quickly. But that said, the reason why so many people use it is because it just works. You don't really have to sweat it all that much. But if not, I think I go for something like a WooCommerce or any of these other ones that that that Scott has mentioned, I for sure would not build something from scratch myself. Because shopping carts are one of these types of things like, obviously, is my own course platform, I can do that. Because I'm just selling courses and there's like, like 12 different skews, and they don't have shipping. And they don't have shirt sizes and all that stuff. But if I was actual selling physical goods that needed fulfillment, and returns and yeah, there's a lot of discount codes. And there's, it's it's huge, how much logic goes into building an online store. And I would definitely not build something from scratch myself, I would either reach for a service and get up and running, I probably would just reach for a service. And then as I find like, Man, this thing's costing me like 1000 bucks a month, let me just put the time into actually building something out myself reach for something like a WooCommerce, or one of these other open source solutions. That would work better for me. - -15 -00:17:22,649 --> 00:18:04,170 -Scott Tolinski: Yeah, that custom functionality is like really sort of the kicker is like, what is that custom functionality? And like, how custom is that functionality? You know, because there could be like little things, right? Like, let's go ahead. And when they purchase this, we can do this and this and this for them. And then maybe there's bigger things where it's tying in user accounts to subscriptions and attaching them to course purchases and stuff like sort of we have going on in some of our sites. But if you want to learn some of this stuff to be able to build some custom front end stuff. Well, we have a solution for you, which is Manning books has a really nice book that has was the release date on this thing. - -16 -00:18:04,310 --> 00:18:06,560 -Wes Bos: September 2018. That's fresh - -17 -00:18:06,590 --> 00:18:12,930 -Scott Tolinski: in my mind, someone say it's a fresh book. I wouldn't say that. So - -18 -00:18:12,960 --> 00:19:47,430 -Wes Bos: that would have been a turnaround. Imagine if we did the Freshbooks sponsor here instead. Oh, yeah, that would have been quite the turnaround. Yeah, quite the turnaround. This book is called a view j s in action. And it's on Manning publications. This book was just published a couple months ago. And it looks like just like two months ago. So it is brand new is from Eric Han chat. And Benjamin list one. That's a cool, last name. Last one. So this is the book that I need. Because if you're looking for a book that is going to teach you how to learn Vue js, this looks like a really good one. So it's includes everything introducing Vue js, adding interactivity, working less forms and inputs, conditionals, looping over your data component design, all the way through to testing, which is one thing that a lot of places don't include, which is pretty cool. So if you want to learn view, j s, check out Manning publications view j, s and action, they've got a special URL, where you it's a bit of a get your pen out, this is a bit of a long URL, or just click it in the show notes, but it's deals.manage.com forward slash web dev. And this is a special landing page just for syntax and it's gonna get you 40% off every book or video course@manning.com use the code syntax 40 to save 40% out they've got a bunch of recommendations that they've got here as well. If you're not interested in view, maybe you want to learn react or Redux or express or anything like that. They got something on everything. So I know a lot of people don't do video courses that's gone I produce if you just want a book, check out Manning stuff. That's great. - -19 -00:19:47,670 --> 00:19:49,550 -Scott Tolinski: Cool. All right. Nice. - -20 -00:19:49,580 --> 00:20:15,390 -Wes Bos: Next question is from Matt Greg. I feel pretty boss and he did bpos I think that's a little head nod to me at starting projects, but so Terry Pull at finishing them as people who finish courses and projects all the time. What is your advice to getting to that finish line? And I will tell you, what is it the the path to? What's that saying? The path tell is littered with good intentions or something? - -21 -00:20:15,420 --> 00:20:20,460 -Scott Tolinski: Yeah, something like that I yeah, yeah, I'm wrong all the time. So I'm not even gonna try. - -22 -00:20:21,000 --> 00:21:41,670 -Wes Bos: This line has good intentions. That's not the saying that I want to say I say the path to finishing a project is littered with unfinished projects. And while I definitely am a big proponent of actually finishing stuff, because like, I think that that's a problem that a lot of people have is that they they start a project and that last 10% is so hard to actually push through it. So my first advice is, just know that that last 10% is going to be the hardest, because that's when imposter syndrome sets in, that's when the hard part that you didn't necessarily think about specific things that you need to put into a project, that's when you're, you're scared to put it out to the world. But if that's the case, then for sure, make sure you push through that last 10%, because that's where I've sort of gained a lot of my momentum in my career is actually finishing the damn thing. But at the same time, for every one thing that I finished, I probably have 10 little silly projects that I've started up and have gone nowhere, but it was just me sort of poking around hacking around at something. And that's really where I've done most of my learning is in these little kind of hacky projects that don't really get anywhere. But I was telling Scott, I was like, you know, Scott, the learning is in the adventure, and he started laughing at me. But I think that's true. A lot of your learning is in just in the adventure if it doesn't necessarily finish something. That's not a total loss. You can learn along the way. - -23 -00:21:42,540 --> 00:21:55,620 -Scott Tolinski: It's not a total loss of if it's just like a for fun project. But like, yeah, imagine it's a project for a client. Well, finishing isn't a total loss. I didn't finish this project. But I still learned Oh, yes, - -24 -00:21:55,680 --> 00:22:12,960 -Wes Bos: I did a whole bunch. I appreciate the money client. No, I mean, that's like personal projects. But for for client projects, that's the best way to actually finish things is to have your ass on the line where you have to finish this thing because someone's paid you to do it. And you likely have a deadline that you're facing. Yeah, - -25 -00:22:12,990 --> 00:23:33,690 -Scott Tolinski: I think I think there's a big distinction there. I'm not good at finishing projects myself, which is one of the reasons that I level up tutorials is such a good project for me, because it's never finished. Like there's there's no end in sight. And I think those kind of projects are good, too. I mean, there doesn't have to be an end of a project Unless, of course, it is a client project. And if this is a client project, I think you do need to work better at like setting micro goals and things like that, making sure everything that is possibly in your to do list for this project is explicitly stated, use to do lists, check yourself off that way. And then that way, you never have this sort of situation where you're like, Oh, this project is dragging. And I don't know where I am or what I'm doing on it anymore, even though it needs to get finished. If you have a very defined list of things to get done, you can always feel that sort of validation of checking stuff off your list. So if you're looking for inspiration and those sort of things, I personally feel validated by checking stuff off my list and maybe give myself a system rewards or something that can take a break after I finished this features, something like that. And so I think that is an important thing. If the project needs to be finished. You do need to find some way to motivate yourself to keep accountable set deadlines for yourself. Even if your client or whoever is not setting deadlines for you have those deadlines and work towards them. Imagine that your butt is on the line, even if it isn't cool. So next one is from a man a man. You really - -26 -00:23:33,690 --> 00:23:34,980 -Unknown: man. Yeah, amen. - -27 -00:23:35,010 --> 00:23:36,690 -Scott Tolinski: Yeah. Amen. Amen. - -28 -00:23:36,750 --> 00:23:42,540 -Wes Bos: Hey, man. Hey, man. Don't say man. Say folks. Carry on. - -29 -00:23:43,740 --> 00:26:31,800 -Scott Tolinski: Hello, guys. Thanks for the great podcast. You're very welcome. Amen. Could you please explain how do you organize your files? What is your file structure for you? And both of your projects and other documents had videos and stuff? How do you structure your projects? This one is a question that I think a lot of people ask for a lot of different systems, especially in like react land, because react doesn't have like a way of doing things like some other frameworks would. And this could be, you know, really nice. For some people and other people. It can be absolutely terrifying. They're sort of just like, but without a structure, how do I know where to put things, we put them wherever you want. Whatever works for you, You do you. Me personally, since my platform is the full stack platform, like I have my back end and my front end in the same repo. And it's all very interconnected, and your twinkle there. And what we have in my structure is I have basically a UI folder, an API folder, and a startup folder. The startup folder tells things what to do, whether or not that is, you know, server side rendering, that sort of thing of registering my API and getting all set up that way, telling the front end how to rehydrate data and stuff like that start in the startup. It basically handles things that are going to be taking place both client Or server side on startup, the API folder is really just going to be all of my graph, qL, resolvers, and mutations, anything that's working with my database connecting that way, and any sort of initial setup I need for that API. And the UI folder is just all react components, a big old list of react components, I have one folder for elements, which includes all of my styled components that are, I should say, like root level, block level styled components, things that are highly reusable cards, headings, colors, stuff like that. I have a Utilities folder that includes things like breakpoints and other functions for CSS stuff that are used in styled components. And then I have everything else in a feature based folder. So I have things like, let's for instance, I have tutorial like the tutorial page. So that's in a folder, name tutorials, and everything in there is tutorial page, tutorial player, blah, blah, blah, anything that's related to that all of my tests, and all that good stuff live inside of there as well. And if I need like a one off styled component, it lives in the same file as the React component that's using it, instead of being in any sort of higher structure or anything like that. But for the most part, its UI folder has elements has utilities, and then feature folder straight out of that. And I don't do any nesting deeper than that. All of my react components are named while the files are all named after the component itself. I think that's pretty much it. The test just live right there. And everything is nice and easy. - -30 -00:26:32,190 --> 00:29:18,420 -Wes Bos: Awesome. I like this question, because I've spent a lot of time thinking about mine. And the way I do it for every project is that I have a folder in my computer in my like Dropbox, or in my websites folder that has a number, and every project gets a new number that is incremented by one and that way, anytime I know I need to jump into my wife's website, I just type z 45. And then it goes into like project number 45. And that way, I can either reference the project by its number or by the project by his name. So like the the name of the folder will be like 102 dash, Caitlin, and that will be her specific folder inside of that, I will always have a design folder. And that will contain all of the sketch files, anything that I got from the client or whatever or anything that like, like the logo or anything needs to stay in there, I put that in there. In the root, I often usually have like a project.md, or ideas that MD or whatever, like a markdown file that I use just to collect ideas of things that need to land somewhere inside of there. And that way, anytime I have a phone call with somebody, or anytime I have a quick idea, I pop that markdown file open and just start typing into it. And then also in the root of that depends on like the project. If it's just a like a single application, I'll just have like a code folder and in that and there will live the actual the code base. But for most of my projects, I usually have a front end folder and a back end folder. Inside of the back end folder. If it's an express app, I'll have a controllers folder, a routes folder, a models folder, a views folder, if I'm doing a server rendered application, and then I'll have like a lib folder, or a helpers folder, as I like to call it. And anything that is like not a node module, but is still foundational code to that code base will generally go in the lib folder. And then on the front end, I'll also have a lib folder that will contain the same kind of thing of a components and a pages folder if it's an ext JS application. And I usually like to keep like Scott said, I usually like to keep my component, my styles and my tests all in a feature folder. And then if it's a shared style, I'll move that out into its own styles folder that gets reused through multiple style components. So like every project I do is a little bit different than the last one, which is frustrating to some people because they want to they want to be told, this is where these go. And this is the best folder structure. But whether you're using react or not, whether you're using style components or not, or whether you're using like bem or sass or anything, it really depends on like what your application actually tends to tends to look like but I've really have like just the high idea of having a numbered project with a front end back end design and then just a markdown file though collect any other thoughts that I have. - -31 -00:29:18,540 --> 00:29:45,270 -Scott Tolinski: Yeah, this is one of those ones. That's an always evolving sort of thing and it always changes how you like it. I've redone the organizational structure of my application a lot of times I mean it's changed so many times So again, this is there's there's no like the way to do it. find something that works for you find something that makes sense for you find something that you and your team enjoy and I'm sorry if if we can't hold your hand too much on that one because that's just that's just how it is. I can - -32 -00:29:45,270 --> 00:30:16,710 -Wes Bos: tell you one thing I don't like it's when people use feature folders and use it index dot j s so that you can just require the the folder I do I don't like that because it's then you have like eight index dot j s is open at once. No VS code will allow you to see the folder name in there. But I found that really frustrating, especially for my tutorial takers. Yeah, in sometimes people just export the component and then import it into index js and then immediately export it again, there's too much overhead for me. So I don't use, I try to avoid index j s as much as possible. - -33 -00:30:16,740 --> 00:31:23,280 -Scott Tolinski: So here is where I use index j s, there's only one situation where I use index j s. And it's almost when I want something to be sort of like a package. And I don't, I just don't want to keep this package in its own repo because it makes more sense to keep it more intertwined with my application. So for instance, my styled components library is has an index js. So in my own personal design system, for level up tutorials, in my elements folder is an index.js that collects all of them. That way I can import any component, whether it's a car, or whatever, and it's only for CSS based components. And I do the same thing with utilities but only because the stuff that lives in utilities just things like breakpoints or maybe like a transition function or something like that. So I don't do a with react components. I do it with my stub components. And I found that makes it nice because then it like typically you're importing like I don't want to import a card from cards and then a header from heading you know, I mean, it's like that's that's a little extra to me for Yeah, imports on I'd prefer to just import them all like it's from a library or something. But - -34 -00:31:23,610 --> 00:31:33,900 -Wes Bos: we should do one of those change my mind podcasts is that we don't disagree on anything. Except what we just changed my mind. - -35 -00:31:34,530 --> 00:33:15,150 -Scott Tolinski: Yeah. Next one. This is an easy name. Collin. Thank you, Colin, for having an easy name here. Colin asks, you guys mentioned working for agencies in the past, as a freelance web developer, what is the best way to find those agencies and to be employed by them? Also, can you explain what agencies are? I love the show. Thanks. So I've worked for agencies for most of my career. And basically, you could think of it as like a company. That's the idea of a design agency or Development Agency, or any of that stuff, it comes out of this sort of this print world history where more people would hire a print company to design a logo to design a pamphlet to do some print to do some, that sort of stuff, designed posters, whatever, right? And so the print companies, they they hired graphic designers who did logos, who did all that stuff, make things look nice. And the world changed as the world changed. We got computers, and then phones and the internet and all sorts of stuff. And now those agencies do more than just print. Typically. I mean, maybe if you're the best print agency in the world, maybe even now it's like hipstery to start a print agency or something. But typically, these agencies to survive these, they're just companies right that do design as a service. It's like a freelancer but a company, right. And so these companies now have branched off. This is not like a new thing. This has been going on since the web to do websites and web design and app design and app sites and all sorts of stuff, app sites, that's a new thing. So they basically were print shops that have transformed to be digital. their clients are typically companies A lot of it is like b2b stuff, because they're they're fairly expensive. Instead of getting a single freelancer, you get a team, or you get maybe a project manager, you get a couple designers, you get more than one design idea, or developers really - -36 -00:33:15,150 --> 00:33:29,100 -Wes Bos: popular in like, like consumer products like working for Pepsi or doing a big marketing agency, or when I did, a lot of it was working in with like VH sauces. I worked with Pepsi, all these kind of companies, right? - -37 -00:33:29,160 --> 00:35:04,500 -Scott Tolinski: Well, so I've been on a lot of ends of the spectrum. So my three agency jobs were very different sizes. My first job was like a small 12 to a 16 person agency. And in that in that agency, most of our clients were local companies. So we wouldn't use a local medical supplies company who needs a website. There's a Yeah, you know, one of the concert venues has an annual concert, and they need like a specialized website for that annual concert along with screen printed posters and logos and stuff like that. One of our big clients was, I think the biggest client for that was just a conference, right? It's a yearly conference. And so those kind of gigs they they keep the company alive, they keep the company open, and they hire, you know, any 12 to 15 people. I had another agency job at the University of Michigan where all we did was internal sites to the University of Michigan. Every single department there, like needs a website with custom needs and stuff like that. So they the clients were even though they were internal, they were all sort of their own own individual projects. And then like you mentioned, I also worked at a big agency where our client was Ford, and with Ford, the agency did all of their, their video, they did their print, they did marketing campaigns, they did a whole lot of stuff, in addition to web work. So it was just like one small component of it. So quote, unquote, finding an agency job, it's just applying for a company that does work for clients. That's it and you'll look at them. I don't know if they'll be like so and so design agency, maybe they will, but you'll see a ton of them around any any major city that you live in or anything like that. I don't know how to Explain it other than their design companies, development companies, that sort of thing. Yeah, yeah. - -38 -00:35:04,560 --> 00:36:11,880 -Wes Bos: So Colin asked, he's a freelance web developer, and how do I work with these companies, because that's how I got a lot of my work is that I was like subcontracted from an agency for the larger client. And the way that I did it was I just really got to know, developers. So the kind of the way in is not through emailing every single one that certainly might work. But what worked for me is that I was just like, friends with the developers or, like, I would do workshops on the weekend with ladies learning code. And there would be often project managers from these agencies coming in, not to learn how to code but just so they can learn how to like talk to talk, and be able to talk to their own developers. And I would say, Hey, I'm also available for hire, if you ever need me. So it would either be the project manager or the developer, they need help. Oh, Wes is really good at x, y, and z. Let's get him in. And he can help us out with this specific JavaScript project or this WordPress products that we had. So that was sort of my way to infiltrate as you, you don't get in at the top, you get on the lower level, because usually, when the developers or the project managers need help, they go to their own network first. - -39 -00:36:11,900 --> 00:37:20,210 -Scott Tolinski: Yeah, I would say almost anytime we needed outside help from freelancers, we would hire one a specialist, someone who was really good at one particular thing. And then maybe we had seen them on message boards or like if we needed a an expert for this one particular Drupal feature, we would find the person who made the plugin and asked them if they could do it, too, we would hire within the like you said, our network, but also the network of the company, maybe past developers who had left to go do another gig, but were still really good and had that specific knowledge. Or maybe they would want to pick up some extra money. So we would almost go to people that had to work at the company experts. And then I guess after that it is all personal network who you've met at meetups, who you know, can get the job done and who you know, is going to do a good job for that. As a freelancer, that's how to get in, in my opinion, as well. And one of the things you want to make sure if you are a freelancer trying to get some of these gigs, you're gonna want to make sure that you have excellent bookkeeping. And by having excellent bookkeeping, you're gonna make sure that not only do you get paid on time from these agencies come tax time, at the end of the year, you're going to have a clear picture about all that fat cash you're rolling in from these agency gigs he picked up. So the way to do that is with fresh books. - -40 -00:37:20,280 --> 00:39:11,070 -Wes Bos: Yes, you do. So when I worked with agencies, a lot of time, I would bill hourly. And what's interesting about that is because they need to know the breakdown of your hourly work so that they can then push that to the client as well and Bill them hourly for the stuff. So I had to keep really close logs of exactly what I was working on, and what different features because they build client different rates for different types of stuff. So if you use Freshbooks, you can use their time tracking tool right inside of Freshbooks. You can set up a client, you can set up different types of jobs. I know some some agencies charge different for design and different for development, and different for back end front end development. So you can log what type of work you've been doing. And then simply just send off that invoice off to the client. So check it out, if you are going to be working with agencies or just running your own freelance show@freshbooks.com forward slash syntax for 30 day unrestricted free trial. Don't forget to use syntax in the How did you hear about a section sick? Next question we have here is from Peter, I once read an interview Wes gave in which you mentioned that frequently changing jobs is the best way to get a salary increase. Do you believe that to be true is job hopping a bad thing is a criticism justified? So I forget where I gave that interview. But this is coming from me who had taught at boot camps. And I've seen hundreds of students go through boot camps. And I do agree that this sounds terrible that you should just be dropping companies and moving jobs every six months, because that's what everybody complains about millennials doing already. But just from the sheer amount of seeing people who have started off as junior developers, and over the course of four years, trying to become senior developers, I have seen people get extremely well paying salaries by doing exactly this. And it is just job hopping from one to another. So I agree with Wes. Yeah, - -41 -00:39:11,070 --> 00:40:42,030 -Scott Tolinski: it's a tough one. Because I don't want to make it seem like loyalty is not a good thing. Because loyal totally company is a good thing. But oftentimes you have to wonder, is this company loyal to you as a person as well, like sometimes you're working for a company for a long time, and you don't necessarily get that same sort of respect back? Maybe the company's not doing well. Maybe you're the first one to go. And you could say, well, I had this other job offer, you know, and I should have taken it. And some of that stuff is is hard to plan out that said every single time I've jumped from job to job, I've gotten my largest pay increases. And it is sometimes even applying for a job and getting a new job or being accepted into a job is a great way to get a pay bump at your current place. And I don't I don't want to say to weaponize that but I personally have had a situation where someone was trying to poach me into a new company, I did the interview process just because they promised to pay me a lot more. I did the whole interview process expecting my current company not to, you know, match or anything like that, because they already told me they couldn't afford to pay me anymore, right. So I did the whole interview process got accepted for the job. And it was a good, good, good pay increase. So I went back to my employer to give them my two weeks, and they basically flat out told me no, they were just like, doesn't matter. Whatever it is, we're covering it. We can't lose you at this point in time. We need you right now. And so I said, Okay, well, let me go back to this other company and turn them down. And I was not trying to play the companies off each other. There was no intention. hardball there. - -42 -00:40:42,030 --> 00:40:42,650 -Unknown: Yeah. - -43 -00:40:42,690 --> 00:41:03,090 -Scott Tolinski: Yeah, I wasn't even trying to do that. Because it was a good pay increase at that point in time. And then this company is like, Okay, well, we're gonna give you this much more now. And I was like, uh, okay, so my other job already told me that they would give me a pay bump. So I was like, well, they're gonna give me this much more now. And I don't want to play this off you guys. But they're, you know, you're - -44 -00:41:03,230 --> 00:41:05,190 -Unknown: a shrewd negotiator, right, - -45 -00:41:05,250 --> 00:41:52,080 -Scott Tolinski: back and forth. And because of that, they were like, if you say, you'll stay right now, we'll give you that what they just said. And I was like, Yes, I'll stay there. And sometimes, like that could blow up in your face, I felt like if I was trying to play them off each other, then it probably wouldn't have ended well, but the idea here is that like, your current organization might not value or know your value until you're leaving, necessarily, they might not know what you got until it's gone, that sort of thing. So I have always gotten my biggest pay bumps from changing jobs. That said, I do respect loyalty. And I do all respect all that stuff. And I think if a company is treating you really well, you should treat them really well. But in the same regard, it's a high paying industry, if you got the skills to get those bills paid, and all that stuff like that you should take the money, and don't worry about it too much. - -46 -00:41:52,230 --> 00:42:47,130 -Wes Bos: Next question we have for Mark volkman. If I choose next jass. Does that mean I won't be able to use a new react feature like hooks and suspense until slash if next JS team implements it? And maybe we should swap out next is with Gatsby as well? Because this question applies to any sort of framework where react kind of comes along baked in with that? And the answer to that is yes, you have to wait until these frameworks support your updated version of react. But that said, there almost always is a I always am like, I want to use hooks, I want to use suspense. And anytime I've wanted to use these cutting edge features. There's always a canary version of next Jess available. There's Tim nucleons, who is one of the team members on next Jess is always pushing out tons of updates for this stuff. So the answer is yes. But you almost we'll never have to wait because the teams behind these things are excited to use these features as well. - -47 -00:42:47,250 --> 00:42:49,980 -Scott Tolinski: Yeah, also the stuffs in alpha still so yeah, - -48 -00:42:50,190 --> 00:43:06,920 -Wes Bos: yes. That's funny. Like sometimes people are like really gung ho about these new things. But you have to wait until they they get like hooks and suspense are not in at the time recording this podcast. They're not in production. Yeah, they're not. They're not solidified just yet. So hold your horses just - -49 -00:43:08,130 --> 00:43:18,510 -Scott Tolinski: chill. Yeah, chill. Okay. Next one is from Tyler and Schuster Schuster. It. There's no age, Nick could be Schuster could be - -50 -00:43:18,540 --> 00:43:21,510 -Wes Bos: sudo. Su stir. Sure. Star sister. - -51 -00:43:21,750 --> 00:45:08,340 -Scott Tolinski: Okay, got this one. When do you use react dot fragment? And when would you use a div to wrap many return components from render? Okay, so for those of you don't know, at some point last year, I think 2017 2018 I don't remember at this point when react fragment was introduced. But react fragment basically allowed you to output things without a wrapping HTML element. Now for a long time, this was one of the weirdest pain points in react, people would go ahead and they'd have the one to return essentially several different things. And then react would freak out because you need to have those in an array instead of just returning them right. And there's good reasons for this technically, right there, why you need an array for each of those. But it was a giant pain point. Because of the way a lot of developers solved this. Instead of returning an array. They returned a div to wrap around their code, which turned react into sort of like, div hell just divs populating just sprinkled out throughout register a div wrap a div around it, right. That's the only way I'm going to get it to render. And so when react dot fragment was released, along with the shorthand for it, which is like an open bracket, close bracket is my favorite little shorthand. When react fragment was released, you could now use that react fragment or that shorthand to wrap your code and have it work instead of outputting it as array or wrapping it in a div and to me, this is one of the nicest little HTML improvements in react. So when would you use this? I would use it any time you need to not have your code be wrapped in a div, like the decision should not be based on a react sort of situation. For me the decision is a structural HTM Yo thing, right? Like, do you need a div wrapped around this thing if you do, then use a div. If you don't use react fragment, don't use it if you know, - -52 -00:45:08,520 --> 00:45:49,590 -Wes Bos: totally, the biggest use case for using react fragment is grid Flexbox sibling and feature selectors in CSS where the parent child of elements are, are required, like grid, you can't set your grid items to be items that are lower than the grid container, they have to be direct children of the the grid container. So that is extremely helpful when you have one container that is your grid and another component that produces the children the grid items. And previously, you would have to wrap a div around it and then you broke, you broke the grid layout. And now we can just use react dot fragment. I like to call them ghost elements because they render out to nothing at the end of the day. - -53 -00:45:49,620 --> 00:45:55,830 -Scott Tolinski: That's a way cooler name. That's Yeah, like I want to alias that to be the ghost emoji and then I tried it. - -54 -00:45:56,040 --> 00:46:01,560 -Wes Bos: I tried it. It doesn't work. I have a tweet about it. It was hilarious. You could probably write a Babel plugin for it though. - -55 -00:46:01,740 --> 00:46:04,800 -Scott Tolinski: That sounds sick. I love the name, Ghost. - -56 -00:46:05,220 --> 00:46:07,710 -Wes Bos: Ghost. Ghost ghost fragments. - -57 -00:46:08,100 --> 00:46:21,840 -Scott Tolinski: That is dope. Uh, but yeah, no, again, I this is one of my my favorite features. Just because you know, one of those things. It's like, should the framework get in the way of writing the HTML you want to write? No, I don't think so. So react fragment for the win here. All right, let's - -58 -00:46:21,840 --> 00:48:13,860 -Wes Bos: jump into the section that is sick picks. This is where Scott and I are sick. Pick an item that is something that is sick in our lives. And we would like to tell you all about it. Alright, my sick pick today is a designer that goes under the handle ghostly pixels. So you know, I'm designing my own redesigning my website right now because it's much needed. And I'm going with a bit of a grungy textured feel, as I do with a lot of my courses has come as a surprise, surprise, surprise. It's funny because like I've sort of just embrace the whole punk grew up as a punk hardcore kid sort of thing. And I just I don't think I'll ever let the grunge Enos go especially now that we are on such a high DPI screens, the very subtle grunge just looks so good to me on these things. So I usually go to True Grit texture supply. They're sort of like the big the big dog in the space. And they have like Adobe procreate extensions, and whatnot, but they're pretty expensive. And they don't give you a transparent PNG. So you have to do that yourself with all that either. Select the black color and take it out yourself. So I found this other designer called ghostly pixels. And he's got all kinds of grunge textures, grit map, wood grain, and they're all like nine bucks. 10 bucks, I think I bought like the entire thing for like 60 bucks. And they just look so good in all of my designs. So big fan of that. Check it out. If you want to support another designer, this is one of those our design episode we talked about little tricks that you you can have and the adding a little bit of texture or a little bit of, I don't know, just finesse and in a day that we talked we talked earlier about these everything's going vector but in an age where everything is going vector, I feel like if you add a little bit of grit and grain as long as you're doing it at two x so it doesn't look pixelated thing. It adds a little something, something to your designs. - -59 -00:48:14,160 --> 00:48:17,100 -Scott Tolinski: Nice, gritty, gritty to your site. - -60 -00:48:17,280 --> 00:48:18,060 -Wes Bos: It's gritty. - -61 -00:48:20,100 --> 00:48:21,150 -Scott Tolinski: She's Google gritty. - -62 -00:48:21,180 --> 00:48:24,570 -Wes Bos: It's a efficient course planning software. No. - -63 -00:48:25,680 --> 00:48:28,920 -Unknown: It's the mascot of the Philadelphia Flyers. Oh, - -64 -00:48:30,390 --> 00:48:34,050 -I got it now. Yeah, I said goodie. He is outrageous. That's funny. - -65 -00:48:34,050 --> 00:49:46,380 -Scott Tolinski: So my sick pick is Undertale, which is video game. So I occasionally sick pic video games here. And this one is I have it for the Nintendo Switch you can find I think it's on most platforms at this point. This is a weird, weird game. I don't even know what to think about this game. It's made me feel things in weird ways. I don't know how to express it other than I don't want to spoil anything. It sort of has RPG elements here playing as a child. Again, I don't want to give away too much about this. But all I can say is that this game is like very heavy and unlike anything I've ever played before. And it like put me in some situations where you're making some choices, and a video game that maybe the game is choosing for you or you know, whatever. And it like really invokes some sort of odd emotion and stuff like that. It's a very bizarre situation. I would maybe watch a YouTube video on it or something. Don't watch anything that spoils anything. Because again, the part of the experience with this game is this that you're going in cold. So if you if you are interested in like sort of odd games that are going to sort of have a totally different experience than something you've ever had before, maybe RPG elements, stuff like that, check out Undertale I know it's probably old at this point, but it's really, really cool game. - -66 -00:49:46,500 --> 00:49:48,180 -Wes Bos: Awesome. What about shameless plugs, - -67 -00:49:48,240 --> 00:50:22,830 -Scott Tolinski: shameless plugs, levelup Pro. There's so many courses on level of pro that if you sign up for one year of level up pro right now you'll get like over 700 video tutorials by the end of your subscriptions. So that's like newish tutorials, I mean, in the past two years or whatever, and those are all premium tutorials. So level up tutorials.com forward slash pro setup for the year save 25%. If you are listening to this before January one, this is your last chance to get this price, the price is gonna be going up January one. So keep your eyes if you want to sign up for the year and lock into that price Lock and load lock into that thing. level of doors.com forward slash pro - -68 -00:50:22,920 --> 00:50:58,770 -Wes Bos: awesome. I'm gonna shamelessly plug my YouTube channel. I haven't posted a video in a couple of weeks yet, but I have a new one coming up working with IBM, they sent me this little drone. And I'm going to learn how to fly it with JavaScript. So if you want to see that I'm not doing like a tutorial, but I'm kind of just like kind of like this is me I'm I'm showing the code that I write and I'm like pausing every couple of minutes explaining what I've been doing. And it's kind of interesting new take on on doing a YouTube video. So I'm excited to have that up. It will probably be up by the time you listen to this. So check it out. youtube.com forward slash Wes Bos - -69 -00:50:58,830 --> 00:51:03,780 -Scott Tolinski: doe. Well, that's all I got. I hope you got some great information on this potluck. These are always so much fun. - -70 -00:51:04,170 --> 00:51:10,230 -Wes Bos: I always look forward to doing these. Awesome. Alright, thanks for tuning in. And we'll see you next week. Please - -71 -00:51:12,180 --> 00:51:21,930 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax103.srt b/transcripts/Syntax103.srt deleted file mode 100644 index f29ce5c68..000000000 --- a/transcripts/Syntax103.srt +++ /dev/null @@ -1,252 +0,0 @@ -1 -00:00:00,359 --> 00:00:26,340 -Announcer: Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA and Scott Hale. Totally in ski. Oh, welcome - -2 -00:00:26,340 --> 00:01:02,150 -Scott Tolinski: to syntax in this Monday hasty treat, we're gonna be diving into another episode of where are they now? We had so much fun with the last one. We couldn't wait to start this one. So in this episode, we're gonna be talking all about libraries, JavaScript, CSS, and just sort of web platforms in general. And where are they now? things that were once hot in the past? And maybe they're still hot today? And or maybe they've cooled off a little bit. So my name is Scott Dylan skene. With me always is Wes Bos. In this episode, we are sponsored by sanity.ai. Oh, - -3 -00:01:02,490 --> 00:03:22,380 -Wes Bos: yes. So Sanity io is sponsored a bunch of episodes a couple months ago, and they are back for a whole lot more, they booked a good portion of next year already as well, because they are saying that a bunch of syntax listeners tried it. And lots of people are actually using it in their production projects a couple pretty I'm not sure how to say which companies are using it. Maybe I'll ask and talk about that later. But what is Sanity Sanity is it fits into the sort of like headless CMS space, or, as we like to say, on the podcast a boy life, which is bring your own front end. And it's basically something where you can pay for the service, you can log in. And you can create all of your different content types that you want to have, you can have relational content between the two. And then you have this whole sort of like they called the Sanity studio where you can log in, and you can be able to manage all of your content. Now, there's lots of places that do that. But the really cool thing that I like about Sanity is that you can write your own react components to manage the inputting of the data. That means, of course, you can you write your entire front end in Gatsby, or next or react or Angular or anything that can consume their API. But you can also create your own react components on their own back end, which will allow you to do custom inputs. Because Scott and I were talking about that earlier, where your data looks different to everybody, everyone's data inputs are different, they all have different needs. And if you just have your standard, like image, upload, text input description box that doesn't fit everyone's actual real world needs. So being able to kind of best of both worlds, because you could just use like an existing service that will do all of this for you. But if you need to allow your users to input this data in any special way, you can build your own. So check it out, if you want to build a project, maybe over the holidays, and you just need a back end to get you up and running check out Sanity, it's at sanity.io s a n i t y.io, you're going to get the free plan for zero dollars. It comes with two users two data sets and basic usage, you can go see what you get for that. So I'm one of those things where you need to put in a credit card, and then they'll charge you as soon as you go over. You don't need to put in a credit card to try this thing out. So check it out. Thanks so much to Sanity for sponsoring. Again. That's s a n i t y.io. forward slash syntax. Nice. - -4 -00:03:22,649 --> 00:04:12,120 -Scott Tolinski: Cool. So let's get into it. You remember in the last episode, all we did is talk a little bit about what these libraries are, what they did for us when they were used, maybe who authored them, and then talk about if they're still used today. And if not maybe what happened to them. So the first one that we're going to get started off in this episode, we're going to be talking about a couple of mobile frameworks. And now these mobile frameworks were sort of around the time when you people might have a separate mobile app that was like a bigger thing than responsive was, or maybe the iPhone apps all sort of looked one particular way with those gradients or whatever. And you just wanted your web app to feel like a just a native mobile app, even though it wasn't. And so some of these like specifically jQuery UI, if I still see an app with jQuery UI, I'm like, oh, boy, it's cuz Yeah, it's been a little while. - -5 -00:04:12,120 --> 00:05:30,960 -Wes Bos: The thing about the jQuery UI or jQuery Mobile was Oh, yes, actually. We can talk about jQuery UI as well. There was other ones like Sencha touch, I think the need for these things came out because a lot wasn't possible in the browser. When these things came out. This simple having a div that scrolled was just not possible at the time, like overflow scroll did not work position fixed. So you want to have like a bar while you scroll in the content goes over it. That didn't work in the olden days. Now all of those things are fixed. You can start to build your own UI frameworks. Performance is not so much of an issue as it used to be on these things. So I think these like purpose built mobile frameworks are not as as popular anymore because of that. I also think that we're really detaching functionality and what they look like so it To carry mobile jQuery UI, you could use them without the CSS library that it came with. But most people, what they would do is they would just use the the look and feel of it, as well as the touch events and all that stuff that came along with these these frameworks as well. And as design tastes started to change, I can always tell when I'm on a website that uses jQuery UI or jQuery Mobile, just because it just feels that certain way, and no one's stopping you from changing that. But it's just one of those things that you run into. - -6 -00:05:30,990 --> 00:07:14,160 -Scott Tolinski: Yeah, I mean, the whole design pattern was like, based off of like that iPhone, like the original iPhone. So they all had that very, like specific look to them. Yeah, so these things, again, I think part of the death of a lot of these mobile frameworks, again, came from just not needing it anymore. I mean, responsive design took off. And that was more of a bigger thing. People didn't have just responsive, like the dedicated mobile apps as much. And the design styles, people wanted to have it look more like their thing, or their app, or whatever, or fit into different design styles. So they just stopped being used. So I think the next one is going to be a fun one. And this is flash, which we all know is a popular, I don't even know what you would call it as a popular alternative to Java Runtime when we're on a time Yeah. Which allows you to do some really amazing things. For the time I you know, some of my introduction into web development personally was through flash development, because at the time, the way you did animations on the web, you had even things like a timeline and ability to have some sort of JavaScript like syntax, which was called ActionScript, which is based on ACMA script. So there was a lot of things that were sort of interesting about flash, there were some really gaudy, you know, futuristic tech, no bump in websites made from it. But there was a lot of like, really interesting web technologies like coupons or things that we used in our normal, or even just playing video in our normal web development world. That wasn't some flashy thing that used flash. And when the iPhone came out and announced, it wouldn't be using Flash. I think a lot of the web rolled was like, how do you even use the web without flash? I mean, that's how big flash was. How do you even use the web without flash, - -7 -00:07:14,220 --> 00:07:31,050 -Wes Bos: I remember seeing people with like, Android tablets being like, iPhone sucks, it doesn't even run flash. And I remember being so frustrated, trying to like view a restaurants menu on my edge, first iPhone, and it didn't work. There was no flash on the iPhone, very frustrating. - -8 -00:07:31,080 --> 00:07:36,600 -Scott Tolinski: My Motorola Droid, I had the original Motorola Droid, I loved that it did flash because I could do have that - -9 -00:07:36,600 --> 00:09:11,340 -Wes Bos: one as well I do is I could do all that stuff. And it was fine. It just ran. The reason why they didn't is because splashers proprietary is owned by Adobe. And Apple didn't like that it was a battery killer, because it had to run this entire environment to actually run flash and battery was a huge thing on your phone that that the battery was garbage already with the first iPhone. And then at the same time, we had html5 which sort of ushered in the replacement for the need of a lot of these things. So we had web fonts, we had a video tag the audio tag, because before html5 video, there was no way to embed a video without using either flash or like an embedded mo v file on a Mac only, only audio webcam access saving files to the system. All of these things are now available when html5 came around. So that sort of killed it as well. I was very happy when that thing got lost. And I know that a lot of like the good flash developers were just like, Huh, no big deal. And they just moved over to Canvas and, and JavaScript and started just building amazing stuff. So I don't think that we really lost a whole lot there. Yeah, in terms of the web, yeah, well, we also had was Microsoft Silverlight that was sort of a flash competitor that came along as well. And the only reason I think people remember Silverlight is because Netflix uses Microsoft Silverlight for the longest time. And it was so frustrating because I remember so many like I remember so many days when I was just married and we would make nachos with my wife and sit down on the couch and want to watch a movie and it was like you need to update Silverlight or - -10 -00:09:13,020 --> 00:09:15,960 -Scott Tolinski: whatever, sir like today. - -11 -00:09:16,020 --> 00:09:54,000 -Wes Bos: Yeah. Oh, come on. I have to update Silverlight. And the reason why Netflix was such a holdout for that is because there was no DRM on the web. And that was a spicy topic for a long time. Should we allow DRM which is digital rights management the ability to just like before that you could just right click save a movie or a video tag and save the source for that. But it was a huge thing. Firefox did not want DRM on the web as as a consumer I just wanted html5 video. Yeah, on Netflix without Silverlight and but can you imagine why people need DRM? Netflix without DRM - -12 -00:09:54,000 --> 00:09:55,440 -Scott Tolinski: like? Yeah, - -13 -00:09:55,440 --> 00:09:57,870 -Wes Bos: can you imagine just like Click Save? - -14 -00:09:58,140 --> 00:10:03,210 -Scott Tolinski: Yeah, that would have sunk Netflix. Because it would have sunk them I really or at least the the streaming portion, I - -15 -00:10:03,210 --> 00:10:24,240 -Wes Bos: think the big thing was I don't think Netflix probably cared that much but it was the studio the relationships with the studio, they would not be able to have a video they would not be able to get what's my favorite Adam Sandler movie? Happy Gilmore. If, unless they had DRM in it. So that was the the final dagger in Silverlight that we did that one to do. - -16 -00:10:24,960 --> 00:10:27,770 -Scott Tolinski: My favorite my favorite Adam Sandler movie is the Wedding Singer. - -17 -00:10:29,250 --> 00:10:30,060 -Wes Bos: That's a good one. Yeah, - -18 -00:10:30,060 --> 00:10:36,120 -Scott Tolinski: Courtney and I were just watching and we're like, I feel like this is objectively the best Adam Sandler movie, but that could just be me. - -19 -00:10:36,120 --> 00:10:37,170 -Wes Bos: That's great. - -20 -00:10:37,170 --> 00:10:39,020 -Scott Tolinski: Where are they now Adam Sandler movie? - -21 -00:10:39,650 --> 00:10:46,620 -Wes Bos: Where are they now? Tweet us at syntax FM with your favorite Adam Sandler movie and why make sure you explain why please don't let it be jack and jill. If - -22 -00:10:46,620 --> 00:12:00,030 -Scott Tolinski: If you say jack and jill, I'm just not even going to delete the tweet. Next up we have this is actually going to be for anyone who at any point worked in designing web applications or websites back in the day, when grid systems took off, these things really took off and their grid systems in all sorts of shapes and sizes. I think one of the most popular ones probably ended up being in bootstrap itself. But the grid system goes deeper than just a grid system with classes or something like that the grid system is for a long time was a whole way of designing websites, you had your Photoshop templates, with the margin setup all you know your red lines, whenever you open the document, you had your overlays, and you had your systems in code to make this easier whether or not these were CSS based frameworks or whatever. And I think one of the the first big popular ones was the 960. Gs. Yeah, which is the 960 grid system that dates it right there. Because it's back when computer monitors that 960 was the maximum width that you would go, I remember when we went wider than 960 for the first time as our like design width. Because I was like, yeah, whoa, no, not all computer monitors are that narrow anymore. - -23 -00:12:00,090 --> 00:12:34,710 -Wes Bos: This is so old that it was before responsive design. And it was just like you have to remember everyone was like we need to make sure our website fits on. What was it like a like a 15 inch monitor or something? I remember I remember people being dismissive of people who had 15 inch monitors and being like, whatever I'm going 11 4011 for those people that have 15 inch monitors, you know, yeah. And there, there was no no way at the time to change your grid system at the time. But yeah, here's the the big question is did you go 12 column? Or did you go 24 column, - -24 -00:12:34,980 --> 00:13:12,420 -Scott Tolinski: I never made those decisions. It was always the designer on the projects for our agency that was making those decisions. And we would just sort of do whatever they gave us. I believe most of the time we went 12th. That's what I remember working with mostly, there were like some systems in Drupal I had set up via the Omega theme that's dating a little bit, the the Omega theme in Drupal, that it was all just like you could set up your grid system, we had just like a default one that that went in there and and worked fine. I remember like the very first bit of CSS code that I would write would be like with 960, margin zero auto on the container div, wrapper code - -25 -00:13:12,420 --> 00:13:27,960 -Wes Bos: that you write. Yeah, man, that's a bit of a throwback, using the 960. That's like, I remember that's the first one I kind of got into the whole web development that was built by Nathan Smith, who was still pretty active in in the web development community now. So that's pretty fun. Looking back at that, yeah, - -26 -00:13:27,990 --> 00:13:35,040 -Scott Tolinski: there was also a couple of others, which you had like the golden grid system. Yeah, golden grid system. I never used the golden grid myself, - -27 -00:13:35,070 --> 00:13:48,090 -Wes Bos: I think it was more of like a design and thought I always use the 960 gs in code. But the golden grid system was pretty popular as well. There was Suzy, which I think was like a SAS base grid makers, he - -28 -00:13:48,090 --> 00:14:35,040 -Scott Tolinski: was paid like paradigm shifting, in my opinion in grid systems, especially SAS based grid systems. So you had the compass based grid system and things like that. You could do like an overlay. But the cool thing about Susie's grid system was that instead of being bound to classes, like small with the near columns is going to take out 12 columns or something like that, instead of being bound to classes, you get to use mix ins to define your grid system. So you write your own CSS, how it's normally been written, you have this main section, and then the main selector, okay, this gets a grid with, you know, 12 out of 12. And so to me, Susie was really the first framework that took that idea and made it to be something that was like, just totally different. The way you define your grids. - -29 -00:14:35,070 --> 00:15:38,430 -Wes Bos: Yeah, it's a pretty popular and the other obviously, the big two, which I think are still pretty widely used is the bootstrap and the foundation have grid frameworks. I personally don't use a grid framework for any of my projects. No, I do use foundation on my own course site right now just for a quick and up and running, but I never feel the need that I actually need a grid system and I find that it often would just get in the way of trying to figure out how to make it and I'm just on the The Susy website right now. And I think they explain best why you don't necessarily need a grid system anymore. It says, With the advent of Flexbox and CSS Grid, there are fewer reasons to use a grid library like Suzy. And that's wonderful grid libraries, were always a temporary fix waiting for the browser to take over. Still, not everyone can play with the latest specs and will always be edge cases that require manual grid math. I think that's perfect. Because people always ask me like, what grid framework do you use? And my answer that is I just use grid or I just use Flexbox. And you don't need a framework that uses it. Because it's so simple. It's so flexible, that you don't need something that's built on top of it to make it easy for you. - -30 -00:15:38,460 --> 00:16:04,170 -Scott Tolinski: Yeah, so grid systems will probably always be around in design. But in development, who knows? Shout us out if you use a grid system still, which grid system do you use currently? Because I don't think either of us are up on whatever is latest in the grid world other than CSS Grid. So I'm interested to know what what grid systems people are using if they're still using them in development. Next up, we have a fun one, which I know I use this. I don't know if you did but a coffee script. - -31 -00:16:04,230 --> 00:16:06,030 -Wes Bos: Yes. Huge coffee script user. - -32 -00:16:06,050 --> 00:16:07,020 -Scott Tolinski: Yeah. Likewise, - -33 -00:16:07,020 --> 00:16:17,670 -Wes Bos: my codebase still right now runs on like 2% coffees a night I there's a pull request into remove that entirely. But the code that's running today still is powered by CoffeeScript. Nice. Yeah. CoffeeScript - -34 -00:16:17,670 --> 00:16:53,580 -Scott Tolinski: is basically Ruby flavored JavaScript. It was a lot of the things that came out of the whole, like the Ruby explosion, right? The whole Ruby explosion of Ruby on Rails, you had sass, which was based in Ruby, or compass, which was based in Ruby, you add Hamel, I think was Ruby based as well. And because of that, I think people were liking Ruby a lot. And then Ruby still great. But the sort of JavaScript flavor of Ruby, or the I should say the Ruby flavor of JavaScript was TypeScript. So I borrowed a lot of things for Ruby, and things that you actually see in JavaScript now like arrow functions and things like that. - -35 -00:16:53,760 --> 00:17:27,720 -Wes Bos: Yeah, it was huge variable interpolation. Oh, yeah, keep checking. That's still something we don't have in like, if you have an object, you want to check six or seven levels deep. We are getting that hopefully in JavaScript, but we don't have it just yet. classes, all of the amazing things that CoffeeScript had, we either now have an ESX they're coming to the language, or we have something like that, like TypeScript. So CoffeeScript was amazing for for pushing the web forward, I think it's very similar to Compass we talked about last episode is that we just don't need it anymore. And we should celebrate that because that means that the language has has moved forward. - -36 -00:17:27,750 --> 00:17:55,470 -Scott Tolinski: Yeah, I always picked up CoffeeScript. And at least initially, because it looked so much simpler to me. There was like less of this syntax garbage. And you know, I had been working a lot in Ruby and Python myself. So I was like, Okay, well, I don't have to use some of the stuff I had to use before. And it just made my code look a little bit cleaner. And I really, I really enjoyed using CoffeeScript. For the time they did it was another tutorial series I did early on and level up tutorials was on CoffeeScript. And another one that like helped propel level up tutorials. It - -37 -00:17:55,470 --> 00:17:59,160 -Wes Bos: was also before like prettier, or like minifier, like - -38 -00:17:59,970 --> 00:18:01,020 -Scott Tolinski: along grittier. Yeah, - -39 -00:18:01,170 --> 00:18:37,820 -Wes Bos: yeah, so that was huge. Because I felt like I like I was terrible with my code. So sloppy with writing JavaScript, and CoffeeScript was indentation based. So you had to make it look nice. Otherwise, it would break that was really nice. It forced me to actually write nice looking code. Nice. Next one we have here from the same author of CoffeeScript is underscore j. s, the story with underscore is pretty simple. underscore was a hard dependency of backbone. js. So you couldn't use backbone unless you used underscore. And what happened is john, David Dalton came along and wrote lodash that's why it's called lodash. Cuz it's underscore. - -40 -00:18:37,850 --> 00:18:38,700 -Unknown: That's a lodash. - -41 -00:18:39,030 --> 00:18:44,520 -Wes Bos: Yeah, it's a lodash. Yeah. I hope everybody knows that. If you're doing this, if you just just found that out. That - -42 -00:18:44,520 --> 00:18:58,610 -Scott Tolinski: seems like that would just like cruise cruise over a little bit for a lot of people. Like, I feel like it was a decent amount of time before I realized the whole load. Like, if it wasn't, it wasn't a moment of enlightenment, it might have still been cruising over my head today. - -43 -00:18:59,009 --> 00:19:38,790 -Wes Bos: Yeah. So lodash was initially just a drop in replacement that was focused on performance. And he basically could just take it, it had the exact same API as underscore and but it had a little bit more focus on performance, because john David Dalton was the guy who made .js perf. It's a JavaScript perf testing tool. And he's just a wizard at building things and optimizing. So it was just a nice one. Obviously, lodash has has grown huge since then, it has a lot more. It's really popularized functional programming. It's pretty, pretty neat in what it's done. And it's sort of again, underscore is one of those things that just push the envelope and now we have because of that, we now we have even better things. - -44 -00:19:38,810 --> 00:20:39,780 -Scott Tolinski: Yeah, yeah. lodash was funny, because for me, it was one of those libraries that like by the time I understood why I needed it, or even did actually need it. Yeah. lodash was like already here. So so like, by the time I was just picking up underscoring being like, Oh, I get it, like, I get why I would use this. Then my coworker would be like, dude, you should be Using underscore, or I mean lodash instead. Cool. So next up, we have a fun one. And this is gonna be a fun one. Because I never used this personally, it's fun for me because I never used it. And I knew it wasn't going to stick around. So I can have a little gloating here. But this one is less, which was the CSS preprocessor that existed right around a little bit after sass started to get popular. And it largely became popular because it was bundled in with bootstrap. And because it was easy to get started with, you could just drop in a script that actually allowed you to use less and not have to compile it ahead of time. So yeah, there was like a browser - -45 -00:20:39,780 --> 00:20:46,440 -Wes Bos: side compiler. Yeah. And since the development, but he still abused it. And - -46 -00:20:47,520 --> 00:21:05,840 -Scott Tolinski: yeah, people shipped with it. I think the compilation or the pre processing of sass, scared people away from SAS, and then they went to less, and then they use less. And they're like, yeah, I'll just stick with this thing. That's not as good as SAS or any of the other offerings out there. It's my controversial opinion on unless, - -47 -00:21:05,880 --> 00:21:06,390 -Unknown: yeah, - -48 -00:21:06,450 --> 00:22:31,500 -Wes Bos: you know what, Wes Bos calm right now still runs on less. And that should that should tell you how old My website is. I'm actually working on a redesign right now. But the reason why I picked less was because it's built on WordPress. And I didn't want like a build pipeline for my own website. So what I did is I found a PHP les library that compiled my les on the fly. And then it wrote a little bit of logic in the head of my WordPress file that just compiled it. If I was logged in. And as admin and a couple other if I had a couple settings turned on it, which is recompile it on the fly, which is pretty cool, because then you could just throw up your last file. And if you're logged in, it would just kind of recompile either in development or production. Probably not a great idea. But it's still it's still trucking, like, like eight years later, or something like that. It worked pretty well. Still trucking. We talked about this on the podcast before, but less also was feature less, it didn't have as many features as SAS caught up is, it was a feature phone, let's face it, it was it's now caught up to SAS and has all the same features. But it's all about timing with these types of things. And as well as like I always know like, there's always like these like, it's like Laravel developers always use view. Yeah, I think that in that whole area, it's they're always using less as well. There's certain like pockets of different developers that are like just crazy about using less, because that's what it is sass was - -49 -00:22:31,500 --> 00:23:16,860 -Scott Tolinski: so heavily used in Drupal land. And I the first time I heard about sass was actually at a Drupal meetup and in, he was like the Southeast Michigan, Drupal meetup or something. But the first time I'd ever heard about sass was through a talk on SAS and Hamill, in Drupal. And there were a lot of the most popular themes in Drupal that had a whole SAS build process built into them. So it was really easy to have a theme, like a starter theme that had the whole build process already set up for you without you having to do anything. And so for me, it was really easy to pick up sass and stick with it, and then look over at the less crowd and being like, why would you use this because it has less features, and it is less good. But yeah, that's the joke that keeps on giving. It's not even funny, though. But yeah, so - -50 -00:23:16,860 --> 00:23:17,460 -Unknown: I mean, I - -51 -00:23:17,460 --> 00:23:45,420 -Scott Tolinski: appreciate sass, or I mean, I appreciate last. What I appreciate most about less, though, was the fact that I think it was needed to get CSS writers over to the preprocessor side, totally, because it was so easy to get up and running with it allowed them to see the benefits of it without getting stuck in any sort of tooling process that might make them be like, you know, this isn't worth it. So I appreciate what less than that regard, I think it did largely explode the popularity of CSS preprocessors. Overall, - -52 -00:23:45,540 --> 00:24:29,130 -Wes Bos: I think that can be said for almost all of these tools as they were largely a stepping stone in changing how we build apps. Like if you think about Gulp, they totally changed the fact that like if we didn't have Gulp, yes, what was it six to five, which was what Babel was called? Yeah, I don't think people would have picked up this new JavaScript syntax until years later. But because people were already writing sass, and they go, Oh, I can just pop a quick little Gulp task in there. And we can start using these new JavaScript features immediately. You might as well so it was kind of neat that we can you have all of these amazing things that were part of the our web development journey, and most of them change the way we think we're easy enough to get started and pave the way for some of the new things. Yeah, - -53 -00:24:29,130 --> 00:25:02,190 -Scott Tolinski: and I hope if you've never heard of some of these things, or if you never use them, at least, that you now have some of the more context to where we are today. Right? Because a lot of these things like you did, they just built up to everything where we're at. And now here we are today. And hopefully some of these things as this episode does is give you that context if you don't have it, because context is important in a lot of this stuff. You don't have to go ahead and learn less or flash or whatever. But it is important to know like why it was here or why it was popular once and why it's no longer popular. so that you can know not repeat history for whatever reasons. - -54 -00:25:02,520 --> 00:25:20,340 -Wes Bos: All right, I think that's enough for today. That's hasty enough. We've got I tweeted out like, what are the tech that was so hot years ago, and we've still got probably at least another shows worth. So if you enjoy this, let us know. And we'll record another one. Yeah. And if there's another thing he thought we didn't cover it was someone just tweeted, cappuccino. - -55 -00:25:20,490 --> 00:25:33,750 -Scott Tolinski: Yeah, that yes, cappuccino. Wait, yeah. Don't use this as an opportunity to dump on something that is actually still being used, like people. People will be like, what's the hot tech that whatever? And they'll be like Angular like, no. So - -56 -00:25:33,750 --> 00:25:37,170 -Wes Bos: when somebody said Angular, it's got like, 400 likes on it? Yeah. - -57 -00:25:37,170 --> 00:25:38,820 -Scott Tolinski: It's like, okay, we - -58 -00:25:38,820 --> 00:25:39,600 -Unknown: get it. We - -59 -00:25:39,600 --> 00:25:41,190 -Scott Tolinski: get the joke. Like, - -60 -00:25:41,220 --> 00:25:48,150 -Wes Bos: yeah, people are saying things like someone said, lodash. Somebody? Yeah, I was like, I use lodash. Like three seconds ago. Yeah. What did they say? - -61 -00:25:48,570 --> 00:25:51,540 -Scott Tolinski: Is lodash what just general JavaScript map. And one - -62 -00:25:52,170 --> 00:26:13,080 -Wes Bos: thing, people don't have the use cases for lodash. So they think because they can write a MapReduce filter. And we've talked about this, like till we're blue in the face on the podcast, but like, you still need lodash for many use cases that are a little bit more advanced as well as, like events throttling, whatnot. Yeah, that's it for today. Thanks for tuning in. And we'll see you next one. Yeah, we'll - -63 -00:26:13,080 --> 00:26:26,880 -Scott Tolinski: catch you later. Please. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax104.srt b/transcripts/Syntax104.srt deleted file mode 100644 index d910e718b..000000000 --- a/transcripts/Syntax104.srt +++ /dev/null @@ -1,468 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax, the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:09,000 -development treats out there, strap yourself in and get ready to live ski - -3 -00:00:09,000 --> 00:00:10,530 -and West boss. Hey, - -4 -00:00:10,649 --> 00:01:07,290 -Wes Bos: everybody, welcome to syntax. Today, we're gonna be talking all about CSS layout, we got this awesome question come through our potluck button. And if you don't know, our Pollak button is where you submit questions to the show. And generally, we answer them on a potluck. However, this question came by john Lynch, who's from west of Ireland, which is kind of fun. And he said, Dear Wesson, Scott, you would make me and I'm sure many other novice front end developers very happy if you could do an episode of syntax FM, and maybe a tutorial on the topic of CSS positioning and sizing. And then he goes into break down this incredibly in depth, CSS layout. So basically, we're just taking this layout that he's given us. And we're going to go through it and talk through some of how CSS works, because it's often an overlooked thing. I even do this myself where I don't have a CSS course out. And I would love to if people ask me all the time, like, when is the CSS course coming out? Because it's such a CSS is hard, don't you think? Scott? - -5 -00:01:07,649 --> 00:01:26,610 -Scott Tolinski: Yeah, the biggest indicator that CSS is hard is just how many people have problems with it or hate it or whatever, or you know, that that classic CSS is awesome. Where the text is going out of the box? I mean, I think that mug right, there is a is an indication of just how hard CSS can be sometimes - -6 -00:01:26,699 --> 00:01:40,920 -Wes Bos: I so I've got on my laptop, I met somebody at a conference. I'm totally forgetting who this is. Sorry, if you're listening, but he printed new CSS is awesome ones where the box is properly fits around. And he's like, I fixed it. And I like that, because I actually - -7 -00:01:40,920 --> 00:01:42,450 -Scott Tolinski: yeah, I'm gonna get one of those. - -8 -00:01:42,539 --> 00:02:00,420 -Wes Bos: Yeah, it's awesome. Because like, if if you do know how to use CSS, you're not going to run into those issues. And, and that joke in that mug that everyone's talking about is a bit of a thing of the past, I think because like, obviously, these aren't issues anymore. It's just that you're having trouble writing it, and you need to probably learn it a little bit better. - -9 -00:02:00,449 --> 00:02:27,810 -Scott Tolinski: Yeah, so I've never been in the camp of, of CSS sucks. I've always been in like, yeah, like the CSS fan camp. And like, I never understood why other people had a problem with it. And maybe this because that's where my foundation was right. My Foundation, I didn't come from a computer science background, I came from a design background, and I wanted to, you know, be able to create these things. So I mean, my whole learning and understanding of web dev primarily resolved around learning CSS to start. - -10 -00:02:27,869 --> 00:03:09,960 -Wes Bos: Well, speaking of CSS, we have two awesome sponsors today, here. First one is Manning books, they've got a whole bunch of deals, 40% off all of their books and video courses. Today, we're gonna highlight one called CSS in depth in motion. So it's in depth and motion, I think in motion just means that it's a video and not actual book from Chris ward. So you want to check that one out. If you're looking to learn a little bit more about CSS. We'll talk about that partway through the show. Our other sponsor today is century century is going to do all of your error and exception tracking on your client side on your server side. We'll talk about them a little bit more throughout the show as well. So how you doing Scott? Hey, doing good. Just take it out? - -11 -00:03:09,960 --> 00:03:19,050 -Scott Tolinski: I don't know. I'm getting work done recording tutorials. Doing what I do working on the site. Devin, live in the dev life. Yeah, it's all good. How about you How you doing? - -12 -00:03:19,079 --> 00:03:41,940 -Wes Bos: Good. I'm just looking at what my next last couple days I am off for the year in this what today is what today is December 13. It's Thursday. And I'm looking at doing another three and a half more days of work. And then I'm done for for the holiday. So I'm looking forward to that. We've got some fun stuff playing with the kids. And we're always trying to maximize that that time around Christmas. - -13 -00:03:41,969 --> 00:03:53,280 -Scott Tolinski: Yeah, I was trying to look at the calendar here to see if our audience would be listening to this in the year. Oh, yeah. And maybe you are but the the release of this episode will not be 2019. Unfortunately, the next one will be happy - -14 -00:03:53,280 --> 00:03:55,500 -Wes Bos: new year, if you are listening to this in the future. - -15 -00:03:55,529 --> 00:03:56,729 -Scott Tolinski: Yeah. Yeah. - -16 -00:03:57,990 --> 00:05:14,010 -Wes Bos: All right. So let's dive into it. css layout, we're just gonna go through a whole bunch of different topics related to CSS layout, positioning, display heights, widths, units, you get the point. And we'll probably get through this whole thing. If not, we'll cut into a second show as well. So first one is when do you use the position fixed static, absolute relative and sticky. So when you have an element in CSS, you position it, and by default, it's going to be a position of static. So this is something you're not going to probably apply to any elements, unless you're trying to overwrite something that has previously been positioned. Otherwise, that's static, that's the way it works, the content inside of that element will take up as much space as it needs. And when we say that, we mean that when you put elements on the page, and you put content inside of those elements, the size of that element is determined first, by the whether it's blocked or in line, we'll talk about that. And generally, they're blocked and they go 100% across the viewport, or if it's going tainer and then the height of it is determined based on the actual content that lives inside of it. So that's that's position static. Yep. It's not all that exciting. But we've got other ones, you want to take a shot at explaining some of these other ones. Yeah, let's do a little back and forth here. - -17 -00:05:14,010 --> 00:05:47,100 -Scott Tolinski: So the next one on the list, I think of maybe your most used would be positioned relative isn't relative has a couple of uses. But ultimately, what it does is it basically just makes the element positioned relative to its normal position. And one thing that people I don't think knew that you could even do with position element is give or position relative item is to give it a top value, and it would actually bumped it down. So you could do something where you maybe you give your your button, a position relative, and then you give it when you push it, you know, a top of one, and it looks like you're pushing it down a little bit. They - -18 -00:05:47,100 --> 00:05:49,380 -Wes Bos: used to be that Yeah, I love that. Yeah, - -19 -00:05:49,380 --> 00:05:50,010 -Unknown: me too. - -20 -00:05:50,310 --> 00:06:18,000 -Scott Tolinski: But now a lot of that stuff that you would normally have used for that now you could just do a CSS transforms anyways. So I'm not typically using the relative to move things around too much anymore, other than, you know, the way it is. But the primary reason why you're using position relative nowadays, is really just as a container for a position absolute item. Because when you position tonight, um, absolutely, it does. So with the container in mind. So do you want to talk about position absolute? - -21 -00:06:18,030 --> 00:06:53,580 -Wes Bos: Yeah. So when you're thinking about positioning elements on the page, I always like to tell people picture a bunch of elements that are standing in line at the grocery store. And by default, all of these elements are positioned static, and they just take up as much room as they need. So you might have a little element, you might have a really big and wide element, you might have a very tall element, and however much space that they need, they take up that much space in line now. And when you position something relative like Scott says, you have the ability to start skirting around with Trouble, trouble stance or top right bottom left, I've - -22 -00:06:53,580 --> 00:06:54,900 -Scott Tolinski: never heard that trouble. - -23 -00:06:54,990 --> 00:07:02,250 -Wes Bos: No. Oh, man, you're gonna get in trouble in this podcast, because I use it a lot. It's the only way I can remember how the shorthand works. - -24 -00:07:02,250 --> 00:07:04,500 -Unknown: I just think about it as clockwise. - -25 -00:07:04,920 --> 00:07:10,950 -Wes Bos: No, that's wrong, clockwise or like, never eat shredded wheat, that's wrong, it's trouble. It is. - -26 -00:07:12,270 --> 00:07:14,700 -Unknown: So much easier. It's universal. - -27 -00:07:14,730 --> 00:08:12,270 -Wes Bos: When you apply trouble to it, you can skirt it around it, but it will still maintain its spot in line. So I always talked to people. When I was teaching CSS and ad hacker you in Toronto, I would always be like, Okay, this person is still in line. Maybe they leave the cart there or they put their foot they leave, they leave their shoe. Yeah, but they're running in grabbing like a chocolate bar from from the thing over there are they Oh, I forgot to get sour cream. Let me go run and get it you still maintain your your list. However, when you position something absolutely position absolute, it gives up its seat in line. So it sort of lifts itself up like a ghost. And all the other elements no longer think okay, you no longer get space in line. Because you've positioned yourself absolutely, you no longer take up space on the page. And any other absolute or any other relative or static items that come after that element. Simply just move up, oh, that guy left, - -28 -00:08:12,300 --> 00:08:13,800 -Scott Tolinski: it just turned into a ghost, - -29 -00:08:13,860 --> 00:08:14,640 -Wes Bos: it just turned into - -30 -00:08:16,260 --> 00:08:19,890 -Scott Tolinski: just the assume everything's normal and make money online - -31 -00:08:20,040 --> 00:09:20,299 -Wes Bos: to an absolute element, you can still give things a trouble value. So those tr bl the top right bottom left values are going to be relative to the parent container that is relative absolute fixed. We'll talk about this a little bit more as well. How do you see something based on its parent. So that's what absolute is, you can use absolute to overlap things as well. So if you if you need things to obviously overlap each other, you can position absolute them, I would go as far to say in most cases, you probably don't want absolute and this is coming from if you're a beginner learning CSS, but what I see all the time is people say I want this thing to go here. So I'm just going to position absolute it and then give it the values that I want. And that's not great, because because of the reason why it loses its space in line. And then designing the rest of your page becomes really hard because you've got this element that doesn't push things up or down depending on how much content is inside of it. - -32 -00:09:20,370 --> 00:10:53,779 -Scott Tolinski: Yeah, and that's why frequently you just see a container that's relative and then an absolute thing and then maybe the container has a some you know height and width or whatever. Next up we have positioned fixed, which is a lot very similar to position absolute, I think new people can occasionally get a little twisted up with when to use absolute and when to use fixed fix his position relative to the viewport, you'll see position fixed use primarily and things like pop ups modals maybe like an alert like a toast message or something like that. You'll often see it even like those like full page ad thing, takeovers that are like sign up for my mailing list like that's position fixed, right? So position fixed is again, it's positioning something relative to the viewport so when you are giving it its top, left or top right, sorry, trouble is when you're giving it its trouble coordinates, you're doing so so the if you give it a top of zero and a left of zero, it's going to be in the very top left of the viewport. No container is going to prevent this from being stuck inside of this thing. It's always going to be towards the viewport. And fixed I think fixed is probably getting used less and less. Right I like I like go out of my way to avoid using fixed. There's some like weird bugs in Safari with position fixed specifically with like text inputs and stuff. And so I've just, for the most part, I find a way to use absolute for things especially like now that you can do things like portals in react or whatever very easily to take something and put it at the very bottom of your document like modal, then you can position an absolute and that absolute visit to the actual viewport rather than something position fixed. - -33 -00:10:53,820 --> 00:11:42,120 -Wes Bos: Yeah, fixed has always been an issue in in Safari. Like for many years, we didn't have fixed that all in Safari just because of the way it worked. And now it's still a pain. Same with viewport heights are a pain in iOS, because of the way that scrolling works. with iOS, when you load the page, it looks fine. But when you scroll, Safari will take the bottom the bottom bar and move it out of the way. So you get more height on the webpage. And that causes this weird like gap where if you are using 100 Vh of viewport height, or if you're using position fixed and doing bottom zero, it doesn't actually stick to the bottom because the viewport is not as big as that. It's such a such a confusing thing. I have a problem with it right now on my own checkout on safari, which I'm trying to deal with. It's it's kind of frustrating. - -34 -00:11:42,149 --> 00:12:12,899 -Scott Tolinski: Yeah. And that's one of the reasons why like, I mean, we'll get into viewport units a little bit more in a little bit. Yeah, but like, that's one of the reasons why I almost never use the H if I want like something to be exact to the viewport height. Like I'm always always using it for like things that are like sort of close to 100. Okay, I just want to make this, I want to make sure this, this, you know, main element on the page is never less than, you know, 80% of the viewport height, you do min height, the VH or whatever. So - -35 -00:12:12,929 --> 00:12:21,179 -Wes Bos: that's what I use it for almost all time. Yes, let's save those treats. Because there's a lot of viewport heights or people might not even know what we're talking about. They're pretty, pretty handy. - -36 -00:12:21,210 --> 00:12:28,860 -Scott Tolinski: Yeah, I have a note at the viewport height thing. It's this is can we just talked about how dope viewport heights are because I use it for everything. - -37 -00:12:29,159 --> 00:13:56,010 -Wes Bos: The last position we have, and this is relatively new, it's called position sticky. We've talked about it on the on the podcast before, if you go to syntax FM right now and just scroll the player past where it is it turns into position sticky. And the way that position sticky works is it's positioned relative it just goes where it should be, until that thing is scrolled outside of its container. So the example we have is our the player for the podcast is I don't know about two 300 pixels down from the top. And as soon as you scroll past that it sticks to the top. And the reason is because if you position something sticky, and give it a top right bottom left value, when it is supposed to be scrolled out of the container, it will then start to respect those top right bottom left. So it kind of goes from position relative to position fixed, with the caveat of it not doing that weird thing where we used to do this thing where as soon as it scrolled out of view, you would position absolute it but then by position absolute thing it you would change the flow of the document because by position offloading it, it gives it it gives up it's spot in line and then all the content would would jump up really quickly. So position sticky just takes care of that where the elements still takes up its space in the DOM flow, but it doesn't, but it will stick to the top of the page or the top of the scrolling container if you need it. I think that's a pretty neat one because considering how hard that was - -38 -00:13:56,189 --> 00:14:19,260 -Scott Tolinski: just playing JavaScript how much she used position sticky because let's look at the Can I use for position sticky because I feel like it's one of these things that it's now like opened up to be usable now for really like the first time since it's been released. He had still no iE 11 support that sucks and no hopper mini support no blackberry browser 10 support looks like that's a problem. - -39 -00:14:19,409 --> 00:14:26,010 -Wes Bos: Position sticky is a nice one though because like you know, it doesn't have to stick to the top of the thing so it just becomes relative - -40 -00:14:26,040 --> 00:14:43,049 -Scott Tolinski: Yeah, that's the use case is when you don't need something to be positioned to get some weird issues with it to some occasionally weird edge Casey bugs, but I love position sticky. It's one of those things I wish I could just use all the time with no fallback knowing that it's gonna work on everything. But you know what we'll get there. - -41 -00:14:43,199 --> 00:15:51,049 -Wes Bos: Yeah, I'm trying to build something into the syntax, that FM website where the currently playing show also becomes sticky when you are scrolling it just so that as you scroll through the list of episodes, the one that's currently playing is stuck to the top. There's some weirdness around using sticky double sticky Yeah. Hostgator is a little weird if they get a coupon, yeah, sticky. So that is the positions, let's talk about heights heights in CSS are a bit of a funny thing as well, because heights and widths do not work the same way. Because if you give something a width, it will immediately size itself. If it is a block or inline block element, we'll talk about what those are in just a second. If you give something a width, or a max width or a min width, then it will respect that and automatically size itself based on its parent container. But if you give something a height, it doesn't always work. And that's because the height of a container is dependent on the amount of content that is inside of it. And unless it's a position absolute item, or you're dealing with a grid or something like that, it will sort of ignore the height that you give it. - -42 -00:15:51,090 --> 00:16:47,220 -Scott Tolinski: Yeah, I think this is probably stack overflows, number one question for new CSS developers is like, why isn't my div that has a height of 100%, taking up 100% of the height. And I think that is maybe one of the more frustrating aspects when you're first learning CSS positioning, and you're sort of like, well, it's not doing what I'm telling it to do, because it makes sense that you would say give this 100 hundred percent height, and then it's not gonna do it again, and needs that content or needs its parents to be height 100%, as well. But now that we have the viewport units, or whatever that sort of takes care of that aspect, for the most part, I think of height and width, are specifically with for in responsive web design when you're thinking of like non fluid elements, right. So when you're giving something a height and width, it's not going to adjust when the browser adjusts. So if you make the browser shorter or wider, or whatever, if you're giving it saying, hey, this thing is 400 pixels wide, then it's always going to be 400 pixels wide. - -43 -00:16:47,340 --> 00:17:27,800 -Wes Bos: Yeah, I think the rule of thumb I tell people is you probably don't want to give something a height unless you're trying to give it a height of 100% or 50%. And you know, exactly, because when you give something a height, you automatically are shooting yourself in the foot for when the content of that element needs to overflow it right. And you don't really know what the content of the element is going to be maybe you do when you're designing it. But that will change based on the viewport width based on the font size based on all kinds of different things that you don't have control over. So I always tell my students let the content do the sizing of the height, and you can do the sizing of the width. Yeah, I - -44 -00:17:27,800 --> 00:17:31,610 -Scott Tolinski: don't find myself using height that much overall, anyways. Yeah, - -45 -00:17:31,770 --> 00:17:58,230 -Wes Bos: the next question we had was, when do you use the max height and max width, and as well as min height and min width. And generally these are sort of just like safeguards on either end that you use along with your, your max height, or sorry, with your regular width and your regular height. So if you don't want something to go bigger or smaller than whatever size that you have, I use max height and max width a lot in Flexbox. And I find myself when I'm using grid, I don't reach for it all that much often anymore. - -46 -00:17:58,290 --> 00:18:58,260 -Scott Tolinski: Yeah, you'll typically use these things, again, unresponsive things where maybe you have a parent container, like a good use case, this would be you have your main section of the page, right, the main section of that page, maybe you want it centered, so you have a margin zero auto on it, but you always want it to be essentially taking up the full width to an extent. So you would give it like a max width of 1140 or something like that that way and giant monitors its sticks. And it's only ever that wide, it doesn't get super duper, duper wide max width max that I do find these to be pretty useful. Again, it's just for containing your content within certain bounds. But typically, it's for fluid items and things that are changing upon the browser changing. So they also asked about when to use top, bottom left and right. And these are primarily used within positioning things we mentioned relative sticky, absolute fixed. So we already kind of went over these a little bit. But really just giving things a nudge in a direction or position in a specific container spot. - -47 -00:18:58,310 --> 00:19:24,860 -Wes Bos: Yeah, I think also, what's important to say is that usually you'll probably want to use a transform, instead of using a top right bottom left, especially if you're doing animation, like if you're trying to like when you hover over something and it moves over or up and over or translate you're trying to move something Yeah, you just use a transform. And that's going to be more performant for your animations. And generally, it's much easier to work with using transforms than it is from using top right bottom left. - -48 -00:19:24,900 --> 00:19:42,960 -Scott Tolinski: Yeah. So in that same regard to you know, the transform 3d even if you're just moving something over to the left or to the right or up or down. Transform 3d is going to be putting that on the GPU. So I think in typical situations is going to make your animations a little bit smoother. Don't ask me if that's totally wrong. But I - -49 -00:19:43,100 --> 00:19:44,040 -Wes Bos: is that still a thing? I've - -50 -00:19:44,040 --> 00:19:48,270 -Scott Tolinski: always heard that that's the thing. I don't Yeah, is it? Yeah, - -51 -00:19:48,320 --> 00:20:09,660 -Wes Bos: I'm curious if that is still a thing, because I always remember all these tricks, where if you want to offload the animation to the GPU and make it buttery smooth, then use transform 3d. Yeah, and those checks almost was like, well, then why doesn't chrome figure it out and offload it to the GPU in the first place? But I still often use that trick because I remember it. And I'm curious now, if anyone know Yeah, - -52 -00:20:09,660 --> 00:20:21,450 -Scott Tolinski: I always use the 3d transforms. I mean, it's just like any good movie. Like, you know, we got transformers, but then you got Transformers 3d. Yes, go for the 3d one. Although Transformers isn't a good movie. So - -53 -00:20:23,330 --> 00:22:55,410 -Wes Bos: speaking of 3d, there's other things that need depth, and it's your CSS. This is my favorite. I love this. I was trying to convince Scott to use that transition. But he is too bad though. So I have to say it here. Anyways, we have a sponsor today that has Manning publications. And they have all kinds of great web development books and videos for you to learn. And today we are spotlighting CSS in depth in emotion from Chris Ward, it looks to be just under a three hour course with 56 exercises. And they go into oh boy cascade better specific D best, best activities that fit in and, and inheritance working with relative units mastering the box model making sense of floats, Flexbox, grid position, and stalking and responsive design. So check that out. Manning has a whole bunch of courses on sale just for syntax listeners@deals.manning.com, forward slash web dev. So thanks so much to Manning for sponsoring. Thank you. Next question we had was what about relationships between containers and their children in terms of sizing and where things position themselves so when you position something absolute, fixed or sticky, it will by default, it will just go where it used to be where it was when it was static. But if you apply a any of your trouble to it, top right, bottom left, where it sources, those top right bottom left values from on the page is based on its parent. And the way I always described this when I was teaching is that let's just use position absolute as an example, that position absolute element will sort of start going up the tree and start looking for a parent that is responsible for its positioning in life. It's like a child in line that's looking for a child that's like maybe it has its immediate parent might be neglectful. So it just keeps going up the family tree until it finds some sort of element that is position relative or position absolute or I think sticky as well. So where it bases itself office is where it will find the closest parent that is positioned relative or absolute. And then where that element is itself is is where the top right bottom left values are derived from. So most likely, you're going to just be having some sort of container element, you pop a position relative on there only because you know that in the future, you're going to have a child that is position absolute. And that needs to be the containing element for it. - -54 -00:22:55,590 --> 00:24:21,180 -Scott Tolinski: Yeah, I think that's good. And yes, they're all like, it's sort of like going over the same thing over and over again, because it is very like these things are also closely related that the concepts all sort of affect one another. So you explain one, it's like almost like sort of explaining how and and we did briefly mentioned that there's some things that we haven't really touched on too much with like the box model and things like that just yet, which are, are some, you know, somewhat important to this whole thing as well. And we briefly mentioned that there's a difference between block and inline and inline block items and how they sort of respect space. And by default, you may or may not realize this, depending on what your skill level is. But each element in HTML has default properties that's assigned to it. And part of these things that are adjusted via CSS resets and stuff like that. But one of the things is, is that these elements are by default, either a display block or display inline, or block, inline block, whatever the URL, all the elements in HTML have default properties for this box sizing. And so we often don't think about that. But div is a div because it takes up its space. It's a position block, right? Where a span is the position in line item. And it doesn't take up any space. It just wraps the content. And I think that's important to to know throughout this whole thing is block verse inline, inline block, how it takes up space and how it deals with that. - -55 -00:24:21,570 --> 00:24:58,440 -Wes Bos: Yeah, maybe we should just rattle rattle through them really quickly. So you've got display block, which is a div, a paragraph and h1, h2, all of your new tags article, figure, all of these things are display block, which means that they are by default, they span across the entire width of its container paragraph is I think I said all of those. Then you have display inline, which things like the emphasis tag, the span tag, the bold and italic tag, which aren't used all that much often. What other elements are in line by default, are the areas do you know about mark the mark tag? - -56 -00:24:58,680 --> 00:25:02,880 -Scott Tolinski: I don't know. know about it? No, I never had a mark tag. Now, let - -57 -00:25:02,880 --> 00:25:27,060 -Wes Bos: me tell you about the mark tag. So the the mark tag is like marquee, it's for like highlighting stuff. It's for marking content inside of it. And I have many times on my course websites, I want to highlight text. And it's sort of like strong, there's some you can look up the accessibility differences between it, but it's being able to highlight text using the marking by default has like a yellow background on it, but just kind of like a highlighter. - -58 -00:25:27,120 --> 00:25:38,160 -Scott Tolinski: That's kind of cool. No, that's interesting. I almost have never used it. I almost always used emphasis or strong to do any sort of differentiating like that. But Mark, no, Mark. Yeah, interesting. - -59 -00:25:38,370 --> 00:26:04,830 -Wes Bos: There is a kbd tag that's in line as well, which is the keyboard input on other elements are in here are in line, you get the point right. So these elements do not accept a width or a height. So you can you can try till you're blue in the face, but they will not. They will ignore any width or height that they give them. Why because they are Get ready. They are spiral wrap. Right? See, get it? This is my ran wrap. No, I - -60 -00:26:04,830 --> 00:26:05,700 -Unknown: don't get it at all. I - -61 -00:26:07,590 --> 00:26:27,300 -Wes Bos: get it here. Yes. If you take a span and your wrap anything with a span, the span will just wrap itself around the entire element, or the text or anything that is inside of it. And it will not go any wider or higher. It started just clings to Yeah, the content isn't there. So it's like cling wrap. Yes. But ran wrap. Yeah, - -62 -00:26:27,300 --> 00:26:32,940 -Scott Tolinski: no, I okay, I am getting it now. I think that's pretty good. That's pretty good. - -63 -00:26:33,090 --> 00:27:17,310 -Wes Bos: Yeah, yeah. So if you want to give something like a inline element of width or height, but still not break the document flow, because a block element will always start on a new line and the content after it will always start on a new line. So if you want to give something a width and a height, but still keep it in line of the document, you can make it inline block. And that will have the same effect as an inline element except that it will accept a width and a height. And the default for that is a image tag is inline block, which is great because you want to give an image a width and a hyper, you also don't want it to necessarily break onto the new line, which is what a figure tag is for. If you do want an image to be on its own line, you should wrap it in a figure and give it a caption as well. - -64 -00:27:17,670 --> 00:27:19,590 -Scott Tolinski: Yep, yep, yep, yep, yep. Yep. - -65 -00:27:19,770 --> 00:28:33,930 -Wes Bos: So those are the big ones. There's all there's a whole bunch of other ones. There's display grid display flex, there's display table. Yeah, a whole other host of unused one. But I think that's we're not gonna talk about that right now, just as we're trying to understand what the differences are between the two. And then you get into these other elements, like the different sizing of different types of elements. So we talked about a paragraph heading tags, those are blocked, we talked about spans and strong, so those are in line. But then you have these things like image tag, image tag is inline block, we have an iframe iframe is a block element, but many people think that iframe will size itself based on its contents. But since an iframe doesn't know how big its contents are, because it's another web page, there's no way to size the height of it, unless you What's the name of that where you can communicate between an iframe postMessage, you can use this thing called in JavaScript called post message, which will allow you to securely send data from an iframe to the parent document and vice versa. And often, what you can do there is you can just have like a timer, every 400 milliseconds, send the height of the iframe to the to the parent document, and then the parent document will set the height of the iframe for itself. - -66 -00:28:33,960 --> 00:28:52,500 -Scott Tolinski: Yeah, I think we should mention too, that a lot of times people think they can communicate with their iframes. And to do so like the iframe has to be aware. This, right? You can't just iframe, you know, syntax.fm into your site, and then just start communicating with syntax, right? The site has to be aware of it. - -67 -00:28:52,860 --> 00:29:42,060 -Wes Bos: Yeah, that's a huge security issue, if you could do that, because then you could just quickly iframe in, like your bank.com or facebook.com, forward slash messages and then screenshot it or dump the HTML content of it. He can't do that unless it's on the same origin. No, no, no. Okay. Last thing I want to say here is that images and video tags are a little bit different because they are ratios based on their content. No other content in the DOM can have a ratio. So if you want it to be like 16, nine, you want like a div to be 69. The only way to do that is to either stick some sort of image or video that has that ratio in it and then size it up, and it will automatically you size, the width of it, and then the height of it will automatically react or vice versa. Or you can use this padding hack. Have you ever used that padding hack? Where - -68 -00:29:42,150 --> 00:29:57,570 -Scott Tolinski: Oh yeah, I use that all the time. I use it on level up actually. So you give something a padding of a percentage of what you want that aspect ratio to be like a padding bottom of 62.5% I think it's the 16 by nine or whatever to get that aspect ratio gone. - -69 -00:29:57,750 --> 00:30:05,340 -Wes Bos: So those are the only kind of weird ones. I was love to have native ratios in CSS at some point. That'd be pretty cool to have. Oh, me too. - -70 -00:30:05,360 --> 00:30:06,480 -Scott Tolinski: Yeah, absolutely, - -71 -00:30:06,840 --> 00:30:09,420 -Unknown: you can keep going. Cool. Next up, we - -72 -00:30:09,420 --> 00:31:39,000 -Scott Tolinski: have the idea of floats. Now, this is one thing that I have not used in a very long time at this meeting, either, yeah, floats. Basically, the idea of floats in the first place is that you float something to take it out of the flow of the document. If you float it to the left, everything B underneath it in the flow of the document is going to scoot up and the thing that's floated left will then be shot over to the left of the flow of the document. And it's only going to take up the space that you give it. So floats were primarily used to do layouts before we had better layout tools. So if you wanted a sidebar on your site, you'd float it left. And if you wanted a content area, you just have it there. And then you give things your width and whatever. And then the container would need some sort of clear fix. Now there's a whole idea of clear fixing, which is what clears the float. Because when you take something out of the flow of the document, the container, the sort of height of the container gets messed up, and it's going to show up, and it's no longer going to respect because the item is out of the flow of the document, that container no longer has that structure to hold it up anymore, right. So because of that we would use on the div you could use going to overflow hidden on the container that would clear the fix, you could have a div that would clear the fix. There was a whole bunch of different things, there was like an after whatever to clear the fix. I have not written a clear fix in any of my code. In years now. No, I - -73 -00:31:39,000 --> 00:32:25,200 -Wes Bos: don't think I've written a float, let alone like the the use for floats was you have an image and you want the text to wrap around that image, right. That's the only use case that you should still ever use a float. So floats are not bad. But they've just gone back to what they originally used for which is having an image or like another example I use, sometimes I'll have like a blog post, and you want to have like a little tip inside of that like, like a hot tip like a hot tip. Yeah, JavaScript is cool. And you want the text to just totally wrap around the top, the left and the bottom or the top, the right in the bottom floating it will do that. And that's exactly what it's for. But we didn't have layout tools available to us. So people abuse it. And we use floats for for website layout. And thankfully, you no longer have to do that. Because we have Flexbox and grid. Yeah, - -74 -00:32:25,470 --> 00:32:42,990 -Scott Tolinski: yeah, it pretty much anything that you would have used Flexbox floats for in layout I'm doing with Flexbox I'm doing with grid depending on what my audience is. But if you were still using floats for layout, I would look into cest using Flexbox, or something better more suited for layout itself rather than what that was originally intended for. - -75 -00:32:43,260 --> 00:33:03,090 -Wes Bos: I think that's why people also use like the grids. We talked about grids on the past episode, like we don't use grids a whole lot anymore. And the problem was that people didn't understand how to fix these issues that you had when you ran into clear fix issues. So they just use a grid and it took care of all of those floating issues for you. But it's not necessary anymore, which is pretty cool. - -76 -00:33:03,180 --> 00:35:16,980 -Scott Tolinski: Yeah, I think and floats were probably again, maybe number one or number two on stack overflows, see biggest problems. And oh, we want to talk about CSS, you know, improving all the time in you know, we always talk about Flexbox and grid and how they changed how we do things. This is directly how they changed how we do things. And it's going to make things just endlessly easier for new developers picking this stuff up not to have to worry about why the heck is my container now collapsing? Or Why's this whole thing weird? or What the heck is a clear fix? And why does it even exist. So oftentimes, people would you know, they'd have these these issues, they would run to Stack Overflow, they would read it. And then they'd have to learn a whole bunch of stuff like that. All of these things are bugs that we have to keep track of. And one way that we treat keep track of bugs over here is syntax. This is not a good transition, I'm sorry, century. But one of the ways we keep track of bugs over here at syntaxes, via century, and you can learn more about sentry@sentry.io. This is a live stream che it's the place to keep track of your bugs, what's happening in your site. And when something goes wrong, what the problem is, I personally use Sentry on all of my stuff, to let me know when things are happening. And one of the coolest things about century is that it keeps track of your bugs and a nice, detailed, organized manner so that you can go ahead and find them. You can address them, you can mark them as resolved. And then you can watch in horror as that bug comes back. And you can realize that you didn't actually fix it. It's just an absolutely insanely useful tool for having any sort of code that needs to work. Right. If you have a, if you have a code that is being used publicly, and you don't have any sort of error tracking on it, then you are just it's like, it's like you're wearing a blindfold, right? You're purposefully ignoring all of these bugs that could be happening because it's not a matter of if the bugs happen. It's a matter of when they happen. So If you use Sentry for two months, let me tell you, you're going to want to be using it for three months. And you're going to want to be using it for four months and five months and so on because it is totally one of these essential elements of my toolkit. So Sentry dot i, so Sentry dot i o coupon code, tasty treat, check it out. - -77 -00:35:17,310 --> 00:35:46,610 -Wes Bos: I love Sentry for the stuff. I'm just I'm just on my dashboard right now. And it's almost like a game is like, Yeah, I bet I could bring that amount of errors down or I bet I could totally eliminate it. And it's just like a constant thing of like, I just want to have a clean dashboard. I want to get rid of them all. And it's really nice to be able to just like look at all the errors that your terrible coding is making happen and figure out how can I get these down? Right? Yes, it tells you exactly what you need to do if you've got a little bit of time to fix a bug. - -78 -00:35:46,650 --> 00:36:55,670 -Scott Tolinski: Yeah, absolutely. Yep, invaluable. Cool. So let's go ahead and talk about we talked a little bit about Flexbox and grid already and how they sort of made our lives better from float. If you want to learn more about Flexbox. And grid, we have a whole episode on on grid. It's definitely well worth your time, if you're interested in it. Both Wes and I both have courses on Flexbox and grid. So there's a lot of content there on this sort of stuff. It's definitely Well, well worth your time. One of the things they mentioned is they wanted to talk about responsive design, media breakpoints and stuff like that mobile first. And all of this stuff sort of goes into the idea of how do you want your design to be? Do you want it to be fluid? Do you want it to be sort of static where at these given breakpoints it's changing? Do you know directly? Or do you want it to grow with the site and things like that. And we mentioned if you want it to grow, you're going to want to be using max width, that sort of stuff. If you want it to be static, you're going to be using standard width and whatever. But the cool thing about a lot of these new tools like grid and Flexbox is you can do a lot of responsive web design without even reaching for a media query. There's all sorts of properties here that allows your layout to adjust accordingly, and sort of work really well and all device sizes if you're using those new tools. - -79 -00:36:55,770 --> 00:37:19,980 -Wes Bos: So a question I have for you. And this is something that comes up all the time is your media queries? Do you do mobile first or desktop first? And the idea behind those two is that? Do you first design the website as a desktop website and then start to size it down as you make it responsive? Or do you first start with the mobile website, and then write media queries as the thing gets bigger and bigger to lay it out? So what were your thoughts there? Scott - -80 -00:37:20,100 --> 00:38:33,380 -Scott Tolinski: depends on the project. I think if I have the designs laid out in front of me, like here's the mobile, here's the desktop, here's the entire thing. And this designs aren't going to change, like a designer dropped this on my desk and says, code this up, I'm almost always gonna go for mobile first. But in level up tutorials land where I'm designing mostly in the browser, and things are changing all the time, I'm reaching for desktop first, and then I'm doing media queries, I sort of actually work backwards. So the code reads mobile first. But I'm not writing it mobile first or so to just coated up to get something working in desktop. And then when I do my little refactor of in sort of refactor it to be sort of mobile first, but when I'm writing it, I'm typically writing the CSS code, desktop first. And that's for a few reasons. It's because I'm delving on desktop. But also my, the primary use case of level up tutorials is via wider width, like desktop, or a wide tablet or something like that. So for me, you know, first and foremost, the, the main goal is to have everything as good as possible on wider widths, rather than in mobile phone width. So I usually start desktop first design, and then and then sort of tweak it as I go, and then do a little refactor. How about you? - -81 -00:38:33,540 --> 00:39:41,130 -Wes Bos: I think the the question I was asked myself is, do I feel like I'm undoing a lot of stuff? When I'm going to mobile? Did I make things too complex on the desktop? And then I have to unravel all of this complexity and set it back to how it normally goes? If you're answering yes to that question, you probably should start desktop first, generally, or sorry, you should probably start mobile first, meaning that your site will be very simple. And then as it gets wider and wider, it becomes more complex with the different layouts that you have. Personally, I almost always do desktop first. And especially now with the with using CSS Grid. And probably like five or six projects that I've done in the last couple of years, I find that it's just so easy to just rewrite the grid at a certain breakpoint. And if things just sort of slat and fall into place. So I also get most of my traffic on desktop as well. So you need to be aware of, of who is I find that you can often hear people chanting, mobile first mobile first, and they don't have like, they probably that probably works for them. But again, you need to figure out where your audience is visiting your website, and what works best for you. - -82 -00:39:41,310 --> 00:42:19,320 -Scott Tolinski: Yeah, and sometimes you even have things like a nav that like the navigation, if you're using the same HTML between mobile and desktop, that's one of those things that's always almost very different between desktop and mobile. Maybe you have it hidden via a hamburger, maybe you have it, whatever, but it's usually a sort of very different situation. In that case, it doesn't matter Which one you do, because typically, the CSS is going to be so different. Like, I might have a media query for just mobile and immediate query for just desktop and have them totally separate. So I'm not having to do a ton of overrides and stuff like that. So I think there's different use cases for either or, but with again, with these modern tools, I find myself even needing to write overwrites, and stuff like that less than less than less, because Flexbox is doing so much for me, I'm no longer having to worry about floats and stuff like that. So again, the tools are just making this so so much better as we go on. And, and I think with some of these things that we're gonna be getting into a second here with these viewport units, these are one of the things that like really makes your life easier. In fact, the other day, it was like it was like a couple days ago, I was forced in a situation where I had to write a slideshow from scratch because it was super custom. And I was thinking like, I'm not really excited about writing this slideshow, I'm just going to hack together, maybe I should, you know, fork someone else's and hack together, I don't want to write one from scratch. And then the more I was thinking about how custom the slider is, I just didn't want to have to deal with that. So I just wrote it from scratch, right. But then as I was getting into it, I was like viewport units have made this extremely easy. Like it's been so long since I wrote a slideshow that I didn't realize how easy the CSS has gotten for it. Because you have things like viewport units, you don't have to worry about calculating widths and stuff like that, and all that sort of stuff. So the viewport units of which is Vw VHV men V max, are new ish. They've been in longer than I think people realize, but newest units that just like pixels or percentages are used for sizing things, the only difference is is that these are about the viewport. So if you were to say something is v w, a 100, then that's going to be the width of the viewport, right? It's going to be with 100% of the viewport. If it's Vw 90, it's going to be 90% of the viewport width. So it's important to know that these are always relative to the viewport themselves. So if you say something's v w or 90 Vw, right, and you want it to be just 90%, it's important to know that it's going to be 90 of the viewport not 90% of its container, or whatever it's in like that. So occasionally, you might think of why would I use percentages? Well, percentages are relative to the container, the VW VH relative to the viewport, - -83 -00:42:19,380 --> 00:43:05,900 -Wes Bos: I really like these viewport units, specifically for one thing, and that is perfectly centering something inside of a page. And the way that I do that is I will grab the body and the HTML tag and put a min height of 100 Vh on it. Because by default, the body I think the HTML tag will only be as high as the content that is inside of it. Yep. So by setting it, setting a min height of 100 Vh will automatically make it as high as the browser is. And then if it's higher, it doesn't matter, because that's a min height, right? And then you grab your body, and you can display grid or display flex and then justify and align center pops that thing right in the middle. I use this all the time, because I always do like these tiny little demos, where it's just like one thing on the page. And I want it to like look good. So you just center it and it looks good. - -84 -00:43:06,030 --> 00:44:02,490 -Scott Tolinski: Yeah, yeah. And I use v H. Again, I mentioned earlier in the episode, I use this all the time on my main element to just say 80 Vh. And that way, you're never gonna have a situation where the footers come in way up. And if your content isn't tall enough, it's like you know, it's not gonna scoot up there and look really weird to give them sort of main area of your site, the standard sort of height. And I love to use this for stuff like that. I remember, it's just like the the sticky footer where you're trying to get the footer on the bottom of the site or something that used to be really yeah, just no fun to do. There was like a billion. Yeah, I remember just thinking like, this is so dumb, I have all these like extra div elements, and percentages, and whatever trying to get this this footer to be sticky, negative margins, and whatever you are doing there. So again, these viewport units are just totally invaluable to me. I use them constantly, especially when just trying to work in anything that relies on the viewport itself. - -85 -00:44:02,580 --> 00:44:27,180 -Wes Bos: Yeah, I actually use them a lot in like mobile typography. Because one thing like, you don't even have to be thinking about what is 100%. But if you grab like an h2 tag, and give it a width of like six v w, then as you resize the width of your, as you resize the width of your browser, the text gets smaller. And that's almost exactly yeah, here. Let me let me send you a pen. No way. - -86 -00:44:27,210 --> 00:44:28,710 -Scott Tolinski: I did not know this. It's like a fit. Yeah, - -87 -00:44:28,920 --> 00:44:35,730 -Wes Bos: I use this because like sometimes I find myself like writing like seven or eight media queries. make it smaller as I go along. - -88 -00:44:35,730 --> 00:44:38,280 -Scott Tolinski: That is that is blowing my mind right now. - -89 -00:44:38,280 --> 00:44:38,910 -Wes Bos: Okay, hold - -90 -00:44:38,910 --> 00:44:56,370 -Scott Tolinski: on. Where's slack? Whoa, whoa. This is like a Wayne's World to do. I am blown. It's blown my mind right now. Yeah, so those those of you listening, I hope you've learned a lot from this episode was I just learned something very valuable. Something I'm gonna be using all the time. This is cool. This is very cool. - -91 -00:44:56,640 --> 00:45:23,880 -Wes Bos: Yeah. So what it is, is you just grab like an h2 tag, say font Size six v min, or sorry, six v w. And it will just make this the font size, like, you know, you play with it until you find like a happy size. And then as the screen size gets smaller and smaller, your text will just immediately get smaller as well. And what I found is that you don't have to fiddle with font size at any breakpoints, because it'll just like it'll kind of scale down with the, with the thing as well, which is pretty cool. - -92 -00:45:23,910 --> 00:45:25,110 -Scott Tolinski: Gosh, darn it. That's cool. - -93 -00:45:25,140 --> 00:45:34,410 -Wes Bos: That's cool. Go to go to Kiko dot info. This is my keyCode website. and resize both the height and the width of the like, hit - -94 -00:45:34,440 --> 00:45:38,760 -Scott Tolinski: hit a code, any key, any key, press the key, any key got it. Yeah. - -95 -00:45:38,790 --> 00:45:41,250 -Wes Bos: And then, and then resize the height and the width of it. - -96 -00:45:41,280 --> 00:45:45,270 -Scott Tolinski: I'm resizing the height and the width, I'm grabbing from the bottom right, and it is glorious. - -97 -00:45:45,750 --> 00:46:27,180 -Wes Bos: Yeah, so the the size of the key code I'm using, I'm using V, let me double check what I'm using here, I'm using v min. So I'm saying what v min will give you is it will give you the minimum of the width or the height. And meaning that if the if the height is smaller than the width, it will give you the height if the width is smaller than the height, it will give you the width. And what that does is if if the you sometimes run into situations where the user's browser is really short and wide, or the user's browser is very tall and skinny. And making type fit on that is really easy when you use v min. So go to Kiko dot info and just resize your browser on both axes to see that - -98 -00:46:27,360 --> 00:46:49,470 -Scott Tolinski: nice, this is great. This is super bad. And you can use these things to with like calc or any of that stuff do you know modify the value, you could say this is 90 v h plus five pixels. If that's you know, you have a five pixel thing going on or something like that. There's just so many cool things you can do with these viewport units for myself using them just very, very frequently. - -99 -00:46:49,590 --> 00:47:12,900 -Wes Bos: Yeah, before we had grid, I would use them a lot to do like the fix sidebar. Because if you wanted a sidebar to be 500 pixels, and then you wanted the rest to be the rest, you would you would say the width is 500 pixels, and then the rest of it would be 100 vw minus 100 pX, so you can mix and match units there and it will just work out. So isn't the web. Awesome? - -100 -00:47:12,930 --> 00:47:27,330 -Scott Tolinski: It's so awesome. And you know, this is the ironic CSS is awesome episode. I mean, maybe that's what it should be called. Because it's so it's so good. I I've always been a fan. But man, modern CSS. Let me tell you modern CSS is excellent. - -101 -00:47:27,960 --> 00:47:35,040 -Wes Bos: So I think that's all we've got here. I think we should do an entire episode. I don't think we've done an episode on Flexbox. Have we? - -102 -00:47:35,040 --> 00:47:40,650 -Scott Tolinski: I don't think so. No, we haven't. We can call it flex and with the boys. Like - -103 -00:47:41,550 --> 00:48:09,360 -Wes Bos: people get angry last time we said that. So we can call a flexi with the boys are. And I think we should also do a Flexbox versus grid in my CSS Grid IO series. I have a whole video detailing the differences and the same ease of them. Yeah. When do you think it's worth having a episode on the differences between the two as well, because they do have like a large overlap. But then they also do their own thing as well. Yeah, - -104 -00:48:09,390 --> 00:48:18,480 -Scott Tolinski: very specific use cases. And I don't know if you saw but it looks like subgrid is moving along nicely. So maybe we have a little bit more to talk about in that regard as well. - -105 -00:48:18,720 --> 00:48:22,530 -Wes Bos: All right, I'm gonna add a subgrid hasty treat to the list. - -106 -00:48:22,590 --> 00:48:50,010 -Scott Tolinski: dope. Cool. Sounds good. Well, I hope everyone enjoyed this episode on CSS positioning. Let's know if you have any more questions or sort of weird use cases about CSS. Again, this position stuff, a lot of this stuff on this list that we were talking about got totally invalidated as being issues anymore, because of modern sort of stuff. We don't have to worry about floats. We don't have to worry about any of that stuff. We have things like position sticky we have things like viewport units to make our lives so so much better. - -107 -00:48:50,490 --> 00:48:52,020 -Wes Bos: You got a sick pick for me today. - -108 -00:48:52,350 --> 00:49:17,040 -Scott Tolinski: I do and I have a podcast and now my podcast recommendations have been well received here. So this podcast is a little bit different because it has an end date. It's not a continuous one. It's like a mini series and then sometimes these mini series podcast I like don't want to get invested in but there's been a few lately that I'm like really loving the whole the whole thing we're a podcast is only 10 episodes and then it's done right? - -109 -00:49:17,220 --> 00:49:17,910 -Wes Bos: Yeah, yeah. - -110 -00:49:17,910 --> 00:50:52,650 -Scott Tolinski: Then I end up having a bunch of these these podcasts and long my thing but this particular podcast is on a topic that I'm very, very, very interested in and that's art. heisting art heists. This podcast is is from wb you are in the Boston Globe. It's called last scene. And there's this art heist. It's one of the most famous art heist in history took place in Boston. The Gardiner Art Museum was robbed of Vermeer and some Rembrandt's or I think it was a couple Rembrandt's and how much other stuff that was like sort of inconsequential but you know, important nonetheless. And it's like the most expensive art heist unsolved art heist right? In this podcast is 10 episodes and it sort of goes over the whole story how it happened, you know, who are the main players and it is fascinating. I've always like really been interested in this art heist, in particular, the gardener eyes to art heist is something I've watched documentaries on, I've watched episodes of whatever on this podcast really opened it up for me. And they, they, they spend a lot of time on, you know, who are the key players and basically where the investigation is now. And it's just so fascinating. It's a truth is stranger than fiction type of story. And that's what I absolutely love. The storytelling is excellent. They get a lot of interviews, interviews of people that people have never been interviewed before, in any regards regarding this art heist, and you get to just see a lot of angles of investigation and stuff like that. So if you're interested in anything like this, anything that sort of like true Crimea, or whatever it's called last scene. It is top tier podcast material right here. I love it. Awesome. - -111 -00:50:52,650 --> 00:51:35,970 -Wes Bos: That sounds I've heard that advertised on a few different podcasts. That sounds really good. I'm going to check that one out till it's good. I'm going to sic pick my drone video that is now out. I mentioned it on a previous episode. But IBM sent me a drone to do a video with which is a it's a DJI Tello drone. It's like $100 little toy drone. And it was so fun to actually code this entire thing. So what I did is I wrote some JavaScript that would power the back end via WebSockets and UDP and our front end and react. And it was pretty fun. People, people tend to like the video as well. So check it out. I'll put the link in the show notes or I'm just Wes Bos on Twitter. You can find it on there. Hey, that's it for today. Shameless plugs, - -112 -00:51:36,180 --> 00:52:31,710 -Scott Tolinski: shameless plug a little silly. Here, I am going to shamelessly plug my series that will be coming out this month, or should be out by the time you're listening to this. It's so crazy. We're recording in the future here. This series is on design systems will styled components in react if you are interested in styled components. If you are confused about why anyone would like or want to use CSS and JavaScript this course is for you. It's all about how to not only see the advantages of using CSS in JavaScript, but also how to build a design system something that you can elaborate something that you can scale upon and use so check it out. It's going to be available at level up tutorials.com if you sign up at level up tutorials comm Ford slash pro you can save 25% off that yearly subscription and get access to a ton of new series I think I added up it's gonna be like 700 tutorial videos between the stuff that's already there and the stuff that's coming in 2019 so a lot of content check it out little toys comm forward slash bro - -113 -00:52:31,830 --> 00:52:33,870 -Wes Bos: awesome good silliness Scott. - -114 -00:52:33,870 --> 00:52:36,060 -Scott Tolinski: I'm selling selling hat on. - -115 -00:52:36,600 --> 00:53:17,490 -Wes Bos: Another pug has commented that we're too silly. On this podcast where we we give ourselves one minute at the end of the podcast to plug our own stuff and it's actually called shameless plugs but I thought that was a that was kind of funny. Anyways, I'm gonna plug all of my courses Wes Bos comm forward slash courses if you want to learn full stack advanced reactive graph qL e6 for everyone react for beginners or any of my free courses. I've got more free courses than I do paid courses. CSS Grid JavaScript 30 Flexbox learn Redux command line power user markdown you name it. You've got it. Wes Bos comm forward slash courses. Thanks so much for tuning in. And we'll see you next week or get it We'll see you next week. - -116 -00:53:17,490 --> 00:53:18,930 -Unknown: Peace, peace. - -117 -00:53:20,910 --> 00:53:30,690 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax105.srt b/transcripts/Syntax105.srt deleted file mode 100644 index 8e2b0bc1d..000000000 --- a/transcripts/Syntax105.srt +++ /dev/null @@ -1,220 +0,0 @@ -1 -00:00:00,359 --> 00:00:00,870 -Scott Tolinski: Monday, - -2 -00:00:00,899 --> 00:00:03,420 -Unknown: Monday Monday open wide dev fans - -3 -00:00:03,420 --> 00:00:21,660 -yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. - -4 -00:00:23,610 --> 00:00:24,480 -Totally in ski. - -5 -00:00:25,890 --> 00:00:53,400 -Scott Tolinski: Welcome to syntax in this hasty treat, we're gonna be talking all about pointer events in both CSS and JavaScript, which is something you might not know that they they are a thing in both CSS and JavaScript, we're going to be talking a little bit about what and why and what the difference is and why you might want to use them. And, and sort of, you know, some of the potential pitfalls, downsides, any of that good stuff. My name is Scott winsky. And you are listening to this index podcast with me as always is Wes Bos. How you doing, - -6 -00:00:53,850 --> 00:01:12,900 -Wes Bos: buddy? I'm doing great. I'm excited to talk about pointer events. Yeah. Which I had no idea that they were coming to JavaScript, I knew that there was like a unified API for doing event pointer events, but I didn't realize that it was coming so soon, or is already in all of the browser. So I'm excited to talk about it. - -7 -00:01:12,930 --> 00:03:23,640 -Scott Tolinski: Yeah, me too. This hasty treat is sponsored by Sanity. Now your back end data and everything like that it should reflect the type of data that you have on the front end is in your data is not standard. It's not just a text box and a text area and call it quits with that your content is typically much more unique and dynamic than that insanity is the boy life as in bring your own front end data service allows you to store and use your your API as a service. That is totally gives you a full on ability to have your data in the back end reflect the uniqueness of your data in the front end. And so sanity is one of our favorite tools for bringing your data to your front end websites. Nowadays, we have things like headless sites and front end code that's totally optimized with things like Gatsby j. s, and static sites. But the whole back end piece, what do you do with all of that data? Where is that replacement for the blog post where someone can go in and edit their stuff, or even just store all of their data, let me tell you that Sanity is the the solution of that Sanity is just really super cool. They put together a little demo for us. And we became believers immediately after seeing that demo. And it's just so much fun. It allows you to use like actual components in the back end of your site to give you full end customization of the back end of your site. Again, your your front end code, your front end data is not typical. And Sanity knows and understands that and allows you too, have totally custom stuff. So check it out@sanity.io forward slash syntax, and you're going to go ahead and do you're going to get a nice little free plan here. That is free. 99 is as in zero dollars, no credit card required, it's going to give you three users, two data sets. This is the tasty plan, they put this thing together just for syntax listeners. So check it out at Sanity dot i o forward slash syntax and check it out. Seriously, this is one of those tools that when you're looking for where do I host my data with this thing, Sanity should be right at the top of your list. So you want to check this thing out as entity IO forward slash cindex. - -8 -00:03:23,850 --> 00:05:01,820 -Wes Bos: Awesome. So let's jump right into pointer events. pointer events are in CSS, and they are in JavaScript. So we're gonna do an explainer episode explain what both of them are. So we'll kick it off with CSS and CSS, we have this thing called pointer events. It's a property it's been around for a long time. And it's it's well supported in all of the browsers. And essentially, it allows you to just ignore the cursor or the clicks on an element. So if you have a div that is overlapping something sometimes, like let's say, for example, I've got an image tag, and that image tag is overlaying some like I'm working on my new website right now. And I'm going to overlay some grunge texture overtop of some of the text. However, I don't want to make my text not selectable, because that's not a good thing to do on your website. And if someone were to try select the text, they would actually be dragging the image instead of trying to select the text. So what you can do is you can select an element and you just say, pointer events, none. And what that will do is it will tell that it'll tell the mouse and any mouse events that you have in JavaScript, the default ones like clicking links, or selecting text or custom ones that you've built in JavaScript, it will tell it just to ignore that element as also, that's really all there is in CSS, you can say pointer events, none to allow the mouse to be totally ignored on an element. And then you also have Porter of pointer events auto, which will flip it back to the default. There's some other other ones that we have here, visible, visible painted, visible stroke, fill stroke, those are all for SVG, which I would imagine would be very helpful in doing some sort of graphing where you only want people to be able to to click on certain parts of the SVG. - -9 -00:05:02,250 --> 00:05:55,110 -Scott Tolinski: Yeah, I mean, I use pointer events, none a lot in animation, or just typically visual flourishes, things that are aren't like important to the site, and maybe something that is sitting on top of another div. And maybe you don't want this thing to interact or affect how you know, it is your other actually useful elements on your page, especially elements that are like transitioning outwards, right? If something's it's fading out, or whatever, maybe it's still sitting on the top of everything, you don't want your users to not be able to click something, even though you know, the opacity of this thing is at a point 05. And it's just about done. And user goes to click on it, and he can't do anything. So on transition out states, I'm almost always putting a pointer events, none on them just so the user can't interact with something that's on its way off the page. It's also useful on things like disabled buttons, right? You don't want your disabled button to register any sort of event. You just pointer events, none on button. There we go disabled. - -10 -00:05:55,350 --> 00:06:42,930 -Wes Bos: Yeah, I actually tweeted about this a little while ago, I'm like, why is there not a like actions event? None. Because I was I had the sweet idea to, I wanted to disable an entire form element. And I was like, oh, I'll just give it a class of disabled and say, pointer events, none on it. But then what I figured out is you can still tab through, you can still use your keyboard to submit the form. Because it's pointer fence. It's not, it's just his mouse, just mouse, it's not keyboard as well. So there's no like keyboard events, none that you can turn on to it. The solution to that is if you wrap your entire form all of the contents of your form in a field set the fields that will accept a disabled attribute. And that will stop you can use the pointer events not to stop people from from messing with it, as well as you can use the disabled attribute from stopping people from submitting the form. Hmm, - -11 -00:06:43,020 --> 00:06:49,860 -Scott Tolinski: interesting. I'm always taking care of that stuff with like a JavaScript to check, you know, field or something. But they had an interesting use case. - -12 -00:06:50,070 --> 00:08:38,460 -Wes Bos: So another use case you could have for it is if you have a pop up that you are trying to fade in the problem with trying to fade in a pop up is you generally have to have three states with a pop up, you have to display none on that pop up. And then you have to display block or grid and then set the opacity to zero. And then you have to the third point, you have to set the opacity to one and you can't go from display none to display block and opacity, zero and opacity one in the same fell swoop, you need to have that sort of three step process, which is annoying in JavaScript, because you have to like set a class of opening and then set a class of opening and open like, like two milliseconds later in order to make that transition happen. So one way you can go about it. I know there's there's lots of solutions to this. But one way I thought you could do it is if you set the opacity to zero, and by default, that will hide the entire thing. But per setting opacity, zero does not hide it from mouse clicks, meaning that it's invisible, but it's still there. And if it's overlapping your entire website, users won't be able to interact with your website. So setting a pointer events, none on something that has a zero opacity will make it so that all mouse clicks just go right through that element. So you can't see it. And no a JavaScript events will fire on it. And then when you add a class of open, you just put a pasady one on it and change the pointer events back to all Yeah, which I thought was a pretty cool, I didn't know if other people had used it. So I tweeted it out. And Benjamin de Kock, who's like stripe designer developer does all of the amazing layout said, this is pretty much what I've always been doing. So I thought that was pretty good. And this is actually how I figured out that there was a difference between JavaScript pointer events and CSS pointer events, because CSS pointer events are very well supported. And you can go ahead and use them today. - -13 -00:08:38,490 --> 00:08:45,570 -Scott Tolinski: Yeah, CSS pointer events have existed forever and ever seems like I don't even know when that was that was that added like CSS one? - -14 -00:08:45,689 --> 00:08:47,940 -Wes Bos: Yeah. Let's look it up CSS one, - -15 -00:08:48,870 --> 00:08:50,940 -Scott Tolinski: before CSS to the revenge. - -16 -00:08:51,390 --> 00:09:04,400 -Wes Bos: So if you look at pointer events on Can I use, I was disappointed to see they weren't in Safari. And that's how I found out that there. Those were JavaScript pointer events. And if you scroll down, you'll see CSS pointer events. Oh, and - -17 -00:09:04,439 --> 00:09:10,950 -Scott Tolinski: their little what it says, I don't know. Ie 11 was the first version to support pointer events and IE, is that - -18 -00:09:11,010 --> 00:09:15,480 -Wes Bos: in CSS? Yeah, yeah, so like they're not like they're not super old. - -19 -00:09:17,100 --> 00:09:18,690 -Scott Tolinski: See chrome version. You had them. - -20 -00:09:21,390 --> 00:09:24,090 -Wes Bos: Firefox three you rolled out Yeah, - -21 -00:09:24,210 --> 00:09:28,830 -Scott Tolinski: I can't believe that that iE 11 really took it that long to get them I'm surprised about that. - -22 -00:09:29,130 --> 00:09:51,840 -Wes Bos: Ooh, there's a carrot color property in CSS that's sick. Anyways, that's not a really good pointer events but they are very well supported the only thing they're not supported in is Opera Mini which is not issue just because of that's not what Opera Mini is over a mini is a stripped down text based browser. So it's not like people are always like oh up or mini but like that's not you look into Opera Mini is so you don't need those features there anyways. - -23 -00:09:51,870 --> 00:09:54,630 -Scott Tolinski: Yeah. And how many people are using Opera Mini anyway? - -24 -00:09:54,920 --> 00:10:10,550 -Wes Bos: Go 2% of the globe. So it's not nothing but those those 2% are you They're using it for a reason. It's because they're on a slow internet connection and they need something in the middle that will then strip out all of the images and or compress the images and strip out all the CSS and whatnot. - -25 -00:10:10,860 --> 00:10:16,260 -Scott Tolinski: Okay, well, maybe I'm, maybe I'm wrong about upper there. That does seem like a totally valid use case. - -26 -00:10:16,520 --> 00:10:37,110 -Wes Bos: Yeah, maybe we'll do a hasty trade on what is Opera Mini. And maybe we'll open up our but I've used browsers like this in the past, back when I had my Blackberry, where what happens is, there's a service that sits between you and the server, and it will then deliver you a compressed version and a dumbed down version, not dumbed down. But basically, people are just trying to get the content out of it. - -27 -00:10:37,200 --> 00:10:40,950 -Scott Tolinski: Yeah. So that's pretty cool. I wonder how that works with a single page apps? - -28 -00:10:41,130 --> 00:10:49,280 -Wes Bos: I don't know. Because it for me does support JavaScript. Maybe I should just download it somehow and figure out what does these websites work? - -29 -00:10:49,380 --> 00:11:54,390 -Scott Tolinski: Yeah. All right, cool. Well, let's get into JavaScript pointer events, which are a little bit different. Because you think is CSS Prime events is just being hate registered a click or whatever we can interact with it or not interact with it, or JavaScript pointer events are essentially sort of the modern take on the the clicker touch a mouse events that we've had for so long, right? Instead of mouse down or, or, you know, touch or whatever like that, we're now able to use pointer events, which account for things that are relevant in the year 2018, such as we have no longer just, you know, a mouse and keyboard, we have a mouse, potentially a pen, if you're on a tablet, or you know, those giant note phones, or you have touch. And so this API allows us to interact with websites using the tools that we're using in the year 2018, or 2019. That is mouse pointer touch. And I think this is pretty cool. It gives you all sorts of things like pressure and tilt, and all stuff like that. But not only that, but it encapsulates all of these things in one API, rather than having to have these separate events for different things are writing some sort of code that aggregates that. - -30 -00:11:54,540 --> 00:12:12,180 -Wes Bos: Yeah, I guess it's funny, because we had clicks, and then you had touch. And then you had the ability to have multi touch, which I think Safari can and I think chrome was walking track up to like, I think it's like 21 different touch points. So I haven't got my toes out to try it yet. But I was asked Should we - -31 -00:12:13,050 --> 00:12:14,730 -Scott Tolinski: get those piggies man, let's get them gone. - -32 -00:12:15,900 --> 00:13:14,640 -Wes Bos: You should be able to use the like, many, many touch points on a website. And then like, like Scott says, We have we've got pens, those pens have different pressure gum with your finger on safari, you can you can tell somebody made a scale with the touch sensitive Safari API, which I thought was amazing. Oh, cool. They figured out like like, what is the the pressure of different touch points on safari? And then if they just laid their phone flat, and they put an item on top of their phone, and they registered the amount of force with that touch? And they kind of figured out how many how many grams or whatever that thing was, which I thought was so cool. Yeah. And then there's like, there's there's game pads as well. There's the pointer events API doesn't seem to encompass gamepad, there's a separate API for using game pads. But I would imagine that like even if I think about like the Wii mote, yeah, the you know, the remote like follows you around, that would probably be encompassed under pointer events as well. - -33 -00:13:14,670 --> 00:14:09,390 -Scott Tolinski: I'm really interested in that. Because one of the projects I did in in school via software called max MSP was using we modes to control like, I was like video manipulation and audio manipulation software that I had written. So I made like, essentially like a drum kit. And then it was rigged up to an audio application Ableton Live. And then if I were to click the V mode trigger, and like whip the Wii mote based on like how hard I whipped it, the accelerometer data would come in, and it would like totally destroy the audio, it was like a really cool thing. And like, sometimes I wish that that stuff was more capable in the browser. So I'm really interested in exploring more of this stuff. And now, you know, maybe potentially getting some of that data. I'm sure someone's written some sort of wrapper API for the infrared data for something like a Wi Fi motor, or joi con or something like that. But I think there's like alternate interfaces are so interesting. - -34 -00:14:09,630 --> 00:14:19,980 -Wes Bos: Totally, there is web, Bluetooth and web USB, maybe that would be a fun little episode where we each order something that is USB base and try to build something with it. And just in the browser. - -35 -00:14:20,040 --> 00:14:21,720 -Scott Tolinski: Yeah, I'd be totally down for that. - -36 -00:14:22,830 --> 00:14:35,160 -Wes Bos: Let's talk about what events we do have here on the pointer events. So there is over which is fired when the pointer device is moved into n elements, test boundaries. And what is hit test. - -37 -00:14:35,160 --> 00:14:42,630 -Scott Tolinski: Let me see what seems like more of a mouse based thing or you know, does this pen does it track when the pen is hovering? That's actually an interesting point. I wonder if it does. - -38 -00:14:42,660 --> 00:15:31,500 -Wes Bos: Yeah, so the hit test is the process the browser used to determine a target element for a pointer event. Typically, this is determined by considering the pointers location, also the visual layout of elements in a document on a screen. I'm not sure I understand what that means. I'll look into it. This is fairly new to me. I've I've always just done in the past, I've coated it with mouse. And then I use the touch events to sort of supplement that and provide a bit of a better experience. But it looks like like I bet once Safari push it ships this thing or using the polyfill. We'll talk about that in a second like this, we won't be writing click events much longer, we're going to be using pointer events. So there's over, enter, down move. So move is what you're tagging. Because it's potential that the the stylist will move over the screen, but you're not actually touching the screen. So that you need to be able to keep track of that, right. Yeah. - -39 -00:15:31,550 --> 00:15:37,290 -Scott Tolinski: So move move is firing when you're hovering and not when you're clicked down or touched down or on touch? - -40 -00:15:37,320 --> 00:16:19,740 -Wes Bos: Yeah, well, I would imagine, with a pen, if your pen is close enough to the screen that is registering but not touching the screen, that would fire a move event, I think that would probably fire a move event when you're touching it as well. But you'd have to have a Boolean of if it's down or not, up, cancel pointer out where I guess where you if you were to pull the pull the pen totally away from the actual screen pointer leave. And then there's get pointer capture and lost pointer capture. So it's, it's a lot more complex. events themselves can can be pretty complex. But this gets a lot more complex. In most cases, you probably won't need all of these. But it's it's kind of nice to have a simple API that encompasses all of these different types of inputs. - -41 -00:16:19,860 --> 00:16:51,240 -Scott Tolinski: Yeah. And again, I mean, everyone's using new inputs now. And you have to account for that. And one of the cool things is that we know, have to account for them individually as one API, one API, and that I think that's the the dream right there. That's like, there's some cool stuff. I'm really excited about this, because I have an iPad with a pen. And it's like making me want to go do some experiments with this thing and see, yeah, we have this, this pen will interact with this API. Maybe it's worth, like putting together some sort of a playground for this stuff. - -42 -00:16:51,630 --> 00:17:29,190 -Wes Bos: Yeah, because so I've got in my JavaScript 30 course I've got like a canvas demo. And based on how long you're dragging the width of the the canvas painter gets bigger and smaller, and the color of it just changes. Like it goes through the entire rainbow. Yeah. Now I'm thinking like, could you? Could you modify that demo to take in pressure, as well as I don't know some other like, tilt? Because you're telling me or it shows me in the docs here that you can get the tilt of the pen? Yeah, based on what angle? You're tilting the pen. Could you map that to the rainbow and, and change the color based on that? That'd be pretty neat. - -43 -00:17:29,400 --> 00:17:35,490 -Scott Tolinski: I wish I had more time for just playing around with this stuff. Because that all sounds like a lot of fun. That sounds like a lot. Yeah, - -44 -00:17:35,700 --> 00:17:53,970 -Wes Bos: you should do like a hackathon day where you just put out a video of a couple things that you would love you've been meaning to try. Yeah, and make a video out of it would be pretty fun. Yeah. Cool. Um, what else about this pointer events? I think that's that's about it. It's pretty simple to understand. I think that Oh, we'll talk about support. - -45 -00:17:53,970 --> 00:18:40,470 -Scott Tolinski: What is the bummer? support? support? Yeah, it's actually pretty widely supported. And it's in IE 11. It's been in Chrome since like 2016, and Safari, like what's going on safari? Why? Why can't you get this together? Safari does not have support for this. However, there is a polyfill put out by the jQuery team called Pep. Pep stands for pointer events. polyfill. Yeah, thank Yeah, I mean, that makes sense. So unfortunately, it's not in everything, which you would want it to be. But no, it's not in Safari. And even in the like, the future version of Safari on Can I use is read that. So there is some caveats there. I think they're working on support for it. I think you might have a little bit more info on that was, - -46 -00:18:40,550 --> 00:18:50,570 -Wes Bos: yeah, if you go to web webkit.org, you can you can see the status of what they're currently working on. It says in development. So I'd imagine in the next major release of - -47 -00:18:50,600 --> 00:19:00,300 -Scott Tolinski: Safari, we'll get it now. Excellent. Here, according to Can I use the next major release of Safari will have it available, but only under an experimental features flag. - -48 -00:19:00,560 --> 00:19:50,330 -Wes Bos: Okay, so that means it's probably just about done. They want to test it out before they push it, which I don't mind because, like, what used to happen is that they would just release it and then or it would be released under like a vendor prefix. Yeah. And then people would implement it and then there'd always be like, a, you have to like it works but so far it does it in a weird way. And and now so what they're doing is they're just like, not releasing it to anyone unless you want to try it. And I think that's a better way to do it. So that it's for sure. solidify by the time it gets into all the browsers. And I don't mind because the the polyfill I've talked to a couple of people actually use this in real client facing projects. And the polyfill have worked just swimmingly, right, it's JavaScript, so you can probably fill up pretty easily. So it's, I think it's probably something that we can start using today. If you are okay with including the polyfill. - -49 -00:19:50,360 --> 00:20:01,470 -Scott Tolinski: Yeah, yeah, I'm excited. I'm gonna start using it. I'm gonna start trying some stuff out. I'm gonna start getting getting down with some Pen Pen action going on and some interactive stuff here and see how it works. It looks cool. Yeah, - -50 -00:20:01,530 --> 00:20:13,680 -Wes Bos: I've got the Surface Book here, which has a pen. And I think that that does pressure as well. So that would be maybe over the holidays if I want to have a little fun little fun with it. I'm gonna pull that thing out. A little - -51 -00:20:13,680 --> 00:20:17,190 -Scott Tolinski: fun with the pendant surface. I'm done for that. Awesome. Cool. All right, well, I - -52 -00:20:17,190 --> 00:20:28,340 -Wes Bos: think that's it for today. Hopefully you learned a thing or two. If you have any other use cases for pointer events that you have found handy. Make sure you tweet them at syntax FM and we will retweet them so that everyone's knowledge can get bigger. - -53 -00:20:28,380 --> 00:20:41,300 -Scott Tolinski: Yeah, I want to see some some code demos and examples too. If you've you hack together something that's like fun with this, or if you want to, if this sounds interesting to you go hack together something I want to see some fun examples of what people are doing with this cool stuff. - -54 -00:20:41,520 --> 00:20:47,220 -Wes Bos: Absolutely. All right. That's it for today. Thanks for tuning in and we will catch you later. Please - -55 -00:20:49,200 --> 00:20:58,950 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax106.srt b/transcripts/Syntax106.srt deleted file mode 100644 index 08ebbedc0..000000000 --- a/transcripts/Syntax106.srt +++ /dev/null @@ -1,332 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,500 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,529 --> 00:01:09,620 -Wes Bos: Welcome to syntax and Happy New Year to everybody. I know that our first show of 2019. But it is the episode where we're going to take a look back at what happened in 2018. In the web development world, as well as what are we looking forward to both our own personal goals as well as our predictions for what will happen in 2019. Today's episode is sponsored by two awesome companies. The first is century which is going to track all of your client side and server side errors and exceptions and provide you a whole bunch of data around what happened when this error happened. As well as Manning books. They've got a 40% discount for all of y'all at deals.manning.com. For slash web dev. Today we are spotlighting a book called electron in actions design I get a question about all the time. Do you have an electron course I don't. But this looks like a fantastic book to learn how electron works electron is the would you describe electron now Scott? - -3 -00:01:10,259 --> 00:01:54,660 -Scott Tolinski: electron is basically a way that you can publish desktop apps for both Mac Linux windows, whatever via the front end tools that we know and love like JavaScript and node j s. Well, I guess no J's is not a front end tool, but JavaScript, HTML, CSS, that sort of stuff to build actual legit applications. What's awesome about electron is that you can reuse components that you've built and things like that and react and, and oftentimes it makes having a web app and turn into a desktop app very, very easy. I love electron. It's one of those things that we often maybe talk a little bit about sometimes is like, maybe these apps are eating up the CPU or something like that. But a well made electron app is a well made app. I mean, VS code is is proof of that. - -4 -00:01:54,749 --> 00:01:58,740 -Wes Bos: Yeah. Awesome. So check those out. So How you doing today, Scott? - -5 -00:01:59,099 --> 00:02:05,850 -Scott Tolinski: I'm doing good drinking water from a giant boot. And I'm loving 2019 living the 2019 life, - -6 -00:02:05,939 --> 00:02:11,610 -Wes Bos: even though it's still 2018 on our recording this. This is one of the last of that energy, though. I'm - -7 -00:02:11,610 --> 00:02:23,250 -Scott Tolinski: feeling the 2019 energy. Yeah, we're not not just writing the show notes for this. This episode got me really hyped to start this year off, right? How about Yeah, - -8 -00:02:23,430 --> 00:03:08,759 -Wes Bos: yeah, totally. Me too, as well. It's it's nice to like, look back at the year and see everything that you've accomplished, as well as where we've moved as an industry in general, in webphone. I look back at the last year's version of this episode. And I was just looking at like, it was very like, not early days, but a lot of people were starting to notice things like next and Gatsby and one of our predictions was that tooling will get better. And I'm just like, ah, we've read a year is not really all that long. But we've really come a long way in terms of our industry, and just just a year. So let's get on into it. The first one is we're going to talk about what was hot in 2018. We'll take a look back. And then we'll take a look at forward what what looks what 2019 is looking. So you want to kick it off there? Oh, yeah. - -9 -00:03:08,970 --> 00:04:50,820 -Scott Tolinski: Yeah. And it's funny, because you I mean, you you just briefly mentioned it. But one of the things that I think was hot in 2018 was just really that tooling overall got a lot better. I mean, everything from mean, you think about even the improvements to things like create react app, and view csli. Next JS Gatsby parcel Webpack. For made it configurations easier to get started. I mean, there's just so many things built around this that have just again, like we even predicted, and we said that this kind of stuff would happen. Because you know, honestly, you don't need to write Webpack config from scratch for every single project, right? I mean, you've probably written one. And sometimes this stuff can be abstracted out into its own ideas or platforms, like create react app. And these, these things have totally grown in 2018 and even grown within themselves and just improved, improved, improved. And we recently just saw the crate react app to come out, which made a lot of things a little bit nicer and easier for everyone. So this was a big theme, I think, in 2018. And the amount of time that I spent about tooling is gotten way, way less than and many times now when I'm starting a project or even like maybe a quick code example or something like this. I do one of two things. I either just fire a parcel, because it's superduper easy. You just include a file and then it just starts doing its thing or I had to an online platform like code sandbox or something like that, and just fired up there. But almost never Am I thinking about tooling to start a project. Or maybe even it's Gatsby, I guess the most sites I did for client work or for myself this year was in Gatsby. And again, you're not thinking about the tooling there. - -10 -00:04:50,999 --> 00:06:29,100 -Wes Bos: Yeah, I'm just thinking back to everything I built this year and I did a workshop on progressive web apps that use parcel I built a bunch of sites using next JS I'm starting my own Gatsby base site right now, I don't think that I wrote an entire line of a config, I probably wrote a little bit of Babel config here or there. Yeah, I did write a little bit of Babel config in my advanced react course. But like, I think that was one of the hugest groans and pain points. I remember saying, like, near the start of this podcast, it's gonna get better. There's no reason why we should have to be writing this every single time we started an application. And it definitely has gotten gotten way easier. Even what pack itself is moving towards the sort of zero config thing where you don't necessarily need to be able to write these things. I'm so excited to just look back and say, like, wow, this stuff is so much easier than it used to be. And it's only getting easier, even like Babel with the preset envy. No, that's probably not this year. But that makes it really, really, really simple parcel parcel is just over a year old now. And it's making things really simple. They're doing some really cool code splitting stuff with parcel two that is going to be coming out. So I think even looking forward into 2019, this stuff is just going to get more powerful. Because I think they've they've reached the easy, and now they're looking at like what can we do to make things more more powerful, because I know, Dan Abramov has been tweeting some stuff with the what was it his like hot reloading, and whatnot. He's He's reworking how that stuff works to work with react hooks. So it's a good time to be alive, Scott? - -11 -00:06:29,580 --> 00:08:05,760 -Scott Tolinski: Yeah, I know. And then, man, everything. It's almost like you wake up every day, and it gets better, better and better and better. And by the end of the year, you look back, and you're like, Wow, I can't believe how many things have improved or grown. I mean, as even as we're talking or whatever, I'm adding things to this list that we have here already. Because it's like something else pops into my brain, right? I mean, things are just constantly getting better. And one of those things, I think that got better in 2018 was graph QL. Overall, I mean, yeah, it got easier, it got more accessible to pick up and just start experimenting with more graph qL API's exist now. So there's more that you can can play with, if you just want to try it out. platforms like Apollo just continue to evolve and impress like, Apollo has just continued to see growth. And and that's one of those things I'm excited for this year is to see even, you know, the continued growth there. And then that world, but also, I mean, you mentioned that you're doing a Gatsby site, I did a lot of Gatsby, this this year, Gatsby really made graph qL accessible, I could imagine that a Gatsby sites were maybe a lot of people's first experience with graph qL because he to build a Gatsby site, you don't need to use graph qL at all, you can do use it with the React stuffs and some static data, whatever is in there, and it works and build your site. But maybe you want to try out querying on a graph qL API with a markdown file or something like that. And Gatsby makes it super duper easy to get started with that. So these kind of tools, I think, just made Gatsby, you know, into the or not Gatsby graph qL into sort of a more usable space for a lot of people. - -12 -00:08:05,970 --> 00:08:46,669 -Wes Bos: Yeah, absolutely. I think because Gatsby doesn't require you to implement the API yourself, or implement resolvers or have to tangle with authentication. Yeah, it's it's just a query, you're just pulling data. I think that's really cool. I also have become a big fan of the graph. qL playground. Yeah. Which is like, it's like graph qL graph. Cool. How do you say that, like the graphical graph, graphical. It's like the graphical interface that you get with any graph qL instance. But this has a much nicer interface to work with it. You can have tabs, so you can save older queries. It's just such a nice little I have a desktop app installed. Anytime I'm working with graph QL. I boot that thing up? And - -13 -00:08:46,669 --> 00:09:10,740 -Scott Tolinski: yeah, I don't like the off off piece of that, though. Like with graphical. Yeah, in Apollo it like, had my auth tokens set up automatically. And like, No, I have to do it manually. And then, like, I have to do it each time I open graph. Oh, yeah. The only downside for me the interface and the saving all that stuff is great. But I wish it auto had my auth token in there just like graphical did. - -14 -00:09:10,860 --> 00:09:19,260 -Wes Bos: Yeah, that would be That's true. Because anytime I have to do that, I have to take my tokens and paste them into the HTTP headers, which is annoying. Yeah, if you want to do that, - -15 -00:09:19,350 --> 00:10:09,919 -Scott Tolinski: Yep. Yep. One of the other cool things in this space has been graph qL companies, especially ones that are doing maybe like API's as a service, and making this data available via graph. QL. So then, just like we mentioned before, with like Gatsby, you don't have to write your resolvers and mutations and stuff like that. You don't have to set up some sort of graph qL API. So these services like Hasura Prisma, take shape graph, CMS content vault has a graph qL API coming out. A lot of this stuff. I think this space is has been growing and you know, in my predictions for 2019 I think it's gonna continue to grow in this space, but really just making it super easy. We're easy to set up sort of a back end for these modern sites, and even maybe just like build a Gatsby site or something like that. So yeah, these these services have all evolved. And yeah, - -16 -00:10:10,230 --> 00:10:28,260 -Wes Bos: yeah, I had a note little later on. And then I was gonna talk about it now. But I think this whole, like headless space is so hot right now, a lot of people are taking a look at all of the different platforms, even if it's not like a, like a paid platform. There's lots of open source platforms out there. You hear a lot of people talking about headless WordPress right now as well. - -17 -00:10:28,279 --> 00:10:32,539 -Scott Tolinski: Yep. There's a WordPress graph qL API plugin. - -18 -00:10:32,760 --> 00:11:22,799 -Wes Bos: Yeah. And it works well with advanced custom fields, which is a plugin that a lot of WordPress developers use to create the interfaces and have existing data stuck in it. So it's just like a really cool space. Because I think people are, it's no longer that you build your app in like a server rendered. And then you use react to just like, kind of add additional things are starting to see people say like, I really like this experience of building in view, or in react or whatever. And I'm going to move totally over to the headless, which is, you write your front end in react or view or whatever. And then you just talk to an API on the back end. It's any number of these the headless spaces, even just from the sponsors on our podcast, you can tell that there are plenty of companies that know that this this area is becoming a real hot. - -19 -00:11:23,100 --> 00:12:22,110 -Scott Tolinski: Yeah, absolutely. Also, I mean, another thing that, you know, has gotten evolved is CSS. I mean, CSS is always evolving. And I think in the last episode, you mentioned about that CSS is awesome mug, that's actually correct. Instead of the one where it's out of the thing. I think CSS got more more awesome. I mean, more awesome inside of the actual box. I mean, for one more people are using grid than ever before, which is no surprise, considering grid just continues to sort of become more and more useful as the browser support becomes, you know, more acceptable to be using grid. Now, I've been using grid significantly in 2018. And I personally, I just, I look forward to the day where every single person can reach for grid as the main tool and not even think about anything else other than maybe Flexbox for when Flexbox is appropriate. But I think grid is one of those things that grew in 2018. And every single subsequent year until, you know, - -20 -00:12:22,140 --> 00:12:23,070 -Wes Bos: yeah, yeah, I - -21 -00:12:23,070 --> 00:12:25,770 -Scott Tolinski: think grid is just gonna keep keep on that rise. - -22 -00:12:25,800 --> 00:13:15,600 -Wes Bos: Yeah, I can add some context to this just because in like, November, December of last year, I was finishing up my grid course. And then I released my grid course in January of this year. And when I was building it, it was mostly like a future tech kind of thing. When I released it, at that time, it was still a lot of people saying like, Okay, this is great. I can't wait to use it. I learned it, but I'm not like using it in production. And then now at the end of the year, I'm seeing lots of websites, lots of people say, Okay, I'm using this in production. Now this is actually something I'm able to move ahead. It's totally based on on browser support, I guess as well as people learning it as well. Being able to, to move away from we talked about the people using existing grids based on bootstrap, or people that have had been using Flexbox as a sort of stopgap until we got full grid support. - -23 -00:13:15,809 --> 00:13:29,700 -Scott Tolinski: Yeah. And I would imagine, once you get a taste of grid, if you are able to use it, you're gonna be using it because it is imminent, that positive of a developer experience that once you use it, and you're able to continue to use it. I think it's hard to put it down. - -24 -00:13:29,760 --> 00:13:41,429 -Wes Bos: Yeah, totally. I think like if you were to sum up the hotness words of 2018, I would probably say grid isn't there. I would probably say graph qL is in there. I probably say Gatsby is in there, - -25 -00:13:41,610 --> 00:13:48,240 -Scott Tolinski: dude. Geez, were his deed out. 20 feet out. Graph QL. Gatsby grid. - -26 -00:13:50,039 --> 00:13:52,980 -Wes Bos: The GTE out 2018. That's exciting. - -27 -00:13:53,190 --> 00:15:35,100 -Scott Tolinski: So just like a grid. Another thing that once you try it, you're not going to want to stop using it is sentry@sentry.io. Now Wes and I both use Sentry to track all of our bugs. And let me tell you why. Because once you have that visibility into the things that are happening in your code, it's hard to live without it. In fact, Sentry gives me so many visuals is like what's happening? What are the bugs? What do I need to resolve? What do I need to keep track of Sentry has it all right there for you in a big table showing you when these bugs last occurred, you can look at the last bugs in the last few hours or even the last couple of days and stuff like that, and really get an amazing glimpse into what's happening in your application. And so much so that, well once you start having things published without a system like century, then you start worrying about all of the things that could potentially be happening. Maybe it's these bugs here or there that you're going under the rug. And while the last thing you want is your customers to be the first ones to tell you about a bug so if you want to check out century and we highly recommend you do head on over to century dot o and sign up using the coupon code tasty treat all one word, all lowercase, and you will get two months free. So please do that those two months are enough to convince you trust me. So sign up sentry.io tasty treat as the coupon code, get those two months free and see why we can't live without century letting us know where our bugs are. So okay, so this was the CSS world. What are some more stuff that happened in 2018? Specifically react because react had a big year in 2018? - -28 -00:15:35,370 --> 00:15:47,070 -Wes Bos: Yeah, I was just looking back at the React blog to see what fell in in 2018. And what was before that, because even if you look at things like, we got fragments was that in this year, I - -29 -00:15:47,070 --> 00:15:56,010 -Scott Tolinski: think it was, I don't I don't even know at this point. I know, React is just been a steady stream of improvements totally a couple of years. - -30 -00:15:56,010 --> 00:17:12,300 -Wes Bos: I'm gonna say we got fragments just because we got Babel Babel seven this year. And that's when the easy use of fragments came out. That was great, the big two that we got. And as of recording, this, the hooks is currently being approved. So it's going to come to react. So it's not, it's kind of just a tail end thing. We'll probably talk about this next year on our year in review of, we finally got hooks, and now we are actually using it. And then the other one that was announced, but it's still not rolled out yet still being cooked is suspense. So hooks was the new API that allows you to use state allows you to use contacts, it allows you to do side effects and things like component will mount component did update and component will unmount without having to use a class. So you can just use a regular function, it allows you to sort of disassociate a lot of your stateful logic from your classes and just put them into their own own little hooks, which is nice. It makes sharing things like stateless stateful logic and any any other logic that you have, it makes it sharing it with the other components much easier. What that means is that we are going to see a lot less of high order components, and a lot less of render props. And of course, a lot less of actually seeing classes. - -31 -00:17:12,540 --> 00:17:39,000 -Scott Tolinski: Yeah, and I don't know how much you got to use hooks this year, but I've been using them. And I love them, I absolutely love them. And it doesn't seem like a huge change on the surface. But I would say the cleanliness and just the visual of my code, the readability of my code, the organization of it, the ability to break things out, and things like that have just gotten so much better. I am just I'm totally sold. I'm very, very much. - -32 -00:17:39,480 --> 00:18:09,270 -Wes Bos: I've used them in probably three or four different situations. And I wrote one little custom hook that was listening for a web socket on Mount, updating the WebSocket when change and listening when it was unmounted and had its own internal state inside of that hook. And I just all tightened it up into this nice little thing called use socket. And then that gave me that just pipe to me state whenever the data changed. And I was like, This is tidy. I like this a lot. - -33 -00:18:09,420 --> 00:18:17,040 -Scott Tolinski: Yeah, it's like Lego pieces for functionality, like totally like components where or, you know, just structure and things like that. - -34 -00:18:17,880 --> 00:19:12,860 -Wes Bos: suspense, maybe we should explain what that is, we haven't even had a show on react suspense just yet, because it's still I've had a talk twice on react suspense. And both times I've had to have some major updates to how it works. But the idea behind suspense was or is that you're able to suspend the render of a component based on fetching a synchronous data, as well as being able to disassociate where you fetch data from where you show your loading screen. So generally, your loaders and your fetching data tend to happen in the same place unless you have some weird pub sub set up. And suspense is going to allow higher components to be able to know when its children are fetching data, loading images, loading code, split bundles, it's pretty neat. I haven't used it's still like very, very early days for this, I would I would expect that we probably will get suspense in March, April of 2019. - -35 -00:19:13,050 --> 00:19:44,940 -Scott Tolinski: Yeah. And I'm really excited for server side rendering with it, because that's the that's the one piece, you know, I can't touch any of this stuff on the level up codebase until, you know, full server side rendering picture is there and stuff like that. So I'm really excited for the full release of all these things, and, and really interested to see is how they make server side rendering different or easier or whatever. I mean, things like suspense with code splitting, plus hooks. I'm just feeling like, yeah, this was a pretty sweet year for react announcements. - -36 -00:19:45,150 --> 00:20:19,020 -Wes Bos: Yeah, I'm excited to see what it's going to do to next j s. Because next .js currently has this get initial props lifecycle method that you can fetch on the server, and that's in a sink, but it's only at the page level and if you have a component that is seven, eight, levels deep that you need to like fetch data in for server side rendering, it's a bit of a pain, you have to walk the entire component tree and find any promises inside of that. And suspense is going to do that for you under the hood. So I expect that get initial props is going to be greatly simplified and much more powerful in next. Yes, - -37 -00:20:19,260 --> 00:21:34,980 -Scott Tolinski: yeah, cool. Another thing that we saw was a lot of improvement in the React dev tools, which is, it's a low key underrated thing. You know, when when something has very good dev tools, it always makes your life so much easier. And the fact that the React Dev Tools aren't like stagnating on sort of staying the same as the React dev tools are sort of constantly finding ways to make themselves more useful to you. And one of those things that that came out in that regard was the profiler, which is sort of like a way that you can look more deeply into how your react components are performing how they're taking a time, the sort of hold tree, what that kind of graph called is that called a flame flame. Yeah, flame chart. So the flame chart, just like you have in sort of Chrome dev tools to check the performance of your site in general, but it's all react based, React specific and really, really gives you just an insane amount of visibility to solve maybe one of those lingering slowdowns or something that you're trying to figure out where the heck, this slowdown or this issue is happening. So I'm, I'm just, I don't know, I'm so happy with how the React ecosystem has evolved in all sorts of ways. And again, the dev tools have just made it easier and easier and easier to that was - -38 -00:21:34,980 --> 00:22:40,710 -Wes Bos: so cool, I was looking into what they do, and they show you what caused a trigger. So it'll tell you which piece of state or which problem triggers a rerender, and how long that took. And it's not something you're going to use every day. But you better bet when you hit a really weird bug that's crashing your app, or is causing a leggy interface that's gonna really help you out. We also got the new context API. So context API was solidified in 2018, meaning that we no longer have the older context API that we have, we have the new context API, which allows you to define data in updaters. And anything you want higher, and then access it lower, along with react hooks, this is going to make accessing data anywhere throughout your application much easier. So I think it's funny because we look at all of these things, hooks, suspense, Dev Tools and Contacts API, and they all are focused on both, I guess they're focused both on developer experience, they make our lives easier, but also it makes things better applications at the end of the day, because you're gonna have better performance and better UI specifically in the suspense stuff. - -39 -00:22:40,980 --> 00:24:05,160 -Scott Tolinski: Yeah, better applications easier. If one of those changes to hooks, well, not changes to hooks, but part of the thing with hooks in the context API, I think that's gonna make way more likely for me to use the context API because well, it's a little bit more, I don't know, it's a little bit more succinct than the render prop method and stuff like that. Not to mention, I was doing most of my state in Apollo. But this actually kind of looks very, very streamlined with with the new hooks context. So let's talk about JavaScript frameworks overall. Now, because we do primarily talk about react on the show. But there's been a lot of involvement, or even evolution in a lot of these other frameworks. For instance, svelte, in particular, I think, has been making a lot of noise, you saw it on the state of JS survey, where it showed up as the number one JavaScript framework that didn't like that was the write in candidate. So it was written in and it had the most votes. So speld, I think, is one of these cool things, if you don't know about it, it's basically a JavaScript front end framework that disappears on compilation. So instead of shipping the library every single time, you just ship a code. And the framework itself compiles away. And this is like, compounded when you do things like code splitting, because now when you have a new bundle coming in, it's just that that bundle and not the bundle with the library and all sorts of stuff. So spelt, I think, is one of those ones to keep an eye on in the future. But I think the noise that it made in 2018, is enough to definitely pay attention. - -40 -00:24:05,460 --> 00:25:03,180 -Wes Bos: Yeah, I think also view continue to impress and evolve, it's just getting more and more popular is seeing people that are just like betting their careers on it, which is really cool. It's It's It's I think, like the two big frameworks, now our reactive view, at the moment that might change in a year from now, obviously, there's still lots of other frameworks out there, a lot of people still using Ember, Angular, things like that, but view really, they like sort of came out of nowhere last year, and then this year, it's just like, super strong, super, super evolving. And you see a lot of like, really competent developers putting their weight behind it. What else happened in JavaScript frameworks, I'm just thinking about what the server side look like. And I think it stayed like fairly tame. A lot of there's a lot, no tools around graph qL, but a lot of the stuff is still just based on express that was kind of cool to see not not a whole lot of thrashing. In that we'll talk a little bit more about this. server side stuff in our predictions, though, for coming years. - -41 -00:25:03,450 --> 00:25:43,650 -Scott Tolinski: Yeah, there's a few look sort of oddball things that happened just recently, even well, Microsoft, who was impressing with the Edge browser as well, they just announced that well, they're going to be moving to Chrome based engine instead of what was the one previously called, I forget what it was called. I'm blanking on it. But they're moving to a chromium based system now making it so that essentially, Firefox is really the only player who's not. And for better or for worse, you know, it's gonna make things maybe a little bit easier to think about maybe compatibility wise. But in the same regard, it's definitely said that there's less competition. - -42 -00:25:43,890 --> 00:27:01,710 -Wes Bos: Yeah, that was a bit of a weird one that I didn't see that coming at all. And it's interesting. So for those who maybe didn't hear is that they're going to take the engine out of Microsoft Internet Explorer, and just use the engine from Chrome, which is what happened to opera, what maybe like five or six years ago, and then just couldn't couldn't compete or couldn't keep up with it. And like the like, I don't know, web developer in me is goes, like Scott said, I'm a bit sad that there's less competition. But also, all of the browsers will still take part in the standards progress. It's not like everything is just going to be chrome and Google has, Google has the control over what the web does. Now, there still is a full standards process for that. And all of the browsers are still like, Microsoft still cares about what happens to the internet and what happens to web browsers because it's a major building block of their operating system. So they they care that I don't know, like web payments, make it in or they care that web USB makes it in or whatever it is, is going to be happening. So I don't sweating at all that much. Like part of me is like, Hi, yeah, that sucks. That it there's less competition, but like the actual like, person who writes code in me is going like, Alright, this is good, because now I can finally move ahead and some of these things. - -43 -00:27:01,890 --> 00:27:52,170 -Scott Tolinski: Yeah, I had that I had the same reaction in that regard. There's some Microsoft actually did a lot this year. I mean, besides VS code, which we'll talk about a little bit, Microsoft did so much stuff. They bought GitHub, which is a big deal. But it turns out that GitHub has, since they've been purchased by Microsoft has been steadily adding a lot of really great features. I mean, every time I open GitHub there, it seems like there's something new, that's something that I feel like people have been asking for whether or not it's referencing issues, sticking issues, that sort of thing, and actions and all sorts of just like new updates. It's actually amazing. So I think a lot of people's concerns about what would happen to GitHub after Microsoft purchased, it can maybe be put to rest a little bit because they seem to be doing fairly well with GitHub so far. - -44 -00:27:52,350 --> 00:29:02,100 -Wes Bos: Yeah. And you know, one thing I'm really excited about is that like, so there's all these things like Microsoft is adopting Chrome, Microsoft bought GitHub, Microsoft has VS code. And then GitHub just bought spectrum vector is the kind of like, chat meets form for developers. And it's really aimed at figuring out why are we all in Slack, and this closed platform that deletes everything, and it's not searchable, and it's kind of a pain in the ass. And it's kind of the best thing we have right now. Other than like, using like a discord, or some Git Git or something like that. So spectrum is looking really promising. I'm still not like hundred percent sold on it. That's why I haven't moved my own slack over to it. But the fact that GitHub bottom means that they're saying, yes, there is a problem for developer communities. The old like PHP, Bolton board is dead. And for some reason, we're all on this proprietary slack platform that is terrible for open information. So looking forward to seeing what GitHub is going to be doing with that, which is pretty cool, because Microsoft bought GitHub, GitHub bought things. So maybe we're gonna have paperclip in - -45 -00:29:03,450 --> 00:29:25,560 -Scott Tolinski: spectrum Pretty soon, we can only hope. We also have in VS code also saw a ton of updates. I mean, we sort of briefly talked about this, but VS code, has she gotten better offer, I look forward to the monthly updates, and I'm on the insiders build. So I'm getting them very frequently. But every single time that that changelog comes out, I think everybody is like psyched to see all of the improvements that happened to VS code constantly. - -46 -00:29:25,590 --> 00:29:43,050 -Wes Bos: I cannot believe how quick they are putting it it's almost overwhelming. I'm like, Oh, it's been a month already. How are they putting out this much amazing stuff. And at the same time, the editor is getting like faster and better. It's not like they're adding more features and it's getting bogged down. It's unreal. It is - -47 -00:29:43,170 --> 00:30:20,360 -Scott Tolinski: it is very unreal. It's it's just getting better and better and better. And I think that's going to continue I think there's there's no reason to think that VS code won't just continue to grow and in 2019 and if you want to continue to evolve in 2019, you're gonna want to head on over to deals.manning.com Ford slash web dev. And what you're gonna get is 40% off every book or video course. And that includes a video course on electron intent. vs. Code is built in electron and it is one of the very best electron apps out there. So with more about this deal, this sick deal is with bots. - -48 -00:30:20,880 --> 00:31:08,820 -Wes Bos: Yeah, so they've got all of their books and courses on 40% off with the code syntax 40. I'm going to spotlight a book from Steve Kinney called electron in action, it's going to show you everything you need to know to learn how to build electron applications. It looks like you can learn how to work with multiple windows, building a notes application, using native file style dialogues and facilitating their inter process communication, testing the application having a tray module menu bar library, pretty nifty. I think it's so cool that if you know JavaScript, you can both build a server application, you can build a client side application and you can build mobile applications and now you can with electron you can build desktop applications, which is super cool. I think I'm gonna check this one out myself. Maybe over the holidays. - -49 -00:31:08,850 --> 00:31:18,960 -Scott Tolinski: Yeah, you should because Steve Kinney is excellent. He's the organizer of the dinosaur JS conference, which is like one of the greatest conferences I've ever been to so Steve's a really cool guy. - -50 -00:31:19,170 --> 00:31:37,470 -Wes Bos: Oh, awesome. just sent a follow on Twitter he Steve Kenny on Twitter if you want to follow for more about electron so check that out. If you are interested in electron again as deals dot Manning comm forward slash web dev, use the code syntax 40. All one word for 40%. off at checkout. Thanks so much to Manning for sponsoring. - -51 -00:31:37,800 --> 00:32:27,390 -Scott Tolinski: Nice, cool. So let's keep this rolling into 2019. What are our predictions for 2019? We're gonna see how good we do at the end of the year, maybe? I think that a lot of these predictions, I don't know if you've listened to the rest of this episode are going to be fairly obvious. I think the headless CMS game Personally, I think this is going to get really real in 2019. I think this is one of those things that's just going to continue to evolve not only the platforms that are already existing, but I think more people will throw their hat into the ring, I think there's going to be more platforms that are built and designed for headless CMS stuff that are going to make it easy to just host an API somewhere and just fire up a static site or even a dynamic site or something like that. And I think this is just something that's going to continue to get more and more competitive. - -52 -00:32:27,600 --> 00:33:14,430 -Wes Bos: Yeah, I totally agree. I think also, we're going to see major leaps in the like rails for JavaScript, where you just like install this thing. And it comes with authentication and file uploading, or like the Laravel for for JavaScript, we're probably gonna see. So we had Sasha, on talking about Vulcan j. s, seems like Keystone is actually working on some stuff. Well, there's a couple other players in the space that are looking at the sort of like, you just like have an app with all of the things that you're most people have, like most notably authentication systems, file, uploading interfaces, rolls, you get the point, right. So I'm excited to see where that goes. Because that's been something I've been talking about on this podcast for probably a whole year where I hope that we will see it in the near future. - -53 -00:33:14,670 --> 00:33:56,550 -Scott Tolinski: Yeah, and I think, from what we've seen so far in react over the past year, and what's already been announced, concerning there's just a ton of stuff that have been announced that's not going to be released until 2019. And a full capacity, I think react is obviously going to continue to see a ton of growth. And the changes that are coming in react are just going to make everyone's life better for whether that's with suspense and code splitting. And the hooks are going to make the initial onboarding and learning process easier for people, I think react is going to continue to see growth. I think, again, all of these, these additions to react are going to just show how excellent and how evolved, that continues to be. - -54 -00:33:56,640 --> 00:34:45,380 -Wes Bos: I also think developer experience will continue to get better. We're seeing this a lot, even in this year, where via build tools, as well as the API's that we're seeing and things like react are getting much easier for developers, I think we're hearing a lot more groaning or a lot less groaning sorry, we saw in the state of jazz, that people are overall happier with where JavaScript is at right now. So we'll probably see that I think that CSS and JS people will still be complaining about how CSS works. I logged on to Twitter this weekend. And it's funny, like probably three times over the last couple of months. I've logged on to Twitter and the on a weekend and people are just fighting about CSS. And they're like a huge thing, where people take time out of their weekend to talk about it, whether they hate or love, CSS and js. - -55 -00:34:45,920 --> 00:34:56,210 -Scott Tolinski: Yeah, right people, people who write CSS and JS don't know CSS doesn't want to embrace the CAT scan. There's just so many stupid arguments on both. Yeah, so just do do what makes you productive. - -56 -00:34:56,480 --> 00:35:06,380 -Wes Bos: I will predict that people will still be whining about it. And I think if you Have a productive 2019. Stop whining about it and just pick one and don't fight the people on the other side. - -57 -00:35:07,350 --> 00:35:09,270 -Scott Tolinski: I think you are absolutely correct. - -58 -00:35:09,570 --> 00:35:11,400 -Wes Bos: Yes. What else do you think's gonna happen? - -59 -00:35:11,580 --> 00:36:21,860 -Scott Tolinski: I think some of the things that we talked about earlier in this year with design tools, I think, design tools are going to get more code he. And we've seen this from things like framer x, more recently, there's been a new hot one, that's a Kickstarter called modules, that is very react based. And they actually look to be more than just react based. But they're sort of these like design tools that are going to make code prototyping really easy. Maybe it's a design tool that spits out react or accept react components and allows them to be inserted into the design. Again, I think there's going to be some major advancements in this space, we did predict that it was going to get more Cody last year, and it certainly did. So I think that's just going to keep on continuing to happen. I think platforms like figma are gonna just continue to improve constantly figma in the same regard, like VS code is one of those things where every single month, there's just some crazy new feature that you've been asking for, or other platforms don't have yet. Or maybe it's some other platforms, hot new feature, and figma is just like, Oh, yeah, we can add that too. Hold on one sec, you know. So that's one of those platforms, I think that's just going to keep on evolving. - -60 -00:36:22,190 --> 00:36:47,550 -Wes Bos: That's exciting. One thing I hope we will see in 2019 is ESX modules in node. So it's probably been at least two, two and a half years of people looking at how do we get the import style from regular JavaScript into node, which is currently on common j. s. I know that there are tools out there, but there has not been a five a finalized spec of what that will look like. So I'm excited to see if that gets resolved this year. - -61 -00:36:48,000 --> 00:37:09,900 -Scott Tolinski: That's one of those things that I've always loved about Meteor is that your Babel config is the same on server and front end. So they've had imports imports forever. Yeah, forever and ever and ever. And so I've almost like not never, but in the past, I don't even know how many years I like don't write require ever just because I don't have to I think the first time I wrote requiring a long time was when I was doing my electron course. And I was just like, - -62 -00:37:09,960 --> 00:37:18,210 -Wes Bos: Oh, yeah. When you do a Gatsby site, and you write your Gatsby node, you have a transpiler on that. Oh, no, I - -63 -00:37:18,210 --> 00:37:21,920 -Scott Tolinski: use require I use require there. But that's only what you're requiring, - -64 -00:37:22,170 --> 00:38:16,380 -Wes Bos: like three or four things or it's like in the in the starter file are ready. So you don't need to require yourself you right? Yeah, yeah, totally. And Gatsby does a lot of the the requiring for you when you you just specify which plugins you want. So I'm excited. I know it's such a small thing. But it's it's such a huge decision in the industry. I'm so excited to stop accidentally importing things in my note and just stick with one forever. And then also a one thing I hope we see is the server side hot reloading. Yes, it hasn't gotten a lot of love. I think it's just technically very hard to actually do. But the fact that I need to still need to restart my server, even like I was doing some Gatsby stuff the other day, and I'm writing custom, like create pages and custom imports. And every time I change something in how that works, I manually killed the server myself. And then I was gonna write like a node mon to watch that file, and then rerun Gatsby develop. But I hope that that whole server side hot reloading gets a lot easier in the future. - -65 -00:38:16,650 --> 00:39:36,230 -Scott Tolinski: Yeah, that's a good one. I think I'm also hoping for that as well. I think in 2019, I think we're going to see more wasum stuff, webassembly, whatever that looks like. I'm not quite sure yet. But I think we've seen enough of it in 2018, to know that it's just going to continue to improve and grow in all sorts of different directions. I mean, you can now have all sorts of different libraries integrated into your your JavaScript code, or your node cord, you could have a rest module or something converted to gasm. And used right in your project. I mean, I think there's going to be a lot of growth in that department as well, that should be superduper. Interesting for all of us. I also think code splitting is one of those things, that's going to get easier. And we've already seen the effort made in react. But I think overall, it's so easy to write a application right now that does not code split and serves this giant bundle. And while that isn't great, it's just so easy that so many people find themselves just doing it and not even thinking about it. So I would love to see code splitting just get easier and easier and easier. And that's one of the things that we're obviously seeing with react right now and how they're they're working with that. But dynamic imports and code splitting, just sort of just making it effortless, would be very, very nice. - -66 -00:39:36,270 --> 00:40:30,170 -Wes Bos: I think you're totally right on that. Like it comes back to the the tools that we've had, I think that we're seeing, not necessarily like developers only care so much about image compression and code splitting and offline mode and they would like these things, but you have to make sure that it's it's actually easy for the developer to implement them and we're seeing like parcel two is going to have a lot of that easy code splitting set up in They're require syntax or sorry, the import syntax will just work like that, which is really cool. It already doesn't and parcel one. Things like yeah, I know we keep saying Gatsby in this thing. But the Gatsby just like makes it work without you actually having to do a whole lot of setup, which is really cool. So no, I totally agree with you. I'm really excited about that for for the next year. I'm really excited to take a look back at this in one year, and say like, Okay, how far did we come for these tooling thing? - -67 -00:40:30,180 --> 00:44:02,400 -Scott Tolinski: Yeah. Yeah. I mean, because let me tell you, I, I have server side rendering. I have code splitting. And I have Apollo doing all of my data. And let me tell you, that was not easy. That was a lot of work. And it was a lot of frustration. To get all three of those things. It was almost like a triangle of like, you can have two of these things, but not all three. And by the time I got it working, I was just so like, I never want to touch this again, that I'm just hoping that that experience is not something that's perpetuated forward as we continue to improve our tools. Okay, so let's talk a little bit about our own personal reviews. We've done like the tech world reviews. So let's talk about our 2018 and our 2019. Yeah, so 2018 was pretty sick. For me, I released, I think I released why released at least 12 new courses. So that's a lot of videos, each one's like 20 videos long for level up Pro, I feel like I released more content than just that I had some bloggie videos on YouTube, and I had some additional content. But I released a lot of tutorials this year. And because of that my workflow got refined, my videos overall got refined, I got a new higher quality video camera, that shooting 4k, it's excellent, I'm recording screen recording in 4k, I've just overall refined my process and refined the production of my tutorials. So that's always great, because you know, each year goes by you want to continue to make that video content better and better and better if that's what you're doing for a living, right. I also saw major growth in level of tutorials as a platform from not only from how many users are on it, but from the changes to the platform itself, the code got better. using things like Sentry gave me more visibility into my code, that's not an ad, it just did all sorts of things in my platform got better in terms of code, quality code, organization, reliability testing with react testing library, I feel better about my code base right now than I ever have before. And I'm very confident once hooks and suspense and all that stuff comes down the line, it's just going to continue to be better. I also hired my first employee to work on the site. Typically, I'm the only dev on level up tutorials, I've been working on it forever and ever and ever by myself. Now I have a good friend of mine, Eric working on the code base, and he's just been doing an amazing job. So I'm just so psyched for that, because now I don't have to wait for me to be there to do every single little update on this thing, he can go ahead. And he's doing excellent work. So I'm absolutely loving that. And well, I did a lot of stuff. In person for the first time, I'm so used to being behind a video camera, or just a microphone, that I never really reached out and branch off to do conference talks. So I did both my first meetup talks this year, as well as my first conference talks this year. And we even did a live episode of syntax. So I really upped my speaking game in public, which it was actually easier than I was anticipating. Because it turns out when you spend so much time talking in front of a microphone, or just talking in general, it's really not that difficult to make that transition to talking in front of people. It's just a different backdrop that you know, so if I, I was able to improve my talking abilities or whatever. And I was really psyched, how all of my talks went this year, how our live show and this year, it made me feel very confident about doing more talks in the future, which had always been something that sort of well gave me a lot of anxiety overall. - -68 -00:44:02,730 --> 00:47:00,930 -Wes Bos: Wow, productive year for you. I'll go through my 2018 I released two major courses I released my CSS Grid course in I think January and then I also released my advanced react course in I think it was October October November I forget was about a month or two ago, the advanced react course was probably the biggest thing I've ever undertaken in a course just because it was such a new technology everything was changing very quickly. So I was very happy to to get that thing out as well as very happy how well received it's been been doing really well and people are learning a lot about react as well as graph qL and all the services around that was pretty cool. I spent a significant amount of time working on a and planning out a just a JavaScript course. So if you haven't heard yet, probably my next one will be a vanilla or not necessarily vanilla, but just an introduction to JavaScript. And that is the language itself browser API's design patterns. Lots of exercises. I've taken a lot of what I've learned, and what people have really enjoyed in my JavaScript 30 course. And I'm going to say like, Okay, what do people like about that? I've talked to like hundreds of people about like, what were your pain points when you're learning JavaScript? Or what are the holes in the things that are out there right now for beginners to JavaScript. So I spent a lot of time on that I'm still a ways away on that, just because it's, I want it to be like a, like a rock solid resource for learning JavaScript. So that will come out sometime next year, which I'm really excited about. I've delegated a lot to a contractor on my course platform, which is really exciting. And that was cool, because it's not like I'm working less on my platform. But it's just that we can get more features being pushed out. I've continued to work well as an assistant. So I've had a system for probably a year and a half. Now that's working really well. I spoke at lots of conferences, I did lots of workshops. I don't even know how many I did probably spoke at around seven or eight different conferences, I probably did five or six different workshops, which was good. Those take a lot of time. I love doing them, but they take a lot of time to prep for them and make the content. We did a live syntax at jams calm just a couple months ago. That was super fun to do I mess up for the first time. Yes. That was good. Yeah, I, I spent a lot of time this year focusing on my Instagram, continuing to see Twitter is still like the spot where web developers hang out. But I don't like putting all of my eggs in one basket. So I've sort of doubled down on what my Instagram was, I think I grew it 910 thousand people over the last year, which was good. And then I've continued to post my Hot Tips on Twitter. Twitter's still doing super well, for me growing that thing. It's it's just growing at a really good clip right now is seeing a lot of good feedback on the type of content that I've been posting. So that's been been really good. Nice. Yeah. goals for 2019. Let me know what you want me to go through mine and then go through yours? Or should we? Should we make our announcement right now? - -69 -00:47:01,230 --> 00:47:13,980 -Scott Tolinski: Yes, we each have an announcement that are somewhat Well, not somewhat. They're totally related, but not the same announcement? Well, I guess it is the same announcement. And let's just get it over with we are both having babies - -70 -00:47:13,980 --> 00:47:28,590 -Wes Bos: together. No. No, so yeah, with our respective partners, we are each expecting a new baby in 2019. Mine is coming late June and yours is coming. - -71 -00:47:28,890 --> 00:47:30,270 -Scott Tolinski: late May. Yeah, so - -72 -00:47:30,270 --> 00:47:43,290 -Wes Bos: very close together the girl. That's super exciting. We don't know yet. We're still, we still have to wait a month or two before we can figure out what we will having. But I'm super excited about it. Congratulations to you as well, Scott. Yeah, congratulations, - -73 -00:47:43,290 --> 00:47:58,860 -Scott Tolinski: man, I am I'm so excited it's gonna be, it's gonna be a fun couple of months for both of us. So we'll see what happens to those episodes of syntax around that, that time, when both of us are sleep deprived, rather than just one of us. - -74 -00:47:58,890 --> 00:52:18,660 -Wes Bos: Yeah, it's gonna be interesting, we might have to pre record a whole bunch before we get overly sleepy. So along with that, I'm planning to take some parental leave. So the one kind of neat thing about working for yourself is that I don't get parental leave from an employer. And we also don't get maternity leave from the government in Canada, I think you get eight months or something like that. I forget what it is. But we don't get either of those because we're self employed. And we don't pay into employment insurance as a choice, which means that we don't get any maternity leave. So we have been just like talking about what that's going to look like. And I think that we're going to take a couple months off myself, we're not totally sure that podcast will obviously still go on. I'm not sure. Like, obviously, I can't totally cut off because I still have a business to run. But I think that there's going to be a couple months there in the summer where where I take off and spend some time with the new family. And we'll probably do some sort of episode about that. Or I'll talk about what that looks like. If you have I know that a lot of people in our industry have taken parental leave as well. If you have any tips for what to do on that. I'd love to hear them. Yeah, what else schools I'm just gonna kind of keep doing what I'm doing over the next year. Everything is working out really well. I've sort of hit a really good spot in in what I'm doing in terms of my free stuff as well as my paid courses. So keep doing that. I've got a new website in the works I've been working on for about a month, I got this nice new logo that I'm super happy with. I am working on a new site and I'm moving over to Mark MDX which is like markdown in JSX. And I know put all of my blog posts and everything on GitHub, so people stop emailing me about spelling mistakes. I told you I'm working on a JavaScript course platform upgrades so I've had probably last like four months have been working on platform upgrades and none of that is live yet just because they are such such a huge change to the back end. It might not look like a whole lot of difference but it's a indication system is doing been reworked, the whole back end is written rewritten in react. So once that goes live, I'm going to be working on like a faster rollout where every commit is just immediately pushed out once it passes the tests, then pass that course wise, I want to do some sort of CSS course, maybe a VS code course more react. I'm not sure what I want to do after the JavaScript course. But I've got some ideas I'll probably have to after my JavaScript course I'll probably have to update my react courses as well. Once suspense and hooks are solidified. Once all the libraries know about hooks people emailed me like the day after hooks was announced and scores Yeah, is your is your course valid for hooks? And I was like, no, that came out yesterday. And it's not finished yet. But once they're all solidified off the update all my courses, so that they use the latest and the greatest, one of my goals is to publish eight YouTube videos. So I always talk about goals being smart goals, and it has to be specific, I didn't do a whole lot on YouTube this year, other than automatically push out my my free courses every every week, as well as I did like a couple little code alongs. But I really like doing that stuff on YouTube. I love doing that sort of informal off the cuff stuff on YouTube, people really like it. And that that's a huge, like growth opportunity for me. I'm at 60,000 followers right now, which is not great. So I'd love to, to grow that into something a little bit more significant. So I think I'll probably spend a little bit more time on on YouTube videos, as well as Instagram. These are like different platforms that I even though I'm comfy. In my Twitter, it's important to know that at some point, and I think even already, people are sick of Twitter, especially with a lot of the the negativity that surrounds Twitter, I know there's a lot of amazing people on Twitter. But there's also just a lot of like arguments and bots and negativity out there and bots. So and just like a lot of like politics and stuff, which you have to pay attention to, but not necessarily your entire day. So I'm going to spend a lot of time focusing on those other platforms to make sure that I still have a bit of a hold on them. Should Twitter go away at some point. So those are my goals, we'll see where they go. I was looking back at my goals for last year. And I definitely didn't hit all of them. But I definitely did have a fantastic year, and I'm very proud of, of what I accomplished. - -75 -00:52:18,900 --> 00:55:21,750 -Scott Tolinski: Yeah, I mean, if my 2019 can be as productive as my 2018, then I'm doing the right thing. So Mighty 2019 is going to continue to see a lot more courses for me, I mean, that's sort of my bread and butter is making and releasing courses. I probably already have enough courses planned for next year that I could fill out the whole year. But you know me, I like to keep those open ended and evolve as we evolve as we go. So I'm going to be releasing a lot of courses, they're going to continue to get better, just like as they always have. That's the sort of the plan. I think in addition to that you're going to see, I have no like major announcements right now. But you're going to see so none Scott level up tutorials courses, and I think they're going to blow you away, because I am very, very excited about them. And I have no announcements at this second. But when I can announce something, I'm going to be very excited. And maybe one of those is going to line up when I'm on parental leave myself so that I'm not trying to record a course and plan of course, while a newborn is here. So that's going to that's going to happen in 20 2019, I'm going to be releasing some courses that aren't based off of my work, which is going to be really, really exciting for me and also terrifying because the only people who have ever released content for level up tutorials is me and the CO creator of level up tutorials who has since not been active in level tutorials since maybe 2012. So the new territory for me, there's gonna be a ton of platform updates to my code base, there's so many updates that we've been working on that are they're like sort of at a bottleneck that need a little bit more. So there's like maybe like five or six major features that are coming to the level of tutorials code base that are just sort of waiting on a couple of small things to get out. And so I think the early part of 2019 is going to see just an incredible amount of new things and level up tutorials comm I would like to hire more people to work on this site, both front end back end. However, if you are a inexperienced noted developer and if you have even more if you have experience with brain trees API in particular, I'm looking to lighten the amount of stuff that I'm working on server side just because I'd like to focus more on on course content, reach out because I am looking to hire a contractor who's a excellent no developer. Also more free content. I've been you know, I built level tutorials on free content, and it stinks when I don't have the time to do it. So I want to do more free content, both courses, both blog videos, both learning things, stuff that I've picked up here and there, maybe some code bloggie stuff, maybe some you know, level up talks about the news of JavaScript stuff, who knows it's totally open ended, but I'd love to do more frequent That's, that's really part of it more real world teaching sort of stuff. And I'd love to see my code base using hooks and suspense in a real way that make things even better. Because you know, me, I love evolving my codebase. That's pretty much it for me, I'm gonna have a very productive 2019 I'm going to have a new baby girl. And I'm very excited about all of that. - -76 -00:55:21,750 --> 00:56:07,770 -Wes Bos: Like it. Yeah. So hopefully you enjoyed this, hopefully you have a very productive and exciting 2019 as well. I'd love to hear what you are hoping to both see in our industry, as well as what you are hoping to do, personally and professionally in 2019. Make sure you tweet at syntax FM, let us know that. I think it's just good to hold yourself accountable, put them out there, and then come back to that tweet a year later and see how you've done. Yeah, if you want more info on setting goals, we have a really good podcast episode number 67. It's called goal setting. And that goes into how we actually set our goals and how we figure out how we're doing and course correction and all that good stuff. So go back to that if you want a little bit a year end your start motivation. Nice. What about sick Peck CMA sick picks, today, - -77 -00:56:07,919 --> 00:57:59,550 -Scott Tolinski: I have a sick pick. It's this TV show I've been obsessed with. I'm sure a lot of our listeners in the UK are familiar with this show already. But we just got it on Netflix here in the States. And it's only one season on the Netflix. But I have gone out and sought out a lot of the other seasons, because they're available on YouTube very easily. If you just Google it, this show is called fake or fortune. And it is all about art. Someone has a piece of art, and they're trying to figure out whether or not this thing is legit. Maybe it's a famous artist, or maybe it's someone like popular figure, like there's one that I think that was there trying to see if it was painted by Winston Churchill. And what's amazing about this is that this show keeps you on your toes. Regardless of what you think halfway through the show, you might not think that by the end of it, because they do all these different testing methods. They basically approach these works of art that they don't know who created them, or they're not confirmed who created them. And they use all of these different investigative techniques to figure out if this was this particular artist, or maybe it was a fake, or maybe it was someone else entirely. Or maybe it was an assistant who made it or something like that. But the whole point of the show is like forensic techniques, they're doing like science where they're looking at even like the chemicals used in the paint, they're looking at the context, they're looking at just under layers of the paintings to see you know, where the potential origins are, what country was made in, and I'm just like, constantly blown away by the show, because they'll just be like, Okay, well, the paint was this type of chemical and the canvas was this type of Canvas. And the style is this, therefore it must have been painted in this year in Venice. And they're like dead on every single time. It's so good. It's extremely interesting. And I love this show Faker fortune, check it out. - -78 -00:57:59,550 --> 00:58:43,290 -Wes Bos: Like it. I'm gonna pick the heavyweight podcast, it's from gimlet. So you may have heard of it, it's pretty popular. And I was trying to explain it to my wife about like, what it is, it's just goes into people's lives at different point where they had something in their lives that changed their life forever. And whether it's being bullied as a child, or whether it's falling in love. And it's just really interesting. It's so hard for me to describe what it is. But they're just stories of people's lives. And the Jonathan Goldstein, who's the host of the show, does a fantastic job. He's hilarious. So if you're looking for something that is a little bit lighter, even though it's called heavyweight, but just like kind of a light listening, kind of interesting. Check it out. It's called heavyweight. - -79 -00:58:43,769 --> 00:58:49,440 -Scott Tolinski: If you were to sick pick that first. Before I did mine, I would have picked the movie heavy weights, because that's an awesome movie as well. - -80 -00:58:51,120 --> 00:58:52,730 -Wes Bos: Awesome. Any shameless plugs? - -81 -00:58:53,010 --> 00:59:32,880 -Scott Tolinski: I have a course coming out. Well, okay, well, this is January, I had of course come out in December on styled components and design system. So if you are interested in potentially arguing about CSS and JS online, you should fire up my my course I don't have a name for it at this point, because we're recording this ahead of time. But again, it's on CSS and j s style components specifically designed systems organization, all that good stuff about what are the benefits, why you might want to use them and how to use them and how to use them organized and well. So check it out, level up tutorials, comm you can sign up at level up tutorials.com forward slash pro and get 25% off that whole year of level up Pro. Thank you so much. So check it out. Sweet. - -82 -00:59:32,880 --> 00:59:50,820 -Wes Bos: I'm sick pick all of my courses at Wes bos.com forward slash courses. If you want to learn anything about JavaScript kick the year off, right? Check it out. And that's it for today. Anything else that's got nothing. Awesome. Thanks so much for tuning in. Have a fantastic year and we will see you in the next one you face. - -83 -00:59:52,740 --> 01:00:02,460 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player. Drop a review if you like this show - diff --git a/transcripts/Syntax107.srt b/transcripts/Syntax107.srt deleted file mode 100644 index 7a2ca6bea..000000000 --- a/transcripts/Syntax107.srt +++ /dev/null @@ -1,192 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally at ski. - -2 -00:00:25,890 --> 00:01:08,760 -Scott Tolinski: Welcome to syntax and this Monday heastie treat, we're gonna be talking about CSS units. And we're gonna be talking a lot about different units in CSS, most of what you've probably heard of, but we're going to be talking a little bit about when and why you might want to be using some of these things, upsides, downsides, tips and tricks, all sorts of stuff. And it's going to be a lot of fun, because CSS units is really one of the most used things in styling your website if you think about it, because well, how many times do you use anything without a unit. So these units are going to be very important to how your CSS scales and how it works over all. And it's going to be really, really fun now My name is Scott one ski and with me is always is Wes Bos. How you doing? - -3 -00:01:09,150 --> 00:01:10,830 -Wes Bos: Doing well doing? Well. - -4 -00:01:10,920 --> 00:02:29,220 -Scott Tolinski: Nice. This episode is sponsored by Log Rocket. Now head on over to Log rocket.com Ford slash syntax, and you're going to get 14 days free of Log Rocket. And let me tell you a little bit about Log Rocket. This is such a great way to get better visibility into the things that are happening on your website. One of the coolest features about Log Rocket is called session replay. And where you get a pixel perfect video replay of what happened when this bug happened. So a bug happened, you get the error message, you know it exists. But you don't know exactly what user did to trigger this, maybe they Click these buttons in this very specific sequence. And for some reason that sequence is causing you problems. So check it out. The session replay is just an amazing feature for you to get that visibility that you've never had before. Not only that, but it works with things like your Redux state. It shows you the network activity and gives you the council log errors as everything's happening. So if you want complete visibility into your bugs, and you want it to integrate well with all of the tools you know and love like century, check out Log Rocket at Log rocket.com forward slash syntax get 14 days free, super duper, super cool tool. - -5 -00:02:29,459 --> 00:04:49,070 -Wes Bos: All right, so let's get into it. I sent out a tweet the other day, it says I often hear people say that M's aren't used in CSS anymore. And they're still useful. Here's an example. And it went on to give an example of when you might want to use an app. And we'll talk about that in just a second. So I think it's funny that CSS units can become popular in some ways of sizing things can become unpopular, because there's some like new version, it's sometimes you see that with CSS Grid come along, and people say well no longer need Flexbox. And it's like No, these things are added to the language because they solve a specific problem that doesn't make the old things not useful. So we're gonna go into all of the different, not all of them, but a lot of the different units that we have in CSS in when you might want to use them, starting with M's and rems, and what they do. So maybe I'll take a stab at how EMS and rems work. So EMS and rems are both relative units, meaning that when you set a let's use a font size, when you set a font size to two M or two REM, they are going to be two times the size of something else that it is relative to and the difference between EMS and rems is that EMS is always based on the parent that has a font size set on it. And rems is always based on the root, which is your HTML element. So if you set a font size on your HTML element, and anywhere in your application, you set something to be to ram like so let's let's give a simple example of HTML font size 10 pX anywhere in your page that you set something to be to ram, it's going to be 20 pixels. However, with EMS, it's just going to go up the tree much like position absolute works, it's going to go up the tree looking for a parent that has a font size set on it. And a lot of frustration with EMS stems from people are having messy CSS where they've set a font size on a parent. And then they set a font size on like a child inside of that parent. And then they set a font size on like a parent or like a paragraph tag inside of that. So what happens there is you've amplified your your EMS three times to be three times bigger and then people don't understand how EMS work. So that's what they are. I think they're both very, very useful. You want to take a stab at why you might want to use EMS and why you might want to use rems. Yeah, - -6 -00:04:49,080 --> 00:05:53,160 -Scott Tolinski: I mean, largely in the case of EMS, you're going to be wanting to use them in the situation where the size of it needs to be dependent on its container and likewise with rems, where Well, the size of it is going to be, again, like you mentioned relative to the overall document. So rems end up behaving like this thing that can scale based on the body font size, or the HTML font size, but it's a scaling all together, right? There's no sort of relative scaling of any of this stuff, or EMS. Again, it's all based on the container. So if you have something that's self contained, and you change the font size on the container, it's going to change things all the way down, where you're going to be changing it more of like a global thing, maybe you have like a layout style, that's, that's for the entire document. And then maybe via media query, it's changing for the entire document, all of your font sizes jump up just this little much more, rather than changing container based specifically. - -7 -00:05:53,340 --> 00:07:19,440 -Wes Bos: Yeah, so the examples that I give often are, if you have a component, and inside of that component, you have a heading, and maybe have like a subheading, and maybe you have a bunch of text, then maybe you have like some footer further text, those, all four things need to have different font sizes. And if you ever want to scale up that entire component, you'll need to set the font size on the container. And then every element inside of that is going to be based off of the font size of that container using an M. So I gave an example on Twitter, where I have my headings for all of my new blog redesign are all different sizes, h1, through h6, are all different font sizes, and each one of those has this little like yellow square that's in the top right hand corner, just kind of a design embellishment. And the size of that square needs to scale up and down its width and height based on how big the font size is. And I could set a selector for every single heading tag all six of them and set a different width and height for each one. But what I did is I just set the font size on the h1, h2, h3, and then set the width and the height of each of those to be 0.75 M. And then what that does is as the font size of the heading tag goes up and down the corresponding square Also, you can do this with buttons as well, the corresponding actual element on the page will scale itself up and down without having to manually go in and do that. - -8 -00:07:19,520 --> 00:08:23,100 -Scott Tolinski: Yeah, one of the main examples that I use for rems, specifically is for things that aren't, they're more global, right, like margin. Yeah. So if you have a vertical rhythm, right vertical rhythm, sort of like a vertical grid, sort of you can think of it as like various lines. And each line takes up this amount of space, whether that's pixels or whatever, right, let's say each line takes up 16 pixels, your fonts are typically going to your text size throughout, the whole thing is always going to line up essentially either on one of those lines in between those lines, whatever it's it's taking up that space to keep that vertical spacing, uniform and organized. So I end up using this a lot for things like margin bottom, where the margin bottom one REM is always going to be equal to essentially one line and my vertical rhythm that way I can do like a margin bottom one REM margin bottom two rooms, and know that it's taking up two lines in my vertical rhythm or one line in my vertical rhythm or something like that, again, because those aren't dependent on the container, those are dependent on the overall vertical rhythm of the document. - -9 -00:08:23,220 --> 00:08:53,580 -Wes Bos: Yeah, I tend to use rems almost all the time. But I do reach for EMS, when I need a specific use case like the one I I just explained there, which is pretty cool. I did hear from some people on Twitter who the do all of their typography in EMS, I think that's great if you have the like your code is as neat and as clean and you have control over all of your components, setting the font size yourself, but I do know that the EMS can get out of hand pretty quickly when you accidentally have set a font size on two different things and they start to multiply each other. - -10 -00:08:53,730 --> 00:09:38,010 -Scott Tolinski: Yeah. And they definitely can confuse newer CSS developers. Definitely. I mean, one of the reasons why they're confusing is because it's difficult to make that conversion if you've been thinking in pixels, right? Like I'm thinking this font is 14 pixels. Well, what the heck is that in M's or rems? I mean, rems is the easier one to figure out because the document, but what is that right? And so a lot of times people pick up this trick where it's setting the HTML font size to 62.5%, the magic percent, that makes one REM equal to 10 pixels. The reason for that is that you can now say 1.6 REM instead of 16 pixels, and your font conversions, if you're moving everything over to M just gets that much easier. Is this something you use or have ever used? - -11 -00:09:38,070 --> 00:10:14,580 -Wes Bos: Yeah, so I've always just manually set the font size on my HTML to 10 pX, and then that means everything is base 10. And I can easily calculate out from there. But I just googled like, Why do people use 62.5 instead of just manually setting 10 pX and I couldn't find a great answer, but I think the reason is because if the user sets their own font size in their settings. Apparently, this will respect the user's font size and still bump everything up. Whereas if you manually set 10 pX, then it will override the user's font size. So that was interesting. I think I just learned that myself. - -12 -00:10:14,660 --> 00:10:41,300 -Scott Tolinski: Yeah. I've only ever seen the 62.5. That makes sense for about the 10 picks. But yeah, just Google that just now and see the same thing. So this is not something I ever really used. I feel like if I need those conversions, I usually just look them up. I don't know why I never really liked this. It seemed kind of weird to me. But at the same regard, it is easier to figure out and if Yeah, if you're wanting to just convert over then it's easy. Yeah. - -13 -00:10:41,460 --> 00:10:51,270 -Wes Bos: It's because you're American, and you used to having weird mounts for everything. And I'm Canadian, I'm used to everything being base 10. And making sense. So - -14 -00:10:51,510 --> 00:10:56,760 -Scott Tolinski: we should go, Yeah, like feet, we should get a feet unit and CSS says one, - -15 -00:10:56,880 --> 00:11:15,210 -Wes Bos: there is interest. We'll talk about that. That's rems and M's extremely helpful to sort your type in it. I also use rems and M's for like Scott said, padding margin, things like that, or I need them to scale up and down the beauty of using rems, let me tell you a little story one minute and tell - -16 -00:11:15,210 --> 00:11:16,500 -Scott Tolinski: you a little story. - -17 -00:11:16,590 --> 00:12:04,500 -Wes Bos: I had a student once design their entire website when they were accidentally scaled in. So they had to hit command plus, and they zoomed in the website and they built the entire website. So they were adjusting everything to look how they wanted it. But everything was off. And then I they're like my media queries aren't working. And they're not like clicking at the right points. And I was like, Oh, you're probably zoomed in and I zoomed out and the whole website was much tighter. But website, the saving grace was that they had built everything in rems. So all they had to do is change the base font size to be a bit bigger, and everything scaled up. And that's the sort of the beauty of using something like M's or rems is that if you ever want to scale anything up or down, you can just change your base font size, and those things will scale up accordingly. Cool. Well, what about pixels? - -18 -00:12:04,590 --> 00:13:04,440 -Scott Tolinski: I was gonna say, in addition to rems and M's there is a lot of other units, including one that is probably the king of units and CSS, as we know in terms of usage, which is the almighty pixel. And I think this one's gotten a bad rap people. Sometimes they want to say don't use pixels or amzer M's or king or whatever pixels. They're still very widely used. And well, I think it's maybe because of what high density displays and things like that people were thinking like, well, maybe we shouldn't be using pixels, because well, now what is 16 pixels isn't 16 pixels before, however, we don't have to worry about that because a pixel in the browser has pretty much become what a device pixel is on something like Android, right? If you've programmed for mobile, you'll know that if you set something to 16 dP, it's not a absolute 16. It's a 16 based on whatever the resolution of that devices. So honestly, we don't have to worry about that too much anymore. And I find myself using pixels somewhat frequently. - -19 -00:13:04,680 --> 00:14:00,150 -Wes Bos: Yeah, pixels got a bit of a bad rap years ago, because what used to happen is if you someone were to scale up the website, the type would scale up, but the UI wouldn't, and then your whole website would look broken. And that was always the big test, whatever. Now in all browsers, if you scale up a browser, the entire UI of the website, type in background images, and everything will just scale up accordingly. So it's not a big thing anymore. And also, I find it kind of funny how we are all doing just using rems, and setting a base font size and then we just all are mentally calculating how many pixels we want. And then just making that instead of saying 16 pixels, we just say 1.6. REM and Oh, that's nice. You know, it's no different. It's not yourself. Yeah, there's at the end of the day, all of our screens are built in pixels. So pixels are totally fine. Don't feel like you're doing old technology. What about points, points? I've never used points of you - -20 -00:14:00,150 --> 00:14:30,960 -Scott Tolinski: know, I've never used points. But it's always the worst when you get a like a Photoshop file or something from a designer, and the fonts are all in points. And you're just Oh, yeah. Okay. Did they mean these to be in points or pixels or whatever? No, I never, I never ever think about points in web development whatsoever. Yeah, but it's actually one more thing on pixels. If you want to see how frequently pixels are still used in design, I would find any major website, inspect their source, look at their CSS a lot, a lot, a lot, a lot are just using pixels for fonts and all sorts of stuff. So - -21 -00:14:31,050 --> 00:15:29,460 -Wes Bos: yeah, one other thing I'll say is that M's are specifically sometimes better for type than pixels. If you are doing one of those websites where you want to be a let the user increase their font size. Because often if the user is trying to increase it themselves by zooming in, or if they have if you're trying to just increase the root, like the root RAM, often you're like you're merging your padding, sometimes maybe probably not borders, but all of those things are those things also scale up and it's unreal. likely that the user wants to scale up padding in the same accordance that they want to scale up the font size, right? Like they don't need extra padding to be shown. They just need the font size to be a little bit bigger. So it's a little bit more readable. So in that case, I think M's will for sure without word. Yeah. What else do we have here? viewport units. We talked about this in a past episodes, we won't go too far into it. But they allow you to scale based on the height, the width, or the min or the max of those two. It's a percentage of how big the viewport is on your screen. - -22 -00:15:29,580 --> 00:15:32,490 -Scott Tolinski: It's my favorite unit. It's my favorite unit. It's - -23 -00:15:32,880 --> 00:15:39,180 -Wes Bos: 10 units for me. We had a really cool like use case for it in the last episode, honestly, yeah, - -24 -00:15:39,180 --> 00:15:50,220 -Scott Tolinski: I am still loving that. And in the funny thing is, before I even saw that use case, I was still like, Oh, I got the heart eyes emoji for viewport units. And now that I have that example, it's like double heart eyes emojis. - -25 -00:15:50,430 --> 00:16:22,500 -Wes Bos: Next we have ch units, which are character units and a one ch is relative to the size of a zero in a font size. So this only really works well with monospace fonts, where all of the characters are the exact same width of each other. But if you ever want something to be exactly if you've ever wanted text to go exactly the width of an actual element, you can use ch units to use that I've only ever used those in fun little demos and never found a real use case for it in production. Let me know if you have though, - -26 -00:16:22,500 --> 00:16:33,390 -Scott Tolinski: have you? I have not No, I've never used them. No, I just don't. I never found the reason to use them. Just like I know you. You've recently used an inch unit right? Or an internet centimeter unit. - -27 -00:16:33,510 --> 00:17:14,250 -Wes Bos: Yeah, inches and centimeters and millimeters are available as well. Yeah, in print style sheets, if you've ever need something to actually be so I was printing envelopes, which envelopes are physically done in inches. So if you need something to be at the very top right hand corner, like a stamp, you need to position them based on inches. So I size up the page, the whole print CSS world is weird is wild and weird. Yeah, but it's all available for you there. I've never used it in real life, though. I always joke that clients used to come back to me like he moved the logo over an inch. And you have to like kind of be like, oh, there's no inches in Let me pull up - -28 -00:17:14,250 --> 00:18:09,000 -Scott Tolinski: my ruler and hold it up to the screen. What else we got here we have percentages, which are just a famous unit in general, because well when ticularly I mean percentages has been around forever in CSS. But I think the the like the big take off for percentages was when mobile first and mobile web design really came about. And all of a sudden, you were figuring out, well, okay, this div is no longer 960 pixels wide, this div is going to be 75% of its container. And you are doing all that math. I mean, when responsive web development first came out, that was like sort of the big thing it was do math, find the percentage that's your container with float it Alright, do math, find your you know, and in that way we were building fluid designs and fluid designs have been around for a very long time. But now that device screens have been more fluid percentages have been just, you know, a key part of understanding CSS in general for a very long time. - -29 -00:18:09,420 --> 00:18:14,360 -Wes Bos: I have a question for you about media queries. How do you write your media queries when you are trying to write when - -30 -00:18:14,600 --> 00:18:47,600 -Scott Tolinski: I write my media queries using an object a JavaScript object? I do above dot med. And then guess what? Above dotnet? is some value whether it's like 960 pixels or something like that. But yeah, value actually gets converted to EMS. Um, let me double check. Let's see breakpoints. Yeah, that is converted to EMS, via division by 16. And so the code that's output into my code base is an end. But I really only think about it as a pixel value. Hmm, - -31 -00:18:47,700 --> 00:19:21,930 -Wes Bos: that's interesting. I do all of my media queries and pixels. I've tried them in AMS. And it confuses me. And you can do them and Rams and seeing all these like obtuse things. And at the end of the day, I understand that I want this thing to be to look this way when the screen is above or below or in between this pixel value, because at the end of the day, our screens are just in pixels. And I've never run into the situation where I want to scale up or down my media queries accordingly. Because I know that's something that they can do. It's just not a use case I've ever actually needed. So I write all of my media queries in pixels. And it's it's worked out well for me. - -32 -00:19:22,170 --> 00:19:39,320 -Scott Tolinski: Yeah, in fact, I only do that M division, because that's the way the code in the style components documentation was written. And I copied and pasted it. Well, I copied and modified and pasted it, but I didn't modify the damn part. I just don't think about it. Yeah, just don't even think about it. - -33 -00:19:39,510 --> 00:19:57,390 -Wes Bos: Yeah, it works. Other units we have are, specifically when we got Flexbox and CSS Grid, we got the flex grow and flex shrink values, which are unitless, which can be very, that's a frustrating thing for people who are picking up Flexbox right, they flex on a container and their image is doing some wonky stuff and - -34 -00:19:57,390 --> 00:20:08,040 -Scott Tolinski: they're just like, Yeah, why is this image being split? wished and you need that that flex shrink value of zero or one. It's sort of an interesting property overall. - -35 -00:20:08,490 --> 00:20:35,460 -Wes Bos: Yeah, it's it's a weird one to get your head around, especially because there is no unit, it's just the amount of free space that is left or the amount that are Sorry, sorry, it's not the amount of free space is the amount that it should grow in proportion to the other flex items, or the amount that itself should shrink, according to its siblings. Which is a little bit confusing. It's a bit better in CSS Grid, because we have these fr units, the they're like flexible units, or I like to call them free space units. - -36 -00:20:35,490 --> 00:20:39,750 -Scott Tolinski: There were a few year unit, this my Rookie of the Year is the FR unit. - -37 -00:20:39,750 --> 00:21:10,680 -Wes Bos: Love it the Oh, yeah, it's so good. So it will take after like when you have CSS Grid after you've divvied up the space that have hard requirements, like if a column has a hard REM m, or pixel or percentage width, or height to them, after that you've got extra space leftover and then and then the extra space will be divided up via the FR unit. So if something has to fr and something has one fr the one that has to fry off twice the amount of the free space, it'll take up two thirds, yeah, - -38 -00:21:10,680 --> 00:21:17,220 -Scott Tolinski: two thirds of the total space, and the one will take up one third. So you add up all the F RS and then it's a fraction. - -39 -00:21:17,570 --> 00:21:31,610 -Wes Bos: So you can you can do them. I sometimes I do them 100 base just to like kind of think in percentages. So like 50 fr, and 25. fr is 50% and 25%. You can make them as big as you want. Because there's no, there is no basis there. Yeah, - -40 -00:21:31,650 --> 00:22:02,100 -Scott Tolinski: I use these constantly. Obviously, they're they're they're very, very useful when doing any sort of grid. Because most of the time, things don't need a hard requirement. They just need this sort of space for this sort of space. And when they do need a hard requirement, you give that pixel that M that ran that value, whatever. Use these fraction units for everything else that needs to grow accordingly. But yeah, these are these are great units. There's a whole bunch of extra units. We never even think of like degrees. And we talked about them in another episode. There's like yeah, radio radians and Yeah. - -41 -00:22:03,870 --> 00:22:11,550 -Wes Bos: Have you heard of that? Which one, the x x, the relative relative to the x height of the current font, have never heard of that, - -42 -00:22:11,730 --> 00:22:21,720 -Scott Tolinski: before? Never heard of it, never used it. And maybe it's just because I'm not typing enough. I need to get my type skills up to have a better understanding of when that would be useful. Yeah, - -43 -00:22:21,720 --> 00:22:28,560 -Wes Bos: I think that's all the other units that I have. And just looking at it, there's there's a bunch of print ones that are probably not use all that often. - -44 -00:22:28,560 --> 00:22:47,400 -Scott Tolinski: If you are out there, and you have a favorite obscure CSS unit that you have an interesting use case for, let us know I'm interested in some of these obscure yet and what are the best use cases for them. So if you're using one of these, these interesting ones, let us know league is there. They're fun. And they exist, but I don't necessarily find myself using them ever. - -45 -00:22:47,940 --> 00:23:42,840 -Wes Bos: My favorite was turned turn Yeah, turn turning if you want to turn something like a quarter turn 0.25 turn instead of 90 degrees. And I tweeted that and people were so either so into it are so salty about they're like, why not just calculate the degrees and like that the reason you don't in case? Because like, yeah, how much is a 37%? Turn in degrees? I don't know, was 0.37 times 360. And then round the decimal place that you end up with? Yeah. So it turns out pretty cool. When you aren't thinking in degrees. Just how much of a full turn should it turn itself? Word? Yeah. So I think that's it for today. Let us know your favorite units or whatever or how you like to approach your type and other people that size their type very specifically with EMS and rems, and I'd love to hear how you do it. So tweet us at syntax FM on Twitter. - -46 -00:23:43,079 --> 00:23:45,030 -Scott Tolinski: Cool. I don't have anything else on CSS units. - -47 -00:23:45,030 --> 00:23:49,020 -Wes Bos: Thanks for tuning in. We'll catch you on the next one. Please - -48 -00:23:50,970 --> 00:24:00,750 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax108.srt b/transcripts/Syntax108.srt deleted file mode 100644 index 2a47d530d..000000000 --- a/transcripts/Syntax108.srt +++ /dev/null @@ -1,316 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,559 --> 00:00:43,740 -Wes Bos: Hello everybody and welcome to syntax. This is the podcast with the tastiest web development treats out there. Today's episode is sponsored by two awesome companies. We first we got Kyle Prince Lou's freelancing course which is available at study web development, comm Ford slash freelancing. And we've got dev lifts back to get you in shape for the New Year DevOps that I Oh, they have some special plans running for the month of January. So stay tuned for some more details about that with me as always, today is Scott to Lynskey. How you doing Scott D, - -3 -00:00:43,769 --> 00:01:00,270 -Scott Tolinski: it's a new year to new me, and I'm ready to go. This is gonna be our first episode in a little bit. So we're gonna see how it is. I think we're both pretty highly caffeinated though. So hopefully, is turning out that works for us. Yeah, that gets things going because you know, I'm gonna need it. - -4 -00:01:00,329 --> 00:01:10,470 -Wes Bos: Yeah, absolutely. I'm actually feeling pretty good. I had a nice time off with the holidays and just long enough, and I was like, excited to get back to work. And it still felt pretty good. So that's, that's good. - -5 -00:01:10,529 --> 00:01:11,160 -Scott Tolinski: Yeah. - -6 -00:01:11,189 --> 00:01:39,000 -Wes Bos: All right. So today is a potluck episode. A public episode is where you go to syntax.fm. And you can submit your question to us, and we will attempt to, to answer it for you. And these are always fun, because we go through a whole bunch of different topics and spending just a couple minutes on each one. So today, we've got questions for newbies questions about cron jobs, questions about learning stuff quickly, event tracking, all kinds of stuff. It's gonna be a good one. So let's jump on into it. You wanna grab the first question there, Scott? - -7 -00:01:39,089 --> 00:04:00,060 -Scott Tolinski: Oh, you bet. First question is, this is from David, no last name here. It says, where's the best place to start with j s coming from WordPress bootstrap scaffold with express or is bootstrap two older now? Okay, so this one is a little bit tough. I wouldn't I wouldn't even necessarily go to bootstrap in general, if I'm looking to learn j s, just because I generally see bootstrap is more of just like a HTML and CSS sort of thing, right? Yeah. So for me, it depends on what you're trying to learn with JavaScript? Are you trying to learn how to build just general little doodads and wickets and things like that, right? If you're just trying to build little things here and there, then, you know, I might take a basic JavaScript sort of training aspect to it and learn sort of the fundamentals of JavaScript. But if you're looking to replace that sort of WordPress flow that you had before building some sites that are maybe for clients in that sort of way, I might take a little different approach to this. And this, I don't know if this isn't necessarily controversial at all. But you know, people tend to say, learn, you know, the foundations first, before you pick up a framework, don't learn the framework until you learn blah, blah, blah. But personally, I've learned quite a bit of JavaScript myself through frameworks specifically react because it's so JavaScript do it now view is pretty JavaScript as well. There's a little bit of magic in there involved. But, you know, if you're trying to replace that WordPress gap, and you want to get some experience with JavaScript, I would honestly pick up react and Gatsby take a basic react course learn, you know, what's doing what, where, and then I would take a Gatsby course. Because gets these really one of those platforms that does eloquently fill the void of WordPress, if you take react and you're not super into it, maybe try a view course, there is a view, comparable version of Gatsby called the grid sum, which is very, very similar, basically borrows all of the ideas from Gatsby. And I personally, I like I like using frameworks to learn JavaScript. Now, I understand that not everybody sees it that way. But I personally learned quite a bit of JavaScript through frameworks. And I don't think it's a bad approach. - -8 -00:04:00,329 --> 00:05:32,460 -Wes Bos: Yeah, I agree as well. We've said this many times in the podcast where like most people who learn web development and by learning WordPress, they didn't sit around for a year learning PHP, what they did is they they started just sort of hacking away at WordPress, and through that you sort of struggled through and learn the basics of PHP. And I think that the same can be done with JavaScript, not saying that you should not know a line of JavaScript, obviously, do a little bit of fundamentals get kind of comfortable with how things are working, but then reach for one of these like starters that you get with Gatsby as all kinds of starters. And I think through that you can sort of work backwards and you're gonna find it's gonna be frustrating, but you'll find yourself in a lot of situations where you'll say, oh, man, like what is this thing right here and you have to go and learn that or I need to loop over a list of things or I need to combine these two elements into one and I think that's a kind of a neat way at at approaching it. So if that's what you're looking to do, if you're trying to like replace your WordPress, then I would go with that. Otherwise, if you are just looking to like sprinkle on a little bit of JavaScript into your WordPress websites, I would probably go and look at a, like a vanilla JavaScript course out there also have a free one JavaScript thirty.com. There's lots of stuff out there that you can get it get up and running, which is good, because I know a lot of the WordPress plugins are still based on jQuery, which is not necessarily a bad thing. But if you want to be a little bit more future proof, if you want to learn some more modern stuff, I would probably focus on your vanilla JavaScript skills there. - -9 -00:05:32,639 --> 00:05:34,590 -Scott Tolinski: Yeah, absolutely. Super cool. - -10 -00:05:34,709 --> 00:05:56,520 -Wes Bos: Great. Next question we have from Daniel holick. Just a general question about cron jobs, how to set them up and the best tools to use? Should they run on their own server? Or can they run on the application server? How does your application server talk to the cron server? So let's back that up a little bit. A cron job is a How do you explain current cron job is something that happens? - -11 -00:05:56,819 --> 00:06:13,230 -Scott Tolinski: Do you think we'd like a tie, like an alarm clock, right, and the alarm clock goes off? at a set schedule? Whenever you program it, right? You tell your alarm goes off at 6am? It's gonna go off at 6am. So you could think of it as like, basically, like an alarm clock? Yeah, I don't know. That's, that's what I think of it like, - -12 -00:06:13,259 --> 00:08:42,119 -Wes Bos: Yeah, exactly. So if you have something that you need to do every x amount of time, every day, every month, every Monday twice a day at three o'clock, if you need to do something at a set interval, every x number of days, time, whatever. So some examples of that might be might need to backup a database once a day, I have that on my server, I backup my database, once a day, you might want to run some cleanup jobs, you might want to run a daily scrape and a daily email. So I've talked about before, I used to run a daily deal aggregator, and part of that the entire thing was based on cron jobs, because I think once an hour, we would scrape the website for the deal. And then once a day at 7am, we would gather up all those deals and put them on the website as well as gather up all those and send off the data to MailChimp. So you end up writing a lot of these sort of like scripts that need to be run at a certain point. And and then what you have is you have a script. And these scripts can be written in any language, or they can be written in PHP, they can be written in node that can be written in bash, and then you tell your server please run this command every let's once a day. And what you do is you would say like node send emails, j s, or bin bash, backup and once a day, and then the server server will run those for you. So that's pretty much how it works at a very low level. How do you make a cron job should you use it on your own server, at the very lowest level, you have cron built into your server, so all Linux servers will have cron jobs built into them, they'll have a folder, or they'll have a file on there where you can just crack open the cron job and add an extra line, you write this little syntax that is comprised of numbers, forward slashes and stars that correlate to how often they should happen. And then the server will just simply rerun those. So for an example I have on my own server is that once a What is it like once every three months? What How often do you Let's Encrypt certs expire? I think three months, three months? Yeah. every three months, I run this command that's called cert bot renew. And that goes off and renews all of mine, my servers early on a Sunday morning. And then I have another cron job that I don't know, 20 minutes later, or when that's finished, it will reload my nginx config. And I had some trouble with that earlier because I was running them out of sync. But that's kind of how it works. And then Have you ever used node cron there, Scott? - -13 -00:08:42,119 --> 00:08:46,260 -Scott Tolinski: I have used node cron. Yes. That's the only one I've used to be honest. - -14 -00:08:46,589 --> 00:09:18,049 -Wes Bos: Okay. So you can instead of like writing like a low level cron. in Linux, you can write like a JavaScript cron based job in node, it has this JavaScript interface for it. So that's great, because it's really easy to write them. The only downside I think there is your your node app has to be running, which in some cases, you don't want to have a script continually running. You just want to like start up that script, do your work, and then and then shut it down. But I think that's what I would reach for. Where do you run your do your cron jobs, Scott, or do you have any cron jobs? - -15 -00:09:18,089 --> 00:09:20,070 -Scott Tolinski: I have no cron jobs. Oh, there - -16 -00:09:20,070 --> 00:09:20,640 -Wes Bos: you go. - -17 -00:09:20,659 --> 00:09:42,000 -Scott Tolinski: But, you know, that's it. I have had cron jobs in the past and now for level up, but for other projects, for scheduling and stuff like that. And they typically run for me just on the same server that my application ran on. That said, small application, little user base. It wasn't necessarily too complex. So it wasn't necessarily a danger or anything like that. - -18 -00:09:42,020 --> 00:10:13,520 -Wes Bos: So as you get into more and more cron jobs, there's this idea of just running a separate server or a separate service. There's a lot of like GUI services out there that will allow you to log in and have a nice interface for creating your cron jobs. And they will tell you some stats of how many times they ran when they ran last time. They ran the result of that, that thing being run. I did a quick Google and there's like hundreds of different services. The funniest one I found was called dead man snitch calm. There's just like a like a GUI for setting up these cron jobs. - -19 -00:10:13,950 --> 00:10:28,860 -Scott Tolinski: I would love a GUI for that. That's something that I would actually use the GUI for. Because you think about like a calendar, you're setting reoccurring events. That's like that's like prime for a nice little interface there, even though I mean, it's not that hard, either. But it would be cool to have that visual of it. - -20 -00:10:29,029 --> 00:11:37,529 -Wes Bos: Yeah, me too. I just don't have that much use case, right. Now for cron jobs saying, because I have a lot of stuff is is a lot more event based, like even I think about like, I have a script that will freeze people's accounts when credit card fraud is detected. And that's not based on a check every so often that's based on something called a web hook. And that comes back from my payment providers. And whenever they suspect something fishy is going on, it will ping my server, and that will run a script that will freeze that user's account. So it's not necessarily a cron job, but it's more of a web hook. So do I have anything else to say about cron jobs here, let me just pull this up. Oh, yeah, writing the little syntax for how often something should happen. Like, if you want to run everything at the 10, like 110 210 310 of every hour, but only Monday, Wednesday, Thursday, and Saturdays, then you have to write these really complex cron tabs. So there's all kinds of good websites out there My favorite is corn tab comm where you can just it's a nice little GUI for for typing in when and how often you want it and then it will spit out the crontab for you. - -21 -00:11:37,620 --> 00:11:58,289 -Scott Tolinski: And you know, a node cron has a whole examples folder and their repo. So if you want like legit examples, they have they have really nice in code examples to to get that information. So every 30 minutes every 10 minutes between nine and whatever complex examples, simple examples, but in case you want to see it in the context of node, cron, it's right there too. - -22 -00:11:58,919 --> 00:12:34,350 -Wes Bos: Another thing you should make sure of is time zones, which is one of the hardest things in the world. But yes, if your server is in different time zone, then your development machine make sure that you're are thinking about that when I was doing that daily deal thing I was in Eastern, the server was in LA whatever timezone that is and then we were scraping like websites and had to send it out at 7am of the timezone that is of the person who was who was viewing the email. So it's so confusing, because you had to scrape it at 7am of the websites. But I had to figure like, okay, translate that it's much better if you just kind of do it all in UTC, - -23 -00:12:34,350 --> 00:13:43,169 -Scott Tolinski: I was doing, like a scheduling app. And it was so difficult, because if someone was trying to schedule an appointment, and let's say they're scheduling an appointment in Denver, and then they're in, let's say, Germany, you know, what times do you show them? When do you send them the alerts, and all a good so complex and so confusing so quickly? It's just the Yes, it's just a lot of a lot of date stuff. And you know, one of the things that's so complex and confusing is hitting the gym getting fit. I mean, it's a new New Year new you, and you might not be ready for it. You might walk into the gym and look at all these things like, Huh, I have no idea it's looking like rust Lang to you or something. You don't even know what it is yet. You're just interested by it. So that's where deadlifts comes into play. Now deadlifts have been a longtime sponsor of syntax, and they are the best way to get a handle on what you should be doing in 2019 or whatever year you are listening to this time traveler and you can get fit you can get healthy and you can get a better mind and body. - -24 -00:13:43,350 --> 00:14:03,929 -Wes Bos: Yes, I'm glad that you said in mind there because so it's a new year everyone's got new year's resolutions New Year new us new year, my wife and I always joke because all of last year I said that like New Year new me anytime like oh yeah, like it's like a Tuesday night and you crack a beer. Oh, a beer on a Tuesday, my new year new meter. I've been doing that exact same thing. - -25 -00:14:04,440 --> 00:14:07,110 -Scott Tolinski: I feel like Courtney is probably super annoyed by it. - -26 -00:14:10,110 --> 00:16:20,580 -Wes Bos: But we were celebrating how I successfully did that New Year new me for an entire year. Anyway, it's a new year and it's a new you and you probably have some goals and those might be losing weight and those might be getting a shape but those goals also might be getting better at web development. And this is not really a slant that deadlifts tells me to take I just think that it's very true. If you want to absolutely nail being a web developer, you cannot ignore the mental the physical side of things. So just over the holidays, not going to the gym eating poorly. I noticed that I had such like a brain fog the first week back and after just a week and a half of going to the gym a couple times a week lifting heavy weights and sweating it out. I noticed that like this week and last Friday. I'm like so much more on it than I was the the previous week and I think it's really important just to spend your time focusing on your health if you want to really slam dunk being a web developer, so dev lips has been on in the past, they've got these two different plans, they've got fit start, which is good for beginners who are looking to sort of get back at it. And you got dev lips premium, which is you're going to get like a lot of hand holding, you're going to get a lot of laser focused approach, you're going to get access to JC and dad, who are also web developers and personal trainers getting this thing up and running. However, right now, they've got just for January, just for January, they have back for a limited time, which is their eight week plan. So this is actually something that I went through myself over a year ago now. And I highly recommend it. Basically, you talk to them, you'll do a survey, talk about what your goals are, how you want to work out, do you want to go to the gym? Do you want to just do something at home? How often can you go. And from that, you're going to get a personalized training and a nutrition plan, which is really, really cool. So I went through it myself, I had a little talk with them, I filled out a form. And I said like, this is what I'm looking to do. And they gave me this awesome plan, which is great, because I just had to go to the gym, open up my phone and look at the plan. And I knew exactly what I had to do every single day at the gym. I told them I can only go three times a week. And they have that out. So I'm not going to gush too much more about deadlifts. Because you know that I love them. - -27 -00:16:20,610 --> 00:16:22,020 -Unknown: It's great. Yeah, it's great. - -28 -00:16:22,049 --> 00:16:56,010 -Wes Bos: If you want to check it out, use the code New Year 19. And you're going to get 50 bucks off the one time purchase price of 199, which is great. And then we also have for their other their fit, start and fit premium. If you're even more interested in those, you can check them out. Use the code syntax, and tasty and those are going to get you 50% off those plans, respectively. So thanks so much deadlifts for sponsoring. I know a lot of you listening have already gone through the dev list program. And then I'd love to hear also anyone who's who's joining in this year. - -29 -00:16:56,130 --> 00:17:18,560 -Scott Tolinski: Yeah, yeah, we should have a little like fit. Check in little, you know, progress thing. Because I've been, I've been tweaking my, my fitness stuff and been working hard. So yeah, I'm excited. This this year always brings those kind of energies, you know, New Year sort of stuff. Next question we have is from another West, West, or weird or West? Or - -30 -00:17:18,780 --> 00:17:21,630 -Unknown: it'd be cooler for others to Bobby or Yeah, one one name? Yeah. - -31 -00:17:21,870 --> 00:19:26,040 -Scott Tolinski: When are you Canadian? What new skills frameworks or projects are you looking forward to learning or attempting this year in 2019. And we kind of talked about this in our last episode by that this was maybe a little bit different than some of the things we talked about in the in the previous episode, where we talked about what we're looking forward to and stuff like that. This is a little bit more specific to what we want to learn. Now I personally am always looking to get better at the things that I'm doing. So I would love to get better at graph QL. Now my whole API is graph QL. And I've been using it now for I don't even know it's been a while. But I think there's always stuff to learn about it, whether that's like optimizing the API itself, making things a little bit more elegant, just improving it. So I am consuming a ton of graph qL content, just blogs and podcasts and whatever, whatever's out there, I'm all over it. I also want to get into more perf based stuff, I spent a lot of time on performance for level up. But with some of the additions to react coming, I think it's going to be even easier. So I will be doing quite a bit more things with code splitting, not that I haven't already. But I want to get into doing more things like prefetching. I want to optimize sort of loading of certain aspects, both database and front end stuff, I want to really get into suspense, React suspense, because I think it's going to be amazing, and how it's going to potentially affect the data loading throughout the entire site. I think it just gives you a lot of tools and flexibility to decide how that data is coming in. Once the server side rendering pictures, and I'm excited to dive in, and then hooks, you know, hooks are going to be a big deal throughout the course of the year. I've already worked with hooks quite a bit, but I am looking to learn more. We mentioned in the hooks episode, the use hooks mailing list, and every single time I get one of those. I love it. I love pawn through already using some of those hooks from that mailing list in the level up site, and I'm loving it. So I think it just want to get better at all this stuff. The stuff that I'm doing. That's it. Hmm, - -32 -00:19:26,160 --> 00:21:14,160 -Wes Bos: yeah, the hooks one is interesting, because like I've written a couple hooks myself, but every time I see somebody else write a hook, I like break it down and go, Oh, that's such a neat way to use it. Because it's it's one of those things that I don't think we've totally figured it out yet. And it's this new tool that we're just starting to see lots of new use cases for it. Absolutely. Personally, I am also really excited about the new stuff in react, which is lazy loading, react, suspense and react hooks. I think that's really going to make writing react much easier and much more enjoyable as at the same time. I'm letting us build better websites like I think like, they're going to be faster, they're going to be a better code split, they're going to be loaded on demand, all that good stuff. And it's going to be easy to author because I think that's maybe like that's like one, one theme of the year where, like, we always talk about doing these things like code splitting and, and lazy loading. And in the past, it's just been hard to do that. And that's why most people don't do it. But I think that, as the developer tooling gets much easier, it's going to be way easier for us developers to make better websites. I'm also building a new website on Gatsby, which I'm really excited about as well, for my own website. I'll talk about that a little bit more. I've got a whole bunch of questions about why and what and WordPress and all that good stuff. So we'll maybe do a little hasty treat on it. I'm excited about CSS subgrid, which are going to have a show coming up on that. I'm excited about that the whole rails for node, I think that this is going to be a year where we're going to see significant movement in the kind of batteries included framework space. And then finally, CSS Houdini, which is the sort of the JavaScript API that's going to let you implement Custom CSS properties and values. So a lot of cool stuff, maybe we'll come back to it at the end of this year, and see how much of that I really did work with. But those are high on my list. - -33 -00:21:14,190 --> 00:21:34,140 -Scott Tolinski: Yeah. And I'm going to go ahead and move CSS Houdini onto my list, because I'm going to spend some serious time with CSS Houdini, I love the whole look of that. We talked a little bit about it at our live show. But just some of the cool demos, I think there's a lot of growth that needs to happen there still, but just the fact that it exists is pretty darn cool. - -34 -00:21:34,470 --> 00:23:52,350 -Wes Bos: Absolutely. Next question we have here is Wesson Scott, I listened to your podcast, there's no name on this one, by the way, I listen to your podcast on a regular basis and wanted to ask you to if you use any particular software for tracking analytics on your site? If so, do you ever use this data to run split tests? And lastly, if you're running split tests, what is your preferred method in doing so to use a third party solution for so I split tests for those who don't know is the this idea of building a website and running a whole bunch of different combinations. And the most simple example is, you have a homepage, that looks one way and then you have a secondary homepage, that looks a different way. And then maybe you see Oh, the picture of Scott smiling with a blue button makes sales go up 10%. And then you start to use that and people get really, really in depth with it. Because you can make a whole bunch of things like the font, the picture, the colors, the size, the price, all of those things that are related to a website, you can make those variable, and then these machine learning algorithms will just play with all of those different variables and come to a which one sells the most things or which makes people stay on the page the longest or, or which specific blue is like I've heard crazy stories about these big companies testing out 40 different shades of blue. And, and seeing that, so it's kind of interesting. And running. In order to do that you need lots and lots of data to look at. So I don't really track a whole lot. I wish I tracked more. What I do track is obviously the standard Google Analytics stuff that comes for free. I track purchases, when so when something buy something, I ping that back to my Google Analytics, and that way, I can see how many people are visiting the website and actually converting at the end of the day, I also have my email provider, which is currently drip, they have a whole bunch of event tracking stuff inside of it as well. So if somebody opens an email and then buy something, I can see like what portion of the people who opened it bought something. However, I almost never look at that analytics just because almost all web developers run ad blockers and those analytics are so far off from my actual analytics that I know how many I'm selling, that it's almost like not worth looking at. Because it's just not good analytics at all. - -35 -00:23:52,380 --> 00:24:51,990 -Scott Tolinski: Yeah, I run into some issues with some of this stuff, because it's just sort of it's not necessarily worth it enough for me at this point, right? Because again, you need lots of data points. And I don't have the data points, you know, I have good amount of data. But do I have the amount that it's actually going to be worth my time setting it up, configuring it out, getting it going, doing the test, looking at the results and all of that stuff? Not yet personally, in the future, you know, maybe you'd hire out somebody to do that sort of thing. I haven't done a B tests because there are things that I I know will make a big impact that I don't need a B test to tell me are going to make a big impact that I still haven't gotten to. So it's like until I'm looking to optimize beyond the point of my own visibility. When I'm looking for visibility, then that's probably when I'll go more in that direction. I'm not saying I think it's extremely valid but me personally, I'm not needing it needing needing it. - -36 -00:24:52,320 --> 00:25:58,830 -Wes Bos: This type of thing I get emails about and questions about all the time when people are saying like, how should I track this and what should I be tracking And the person hasn't even like built a product or like had managed to market it or something like these, like a be split testing, running analytics, this is what's gonna happen when you're making a million bucks. And for a couple weeks worth of work, you can squeeze an extra, like 70 $100,000 out of it. And you can like, Oh, that's well worth it at that point where you've got so many visitors, you're selling so much, where a one to 5% bump in sales is going to be extremely significant for your bottom line. And that's where a lot of these companies get get heavy into it. Yeah, it's not really something I my return on. It's the same thing with Facebook advertising for me right now, my return on spending time on these things, or hiring it out and having to spend the time in meetings and talking and implementing it into your platform. It's just not worth it in the long run versus just making another course and versus providing good value content. - -37 -00:25:59,040 --> 00:26:58,230 -Scott Tolinski: Yeah. And it's funny, we had a question in the submitted for the potluck. That was the asking is I didn't answer this question for a reason. So I'm sorry to the person who asked this question. I don't have it pulled up right now. But there was a question that was basically like, what choices? Can you step through all of the choices that you would make for building an application that scales from back end front end to testing to design to blah, blah, blah to the entire project? How would you make those choices to build an app that scales right away? And then it followed up with I have a really good idea for an app, but I don't have a lot of money to spend on it, or whatever? The answer is, if that's the situation, then I mean, there's a billion good ideas, and it takes a little bit more than that to want to build this thing. Now, granted, you could spend all the time and money to build something that's rock solid to grow. But if you haven't tested your idea a little bit, you haven't actually done that sort of work, then, then you might just be throwing a lot of time out the window. - -38 -00:26:58,320 --> 00:28:22,050 -Wes Bos: Yeah, I think I got this question in my Instagram, on my Twitter dm on my ama, I think I got every possible way that I can connect to someone I got this question from this person. And the question was like, I'm going to build this like next Twitter. Yep. And how do I scale the entire thing? What technology do I and like, you're thinking about the wrong problem, you should really be thinking about are people going to use this thing, because if you have scaling problems, you are in a very, very good spot to actually have it. Because scaling problems can be solved to a certain point by simply just throwing more money and more server time at it to an exam. Yeah, to an extent, yeah. And then at a certain point, it becomes like, I am on drip right now for my email. And it's dog slow, like sometimes takes two or three hours to calculate a segment of my list. And now that's biting them in the butt. But they are likely making millions of dollars a month from this thing. And they're able to go hire the smartest people in the world to solve these scaling issues that they have. Nice. So segment.io are actually it's segment.com. What this will do is it will give you one interface for tracking things. And then it will push that data out to Google Analytics. And I don't know hot jar and all these other tracking things out there that are are going to track you across the web. I haven't checked it out. But I know that's what a lot of people use in the big business world word. - -39 -00:28:22,680 --> 00:30:11,010 -Scott Tolinski: Cool. Next one is from Kumar appear up if I got a last game that you think that was good, nailed it. Cool. Yeah. Good. I'm glad about it. I just went for it. I didn't, there was no hesitation there. This question is, what's your best tip for young coders to stay productive and not lose time. And my tip is to make it easy on yourself. Because a lot of times, we think that there's some like that, we're going to be good enough to just buckle down and do this productivity stuff. And I've talked about this before, but I use applications like one called focus for Mac OS, and I don't know several for my phone and things like that, that block specific apps that I know I reach for, they block specific websites that I know I reach for, and a lot of these like focus for Mac will shame you by giving you a quote about like wasting time or something. And every time I get one of those quotes, it makes me feel upset that I decided to open up, you know, Reddit or something while I'm should be working. So I highly recommend letting the robot do the blocking for you. It's not like hey, like I don't have the self control. But these things help you build the self control. Another thing you can do is to stay excited about the work that you're doing whether or not it's a problem or a technical issue, or maybe it's a new new thing you're trying to learn. I am always more productive. I'm always more in the zone when the thing I'm trying to learn is something that excites me It gets me going it makes me want to to work on it. And I follow that down the rabbit hole, right? It's like I got to work on this thing. And so for me, that is the most important thing to stay productive is to really Enjoy and be excited by what you're doing. And in those times when you're not excited, you're enjoying it, block of the stuff, take breaks, go on walks to that sort of thing. That's how I do it. - -40 -00:30:11,040 --> 00:30:52,920 -Wes Bos: Yeah, totally. I think first of all, you're 17, you could spend 10 years, I still be younger than Scott and I, at this, this kind of thing. So you have tons of time, I know that you feel like you want to rush into it. And you want to be building this like amazing stuff. I remember that all too well, of you're just hungry to build stuff. But your skills are way behind where you actually Wish you you were. And the idea is that you just like how do I like rush through this so I can get to that. And first of all, you can just put in put in lots of time. But second, I wouldn't sweat it all that much. Because you're so young, that you can probably get really, really up to speed and become a very good developer in probably like three, three and a half years. - -41 -00:30:52,950 --> 00:30:57,570 -Scott Tolinski: Yeah, I was very productive at that age at the skate park. And that's pretty much it. - -42 -00:31:00,660 --> 00:32:06,810 -Wes Bos: Just true. Like I was actually building websites at this point, myself, but I didn't feel like there was so much on my shoulders, it was just sort of a fun thing. And that's what leads me to my next point is that excitement about what you're working on is the biggest productivity hack. So she when you are first starting it on, if you try to like force yourself into it, if you try to put in too much more time, then then you should that's like a great way to to lead to burnout. And that's a great way to start to hate what it is that you are initially excited about. So making sure that you do have good balance, whether that's hanging out with friends, going to the gym, having other hobbies is pretty important as well. Also with that we have a whole show on productivity that are other hacks because like I have that myself, I just deleted the Twitter app from my my computer for this week, just to try it out. Just trying to use the web interface because I find that I probably will spend less time doing that. Nice. So yeah, good luck. Kumar. 17. Seriously, if you keep at it, you could be in a really good spot where you're going to be much younger than then most people would where when they even thought about starting. Yeah, web development. - -43 -00:32:06,840 --> 00:32:07,860 -Scott Tolinski: Yeah, absolutely. - -44 -00:32:07,920 --> 00:32:20,070 -Wes Bos: Hey, Wes. And Scott, I am 17 and learning web dev. So I might have insinuated that the last asker was 17. You might not be but hopefully you're 17 as well. And learning web dev, I'm - -45 -00:32:20,489 --> 00:32:21,990 -Scott Tolinski: concerned coder coder, - -46 -00:32:22,019 --> 00:33:49,800 -Wes Bos: a young coder. Okay, that's fine. I'm pretty concerned about my skills and have an I am having imposter syndrome. I am not sure if I should start freelancing. Please tell me if I'm ready to freelance work. So I really like this question. Because I was in these shoes when I was 17. And I remember being like, Am I Is it okay, that I, I do work for other people. Because I don't have a company. And I'm just this guy on the internet. I know how to make websites kinda. But is it okay that I would charge people money for this kind of thing. So I think the important thing to note here is yes, you start taking on freelancing work here. But make sure that the type of works that you take on is low stakes. So whether that's like one of my first websites ever was for a pool company, it was just a friend's dad needed a website for his pool company to go online. And that was really low stakes, because it was just a pamphlet website where we had some photos and some contact information and some information on there. So low stakes, family, friends, volunteer for people who a website is not going to make or break their business, because it is possible that you will hit a roadblock and it'll take you longer than than you think. But I also know that I grew so much in that time myself where I was really because it was for money. And because it was for somebody else, I had to push through those hard times. And I had to I had to make sure that I learned it. Because just shelving it because I didn't think I was there yet was just not an option. - -47 -00:33:50,100 --> 00:35:39,650 -Scott Tolinski: Yeah, and at this age, you might not have the best freelance skills, especially if you don't have any prior experience. So don't expect everything to be easy going because one, you might not have great communication skills. That's something that you're going to learn and you're going to practice quite a bit once you actually start freelancing. And two, you might not have these skills to work with clients yet because you haven't had that experience not just talking to clients, but like, actually understanding what a client wants. Because one of the problems that I faced when I first started freelancing is I had this idea in my head of what this site could look like. And that idea did not necessarily match one to one with what the client saw. And because I thought I was the person who had all the answers, obviously I didn't. I was trying to move their direction closer to my direction, when in reality, you want to be working close more closely with what they want to be seeing, right. Like I had this vision, and it wasn't about my vision. You know, it took me a little while to learn. That's not about my vision. It's about their vision. And these are sort of a lot of skills that you need to pick up but again, the low stakes aspect of it is Totally key because you don't want to get in over your head too quickly have a big problem, have a bad experience and feel bad about it or whatever. I mean, everything's a learning experience. But again, low stakes will help you very much so. And if you want to gain some skills to become a freelancer, maybe avoid these potential pitfalls at all, because, well, who likes failing things or having problems, you might want to pick up a course on freelancing. And there's a really excellent course that we recommend over here at syntax called how principles to freelancing course. And this thing is really great. So it gives you a ton of stuff. So with more about this course, is Wes. - -48 -00:35:39,780 --> 00:37:19,320 -Wes Bos: Yeah. So Kyle prinsloo, sponsored a bunch of episodes in the past, and he is back for another episode, which is great, which means that a lot of you are buying the course and enjoying it, which is cool. So the thing about freelance is that you don't necessarily like have a mentor or a boss or a company that will help you learn, especially the skills that is like talking to clients and positioning yourself blogging, SEO, marketing, how to get paid how to how to price yourself. So if you want to learn the skills, that is everything surrounding freelancing, you want to check out study web development, comm forward slash freelancing. And this is a complete bundle that includes a freelancing and beyond ebook, a whole bunch of HTML and CSS templates, private Facebook community, which I think those are, I'm part of a whole bunch of these private Facebook communities for different things like I'm part of one for email marketing. And whenever I have a question about something very specific, it's nice to be able to post it in there. Because first, it's private, it's not embarrassing to just ask the entire world. And second, you get people that who are also invested in the exact same thing, you get access to the slack as well portfolio a whole bunch, I'm not going to go through everything that is in here. Because there's all kinds of questionnaires and checklists and whatnot, you can check it out at study web development, comm forward slash freelancing. So pretty cool little package, or not a pretty cool, huge package that we've got here, and you want to buy the bundle. And if you use the coupon syntax, all caps, you're gonna get 25% off that. So go ahead and grab it at study web development, comm for slash freelancing, big, big - -49 -00:37:19,320 --> 00:37:21,440 -Scott Tolinski: package. That's what I got. - -50 -00:37:24,230 --> 00:37:40,080 -Wes Bos: Next question we have here is about react, native question is React Native. What is it? How do people tend to use it? If you want a native app and a web app? Are they're separate? Or do they share code? Can we start nagging west to do of course on it, David? Hey, all right. - -51 -00:37:40,109 --> 00:39:59,340 -Scott Tolinski: Yeah, so React Native. It's a platform for building native apps, how do people tend to use it, they tend to use it a lot like any sort of react based platform where like, create react app or something where it gets you started. But more so than that. They use it to build a full out native app. And sometimes it starts with create react app, and then you move it into an Android environment or in Xcode environment. But typically, I think that when it started in React Native, it typically stays in React Native, if you want a native web app, or native app and a web app, are they separate? Do they share code, they typically do not share code, it's a misconception that it's like a right once publish everywhere sort of platform. And it's more of sort of a, you can utilize the tools that you know, from web platforms to build native apps. So there isn't necessarily code sharing. Now there is something called React Native web, which allows you to use React Native components for the web, which then would allow you to share some code. But I have not used that myself. I know there, there are people that use it, who like to have that aspect of it. And that seems like a pretty interesting Avenue, but just out of the box. Because native environments have very different things like the styling aspects of a native app is very different than web styling. The components themselves, you know, there's no standard HTML tags, you have things like a view and a list view and things like that are touchable area instead of a button. So there are some pretty big differences that sort of bridge the gap but that said that you still get to use all of the React goodness that you know and love, you want to use react as you you know it you can do so. So that's typically why people love React Native now, I personally have a couple of React Native courses on level up, and it's pretty cool platform, I will caution that it is one of the more frustrating platforms that I've worked on. things break for no reason. Occasionally, compilers give you error messages that just restarting the compiler fixes. And sometimes your entire project gets in the red and it's a little tough to get out of it. Now it seems like there's been a lot of progress about React Native being made. And I think this year will be really interesting for React Native in terms of how it's simplified and how it's improved and how it grows as the platform because it seems like every React Native grows quite a bit. - -52 -00:39:59,550 --> 00:41:27,150 -Wes Bos: Yeah. I think we should mention like, the idea behind React Native is that the UI like the the interface of your application is native, meaning that on iOS, it's built in the iOS, like Scott said, you have a viewport and you have a text tag, and you have an image tag. So you don't use HTML tags, and you don't use CSS to style it, you use the native thing. And that's why the React Native apps feel good. We've all been on websites where they don't feel like they've been done natively. And then there's also one for Android as well. And then a lot of the business logic is then done in JavaScript. So obviously, you make all of your classes in JavaScript. But if you've got a whole bunch of logic around fetching data, filtering, data, authentication, all that stuff, often, that business logic, it will be written in JavaScript unless it's something that you have to use a native bridge for, in order to talk to it. So I haven't built a whole lot in React Native, just a couple little apps as testers here or there. But I do know that you can share libraries or like shared business logic between the two. But as Scott said, it's not right once deploy everywhere, you still you need to rewrite your your UI once for every platform. So once for the iOS, once for the web, once for Android, if you do have some like logic that's around data fetching or filtering data, or anything like that, that sort of behind the scenes that can be shared between all of them. - -53 -00:41:27,230 --> 00:41:38,670 -Scott Tolinski: Yeah, and you could share quite a bit between iOS and Android. And there are even some, like theming libraries that will spit out the human design guidelines and the material design guidelines with the same components. So you don't even have to think - -54 -00:41:38,670 --> 00:41:40,130 -Unknown: about it. Oh, that's cool. - -55 -00:41:40,170 --> 00:41:54,480 -Scott Tolinski: Yeah, when I write React Native, I'm typically not doing two separate things, unless it's like, okay, now I have to account for the Back button in in Android or something like that. But there is a good amount of reusability there, in my opinion, or in my experience, - -56 -00:41:54,510 --> 00:42:30,480 -Wes Bos: that's cool. People ask me all the time about React Native, and I just send them to Scott, because I've looked at it, but the there's a lot of like churn in React Native, and that thing would go out of date so quickly. It does a lot of tooling. I think it's just a bit like hard at least last time I saw it, it's a bit hard. And often when things are like Scott says it's, it's it's frustrating. Often that frustration comes back on me as a tutorial maker, and not necessarily the the framework itself, which it might be me, and in some cases, it certainly can be. But I know in a lot of cases, it's just a frustrating framework to work with, because it's so new. - -57 -00:42:30,540 --> 00:43:26,040 -Scott Tolinski: Yeah. And it's funny because I would I would list, my one large React Native course I did is maybe one of the worst professional decisions I've ever made. Now, I don't I don't sell this course anymore. But I always like, Alright, I'm gonna go all in and I'm going to make a huge course it's going to be giant, it's going to be all encompassing. And it was seriously out of date in like, two months, and I spent so much time on it, and it like absolutely crushed me. So that's one of the reasons why I was like, Okay, I'm gonna do smaller, especially if I'm approaching this from React Native smaller tutorial series, they go out of date, I can just redo it. That said, I do have a new intermediate level React Native series coming out in 2019. No total announcements on that yet, but, uh, it's gonna be really cool. I have a lot of interesting ideas going on here. And I think everyone is going to be very excited by it. So that's all that's all I can say. Right now. - -58 -00:43:26,040 --> 00:43:50,580 -Wes Bos: Somebody sent me a message on Instagram. The other day, I posted my screenshot on my Google Home app with all my lights and stuff in it. And someone said, Did you know that's built in React Native? And I said, ha, I didn't I didn't really true. I didn't know if I don't know if that's true or not. But maybe maybe somebody knows. It's a good example of of apps that are built in React Native tweet us at syntax FM, because I would love to check some of them out. - -59 -00:43:51,030 --> 00:43:59,880 -Scott Tolinski: Yeah, I want to see some cool. Well, I think that's it or do you want to move on to a sick pics? It's been a little bit of a while here. So do you have? Yeah, take for us. - -60 -00:43:59,910 --> 00:45:51,660 -Wes Bos: So I've got two sick pics. Is I finished that I've it's what days Today is January 8, and I've done two books in the year already. Like I'm on fire. So I did the book, would you recommend it called Bad Blood which is about theranos Holy smokes. What what enjoyable, twisted crazy did is write a story. So it's it's a book about how the startup in Silicon Valley was going to revolutionize blood testing with the prick of a finger and turns out it was all lies and it's it's nuts. So I recommend that that's just kind of an aside because Scott's already sick pick that but I'm going to sick pick the chip Gaines book. I also read he's got a book. Yeah, it's a chip Gaines is the husband of Joanna Gaines, who and they are the stars of the fixer upper and Magnolia Empire. And me and my wife Caitlin admire them quite a bit. They're about 10 years older than us. They're both entrepreneurs. They're both sort of go getters And we see a lot of hopefully we see a lot of similarities between them. And so I went and grabbed his book and I listened through it, it's it's only five and a half hours on audiobook, I listened to it at like 1.75 x. So it only took me a couple hours to get through it. And he's just got an awesome outlook on life. And in terms of like talking to people talking with employees, how to treat people how to how to take risks, how to love mostly, he's just like family first, it just crazy because they shut down their TV show, which was the most popular show on cable television. And in the height of it, they shut it all down because it was becoming too much to run their business, run their family and do this TV show. So I really enjoyed it. Somebody else told me to check out the other one, which is the Magnolia story, which I'm gonna I'm gonna check out as well. So that's a sick pick for me. - -61 -00:45:51,720 --> 00:45:54,630 -Scott Tolinski: Nice. I'm gonna have to I didn't know he had a book. I'm a big fan of, - -62 -00:45:54,960 --> 00:45:58,380 -Wes Bos: I forgot to say what it's called. It's called capital gains. - -63 -00:45:58,380 --> 00:45:59,100 -Scott Tolinski: That's and the tagline - -64 -00:45:59,100 --> 00:46:02,430 -Wes Bos: is smart things I learned doing stupid stuff. - -65 -00:46:02,880 --> 00:48:48,360 -Scott Tolinski: Love it, love the title, then they're one of those if it's just too too good to too good. I'm gonna pick pick something that is for the New Year new type of person. And that is going to be the tidy up show on Netflix, if you've got watches or tidying up, sorry, tidying up, yep, with Marie Kondo. And this, I think came out on Netflix, either like January 1 or second, I was like flipping through Netflix, and I saw it. And I had never read her book, I was aware of her book. Her book is called the life changing Magic of Tidying Up. And so we I watched the first episode and maybe like 15 minutes into the first episode, I was like, Courtney, not like you have to watch this. But you're going to love this show. And I think I should stop watching it. So we can just watch it together. And we've since gone through every episode of the show, because it is brilliant. It's like It's like hoarders. But without the shock and horror, sensational sort of stuff. It's like actually useful. It's like, here's some people's houses that are very normal people. And here's the various states that they exist in. And here are the various issues they're encountering. And she comes in and teaches them sort of her method about tidying up and cleaning up. And you might think that there's no way that that could fill up eight shows. But every single show has sort of a different angle, a different story, and only a totally different learning experience out of it. And it's like one of those ones that after the end of each episode, there's like almost like an overarching message about it, about the experience. And I just found that so, so good. I'm sure a lot of people have tuned into this already. I was so good that by the second episode, I bought her book, I read her book in one day. And you should see our house right now our trash bin is full, but filled up for like weeks and weeks and weeks. Now, our recycling, we have two recycling bins and they are just jam packed. Our donations are we had to move them into a whole room of their own because the donations were taking up so much space in our house. And we aren't we're not hoarders we don't really have that much stuff. But we were you just look around and you think, yeah, do I really need this and maybe I'll Instagram a photo of my dresser drawers right now because they are impeccable. And every single day I wake up and I open my drawer and my shirts are all there and this little specific folding method. And I select one out, and it brings me joy. And I'm all in on this. It is like it's so funny, because it's like, we weren't really that messy people but we have a new baby coming into our house and we want everything to just feel so much better. So I'm just, I'm pumped. I love this show. I'm gonna rewatch it. Man, - -66 -00:48:48,420 --> 00:49:11,400 -Wes Bos: Caitlin and I were looking at it the other day and we're gonna watch it together and I think tonight is the night that we are yeah both around. So it's so good. We I think we Kaitlyn read the book a couple a couple years ago and we did a huge purge of our house and and now that we've got the next baby coming in now we're just like, getting rid of everything left and right and donating everything. And it's crazy how quick that stuff sort of creeps in. - -67 -00:49:11,550 --> 00:49:20,880 -Scott Tolinski: Yeah, I had like a VHS is that us? I don't even have the edges player in the house. It's like, why do I have this? Like, I don't know why I just held on to it because it was one of my favorite movies. So - -68 -00:49:21,000 --> 00:49:21,930 -Unknown: I don't know, man. I - -69 -00:49:21,930 --> 00:49:25,200 -Scott Tolinski: gotta watch it somewhere else. I mean, it just changed the way I thought it I stuff. - -70 -00:49:25,230 --> 00:49:28,290 -Wes Bos: Yeah. Sick pick. What about a shameless plug? Shameless plug, - -71 -00:49:28,530 --> 00:50:12,840 -Scott Tolinski: I have a new course on styled components called level one styled components. And this course is all about building a system to grow your design with. So it's all about structuring your styled components, different libraries that work with styled components, how to do sort of bem style work within styled components using various libraries, how to get some of that functionality back that maybe you're missing from SAS, with some other additional libraries, and really just how to structure organize and keep your code in a way that makes it really shine. Makes it spark joy with your stealth components. So check it out level one style components available at level up tutorials, comm you can sign up for the year and save 25% or percent your choice. Yeah, - -72 -00:50:12,870 --> 00:50:53,430 -Wes Bos: that's it. Awesome. I am going to plug all of my courses. So I'm just looking at our stats on our podcast is growing every week. So if you are new to the podcast, Scott and I make courses, Scott has level up tutorials I have, I don't have a name for it. It's just the Wes Bos courses. And I have all a list of all of my courses available at Wes bos.com forward slash courses, bunch of free ones and a bunch of paid premium ones. And they are all currently on sale who just for a little New Year, you can use the code syntax for I think it's an extra 11 bucks off as well. So you can sort of stack that on top of the current sale. So enjoy if you want to learn anything about react or ESX or graph qL or you name it. - -73 -00:50:53,430 --> 00:50:55,770 -Scott Tolinski: I'll teach it to you. You name it - -74 -00:50:55,920 --> 00:51:05,130 -Wes Bos: except for React Native or new j s apparently. That's my new year's resolution is before the end of the year to do a show on view. - -75 -00:51:05,160 --> 00:51:06,930 -Scott Tolinski: Oh my gosh. - -76 -00:51:07,950 --> 00:51:10,620 -Wes Bos: Awesome. So that's it for today. Anything else to add? - -77 -00:51:10,620 --> 00:51:11,160 -Scott Tolinski: Nothing. - -78 -00:51:11,160 --> 00:51:14,040 -Wes Bos: All right. We'll see you next week, dude, pace. - -79 -00:51:16,020 --> 00:51:25,800 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax109.srt b/transcripts/Syntax109.srt deleted file mode 100644 index c8d075294..000000000 --- a/transcripts/Syntax109.srt +++ /dev/null @@ -1,108 +0,0 @@ -1 -00:00:00,359 --> 00:00:22,320 -Unknown: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott El Toro. - -2 -00:00:25,950 --> 00:02:18,690 -Scott Tolinski: Oh, welcome to syntax in this hasty treat, we're going to be talking all about CSS Grid level two, aka CSS Grid with sub grid. Now, I'm very excited for sub grid. Wes is very excited about sub grid. And we're gonna be telling you a little bit today about why you should be excited about sub grid and the changes improvements coming to CSS Grid. So my name is Scott Tolin ski. And with me, as always, is Wes Bos. Hello, everybody. Hey, this episode, this hasty treat is sponsored by century. Now you can head on over to sentry.io. And check out everything that Sentry has to offer. They are the best place to solve your bugs. I had a really interesting bug this weekend actually, in which a an edge case of certain people were getting declined notices on their credit cards when they weren't actually declined. And this, let me tell you century's interface made it so easy for me to determine how people were having this bug who was having this bug how many people were having this bug, right, I could tell if it was an emergency situation, or just a, you know, a little situation. And sure enough, it was an edge case here. And I could figure that out. But century absolutely saved my bacon this weekend, being able to gain the visibility into these issues. So Sentry tracks all of your bugs issues, keeps them all in one lovely place, and allows you to make sure that they are taken care of correctly. If you want to sign up for Sentry and get two months free, you can hand that over to sentry.io. and sign up, use the coupon code at tasty treat all one word, all lowercase, tasty treat. And again, you'll get two months free of century it's something I highly recommend. It will save your butt. - -3 -00:02:18,810 --> 00:04:17,880 -Wes Bos: Awesome. Also century is hiring. I said I'd shout this out. They are hiring a whole bunch of positions. But the one we're shouting out is the developer evangelist. So if somebody what is the developer evangelist, it's a you're a developer, but you're sort of public facing for the company, you're creating video tutorials, speaking at conferences, being on Twitter, and just helping people out in general, I was thought that was a pretty cool job to be a developer evangelist. So they are looking to hire someone for that they are headquartered in San Francisco. But Ben did mention that remote is possible, especially as a developer evangelist, I think you do a lot of flying, going to various conferences and whatnot. So seems pretty cool to work there. You get a GIF when you are hired. They like create this hilarious gift for you when you get hired, which seems cool. There's other minor stuff like medical coverage, and dental and minor stuff like that. So just check it out. We'll link it up just century.io forward slash careers. If you're interested in applying for that we should get some syntax Pham, working at century. Nice. All right, so let's talk about CSS Grid, or level two or CSS sub grid as it's called. So we've had CSS Grid in the browser for probably about a year and a half now, it's starting to become extremely popular, people are starting to implement into their own applications because of the browser support. And one sort of thing that we run into is this problem of being able to align sub sub items of a grid face on the parent grid. So we're, this is gonna be a bit hard because it's very visual. But we're gonna use the the concept here of a grid, a grid item. And then a, we'll call the the third item that is inside of the grid item, a grandchild item. So you have the main grid, you have your items inside of that. And then in each of those items, you might have more sub items or more grandchildren items. So yeah, - -4 -00:04:18,450 --> 00:05:09,950 -Scott Tolinski: I like to think of it as like you have the grid, right. And you have your children, right, which adhere to that grid, but the children inside of that child need to adhere to the same parent grid right now as you can't do it. Like this is about the, like you said the grandchild right, that needs to adhere to the larger grid. And this is like one of those things that you might not understand the benefit of it until you see some really practical examples. And we'll give you some links, some blog posts and stuff to look at to see some nice little visuals explaining some of these use cases. But again, I like to think about it's like you got something nice Did that needs to adhere to a larger grid, there's some really, really cool things about CSS Grid level two or sub grid that we will be getting into in this episode stuff I'm very excited about. - -5 -00:05:09,990 --> 00:07:15,600 -Wes Bos: Yeah, if you're at your computer right now, head over to the show notes at syntax FM and click through to Rachel Andrew wrote a blog post on her own website, as well as a blog post on smashing mag. And she's obviously one of the developers defining she's worked for, like eight years on defining what CSS Grid is, if you google anything, CSS Grid, her stuff is going to come up. So we're gonna attempt to break it down. Why do you need it? What is the problem? And how does it actually work? So here's the visual problem that we have, like Scott said, It's when your sub items or when your grandchildren items need to adhere to the parent grid currently, that's that's not possible. So if you have like a layout of cards, where you've got three cards across this example that they have in smashing mag, you have a grid with three columns, and each of those columns has a card. And then inside of that, each of those cards, you might have a heading, you might have a footer, and you might have a content area. And you want all of those heading content areas and footers to align with each other, the problem that you have is that you could give your headers like a fixed height, where you just like figure out, oh, here's the biggest one, and you give them a fixed height, and then they all look the same. But ideally, you don't want to give your items a fixed height or a fixed width, you want to just let the content decide. And you want all of the cards headings to be exactly the height of the largest card item, item, but they're not related in any way. So this idea of sub grid is that you can have correspondence between all of the grandchildren items with the sort of parent grid that we have. So that's helpful for card layouts, that's helpful for whenever you have like, I've often had an option where like, let's say you have a list of buttons. And then you have like you have three buttons, and then maybe you have two additional buttons, but they're wrapped in a div. And that becomes a problem because you know that the grid is only between parent child and not parent grandchild. So sub gradable will sort of alleviate this issue that we have. - -6 -00:07:15,780 --> 00:08:29,490 -Scott Tolinski: Yeah. And the coolest thing about sub grid, in my opinion, besides what it does is how easy it is to use. Because you have this layout, right? Like you mentioned this card layout. And you might be thinking like, Well, how do I how do I attach this thing to the parent? Well, all you have to do is define either or both of the Well first you have to declare that the child is a display grid itself, right. And typically, that just creates a new display grid. And then you have to give it some grid template columns and some grid template rows. But with sub grid, you can take either or both of those and just say, hey, the grid template columns and rows are based on sub grid. So the property value is just sub grid. And then all it does is it adheres to the larger parent grid to get its values. And it's going to stay in line with that parent grid. So you don't have to redefine the fractions, you don't have to redefine the column width, you don't have to redefine any of that stuff, simply by having the value of subgrid. It just looks upward in the chain to what that grid is. And it's going to adhere to it. It's it the syntax for it is so dang elegant and beautiful. Yeah, - -7 -00:08:29,490 --> 00:08:44,370 -Wes Bos: I thought it was so cool. Because you don't have to define your grid item. You don't have to define like a span or a start or stop on that. But you can just then go one level deeper and define a span a start or stop on that sub item. - -8 -00:08:44,460 --> 00:09:05,070 -Scott Tolinski: And you can mix and match I mean, so you can use you can buy this giving it display grid, you can tell look columns to be sub grids. So the columns will add here to the parent grid. And you can tell the rows to be its own thing with its own row width or its own row height. Height. Yeah. - -9 -00:09:06,120 --> 00:09:09,170 -Wes Bos: blanking on the word heights how to rows work. Yeah, yeah. - -10 -00:09:10,400 --> 00:09:18,900 -Scott Tolinski: You can define all the the totally separate, completely separate grid while still maintaining that sub grid for the columns. That's, that's superduper. Cool. - -11 -00:09:19,110 --> 00:10:05,640 -Wes Bos: Yeah, that's, I think this is going to be extremely helpful in a couple situations first, when the designer designs that thing, and you're like, well, that's not really possible. Now you can and then the other thing that is going to be helpful is when you use like a CMS that gives you the HTML Yeah. And it dumps out and often especially things like WordPress, Drupal, whatever, they will just dump out some HTML for you. And your hands are tied. You can't like move things up a level and have them as grid items. Now you can one thing I didn't find out and I looked for this for quite a bit is how can you can you sub grid more than one level deep meaning that if you have items nested more five, six levels deep. Can you sub grid sub grids sub grids sub grid? - -12 -00:10:06,240 --> 00:10:07,980 -Scott Tolinski: Let us know. I don't know, either. - -13 -00:10:08,010 --> 00:10:15,690 -Wes Bos: I don't think you can. But I like all of the examples I saw were just three levels deep. Yeah, but maybe I would love to find that out. - -14 -00:10:15,810 --> 00:10:54,510 -Scott Tolinski: Yeah, please let us know. We will tweet you out. If you have the the answer for that one. It is funny. You mentioned the CMS thing. We used to have this there's a long running joke at one of our agencies, because we did a lot of Drupal and Drupal loves to give you a lot of Dibs, just a lot of divs. And we used to be like, Well, why don't you add a class to this div over here. And then we can do this. And then the other dev would be like, oh, because it's Drupal? Like Okay, okay. Okay. Well, why don't we add this and this and this? Because it's Drupal? Oh, okay. Okay. So, like, I love that the the CSS is going to get better in a way that your hands will no longer be tied on some of this stuff. - -15 -00:10:54,570 --> 00:11:59,550 -Wes Bos: Yeah, I think back to all of the JavaScript I used to write was just doing things like equalizing columns where you found the max height of three of them, and then, and then every resize, you had to like, change it. And that's no more you don't have to write any JavaScript for that. It can all be done with CSS Grid and CSS sub grid, we'll talk real quick about browser support. It's not in any browser, yet. This is still a a Working Draft, the last it was updated was October 2018. It's looking like it's nearing completion, what we will probably start to see next as this thing, as the spec is wrapped up, we'll start to see browsers actually implemented behind a, a feature flag. So you have to go in and turn it on to play with it. And then and then once that's out, it'll start push it. So it probably is, at least I would say probably at least a year out. This is just me, looking at what it's at right now, before we can actually start using in the browser, maybe even longer if you want to wait for browser support. Yeah, but I also did see somebody somebody implemented it with Houdini, which is so cool. You could - -16 -00:11:59,640 --> 00:12:01,080 -Scott Tolinski: it's almost like a polyfill. Yeah, - -17 -00:12:01,110 --> 00:12:04,200 -Wes Bos: yeah. poly filling CSS that's not available yet. - -18 -00:12:04,380 --> 00:12:42,450 -Scott Tolinski: Yeah. Huh. Huh. What is it? I think Rachel says in her smashing mag that it's like, a year out ish. And that's in July 2018. So I would love, love, love to be able to start working on this in 2019. And, you know, I, again, I think there are a lot of solutions. There's the areas of the level of tutorials website that I look at, like specifically like the products listing, and maybe the tutorial cards, and I'm just thinking sub grid would be absolutely perfect for me right now. And so I'm, I'm ready and waiting. So after listening to this episode, I hope you are ready and waiting as well. - -19 -00:12:43,530 --> 00:13:06,510 -Wes Bos: I think also, electron apps are going to benefit from this because a lot of people build, like I use a couple electron applications where the interface is very complex. And I can imagine that they would be really helpful to build these complex application interfaces. And the beauty of that is that you can just as soon as it hits electron, you can start using it. You don't have to wait for all the different browsers to catch up. Very - -20 -00:13:06,540 --> 00:13:08,610 -Scott Tolinski: Yeah, that's a big plus, I never thought about - -21 -00:13:08,640 --> 00:13:36,870 -Wes Bos: Yeah, so I'll recommend you check out this smashing mag article, Rachel goes into talking about how you can also name the lines as well, you can name the lines on your main grid. And then because the way CSS Grid works, you can also you can give a lines, multiple names, as many names as you want. We've done that in a couple of my CSS grid.io tutorials. But you can also name the sub grid lines as well, which is pretty nifty. I thought that was pretty cool that you could do that. - -22 -00:13:37,079 --> 00:14:01,500 -Scott Tolinski: Yeah, I love that just simply by declaring that X, Y, and Z or your your rows or columns, in particular, are in subgrid, that you can be sure that when you're giving it specific values, it's always going to go up to the parent. I think that's it just seems like it just works. And I can't wait to use it because it again, it's just exciting. I feel Yeah, this entire episode is just like, I can't wait. Sounds great. Yeah. - -23 -00:14:03,000 --> 00:14:27,270 -Wes Bos: Yeah, it's pretty. It's also like you can read through the entire spec in probably 20 minutes. It's Yeah, it's pretty simple. Like, I think we're done the podcast. Yeah, that's it. It's a pretty simple thing. Obviously, they've taken lots of time to make sure that they absolutely nailed it. This is not an easy thing. layout in general is not an easy thing to spec out. But I think once it comes to just us using it, it will be definitely really easy to use. Yeah, - -24 -00:14:27,270 --> 00:14:31,170 -Scott Tolinski: absolutely. Cool. Do you have anything else on subgrid CSS got - -25 -00:14:31,170 --> 00:14:35,250 -Wes Bos: it for me. I'm excited for it. And that's it. Awesome. - -26 -00:14:35,490 --> 00:14:50,940 -Scott Tolinski: Cool. Well, I look forward to it as well. And All right. Well, that's it. We will see you on Wednesday for a full on tasty treat piece, please. Head on over to syntax.fm for a full archive - -27 -00:14:50,940 --> 00:14:57,660 -Unknown: of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax11.srt b/transcripts/Syntax11.srt deleted file mode 100644 index 423a0ba51..000000000 --- a/transcripts/Syntax11.srt +++ /dev/null @@ -1,468 +0,0 @@ -1 -00:00:06,000 --> 00:00:11,250 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:14,490 --> 00:01:21,330 -Wes Bos: Hello, everybody, welcome to syntax. We're here again for another sweet podcast full of tasty treats. This podcast is sponsored by fresh books, cloud accounting, go to freshbooks.com Ford slash syntax and enter in syntax into the head to hear about a section. We'll hear a little bit more about them partway through the show. Today, we're talking all about productivity hacks, how do you squeeze that extra little bit of time, or productivity out of your computer out of your workflow, these little things, these little changes to your life, whether it's a specific app, or whether it's a way that you tackle something can can really help you get an extra 2030 40% out of the way. And sometimes you see these people and you go, like, how do you get so much done. And it's almost like, it's almost always that they have some sort of system in place, they use a bunch of tools, they've spent the time focusing on their process and their productivity so that when they actually gets down to work, they can have a lot more output than normal. So I'm a huge productivity geek. What about you, Scott? - -3 -00:01:21,839 --> 00:01:44,520 -Scott Tolinski: Yeah, it's one of those things you can't, you can't ever get too much of Well, I mean, you probably get too much of it. Yeah. But it's one of the things you can really optimize so many things that you may not even understand are holding you back and various Time, Time sinks and stuff like that. So finding ways to optimize and improve the little stuff is super duper, duper handy, pretty much 24. Seven. - -4 -00:01:45,540 --> 00:02:30,840 -Wes Bos: Cool. So why don't we start off with probably both of our favorite productivity tool, which is Alfred. And Alfred is a does a lot of things. But the thing that everyone knows it for is it's that application launcher, where when you hit option space, it opens up this bar that you can type in, and you can type all kinds of stuff in there, most likely you want to open up an application and will quickly pop it open. So you're not rooting through your list of applications. Now, I OSX, or Mac OS has totally ripped that off in the latest version. However, it's not nearly as good. So if you're using that, I definitely recommend you switch to Alfred, and let's talk about why why do you like it? Scott, what do you use it for? - -5 -00:02:31,130 --> 00:04:24,320 -Scott Tolinski: Yeah, I like it for Well, in addition to like doing sort of custom workflows, there's just a lot of little handy extras, I mean, even doing all of your math directly in it, you can just do the quick math right quick math pops up, you don't have to open a calculator or anything like that. Actually, I think the Mac OS version can do that too. But it gives you a lot more options to have more of these type of things, right. And you can build your own custom ones directly within Alfred. One of the things I use Alfred most for is getting myself set up in a particular environment. You know how many times let's say I'm working on a WordPress site, you have to go to your apps, your doc open up MAMP or whatever way you're serving your PHP. And then you have to open up your browser localhost port eight, whatever, you have to do all that stuff, and I have mine, basically, I can just do you know, command, enter, and I can start typing MAMP Ma, it will open up MAMP it will open up a tab in my browser, and it will just get me set up and started basically saving you a little bit of time here, right? Like three keystrokes for doing something that would have taken I don't know half a minute to click through but still it's saving you some time there because you don't have to do that you know ever again also, I did use it a lot for browser tab stuff right? Maybe there's sites you go to all the time specific locations and for a little while have like all these level up tut's sites, right I have my accounting stuff, I have my my my repos. And a lot of times, if I'm working on level up tough stuff, I want all of it to be open. And I don't want to have to open up all of these tabs, I can just do you know, Alfred, and then type in L UT, hit Enter, and it opens up everything I could need for my accounting stuff, to my app to my death to my repos, any of that stuff in the browser, and it will open up iterm and all that stuff for me. - -6 -00:04:24,630 --> 00:05:07,560 -Wes Bos: Yeah, it may seem like a bit of like overkill to schedule these things. Yes, you're saving half a minute. And that probably will add up over your lifetime and allow you to retire early or something silly like that. But I think also just the the mental energy of thinking, what is it like having to make all these decisions, you really only have so much bandwidth per day to make all these decisions and to figure out what needs to be open. So if you can just like take yourself out of remembering those eight things that need to be open. It's sort of similar to when you're scripting, maybe a gulp task or anything like that. It's Way better to automate that process, rather than to have to remember every single step along the way? Yeah, - -7 -00:05:07,580 --> 00:05:30,600 -Scott Tolinski: yeah, definitely. And like, like you said, these things aren't going to be to shaving a ton of time off. But it does make your life better on a consistent basis. And once you get into that muscle memory of, you know, I'm working on level up lsvt, enter, whatever. Okay, that's it. That's all I had to think about. And yeah, reducing that decision, fatigue is where it'll make your decisions better for the rest of the day. - -8 -00:05:30,840 --> 00:06:12,870 -Wes Bos: Exactly. So Alfred comes with some built in workflows, it comes with the ability to add other people's workflows. And you can also make your own which is, which is what Scott was just talking about. So there's this workflow editor, which allows you to do everything from run terminal commands, which will allow you to output scripts, to open up applications to open up tabs in your browser, you name it, it comes with all of that stuff built in. So being able to customize workflows, and select other people's workflows that are handy. Is, is amazing. So maybe let's talk about some of the other workflows that we use. Um, do you have any? Or do you want me to go? - -9 -00:06:13,590 --> 00:06:35,100 -Scott Tolinski: You can go for me, I pretty much write all my own workflows, which I'm thinking now is probably a terrible idea. As I'm starting, you know, from scratch every time like, Oh, I should should do this. I guess I don't have the the knowledge of like a Alfred riepe repository of like, excellent workflows. Like, I feel like, that would be really helpful for me. - -10 -00:06:35,370 --> 00:07:49,260 -Wes Bos: Yeah. So if you go to Alfred app.com, for slash workflows, you'll see that there's tons and tons of different workflows that will integrate into some of the more common ones out of us is converting a hex to RGB, or being able to do time zones. So if for example, if I want to know what time it is, in India, or in China, or in San Francisco, or in Denver, I just type Tz and then the name of the city, and it's going to automatically pop down a list of all the times. So like, you know, like those people, and I do this myself, when you Google something like what is $100 Canadian in us? Or what is the time in India right now and you have all these things that you Google? Well, you shouldn't even have to wait for your browser tab to open you should be able to access that information right from your Alfred and doing timezones with the timezone one and doing the there's a conversion one that I use all the time for converting money, converting kilometers, converting kilograms to pounds, all of you Americans have the most messed up system for measuring things. So I always need to convert it into a sane metric, or Canadian dollars. And that saves me tons and tons of time. - -11 -00:07:49,650 --> 00:07:57,020 -Scott Tolinski: We know this. I mean, we know this guy I wish so desperately, we could just abandon it all and head to the metric system. - -12 -00:07:57,719 --> 00:07:59,550 -Wes Bos: I don't know if it'll ever happen. - -13 -00:07:59,550 --> 00:08:13,320 -Scott Tolinski: I know. Oh, man, I can't believe I didn't know about this. Yeah, I've used Alfred since like version one. And I've never seen this page on their website. I guess. I downloaded it, installed it and then that was the last time I went to their website. - -14 -00:08:13,350 --> 00:08:39,390 -Wes Bos: Yeah, there's there's one called kill in you know, sometimes you need to kill a process and you open up your Activity Monitor and you hunt through and you find your node process and you kill it. There's one or you just type kill, and it'll populate all of your node processes and you can just type node and then you'll find all the node processes or anything that has the word node in it. It's like a fuzzy search and you can kill them right from Alfred. Which I love that. Yeah, - -15 -00:08:39,450 --> 00:08:42,960 -Scott Tolinski: yeah. Do you use this pack pakal - -16 -00:08:43,289 --> 00:08:45,330 -Unknown: Oh, that's the one I use Dale. - -17 -00:08:45,720 --> 00:08:48,240 -Scott Tolinski: Yeah, cuz it looks like Alfred still links to there - -18 -00:08:49,020 --> 00:09:13,550 -Wes Bos: when you when you go ahead and click off to them. So yeah, I was just manually downloading them on but that's terrible because they'll never update so this package is sort of like NPM for Alphard package. So you can you can install them there's ones for Spotify and iTunes there's a whole bunch of themes on there. I have my own cobalt to theme for Alfred. It's pretty pretty nuts all the different workflows that go into it. - -19 -00:09:15,000 --> 00:09:16,470 -Scott Tolinski: Nice. Oh yeah. - -20 -00:09:16,710 --> 00:10:59,700 -Wes Bos: Some other tips that I use on here is large text quickly. So sometimes you just need to I do this all time when I'm teaching and and I need to get a URL to everybody or I need to post the Wi Fi password or I need to like post something huge on the screen. In Alfred you just open it up and you type your thing and then you hit I believe it's command Yeah, you hit command L and it will just take whatever you've typed into Alfred and put it in big white letters, a black background all over your your screen so kind of neat. I've also used it like on an airplane we Intel people are watching what you're doing this type into it. watching me in the screen. Um, what else? A little tip, when you're doing math, you can turn on the ability to ignore commas. So often all a copy paste like 2000 USD, and that will have a comma after the two, you can turn off the ignoring, or you can turn on ignoring of commas so that it will do the math and ignore the actual commas for you. I'm just trying to think about there's so many that I've used here, and I'm all excited about it. Now that there's some other ones here, oh, font, awesome. Look up. I know that you're not supposed to use Font Awesome anymore, because SVG is the way to go. But if you still have a website with fun, awesome. And you need to know what is the class like fa, dash Twitter, the font, awesome workflow, you just type FA space, and then you can just like, search for the name of the thing that you want. So arrow, play, whatever it is, and I love that because I hate going to Font Awesome website and looking at the 12,000 icons that are available there and searching through it. - -21 -00:11:00,329 --> 00:11:06,450 -Scott Tolinski: This leads me to another thing. entities HTML entities, yes. Is there one for that? - -22 -00:11:06,480 --> 00:11:07,890 -Unknown: There is there's a Okay, - -23 -00:11:07,920 --> 00:11:11,640 -Scott Tolinski: there's a widget for that. And that'd be psyched to not have to use it was like a decode - -24 -00:11:11,640 --> 00:11:21,570 -Wes Bos: and encode. So you you pop in an entity, like EAX something you? And actually like my French accent there? Yeah, you're welcome. - -25 -00:11:21,810 --> 00:11:23,880 -Scott Tolinski: I mean, you are Canadian, there's a bit of that there. - -26 -00:11:23,939 --> 00:11:45,120 -Wes Bos: So it will it will kick out the HTML entity, it will kick out the like, there's like two other ways to encode it like base 64 encoded and like another way, and then if you put an encoded value in there, you can decode it into whatever the equivalent is on there. So that one is I use that one quite a bit as well. - -27 -00:11:45,449 --> 00:11:53,940 -Scott Tolinski: Nice. Yeah, that's it. There's, you know, having to remember the right angle, quote, or rank or whatever. But having to remember those is no fun. - -28 -00:11:54,209 --> 00:12:19,560 -Wes Bos: Yeah, exactly. Here we go. I have a I have a screenshot on my workflows on my Wes bos.com for slash uses. Dev docs. That's another really good one. So if you need the docs real quick for array dot push, you just type JavaScript space push, and it will bring down all the documentation for whatever methods specifically match that one. Ah, let's see. What else do we have here kill. - -29 -00:12:20,220 --> 00:12:33,870 -Scott Tolinski: I'm looking at the this, this pakal site and and see like a Stack Overflow search, I could see that being super useful. Obviously, you could search just like limit your query to stack overflow. But it seems like this is just a nice way of making that super seamless. - -30 -00:12:33,900 --> 00:12:48,990 -Wes Bos: Yep, there's one for turning on. There's a lot that just turn on and off thing. So turn on sleep, turn on flux, turn on Wi Fi, whatever you turn off Bluetooth, you know, you want to toggle these things really quickly. There's a lot of workflows, I would just turn these things on and off real quickly. - -31 -00:12:49,830 --> 00:12:52,470 -Scott Tolinski: Nice. So yeah, big fan. super handy. - -32 -00:12:52,590 --> 00:13:30,090 -Wes Bos: Oh, I remembered one more. And that is Alfred has this built in. And it's the clipboard history. So if you don't mind some application, keeping log of all of your clipboard, you can have a clipboard history anywhere I know sublime tax, and a lot of editors have clipboard history built in. But if you copy something, and then you accidentally copy something else, and you lose whatever was in your your clipboard, this will give you a list of I don't know 10 or 20 of your previous clipboard items. And you can always get them back, which is really saved me saves me all the time. - -33 -00:13:30,449 --> 00:15:24,800 -Scott Tolinski: Yeah, so I'm gonna blow your mind here with an alternative to this. Yes. This is an app that used to be called Well, it was an app called clip menu and it is existed for a long time it was free was just sort of existed, and shit might not have been free. But either way, I hadn't seen an update in forever. And when I went to use my new computer, I found out it didn't. There's no way to install it. The installer was totally broken. So I started to explore some new alternatives to clip menu and I found this app, which is actually clip menu open sourced with a ton of updates called Clippy. So the get the pages Clippy CL IP y hyphen, app.com. And Clippy is basically the continuation of this clip menu app that I use so much. And it is totally configurable. You can say, hey, use, remember the last 100 things I copied, whoa, it can copy a rich media. It can paste in like images and stock images and stuff. It's pretty darn sweet. You can also actually use it as my primary like global snippets manager. The keyboard shortcut on your computer is just Command Shift v. So that's super easy to use compared to Command V, Command Shift v. and you get all of your history, your past hundred things and then your snippets, wood you can organize into folders and stuff like that, which I use pretty pretty frequently. But there's the preferences if you don't want it to copy The rich media you don't want it to save you the last 100 things. You can have it save the last 10 things if you want, but it's open source. So you github.com forward slash Clippy forward slash Clippy, double forward slash clippies. But if you go there, you can see it's totally open source. So you don't have to worry about them, like sending your clipboard history off to another service, because you can go look at the source if you want to. - -34 -00:15:25,229 --> 00:15:42,300 -Wes Bos: This is really sweet. I just, I just installed it. Yeah, super excited for that. Because Yeah, sometimes I have like, like three or four elements in sketch, and I copy them. And then I want to call me something else by accident. I want to still get those elements back. So it sounds like this will do that. - -35 -00:15:42,569 --> 00:16:08,610 -Scott Tolinski: I use this thing. Literally 24 seven. I think like, most of the time, I'm pasting anything. It's it's, you just start to use your computer differently. I copy things freely. Like if I see something, just Command C, Command C, Command C, whatever, you never know when you're gonna need it. Yeah. And then it's always just hanging out in my last 100, clipboard items. It's pretty easy to find. And you can even navigate it by keyboard and stuff like that. So this is what I use for my clipboard management. - -36 -00:16:09,449 --> 00:16:14,700 -Wes Bos: Wow, that's that's great that this is like the whole show them. I can't believe that. I had never heard of that. - -37 -00:16:15,029 --> 00:16:32,340 -Scott Tolinski: Yeah, I well, it. It only it took me getting this new computer to have to find an alternative to clip menu, which I was just so excited to see that it was one open source like the creator allowed it to be open sourced and to that it was so excellent. So yeah, pretty psyched. Pretty sweet. - -38 -00:16:32,819 --> 00:16:46,650 -Wes Bos: So that's that's Alfred, there's so much that goes into Alfred, he even has his own snippets manager built into it. I use something else for that as well. But check it out. If you haven't done Alfred, it's worth spending a little bit a little bit of time with it. - -39 -00:16:47,099 --> 00:16:48,210 -Scott Tolinski: Yeah, absolutely. - -40 -00:16:49,049 --> 00:16:53,970 -Wes Bos: Let's talk about to do apps. What do you use for? Do you use it to do app? If so what do you use? - -41 -00:16:54,209 --> 00:18:49,580 -Scott Tolinski: Yeah, I have one of the world's worst short term memories. I actually, my wife is a doctor of psychology and, and she has done more, you know, tests on me than I can, you know, possibly comprehend while she was getting her degree here. And one of the tests, she found out that my short term memory is so bad that it prevents me from having an IQ. Because I'm I'm really good in some areas and really deficient in other on the short term memory totally kills, like some aspects of my, my IQ test. So I have the world's worst short term memory. And because of that, I need a to do manager like crazy. So I used to do list, which is a site and native app. Well, it's an electron app. And there's a really excellent both Android and iOS app for it. And as far as it goes, it's it's feature rich enough that it's a brilliant to do list with sorting and categories and filters and whatever. But it doesn't overwhelm you with being too. Too much stuff. It's not trying to do too much stuff. It's not a repository for everything. Yeah, you can, it's essentially a to do list and you can schedule and time and collaborate on things with other people. And I use it so heavily that my daily to do list is pretty much planned out on their 24 seven, and anything that I need to accomplish ends up on there first, I use it for sorting of issue queues and stuff like that on projects I'm working on to remember, and I use it for planning my level of tutorial series. I use it for everything. restaurants that I want to go to whatever if I need to remember anything. It goes into detail as to because I'm sure as hell not remembering it. Otherwise, it's - -42 -00:18:49,580 --> 00:18:52,710 -Wes Bos: like sweet, do you? Are you paying for it? Or is it free? Yeah, I'm - -43 -00:18:52,710 --> 00:19:07,020 -Scott Tolinski: paying for it. I've been paying for maybe two years now. A big fan. As far as to do list apps go I like it because it's it's simple, but has enough features. I think that's sort of the sweet spot is what you want it to do. sort of thing. - -44 -00:19:07,050 --> 00:19:07,890 -Unknown: Yeah. For me, I - -45 -00:19:07,890 --> 00:19:30,900 -Scott Tolinski: don't I don't want this monolithic sort of thing that does a whole bunch of stuff other than to do lists. You know, I tried using things like Trello to manage to do lists, and it just did too much stuff that wasn't wasn't a to do list for me, right? Yeah, not that Trello isn't an amazing tool for all sorts of other things. But for to do list. I used to do list big fan big fan. - -46 -00:19:31,170 --> 00:22:54,390 -Wes Bos: That's pretty sweet. Um, this looks very similar to what I use. And I use a thing called things and things is a to do app. And I've used it for probably 810 years now forever. It's funny like I bought it I think seven years ago I finally broke down and bought it and after seven years they released things for which is just about a week or two ago and I easily bought a no problem. I was super happy with it. So things is a to do application for OSX. And I believe there's a Windows version, but there's one for for iOS as well, they'll sync together. And the whole idea behind things is this philosophy called Getting Things Done. And if I highly recommend that you read the book by David Allen called Getting Things Done, it was just released for like, sort of like a modern, like, email based era, it's been around forever, it's like kind of this cheesy, like corporate thing that like, if you work at a bank, you wear it, and it's as cheesy as it is, is really, really good for anyone who has problems, getting things done, being overwhelmed with the amount of stuff forgetting things, unable to, to focus on on the task at hand. So the whole idea behind getting things done is you get it out of your head and into your system. So if it's if you're trying to, like use mental energy to remember these things, that's bad. So you should put it into your inbox, which is things has the concept of an inbox, and you just dump it in there. And then once you are in things once it's out of your head, and once you have some time, you have the ability to assign these things, these tasks to different aspects of your life. So they're called projects in things. So you can drag them into specific projects. So I have one for things that I need to do for my own course platform, things I need to do for the podcast, things I need to do for my entire life, like things that need to be fixed around the house and whatnot. And then every day, or what I'll do is I'll open up things, and there's a today section, and then you drag things out of your, you can drag things out of your different projects and put them into today. So you know exactly what's on your plate, what order you can tackle them in on, they're still associated with a certain aspect of your life. But you can you have sort of like a order of operations, and there's a whole lot more to it, you can assign dates to things, you can have attachments, you can put notes on them, I don't use that stuff all that much, it's part of why I like things is that it's, it will allow you to go as deep as getting things done will let you but on the surfaces surface, it's very, very simple. There's another big one out there called Omni focus, which is like if you can learn to use that you're a monster because it's amazing. And it's just it's like well oiled machine. But it takes there's a big hump and I found it was too hard to get over that hump of learning how it actually works. So if you're interested in like getting things done, read the book, and then get things or to do list or any of these ones that have project based tasks. Because they'll definitely, definitely help you out and simplify your life. You don't have that anxiety of forgetting things or having too much on your plate. - -47 -00:22:54,750 --> 00:23:36,870 -Scott Tolinski: Yeah, and it looks like I'm I hadn't heard of things I'd only heard of to do it. Because obviously you find a solution that works. And yeah, you don't go searching for too much more. But it looks like they do the really the same thing. I'm hearing you talk about this. And it's like exactly how I it's exactly the same anyways. Yeah. So it's funny that we both have the same process. And I also arrived at to do it after listening to getting things done. which I found to be just for for me, like I said, with the short term memory issues it is like it's brilliant when you you feel like actually in control of things. So yeah, getting things done is just a totally invaluable for productivity overall. - -48 -00:23:36,900 --> 00:24:01,380 -Wes Bos: Yeah, I would say I'm just looking at the the website now things is a one time 50 bucks for the Mac App. 10 bucks for your iPhone app, and 20 bucks for the iPad. So huge downsides to that is there's no web interface. And if you move away from the Mac or an iPhone, then you are out of luck. So yeah, I would probably if I was picking it up today, I would probably pick up to do his - -49 -00:24:01,980 --> 00:24:07,560 -Scott Tolinski: To Do List cross platform desktop web, Android, iOS, Windows. Yeah. So don't - -50 -00:24:07,560 --> 00:24:23,490 -Wes Bos: don't get things get what it does, but don't buy it because unless you're you're all in on OSX and not now ever gonna move. Cool. So that is that is our to do apps. What do you got next for me, Scott? - -51 -00:24:24,720 --> 00:26:10,170 -Scott Tolinski: Yeah, let me check. Yeah, so here's something that I use a lot in a more web developer sense here. I use a ton of aliases in my command line. So for I use, I turn with fish shell if you're using bash or whatever, any of these things, you can set up aliases. And you know, I don't know if if everyone sets up a lot of aliases, but if I'm if I'm typing something, essentially more than a couple of times into my command line over the course of a couple months or whatever, I'll set up an alias for it. For instance, even get the the any of my sites running You know, typically you put in a script in your package file, which is, you know, NPM start or whatever. And then you have to type in NPM, run start. And I am so crazy about these aliases that I don't want to have to type in NPM, run start, I want to type in start and just run start it. But in addition, I actually have everything forget, right? You know, instead of doing git add period, or whatever the command that you use, typically for your Git commits, I just do add calm, I use calm for commit calm and then type the commit message, then you don't have to write git commit hyphen, M, then the commit message, just like little things like that, that are really personalized for me, like, I'm not going to publish these things out and have everyone use them because they're, they're, they're terminal commands that I'm personally writing. And they're not meant to be sort of globally used. And I found that writing these very, very personalized get snippets, or command line snippets, can just like really, really just, I don't know, remove a lot of typing from your life, especially things you type a ton, like a git commands, or NPM installs and stuff like that. - -52 -00:26:10,680 --> 00:26:39,360 -Wes Bos: Yeah, I use those quite a bit as well. One specifically that I use all the time is, you know, when you, you start a new project, and then you forget the Git ignore, and then you add a whole bunch of like, dot files or whatever, it doesn't need to go in the repo. And then you have your Git ignore, it's sort of too late. So I have this alias for like git, like, oops, or whatever I aliased it to, and that will just remove anything that's in my dot file that I've previously added. To the repo. - -53 -00:26:39,660 --> 00:27:01,140 -Scott Tolinski: Yeah, nice. I saw somebody had a hilarious snippet that was just like, or alias that was just like, please. And all it did was like rerun the previous command with sudo, and whatever. So you don't have to type the command again, or whatever. And you can just say, Oh, I ran this. Oh, gives you a new permissions error, please enter. And like, I just think that's hilarious. - -54 -00:27:01,200 --> 00:27:07,560 -Wes Bos: I just added a card to our show ideas for the command line, because we'd do a whole episode on command line stuff. - -55 -00:27:07,740 --> 00:27:14,910 -Scott Tolinski: Yeah. Okay. Well, then let's not get too much more into those then. What else do you got? I know you make heavy use of text expander. - -56 -00:27:14,940 --> 00:28:50,460 -Wes Bos: Yeah, so text. expander is probably my most used application besides Sublime Text in the browser. And I find a lot of people don't really understand what it is because the first thing that I hear from everybody when I talk about text expander is like, you know, Mac OSX has that built in. And it yes, it is obviously a text expander. So you write hi and hit tab, or you write hi and Dhoni and hit tab, it will just automatically expand it. That's the very basics of it. But text expander is useful for a whole lot more stuff. So I primarily use text expander. For coding, I've actually stopped doing snippets in Sublime Text, and I've moved all my snippets over to text expander so that I can use them whether I'm uncle pan or another editor, no problem. It has a clipboard paste into place. So like let's say I have a support email. That's what I use it quite a bit for. And I want to reply to somebody with like a canned response. I'll have a snippet for that. And it will say, Hey, your name, thanks so much for the email, and then it will give them the canned response. Or even just that one little part, hey, blah, blah, blah, thanks so much for the email that takes me like 10 seconds to write, or one second with a snippet. So what I'll do is quickly copy their name into my clipboard from the email, and then I'll hit the snippet, and then it will automatically reply to them with their name in the thing. So it'll take whatever's in your clipboard and paste it right into this actual snippet. So it'll interpolate actual data. So that is really sweet. - -57 -00:28:51,420 --> 00:29:05,220 -Scott Tolinski: Yeah, I, I was going to start using text expander. And then they moved to the subscription model. Yeah. And then I just started Googling text expander alternatives because like, I can justify paying a subscription to that - -58 -00:29:05,250 --> 00:29:26,430 -Wes Bos: I yeah, I'm still on the the one time payment. I hate that all these apps. That's part of why I like things. I don't like that all these apps are moving to a subscription model. I much rather pay for a once and be done with it and not have it. chip away at me every single time there is a really nice alternative to text expander that's called I find it. - -59 -00:29:27,360 --> 00:30:01,260 -Scott Tolinski: While you're looking. I think the speaking of apps that are productive that have gone to a subscription model. I used to use Ulysses all the time, which is just like a basic note taking app, but it's really nice. It has like nice synching features. It has a you know, markdown support and stuff like that to make really nice looking notes. You can download themes for it. I know. I'm a sucker for themes for stuff. So but they just went subscription model and I can't believe it because it's not that like I already paid for this app. I paid a decent amount for the app and now it's subscription model. And I'm just like, - -60 -00:30:02,340 --> 00:30:02,880 -Wes Bos: Ah, - -61 -00:30:02,909 --> 00:30:06,990 -Scott Tolinski: yeah. All right, my own. All right, my own electronic note taking app. - -62 -00:30:08,370 --> 00:32:29,460 -Wes Bos: Yeah, I get it because they need to like continually pay, or they want to make more money, but I just hate, I love being able to pay for it once. And then every time you have a major update with nice new features, major updates, it's do it. So the alternative is called a tax, then it's five bucks, one time payment. I used that for maybe a year until I got pretty heavy into some of the stuff that TextExpander did. And then I had to actually buy it, because so let me talk about some of the other stuff that has dropped down variable data. So one thing I used to do for student discounts before I completely automated the student discount process right now, but before I used to reply to them, and there was a Hey, can I have a student discount? And then I would, I would say, hey, blah, blah, blah, clipboard name. Thanks for the email. And then I would like ask them a question about about their school, depending on how much information they've given me. So if they've left out some information, or if they've given it all, to me, I want to say that sounds really interesting. Whatever it is, so what it will do is it'll pop up this little interface and give you a drop down of like six or seven possible questions. And then we're able to select one of those, and it will insert it in. So sometimes your snippets aren't just current carte blanche Is that a thing? So you have to be able to make them a little bit variable and having this possible drop down of options. Is is super helpful in text expander. And then the final one I use is called case sensitive expansions. So I always say, let me know, you type Lmk. And it'll expand to let me know. But sometimes, I'll be it'll be in a sentence where it says, I'm getting them Tuesday. So let me know if you want in. So that's all lowercase. But then I might have a sentence that says, Let me know if you're interested in coming. So that's capital, let me know. So TextExpander will allow you to say like capital L, M, k lowercase, and then that will expand to the proper case, which is super helpful. You don't have to spend time going back and correcting any of the stuff that it has. So if you think text expander is just expanding, take a little bit more time looking into it. Because time invested in that air is always paid back. - -63 -00:32:30,179 --> 00:32:39,810 -Scott Tolinski: Nice. Yeah, it's amazing how those like that little like that case sensitive thing. Yep. It's amazing how those like little things just add up to be such like nice quality of life improvements. - -64 -00:32:40,290 --> 00:33:49,350 -Wes Bos: Today, we are sponsored by fresh books, fresh books is the bee's knees for anytime they need to do your books with a small business, medium sized business, large business, whatever it is keeping track of your invoices in different currencies, being able to expense being able to remind one of my favorite features is the the like robot reminder. So if you've got a client that's not paying, you can log in, you can see that they've logged in, and then you can make Freshbooks follow up for you. So you don't have to and that really like saves a little bit of your relationship. So it's not you that shaking down a non paying customer, it's the system or the robot that will shake them down and say, Hey, reminder, this is the unpaid invoice. Make sure make sure you pay it. They've got online payments as well I use stripe and PayPal credit cards right on my invoices, so people can pay them right through. They're really great. Go to freshbooks comm forward slash syntax to get a 30 day free trial, make sure you enter in syntax into the How did you hear about section so Scott and I can feed our family and pay for our MacBook Pros? Yeah, absolutely. What else do you have? - -65 -00:33:50,760 --> 00:34:49,650 -Scott Tolinski: Yeah, so um, this is this is one that is a little less techie, I use pen and paper pretty heavily. I use a graphing paper like those big old graphing notebooks. And I always have a pen and a graphing notebook handy at like all times to jot down notes to plan to draw things out. Because you know, you could open up an app and start drawing out some diagrams in the app or whatever on a tablet. But to me, like the ease of use of not having to turn it on and grab it, pick it up and just start drawing or writing is is really important for me, because like I said short term memory things come in, they go out very quickly. So I committed to paper and then I'll make a further organization of those notes into to do list if it requires me to do any further action on it. But a pen and paper is extremely extremely, extremely important for remembering ideas and keeping things getting things down and just keeping stock of everything. - -66 -00:34:50,190 --> 00:35:06,150 -Wes Bos: Yeah, I used to use pen and paper quite a bit. I had like a moleskin where I would take notes in it and I've since moved to just using Evernote for that but I definitely missed the The freedom and the distraction list that pen and paper gives you so maybe I need to give it another shot. - -67 -00:35:06,440 --> 00:35:31,860 -Scott Tolinski: Yeah, and part of the problem with like a moleskin, is there still a barrier to entry? Right? You got to open it up, like I'm using like a spiral, big full sheet, graph paper. And so like, it's always open, and there's always a pen sitting on it. So I don't even have to open it up. I just open the cap off dependent start writing. Ease of use is important for me there. But yeah, that's definitely definitely something I use all the time. Yeah, what about you anything else, - -68 -00:35:31,940 --> 00:36:45,210 -Wes Bos: I've got a quick one right now, which is video speed controller for Chrome. So I've talked previously about watching content at 1.5 to x, even three x in some cases. And what video speed controller will do is it'll hitch on to any html5 video, which is almost every single video on the web now, it'll give you this little tool where you can increase the speed playback rate of the video, as well as jumping around in it. So I find that both very helpful because on YouTube, you can skip ads really quickly, you can hit it once, and it's past that five second wait time. And second, if you are watching anything, I never watch anything at one x, it's always at two, two and a half three x. And that is huge for being able to consume content quickly, I find that I often close stuff down when it's one x because I get bored of it. And I find myself drifting. Whereas if it's way faster, I'm paying attention and getting a lot more, getting a lot more in which is terrible for conferences now because I go to a conference and I'm sitting there being like, this is so slow, I could probably get this done in 20 minutes with speed and jumping. - -69 -00:36:45,750 --> 00:37:11,940 -Scott Tolinski: Yeah, that's hilarious. Yeah, I do. I mean, I do all that podcast set to x and all that stuff, too. So definitely one of those things I can help you get through stuff that is if you can, like focus on it. Sometimes if it goes too fast, you'll start to gloss over a little bit as well. So maybe it's a little bit about finding that sweet spot that you personally can handle. I'm sure it's a little bit about like speed reading to just like takes practice. - -70 -00:37:12,960 --> 00:37:24,980 -Wes Bos: It definitely takes a lot of practice, maybe a year to get out to two x but it's just inch it up by 10%. Every single time that every couple of weeks and you're gonna learn your brain will catch up. No problem. - -71 -00:37:25,400 --> 00:39:11,460 -Scott Tolinski: Yeah, let's talk about keyboard shortcuts. Because keyboard shortcuts are really important for a lot of reasons. And in memorizing the keyboard shortcuts, you don't have to take your hands off the keyboard to work. But one thing I like to do is I'm not afraid to modify keyboard shortcuts and applications and really set up things that I do all the time. For instance, I edit a ton of videos, if you've seen any of the thousands of videos on my YouTube channel, I did all those by myself and for editing, your frequently wanting to cut the video, and then maybe roll up the current time to where the playhead is and stuff like that. And those keyboard shortcuts on Mac OSX they'd be like command to bracket command right bracket or I don't even know what the blade tool one is. But I use this all the time. And so what I did is I moved those to even just straight keys without modifiers because you don't type really in Final Cut that much. So I have the C key for cut the X key for to move up the cut up until and then the Z key for the opposite of that. And I edit videos like I'm playing the piano, I'd never take my hands off of those three keys. And I move my mouse to control the playhead. And I just quickly click lick lick lick lick, and I'm just tapping. And I've gotten so good at it. But I wouldn't, it wouldn't be possible if you had to do command bracket or whatever, take your hands off of their current orientation, I can just leave them on those keys and really chop up videos so quickly. But you know, if somebody else came in to use my setup, they might be like, what the heck is going on here? Yeah. But it's your setup, right? If it's your hairs, it's gonna make it a lot easier. The things you do all the time, make them easier for yourself with keyboard shortcuts. - -72 -00:39:12,230 --> 00:39:16,980 -Wes Bos: Oh, that's a really good one. And so do you set those you set those shortcuts in the app itself? - -73 -00:39:17,399 --> 00:39:39,980 -Scott Tolinski: Yeah, it depends. Final Cut has really nice keymapping. So for that I use the the in app version. I think there's most of the time. Yeah, most of the time things. Sometimes. It just sends you right into the Mac OS settings for keyboard shortcuts and you do it in there depends on whatever the app is pretty sweet. Um, - -74 -00:39:40,169 --> 00:41:34,800 -Wes Bos: so I have gotten a lot on keyboard shortcuts here. So previously, in episodes I've talked about using something called carabiner elements, which will allow you to map your caps lock, which is a useless key, no one needs a Caps Lock key. It'll map it to the combo combo of shift control, option command and that will give you is a sort of a fifth modifier key that will allow you and it's no apps will ever use that. So you can do caps lock, Q, Caps Lock, a Caps Lock arrow, and over and over and down. So I use carabiner to map it. And then I use a, what is it called better touch tool to map all of those keyboard shortcuts to launching applications to minimizing windows to two snapping windows, the left or the right to move into two different monitors, all kinds of different stuff that I have for, for launching different apps and moving around my Windows is is super helpful, you never have to worry about overwriting any of the built in keyboard shortcuts. So definitely check that out. You're, you're interested in it. Nice. And then I just want to talk about like, like keyboard shortcuts that everybody should know, part of teaching in person makes me realize that most people don't know any shortcuts. So like a little tip is, whenever you're in an application, just open up the menus and click on all of them. And they always have the keyboard shortcuts beside them. So for whatever action you're trying to take, take us back in and figure out what the keyboard shortcut is. But there's a couple that are just like system wide that a lot of people don't necessarily know. And it's like, it's sort of like beginner stuff. But I think a lot of people just don't even are totally oblivious to actually having them. So - -75 -00:41:34,830 --> 00:41:43,920 -Scott Tolinski: yeah, some of these are infuriating when you see people giving like a conference talk, yeah. And they're not using one of these like basic keyboard shortcuts, you're like, oh, man, why are you doing that? That's awesome. touching - -76 -00:41:43,920 --> 00:42:52,290 -Wes Bos: your mouse. Yeah, the one that gets me all the time is I have students drag their windows around. So like, they'll they'll have their editor. And then they'll have a browser. And then they'll drag the browser like off enough that so that they can see it, and then they'll drag, drag their browser back up. And so they can get back to their code. And they're just constantly like shuffling papers around on their desk with all these different apps, when the two that everybody should absolutely know is command tab or all, or whatever it is on Windows control, control will open up your app switcher. So you can hold down Command and just keep hitting tab to switch between all of your apps or or use your arrow keys to switch between the two. And then the lesser known one is command backtick will allow you to cycle between multiple windows of that app. So you got three versions of Chrome open, or you got two Sublime Text, windows open ended a cycle between those two, you hit command backtick. And that will do the same thing as command tab. But for only that application with multiple windows open. - -77 -00:42:53,820 --> 00:43:09,540 -Scott Tolinski: Yeah, another one very simple. You probably use it all the time. In most applications, Command T if it has a tab will take you to a new tab. So Command T is something I use all the time, right, because working with tabs is pretty common. - -78 -00:43:09,600 --> 00:43:14,790 -Wes Bos: Yeah, and Command Shift t if you accidentally close a tab, it'll reopen the the latest tab. - -79 -00:43:15,380 --> 00:43:17,850 -Scott Tolinski: Yeah, man shift T is a definitely a big one. - -80 -00:43:18,570 --> 00:44:22,740 -Wes Bos: Another one that gets me when people don't do is being able to move around your text editor or your email or just text with your cursor quickly, you shouldn't have to like move your mouse and click where you want to go, you should be able to jump by word by word and move along. So first, actually, I tell people to go into your keyboard settings and crank up the key Repeat as fast as it goes. So that when you hold down your arrow key, it just flies instead of you waiting there and look looking at the screen. And then second, if you use whatever we got here, I don't even know what the keys are, I have to look at my actual hand. If you want to jump word by word, you just hold down Option and use your arrow keys. And that's much faster than moving letter by letter. And then you can use Command arrows to move line by line so to the front of the line or the end of the line. Nice and quickly. And if you want to select the text in any of these combos, you hold down shift. So I'll put these all in the show notes. Yeah, because you should learn all of them. - -81 -00:44:22,740 --> 00:44:56,640 -Scott Tolinski: And this is one that I use all the time in VS code for to copy a line or to move a line. So if you hold down in like Vsq I don't know if it's the same with other text editors, I would guess I would assume that it is if you hold down Option and hit the up or down key it's moving that particular line up and down. I found a lot of people don't use that. Another one is if you hold Option Shift and hit up or down it copies the line and moves it up or down one. So if you need to copy a particular line or you want to move a particular line, those two are used constantly by myself. - -82 -00:44:56,850 --> 00:45:15,360 -Wes Bos: Yeah, absolutely. I'm switching tabs between mean switching between tabs really quickly hold on Command Option, use your arrow keys to switch between tabs. If you need to. If you need to jump to tab two or to tab three, just hit command one, command to command three command for those will jump to the first, second, third and fourth tabs. Unless - -83 -00:45:15,360 --> 00:45:17,400 -Scott Tolinski: you're in VS code. That's no - -84 -00:45:17,790 --> 00:45:18,660 -Wes Bos: good. No, if - -85 -00:45:18,660 --> 00:45:42,240 -Scott Tolinski: you hit command two in VS code, it takes you to a second window and if you have one window, it opens up your tab in a new window or whatever. And so I actually if you go to my GitHub s Alinsky, or they level up tuts GitHub, I'll put in the show notes. I actually have a keymapping in my Zed just their guests, guests. - -86 -00:45:42,750 --> 00:45:44,250 -Wes Bos: I think g OSS - -87 -00:45:44,550 --> 00:46:07,980 -Scott Tolinski: D asks, yeah, yeah, whatever that is, I have a snippet in there, you can paste it into your key bindings, and that actually successfully remaps, one through nine to year one through nine tabs correctly. There's like eight open issues or even more than that on the VS code in there. I don't know like what it is, if it's that that's like a Windows thing or what, but they're just sort of like, why would we want it to do that? Yeah. Like that's how every other application is. - -88 -00:46:08,070 --> 00:46:20,430 -Wes Bos: I think that that's part of why Adam had such an easy win is that they just copied everything sublime did in the VS code has a bit of different shortcuts. So you gotta spend a bit of time relearning, which is always frustrating, but I guess worth it. - -89 -00:46:20,790 --> 00:46:26,280 -Scott Tolinski: Word. Yeah, anymore. Their killer keyboard shortcut Hillary sequence. I - -90 -00:46:26,280 --> 00:46:50,970 -Wes Bos: think that's, that's all of my keyboard shortcuts that I've got there. I've got some, some other like, I guess like softer ones. That's not necessarily an app. But sometimes I find myself just opening up Twitter, or doing command tab and opening up a website, which is mindlessly, like, how many times have you been on Facebook, closed Facebook, and then new tab and type Facebook? and go do it? Right? - -91 -00:46:50,970 --> 00:46:51,510 -Unknown: Yeah, absolutely. - -92 -00:46:53,040 --> 00:47:29,010 -Wes Bos: What I'll do is, I'll rename my Twitter app every week to something like, Don't open this, or, or deep work, or what does something silly so that when I hit option, space, Tw, Twitter does not pop up. And allow me to open it mindlessly, I have to explicitly remember what I called it or find the icon. So as good as Alfred is it also, it will make that habit in your brain. concrete. So you have to do things to stop yourself from mindlessly opening up distractions. Yeah, so - -93 -00:47:29,010 --> 00:48:43,680 -Scott Tolinski: here's something along the same vein as a productivity thing, I use an app called focus, a focus comm where you can set it up and say, Hey, do not Lau me to visit any of these websites. And by default, it has all the big ones like Facebook and Twitter and Reddit and whatever. I obviously have YouTube unblocked from there, because I use YouTube professionally. And then so basically, if you open up a tab while you're focusing, and you can set schedules, and whatever it gives you like a quote, that is pretty much shaming you into working. And it's not like an aggressive quote, but they're like, you know, they're inspirational quotes that make you think like, Oh, yeah, that's right. And that's actually the worst. Because when you get that muscle memory, and let's say, you go to Facebook, you, you maybe you're focusing, right, I have focus turned on, I go to Facebook, it gives me the air, I close the tab, I do something, I hit the tab again, I go to the Facebook, gives me the air, and I'm like, Oh, yeah, I just did this second ago. Like, it can really make it apparent how many times you're browsing to this stuff, without even knowing it mindlessly, whatever. And this just really prevents you there. You can even block apps with it. I think it's Mac OS only. No windows. Sorry, windows, folks. But I'm sure there's a ton of other applications that do the same thing. Yeah, I use one blocking yourself. - -94 -00:48:44,009 --> 00:49:07,140 -Wes Bos: Sorry, no, no, I used to use one called self control, which will essentially just put an entry into your hosts file and block it. Which is funny because you can't actually edit your host file. So if you're trying to do some dev work at the same time, you're out of luck. But I switched to focus, because it'll allow you to block apps as well, like TweetDeck, or whatever that you're using on your desktop. - -95 -00:49:07,410 --> 00:49:25,320 -Scott Tolinski: Yeah, and you can turn on hardcore mode, which allows you to not be able to shut it off, or change the settings. If you are like, if you find yourself, hey, well just bypass it by quitting focus. And then the hardcore hardcore mode is gonna say, Ah, you know, it's the Jurassic Park Dennis nedry in there. - -96 -00:49:27,150 --> 00:50:52,020 -Wes Bos: That's pretty sweet. I'm just looking here I've got any other from I have a whole email workflow called the breakout email management workflow. Maybe we'll save that for another podcast, sort of going into all the different pieces of it, how I manage my email or try to at least manage my email. So we'll we'll save that one for now. I guess my last one that I have is just like automating any sort of exports. I don't use this one a whole lot anymore. But sometimes when you do a design that's heavy on custom elements in Photoshop or sketch You need to export them. But then you make a change to the design, you need to re export them in sketches is pretty easy, you can just like, you can just re export them and they'll go to the same folder and overwrite them. You can even script it. With some command line tools, every time the file changes, you could like get a gulp task that will re export your sketch project. But when I use Photoshop back in the day, there was one called slicey. And then you just name your layers like the back in the day, it was like button dot png or hero jpg, and then it will you just drop the PSD into slicey. And it will kick out all of your actual value. So anytime the PST changes, it will just regenerate all those assets for you, you don't have to worry about like, you don't have to worry about slicing and dicing it up again. So I was a huge time saver for me when I was doing that kind of work. - -97 -00:50:52,919 --> 00:51:23,100 -Scott Tolinski: Yeah, and along those same lines, I know I mentioned figma a bunch of times in figma. If you set all your exports or like assign a layer or a particular component to be exported, they have like a really nice export all button in the top right. And if you select that it gives you just like a bunch of checkboxes. So same thing, you can just re export all of your things over and over again, if you want that way, just by putting all of your exports in one one spot, I guess sketch kinda does that too. Right? Yeah, yeah, kind of all of your exports there. Yeah, absolutely. - -98 -00:51:23,160 --> 00:52:11,550 -Wes Bos: Pretty sweet. Um, and I guess the last one I have is maybe you selling so much of this, I use something called Cloud App. To take every time I take a screenshot, it will automatically upload it to cloud app. And you can also take video on it really quickly. You can take webcam video, you can put annotations on top of it. So anytime you're trying to get feedback, send somebody a screenshot of something, you can drag and drop files right into this thing. I whenever I do a podcast with somebody, like even Scott, and I need to give them the audio, I just drag it into it, it gives you a link immediately. And then it will upload I can go have a beer or something. Well, the upload is actually happening. You don't have to wait. You don't have to wait for it to be finished in order to give them a link to something so big fan dues anything like that? - -99 -00:52:11,850 --> 00:52:36,720 -Scott Tolinski: No, no, I don't Not really. I have a separate I used record it for recording gifts and sharing those first stuff. But I for the most part, I use Google Drive and just save everything there. And then you do have to wait for the thing to upload to get those links. But I did just get gigabit internet. So I'm not waiting too long right now. But yeah, definitely. That's - -100 -00:52:36,720 --> 00:53:33,720 -Wes Bos: pretty sweet. Another thing I use it for is like a GitHub issue, I'll take a quick animated GIF, it will automatically host it. And then you can just embed that thing. You just do the name the URL of west.io forward slash c 949. And then you do forward slash content or forward slash Hello dot png or Hello dot GIF, and then it will just embed it right into that thing. You don't have to worry about it. Sometimes I've run into the issue. It's gotten quite expensive. And I don't have like I have like pay like 20 bucks a month, which I think is a bit too much. And then I still if I tweet something out and it gets popular, then I still run out of bandwidth. And then they like take it down which is so frustrating because I know how much bandwidth costs and it's not $20 a month for me tweeting out a link to something so that's as a bit of a downside to it. But for almost everything else. It's great. Nice. Cool, what about a sick pick? You got a sick pick here today, Scott. - -101 -00:53:34,350 --> 00:55:10,290 -Scott Tolinski: I have a sick pick. Okay, so phone cases, right? They're sort of a necessary evil. You have unless you're living life dangerously you probably have some kind of phone case which I have lived live dangerously a lot. I hate phone cases. I hate how bulky they make your nice phone feel. Okay, I have the Nexus six p and hopefully it's a new pixel phones very soon, right, but the phone feels so nice. Last thing I want to do is wrap the whole thing in a giant bunch of plastic. So I found this case, it is incredible. It's the rhinoshield they have some awesome videos of them dropping them and it's really just a bumper. It's a thin plastic bumper. There's nothing on the front, nothing on the back. But it raises your phone up just enough like I've dropped to this phone on concrete so many times and it looks brand new. And you still have access to like the back of the device. So it still feels like a nice premium thing in your hand. It's not like a just a giant chunk of plastic and it's not that thick. You if you have wireless charging, which so many Android fans do and you wouldn't iOS fans or don't experience the joys of wireless charging, no like it still lets you have that wireless charging. So for me, it's rhinoshield I think it's called the crash guard bumper. But there's a ton of videos on YouTube of them testing their phones, just dropping them On searches stuff, and I can personally test that I have dropped this thing hundreds of times with this case, and not a single scratcher done on it. So big fan. - -102 -00:55:10,770 --> 00:55:11,850 -Wes Bos: That sounds pretty sweet. - -103 -00:55:12,390 --> 00:56:38,550 -Scott Tolinski: Yeah, yeah, my last time not having a phone case and didn't like comic tragedy. It's like one of the most ridiculous things in my life. I was like trying to install a floodlight in the house. And I was like a story up on a giant ladder. And, and so this is like, it's a total cartoon here. I had my phone I was so like, careful with this phone. I never ever broken it. I was just like, I didn't have a case. I was just super careful with it. This is the last time I had a phone without a case. And I went to take the ladder down, which is giant tall ladder. I take the letter, I trip over a garden hose, the garden hose. Oh, no, I'm sorry, I didn't trip over the garden. I kicked the garden hose. Because it was in my way, like get out of here. garden hose flies. And it actually turns on because it's one of those handled ones. And it's on the jet mode which sprays right at me. I'm holding a giant ladder above my head. So I dropped the ladder on my head. I dropped the ladder in the hoses still spraying me and my phone falls out of my pocket and completely shatters. Oh, and I'm sitting there like soaking wet. And I get inside the house. And my wife's just like, Hey, what happened out there heard a bunch of noise and I was just like, I need I need 15 minutes here. I can't talk about it. This some stuff just went down outside. So ever since then. I've been really good about a phone case because you never know. And some like, you know comic mischief is gonna go down and you're gonna be the victim. - -104 -00:56:39,120 --> 00:56:56,790 -Wes Bos: Yeah, I used to never have a phone case and I dropped it one too many times. And I dropped mine and it bent the side which means that you can't go for like the hundred dollar Apple Store replacement. Just not the end of the world when when they can do that. But I finally got I don't know what it is some black one out to check this one out, though. - -105 -00:56:57,180 --> 00:57:03,210 -Scott Tolinski: Yeah, they're cheap. 24 bucks or whatever. Yeah, I like them. rhinoshield. Cool. - -106 -00:57:03,240 --> 00:59:05,880 -Wes Bos: Well, what about sick pick is another book some people seem to like the the What did I recommend last week or two weeks ago, I recommended the essentialism book, The disciplined pursuit of less, I recommend another one. It's called Deep work rules for focus success in a distracted world. So I think that what is happening now in our society, with all of the distractions that we have, and the internet and everything going on, is that it's no longer okay to be like the middle of the road at something, and it's no longer okay to just be mediocre at something. And there's a huge opportunity for you just to kick ass at whatever it is that you're doing in your job by learning to be more focused. And that's the whole idea behind this deep work book is how do you get into the state of flow? How do you get into the state where you are just totally in your actual work in going going at it 100% and not being distracted by all the other things that that goal that are going on in your life. And I feel like you can get a huge competitive advantage in life if you're able to get yourself into that state of deep work. So I read that I've read it, I think twice. Now I've recommended it to a whole bunch of people. And they've all said it's like a life changing book. It's it's really, really good. It's by Cal Newport, who I'll probably recommend a couple of his other books as well. But if you feel like you are a little bit distracted, or if you feel like you could probably get an extra 30% out of your day by not being so distracted. And that could mean other things. A lot of times people think it's just people on Twitter too much. But Twitter is part of my job. So I do do do go on it quite a bit in the day. But other distractions, being able to get into that state of flow, where you're just cranking through work is really great. So check it out. - -107 -00:59:06,230 --> 00:59:08,520 -Scott Tolinski: Now it's a nice topical tick. Yeah. - -108 -00:59:08,670 --> 00:59:10,200 -Wes Bos: For productivity. There you go. - -109 -00:59:10,350 --> 00:59:11,700 -Scott Tolinski: Yeah, like that. Dang. - -110 -00:59:11,820 --> 00:59:23,670 -Wes Bos: Like, like I said, I love this kind of stuff, being able to squeeze a little bit of extra. I wouldn't say I'm a pro, but I'm definitely interested in it. I always like to try apply different techniques. - -111 -00:59:24,230 --> 00:59:27,510 -Scott Tolinski: Nice. Yeah, I think there's a lot lot to learn there. - -112 -00:59:27,980 --> 00:59:33,090 -Wes Bos: Awesome. So I think that's it for today or do you have any shameless plugs? Are you good for today? - -113 -00:59:33,270 --> 00:59:35,010 -Scott Tolinski: I'm good for today. Maybe next time? - -114 -00:59:35,520 --> 00:59:57,450 -Wes Bos: Yeah, I don't think I don't think I have anything either. We have been getting quite a bit of good suggestions for shows up on Twitter. So if you have a topic that you'd like to hear us confidently talk about then. Even if we're not so smart about it, then let us know tweet me I'm at Wes Bos and Scott you are - -115 -00:59:57,779 --> 00:59:59,970 -Scott Tolinski: at S kolinsky awesome. - -116 -01:00:00,000 --> 01:00:01,730 -Wes Bos: See you next time. See? - -117 -01:00:05,069 --> 01:00:15,570 -Scott Tolinski: Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show until next time - diff --git a/transcripts/Syntax110.srt b/transcripts/Syntax110.srt deleted file mode 100644 index b625ba35f..000000000 --- a/transcripts/Syntax110.srt +++ /dev/null @@ -1,116 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. - -2 -00:00:10,559 --> 00:01:13,560 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats today we're gonna be talking all about tips for a better work life balancing and get the most out of your work day and the most out of your the rest of your life. Pretty excited about this one got a whole bunch of tips from it with me as always, Scott Tolinksi. How you doing today, Scott? Hey, I'm doing super good. I went on a little bit of a, I was calling it a an apology tour yesterday, which is making me feel the apology to her was somewhat cut short, but then resumed in a much greater way later. So I got a couple stories. You got time for him? Yeah, let me talk about our sponsors real quick. And then we'll hear those stories. First one is sanity.io. They are in the headless CMS space. And today we're going to talk to you about something called their new portable tax, which is the new spec as well as the tool. And Freshbooks, which is cloud accounting for small businesses, freelancers, so we'll talk about both those companies partway through the episode. So tell me about your apology tour and all of your all of your woes. Yeah, - -3 -00:01:13,560 --> 00:05:39,120 -I know. So okay. I'll start with with the smaller one, which is the air pods. So I had a small medical procedure in November. And I was told that you might not be under like, totally under. So I was thinking I'll bring my air pods in the system music while I'm just chilling there. And turns out No, you're going to be fall under so I left them in my pocket in the little magnetic AirPods case. Anybody who has them knows that they're stuck in that little magnetic case, right when you put them in there. So they're in my pocket in the case, and I had the hospital gown on I put the pants underneath the gurney that I was in. Well, when I woke up, and subsequently came two hours later, no more air pods in my air pod case they were gone. So somebody at the facility stole them, like literally one of the nurses must have stole them. First thing I did the next day was call and ask if they were in the Lost and Found if anybody had found them, let me know. Here's my number nothing. Next thing I did was waited. And then I called them to tell them that someone on their staff had stolen my headphones. To which they accused me of just losing them in the laundry or something stupid. I was just flat out accused several times. I'm like, Listen, I was out cold. Somebody clearly stole my headphones. This is a extreme sort of violation. And nobody gave me the time of day. And this was the November So fast forward to now they made me write like a handwritten letter to them and sign it and all this stuff so I could get reimbursed and they fought it every step of the way. I talked to someone on the phone a couple days ago, they were super rude and basically blamed me for the whole thing. Then maybe about five minutes later, she called me back apologizing for being so rude and saying they're gonna send out a check. And so okay, this is okay, cool. Oh, wait for the check. No big deal. Well, yesterday, I got a call. And apparently she must have gone around snapping necks around the office because they magically turned up in the last and found yesterday morning, when she came into work. They were just there. So she said she asked everybody. So I'm guessing somebody who took them decided that they did not want to get caught or get in trouble for this and drop them off. So I got my air pods back. And I got a nice little personal apology for the whole situation. And I think she was very aware about how suspicious the whole thing was because she made it very clear that she was not happy about the situation. So that only Yeah, that was step one on my apology tour the air air, air pods are back in my possession. That's great. The step two is my Mac computer, which anybody who's been following me on Twitter knows that first the keyboard died. And that took two weeks, two and a half weeks to get the computer back because an apple tech broke my screen while they were repairing it and then proceeded to not tell anyone. So then the computer was subsequently lost because it was like trying to get apart and they didn't want to list out that they had broken my screen. So I had to have some like some extreme that's actually how I got the air pods in the first place because they gave them to me as a gift or their extreme mess up. So that leads me to most recently where like everything on my computer died, the logic board, blah, blah, blah. Literally everything died. I took it in they told me it's gonna be another two weeks, which was very upsetting. And they called me yesterday to say my computer was done. I was like, Oh, great. That's way earlier than expected. I go and I pick it up. Everything looks good. I come back home I fired up I go to reinstall my time machine, and it does not work. Upon closer inspection. Apple installed the flat out wrong logic board in my computer. And I almost couldn't believe it. I had to check the parts list. I was like No, no they did after all this. So I called them back and I think I could physically hear their jaw hit the floor over the phone because they were all very confused. She thought I was pranking her with When I first told her that or that I was mistaken, I was not. And after, literally, you know, eight hours of working with Apple to their credit, I left with a new computer, which was very nice. I paid $300 to get a new computer, but this computer has 32 gigs of RAM instead of 16 a better processor, and it's a year and a half newer. So that sort of seems like a win. And I you know, after the end of it, I'm Uh, I'm happy with what Apple did. So apology tour complete. Oh, holy man, that is some bad luck you've been having, um, got it all panned out, all of your Apple products are homesafe. - -4 -00:05:41,520 --> 00:05:49,650 -Unknown: I know. I just did like why I remember like, at some point, when I saw the logic board, I was just like, Why? Why is this happening to me? Oh, my - -5 -00:05:49,830 --> 00:10:35,460 -Wes Bos: gosh, I hate when stuff happens like that, where it just keeps the ball keeps getting dropped. There's a YouTuber I follow on YouTube or watch on YouTube called rich rebuilds. And he's just been detailing his process his like three month process to buy a used Tesla from Tesla. And they keep dropping the ball. They're like it's ready for pickup. And then it's not. And then Oh, man, you just go and go Google rich rebuilds on YouTube. Yeah, he dropping the ball. And part of me feel sorry, because there's so many moving parts in these companies. And no one is like, solely responsible. But part of me is just like, Come on, get it together. Go. I know, my first call to Apple was a nightmare too. And I was like, well, the computers showing this error message. I've tried doing this than this than this. I've tried booting into safe mode, and it works in safe mode. And then the tech will be like, okay, we want you to hold the shift key to boot into safe mode. I'm like, I just told you I did that. Like I told you it worked. So I don't need to do that again. But yeah, no, I'm just glad it's all over. So let's get into our episode about work life balance, because you know, mine's been a little rocky lately, and I'm happy to get a little bit more than yesterday was an excellent time to practice sort of being Zen like, so this is gonna be one of those things, I think that is about how to get your work better and better. Alright, so these are gonna be a bunch of tips on how to get the most out of work and life. But they're not hard and fast tips. Because I think part of the beauty of being a web developer and even more so part of the beauty of being a self employed web developer, as in a lot of you are is that you do get to enjoy some flexibility, you do get a tick off and go snowboarding in the middle of day if you want. And you do get to do a little work at evenings if you'd like as well. But I think work is a big part of our lives. And these are tips that are going to hopefully allow you to get the most enjoyment out of both work. And both life, this isn't going to be like a show where we say don't work so much or don't do it. It's more about like, how do you slam dunk working? And then how do you also get the most enjoyment out of your life when you're outside of that, and not so much that they're both kind of mushy? And you don't enjoy either of them? Yeah, you're gonna be LeBron James, at work. And you're gonna be Michael Jordan, in your lamb Indies. slamet. Cool. So yeah, I think this first one is really interesting. It's really to know when you're at your best, like when when is the time of the day in the mindset of your day that you are working your very best. So whether or not that's the standard nine to five, or that's, you know, seven to two, and then three to six, or whatever. What is that time where you really feel in the zone. And this is actually a tough one for me, because I was definitely the night owl type. You know, I work really super late. And I could really zone it, then that I found out that I'm also good at zoning it at like 7am. And if I do the 7am thing, then I don't have to stay up till midnight, and I don't have to feel like crap the next day. So experiment with this one. If you think that you're a night owl or your morning person or whatever I would, I would honestly, this is one that you want to actually try something else and see if maybe you are actually more productive at a different time. Yeah, I agree. I used to be a huge night owl as well. And that started shifting when I got married and had kids and right now I work a pretty standard nine to five, but I'm really looking forward to next year when my daughter starts school, drop her off at school I like eight you can be home by like 815 ideally, I would start at like 6am 7am as early as I possibly could. I can't do that with kids right now. But I definitely work the best in the morning. So when when it's time to get going. I just can't wait to run upstairs and start working. Yeah, yeah, and that's a big next one we have here and this was really helpful when I first started working for myself which is work when it's time to work in life when it's time to life. So if you work from home or even if you work at an office and you have access to your your daily things, it can be very tempting to tend to your your life's things during the day. So whether that's doing laundry, whether that's making phone calls, whether that's Just like I don't know, just stuff that I get sucked into all the time is searching classifieds, when I'm should be working, is searching for bikes and whatever it is that that's online on there. So having that discipline to be able to say, like, now is the time to work, and now is the time to do life and vice versa as well, we'll talk about this a little bit more as well, where when you're done work, you should be done work. And it's okay to think about those things. But if you let that bleed into your lifetime, and if you let life stuff bleed into your work, again, it can start to get kind of mushy, and then it's not so great. - -6 -00:10:35,539 --> 00:15:16,289 -Yeah. And even like one of the big things there were to be like online shopping, right? I know, that's a big problem to hop onto Amazon, when you should be working or something like that, that's a that's one that you know, you you want to save for your personal time. And again, it's probably worse for those of you who work at home. But again, in the office, it certainly definitely can be a problem as well. But it will separation. A lot of the themes in this episode are going to be about separating your two situations, because separating them is definitely one of the keys to being better at both of them. The next one is make it clear to family members when you are doing work. Now, this one is tough, because you know, Courtney works four days a week. And then the fifth day she stays at home with Landon. And for a little while, it was really easy for her to just pop in and ask me a question, right? I'm like a one door over. And sometimes it would make me really frustrated. And we would have sort of this, you know, not necessarily an argument, but it would be like, Listen, I'm frustrated with this code right now, now's not a good time. And we needed to set those boundaries. So now when I'm at work, I close my office door, I separate myself entirely. It's like I'm not at the house, you know, I want everyone to know that this is my time to do work. And I don't want to mix those two. Because if you break out your concentration from what you're doing into some other problem, where things just keep getting introduced, or maybe Landon wants to come say hi, or something like that, it's just gonna throw me off from my headspace. Totally, we have the same thing with my wife, I'm lucky enough to be an entire floor away from everyone, our house has three floors, I work on the top floor. So there's almost no need ever to come to the third floor. Because this is just my office up here. So there's that popping in is is done. But I think one thing that we do is that my wife will just text me if she needs me. And I like that because I can control what notifications come in to me, I can easily turn on Do Not Disturb on my computer and on my phone. And I'm not going to see those notifications. And then when I find a time to dip back in, I can obviously it's an emergency or something like that someone can yell up or come right up as well. Yeah, emergencies are always an exception. Yeah, same goes for vice versa, working after hours, sometimes you get a couple hours in the evening. And my wife and I both like to pull out our laptops, it doesn't happen very often. But our kids are finally starting to sleep better. And now we actually do have a little bit of time sometimes in the evening. And it's important just to tell someone like look, I need 20 minutes just to focus on this right now. Or I'm just dicking around on something, feel free to talk back and forth with me just making it clear. Otherwise, it's just like, Am I allowed to talk to you? Are you frustrated with something? Or are you just playing around with some code, and it's fine to talk to it. So making sure that that is nice and clear, I think has been very important for us. Yeah, that's one that I need to get better at. Because I too can get like very into something and have my you know, frustration be on my computer, when it's the time when I probably shouldn't be frustrated in my computer. I should just be having fun or whatever. And keep that time Yeah, like serious coding time to in my office when I'm doing work. Yeah, I found that I just try not to bring my laptop down when the kids are awake, because it inevitably leads to me just opening the laptop and then I see something and then I was like, oh, maybe I'll just just merge this issue real quick. Or maybe I'll just just do this really quickly. And then things can happen. Like your kids start standing on your computer and you're frustrated with them. But you should be hanging out with your kids instead. Or something on Twitter makes you angry and then you're you're in a different headspace than the rest of the family is. So that's one thing I just like stopped bringing my laptop down, at least when my kids are awake. So we don't have to deal with that. Yeah, I've been working on giving full attention to what I'm giving attention to rather than, like half or partial attention to literally anything if I'm spending time with Landon. I'm not spending time with Landon or looking at my phone or watching the TV or whatever I'm spending time with him. You know, it's like dedicated. So I think that's a big one. And to go right along with that is to have a defined space for work, like we just mentioned, right? I mean, my office is my office. The only thing I use it for is working. I don't play video games in my office. I don't play my guitar in my office I work so when I'm in my office, the door shut I'm working. This is my space. And one of the things that we will talk about in the next episode was like tidying up your code tidying up your workspace is such a big big deal because when my desk is cluttered and Office has stuff all over the place. And it feels like a child's bedroom or something like that, when my office isn't very good, I'm not very good. So having this defined space and having it be clean and orderly and, you know, ready for you to work, I think is such a big important factor. - -7 -00:15:16,470 --> 00:16:00,149 -Yeah, I need to get way better at this, my office is almost always a mess, just because I don't know I want on this brigade a couple, like about a year ago to try to stop getting mail. Because I hate mail so much, we don't have the services that will scan it for you. And I still get so many important papers in the mail. And I don't have like a good system for dealing with them. And a lot of them are important that I have to reply to. And I just have paper all over my desk, and I hate it so much. And it's one thing that is maybe it's my 2019 resolution is to get it better. If you see me on webcam, it looks nice and clean. That's because I just push everything out of the frame of the webcam. And if I were to turn my webcam, just a centimeter over you with the disaster of mess in my office. Yeah, it's - -8 -00:16:00,149 --> 00:16:06,870 -Unknown: not ready right now either. But that's just because I'm a Marie Kondo doing it right now. So I pulled everything out, it's all all over the place. - -9 -00:16:06,960 --> 00:18:12,540 -Wes Bos: One other thing about having a defined space for work is that I think there's something mental about sitting down at your desk or standing at your desk, where this is where I do work. And it's not the same as sitting on the couch or sitting at the dining room table. Because those are mixed spaces. And in both from at least in Canada, from a tax write off point of view, that's really important. Because you cannot use mix space to write you cannot write off a mix space, like I sit at my dining room table eight hours a day, that's a couple, maybe a third or half of my day, I can write off and it doesn't work like that. But having a defined room that is only for doing work does let you you write part of that stuff off. And then there's also a mental shift where you sit down and you're in work mode. And then as soon as I close the door to my office and leave, I'm out of work mode coming down from that as a little trickier. We've talked about that in the past as well, though, we're going from work mode to family mode or to life mode is hard, because you don't have a commute. Mm hmm. Just go down a set of stairs. That's one thing that I've been trying to work on as well. Yeah, that one is tough. Because, you know, I mean, our problems are so logical and so non emotional, right, and the code problems. So we're our brains get stuck in this logic mode, where we're trying to solve problems. And we're looking at things like this. And that isn't always the best state of mind to be in when interacting with your family, you want to be less logical, more, more emotional, more connected more there. And that transition is tough. I actually personally did have, you know, I love that aspect of having a commute, you could listen to music, you could listen to podcasts, you could take that time, if you you sort of know the general time. And then when you're home, you're home. And that's like that bridging the gap. And again, now I don't have that to the same extent. And it is a little bit tough. But I mean, talking about defined spaces, one of our sponsors has one of the coolest defined spaces, because their back end has some amazing tools to get it totally customized. To be what you want. If you're looking for a headless CMS backend solution that really allows you to make it your own space. Sanity is really it. - -10 -00:18:12,719 --> 00:22:46,260 -Yeah. So if you are going to be building a website, and you need some sort of back end, where you can consume the data via an API, you definitely want to check Sanity out not just because it has an awesome back end. But you also are able to create your own react components, or their UI, which is kind of like a nice mix between a hosted thing and doing it yourself. But today, what I want to spotlight is this idea behind portable text, I always love these companies that open source parts of their product, their entire product, or just things that they are finding helpful. And one kind of thing that we've dealt with forever in like even in WordPress land and any CMS lead is that if you have a wiziwig, if you have a place where people can input content, that content is generally either very specific, where you just write text into a custom input box, or it's something like tiny MC E, where you can you put your heading tags and you put your images and you put your links. And generally what happens with that that content editing system is that it just dumps the content of your your editor and then saves it in the database as HTML. And then if you want to set that HTML, if you want to display it on the page, you have to pull it out, you don't really have control over that. So there's this kind of like constant balance between giving the user like a flexible control, which is something like a like wiziwig editor and making it very rigid, which is just custom fields. So Sanity has put out the specification called portable text, where it allows you to have an editor they've also released in editors called the portable text editor. It's kind of like a wiziwig. But instead of just saving it as HTML, it saves it as this new, JSON based written Text specification, which is cool, because then you can take this standard implementation, I love it when companies that build stuff, build their stuff on standard implementations and open source those implementations so that your contents not going to be locked into something forever. And then you can take this JSON and then they have adapters for view and for react and hyper script, and all these different things. So pretty nifty how they are, I think Sanity is a cool company, because they're just like taking a look at this entire space. That is like a CMS. And they're just rethinking it. So they've got a whole bunch of links here that they sent me. One called forget about Gutenberg. No, seriously, where they show an example of creating a slideshow with their new portable text blocks that they've made, and they show how easy it is to get up and running with Sanity. So pretty cool. I was really excited to see this, they are sponsoring a whole bunch of episodes this year, we're just going to kind of highlight a few different parts of their business every single episode. So if you want to check it out, go to sanity.io forward slash syntax, and you're going to get the plan of tasty treats. So thanks so much Sanity for sponsoring, sick, sick, sick, sick, sick, sick. Yeah, so next one we have is, uh, know how to zone it, I always talk about zoning it, I think I made that up. But really zoning it in my mind is they call it like a state of flow. But really, when you're like locked in, you're typing really fast, and you're not even thinking about anything else. And who knows how much time has gone by. And sometimes you really need to zone out. Now for me, I like to know what gets me into the zone, whether it's setting myself up in a specific way or throwing on some headphones, putting out a specific type of music, and then blocking all distractions, closing my email, and then just going for it. You know, it's funny for a little while there was like the three six mafia if I put on my headphones, and then the three six mafia, I was in the zone. And I don't know why I was never a fan before that. But I had put on one album, I was like, I worked really well with this. I'm just gonna keep it going. And then next thing it was AP and Roger and I was listening to zap and Roger, which is like, you know, funk music from the 70s and 80s. And and then I was just like, nearly dancing at my desk while I'm listening this app and Roger. And so it's like as as things change, there's different like maybe music styles, or whatever you're listening to. Maybe it's something chills, maybe it's something like lo fi hip hop beats from YouTube, or whatever. But finding that thing that makes you just really zone into it and block out the outside world is I think, extremely important skill to be able to decipher and figure out what makes good for you. Yeah, I do that as well. I have a playlist on my Spotify. If you want to find me on Spotify. I'm West boss, and I have a playlist called head Bob, - -11 -00:22:46,260 --> 00:22:46,860 -Unknown: which is - -12 -00:22:46,920 --> 00:22:48,120 -Wes Bos: if you ever heard of this genre of - -13 -00:22:48,120 --> 00:22:53,190 -Unknown: music, I mean, no. Is it the chill beats to study to music? - -14 -00:22:53,250 --> 00:27:07,680 -Wes Bos: No, no, that's a little bit ravy. For me those every time I find these like deep concentration, they feel a little ravy for me. So the head Bob is like this very interesting genre of music. That is I initially found it out from Casey Neistat, his vlogs have a lot of this similar music to it. And I was like, What is it about his music and I looked it up and it's a genre called head Bob. And I've just been kind of curating a little playlist here and there. And when I need to zone in on something I throw that on the dice. So don't Urban Dictionary head Bob though, cuz I googled it. And that's what came up. What else do we have here? blocking distractions is really important. I love Love, love the Do Not Disturb notifications on the Mac. That's turns off all push notifications. In general, I am very aggressive against push notifications. So I don't have them turned on for Twitter don't have them turned on for Slack, I don't have them. I pretty much don't have them turned on for anything other than email, on my phone, as well as on my desktop actually don't even have them turned on for email on my desktop as well just aggressively turned off. And that allows me to not get pulled out of that zone, which is so easy to happen when you're finally in it and you see a notification. Maybe it's something that bothers you. Or maybe it's something that you feel like you could just get down really quickly, then that pulls you out of it. Yeah, one of my big things is just simply even turning my phone upside down and not even like wanting to look at it because sometimes if it's your phone sitting there, maybe you get that like the Ambien notification or something that pops up and it just catches your guy and maybe you're thinking what is that and then I look over and the Detroit Lions did something that's not going to affect them in any sort of way because nothing affects them they just lose. So I did not need to read that notification. You know, the next one we have here is keeping hobbies. We talked about this a lot on the show is having hobbies both code related outside of code away from screens, that sort of thing. I personally have a lot of hobbies. You know, I play several instruments. I've been breakdancing for 1516 years. I work out in the gym. I spend time with my family if that's considered a hobby, but like, my recommendation is to have all sorts of hobbies both physical and relaxing are both like something like yoga would be probably both where you're actually getting moving, but it's relaxing at the same time. You want to have stuff that's away from screens. And I'm really bad at this. I spend way too much time staring at screens. I work all day on my computer and I play my Nintendo Switch and I watch them TV. Like I need more time away from screens. And I think everybody Yeah, I'm the same way I don't have a whole lot of hobbies anymore Just because like kids I don't have a whole lot of time but I definitely do keep a couple I like to cook I'm really into fermentation and looking to get into curing as well. So those are kind of fun fun ones to focus on as well as like barbecue and and whatnot. It's funny, they I've never heard somebody say that they're into fermentation. Like, I'm really into fermentation. I am I'm super into fermentation. I think that it's it's amazing. I have this this is like a bit of an aside but I have been fermenting garlic in honey woo for like a year and a half. And it's gotten to like a pretty gnarly stage. And I'm too scared to try it now because like, the thing about honey is that it's not pasteurized. So there's a potential for machoism, which will make you die. So I had to buy like this like pH monitor test if there's botulism in it, but it's been so long now that I'm a bit afraid to even even test it out now. Yeah, I don't blame me that would that definitely sounds scary to me. Yeah. I don't want to die. that would that would suck. Yeah, yes, yes. Please refrain from dying, that'd be great. The other one we have here is keeping up with exercise as well. We've said this many times on the show as well, where it's just amazing how regular exercise a couple times a week will make you so much more focused when you're at work and so much more present when you're you're outside of work. Because there's at least for me, I develop a huge mind fog when I'm in either one, when I haven't been exercising for a while. And it's easy to forget how good you feel and how focused laser focused you feel when you do have that exercise. - -15 -00:27:07,710 --> 00:29:32,100 -Yeah, it is it is really easy to forget it. And then you sort of go on with daily life. And then you go to workout and then you're like, oh, wow, well, I forgot about this, this is great. I mean, it gives you all sorts of great, great feelings in mind clearing all sorts of good stuff, good for mind, body, huge gains long term, if you keep it up, you'll always feel a little bit more of a push. Next one we have here is to prioritize your to do list. This is a big one. For me, I am not great about staying on task. So if I have a to do list, and I do the sort of Eat That Frog method and the priority method of that to do list, everything gets a lot better, I'm so much more productive. So in my to do list, I have priorities one through four, it automatically organizes them as the highest priority versus the lowest priority. And then you know what I do, I go ahead and do that highest priority, and I do each one down the line until I get through with it. Because you're never in a situation where you're like, What do I do? Or should I work on? Or should is this more important? Or is this more you have it sitting right there in front of you, and is staring at you in a way that's like, Alright, this one's red, orange, yellow, whatever. And I can just attack these one by one. And I am way more productive every single day that I make a to do list versus when I don't? Yeah, exactly the same way. Sometimes I will wake up in the morning and have nothing on my to do list. And I'm almost paralyzed by everything that it could possibly do. So what's really important to me is I use a to do manager I use things, there's lots of really good ones out there. And I pretty much just use the inbox in the today. And the inbox is where you just dump all of your thoughts and and categorize them if it becomes a little bit too much. But there's things that I need to get done both in personal life as well as in my work. And then I will drag them into today the things that I think I can get done today. And then I'll sort of bubble them up and down until I get an order of operation. And then it's very easy for me to sit down and work on that thing. Because it's a clear defined goal that I need to finish. And if it's too broad, then I need to break it up into a couple more different to dues. And I've been doing that for years now. And it's just so much better. Like I did three demos for an upcoming course yesterday. Just because I went for a walk. I thought of these ideas when I was on a walk, put them in my to do list, move them to the top when I started my day. And I just motor through them because I knew exactly what I needed to do. And I knew exactly when they were finished because they were done. - -16 -00:29:32,100 --> 00:29:32,850 -Unknown: Yeah, right. - -17 -00:29:32,880 --> 00:33:55,230 -Wes Bos: So I highly recommend going and back and listening to our productivity episode as well as reading the book getting things done by David Allen. It seems a little cheesy, so good, but it's super good. And you will enjoy it. You will enjoy it. Absolutely. Yeah, it's one of those books that I come back to all the time, just because of how many just important reiterations of that same idea you need. I mean, one of our sponsors here is going to really help you remove distract From your life as well and prioritize thing and that sponsor is a longtime sponsor of ours, which is fresh books. Because with fresh books, you really it gives you so many these excellent features that you don't need to keep track of things you don't need to have email so and so on your to do list or you don't need to have reminder to rescind up this invoice Freshbooks keeps track of all that stuff for you. Freshbooks is my favorite. We all know that by now, if you are a small business, if you're just sending a couple invoices to people sign up for Freshbooks because it's the best way to manage it. So I'm just gonna hang on a spotlight a couple of different features that I like about Freshbooks. First one is the branding, you can easily create custom invoices that have your logo and reflect your brand colors. So it doesn't look like a typical invoice that you get from every single thing. It looks like an invoice that is branded to your company, you can take invoice customization further by adding your own payment terms and personalization. Thank you, when someone pays it, you can send them a thank you email, multi currency, this is one that I use quite a bit because I've filled people in pounds and Canadian dollars in US dollars. And when it's in Canadian dollars, there are certain taxes that need to be applied. So it's really complicated to keep all of that up in the air and freshbooks just does a great job at it. So if you want to try Freshbooks, please go to freshbooks.com forward slash syntax and enter syntax in the How did you hear about a section, you're going to get a 30 day trial, no catch, no credit card required. Thanks so much to Freshbooks for sponsoring. Nice, cool. So the next one here we have is to walk away from difficult problems. And this one is super duper, duper tough to actually do. Because when you have a difficult problem, the number one thing you want to do is continue to bash your head against that wall until you solve that problem. I'm very guilty of this. And it is one that is important to understand that that is not always the right approach. Sometimes it's the right approach, right? Sometimes you've got the time, sometimes you're in the focus and you're in the zone and you want to just keep hammering away at this thing. Other times, that's not going to do it and you're going to get frustrated. And it's going to take you twice as long or three times as long as four times as long to do something. My number one tip for this is to take a walk outside my boss and I we used to have this really is not a great office, it's a big office. But because it was so big, if you did a lap around the office, that was a pretty decent walk. So if we did maybe like three laps around the office, by the time we did three laps or so we would feel really good. We'd feel we talk about non code stuff, we talk about whatever we're interested in. And while you're doing this, you're taking the walk, you're getting some fresh air, your brain is actually working on these problems still, and you're not even thinking about it. And then coming back to your desk, it almost always feels like a whole new mind a whole new game ready to go ready to get into something new. Yeah, at the same time, often what I'll do is I will have a problem. And I know that I'm not going to finish it by the end of the day. And if I find myself pushing it, that problem right till five o'clock, I'm just grumpy at at five o'clock totally, it takes a while to come down from it. So usually what I'll do is, if I know that I'm not going to finish it around 430, I just drop it and walk away from it. And what will usually happen is while I'm doing the rest of my life, my brain will be chewing on it. And I'll come up with possible options. And what I'll do with that is I'll take those things, and put them in my my to do list application because I know Oh, that's how it could probably solve it. And there's this whole mantra of out of your head into your into your system. And that will allow you to say, Oh, you don't have to go run and grab your computer, you don't have to go run and write it down. You can just pop it into this application. It's in your to do application and you know, all maybe I should try approaching it this specific way. And more often than not walking away for a day or just walking away for a couple hours going to grab a coffee, it's going to come to you and you're going to be much more productive, you'll solve that problem quicker, which is really good. And I think that it's not going to affect the rest of your work as well as your home life as well. - -18 -00:33:55,260 --> 00:38:45,780 -Yeah, I know it's too easy to to just want to push through and then end up being grumpy when you leave because you didn't fix this thing or whatever. Next one is meetups conference and tutorials network with comps as in conferences. In case you didn't catch that one. And this is sort of how you can invigorate or you have reinvigorate listed here. That's a good word, your sort of hunger and your desire to learn new things by maybe heading to a code meetup every once in a while or heading to a conference and really feeling that that energy that you get from those things I know I really like to attend code meetups. Occasionally, I don't like to go to a ton of them because you can you could go to one every single night if you live in a major city but it I like to go to one a month or so and just feel that energy of the crowd. And I love doing this sort of thing, especially like the sort of energy you get out of it is just second to none and how inspired you can be leaving some of these things. Yeah, I think it's pretty easy on one side to get burned out from working way too much. I know a lot of my Friends who work corporate jobs, as soon as their kids go to bed, the jump on email and all of their employees are emailing around at like 10 o'clock at night. And that sounds off. That sucks. Yeah. And that's just the highway to burnout. But I think on the flip side as well, when you don't necessarily care about what you're working on outside, because like your work is a big part of your life, not for everyone, but for me, it is like it defines who I am. Yeah, my business my business, right, you can't shut it off. Exactly. This is my business. I'm very proud of it. And I absolutely love what I'm doing. So sometimes you can lose that. And then your your work, life tends to suffer. So just as much as you should pay attention to your life life, it's important to pay attention to your work life. And I think that by, at least for me going to meetups every now and then going to conferences, doing a tutorial, doing a fun project. So something that is low stakes, something that is not necessarily something you'd always be doing is really fun. And more often than not, I've gotten people, emails from people being like, you've totally reinvigorated my hunger for learning. And I think that's really important. Because if you leave it too much, these things move fast, you might not necessarily have time to keep up with what's going on or to learn anything at your work. Ideally, you would but not everyone does. And it's easy just to start to hate it life moves pretty fast. If you don't stop and slow down for a minute, or whatever that quote is I'm gonna I don't know the rest of the quote, or even for what it's from Ferris Bueller or something. But yeah, no, I mean, totally, totally, totally, totally. you need you need that passion, you need that energy, you need those, you know, that drive to want to want to go on? Yeah, I think the one sort of thing after looking at all of these tips is it's not hard and set rules that you need to follow in order to have good work life balance, because everybody's life looks a little bit different. Everybody is able to handle stress a little bit differently. But I think it's really just important to, to pay attention to how you're feeling both at work and in your life and and just tweak stuff. And when something works making a mental note of that or actually write it down saying this is working well for me. Because just as much as being a sick ass coder is important. I think being able to have a nice balanced life where you enjoy what you do, as well as enjoy your time away from work is just as important. Yeah, it's funny, you mentioned something there that got me really thinking just now was really let like, you know, we as developers, we spend so much time evaluating and re evaluating our code, right? We look at this code, we think about it, we think about how it could be better. we refine systems, we build systems, and we refine them. But how many times do you build systems and refine them in your work life and your personal life outside of the computer screen, right. And I think having the time to look at some of these tasks that we do every day and maybe optimize them or the things that we just do and the patterns, we just fall into taking that time to reevaluate and look at those from a different perspective. It can really totally shift your work life balance in a way that's going to make both things better. And I just think that's so important to take the time, it's important to take the time to find those patterns, optimize them, and work on making your life better. Well said I really like that if you have any tips yourself. Obviously these are just tips from Scott and I but I'm sure other people have lots of different situations that their own that they've they've really done some soul searching and figured out how they can do their best work life balance. Make sure you tweet us at syntax FM, or at Wes Bos and stilinski. Because I'm always curious to hear from other people how they how they manage that and it's also just like different times in life this these things change for me as my kids gets older when I don't have kids I'm sure as my kids go to school that will change as well. Yeah, absolutely. - -19 -00:38:46,050 --> 00:41:49,730 -All right. What about sick pics today? If you don't know sick pics are our picks that are sick. Every week we recommend a product or service just anything really that is in our life that we find to be sick. Yeah, I do. I have a good sick pick. And it fits so well with into this episode, especially the part we were talking about to do lists. I posted a an Instagram story yesterday of my to do list. And it's all nicely colored in organized and stuff like that. And I maybe got like 50 messages, what app really what app is that? I've never had so many messages from an Instagram story. I could not believe instagramers always want to know what app that app is at. And I just it blows my mind because I thought this app was very popular and very well known you use things I use an app called to do list. So if you saw that story or you want to check out an excellent To Do List application. I use two apps essentially in my life to keep myself on track which is notion for basically all of my docs you've heard me talk about it before and then to do list for my to do lists because notion has to do stuff but it's not nearly as good to do is to has reminders, it has calendars does priority setting it has daily sort of stuff, it has folders, it has tagging and all that good stuff. So I used to do it every single day to keep me on track. It's one of my favorite favorite apps. And I was just blown away by how many people who who saw that did not know what it was. And yeah, I'm I'm a huge, huge fan. Alright, so my sick pick today is called pass source pa s s, s o RC E, I've been on this, like, ever I've talked about this before. But I've I've been trying to get rid of all of my keys and all of my cards and just have a phone, which is probably will not happen for I don't know, probably for a couple more years, but I've really thinned out my keys. And I used to have a couple of those like annoying like fobs. Ooh, yeah. And the thing about fobs, and the thing about like loyalty cards and store cards and things like that is that they're just a barcode at the end of the day, or they're just a number that needs to be read by the thing. So a lot of companies will have Apple will have like an Apple Watch, or sorry, Apple wallet app where you can install it and put it on your thing. But a lot of people don't like Costco doesn't have it. My gym didn't have it for the longest time, a couple other ones didn't have it. And if you what you can do is you can just create your own pass on this pass source website, and then download it and Huh, it's not the best, but you can like pay for like a more complex version. But the free version allows you to just basically take the number that was on your fob for the gym, and then put it on this thing. And then you can scan it on the thing. The employees sometimes look at you a little funnily. But it's well worth not having to carry around your stupid thing all day long. You want me to scan this on your phone? Yeah, yeah, that's fine. But it's working well, I've gotten rid of so many cards that I was carrying around, maybe using it like once or twice a year, just because you have it and I'm just looking forward to that day where I have no keys and no wallet to carry around. - -20 -00:41:50,040 --> 00:41:51,480 -Unknown: Nice. Cool. I love it. - -21 -00:41:51,480 --> 00:41:52,980 -Do you have any shameless plugs? - -22 -00:41:53,070 --> 00:43:12,300 -Wes Bos: Shameless plug is all of my courses at Wes bos.com forward slash courses. If you want to learn anything about react, advanced react, graph, qL ESX, node back end, heavy lifting vanilla JavaScript, Sublime Text Flexbox command line powers, I got billions of not billions, billions, literally several courses on there. You can check them out. Some of them are paid, some of them are free. If you've never taken a course by me, you can just take a maybe I would recommend taking the CSS Grid or the JavaScript 30 course just to get a feel for how I teach, see if the way that I teach really connects with you. So that's that's, that's my business. Cool. And you can also head on over to level up tutorials comm forward slash pro to become a subscriber where you get access to all of my content. For those of you don't know I put out a new tutorial series every single month on level up tutorials on topics from react to CSS to all sorts of stuff so check it out, level up tutorials.com forward slash pro sign up for a year and save 25% Can Can we just clarify that it's level up? tutorials.com Did you see that tweet about your how you pronounce it literally. Someone said just breathe. listen to the podcast for a year and I thought he was always saying love love tutorial. Oh, yes. - -23 -00:43:12,330 --> 00:43:23,940 -Unknown: No, I it's one of those things that I've been saying. You know, like in my YouTube videos, Hey, what's up discoverable? oil? Thank you so much for like, I just I just do it and I can't I can't do I can't turn it off. I can't slow it down. - -24 -00:43:24,060 --> 00:43:41,420 -Wes Bos: I have the same problem with boss. I always forget to clarify that boss has one asset. Because everywhere else, yes, it has two s's. So I always forget that. And people are like what's going on with it? I'm sure people can figure it out eventually. But it's just one of those little hindrances, right? Yes, that affects a small portion of people - -25 -00:43:41,490 --> 00:43:45,600 -Unknown: level up. tutorials.com level up. - -26 -00:43:46,680 --> 00:44:07,920 -Wes Bos: Calm is about SEO. You got it. You are slash Yes. That's the tilty forward one www. w w w w Yeah. Okay, good. All right. That's it for today. Thanks for tuning in and supporting Scott and I in our businesses. If you've got any tips, make sure you tweet them at syntax FM. And that's it for today. Anything else to add? - -27 -00:44:08,010 --> 00:44:15,180 -Unknown: Oh, no, I don't I think this is it's a little late dad this. But it's important because this stuff is important. That's it. That's all I want to say. - -28 -00:44:16,020 --> 00:44:20,580 -Wes Bos: Awesome. I like it. Get your next week. Please, please. - -29 -00:44:22,470 --> 00:44:32,190 -Unknown: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax111.srt b/transcripts/Syntax111.srt deleted file mode 100644 index abc4e8d98..000000000 --- a/transcripts/Syntax111.srt +++ /dev/null @@ -1,40 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,330 -Unknown: Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott - -2 -00:00:23,610 --> 00:00:24,480 -Tolinksi ski. - -3 -00:00:25,950 --> 00:05:00,000 -Oh, welcome to syntax in this Monday tasty treat. We're gonna be talking about tidying up your code and why it's important, why you should definitely take some time to look at old code, look at code that's been there, or even look at code that you're currently writing. And well just make it better for you and your team. My name is Scott Tolinksi. And with me, as always, is Wes Bos. What's up? Hello. I'm excited to see what parts of my code bring me joy today. Yes, I'm excited to talk about the code that brings me joy as well. And something else that brings me joy is sentry.io which is an amazing way to track all of your errors, exceptions and bugs. Now, Sentry integrates with so many things that you already use in your tool chain and it does so in such a great way such as GitHub, Heroku, Slack, Bitbucket JIRA, HipChat, get lab, just as so many integrations, if you head on over to sentry.io forward slash integrations, you can see all of the amazing things that they connect with. And one of the things that I really love to use Sentry with to integrate is directly into my GitHub issues, I have a bug, I can just click one button, and it goes ahead and creates a GitHub issue based off of that bug, it can reference it within Sentry, and my team can keep track of any sort of issues. Now, there is some serious connections to a lot of different stuff. So again, I highly recommend checking out that integrations page and seeing just about everything that Sentry can possibly connect with. So head on over to sentry.io. and sign up today using the coupon code, tasty treat, and you will get two months free of century now I highly recommend this is one of those services that once you start using, you're not going to want to stop once you once you pop the fun don't stop as they do say so check it out. century.io coupon code tasty treat all one word lowercase. Awesome. All right. So we are getting into tidying up our code. So if you didn't hear the last or two, two episodes ago, Scott was talking about the new Netflix special from what is it? Marie Kondo Yes. And she has a Netflix special called tidying up. And she also has a book and it's just this kind of like, Japanese method to approaching tidying up your house. And Caitlin and I sat down and watched a couple episodes the other day, and it just makes you want to throw all of your stuff out makes you wonder all of your stuff out. That is very, we only could watch one at a time, though, because it stresses you out so much with like how some of these houses are just terribly messy. Definitely. Yeah. But that's what we're gonna do today, but with our code, so we're gonna approach some tips and tricks to tidying up your code. So if you've got maybe a couple hours here or there that you want to spend some time on improving the code quality, these are some tips that you can use. So I want to kick it off there. Yeah, absolutely. And I think we have a fun little structure for this episode, I think it's gonna be pretty fun, because we're sort of following a lot of the things that she does in both the show and the book. So first thing we wanted to talk about was removal, we're going to be removing things that are in our code base that we do not need. Now, this one should go as sort of common sense, right? If you don't need some code, then why would you have it in your application. But in reality, we all know that that's not the case. And and as time goes on, you end up with thing after thing that maybe you are going to use or you thought about using or you installed this library, and then you changed it, or maybe you never even, maybe you never even took off the idea that you thought about and then before you know it, you got all this stuff in your codebase that you're not actually using in any sort of meaningful way. And one of the biggest ones, and this is an needed comments, right? How many times have you had a block of code, and then you're thinking, yeah, this block of code is a hunk of junk, but maybe there's something in it that I want to be saving for later. So you copy it, you comment it out, and then maybe you rewrite it. And that commented out block just sits there and sits there and sits there, I like to think about is like something you put in the back of your closet, right? You're thinking I'm gonna I'm gonna pull this out again, at some point in Union almost never do. And if you're using some sort of modern version control software, if you ever need to pull that out of your closet, you can pull it out with the version control, you can go back and look at that commit. So delete any commented out code, do not leave commented out code in your code. It's bad. I agree. I think my one tip there - -4 -00:05:00,000 --> 00:08:19,830 -is when you delete it, make sure that the commit is just for deleting that code. Yes, it make sure you make the commit very descriptive as to what you are removing, because there's certainly in the past done that and not been able to find the commit where I did remove that code. And it's a bit frustrating. So making sure that you can easily reference it later, something I can't even remember what it is off the top of my head right now. But somebody like showed me an app the other day where you could put these pieces of code up where you're not necessarily using them. Yeah. I was like, Yeah, well, if you hold that, maybe we can find it. We just took a look around for it. And we think that it was on Product Hunt somewhere or on Twitter. If you know what this app is, let us know, obviously, there's lots of other applications that you can use to organize your code snippets. But I think like just dumping code that is not useful for you in your application, but in some sort of app would be helpful, or even like as a GitHub private just would be would be helpful as well. Yeah, I put them in just all the time. Yeah. Awesome. Also, another thing you can remove is unused CSS. And this can be a bit of a tricky one, if you don't necessarily know what unused CSS is there. There's a bunch of tools out there. The Chrome dev tools now has a audits tab that will show you this. And then I think there's some other tools. Yeah, there's a handful of extensions and tools and libraries for your build system to and there's even some things in your I don't know, like in Webpack, or whatever, that can just automatically remove unused selectors, but I don't know, I haven't used them. So I don't know how much to trust them. Or if you should trust them or any of that stuff. Yeah, that's a tricky one. I think that's the beauty of using like JavaScript modules and even CSS modules where if you have a or even just like importing CSS files into your your sass process, because if you no longer are using that thing, then you no longer make it into the final build. And that's beautiful, because you don't have to sweat it as well. I always remember going into websites, where I had lots of extra CSS and lots of extra JavaScript. And I didn't know if it was used or not, it was fairly large website, there's been seven or eight developers through the website before me, it's just it's tough to know that. And I think the tooling around that is getting much better, because it's almost impossible for a developer to go through that unless you were to have like, a regression, a visual regression test built into every single page on your website. Yeah. And like cleaning your house, the longer that you wait to do something like that, the worse and worse it gets. And the harder it's going to be to do a full redo. So putting it off only makes it worse. And in the same regard. There's you know, occasionally unused functions and things like that in JavaScript that Yeah, potentially being rolled into your final bundle, right. If you have some utilities functions that you intended to use, or or you're not using, you're not splitting them out properly, or you're just you know, stuff that you're holding on to that you think you might be using, you don't need to keep it in your code. Again, you can put it in a just somewhere, you can save it somewhere else. And you can have it there for when you need it. last thing you want is a bunch of extra code that is being downloaded to your user that's not being used, right. I mean, I think that's just a big thing. So do you have anything else for removal? No, no, I think we should move on to the next one, which is organizing. So once you This is the the whole Marie Kondo thing is you put all your clothes on the bed, and your you remove the stuff? Oh, and the hilarious part we forgot about removal is you have to thank it for your service. So - -5 -00:08:20,880 --> 00:09:59,970 -I kid you not. I have done that. watching this show. I have on ironically done that. Oh, thank you for what you have done for me coding, I know, a great shirt. Thank you for being a fantastic date parsing function. Yes, you've done your work as well. So once you've thanked your functions, it's time to organize the ones that you want to keep around. And this is this is a really good one. Because when you start a project, and maybe one or two years in your code base can look drastically different. And sometimes when you start a project, it's not necessary to have like a very rigid structure, or you don't even know what that structure might look like. So I think it's important once you have lots of code to refactor it into just like not necessarily changing the code, but just moving them into different files and folders into a system that works for you. And who better to talk about this, then Scott, who is master of refactoring? Yeah, I mean, one of the keys to this, too, is having tests and in that process to make sure that you're not breaking anything, but I do I love to re evaluate the structure of my project in different ways all the time. Maybe look at areas that should be broken out into their own fault. Like maybe I have one folder that's now got 20 files in it, right? And I'm thinking are all of these files truly related that closely? Is there some sort of other more tight relationship that I can store these in to make it maybe a little bit easier to find or understand so I definitely love looking at my my structure and sort of where things fit best and I'm not afraid to change that stuff, because it can be better and once it's better, it's easier to find it's easier to now - -6 -00:10:00,000 --> 00:12:23,910 -And understand it's easier to add on to. And sometimes there's a, you know, we've talked about this before with an index file where you can have an index js file that imports and exports things so that well, instead of importing from a file, you're then importing from a directory as a named import. And this can be really super cool. But again, it started not great for code splitting. So I pretty much only use this for things like styled components. But sometimes an index file is cool. And I think sometimes, I think, well, some systems can really benefit from it. I know some people definitely overuse it. But you know, whatever works for you, again, it's your system is your project, it's your code, you want the system to be something that works for you and your team, not for me, or Wes, you know, what I'm saying, totally else for organizing as well just also know when to break out your components, things into a new file, when to create a new component, when to create a new file with functions or whatever. Maybe this thing's just getting a little overboard. Like, for instance, I had, you know, all of my subscription functions, or my mutations for subscriptions, right. And there's a whole bunch of them. But then I started looking at them and thinking, Well, you know, a lot of these mutations of these functions, they're not actually doing anything with subscriptions themselves, they're actually doing something with the customer object. Some of these things are doing something with the user object. And it makes more sense to put these into a different file. That's all, you know, user based or customer based. And then while the subscription, one just got a lot lighter, a lot easier to manage, and a lot easier to parse where I'm going because they're actually not that closely related. So being able to take a look at things to know when to break them out into their own file when they keep them in a larger file. And I think that's a skill that is maybe something to just keep on looking at. Absolutely. Last one we have here is tidying up. So this is where you actually go in and start to refactor some of your old code. So Scott and I are obviously big fans of map filter reduce on this podcast, anytime I can tear into a any piece of code, maybe it's a for loop, maybe it's something that someone used unnecessarily use something like lodash for my haven did this on the Was it the Gatsby blog starter? Yeah, they had used the lodash. And they had used a couple other like, unnecessary dependencies with the for loop. And I went in there, I was like, Oh, hold me back. I refactor everything to map filter reduce. And I did I submitted a pull request, I was really happy about that. So he's - -7 -00:12:25,980 --> 00:15:00,000 -anytime that you can, you can do that you can often bring down the complexity of your code, as well as the the amount of lines of code that you have. Yeah. And I have a note here that this is not not ironic. This is not ironically, does your code spark joy? Like, I know, you could say this as a joke, and it is sort of a joke, but like, at the same time, how many times have you opened a file, and I've just been like, ooh, I don't really want to work on this particular thing right now, because it's, it's ugly, it's a tangled mess of functions, and blah, blah, blah. Or maybe it's one giant function that you know, is very scary to you. Or maybe the CSS itself, is just a tangled mess of who knows what, or whatever. I mean, they're there, we've all had times where we've opened a file and just sort of dreaded working on a particular piece of code, because maybe you don't know what's gonna break, you don't know, you know, it's just no fun to work on. So for me, I like to think about things like this. I don't like to have sections of my codebase that I would dread working in, I like to have all of the aspects of my codebase to be something that I would enjoy writing or expanding upon or using again, I can tell you offhand, right now, like maybe two or three files that I'm just not happy with right now. And I think most of you may be can have those gut reactions as well. So does this does this file make you afraid of it is a good indication that you need to start going through it? Yeah, yeah, absolutely. I think kind of on the same thread as well is think about other developers who will be going through that code at some point. And it might be a good time to, like we said, refactor it. And I just say like, because code is long, and it gets shorter. That's not necessarily always better. Because it could be just much harder to comprehend, and much harder to understand what's going on. So in that vein, I would say make sure you go and add comments to your code. I know there's people out there that say like, your code should be self documenting. And it should make sense and I don't buy that one bit. I think good comments in code explaining what's happening. edge cases, why you do things a specific way, are extremely helpful, both to your future self as well as other developers. Yeah, there's always times when you're writing the code, and you're like, I know exactly what I'm doing right now. And I'm going to know exactly what I did here next time I look at this and then the next time you look at it, you're like, Huh, what did I do? Why did I make these choices? I was like, whatever. Yeah, yeah. So I made a good comment and you don't have to go overboard but a good comment is going to help in one of the here's a here's a hot comment tip. A hot comment. Tasty tip is to use the better comments. The - -8 -00:15:00,000 --> 00:20:00,000 -Code extension. It is magnificent. It gives you different color coded commenting system. So if you have an exclamation point and makes the comment read, if you have a question mark, I don't there's a whole system to it. And I use those non stop, especially for things like to dues or Yeah, warning you answer. Yeah. Yeah, I love that, that VS code plugin you can do to do and it makes it orange, you can do put a star and it makes it green, which is important info, you can put a bang, which is exclamation mark, it's that that'll make it like an error. And then you can put a question mark in it, I'll make it slightly lighter. And then you can also put another comment in it. So if you comment out a comment like double comments, then it will just cross it out and make it really dark. So you're not necessarily seeing it huge fan of that Codex. And I'm not always a huge fan of things that are editor specific like that, because they're still comments at the end of the day, but the person has to have that thing installed in order to actually see the colors but it degrades so nicely. Just to regular comments for anyone else. It's so nice. Um, another thing that we have here is, we were joking that this is like the folding your clothes aspect of this whole thing is using a code format or like prettier and es lint, or something to check your accessibility features, like and especially in IE es lint or any of those things, because you can sometimes you can set them up to auto format or whatever on Save, you click Save, and everything just looks pretty. Looks nice. I folded all of my clothes and the Marie Kondo method. Now every time I opened my drawers, it sparks joy, and I feel great about it. So this is this is so fun to me. Because Yeah, again, when you when you save a file with prettier and it cleans it all up. You're just like, Yeah, I like this. It looks nice. Yeah. Here's a question when when you're adding prettier or Yes, lint to a project that previously had not had it? Do you do the entire project in like one commit reformat at all? Because the sort of the downside to that is that you you wreck all of your get blamed? Yeah. Or do you just do it as you you edit a file, you just kind of save that file, and then that file gets updated for formatting. I do it as I edit a file. And I would assume that there's still files in my code base that have never been touched by my current ies lid settings. Like sometimes I open up a file that I haven't touched in like, a little while, and there's just a bunch of red underlines, and I'm like, Okay, this does not adhere to my new formatting rules. I'll take the time to clean it up right now. So no, I don't do the whole project at once. I'm actually kind of scared of that. Yeah, I do it file by file as well. Because in addition to prettier formatting, I often will get Yes, lint errors. And then I often like to take the time to figure out like I really like yes, lint errors, because it tells you why it isn't you have to go and research, why is what I'm doing a bad thing. And then you go and research it and you you make your own decisions. And you either turn that rule off, or you rewrite the code to actually fix it. So I really like that as well that that helps you both get a better code base, as well as continually build your own es lint settings file, that is exactly how you like to code Exactly. Next thing we have in here is going to be our little last one here is our CSS and we all know CSS can grow to be a giant monster, especially if you don't have a system from the beginning. And maybe or you don't have a team that develops the system. Or maybe you had a system. And it's been two years since you wrote that system. And now the the application no longer just has this and that but it has this that that and the other thing and a billion other things. And then you have a whole bunch of exceptions, a whole bunch of patches to your CSS. And before you know it, it is crazy. So CSS is one of those things that every once in a while, if you can take the time, reevaluate your whole system, look at it through fresh eyes and see if it can be more elegant. If you rewrote it from scratch. And then that's like, that's a big commitment. It's a big, big, big commitment. But even just seeing how you can keep and maintain a system. Or if you don't have a system, see if you can initiate one, it's gonna it's going to make things way, way better. It's going to make your file sizes smaller, it's going to make your code work better. And I think there were there was a really great talk from Nicole Sullivan on object oriented CSS. It's not necessarily I don't know, it was a while ago. And she you know, is sort of famous for going into Facebook and really tuning up their CSS and saving them a monstrous amount of kilobytes and megabytes and all that stuff. I forget the blog post well, but look for it. But I think there's just that's definitely worth a look at to see how you can organize and keep your CSS in a better way and maybe reevaluate it. Yeah, this this is from Nicole Sullivan, who sort of like pioneered the whole idea of object oriented CSS, this is before bam, or any of the things that we had and I was just looking at the date on this thing. It's February 4 2009, which is means it's almost 10 years old, amazing. I remember when this came out, a lot of us are just starting to pick up these CSS principal. - -9 -00:20:00,000 --> 00:20:59,010 -pulls where we're using some sort of system, whether it's CSS and j s, whether that bem and this was 10 years ago, which is way. So she obviously she pioneered a lot of what we have today. Yeah, for sure. Yeah, I would just didn't stay he Tran of her work for so long. So definitely check out everything she has to post on CSS. That's pretty much it. I mean, you know, your code, like any other physical space you're in, the worse and worse it gets, it can feel like it's like the walls are closing in, right? It feels tighter, it feels harder to work in. It feels like less fun. And even though you know, this whole maybe spark joy thing could be viewed as sort of a joke. It's, it's not really if you think about it, it really can affect your day to day life. And I think it's important to take a look at some of your code and see if it can be better. Great. Well, thanks for tuning in. And we will see you on Wednesday already. Please - -10 -00:21:00,900 --> 00:21:10,680 -head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax112.srt b/transcripts/Syntax112.srt deleted file mode 100644 index 78d02e16b..000000000 --- a/transcripts/Syntax112.srt +++ /dev/null @@ -1,280 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:06,120 -development treats out there. - -4 -00:00:06,149 --> 00:00:09,000 -strap yourself in and get ready to live ski - -5 -00:00:09,000 --> 00:00:10,530 -and West boss. - -6 -00:00:10,530 --> 00:00:18,030 -Wes Bos: Welcome to syntax. This is a web development podcast. My name is Wes Bos with me as always is Scott Tolinksi. How you doing today, Scott? Hey, - -7 -00:00:18,030 --> 00:00:45,900 -Scott Tolinski: I am doing super good. I'm feeling really good. In my office right now I've been konmari seeing everything and everything that feels very, like open and free. We just did our entire kitchen. And we just donated like half of our entire kitchen. So Oh, man, everything in this house feels great. And when you work from home, it is really important to have your workspace or your home life, your home space, everything feels so good. So I'm feeling good. I'm ready to go. I'm feeling nice and refreshed. How about you? - -8 -00:00:45,900 --> 00:02:18,690 -Wes Bos: Awesome. I'm feeling good as well, I'm, and he's still clean up my office. But we've definitely been feeling the contrary as well. Yeah, in our house here. Today's episode is called the freelance client lifecycle. And I think we're gonna actually break this up into two episodes. And we're basically going to talk through all of the steps from like meeting your client and gathering requirements all the way through to deploying the website and handing it off to the client and fixing any bugs. And we're going to go through each of those steps and sort of explain what it is that you do here because we get a lot of questions about freelance just because the beauty of being a web developer is you can work for yourself, or you can just like make an extra couple thousand bucks on the side and pay for your family's vacation or buy a new laptop or whatever it is, you can always make a little bit of side money doing freelance. So we're gonna go through all of that Scott and I, I myself have been a freelancer for I don't like 10 years or so I've gone through hundreds of clients, client projects, and I have this sort of down Scott as well as done quite a bit of client work as well. So we're gonna lend our thoughts to this. Today's episode is sponsored by two awesome companies Log Rocket, which lets you replay what users do on your site, helping you reproduce bugs and fix issues faster, and a tech meme ride home podcast, which is kind of cool. We're having a podcast sponsor our podcast, they do a daily podcast about what's going on in the tech world. It's called the ride home by tech meme. We'll talk a little bit more about those, both partway through the episode. So I already asked you how you're doing, Scott. So we jump right in. - -9 -00:02:18,749 --> 00:02:19,500 -Scott Tolinski: Let's jump. - -10 -00:02:19,709 --> 00:02:57,539 -Wes Bos: Yeah, so let me just kind of frame this, I guess we're gonna first talk about gathering requirements, producing a quote, producing timelines, creating a contract setting expectations. And we're assuming that this is a project that has both design and development baked into it, we understand that not all projects have that. So the design phase of the project, the development phase of the project, feedback and revisions, deployment, handoff, bug fixes and support, and finally, what to do when things go to shit. So we probably will get up until design depending on how long this takes today, and then we'll have a part two next week that will finish this off. - -11 -00:02:57,599 --> 00:03:35,460 -Scott Tolinski: Yeah, the sequel. Cool. So I think one of the first things I'm going to mention before we even get started is that we won't be covering how to find clients in this episode, I think that might be worth an entire separate episode, because that is like a whole thing is finding clients and building those relationships and growing those things that we've talked about a little bit on the show, but we're not going to be covering how to actually come across these clients. This assumes that you have a client, you have a project, and you are ready to go. So since we are ready to go, let's get into it by gathering requirements, which is typically the first thing you do when you start a particular project. - -12 -00:03:35,639 --> 00:04:35,610 -Wes Bos: Yeah, so I really like this phase of it. And I think that this is probably the most important part of the process, often you want to rush into just building the thing or designing the thing because that's, that's what you do. And that's your occupation. And that's what you're probably excited about. But spending time on gathering the requirements of the project is really, really important. And if you botch this, you're gonna have change orders and what's called scope creep happening throughout the entire project. And I think that poor planning is why agencies have dedicated project managers, it's a full time job just to manage your actual client. And I think that it's also why many freelancers hate their clients, we get a lot of questions that are sort of have a tone of them versus the client. Why are clients so stupid, they're so dumb, and it's so hard to work with them and clients are wild, right? And it's your job to actually tame them and it's your job to actually interface with them. If you're running a business here and it's it's your job to actually interface with them and keep things on track as as best as you can. So what are some ways that you can gather requirements got? - -13 -00:04:35,759 --> 00:05:20,910 -Scott Tolinski: Yeah, I think the biggest one is to kick things off with some good communication by asking a lot of questions and communication is going to be a common theme through most of this episode. And the next because the good communication bad communication is really the sort of the make or break besides the technical aspects of a project. So initially, you're gonna want to ask a lot of questions. You're gonna want to ask questions about their thoughts on on other on other projects on other things they like what they don't like, you're gonna want to ask about what the general requirements are of their site. And I'm talking general requirements. This is before we even get down into the nitty gritty, we want to just know what overall what's the big picture? What are they looking at? What are they like? What are their their thoughts on sort of things? - -14 -00:05:21,180 --> 00:07:24,690 -Wes Bos: Yeah, I think at this point in the in the project, what I will always do is talk to them about their business, say, what is it that you do? How is it that you make money? What are people landing on your website to do? What are they looking to find? And just really getting inside their business? Because you're on their site, you're trying to help? And I say business, but it might be any type of organization? Yeah. And then you take that, and you don't just ask them, like, What do you want? Because the client might not necessarily know what they want. They're hiring you, you're the expert. But you basically take like, what are your needs in here? What are you hoping to have on the website, they can provide any input on that, I break that down into not necessarily pages, but you kind of can kind of go through the whole website, and break it down into major pieces of functionality. So you might have a, I always use a store finder as an example, because I've built like plenty of those in my day, you might need a contact form, you might need a specific contact form. So even like if someone says, Yeah, contact form, like I specifically remember working for a client, they said, a contact form, no problem, WordPress contact form, slap it in, change the email, you're up and running, right. But the real need was the ability to have multiple recipients, you want to choose from a list of people who can receive the email, you need to be able to filter by department, first of all, and then you'll also have the option to upload files. And then you also have the option to cc yourself. So that was way more involved in that that was before a lot of these, like form builders had been around and had to build a lot of that functionality myself, and I had had to sink a couple days into building that thing. Whereas just in my mind, I accidentally just asked them, oh, we need a contact form, no problem, that's like six minutes versus a couple days. So it's really important to say, these are the pieces of functionality I need. And this is how it will work breaking down every single piece of functionality, what it needs to do. At the end of the day, you can't be more specific in your requirements, because I've just been burned so many times my own doing by just not asking the right questions. It's my fault, not the clients fault. - -15 -00:07:24,749 --> 00:09:05,730 -Scott Tolinski: Yeah. And a lot of the time, I think that even can stem from not seeing the big picture as technical people, as developers, or designers, we often get lost in our craft. And we we see things in a way that are very much through the eyes of somebody who has training. And typically what we want to be focusing a lot of times is again, you mentioned a lot of big picture stuff in terms of what is the client really trying to do, right? We see it as, hey, we're taking some data and sending it into a form. But maybe that's not what the clients not seeing it like that. They're seeing like, I need to gather leads, I need to keep track of Yeah, I need to do this. So you want to be looking at the actual needs, and not the technical needs as well. You want to see big picture of what they're trying to accomplish. And one of those big things is like, really, how does this business work? Right? How does this organization work? What are their goals? How did they make money? How, like, what is the end result of what you're trying to do here? Right? If you're building a website for maybe like a real estate agent, are they trying to gain leads, so that they can work with clients and sell homes, right? I mean, at the end of the day, the main goal there is to generate leads. So your work is not to have a contact form that submits a thing or whatever it's to help them generate leads. And I think understanding that scope and that practical real world of what's going on rather than getting lost in the weeds, the technical aspect of things, is going to help you better understand what technical challenges will present themselves because again, your client, they don't care about the technical aspects. They don't care about the technical, creative aspects of your work. They care about the results and what they're trying to do with their business. - -16 -00:09:05,880 --> 00:10:49,860 -Wes Bos: Yeah, absolutely. And at the same time, the client also doesn't know what is hard and what isn't. So I always tell my clients tell me, like, first of what your website needs to do, but tell me like, if you had a dream website and at the end of the rainbow, what would it do? And then I will take those dreams and your heart requirements and then suggest something that's not going to blow the budget because like you don't know, like, if you have no idea how much time this stuff makes, then you have no idea how expensive it's going to be at the end of the day. So it's up to you as well to take the budget into it. So at this point, I also usually ask the client, what sort of budget you're working with. It's a hard question to ask because everyone kind of squirms when you talk about it, but it may very well be I have no idea or it may be very well they say I've got 1500 bucks, or I've got 10,000 bucks or $20,000 to spend right now. I like to ask that question very early on. Because many times when I was early on, I spent maybe a day or so gathering requirements producing a quote, doing research, because often, it was something where they would ask for a specific example of something like, I need to be able to have a video slider. And I would spend maybe like an hour or so just making sure it was possible and not to over my head. And if you spend all that time, and then you realize that they're just out to lunch on on money, they're like, Oh, I was hoping it would be $200. And you're like, no, this would be $10,000, then you've just you've wasted all that time. So asking about money up front, and kind of giving them a ballpark of maybe just bring them up a couple of websites that you've done in the past and said, This was 10 grand, this was 15 grand, this was two grand, I just built this one little piece. I think that's that's really important as well, - -17 -00:10:49,950 --> 00:12:39,899 -Scott Tolinski: yeah, I think being upfront about money in general is an important thing as well, like understanding what people have to work with, and what things might cost when gathering that. That way, there's no sort of sticker shock, when you do give them a quote, mean, again, that they're expecting to be spending $2,000. But you are expecting the paid $10,000 for this thing. And you submit that, that could be a little bit shocking if those initial understandings of what the scope of the project is wasn't taken care of in that initial gathering requirements chat, because, again, this is what you're doing for freelance and what they're doing is a business and in businesses, they talk about money. So you're gonna have to be comfortable talking about money, talking about what things cost, and don't feel like you are, I don't know, it's a hard skill to learn. But I think oftentimes, people feel like when they want to start talking about money, that they want to start feeling maybe guilty for whatever they're charging, or there's some sort of inherent feelings there. And so I think that's something to get over and just flat out say, what is the budget for this project, and it is sort of a conversation, people sometimes see it as like a, this is the price, it's not gonna move, or this is the budget, it's not going to move. It's a, it's a conversation, it's a back and forth. This is how much I have, okay, well, this is what we can do for that, or let me work with this restraints, but maybe present you an option with more money, I just think about like, we're building a fence, right? And the guy asked, you know how much we're looking to spend on a fence. So we tell him, this is sort of the ballpark or whatever. And he didn't come back to me with All right, here's what we can build to you for this amount. It was like, we can build you for this, which is cheaper than what you said, we can build this, which is probably closer to what you said. And we can build this or this, which are way above what you said. And maybe you want to go above and beyond and do these extra things. - -18 -00:12:39,990 --> 00:13:33,419 -Wes Bos: Yeah, every time we do stuff in our house, our contractor comes over. And he knows that money is you have to be conscious about money. But there's like this fine balance between my wife's overly expensive tastes and the actual budget that needs to happen. Yeah. And we love him for that, because it's not like he is conscious about the money as well, which is really good. And he was he's always suggesting stuff, because he's the expert in that case. So like, that's good. One last thing I'll say and gathering requirements is important to know who will be using the site and who will be updating the site. So both as a back end administration, who will be updating the site, uploading content, writing blog posts, uploading photos, whatever it is, and then who will be consuming the website? Is it primarily mobile users? Is it primarily people who are on their desktop? Is it business users? Is that technical users is that older people? All of that information is important to take into consideration when you're gathering these requirements. - -19 -00:13:33,539 --> 00:14:00,360 -Scott Tolinski: I have a question for you. Yes. Thoughts on a form? Like I know, in an ideal world, this is a conversation that's happening back and forth, right? It's it's Yeah, meet for coffee or something like that, or you go to a business and you you go to their conference room and talk. But what are your thoughts on giving a standardized form to all new clients, like, hey, here, fill up this Google form, which has a list of, you know, 20 questions or something? - -20 -00:14:00,779 --> 00:15:34,919 -Wes Bos: Yeah, I don't like it from an initial point of contact. Because if you're just searching the web for web developers, and you stumble upon someone's thing, and they have a phone number and an email, sometimes they have a little contact form with a couple inputs in it, I think that's fine. But if your trade out, hit them up with this huge contact form, most people aren't far enough. And they need help thinking about all of these things. So usually, what I like to do in that case, is you can have an initial chat with them and say, I'm gonna send you over this huge contact form or this form to fill out fill out as much as you possibly can. There's 100 questions on here, and then we'll come back and we that actually happened on our This is totally unrelated web development, but we went through with our daughter, a sleep trainer, because she was not sleeping at all. And the way it worked is we got on the phone with a sleep trainer. And we said like, what's going on? We're not sleeping or a kid just is not going to bed and waking up all the night and then she's like, Okay, I think I can help you. I'm going to send you over like this. It's gonna take you two hours to fill out this huge thing. It's gonna be every aspect of your life and the room and everything about the child. And I think that was good because they hooked us with the first little call and the contact. And then we had to put in like two hours worth of work actually filling out this thing. And then we gave that back to them. And then based on that to our form, we had a one hour call with the plan of approach of how to actually solve this thing. I thought that was such a good way, where it didn't feel like a job initially, because if they had asked us right out the gate to fill out that form, no way, I don't have time. Yeah, time to do something like that. But I was convinced after our - -21 -00:15:34,919 --> 00:16:19,049 -Scott Tolinski: initial phone call, we were actually initially doing something with a financial planner, right? And they sent us a big old questionnaire form. And the questionnaire was really nice. And it was like a nice way to have that after we had already had an initial like, chat. And, man, they made every single input on that thing required. And there were maybe like, 20, things that we just flat out didn't know how to answer. It's like, we want to have a conversation about these things like, and I was just like, Ah, okay, I guess I have to like input, like something in there, just so let me submit the form. So we can continue this conversation. And it was just so frustrating. So yeah, give definitely give your clients the option of not filling in things they don't know or aren't comfortable understanding, like submitting a form. So - -22 -00:16:19,200 --> 00:16:50,010 -Wes Bos: yeah, cool. I also, that's a really good point as well, because I think these kinds of forms will make the person start thinking about it. And if you sit them down for coffee immediately and start asking these questions, they may have not even started to think about XY and Z. But if you give them a form, they're going to take a day or two and chew on it, talk to their significant other about it, and then they'll come back to you with a lot of really good info. So that's, that's a requirement. So that was probably 15 minutes of just gathering requirements. Again, I think that's probably the most important part, - -23 -00:16:51,390 --> 00:16:53,730 -Scott Tolinski: to partners, because there's a lot here, - -24 -00:16:54,000 --> 00:18:01,440 -Wes Bos: there's a lot of, there's a lot of little nuggets in here, I think that is important to touch on. So once you have all your requirements, you feel like you've asked enough questions, it's time to then take that and probably I would say the worst part is figuring out the quote for this thing, because you have to take this huge list of requirements, and figure out how much that thing is going to cost. And we've talked on end on this podcast, how we're both big fans of fixed price billing, instead of hourly, because you don't want to come back to this person say it's gonna take 100 hours at $100. And like, they're gonna say, like, okay, like, I have no idea. Yeah, like, if someone came to me and said, I'm going to renovate your bathroom at $48 an hour. And like, unless you give me like a finite, you will not go over however many hours, that means nothing to me, I've no idea how fast it takes you to knock a wall down or plumbing, plumbing, some water. So what we like to do is to provide a fixed quote based, which is, here's what you will get, and and here is how much it's going to cost. So how do you figure out that fixed quote? What's your approach? Scott? - -25 -00:18:01,680 --> 00:18:13,770 -Scott Tolinski: Actually, even before I get into, I think you had a really good point about I mean, we've so far we every single time, we're giving examples about something that we keep going back to other contractors or other things that we're working with, - -26 -00:18:14,130 --> 00:18:15,570 -Wes Bos: right? And yeah, - -27 -00:18:15,570 --> 00:19:40,100 -Scott Tolinski: I think it's important to just look at our profession. And think, in some ways, it's not special at all, in terms of your contractor, you're doing work for a client, and you're going to get it down that way. And too often we get lost in like, what are what we're doing it as professionals here, but you really need to look at it the same way that you would have these expectations from a client that you were hired, or a contractor that you were hiring to do something for you or your business, how you'd want that to work. Okay, so yeah, for breaking down the quote, or even figuring out the amount for me, I like to just take a big step back and list out all the requirements. And even though we're not doing things hourly, I still like to go through sort of thing by thing and think about, alright, what is the time commitment here? What are the potential pitfalls, what are these things that are maybe going to, to take longer than I'm expecting, and in really look at that, because that is the the chunk of what this thing is going to cost in terms of your time and your availability to get this done. And again, it could eliminate some aspects in which you might need to ask more questions to even establish what those things are going to be because the last thing you want to do is say, all right, this slideshow is going to take me two hours, so it's going to be no big deal. And then when you get into it figure out it's gonna take you 10 hours. And then of course, your quote that you've generated is now just well sunk, you know, essentially, - -28 -00:19:40,469 --> 00:22:33,660 -Wes Bos: totally. So what I'll do in this case, as well is break it down into major functional areas, which I have done already in the requirements. Yep. So that's kind of the beauty of gathering requirements in functional areas. And then I'll go through it and say the store picker is going to take me 20 hours to build this homepage has a custom layout is going to take me another eight and Then I'll sort of like break it down into that add up all the hours. And at this point, you also need to kind of figure out what you're worth at an hourly even though you're not charging hourly got to figure out what's an hour worth of my time. So when I was doing it, it was between, when I started, it was like $40 an hour up until like, I finished at about like one to 150 an hour. And then you basically take the number of hours, you think I usually add on 20 30%, just because developers are horrible at estimating how long time will take. And you usually think that you're much faster than you actually are. So add on 20 30%, and then multiply that by how much you have. There's also this this idea of value based billing as well, where even though you might have like built out a whole tool set, you might have built out a whole bunch of like your own internal libraries or whatever to make yourself faster, that doesn't necessarily mean you should charge less, because there's still value given to the client in in that thing that you're bringing to them. And then once I have that, add it all up, usually, I don't usually break it down into each functional area. But if the client is concerned about about potential price, I'll try to like, maybe break something out of that being like, you know, we don't have to do the stock picker right now, that's going to be 2000 bucks. And we can do that at a later time. But included in my initial quote is laying the groundwork so that we can easily add on this thing in the future, just so that we kind of know about that this might come in the future. And it's important for me to know that when I'm building this framework, when you're setting up your schemas or your data types, it's important to know about that. So that's how I do it. And then I What else do they do here explain the tech in relation to how it will help their business or how easy it will be for them to manage. So it's important to spell out what tech you are going to be using in this thing. Some clients don't care. But generally you want to say, I'm going to be using WordPress or Gatsby and the back end is going to be built in in something else. And it will be easy for you to update it because that's important as well. I've heard many horror stories where developers build their thing in some like markdown based GitHub thing. And it's impossible for the client to update it because they have no skills to do that. But don't just say it because like, this is good tack, say, this is good tech, because it's going to make your website fast, it's going to help your business grow, it's going to be easy to update. This is open source technology. So if I get hit by a bus, any developer can pick it up from there on out. - -29 -00:22:33,690 --> 00:24:38,370 -Scott Tolinski: Yeah. And that's definitely an important aspect of things. Because at the end of the day, your client doesn't really care about the tech itself, right? They care about what the tech is going to do for them, right? It's going to be super easy for them to update, it's going to be superduper fast, it's going to be faster than all of their competitors. It's going to be any of that stuff. And and I think those are the important aspects to outline when you're talking about the tech itself. And just so we don't get lost in the weeds there. And the next step is going to be presenting the quote, and now I think this one is occasionally I think this one is occasionally under done, you know, maybe you're sending an email, it's gonna cost this much right. And that's not I, in my opinion, that's not the ideal way to do it. Because I think about when I worked for an agency, and one of the ways that we did it is we had a presentation to it, but not even in the presentation we did we listed out each of the things that are going to be included. We also talked about what's not going to be included. So if the site is this, we're going to say alright, it's going to be again, this tech, we're using these things, it's going to be this way, it's going to feature this slideshow here, a content form or contact form here, blah, blah, blah, what it's not going to do is it's not going to have real I guess it this aspect of things maybe should be things that you've potentially discussed, like if the client was thinking, well, maybe I want some real time chat or something, maybe no, you're gonna say the site's not going to have real time chat, it's going to have a contact form and submit ones blah, blah, blah. You should also have some sort of some validation for in terms of how long this quote is valid for, right? Like this quote expires on this date, or this quote is good for two weeks, because you don't want your client to sit on this quote for two months, and then maybe you're way busier now than you were two months ago. And when you're way busier, due to the laws of supply and demand, your price will technically there your price or availability will change or go up. So I mean, when you make it should be for that point in time for maybe like two weeks or something. - -30 -00:24:38,580 --> 00:26:17,040 -Wes Bos: Yeah, I always put that on all my quotes just because I don't want someone coming back a year later and being like, hey, we'd like to do this now. So I say this quote will be valid for two weeks, and also we're going to get into timelines. Next. The quote will also the timelines are based on the person accepting it X, Y and Z at a certain point in time, just because it's important to you view the contractor. You might get an Another job, and then all sudden your entire bandwidth is taken up and you can't overload yourself in that manner. Another thing like people always ask me, like, what's a template for your quote, mine is very, very simple. It's usually just my logo has a title that says, like, quote for business website, and then this quote is valid for two weeks. And then underneath that, I'll have a little blurb of what the website will do. And then I break down each of those functional areas that we talked about in the last two steps. Well, I'll say the homepage, this is what it includes, these are the different features, here's the store finder, here's how the store finder will work, here's the technology will be based on breaking down each of those. And then at the final, the final piece of the quote is actually give out the prices for what it is. Note that it includes taxes as well, a lot of people always feel bad. Initially, people who are first getting into freelancing feel bad about having to charge tax for some reason. But in almost all cases, the business doesn't have to pay that tax, they'll get it back at the end of the year anyway. But just making that template, look professional, you can't include too much information in that quote, because it should mine are usually just like two or three pages long. Make sure that the client reads through it, what it does include what it doesn't include, and then nice and clean way to reference that at any point in time. - -31 -00:26:17,070 --> 00:27:31,590 -Scott Tolinski: Yeah, and I do think presentation matters here. I mean, granted, we're living in a different world than we were when I was working at my agency, because it's all much more digital based. But we were working when I worked at this agency, all of our we would have a meeting to give the quote and in that meeting, we would have individual embossed, or not envelopes folders, they were like an embossed folder with our logo on it. The quote had like a nice template, the whole thing had a custom look to it a custom feel to it. It was printed on heavier paper, it was very just professional feeling. So when you gave it to them, it felt like I mean, you're not getting anything, but they're about to open up something to potentially agree to a lot of money. I mean, if you think about it, it's like companies like Apple, right? They put a lot of money or a lot of time into that experience of your products. So you're more likely to give them more money, because the experience is better. So if you're getting this, like everything's digital now, so it's not as easy to do some of that stuff. But if they're getting a PDF or getting something like that, it's going to be better for you if you're charging more money to have a more luxurious experience than like a standard Google Doc with a standard font or even worse, just an email with a price tag or something. - -32 -00:27:31,620 --> 00:30:01,890 -Wes Bos: Yeah, yeah. Don't paste it into an email, always send it and also don't send it as a doc x. Every time someone sends me Oh, yeah, like no something in a doc x like a contract or something, I died a little bit, the contract makes sense. Because contracts, you can read lines, stuff that you don't agree with and then sign it. But I generally just prefer to get a PDF because I don't have to like, open it up and word or convert it in Google Docs is such a pain in the butt. Just send it as like a solid sealed PDF that the client can look over. And then if there are revisions to that, you can always include the revision in the name in the name of the actual court itself. Cool. Speaking of technology, today is the tech meme ride home podcast. So tech meme is a publication that covers everything in in tech. So big companies like Facebook, obviously, apple, all of the hardware, all of the software, whatever is going on in the tech world tech meme will cover it. And they have a podcast that runs daily, at 5pm. Eastern Standard Time. And it's usually about 15 to 20 minutes long. And it's just going to get you up to speed with what's going on in the technology world. I like this because like there are ways you can you can stay up to date with what's going on technology, you can stay on Twitter all day long, and sort of ingest all these tweets. Or you can just listen to this podcast once a day on your ride home on your walk home on your Boosted Board home. You can await you're not supposed to listen to stuff when you're on your Boosted board or you maybe it was whatever method of transportation you are on your way home. Sing is 15 to 20 minutes, seven and a half to 10 minutes if you are listening to at two X and you can just kind of ingest whatever's going on in the tech world, which is pretty cool. One kind of cool antidote they provided here is that Mark Zuckerberg, CEO of Facebook, if you haven't heard of him, he called tech meme, the one news source he definitely follows. So take a look at the podcast if you're trying to stay up to date with what's going on in our crazy technology world, especially like over the last week was CES, the Consumer Electronics Show and there's just been tons of especially I've been trying to the Smart Home stuff that's been coming out all the new updates to all the new lights and sensors and whatnot. So I'm going to add this to my overcast today. The way you find it is just go there's no website for it. So just search on your podcast app for ride home and you'll find it it's called the technium ride home. Thanks so much to them for sponsoring, - -33 -00:30:02,100 --> 00:30:13,290 -Scott Tolinski: I love podcasts that of that of that length I subscribed to like several that are like come out daily that length. And you just put them on and they're over quickly get a nice little dose of everything and, and so it's a big fan of stuff like that it's - -34 -00:30:13,290 --> 00:30:17,820 -Wes Bos: a tasty treat, like we tried to do, but very rarely ever keep under 20 minutes, - -35 -00:30:17,820 --> 00:31:05,310 -Scott Tolinski: right? No kidding, right? Okay, so next one is going to be talking about timelines. And this one is important because this is one of those aspects of a project that can make or break sort of how your client feels about the project. Because if you set the incorrect expectations for timelines, and you go over your timelines, it's going to immediately look badly upon you. Obviously, we all know that clients have a knack for extending timelines by not giving you assets on time and not doing their their part of the job on time. And that's something that we need to spell out. So in the first part is Yeah, you need to have a timeline with hard dates. Right? hard on hard off, because I see Wes laughing over. - -36 -00:31:06,870 --> 00:31:12,180 -Wes Bos: I set you up for that, and you took it. Anyways, good to do. - -37 -00:31:12,480 --> 00:32:12,900 -Scott Tolinski: Yes. Hard on hard off. Yes, you even capitalize the hard on I see that. Now, it is important because like, honestly, your timeline is just as important as their timeline, right. Because especially if you're working with several different clients at different times, the last thing you want to be doing is having your project extend into another timeline for another project. And then you're working double time or over time, or whatever. So essentially, you do need to have hard dates. This is when we're going to launch this is when we're going to have some sort of beta period where things are good, you can test out and use it. This is the design time, this is the death time, all this stuff listed out clearly on a calendar. And one thing I like to do is set up a Google calendar that actually shares with your client. Yeah, they see it on their calendar, any sort of meetings go along with that. But they see start time in time. This is when we're launching this is this. And that way if they have any questions like, oh, is the design done? Because it says the design should be done right now, you best have that design done on time. - -38 -00:32:13,020 --> 00:33:36,810 -Wes Bos: Yeah, I always have in my quote, in my quote, often I include the timelines as well. And I say all of these timelines are assuming if I have questions, or also I provide a list of due dates from them, because you are working with your clients not like they just give you the job and you go off and do it. Often you need things like content is probably the biggest one, you need assets, maybe they're taking some photos of their space, or their products that need to get done by a certain point. So I always say assuming you hit these deadlines are spelled out for you. As well as assuming that any questions that I have you give me a 24 hour turnaround on any questions or feedback that I require. Because all too often people are chomping at the bit to launch this thing. And then when it comes to you asking a question about, Hey, could you send me over the list of people and all of their jobs, or Hey, could you send me over x, y and z, it takes a week or two for them to get around to it. And that can just destroy any timeline. So holding your client accountable to what their end of the bargain is, is really important. Because he and then I also say in here is like, if you blow these timelines, then I have to start another job, like this is my job, I have to start other things. And this might just like drag on forever. So it's really important to me that I've keep my own timelines, but you also are on the ball with was working with me on this thing. So we can move it? Well. - -39 -00:33:36,860 --> 00:34:36,380 -Scott Tolinski: Yeah, I love how you you have a note here that says, Be generous with your estimates, under promise over deliver. And that's sort of like a good mantra for freelancing in general, or even doing work, you're gonna want to do a downtown job, you're gonna want to make sure that job has done better than what your client is expecting and faster than what they're expecting. Because when you initially plan the timeline initially plan the quote and everything like that, that you gave yourself more time than you needed, rather than about the time you needed, or maybe even essentially an optimistic view of time that you needed. And we are optimistic people, a lot of times, we just sort of say, this is what it's gonna take me without adding on. So it's important to add on that buffer so that you know that the mount that you initially thought at least has a little bit of an extra buffer on top of that just to save yourself from your own optimistic presentations of everything. - -40 -00:34:36,600 --> 00:35:10,190 -Wes Bos: Yeah, and I often get questions about both quoting and quoting timelines is like how do you know how much it will cost? And how do you know how long it will take you? And the answer to that is you have to figure that out. That's a skill that you need to build. And often you see very experienced contractors and we go back to just like contractors in your house or we just say in in the UK they call them builders and no Another funny word that I heard that UK the Brits say, you know, those like yellow gloves that you do dishes with? Yes. Do one of those called rubber gloves? - -41 -00:35:10,230 --> 00:35:11,730 -Scott Tolinski: I don't know. I don't use those. Yeah, - -42 -00:35:11,790 --> 00:35:20,820 -Wes Bos: I just go you don't use me there. This is not like the 1920s. But I was watching a video on YouTube and he says, I've got to get me some marry Gold's - -43 -00:35:22,800 --> 00:35:23,580 -Scott Tolinski: sounds good. - -44 -00:35:23,609 --> 00:35:55,460 -Wes Bos: Yeah. So for a UK listeners, a contractor is a builder that comes to your house and does renovations. What was I saying? I just totally sidetracked by miracles timeline, quoting time is a huge skill. And if you get experienced contractor, they will be very good at quoting. And sometimes you get inexperienced or bad contractors who are very bad. And they always blow the budget on or on timeline and on costs and things like that. So that's just as as much as you want to develop your web development skills, it's also important to be able to develop your estimation skills. - -45 -00:35:55,590 --> 00:36:41,190 -Scott Tolinski: Yeah, definitely. All right, next, getting into the contract, because this is one that I think people sometimes overlook, right? They think they're doing work between friends or something like that. And I think it is important to have a contract, regardless of who you're working with. So you best have a contract before you do any sort of work, right? You give them the quote, you've given them timelines, everything's agreed upon before you start your work, you make sure that the contract is signed, and that both parties agreed to the terms within that contract. And, you know, people wonder about, like getting contracts and things like that. I think it's personally In my opinion, I would reach out to a lawyer just to have them draft you up something. I'm lucky that my neighbor is a lawyer, and I'm pretty tight with him. So I can just ask him for a little - -46 -00:36:41,399 --> 00:36:45,360 -Wes Bos: one now is most Alon when you're trying to record? No, not that neighbor. Okay. No, - -47 -00:36:45,780 --> 00:36:57,750 -Scott Tolinski: this guy was a few houses down. No, I he he's a he's a super cool guy. We go. We go climbing and whitewater rafting and skiing and stuff like that. This guy's a super duper cool. So if I ever need a little favor, I could say, Hey, you know, I - -48 -00:36:57,750 --> 00:36:58,320 -Unknown: got this, - -49 -00:36:58,439 --> 00:37:12,710 -Scott Tolinski: you know, contract I need what are what are your thoughts here, but I think it's important to at least talk to a lawyer or something like that, to, to have an idea of make sure that this is this contract is doing what you're expecting it to do, and it fulfills your requirements as a professional. - -50 -00:37:12,860 --> 00:39:12,270 -Wes Bos: Yeah, at the same point, for a lot of my early for a lot of my stuff, I just didn't really didn't have contracts, at the very least, what I would do is I would have the client sign the quote, and I would sign the quote, as well, so that it's kind of set in stone, what's to be expected and what's to be delivered. And that helped me out a lot. And I've even talked to a lot of like, lawyers kind of in the area. And they say, like, yeah, it's good to have like an ironclad contract. But if you're in the spot where you're really trying to enforce this contract, you're taking someone to court, in most cases, that's probably not worth the five grand, eight, grand, two grand, whatever it is that you're you're working on, for some of these these freelance projects, because it's going to cost way more time and way more money to actually hire somebody to get it figured out. So what he said is, yeah, having a contract is important. But what's much more important is having very clear communication with your client and, and having a really good relationship with them. So if something goes awry, you can kind of come out from under it and solve it and figure out a solution to that. So I've never had a Luckily, I know that many people listen to us and ever had any, like legal issues, yeah, with my client. But it's because he's spending, you probably your first line of defense is having a good relationship with your client, and making everything crisp and clear as to what's to be expected What's to be delivered. And you can usually find a way out of your situation, we'll have a section at the end of what to go do when it's going wrong. Last thing, if you do need a contract template, obviously going to a lawyer is ideal. And what you can generally do is you can go find a template for a contract on something like democracy, it's like a database of free contracts, you can kind of take that, tweak it to your your liking, and then have like a lawyer kind of run through that. It'll often be much cheaper to have them just proofread something, make a few edits, and then sign off on it, then for them to create something from from absolute scratch. - -51 -00:39:12,359 --> 00:41:06,840 -Scott Tolinski: Yeah, it's not the end all be all required. But at the end of the day, if something is going super, super wrong, it could be better but to protect you Yeah. And if things are going wrong on your website, and you want to make sure that you know about Oh, you're gonna want to go ahead and get Log Rocket now Log Rocket fresh. Thank you. Thank you. Thank you, thank you. Log Rocket, their little slogan on the front page, it says stop guessing when or why bugs happen. And I think this is just absolutely so dead on because Log Rocket gives you sort of unprecedented if I can use that word visibility into solving your bugs. Because what they give you is in addition to you know, the bugs that are happening, they actually give you a video replay. It's so cool. It's one of those things. You just got to sign up. For the trial and try out, they give you a video replay, where you can see physically what's happening on the site, you can have access to the entire network activity. So every request and response, which is huge, and all council errors, and it even works in with your existing tools like Redux and stuff like that this session replay is one of those things that you want to try, you want to check out. And you're going to get again, you're going to get this insane visibility into the bugs that are going on in your site. And longtime listeners of syntax are going to know that we often talk about Sentry for this. And if you are using Sentry already, Log Rocket integrates really well with Sentry. And you can use them both together, have them talking to each other. Again, it works with any of your tools, whether that's react, Angular JS, Redux, Ember view, j, s, anything. So check it out, sign up for Log Rocket and get 14 days for free. Head on over to Log rocket.com forward slash syntax, sign up again, 14 days free, check it out, throw it in your app, see this session, replay in action be blown away be excited. That's that was my experience with Log Rocket. - -52 -00:41:07,190 --> 00:42:45,000 -Wes Bos: Awesome. Next step we have in here is before you even get into starting the work, I think Scott added this thing is it setting expectations to your client, I think that's just as important as gathering requirements is letting your your client should know what to expect from you. And I've been in many situations where the client says, Well, I'm paying you, you should be available 24 seven, my beck and call I've had especially when when blackberry started to become popular. When I was doing web development, I had many clients who had just that on a whim, just send me an email only the subject line, we should add big text to websites. And then I would wake up in the morning and there'd be like 14 emails all subject line. And it's just a mess. And for those clients who need to come be like, Look, I can't deal with you just coming in and give me your ideas at any point in time. And there needs to be structured to this. So letting them know ahead of time of what the design the development, the revisions, will talk all about that what that process looks like letting them know that this might not be the only thing that you're you're working on and how to contact you, letting them know how quickly you should expect a response. So I would always tell my clients Look, I do email once a day. So if you email me a couple times a day, don't send me an email 45 minutes later saying Hey, did you get it or? Yeah, don't text me Twitter DM me, Instagram me and smoke signal me that you you sent me needs that that thing boils? My blood is when people send me an email and then tweet me to tell me they sent me an email. And but yeah, Oh, if only there was some sort of notification process like this built into email, it would be amazing, you know, - -53 -00:42:46,500 --> 00:42:49,710 -Scott Tolinski: there was no sarcasm there at all, sir, there was no sarcasm in that. - -54 -00:42:51,270 --> 00:43:25,530 -Wes Bos: So just setting expectations for your client is really important establishing a professional environment, because I think like when things get heated, things can go awry. So I once deployed a website and it was public, and there was something going wrong with it. And the client was getting really, really stressed out and just texting me and then I sent a snarky text back, like, please stop texting me, I'm trying to work on it. And that was a big mistake on my end, because like that wasn't very professional at all. But it's important to be professional when things aren't going good. So that when things go awry, or if things go awry, you can you can still be professional. - -55 -00:43:25,610 --> 00:44:17,070 -Scott Tolinski: Yeah, I mean, I think the whole thing is just establishing a feel and a course for how this whole thing is going to go. And if you establish this, like loosey goosey, you know, non professional sort of way of interacting, you're texting, um, you're, you're acting like this, you're sort of loose and all your stuff, then it's going to signal to the client that they can be that way with you, right. And it's going to signal if you're if you're emailing them at non standard times, or interacting with them, it's going to it's gonna everything that you do signals back to them that this is okay in this relationship. So if you want to be available 24 seven, and you want super casual everything, then by all means, go ahead and do it. But it's not going to make the experience as tight and controlled as possible, which is potentially going to come back and bite you in the butt if anything's ever going wrong. - -56 -00:44:17,280 --> 00:45:00,450 -Wes Bos: Yeah, I would always if I was doing email at night, like before I had kids before I was married, I would just like work all the time. But I wouldn't send emails off hours like at like 9pm. Or I wouldn't send emails on weekends. I would just write them and use something called Boomerang to schedule them to send Well, yeah, because first I think that gives off, it might give off like a bit of an air of unprofessional, where you're like, Oh, I have so much to do. I'm working at 11pm at night. And second, it also makes it known to the client that it's okay to email me at 11pm at night and it probably might be okay. But don't expect a reply from the weekend or emailing me at 11pm at night you have to sort of train your client to know what that sort of looks like. Yeah, - -57 -00:45:00,450 --> 00:46:19,080 -Scott Tolinski: a lot of the skin you mentioned it. I mean, that's a good book into this episode you mentioned, a lot of this is training the client, right? They are wild there are feral is that the good word? I don't know if feral means. But either way, maybe you don't want to treat them like they're a wild animal. But like you do want to train them to be, like, have proper expectations have a proper understanding, because chances are, maybe they haven't worked with someone in our profession before. And your experience is going to glue them off on what it's like to work with someone in our profession. A lot of times I've had clients, they're like, my last developer was bad. because of these reasons, they did not respond, they did not get things done on time, they just all disappeared. I mean, there's, there's a host of things you've probably heard from your clients, and we'll hear from your clients about what it's been like to work with other developers. And it's probably why those people aren't working on any particular projects with that person anymore, where you are now getting the work. So you want to establish work, you want to establish Good work, you want to establish professional environments, and you will get repeat clients, you will get referrals up the wazoo and you will be more booked and can raise your rates and all that good stuff. And you can make that money and live that Yeah, life, which you know, is what the point of doing all of this is in that regard. - -58 -00:46:19,560 --> 00:47:11,250 -Wes Bos: Yeah, absolutely. It's a good point, you said there with the client, if they're starting to bad mouth, their last developer dig into that figure out why it very well may be that the last developer was an idiot, but it very much at the same time, it might be that they are an absolute nightmare of a client to work with. And for clients like that, that need a little bit more hand holding, I would often just charge more, because you know, you're going to need to spend more time on the phone, you know that you're going to have to travel into their office a couple times to actually talk to them. Whereas sometimes I would work with agencies and they have project managers that are just on it. And they know how to they known how not to bug developers, they know how to put everything into one email. And in that case, it's just a joy to work with them. And it's so smooth that you don't have to you don't have to spend so much time sort of managing the thing, because that's their job. Word. Cool. Yeah, that's - -59 -00:47:11,250 --> 00:47:57,000 -Scott Tolinski: a good a good place to wrap it up. We're going to be picking this up in next week. In part two, when we talk about a whole bunch of stuff, we're going to be talking about the design process, the development process, feedback and revisions, we're going to be talking about deployment handoff, bug fixes and support and what to do when the project potentially goes bad. And maybe you need to fire a client because clients are not infallible and just like you can be fired, you can fire a client so there's gonna be a lot there. There is so much to talk about in this stuff. And if you have any additional freelance stuff that you want to hear about, let us know because we are planning more episodes on freelancing so Love, love, love to hear what you want to hear. Well, let's get into some sick pics West. Do you have a sick pic for us today? - -60 -00:47:57,060 --> 00:49:45,720 -Wes Bos: Yeah, so in the past I have sick pick this YouTube channel called Alex French guy cooking, where he takes a sort of like engineer mindset into cooking is very entertaining. And he's obviously very good at what he does and just goes like deep deep into it. I particularly enjoyed the ramen, one from Alex French guy cooking, and I found another one who has a very similar vein. And the episodes are very, very entertaining. And it gives me a lot of like hands on techniques on how to actually cook things. So the YouTube channel is called Food Busker and I've only found it within the last week or so. So I'm still making my way through it and I went through two of them so far, which was the nitrate free bacon hearing which is how do you cure bacon using salt and sugar and not some of the curing salt is carcinogenic Yeah, it's not good for you. So he went into that and went through all these like different steps on it and it was super good, super helpful. I think I'm going to try it myself like he does it in a way that it you don't need a lot of equipment and stuff like that. So it's good for home cooks. And then I also went through the tongue suku ramen, which is it takes like 90 hours you take like pig trotters which is like the foot from the pig and you boil it rotting in Yeah, not a fun that says this is the guy that says marry gold so great. Just pleasant. I think Trotter is the actual name part of the pig. I don't think that's a UK thing. But it's it's enjoyable to hear him with his British accent, say these these words. So check it out. It's called Food Busker. I don't really understand the whole Busker part and it seems like his kitchen is like part of like a like a restaurant open air. I'm not really sure of what it what it's like I haven't gone through it. I'm there's a years of videos here that I have to go through. Yep. Nice. Cool, - -61 -00:49:45,720 --> 00:50:04,080 -Scott Tolinski: man. That sounds I'm gonna have to look at that I need some more that stuff might. You know, it's like as time goes on, I actually find so much value in YouTube. I subscribe to a lot of channels. And, to me, always amazed at the kind of quality that comes out on YouTube. And really that's like one of the first places I go to learn anything nowadays So - -62 -00:50:04,470 --> 00:50:29,310 -Wes Bos: yeah, I just fixed my like all of our appliances at home have been been crapping out our dishwasher crapped out our dryer crapped out, and our stove hinges bent, and the stove igniter. busted. So we had four things to dos in last couple of weeks, and all of them or on YouTube, and I fixed them for all of them, each of them for under 100 bucks. And I was like, this would have costed me thousands if I had appliance repair people come in, but YouTube is the best - -63 -00:50:29,550 --> 00:50:30,780 -Unknown: it is, it's so good. - -64 -00:50:31,020 --> 00:50:48,720 -Scott Tolinski: But my sick pick today is going to be an extension for Chrome. And this is one then, you know, as developers, we open up a tab and the next thing you know, we got 500 tabs open up in our Chrome. memory consumption is absolutely destroying our computer. - -65 -00:50:48,960 --> 00:50:52,110 -Wes Bos: This is like my wife saying, Peter, Is that why you're saying this? I have - -66 -00:50:52,110 --> 00:52:02,550 -Scott Tolinski: not No, but I am keen of having way too many tabs open, I probably have. I mean, they're they're microscopic right now in my computer. So I need to start closing tabs. But we all know that these tabs are to sit open, and they actually consume memory and stuff like that, and then your whole computer is going to slow down. So my extension is going to be the great suspender which what it does is if you have not been on a tab for a given amount of time, you can tweak that. What it does is it suspends the tab and it basically closes the tab out in a way that it has a little custom screen. And again, you can tweak this all to you know when to suspend what to suspend. And it's going to save you so much memory consumption is one of those things that I install, like one of the I mean, it's you have your Chrome profiles, but it's one of the first extensions I install no matter what because oftentimes, these tabs open up and you don't even think about them by the end of the day. So this thing allows you to close out these tabs while keeping them open. And then the only thing you need to do is visit that tab again, and click on it, and then it reloads the page. So check it out the greatest spender, if you don't have this extension, it's one of my must have extensions for Chrome. - -67 -00:52:02,670 --> 00:52:24,750 -Wes Bos: So it let's go into some shameless plugs. This is part where we hopefully gave you enough value from the podcast and we get a little silly and start to push our own products on you. So I have all of my JavaScript and CSS courses available at Wes bos.com. forward slash courses, you can learn react, iOS, six node, all of that you can check them out on there, and Scott's going to plug - -68 -00:52:24,870 --> 00:53:13,290 -Scott Tolinski: Yeah, I have a new course on styled components. This is my first course on styled components called level one styled components in which we basically talk about building scalable systems and style components. We talk about extensions, we talk about plugins that work with styled components to give you additional sass like functionality. We talked about great ways to sort of organize all of your stuff and build an extendable system that can both be for small sites, large sites, medium sites and grow with your site as they grow so check it out at level up tutorials.com you can purchase this series at Ford slash store or you can sign up to become a level up Pro. If you sign up for the year you save 25% so level up tutorials comm that is level up not level level level love whatever I do when I love the level up tutorial, thank - -69 -00:53:13,290 --> 00:53:28,080 -Wes Bos: you. Alright, I think that's it for this week. If you enjoyed it if you have any other tips about your own freelance design process or your your entire process, make sure you tweet us at syntax FM and we will catch you next week for the other half of this one. Please - -70 -00:53:29,940 --> 00:53:39,690 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax113.srt b/transcripts/Syntax113.srt deleted file mode 100644 index 7a0958baf..000000000 --- a/transcripts/Syntax113.srt +++ /dev/null @@ -1,160 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott Tolinksi ski. - -2 -00:00:25,920 --> 00:00:57,840 -Scott Tolinski: Oh, welcome to syntax in this Monday tasty treat, we're gonna be talking all about code, quality tooling, how to get your code, being extra nice via tooling, these are the kind of things that are really going to do all of the heavy lifting for you, or make you aware of some bugs, it's going to totally eliminate any of those memes that it's like, you know, find in seek champion the semi colon because these two things are going to fix all of you. So my name is Scott solinsky. And with me, as always, is West boss, - -3 -00:00:57,960 --> 00:00:59,880 -Wes Bos: ready for some high quality code - -4 -00:00:59,880 --> 00:02:47,370 -Scott Tolinski: today, high quality code that's coming at you in this tasty treat. This tasty treat is actually sponsored by a company that is going to really help you have high quality code, which is century now century is one of these tools that basically what it does is it? Well, you you put it into your codebase. And it keeps track of your errors and exceptions and lets you know how they happened. It tells you a lot of information such as the operating system and maybe what versions of things they're using and what browser and allows you to really gain some key insight into what's going on in your application. One of the coolest things about Sentry is that it provides some really awesome ways to be notified when something is going wrong. Now you Everyone has their own workflows, right. So I personally, I work best in different ways. And if Sentry can ping a Slack channel and say, hey, there's this thing going on, then my whole team can see it in one little fell swoop and we can even chat about it directly in slack. In addition to notifying any of your chat applications or anything like that, you can also get notifications via email, SMS, and you can just really integrate with any of the platforms that you're used to using so that you can be notified in a way that works for you and your team. Now, if you want to try Sentry, which I highly recommend you do, especially if you want some high quality code, you want to head on over to sentry.io and sign up using the coupon code tasty treat all one word, all lowercase, and you get two months for free. Trust me, you're gonna want to try it out because it's one of those things that the proof is in the pudding as they do say, I'm going to train myself. So okay, we have Sentry to help us get some quality code, what are some ways that we can dive in and set up some tooling in our application to get some quality code as well? - -5 -00:02:47,490 --> 00:04:27,000 -Wes Bos: Yeah, so we're gonna run through some tools as you as a web developer can use to get high quality code, the first one's going to be a linter. second one will be a something called prettier. Third thing is going to be just VS code in general, or your editor, you could say, and then we've got some some minor things here on TypeScript and testing in something like jest. So probably the two biggest ones of code quality is using es lint and prettier, let's kick it off with es lint or, or linters. In general. The idea behind a linter is that you whenever you hit save, or whenever you commit your code, you run your code through a linter. And the linter is going to mostly analyze your code for potential errors that might happen now, yes, lint, which is the most popular linter before before that, we had j s hint, which was a pretty popular, there was jass lint initially, which I think was made by Doug Crockford. And then we had j s hint. And now we have es lint, which which sort of came around when we started developing an ESX. And we got those. So a linter will take a look at your code and tell you where potential problems happen in your code. Now, there are some stylistic things in es lint that it can do. It can tell you if you forgot a semi colon. It can do like minor things like that. But the way that it's sort of going right now is that you should only use a linter for actual problems that will develop inside of your code, things like scoping issues, things like double variable declarations, things like what are some of the other accessibility issues are a huge one. I use my own one. What are some of the other things that yes, lint will do for you? - -6 -00:04:27,630 --> 00:05:22,290 -Scott Tolinski: Yeah, I mean, it will connect to a lot of the platforms that you use. So if you have plugins, you can say, Well, this is a react specific lint, config. And so more than just general JavaScript or whatever you're working, when it's going to potentially make you aware of best practices within those libraries. And obviously, these best practices can be tweaked to your liking. I think most people that I know have their own set of ies lint rules, turning some things off here and there when maybe some things are a little not necessary in their codebase But really, it allows you to connect to whatever type of application you're writing, in addition to plugins via like react or whatever. There's also a handful of presets, I use an augmented version of the Airbnb presets myself, which is just sort of their team's defaults for es lint. And again, it's tweaked, because there's definitely some rules that I turn off a little bit. - -7 -00:05:22,590 --> 00:05:40,500 -Wes Bos: Yeah, I think the important thing to notice here is that, yes, lint is is mostly preferences. There are things like that that will actually just break your code, and it will let you know that but a lot of it is like things like should you have a dangling comma on your object? So that's a question for you Do you do the comma dangle Scott, - -8 -00:05:40,860 --> 00:05:43,920 -Scott Tolinski: I do do a comma dangle. And Daniel as well, so - -9 -00:05:43,920 --> 00:07:04,050 -Wes Bos: it loves the dangling commas. What that is, is when you have an object and you have your properties and values, you always put a comma dangle at the end of the line. And that's because when you go to add another property in the future, what you used to have to do is you have to add a comma two line before it and add your new line. And that screwed up your your get blames in the future. I think it was IE nine was the last browser that couldn't do comma dangle. And now with transpilers. It's not anything you ever have to worry about things like putting function names. So if you have anonymous callback function, you just write the word function or you have an arrow function, should you name those or not for better stack traces. So the way that I use mine is that I use Airbnb by default. And then over probably over the last two or three years, I've just been tweaking my own and turning things off. Because Airbnb is incredibly strict with what they do. And it's a little bit torturous when you just want to get things done. And it's sort of always falling in your way. So I recommend just taking something that's already out there, the default one that comes with the ES lint, or the Airbnb, one, if you're writing some react code, and then just turning things off, I'm constantly turning things off, because I say, I get that. But I'm never actually running into issues with that. And I feel like if I were to write a run around with my code, just to make you happy, it's it's unnecessary. - -10 -00:07:04,290 --> 00:07:39,020 -Scott Tolinski: Yeah, absolutely. Anytime there's an accessibility things, I make sure to not turn those off. Because sometimes those can pop up. And you'll be like, Oh, I don't have time for this right now. But you do have time for that right now. And you need to be made aware of that kind of stuff. So I definitely I turn off when the ones I turn off are pretty inconsequential, like no use of radix radix. Yeah, yeah, I turn that one off, a turn off, no counsel, because I use console logs, I use that. I mean, it's always annoying when you put in a console log, and then it's red underline. And there's only these that are like, truly, truly necessary that I turn off. So - -11 -00:07:39,090 --> 00:08:52,830 -Wes Bos: you could have like a separate linter rule for when you commit code. And when you develop code. And then before you commit it, it'll it'll say, hey, you forgot to console log in there. But it's just annoying that your your ESM break breaks every time you want to console log, something that seems a little bit unnecessary. But other things like unreachable code. So if you have a return statement, and then you have code underneath that many times, I've accidentally done a return tip inside of like a year, but you goof up an if statement, and you have a return inside of that. And then it tells you there's unreachable code underneath there. either delete it, or you have some sort of error in your your earlier return because this code will never in any circumstance ever run. So I feel like as Lynn has made me as like, as like salty as you get with it. Sometimes I remember the first time I ever turned it on. I was like who lives this way? Because it's almost everything I do is wrong. But after maybe a couple weeks, especially reading into the rules, like I always go down a rabbit hole of why is this underlined? Oh, that's interesting. Let me go read into like the GitHub issue and see why do people actually believe this? or Why do people believe that this is not a good way to write code. And I think it just just makes you a better developer all around, - -12 -00:08:53,030 --> 00:09:28,550 -Scott Tolinski: right. And you can make those judgments yourself whether or not that is something that is truly necessary. But one of the things I really love is like the no unused variables, because sometimes you're writing code. And then in a refactor, it makes it really easy to see what you're using, what you're not using, maybe what you intended on using and you're not using, and maybe you can, you can flip that around. I also use it to enforce prop types and react because I'm not using TypeScript in my project. So having strict prop types and default props on every component is pretty important to me, at least to prevent unexpected breakings of things. So do you want to get to the formatting. - -13 -00:09:28,740 --> 00:09:30,480 -Wes Bos: One more thing to add to it? - -14 -00:09:30,480 --> 00:09:31,770 -Unknown: Alright, let's do it. - -15 -00:09:31,949 --> 00:10:41,300 -Wes Bos: One last thing I want to say is that all of his ESLint rules, you can turn them off, which is zero, you can turn them to warning, and you can turn them to error. So you can some of these that is like console log, you could just turn into a warning, and it'll just be yellow. And you say yeah, I know that that shouldn't be left in there, but I'm using it right now. Another kind of neat thing is like the no unused variables. One thing that I do in Express is that every single Express function that I write, you get the request the response The error in your next function, and that's the signature that I write for all of my expressing whether or not I use the next or the error or anything in there is, I always want to have it and what was happening with me is it would be like you didn't use your Error Error variable. So I would delete it from the signature of the function. And then I would like need that variable. And then I had to go back and add it. So you can write these these like little regex is called arcs ignore pattern. And what that will do is to say, like, tell me not to have unused variables in that my function passes me but ignore request response next and error, because those are always the ones that I like to be using. Word. - -16 -00:10:41,540 --> 00:11:59,220 -Scott Tolinski: Interesting. Yeah, I bet I don't, I don't turn that one off a whole lot. Because I don't do that, like you do. But it's interesting. I know, that's definitely like a thing that a lot of people do have those things in there. Cool. So uh, in addition to all of that awesome stuff, we also have prettier which can work in coordination with es lint, I actually use the prettier extending, I extend my es lint config via prettier, and I have prettier forward slash prettier as an error in my es lint rules, in addition to having prettier installed for my project. Now, I actually don't think I tweak prettier at all. I'm not sure I do. But prettier. Before we get into it is really just a format or so in a lot of other languages. Like maybe like Python, your code has to be formatted a certain way, right for it to work in JavaScript. Yeah, you can write your code in all sorts of different ways. And it's not always great for teams, or maybe people working on a file, and then all of a sudden, you open it up, and it's some foreign sort of formatting. So a prettier does is it sort of standardizes the formatting. And one of the really great things that I love about prettier is configuring it to reformat on save. So I typically don't even concern myself with formatting too much when I'm typing. I don't do proper indentations. And I don't worry about the correct - -17 -00:11:59,250 --> 00:12:00,660 -Unknown: type of No, I'm a slob. Now - -18 -00:12:00,660 --> 00:13:03,690 -Scott Tolinski: it's the past total slob. In fact, I'm such a slob though. And I'm not using prettier, and I save it and doesn't update it for me, I get really frustrated because I have to go and fix things. But even like things like adjusting the tabbing of a component how far out it is right? You make one change. And then you got to select, you got to read tab and everything like that. Now with prettier, you can just hit save and watch it all magically fall into line. So I love prettier. And I pretty much don't touch a project unless I'm using prettier nowadays, because not only does it like make my code more standardized, easier to read. But I know that across teams, I'm going to be happier with the code that my team's writing, I'm going to be happier reading it, it makes more sense to have that in my workflow and just have something totally standardized rather than write it the way you want. And it's way easier to enforce when it's an automatic thing than when it's like up to the users discretion, Hey, could you follow all of these code formatting rules and memorize them and then don't ever mess them up? Right? Where you're just is a robot, let the robot do it for you. - -19 -00:13:03,720 --> 00:13:34,500 -Wes Bos: It's crazy how much we used to fuss over a coding style. And there would be these huge coding documents. And we use this many tab pieces, tabs or spaces or single quotes or double quotes. And now we take that all out of it. And it's pretty amazing for beginners, because it takes all the like part of my hugest feedback when I was beginning teaching HTML and CSS is this is messy, you should clean it up a little. And now it's just like, doesn't matter at all. Because as soon as you hit save, it will indent it for you and look a lot nicer. - -20 -00:13:34,620 --> 00:14:01,290 -Scott Tolinski: Now, it also gives you visibility into like well formatted code. Like when you're used to reading well formatted code, you're going to be way more strict about requiring well formatted code. Because if you get used to looking at reading and writing sloppy code, then other people are going to be super annoyed with you. And you're just not going to set yourself up for success where with this, it's automatic, and you get used to looking at it as like this is what it should look like. - -21 -00:14:01,439 --> 00:14:51,960 -Wes Bos: Well, there's three things that I change on prettier, myself prettier doesn't have a whole lot of options, because it's it's opinionated by default. But with all things, people say can we just have a setting to do X, Y, and Z. So the three that I use is first I turn trailing comma to what's called s five. And just like we talked about the trailing comma, if you don't add a trailing comma to your objects, and you save it, this S five will automatically add one, you also have the option to set it to all which will also add a trailing comment, comma in your function arguments. So if your function has two arguments, you have two commas and one after the last argument, which seems a bit odd, huh. But that as an ESX. That's allowed. I don't use it myself though. The other thing is I use single quotes instead of double quotes, although I've been thrown around the idea of just going all in on backticks Yeah, I - -22 -00:14:52,020 --> 00:14:54,960 -Scott Tolinski: think that I might go. I like how it gets the set set up for you. - -23 -00:14:55,080 --> 00:15:32,220 -Wes Bos: Yeah, yeah, that's that's where I got I was looking at a lot of the cats for example. So I was like, it does mean make a lot of sense to just use backticks for strings, because then you don't have to worry about single or double quotes or escaping things or switching it to back ticks when you want to interpolate something. So I think I will probably do that at some point this year. And then the other one is I changed my print width to 100 characters, because 80 characters wide, and then it wraps. I'm on a huge screen, I don't work with other teams with people on different things. So I find that I can easily have two panes of code open at once. And 100 characters is still enough for me to see everything nice. - -24 -00:15:32,250 --> 00:15:51,930 -Scott Tolinski: So I mean, we've never discussed our prettier RC files before. And let me go down the line if my prettier RC single quote is equal to true, oh, you turned it on good. Trailing comma is equal to s five. I don't have the width, though. So we're dead on in both of those. So it's funny, hilarious name, - -25 -00:15:51,930 --> 00:18:11,520 -Wes Bos: but we've never talked about it together. And our settings are almost exactly the same hilarious. That is really funny. Man, that's, that's good. The way that I set up my prettier is through es lint. I think Scott does that as well, because es lint has this dash dash fix option, which it will actually fix a couple things like like cause like, if you forget a semi colon, ts lint, we'll add that in. So it has the ability to run fix against your code. And then you can extend it by just putting prettier in that. So I have it all in one. I don't use prettier via esque VS code. And the reason behind that is because I don't want my editor to be tied to how the formatting should go. Because if I wanted to hook into a get hook, like before you before you push, there's some people that only use prettier in ESLint before they commit. So there, they feel like they can figure it all out themselves, which I don't understand, like just have it on save every single time because then then you don't have to worry about doing indentation and whatnot. It just does it for you. But if you want to do on a good hook, if you wanted to use another editor for whatever reason, if you wanted to throw this up on a server that you're using vim on, all of that stuff will work. No problem with this. It's not tied to your specific VS code, or sublime or whatever. So I like this way, it's not as one nice clean package. I also use a HTML plugin for es lint, which will anytime you have an HTML page with a script tag, it will also format the contents of that script tag, which I find very helpful for anytime I'm doing a quick little demo specifically in my specifically in my CSS Grid course. Because prettier we should say this it was prettier will do not just JavaScript prettier will do CSS prettier will do graph QL. There's a prettier PHP plugin, which is currently being worked on. I tried it, I threw like a gnarly six year old functions, PHP WordPress file at it. And it didn't break it, which was amazing. Because I had tried out a whole bunch of PHP linters. And they all broke my code. I threw it through prettier PHP, and nothing broke. It was a little funky at spots, which is why it's still being in development. Like I'm so excited to see that prettier is being extended to all of these different languages. Because I think pretty soon we'll be able to just save your save your files in whatever language and not have to worry about formatting or whatnot. - -26 -00:18:11,570 --> 00:20:10,530 -Scott Tolinski: Yeah, I think that's the key point is probably didn't break your code, because prettier is really just formatting right? It's like not correcting errors necessarily. It's just fixing formatting. And I really love how sometimes you miss like an indent or maybe you miss like a closing element or something and prettier Aeneas lint in combination are going to let you know pretty quickly exactly where that stuff is. So it makes it just so genuinely easy to solve and find bugs when you just look at your code that I can't imagine writing without es lint and prettier in combination. Next part up, we want to talk a little bit about how to use this, you mentioned that you just use it again in a project basis rather than in your editor. But the editor has a big pour a big role to play in this as well. Because we both use VS code. And one of the things that I've always really loved about VS code it was maybe the thing that sold me on VS code was just how easy linting and prettier was to get set up. You really just don't have to do anything. The editor really is set up from the beginning to use linting and systems like that so that you feel confident when you start going. I remember just how much of a pain it was occasionally to get Sublime Text, working with a linter there'd be some error going on the back in the background, you had to check some logs, you had to install a bunch of stuff. And if it didn't work, you didn't necessarily know why it didn't work. Now, in VS code, you get a little exclamation point. If something's not configured correctly, it lets you know exactly what's going on. But for the most part, I've had nothing but awesome experiences using VS code with these things besides getting a little red underline under each item right? It feels like a spelling error and a Microsoft Word document. You can see it a mile away. You get the little squirrely red underline look Do you know there is an error? When you hover over it? lets you know what the problem is. But you you actually I know you use a different way to jump from error tear frequently, right? - -27 -00:20:10,550 --> 00:21:04,070 -Wes Bos: I actually don't use the I've used it in the past, like the VS code, jump from air to error and fix them. But generally, just as I'm coding, I'll see the either the yellow, which is a warning, or the the red, which is the error, underline. And I'll just go ahead and fix it. I'll hover over top of it, and see which rule I'm breaking. And then I'll go do a little bit of research. If I'm not sure why I'm breaking that rule even have having this setup for probably three years, I still regularly run into new things that have never, I've never accidentally written myself. Yeah, so it's like, I still use all the VS code stuff. But I don't use any of the tools that allow me to cycle through all of it, I have it set up to save on fix, there's a VS code setting that you can do to run the fix on Save. And that way it will every time you save it, it will just re indent your code and check for any errors. And then the other question I get all time is do you have a local config or a global config on your computer? - -28 -00:21:04,310 --> 00:21:52,590 -Scott Tolinski: I have a local config. I don't have any global config setup. But it probably would make sense to do that. Although I do like to keep things with the project, just so anybody who's using it can also include that stuff. The vs. Code folder, I believe it is Yeah, yeah. So I, I do primarily use a local one for a lot of things. But that's really just the stuff that is I want my other people in my code base to also be saving on on or formatting and save and stuff like that. I don't save my personal like font sizes, those kind of things, maybe just project specific things. But I do I do have a glow. I did say I didn't have a global I have a global, I was just thinking it was like not a global I don't know, I never created anything. It's just the default, - -29 -00:21:52,770 --> 00:23:17,250 -Wes Bos: VSP and the default setup, whatever, yeah, I have a global ESLint file that has all of my settings in it. And that's great, because anytime I want to whip up a quick project or do a little demo, it immediately just starts working. And then I don't set it up. And then anytime I have a project that is more long term, I will set a local Yes, lint in there. Um, what I'm considering doing is just making my own, like, you can publish your own es lint to NPM. And then you can just set your es lint to extend like the West boss coding style. So much sense. Yeah, I've been considering doing that just for my tutorials as well as just for my own sake. And that way anytime I like make a change my mind as to linewidth or something like that I can just publish a new version of my my settings, because that's all Airbnb is yes, Lin extends Airbnb. And then they have a huge slew of rules. So I could just make my own list of rules that extend Airbnb, and then publish that up to NPM. Nice. The only reason I haven't done that is like I don't really want to be, I have my dot files online. But like I don't like these aren't the dot files for everybody. Some people just copy paste my own my dot files, and then they send me these big long emails, they're offended at a certain choice that I've made. And I'm just like, this is my own personal, like, please don't take these as gospel. This is just what works for me. Like it's not like Airbnb, where they have these very opinionated, it's just what works for me. Yeah. Hey, - -30 -00:23:17,670 --> 00:23:35,130 -Scott Tolinski: so does your version of VS code do this. This is one of the things I think popped up recently. In VS code. I'm not sure if this is an extension, I'm pretty sure it's not. If you go to your es lint RC file, do you get little descriptions next to each one of your rules? Oh, let me see. And maybe it's an extension I added going to confirm this. - -31 -00:23:35,280 --> 00:24:05,700 -Wes Bos: Nope, my minor showed up as well, that so that is um, this has been in VS code for a while it works with package JSON and stuff like that, where they have these like little definitions for config files. So package JSON, Babel, RC, es lint RC and they know of all it's like it's kind of like typed types for config files. And they know what all the potential things are like if you open up a package, JSON it and hover over some of the predefined, like author and license, they'll show you that as well. - -32 -00:24:05,970 --> 00:24:47,250 -Scott Tolinski: Nice. Yeah, I love this. Because I mean, you get a glance at what the rule actually is doing. And you can jump to the documentation immediately from there. And that's something that you often do if you're trying to figure out if you need this rule or not. Cool. So this episode is getting a little tasty. So what we're going to be doing is we're going to be covering some more tools in the next hasty treat, and which is going to improve the quality of your code. We're gonna be talking about types in JavaScript via TypeScript flow or reasons, something like that. And then we're also going to be talking about testing. And maybe we're gonna be talking a little bit about exception and error tracking tools as well. - -33 -00:24:47,340 --> 00:24:50,790 -Wes Bos: Yes, we've got some friends in that space we could talk about. - -34 -00:24:51,000 --> 00:24:52,860 -Unknown: Yeah, Yes, we do. - -35 -00:24:53,490 --> 00:25:35,790 -Wes Bos: Awesome. So hopefully you enjoyed a few things here. There. If you want to find my dot files. It's github.com for slash West boss Ford slash d o t f i l e s. Well, that has all the VS code extensions that I use all of my hyper term settings, all of my es lint rules. They're all listed in there. I should make one of those people asked me to make one all the time. I should bite the bullet and do it. Yeah, people ask me all the time, too. And I finally publish them up. And I don't have any like synching setup. I said, I just like, every time I change my Islam, I'll just copy paste it up to GitHub. Yeah. And I find that works. Well, some people have like a sinking setup. So if they have multiple machines, they can sync them between machines, but I don't have multiple machines, so don't need to worry about that. - -36 -00:25:36,000 --> 00:25:40,620 -Scott Tolinski: Yeah, well with how much I've been changing machines lately, maybe should be an option for me. - -37 -00:25:41,700 --> 00:25:43,890 -Wes Bos: Absolutely. Cool. Anything else for today? - -38 -00:25:44,340 --> 00:25:45,000 -Scott Tolinski: I got nothing. - -39 -00:25:45,569 --> 00:25:49,200 -Wes Bos: All right. Thanks for tuning in. We will catch up on Wednesday. - -40 -00:25:52,800 --> 00:26:02,580 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax114.srt b/transcripts/Syntax114.srt deleted file mode 100644 index c8d4f0f45..000000000 --- a/transcripts/Syntax114.srt +++ /dev/null @@ -1,372 +0,0 @@ -1 -00:00:01,319 --> 00:00:09,900 -Announcer: You're listening to syntax podcast with a tastiest web development treats out there. strap yourself in and get ready. Here is Scott and Wes Bos Welcome - -2 -00:00:09,900 --> 00:00:38,250 -Scott Tolinski: to syntax in this tasty treat. We're going to be talking all about part two of the freelance client lifecycle, we're we're going to be going through the design part of your working with freelance clients, the development part, feedback and revisions, deployment handoff, bug fixes and support and what happened, what to do when things go wrong. You are listening to syntax. My name is Scott Tolinksi. And with me, as always, is Wes Bos, how you doing was, - -3 -00:00:38,250 --> 00:00:52,890 -Wes Bos: I'm doing fantastic. I'm really liking this whole topic of freelance client lifecycle, I think it's, it's fun to look back at all of the stuff I've learned of doing freelancing. And I think it's going to be helpful for anyone who wants to start a business or just earn a little bit extra side money. - -4 -00:00:52,919 --> 00:02:01,290 -Scott Tolinski: Yeah, and there's so much info here. I mean, we had to break it out into two was to do it justice. And you could probably break it out into like four or five episodes of even more stuff. So if you are loving this freelance stuff, let us know. And we will continue to expand upon it. This episode is sponsored by Sanity, which is an amazing back end solution to your front end sites. It's a sort of a bring your own front end platform that really makes entering your content and content management in general a joy. There's some really crazy new features that we're going to be talking about in these when we talk about Sanity more. And it's also sponsored by longtime sponsors, which is Freshbooks. And Freshbooks is cloud accounting software, which is going to be extremely important. If you are wanting to keep good communication with your clients and be working as a freelancer in general, this platform is made for you. So let's get into it and start talking about the design phase of the freelancing project. And this could be whether or not you are the designer yourself or you are working with another designer either way, there's most likely going to be a design phase, you are working with the client on what this thing will look like that you can then build it. - -5 -00:02:01,469 --> 00:04:42,630 -Wes Bos: Alright, so let's talk about the design, the first thing you want to do with the design of your client is first collect all assets from your client. So part of the requirements is if you do in the design, you will be gathering information about what you want to look like any any inspiration that they have things like that. But at this point, you need to make sure that you collect all assets from your client. So that might be their logo. If the client has a brand guideline in place, that's important. If they don't, even sometimes even with the logo. I've had clients thinking that like a website comes with a logo, right? Yeah. So that's important to specify that very early in the requirements process, and then a list of likes and dislikes, because there's kind of two parts to the design, the major point of the design is to get across whatever it is, that is the purpose of the business or the purpose of the website. So I think that's probably the most important part. But there's also this other part where you have to give off a feel for the company and convey the type of company that it is as well as make the person who is getting the website happy with how the website looks and, and the overall vibe that the website gets gives off. So getting all of that information up front is really, really important. And then once you have that, it's time to create the initial look and feel. So generally what I would do for this is take their logo take any like brand colors that they might have take any brand guidelines, often I would get this huge PDF of brand guidelines from from the client. And they would say, these are our colors. These aren't primary colors, these are secondary colors, here is our logo, here's things you cannot do with the logo. So things like putting the logo in a box, things like putting borders too close to the logo, things like tilting the logo, things like overlapping the logo, there's often list of do's and do nots that come with a logo, which is which is extremely helpful, because you know what you can do to maintain their brand guidelines from their website all the way through to any other thing that their logo goes on. And then I would just kind of go through and mock up an idea that it happened, I never really did a whole bunch of different ideas. So at least for me, this was not something where I would like come up with six or seven different layout ideas, I would just come up with one, maybe I usually just design the homepage. So that's the header, maybe whatever's on the homepage, what text looks like, make sure you're hitting all of your things like typography, colors, all of your like think like your global styles, getting all of that out on the page. So you can get an overall look and feel of the website. And then I would I would present that to a client. We'll talk about presenting in just a second. But how do you tackle something like this if the clients asking you to design something? - -6 -00:04:42,689 --> 00:05:49,350 -Scott Tolinski: Yeah, I like to do just sort of general boards like this is sort of the feel of things, right? We're going to go for this we're going to go for this we're going to go for this and make it very explicit that this is not the layout. This is not the website. This is like this is the overall big picture sort of look we're gonna go with and again, I know why you To work for an agency that would do three fully fleshed up, like fleshed out designs, like just total complete designs at this point, and then present them to the clients, they pick one. And then the client always pick the worst one. Like it was without fail. If we were to look at those, we'd be like, we're like this one the least, they're always going to pick that one. So I don't like to do that. Personally, I don't like to give the client that much control, because they're not the designer, obviously, they want to have something that represents them. But you know, you want to be able to have the ability to create something they you know, you're proud of his good work rather than just, you know, a hodgepodge of things that they like. So, I mean, I think I personally like the idea of creating boards. And you could call them sort of like mood boards, a design boards of just sort of general feel ideas, sort of textures, maybe things like that you're working with, yeah, and then go from there. - -7 -00:05:49,380 --> 00:07:27,270 -Wes Bos: I really like that is why I never did that. But I think that would probably work better. Because you don't get hung up on I don't like that this is in this place. And you just focus on colors and look and feel. And I should also say that like I'm, I wouldn't call myself a designer, I design a whole bunch of websites. But I know that people who are full time designers have a much more elaborate process than this and, and go much more in depth into it. But the one thing I will say is that it's important to back up the whys of what you did. Because if you just design something and give it to the client, they might just take it as like a pretty picture. And they might show somebody in their family who has good taste, and get their feedback on it. And looking good is really just a small slice of actually a good design. So I think that because they're hiring you as an expert, you need to back it up and say, This is what I did behind it. This button is teal, because it's your call to action. And we're trying to get the most leads, we're trying to sell the most widgets at the end of the day. Or if they come back with some some suggestions for it, like, Oh, I would like to use this color and whatever you need to say, okay, we can try that. Or that's not a good idea. Because of accessibility, that's not a good idea. Because it's hard to read, you might be leaving people out, you'd be might be selling less things because of this. Because at the end of the day, we say this a couple times that you are the expert here, they're hiring you. And you need to tell them, this is the design. And this is why I've done it because I think that we're going to be able to sell more things, or I think that it's going to be clearer to people if we approach the navigation in such a way. - -8 -00:07:27,510 --> 00:09:36,720 -Scott Tolinski: Yeah, yeah, absolutely. And then getting into some of the like, I don't want to just think about all the times I've shown a client work that's like too early, and say, Okay, this is what I'm sort of thinking. And in my mind, I can see that this thing is unfinished, or this is not totally complete, or these ideas are like general ideas. And the client will be like, well, this button is no good. This is wrong, this is off by half a millimeter over here. And you're just thinking like, Ah, this is not like this is not finished. And here, you're evaluating it, I think about even just like, for some reason, when you have a design and you're showing off a design to somebody and it's not quite perfect, they're always going to look at the one thing you don't want them to look at. I always just think back to this. This is like a sort of a decent example. But like, I think back to this A B testing, we did it forward. And we showed them this design, and it didn't have all of the cars in it, it only had like three or four Ford cars in it rather than their whole lineup. And it was like for a showroom component. And we asked a bunch of people to tell us like what they thought about this design, you know, what are your thoughts is just general not not working with the client, but just general AB sort of like, you know, pre designed sort of how does this feel to you? And you would not believe how many people got hung up on the dumbest things. This guy was just like, yeah, it's okay, there's no Mustang. And I only liked the Mustang. So therefore, I hate everything about this. I hate the layout. I hate that there's no Mustang, man, it would be really better if you had a Mustang in this, and we're just like, doesn't have anything to do with the design or the Yeah, like that has nothing to do with it. And I just remember being like, so upset by that, that like, you know, all of the hard work that went into producing this thing was just out the window because of one little thing that the person got hung up on and your clients will get hung up on if they see things that are imperfect. So I think I would be cautious about showing things too early in the creative process. Things that they can't, you know, wrap their head around as being maybe theoretical or sort of like a group thing. So be careful about when you show what because unfinished work will not necessarily represent what you want it to represent or what you thinking it's going to represent. - -9 -00:09:36,799 --> 00:10:02,539 -Wes Bos: Yeah, I even have that now anytime I tweet, like a half finished design because I love to to show my work and I love to show what I'm working on. Anytime I show anything related to design, you get people jumping on every little thing like it's got most of finished polished design, which is so frustrating because it makes me not want to share things because I know I'm gonna have to spend the next hour being like yeah, I know I'm not done it yet. I'm just saying To show what I'm like my work in progress, right, right. - -10 -00:10:02,539 --> 00:10:21,210 -Scott Tolinski: And I actually showed like a new design fairly recently. And it was like, really, the design itself was like, basically there. But then everyone was hung up on the spelling of one word, or like you wrote the word Gatsby on two different cards. But there's clearly a react logo on the one card and a Gatsby, on the other column. Like it's just mock data. This is just fake data. - -11 -00:10:22,710 --> 00:11:31,260 -Wes Bos: Oh, it's so frustrating that kind of, that's why it's important to, like Scott says, Don't show it too early. Another little trick I had back in the day, before we had any of these things like envision, or these apps that would like show the design is I would just export the entire thing as a PNG. And then I would embed it and center it on a website. And and then I would send people to a link and and then it would feel like it's in the browser. And not like opening it up on like Windows File preview, or the thing is, like, way smaller than it will actually be and whatnot. And even then I would get people being like, but the sides are cut off. I'm like, well, it's not zoom. So I would have ended up making the PNG like 4000 pixels wide, just so people wouldn't complain about the sides being cut off. And just little things like that you can think ahead to people getting distracted. Where or and even just game like, Look, this is not done. Don't worry about the little fussy details. We're gonna get into that. But what I'm really like, when you see this, what is your emotion? How do you feel about this? What are your initial thoughts? And I'm not looking for you to come back with a laundry list of little bug fixes that that were there? We're not nearly there. Yeah, well, I - -12 -00:11:31,260 --> 00:11:33,840 -Scott Tolinski: feel like I would really like it more if it had the Mustang though. - -13 -00:11:35,970 --> 00:11:38,279 -Wes Bos: about it? Oh, that's great. - -14 -00:11:38,309 --> 00:12:42,480 -Scott Tolinski: I think it's important to I mean, you when you're working with clients is that you know, you are the expert. And they typically don't know very much about our craft in general. So be prepared for non standard feedback, a lot of people who are designers, or went to art school, and they had a whole entire classes about proper critique, and how to talk about art and how to talk about design. And your clients don't have any of that. And they may think that they're savvy, and they may think that they know it all. Or they may think that they're good at it. But at the end of the day, they don't have that. So be prepared for some really odd feedback. I've been told this feels cloudy, can we make it more sunny? I'm sure many people have heard about, can we make it pop more. And it's going to be your job to really get to the heart of what they're actually talking about. And to be honest, this kind of stuff is frustrating for me. And it's actually very difficult for me to really get through to that. But it is important. Do you have any like little tips or tricks for when a client says make it pop? Or make it make it more sunny? Like how do you how do you get through that Bs and actually figure out what they're talking about? - -15 -00:12:42,570 --> 00:13:21,090 -Wes Bos: Yeah, my first emotion to that is just to rage. But my second is that they're trying to tell me something and they can't quite get it across. It's like my two year old. She can speak but not well enough. And when she gets frustrated she screams and what you have my first reaction is rage. Stop screaming. And my second reaction is she's trying to tell me something, but she can't quite get it across. So you have to do the same thing with your client as your two year old. Did you poop your pants? This year? You hungry? Like what's going on? And you really have to do - -16 -00:13:22,380 --> 00:13:24,360 -Unknown: amazing that that word? Is it that - -17 -00:13:25,710 --> 00:13:26,760 -algae escape? - -18 -00:13:28,169 --> 00:13:32,220 -They're like if you want more money, please Did you poop your pants? - -19 -00:13:32,370 --> 00:14:24,630 -Wes Bos: Did you want to watch Papa troll. But obviously, the thing we need to get across here is that something is bugging them. And they can't quite verbalize what is going on with them. So they're trying to figure out, I don't like it, something is wrong with it. Here are my ideas on how to fix it. You need to dig and find out why that's wrong. And then come back and say what I hear you saying is that it's too too dark, or you get a weird emotion from that. And here's how I think we can we can fix that. Right? Like it's not my job when a contractor comes into my house. And they build something and I don't have to come in and start with like maybe if you cut a couple of two by fours and bang them up here and then lift the house here. No, I just say like I feel like this space is a bit too cramped. You solve it. Yeah, it's your you're the expert here right is that - -20 -00:14:24,630 --> 00:14:36,799 -Scott Tolinski: that's so dead on. Can you just love a we have a we just throw a little little just put a brick here. And that's just got worse. they'll fix it. I can imagine the clock because the contractor just be like I quit. Let's see you later. - -21 -00:14:36,840 --> 00:14:48,929 -Wes Bos: Yeah, yeah, exactly. Like we have no idea. So it's funny how those, the actual contractor people coming to your work to do physical work is the same thing as doing this digital work that we have here. - -22 -00:14:48,960 --> 00:14:50,909 -Scott Tolinski: Yeah, it's important to think about it like that. Yeah. - -23 -00:14:51,049 --> 00:15:14,460 -Wes Bos: I think also we need to make sure that you don't get offended by feedback. So especially in design, this is your craft. This is your art and you're putting yourself out there. And you will be met with criticism, feedback, we have a whole show on feedback and criticism you can go back and listen to, but it's just be prepared for that and know that it's they obviously hire you because they like your work. But feedback and criticism is going to be part of the process. - -24 -00:15:14,490 --> 00:15:55,950 -Scott Tolinski: Yeah. Yes. Cool. So all right, you are designing, you are ready to go into development. And potentially you need a back end. I mean, maybe you have to find out. But maybe you need the backend for this thing. Because you know, there's a lot of options for front end code. But what do we do now that we're doing a lot of headless sites and one of the cool services that we both love here at syntax is Sanity. Now Sanity, is this bring your own front end solution at that sanity.io. And they say it's structured content done right. And they have some insane new features that specifically work with some of the platforms that we love on this show like Gatsby, can you tell us a little bit about some cool stuff they have coming out? - -25 -00:15:56,070 --> 00:17:52,580 -Wes Bos: Yeah. So the thing with Gatsby is that you need some way to get data into Gatsby. And these are called source plugins. So you can get a WordPress source plugin, you can use a markdown source plugin, you can any anywhere that can hold data, Gatsby can source that data by reading it. And one of the downsides I've had actually with WordPress is that I tried to source my own website. And it took like, like 15 minutes, because it has a read every single thing. And then it broke like 12 minutes in and I had to fix it. And like it was like trying to debug before we had Firebug. And One really cool thing about Gatsby, or sorry about Sanity is that they have a plugin called the Gatsby source plugin. And it's the only source plugin in town that gives you a real time preview of your data. So that's really cool. Because as you are updating your data, in the back end of sanity, you're going to see real time this thing updating on your Gatsby site, which is often a downside to static site generation where you need to redo the whole generation just to see your your data changing. So if you have a client that needs a back end, in a nice interface to be able to input their data we've talked about before you can create your own interface for Sanity with react components, you can just use Sanity as the back end and the Gatsby source plug in to pull in your data. It also integrates with Gatsby image, you've got blazing fast builds, and it just works. So this is pretty, pretty cool. I'm gonna try this myself. I think that's probably one of the coolest ways if you want to just try out Sanity is I know that a lot of you are looking for Gatsby projects right now. So grab Sanity, grab Gatsby, try whip up a quick little site and see how this thing works. So you want to check it out is that sanity.io forward slash syntax as s a n i t y and you they are going to double what you get in the free plan. So thanks so much just handy for sponsoring, - -26 -00:17:52,710 --> 00:18:49,070 -Scott Tolinski: sick, sick, sick, sick, yes, entities doing big stuff. I'm really psyched about that. So let's get into the dev process now. And sometimes you are the dev and the designer. And they're sort of like a Alright, the designs now done, let's go ahead and get into the dev process. Sometimes you're working with a designer, sometimes you're working with an agency, sometimes you're working with a bigger group. And these things can either be sequential one happens, the other happens, sometimes they start at the same time. And you need to be able to know what you can work on right now. And what's maybe not determined by the design, maybe you can start building up some structure stuff. Maybe if you're working with the CMS and you know, sort of what kind of content is going to be there, you can start building out your custom post types, that sort of thing. But even before that, what are some of the tools that you like to use to make sure that the whole process around development goes? Well, because it's so technical, and it's most likely that part of the process their clients are going to know the least about? - -27 -00:18:49,290 --> 00:20:12,990 -Wes Bos: Yeah, and I think the dev process maybe is even easier than the design process, because so much of design is subjective. Whereas if you have very clear requirements in your development, it's like writing good tests. You know, if you've done that correctly, obviously, there's a lot of like, especially with UI design, and things like UI development, it might be a little bit mushy there. But knowing if you have clearly specked out what these functionalities should do, how it should work and all of that, then actually developing to that spec should be somewhat easy or somewhat clear. I shouldn't say easy but but clear. What I also like to do is just like design is the only show that your your dev progress if your client is capable of understanding the dev process. So that's really important because if you show them something that's half built or or breaks in certain edge cases, then they're going to start raising flags, you know, yeah, I haven't haven't done that yet. This is just the the process so far. So I really like to just show them when that feature is done. I'll push that to a staging and have them go through it. We'll talk about feedback in just a second. But that's really the process I do is when a feature is done. Push it up. And that way I can move on to the next feature. Well, they're trying it out. And, and providing feedback on it trying to just like break it and and see how it works for for their actual process. - -28 -00:20:13,310 --> 00:21:55,860 -Scott Tolinski: Yeah, and just like design, you don't want to show things too early. Or if you do make sure that there's clear expectations around what you're showing pacifically. Like, again, with CSS, write CSS in your design process can cause so many troubles. Because you know, things are in flux, you're still creating things, you're still putting things here and there. And maybe things aren't just right. And if things aren't just right, and you show it to your client, and they think that they're looking at something that's further along than it is. Or maybe they look at the design that you have done, and they don't understand that, oh, it only takes five seconds to style this navigation, but it's totally unstyled right now. And they're looking at that thinking like, Oh, my God, the navigation is not even styled This is this project is nowhere near and where it's going to be finished, clients have no understanding of the length of time it takes to do any of this stuff. So I think it's important when you are showing work, if you're showing it early as development work that there is clear expectations, what should you be looking at, when I'm looking at this here, okay, you should be able to click through all the pages, that's the only thing you should look at, you should be able to use the home page as expected, it's gonna look nice, it's gonna do what it's supposed to, here's what's not working, okay, the navigation isn't styled most of the CSS isn't there. I mean, they don't know CSS, but most of the design isn't there. And make sure that they have those clear understanding and expectations, because just like the design thing they're going to look at and see the only thing that's not working in your project, they're going to call it out. And then we're going to give you a huge laundry list of a bunch of stuff that you already know that you need to do. So you don't want to tell your client, I'm not accepting feedback right now on this, I know what I need to do, things are moving here, I'll share an update again with you next week. And then we can go from there. - -29 -00:21:56,160 --> 00:22:25,830 -Wes Bos: I think that's probably the most important part is tell them do not give me feedback just yet. still in the works, I just thought I would let you in to see how far we are. And that's good, because the client will often just they'll feel at ease knowing Okay, things are getting done. Obviously, it's not done yet. So I'm not gonna give any feedback. But I just feel good knowing that this is the progress that we're making. And we're going to hit our goals, because more often than not the person who is talking with you, they have a boss or a fortune, they need to give some sort of feedback as to how things are going as well. - -30 -00:22:26,040 --> 00:23:42,330 -Scott Tolinski: And I think along with that, too, is giving like specific regular updates. And this is sort of goes along with their scheduling part of it. But if you want to say like, okay, there's going to be a new version out on Friday, here's what's changed, here's what's new, and make it onto a schedule, stick to that schedule, so that your client knows when they're gonna see the next update, when they can expect to hear from you again, that way. They're not wondering, is this project in limbo? Are they even working on it? Is it even making any sort of progress. And sometimes, there's a lot of technical stuff that goes on behind the scenes. And when you send them the next version of the site, it doesn't look any different. And they might interpret that as Nothing's going on. So you do need to have these regular interval check ins you can establish every single Friday afternoon, you're going to get an email is going to be a brief, here's what I'm working on. Here's what I spend time on. It doesn't have to be the most in depth thing. But here's maybe what to look at. And another thing is your clients don't know technical jargon, and they don't care, right? You don't want to tell them like oh, I added this component. That's a stateless functional component, and blah, blah, blah, none of them care about any of that. So just say, Hey, I worked on that the foundations for building the slideshow system, I worked on the post custom post system, I worked on this or that or whatever, just to give them some sort of idea about what's going on - -31 -00:23:42,450 --> 00:25:19,980 -Wes Bos: awesome tips. So once the dev is at a point where you can get feedback. So some stuff, you don't wait until the whole thing is done, you might want to let them in a little earlier at a certain point. And then it's time for feedback and revisions. So in my quote, I always make sure that there is time for I usually did three rounds of revisions. So what that will be is that you present the website to the client, and it's time for them to go through it and let you know all of their feedback. And it's important to me. And for everyone's schedule, that you provide all of the feedback in one, I usually say one email, so it's written down, and then a follow up call. So we'll go through all of the things together. Sometimes it's just minor, little nitpicky stuff. Other times it's, I was expecting it to be able to upload multiple images at a time or as expecting a preview of the image or as expecting the user to be able to sign something on this contact form all these like little things. And that's good because then you just have this laundry list of things where you can bang through it. Usually for smaller projects, I found that email or some sort of project management software was was more than enough, or like something like Basecamp or whatever. But as the project's got larger, I always lean on more project management software that's, that has things like bug tracking and email replies and maybe like things like con mon boards and, and tickets, and that was better and usually more technical clients loved using that because then they can just like log a bug. And they can quickly chime in and see what the status of it is or, or if there's questions that need to be asked, you can always go back to that one issue and see what the back and forth what's going on on that. - -32 -00:25:20,010 --> 00:25:59,340 -Scott Tolinski: Yeah, again, don't introduce that into clients that aren't going to need it, or aren't technical enough, or any of those things. Because if you were to give your client who, you know, can hardly use Facebook, access to your bug tracking system or whatever, they're going to be like, Okay, what do I do with this, and likewise, don't give that same client a back end that's based in GitHub, because I hear about that all the time. My client gave me this thing called GitHub, I don't really quite understand it. But I have to go here to enter this and do that like No, don't do though. No, not GitHub is not a content management system. It can Yeah, yeah, I don't know. that's a that's a pet peeve. Totally. - -33 -00:25:59,400 --> 00:26:11,040 -Wes Bos: I hear that all the time from people where it was good until like, my client wanted WordPress and and that's why so many people use WordPress is because it's an awesome back end, for people to use that. Yeah. - -34 -00:26:11,070 --> 00:27:03,390 -Scott Tolinski: And typically, they're used to it, they may be used to before, you don't want to have to teach your, your client new thing. So yeah, I mean, feedback is gonna come in, and it's not always in the same way that the design feedback comes in, it's not always going to be helpful. But a lot of times, it will try, like, they're not going to know, you know, they're gonna say this is not working, this is broken. This is, you know, they're gonna use language like that. And again, it's up to you to figure out what they mean, when they say the slideshow is broken, right? Maybe it's just that the slideshow doesn't loop around when it does one loop? Or maybe it just the slideshow doesn't automatically go after 30 seconds? They don't know. So it's up to you to say, Okay, what are you expecting this to do that it's not doing if something technical in your mind is working? And they're saying it's not working? Maybe it's even a browser issue? I mean, all this. Yeah. It's just it's, it's, it's frustrating. But it's one of those things that it is. So going to clear communication channels is going to solve everything for you. - -35 -00:27:03,630 --> 00:27:39,210 -Wes Bos: Absolutely. And I think getting them on a screenshare. If the client is not able to voice what the problem is, is really helpful. Because opening up the screenshare, you can see simple things like you forgot to tell them to reload the CSS or you didn't bust the cache. And they're seeing the old version, or things like they're using an older browser that's not supported, or all kinds of different things can happen. But if you see them in their own screen, as they're experiencing it, they can usually voice what's going on. And that's a lot of back and forth and being like, What do you mean, it's glitchy? What does that mean? That, you know, - -36 -00:27:39,690 --> 00:28:30,570 -Scott Tolinski: yeah, I know, glitchy broken, not working. Yeah, all that stuff is a very, very important to establish clear lines of communication. And again, we talked about in the first episode about money being important. And one of the things that you could do to establish a clear line of communication regards to money, invoices, and all that good stuff is to use some really excellent modern cloud accounting software, something that you might say is fresh, maybe perhaps fresh books. Fresh books is one of our sponsors, they've been sponsoring syntax for a long time. We absolutely love fresh books for a number of reasons. But they're going to make your life in some of these regards and some of the money stuff when you're working with freelance clients and customers and things like that, to establish clear lines of communication so that expectations are always met in terms of where money is, who's getting paid and how they're getting paid. - -37 -00:28:30,810 --> 00:29:40,320 -Wes Bos: Yeah, so I'm gonna highlight two features of Freshbooks. That is perfect for someone who's doing what we're talking about today. First one is project deposits. So when I start a project, I will usually take a non refundable deposit of 25% 50%, depending on how big it is, actually is for the project. And then you can sort of like hold on to that money via Freshbooks. And they can log in anytime and see how much of the invoice they've already deposited. And then also you can submit late payment reminder. So for me, I'd always say 50% of front 50% on before launch. So usually, as soon as everything is ready, get me paid. And then and then we'll launch the sucker that doesn't happen every time because people take longer to pay at some point. But if you do have a late payment Freshbooks will automatically send out a late payment reminder, which will often bump the client and remind them and that's really nice, because sometimes you're still working on the website, when the late payment reminder needs to go out. And it's not you that sending the late payment reminders. So you don't like tarnish that relationship. It's Freshbooks that sends it out. It's your accounting software. So it's like you kind of like make the robot do the dirty work of reminding your client that they didn't pay. - -38 -00:29:41,640 --> 00:29:42,780 -Scott Tolinski: That's why we have robots. - -39 -00:29:42,860 --> 00:30:06,210 -Wes Bos: Yeah, they have it here if your client forgets to pay you on time. Freshbooks takes care of the awkward reminder with customizable late payment reminders. So I love fresh books for that kind of stuff. They get all kinds of different features for freelancers, small businesses, or someone that's doing a side hustle, go to freshbooks comm forward slash syntax and intersects syntax and how did you hear about a section to get started with a 30 day free trial, no credit card required. - -40 -00:30:06,300 --> 00:31:10,710 -Scott Tolinski: Cool. So let's get on to the next part, which is going to be deployment. So you have know you've designed you've dev did the dev is pretty much done. Sometimes I get into deployment before the design is done. So that obviously you have like a staging site that they can look at, or have potentially a an entirely like a hidden URL. So I'll typically personally, I'll deploy pretty early on in the process, and have whatever the clients name dot Scott tolinksi.com, that they can go to look at it, it's not going to be crawled, if it's sensitive information, consider putting some sort of like brief password protection on it or something like that. I typically don't do password protection on it, I usually just do some robots nofollow stuff, so that it's not indexed. But that's pretty much what I do I keep this up, and I have it regularly deployed to this, even if I'm not telling my client to go look at it right now, hey, there's been an update, I'm still sort of deploying to it all the time, just so there's the latest version up there that I can see working in the browser or working at a host or just seeing it in action and a greater sort of way. - -41 -00:31:10,740 --> 00:32:30,330 -Wes Bos: Yeah, I always have like, on my own website, I would just have like clients that Wes Bos calm and then I would have like a URL, I usually didn't put author in front of it either. If I did, I just use basic auth, which is just a URL based username, password, that'll get you through it. Otherwise, you put it in a robots. txt, like Scott said, important other notes here is make sure you get your client to pay for the domains and the hosting, it might seem like a good idea to charge an extra five bucks a month on top of what you're paying for hosting. But it's not worth it. Because when you pay for the hosting, then your client comes to you, when there's issues with the email, they come to you, when there's issues with the the hosting, like maybe the host goes down for a little bit. And then also sometimes that a lot of times with this stuff is you just want to do the project. And you're done with it. And you say See you later to the client, cuz they have somebody else to actually manage the website. Whereas like, I still seven, eight years later, is still every year have to renew a domain and hosting for one of my past clients. And then I have to send them out an invoice via Freshbooks, which is super easy, but it's still a pain in the butt to actually have to send that off. So yeah, yeah, yeah. And like it sucks to own something that is not part of your business. It should be their it's their intellectual property, they should own the domain name and the hosting for that. And then they have to pay for that thing. Everything. Yeah, - -42 -00:32:30,450 --> 00:32:43,770 -Scott Tolinski: you don't want a hosting company, you want to GoDaddy. So like, you don't have the the secretaries and whatever the business managers to go ahead and like keep track all that stuff, or even manage it. So it's just it's just too much to extra manage. - -43 -00:32:43,860 --> 00:32:48,240 -Wes Bos: This is a bit of an aside, did you see the stuff GoDaddy was doing this weekend that went up, I saw - -44 -00:32:48,240 --> 00:33:02,460 -Scott Tolinski: something about GoDaddy doing something to people's adding scripts into PS sites and that like they were adding my surprise face was like the you know, this is my surprise face. I'm not surprised at all, because GoDaddy is always like that. - -45 -00:33:02,520 --> 00:34:02,250 -Wes Bos: Yeah. So for those who didn't hear GoDaddy was injecting JavaScript on top of everybody's website that was likely doing just like following people around the web, similar to how Facebook and Google ads and everyone on the web is doing it. But because you like if you host a pool website with GoDaddy, they were injecting that data on top of it, which is so sketchy that they were doing that because they should not be touching your code and the outputted software. I had a little heart attack the other day even CloudFlare does this intentionally. they inject a little bit JavaScript to a few skate your email. And I was just like viewing source on my email. And I was like, What is this? What is this? Like? What is this code? Did I get hacked? And it was like, Oh, no, this is just cloud flares. thing but GoDaddy does that as well. That's so dumb, obviously should not be hosting with GoDaddy ever, but a lot of people are I've still my my domain name is still with GoDaddy from like, 15 years ago. I need to move it but it's just such a pain. Terrible, terrible company. - -46 -00:34:02,670 --> 00:34:13,940 -Scott Tolinski: Yeah, I know. I know. And then I think they got bought by somebody else. Or they had different management newer, like sort of wondering, they did this whole like, we're we've changed campaign. I did. Yeah, I don't I don't, buddy. - -47 -00:34:14,009 --> 00:35:34,350 -Wes Bos: Yeah, you can probably find an episode of me. Like saying GoDaddy is a new company. I think I said that on this podcast, because they got rid of all their sexist ads, they got rid of their elephant killing CEO. They seem to have been cleaning everything up. But it's just things like that, that were the same with Bluehost. They just touched the Bluehost was like adding caches to your WordPress without asking you anytime they touch your code for you, especially when it's for the greater good of the company. Whereas GoDaddy was adding tracking ads to to all of your websites that's so sketchy and I don't like when companies do that sketch. Anyways, while we're talking about deployment, other stories from the trenches here, if you are moving servers, it's best to just point the a record of your the domain name at the new server. So the cutover time will be almost instant, what most people will do or maybe not most, but they'll just change the name servers of the domain name. And then that takes a while to propagate. And that's not the end of the world because sometimes the cutover to the new server will be instant. But for a lot of people who need to migrate a WordPress, they needed to be at that domain name first, especially if you need to, like set up an SSL certificate, something like that. So there could be some downtime there. And I think it's important to make yourself available during this time. Like if you have a deployed day, you know, do it early. - -48 -00:35:34,350 --> 00:35:36,750 -Scott Tolinski: So that way you do have time to for everything. - -49 -00:35:37,110 --> 00:35:38,040 -Wes Bos: Good afternoon. - -50 -00:35:38,070 --> 00:36:04,610 -Scott Tolinski: Yeah, don't do a Friday afternoon. And just like if you're switching over that DNS, make sure you are available for when something potentially doesn't go right. Maybe you forgot to tweak something in the URL. So all your URLs aren't formatted correctly, or something like that, but just be available. Because the worst thing is that it's like, yeah, okay, I switch DNS over, everything should be good. And then you go on, you know, vacation or something, and then the whole thing blew up. And the process, - -51 -00:36:04,670 --> 00:36:41,360 -Wes Bos: one little little tip I can give you is, if you are setting up a website, where you're going to hot switch over the domain name, you can go into your Ford slash, etc, for slash hosts file, and you can set up like a map on your host file, which will will point that domain name to a different server. So you can you can temporarily view the website with the new domain without actually having to cut it over for the rest of the world. And that's how I usually set everything up and make sure everything is working for me. And then at that point, when it's working, you remove it from your own host file, and then make that that cutover, just make sure you - -52 -00:36:41,360 --> 00:36:44,670 -Scott Tolinski: remember to move it. Because you may Yes, working for me, - -53 -00:36:45,150 --> 00:37:33,230 -Wes Bos: works for me Have a good weekend. Other things is make sure that the client's email is not going to be disrupted at all, I've seen many people switch over a domain name without any regard for other DNS properties that people have set up. So there might be things for sending transactional email, there might be sub domains, there might be MX records for the email that all of that stuff, if you're switching name servers needs to make the move over and almost all DNS providers with the exception of CloudFlare will not suck up all of those DNS records for you. So that can be a nightmare situation if you accidentally bring down entire company's email, which is, thankfully has never happened to me. But it is the scariest thing to move domain names where email and stuff is involved. - -54 -00:37:33,300 --> 00:38:27,000 -Scott Tolinski: Yeah, right. I mean, keep the perspective that you're working with the business. And if they're losing time, they're losing money. And you don't want to be the one responsible for that. Because it's Yeah, that's a, it's a lot of responsibility, I think, is an important thing, we also have to make sure you have some sort of backup strategy in place, your client is not going to back things up. So it's important to talk about maybe the risks of things, maybe you have your code all saved in GitHub, and that's good enough, but maybe they have a database system or something like that, it's important that you are the one who configures and setups backup, you know, maybe that's a cron job that's doing database backups, or a plugin in WordPress, or a plugin in Drupal that's doing these, these backups, your client is not going to do that. And when the thing goes down and breaks or something, you might get blamed for it. So it's nice to set up the backups make it easy for them make it so it has no potential for them to lose data. - -55 -00:38:27,210 --> 00:40:02,790 -Wes Bos: Yeah. And at the same point, you also need a restoration strategy. So just having the data is one point. But if you need to rebuild the server, and and restore all of that data, you need a strategy for that. And I used to work at an investment bank and twice a year they'd have these like, like worst case scenarios, where they would test their actual backups and make sure that like, Okay, if everything went awry, if like a bomb blew up the server room, how can we get back as fast as possible? Probably not a big deal for my restoration strategy for all of my clients was just use jetpack and click the Restore button. And it was all said and done. But for more complex applications that have custom servers, it's important to know how how would you get back up and running as quick as possible? should something go down? Or are you even responsible for that, right, that's something to put into your support. We'll talk about that in a second. Other things I've run into make sure a lot of times clients use their server as an FTP, a place to dump files. And those files are often linked to internal documents, maybe or emailed around. So if they have like a folder on their website that has all of these documents that often needs to be moved over as well, if you are moving servers, and in a lot of my cases, I tried to stay on their own server because it sucks to have to move over. These people had gigs and gigs and gigs of zip files and documents and everything that's not so much of an issue anymore, that people are moving away from using FTP and into things like Basecamp notion or whatever internally? Yeah, definitely. - -56 -00:40:03,330 --> 00:42:23,630 -Scott Tolinski: Cool. So let's talk about handoff. Now, because this is a big one, because a lot of people just think, alright, I did the work, I put it up, see you later. And that's it. But I think this is important because i, this actually used to be one of my jobs at most of the agencies I worked at, in fact, people would specifically, even if I didn't build the thing, my project managers would request that I do this, I guess it is a testament to my tutorial ability or something like that. It's so funny, because I didn't think I was necessarily good at it. But I got so many positive comments from this, that my agencies would always be like, Alright, we need Scott to go in and do this. So the handoff component of things is important. And it often will involve training, right? People don't know how to use this thing. Maybe they've never seen WordPress, or maybe they've seen WordPress, and they don't know the plugins or things like that. And one of the biggest things that I like to do for the pre handoff is to turn off anything that they don't need. Now WordPress is a little bit less awesome at this than Drupal is, Drupal gives you a lot of like, turn off everything sort of situations. But a lot of times your client is not going to use most of the stuff in the content management system. So I like to even restrict their access to a lot of things via you know, you can make one person on their team who maybe is their IT person, maybe make them the administrator, or maybe you reserve an administrator account, but the accounts that you're making for your users should really be just so that they can do what they need to do. And that's pretty much it, obviously, give them access to an admin account and all that stuff for when they need it. But if they need to only add posts, don't give them the ability to delete users and blah, blah, blah, and see this and see that and add custom post types. Now they don't want to see all of those links, they want to see the button that says ad post, okay, ad post, click here, do this. So setting them up for success is a big one for me. And then two, I really like to do in person trainings where you show them exactly Okay, now you log in here, I want to go and create a new post. So to create a new post, you go here, you click here, you do this, that's your new post. And then in that same regard, you outline Okay, I gave so and so access to the administrative account, you don't need this account. But in the event that you have somebody else working on the site, or maybe you want to expand it, or maybe you, you know, you have somebody who has experience in WordPress, here's the admin account, it gives you full access to do anything you want. - -57 -00:42:23,880 --> 00:43:35,880 -Wes Bos: Yeah, locking it down is such a good point, I would always lock it down as much as I can, because only takes one client who thinks they know a little bit of what they're doing, or the ability to get a little bit, have a couple glasses of wine and go through the WordPress plugin directory. And they can really goof things up by it by doing that. So locking it down as much as you can obviously give them access, if they're technical knowing that, hey, you probably shouldn't be doing this in production. But like, go for it, I guess. And the other thing I do is I will always make a video detailing how to use the entire site. So most of my clients were remote, couldn't meet them in person. So I would make a screencast on how to use every feature of the website. And that was awesome. Because the type of person who works and updates a website, that's often the entry level job at a company. And those people move through that role all the time, or somebody needs to update the website. And then they they never really email you asking how do i do X, Y, and Z. So I just sat down recorded just like my tutorials. This is how you use the entire website. And they have this video. And years later, people just keep coming back to those videos. And they understand how to use it. And they can if they have an intern or a new hire, send them the video and then they can get up and running with with how it all works. And - -58 -00:43:35,880 --> 00:44:21,840 -Scott Tolinski: that's just a good point. I haven't started doing that recently for people working on level up tutorials, right? I know that my like process for doing testing with graph qL and jest and all this stuff like that is a little bit intense. So what I did is I made a video explaining here's the types of tests you're most likely to write, here's how to write them. Here's how to get it to work. Here's the common errors you're going to face. Here's how to do it. And now if anybody wants to write tests for the site, or they want to learn how I'm doing it, hey here, just watch this video you consult to it, it has every single use case you're going to encounter, it frees me up from having to do a lot of like in person teaching moments. Because, again, that's what we do. There's a ton of free screen recording software, you can screen record and record your mic with QuickTime if you have a Mac. So you don't even need any extra software, you can just do it if you aren't used to this kind of thing. I think - -59 -00:44:21,840 --> 00:46:12,570 -Wes Bos: the final thing we have here before we wrap it up is our show got two things. Sorry. The next one is bug fixes and support. So it's it's common for things to break. The kind of bummer thing about websites is that they have a lot of moving pieces and they tend to just rot over time. So there needs to be some sort of agreement in place where especially with like CMS is that need to be updated for security purposes. Sometimes those security updates in those plugin updates because you're relying on them. You also need to upgrade them with caution because things can break at any given time API's can break. It's just like a node module. You can't just upgrade Read it and know that it's going to be okay. So it's important to say like, Look, I what I would tell my clients that said like, for the next year, if anything breaks, because of my own doing, I will fix it for free, whoever, if anything breaks because of external, external things, maybe the host upgrades, the version of PHP on the thing, maybe some WordPress upgrades and totally nukes, the tiny MC for Gutenberg, like all kinds of stuff can happen, right? It's just a moving part. If it's outside of my control, I let them know that that will be billed at either an hourly rate, or I'll quote it ahead of time to let you know how much it will be to fix it. And that's good, because then they sort of know ahead of time this thing, this is website that you paid me for once, I'm not going to babysit it for the rest of my life, unless you want to get some sort of what do you call that a retainer in place? Yep. They're letting them know, okay, you can you can reserve like I had many clients that did this. They said, Give Just give me 10 hours, 10 hours a month. And I might not use all 10 hours, but it's worth it to us to actually have you on hand, just in case something goes. And you have to fix it within 24 hours. Yeah, absolutely. - -60 -00:46:12,570 --> 00:47:43,500 -Scott Tolinski: I mean, clients are just famous for wanting to add things after the fact. So it is important to establish like, What's there? I like to think about emergency bugs too. Right? Emergency bug? Yeah, depends on what your if they are paying you on a retainer for emergency bugs with it agreement is that one needs to be established beforehand? It depends. Did you break something? Or did they break something, maybe you went in and tweak something and you broke it? You need to fix that right away? That should be obvious, right? So emergency bugs that you did, you got to treat them as an emergency, if your client went in there and goofed around with something or tried to do something on the server, and maybe they didn't know what they were doing. And they deleted something. It depends, right? I mean, if you are knee deep in another project, then you can't always drop what you're doing and fix that for them. And they need to know that. So you could give them a realistic expectation about when you can have it going up. But again, be careful because the last thing you want to do is get a call and say, Hey, this thing is going, I broke it and you need to fix it right now. No, I don't need to fix it right now. Because you broke it. And I will fix it. When I'm doing it's possible for me to fix it, that it's an important thing to tread lightly on it depends on your relationship with your client. But that could be something that could potentially sour a relationship if they broke it, and you're not able to fix it. And they might think, well, I should be able to have access to you 24 seven, again, stablish, those guidelines at the forefront of the project. But again, don't treat an emergency that they created as your emergency. - -61 -00:47:43,649 --> 00:47:57,750 -Wes Bos: Yeah, and good software ahead of time can prevent that as well. Yeah, whether it's jetpack or get or whatever, you should be able to just roll it back, at least for the time being before you can get in there and actually fix it. But obviously, that's ideal. That's not always the case. - -62 -00:47:57,780 --> 00:49:08,610 -Scott Tolinski: Yeah. And well, okay, what happens, do what happens when the entire project blows up? And the client didn't get you assets on time? And well, maybe they didn't, you actually, you know, you establish that clear line of communication, and you email them once a week asking for them, and they still didn't get it to you. And now the deadline is passed, and they're mad at you. There's a whole ton of reasons why these projects can totally fail. They can be your fault. They can be your clients fault. They can be, you know, maybe outside forces, maybe there's a hurricane or something right? You know, I mean, there's a lot of reasons why a project can fail. So it's important to understand how things are failing. And as long as you do your part to establish these clear lines of communication. And to continue this communication, you will most likely not be at fault for this stuff, right? If you established a good timeline, and you kept all your dates, and you emailed them when you're supposed to, it's going to do most of the way to ensure that the project won't go bad. And when it does go bad, your client can be mad all they want. But as long as you did your things correctly, and you're not delusional about it, then it might be time to look at potentially firing your client or seeing what other solutions are available. - -63 -00:49:08,669 --> 00:50:12,270 -Wes Bos: Yeah, these things don't come out of nowhere that like these big bombs that happen, you should be able to see them coming along time away and be able to mitigate them when they're small problems. Don't wait until there are massive, massive problems. But that said, you can get into lots of the project can be way behind. That's a communication problem on your on your own side, it is going to be behind that you should let them know, way ahead of time that hey, you know what, this is taking me much longer than I had hoped. Or these are the reasons why. So we're gonna have to push the dates to the following X, Y and Z and then people everybody's everybody's on board with that. Other things that can happen is the products not met with acceptance so that that's a problem where they say this is not good enough. This is garbage. It's not what we wanted. Again, that's a problem that should have been recognized way earlier, both on the client I should have told you that and you should have been able to pull it out of the client in the feedback and revisions part of this other things client not paying. Have you ever had to chase someone down for money? Yes. - -64 -00:50:12,450 --> 00:50:43,320 -Scott Tolinski: And they didn't pay. And I had a contract. But it's like, at the end of the day, the legal cost of pursuing that did not they paid the deposit. And I got to keep yahsat said that it was infuriating, because I would send them an email maybe once a week, hey, well, you know, this invoice is overdue. And it was very cordial about the whole thing. And they just never responded to a single and they never responded to a single email, not one, not a single one. And it's like, at that point, what am I gonna do? I'm gonna send dog, the bounty hunter over there to break their legs or something. - -65 -00:50:45,150 --> 00:52:57,360 -Wes Bos: Yeah, it's funny I've made a couple times in my career for past students of mine, I've made phone calls, because my wife always dresses me about this, because she's like, you can confront people for not paying a bill in like, find their alternate phone numbers and send them letters in the mail. And like, you can do all this stuff. And it's no problem. But if like, someone screws up my restaurant order at a restaurant, I like oh, it's okay. Don't worry about it. It's fine. Yeah, you know, like, go full Canadian on them. So I've definitely had to do that. But again, having phone numbers, having addresses, things like that of the people that are trying to screw you is important, because you can you can find them. At a certain point, you have to be okay with just losing the money, because you just have to let it go. And I think you can kind of find peace with that. Every time I think about this, I think of you know who Mike Birbiglia is, yeah, he's like this comedian. And he has a story on This American Life way back of where he got into an accident in a rental car. And the cop screwed up his the police report that showed him at fault. And he owed like, 15 grand to the rental car agency. And it wasn't his fault. And he spent like a year trying to get this thing corrected. And a certain point, he just said, You know what, I can't do anything more about this, I'm just gonna walk away. And he just like felt such relief, even though he had to eat that 15 grand, and it was is significant in his life. At a certain point, it's just not worth your mental well being to have to chase these people around. Obviously, if you get to that point, you've got deposits, you should have access to the server, it's very unlikely that the client would change all of your FTP credentials and whatever, as well as any of the code. But if you get to a point where they can, they can lock you out of your website and just take the website and run with it, then you probably should have have put some more steps in place. In order to do that. I once in mine, I'm sure if this is legal or not, but I once could not get paid for the life of me. And I finally just put up a blank HTML page with an h1 tag, please contact billing. Yep. And like, like not to shame the client. Don't just like oh, shoot, like something ran out. Like I forgot to put a quarter in the meter. Right. Yeah. And guess what? I had a check later that day. - -66 -00:52:58,590 --> 00:53:50,880 -Scott Tolinski: That worked? Well. I like that approach. Because so many times you see these things like glorified on on like Reddit or the internet where they're Yeah, they're like, Oh, I put a background that's a bunch of lewd photos of my client that didn't pay. It's like that is like not admirable right way to get sued. Yeah, great way to get sued, but it's not being a good person. And that's not doing like good things for your career. If I ever interviewed for somebody, and I found out they did that, I would like immediately shred that that application. That's not professional. That's not how you handle yourself in that situation. So again, the contact billing is a great way to have that without being like her. Somebody didn't pay their design or like blah, blah, blah, you know, like that. Just it's not a good solution at all. So again, don't don't shame your client. Don't do anything illegal, don't like DD OS them - -67 -00:53:51,810 --> 00:54:12,900 -Wes Bos: or even like a coating a backdoor into the CMS. That's not allowed either as well. That's that's against the law. Many times I've thought about doing that. But I never have just because I don't think that's allowed by the law. Yeah, because also it's a security issue as well. If you were to leave any backdoors in the software. Yep, - -68 -00:54:12,930 --> 00:54:38,550 -Scott Tolinski: yep, yep. And if everything you did everything fine. And you know, they're not paying blah, blah, blah. Make sure that you have the ability to fire them written into your contract and fire client only had to fire a client. I think once at an agency I worked at and they were just insufferable asking for more than what we had agreed upon. They you know, broke the contract several times. We gave them more than enough chances to get on track. fire them felt great about it. - -69 -00:54:38,850 --> 00:55:37,800 -Wes Bos: Yeah, I think once or twice I've had to finish a project and tell the client I'm done with them. But I've usually have a good vibe for if this person is going to be a bad client and it's generally how scatterbrain they are when you're talking to them. The the thing to me and I saw this on Kijiji when I was selling a chair the other day is the person sends like hello still available, I need a chair and like they said like seven or eight like scatterbrain ideas through many emails or text messages or chats or whatever it is, you know, that person is way too scatterbrained to actually to work with. And it's just a huge red flag. Whereas someone who is able to compose themselves in an email, they can use paragraph tags, which seems to be increasingly rare and email. That's a good they can get points across quickly paragraph tags are, you wouldn't believe how many emails I get from people who just barf their thoughts into a single not using a single paragraph and it just drives me crazy. Such a good indicator - -70 -00:55:37,830 --> 00:55:39,000 -Scott Tolinski: it's such a good - -71 -00:55:40,110 --> 00:55:52,350 -Wes Bos: immediately if I haven't replied to one of your emails go back and see if it's because you didn't use paragraphs. Yeah, right. That's likely it. So that's it for today. What about sick pics today, Scott? - -72 -00:55:52,380 --> 00:55:56,250 -Scott Tolinski: I've just sick pic I just got a new NAS drive, which is network area storage - -73 -00:55:56,310 --> 00:56:00,120 -Unknown: area area storage that would expand Yeah, yeah, attach, attach No, attach - -74 -00:56:00,120 --> 00:57:17,610 -Scott Tolinski: attach. I was gonna say that doesn't sound right. I don't know why I'm saying that. But this is a you know, we we work with a lot of data. And it's important to have backups of your data on site, off site, all that good stuff. And I've been currently using this old Western Digital NAS drive, I have four four terabyte drives in it. And so I have been looking to upgrade it's becoming more and more finicky. I'm grow more increasingly worried about my data on it every single day. So I ordered a new Synology diskstation dS 918 plus all linked to us in the store. This thing does so many cool things. It's like less of an just an hour's drive and more of a computer with NAS capabilities. It does 4k video transcoding on the fly. It's has a billion apps built into it. So if you're into like the home automation stuff with which Wes and I both been talking quite a bit about, we're going to be doing an episode on that there's a lot of cool things like like server for surveillance stations, all sorts of built in apps, you can use it as like a Google Photos type of thing. It is surprisingly cool. I asked on Twitter, which NAS people are using it and this was the overwhelming winner. So I'm really, really excited to really dive into all the cool stuff that this thing has to offer. So I'm excited about it, check it out at Amazon's knology any of this stuff. We'll link to it in the show. - -75 -00:57:17,820 --> 00:57:27,330 -Wes Bos: I've got some questions about this thing. So it four gigs of RAM, which means you can run apps on it pretty quickly, which I guess that's why it can do transcoding so nicely. You can upgrade widow, - -76 -00:57:27,630 --> 00:57:29,250 -Scott Tolinski: you can add some Oh, really? Yep. - -77 -00:57:29,370 --> 00:57:32,640 -Wes Bos: It's so tough four bays. And did you fill them with hard drives? - -78 -00:57:32,760 --> 00:57:45,900 -Scott Tolinski: I thought yeah. 444 terabyte drives? Whoa, you wouldn't do. The way I'm doing it is 16 or I mean eight terabytes available space. And then the other eight terabytes is backups. duplication. Does redundancy. - -79 -00:57:45,930 --> 00:58:10,230 -Wes Bos: Yeah. Okay. That's awesome. Wow, I think I want to especially now that we're talking about these security cameras and stuff like that, and all those home automation stuff, I know that you can also run like web servers on this thing. I mean, there's this there's this one, like home automation, think it's like a Python app where you have to host it yourself, but you need like a server in your house to actually run it. So I bet you could run it on something like this. How much was it? - -80 -00:58:10,230 --> 00:59:02,460 -Scott Tolinski: It's like five, five, something 549 without discs. And since I already have drives, the tracks are pretty reasonable. Yeah, they are. I mean, in terms of storage space. And the cool thing is you can get a couple drives, you can get one drive at a time or whatever. And just keep on adding to it. One of the really like you mentioned it being like web server capabilities and things like that, you can actually use it as like your own personal Google Drive access to anywhere, have your phone and camera sync to it and all that stuff, and share files from it and have a whole like user file sharing system. So I'm going to start using it instead of my Google Drive and set up my Dropbox for all that sort of thing. That way I have like ownership of files, and then you could even pay for an offset back back up to like backblaze b two. And then that way, your data is not living on Google servers. It's not living on Dropbox, but it's living with your disk and then a backup somewhere else. - -81 -00:59:02,480 --> 00:59:30,000 -Wes Bos: Yeah, I love the idea of mirroring it to backblaze b two, you can't you can even though backblaze gives you unlimited data, they do not support network attached drives, because then you could just like people have terabytes and terabytes, but you can mirror it to be to which is there like cloud storage? Yeah, I bet that wouldn't be that expensive, because most of the the cost of backblaze is not in just holding data. Most of the cost is in bandwidth. Once it's up there, you're not doing much with it, - -82 -00:59:30,000 --> 00:59:39,690 -Scott Tolinski: right? Yeah. And Synology is like a support partner for backblaze. Like they have a whole setup to do with backbase be to just like a one click easy setup. - -83 -00:59:39,870 --> 01:00:00,780 -Wes Bos: That's awesome. I got an email from backblaze the other day where they bought every year backblaze does like they talk about like their hard drive failure stats, because they are probably one of the biggest harddrive users in the world. And then they give you stats on like what's the best hard drive to buy, like what percentage of them fail, in etc it's backed by such a cool Company Yeah, - -84 -01:00:00,810 --> 01:00:03,060 -Scott Tolinski: super cool. What's? Yeah, - -85 -01:00:03,150 --> 01:00:05,070 -Wes Bos: let's hear sick tech, um, - -86 -01:00:05,190 --> 01:00:05,790 -Unknown: oh man. - -87 -01:00:09,719 --> 01:01:04,410 -Wes Bos: My sick pick is gonna be backblaze. I'm a big fan of backblaze, both as a way to mirror your computer. So it's like kind of like Dropbox, but for your entire computer, and it just runs in the background doesn't seem to be really resource intensive. And I just have my entire one terabyte laptop hard drive mirrored to the cloud, anytime something changes, and that's great. And then I also use backblaze b two, which is where I store all of my zip files to download my courses. And it is so cheap. And it's been rock solid, no complaints about speed or anything like that. I used to use Amazon s3, with cloud front in front of it. It was so expensive. And I got lots of complaints about speed from Germans and stuff like that. So now, I'm on v2. I've talked about this before, but I just love the company. So I'm going to sic pick backblaze as a company, blazing Blaze. And what about shameless plugs today? Yeah, - -88 -01:01:04,439 --> 01:01:43,620 -Scott Tolinski: I'm going to shamelessly plug level up pro there is a new series every single month for level of pro and January Series is going to be a nice little surprise, I'm not nothing just yet I'm very, you're gonna be very excited about it too. So tip number two level up tutorial, level up tutorials.com forward slash Pro, sign up for a year, one year save 25%. And I get access to all of the premium tutorial series that are up there. And every single one that is going to be released over the course of this next year, which is going to be 12 new series, some free series in there bunch of free videos and stuff as well. So check it out, level up tutorials, comm - -89 -01:01:43,829 --> 01:02:20,970 -Wes Bos: I'm gonna pick my advanced react course just put it out a couple months ago, at that advanced react.com it's going to teach you how to build a full stack application react on the front end Apollo graph qL on the front end, and Prisma graph qL yoga on the back end, we do authentication from scratch, it's not just we don't just use a module, we build the whole thing from scratch teaches you all about react, graph qL and some some node back end stuff as well. So check it out at Advanced react.com. Use the coupon code syntax, you're going to get 11 bucks off your course word. Cool. That's it for today. Anything else? Nothing. - -90 -01:02:21,570 --> 01:02:24,690 -All right, I'll talk to you later. Thanks for tuning in. - -91 -01:02:24,980 --> 01:02:26,640 -Scott Tolinski: Thanks for tuning in peace. - -92 -01:02:26,759 --> 01:02:27,300 -Unknown: Please. - -93 -01:02:29,310 --> 01:02:39,090 -Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax115.srt b/transcripts/Syntax115.srt deleted file mode 100644 index 160bc3821..000000000 --- a/transcripts/Syntax115.srt +++ /dev/null @@ -1,92 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi ski. - -2 -00:00:25,920 --> 00:00:50,970 -Scott Tolinski: Oh, welcome to syntax. In this episode, we are going to be talking all about code quality tooling. And this is going to be a part two. So if you did not listen to last week's tasty treat, go back and listen to last week's first we talked a lot about really important stuff, some really important tooling to get your code up to quality. My name is Scott winsky. And with me as always, is West boss. Hey, everybody. - -3 -00:00:51,030 --> 00:00:53,100 -Unknown: Hey, Wes. How's gone? doing pretty good? - -4 -00:00:53,220 --> 00:02:26,660 -Scott Tolinski: Yeah. How about you doing good radio radio, talk about some tooling, which something really good quality? Yeah, this episode is sponsored actually by one of the items that we're even going to talk about later in this episode, which is really interesting. So is a good little fit here. For the sponsorship. This episode is sponsored by our friends at Log Rocket, they've been sponsoring syntax for a little bit. For those of you who don't know, Log Rocket is a really, really cool platform that allows you to stop guessing when bugs happen. It basically gives you a video replay of what happened when a bug occurred. And you can see the console, you can see the network requests. If you use Redux, you can even see the changes to your Redux state at any given time. This thing is super cool. It's one of those services that I tried out and loved right away. So you want to check it out at Log rocket.com. And again, it's going to integrate with some of the tools that we talk about later. In this episode, one of our other sponsors, Sentry integrates really well with Sentry integrates with any of your other tools, whether that's GitHub, robar, New Relic, any of that stuff. So anytime you're working on a project, and you need visibility into the errors, network requests, all that good stuff, head on over to Log Rocket and check out Log rocket.com forward slash syntax. And if you sign up using that URL, you get 14 days for free. And I think that's enough time to see the proof with Log Rocket there. because trust me, it's one of these things that once you use it, you have a bug, you're never going to be able to go back to that visibility, or I should say non visibility that you had before. - -5 -00:02:26,810 --> 00:02:59,640 -Wes Bos: Alright, so let's jump into it. We've got three things to sort of cover today. First is in these are just continuing on from our last show, these are just things that will help you write better quality code. And these are tools that are not necessarily going to turn your code into better code, but they are going to aid you and help you in writing better code. So the first one is TypeScript in types. Second one is going to be jest and testing. And the third one is error and exception tracking, which Scott just talked about from one of our sponsors today. So you want to kick it off with TypeScript and types. How does that help you write better quality code? - -6 -00:02:59,760 --> 00:03:56,970 -Scott Tolinski: Yeah, so you know, a lot of times, I think, when people first see TypeScript, they'll just see the sort of extra stuff, right? It's just extra code in your JavaScript. But when they're using TypeScript or another type system, like flow or reason, one of the key benefits of using any of this stuff is that your tooling instantly knows more about your application than it did before. in JavaScript land, we're very used to having all of our errors happen occur on runtime, then when somebody visits your site, and they do something, it breaks, and then you're sort of stuck dealing with it, then now what these tools allow you to do is have a much better overview of your application, so that the tooling can tell it's going to break on compile time, rather than runtime, or even just while you're looking at it with your linting errors. The linting errors instantly become more smart, you get to see all this visibility about how your application is actually working, rather than just specifically at runtime. - -7 -00:03:57,149 --> 00:04:42,890 -Wes Bos: Yeah, that's the beauty of a type language is that you will figure out the errors. It esslyn brings you a lot of the way there with this type of thing. But with TypeScript, you go all in, and it will tell you that there's an error before you even hit the browser. So you won't even have to open up your console or figure out there's a build error. By the time just as you're writing it, you're gonna get be getting immediate feedback. And these things that give you immediate feedback. They're so extremely nice. But I find that when I move to something that doesn't give me that immediate feedback, even just things like live reload. It's crazy how you're like, oh, man, how did I ever How did I ever do this right now? Like, I can't build a website without like, immediate live refreshing right now anymore, because I'm so used to it, and that that tooling is just part of my workflow. - -8 -00:04:43,070 --> 00:05:40,380 -Scott Tolinski: Yeah. And then in TypeScript, in particular, I know it can be a bit of a pain especially to work with in some systems, you have to sort of relearn a lot of stuff. There's definitely some growing pains there. And if you pick another type system, I've actually heard flow is a little bit easier to get going with but I think type Script is definitely the most popular, I'm not versed in, in flow very much myself. So I can't really speak entirely on that. But also reason which is even further, anything you're you're used to comfortable with. But all these tools are basically, they exist to help you write better code out of the gate that's less prone to breaking. And again, while you're writing it, you have a better understanding of if this is going to work or not, I think these tools are, you know, for so long JavaScript has not had this kind of stuff that maybe JavaScript developers have just gotten so used to how we do it. But when in reality, like most of the typed programming world would maybe like scoff at not having these kind of features. - -9 -00:05:40,530 --> 00:06:32,370 -Wes Bos: Alright, next one we have here is jest and testing. So you might think like, well, I get the benefit of having tests and writing it again. So we have a whole show on that. But like, how does having jeston, or any sort of testing setup help you write better code when you're in it and actually writing the code. So I think like, for me, the I've got a couple different vs. Code extensions. And specifically, I have one that will show me when my tests are failing, or when my tests are passing. And also, when I'm working on my test, I can see the inline snapshots as well. And that immediate feedback, like we just said before, I think it just gets a little bit more productivity, as well as helps you write overall better code. So I'm a big fan of having that sort of immediate feedback in there, especially when you break something, you immediately know that you've done something dumb, and it's not going to get past you. What do you think about that? - -10 -00:06:32,490 --> 00:07:46,590 -Scott Tolinski: Yeah, and one of the things I love about writing tests and having good test coverage is the ability to refactor things very easily, right? Because there's the whole test driven development thing where you write your tests, then you develop, rewrite your code, all this stuff, I test her and development is kind of tough for me to like really stick to, but what's not tough for me to stick to is writing a component or writing the test to make sure that component does what I want it to do, and then maybe having the freedom to change things, right? I mean, if you have a component, and let's say you have a test for it, it's really basic component, then you convert it from a class to a stateless functional component, and you goof something up in there. And maybe you goofed it up just enough that it breaks everything, but not obvious enough that you caught it, right. But your tests are going to catch that. And that's a tiny little refactor. And anytime you touch any of your components, you risk really breaking them. So having those tests in place that say, Hey, this is going to work, the way you expect it to is, it's really key for me, and it's really open things up to feel more competent in changing my code, rethinking it rewriting it, because if your tests are written correctly, your test should really be testing to make sure that this thing you know, does an output what it needs to. And that's pretty much it. - -11 -00:07:46,830 --> 00:08:40,860 -Wes Bos: Awesome. Last one we have here is not necessarily when you're writing the code the first time around, but it's when you're actually writing the code to fix something that has broken and that's having some sort of service. Obviously, we've got friends of the show, both Log Rocket and Sentry provides services like this, there's lots of other ones out there as well. And what they'll do is they will track and catch all the errors that happen on there. And all the different services, different features, some of them will allow you to replay like Log Rocket will allow you to replay sort of the thing that led up to that. And having that insight, we've said this a million times on the show having the insight to how it broke in what was going on what browser what even like things like Redux state or whatever what was going on, at the time of the error is going to just give you like a perfect picture as to what went down and how you can write the code to actually fix that and make it not happen again. - -12 -00:08:40,949 --> 00:09:24,570 -Scott Tolinski: Yeah, especially because we don't use these kind of tools, right? When you don't have an exception or error tracking or logging system set up in your site, you're sort of relying on either seeing it happen yourself or having a user report an issue. And I wonder how many users will have an issue before somebody actually reports it. Right? That could be like a week of an issue existing on your thing. And then maybe people are just you know, it's not their job to tell you that your things breaking. So, you know, maybe maybe they're noticing it for all this time. And you need to have that visibility so that you can fix that code and write that code better before somebody you know, let you know that it's broken, because at that point, it's probably too late. - -13 -00:09:24,720 --> 00:10:15,630 -Wes Bos: I think also on the flip side of that is sometimes people email me and say this thing is broken. And I'll put 1520 minutes into it trying to track down like what is going on that this person has sees this weird thing or it's not working properly for them. And then you get an email Oh, sorry, I had this turned off or I was on a company VPN that was blocking. Vimeo or I had this like Chrome extension overreached and was breaking the site. And often I'm like, I should have just looked it up and saw like, is anyone else really having this problem because Even if like three or four other people were having this problem, then it would be worth my time to look into it. But if it's just one person, there's always that possibility that it's just their specific use case, or their specific browser setup or something weird with their setup where they've actually gone ahead and broken your website. - -14 -00:10:15,959 --> 00:10:49,830 -Scott Tolinski: Yeah. And again, you can't fix things that you don't know are happening, right? So that's like, might not know your code is crappy or broken. And these tools let you know where it's broken. I think that's like the common thread amongst all of these things, right? Yeah, with everything we talked about linting, hinting prettier, TypeScript, just, and it's exception error tracking, all it is, is letting you know when your stuff is broken. And the more things that you can have that let you know, when your code is broken, the better because then you're not going to have broken code. Awesome. - -15 -00:10:49,860 --> 00:11:06,990 -Wes Bos: So those are the three other pieces of code quality tooling that you can put in place, all of these tools do have a little bit of investment in order for you to set them up and get them working properly. But these are the ones that we think are probably worth your time looking into even just a couple of them if you want to get them up and running. - -16 -00:11:07,020 --> 00:12:01,140 -Scott Tolinski: Yeah, and some of them are definitely more of a commitment, right. Like TypeScript is a commitment. Yeah, it's a big commitment. Dad, we're like throwing something like Log Rocket or Sentry is like a couple lines of code connecting to a service. That one's easy. writing tests with just adds a bit of a commitment as well. But definitely one you should be taking, setting up your linter or setting up your prettier that is like not a commitment. That's like a five second drop. In fact, I was just I was, it's funny, because I think about this, like how many people don't use some of this stuff that is so dang easy to set up, especially linting and prettier, because the ES lint and prettier. Having that in your code base takes no time at all for the amount of benefits that you get out of it. And, you know, there's probably no excuse to not be using this stuff at this point, just for the sheer amount of time it's going to save whenever you run into something. Yeah, I - -17 -00:12:01,140 --> 00:12:04,140 -Wes Bos: totally agree. It's a no brainer to turn that those ones on. - -18 -00:12:04,350 --> 00:12:13,800 -Scott Tolinski: Yeah, no brainer. Get it done. If you're not getting it done, and you won't have to make memes about it on Instagram. Or maybe you still will just say you can get a bunch a bunch of clicks. - -19 -00:12:14,459 --> 00:12:21,450 -Wes Bos: Awesome. All right. I think that's it. Anything else to add? That was a pretty hasty, hasty treat that we had today. That was a hasty tree. Yeah, no, that - -20 -00:12:21,450 --> 00:12:48,090 -Scott Tolinski: was a very hasty treat. No, I don't have a whole lot to add. If anyone else has any tools, or even categories of tools for quality code that we haven't mentioned here, please let us know. I guess the one thing we didn't talk about was continuous integration or, or those kind of pipelines but those really just end up using all of the things we've mentioned here before you deploy, right. Yeah, but that's pretty much it. No, I don't have anything extra. This was a nice little hasty treat. - -21 -00:12:48,270 --> 00:12:58,890 -Wes Bos: Yeah, you're welcome. You're Enjoy the rest of your day today that you don't have to listen to us. Alright, we'll catch you on Wednesday. Thanks for tuning in. Please, please. - -22 -00:13:00,720 --> 00:13:04,500 -Unknown: Head on over to syntax.fm for a full archive of all of - -23 -00:13:04,500 --> 00:13:10,500 -our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax116.srt b/transcripts/Syntax116.srt deleted file mode 100644 index caf8c30de..000000000 --- a/transcripts/Syntax116.srt +++ /dev/null @@ -1,352 +0,0 @@ -1 -00:00:01,319 --> 00:00:06,120 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. - -2 -00:00:06,149 --> 00:00:09,600 -strap yourself in and get ready to live ski and West - -3 -00:00:09,600 --> 00:00:10,560 -boss. - -4 -00:00:10,589 --> 00:00:20,429 -Wes Bos: Welcome to syntax. My name is Wes Bos. I'm a full stack JavaScript developer with me as always is Scott to Lynskey. Hey, Scott, - -5 -00:00:20,609 --> 00:00:43,680 -Scott Tolinski: no good. I'm back for my first vacation and who knows how long I don't know. When the last time I've had a legit vacation. And so I when I went up to Winter Park, I got them from three days of shredding in, we had some fresh pow pow on every single day. So I am feeling nice, and I'm feeling nice and sore, but I'm feeling majorly mentally refreshed and ready. - -6 -00:00:43,859 --> 00:01:03,720 -Wes Bos: Yeah, man, the pictures you post it so fresh Sasha whatever, Scott that is snowboarding. The pictures he posted are unreal. Like I've only been snowboarding once and I like blacked out because I failed so hard. And I've got a bit staying away from it since then. But the pictures with the mountains in the background looked amazing. - -7 -00:01:03,750 --> 00:01:13,110 -Scott Tolinski: Yeah. And that's how far that's like an hour and a half from our house. Just pop on over there for a little bit and hit up some mountains. It was it was an awesome weekend. Perfect weekend to go - -8 -00:01:13,700 --> 00:01:54,990 -Wes Bos: check it out. So today we are doing a potluck. We're gonna be talking about all kinds of different questions that you've sent in things from, do you separate your back end and front end to separate GitHub repos, default export export versus named export changing careers are we got all kinds of really good, good, juicy treats for you here today. Today's episode is sponsored by Sanity, which is a boice. Bring Your Own front end, they are a hosted back end service that has some pretty cool features and a podcast called the tech meme ride home, which does a daily podcast, it keeps you up to date on the tech industry. So let's jump on into it. You want to start us off with the first question there, Scott. Yeah, so - -9 -00:01:54,990 --> 00:03:17,400 -Scott Tolinski: the first question is from Matt, gee, do you prefer to have your back end and front end in separate Git repos? Or together? What are the trade offs? Okay, so mine are together, but it's largely due because I use Meteor which likes to combine them. And I found there to be quite a bit of benefits for me personally, is that one command builds everything for me. So I just do NPM start, it runs the meteor command, Meteor starts my API and builds my front end. And it just gets everything going for me. So I have one command that gets the whole project up and running, I don't have to separate out my API for my front end, right. It's all one thing. Another thing I love about keeping them in the same repo, and the same everything is that I can use the same tooling. So I use the same Babel configs, same prettier, configs, all that same stuff. And I only have one file for it both back end and front end. And therefore I like never even think about that stuff. So the code style on the API for me is the exact same as the code style. And the front end, in terms of not, I don't have to use the require syntax or any of that stuff. So I like this more unified feel for things. Now, that said, I tried to set the same kind of setup up using Webpack. Once and I wanted to pull my hair out, it was very frustrating. So I think it was a product of just how easy Meteor makes that this sort of combination of back end and front end. That makes it really nice for me. - -10 -00:03:17,670 --> 00:04:02,190 -Wes Bos: Yeah, I also use there's just a term that people use is called a mono repo. And a mono repo is that you have one repository for your entire software platform. And we're we're approaching at a very simplistic level where you have a front end and back end. Whereas like companies like Google and Facebook or whatnot, they have like probably thousands of different services, each which have their own dependencies, each have their own often config files inside of them. However, they keep it in one big repo. And Google is famous for this, where if you want to make a change to Google, like the entire company, it's apparently just one huge repository. I've heard of these companies having to take things like Git and miracle and how do you say that miracle - -11 -00:04:02,250 --> 00:04:03,780 -Scott Tolinski: miracle real material - -12 -00:04:03,810 --> 00:04:05,630 -Wes Bos: carrier, I always goofed that up. - -13 -00:04:05,759 --> 00:04:06,960 -Scott Tolinski: I don't know if that's right, either. So - -14 -00:04:07,319 --> 00:05:05,130 -Wes Bos: they literally have to, like fork it because their code bases, gigs, and gigs and gigs of history in order just to folk to fork that thing. So it's kind of interesting. I like to use a mono repo myself. There's lots of tooling out there, if you have many, many, many, something like Babel, which has thousands of plugins and uses a mono repo often to keep multiple plugins inside of a simple single get single GitHub repo, but I just have a front end and a back end, I like to keep it all in one, my history stays there, I can have one set of config files, I can often put a like a very light layer of like a start command, which will go into both of those folders and start them on up and whatever it is that they need to do. So I don't have to have two different tabs open in my node course we use something called concurrently, which will run both the web pack as well as the node server to run it. So it's kind of cool. I prefer that Obviously there's upsides and downsides to to each of them. But I prefer the mono repo approach. - -15 -00:05:05,130 --> 00:05:25,290 -Scott Tolinski: Yeah. Yeah, I think it's a cool thing. So next question here is from john mayer, that is probably not your real name. But if it is, cool. The question is in web in web dev, what's the difference between a freelancer and an independent contractor? - -16 -00:05:25,560 --> 00:05:26,820 -Wes Bos: Its price? Yeah, - -17 -00:05:26,850 --> 00:06:28,980 -Scott Tolinski: I mean, yeah. And the answer is, it's really not not a whole lot. Really, I mean, it, they can mostly be referred to the same thing as a freelancer, you could just call yourself an independent contractor. At the end of the day, that's like, legally, what you are, you're getting paid independently as a contractor. But I think the way that it's most commonly used to talk about somebody who is either working for themselves with many clients, or they're working for a larger company, for instance, when I worked for the Fords advertising agency, team, Detroit, I was an independent contractor for them, I was paid as a contractor, they did not take out taxes for my paycheck, I had to be responsible for my taxes and stuff like that. I was paid as a contractor, although I was under a two year contract and had a essentially a salary or an hourly wage with them. So I didn't take on additional clients, that was my only bit of work. I was expected to be in the office and expected to be working for them, you know, eight hours a day. - -18 -00:06:29,100 --> 00:07:24,930 -Wes Bos: Yeah, that's certainly how I see it, as well as that a consultant will often take on large projects for a single company at a time, this is not always true. as a freelancer, it seems more of the add on, I feel like it comes more from like the design artistic point of view, where you might have a couple different clients. But at the end of the day, there is no difference between Freelancer contractor or consultant in Canada, they're starting to crack down on companies who hire these full time contractors, like there's been people who worked for a company for four years, as a contractor, I'm doing air quotes here, and the government comes back and says, No, that's called an employee, and you have to pay taxes on that employee, and you have to give them health benefits. And, and all of that kind of stuff is, a lot of times people will hire contractors, and just skirt around having to deal with the headache of HR and taxes and payroll and stuff like that. And just say you deal with it yourself - -19 -00:07:25,080 --> 00:07:45,300 -Scott Tolinski: now, and sometimes you there's agencies, the recruiting agencies that will actually pay you a salary and handle your benefits, and handle all of that stuff. And you're still contracted through the parent company, but you're a full time employee of this recruiting agency, if that makes any sense. Yeah, - -20 -00:07:45,330 --> 00:08:20,730 -Wes Bos: yeah. And I've certainly done as well, like lots of my clients in the past have just sent me up an email address at their company COMM And you have everything that the employees have, except for, you generally get paid a little bit more, because you there's the possibility that when things get slow, you're cut right through it, and they don't have to pay your severance or anything like that. So it's a little bit more risky for me going in there. Because I know as soon as they don't need me, they can stop paying me. And they don't have to pay me anything at the end of the day. But because of that you get you demand a much higher amount per hour per per contract. - -21 -00:08:20,760 --> 00:08:35,580 -Scott Tolinski: Yeah, my biggest salaries have all been contract. And, and sometimes it's the thing, you can look at your options and say, well, it's a hot market, I'm going to be able to have a job in two years via my skills. So therefore, maybe it's it's worth it to take this sort of opportunity. - -22 -00:08:35,580 --> 00:08:48,960 -Wes Bos: Yeah, yeah. at the same point, if you're looking at doing that you should also way like you have to say for your own retirement, a lot of employers do I think in the in the states is called a 401. k, is that what your retirement savings is called? - -23 -00:08:48,990 --> 00:08:50,760 -Scott Tolinski: It is called a 401. k, - -24 -00:08:50,820 --> 00:09:18,390 -Wes Bos: there you go. So in Canada, it's called the RSP, a Registered Retirement Savings Plan. And it's the same thing where a lot of companies will match a certain amount or however much you put into your own they'll match or pay like 30% as much as you pay. That's huge. Because it's like getting a no like Google does this, you can get an extra 20 3050 hundred thousand dollars a year just into your retirement savings. Because the company is matching it for you. - -25 -00:09:18,480 --> 00:09:20,490 -Scott Tolinski: Yeah, definitely, definitely something to think about. - -26 -00:09:20,760 --> 00:11:09,779 -Wes Bos: Oh, and parental leave, that's a that's a huge one as well. That's one thing you don't get as a contractor as well. So it's important to think about that as well. If you want to take some time off or you have to take some time off when you have kids. It's important to think about that, because then you don't have anyone that's willing to pay or match for you and use those pennies. pennies. That's great. All right, next question. We have Thank you, john mayer, that was good. Next question is from Jay low. I think we've answered this before, but it's a hot topic. So we'll go over it again. Default export versus named export. This is with a JavaScript module. You can export one thing as a default export and as many As you want as named exports, the differences is that when you import something that has been exported as a default, you can name it whatever you want. So you could export default, Wes. And then you could import it as cool guy or dude or anything you want, right. Whereas named exports, you have to know the name of the thing that has it was exported from the file. So sometimes that requires a little bit of tooling to scan the file and figure out what that is. Sometimes that's much better, though, because the tooling will scan the file for you. And it will automatically suggest what your imports should be. So there's camps on either side of it saying that you should only use named exports. There's other people saying like default, exports are handy, because you don't have to know what it's called. I'm of the opinion of just use default exports for the main thing that that file exports, like, if it's a react component, I'll just export the React component from there. And if there's other things like multiple functions, multiple libraries, multiple helpers, I export those as named and I've never had an issue. I've run into that, but I certainly see both sides of it. - -27 -00:11:09,960 --> 00:12:55,649 -Scott Tolinski: Yeah, I pretty much everything for me is the default export. Unless it's like, you know, my styled components, utilities, like you said, more than one thing in a particular file, by file with several function, they're all going to be named exports. And actually, it'd be really helpful for testing, right, just export everything, as the named export, you can import whatever, test it up, get all that good and going. Cool. So uh, yeah, let's get into the next one here, which is from Johnny sins, Johnny sins is asking, I'm looking to change careers. But I'm 41 this year. Is it too late? No, I don't know. I don't think it's ever too late. I mean, this stuff, all it takes is dedication and practice to get an age shouldn't matter. All that should matter is like what you're able to create as a developer and the stuff you're able to do and produce. I interviewed for a job in Tokyo once. And the guy who interviewed me gave me this like really great story, because they were basically turning me down from the job. And they turned me down from the job because I couldn't speak Japanese not because I couldn't dev it was it was it was actually a flash dev job, which is going to be interesting. But he was so interesting. He was maybe 50 something and he was like, You know what, I don't want you to get discouraged, because like, this was a good interview. And he's like, when I was 45, I was mowing lawns for a living. Like, I was the landscaper. And I just decided I wanted to do development, I wanted to do all this stuff. And like now he's the boss of a major agency. He's like, well, I just decided I was gonna go for it. And he went for it. And you you can make these changes that anytime you can do this stuff, all that matters, is if you have the skills to pay the bills, you know what I mean? You just have to get that practice and work hard. And you can do it. - -28 -00:12:55,799 --> 00:14:02,429 -Wes Bos: Yeah, I don't think that 41 is is too late as well, this stuff moves so quickly, that the beauty of it is that if you jump into the stream, and you sort of hit your wagon to whatever is moving quickly, whether that's react or view or whatever framework comes out in the next couple of years, then you can get up to speed and you can become an expert at that thing fairly quickly. I also think that, like I look back to when I started when I was really young. It took it took me so long, because I didn't have any of the soft skills that are also important that many older people often do have time management, communication, problem solving, just like a general attitude towards being able to approach problems that we have in software development. I had to like learn all of those things very slowly through some painful experiences before I could could actually get into it. And I feel like I've even talked to people who run agencies and they say, we prefer to hire older developers, just because they just lived a lot of life. And they they are much more able to to handle any problems that come their - -29 -00:14:02,429 --> 00:14:24,779 -Scott Tolinski: way. Yeah, definitely. And some problems that you might have, if you are working on front end code you might be running into where the heck do I store my data? Because that's definitely a problem that is sort of in the modern, headless space that we live in. And well, one of the coolest solutions that that we really love over here at the podcast is Sanity over at Sanity dot i O - -30 -00:14:25,199 --> 00:16:09,000 -Wes Bos: yeah, so Sanity calls themselves structured content dunrite. We call them a Boyce, which is bring your own front end. And the idea behind this is that you love that acronym, you sign up for sanity.io. And you automatically get this back end where you can start to structure out your content. So you can create all of your data types, you can create all the fields that are inside of those data types. You can create relationships between those data types, you can create different types of inputs for those data types. You can also upload your own react components. If you have a specific type of input. Maybe You You want to have a special type of media uploader that is specific to your business, you can just create your own input, which is kind of cool because like it really bridges this like self hosted versus totally custom, you can kind of do both with this. And then the idea is that you you come at it with anything, react, angular Gatsby, any any front end service that you want to do, and you consume their query API and just pull in all the data, you let them take care of all of the security, all of the doing real time, all of the scaling up and down, if this thing just blows up, because it's on front page of Hacker News, no problem there. So if you are looking to build a website, web app, anything where you need a back end, someone can log in and manage all the data, you take care of the front end, building it out, check out sanity@sanity.io forward slash syntax. And if you use the sanity.io forward slash syntax, they're gonna double what you get on the free plan. You can sign up still zero dollars, no credit card required, and you can start trying it out today. So thanks so much just entity for sponsoring - -31 -00:16:09,270 --> 00:16:10,470 -Unknown: ice. Cool. - -32 -00:16:10,500 --> 00:16:11,010 -Yeah, - -33 -00:16:11,070 --> 00:17:46,820 -Scott Tolinski: yeah. All right. Next one, from Ken, from Maryland, as from from Maryland is not his last name. That's probably where he's from. The question is, have you guys made much use of multi column layout? If so, only for text or have you come up with any interesting out of the box uses, it seems like something you could do a lot with, but I haven't seen used very often. Now, for those of you who don't know, there's a CSS property that allows you to specify columns. And this was pre CSS Grid. This was pre Flexbox is one of the things that came in, I believe in like the CSS three era of stuff. And one of the cooler things that it allows you to do is sort of newspaper style layouts where the text automatically flows from one column to the next. It's different from something like CSS Grid, in that you don't have your items individually in in different columns, your your items flow from one column to the next, aka, if you're resizing the browser, and the height of the container is staying the same and the width is changing, the text is going to go and snake on to the next line. Now I've actually used this to do a Pinterest style layout. But it only works if you have like a select amount of items, right? You have 10 items or something. And you could tell it all right, just filter into three columns. And it'll create the Pinterest esque style I that's not anywhere near like the exact same because but the actual content order doesn't exactly fall in line correctly with the DOM. But no, I have used it in the past for just multi column text. But really, that's it and I haven't been using it since Flexbox. And grid really came on the scene. - -34 -00:17:46,950 --> 00:19:58,200 -Wes Bos: Yeah, I think CSS columns is often underlooked. I think it's like the it's it's a buddy that goes along with Flexbox and grid, and they're not competitors. So it's very perfect for text that needs to be in multiple columns, it will take care of wrapping, there's a bunch of break before and break after properties you can use in CSS, so that if you if you want like an image to always break on to the next column or break before, that's great. If you want that Pinterest layout, this is currently the only way you can kind of do it. You can do with CSS Grid, if you have a you can do with Flexbox. Sorry, if you have a fixed height, but that's almost never the case. CSS Grid is not made for Pinterest style layout. And the the downside to CSS columns is that the layout of the items goes top to bottom. So it let's picture we have nine items in three columns. It will do first column 123, second column 456, and third column 67789. And how do you count I'm trying to picture this now. And the downside of that is most people want item one, column one, item two, column two, item three, column three. And then to start again, item four, column one. And I actually asked Rachel Andrew, who is who worked on the CSS Grid spec, and knows everything about CSS. I'm like, how do you do Pinterest style layout in CSS Grid. And she says that's not what it's for. That's what CSS columns are for. It would be really neat to have something like a column direction property in CSS, where you can decide how the layout very much like Flexbox and grid have columns versus rows, you should be able to control how you add items to these different columns currently not possible. You can do it with a little bit of math, if you know how many items you have. And you know how many columns you have, you can sort your array in such a way that the items are added in that specific orders. But you still have to know the height yourself to know the height of your elements. And it's it's a pain in the butt. So yeah, it's cool. I think it's super underused, and I would check it out. If you've never used it before. It's very well supported. It's been - -35 -00:19:58,440 --> 00:19:59,790 -Scott Tolinski: it's been in a while now. Yeah. - -36 -00:20:00,000 --> 00:20:09,150 -Wes Bos: Yeah, let's let's go to Can I use real quick been in since iE 10. And everywhere else has had it forever. So yeah, it's been around for years now. - -37 -00:20:09,150 --> 00:20:09,690 -Scott Tolinski: Cool. - -38 -00:20:09,720 --> 00:23:07,440 -Wes Bos: Next question we have here is from Alex long, long, he says no problem for mispronouncing my last name. Thank you, Alex. Hi, Weston. Scott, I have a question for you. I have a question for Wes. And I guess God as well, because I asked him this before we started, as you publish your courses, source code on GitHub? What do you think about people who use that to learn instead of buying your courses? Is it an intentional decision? Or is it the compromise you're willing to make? Just wondering, thanks so much for the podcast. So what this is asking is that all of the code for all of my courses paid and free. I put it up on GitHub. And when I'm building the course, I also put it up on GitHub. And a lot of people ask me like, well, aren't you sort of like given throwing the baby out with the bathwater? Are you giving it away your secret sauce for free? And I think No, I think that if you can learn everything that it is to learn in one of my courses, without having to watch the course, just by looking at the code that I put to GitHub, then you are a fantastic developer, and you don't need my courses in that regard. So I've never worried about that there certainly are lots of people who read through the code, or just need to like figure out how I did a specific piece of authentication or, or rolled the JW T, and they just jump into it, like, Oh, I know what's covered this. And of course, I didn't buy it, but I'm just gonna get to pull it out of there. And I'm happy when people do that. Because, like, I think that's the whole idea behind this amazing community is that you can open source, like, I don't have a lot of libraries to open source. But I do have tons and tons of example content, which is helpful for people to learn, and to pull out and put into their own application. I'm happy when people do that. So that's fine. And then I also get huge benefit out of having it on GitHub open for free, because it's often referenced, the code is often pulled and put into other projects and reference back many people that the code so before they buy it, they're like this is West guy even know what he's talking about. Answer is probably not. But I'm gonna go on GitHub and read through the code just to make sure often, like a more senior developer on the team will vet the course first. And part of that will be them reading through the code that is in the finished folders and making sure that it is of quality that they would like to see implemented in their own company. So that that's really important as well. Also just little bugs, sometimes I will spell something wrong. Or sometimes I will have like a tiny little error in the code. And having someone who's in the headspace taking the course and realizes the bug, having them send a quick pull request to fix it, where it doesn't ripple through and break the rest of the course is so easy. And I really appreciate that. And then also it just goes like trending like I've got lots of stars and stuff on my courses. So often what will happen is when I launch a course, it will go into like trending GitHub repos. And that's free advertising for all of my courses. So very intentional that I opened it up. And then I asked Scott about this as well, do you do this? Sometimes I don't usually - -39 -00:23:07,590 --> 00:23:20,070 -Scott Tolinski: get Bernie necessarily reason other than that's just how I haven't been doing it. That's something that I would explore. If I get a bunch of messages after this that says, a one year code on GitHub, then, no worries, I'll put it up on GitHub. - -40 -00:23:20,310 --> 00:23:43,410 -Wes Bos: Yeah, I also like being able to, like people often ask me like, hey, Wes, how do you handle errors with the async await. And I'll always link to that example, in my Express node course of error handling, it's just nice to be able to have everything open and be able to just link to it and show people. This is how I've done it. So we're interesting question. Next one, I'm gonna let you try to do the Oh, yeah, - -41 -00:23:43,440 --> 00:25:16,200 -Scott Tolinski: I wrote down this pronunciation. But this, this user did not send a pronunciation. This is my own attempt at this. So if this is wrong, please let me know this is from accent to alexandrou. I think I think I did that pretty good. If that is correct, at least, this question is, when is a certification needed for both jobs and side projects? Um, my answer is never. I don't think unless you're you the job that you're applying for specifically says in the job description that you need a certification, I have never had a certification in anything other than setting up skiing bindings. That was when I was 16. I installed ski bindings and I needed a certification. Now I in web development, I've never had any certifications. I've never taken any tests. I've never paid to take a test, which is really sort of the angle. If somebody says, Well, you got to pay $200 to take this test and become Magento certified. I would go ahead and say that's probably a big waste of money. Because usually the this is the second time I'm saying this in this episode. If the proof is in the pudding here, like if you can have those skills to do the work, then I don't think anybody is going to be like, Well, what about that $200 certification. You didn't Pay to take. So I don't think certifications are a big deal. And I would almost say don't do them unless it is explicitly required. And if it is explicitly required, so you can get the company that makes you doing it, pay for it, right? Say, Hey, pay for this thing, and I'll do it, I'll get certified. - -42 -00:25:16,440 --> 00:26:32,640 -Wes Bos: Yeah, the certification is such a weird thing. And you see a lot of companies coming out with like degrees and certifications in specific web tech. And I think it's because you need to appeal to other industries that are on there. Because I often get asked if I can make a certification for LinkedIn, because people want to flex on LinkedIn with their node course or something like that, or I have a certificate of completion. And just because people need those from their company, like in their reimbursement strategy, it says, If you pay for a course, you must complete it and show that you have successfully done it with a certification. Like it's just part of the getting so I have to create this like cheesy little certification, which is funny because a lot of people print them out and put them in frames and put them on their wall. Like they're like it's like an MBA or something. Oh, yeah. And that's really weird. Because like, we all know, listening to this, that it doesn't, it doesn't really mean anything to you, but it means a lot to people who are potentially hiring you. So I would say don't ever pay for one. But a lot of places like myself that that give the course they will give you some piece of paper just because of these reasons. Yeah, we have certifications as a pull request in the level of touch right now. - -43 -00:26:32,640 --> 00:26:35,910 -Scott Tolinski: I just haven't I haven't attached it correctly. So I haven't - -44 -00:26:35,910 --> 00:26:37,470 -Wes Bos: haven't merged it in. I haven't - -45 -00:26:37,470 --> 00:26:41,190 -Scott Tolinski: merged it and for good reason. But they're coming for that as well. Yeah, - -46 -00:26:41,220 --> 00:27:14,970 -Wes Bos: yeah. I think as myself as a web developer, I know I would never go and get a certification in it. Because like, Why? Because I've taken web development courses at school. Like I took two or three and there were a joke. They weren't and I know, as as like if I was hiring someone, and they said like, I have a certification in VS code. And I'd be like, Oh, yeah, right. Like, come on. That's what that probably means. That means nothing to me as a hiring. What I want to see is proof in the pudding. What did you make? How good are you at being able to build something with with web technologies? Yeah. And - -47 -00:27:14,970 --> 00:27:27,870 -Scott Tolinski: I also have pretty sure my wife who has an actual PhD, if I were to have a certification on the wall or something, I'm pretty sure she would just be like, come on my show. Yeah, I actually worked hard for this. And you took a you paid to take a test though. - -48 -00:27:29,190 --> 00:28:25,980 -Wes Bos: There's also like, there's just like Google Developer experts, which people on Twitter, I often get misled that people work for Google and their Twitter bio, because they're like I work for at Google Developer expert, or I'm at Google Developer expert. And I know, I'm not sure what a Google Developer expert is. But I know that a lot of people have it. I'm just on the website here. It doesn't, it's kind of flaky as to what you actually you get acknowledgement by Google invitation to our yearly experts summit, huh. access to Google teams, invitations to exclusive projects with Google access to global network of professionals, and invitations to event that seems that sounds like the same two things, said four or five times. I don't know I might be trashing this and actually is extremely valuable for your career. If you are a Google Developer expert, tweet us at syntax FM, tell us besides being able to put at Google in your Twitter bio, what benefit do you get from this? - -49 -00:28:26,009 --> 00:28:36,720 -Scott Tolinski: Yeah, I'm interested. One way that you can stay up to date and current rather than having to do certifications is to listen to the technium. ride home podcast. - -50 -00:28:36,779 --> 00:29:31,680 -Wes Bos: Yes. So tech meme is a podcast sponsoring our podcast. So what they are is a daily 15 to 20 minute long podcast Monday through Friday at 5pm. Eastern, they run through what's going on in the tech industry. So everything from hardware to software as a service to Facebook and Google and whatever's going on in our tech industry. And it's kind of cool, because you could just throw this thing on, listen to it for 1015 to 20 minutes, or seven and a half to 10 minutes. You've listened to it at two x every single day and sort of keep up with with what's going on. You don't have to read a whole bunch of blogs, you don't have to be on Twitter for four or five hours a day. You can get up and running. So it's called the tech meme ride home. If you just go to your podcast app, overcast, iTunes, whatever it is, you're using search for ride home and subscribe to it. You can also they have an entire publication at Tech meme.com. You can also read that as well. So thanks so much to tech meme for sponsoring. - -51 -00:29:31,830 --> 00:30:47,790 -Scott Tolinski: Yeah, super cool. All right, cool. Let's get into this next one. How do you deal with spammers filling out forms? This is from Alex went and Thank you Alex, because I would have pronounced your last name. When did D when did t there's a lot of extra letters in here. So thank you, Alex. Yeah, so there's there's several options for this kind of strategy. And sometimes if you're working in like a CMS, like if you're working in WordPress or Drupal, sometimes their contact form things are just going to do all these for you. So you don't even have to think about it. But one of the most common ones is what's called a honeypot field, derive from the, you know, got your hand in the honeypot sort of thing, sort of a situation where they set up a situation that is like designed to fail for the wrong type of person. So if you haven't hidden input field, that is the known as a honeypot, the chances are the user will not see this input, but the robot will see the input and fill it in. And then you can say, hey, if this input is filled in, then therefore, the thing that's trying to submit this is, in fact, a robot. And I should not allow this to go in. Because again, if the input is hidden, there's not a whole ton of ways for people to go ahead and find that input other than diving into the DOM and enabling it themselves. So that's definitely one way to do it. - -52 -00:30:48,000 --> 00:30:59,160 -Wes Bos: Yeah, that's I think that's the very basic I don't even know if that works all that well anymore. Because like, you could if you're a spammer just spin up a, like a phantom j. s, or Google headless, good ideas, - -53 -00:30:59,190 --> 00:31:02,250 -Scott Tolinski: man, you're and you're, you're, you're leaking the source. - -54 -00:31:02,580 --> 00:32:51,210 -Wes Bos: Yeah, there are some podcasts I was listening to where they're talking about how like the bad guys have just as many smart people working for them as the guys. And it's just this constant battle between the brains trying to fight each other. So I don't know if that hidden form field really works all that much anymore. So what you have to do pass that as like, the next step, is asking a secret question, what is two plus eight? And you'd be able to only a human? Or is water wet? Yes or no? That's fairly simple. But again, with machine learning, people are being able to answer those, or if it's a huge operation, you can easily farm those questions out to what's the Amazon Mechanical Turk, you can easily get those answered for a cent or two, by someone who is just like running through all these. So that's an option as well, if that's still being defeated, I talked to somebody at a conference recently who ran a like an email forum software as a service. And he said, like 98% of all of the submissions are spam. And they have hundreds of thousands of clients. So they just get millions and millions a day of the spam submissions. So it's like almost entirely everything that comes through as spam. So if that's the case, you have to reach for the big guns. And the kind of the two big ones that most people rely on is first CloudFlare will detect bots. So if someone's hitting your website repetitively, or if they are sneakily coming from known IP addresses, CloudFlare will just block them and shut them down. Or, and then the big one is reCAPTCHA, which is the Google, you just have to type in that terrible like our add, and then it wouldn't work. And then it wouldn't work and it wouldn't work. And it's the most frustrating thing ever filling up those recaptures. I hate it's gotten significantly better in the last like two years year, - -55 -00:32:51,330 --> 00:33:10,080 -Scott Tolinski: sometimes. Sometimes it got significantly worse. Yeah. Again, so I get a lot of those for even like, oh, googling, it'll be like, all your IP is got weird behavior and like, Okay, well, it's not my I mean, it's a VPN. But to then you have to click the ones that are like, click all the ones with the stop sign. And then you - -56 -00:33:10,710 --> 00:33:16,140 -Unknown: have the stops. You know, they're like self driving car, dirty work. And they never work. They never work. - -57 -00:33:16,140 --> 00:33:19,110 -Scott Tolinski: Like find all the cars found them. No, you didn't. All right, do it again, - -58 -00:33:19,110 --> 00:33:20,100 -Wes Bos: find some more cars, - -59 -00:33:20,280 --> 00:33:22,710 -Unknown: and a stop sign. Oh, my God, it drives me nuts. - -60 -00:33:24,330 --> 00:34:03,570 -Wes Bos: So that's probably your best way. I don't run a VPN very often. And that's that button. I am not a robot. That's Google's reCAPTCHA. And if it detects that you are likely a bot via some underground magic, it will throw up one of those, show me where the cars are or answer these questions are click all the cats. And it will it'll send you through a few of those. So that's how you have to do it. Unfortunately, like the good old days used to be able to just fire up a PHP script and send an email those days are done just because of spam. You absolutely have to use some sort of form field validation or CAPTCHA on there. Yeah, - -61 -00:34:03,630 --> 00:35:52,170 -Scott Tolinski: word. Cool. So the next one is from page neigbouring. house. And thank you page, it also gave us really good pronunciation. That wasn't the one that I would have also had trouble with. So thank you page. This question is Hey, Wes and Scott, love your podcast. Well, thank you page. I was wondering if you could better explain what a slug is. I've heard the term thrown around a number of episodes, and I don't really know what it means. Thanks. Okay, slug. slug is a concept that is derived for SEO purposes and being able to easily access content via the URL. So I don't know if you you have used WordPress or Drupal, but a lot of times in these systems, you know, they give you a really basic URL that's like the ID of the post. So let's say you have a post like a blog post, it could be like forward slash post, forward slash 123. Right. That's the ID. And then in that ID is then used in the database to look up the post content and generate the actual page right? Well, a slug is a basically, and a, an indicator that can be in the URL that is attached to the post. And it's typically something that you want to be URL friendly. The most common way to do a slug is to do a lowercase hyphenated version of the page title. That way, instead of a Ford slash post Ford slash ID, your URL ends up being Ford slash posts forward slash Hello hyphen world. Again, it's better for SEO, the search bot can read that those keywords end up being searchable, it also is way easier for your users to type in if they're typing in something. Rather than throwing in an ID, it's going to be the page title, the post title, whatever. So a slug is basically something that's derived from the title. And you can have these generated, I actually saved my slugs in the database, do you save save yours in the database when you use them? - -62 -00:35:52,190 --> 00:36:19,500 -Wes Bos: Yeah, you can't like so if someone's visiting your website via a slug, you need that slug needs to be unique enough, or it has to be unique, so that it can just look that up in the database. And if you don't have the slug saved in your database, there's going to be no way for you to find that post. Because the slug is not attached to it in the database, you can't run like a show me posts that would the title would look like this, if it were slugged and then you all you - -63 -00:36:19,500 --> 00:36:23,130 -Unknown: could, it would just might not be it would be really, really slow. Yeah, - -64 -00:36:23,130 --> 00:36:28,530 -Wes Bos: because you would have to run a conversion on your entire database, keep that in memory and then find it. - -65 -00:36:28,730 --> 00:36:32,960 -Scott Tolinski: So and and it's indexable. If it's in your database, or actually - -66 -00:36:33,000 --> 00:40:21,170 -Wes Bos: I that's I listened to the code pen podcast once and they said that they had perfect issues, where they were looking at people by the email address they signed up with, which will sometimes have capitals in it, and then the email address that they have on file, and if they were looking up, the email address was someone's capitals, then they would have to convert the entire database to lowercase first. So they ended up just saving two versions of the email address the one they signed up with and the lowercase version. Yeah, and that sped it up quite a bit. So I guess that it is possible, but I always save them in the in the database. If we go that way, when we're talking about react with slugs as well, because it's forward slash posts forward slash hello world, you'll often need something server side that will take those URLs and not just like what's happening on most servers, this is looking for a folder called post and inside of that a folder called hello world. That's actually how a lot of static site generators work as well. And you need something like Apache config or nginx config that will just point people to the index and run your react app and pick up the pick it up from there on out. So that's what a slug is. I think Scott did a awesome job at explaining it. Next question we have here from Chuck Reynolds, I'm going to I'm going through some currency conversion stuff for a project. What would you recommend to use for international conversions? And then how would you handle input string to number persistence, including currencies that are comma delimited. So the currency is one of the pains in web development, it sort of comes along with time zones, because there's this whole idea of, you've got different languages and different currencies, but the language of the browser is not necessarily correlated to what currency they're shopping in, because they might speak one language but live in a country that has a different currency. So that's frustrating, and then formatting it and dealing with the fact that in North America, we use decimals, we use decimals for like, half a number, what do you call that? I, for a fraction, int integer. For half an N, and other other countries the the opposite where it's the US commas for those. So it's frustrating. So I'll tackle that first bit, I used to use a API called fixer.io. And what fixer IO does is, it goes off to I think the World Bank or something like that, and scrapes the exchange rates. And then it gives you this nice clean API to interface with it, they recently went paid. So there was like a rate limit on it. But the thing about it is that it just scrapes free data. So there's a whole bunch of drop in replacements that are available for fixer.io. I'm using exchange rates api.io. But I think there's like four or five different alternatives that have popped up that are totally free. They asked you to cache the the values when when possible. So there's that you can you can use that to pull in the latest rates. Although if I was like running a business, I would probably scrape those directly myself, because I wouldn't, I wouldn't rely on some random dude on the internet who built this currency conversion API to not Screw you. And like if you're selling a car or something like that, they could just change the exchange rate. And then they could they would get you on that. Other things to think about is that if people are buying in different currencies like my courses are in us, but if like somebody buys it in Canadian, then some The the exchange rate is different, because the your credit card will put on an extra percent or two for currency conversion. So it's a bit of a pain. So for that reason, I never show the cost in local currencies. I just show what the cost is in USD and people can figure it out from there, although I've been considering showing it though, because some people have asked for that. - -67 -00:40:21,650 --> 00:40:28,260 -Scott Tolinski: Yeah, I don't do much of this. It's something I probably should be getting into more but no, I mean, I think you nailed it. - -68 -00:40:28,500 --> 00:41:37,560 -Wes Bos: Yeah. In terms of how do you show it, there's a really good API in the browser I MTL number format. And you can pass it both the language code and and set it to currency in which currency. So you set it to which currency you'd like to display it as, as well as like, Where in the world are they coming from. So it'll take both of those. And it will show the proper currency code, whether it's a yen, or euro or US dollars, and then it will, it will do the decimals and commas appropriately for whatever language that person is currently viewing it in. So that's really good. The API is fairly well supported. In node, it's a little bit weird, because it doesn't come along with all of it by default. So if you do need it on the server side for lots of different languages, and lots of different currencies, is some legwork that needs to be done in order to include all of those, I assumed that the dictionary for how to handle all of these different currencies and languages is fairly large. And probably for that reason, no doesn't bundle it by default. Although not not totally sure about that. - -69 -00:41:37,800 --> 00:41:48,840 -Scott Tolinski: internationalization is hard. I think we actually want to do an episode, we're going to try to maybe get an expert on or something like that. But the internationalization is certainly not easy. - -70 -00:41:49,020 --> 00:42:39,650 -Wes Bos: Yeah, I asked on, I asked on Twitter the other day, what are some problems with doing a language or a website or a web app in different languages, but also languages that read right to left, and also just things like like local, like, if you're running Airbnb, just things like somebody said, tipping I work for, like, just eat or something like that one of these like food delivery companies, tipping is different from from locale to locale, some people tip in Canada, we have to tip but in Europe, most people don't tip at all. And there's just all these different things that you have to take into account, which just increases the complexity. And German words are very, very long. And Chinese words are very, very short, different design trends from different country to country. So I'm in chats with somebody right now that we're going to bring on the show to sort of talk about that, because that's just something I've never had to do myself. Yeah. - -71 -00:42:39,810 --> 00:42:54,780 -Scott Tolinski: Yeah, I am. I have had some experience with this myself. And it is our system was elaborate, prone to breaking and exactly the most fun to work in, especially once you get right to left. So yeah, definitely some interesting stuff going on there. - -72 -00:42:54,920 --> 00:43:20,430 -Wes Bos: So that's all the questions we have here today. Thanks so much for everyone for submitting them. If you have a question you'd like us to cover on a future show, please go to syntax.fm. And there is a button in the top right hand corner says ask a potluck question. You can go ahead and submit a question however long or short, some of them are really long, and we will just turn them into entire episodes. So feel free to dump whatever you want into that button that you have there. Should we move into some sick pics? - -73 -00:43:20,430 --> 00:43:21,150 -Unknown: Yeah, - -74 -00:43:21,170 --> 00:44:18,390 -Scott Tolinski: I have a sick pic here. That's a little cheap little Amazon thing. I don't know about you. But I have a lot of devices and a whole bunch of different the torques screws and stuff like that. And I'm doing a lot of hard drive disassembly right now because over the years, you acquire so many hard drives. And it's like, I don't know if my Social Security's on them or whatever, I just want to open them up to take the discs out and destroy them, right. So I don't want my my personal information out there for that to be accessible. So I bought this really cheap little screwdriver set off of Amazon and is 23 bucks and includes basically every single device or anything that they're like really branding it as like, Oh, you want to repair computer devices, like get this kit. It's 65 bits. So every little bit you could possibly imagine a really nice screwdriver or a little miniature screwdriver, like a prying device so you can pry things open like phones or computers. - -75 -00:44:18,420 --> 00:44:38,310 -Wes Bos: Oh man. Yeah, by Can I interrupt you right now I'm going to tell everyone go and buy one of these plastic spudger tools right now. Because if you ever need to open any sort of electronics and you try to use a butter knife, you will butcher that thing and regret it. So just have it on hand for when you need to open something. I use mine all the time. - -76 -00:44:38,460 --> 00:44:59,040 -Scott Tolinski: Yeah, so this this kid is great. And I've already used it a whole bunch of different ways. I even needed I needed to fix Courtney's glasses the other day and the bit was there nice little tiny bit to fix some glasses. So you can't beat having a really flexible screwdriver set like this around again. It's got like 65 bits in it and it's 23 bucks. These things are really great. And I'm happy to have this around. I've been using it a ton - -77 -00:44:59,280 --> 00:46:56,130 -Wes Bos: awesome. I'm going to I've been finding some gems of YouTube channels lately. So I'm going to sit pick another one. And this one is called technology connections. And it's this guy who goes into a lot of vintage technology and explains how they worked. And I love it, because I just grew up with it and assume that it worked. But then he goes into, like, let me just go through a couple examples of my favorite video. So the first one I ever watched was led traffic lights, this is actually not vintage. But he said, there's a problem with LED traffic lights, because what happens is that they switched the regular traffic light bulbs, which were halogen and they burn out and it causes lots of people to have to take down the intersection, they got to get a lift up there, they got to replace the bulb. And if you put an LED bulb into a traffic light, it will last for like five or 10 years. And there's just everything is better about these LED, except that they didn't realize that when it snows, the old light bulbs got hot enough that it would melt the snow off. The new ones, they don't get hot enough. So they would these LED lights would just be covered in snow, no one could see what's going on. So they fixed it. And he just like went through this incredible history. And it's so fascinating how it works. Here's another one on how closed captioning works. So in old TV, what would happen is that there would just be like one little strip and if you watch it, he's like, you probably couldn't remember your old TV having this little black and white strip, sometimes you thought it was glitching out, that's the captions and your TV can can read those and turn them into captions. And it's still used today. And I was like, Yeah, right. So I downloaded a movie and played it on my 4k TV. And the captions just worked because they were baked into the actual video file because I always thought captions were like a separate they can be Yeah, I think they are like I have them for my own classes. Yeah, but you can you can bake those into the video file directly. Yeah, just - -78 -00:46:57,540 --> 00:46:59,250 -Unknown: even Really? Yeah, - -79 -00:46:59,250 --> 00:47:58,830 -Wes Bos: it makes sense that I should do that with my courses because then I don't have to like have a separate file. It just comes with the video file. Yeah, other ones they went that his most popular video is how the PlayStation one copy protection worked. And how mod chips worked. I was wondering like how to mod chips work like what are my chips doing? Yeah, super interesting. And then the last one I had was led printers, so not laser printers, but led printers or there's just all kinds of LaserDisc VHS copy protection. I remember when I was a kid, one of my friend's parents would rent movies, and then they had two VCRs and then they would type one VCR into another he then then it would like go wonky. And I was always like, how do they know like, what's the copy protection in a VHS tape? And he explains how that all works. So man, absolutely love this. this YouTube channel. It's a nugget. It's like 250,000 subscriptions right now. So I'd say it's relatively undiscovered so far. Technology connections. - -80 -00:47:58,860 --> 00:48:17,730 -Scott Tolinski: I'm gonna be this is right up my alley in terms of stuff. I like to watch it I hate to like wine down. I've been watching like a channel that just does every single Super Nintendo video game. They talk about it. It's so boring. It puts me to sleep every night. They're just like talking about some video game I don't care about this looks like something I'm going to be watching every night. - -81 -00:48:17,850 --> 00:48:35,700 -Wes Bos: Yeah, there's literally hundreds of them or not hundreds he probably has 70 different ones. And then he just put out one is why does the Secure Digital you know like your little memory card. Yeah, why is the D on the Secure Digital have a disk? It's not a disk. I'll let you watch that one's kind of interesting. - -82 -00:48:35,850 --> 00:48:39,840 -Scott Tolinski: Well, I just I just smash that subscribe button so hard I think magic the dumb. - -83 -00:48:42,270 --> 00:48:44,340 -Wes Bos: Alright, shameless plugs today What do you got? - -84 -00:48:44,520 --> 00:49:25,740 -Scott Tolinski: I have a new courses on level up tutorials. By the time this is coming out the course for January 2019. The first course of January 19 shall be released. So head on over to level up tutorials.com forward slash pro sign up to become a pro and you will get access to every single course that's available on level up tutorials as well as any course that is released this year. If you sign up for the year you save 25% and you will get 12 additional courses over the course of this year. And let me tell you, I got some doozies planned. I'm starting 2019 off right and many can do it that way all year long. So check it out, level up tutorials.com forward slash pro - -85 -00:49:25,740 --> 00:49:45,360 -Wes Bos: awesome. I'm gonna pick all of my courses. Wes bos.com forward slash courses. If you want to learn JavaScript CSS just want to start off 2019 it's probably this is in February so you're not starting it off but if you want to learn anything head on over to Wes Bos comm forward slash courses and I will hook you up bunch of free ones bunch of paid ones - -86 -00:49:45,420 --> 00:49:46,740 -Scott Tolinski: Yeah, New Year new you - -87 -00:49:46,800 --> 00:49:49,740 -Wes Bos: New Year new you and anything else for today? - -88 -00:49:49,860 --> 00:50:06,060 -Scott Tolinski: I got nothing else. Right? Yeah, ready to go. Please. Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show - diff --git a/transcripts/Syntax117.srt b/transcripts/Syntax117.srt deleted file mode 100644 index 05be41f0e..000000000 --- a/transcripts/Syntax117.srt +++ /dev/null @@ -1,216 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bobby and Scott, Todd. Totally ski. - -2 -00:00:26,100 --> 00:00:57,240 -Scott Tolinski: Oh, welcome to syntax and this Monday hasty treat, we are going to be talking all about one of the things that we deal with every single day. And this is going to be email. In particular we want to talk about how to email busy people how to write emails that actually get read, and don't just get tossed in the archive because that is a huge thing. When you're emailing somebody who's got a lot of stuff on their plate. The last thing you want to do is completely overwhelm them. So my name is Scott Tolan ski and with me as always, is Wes Bos. - -3 -00:00:57,299 --> 00:00:58,350 -Wes Bos: Everybody. Hey, Wes, - -4 -00:00:58,350 --> 00:01:01,229 -Scott Tolinski: are you ready to talk about email? I'm ready to talk about email. - -5 -00:01:01,229 --> 00:01:38,040 -Wes Bos: I am. Yeah, we're gonna talk all about how to email busy people. So not necessarily managing email. We talked about that not necessarily marketing emails. I think we've talked about that. Maybe we can, if people want to hear more, but we're going to tackle the topic of how do you email somebody who gets way too much email, and you absolutely need a reply. And this is coming at it from both. I'm a busy person who gets too much email, as well as I like to email busy people who are sort of out of my league, and I hope to get a reply. So yeah, we're in the kitchen of some hot, hot, tasty treat tips today on how to do that. - -6 -00:01:38,100 --> 00:01:52,710 -Scott Tolinski: Yeah, yeah, I know, I'm a busy person, too. But one of the things that helps me stay less busy is having total visibility on the errors and bugs inside of my website. And for that, I love to use a service called century, which has been a longtime sponsor of syntax. - -7 -00:01:52,860 --> 00:03:39,300 -Wes Bos: Yes. So centuries tagline I love it is stop hoping your users will report issues. It's a bug in error tracking service. So what happens is you install it on your server, your client, it's going to catch all of the errors that happen. And then you get this amazing dashboard that gives you great visibility into what happened, who is it happening to how many people how often is it happening? What devices is it happening on and it allows you to fix your bugs really, really quickly, because you have this amazing visibility into what's going on some huge companies so what I'm gonna do right now is just spot spotlight some of the companies that actually use it. So Reddit uses it one of the software engineers that read it says, seeing only my 30 issues out of thousands makes resolution easy. Why? Because you can set up filters on Sentry to filter out stuff you don't care about, as well as you can aggregate issues that are happening over and over and over again. You can just look at it like this happened to 20,000 people but this is just one issue in the Sentry back end. And I know that I can fix this and man that feeling when you see that you see it the number of times that issue happens just plummet once you deploy a new version. It feels good man. Feels very good man. Tons of tons of really cool. Uber PayPal Nike peloton, man the peloton ads have been been hounding me on the internet. Using these bikes. Yeah, likewise, so cool. Anyways, I don't want to do a peloton ad in the middle of our century AD but they are a customer of century Lassie and New York Times Pinterest, all kinds of cool companies. If you want to check it out, and try it on your own website. Go to century.io use the coupon tasty treat all lowercase one word, and you're gonna get two months for free, which is better than their standard free plan. So check it all out. Thanks so much Sentry for sponsoring. Cool. - -8 -00:03:39,329 --> 00:04:04,260 -Scott Tolinski: Thank you Sentry. Yeah, so Okay, let's get into it. First off, emailing busy people is not easy, because well, people are busy. And again, if you send that email and it's not good, it's not going to get read, it's not going to get answered and most likely will end up in an archive or at the bottom of somebody's inbox until they see it several months later, and then click archive and never actually answer you. So yeah, let's get into it. What do you want to talk about first West? - -9 -00:04:04,440 --> 00:05:54,510 -Wes Bos: Yeah, let's kick it off with with subject lines, we're going to go through subject lines, the body of the email, and then as well as just like little tips, because as someone who gets tons of email, I would love I wish I could absolutely reply to everyone. And I do reply to pretty much everybody. The speed at which our reply is is generally due to how easy it is to parse the information and the ask that you have in the email and get a reply back to you. So making it easy for me to just ingest the email, understand what's going on, offer a solution or offer help or offer whatever it is advice, whatever it is that somebody is emailing me for is is really important because there certainly is lots of emails that I open up and it's just a book. And that's it. There's all the breaking all the rules and I just go and I don't I don't touch it and I'll just snooze it or close it and then I'll come back to it at a later point and I'll probably do that three or four times until I Actually buckle up and to finally do that email. Yeah. So let's kick it off with the subject subject lines, a good subject line will give a user context to what the email is about before the email has even been loaded. I find that's really helpful. If somebody sends me an email that says, hey, Wes web development conference in April 2019. Well, I'm clicking that email, my brain is already going okay. Do I already have a conference in that one? It's 2019. That's next year? Well, it's, it's it's 2019 already, but I could be thinking, Okay, that's, that's next year ready. And maybe I'll pop my calendar open at that time. And I'm already set up, I'm already in the headspace. Whereas if the email was just a quick, like, if people always emailing us a quick question, or Hey, Wes, and then I have no idea what that what is it about? And more often than not, I won't even open it immediately. Whereas if it's something too enticing to me, like a speaking opportunity, but Oh, yeah, absolutely. I'm gonna open that real quick. Yeah. - -10 -00:05:54,630 --> 00:06:35,250 -Scott Tolinski: Yeah, that quick question, or saying, Hey, can I ask you a question or something asking a question to ask a question is like, such a frustrating thing for me. I used to have meals working with and they would send me a chat, like every morning and the chat would just be Hey, and then I'd have to be like, Hey, what's up? And they'd be like, how are you? Like, okay, let's just what is the question you have? For me, I don't have time to go back and forth this every single time we chat. It was a professional relationship. Right? So yeah, don't ask a question to ask a question. Have your question beat? You know, obviously, when it's going to be like you mentioned, the important information should be upfront, it shouldn't be hidden behind a layer of who knows what - -11 -00:06:35,340 --> 00:07:33,020 -Wes Bos: other things don't use gimmicks. So emojis, exclamation marks, putting square brackets around the word important, or read quickly, that doesn't make me want to read your email quickly, that makes me want to not read it at all. Because like, I know that you probably aren't actually in a fire and I need to go and save you from it. And it's funny, because the people who do have emergencies that like maybe they're in the middle of a course, and they're totally stuck, and I could help them right through a thing. Or maybe they need to buy something by the end of the day, because their budget is expiring, but they need to know do you offer this because otherwise my boss won't reimburse me. So these are urgent questions that they have and time is of the essence. And usually they will just, they will send me like a nice quick one liner with a really good subject. And I can answer that with one hand from my phone while I'm drinking a coffee, which is great. So don't use gimmicks, things like that. I know Scott, you recently just got a bombshell of an email from - -12 -00:07:33,020 --> 00:08:00,120 -Scott Tolinski: someone I got a great one. Yeah, no, it was just as just annoying. I'm sorry if this if this is you and you're listening and you mean this email, but like the subject matter of the emails, blatant clickbait, which made me like, sort of roll my eyes immediately. Because it's like, you don't need to be that cute when you're, you know, trying to contact me, but the whole thing is just a doozy of of really just totally obnoxious marketing stuff. Like, I don't know, let me I don't know. Should I read some of this thing? - -13 -00:08:00,270 --> 00:08:02,790 -Wes Bos: Yeah, I was dying when you read it. So please, yeah, - -14 -00:08:02,790 --> 00:08:43,350 -Scott Tolinski: so this person is trying to sell me on their email marketing skills, which they did not sell me on. They write things like my emails have been known to evade the spam folder like a greased pig and turn lists into raving fans, all while putting the rest of their inbox to shame. Oh, it was just so pretentious and ridiculous. They started the first email with salutations. The second email, they responded because I did not obviously respond to this email they responded with. I haven't heard back from you yet. Which tells me that you accepted Elon Musk's one way ticket to Mars, or you don't care about email marketing. Like Don't insult me. Like Come on. Yeah, like oh, excuse - -15 -00:08:43,350 --> 00:08:46,230 -Wes Bos: me. Yeah, of course. I don't care about hair. - -16 -00:08:46,350 --> 00:09:05,070 -Scott Tolinski: Oh, yeah. No, I'm pulling to Mars. Now this whole emails, like it made me want to have over here, I was just totally over this thing. I was like, I don't typically respond to this. And I had to respond. Just saying, like, both of these emails are very sexist. Like, I can Yeah, handle this, I'm pretty sure I would lose all of my subscribers. If I hired this dude. - -17 -00:09:05,270 --> 00:09:51,530 -Wes Bos: It's funny because like, you can tell that that guy is fresh out of paying $4,000 for some sort of high pressure, email sales course. I can always tell like, there's these courses out there that are like, marketers selling marketing stuff to other marketers. And this this whole scammy industry of things that are really weird, and I can always tell like, whose courses have been coming like Ramit Sethi has this like email course that he got out like five years ago, and I was like, Yeah, I get like those scripted emails all the time. I was like, okay, like I know, I know what you just you're fired up. I know that you just took this $5,000 course or whatever, but this does not work anymore, especially for people who know the business and can see right through you. - -18 -00:09:51,570 --> 00:09:54,050 -Scott Tolinski: Yeah, it's not eye catching. It's just a noxious. - -19 -00:09:56,660 --> 00:10:56,910 -Wes Bos: So those are subject lines up some good, some good Examples of subject lines, I just just scanned my email really quickly. A good example of subject line is century sponsoring your podcast in 2019, or unpaid invoice number 23. Or if you are having something that is a yearly thing, like if you do something every year, I've been sponsoring, I just like giving free courses to a couple conferences every year. And when somebody emails me to say, Hey, can we do it again this year, they put the the year in the in the email. So I know that it's not like an old email or if I'm searching for it at a later point, I can quickly distinguish what years those things were from, which is really helpful. And then as another one, someone just emailed me, Wes, I'd like to help you with Facebook ads. I thought that was good. I never actually ended up working with them. But yeah, that's a really good one. I thought that was a really good. I was like, Oh, I know exactly what you want to do with me. You use my name. So I caught my eye out of the hundreds of emails in my inbox. So I thought that was a really good one as well. - -20 -00:10:57,030 --> 00:11:55,740 -Scott Tolinski: Yeah. Nice. Yeah. I mean, I think that they're all all important things to just have exactly what you're doing. I mean, I think a good strategy, honestly, is to maybe scan your own inbox and see, again, which emails you're more likely to open up and maybe what the headlines are, because again, you don't want it to be like, Oh, you don't want it to be overly intense or invasive, you want it to be useful, and you want it to be very clear. And I guess a lot of that same thing goes for the body. Because I do I get a lot of emails that are hefty, to say the least write big long paragraphs, they take a long time to get to the point. They don't tell me exactly what they're asking until, like somewhere in the middle. And if that's the case, I'm I, my, my like, attention has been lost in the first paragraph. I don't need a host of background, if you want to ask me for a coupon code or something like that. asked me for the coupon code. Don't tell me like, Alright, here's my entire life story. And now that I've told you this, man, please have a coupon. You know? - -21 -00:11:55,920 --> 00:12:24,210 -Wes Bos: Yes, yeah, I get those all the time. I think when you open an email, the person reading it is thinking, What is this about me not? What is this about the actual reader. So if you started off with a huge like bio of your entire life, the reader probably doesn't care until they've have some more context for what's going on. So they need to know it's the other way around. Right? I'm actually I was just looking through my email inbox. And I got an email from a recruiter at Google subtle brag right here. - -22 -00:12:25,980 --> 00:12:26,760 -Unknown: No big deal here. I'm - -23 -00:12:26,760 --> 00:12:42,810 -Wes Bos: just gonna read the the email because I thought it was a perfect example of how to email busy people. The subject was hi from Google. Pretty good. Yeah. Okay, Mama, hello. Although I did get somebody like once do that. And then they were just like, they were like a partner of Google. And I was like, come on, - -24 -00:12:42,810 --> 00:12:47,040 -Scott Tolinski: I get those clouds. Your Google Ad specialist, like do you work? No. - -25 -00:12:47,340 --> 00:13:42,000 -Wes Bos: I'm at Google specialists, they would say if you're not doing work for Google, but this person actually does. It says, Hey, Wes, new paragraph important. Don't jam everything into one line, make it very scannable. What are your New Year's resolutions? You look like a talented software engineer looking for a new challenge and like to make an impact. So first of all, you look talented. Thanks for buttering me up. What are my new year's resolutions? If and if you're trying to make an impact, I love making impact, right? And I realized this email is probably sent to thousands of Avengers. This is how Google works. Right? So this is not obviously directed at me. But I'm flattered. Okay, let's keep reading. I'd like to chat with you about some exciting projects. I love excitement, that you be a great fit for Oh, good, exciting projects that I would be a good fit for. That's the kind of context two sentences context for what's going on. next paragraph. Let's talk about 2019. And get started on New Year new me gameplan. Oh, maybe - -26 -00:13:42,000 --> 00:13:45,210 -Unknown: they do listen to the podcast. Oh, yeah. Funny. - -27 -00:13:45,510 --> 00:14:02,430 -Wes Bos: Here is, here's my calendar. So call to action of what you can do next. Pick a time that works for you. I look forward to getting to know you. So just like a couple sentences really got really got my attention. I didn't have to like, oh, let me like go brew a cup of coffee and sit down to read this thing. Yeah, I immediately have some context for what's going on. - -28 -00:14:02,460 --> 00:15:21,800 -Scott Tolinski: Yeah. And they made it easy. They broke it down for you. They gave you everything you needed and didn't give you anything more than that. Which is like, exactly. I mean, it's an important thing. And we want to, we want the emails to be short and sweet. We don't want them to be like too too brief. Like I don't want I don't want to get an email that's just like, Hey, can you message me? Or can you talk? Well, no, well, yeah. What's your question here? So even with the same thing as the subject line thing, get your question out there, ask your question, and then make it easy to answer. And sometimes questions are a little bit more elaborate, right. And I think you had a really nice point in here about having lists of things right. Yeah, reading your list, because when you're asking multiple questions, it's a I don't know, it can get lost in a paragraph that there are even multiple questions. I've answered emails thinking that I've totally answered them before, only to have Oh, what about this other thing I mentioned in the email? Okay, sorry. So numerating your questions and saying up front, like setting some sort of expectation. Like hey, Scott. I have a couple of questions for you. One, blah, blah, blah, to blah, blah, blah. Okay, and then I can then take those same numbers and answer them the same way I can say one, here's your answer to number one, two, here's your answer. Yeah. To That said, if you're not in like a current working relationship, send, like 10 questions. It's this isn't an interview here. This is like, yeah, this is just an email. - -29 -00:15:22,020 --> 00:16:31,080 -Wes Bos: Devon, the numerated. One I heard maybe about a year or two ago, and I've switched entirely to it. Because all too often, when you ask somebody questions, I'll email very busy people and say, Hey, can you do this, this and this, and they'll send the first two things, and they'll send it and it's just a, it's just a mistake, right? Because then Otherwise, the user has to parse the email and into the asks, but if you numerate them, the person couldn't even reply right in line, I often will just copy paste the list of questions, paste them in, a lot of people do this to me, I love it. And then I just bold my reply, or whatever, or just use a little arrow in front of it. So it shows that you're replying in italics. And you can reply right in line. I absolutely love that. I think that's probably the most important tip from this hasee treat here. Yeah, definitely. Another one I have here is make it scannable. So someone should be able to scan the email really quickly, for the first time to decide what's going on. If there is an email that requires a lot of information, put subtitles in there and bold them. So the person can do it, as well as when you want to come back to an email and figure out Oh, where was that little piece of information about the invoice or the wire transfer info, you can just scan the headlines and get right to it. - -30 -00:16:31,110 --> 00:17:32,550 -Scott Tolinski: Yeah, I'd love to use this, especially with that kind of information. To have those sub headings. Again, maybe even with your numerated list numerated. I don't know if that's actually the correct word. But either way, list full of numbers here, a o l, if you will, those can certainly use headings as well. Another one that we have here is don't be annoying or rude, which I experienced in a previous email. And it turned me off really quickly. I had another email a couple days ago from somebody who was just straight up yelling at me about a bunch of stuff. And they were saying I charged them for their free trial. I'm like, Listen, there's no word on level up tutorials site that says free trial anywhere you cannot find it. They're like, why'd you charge me for this free trial. And the kind of the gate accusing somebody like that is not going to make me want to solve your problem. And it's not going to make me want to be on your side, right? So don't be rude about these things. If you're you have a question or whatever. Keep in mind that everyone's a human being on the other end of that email and you want totally like, you want to assume best intentions at all times, in my opinion. - -31 -00:17:32,700 --> 00:18:11,880 -Wes Bos: Yeah, somebody emailed me the other day, and they were just like, all pissed off that it didn't have a login button at the top of my course websites. So that sent me this really like rude email. And then I send them back just a screenshot of the button with a circle around it. Like you mean this login button. And, and they're like, Oh, well, it's should be bigger. But like, if you're trying to do that be like, hey, Wes, I had trouble signing in. Is there a login button I missing somewhere? We've probably been a more appropriate and that will help me Oh, people are having trouble finding the login button. I've got a design issue on the website. I need to fix that. But instead, I was just like, I don't want to deal - -32 -00:18:11,880 --> 00:18:12,450 -Scott Tolinski: with this dude, - -33 -00:18:12,450 --> 00:18:47,810 -Wes Bos: what's this dude's problem? Yeah, right, exactly. Other things, quantify in a single sentence, and then you can go on. So before people do this all the time. To me, they say they want to join the affiliate program. So in one sentence, I have a website with 10,000 visits per day, can I join your affiliate program, and then they'll go on to more information about this is the type of articles we write this is the type of visitors that we have. And that's fine. But I was able to quickly quantify what was going on, especially when when the quantity of visits or listens or anything like that is important in the decision that you're making. Yeah, - -34 -00:18:47,810 --> 00:18:57,150 -Scott Tolinski: and I think that all goes along with making important information easy to find, right? Make it be obvious that this is the main meat of the email here that you want. - -35 -00:18:57,420 --> 00:19:30,180 -Wes Bos: Sometimes people will just bold the like the punch line of the email, and I kind of like that. Yeah, like, if you have to send a paragraph, and there's like one sentence in there that says, I want to make you an extra $300 a month or something like that. I actually find that helpful, because my eyes will immediately go to that. And then I'll say, oh, okay, maybe I should continue reading this email. Yeah. Or TLDR. Maybe throw TLDR at the top. And then you can read that and get a little bit a TLDR. Yeah, I like that. That's too long. didn't read who didn't read our friends? Yeah, I realized that sometimes we say these things and people don't. - -36 -00:19:31,530 --> 00:19:39,420 -Scott Tolinski: Yeah, so that the TLDR is the hasty treat for your tasty treat that's later on in the email. Yep. - -37 -00:19:39,480 --> 00:20:35,400 -Wes Bos: What else do we have here? I've got a couple others avoid images and your signature. This just annoys me in general. This is actually one thing that the Google recruiter failed at. If you embed images into your signature, especially like animated GIFs. like nobody cares. Yep. You don't need a Twitter icon in your signature. And what happens is that As you email back and forth, I don't know what email program it is, but they always like are sent as attachment. It's like, yeah, and then billion and then that goofs up your email search has all often like, be like, oh, someone sent me an invoice. I know it was a PDF. Yeah. So I'll search their email and say, has attachment in Gmail? And then if you have like this, like stupid LinkedIn button in every one of your emails that sent us an attachment, then that search is worthless to me. Yeah. So those I've never had seen anybody being like, oh, wow, I won't do business with you. Because if your sweet email signature that you built here, it's just unnecessary. Yeah, - -38 -00:20:35,430 --> 00:20:42,510 -Scott Tolinski: I mean, I think at the end of the day, and it's going to be no bad connection, it's going to take longer to load or might not load at all. Just keep it simple. - -39 -00:20:42,560 --> 00:20:46,020 -Wes Bos: What about a prolific quotes at the bottom of your email? What - -40 -00:20:46,020 --> 00:21:12,450 -Scott Tolinski: do you think about when people have those? Oh, I'm endlessly inspired. demand has no idea. I've never even looked at somebody's signature unless I need their phone number or something. So like, again, just like everything else, put the important information there. And don't put in anything else. Don't fill it with a bunch of images. Don't fill it with a bunch of quotes, put in your phone number, email, Twitter, whatever you need to get a handle by. But again, don't throw a bunch of unnecessary stuff in there - -41 -00:21:12,510 --> 00:21:21,000 -Wes Bos: have been if you email me, you have to like find like a hilarious quote now and put it at the bottom. Yeah, yeah. You miss 100% of the shots. You don't take Yep, - -42 -00:21:21,000 --> 00:21:22,770 -Unknown: Wayne Gretzky. Oh, my God. - -43 -00:21:23,970 --> 00:21:39,080 -Wes Bos: It's good to say that last tip I have here I don't know if you've got any more is Don't break the thread. So if you're emailing back and forth with somebody, don't start a new email. Because then you have like two emails going, you don't know which one to reply to. I've been emailing back with Nathan berry who runs? - -44 -00:21:39,509 --> 00:21:41,910 -Unknown: Yeah, nice. Cool. And yeah, I'm a fan - -45 -00:21:41,940 --> 00:22:15,450 -Wes Bos: for four years. Because when I initially was like, drip, or ConvertKit, and I went with drip, and now drip is drip is like jacking their prices up, because they they're trying to get rid of like the little guys that use their service. So Nathan reply to like a two year old email from there. And I was like, perfect. Like, I like that. I don't know if everybody likes that. But I like that he he replied to an old email, because that shows that we have rapport from from before. And Ooh, that was a rhyme rapport from before or from it also gives me like, access to what we were talking about before. Yeah, so helpful. I like that. - -46 -00:22:15,480 --> 00:22:35,190 -Scott Tolinski: Yeah, yeah. No, it's uh, it is. It's a must. Of course. It's a new subject, new subject, new email. Yes. Right. sangria object, same email chain. And that way again, everything keeps him in line with your inbox. When you're searching for things you can find the right email. And again, it's going to it's going to just make people happier with what how you're emailing. - -47 -00:22:35,250 --> 00:22:36,390 -Wes Bos: All right. Anything else? - -48 -00:22:36,420 --> 00:22:48,510 -Scott Tolinski: I got nothing else again. You know, get get your information out. You know, don't throw an extra bunch of stuff and be cool. Be cool to people and be nice and yeah, I think it's all gonna work out. - -49 -00:22:48,569 --> 00:23:03,450 -Wes Bos: Yeah. Take these tips to heart. I don't mind I should say it might sound like I hate it when people email me. Oh, yeah. I don't mind when people email I like when people email me. Just these are these are some of the tips that I found from enjoyable emails that and conversations that I've had with people. Yeah, - -50 -00:23:03,450 --> 00:23:11,250 -Scott Tolinski: and my favorite ways that people email me is when they say nice things about me. I like that. Good emails about how good of a job I'm doing. - -51 -00:23:11,910 --> 00:23:27,660 -Wes Bos: It's got print them out and put them on as Fred to do. Yes, yes, but good I did today. Awesome. So I think that's it. Thanks for tuning in. Hopefully it wasn't too tasty of a hasty treat. And on Wednesday, no, it hasn't been our tasty, tasty, no, it's somewhere in the middle - -52 -00:23:27,690 --> 00:23:28,230 -Scott Tolinski: middle ground. - -53 -00:23:29,700 --> 00:23:31,950 -Wes Bos: All right, we'll catch you later who's please - -54 -00:23:33,900 --> 00:23:43,650 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax118.srt b/transcripts/Syntax118.srt deleted file mode 100644 index 35eefe4f1..000000000 --- a/transcripts/Syntax118.srt +++ /dev/null @@ -1,524 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready. Here is Scott, ski and West boss. - -2 -00:00:10,530 --> 00:01:00,960 -Wes Bos: Welcome to syntax. This is the web development podcast with the tastiest web development treats. Today we're talking all about the Smart Home things that go in your house and connect to the internet. I've been researching and testing out devices over the last about a year and Scott has as well. So we're excited to bring you today sort of a breakdown of what it is all the different devices, how they work with each other, how to control these things. And then we're going to ask for your feedback on what you've been using in your own house. And we'll do a follow up episode in a couple months, because there's certainly a lot of stuff that I haven't tried yet. And I wanted to dive into. So today's sponsors are two jamstack companies. First one is Sanity, which is a headless CMS. And the second one is Stackbit, which is going to help you integrate a bunch of these different jam stack pieces all into one. We'll talk about both of them partway through the episode with me as always, this is Scott tomsky. How you doing today, Scott? Hey, I'm - -3 -00:01:00,960 --> 00:01:19,620 -Scott Tolinski: doing super good, I got a bunch of these new devices Lately, I've been loving setting this stuff up tweaking it, having fun with it. I'm really interested in the sort of intersection between this stuff and our web work, and maybe how you can use some of our skills to make even better things. I'm pretty interested in that. - -4 -00:01:19,829 --> 00:02:24,900 -Wes Bos: Yeah, most of these things have API's. What's really cool about it is you're able to interface with these things and send them data and turn them on, turn them off. And I had a student once a couple years ago, one of my classes built a kind of html5 video player that took the dominant color out and then sent that to a light bulb. Yeah, turn the shit out. Oh, that was so cool. So cool. Let's say let's get into it. We're gonna break it down into the tech of like, like, what is the different tech? What are the different decisions that you can make from the initial phase, sort of the bummer thing about the Smart Home stuff is that all doesn't work together. So you've got all these different devices and different apps, and a lot of it will work together. But you kind of need to make these decisions early on, then we'll go into controlling it. So whether you want to control that with sort of a central hub or a service, or you want to just use your voice or something on your phone, there's that and then we will go into the actual hardware. What are the different pieces of hardware that you can use in your house? lightbulbs and blinds and plugs and power strips and cameras and thermostats and all that good stuff. So you want to kick it off there, Scott? - -5 -00:02:25,160 --> 00:02:46,169 -Scott Tolinski: Yeah. So I think the first thing we want to talk about is devices that connect directly to your Wi Fi. And these are devices that probably have their own app, their own system without requiring a hub. And they'll typically make these things very known by saying on the box, like no hub required. And yeah, how many of these devices do you have in your setup? - -6 -00:02:46,229 --> 00:03:07,650 -Wes Bos: So I don't have a hub in my house? So maybe we should talk about the other one as well. Yeah, real quick, generally, these devices are either Wi Fi based, or they are like radio frequency, and then they talk to a hub, like the hub connects to the Wi Fi. And there's benefits to both of them the benefit of the other one, I think they're called ZigBee. The ones that require a hub. - -7 -00:03:07,739 --> 00:03:11,370 -Scott Tolinski: I think ZigBee is just one of the protocols. I think there's several other protocols, a - -8 -00:03:11,370 --> 00:03:14,669 -Wes Bos: couple different protocols, then, okay, what are some of the other protocols? - -9 -00:03:14,759 --> 00:03:17,130 -Scott Tolinski: I'm not sure, but ZigBee is like a very popular one. - -10 -00:03:17,309 --> 00:03:19,139 -Wes Bos: Oh, yeah, there's like z wave. - -11 -00:03:19,259 --> 00:03:28,080 -Scott Tolinski: Yeah. And a lot of the hubs, they work with a lot of the different protocols. So it doesn't necessarily matter, you just make sure that it works with x, y, z on the box, you know? - -12 -00:03:28,349 --> 00:04:40,920 -Wes Bos: Yeah. So at first I thought like, that's dumb, like, why do you need a hub. But then I realized that a lot of these ones that communicate to a hub, a hub is like 100 bucks, so you have to invest in that. But a lot of the devices, they require low power, which means that you can run them off of like a coin cell, like once a year, you have to swap out a coin cell or a little battery. And that's great, because you don't have to run power to them in you can like little things like sensors for your windows, little things like temperature monitors, little things like a motion detector, all these things require a little power. And there's even some that run on their own power. So there's like a button that you can get in you press the button. And the button is powered by the energy that is created by simply pressing, pressing the button, which blows my mind, that's wild that you can have that and no wires required no batteries to have to do it. And then the flip side is a Wi Fi device where you just get it you plug it in whatever it is, and then it connects to your Wi Fi network. You don't have to worry about having some sort of intermediary hub in there. And that's sort of I think those are sort of the gateway drug to using a something with a hub because you get a plug or a light bulb or switch or something. You're like, Oh, this is really nice. And you can kind of get addicted and start buying more and more stuff. - -13 -00:04:40,979 --> 00:05:04,010 -Scott Tolinski: Yeah, yeah, definitely. And I mean, you see, you have no hubs. I have two hubs. I think two Yeah, I have two hubs actually had to buy an Ethernet switch the other week when my bulbs were coming in because I had a new hub coming in and I didn't have enough Ethernet ports because the Google Wi Fi only gives you one so I had to get a little bit Have a little Ethernet switch going on. But uh, yeah, no, I'm living the hub life. - -14 -00:05:04,050 --> 00:05:07,200 -Wes Bos: Wait, so why do you have two hubs then what's the point of having two? - -15 -00:05:07,350 --> 00:05:15,870 -Scott Tolinski: So I have a SmartThings. hub. And then I have a hub for the hue bulbs, the Philips Hue bulbs, which have their own little deal. - -16 -00:05:16,140 --> 00:05:21,020 -Wes Bos: Oh, so the Philips Hue don't work on an existing hub, you have to buy your own hub for it. - -17 -00:05:21,140 --> 00:05:33,120 -Scott Tolinski: As far as I understood. Yeah. The Philips Hue hub is like specific just for the bulbs. And it's okay. I mean, I got like in a three pack or a five pack that that cost about the same as much as a bulb would anyways. Okay. - -18 -00:05:33,330 --> 00:05:36,870 -Wes Bos: Yeah. Okay. And what about the hub is has to be wired, then? - -19 -00:05:36,930 --> 00:05:42,660 -Scott Tolinski: Yeah, the hub is has to be wired to your Ethernet. Yeah. To your router? Yeah. - -20 -00:05:42,690 --> 00:05:55,140 -Wes Bos: And then I'm always curious about that. Because like, like, if I have to put the hub where my router is, because you need Ethernet, and does it reach across your entire house where regardless of where you put the, like, how far does that frequency go? Oh, yeah, it - -21 -00:05:55,140 --> 00:05:58,140 -Scott Tolinski: goes everywhere. Yeah, yeah, it's just on the Wi Fi network. - -22 -00:05:58,200 --> 00:06:04,110 -Wes Bos: Okay, but the bulbs don't connect to the Wi Fi, the bulbs connect to the hub, and then the hub connects here. - -23 -00:06:04,200 --> 00:06:06,960 -Scott Tolinski: Yeah, I actually don't know how that that aspect of it all works. - -24 -00:06:07,650 --> 00:06:09,540 -Wes Bos: Okay. It just works for you. Yeah, - -25 -00:06:09,630 --> 00:06:13,080 -Scott Tolinski: yeah, yeah, I plugged it in. And I followed the instructions. And it works. Yeah. - -26 -00:06:15,240 --> 00:06:31,860 -Wes Bos: So there's some pretty interesting stuff there. I don't have a hub yet. But there's a lot of like little sensors. I'll talk about them later. But just things like water sensors. And if you leave a window open, you can get door sensors. And these sensors are cheap, like 10 bucks, 15 bucks, easily add them to little spots on in your house. - -27 -00:06:31,920 --> 00:06:52,860 -Scott Tolinski: Yeah, I got the smart, the smart things hub, specifically, because you could use all of these cheaper products that don't have their own apps that can just connect to smart things. And then smart things can connect to Google Home. And then it's nice and easy. And in reality, I haven't actually ended up buying that many things. So I have like two or three things connected to smart things in the app drawer, I'd like to probably change that hopefully get a little bit more use out of it. - -28 -00:06:53,040 --> 00:09:10,830 -Wes Bos: Oh, yeah. And then sort of in between Wi Fi, and ZigBee is this idea of the iOS home kit. So you can buy a lot of devices that are compatible with home kit, and you don't need a hub for iOS home kit. But if you want to access your devices, when you are outside of your Wi Fi network, then you do need some sort of hub, which doesn't really make a whole lot of sense to me. And I think that the home kit is probably the worst out of all of this stuff, just because like Apple requires like very strict, like in order to make your thing homekit compatible, it has to go through the entire process of it working like Apple does. And because of that the stuff is generally the most expensive stuff. And you're you're sort of locked into iOS at that point. And then if you want to have if you want to be able to access it while you're outside, you have to have an Apple TV or an iPad that stays in your house in order to have it as a hub. So yeah, like I know, people go all in on it, I'm sure it works really, really smoothly. When you go all in and there's other there's like a, there's this thing called a home bridge where you can, you can make things that are not compatible with iOS homekit, you can make it compatible. If you have like a Raspberry Pi, we'll talk about that as well. But I've sort of steer clear of all the homekit stuff just because I want it to all be just like Wi Fi base or like an open standard base. And I don't want to have like a light switch that's not going to work in six, six years because they've stopped supporting my light switch, because that's the whole sort of laughable thing about all this stuff is that you put something so simple, like a light switch that connects a current and you put that in your house. And now you have to like update your light switch and you got others bug fixes or security holes, you got to babysit this thing is the ability of being able to turn off your entire house with a single command. Is that worth the trade off? So I've been thinking about that a lot in the future. And that's that's one of my rules is that all of these devices must be at the very basic the dumb devices, meaning that if I rip the entire smart thing out if I turn my Wi Fi off every time we tweet about the stuff people get really snarky. Oh What if your internet is down can't turn your lights off. And obviously you can turn your lights off it's it's a it's still a lightweight Yes, still a plug at the end of the day. But it's added added features. It should make my life better not make me run around and do weird stuff. - -29 -00:09:10,909 --> 00:10:12,510 -Scott Tolinski: Yeah, for sure. Cool. All right. So let's get into the controlling aspect of these things I'm really sort of interested in in this area because there's a lot of fun things you can do here and you can set up you know routines you can set up all this sort of stuff and each thing sort of has its own merits so I personally am sort of all into the the Google side of things so I have not used Alexa we don't have any Alexis in the house or the apple ones. We have just about 500 Google minis though because Google keeps sending me emails for some reason they want to give me one like oh you your Spotify. Here's a free Google Home mini Oh, you pixel here's a free Google Home Mini. I've bought maybe one or two Google Home minis and we have one all over the house. So it just just so happens I got one of my office. I want in the gym now eat everywhere. So it I think we should maybe probably out. I don't want to say any of the trigger words for these devices on this episode, just in case. So maybe we should have some sort of like a slang to refer to Yeah, the commands like - -30 -00:10:12,649 --> 00:10:15,870 -Wes Bos: it will say, okay, gargle. Okay, gargle. - -31 -00:10:17,029 --> 00:11:01,590 -Scott Tolinski: I'm in a mountain sold on IR go. So I primarily control my all of my things through the Google Home minis, which is nice, but also through my phone, which is superduper. Nice in a lot of different ways. So I have all of my devices, even if they're the Philips Hue bulbs, if they're the smart thing stuff, or if they're their own Wi Fi things, all of those end up being connected into the Google Home app for me. Yeah, the Google Home app allows you to set up different rooms, so office bedroom, all the thing and you can just set your devices into those rooms. And the best part is, is the Google Home itself is typically set into that room. So when you give it commands, it can understand contextual things like what room Yes. And it's incredible. - -32 -00:11:01,679 --> 00:11:43,140 -Wes Bos: Yeah, we so we have a Google Home and our main floor, living room dining room, and then we just added one to our kitchen, which is surprisingly helpful, because we have the lights in there that are going we use it for timer a lot when we're cooking. It's amazing that you can Spotify and you can sync music between two Google homes, and the whole house will will have that music. I do that all the time. Just so darn cheap. I can't believe it. Like it's like the good the big one. It sounds amazing. And the little one sounds like I'm not an audio file, but I enjoy like good quality music. And I was pretty impressed that how that just the like $50 little mini or I don't even know how expensive isn't to say it's like 35 bucks or something. Yeah, - -33 -00:11:43,140 --> 00:11:43,860 -Unknown: how good - -34 -00:11:43,860 --> 00:11:46,919 -Wes Bos: that sounds, with all the different features that have it. - -35 -00:11:47,159 --> 00:12:03,179 -Scott Tolinski: I think he'd be running the software engineering that goes into making those speakers sound good. Because it's a little bit more than just like a speaker. It's a lot of software behind the scenes. That's that's tweaking that, that speaker to sound that good for how tiny that little thing is, - -36 -00:12:03,239 --> 00:12:47,039 -Wes Bos: yeah, it's, that's unreal. So we use that we will not buy any hardware that does not interface with Google Home. And then we have our phones as well, because you don't want to just have to use your voice all the time to talk to it, because one of the weird things about it is if you tell it to turn off the lights, it says okay, turning six lights off. And that's like, I know you're turning six lights off, because I can see the six lights are turning off. So we had to set up a routine in Google Home to turn down the volume, turn off all the lights and then set the volume back up. Because otherwise, sometimes if we're playing music, and then it's like, it's like 11 o'clock at night, we're going to bed and we're like, okay, garco a turn off. Okay, turn all the lights off. - -37 -00:12:49,020 --> 00:13:49,230 -Scott Tolinski: My dogs Hey, gorgos. So they're like always barking like crazy. Whenever we say we say anything to gorgo gorgo goes, Oh, bah, bah, bah, and the dogs don't who is here who is in this house right now. They don't love it. I actually as a way around this aspect of it. I use I use Google Assistant on my phone like a fiend. I use it like constantly. So one of the things that the pixel does, which is like low key, one of the best features on the Google Pixel is that you squeeze it to trigger the assistant. Oh, yeah, light squeeze, you just squeeze the sides of the phone. So I squeezed the phone and I'll just say turn the lights on. And the lights turn on. I like set up nice little we'll talk about If This Then That later. But I set up nice little If This Then That thing. So I could say I just squeezed my phone I can say get comfy. Or let's get comfy. And then gorgo out of the little speaker girl girl will be like getting comfy. And then the lights will dim. - -38 -00:13:51,779 --> 00:15:13,950 -Wes Bos: Oh, man. Yeah, yeah, we absolutely love the the Google Home. So we use that for everything. The amount of integrations that Google Home has is unreal. So whereas like iOS homekit will only allow certain people in that are very high quality, Google will let anybody in. And if it doesn't work, that's because you bought a crappy product or whatever. And I guess that's a bit of a bad experience. But I've really, really enjoyed that. Other things you can do with this is obviously you can get the individual apps for each of your products. And you generally have to do that anyway just to set them up. But after you set them up, I'd never use the individual apps for each of the products. It's all done through your single Google Home application. And it's been getting better if you tried it maybe six months a year or a year ago, the app was pretty much non existent. So the only way to integrate with it was via voice and not having something to look at is frustrating because you can't see what's going on and I can't wait for the day that they come up with a just basically like an iPad. They have something right now that's like a Google Home and has like a tablet on the front. Yes, but I want something it has a big speaker on the back. I want something that I can just mount to the wall. Hmm and maybe tap off of a light switch. power source and, and then be able to see the temperature sensors, all the lights that are on or off what's playing on the different speakers what's playing on the TV, all that stuff, I'm looking forward to it getting a little bit further than it is right now. - -39 -00:15:13,980 --> 00:15:51,029 -Scott Tolinski: Yeah, I'm actually very interested in that sort of tablet space I've been considering more and more, I've been considering more and more the aspect of that little mini tablet device for like the kitchen or something to have one in there. I recently hung out with a friend who has one and they were talking about how useful it was to even like in their, in their in their kitchen, and they can tell it to put on a recipe for this on YouTube or whatever and have it right there or maybe even put on youtube tv or see all that sort of stuff. No, I'm very interested in that space. I'm gonna I'm definitely monitoring it. I think I might actually end up picking one up at some point in the future. - -40 -00:15:51,179 --> 00:17:04,529 -Wes Bos: Yeah, yeah, I'm looking forward to that as well, just once they get a flat one that I understand that they need a speaker in it so that it has to sit on a countertop. And that's like a no go in our house. Because countertops faces is limited. So yeah, you I want something that will go flat. And you can also like we have a old security system that like we don't run it anymore, I probably should be a podcast. But we have like the the wires in the wall for the security and there's power right there. And if we could just rip that thing off and put iPad on the wall. But past that, there's other things you can do. So if you don't want to use Google Home or whatever there's like, if you have a SmartThings Hub, and you all of your devices are SmartThings compatible, then you can just use the smart things app or the website for that. There's this thing called home assistant, which is a sort of a like an open source version of that. It's pretty nifty. It's built in Python. And the way that it works is you install it yourself on a server and then you add all of your your different devices in. It's very hackable. So there's usually somebody has made like a hack to make something that's not supposed to work with it work. I tried it out, and it works pretty well. It's just like one of those things where I don't want to have to babysit it, you know, you know, want to host your own stuff. - -41 -00:17:04,679 --> 00:17:16,550 -Scott Tolinski: I mean, it would be one of those things. I think that you know, it would be fun if you had the bandwidth to babysit it to hack it to play with it to mess around with it. But if you Yeah, it seems like it could be a lot of trouble. - -42 -00:17:16,709 --> 00:18:15,300 -Wes Bos: Yeah, it the it's just not there yet, like the the amount of polish on Google homes app, and then you open this thing up, and it just doesn't feel great. It feels like it's a little rougher on the edges, there was a bunch of bugs with it, where like, half the time, all of my stuff would just disappear when I refresh the page. And I had to refresh it again. So it's like stuff like that, where if like, if I gave that to my family members and said, like, here's how you you view our cameras, and here's how you turn the lights on, they're gonna be like, I don't like this thing. You know, it doesn't work that well. So I'm really hoping that that that gets a bit better. I'm gonna probably come back to it at some point. There's another one too, that somebody recommended openhab open AB seems to be another open source version of this. This seems to be focused more on like, cameras and stuff like that. But I'm not sure I haven't I haven't looked into too much. And the idea is that you install it on like a Raspberry Pi or something. Have it running inside of your house with all the stuff that you have. Interesting. - -43 -00:18:15,330 --> 00:19:14,090 -Scott Tolinski: Yeah, this is a very, I mean, these this is sort of the intersection between us as developers and these sort of things, right. I mean, there there are open source platforms. I think that's a really interesting space. But if I want my entire house to be on schedules and routines, I might want to put it on a yellow like an established platform. But you know, that's just me. Me personally. In addition, I've heard really awesome things about Alexa. I have a friend of mine, who I definitely trust his technical opinions on things, has an Alexa setup instead of a Google Home setup. And he Yeah, he really likes it. Although he did mention that he was considering Google Home for I think there was a couple of small reasons. And there was one small reason I think it was like an audio line out on the Google Home not existing that he was like I if they if they put an audio line out on this thing. I'm moving over, but I've heard yes about the interface and sort of Alexa overall that said, You know, I haven't used it. I can't necessarily speak too much on it. - -44 -00:19:14,250 --> 00:20:08,880 -Wes Bos: Yeah, we have one it's built into our thermostat. So we have an eco B thermostat and it comes with Alexa Yeah, and I don't like it I find that the Google Home will almost never trip accidentally because it listens to everything you say and we find that the Alexa probably at least even our kids notice a Alexa sheesh because it goes off all the time. And part of that probably about half the fall strips are because my daughter's name is Lux, and we say a Lux Could you come over and and trips so there's that you can I think you can change that if you want but the half of the other time we're talking about random stuff, and it trips so we've started giving up on it. I haven't figured out how to turn it off. You can turn off the microphone on the Eco be but I don't know we still I think we just want to tick it off entirely. If you turn off the microphone, it has this big red strip on the top, which is ugly. So we haven't figured out how to totally turn the Alexa off just yet. - -45 -00:20:08,910 --> 00:20:33,720 -Scott Tolinski: This is funny because when I bought my ego B there was like the Ico before and the Ico v3 light. And I was like, Yeah, oh, well, what are the differences? And they're like all the Ico before comes with Alexa. And like, Is that the only difference? Yes, that's the only difference. I can pay you $100 less and not have to get an Alexa. That that's so that's I ended up going with was was that. So I do have the Eco B as well. But it's a it's not the one with the Alexa on top? Oh, yeah, - -46 -00:20:33,750 --> 00:20:57,780 -Wes Bos: yeah, I got I kind of regret buying that, especially how cheap it is to just buy a separate Alexa. But it's still a good thermostat. At the end of the day. If you just take the you don't use the Alexa part of it. Because we can control. We'll talk about our gear in just a second. But you can control it via Google Home, you control the eagleby with Google Home or the app or pretty much anything you want. I'm sure you could send a smoke signal up and the folks that would change that. Change it for you. - -47 -00:20:58,260 --> 00:21:12,150 -Scott Tolinski: Yeah, he could be. I'm a fan. Cool. So yeah, I guess that's pretty much it for controlling. We have Google Home, we have Google Assistant, we have Alexa, is that the trigger word for that device? are we are we saying that trigger word, - -48 -00:21:12,510 --> 00:21:15,240 -Wes Bos: again, probably triggered Alexa codes. That's okay. I'm - -49 -00:21:15,240 --> 00:21:19,820 -Scott Tolinski: sorry, we're gonna change that we're gonna, let's just call it a - -50 -00:21:19,850 --> 00:21:23,550 -Unknown: yucca yucca. I don't like yucca. Gorka. Gore - -51 -00:21:26,940 --> 00:21:28,650 -will just not say that word anymore. - -52 -00:21:28,650 --> 00:21:29,940 -Wes Bos: The Amazon one, - -53 -00:21:29,969 --> 00:22:11,970 -Scott Tolinski: the Amazon one. Yes. The Amazon. There you go. The Amazon device. Cool. Yeah. So there's a I mean, there's a lot of options for controlling these things. And a lot of these things, which we'll get into in a little bit, have maybe like a web hook interface, or a way to ping them from an actual site. And this might be a good opportunity to try out some of these headless sites in backends. So one of our sponsors today is Sanity and Sanity is the coolest both bring your own front end, back end CMS, this is going to be like a really cool thing. For this type of project, you could start to build your own automation system with a full on database using something like Sanity, I think that's a really cool little fun side project. - -54 -00:22:12,150 --> 00:23:46,890 -Wes Bos: Yeah, so Sanity is is the back end as a service. So if you want to build a website, and you don't know where to put your data, the Sanity is one really good option. And it comes with this incredible interface. So you yourself, your clients, everyone who uses the website is able to log in to the website, you can create all your schemas in the back end, and they give you an interface to edit it, you can also create your own interfaces in react. So that's kind of like a neat one. Because like, generally when when something is hosted for you, you have very little control over what the backend actually looks like. Because it's hosted for them. That's that was the whole thing is like wordpress.com is hosted for you, but you have no control over the back end how it looks. Whereas wordpress.org, you host it yourself. And you can make your own back end however it is that you want. This is kind of like the sweet spot right in between there where they take care of scaling and performance and security, but you still can customize your back end. One little thing I want to focus in on here, because we've had them as a sponsor a lot here. One thing is this updated in real time. So you can set up your subscriptions with all of your data, and everything will just be immediately updated. There's no pinging for new updates, there's no refreshing every 20 seconds if you set these subscriptions, it will all update in real time. So if you need something to host your back end of your data, your building your front end and react or view or JavaScript or anything that you want you could check out sanity@sanity.io forward slash syntax that's gonna get you double what you would normally get on the free plan no credit card required. So check it out. Thanks so much to Sanity for sponsoring. - -55 -00:23:47,160 --> 00:24:51,240 -Scott Tolinski: Awesome okay so let's get into some more software stuff but maybe this this stuff is gonna be applications and things that you can use in coordination with maybe your Google Home your devices to control them set up routines, and this is to me one of the coolest areas of this stuff because I I've been really having a great time in this area. And I've personally been using the website if this than that. And if you've ever seen if this than that before, it might not even be for smart home things. Maybe you're doing something like posting something to social media. When you post one thing to Instagram, it automatically posts to Twitter, or I have if I post a YouTube video, it automatically tweets out my YouTube video, a little things like that. Basically, the premise is if you do one thing, then something else happened and it connects two services together. So you can say all right, if something happens on my Google Assistant, then it something will happen. Now if this then that has a ton an absolute ton of pre made recipes. But if you can't find what you're looking for building a recipe is super duper easy. - -56 -00:24:51,360 --> 00:25:50,430 -Wes Bos: Yeah, I'm a big fan of if this and that I don't use it for any of my home stuff. I use it more for like Twitter and Instagram things, saving photos, posts. from Instagram, to Twitter, things like that, but I know that it's pretty popular. There's also another one called string a fi, which will you take all these different whether it's the lock to your house, or your air conditioning unit or anything, pretty much anything you could think of as well as it'll take inputs like the news. So if there's some new news that is matching a string of Trump, then dim the lights to a dark red, or something like that, right? Like, yeah, you can do all these crazy things where you string them together, I haven't found much need, the very basic, what's it called, the very basic routines that are built into Google Home will allow you there's not a lot of scheduling built into Google Home. So if you want to do some sort of scheduling, like every morning at 715, turn the coffeemaker on and slowly graduate the lights up to 100%, then you would need to reach for something like string phi, or if this and that, - -57 -00:25:50,460 --> 00:26:57,900 -Scott Tolinski: yeah, and If This Then That isn't like complex enough, like you're only you need to do multiple actions, there's what's called a makers account, which gives you two pretty it's it's sort of funny, because it's almost like an advanced sort of programming interface for If This Then That. It's almost like they looked at this interface. And they're like, well, this is really neat. But I don't know if all of our customers will be able to understand what's going on. So they made it sort of like an opt in thing. And if you're a programmer, you're going to feel right at home, because it's just conditional statements in a way that makes it superduper. Easy. And like it almost looks like a children's programming interface or something like that. It's definitely like, if you're a programmer, you are going to get this stuff, I don't think my parents would be able to figure it out. But if you're a developer, I think that makers account is going to be really cool. There's also really, really easy ways to set up you know, like a web hook to you could hit a If This Then That web hook to trigger literally tons of things like I could trigger a web hook that anytime you know somebody is at the front door, my lights start flashing, or there's all sorts of custom integrations you could do. It's pretty darn slick. - -58 -00:26:58,020 --> 00:27:31,980 -Wes Bos: Yeah, that's what stringify looks like as well, where if you want to go a little bit more complicated, like someone rings your doorbell, turn the lights on and start recording the camera in the living room or things like that. Someone rings the doorbell turn the fireplace on, you could do some really like this is probably home alone for where like Macaulay Culkin comes back and uses smart things. And all these like different apps to like string all these like different things together. Because you got a couple servo motors that would when someone rings my ring doorbell, open the server motor and drop a pail of water on them. - -59 -00:27:32,070 --> 00:27:35,280 -Scott Tolinski: Yeah. Oh yeah, that's a good one drop a pail of water. - -60 -00:27:35,910 --> 00:28:12,810 -Wes Bos: That's good. I do want to mention homebridge as well, real quick. So the stuff with iOS homekit is is really nice, because you can use Siri on your phone if you haven't like I have an iPhone. So I don't have like the slick integration that Android does, even though I am all in on Google Home. And then the kind of cool thing about homebridge is you can just swipe down from your phone and change the temperature of the thermostat or turn your lights on and off. And that's really cool. But there's there's things that don't work, most stuff doesn't work with homekit, you can fire up a Raspberry Pi and run homebridge on it. Apparently, it's not something I've done myself. But that seems like a good option to make those devices work. - -61 -00:28:13,020 --> 00:29:01,470 -Scott Tolinski: Yeah, cool. So let's get into some of the hardware here. This is the fun stuff, man picking up stuff, installing it playing around with it. Like I feel like a kid with some new toys. Whenever this stuff comes in, you get to see what you can do with it and see what kind of events and results you can get out. So let's get into it. First and foremost, with light switches, I have a smart light switch that I bought that is sitting in the in the hardware bin because my house doesn't have the wiring for it. And I I kept on wanting to find ways around this or to get the wiring done. And then it's like past the return date. So I just have a smart switch sitting around and I haven't used it yet. So I'm really interested to hear your thoughts on this. I ended up going with the bulbs, the Philips Hue bulbs, which I'll talk about afterwards. But I want to hear your thoughts on the switches and how they're working out for you. - -62 -00:29:01,560 --> 00:31:36,840 -Wes Bos: Yeah, I love the switches. So we did our main floor, we have potlights can lights like you know those little lights that go into the ceiling, our living room in our dining room, which is connected, we have different lights, which is for both of those rooms. And they have each one has I think like eight different led spotlights on them. Nice. So it when that's the case, you can't use bulbs because they're custom LED lights that go in the ceiling. And especially if you've got like a nice light fixture or things like that you can't go for the bulbs, because it's they're specialized bulbs and they're already on a switch. So we opted for the what is it the lebreton levithan light switches that have a dimmer built into them. And the kind of cool thing about that is because our both of those are three way switches meaning you can turn them on and off from either one. And then the problem with it when you put a dimmer on a three way is that if you've dimmed it at one and then you go to the other switch and turn it off or on then you have to like go to the other one to adjust the depth. And the way that these things work is that they use the this is getting a little electrical, but it uses the traveler wire, instead of like completing the circuit, it uses the traveler wire this to send data between the expensive Wi Fi switch and a much cheaper sort of secondary switch that was able to dim from that one. So that's really cool. You can dim from either one. So we install those in our house. And we love it because you can tell Okay, Google, dim the lights to 30%. And it will dim both of the rooms to the exact same, the exact same dimness, which is great, you can turn them all off at once. So we almost never actually touched the light switches are so obviously they are dumb switches at the end of the day. But we almost always just just use our voice. We have those for about a year. And I was a big fan of that. And I decided to buy more. And we will put them in our kitchen, we put them in our hallway, and we put them in our upstairs, and I went on Amazon and bought a bunch more. And I realized that hey, I installed them. And I was like, Alright, done installing them ready to hook them up to my phone. And the levithan sells two different versions, one for home kit and one for for Wi Fi. And I had bought the home kit ones that don't work with Google Home. And I was so mad because I had spent like all this money and all this time wiring these things up. And the fact that you have to think about this ahead of time, whether you want to use homekit or you want to use Google Home is so silly, because it should work with both right then there's no reason it can't because eco B does it eco B works with homekit eco B works with Alexa with eco B it works with - -63 -00:31:36,860 --> 00:31:44,880 -Scott Tolinski: most things I have worked with everything. So that makes me Yeah, I have some some beef with some of the Levittown stuff that I'll get into in a little bit. But - -64 -00:31:45,029 --> 00:32:20,160 -Wes Bos: yeah, so that sucked. But I got them all switched out. And and they work great. It's super fast. Some of these, like I've had a WeMo switch before. And there's like a one second delay in when you press the app to turn it on and off. And when the relay and the thing actually turns on and off. And the left on ones for me have been been super, super fast. So just full disclosure, I paid my hundreds of hundreds of dollars for those myself. And then people are asking on Twitter and then love with ons like thanks. And then they sent me some plugs, which for me also worked really, really well. But Scott had you've been having some serious grief with it. - -65 -00:32:20,219 --> 00:32:38,040 -Scott Tolinski: Yeah, their Android app is awful. Just jack You're awful. If you like go to register. Well, first you have to register for an account. Okay, that's fine register for an account. They need a lot information, first name, last name, that sort of stuff. Like why do you need this kind of information to turn on a smart turn a - -66 -00:32:38,040 --> 00:32:38,610 -Wes Bos: light on? - -67 -00:32:38,640 --> 00:34:30,230 -Scott Tolinski: Yeah, so here's the kicker. So the, the password field does not have the requirements listed. It's just a password field. It doesn't say you must have this. But if at some point you goof up one of the requirements that are many requirements, you need punctuation, you need capitals, whatever, right? Yeah, if you goof up one of them, the field, that's the retype your password becomes completely inaccessible. And you have to start the entire process over again. So I ended up just even filling out the second register Password field first, just in case it became inaccessible. And then I did it was it was an absolute total nightmare. And then you get to the next step. And it's like, what's your location? And you can say use my phone's location, enter my zip code or skip, you click skip. It says you didn't enter your location. Or both of you told me I could skip it. So I you can't skip it, but doesn't let you So then I'm like, Okay, I'm gonna enter my zip and surprise it saves the zip doesn't let you advance past that screen. Okay, so then I use the third option use my location fine, you can use my location. Okay, usually your location is your Okay. Yes, it is okay, still won't let me pass that screen. Like close, quit whatever reopened it and all of a sudden, I was past that screen. So the app is a total nightmare. I went to connect it to Google Home. And there. My dot Levitan site was for foreing like all of their scripts and just totally a white screen on the website. Their web yet completely down on I tried like five different browsers. I tweeted at them no respuesta so just not super happy without it. Yeah, that's it. The switch is connected to the app right now. And I have it to my studio lights, which is actually really super useful. Have that switch connected to my studio lights, because when I'm recording, I can just hit a button and turn them on. But man, that app is rough. - -68 -00:34:30,330 --> 00:34:59,480 -Wes Bos: Yeah, I often see this with these companies that have been like this is like a electrical company that's been in business probably for 100 years. And they've been making light switches for 100 years and all sudden they're they get forced into being a tech company. Yeah. And and you get these like, and I just didn't feel like usually the good experiences that I've had with companies are there a tech company first that then figures out how to build hopefully safe light switches or plugs or something like that, right? - -69 -00:34:59,520 --> 00:35:05,730 -Scott Tolinski: Yeah. Because the Design interfaces ended up being so much better, which is like a huge thing in this right? It should be easy. - -70 -00:35:05,880 --> 00:35:13,080 -Wes Bos: Totally, totally. I get that. So, that's one option there. People also said you can use the Lutron casita, - -71 -00:35:13,130 --> 00:35:18,710 -Scott Tolinski: yes, I want this casetta because they have a seat, I don't know, it's not a nice so it's not casita, - -72 -00:35:19,110 --> 00:36:04,260 -Wes Bos: okay. This one apparently does not need a neutral wire, which you generally need a neutral wire to get good, a good dimmer on an LED light bulb, which in Canada, you can't even buy, like those other kind of light bulbs anymore. So it's all LED. And that's so I don't know how this works. There's like this, like StackOverflow question about, like, how is Lutron doing this without a neutral wire, and it seems to work. So if you have an older house, it's code now to have your house wired with a neutral to every box. And luckily, our house was rewired just a couple years ago. So we have neutrals everywhere. But a lot of the other older houses don't have neutrals. And if you want the smart stuff, you have to look for products that work without a neutral wire. - -73 -00:36:04,590 --> 00:37:10,530 -Scott Tolinski: So I don't have a neutral wire, which is why I have a smart switch that's not installed. I didn't really looking closely at these Lutron caseta has, yeah, I think I might pull the trigger on one or two of them. We have a lot of these the floodlights, the big dome lights in the top. And even though I'm like really bought into the Philips Hue environment, right now, those bulbs, those ones in particular are expensive. And we have like four of them in Landon's room alone, he's got a tiny room, we got eight in the basement hallway, we got like a billion of those bulbs, we probably have 30 of those bulbs, and wow, you know, 24 bucks a pop, No, thank you. So I'm looking at a smart switch for some of those areas, I have those big floods, and I'm not going to do any fun color stuff in those areas anyways, so I'm going to pick up one of these Lutron caseta, I've heard great things about them. I'm pretty interested in how this is gonna work. One of the beauty of all of these things is as long as you all connect them to Google Home, or your devices, they it doesn't matter the interface, because it's not like you have to pull up an eight different apps to control these things, you can control them all one interface. So I really like that. - -74 -00:37:10,860 --> 00:37:51,860 -Wes Bos: Yeah, actually, I'm the opposite in my basement. Right now, my basement has these like little light switches everywhere, like you've got these little tiny little cords that you pull. And what's annoying is that you realize you forgot one off, you have to walk all through the basement. So I want to go to bulbs that are Wi Fi for that, so that I can control the entire basement on one switch, rather than than having to do it because like my entire house is wired great. And I can use the switches there. But when if you want to combine them, you can go to the bulbs and then you can you can get these switches that just go in the wall. And they don't connect anything because they run on like a coin cell. And then they send the signal over Wi Fi which is kind of cool. - -75 -00:37:51,930 --> 00:38:17,190 -Scott Tolinski: We'll talk about combining things. One of our sponsors today does an amazing job of combining a bunch of different things such as any theme static site generator, or CMS without complicated integrations. stackbit.com allows you to build modern jam stack websites in just minutes. Now this is the first time Stackbit ever sponsored syntax. So we welcome Stackbit as a new sponsor to syntax. So a little bit more about Stackbit is Wes. - -76 -00:38:17,420 --> 00:39:40,290 -Wes Bos: So this is a new sponsors Stackbit. so new that they aren't even open to the public just yet. And I think this is really cool. First time we've had a sponsor, just want to ask you to sign up for their early beta program@stackbit.com forward slash syntax FM. So I had the opportunity to meet the folks from Stackbit at jam stack calm a couple of months ago where Scott and I did the podcast. And I talked about kind of what they're looking to doing. So what they're looking to do is to provide themes for the modern web. And what that means is that much like you would normally just go ahead and grab a WordPress theme. There are going to be offering themes for all of the different platforms that are sort of next generation things like Gatsby Hugo Jekyll, headless CMS is for St contentful, Netlify CMS. And they are quickly expanding into all kinds of different things. And it's kind of neat, because instead of just specifically looking for a theme for one platform, you'll know that these seams will work with all of them. So we've talked about jam sack a lot. It stands for JavaScript API's and markup they're really fast because the way that jam sack websites work is that whenever your content changes, they rebuild and then you deploy a new version. So if this sounds interesting to you, then check it out@stackbit.com as sta ck bi T Ford slash syntax FM Thanks so much to Stackbit for sponsoring, I'm really excited to check out this beta. - -77 -00:39:40,560 --> 00:43:02,690 -Scott Tolinski: Cool so thank you so much for Stackbit for sponsoring. Now in addition to combining different CMS is blah blah, blah. We can also combine lights and switches, which is something that I'm looking at doing in particular because I have bought into the switch or I mean the light sort of thing. I bought a Philips Hue hub and I bought Four white bulbs and four colored bulbs. I think that's correct how many I have. So I have eight of these Philips Hue bulbs. I got two colored ones by office, we got two colored ones in our nightstands. And we have some in the living room and then the dome lights in the bedroom, and Philips Hue. If you want to talk about somebody who has some quality engineers on their team, their app is incredible. Not to mention, you can hook into Philips Hue with a ton of different apps. So you can install a bunch of third party apps as well. One of the things I really like about the Philips Hue app, in particular is that there's whole this whole labs section, which is basically just experiments, so you can install really quickly. One of them is like living room where it changes the colors of the bulbs in a room over the course of 30 minutes and you like hardly notice them changing and all of a sudden, you look up and the colors are completely different than they were before. I've been having an absolute blast with this thing. There's a whole bunch of presets, like you could say, I'm gonna turn my office right now into Savannah sunset. And it's gonna be really nice. It's It's so dang cool. Not to mention the routines that are built into this app are really, really easy. I mean, there's one that's like wake up and you can tell your stuff to turn on at sunrise, you can give it a specific time, you can say gradually turn on these lights over the course of 30 minutes and turn them to this color. So we have our our bedside lamps turning up slowly in the morning, up to the point when it's like time for us to wake up they'll be at full blast. I also have like nighttime routine setup so that our bedroom lights and lights in the living room all dim at a certain time. Then they get a little bit red shifty that all the lights that can change color they turn a little bit red. Get some of that blue filter for romance, right? Oh, yeah, read for romance. Yeah, good. Oh, just give me a nice and ready for bedtime. I such a huge fan. I got sold on these recently, I picked these up. And let me tell you if you thought they were expensive, the white bulbs are really a lot cheaper than they were. Who knows, like last time I looked at these things, I was looking at the prices even for the light bulbs. And we're like, gosh, I can't swing that. But I bought a four pack of the white bulbs for 50 bucks. So it's not that bad anymore. I was expecting it to be a lot more expensive. And so I'm gonna use a maybe a couple more of these based in different spots. I have some some situations that would be really nice for this. For instance, our front porches is glassed in, right? Yeah, so front porches glassed in. And we have one switch that turns on both the outside light Yeah, like front porch outside light as well as the entire front porch. But we don't want the whole indoor part of it lit up. Because we have you know furniture out there we know of people looking in there. So we this is a good solution for me because that outside bulb could stay on the inside ones could not be on and we don't have to change it in the wiring because it's all set up on that one switch. So I'm going to pick up a few more of these. I'm really really liking it the Philips Hue that they knocked it out of the park. - -78 -00:43:02,730 --> 00:43:24,420 -Wes Bos: You know where these are really helpful is if you are rocking a baby to sleep, and you want to turn the lights down or up and you can't move. I can't tell you how many times my wife would text me. Can you sneak into the room and turn the lights off or dim them or make it a bit brighter? I can't move right now baby sleeping. And you could just do it right from your phone which is cool. - -79 -00:43:24,510 --> 00:43:50,880 -Scott Tolinski: Yeah, that's a that's a big one. Yeah, I'm excited to try some of the stuff out in that regard. Another thing that exists are blinds. I haven't used any smart blinds. They seem like a big investment blinds are already expensive. Yeah, but at the same time, I would love this in my life. I don't know if I'm going to ever get any but I would really love to wake up to you know, natural sunlight as the the sun's rising. The blinds are slowly opening I would be sweet. - -80 -00:43:50,910 --> 00:44:44,220 -Wes Bos: Yeah, I've many times consider just building something that would spin the blind you know, you get that little stick on your blind that you spin. And then just like slowly spin that from like 6am to 7am as you're waking up and just have the natural light wake you up instead. I haven't gone that far. Just because blinds are so expensive already. And we we did our house a couple years ago, but it'd be kind of cool to check out. I also use a Chromecast just for obviously the Chromecast is helpful because you can you tell you tell your kids what what we use it for all the time is if we're talking to the kids about tobogganing, we say okay, Google. Oh, sorry. Okay, gargle. Show us photos of tobogganing from Google Photos, and it hooks into your Google Photos or show us photos of grandma or show us photos of Lexan Poppy and then it will just like create a collection of photos and then put them on the TV, and then the kids eating breakfast. So just looking at the photos. It's really fun. - -81 -00:44:44,310 --> 00:45:00,330 -Scott Tolinski: Yeah, I used to Chromecast you know, you can head Chromecast to groups now. Like with Google Home Mini. Oh, if you're playing audio in a group, as long as the Chromecast is the second generation or later, you can have that audio also coming out of your TV via the Chromecast I didn't - -82 -00:45:00,330 --> 00:45:36,060 -Wes Bos: know that we have the first Chromecast maybe I need to update mine. What we use it for a lot is if you have a newer TV and newer I mean last like maybe three or four years and you supply outside power to the Chromecast it can turn it on and off for you. So instead of finding the remote, and we have a routine, they'll say, okay, Google shutter down, and it turns all the lights off, turn the TV off, and it gets us ready for bed. And it's awesome. Because especially with the kids, if the kids aren't listening to you, and they're watching TV, then all you have to do you don't have to find the remote. You can just be like, okay, girl, turn the TV off, and - -83 -00:45:36,360 --> 00:45:38,640 -Unknown: go. Oh, - -84 -00:45:38,820 --> 00:45:49,110 -Wes Bos: well, we already doing so just turning the TV on and off is so helpful to be able to do it with your voice. In a Chromecast is cheap, cheap, cheap to be able to do that. - -85 -00:45:49,950 --> 00:46:57,000 -Scott Tolinski: Yeah, definitely. No. Okay, let's get into plugs. We talked a little bit about the plugs before I have one plug setup for my studio lamps, which actually just got some led studio lamps, dang, there's like 100 bucks. And these things are awesome. Yeah, they're a nice little investment here. But I also have another one that I got a DJI one that's ZigBee. And it was like cheap, it was like 12 bucks or something. And both of the outlets, it's like a full on outlet. So you have to install it like an outlet, right? There's a button on it. But it also connects to smart things, which is like that was the first smart things purchase I had in my entire desk in my studio monitors my monitor, my entire desk itself is hooked up through this switch. So I have a routine that turns my my desk on, it turns it on at like seven in the morning, it turns it off at like eight o'clock at night. So I'm probably not in my office at that point. So that way, my entire desk that all of the power that's connected through there is on off whenever I am working, but I don't even think about it, it just shuts it on and off. It turns off so many devices, I probably have like well 15 devices hooked into that outlet that will turn off and on. - -86 -00:46:57,030 --> 00:47:37,740 -Wes Bos: Yeah, I've got I started off with the I think the plugs is a good gift to get someone as like a sort of a gateway drug into this stuff. Because you can just plug a lamp into it. And then you can turn it on and off with your voice or with the app or whatever it is that you want. So I started off with the sawn off, I talked about this earlier. And the sawn off is like a Chinese $5 Wi Fi based switch, which you can snip an extension cord and wire in on either end yourself and then you've got a very, very cheap plug. The downside to that is that you're giving a random Chinese company your Wi Fi password. And it's only rated for 10 amp, - -87 -00:47:37,980 --> 00:47:39,030 -Unknown: I think 15 amp. - -88 -00:47:39,300 --> 00:48:29,940 -Wes Bos: So you have to do the math like you don't plug a heater into it like I wouldn't we did it for our Christmas tree and our Christmas tree is well well under it. But just do the math on what what is the draw of the load taking because you could you could blow through this thing. So I don't know it makes me a little uneasy of making your own switch. It's been working rock solid for forever. There's they've sell millions of them. They're super cheap. But we also have a WeMo and a now that love athon sent us a couple of them. And it's great because he's hooked up the things that are hard to get to we have got a couple lamps hooked up to them. I like the idea of doing your desk because somebody told me like if you just turn your desk off for the weekend, you could save like 3040 bucks a year on like your standard, just like phantom power things like the battery topping itself up, I've got all these monitors that sometimes like leave themselves on. So that's actually a really good idea of just being able to have a kill point. - -89 -00:48:30,330 --> 00:49:41,520 -Scott Tolinski: I have Yeah, I have one one cable coming out powers the whole desk into a thing. And I absolutely love that. I also have a power strip which is in the same sort of realm as these plugs. And the power strip is sweet because it has like two USBs and four normal plugs on it. And you can turn off any of the plugs individually. Oh, same with the USBs. So yeah, I have like in our front porch that I mentioned was glaston we have some like little teeth. You know those little like dangly lights back and forth. And then we have a Bluetooth speaker while the Bluetooth speakers always turned on because it always is charging. And then we have I forget some other stuff that's always turned on. And then we have those lights but I don't want those lights on all the time. So when I'm out there I can say turn on the lights lights turn on, and a big fan of that. It's also a Chinese company and I'm not super duper boys about Xiaomi No, it's not a company you've heard of. Okay, definitely. Yeah. Jin Woo. I think Yeah, I some of that stuff is a little a little dicey. Yeah, the app was nice enough. The device is nice enough. They sold nice a lot. I think I'm probably a little too trusting of it. But you know, that's next we have thermostats therm thermo stats thermostat. - -90 -00:49:41,520 --> 00:49:42,090 -Unknown: Yeah, yeah, - -91 -00:49:42,090 --> 00:50:20,700 -Scott Tolinski: we both have the Eco B but I've used the nest extensively as well as the Eco b we got the Eco B specifically because we didn't have a common wire on the Eco B has like a conversion kit that you can install on your furnace. Oh, cool. I actually really liked the nest, but we couldn't get it because it did not work with our wiring setups. So instead of trying to have someone install a common wire, we just went with the Eco B and I've been a fan, the little Draggy interface isn't nearly as nice as the twisty interface thing. There's no learning of your habits. But you can set up schedules, which I've done extensively. So you know, when it gets night time, it gets a little bit cooler in the house, things like that. - -92 -00:50:20,880 --> 00:50:46,410 -Wes Bos: It doesn't learn your habits, because we have the Eco B as well. And then they give you like a secondary thermostat sensor that you can it runs on a coin cell, and you can stick we stick that in our upstairs and I've never actually really checked into whether it's figuring out that we're not home. Because when you walk by it every single time it says Oh, someone's home, and then you put one upstairs and it says, oh, someone's home. And you just say there's more learning in the nest one. Okay. - -93 -00:50:46,410 --> 00:50:50,190 -Scott Tolinski: I think there's the Yeah, cuz I did a little bit of research on that when I was picking them up. - -94 -00:50:50,430 --> 00:52:02,490 -Wes Bos: Okay, so um, I've actually never ever really looked into it. But I like it. I like the app a lot. The interfaces is pretty good. I know. We said at some point, the interface for their mobile app was really terrible. it's since been updated. And we said that on the podcast, and then I heard from a lot of people that work at eco be about that. So I'm glad that the the app is much better now. So yeah, I've been I've been a big fan of it. The Alexa integration is kind of cool. If you want like a free Alexa as well. NASA also has a new thing called a nest II, which is like the cheaper version of it. And it seems pretty cool. My dad has it in their house with all these things, at least in Canada, for until we've we recently have some terrible premier coming in Ontario. But there's often like hundred dollar rebates on these things. And you can, that makes these like really nice thermostats, sometimes free, sometimes 50 bucks, sometimes 100 bucks. So if you look into especially if you're in Canada, he looked into some of the different rebate programs. If you buy a nest or an equal b or any of these smart thermostats, they will often send you a check for 100 bucks just because you're obviously saving energy at the end of the day, these things are a no brainer in your house, just because they save you energy at the end of the day. And it's the interface for - -95 -00:52:02,490 --> 00:52:09,900 -Scott Tolinski: it is great, as long as you're using it that way, right? If you haven't set up to be like 70 degrees in your house all the time, you're probably not saving too much money. Yeah, - -96 -00:52:09,900 --> 00:52:29,250 -Wes Bos: no, what we use it for as well mostly is if we're out of the house, and we want to get it nice and warm for when we're coming. Or if we leave for the weekend. And we go Oh, I forgot the air conditioning on your Oh, I better call the neighbors Come come in the house and turn the air conditioning off. Or you can just do it from your phone. I think you do that three or four times it starts to pay for itself. - -97 -00:52:29,340 --> 00:52:48,630 -Scott Tolinski: We're cool. So let's get into cameras. I have the ring doorbell. And that's pretty much it. We have wireless cameras, which we'll talk about. Yeah, a little bit more. But I like the ring. You haven't mentioned here that the app is super slow to open and I agreeance. With that, I get a little message, I click the notification. And then by the time the app loads, nobody's there. - -98 -00:52:49,500 --> 00:54:43,380 -Wes Bos: Yeah, I bought the like the cheap ring, the very first one. And then the snow plow was setting it off every time it goes by. And if you want to be able to select because because our camera can look onto the street. So if you want to be able to select like areas, you have to buy the ring Pro, so full disclosure, they sent me a ring pro in a ring security camera. So we've got two ring, doorbells, one or backdoor one on the front door. And then we have a security camera with a LED floodlight on the on the driveway. So it sees if anyone's coming into the garage. So all of our points of access are being monitored. And it's good. But the app is so slow, when you look it up they're like that's because you're not getting good Wi Fi. And I was like no, we have mesh network in our house. Our entire house is awesome, it's full coverage, I can get really good speed test when I put my phone beside the doorbell and then you open this thing up. And I went through the trouble of hard wiring and everything to get fast response types. And it sometimes still takes like 10 seconds for you to actually see the video feed, which by that time whoever's at the door is gone and you miss them so a little bit disappointed with that if I had paid money for the ring pro I probably would have returned it and tried something else I know that there's a nest doorbell there's a couple other like those locks as well you can get that have doorbell cameras built right into it. So that's good. The LED light is awesome. It's like I think like the more expensive you go the more tech they put into these things because that that light is a couple hundred bucks and it's really really good. The video quality is really good the LED light is spotlights the entire driveway. It's funny every morning my daughter's asked me to look for cats because the cat said there's cats in our neighborhood that come pee in our yard and the cat set it off every night. Nice The only thing that I hate about it is or other than the fact that takes forever to open is that it costs like three bucks a month so you're paying nine bucks a month three devices - -99 -00:54:43,410 --> 00:54:44,730 -Scott Tolinski: we don't we don't pay for that. - -100 -00:54:44,820 --> 00:55:21,030 -Wes Bos: Oh yeah, you want the the footage if you want to be able to access the footage after the fact you have to pay for it and then it doesn't do consistent recording. So like there's nowhere to put like a 30 gig card in it and for it to just record two days worth of stuff. So like if something happened like I had a bike stolen. I luckily got some footage of the guy coming in and stealing it. But I wanted the entire event and I couldn't because it only records like, I don't know, a minute and then it turns off. So I would say if you are looking for a doorbell, it's a good doorbell. If you're looking for security camera, look for something else. Like first and foremost a security camera word. - -101 -00:55:21,270 --> 00:55:31,740 -Scott Tolinski: Yeah. Okay, cool. So we both got some wise cameras and full disclosure, why sent us a couple of cameras, but I also purchased them before they even sent Yeah, these things wide angle lens. - -102 -00:55:31,740 --> 00:55:32,490 -Unknown: Wow, - -103 -00:55:32,580 --> 00:56:07,140 -Wes Bos: yeah, they're really, really good. I bought a so there's this Chinese company called Xiaomi, which has tons of stuff. And yeah, they came out with this camera called the daft Fang and I bought one from China and had it shipped here. And then I realized that they also just rebrand them for the American market called wise wy Zed E. So don't buy the Chinese version, because the setup instructions are in China, Chinese. And I didn't understand it took me forever to set it up. And then the app is also in Chinese. So that was a bit of a silly thing. But these things are like, I think it's like 30 bucks. And like how much was the little wise for you? - -104 -00:56:07,470 --> 00:56:10,050 -Scott Tolinski: It was cheap, like $24. - -105 -00:56:10,080 --> 00:57:17,580 -Wes Bos: Yeah, and it's super crisp. So we put one in my daughter's room we are baby monitor kept flaking out. So we just put a Wi Fi camera in her room and the super wide angle, you can pop an SD card or a USB stick in it. So if you've got like an old like 20 gig or 28 gig USB stick, you can just pop it in the back, it will detect motion, you can do time lapses on it $30 one, which is the expensive one will rotate a full like 270 degrees or something like that, which is more than enough. There's some stuff on Amazon you can buy that will make it like an outdoor camera. I haven't done that just yet. And then the app is free. So there's no like monthly payment thing that you need to do to pay for this thing. Really the only thing it doesn't do, which is what we're trying to scan are trying to do right now. It doesn't give you an rtsp stream, which is a real time streaming protocol. And if it does that most IP cameras do that. And you can run your own server for security cameras. And you can stream that right off of that there are a bunch of hackers out there that have figured out how to flash these super cheap cameras. So if you had any headway on that, I haven't tried it yet. I - -106 -00:57:17,850 --> 00:58:14,850 -Scott Tolinski: it is a rough going. I'm gonna tell you that right now. I've been working on it for a couple days now. And I am so close I have the firmware flashed, it loads up the the web interface, I can connect to it. But the rtsp stream Yeah, it says that it's it's running. But I don't get I get like one frame of video I like don't get continuous video, try to connect to the rtsp stream. It doesn't connect. So I am so close. I have the web interface up that like the custom firmware is clearly installed. I've been poring through the logs. I've been tweaking settings in config files. And I'm so close. I issued it, you know, on the GitHub, I have a GitHub issue open for for my problem. Yeah. And then the most frustrating thing is somebody responded to it. And they're like, I have the same problem. Here's my problem. And you're like, No, your problem isn't the same issue. This is this is not the same problem - -107 -00:58:15,060 --> 00:58:39,630 -Wes Bos: yet. I'm really curious to see, because you also just bought the Synology, which you can run your own local surveillance system. You could Yeah, like I think like a 32 gig card will give you like at least a couple days worth of saved footage. So you could put a 500 gig hard drive in there and save every second of every day for multiple cameras for years. And I think that'd be so cool. - -108 -00:58:39,690 --> 00:58:41,610 -Scott Tolinski: I got 16 terabytes in that thing. - -109 -00:58:41,640 --> 00:59:52,170 -Wes Bos: Yeah, if there's anything and I'm saying this as someone who spent my own money on it, and then they we asked them for some more so we could review them on the show. If there's anything to spend your money on, I would for sure pick up one of these wise cameras right now this I'm looking at right now. 25 bucks, 38 bucks for the one that tilts and pans. They run on USB, and they come with a super long USB cable. So you can you can plug it in anywhere the cable is nice, good quality. And you can daisy chain them because there's a USB in the back of it. So you can daisy chain them as long as you want because they all they need is enough power. I don't know if as long as you want, but I did two off of each other and I've heard of people doing four or five. So it's pretty cool. I think I think I would check it out. I'm really interested in checking out the outdoor enclosures for them to see how they fare in the Canadian winters. Just because I would love to mount one of these on like a garage or something like that. Or I don't figure out how to get a tower. Yeah, everyone's like what kind of neighborhood do you live? I don't live in too bad of a neighborhood. I just love No, I just love the idea of having like lots of cameras outside just because I have had a bike stolen and I'd like to be able to check what's going on at the house when I'm not there. - -110 -00:59:52,380 --> 01:00:45,000 -Scott Tolinski: Yeah, you can occasionally get a little weird things. I mean, we live in a city so yeah, it's it's safe, but it's like it's a city still. Nonetheless, we had one of our neighbors It was like right down On the street, we're gonna save neighborhood and is like some random guy walking around in our backyard. Here's the footage. And it's like, sure enough, some random dude walking out of this backyard. And we're like, Well, that doesn't sound great. I don't want random people hanging out in my backyard and middle the night. Yeah, that doesn't, you know, so it's super cool. I like the idea of this. I'm gonna keep trying to flash this hardware. I got people on the GitHub helping me out. There's a getter too. So cool stuff. Next, we're talking about mesh Wi Fi. I have a Google Wi Fi, I got three little pods. I think you have a Google Wi Fi. This is like the app for Google Wi Fi is so good. It's so good. You can monitor devices, you can turn them off, you can kick things off the app, you can test all your your network strength all over the house and see your blankets and stuff. It's good. My big fan, - -111 -01:00:45,030 --> 01:01:46,230 -Wes Bos: I have the amplify mesh network, which is from ubiquity. ubiquity is like a corporate. Like they do commercial stuff. And then they made a for home one, and it works great. They have these little, the only thing I don't like about it is that the access points obviously need to be plugged in, they swivel so you can like you can tilt them and get like you can really see what the strength is. And that's great. But my daughter's friggin love twisting them because it's it's based on a magnet. And you can just you can yank the whole thing off if you want, which is like it's a great product. But it's so fun to play with that my daughters always do it. And they're like, Oh, stop touching the Wi Fi. And then yeah, it's pretty good though. I'm a big fan of that one as well mesh network. If you're doing any of this stuff, you definitely need a mesh network unless you live in like 1000 square foot house. We don't have a huge house but just like old plaster, multiple levels. weird thing, let's make the make the internet drop off and corner. So especially if you want to do cameras, you need Wi Fi outside your house and in your garage if you want to be able to be running these things. - -112 -01:01:47,190 --> 01:02:11,190 -Scott Tolinski: Word cool. So fire alarm co2, there's a Nest Protect the app, which is the big one, but those are expensive. I know my parents have the Nest Protect and they really like it that said we have no smart fire alarms or co2 detectors. We have a bunch of kitties all over the house kitties. Yeah. Because the brand and then just some really dumb annoying fire alarms that run out of batteries all the time. - -113 -01:02:11,220 --> 01:03:03,060 -Wes Bos: Yeah, we've got the couple NES protects, which I was really excited about getting them and we had the first generation which was susceptible to dust. And I lost it and went off in the middle of the night one hats up there smoke and I like kicked down the door of my daughter's bedroom at like 2am and I was like where's the fire? And I could not sleep the entire night. And yeah, because you think it maybe there's a fire somewhere? Yeah. And then I realized you can't put regular alkaline batteries in them. Because after a month, it thinks that the batteries are dead. You have to put like Energizer lithium in which are super expensive. And like who wants their smoke detector hooked up to the internet. So I think that that it's dumb to buy a smoke detector co2 detector that's hooked up to your Wi Fi. Yeah, you can get alerts when you're not there. But like what are you gonna do? If that's happening? I guess you could you could call the fire department. - -114 -01:03:03,690 --> 01:03:04,290 -Unknown: Fire Department. Yeah, - -115 -01:03:04,530 --> 01:03:19,290 -Wes Bos: that's that's thing but I don't know, I'm kind of underwhelmed, especially by the amount of like babysitting these things need they need to be updated. I think just a is a smart co2 detector and fire alarm to and one is probably a better buy - -116 -01:03:19,530 --> 01:03:20,610 -Unknown: word. Okay, so - -117 -01:03:20,610 --> 01:03:23,310 -Scott Tolinski: next is garage door opener. I don't have one of these Do you - -118 -01:03:23,370 --> 01:04:35,940 -Wes Bos: know I've been looking at it. So all garage openers made in the last like 810 years or so or 15 years operate on a certain frequency that is harder to crack than the earlier ones. So you can go online and find somebody like uses like a diary, like this girl's diary to open up all these garage doors, it's a bit harder to out but they're all based on this radio frequency. You can buy like $100 attachment that will work with most I think it's called like my link or my home or Chamberlain my my whatever, there's things online that will also like you can just buy like a like a 510 dollar ZigBee IR sensor and hook it up to that you could do it yourself. So that's kind of something I want to go with next the other the other thing you need to think about though is that that will just send the data but you also need data if it's open or closed. So in that case, you need another sensor on the door itself. I'm actually really interested in this because if our hatch of our cars open the door will scratch the hatch. So with a very careful that you close the hatch first and then close the garage door. So it'd be cool to like have a sensor on the car and a sensor on the door and a sensor on the closer and say do not close if the car is in open state. So it probably will never actually do that. But that's just a thought I yeah, - -119 -01:04:35,940 --> 01:05:22,320 -Scott Tolinski: that sounds like that sounds like a lot of work. Yeah. Next we have a couple of non connected smart items. I have some solar powered lights that are awesome. I also have some USB powered lights that are awesome that are also motion detection. But I've won that solar powered outside motion detection walk it goes on and off. That to me is a smart device because well you don't have to touch it. You set it up. It does things automatically for you but it's not connected to the internet. No doesn't need to be, I really don't care if this thing is on or off, but I want it to turn on or off. When I walk outside, I've actually been looking at some of those dangly lights that connect via solar power as well. That way you never have to find a plug in, you never have to look for a plug, I got a lot of stuff that isn't near a plug outside that is like not super ideal. Also looking at solar powered Christmas lights for next year, a little bit of fun stuff there. - -120 -01:05:22,350 --> 01:06:19,860 -Wes Bos: Mm hmm. On the same idea locks, we looked at the smart locks when we were replacing our doors. Like what first they're super expensive, we replaced three doors. So they're 200 bucks a locks, it's $600 right there. And the other thing is that it sucks to open your phone to have to unlock the door, if that's what you want. I know there's proximity ones that you can do with like a like an apple watch that be kind of cool to have. But we opted just to go with the dumb version of that, which is just a PIN code, you can load in code. So if you've got a cleaner or a tradesman coming over, you can add a code for them and then take the code out later. It's not like a nice slick app interface, but it works well enough and then we never touch our keys have been on it. Like I've said we I hate carrying keys I haven't used the key for my door, since we put these things in is simply just a nice little code that you punch in. And the only thing is, is that if the battery dies, you have to use a key. So it tells you probably two weeks before the battery totally pooches out which is good. So just something to think about there. - -121 -01:06:21,060 --> 01:06:27,780 -Scott Tolinski: We get locked out a lot so we've had a locksmith come to the house twice now. Oh, it might be time to get us some air lock totally - -122 -01:06:27,810 --> 01:07:30,980 -Wes Bos: we also have two roombas one on each floor I found one of them at a yard sale for really cheap and and then we bought the other one there. Okay, the Roomba you have to we joke all the time because we turn the room bond before we leave to like go to the mall or something. And then we come home we're like let's play find the body. Because it what happens is that it like not on the literal body not with the Find the Roomba Where Where did it go because it sometimes will like suck up like an iPhone cord you forgot to pick up or it will often get stuck on one of the heating grates, which is silly. So it's okay. It's nice for a little quick clean. But sometimes we think like, we just spent 15 minutes picking up everything off the ground, all the toys, all the little things that might get stuck in it. And then every time we come home, we find out that Oh, Roomba sucked up something that we didn't find and only cleaned half the house, just get the regular vacuum. Nice. So I think that's it, we would love to hear from you. But what you have suggestions, and then uh, Scott, what are you looking at doing and maybe the next one before the next show, - -123 -01:07:31,260 --> 01:08:03,720 -Scott Tolinski: I'm looking at motion sensors, door sensors, you know, to be able to determine if doors or windows are open just like some of the main ones one of our front doors like if it's not shut locked, I can just open on its own, which isn't great. Yeah, that's not a great thing. So I'd love to be able to know when that door is open. I have on here blinds but I'm not gonna buy a blinds. I think that's just an interesting idea. I'm going to be picking up more bulbs. I'm going to be picking up some, some light switches. And who knows, maybe based on the suggestions that we hear from our audience what people are using and liking. Maybe I'll be looking at something else. - -124 -01:08:03,749 --> 01:09:53,850 -Wes Bos: Yeah, the one that I'm teetering on right now is fireplace remote that is at least smart home because the what we do is we say like, okay, Google, I'm watching a movie or sorry, okay, Google, I'm watching a movie or Okay, Google shutter down and it turns off all the entire lights house, it's like eight different light switches, and it turns off the TV and then what we're hoping to do is then dim the upstairs light to like 10% so we can walk up and go brush your teeth. And then the one thing we have to do like a sucker is walk over and get the remote for the our natural gas fireplace and turn it off manually. So I don't like the idea of connecting fire to the internet. So I'm kind of out on that. But I do like the idea of it being all one command before we could I know this is this is very first world problem but I live in the first world and these are my problems. So I've been looking at hooking our fireplace up I want to get constantly recording camera so that these wise cameras seem to be it especially because you don't even have to hack them to constantly record you can just pop a SD card in the back and it will record a couple days for you which is nice you can go back and review all that footage and then the sensors so there's this Chinese companies show me that has tons of stuff if you go on this website called gear best you can import it they're the ones that make those scooters that you can ride in San Francisco and they make all kinds of smart stuff and they've got like $10 sensors galore. So I think I am going to get one of their hubs the Xiaomi hubback I would love to like have like a TV somewhere in our house that has all the temperatures and and everything like that That's the dream at least so we'll see. Other than that, I'm think I think we're going into the hub stuff which is what we're life hub life yeah. So that's it for today. Do you got any sick pics real quick? I know we're way over on time right now. - -125 -01:09:53,909 --> 01:10:11,790 -Scott Tolinski: Way over no my I'll just use sick pics the Philips Hue bulbs to keep it on brand here on topic. I really loved those bulbs. I did not really consider them and then when I got them based on a recommendation from a friend, I've totally blown away by the experience. I'm a huge, huge fan. And I'm gonna continue to acquire more - -126 -01:10:11,790 --> 01:10:18,390 -Wes Bos: awesome. Yeah, I'm gonna just everything I talked about today's is probably suspect. Shameless plugs, shameless plugs, - -127 -01:10:18,390 --> 01:10:29,479 -Scott Tolinski: levelup pro level up tutorials, comm forward slash pro a new tutorial series every single month, new features are going to be added to level up tutorials constantly This year, we're working on a lot of great stuff. So check it out. - -128 -01:10:29,699 --> 01:10:58,140 -Wes Bos: Awesome. All my courses, I make web development courses are available at Wes bos.com for slash courses, you can check that out and learn JavaScript, CSS, whatever it is, there's lots of free ones also paid ones. So check it all out. That's it for today. Thanks for sticking with us. If you have suggestions for your own Smart Home stuff, let us hear it or at syntax FM. I'm at Wes Bos WS POS and Scott is at stilinski sto LN sk II. Yeah, awesome. Nailed it. That's it. - -129 -01:10:58,170 --> 01:11:15,960 -Scott Tolinski: Also let us know what you're doing with web stuff in here. Yeah, using any fun web stuff. If you're, you know, hacking this stuff in any sort of way, and writing your own interfaces. I want to see it. I want to hear about what you're doing. I think that's interesting. So maybe we'll get into a little bit more of that in the part two, when we talk about this in a couple of weeks. All right. That's it - -130 -01:11:15,960 --> 01:11:19,140 -Wes Bos: for today. Thanks for tuning in. We'll catch you next week. Please. - -131 -01:11:21,140 --> 01:11:30,890 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax119.srt b/transcripts/Syntax119.srt deleted file mode 100644 index e76a3e36f..000000000 --- a/transcripts/Syntax119.srt +++ /dev/null @@ -1,88 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott L. Todd. Total in ski. - -2 -00:00:25,890 --> 00:02:26,580 -Scott Tolinski: Oh, welcome to syntax and this Monday tasty treat, we're gonna be talking about better living through side projects, aka how to make your life better by utilizing the skills that you have as the developer. And there's a lot of bonuses here, which we'll get into later in this episode. Now, if you want to be monitoring some of your projects, aka if these projects turned into things that are not so little anymore, you're going to want to go ahead and use century at Sentry dot i o Now, Sentry is really just an amazing place to monitor and keep track of all of the errors, exceptions and bugs in your site. It gives you amazing information allows you to mark things as resolved, ignore them, and basically give you full visibility into what is going on in your site. I recently got an email from Sentry letting me know sort of the status of the bugs or the errors in my application over the past week. And I thought that was really nice to have a nice little aggregate view of that. You can also view stats, you can view activity, and you can bookmark issues and then write to GitHub, all that good stuff. So if you want to check out century, which we highly recommend you do, I'm a huge huge fan myself, use it personally, head on over to sentry.io and sign up using the coupon code hasty treat all one word, all lowercase, and you will get two months for free. This is something again, the proof is in the pudding, you're gonna want to go ahead and check this out. sentry.io. Again, you know, if you have any sort of project that's online, people are using it, don't let your users be the first one to tell you that there's a problem with it, check it out. sentry.io coupon code, tasty treat. So let's get into this a little topic about side projects here. And I love side projects side projects have taught me so much in my development experience. So let's get into some of the why why the heck do you want to go ahead and have a side project, maybe even on work time or home time or some of this time that you have available to you that you're not superduper? Busy? - -3 -00:02:26,610 --> 00:04:29,490 -Wes Bos: Yeah, maybe we should just like bream this episode of why we came up with it. So I talked in the past how I like to buy and sell bikes, and I don't do too much anymore. But I also love a good deal on the classified website. So in Canada, we use one Coco Gigi does, obviously Craigslist Facebook marketplace is coming up, let go is a is okay, it's a lot of people use it. So there's stuff on there, I don't really like it. But I don't like unfortunately, people use it. And there's a lot of frustrations across all of these different ones. And my wife and I are looking for a whole bunch of stuff right now. And what so what I did is I built like the sort of aggregator that would go off every couple of minutes and search all of these different sources, come back with the listings and then put them into a database and then display them for me in like this card layout. And then we can now we can just check them off and say no, I don't like that. And we'll never see it again. So we have this nice interface for all of our searches. And and I thought like this was just something that was bugging me on Friday, at lunch. And by Friday at three o'clock, I had a little prototype up and running, I showed my wife, she's like, this is awesome, like so much better, we're gonna get a hold. But we already got one like really good deal because of it. Because as soon as something's listed every two minutes, you can check it. And if something's weird, like 20 minutes new, you can jump in the car and go grab that thing before anyone else is going to be because most of the good deals are gone within a day. And the stuff that you see after just searching is not that good of a deal. So that's my idea, I scratch my own itch. And at the same time, I was like teaching myself how to do more advanced react hooks, all of the side effects, context, all that stuff. I think that side projects like this are really important to your professional development. Just because you're having fun, you are invested in it, it's solving a real problem that you have. And it's something you can do to kind of do quick and dirty. It's not something that has to follow best practices or, or be the most like email, have to think of every single use case, you just got to hack something together. And I attribute a lot of my skill set to having these problems and trying to solve them as just being a developer. Yeah, - -4 -00:04:29,510 --> 00:06:32,220 -Scott Tolinski: I learned so many things through these kind of side projects. So I mean, you really hit on a lot of the points that we have here. Like why would you want to pick a project to scratch your own itch that's maybe not something that you can sell or not something that is going to be like a business thing. I mean, again, you touched on all of these one, it keeps you sharp, it allows you to learn new things that allows you to take on new technologies and experiment with them in a way that it has low, low, low stakes it all you know goes belly up. There's no problem about it right and it You're also building things that are useful to you right there, you're building things that are going to make your life better. And we, as developers, we do all this stuff, right to build things. And we're building interfaces. And, okay, here's the homepage, blah, blah, blah, but you have the ability to build things that are actually going to make your life better as a developer, even if you don't realize that. And I think I first realized that when I started getting up into some side projects based on my hobbies, so I guess that comes up to our next point, which is, how do you come up with these ideas? Right? How do you come up with a side project that is going to be useful to you. And for me, I always look for things that are a pain point in my life. One of the side projects that I'm considering making here is sort of like a recipe app for my wife and I, and we have a hard time picking recipes each week, like stuff we want to have, it'd be really nice if I had a little system that had all of our recipes in it, not necessarily the recipes themselves, just the meals, right? Like here are all of the meals that we make and like, yeah, maybe even some restaurants or whatever. And then you could say, What haven't we had in the past month? Okay, give me things give me only options, type of food that we haven't had here, that would be so incredibly easy to throw together. And it could be just customized to what we want, right? It's not for other people, we wouldn't have to have like an auth system or something like that. It's just it would just be for us. And it would be superduper easy. And all of our recipes would be in there, all of our meals would be in there. And maybe even just say, hey, auto generate me five recipes. And then you could swap some of them out based on when you last had them or what you actually want. - -5 -00:06:32,370 --> 00:07:23,520 -Wes Bos: That's such a good idea. I find myself starting little side projects, just whenever it is that I like I just explained we had a problem with existing websites, the interface was really frustrating the their notifications, were too slow. It didn't span all of the Facebook marketplace and Kijiji In my case, and I wanted to pull them all into one. And it's cool because you can like get a little bit of a competitive advantage in life. Being a developer is amazing. Because you actually have the tools to do stuff. I always get jealous of my friends who have carpentry skills or home renovation skills or like small engine skills, like some of them will just buy a lawnmower and flip it and make a couple hundred bucks and like, Oh, I wish I had that. But then I realized like, Oh, I actually do have a very, very good skill set. And that's the ability to pay anything on the internet. And yeah, you know, like, well, this - -6 -00:07:23,520 --> 00:07:44,670 -Scott Tolinski: smart, connected home stuff, your skills to build literally anything that you know can control so much of just like, Man, it's so funny. You could have Oh, when a bike of you know, a certain bike in a certain price range comes on Kijiji all of the lights in your house could start flashing. And you could build all that. Yeah, pretty easily with your skill set. It's ridiculous. - -7 -00:07:44,880 --> 00:08:29,160 -Wes Bos: Yeah, so figure out what it is. And I hear from people all the time, especially people who aren't developers, they say, I'm super into paddleboarding, or kayaking, or breakdancing, or they have a hobby, and they have this thing that they think would help them become better at their craft, or make their life a little bit easier or track their recipes, like Scott was just saying, and it's cool, just go ahead and start to make some you don't have to make it a huge public thing. It might not go anywhere, but a guarantee along the way that you're going to, you're going to build something and you're going to learn a lot for whatever it is. It's kind of interesting. I even people take my courses, I often see them take the the app that we build in the course and then they modify it for whatever it is that their pain point is. - -8 -00:08:29,270 --> 00:11:02,520 -Scott Tolinski: I always encourage that. Yeah, I always encourage that say, hey, if you don't care about, like TV shows, and I'm using this TV database, yeah, go ahead and do like literally any other API that you want to use for this thing, because we talked about that our learning episode, a lot of the times you learn stuff so much better when you're invested in it for some reason. So don't like try to force stuff that you're not interested in, because being interested in being excited about is going to be not only just good for your learning of whatever you're using the side project for, but you're actually going to want to work on it. Right. And I think that's a big thing. I often pick things that are based on hobbies. Again, you mentioned that as like people are into stuff, right? How many web developers are into specific things like everyone has their own hobby, right? But how many web developer B boy breakdancers? Are there? Maybe 100. So I don't know. There's not a ton. And so that leaves you open to say, hey, there's probably not a good app in this space. Because the people who are in this space probably aren't web developers, or even like smoking meats. I had one of my co workers at one of my agencies was so into brewing beer. And he had his whole setup via Raspberry Pi's he could check everything. And it was just sort of like you are the perfect person to do this. Because you have both the knowledge of brewing these beers as well as the knowledge of this web app that you can throw together. Yeah, so I use my hobbies all the time in this one of the things that I built was I've mentioned it before on this show was called B boy tools. And I'm a breakdancer for those of you don't know I've been breaking for like six 10 years or something a long, long time. And in a competition, all the music is random, you don't know what you're going to do ahead of time, you sort of have to be in the moment. But at the same time, if you do one round of the competition, the next round of the competition, you can't do the same moves you just did in the previous round, because the judges are going to be like, Okay, this guy doesn't have any moves, he's got one, one round of moves. So what I built as an app for me, that allowed me to basically have all of my moves, categorized and organized, they could build the sets for me can tell me what to do. But I can also check off if I've done them in around or have done them in a battle so that when I'm preparing for my next round of the competition, I can look at this app and see, alright, this is all of the stuff I haven't done yet. This is the stuff I can do. And I'm not going to repeat any moves, I'm going to still look good with what I'm doing. And it like, to me, I also use this thing as a training tool. It like fires the air horn club air horns down every 30 seconds. So I can pack this, like being really hard on for 30 seconds and hard off for 30 seconds and resting. I know the West is laughing I set that up. Alright, - -9 -00:11:02,550 --> 00:11:04,260 -Unknown: carry on. Carry on. - -10 -00:11:04,290 --> 00:11:17,370 -Scott Tolinski: Yeah, and I absolutely love this tool. And I built it for me. I actually have Austin there. So anyone can use it. But I built it for me. And it does all the things I wanted to do. And I use it all the time. Yeah, - -11 -00:11:17,370 --> 00:12:02,340 -Wes Bos: I think we've got our point across here, find something that interests you find a problem that you actually have, find something that can make your life better and try to build that thing, you're gonna your skills will come along, because along the whole way, I told myself, I'm going to build this thing. But I'm going to only be using stuff that like new new tech. And for me it was I was using all the React hooks stuff, I had to use react hooks like quite a bit already. But like this was just different situations that I had found myself in with react hooks to how to fetch data and store data and be able to refresh it. And I think that's really where you start to get it because you can you can read the docs, you can watch a tutorial on how react hooks works. But until you are actually implementing it and running into specific situations for how you're building your app. I think that's where it's really going to set in. - -12 -00:12:02,610 --> 00:12:04,350 -Scott Tolinski: Yeah, you always get into stuff. - -13 -00:12:04,380 --> 00:12:05,190 -Unknown: Yeah. Okay. - -14 -00:12:05,190 --> 00:13:07,560 -Scott Tolinski: So if you were starting a project like this, what would you use, I know exactly what I would use. Because I have a stack that feels very nice to me, I use Meteor, I would use Meteor in a heartbeat. For any of this stuff. One, you get built an auth, you don't even have to do anything for auth. It's just there, you get a database built in, you don't even have to do anything, it's there. You can hook up graph qL if you want to go that route. And I probably would just because that's what I've been using lately. And then you can throw react on there. And to get set up with something with off with a database would take maybe like five minutes if that and I could start cruising from there saving stuff, the database. Meteor has this really like fun, insecure mode, which is obviously not something you want to use for anything meaningful yet, but allows you to do database inserts from the client side. So if you really want it to get going really quickly, you can write all these Mongo inserts directly from the client side without even have to worry about setting up an API. And it's just superduper fast. So I grab Meteor and all sorts of times like this. And that's probably where I would go, - -15 -00:13:07,710 --> 00:14:10,140 -Wes Bos: my sort of go to when I want to build something real quick like this is I grabbed next jass, which allows you to get react up and running without any setup is create a pages directory, you create a components directory, and you go from there, I usually whip up Express on the back end. In this case, I used just express and this package called disk dB. And this DB will allow you to just save anything, no schema or anything to JSON files. And it has a very similar interface to MongoDB. And that way, if I wanted to go ahead and swap it out in the future, I could The only thing I don't like about that is that I found myself writing all of these like refresh queries and whatnot. And I thought like, oh, if this was graph qL, I could just have a subscription directly to this data. And they would just update it in real time. So I think that what I want to do now that I've got it up and running is figure out how can I port this to graph qL? I know what my data looks like now, which is sort of a frustration with some of these things you need to know you need to know a schema ahead of time, when you're just trying to prototype stuff. You don't know what the schema looks like. - -16 -00:14:10,170 --> 00:14:12,720 -Scott Tolinski: Yeah, that's another word for Meteor. You don't need the schema. - -17 -00:14:12,780 --> 00:15:01,920 -Wes Bos: Yeah, there you go. So maybe I need to try something like that out. And that all obviously there's no auth as well. So I don't even have like people asked like, do you have like a starter file for this? And like, No, I just create a front end folder, I create a back end folder npm install, express npm install next, and I'm up and running. So I think what's important here is you just maybe just use what is fairly comfortable to you, but is going to push you a little bit over over the edge so you don't learn a brand new stack unless you've got lots and lots of time. But for me it was I just have this afternoon. I'm super excited about this, this thing right now. And I want to get it up and running. And then what I'm doing now that it's actually something that my wife says she'll use is that I'm going to spend maybe one more day on it just making, taking her feedback and getting around up and running. Nice. Yeah, I - -18 -00:15:01,950 --> 00:15:34,980 -Scott Tolinski: think this is great. This is really super cool. I think this is something that people will probably need more of in their life. Personally, I attribute so much of my like extreme growth in areas when I'm like trying to learn something new. A lot of my growth comes directly from the side projects that I hustled on. So I think it's a an important opportunity. And it's something again, if you don't have the time, don't stress out about it. But maybe you can throw an hour here or there into something, or maybe you have a weekend and you can dive into something. But again, fun, learn stuff and make something useful. Awesome. - -19 -00:15:35,010 --> 00:15:48,800 -Wes Bos: So I think that's it for today. Hopefully you stop this podcast and immediately go start working on something after this. Let us know what your side projects are maybe things that you do yourself to scratch your own itch. Tweet us at syntax FM, and we'd love to hear those. - -20 -00:15:48,990 --> 00:16:04,470 -Scott Tolinski: Yeah. Also, in addition to your projects, let us know what they're built on. I want to know what people are building these projects on what are some capital systems? What are some easy things to get up and running with a nice little side project. So yeah, share some code if it's open source to share some project or just tell us about it. I want to hear all about it. - -21 -00:16:04,650 --> 00:16:09,750 -Wes Bos: Cool. That's it for today. Thanks for tuning in. We will catch on Wednesday later these face. - -22 -00:16:11,730 --> 00:16:21,510 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax12.srt b/transcripts/Syntax12.srt deleted file mode 100644 index a60a932b9..000000000 --- a/transcripts/Syntax12.srt +++ /dev/null @@ -1,636 +0,0 @@ -1 -00:00:06,000 --> 00:00:11,220 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:15,750 --> 00:00:44,190 -Wes Bos: Hello, everybody, welcome to syntax. Hopefully, hopefully you're ready for a another week of tasty treats. Today, we're gonna be talking all about VS code Visual Studio code, which is the hottest editor up and coming. I've recently switched to it from Sublime Text. Scott has been on it for a number of months now, kind of dancing between sublime and Adam. So we're gonna be talking about like, why is everybody switching over to it? What is so good about it? Why you keep hearing about it? So let's jump into it. - -3 -00:00:44,640 --> 00:01:27,300 -Scott Tolinski: Hey, Dan Scott, doing super good, dude, super good. I just finished that up. You know, I've been talking a lot about my rewrite of my card system and stuff like that. I just wrapped it up. It's going to be coming out as of the time of recording, it's tomorrow, but it will be at the time of release this podcast today. Which is weird to time travel like that. So yeah, so it will be out on Wednesday. And it shouldn't really mean a whole ton for a lot of people. But it's a huge thing off my plate so that I'm going to be just opening the floodgates for no new content, which isn't God, I've just been, you know, dying to get this done so that I can just start grinding out a ton and ton of new stuff. So happy to get that done and hoping that it launches and releases without any sort of troubles. Fingers crossed. - -4 -00:01:27,570 --> 00:02:22,560 -Wes Bos: Right on. So I've been lost. I think the last three days of last week, I spent porting over my cobalt to theme, which is that that blue theme that you probably see in a lot of my tutorials, I've ported that over to VS code. I've actually had it in sublime I initially built it actually initially built it in. What was that coda initially built an encoder, and ported it to sublime. And then it's been ported to atom, which is a really good fork for atom. But there wasn't there was a couple forks for VS code, but they were all terrible. They're all not like, quite good. So I spent like a full three days going through all of the little finicky details about this actual cobalt two and porting it over. So pretty happy to have that that was a huge part of me wanting to switch over, but I couldn't because my theme wasn't there. And I just didn't feel super comfortable moving over. So put some time into that. - -5 -00:02:22,740 --> 00:02:26,280 -Scott Tolinski: It's got to feel right, your text editor has to feel like home, you know? - -6 -00:02:26,550 --> 00:02:55,860 -Wes Bos: Yeah, it's especially time we're all busy. And we don't have time to spend switching over. Like if something's going to make you less efficient than then why would you do it? Obviously, like a little short term payoff is okay. But if there's enough annoying things that get in the way, then what happens is you sort of shelf it and move back. So I guess that will sort of like lead into it. Like what what is our experience with using VS code? I know you've been on it for a while. Why don't you tell us your little journey? - -7 -00:02:56,190 --> 00:05:47,520 -Scott Tolinski: Yeah, so that was I mean, for me, I think that like you said the the sort of that pain point of starting something and not having it be totally ready for yours. I jumped on it really early. And I think because of that I may be caught it a little too early and pretty much jumped immediately back to Adam, which was the editor I was using at the time. Before that I Well, okay, let's let's jump all the way back in text editor. History. For me. I have Dreamweaver for non for very long, but that's where I started right? A long time ago. Yeah, I never really got into Kota, I went to textmate, like, pretty immediately. So textmate was sort of like the precursor to Sublime Text. Yep. And then textmate two never came out. So Sublime Text two ended up sort of being the text made to that everybody wanted it to be. And, you know, I was on sublime for ever and ever and ever. And, you know, you really don't have too many problems with your setup until you find out how much better things are in different ways. And I've always been kind of an interface guy, as much as I love code and getting into code. If I'm in an application, like, and I'm installing extensions and stuff like that. I like pictures. I like descriptions, I like links, I like stuff like that. And when Adam came out, I really liked that it had all that stuff, right? I know, the Sublime Text interface wasn't bad or anything like that using package troll. It wasn't a big deal. But with the atom way, you got to actually get docs. For each extension, you got to have a little bit more information, maybe some screenshots or something, you had a lot more information. So you knew what you were installing when you're installing. And I found I installed a lot less extra stuff because I wasn't like hunting for something. So you know, I jumped on Adam, and I was I guess I was pretty happy with it. I was never satisfied with its performance ever. You know, I was always really laggy for me. And then even when they fix the general lag Enos of the app and it was a little bit more responsive, doing things like a Find and Replace over a lot of files would just sort of like send your computer to a halt. So, yeah, so I was I was constantly Maybe like flirting with going back to Sublime Text, and then would run into things like, Oh, you know, linting has an uncaught error, that you got to open the, you know, terminal to figure out what it is. But everything is, is kind of hidden in Sublime Text. And it's not like it's a bad thing you can find anything you need. And you know, it's a lot of its laziness. But for me, I like a good interface. And I like a well designed interface. So, so I hung out with Adam, even though it wasn't totally satisfied. And then, when VS code first came out, I tried it immediately and was not super impressed with some of the interface II things. It seemed a little clunky. In some aspects. Some of my keyboard shortcuts didn't come with me, you know, like, command one through nine and, and things like that. You were just sort of like, what is this? This is foreign? - -8 -00:05:47,610 --> 00:06:00,240 -Wes Bos: Like, yeah, it was a little like, I hate to say it, but it's a little Microsoft D at first, right? Was it it sort of carried over a lot of the things that you're used to in a Microsoft product and that are totally foreign to us as Mac users? - -9 -00:06:00,540 --> 00:06:48,870 -Scott Tolinski: Yeah, so it didn't feel like totally like home like you want it to write? Yeah, eventually I stuck with it. For one thing, I was working on a large project, and Adam just flat out couldn't handle it. I have been so far off of sublime at that point, I would have to have totally reconfigure it. So you know, I just started configuring my VS code, which handled the project sighs like a champion, it is like fast as heck it is, like, really just super performative and all sorts of ways. And now it's like to the point where it's really configured so nicely to my liking that I couldn't imagine using another text editor moving, obviously, you always say that was stuff but at this point, you know, it fixes all of my pain points, except for maybe like a few things that I don't think atom or sublime do well, either. So - -10 -00:06:49,290 --> 00:10:08,010 -Wes Bos: yeah, interesting. So I've got a bit of a similar story. I first started on Dreamweaver years and years ago, moved over to coda when that started to get popular. And then when sublime came out in Sublime Text two came out in the early days, I switched over to it. And I really started to like, especially like the multiple cursors. That was like the first time I had ever been able to use multiple cursors. And it was just groundbreaking for me that you could do that. And obviously, or maybe not, obviously, if you don't know, I got super into Sublime Text. And I wrote a bunch of blog posts and ended up being like, the Sublime Text guy, where I was like, super into all of the different features writing blog posts, writing a book making videos, and that's really how I got my, my initial start and selling training products. But over the years, sublime has, it's actually gotten better. It's it's fast as hell, there's a nice, very nice ecosystem behind it. But I've I've sort of been like that meme you see right now, I've been sort of like glancing over at Visual Studio code, every now and then I go, Oh, that's nice. You can do that, oh, it just works really fast like that. So what ended up happening is that I just keep hearing about these, these, this, actually, I guess it all comes down to why I'm switching from sublime to vs. Code is the interface of VS code is amazing. So sublime, if you have a third party package that needs to deliver you some information about an error that's happening, your current status, any get information that you have, there's really only a couple ways that sublime can can detail that information to you. And the first is the status bar, which is the tiny little text at the bottom. Second is like sort of like a little drop down sort of like the command palette works. And then they've recently introduced sort of like feature rich tooltips, which allows you to use a subset of CSS inside of it. And it's a little bit limiting in terms of like, I just want some really nice interface to every time that there's a plugin, it has a different, I don't know a different way that it should convey that information to me. And if you had just full control over what that thing looked like with HTML, CSS, and JavaScript, you can create a really feature rich interface. And that's exactly what the benefit of VS code is, to me is that there is all kinds of like built in interface things as well as people who have written plugins can just extend the actual interface and style those pop ups exactly like that. So it and I think the the other thing that sort of comes along with that, at first, the interface is amazing. And, and second, it just works, which is a lot of times with sublime to get things like linting, and all of your tooling and all of your Git integration. There's like a lot of like setup that needs to happen. And it doesn't always work and then just randomly it would break for me and you have to like dig back into it. With VS code. It seems like a lot of the stuff is already built in. And if it's not configuring an existing package and getting good errors when things aren't properly configured. It seems like the switch to it for me was was really nice and quick. Yeah, I mean, now - -11 -00:10:08,030 --> 00:10:45,750 -Scott Tolinski: that actually specifically linting was the thing that was the straw that broke the camel's back for me for getting off of sublime. And, and that was one of the things I liked about atom, which I actually think vs. code does better. But one of the things I liked about Adam was that, yeah, the linting just worked, Hey, you, when you open the editor, you installed whatever plugin and you had your config file or whatever, but it just worked. And there was no hidden errors. And, you know, I understand I can find the errors in sublime, but I don't want to go hunting for this stuff. And yeah, I don't want to have to deal with errors. I just want it to work and and VS code definitely picked up the ball there. And it's really super amazing in that regard. - -12 -00:10:46,110 --> 00:11:30,420 -Wes Bos: Yeah, exactly. It's, it serves like the right amount of interface on top of even just changing your settings, like rather than them just giving you a JSON file. And if you forget a trailing comma, the whole thing breaks like sublime has it actually like, sort of like guesses what you're trying to type and gives you another panel of available options, which you can quickly filter down and they'll give you in a tooltip, it'll give you possible options for that setting. So I don't know, it's just a lot of like little nice things where it's sort of taking care of you to make sure that you don't mess it up beyond belief, because I think that that will happen. A lot of times people will get frustrated, a program and it's totally their fault. But like, I just need somebody to look over man and a little like a big brother that's helping Oh, - -13 -00:11:30,450 --> 00:12:16,380 -Scott Tolinski: yeah. And it steps the the nice little median between a series of 1000, checkboxes and toggle switches. And the opposite, which is a giant JSON file that of course, like you said, You miss a comma, it breaks. And it manages to do both of those things very well, you still have that interface. You know, it's not holding your hand entirely, but it does give you those options and it copies it over to your workspace settings yourself or your settings yourself. It's it's just superduper nice in most interface regards. I think the only like interface thing I don't like this is stupid. This is totally stupid. So everyone out there can tell me this is stupid that when you install an extension, and you have to click reload it, like closes the window and reopens the window. Yeah, yeah, I don't like that. - -14 -00:12:16,440 --> 00:12:21,450 -Wes Bos: But that's like Windows from 1993. At a restart your computer whenever you install something, - -15 -00:12:21,570 --> 00:12:29,430 -Scott Tolinski: I'm very aware it has like little to no impact on my life. But for some reason, I'm just like, it'd be cooler if you didn't do that, you know, I don't know. It's totally illogical. - -16 -00:12:29,430 --> 00:13:02,190 -Wes Bos: But yeah, it's the thing about Sublime is that it's built in Python, and I believe C or c++, and that's what makes it super fast. But the the downside to that is the cool interface stuff is not entirely possible. Whereas things like atom and things like VS code, they're both both built on electron, which means built in HTML, CSS, and JavaScript. And I guess the downside to that is that you need to reload the entire thing whenever you disable a plugin, but I don't know maybe they're they're looking at Hot reloading and whatnot, which is pretty sweet. - -17 -00:13:02,370 --> 00:13:45,780 -Scott Tolinski: So here's the thing about a VS code that impressed me more than almost anything else in sort of a non text editor way. This is the most performative electron app that I think I have on my computer. I mean, so many times you have electron apps, I know like, I don't want to hate on slack. slack is amazing. But slack can really bog down your CPU sometimes. And there's some others that I don't know if it's a problem with electron, I doubt it is. But I think it's probably just maybe it's easy to build on performative things with it. Yeah. And because of that, when VS code loads up, and you don't see it, crushing your CPU, yeah, that that really, really super impresses me. It gives me faith that the team behind it like really knows what they're doing. - -18 -00:13:46,290 --> 00:14:06,030 -Wes Bos: Yeah, it's, I can't believe how how nice and fast it is, though, like startup is a little bit slower. But like, Who cares? You open it like I open it maybe six times a day where I close it and open another project. And it takes like two seconds to actually load my project. So like, I'm out 12 seconds a day versus sublime, but I can I can deal with that. - -19 -00:14:06,060 --> 00:14:25,890 -Scott Tolinski: Yeah, yeah, absolutely. And so it's funny because I probably would feel that same way if I went from sublime to vs. Code. But I went from sublime to Adam to VS code. And Adam felt so slow to me that going to VS code VS code feels so fast, although I'm sure that sublime was fast heard. I just had forgotten, you know. - -20 -00:14:26,130 --> 00:15:15,120 -Wes Bos: Yeah. Yeah. And I also like one other thing. Since joining in, I've been tweeting a lot about vs. Code, is that it seems like the the folks behind VS code I'm sure this is true for Adam as well. I'm not trying to poopoo any other editor, but I definitely think that the developers behind VS code are totally listening to to it because anytime you tweet about it, anytime anyone tweets about it, you see somebody jumping in and being like, oh, we're fixing this or, oh, this gives us a thumbs up because maybe we'll do it in the next release cycle. So they're, they're really listening to to what we're doing versus Just like sublime that the developer behind sublime sometimes just goes Mia for two years, and you have no idea if the the project is dead or obviously right now, it's it's rolling quickly, but there was a time where people didn't know if the developer had had just abandoned it or not. - -21 -00:15:15,210 --> 00:15:18,630 -Scott Tolinski: Yeah. Yeah. And that that part of it stuff. Yeah, yeah, - -22 -00:15:18,630 --> 00:15:57,780 -Wes Bos: exactly. So, um, let's talk about like, like, killer features, I think the the killer feature for me was the UI and the ease of setup, I, I, what I did is I turned it on, I ported my theme, and then I installed the sublime keymap. Because like the, the keyboard shortcuts are totally different. And like that, that's a great way to make you switch back because you're sick of it. So if you install the sublime key map, that that was super easy for me to switch over, hardly anything was different than then what I was used to. So I was That was my first killer feature. Any other killer features that that you think people should know about? You know, for me, I - -23 -00:15:57,780 --> 00:17:01,920 -Scott Tolinski: think some of the, like we mentioned before, the the easy setup, the painless, linting. setup. The, for me, the speed for major finding replaces across multiple files is a killer feature. I did it once. And I was like, holy cow. This is fast. Yeah. And you know, the, the get features that are in here are excellent. I don't necessarily use like the committing and stuff like that from the interface. But yeah, I do switch branches all the time from the left, if you click on your branch name in the bottom left corner, or I'm sure there's a shortcut for that, because I don't do it too much. But actually, let me hover over that right now and see what that shortcut is, I don't know, it doesn't say. But either way, the quick switching of branches. I don't know, other editors can do this. These aren't just things but it's a nice visual indicator of all your stuff. And it makes the the interface overall just more pleasant to use. So like I said, you can do any of this stuff through, you know, commands or whatever shortcuts and other text editors, the interface is what makes it just stand out to me. - -24 -00:17:02,130 --> 00:17:45,630 -Wes Bos: Yeah, I'm a like a git command line purist, where I've never used a GUI or any sort of app to help me along my way. And I've always like done my merge conflicts manually by actually editing the file and looking for the head and everything like that. And I've been trying out these good things. And I have to say, it's, it's pretty nice. I like the fact that it shows me it queues up all of your uncommitted changes in the sidebar, and you can commit them all it has this nice little, like, kind of like a sync icon, which will do a push and a pull at the same time. And it's pretty nifty. I think that I will be moving a lot of my, like standard Git stuff over to just using the sidebar. So - -25 -00:17:45,660 --> 00:18:04,070 -Scott Tolinski: yeah, there's niceties to like, I mean, if you use, like, one of the extensions I use is called Git history. Yeah. And then in parentheses, git log. I mean, if you do the git log, then you get that nice visual, I don't know what they call it, like a train sort of graph for that that line graph where they split off and - -26 -00:18:04,070 --> 00:18:09,000 -Wes Bos: yeah, it's kind of like a, like a train off to a branch and comes back to master. Yeah, - -27 -00:18:09,000 --> 00:18:19,800 -Scott Tolinski: that whole branching graph, and you get all of that stuff. You know, these are little things that it's not important, but I like that. I like that. I can go look at that. I like that it exists. Yeah. - -28 -00:18:20,360 --> 00:19:49,530 -Wes Bos: Yeah, absolutely. I think especially for beginners and experienced people as I guess, as well, this stuff just makes it a lot easier, because it's, it's much more visual. It's funny that as developers, we tend to decide to like just code and being pure. But I definitely like just as I like a little bit of magic in my JavaScript libraries. I like a little bit of interface on top of my, my code editor. So I think that's pretty sweet. Another thing that that got me was the sort of like the, I don't know what this is called. But it's whenever you're in a specific type of file, it will recognize that you're in that file and give you intelligent hints were in sublime, the the type, or hinting or not type hinting, but as you type, it will sort of just automatically tell you all of the functions in that actual file. Whereas let's say if you're in a package, JSON file, and you are typing like, quote s, and then it will tell you like, Did you mean scripts, or here are the all the options that you could possibly have in a package JSON, so you don't have to like look it up, or guess it will immediately tell you what the possible options are for a package JSON and a note app or what the posit like if you're editing a theme for cobalt to it'll give you a list of all the options for that possible theme. And if you type something that's not supposed to be in a package JSON, it will tell you like, it'll put a little underline on it and be like, Hey, this is not a standard one. You can keep it if it's if you know about it, but just letting you know, you might have had a bit of a spelling mistake there. - -29 -00:19:49,580 --> 00:21:05,130 -Scott Tolinski: Yeah, and the IntelliSense that stuff just works so well. I mean, even the the go to definition stuff where you hold. If you hold option and you click on it, you click on A variable function, whatever. And if you click on that, it gives you an underline. And that links you to the definition of it, which makes jumping to file super easy. You're not like if you work, I mean, in small files, jumping to the next file is you don't have to type anything like that. You can just hold option click, I know people get sort of a little crazy about using the mouse, sometimes you could, you know, command, whatever find your file, but maybe that definition isn't the easiest thing to find. And maybe it just makes that stuff a little bit easier sometimes. So go to definition stuffs really nice. I really like this. Was it rached tweets? Do you know, do follow her on Twitter? I think that yes, sweet handle. If it's not, I should look it up, and we'll put it in the show notes. She just tweeted out that something I didn't realize you could hit f2 on a on any sort of declaration, or whatever. And it will allow you to rename all instances of it, including the definition from that little pop up window. So you don't have to do a Find and Replace, you don't have to go hunting for all that stuff. Exactly. You used a function six times through four files, and you want to rename that function, I - -30 -00:21:05,130 --> 00:21:16,170 -Wes Bos: realized people are probably screaming right now like, I'd have done this for 10 years. Yeah, yeah. Okay, we're, we're excited about it. We're text editor users here. And we're starting to get a couple ID features. - -31 -00:21:16,230 --> 00:21:21,390 -Scott Tolinski: I did use WebStorm for like six months, I have a little bit of handle ID life. But - -32 -00:21:21,540 --> 00:21:38,010 -Wes Bos: yeah, it's, it's pretty sweet. Being able to rename all of your functions, or, if you have a selector will show you all other places where you've used that slider in, in all of your different files. So it's pretty neat that it adds a little bit of ID Enos to an existing text editor. - -33 -00:21:38,040 --> 00:21:52,380 -Scott Tolinski: Yeah, I think I had in my notes here that it's sort of ID light, it's, it's sort of a nice little in between between a totally bare bones text editor and something like WebStorm that is like a big application that handles a whole ton of stuff. - -34 -00:21:52,530 --> 00:23:23,580 -Wes Bos: Yeah, exactly like Sublime is unless you install extra packages. Sublime is dumb about your project, it doesn't understand the relationship between all of your files and what kind of project it is, and in VS code and understand that it's a JavaScript file and understands the relationship between all of your different files, which is pretty neat. Another one is the inline errors. So if you hit f8, or I've actually remap mine to caps error, or a PR E, it will cycle through all of the actual errors that are in your, your file. So that's another really nice thing that I have. Because previously, in sublime, if you have a bunch of linting errors, you have to hover over put your cursor in the linting error and look down at the status bar, or pull them up all in a list. Whereas with VS code, you can either go to that there's a tab called the problems tab, and it will accumulate all of the problems that are in your code. So whether that's linting errors, whether that's spelling mistakes, or any sort of other error that you could possibly have, it will accumulate them in one problems panel, or you can cycle through, and it will, it'll sort of just cut into your editor. Like if you've got an error line three, it'll line it'll move line four down and put the error on a single line and put a little arrow, red arrow to that specific error. And that's really nice, because it shows you exactly where it is. And you don't have to you don't have to hover over it with your mouse. I hate touching my mouse when I'm in my editor. So those little inline editor errors are fantastic. - -35 -00:23:23,939 --> 00:24:09,780 -Scott Tolinski: Yeah, see, I you know, there are people that there's so many, there's a lot of things, right? There's different levels of like, text editor purist, right. There's the like, let like don't give me an interface at all. Give me a little bit interface, give me a lot of bit of interface, whatever. Like Don't, don't make me leave my hands off the keyboard, or like, don't, you know, touch the mouse ever. I had people like yelling at me and my YouTube tutorials for touching my mouse. And you know what, like, I don't use my mouse all the time. I have. I know most of the shortcuts that make my life a lot better. Yeah, sometimes I do like to use the mouse. And I think that's just a personal preference thing. People want to be like, that's wrong, you know? Like, yeah, I don't know. It's whatever, whatever makes you productive at the end of the day. So you know, do you in that regard? - -36 -00:24:09,780 --> 00:24:10,860 -Unknown: You do you - -37 -00:24:12,450 --> 00:24:27,630 -Wes Bos: use Scott, I had super bad carpal tunnel. I don't know three or four years ago. And that's really what initially got me into keyboard shortcuts because nice. I was like scared like, Wow, I can't like let my arm fall off. Because then I couldn't code. Yeah. Do you ever get this stuff? pretty serious. - -38 -00:24:27,660 --> 00:24:28,560 -Scott Tolinski: Those risk guards. - -39 -00:24:29,850 --> 00:24:32,400 -Wes Bos: Oh, I don't have those. I'm not cool enough to wear those. - -40 -00:24:32,730 --> 00:24:48,120 -Scott Tolinski: I had those for a little bit. I got I like really hurt my wrist. breakdancing. Right. And then typing with a injured wrist is terrible. So I had to like wear those like 1990s rollerblade wrist guards or I was like at work trying to type with these things on it was no fun. - -41 -00:24:48,540 --> 00:25:05,580 -Wes Bos: Oh man. That's hilarious. We should that should be another like. Episode is like ergonomics or like how do you I'm pretty pretty tuned into how to properly set up your your desk. Economically, just Yes. I mean, ainger dangerous job being a web developer, - -42 -00:25:05,670 --> 00:25:12,690 -Scott Tolinski: I sit on a normal sized chair at my standing desk and type with my arms like, my shoulder height. So I don't know if I'm the - -43 -00:25:13,920 --> 00:25:14,850 -Wes Bos: one when you're away. - -44 -00:25:15,900 --> 00:25:34,860 -Scott Tolinski: No, no, I, for the most part, it's like when I get lazy, it's like, you know, 99% of the time, I'll stand in work and whatever, I'll sit down and, and work at the appropriate height. And then sometimes I'm just like, Okay, my desk is in like variable height. So I just sort of like slouch into it or something. I know, I recognize it immediately. I'm like, this is awful. You need Yeah, - -45 -00:25:34,860 --> 00:26:17,790 -Wes Bos: yeah. Okay. Oh, one other killer feature we've got here is the debugger. that's built into VS code. So rather than rather than going to your dev tools to find out what the error is, you can actually run your JavaScript. And I know you I haven't done to too much of it, but have tried it out with a note application is you can run your note out right from your editor. And what that allows you to do is you can put in breakpoints and pause when when the thing crashes at the specific file, and you have like tight integration between the actual running of the app. And where you're you're authoring your code in vs. Code. Have you used the debugger at all? - -46 -00:26:18,449 --> 00:26:23,970 -Scott Tolinski: I've briefly dove into it. I get like ID developer ID users are probably like, come on, man. - -47 -00:26:24,330 --> 00:26:26,130 -Wes Bos: Yeah, like this one. - -48 -00:26:26,159 --> 00:26:43,530 -Scott Tolinski: Yeah. Right. You can? Yeah, so No, I haven't really used it that much. To be totally honest. It required a bit of configuration. I just, I'm sure I would benefit immediately from it. I just had that honestly taking the time. And I know that's probably a terrible answer here. - -49 -00:26:43,890 --> 00:27:13,770 -Wes Bos: Now I need to I need to dive into it more. But whenever I talk about VS code, like unprompted, people immediately tell me the node integration is amazing. So I've tried it out a couple times here or there. But what I need to do is, you have to have like a like a custom, yeah, like a.vs code folder in your project, which contains all the information about how to run your app and whatnot. And I haven't totally figured that out just yet. So that's sort of maybe we'll do a follow up show in a couple months to see where we're at with that. - -50 -00:27:13,920 --> 00:27:21,930 -Scott Tolinski: Yeah, I'll definitely make that a priority for me to get going on that. It should have been a priority before but now become a priority. - -51 -00:27:22,650 --> 00:28:32,430 -Wes Bos: Yeah, you can do things like set environmental variables and watch different expressions from running similar stuff to that you'll see in the Chrome Dev Tools. And then there's also this plugin called, like, Chrome Dev Tools hook up. I don't know what it does. I'm sure you can can look it up. Somebody, I posted a thread on Twitter that said, like, what are your your fear of vs. Code tips, and a lot of people recommended this Chrome Dev, or it's called debugger for Chrome dev tools for Chrome, which it says a VS code extension to debug your JavaScript code in the Google Chrome browser or other targets that support the Chrome Dev Tools protocol. So I guess that what that means is that because Chrome Dev Tools and has this protocol where you can, you can NAB the debugging details from it. Like if you run a node process, you can actually debug it in Chrome Dev Tools, I'm assuming that you can pull the data from your Javascript app directly into VS code, which is pretty sweet. You can set breakpoints and see your console, debug errors and whatnot, which is pretty cool. Because if you've got an error on a specific line, you can just click right through to that file, and deal with it immediately. - -52 -00:28:32,550 --> 00:29:13,800 -Scott Tolinski: Yeah. And as someone who came from, like a more visual and less, you know, computer science background, like this stuff is all is all pretty. I don't know, it's it's pretty new to me in a way that it still doesn't feel totally comfortable. The breakpoint. And debugging overall is not something I ever have learned in a sort of any normal environment. So, you know, it seems weird to say that because it is it is very important, but it is it is difficult for me to come to that stuff after being not in that zone for for so long. So definitely want to dive further into all of that stuff to you know, well, obviously, increased productivity overall. - -53 -00:29:14,280 --> 00:29:45,900 -Wes Bos: Yeah, maybe that I'm just gonna add a card to our show last called debugging. Because, like the moment that I stopped just console, logging everything and, and actually learned how to use breakpoints and the debugger command, and being able to like pause and see inside the scope of function. It was amazing. I was like, why have I been console logging all of this time when I can actually pause my JavaScript in and see into scope and step through functions. It's pretty neat. So maybe we'll we'll add a card about that. - -54 -00:29:45,960 --> 00:30:03,860 -Scott Tolinski: Yeah, I feel like those are the like, literally the only things in the Chrome dev tools that I don't use, you know, like everything else. I've I don't, I can really, you know, into all the performance and all the network sort of stuff and yeah, very cool. Both Chrome Dev Tools and when it comes to breakpoints, and I'm just sort of like, huh, - -55 -00:30:04,230 --> 00:30:27,240 -Wes Bos: yeah, yeah, I don't use it all that much. But when you've got a, like one of those bugs that you just can't pin down or things happen too quickly, or like you console log in, it's undefined. But then you you appear in and that's, it's also not undefined anymore. Like it's like one of those like, you might have a race condition or something like that. It's super helpful to be able to just like, pause things. - -56 -00:30:27,390 --> 00:30:27,930 -Scott Tolinski: Nice. - -57 -00:30:29,820 --> 00:30:52,860 -Wes Bos: Alright, let's talk. So those are sort of our killer features, we're sort of leaching into some of the plugins that we use, but there's all kinds of plugins, I think I already have probably about 25 different plugins, I, I sort of went wild on installing them. I've since backed it up, because a lot of them do add a lot of interface on top that I don't necessarily like. But let's talk about some of our favorite plugins and what they do. So what do you got one for me, Scott? - -58 -00:30:52,919 --> 00:32:08,190 -Scott Tolinski: Yeah, I got a whole bunch. I mentioned Git history. git log before just had some nice little git log in history features, I use one called get lens, which is essentially like a line by line blame. So that that's really nice. Although I have noticed, I suspect it's get lens, I don't want to call get lens out specifically. But one of them is has like a, like a 95% CPU spike whenever. So I've turned off a bunch of plugins on my latest environment, get lens being one of them and the CPU spike is gone. I will continue to try it. Again. I recommend trying it and seeing if you have that or not reporting back because I really like this one. It's sort of when you're on a line, it tells you who last edited the line and the commit message and the time Yeah, stuff like that. Obviously, you can turn it off on projects where it's not applicable. For instance, on some projects, where it's just me working on it, I don't need to get a get blamed for myself, you know, yeah, Scotland, he edited this file. Thank you. Okay, I used let's see, I use color highlight, which is, you know, pretty standard for any sort of color highlighting. Basically, it just adds a color around your any sort of hex codes or RGBA values and stuff like that sort of standard fare for something that you would need ditch. - -59 -00:32:08,280 --> 00:32:41,700 -Wes Bos: So VS code comes with a color highlighter built in and a color picker, which whenever you type any sort of hex HSL, RGB a value, it will put a little square beside that color. But I didn't like that, because it always shifted over my text. So right, as soon as it recognized the color it was shifted over. And then I would accidentally click the color picker all the time, which frustrated me so I turn that off, and I installed color highlighter, which just puts the color right behind the actual value as soon as it sees it. And I much prefer that. So is that what you did as well? - -60 -00:32:41,730 --> 00:32:55,980 -Scott Tolinski: Yeah, absolutely. You know, it's funny, cuz Yeah, same exact reasons. I didn't really even think about it. It's just that that's how Adam and I had my sublime setup. Yeah, so for me, that's just how I wanted it, right. Like, I just wanted the color behind it. - -61 -00:32:56,040 --> 00:33:46,080 -Wes Bos: Yeah, and I want nice big color too, because sometimes that little square, yeah, you don't necessarily be able to see what that color is immediately. The one is pretty sweet. Because there's this new thing coming to CSS, which is our RGB e. that again, our GG BB A, which allows you to put the alpha value, the transparency in a hex code, so you could do like, ba da 55, which is like badass green. But if you want to, like 50% transparent, you can pop the and this is the hard part. 50% know that x value. So I've started to memorize them, which is like 3366, six E, whatever the hex value of like, 10 2030 40% is not the talk, I would have liked it. If it was just you just put like 80 on the end. That's 80%. But yeah, that would be way too easy. - -62 -00:33:47,190 --> 00:34:19,940 -Scott Tolinski: I always had like in in, in stylists. Yeah, this is a stylist feature. But you can just do RGBA like function, put a hex value comma in the open and the person. Exactly. Oh, it's like that's how I'm used to actually made a little function to do that for me and styled components as well. Because I just used that so much. Just keep everything in hex values and whatever. Yeah, but yeah, no, that is exciting. I don't know if I'll use it, I'll probably use it. That way, you don't have to type out RGBA and all those parentheses? - -63 -00:34:20,010 --> 00:36:56,940 -Wes Bos: Yeah, I don't know, I probably won't use it as much as I keep having to have this thing bookmarked, or I have to look up the hex value. And there's some people that can count and hacks but I can't I I'd much rather use a little function like that. Yeah, but the My point being this color highlight plugin will recognize those and it will show you the real value and then it will it'll try to like calculate what the opacity value is, which is pretty neat. Nice and it will it'll visually show you. These are plugins but well what if you install the ES lint plugin, you can turn on the setting editor dot format on save and es lint auto fix on Save. And what that will do is if you have installed and if you have prettier installed which I've got a lot of like tweak questions about like what is prettier so we talked about it in the the JavaScript tooling episode we'll I'll talk about it real quick. Where es lint will tell you about like code errors, you forgot a semi colon here, you don't, you're missing a closing brace whatever. errors as well, stylistic errors like, Oh, we prefer to put spaces here or we always use semi colons or we never use semicolons, we use double quotes or single quotes. eastland sort of does those two things were prettier, only deals with stylistic formatting of your code. So what you do is, it's not going to whine at you about your code, it will just fix it for you. So the way that it works is that you install prettier, you set your config. So I told it, I like to use single quotes, I like to use semi colons, I like to have spaces. On the on the either side of an object, I like to have a space after my colon on an object property, all those things. And then when you you save your thing, it will automatically run it through prettier, and then format it. So if you have any sort of weird indentation, if your line lengths are too long, I've set mine to 120 characters, it will automatically wrap it. So if you've got like an array with six items in it, and it's like 119 long, it's fine. But if you add another item to your array, it will automatically format it and put up each of them on a line. It makes it really, really readable. So having the combo of es lint and prettier. If you have those turned on, and I specifically just run my prettier through my es lint config. Likewise, it yeah, it will just like automatically fix all of your code and make it make it look amazing. You don't have to worry about like, if you if you refactor some code, or you paste in like an example from Stack Overflow, and it's in a different coding style than yours, it will automatically just fix it all for you, which is amazing. - -64 -00:36:57,000 --> 00:37:28,830 -Scott Tolinski: Yeah, and I would have put this under our killer feature, even though it's probably doable and other editors. But that's it. He is like one of those things I really just can't live without if my linting isn't auto fixing everything for me, then I like suddenly getting I have to, like close the editor and figure out why because I relies so much on that. It allows you to really just type freely and not worry about formatting, which is something that you know, I don't know, I like I love like properly formatted code. Yeah, but I don't want to have to spend the time, you know, making my code properly formatted. And it really takes a lot of that pain out of it. - -65 -00:37:29,150 --> 00:37:50,760 -Wes Bos: Yeah, you should see how many grumpy people tweeted at me when I was like, oh, prettier is great, because I keep manually reinventing my code. Like let's say I've, I've have a react component, and I delete like a wrapping component. I got to reinvent everything. Oh, yeah. And so many like grumpy old dudes tweeted at me being like, the code should come out properly from your fingers in the first place. - -66 -00:37:52,350 --> 00:38:02,940 -Scott Tolinski: Yeah, it's so weird. I just had like this conversation on my Slack channel. It's like people on they love to knock people down a peg or two just to prove that they're better in some way. Like I see it. You know, I - -67 -00:38:02,940 --> 00:38:06,110 -Wes Bos: mean, you see it? Probably relations. But - -68 -00:38:06,110 --> 00:38:12,630 -Scott Tolinski: yeah, I mean, like, come on. Everybody's doing their thing networks for them. And you know, if you're not hurting, yeah, no big deal - -69 -00:38:12,650 --> 00:38:16,460 -Wes Bos: code. The code does not always come out perfectly from my fingers. I'll tell you that. - -70 -00:38:16,500 --> 00:38:20,070 -Scott Tolinski: Oh, yeah. No, I got two fat fingers. And I double hit keys. I yeah. - -71 -00:38:21,029 --> 00:38:27,360 -Wes Bos: Oh, that's good. Anyways, uh, yeah. If you ever want to see some grumpy people look at the tweet replies, - -72 -00:38:27,380 --> 00:39:38,550 -Scott Tolinski: yeah, to your replies YouTube comments. Yeah, yeah, um, another really nice extension that I use here is auto rename tag. And if you are using, I mean, it's great for HTML, right. But let me explain what it does. It's great for react to. So if you have an opening and closing tag of any sort of element, whether it's a react component, an HTML element, or whatever. And let's say it changes, right, this div is no longer a div. And now it's something or this, this span is now a paragraph tag or something, you don't want to have to hunt down the closing tag and everything like that. So this allows it to auto update the closing tag of whenever you edit an opening tag, if you are changing name of react components, that that makes things very nice. So let's say you have a div that's now becoming a styled component, you can just start typing the styled component where it says div and it updates the closing tag for you. So that one saves a ton of time for me because not only do you not have to, you know hunt down the closing tag nuggets that hard but you don't have to hunt down the closing tag or do any extra work there. And you don't have to do any sort of copying and pasting or re typing or stuff like that. It just automatically updates it for you. - -73 -00:39:39,110 --> 00:40:19,190 -Wes Bos: Yeah, that's, that's super handy. That's the one that I use quite a bit in sublime. And I'm still on that like path of how do I like do the same thing in in sublime, like one or one of the ones right now that I have is, is expand to quotes which I've sort of got down pat, I would do that a lot. Like I just want to make my selection excellent. To the quotes, and then the one I haven't figured out how to do is toggle quotes. So I used to have the shortcut in sublime, which would toggle between single, double and backticks, or just single and double and other languages. And that's sort of one I'm looking at. But I'm sure there's some sort of plugin out there that will do that for us. Yeah, - -74 -00:40:19,190 --> 00:40:32,630 -Scott Tolinski: I've done. Man, I hit that setup before. And I've heard, I think I just like forgot that, that I had it set up or the keyboard shortcut, because I was doing that to toggle the backticks. It's like super useful all the time. If suddenly a string becomes something that you need a variable in or something. - -75 -00:40:32,640 --> 00:40:34,380 -Wes Bos: Yeah, that's exactly what it used to for. - -76 -00:40:34,440 --> 00:40:34,980 -Scott Tolinski: Yeah, - -77 -00:40:34,980 --> 00:40:35,880 -Unknown: man. - -78 -00:40:35,880 --> 00:40:39,090 -Scott Tolinski: I wish I had that off the top of my head, but I'm totally blanking on it. - -79 -00:40:39,150 --> 00:40:52,350 -Wes Bos: We'll do it. Somebody will tweet it at us. That's the nice thing about doing this podcast is Yeah, I just air our problems. And then a couple days later, everyone on Twitter has fixed your problems, because they have found that they've also had that problem that will tweet it at you, which is pretty cool. - -80 -00:40:52,380 --> 00:41:23,960 -Scott Tolinski: Yeah. Oh, oh, sorry. I was gonna go through I got another one. That was a good one that I have to me. Yeah, this is by Wix. So Wix has been doing a lot of cool stuff. Lately, they had like a really nice React Native navigation library and stuff. So Wix is really coming with it. And this is import cost, we slayed the size of your packages directly next to your package name. And the very best part is it also shows you the size of it. Jeez, it so you're not just like looking at what it is, you're looking at what it will be in your production environment as well. - -81 -00:41:25,230 --> 00:42:08,790 -Wes Bos: That's pretty sweet. I actually turn that on. And what I like about it is that I don't necessarily know what is big and what is not all that big, like you kind of hear ideas about how big react is and how big jQuery are, and you get an idea. But it will tell you it'll turn red if something is probably too big for a general website. And it's sort of like if you've ever used like a calorie counting app. After about a month or two of using this app, you get a sense of what something should be in terms of calories. And you can get an idea of how many bytes is an actual application? Or how many bytes is this thing that I'm bringing in. And if something is way too big than for what you think it should be doing that should raise a red flag, like - -82 -00:42:08,820 --> 00:42:12,090 -Scott Tolinski: previous flag in VS code here, - -83 -00:42:12,090 --> 00:42:36,710 -Wes Bos: it actually puts a red flag up for you. And yeah, you can you can get a sense for it. And it's cool because it puts it like right beside the import or the require. So if you say like import slug from slugga phi and right beside it will tell you what it is and what it is gee zipped, and minified, which is pretty sweet. You don't have to like open up an existing editing interface it sorted it just puts it gray beside the import value. - -84 -00:42:37,020 --> 00:42:38,100 -Scott Tolinski: Yeah, love it. - -85 -00:42:38,850 --> 00:43:55,470 -Wes Bos: What I've got is IntelliSense. So there's path IntelliSense, and sass and tell IntelliSense. And what Pathan, like can't even say a path IntelliSense will do is anytime you open up a quote if you're in CSS and you're doing a background image, or you're trying to actually there's node IntelliSense as well. So if you're trying to import something from a node package, what it will do is on a file, it will look at your hard drive. And it'll be relational to what folder you're currently in. So if you do dot dot forward slash, it'll go up a level, and it will give you a list of all the possible files and folders. The note IntelliSense. So if you say like import slug from quotes, slug fi, or if you just type s, it will go into your package JSON and list all of the actual packages that are in there, and be able to to autocomplete those for you. So like you don't accidentally spell something incorrectly. And then there's SAS IntelliSense. So if you've got some colors, or if you've got some selectors that you've previously used, or a mixin, or or something else it will, it's smart enough to know not just because you've typed it in the document before but it's smart enough to know these different symbols that are in your your file, and you can you can autocomplete it based on that. - -86 -00:43:55,560 --> 00:44:05,040 -Scott Tolinski: Yeah, yeah. So the node one you use is that NPM IntelliSense because that's the one I'm using. Okay, cool. Yeah, because there is one that's called node modules. IntelliSense and wait, - -87 -00:44:05,190 --> 00:44:07,350 -Wes Bos: let me open it real quick. Um, that might be a lie. - -88 -00:44:08,280 --> 00:44:11,700 -Scott Tolinski: I think NPM IntelliSense has way more downloads. So um, - -89 -00:44:11,700 --> 00:44:19,170 -Wes Bos: yeah, it's called NPM IntelliSense by Christian Kohler nice 303,000 installs so far. - -90 -00:44:19,200 --> 00:44:26,190 -Scott Tolinski: Yeah. Cool. So what's on the route of extensions what what theme you're using cobalt obviously so that yes, your - -91 -00:44:26,190 --> 00:44:45,750 -Wes Bos: cobalt two is is my thing that I just poured it over. And it's it's looking pretty dang good. The one thing that VS code just released was the ability to style the entire editor so the tabs in the sidebar and the keyframe what this thing is called where you switch between files and search and get and bugs. - -92 -00:44:45,780 --> 00:44:56,340 -Scott Tolinski: Yeah, was that that was a totally stupid pain point of mine to write. That's a totally useless pain point. I was mad that you couldn't change that bar. not mad. I was. Yeah, it was like less than throw that you couldn't change those - -93 -00:44:56,430 --> 00:45:46,800 -Wes Bos: like ugly gray, brown or black color. Yeah, it's nice to be able to have full Do you still can't have full control over absolutely everything. There's some open bugs, like there's no, there's no ability to put borders on a lot of the things in the editor, I've just spent the last three days building this theme. So some of the stuff that I did in sublime like putting a thin yellow border around search results are other instances of a find. You cannot do yet but there's there's actually a plugin called john CSS and JavaScript customize where you can like just inject your own CSS. And it's funny because the editor, you can just open up the dev tools in the editor, inspect element, and then you can add in your own CSS to whatever you want. So I made my carrot a little thicker and ended a couple little things that I like to have. Nice. - -94 -00:45:47,009 --> 00:46:55,290 -Scott Tolinski: Yeah, I'm what am I you? Yeah, considering the idea of making my own just to be around the level of tut's stuff. I use the material theme. Let me see which one because there are several I use material theme, by matea s store, you know, please get at me, I ruined your name. I love this, this, this, this theme because it styles everything, every part of VS code. But there's also several different variants of it. There's, you know, the light variant, the dark variant, which you always get with stuff. And then with this, there's also a green variant, which you saw an atom with, like the oceanic material theme sort of stuff. But there's also this one, it's like pale Knight. I think it's called pale Knight pale, pale, man, let me check. I think it is. Either way. It's like a light purple. And you know, me my brand stuff. Everything's purple. So it looks really nice. I really loved the syntax highlighting really loved the overall theme. And look, everything pops out really nice. So yeah, material theme. I love it. If I did a theme, it would probably be based off of this. - -95 -00:46:55,320 --> 00:47:17,850 -Wes Bos: Yeah, you should, you should fork it and make like a level up tuts custom one. Yes. Like I didn't understand that I was doing this at the time. I just really like blue. But it's sort of a bit of a signature of what I do. But not actually there's now a lot of other people who do YouTube tutorials that also use my theme as well, which is great. I don't mind that at all. Because I think it's cool to see other people using it. - -96 -00:47:17,880 --> 00:47:20,130 -Scott Tolinski: Yeah, absolutely. Yeah, definitely. - -97 -00:47:20,460 --> 00:47:27,180 -Wes Bos: It's cool. Even my honor, I we're not on video right now. But my room is also painted cobalt to blue. Nice. - -98 -00:47:27,210 --> 00:47:30,510 -Unknown: So mine is also blue, we both have blue blue rooms. - -99 -00:47:31,380 --> 00:48:24,330 -Wes Bos: It's good. It's a good color for a room, I got one called the version lens, which will look at your package JSON if you're running a node app, and it will tell you if you're on the latest version, or if you're compatible with the latest version. So based on some fair semver, Sam bear, how do you say that? Seven semver, seven, semantic versioning means like, you have like your, like 2.1 point three. And then if 2.1 point five comes out, you know that 2.1 point three is compatible with 2.1 point five, right? So if you hover over your, your NPM package, or you can actually get them display right above the package, it will tell you what the current version is what version you have, and if you're compatible with it, or if there's breaking changes if you'd like to, to actually upgrade. So that was it. That was super, super helpful for me. - -100 -00:48:24,510 --> 00:50:37,080 -Scott Tolinski: Yeah, I've never heard of this. And the moment you said what it was I click the Install button because I gotta have this super cool. Um, one thing we didn't talk about more than just extensions is some of the features for extensions. I mean, there's this like.dot.in, the upper right of the extensions thing, and allows you to basically quickly see all popular extensions and recommended extensions and all of your personally installed incentives. But I really like that being able to see popular extensions all in one spot, and you can just sort of scroll down and see if there's anything new and hot that people are using. Yeah, maybe you didn't, you didn't hear about in some sort of way. And you don't have to rely on word of mouth to hear about these things. So I really liked that aspect of it. Another thing is being able to turn off plugins for a particular workspace. So yeah, plugin has a little gear next to it. If it's installed, you can click that gear and you can disable for this workspace you can disable for always or uninstalled. And I want it maybe Can you explain what is a workspace? Sure. So your workspace is your particular project, right? It's your window in your project. And really it's it's where this settings this VS code settings file lives, whereas it's dot VS code hidden folder and then inside of that you have folders maybe for typings or launcher settings, JSON files based on whatever features of vias code you're using and he sort of settings you could take with you or whatever move from project to project but either way, that's your that's your workspace, so that that folder lives in the workspace, I don't think Yeah, well, I guess if you are modifying any sort of workspace settings This is going to create that file for you. So I would guess that you could say that the requirement of a workspace, although I think Yeah, yeah, I guess that makes sense. So yeah, your workspace is really whatever given project you're on. So what's nice about that is, like I mentioned before, when I'm working on level up, and I'm the only person editing the code, I don't need to see a good lens of everyone else's stuff. So why would I want that plugin running and potentially using up some memory or CPU or something that I don't need it to. So you can click the gear disable for this workspace, and then that plugin is just going to chill out, but it will be there for your next workspace or other workspaces that you're using an ad. - -101 -00:50:38,280 --> 00:51:21,420 -Wes Bos: That's awesome. On the topic of workspaces, I believe this is true that there's no way to switch from project to project or workspace to workspace right now. So what a lot of people have told me to install and I just did it myself is project manager, which you can open up an existing project and have all of your, your settings and all the folders that you like to have open for that specific project. Is that true that you cannot switch between workspaces from VS code? And so I guess I just don't know you mean? Like, oh, like let's say you've got you have your your your level up tuts. And then you've got like a client project, and you're sitting in level up tuts and you want to switch to that client project. How do you do that? - -102 -00:51:21,569 --> 00:51:29,760 -Scott Tolinski: I go up to File and select File. Open the folder. Okay. And it opens up in a new window. - -103 -00:51:29,790 --> 00:51:30,900 -Unknown: Yeah, okay. Yeah, - -104 -00:51:30,900 --> 00:51:43,740 -Scott Tolinski: I don't I guess I don't typically, like if I'm working on one project, I'm like, pretty much chillin in that project. And if I work in another project, I'm closing out of it and starting up a new process or new new window somewhere. Oh, yeah, - -105 -00:51:43,770 --> 00:51:56,670 -Wes Bos: I've got this terrible thing where I always forget where the folders on my computer are. So having being able to open the project quickly is is super helpful for me. So looking forward to using that. - -106 -00:51:57,480 --> 00:51:59,160 -Scott Tolinski: Yeah, I'll check this one out. I haven't seen it. - -107 -00:51:59,730 --> 00:52:12,810 -Wes Bos: Project Manager. Cool. What else? What other tips do we have or packages? This season just looking at here, I like I said FA to cycle through all of your your available options. - -108 -00:52:13,350 --> 00:52:44,520 -Scott Tolinski: I mentioned this before in another podcast. But I have a just on on GitHub, we can link in the show notes, which is to remap your key mappings to give you command one through nine to actually switch the tabs instead of Yeah. Doing the default behavior, which is difficult to Yeah, difficult to get used to. There's also, you know, little keyboard shortcuts like did this sublime or atom? I guess you don't know Adam, but sublime. You hold option? Does it move align? Is that option in the arrows? - -109 -00:52:45,060 --> 00:53:05,040 -Wes Bos: I often like moves up by one Brown. Yeah. Line bubbling. You mean? Like? Yes, that is it as a huge one in sublime, where they hold down, but the keyboard shortcut is option? No, it's command control, and then use your arrows to move those lines up. And I call that line bubbling in line. - -110 -00:53:05,370 --> 00:53:08,160 -Scott Tolinski: Is that a? Is that the official name? Or did you come up with that? - -111 -00:53:08,549 --> 00:53:18,090 -Wes Bos: I think I might have made that up if you search lightly line bubbling. Let's see if one of my posts comes up. Yeah. Okay, I made that up. So if you - -112 -00:53:18,090 --> 00:53:46,860 -Scott Tolinski: do line by line and VS code, you hold the option and hit the arrow keys up or down to move a particular line. If you hold Shift Option, it duplicates that line and moves it up and down. Which can be super handy if you're duplicating. Like if you hold Shift, you know, go down a couple lines. And let's say you need to copy those four lines, then you hit just option and hit down once more. And it copies those four lines like that. That's super easy. super nice. Nice to get your fingers doing that and used to that sort of thing. Yeah. - -113 -00:53:47,220 --> 00:54:13,950 -Wes Bos: Yeah, like like our last episode where we told you all of these like must have keyboard shortcuts that are global, there's probably like, like 20 shortcuts that you just must absolutely memorize and will make your life so much easier. And we should come up with a list that at some point to to be able for people to be able to reference Yeah, you should just print out like the default key mappings and take it home and study it or do some cash card. You have your own VS code series on youtube for free right - -114 -00:54:13,980 --> 00:54:28,470 -Scott Tolinski: yeah, it's it's a funny videos, it is maybe eight videos or so right now I'm sort of just going with it were things that are like, there's only so much to show about like basic functionality in a text editor. So yeah, right now it's a little bit tips and tricks kind of stuff. - -115 -00:54:29,160 --> 00:54:56,910 -Wes Bos: Yeah. And I think that's that's the kind of stuff that people want. Like I wrote an entire book on sublime and have videos and it's all that like those little things where you sort of take it for granted. But if you do it in front of a bunch of people, half of them go Whoa, what what did you just do there that you you did that little trick or you jumped from line to line or Yeah, easily easily selected all the text inside of those quotes, right? Like those are the things that make you save an hour or two a day, rather than having to manually do them. Yeah, you - -116 -00:54:56,910 --> 00:55:03,210 -Scott Tolinski: get you get a lot of those comments like I didn't know you could do that or Why don't you do it this way? dummy? Yeah, - -117 -00:55:03,239 --> 00:55:08,820 -Wes Bos: yeah. Cool. So you got anything else? Or is that looking good? - -118 -00:55:09,089 --> 00:55:22,560 -Scott Tolinski: Um, let's see, let's talk about is there like, What do you want? Like, what are some things from VS code that you would like to see that don't exist via extension? Or anything that you know of right now in VS code? - -119 -00:55:23,370 --> 00:55:43,050 -Wes Bos: Oh, that's a good. I don't know if this exists or not, I'm assuming no. But being able to like pair programming on VS code would be pretty sweet. Yeah, I know that a lot of people that do pair programming, they have to use t mux. And vim. Because really, that's the only the only way to or I don't know if it's t mux. Is - -120 -00:55:43,050 --> 00:55:45,510 -Scott Tolinski: what they use for I don't know, I've never done pair. - -121 -00:55:45,779 --> 00:56:05,010 -Wes Bos: No. Yeah, if you want to be able to you have to use vim, there's some there's some plugins for sublime that you can use to, to sync your carrots and stuff between people. But it would be pretty neat to be able to have all of the the nice interface of VS code as well as being able to sync that with somebody else that you're currently coding with. - -122 -00:56:05,190 --> 00:56:55,320 -Scott Tolinski: Definitely. Yeah, I think some things that I would really like is, is some of these are total pipe dreams, like how yakou was my favorite extension for Sublime Text and never made its way into atom. So I'm guessing it's kind of dead in the water. It was a Auto completer for CSS. And it was basically like, Emmet, it was I mean, it did exactly what Emmet did, but it did it so much better. Like that. It's hard to express this because my hands were so used to hi yaku. But whatever you are expecting the the auto completion to be, it will just be that like they're each each sort of CSS property had maybe like, you know, 20 different shortcuts. So you didn't have to ever look up what the shortcuts were, if I wanted, you know, something, you could just guess hit tab, and it was almost magically always Oh, yeah. - -123 -00:56:55,950 --> 00:57:11,790 -Wes Bos: It was a fuzzy match for it. Yes, it's best guess. And then it also learns from the things that you learned from the things that you want. And it does that as well. I don't know, probably not as great as this. But it will learn from like what you you often like to use for that shortcut? - -124 -00:57:11,820 --> 00:57:12,360 -Scott Tolinski: Yeah, - -125 -00:57:12,390 --> 00:57:13,200 -Wes Bos: that's pretty neat. - -126 -00:57:13,260 --> 00:58:54,090 -Scott Tolinski: I can say there's some like little things that I had some beef with Emmet, like, if you? I don't know, there were I forget what they were just some of them that my hands were just so used to typing. Yeah. And you move into mn and it's giving you something totally, not only not only something, I don't know, not logical, but something that just is a CSS property that you very infrequently use anyways, was like, Oh, this one matches it closely. But it's not a property that people use all the time. So I would love to see how yakou I don't think it's gonna happen. Could the thing is import folding, which is something a lot of IDs do really nicely. So you have if you're working in any sort of import heavy environments, importing a ton of JavaScript stuff, I mean, how many things like how many times does your file maybe have like 10 lines at the top that are just yeah, printing a whole bunch of stuff, especially even now, with styled components here, importing components and whatever, your import section can get pretty large. And VS code doesn't really offer a way to fold all of that nicely. There's some ways you could hack it by indenting that line, and then putting a comment at the top in the bottom of your imports. And then you can Yeah, but that's, that's, uh, yeah, and I don't want to live your life. Yeah, yes, Lynn's gonna fix that indentation anyway, so you're facing a losing battle there. Yeah. So that would be really nice to be able to just say, hey, fold all of those imports. And this isn't even just a JavaScript thing. You'll see a lot of people, a lot of different languages talking about it. So we'd love that. Nothing thing is that I use absolute imports in my environment that start with a forward slash. So instead of starting without a forward slash, and yeah, VS code just totally doesn't know how to handle that. So that's, that's pretty much it. It just doesn't, it doesn't matter. - -127 -00:58:54,540 --> 00:59:02,220 -Wes Bos: If you're importing like a style component, you don't have to think like, what directory Am I currently in? Yes, go to the root of the project. Yeah. - -128 -00:59:02,250 --> 00:59:24,330 -Scott Tolinski: And and since in that way, if you ever move, or like it allows for copying and pasting your imports from file to file a lot better, you don't have to like re import stuff. You know, something's like if it's in the same folder, I'm going to use a relative importer, if it's in like maybe a close folder, but if it's not in a close folder, and I'm having to do dot dot forward slash dot dot forward slash data for I'll go, that's cool. I'll do yeah. - -129 -00:59:24,630 --> 00:59:29,730 -Wes Bos: And that's, that's in your, like, your Webpack. Module. resolver. Yeah, so - -130 -00:59:29,730 --> 00:59:36,230 -Scott Tolinski: I use Meteor primarily. So it just handles it by default. I don't have to change anything to get it to do that. - -131 -00:59:36,900 --> 01:00:00,720 -Wes Bos: That's pretty neat. Yeah, yeah, those are some good things. Um, tweet us I'm at Wes Bos Scott is at a stilinski and just tell us what are what are you hoping that we'll come to it? Because often people like say, like, Oh, I wish I could move to VS code, but it doesn't have X, Y and Z and most curious to hear like what what are the hang ups that are stopping people from from Moving. - -132 -01:00:00,900 --> 01:00:01,770 -Scott Tolinski: Yeah, definitely. - -133 -01:00:02,970 --> 01:00:09,660 -Wes Bos: Cool. Well, let's move on to some sick pics. pics. What do you got for a sick pic for me today? Scott? Yeah, I - -134 -01:00:09,660 --> 01:01:25,470 -Scott Tolinski: got this book that I read a long time ago, well, not long time ago, maybe like a year and a half ago called moonwalking with Einstein. I hear people talk about it a lot right now. And it really reminded me of how impactful it was. It's not like a self help or like it is self improvement kind of book. Like I usually like. It's a story about this guy, Joshua for who basically heard about the world memory championships, and decided that he wanted to write an article about it, which turned into a book. And basically, he ends up studying with some really, really interesting people about learning to grow their memories to these memory competitions, where they're having to memorize multiple fold decks of cards and names and faces and stuff at an absolute insane rate. And the guy, you know, who wrote this book is basically like, well, I'm of average intelligence and all this stuff. And I don't have average memory. I don't have any sort of anything, but it's proven to show you that like, it's a trained skill that you can learn in pickup and all sorts of different ways. And in between the sort of like an every other chapter kind of thing goes into the science of memory and stuff like that. And it's really, really super interesting called moonwalking with Einstein. It's pretty neat. I recommend the audiobook. It's really nice. - -135 -01:01:26,040 --> 01:01:28,050 -Wes Bos: Cool. I'll check that out. - -136 -01:01:28,260 --> 01:01:28,830 -Scott Tolinski: Yeah, - -137 -01:01:28,830 --> 01:03:21,210 -Wes Bos: so I've got something totally different. And it's double walled stainless steel. drinkware. Whoa. So I I'm, I'm absolutely obsessed with the, you know, the brand Yeti. They make they make these coolers that hold ice for like a week. And yeah, they have. So I do. I do know this. Yeah, so Yeti has, they've, in the last like, year or two, they've been putting out these, these cups that hold ice for like 40 hours or something like that. And I've got a couple of them. And I've just been absolutely loving them. And what it is, is it's it's just a regular stainless steel travel mug. But the there's two walls of stainless steel. And then in between them they they create a vacuum which sucks out all of the air. And from from reading what I figured out is that the reason why if you put something in a thermos and this is not new thermos technology has been around for a while, if, if you remember, like I remember being a kid and having like a glass thermos. And if you were to break the glass thermos, it would be no good because there's an inside and there's an outside and in between it, they suck all the air, and then the heat or the cold that's inside of your actual thermos or inside of your cup. It can't dissipate into anything because there's not even air. There's not even air inside of that. So I have a couple of these I got a couple 30 ounces Yeti cups, and I've got I've got a 20 ounce one as well. And I bring it up to work with me and I've just got, I don't know if you can hear that or not. But I put ice in it in the morning and ice last all day long. And I can fill it up with like a little mini fridge here in my office. So they're pretty sweet. And I just ordered like a huge 64 ounce one. Because I'm supposed to be drinking a lot more wine. Is that what you got right there? - -138 -01:03:21,390 --> 01:03:45,510 -Scott Tolinski: I have it's not a Yeti. It's a bottle Bo TTL which is like the same thing. Same thing, vacuum sealed double walled, that my wife got me this for Christmas this year. Because she knows I love giant water bottles. I mean, you saw that giant boot I drink water out of Yeah, this is the two liter version of the bottle. And it's so wide that I can't hold it. I have to hold it with two hands - -139 -01:03:46,170 --> 01:03:50,640 -Wes Bos: on it. Like I can't palm it. It's giant and 27 bucks. Yeah, - -140 -01:03:50,640 --> 01:03:51,450 -Scott Tolinski: it's awesome. - -141 -01:03:51,450 --> 01:04:50,010 -Wes Bos: Yeah, let's meet so that's what I was gonna say is my next thing is the Yeti ones are stupid expensive. So and the thing is that like, it's not like Yeti is not doing anything special by sucking air out of two pieces of stainless steel. And most of these things are all made in the same factory in China anyways. So what I recommend to people is if you go to in Canada, we don't really have this but if you go to the states at Walmart, they have the Ozark Trail brand. And they sell like pretty much a knockoff of everything Yeti, but for like 10% of the actual cost. So we've got a couple of the 20 ounce. Ramblers that are from Ozark Trail and they've been really, really nice. And this this huge, like 64 ounce one is exactly what I'm looking for. Because I want something that I can put a ton ice in and still have a ton of water and because even the 30 ounce Yeti, if you fill it up with ice, you don't really get that much drink in it and find that it runs out too quickly. - -142 -01:04:50,100 --> 01:04:53,460 -Scott Tolinski: How about a 64 or 68 ounce? - -143 -01:04:55,620 --> 01:05:12,540 -Wes Bos: I think that that is what I will get that's that's amazing. Yeah. Thank you. Sell a one gallon one Yeti, which is nuts. Yeah, I would I would be Oh, it's not for drinking out of at that point. It's more for for like sneaking it into a baseball game and then pouring it for your friends. - -144 -01:05:12,570 --> 01:05:16,710 -Scott Tolinski: I think I'd be willing to challenge that. One drink a lot of water. - -145 -01:05:19,170 --> 01:05:39,060 -Wes Bos: It's pretty neat. So yeah, vacuum, double walled vacuum stainless steel drinkware. They even sell ones that are like, I know, swell bottle is another really popular one right now or you can get to like cool colors and stuff like that. But if you're looking for a water bottle, definitely check out something I look at this bottle Bo TTL. - -146 -01:05:39,300 --> 01:05:39,810 -Unknown: Yeah, - -147 -01:05:40,230 --> 01:05:55,710 -Scott Tolinski: yeah, I think my, my wife bought it because she literally googled largest double water bottle. Like, she just knew that because I had before this I had another water bottle. I was like 1.5 liters. And I was like, I'm over this 1.5 liter stuff. So - -148 -01:05:55,710 --> 01:06:05,490 -Wes Bos: that's awesome. Look at using liters to welcome to Canada. Yeah. 68 ounces for all y'all Americans. Yeah, I - -149 -01:06:05,490 --> 01:06:09,510 -Scott Tolinski: don't know any of that stuff. Not good. - -150 -01:06:09,720 --> 01:06:14,220 -Wes Bos: Yeah. Cool. So sick pics. Shameless plugs, anything you'd like to plug today? - -151 -01:06:14,310 --> 01:06:44,880 -Scott Tolinski: Yeah, looked at plug level up tutorials, I just finished my subscription service. As of today, it will be out and available. And check out level up tutorials, the level up pro stuff, it's a subscription, where I'm going to be releasing a ton of new free content, a new series, hopefully this week, and then another one this month at four pros. But either way, that whole system is new. And even if you don't want to go by anything, or subscribe, just go check out the shopping cart that is going to be live because I just built it. And I really like it. So also looking for bug reports. So if you find anything hit me up. - -152 -01:06:45,480 --> 01:07:35,370 -Wes Bos: Sweet, sweet. I'm going to not so much plug but maybe a public service announcement is my next batch of stickers is due in a couple of weeks should be showing up here in Canada. And I get a lot of email about people asking me when these stickers somebody even tweeted me the other day that they had a nightmare that they missed them. So they will be like, when will they come? In a couple weeks? I bet early October I'll have them up for sale. Where will they be at bosta? AF is the website will they be there'll be for sale. And I've ordered last time I order 2000. And they sold out and I think two days or so. I order 5000 packs this time. So don't worry are probably will be enough. Hopefully. I hope so. Because that's a lot of stickers to deal with. So this should be up in in a couple weeks. - -153 -01:07:35,640 --> 01:07:36,180 -Scott Tolinski: Nice. - -154 -01:07:36,540 --> 01:07:42,810 -Wes Bos: excited for that. Awesome. And there's a syntax sticker in this coming pack. So make sure you you jump on that. - -155 -01:07:43,860 --> 01:07:45,300 -Scott Tolinski: Is there a tasty treat sticker? - -156 -01:07:45,660 --> 01:08:03,420 -Wes Bos: No. I kind of wanted to but I kind of wanted to make all the stickers like hilarious inside jokes. But like I realized that like most people don't understand what these inside jokes are. So I try keep them a little bit generic so that people don't feel weird about putting them on there. - -157 -01:08:05,070 --> 01:08:07,170 -Scott Tolinski: You might feel worried about tasty treats on yellow. - -158 -01:08:07,200 --> 01:08:26,180 -Wes Bos: Yeah, I don't know if you'd like a tasty treat sticker tweet us and we'll we'll make it happen in the next patch. Cool. Alright, so that's it for this episode. Make sure you check out us I guess who said on Twitter. I'm at West boss calm. I've got a list of all my courses there as well. Other than that, we'll see you next week. Zia bass. - -159 -01:08:27,870 --> 01:08:38,310 -Scott Tolinski: Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like this show. Until next time, - diff --git a/transcripts/Syntax120.srt b/transcripts/Syntax120.srt deleted file mode 100644 index 60c6a44af..000000000 --- a/transcripts/Syntax120.srt +++ /dev/null @@ -1,284 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,589 --> 00:00:24,090 -Wes Bos: Welcome to syntax the podcast with the tastiest web development treats out there. My name is Wes Bos. I'm a full stack web developer from Canada and with me as always is Scott to Lynskey, who is also full stack web developer. How you doing Scott? - -3 -00:00:24,479 --> 00:00:56,310 -Unknown: Hey, I'm doing good. I'm not from Canada, though. I'm from the United States. Yeah, no, we are we are cross cross the border here. I'm doing good. If you can't tell from my voice right now, you'll probably upload tell as the honey is wearing off that I am a bit under the weather. I have the worst kind of sickness for hosting a podcast, which is one that involves your throat. So here, I might be struggling a little bit to be talking. Hopefully, it's not too bad. And hopefully my voice isn't blown up the bass in your speakers today, because I'm getting a little busy. How are you doing? - -4 -00:00:56,610 --> 00:02:06,690 -Wes Bos: I'm doing great. I am going to Paris in a couple days for some developer stuff. So I'm pretty excited about that. So today, we're gonna be talking all about next versus Gatsby. This is a question I get all the time from people. Why didn't you use Gatsby in your course? Or why did you choose next? What are the benefits of the upsides and downsides of both them? So there's a lot going on in this question. It's not they're not totally comparable, but they do overlap in a lot of the areas. So we're gonna attempt to break that down today and explain why you might want to grab one over the other. Today, we are sponsored by two awesome companies. First one is Log Rocket going to do all of your error and exception tracking. And second one is a brand new sponsor, but one we've been talking to for a long time. And it's a clothing sponsor. It's called the armory. And they are a men's retailer out of New York and Hong Kong. We'll talk about them a little bit more throughout this episode. But the reason why I've said that we've talked to them for so long is because they sent us clothes, and we had to make sure that they were decent. They were good clothes. So we've been wearing them for the last couple months and really enjoying them. So we'll talk about all those companies partway through. - -5 -00:02:06,900 --> 00:02:15,960 -Unknown: I'm gonna say they're beyond decent. I'm going to go ahead. You'll you'll hear us rave about these closed in a little bit. But, uh, I think we're both big fans. - -6 -00:02:16,110 --> 00:03:12,419 -Wes Bos: Yes. So welcome to the armory for sponsoring the podcast. So we're gonna break today's down into a bunch of different sections, we're going to talk about server side rendering what to do with your data, routing, and creating pages, the plugins and finally deploying and hosting your website. So we'll talk about the pros and the cons to both next. And Gatsby, if you don't know what either of these things are, they are both frameworks that are built upon react, and they make they make creating server rendered applications or websites much easier, as well as providing a whole host, not just server side rendering, that's just a small piece of the pie for both of these things. But they they make just sort of like building a react website or application. Very, very smooth. They do all of the tooling under the hood for you probably never have to write a web pack config unless you're doing some really up to stuff out there. It just sort of handles it all for you. - -7 -00:03:12,539 --> 00:03:30,539 -Unknown: Yeah. And they are they are both awesome platforms. I mean, they're awesome. And this is like, this is what 2019 web development is all about. I mean, these things are straight out of the future, in terms of when I was using them last year, I felt like these things is where it needs to go. This is this is the hotness, - -8 -00:03:30,630 --> 00:03:53,940 -Wes Bos: yeah, I would even go as far to say like, if you're looking to get hired in react, I would definitely spend a little bit of time building an app in both of these things, just so that you can throw both of those on your resume, because they are the the two hot things right now in building a react application. And I would go as far to say, as I would never build anything in react without choosing either next or Gatsby. Yeah, - -9 -00:03:53,970 --> 00:04:29,760 -Unknown: that's a big statement. And I would mostly agree with you on that. You know, it's funny, I think I think even particularly, like you said, both of them are good skills to have. But I know people that with some serious Gatsby skills that are getting some really good gigs right now in these Gatsby gigs are taking people out of, you know, an early dev role and moving them into a higher dev role because it's a specialized skill. And again, people see this stuff, they see how fast the sights are, they see how amazing it is. They want to get it going. And if you can have some specialized skills in this department, I think there is a lot of room for you to grow in your career. - -10 -00:04:29,940 --> 00:05:05,700 -Wes Bos: Yeah, I think just like maybe six, seven years ago, if you double down on WordPress development that was very good for like, thousands of developers career I know tons of people who built their career on on WordPress. I think that if you were to double down on Gatsby, not even just react just Gatsby itself. Obviously you need to know react to do this. But if you can focus in on Gatsby and become an expert, because there is so much to to learning a Gatsby next not so much. Next that we'll talk about that. But next is more more pared down in what it offers you. I think there's a huge opportunity for your career there. - -11 -00:05:05,700 --> 00:05:48,780 -Unknown: Yeah, definitely cool. So let's get into it a little bit with the server side rendering component of both of these things, because they both offer what could be seen as server side rendering, but they offer in a totally different way. Where next .js is offering server side rendering on demand, right? When you hit that page request, it goes off and it renders the page and brings you something back. The Gatsby is building out actual HTML files that are going to be returned, right? So it's going to be a little bit different where these HTML files are created at build time, or Gatsby. And then they're just sent out to the user. The next j. s strategy is the files are built and sent out to the user at the same time. - -12 -00:05:48,960 --> 00:07:26,580 -Wes Bos: Yeah, and we should say, right now, there's probably people saying, Well, next, Jess has the option to do a static site generator. For this whole episode, we're going to assume that that doesn't exist, because I think that if you were to go the static site generation, you probably should pick Gatsby, just because of all the stuff that is available. But so like Scott says, next, Jess will lay the render on demand. So next j. s is a node application that will accept your request, you can also integrate it into your existing node Express application as well. And you can think of it like, if you had a blog website built on next j. s, if you were to publish a new blog post to your database, it will immediately start working, someone will be able to go and visit it. Or if you go to my advanced reacting graph qL course we use next j s in that, because when somebody creates a new product, that product, as soon as you create a product, it will automatically bring you to the product page and that that new product will automatically show up on the homepage. And that's because these things are rendered on demand. As soon as somebody makes that request where something like Gatsby, it's all done at build time where all of the data is requested at build time, all of the HTML is done at build time, which has some pros and cons, some of the pros of Gatsby is that it's very, very fast to make that page load, because it's been pre compiled and pre rendered out for you. But a con to that is that sometimes you need instant, you needed to instantly show up, and Gatsby will have to regenerate the entire website, and then redeploy it, which in some cases, that's 30 seconds. But in some cases, that's 2025 minutes. And that could be a little bit slow for some use cases. - -13 -00:07:26,700 --> 00:08:47,539 -Unknown: Yeah. And then it might even it might throw people off from what they're used to, right. I mean, if you have like a headless WordPress site, you're used to saving the content in the back end, and then going to the front end and seeing it right there. Because that content is being rendered on demand where with Gatsby, it does need to run that build command where it has to go refetch everything do the build. And that takes time. And you won't see those updates come in immediately. You'll see them in a minute or so or a couple seconds. But it's not that instantaneous, save your content, whatever have it update. And if you're working with an API, again, there's going to be a change there, you're going to have to tell Gatsby to rebuild, which is a big thing. Like if you're going to have to trigger some white now one of the this is not an ad. But one of the cool things that Netlify does is that they just give you a simple web hook to rebuild your site with and it makes doing something like a headless WordPress or something with Gatsby super easy because you can say, all right, WordPress, whenever I save this page, go hit this, this URL that Netlify gives you and then that tells Gatsby to go, Okay, I got to go rebuild and go refetch, all this stuff. So there is some added complexity around the build process and how it's creating a new version of the site. When data comes in with Gatsby. And that complexity that exists there. It exists up front. But everything else is fast and easier. You know, easier. Yeah, way faster. Yeah, - -14 -00:08:47,640 --> 00:10:15,090 -Wes Bos: totally. And I'll give some examples here. So my new website, which will I don't know when I'll be done it, but I'm building it on Gatsby. And the reason I'm doing that is because I don't care that the build time takes five minutes because right I maybe publish a blog post or update the website like once a month. Whereas on my advanced react and graph qL course we're adding new products and disabling them and adding them to cart all that stuff is happening multiple times a day and we don't have time to sit around and wait for for that. Another benefit is that's really important here is do you want to server render authenticated pages. So one thing if you like, if you want a server render, like my cart, or you want a server render an account or somebodies internal messages, that's all authenticated. And there's no way you could pre render somebodies like back end that they're logged into. So the solution in Gatsby is just render that on the client so you don't get the benefit of server rendered. You only get it rendered in the browser. At the end of the day Gatsby still is react like it should be said that Gatsby is not kicking out like HTML tags. At the end of the day, Gatsby is still delivering a react application to the browser that then runs in the browser. And that's good unless you want to server rendered you're authenticated pages. Whereas with next js, you can make requests with cookies. And that cookie might have a JW T or a session in it. And that will allow you to server render and also pre load authenticated pages that are behind a login wall. - -15 -00:10:15,409 --> 00:11:38,549 -Unknown: Yeah, so there's definitely trade offs, right. And this is sort of going to go along with a theme that we're having here where Gatsby really, really, really shines on content that doesn't need to be dynamic. And not to say they can't do any of this stuff with Gatsby. But again, Gatsby shines in situations where content is going to be largely evil, you want to stay static, right. Another good use case for something like Gatsby would be the syntax website, which actually is not in Gatsby, it's in next. But I think the syntax website might be better suited for Gatsby, because what we release an episode twice a week, and then Gatsby could rebuild whenever we release an episode. And then the site would probably be a little bit faster, right? We don't have any authentication stuff, we don't have any of those demands. So I you know, I think that is a situation where if you're looking at the types of sites, a Gatsby site would be really well suited for something like syntax, or actual brochure websites, that kind of thing. So let's get into the data aspect of this, because these are big pieces in both of these. In fact, I think this is an interesting thing that next does really, really well and is one of the things that really, it really shined for me when I found what next was doing. They have their own sort of react bit that allows you to fetch data in the next j s system, rather than having to do it maybe just via a lifecycle method that exists within react, they have their own lifecycle method. - -16 -00:11:38,789 --> 00:12:43,500 -Wes Bos: Yeah, it's called get initial props. And it can only be done at the highest level of a component, which in next Yes, is called a page. So if you have any data that needs to be fetched and needs to be done server side, that obviously needs to be done synchronously, meaning that you can't send the HTML from the server to the client, until that data has been resolved and sent to the browser. So next introduced this thing called get initial props. I think that it's fairly complicated because the demos are really simple, where you're like, Oh, I can await the fetching data in a page j s. But in in real applications, you're probably not fetching data. At a page level, you're almost always fetching data at a component level. So what that leads you to is, you have to create like a complicated document j s, that sort of crawls the tree for any data fetching, and then bubbles those back up to the top level, and you can await those. However, this is exactly what suspense react suspense is going to solve. So I suspect that that will get much, much easier in the coming months. - -17 -00:12:43,830 --> 00:14:08,850 -Unknown: I'm really excited to see that overall, because I do, as some of you may know, I do server side rendering with data and all that stuff in my application without using next or Gatsby, I use Meteor to do it. But Meteor doesn't care about it, it's sort of like this is just the way you would do it, maybe even a web pack setup or something. It's not like a meteor thing specifically. But for me, I found that to be a difficult aspect of server side rendering, when you're doing it fully custom was saying, Hey, I have to wait for this data to come in. You know, I was it was almost like, I could get code splitting and server side rendering to work. Or I could get server side rendering and data to work. But getting all three to work was really difficult, where the data would actually be ready. By the time that it was server side rendering. And all this stuff. It ended up being I mean, it ended up being a big chore. And again, it's not like a meteor thing. It's just that this is one of those things that next JS notice that was a chore and decided to make it a little bit easier for those of you who are grabbing at a page level. And even the just the fact that they have a way to do it. That's not like a react thing. It's like their own way. This is the next JS way of doing it, I think is a big, big improvement upon just sort of saying, hey, figure it out yourself. But I'm excited. Like you said, I'm excited to see what suspense does for everyone all the way around. In terms of server side rendering. In general, I think it's going to make my setup way better, way easier, especially with the new no hook setup. And suspense, I feel like all the code bases are going to start feeling really nice. - -18 -00:14:09,179 --> 00:15:18,029 -Wes Bos: I should also say that next chance is on opinionated as to how you fetch your data or where your data comes from. You bring all of your own. You can use react Apollo, if you're if you're doing graph qL, you can just use the fetch, like a fetch API, if you just want to grab from a REST API. It doesn't care what it is. And all it cares about is that get initial props function is resolved before it actually shifts that data out to the browser. Whereas Gatsby is totally the opposite. Where Gatsby is very opinionated in how you handle your data. Because I think with everything in Gatsby Gatsby wants everything to go through it. It and by doing that it opens up a lot of doors in terms of making things amazing for you. So the way that Gatsby does it is they have this thing called source plugins which are going to pull in data from anywhere really you can pull it in from markdown or MDX. You could pull it in from WordPress. Any REST API a graph qL API, a file system, it basically it will just go off to all of these different sources that you've configured. And then it will pull in all of that data and put it into a graph qL API. And then once you have that data in your graph, qL API, you can query it via your all of your different templates. - -19 -00:15:18,270 --> 00:15:27,360 -Unknown: Yeah, and this is my favorite part. I keep going back for like, what is my favorite part of Gatsby? I don't know. I have, like 10,000 favorite parts of Gatsby. It's all my favorite part. - -20 -00:15:27,419 --> 00:15:28,169 -Wes Bos: So good. - -21 -00:15:28,200 --> 00:16:55,770 -Unknown: Yeah, one of my favorite parts of Gatsby is the fact that it's a excellent way to get comfortable with graph QL. Because you don't have to necessarily learn how to set up or work with an API. Right? You don't have to do the back end part of it. What you can do is even query normal rest API's using these these plugins. And you can really get a handle on what the syntax of graph qL query looks great. I've done a bunch of courses on Gatsby at this point. When I teach Gatsby, I think that's always my favorite part of teaching, it is being able to say, look at how easy an excellent graph qL querying can be inside of Gatsby, it is really super elegant. And I think it not only makes your code nicer, but I think it sells people on graph qL really well, they can see the benefits of graph QL. Immediately within Gatsby, one of the coolest things that Gatsby added in the v2 of Gatsby they used to sort of be more restrictive on how you're querying data, they added a static query component that's just like a normal react component that takes a query, and that you can really just use anywhere for static queries. There's also a page level query that is for more dynamic stuff, where maybe you're, you're adding some context into this query or something like that. There is a little bit of like the Gatsby way of doing things. But in v2 of Gatsby, they've definitely made it way more flexible. And in my opinion, it just got so much better in terms of handling and managing your data. - -22 -00:16:56,220 --> 00:17:35,790 -Wes Bos: Yeah, I think that that's the one thing I tripped up on is that there's two kinds of queries in Gatsby and the static query has some limitations as to passing variables to it, I believe, like I was trying to build a, I was trying to build a component that would query an image based on the source. And I couldn't do it. And all of the answers were to just query all of the images and then filter for the one that you want and the client, which is such a bizarre solution to it. So I think that and I wonder if the React suspense is going to solve this as well. I think that in a future version of Gatsby, they'll probably bring it down to just one type of query that you can use anywhere inside of the application. - -23 -00:17:36,180 --> 00:18:09,080 -Unknown: I know, David mentioned in that that spectrum issue, we were talking about that image thing that they were working on a way to sort of get around this. So I would assume they're they're very on top of it. That's one thing that the Gatsby team is always surprised me with. And I shouldn't say surprised. But it's always surprising because it always comes out with excellent updates right there. Gatsby team just seems to get it in a way that some other product teams maybe don't get. So I really, really am. I trust the direction that they're going to take this thing, because each update makes Gatsby better. - -24 -00:18:09,270 --> 00:18:40,020 -Wes Bos: Yeah, I think that they're intentional about everything that they do, because they want to ensure it like they could add all kinds of features to it. But then I think it would make it harder to use in the long run. And then also, because of the way that Gatsby works, where it's all done at compile time. It has to be generated ahead of time. There's there's things that you might think like, well, I could whip up a PHP server and make a dynamic script, no problem. But you have to remember that this is all generated at build time and can necessarily be as flexible and as dynamic as you think it would be. - -25 -00:18:40,259 --> 00:19:07,800 -Unknown: Yeah, that's definitely the context you need to look at everything you're building and Gatsby with is that it does need to be built. Right. It needs to be built at that time. And I think with Gatsby one of these things is that by building the site, you're just going to get an insanely high quality, fast experience. And one of our sponsors today provides an insanely high quality experience as well. This is the armory now this is spelled armory with a you a Rm OURY armory, - -26 -00:19:07,820 --> 00:19:11,220 -Wes Bos: the proper way to spell it as the Canadians of Brits would say. - -27 -00:19:11,460 --> 00:19:19,050 -Unknown: Yes, and let me tell you, we've had well How long have we had to close maybe about a month we've had we've had some time with the close so it's not like - -28 -00:19:19,100 --> 00:19:21,630 -Wes Bos: I got mine. Yeah, about a month and a half, two months now. - -29 -00:19:21,989 --> 00:19:38,460 -Unknown: Yeah, we've had him for a little bit so I I've had some time to really grow and attachment and the fundament fun fondness for these clothes. They definitely sparked joy with me. I look forward to putting out these every single time I do so with a little bit more about armory is Wes - -30 -00:19:38,520 --> 00:20:19,580 -Wes Bos: Yeah, so the armory is a men's clothing and accessories retailer that provides some of the highest quality clothes out there that you can get. Now, this is pretty interesting because this is not the cheapest clothes that you're going to find. It's looking for someone who wants to spend a little bit of cash on your clothes and not necessarily get a brand name but get some clothing. That is extremely high quality and it's going to last you forever and you're going to feel really really good at it so they sent Scott and I a bunch of stuff out I got a I think it was a cashmere buttoned up a wool sweater pullover and a wool tuk. Which for you Americans, a tuk is a What do you call it a beanie? - -31 -00:20:19,850 --> 00:20:33,800 -Unknown: Yes. better name than that. Yeah, but I don't know, whatever. I got a, I got a wool cardigan. And a safari jacket, a canvas Safari jacket that is Oh, loving that jacket. - -32 -00:20:35,310 --> 00:21:14,520 -Wes Bos: So the armory believes in by less by better. So if you need a suit, or a sport coat for a special date, a job interview, a wedding or something like that. Don't just go and buy a cheap one that you're never going to wear again, invest in a good piece that you're going to have for years and years to come. They're pretty small little shop. I know that in they have two spots, one in Hong Kong and one in New York. So they're pretty small. If you email them, you're going to be speaking to probably the people that we know over there. If you have any questions about the product. It's it's a very, very tailored experience shopping with them. So I know Scott, you even were just wearing it around the city the other day and somebody asks you about it. - -33 -00:21:14,640 --> 00:22:12,480 -Unknown: Yeah, was that I was at a coffee shop. That's by my house. I was just working on some code. I was working on some new level up tuts stuff. And this guy, I was wearing my my air pods. I was in the zone, I was working. And he he liked my jacket so much that he he had to interrupt me, you know, tapped me on the shoulder says like, Hey, man, I'm really really sorry. But I have to know where you got that jacket. He's like I've been I've been just looking at that jacket. He's like, I've been looking for something just like that. And I have to have it, you have to tell me where you got this. So I told him we looked at the site together. And I'm pretty sure he's probably ordered it by now. Because he was uh, he was like down at a no, it's funny, because it's like, that was maybe the first time I had worn that jacket, you know, out to go work somewhere because it's it's definitely like a spring fall jacket. And we've had some chilly temps here. So it's funny, it's like I'm one for one in terms of people demanding to know where I got my jacket. On the very first day I wore it outside. So definitely, I think obviously high quality stuff here. - -34 -00:22:12,720 --> 00:22:46,680 -Wes Bos: Awesome. So I want to tell you to go to their Instagram and follow them there. The armory, ar m o u r y NYC, the armory, NYC and follow them along. So you can get some ideas for the clothing that they have. I like to do this with companies where if you're not looking for something immediately at least follow them on Instagram so that you can kind of get a feel for what the whole company is about. And then obviously go to the website, take a look at all the different stuff they have for sale at the armory.com. So cool. It's pretty cool to have a clothing sponsor on the podcast. And we want to thank the armory for joining us. - -35 -00:22:46,860 --> 00:23:32,880 -Unknown: Yes, thank you. Cool. So let's get into it here talking about routing and pages. These are concepts that typically you'd think, hey, the framework, why would a framework touch routing, we have react router, we have react router, we have these options to do routing. And many people are so used to that. But one of the cool things about having the framework take control of the routing is that it understands your application in a way that it can build out and generate these pages via server side or via via static site generation. And for the most part Gatsby, and next j s, they handle routing very, very differently, were very differently, but also in a way that is sort of centered around I don't know ease of use, they're both very easy to use the routing systems. - -36 -00:23:32,910 --> 00:25:26,700 -Wes Bos: Yeah, there's no like configuration for your router. So I think previously, when we first started react with things like react router, the first thing you do is you do the router first, and you configure it, whereas with next j s, all you have to do is create a there's kind of like two directories that you have an index JS application, the only one that you actually need is a pages directory, and every single file inside of your pages directory will be a page. So you might have an index j s, that's your homepage, you might have an about dot j s, that's your about Ford slash about. And you might have Ford slash team Ford slash members. That would be a directory called team and a members.js file. And it's just like the old PHP days or the old HTML days where you just create a file. And that would be your router right there. You don't have to configure anything out there. It's pretty cool, because you can nest them as deep as you want. And one downside to that is that if you want like custom routing, if you wanted like forward slash items like in my my advanced react and graph qL course, when you want to view an item, it's forward slash item, and then it's a query string, which is question mark ID equals ABC 123 will be really cool is if you had custom slugs like WordPress where forward slash item forward slash sick pair of shoes with dashes in between. and you can't do that in the next class by default. Anytime you have something that is dynamic like that, you have to pass it as a query string, which is the question mark However, there are some options out there where you can use like an express server to handle all of the routing for you, and then pass it. So there's, there's some packages out there. The reason I didn't use that in my course is just because like, I feel like that's a big missing point in next, Jess, because because it is next Jess is a node server, so they should be able to handle that. But I think the reason they don't do that is because then you'd have to configure that instead of explicitly just creating pages in your pages directory. - -37 -00:25:27,000 --> 00:25:28,770 -Unknown: Yeah, that this is a huge bummer. - -38 -00:25:28,800 --> 00:25:39,360 -Wes Bos: Yeah, I think so to that, obviously, they have their the reasonings behind it. But just as someone who is using a framework, that's something that you would expect to have inside of a framework. Yeah, I - -39 -00:25:39,360 --> 00:25:42,810 -Unknown: look my slug URLs, my pretty pretty URLs. - -40 -00:25:43,380 --> 00:26:24,390 -Wes Bos: Totally. So Gatsby allows you to do this, because at the time of build, you know, all of the got my Tim Hortons tea hearts. Yeah, my wife just brought me a Tim rim. In Canada, it's roped the rim season where you drink your mediocre coffee. And then you roll the rim of the cup up and you might want a jeep. So we're, we're drinking a lot of mediocre coffee right now to hopefully win achieve Fingers crossed view on that Jeep. Anyways, well, we're talking about Gatsby, because it gets me knows about all of the data at build time. You can create the pages however you want, right? Because it Gatsby doesn't have a pages directory, it has a create pages API. Is that right, Scott? - -41 -00:26:25,050 --> 00:28:55,950 -Unknown: Yeah. And it's really elegant. Well, because Okay, so there's two, I guess there's two types of ways that you can think about routing in Gatsby world where you have the directory based routing, like you do in index j s, right? Like, if I wanted to, I have a pages directory, I can throw in a component, I can then throw in a folder, and it does the routing structure the exact same way that nest next would, where it takes the folder name as the route, name, all that stuff. And then if you were unhappy with the pages directory, for some reason, you could head to your config file, and then go ahead and denote other directories or other types of pages using different routing ways. But one of the cooler things that Gatsby allows you to do is some really excellent dynamic page creation, using what is this node config file that Gatsby gives you. And this node config file is something that runs at build time, while it's creating these pages. So Gatsby has the concept of a page, right. And for a page to exist in Gatsby, it either needs to be a hard coded react component in your specified pages folder, or it needs to be created in this Gatsby config file. So one of the ways you would do this is on the build time, you might run a graph qL query that says, hey, go fetch me every single markdown file from this API that exists, right the Gatsby API, the Go fetch me every single markdown file. And then you can use the frontmatter to construct your URL, say, whatever, you could have totally custom URL forward slash whatever forward slash the slug of any of the dynamic. And then you can run this essentially a create pages function that is going to create a page and it's going to create a page with some context. So you're going to tell it what template to use as in what react component file to use, as well as any sort of context that you're going to pass into that query that eventually gets run, maybe it's the slug from the markdown file. And then in the actual page creation, you can use that slug to run another query to generate that page statically. So Gatsby offers a ton of dynamic functionality in terms of creating pages, because it's just a function that runs that creates the page. So if you want to do, you could create a whole bunch of pages based off an array that you just hard coded yourself, or you could have it based on the results of a query from an API. Or you could just run it once with a random random page or file. So it's really super flexible in that regard. And once you sort of unlock the secrets of the node config file, Gatsby really opens its doors. - -42 -00:28:56,100 --> 00:29:41,820 -Wes Bos: Yeah. And that's the beauty of Gatsby. And that's why it's so fast. Because if you think about forward slash item forward, slash really cool shoes in next year is what needs to happen is it needs to accept the request. And then it needs to take the slug and look it up in the database, and then pull that info out of the database, maybe run some markdown against it, then put it into the React component. And then that rack component needs to be rendered, and then it gets sent to the thing. Whereas with Gatsby that was already done at build time. So when somebody visits for slash item forward slash cool shoes, that's probably already a folder in your file system. And it's going to be instantly delivered to your end user. So that's really where I think Gatsby shines in this case where the it's going to be so nice and quick. - -43 -00:29:41,910 --> 00:30:05,670 -Unknown: Yeah, absolutely. No, since both of these are allowing the framework to sort of control the routing system, you can't just use normal anchor tags, because again, at the end of the day, this is sort of like a react thing. And I know Gatsby uses the reach router under the hood. Reach router is an excellent routing solution by Ryan Florence. I really Really, really liking retreaders? myself? What does next JS use under the hood is just its own thing? - -44 -00:30:05,850 --> 00:30:20,820 -Wes Bos: Yeah, next has its own. But there's been some rumblings that the internals will be swapped out, which is not anything to sweat just because, yeah, it'll just, it just does it for you, right? There's no config, it's not like you have to reconfigure router, it will just work, they're not going to take the pages directory away from you. - -45 -00:30:21,030 --> 00:31:30,240 -Unknown: Yeah. So what this means is basically, you have to use a link component, just like you would with any other react routing solution, but you you have to use a link component to route between. And you know, otherwise, you're not going to get any that good dynamic page switching fast sort of stuff that you get from these things. So that's just one little little note to do. If you're doing internal links, use the link component for both of those, sort of the way things are with these front end frameworks. Next we're going to get into is plugins. And, you know, I talked about my favorite features of Gatsby. This is one of the sections where Gatsby shines the brightest. Because these plugins make Gatsby from what it turns the Gatsby into is it takes what is already an excellent fast platform. And it turns it into a an excellent, fast platform that can do so many things. It can do so many things for you, it can do them well, and some of the stuff is gonna like literally, I'm using literally hilariously here, but it might literally knock your socks off. I think the first time I used the Gatsby image component, my socks literally shut off. I'm absolutely loving a lot of the stuff in Gatsby. - -46 -00:31:30,480 --> 00:32:23,820 -Wes Bos: Yeah, I think that this is the secret sauce of Gatsby in because of the way that Gatsby makes you run everything through Gatsby. There's no going around Gatsby when you build a Gatsby website. Because of that Gatsby is aware of every single style sheet, image tag ServiceWorker, all of this stuff, anything that you have in Gatsby will be able to help you in that regard. And I saw this on Twitter the other day, they said Gatsby is not a static site generator. It's a progressive website generator, which I thought was genius, because it takes just your your simple skills of templating out a website. And then you just set this powerful Gatsby on top. And it does all of the things like compression, pagination, sass, or style components or less, or whatever you want to use compilation, service workers, all of these things are just almost effortless to get up and running by just installing a plugin. - -47 -00:32:24,270 --> 00:34:07,410 -Unknown: Yeah. So let's talk about maybe some of these plugins that that are that exist, essentially, you know, the one I want to talk about, specifically, I mentioned my socks coming off was the Gatsby image plugin. And like, you might be wondering what this thing do, right? Well, it offers both a component as well as a way to query and transform your images, which means that you don't have to worry about all of the hard things that make images cumbersome and large on the web, right. And Gatsby is all about speed. And so one of the cool things that Gatsby does is that you can say, Okay, I need a fluid image, that's going to automatically generate an image that is the max width of the container, okay, so therefore, the image is only going to be as large as the container, I need an image that's the max width of the container. And you know what, maybe for slower connections, I'm going to show a traced SVG of the image that loads instantly, and then fades in the actual image after it loads. And keep in mind, this image is going to be whatever format Gatsby determines is correct. It might be a web p, for those of you who can use web p, it might be a PNG, for those of you who can't use web p, you should look into that because web P is awesome. So this image plugin allows you to do that in a way that is so insanely effortless, you just run the query, pass the query results into an image component. And then you get this image fade in transition, you get the traced SVG, you get an image that's only as large as it needs to be in mobile desktop, literally whatever you want. And it is so darn cool. I it's like I'm gonna pick one thing to rave about. And Gatsby This is it, this is my favorite feature, I think, - -48 -00:34:07,500 --> 00:34:42,510 -Wes Bos: yeah, I use it on my own website with the fade in it resizes a your image down to like 25 by 25 pixel blurred. And then it stretches that up to cover the image. So when you load the page, it a it already knows the width and height of your image which is great because then you you don't get that like weirdness of when the image loads your content shifts. So the the place of the images already there and then as soon as the image is loaded from the actual JPEG which compressed also for you, then it will just fade it in from the the blurred or pixelated version that they previously had, which is cool. - -49 -00:34:42,690 --> 00:34:58,080 -Unknown: Yeah, it's so much stuff that would be a giant pain, if you were trying to do yourself and I mean, it says you could obviously do yourself but it's not something that anybody wants to do themselves. And it just makes everything super duper duper fast in that regard. So get the image, just two giant thumbs up. - -50 -00:34:58,260 --> 00:35:40,050 -Wes Bos: I think that these kinds of plugins are going to take the sort of things where you go to like a conference and you see like a massive company who's like, here's how we spent one year compressing our images. And this is our system for it. And then someone like me, I'm like, I can't necessarily do that myself. Like, I don't have that kind of resources or time. And then now I just have to throw a plug in on and it makes, like, my favorite things in development are both when you have dx, which is developer experience, and you x, which is your user experience, and your user gets a better experience, and your developers has a better experience. And I think that's why we gush about Gatsby a lot on this podcast, but I think that it is because it is the next big thing. Word. - -51 -00:35:40,230 --> 00:35:41,480 -Unknown: Yeah, big fan. - -52 -00:35:42,570 --> 00:36:42,090 -Wes Bos: So what about plugins for next, there are next plugins out there. And generally what they are are plugins that will surface the data fetching for you. So my my react in a graph qL course I use a Apollo with next adapter. And what that will do is it will crawl the component tree for any query components that are built in Apollo and it will bring those to the top so that your query knows so that your page knows to wait upon those other than that next doesn't really have a whole lot of plugins, because that's not the scope that is looking to cover because really what next is is routing a linking prefetching. So that's another cool thing that next will do is if you put a prefetch attribute on a link, it will just go ahead and pre load that page for you. So that when you click next, it will have already been rendered in the background and will be an instant cutover dynamic importing just a couple little things that that next does, it doesn't have nearly the scope of what Gatsby is trying to do. - -53 -00:36:42,359 --> 00:39:59,690 -Unknown: Yeah, cool. And all of these things are excellent ways to extend the functionality of these given frameworks and make your applications at websites so much better. One of our sponsors today will do that for any type of project you're working on. And that is going to be Log Rocket. Now Log Rocket is such an amazing product, because what it does is it gives you complete visibility into your books. And you've probably heard us talk about Log Rocket, if you've watched this show before. But one of these things that Log Rocket is is just so insanely cool is that the proof with this is really just using it because it gives you this really awesome session replay that allows you to see your bugs as they're happening, and allows you to watch essentially a video of what triggered the bug giving you full visibility. I love this because there's nothing worse than getting an error or being alerted of an error. And your client says, Hey, I was on the website. And I click this and it didn't work. Okay, what does it mean, it didn't work? What was the output of the network request? Was that a graph qL query issue was it was the what was my Redux state at the time of this query. This is the platform that solves all of these questions for you. Log Rocket gives you again, a video showing you what the user did where they clicked. It allows you to see the Redux store at the time, it allows you see all of the network activity, it allows you see the console and errors. It is super duper cool. So I'm gonna I'm gonna request that you try Log Rocket, because this is such one of those things that once you try it, you're gonna be like, Oh, where's this visibility been all my life. So head on over to Log rocket.com forward slash syntax, and you will get 14 days for free. That's more than enough days. Because when the first bug comes in, and you see how it happens, and you see how easy it is to go solve that bug, that's gonna save you so much time, it's gonna save you so much money. That's an easy, easy sell. So check it out Log rocket.com forward slash syntax, and you'll get 14 days free. Cool. So let's go ahead and talk about the last aspect here, which is going to be hosting, because, well, you have this app, you just built it. And now you got to deploy it somewhere. You got a hosted somewhere so people can see it. Because what's the point of making a website if it sits on your computer? Nothing, there's no point Unless, of course, a trial right? You're just trying to try to learn something. So let's talk about this because Gatsby's hosting sort of picture. It's both simple and complex at the same time, because when you run a Gatsby build, it generates HTML files and JavaScript files, right. And these are the same type of old school files that you might have worked with back in the day, you could FTP up to a GoDaddy server, if you for some reason wanted to use GoDaddy, which I don't recommend. You could FTP up to one of those servers and have this thing cooking on some sort of shared server in a couple of seconds. That is the easiest possible way to host a website. And Gatsby makes that possible. But in the same regard, if you're if you have data, right data coming in from new places, or data changing and you need rebuild, the Gatsby, the Gatsby hosting picture does look a little bit more complex, until along came Netlify, which basically you just give Netlify your repo of your Gatsby site, and Netlify takes care of the rest. You need a web hook to rebuild it. Netlify gives it to you again, this is not an ad. We're just working on. - -54 -00:40:00,000 --> 00:40:03,360 -Wes Bos: Damn Netlify Guest shout outs even when they don't sponsor. - -55 -00:40:03,840 --> 00:40:17,460 -Unknown: Yeah, right. No kidding, honestly not an add if I'm working on a Gatsby site, and it needs to be updated, like it needs to be updated via new data coming in. And it's not just a static brochure, nice Netlify 100% of the time, the story - -56 -00:40:17,460 --> 00:43:07,110 -Wes Bos: with hosting, next j. s. ap is, it's it's fairly simple. Generally, you have with the next application, unless your back end is is done by totally somebody else. Generally, you have an app that runs your back end. And then you generally have a front end, which is your next JS application. And if that's the case, you often need to think about cookies if you're doing authentication. So you can get into cores if you want to, or you can host them on the same domain name, if that's the case. So generally, what I'll do for something like this is, I will host up the next JS application on something like now, and or I'll use like Heroku, or I'll talk about by digitalocean, in just a second, and then you hook up the back end on that. And then you alias them so that they're on like a front end.whatever.com and back end.whatever.com. And that way they share a root domain name, which by the way, let me tell you don't do this on.now.sh or dot Heroku, app.com. Because those domain names, even though you think that they're on the same sub domain, they're registered as tlds, meaning that you can't share cookies across them, because they're like a shared hosting environment. And that would be weird if you were sharing cookies with other people hosting their Heroku application. So just an FYI, I wasted a whole day of my life on that a couple of months ago. But that's generally how I do it. And then the downside to that is that Heroku, now they can get expensive, especially when you're hosting two applications. Next eight was just released, like 20 minutes ago, or half an hour ago. And they have very good support for running your next application in a serverless function, which is really cool. So that you don't, it won't be as expensive, because a serverless function will just boot up whenever someone visits the website. And if it's an application, that is just a demo or something like that, it's nice and quick, what I also like to do is boot up a Digital Ocean server for five bucks a month. And when you're in Digital Ocean, you can install nginx. And then you can run both the back end and the front end on different ports. And then you can use nginx to do what's called a reverse proxy. Meaning that you can say, even though like your front end app is running on port 7777, and your back end app is running on port 8888, you can proxy those through forward slash front end or forward slash back end. And I found that's probably the cheapest way other than maybe a serverless function to go about it. But then it does require the babysitting of nginx. And then I also been using this thing called pm two, which is sort of a replacement for forever, that will keep your application running and you can reboot them and look at your logs on there. So the hosting is not easy unless you use something like now on next jass. But it's not the not the end of the world. Not the hardest thing out there either. - -57 -00:43:07,380 --> 00:43:40,560 -Unknown: Yeah, yeah. Hosting, is this such an a space that I think I think Netlify sort of blew the doors off of a lot of the hosting complexities that people end up having. And I think I wonder if there's going to be more and more like simple hosts, like now, like Netlify that just like take this sort of stuff off the table for you. I mean, Heroku was really a pioneer in that, like all the stuff they got for you for, you know, just made it nice and easy. So that's an interesting space to watch, I think, like simplified hosting and things like that. So I don't I don't have anything to add to what you just said, Yeah, I think I think - -58 -00:43:40,590 --> 00:44:23,220 -Wes Bos: like site is the company and they built now and they built next. And it's really easy to put next on now. And they released now to a couple months ago, which attempts to serverless everything. And it's aggressive what they're doing, because if they can figure it out how to do it, it I think that's going to be one of the big winners for when you actually need a server, not just a static site generator. And I'm really excited for that. Because that's going to be then you're going to be paying like a couple bucks a month, 50 cents, whatever to run your website per month, it's going to be really, really cheap, because you don't need to have the server constantly running your application just in case somebody visits the website. It will boot up as soon as someone visits it. For sure. - -59 -00:44:23,310 --> 00:44:41,010 -Unknown: Cool. So I have anything else to add here. I love these things. Again, just use them. These are two skills that are not going to go unused in your your skill book. So I would check out both Gatsby and both next. I would try them out build some fun stuff with them. Any final thoughts? This is like a Jerry Springer Final Thoughts moment. Yeah, - -60 -00:44:41,790 --> 00:45:35,760 -Wes Bos: I'm gonna go out on a limb and I'm gonna say generally speaking, use necks for applications and use Gatsby for websites, because then there's obviously exceptions on both sides of those things. But generally with an application you need server rendered back ends maybe and you do need the immediate effect. dates for different pages. And for a website, it generally isn't a big deal to have that little little lead time. And I also wouldn't be surprised if Gatsby rolled out something where you could do like partial updates to your your live version of the website. Because when you're developing Gatsby locally, it's not like you make a change to a markdown file and you sit there for 20 minutes while it regenerates. If you make a change to one of your files, it will immediately reflect that via hot reloading in your development environment. So I wouldn't be surprised to see if that that one pain point in Gatsby will go away in the future. - -61 -00:45:35,970 --> 00:46:40,950 -Unknown: Yeah, I'm going to go out on a limb and agree with you enough. Because, wow, anytime Yeah, I know, right? anytime I'm I'm looking to build a website, like a website, I got a client, they got a website, they got this many pages what I'm looking at Gatsby, I'm looking at it, and I'm not even thinking about it. You know, I'm looking at it. But I'm already looking at the Gatsby page. I've already started I haven't. I'm not like looking to see if I should be using it. And again, I don't use next JS a ton of stuff myself because I like Meteor, just because it's sort of like next gassy, but with a database. I think there is an awesome option for building apps. And it does a lot of those things that people find difficult. So I think I love both of these platforms. I think they're excellent, excellent choices either way. But yeah, cool. So sick pics, do you have any sick pics here? I should mention that sick pics, for those of you who may be listening for the first time is the section of the show, where we talk about things that we like that are sick, they don't have to be web dev related. They're typically maybe techie gadgety, just sort of stuff that we like podcasts, products, things. We're not trying to sell you on stuff here. This is just stuff that makes our life better. So I have a sick pick if you do not have one ready. - -62 -00:46:40,980 --> 00:46:42,000 -Wes Bos: Yeah, I'm thinking of one, go - -63 -00:46:42,000 --> 00:48:05,580 -Unknown: ahead. Sure. My sick pick is going to be a repeat sick pick for me, because I've gotten more joy out of this thing recently. And I think this was an old old sick pic here. Or recently, I found that I had bought some of these motion sensor 209 LED these motion sensor, two LED lights that charge just via USB cable, and they stick with a little magnet somewhere. I recently remember that I bought like a whole bunch of these at one point. And they were just sort of sitting in my closet even though I had used some of them in some places. And we have an old house, our closets don't have lights in them are we have some weird nooks and crannies that get really, really dark. And so what I did is I bought these little $12 Let me tell you $12 motion sensor, two LED lights with a magnetic strip. And I just stuck them in places. I found these ones in my closet that I hadn't used and I put one underneath part of our pantry, I put one in our bedroom closet. And every single time I go into the closets that have been dark since we moved into this house, and they light up, it instantly brings me joy that I can finally see in these places that I did not have light before. And now I have light and then there was light. So check these little lights out. It's 12 bucks for this thing. It charges via USB, it's led, it's motion safe, people use them for all sorts of stuff. And I have had an amazing experience with this. I've been using these for a couple years now. Big Big fan. So check them out. - -64 -00:48:05,820 --> 00:49:40,710 -Wes Bos: I'm going to pick something that you instagrammed about a couple weeks ago and I dove into it. It's it's a podcast called the dream. And this is a podcast. Oh man, it's so good. I ate it right up. So this is a podcast that goes into MLM multi level marketing, specifically, and for I'm not sure if this is popular in Europe, but in Canada in the States, it's extremely popular for people who you went to high school with and haven't talked to in 10 years to try to sell you leggings are essential oils or makeup. Yeah. Basically like it's like direct marketing where you shake down your family and friends. And it's really frustrating for me to see it because they target people who are just looking to make a little bit of extra money and need the flexibility of a work hours because of of life situations. And they're often targeted in spending their own money. And just like almost going like a lot of people have to go bankrupt after these things. So it's just been so good, because it helps me see it on both sides. Like it's easy to like I often go on this subreddit called the anti MLM. And it's just like bashing people who are trying to like sell stuff on Facebook and shake down their friends and family. But like it also shows you like the other side of things as well where these these are like genuinely good people trying to make a better life for themselves and get a little bit of extra cash and how these like really scammy companies prey on these types of people. So it's like nine episodes and then it's over. So I listened to them all in like two days or something like that. It was super good. called the dream at the dream.fm Yeah, I - -65 -00:49:40,710 --> 00:50:49,080 -Unknown: from the history of this stuff to be fascinating. I found it I mean a lot of aspects of the series to be fascinating. But yeah, you ever I feel like everyone probably knows someone who's trying to sell you something that is like very clearly like, Man, it's a pyramid scheme. So yeah, I found it to be just like really, really sort of interesting and like a car crash sort of way. There was a lot of details. I didn't realize a lot of scamming going on. So a good look into this. That was really well done. Yeah, plugs. I'm going to be shamelessly plugging a relevant courses mind to this podcast episode, which is my pro Gatsby two course. It's called pro Gatsby two. I get a lot of questions about this because it is for version two of Gatsby, the naming might be changing at some point here to just pro Gatsby after, you know, after the updated version, but this will teach you Gatsby inside and out if you want to learn about everything we talked about in this episode, in terms of using the image component, creating pages, even doing some little animation stuff, hosting all that good stuff. Page query verse static query, check it out, pro Gatsby two at level up tutorials.com forward slash store, or become a pro at level up tutorials.com forward slash pro and subscribe for the whole year save, save 25% so check it out. - -66 -00:50:49,200 --> 00:51:21,990 -Wes Bos: I'm going to shamelessly plug my new sales opportunity for motivated individuals who want to work from home. Oh, for a couple members who want to get into selling courses for me and are really interested in earning, like just swimming in cash and signing up others beyond you. If you sell over $10,000 a month I will give you a Mercedes that you can drive around in and okay. That'd be funny to do like a MLM for selling courses. Like what was - -67 -00:51:23,370 --> 00:51:27,870 -Unknown: that? Yeah, you, you, you. Yeah, I can't even that hurts my brain. - -68 -00:51:29,340 --> 00:51:54,690 -Wes Bos: Anyways, I'm just gonna pick or shamelessly plug my courses if you want to go to West boss comm forward slash courses, you can see a list of all the different courses I have, including my advanced react and graph qL which dives deep into using next jazz to create a server rendered in server authenticated react application with graph QL. Nice sec. Alright, I think that's it. Thanks for tuning in. We will catch you next week. - -69 -00:51:54,900 --> 00:51:57,300 -Unknown: Catch you next week when I'm hopefully not so sick. So - -70 -00:51:58,620 --> 00:51:59,040 -please - -71 -00:52:01,020 --> 00:52:10,740 -head on over to syntax.fm for your full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax121.srt b/transcripts/Syntax121.srt deleted file mode 100644 index aedfe0a3f..000000000 --- a/transcripts/Syntax121.srt +++ /dev/null @@ -1,32 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott, Todd. Totally ski. - -2 -00:00:25,920 --> 00:04:48,950 -Wes Bos: Oh, welcome to syntax and this Monday hasty treat, we're gonna be talking about tips to succeed on YouTube. Now, you may not have aspirations of being a huge youtuber or anything like that. But it is a great way to not only improve your skills to get better at teaching and to understand your own code better. Because once you learn how to explain your stuff, in a different way to a global audience, it really changes how you think about your code. And now my name is Scott Dylan scheme with me as always is West boss. Hello, everybody. Hey, Wes. This episode is sponsored by Freshbooks, which is one of our longtime sponsors here over at syntax. So with a little bit more about Freshbooks as West boss. Yeah, so Freshbooks is cloud accounting, or as they say, small business accounting software that makes billing painless. If you are a small business, or freelancer, or just somebody who needs to send out a couple invoices per year, and keep track of them for tax time and keep track of who's paid and who hasn't paid. You need to check out fresh books. So I really like fresh books, because tax time is coming up in probably about a month right now. And right now I'm just kind of getting all of my expenses in order I'm following up on unpaid invoices, all that good stuff. And it's super easy to do because of the dashboard that Freshbooks provides you so if you want to check out fresh books, go to freshbooks.com for syntax and use the syntax in the How did you hear about a section that's gonna get you a 30 day unrestricted free trial? Thanks so much to Freshbooks for sponsoring. Nice. Yeah, so today we're talking about YouTube. But Scott and I are both fairly active on YouTube. Scott, probably, I would say you owe a lot of your career to YouTube, Would you say that's fair? Yeah. Yeah, I mean, at least that my current career because the game does something I like anticipated. When I started my career was just sort of started out of for funsies, you could say, and then it led to a lot of opportunities. And I just saw how much it enhanced my career overall. So I absolutely the amount of success that I found on YouTube has certainly changed the trajectory of my career forever. Definitely. Yeah, stay with me, I've had been probably uploading videos for nine years to YouTube. And I don't do it with any sort of consistency. But I have quite a bit of stuff up there. And it's always interesting to look back and see what videos got really, really popular in the Flexbox ones I kind of owe for kicking off my sort of course career because before I did my Flexbox course, I had my sublime course, but kind of at the same time, I was just uploading a couple just random videos on Flexbox to YouTube. And they did extremely well. And people started emailing me like where are the rest? Where are the rest? And I thought, okay, okay, I need to like appealed it back and started from fresh and did like a full blown course and put that up on YouTube and has done super well. So I owe a lot to YouTube as well. I think it's it's really, really interesting. I love YouTube. As a consumer, I love to watch stuff on YouTube. Anytime I need to learn something, I'll go up on YouTube. And I love it as a professional. Anytime I want to be able to show something, I'll throw it up on YouTube as well. So we're gonna go through, like, I'm not sure how many tips we have here. But a whole handful of tips for making sure that you get the most bang for your buck when you do because making a video is a lot of work, right. And if you want to post it, you should get the the views and the eyeballs that you're hoping for. Yeah, eyeballs. That's what we're all after. So, first and foremost, I do want to note that like, I think people have a misconstrued view of how much money you can make on YouTube. Now YouTube has paid by rent for a little while now. And that's pretty much what it's going to do for you, you know, even at you know, nearly 300,000 subscribers, it's gonna make you money for rent, it's not going to make you superduper rich that's necessarily in this space. If you're getting into the millions of views, millions of followers on every video kind of thing, then it's gonna be a little bit different of a story. But I think people see some of the big time YouTubers and think that everyone on YouTube who has a decent following is making a ton of cash. And that's certainly not the case. So just setting your expectations in terms of like what it can do for you financially is good to get out of the gate. That way you're not disappointed when you find out you're not making a ton of money. After all this effort you're putting in at the end of the day, the money isn't necessarily the best things that I've gotten out of YouTube, best things I've gotten out of YouTube are job interviews, jobs and, and opportunities that have completely changed my career. Not not the money from the advertisements. - -3 -00:04:49,050 --> 00:09:32,850 -Yeah, I've run the numbers on it and I think that I get about $3 CPM. I know that YouTube is anywhere from $1 50 to $5. CPM and CPM is Cost per mille, which is Latin for cost per 1000 views. And obviously, that number goes up and down. Depending on how long your video is, if you have ads inserted in the middle of it, you can do sponsorship deals and stuff like that. But somebody with a $3 CPM, and you get a million views, they're probably making anywhere between 1000 and $5,000. On that some industries, like people who do YouTube videos on like personal finance, and like credit card reviews get like like $20 per 1000 views, because it's such a high, it's kind of like AdWords used to be. Those are like very niche topics that people want to get in front of. Whereas like somebody like streaming their twitch set up, it probably won't get that high, because it's mostly just kids watching that don't have much money to spend on things. Right. Right. Yeah, so it definitely does vary quite a bit. And the algorithm, let me tell you, YouTube can change that algorithm at any point, one time, it was like a couple years ago, YouTube changed their algorithm in one day, in my revenue, I kid you not, I saw it from one day to the next viewership hadn't changed. My algorithm or my income went cut in half, so that people who are doing things correctly are making money off of YouTube via sponsorships via about products via other things. So if you have success on YouTube, you should try to translate that elsewhere. Not just try to harness that on YouTube, because again, it's not going to make you a ton of money. So let's get started with some of these tips here in terms of how to get your content seen. And the big thing that works and works consistently. Besides spamming it to Reddit or something like that is S e. o on YouTube, you want to make sure that all of your videos are optimized to show up in YouTube's next watched or recommended videos or anything like that, that way, when somebody is watching some content for something that your video might pop up there as being the thing that they should watch next. And that to me has always been the biggest driver of people to my content is Seo because there's a ton of people searching for things on YouTube. The very first thing I do when I want to learn something on YouTube, is I head to YouTube, and I search for it. And then I look for the ones with some various qualities, which we'll get into as well. So again, SEO is king. And I think the most important thing about SEO on YouTube is having a good title. Now titles need to be descriptive, they should be talking about what the video is showing exactly. And it should not be deceptive, right, you shouldn't have a title that does not describe your video content. The most important thing for me in terms of deciding a good title for a video, as far as SEO goes, is to think about what a user who doesn't know what they're looking for might search for when they're searching for your video. So a bad example might be a video named react set state, right? Somebody who doesn't know about what the set state syntax is, might not search for set state, they might be searching how to use state in react or something like that. So you want to have your idea of what exactly people might be looking for in these video titles. Again, eye catching is good misleading is bad. Yeah, there's no quicker way to get thumbs down on a video than having a clickbait title like that. I also like Scott has these videos called what is blah, blah, blah, like what is graph QL. And I see that those do do really well for you it just because it's it's a great title. I've got some of my own, I do the here's how blah, blah, blah, works, they do a little bit better than some of my other videos that specific, like, let's look at some of my like worst videos right here. The repeat function in CSS Grid, right? Like that's got very low views, because people aren't necessarily looking for something like that. But they they may be looking for something like how to have a large grid or something like that, right? You have to think about what is in the actual content before just like writing the actual API's because people aren't necessarily if they knew what the API was, then they wouldn't be searching for it. Right? Yeah, right, exactly. And that's the context. You always have to frame when you're thinking about this stuff. Next up, we have description is important. So when you when you were talking about SEO, it's important to also like stuff keywords, not necessarily like, intentionally, but when you're writing the description of your video, use whatever it is that you like, take some time to figure out what's in your video and put that into text. Because that is going to a help people figure out if the video is 10 minutes long, they're going to read the description to see does this actually cover what they want? as well as it's going to do really well for SEO people searching Google's people searching on YouTube, that's going to help you out a lot. - -4 -00:09:33,050 --> 00:13:25,830 -Yeah, I make sure the first two sentences really describe what the video is doing in a way that is both searchable and practical for the user, aka This video shows you how to use state in react so that we can build a to do list blah, blah, blah, right? It's a one sentence and then it tells the user what they're going to be doing. It also has some keywords in there. So things that people might be searching for. And again, the reason why I say the first two sentences that little bit is important because everything else gets hidden. Behind a little see more tag, right? People do not click that see more, unless they've already enjoyed the video unless they've already decided they're going to watch it. So if you are having stuff in that description that is important below the sea more, no one's gonna see it unless they've already determined that they like your content. So keep the important stuff at the very top, don't throw your sponsor links at the very top, that's a quick way to get people upset. So in addition to having that first couple sentences being important, you can have SEO or SEO fluff below that and make sure that all of your sponsored links are listed as sponsored links as an ad, these are advertisements, right? You don't want to have like a link that says, I don't know, it's misleading your users to go off site to go do something that they're going to have to pay for when it's maybe a referral link or anything like that. So you want to make sure that stuff is clearly listed as sponsored YouTube is in their terms of service now that you need to do that. So do it. Next up here, we have use tags. And when I say use tags, I mean all of them, you do have a limit in terms of how many tags you should have on a video. And if you do not have that limit on every single one of your videos filled with tags to that limit, you are not doing things right. And I don't mean billing your your video was the perfect list tags that are you know, not what the video is like, if it's a video on react, don't put an Angular tag on it, right? hoping that you're going to get some of that sweet Angular audience, no, that's not going to happen, you're just wasting a tag there. So make sure that you use these tags. And one of the things I do is I use an extension and a product called Tube Buddy, which suggests a bunch of related tags. And I rely on this thing. It makes it super duper easy to come up with tags, it scans your sort of video and the description and the related tags. And it suggests a bunch of stuff for you. So instead of having to come up with this stuff yourself, you can just click, click, click, click, add these tags in there and make sure they're all relevant. Next tip we have here is schedule your content. And this is probably good for any type of content that I think the reason why this podcast just does so well is that we schedule it every single Monday and Wednesday. People know to expect it. This is not something I do just I don't have that volume of YouTube videos coming out. But I do watch a lot of people who I know there's this one YouTube channel or watch called mousetrap Mondays, and every single Monday, he tests out a new type of mousetrap, which is so dumb, I don't care about that. But I love watching them. And I know that every single Monday, there's going to be a new one out there. So if you can sort of like much ahead of time, like what I'll do when I when I released my free courses, I will schedule them every single Monday, Wednesday, Thursday. And that will just start to get people in the rhythm of knowing when your new content is going to come out. Yeah, when I built my channel, I had strict Monday, Wednesday, Friday releases, and people knew that they could always check back now since I haven't been doing a ton of that scheduling, but I plan on doing it more my what is Wednesday thing was really good for a little while, and then I sort of fell off with it. So I'll plan on bringing the what is Wednesdays back definitely this year. And it's also worth trying your videos out at different times of the day in different days. Because you might think like, oh, Monday morning is the best time to post a video but like my wife posts, YouTube videos, and the best time for her to post a video is on Sunday afternoon, which seems like the worst possible time but it's the best for her because that's when the type of person who watches her channel has a little bit of free time and wants to sit down and watch a little bit of YouTube. Absolutely. - -5 -00:13:25,949 --> 00:17:27,240 -Next is going to be keeping viewers because well you get people to watch your video. That is a good way to get a view on a video. But it's not a good way to get a view on 10 videos. The best way to get a view on 10 videos is to have them stick around and smash that subscribe button so hard that they break their trackpad. So keeping viewers is extremely important. And the number one thing that gets me to stick around a YouTube video or YouTube channel is quality. If I go to a YouTube channel, the video quality is on point the audio quality is on point the examples and maybe the if they're showing code the code is large enough to see and everything is like that. That is the quickest way for me to click subscribe. The quickest way for me to leave and never ever come back is using your computer's microphone could also be just typing into a text editor instead of talking into a microphone. These are all all reasons why I would banish your channel from my life forever. And another would be you know, pissing off your audience with clickbait. Don't use clickbait strategies I get you know a lot of people can't see through that stuff. But I think that people who are valuable viewers, they can see through clickbait stuff they can tell when you're just trying to get people to trick them into watching your videos. So stay away from that stuff always be providing value. Those are awesome. I don't even have anything else to add to that next little ones I found that I see people using more recently. So a lot of these tricks that we have for making a our YouTube channel, people start to use them, they work really well, then the rest of the world catches on and then they stop working as well, or YouTube changes the algorithm. Like the tagging thing. I don't find the tagging works as well, it still works for sure. But I don't think it works as well anymore. There's other tricks that sort of come around. It's not a golden ticket or something. No, no, totally. So the other things I see people doing right now is pending comments. So I think a lot of people now instinctively skip over the video description, and go immediately for whatever the comments saying. So if you can write yourself a comment or have somebody else who hasn't written a nice or helpful comment, you can pin that to the top that will really help along the same lines as that is liking other people's comments. YouTube will now show your avatar as hearted beside comments, and it will push those to the top. And what I found people are using these for is keeping the trolls at bay. So if you like 20 of the top comments, what happens is that you don't all sudden have these like snarky trolls, who are just there to like, say first or something that is mean. Yeah, because you scroll, scroll, scroll or whatever. I can only see the the nice comments I'll give up. Yeah, right. Well, and speaking of keeping the trolls at bay, I delete that stuff. You know, I delete the trolls. If somebody's spamming, if somebody says, Well, this video is great. If you like this, you should check out my video on this. No, you get banned for forever from my channel for that, because because that's why not. That's why people like people aren't looking at the comments to hear arguments, they're not looking at the comments to see somebody saying first or for advertising yourself. They're there in case there's an issue with the code. Or maybe they have questions, or maybe they ran into a problem, and they're trying to get past it. And those are the comments that are useful. So I have no problem banning or deleting comments that do not fit that people are dropping f bombs in my comments. Like, listen, this is an educational channel, I want kids to be able to watch this stuff like I have no problem deleting that stuff. Next one we have here is this is just a tip in general, I think, and I see it in a lot of people who have YouTube channels that are fairly new, and it's not being able to finish a thought or finish a sentence. You see this in public speaking as well, where people sort of end their sentence with sentences with end. Yeah. And yeah, or knowing where to take a thought and to end it and just stop talking is a skill. I think that a lot of people can improve upon. - -6 -00:17:27,320 --> 00:22:07,500 -Yeah, and edit your stuff. I mean, edit that stuff out. Yeah, that, you know, don't leave that stuff in there. Next is going to be collab when you can, this is a good one for growing your audience. You know, one of the things when I had been doing my channel for a little while, and those of you who have been a fans of different YouTube channels by remember, Dev tips for designers with Travis and Travis and I started chatting A while ago about this stuff. And we ended up interviewing each other for each other's channels. Then we did some joint videos where we talked about different topics that were sort of, you know, blog II sort of podcasting like things where we were, you know, even just hanging out or talking about different Dev and design stuff. And we would publish on one or the other's channel and more recently, Travis released a video tutorial series on level up tutorials. So being able to collaborate with other YouTubers, especially ones that have decent sized audiences is a big thing. Now, if you are a YouTuber with five subscribers, and you go to a YouTuber with 500,000 subscribers, they're going to say no, so find other people who are in your realm or just a little bit, right, if you have 10,000 subscribers, maybe find someone with 20,000 subscribers, or even go big 550 thousand subscribers or something like that. So don't go too big, keep it in your zone, and collaborate, it's going to give you some practice. And by the time you're building up, and you want to go ahead and get those big fish and collaborate with them, then they're going to see your qualities high, you work with people really well and they're going to want to collaborate with you. Finally we have here is just use all the features that YouTube has to offer. So YouTube has cards and they switch us up quite a bit. So sometimes if you It's annoying, watch it. If you watch like a older YouTube video, people are like, just click here. Yeah, point into like a blank spot. And there's like nothing there. So YouTube has cards and things that can be overlaid. They have this new YouTube premiere, where you can watch a video with the author and it streams live. I watched one of those but I found myself frustrated because I like to watch videos that to x. And I was like this is this is real life. It's too slow for me. So maybe I just need to start it in half an hour later. playlists are very helpful I find so every time you have a video, pop it in a playlist, spend some time curating your your page so that if someone says Hmm, I'm new to this channel, there's 400 videos in here. What should I watch, and if they click through to your channel, you can show the different sort of like I have a JavaScript one I have a CSS Grid one, a whole bunch of different playlists that And that will also help your recommendations as well. Yeah, absolutely. You know, I definitely I take advantage of this kind of stuff, I use playlist really heavily to organize my content. And then I have all my playlist on the front page. Again, at one time, I was really, really intense about setting up my YouTube channel. And since I've died off on it is a little bit, but I use these things definitely. And YouTube is always coming out with cool stuff in terms of like, even the pending comments is pretty new in the scheme of things. So use the features that they give you, because they give them to you for a reason. And definitely take advantage of all that stuff. Again, your channel can get as big as you want, if you are willing to put the time and effort into it, if you're not willing to do that, it's probably just going to, it's going to probably stay small. And that's cool. And I think the last note I have on here is don't get sucked into the BS of YouTube, right? So many people, they're trying to be other people on YouTube, they're trying to do what other people are doing. And they're not trying to be themselves. They're trying to use clickbait everywhere. They're trying to just sucker you in with low quality. But using like tricks, if you feel like you're having to trick people to watch your stuff, it's probably not a good route to be in. Again, you don't have to follow any of this stuff. You can say Screw it, I just want to do this. And then when I started my YouTube channel, the whole goal was to provide documentation for things that did not have documentation. And that was it. I only implemented some of these strategies after I was trying to make more money on youtube and do things like that, again, you do not have to follow any of this stuff. Do you? Do you? And I think that is going to really just improve your enjoyment on this kind of platform. Absolutely. I agree. So hopefully, those are some tips for your YouTube channel. If you have a YouTube channel that you'd like us to check out tweet ads, syntax FM, and we're retweeted a couple of them because it's kind of interesting to see what what type of stuff that people are working on. Because I often find that some of the best videos that I find only have, I don't know, 1000 views on them. And I think wow, this content is is high quality it should it should be surfaced much more - -7 -00:22:07,530 --> 00:23:12,180 -Yeah, you know, it's extra funny, you say that I was on a, I was on a fitness Reddit and there was like a video about bent over rows. And somebody was saying, like, I'm doing my bent over rows, which is an exercise, we lift the barbell up to your chest, I'm doing those wrong, and I can't figure it out. And then somebody said, oh, here's a video giving you like eight easier ways that activate the same muscles, but are like less difficult to mess up the form. And I clicked the video and I watched it and it was so effective and so good. I click subscribe immediately. And then your I noticed after I click Subscribe, that channel had two subscribers to subscribers and they had like 20 plus videos. And I was like, This is bananas. How does it How does nobody find this stuff? So definitely we want to share some of this this Good, good content. So pass your good stuff along. We want to you know, help you out if you are making good stuff and people aren't seeing it. Awesome. Anything else to add? I got nothing. Awesome. Cool. Well, thanks for tuning in. Hopefully you enjoyed that and we will catch you on Wednesday, who is - -8 -00:23:14,310 --> 00:23:24,090 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax122.srt b/transcripts/Syntax122.srt deleted file mode 100644 index 949686d15..000000000 --- a/transcripts/Syntax122.srt +++ /dev/null @@ -1,352 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax, the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:06,120 -development treats out there, - -3 -00:00:06,149 --> 00:00:09,000 -strap yourself in and get ready to live ski - -4 -00:00:09,000 --> 00:00:10,530 -and West boss. - -5 -00:00:10,589 --> 00:00:43,979 -Wes Bos: Welcome to syntax. This is the tastiest web development podcasts out there. My name is Wes Bos, I am a full stack a JavaScript developer and I make my own web development courses that are going to teach you how to build thing I know a lot of you know that. But it's funny talking to people over the last little while sometimes I talk to people about the podcast, and they don't even know that what our businesses are or what we do. And I think it's because we wait till the very end. Sometimes people don't necessarily hear that. So I create web development courses on JavaScript primarily. And as a Scott, do you want to tell us about yourself? - -6 -00:00:44,009 --> 00:01:14,400 -Scott Tolinski: Oh, yeah. My name is Scott Tolinksi. I'm a web developer out of Denver, Colorado, I run level up tutorials, comm which is also web development tutorials on a subscription based service. And yeah, that's pretty much what I do. I am primarily known as the level up tutorials guy, I think, more so than people even recognize my name. So like, oh, I've watched your YouTube videos for many years now. So yeah, that's what I do. And there's also I have thousands of videos for free on YouTube. So check those out, too. - -7 -00:01:14,549 --> 00:01:27,840 -Wes Bos: The other day, I was searching on how to do something in sketch. And your video came up from like, five years ago, I think, yeah, yeah. Still, like still a resource for learning how to do specific things in sketch, I thought that was really funny. - -8 -00:01:27,869 --> 00:01:40,470 -Scott Tolinski: I know, I had a friend from high school, email me and he's like, Hey, I haven't talked to you since high school. But my boss just sent me this video to watch. And it was you. It was really, really, I was really surprised by that. So that I thought that was nice. - -9 -00:01:41,129 --> 00:02:47,400 -Wes Bos: I get that a lot with people who I knew in high school that generally like oh, my significant other was watching your video. And I was like, Hey, I went to school with that guy or something like that. It's a small world. It is it is a very small world. So today, we're talking about how we manage our lives. These are the systems and the tools that we use for managing all that is going on in our life. So we've done an episode previously, that was fairly popular on productivity. But this one's going to be more of just an approach for like the systems. How do we approach taking notes, focusing on stuff, managing to dues, scheduling stuff, goal tracking, and whatnot. So it's going to be both like high level ideas as well as actual tools that we use. We are sponsored today by two awesome companies. First one is Sentry, it's going to do all of your error and exception tracking on your server side on your client side. Any side that you have, it will log all of the errors, and Freshbooks which is cloud accounting for small businesses, freelancers, anyone who's trying to collect some money. So how are you doing today? Scott? Doing good, - -10 -00:02:47,460 --> 00:04:05,009 -Scott Tolinski: just went to physical therapy this morning before recording the episode. And they've been doing this sort of dry needling. I don't know if you know about dry needling. Yes, I didn't know very much about it. But apparently, so to give you some background, those of you know, I injured my tailbone quite severely and it's been taking a long time to heal most specifically because the muscles around it are all just messed up. So I've been I've been sitting on one one leg, essentially to try to relieve some of the pain and all that did was make all of the muscles in my hips just totally jacked up on both sides. So she was doing some dry needling on my my one hip muscle. And it's like so that when you for those of you don't know, they basically stick a little needle in there and it's hooked up to electrical current, that current like really releases the muscle. But as they're doing it, it's sort of like makes the muscle pulse. And she stuck it into this one particularly sore muscle on my leg and my leg jumped nearly off the table. It's like she had she had like one out of 10 and my leg nearly like flew off and like kicked a whole bunch of stuff. It was bad. I think she was like, Whoa, I didn't even turn this thing on and that just like freaked out. So needless to say I got some issues there and I feel really good right now though. I'll tell you that I'm up. I'm definitely feeling a lot better. How are you doing? - -11 -00:04:05,250 --> 00:04:42,260 -Wes Bos: Awesome. Good. I had my birthday yesterday, which we record these a couple weeks in advance so it's well past now but just enjoyed my 31st birthday and made some pizza and went up for doughnuts with my kids. So it's pretty loose. Also on with this new newish holiday in Ontario called Family Day, which is just like because it gets so depressingly terrible here in the middle of February. It's just cold and rainy and freezing and snow. I think they threw us a bit of a bone and gave us a family day which was also so almost always my birthday lands on a holiday which is kind of fun. - -12 -00:04:42,540 --> 00:04:48,870 -Scott Tolinski: Yeah, that's nice. My birthday always falls over spring break in college. So I was got to go on spring break for my birthday. I - -13 -00:04:48,870 --> 00:04:51,360 -Unknown: always really like though. That's pretty sweet. Yeah. - -14 -00:04:51,600 --> 00:04:54,990 -Scott Tolinski: Oh, yeah. That's always good to have a nice little day off on your birthday. - -15 -00:04:55,200 --> 00:04:59,850 -Wes Bos: No kidding. So let's, let's jump into it. First one is to dues - -16 -00:05:00,000 --> 00:05:00,480 -Scott Tolinski: Yes - -17 -00:05:00,510 --> 00:05:06,870 -Wes Bos: to dues managing all of us. How do you how do you do handle your two dues? And what why do you use it to do system? Yeah, so - -18 -00:05:06,870 --> 00:07:18,690 -Scott Tolinski: I mean, I largely picked up my to do system from the Getting Things Done philosophy, there's a book getting things done that we talked about on the show a couple times. And check that book out, we'll try to link to it in the show notes, I keep a pretty intricate to do system and I, I require it essentially, for a productive day. If I don't have a productive day, I'm going to tell you, it's 99% of the time because I did not set up my two dues when I first either did it the night before or the morning up. So usually the night before, if I'm feeling really like really zoned in on what I'm going to be doing tomorrow, I'll do my two dues. Or I'll do it the morning of and I use an application called to do list. And what I do is I basically track out all of my to dues to do list is great because it has this whole seven day view the next seven days or whatever, and it has a whole scheduling where you can schedule overdue to dues and move them around really nice and easily. You can assign projects and tagging things. My favorite thing about to do list is that you can assign priorities to to dues, which I think is just absolutely essential to having a good to do system. And so I also follow this sort of Eat That Frog methodology where you you have a frog, which is your sort of main task, and then you do that main task first in the day. So when I set up my two dues I'll have my to do list for today at the very first thing I'll do is check to make sure there's no overdue to dues from the day before, if there's overdue to dues, I reschedule them. No ifs, ands, or buts, nothing stays overdue, I reschedule them, I don't have to reschedule them for today, it can reschedule them for a time when I know I'm going to get them done. Then I go ahead and I just start adding to dues into my day, even if there's small little tiny things, right, walk the dogs, whatever, just little tiny things, I put everything in there. So I see everything I have to accomplish today. And then I start assigning it priorities. And the cool thing about to do list is it ranks your to dues from one to four in priority. So your highest priority things are read and they're at the top. And I can just start there, just crank down the list, get as many done as I can reschedule, the ones that didn't get done for tomorrow mine to do system, I think is like the workhorse behind me staying productive, especially the fact that I am my own boss and I work from home. - -19 -00:07:19,020 --> 00:09:50,299 -Wes Bos: Yeah, so I use fairly similar to getting things done. I don't do the like dates all that much unless I have quite a bit going on. But generally, I use the app called things. It's a pretty popular one out there. And I use the projects, I use the inbox the today and the projects quite a bit. And generally the way that it works is I go into the inbox and the inbox is where I just dumped everything that I have on my mind. And I've said this many times before, but it's out of your head into your system. That's that's as important as you can remember it is that if you have something going on and you say, oh remind me to do this, or I should remember me to do this. Don't make an alarm for it, don't take a screenshot of it don't like people have all these crazy systems for it just for what I do is I just dump it into the inbox. And I know that it's somewhere. And then from from there on out, what I'll do is every day is first thing to do. So open up things and I drag things out of the inbox into what I think I can get done today. And then I'll type anything else that I remember. And generally I'll put like email on there or, or like I'm just looking at it right now over the weekend, I saw I thought of a couple good demos that I'd like to do for one of my upcoming courses. So I just dumped them right into there. And then what I do is I sort of bubble them up and down in the order at which I need to do them, I put the ones that I'm dreading generally first, except for email, I don't like to email very first thing, but I'll put the things that either that I'm dreading doing or that I'm really excited about. So for I had that one of those demos I was thinking about all weekend for did I immediately because I was really excited about it. And then I just kind of worked my way through the to do list when it gets into like projects. So often before a launch of a course, what I'll do is I'll create a project for that sidebar. And then I'll just dump all of the hundreds of little things that I meant to do for this. So whether it's fixing a little bit of CSS, or whether it's checking it on a specific phone size, I know that I have them all in there. And a lot of people will use like GitHub issues or like some other tracking software for that. And those are good. I do use GitHub issues quite a bit for my projects. But just for these like tiny little things where I just want to bang, bang, bang, go through them all. I'll just dump them all into there. So big fan of that when I do have a lot on my plate, I will assign dates to them, or if they when they have a hard date of when it needs to be done. Like if I have to submit a specific document to the government. I'll put a date on that just so that I know that it won't go but I would say for 98% of my stuff. I do not put any sort of specific time dates it just just put them in order and I try to get as much as I can done in a single day. Nice. - -20 -00:09:50,399 --> 00:10:54,690 -Scott Tolinski: Yeah, I do have my nitesh two days but not times, specifically. Just mostly so I can have. You know, here's the docket for today. Right. Yeah, but that actually the You said something that I thought was really interesting. That made me think of something that I often do, especially when I'm working with other people, or maybe like freelance projects. And I don't know how many times you've ever gotten an email from a client that's maybe like a list of notes, maybe like 10 things, if I ever get an email like that, of like, here's the things that need to get fixed, ie mediately, copy every single one of those and throw them out to do list software. Because in an email, it's so easy to lose track of the individual items, or maybe even miss one. But when you have it all, you can drag it all in your to do list. And then if your to do list is like the source of truth for what you need to do, then you're going to have a more realistic view of what kind of time everything's going to take. So I really love using my to do list as a way to sort of run my entire life. And even though I've built in other systems now like what we'll get into with notion, I still I highly value, a really excellent to do system. Yeah, I - -21 -00:10:54,690 --> 00:11:53,940 -Wes Bos: think if you're gonna spend any time on your productivity, it's worth investing a little bit into first reading that getting things done book, it's pretty easy to read, I think it can get a little bit hairy here and there. But it just push yourself through it, it will definitely help you and the ideas of that book, keep coming back to me. Initially, when I read it, I tried to use like OmniFocus, which is this, like the hardcore GTD app. And I found myself like spending more time in OmniFocus, trying to figure out how it works. and spending time on my system. I was like, This is not helping me at all, because it's just making me feel productive by spending time in the application. Yeah, whereas I make this thing needs to help me do my actual job better not get in my way. So that's why I moved over to, to things or to do list or whatever, I probably wouldn't recommend things, just because it's it's Mac and iOS only. So if I were to ever switch to something else, I would probably be pretty frustrated that it doesn't. Whereas I know Scott uses to do us right. - -22 -00:11:54,210 --> 00:15:33,870 -Scott Tolinski: Yeah to do is is great, because the the desktop app is great. The mobile app is great, the web app is great. And even for those of you who use Android, we have these things called widgets, which are basically like software on the homescreen that you can interact with. And like the widget for to do list is excellent, because I can access my my to do list right from the home screen without having to get into the app. So I'm a big, big fan of to do list. Overall, I do pay for the premium, but it's really not required. It's a free application for the most part. So big, big fan of that. And yeah, so I actually get this question a lot about what we use to focus. Because I think that's like a very common thing, people really, really feel like they have a hard time not drifting, right. And so I use two applications to help me not drift. And I'm not to be honest, I don't have the self control, these applications help you build the self control. But out of the box, I do not have the self control to not open up, you know, Reddit or Twitter or whatever, when I'm trying to get work done. It just it's like almost like muscle memory, your hands just want to go to do that when your your mind's drifting a little bit. So I use two applications. One's focus for Mac, it's called hate, I think it's a hate focus.com focus, a focus calm, and it's a, it's a great little app, it just runs in your little thing, you can set it up, there's a lot of options, you can set it to be pomodoro style, gives you nice little quotes to shame you into getting back to work. And it keeps a little timer there, you can have a hardcore mode in which you are allowed to turn it off, which to be honest, I think is the best way to use this application. Because even there's just been times where you're like, Alright, well, I should, you know, I've already used up my brakes the day but I just want to take it just a little bit here. And then you you quit the application. Next thing you know, you've wasted a bunch of time. So I use a focus with hardcore mode. And then for my phone, which is also pretty important besides just keeping my phone face down on my desk, instead of face up, I use the in the latest version of Android, there's this digital well being or Yeah, digital well being is in the settings. And it allows you to set time limits for apps. So I've set time limits for all of the apps that I know I spend a lot of time in. And that way, I can only spend 30 minutes on Instagram the entire day. So I know that each time I open Instagram, it needs to be a high value open, like I'm using it for its intended purposes. And I'm not just mindlessly scrolling. Otherwise, I'm just going to mindlessly scroll and my timer is going to run out and it's going to kick me out of the app for the rest of the day. So it's really like changed how I use my phone setting up these digital well beings. I was reading somebody talk about these digital well being settings and saying, after setting them up, they found themselves going to the weather app, just reloading the weather app because they were just so tuned into needing that refresh of fresh data. And I did the same thing I was I ended up going into the Google news app. And I started refreshing the Google news app. And the next thing I know I'm like, Okay, I need to set a limit on the Google news app because I'm spending way too much time Another cool thing that this digital well being app does, or it's on an app, it's just built in Android. Another cool thing that it does is it D saturates your screen at a certain time at night, so you don't feel like you want to use your phone at night, which has been really nice for me, you know, you just set it and your your phone screen turns to gray and all sudden, you're like, Okay, I have less, I don't know, this want to be scrolling around in black and white than I did when it was all in color. So setting up these systems, I think is really essential, because I don't have the self control myself. So making the robot have the self control for me is a big, big plus, for me. - -23 -00:15:33,870 --> 00:18:20,300 -Wes Bos: Awesome, I have that focus app, but I honestly don't use it all that much. I do definitely have a problem with being unfocused. And like finding myself like you go to the URL bar, and you type in YouTube calm, and you watch something, close it and as soon as you close it, you open up a new tab and you type YouTube and you're like, what am I doing, I'm possessed. Yep, I am possessed by this thing. And those things definitely help. But I find that they often get in the way like so the other big one for me was going to Twitter, I found myself being like, I actually do need to go on Twitter to like, tweet something or like, at the end of the day, it is part of my job. But I also do dick around on Twitter a lot. So there's like this, like, weird balance that needs to be found. So a little tips I found is first I rename applications that I find myself going to a lot. So a Tweet Deck is the big one for me as I'll just go into my applications folder, and rename it and then that sort of mindless opening of the application doesn't happen because you start typing in Tw, Tw E, and it's not there. And then I'll rename it to something like get back to work or focus please, or, or whatever. And then when I need to open it, I have to intentionally type the thing that I had renamed it to, which is really, really helpful, because I don't just like and also if I go into the Applications folder, it moves it in the application folder based on where it is in the alphabet. Yeah, I found that like, just to be a stupid, simple, handy little hack. The other hack that I've not, I don't know if you'll call this a hack. It's not BuzzFeed, but dive into like, Why do I feel this way? Why am I procrastinating right now, in generally, when I'm doing these things, it's because I'm trying to avoid doing some actual work or I'm not happy with the type of work that I'm doing, or, or whatever it is. And I just had to like, stop myself and say like, Why do I feel this way? Why do I keep trying to distract myself. And usually, it's because there's like 30 emails that can be done in, I don't know, 15 minutes or half an hour. And once those are done, I start feeling entirely different way. So we talked about eating that frog doing those hard things first, just getting those done, and then all sudden I say, oh, wow, I have about four hours left today. And now I can work on whatever I want. Instead of being like, oh my god like good hours worth of melter apply to you right now. And I don't feel like doing that right now. So I'm just gonna watch some guy care some salami on Yeah, or something. So I think just, I like those those focus apps, and I like turning them on every now and then. But I don't find that they actually solve the root issue. So I've been trying to focus on like, what is it that is causing me to not enjoy this and to look away from the work that I should be doing? - -24 -00:18:20,400 --> 00:18:32,520 -Scott Tolinski: Yeah, for me, the apps what they do is they remove that compulsion aspect. Because yes, you have that notice that compulsion that you're just opening to refresh the weather, then you're like, Ah, I'm a fiend. A - -25 -00:18:33,510 --> 00:18:34,170 -Wes Bos: cycle. - -26 -00:18:34,230 --> 00:21:15,720 -Scott Tolinski: Yeah, right, exactly. One of the one of the things that I learned from this is actually this goes all the way back to high school, or one of my best friends in high school, he's there. He's a really high achieving dude. He's a very, very smart guy. And the he, I've learned a lot from him in terms of just how to focus yourself in general. But one of the things he told me is that even in high school, when he was wanting to study or whatever, he wrote this sticky note, and he put it on his desk. And it just says, There's stuff that you do not, we didn't use stuff, but there's stuff that you don't want to do right now. And then it just had big letters and meat that do it. And I usually like, I have a little note for myself on my phone screen that says that. And then I have occasionally in my to do list to do that will simply just say, Are you making progress towards your goals? Like are the things that you're focusing on today? are they helping you make progress to where you want to be? And just having that simple little reminder in the to dues or just something visible somewhere where you're going to see it, which is letting you know, like, Hey, you know, these things, they're going to progress you and even if they are hard, doing them is important. So having that that awareness is just a really super important. And it's funny because I think even in web development, simply the awareness of things such as the awareness of bugs can make such a huge difference. And one of our sponsors today is century and West had a little note here is this is the to do list from bugs, which I actually love to that would have been an excellent segue as well. So yes, essentially@sentry.io is one of our favorite sponsors here. All of our sponsors are our favorite sponsors. But Sentry has been a longtime sponsor. And it's a product that both Western I use. And I use this in production, I use this all over the place, it allows you to track your bugs. And again, we're talking about to dues and focusing, this allows you to not only focus on the bugs that you're you have there, eliminate them, maybe mark them as complete so that you can then see if it's a regression if it bug happens again. But again, it is it's like a giant To Do List of bugs. If I ever need something to work on, I can go in there and I can create GitHub issues directly from the bugs that are coming up on my website. So check out century@century.io It's a great place to get visibility into your application to get yourself focused on what you need to do and present yourself with a big old to do list of all of the stuff that you messed up in your code. So we're big fans, head on over a century.io use the coupon code, tasty treat, and you'll get two months for free, which is more than enough time to really see the benefit of using something like Sentry. So check it out Sentry datavideo coupon code at tasty treat all one word all lowercase. - -27 -00:21:16,380 --> 00:21:20,010 -Wes Bos: It's more than enough time to figure out how terrible of a developer you are. - -28 -00:21:20,090 --> 00:21:26,040 -Unknown: Right? Yeah, we all we all get bugs, it happens as part of the gig, part of the gig. - -29 -00:21:26,040 --> 00:21:26,880 -Wes Bos: Awesome. - -30 -00:21:26,880 --> 00:22:15,330 -Scott Tolinski: So let's talk about a little bit about how we track our ideas, thoughts and notes. And this is something I'm big on I have, you know, for some reason, and I think this is fairly common, but for some reason, I get in the shower, and all of a sudden, I have clarity beyond belief, I see exactly what I need to do I have all of the answers for my business, I have all of the answers for the code bugs, I have all of the answers, period, I don't know what it is. And I just want to go ahead. And like the moment I get out of the shower, the first thing I do is just enter all of these ideas. So I'm really big into this space of well, what is the most appropriate way of tracking, adding and keeping track of ideas that could potentially save you a bunch of time later or give you some sort of clarity. So what kind of systems do you use for this because I'm always interested in in how I run my ideas, notes and thoughts. - -31 -00:22:15,540 --> 00:24:58,200 -Wes Bos: I love writing down notes and thoughts. And I try to get everything out of my head again into some sort of note. Over the years I've gone through lots of different note taking applications. I'm generally when I'm out and about and I have a quick idea, I will just throw it into my to do application, that's generally because it's on my phone also syncs with my desktop, it's I know that there's like an apple notes that will do that. But I've got Apple notes on my like, on my phone that are like pizza toppings and like phone numbers and like measurements of all the doors in our houses. And like, I found that it's not a great way to log all that information. So if I just have something quick, I'll just throw it into to do and but how I take most of my notes and how I have been for probably for six or seven years now is I just great markdown files in the project folders of what I'm working on. So whenever I'm have some ideas for a course that I'm working on, I'll open up that markdown file, it goes into GitHub, which is nice, because I can see what it used to be. And when I delete things, it's pretty slick. And it's pretty smooth process. The one thing I don't like about that is that generally it doesn't work on my phone like I could like Dropbox them and open them on my phone or I'm sure there's some apps, if you have an application that lets you still use just a regular markdown file, but sinking them to your phone. I think that would be kind of cool to hear as well. But But I still want to keep the file in each of the project folders. So that's not really a huge issue for me, because I'm almost always just taking notes directly on my computer. I had used Evernote in a long time as sort of like a digital locker of things that I need to remember. So I've got all of my like shirt and pant sizes like whenever I like buy something that I like everything from like just the size of underwear to the jeans to that the the cut of the jeans that I like, I used to throw that into Evernote, I don't like that anymore, because like last night, I was making pizza and I went into my Evernote to get my pizza dough recipe. I put all my recipes in there. And like it was like you have to unsink it or pay for our premium account. And I was like God dammit, like, it only lets you have like two devices. And then I thought like how much of a pain is this, that I've trusted them with all of my data. And now I have to like figure out one of my devices to unsink just to get access to it. So that's like one little issue that I had, I have recently switched to using notion, which I know is still a paid product out there as well. But I've been really enjoying that for both we run our entire syntax we'll have an episode on on how we use notion because it's pretty we're pretty impressed with with our setup for for syntax with sponsors and calendars and things like that. But I've just been using notion as like a nice like note taking application as well. The UI is really slick. And it's been a big fan of that. Yeah, - -32 -00:24:58,230 --> 00:27:16,290 -Scott Tolinski: you know what I really love about notion is that Have all my workspaces. And they're really easy to toggle between my workspaces. So we have the syntax workspace, which has all of our, um, we'll get into a little bit more about how we're using notion, especially first syntax, but it has our episodes, it has our calendar, it has our sponsors, that sort of thing. But I can pop over from syntax, I can pop right over to the level of tutorials, one, level up tutorials, when I have release calendars, I have my series plans, I have my outlines, I have all of my business information contractors, and all sorts of stuff like that. And then I can pop over really quickly to my personal one, which is where I have several different things. So for one, I'll put like questions like if I had one of the cool things about notion is that they allow you to have different types of different types of like text. For instance, it's really easy to do a toggle list, like an accordion, where you can have an accordion type, you click it, and you get the answer. So what I'll do is I'll put a bunch of questions I have in a toggle list. And then when I get the answer, I'll just put the answer in the accordion part of the answer. That way, I end up having a big old, essentially FAQ for myself, whenever I want to come back and look at some of these things. And a lot of it will just be like a general questions, I have questions for our mortgage guy, right, we're refinancing our mortgage, here's a bunch of questions I have for him, then I can go in and put all the questions in and then get all the answers. I also have like a thoughts one, where it's just simply just a collection of quick thoughts. And some of them are really dumb. Some of them are things that are worth getting worth going back to. And other ones are maybe not worth going back to. But they they're and then they're they're sort of loaded in there. And it's nice and easy quick to access for a little while I was throwing all of my quick thoughts and to do list, because I wanted to do is to do everything. And then it just like my inbox for two dues was filled up with thoughts and ideas. And I'm just like, yeah, this is not the proper use of this tool. So sometimes I think in these systems that we get into, we end up liking a system or a tool a lot. And then we end up mending that tool to use it. And yeah, or maybe not necessarily the best ways to use it. So think notion has really changed my mind in terms of like, what should be going where. And it definitely really improved my system for keeping notes or things in general or just organizing my life. I'm just like, pretty psyched about notion overall. - -33 -00:27:16,440 --> 00:28:49,530 -Wes Bos: Yeah, big fan of notion. We'll talk a little bit about some of the fun things that we do in just a sec. Next up, we have calendar and scheduling. I'm a big fan of not having meetings. So my calendar is actually pretty, pretty open. I do put all of my flights into my calendar, I just use a regular Google Calendar, I share it with my wife, which is great, because my wife is always asking, when do you do this? When do you fly here? What time is this thing, we only have one car. So if she knows that I have like a haircut or something. She'll check my calendar before we do it. So I'm a big fan of sharing that kind of thing as well. But I pretty much just use my calendar for meetings. I really like Google Calendar, because it will automatically add in hotel reservations, it'll automatically add in flights with your your confirmation codes into it. So it'll like just extract all of that stuff out of your Gmail automatically and immediately put it into your Google Calendar. I do use the my one little trick with Google calendar is instead of using the month view, I use the four week view UI, which I think Basecamp initially showed this at once because if you're at like the end of a month, it just shows you like the rest of the month before like the month before it which is unnecessary because that time has passed. So what a four week will do is it will just show you the first week is the the current week that you're on. And then we'll show you the three following weeks regardless of if that spills out into future months. So that was a huge tip that I had. And I've told a couple people that so far and people are how do - -34 -00:28:49,530 --> 00:28:50,580 -Scott Tolinski: you get to that view? - -35 -00:28:51,390 --> 00:29:05,430 -Wes Bos: And when you're viewing your calendar in the top right hand corner, there's a drop down that will say like day, week, month? Yeah, you could just click on weeks, I think you can just press the shortcode D will give you day x will give you the four week view. - -36 -00:29:05,880 --> 00:29:07,650 -Scott Tolinski: x x will Oh, - -37 -00:29:07,860 --> 00:29:09,210 -Wes Bos: just hit hit X key. - -38 -00:29:09,420 --> 00:29:11,640 -Scott Tolinski: x gives me five days. Oh, - -39 -00:29:11,640 --> 00:29:15,750 -Unknown: maybe you don't have I don't have the four. - -40 -00:29:15,960 --> 00:29:21,450 -Scott Tolinski: Really? Yeah, I see days, week, month, year, and then five days. Oh, I - -41 -00:29:21,450 --> 00:29:31,650 -Wes Bos: see day, week, month year schedule for weeks. Maybe I've put that into my settings somewhere. So go to your settings, click the cog icon. Yes. and scroll down to view options. - -42 -00:29:31,650 --> 00:29:32,220 -Scott Tolinski: Mm hmm. - -43 -00:29:32,220 --> 00:29:34,350 -Wes Bos: Do you see set custom view - -44 -00:29:34,380 --> 00:29:38,970 -Scott Tolinski: set custom view or under leaks? setting that right now? - -45 -00:29:39,240 --> 00:29:42,690 -Unknown: And then go back and see if you have that option? I'm gonna have it for weeks. - -46 -00:29:42,690 --> 00:29:45,810 -Scott Tolinski: I got it. Wham. Bam, bam, bam, bam. - -47 -00:29:46,290 --> 00:29:55,380 -Wes Bos: Nice. So I'm glad that I could give you that one little tip because I'm not I have the calendar user. I do look at it every single morning. But that's that's pretty much it. - -48 -00:29:55,590 --> 00:31:01,800 -Scott Tolinski: Yeah, so I have long been a nun Calendar user. And I think it's been to my detriment for a long time. And so in the past, I don't know, I want to say like six months, I've started really relying on a calendar. And my wife and I have a shared calendar, anything that we both need to know about, and it's made my life a lot better. Just putting every little thing in that calendar, to me has like really changed things around, and I'm not a planner, I'm not a good planner, it doesn't come naturally for me. So for me to really keep my calendar as part of my daily things and sort of know what's happening and know what's coming up when and where has been a big deal for me. And I think it's really changed things in terms of, I don't put my two dues in here, I don't put micro items, I put appointments, you know, trips or meetings or anything like that in there. And, yeah, that's pretty much why I use Google calendar for everything, it syncs really nicely. It allows me to have shared accounts and things like that. So yeah, nothing really crazy. But simply using a calendar has really changed my life. - -49 -00:31:01,980 --> 00:31:44,490 -Wes Bos: You know, it's one thing is remember talking about smart home and how I want like a something on the wall in our kitchen, because my wife still has like an actual like, like a physical whiteboard calendar. And she's like, tries to scroll everything on there, and we can't like stuff for the next month. And I think it's silly, because like, why would you have a physical calendar, but it is nice to be able to take a glance and see where everything is. So I think like, it'd be really cool to have like some sort of like, kitchen, iPad or kitchen, Google Home mounted there. Or even like, I know, these are dumb, but like the fridge that has the the TV built into it. Yeah, yeah, I think that actually be kind of handy to be able to, like see the calendar at any given moment, just glance over at it quickly and see when all of your appointments are, yeah, - -50 -00:31:44,520 --> 00:32:29,130 -Scott Tolinski: I have a couple of Android tablets are not using, I wonder if I were to put some sort of like really lightweight version of Android on them, and just have it be mounted to the wall. Some power, it could be a cool little idea, the game the power might be in, that'd be super easy. That's an interesting idea. I think that is a space that we're gonna see a lot more of, I actually saw an ad on my Instagram feed last night for a device that was specifically like that, you know, a home automation center that was mounted on the wall. But of course, they wanted to use their whole their whole ecosystem. So it wasn't necessarily great. But it looked really nice. And it did make me sort of think about the possibilities of having that sort of that sort of Central, not necessarily a computer system, but central idea that that allows you to look at that schedule and everything. Yeah. - -51 -00:32:29,610 --> 00:32:49,320 -Wes Bos: Yeah, I think pretty soon we'll start seeing like a, like a light switch that you can swap out that will have because the light switch is generally at the height that you need it but it will also like allow you to pony off of that for USB power, and then you can plug something in, like right above it, or right below it or something like that. I think that would be pretty cool. - -52 -00:32:49,350 --> 00:32:50,970 -Scott Tolinski: It'd be pretty cool. - -53 -00:32:51,000 --> 00:32:57,780 -Wes Bos: I bet some even exists light switch with USB. It does. Oh, it does exist. - -54 -00:32:57,840 --> 00:32:58,710 -Unknown: But - -55 -00:32:58,770 --> 00:33:24,660 -Wes Bos: yeah, the thing about a light switches, there's always power there, right. So like I took one of our in our house, we never had a plug near the light switch. So I took the light switch and I switched it into a like a two for one. It's like a GFCI grounded light switch and or a GFCI grounded plug and a light switch in one man, I guess you can also just do that for USB. To be pretty cool. You - -56 -00:33:24,660 --> 00:34:37,590 -Scott Tolinski: don't have to send me this, I'm not finding it. So I'm gonna I'm gonna wanna yeah, check this out. Cool. So let's get into a ghost tracking and life progression. This is also something I do in a couple of ways. So I have a combination of notion and to do list for life progression, like, for instance, I'll keep like concepts and ideas in notion things that I want to keep there as like, these are your goals, these are what you're working towards. Like, this is sort of the company culture, this is the stuff you want to establish, right, this is how you want things to be. But then I also have milestones, right? Because we hit milestones, and I want to make sure that I'm tracking milestones or goals or big, big goals, right, let's say I want to release this many videos or, or, you know, do this or that I have these all in sort of big, big lists of just big ideas, stuff that I want to accomplish, essentially, with my business or my career. And I keep these to do list because it feels nice to check them off when I'm done. But I don't consult them a whole lot. It's sort of like I set them and I look at them. And I think okay, this would be really cool if I could get here and then it's more of like the sort of big ideas that I keep into notion. So it's a combination of notion and to do this I think between notion to do is to in Google Calendar, that's like my entire system. - -57 -00:34:37,710 --> 00:35:17,520 -Wes Bos: For me goal tracking, I do just use markdown as well. A generally will go into I've got like a folder of all of my new year's resolutions going back like four or five years, which is actually kind of fun because you can just go back and and look at where you failed terribly and where you came short and all these things. We have a whole episode on goal tracking as well. So you have for me, it's just marked down and I think the reason Why I like to use markdown so much is because not because it like exports HTML or something like that. But I feel most comfortable in a text editor. And my ideas flow the best when I'm in a text editor, and I find that I can can do that best when I'm just inside an empty markdown file and just start typing away. - -58 -00:35:17,900 --> 00:35:49,110 -Scott Tolinski: And I mean, if you ever want to move that to literally anything, you could start blog posts in markdown and actually have them be blog posts or anything like that, again, these some of these big goals we're tracking in life, a lot of this stuff is about, you know, bringing in money, right, I want to bring in money. And one of the ways that when you bring in money, you need to track it, you need to make sure that your invoices are correct, you didn't make sure that you're getting paid so that your goals financially as well as professionally come to fruition. So that's why we're excited to have one of our sponsors today be freshbooks. - -59 -00:35:49,170 --> 00:36:57,110 -Wes Bos: Yes. So when you are a small business, you're a freelancer, you're someone collecting money, it's worth not spending your time chasing around clients trying to get paid whether whether they just forgot to do that, whether you didn't know if they've paid or not all that stuff. What's super handy about fresh books is that you can log in at any time and see exactly who's paid, who's outstanding. When invoices are do any back and forth that you've had with the client. It just takes all of that like heavy lifting out of it. And I really, really like that, because there's no sense in spending more time on accounting and stuff when you should be spending time working on your actual business. So if you want to check out fresh books, go to freshbooks.com forward slash syntax, it's gonna get you a 30 day unrestricted free trial. And make sure you use the code syntax, and how did you hear about a section? Because that will let them know that you came from syntax. And I actually saw a couple tweets from people in the last couple of weeks saying like, hey, I've got my first freelance client, a lot of people have been asking for more freelancing content. So it's really cool to to see people who are using fresh books and actually running a business off of it. Yeah, thanks so much to fresh books for sponsoring. - -60 -00:36:57,380 --> 00:39:35,690 -Scott Tolinski: Super cool, cool. So one last thing, we want to talk a little bit about how we're using notion to keep track of stuff in syntax, because people ask us a lot about that. Like we talked about notion we're using it and some people open it up, and they're like, Okay, this is pretty cool. But like, what can you do, because notion is actually very, very powerful. And its core, you could think of it like a note taking app, right? You open it up, you have a document, blah, blah, blah. But one of the cool things that notion does is allows for referencing and hyperlinking of things. It allows for these really custom views like calendars or Kanban boards. And so one of the cool things we do is we have two Kanban boards. Is that how you say it combine? Is there another in there? Yeah. And so each of these we have one that's like a it's actually pretty cute because it allows you to have emojis as the icons. So we have a tasty EPS episode ideas, which has a little hamburger and then a hasty episode ideas, which has a little rocket ship next to it. And both of these combined boards have hopefuls selected and as our two sort of, like topic ideas, right. So we have in hopefuls a whole bunch of topics that are just one of us have added at any given point. And then when we're feeling like we're confident on an episode we really want to do we drag it into the selected column that makes it really easy at a glance to say okay, where are the episodes that we're looking to do? Now, the coolest part about motion is because these things are all just sort of documents that are linked together is that we could then drag an episode from our Kanban board to our calendar, which is it a total nother view, you just click and drag it right to that view, and then you can add it directly to the calendar before what we were doing is we had like several spreadsheets with ideas. And we had a Trello. And episode ideas were sort of duplicated all over the point you were doing a lot of copying and pasting, when you had an a specific episode, it was like it almost got lost after you did and sometimes we weren't moving them to complete it because you had to do it in three different places. Now it's been selected, it moves to our calendar, it's on the calendar. At a glance, our calendar has references to all of our sponsors. And because their references, you can click and all of our sponsors are their own page. So when you open an episode in the calendar, you can see this the sponsor, you can click on the sponsors name. And that quickly gives us access to all of the information we need about that sponsor, where the link is, what some of the things they want to say, and all that good stuff. And then we have all the stuff about our episodes in here. Not only that, but we can tag them what types of episodes they are. So at a glance we can see we've done this mini soft skills episodes, this many JavaScript episodes and notion. Super cool. Yeah, - -61 -00:39:35,820 --> 00:41:00,300 -Wes Bos: it's so cool. Because it's all relational data, we can look at our episodes in a table, we can look at it in a calendar view that will show us like the calendar of when everything is and then we can look at it add a table view and that will show us what all the episodes are by date and we can sort them by date most recent to least recent. We have like a column that I added in our episode calendar as well. Whether it's live or not, so that's just a quick little like, it's kind of like a spreadsheet where you can say, if today's date is greater than equal to the recording date that it was on the calendar, then show it as live otherwise, show it as not live. So it's kind of cool. Because you can just take this raw data and create these different views, and they all update each other off of each other. I think the other cool thing is that we can look at our calendar view and see who our sponsors are. But then we can also look at our sponsor view, and see when they are sponsoring, that's really cool, because we can take like fresh books, and it will just show us a list of all of the episodes that they have sponsored. We don't totally have that all tied up just yet. Because we still do maintain a separate spreadsheet of people who have bought feature episodes, I would like to move that into to notion as well, I just haven't thought about how you do it. So it's kind of cool. It's like kind of like lightweight programming. Although you don't have to write anything. It'll code relational data. Yeah, - -62 -00:41:00,360 --> 00:42:37,230 -Scott Tolinski: I think this is the really powering my life right now. There's just so many nice little things, and especially in level up tutorials, you know, I have a Kanban board of my series that I'm about to release, right. And then I can same thing potential series selected series in progress completed, I can click on one of my series, and then have a complete To Do List of each episode that I'm planning on doing that way I can plan and drag around, move my episodes, I can tag them, I can have a calendar associated with promotion for these things. And there were so many things in this. I was using GitHub issues for specifically like ideas. Like for instance, I have my own forum right now for Braintree. But I wanted to look to look into using the Braintree drop in UI form, just because it takes care of a lot of things for you that I'm doing myself right now. And if there's a bug in mind, it wouldn't be present in this drop in UI. So things like that I had an a GitHub issue, like consider using Braintree drop in UI. But that's not an issue. There's nothing actionable about that other than maybe doing some research and talking about it, it makes way more sense for it to be in sort of like a, here's some ideas of things I want to look into in notion and then that way, the team can look at that stuff. We can talk about it there. And it's not a GitHub issue. Now, GitHub has been totally freed up to here's actionable items. If there's a GitHub issue, it's something you can do in code right now, not something to think about or contemplate. So I think it's changed a lot of stuff for me, I would check it out. This is not this episode is not sponsored by notion by any means. It's just a really nice little nice little tool that I have, like totally transformed how I keep my stuff in life. So yeah, check it out. - -63 -00:42:37,500 --> 00:42:48,900 -Wes Bos: Yeah, another thing I would like to do is investigate whether it makes sense to also do to dues on inside of notion, because is this true that they do have their own to do lists as well, - -64 -00:42:48,920 --> 00:43:25,590 -Scott Tolinski: yeah, and I have explored it, and it doesn't have the things that I like, like to do list, when you check something off, it hides it from your to do, yeah, and notion when you check something off, it just crosses it out. So if you were to try to maintain a daily to do list, you'd have to be dragging things into an archive folder the whole time, which is an extra step, it doesn't do a lot of the stuff that to do is just does automatically. If the to do list aspect was as full featured as it isn't to do list, I would go all in on that. But I found myself like I tried it. And it did not really do all of this, the automated stuff that I like notion to do for me. - -65 -00:43:25,770 --> 00:44:09,900 -Wes Bos: Yeah, there's there's such a fine line in how flexible notion is, but it's also lightweight at the same time, right? It's not like a full blown, like, you can use it as a CRM, which is custom customer relationship management. But it's not going to do absolutely everything like that, like a custom Salesforce implementation going to be able to do and I think probably their growing pain will be in a year or so people are going to be like, Oh, can you do this? And I work this way, can you implement it this way, I always just think of the devs behind this thing, because they're making this very abstract relational view any way sort of type of data management system that needs to be flexible enough to work with other people, but still, like rigid enough that they can develop the thing, right? - -66 -00:44:09,900 --> 00:44:43,080 -Scott Tolinski: It's It's truly a really next level platform. It takes a lot of these things that we've used in other node platforms, and sort of blown it out. And as developers, I think this thing is sort of finely tuned for you to feel right at home because of the linking. Because of those sort of things without having to touch code, some of your markdown stuff will still work. So doing like two hashes will do an h2 rather than, you know, in some nice little system. So I'm a big fan. And and also, let's say this the depth of this thing. They keep pushing out updates non stop. There's there's been updates for like crazy amounts since I started using it. I did - -67 -00:44:43,080 --> 00:45:03,600 -Wes Bos: just notice that Google a couple days ago released the new API that you can use to automate Google Docs with JavaScript. And I wonder I haven't looked at it yet. But I wonder if this has something to do with these types of app like there's there's a notion different ones There's one called the other one like bear or something like - -68 -00:45:03,600 --> 00:45:04,920 -Scott Tolinski: that. There's one. - -69 -00:45:05,219 --> 00:45:09,330 -Wes Bos: Yeah, there's air table, which is more of like a CMS. There is - -70 -00:45:09,330 --> 00:45:14,010 -Scott Tolinski: one that we just heard about recently. Oh, it's gonna haunt me that I don't know what it is. - -71 -00:45:14,099 --> 00:45:36,150 -Wes Bos: But I'm curious to see what, like GitHub is rolling out these new actions. Google's now rolling out these actions. And I think it's really cool. Because you can just know a little bit of coding or you can think in terms of a developer, you just want to like relate items together. And you can just like automate your life away. Some I haven't checked it out yet. But I'm excited to see what it has in store. - -72 -00:45:36,389 --> 00:46:36,750 -Scott Tolinski: Yeah, cool. This is definitely a space to look for, I want to hear about what sort of systems that you are using, because everybody's got their own stuff. And again, I didn't hear about notion until I saw somebody tweet about it. And then I forget who but a lot of people use it. And a lot of people love it. And you might not have heard about it before this episode. So there's probably a whole ton of things out there that neither weather I have ever heard of. So I'm interested in hearing what you use to keep your life in order. Because as developers, we have a lot of stuff going on. We have a lot of deadlines, we have a lot of meetings, we have a lot of code that we got to keep a lot of issues that sort of stuff. So it's really important to keep all of your life in order. So I want to hear what you use to keep your life in order because that's a it's a topic that I am always looking to optimize my own life. Do you have any sick pics today Wes for those of you who are first time listeners listeners to syntax a sick pic is a pic of a product service or something podcast, whatever that we deem as being sick. - -73 -00:46:36,869 --> 00:48:50,460 -Wes Bos: Yes, I've got one and I picked up a new monitor I think in November, October November so I've I've had a couple months working with this thing and it was a bit of a risk. It's a 32 inch 4k display and this thing is huge. And I I've had the what the 28 inch Dell display for a long time and it was so good and I absolutely loved it. I just felt like there's like this like weird resolution where I wanted to crank the resolution up just a little bit higher, but I felt like things were just a little bit too small for me and I figured, okay, well if I get like a physically bigger monitor, I'll be able to hit that resolution and then everything will look good. So it's been I don't know three or four months of me using this 32 inch it's an LG 32 ud 59 if that means anything to you. I did try a Samsung 4k display. And the colors were off and it was just kind of blurry and I tried everything like it didn't like goof up the settings or do color profile like I went deep into it. And it at the end of the day, it just wasn't a good monitor. I returned it and I got this LG one. And it's not as good as the Dell one the the Dell ultrasharp ones are like 1500 bucks for the 32 inch version. And it's just too much. This one's like 400 bucks. And I'm going to say that a 32 inch 4k display is the developer monitor that you should get because it's so huge. You can have three panes of things open so you can have a browser you can have a code editor on two thirds of your monitor really easily or just two panes or two or three panes of code open at once. I just been loving this thing and a lot of people have been asking me like hey now that you're a couple months in Do you regret it at first I sat in front of this thing and I was like this is only gonna give me a tan. And I'm not gonna this this this is too big if you attend and I almost returned it right then and there because I thought like this is too big but now that I've gotten used to it, it doesn't hurt my neck or anything like that people have been saying that but I just think that it's it's probably the best monitor I've ever had and I still run the 4k 28 inch on its side which is a little bit big. I'm considering getting rid of that one just because I think that this is the only monitor you need. Especially if you've got a laptop open beside it you can throw your iTunes or Spotify on that. - -74 -00:48:50,579 --> 00:50:25,050 -Scott Tolinski: Yeah, I see I also have an LG and I really like my LG but I have the ultra wide and it's not 4k but it's very, very wide and very high resolution. And I really love it. I think LG makes a mean mean monitor. They make a really excellent monitor since you did your your sick pick as a LG monitor, I'll do my monitor as well. Because it's a different, it's a different experience than yours because yours is 4k, it's big. And all that stuff. Mine is very wide, ultra wide, you might say and it has a rounded screen it sort of curse around but it's really really really good for a lot of things that said again, it's a little bit different of an experience and and I don't use it as my main mommy I use that as my my supplemental monitor. But with my screen here, there's just so much room you could have a billion panes of code open. You could have a you know, your website, full view with the dev tools with your command line with everything. I mean, it's just so incredibly wide that you get access to a billion things I use a little tool. There's a billion of these I think mine's called Devi Devi is the the app allows you to place your windows wherever you want them. So I use something like that to align my stuff in different quadrants of my screen. I'm a big, big fan. So I'm, uh, LG has the worst name for all of their monitors, they need to like take a lesson from everything else and just give them normal names. So I don't know the name of my monitor in particular, I'll link it in the show notes. ultra wide LG monitor. People ask me a lot about it when they see it on Instagram. So again, if you're looking for a ultra wide version of this sort of thing, I highly recommend this one has been nothing but great for me. So - -75 -00:50:25,050 --> 00:50:29,760 -Wes Bos: that's my sick pick. Can you tell me what the what is the resolution that you run it at? - -76 -00:50:29,760 --> 00:50:30,450 -Scott Tolinski: Me, look, - -77 -00:50:30,450 --> 00:50:56,790 -Wes Bos: mine's running at 3008 by 1692. In getting over the 1400 pixel high Mark was why I didn't go with the ultra wide just because I needed the actual height. I found that when I was running it at 1400, I didn't have the height that I wanted. So by going this big, I did get the height that I wanted. Also, when I record my stuff, I don't record my whole screen as record a subset of the actual screen likewise. So - -78 -00:50:56,939 --> 00:51:14,820 -Scott Tolinski: yeah, I actually record on my main monitor and not my ultra wide. Okay. I know because I do that because I can just do the retina double Pixel THING. Yeah, it's automatically 4k. My ultra wide runs at 3440 by 1440. Ah, yeah. So - -79 -00:51:14,820 --> 00:51:22,680 -Wes Bos: yours is much wider for 400 pixels wider. But about 2200 last night. Yeah. - -80 -00:51:22,709 --> 00:51:45,720 -Scott Tolinski: So it's not exactly the most dense screen. But my God, the amount of stuff you can fit on here is great. And if you play any video games, it's awesome. Like I play like a driving game like a race like Forza for my computer. And yeah, the screen is just so wide that it feels like your peripheral vision is taken account because it's like sort of wrapped around you almost. It's awesome. - -81 -00:51:45,899 --> 00:52:08,430 -Wes Bos: That's sweet. I still do want to try one of those ultra wise I'm holding out for them to release a 4k Yeah, ultra wide, which they have right now. It's like $4,000 outrageous. Yeah, yeah. But like I'm probably in a year or two, we will have the 4k ultra wide. And at that point, I will probably make the switch. Because that that width is amazing. Having that much in the fact that it curves around you. I like it. - -82 -00:52:08,639 --> 00:53:20,160 -Scott Tolinski: I like it. Cool. So shameless plugs, I have a new course coming out on react hooks that came out at the end of when is this episode releasing here, this episode's releasing on the 27th. So this episode will be out on the 28th. So if you're listening to this, this is be out tomorrow. And it's called react hooks for everyone, it's going to be a nice, easy introduction to react hooks. If they sort of confused you or you don't understand why everyone's talking about them, then this is the course for you the React hooks course, on the love tutorials is pretty darn cool. What we do is we teach you all of the basics, all of the basic hooks, then we get into refactoring some code, we get into writing some really useful hooks, we get into some libraries that are already using hooks and how to integrate with those libraries. And really just the the why you should be excited about this improvement to react. So that's coming out on the 28th of February. And you can get that by level up tutorials.com forward slash Pro, sign up for a year and save 25% there's going to be 12 new series out this year, and some really exciting stuff coming down the line. So check it out, level up tutorials, comm forward slash pro - -83 -00:53:20,399 --> 00:54:02,880 -Wes Bos: awesome, I'm gonna pick my own courses at Wes bos.com forward slash courses, I did sort of announce on Twitter the other day that my next course is going to be a JavaScript fundamentals course. I've been working hard on that for a couple months already. And I just finished the design of what the website and all the all the demos are going to look like. And at that point, when you finish the design, I'm not done all of the recording or anything like that. So don't get too excited yet. But when I do finish the design, it starts to feel very real, because you have something to visualize for it. So I'm really excited about that. If you want to learn anything else react ESX node and graph qL go to West boss comm forward slash courses and I can hook you up. - -84 -00:54:02,999 --> 00:54:23,490 -Scott Tolinski: Yeah. All right, cool. Well, thank you so much for tuning in to this week's episode of syntax. We're gonna catch you on Monday with an episode about authentication. So that should be a lot of fun. And the next after that I think is going to be a potluck. So really fun episodes coming up. I'm excited. Love it, love it. Love it. Anything else? Anything. - -85 -00:54:23,490 --> 00:54:24,150 -Wes Bos: That's it. - -86 -00:54:24,150 --> 00:54:25,170 -Scott Tolinski: Cool. All right, - -87 -00:54:25,170 --> 00:54:27,300 -Unknown: catch you later or later, please - -88 -00:54:29,430 --> 00:54:39,180 -Scott Tolinski: head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax123.srt b/transcripts/Syntax123.srt deleted file mode 100644 index 528be1ba2..000000000 --- a/transcripts/Syntax123.srt +++ /dev/null @@ -1,76 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah Kuda, bars and Scott Taylor. Totally at ski. - -2 -00:00:25,950 --> 00:02:06,660 -Scott Tolinski: Oh, welcome to syntax. In this episode, we're going to be talking about authentication, which is something that so many websites have. And in particular, we're going to be talking about how to use and when to use things like local storage, verse cookies versus sessions, verse tokens, and sort of dive into what all of that means, and maybe illuminate some of these things that you have to deal with when dealing with authentication. Now, this episode is sponsored by Log Rocket. Now, if you've been listening to syntax, you've probably heard us talk about Log Rocket before, Log Rocket is an amazing service to allow you to gain full visibility into your bugs. And when I say full visibility, oftentimes, we get like stack traces, and we get code outputs and error logs. And that feels like full visibility, but you haven't had full visibility until you've had full visibility. What I mean is, with Log Rocket, you get a session replay, which is a video showing you exactly what the user did. It gives you access to the network requests, it gives you access to your Redux store, it gives you access to any sort of console errors or logs or anything that's happening on your sight. So not only do you get the stack trace sort of stuff that you typically get, but you get the default on experience of what exactly happened. And let me tell you, there's nothing quite like this visibility. So check it out at Log rocket.com forward slash syntax and sign up there, and you will get 14 days for free. And it's only gonna take 14 days to have one bug pop up and check out this insane visibility. So check it out Log rocket.com forward slash syntax. So authentication, yeah, some introductions here. My name is Scott Delinski. I'm a developer from Denver, Colorado with me, as always is Wes Bos. Hello, hello. - -3 -00:02:06,660 --> 00:02:07,980 -Wes Bos: How you doing? Doing good. - -4 -00:02:07,980 --> 00:02:24,600 -Scott Tolinski: doing real good. I'm not sick this week. Even though I do have a lingering cough, it seems to not go away. So hopefully, I don't sound sick. And I apologize for last week's episode, where I was definitely sound a little under the weather here. But feeling good. So let's get into it. Where do you want to start here? - -5 -00:02:25,220 --> 00:07:30,060 -Wes Bos: Yeah, so we got this question via our potluck that says, authentication versus cookies versus sessions. And I like this because it's it's kind of a broken question where these things aren't necessarily versus you might be reading the title and being like, oh, local storage is not something like vs. cookies or tokens might not be vs sessions and things like that. So we thought we'd do a quick explainer episode breaking down sort of these two ideas that we have here. And hopefully you can walk away knowing exactly how they work. A lot of times, I think that you're going to be using a framework or something that has this stuff built in under the hood. So you might not necessarily know which one you're using. But then when it comes time to maybe like integrating something like Apollo into your application, you You do have to write a little bit of middleware that will sort of take the authentication along for the ride so that your requests actually are proof. So understanding and being in the headspace as to how these things work, I think is pretty important as a front end developer. Absolutely. So let's break it down into I like to break it down into two different questions here. So first one question is, what should we do to track our user? So it should we use JW t, which is JSON Web tokens. We've talked about jvt a lot in this podcast, you can go back to some of the previous episodes and listen to that. So we're not going to go super deep on on how all that works. But we will go into it a little bit. So how should we track our user JW t JSON Web tokens or sessions? And the second question we have here is how do we identify each user on request? Meaning that when you make a request to a server, does the server know about you already? Or do you have to send something along to authenticate yourself. And that's generally broken down into two popular ways in the browser is one is via storing a token in local storage. And then the second is either storing a session ID or that token as well in your cookie. And we'll talk about the benefits and downsides to it. So we'll start off with the first one that we have here, which is how should we track our users JW T or session. So let's just explain sort of how both of these JSON Web tokens and sessions work right now. So let's assume you are signing into a web application. Generally how that works is you take a username and a password and you post that data to an endpoint on your server with the username password that will come back to you with either a success or sign that broken assuming it was this access. What that will do is it will come back to you with a JSON web token. And that JSON web token is just a seemingly random token. Although if you were to decrypt a or not even decrypt, if you're just uncomfortable, The token, you can see that there's generally a user ID and you can store some information in there. Once you have that JW T is store that JPG somewhere. And that token can be stored generally, it's stored in local storage, it can also be stored in a cookie, we'll talk about that in a second. And then upon every single request, you must send along that token for the ride, as it is your sort of ticket to getting past into authenticated areas, the cookie based approach is somewhat similar, you generally log into a website, you ping a back end either via an AJAX request or just a regular POST requests with a form. And then what comes back from that is not a token, it's just a response that says it was successful, or unsuccessful. But the key here is that on the rebound of that, generally, we'll set a cookie that has a session ID in it, and that session, Id will identify you on the server, and then any other requests from there, we'll be able to have that cookie along for the ride. So so far, it makes sense. It makes sense. Yes. So token, what's the benefits and downsides to tokens versus sessions token based authentication is stateless tokens are probably the the newer version of the two sessions have been around forever. And token based authentication is stateless, meaning that you don't need to maintain a list of logged in users on the back end server. And that's really helpful because often people are deploying their website to many serverless functions, or they're deploying micro services to many different servers. And if that's the case, you don't have to maintain like a database of users that is shared between all of these things, which is great. They can be cross domain. Again, if you're if you're running services across many domain names, that can be helpful. You can store data in tokens, like a user ID or some of the user's preferences in a JW t token. And then finally, I think it's it's really easy to use on like non web sites, meaning if you have like a mobile app, they want to use with your graph qL API, there's no concept of like cookies in a lot of these sessions in a lot of these mobile apps. But you can just send a long string of text that is a JDBC token. Finally, the one downside to jadibooti is it's hard to expire them on a session based, you can just delete the session, and that user is just logged out. The only real way to log a user out with tokens is you have to maintain like a blacklist of people who will not be able to and then you have to add some filtering. Or you could just change your your algorithm for generating these tokens. And if that's the case, then everybody gets yanked out which - -6 -00:07:30,090 --> 00:07:45,450 -Scott Tolinski: Yeah, which sucks. Yeah, it's like a sort of a blanket solution to that just log everybody out. But again, I guess that could be useful in some particular situations. But most often times if you're trying to just ban or lock someone out, that's not going to be the best idea. - -7 -00:07:45,600 --> 00:09:33,840 -Wes Bos: No, no, not at all. So the flip side is using session based authentication. And generally, this is popular where server rendered applications, we talked about how they work sessions are stateful. So you generally need to maintain a list of session IDs. So this is probably if you've ever learned no jazz before, you've got sessions up and running. But then when you kill your server and start it up again, you're logged out and you go, huh, why did I get logged out. And it's because what was happening is, by default, a lot of these like passport jazz, they will just maintain a list of sessions in memory. And when you kill your app, all of that memory is cleaned up. So then you have to get like an adapter and store a list of all those sessions in your database. And then make sure that you remove them when the session is destroyed when somebody logs themselves out. Or if they're expired after a certain amount of time you have to run a cron job and clean them up a benefit to Sessions is that they're passive. And what that means is that once you are logged in, you have a cookie set in your browser and any other requests to that server will automatically the cookies come along for the ride for free. Whereas local storage needs to be actively pulled out pulled out of local storage and then put in so one huge benefit to using sessions and cookie based approach is that your first render can be the logged in view. So if you have a react application, and this is true on my advanced react and graph qL, we use JW T, but I put them in a cookie. And the reason we do that is so that when you go to the website for the first time after already being logged in, that token comes along for the ride, whereas sometimes you go to a website, and you get the logout view for a second and then it goes to flashes, and then you get the logged in view. That's because they loaded that first view. And then they realize that you had Oh, there's something here in local storage. And then they sent that over to the back end and came back and had to re render the login view that you - -8 -00:09:34,110 --> 00:10:09,650 -Scott Tolinski: know, it's funny because I just I mean I do similar. I don't have my token stored in a cookie for server side rendering. And so a lot of those things I just default to say, if you're logged in these particular things, just ignore them entirely for server side rendering. And that's only because I just to be honest, I haven't had the time to set up the auth or server side rendering component of my my stuff so I definitely feel that aspect of it. Were just certain components of my website aren't server side rendered, just because they require some sort of user thing. And I do a little bit of a pop here and there on some items. - -9 -00:10:09,750 --> 00:14:24,450 -Wes Bos: Yeah, that we should be clear here is if you want to do server rendered JavaScript, when a user is authenticated, or user has specific UI for whoever they are, you cannot do that with local storage approach. Because low there's no way to send local storage to the server on every single request, you have to you have to use JavaScript to send it across. It doesn't just happen for free, like it doesn't cookies, right. So that's not a huge deal for a lot of people. Because once you load the app once, then you have everything there. But for other people it is. So that's the first little bit which is how do we track the user? Do we use JSON Web tokens? Or do we use sessions? The second question is, how do we identify each user on each request, we kind of already went through this as well, local storage or cookies. So with local storage, you need to grab the token and send it along for every request with with cookies that is sent along on every single, every single request. So cookies is much more implicit, where it just comes along for free tokens are more explicit, although in almost all use cases, you're going to have something like Apollo middleware, or you can set up a special fetch request. And as part of that request, it will just automatically grab it from local storage for you. So it's not like something you have to code into every single request for you. Last thing I want to note here is just security issues. There's lots of debate on either side, should you use tokens, or should you use sessions, what's the better approach? So the security issue with a JSON Web tokens is that is x SS security issue, and that means is a cross site scripting, what that means is that when somebody else is able to run JavaScript on your domain, then you're in trouble. Because let's say you had like somebody from bad website.com. And they were able to somehow run some JavaScript on West boss calm, as soon as they're able to run JavaScript on West boss calm, whether that's a rogue Chrome extension, or whether that's a just an image that was loaded inappropriately, or in most cases, when people don't sanitize their inputs, then that person is able to reach into your local storage, because it's all client side, read that token. And now they have access token. And they can start running requests from from wherever they want. So the way that you sort of combat that is making sure that you don't let excess happen. Some some of the sanitization happens for free in react and Angular, if you've ever come across the method in in react called dangerously set inner HTML. That's, that's why it's called dangerously set inner HTML, because you generally shouldn't put HTML into an element and then parse it into the DOM, unless you are first running it through like purify Dom or something like that, unless you're actually first sanitizing it. And the next one with Sessions is excess RF cross site request forgery. And there's a whole bunch of YouTube videos that will explain this, there's a general you need a lot of like visuals and graphics to understand how this works. But generally, the way that it works is that someone could actually get access to that session ID, or someone could, someone can run a request from from their website onto your website. And if you don't have things in place, then they can actually trigger malicious actions from a separate domain name. So Case in point, if I were to, like if Scott has like an endpoint on level up tutorials that says, pay West $1,000. And Scott was logged in to the system and he were to visit my website, because he's logged in and has the the cookie for level up tutorials in his browser, I could trigger a request to his own domain from my domain, and then that would trigger the sending all of the money to me, right. And that's sort of like, that sucks, because your hands are sort of tied behind your back. And that means that other websites can trigger requests on your website. And the way around, that is this thing called CSRF, which is these unique tokens, you'll generally find them in hidden inputs on a form field. So there's downsides to both you should be aware of what both of the both of them are. I'm by no means a security expert here, but it's probably worth going and watching a couple of YouTube videos as to how both of these things work just to be aware of potential issues if you're rolling your own system like that. - -10 -00:14:25,650 --> 00:14:28,080 -Unknown: So yeah, well, yeah, I'm - -11 -00:14:28,080 --> 00:14:31,710 -Scott Tolinski: gonna give you a round of applause here. That was an excellent little explainer. - -12 -00:14:31,890 --> 00:15:07,680 -Wes Bos: Cool. So hopefully, that that clears a few things up. Now, what should you use, it really doesn't matter too much. But generally, if you are building a react application with your own custom back end, or even if you're using some sort of other back end, a lot of these things are using JSON Web tokens. If you have a more traditional back end, you probably will be using session. So my learn node course uses sessions, and then my advanced react and graph qL uses JSON Web tokens just to show how both of them work. Although both courses use cookies instead of putting it into local storage, and the reason is because I want the server rendered off on both of them. - -13 -00:15:07,890 --> 00:15:29,370 -Scott Tolinski: Mm hmm. Cool. And all of this stuff scares you. There's always things like passport j s auth. Zero, what other auth. I know Netlify has their identity auth platform. So if all of this stuff scares you, there's definitely other ways to go about this. And using services that might take some of the some of the guesswork out of it for you. - -14 -00:15:29,610 --> 00:15:57,030 -Wes Bos: Yeah, yeah, you look for something like auth zero, they will run the JavaScript side for you, as well as they have packages for your server side. And they will take care of setting it all and all the cross domain stuff. Because it's it's pretty tricky stuff. I think that's where jazz won't do any of that for you passport, j S will just actually generate the tokens or generate the sessions for you. And then you still need to set them into into a cookie or store them in local storage on every single request. - -15 -00:15:57,090 --> 00:16:06,870 -Scott Tolinski: Yeah, there's certainly various levels of assistance, right? Between like, even services that will do it all for you to ones that just help you out here and there. So cool. - -16 -00:16:07,080 --> 00:16:16,230 -Wes Bos: Yeah. So if you've got your own specific way of handling authentication or your own service that you prefer, make sure you tweet us at syntax FM. Anything else to add here, Scott? - -17 -00:16:16,620 --> 00:16:19,050 -Scott Tolinski: I got nothing. No, that was a very informative West. - -18 -00:16:20,220 --> 00:16:25,470 -Wes Bos: Awesome, go. Thanks for tuning in. We will catch you on Wednesday. Cool, please. - -19 -00:16:27,690 --> 00:16:37,470 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax124.srt b/transcripts/Syntax124.srt deleted file mode 100644 index 72bbaf53a..000000000 --- a/transcripts/Syntax124.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:01,319 --> 00:00:21,990 -Unknown: You're listening to syntax podcast with a tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. Welcome to syntax. This is the web development podcast with the tastiest web development treats with me as always is Mr. szalinski. How you doing Mr. szalinski? Doing good. How you doing, Mr. Boss? - -2 -00:00:23,070 --> 00:05:00,000 -I'm doing good. I'm doing good excited to get into this potluck. If you haven't listened to a potluck before. It's where we answer your listener submitted questions. So if you've got a question you'd like us to answer on a show a lot of these questions today are actually just follow ups from previous episodes. It's just kind of cool. You can submit your own@syntax.fm. And there's a button in the top right hand corner it says ask a potluck question you submitted in there, we find those really helpful because it also gives us ideas for just entire shows as well. Sometimes the questions are so good, we've put them into an entire episode. Yeah. So thank you. For anyone who submitted a question we are like, if your question isn't answered, I should state that we are consistently overwhelmed with the amount of questions that come in. So there's a lot of questions to get here. So if we have not answered yours, I'm very sorry. But there is a lot. So we picked some of the ones that we think are going to be the most useful for you today. You want to get it kicked off? Yes. Oh, first, we should say today we're sponsored by Sentry, which is going to do all of your bugs and error tracking, as well as Freshbooks, which is going to do all of your invoice tracking and customer payments and whatnot. We'll talk about them both partway through the episode. First question we have here is from Mr. or Mrs. Anonymous, what advice would you give somebody wanting to get involved in the open source community coming from closed source full time work? How do you make time to code on the side with the balance of life? And family? This is a good question. Because I think we get this question a lot from people where they're like I would love to, but I'd simply do not have any time left at the end of the day. And I feel like it would probably be worth it for me in some way or another. We'll talk about that too. Get involved in that open source. So what do you think Scott? Yeah, so for me, we've talked about this sometimes on the show before, for me, I think that you should not spend a lot of time away from your family to work on open source. And now I think some open source, people have the ability to take that extra time. For instance, when my wife was getting her PhD, I had a lot of downtime, and I had a lot of time to work on projects, right. But if if your family sort of waiting there for you to hang out with them, then hang out with your family do family stuff, in my opinion, it's probably better to negotiate some time at your work at your nine to five to work on open source stuff, you can market it as personal development time, time to become a better developer. And honestly, your employer should be happy that you're looking to become a better developer. Now, honestly, I'm realistic here. And I don't believe that every employer is just going to be like, sure, take some time and do some open source work. But I think it's at least worth having that dialogue to say, Hey, I would really like to be more involved in the open source community, it's going to make my work better, it's going to make the company's work better. And it would be nice if I could have a certain amount of time a week to do this open source work while I'm at work, because honestly, it open source isn't worth taking time away from your family. I think the question is, I think you should ask yourself is like why do you want to get involved in open source is it because you have these great ideas and you would like to you have a library or some examples or something that you want to just get out there and out to the open because you think it will help one developers in general or is because you're trying to just sort of boost up your own resume, because many potential further jobs. I think that it's important to note that most developers probably don't do open source work, it may seem like everybody's out there, creating these amazing libraries and whatnot. But I would say it's probably in a minority of actual web developers out there, a lot of developers don't necessarily have time, or they're they're working at a company where like legal just will not let them take part of their businesses code base and put it online for free for the rest of the world to have. So like Scott said, I think it's probably worth having that conversation with your employer saying like, this is what good developers do. I think we can make our product better by taking this little utility that we built for our website, extracting out into his own library, and then putting it up online, I think it's going to help our codebase in general, as well as it's going to help the greater good of the web sort of move forward. So it's worth doing that and seeing if you have it, if not, I think if even if you don't have necessarily time for building something, putting it out, even just doing things like blogging, posting side projects, everybody has to have a personal website. So you could throw that up on GitHub. I think that's a sort of a good start where you could cut your teeth in there. Yeah, I mean, there's there's a lot of stuff here because, honestly, you could spend a good amount of time open source working at any point right in work or out of work. It's funny because we live in sort of a fantasy world where we don't have to deal with legal jargon. - -3 -00:05:00,359 --> 00:09:40,170 -We don't have to deal with that stuff. I remember when I worked at a job that had to deal with legal departments, we had to get every single library that we used in the project approved by legal, we had to if we wanted to use a library in our application, we had to send it to legal, they had to check out the license and make sure everything was okay for the project that we're using. And I don't know that it's funny because the world that we live in is so far removed from how that works is, I know a lot of developers do struggle with that sort of aspect of thing. So it's a it's definitely an interesting conversation about what stuff you can open source and what stuff your company's even going to allow you to do there. Okay. So the next question here is from Andrew McKeever. And the question is, in better living through side projects, which was one of our past episodes, for those of you who are first listening, go check it out. You mentioned making your life easier as motivation. My question is, how do you get your data from sites that have may not have an API, web scraping any tools that you would recommend my wife and I are currently searching for a new apartment, I'd like to be able to pull all the new apartments from these into one nice app, but I'm stuck on how to get all of the data. So we have a show on some of this stuff. And I think it would be really helpful you know, check out if you haven't already Show Episode Number 60, which is the undocumented web web scraping private API's proxies, alternative solutions. So the alternative solutions and web scraping bit are probably going to be your your your best friends here. And there's a lot of web scrapers online based on your level of commitment or involvement to the project. There's some that do a lot of stuff for you. Yeah, I'll just talk real quick about how I did it. In this case, you can go back to the undocumented web example to hear sort of all of the possible options but so I scraped Kijiji, and I scraped Facebook. And how I did these is first for Kijiji they have they don't have an API, but they do have a RSS feed that is instant. So previously, in the past, I had scraped Kijiji, which is online marketplace, and they their RSS feeds were only updated every hour or so, which wasn't enough for me. So in that case, I just scraped the page. And then and then how it works is like you almost just use like document query selector. You select everything with a class of like item or like you have to do a little bit of investigative work to figure out like what is each one of these wrapped in whether it's a class or it's a descendant selector, or each of them have like you, maybe you find the h2 and then you find the parent of that h2. So you got you got, I gotta get clever with it. And then sometimes they change their markup, and your whole scraper will break I've built a in this is like six or seven years ago, but we built a daily deal scraper, and we broke, we just wrote these profiles, that would be really resilient. And then when they broke, we just had to go in quickly and update the profile that would adjust to the scraper. So that's, that's one way. The RSS feed is another way, what I did there is i just i parse the RSS feed into JSON, which is there's lots of node modules out there that will convert XML to JSON. And that was pretty simple. For the Facebook marketplace, they use graph QL. And at first, I was frustrated because they don't have an API for the marketplace at all. Facebook does have API's for almost everything else, but not for the marketplace. So in that case, I opened up a, I think the one of the best things you can do first is open up an incognito tab and try to take your whole like logged in authentic ation out of it. Because you could you could accidentally be copying some tokens that are sensitive, and putting them up on GitHub. So I opened it up. And luckily, you can access the marketplace without being logged in. So that was one good one. And then what I did is I just did little searches. And then I watched the Network tab for what was happening. And I sort of like reverse engineer the graph qL API, I still haven't figured out pagination on it. Although you can see the pagination working as you scroll, I could not figure out for the life of me how to actually pass like I was passing cursors, which in graph QL. If you have a cursor, what that means that like items one to 10, and then you can pass a cursor for, it'll tell you what the cursor for number 11 to 12 is instead of saying give me page two, you just say gave me 10 items after this cursor after item 11. So that's how it worked there. Which is pretty interesting. But you kind of got to get a little bit sneaky with it. And even then you sometimes will get blocked, like I was running it too frequently on my own machine. And then Facebook just blocked my IP address from accessing it. So I had to turn it back. And then when I put it on my server, my server had a fresh IP address. And I think I'm running at once every 10 minutes for Facebook, and that that hasn't been an issue for running for about a month now. - -4 -00:09:41,220 --> 00:10:00,000 -It's funny because the Network tab I think is sort of underrated in terms of how good it is, or really understanding the websites and how they're working. I mean, you can see everything happened in the Network tab. You see every single request that's made and I use the Network tab so much when I'm investigating how a website's working, what it's doing, where it's - -5 -00:10:00,000 --> 00:11:12,570 -Loading assets how it's loading assets from. I mean, particularly I, I'm in the business of video streaming here, and I'm interested in moving my video streamer, right. So I'm checking out other websites, and I'm looking at their network tabs, and I'm seeing how they're streaming their videos, what their, what their strategies are, and stuff like that. I think it's just a really interesting place to dive into websites. It's underrated in terms of just how much you can glean from a website from the Network tab. Yeah, I particularly like the right click Copy as fetch. in Chrome Dev Tools, you used to be able to just copy as as curl and in a curl as you can on the command line. And then you had to convert those equivalents. But if you copy as fetch, it will copy over all the headers that are needed. And generally, the way it works is that you get like 300 headers that were sent or like 20 headers, and then I slowly just, I make sure it works in a fetch request. And then I slowly go delete header by header by header. And then as soon as it breaks, I know that header is actually did it almost always, there's only like two or three different headers that are actually necessary. And the rest are just like overhead and tracking and things that aren't necessary for the request to go through. This is like CSI, web dev, CSI. - -6 -00:11:14,220 --> 00:11:31,830 -I think it'd be fun to do a video on like, one point, maybe just throw on my screen recorder and be like, Look, I'm trying to figure out how this thing works. They don't have a public API, but I'm going to proxy it myself. So maybe next time that I stumble upon that, I'll just throw my screen recorder on show my process for doing that. Yeah, that's very 2019 I'd be watching. - -7 -00:11:32,910 --> 00:13:28,320 -Awesome. Alright. Next question we have here is from Dom from Munich, Germany. The question is, do you think react aims towards a world with functional components only, or will class based components always play a role, by the way, keep great show Keep it up. So I think this has to do with react hooks, where previously before react hooks, we had react components were like they were class based where you had class, my component extends react component, you have a render in there. And you can add all these lifecycle methods as well as add your own methods to that class, then we had functional components, where we're simply just takes in props, returns JSX. Now that we have hooks, you can have that secondary type. But you can also introduce things like state and lifecycle methods and all that good stuff that comes along with react hooks. And now people are asking, does that mean classes in react are dead? Or do you think about that, Scott? You know, I don't think they're dead it That said, it's funny. I want to preface this i i don't think they're dead by any means. Because folks were just released a couple of weeks ago, and giving functional components or function based components that much more functionality, but to be honest, since hooks have been released, and even when hooks are an alpha, still, I have not been writing class components. I've been only writing function based components. I've been using hooks instead of lifecycle methods and state. Yeah, I don't know. I think it's too early to tell. But I personally have not been using classes, and I haven't necessarily found a huge need to be using them. So maybe they are dead? I don't know. Yeah, I don't want to be the person that says classes are dead and react, you know, I don't want to be that person. The official response from react is from the Facebook mothership is No, they're not dead. They are here to stay. This is just an additional syntax. And then sort of what you see from our industry, which is people who love to switch things up every six minutes is that you are talking about me and I feel personally attacked. - -8 -00:13:30,330 --> 00:14:47,550 -I'm subtweeting you right now. But people just say like, Okay, so this is a new way to do it. Therefore, the old way is terrible and undead, and why would it even be that way? So I don't know, I think that we will see most people writing stuff in the future with hooks. But that said, you still if you're learning react at this point, I think you still need to learn both. Because if you go into any sort of code base that was written that was not written in the last week, it's going to be entirely written in classes and just regular functional components. So Oh, yeah. Yeah. No, I still advocate for learning classes. Absolutely. Yeah. Yeah, absolutely. Those aren't going to go away anytime soon. Maybe we'll follow this up in like six months or so and see where we're at. right with that? Yeah, definitely. I'm interested in this very much. I mean, I just recorded my hooks course. And I've been using hooks and I've been using function based components. And I'm totally sold. But again, just like the React team is recommending I believe it or not, I've not been rewriting my entire app to use hooks. Yeah, I've not been refactoring everything. I've just new components here and there to use hooks. I'm excited that we get to add into the title of this podcast is our classes dead? Yes, exactly. That is the click Beatty title ever. - -9 -00:14:49,140 --> 00:15:00,000 -That's great. One of the things we don't want to be dead is your website. And one of the ways you can find out if your website is dead or not, is by using some error tracking tools and one of our favorite error tracking tools. - -10 -00:15:00,030 --> 00:16:22,440 -Over here at syntax is century. Now Wes and I both use century This was one of those sponsors that came to us. And we were immediately like, yes, we would love to talk about your tool because we both love, love, love century century is a, it's an error tracking tool that keeps track of all of your bugs. And it puts them into a nice final interface that allows you to track whether or not they're completed allows you to understand see some visibility, see what browser who look kind of user did this, what were they doing the error track, and you can send this error directly to GitHub to keep track of it in sight of GitHub issues as well century is one of those tools that you just want to try out you want to experiment with you want to use, you want to see how it improves your life, we definitely want you to check out century@century.io use the coupon code tasty treat and get two months for free. Seriously, put this code in your back end, put it in your front end, check your errors and find out about these errors before your users let you know that they're happening so you can fix them. Thank you so much for century for sponsoring this episode of syntax. Yeah, can I want to add one little thing to this? I'm just looking at my century as we're going through this right now. And there's one specific error that I have here that's only showing up on Firefox for iPad, is that even a thing? It's gotta be right. Is it is - -11 -00:16:23,610 --> 00:16:52,950 -this. So like, usually, like if you have something on the iPad, the errors are the same in Chrome and Safari because it's all the same engine. And the same with Firefox as well. But this is a little issue that's only happening on Firefox for iPad. And I think that's such an interesting little piece of information. It's happening to quite a few people, I can see that 39 different people have had this specific error. And I'm gonna have to take a look at that as a new one that just popped up for me. Nice, bizarre. - -12 -00:16:54,330 --> 00:19:41,130 -I love buying through century it's, it's addicting. To me, it's very addicting. And this is outside of any sort of ad read. I just like go through it. And I like this book is occurring frequently. I need to take care of this right now. So I'm a huge fan. Cool. So this next one was really, really nice little message here. So somebody really had a nice message from our home automation episode that we just did. If you are interested in home automation, go check that one out. They said just feedback on the recent Smart Home pod cast. I really enjoyed it. I have about 48 Hue lights throughout my home. Wow. And use If This Then That applet on my ring doorbell so when someone rings, the door, all of the lights in the house blink so I can see when an Amazon package arrives or someone is at the front door etc while I'm working. wearing my headphones. He mentioned his Bose QC three five. I one ones those noise cancelling headphones. I'm getting qc 35 version two they have like Amazon Alexa or Oh, yeah. on them. Yeah, I have seen those. Yes, that's nice. And of course, listen to your podcast. Thank you. I'm a huge fan of the podcast and federalist number I really commend. But you guys are great. Thank you. Thank you again. And thanks for all the stickers. Well, here's the if this and that link, we'll put that link in the description of this video. Wow, you have 48 q bulbs. I have a question for you. How do you get people and by people, I mean, my lovely wife to stop turning off the light switches when you use the hue bulbs. Because when you turn off the light switch the hue bulbs don't work. That's a huge concern of mine. I'm like thinking about getting smart switches just to prevent that from happening. So yeah, how you do that? That's awesome. That's that's really cool usage of this stuff. Yeah, I was like we hear from a lot of people what another thing that a lot of people told us is that I was concerned about the hub not reaching across the entire house. And a lot of people told me no, the bulbs work as a mesh network. So as long as one ball is close enough to the hub, then they will create a mesh network throughout your entire house. And they don't all have to be close to the hub which is awesome. I first of all, I think that this flickering all of your lights is absolutely ridiculous. The best way possible. And second, the other if you turn off the switch then the ball doesn't have power to actually run itself and then that's like one reason why I don't like it is because then you can't just use a regular light switch to turn these things on and off. That's a problem that I have with my my ring floodlight cam. If someone turns off the switch, then the camera powers down because there's no power to the actual the the unit on the side of the garage. So the way that ring remedies that is they give you a sticker that says do not turn off your light switch. - -13 -00:19:42,570 --> 00:19:59,550 -But I think that the the best way to probably remedy that, as Scott said is just to like wire that thing always on and then just have some sort of switch. You can put these switches anywhere that just allow you to flick it on and off and it's just a it sends a signal not it doesn't actually cut the power to the actual switch. You know, it's funny - -14 -00:20:00,000 --> 00:20:44,940 -Episode that we recorded I've been I when you mentioned routines and Google Home. I did I, I admit, I did not know that routines were a thing. And Google Home is pretty new. Yeah, I've always done my routines in the apps themselves. So I had a Philips Hue routines, I had smart things, routines, I had routines built in there, but I didn't know that Google homes routines are so dang awesome. Last night, I spent a whole bunch of time I made a routine. That's my like, get ready for the day routine, where it turns on a desk. It sets the temperature correctly in our house. And it plays a 90s rap music playlist on my Google homes so that when I'm getting ready, I can listen to some jagged edge or something. - -15 -00:20:47,700 --> 00:24:59,820 -That's great. I like that a lot. So thanks a lot. I know that wasn't a question. But thanks for the feedback. And I was like hearing what other people have their setup. We use Twitter for this a lot as well getting people's feedback. If you aren't on Twitter, maybe you you should. We're at syntax FM, a lot of the after show banter and a lot of like really helpful follow up comments from people get retweeted on the Twitter. So if you aren't following it's at syntax FM on Twitter. All right. Next question we have here is from Shay mylol. This is not a question I just want to say love from Israel. I love your podcast so much. You to speak so loud and clear. Thank you a about interesting stuff. So I thought that was cool. But just keep that in there. Anyways, the next question from anonymous, nobody giving us their names today. What do you do in the event that your client sends a thank you card along with cash that is much lower than what you were preparing to invoice from? Would you remove it from the invoice ask them what they prefer etc? I'm stuck in an awkward situation that doesn't cover it doesn't even cover the hosting costs. Thank you. So I thought this question was ridiculous. Don't use your card with cash inside of it. What would you do? If someone a client who you are going to build sends you cash in a card? Yeah, I would. Okay, first, how much lower rate is the invoice for 10? grand and they sent you a couple hundred bucks? That would be that's what it sounds like? It sounds it says it doesn't cover the hosting. Yeah, very disturbing. If it's okay, so if it's like 50% of the invoice or 20% of the invoice, what I would do is send a second invoice with the remaining amount owed, make it obvious, if it's obvious that they aren't going to pay you in that the disparity is so huge, you need to have a tough conversation with this client, I would start this conversation in a non judgmental non assuming way. And I would say hey, I noticed the invoice wasn't paid in full. Would you like to break up the remaining payments into smaller chunks? Would you like to put it on a schedule? How do you want to finish paying off this invoice? I don't assume that they're immediately not going to pay you. It sounds fishy. It sounds like maybe that's what they're doing. But again, I would take approach to word sort of a little bit lighter. Make sure you have that expectation. nice and clear. Our next episode coming on Monday is about communication. So maybe you can learn a little bit about some of the communications suggestions that we have in that episode. But yeah, this one's tough, because again, I wouldn't immediately jump to they're trying to screw you, you know, if you pay me kind of situation, but I would make it very clear that you expect it to be paid in full. Yeah. So something fishy is going on here. I think the the key in this question was that it's much lower than the than what you were preparing to invoice them. So it sounds like he hasn't even sent the invoice yet. And they just sent something ashover. So I think communication is key. Do they even know what the invoice is for? Did you even communicate to them? This is going to be this much or did it was a kind of wishy washy because they might think that this is what it's worth, and they might not it might be a gift. And a lot of lots of cultures like to give just cash gifts. That's that's something that maybe they are appreciative of what you're doing. And they're just giving a little bit extra because they appreciate the hard work they put in. So there's so many more questions that come up from this specific question. But I think that it's important that you just make everything as clear as day and just communicate with the client as to what's going on. And these things can generally be avoided and solved quickly without trying to play like guess what's going on with them. Yeah, yeah, interesting one and I think some of the details here are very important some of the details that we we didn't get in the question, but again, tread lightly. Make it clear that you expect to be paid again if you haven't said that invoice yet then I wouldn't necessarily assume anything but just yeah, communicate. So this next one is from Zubair Thank you Zubair for pronouncing or giving us a pronunciation that was zu hyphen, bear. Like you're seeing a zoo and a bear in a zoo. And I really appreciate that because those are two words that I can say, kind of like the bear series we had a couple of months ago and just like the bear seers, just like that. So thank you Zubair. I've heard a lot of good things about next JS what - -16 -00:25:00,000 --> 00:28:34,950 -exactly is it? How does it compare to just using create react app? Is it worth to migrate a small side project that I have to next dot j? s? Yeah, I think that we should probably answer this one assuming that they had listened to our last episode on what is next Jess versus Gatsby, because we went into that you can go in that episode was really well received one of our most popular episodes yet. But one thing we didn't cover in that episode is like, what's the difference between Gatsby index versus something like create react app? You don't take a stab at that? Yeah, I mean, the big difference is that create react app is really just a platform for getting started getting up and running with react, it builds your application. And it can be really great. If you just want a there's two parts of the question here. It's what's the difference? And should I move my app. So the difference is really that next j. s is a platform that gives you some additional things in web developer in web development, for instance, it gives you server side rendering, it gives you an opinionated routing system, and it gives you data fetching, or it gives you at least a lifecycle method for doing data fetching it. Basically, it makes some decisions for you to make your life easier. in some regard, if you want to do server side rendering, I don't necessarily recommend taking your crate, React app, and then messing with your web, pack config and writing all the SSR stuff. Because I've done it, it's not a ton of fun. So should you migrate the project, I don't know, I wouldn't migrate the project. If it's a side project. SSR is great for a lot of things. But if you're not looking to have this be like a serious, serious thing, then I don't necessarily see any reason to, not to mention, if you already have the side project up and running with create react app, chances are you already have a routing system in place, you already have some of your data stuff in place. So you would have to be rewriting a little bit of code and maybe restructuring your app a bit just so it can work with next j s and then out of it, you get additional next JS features. But do you need those features for the side project? It's a great thing. It's a great platform for building sites on but I don't necessarily think I would migrate something that is just a side project to it for no reason. Yeah, I think the main difference for me with create react app. And next is, if you want to get up and running quickly create react app is really good. So the idea behind create react app is that it just works right away when you create a new app. However, if you do want access to all the guts of your product, the Webpack config, the Babel config, your es lint settings, all of that stuff, if you want access to that you have to eject from that. And then it will give you access to all of the config files. And you can you can do it however you wish. I don't wish ejecting on anyone though, just because of the pain that is having to do your own Webpack configs. and whatnot. I'm a big believer that you can just use tools like you can just use create react app without having to eject in most cases, or you could just use next jass without having to do a custom config in most cases. Like Scott said, the router is a big one. Because next js is opinionated and comes with a built in router. Whereas if you just want to do it yourself if you want to get up and running or maybe even like if there's just like a little application on your website, like maybe just a part of your website is built in react react, you can do that with next j s but that might be a good use case for just doing that little piece in in create react app as well. So it's kind of like a weird area, but I wouldn't move it over if I were you. It's probably not necessary. Yeah. Next question we have here is from Tim Smith. I take tutorials all the time for web dev. I've taken many of both of your courses. Thank you they are great. Thank you everyone's buttering us up today. Is this feeling really good? - -17 -00:28:36,300 --> 00:30:00,000 -I am completely self taught and have zero comp site education whatsoever as well as your courses and other tutorials have taught me various languages libraries, they do not prepare me for real work, interviews or job no offense How do I make the jump from tutorials to real life? I think this is an awesome question because yeah, there's this like whole area of like hand holding which is taking tutorials and whatnot and just typing what we type and following along and then there's the real world where you get thrown into the pond and say swim swim back or build me build me this thing and there is a there's a little bit of like even as someone who who takes tutorials as someone who builds tutorials I'm not going to say like take this and you're going to be absolutely job right I get emails all the time from people saying like, if I take your course will I be hired for react and unfortunately no no you have to like actually put in some hard work yourself. So what do you think about this Scott? Yeah, this is one of those ones that I think is very important actually mentioned this a lot in my my content specifically because I think it's very important. It's something I've always done when doing tutorials. If you are following a tutorial, whether it's video or post or whatever, do not follow that tutorial, one to one I mean, you can but maybe watch it again and don't follow it one to one. Usually what I try to do when I'm watching tutorials is I try to take the source material - -18 -00:30:00,000 --> 00:35:00,000 -They're working with aka, we're building a to do app, and I like to modify it slightly. Alright, what sort of like a to do app, okay, maybe a grocery list or maybe a resolutions app or something like that I take it and I do something slightly different than what they're doing. Reason being is, is that the moment that you stop following it and just just parroting out the code 141. Even if you're changing variable names from being something like to dues to recipes, even though it's like the exact same thing, kind of in the context of the application, even if you're changing those words, just ever so slightly, what it does is it makes you focus on what you're typing just a little bit more instead of just parroting out the code. So I really think that taking the source material, and veering away from it, and even trying to do some stuff that's maybe even a little creative. While you're following that tutorial. Hey, they're building a to do list app, that's just a simple one list checklist sort of thing. What about instead of a to do list app with that I can add maybe a To Do With a description below it and a date or something. So you're adding on to the content, making it a little bit more challenging to you. That way, when you follow along, you might hit some bugs. Now, this is a good approach for those of you who don't mind being in the weeds a little bit. And being in the weeds a little bit is one of those things that is going to come in so handy as you're growing. Because the time that you learn the best is typically the time when you hit a snag, right? When the tutorial isn't working, I get so many people that come and say, Hey, this is broken here. Here, I followed the tutorial Exactly. And the error message says clear as day, you know, recipe errors is not defined, well maybe, maybe read the error, the error says respires. Did you mean recipes? Oh, that's the answer. So you shouldn't have needed me to solve that issue for you. And you should take the time to read the bugs, get in the weeds feel the stress, not the stress, necessarily, but feel that sort of that pain point of trying to struggle through something a little bit, and you will learn and appreciate tutorials much more, I've always taken the strategy. I've always made them about something else than what they're actually about. And it's always paid off for me. Yeah, I agree. I don't necessarily recommend that for people who are just learning a new tech via one of my tutorials, because sometimes they go way off, and then they bring me their bucket of problems. And I have no idea where they're at. But I think once you've finished the application, hopefully your mind is swimming with ideas of Oh man, I can build something off of this, that is similar to the thing I was hoping to build, right? And and you just get lots of ideas. I see this all the time with my tutorials, even the JavaScript 30 where it's just tiny little things you do every day, people take the drum kit, or the speech recognition or or the video player. And then they apply that to something because that's how I learned my as soon as I like learn something new, my mind is racing with ideas of how I could apply it in, in possible different ways. And I think that's really where you should aim to be as a developer, who is going to be constantly learning. Yeah, that application is just so so important. And if you're tired of doing job applications, after job applications, and you want to get into freelancing, you should check out some of our freelance episodes. And you might actually realize that you need some accounting and bookkeeping services. So I think that's where you might want to head and check out one of our sponsors today, which is Freshbooks. Yes. Freshbooks is this small business accounting software that makes billing painless. So I was actually just looking back at our freelance episodes, and they are some of our most popular episodes in the last couple months, which surprises me there, because it's amazing how many web developers are freelancing, or they just want to make a little bit of extra side money, vacation money, beer, money, coffee, money, whatever it is. And if you are in any of those camps, you obviously need to keep track of all the money that's coming in all the money that's going out, especially when tax time rolls around, you shouldn't have to spend more time than it's worth, because I've even heard from a lot of my friends who were doing like a couple side projects, or they were freelancing. And they don't understand how taxes work, or they weren't making as much as they thought, and they're frustrated by all the work that goes into bookkeeping, and then they just quit. They're like, ah, screw it, I just want to develop websites. And me too. I don't want to have to do any of this stuff. So if you're in that boat, check out Freshbooks for all of your cloud accounting@freshbooks.com forward slash syntax. Make sure you use syntax in the How did you hear about a section you get a 30 day unrestricted free trial. Thanks so much to fresh books for sponsoring. Nice, thank you fresh books. The next one is from Braden go. Do you have exercises to warm up your brain before you start coding? I always find it a bit difficult to jump straight into a project. I would never start working out before warming up. I feel like that's also true about web development. I think this is a super interesting question. I don't necessarily do this in any regard, but I do warm up a little bit. My warmup increases. - -19 -00:35:00,000 --> 00:36:40,020 -adds a to do list like getting my to do list written, and maybe going over my GitHub issues, maybe communicating with my team, maybe answering emails, my warm up is definitely a little bit more administrative than it is technical. And maybe that's an interesting idea that you should maybe tackle an easy bugs here or there, maybe there's a nagging little CSS issue you can fix or something to get you really nice. And in the groove of things, I think this is a nice idea, I haven't done this, maybe I'm going to try to do an experiment of making the first code related task I do a day to be an easy one rather than a difficult one interesting idea. Yeah, what I've heard in the past is some companies, this is not totally related. But a lot of companies have, you must deploy something on your first day, or you must deploy something by the end of your first week. And that gives you that boost of feeling productive, and it makes you want to keep doing more. So they make sure that the first day of all their employees, they have some sort of bug, whether it's just like fixing a CSS issue on a button. And that gets you rolling, right? Yeah, I think that's really good. And I think like, Man, this would have been a good ad read, but maybe just go into your century and mark a whole bunch of things as easy fixes. And every morning, pick off one of those little easy fixes and do that and that'll sort of get you rolling and all your development tools will be set up and you just be in the right headspace for doing it. So I personally don't do this myself. But I do tend to look at my to do list and move to the top of the list. Some of those easy wins that are are going to get me rolling for the day. So I'd love to hear what you think, tweet us out syntax FM, if you do anything like this little mental warm up for the day before you get into coding, do some code yoga, whatever that may be. - -20 -00:36:41,940 --> 00:39:59,850 -Cool. So this next one is from RJ How do developers deal with depression and mental health? I thought this was an important question. I think the only answer to this is talk to a professional. And I don't just say this, because my wife is a clinical psychologist. She's an educational psychologist, but she's you know, she's a doctor of psychology nonetheless. So I have been around the sort of the space for a long time now. And I think it's extremely important to talk to a professional, they are very good, they will have the answers for you. And they will help you along with everything. When I I don't I don't guess I don't talk about this a ton. But when I got my concussion, which I have talked about on the show before, one of the things that did was that it sort of knocked loose a bunch of things, I had really bad post concussive symptoms for a long time, and some of those have never gone away. So like one of the post concussive things I had was depression. And part of that it was I was on antidepressants for a good amount of time. And then I went off of them. And, you know, working with Courtney, it was really nice to be able to check in with the actual psychologist and talk about things and develop a plan and work through it. And sure enough, you know, as things maybe got a little bit tougher, earlier, last year later, last year, I went back on a different antidepressant with the conversation with both my doctor and my psychologist, which is happens to be my wife. So I highly recommend talk to a professional, it's very important today you do there shouldn't be any said there's like a, I don't know why if there is a stigma, but like, they're there to help. They're awesome. They're just very interested in helping you along. And it's extremely important that you do so. Because life life can be a lot better. Once you have those systems and tools in place to help you along. Whether that is just a plan or medication or whatever, there needs to be some some plan in place or a system to help you. I think that's that's really true. I think sometimes our industry can be very much push harder. Listen at two acts, work the weekends, you know, like, just go go go. And if you're not feeling great, just push harder through the thing. But I also at the same time, our industry is really good about talking this sort of thing. So like Scott says, make sure you reach out if you do need some help to someone who can help you out. Yeah, yeah, absolutely. Cool. So to end this up, I think we want to get into some sick sick pics or the section of the show, where we talk about stuff that we think is totally sick. And this can be anything can be podcasts can be TV, it can be actual things can be books. Yeah, I have a sick pic. That is an app is for iOS and Android. I don't know if you've ever used the app mint before. In the past, I used mint and personal capital, personal capital is great. It's still what I used for maybe an overview of things. But this app is clarity and clarity, money. I think it's actually clarity. Money is the proper title for it. clarity. Money is not only a beautiful app, like if you download this app for nothing other than checking out some of their design or just look at it. It's gorgeous. The app is gorgeous, excellent work by the developers here. But this app really the whole point of it is less of like here's a here's a chart of account like here's all of your accounts and how much money you have. No this is more like Here's your money and - -21 -00:40:00,539 --> 00:44:11,310 -Here's the ways to set up a budget, here's where you're spending, here's your income, here's your your all your stuff. And they do it through very, very beautiful graphs charts shows you all of your spending in different categories. As far as budgeting tools go, this is better than mint or personal capital. As far as maybe like Chart of Accounts, I might use personal capital still for that rather than mint or anything. But in terms of budgeting apps, and seeing where your money is, clarity is awesome. It also does really cool things like allows you to cancel reoccurring payments through the app itself. So it will say like, Hey, we noticed that you subscribe to Netflix, here's $14 a month. Here's some other things you subscribe to Is there anyone you'd like to cancel and you can cancel it directly from the app. So it gives you a lot of visibility into your stuff. And it makes it all beautiful and easy to find. So clarity money, I'm a big fan of this app. Check it out. Awesome. We talked about these these cameras on the home automation, but I'm gonna properly sick pick it. This is the wise. Oh, yeah, I'm going to send you Oh, yeah. So I've got one of the pan and tilt ones. And then we've got one of the the cheaper ones which are stationary, you can just tilt it. And we switched out the the panning one to the just the stationary one in my daughter's room because we had like a baby monitor and the baby monitor started cutting out because my daughter rip the antenna off of it. And his baby monitors are like 100 bucks for video one. And they're so terrible. So we switched to just we just put one of these in the room. It's like 25 bucks, and we put one of them in the room. It comes with this little magnet that you put on the wall and then you just slap it up on the wall on the magnet, which is really cool. And we put it in the top right hand corner of her square room. And you can see the entire room without having to pan or tilt this entire thing. And I think the best part about it is that like she has a sound machine in this camera and a couple of things and they're all based on USB. So it just like got a USB splitter and they're all can be powered off of this one little USB splitter. You can run up the wall there's no need for like custom cords and power bricks and all this annoying stuff that often comes with the stuff that you put in kids rooms. And it's it sucks because the kid Molly's my daughter grabs it down all the time. So big fan of these wise cameras, there is no monthly fee to actually use them which is really cool. You can put a little SD card in and it will continually record it. I am just about to take our new pan one and attach it outside with this like third party weatherproof cover and I'm going to see if that will that will work or not because I think it one downside that is to the the ring ones is that they don't continuously record they only record on motion. And that's a little bit annoying because I would love to even just do a little what's it called, where you take a video every you take a snapshot every 10 second time lapse. Yeah, even just to take a time lapse of me like shoveling the driveway or something I thought would be really fun. To do. So I'm going to mount this rotatable one outside outside and see if it can hold up to the Canadian winters. Nice. Yeah, I wanna I want to hear about that. Cool. So any shameless plugs for you today? The shameless plugs are the section where we talk about the courses that we create. Wes and I are both content creators, we create web development tutorial series, and we sell them so Wes, any shameless plugs for you today, I am going to shamelessly plug my CSS Grid course at CSS grid.io. It's a totally free course just cracked 80,000 people have taken the course. Yeah. Which is amazing, not taken signed up in at least watched a couple of others making a five star review. They they slammed that five star review, but they slammed it. So check it out at CSS grid.io. I'm patiently awaiting two things. In order to update it. It's not out of date. But cool. Two cool things that are coming to CSS Grid are sub grid and the ability to animate grid. And those two things are you can get the animation in Firefox right now, but not subgrid in anyone. So probably in the next six months. Ah, I'm so excited. - -22 -00:44:12,510 --> 00:45:00,000 -Very excited. I love I've been waiting for this for a long time. So I'm very, very excited about it super duper, duper cool. It's like the that for me is like a bigger thing than subgrid is so really cool. I'm excited about that. Cool. So my shameless plug is going to be my react hooks for everyone course that is now available on level up tutorials comm forward slash store for purchase or if you become a level up a pro by subscribing, you will get access to that course along with 12 other courses that come out this year, and all of the 20 some premium courses that exists on level up tutorials right now. And let me tell you react hooks for everyone is a great place to learn not only about what react hooks are, how you can use them. we dive into some practical examples, we build - -23 -00:45:00,000 --> 00:45:22,920 -Some reusable hooks that help you understand a little bit better about all of the little subtleties in hooks, but also just in general how to use them in a practical way, so check it out, level up tutorials.com forward slash pro react hooks for everyone available now, and I got nothing else. Oh, do you have anything? That's it. Thanks for tuning in. We'll catch you on Monday. - -24 -00:45:25,860 --> 00:45:35,640 -Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax125.srt b/transcripts/Syntax125.srt deleted file mode 100644 index 7c4047149..000000000 --- a/transcripts/Syntax125.srt +++ /dev/null @@ -1,108 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. Totally at ski. - -2 -00:00:25,980 --> 00:00:45,360 -Scott Tolinski: Oh, welcome to syntax on this Monday, we are going to be talking all about communication, which is everybody's favorite topic, considering how well developers are known for their excellent communication skills. But the hint of sarcasm there, my name is Scott winsky. And with me, as always, is West boss. - -3 -00:00:45,540 --> 00:00:47,460 -Unknown: Hello, everybody. Hey, Wes. - -4 -00:00:47,640 --> 00:01:13,560 -Scott Tolinski: This is a tasty treat. So this is our Monday episode where we dive into a topic and give you a little quick tip or quick little burst of knowledge here on the specific situation again, today we're talking about communication. Now one of these things that can help with your communication around bugs and help your team understand what's going on. And what's going wrong in your application is today's sponsor. Now that sponsor is century had century.io. - -5 -00:01:13,760 --> 00:03:25,800 -Wes Bos: Yeah, so Sentry, we've talked about them a million times on this podcast they are is something you install on the front end and the back end of your website. And they will track all of your errors and exceptions. So just to give you an idea of what that looks like, I'm just looking at my dashboard right now for the React application that powers the viewer for my courses. And at a high level, I can see that I've got about six or seven different errors going on right now. Some of them I can tell are very minor, meaning that they have only happened two or three times, then it's probably not an issue, I can just ignore those safely ignore those or mark them as resolved and they will never show up again. But other things like I'm just looking at one of my issues right now I cannot read property top of undefined. So this is just a silly little issue that's come up with some scrolling logic I have in the viewer of my website. And just by taking a look at that, first, it's going to show me the actual error and the code where it happened. And the kind of cool thing about this is that even if you have you shipped minified code, you can see in a source map where the actual error is happening, in that I can see the browser the browser's name, what OS people are actually running, I additionally do some some deeper stuff. So I also track the users ID and the user's email in here. So that way I can reach out to the user or users if this is specifically happening to somebody, if you click, if you take a look at the actual issue, you'll see that this specific issue to me is that but a couple thousand times to 338 people. So it's not happened absolutely everybody but just a subset, I can click through to that and see out of those users who who's getting it the most. And sometimes it's just like, I don't know, it's happening to one person 0.5% of time, but having to another person 80% of the time, that one person is responsible for a large majority of these actual error. So I can go on and on about all of the different pieces of info. But if I just like think this is my command center for things that are going wrong on my website, I can get really quick insight as to where it's happening, what's happening, who's it's happening to what type of devices it's happening on. And then you actually the one thing century doesn't do is actually fix the bugs for me. So maybe they'll roll that out at some point someone to come write better code than I do. - -6 -00:03:26,190 --> 00:03:28,830 -Unknown: I thought when you click the resolve button, it just resolved. - -7 -00:03:30,450 --> 00:03:57,330 -Wes Bos: Pete great, it would be great. We've actually gone ahead and actually fixed your code for you. Thank you for that. Yeah, that'd be really cool. Anyways, thanks so much to century for sponsoring this episode. If you want to try it out on your own, make sure you go to century.io use the coupon code tasty treat, it's gonna get you two months for free. That also works for existing users. So if you've signed up for it at some point and didn't use that coupon code, you can still use it. So thanks so much to Sentry for sponsoring. - -8 -00:03:57,779 --> 00:04:49,980 -Scott Tolinski: Nice, cool. So let's get into communication skills. We're going to start with one Why are they important? communication skills can make or break a project. I mean, there besides being a good developer, good designer, good team, your communication skills can be directly responsible for a bad result in a project or anything like that. So they are extremely important, do something to constantly be striving to improve. And in my experience, I've had a lot of clients who have told me that their previous developer was bad. And then when you ask why was their developer bad? Well, I never heard from them. I messaged them, I called them it would they were hard to get ahold of. They didn't need deadlines, their communication skills were bad. Maybe their dev skills weren't bad at all. But they were seen as a bad developer simply just because their communication skills weren't good. - -9 -00:04:50,250 --> 00:05:25,880 -Wes Bos: Yeah, I think aside from actual coding skills, communication skills are up there with some of the top skills you can have as a developer, because if you don't know how to communicate both with your fellow developers, you can often come across as as some way you don't wish to be perceived by others as well as you can't ask good questions, you can't get good help. If you're talking to clients, they may not you might come off rough, you might come off terrible. If you're not communicating properly, they're gonna fire you, things like that. I think that that's just like, as important as developing schools are I think being able to communicate to your client to your fellow devs is just as important. - -10 -00:05:26,070 --> 00:06:59,670 -Scott Tolinski: Yeah, absolutely. And we all know that sometimes these project timelines are pushed back, because maybe someone's not talking about the troubles they're running into or the delays they're having. And if your problem your rear project, timelines get disrupted, then not only this project can be disrupted, but next project could be disrupted, because all of the sudden the whole team is off. There's just so many issues that can erupt from this. So let's talk about the important part, which is how do we improve our communication skills? Because we know obviously, that they they can't be a problem, right? Because they can sink your project. So how do we improve them? I think one of these things is that maybe if you're not inclined to be a good communicator, you need to have it be intentional, and you need to intentionally practice your communication skills. That's really the only way to improve anything is through intentional practice. Not only that, but through intentional practice, you and your team maybe can work together to set up systems to help make it easier, because honestly, if you if you don't have the self control and the willpower to, you know, just totally change everything and the way you you communicate, I think that the single most important thing you can do is have a system where every single person is on the same page, and everyone knows how to talk to each other, and when to talk to each other. And I think that's why things like agile got really, really popular because they were excellent ways for the team to meet communicate. - -11 -00:06:59,820 --> 00:07:51,270 -Wes Bos: Yeah, I think that's super important as well, having some sort of system and rules in place to how to actually communicate to someone because we can say all day long, make sure communication is important. But you sort of have to lead by example, and give your your employees and your fellow developers the tools that are needed to communicate properly. On the same process. There's there's systems but there's also rules as well as to here is how you should deliver some sort of feedback to someone some criticism, we have an entire episode, Episode 75 on feedback and criticism, you can listen to that as they get some tips as to how do you communicate feedback or bad news or something that someone will not necessarily like? Like, there's it's one thing to just like, keep the lines of communication open as to where you're at in the project. But it's another thing to be able to appropriately deliver stuff that could be perceived or taken in the wrong way. - -12 -00:07:51,539 --> 00:09:10,320 -Scott Tolinski: Absolutely. And sometimes I think over communicating can be annoying, right? People who are constantly like I'm doing this, I'm doing this, I'm sending lots of emails, I'm doing this, whatever. But at the end of the day, the person who's over communicating well, it may sometimes be a little annoying, it's typically very effective in terms of letting everybody know what was going on. And so I don't know if I would worry about that. I think the the big thing, setting up a system for your team to succeed, realizing that personally, as an individual, no one can read your mind. Nobody knows your thoughts about this project, or your thoughts about the timeline of how you're working. Or maybe you're concerned that the client isn't getting this information to you on time or the right way. So maybe it's important for you to really just express those things to your teammates, right? No one's going to be able to reach inside the cavities of your brain to say, oh, Scott's really a little bit concerned about the title of this project, or maybe his role in it, and how he's going to get it all done. So your managers just going to think everything is cruising along, like normal. And meanwhile, you're like, well, there's no way I'm gonna hit this. So you have to be very clear, you have to be very intentional over communicating necessarily isn't a problem. But again, your team needs to set up some sort of a system, stand up meetings, that sort of stuff. - -13 -00:09:10,590 --> 00:09:53,340 -Wes Bos: Next up, we have building good habits, like software development, you get better at software development, you also have to make it intentional to get better at communication with with whoever it is that you're trying to communicate. So if you find yourself like maybe I'm having trouble communicating, there's been a lot of like, I think the biggest one is just like someone tells you to do something, and you drop the ball and don't implement it properly. There's a communication lack there, whether that's a person talking to you, who didn't give you all the right info or whether if it's you who didn't ask the right questions, both sides sort of need to practice in doing that. So maybe think to yourself, okay, what questions Can I ask to squeeze the right information out of this person? - -14 -00:09:53,580 --> 00:11:01,740 -Scott Tolinski: Yeah, you want to make sure that you have these things in place and you want to like how do you build any habit right just by doing it. So I think that even having like a schedule, I'm going to check in with my client every Friday evening or every Friday thing, that would be the worst time to check in with a class, I'm gonna check in with that guy. And every Friday morning, I'm gonna shoot them an update. Regardless if they asked for it, I'm going to say, here's the latest, here's what you should look at, here's what you should not look at, here's the things, bla bla bla, here's the project, here's the situation, here's what I'm doing, here's what's gonna be happening next week, we're still on schedule, blah, blah, blah. So letting the client know and have those things, if you're working directly one on one with the client, if you're not saying that kind of thing to your manager, people aren't going to be upset, they're gonna be like, oh, they're Scotland, we know where he's at on this project again. So building these good habits, making systems and deciding to do this stuff on a schedule or at a particular time in a project, or maybe every single time you push to GitHub, having it automatically send a message to your boss via slack or something. I mean, there's just so many different ways that you could build these little systems and habits to improve how you talk to people and how much you talk to them. The tools - -15 -00:11:01,740 --> 00:11:09,630 -Wes Bos: that you use to communicate are also important. I know people's probably hate getting a text message with information about a client or something like that. - -16 -00:11:09,659 --> 00:11:10,500 -Scott Tolinski: Yes, no, thank you. - -17 -00:11:10,679 --> 00:11:20,070 -Wes Bos: It's all about what tools you use. So past things like email, and actually having like meetings and stand ups with people in person, like what are some of the tools that you use to communicate with people? - -18 -00:11:20,459 --> 00:13:05,040 -Scott Tolinski: Yeah, I, I personally only used a few we use slack. We have a private Slack channel for team members, we have individual slack conversations for individual conversations that need to happen about small projects that the whole team doesn't need to know about GitHub issues, assigning GitHub issues, talking through things, they're having pictures having whole system of tags, one of the things I like to do in my GitHub issues is we have a priority system, I took this from to do list, it's just p one through four. And so I'll give every single issue I create a p aka p two is or P one is like drop everything you're doing and do this. Now, p two is do this, when you have the time p3 is if you are looking for something do this P four is if you have absolutely nothing else to do do this. So having that sort of priority system to let your your devs know your other people know that this is the progress that this thing is making or this is the priority. I also used notion pretty heavily we talked about that in one of our previous episodes that we just did notion in particular for me has been very helpful for listing out bigger intentions, things that aren't small issues, right? Big intentions that the entire team can look at and talk about and say, Oh, we like this direction. We like this direction. These are the things that are priorities. This is this is sort of ideas that we're coming up with. This is the schedule, we have calendars and notion to have when when social media stuffs going out and all that sort of stuff. So for me, I personally use GitHub, I use Slack, I use notion. And then I don't use email a ton for my stuff, although typically clients like to communicate a ton via email. So obviously email is there for clients. But I know you have a nice little dual email app that I've maybe been thinking about getting it out of myself. - -19 -00:13:05,309 --> 00:13:11,670 -Wes Bos: Yeah, I personally use this thing called missive. This is more on the having an admin assistant side of things. But - -20 -00:13:11,699 --> 00:13:14,310 -Scott Tolinski: but that could be also team communication. That's your team. Yeah, - -21 -00:13:14,310 --> 00:14:40,380 -Wes Bos: I know that a lot of teams share an inbox and need to collaborate on emails that are going out to customers or to to clients and things like that. So that's probably a good one to look at as well. Being able to centralize discussion on a email is hard, because like, what do you do you you do move that to slack? And that gets lost? Or do you move that to like, it's not a GitHub issue, it's not about software. So that notion is awesome for that because they are not notion missive is awesome for that because they will allow you just to centralize the talking back and forth, it's kind of just like chat that's been weaved in, in and out of email threads. So as an email goes back and forth, you're able to chat with the people who you share the inbox with, in between the the sense of an email, so a big fan of that myself. For development, I use primarily GitHub issues, just as a place to dump all of it, I find that really helpful, because sometimes I'll just be thinking about a feature or problem, I want to solve six months down the line, but I'll just dump it into a GitHub issue. So we can come back to it a certain point and actually fix that thing. People use other lots of other tools out there to actually have to solve that around software that are a little bit more powerful than GitHub issues. But for me in the the amount of people that I work with GitHub issues is totally fine. And then finally, slack is what I use for real time. I don't love Slack, but it's kind of what everyone uses right now. For real time. Notice, - -22 -00:14:40,409 --> 00:15:28,650 -Scott Tolinski: there's so many good communication tools that we probably aren't using that big teams use, right. They're just so many things that aren't applicable to what we're doing that are applicable to big big teams and help big team communicate. So I if you are using tools to communicate with your team, I would love to hear what you're using and what works For your team and what doesn't work for your team, because again, all teams are all of various sizes. I have a small team West, you have a small team, we we want to hear about big teams, medium teams, how you will communicate what works best for you. What are your strategies, because again, this is really important. We'll retweet you out from the syntax Twitter over there. So check us out syntax FM, on Twitter, and hit us up with some of your great communication tips. This is an important thing that a lot of people don't spend enough time on. - -23 -00:15:28,830 --> 00:16:00,000 -Wes Bos: Yeah, I'm, I'm mostly interested in hearing if you are a developer manager, so I think what a lot of times people who are developers move up and then all sudden they have a bunch of developers underneath them. How do you balance the need to communicate with them with the letting them just work and actually get stuff done? And that's a fine balance that you need to strike. They're really curious to see. Like, any tips that you have for that tweet us at syntax FM? Yeah. All right. I think that's it for today. Anything else to add? - -24 -00:16:00,300 --> 00:16:03,360 -Scott Tolinski: I got nothing to talk to you people. Yeah, that's it. - -25 -00:16:04,320 --> 00:16:08,400 -Wes Bos: Cool. Thanks for tuning in and we'll catch you on Wednesday. Please - -26 -00:16:10,440 --> 00:16:14,070 -Unknown: head on over to syntax.fm for a full archive of all - -27 -00:16:14,070 --> 00:16:20,220 -of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax126.srt b/transcripts/Syntax126.srt deleted file mode 100644 index f55f0c570..000000000 --- a/transcripts/Syntax126.srt +++ /dev/null @@ -1,132 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,590 -Unknown: You're listening to syntax the mind cast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. - -2 -00:00:10,619 --> 00:01:04,140 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development tricks. Today we're gonna be talking all about the ups and downs of school boot camp self learning, part time learning with a mentor, what is the best way? Or what are the the pros and cons to learning in different ways? I know there's a lot of talk where people say like, you don't need a comp side degree or should you go to school for this versus like, is a boot camp worth all that money? It seems like a lot of money and to spend in such a short amount of time, are you actually going to get a job from that sort of thing. So we actually have experience in I think almost all of these situations, I think we're pretty well we're pretty well placed to talk about this. And I've also talked to a lot of people that actually work in the industry, and they've all come up in different ways. So it's gonna be an interesting topic with me. Today's is a guest, Scott Tolinksi Gate now. The co host of this podcast How you doing? Scott? - -3 -00:01:04,230 --> 00:01:10,980 -Unknown: I'm doing good. I'm doing real good. Ready to go? You know, it's it's early March. I'm 33. I'm feeling 33 Yeah, - -4 -00:01:11,250 --> 00:01:12,150 -Wes Bos: happy birthday. - -5 -00:01:12,210 --> 00:01:12,990 -Unknown: Hey, thank you. - -6 -00:01:12,990 --> 00:01:14,130 -I'm ready to go, man. - -7 -00:01:14,400 --> 00:03:25,560 -Wes Bos: I'm just, I got a lot of new features. I just released a new course. And I'm like, I'm ready to plug in on some code for a little bit. I'm ready to start recording my next series. I already have it all planned out. I'm going to get ahead of this one by a little bit here. So that you know I can start working even on April Siri. So by the time the baby comes, I'll be you know, nice, nice and good here. So I am ready. I'm ready for this week, ready for next week already for everything. So yeah. How you doing? Awesome. I'm doing really good. I had an extremely productive week last week working on my beginner JavaScript fundamentals course no one sure what I'm gonna call it and it's looking really good. I'm really happy. It's It's been a long time of just compiling information and building lots of examples. And, and now I'm at a point where I'm like, I took this like, I have this app that's called mind node. Have you ever heard of this? It's like mind mapping software. I see like all of these apps, but I don't let me see. Yeah, there's tons of them out there. I asked on Twitter the other day, and a lot of people said to use my note, it was expensive, like 50 bucks. But it was it was amazing to just like dump everything that I'm hoping to teach and then just like drag it around into this, like nice mind mapping into different sections and making sure and anytime I'm like, oh, like truthy and falsy. Did I get that? And I can just quickly look up? Oh, yeah, that's in the logic and flow control section. And I know that anytime I think of a topic, I just checked the mind map. And I know that it's going to be hopefully somewhere on there. If not, then I can figure out where to put it really easily. So a big fan of this mind mapping software I've never used before. I feel like my napping would go perfectly into notion. I mean, they have all those other tools that do some like, it might be a little intense for notion, but like, man, I feel like that'd be right up their alley. So yeah, maybe we should send them up. Not a poor request. A feature request is a request, please add this. Today, we are sponsored by two awesome companies. First one is Sanity. sanity.io is a headless CMS or a boice. Bring Your Own front end. And we have the armory, which is a men's clothing and accessories retailer. They're both online and in New York. And Scott and I both really like it. So we all talk about both of these companies partway through the episode. So let's get into it. - -8 -00:03:25,800 --> 00:03:26,400 -Unknown: Yeah, - -9 -00:03:26,400 --> 00:07:54,870 -Wes Bos: we're talking about boot camps. Our boot camps are rip off, should you pay for this? Some people even think like, why would you even pay for online course, if you can just read the documentation, you get kind of really low level with this kind of thing. And obviously, at a certain point in your life, it probably makes sense to invest some of your time or your money or both into some sort of education. So we're going to go through the differences between boot camps, part time programs, self learning, going to actual school, all of those different ones. But But first, before we even get into that, let's just talk real quick about our experiences. Like how did we get to we're both professional, full time developers. How did how did you get to your where you are Scott? Yeah. So I you know, I mean, I started learning web development in high school, but it wasn't like focused learning. And it definitely was an in an attempt to get a career. So I wouldn't necessarily even count that. I went to the University of Michigan for music. So I went to college, to study music. And so I got the college experience. And you know, actually, my, my program was a music technology. And there was a lot of programming and engineering courses within the music class, or curriculum here for me. So I did have experienced to that sort of thing in college. Once I graduated, I sort of worked odd jobs while self teaching. So even though I did get some training from college, it wasn't like I was totally decided that I was going to be a programmer. And then I came out of college right to be a web dev, the web dev classes that we're going to get into UVM. We're certainly terrible. So I'm not going to Give them any credit for my eventual career. But I ended up working, you know, just weird jobs. I was an accountant, I was an AV tech. And all of the while here, I was teaching myself to code. My AV tech job involves me just turning on a projector at the beginning and ending of a day and just sitting in a projection room for the rest of the day. And so I wasn't allowed to bring my own computer. So I didn't have like a, you know, I didn't have a computer to waste time on what I had was a crappy computer that I could read and learn and experiment a little bit with code to get up and running. And then what I did was I took that time I got some freelance clients, I grew a little bit and I got a job as a web dev. And then I learned via my boss being an amazing mentor to me, Ben chef, he was an incredible boss and mentor and taught me a whole time while I worked as a junior developer, which led me to have my eventual progression in web development. And then I started teaching myself in 2012, via level up tutorials, which was really soon after I got my first web dev job. And it's not because I felt like I had a ton to teach. But it's like, I felt like there were things that were being underrepresented in educational material, especially for people like me, who were brand new into web development. And people who thought like me, I wanted less jargony technical content and more down to earth real content. So that's why I started levelup tutorials in 2012. And here we are today. Beauty. So I went to you actually, I have a quick question. What kind of beer Did you drink in college? Um, you know, whatever. Honestly, it depends on like, cuz typically, you'd go to like a house party in it's whatever they had going in the keg. But if we were buying, I mean, Michigan has a really good beer scene. So we would be buying a lot of bells, pretty much bells, I would say anything bells. I mean, hopslam is my favorite thing in the entire world. But there's, there's a lot of different stuff. It's interesting. When I was in university as before, that like sort of awesome beer scene had come to Canada and also beers, like really expensive in Canada. I know. Like, you can go to the gas station in the states and buy like a 30 of Natty light for like 12 bucks or something like that. But we were drinking that what's called the Clay's at the time and right and then near the end of university as when Pabst Blue Ribbon started to become super popular in the college scene. Well, we had so my breakdancing crew, we had an official 40 and it was Mickey's so Mickey's was the official 40 of Robo tops. And so we we would do the we'd do power hour or Edward 40 hands or that kind of thing with somebody that was very common. We would do the wizards where you drink a beer. And then if you have a new beer, you duct tape it to the top of your empty can. And then by the end of the night you have like but yeah, but I can't I can't drink that much beer I drink like two or three and I get sleepy. So I just got the recycling and then just tape. You just you got to pick the phone a little bit. You - -10 -00:07:54,870 --> 00:10:04,520 -got to fake it till you get it. Exactly. I'm still thinking that these days. Yeah. Anyways, my experience in this was I went to university for what's called Business Technology Management at Ryerson University in Toronto. And that was more focused on like how to be a manager of technical people not really focused on like, coding or anything like that is more like implementing systems and making purchase orders, things like that. So I'm entirely self taught. As a coder, I sort of just picked that I've been coding since I was like 15 or so. And then I did it all through university. And then by the time I was done university, I was just working for myself being a consultant. So that's my experience with college didn't take comp site or anything like that. And then on the bootcamp side of things, I actually led a whole bunch. So there is a boot camp in Toronto called hacker U. And they first initially started, I think, like maybe six years ago, we initially started it was I created all the content. And I led the first part time class, which was HTML and CSS. And then out of that a couple years later was the the first boot camp came along. And I led that and created a whole bunch of the content for that. And then shortly after that, we did another part time, JavaScript part time at hacker u as well. So I've led, I don't know, hundreds and hundreds of people through boot camps or through part time classes. And now they're they're huge. I think they have a whole bunch of employees, I went out for coffee with Heather, who runs it the other day, and they've got some amazing instructors there. So Wow, I have a pretty good, pretty good outlook over boot camps in general, specifically hacker you I know runs a really tight ship. But I've also talked to a lot of students who, who go through other ones. And then finally, I've also been offered a bunch of jobs at colleges and universities. So I have a bit of insight into how that works and what the benefits are. And at least the ones that I've been offered jobs and part time classes that they they don't seem to pay very well. They seem to have tons and tons of students and tons of marking, which is one thing that tends to get a lot of teachers down. So that's kind of my outlook on the these different things. So we're going to Start with school. What are the pros and cons of school? You know, kick that off? Oh, yeah. Well, - -11 -00:10:04,549 --> 00:10:16,909 -Unknown: so I actually, I thought this would be a little, little funny thing. We could have each one of these have a little bit of a, what do they call that on on Yelp? Or on Google reviews? Where there's like $1 sign amount? - -12 -00:10:17,730 --> 00:14:53,640 -Wes Bos: Oh, yeah, the price, the little little price, I would say that school is gonna earn our highest rating of $3 signs in terms of university or, or anything like that, because colleges are expensive. And you know, I Well, I paid off my student loans A while ago, but Courtney was still paying hers off, or we were still paying Courtney's off until a little while. So you know, I'm, I'm 32. And we just paid off some of her student loans. And now granted, she has a PhD, but colleges are expensive. And it definitely, if I worked a full time job while I was at college, and it still was expensive for me. So depending on where you go, it can be very expensive. So that is the $3 sign option. Well, let's get into the pros, though. So for pros, for me, I thought like one of the best things that I got out of college was sort of life skills that were unrelated to programming, living on my own how to function, that sort of thing that I got in sort of a controlled environment, you couldn't mess up too much, you still had a schedule, you still had places to be, but you had a lot of freedom and a lot less restriction. And you had a lot of room to explore life in different ways. And to me, that was one of the huge upsides about college is that I got a lot of social skills and social abilities that sure you know, I wasn't you know, I had social skills coming out of high school, but it's completely different. It's, it's a more professional world, it's more like that. So I learned quite a bit from college and that degree. Yeah, I agree. I often would have just like conferences as part of school, I would have these like, meet and greets all the time, where you meet with the professors, and I learned a lot about communication and how to talk to people and how to tie a tie. And because I went to like Business School, right, like I yeah, I had like a tie on like, probably at least once a week for some sort of event. And I think really though, when I think about school, for me, it was the best thing that happened was that I had like unrestricted free time to just figure things out, right? Because like, school is busy. And I know like a lot of people have to have a job as well. But there's like really low risk in spending your your evening just trying to figure something out. Like, for me, it was just teaching myself WordPress are playing around with CSS and trying to fix things. And there wasn't a whole lot of pressure, I was getting paid for most of the stuff that I was doing. But it was just the sort of like free time to figure out what it is that I like. And I think that if I were to have skipped school entirely, and went directly into being a web developer, I think the pressure of it being a job and the pressure of trying to meet all my bills in the pressure of trying to make it a thing because this is your job now would be so much more. And I don't think I would have enjoyed it as much as just like, being able to I'll figure it out and try to be a web developer. Yeah, so in school, I had a bunch of different co ops. And I think the CO ops are just like these, like summer jobs that you get in school. And that really, really helped me in figuring out what it is that I do and do not like about working for different employers. And then ultimately, after doing all of my costs that ultimately led me to decide that I want to work for myself, because I don't like working for anybody else. Yeah, you know, one of the things that I really loved about college was being exposed to people and ideas. So, for instance, you know, the University of Michigan is hard to get into I it's a miracle that I got in, I don't even understand how I got in. But at that kind of institution, you have very, very high functioning people. Almost every single person I met at college was amazing at something they were they were good at what they were doing. They were very smart. They were applying themselves in all sorts of different ways. And especially in the School of Music, you have a lot of talent, where people are just some of the most insanely talented people that you'll ever meet. They're doing this, they're doing that they're designing these things, they're designing these things. Meanwhile, they're also you know, world class musician in these regards. They were world class artists in these regards. But people are very surprising, very smart and very good at what they do. And I've never felt more inadequate at any place than when I first started talking to people and finding out just how much less accomplished I was in so many of these people. Now granted, I'm obviously not the least accomplished person who's ever gone to school there but like when you talk to people at the school, it was just constantly feeling like Oh, man, I really have to step up my game. I feel like I'm in still in high school and these people are graduating college already. And we're we're colleagues here we're both going to school were peers. So it what it did is for me, it was definitely an eye opener in terms of what I needed to get on track and how I needed to focus more. - -13 -00:14:53,789 --> 00:17:52,580 -Let's talk about computer science in general. So both of us went to school but neither of us went to school for for computer science. And it seems like every day, there's a new tweet thread on Twitter where someone says you don't need a computer science degree to be a web developer. Yeah. And I think I agree with that. But that's not to demean anyone who actually does go through with a computer science degree because I think there are much harder problems that can be solved past creating a UI with react or building a crud back end update. Like, I think sometimes we were developers put ourselves on a pedestal still, like we're the creators of the universe. We're the web developers, we know everything. And the reality is that there's like probably some guy that doesn't have Twitter that's working on like a medical breathing device or Yeah, right, trying to like, figure out how can we get the most juice out of this really slow processor, so that we can deploy weather balloons or something like that, like there's much harder problems, and then web development being solved. And I'm very glad that people have computer science degrees for solving those problems. I don't think being a web developer is necessarily something that you do need a computer science degree for. I really wish I had a computer science degree. There's so many times when I was a freshman or sophomore at U of M worse thinking, you know what I should transfer to engineering, because I'm not going to be a musician. I should transfer to computer science, and I should just do it. Now. Yeah, I never did. Yeah, it was like, I almost you know, I don't want to say it's the regret, because I don't regret anything. Because without it, the path I took, I wouldn't end up where I am. But I really do. If I going back and having another opportunity, I would have tried to transfer into computer science or engineering, they're like really quickly, you know, and go that route. Because I think there's a lot of important skills that you pick up in a CS degree. They it's hard to pick, it's harder to pick up when you are self teaching yourself. Yeah, I've never met somebody that has a computer science degree that regrets the time on that thing, right? Yeah, yeah, yeah. Other things I'll say about school in general, not necessarily computer science is that a lot of companies won't hire you unless you have some sort of bachelor degree. So I think specifically, I think Google, they might have might have changed this or not Google, or you. Yeah, I think Facebook will hire you. And I know that there's some folks on the React team that don't have anything like that. But there are a lot of companies out there, that's just part of their procedure, and they're not able to hire you, especially if you're trying to do like some sort of visa. A lot of times when companies fly you from or the import you, that's not a good word. Well, it may be it's for a JavaScript job, they will. But yes, a lot of times when you immigrate into the US or into Canada, in order for them to actually get you like landed residency in they have to make sure that they could not find somebody with similar skill from inside of the country first, and often having some sort of bachelor's degree or some sort of degree from a school is part of showing that that's the reason why they had to move you from some other country back into into the US or into Canada. - -14 -00:17:52,890 --> 00:22:15,720 -Yeah. You know, one of the low key things that I got out of college that they say you're going to get out of college, and then people say that you don't is professional networking, which doesn't seem like it's that amazing. But there are schools like the University of Michigan have a big network. And there's been so many times where I've met people, and the connection to the University of Michigan has helped me out. I've gotten not web dev, actually, no, I got one of my very first web dev job. And my second web dev job, I got them really not because of but the fact that I went to the University of Michigan, and the owner of the first company I worked for, along with, you know, several of the designers all graduated from the University of Michigan. So then I get to have that on my resume, we get to have that in common. We got to talk about that. My second job was actually at the University of Michigan, and that sure, definitely did help get a job there. So the professional networking really can help. I mean, absolutely, it's one of those things that they they tell you exists. And if you use it correctly, it certainly can. So let's get into the cons here because I think we hit all of the pros, right? So okay, so we obviously have the $3 signs, that's a big con, spending a lot of money. And potentially, yeah, you might not come out of it with the same kind of skills you would a boot camp or any of the stuff that we'll get into later. But I think some of the the main cons at least the cons that I experienced, were bad, outdated, course material to instructors who didn't necessarily stay up to date with things my very first web dev course ever in college at a college level used Adobe. Ah, what is this app called? Dreamweaver, before they bought Dreamweaver. It was back when Trump Macromedia Yeah, it's back when is Macromedia but it was Adobe in I don't know, in touch. I don't know what the heck it is. And it was the old Adobe web dev software that was a pre buying Macromedia. They had like a grid based visual designer to learn how to code and it was sort of you drag everything on a grid and it just works. And of course, you open it up in the browser and it looks terrible because they're just like position absolutely everything and it didn't it just it worked inside of their own preview editor. And that's pretty much it. So nice. To say it was not exactly super helpful in terms of learning to actually code. And I felt like I probably hurt myself by spending so much time in an application like that, that was focused less on the nuts and bolts of HTML and CSS than it was dragging and dropping and trying to be a Photoshop. Yeah, I should say also, I know that there's probably a lot of like college professors or college, just course, leaders listening right now. And I've gotten emails from lots of people who actually some of them who even paid their own money, just to take my course with their students, which is cool. So there are a lot of like teachers out there that that care a lot about it. But in my experience, going through, like I've taken a couple in university, I took a couple like HTML, CSS JavaScript courses, just as as electives. And, and almost always, the teacher had no idea what was going on, they don't actually write this stuff for the real job. I've been asked many times to lead different courses because my my email got on some sort of like list of people who could potentially lead courses at university, I get all the time my email. So if people are like, Hey, I was wondering if you'd like to lead a video editing course, or we're looking for someone who can do the we're looking to do print, or like, or they have this course that's like multimedia. And they try to like cram in, like web development, video editing, game development, and like all of these things until like, a six week course. And I just think like that, combined with like, the pay, web developers get paid pretty well. And generally, the pay for these things was much less than I could do. I could get just paying for, for like making a website for somebody else outside of it, right? Yeah. So there's, there's that frustration, you've heard it many times over with people in a university or a college program saying like, they taught me nothing, all of the stuff was super out of date, the programs we were using was silly. So I think that's really frustrating to evil. They're paying they're they're good, hard earned money. And when it comes to technical spaces, like web development, it's really hard to keep the content up to date. And a lot of times these they're not allowed to change the content, the the people that are leading these courses, because it's been approved by like the ministry or something like that. So I definitely see a lot of people saying that sort of thing. - -15 -00:22:15,990 --> 00:27:11,790 -Yeah, no. And I'll echo what you were saying about. I mean, obviously, not all of them are, are bad, because they're certainly some very good ones. And in fact, I'm on the advisory board for the University of Florida for their curriculum, along with several other people like Kyle Simpson. And so they actually reached out to developers in the space, and showed us their curriculum and asked us how we could improve their curriculum, what we would change about it, how to make it more modern, what we could do differently. And the they were very receptive to everyone's suggestions. They had people from the design professionals, they had JavaScript developers, they had all sorts of different people in the industry. And they took the advice very seriously. So there certainly are universities there are looking to up their game in that regard. And you know, it's potentially an issue, but it's not always an issue. All right, let's get now into boot camps, which is sort of for a lot of people entering into a boot camp, which generally the way that the boot camps work is is you go for anywhere from, I don't know, seven, eight weeks to some of them are up to 12 weeks, and you go there, generally nine to five every single day, Monday through Friday, often people are staying behind often people are working on weekends. And it's just this crazy, intense way of learning all that is in web development, and building lots and lots of projects. So I myself have have led one, I think when I did it was something like eight weeks, nine weeks, something like that. And we go through the whole thing of HTML, CSS, your text editor command line tools. And at the time, it was WordPress, but it had since been replaced with just much more JavaScript. And I think that came upon because of job requirements. People like the jobs that these students were getting into wanted much stronger JavaScript and not necessarily as much WordPress. And so that was one and also WordPress, or JavaScript in general is just too hard to teach. I think we were doing two weeks at the time. And I think now it's it's up maybe four weeks or something like that. So that's generally the way that these these boot camps work. There's a lot of pros to boot camp is a lot of cons as well. I think probably the best one. I think that this is the reason why a lot of people should take a boot camp is that you can get up to speed extremely quickly. So any of these these choices that you picked in here, whether it's going to school was going to boot camp, self learning, you're unless you are a self learner, you're going to fall flat once you finish whatever program it is that you want. So I think a boot camp is just a really quick way to get up to speed and to immerse yourself in this industry. There's you're not going to learn absolutely everything in JavaScript. And people often say like, oh, there's no way you could learn web development. Then nine weeks. And it's true, you can't learn all of web development in nine weeks. But I think you're gonna learn enough, you get the sort of like initial push by going through the boot camp. And then as soon as you graduate, it's really important that you you keep learning by doing self study, as well as I think people get jobs right out of a boot camp, because employers can say like, Oh, I'm going to hire this Junior. And I think that if I can mold them over the next six months, a year, they will be a really good employee. Yeah. And boot camps. Okay. So I would say boot camps are $2 sign. I mean, they're less expensive than going to college, but they're certainly not exactly. Super Duper cheap. Yeah, they can be like, anywhere from like, seven grand to 12 grand for like a couple of months program. Yeah. And one of the, I think one of the most amazing things about boot camps is just how focused some of them can be. I went to a boot camp to speak about my career in Denver was galvanized, and the instructors were amazing. The instructors had everybody go around in a circle, and they just like, I was just so impressed. They'd be like, Alright, this array method, what does it do when you point to a random person and they shout out, alright, blah, blah, blah, this blah, blah, blah, shout it out. And they'd only been I mean, it was an immersive, intensive program. But these people were already up to speed with stuff that it takes a lot of people a long time to get up to speed with just because how Fast Furious focus the learning is. And if you have a good instructor, these things can be just totally immersive and totally exciting to listen to. And again, I think one of the the big things that you come out of a boot camp with is that the boot camp is entirely focused on getting you a job, which is a very important thing. They're they're not focused on teaching you the skills that are going to make you happy in life, they're going to be focused on teaching you the skills that are going to make you employable, you can then work on those those things, whatever your personal direction is, after you're out at the boot camp, but these things are going to give you the skills to set up for foundational for job interviews, or I just was so impressed, because we did a little QA and the questions that these developers were asking me, were just so beyond where I was at that stage in my career, that I think would they can be a really good way to rocket ship you to a good place. - -16 -00:27:11,880 --> 00:30:20,820 -If I were to look at what was taught and what was learned in nine weeks of a bootcamp like that easily eclipsed probably the first year and a half of my career of just getting to that point at that time. So it's amazing. And like, you might be asking, like, why is it is it does it go so fast. And I think a huge portion of it is that the material is incredibly well selected as to what you should be learning, it's hand picked as to, these are the things we need to focus on. And these are things you do not necessarily need to know about just yet. And then there's also just like lots and lots of teachers and mentors available at any given moment that if you have a question, you can get that solved within 10 minutes, rather than or you can like sit together with your your schoolmates and fix these things. Versus like if you're if you're learning by yourself, you might, you might be out of three hours or if you're learning in like a university, you've got your three hours, once a week, you better wait a week, or go to office hours at a certain point to get help with that sort of thing. And that can be frustrating to people in the search just man, whatever, I'll get my mark and move along. Yeah, that's a big thing. We'll talk a lot about mentorship a little bit later. But I think it's Yeah, that aspect is if you are the type of person who likes to ask questions, which there's definitely a type of person if you are that type of person. Boot Camps can be amazing. Because if you were it takes a little bit of self self learning self direction, but if you can go for that and you will be up and running in no time. And eventually you're going to be earning the big bucks. And when you earn the big bucks, you get to buy nice clothes and outfit your life in a way that is going to make you feel really good and take advantage of some of these places that you get to put yourself in and by by making yourself feel in looks super nice. Now one of our sponsors is the newest sponsor to syntax, which is the armory now this is spelled with a u so it's a RMU ROI. And we'll have a link to that in our course notes. But the armory is a high end men's clothing store based out of New York and their stuff is incredible. Yeah, this is definitely a brand for not someone who's looking for like a like a suit with a huge name on it. It's someone who's looking for a suit or sport jacket or a sweater or even even a nice hat that is made with quality so you're not necessarily paying for the brand name on these clothes you're paying for the quality and the sort of life that you're going to get out of out of this stuff. So the armory is a men's clothing and accessories retailer. And even though it is fairly expensive, it's it's good value for the price. So these are the sorts of things this is my wife is all about this. She talks to me all the time. She always used the word investing in in pieces, which is I always find funny because like your clothing is not gonna make you more money although maybe maybe it will. It If you if you wear this to an interview, yeah, right, yeah, you spend the money up front. And then you have these specific clothes for for years and years to come. It's kind of the anti fast fashion. And they believe that clothing is a self expression. So you should dress to yourself not just a photocopy of something that you've maybe seen on, like the Reddit of dressing or something like that male - -17 -00:30:20,820 --> 00:33:51,630 -fashion advice. Male fashion advice. That's the one. It's so funny. Sometimes you see somebody walking around around the street and say that person subscribes to male fashion advice on Reddit. So it's a pretty small little boutique, they have shops in New York City and Hong Kong. So if you want to visit them there otherwise, you can shop online at the armory calm. One thing I do want to mention to us if you're interested in just getting more involved in fashion in general, follow their Instagram. It's the armory NYC. And it's kind of cool, because you can just like every couple days, you'll see a new photo from them. And at a certain point, you'll say like, I've got to have that. What is the safari jacket that you have Scott? Yeah, I love that Safari jacket. Yeah, absolutely. So Scott got this like Safari jacket from the armory, I got a really nice cashmere buttoned up, which is super comfy, a really nice wool hat. been loving it myself, we got we got this stuff months and months ago. And then we were just sort of wearing it for the last couple months, so that we can actually talk about the quality of it and make sure that it's not just some other expensive hat that you're gonna buy, and it'll fall apart on you. So it's definitely good quality, I'd recommend it. Thanks so much to the armory for sponsoring and check them out at the armory.com word. Cool. So let's get back into it with the cons of boot camps. The boot camps are not for everyone, it does require a certain level of self directedness. And it requires a certain level of let's go get it, let's go dive into this career, I'm ready to go. Because you're gonna have to self learn, you're going to have to ask a lot of questions. And you're have to be excited about the stuff you're learning. Otherwise, the pace of it, and the intensity of the program is not going to do good things for you. So that is definitely an important aspect, you you kind of better really want it for the boot camp to work. Yeah, I think after I've I first taught my first boot camp over five years ago, and it's really interesting, because I'll often see my past students at conferences, and they are now like senior developers, they have a team under them, a lot of them are making really good money over $100,000 a year. But at the same time, you also see people who who took the bootcamp and after the boot camps over, they fall flat, they don't self learn, they're not self motivated. And I think in general, it really just comes down to to personality, that type of person, you can, you can almost see the type of person who goes through one of these things, you can see if they're they're going to do well or not actually, that's part of the the process. I know specifically, hacker does not just let anybody into these these boot camps. Because like, while it would be great just to take everyone's money, there is a certain personality type that should not be taking this because they're not going to see the benefit of it. And then you're going to be out all this specific money. But I guess that gets into the next con, which is some boot camps will take anybody and they will just take your money. And they're not gonna think twice about it because they don't exist to teach people they exist to make money. And there is definitely a I don't want to say it's a large portion of boot camps. But there are definitely is a small portion of boot camps out there that are money making outfits that the quality is going to be low, you're the instructors aren't going to be great. And you're probably not going to be prepared for a career after the boot camps over. So there is a positive side is that the good boot camps are really good and the bad boot camps are going to take your money and you're probably not going to get a whole ton out of it. - -18 -00:33:51,860 --> 00:35:22,320 -Yeah, I think probably two good ways that you can vet a boot camp is first find somebody who's gone through boot camp and just go out for a coffee with them. Almost always someone who has gone through this entire process is willing to to help you through yours because it is an intense experience. And they are super grateful to anyone who has helped them. So they want to sort of pay that forward. So find somebody you can often find people on Reddit, or even just looking at the past students and tweeting them and emailing them saying hey, can I grab a coffee? I just want to hear what your thoughts are on this. And then also find out who the instructors are because at the end of the day, there's a couple things that make a really good boot camp. I think like one of them is the people who make the content. The the curriculum is really, really important. Second, I think it's the instructors find out who is teaching it because a good instructor can really make or break whether you find enjoyment out of a specific thing. And then third, I think another thing that isn't often talked about is that a lot of these boot camps will have like career development surfaces because they have to try to get you a job after it. Some of them will just say good luck. But a lot of them will actually like train you for interviewing they'll bring in people Lawyers in they will try to schedule interviews, they'll teach you how to negotiate a salary when you actually get an offer. So being able to ask like, what are you going to do after I've learned how to create a react application to place me in a place? Because I think that's, that's just as important. If you're paying all this money, you should definitely get some sort of help in the career space. - -19 -00:35:22,320 --> 00:35:23,010 -Unknown: Yeah, - -20 -00:35:23,070 --> 00:39:59,360 -Wes Bos: absolutely. I guess the last con, as we've mentioned, is that a pro, as well, it's not great for people who can't handle the pace. Again, you I mentioned before, you have to want it. But in terms of just wanting it, it's also very, very fast. So you want to make sure that you can keep up with the pace of it. It's the the quickness is definitely a thing. I remember, I took a Japanese class at the University of Michigan, and it was five credits, and it was superduper. Fast. And I felt like that was fast. And then I found out that there was a summer intensive course that gives you 10 credits, 10 credits for one class, to teach Japanese over the course of the summer. And I remember thinking like, there is no chance I'm ever going to keep up with the pace of this course, even though I had the desire to learn language, it just wasn't going to be there for me. So you have to have that ability to know that you're going to be able to keep up with this beat. Now granted in a good instructor in a good environment, know that with all the questions involved, as long as you're self directed, and have that drive, you should be fine. I think the probably the biggest one that I forgot to say is you have to quit your job, or take some sort of sabbatical from your job in order to do this. And most people, they quit their job, I don't think I've seen anybody take the boot camp while they've maintained like a serving job or a part time job anywhere. because it requires your full attention, you're going to be absolutely exhausted by the end of it. So you need to make sure that you're you're ready for this entire experience to happen. And you don't have a whole lot go else elsewhere going on in your life. Yeah, you have to look at it as like a college experience, except for you're not a college, when people are in boot camp, like give them the educational discount to level up tutorials, because that, to me is the same experience as being a student. So cool. So let's get into the $1 sign option, which is self teaching yourself. I know you have part time programs here, but I kind of want to save it for after the big three here. So the big three are really self teaching boot camps and university. So self teaching is clearly the cheapest option, because you couldn't do it primarily through YouTube, if you want to do i mean granted my $10 I mean, I have 1000 videos on YouTube teaching web development. If I have 1000 videos on YouTube, there's probably 10,000 hundred billion other videos teaching you web development on YouTube as well. So you can do it or very, very cheap, if not free. And that is a it's the first one where the dollar cent has been in the pros column. So it's very, very cheap. So this is really for our self directed self starting core sort of people, the people who wake up in the morning are like, Yeah, what can I do today to make myself a better human being and ready to learn a bunch of new stuff, those kinds of people are going to do well and the self directed, self taught thing. Another one is that you can do it while you're at another job potentially, while you're working at a job. You don't have to quit your job. You can do it nights and weekends. You can you can spend that time and devote it and if you're like me, and you had a super menial job, like turning on a projector, you could literally do it at work, because that's how I self taught myself how to program. I turned on the projector. And then as long as that projector stayed on, I was teaching myself programming, which is sort of ridiculous. And yeah, yeah, if you're not looking to go as fast as a boot camp, I definitely think self teaching is a really good option. Like Scott said, it's extremely cheap, it can be a supplement to your job. So I know a lot of people who take my courses are already web developers, or they are in a technical role. Maybe a lot of them are just like the people who maintain the website from data point of view. So they're just like maintaining the CMS. And sometimes they get it right, a little bit of code, but they love to upgrade and get that pay bump that comes along with being a full web developer. So you can buy a couple courses, take a couple of YouTube courses, whatever it is that you find works for you. And it's a nice little supplemental way to just increase your job. Often employers are more than willing to spend a couple hundred dollars on courses. A lot of people have training budgets, and they pay for those because it will just I don't know, I would pay a couple hundred dollars to invest in my own employees and make them a bit better. Yeah. And you should ask that's a big thing you should ask. A lot of times, these companies will tell you yes, you have this much amount to spend on courses or conferences or whatever for the year. But sometimes they don't tell you. And I think it's important to head to your boss and say, hey, these courses are going to make me a better developer. For these reasons. I'd really like to take these can we get it covered. And you should tell your employers to go buy some level up tutorials and Wes Bos courses - -21 -00:40:00,920 --> 00:40:06,060 -Unknown: They might say yes, no, but just joking. I want to get to Sally over here. Don't - -22 -00:40:06,060 --> 00:40:09,030 -Wes Bos: get to Sally ami sigh I'm drifting. - -23 -00:40:11,099 --> 00:40:11,850 -Unknown: But But yeah, so - -24 -00:40:11,850 --> 00:41:45,090 -Wes Bos: one of the things that I really loved about self teaching myself is that you could get real world experience while you were learning that could direct where you were learning where you're spending that time learning, I would often take a freelance gig and just say, Yes, I can do it, and then have to figure it out while I was doing it. Now, granted, I wasn't, I wasn't batting out of my league. But if they needed a specific site with certain functionality I knew was possible in WordPress, but I had never done it, I would say, let me do it, I'm going to take the time, I'm gonna spend that time learning, and I'm gonna get paid to learn a little bit. So self learning can definitely it can be directed specifically by what you're doing in your Freelancer or any of that sort of work. Yeah, I'm a big, obviously, I'm self taught myself. And I think probably the biggest tip that I can have for someone who is self taught is that the learning material is really only half of it. And the other half is actually building stuff. So you can take as many courses and watch as many talks and read as many medium blog posts as you want. But for every minute you're spending doing those things, you should also be spending a minute building an application that scratches your own edge or doing a freelance client or whatever. And I think that's where you're really gonna cut your teeth and go and we answered this, I think last week on the potluck, where someone said, like, will that make me job ready taking a cup of courses? Absolutely not. Is is University going to make you job? Ready? No, no way. You're, once you once you graduate, you actually have to start building stuff and actually cut your teeth on this in order to refine your real world experience. - -25 -00:41:45,110 --> 00:41:46,130 -Unknown: Yeah, cool. - -26 -00:41:46,169 --> 00:44:42,000 -Wes Bos: So let's get into the cons of self teaching yourself. Because there are definitely certainly cons. I mean, when you get something for free like this, there's definitely gonna be a lot of cons and cons specifically for self teaching, or it's not for everyone, it really is not, you need to be ready to go, you need to be the type of person who wants to learn this stuff and doesn't need somebody to tell them, here's what to do next, it can be difficult, I mean, that can be really difficult to self motivate, especially when there might not necessarily be an immediate, you know, at the end of the rainbow here for you, you might not immediately see the results of the work you're putting in. But if you put in a little bit of work every single day, you're going to see the results in a year or a couple years or even a few months. But it's not going to be an immediate feedback here, it's definitely a little bit longer of a road to getting up and running. Another con that we have is it's hard to get help. Sometimes, if you are stuck on something you can hopefully reach out maybe there's a slack group, maybe there is a spectrum, maybe there's a GitHub issue. But that stuff isn't always immediate, there might not be anybody in the chat room, there might not be anyone that respond, it can often take like 45 minutes to just like put together what is what it is that you're having a problem with. Whereas Sometimes I wish I could just grab someone's laptop, hit Inspect Element, and I could fix it in three seconds, whereas they probably took 45 minutes to get that thing like web ready and social, you're working on something locally, and there's a database involved. So that can be that can be extremely frustrating for people where it's hard to get help, what I have seen work really well is people just have like friends in a slack room, or they have a small slack room that has just a couple people who you can depend on or you meet up every Saturday for coffee with a bunch of people that they'll take my JavaScript 30 course together some sort of community where you can reach out to people when you get stuck. And it doesn't necessarily even have to be an expert. Often people will email me and say, can you be my mentor? Or can I do three hours a week with you? And it just really needs to be somebody who's like 15 minutes ahead of you. Yeah. Who has been through those problems and can explain it to you? Yeah, and and shout out to the level up tutorials slack room, if you want to join that it's the links in the footer of level up tutorials. You can just join that with the no invite necessarily. We have a nice community of people willing to help you out. I know, Wes, you have one for your courses as well. But Slack, things like that can be extremely helpful. I wish it wouldn't the start. When I first started the slack room for level up. I was doing a lot of help myself. And now a ton of the users are always coming to the aid of anybody else. And it's like really amazing to see this a community of people just there to help each other out. Absolutely. I should say right now before everyone emails me, my slack is not open unless you buy a course. Yeah. And there's like 23,000 people in there right now. But don't email me asking how to get in. You receive an invite when you when you buy a course there's that there's a red rope, and you have to lay - -27 -00:44:42,000 --> 00:44:51,090 -Unknown: out a red rope and you have to be invited. You have to be on the list. Exclusive exclusive. Yeah. It's also potentially discouraging if you had a problem - -28 -00:44:51,090 --> 00:47:04,890 -Wes Bos: and you don't know how to solve it. And again, you might not have that network that we just talked about. You could get very frustrated and you could quit. You could also start spend a lot of time learning something that is really unimportant to what you're trying to do. I mean, that that is like a big thing where you maybe think that this is the correct solution of the problem. And since you don't know any better, you spend a lot of time going down the wrong wrong path. And well, you just wasted maybe a month, maybe you wasted a week, maybe you wasted a couple hours, but it's still wasted time that you could have spent learning something else. And if you don't want to waste any time setting up your data for your front end application, then you're gonna want to check out sanity@sanity.io is the amazing boys bring your own front end back end system for you. That is, let me tell you really superduper cool, they put together a little demo for us with our syntax episodes, and we had our icons in there. And it's just really super cool. So we've talked about Sanity, a whole bunch. And one of the kind of cool things about Sanity is that you can upload your own react components to their back end, meaning that you can make custom interface for a hosted solution. They have all kinds of like a cool little add ons there. And if you go to sanity.io, forward slash syntax, they also have posted the code that is migrating the syntax feed that is the RSS feed, and they built a little migration tool. So specifically, if you say, Okay, I want to try Sanity, but I already have my data in something else, how do I move it to there, they have lots of like good migration tools. And at the end of the day, just show me the cool, show me the code. They've got some examples on GitHub called the podcast to Sanity. They have a link to the the syntax studio and the syntax front end mouth. So they actually wrote a script to import our podcasts from our RSS feed into Sanity, they wrote a script there, they wrote a back end for Sanity that you can just log in and check out. And then they also have, they took our website, which is open source and then just changed it. So the data is coming straight from Sanity, rather than the the markdown static generation that we have right now. So if you want to check that out, go to sanity.io forward slash syntax, scroll to the bottom, you'll see the links to those specific ones. - -29 -00:47:04,950 --> 00:47:10,740 -Unknown: Yeah. Nice. So thank you so much for Sanity for sponsoring. Really, really cool service. All right, next up, - -30 -00:47:10,740 --> 00:51:07,110 -Wes Bos: we have part time programs, we'll go over this one pretty quickly. A lot of these boot camp providers will also offer part time programs, as well as colleges and universities will offer just like a single course that you can go ahead and take, I think this is a fantastic way to get up to speed with a new new tech, I really enjoyed the pace of these specifically, when I was doing part time JavaScript, it was twice a week for three hours, I think six to nine or 639 30, something like that. And that was like often enough that you wouldn't get out of the headspace of JavaScript, but slow enough that you could have a couple nights in between to test it out and to build your own thing. And I would often show up a half an hour hour before class students would show up and say like, these are the things that I'm working on. I feel like it was a really good balance of learning quick enough, like learning JavaScript in I think it was like three months or something like that. But slow enough that if you get overwhelmed, things will stop for a couple days. And you could try to catch up with that specific thing. Yeah, yeah, I don't have any experience with these. But they again, it seems Low, low risk, and a definitely might be a good way to pick up some additional skills. So the cons you have listed here as quality as all over the map, and might not be as fast which both seem pretty reasonable. Again, it's not going to be the breakneck pace that a bootcamp will be and again, just like boot camps, you don't really know about the quality unless you really get into talking to some people about, you know, the course reviewers, the instructors are the quality if at all. Yeah, and for the quality one, often what can happen and this was at hacker U is we would have demo night and you can just anybody can come in the students would demo what they built in the class. So often it would be people who were checking the program out, and they just want to see like, what are people actually building? What do they have to say, and you should be able to talk to someone who's gone through the program to get an idea of what it is whereas like just going in blind, maybe with a course syllabus from something that would be a little dubious, I don't know, I don't necessarily know I plunked down money for something like that. And then the speed, I don't even think that's a con i think the speed of a part time program is really, really good, especially for someone like you might have kids, you can't quit your job, but you can for for three months of your life, you can devote a couple evenings a week to the sort of thing and we Scott and I have been telling people that all the time, just take you got to find some time and that might be in the evenings to figure this stuff out. And if you have an actual program, it's a lot easier just to show up and do the work then it might be to like, oh, maybe tonight I'll work on myself led course. Maybe I won't. I'm feeling tired or whatever the bachelor is on. Yeah, okay, well, let's get into our last one. And we're gonna get through this pretty quickly because this is really just an augmented version of self learning but just mentored self learning. mentored self learning is also $1 sign super duper cheap. It's best Do with a mentor on the job because you're working, you're working with that person, chances are they're a senior Dev, they can guide you a little bit. So it can be really, really nice to have an excellent boss mentor you this is one of the things that really advanced me and my career. mentor can help steer you where to spend your time and your free time, they might notice you have some some problems, spots in your education or maybe some gaps that you need. And they can toss you projects, maybe even work projects or say, hey, maybe you need to spend some time on this. So they have a good vision of where you are, where you need to be. And they can guide you a little bit. And it's also a great place to ask a lot of questions, which is the thing that I took advantage of most with my mentor, I asked so many questions, I probably annoyed the hell out of him, but just saying, Hey, man, I broke this, can you fix it? And it always, always helped. And you know, by the time that you know, you know, we were ended up being coworkers, eventually, we were asking each other the same kind of questions and getting each other up to speed on stuff. So that's how these kind of relationships work. And asking a ton of questions. And going back and forth is really super important. I - -31 -00:51:07,320 --> 00:55:51,600 -think one of the number one questions I get, like every day open on my Instagram, and I have people's life stories and a DM Yeah, asking for advice. And it's frustrating to me, because I can't spend all this time getting into people's lives and asking all these questions and then and then recommending a path forward. Whereas like, I think that there's a lot of really competent developers probably listening to this right now. And I think that at the very least, you should reach out to somebody who is looking for a mentor, and offer to have a quick call with them or just to be available. Like I remember when I first started coding, my friend, Darcy was always on chat. And whenever I hit a roadblock, I would just message him and he would help me out. And I thought that was that was so good, because I was able to get unstuck really quickly. And I think that it would be a really cool thing. If you are a developer right now. And specifically, if maybe even like make it a point of reaching out to somebody who is underrepresented in our industry and say, Hey, if anyone's looking for a mentor, I would be able to put in an hour an hour and a half per week. And in helping you through that. Because I think a mentor is such an awesome way to get through it. Yeah, definitely. But the cons, I guess for here would be that it can't be done without someone who's willing to mentor you. And yeah, I mean, we get requests to mentor people all the time. And as much as I would like, if I had no career right now, if I had nothing else to do, I would be happy to mentor every person. But I think I'm doing the best I can to mentor people through my courses. And that's really all I have the availability for. So only approach a mentor if you know that they have the ability to take you on as a student, because it is it's a big ask. But again, it's an important one. That's why I think having a boss that is a good mentor is a good way to go for that one. So I guess we want to wrap this up with what approach? Would you take Wes, after getting through all these pros and cons? What's your what's your approach? After all of this, I think that if you're young enough to go through school, it's probably worth going through some sort of program that interests you and keeping up with development, whether it's it tangentially related, or whether it's it's something totally different, because you might not end up liking web development, you might move to a totally different industry. But from what I hear a lot of people listening this podcast are maybe not in a spot where they can, they can go through school, and they're looking for a better way to get up to speed quickly. And if that was me, and I could afford a boot camp, I would definitely plunk down my money. I think that if you have found your yourself being able to go through an online learning course, or you find yourself with some success in web development, I wouldn't sweat the the money that you may have to take out a loan or borrow from family to do that sort of boot camp, because you will probably do well in this industry. So if that was me, I would take the bootcamp and then immediately start self supplementing after that. And you might have to self supplement for a couple years after graduation or probably if you're a web developer, you have to self supplement for your entire life. Yeah, right with with learning. So that's that's how I do it probably the fastest. But again, I'm totally self taught. I didn't take any boot camp. I didn't take any school. And it definitely can be done that way as well. Yeah, I would most likely agree with you. If you're the type of person who needs a little bit more exploration in their life, then college is probably a good option. If you're the type of person who's like I, I know what I want, and I want it now I want a web development career, then boot camp is a great way to go. It's cheaper, you can plunk down that money. Just make sure it's a good boot camp. Go through it, take all that stuff. And then again, you're going to want to self direct learning as much as possible. Get that job learn on the job keep growing build that career. And next thing you know it's gonna be yacht life. Yeah, life. One more thing I totally forgot to address that people ask me all the time. Do you think that there's going to be way more developers than there are jobs is it worth taking a bootcamp anymore? Because like there's like hundreds of boot camps cranking out hundreds of people every single month, and all sudden we're going to have thousands of these little babies that we birthed from these boot camps. And they all need homes and jobs and things like that. And I do think that our industry is still in a pretty big boom stage right now, there definitely is more demand for advanced people than there is for beginner jobs. But you can simply just go on a lot of these boot camps and take a look at their placement rates. And if the boot camp is not reporting what their placement rate is, like six months after graduation, I think 70 80% of the people who probably should have a job. And if they're not reporting that or they have a really low placement rate, then that probably reflects something on the bootcamp as well. Either they're letting in people who shouldn't have been let in, or they're not doing a good job at getting these people career ready. - -32 -00:55:51,780 --> 01:00:11,400 -Yeah. Cool. So I think that really covers it. This was a good one that we've been wanting to do for a long time. So I'm glad we not Yeah, now, definitely one of the longer episodes. Now we're going to get into the section of the show where we talk about things that we like, they can be anything, they could be podcasts, they can be books, they can be products, they can be website, services, literally anything stuff that we think is sick, this is our sick picks. And I have a sick pick for you today. It's a book called Digital minimalism from our one of our favorite authors, Cal Newport. You You read deep work by Cal Newport. Yeah, he has a new book out. Now he has a new book called Digital minimalism. It was released February 5 2019. And I read it February 5 2019. And I really loved it. Now this book is for those of you who maybe were inspired by the Marie Kondo sort of stuff, where you're looking to simplify your life and a little bit of way, and this is talking a little bit about digital minimalism, spending time away from your screens, spending time away from your devices, sort of impact it can have on your life. But not only that, how to make the time on those devices better. It was really nice. I liked it. It wasn't like, it wasn't transformative. I didn't read it and be like, wow, I'm a different person now. But I read it. And I really enjoyed it. And I really enjoyed the message. And it's a along with some of the konmari whatever stuff is really helping me simplify my life right now. And in teaching me a little bit about spending time on social media things, I actually set up my my digital wellness settings on my Android phone immediately after reading this book. And Android has built in like app time limiters. So you can say, you know, I only want to spend 15 minutes on Instagram all day. And then it Gray's out the icon, it's built into the OS. It's super nice. So I set that up immediately. And I've been limiting my time on social media, certain apps that I spend my I find myself drifting on to are just picking up and scrolling. He talks about something that was like, you know, when people first start to do this to block apps, they'll find themselves opening up apps like the weather app, and then just mindlessly scrolling through the weather app. And I had that exact same experience. I was picking up apps that I did not care about just to scroll through them. And it was really sort of eye opening in that regard. Like oh man, I really got to fix this. So digital minimalism really great book, loved it, Cal Newport does a good stuff. Cool. I'm gonna check that out. You've been on fire with your book recommendations. Lately, I've been taking almost every one that you recommend. I think we should have a page on our website that lists all of the books and maybe all of the sick pics because somebody I don't know what it is right now someone built a tool that scraped all of our markdown files for the sick pics and compiled them into a service. But specifically the books would be nice to just have because I often find myself being like, Hi, I need something new. Yes. Yeah, yeah, let's, let's build it. Let's do it. Cool. So my second pick is going to be a book as well. The other day, I was on a flight to Paris and I thought like, I've listened to so many of these like self help books. And I was like, I just don't feel like listening to another one right now. And I want something that's a little bit more interesting. Specifically, because you've been recommending that. What's the podcast that's about? He talks like this? And swindle the person was swindled Yeah, yeah, so I'm not gonna get out based on that. So I've been loving, swindled, and you recommended like, probably a year ago, the kingpin book, The American kingpin. Yeah. And it's the story of the, the guy who ran the Silk Road, which is this like Tor based private selling drugs through the mail website, and what a crazy story and I had heard a bunch of podcasts about the entire Silk Road story. And I thought that I know that story, but I listened to it anyway. And it was so good. It almost takes it as like it narrates, like, what he was doing what the weather was like. And fantastic. Just riveting story about this little geek who built this is kind of scary, because it's scary. I'm like, right. I know what he like I could have built that thing. You know, obviously I read up in it. Yeah, cuz it's it because I That's like one of us. You know, like one of us could have built the Silk Road because we he's just like a PHP Dev and slinging the stuff on tour. So I thought it was pretty interesting. Check it out. It's called the American kingpin. - -33 -01:00:11,700 --> 01:01:30,980 -Yeah. Cool. So, shameless plugs, I have a new course react hooks for everyone. If you want to learn hooks, build custom hooks, build non custom hooks use state whatever. We didn't do some really practical examples like very practical, we're building some some stuff that the hooks that you can take with you. We're building all of the things that teach you the ins and outs of all of the basics of hooks and just how to use them effectively in your applications. And we even get to some little third party hooks at the end it's really super nice. So check it out at level up tutorials.com forward slash pro sign up for the year save 25% it is react hooks for everyone is the latest course and we got a new excellent course for all you view fans coming out in March can be a view March so well, more view episode Scott, are we ever gonna do a view episode you tell me was you tell me I'm ready to go. I've been viewing so awesome. All right, I'm going to shamelessly plug all of my courses Wes bos.com for slash courses. If you want to learn anything, check it on out, dough. Peace. Thanks for tuning in. Please. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax127.srt b/transcripts/Syntax127.srt deleted file mode 100644 index 3d68843fc..000000000 --- a/transcripts/Syntax127.srt +++ /dev/null @@ -1,116 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,149 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi - -2 -00:00:25,890 --> 00:00:47,340 -Scott Tolinski: Welcome to syntax in this Monday tasty treat. We are going to be talking all about react suspense and largely about the future of react as we talk a little bit about the roadmap here of what we're going to be seeing out of react over the next few months here and how it's going to evolve now My name is Scott winsky. And with me as always is Wes Bos, - -3 -00:00:47,460 --> 00:00:48,840 -Unknown: everybody. Hey, Wes. - -4 -00:00:48,990 --> 00:03:14,610 -Scott Tolinski: This episode is sponsored by one of our favorite sponsors over here, which is Sentry. Now Sentry is a great way to track all of your bugs, and let you be aware of the things that are happening on your site. Like right now, I just pulled up in my Sentry dashboard, I see an error here cannot read property name of null, which means that I probably forgot to check to see if something existed first. And now that's something I'm going to want to take care of immediately following this, this podcast recording episode and, and one of the cool things is that Sentry allows me to do is immediately mark that as a GitHub issue, track it and make sure it is completed in the very next pull request. The next deploy century@sentry.io again, is something that you're going to want to try. And to give Sentry a try, you're gonna want to head to sentry.io and sign up using the coupon code at tasty treat all one word, all lowercase, and you will get two months for free of Sentry. And definitely check it out. Because it's one of these services if you're running software that other people are using, you're going to want because when you hit bugs like this, your users aren't going to tell you that the bug I just mentioned, I haven't had a single person tell me that they've hit that bug. However, I can see that a certain amount of people have hit that bug already. So I'm going to go ahead and fix that. And no one's going to have to tell me to fix it to do it other than Sentry, so against sentry.io. Use the coupon code tasty treat and check it out. Cool. So without other way, let's get into suspense. Because we've done an episode on hooks, and no suspense could potentially once it's been released, we should probably do maybe a full episode on it and explain our episode where we talk all about the ins and outs of it. But this is going to be a little bit more about high level what it is how it's going to improve your life and where reactor is going to be going over the next few months. So there's a really great react blog post by Dan Abramov published November 27. About the React 16 roadmap. And this thing is really great, because it really gives you a big insight into what the team is thinking and where it is going. Now, you will see that obviously hooks has been released, we talked about hooks. But even before that in version 16.6, there was a suspense for code splitting, which we're going to be talking about as well. And then they have in q2 2019, concurrent mode, and then mid 2019, suspense for data fetching. So these are all things we're going to be hitting on in this episode a little bit, give you a little bit of what the problem is, what problems that's trying to solve and how they make your life better. - -5 -00:03:14,730 --> 00:05:30,630 -Wes Bos: Yes, we should say that this is all going to change and might change. So because it is not yet released, what we say here on this podcast may change. And we just want to give you that warning that because we're talking about something that will come to react at some point, it is likely that some of the packages, some of the API's, I even had done a talk on react suspense, and then the API totally changed. And that's to be expected with this sort of stuff. It's not something you're going to be putting in your putting in your production application. But it is nice to know about what's coming this year in terms of react, what's going to change and what why are we getting these things? So why don't we first kind of get into the sort of problem that we have with react that react suspense is going to attempt to solve, and I'll do my best to sort of explain how it works. So generally, you have components in your react application. And those components need to load data, they need to fetch an API call, they may need to load an image, they may need to load some sort of code split bundle that is out there. All of these things happen synchronously, meaning that they they happen sort of in the background, and then when that data comes back, it will be set to your component you put into state somewhere, right? And that's great. Except that when that data is being fetched, we have to show some sort of loader, right? Because we have to show some sort of UI, like what do you show to the user when that data is being fetched. And generally, that just means some sort of spinny spinner son that is being put on the page, right? And one problem that we have in react is that where you fetch your data, and where you show your your loading UI, generally will happen. in the same spot, because if a component fetches its own data, it will also have to maintain its own loading state internally, instead of like sorry, another option is you can put all the stuff at the very top of your application, where that's where you maintain your loading state. And that's where you maintain your API calls. And if that's the case, then you have to pass the data all the way down. So it kind of two approaches to it. And both of them make it kind of hard to figure out where you should show your loader and where you should be fetching your data. Yeah, I - -6 -00:05:30,630 --> 00:06:49,620 -Scott Tolinski: think we should state that the problems that these are trying to solve is really just trying to make our data fetching, more seamless. Our applications load to the user, like the perceptive loading time for applications, the perceptive loading time faster, as well as do things like code splitting, again, to make our bundles smaller, all of these things are going to make your apps render faster, better, stronger, all of those things, in a way. Yeah, I mean, it's def punk up in here. And I think that I think this mess is gonna be a game changer in that regard. React hooks have been amazing as the nice little update. But I think suspense along with the libraries that eventually will take advantage of suspense, are going to really change how your applications load and function. And I'm personally really looking forward to a ton of this stuff, because a lot of it is solving problems that are difficult problems to solve. And the React team makes them wants to make them easy, because if code splitting is easy, if it's painless, if it's the way to do things, then everyone's going to code split, and your site's going to load fast. If concurrent rendering, which we'll get into a little bit more as well, is easy, then people are going to use it. So again, I think the team is really just taking steps to make our applications load faster and be better for your users and make it easy on us to do. So - -7 -00:06:49,830 --> 00:07:08,280 -Wes Bos: I'm really excited about these changes, because it makes both your users lives better by providing them with better feedback as to what's loading. And we'll talk about what they all are. There's there's pre loading available via caches, as well as it makes our lives the developers easier. And when you can do both of those. Were in a good spot. - -8 -00:07:08,880 --> 00:07:11,880 -Scott Tolinski: Yeah, that that is the ideal situation right there. - -9 -00:07:12,180 --> 00:09:14,880 -Wes Bos: All right, so let's get into what react suspense is. So again, the let's let's imagine that we have a user component, and that component needs to hit an API, fetch data about the current user and then come back with that data, and then put it into state or somewhere and then display that data, right. That's something we've all done before. And previously, what you might do is on component mount, you fetch that data. And then you set a loading Boolean to true. And then when the data comes back, you set that user data back into state, and then you set the loading Boolean to false and you go ahead and render out whatever it is that component wants to render. So the the idea was Spencer's got a whole bunch of like points here, we'll we'll kind of go back and forth on them is, first, what you want to do is you take your your data fetching function, so maybe have a function that's like a sink, get user info, and that goes off and fetches an API doesn't really matter how you fetch your data, as long as you are, you're going off some way to get some sort of data, you turn those functions into what are called resources. So react will ship an API called create resource or something like that. That's what's called right now. And that turns your sync functions into what are called resources. And then what you have is with these resources, you read these resources right above your render. So imagine that you have a user component that displays the name and a profile photo for that user, what you would do is right before you return that JSX with an h2 tag and an image is you would simply just take that resource, and call dot read on the resource. And what that will do is it will sort of synchronously, like it won't block behind the scenes, that JSX in that component will not render until that resource has been resolved or fully read. And that's pretty cool. Because you don't have to worry about loading Booleans. In this case, you simply just say like const, user equals user resource dot read, and then it will go off, fetch it come back. And then you have a user variable, and you can go ahead and use it right, - -10 -00:09:14,900 --> 00:10:02,300 -Scott Tolinski: yeah. And then so your resources can then be read from a cache. Now, the cache that comes that react will ship will just be a basic react cache. What's cool about that is that libraries like Apollo relay, and any of these other data fetching libraries can integrate into suspense, which I know is something the Apollo team is very interested because they did talk about it. And they'll be able to utilize the cache in the same sort of way. And really just integrating these systems in, I don't know, much more seamless way. And so resources can then be also pre loaded into the cache anticipating when you need them. It's basically going to make the caching of your data, it's going to make it more integrated into react because right now, we all know that libraries like Apollo and relay, they do their own caching, but now it's going to Be more tightly integrated into react? - -11 -00:10:02,460 --> 00:11:12,360 -Wes Bos: Yeah, I would, I would imagine that like Apollo will roll their own cache, and you simply just read from the Apollo cache. Because right now there is the only cache that I know of is called react cache. And there's no docs for it at all. It's a totally separate package. And that's intentional, because like, I don't think that will be the, the cache because there's, I don't think there's any information as to when it should expire, or how to refetch data, if it goes stale. But that's the sort of idea is that you will be able to take your resources and read them against the cache. And if there's nothing in it, it will do the network requests. And there's also pre load functionality as well. So you can call dot preload, you would imagine, yeah, you could, if you're on like a user, and you want to like pre load the next three users so that when someone swipes over to them, they will already be read. That's great. Because then your user component doesn't care about whether you need to preload it or not. It simply just reads it from the cache. If it's not, there, it goes and gets it and it takes a an extra second or two to fetch the data. And if it's there already, then great, it'll immediately return it into the user variable, you don't have to worry about pre loading or states or anything like that. Yeah, - -12 -00:11:12,390 --> 00:11:33,990 -Scott Tolinski: it's funny, because that's one of the things that makes Gatsby so great is like the automatic pre loading that's in Gatsby right now. It's one of the things that makes us so fast. And again, Gatsby does a really great job of making these things easy, and we don't have to think about them. So it's really great that the React team is going to be making these things easy overall, because when it's easy, everyone's gonna do it. And again, it's going to speed up all of your stuff. - -13 -00:11:34,140 --> 00:13:55,440 -Wes Bos: So let's talk about loading state. Now, I just said that you can have a user component, it reads the data, and then it displays it. Like what about that sort of in between time where between fetching the data and displaying it? If there's no logic inside of your user component? How do you decide what to show the user? Like? Does it just show an empty JSX? state? Or does it show like, I remember back in the angular days, you would just see the actual Angular templates for a second before your data loaded? Like, what do you do there. And in this case, what you do is you take a suspense component. So this is going to be a new component that ships with react core, you import suspense from react, and then anywhere higher up in your, your tree. So anywhere on your page, you can wrap your components in a suspense component. And then that suspense component is smart enough to know that some of its children, one or many of us, children's anywhere down the road, children on the road, fetching data, yeah, children along the road, it knows it without having to communicate or send data between those two components. It knows if any of its children are currently fetching data. And then at the suspense level component, you can choose two things you can choose, what should I show? When we are currently in in a loading state, you can simply just pass it a loader prop. So you say like fall Spence. Oh, wait loader, though used to be called fallback. Now? It's, oh, no, no, I think it's called fallback. Sorry. You're right. It's called fallback. And that is the component that it should show when you are in loading state. And then the other one is a max delay prop. And that's how many milliseconds should we show nothing. And that's good for fast connections, meaning that like, have you ever been on a website with a fast connection, and you just see like, like six or seven loaders really quickly. And then as the data populates, it sort of rejects. That's bad UI. And it also could hurt your if you have any animations going on on your page, that triggers of re renders can hurt animations on your page. So this will just show nothing, you can say like max delay, 500 milliseconds, and if all of your data takes less than half a second to fetch, then it will just simply render out nothing to the page. And then you get that nice clean single render on the page. And that gives the idea of perceived performance. It's not actually making it any faster, but the UI is a lot nicer. - -14 -00:13:55,470 --> 00:14:45,750 -Scott Tolinski: Yeah. And we'll talk a little bit more about this when we talk about the suspense for data fetching, but I'm already doing this kind of thing with react loadable, for lazy loading components, where you do give it this delay time to make sure that, hey, we're not showing a spinner while it's loading this component if you don't have to. And the brilliant thing is, this is all going to come into data. And again, if you want to show a spinner, you can show spinner. If you want to show a skeleton screen, you can show a skeleton screen, there's a lot of options here in it, and I think is really going to open it up. It's going to make a lot of this stuff very easy. No more if loading, show loading animation. And then you know, if data is ready, then blah, blah, blah, it's just going to be able to handle that for you. So fall back prop is going to show you your loader as long as it's within those bounds. And until your data comes in, and it's just going to handle it automatically for you. - -15 -00:14:45,840 --> 00:14:53,010 -Wes Bos: Yeah, that's like every component I write if loading show loader if error, show error, right. Otherwise, show the actual component. Exactly. - -16 -00:14:53,250 --> 00:16:51,960 -Scott Tolinski: Yeah, so I'm really excited for all of this again, what I'm most excited for is the impact is going to have on the libraries that we use every day. The ways that we fetch data, and the ways that it's going to load the controller is going to give us. And so we talked a little bit about react suspense for data loading, which is really sort of the last thing in the roadmap. Here, they're saying this is going to be like second half, or mid mid 2019. So suspense for data fetching is mid 2019. But before this lands in react two, there are some things that needed to land and react first. And the first of which is already shipped, actually, which is suspense for code splitting. And it launched with a couple of caveats, which is why I'm not personally using it right now. But suspense, for code splitting functions very much like what we have for data fetching, where you have a suspense component that wraps around your components. And then you use something called react dot lazy to import something now, through this lazy importing, it's not going to import or even load that code in your bundle until it needs it. And so it's going to have to do a network request to go fetch that bundle of code, it's going to have to use a potentially used a fallback if the network request is taking a little bit of time. So same thing we have a fallback prop with maybe it's a loader, maybe it's the skeleton screen or something. And what it does is it gives you code splitting very, very easily. Now, why am I not using this right now, I'm not using it right now, because it doesn't currently work with server side rendering. The good news is, is that Meteor has its own import dynamic import system. And I'm using that plus react loadable to get the same functionality with server side rendering. But the React team recommends loadable components for server side rendering, if you aren't, if you need server side rendering and would like to use dynamic imports in code splitting. So until that SSR, stuff lands, I probably won't be using this one either, either. But suspense for component loading with the code splitting stuff is again, it's taking something that's a problem and making it really, really easy to fix. - -17 -00:16:51,960 --> 00:17:37,100 -Wes Bos: So yeah, you can use that already today. In your code, if you want to try it out, you can just look up the docks for react dot lazy and that will lazy load your code and maybe should real quick explain what that is. If you have a component that has a bundle of JavaScript, like a shopping cart, and that shopping cart, needs to load that JavaScript before work, instead of just loading it on the homepage, because the shopping cart might not necessarily be needed ever, or until someone adds the item to the cart. You can lazy load that on demand. So when someone clicks something to add to cart when someone visits the cart page, or you can just like anticipate somebody doing it. So once the page is fully been loaded in, someone's just sitting there watching a video or something, you could in the background preload that little bit of JavaScript in their - -18 -00:17:37,740 --> 00:18:15,320 -Scott Tolinski: word. So the So okay, so code splitting for suspense hasn't been launched, it's been added, it's already shipped, with the exception of SSR. Then Next came the next release that we mentioned was react hooks. Now, I don't think hooks has too much to do with suspense. But the next one here, which was concurrent mode has a lot to do with suspense. Now this was originally called async mode, they changed name became current mode in what the heck of async, concurrent I mean, they're kind of long, jargony words, it really just means that your application is able to load things without blocking, right, it's able to load things in parallel jumping from component to component rather than just going right down the list. - -19 -00:18:15,540 --> 00:18:20,550 -Wes Bos: Yes. And someone's going to get real mad that you said parallel there. There's a funny thing in JavaScript. - -20 -00:18:20,570 --> 00:18:21,300 -Unknown: Yeah, okay. Well, - -21 -00:18:21,300 --> 00:18:27,390 -Scott Tolinski: I don't mean it in programming. But because it's so hard, it's a parallel. - -22 -00:18:29,040 --> 00:18:38,060 -Wes Bos: Yeah, parallel is so much more easy to understand. Whereas in reality is JavaScript is concurrent, not parallel, and someone's gonna come in, I'm gonna - -23 -00:18:38,060 --> 00:18:42,270 -Scott Tolinski: knock down your door, I'm speaking specifically about the literal definition of the word. - -24 -00:18:44,580 --> 00:19:09,180 -Wes Bos: So that should come out q2 2019. Apparently, that is something that needs to land inside of react before we can get suspense in. So pretty exciting. next couple of next six or so months in, in react world, I think that it's going to it this is not going to break anything that you've done before. But just just like hooks did to, to our components thing is going to make the developer experience much nicer - -25 -00:19:09,450 --> 00:19:57,240 -Scott Tolinski: word. So all these things combine like Voltron to form what is the future of react, and we are they're gonna form like, Voltron, I believe is the Wu Tang lair. But yeah, so we are looking at a very bright future of react data fetching, loading, making our apps fast, smooth, available to the user in a way that makes them happy. These are all great things. And you should be very excited about all this stuff. I'm very excited about all this stuff, as I always am, I suppose. But yeah, keep looking out. Check out the React blog posts, check out the the documentation. Keep in mind that this stuff, again, like we mentioned is not exactly finished. You know, you can see some of the launch dates are mid 2019, for suspense for data loading. And, again, you just want to keep that in mind when looking over any of this documentation. - -26 -00:19:57,420 --> 00:20:19,890 -Wes Bos: Yeah, the ones that comes out, we will start to see See the same thing with hooks hooks has been out for a couple weeks now or maybe even a month. And we're just starting to see some really neat implementations of it. So probably a month or two after suspense drops. We'll see what the community has done with it and we'll probably have a full show on it. Just explain what it is and the different ways that you can use it. - -27 -00:20:20,130 --> 00:20:33,240 -Scott Tolinski: Absolutely. I look forward to that. I look forward to using suspense. I look forward to learning more. I look forward to getting flamed on Twitter for the things that I said that were incorrect in this. fixing it for the next one, but I appreciate it. - -28 -00:20:33,930 --> 00:20:39,560 -Wes Bos: Awesome. Alright, that's it for today. Thanks for tuning in and we'll catch you on Wednesday, who's face - -29 -00:20:41,550 --> 00:20:51,320 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax128.srt b/transcripts/Syntax128.srt deleted file mode 100644 index 1d5fd9a3c..000000000 --- a/transcripts/Syntax128.srt +++ /dev/null @@ -1,316 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:09,000 -development treats out there, strap yourself in and get ready to live ski - -4 -00:00:09,000 --> 00:00:10,650 -and West boss. - -5 -00:00:10,679 --> 00:00:57,390 -Wes Bos: Welcome to syntax. Today we're gonna be talking all about how to find freelance clients. This has been one of our most requested episodes in the last couple of months. People want very tangible examples of where do I find clients? And what are the tactics that I can use to convince them to hire me. So that's what we're gonna be doing today, we're gonna hopefully send you home with some tasty take home treats a doggie bag, if you today's episode is sponsored by Log Rocket, it's going to do all of your error and exception tracking as well as Stackbit, which is going to give you themes for your jam stack based website. We'll talk about them partway through the episode with me today, Scott klinsky. How you doing Mr. szalinski? - -6 -00:00:57,570 --> 00:01:25,680 -Scott Tolinski: Hey, I'm doing good. Doing super good, ready to go. Ready to get this week going. I'm starting to record my next series, which for all of you view fans is going to be right up your alley. So keep your eyes open for that. I'll probably do a little bit of announcements on that in the next week or so. But yeah, no, I'm just ready to go. I'm ready to kick things off a little bit, do some coding, do some recording and all that good stuff. And I'm ready to talk about freelance clients. So let's get into it. - -7 -00:01:25,860 --> 00:03:01,860 -Wes Bos: All right. So this question was from an Andreas trattner. And he says, I'm a back end developer with four years experience on working in Europe, and consider moving towards freelancing and contracting. However, I find it difficult to discover quality opportunities, any tips you can share on how to strategically get projects. So I thought this was an interesting one as well. You know, there's a lot of people out there who sort of look at the freelancer, the contractor, and we should say right now, a contractor and a freelancer are we refer to them as the same thing. Sometimes a contractor is someone who just does only one client for like six months, or as a freelancer tends to have many, but that could that could go either way. So we started to say them, I refer to myself as a contractor just because it sounds better. And I think you can get higher paying jobs as a contractor. But a freelancer does kind of the same thing. So there's a few categories that you can use to find freelance clients, we should say like, I was a contractor for, I don't know, 10 years or so. And Scott does has done quite a few different contract works as well over the years. So there's a few different categories, and we're gonna break them down into tangible things. I think the main thing that we have today is that there's no like secret trove of work. You think people when they ask for these things, they just want us to be like, Oh, well, let me tell you about this wicked website that nobody knows about. But there's thousands of amazing high paying clients, and you're going to get it. And that actually does exist. But you have to cultivate that little pond yourself. - -8 -00:03:01,919 --> 00:03:59,580 -Scott Tolinski: Yeah, there's no hidden IRC room here where you have to enter a password and you get in and there all of a sudden, like here, here's your 10 best clients you've ever had. I think also the one of the misconceptions about some of this stuff, too, is that there's one way or one good way of doing it, there's not one good way or the best way to find freelance clients. There's several, and I'm by several, I mean tons of different ways that you can market yourself to get freelance clients. And these again, are, like I said, they're going to be varied in different sort of ways. So you can pick and choose, you can do all of them and cast a very wide net, or you can just do one of them and see if that works for you. But again, I think people often think of finding freelance clients, there's one way to do it. There's one way to get clients. No, there is so many different ways. And I know you and I have both experienced probably a lot of these different ways over the course of our careers already. - -9 -00:03:59,970 --> 00:04:36,660 -Wes Bos: Yeah, these are everything that we have here. We're going to go through relationships, display of expertise, visibility, maintaining relationships, and other tactics. So we've got all kinds of different things under each of these, but these are all things that I personally have done myself. I would say I was a extremely successful Freelancer when I was at it. I was charging. I think by the end of it, I was like 150 us an hour. I was booked solid. I had lots of people asking if I could do work for them. So I would say that was a successful career in being a contractor and these are the tips and tricks that I've used to actually find well paying clients - -10 -00:04:36,750 --> 00:04:39,000 -Scott Tolinski: Nice. Yeah, some good horn tune. - -11 -00:04:39,830 --> 00:04:41,510 -Unknown: haunting horn - -12 -00:04:41,670 --> 00:04:44,570 -Scott Tolinski: tooting your according to your own horn. - -13 -00:04:44,630 --> 00:06:02,970 -Wes Bos: I'll toot my own horn there. I did. Alright, so first of all relationships. I think this is probably the biggest one. Yeah, because the best paying gigs always come from relationships, the best paying stuff, the best, the most the funnest gigs that you get They're never posted to a job board or something like that, because they are all done through relationships. So I think that this is probably where you should spend most of your time. So relationships with people, but who, so let's break it down first person is other developers for when they need help. So this is where I initially got my start is that when I lived in Toronto, I got to know a lot of the other developers that were in the same scene as me. And I met them through meetups and conferences, and Twitter and IRC at the time now would probably be the different slack rooms, just making friends with people who have similar interests you. And by knowing other developers, often the developers are the first people who need to ask for help, because they say they're the ones that give time estimates for something. And if something can't get done in amount of time, or a developer's tied up and a client project needs to be done before they're available, they will often ask their developers, hey, do you know anybody who would have a similar skill set that would be able to do this project for us? - -14 -00:06:03,150 --> 00:07:54,930 -Scott Tolinski: Yeah, building these kind of relationships is going to be difficult. Actually, I should state that maybe most of these things might be difficult for you introverts out there, because a lot of these things will involve putting yourself out there in a way that's a little bit more socially forward than maybe you're comfortable with. And as a somewhat of an introvert myself, I'm not entirely in that camp. But I am pretty shy around people, sometimes, I have had a hard time just reaching out and just just talking to people like that, but you need to practice and you need to start a little bit here and there. And maybe it's easier for you to do so online via slack rooms, or something like that, but finding these other developers and other people in your community, or maybe Hey, it's the person you're sitting next to at some sort of event, and just trying to strike up a conversation without the intent of even building a relationship there. But just with the intent of practicing talking to people, because to build these kind of relationships, you do need to work at it a little bit, especially via, you know, your your personal skills there. And those skills are something that sure enough, you might think I'm an introvert, I can't do it. No, you need to just practice some of that stuff a little bit. And again, I don't think anybody is going to follow you. If you're shy, talking about work. It's not about that. It's more about your skill, and what they know you can do and know you can get the work done. One of these nice little tips I have here is if you have a friend who's friends with somebody who you know gets a lot of work, right? Maybe you don't get any any work. Maybe your friend themselves has a full time job, but they have a buddy who's crushing it in the freelance game, they have a ton of clients. But you could ask your friend, hey, is it you know, I know your friend has a lot of friends, or a lot of clients, is there any way you could put me in touch with them? And I could just put myself in front of them to say, Hey, I'm looking for work? And potentially, could you toss me some of your Yeah, the stuff you don't want to do? - -15 -00:07:55,110 --> 00:10:05,490 -Wes Bos: That was huge for me when I got up and running. And when I was too busy, it was hard for me to find reputable people who I could recommend clients to because I would get all these emails and I could only do a certain amount or sometimes there wasn't a good overlap between the type of work that needed to be done. And I would say no, sorry. And then the immediate question after that would be okay, who can I talk to? And then it's like, oh, that like, this is one of my most hated things. Yeah, people always make me play like like a matchmaker hiring manager. Yeah, I have to play matchmaker with these people and introduce, and it takes up a lot of time, and you're putting yourself out there. And I've had people come back and say, Hey, this person you recommended, totally dropped the ball, and then no good or like, what happened to your buddy? And if you can be super reliable and good at what you do, people are happy to have like a list of like two or three people to say, Hey, I can't do it, but contact these people. Yeah. One other tip I have here is I mentioned conferences. And as a freelancer conferences are sometimes just off the table, because they're expensive as hundreds and hundreds of dollars to buy a ticket, you have to get a often get a flight and things like that. And you could be out and a couple grand before you're done, you're done the conference, and that maybe just isn't in the cards for a lot of freelancers. But I know what a lot of people do is they volunteer to get in at conferences. So often conferences will pay for your conference ticket or pay for your hotel and your conference ticket or depending on what kind of conference it is. And that's great, because all you have to do is sometimes it's introducing people on stage, sometimes it's just holding up the 30 minute, 30 minutes, 20 minutes left, to each of the speakers. Sometimes it's doing the registration desk and by having those jobs, you get to know the like the really important people, the speakers at the conferences much better than than just the attendees is often people just hanging out in the speaker room with me who are volunteers and you get to know them. So I think like I know smashing cough does that I know fitc here in Toronto will often do that. And I think that's a great way to get in because you get to meet hundreds of people in the industry for free, and you also get to attend the conference to for free. So I think that's a good option. - -16 -00:10:05,820 --> 00:11:32,039 -Scott Tolinski: Yeah, great option. And we'll get into that a little bit later in the episode. But Ted, typically people who are that visible, are usually getting somewhat amount of requests for work even without asking for them. So being around or experiencing or just being able to connect with those types of people is going to be hugely beneficial to you. Now, the next one we want to get into is going to be more of these people who are working inside of other companies. So we have two examples here, which will be project managers and office managers, typically working for both companies that have contract work available, as well as maybe agencies that have a per project freelance basis stuff available as well, I've experienced both of these, both working for agencies as well as companies who are hiring on people for short term time or project based stuff. And typically, when you have a project and you need extra help on it, because so many times we run into deadlines that they need an extra hand here or there, you know, these people who are managing a project, or even better the people who are in charge of the overall project, they're going to flip through their their Rolodex, for those of you young uns who don't know a Rolodex is they're gonna flip through their their virtual Rolodex, so to say, and they're gonna, you're gonna pick the people that are visible in their brains so that people they remember reaching out to them are the people that you know, that are going to be able to do the work. And they're going to hire on these people for contract or freelance work - -17 -00:11:32,279 --> 00:12:28,710 -Wes Bos: of the office manager, one I found particularly helpful, because the average manager, if you don't know is just the person that manages the office, they sort of do everything around the office. And they often know absolutely, everybody. Yeah, because that's their job. They're usually the first point of contact at a specific office, they know what's going on with all the different projects and whatnot. And they often move into other roles, once they've been there for a certain amount of time. And by getting to know those people, those people are always at meetups, they're usually the people welcoming, or they're usually the person Well, I like doing like, Hey, everybody, thanks for coming out to this meetup. And this is our office, by the way, we're hiring that's often a an office manager, who is sort of facilitating these meetups, and if you can get to know them and say, hey, look, I'm a freelancer, if anything ever comes up, let me know, I'll shoot you an email or whatever. They are very well connected people to know at a specific company. - -18 -00:12:29,159 --> 00:13:43,980 -Scott Tolinski: Yeah, absolutely. And even, you know, to add on to the list of this developers at this company, I mean, we talked about developers, the other developers in the section above, but developers who are working in an agency or a place like this, we often had situations where we needed extra hands on deck. And even if the office managers or project managers didn't know, somebody, they usually came to us and said, Who do you think would be perfect for this? And oftentimes, we would say, Oh, hey, I met this, this person at a meet up one time, who said they had the ability to do this. And this is exactly what we need. Let's bring them up, see if they can do it. So definitely reaching out to people who work in these things. Now, you might be wondering, Well, how do I get in contact with some of these people, I found, personally, the best way that we always hired out for freelancers or anything like that was contacts through people that used to work with us. So if we used to work at some place, and we knew that somebody had access or knowledge of this code base already, we would reach out to them and say, Hey, do you have any freelance bandwidth you can take this on. So make sure to keep in contact with some of your older employers, if you're on good terms with them. And you could potentially get tossed some freelance work that way, or even just let your previous employer know that you're looking for freelance work, because they might keep you in mind next time they're looking. Next up we - -19 -00:13:43,980 --> 00:14:58,919 -Wes Bos: have I'm going to group these together is entrepreneurs and venture capitalists. This is where I got a lot of my early work was just going to demo camps. This is where different entrepreneurs will often like pitch their their startup ideas, Facebook marketing groups, I'm part of a couple for email marketing. And there's always people asking, Who can I hire to help me wire this thing up? Or who can I help? Who can I hire to build a custom integration with getting data from this thing to this and because these marketers are often just stringing things together with Zapier, and sooner or later, they're gonna realize like, oh, that this doesn't work as well as I had hoped. I need to hire somebody to build a custom UI or a custom integration, something like that. So like getting outside of just the developer, designer, marketer world and getting out into the entrepreneur world. Also, the entrepreneurs are fairly well connected, because that's part of their job is just having coffee with people and whatnot. I can tell you that I've had a couple situations in my life where I was offered like a part of a company. What's the one thing about entrepreneurs they'll want to pay you and they'll just want to give you part of a company and those companies sold for millions of dollars and I kicked myself for not actually taking it but hindsight is 2020 I guess - -20 -00:14:58,980 --> 00:15:26,370 -Scott Tolinski: yeah, but I'm no flipside of that Eric, who who's a dev for level up, he worked for a company for like half a year to a year. And that was just like, they kept dangling that equity in front of him like, like, we're giving you more equity. And then sure enough, the company was never worth anything in the first place. So yeah, you know, like, totally, you know, lost a ton of money on that one. And, you know, just just pay me, you could just pay me How about that. - -21 -00:15:27,299 --> 00:16:42,779 -Wes Bos: The other one is venture capitalists. So these are the people who actually invest the money into these early stage startups. And I've worked with, I think, three different VC companies. And these are usually just a couple people who have some, some money to invest. And they have dozens of companies under their belt that they've given 10,000 to $100,000 of their money to start up a company. And the the smaller VC firms are usually very involved in the initial product development. And because of that, they will often be talking to the founders and say, okay, you you need to build this specific feature. I know, Wes, I think he would be able to help us out in that specific use case. So yeah, how do you get introduced to these people, they're hard people to get in touch with, obviously, lots of people want to talk to them. I found that like, demo camps introductions was my big one where I was working with one of the companies, I was in their office, and then I actually met their, their, their VC people. And then from there, they introduced me to other VC people. And that's the thing with these relationships is like once you're in, and once you have shown yourself to be good at what you do, then the recommendations just start flowing from from there on out. - -22 -00:16:42,990 --> 00:17:06,900 -Scott Tolinski: Yeah, and I think you do need a bit of reputation as being reliable at that point. Because Yeah, these people aren't going to recommend somebody who they it's like a total unknown for them. So whether or not you can prove it via friends of a friend or relationships or straight up just based on your previous work examples or things like that, this one's gonna be tough if you don't already have any prior work, because they're gonna want to see some stuff. - -23 -00:17:07,310 --> 00:19:00,930 -Wes Bos: This is funny, I'm trying to turn to move into a sponsor here. And we're talking about Stackbit, which is a new company that provides themes. And we actually met ohad, who was an investor in Stackbit, at a conference and and because, like the good investors that will actually go to the trade, like, they'll go to a tech conference just to meet the right people. Because as much as we want to meet these, like VC people to do work for them or to get funding, they want to meet the smart developers that can help bring their product to fruition. So we just met randomly at jamstack cough. And he said, Oh, I would love to sponsor the podcast. So that's just another perfect example of, of how to meet these specific people. So what is Stackbit? Stackbit is going to give you themes for your jam stack based website, a jam stack is JavaScript API's and markup these are these static sites that we've been talking about a lot lately. And it's kind of cool, because instead of just providing a a theme, for one specific one, they're attempting to make these themes that will work with all of the different static site generators, like yeah, Gatsby and Hugo and Jekyll. And all the different headless CMS is that are out there. And it's pretty cool. They are adding new CMS and new static site generators on every single sprint. And they want syntax listeners to beta test it. So if you want to get in early, go to stackbit.com, forward slash syntax FM, and you're going to get in early with Stackbit and be able to try it out. This is pretty interesting. The theme world and I think even as a developer, the theme world sort of just blew up when with with WordPress, and I'm very curious to see if that happens again, in the jamstack area as well. So check it out. stackbit.com forward slash syntax FM Thanks so much to Stackbit for sponsoring. Nice. - -24 -00:19:00,960 --> 00:19:30,510 -Scott Tolinski: Yeah, thank you. I think that's such a cool space. I'm really excited to Yeah, how Stackbit evolved here. Cool. So let's get into the next one. Which is certainly how I think we've both experienced a lot of growth and our freelance sort of contacts coming in, which is the display of expertise, right? This is showing the world that you know, things I know stuff. So I'm gonna I'm gonna make sure that people know I know stuff. So therefore, people are going to come to me, so that I can do - -25 -00:19:30,510 --> 00:19:33,000 -Wes Bos: like, you know, stuff, right? Yes. - -26 -00:19:33,000 --> 00:20:13,770 -Scott Tolinski: Okay, make it you got to wear the T shirt that says, you know, my other car is a div or something. I just made that up on the spot. How about that display of expertise, okay, so this is one of those ones where again, you want to make yourself look like you know, stuff. Because if people think you know, stuff, like we just said, you're gonna get gigs and that's just as simple as it is. People are gonna come to you, they're gonna, they're gonna email you, they're going to find you any way possible. They're going to make sure that they reach out to the person that they say When they think of JavaScript, when I think of JavaScript, I think about Wes. So if Wes, well, he probably, you know, can do some work for me. And if he can't, maybe he knows somebody who can do some work for me. So they're going to reach out that way. And I'm sure you've experienced that as well. - -27 -00:20:13,920 --> 00:22:03,360 -Wes Bos: Yeah, absolutely. The way I did this, mostly was speaking at local meetups. So I would work on something fun, like I would make a webcam demo. And then I would reach out to local meetups, or they would come to me and say, Hey, do you want to speak about it meetups are always looking for people always speak Yeah. And you get yourself in front of 1525, sometimes even more local developers, and you say, Hey, I made this thing. Also, I'm a freelance consultant, if anyone would like to work with me, I'd love to hear from you just drop in a little line like that, that puts something in their in their mind and says, oh, something like that is going to happen. Or I know of West to do that thing. Another thing I did was, I would volunteer on weekends, once every I don't know, three or four months. And I would teach a workshop for ladies learning code, which is now Canada learning code. And there's tons of these all around the world. And it was amazing. It was just a huge treasure trove of project managers, marketers, people who worked in the industry. But were not coders themselves. And were interested in either becoming a coder or they just want to know a little bit more about the technical side of their business. And I got tons and tons of work from that, just because if you stand up there and teach a workshop for eight hours, you probably know what you're talking about. And I was specifically teaching a WordPress workshop. So people would come that wanted to learn WordPress that likely had WordPress in their company, and needed to maybe hire somebody for WordPress, and it was like, perfectly aligned. And it's amazing, because you're helping this amazing cause at one time. And also, it's just extremely beneficial for your business to run these these workshops. So yeah, reach out to your local, not for profit that does these coding things, because I think you can, you can get a lot from there. - -28 -00:22:03,420 --> 00:23:49,800 -Scott Tolinski: Yeah, and these are again, just like some of the other things that we were talking about with putting yourself out there, it takes a lot to put yourself out there to go ahead and speak in front of people in general. So speaking in front of a meetup, in my opinion, is a great practice way for getting in front of larger and larger audiences. Because typically, some of these meetups, I think the largest meetups I've ever been to, it's like maximum of like 150 200 people. And that's a huge meetup. Most meetups are pretty small, like upwards of, you know, 20 to 50, some people. So that's a pretty low stakes, if you put yourself out there and talk about something that you know, about for 15 2030 minutes. That's not that that's not that hard. And one of those things is if you sign up for it, you sign up for it, get just do it, you put yourself out there, it's gonna pay off, it's absolutely going to pay off. So it's a good way to practice this thing. And speaking at like you said, workshops, workshops, is a bigger step, conferences is a bigger step. But in the end up is a nice little small step, and it's gonna put you out there a little bit. Next one is going to be for those of you who might not feel super comfortable putting yourselves out there and that way, but you are confident in your code skills, which is going to be working on open source. Now there is a ton of open source projects that are always looking for help, you can put yourself out there and work on these things, you'll often get listed as a contributor, your little face will be on the repo, if they're, if they're wanting to advertise who's working on the project, which a lot of projects do. So you'll want to make yourself aware that you're working on this stuff, again, you This doesn't require any social standing up in front of people doing those sort of things, recording your voice or anything like that. It's simply working on code. So open source projects is a great way to put your name on something and put yourself out there as an expert. - -29 -00:23:49,920 --> 00:25:04,920 -Wes Bos: Yeah. And I think even like this doesn't mean you're going to come out with a library that's going to be wildly successful. Now it might be like the Lewis who works on my course platform, doing react and node and all that. I met him in the next jazz slack chat room because he was helping me try to figure out my own problems. And I was just like, Hey, you seem to be smart work for me. And not like like he didn't create next jass. He didn't write some amazing blog posts for didn't have a YouTube he was just like extremely helpful and knowledgeable and was able to display the expertise where I thought like, wow, this is the type of person that I need to help me out. So don't think that you need to make your own open source frameworks. It might just be helping posting guides, updating documentation, that sort of thing will get noticed base. People like me and Scott, who sometimes want to just hire someone who is knowledgeable. We're not necessarily looking for someone who is a rock star and super well known because they're probably super booked up or they're probably extremely expensive. We want to find these little hidden nuggets of people who are extremely smart and and are able to help you. - -30 -00:25:05,189 --> 00:26:05,430 -Scott Tolinski: Yeah, absolutely. Another good way that you can put yourself out there is the way that I did initially, which is starting a YouTube channel. And this one does require a little bit of overhead in terms of having equipment to make it worthwhile. But I started recording content simply just to help people out. And let me tell you level up tutorials, the YouTube channel, the fact that it had such a large visibility, not only got me more freelance gigs, but it also got me some really excellent contract gigs. And full time gigs. Anytime I was in a job interview, seriously, I just pull up my YouTube channel and watch the interview ORS jaw drop, as you know, 100,000 followers on YouTube. Oh, wow. So this is a big one. And you know, there's also the ability maybe if you want to start a podcast, I know everyone's starting a podcast, there's like 10 million podcasts. But putting yourself out there. And that sort of the way away, you're actually giving people value is going to make yourself so much more visible. And it's going to again, up that flow of new clients. - -31 -00:26:05,489 --> 00:27:27,960 -Wes Bos: Another kind of interesting way, this is more if you want to get the the high end clients, I think of somebody like Harry Roberts, who's CSS wizardry, CSS wizardry, on on Twitter, and he offers these like CSS performance reviews, where he was tweeting the other day, how he like helped the performance of his website was crashing and how he fixed it. And that sort of informal performance review just on Twitter or, and I think he also just makes these actual performance reviews for companies, sometimes they allow them put them online, that's probably a little bit later on in your career. But that's the kind of thing that you can offer, whether it's performance reviews, or accessibility reviews, or I would often do like a WordPress PageSpeed reviews where people would say like, WordPress takes 45 seconds to load the homepage, like, what can you do? And I would say, okay, like, Look, I can, I can come up with just like a, like a bullet list of things you could do, or I can go in and fix it myself. Or often people will email me and say like, hey, Wes, can we just like, pay you for two hours of your time you we can tell you how we're going to approach building our application. And just let us know what you think and things like that. That's just a great way to position yourself where these these huge companies are no problem paying a couple hundred dollars an hour for this type of thing when you are such an expert in this one specific very small area. - -32 -00:27:28,019 --> 00:27:58,950 -Scott Tolinski: Yeah. And then another way to if you're, if you're not wanting to put yourself out there visually, audio, whatever you can blog, blogging is just as good as a lot of these things. And you get the added benefit of your blog showing up in Google somebody's searching for, oh, I really can't do this thing on WordPress. I've been struggling with it for hours. Let me Google it. Okay, I found a blog post telling me how to do it. But I still don't understand it. So you know what I'm gonna do? I'm gonna go ahead and email that contact that's in the contact form of that blog and say, Hey, you, I'm trying to do this thing. Can you just do it for me? How much would that cost? - -33 -00:27:59,309 --> 00:28:33,150 -Wes Bos: Yeah, I can't tell you how many times I've met emails, people being like, Look, I'm at the end of my rope right now. I'm ready to do it. Can I just hire you for an hour, and you can come in and fix this sort of thing? Yeah, I kind of wish that I did that more. When I ran upon issues, where it was a quick little code fix. I just throw that up on my blog. I think maybe maybe that should be my my goal for this year, something like that is just start posting smaller little things on my blog like that blog post doesn't need to be this huge thing. It could just be six lines of code. I ran into this today, it was a really easy fix. I have here this, - -34 -00:28:33,659 --> 00:29:20,880 -Scott Tolinski: I had I hired somebody off the meteor forum, because I could only get SSR. Working with art, I get to two of the three things working SSR data fetching and code splitting. with Meteor and Apollo in react, I could only get two of them working. And I was like, why can't I get all three of these working. And this guy came in and did it for me. He spent an hour doing it. I paid him 200 bucks. It was the best 200 bucks I ever spent. Because seriously, I had spent so many hours plugging into that. And I wouldn't have figured out the answer. He actually ended up having to write his own patched version of react loadable to get it to work, but it was like, thank you, thank you so much, that that is exactly what I needed. And that's exactly the type of person who is going to find you in those type of situations. - -35 -00:29:20,969 --> 00:31:28,320 -Wes Bos: Next one, I think this is along with relationships, I think the visibility, and this kind of goes into the last one of displaying your expertise as well if visibility is the most important, because if people don't know that they can hire you. Or if people think that maybe you're out of their league for a specific thing, that's that's not a good spot to be in. So one thing that I always aggressively sort of battled against was being the guy who was always too busy, because no one wants to hire the guy who's too busy, who barely has time for you. Someone wants to hire someone who's going who's willing to put in the time. So letting everybody know what it is that you do and that you have availability is extremely important in that way. might just be as simple as saying, Hey, I have availability. Yeah. And I'm looking to, like, it's such a simple thing. But most people forget to do it, where they're like, I'm writing all these blog posts, and I'm putting off all these like mixed signals and things like that, where you maybe just should straight up tell people. This is this is what I'm looking for. So how do you do that? I always told my students a big one is just like posting on Instagram, posting on Facebook, what it is that you're doing, whether that's a silly cup of coffee at a coffee shop, hashtag be your own boss, hashtag work for yourself. Hashtag remote life, as stupid as those are. What that does is it lets your extended network know, oh, there's code on the screen. That's what they do. They write code. They work for themselves, because at some point, your mom's uncle's friends, cousins, birds, dogs nephew is going to be running a company and say, I need to hire someone. Does anyone know someone? And I guarantee you I did this once I was teaching. I was teaching freelance at hacker you and I just searched in my search to my Facebook for like, hey, Wes, long time no talk, or, hey, Wes, are you available for hire, and I showed them like 15 different people who I hadn't talked to in like eight years. But then they said they always they see everything I'm posting. And they knew that they could reach out to me and say, Hey, are you available for hire, and I got some really, really good jobs of like, third or fourth connections through referrals like that. - -36 -00:31:28,470 --> 00:33:06,180 -Scott Tolinski: Yeah, it's huge in posts on every social network posted on LinkedIn posted on Facebook posted on Twitter, one of the cool things that I see a lot is when you know, visible developers with a lot of followers will retweet somebody saying that they need work. And then I'm sure they get a lot of work from those things. Because sometimes these things get passed around and really get put in front of a lot of eyes, you have to be the one to share to tweet it, initially, people aren't going to do it for you, you need to say, Hey, I'm available, I want to cast this big, wide net, and I want to catch some fish darnit. So we talked about this, a lot of these things with visibility, also go sort of hand in hand with the display of expertise. Because if you are displaying your knowledge, typically you're putting yourself out there, right? You're putting yourself out there somewhere that you're visible, whether that is blogging, right, whether that is YouTube videos, or anything like that, you're actually making yourself available. Now the difference between just displaying your expertise, and making yourself visible in terms of picking a freelance client is the simple fact that you need to state very clearly, hey, I'm looking for freelance clients. If you want to work with me, please hit me up some of my favorite podcasts, I listen to our personal finance podcast, and a lot of them they'll be like, well, we are money managers. And if you need a money manager, well give us a call. And so they've already displayed their expertise. By having a podcast by teaching you something, they've already put themselves out there and made it visible by being you know, a popular podcast. And then they're saying, Hey, I'm available for work. So come hire me. And I'm sure these people get swamped with stuff based on the levels of potential popularity, but just the met the fact that they're saying that they're available, - -37 -00:33:06,180 --> 00:33:56,400 -Wes Bos: one of my favorite podcasts as well. It's called Canadian couch potato, where the entire podcast is about showing you how you can invest yourself. His entire mantra is how showing you how to do it yourself. And then they also say, oh, by the way, we can do this for you, too, if you want to their entire business model. Yeah. And it's amazing. Like, give it away for free show people that you're an expert, and you clearly know what you're doing. And then there's a small percentage of people who don't want to do it themselves and are gonna go off and want to hire you. So that visibility one is super important. I know it doesn't come easy to a lot of people. For me, I just can't stop myself from posting stuff online. So it's just like second nature. But for some people, they really have to say like, oh, like, Okay, get the coffee cup, put it beside the laptop. You know, like, gotta go order some stickers from red bubble to make it look like I'm an elite hacker. So I like that, - -38 -00:33:56,400 --> 00:34:01,920 -Scott Tolinski: you know, elite hacker sticker and just put it right on there today. Elite hacker sweatshirt. - -39 -00:34:03,000 --> 00:34:15,540 -Wes Bos: But you just got to get that new developer starter pack of the stickers with a cup of coffee. What else? The developer coffee shop starter pack. cobalt to VS code theme. - -40 -00:34:15,810 --> 00:34:22,400 -Scott Tolinski: Yes. Yes. All of it. The syntax podcast subscription that there we go. - -41 -00:34:22,440 --> 00:34:40,500 -Wes Bos: That's true. If you're listening to us right now, take a picture of you listen to the syntax podcast and post it on Instagram. Hashtag dev starter kit dev started. Hashtag dev starter kit and tag me. I'm at Wes Bos and tag Scott. He's stilinski sto l i n s k I - -42 -00:34:40,500 --> 00:35:52,260 -Scott Tolinski: nailed it that's on the like I said sto Well, I am this guy. I just bought that domain that the other day. I'm pretty psyched about it as Husky dev because my current domain Scott to Lynskey that has three T's in the middle, and that always throws people off. So I'm excited to try to get rid of that it's super annoying. Another one of these ways you can make yourself more visible is inside of slack channels. I have a Slack channel, Wes has a Slack channel for people who've purchased his stuff. And I always let me say I always prioritize people in my Slack channel over other people, and I get a lot of requests for freelance work. So if you're in my Slack channel, you're giving people advice you're showing up there, I post some work in there. And if I know you can do it, I'm always reaching out to those people first, because I know those people are going to do a good job, or I have some sort of more personal connection to them. They're not just some randoms or something like that. These are people I feel like I know, because I've been talking to for a while now. So like candles are a great way to make yourself visible. And there's a lot of slack channels. I know there's a even in Denver here, there's one called Denver devs. And there's people posting jobs and stuff there all the time or need for work or stuff like that. So find these slack channels and show up there and just make yourself visible. - -43 -00:35:52,380 --> 00:36:14,940 -Wes Bos: Yeah, that's I get job postings in my Am I react or my node node all the time, just because it's kind of cool, because people have taken my courses are in there. And they'll be able to hire people who they know have taken like the same course that they've taken. So they're sort of on the same page with their their skill level and how they approach things. It's pretty neat to see that super neat. You know, what else is neat, Scott? - -44 -00:36:15,110 --> 00:38:12,840 -Scott Tolinski: Ah, my desk, my desk is super neat right? Now, you cleaned it off this morning. No, I know, it's super neat is my error log. Why? Because I use Log Rocket. Log Rocket is an excellent service that allows you to better find out how your bugs happen. And I use Log Rocket all the time when my standard ways of sort of trying to solve bugs just won't work. Because Log Rocket gives me a session replay. It's a video of a pixel perfect replay of what the user saw when the error happened. And let me tell you, this thing is so so useful, because Sure, error logs are great. And all those things where you can see what's happening with a bug, that's all great. But when you have an actual video showing you how to do it, and what happened, it totally takes all of the guesswork out of it, then you can go try it, reproduce it yourself, you can see the error log, you can see the network activity, maybe they hit some sort of weird network bug, you can see all of the stuff. Not only that, but you can even see the Redux store. And it integrates with all of the things you know and love, such as react Angular, just normal JavaScript, Ember view, j s, and it integrates with all of the bug tracking tools which you use already. Things like century bugsnag, robar, New Relic, JIRA, Zendesk, intercom, drift, Salesforce, Trello, GitHub, the list goes on and on. So Log Rocket is such a cool product. And we're so happy for them to sponsor because it's so incredibly useful. So check out Log Rocket at Log rocket.com, forward slash syntax, sign up and get 14 days for free, you're going to want to do that proof is in the pudding, check it out at Log rocket.com. Cool. So let's get into the next section here, which is going to be other tactics. And this is going to be other tactics to gain both visibility, notoriety, as well as put yourself in front of people who are going to be able to get you those gigs. - -45 -00:38:12,920 --> 00:40:04,320 -Wes Bos: Yeah, so the first one here is SEO search engine optimization. When my wife was a print designer, or graphic designer, we live in Toronto, I built her website, and I built it in very clean HTML. And I'm not sure exactly what I did. But she came up number one, when you googled Toronto, graphic designer, nice, and she got tons of people emailing her saying, Hey, I'm looking to hire someone. Because that in a lot of cases, that's the first thing someone will do, let's just type in Toronto graphic designer. So she got some pretty good leads out of there. But I will say, I don't even know if it was all that worth it. Because she got a lot of riffraff contacting her people that had no idea about the industry. People had no idea how much things cost, she spent a lot of time on phone calls, where it ended up to be just like people like oh, no, I you who we have to pay you. And it was really interesting, because we got a lot of emails from people being like, how did you get her number one for Toronto graphic designer, and then we got a lot of emails from just random people that probably shouldn't have been contacting her in general. So that's one way. Also specific technologies. I've gotten a lot of work. I just used to keyword stuff my my page, I would just list off every tech I ever worked with. And the reason why is because I remember having jQuery UI on my website, and I got a really good well paying job because he said they had me and say, Hey, I see you work with jQuery UI. Our thing is built on jQuery UI. And we need some help working on it and just to the person who's hiring you, especially if they're not technical. Seeing the exact technology that they work on in your list of skills or in what they've googled for is really important because it puts them at ease. They have no idea that it's just JavaScript at the end of the And you could probably pick it up, they much rather hire someone who has that exact skill. - -46 -00:40:04,460 --> 00:41:55,530 -Scott Tolinski: Yeah, I think some of these, these other tactics here are going to land us into territory, where the work might not always be amazing that's coming in or the potential work. So some of these things, you do need to be decently good as screening, which is the problem, because a lot of these tactics are going to be coming in handy when you are just starting out, and you don't maybe have the network, right, because once you have the network, you get it all through referrals. But when you don't have that network, you try things like SEO, and Craigslist, which believe it or not, I have gotten some decent work off of Craigslist. But to be honest, I've also gotten so many headaches off of Craigslist, maybe most of the time, I've had a headache with a client, it's been off Craigslist when I was just starting out. So it's almost like a paradox, because Craigslist is is a decent place to find good work when you're just starting out. Because you don't have that network, you can reach out to people directly and try to win projects that way. But you need a huge training in LA want to say bullshit detection, and just like detection of who's a bad client. And unfortunately, you might not get that until you have the experience. So you know, for the most part, you'd stay away from Craigslist, and I would almost always recommend to stay away from it that said, Yeah, I have gotten some decent gains from it, I one time I got a gig that I designed a logo, and the logo ended up on the side of a building, and that logo is still there and a 3d logo. And I did their website, and it was a great client for many years of mine that I got from Craigslist. And to be honest, though, for every one of those you get, you know, maybe 20 off of clients, but you have to be able to look through that and and know who doesn't have the money, who doesn't have the the idea of what to do. And with those clients, I might almost always veer on the side of over not overcharging them, but charging them a lot. Because if somebody is willing to put up the cash, then you know, they're probably a better client than if they're not willing. Yeah, - -47 -00:41:55,610 --> 00:43:17,580 -Wes Bos: yeah, totally. It's funny the The more you charge, the better the clients get, which it seems like it Yeah, the more you charge, the harder it should be is, the more you charge, the easier it should be. But you can't just charge more. And all those problems are gone, you have to sort of go through the whole, all the steps that we've talked about going through here. Other things, putting a phone number up on your website works. So well. I can't tell you how many, how many things I got where sometimes you get these a type personality people who own these businesses, and they just want to pick the phone up and just say, Hey, can you do a website? And if you can say, hey, yeah, for sure. And we can talk about it, let's grab a coffee. And I realize, again, that's probably a very extroverted thing to do. But if you can get past that initial where they probably emailed 15 people, you're the only one that picked up the phone, you go to the top of the list, you schedule call you schedule coffee right away with that person, there's a good chance that you're actually going to be able to get that. So almost no one ever calls me, I have my phone number up on all of my course websites. And maybe once every three or four weeks, I get a call. Yeah, that's six or seven minutes long, right? Every now and then you get somebody who calls me in the middle of night with a problem with their code. And that's to be expected if you put your phone number up online, but it's not the scary thing that I think most people think it is. And I think it can benefit you more than it's gonna detriment you. - -48 -00:43:17,760 --> 00:43:57,030 -Scott Tolinski: Yeah, absolutely. Another place you can look for work is things like Upwork, or other job boards. Now, these are going to be tough, because you're going to be bidding against people. And chances are, the work is not going to be super well. It's not going to be super worth it. But if you're just looking for experience and portfolio stuff, you can bid against people on up work, it's gonna be tough, and you're probably not going to get a ton of work, but it exists. And there is good people fighting for good work and up up work every single day. So definitely check out those kind of places. I think most of the people who post on Upwork are serious. I haven't experienced Upwork as a freelancer myself only as somebody looking for work. But it definitely is the place is the place. Yeah, last time - -49 -00:43:57,030 --> 00:44:57,780 -Wes Bos: we talked about Upwork I got I got a bunch of tweets from people saying like, I make my entire living off of Upwork. So I definitely think that you can you can do that. But always feels weird to me relying you're trying to like build your own business and work for yourself. But then you have this crutch of like this outside company that you rely on for all your work like in my world. And this goes for everything, whether it's blogging on medium, or like building your entire business on another platform. It's not if the rug will get pulled, it's when the rug will get pulled. And then all sudden you have this big YouTube gate or people getting mad at medium or being like, it's not fair, my views are going down or they're taking a bigger cut and I have to feed my family and yes, if you build your business upon somebody else's business, at some point, you're going to get cut. So I always think it's much better to just circumvent these things. It might be easier at first but circumvent them, build your own Empire and then no one can really take that away from you. - -50 -00:44:57,930 --> 00:46:02,550 -Scott Tolinski: Yeah, absolutely. And again, if you're going to do some work on Upwork, maybe you can sort of move it out of Upwork. or maintain that network in a way, that's like moving it off of there. Don't always try to keep it on there. Because again, you're then you're you're tied to that platform and yourself to a platform isn't, as you mentioned, a great idea. Now, another one is local business listings. These are sort of maybe like an older school way of doing things. But I found even there's like a lot of local business listings online. Or you can just list yourself as like, here's a provider that's in Denver, who's a freelancer. So look for that stuff. Because again, it's going to come up on SEO, and you're gonna have people who find that and just think that, hey, this is the way to go about it and going contact you there. So I don't think these are like maybe amazing ways. I've been on several local business listings that I've never gotten hits from them at all. But you never know, again, cast a wide, wide net. And there's always the old fashioned mode of printing up some business cards and going in nailing them to some walls at some local places, coffee shops or breakfast places there, wherever you visit. Just make yourself visible, put yourself out there. - -51 -00:46:02,670 --> 00:47:11,490 -Wes Bos: There's this whole industry of businesses that are totally offline and they're all built on. Like I just think of like I've got friends that parents run mulch companies, and they they're just a mulch guy in the town and you need them or like there's like a Bait and Tackle spot near my brother in law's called rotten Ronnie's and rotten Ronnie's got, like you need. If you need any bait, you go to end like there's all these businesses that have been running like that forever. And at a certain point, they're going to realize, okay, we need some sort of online presence, we need an online ordering. because someone's going to come around and make a better a better experience for doing it online. Right. And these people who are there, they're running very successful businesses. I know, I've plenty of friends who have these have parents that have these like old businesses that have don't even have a website or just have a crappy little website. And they're millionaires. And at certain point, they're going to need some sort of online presence because it it's all moving that way. And I think going to I don't even know what they are. But just like Local Business Bureau, what are they called? Like? You have like these luncheons and these breakfasts, and - -52 -00:47:11,670 --> 00:47:13,650 -Scott Tolinski: oh, yeah, we're tying groups there. - -53 -00:47:13,680 --> 00:47:23,460 -Wes Bos: Yeah, networking groups and things like that. Like, that's, it's a very old way of business. But I don't write off old as bad. Yeah, that's where a lot of the money is. - -54 -00:47:23,850 --> 00:48:25,950 -Scott Tolinski: Definitely, definitely. Lastly, let's get into a little bit of maintaining relationships. Because oftentimes, we do work for a client, right, we've done the work, the work went, well, we've maybe gotten a referral from that client, or maybe we've never heard from them, and we don't reach out to them again. And that's missing an opportunity. Because again, we want to cast a really wide net here. And if that person knows somebody who needs something they might think of you. But they also might not think of you if you haven't talked to them in a year or two years or something like that. I have a perfect example of this, our realtor, who he's an amazing guy, he did such amazing work for us. And he's just relentless. He is incredible at maintaining relationships. Every few months, I'm thinking like every four months or so we get a handwritten letter from him in the mail. That's like a card and you open it up, and there's a Starbucks gift card in there. And it says, What is it saying like referrals are the best way that you can help me out or something like that, he makes it very clear that he's looking for referrals hard - -55 -00:48:25,950 --> 00:48:26,820 -Wes Bos: ask, - -56 -00:48:26,820 --> 00:50:09,990 -Scott Tolinski: it's a hard ask. And he does it really nicely, you feel like, oh, he gave me a Starbucks gift card, he's just checking in, he says something about like, I can't wait to see you and your family. Again, if you know of anybody who's looking, just reach out. And let me tell you if we ever need or if anyone we know ever needs a realtor. He's the first person we think of every single time, we don't ever even consider telling them to do anything else. Because we have such a great experience. And now I wouldn't necessarily say that for the realtor that we had in Michigan, because she never reached out. And you know, she was just okay, she was fine. But more importantly, she didn't nurture that relationship in a way after the fact that we constantly think of her. And in addition to that, if we give him a referral, he gives us $100 gift card to like the fanciest steak restaurant in Denver. And so every day, he's just so good at maintaining that relationship and making us think of him. It's just so thoughtful. So having this in your back pocket as a way to maintain relationships, what I would do is maybe even like put on a timer, like every few months or so to reach out to certain contacts. And there's apps that will do this for you. I'm not I can't think of them off the top of my head. I know. There's apps that will basically you'll say I contacted this person and then it will keep in like a record for you. Okay, you haven't talked to this person in this many months. You haven't talked to this person in this many months. Maybe you should think about just reaching out and again, reaching out putting a hard ask and just saying hey, ah, let me know if you ever need anybody referrals you liked our work together. If not, you know, whatever and you could even also be very personal with it too and just be, Hey, how are you guys doing? I hope you know everybody's doing well, maintaining that relationship in a way of more of like a friendship level as well. - -57 -00:50:10,080 --> 00:51:29,460 -Wes Bos: I think you did a really well there because I've certainly like I bought life insurance once and this guy hits me up every year and says, Who can you refer to me? Like he's just read the like, one on one sales book. And it just feels so grimy to me. And then I take the other way, yeah, and authentic. And then the guy who sells me health insurance, every now and then he sends me movie tickets as a thank you for referring someone. And every time I call him with a quick question, he remembers my kids names. And yeah, I think developers think that sales is the sort of like manipulation thing, when the sales really is is just maintaining good relationships with the people that it can be done very poorly or great, right. So like this past Christmas, I spent like quite a bit of time trying to find the best hoodie out there. And I got the best hoodie. And I got like a little one of my stickers that this is idle hands build nothing. I got it printed on these hoodies. And then I shipped them to I think about 50 or 60 people who had helped me out in some sort of significant way this year. And I felt like that was people say like, Oh, I love this hoodie. Thank you so much. And I feel like that was like a good way to just show people like I care about you. I care about our relationships. And thank you so much for for whatever it is that you had done for me this year. - -58 -00:51:29,580 --> 00:51:55,560 -Scott Tolinski: Yeah. And let me tell you, I love that hoodie. I wear that hoodie, 24. Seven, I wear it's like the warmers to do and I wear it all the time. And every single time I put it on, I think Wow, that was so nice of West to just send me that hoodie. Wow, I was such a great gesture I every time I put it on. And you know what i bet every single person you gave that to is going to have that same thought. So those kind of really thoughtful gifts, things like that. It's gonna go a long way for you - -59 -00:51:55,680 --> 00:52:32,490 -Wes Bos: totally. And I think if you are in the freelance business, you can afford to spend like those hoodies. By the time they're shipped. They cost me I don't know, 70 to $100 per person, which is not nothing. But I thought to myself, anyone who probably has who's helped me more than $500 Yeah, I do this for right. And if you get a referral for like a $12,000 website, a $2,000 website, you can afford to throw 80 bucks at something like that, or, or even just like a $20 Starbucks gift card is just shows that that relationship, I think gifts, especially like we talk about love languages, especially if that person's love language is gifts, that really goes a long way. - -60 -00:52:32,670 --> 00:52:58,680 -Scott Tolinski: It goes a long way. And it's Think of it as like a marketing expense. I mean, it's a marketing expense. It's your you're putting out there you're buying the so that when they think of somebody they think of you and that's it, it's a business expense. It's a cost of doing business. It's not necessarily Oh, I have to spend all this money to buy things. No, you're paying it forward so that those people are going to come back to you when they need anything. Do you have anything else here? Because I think we really nailed it on a lot of this stuff. - -61 -00:52:58,770 --> 00:53:07,200 -Wes Bos: No, no, that's that's really all I know about getting clients and it just comes down to being good letting people know what you do and having good relationships. - -62 -00:53:07,320 --> 00:53:30,930 -Scott Tolinski: Yeah, that's really it relationships, relationships, relationships, because once you have that work done, once you have those referrals done, you're just gonna every if you have this big network everyone's gonna think of you you're gonna get that work. Cool. So now is the part of the show where we do sick picks and a sick pick is just a pick where we pick something we talked about it that we're really liking feeling in life. So Wes, do you have any sick picks today? - -63 -00:53:31,290 --> 00:55:22,770 -Wes Bos: Yes, I'm going to sick pick my mattress which was pretty fun. So when my wife got pregnant, and whenever that happened six months ago, we thought like okay, let's get a king. Let's get a king mattress because we had a queen and we'd love each other but we'd like our space so I asked on Twitter like like what's the deal with these like mattress in a box companies out there and there's a Casper and Lisa and and all these ones and a couple of them reached out to me and said like hey we can give you one for review in exchange for like an honest review. So I said okay to the Canadian one. So unfortunately for most of you this you won't be able to buy this. But the Canadian one that I got was called an ND mattress and people had said like oh I don't know about these like they're probably too soft or they hold the heat and people think it's like like memory foam where it just like you kind of sink into it. So we've had it for what maybe four or five months now and we absolutely love it. It's like the perfect firmness for us. Which is weird because I think they only sell one firmness and people like have opinions all over the space. But for us it was the perfect firmness where you can still sit on the edge of it and not like fall off like it's not this big hunk of foam that you're going to sink into. And other people said that they get really hot where like you sleep on it and thing just a collects all of your body heat. And we haven't found that to be an issue either. We've been absolutely loving it. We actually bought another one just with our own money for a cottage that we just bought, so we're big fans of it. So if you are in the market for new mattress and you're Canadian, I would definitely give my thumbs up to this nd mattress. - -64 -00:55:22,919 --> 00:55:25,050 -Scott Tolinski: Nice. That's sick. Yeah, yeah. Do - -65 -00:55:25,050 --> 00:55:28,560 -Wes Bos: you have you tried on one of these mattress boxes things before? - -66 -00:55:28,620 --> 00:55:47,430 -Scott Tolinski: We have a Casper in our guest. Yeah, but we no sleep on it because it's in our guest room. But we've heard good. Yes. Yeah, we have like a really nice mattress already. So it's like, oh, yeah, it was like we weren't gonna swap out the CASPER for a really nice mattress. But we've heard good things. So it was a really cool process where it came in the box and you open it up and yeah, that was pretty sweet. - -67 -00:55:47,430 --> 00:56:16,170 -Wes Bos: Pretty cool. We we had a Simmons beauty rest. We also got the the nd pillows, which is just like chopped up hunks of the mattress. Maybe that's what they do with the ones that get returned. I don't think that's actually what they do. But and then they give you a bag where you can just take out hunks if it's too firm. But I didn't like I didn't like the pillow. I felt like it was like, oh too squishy. We have like these like really? we pretty much have like the mattress but in pillow form. Yeah. I like that forget whom who makes like, it's like they're the - -68 -00:56:16,200 --> 00:56:18,510 -Unknown: firm's memory foam pillow. - -69 -00:56:18,660 --> 00:56:25,560 -Wes Bos: Yeah, yeah. They love and loving those pillows. So we don't didn't like the thing. But the mattresses were sorry, the mattress was great. - -70 -00:56:25,830 --> 00:56:26,400 -Unknown: Yeah, - -71 -00:56:26,609 --> 00:57:01,050 -Scott Tolinski: super great. Cool. My sick pick is actually going to be functionality from an app that maybe some of you already have. So this is a this is a weird sick pic. Because it's just a piece of functionality that you might not know about. Because I didn't know about this until I found out about this. within Google Drive. In the app, the plus button the action button on your phone, there is a bay an action to scan a document. Now we've been having to scan a bunch of documents come tax time without all of our tax information. And people send us like a 46 page thing that we have to fax to them or scan to them and - -72 -00:57:02,340 --> 00:57:03,660 -Wes Bos: so much stuff lately. - -73 -00:57:03,660 --> 00:58:01,350 -Scott Tolinski: It's like, you can't put an editable input on this PDF. Come on, like, Look, wait years this. So either way, I was like, how do your clients do this, he's like most of them just scan it. I don't have a scanner that I I'm living in 2019. Here, I don't have a scanner. So I found that Google Drive has a scan documents functionality where you just take a picture of it, and it scans it so nicely, it's incredible. And you can make multi page PDFs just by clicking the plus button. So you scan plus scan plus. And if you don't have a scanner in the first place, it was fast, it was way faster than getting in my car and driving to Kinko's or something like that and trying to get all these pages scanned. I've been using this a ton. So if you need to scan documents, and you don't want to buy a scanner, Google Drive has a scan functionality that is going to do wonderful things for you. And the tyquan even converts text to text where it can so it's pretty sweet. Awesome. - -74 -00:58:01,440 --> 00:58:38,640 -Wes Bos: I need to check that I've been scanning stuff like crazy lately, like we were down in the down in the States. And we had to go to the hospital. I told that story A while ago and are still trying to get our our insurance to cover it. Like we took a an ambulance at one block and it was $700. And I'm just like not used to getting bills. I've never had a bill for anything in my life. And we're just getting all these bills and people calling and we had travel insurance, but the travel insurance needs all these documents and they need to be scanned and like what an archaic system, this whole thing that is and it's all built upon scans and faxes, and it just drives me crazy. I can't believe that. - -75 -00:58:38,850 --> 00:58:42,840 -Scott Tolinski: Yeah, for real cool. So do you have any shameless plugs? - -76 -00:58:43,080 --> 00:58:50,880 -Wes Bos: I'm gonna shamelessly plug all of my courses. Wes Bos comm forward slash courses, there's free, there's paid check it out. there's anything that interests you - -77 -00:58:51,090 --> 00:59:48,480 -Scott Tolinski: sick, I'm going to shamelessly plug my hooks course, which has just released react hooks for everyone is 20. Some videos that will teach you hooks and no time, not only are you going to learn about how to use hooks, but you're gonna learn how to write custom hooks, you're going to learn about third party hooks, you're going to be writing some really amazing reusable functionality. It is super duper, duper, duper cool. So check it out at level up tutorials.com for slash Pro. And I hinted at the course that's going to be released in this month and the end of the month here on the 31st or the I think they'll probably be out on the 29th. To be honest, I like to release it on a weekday is going to be on view j s it's going to be about building static sites with view j s using grid some. So that course is already well on the way to being completed here. I'm so excited because it's basically you could think of it as the Gatsby for view j s. So if you're interested in learning that or anything else level up tutorials.com forward slash Pro. - -78 -00:59:48,690 --> 01:00:02,250 -Wes Bos: Awesome. Thanks for tuning in. If you have any tips you'd like to tweet us we're at syntax FM. I'm at Wes Bos and Scott is at s toe linskey Beautiful. Alright, thanks for tuning in. Next week, pace - -79 -01:00:04,170 --> 01:00:13,920 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show - diff --git a/transcripts/Syntax129.srt b/transcripts/Syntax129.srt deleted file mode 100644 index ab53c9977..000000000 --- a/transcripts/Syntax129.srt +++ /dev/null @@ -1,92 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,580 -Monday, open wide - -3 -00:00:02,580 --> 00:00:06,060 -dev fans yet ready to stuff your face with - -4 -00:00:06,060 --> 00:00:07,590 -JavaScript CSS node - -5 -00:00:07,590 --> 00:00:10,410 -module, BBQ Tip Get workflow breakdancing, - -6 -00:00:10,410 --> 00:00:11,310 -soft skill web - -7 -00:00:11,310 --> 00:00:21,300 -development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott - -8 -00:00:23,610 --> 00:00:24,480 -Tolinksi ski. - -9 -00:00:25,950 --> 00:00:41,940 -Welcome to syntax and this Monday hasty treat, we are going to be talking all about front end frameworks, and specifically, why the heck you might need one? That's a question that comes up somewhat frequently is, Hey, I don't even understand the purpose of front end frameworks. I - -10 -00:00:41,940 --> 00:01:04,110 -Wes Bos: don't understand why I would absolutely ever need to use this, when I'm perfectly happy in my current workflow. So we're gonna be talking about sort of what they are when you need one when you don't need one. And well, maybe why just using something like jQuery isn't always a great option. So my name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, and with me, as always, is West boss, - -11 -00:01:04,170 --> 00:01:04,950 -Unknown: everybody. - -12 -00:01:04,950 --> 00:01:06,090 -How's it going? wise? - -13 -00:01:06,200 --> 00:01:14,640 -Wes Bos: I'm doing good. Just got over a huge week of sickness, which is never fun, but I'm feeling much better. And I'm excited to get into today's episode. - -14 -00:01:14,670 --> 00:01:19,560 -Unknown: Yeah, me too. And speaking of that, today's episode is sponsored by Stackbit. - -15 -00:01:19,620 --> 00:05:53,520 -Wes Bos: Yeah, so Stackbit sponsored one of the past episodes, and they're back for a couple more episodes. And Stackbit fits into a kind of a interesting place. That is the jam stack. aural jam stack is the JavaScript API's and markup. And it's this idea that you can make a sort of statically generated website, but still make it interactive via JavaScript, right. And Stackbit is attempting to solve the problem that is themes for all of these different things. So there's lots of site generators out there, Gatsby, Hugo Jekyll, we've got all these different headless CMS is contentful, Sanity, forestry, Netlify, CMS, and Stackbit is attempting to make themes that will work with all of them, which is kind of cool, because usually you think, okay, I'm using WordPress, I need a WordPress theme. But you can pretty much use these with all of the different options that are out there. They are currently in closed beta, but they are inviting syntax listeners to come in, try out the beta, which is pretty cool. I also saw on Twitter the other day, they were I'm not sure if they're doing this again. But they gave away like a gift card to some of the listeners. And some of our syntax listeners got one, which is pretty cool. So some more things about Stackbit. Here, they offer themes with modern web design, the integrated into all the popular tools, generators, headless, headless CMS is build deploy path platforms, they are adding support for more tools on every sprint. And if you're currently using WordPress, or you're new to jam stack, you can build modern best practice websites without having to open the command line. So this is maybe a good spot to sort of get your feet wet with what the jam stack is. So check it out at Stackbit sta ck bi t.com forward slash syntax FM, if you use that URL, you're going to be able to get into the beta. Thanks so much to Stackbit for sponsoring. Cool. So let's get into it a little bit here with the first thing we want to cover is sort of what is a framework, a front end framework, I should say exactly. Anyways, I mean, what the heck are these things. And really what it is is some sort of JavaScript platform that takes care of some of the things that you would typically do server side for you all in the hopes of making your code more organized. So for instance, a front end framework is typically going to do several things, or at least help you along with some of them, such as potentially routing, and maybe not the framework itself, but maybe libraries around the framework, but routing page rendering data fetching and these kind of things that an application especially like a modern application is going to need. So it takes care of all of those things than it does it all within JavaScript. And it does. So on the client side, not the server side. Well, not the server side out of the box, I should say. Yeah, so some examples of these are the big ones right now react Angular view, Ember backbone, there's plenty of them out there. They all cover different scopes of what the cover react doesn't cover a whole lot. They don't have routing, they are kind of getting data fetching as suspense. We talked about that in a previous episode. React is more focused on just rendering. And you sort of have to bring your own libraries that come along with it. Whereas something like Angular has a little bit more batteries included as the word we often say. And then they're a little bit more opinionated as to how you handle these different things. So it's kind of like a weird area where they don't necessarily cover everything, but our hope today is to just explain to you, why would you use one of these instead of just opening up a blank dot html and dot j s file and go from scratch yourself? Yeah. And I should say there is going to be coming As throughout this entirely because all of these frameworks are not the same. You can't compare all of them. Because like you mentioned a minute ago, what they handle and the scope of what they do is all going to be different enough that you could say, Okay, well, you can say they all do routing, they all do rendering, whatever, they all do different things a little bit differently. And in some are less opinionated than others. But at the end of the day, we're interacting with the DOM, and we're doing so with JavaScript. So when do you need one? And when do you not need one? Because, well, I don't think this is going to be controversial, but I tend to overreach for front end frameworks personally. And that might just be because it's where I'm comfortable, and other people may overreach on the other side. So it's certainly definitely a personal preference thing. But I think there's very real benefits be made by using a front end framework most of the time. And of course, there's definitely going to be people who totally disagree with that. - -16 -00:05:53,640 --> 00:10:51,990 -So first thing, when do you need one, I think probably the one of the biggest benefits that you get out of a JavaScript framework is the fact that the link between your JavaScript data, so your variables, and when you put them into the DOM, when you put them inside of a span, or a button or a div or something like that, that link isn't live by default. And one of the things I've taught many beginner JavaScript courses, when people take it, they update a variable and they go, but why didn't the HTML update? Mm hmm. It's interesting seeing people who don't have any experience in that, because they just assume that you update a value and the it should just update on the screen. By default, JavaScript doesn't do that, of course, you can build things that can do this for you. And before you know it, you've built up your own framework. But if a variable updates, you need to re update the DOM. And making a using a framework makes us easy. I always remember just my first time ever using Angular Me too, oh, my going, Oh, because you have like a variable. And then you format that variable. And then maybe you you add something to that variable, and you have that variable, like in like eight different spots throughout your page. And as soon as you update the variable once, everywhere that variable was used, whether directly or indirectly, that piece of the page will rerender. And that is amazing that that that works that way in Angular and react and all of these different frameworks. Yeah. And you could say what you want about, you know, global scope variables, but throwing things on the global scope to see the two way data binding in Angular was maybe like the most influential thing for me in terms of picking up a front end for Mr. Because when I saw that you put you put this on the scope, and it just magically updates everywhere. Oh, you click a toggle box, and you don't have to do anything. And everything just does this for you. Wow. Like, I remember being so impressed by that. And of course, like as you go on, you realize that that's a terrible practice. But I think the initial wow factor of that example, that that Angular set out on their their homepage was really one of the coolest things and most influential in terms of people being impressed by a front end framework when coming from something like jQuery. Another thing I really love about front end frameworks is that they allow for seamless routing and page transitions, things like that, where you are, you click a link, and it doesn't have to go off and fetch a whole nother page, do a full page refresh to grab that new thing, when like half of your page might not be updating anyways, I remember there was this thing called p jacks. Do you remember p Jacks? Yes, yeah. So P Jax was like an AJAX request where it replaced aspects of your site and didn't touch certain other aspects. And I remember the first time I use p, Jax, and my header stayed the same. And only the body of my website changed. I remember being like, Oh, I can do that holy cow. The whole website doesn't need to reload every page link. So front end frameworks, they can take care of your routing and page loading. So that now you don't have a full on new full page refresh every single time you grab a new page. And that allows for things like animated transitions between pages, and it opens up your application to not feel like a website anymore, but actually feel like an application or something that you're used to using on your mobile phones where you click a thing. And you know, the whole mobile app doesn't refresh every time you go to a new page. That would be weird. So this definitely opens the door for having your things feel more APA, like another reason you might need a framework is that you need an opinionated way to handle complexity. And I think this is probably why you like to reach for frameworks and an even more like framework frameworks like things like Meteor where it's even a step further. Yep. Because it's opinionated. And it says do it this way. And a lot of people want that. Because otherwise, you're just going to make a spaghetti mess out of all of the code that you write. And certainly I would do that as well, if if you gave me just an HTML page and a JavaScript file, I sure would write some awful JavaScript trying to make it work. So just like an example of something like this, like let's say you've got a shopping cart, and you add an item to your shopping cart, and then you send an event to the back end and then you update like the number of items that are in your shopping cart like on in a div And then you update the Add to Cart button. Or maybe you switch it to a remove from Cart button. And there's a whole lot going on here, there's like this like data fetching to the back end. And then there's the display level. And often it's it's really easy to write code where like how it updates in the DOM. And this was a problem with a lot of jQuery is that the UI was so tightly bound to the functionality. And then as soon as you wanted to, like change the UI, or maybe like necessarily, like, take a piece of that note, it became very brittle. And you find yourself just writing the same sort of function over again, but for a different part of the UI. Same thing with like event handlers, if you add an item to the cart, and you need to switch it to the Remove, they need to unbind the add to cart function, and then rebind, that button, and that stuff comes for free. And it's very simple with a framework, whereas doing it yourself in just vanilla JavaScript can be a little bit difficult. - -17 -00:10:52,020 --> 00:15:19,440 -Yeah, and there's definitely a certain subset of developers who are going to hear the spaghetti code argument. And they're going to say, I don't understand what that even means, like, I don't understand spaghetti code. And to me, it feels like the same as the the callback first promises sort of thing, where once you're in it, you know it. Because if you haven't experienced the spaghetti code thing of writing an application that needs to do a whole lot, and the next thing, you know, you have a billion JavaScript functions, and you're trying to maintain scope and your files, and you're trying to maintain access between all of your different things, it becomes very real very quickly, why you might need one of these things. And you might say, Ah, I had no idea it would get this bad. But if you've never written code like that, that is that complex, or needing to be that complex, then you might say, Well, I don't have spaghetti code. So I don't see the benefit of preventing spaghetti code. But it's definitely one of those things that once you're in it, you're going to feel it, and you're going to understand it. Now, this is going to be somewhat, I don't think this is going to be that controversial. This is going to be a little spicy bit here. But but the the spicy bit is that I have not built a site without a front end framework since learning Angular. And if that gives me enemies, then so be it. Because honestly, if you say you need a static site, I'm faster at building a Gatsby site than I am building just a straight up HTML site. Because once you account for things like CSS preprocessors, and supporting old functionality, I'm just straight up faster with Gatsby and the site that I produce is faster. And the experience for the user is better. Because I get things like pre loading, I get things like front end client side routing, rather than just straight up page refreshes. And the sites are better. So yeah, so be it, I pretty much picking up a front end framework almost all the time. Now, interesting. I've definitely built, I would say 70% of my stuff. 80% of my stuff is done with frameworks. And then the other 20% is just with vanilla JavaScript. I'm certainly don't shy away, I usually I will approach something with can I build this with with vanilla first? And then I'll say, okay, no, I'm gonna run into these issues with whether it's data fetching or binding or whatever. And then I'll reach for a framework. But if I am, we talked about just side projects a couple of weeks ago, if I'm doing that, I've got a couple, I've got a couple hours to kill, definitely reaching for next jazz, or Gatsby or something like that. Because of the the Quick, quick prototyping, the access to all of the different libraries that are out there, making your life easier, you're just faster I think I am, at least when I'm able to reach for a framework, you reach for all these different battle tested libraries that are done. They've been checked for security. They're in use and thousands of different web sites, they're done for they've been checked for perf. They have all the little edge case bugs, you don't have to find those bugs over and over again, because they've already been found out, hopefully, yeah, and there's that there's an old joke that's like you either build or you either use a front end framework, or you end up building one yourself, by the time you're done. For the people who are totally anti front end framework. I think all of these things, they start to fade away, you have some front end frameworks, one that we didn't mention at the beginning, which we probably should have, which is spelt, spelt actually disappears as you use it when like it disappears at compile time. So there's definitely options there. For those of you who are thinking, well, I don't want that burden of all of that JavaScript coming down the line with the application, because there's certainly downsides to using front end framework. So let's get into when you don't need to use a front end framework. Now, I think you don't always need to use the front end framework. If you're on a CMS based site like WordPress, Drupal, those sort of things. I've done a few WordPress headless sites know where I've used Gatsby on the front end and WordPress on the back end for clients. And let me tell you, it's not the smoothest experience and it's at no fault of Gatsby react or any of that stuff. It's just that you, you know have this disconnect where WordPress sort of has all the plugins. It makes it really easy to throw these plugins in here for benefits or detriments of the website. But the experience is a little bit different, where everything just becomes a little harder hosting, you got to have two hosting providers or set up the hosting in a more custom way. So there might be, it might be beneficial for you to just pick up straight up WordPress or Drupal That said, the site's probably going to be slower and feel slower as a result of it. - -18 -00:15:19,800 --> 00:17:31,290 -I think you also don't need a framework, if you just need a small to medium amount of JavaScript. So whether maybe the website has a couple models on it, maybe just a slide show, maybe a form Submit. So whether you're just coding those all from scratch, or you're just reaching for a vanilla JavaScript library, I think that's totally fine. It might be unnecessary to load the entire framework over the line when you're just doing some very, very simple stuff where you're opening and closing, especially on like a hard refresh based websites where you go from one page to another. In that case, you almost never have to actually listen for for events, because when you go to another page, all those events are lost. And you don't have to clean up that's just very much like the the jQuery days. So I think that there still are lots of lots of good websites like that. And honestly, if I was doing this, I would just write it in vanilla JavaScript. And then at a certain point, you probably realize, okay, this feature is getting a little bit out of hand, I think I'll probably now convert it. If you've written your your functions in such a nice way, you should be able to take your functions and move them into one of these frameworks as at the end of the day, it's trademarked just JavaScript, right? Yeah, just JavaScript, tm. So another one of these is going to be updating a new product or an older project, right? So if you have a project that you've been given, and let's say that this thing is using jQuery already, or maybe it's just some code, I wouldn't necessarily unless you have a decent budget for this, I wouldn't touch it to do a major rewrite into front end framework or anything like that. Unless, of course, if you have a large budget, your client is asking for that kind of functionality or asking for that kind of thing, then you might want to look at something. But again, if it's just a WordPress site, you've been given the task of adding some new CSS layer to it or something like that. Don't rewrite that in the front end framework. There's absolutely no reason to do that. All right, last slide we have here is something that we've we've covered this before. And I actually saw it on Reddit yesterday. And it's kind of this done to death. But the question is, why can't I just use jQuery? We have a whole episode on is jQuery dead? Yeah. And the answer is no. But it's, it's retired, and it's on vacation. It's down in Florida right now for March Break. - -19 -00:17:32,760 --> 00:17:35,810 -Unknown: It's avoiding the spring berry beaches over there. Yeah, - -20 -00:17:35,910 --> 00:19:13,800 -Wes Bos: yes. So why can't you just use jQuery, the browser has pretty much caught up with everything that jQuery can do. So it's not that jQuery got old, it's that the browser said, Hmm, that's a good idea, we should just do that in in vanilla JavaScript. So the DOM API's that jQuery provided are pretty much all available, there is a way to do everything that you could do in jQuery in vanilla JavaScript these days. So it's just not necessary to load it. If if you if you aren't reaching for a framework, I would just reach for vanilla JavaScript. And that way, you're going to get the quickest site load that you could possibly have. Yeah, and at the end of the day is a big reason. But you know, frameworks provide really a framework, it provides a way to do things, it provides just structure to your application. And like we said, with the spaghetti code thing, once you're in it, and you have an application that becomes brittle and unmaintainable. Because of all the layers that have involved, the framework is going to provide you layers of things that you just don't have, if you unless you're essentially writing your own way of doing a framework and organizes your code. And as your project grows and grows and grows, you're probably going to need that level of organization. Yeah, I agree. Like I said this before, but I'll say it again, I don't think that I could write a really clean, there are people out there that have the very, like approach to a project that they can do it in such a way that it's all clean. And you it's well thought out. And it's designed beautifully. And I just don't think that I'm that good of a developer, I'd much rather just do it the React way or just be told, what is the convention for approaching and in writing this type of code? - -21 -00:19:13,830 --> 00:19:19,770 -Unknown: Yeah, I don't really want to invent that stuff myself. I'd rather just somebody told me how to do it. Let me do it that way. - -22 -00:19:19,920 --> 00:20:06,480 -Wes Bos: All right. I think that's it for today. You have anything else to add? I don't have anything else to add. Again, I think your opinions of this in terms of if you want to use a front end framework or not. It's all up to you, whatever your faston, whatever you can build sites in whatever you can produce something that is fulfills the needs of your client, and makes everybody happy is what you want to use. And again, like I said, I am really fast with Gatsby now I can build really fast efficient sites with Gatsby. But if you can't, and you're better with something else, you know, pick up what you're good at, but maybe experiment with some of the stuff and see what maybe works for you in a different way. But this is why you might want to use a front end framework and why You need one in the first place. Awesome. Thanks for tuning in. We will catch you on Wednesday, whose face - -23 -00:20:08,330 --> 00:20:18,150 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax13.srt b/transcripts/Syntax13.srt deleted file mode 100644 index 65826cb16..000000000 --- a/transcripts/Syntax13.srt +++ /dev/null @@ -1,588 +0,0 @@ -1 -00:00:06,000 --> 00:00:11,220 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:15,900 --> 00:00:32,180 -Wes Bos: This episode is brought to you by dive into Docker, which is a fancy new course from Nick, Jen Jane tacos. I can't say his last name, but it's from Nick. And it's great. We'll talk a little bit more about it. If you want to check it out, make sure you jump into the show notes. Click that link there. Oh, welcome, - -3 -00:00:32,180 --> 00:01:01,770 -Scott Tolinski: welcome. Welcome to syntax where we are going to be talking about command line. And we're gonna be basically saying how to be a command line pro some of our tips and tricks and things we'd like to use some, you know, ways to expand your horizons a little bit on the command line from turning it into something you sort of like have to do to something you truly know what you're doing. So yeah, so uh, Wes, who did a course on this, what are you? What are you up to now? Yeah, um, - -4 -00:01:01,770 --> 00:01:36,030 -Wes Bos: what do I have to right now? Well, last week, we did the sublime one or the vs. Code one where I ported ported my theme over and other thing I'm working on right now is obviously I'm working on my graph, qL course or my advanced react course. And then I've got a couple. What are they called conferences, couple conferences, a couple of training kind of coming up in the next couple of months. So I'm just prepping, prepping some stuff around that making some talks and updating my updating my workshop and whatnot. So I'm kind of just doing a bunch of little stuff here and there. But my main focus has been on working on that course. What about you? - -5 -00:01:37,410 --> 00:02:38,280 -Scott Tolinski: I have, let's see a bunch of stuff. I mean, I've been I said in the last episode that I upgraded, my shopping cart and all that stuff. I also upgraded to react 16, aka react fiber. On the RC three, I think it's IRC three, whatever. It's the latest I made of made up the three part, it's the latest release candidate at the time of this recording. And I had no issues at all whatsoever. Actually, well, I shouldn't say no issues, I had one plugin that I was using who refused to update the to the new prop types thing where you have to import prop types from a separate package from react. It's been it's been complaining about that for years, like, you know, you just think that that libraries probably been abandoned if they aren't accepting pull requests to change that. So I had to do a little bit of work to get that library working, or at least move it into my own version of that library. Yep. And yeah, upgraded to react fiber and saw absolutely no issues whatsoever with my code. So that was a really, really nice, - -6 -00:02:38,310 --> 00:03:13,080 -Wes Bos: that's pretty sweet. A lot of people have been emailing me and wonder react fiber announced that they were going to do a total rewrite of react, are people freaked out? Because they thought that that meant that they're gonna like change react entirely. And I get tons and tons of emails about this for my course. Like, is it going to be compatible with react fiber, like, it's going to change entirely. And there are some things that are being added to to react, but the entire API of react is, is staying exactly the same. So your app should be fairly simple to to upgrade to react. 16. - -7 -00:03:13,470 --> 00:03:46,110 -Scott Tolinski: Yeah. And you know, people sometimes say that, right? And then you do it in practice, and find that maybe some weird things are broken. And I was just really psyched to see that. That didn't happen. I mean, yeah, I think about the transition. I know Angular two, angular two was such a, you know, pain point. So many places still haven't moved to Angular two and stuff like that. Sure enough, they wanted to change the API and stuff like that. And, and react wasn't going for API change here. But they managed to do a full rewrite of the application. And it's free performance gains. Love me some free gains. - -8 -00:03:46,130 --> 00:03:50,100 -Wes Bos: I'll take it love gains in the gym. And in my code editor. Yeah, right. - -9 -00:03:50,100 --> 00:03:52,170 -Scott Tolinski: freakin take them anyway, you can. - -10 -00:03:53,520 --> 00:05:32,820 -Wes Bos: So today, I'm talking about all about the terminal. And I guess the alternate title to this episode would be like the command line for web developers, meaning that as web developers, we're not necessarily like getting nitty gritty into the terminal, and like scripting, bash scripts. And I know that there's people like that, who like to, like run their entire life on a bunch of hard to read scripts. But more like a lot of the tooling that we use as web developers, and a lot of the day to day stuff that we do is done in the terminal. And it's a very harsh place to start out, when you just pop up in the terminal. You're a new web developer. And it's just a green and black thing or black and white thing, and you don't understand, like really what to do. And the font sizes are really small, there's no colors. And it's just not a nice place to be. And I think that the reason why I did that whole command line power user tutorial series was because there's really just a handful of things that you need to know about the terminal in order to make your job. Really smooth. Being able to move along. So that's kind of what we're gonna be doing today is we're gonna be going going into what are the different apps that you can use, we're going to talk about Windows, we've got some complaints on the, the productivity one, where we didn't mention any Windows apps. So I actually have some experience on Windows. So I'll talk a little bit about that. We're talking about different shells that you can use bash that sh fish, like those are the big three some plugins and any other like little hot tips that we have tasty treats that you want to take home and and start putting implementing into your own workflow. - -11 -00:05:32,940 --> 00:05:34,980 -Scott Tolinski: Yeah, these are some hot, tasty treats, - -12 -00:05:35,010 --> 00:05:41,100 -Wes Bos: hot, tasty treats. Oh, ha caught in there. But they're tasty. For sure. Tasty? Yeah, - -13 -00:05:41,159 --> 00:05:42,360 -Scott Tolinski: they're sent on to the heating lamp. - -14 -00:05:42,659 --> 00:06:06,120 -Wes Bos: So let's talk about like the the very first thing when you when you need to work in the terminal, and that is, what application do you use? There's a whole bunch of the ones out there. So on Windows, there's PowerShell. On Mac, there's terminal. And, but you can also get other apps. So what one do you use? - -15 -00:06:07,200 --> 00:06:42,120 -Scott Tolinski: I use I turned two, and it's the beta three, it's I turned to version three. Yeah. are turned to version three. And I've been using I term, since it was I term. And I really have really, really love this this application, it's it's one that I've never found a need to move off of. It's very, very feature rich, looks super nice, is very configurable to make it look even nicer if you'd like it to. And yeah, I just didn't meet all my needs very nicely. I have some nice little things set up within it. We can get into if you'd like. - -16 -00:06:42,270 --> 00:06:48,870 -Wes Bos: Yeah, well, why don't you want to drop a few on us right now? Like, why would somebody use I term over the built in Terminal? - -17 -00:06:49,349 --> 00:08:20,580 -Scott Tolinski: Yeah, so one of the things that it comes with is things like profiles, right? So you can have profiles set up. And these profiles can be determined by all sorts of things. So you know, you can give them names or whatever. But these profiles can have their own unique look and feel to them. They can run commands upon starting, they can always start at a particular directory. So I have, you know, a workspace or a profile for level up tutorials. And I have a keyboard shortcut associated with that. So if I'm within iterm, and I hit, I think it's command L, what it does is it opens up a new tab and I term and it automatically sets me up in my level of tutorials directory, and it puts the level of tutorials logo in the background. So I always know that I'm working on the level upside. It makes it easy at a glance to know like what your environment is, at any given point, granted, you can just look at the path or something like that. But if I see that big logo, I always know that I'm in level up tuts. And that's what I'm working on. So being able to set these profiles is really super nice. You can set up as many as you'd like. You can have default profiles. And they can do some nice things. I've had profiles for any server that I run with a SSH. So the default command will just SSH into I keep on thinking I'm saying SSL, okay, it can SSH in, I had to sit and think about that for a second. Basically you you hit you know, Command D or whatever, and it will automatically SSH into your digitalocean server and get you set up, you have to run a command to do that. And it's a nice little little time saver there. - -18 -00:08:21,360 --> 00:08:49,950 -Wes Bos: That's pretty sweet. So I myself have also used AI term to for AI term and then I turned to and then I turned to beta three for four years and years. And it's amazing because there's all these like little tweaks you can do like you can change what show ups shows up in the tab you can customize the sounds, all kinds of little tweaks that you can do and get into it in the option especially if you're you're doing heavy stuff in the terminal like some people who use vim. I don't know who would do that. But - -19 -00:08:51,090 --> 00:08:51,600 -Unknown: you - -20 -00:08:52,670 --> 00:11:37,710 -Wes Bos: people you are you're good people, even people, we understand that and congrat Wait, pat yourself on the back for using vim right now please go ahead. But people use vim directly from iterm. And that is their editor, they just type them and then they're in their actual editor and all their stuff kind of comes through that so a lot of people spend a lot of time SSH into different boxes around so there's a lot of like heavy stuff that that needs to get done through that. I recently switched to hyper which is from continues my love affair with everything that the companies eat puts out. So they have they put out now which is the the hosting. They put out next j s which is the the React framework. They also have a terminal called hyper and it's kind of like if I term was sublime, like it fast and stable and just works and has all the options. Hyper is like atom or VS code where it's built in HTML and CSS, which allows you to do a lot of the cool things that you can do in Visual Studio code, which is you can install plugins like crazy because there's like a million web developers out there. And you can if you want to watch a movie inside of your terminal, or you want to inline images, or if you want to have cool tooltips, when you hover over a specific piece, you probably can find a plugin that specifically does that. So the upside to using hyper is being able to have this amazing ecosystem, it looks really cool, because you can style it with CSS, there's all kinds of really nice themes out there. And now, it's just pretty, pretty sweet. Little terminal. I've been using it for probably about six months now. And I've been pretty happy with it. But there is a bunch of downsides to it. It's it's definitely slower. A lot of people say is slow, slow, slow. And I don't really run into that day to day. But where I do run into it is when you maybe if you cat a large file, or you accidentally curl a file and forget to save it, the whole thing will freeze up. Because if you're trying to dump a bunch of text into this thing, the whole thing crashes. They've had this issue with non monospaced fonts for a long time where if you've ever seen my my little terminal prompt, we'll talk a little bit more about that where it has like the the icons for the get status every every week, like for one day, there are different sizes, and there's some issue that they just can't figure out with sizing non monospaced type. So there's like a couple like little issues, which are deal breakers for a lot of people. But I'm still still holding strong on it. And it hasn't been meant to be too bad of an issue for me. You know, do you see any CPU issues or - -21 -00:11:37,710 --> 00:11:48,360 -Scott Tolinski: anything like that it is an electron app. So it's built with electron. We mentioned in the last episode, it's not a given that electron apps take up a lot of memory and CPU. But yeah, I can. - -22 -00:11:48,870 --> 00:11:57,750 -Wes Bos: I haven't personally. But I also have $5,000 computer, so I'm probably not the guy to ask about it slowing down my computer. - -23 -00:11:58,650 --> 00:11:59,220 -Scott Tolinski: Yeah, I - -24 -00:11:59,220 --> 00:12:04,830 -Wes Bos: definitely. I bet that there there probably are some performance issues versus something like I term. - -25 -00:12:05,040 --> 00:12:28,860 -Scott Tolinski: Yeah, I think that's why I didn't jump on it immediately. Because it does. It looks nice. And I'm a sucker for things that look nice. But yeah, again, it's when they came out, I was on my old computer. And I was like, do I really want to add another electron app to my computer here right now? Yeah, maybe not right now. But now that I do have a new computer, maybe it's time to see if it will be nice. I don't know my ATM setups really nice. I have no reason to switch. But I do like new and shiny things. - -26 -00:12:28,949 --> 00:13:18,390 -Wes Bos: Yeah. If you want to, like take a quick glance at like, what are this sort of sweet things, just do a quick search for awesome hyper. And that's just a GitHub repo full of different packages that can help you out. So like, if you use one LastPass or one password, and you need your passwords to be accessible in the terminal, there's there's a plugin for that. Or if you want to inline links, or if you want to inline images or be able to click on links. Or if you have like a Chrome dev tools from your node process that pops up and you want to open that you can just kind of Command click it and it will open it up. So there's a lot of like cool little things in it. But for the most part, like I've I haven't installed any plugins for last two months since I switched over to my new MacBook. So I don't spend enough time in the terminal that either of these have been a deal breaker for me. - -27 -00:13:18,810 --> 00:13:23,880 -Scott Tolinski: And so you don't use the built in Terminal in VS code, do you? Because I don't personally No, - -28 -00:13:23,880 --> 00:13:52,440 -Wes Bos: I don't. And the reason behind that is because I like to keep my terminal open on a separate monitor. I've got my laptop, my 4k display, and then a 22 inch vertical. And I like to put my terminal on the on the side so I can see everything that's running. It's just too much. I already find that VS code some of the interfaces getting encroaching a little bit too much. And I'm trying to like cut that stuff down, because I just want to see my code. And the terminal is just just too much for me at this at this time. - -29 -00:13:52,620 --> 00:14:00,240 -Scott Tolinski: Yeah, I'm the same way. Just keep it separate. Why not? Yeah, I like the control of being able to put it wherever I want to monitor that kind of stuff. Yeah. - -30 -00:14:01,260 --> 00:14:52,230 -Wes Bos: Cool. So those are the the applications. On Windows, you obviously have PowerShell. Then there is one called command or Cmd er, which is the one that I've been recommending for years. Anytime somebody comes to an ATM, someone comes to a workshop and they've never used the terminal before I tell them to install commander. Just because by default, it comes with comes with a lot of the nice things as that sh has. It'll talk about what that is in just a second as well as a highlighting and some outage just a whole bunch of like it's a it's an app itself, but it also has some of the nice features of DataStage added on top of it. So if you are brand new to the terminal, and you're looking to get started on Windows, definitely check out command or Cmd er, and that will be a little bit of more of a welcoming experience then than the default. One that you have. - -31 -00:14:52,350 --> 00:15:04,170 -Scott Tolinski: Yeah, I should note for those of us stateside, Zed, it's ZZ. For those of us in the United States here. I had like no idea really talking about with Zed for a while that that is - -32 -00:15:04,170 --> 00:15:18,840 -Wes Bos: such a stupid way is that sh just like falls out of your mouth? It's just clunky. So, yes, z sh sounds a lot better. I, I agree that Canada needs to switch over to Z and Americans need to switch over to metric. - -33 -00:15:18,960 --> 00:15:19,950 -Scott Tolinski: That's a nice compromise. - -34 -00:15:21,210 --> 00:18:40,410 -Wes Bos: Maybe we get Trump in. And our I can't get Justin Trudeau not together. Maybe they'll switch it over. I'm on the topic of Windows. There is this pretty cool thing happening in Windows right now. And it's called Ws L, you may have heard people talk about Windows subsystem Linux. And the reason I know about this is because Microsoft sent me one of their What is it a Surface Book, whatever the like, top of the line surface laptop is, where you can snap it off, you can snap off the screen, it becomes a tablet, or you can switch it around. And it's a really, really sweet actual laptop. And it's pretty cool. Because there's they've been sending them out to a bunch of people who are on Twitter and talking about a bunch of people, I've actually made the switch over to Windows sort of as sort of like a, like, we promised Windows is not the same as when you left it. 10 years ago, we've been working really hard and seeing things like Visual Studio code, and Visual Studio for the Mac, the obviously some things are changing inside of Microsoft. And the big one for developers was that like, yeah, I can use Windows. Uh, but every time you come to install, like node or Ruby or like a, one of these, like Linux tools for image compression, or video conversion, anytime you have one of these tools, it's like it works on Windows wink. And, and it's like, the Wink is like you're gonna spend your Friday night trying to figure this out, right? So what happened is, Windows has embedded a Ubuntu core directly into Windows mean that like it's not a VM, I don't totally understand how it works. But it's pretty sweet is that they are running Ubuntu on your actual system. So that you can run your, your entire shell in whatever Linux that you want, or whatever things that work on a Unix based operating system, which is all of these things like node and Ruby and all of your command line tools. They're generally built from a Unix first standpoint, meaning that that's why they work so well on on Mac. That's why people slowly have gone over to the Mac in the last however many years, because these things just they just work, you don't want to have to like deal with them not working and whatnot. So it's pretty sweet. Because you can you can use Windows, you have the option to buy any of the laptops that are out there, you're not locked into the system. But you can have a true Linux shell running with all of your windows files available to you. And then you don't have to like find out what is the equivalent on in Windows land, you just use the the Unix one, which is all the stuff we're going to talk about today, whether you're using bash, does that sh fish, all of these different prompts that we're using all of the different NPM packages that are sort of like sorry, Linux and Mac only those will all hundred percent work on your actual windows subsystem Linux. So it's a pretty huge thing. I think it's currently only in what's called the the insiders build or, or something like that. So you have to flip that on in order to get it. But once you do, you can install this windows subsystem Linux and start using that. - -35 -00:18:40,530 --> 00:19:24,420 -Scott Tolinski: Yeah, I think that's it. I mean, it just shows another big shift in Microsoft's approach to just just how they think about the open source software community and web developers in general right now. I mean, with VS code, and with a lot of these changes being made, and now this, I mean, that is reducing a lot of the barrier, but it's also reducing a lot of people's previous opinions about Microsoft being this giant, monolithic corporation that doesn't care about the developers or something like that. I mean, to me, it signals like a really nice nice change. Yeah, I don't you know, it's I would be way more likely to consider a Windows laptop if that system is in place than without it. And yeah, I think that's important. - -36 -00:19:24,510 --> 00:20:09,350 -Wes Bos: Exactly. And, and props to the the folks at Microsoft who have been working so hard on this because like, myself included, who hasn't cracked like 1000 windows jokes, over the years of like, haha, it doesn't work very well. And then they sort of like push through all of those jokes of IE and not working on Windows and, and here we are today 2017 where the best one of the best editors out there is from Microsoft. One of the the forefront browsers that has all the features that we're looking for is from Microsoft. Yeah, some of the really nice hardware you can get is from Microsoft. And now you can run Linux shell on Your your Windows computer. So pretty sweet to see that shift happening. So yeah, some of the some of the Mac stuff doesn't look as bright of a future for us. - -37 -00:20:09,860 --> 00:20:34,070 -Scott Tolinski: Yeah, absolutely. Yeah, I know cuz the OSX becomes more and more closed off. And I guess it's Mac OS. Now, you know, all that stuff is definitely puts you in in consideration. I wasn't even planning on buying a Mac for my next laptop, to be honest. But then he weighed the options, and I went Mac anyways. But yeah, it definitely wasn't the same easy decision that it had always been for me. So yeah, - -38 -00:20:34,650 --> 00:21:41,490 -Wes Bos: awesome. So once you have this, like Unix base, and I understand I'm going to get like 1000 tweets from people being like Unix and Linux are not the same thing I understand. Once you have a Unix based operating system, whether that is Mac OS, whether that is some sort of Linux distribution that you've installed, or whether you are running Ws l on a Windows machine, then you have the option to use what's called a shell. And a shell is sort of like the way that you it's like a language that you use to interface with your computer. So you have your folder directories and you can list all the files in there. You can copy in move stuff and rename stuff and trash stuff and delete it and whatnot. So there are a number of different shells out there the the default one that comes on absolutely every Unix based computer is called bash. And that's the one that you if you don't know anything about this, that's the one that you are likely using bash is installed on every computer. Anytime you go into like a Raspberry Pi, or any almost every device that runs a computer has bash installed on it. So that's the one that I use for years. Have you used bash for a couple years? - -39 -00:21:41,820 --> 00:22:12,300 -Scott Tolinski: Yeah, I use bash for a while before I guess. I think that's my first experience of things existing that worked bash were from Paul Irish, his videos and you'd see his terminal like looking pretty and fancy and have things and like really interesting features. And you're like, I wonder what he's doing there. And then he had a post on z, sh, and oh, my z sh. And I think that sort of blew the doors open for me in terms of bash alternatives. Yeah. But before I knew that there were alternatives. I mean, that's the only thing you use, because that's the default. And that's what's there. And it just works, you know? - -40 -00:22:12,720 --> 00:22:37,320 -Wes Bos: Yeah, it's, it's kind of cool. So bash is the one that comes with it. But a lot of people move away from bash. Because first, the only reason people move away from bash or at first is because it looks good. And that's because if you move to another shell called z, sh, or Zed sh, or the Z shell along with, I don't know what you call it. What is Oh, my is that sh like a, like a plugin? a framework? - -41 -00:22:37,350 --> 00:22:44,220 -Scott Tolinski: Yeah, I guess that's like a framework of scripts. Yeah. I yeah, a configuration framework. Let's - -42 -00:22:44,220 --> 00:23:31,530 -Wes Bos: see what the website calls it. So Oh, my is that sh. So what does that sh does is it's kind of like bash, where they they re implement all of the things that come with bash, so listing files, zipping files, extracting files, moving files, traversing directories, you get the point, right. But they they do it in a bit of a different syntax, so that writing scripts and writing customized yet they call it a framework. So writing a framework like oh, my is that sh. Is, is a lot easier for you rather than some of the hang ups that you have with bash, because it's no matter what you what way you look at it. It's very obtuse for a web developer to come into bash in evens that sh and to be able to write a script, or to write a command line prompt in that. - -43 -00:23:31,950 --> 00:23:48,540 -Scott Tolinski: Yeah, so it says E. Sh. I mean, I don't I use the SH for a while. But correct me if I'm wrong here. But the the commands are the exact same. And the like, you could copy a command that was written in bash and paste it directly into z, sh, and you're not going to see any worries, right? - -44 -00:23:48,690 --> 00:24:29,370 -Wes Bos: Almost everything. There's, there's a bunch of gotchas here and there, which sometimes you'll have to convert over to this SSH equivalent. But it's such a popular framework now are such a popular shell now that almost anytime you run into an issue where this instruction was for bash, how do I then do that in that sh, there's almost always a Stack Overflow for it. And that's for those little one liners that you paste into your terminal. For things like larger bash scripts that might come along with like a build directory, or whatnot. You can still run those in bash, as long as you put the little hash bang user bin at the top, it will just run that in in regular bash rather than set sh. - -45 -00:24:29,580 --> 00:25:16,290 -Scott Tolinski: Yeah, because I use fish right, and I found the fish to be if csh has a few of those things, I think fish has a little bit more. We're like things like the the double ampersand doesn't work. On multiple scripts, you have to use a semi colon. And fish official is just like csh towards an alternate shell. Oh, my fish is a framework. Just like oh my z sh themes and fancy stuff. A little bit of extra features here and there. It's just sort of different flavors. I think. I don't know if I'm speaking Have ignorance here, but in my experience, fish seemed a little bit more opinionated in terms of changes to it. But also is really nice errors. So if you type something in bash, it's going to tell you how to fix it for fish directly in your your terminal. - -46 -00:25:16,350 --> 00:25:17,550 -Unknown: Oh, cool. Yeah. So - -47 -00:25:17,550 --> 00:25:29,970 -Scott Tolinski: if you use that ampersand that basically says, Hey, use this instead. Which is nice. But I do kind of wish sometimes that instead of telling me that it would just know that yeah, it can't like it. Like you're gonna take the time to tell me. - -48 -00:25:31,140 --> 00:25:31,980 -Wes Bos: For me, Well, yeah, - -49 -00:25:32,070 --> 00:25:33,000 -Scott Tolinski: yeah, exactly. - -50 -00:25:33,000 --> 00:26:35,820 -Wes Bos: So let's talk about like, why would somebody want to use that sh oarfish over bash? Yeah, and I think the the main reasons are because you a you can have these really nice prompts. And you can get prompts for bash and whatnot. But anytime you see somebody with like, a really sweet prompt in their command line where it tells them what good version or if they're good is dirty or not, or things are staged, or there's an x if something has failed, or maybe they want to know which version of Ruby they're on or version of node, anytime someone has like a pimped out line like that, then that's they're likely using something like Zed sh, or my fish. So the themes, the prompt themes is one of them. And the other one is plugins. So if you want to add any sort of additional functionality to your, your terminal, like you want to add custom commands, or be able to interface with a special service, there's often plugins that people have written for these specific shells. So I know Scott, why do you use a not bash? Why don't use bash? - -51 -00:26:36,180 --> 00:28:39,240 -Scott Tolinski: Yeah, so I can speak mostly in fish, because that's how I've been on for the longest now. So I mean, I guess it's probably nice, because you have csh. And I have a fish experience here. Yeah. So for me, fish has a lot of really nice things like auto completion, it's like, well, not just auto completion, it's auto suggestions. So when you start typing something, you'll be grayed out what the path is that you think it's going to be. So when you hit tab, you always know what that completion is going to be, let's say you have two folders that are named something very similar. You're changing directory. I mean, that's happened to me a whole bunch where you think you're going to be tapping into the, maybe the Documents folder, and it's the Downloads folder, because you type do tab or something. I mean, obviously, you just add one more letter, but the auto suggestions always lets you know which one you're auto completing to. But in addition, you get that auto completion with being able to change. So if I were to type, let's say, CD, D, right for desktop, or downloads or documents, and I don't want desktop, you could continue typing Sure, or you could hit I believe it's, if you want, like all of the directories that exist, you can double tap, like, it's just hit tab, and it shows you all of the different options that are available. So you can get that exactly like what exists and stuff like that. And these auto suggestions are our minor little life improvements that that just make working with it easier. Again, for me plugins and stuff like that, I like being able to have these themes that show you your your git branch information and being able to display things like I don't need the entire path listed out. So you know, my current theme just has the first character of each folder I'm in and then the most like most recent directory, I'll print that entire most recent directory. So it just gives you more control over the display and sort of the the features of how it looks and feels. an addition, fish also has like a web based configuration, which I really like, if you want to change themes or something like that, you can just run a command, it opens up a browser window that has a graphic user interface for modifying the configuration. - -52 -00:28:39,389 --> 00:28:40,350 -Wes Bos: Oh, that's nice. - -53 -00:28:40,379 --> 00:28:52,800 -Scott Tolinski: Yeah, it's nice, I use it from time to time, most of the time, I do just edit the fish config file myself. But if maybe there's some options you don't know exist, you can pop into the user interface and check it out. - -54 -00:28:53,190 --> 00:32:31,860 -Wes Bos: Yeah, I think one of the killer features that both this Zed sh and fish have is the the tab trigger meaning that like, if you want to cd space, and then you hit tab, what will happen is it will just automatically give you a list of all the folders and all or all the files that you'd like to go to. And then you can use your arrow keys to go through the entire grid, maybe you have like four files across three files down, you can use your arrow keys to go through up and down over to the right and to the left to whatever the file is and then you just hit enter and it'll automatically complete it. So anytime you're trying to manually type out the name of a file, you're likely going to screw it up or like if there's a space in the file and it needs to be escaped. It will automatically do all of that for you. So the tab triggers is sort of like the foundation for all of the the features that about both of these these shells have. I want to take a quick break and talk to you about our sponsor, which is dive into Docker. This is a course that will help you learn Docker and what is Docker? Well, you often hear people talk about virtual machines being able to run different things. heaps of application on your computer, you kind of want to emulate what your server is like. And if you've ever run into this, whether you're trying to run WordPress or node app or some sort of Ruby application on your computer, you know that it's sometimes really hard to get like the exact versions of node or Ruby installed in your computer without having to mess up something else that's, that's running on your computer. So the solution to that is to put it in a virtual machine that's isolated from the rest of your computer. And that's supposed to be great. But the problem is that like, then you have a whole nother set of problems on your hand, which is understanding how does Docker work? How do I build my own Docker file, so that I can can run this app in isolation. So this course, if you're looking to learn that is going to really help you. Let's go dive into Docker from Nick Jane takus, he's gonna kill me for just butchering his last name, sorry. But check it out. You you figure out what Docker is, you can understand all of the sort of the ins and out how to install it, how to build your own Docker files, and then sort of just like go through a whole bunch of real world exercises as to how you would build a Docker environment for yourself. So make sure you click the link in the show notes, because then we will get credit for that sale. And Scott and I will become extremely wealthy from that. Thanks so much to dive into Docker for sponsoring. So let's talk about like plugins. So like once you have the base, and you can watch my videos, if you want to, like get a better idea of some of the other like fundamental features that are just baked right into Oh, my Zed sh, or fish, I'm sure they're all sort of mirrored, they also have a bunch of plugins that will extend it. So one of the a couple of the plugins that I use are just extended tab completion. So if you type NPM space, and you forget what all the commands are like, if something that's not all that something that you don't do that often, like you want to unpublish a package, or you want to check something, you just type NPM, space tab, and then it will automatically give you a grid and of all the possibilities that you can run for that specific tool. And it will give you descriptions along with with each of those telling you what, what each ones do. So you can do that with node, you can do that with Git. So if you type Git space tab, it'll give you a list of like, all of the Git commands, maybe you forgot what it's called. And you can just do a quick scan of what they are every pretty much language every Ruby has it. Every language has these tab completions that you install. And it makes your your experience dealing with that language a little bit nicer. Yeah. - -55 -00:32:31,860 --> 00:33:02,160 -Scott Tolinski: So let me plug something really quick. There's a awesome fish repo that has a bunch of plugins, frameworks and themes and sort of stuff in there. So awesome fish, awesome hyphen, fish, you can Google that. One of the things I really like is actually called bass, which is like a bash. Yeah, it's hilarious. They really do a good job with these names here. It just allows you to use a bash utilities in inofficial. So it's like bass plus, equals bass. or bass. Yeah, love it. - -56 -00:33:02,850 --> 00:33:58,610 -Wes Bos: That's wicked. So check that out. Another plugin that I only recently gotten like maybe six, eight months ago, it's and it's the one thing that I was kind of looking over at fish Shelby and I do like that. It's the Zetas h autosuggestion. Meaning that as you as you type nice, it will try to suggest what it thinks that you did. So previously, what you'd have to do is you'd have to like type, like the first letter, like maybe like, our sink space, and then you hit your up arrow to go through all the past things that you've done in our sink. With this, you just type our sink space, and then it will you know, like a very light gray font, it will suggest exactly what it thinks that you you want to type. And if that's what you want to run, like, because you've run that specific command 11 times in the past, you just hit right arrow, and then it will auto complete it all for you. So that was pretty, pretty sweet when I figured out that that you can actually get that inside of sage. - -57 -00:33:59,940 --> 00:34:37,080 -Scott Tolinski: Yeah, the history auto completion stuff. I mean, the history in Zed sh, or Z, sh, and gamma scenes at sh the history and z sh or fish or like alone enough reasons to switch to one of them because the history is so nice. But yeah, like that auto completion and fish is always something that I really enjoyed. There was also here's the here's not a plugin, I know where plugins, but here's a fish thing. It does basically change directory without having to type cd. If you don't type a command, it assumes that you're changing directory. So you can just start typing your directory. It's stupid. It's small. It's nice. I use it all the time. You know, just to change directory that C drive. - -58 -00:34:37,110 --> 00:35:39,270 -Wes Bos: Yeah, you don't. There's there's no sense in actually having to type cd in front of it. You can just keep going like I'm in my route right now. And if I type D tab, it will give it'll autocomplete me to desktop documents, Dropbox and downloads. And then I can just use my arrows to kind of go through all those and I hit enter and it will all know that I wanted to CD in It. So that's pretty sweet. Another one that I use is set sh syntax highlighting. So if you type a command that exists, it's green. And if you type a command that does not exist, it will be red. It's pretty simple. But it's nice to know if it knows about those commands. And so before you hit enter, it tells you that is not an actual command, it will tell you immediately and things like files will be underlined, instead of just being a plain file. So you can quickly know that, oh, that's actually a file because it has an underline. So the syntax highlighting as you type is a killer feature for me as well. Yeah. How's that sh syntax highlighting? here's - -59 -00:35:39,270 --> 00:35:52,770 -Scott Tolinski: a, here's a fish plugin that I didn't realize I had installed, but I use it all the time. It's called Pisces with again, with the fish names. It just autocompletes, parentheses and quotes in your command line. Because why not? Oh, - -60 -00:35:52,800 --> 00:36:33,540 -Wes Bos: yeah, that's nice. I know. Yeah, it's it's sometimes you feel like a bit of a, I don't know, like a caveman working on the terminal, because it doesn't have all of the nice, like jumping around and the auto completion stuff that you get in your text editor. But if you put a little bit of time into it, these things all do exist in your actual the big one for me is that some people always like hit their arrow, because they can't You can't click in most editors to go where you want. But I think so if you just hold down, what is it in here? If you hold down Ctrl and click a word, it will highlight it. And if you click on, what is it here, trying to figure out what the actual for fishes option and - -61 -00:36:33,570 --> 00:36:34,940 -Scott Tolinski: fish it's option option. - -62 -00:36:35,210 --> 00:36:58,800 -Wes Bos: I believe it's option for me too. It's not working right now. But that might be a hyper term thing. I thought it was option. So hold on option and click where you want to go. And then it will just insert the cursor at that specific point. And there's some bugs, there's bugs with multi line stuff, but it works pretty good, actually nearly positive that that is an item feature rather than a zero. Okay, maybe I'll switch back. That's because I was a killer feature for him. Yeah, - -63 -00:36:58,980 --> 00:37:01,770 -Scott Tolinski: here it is. option click moves cursor. - -64 -00:37:03,330 --> 00:37:08,850 -Wes Bos: I think there's a well on option click hyper term, I think there's a plugin that I saw - -65 -00:37:10,620 --> 00:37:12,920 -Scott Tolinski: the plugins, that's the beauty of the plugins. - -66 -00:37:13,190 --> 00:40:12,150 -Wes Bos: Yeah, if it doesn't exist in the core, you don't have to petition the people who build it, you can just write a plugin for it or find someone that have has already already written a plugin for that. So that's pretty sweet. Nice. Um, next up, I want to do one called z, or Zed. And this is actually not specific to Zed sh, or bash or fish, it can be used with all of them. And it's funny, it's the one that I get the most email about from my command line power user is it will allow you to move move to your most free sent folder, and people think I misspell free sent. So like, Hello, Wes. Just to let you know there's a spelling mistake. Friesen means frequent and recent sort of together, meaning that when as you move yourself around your your terminal, you don't have to remember exactly where you are. So if you're six directories deep into a project, and you always go to that project, as you CD around, z will learn about folders that you recently have gone to and folders that you frequently go to. And what it does is every time you visit a folder, it sort of gives that folder a point. And then you can use z to just jump directly to that folder. So I'm working on a project that involves next j s right now and the folders called next. And I probably have 11 or 15 folders on my computer called next, but I just type z space next, and it will direct it'll immediately go into my root Dropbox, courses, advanced react examples. Next, right like that's like eight levels deep because I've been going there the last couple days, quite frequently and quite recently. And it has like that's like the very basic that's what I use it for 99% of the time, just z into the directory that I want z Dropbox, z syntax, if I when I want to add a new show to this, I just type z syntax. I don't know where it is on my computer, but I go there enough that it knows. But then there's a couple other options where for example, if you want to go like I when I do WordPress, I always have my theme name is always WP and if I do z wb then it will just go to the most recent or frequently gone to one and maybe there's six or seven projects that all have that folder. So what I can do is I number all of my projects. So if I know like I'm working on my wife site, and she's Project 78, I just type z 78 space web and then it will go into seven eight dash Kate Forsyth to be content Ford slash themes Ford slash web so it'll it'll know to fuzzy match both of those pieces that you've passed it and jump into it. So highly Highly recommend that you get z. I can't stop talking enough about it, obviously. But when people don't use it, I'm always amazed that how awesome it is and why they should be using it nice. Yeah, I've - -67 -00:40:12,150 --> 00:40:15,300 -Scott Tolinski: never heard of z until right now. I know. What do you what do you think? Are - -68 -00:40:15,300 --> 00:40:16,190 -Wes Bos: you convinced? - -69 -00:40:16,560 --> 00:40:31,920 -Scott Tolinski: I'm pretty convinced I had to do it. Yeah, I should do it. I forgot. I was trying to think of why I, I always like have I have my own like aliases that jump to my working commands, but that's like a per project basis. So this is - -70 -00:40:31,940 --> 00:40:39,540 -Wes Bos: Yeah, you always have an alias. Right? It's sort of like Emmet, or what was the CSS one you recommended? Last episode? Hi, yaku. - -71 -00:40:39,540 --> 00:40:40,830 -Scott Tolinski: Hi, Jackie, you - -72 -00:40:40,940 --> 00:41:02,520 -Wes Bos: know how Emmet in that and hi yaku. They don't have a set command. They just try and figure out what you meant, right. I love tools like that. Because you don't have to set it up in advance. It will just learn it's kind of smart about how you're working. And it will give a best guess for what you want. And almost all the time the best guess is exactly what you wanted. - -73 -00:41:03,440 --> 00:41:14,790 -Scott Tolinski: Well, here check this out on awesome fish is z a pure fish directory jumping. So it's a pure fish implemented? z on fish. So nice. That's pretty sweet. I - -74 -00:41:14,790 --> 00:41:19,860 -Wes Bos: think z itself is written. It's called z.sh. So I think probably best show. - -75 -00:41:19,860 --> 00:41:20,550 -Scott Tolinski: Yeah, - -76 -00:41:20,900 --> 00:41:50,070 -Wes Bos: it's probably written in bash, which even though I use that sh, it still works. Because all of the like it has a little database file where it saves what folders you've been to recently that just happens entirely outside of my shell. So it's it's totally fine. Nice. Free sent free sent. Like don't email me. What else any, any other tasty treats he got in terms of plugins or tips, because I got a bunch here, but I don't know. I don't want to. Yeah, follow, right. No, I - -77 -00:41:50,070 --> 00:42:05,010 -Scott Tolinski: think you should keep going. Yeah, I honestly don't use that many plugins, I found fish show between fish and my fish for to do like almost everything that I needed to do. But um, you know, I'm happy to explore new plugins like, free sent file jumping. - -78 -00:42:05,460 --> 00:43:45,510 -Wes Bos: Yeah. Cool. So on. Next one up is tree. And again, this is not specific to any shell, it will work on anyone. And you just brew install tree, we'll talk about what brew is next in tree will sort of give you a visual listing of what your folder structure looks like. So I have a little command just actually an alias to just T. And let me open up what it is right now. There we go. What. So what tree does is allows you to just type tree and you can type however many levels you want. And it will show you a listing of all of your folders and all of your files. And then whenever there's a file inside of a folder, it will indent it. And it uses these little like Unicode pipe characters to sort of like visually make a tree folder structure right inside of your terminal. So that's super handy when you want to get like a high level view of all of the files and all of the folders that are inside of it. And then I just have this little command called t that I use all the time, especially when I'm doing a tutorial and I want to show people what does it look like at this given moment, I just type T and it will, it will list out the depth of the three levels deep of all the folders and all the files unless I pass it something like t sex and I'll go see six levels deep. Then I limit it to 15 files at most. And then I I list my directories first, and then I ignore get node modules Bower DS store, you know all those like ones that you want to ignore. So I have this like nice tidy little command that I can just type T and get a really nice overview of all the files that are in the actual current directory. Nice. - -79 -00:43:45,870 --> 00:43:49,320 -Scott Tolinski: Yeah, yeah. Just make sure you don't run that on your node modules folder. - -80 -00:43:51,030 --> 00:44:27,630 -Wes Bos: Well, yeah, that's why I've made my own little. I think there's like sensible defaults, where it will not traverse more than, like 10 levels deep or something like that. But now that I think about that, I did crash hyper term with just the regular tree command when I was prepping for this episode, which is not what I want to do. So if you have a nice command, like I'll post this on GitHub, my little command, it will just say 16 entries exceeds file limit not opening Dir. So it knows not to skip over that one because it's it's likely just like one of those like node modules folders that's containing thousands of files. And yeah, - -81 -00:44:27,630 --> 00:44:28,740 -Scott Tolinski: absolutely. - -82 -00:44:30,090 --> 00:45:14,520 -Wes Bos: The other one is brew and brew cask. So there's all kinds of package managers for command line tools. So like NPM is the package manager for node. brew is the package manager for all of your command line tooling. So anytime that you want to install any of these things like tree, then you just type NPM are sorry, you type brew install tree, and then it will just automatically install it for you and do all of the linking. Anytime someone says make sure something is in your path. I just think Start to blank out because I hate it. I hate people making me enter, I'm like, wait, I don't understand the path. It's this long ass thing where you just like string together listings of things that need to go on my path. And if it's not in your bin folder, then it's not available to you, I just do - -83 -00:45:14,520 --> 00:45:19,230 -Scott Tolinski: a symlink to whatever it is into my bin folder. And I don't know that's, that's - -84 -00:45:19,770 --> 00:45:59,280 -Wes Bos: rude does, okay, it will install into a separate folder, and then do a nice little symlink for you. And then there's a single brew doctor, which if you really screw up your command line, it will like figure out what you screwed up. And it's just the best way to install any of these toolings without having to like, because something I remember back in the old days, I had to like compile stuff. And there'll be like pre compile steps. And then you had to type. What was that command that you always had to type like to? I forget what it is, but you have to compile all of your, your things before you actually install it yourself. And they have to symlink it and yeah, make that's exactly what it was. You have to type make, and then it would never work. And then there was dependencies that you have to also install - -85 -00:45:59,280 --> 00:46:02,370 -Scott Tolinski: first, and it's easy Mac ports and whatever. - -86 -00:46:02,400 --> 00:46:38,310 -Wes Bos: Yeah, my Mac ports used to be another big one. But it was just a nightmare to get all this stuff to work. So brew is amazing. And then there's this thing called brew cask which allows you to install like just a regular desktop apps via the command line. So you can skip all of that, like, do you agree next, next, next, next, so you can just like brew cask install Slack, brew cask install Skype, right, and all of these things will just install immediately here and then you can also brew brew or brew cask update all of your apps like that No problem. So it's just like command line tooling for managing all of your, your apps and your command line tools. - -87 -00:46:38,310 --> 00:46:39,540 -Scott Tolinski: Nice. - -88 -00:46:39,540 --> 00:46:43,800 -Wes Bos: What else do you want me going? Oh man, I got I got 100 of these. Next - -89 -00:46:43,830 --> 00:46:45,780 -Scott Tolinski: is gone. Trash. - -90 -00:46:45,810 --> 00:48:01,290 -Wes Bos: So one of the scariest things about working on the terminal is that when you want to remove something with rm rf, RM dash RF, you can accidentally just nuke your entire computer. And that's that really scares me because I've heard some horror stories of people like I once had a friend who accidentally made a directory called Tilda, and then he tried to rm rf Tilden and nuke this entire computer because you're physically deleting your entire computer and there is no trashcan for rm rf. So trash if you just do npm install dash g trash dash c li that will install this little command and it works on on all of the Windows, Linux and Mac. And then when you delete something, you just type trash and then the name of the folder or the name of the file. That's the other thing about rm rf if you like RM a folder, it's like you did not do recursive and you have to pat your what like passing dash R Yeah, what a pain in the ass. So if you just type trash and the thing that you want to delete, or like Star dot jpg, or whatever it is, it will just remove those to your trash so that if you accidentally delete something, you can always restore it from your trash been - -91 -00:48:01,470 --> 00:48:03,330 -Scott Tolinski: nice. I like a lot. Yeah, - -92 -00:48:03,359 --> 00:49:35,370 -Wes Bos: yeah, do that. And then alias RM, to like to not work or I've seen people alias it to, are you sure? And then it will it'll delete it. So I would like to look into doing that as well. So I'm kind of kind of scared of having RM on my computer. Yeah, yeah. Next one up is YouTube DL. And this is this amazing little thing. If you've ever tried to download a YouTube video, maybe you're going on a plane and you want to watch Scott, then you have to download them for offline. And what YouTube dl will do is you can pass it a YouTube video, you can pass it a Vimeo video supports like 20 different video hosts. So it's not just for YouTube, you can pass it a playlist of videos, you can pass it an array of videos, you can pass it pretty much anything that you want. And it will download all of the videos for you know, to your actual file and there's no like sketchy websites where you put your email in or wait 20 seconds while you see an ad or like anything like that. It just works and it's rock solid for being able to to download content that you're not necessarily supposed to be downloading. So that one's been huge for me. You can also just strip audio out you can you can tell it what framerate you want it. You can you can make them smaller file sizes, there's 1000 different options for it. So I'm a little video on it because some of my people always asked to download my YouTube videos and like go for it. And then I did a YouTube video on how to actually use YouTube DL. - -93 -00:49:35,520 --> 00:49:45,750 -Scott Tolinski: Yeah, nice. Cool. I never heard of this. I will use this all the time because I'm currently doing Nate go to shady sites and wait Well, you know, your ad blocker goes nuts trying to close all the pop ups and stuff like yeah, - -94 -00:49:45,750 --> 00:50:13,590 -Wes Bos: and then you're they're also proxying it through their server. So if their server is backed up or slow, then you start to have to wait for their server to do it. So YouTube dl is it's pretty pretty sweet. Nice brew install. YouTube dl and it'll give you a little nice little command for you. Um, and so that's, that's all the plugins that I've got here. Any other tips that you've got for the command line there? Scott? - -95 -00:50:13,620 --> 00:51:21,420 -Scott Tolinski: Yeah, tips wise, I mean, I think a lot of it is, is understanding the basic commands and understanding the basic keyboard shortcuts to get you around, can go just such a long way. I mean, understanding, you know, you could do LS to view the directory, and then LS hyphen, LA to view like all of the information about the files in your current directory. And in fact, I even alias some of that stuff. If I want to see LS LA, I just have an alias to L, you know, to to quickly get access to more that information. But learning those basic commands is is just something that you want to have in your brain 24 seven, you want to have it be second nature, you know, CD m, m, v, RM, I guess, trash in this kind of case, or LS or any that sort of stuff, you want to have that stuff, I'll be second nature, and you know, just not even have to think about it. Another thing is being able to get around, a lot of times people have trouble deleting and stuff like that. So learning the keyboard shortcuts like you know, Ctrl A to jump to the beginning Ctrl K to clear the line from the cursor forward, which is the one for what's the one to delete the line from cursor backwards. - -96 -00:51:22,020 --> 00:51:26,730 -Wes Bos: I should Oh, that's a good. I need that one, actually. Yeah. Command, Backspace, - -97 -00:51:26,970 --> 00:51:28,680 -Scott Tolinski: command, Backspace, command Backspace, - -98 -00:51:28,680 --> 00:51:33,930 -Wes Bos: on on hyper term, or Zed sh, I'm not sure what just doing it. - -99 -00:51:34,800 --> 00:51:37,710 -Scott Tolinski: I'm guessing it is a hyper term. Yeah. - -100 -00:51:38,970 --> 00:52:05,370 -Wes Bos: So it's funny because this stuff has been around for forever. And it's sometimes funny to go back and like learn some of these basic things that come with it. But it's definitely worth your time. And in spending like an hour or two, just reading through docs, or going on YouTube and finding like 10 terminal tips you must need or something like that, because or going through my command line power user course. Because it'll teach you just a few of the things that you need to know for the stuff. - -101 -00:52:05,399 --> 00:52:26,070 -Scott Tolinski: Yeah, and the more the more tools you have, and the more you understand about this stuff, you know, the easier things are going to be I mean, even, you know, I had a directory of let's say, 30 video files you download from YouTube, and it replaced ampersands with there was a percentage sign. What did that what is that encoding? I'm not sure - -102 -00:52:26,129 --> 00:52:29,190 -Wes Bos: Oh, I what's called - -103 -00:52:30,120 --> 00:52:30,750 -Scott Tolinski: whatever it is. - -104 -00:52:31,410 --> 00:52:32,250 -Wes Bos: encoded. - -105 -00:52:32,310 --> 00:53:05,340 -Scott Tolinski: Yeah. So to replace all those with ampersands, because I want it to properly display the file titles. srei, a little, little one liner that goes through a directory and is able to use a regex to find those symbols and replace them with ampersands. Like stuff like that is it makes your life a lot easier. You could have I mean, it's not even a bash script. It's like a one liner. Right. So yeah, like being able to manipulate your file system in a way that's programming rather than through visual interfaces and stuff like that will take you a long ways to do really nice and fancy things for you. - -106 -00:53:06,810 --> 00:54:55,020 -Wes Bos: Awesome, I've got a bunch here, I'm just going to rattle through real quick. If you type if you if you pipe into PB copy, it will copy to your clipboard, meaning that if you run something like LS dash L, or in my case, cat, which will like you type cat package JSON or cat hello.md. If you tack on a pipe PB copy, what it will do is rather than display it, it will pipe that into your pasteboard or paste port. type it into your, your clipboard, your printing, you can just your pasteboard, and you can paste it from your board, wherever you like, is that sh there's two commands extract and zip. And they do exactly what you want. You want to zip a folder up, you just type zip and the name of the folder and it's it's so much faster than the OSX compress. I don't know if OSX like checks files, or does this big recursive, deep look. But if I'm ever zipping something, I do it over the command line because it's way faster with zip. And then the opposite. If you've ever tried to unzip something on the command line, you'll know that there's like x CFR nine minus Yeah, ah, camel, whatever. And I always forget them and I always try to paste in whatever the StackOverflow suggests, but it's never exactly what I want and I just want to unzip the frickin what are the zip file? So just type extract and the zip file and then it will it will figure out what type of zip file it is. So if it's a dot seven z or dot r AR or dot zip and it will just unzip it in the folder it will unzip seven z without anything additional downloaded for that. I don't know maybe Yeah, I haven't done the seven z in a long time cuz like, unless I'm like pirating some shit. I don't run into 70 all that often. - -107 -00:54:55,080 --> 00:55:03,900 -Scott Tolinski: Sometimes you do with like, I don't know. It's like what, I guess windows stuff. Look, I see seven z on my phone occasionally when I've done - -108 -00:55:04,380 --> 00:55:35,760 -Wes Bos: seven z.gz Is that Is that it? I don't know anything about compression. There's probably people cringing right now that I know know a lot about that. I know. lol well is like a shortcut to LS dash l so LS really quick, l will give you something similar. dot dot moves up a directory. So instead of typing cd dot, dot, just type dot, enter, we'll go up a level, dot, dot, dot will go up to levels sort of like, it's, it's just one more way. Just four dots work. Oh my gosh, four dots works. I - -109 -00:55:35,760 --> 00:55:36,720 -Scott Tolinski: wonder where it ends. - -110 -00:55:36,810 --> 00:55:47,730 -Wes Bos: Okay, let's do it. 12345512345676 is the max. Yeah, I was gonna say I didn't get it. And I knew that because it turned red after I typed six. - -111 -00:55:47,790 --> 00:55:48,840 -Scott Tolinski: Oh, nice. - -112 -00:55:48,870 --> 00:56:03,660 -Wes Bos: Wow. So I learned something today, as however many directories you need to go up. Like if you're using like a standard WordPress install, you know, your, your theme is always like four levels deep or whatever. You just type dot, dot dot, and they'll go up up the four levels that might be a Z, sh thing. - -113 -00:56:03,690 --> 00:56:04,770 -Scott Tolinski: Start working and fish. - -114 -00:56:04,950 --> 00:56:07,110 -Wes Bos: Yeah, that's definitely as the SH thing. - -115 -00:56:07,140 --> 00:56:31,860 -Scott Tolinski: Yeah. So also another quick one that seems like basic. If you hit the up or down key, you'll go through your history of the previous commands you typed in, you can also get to your previous command by hitting two exclamation points. So let's say you rerun your previous command, like you ran something, it says Permission denied, you could type sudo space, then double exclamation points. And then it will rerun that command with sudo. - -116 -00:56:32,910 --> 00:57:06,030 -Wes Bos: Oh, yeah, I remember that. And dash also will. So BANG BANG is like the last command. And dash will be the last director you're in. So if you are in, let's say you're in Dropbox, and you move over to sites folder, and you want to jump back to whatever folder you were in last you type cd dash or just dash, and it will allow you to flip back and forth remember on the old TV remotes, or you could flip back and forth between two channels. Yeah, that's sort of like that. Or you can you can run it. Some people don't like the like the bangbang. Because you might accidentally rerun a command. Yeah, you - -117 -00:57:06,030 --> 00:57:15,390 -Scott Tolinski: actually can't they block it in fish. They really if you do it, they give you like a, you can't do it. They have a whole thing on their website about why because they don't like it. It's opinionated. - -118 -00:57:15,690 --> 00:57:34,800 -Wes Bos: Yes, exactly. Command R is sort of like command k, where you clear out your terminal, but command R will just move everything above the fold or above the top of it. So that if you ever need to scroll back and see what you did, so it sort of like it will, it'll clear it away. But you can still scroll back if you need it. - -119 -00:57:35,580 --> 00:57:37,890 -Scott Tolinski: Nice, I didn't make a - -120 -00:57:38,670 --> 00:58:00,210 -Wes Bos: super handy. And the last one is and this works in any terminal. This is what I use in every single one of my workshops when we're first doing command or stuff is that if you just need to get to the folder that you want, and you're fine, you're stumbling with the CD. Just drag and drop the folder into your terminal and it will autocomplete wherever in the bowels of your computer. That folder actually lives. - -121 -00:58:01,140 --> 00:58:03,810 -Scott Tolinski: Yeah, and then it gets does it enter it takes you there, right? - -122 -00:58:04,230 --> 00:58:09,390 -Wes Bos: Yeah, exactly. Nice. And make sure you type cd in front of it if you're not using SSH or fish. - -123 -00:58:10,049 --> 00:58:55,730 -Scott Tolinski: Nice. Cool. Yeah. Another little tip is to Don't be afraid. We mentioned the productivity episode to dive into aliases, right aliases for commands that you type a lot chameleon commands that have options. That way, you don't have to string along a bunch of options. I recently wrote a not an alias, but a function for it because fish has functions does eashl functions? Mm hmm. Okay, so I recently wrote a function, which is what they recommend to do for fish, rather than aliases, which simply just runs NPM. Install hyphen, hyphen, save. That's all it does. So I just have I just typed the word in, in the package name. That's a great idea. I know. I don't know why I didn't think about that. Because it's like, NPM, install hyphen, hyphen, say like, you could avoid typing all of that. So yeah, - -124 -00:58:55,770 --> 00:58:59,480 -Wes Bos: you don't need the dash save anymore. It's, it's with the M - -125 -00:58:59,640 --> 00:59:00,480 -Scott Tolinski: Oh, five - -126 -00:59:00,510 --> 00:59:02,460 -Wes Bos: as of NPM. Whatever the latest one is 554. - -127 -00:59:02,460 --> 00:59:04,980 -Scott Tolinski: Something I think it's five. - -128 -00:59:05,010 --> 00:59:21,660 -Wes Bos: Yeah, as of NPM. Five, you don't need the dash dash f you need dash dash save dev if you want to see the dev or if you do not want to save it for whatever reason there's a flag you can pass like no save. But the it will automatically add it to your package JSON when you install it. So I do NPM I and then the package name, - -129 -00:59:21,720 --> 00:59:28,020 -Scott Tolinski: I'm really glad to hear that because a yarn um, that was one of the best features about yarn is that it implied the the safe. - -130 -00:59:28,020 --> 00:59:29,580 -Wes Bos: Yeah, it makes sense. Right? Yeah, - -131 -00:59:29,580 --> 00:59:30,980 -Scott Tolinski: it makes sense. When do you not use that? - -132 -00:59:31,140 --> 00:59:39,180 -Wes Bos: I mean, exactly. Like what are you installing that you do not ever need in the future? Like that's just asking for somebody else to trip over. You're not found package? - -133 -00:59:39,210 --> 01:00:23,430 -Scott Tolinski: Yeah, absolutely. Yeah, no, other than that, I think, you know, tip is if you're working with any of these things like z, sh, or, you know, dive into the themes that are available, and the themes are more than just the you know, pretty pretty shells on top of the command line, right? But the themes can offer a whole bunch of different important information and you You can write your own or configure your own take include whatever information that is that you want. But they can be really, really super handy and giving you that information, especially with the good stuff. Or, you know, even just things that you would need to see personally but dive into dive into themes, editing themes, modifying themes and seeing what's out there. Because it's not just a visual sheen. It's a lot of functionality baked into those as well. - -134 -01:00:23,670 --> 01:00:39,120 -Wes Bos: Yeah, in Zetas, ah, you can set your prompt, which is the what it looks like the line that what it looks like, you can set that to random and every single time that you load a new tab, it will just reload a random theme for you. So you can try a whole bunch of them out until you find one that you like, - -135 -01:00:39,150 --> 01:00:44,550 -Scott Tolinski: yeah. Oh, are there any themes that you're particularly psyched about? - -136 -01:00:44,550 --> 01:02:47,850 -Wes Bos: So um, as always, I have my own cobalt two theme that I have, there's this really popular one called agnosticism. And the agnostic one is the one that has the like status, there's a red X if something has broken. And then you have your prompt, which will give you the actual folder name. And then it will give you your git status on the end there, whether it'll turn green, if it's clean, and I'll turn yellow, if there's uncommitted changes that you have there. So I forked that one and I changed that into cobalt to Zed sh prompt, which has sort of everything that we want. Maybe I should explain real quick, the different pieces of it because I got a lot of email about this. So the the, the the prompt is done in what shows up and that's done in Zetas H or in bash, or in fish. So whatever shell you're in your prompt will be done there, then the color of that. So like, like what color things are, that's done in your actual application. So if you want, there's a cobalt to prompt, which is for that sh and then there's also a cobalt to color scheme, that's for I term. And there's a cobalt two color scheme for hyper. So you got to figure out like, I got to install both of these things. And then the third piece of the puzzle is the font that you use in, in your editor, whether that's a AI term or hyper, you need to make sure that you set the non Unicode symbols to be what's called a power line font or a patched power line font. And that's how you get it sometimes you see people with the cool little get icons and the little arrows and, and the cool x, all of those things are someone's taken a font and patched in those extra characters, so that you can use that so you need to make sure that you set your, your terminal to to be that font, at least for non Unicode characters in term so there's sort of three things that need to go along and I get a lot of email people send me like your things broken. And it's just because they haven't followed all three of those pieces. - -137 -01:02:47,880 --> 01:03:54,720 -Scott Tolinski: Nice. Yeah, I use a well I use currently right now official called the Slavic cat. I like it because it has this hilarious like emoji emoticon like cat with it waving his hand with some rays, it's it's cute and stupid. But the basically the the little additional branches that are coming off of the cat's hand are sort of basically your different statuses of your your get of your current repo. Ah, in addition, I really like it because there's this giant really interesting red arrow for your product is cool makes it very like obvious where your prompt is. So I like that big red arrow you know, so using Slavic cat right now. Although I am a fan of this one called Wild cherry which was sweet because it has a bunch of emojis in it like you know a skeleton if your repo is dirty and you know the hand fingernails getting painted if it's a new files are ready to commit and a rose if your repos clean and stuff like that. It's stupid, but it's a visual indicator and it's nice, it's fun. - -138 -01:03:55,049 --> 01:04:09,060 -Wes Bos: Yeah, the the wild cherry all most of that stuff has been forked off of my cobalt too. So if you kind of want a bit more of a fun like a purple ish. Look at cobalt. Let's check out wild cherry stuff. It looks super good. - -139 -01:04:09,150 --> 01:04:12,840 -Scott Tolinski: Yeah, we does yours does cobalt have all those emojis? - -140 -01:04:13,410 --> 01:04:20,940 -Wes Bos: No, no, not at all. It definitely needs to be adding those maybe I should like add a cobalt to millennial version or something like that. - -141 -01:04:21,000 --> 01:04:21,690 -Scott Tolinski: Yeah, right. - -142 -01:04:24,960 --> 01:04:28,980 -Wes Bos: Awesome. Uh, any more tips or should we move on to sick pics? - -143 -01:04:29,160 --> 01:05:57,060 -Scott Tolinski: Let's move on to sick pics. That's that's good for me. So my sick pig is a website this time and it's source making.com which is in addition to having some really cool artwork here. I should should note I haven't purchased any of their premium products. I can't speak to those but the the information that's on the site here is just excellent source making.com. Basically he says, I will tell you stories about good software architecture and teach you how to create with design patterns through anti patterns of refactoring. And so it gives you like basically goes through a bunch of programming design patterns. And then we'll you can go through them and really explore these design patterns, you can explore the anti patterns, you can explore tips for refactoring and disciplined refactoring techniques. But overall, I was just super impressed with this website overall, in terms of the resource of free information, the kind of stuff it's teaching you isn't like super commonly taught this Well, I would say in my opinion, if you find other things like this, I'd be happy to check them out. But I just really liked the the visual aspects everything and how they, they they teach you these different patterns and give you a nice clean examples. And nice visual metaphors and things like that to learn them on which are can be daunting for people who don't have any background in structural patterns, creational patterns, that kind of thing. So yeah, love it source making calm. - -144 -01:05:57,980 --> 01:07:15,690 -Wes Bos: That's pretty sweet. My sick pick is a it's an app called My Fitness Pal. So I'm actually experimenting with what's called a keto diet right now, which is sort of like low carbohydrates, medium protein, protein, high fat, pretty sweet. We're gonna talk a little bit more about this fitness stuff in coming episodes. But I've been using that to track exactly what I'm eating every single day. And previously, I had used like daily burn and the database of foods wasn't all that good. And it sort of crumbled away, they don't, they don't seem to be updating that anymore. So I switched to My Fitness Pal, which it looks like Under Armour either bought them or has made this app. And it's pretty sweet. Because it you can basically just scan the barcode of any food that you're trying to eat. And it will break down all of the macros of the food that you're looking for. So it'll give you a nice little overview. If something is too high in something that you're trying to watch whether it's sodium or fat, then it'll give you a little bit of an alert and eat the same thing for breakfast every single day. So you can just quickly add the next day so if you are looking to to track your macros and the nutrients behind your food, Oh definitely check out my fitness pal. It does does workouts and weight and it does all kinds of stuff. But I specifically use it just for the nutrition part of it. - -145 -01:07:16,470 --> 01:07:17,850 -Scott Tolinski: Nice. Cool. - -146 -01:07:17,880 --> 01:07:58,830 -Wes Bos: So that's it for today. If you have any tips, make sure you tweet them at Scott and I because I'm sure that we're only scratching the surface of stuff that's available. I think all the time when I learned a new tip. I just smacked myself on the head. And I'm like, how did I not know that how I've been how I've I've been living my life without this this tip before. So if you have any of your favorite tips that we did not mention, send them on over because I love hearing it especially mentioned the at syntax FM account. Because what I've been doing is I've just been retweeting other people's specific tips or thoughts on the podcast. And it kind of gives us a little bit of a after the show watercooler where we can continue the discussion. - -147 -01:07:59,279 --> 01:08:16,729 -Scott Tolinski: Yeah, absolutely. Awesome. Well, we'll see you next week. Have a good one. See ya. Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show. Until next time. Peace - diff --git a/transcripts/Syntax130.srt b/transcripts/Syntax130.srt deleted file mode 100644 index 0ddf80fac..000000000 --- a/transcripts/Syntax130.srt +++ /dev/null @@ -1,360 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,559 --> 00:00:59,009 -Wes Bos: Welcome to syntax. This is the long awaited view episode. So today we're gonna be talking all about view and I don't really know all that much about view and Scott is going to be telling me all about views. It's gonna be kind of a fun episode instead of us both having insights into it. It's going to be me asking questions, and Scott schooling me on how all these things work. Today, we are sponsored by a century, which is going to do all of your error, exception, aggregation, tracking all the information about what went wrong on your website, and on your server. In a new sponsor today is called clubhouse, which is some pretty nifty new project management software. That won't make you cry. We'll talk about that a little bit, partway through the episode with me today is Scott Tolinksi. ski. How you doing today, Scott? - -3 -00:00:59,189 --> 00:01:53,550 -Scott Tolinski: Hey, I am doing great. I'm doing great specifically because I never thought today would come I never thought we would get to do the Vue JS episode. So I'm really psyched. Because I've been pushing for this for a long time. I like view. I'm a fan. So that's it, I think we'll try to give you a pretty good overview of view itself without necessarily getting too in depth. And then you can go in and check it out a little bit more. And I think we'll answer some of the high level questions, some of the the basic stuff and get into the syntax. So again, if you are a Vue JS expert, and you want to share some additional tips and factoids, go ahead and tweet those out at us. Because, you know, it'll be a nice little addition to this episode. But I'm just excited. I'm excited to talk to you about view, I actually have a new view course coming out. So I've been I've been working in a lot lately. So uh, so yeah. Do you want to get into it admin? What do you want to just kick this off? - -4 -00:01:53,579 --> 00:01:54,210 -Unknown: Yeah. - -5 -00:01:55,410 --> 00:02:24,690 -Wes Bos: I don't even know what to ask. But yeah, like, so maybe for people who are jumping into this as their first episode, she explained that I'm entirely a react developer, I use no to the back end generally reach for react on the front end, I have a previous life as an Angular developer. And Scott is very much the same way. However, he has dipped his toes and built a couple he has got some courses on view as well over the last, I don't know, six months or so. Yeah. So like, what is view? Scott, tell him Tell me what it is? Yeah, - -6 -00:02:24,720 --> 00:03:57,690 -Scott Tolinski: well, I think you are one of the perfect types of people to understand Vue really well off the bat. Because more so than people who just like if you picked up react and react as your first front end framework, you're going to be a little bit more confused by view than somebody who has that Angular experience. Because there's so many nods to Angular one, I would even say that view itself is sort of this like hybrid, in my opinion, I don't know if they like to be described as this. But in my opinion, it seems like it's a hybrid of ideas from Angular, one point, whatever react and meteors framework Blaze. And so there's a lot of little things here that that both address the sort of modern workflow that we're used to now with react, but also sort of the simplicity and some of those wow factors you've got with Angular one. So the things that are Angular one esque, for those of you who aren't diving into Angular one, it may be a little hard to visualize this. But we have things called directives in view, which are essentially properties on elements that do things, whether they bind data, or they perform events, or they do loops, that same stuff from Angular one is in view. So your Yeah, so you're not writing JavaScript in a template like you are in JSX. You will are writing directives to do things like loops, right? Or show if then that conditionals and things like that, you have the V hyphen if to show something on an element, rather than some conditional code, wrapping something. - -7 -00:03:57,780 --> 00:04:25,860 -Wes Bos: So there's if statements in view, unlike react in react, you have to use like a Okay, I'm gonna have to say the word again. Turn or Turner, ternary ternary. operator. That's one thing that I think is so really missing from from react is the the niceness of Angular and I guess view as well as you have these nice little v dash, is it a v dash? If and yeah, how do loops work? Can you tell me about that? - -8 -00:04:26,070 --> 00:05:07,070 -Scott Tolinski: Yeah, loops. If you have used Angular loops work the exact same. So you have a V hyphen for and then inside of a string or inside of double quotes, you could say I guess it's not really a string, you would say V hyphen for item in items. And then inside of that, you just have item dot available or whatever, you have item dot Hello, right. So just like in Angular, you would have that directive on the wrapper. And then inside of the wrapper is the thing that you're going to be looping over. But unlike Actually, I don't remember this video. in Angular or not, it's been so long, but like react, you do need keys for your items. So you do need to bind some keys. Yeah, - -9 -00:05:07,320 --> 00:05:20,700 -Wes Bos: I don't remember that. Meeting keys. No, I think keys came along because they realized that the whole virtual Dom thing, I think keys allows them to quickly render just that piece of the DOM. Yeah, and being able to track it very easily - -10 -00:05:20,850 --> 00:06:39,420 -Scott Tolinski: track a single item. So I mean, so that it begins to peek into some of the aspects that are like react. So we have the aspects that are like Angular with your directives, and your templates and tax and things like that, that really feels like Angular. But the stuff that really feels like react is components and props, you're passing in props, there's this whole parent to child relationship, like you have in react. And you have generally creating components and the flow of creating components feels very much like react, you, you create a component, you import it, you use it pass props that way, okay. So that those aspects are very react similar. And then to tie it all together. There's little bits of magic here. And there. Sometimes we use things like the bind syntax, which we'll get into where you have quotes. And just like in directives, it seems like it shouldn't be JavaScript, because it's within double quotes, but it ends up being a JavaScript expression, or a variable or a value that you can use straight up. So that is something that is a little confusing for newbie, people who have come from react where everything is so explicitly JavaScript here that not everything is so explicitly JavaScript, there's a lot of view syntax stuff, that will seem just a hair different. But a lot of the times once you get the basics of it, it all feels very, very nice. - -11 -00:06:39,510 --> 00:07:02,880 -Wes Bos: Okay. And at the end of the day, the the core idea behind view is that you're just making components that render stuff, they have templates, they have logic as to what should happen when they load and when, when people clicks. And and they have, maybe you can talk about CSS or styling approaches as well. But the idea is, is a component driven framework, much like Angular or react was correct? - -12 -00:07:02,940 --> 00:08:24,020 -Scott Tolinski: Yes, absolutely. And so aspects of it, like I said, they feel very much like Angular. And as long as you have that Angular experience, it's going to feel like riding an old bike. And if you have that react experience, those things are going to feel like riding a bike as well. So it's just like, it's a combination of these great ideas. And I think that's why it's taken off so much, because it includes a lot of the best parts of react with a lot of the simplicity of Angular one that people like so much. And sort of that combination of the amount that you're able to accomplish easily plus simplicity equals total view magic. So that's definitely why people like it, and I can see if you've never learned react at all period, and you came directly from Angular one to view, it would almost seem like this was Angular two, you know, it almost feels like this is what Angular two should have been. Because it has that feeling of an upgrade upon what Angular one was, well, having all these new features. So one of the things that kind of gets me here is in the view Doc's, they often show sort of a syntax that you're never going to use a whole ton. In my experience, at least, they're often showing this whole creating a view component, just as a, like a very like, oh, here's how you create a component, but not necessarily how you do it. Even out of the box. If you're using the CLA. Let me get a good example here. I'm trying to pull up some code. - -13 -00:08:24,150 --> 00:08:34,619 -Wes Bos: Yeah, I'm just looking at the docks right here. And it just says like var app three equals new view, right? Is that how you mount it? Yeah, create a new view. And you give it a mounting point. - -14 -00:08:34,649 --> 00:09:11,130 -Scott Tolinski: Oh, yeah, that makes sense. So to create an application, you do you have a new view instance. And then you bind it to an item, or an ID, I should say, in your DOM, and that generates the actual code, right? But in the actual component, creating syntax, the way it ends up really working in the real world is that you have a file, that's your component. Within that file, you have a templates tag, inside of that template tag is all of your code stuff. So all of your your your view, your front end code, your when I say view, I mean, the i EW, not the you, ie, - -15 -00:09:12,630 --> 00:09:16,590 -Wes Bos: your HTML, your templates, what it looks like, right? Correct. - -16 -00:09:16,649 --> 00:11:16,590 -Scott Tolinski: Yeah, yeah. And then you have your script tag, typically, where you'd have your JavaScript if needed, the kind of stuff that you put in your JavaScript we'll get into it's kind of interesting, especially coming from react land where the whole file is JavaScript, a view file, you typically have the template, you have the script, and then you have the style. And then there's some other stuff occasionally as well. But the style tag is where you put the CSS. Now one of the cool things about some of this stuff is we'll we'll die first at the template, we'll go down to the JavaScript section, we'll go to the style section. In the JavaScript section, you have a template syntax that feels very much like handlebars, you have the double brackets, and then you have your JavaScript variable expression, whatever, right? And so that aspect of it feels very much Like Angular or any of these things, and then you have your components, which feel very much like react. inside of this, you have directives. So one of the most commonly used directives is the V hyphen, bind, and then a property. So this is how you bind a value to a property. So unlike react where you have a property is equal to a bracket, and then inside of those brackets is a JavaScript expression. This you have V hyphen, bind colon, the property is equal to double quotes. And then the JavaScript is inside of double quotes now inside of a bracket. So to me, that always feels very weird when I'm doing it. It feels simplistic, but when I'm looking at it, it doesn't feel great. That said, the the syntax highlighting were all highlighted to make it not look like a string and look like a JavaScript expression. That helps a lot. But v bind is one of these things you use pretty much constantly. And then because you use it constantly incomes, some of the view niceness where view knows that you're going to be using v bind all the time. So they give you a nice little shorthand, which is simply just a colon. So if you say colon, SRC equals to, and then a variable, that horse is going to be automatically bound to that variable. - -17 -00:11:16,799 --> 00:11:34,350 -Wes Bos: Okay, wait, I'm not sure I understand this. So if I've got a movie object, and I want to, I want to display that movie object, it's got a title, a description and image, do I just need to template it out with curly brackets? Or like, what is bind? I'm not - -18 -00:11:34,350 --> 00:12:35,909 -Scott Tolinski: sure what is bind for them. So bind is a directive that you would put on to an element. So in the idea of maybe you have an image, right, so your image tag has a source property, and you want to use essentially a JavaScript variable on that soar on that source property, what you can't do is sources equal to brackets property, because that just, you know, to use the bind syntax, like a prop in react would be like, source equals curly brackets, movie dot image, correct on this, it would be like if I want to make any custom Prop, or any custom directive, as it's called an in view, is that true? If you are passing props into a component, you don't need to use the bind. It's only for dynamic stuff. If you're passing in a thing that never changed, you could just say, the prop is equal to this string attached to a variable or an expression, then you would need to use the bind. - -19 -00:12:36,210 --> 00:12:53,250 -Wes Bos: Okay, so if I have a movie, and I want to pass down the the title and the description, if that would never change, I could just pass it down as a like an attribute, like a regular HTML attribute. But if I need to be live, like I'm using quotes here, then I need to bind it sort of, - -20 -00:12:53,819 --> 00:12:59,909 -Scott Tolinski: because what I mean by static is like that string is coming in as a hard coded string, not as in - -21 -00:13:00,179 --> 00:13:24,450 -Wes Bos: Oh, if you Oh, yeah, you were just manually typing it. But if you wanted to pass a variable or an expression that is, is calculated, correct, you need to pass it okay? Because in react, there's no difference between those two things, right? You either pass it as a string, you just type it in quotes, or you just give yourself a curly brackets, which tells JSX that this is a piece of JavaScript that needs to be run or and watched for future changes. - -22 -00:13:24,510 --> 00:15:15,899 -Scott Tolinski: Yeah, exactly. So that aspect of view is a little weird at first, for those of you who are coming from react to just think, Okay, I'm going to throw some curly brackets here, like my first inclination, when I wanted to pass in a data property to a source or something, I wanted to do equals double brackets, like the template syntax, because that's how you're displaying it in the template syntax, right. But that doesn't work. But the good thing about view is, is that when you make that mistake, they're aware of that that's going to be a common mistake. And the error message is saying, hey, use v bind instead, because work. So that's the first thing that comes up. So props, just like anything else, like we mentioned, can get passed down to another component. However, the big difference here is in react, you have access to the props via the function or class, right, they come in as this dot props dot whatever, or they come in as an argument or parameter to that function as props. The difference is view doesn't have that because they have this template syntax, right? It's template, your template code, script, whatever. So if you want to actually bring in a prop and use it, even if it's been passed down into your template, you have to inside of your script tag, you export a default object. And inside of that object, you have a props property, and that props property is an array of all of the various props that you're going to be using in your template. This is, like sort of foreign if you look down I have we have some code examples. We'll try to get these into the show notes too, that you can look at as well. Yeah. So this basically by declaring this props in the array, you can now free for all use it in your template just to simply bracket bracket the prop name, you don't have to pass it in, you don't have to have any. You don't have to make it available via function or whatever it just has to exist in what is this default object for the component. - -23 -00:15:16,169 --> 00:15:50,070 -Wes Bos: So in order to use data that's been passed into a view component, you must first specify what you're expecting to be passed in much like a like a, like arguments on a function or in react, I guess somewhat similar is prop types. Yep, yep, prop types, you would go ahead or if you're using like a typed component, or something like that, you would specify what you're expecting to have come in, and you can go ahead and use it. But in react, that's not explicitly necessary, you could just kind of willy nilly props that whatever gets passed in. Ah, okay, man, I am learning. - -24 -00:15:50,520 --> 00:17:59,550 -Scott Tolinski: It's you're getting you're learning on. And what's cool about this is you can define, instead of just saying like, here's the props and array, and you have like an image or something coming in, you can define what that prop is like, like, sort of like prop types where you can say, Okay, I have this prop coming in, and it's a string. So you can definitely specify, like the exact prop types that it needs to be just like react, it's just there is a shorthand to say these are the props that I'm expecting. Okay? So, props, that's how they work, no big deal, pass it in, tell us expecting, you can throw it in your your template tag as bracket, bracket, props, and then use it just like that. So inside of this script tag is really where all of your JavaScript happens for a lot of reasons. And this is this part is going to feel kind of foreign to people who work in react, because we're so used to having all of our imports at the very top of our file, do everything like that, and then have the view code itself. In view, you have your template tag, and then you have your script tag, your script imports. Anytime you import another component or anything into your view file, you import it within the script tag, which could be in the middle of your page. So this, this, to me always felt a little weird that my imports weren't at the top. But again, it's just like a thing that you got to get over. So if you wanted to, let's say use another component in your component, you import it inside of the script tag. So let's say import latest posts from blah, blah, blah, your view file, then inside of that same function, which is essentially the construction of the view component, where we define what props we're going to use, you also have to have another property named components. Now components is a property that accepts an object. And then you can say, All right, I'm using latest posts inside of this. So just like props, you have to let the view component know which components you're going to be using inside of the template. Because the template like in react, your template is part of a JavaScript function, right? But in view, the template sort of adjust its own thing. So you always have to like register your stuff to say, Okay, this is what I mean. Yeah. And after you do read that register, you have access to that component, just as if it was like important, - -25 -00:17:59,570 --> 00:18:37,310 -Wes Bos: okay, so in in react world, if you are creating a component, and you want to use another component inside of that one. So let's say I have a title component inside of my movie component. In react world, we just import the title component and go ahead and use it in in view world, you must go inside of your script tags, import that thing, and then almost export it, it's not exporting, but it's it's sort of surfacing it to the templates, like if you if you want to get it outside of the script tag into the template tag, you must import it and then surface it via the components property on this, this export that we have. - -26 -00:18:37,380 --> 00:19:15,050 -Scott Tolinski: Yeah, and that's very true. So that's anything that you're using in your template tag that's not just straight up HTML needs to be defined, essentially, somewhere in your script tag. And that that's true for data. That's true for components. There's even some things called computed properties, which are essentially just functions where you can have a function that uses data to calculate things on the fly, right? Because instead of having a JavaScript expression in your template, like we kind of often do in react, the preferred way would be to maybe have a computed property that does it inside of the script tag, just to know cleaner. It's - -27 -00:19:15,050 --> 00:19:21,150 -Wes Bos: almost like a property. But under the hood, it will be it's like a function that will get run. It's like a getter and setter in JavaScript. - -28 -00:19:21,239 --> 00:19:26,880 -Scott Tolinski: Yeah, you can almost think of it as like having a function in your render or something in, okay, because you - -29 -00:19:26,880 --> 00:19:36,540 -Wes Bos: can't just use JavaScript anywhere inside of a view thing, you have to put it inside the actual JavaScript part, which will then surface it via to the templates. - -30 -00:19:36,779 --> 00:20:01,200 -Scott Tolinski: Yeah, so a lot of these things that we're running into is really just a result of the fact that the template is separate from your JavaScript. Yeah, I mean, it exists typically in the same file or can exist in the same file. But it's still separate your JavaScript isn't there for your templates. So you can't just write JavaScript in the template like you can in react. So it feels a little bit different there. But some of the things I really like about view worthy. I - -31 -00:20:01,200 --> 00:20:02,460 -Wes Bos: don't mind this at all. - -32 -00:20:02,520 --> 00:21:04,230 -Scott Tolinski: No, no, no, it's very, um, it's very elegant when you get into using it. So we talked about data and all this stuff, we have something called actions as well. And actions, they use a directive called v hyphen on so you'd say V hyphen on colon, and then click to do a click event on something. And then that is equal to a double quotes. And then the event like the function that should happen in the event that feels weird to me, considering it's double quotes, and then a JavaScript function, but whatever, that's just how it is, with a lot of stuff in view. Because you end up doing events so much, you end up also having a nice little shorthand. So with bind, we had just colon, whatever the property is, with events, you have the at sign, so you'd say at click is equal to function. And that function will then run when you click it. So it's, again, when you first look at a view template, and you see these colons and add signs, you might be like, well, but once you really get like what's going on with them, like quickly, it's really easy to get a quick look at it and see, you know, what's going on here, - -33 -00:21:04,260 --> 00:21:40,850 -Wes Bos: I like that because like in react, you you don't know if something is passing like it's like on click or on on whatever. And in this, it has a an add sign at the front. So you can quickly scan and see, oh, this is an event that will happen. And I could see that. Yeah. So another question I have is how do you pass arguments in react world, if you're trying to like pass an argument to an onClick handler, you have to like put it like a inline little arrow function, or use bind or something like that, in order to just pass an argument to something? How do you do that? In view? Magic? - -34 -00:21:41,010 --> 00:22:30,990 -Scott Tolinski: Yeah, some little magic fingers go on here. No, you just do it. And it just works. You just say like, if the function is going to be do something, you would say do something parentheses and whatever the thing you need to pass in to do something. So unlike react where if you were to do that, it would just run the function immediately. Again, this is some of the differences of view. And react is again, that react is actual JavaScript functions and classes were viewed template syntax is a template syntax, right? It has, it has its own things that are are not necessarily rooted in just straight up JavaScript. So the fact that we can say, just have a normal function inside of there that runs in past an argument when you click it, I like that I like it a lot. It seems like there's not a lot of extra fluff in there. Yeah, like, you don't have to have a bunch of extraneous syntax just to make it work with JavaScript. - -35 -00:22:31,110 --> 00:23:03,900 -Wes Bos: I was just gonna ask a question of how do you solve the problem of like injecting reusable code, like in react world when we've got templates, and then we have like functionality, you have to use like, or you have data, and you want to inject that thing into there, then you have to use like a higher order function or render proper now we have hooks, but I think that this is very simple. To me, it seems like if you want to inject extra functionality into a component, you just import that functionality, and put it into the methods are the component, computed part, and then you just have access to it? - -36 -00:23:04,320 --> 00:24:19,500 -Scott Tolinski: Yeah. And I think I think there is some some view learning going on in terms of like the changes that hooks have made to react and how I think of this, because there's definitely like a lot of talk about hooks in you know, I, I'm not up enough on the view, sort of like what's coming down the line in view. Yeah, but it does say they're planning integration with hooks into view three, but it's going to not be the exact same as reacts implementation. There is some some progress on it. There's a really great CSS tricks article on this, that we can link up in the show notes that you can see sort of status or something like hooks inside of view, but it seems like there are, and this is one of my favorite strengths of view is that the team seems to really understand progress. And the view framework itself is constantly growing and learning and taking advice and taking things from other platforms. And I think that aspect of view is what makes it so so appealing, besides its simplicity. One of our sponsors today is also very appealing because of not only its simplicity, and its interface, but the functionality it's going to get you which is a new sponsor for syntax. And this is clubhouse - -37 -00:24:19,710 --> 00:26:51,870 -Wes Bos: Yes. So clubhouse is it's going to, we're just kind of talking about, like how should we explain what this sort of thing is? It's project management software for web development for software development that sort of brings everybody who's on the team together. So you've probably heard us in the past complain about different project management software out there, things like JIRA is out there or Asana is another one and these things are often very frustrating to work with because of just the extra work that it puts on you. And the the confusion and everything is editable input and things like that. So clubhouse is aiming to bring you This like really good project management software that makes your life as a web developer as well as your VPS, your CTO, your actual project manager, their life really, really easy because often, it seems seems to be that the the project manager loves getting in these the software, but the developer hates it so much and makes them want to want to cry. So let's talk about it real quick clubhouse is the first project management software that brings everyone together so that teams can focus on what matters creating products that customers love. clubhouse provides a perfect balance of simplicity and structure. For better cross functional collaboration. I think that's, that's really important, like this thing is beautiful, that the design of it is really, really nice. It's, it's really easy to sort of reason about what's going on in this. Whereas some of these other project management software's, it's just, you're clicking around forever, and you can ever find whatever it is that you want, it's really easy for people on any team to sort of focus on their specific task, we talk a lot about just like breaking down what it is that you have to do into small tasks that are well defined, right? And you can do that and you can really focus in on what you want. But then you can also zoom out and see, how is the team doing? What are we working on right now? What is in progress, what is not done? What is currently being blocked all that good stuff. So if you're looking for a better solution for your project management software, or if you're looking for a solution at all, I know a lot of you are just kind of sending emails and whatnot, check out clubhouse that's at clubhouse.io forward slash syntax, podcast, all one word, all lowercase. And what you are going to get is two free months of clubhouse, which is awesome. That's better than their standard trial. You want to check it out. clubhouse.io forward slash syntax podcasts. Thanks so much to clubhouse for sponsoring CIC. - -38 -00:26:51,960 --> 00:27:01,410 -Scott Tolinski: If you don't if you don't need that kind of management, check out their website, really nice interface. I was a loving not only this site, but the clubhouse interface. It's really good. - -39 -00:27:01,470 --> 00:27:15,900 -Wes Bos: Yeah, they got one of these, like scrolly websites, where as you scroll, it highlights different things. But it's done very, very well. So you don't feel like nauseous using it. I love it. It's some of our sponsors have just awesome. Do right? That's - -40 -00:27:15,900 --> 00:27:18,030 -Scott Tolinski: a common thread. Yeah, that's very common. - -41 -00:27:19,530 --> 00:27:21,690 -Wes Bos: Alright, keep talking to me about a few. - -42 -00:27:22,020 --> 00:29:13,200 -Scott Tolinski: Okay, so let's get into something that you are familiar with from react, which is the lifecycle. Now we're probably thinking about the life cycle a little bit differently. Now that hooks are in react, because you're not thinking about component did mount will mount all that stuff, you're just thinking about it mounted and updated. And you're using effect, right? Although for those of you who haven't dove into hooks, yet, you're probably very familiar with the idea of a lifecycle method, a lifecycle is method is basically a function that runs at various points during the components life. Okay, a component has a life, it is initialized. So then a method is run called before create, then it's created. So there's before create, there's created, then there's before mount, then there's mounted, then there is before destroy and destroyed. But there's also before update, and updated. So any individual state, whether it's updated, mounted created, there's both that event and the pre before one that you can run. So view gives you a ton of lifecycle methods to basically make it available to do anything at any given point within the lifecycle. Before After the component is a created or destroyed. Like one of my favorite things about view, I think this highlight that very clearly is that they make the common things very, very simple to do. And they make the uncommon things very possible to do. So a lot of frameworks will sacrifice simplicity for, you know, ease of doing the easy thing. They'll do simplistic, easy things. And then it's difficult to do the hard things, I think view makes the easy things easy, like super duper easy, but they also make the hard things available and superduper easy, you're not going to have to be diving really hard into the framework to figure these things out the right there for you. So if you need to use the component lifecycle methods, they're giving you a ton of options for it. So it's all available to you, - -43 -00:29:13,230 --> 00:29:21,690 -Wes Bos: and how do you use them? Is it just like a more properties inside of that script tag that we move bet, ah, but you - -44 -00:29:21,690 --> 00:29:36,180 -Scott Tolinski: don't have to define them in terms of like, there isn't like a parent lifecycle method property, the property is just that of the name of the lifecycle knob level inside of the obligated, yeah, created, updated, destroyed, that sort of thing. - -45 -00:29:36,330 --> 00:29:57,810 -Wes Bos: And what about data fetching? Is that where you would you would go off and fetch some data inside of one of those. That is where you would be fetching data. Yeah. Okay. And then what about like state? Maybe I don't know if you have this on here as well. I'm just starting to think about like, if I were to go off to API and grab some list of things, where do I put those things when they come back? - -46 -00:29:57,990 --> 00:31:03,360 -Scott Tolinski: Yeah. So this is funny because It's the same as data, right? So you have a property on your general view object, which is simply just data. Okay? So all of the properties, anything within data is going to be reactive as then when you change it, it's going to update in the template. So you'll have a data property in here, let me see if I can modify this code that we have in here, you have a data property. And if you were to say something like, Alright, I have some initial state which is is nav open or something. Now you could just say is nav open, is equal to false in that's in the data. Now, if you were to have an event that you were to access and modify that data, you access that via this. So let's say I have a method, you click the button, and it's supposed to toggle that you would then be able to have access to that data property, as this.is never open, you can modify it. And again, it's reactive. So it's going to update in the template instance. - -47 -00:31:03,599 --> 00:31:11,460 -Wes Bos: And then to set state do or to set data, do you just overwrite the variable? Is there a special function to do it in like a new killer way? - -48 -00:31:11,639 --> 00:31:30,930 -Scott Tolinski: Yeah. So basically, setting the value of the property is going to reactively update it. So yeah, so there isn't like a this dot set state. Because in react, we have this this concept of state, and we think about it as state, but in view, it's sort of just like data, right? Here's your data. These things are reactive, it's bound just as an - -49 -00:31:30,959 --> 00:31:35,310 -Wes Bos: object, you could just get data in the object and it will update itself. - -50 -00:31:35,429 --> 00:31:39,630 -Scott Tolinski: Yep. Again, you have access to that data in all of the methods and everything. Yeah, - -51 -00:31:39,749 --> 00:32:01,170 -Wes Bos: I wonder if there's any, like issues with like a synchronous, where like, the data hasn't been updated yet, but the thing re renders that we have like issues like that in, in react, although I think that they're mostly gone now that we've got hooks, I don't know, tweet us index FM, if you know of any of the things. I'm sure there's some like deeper edge KC things, but we're not gonna dive too deep into that right now. - -52 -00:32:01,349 --> 00:33:33,570 -Scott Tolinski: Yeah, view pros. If you are hearing me say anything that you think is not entirely accurate, please let us know. I've used view on several projects, but I haven't used it on a project the size of level up tutorials. So yeah, you know, there's so many of these little edge cases and things you get into or ideas you get into when you're building something really huge. So by all means, please share your your view knowledge with us. So next, we're going to get into CSS. And CSS is really cool, because just like anything else, in view, it's all defined on this one file typically. Or you could break it out into its own file, if you really want i like it sort of in this file, it reminds me of styled components, but you just basically have a style tag in the bottom, you can enter all your CSS there. And one of the really cool aspects of you that I just really, really like is that if you want to scope the CSS to that file, specifically, all you have to do is add a scoped property to your style tag. That's it, and then it becomes scoped. And then to me that like really makes the the need for something like styled components much less because do you have a system to have like really tightly scoped CSS if you want it, or you can have global property CSS in here, if you want it as well. So they give you a lot of options, whether you want to lock it down, or something that said, the view docs, like one of the things I like instantly thought it would be really great to just define everything as elements now and not have to put classes but the view Doc's recommend against doing that, because of performance reasons. So they still say recommend styling everything via classes, you just have the ability to scope it to the file. - -53 -00:33:33,809 --> 00:33:48,390 -Wes Bos: Okay, I see, that's cool that that like scoped attribute was actually proposed for the browser where you just needed to, like have a scoped attribute, and it was in the browser for a while, but they nixed it and took it out, which is kind of a bummer. - -54 -00:33:48,779 --> 00:35:10,670 -Scott Tolinski: Yeah. And let me tell you, I think that's like part of the view stuff here is that it, it really just takes good ideas from a lot of places, make something that's very good. So one of the cool ideas that I've gotten to use in the grid, some course that I was doing, I didn't actually do this in my previous view course. But I discovered how cool it is, while I was doing the grid some. And this might work, people might argue, and this global component registration, which doesn't really sound like a huge deal. But global component registration is you're basically saying view component, and then you pass in a component name. And what that does is it makes that view component available to every single template without having to first register it. So in the poll, we suggested saying import the component, then you have to sort of register it and then you can use it. The way that I found this to be best used is for something like a layout. When you're first starting with grid sum, which we'll talk about in a little bit. And their default code, they have a layout defined as a global component out of the box, and the fact that you could wrap every single one of your files in the main layout without having to import it every single time. was a really, really nice thing you did like the here's a component they use all the time. So therefore, you should just be able to register it globally makes it available act access to every component ever. - -55 -00:35:10,880 --> 00:36:19,050 -Wes Bos: It's kind of nice. Yeah, you know, you know where I used that myself is this is actually something that I got added to Gatsby MDX where I was writing my blog posts in markdown. And I wanted like, like the equivalent of WordPress shortcodes. In Gatsby. So I made these like YouTube components, where I just say, like YouTube component, and you pass it the ID. And then, and then I just wanted to, like use that anywhere in a markdown. And the way it was, was that I had to like, import it every single time, I wanted to use it and was like, that's a bit of a pain in the butt because I have to, like write an import statement for every blog post that wants to embed YouTube. I just want this idea of like globally, available shortcodes or whatever, and I and they added it into Gatsby MDX. And now there's this ability just to globally make things available. Like imagine you had to import an h1 tag every single time you wanted to use an h1 like that. There's like, there's already a concept of global things in the browser. It's called HTML. So if you are using these things over and over again, maybe it wouldn't make sense to to make them globally available. I know that people think that global is bad, but it makes sense to me, right? - -56 -00:36:19,350 --> 00:37:18,510 -Scott Tolinski: Yeah, there's definitely some some specific areas where I think it was excellent. And like I said, I, when I first started using it in a grid zone, which is a static site generation, I was just like, Ooh, this is cool. I like this, I like not having to like not having to import this. So it just felt really nice. Some of the cooler things that that view does is they have a really great COI to get started. And you know, they've had it the whole time. So or at least in some regard, when I first started using the view COI, it's I mean, it's view, create my project, whatever, it makes it really easy. It's a lot like create react app, obviously. But I think it was sort of create react app before create react app is what it is. Now they did a really good job with it. And I think that was one of the first things that will tie people to Vue js is because they'll use the COI, they'll see how easy and nice it is. And they'll get hooked by that sort of like a lot of the stuff that the simplicity of getting going with it is just so easy that it's gonna make it's gonna draw people in - -57 -00:37:18,510 --> 00:37:32,480 -Wes Bos: totally, that's why I think Angular one as well was just, it was so easy to get up and running. And then they showed you this little mg bind, and then the variable changed and the UI updated. And you're all coked up on how amazing that was. - -58 -00:37:32,820 --> 00:38:07,670 -Scott Tolinski: Yeah, when you don't have any, you don't have any issues or bugs getting going right. You're just getting going without any issues. But let me tell you, if you do have some issues in your code, you're done. Thank you. super smooth. That's what I'm all about. I had a Nitro cold brew today. So I'm feeling I'm feeling smooth. So century@sentry.io is the bug and error tracking service that you're going to want to try? because let me tell you, we've both been using this since I last for me long before they were a sponsor of syntax. I know Wes, you've been using Sentry for a good amount of time as well. - -59 -00:38:07,859 --> 00:38:15,150 -Wes Bos: Yeah, probably like three, three or four years now. And they when they sponsored my Redux course, I think about three years ago, - -60 -00:38:15,540 --> 00:40:02,460 -Scott Tolinski: yeah, I've been using just because I was looking for initially at a time bug tracking services. And Sentry really stood out to me for a lot of reasons. And I'm really glad I chose them. Because honestly, this is a service that I can't live without, I look at my bugs all the time I get the error messages, I assign them to GitHub issues, we go and tackle them that way. Or I can see if something that's happening on the front end or something is maybe a one off thing, something a little interesting, I have some occasional bugs with the YouTube player. For instance, I have a bug that says the YouTube player is not attached to the DOM. I honestly don't I think this is an issue that comes up because of people's blocking software or things like that. But again, it's not an issue with the code. And so what I can do is I can go ahead and select this error, and I can click ignore. And guess what, I never have to worry about that bug popping up again in my system, because I'm ignoring it. And so the fact that Sentry gives you full control over how you can organize and track your bugs is such a killer feature for me, you can look at things in the last 14 days, the last seven days, the last 24 hours, you can see how many times and how many users these these bugs occurred for. So if I can see that I have one error that's occurred for one person in the past 365 days. I know that that is not something I need to spend my time on. There's something that's hit, you know, 12 people 12 times in the past five minutes, I'm going to be drawing my eyes to that immediately. There's beautiful graphs to show you everything stats and activities. just brilliant, brilliant stuff. So check it out@sentry.io use the coupon code at tasty treat all one word all lowercase and get two months for free, which is something you're going to want to do. Let me tell you, I'm a big fan of Try it out at Sentry dot i Oh, - -61 -00:40:02,690 --> 00:40:07,350 -Wes Bos: beautiful. Alright, let's talk about animations in view. What does that look like? - -62 -00:40:07,560 --> 00:42:15,210 -Scott Tolinski: it's baked in a lot of stuff in in view is baked in truly nice, really nice and easy. animations. Specifically, if you used Angular kind of feel like the right at home, it's basically mg animate, where you have, it's not mg animate, necessarily, but you it functions the same way. And what you end up having is a transition component. Now, the cool thing about a lot of stuff in view, is we don't have to import this from some library, we don't have to be like import transition from view slash transition, whatever. Yeah, we just have access to transition if we want it, which is great. Because simplicity, right. And so we have transition is equal to and then you have a name, name, or transition is a component that wraps around your code, it has a name, it's equal to you give it a name. And then everything inside of that transition is expected to be some kind of conditional. So maybe you have Vf in the initial one that just toggles that on and off. And then just like in Angular, or even create a react, transition group, or whatever, that item ends up getting classes applied to it based on the name you gave it. So if you gave it a name of accordion, you'd get the classes accordion, leave active accordion, interactive, accordion, enter accordion link, leave, basically all the same class stuff that you get from react animation group, or mg animate those sort of things. So if you're feeling like you've ever used any of those before, it's gonna feel very, very at home. And if you're feeling like you want more control over it, there's also the ability to really dive into custom animations via methods via actions, or a directive. So you could say V hyphen, en, before enter the en, enter, and then have it run functions at various points of the animation cycle. So if you want to do a very basic animation, it takes a couple of seconds, you wrap your code, you have a conditional, you write your CSS, BINGO, BINGO, you have yourself a transition, if you feel like you want to do a ton more than that you have the ability to as well. And that's really just the the core. I don't know, core principle of view, in my opinion. - -63 -00:42:15,360 --> 00:42:24,330 -Wes Bos: Yeah. One question I forgot to ask was CSS. Just write regular CSS can use sass stylists, what do you use in there? - -64 -00:42:24,630 --> 00:43:41,640 -Scott Tolinski: Yeah, with anything, it depends on your system, your build process. vcli uses web pack out of the box, right? You don't really think about web pack ever, which again, is just great. But you have the ability to use loaders. Okay, so view loader is essentially a package that is a loader for Webpack. Okay, so in my experience, you use something within view loader, like a sass loader itself, and then you would need another library like node sass, so you would install sass loader as well as node sass. And then inside of your Webpack config, you would have to declare that you're going to be using sass, or SCSS. And then inside of your actual style tag, anytime that you wanted to write sass, you would have to say Lang is equal to s, CSS, or whatever it is. So you could have multiple loaders in multiple different pre processors. If that's how you roll, you could have less than one file in SAS, and another if you want to do, but this also works the same way. If you're doing HTML templates, or something like if you wanted to use pug, you would use the pug loader and then you on your template tag would say Lang is equal to pug. And then you can write pug instead of the view template. - -65 -00:43:42,060 --> 00:43:47,730 -Wes Bos: Cool. I like that. That's, that's pretty neat. You can just extend it. Yeah, with Webpack loaders. - -66 -00:43:48,120 --> 00:44:41,160 -Scott Tolinski: Yeah, and a lot of the libraries, they end up using view loader. So you, you learn how to do it once. And you can do it in all of the different ecosystem packages as well. And just like transitions, animations make it nice and easy inside of view. Another thing that they make really super easy is routing. Now routing isn't baked in to view but there is an official library. So unlike react, there is a Vue JS view router. And so you would have to use that router by installing it separately. But other than that, it is very easy to set up. And since it's part of the core product, it's supported via the view core. There's also third party routers. So if you want if you're not happy with view router, you can install a third party router. So makes it really nice and easy. That said, you know, nothing really crazy there. Just the fact that it exists as an official router is maybe the biggest change. - -67 -00:44:41,280 --> 00:45:05,850 -Wes Bos: Yeah, I almost wish that react would be more opinionated about things like these Just tell me what to use rather than us getting a new router every three months. But there's obviously benefits to both sides of that. We've seen some really great changes to the routing ecosystem over the last couple of years. Yeah, there's that too, but it's kind of nice. It's just batteries included, it tells you what to do. It's very friendly, friendly approach to learning all these things. - -68 -00:45:06,180 --> 00:45:19,950 -Scott Tolinski: Yeah. And if you're looking for something like Redux and like a flux like implementation, there's forgive me if I'm saying this wrong, but view x view x. It's a view v. View, - -69 -00:45:19,950 --> 00:45:24,750 -Wes Bos: Edie, I can't like Tiger Woods drives a Buick and Buicks - -70 -00:45:25,080 --> 00:45:27,660 -Unknown: view. us. - -71 -00:45:27,810 --> 00:47:29,730 -Scott Tolinski: Yes. Yeah. And then this is a library that's also in the view core repo. And it does try to be sort of Redux. See, there's good dev tools, there's time traveling. So it seems like they like took a lot of the great stuff that said, I haven't used view x myself. I think it is well liked amongst the community. But it is seemed to be officially supported. I haven't dove into it, because I haven't needed that kind of state in any of my view apps. But it exists. And so lastly, let's talk a little bit about the ecosystem because the views been pretty popular now for a little bit. So the ecosystem has evolved right along with it, even though I mentioned like, you know, I said the the routing system they exist is supported the view x, but there's outside third party stuff that's really, really cool. For instance, there's nuxt, which you may have heard of by now, which is basically next j s for her view. And I say basically, I mean, it's a view j s framework that handles a lot of the same stuff that next JS would as it does sir server side rendering, or it can do statically generated, it can be single page apps, it does a lot of things, stuff that you would use next JS for. And I think people really seem to like it. I haven't used it myself. Again, I've only used the views t Li and I've used this next one. The next one is grid, some actually have a course out on grid, some that just came out. And I'm not I'm not just using this as a way to advertise grids. And if you like Gatsby, then grid some is for you. because let me tell you, you know, I saw grid some and I was thinking initially that they were going to be just like ripping off everything from Gatsby, especially if you go to their their website, because it's all graph qL base is a static site generator. It's progressive web app ready. It really looks exactly like Gatsby for view. Like if you have experienced with Gatsby, you're going to be like, grid some is sweet. But let me tell you one of the things that grid sim does way better than Gatsby, in my opinion is simplicity, which is sort of overall message with with with us. - -72 -00:47:29,760 --> 00:47:30,930 -Wes Bos: Yeah, yeah. - -73 -00:47:30,930 --> 00:49:37,890 -Scott Tolinski: So instead of having to write like in the node file, right. So in Gatsby, if you want to create pages via an API call, you say, All right, let me do the the graph qL query, let's get all the pages, let's loop over them. And let's create that, right. It's a bunch of code in grid segments a little bit more config based, right, we have our config file. And I can say, All right, let me create a new thing called blog posts that's based off of every single markdown file in this folder. Okay. And then once I have that collection created as blog posts, go ahead and just also create a route for me at forward slash posts forward slash slug. And yeah, just go ahead and do that. And just that simple aspect of defining a property of Route in the plugin, config file, allows it to just actually it takes a template name to the same thing and create that route for you with every single page. We don't have to do a query to go grab all those pages and created grits and just does all that stuff for you. So they take a little bit of a configuration approach over explicitly writing all of the code. And it's really for the best To tell you the truth is some of the stuff I actually wish Gatsby would take a page from from goodsam is that they make everything super duper easy. So between that config based generation of pages and the aspect of registering global components, I actually find my code to be way smaller and grid sum than it is with Gatsby is really super elegant. And again, it includes all of the the great features that we love from Gatsby. So as somebody who's a big Gatsby fan, I'm now a big grid, some fan as well, this thing is really super cool. In terms of like lessons learned. It does all the same stuff. Well that Gatsby does too. So it's like Gatsby just a little bit different. And if you're a view fan already, then I highly recommend checking it out. If you haven't used view at all, it could be a good way to dive in a little bit. And for native, we have native script. It's been a sponsor syntax before they can do Vue JS native apps. There's also a view native, but I haven't used view native honestly have no idea how good it is. - -74 -00:49:38,370 --> 00:49:48,900 -Wes Bos: Evan, you was working on you know Alibaba, they're big on view. And I thought that they were working on like a React Native equivalent for view, but maybe I heard that wrong. - -75 -00:49:49,470 --> 00:50:05,220 -Scott Tolinski: Now that's a great question. If you know of any, like the native situation of view, let us know because I haven't used anything for native for view. I've only used React Native myself personally. So yeah, let us know. But that's pretty much it. Did you? Did you learn about view? Do you feel like you have a handle? - -76 -00:50:05,430 --> 00:50:35,100 -Wes Bos: Yeah, it's funny like, even though I haven't written any like, I bet I could, I could whip up a little view project, no problem fetching data and displaying it. And without it, it doesn't seem like there's any gotchas where react is very much full of gotchas, or this is how you do it in react. This is the React way. These are the weird things you have to do if you want to have a space in react or just things like that. Right? Yeah. And it seems like view doesn't have any of those gotchas, and it seems very friendly. - -77 -00:50:35,250 --> 00:50:53,550 -Scott Tolinski: It's very friendly. There certainly are gotchas, but the view errors like do a good job of letting you know you had a gotcha like, okay, you tried to use the double bracket syntax and a property, maybe you should think about doing it the right way and use the bind syntax. So there's it's very friendly In my opinion, and I like it. I like it a lot. - -78 -00:50:53,850 --> 00:51:04,380 -Wes Bos: Amazing. Cool. Well, thanks so much for explaining all of that to me. I'm excited to try it out. Thanks for the listeners for holding on for what three years in order to get a view episode. - -79 -00:51:05,850 --> 00:51:06,630 -Scott Tolinski: You did it - -80 -00:51:07,290 --> 00:52:49,590 -Wes Bos: maybe I'll actually build something now and then we'll we'll have a follow up episode talking about what we learned and whatnot. Yeah, yeah. All right. Let's get into some sick pics. I've got a really really sick sick pic today. So my daughter's birthday is coming up in we bought her a power wheel which is like this like Fisher Price like car that you drive and I found it for pretty cheap on Craigslist and the thing about these Power Wheels that they have like lead acid batteries like you would find in your car and they degrade over time they don't last very long on a charge. So I was like looking around I was like I wonder if I could like use my my like drill batteries because I've got all kinds of these batteries these 20 volt batteries that power my drill and I went to YouTube and I went down this rabbit hole of people that hack their kids Power Wheels in all types of ways. And I found this this forum called modified Power Wheels calm so that's my second pick today. And I just like spent all last night ordering all kinds of new projects and I'm like I'm installing I'm gonna try to install like a remote kill switch. And it's really cool because I'm learning a lot about electronics and how it all works I know enough about it but things like pulse width modulator like I want to be able to take the 20 volts and and turn it down so that they don't go like get airborne like that's probably too fast for them and I want to be able to install the remote kill switch and there's just all this like kind of fun stuff that you can do to these Power Wheels and as like a hacker in general I love this kind of stuff so I'm I'll probably make a video of myself hacking this thing if it goes well and just look forward to that. Oh my god - -81 -00:52:49,590 --> 00:52:51,420 -Scott Tolinski: that sounds awesome. - -82 -00:52:52,890 --> 00:52:54,270 -Wes Bos: I'm gonna get one that Basti I'm - -83 -00:52:54,270 --> 00:52:58,320 -Scott Tolinski: super real and have a flame shoot out the tailpipe that would be great. - -84 -00:53:00,690 --> 00:53:01,350 -Wes Bos: What am I Oh, - -85 -00:53:02,070 --> 00:54:19,260 -Scott Tolinski: my sick pick is going to be easy jeans. By Uniqlo These are my favorite things in the entire world. Actually, it's funny. I had these jeans that I refer to as my sweat pants jeans. That a friend of mine got me in Korea at Uniqlo when they were a Korea exclusive and this was like five, six years ago and I love these jeans. I used to breakdancing them all the time. Because they feel like sweatpants. They're super stretchy. They honestly it feels like you're wearing sweatpants when you're wearing them. And I like held on to these jeans for so long. Because they were so comfortable. And guess what? They are finally in the US and they look way better than the old ones like the old ones. I had had like a elastic waistband. That drawstrings and, and Courtney is always referred to them as my grandma jeans. So she would say, No, you're not wearing your grandma jeans. And I felt so comfortable. Just like they have an elastic waistband. What are you doing? So these ones actually look like real jeans. They look very much like just like real jeans, but they feel like sweat pants when you're wearing them. I got them for my dad for his birthday and he's been living in them just like I've been living in mine. I'm about to buy like five more pairs. So check it out. I have a link in the description easy jeans, you won't regret it. They look like jeans. They feel like sweat pants, the author amazing. - -86 -00:54:20,160 --> 00:55:17,070 -Wes Bos: That's great shameless plugs. today. I've been working on some kind of informal YouTube videos of me building a scraper. So we did the we talked about this a couple episodes ago where people are asking more questions about the scraper. I was like, maybe I should just flip on a screen recorder. Next time I build something that's a scraper. And then I thought like I would love to be able to track and get some stats on like follower growth over time on Twitter and Instagram and probably should do YouTube as well. So what I've been doing is just this sort of like, it's very different than most of my tutorials where it's not polished at all. I don't really know what I'm gonna do. I sort of just think it up as we go and I sort of live code the thing. I do some light editing, so you're not sitting there for 45 minutes watching me try to debug something. And it's been been really enjoyable just to be able to do something quick like that and throw it up on YouTube people seem to be enjoying it as well. So I'm Wes Bos on YouTube, you can check out the playlist. I'll also link the playlist in the description below - -87 -00:55:17,160 --> 00:56:25,890 -Scott Tolinski: ran shownotes Yeah, I'm going to shamelessly plug my new course if you can't tell I'm excited about this. And I'm, I don't get excited about things just to get excited about them. But I'm excited about grid some because if you ever heard me talk about Gatsby before, you know, I love Gatsby. And so to have this sort of capabilities that Gatsby has in a way that's really really fast using view, then I'm all on board with it. So my latest course at level up tutorials is static view with grid sum, and we teach you how to build really fast, dare I say blazingly fast static websites in grid sum, which is view j s and it's it's really superduper cool, we built a blog with markdown it does all the good stuff you'd want it to do. And yeah, I'm really super excited about we even teach you a little bit of graph qL along the way, so if you don't know any graph qL Don't worry about it. And if you don't know newview there's a Vue JS for everyone course over I level up tutorials as well and you can get access to that along with every other tutorial course for just 19 bucks a month or 185 a year save 25% when you sign up for the year I level up tutorials.com forward slash Pro. That's all I got. Beauty. - -88 -00:56:26,010 --> 00:56:35,370 -Wes Bos: Alright, that's it for today. Hopefully you enjoyed it. Let us know your view tips and what you thought of this episode at syntax FM. I'm at Wes Bos and Scott is at s to Lynskey - -89 -00:56:35,610 --> 00:56:39,120 -Scott Tolinski: he already that's it face, please - -90 -00:56:41,190 --> 00:56:50,940 -Unknown: head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax131.srt b/transcripts/Syntax131.srt deleted file mode 100644 index 297c3593c..000000000 --- a/transcripts/Syntax131.srt +++ /dev/null @@ -1,248 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi ski. - -2 -00:00:25,950 --> 00:01:04,799 -Scott Tolinski: Oh, welcome to syntax. In this episode, we are going to be bike shedding, which for those of you who don't know, it's basically about arguing about things that don't matter. So we're going to be getting people really spicy, because let me tell you, Wes even just mentioned that we're going to be tweeting this episode and it started some general spiciness. So this is the best way to describe it. Here, we're going to give you some some very spicy bits in this episode, we're gonna have a lot of fun doing it. This is gonna be a lot of fun. My name is Scott Tolinksi. I'm a full stack dev from Denver, Colorado and with me, as always is West - -3 -00:01:04,799 --> 00:01:06,900 -Wes Bos: boss, sup everybody, - -4 -00:01:07,010 --> 00:03:04,080 -Scott Tolinski: sub West. West is also a full stack developer from Hamilton, Ontario. And what we're going to be doing today, again, is bike shooting. This episode is sponsored by Log Rocket. Now most of the things we're going to be talking about in this episode could be classified as trivial Log Rocket does something that should not be classified as trivial, which is allowing you to stop guessing how your bugs happen. This is something that is exceedingly important. You have bugs, everybody say it has bugs, that's just something that happens, which shouldn't happen is your users shouldn't be coming to you with the bugs first, you should be seeing them in your error tracking system. Now, a lot of times your error tracking system may not give you all of the information that you're might want. So what Log Rocket does is it comes in and it says, Hey, you know that that bug that's happening? Well, here's how it happened. And here's a video of how it happened. And here's the error log of when it happened. And here's the Network tab. And here's the Redux store. And here's all this good stuff that you would want to see when that bug happens. And this thing works with all the tools you know and love from react, angular view, Ember, Redux, all that good stuff. But it also works with any of the error tracking tools you already use. So they formed together to create some sort of a super team bug solving abilities. Log Rocket is really, really super cool. And one of those things that once you have the visibility of these bugs, it's like the lights been shined, your bugs stand no chance. It's like turning on the light in a closet and seeing all the cockroaches try to scatter. They're not going anywhere. You got them. So you want to check out Log Rocket, that is Log Rocket at Log rocket.com forward slash syntax, and you will get 14 days for free. Let them know, tell them that syntax Sencha. We love that lothbrok it's really great service. So just check it out Log rocket.com forward slash syntax, find those bugs that you could not find without it. So you had a fall. Let's get into some Sheddon. - -5 -00:03:04,140 --> 00:04:11,880 -Wes Bos: Yeah, so bike shedding if you've never heard the bike shedding before, the Urban Dictionary describes it best as technical disputes over minor marginal issues conducted while more serious ones are being overlooked. This implied images of people arguing over what color to paint the bike shed while the house is not finished. So it's not that these things that we talk about don't matter. In a lot of cases, it's fun to talk about these things like color schemes and fonts and tabs and spaces and things like that. But they are just topics that we will talk about and argue about until we're blue in the face. And then tomorrow, we'll start up again. And there's things that don't necessarily matter. They don't maybe they will help you write better code if for some people, and that might be your opinion. For other people, it might not be it. And these are the types of things that are often fire for arguments on Twitter. I was just telling Scott that I tweeted out like, what are your what are the bike sheds? And there was a couple people who went through all of the replies and started to like argue, like, Oh, this is better because of xy and z. And then they just like got into it - -6 -00:04:11,880 --> 00:04:12,720 -Unknown: or like, Okay, calm - -7 -00:04:12,720 --> 00:04:23,390 -Wes Bos: down, calm down. We'll just get into it. I've got a huge list of them right here. First one in I thought we would also give our own opinions on them. What do you think about that, Scott? - -8 -00:04:23,510 --> 00:04:28,500 -Scott Tolinski: I think it's great. I hope I hope we disagree on some of these because I would and we'd like - -9 -00:04:28,520 --> 00:05:21,780 -Wes Bos: we'd like to invite you to not reply to us on Twitter about this episode. So first one is tabs versus spaces is ongoing. Whether you should use an actual tab character, or whether you should use spaces and the other like, a year ago, somebody like told me like why would somebody hit their spacebar and there's that Silicon Valley? Yeah, where they hit space, space space. Yeah. Let's get this straight. Nobody is hitting the spacebar so many times to do it. Everybody's hitting the actual TAB key It's whether when you hit the Tab key, do you get one tab character? Or do you get anywhere between two and four spaces that will represent a tab, quote unquote. So I use spaces, I use two spaces because of coding in screencasts. I need the width. I prefer to use four, but I do use to. Okay, so I'm gonna keep track of these. West, you - -10 -00:05:21,780 --> 00:06:27,870 -Scott Tolinski: have two spaces. And guess what, I use two spaces as well. Not necessarily because of screen recordings. Because I like the it looks like it's indented enough to me, like, as long as I can see it being indented a couple spaces, then it's fine. So yeah, I used to use two spaces. And I use spaces as well. Because why don't why use tabs if the space exists, I don't really care. To be honest. I set it up. I'm not going to try to argue this. Don't try to argue this because I really don't care. Yeah. Next one we have is single verse double quotes. And let me tell you, I use whatever I don't feel like no, I have it. I use single quotes most of the time. But to be honest, I don't even think about it, I used the single quote, because I don't have to hit shift to hit the single quote key. And my ear slit takes care of the rest. So you know, and again, and someone that I really care about, but again, sometimes people get spicy about this one, because, well, sometimes you had to use an actual single quote inside of your string. Or maybe you need to use backticks for string interpolation. So people just default the backticks entirely. I kind of like that. - -11 -00:06:27,990 --> 00:06:38,160 -Wes Bos: I think that's a good idea. I've been saying this for a while, but I think I might just switch to backticks. At some point, I use single and j s double and HTML right now, just because yeah, that's what - -12 -00:06:38,160 --> 00:06:43,710 -Scott Tolinski: I like. But that's what I do, too. But it's not necessarily what I think about. It's just es lint, does it? - -13 -00:06:43,980 --> 00:07:00,600 -Wes Bos: Yeah, actually, well, I had to explicitly turn off double quotes in prettier and change it to single quotes. But that's just because I've at some point in my life, I decided I wanted to use single and then that's what I've been going with, I don't think that there's any benefit or downside to using a double or whatever. - -14 -00:07:00,690 --> 00:07:02,190 -Scott Tolinski: And please don't tell us if there is. - -15 -00:07:04,770 --> 00:07:51,840 -Wes Bos: Next one is semi colons are not this. This spicy. It he first came on the scene in Twitter Bootstrap. It was Jacob, which is he's fat fat on Twitter, I don't hear much from him. He used to cause a lot, a lot of stuff online. And he coded bootstrap without semicolons. And then everyone got all up in arms. And then it became very popular to not code your JavaScript with semicolons because JavaScript has asi automatic semicolon insertion. And if you understand how that works, you can code your JavaScript without any semi colons and it looks nice. I like semicolons I don't have to think about it. I teach a lot of beginners where they could get hit by those things that don't necessarily understand how asi works. So I got no qualms with semi colons, - -16 -00:07:51,960 --> 00:08:17,400 -Scott Tolinski: I kind of have problems with semi colons either. I'm just so used to typing them that by the time that you know the no semi colon movement was there to say happening I was well I've already been typing him. So I guess that's what I'm gonna do. And again, I actually To be honest, I don't even think I typed them I just yes lint and prettier edit for me. So I don't know why either decisions that prettier made for me. And I'm just saying, alright, you in whatever. - -17 -00:08:18,240 --> 00:08:52,260 -Wes Bos: I think that's if you are okay with the the things that prettier does, it gets rid of a lot of this bike shedding because you just accept the formatting that prettier gives you there's a couple options in prettier but not a whole lot. And then just just accept it. And it gets rid of a lot of these arguments, because that's the way it works. And it's no longer like, people tend to put a like a like, I don't know, there's like a lot of value in their thoughts as to whether you should use single or double quotes. And if I like a robot and external tool, which just does it for you, then there's no like person behind it. Maybe that's a little bit better. - -18 -00:08:53,700 --> 00:09:59,850 -Scott Tolinski: Yeah, that works for me, you know, robot can tell me what to do in this case. I'm cool. All right. Sure. Next, we have the grouping or ordering of CSS properties. This one's fun, because I'm the type of person that changes my opinions on this all the time. And like, I like to rework it and reconfigure it and move this around. Whoo, this is better than this. This is better than this. To be honest, now that I have styled components, it's a little bit different, I think about my CSS in a different way, which probably doesn't make a whole lot of sense, because it still follows the sort of block object modifier sort of way of looking at things. But, you know, for me, I think about my CSS in a way now that is all very, here's this, this design element is very design systems. Like, here's this design element. Here's this component, essentially in here's this organism, whatever, all the whole, the whole atomic design stuff. I don't necessarily think about it strictly atomic design. I don't think about it strictly as BIM. I don't have any strict patterns that I follow, necessarily. I just think about here's these components, here's the systems here's these Yeah, blocks - -19 -00:10:00,000 --> 00:10:15,650 -Wes Bos: I think what you're talking about is not what I wanted to talk about here. But that makes sense. I actually do think there's a lot of value in getting a like choosing BAM or choosing a component approach to your CSS because there are serious problems that can happen. Oh, yeah. Kind of willy nilly yet. - -20 -00:10:15,920 --> 00:10:18,770 -Scott Tolinski: Yeah. Oh, I see what you're saying. You're saying thing. properties? Not? - -21 -00:10:18,800 --> 00:10:32,040 -Wes Bos: Yeah. Okay. Some people alphabetize their their CSS, some people group? Like formats together, alphabet, alphabetical. Seems, seems bizarre, but there's people that live by it, I - -22 -00:10:32,040 --> 00:10:35,730 -Unknown: guess. ordering them. You do I do? alphabetical? Yeah. - -23 -00:10:36,050 --> 00:10:39,330 -Wes Bos: Oh, gosh, you live you live your life like that. - -24 -00:10:39,360 --> 00:11:12,540 -Scott Tolinski: Yeah, that's how you find you know where to find things. You say, Oh, it's a background image. Oh, it's under B. BB comes before c therefore, oh, it's at the top of the list. Okay, there it is. I you know, I use alphabetical. And here's how I do it to blow your mind here. And yeah, any of your text editors is a very simple command names sort. And you just select all those properties, and you say sort. And then when they sort they put them in alphabetical. That's it, I do put mix ins and things like that at the bottom of the list. So if I have mix ins or functions in my CSS, I define those at the bottom anything else is alphabetical ha media queries go at the bottom as well. - -25 -00:11:12,570 --> 00:11:46,350 -Wes Bos: I generally do group my like, position, whatever and top right, bottom left transforms, I group like those like positioning ones together. But not in any sort of same way, just however I want. And if I need to know where background is on a selector, I just look at the selector and find where background is. That that's this funny. I think that's the first one we probably disagree on. I don't think that there's any value in you could probably get like a prettier for CSS, so we'll automatically reorder them for you. That may be it but I found my time running - -26 -00:11:46,350 --> 00:11:47,010 -Scott Tolinski: faster. - -27 -00:11:47,010 --> 00:11:47,850 -Wes Bos: Really? Yeah, - -28 -00:11:47,850 --> 00:12:13,530 -Scott Tolinski: I'm not. That's it. I'm not like, I'm not gonna say this is the right way or the wrong way. Because chances are, you'll be able to find selectors in my code. That's not alphabetical. But most of the time, it's like the last step before I clean it all up. Let's am writing this thing. I'm buttoning up. I'm making sure everything works. Exactly. Oh, I'll throw a little sword there on the CSS properties and get those things all alphabetical but that's really that's it's, it's like, it's not a huge factor in my life. I'm not thinking - -29 -00:12:13,920 --> 00:12:29,070 -Wes Bos: this is some high quality bike shedding yet. Oh, I guess you're always fine. I guess this is cool. No, but usually bike shedding you have to tell the person they're an idiot. And the way that you do it is the only way to possibly, - -30 -00:12:29,520 --> 00:12:33,390 -Scott Tolinski: okay, yes, in that regard. The only way is alphabetical and you're wrong. - -31 -00:12:33,540 --> 00:13:46,320 -Wes Bos: Okay. Next we have variable declarations. We as a VSS we have let and const, which are block scoped. And a lot of people even in my in the tweet thread, people said, why would anyone use deprecated legacy var, which is not true, var is not deprecated. Or legacy is just another way to declare a variable. And I think that this one boils down to trusting that the person writing the code, understands how they work and how they're scoped and the different benefits and cons and how how const is not immutable, but it's bound and it can't be changed and things like that. So by default, use const. And I will change it to a left if I need to reassign it. And I don't use var. But that's not to say that, like I think Sarah studion on Twitter The other day said, like comio fashion, but I like using var and regular functions. And I were just arguing all day long. With and I was like, you can have your opinions fine. Yeah. I don't necessarily agree with that. But like, I'm assuming you know what you're doing. And you probably can still build things at the end of the day, you're not gonna shoot yourself in the foot. So I don't know. That's a funny one. - -32 -00:13:46,470 --> 00:14:33,390 -Scott Tolinski: Yeah, that's a funny one. So I do yeah, construct life, I use constant all of the time. I don't often reassign things. In the event case that I didn't need to reassign something I would use let but I very rarely end up using let at the end of the day, and just pretty much right on const. That said, I'm not like personally offended to see a const or a armena var in my code, or let my code I do have a es lint or prettier rules that are set up to automatically go to const if it's not being reassigned at all. So you'll install over my code. And that's just how I roll. Next, we have a default verse named exports. And again, this one is to me this one's personal preference. I use both. I don't think you should use one or the other. I think you should use both. - -33 -00:14:33,660 --> 00:15:44,610 -Wes Bos: Yeah, me too. There's an argument for only using named exports where the tooling around named exports gets much better because you can automatically import them and it's kind of cool. And there's default is I assume, because you don't have to know what it's called. You can just import it as whatever you want. So honestly, I've never been bitten. Like this is huge arguments as to, like you could like write a huge bug that's gonna like take down the world. If you use like default look, no as I understand how both of these things work. And if I need to know what it's called, I could crack that file open, take a quick look at what it's called and or use my tooling to import it. And the default is nice as well. So I use both it generally, if a file needs to do one thing, or it is the main thing, then it's a default. Otherwise, if it's just like a utility, or there's like a couple functions that need to be exported from that file, then then they're named, but uh, no hard and fast rule. I think a lot of this stuff stems from, there's no defined rules for when to use one or another. And then people try to, they try to, like, make these rules that are defined. And sometimes it's just, I don't know, figure out what works best in your situation and use that. That's probably fine. - -34 -00:15:44,640 --> 00:15:51,540 -Scott Tolinski: Yeah. Yeah, I think we all need to be a little bit more accepting of other people's choices here. Because like, Whatever, man, - -35 -00:15:51,569 --> 00:15:52,800 -Unknown: whatever. Yeah, - -36 -00:15:52,830 --> 00:17:08,360 -Scott Tolinski: yeah, this this one's funny, because this one was spicy on Twitter. Should designers code there? This is hilarious, because so many people are like, well, they shouldn't count. Because we're designers and other people are like, well, they do need to get the general experience of what coding is that they know what's possible? Or maybe Yeah, get the context a little bit better. Who cares? Man, who cares? Yeah, should designers go fishing? I don't care. Let them go fishing. You know, it's what it's whatever. And to be honest, I think any sort of understanding cross disciplinary, whatever is going to make you better at your job. I think I'm a better developer, because I have a little bit of design hobby going on. I do design as a hobby. And so because of that, I feel like I have a better understanding of some structure of things, and maybe some of my CSS structure, things I can look at from a different perspective, because I've designed it in a way that's a system rather than just designing an individual thing. So should designers code should coders design? Uh, yeah, sure, whatever, I think it's all going to make you better. But that said, don't just do it, doing it, do it because you want to do it or you you want to gain that experience or whatever. It's not required or something. - -37 -00:17:08,489 --> 00:18:34,020 -Wes Bos: Yeah, I think that it's should designers use a tool that they're interested in? If they want to? Sure, I think that there's a lot to be learned. And I think you'll probably be more in tune with what's going on. But that doesn't mean absolutely every designer needs to learn and sling react and all this kind of stuff is especially with some of the the way that these design tools are starting to go now. So it's kind of it's almost a meme now. Where you say should designers code I tweeted the other day should designers debug? Because actually one of our sponsors century was trying to hire someone designer in a nice it should designers debug and like 40 replies from people, the game was serious. And like these, like long thought out, well thought out things. So it's kind of a meme. Now, it doesn't really matter all that much. Next one we have here is which front end framework. So this one's very choose. I think that front end framework does make you a better developer choosing the right framework. But I think that if you weren't like people all the time, what's the difference between react and view or Angular or whatever. And the ones that are most popular and modern right now, between all of those what you've got react Ember view, Angular, other ones Angular, there's probably a couple other ones, Marco j. s, those are probably all a fine choice. And it just at the end of the day, there's there's not all that much difference between the between them all? - -38 -00:18:34,200 --> 00:19:37,100 -Scott Tolinski: Yeah, yes. It's like Denmark, touch of death. This one is, as people get real fired up about the choices that other people make. And these these frameworks, and honestly, again, it's productivity, you're predictive with this, you're getting stuff done. Now, the time that this is a really fiery topic, as if you're on a team of people who all have different opinions on which to use. I could see that being a interesting discussion, because how exactly do you determine which of these to use at this point, there's such a nice convergence of abilities amongst these frameworks that to say that you couldn't do something in one or the other would sort of be wrong. So it's more or less, which of these is the team going to be most efficient and and why? And so in that case, maybe it would be best off to serve this as Hey, a majority rule situation five of the developers are better at view. Therefore we use view I have no idea to be honest, how you even solve those, but again, whatever suits your needs, whatever you're good at. Next up, we have one that is also very spicy. These are getting spicier. Wes. This is like hot ones where they they progressively get you spicier, - -39 -00:19:37,290 --> 00:19:40,610 -Wes Bos: so we're gonna have the last dab at the end. Yeah, - -40 -00:19:41,040 --> 00:20:02,360 -Scott Tolinski: this is a vim Emacs verse atom code, sublime, any of your text editors. People who use vim are serious in terms of I'm not gonna say they're serious developers. They are serious about using them. I mean, the Yeah, they This is one that to be honest. I see the most intensity out of people is like - -41 -00:20:02,360 --> 00:20:04,890 -Wes Bos: insufferable. I would explain it. Yeah, - -42 -00:20:04,920 --> 00:20:48,630 -Scott Tolinski: yeah, they're like, you could be like which vias code extension do I use for syntax highlighting? And someone would be like, bam, you're used van. Like, okay. So when I'm out, yeah, that's a vim people are very loud. And I, to be honest, I am so much less likely to use vim because of how loud the vim people are. And that is a bummer. Because I'm sure it's great. I've used them. I use it when I'm on the server. But I use VS code, and I like it. And I like the interface. I like clicking around. Sometimes I know, keyboard stuff is great. But yeah, no, I don't have any beef. I don't have any beef with any of this stuff. That said, I think sometimes the cheerleaders of one thing can put off the community totally. But - -43 -00:20:48,660 --> 00:21:48,320 -Wes Bos: you see this all the time with people who are extremely passionate about something come off as way too harsh, or way too over the top. And I see it all the time. Anytime you talk about something, like I even see this with, like, like RX JS observables crowd, anytime I tweet anything, there's somebody who's trying to, and it's just it's put me off of that technology, or even like CrossFit, or people just like, they're just like, talking to you about it, like all the time, and it's because they love it so much. And they're so happy with how it works for them, that they can't even fathom somebody enjoying something else. And then it just puts you off of it and entirely, which is really, really funny. So yeah, that's I'm obviously I am a VS code guy. I think that there's a lot to be gained by them. But I don't think that the most of the population has the time or patience or understanding to configure and learn how it all works. - -44 -00:21:48,420 --> 00:21:49,770 -Unknown: Yeah, yep, yep, yep. Yep. - -45 -00:21:50,790 --> 00:23:08,850 -Wes Bos: Next is small perf wins. This is a spicy one as well. Because anytime that something comes out, there's always questions about whether that's perf performance or not. And anytime anything is brand new, and performance is 100%. Very, very important. But often these things get boiled down to, I have no idea, or here is JS perf, where I ran this thing, 4000 times in one second, and this thing took 100 milliseconds longer. Therefore you should always use this approach, right? Or Yes. And there are definitely things where like, like transform, you should ideally just transform, or you should only transition transforms and opacity and try not to just transform anything like border and margin. Like those are, those are good rules. And it's important to note that I'm not Pooh poohing on performance in general. But a lot of times, it's just these small, granular things, where I say, Oh, thanks, I'll remember and you see in react as well, where where people talk about like, binding and arrow functions on click, or like, I'll remember that next time, I have 40,000 react components on a single thing, like, these are things that will probably matter at some point. But for the majority of people, it doesn't matter at all at the end of the day. - -46 -00:23:08,880 --> 00:24:11,250 -Scott Tolinski: Yeah. And there's a big crowd that will say, Well, why would you use the less performant way when you know, down the line that it could be I think, Well, I'm not gonna waste my time on micro optimizations right now that are going to take me longer to implement, and it's going to hold me back from getting this thing done on time when it's not necessarily a big deal. It's almost like Like, seriously, I taught like a beginner react course and my react 16 for everyone course. And I did I'm thinking like the fifth video, and like the first comments were like, why don't you do it this way, it's more performance. I'm like this is a beginners react course. It is teaching very beginners how to use this system, you do not need to performance optimize this. This is not production code here. This is teaching you the basics. So there's definitely like there's room for optimizations in performance is definitely something you always need to be worried about. But micro optimizations in my opinion are just that's a crowd that can certainly quiet down and that's some advice I'm gonna ignore almost all the time. Until I you know, - -47 -00:24:11,370 --> 00:25:00,000 -Wes Bos: you know, what's one funny thing that I even myself got bit with you hear me all the time talk about using map filter reduce instead of loops all the time? Yeah. And then I ran into some code the other day where like a four of loop was just way nicer. It was like sequence sequencing promises, what happens then another one, then another one, and I wrote this terrible reduced function and then I wrote it in a for loop and I like tweeted it being like, Am I wrong that this for loop and I was like No, the for loop. There's the for loops are in JavaScript for a reason. And that's much more readable and it's a way better way to approach it. And I've been just like caught myself in this dogma of always used map filter reduce for everything and I had to like just shake myself out of it being like, oh, oh, don't West don't don't make these rules for yourself, because they're not always true. - -48 -00:25:00,659 --> 00:25:28,950 -Scott Tolinski: Yeah, it's funny. I mean, it is funny because you do you you end up lumping yourself in these roles and you forget you lose the script, you lose that bigger picture of does this thing actually the right tool for the right job? Next one is going to be what about browser support? Hey, Wes, by using float for what about browser support? I can't use Flexbox right now, like, yeah, yeah, I don't know. This one. Yeah. This is anytime you bring up any CSS property or any property in general? Yeah. - -49 -00:25:29,069 --> 00:26:16,500 -Wes Bos: It's such an easy one. It's almost a conversation I never want to have because first go look it up. And second, are you supporting these browsers? If yes, can't use it? If no, then use it. That's it. That's it. That's all there is to it. Yep. I know. Next one is a block formatting. This is another one that's totally solved if you just give over to prettier and let them do it. But it's whether to put the curly bracket on its own line, you open up a function. And like some sort of psychopath, you put the opening curly bracket on line after the function the or if you have like an if else. And you you put the else on the same line as the closing if block or on its own line. So that's a hotly contested. And this is - -50 -00:26:16,500 --> 00:26:33,630 -Scott Tolinski: why I like us. Because for two people who put it on another line as potentially psychopathic, which I totally agree, because that's just totally, totally weird. And to be honest, I have no real reason for it, other than the fact that it, it looks weird. It looks - -51 -00:26:33,630 --> 00:26:40,380 -Wes Bos: weird. It makes me feel weird. Yeah, no way to live your life doing that. So I'm gonna draw a line there and say, you're wrong, and you're - -52 -00:26:40,380 --> 00:27:02,820 -Scott Tolinski: wrong. You're wrong. And you know why you're wrong. You're wrong for no specific reason other than this, I have a feeling of that's the way it looks right. And that's why I have to say you're wrong about it. So no, I totally agree with you. That's weird. It's weird, and I don't like it. So that's the way it is a new function instance, between a binding inline arrow, whatever, I just end up using arrow functions most of the time to be honest. Call Oh, yeah, - -53 -00:27:02,820 --> 00:27:57,840 -Wes Bos: yeah. This one I was more thinking of in react where if you have every handler that gotcha, yeah, or anything really where if you want to like, especially in react, if you want to pass an argument to a function on click, then you have to do an arrow function. And that what that does is it technically creates a new function, which takes up more room in memory. Yep. Instead of just using one function, like it was like this big like, No, no, for a while, like, you don't do that. And you have to have this, like, super obtuse way around that of just being able to pass an argument. Yep. And then the data came out at the end of the day, and people said, like, this is fine, unless you have, again, 100,000 components on the page, you probably have a bigger problems to worry about at that point. But in most cases, it's totally fine to have an arrow function in line or to bind it in, which creates another function. Those are totally fine. In most cases. - -54 -00:27:57,900 --> 00:28:11,730 -Scott Tolinski: Yeah, I do inline arrow functions. And that's one of the things that people would often call out in my tutorial videos and just say, listen, does this matter? Like does it matter? No, I use the inline arrow functions, and I use them happily use them all - -55 -00:28:11,759 --> 00:28:27,420 -Wes Bos: I always respond to people are like, that's weird, because I clicked it. And it worked. You know, like, it's like, Is it really lagging? Even if you even if you bust out the perf tools to actually zoom in on that thing? It's unlikely that you're going to find any sort of significant impact. - -56 -00:28:27,539 --> 00:28:38,820 -Scott Tolinski: Yeah, yep. Totally agree. Again, all of these performance optimizations stuff, do it. Like if you know, it's going to be an issue? Sure, go ahead and do it ahead of time. But if you don't know what's going to be an issue, don't make things harder for yourself. - -57 -00:28:38,850 --> 00:29:00,960 -Wes Bos: One more thing I just want to say about that is a lot of times the people have these performance, because they say the chrome does it this way internally, and this is the way the engine works. And my answer to that is like, well, Chrome should change that then because we're developers, and this is how we're raising. And often chrome will change that they'll go back and under the hood, they'll say, Okay, this is how people are writing it. Maybe we should make it faster. - -58 -00:29:01,019 --> 00:29:22,890 -Scott Tolinski: Yeah. Yeah. Yep. Yep. Yep. All right, last one here, trailing comma. So we're gonna trail this episode with the trailing comma, because I use a trailing comma. And then that's just the way I do it. Because, hey, I mean, why not? If you ever need to add another item to an array or an object, that comp is already there, and you don't have to right so there same thing. This is one way people who are wrong or wrong, they're just flat out wrong. - -59 -00:29:23,549 --> 00:30:06,030 -Wes Bos: Well, trailing comma is supported I think in IE nine and up on an object and also it's better forget history where you don't have to modify the line before to add a comment. You just add a new line and then your your good history and your good blames are a little cleaner. That is bike shedding. I've been wanting to do this one for a long time just because it's it's hilarious, silly to talk about the stuff but it's also kind of fun to talk about it. At the end of the day. It doesn't really matter all that much. But there are your own personal opinions. At the end of the day you can choose whatever it is that makes you happy in your team. I'm sure you are going to be productive. with whatever which way you choose. Yeah, that's it. That was a bit of a tasty hasty, wasn't it? It was - -60 -00:30:06,030 --> 00:30:11,760 -Scott Tolinski: a tasty hasty It was a spicy, tasty hasty, and I hope we made enough of you sufficiently agree. - -61 -00:30:13,830 --> 00:30:17,610 -Wes Bos: All right, thanks for tuning in. We'll catch on Wednesday. booze, please - -62 -00:30:19,500 --> 00:30:29,310 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax132.srt b/transcripts/Syntax132.srt deleted file mode 100644 index 2b4533476..000000000 --- a/transcripts/Syntax132.srt +++ /dev/null @@ -1,396 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,849 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:10,530 -development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. - -4 -00:00:10,559 --> 00:00:51,960 -Wes Bos: Welcome to syntax This is the podcast with the tastiest web development treats today we're gonna be talking a bout a potluck. Actually today we're gonna be talking about all kinds of stuff. headless CMS is react hooks context Redux API, default props in react, different CMS is all kinds of fun stuff. Oh, this is I'm really looking forward to this one. What's the difference between a function expression and an in a function declaration? So we're gonna dive into that? A little interview question for you. Today we are sponsored by two awesome companies. First one is a century's gonna do all of your error and exception tracking and second one is Freshbooks gonna do all of your expenses and invoice tracking? We'll talk about them partway through the episode. Hey, Scott, how you doing today? - -5 -00:00:51,960 --> 00:01:31,920 -Scott Tolinski: Doing good. I discovered yesterday that apparently some hard drive plates are made of glass. What I discovered this because I was destroying old hard drives that we just had sitting around from old computers right you know, you don't know what their social security's on them or something. So I've been Yeah, open them up and ripping up the blades and I went to bend this plate. And this plate exploded in my face, just like really sharp glass shards everywhere. So I'm still finding them. I thought I did a good job. But Dang, I like feel a little pokies here and there. I'm like sitting on glass or something. Yeah, figure out which if your hard drives glass before you get bended. That's a good one. Yeah. Well, you - -6 -00:01:31,920 --> 00:01:36,720 -Wes Bos: are wearing your peepee though. Our personal protection equipment. - -7 -00:01:36,809 --> 00:01:39,630 -Unknown: Well, technically, glasses, glasses, so I got lucky. I - -8 -00:01:39,630 --> 00:01:43,650 -Wes Bos: got lucky. I got Yeah, yeah. Got lucky that. Yeah. That's good to know. - -9 -00:01:44,489 --> 00:01:51,510 -Scott Tolinski: The only one what's funny is that I have so many other hard drives. I've been bending them whatever. Yeah, no, this one did. It definitely caught me off guard. - -10 -00:01:51,539 --> 00:02:03,930 -Wes Bos: Man, I need to do that. I've got this hackintosh that I built like 10 years ago. And it's just sitting here. And I don't want to like give it away because there's hard drives in it. And I just need to get it. Yeah, I do have exactly what you're doing. - -11 -00:02:03,930 --> 00:03:24,750 -Scott Tolinski: I break it down. I got it. And then I go to recycle it at Best Buy. Because Best Buy has just like a tub or tech recycling. You can just go drop your stuff off in the tub. nobody says anything. Oh, yeah, it's really nice. Yeah, I have just like I dropped off all of my, my tech recycling there. So you feel good about it. So let's get into this first question here. This is from Jamie. And this question is I am a full stack developer who went through a boot camp. I'm trying to find a resource to learn more computer science related to knowledge. Every single interview I have taken asked me questions about algorithms closures, and I've tried to brush up on things in my own. I wonder if there's some tutorials you'd recommend that I haven't found Thanks in advance. This one's tough, because it depends on the interview. I have never been asked any of these questions in an interview. To be honest, I think it's all all depending on the kind of stuff that you're interviewing for. Right? Was Do you have any good resources for this kind of stuff. Because the the best place that I've seen personally is at Udacity. A founded by Google, they were owned by Google, they had people from Google or something involved. Either way, they have a lot of like really in depth tutorials where you code along with an interactive thing. So they have the School of data science, the school of artificial intelligence, they have a lot of stuff like that. So in my opinion, there was some very good courses there. But I don't know if you have anything specifically that you've seen that I haven't seen. - -12 -00:03:24,779 --> 00:03:54,120 -Wes Bos: Yeah, when I did my interview at Google, this was like seven years ago, is Nicholas zakas, who is pretty well known in JavaScript industry in general, just writing books and tons of blog posts and being pretty involved in a lot of libraries. He had a bunch of blog posts that like figured out how do you do these algorithms, but in JavaScript, and I found that to be pretty helpful myself, but I can't find the link for it right now. I'm just googling around. I'll try find it and put it in the show notes. And if someone else knows what I'm talking about, make sure you tweet it at us. And we'll add it to the show notes. Oh, - -13 -00:03:54,149 --> 00:04:03,569 -Scott Tolinski: you know who else has a good algorithms course is Coursera. Okay, they're up there. They have a very good algorithms course, I have seen highly regarded. - -14 -00:04:03,779 --> 00:04:48,690 -Wes Bos: Oh, it looks like Nicholas zakas has a book called humans who code from way back like 2009 to 2012. The thing about these like computer science stuff is that it doesn't change, right? Like you have pointers and quick sorts and, and these trees and all that stuff. I honestly have never written any of these things, which is, I know, it's a huge frustration for people who have interviews where they go into them. And they're asked these questions like, how do you do a bubble sort or things like that. And it's like, I don't know, I never would have written that in my entire life. I just use the source that's built into JavaScript. So unfortunately, I don't have a good one. I think this is a good one that will throw open to the community. If you have a good resource. Tweet us at syntax FM and we'll retweet it because I think there's probably better equipped people out there to answer this. - -15 -00:04:48,719 --> 00:05:11,970 -Scott Tolinski: Yeah, definitely. And we will reshare those, but there is content out there and if you you go for it. I think a lot of that stuff too is really good from universities. That's why I think Coursera is a good option because they really believe from actual universities, their courses you can sort of jump in on them. They're very, very intense. I've had some of them that were almost too intense to keep up with. But definitely good stuff if you're looking to dive in fully. Excellent. So - -16 -00:05:11,970 --> 00:06:29,370 -Wes Bos: I'm Ali Williams, I'm trying to pick a headless CMS contentful seems kind of expensive. ghostly is too limited and blog focused. I've been thinking about Prismic. And strappy, do you have any suggestions. So this is this area right now is rife with companies that are sort of coming out and doing it like we've obviously had a bunch of them sponsor, the podcast, we've had contentful sponsor, the podcast, Sanity has sponsored our podcasts, I went and visited Prismic the other day just to do some YouTube videos, then there's also just the self hosted options where you can, you can use WordPress as a as a self hosted, I honestly haven't done a whole lot in that though, the one that I do have experience with that I've just briefly gone into his Sanity. And that's because they've sponsored the podcast. And I just wanted to make sure that I knew what I was talking about when we do it. But I don't really have a good thing, I would probably opt for either something like Sanity or something like that's open source like a like a WordPress out there. It really depends on on what you're looking to spend at the end of the day, you're saying that something like contentful is a bit too expensive for you, maybe you want to look for open source. But on the flip side, sometimes people it's too expensive for them to maintain the thing themselves. They just want it to work, they just want a service. And at the end of the day, a hosted version is going to work better. - -17 -00:06:29,520 --> 00:07:49,020 -Scott Tolinski: Yeah, yeah, this really goes into Are you looking to manage and maintain something yourself? Or are you looking to just pay a service to do it, right, because if you're looking to just pay a service, you connect to that API, you build your back end through clicking around and whatever, then there's a ton of good options. I really like Sanity, hesser take shape. There's just so many content for Prismic. It's like it's outrageous how many there are, but there's a lot of good options. So that's good news. If you're looking to go the hosted solution where you're doing it yourself, I think WordPress is still a great option. Because the advanced custom field support within the WordPress API is really super good. And I've used WordPress myself for a couple of headless sites now. And I've been very impressed with how easy it is, especially with something like Gatsby worth plugins just work. And you can pull in the data super easily. But because the advanced custom fields and custom UI stuff works really well, with WordPress in the rip, I would go with that I've heard Drupal is making big, big moves on that as well. I know that the new Drupal front end is going to be written in react. So I think there is definitely some movement in that regard. That said, I haven't used Drupal for a headless CMS, which is kind of surprising, because I have a lot of experience in Drupal. And I think it's a very powerful, flexible CMS. So it's definitely an option there. If you're looking, I - -18 -00:07:49,020 --> 00:08:43,320 -Wes Bos: just found this website, headless cms.org. That seems to go through all the open source and closed source, which I think is cool, because then you can you can sort of choose what direction you'd like to go. And like it's from the people who made static Jen calm, which is the static site generator comparer. And this seems like there's tons of options. Also, I can't say what it is just yet. But there is somebody who I've been talking to that is going to release a number I've been talking about the sort of rails for JavaScript, where you get like a back end just up and running in authentication built in, and it just works out of the out of the box. Something like that is coming. And I'm really excited to talk about it. I've been playing with it last couple of months. And hopefully I'll be able, they asked me not to tweet about it, because it's like not ready for primetime yet, but I am super excited to be able to talk about it because I think this is going to be really big in our industry. So that's a bit of a tease, but I promise I will talk about it as soon as I can. - -19 -00:08:46,159 --> 00:09:04,620 -Scott Tolinski: Nice, yeah. teason teasin Whoa, whoa, would be a good list that that was a little appetizer. Say getting you ready. All right. This next question is from Paul mower. He's he says that mo is spelled like mouth are pronounced like mouth so Mauer Mauer, as I read that mouth and I just wanted to be like, - -20 -00:09:04,620 --> 00:09:06,720 -Wes Bos: oh, malware how Mauer - -21 -00:09:06,750 --> 00:10:54,330 -Scott Tolinski: Mauer. Sorry, Paul, this question is Hi, Wes. And Scott, I'm about to finish a coding boot camp, common theme here and a program in a couple of weeks. I come from a customer service background. And part of the reason for me developing these skills is to transition to a line of work that offers more flexibility. Ideally, I would like to find a remote work or a local organization that is open to remote work. I do think do not think freelancing is me at this point. I would like small, I would like some amount of mentorship. Do you have any advice for someone who's that in my position to seeking that type of work? Is this a realistic goal? You know, this is actually an interesting question. There's a second part of this question that I'll tackle in a second here. But the first part of this question here. Yeah, freelancing definitely isn't always for everyone. So for those of you who are feeling like hey, I'm not I'm not doing great or feeling great at freelancing. It could just be you, right? I mean, that's not going to be the perfect route. For anybody, so don't feel bad if that's what you're looking at. And you want to be looking at a full time position instead. Because there's, you know, full time position work is awesome. So this one is tough because remote work often is going to go to those who have a lot of experience, right? and mentorship is going to be a lot tougher remotely. So I might think that you're better off looking for, like you said, a local organization, or a local company, a local agency, a lot of design and dev agencies exist in most towns that you can start, you know, looking at or investigating more seeing when they need work. But you know, these kind of systems are going to be better for you, these kind of places are going to be better for you, because then you could maybe work into saying, Oh, hey, can I work from home, you know, one day a week, or something like that, rather than we're working remotely full time. remote work is great, but I, you're gonna have a hard time finding like the brilliant remote dev job as a first time job. - -22 -00:10:54,360 --> 00:12:37,740 -Wes Bos: Yeah, the thing about becoming a brand new developer is that you obviously need to work on your your tech skills. And that can be extremely frustrating when you're not in the same place. Because just debugging and everything is just a lot slower than when someone could just roll their chair over to your desk and, and help you out. So there's that. And then there's this whole communication skills, trying to understand how to how to best communicate with developers. So I think that a lot of the the Remote Jobs go to developers who are just that good. Like I even often we see these developers who they work for a company that's no remote, but they're, they're so good that the company is willing to make an exception, because they're like that, there's obviously companies out there where the entire team is is totally remote. And that certainly is an option out there as well. So if I was in the situation, and like the the one day goal is to have this awesome remote job, I think that that is such an awesome goal for somebody has to have especially because like if you have these ideas of I would love to go live in on a farm or like I want to go live with my family in. I don't want to mention any state because there's people that are listening, right. But you know what I mean, right? Like people just want to go and live where they want to live and live, like the life that they want to live. But I also have this awesome job that is totally remote. And I think that the people that are hired for those are the ones that are visible. So I would have that as a goal and start working towards it. I think a lot of the things that we said in the freelance episode as to how to get noticed those things also apply if you're trying to get a job as well. So in yourself working on open source, maybe writing blog posts, just to show that you are knowledgeable in your place, and you're sort of a self starter that will go a long way in getting these these Remote Jobs. - -23 -00:12:38,010 --> 00:13:27,690 -Scott Tolinski: Yeah, that's a good point. Because if if people are seeing that you're capable of doing that sort of work by yourself, and that you don't need any any help, they're there, they are going to be more likely to want or be cool with you working remote. But yeah, I think you nailed it with some of that stuff, especially with the freelance stuff, because that's the everything that I've ever done in that we've talked about in that freelance episode, whether it's creating blog posts, or doing tutorial videos, they helped me so much in job interviews, specifically because people could see that, you know, I they didn't need a manager to come tell me to do work. The second part of this question is also a second question if you have time. How come in your intro Scott El Toro loco Alinsky gets a bowl noise, where West Barracuda boss does not get a barracuda noise. I think you should throw a flipper or shark noise or something in there for fairness. Yeah, - -24 -00:13:28,260 --> 00:13:32,880 -I'm in totally agreeance with you, Paul, our guy who who made that intro drop the ball. - -25 -00:13:33,419 --> 00:13:34,620 -Unknown: Does America make? - -26 -00:13:34,799 --> 00:13:39,630 -Scott Tolinski: I mean, you could just have some some wiggling around in the water, just a little water wiggle. - -27 -00:13:41,010 --> 00:13:45,299 -Wes Bos: I'm gonna get a sound of a barracuda. Okay, let me know if you can hear this. - -28 -00:13:58,679 --> 00:13:59,399 -This supposed to be - -29 -00:14:02,970 --> 00:14:04,110 -Unknown: very good a remake - -30 -00:14:07,380 --> 00:14:58,440 -Wes Bos: is gonna look for chopping down. All right, I've googled chopping sound on YouTube. Here we go. Yes, that's actually the sound that I use in one of my upcoming. I made this like hilarious game where if you move your mouse, there's like a mouse and a cheese. And you have to move your mouse over the cheese. But it's like one of those bikes that you ride at the fair where if you turn left, it goes right and it goes the opposite. So like you have to like get good at moving your mouse in the opposite direction. Sort of like when your monitors like tilted the wrong way and you need to like go and change the settings. And that's the sound that is when the mouse actually eats the cheese. Because I thought it was like a kind of a fun example of how to like, detect overlap of the mouse div and the cheese div and then how to select an element and play it anyway. Maybe we should - -31 -00:14:59,880 --> 00:15:03,779 -Scott Tolinski: do Nice. No, no, that's That's dope. There we go. - -32 -00:15:03,779 --> 00:16:28,980 -Wes Bos: Maybe we need Oh, yeah. intros, I think, oh, we just need to think of some hilarious ideas for new introductions. All right. Next question we have here is from Austin Randolph, how much importance would you place on the design of a resume? I've seen a few resume designing services out there, I was wondering if it's worth it to pay for. So the resume is kind of an interesting one as well. Because I think a lot of like the online applications, you have to just fill out a form but the actual physical piece of paper or like the the PDF that you get, I think that that says a lot about the person as well. So what I pay for something like this, Probably not, but I definitely wouldn't go with the default Microsoft Word template. One thing that bugs me so much is when people use defaults in anything. So if you think about like, papayas being used in a logo, I know that drives a lot of designers and developers crazy, are you sometimes you watch like a commercial and it has that like default iMovie music and in it, you're like, come on. And the funny thing is that the person who made it probably is oblivious to that being like that. So I think that if you are designing something, and you think it looks good in Microsoft Word, to the person who you're giving it to, they've probably seen 10,000 of the same template, and it won't really stand out. And they'll sort of like cringe at whatever it will Calibri or whatever font that you're using by default, right? So, - -33 -00:16:29,299 --> 00:16:39,659 -Scott Tolinski: yeah, well, it's funny, even like in music. If I hear GarageBand loop in a song, I'm like, No, okay, you have not spent any time on this, you went to GarageBand. - -34 -00:16:39,720 --> 00:16:50,039 -Wes Bos: It's so true that when I go go to one of these websites out there, buy a $10, resume, outline and then just drop in your info. I think that's probably good enough. What do you think? Yeah, - -35 -00:16:50,039 --> 00:17:53,790 -Scott Tolinski: I think don't overdo it. I even think it's a decent, like standard, plain looking resume looks fine. As long as one, like you mentioned, you're not using any of these crappy default fonts. And to think about it as just like a typography, exercise, right? You have this resume, you have data, you have a way that it needs to be displayed in red. And if you want to make it look nice, don't add a bunch of shapes. And you know, whatever design elements that way, do straight up typography, do a nice vertical rhythm, do a nice type system, pick a font that is, you know, usable, but not overused, something that they'll have in Google, Google or word or whatever. But it also would look nice, maybe if you export it as a PDF, that way, it's always going to look nice, but again, I wouldn't overdo it. Don't go crazy with design elements, like people like to throw in charts and chopping sounds don't throw audio into your resume. But yeah, the chart thing where people put like a chart in it says, like skills, you know, 5% Oh, - -36 -00:17:53,969 --> 00:18:14,640 -Wes Bos: everybody did that. For the longest time. I even taught that in the bootcamp because it was like kind of a fun way to show how like CSS wids work, and everyone thought it was amazing. And you could like overlap rover and they would grow and like, What does 47% JavaScript mean? You know, like that, doesn't it? It looks cool. But yeah, I know, it doesn't really doesn't really do a whole much. - -37 -00:18:15,540 --> 00:18:23,460 -Scott Tolinski: It doesn't do anything. And I think some people are straight up turned off by it. So that can be an issue too. But again, keep it simple, stupid, as they say yes. Yes. - -38 -00:18:23,460 --> 00:18:24,450 -Wes Bos: Keep it simple. - -39 -00:18:24,930 --> 00:18:25,500 -Scott Tolinski: Keep it simple. - -40 -00:18:25,500 --> 00:18:38,970 -Wes Bos: I would say yeah, if you're a hiring manager, I know a lot of people listening to us hire developers. What are your pet peeves that you see in in resumes. And when people apply to this ad syntax, FM, I'd love to hear that. - -41 -00:18:39,270 --> 00:20:22,950 -Scott Tolinski: I would love to hear too. But you know what I would not love to hear, I would not love to hear that my website is broken. So I managed to not hear that my website's broken by having century@century.io century is a longtime sponsor of syntax. And they do a great job of tracking and keeping stock of all of your errors and exceptions. I use this constantly, it pretty much lives on my computer in terms of one of the tabs I have open, I get email notifications for stuff I was able to see the other day that a undefined, it was like cannot destructure user of undefined. And we were trying to destructure a user from a an Apollo query that just came in and the query was set to undefined. Therefore, it's causing an error and anybody who refreshed one of the specific pages. Luckily, I was able to see this when one person had the issue because I knew the instant that error came in that that was bad news because I could recognize like what the situation was immediately from the hair, I could go fix it, and I could take care of it before I realized it was a problem, then we could update our unit test to make sure that this wasn't going to be happening in the future. So century to me is one of these tools that I just really can't live without if I want a secure, stable environment. So head on over to century dot IO use the coupon code, tasty treat all lowercase all one word, and you'll get two months for free. And trust me, you're going to want to try century because like myself, it is just so incredibly easy to set up. And once you set it up, you see your errors command people are using your site. It is invaluable. So huge fan century.io coupon code tasty treat get two months free. - -42 -00:20:23,010 --> 00:20:39,150 -Wes Bos: Can we also talk about the century.io they have this little SVG animation of someone checking their phone, and then the lights in the background are flickering, and then the Get Started button flickers. Oh, it's so subtle. I don't know. I've never noticed it before. I just noticed that now. And oh, yeah, he - -43 -00:20:39,150 --> 00:20:41,400 -Scott Tolinski: just Yeah, the phone move. Yeah, - -44 -00:20:41,430 --> 00:20:56,840 -Wes Bos: good. Check it out. Yeah, true.io, I think that's probably the best way to get sponsors to the website is to do something cool on your website and have fun talking about it. It's not intentional at all. But every time we're looking at these websites, doing the ad reads, we find something new about the website that we really like, - -45 -00:20:57,000 --> 00:22:55,860 -Scott Tolinski: Yeah, I know it. But it goes to show you that great work and attention to detail is is like paramount for some of these companies and in century is no exception to that. So it definitely carries through. Okay, so this next question is from Jeff. And the question is with the new react hooks and context API, do we still need to use Redux? Well, I was of the opinion that you You didn't always need to use Redux before, because, you know, Redux is great for what it does with managing lots of global state and in your state of your application as a whole, it's great for that, in fact, the dev tools around it are second to none, they're awesome. But if you're only managing a couple of things, models opening and closing or, or navigation or whatever, it's really not, it's a lot of work to get that little stuff in there. So for me, it depends on the scope of the state that you're trying to manage. For instance, I manage my state through or my data state, like all of my data coming in through Apollo, so I'm not going to use Redux and Apollo there. But I still needed something to manage the models opening and closing. And to be honest, I was using Apollo state for a little bit. And I'm no longer using Apollo state due to some issues I was having with it. So now, I was looking like, Well, what do I do? I just had this this huge, long exploration into new hooks, libraries and different ways of managing state. And so after looking at nearly every single global State Library, I ended up writing essentially my own thing that was using context. And it didn't just use one context, they actually use this several contexts. And then I have a provider that combines the providers. And so I end up having individual context. So I have like a navigation context, I have a shopping cart context. And that way, I can use hooks to pull in any of the actions, any of the values from that specific one without having to worry about the state updating for something that I'm not really interested in. Ah, yeah, anything - -46 -00:22:56,400 --> 00:22:57,870 -Wes Bos: to show on this yet. You - -47 -00:22:57,870 --> 00:23:57,060 -Scott Tolinski: should I'll share my my setup, I just wrote it. And trust me, I am loving it. Because anytime I want to use the context for anything, the shopping cart, just use the use contacts. And then I have my basic state functions. If I need more complex state, then I would use use reducer inside of it. But it is really pretty slick. And so I would highly recommend if you if you don't need a ton of state to be managed, like you're not managing your your data loading and things like that. I think that the context API with hooks is really just as good as it is good as it's ever been. So it's a really nice system. That's it. There is a lot of other react state libraries out there right now. Like, I think there's like Easy peasy, there's a pool. I'm blanking on some of the names, I'm sorry, because I just looked at all of these. There's so many out there right now, I would highly recommend checking them out and seeing if any of them fit your idea of what you want your state to look like, because it's an open space right now. And people are trying new things. And in. It's exciting. - -48 -00:23:57,210 --> 00:24:29,130 -Wes Bos: Yeah, somebody sent me a link to something with context that has its own state, but then it also like gives you all of the updater functions out of the box. So like increment decrement, up to a and it look cool because it looked like pretty batteries included. So I know that we've answered this question before, but that was like two or three months ago. And even since then there's there's a lot has filed. So I think it would be really cool if we do an entire show, diving into just like managing data in react with context and state and things like that. So - -49 -00:24:29,160 --> 00:24:31,500 -Unknown: we'll do that on the left all the libraries there. Yeah, - -50 -00:24:31,530 --> 00:27:01,290 -Wes Bos: the one thing I want to say about this is that so what's been going around on Twitter lately is the unpopular opinion, tweet threads, where you're allowed to say something that is an unpopular opinion. And it just turns into mostly popular opinions that people are scared to say. Somebody on Twitter this is I don't know niruri on a and er IO and a ya. They said they're there. react. unpopular opinion was most of the time Redux is just money laundering for global. That was hilarious because it has like 1400 likes on it. I thought that was really funny. I think in most cases, people were reaching for Redux because it was so hard to do global variables and in global updaters, in any way. And now we have all these really good options. So I think in most cases, yeah, you probably don't need it all that much. Because it is so easy with the built in context API. And now hooks. Yeah, slick. All right. Next one is from Brian via, hey, Scott, and Wes love the podcast. Thanks. If either of you could change anything about your personal tech stack, what would it be? And why? Oh, that's, that's a kind of an interesting question. Because sometimes you you make these choices when everything seems to be hot. And then six months, a year, two years later down the road, you start to feel like the growing pains, or you start to see better, better ways that people have approached things as as new tech rolls out. And I think for me, I'm actually really happy with the all the tech that I've built mine on the node Express server on the back end react on the administrative server rendered pages mostly react for the checkout. It is now so I'm pretty happy with that. I think the one thing that I'm frustrated with is that I think I would go for more services, meaning that I went the route of mostly just like hosting my own, I use m lab for hosting my, my database, but I have just digitalocean, which is amazing. But because it's digitalocean, I have to manage this the server myself, I have to scale it up, I guess I could like, use some of the other products from digitalocean as well, I have to manage my own SSL certificates. And I much rather pay an extra 20 3050 bucks a month for that to all be handled for me. So I am now looking at some more sort of baked in services that I don't have to play sysadmin for that. - -51 -00:27:01,680 --> 00:30:01,200 -Scott Tolinski: Yeah, my platform is, as we've talked about before, it's Apollo for data, it's react on the front end and server side rendered react, and then it is Meteor on the server side. So I struggle with this one a lot. Because I do really like Meteor as a platform. That said, it would be really nice occasionally to get off with Meteor. The only reason being is because it's easier to find people who have worked in other environments that aren't Meteor that said this, the meteor specific stuff that I'm even using at this point is really just a database in account stuff. I'm hardly even using it, I'm using it mostly as a build tool in those regards the meteor build tools, fantastic. There's a lot of like really nice things about it that I think that people don't know, like building bundles for the specific browser that you're using. So you're not shipping code for people that don't need it. So there's a lot of like, really nice features that that come into Meteor. And to get those same features and another platform, I'd have to really roll it all myself. So that said, as much as I think about potentially moving off of Meteor, every time I like go through all the list of things that it's giving me essentially for free that I have to do somewhere else, I don't know if I would change it. I'm a big fan of how it all works right now, you know, I think the only change I would have made is at the start is maybe not using MongoDB. I like MongoDB it's fine. But I think people have negative experiences with it to the point where I'm concerned that maybe I'll hit them at some point. But I personally don't have too many negative experiences with it. Maybe if I was more focused on speed for something, I might be considering another database. But really, that said, I'm very happy with how my platform works. I have a hard time saying that I'm not happy with any of the major pieces that I swap out all the little pieces all the time, like I just rewrote all of my my state into a new state library. So we'll see as things evolve here, but Meteor 1.8. point one is about to come out. And it includes a bunch of node updates. And I'm very excited about it. So yeah, I don't think so. I don't think I will be like to change things too much. Next question here is from Aaron, do you prefer reacts default props or plain default? Oh, this anon. Oh, I just saw that end. And I was like, that's an R. It's Aaron. This is from a non anonymous, you did not leave a name not Aaron. Sorry. Do you prefer react default props, or plain j s default function parameters to give your components and default values. Now I pretty much always use default props only because most of my components will maybe not most I'd say maybe 5050 of my components are class based, or they were class based at one time. So I had default props. And if I convert it to a function component, I'm just copying and pasting and moving things around rather than rewriting that stuff. I don't know I use default props. And I use prop types. And I've been very happy with it. So I don't know. I might use default arguments in the future. It makes a lot of sense. It's very JavaScript II. It's not reactive. So Yeah, I think - -52 -00:30:01,259 --> 00:30:42,810 -Wes Bos: I like default props in most because most of my stack is still classes. As we move more to just regular functions as hooks are rolled out, I think I probably will still stick with default props, unless it's something that's so dead simple that you're like your props is like a number or something like that. But generally, the data that's coming in, I like to just have it separate below the below the function then trying to decipher this, like for line destructuring, default ROPs inside of it. Like that's very true default arguments in JavaScript are amazing. But they start to look pretty hairy, once they get a little bit more complex than just a number or Boolean sign like that. So it's it's nice that they're there. They're in there. Yeah, - -53 -00:30:42,810 --> 00:30:43,350 -Scott Tolinski: super nice. - -54 -00:30:43,380 --> 00:31:41,640 -Wes Bos: Next one, we have Shawn from Denver, you guys chat. CMS is sometimes why no love for Umbra Co. I had to look up what Umbra co was, I thought it was like Umbra, the designer of like, just like home goods. But umbraco is open source ASP dotnet CMS. So why don't we use that? Well, I don't write any ASP. net. Yeah, just which is why so I think one thing you need to remember by listening to this podcast is that Scott and I live in very similar tech stack bubbles. And we love our note on the back end, we love our react on the front end. And while we do like look at what else is out there, we're not going to spend our days trying out dotnet CMS is because it's just not our tech stack. So it's important that you probably should check out other stacks, especially if you are a dotnet shop, it's probably worth looking into. And maybe it's even like a really nice, headless CMS that you could get and get up into. But other than that, we're it's just not part of our world. Yeah, - -55 -00:31:41,789 --> 00:32:16,620 -Scott Tolinski: I think that my first initial answer with this is WTF is umbrella umbrella. I'm working on word. I'm braco. They should, um, Broncos. first problem is the name. I'm going to tell you that right now. That's the first problem. No, the website is actually very nice. I went to this website, and I was really impressed. I like it. It seems cool. Yeah. Just like Wes, I have no ASP dotnet experience. Absolutely none whatsoever. So you know, we come from JavaScript, and then PHP a little bit before that. So no, it looks cool. I think ASP dotnet people probably like this. But yeah, that's why we don't talk about it. That's pretty much it. Tell them to change the name, though. - -56 -00:32:16,830 --> 00:32:17,430 -Wes Bos: All right. Next - -57 -00:32:17,430 --> 00:33:21,720 -Scott Tolinski: question is, well, this was actually from Twitter. People were demanding that I tell this story on the podcast, when I mentioned that I was actually very clumsy. People see me breakdance and they say, oh, wow, you must be very coordinated. I say no, I'm actually very clumsy. One time, I was actually somewhat forcibly removed from a dance club for being drunk. When I was completely sober. It's the story goes as follows. We enter the club, who you know, we're in line or whatever. And I pull out my ID to give to the guy. We're like, in the lobby, I give the guy my ID. And I drop it because you know, I'm clumsy. Sorry, I just I fumble it, I drop it, I pick it up. I give it to the guy, the bouncer and he's like you out now. And just like, what? We were in a group of people. I was just like, what, why? And he's like, I've been watching you this whole time. Your eyes are all over the place. You're hammered. I am totally sober, man. Like if you had a breathalyzer. So yeah, that's how I got kicked out of a club for being drunk while being sober. - -58 -00:33:23,910 --> 00:34:10,860 -Wes Bos: That's amazing. Can we just go back to this umbraco for a quick second, I was looking at their website, and they have certification courses that you can take in person or in line, and it's 1200 euro for a one day course, which is how much USD 1400 us and then they have in person on site training for 60 $500 us a day. So maybe we do need to get into this umbraco and selling a one day course for 1400 bucks. Man, the thing about the corporate world man is you can make fun of the corporate world all you want until you realize that they're spending 1400 dollars a person to learn the CMS in one day, which is pretty incredible. - -59 -00:34:11,009 --> 00:34:12,900 -Scott Tolinski: For sure. fo sho - -60 -00:34:12,980 --> 00:34:17,630 -Wes Bos: you know what else is a lot of money or not? Not a lot of money. - -61 -00:34:18,000 --> 00:34:25,050 -Scott Tolinski: Hey, Wes, if you were if you're teaching a course on umbraco, and you made all that money, what would you use to keep track of all of that money, - -62 -00:34:25,290 --> 00:35:37,320 -Wes Bos: I would use fresh books. This is a sponsor. By the way, someone complained that we sometimes don't mention that as a sponsor as we start to schmooze into it. freshbooks is these small business accounting software that is going to make your billing painless. So if you are it's, it's I'm going to be doing this right after today. It's time for taxes and I need to get a list of all of my expenses. I need to get a list of all of my different invoices that I sent. I need to find out which ones aren't paid. So I can write that off as as an unpaid invoice. I need to figure out what are all the different taxes that have paid what are all the different currencies that I've made money in. So I can state that as income in the different currencies and convert them to Canadian and taxes are extremely hard invoicing, expenses, all of this stuff is extremely difficult. And I feel good about it. Because all I know that it's all inside of Freshbooks, it's all being tracked accordingly. And I just need to take a big dump of all of this information out of my fresh books, and send it off to my account. So if you are looking for some sort of cloud accounting, check out freshbooks.com forward slash syntax. Scott, enter in syntax into the How did you hear about us section? Thanks so much to Freshbooks response. - -63 -00:35:39,980 --> 00:35:43,230 -Scott Tolinski: Sorry, it's gonna take a big old dump there. - -64 -00:35:45,480 --> 00:35:47,730 -Wes Bos: Alright, let's keep this PG we can we? - -65 -00:35:48,510 --> 00:37:40,050 -Scott Tolinski: I'm sorry about that. All right. Speaking of keeping this PG this next question is from silly coconuts. So thank you for asking a question silly coconuts. This question is, I have a good working relationship with my boss, I'm ready for a new challenge. How do I break this to my new employer, I can't shake the feeling of guilt, aka you're looking at leaving your job, you're feeling guilty about it. Because you've built up a report, chances are you've worked at these places, you've become friends with all these people, your bosses, all these things, makes it really tough to leave a job. I remember being emotionally distraught when I left my very first dev job for another job. And it turned out that another job that I left the that job for what ended up not being any good, but it was a good pay raise. And it was good for my career. And it led to other opportunities. So this is totally normal. And it's very difficult to leave a job, especially one where you're so comfortable with and you you enjoy the presence of those people. It's so weird, because these are people that you spend, like every day with all day with, you become very close with them, so to have to leave, and you almost feel like you might be betraying them by leaving or taking another opportunity. My advice here is do not limit your career and don't hold back just because of those things. I know people that have stayed at the same job their entire life, and their career never move forward. And if they're cool with that, and they're happy with that, that's cool. But if you're feeling like you need a new challenge, chances are that that those feelings are legit. And those are important feelings to not ignore. So I've left jobs that I've really love my coworkers, you can always keep in touch with everybody, I keep in touch with a lot of old co workers, and we still chat all the time. So I would advance your career and I would move forward. And if these people are really your people, then they'll understand absolutely, - -66 -00:37:40,050 --> 00:38:11,100 -Wes Bos: these types of people will be happy that you are going there. They're excited to see that you're growing. And I think that it's hard to tell them but you just have to break it to them. And likely they'll be happy for you. And they'll be sad that you're leaving, of course, they probably really enjoy you as an employee, but they're excited to see you move on to bigger things and to continue on in your career. They know that you're not going to be working there for your entire life if there's no nowhere for you to grow in your current job. Yeah, so that's advice from someone who's never actually left a job. So - -67 -00:38:12,300 --> 00:38:15,150 -Scott Tolinski: assault No, it's very true. It's very true. - -68 -00:38:15,269 --> 00:41:38,400 -Wes Bos: Next one is from Morrow, de protests. This one could fit in a stumped episode. We haven't done a stump episode in a while, but we've got a treat for coming up for you in a couple of weeks. So hold on to your pan a tasty treat a tasty treat. The question was, what is the difference between and here, you're gonna have to just visualize this code. I hate doing code on on audio, but const add equals, and then we have an arrow function that takes in a and b, and then returns a plus b. So it's just a function that returns that takes in two arguments or returns the sum of them. And then the other one is function, add, takes an argument amb, and then returns a and b. So the first one is just a variable called ad that is set to a arrow function. And then the second one is just a regular function declaration turns a and b. So what are the differences between these two, not a whole lot. It doesn't really matter all that much which way you go. There used to be that the difference between the first one which is just a variable, that's called a function expression, where you you put a function into a variable. And then the second one is called the function declaration where you use the keyword function, and you go ahead and define it. It used to be that the function expression was bad for debugging, because that's technically an anonymous function. It's not named ad, it's just stuck in a variable called ad. However, debuggers have got much better browsers have got much better and the name of the function is inferred from the variable itself. So that's not really an issue anymore. Some other differences I've got jotted down here, arrow functions don't have this context, right. So there's something Their function expressions aren't hoisted, meaning that with regular functions you can use the function before it's defined. And I heard a really good argument for this the other day, maybe I'll just pause this really quickly is, remember, during the buzzwords episode, we said, we explained what hoisting was. And we said, why would you ever use hoisting like, what's the what's the benefit of using hoisting, and hoisting, for those who don't know is the fact that you can use a function before it's been defined in the the one reply I got from that was someone that wrote a blog post, and they, I prefer to have a file. And when I open the file at the top of the file, it's what it does. And then at the bottom of the file, it's how it does it. So meaning that you write all of your logic at the top, and then you define your functions at the bottom, because you crack open a file, and you can quickly see what does it do? And then if you are concerned about how does it do it, well, how are the functions made, then you can scroll down to the bottom. So I thought that was pretty good argument. I just don't use it myself. I just define the functions first, or in a module and import them. But that is one good I guess, use case for hoisting and function expressions are not hoisted. So there's that. And the final thing I have here is that arrow functions don't have an arguments object. So it's inside of regular functions. There's like a variable available to you called arguments. And its array like object that has a list of all the arguments that have been passed in. But it's generally a no no to use the arguments object. If you do want something like that. Just use a rest Fram inside of your function. So that's not really a big deal. So I don't know. What do you think about any anything to add there? Scott? - -69 -00:41:38,760 --> 00:41:47,360 -Scott Tolinski: No, you nailed it. Dude, that that was a great, that was a if you were in an interview, when you gave that answer, I would assume you were reading it that we had, - -70 -00:41:47,670 --> 00:42:03,270 -Wes Bos: I did come up with those notes, obviously, before this. So there's not a whole lot of difference? I probably would just do. I don't know, that's a good question. What would you would you do the constant add a B function? Or would you do a regular function? In this case? - -71 -00:42:03,630 --> 00:42:13,710 -Scott Tolinski: I mostly just use arrow functions, because that's just how I work. It doesn't. To me this one of those things that it doesn't necessarily matter that much in my day. Yeah. - -72 -00:42:13,730 --> 00:42:40,670 -Wes Bos: Unless you need the like the binding of this right? Which in this case, no, you don't need it. It's an add function, you know, it's not an object or you say this dot total, or something like that. So it doesn't really matter if people have very strong opinions on either end. There's some people that just arrow function by default, just because it's new. And then there's other people that don't use arrow functions at all because they think it's hipster or something like that. Or it's hard to read or something like that. You can make your own decisions there. There's not a whole lot of difference, though. - -73 -00:42:40,830 --> 00:42:42,980 -Scott Tolinski: Cool. Well, I think that's it for this potluck. - -74 -00:42:43,190 --> 00:42:45,690 -Wes Bos: Awesome. Hopefully that was tasty. I'm full. - -75 -00:42:45,710 --> 00:42:46,380 -Scott Tolinski: I'm full. - -76 -00:42:50,190 --> 00:42:51,750 -Wes Bos: Um, do you have any sick pics today? - -77 -00:42:51,780 --> 00:43:46,530 -Scott Tolinski: I have some sick pics. Let me see here. So my sick pick is ja henckels granite pans. We just got some new pans and pots. And they have been like, it's been a while since we got where the the coating was starting to come off. They were very clearly showing their age. And we're like, Well, what do we get? And I talked to my brother and he said they got these granite pans, which are they're I mean, they're metal pans, but the nonstick surface is granite. Yeah. And they are incredible. We just got them. I'm loving them. The non stickiness is great. The pans are just very well made. We never had anything like this. And just as a huge fan, we got like the 10 piece set from Costco online. So I'll link that up the Costco ones that we got. But if you're looking for some pans, and you never heard of granite surface pants and check these things out because I'm I've been a big fan. - -78 -00:43:46,800 --> 00:43:52,920 -Wes Bos: Yeah, we've been using these for we've been using the rock ones, which is why I always say - -79 -00:43:53,010 --> 00:43:59,580 -Scott Tolinski: do you smoke? Yeah, yeah. Oh, that's a great, I'm gonna start started doing that. Sorry, - -80 -00:43:59,640 --> 00:44:39,600 -Wes Bos: I do use cast iron quite a bit. I know that there's gonna be the cast iron people coming out and saying I do use cast iron a lot. But when I just want like a really good nonstick pan, and we have used these for about two years. I use probably mine two or three times a day. And it lasts about a year and a half a nonstick pan does not last forever just because of sometimes if you go too hot on it, you ruin the finish on it and things like that, but I've just been loving these. It's the same idea. It's just like has like a kind of a speckled surface right? Yep, yep. And nothing sticks to it. And just big fan of it. So yes, you should check out these these henkle ones. I'm gonna start doing some some rock. - -81 -00:44:39,720 --> 00:44:46,380 -Scott Tolinski: Some Mickey's melt the rock is cooking things because that's hilarious. You know what my dad's name is rock. And I'm really surprised that he's never said that before. - -82 -00:44:46,440 --> 00:45:03,420 -Wes Bos: Because that sounds like I know. I can't believe that. You smell? That's great. Yeah, we just we just bought a whole cook set. All of our pots and pans are made out of this rock stuff. And don't Don't tell me that it's gonna kill me this Surface probably some sort of chemicals or something like that. I know. - -83 -00:45:04,770 --> 00:45:08,280 -Scott Tolinski: I know. I know. We got cast iron going on here too. I get it. Yeah, - -84 -00:45:08,310 --> 00:45:17,760 -Wes Bos: yeah, I use cast iron when I need the benefits of cast iron. And it's really well seasoned, but just when I'm making eggs and things like that, I'd still like to use a nonstick. - -85 -00:45:17,760 --> 00:45:18,540 -Unknown: Absolutely. - -86 -00:45:18,690 --> 00:46:21,840 -Wes Bos: My sick pick is going to be wire strippers. So I talked about last time how I'm working on this project where I'm trying to wire up my kids Barbie Jeep to just juice it a little right just a little faster. Awesome. Yeah. So I bought these I've had these like terrible wire strippers my entire life and finally said, you know what I'm gonna buy the best wire strippers you can have is like, I as I get older, the more realizes like life is too short to have crappy versions of things, right? Yeah, I just want the very best. So I found that there's these automatic wire strippers actually found it on like the subreddit, it's called specialized tools, where Yes, it's like subreddit of these really specific tools. And somebody showed this like wire automatic wire stripper, where you just put the wire in, clamp it down, and it like, does like perfectly gauges the size of the wire for you, and then just strips off that, and I use it with really thick and very, very tiny USB wire. It just works perfectly every single time. And it's like 17 bucks for a pair of these. And I'm just like kicking myself, because I've bought like 10 pairs of the cheap $5 ones - -87 -00:46:21,840 --> 00:46:23,700 -Scott Tolinski: that are awful. - -88 -00:46:23,790 --> 00:46:42,360 -Wes Bos: They're all over my house, they don't work and I've every time I need to strip something I go through like a meteor worth of wire. So I'm just just so happy with these things. They're they're made by Irwin vise grip. They're called the self adjusting wire stripper. I've got the eight inch ones. I'll link it up in the show notes as well. But super happy with these. - -89 -00:46:42,570 --> 00:46:51,180 -Scott Tolinski: Nice Yeah, I saw those on your your ID and I was like, Ooh, that looks like something that is always a pain whenever you need to do it. And it looks like it solves that pain. It's one - -90 -00:46:51,180 --> 00:47:01,500 -Wes Bos: of those things where you just have to buy it now and put it up in your toolbox. And then at some point, you're going to need to strip something like Oh, thank goodness I got this thing saves me so much time. - -91 -00:47:01,560 --> 00:48:04,350 -Scott Tolinski: Yeah, for real cool. Uh, as far as shameless plugs go, I have a series on the grid, some that is now available on level up tutorials. COMM so if you want to learn how to build static sites, in view, j s, this is a very similar platform to Gatsby. It's, you can think about it like this. It's Gatsby. If you wanted to use view instead of react, and you wanted a little bit more magic in the configuration side of things. You wanted to be able to just write some config and have it be able to do a whole bunch of stuff for you without actually writing JavaScript. You don't have to go through looping over each of your nodes to create pages, you just say, Hey, here's a pages directory, go ahead and just make those pages for me. There's a lot of really, really interesting, easy stuff in grid summit. In my opinion, it's a very, very fast way to build static sites. So if you want to learn how to build fast static websites using Vue js and grid Sam, head on over to level up tutorials.com forward slash pro and sign up for the year to save 25 firsthand - -92 -00:48:04,560 --> 00:48:51,450 -Wes Bos: metaphor. I'm gonna plug my youtube channel again. I've been on uploading spree lately with I'm doing a series on scraping and then I just recorded like a one off little someone tweeted like a specific CSS problem. And I stepped through all of the like, why he can't do it in grid like you can't do it in Flexbox why you can't do it in CSS columns. And the funniest part about it is everyone in the comments is an expert without actually watching the video. It's just yell at comments. I'm like, just do it with grid You idiot. Thanks. Thanks for watching the video. So I've got that up. I got a couple new interviews that I did at Prismic a couple of weeks ago in Paris, so just go to YouTube search for Wes Bos w esbls. And make sure you subscribe to my channel. I'm trying to catch up to Scott with the his hundred thousand subscriber What do you Oh, you're almost out 300 300,000 - -93 -00:48:51,450 --> 00:48:53,070 -Scott Tolinski: Yeah, - -94 -00:48:53,070 --> 00:48:57,390 -Wes Bos: yeah, there's no way I'll ever catch you. But I need that plaque for my own self esteem. - -95 -00:48:57,720 --> 00:48:58,740 -Scott Tolinski: Yeah, I got that plaque. - -96 -00:48:58,800 --> 00:49:05,310 -Wes Bos: I got that plaque. You got the O g one right there. Now they're like giving them out to everybody. So they're not able - -97 -00:49:05,850 --> 00:49:25,230 -Scott Tolinski: to change the design of them. Mine was heavy. And it came in a big box. And it was a nice, I almost didn't wanna throw away the box because the box was almost like a thing. So no, it was it was definitely super cool. All right. Well, that's it for this one. We're gonna be hitting you up on Monday with a tasty treat. It's gonna be a lot of fun. We're going to be talking about portfolios. - -98 -00:49:25,350 --> 00:49:27,180 -Wes Bos: All right. We'll see you then. Thanks for tuning in. - -99 -00:49:27,390 --> 00:49:41,160 -Unknown: Thank you for tuning in peace, peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax133.srt b/transcripts/Syntax133.srt deleted file mode 100644 index 6258ad9eb..000000000 --- a/transcripts/Syntax133.srt +++ /dev/null @@ -1,128 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott l. - -2 -00:00:25,890 --> 00:00:56,100 -Scott Tolinski: o Welcome to syntax and this Monday hasty treat, we're gonna be talking about portfolios, what you should have in your portfolio, what you might not need, how you should have it be styled how you should have it organized stuff that people are going to be looking at in your portfolio to make sure that you stand out in the right ways, and not the wrong ways when someone is checking out your work for potential job. My name is Scott, once again, my full stack developer from Denver, Colorado, and with me, as always, is West boss, - -3 -00:00:56,430 --> 00:00:57,450 -Unknown: everybody. Hey, Wes. - -4 -00:00:57,450 --> 00:01:01,590 -Scott Tolinski: Are you ready to crush this episode today? - -5 -00:01:01,740 --> 00:01:02,850 -Wes Bos: Totally cool. - -6 -00:01:03,299 --> 00:02:31,130 -Scott Tolinski: So before we crush this, let's go ahead and crush some of our bugs with sentry.io sentry.io is a longtime sponsor here at syntax and with century, you basically drop a couple lines of configuration in your code. And after that it really does an amazing job at keeping track of all of your errors and bugs that come into your website. From this allows you to manage them, see how many users are affected, see what operating system, what browser, all that amazing stuff. You can attach user data so you know exactly which user had an issue. And you can go and message and say, Hey, I fix this thing. It's all it's all good now, and or you can see some bugs, maybe there's a bug coming in. That's just a Google Analytics error. And you want to go in and say, Hey, I never want to see this again, go ahead and ignore this bug. Either way century is an amazing tool, because it gives you visibility into what's happening on your website, so your users don't have to tell you first, therefore making the experience better for everyone. So I use century over at level up tutorials. I know Wes uses century, we are both big, big fans of this service. So if you want to try out century head on over to century.io use the coupon code at tasty treat all lowercase all one word, and you'll get two weeks for free of century. So check it out, let them know that we send to you and trust me, you're not going to be disappointed. These these error tracking systems are extremely invaluable. And I've just been such a huge, huge fan of century since signing up. So check it out again century that I Oh, all right. So let's kick this off with Yes, yeah, let's kick it off. - -7 -00:02:31,250 --> 00:04:06,090 -Wes Bos: Alright, so portfolios, we're talking about portfolios today, what makes a good portfolio? Do you need a portfolio things like that, I would say that portfolio is probably not as important as relationships that we talked a lot about not last freelancing episode, I had a terrible portfolio for most of my career. But when I did get started, and when I did get good jobs, people were not necessarily looking at absolutely everything in my portfolio, they were just glancing over it really quickly, just clicking on a few things just to see that, oh, this person actually does know what it is that he's talking about. So what we're gonna do today is just go through a whole bunch of tips of things that we think are work well in a portfolio, as well as things that maybe necessarily don't work well, and hopefully give you just some some tasty treats as to how to make your own portfolio. So the first one we have here is to, is to take screenshots of the website when it's in its best mode, because I often what would happen is I would finish up a website, it would look really good, there'd be beautiful photos that you've picked, and then the client gets in there and then they upload like a pixelated photo or early on, I used to not disable the color picker in WordPress, I didn't know that you could disable things or like, what I would do is I would specify the brand red and the brand green. And they would be allowed to use just those colors. Because otherwise they just go with the default blue green. And it starts to look like a Microsoft Word document that they had slapped together. So take some good screenshots of it when it's in its good state. Because when the client clicks through to it, it might not look as good as you initially had hoped. - -8 -00:04:06,149 --> 00:05:22,110 -Scott Tolinski: Yeah, I wrote underneath this or don't, I highly recommend taking screenshots for your records of what it looked like. Because again, that, you know, you might not have access to what it looked like at its best. I have not included images in my portfolio for my latest version of the portfolio. And I'm kind of of the mind now, I haven't always been but I'm kind of of the mind now that if a project no longer looks like something that you are proud of, in its current iteration, then you should probably remove it from your portfolio entirely. So like if somebody messed it up, I would just remove it from my portfolio. That said, I have enough work that I could remove something from my portfolio or swap it out with something else and still feel like it was is fine, right? If you have a couple of items and you want to pull something out of there and you only have two items then it's a little bit different but I've gone ahead and added I've only included things in my portfolio that people can actually use and actually see and have them look nice. So I disagree slightly on that. But again, it doesn't really matter images for me, were one of those things I just didn't want to have to deal with. I did not have to clutter the space with them just here. Here's a bunch of links. Here's the stuff I use. So it's just a difference of opinion. But I think either way, you're well off. - -9 -00:05:22,110 --> 00:06:08,700 -Wes Bos: I should also say the idea of a private portfolio is something that a lot of people I myself had done. Yeah. Because a lot of times you're working with a company and you can't let go ahead and outright say I worked on this just because of privacy rules. Or maybe it was subcontracted through another agency, things like that. You can't just put it up on your website and say you built it. But you can have like a private or like you'd say, hey, contact me. And I'll send you a list of sites that I had worked on privately, because for me, a lot of the stuff that I had worked on was just not allowed to, or it was internal, right? Like, it's just internal tools, you can't necessarily share the link out to an application that someone's using, unless they are a paying user of it. So in that case, lots of good screenshots, maybe a little screen recording saying that you can show the client, this is how it worked in this how we solve these problems. - -10 -00:06:08,820 --> 00:07:04,290 -Scott Tolinski: Yeah, yeah. Because at the end of the day, you are just trying to, to show off that you are capable of doing these things, you're capable of solving these problems or handling this kind of skill stuff. So next is to include a list of technologies used. And this is something that I've been doing for a little while, because it is important, right? People, you don't want to have your person who's looking at your portfolio. You know, they look at your resume, they say you can do this and that. But then they come in and look at your portfolio, they click through something you don't want to have to them to go to build with or whatever to try to find out what the heck you actually made this with. So I always list a bunch of stuff underneath each one. So I say this is built with the following technologies. This is built with Angular, sass, this is built with node Express Mongo, SaaS, this was built with the Drupal, omega SAS, whatever. And in that way, you get a quick glance, you see all the technologies and the super easy list. And people will be able to look at the thing and say, Okay, this is built with these technologies. And here's how it functions. It gives them a context to view your work in. - -11 -00:07:04,590 --> 00:07:47,040 -Wes Bos: Yeah, that's really important. Also, you're playing we talked about before you're playing buzzword, bingo. People need to say like, Oh, we use Redux or Oh, we use Google Maps. This person had worked on a project exactly what that a quick scan again, people don't want to spend forever going through all of your projects, like Scott just said, they want to be able to quickly see what technology used the same same idea as well, maybe even problem solved, like, what did you do on this website. So we created a store finder with React.js and Google Maps. So customers could quickly find a store that is close to them based on input ID or geolocation. Right, just like a quick one or two lines, sentences of what problem you actually had solved with this specific technology. - -12 -00:07:47,190 --> 00:08:44,640 -Scott Tolinski: Next is going to be a company logos. And this is if they're allowed, if you have permission from the company to use their logo, you it's it's it's a visual treat. And if you know somebody goes to your website, and they see Google and Ford and whoever, right as these logos, then it's more likely to say, Wow, at a glance, oh, wow, this person's worked with these companies. And then they can dig in a look a little bit more. This is not something that I've done personally. But I would say I've not done this out of laziness more than anything else, just because I haven't needed to. So I like this idea. I think it's I think it's flashy without being too flashy. And I think it definitely adds that sort of what do we call it, our friends, and I used to have this term called legitimize user. So we still look at stuff and we'd be like, that's a legitimate user right there. So we always just you look at everything and that we used to classify things is what is your legitimize you're here, you need something here and those right there, you look at it, that's a legitimate Iser - -13 -00:08:44,880 --> 00:09:07,110 -Wes Bos: totally, I think that I did this as my mind as well. I didn't even necessarily have permission from the coming like I'm not gonna get permission from Air Canada to put their logo on my website, but they're also probably not going to come knocking on my door telling me to take down they might but in my case, you just take it down write a definite legitimize or when you show all of the different types of companies that you have, have worked with. - -14 -00:09:07,280 --> 00:09:08,490 -Scott Tolinski: Yeah, absolutely. - -15 -00:09:08,610 --> 00:09:53,640 -Wes Bos: Next one we have here and this is maybe cheesy, maybe not is mocking them up on phones and laptops. This is definitely cheesy because people don't update them. Because if you have like a photo of or like the look of your website mocked up on like an iMac from eight years ago, and like an iPhone four, then that's just immediately will date your actual websites. But I think if you can keep on top of it, especially someone who's doing a lot more design work, mocking them up on fake computers, or if you're doing like design work on actual products, showing how they would be used in the wild and that looks pretty cool. And adds a little bit of visual flair. I think it is cheesy inside the industry. But I think that maybe people are outside of it. They think it looks cool. - -16 -00:09:53,820 --> 00:11:06,870 -Scott Tolinski: Yeah, something I used to do not something I do anymore, but again, I'm just got away from me is out of pure sloths and I'm not I'm not afraid to admit that. Another one here is to show your work, mock sketches, layup, layouts, layups, yeah, show your layups out, mine would not be very good, wherever possible. And this one's really definitely a cool one, we did this for one of the agencies I worked at, we wanted to show off our work in a portfolio. And we wanted to really give clients an idea of the process that we went through with some of these. And we did use in addition to that, the the layouts on a device sort of image thing. But we also showed our sketches, we showed how we arrived, we showed maybe some of the additional logos that we created beforehand, or the steps it took to get to that stuff, I think these these can be very powerful. It's like show your work and math class, because well, you you end up seeing the process and some of the some of how the sausage is made, so to say. And I think that's really interesting. It's not exactly one of the things that's going to get you hired specifically. But if somebody can see that you have a clean, organized process, that you have a thoughtful process, then I think that's going to help if the work especially if the work is good, - -17 -00:11:06,990 --> 00:11:36,480 -Wes Bos: the process is such a sexy thing lately, if you watch any car commercial, you'll see that there's like some Italian designer sketching in a book, or like carving this car out of a piece of mahogany, or something like that. And just like the idea of like not the final product, but how you came about the final product and your process to actually solve the problems and things like post it notes and like rough wireframes, things like that, I think go a long way and showing that, - -18 -00:11:36,570 --> 00:11:37,800 -Unknown: yeah, definitely. - -19 -00:11:37,830 --> 00:12:02,580 -Wes Bos: Next up, we have keeping it updated. This is one thing I failed at myself, which is just like keeping the sometimes a website would would be redone so that you have something in your portfolio for two or three years, and maybe the website changes again. And if that's the case, you just take it out. So spend some time every six months or so keeping it updated, taking out stuff rejigging it for however, the type of work you're looking for - -20 -00:12:02,699 --> 00:13:40,320 -Scott Tolinski: this next one is I think this one's pretty important. This one is one that I think that people can occasionally get wrong. And one that I've gotten wrong myself, I used to have so many items in my portfolio that I built like a filtering system part. And I was like, Oh, this is really cool. I got a filtering, you got animations, you got all this, you know, masonry kind of stuff going on, or whatever, I thought it was really great to have, you know, 24 items in my portfolio are a billion items in my portfolio. And granted, it can be fine, but no one's going to look at all of those. And especially if you have 20 some items in your portfolio, then chances are not all of those are going to be your very best work. Can you imagine like thinking about this? Oh, this is funny, because we've been watching Project Runway, it can you imagine like a fashion designer showing off every single one of the looks they've ever made? No, they're gonna show off like they're five or six best works that they've ever created. And I think that's how you should go with it too, is that like I have, I don't know how many I have right now on my website, I have 123456. And one of those isn't even to show any design work. It's just the syntax website to show that I do this podcast. So for me, I keep it very minimal of the stuff that I created that I am either proud of or was proud of at some point, because I kind of fallen short on the last one, which was keep it updated. This is not super outdated for me. But then again, I've only been doing a handful of work. But for real, keep it at five or six of your best work your absolute best work. And then you can if you're feeling insecure about that, you can always have a note that says, like, please contact me to see like the rest of my portfolio or something. - -21 -00:13:40,710 --> 00:13:52,470 -Wes Bos: Yeah, if you need something specific, then show me I have clients asked me all the time. Have you ever done anything with X, Y, and Z? And then you either say no, or Yeah, and let me let me pull up a couple examples or let me describe it to you. - -22 -00:13:53,040 --> 00:14:10,650 -Scott Tolinski: Yeah, yeah, absolutely. So again, keep it simple, keep it short, keep it your very best work, curate it to be the stuff that you're super duper proud of. Let's say you're a musician, and you wanted to create a six song Greatest Hits CD. That's how you should think of this. So - -23 -00:14:10,860 --> 00:14:27,330 -Wes Bos: one question I have for you is what do you think about putting like, if you had like a side project that was not necessarily for clients, but you did. It's something that you work on or you're passionate about? Or maybe you went through one of your tutorials or one of my tutorials and you built a project? What do you think about that? For some reason, my - -24 -00:14:27,330 --> 00:15:45,800 -Scott Tolinski: brain was like going to video land. I was like, you want to put a video in your thing. You know what, if you're going to be following the West boss tutorial and not changing it at all, then I would say do not put that in there. I would not be impressed by that. I not not that your work isn't amazing. But that like that's just sort of like a paint by numbers sort of thing. So you've transformed it to the point where I can't look at that and say, Oh, hey, that's the GarageBand loop or we just talked about this in the last episode was like hey, it is instantly recognizable defaults. I think can recognize it as those instantly recognizable defaults, I'm probably not going to be that impressed with it. But if you if you change it to the point where I have no idea what the heck this thing is its origins or whatever. To me, that's very different side projects, I put side projects in my portfolio all day long. I haven't lately, I guess, level up tutorials isn't a side project. That's my career. But at some point, I had my boy tools website in here, because I was really super proud of it. It showed case a lot of my my skills because I had the ability to really experiment with it, you know, you could really do some interesting stuff with it. But at the end of the day, I think, again, it's your best work in anywhere, your best work is coming from us that if you think that following a tutorial is your best work, then I think you need to do more work. Yeah, that's my thoughts, I guess. - -25 -00:15:45,840 --> 00:16:49,050 -Wes Bos: Yeah, I always tell people, like take whatever we built in the tutorial, and then try to build something that is sort of based on that. But it's not you're not selling shoes on an online store are the exact same thing, trying to like model it against it. And there's no need to credit me in any of these things. I don't people always ask that. Do I need to give you credit? No, not at all. I don't, I don't care. I want you to be able to get your job. But definitely make your own thing based off of that code base. And you can you can tell people like, Oh, so I took this tutorial. And this is what we built. And I thought, Hmm, maybe I could build something, again, somewhat similar using the ideas that I learned there, but something that I can call my own. Yeah, yeah, totally. Next ones we have here is that your portfolio might not necessarily be on your website. So I think of anytime I've hired somebody, usually where I'm checking first is I check their dribble, I check their GitHub, I check their Instagram, that's where people are finding people. So don't neglect the maybe the other places that are not technically portfolios, but that's where people are explicitly looking. - -26 -00:16:49,200 --> 00:18:15,240 -Scott Tolinski: Yeah, I think anybody who's going to stand out to me is going to be doing a lot of work, they're going to be doing a lot of work, right. Because if you're, if you're serious about this stuff, chances are you're working on this stuff every day. And if you're working on this stuff every day, you should have a fair amount to show for it. And so for me, I like to see that and Instagram, or dribble or any of these portfolio sites, if I'm given a portfolio that has like three things on it, and maybe two of them are sort of like the same. Yeah, it's not gonna be standing out to me not to say that you'll be sunk. But the idea at the end of the day is that you want to stand out, and you don't want to stand out in bad ways you want to stand out as being impressive your work is good. Your work is it is what somebody who's hiring would look for. It doesn't have to be this like giant monument of stuff. But it has to be good. And if you have an ID profile, where you're showing off your code, or you have dribble, where you're showing off all your designs, and then you're even some of your experiments and stuff like that, it's going to show that you care about it. And I know this almost contradicts some of the what we were saying about only show your best work in your portfolio. But to me, this is a completely different space. This is like a much more personal space where your portfolio is really like, this is the cream of the crop here in my portfolio. And your social profiles should be like this is me, and this is how I work. And this is sort of my my world. - -27 -00:18:15,990 --> 00:18:48,110 -Wes Bos: One thing I found is I follow a lot of designers on Instagram. And what I find them to do is that they will post everything that they're working on. And after about a week or two, they'll delete the stuff that they they're not it's not their best work, but they just want to show that they are continually working on stuff. But if someone were to come to their profile, totally fresh and scroll through it, then you kind of do want to show your best work. So I thought that was kind of neat, where after two weeks you delete the stuff that you're not that's maybe a good option. - -28 -00:18:48,180 --> 00:18:55,440 -Scott Tolinski: Yeah, burning. And then it also shows that you're good at editing, which is I think that's a big skill that people tend to overlook is the ability to edit. - -29 -00:18:55,500 --> 00:19:29,400 -Wes Bos: Yeah, absolutely. I think that's all the the tips that we have here. Hopefully, those are some good tips for building your own portfolio, it's kind of interesting place, you definitely have to have something up there that we hear from people all the time where they're a freelancer, or they're even if you're just trying to get a job, you have to show your work, right, you can't just have like a list of I work on code, right. And I love clean code, and I'm good at JavaScript, you show what you like, the proof is in the pudding at the end of the day. And if you can have a good portfolio, I think that it's gonna put you above a lot of other people. - -30 -00:19:29,460 --> 00:20:15,110 -Scott Tolinski: So send us your pudding and ask actual putting as well as your portfolios. We want to see your portfolios, shoot your portfolio link to syntax, and we will retweet and share your portfolio. Or maybe everybody can if you want to, if you want people to workshop, your portfolio, maybe we can get like a little community workshop going on portfolios here. I think this would be an interesting thing where each people can help each other out here, maybe give some positive advice. Go ahead and listen to our episode on giving positive critiques if you need advice on how to do that, but We want to see your portfolios. I want to see him. I want to see what people are doing. I'm always interested to see how people present this stuff. There's a huge range of possibilities. You can do so much stuff with this. So yeah, send us to us at syntax FM on Twitter, and we'll retweet you. We'll give you an RT. - -31 -00:20:15,320 --> 00:20:19,230 -Wes Bos: That's it for today. Thanks for tuning in. We'll catch you next Wednesday. - -32 -00:20:19,379 --> 00:20:32,330 -Scott Tolinski: Yes, please. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax134.srt b/transcripts/Syntax134.srt deleted file mode 100644 index 73a19aa0f..000000000 --- a/transcripts/Syntax134.srt +++ /dev/null @@ -1,340 +0,0 @@ -1 -00:00:01,319 --> 00:00:40,710 -Wes Bos: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. Today's Live podcast is brought to us by two awesome companies. The first one is the armory men's clothing retailer at the armory.com ar m o u r y. It's a proper British spelling. They are an awesome men's clothing retailer from New York City. And they also have a really great online store. We'll talk about them partway through the show, as well as century which is going to do all of your error and exception tracking. We'll talk about them partway through the show as well. - -2 -00:00:45,900 --> 00:01:46,590 -Unknown: Syntax FM is one of the top you know I can't do this. I was backstage watching EAS concession speech. And she called me divisive, is honestly one of the nicest things she's ever said about me. I really can't believe that she thinks I am influential enough to be divisive. You know, it was our dream to host a tech conference together. We do everything together. We ski together. We write books together, we learn new languages together and and we let crowdsourcing terrorists apart. You know, the internet is a wonderful idea. It's a great place until you people got on it. Your web developers, I think that there can be two hosts. I don't think we should have ever split this thing up Eve. If Can you come back out and host with me? What are you doing? Where's your normal clothes? - -3 -00:01:47,040 --> 00:01:50,280 -These are my normal clothes. Okay, well, - -4 -00:01:50,280 --> 00:01:57,450 -I'm really glad to have you back. And I think that we should both host this show together. Really? Yeah, cuz I can't read this card. Can you read this card for me? - -5 -00:01:58,380 --> 00:02:00,690 -Totally. I'll hold it with my - -6 -00:02:03,360 --> 00:02:14,370 -syntax. FM is one of the top podcasts for web developers. Its hosts are two amazing teachers and entrepreneurs. Please welcome our very special guests. Wes Bos and - -7 -00:02:14,370 --> 00:02:17,610 -Scott solinsky. Yeah. - -8 -00:02:22,220 --> 00:03:41,039 -Hey, folks. How's it going? Yeah, okay. Yeah. All right. Yeah, just sit down. Let's do it. Got it. Cool. Uh, thank you so much for everyone for coming out. This is really, really cool. Um, for those who don't know, Scott and I are on a podcast weekly. On Monday, we have something called tasty treats, which is like a, we try to keep it to 15 minutes. Sometimes it goes to 45 minutes, but supposed to be like a small, applicable piece of bite size. Yeah, I'm on a Wednesdays, we have tasty trades. And these are our longer hour long episodes where we deep dive into a topic we we spread it out over the course of an hour and really, really get in there and get some tasty treat. Yes. It's stupid to call everything tasty. On the podcast, anyone who listened to the podcast before? Ah, awesome. Um, go ahead. I'm not Scott, you're not Scotland ski. I'm a developer from Denver, Colorado. I am on the Twitter and Instagram and all that stuff at stilinski and a level up tutorials. My name is Wes Bos. I'm from Canada, which is why I say JavaScript funny or correctly. Anyone else from Canada? Any like real Canadians, not the ones that move down here for the money. Now. - -9 -00:03:43,740 --> 00:03:44,340 -All right. - -10 -00:03:46,350 --> 00:06:19,500 -Today's a live podcast we're gonna be recording it here. Obviously, with you, there's a lot of interaction. Pretty excited about it will also push this out on the regular feed as well. So today, here's the plan. First, we're going to start off with who's snacking on react, we're going to go through a bunch of different websites and you are going to guess via your phones, which website is built in react. Next, we have hooked on hooks where we're going to give you some sick tips and some of these things with hooks that we really like. Then we have this that are both so a little game where we actually even describe it. It's it's frickin hilarious. So get excited for that. It's pretty fun. After that we have this is gonna be really exciting. We're gonna explain a little bit more when we started but we have a a tag team coding challenge, where Wes and I are going to attempt to code something live I'm so nervous about and yeah, on one computer. It's gonna be a blast. And my computer as it's a MacBook so sometimes the keys go double, you know, like you forget Yeah. And I was eating in nature Valley bar earlier. So it's crumbs every it's done. Up Next up, we have stumped interview questions. So we're going to invite you The bravest folks in the crowd to come up and answer some some heart some very easy interview questions. If you win, you get some prizes. After that, we're going to be talking about unpopular react opinions. I wasn't sick of that. Yeah, yeah. Right. Yeah, that's that's the the hidden hip thing right now the hot thing. Finally, we'll end it off with a q&a with Scott and West. So if you have any questions about breakdancing or barbecue, or actual web development stuff, you can ask us those. So what we need you to do now is take out your your mobile phone out of your pocket, and visit this website pigeon holed.at Ford slash tasty or just go to pigeonhole that at type in tasty or scan the QR code there? No QR code when there's no Oh, can I please get the my screen on this screen? There we go. It's black. It's a good start. Don't worry. We're getting it fixed. There we go. All right. Hey. Yeah, five participants going for snacking? snacking. So click on the one that says who's snacking on react? You'll see like, there's two different one. Yeah, don't click on the other one yet. Not yet. That's really yeah. 4648 - -11 -00:06:20,940 --> 00:06:22,410 -Yeah. kliman. - -12 -00:06:23,700 --> 00:07:09,240 -While we're waiting props to the folks that pigeonhole this like wicked web app, that's like, all built on WebSockets. And it's like, all instantly live. And they hooked us up with their software to do these live shows, which is really cool. And amazing. Yeah. All right. We got almost 100 people at 100 the cake arrives and we'll start it Yeah, but you you can continue to join in anytime. Yeah, don't type it pigeonholed that at Ford slash tasty. A well, keyword tasty? Yeah. Big old. All right. All right. started up Scott. 99. Hey, all right. All right. So um, the question is, whose website is built on react? elton john, or ariana grande de - -13 -00:07:14,340 --> 00:11:28,529 -man. Oh, man. We got hundred 30 people in here. Yeah. All right. All right. reveals coming in lock those votes and right now. What's that from? locking? Who Wants to Be a Millionaire? Yeah, the audience. Oh, yeah. lock them in. All right. Let's see it. All right. Everybody's voted. Yes, I want to reveal. Whoa, incorrect. elton john. JOHN. Is Is he isn't react ariana grande de probably. Viewers viewer something crappy? Yeah. Next. Next up is ferrari.com or lamborghini.com. Who's using the blazingly fast alright. Hundred. All right, locker man. Ready to reveal? You gotta give me the confirmation every time. Oh, 50% 7%. Thought Lamborghini, which is correct. Why was 5050 guests okay? tight race. That's Starbucks or dunkin donuts. Who is using react to order your coffee or razor cards title? I can see the stats on dunkin donuts. All right, here it is. That one came in at the last second row. The correct answer is Starbucks at 50.7% is using react. Wow. kind of surprising. That's surprising. I probably would have wanted to know dunkin donuts. This is Dunkin. Now, yeah, but their website is still Dunkin Donuts, calm. We don't even have Dunkin Donuts in Canada. He's got a Tim Hortons, which Tim Hortons uses react, by the way. Next one, please, Scott. All right. Is it wayfair or IKEA? I think people know this one. Do you? Hmm. So wayfarer is like a family. Yeah. IKEA is the you know what? IKEA? Yes. Yeah. And it doesn't need IKEA. All right, my lock this in cash. 73.6% of you are correct. wayfair.com runs on react. It's actually a massive react application that runs many, many properties. So it's kind of interesting. tables and chairs and tables, chairs, blankets, throws. Yeah. Next is cvs.com or Walgreens or Walgreens. Oh, it's the double RS because of my crummy cable. Did you while we're waiting? Did anyone see the code pen the other day of someone who made the infinite scrolling receipt? So yes, sir. See? And like as you got to the bottom of the receipt, it would just kept loading it longer. Oh, I was howling. So funny. And oh, wrong. 47% of you guessed correctly. Calm is using react file. All right. All right. That's it mess. Some somebody got five out of five average score. 2.47. Who got five out of five? Wow, that's impressive. That guy view sources. All right, we're gonna continue going on. Now we're gonna talk about hooked on hooks. These are some spicy tips for our Hot Tips. And they spicy, spicy. Well, for working with hooks. How many of you are using hooks already in production? Oh, that's like half of you. Yeah. I guess that's the kind of person that goes to a conference on react though. Yeah. Okay. Go for it. Oh, yeah, we have that. Here. You go. Scott. Press the button to go next. Oh, no, I'm trying to get that. Oh, we go. Yeah. So this is really super easy to use something like local storage as if it was just set state. I mean, - -14 -00:11:30,149 --> 00:16:09,419 -in the past, it wasn't, maybe it wasn't necessarily difficult to use local storage. But now we have a hook. And it really functions and feels just like you state, throw it into a storage pullout of storage. Yeah, I don't know I could. So we basically just have a function that takes a key and initial value. We're using use state inside of here for the stored value and set stored value. But really, there's nothing crazy here because we're just setting it with window dot location, get item and then we pass the key in. And the same thing with set value, we can just do basically the same thing here until we're returning our stored value in our set value. It doesn't get any easier than this. Except for mine, except for yours. But by the way, Did anyone see the new standard lib key value storage. It's like a synchronous or asynchronous local storage. I don't see that. No, there's like this, like new thing coming to the browser. That's like standard lib. Because you know, JavaScript has nothing. And with me MPM install everything. We're starting to get like standard libraries. And the first standard library added to the browser is an a synchronous API for local storage. Seems pretty cool. Next one is I is for socket, io WebSockets. This is one that I was working with a drone, I was flying a drone with JavaScript, because that's a dumb idea. And the drone was I set up a WebSocket server that would send me the data from the drone, to my front end via WebSockets. Because if something with blades is flying at you quickly, you should be able to stop it quickly. And WebSockets does that. So what I need to do is capture the state of what the different data as to what the what the drone was doing, how high it was the tilts, the yaw all that stuff. So I have some internal state in this use drone socket hook. And then I simply take my socket, which is the socket IO connection, we listen for a specific message coming in on that web socket. When that comes in, you set that data to state when the socket is or when this hook is removed, then you remove your event listener clean up after yourself. And then finally just return that actual drone state, then you just got this object full of drone state, you can use that anywhere inside of your app component. Nice. Next up, we have use click on outside or use click outside and this one actually comes to us from use hooks comm site ever is the best site ever, especially if you're diving into hooks right now. Because there's so many like really practical examples. And to me just pulling through these, maybe you have a better understanding of how to write hooks myself. So this is a really great example because all it does is take a ref and a handler. And so many times we have like menus that you have the menu, you want to click outside the menu anywhere and you want the menu to close. So by simply throwing this hook, you're testing to see if the thing that you're referencing, and where your click is, are or where your click is, is in the same places where the thing you're referencing, so therefore if it is, then don't do anything, and if it's outside of that run whatever handler whatever event that you're passing in here. This is a really great example too, because it also shows adding an event listener and then removing the event listener on cleanup. So you'll probably end up doing quite a bit. Yeah, this little contains pretty much jQuery is in the browser now. Yeah, I guess Yes, yes. No, but contains, start using it today. Yeah. Next up, we've used key press. So I saw this one on use hooks, and they said, I'm going to write it myself because I find that the easiest way to grasp what's going on, very often my applications they need to know is somebody currently have a key down. And right now, if you want to know, if somebody if a key is currently down, you have to like, you need the event, right, you need to be able to access it, and then you set a variable outside. So this use key press hook, it's pretty simple. When somebody presses in down the key, you set it to true. And when someone releases that key, it sets it to false. And here, let me show you how it actually works here. So we've got the use key press hook here, you pass it a letter H, for example. And that will return a Boolean, whether it's currently down or not. And then your developers, you know what to do with Booleans, you can, you can do things like style them a little bit differently. Here, I'm using a CSS variable where I'm just setting it to different colors. And then we go ahead and set the the color of the actual thing on the component to be that specific color. So it's pretty cool. It uses internal state as well as use effect, which cleans up after itself, and then finally just returns the actual key. - -15 -00:16:11,340 --> 00:16:54,600 -Yeah, and lastly, I don't know how many people here have used react measure. wreck measure is extremely handy library for measuring things. But now, with hooks, you can build your own mini react measure, and then like absolutely nothing at all. And just really the bulk of it isn't resize observer, which is browser API that basically does everything for you. So nothing fancy here, we're just simply able to now have a use measure where we can measure literally anything we want, in how many lines of code is this is like less than 15? No. 11 994 minus 15. Yeah, yeah. Yeah, no, no 1111 - -16 -00:16:56,940 --> 00:16:57,720 -jobs. - -17 -00:16:59,220 --> 00:20:18,240 -With no one hired us. This is really cool. Because we also have new intersection observer in the browser, intersection observer will tell you whether an element is currently on screen or off screen or slightly scrolled into view or slightly scrolled out of view. And that's really cool. Because now you could make like a hook code, like, it's probably already made, like use is visible or use is on screen. And that will be able to give you a Boolean of whether it's currently scrolled into view or not. And then or it'll it'll give you like a what's called the intersection ratio it's it's currently half scrolled into view so do one of those annoying things where the swoops in from the side or something like that. Yeah. I think that's it for our hugs. Hopefully you guys enjoyed those. We're gonna play another game called this that are both to take out your phones again and go to pigeonhole at Ford slash tasty tasty and this time select this that or both, but although we actually have a neither option this time, some of them have neither some of them have neither. It gets a little tricky. Oh, yeah, it's climbing. It's kind of way faster. Oh, there we go. Everybody's arrived. All right. Fair enough. Scott, starting this one up. So first one first one. Gutenberg isn't a WordPress gooey plugin for creating react based Gutenberg blocks. A 90s budget TV show about sideboards who read both or neither. Oh, yeah. How many of you are WordPress? devs. No, one, one. Formerly, okay. Congratulations. I joke. I joke. All right, Scott. lock those in. lock them in revealing Oh, neither only 27 of you. So 40% of you thought it was a WordPress GUI for creating that's you're allowed to take that if you want. Yeah, create a WordPress nobody picked the 90s TV show. Next up we have nashorn Is this a JavaScript array Java based JavaScript engine developed by Oracle or a popular rock climbing spot in Denver, Colorado National Park. I'm gonna go grabs national national. Let's see it's got revealing whoa 6% of you guessed wrong. It is not a rock climbing spot. It is a Java based JavaScript engine developed by Oracle. So anyone ever used it before couple of you do We got the server side rendering in Java with nashawn Yeah, it's a cool name. It's cool name probably succeeds stokin Next up is easy peasy. Is it a react state library or a children's dish set? - -18 -00:20:22,530 --> 00:20:23,760 -hundred votes - -19 -00:20:25,200 --> 00:21:01,710 -let's see it lock a man. All right. This is an upset I think Landon has one of these. Oh, it is a react State Library. It is right it is okay good. I'd like did I get this wrong? No, it is not a children's dish that 70% of you that's a good one. The good track in peace with it. Yeah. All right. Next up we have use boxman Is this a hooks library for box model dimensions? Or a puzzle based flash strategy game for kids? - -20 -00:21:03,390 --> 00:21:05,130 -Use boxman - -21 -00:21:06,660 --> 00:21:07,800 -lock those votes in. - -22 -00:21:13,580 --> 00:21:48,860 -cabinets. Get those locked in. All right, here comes the reveal. Oh 6% of you were wrong. or right. Sorry. Yeah, most of you are wrong. is a flash game for kids. Not a box model. You should have known that because Scott just showed you a hook that you could do it with resize observer. Next up is toggs Is it a lightweight styleable toggle component for react or rain resistant outdoor gear? - -23 -00:21:55,650 --> 00:22:08,220 -Almost none of these people know me didn't there was a couple that like almost everybody knew Yeah, I thought Easy peasy was big enough. Yeah. All right. Here comes the reveal. - -24 -00:22:13,710 --> 00:22:15,630 -The perfect tie - -25 -00:22:18,000 --> 00:23:01,050 -That's amazing. That's amazing. So 50% were cracked rain resistant okay here although that would be like such that's such a react component names somebody takedowns blazing fast poggle library for react. You know as good as gone. Somebody is like I like I found togs like rain gear, and I was like, that's gotta be a react component to it wasn't so sorry, somebody get the GitHub get NPM get GitHub. Get the GitHub. We're here. All right, next up we have the landwind Is this a set of react components for using tailwind CSS, or is it a Chinese knockoff Land Rover SUV? Oh, - -26 -00:23:04,470 --> 00:23:05,040 -alright. - -27 -00:23:06,600 --> 00:23:07,830 -Get those votes in? - -28 -00:23:10,470 --> 00:23:11,940 -Here comes the reveal. - -29 -00:23:16,050 --> 00:23:44,610 -said only 30% of you knew that this is actually a Chinese knockoff of exactly a Land Rover SUV looking off it's hilarious. Yeah, I think it broke some people's streaks. Next up is free flow. Is it a state management library built on state context and UX? Or a California based hot tub company? - -30 -00:23:48,540 --> 00:23:49,470 -All right. - -31 -00:23:50,850 --> 00:23:54,330 -Get your vote in locker man folks lock them in - -32 -00:23:55,710 --> 00:23:56,220 -lockup. - -33 -00:23:57,780 --> 00:24:49,800 -Oh, these are hurl It is indeed a California based hot tub company at 40% of you guessed that it is not a state management library built on state contracts and books. So again, please feel free hooks is almost cruel, because it's so nice. It's so new that probably people haven't haven't heard of it yet. Alright. Lastly, we have overgrip in Is this a popular rock climbing spot in Denver? Or is it a client side video stabilization framework built on the file reader API? Oops. I should have we should have put like, like, like on Uber like Uber, Uber, Uber open source. Doesn't? Yeah, good. Yeah, that'd be good. Let's get the answer here. lock those votes in. - -34 -00:24:51,630 --> 00:24:52,710 -Oh - -35 -00:24:54,000 --> 00:25:18,180 -2% guess it is a rock climbing spot in Denver. So Uber gripping is what was the other one Oh, seven out of eight who got the Seven, eight, the same guy. That's impressive. That's impressive. Wow, quizmaster, not two people got seven out of eight. That was very good, very impressive, beautiful. - -36 -00:25:19,560 --> 00:26:19,020 -Wes Bos: Let's take a quick break for one of our sponsors. And that is century. Thanks so much to Sentry for sponsoring, Sentry does all of your error and exception tracking What that means is that you install Sentry on your website, you install it on your JavaScript, you can install it on whatever backend, you have PHP, Ruby, node, you name it, they support it, which is awesome. And what it does is it collects as much information about what went wrong. And then it will aggregate all of the that information and put it into this nice, nice dashboard that will allow you to see what was the error who did the error happened to how many people that this error happened to what were the maybe what was a stack trace that happened on the way to this error happening just gives you incredible invaluable insights into the actual errors that have happened. So if you want to try it out on your website for free, go to century.io and use the code tasty treat all one word, and you're gonna get two months for free. Thanks so much to Sentry for sponsoring. - -37 -00:26:22,110 --> 00:29:17,760 -Unknown: Alright, let's go on to the next section. Who here watches this is Gordon Ramsay show called master chef, master chef who wants his master chef, only like three people, okay, so on master chef, what happens is that they have tag team, and one person has to cook and the other person has to stand there and not well, you can say stuff but you can't like actually. And then Gordon Ramsay stands there and yell at you. So we thought this would be funny to try and build something with me and Scott, where every 30 seconds, we switch. So we're gonna have a timer on the screen. And every 30 seconds, we need you to the audience to switch. And we'll have to switch out and keep coding. So the idea of the application is that it's going to pull a dad joke from API I can has dad joke calm. It's is going to start. Yes, no, it's going to display the joke on the page will have a button to fetch a new joke. And then it must use hooks and state to do all of this. So I've got 35 minutes maximum. Do you think we can do it? We actually don't know because we have not talking and then I was like, oh, maybe we should? No, no stop because it would be more her later. He kept on shrinking and we're like it's gonna be 10 minutes. We're gonna get a minute for like, about 30 seconds each. Yeah. How about five minutes? Because I think it'd be funnier if it fails. Yeah, it could fail catastrophic. Lee that is so we are going to flip a toonie we gotta get this, which is a $2 coin in Canada. And if it's heads, Scott will start first. If it's tails, I will start first. Tails. Oh, you started. I'm starting. Alright, so. Oh, wait, we gotta keep we gotta keep some some running room in here. Yeah, so you're gonna need some coding room. Now. We got a hunch. Okay. Yeah, the hunch gone. Okay. Here we go. As soon as I click this, it starts ready. Oh, by the way, we have create react app. This is the base create react app ready to go pass that we've not NPM installed Anything else? and ready to go? Ready? Go. Alright, so we've got I can has dad joke calm? I don't know what API you should do. The API grabbing first. Okay. I'm not familiar function use dad. And up here we'll say const. Co nostos. const. API is equal to that. That's the API endpoint. Yeah. And then in here, we'll say const. Import use state. We're not even having a - -38 -00:29:20,250 --> 00:29:23,130 -functional component finished yet. I have a functional component. - -39 -00:29:24,540 --> 00:32:34,920 -can also use state Oh, I typed us okay. Oh, okay. Oh, yeah. This is state k data and a data set set date. Okay. State and object. Yes. As a loading state, I don't think that's gonna make a function called fetch. Joke. Yeah. And I'm going to make that a sink. Yeah, it's got to be a thing. And const responses equal to a weight fetch API. And I know that this API needs a header header, you got to do the header part. Okay. headers, not use this API did a forward slash on headers. Okay. Okay. It doesn't need to be working right now. Wait, why is this lowercase? No. Don't use dad. What is a functional component called my joke? Oh, man. We got three minutes. Okay, here it is. Is it isn't working, except is not defined? Oh, that's because I never finished writing my header. Yeah. Except in the doc say, it needs to be application JSON. So, Oh, come on, man. Stressing. Okay. So we await that. And then yeah, we need you to convert the response to JSON. await Yeah. brez await dot JSON dot JSON. And then console log the data just to see if it's working. We don't got time for that. It's working. Okay. Now go inside your joke. Yeah. and easy to use the hooks. Oh, wait, why? Why are we? Why are we doing a custom? Why don't we just put this inside of the component? So from here, we need to return? Oh, my gosh. Oh, my gosh, return the data and the Set Data function because we want to have a button. Set. Oh, my God. Set Data? Why? Okay. And then hook What's going on here? Why don't we make a custom hook? Yeah. const. We could just done in the component. Data. Set Data, which is equal to use hook use dad, we're using dad here. All right. Okay. How does the data come into? I don't know, with the console. log in or put a breakpoint in. Why don't we have an extra bracket? - -40 -00:32:36,420 --> 00:32:37,140 -New Crump. - -41 -00:32:40,680 --> 00:32:46,350 -It's not in there. Can't get - -42 -00:32:48,120 --> 00:32:48,690 -a - -43 -00:32:51,720 --> 00:32:52,950 -good property. - -44 -00:32:55,170 --> 00:33:37,950 -Is anyone in the car? Does anyone see why this isn't working? I didn't the fact we didn't actually run it. Use? No, the point is that, yeah, we forgot our effect. We just defined the function, but it's yellow because we never used it. We need to use a fact right? Yeah. Yeah. Inside the hook. Yep. No. Oh, inside the inside the hook. Why not inside the component? Man. I'm used to doing so get the good. We didn't talk about how we did this. Yeah. No neuro below the inside of the what? fetch joke? No. - -45 -00:33:43,500 --> 00:34:14,480 -Keep going one more minute over time. In here, we're going to use effect. And this is an arrow function. Yeah. And then and here. We actually call the fetch joke. Yeah. endpoint. Okay, and then inside of here, data set. - -46 -00:34:18,390 --> 00:34:19,050 -Now the button. - -47 -00:34:24,230 --> 00:34:37,190 -It's not called set data. That's a bad name for it. But it's destructured. So it doesn't matter. We just need to use that. No, no. differently. All right. It's fine. I'll fix it. - -48 -00:34:40,140 --> 00:34:41,340 -You shouldn't have started first. - -49 -00:34:50,279 --> 00:35:02,880 -What's it called? Us, dad? Yeah. Us dad. And then that was refetch and you delete here is really Fetch. No. And then add click - -50 -00:35:04,440 --> 00:35:05,360 -the button text. - -51 -00:35:18,270 --> 00:35:19,590 -Click the button. Yeah, yeah. - -52 -00:35:21,660 --> 00:35:24,810 -No. Dispatch dues. - -53 -00:35:31,080 --> 00:35:36,510 -Oh, in that return data. Oh, no. Oh, yeah. In the array. Yeah. - -54 -00:35:38,420 --> 00:36:07,770 -Yep, safe. It doesn't need a custom hook. Whenever using this open source. Oh, that was fun. It could have been so much easier. - -55 -00:36:10,020 --> 00:37:38,580 -Oh, man. Well, thank you so much for us. I thought that was pretty fun. All right, let's keep. Next up is stumped. We need a few brave souls to line up right over here that will be willing to answer or attempt to answer some react questions or prizes. For prizes. We have stickers, and we have some t shirts that will be mailed to you. Come on, there we go. How many how many questions we got here. I think we got like six questions or so. Okay. Okay. Oh, yeah. Come stand over here. Come grab the microphone. We can we can pass it over. Yeah. All right. We need a few more brave souls. Go. Come on. Come line up over here. All right, please. are. We promise, Kyle. Thanks for being the brave first, Kyle. So the question is, what is a react pure component for? I don't even know. There's a couple of these. The answer to say component that always returns the same thing. If it's props for the same glass. That's that's like a pure function. So let's give it to him anyway, who wants to? anyone from the audience? When I answer Yeah. - -56 -00:37:44,580 --> 00:39:33,210 -No. Yeah, so should component update does a shallow compare meaning that if you pass it a string or a number, that thing will always change. But if you pass it an object and the the properties of that object change, then it won't cause a rerender. Yeah. And come see me after I'll get you a T shirts. I got the T shirts, but they're not here here. Next one question. Why might you use a callback with setstate? Oh, because after set state, it's something that runs synchronously. So you want to make sure that something runs after that state was set. Beautiful, great. By the way, I was curious, before this, I was curious about like, like, how does that work with hooks? Right? Because there's no callback with the hook set state and I read into it. And if you want to do something when state changes, then use an effect. And I thought that was kind of interesting. So obviously, we didn't we didn't do that there. But if you do run into that problem, you probably want to reach for an effect. Question three. How am I you reverse an array without mutating the original array? You can use a spread operator and just the reverse. Bang, bang, bang. Got it. So some way to copy the array spread array from what's the way we used to do it before? like google it every time you need to do it. Yeah. Beautiful. Beauty. Yeah. All right. Yo, Hey, yo, hey. Alright, question number four. Can you explain what a downtown job is? - -57 -00:39:37,730 --> 00:39:38,310 -What? - -58 -00:39:41,400 --> 00:39:50,340 -I want to come run up and answer this one. This is the idea here. You - -59 -00:39:53,690 --> 00:40:29,690 -know, it's not a job where the commute makes the hate your life. Hell Yes. All right. This is science Gods dad came up with please explain Scott do a downtown job is just doing a really good job on something when we used to mow the lawn for our neighbors. He always used to tell us, you better do a downtown job on this. which apparently his dad told him like a really good job. We got a really good job. So yeah. We need some more people. We got to Mark Yeah. All right. What's your name? - -60 -00:40:29,900 --> 00:40:30,980 -My name is Shannon. - -61 -00:40:31,730 --> 00:40:40,670 -Thank you, Shannon. Question number five. When would you use use reducer in react hooks? So I had asked about it. - -62 -00:40:40,730 --> 00:40:52,980 -Um, as someone who has no experience with hooks, or react 16? I would say you would use use reducer when you want to make a - -63 -00:40:54,090 --> 00:40:55,050 -state. - -64 -00:40:55,130 --> 00:41:04,460 -I actually googled this yesterday, when when you would use use state versus use reducer and I didn't read the thing, but it's on my laptop right now. - -65 -00:41:06,840 --> 00:41:08,460 -The tab is open. So I'll get to it. - -66 -00:41:10,730 --> 00:41:13,020 -Something about changing data? Good. - -67 -00:41:13,169 --> 00:41:47,280 -Yeah. Sky you want to fill in? basically use use reducer when your your state needs are more complex than just a simple set state. Yeah, arrays, objects, you got stuff you got to deal with. That's more than just simple steps. Or you feel like just using a reducer for whatever reason? You want to answer a question. Oh, beautified I just pointed out someone. What's your name? Oh, number six. What makes use layout effect different from use effect? I don't know. But it affects the layout. Beautiful. - -68 -00:41:54,300 --> 00:42:14,340 -Yeah, use use layout effect. When you need to wait for the the DOM updates to finish before rather than just use effect. anymore. brave souls. Yeah, come on up. What's your name? Then? I think we got? Um, I think so. Yeah, I never know. - -69 -00:42:17,210 --> 00:42:40,380 -Number seven is what prop type would you use for an object that contains a number in a string? You would use prop type dot one of type, I believe and then you pass in an array, which would be a prop type number, our pop type, comma prop type string. Or you can use node, - -70 -00:42:40,380 --> 00:42:41,070 -I believe. - -71 -00:42:41,519 --> 00:42:43,190 -The key word here is object - -72 -00:42:43,260 --> 00:42:45,210 -an object? Oh, okay. - -73 -00:42:45,230 --> 00:43:05,460 -Not either, but an object with both of those inside of it. Hmm. I think there's, there's a prop type that allows you to do objects I guess it's object and you probably think you can pass it keys for the object keys close enough its shape. But yeah, you pass the keys. Are you remember? Thank you. One of type is also very. - -74 -00:43:08,850 --> 00:45:48,720 -Alright, folks. Now it's time for a segment that we like to call unpopular opinions. So the creator of JavaScript recently tweeted unpopular opinions, React JS edition. And this caused everyone to tweet their unpopular opinions. So what we're going to do now is go through some of these unpopular opinions. We're going to go through some of the more popular unpopular opinions and and give our thoughts on them. First, unpopular opinion is from Alex R. Anderson. 1993. Does anyone else feel super old when people have 1990 in their username? Oh, um, React life primitives should be included in browser engines, JSX, virtual Dom reconciler, scheduling etc. In other words, reaction become the platform. Whoo, spicy opinion. There is a bit we saw, who's been a developer for more than, like, eight years. When did we see this before when people had this opinion of it should just be included in the browser? jQuery out, everyone's and last two LS should just be paired with almost everything they say they should just be part of the browser, just ship it with the browser and browser, so yeah. What do you think? I don't know. Maybe they should have some sort of like components on the web or something. I don't know. They could call it web components. Next up, we have a tweet from Ryan Florence. And he says the majority of logic people write and react for data loading and hooks makes it more confusing for people than classes. The suspense maybe it should have come before hooks. This one's kind of interesting because it's like in one hand hooks have been this like, revelation in terms of writing really clean, simple code. The other hand, we're still missing this big component of it, which is going to be suspense for data loading. So, yeah, yeah, I think so I'm really excited about suspense for data loading, because it's gonna make fishing data easier. The code we just wrote. You'll notice right here, why did I do an anonymous function here? Why did I not just pass it fetch joke? Anyone know? Yeah, you can't pass an async function to use effect, because an async function returns a promise, which if you return something from us effect, it's a, like a teardown function, right or a willen mountain function. So that's it's a little bit funky. It works. Scott didn't like my solution. But well, - -75 -00:45:51,390 --> 00:47:25,800 -Wes Bos: maybe we should do a v2 after. Let's take a quick break out for one of our sponsors, which is the armory the armory is a men's clothing and accessories retailer. They have an awesome online store, as well as a boutique in Tribeca. They actually just launched their spring, summer 2019 lookbook. So you'll want to go to the armory comm and check that out. So what's the big deal about the armory, they make awesome quality clothes, you're not necessarily going to know the brand name where you pay extra for that. But if you care about getting high quality clothes, things that are going to last you for many, many years, you want to check out the sort of curation of the clothing that they have. They're actually on this trip alone. Scott and I were practicing for this live show and Scott threw his sweater across the across the hotel room and said like, Yo, check this out. And oh man, the little cardigan that he had was so so soft and such good quality. I'm loving the the stuff that I got as well. I got a nice hat from them. I got a nice sweater, and a really really soft a buttoned up. So check it out at the armory calm, highly recommend the clothes if you are looking to up your fashion game or maybe just buy a nice piece for like a wedding or maybe upcoming coming interview that you have. It's going to look good on you is scan the armory.com and check them out on Instagram as well. They are the armory NYC. - -76 -00:47:29,250 --> 00:49:07,890 -Unknown: Next one we have from Prismic react as a framework. Bernie devil emoji. So yes, no, well, actually us spicy opinion there. Next up we have for Aaron Garcia. hooks are harder to understand for beginners than classes. It also takes time to do things with hooks, mentally mapping them to what we'll do in classes. For example, when using use effect. You always think about which lifecycle method. And this is actually kind of true, because even when I'm teaching hooks, I don't say this is what the lifecycle method is. But what I'm teaching them I say, Well, if you've used lifecycle methods, you kind of have experience with how these things work. This is how it sort of correlates to that. Yeah, I don't, I don't think it's more difficult or harder. I would like to hear like, like a beginner who comes at it fresh without it without knowing lifecycle methods. And just knowing when this thing goes on the page, here's where you put your code. When this thing updates, this code will run again. And when thing goes off the page, here's where you put the other code. So as you can see, we got baggage. Yeah, yeah, it's baggage. Yeah. Next one from Sebastian. You know, I always goof up names on podcast. How do you say his last name? was really good. Thank ya, React affricate and delete things quickly enough. Really, I think if react, moved any quicker than it already does, there would be a lot more tears. What do they add? Yeah. Just think about the React router every time it updates, and you go to a new one today. - -77 -00:49:14,130 --> 00:53:43,440 -Next up from Jared Palmer, the learning curve is still too steep for folks with just basic HTML and CSS skills. I think this one's interesting, because we do see like frameworks and platforms like Gatsby come about where you really even have to know that much to get a basic HTML site up and running. I mean, you don't even have to have any interactive JavaScript in there or hooks or any of that. So you don't need management or whatever. You don't need state. Yeah, that's pretty easy. And that's what's so cool about Gatsby is it's at the very basic, it's just templating. And you can just get up and running. And that's very much how probably half of this room learned web development was they just got up and running with templating through WordPress. And then they learned a little bit more and then they learned about custom queries and then they learned about plugins and then before you know it, you're your friend On PHP developer that grew up on WordPress, so and when you need it, there you go. So I'm pretty excited even things like view as well. I think it's a, they have less of a steep learning curve. But I think Gatsby is doing a lot in the space to make it very beginner friendly. Yeah. Next up, Sergei resolve, we replaced Redux with use context and use reducer combination in many middle sized project, we are fine. So I did, I did a couple projects as well, big fan, I'll say not total replacement. But for a lot of use cases where people just want global state, or at least stayed a little bit higher than than where they haven't, then they can. Yeah, people will be like I'm writing a blog. It's time to use Redux or something. But no, I mean, to be superduper useful in the right, in the right use case. And next one is from Sophia Alpert. And she says, most people make react apps more complicated than they need to be. Yeah, I agree with this. Yeah, I think they do. Everyone's adding like 100 files with one line of code to do one little Yeah. And then just getting spit out. We love to over patterns and, and to overcomplicate higher order component, render prop everything and premature hook. Hook ization. Yeah, like apparently I used the hook when I shouldn't have today. Oh, yeah. Well, okay. Wait, time. What did I do wrong? No, you didn't do anything wrong. You overcomplicate it, I overcomplicated it. We could have put this whole thing you could have just had a use effect. Yeah, basically, it did mount. And then you could have had the function inside of the component. Think about reusability. Scott, we're not reusing. But imagine you and we could compose it into all kinds of different kinds of jokes. That's why you hear me off framework. Yeah, yeah, a dad framework. So you got to think about the future Scott. Next one from Parker McMillan. I like view simplify, looping over a range of numbers better than all of the hacks people using react. Woof. Do you think? I don't know. I think we should have loops in JSX. I think if we had him, I don't know if I'd use the map still. One person was later. Just use Matt, what about if statements who wants if statements in JSX? It might be six people we can hang out later. Yeah. I don't know if I need them. But yeah, it'd be nice. Like, I know how to do it. But you know, other people. All right. Now we are gonna end off the show with a q&a. So if you've got questions about whether all men are thoughts on anything, react in general, just let us know. We've got a mic here. You can also just stand up and shout them out. Yep. What was the first applications we worked on? Ever? Oh, that's a good question. Yeah, this has been really good from like, like a website, but like an actual application. Um, you know, first application, I built the car picker in for.com. So it's like this thing where there's like a billion cars, and you have to tell it what you want. And I tell this story, because it's hilarious about QA. Every time we queue and ate it, we only had like five or six models, because it was just like a prototype. And we took it to QA. And this one guy was like, I hate it. We're like, Well, why do you hate it? He's like, there's no Mustang, like, - -78 -00:53:45,120 --> 00:58:31,230 -what does that have to do with anything? Mine was a daily deal aggregator when Groupon and livingsocial and 40 of those other sites became popular, I created a an aggregator through like a Ph. It was this library that implemented all of jQuery methods in PHP called PHP query. Because at the time, there was no there was no node. And there was no like virtual Dom where you could like load the DOM. So somebody wrote like a thing where you could scrape a page and then like, use these like weird selectors. It's one of those like XML selectors called XPath. Yeah, you had to write these like XPath selectors, and then aggregate it into one big page and I made a bunch of like, like Groupon bucks like they gave me 10 bucks every time you refer a friend and I had like, like, $4,000 in Groupon, this woman and man we went on sushi dates and massages for forever. But that is gone. Yeah. What react problems stumped us for the longest time. Great question. Um, server side rendering with code splitting and data fetching in a custom thing, it was just like I couldn't get any, I couldn't get all three of them to work, get two of them to work. It's like any two of them, pick two of them, I could get them all to work. It was like, please just work just come in data. I think the biggest hump for me was when Redux started to come out. And this idea of like, pure pure functions started to get popular. Getting like started like trying to like switch my brain from thinking like, you want to take an item from out of out of an array, or you want to take the I just pop it off the array or unshifted, you know, and moving to know you can't mutate the original array, but you can create a new one, and then just take that out and put the rest of the items back in the new array and why. And then I got bit by it, and then like, like all developers, like you can read as much as you want about these topics. But it's only until you get pepper like, Oh, that's why everyone's talking about this. Yeah. Every every. Yeah. Oh, what's the most expensive coding mistake? Yeah. Pretty decent one, but it's not involved in the coding itself. But I really get clean on the home directory of my computer and erased a bunch of animations I had been working on for clients and I had to like spend a whole nother week re animating. And this wasn't like after effects. So it was so much work I like erased an entire weeks, maybe even a month worth of progress with I get clean because I thought I was in the the project directory. I one time I thought I nuked 40 person, companies email, because I changed I transferred their domain. And by transferring it away from their hosting provider, it removed all of their email addresses. And I was like, oh, shoot, I have nukus 40 people's email addresses. And it turns out that those were old and they were using Google Apps for their email and I just had to reinstate the MX records and everything was back. But that was very scary. And then also like, who used like Kota, back in the day where they had an FTP built right in so many times, I would just like live at it or Oh, yeah, on a server wide screen. Yeah. Or one at one time, I paid somebody like 200 bucks to like, fix something. And they just SSH into the server and fixed it for me. And they, they they worked like for a couple hours on it. And then I had the file still open locally. And I overrode it. And it's gone. Right? Like talk about that. That like a built in FTP was responsible for so many bad, like bad practices that nobody talks? Like? Let's just all be honest, right here. How many of you like live edited off the server at some point when you were first starting? Like everybody? Terrible? Yeah. When I first started, I like white screen to Magento site. And I didn't know about airlocks. And it was my first time working in PHP. I was like, well, it's a white screen. I might as well just start over. Yeah. Other questions? Yeah. Scott, breakdancing way hit like a handstand or something. You find some space here. This spot right there. Yeah, but that's not enough space. Do you understand what? I don't know anything about breakdancing? No. Yes, a wave find some space. - -79 -00:58:33,450 --> 00:58:36,030 -Other questions? Yeah. - -80 -00:58:37,980 --> 00:58:45,900 -was writing more class components? - -81 -00:58:47,670 --> 00:58:48,900 -As my opinion? - -82 -00:58:59,160 --> 00:59:37,560 -Do you think we need is it the question is do you think we need classes in JavaScript? Oh, yeah. I used that. I ran a poll on Twitter. And I said, Do you use classes in JavaScript? And I think about 9000 people answered it. And the result was 5050. Exactly. 5050, not 4753 or whatever. Exactly. 5050. And that is a topic that people will go blue in the face talking about forever and ever until we all die. So I say Ben, can we have them? Sure. Do you have to use them? No. If you don't want to just don't use them. If you do want to use them keep keep going with it. - -83 -00:59:39,390 --> 00:59:39,900 -Yeah. - -84 -00:59:43,830 --> 01:04:10,380 -How do we explain to our mind watching right now? Yeah, I think she I think she knows Mrs. solinsky where's the camera? Yeah, um, no, she actually, one of my very first projects was working on a site for my parents. So they're very familiar with With sort of what goes into building stuff, and making they ran an e commerce shop for a long time, so they're they're very familiar with the amount of work that goes into what we do. And then the YouTube stuff, the the podcast stuff, they're there. They're our biggest fans. They listen all the time. I don't think my mom knows like the the nitty gritty. She knows I make websites, and she every now and then she thinks I should get a job. You should get a job. Your dad had a job for 40 years or whatever. But yeah, I just say make it's really easy. You have you've been to a website. Yeah, I make those. Cool. Right. But that does often get people coming to you with their ideas for websites, which is unfortunate. Yeah. I'm sure you all get that as well. We got a couple of minutes left. Yeah. How do you explain to me I go, hey, you've got a Lego here. You got Lego here. You put them together, you make something you make a dinosaur. By the way, did you know one of the companies it didn't make the thing, but one of the companies that uses react is Lego. And I asked the guy that works at Lego. It's like how often do you like talk about react components like their Lego blocks? Right? And he said, unfortunately, never. Like a very huge missed opportunity. Yeah. In Lego, how would I explain react? Um, live variables? Maybe? A variable is? Don't know. that's a that's a good question. Wait, my, my daughter is only four. So the extra babies react for babies. I would do well. Has anyone ever bought that? Like HTML for babies? And like, it's terrible, right? It's not like it's full of mistakes. And like, yeah, like, has like typed JavaScript. And I'm like, modern, you sound like me, taking the Disney Channel. Whose babies the good parts? What made me start wanting to learn how to code. I'm oddly similar stories, I think. Yeah, it was I was like a hardcore kid making t shirts and CDR and stuff like that. And MySpace came around. And people wanted MySpace is to match their CD art. So I learned learn CSS from that. And I've always been like, super into computers, though. Yeah, it's inevitable, I think. Yeah. Wait, wait, we had a band as well. And we went Angel fire. This is Yeah. And so we hooked into angelfire. And then we're like, oh, we have to have some animations on this thing. So then we went to flash. We're like, for some reason, we need the matrix things coming down so that we throw in some JavaScript flaming tax cuts that have animated GIFs. Yeah, yeah.tk domains, anyone have a.tk domain. They're like.tk. At some point in their life, they offered free.tk domains. And you could just like I had Wes Bos tk, and it's like, I don't know what how can you even get a.tk domain anymore? I don't think so. I don't know about that. That was Yeah, I had a had a pretty sweet tea kid domain. Other questions? Yeah. What's the happiest thing we've ever done, I hacked together, like maybe the one because I only have a very limited amount of time to do this. This is pre Angular pre. I hacked together, putting up the world's worst like voting system with jQuery in about a couple hours that was then used onstage at a breakdancing competition in front of 20,000 some people in the South Korea, and I just like went to town on this thing. And it was so bad. The code is absolutely superduper brittle. And I'm sure I was like watching this live stream just like please don't break. But that's funny. I don't know. Like, I look back at all the code I've written in my early career, and it was all extremely hacky. But at the time, I was very proud of it. I thought it worked great. Yeah, yeah. It's like whatever you wrote last week, yeah, KS CO, I've written a lot of - -85 -01:04:11,790 --> 01:06:03,330 -probably my first ever integration, I wrote this massive for that daily deal site I was talking about, wrote this huge integration with Yeah, with MailChimp. And I didn't know that there's this thing called transactional email where you could like each person wanted to get a new email with their local daily deals. So I wrote this huge thing that would like take people's emails in and put them into like a bucket of like MailChimp, subscribers, and then filter that and then for each city, find the equivalent bucket and loop through those people and then send out a mass email to those people. And that would have been so much easier if I just like use cues and transactional email, but like I didn't even know that that was the thing at the time because I was just like, brand new to building this stuff. So that was, I'm surprised at that word. I made like good money off of it, but it was Then one more. Yeah. Where do we see ourselves in 10 years? Last? Um No idea. I don't know. Yeah. Yeah. I can't even predict like five years. No. And I always say this is like, I don't predict anything. I just follow the follow the trends. I thought Jake react was dumb when it was first announced, like everybody else. And here we are today at a react thing. So there's much smarter people predicting that stuff and trying to figure out what that looks like. And I'll just kind of play along. Yeah. Awesome. Well, thank you so much for coming out. This was a lion syntax FM. We love to come say hi. We'll be around later. And we're at syntax. Thanks, everyone. Yep. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax135.srt b/transcripts/Syntax135.srt deleted file mode 100644 index 5814693ce..000000000 --- a/transcripts/Syntax135.srt +++ /dev/null @@ -1,164 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,160 --> 00:00:04,009 -open wide dev fans - -4 -00:00:04,009 --> 00:00:11,310 -yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web - -5 -00:00:11,310 --> 00:00:21,660 -development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott Taylor. - -6 -00:00:23,610 --> 00:00:24,480 -Totally in ski, - -7 -00:00:25,950 --> 00:02:17,880 -Scott Tolinski: or Welcome to syntax in this Monday hasty treat, we are going to be talking about cranky developers. These are the your co workers, your friends, the people that you work with, that they just never seem to be happy about anything. They're always they're always mad about the choices, you're making the tech choices, they're always maybe inserting their opinion when it's not needed, or holding back the progress of your building, because they just don't see the need for what the heck is a CSS preprocessor? I've always been fine with CSS and a 960. grid system. Why would I ever change that? So this episode, we're gonna be talking all about cranky developers. And we are sponsored by something that is going to be guaranteed to make you not a cranky developer. And that is century@century.io. Now century is a bug tracking service that really, really categorizes and catalogs all of your bugs let you know how many times they're happening to who they're happening to what operating system, you can attach data, like what user ID this an error happened to. So you can make sure that you can reach out to that user and say, Hey, sorry about that, that bug you ran into, let me fix that for you. So there's a lot of stuff here that you can do with Sentry. And let me tell you, I've been using Sentry in production for quite a while now. And I'm such a huge fan. So you want to head over to century@sentry.io Check out all they have to offer. Just get it going. Because if you sign up with the coupon code, tasty treats all lowercase all one word, you will get two months for free. So I highly recommend you take those two months. You see your bugs coming in. You solve those bugs and figure out how the heck you can make your application work. It works with any sort of platform that you might possibly be using whether that's react or node or heck not even JavaScript based anything you want century ha got it Ruby, literally anything yeah, centuries all over the place. They're they're just the key tool for bug tracking. So check it out at century dot i O. - -8 -00:02:18,000 --> 00:03:57,120 -Wes Bos: So we got this question on Twitter. I'm not gonna say the person's name because I don't know if they want their coworkers? We don't know. Yeah, the The question was, how to deal with curmudgeons, ie co workers who have questions and puff at support requests and think any new tech is just a cool code way to do things and immediately write them off. So I think this is something we probably see a lot. Often we hear from people that the person that is senior to me, is not interested in looking at any new code they're not interested in, in redoing the application in maybe the perfect example is we got a lot of people respond to just this tweet alone. They said, we're still working on a jQuery website, and there's just no, it's working fine. And and that's just the way we've always done it. And there's no real way to move forward with the tech that we're using. So before we even go into, like, how do you get somebody? The curmudgeon, how do you get the curmudgeon to maybe try things out? Or how do you convince them many experience in seniors developers often prefer stable and older technologies for a reason. So rather than Oh, this framework came out last week, it's Oh, this database technology has been around for five years. And it's extremely stable. And the reason why they do that is because they've been around long enough to either have been bit by these things or to see things change so rapidly. And that's not necessarily always good for the business when things change so quickly, and, and whatnot. So they rather choose something that's a little bit more stable. But there was like a saying, like, no one ever got fired for choosing IBM. What is that from? - -9 -00:03:57,420 --> 00:03:59,190 -Scott Tolinski: I don't know, I don't think I've heard that. - -10 -00:03:59,370 --> 00:05:31,920 -Wes Bos: No one ever got fired for buying IBM, but they should. There's an article in Forbes about it. It's just like a thing. I think because I went to business school and specifically focused on tech. I heard this all the time where it was very risky to try a new vendor, even though their product may have been way better. The person actually making the decision. It's just way too risky for them to say like, yeah, it might be 10 times better, but there's a small percentage chance that will fail and I don't want to lose my job. So no one ever got fired for buying IBM and I think the same can be said for no one ever got fired for choosing very reputable very stable technologies. However, there's definitely lots of businesses that have slowly died off or really gone downhill over time because of the technology choices that they make. And they don't move. They don't move far enough Case in point the entire taxi industry, right? Yeah. Now the taxi industry probably didn't want to risk letting people pay with a credit card. I know when I was in Universal always had to pay in cash was so annoying because the the debit machine and then just like things like Lyft and Uber come along and wipe him out because they weren't willing to, to put time into that. So that's my little like, yeah, this is why but at the same time, I think that people who are pushing against it often we hear the hipster JavaScript framework people that push against these hipster JavaScript frameworks that can be convinced and in some cases, so Okay, we're gonna go through some of our tips as to how to how to talk to these people and how to convince them. - -11 -00:05:31,950 --> 00:06:33,240 -Scott Tolinski: Yeah, and I've been called the hipster developer more times than I can count for making good choices. Like I was trying to get people to move to SAS, after SAS was already like, note node SAS was around. This wasn't like Ruby SAS, like just SAS and Hamill days, this was like SAS was mature. A lot of people were using SAS, and I was getting like, no, why would I ever use that? I can write good CSS without it. Sure. Well, I can write good CSS without ADO. But I also don't have to type vendor prefixes. And you did at that time. Or you had to go to like CSS three, please to copy vendor prefixes or something. Yeah, it's things like that. Till infinity. There's so many good choices that you can make that are like low risk that your curmudgeon people will still fire back on. Because at the end of the day, I think some of this stuff is all ego. Some of these people want to seem like they're hotshot Dev, they know what they're doing. They're good at it. Yeah. They don't need to change. They don't need to change. They don't need to evolve. They don't need to grow. Therefore, why the heck would they? - -12 -00:06:33,390 --> 00:06:47,250 -Wes Bos: I think that's, that's probably the best way to put it is that there's a lot of ego at stake. And I even have it myself. Sometimes I'm, I'm happy with my tech stack. And I think it's working fine. And then something new comes around or like, Oh, what is the other new thing? Yeah, - -13 -00:06:47,310 --> 00:06:48,090 -Scott Tolinski: another new thing. - -14 -00:06:48,510 --> 00:07:01,290 -Wes Bos: Sometimes it just goes away. I'm trying to think of like a, a tech that I never adopted, and then it sort of just faded into the distance, it was supposed to be huge. And it never really a backbone for - -15 -00:07:01,290 --> 00:07:04,980 -Scott Tolinski: me. I mean, backbone was pretty huge. At one point, yeah, - -16 -00:07:04,980 --> 00:07:54,020 -Wes Bos: backbone was was really big at the time, they sort of changed how we thought about these apps, I can't, I've made me think of something at the time. So what are things that we should consider? I think the first tip we have here is, is it better for the product? So these are questions that you should ask when adopting a new technology. And these are things that you can use to convince your stakeholders or your senior developers or whoever it is that's trying to that is stopping you from from using your new tech. So first thing you want to ask is, is it better for the product? So if by making this switch by spending the time rewriting whatever you have, by by retraining all your developers, is that new tech going to make new features faster to develop? Are you going to be able to make a better website a better web app at the end of the day? Because that you are moving to this product? - -17 -00:07:54,060 --> 00:08:25,920 -Scott Tolinski: Yeah, I think a good example of this is even a move to ESX. I interviewed for a company that was still using old JavaScript. And this is well into like, I don't know, a few years ago, when you know, I mean, Babel was very mature, a lot of people, there was absolutely no reason to not use it. And this company was using Gulp as their build process. So I don't want to call anybody out here. But you're you're already using a build process, you already have everything in place. And all you have to do is configure Babel, just in your build all the Gulf - -18 -00:08:25,920 --> 00:08:26,490 -Unknown: plug in. - -19 -00:08:26,490 --> 00:09:19,770 -Scott Tolinski: Yeah. And they were like, No, well, we just don't write ESX here, and I'm thinking your code would be so much better if you moved to ESX. And it's not gonna hurt the product, your devs probably a maybe not all of them are up on it, but a good amount of them probably already have experienced with it. Because honestly, at that point, it was pretty commonplace to be writing ESX exclusively at that point. So for me, that was an easy decision to just be like, Why Why wouldn't you? Well, we just don't feel that we need to train everybody in the the benefit there that you're going to get from the modern code, and the cleaner code that you could write with even just a lot of the stuff that came in ESX it was gonna save that was going to make the product their code so much easier to update to write to work in and all that good stuff. And they just couldn't do it. I just don't know why it absolutely befuddled me. I don't - -20 -00:09:19,770 --> 00:10:09,570 -Wes Bos: know why that is that people see that they say ESX and they see some of these new things they say like that's just trendy way to write JavaScript and I think to a certain point it is because anytime I have anytime I tweet out like a function as an example of how to code something there's always somebody replying as to making some like crazy one liner with implicit returns and yeah, I love all those features but they don't make sense in every single way because they can often hurt readability and it might be people seeing that and being like that seems worse but in a lot of cases, a lot of little one liners a lot a little filter functions. I love using arrow functions. Yeah, I love using all of the different there's a reason why they were added to that. JavaScript. And it wasn't because it was hipsters making JavaScript, it was because they make the language better at the end of the day for a lot of specific situations. - -21 -00:10:09,600 --> 00:10:34,620 -Scott Tolinski: Yeah. And there's a difference between adding stable, you know, ies, right, you know, what eight of whatever it is right now is 2019. There's a difference between that and ies next, and potential features and things like that. I could understand, hey, we don't want to add these proposals to our code base, because what happens if they don't, you know, be accepted? And then we have to pull that stuff out? But if it's in JavaScript, like, come on, come on. Totally, - -22 -00:10:34,650 --> 00:12:08,250 -Wes Bos: totally. I've definitely been bit by adopting things decorate quickly. Before as well. decorators. Yeah, one that I specifically got bid on. Same here. Um, and definitely wait until it's actually in the language. And definitely wait until you you see best practices come about from people using them. But I think at a certain point you, you can ignore these things. Yeah, definitely. Next question we have is, is it better for users. So there's, it's something to think about the product is it going to make a better product, and I think part of that also is, is the end product going to be better. So probably the biggest use case, an example of this is moving from a single page or moving from a server rendered each page refresh application, which in some cases, that's totally fine. But in a lot of cases, moving over to a single page application where it feels faster, you you're maintaining state between from page to page, all of that stuff, it's often is a much nicer experience, I think about something like using Airbnb, and how frustrating that would be on every single time how to reload the page. Whereas if I just want to quickly search something, amend my filters go back, you don't have to put all those filters up in the URL query for a pass from one to another, like, it just makes for a better product. And it makes for a better user experience at the end of the day, which is what we're all building these things for. One of the things that comes to mind when I think about this is the accessibility features, because you might be proposing accessibility features. And you might have somebody saying, well, what's that, like? - -23 -00:12:08,250 --> 00:13:17,250 -Scott Tolinski: I don't know, that's gonna take a lot of time, where you have to just the code, I saw something not gonna call, I don't want to call anybody out here. But there was a using a div for a button. And there was like a pull request for it saying, Hey, can we use a button for a button here, instead of a div? And then the person was like, No, like, it's a div, that we're not going to change it. I'm just thinking, like, come on, come on. Yeah, there's just that is such a, I don't know, it's the wrong way of looking at it, because that's improving the application for so many users. And I think people just ignore accessibility features. Because if it's not affecting them, it's easy for them to ignore. And some of these things do take time. And they do take effort, but it is going to make your application better. So just to put your foot in this their head in the sand and claim that, you know, it's not benefiting you or it's not important, I think it's just a short sighted, you can make a lot of improvements to the application that will be user facing forward. And again, if it improves the experience for the user, almost Why not? Right? The next one is going to be Is this better for the business? Will this new tech make the business succeed more? You have an example here? You said you added a sales back end to your application here? - -24 -00:13:17,520 --> 00:14:17,460 -Wes Bos: Yeah, well, so my checkout process is tied to the front end of my application. And because of that I wasn't able to do like it was the way that it works is that it was like tied to this specific website. So like react for beginners calm. And what I was thinking is like, you know, it'd be awesome. If I could upsell people and be like, hey, do you want to also buy this course, or when somebody in the back end watching a course, if you offer them like a coupon code, and they could just buy it right there without having to leave. So I'm currently rewriting that checkout process and making a lot more flexible. So you can buy multiple products at once you can embed this thing and the back end or the front end while you're watching while you're buying another product. And at the end of the day, that's just going to cause the amount of sales to go up. And that's better for the business. So it's a clear example as to moving from sort of this, like bertel thing that's very tied to the front end to something that's a little bit more flexible, and rewritten. - -25 -00:14:17,490 --> 00:15:08,460 -Scott Tolinski: Yeah. And I think you have to that you have to have that eyes on all this stuff. Because, again, these people are often thinking, I don't want to make these changes. Because when this stuff either scares me and I don't know it, or I don't feel like learning it or your hipster for wanting it. But if you can prove to them that it's better for the product, better for the users better for the business, and at the end of the day better for them as the developer, then you'll have a better chance of convincing them Now not all these people are going to be convinced by that. But I think better for developer is a good one too. This one might be hard though, because people really like to sink in and say like my way of doing this is the best. I know the best way to do this. I have my process down. How can you convince people that it's good To be better for them, because I think even myself, if somebody is going to tell me, Hey, you should be doing it this way. I might be thinking, but my way is good already, you know? - -26 -00:15:08,760 --> 00:16:34,830 -Wes Bos: Mm hmm. There's a lot of things we can think about is does it have a smaller learning curve? So when you onboard new people, what about maintenance, so you're gonna have to maintain that that certainly could be a downside versus the way you're doing it now. But it certainly could be the total opposite where like, I know, I've had applications where it just don't add specific features, because I know that it's the way that the application is built, you have technical debt, it's just too hard to add those things, and you just don't do it. Right. Whereas if sometimes you have like, you've built it in such a way where it is easy to add all these new features, you just start slinging new feet, like we've all had companies that you you send them an email, like I love your service, could you add this feature? And then like, you know, a year later, you don't get access to that. Whereas I've also had like, like missive is a good example. missive is the email program I use? Yeah, um, probably four or five different occasions. I emailed them, I say, hey, like, how can I, it would be great if I could like zoom in on the email, because like, I run a really high res monitor, I need my email to be a bit bigger. And within like, 12 hours, they had a, they rolled it out in their actual. And that's just, that's just because like, I'm saying nice things about them on the podcast. But that's just because they probably built their product in such a way where, Oh, absolutely, we can add a little toggle box where you have larger text. And then we can add a class on the thing and jack up the font size a little bit. No problem. Right. If that was built in a different way, that'd be much harder to do. - -27 -00:16:34,950 --> 00:17:29,360 -Scott Tolinski: Yeah. Yeah. So I think we want to get into maybe a little bit more of how to convincing people. And I think one of the Yeah, the key things here is, again, is the proof is often in the pudding. As I feel like we say that all the time, even though I'd never say that outside of the podcast, where if you have an example that says, Look, I can code this up in two seconds, I can show you why it's faster, why it's better, why it's stronger, everything in that def punk song, right? Every single thing that's there, you can you can maybe give them a little demo, check this out, I'm gonna build this thing that it took you a week to build last week, and I'm going to build it in a couple of minutes. And I'm going to show you how and why I think we should use this method, you do it, you show them the demo, that might be convincing enough, a lot of these developers again, they really like to see things in action. They know that their processes are good. But it might take that visual of look at how much better this is for these reasons. - -28 -00:17:29,550 --> 00:18:24,560 -Wes Bos: Yeah, just take a feature that you have in your application, build it out. And then like often this is what good conference talks are where they they show a feature. And they say, oh, and then I also took this and just turned it into something else. Or what was the talk at the the lightning talk at that conference, we're just that can we learn swix No. swix he showed how he just like rebuilt hooks. Yeah, and and use state and use effect in vanilla JavaScript. And then he just showed Oh, and then also with three lines of code, I can turn it into a use ref. And it was just like, like, everybody in the room was like, Oh, that's why composition and closures are so powerful. Because you just showed me You literally showed me this thing you built. And then you showed me how it could be extended. And I think you need a couple of those like mind blowing moments to, to show people to to get them to want to try it. - -29 -00:18:24,590 --> 00:19:16,800 -Scott Tolinski: Yeah, some people will resist that though. So here are some important things to acknowledge that we would did we just talk a little bit these at the onset of this, but with anything here, there is risks, and there is costs. So if you are presenting this stuff, make sure that you understand what the risks and costs are. Because if the developer who you're trying to convince to use this thing knows the risks and costs, and they call you out on it, your whole plan is sort of shot dead. And especially if you haven't thought about this. So let's say you want to move all of your CSS to this brand new preset processor that like two people are using the risks and costs are well, the risks are that it's going to you know, never take off, only two people are ever going to use it, there's going to be no tooling around it. And you're going to be stuck with this thing that is becoming a giant technical debt. And then the costs are the time it takes to write all your stuff over there. And then eventually, the time it's gonna take to move all your stuff off of it. - -30 -00:19:17,060 --> 00:20:11,220 -Wes Bos: Yeah, just think right now, there are people who built their application with react and flux, which is no longer used and probably picked glamorous for their CSS library, which is paypals CSS and j s, which was deprecated. So there's like, there's definitely I can give you probably 10 examples of things that looked like they were going to be the new hotness, and people bet the farm on them. And they were deprecated or they were not used like there's I know people that use graph cool to build their, their like startups product on it and it doesn't seem like like graph qL is still around but it doesn't seem like it's it's the way forward for for That type of thing. So you definitely want to be cognizant of that. It might not be a grumpy person, it might just be someone who, who knows better and has seen these things go wrong for more. Yeah, - -31 -00:20:11,250 --> 00:20:33,830 -Scott Tolinski: you want to look towards major players like what major players are using these things? Because if Facebook is using react and well, you know, Netflix is using it I like of all these people are using react, I think it's pretty safe to say that react probably not going anywhere anytime soon. So yeah, I think I think it's no longer a hipster. Anything right at that point, right. So you want to look at the momentum behind these locks - -32 -00:20:34,050 --> 00:20:44,840 -Wes Bos: from Facebook, though? It's true, like, in most cases, yeah. Like the big ones are fine. But even things like state management libraries can can go wrong. And that's not to say you can't rewrite them, right? No, - -33 -00:20:44,840 --> 00:20:47,640 -Unknown: I've written management library like eight times. - -34 -00:20:48,210 --> 00:20:49,140 -Wes Bos: You love doing that? - -35 -00:20:51,480 --> 00:20:53,760 -Scott Tolinski: Yeah, but there is a cost to that. Yeah. - -36 -00:20:53,789 --> 00:21:15,240 -Wes Bos: We also need to know that. Yeah, there's there's costs, you got to train people. You need to buy courses, you need to do workshop, often. There's you should absolutely, yeah, you should buy courses. Absolutely. Maybe the hosting is more expensive, or a different way to host it. Maybe it's just a little bit too brittle for you all kinds of stuff to think about. There definitely are costs as well. - -37 -00:21:15,350 --> 00:22:40,290 -Scott Tolinski: Yeah, absolutely. And I think the important thing to recognize at the end of all of this is some people are just not interested in changing. I know developers who got their job. They're making 60 grand a year. And they're thinking, yeah, I can just coast on this for the rest of my career. You know, I had a one gig and there was like, a guy who worked there. And his whole job was like encoding QuickTime videos. And that's all he did. And he was the webmaster, I'm gonna encode a QuickTime video, like, this stuff has gotten way easier, you can just drop it into some application, it spits out I mean, this was years ago. But it's like, you can't be that short sighted. But some people are that short sighted. And they're thinking, I'm just gonna coast along writing WordPress sites for the rest of my life, retire when I'm 60, or 70, whatever, call it a day, those people exist, they're out there, they're not interested in improving. And to be honest, don't let them hold you back. Because I've had coworkers like that. And then I've had managers in the same place, the manager is going to always side with the holding the company back. And guess what, if you stick around, you're going to get held back too. So if they're not going to let you advance things, they're not going to let you push things forward a little bit. And they're just going to be stuck in their ways. I would look for another job. I did that myself. And it was a, it was a great decision. - -38 -00:22:40,380 --> 00:23:40,080 -Wes Bos: I had somebody talk to me a couple months ago, where they said, I got a job. And often people's first job at a thing is doing HTML emails, which is the worst. And there was people there that their entire job was just working on HTML emails, and they were just hand coding them, and inlining the CSS themselves. And if you needed to change a color, you better be real good at finding replace. And they said like, Well, why don't we use something like MJ ml where that's like a react based like generator for emails where you can, you could just make components that are not table based, and they will generate the table based output. And then you can use things like, what is the juice, I think it's a CSS in liner, or you just write regular CSS and then it'll inline it for you. And they built up this whole task and like, it's crazy because like you could potentially automating someone's eight hour job into like a two hour job, which is very scary to people and and there's a reason why they haven't looked at faster ways, because then they're going to put themselves out of a job. - -39 -00:23:40,259 --> 00:23:59,430 -Scott Tolinski: Yeah. But that's the whole thing is if they don't realize that by putting themself out of the job, they're putting themselves into a position of maybe a higher earning or a better job or a more interesting job or more challenging job or any of that. I think these people just some of these people just don't want to be challenged. That's it. Yeah, they just like they're comfortable. Absolutely. All right. - -40 -00:23:59,700 --> 00:24:06,450 -Wes Bos: I think that's it. If you have any tips how to deal with the cranky devs let us know at syntax FM Otherwise, we'll see you on Wednesday. Boos, please - -41 -00:24:08,340 --> 00:24:18,120 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax136.srt b/transcripts/Syntax136.srt deleted file mode 100644 index 8d5596acf..000000000 --- a/transcripts/Syntax136.srt +++ /dev/null @@ -1,488 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax, the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:06,120 -development treats out there. - -3 -00:00:06,149 --> 00:00:09,000 -strap yourself in and get ready to live ski - -4 -00:00:09,000 --> 00:00:10,560 -and West boss. - -5 -00:00:10,589 --> 00:00:20,190 -Wes Bos: Welcome to syntax. This is the podcast with the hastiness, the tastiest web development treats with me today, as always, is Scott to linsky. How you doing today, Scott? - -6 -00:00:20,429 --> 00:00:33,320 -Scott Tolinski: Hello, do good. We just got back from our big live show. We did a live episode of syntax at reactive on this year. And it's super fun. We did this. You're probably aware because you were there as well involved in I was - -7 -00:00:33,320 --> 00:00:34,020 -Unknown: there. Yeah, - -8 -00:00:34,559 --> 00:00:44,400 -Scott Tolinski: we did this master chef style coding thing where we swapped off every 30 seconds in one computer. And I think it was a I think it was a hit. We got a lot of positive feedback on that. Yeah. segment. - -9 -00:00:44,400 --> 00:00:55,439 -Wes Bos: I thought that was so funny. It's funny because I was thinking about it for like a week. And I didn't even bring it up to you. Because I thought like, Oh, that's kind of like dicey. I don't know how well that will go. And then I told you, you're super into it, - -10 -00:00:55,559 --> 00:00:57,210 -Scott Tolinski: though. Yeah, the dicey er, the better. Yeah, - -11 -00:00:57,359 --> 00:01:06,750 -Wes Bos: it was hilarious. I just like spelling mistakes and rogue syntax errors and trying to fix it. And like we both had different ideas, how to approach it - -12 -00:01:06,869 --> 00:01:40,320 -Scott Tolinski: with it. Not only that, but we both we, since we never talked about it. And we didn't really talk about it as we were doing it. We both just heard of assume that each other would approach the problem the same way. So you thought I was thinking custom hook. And I thought you were thinking just throw it all in the component? And yes, we both I was like looking at your code. And I was just thinking, alright, so wait, when's he gonna write the component? And then I didn't realize I didn't it took me way too long to realize you were writing a custom hook, because my brain was just not there. And then - -13 -00:01:41,249 --> 00:01:48,120 -Wes Bos: the hook as a component, and they were like, no, no. And then I totally forgot the effect inside of the hook. Yeah, well, - -14 -00:01:48,449 --> 00:02:01,770 -Scott Tolinski: I was just thinking, alright, we make a functional component. We throw a use effect in there. We throw a function in there, and we call it a day. And you're just like, well, let's build a reusable hook. It was like it was predictably hilarious. Knowing I still - -15 -00:02:01,770 --> 00:02:12,060 -Wes Bos: need to open source are used dad hook, like oh, yeah, right. very particular hook. I should submit it to use hooks. Oh, yes. All right. I wonder - -16 -00:02:12,060 --> 00:02:15,690 -Unknown: if they'll accept it. It's your chance for open source fame? - -17 -00:02:15,690 --> 00:03:32,310 -Wes Bos: Yeah, totally. All right. Today, we are sponsored by two awesome companies Log Rocket, just going to sort of track what goes wrong on your website and allow you to replay it. So you can actually see there's an error, how did the user get to that error, and Freshbooks, which is cloud accounting software, which I just spent, not very long, but the longest I've ever spent all year, onyx, they just did my taxes. And I spent maybe, like 30 minutes inside of Freshbooks, doing my taxes, getting all of my reports and stuff prepped, and export it for my accountant. So I feel like I'm I know freshbooks really well. Now. I've been using it for 10 years, but I just stumbled across a couple new features myself that had been rolled out in the last, I don't know, a couple months or so. So we'll talk about them partway through the show. Today, we are having an episode called nine ways to stay sane while working remotely. So whether you are a freelance working from home, or whether you just are someone who has a job where you get to work remotely, we were at GitHub for this conference. And I was talking to some people that worked at GitHub, and they said that like, like, like, I don't know, like 60% of GitHub, like the 60% of the people that live in San Francisco don't even go into the office. - -18 -00:03:32,310 --> 00:03:36,180 -Unknown: So they work remotely while that office is amazing. - -19 -00:03:36,180 --> 00:03:49,620 -Wes Bos: Yeah, yeah, it's unreal. It's, it's really, really cool. But I guess working from home is the dream. So I've been I've worked from home my entire life. Scott has worked from home for how long you were home for like four years or so. - -20 -00:03:49,949 --> 00:03:52,680 -Scott Tolinski: Yeah, since 2016. So not quite for you. - -21 -00:03:52,859 --> 00:04:08,699 -Wes Bos: Okay, so we've got some tips as to how to stay sane, how to stay focused, how to get the most out of your day, because that's the thing that you hear from everybody's like, Oh, you work from home, that must be hard, or I don't think I could do that I would just be so distracted and watch Netflix all day long. - -22 -00:04:08,819 --> 00:04:17,550 -Scott Tolinski: Yeah, you'd also hear that would be amazing, because I could just watch Netflix all day long and not get dressed and just hang out in your pajamas or whatever. Totally. - -23 -00:04:17,609 --> 00:04:19,440 -Wes Bos: So you want to kick it off with your first tip. - -24 -00:04:19,679 --> 00:05:25,170 -Scott Tolinski: Yeah, let's kick it off. These are all really good. And this one to me, it's very important to me because you work from home long enough. Everything sort of blends together you start to feel like you're stuck in your house right? And this is really important to find the spots around you that you can go to to work and whether or not you could walk to them drive to them or anything. It's important to find the locations that you feel comfortable working in and that you like actually have this the zone that you get into the zone I always say I'm zoning it I'm gonna say hey, Courtney, I'm gonna go to Nixon's which is the coffee shop I go to I'm gonna go to the Nixon's I got to zone it and just means that I have to change my My place of scenery to put myself into this mentality where I'm going to do nothing but concentrate on what I need to get done. So you want to find these places that really bring that out of you that really bring out the focus in you. So whether it's a coffee shop or a cafe, there's a smoothie bowl place right by my house that is oddly enough, like packed all the time with people working on Mike who's working to go get a smoothie bowl, - -25 -00:05:25,200 --> 00:05:26,390 -Wes Bos: what's a smoothie bowl? - -26 -00:05:26,670 --> 00:05:39,210 -Scott Tolinski: It's it's exactly what it sounds like. It's a it's a convenient, elegant way to eat a smoothie is the best and elegant way, in elegant and elegant and non elegant - -27 -00:05:39,210 --> 00:05:41,340 -Unknown: way like a spoon. Yeah, - -28 -00:05:41,370 --> 00:05:45,360 -Scott Tolinski: yeah, Courtney made one for me one time, and I was like, why am I spooning a smoothie. - -29 -00:05:47,400 --> 00:06:45,600 -Wes Bos: so dumb, that's great. I find this as well, I often will head out to a coffee shop, maybe like once every week, once every two weeks, I'll just be not in the mood to work where I am. And I find that the easiest way for me to snap out of that is to just go in and go to a coffee shop. And I think part of it is just the walk to the coffee shop, we'll talk about that in a second. And then part of is just being in a different environment, you throw your noise cancelling headphones on, you get a nice coffee, and you're sort of just zone it, you just hit that flow state if you lock in, which is great. I've got tons of awesome coffee shops all around me, which is very lucky. And a lot of people have to have like one Starbucks, and then you get there and there's nowhere to sit or like it's a bad environment. But I live in a spot where there's just like dozens of coffee shops that are possible options. So often I'll just walk down the street and peer in the window and see who's got the best spot open for working on stuff like that. - -30 -00:06:45,810 --> 00:07:08,280 -Scott Tolinski: Yeah, this is one of the easiest ways for me to complete the turnaround my day, if I'm like halfway through my work day, and I'm like really feeling like I hadn't accomplished a whole lot or I couldn't focus or I'm distracted or I'm just like getting not into it. I will drop everything and be like, you know what, I really need to change scenery up Fine, go to my spot and lock in. So I think this is a really important one. - -31 -00:07:08,490 --> 00:07:35,070 -Wes Bos: I think also talking about spots, spending time and money on your your actual office at home is worth it as well. So whether that's buying a big ass 34 inch monitor, or getting a nice standing desk, or investing in a nice chair, something like that, where you feel like you can get a lot of work done, because this is a dedicated spot for you to get work done. You're not just sitting on the couch or something like that. - -32 -00:07:35,249 --> 00:07:38,820 -Scott Tolinski: Yeah, and if it's a home office, you can get a little tax write off there for that. - -33 -00:07:39,180 --> 00:07:39,900 -Wes Bos: Exactly. - -34 -00:07:39,930 --> 00:08:51,360 -Scott Tolinski: We have how to deal with distractions, which this is a big one, right? If there's no boss, you know, breathing over your shoulder checking on your work, like how do they know you're not just browsing the internet all day? or watching YouTube or watching TV or watching Netflix or any of that stuff? How do you get out of that state where Hey, you're home, there's nobody, there's no accountability for not doing this of how do you dial in your focus. And this is a big one for me, I turn my phone face down. So I can't look at it, the screen doesn't, you know, turn on with the notifications, I turn the volume off face down. I'm not looking at it, I'm not thinking about it. It's not in my brain, I closed my email app, I'll often close slack or anything that pings up on me. And I will turn on a focus app using the focus app is called as the one for Mac that I use. And I use these things digital wellness on Android to block all the applications that I would be distracted by Instagram, whatever. And I just cut those distractions. I don't know if I have the self control to not fire these things up or browse the internet or browse just social media. I don't know if I have the self control by myself. So I definitely rely on systems to do it all for me, - -35 -00:08:51,450 --> 00:10:01,320 -Wes Bos: I find that this is probably the hardest one for me from from working from home is just I'm sure people that work at offices have this to just the mindless typing in twitter.com, or the mindless opening the Twitter app or mindlessly opening the Instagram app on my phone. So what I found works for me is either just delete the applications for the day and then install them later at night if if you need to go on them or just logging out of them worked well as well. And that just stops you from doing that like accidentally just opening it mindlessly. And then spending however long or you go down at some tweet thread. And it's a tough one because like Twitter is probably like one of the best resources that I use to stay up to date as a developer and to get help from other people. But at the same time, it's also a huge time suck and a huge distraction for when I actually need to get work done. And I think it it comes down to being intentional with that stuff. As long as you're intentionally browsing or intentionally on Twitter, then it's a very different experience than if you're mindlessly on it. And that's something that it's a it's got to be a switch that you have to flip you have to be like Alright, I'm going to browse social media for 15 minutes now and then I'm going to Stop, I'm going to shut it off, - -36 -00:10:01,320 --> 00:10:43,909 -Scott Tolinski: I'm gonna turn my phone down and stop. As far as like watching TV or Netflix or something, just don't put yourself in the environment where you can even do that. I mean, I'm working in my office here I have, I guess I have the means to watch youtube tv or something like that. But I just have no desire to do that, or I'll block it on my computer. But I have no, I have no TV in my office to watch. I have no way of putting on Netflix for if I did, I would, I would certainly make sure I blocked that application. That's it, I guess I just don't ever have the desire to work with the TV on the background. And maybe that's just because I do so much audio recording that it would be impossible for me to do that. But again, this is what I know. I know people that work from home, and they'll just put on Netflix all day while they're working. I just can't i can't imagine doing that. - -37 -00:10:43,950 --> 00:11:15,450 -Wes Bos: No, no, I every now and then when I'm doing something that's mindless, whether it's taxes or something like that. I will throw in a YouTube video while I'm working. Sure, almost always this just have my windows open and it just coding and I'll have like, I don't think I've ever opened up Netflix or Yeah, or just that. I just love having the just music on and coding like crazy. I also can't listen to podcasts as well. I know a lot of people probably are listening to us right now while they're working. But I specifically just need to throw on some tunes and go up - -38 -00:11:15,450 --> 00:11:25,559 -Scott Tolinski: and down what I'm doing To be honest, yeah, I can listen to podcasts while I'm doing sort of administrative work or answering emails or that sort of thing. I'll typically listen to music, if I'm trying to get in the code zone, - -39 -00:11:25,799 --> 00:13:04,860 -Wes Bos: code zone, place, the place zone that looks good. Next up, we have prioritization of your tasks. I think that, at least for me, and this is a big one as well, where when you're you're working from home, you sit down in the morning, you don't necessarily always know what it is that you should should be doing first. And when I don't have very specific tasks that I need to do, and I'm not just saying like, work on a course or create some more examples or things like that, it's it has to be a very specific thing of work on drag and drop example. And then I can just sit down and I know when that thing is done, I always have a list of things I want to do in the day. And I'll just reorder them as to which order I'd like to take it. And that works really, really well for me because they don't I never have this time where I'm just kind of not really sure what to work on, or that's a bit vague. So I'm not really sure. And that could be a huge time suck for me as well. So prioritization of everything that I do is key, it is super key for me to do this, especially just because it gives you a roadmap for what you're going to be doing for the day, you're never going to be searching for something to do. And oftentimes when you're searching for something to do is when you start to drift into, well, maybe social media land, or any of that stuff where you're not looking to do something specifically. So I have a couple of apps that I use for this. And I'm sorry, my app recommendations are always difficult because I'm on Android, and I feel like a lot of iOS people lose out on some of my app recommendations. But I have an app called habits on Android. And this gives you like a checklist and one of my habits, it's like for building habits right now, basically. So - -40 -00:13:04,860 --> 00:15:00,600 -Scott Tolinski: you check off what you've done every day. So one of my habits is my morning to do list. And so every single morning when I step up to my desk at like 839, whatever below buzz on my phone that says hey, did you make your to do list today, and that lets me know, oh, yeah, I gotta do that to do list if I haven't already. And sometimes I even do my to do list the night before. Or to do list is pretty nice too, because then you don't even have to think about it. So that's, that's an Android app I use. But for cross platform and desktop, I use an app called to do list which I've talked about on here before any To Do List app is really good. And I'll fire this thing up. And I'll set up my two dues for the day. And I'll give them priorities p one through four. This is something that we both got from the Getting Things Done book, which is I highly recommend reading that book, we'll link in the show notes. We talked about it before. But having a system for having these things to get done is just so incredibly key. So for me again, I make my to do list, I have the P one item as in the number one priority, and that is my number one priority for the day, there's only one p one item and that's the thing I have to take care of. And for me, I Eat That Frog, I do that that P one first. That's another great book, if you if you're interested in getting things done is Eat That Frog. So I have the the system where I get the most important thing done as soon as possible. And sometimes that could take me the whole day. Sometimes it could take me an hour sometimes they could take me 15 minutes. But either way that P one thing is the thing I have to get done. And if you assign it your items p one through four, then you'll always know what to work on next. And the cool thing about to do list is they have that system built in to do list so it reorders your to dues based on their priority. So my P one, or the next my P two p three, whatever is always at the top of the list and I always know what to do next. And again, I'm never ever searching for something to do and therefore I always know what's next up. My Plate. - -41 -00:15:00,659 --> 00:15:18,049 -Wes Bos: One thing we should mention about getting things done, and somebody tweeted this at me is that I'm just gonna read the tweet after listening to Episode 122 of getting things done. Pro tip, if you're reading an old copy of the book, he incessantly talks about a filing cabinet set up. Your Secretary do - -42 -00:15:18,149 --> 00:15:20,880 -Unknown: so there's a new version filing cabinets. Yeah, - -43 -00:15:21,720 --> 00:15:29,039 -Wes Bos: there's a new version of getting things done. That's more for the digital age, and probably doesn't talk about filing cabinets or secretaries. Trust me, I - -44 -00:15:29,039 --> 00:15:34,320 -Scott Tolinski: got really good at filing cabinet stuff, even though I doesn't totally not relevant to me. - -45 -00:15:35,850 --> 00:15:46,020 -Wes Bos: So make sure you grab the the updated version, you can tell because he's wearing a suit in the old version, and he's wearing like a golfing shirt in the new version. So he's - -46 -00:15:46,020 --> 00:17:13,050 -Scott Tolinski: made a little bit of money off of that book. So he can, yeah, he can go relax, he's on the beach now. And so that to do list, again, is just one of these things that is key to setting up your productivity. And if you want to make sure that you're constantly knowing what bugs to work on, and how to be productive. Well, we have a sponsor for you today, who's been a sponsor of syntax for quite a bit now, which is Log Rocket. Now Log Rocket is an amazing bug tracking service, that gives you an instant video replay of what happened when your bugs occurred. So then you can see everything about the environment, what the user did, where they clicked, what they saw their error log their Redux state at the time it happened. And this thing works with any of your platforms, it is really super slick, you get all of the information you could possibly need to solve your bugs. I mean, how many times do you get an error? Could you look at that error? And you say, Yeah, well, that's an interesting error. I'm not quite sure how that happened. Maybe it got lost in minification, or something. But either way, it just looks like garbage. So now you can come and look at this error. And you can see what happened and how it was produced. And you can reproduce that error yourself, no, nor can you respond to an email with cannot reproduce, because you can reproduce it all with Log Rocket. So check out Log Rocket at Log rocket.com forward slash syntax and get 14 days for free to really super cool service highly recommend. I'm using it myself on level up tutorials and loving it. - -47 -00:17:13,340 --> 00:18:11,550 -Wes Bos: Awesome. Next tip we have here is making time to be social. So uh, one of my favorite parts about working from home is that you don't have to be social. I'm a very extroverted guy. I love hanging out with my friends. But there's just something beautiful about working alone and not being bugged and things like that. But at the same time, every time we just got home from a conference, every time I go to a meet up every time I go to a conference, and get to chit chat about stuff with people and talk about web development in general, I always come back being like, Man, that was so fun. So I definitely think that it's it's important to go to things like meetups or be involved on a Twitter on Slack, or discord rooms. Just being around like minded developers, I think is really important. So you don't tend to go crazy. I think this is different person by person. But I definitely feel like the community online is why I'm able to work from home. What about you? - -48 -00:18:11,700 --> 00:19:33,480 -Scott Tolinski: Yeah, I think it's important. And again, I'm probably more introverted than you are in a lot of ways. So for me, it's not necessarily an easy thing to go be social. But I think it's important anyways, because when I or when my wife Courtney comes home from work, I just start talking her ear off. And she's just like, Oh, yeah, I forget, you haven't talked to people all day. So I think it's important to find some way to have that human interaction, you know, when I get a chance to chat with each other about web dev stuff once a week on your podcast, and that's a great way to fulfill that need. But obviously, not everybody has that option. So you know, I highly recommend joining some slack channels that you can, this could be an easy way to get distracted. So don't take this but join some slack channels where with intention, you're you're conversing and talking with people, rather than just sort of using it as a distraction. Because that it is difficult, they pop up in the messages pop up. So like with with intent, sign on to slack, talk with people for a little bit, be a little bit social, even if it's digitally social, it's gonna help you stay sane a little bit. Again, one of the things I like to do about a coffee shop is go to a coffee shop and even just your interactions with people when you're ordering your coffee or you're sitting down you can maybe compliment somebody on their glasses or something or or just try to be, you know, a human being in human space. It's like it can go a long way for your mental health. - -49 -00:19:33,720 --> 00:19:53,280 -Wes Bos: Yeah, absolutely. I often find myself whenever I see somebody with like a tech sticker on at a coffee shop or a specific shirt. I'll try to like it's awkward because I don't want to do it but I often just like to say Hey, nice sticker Are you develop or two and it's kind of fun to be able to just chit chat with people like that for a quick second or two. - -50 -00:19:53,550 --> 00:20:58,290 -Scott Tolinski: Yeah, and if you are not super socially outgoing, it is very difficult but it's also really good practice because Once you get practice with that, it's really a lot easier to do it, the more and more you do it, the easier it becomes, you'll be able to start striking up conversations with people at conferences and meetups and all this stuff and feeling very comfortable about it. So yeah, it's one of those things you might want to force yourself just a little bit to do, because it could get you better at that is a nice little skill to practice as well. And if none of that stuff sounds great, you can always go to meetups, because there people are going to be, you know, there with the intent of being social and talking about code and learning and going to be like an open environment like that. I love going to meetups. For that reason, specifically, you can sit down and just strike up a conversation with the person next to you, Hey, what are you working on? Where do you work? What kind of stuff do you program and you you probably have a lot in common. And that way you don't have to, like, look for topics. I mean, there's a handful of things that you can strike up a conversation with just about any Dev, and they'll be happy to tell you about their workflow or their code. Because if they're passionate about this stuff, they're gonna like to talk about it. - -51 -00:20:58,440 --> 00:21:21,270 -Wes Bos: This conference we just got back from students had a couple conferences, they have topic tables at lunch and after. So instead of sort of like, I don't know, like I even do this myself each kind of just stand around with beer and wait for Yep. Or like when your way into a conversation, start laughing and pretend to love react. - -52 -00:21:21,300 --> 00:21:21,960 -Unknown: Yeah, - -53 -00:21:21,960 --> 00:21:46,020 -Wes Bos: the topic tables is such a great thing. Because you can just like walk up to a table with the be like, I would like to talk about TypeScript with you, you know, like, it's very clear why you are there. And it's, you're totally allowed to just barge into the circle of people talking because that's what a topic table is for. I think that all conferences should have that because it's just a great way to meet people. And without being like, awkward or weird. - -54 -00:21:46,380 --> 00:21:47,040 -Scott Tolinski: Definitely. - -55 -00:21:47,300 --> 00:22:25,230 -Wes Bos: Next up, we have get fresh air. This is something that I always need to constantly remind myself to do. Because if I'm having trouble with something, or I'm not feeling like I'm being as productive as it should be, the last thing I want to do is to walk away from my work and not do it. Because I'm like, No, I need to spend more time on this. But the reality is, is a quick little walk, often we'll go get a like a tea or something or a coffee or just go get like a pop from the corner store, just for like a five minute back and forth quick walk to be able to get a little bit of fresh air. And me, I think that will help solve all of our problems that I have. - -56 -00:22:25,410 --> 00:23:14,130 -Scott Tolinski: Yeah, it's really a key thing, I think, especially just especially when you are having a bug or a thing that you can't solve or something that's really tough for you, getting that fresh air and getting that like leaving your phone at home and going for a walk around the block. It helps so much we've talked about it a bunch on this show, if you have dogs, your dogs probably want to go outside. So go walk your dogs, I know it's like sometimes I think I have so much to do, I can't possibly take this time to go walk my dogs right now. And that sucks. That sucks for your dogs, it sucks for you. So go do it, go go just out for a walk, go to the walk for a park, get some fresh air, even go grab a coffee somewhere you don't even have to stay in work at the coffee shop, but just just go for a little walk. And then you'll be amazed at how many times you come back to your computer with a fresh set of eyes and a freshly working brain and and all of a sudden, you're just like ready to go is hugely important in my mind. - -57 -00:23:14,490 --> 00:23:45,090 -Wes Bos: And that's also I like having a to do app that syncs with your phone. Because often when I'm walking or getting that fresh air, things will start to pop into my mind. And I'll just throw them in the to do app just as somewhere to put them and then want to come back and sit at my desk, I'll be able to like all of the examples of my JavaScript 30 course and any course that I do, they're always come up when I'm just like, walking somewhere or thinking about whatever and then I'll just jot them into my application. And then I'll file them away in the in the correct project in my to do application. - -58 -00:23:45,360 --> 00:25:25,890 -Scott Tolinski: Yeah, I have so many epiphanies on long walks, that I'll have to pop up a notion or pop open to do list and just start start hammering away on some stuff that I don't like to get work done. But I do like to think and maybe potentially solve problems or let my mind wander a little bit. It's, it's hugely important for me. And this one kind of goes along with that, which is get moving, do some exercise. And on a larger scale, it's like going to the gym, lifting some weights running on a treadmill doing that some kind of thing. on a smaller scale. It's just, you know, dropping, giving you 20 in your office right here, just to say, oh, every failed test, I got to go do 20 push ups or something. You know, just to having this this thing in your day to break up the monotony of sitting at your desk all day get the blood flowing. I mean, it has been like clinically proven that exercise that does improve brain function. So anything you can do whether it's just you know, push ups or or just anything to get that blood moving, do some some body squats, mer squats, do some lunges, whatever stretch or something I used to is this hilarious. I used to be sort of known as the guy who stretches on the floor and the office at work. And people just used to be like at first. I don't think they knew what to do about it because I don't think they'd ever seen somebody just like pushing their chair away. Insert stretching on the floor in the office. And I had my computer there and working. I think people just thought it was so weird. But after a couple months of it, it was just sort of Oh, there scotties just stretching again, I guess. So this is something you can do. Just do it. Even if you work in an office setting, I don't know, find a way to weird guy way to get you the weird guy and it will be a topic of conversation. Why you stretching? Well, I'm smarter after I stretch. Therefore, - -59 -00:25:27,330 --> 00:26:08,760 -Wes Bos: I actually have a perfect example of this is my neighbor knows that I work from home. And a couple weeks ago, I hadn't been to the gym all week. And she asked me to come help her move this like super heavy wardrobe. So I like Oh, sure I ran down and I helped carry and it was it was super heavy. And then after I was done, like I had pretty much like a full body workout carrying this wardrobe up her stairs and pivoting it around the corner. And I felt amazing. And I was like man, like I felt just so much more zone like I didn't have like a jiggly leg. And I didn't have all these distractions going on. But I was like, Man, that's just a testament to showing like just get moving a little bit really helps you focus and zone in on what it is that you want to do. - -60 -00:26:08,940 --> 00:26:13,230 -Scott Tolinski: Yeah, absolutely. I mean, this everything here is all about zone in it for me. - -61 -00:26:13,440 --> 00:26:15,360 -Wes Bos: You know who else is in the zone? Scott, - -62 -00:26:15,480 --> 00:26:18,630 -Scott Tolinski: you come tax time because you're working on your Freshbooks - -63 -00:26:20,670 --> 00:28:04,650 -Wes Bos: is very good. Yes. So Freshbooks is the cloud accounting software that I use for all of my invoicing out to clients out to somebody, if I do like a conference, what's actually really cool is like, specifically what the conference is stuff is that I'll pay for my own flight. And then I will log it as an expense. And then what you can do is you can just turn an expense and assign it to a client, and then turn that into an invoice, which is amazing. So you don't have to like maintain like this like double like, Oh, this is my expense. But then I'm also going to build them for the exact same amount listings will be attached, which is at the end of the day helps keep everything much cleaner, my assistant uses the Freshbooks application, I was actually asking the other day like I just every now and then I just take a stack of crumpled up receipts, and give her a bag of them. And she says I prefer using the app on Freshbooks. Because all I have to do is just like lay them all out. And then just open the app and just take a photo, take a photo, take a photo, take a photo input the amount, there's a button that adds a tax. So like if you if it's like 2595, you can just check HST and then it will like it'll work backwards from there. So you don't have to like put the pre amount in plus the tax amount, you just put the full amount in, hit the tax button and it will calculate the taxes for you. So I love it. I just did my taxes. I spent maybe half an hour in it. Just doing a couple reports a couple exports following up on unpaid invoices and things like that, just making sure everything was in good, good shape. And I export it all from my accountant and he goes into does my taxes. So check it out@freshbooks.com for syntax for a 30 day unrestricted free trial, make sure you use fresh books and how did you hear about a section? Because that makes them keep sponsoring - -64 -00:28:04,650 --> 00:28:05,310 -Scott Tolinski: sick? - -65 -00:28:05,729 --> 00:28:07,440 -Wes Bos: All right, what do you got for me next? - -66 -00:28:07,650 --> 00:29:18,060 -Scott Tolinski: Next up, we have have a separate workspace. This is really important. I think people neglect this one because they think hey, I'm working from home, guess what that means I get to work on my couch, get to work at my dinner table, I get to work in bed, I get to work at any of these places that aren't well good or conducive for getting a lot done. They're going to make you nice and comfy. They're going to make you feel good. But they're not going to make you get a lot done. And there's a time and a place. Let's say you're sick and you're working from home by all means work from bed work from the couch, I do that. But in a standard workday, you have to have a separate space that is for work. And I like to use the space only for work. I don't do anything in my office other than work. That is I record my tutorials, I code, I do all this stuff. And I know that if I'm in my office that I'm here to get stuff done, when I'm not at work, I shut my office door and I don't go in there really unless I'm grabbing something out of there. But for the most part, I know that if I'm heading into my office, I shut the door on going to work. And that is my work spot. It's almost like it's like having an office without the commute. And it's hugely important to shift your brain into that type of stuff done mode. - -67 -00:29:18,269 --> 00:31:42,390 -Wes Bos: That's the biggest thing is it's just a mental shift of I am going here now. And it's even funny like sometimes on a Saturday only to run up to my office and go on the computer maybe print something off or the kids are super into coloring pages right now or I'll need to find an email or do quick search online because I almost never bring my laptop downstairs. And it's funny because like if I go up there on a weekend or an evening it almost feels like weird because I am like being in the hours Yeah, going into the office after hours like this feels odd. I'm not usually sitting here when it's this dark or this is weird like it's a Saturday but uh, but I'm up here in it. I think that's just a testament to showing having defined workdays obviously that's the really lucky that we both have our own offices, not everyone is able to have an entire room in their house that is dedicated, maybe like a guest room would would work well as well. I used to live in a one bedroom apartment where it's had my bedroom and then just like a kitchen living room space. And what I did there is I just had like a dedicated desk to where I was working and it was very clear that this was the desk. It was a Tiny Desk because I couldn't really fit much in there, but I spent the time making sure that it was like the perfect setup for me and I got the nice chair. By the way, a little little hack I just did is about a Herman Miller Aeron. I have a Herman Miller on but I bought another one on Kijiji, because I can't help myself when I find good deals. And it was busted. Meaning that like the the it was from like, 1996, or something, it was like super old because these, these chairs have been around forever. And I bought it for, I think, like 150 bucks or something like that, because these these are like 1200 dollar shares or something like that. And I bought it and then I went to Herman Miller and bought the replacement parts. And I think for about like 300 350 bucks all in, I have like, pretty much a brand new seat, a brand new tilting mechanism, all the rest of parts were totally fine. So it feels like a brand new chair. It's like 25 years old, but it feels like a brand new chair and for like 300 bucks. And I talked to a couple other people on Twitter who also someone found one for 50 bucks, and then got the replacement parts for like 100. Nice. So I know this doesn't have anything to well, somewhat has to do with what we're talking about today. But that's just like a little hack where like, you want your space to be the best possible space that you can have. And we realize those things are expensive, but there are little things that you can do like that to make sure that you you really enjoy your space. - -68 -00:31:42,630 --> 00:32:22,830 -Scott Tolinski: Yeah, meanwhile, I'm trying to maybe potentially get rid of my Herman Miller Aeron, because yeah, it turns out that this chair is like the worst chair if you have had a tailbone injury because of the way it shaped it just like presses right into your tailbone, and there's like no possible way for me to sit in this chair without it pressing on my tail. Oh, yeah, he'll on it. Stand on it. I'm just like, well have a chair. I have a dude saying standing or sit stand standing desk, but I cannot fit my chair because it hurts so bad. So I'm gonna have to get like a saddle or something. I know Joel has this from a kid as a saddle that's sick. I'm thinking about going saddle Yeah, you - -69 -00:32:22,830 --> 00:32:37,650 -Wes Bos: should check that out. The nice thing about that Iran is you can just sell it and like these things do not every value themselves Yeah, you can get most of your money back at that time. That's cool a saddle I wonder what other kind of like what about like a ball? Or I guess that was that would push on your tailbone to hey, - -70 -00:32:37,680 --> 00:32:57,000 -Scott Tolinski: yeah. Can I ask to be specific with oddly enough? Is that the the wooden bench we have like a you know, one of those farmhouse kitchen tables with like a wooden bench. Yeah, what a bench is more comfortable for me to sit on than this Herman Miller chair, this fancy chair. It's like, oh, what didn't flat wooden bench is more comfortable just because of the shape of it. - -71 -00:32:57,780 --> 00:33:15,690 -Wes Bos: My dad had like, back problem once and he had like, one of my parents had surgery. And what they had to do at the dinner table is they had to borrow, like one of these like praying, kneeling things from like a Catholic church. And they put the dinner table because they kneel, - -72 -00:33:15,840 --> 00:33:26,360 -Scott Tolinski: they had to kneel at the dinner table for like a month because of whatever surgery they had. So me Let my standing desk all the time I just flip the chair around and then kneel on the seat of the chair. - -73 -00:33:26,670 --> 00:33:29,850 -Wes Bos: Oh, man, that's probably good for your core too, because it swivels. - -74 -00:33:30,690 --> 00:34:16,380 -Scott Tolinski: It's also bad because I have awful posture. What I do, I just like lean forward fully. But we also have you ever really a hilarious note in here, which is clean your damn office, which is so very true, like your office is you're not a teenager with a bedroom, like clean your office, clean your desk. Even if you are work. I have seen some appalling desks at offices. I've seen appalling desks everywhere. Like, I cannot express how upset that makes me because when you have a cluttered desk like that your brain is going to not work as well as when everything is in its right place. Now I'm not saying you have to be some Steve Jobs in you know, minimalism like white flat everything with nothing on your desk. Yeah, I'm - -75 -00:34:16,380 --> 00:34:18,540 -Unknown: not saying my doored Yeah, - -76 -00:34:18,570 --> 00:34:42,810 -Scott Tolinski: I have I have a notebook. I have a pencil. I have my phone, but I don't have little things and trinkets everywhere. I don't have stuff that shouldn't be here. I do have some things but they're out of the way and I have a nice workspace and not like if I start swinging my arms around. Nothing's gonna get whacked and fall over. It's a big one. Clean your office, pick up the floor, pick up the bookshelf pick up every man. - -77 -00:34:42,810 --> 00:35:10,050 -Wes Bos: My office is such a disaster. And every couple weeks I'll just go and clean it and I feel like such Zen and then I allow you to get dirty again. There's this stickers absolutely everywhere. Just like little little trinkets loonies. There's loonies and toonies everywhere. The pens. So I definitely need to get into some sort of habit. If you've got any tips as to how you clean your office and get into the habit. I would love to hear those. - -78 -00:35:10,350 --> 00:35:25,980 -Scott Tolinski: I like to do it on Sunday. You know, that way, Monday feels really nice. My desk right now is a total disaster because we just came back from this trip, I got stuff all over from the trip, some tea came for me. So I got Tisa note, we just refinanced our mortgage. So I got papers for a mortgage sale in there. That's - -79 -00:35:26,580 --> 00:36:00,860 -Wes Bos: the hardest one for me, I just went out and bought a whole bunch of different colored file folders. Oh, yeah. Because what happens is that like I've like I technically have three business entities. And then we have, we have our house and we had a rental that we sold, and we just bought a cottage and we just have all these important papers, and it stresses me out, because they can't get mixed up. And they're all very important. And it's really hard to sort of keep them separate. And then for each of these, like nine things that I have every single year, you need another one of those. And I just cannot wait until everything is digital instead of having to be paper based. - -80 -00:36:01,110 --> 00:36:48,230 -Scott Tolinski: I know I do. Now, like I mentioned, there's that like scanning app in Google Drive, I will scan things a lot now and then just read them immediately. So I don't have to think about it, I don't have to have that paper, then I have the PDF right up on my NAS server, get a couple backups, I'm not going to lose anything, as long as you have those PDFs. And that's actually like a good thing. There's sometimes like, like paper forms that you keep around that you really don't need. Like, if you read that to life changing Magic of Tidying Up. She's like talking about like throwing out your whole filing cabinet basically. And so if you're the type of person who listened to that and was like, I don't know about throwing away this stuff, you can there's apps for your phone where you can scan stuff. Again, if you're on Android, you can use Google Drive, but there's apps, so scan it with your phone, turn it to a PDF or get like one of those actual scanners scan it. And that's - -81 -00:36:48,230 --> 00:36:49,170 -Wes Bos: so much work though I've - -82 -00:36:49,170 --> 00:36:49,800 -Scott Tolinski: heard of it. - -83 -00:36:50,100 --> 00:36:51,980 -Wes Bos: Sometimes I get I get like a word. And that's - -84 -00:36:51,980 --> 00:36:56,880 -Scott Tolinski: if you tried it pages get your back thing. Yeah. Yeah. It depends on what it is. - -85 -00:36:56,900 --> 00:37:07,800 -Wes Bos: Yeah. I wish that it was I was better at that. Just as it came in, scanned it throw it in the garbage, because you write most of the stuff you don't actually need. - -86 -00:37:08,100 --> 00:37:14,010 -Scott Tolinski: No, no. And she was she says something about like, what are you ever gonna look at the water bill from like, two years ago? Never - -87 -00:37:14,040 --> 00:37:38,790 -Wes Bos: seven years? Yeah, at least in Canada, you need to hold on to it for seven years. And then you could toss it in the garbage? Yeah, that's like, if you get like, that's the like, third little utility bills. Yeah, yeah. Like, I'm sure I could like pull them up at some point. But if I ever get audited, I would just want to be able to take a file folder out from 2012. And oh, man, that's not even 2012 2013 what - -88 -00:37:38,790 --> 00:37:47,690 -Scott Tolinski: I'm gonna do, instead of pulling out a file folder, I'm gonna say, oh, what's my what's my login to the water website? I'm gonna right click download on the PDF, and I'm going to get it there. - -89 -00:37:47,880 --> 00:38:00,690 -Wes Bos: Yeah, I think I need to throw them all away. At some point. Maybe I should try to go paper. If you have tips on becoming paperless like that. I know that that Google scan doesn't work on iOS, a bunch of people were tweeting us that which sucks. - -90 -00:38:00,860 --> 00:38:03,170 -Scott Tolinski: I'm sorry. I didn't know. I promised. I didn't know. - -91 -00:38:03,900 --> 00:38:08,790 -Wes Bos: Scott, your Android pics are always alienating us. I don't mean - -92 -00:38:10,110 --> 00:38:14,420 -Scott Tolinski: I'm sorry. I need to get an iPhone around here just to confirm my sick pics. - -93 -00:38:15,630 --> 00:38:40,770 -Wes Bos: Next up we have here is act like you are going to work. I think this is a really good one as well. Dress up. Don't just wear your pajamas or throw the same hoodie on for every single day. I think there's just like a mental model of I don't know, whatever it is for you. For me. It's putting on jeans, putting on a new shirt. Yep. What are other hygiene tips? There's another one doing my hair. Yeah, that is - -94 -00:38:42,210 --> 00:40:40,610 -Scott Tolinski: with me because I only a lot of times, I'll only like do my hair up when I'm like gonna be on recording. Like, I'm gonna be on camera. And a moment you'd be like, Oh, you were recording today? I can tell because you're not wearing a hat. I'm currently wearing a hat. And she's like, well, maybe you need to respect your hair a little bit more and and and I'm like, Okay, so I've been trying to respect my hair Mar I've been trying to not wear a hat every day every single day because it's really easy for me to do that. And she's totally right. If I go in and I you know, you don't have to put you know product in your everyday but you can wash your hair and make it all look nice. Just get cleaned up for the day. Make sure you're shaving I have a problem with that too. I'll turn into like caveman where I just won't shave for a couple weeks. That's a big one. I gotta I gotta cut that one out. It's a problem. But it's a big thing. And you do you turn into basically this, you know, I don't want to use the word troll but you turn into a cave dwelling being that is not leaving a house and is not presentable in public. So my my wife would those don't know she's a psychologist. She's the doctor of psychology. She was telling me that when you do those steps, right? When you clean yourself up when you make yourself look good. Not only do you feel more confident, effortlessly like it just it's like one of those things that you happens as you feel more confident. But because you feel more confident, you're more inclined to be more competent in your work, you're more inclined to be just less of down in the dumps or it helps with depressive symptoms. That was hard for me. When I had my concussion, I had depressive symptoms, and I just didn't want to do anything. And she was saying, even if you like, can't feel like you're doing anything, get up, fix your hair, like wash your face, get get ready to go. And you'll feel totally different about the day than you did before then, and it made a big impact. So if you're the type of person who suffers from those kinds of things, just forcing yourself to do that sort of step is a big deal. As Dizzee Rascal would say, fix up look sharp, get yourself ready to go. - -95 -00:40:41,550 --> 00:40:43,050 -Wes Bos: Beautiful. Lastly, we - -96 -00:40:43,050 --> 00:42:08,940 -Scott Tolinski: have one which is take breaks, I say take breaks. But with the caveat of not too many in for not too long. Because it's really easy to be like, Oh, I'm going to take a break, I'm going to watch this one episode of this one Netflix show is gonna be half an hour break. And then Netflix is like you want to watch the next one. And you're like, Sure, let's watch it. Next one. And next thing you know, it's a two hour break. So don't take breaks longer than 15 minutes or so a lot of people are fans of the Pomodoro Technique. I don't personally, because I think I have a pretty good handle on when to start and stop breaks. One of the things for me that I do is I eat lunch away from my computer, which is actually something I didn't even do when I worked in an office when I worked in an office I always like ate while working at my desk and at my computer. But like now that I work from home, it's like important to spend that time away from my computer. Or if I am at my computer, that's the time that I browse social media and whatever. And it gives you a little bit of separation to say, Okay, now is the time when I'm not working. And I'm just relaxing a little bit and I can go back to work. And in addition to that, like even like we mentioned, there's like a lot of these things work in coordination, right? Because some of these things are closely related, but they're also addressed separately. And if you take that 15 minute break to go, just take a quick walk again. That's it. That's a quick break. Don't take that 15 minute break, and then come in and then take another break or whatever, take a short break, go for a walk, get some fresh air, open up the windows, whatever, do that little quick break and then get right back to work. - -97 -00:42:09,210 --> 00:43:16,350 -Wes Bos: Yeah, I love doing this around lunchtime. I just love walking to go get some sort of lunch at the mall that's near us. It's about 10 minute walk from me. So it's about a half an hour round trip. By the time you get there, get your food and come back. And it's just a nice little break for me, because I often too, I love just throwing on some YouTube and having my lunch at my desk because that's like a great little break as well for me. But adding the walk in is probably better. Yeah, right. So those are our tips. Hopefully you learned a thing or two. If you have any of your own tips, make sure you tweet us at syntax FM, and we would like to retweet some of the other tips because I know other people specifically I think like like what are your tips around working remotely? But with a team right? Because for me it's it's just Scott that really the Scott's The only person that I have to answer to and that's just on Monday mornings right out there that I can go for a walk whenever it is that I want. But like how do you do that when you have like a team that like needs you to be on all the time, you need to have slack on the time you need to be available. So let us know your tips for that. Yeah, - -98 -00:43:16,350 --> 00:43:26,010 -Scott Tolinski: this is interesting to me. And you know, I want to see other than tips for this if I want to see your desk setups. Let's get out of that desk. Let's see if it's clean or not. Let's uh, let's share some desk setups here. - -99 -00:43:26,150 --> 00:43:33,230 -Wes Bos: I'm gonna make mine immaculate. And then that's Yeah, I love there's a Reddit that's pretty much all developers. It's called the - -100 -00:43:33,420 --> 00:43:37,650 -Scott Tolinski: battle stations. No, no, that'll say like these like themers Yeah, yeah, definitely. - -101 -00:43:37,650 --> 00:43:49,830 -Wes Bos: I think it's Mac setups. Yeah, interesting. It's our Mac setups, which is it was more like the battle stations that people like, Oh, I spent $10,000 on the water cooled, and I put like LED lights everywhere. - -102 -00:43:49,890 --> 00:43:53,820 -Scott Tolinski: You're right. Yeah, LED lights everywhere is the description of that subreddit. - -103 -00:43:54,090 --> 00:44:27,720 -Wes Bos: But the Mac setups is like a little bit more like, I've got a MacBook Pro. And I plug it into stuff. And here's here's me at work. And almost always there's people that have code on the screen. And I posted mine on Mac setups once and everybody's like, hey, Wes, I listened to the podcast. So I think it's like almost 100% overlap of developers. And I love looking at that just for ideas as to how do people arrange their monitors? What keyboards are they using? How do they handle putting a microphone in there? Some people have musical instruments as well. headphone stands seem to be a big one as well. Which is kind of odd - -104 -00:44:28,410 --> 00:44:30,540 -Scott Tolinski: for me to I don't know yeah, I understand that one buddy. And - -105 -00:44:30,540 --> 00:44:33,420 -Wes Bos: just put your headphones on on the table when you're not there. - -106 -00:44:34,500 --> 00:44:39,870 -Scott Tolinski: They do stand or they people have banana stands to those so I guess I don't know what yeah, it's worse. - -107 -00:44:39,900 --> 00:44:54,210 -Wes Bos: Banana stands is odd, too. But yeah, check it out, tweeted a picture at syntax FM and we'll retweet it. Maybe we should do a hashtag for that. Hashtag syntax setups. Who on Instagram and on Twitter so we can see what your what it looks like. - -108 -00:44:54,420 --> 00:44:57,390 -Scott Tolinski: I'm gonna use a photo from like two weeks ago and my desk was looking really good. - -109 -00:44:59,430 --> 00:45:01,080 -Wes Bos: Beautiful, what About sick picks today, - -110 -00:45:01,320 --> 00:46:32,310 -Scott Tolinski: sick picks, I have a sick pick, which is funny because we just talked about this a lot when we were in San Francisco here. So YouTube channel that I really love. And I know you're a fan of too. And you don't necessarily have to be that into cars like I'm not I'm not like a gearhead or like, no our person necessarily I enjoy cars, but I'm not like really crazy about them. This YouTube channel is pretty popular, Doug demuro will have the link in here. You may have heard of this before, because he has nearly 3 million subscribers. He goes through. And he picks out all of these little quirks and features and, and little tidbits about these cars. And some of the videos are like 2030 minutes long, maybe around like 20 minutes is the sweet spot there. And yeah, what he'll do is he'll just like he'll go through the weirdest little things about these cars that you probably never cared about. But to me, it's absolutely fascinating. They'll be talking about here's a car and let's look at the door handles and let's look at how the the air conditioning or the everything is turned on or whatever. It's it's just so dang fascinating. And he's great at it. He's an amazing personality because he's so into it. Like he'll, he'll just like geek out on the funniest little things in these cars and just his go to town on that I've watched I thought I probably watched 100 of these videos by now and there's still so many more to watch. It could be like whatever you're into car wise because he does these exotic cars. He does like SUVs he does weird I think - -111 -00:46:32,310 --> 00:47:18,840 -Wes Bos: one of his most popular videos is like a fully loaded Grand Caravan that has like cameras to see the kids it has microphones it has a little vacuum built into the back the how the seats fold unreal this this guy's YouTube channel is the is the best and I love seeing people succeed in like other stuff like that. Because then I can say like, What is he doing? That makes it so much more interesting then all of the other cardio too. I read that he has a bigger audience then what is that like a British one that everyone want Top Gear Top Gear he's got a bigger audience than Top Gear which is nuts and he's just doing these hilarious YouTube videos with the little tripod I just watched the the 2020 Jeep Gladiator which is the Jeep truck this morning and it was so good. - -112 -00:47:19,140 --> 00:47:29,550 -Scott Tolinski: It says Funny thing is we probably have different tastes in these videos because I almost always watch the exotic cars or the those kind of ones I feel like you're probably more in the utility vehicles - -113 -00:47:29,640 --> 00:47:30,390 -Unknown: territory. - -114 -00:47:30,450 --> 00:47:59,190 -Wes Bos: I watch them all you do, I find the funky ones to be the most interesting. So where he'll go like have like an old Jeep or he'll find like a I don't know, all kinds of different these older vehicles and I just find like the the the funky ones that you never would have thought how things work, how the lights work. Those are the most interesting to me, but I'll watch anything he puts out he he has another channel called more Doug demuro where he - -115 -00:48:00,630 --> 00:48:25,230 -Scott Tolinski: goes, this is a house and he just like reviewed that this house that had quirks and features. It was so interesting, because it's so he's so good at being excited about the little quirks and features. I think that's really it. It's like the stuff that you never hear people talk about. He is so excited about it and that to me is like really what makes it interesting and excellent. I love it. So yeah, check it out. If you haven't heard of it before, you might love it. - -116 -00:48:25,440 --> 00:49:53,040 -Wes Bos: My sixth pick is going to be the Yeti Rambler 14 out so I've talked about a bunch of times on the show but how I love Yeti drinkware and it just doesn't necessarily have to be Yeti because Yeti is really expensive but you can buy it at like Target you can buy like a cheaper one at Target. But the idea is that there's it's a stainless steel cup and there's two layers and then they vacuum out the air that is in between the two layers of the stainless steel and that is one of the best insulators that you can have because there's there's really nowhere for the heat to escape to and there's there's no air in between there. And I have a whole bunch of Yeti stuff. I've got some of the big the bigger Ramblers that they have but they just came out maybe about a year ago with the the 14 ounce mug, which is really nice. So 14 ounces holds. That's quite a bit of coffee. I don't really know what ounces are. Hold on. Let me convert it to milliliters for us sane people 18 ounce ounce, two milliliters 414 millimeters so it's just over a can of beer that would fit in there. I find that it holds enough coffee and it keeps your coffee hot forever. I have a problem of my coffee going cold before I can finish drinking it because I get into some code and I forget about it and this thing keeps it piping hot almost too hot like you have to make sure that's not too hot because it stays hot forever big fan of it. So that Rambler 14 ounce I got the one in Navy and the mug version. Cool like a cobalt to blue. - -117 -00:49:53,910 --> 00:49:54,450 -Unknown: It's like great, - -118 -00:49:54,570 --> 00:49:55,470 -Scott Tolinski: that's perfect for you. - -119 -00:49:55,500 --> 00:49:58,440 -Wes Bos: Yeah. What about shameless plugs? - -120 -00:49:58,800 --> 00:50:39,480 -Scott Tolinski: I have a course on grid. Which is a static site building with view j s. So if you are a view j s fan, and we just did our view episode, I have a course that is now out for purchase or for subscription users, which teaches you how to build blazingly fast, fastest static sites using grid some you could think of as the Gatsby for grid some because graph qL is involved. It basically took all of the lessons that Gatsby learned and we're like, well, what if we made this with view and what if we made some of the configuration things a little bit more seamless? So goodsam is a young platform but it's really super cool. So if you are interested in building fast static sites with Vue js, check it out at level up tutorials comm forward slash pro - -121 -00:50:39,750 --> 00:50:56,280 -Wes Bos: beautiful I'm going to shamelessly plug my youtube channel again. I've been posting a bunch of kind of code along videos up there. Just search Wes Bos on YouTube and make sure you smash that subscribe button break that trackpad, break the trackpad. That's it for today. Thanks for tuning in. We'll catch you next week. - -122 -00:50:58,890 --> 00:51:08,640 -Unknown: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax137.srt b/transcripts/Syntax137.srt deleted file mode 100644 index 98f118a7d..000000000 --- a/transcripts/Syntax137.srt +++ /dev/null @@ -1,136 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,000 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally. - -2 -00:00:25,920 --> 00:00:52,620 -Scott Tolinski: Welcome to syntax in this Monday hasty treat, we're going to be talking all about CSS frameworks. And this is going to be sort of the CSS style based version of the same podcast we did about JavaScript frameworks. So when and why you might want to use them and what the heck they even are, how they can help and how they can hurt your application. My name is Scott Lenski, I'm a full stack developer from Denver, Colorado with me, as always, is Wes Bos. Sup Sup? How you doing? - -3 -00:00:52,799 --> 00:00:54,450 -Wes Bos: Doing fantastic. How you doing? - -4 -00:00:54,650 --> 00:03:13,770 -Scott Tolinski: I'm doing good. This episode is sponsored by Stackbit, which is a fairly new sponsor to syntax. And let me tell you, this is one of those ones that you need to head out to their website. Not only is their website gorgeous, but the service they offer is going to be right up the alley for those of you who are big fans of the jam stack, because what this allows you to do is quickly use any theme in any site generator, without any sort of complicated integrations. Basically, you need a theme for your site Stackbit has you covered if you're working in the jam stack. After the first time that Stackbit sponsored an episode of syntax, we actually got a tweet back from us. And that was a really hilarious that says, Thank you syntax FM for the Stackbit beta offer. I hooked up a theme with Gatsby Netlify CMS and Netlify hosting faster than my Keurig makes a cup of coffee. So if that's not a ringing endorsement, I don't know what it is because we talked about how awesome Netlify is to get you up and running. And Stackbit is just right up there with their with one of these cool service that allows you to throw on a theme to your Gatsby Hugo Jekyll, whatever you're working with and connect it to any sort of headless CMS and get going just effortlessly. And you're going to want to check this thing out@stackbit.com. And if you head to stackbit.com, forward slash syntax FM, the link will be in the description of this video, you're going to get to have access to the beta of Stackbit. And you're going to get to try out these themes for your static jam stack site. It's well worth your time to check this out, head to the website. I'll go at their beautiful design here and get this thing going in your project. This actually is fitting so well with this episode too, because we're going to be talking a lot about these CSS framework type things that make your life easier. If you want the easiest possible way to get set up something like Stackbit is going to be even the next step further than a CSS framework. So check it out@stackbit.com forward slash syntax FM. So CSS frameworks, let's get into it. What the heck is a CSS framework? And where the heck did they come from? When was your first experience with a CSS framework? Because I think most people's was bootstrap? Yeah, the very first initial version of Twitter Bootstrap. I remember when Twitter Bootstrap came out, everyone sort of perked up and said, Hmm, this is actually really super cool. - -5 -00:03:13,980 --> 00:04:03,090 -Wes Bos: Yeah, I had my own like, little like basis, CSS that I had all my utility classes in and things like that. But when Twitter Bootstrap came out, everyone goes, whoa, like, first of all, at the time, that design was absolutely beautiful. The way that it worked, maybe we should describe for people that haven't used it before is it's just a whole bunch of CSS. And it also came with a bunch of JavaScript plugins as well. And you take these classes, and you would apply them to different parts of your website. So you had alerts and errors, and sliders and headings, and navigations and drop downs and buttons. And it just had like, everything pre built for a website, you could just slap it in your your website, and you'd be up and running with a pretty good looking website. So yeah, bootstrap was my big one. I did mostly foundation after that. What about you? - -6 -00:04:03,209 --> 00:05:21,830 -Scott Tolinski: Yeah, I, I never got too heavy into these. I used bootstrap on the initial version of people tools. I have used foundation on some little projects here and there. But for a little while foundation and bootstrap were the two big ones there. They the two big CSS frameworks. They were sort of the pioneers, as you might say, the the framework sort of game. But what it really did, in my opinion, is that allowed developers who aren't good at designing to put out things that don't look like pure garbage with absolutely no effort, because for a long time, and those of you who are newer might not remember this time, it was really easy to just throw up a website and so many developers websites just look like trash, because you don't have those design skills. And you know, it's it's not a problem because, you know, you're not expected to learn everything. But it's really hard for a really skilled developer who may not have the CSS chops to have their thing look nice. Because what are they going to do, they're going to pay somebody else to do it, or they're going to struggle through it themselves have some crappy design. So these things allowed people to get a blog, get up, whatever, get up some code samples, get up a little project going. And they allowed them to do it effortlessly, just by using the built in classes using the system, you don't have to think about margins, you don't think the only thing you're overriding is maybe fonts and colors or whatever. - -7 -00:05:22,070 --> 00:06:11,640 -Wes Bos: Yeah, the idea behind like, specifically bootstrap and foundation were that you'd get like a variables file. And then you'd go into the variables file and set all of your own variables. So fonts and colors and spacing, and you change all the blues to your own blues and all the reds, serum reds, and, and then the idea is that it will just spit out your own unique website, but very few people actually took it that far to do that. Or maybe it is that when you go to websites, and it's not looking like default bootstrap, then it actually does look like a custom basing, it was sort of a nice, I think, what people liked it because it was an opinionated way to approach your CSS and it gave you some really nice defaults, you sort of just got to go in paint the paint the roof or not paint the roof. That's a dumb thing to say. You paint the walls, choose your fonts, and you're up and running with it. - -8 -00:06:11,850 --> 00:07:36,690 -Scott Tolinski: Yeah, I don't know, if you, you probably do remember this. But there's a time when like, every startup that came out was like using bootstrap. I remember going to us that you'd go to a startup site, it was just almost automatic. They have the hero billboard up there, they'd have the buttons. And it would be like, Oh, yeah, this is clearly bootstrap. So there's actually the CSS sort of framework game has evolved significantly since then. And there's now basically CSS frameworks of a whole bunch of different shapes and sizes. So we have that full on all encompassing, just add this CSS file to your site. And all of a sudden, you have all these classes, you still have that kind of framework, but you have different kinds of frameworks as well. There's also things that in my is kind of a dumb name, a functional CSS, I think that's kind of dumb, or utility, first, CSS, which is the less dumb name, where you have like a ton of little micro classes that say, Alright, dot Sarah is now going to be all your Sarah fonts. And then you also have the sort of frameworks that are based on CSS free or a CSS preprocessors, where the framework sort of is built out of the code, aka the stuff that you're using in the preprocessor. You set some variables, variables, whatever, and it spits out some some code. So you don't have to have a bunch of extraneous CSS in your code. And there's also things that are based in jSs, j, s, CSS, and j. s, like styled components based systems. So do you have any experience with some of these functional or utility frameworks? - -9 -00:07:36,720 --> 00:09:11,820 -Wes Bos: Yeah, there's all kinds of them out there. And with most things, functional CSS, the way that it looks is if you just look at your, your HTML, there's these classes, and you just see classes like background, white, font, size, 20, border bottom, red, and there's just like millions of classes, and you can just add classes to all of your HTML and sort of just click together what your website looks like. And what happens is that almost immediately, everyone goes, Ooh, that's not supposed how it's how, and I did it myself. And I listened to Adam Watson's podcast, and he is he has a one of these frameworks called tail winds, and it ends up like, like, he's like, sort of challenging the norms of like, you're supposed to have beautiful HTML. And like, who says, right? Like, who says, we need to have beautiful HTML? Why can't you just add a million classes to it and click it together. And he's obviously a really smart guy. He knows what he's doing. He's amazing PHP developer, and he sort of looked over at CSS and goes like, Hi. Like, I think I can figure out something that works really well. For me, I personally don't like it myself, just because I'm really happy with the way that I'm at it. But I definitely have had my eyes open as to why people use this utility thing. Because I think you can probably get about 90% of your website done by just generating this tailwinds library based on your own colors and fonts and stuff like that. And then writing a little bit of CSS to do things like media queries, and animations and stuff that you just can't do by adding classes to elements. Yeah, I'm - -10 -00:09:11,820 --> 00:10:38,190 -Scott Tolinski: gonna go and say I don't I don't like it either. Yeah, and I'm, it's not that I'm not inclined to, I'm not inclined to try it, I will try it, I will be happily trying it. But it's one of those things that I understand the benefits. And I understand that it's challenging all this stuff, and I understand how it works and why it works that way. But at the end of the day, it just doesn't feel right. To me, I don't like having a bunch of classes. I like having my code a little bit cleaner than that. And to be honest, you know, it's just not for me, I like it, in the sense that it exists, and other people seem to be very productive with it. I could see how fast it would make things, but I just don't, I just don't like it. So I'm not inclined to use it. But there's other systems for those of you who will, I mean, if you're interested in that, there's certainly a lot of systems that utilize that. But there's certainly other systems too. We have something that's like pre processor based bootstrap really moved, I think it was like version four of bootstrap. I'm not positive. Don't quote me on that. When bootstrap moved to preprocessor based, aka you're setting everything in sass. That was a big change for bootstrap is when it moved to sass. It was sort of the point when everybody realized that sass wasn't just a fad, and it was going to be sticking around and it was going to be some serious business. So when bootstrap moved over to SAS, I think it was a big deal. I think zurb actually has the crown for moving to SAS first, but I think these kind of things are really cool. I haven't been using SAS lately myself just because of style components. So I have not had any experience with these recently. But it seems like they're still continuing to grow and evolve. - -11 -00:10:38,460 --> 00:11:30,900 -Wes Bos: Yeah, I worked on a project once where we would use like all of the SAS base extends. So we would take, oh, yeah, something that's built at a foundation and then create our own class, and then extend it based on that. And we thought it was a great idea at the time, but it just turned out to be a nightmare for maintainability. And trying to figure out like, oh, an immediate query, like this thing was not being overwritten, I had a smaller break point. And it was just much more complicated than it actually needed to be. And I think that I was trying to use all of the different tools and whatnot. And then after a couple of years, it ended up being a little bit hard to maintain the thing. So I probably I don't even reach for all of the different extensions, and even installed components, there's a lot of advanced features that I just never touched, because I'd like to keep it as simple as possible. And it's much more maintainable for me at least that way. - -12 -00:11:31,170 --> 00:12:42,450 -Scott Tolinski: Yeah. And next, I want to talk a little bit about styled components based ones I know, not everybody's using styled components. But this is this is an interesting space, because you can provide these full on utility, or these these libraries full of elements. So no longer are you using classes to do your thing, you're importing a box, a card, a button, rebase j s, every base js.org is definitely probably the biggest one that I think exists, there's probably a ton more of these, we're probably leaving a lot out. So rebase is really interesting. They call it as a primitive UI components built without system, somebody describes this the bootstrap of react. So it's, it's very primitive, it's a lot less full on design for you, and a lot more of like, here's some components that have some basic functionality or some basic look to them. And on top of that, it's built with this styled system, which is by the same team that did rebase know style system is an interesting thing. Stealth system, in my opinion, is kind of ugly. I don't I don't want to, I don't want to be mean here, because stealth system looks like super good. And a ton of people seem to really like it. I just again, just like some of this utility based CSS, I don't know if I can get behind it - -13 -00:12:43,350 --> 00:12:47,370 -Wes Bos: lays out the actual CSS that outputs are like the the code itself, - -14 -00:12:47,400 --> 00:13:55,800 -Scott Tolinski: the code is of it. It's not that it's ugly, I guess ugly is the wrong word for it. Because I mean, many people would look at it and say that's not ugly. That's, that's really clean. It's just weird. It's weird to me. And maybe it's just that I haven't tried it, because I've heard that this is the best way to develop a design system in react. But then again, I haven't tried it. And it sort of scares me, which is maybe a good thing, I guess I don't know, a lot of things that scared me in the past ended up being really good. So I can be convinced on this either way, if you are like a diehard styled system person already, and you think this is like the future, let me know, because I'm interested in diving more into this thing. But to get into it, you do a lot of configuration with it. And then when you use things, when you do your style components, instead of writing out CSS, you just bring in the properties. So you're importing, let's say width from your styled system, and then you just have the dollar sign bracket with string interpolation inside of your component. Oh, yeah, I want to take over everything. And to me, that's a little iffy, because it wants to take over so much. I feel like you'd have a hard time moving off of it. But that's maybe a bad concern. I don't really know I'm really interested. This thing kind of scares me. And I kind of like it. So let me know what you think about style system. - -15 -00:13:56,460 --> 00:14:26,730 -Wes Bos: Yeah, it's interesting. You could so you, you have like a wrapper that you pass it your breakpoints in an array, and then and then you can pass. If you have margin or padding or font size, you can pass that in an array of the same size, and it will automatically create the media queries based on those inputs seems kind of interesting. So it says it works with does components or emotion I'm going to talk about this is sort of related in a tangential way. But there is a library for emotion called face paint. And it does media queries, just like that. - -16 -00:14:26,730 --> 00:15:05,790 -Scott Tolinski: I've been looking really hard at face paint because it's really super cool. You pass in essentially an array of breakpoints, and then instead of having to do you know, dot above breakpoints out above or whatever like you are doing in styled components, you say the color property has a value and that value is an array of things and that array matches up again just like in we just talked about installed system. And it looks like it's really slick. I could see myself loving this essentially like you you're passing it in all of the values that different break points and it just sort of takes care of it. This is not a framework or anything, but it seems like a nice little utility library for building design systems that way. Hmm, - -17 -00:15:05,820 --> 00:15:49,770 -Wes Bos: yeah, I'm just looking at this styled system a little bit more, it seems cool. Like I, I don't think that I, I want this, I just like writing CSS as CSS. And that's why I like style components, or just writing their regular SAS file or something like that. I'm afraid to write something like this off, because I've definitely been wrong in the past. But this is just definitely one of those things where I'm just kind of wait and see. Because there's a lot of things that you may adopt. And then a year later, people are a year into a project and go, Ah, you know what, this is causing a lot of growing pains. So I would say if you are thinking about whether to adopt something like that, maybe just sit on your hands for a little bit until we figure out a little bit more about this. - -18 -00:15:49,800 --> 00:16:39,930 -Scott Tolinski: Cool. So let's get into why you might want to use a CSS framework now that you have all of this, this knowledge about what the heck they are, what they are, who the players are here. Again, if we left off your favorite framework, let us know, the one thing that CSS frameworks do better than anything is it makes building something that looks nice, super fast. And we touched on this, it makes people who aren't good at designing things. Or maybe you just don't even have the time, you can throw something together, throw a couple of classes, bring in some components or whatever. And all of a sudden, you have something that looks nice with no effort. So it's really super good there. It also can make some hard things easy, right? Let's say you have a responsive grid, and you don't want to have to deal with CSS Grid or learning any of that stuff, you could throw in some grid classes of different sizes, and it just pops it in. And again, it takes out all of the guesswork all of the design system stuff. And it just makes it super duper easy. - -19 -00:16:40,050 --> 00:17:15,510 -Wes Bos: Another benefit is that often these things will have themes. So if you're building a specifically like for back end, if you're building like a back end, where you need lots of stats in a big dashboard, it's really easy just to go grab a theme and slap it in your back end. And things look good. And a lot of people don't have time or resources to actually design some sort of back end. So it's great if you can just slap in a thing. I think that if it's just a utility, and it needs to look good, I think it's a really good use case for something like this, versus something where it's like, it's a marketing website, it's your actual application, you probably want to put some time into figuring out how your users actually work on this thing themselves. - -20 -00:17:15,660 --> 00:17:45,750 -Scott Tolinski: Yeah, slap it in your back end definitely keeps your own CSS minimal and organized is that one of the key things because it has a system for you, these are the things that like it does for you. So you don't even have to worry about building a system, you can have a framework tell you how to do it stout system fills right along with this, because it's like, you just have to follow along with what they're doing or rebase, or any of these really, it's it's sort of follow along with how somebody else has already determined how it should be. And you don't have to invent all that stuff yourself if you're not into it. - -21 -00:17:45,900 --> 00:19:09,830 -Wes Bos: last little point we have here is that lots of people are using the same CSS. So just like NPM, installing a JavaScript module, it's sort of battle tested in that there's a lot of people have used it, it's fairly refined, you've probably found all the weird edge cases in IE six, or whatever browsers are being supported. There's definite benefit to having power numbers behind something versus some CSS that just you wrote in. Because at the end of the day, there's something to say be like, we're all just doing the same stuff. We're all building the same navigations. We're all building the same three column layout. So if you find yourself using it, I myself haven't, I'd be curious to see what you I haven't reached for a CSS framework myself in quite a while. And I think that was because what most people use the frameworks for was their grid layout where they had columns, and you'd say call seven, yes, span four and push eighth. And as we got CSS Grid and Flexbox, there was a huge push for like Flexbox based frameworks and grid based frameworks. But you don't need a grid framework. When you're using grid, you just use grid. And my opinion at least I know that there's other people out there that think otherwise. But I don't think that you need that. And as I dropped that, I also just dropped the, the need for any of this other stuff, because I just made my own button component. And I made my own navigation component. And I just feel a little bit better. Having made it myself. What about you? Yeah, - -22 -00:19:09,900 --> 00:19:57,590 -Scott Tolinski: I've read along with you, I don't end up reaching for them that often. The times that I did were like typically side projects and things like that, if I'm building something from scratch or building my own thing, you know, I typically don't one of the things that you can get into like some of the reasons why you might not want to get into these is that you can get in and we've heard of callback, hell, maybe class hell, because you have just like 10,000 classes. This is font sizes small this is red. This is their This is like all these different fonts. And next thing you know, you have like HTML that spans 120 characters for one div or something like that. So you can definitely end up writing a ton of CSS classes with these, especially some of these utility based to CSS libraries. Again, some people might not see that as a con. I don't like it. Just me. You can like it if you want. It's up to you. - -23 -00:19:57,990 --> 00:21:10,710 -Wes Bos: I don't think another big thing is that stops from learning how CSS actually works under the hood, we see this as well with any type of framework is that people will start asking questions as house a lot in, in the bootcamp, we specifically didn't allow bootstrap, because people will come in like, Can I just use bootstrap, like I like it better. And then we're like, Fine, go ahead and use bootstrap on your project if you really want to, and then the questions would start rolling in. Why is bootstrap doing this? And you're like, Well, do you know how floats work? And no, I just applied a class to like, do you know how, like padding and line spacing and all of these things that work? And the answer a lot of time was no, I just, I just use bootstrap. And I think that's a bit of a crutch for a lot of people, which stops you from actually digging deep into actually how CSS works. And I definitely see the benefits. But if it is stopping you from learning how the underlying language works in the browser, you're going to have a bit of a hard time when you run into actual issues when the issue is not how bootstrap works is the issue is the browser's interpreting the CSS that you wrote, and something is conflicting, and being able to figure out what's conflicting, you need to know how it works. - -24 -00:21:11,090 --> 00:22:05,730 -Scott Tolinski: Yeah, definitely. And I think this, this next one is a little bit, it's been mitigated quite a bit as these things have grown, when they first came out the size, the sheer size of some of these trademarks was monstrous, you'd throw in all of the CSS and all of the J s. And then you'd have this huge download that you have to have this entirety of bootstrap CSS, even though you just using the buttons in the headings or something. And they since made this way easier through the use of pre processors or just like bundling them, there are different ways, you could say, hey, just give me this or give me that. So this isn't always going to be a problem. But it's definitely something you need to think about when you're evaluating whether or not to use a CSS framework, or maybe picking one is just how much additional size, how many cavies, you're adding in there to your site, it gives a getting into MBs. I hope it's not getting B's. But yeah, so you wanna, you want to make sure that you're not just throwing a ton of stuff right into your site. And that's, that's a good argument for writing it all yourself, because you know how much you're putting in there. - -25 -00:22:05,760 --> 00:23:39,420 -Wes Bos: Yeah, you can use though there's, there's libraries out there, purify CSS is the big one, you can run your website and your CSS through that. And then it will, it will detect the class names in your PHP react, whatever it is that you're using, and then it will filter out the CSS that's not needed. So that's good, because if something like these functional libraries, like tailwinds, they're like 300 320. k, and you probably shouldn't ship all of that to the browser, because it's got a selector for margin, bottom one, margin, bottom two, margin, bottom three, right, there's a selector for absolutely every single thing you could possibly want to do in CSS. So you obviously have to filter those out. So that's not really a big issue. And then there's also you need to understand that a lot of these functional ones are, are duplicate content. So like, if you write the word background, 7000 times in your CSS, it's not actually going to deliver the word background 7000 times over the wire, it's going to compress it into the word background once and then it's going to put a pointer to that word every single time. And the the big one is G zip. Also, there's a new one called broke broseley. Broadly, from Google, interesting, this comes for free, if you have CloudFlare turned on, or you can go into your CloudFlare and turn that on yourself, I think, and that will compress it as much. So I don't think that's a really good argument anymore. Because there obviously is good solutions to fixing that big CSS bundle issue. Yeah. And - -26 -00:23:39,420 --> 00:23:49,140 -Scott Tolinski: it's it's something you have to be cognizant of. Yeah, more or less, right, that you are potentially adding this sort of thing? Not necessarily like you're sunk because of it. - -27 -00:23:49,260 --> 00:23:54,870 -Wes Bos: Yeah. Because if you don't know, then you just might accidentally ship a seven Meg website and not know it. Right. - -28 -00:23:54,900 --> 00:23:57,870 -Scott Tolinski: Yeah. messed around and shipped a triple double. You might be. - -29 -00:24:00,240 --> 00:24:00,870 -Wes Bos: That's good. - -30 -00:24:00,900 --> 00:25:50,760 -Scott Tolinski: That's a good one. Yeah. And another one is you might be overriding a ton of this stuff. Like, you have all this CSS, you're bringing in a bunch of CSS, and then you're having to override a whole bunch of stuff, which just adds two more to the bundle, right? Yes, adding more, not only that, but it's such a pain in the butt. You know, it's like overriding the the button, the button like the in browser button. CSS is like one of my least favorite things in the entire world. I don't know why but having to do background appearance, none. I'm just like, why are you here? background appearing? Yeah, I don't want you to be here. If you get away, nobody likes you. But you know, it's, it's one of those things that again, you just want to be you want to be aware of that you might have to be overriding a ton. And if your design is so much different from bootstrap, then maybe you don't want to be using bootstrap at all, because you're just going to be overriding it funny. One of the one of the ones we didn't mention that you probably wouldn't override a ton would be material UI. I know a lot of people use material UI because it just follows Google's material design guidelines. And then chances are you're not going to be overriding a ton or just changing some colors here or there. But that wouldn't be a good one to check out to have you on like a clean stuff. I've actually used that before myself. But the last one you have here is you like writing only the code and nothing else that you don't need, right? Again, some of these tools that you mentioned the brotli, purify CSS, they're going to remove the unused CSS stuff for you or make you aware of it. But again, why even have it in the first place? Maybe you're taking this minimal approach of like, I only want the stuff that I'm going to use and nothing else in my codebase. And I don't want to think about anything else. So you know, I don't know, final thoughts on this was, I think my final thoughts are, you know, I'm not going to judge you either way. If you're using a framework or not using a framework, you do you, whatever works for you. If you can work fast, with CSS using a framework, go right ahead and do it. However, you do want to be aware of some of the potential pitfalls. I don't use them myself. But you know, I don't I'm not a hater, not hating on them. - -31 -00:25:50,880 --> 00:26:38,670 -Wes Bos: Totally. I'm the same way as well, um, I see why people would want one. I personally don't think that the benefits of using one outweighs just writing it yourself. Right. And I say that as someone who I think I'm pretty good at CSS, so. And I know that a lot of people who do use these things are maybe beginner at CSS, or they just have totally different thoughts and approaches as to how to approach CSS. So there's many different ways. I think one funny thing about the whole CSS community, or maybe just JavaScript developers who talk about the CSS community is that they feel like there's one good way to do it. And there's not there's so many you might write you might write sass, you might write regular CSS, you might write CSS and j. s, you might have some sort of functional approach many ways to approach this thing. And I think they all work fairly well. Yeah, - -32 -00:26:38,760 --> 00:27:01,560 -Scott Tolinski: yep. Cool. I'm right there with you. I don't have anything else. So I think that wraps up today's hasee treat that bundles it up. We can store it in the fridge for leftovers tomorrow. If you want. Lots of good stuff here. Send us your favorite CSS frameworks. I want to see some of the ones we didn't mention. I know we didn't mention a ton. So if there's a bunch of CSS frameworks that you're wishing that we mentioned, go ahead and share those to us and we will retweet you with those. That's all I got. Sounds - -33 -00:27:01,560 --> 00:27:04,410 -Wes Bos: good. All right. Thanks for tuning in. We'll see on Wednesday. - -34 -00:27:07,020 --> 00:27:16,830 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax138.srt b/transcripts/Syntax138.srt deleted file mode 100644 index 206e81cad..000000000 --- a/transcripts/Syntax138.srt +++ /dev/null @@ -1,276 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:48,960 -Wes Bos: the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott solinsky and West boss. Welcome to syntax, the podcast with the tastiest web development treats. Today we're gonna be going over what is new in web development, there's been, I don't know a handful of things that have been surfacing lately, things that are added to JavaScript or to CSS, or just to the web platform in general. And it's good to keep up to date with with what's coming in what's new. Today, we're sponsored by two awesome companies century just going to do all of your error and exception tracking and clubhouse which is project management software that won't make you cry. I don't know if that's the tagline that they use, but it seems pretty sweet. We'll talk about them partway through the episode. How are you doing today, Scott? Hey, - -3 -00:00:49,200 --> 00:01:54,060 -Scott Tolinski: I'm doing super good. I just got back from the greatest wedding that I've ever been to. And I'm feeling really good. The wedding was amazing. It was in Pasadena. The bride and groom, like walked down to the stage. I guess you could call it because there was a stage and performed three songs with guitar. She played guitar, he played bass and sometimes acoustic. And then they have the guitarist from vulfpeck, or Theo from vulfpeck. He's not necessarily the guitarist, he was playing guitar with them as well. And it was incredible. They did three songs, they exchanged rings, and that is the wedding. I think every single person there was just like, wow, that was really cool. That was like they're all incredible musicians, obviously. And that's sort of how they met essentially. And it was just like, it was such a sweet sweet thing to be a part of. There was a lot of really cool people there. The a couple of the guys from both pack in general were there. So it was it was just a it was a blast really intimate, really small 60 cent people, probably the best wedding experience I've had. So yeah, no, I'm great. I'm feeling recharged after that. How about you? - -4 -00:01:54,420 --> 00:02:31,440 -Wes Bos: I'm feeling pretty good. I'm about to head off to New York tomorrow morning to go to jamstack cough New York, I'm doing a talk on just like JavaScript in general, just things that you can do to get better at JavaScript as well as I'm doing a Gatsby workshop, which is the first time I'm giving it. So I'm pretty excited about that. These conferences are so much fun. But they're so time consuming to, to prep for and to travel and to make a workshop. So this is the I think the last conference I will be at before I take some time off when we have our new baby. So I'm excited to have this all finished up. - -5 -00:02:31,530 --> 00:02:55,319 -Scott Tolinski: Yeah, you know what, I haven't done a workshop like that. Because there I mean, I've done so many online, but like, I haven't done a stand in front and do a workshop like that. But I can only imagine what the preparation for that is, it seems like you have to prepare so much stuff to make sure you you don't have any lols or downtime and that everybody's feeling like they came out of it learning something cuz I've been to bad workshops and bad workshops really make you not feel so good about sitting there the whole time. You're just like, - -6 -00:02:55,350 --> 00:03:54,120 -Wes Bos: yeah, they're they're really expensive. And you got to sit there all day. And like you want to learn something and you want to you want to be able to put it together. So it's it's tough to put together a workshop where you don't just want to be like type what I type, like you want to give people chances to try it on their own and, and whatnot. But then there's this also this like other section of workshop is like, if somebody gets tripped up on a on something, then then they sort of fall behind, they have to make sure that you have like, like enough like stops where you can like quickly help them or, or talk to a neighbor. So I've luckily done like, I don't know, dozens and dozens of workshops in the past, I think I've got a pretty good formula for it. I don't do like slide decks, I just do markdown notes nice that we sort of roughly follow. And the the benefit of that is that I'm able to just sort of talk off of those notes. And then the code samples are in the notes. So if you do goof up doing it live, you can always just click Copy Paste from the code samples and sort of get back to where you're at. - -7 -00:03:54,150 --> 00:04:53,550 -Scott Tolinski: Yeah, it's funny the the worst workshop I've ever been, I don't even want to I don't want to give too much away about this just in case. But the workshop was branded as learning x technology. It says we're going to learn this x technology. And so I was like, Oh, cool. This is something I don't know. And even if it gives me the very beginning, like very basics of this thing, I'm gonna be excited to know what the very basics are. So I get into the workshop. And it's a it's not a super long, it was like a couple hours long. But seriously, the way that we learned that technology was that by learning that technology, but was hitting an API that just returned everything for you. So the API of the stuff that you would be branded as teaching you it's like, we're gonna teach you this. No, actually, you're just gonna hit an API endpoint, and it's going to bring you back the data. And you're not going to learn any of this stuff that we told you about. I was just thinking like, Oh my god, I'm so annoyed that the half the class was spent literally half the class was spent trying to get everyone's API credentials working, like everyone is just like binds. In our case, the service isn't working. The service was half broke. It was just disaster. - -8 -00:04:54,930 --> 00:04:59,310 -Wes Bos: Was that person who gave the workshop working for one of the companies that sells this API? - -9 -00:05:00,000 --> 00:05:04,640 -Scott Tolinski: You might be right. Okay. Yeah. And I don't think I know that you are right. Yes. - -10 -00:05:04,760 --> 00:05:32,970 -Wes Bos: Okay. That's that's a bit frustrating sometimes. Because I guess, like you do sometimes want to go to specific workshops for these companies because you want to learn their tech. But sometimes it could just be one long sales pitch that you paid for. Yeah, for tech, which is a bit of a bummer. I think that's why i like i like to do workshops, because I just do them on on things that, like, I don't work for Facebook or anything like that. I just like do them on tech that I'm interested in, and other people have been asking to learn. - -11 -00:05:33,030 --> 00:06:02,070 -Scott Tolinski: Yeah, yeah. Cool. So let's get into some of these new things in web here. The first one we have is a promise static methods that are coming these new promise methods, which we have as all, and race all settled any, I have not looked at this proposal yet. But I would assume it's just more control and giving you the kind of things that we had in in other promise libraries, right, it just allows you to control race conditions and things of that nature. - -12 -00:06:02,250 --> 00:08:55,159 -Wes Bos: Yeah, so uh, we have already we've got promised all which we'll finish when either when all of them are successfully finished. And sort of the downside to that one right now is that if one of them fails, it'll short circuit is the word that people use. Meaning that like, if you've got five promises and one of them rejects, then it will immediately go to the the catch condition at the end, or whoever you've chosen to handle that error. And then we have promised that race which will resolve as soon as the first one finishes. And those are pretty heavily used, I use promise dot all quite a bit myself. But there's, there's two proposals out there right now we've got promised, all settled, and this is a this is in stage four. So it's it's likely going to come. And the way that it works is that you pass it an array of promises, much like promise dot all and promise dot race, this will fire when all of them are finished. Meaning that you don't care if they resolve or reject. If you have four promises, three of them resolved one of them rejects, if you want to run some code after all of them are finished, regardless of outcome. all settled is is what we need in that specific use case. Because like I said, promise dot all will immediately short circuit, it will go to the the end when one of them fails. And in this case we can wait for for whatever outcome. And then we have as well on that in in stage one currently. So stage one is it might not come to the language. But the way I see it, it's fairly likely, this proposal was written by Madea spine ins who works at Google who's behind a lot of the JavaScript ESX stuff. So a lot of the stuff that he does actually does get pushed into language. So the difference between promised that any and promised race is that promise dot any will wait for at least one of them to finish. And then it will fire or as promised that race will fire if one finishes or one rejects, it doesn't matter. So if you've got like six requests, and you don't, you know, like, maybe maybe some of these will resolve maybe some of them will reject. But I just want to know when the first one is resolved, or I want to know when all of them reject, you kind of get into the weeds as to the specific use cases that you want. And I'm betting that you probably won't reach for these all the time. But they the I definitely have found myself in situations where I do especially when like, the example that I give for this is that you've got a promise API, and you're hitting like you're trying to guess what endpoints might be. Maybe you want to see if there's a user with the name of Scott, and you want to see if there's a username with the name of Wes, and you don't know. So what you could do is you could ping both of those API endpoints. And they'll both reject if they're not there. And you can use these different new promise methods to to wait and check if both resolve or both reject or one resolves and one rejects, etc. - -13 -00:08:55,380 --> 00:09:33,690 -Scott Tolinski: It's your thing. You know, what I, as much as I love that all of these things exist, except for since I've moved to graph qL, I like have not been thinking that much about race conditions or some of these more interesting solutions, because I just hit my API once. And typically, I'm just doing it through that, you know, an Apollo query or something. But even if I'm hitting a query and returning a promise in waiting that it's like not a complex promise situation. So it's funny because I just, I never find myself using these. But I kind of want to, they're all these things that look a lot of fun. I guess you could say they're fun, but like, they look kind of fun to me. And it's like, can be really great if I had a situation where this was applicable. - -14 -00:09:33,720 --> 00:09:58,110 -Wes Bos: Yeah, I think if you were to either a be be hitting multiple API endpoints from the browser, or be like fulfilling your own graph qL requests, because like, if you're writing the code behind the resolver of your your graph, qL API, then it's likely that you're going to meet need to make at least two maybe two or three different database calls, maybe even different API's at the end of the day, and then it's all sort of swept out under the graph. qL API. - -15 -00:09:58,140 --> 00:10:23,610 -Scott Tolinski: Yeah, and it's funny because Apollo There's all that stuff for you, right? It's like, Oh, you just specify, call her and then the resolver does it for you. It's like you don't even have to wait for the results to be back. The platform does it. So this is really cool. Anything that makes us you know, working with async. Easier is good for me. Next up, we have lazy loading images. Now this one is money just dropped, like yesterday or Sunday gave it away. And this - -16 -00:10:23,610 --> 00:10:27,020 -Wes Bos: weekend most tweeted thing ever. on a weekend. - -17 -00:10:27,020 --> 00:12:03,809 -Scott Tolinski: Yeah, it is. It's something this is I think this is a perfect example of the browser taking over something that it should be taking over. Because how many times I mean, how many projects have you used that have implemented lazy loading, I feel like almost everything I do that's image heavy, or anything implements lazy loading in it. And so this is going to be native lazy loading is coming into Chrome, you simply just need to pass in a data property named loading or attribute, I should say, need to pass in an attribute that just says loading and have it equal to lazy, and therefore you're going to have images that not load until they're in the in the middle of the scroll view. And what's cool about this is that in this blog post, he even talks about a great little fallback, right? If the loading exists in HTML image element dot prototype, then the browser supports loading. Otherwise, you can use a polyfill, or a library instead. So he even has code inside of his blog post to show you how to have a fallback for this. So you don't need to bring in anything other than this polyfill fallback library. And you can get using this right away. So this is sick, this is very sick. In my opinion, I am so excited to have lazy loading into the browser. Again, this falls into the category of stuff that is going to make your applications be faster. And anything that makes your application be faster without you having to do very much is a huge win in my book. I mean, do the options here are the I don't know if you want to get into some of the loading attribute options that we have coming with this lazy loading, but I'm just so excited for this. - -18 -00:12:03,870 --> 00:13:12,240 -Wes Bos: Yeah, it seems pretty neat. There's there's lazy, which is what we talked about, there's eager, which is a loading it right away. And then there's auto, which is letting the browser decide it for you. The blog post here doesn't go into like how it decides when to load the image. But I think that that's because that's a browser implementation, though, you should tell the browser the same with like the preload attribute on a video tag, you can tell it to preload but sometimes the browser for the user experience and the batteries and bandwidth sake, it will it will sort of override that and use its own attribute or decide when it should load it is the only this thing just says it will only load them when the user scrolls near them. So I don't know whether that means it's halfway on the page, totally on the page, like one scroll view away, I'm sure that the the browser will figure out what makes for the best because I also don't like it when you have to like scroll and wait a second for the image to download. I much prefer you just to load it when it's like maybe like one scroll view away. Same here, go ahead and or like load the page and then and then start to load them in the background. That's how a lot of code split bundles work as well. - -19 -00:13:12,270 --> 00:13:19,860 -Scott Tolinski: Yeah. And we should also mention that this is going to be working for iframes as well. Again, these things are just this - -20 -00:13:19,919 --> 00:13:22,110 -Wes Bos: Oh, like on an iframe tag. - -21 -00:13:22,140 --> 00:13:25,860 -Scott Tolinski: Yeah. On an iframe tag such the same property? You bet. - -22 -00:13:26,010 --> 00:14:02,130 -Wes Bos: Oh, I bet like something like code pen will love that. Because Oh, yeah, code pen is just an iframe of people's pens. And they have to load like seven or eight websites offer every view, they probably already have their own lazy loading scheme for that. But yeah, it'd be cool to go native. And this is like a perfect example of like a progressive enhancement as well. Or like, you can just pop this on your existing image elements, even if you don't do the like the polyfill. workaround, and your your sources will just still work in older browsers. And then people who have newer browsers will be able to have a bit of a better experience or save bandwidth, faster load, things like that. - -23 -00:14:02,159 --> 00:14:22,169 -Scott Tolinski: Yeah, I'm pumped for this. I'm going to be using this obviously everywhere, even and I was thinking like Twitter embeds Twitter embeds take a long time to load. And I do lazy load them right now with the lazy load react. But hey, it couldn't be easier. And if it's built in the library, I don't even have to throw in that lazy loaded code. It cleans up my XML or XML. Yeah, cleans up my XML really well. - -24 -00:14:24,690 --> 00:15:21,390 -Wes Bos: Next up, we have CSS Houdini, which is pretty exciting. We've talked about it and we actually have a show coming up on it, we just have to spend some a little bit more time building a couple things ourselves. And before we can do a whole show on it, but CSS Houdini is this idea where you can write your own little worklets you have access to the CSS paint API inside of it, meaning that you can write your own CSS, like border jagad or filter grungy that's my I would kill to have a filter grungy and yeah, that's right. happens is that you can have access to the paint API. And then you have access to, I think it's pretty much just the Canvas API that you like the 2d Canvas API. And you can paint and you can, you can do borders. And you can, it's a lot of math of having to draw on it. But you can implement your own CSS from there on out, which is pretty exciting. - -25 -00:15:21,600 --> 00:16:05,190 -Scott Tolinski: Yeah, and there's some insane possibilities with CSS Houdini, if this like ends up being performant. And as awesome as CSS is already, you best believe this is going to be huge. So you could think of it well, if you want to see some of these examples, this CSS hyphen Houdini dot rocks is the coolest website. Because there is so many little experimental showcases where you can really get a good idea of just how mind blowing this CSS Houdini actually is because you can do so many things that you couldn't do before. There's even a really good example of using, you know, personalized checks, checkboxes, so like design, I'm just looking - -26 -00:16:05,190 --> 00:16:06,270 -Wes Bos: at this one right now. - -27 -00:16:06,299 --> 00:16:54,029 -Scott Tolinski: Yeah, there's slanted gradients, there's corner gradients, there is a u background properties. And you can do so much stuff here. tooltips Oh, you can make a tooltip. Finally, and CSS. That's really sweet. Custom borders, rough boxes. There's like a really cool, like highlighter example where it makes it look like it was highlighted with a highlighter. This one looks like it's sketched, I mean, there's just some cool stuff. And, man, if you can animate this stuff and have it all, it's just my mind is completely blown with how awesome CSS Houdini is, I actually, this is it is an out by any means yet, but I am, I am like already salivating at the opportunity to do a tutorial course on CSS Houdini because I just want to dive into this headfirst. - -28 -00:16:54,049 --> 00:17:45,860 -Wes Bos: So I'm just looking at this checkbox one right here. And what it was is it says background, and the property was paint, which is a new method, I guess, or like a kind of like when we do like background, parentheses. So it's called paint. And then you pass it the name of the paint API that you want. And this would this case is called checkbox. And then you have this register worklet JavaScript, which is I'm looking at it right now. It's probably 20 lines of JavaScript. And it just says register paint, which I guess is the the global function for registering a new Houdini, I don't even know what it's called, yeah, property, and register paint checkbox. And then you pass it a class, which inside of that you can you can recreate your own new methods and whatnot. It's just, it's just CSS or sorry, it's just JavaScript Canvas code from there on out, which is pretty cool. - -29 -00:17:45,900 --> 00:18:14,730 -Scott Tolinski: Yeah. And it looks like it's a lot of math. I mean, this looks like a lot of math. So maybe if you're interested in being CSS Houdini Master, it's going to be time for you to bust out some of those math workshops and tutorials and canvas tutorials, things like that, to get used to painting in context and working in like a matrix of pixels and things like that. There's so much possibility here, but I have the feeling that you're gonna have to be really good at math, and you're gonna have to be good at like Canvas skills in general to make this happen. - -30 -00:18:14,790 --> 00:19:11,360 -Wes Bos: Yeah, the frustrating thing about Canvas is that there's no elements, you can't just select a line and like move it over, right? You have to like paint it and repaint it. And Canvas is frustrating to me in that regard. But that's obviously how it works. Yeah, I think if you were looking like I know, a lot of people are like, how can I like, get better at JavaScript or whatever. I think like, if you were to hitch your wagon to this horse, I think it'd be very beneficial to your career, conference talks, YouTube videos, lots of examples. Like if you can become the CSS Houdini person with tons and tons of examples, I think that this would be a very beneficial thing, because there's not a lot out there right now. And I think that this is going to blow up. Like it's gonna be like CSS Grid was where all of a sudden people Whoa, it's in all the browsers. Wait, we can use it now. Now, and that is just as huge. Like, that's what I did with my CSS Grid courses. I released it like, just a couple months before it just blew up. And now everybody's using it, right? Yeah. Yeah, - -31 -00:19:11,360 --> 00:20:30,800 -Scott Tolinski: tip. Yeah, hot tip. And I mean, in speaking of horses, the workhorse of my bug tracking system is century. century, by all means, does the workload of a horse here for me because I just drop in some simple lines of code and some configuration to get it going and century catalogs and categorizes all of my bugs. And the cool thing is I can attach them to releases. So let's say I'm pushing out a new version of level up tutorials. And I want to say, hey, this version of tutorials should have all this stuff fixed. Well, I've attached a release to century and now Sentry is has that additional context to know Okay, this bug has happened this many times in this release, and this many times prior to this release to therefore looks like it fixed it. So Sentry provides all sorts of amazing tools like that, and you're gonna Don't want to see it to believe it because their website is not only beautiful, but their interface is amazing to work in. I never have to struggle to find where to go. Everything just sort of falls at my fingertips. I don't think I've ever contacted century support, which for me is pretty big. So, head on over to century.io use the coupon code, tasty treats all one word all lowercase, give Sentry a try. They have, you know, been a longtime supporter of syntax, and I highly recommend them as a service. So thank you so much for Sentry for sponsoring this episode. - -32 -00:20:30,930 --> 00:22:04,140 -Wes Bos: Next up is a quick update to CSS subgrid. In December and released in January, we recorded a podcast on CSS subgrid, which real quick, it will allow you to extend the rows and columns of a grid to a child element. And that's really cool because sometimes you want to you have like a grid with three cards. And then inside each of those cards, you want to align all of the like headings or images or footers, you want to align them all to be the same. And it's not really doable right now in CSS. You can do some some hacks with Flexbox, where you align the last thing at the end but sub grid will allow you to align like a grandchild with its parents, rows and columns. After that episode, we got a tweet from Jenn Simmons which as soon as she heard the episode was subgrid is not a year out because we said it's probably a year out. And she said we are working on it in Firefox right now if you want it sooner than 2020 how badly and for what use it. So that's really exciting because it seems to be that we will probably get it sooner than a year out. There is a flag in Firefox developer and nightly right now called layout dot CSS dot grid template subgrid value dot enabled turning that to true still doesn't enable it. But it does look like we will probably at least be able to start to play with it in Firefox sometime soon. There's a Bugzilla link to it hasn't been updated in three months. And that's really all I can find about the status of it. But I do know that we probably should start seeing it soon. - -33 -00:22:04,140 --> 00:22:17,640 -Scott Tolinski: Yeah, I'm hopeful too. I can't wait to see this in. I know, if you're interested in learning more about subgrid. Like why you would use it specifically, or maybe some of the in depth stuff. We did an entire episode on subgrid. And I thought it was a really great episode, - -34 -00:22:17,760 --> 00:22:18,360 -Wes Bos: Episode - -35 -00:22:18,360 --> 00:23:35,160 -Scott Tolinski: 109 Episode 109. CSS Grid level two, aka sub grid. So if you want to learn more about it, check out Episode 109 will give you a lot more background information on what's going on here. But just like with grid, you know, I might not be using CSS sub grid all the time. But the fact that it exists, I think is going to really change how we think about laying things out. Because right now I think one of the things that CSS Grid did best is it allowed us to remove some of the extraneous divs. And some of the extraneous elements we were throwing in our code just for CSS reasons, specifically, and it's gonna make our code a lot cleaner. So if subgrid ends up having that kind of impact, which I have a feeling it will. And there's definitely a specific set of use cases that subgrid is perfect for, I think subgrade is just going to further make things easier on us. And so many times we're constrained to do certain CSS techniques by the HTML, we're either given by the team that's in charge of it a CMS or maybe we just want to write ultra clean CSS and not have to have a bunch of extra stuff in there. So I'm all for additions and improvements to CSS. And that sort of way, we have a couple of other things about CSS later on in the show that again, are just going to make our lives quite a bit easier. - -36 -00:23:35,190 --> 00:24:28,920 -Wes Bos: I'll tell you one little example of when I want this is this sniper application I built that scrapes, Kijiji and Craigslist and Facebook marketplace, there's a button that says not on it, where you can use it takes in all of the items. And I just want to like I want to delete a bunch of them because I don't like them. Right. Sure. And the button I just wanted like sometimes there's like 300 items in there. And I just want to go Bumblebee, Bobo, like quickly go through them. But the problem is that sometimes the title of the item is two lines tall. And what that does, that shifts everything in that cart a little bit down. And that means that the button, the button moves down as well. And so as you're tapping it, the buttons move up and down, depending on how many lines of text are there. And there's not really a good solution for lining up the buttons to be all on the same row. Unless you were just it was the last item in the cart, and you're just stick it at the bottom of the card - -37 -00:24:29,430 --> 00:25:18,480 -Scott Tolinski: word. Alright, so next up, we have a fun one, which is that native modules in the browser. Again, I think this is one of obviously this has been a long time coming. But so many of these things that we're talking about here, it's it's stuff that we use, right? It's stuff that we want to use in JavaScript and CSS and whatever in our code. And now the browser is going to just be adding it so that we don't have to do it in code ourselves. Or maybe we don't have to worry about compiling as much or any of that stuff. So j s modules also known as ES modules, or Atma script modules. I love that. That clarification there in the blog post. But it's basically just a it's a collection of new features in JavaScript that allow you to use modules like common j, s, or node whatever have we used before using the import syntax? So this is pretty cool. - -38 -00:25:18,539 --> 00:25:26,550 -Wes Bos: Yeah. So the way that this works is that you just have a script tag, you say type equals module, you can only use ESM. modules. I know you said common J. I mean, - -39 -00:25:26,550 --> 00:25:29,460 -Scott Tolinski: I meant like, using like, like, - -40 -00:25:29,489 --> 00:26:16,320 -Wes Bos: Oh, yeah, yeah, like you're just used to using Yes, it's supported in almost every browser, right now, obviously, no, ie 11. And the other only other one that is significant is the UC Browser for Android is now supported in which has almost three and a half percent global usage. But that's going to be kind of cool, where you can just start using a script type equals module. And if you have HTTP two enabled on your server, it will ideally download all those assets at the same time. And you can import all of your files. And there will be no compile step, which is kind of cool. We're also getting dynamic import Pretty soon, this is less well supported. But like everything, if you're compiling using Webpack, or partial or something like that, this comes along for free already, that that will help you do code splitting. - -41 -00:26:16,350 --> 00:26:27,240 -Scott Tolinski: Yeah. And I see here in some of these notes here, that there's often use of this dot m. j. s to distinguish a JavaScript module, they have you ever looked into this Mjs stuff? - -42 -00:26:27,420 --> 00:28:40,200 -Wes Bos: Yeah. So yeah, we did a show like maybe six months ago, they sort of gave the update. And it looked like the getting modules in node. So not not modules in the browser. But being able to use ESX, ESM. modules and node was that we're going to have to start using dot m j. s syntax. And everybody was like, no, yeah, right. Don't, that sucks. And, thankfully, they listened. So there was a bit of an update about a week ago on this. And what is now going to happen is that we get to keep our dot j s syntax, thank goodness, you can use that m j s syntax if you want, but they're sort of reworking how our modules loaded in node, it's a kind of a big thing. And the big sort of the short and skinny of it is that your package JSON is going to have a type property in it. And you can set that either to common j s, which is the the way that it is now with the require, or you can set it to type module and then then that will flip it over to ESM. And that will allow you to and by doing that, it then tells your project How should I handle importing of my different files, there also is going to be a new dot c j s extension. So that if you have some older code that is written in common jackass, but you want to go sort of full throttle on ESX modules, you can still import that older module that exports code, you can still import into your ESX. So there's huge huge link to this on GitHub explaining all of the different stages, how they're going to roll it out. There's an incredible amount of of work that has gone into this like especially, I specifically follow Myles borns on Twitter, he's taken a lot of hack over this, I can tell just because people are not wanting the Mjs syntax, and it's a lot more complicated than than people think because of how modules work in Node right now, modules in Node right now are dynamic, meaning that you can import a module inside of a function, whereas ESM modules are static. And those working together and still working in the same way is harder than you think of implementing it. So I'm pretty happy with this this outcome and excited to finally get it in and node land. - -43 -00:28:40,229 --> 00:29:32,220 -Scott Tolinski: Yeah, Yeah, me too. I think, again, there's a common theme. And I said it before all of this things are going to take things that we do already. And it's going to make things super easy. So another thing that's going to be in my opinion, this is going to be sort of a game changer. So this one is absolutely fascinating. It's sort of a future that we all imagined a long time ago, when people first started building web apps. Like first we started talking about web apps and thinking like, okay, they're, they're like applications. And you know, maybe we'll the future will just be web or maybe the future is going to be native or what is the future of applications in general, on our devices. And here comes along progressive web apps and progressive web apps have allowed us to install applications onto our home screen. I know Android makes it a really easy experience. It throws the icon on your desktop. I think iOS is the same. Can you comment on that? - -44 -00:29:32,360 --> 00:29:45,360 -Wes Bos: Yes, it's as of the latest iOS, we finally have the ability to do it. I haven't tried it myself just yet. Maybe if you have some good examples of progressive web apps to install to the homescreen. Let us know at dex FM Yeah, - -45 -00:29:45,360 --> 00:32:28,740 -Scott Tolinski: I had level up tutorials as a progressive web app for a little bit, just to try it out. So I have the level of tutorials app installed on my phone even though I'm no longer necessarily a progressive web app right now. But that said I plan on on re rolling out some of that stuff too. But this is so cool because the actual meat of this thing is in sure we're getting progressive web apps installed. But now we're going to be able to submit progressive web apps to the Google Play Store. Oh, and unfortunately, from what I've been reading, it's not that easy. Yet, it's not as simple as just paste in the URL, let Google take care of the rest. Apparently, it's a Java based API that communicates through services with Chrome, it's already been shipped. So if you want to dive into this, you can get an app on the Play Store. That's a progressive web app. And they are called TWA. So sort of like a progressive web app is called a trusted web activity. This means is essentially a Chrome browser running on the phone that's in its own little environment, where nothing outside of that environment necessarily exists. So you're not, you know, it's a trusted application on your phone. So these things are really interesting. I dug into this a little bit. So the basics here are really that your trusted web app, I want to say I almost said try marry, for progressive, I don't even know messing up the words here. But trusted web activity needs to basically follow the Google Play Store policies, especially for payments in app purchases, digital goods, you can use your progressive web app in as a TWA, as long as it has HTTPS, a service worker with a fetch event handler, a web map, web app manifest file, a 512 pixel icon, a background, color property, and some other basic properties. And you also need to have a performance score of at least 80 out of 100, on lighthouse. So again, a big reason to use something that's going to get you that big old performance bundle, I recommend checking out your site with lighthouse all the time, that helps you find some of these slow downs. And believe it or not, there's actually several Tw A's in the Google Play Store already from big companies. This isn't just something really that normal people are using Twitter light is a TWA Google Maps go, which is essentially a lite version of Google Maps is a TWA, and Instagram light is also a T wi so we have from Twitter, Instagram, and Google all with the TWA. I think this is really super cool. I'm really looking forward to it. Because, you know, do you want to build your app a couple of times? Or do you want to build it once? You know? - -46 -00:32:28,740 --> 00:32:29,430 -Unknown: Yeah, - -47 -00:32:29,430 --> 00:32:31,590 -Scott Tolinski: that's that's a my thoughts on the subject. - -48 -00:32:31,680 --> 00:33:14,250 -Wes Bos: That's really exciting. I so over the last week, as a little experiment, I deleted the Twitter and Instagram apps from my phone and tried to just use the website. And by far, the fresh most frustrating part about it on iOS is the fact that as you scroll on, on an app, the URL bar goes up and down, and the amount of height you have on the screen in the viewport has changed. And it just, it results in such a janky experience. And it's not the fault of the people building them because the apps are actually really slick. And I'm assuming when you install these progressive web apps on your home screen is you get rid of the browser Chrome, and you just get the full screen. They're gonna act a lot more. I should try it. Yes. All these - -49 -00:33:14,250 --> 00:33:27,860 -Scott Tolinski: thoughts. My level of tutorials app is fullscreen. Absolutely no. No bar here. You can see it a hold it up to the camera right now. I'm sorry. For us it be? Yeah, it looks like a looks like a regular old app. Pretty sweet. - -50 -00:33:28,170 --> 00:35:37,610 -Wes Bos: I'm gonna install it right now. While we do the rest of the episode, and I'll uh, I'll let you know what it's like for Twitter. Yeah. So as you build your progressive web app, where are you going to log the tickets and track the progress of developing your view? Okay, you progressive web app. Yeah, I'm Scott in training here trying to transition to our sponsors here. So one of our sponsors today is clubhouse, which is available@clubhouse.io, forward slash syntax. And they seem to be the project management company that is going to make developers want to actually use project management software. So they sort of build themselves as project management software that developers for for building software that developers and project managers and everyone will, will love to use. You've probably use something like JIRA before. And it's very overwhelming with all of the stuff that's going on there. It's really hard for a project manager just to take a look at the dashboard and see where are we at for our q4 2019. What is currently blocked right now what are things that are people working on right now? What does our burndown chart look like? There's all this like kind of amazing information that you can gather from a good project management. So clubhouse does design beautifully. The API is really a really slick we've talked about this before. Even if you look at like century and things like clubhouse the design of these things, means a lot because it's really easy to actually use It. So if you want a fast, lightweight, powerful approach to planning your product to working with your product or working with everybody that's on your team, from the actual software developers to the project management, you want to check out clubhouse@clubhouse.io forward slash syntax. And what this is gonna do is you normally get a 14 day free trial. And with this URL, you're going to get an extra two months for free. So that's plenty of time to test it out and see how awesome this is and to try it out for your team. So thanks so much to clubhouse for sponsoring, check it out@clubhouse.io forward slash syntax. - -51 -00:35:37,730 --> 00:37:17,150 -Scott Tolinski: Thank you. Cool. So we're gonna get into a couple of CSS properties here that we're going to be, in my opinion, Game Changers. For CSS, everything's a game changer. This episode's full of Game Changer has been changed several times. This next one is going to be scroll snap, no scroll step is already in lots of browsers. And this one is really super cool. If you've ever done any sort of gesture based anything, you'll know that you have to have a lot of JavaScript to get this kind of functionality working in the past, maybe you're building a slideshow or something. And you want to snap and really lock on to a specific div. And this is also really useful for a lot of these fullscreen websites, you know, you have a full screen website, that you maybe only want each section to take up the full screen at a time. So you have one section, and then we start to scroll. Once you pass that threshold, the browser will then latch on to the next one. And if you were to take your finger off the trackpad and stop scrolling, it would snap down to the next one. This is really super cool. I think scroll snapping is one of these features. Again, that is something we had to do in JavaScript. And now we no longer have to bring in JavaScript to do it. We no longer have to have that extra code to make it happen. It's going to be in CSS. And it already is in quite a bit of browsers. I mean, pull up. Can I use here? Scroll snap? Yeah, so it's fully supported in Chrome as a version 69. And it is fully supported in Safari, iOS, Safari, Android, Chrome for Android. And some of these other ones Firefox has partial support edge has partial support, ie has partial support, believe it or not, what that partial support is, you're gonna wanna check out Can I use, but scroll snap is a is a good one opera, what are you doing opera is still in red. Come on, man. get it going. - -52 -00:37:18,980 --> 00:38:03,110 -Wes Bos: That's pretty cool. Oh, there's also this like scroll behavior property that you can now use on most browsers where if you jump to a specific part of the browser, it will just smooth scroll it, that's really cool. Because you they you don't need a smooth scroll library. When CSS tricks released their new website a couple months ago, they had it. So when you searched on the page, and when you sort of went through all of the you kept pinning enter on the search bar and going through all the different results that I found it would scroll you inside of the actual page, they since I took it off, because I think that it was too slow feeling for people that wanted to quickly jump through the page. But I thought that was pretty cool that you can control how the page jumps up and down. - -53 -00:38:03,149 --> 00:39:29,310 -Scott Tolinski: Yeah, super cool. Next one is this, this is a personal favorite of mine, because this is something that I've run into just about 100 times, I work with a lot of thumbnail images with videos and things that I would like to have and maintain an aspect ratio. Because now that we're in the world where our screens are no longer tied to different pixel sizes and things like that, you often have a div or an element, I think specifically, in my use case, the tutorial cards right? The series cards that on level up tutorials, it looks like a little card here. Now right now those cards are flexible. And I could I could I could design them to be, let's say, always fixed in the same size. But I don't want them always fixed in the same size and maybe just rapidly change on breakpoints. I just want to keep them and the same aspect ratio. And I want that aspect ratio to grow in scale. So let's say it's like a 16 by nine or something like that. You always keep it in that same aspect ratio, but it will increase in size. It's like, you know, when you are in Photoshop, and you hold the shift key and you make it bigger, that's what it is. So aspect ratio unit and CSS. Yes. All Yes, please. this blog post that we have in the course notes from Smashing Magazine is from March. So this stuff is sort of brand spanking new to be talked about. But again, I couldn't be any more excited for this because this is this is my wheel wheel house wheel. Well, I don't know one of those two. - -54 -00:39:29,399 --> 00:40:10,670 -Wes Bos: Next up is this is still probably coming. And it's a CSS nesting, which is pretty cool. So we've we've done nesting in sass for years, and both along with CSS custom properties, variables and and now that we're going to have CSS nesting, those are probably by far the two most heavily used parts of a preprocessor. And we will be getting those inside of CSS. It looks like the proposal right now is that you put an ampersand in front of your selector kind of like we do in test you sass, it's a little bit different than the sass syntax, which is fine, because you can just take three minutes and learn what the syntax is. And then we're going to have it built into CSS. - -55 -00:40:10,800 --> 00:41:14,070 -Scott Tolinski: Yeah, can we talk about how, like, the browser developers are learning from the best things of what we do? So they're not just saying, okay, you know, all of these tools that are now established, as, you know, serious best practices are ways to do things, we're now taking these things, and we're just going to throw it in the browser, we're gonna make it easy on you, because everybody is doing it anyways. And if you're not doing it, then you're going to really understand the joys of nesting. Now nesting can get out of control. It's one of those things that you'll typically have a little bit of growing pains there, when you're you're picking up in your new Dev, you, you want to just nest everything. And there's this weird middle space between nesting everything and nesting nothing, or it's an absolute Yes, but and it makes everything perfect for you. And you just have to write so much less CSS. But if you're not writing nesting CSS in some sort of capacity already, I would get up on this because I cannot imagine going back to a world where I have to write all these nested classes without CSS nesting. It's Yeah, It's madness. I can't imagine doing that right now, - -56 -00:41:14,150 --> 00:41:59,150 -Wes Bos: you're for sure gonna see some people that get salty about adding this the language because they refer to it as what's called a foot gun, which is a gun that you can shoot yourself in the foot with. Because like, you can go bananas, nesting things. And I certainly when I taught a boot camp, I would we would show nesting. And people would just start with the body tag and start all the way all the way home. And then you go, oh, I've totally forgot. Don't nest everything, only nest when you actually need it. And this is just another thing I think beginners are gonna have to learn. So like why do you need nesting? And what situations would you use this versus just using a plain old selector? So definitely has some some potential for misuse. But we've all been misusing it in SAS for years already. So not a big deal there. In my opinion. - -57 -00:41:59,340 --> 00:42:37,860 -Scott Tolinski: Yeah, it just takes a little bit of a little bit of effort to I don't know, this is one of those things. That's once you get burned by it, you're like, Oh, yeah, don't do that. So that's pretty much it. There's, there's a lot of new stuff. And if we didn't get to the one thing that you were talking about, don't worry, I feel like there's enough here to do another episode on this at some point in the future, because our industry is constantly changing and constantly evolving. And it's important that we evolve and change with it, make sure that we stay up on the stuff that's latest. So if you are interested in any of this stuff, we have a lot of links in the show notes, check out a lot of cool stuff. I'm very excited about the future of the web. I always talk about that. So yeah, I don't have anything else you want to get into sick pics. - -58 -00:42:37,980 --> 00:44:00,990 -Wes Bos: Yes, absolutely. So my sick pick today is going to be a YouTube channel called the punk rock MBA. Oh, and this is a guy Finn mcentee and he puts together these awesome videos about the history of music in general. Like when I was a kid, I would just listen to this guy, Alan Krause, and he would have the show called The Ongoing History of New Music. He's actually still doing it. But I often listen to it. And I'm like, I don't know anything about these bands, because they're just way before my time. And I feel like this new YouTube channel, the punk rock MBA, it goes into the bands over the last maybe 15 years or so. And he goes, he has like videos like how saosin changed the game or what killed new metal? Like why are there not bands like corn and Slipknot anymore? And how did blink 182 get so big? And it's just it's just like, nah, nah, just every time I watch one of his videos, it just feels like oh, it because there is so many of us. I met somebody at a conference last week. And he's like, Yeah, I was in a hardcore band. And now I'm a web developer. And I think probably, I don't know 70% of web developers used to be people that would go to shows and watch hardcore bands and stuff like that. And this look on that whole industry is just very entertaining and very informative. Interesting. - -59 -00:44:01,410 --> 00:44:16,500 -Scott Tolinski: Yeah, I'm fascinated. I you know, I'm a huge punk fan. I grew up with a lot of like, you know, Operation IV sort of stuff and, and maybe not hardcore hardcore, but like, I've always get a punk fan and so I'm gonna have to check this out. This is pretty sweet. Yeah, he just - -60 -00:44:16,500 --> 00:44:34,770 -Wes Bos: goes into like, like what killed pop punk like some 41 newfound glory Simple Plan. What killed Christian core because there's like the sick huge part of the hardcore scene was just these Christian bands from the tooth and nail record. What killed skate punk? What killed post hardcore, so good night. - -61 -00:44:34,800 --> 00:45:23,130 -Scott Tolinski: I love it. If you want to find some good punk music, or like pop punk music This is not like punk punk. But it's a very very I don't know very catchy, man. Yeah, it's just got that he gets called masked intruders. Let me double check on that. They are like straight up fun pop music or a fun pump, punk pop music. That couldn't be any better. It's it's like the funniest thing. About this masked intruder band is that they're all wearing masks, and they have aliases. And songs are all about robbing people and like running from the police. So the whole thing is sort of like it's not necessarily a joke, but it's really good. It's just great they do some some great little love songs. The masked intruder Yeah, definitely. I like a lot of their albums there. One EP was sick. So great there. - -62 -00:45:23,400 --> 00:45:34,680 -Wes Bos: I've been loving the pop punk lately. I just discovered this new band from Toronto called pop me up. Yeah. And they've got a song called free at last. I just love it. It's just pop punk is so good. It is. - -63 -00:45:34,710 --> 00:48:37,680 -Scott Tolinski: Yeah, I know, did ascendance any of that stuff. One of my favorite punk albums of all time was proper Gandhi, one of the property albums. I love all that stuff. Yeah, so my sick pick to get out of the the punk talk. I have a fun podcast suggestion. Now this is a different. This is a different kind of podcast for me considering all of my podcast has been about like cheating, swindling, hacking, that sort of thing. This is gonna be a lot more fun, a lot less dark. This podcast is called finding Drago. And if you've never heard of this thing, it is hilarious. Now, it's one of those short series ones. There's only seven episodes so you can breeze through it. And it's not a huge commitment. I breezed through it while I was in San Francisco. And what it is, here's the premise of the story. The premise of the story is that these guys who are podcast hosts stumble upon a Wikipedia entry for the movie rocky for and which somebody on Wikipedia mentions a book that was a sequel to essentially rocky four. But it's all about the bad guy in Rocky four. I believe His name's Ivan Drago. And just thinking like Who the heck would write a book about the bad guy from rocky four. And so what they do is they start to look because they declared that this book is a lost masterpiece in Wikipedia. So whenever they they're like okay, what is this weird book that someone's talking about on Wikipedia, they start to dive into the book. And it's just a huge web of confusion, because they stumble upon like Goodreads reviews where there'll be like, I was walking in Costa Rica and a vagabond handed me this book, and it changed my life. And it's just so bizarre. The whole thing just unravels to the point where you're just like, okay, is this this serious? And it is, it's a good time if you're if you're looking for something that sort of geeky and sort of fun and just like not serious at all, finding Drago was a really good investigative investigative podcast they refer to as like serial, but stupid. So it's, it's really super good. I like this one quite a bit. That's my sick pick, finding dry go check it out. Nice little quick one. Shameless plugs. I have a course on grid summit that is out grid some is the sort of view j s counterpart to Gatsby for building static sites in view. This course gives you everything you need to know about getting up and running with grid Sam, you can see about how it differs. It uses graph qL for the data layer, we go into a lot of graph qL basics if you're new to that, but one of the coolest things is you can get a ton ton ton done with grid seven absolutely no time because it leaves a lot of the inner workings stuff up to just basic configuration options. You pass it a path, you tell it to do something in settings, you don't have to write a whole bunch of code to make things like that happen. So I found that you can write extremely efficient sites with grid summon Vue JS extremely quickly, totally extreme at level up tutorials comm forward slash pro sign up and get that as well as every other course. Yeah, that's what I got. - -64 -00:48:37,830 --> 00:48:49,890 -Wes Bos: Awesome. Oh, sick payer shamelessly. Plug all of my courses, West boss.com for slash courses. You'll see a list of all the free and paid ones. Sign up for something that interests you. And keep on learning. Keep on - -65 -00:48:49,920 --> 00:48:51,720 -Scott Tolinski: learning. Love, laugh, live learn. - -66 -00:48:53,190 --> 00:48:59,250 -Wes Bos: That's oh my gosh, that needs to be a sticker. Live laugh, love learn. Love it. - -67 -00:49:00,210 --> 00:49:02,580 -Scott Tolinski: Get over it. The plaque over my front door. - -68 -00:49:03,030 --> 00:49:08,190 -Wes Bos: Oh, man. That's great. Cool. All right. Well, thanks for tuning in. We'll catch you next week. Please - -69 -00:49:10,170 --> 00:49:19,920 -Scott Tolinski: head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax139.srt b/transcripts/Syntax139.srt deleted file mode 100644 index 3a505c4c5..000000000 --- a/transcripts/Syntax139.srt +++ /dev/null @@ -1,124 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Unknown: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. - -2 -00:00:23,579 --> 00:00:24,480 -Totally in ski. - -3 -00:00:25,920 --> 00:00:55,560 -Scott Tolinski: Welcome to syntax in this Monday hasty treat, we are going to be doing something we haven't done before. This is an ask us anything or ask me anything. A UVA ama, where we have compiled a bunch of tasty questions for you. And these are going to be sort of personal questions. They range on all sorts of different stuff could be really personal technical, as Wes has here, the sky is the limit. So my name is Katelyn ski. And with me, as always, is at West boss, - -4 -00:00:55,650 --> 00:01:06,450 -Wes Bos: everybody. I'm excited to answer some of your questions today, this is gonna be a little bit different than the typical potluck as these ones are a little bit, they tend to skew a little bit more personal. So it should be fun. - -5 -00:01:06,620 --> 00:01:13,830 -Scott Tolinski: Yeah, this should be a blast. So do you want to get into it by first talking a little bit about our sponsor today? Which is long? Yes. - -6 -00:01:13,830 --> 00:02:26,910 -Wes Bos: Yeah, we so Log Rocket sponsors, tons and tons of our episodes. And as you know, they do all of your error and exception tracking. And one kind of cool thing that they do is they have like this playback, where you'll be able to see what did the user do did in order to actually cause that error. And one of the real thing I want to focus in on this episode is their on prem, which are is on premises, because sometimes, maybe Scott and I forget that, like companies can't necessarily just reach for any old library or any old hosting provider, any cloud, these things definitely need to be approved. And especially if you are sending data outside of your application to a third party service. So one thing that Log Rocket does offer is what's called on premises mean that like, you can even get like GitHub on premises and companies that don't want their data going outside of their own servers, then you can get Log Rocket installed on your own server and on your own on your own premises and run it from there. So that's absolutely something that they offer. And if you want to check it out, go to Log Rocket, that's logrockt.com forward slash syntax, you'll get 14 days for free. Thanks so much to Log Rocket for sponsoring. - -7 -00:02:27,030 --> 00:02:42,630 -Scott Tolinski: Cool. So let's get into it. Some of these Ask me anything questions now? The highest voted ones? One we're going to take on? It says, besides coding and teaching, do you have any other source of income like stocks, bonds, crypto, etc? Me personally? No. - -8 -00:02:42,630 --> 00:02:44,340 -Unknown: Try to think about this. I - -9 -00:02:44,340 --> 00:03:25,950 -Scott Tolinski: don't think so. No, it's it's just what I do for work. We do have some real I mean, we have retirement accounts that are all invested. But I don't personally hold any stocks. I actually do it. I take that back. I hold some athyrium. But I mean, you know, I I'm not, I'm just holding on to it for the future. Or if it does anything, I'm not I'm not actually actualizing any of those things. So technically, it's not making any money. But no, I don't I don't have any additional income. You know, we've thought about owning rental properties or anything like that. But right now, we're just in a financial situation where we're, you know, we're just paying for our stuff. We just paid off student loans. And, you know, just trying to build a nice retirement little base here. - -10 -00:03:26,010 --> 00:06:03,840 -Wes Bos: Yeah, my wife and I bought an income property, I don't know, maybe three years ago, four years ago, and we're all excited about it. And it was good we bought like a rent out house Actually, that's how we met the contractor that works on our own house. We bought a totally rented house and move tenants in and everything like that, and I'm fairly handy and I can I can fix stuff and we had it for about three years and we started getting sick of just the owning a rental just because of things that pop up and having to like deal with like the furnace breaking and plumbing issues and I know that you can get like a what's it called property manager, but we were we were just kind of sick of it and also the the place that we did buy appreciated significantly like a third of the price that we paid nice, it just went up and we were really happy about that. So we're like, well, let's just kind of like take our huge appreciation and and run with it. We actually just bought a a cottage up north in Canada, which is kind of like a vacation property on a little lake and we took the money from that and we put that into to that so that's kind of one thing we are considering doing renting out the cottage but we have we don't even have it yet so we haven't gotten that far into it. So that's one source of income. I've flipped bikes on Kijiji, so I buy older road bikes and then fix them up and then sell them. So that's kind of one thing I do for a little bit of pocket money. And then investments I've I had a bunch of crypto before it got popular because people Bought products off of me early on in Korea. Like, like, I probably got, like, I don't know, $400 worth of sales. And it went up to like four or $5,000 at the height of it. And then I bought a whole bunch more at the height of it and then took a bath on that. So pretty much. I still have a bunch. I have a bunch of Bitcoin, but it's it's went down significantly. I'm sorry, I think I've sort of like evened out based on the amount I earned and the amount I lost. I think Bitcoin is really cool. But it's so every time I use it, it seems like such a pain in the butt. It seems like a huge, it's too technical. Yeah. And I tried to talk about this on Twitter, and I just got assaulted by all these like hardcore Bitcoin people, or crypto people and say you're using the wrong one or whatever. And like, if I can't figure it out, if I'm I'm very technical if if it's frustrating for me, there's no way that it's going to catch on for for other people. So I'm very I wish that this whole crypto wouldn't become a big thing. And I'm still very bullish on it. But right now, I'm not putting any more of my money or time into it. - -11 -00:06:03,870 --> 00:07:14,160 -Scott Tolinski: Yeah, yeah, you just put it into it. And then if it does take off, and you'll you'll take that when and whatever. We've just had so much high interest debt for so long that it's like, like a high interest that was doing loans. My wife has a PhD. So that is like I have a mat or not a Master's, I had a just a bachelor's degree. And she has a PhD. So we both had student loan debt, and my student loan debt was okay. But hers ventured into sort of high interest territory in some regards. And there was a lot of it. So, you know, we just been focusing on paying that off so hard. And then we had a, for our mortgage, we had a like another supplemental loan, that was also a variable rate, and the rate just kept going up. So we've just been like, focused on getting rid of that stuff. And we just refinanced our mortgage. And like, I think, honestly, what is it may may, here is the first month where we don't have any high interest debt. For the first time since I've gone into college. I mean, it's amazing. I don't have any other loan or anything, and Courtney's just leasing hers right now. But we're like, oh, we're happy to be out of that. Now. It's like, okay, we get to figure out what we get to do next, and, you know, shove every year of retirement accounts and think about the future and that sort of stuff. - -12 -00:07:14,250 --> 00:08:05,190 -Wes Bos: I'm very anti debt. And like, I was, I was very lucky to like, when I was a kid, I saved all of my money. And then I have a job and a really well paying Co Op all through school. And I paid off all of my student debt by the time I graduated, because I was building websites for people, which is really, I know, super lucky, because I think I got off on a bit of a head start, my wife had a whole bunch of debt. But we paid that down pretty quickly after we got married. And now all of our investments, we have a whole bunch of different types of investments for the business, like just cash that we have sitting in the business, investment or retirement, stuff like that. And almost all of that is sitting in what's called index funds, which is a mix of stocks and bonds. You can look up Canadian couch potato, if you're interested in how that works. I know that they have a similar thing in the states as well. - -13 -00:08:05,220 --> 00:08:47,700 -Scott Tolinski: Yeah. Yeah, it's been a big thing for for us. I mean, I've always, you know, at any job I've ever taken, taken the max contribution limits and all my retirement accounts, when I worked at U of M, this is actually kind of outrageous. When I worked at the University of Michigan, when I first started working there, they had a match and double for the retirement account. So they matched your contribution and then doubled it, which is outrageous. I hardly made any money. When I worked there. I was making like, you know, 24,000 a year or something and my retirement account, like bubbled up just because of how much the University of Michigan was contributing. They didn't stop that practice. Unfortunately, I think they were losing way too much on it. But I think that was really a cool thing that they did. - -14 -00:08:47,900 --> 00:09:14,520 -Wes Bos: That's awesome. Let's see what other question we have here. That was 10 minutes. For a tasty treat. That's fine. We can do we can do lots of these if we really wanted to. Oh, yeah. Next question we have is from petite. Thank you for the pronunciation on that. How do I build my online presence? I never know what to tweet or to write about on my blog. And this is the third most popular question. So a lot. I think a lot of people are feeling this as well. What do you think, Scott? How do you build an online presence? - -15 -00:09:14,610 --> 00:10:39,960 -Scott Tolinski: I think you build an online presence through quality content and consistency. That'd be the way you provide value for people and you do it consistently. And it will pay off. One of the things that that I really focused on again, when I was first starting was you don't want to think about how do I get 10,000 followers tomorrow? You want to think how do I put out something every single week at a certain schedule at a certain time so that people start to latch on to it. And the people who succeed are going to be the people who do that for 10 months. And if they don't see any growth after 10 months, when they may not they don't see a growth but if they don't see explosive growth after 10 months or five months or whatever, they just keep doing it and they keep providing value because as long as you're providing value and you're doing a good job, and you're growing and you're you're continuing to do this stuff at a regular consistency, you will find that footing, you know, it just takes that effort to do it and to grow day after day, week after week, week after week, and then you'll look up and like I almost have 300,000 followers on YouTube. Now, how the heck did that happen? I have no idea. I never thought about that. It was just like, Okay, I got 100. I got 10,000. I got 50,000. I got 150,000. Now I'm almost at 300,000. And again, I don't I almost don't even look at the numbers, because it's not important. It's about the content and consistency. Yeah, I - -16 -00:10:39,960 --> 00:12:02,130 -Wes Bos: think obviously, that I think that's probably the most important one is that just day in day out, keep doing that that thing. I think a lot of people also think that the tweeting is about them. If you look at all of the stuff that does well, for me, it's always How do I help people who are following me? And that's why Scott's videos, Scott has 300,000 people on YouTube. It's not because he's talking about, like, what he's building or how awesome a developer he is. He's like he's legit trying to help people move forward in their careers and make them better web developers. And I think if you're very selfless about, like helping other people, there's so much that could possibly be there. If you don't know what to tweet, like, What problems do you run into? What How did you solve them? And how can you help other people with that, I think also tried different types of content, I sort of stumbled into the hot tip, which is how I got a majority of my Twitter following is just, I just like, posted something and it sort of did well. And then I posted a couple more. And those did super well. And I was like, wow, like this is actually an approach. Whereas like I had been tweeting probably like four or five years before that, and I had moderate success. But once once I tried different types of content, you're gonna hit a nerve with something and then that's going to be your thing. Don't just copy whatever other people are doing because I think if somebody is already doing that, you see us on youtube all the time, people are putting little red circles around things or looking shocked in this - -17 -00:12:02,640 --> 00:12:31,710 -Scott Tolinski: thing like I want to go on a quick rant about those shocking is definitely is my least favorite thing in this entire planet. If you were to if you were to say what is your your most annoying thing to you? It's the like Macaulay Culkin look on the YouTube thumbnail. Like I can't believe this happened. Like, oh my god, I could rant about this forever. It is so annoying to me. I wish there was a report button that says this thumbnail makes me upset because like I would report all of those videos for making me upset. Yeah, I saw - -18 -00:12:31,710 --> 00:12:59,670 -Wes Bos: an article the other day that that YouTube is attempting to make the results more useful. And I think that they catch on to stuff like that, like I guarantee there's someone at Google writing a algorithm right now checks how shocked the person is. And, and they'd write an algorithm for little red circles that they put around things or, or highlights like these things, their tricks, somebody figured it out. And someone went a long way with that little trick. But almost always these things are, are sort of tapped out by now, - -19 -00:12:59,820 --> 00:15:36,090 -Scott Tolinski: hopefully. So this next one is from Steven, this is a fun one. What is your favorite tasty treat as in actual food. And before I get into it, my actual favorite food is I'm going to share one of my most embarrassing stories with all of you because this is maybe an a hilarious moments in my life that everyone else gets to laugh at. And I can laugh at now. I was taking Japanese in college in my sophomore year of college and we had one lecture a week that was in a large auditorium classroom, if you've ever seen those, it's like the giant auditorium. And this thing was filled it had, you know, I don't know a couple hundred people in a class. It's it's a big class. It's not a terrarium. And there was an instructor who was a really cool guy. I'm gonna say he's a cool guy. And he was just asking questions, and I happened to be not paying attention that day. I was coding. Like, in one of my music tech classes, I was really into this music tech programming thing that I was working on. So I wasn't thinking about Japanese. And he signals me out in front of everybody in the entire class, this entire auditorium. He picks me and he points at me. And he says, What is your favorite food? And I say shrimp in Japanese. And he's like, oh, shrimp is your favorite food. And I was like, yeah, shrimp, and the entire classroom starts laughing. I mean, keep in mind, he's asking this in Japanese. So the entire class is laughing. And at this point, I'm like, Ah, oh, no. What are they laughing about? What did I do wrong? Well, he didn't ask me what my favorite food was. He asked me what my favorite thing was. What's your favorite thing? And I said shrimp. And everyone's like, he's like, so your favorite thing is shrimp. And I was just like, yeah, shrimp of vari I love shrimp. And he's just like, everybody found that hilarious. And then I had to like once I got through everybody laughing at me. You know, I poked my my friend next to me and I was just like, what did I just say? Like what what just happened? there? My favorite fruit is not shrimp at the time that's the only thing I could think of. I think my favorite food is honestly sushi I go to sushi a lot and sushi at the CG market in Tokyo I we have this sushi place and in Denver here that I live by that has they fly it in Daly from Tokyo and the fish is just amazing. So if I could pick anything sushi, I love me some fatty tuna. Any of the just the sashimi. Is there any of that stuff? I'm all in? I'm 100% in. Yeah, - -20 -00:15:36,119 --> 00:15:50,880 -Wes Bos: it's it's so hard for me to pick a favorite i think is sushi probably in my top five as well. But if if I were to say like anything, it would probably be like a nice charcuterie board. Yeah, Salamis for shooto Yeah, nice cheese's. Along with that. It's probably what I my favorite food would be. - -21 -00:15:51,029 --> 00:15:54,450 -Scott Tolinski: I mean, that's got to be up there for me too. I'm a big fan of the meats. - -22 -00:15:55,770 --> 00:17:23,060 -Wes Bos: Got these meats? If you not have not ever seen people, like almost every day somebody sends me this YouTube video of Mark Zuckerberg. Have you seen that? burgers, smoking meats? Like a like an eight hour live stream on Facebook and somebody cut all of the times are these meats, smoking these meats, smoked meats, I love some good meats. And it's just like, oh, you're talking about meats? Yeah, just google Mark Zuckerberg meats. And you'll see he'll just laugh your pants off. Let me find another good one here. This is one one question I've answered a couple times I don't think I've ever talked about in the podcast West, let's talk about the plus or the cross symbol on the start of your prompt for the cobalt to what's up with that. So on my Zed sh prompt, I forked it from I think like the agnostic or and the agnostic had like a prompt that was like a lightning bolt or something. And I swapped that out to be a cross because I'm a Christian. And I thought like, Oh, just swap that out to be a cross as I didn't really want the lightning bolt. And I just left it at that. And then the theme itself got really popular. And everybody just left it there. And if people are just kind of like, what's the deal with this, this cross in the thing. And I've been meaning to make it like an environmental variable. So you can swap it out to whatever it is that you want, or just like fork it yourself, but I just never have gotten around to it. So there's no much else to towards that as I thought it would be cool one day and it sort of caught on. - -23 -00:17:23,430 --> 00:18:18,690 -Scott Tolinski: I love the I use a lot of emojis in mine. And like I've actually it's funny because I was using fish shell for a while. And then when I got my new computer, I decided to go back to z sh, as we say and really add and I went back to z sh and I installed a bunch of plugins to make it behave like fish. One of the things I really loved about fish was like the auto completion and the history stuff that it gave you. But you can get all that stuff through plugins for for z sh. The reason why I went back was specifically because fish has like really strict ways of doing everything. So if you were to copy a command that was written in bash and paste it in, it would work in NZ sh and bash, but it wouldn't work in fish. So I always found myself having to rewrite with the fish syntax. That'd be a giant pain in the butt. So now that I've configured my csh correctly to use those fish features, and like it's made me it's made me a little bit happier. - -24 -00:18:19,070 --> 00:18:21,450 -Wes Bos: Welcome back. Yeah, good sign. - -25 -00:18:21,630 --> 00:18:31,410 -Scott Tolinski: Yeah, I know the fish is great. I still love it. I'm using a but to be honest, z sh feels nice to be back. I was on it for a long time. And I'm happy to be here. - -26 -00:18:31,890 --> 00:18:33,960 -Wes Bos: In Canada, we call it Zed. Sh. - -27 -00:18:34,140 --> 00:18:38,300 -Scott Tolinski: I yes. And you're wrong. Because that is too hard to say. - -28 -00:18:38,460 --> 00:18:39,860 -Wes Bos: It is too hard. I agree. - -29 -00:18:39,960 --> 00:20:23,040 -Scott Tolinski: Here's one from Arthur, how do you get out of a rut? How do you get out of it, right? Because here's how I get out of a rut. I, I change it up, I switch it up. So if I'm in a rut, I'm not feeling like the work I'm doing today is very positive. When I'm not focusing or I'm not in it, I'll change my environment, I'll go somewhere else. So I'll work at a coffee shop. When we used to work at an agency. And like there were some days you're just like really feeling it really feeling heavy, you get a little bit of a bad posture lean on because you're maybe getting a little sleep, go for a walk, change it up, switch it up. We used to just say, oh, okay, let's actually work from a different part of the office. Or maybe let's work at a coffee shop. I mean, the other Dev, we would hop hop on over and just walk to a different coffee shop and get some work done for a little bit. And oftentimes that will change an environment can pull you out of a rut. If you're in a deeper rut, a rut that like takes a lot of time. Some of the things that we've talked about before in terms of self care can be really important. My wife often talks about these strategies. She is a doctor of psychology. So she is very smart when it comes to these things. So she will tell me if you're feeling like this. What you need to do is get up get dressed, make the bed, get yourself ready for the day as in, do your hair. Don't just throw on sweatpants and a hat. Oddly enough, I'm wearing sweat pants in a hat right now. But don't just throw in sweat pants to the hat, do your hair, do put on some nice clothes and just feel like if you're not feeling outwardly good, you want to look outwardly good, because it may not seem like it will do a lot, but it does a lot. You have to respect yourself in those sorts of ways. And it will do a little bit of work to help pull you out of that rut. - -30 -00:20:23,040 --> 00:21:48,030 -Wes Bos: Yeah, I think I'm in a really good place where if I'm feeling in a rut with the work that I'm doing, I just switch to something totally different. I'll go record a YouTube video, I'll start building something that is I basically is like, like, what would I do if I had absolutely nothing to do right now good. Sometimes I'm sitting there. I'm like, Alright, I'm two months in on working on this course I have 5000 emails I need to reply to someone on Twitter is being a jerk. And I'm like, Ah, this is all black right now. And then for me, that's a rat, where I'm like, I don't feel like working on this thing right now. And everything else is making me angry. So what I do is I just like switch to like all the stuff that Scott said, but also just switch to doing something that's absolutely totally different. Maybe I'll work on a personal website, I'll record a YouTube video, I'll explore some new technology that is interested in and for me, that's always just enough to sort of reignite whatever passion that I have. And also, I think sometimes it's just a break. Like, I can't tell you the amount of times where I've just like, quit a day at 330. And then the next day, I come back at it, and I feel a lot better. So for me, it's just sort of getting away from whatever it is. And I understand not everyone is able to do that. There's people that like, I see the next month of my work, and it's all the exact same thing. And I'm so sick of it. And I don't want to get into it. And for those people, I would say like maybe try to do a tutorial, have some sort of side project, talk to your boss about going to some sort of meetup or something like that, because I think that will really go a long way. - -31 -00:21:48,480 --> 00:23:02,700 -Scott Tolinski: Yeah, I think you're I mean, I think it's important to get away in those sort of ways. And we had a environment. One of the offices that I worked in was like a huge, like 3000 person office. And it was a giant building and it was right next to the highway and there was nowhere to go. So you were just sort of stuck in this office. And like one of the things I like to do to get away in that office was to simply just pick up my computer and go work in the lobby or the cafeteria or somewhere else I got away from my environment that I was in and change it even though it wasn't like a drastic change. It still made a difference. All right. Well, that's it for this Ask me anything. We are going to pick back up with some more of these questions and an episode in a couple of weeks. So if you didn't hear your Ask me anything question answered, No worries. We have another one coming in. If you enjoyed this, let us know we will do more of these asked me any things where you can ask us some more personal questions, maybe less technical questions. Otherwise we will see you on Wednesday, where we are going to be answering your technical questions in a potluck episode. So thanks so much for listening and we will see you on Wednesday base please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax14.srt b/transcripts/Syntax14.srt deleted file mode 100644 index dadab4808..000000000 --- a/transcripts/Syntax14.srt +++ /dev/null @@ -1,564 +0,0 @@ -1 -00:00:05,970 --> 00:00:11,250 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:13,679 --> 00:01:13,620 -Wes Bos: This episode of syntax is brought to you by Lauren Stewart's new course called the intro to the serverless framework, what is serverless? You've probably heard people saying serverless Functions as a Service or Cloud Functions. And this is essentially something that runs on Amazon's AWS and you can write these functions with you can write them with any language, but this one is specifically node j. s. So we'll talk a little bit more about that as well as have a couple courses taken away part or partway through the episode. Hello, everybody, welcome to another episode of syntax. Today, we're gonna be talking all about our stacks. This is actually something I get a lot of questions about. And it's it's something that I recorded a quick little YouTube video on about over about over a year ago. And it just explained like, what is my stack? What are all the different pieces that get it up and running and Scott has also built as his own course platform. So we're sort of gonna dive into the nitty gritty details of what we use and why we use these things at a different level. So welcome, Scott. How you doing today? - -3 -00:01:13,620 --> 00:01:28,170 -Scott Tolinski: Oh, yeah, I've actually honestly been doing better just getting over the entire family, Doug's included with food poisoning, so just slowly returning to normal life here. So yeah, but yeah, - -4 -00:01:28,470 --> 00:01:28,980 -Unknown: overall, I - -5 -00:01:28,980 --> 00:01:31,560 -Scott Tolinski: guess it can't no other than that, I can't complain. - -6 -00:01:31,710 --> 00:01:35,130 -Wes Bos: That is that is dicey. So it was rotisserie chicken. - -7 -00:01:35,520 --> 00:02:08,190 -Scott Tolinski: Oh, that that's the suspect right now is either that or baby carrots. We honestly have no idea we're trying to think of like what are all of the things that my wife and I and the dogs all dogs live in and there's only a couple things so it but the baby didn't get sick? Yeah, the baby, thank God, that, you know, the baby has been like the cause for us not sleeping for so long. And now all of a sudden, like, the other night, we were just like, thank God, the baby is like, the baby is taking care of himself. He's like the most functional person in our family right now. - -8 -00:02:08,399 --> 00:02:41,720 -Wes Bos: Yeah, we we had the stomach flu, like the entire family when we had like a six month old. And she was just, everybody's just puking and like passing out and like, I remember like googling, like, Is there like a nurse that can just come and help us because it's just the worst feeling in the world. And since then, I realize if you're a parent hot tip, buy a jug of Pedialyte, which is like Gatorade for kids. Because it's like one of the only things that will help your kid get hydrated when they're always puking and thought, - -9 -00:02:41,970 --> 00:02:43,770 -Scott Tolinski: Oh, I didn't realize that. Yeah, - -10 -00:02:43,770 --> 00:02:46,890 -Wes Bos: hot tip. That's my sick pick for today's Pedialyte. - -11 -00:02:48,630 --> 00:02:49,380 -Unknown: Big Big. - -12 -00:02:50,160 --> 00:03:12,690 -Wes Bos: Let's get into our stacks. I thought maybe we'll we'll kick it off like explaining a little bit about our stacks like what what does it all entail from selling stuff to viewing? And I don't know, I know that we both have affiliate systems built in. So do you want to just give us a high level overview of of your of like, what it does not necessarily the technology, but what your stack does? - -13 -00:03:12,750 --> 00:04:16,880 -Scott Tolinski: Yeah. Yeah. So one of the reasons when I was first starting to look into building this, actually, the site used to was originally on Drupal. And it's just because it's what I was using all the time. So it was easy to put it on Drupal and use their importer to grab everything from YouTube. And then when I started to research, like building a new stack, I had all these like pros and cons of maybe like using a, you know, like Shopify, or something like that for my store. And then I started to weigh how much custom stuff I needed to get in there, and how much real tweaking I would have to do. Yeah, integrating with those API's and, and, you know, I have all these these big plans of, you know, automating a ton of stuff. So I can push it up to YouTube, and then it automatically collects all my stuff. So yeah, big, big picture. I just, I needed a sort of a really flexible system that I could customize entirely and have it work really nicely with the YouTube API specifically, but as well as that some some others. So that that's pretty much high level of sort of why I wanted to go custom with this. But yeah, - -14 -00:04:17,310 --> 00:04:29,220 -Wes Bos: that's pretty sweet. And then you have, like, you have obviously the the checkout experience that you've built in, and then you have the the viewing experience. So someone that signs up for your course they're able to get access to the courses, correct? - -15 -00:04:29,310 --> 00:05:18,319 -Scott Tolinski: Yeah, so there's a pretty intricate role system, an account system. And so there's maybe several major components where you have tutorials, the playlist, right you have the store section, where you have products, you have user accounts, which tie in what they get access to what they don't get access to. And sort of how those things interact and work together. Because if you are pro you get all of the products on the site for free. So you know these these role systems and things that need to I'll be interconnected between the store and the site itself, which are actually now one site, they used to be two entirely separate domains. I know, we mentioned that at the beginning of the first few episodes of this podcast, when I migrated them together, it's actually one of the best decisions I've made for the platform is moving them together. - -16 -00:05:19,319 --> 00:05:38,699 -Wes Bos: That's really neat. I just added a card on our show list ideas of role system. So that's something I get questions about a lot, where you have like intricate, being able to edit things and not add things, or you can view it but not updated. Or you can create one but not update it more than three times. So it'd be kind of a neat episode to chat about. Yeah, how to accomplish that. - -17 -00:05:38,909 --> 00:06:07,439 -Scott Tolinski: Yeah. And I and another thing, I think would be interesting is talking about sort of, like Administrative Tools, because that's a whole nother section of this site that I'm almost bummed people don't get to see because I put so much work into this admin tool section. Yeah. And I'm the only person that uses it. And, and I was like, totally, like, ignoring the design aspect of it. And recently, I went through and I made this whole, like, admin theme for it. And it's very, I don't know if you know, the style outrun, which is like outrun or vapor wavy, it's like, very like 1980s. - -18 -00:06:08,310 --> 00:06:13,199 -Wes Bos: Looking like like this. It's like, an AR game where the lines are coming at you. - -19 -00:06:13,259 --> 00:06:28,860 -Scott Tolinski: Yeah, it's exactly like that. And, and I would show it off more, but it's not totally done. But I just started, like doing all this stuff for the admin section. And I'm like, no one's seeing this. But me. I guess maybe I shouldn't spend so much time on it. But it's a nice little playground. Yeah, - -20 -00:06:28,920 --> 00:06:40,980 -Wes Bos: well, yeah, whenever I have like a day where I just don't feel like doing anything, what I'll do is I'll tear off some sort of like, wish list item of mine for my admin back end and implement that. It's always fun to do that sort of stuff. - -21 -00:06:41,040 --> 00:06:45,660 -Scott Tolinski: Yeah, totally. Yeah, absolutely. So what about you? What's your what's the high level of your stack looking? - -22 -00:06:45,959 --> 00:08:12,060 -Wes Bos: Yeah, so I initially a lot of people ask me, like, why do you build your own when there's so many platforms out there. And I initially built my own because my first product was a book and videos, and there was no, there's nothing that would have the ability to do both of those. So that's kind of why I initially did it. And it's sort of morphed into, I lovingly call this thing the boss monster. Because it is a entire stack that powers all of my courses. All of my paid video courses, as well as all the freebies, you have this kind of unified dashboard, where you can log in, and you see all of your courses for all the different domain names, I do things a little bit differently, where I launch a different domain name for every single course that I do. And what I was previously doing is that every one of my free courses, and every one of my paid courses, I think I had like two out at the time, they were all all of the free ones were just like, static site, like had a gulp file that I will Gulp out. And then all of my paid ones were separate note instances. And that's just a as you know, it's a nightmare to have to maintain these things even with like Git and version control. So I sort of like peeled it back in and rebuilt it to handle multiple domain names. It's all just like one instance running behind all of these different domain names. So again, I like I have pretty custom use case for the way that I approach things. So I was I was happy to to build my own for that. - -23 -00:08:12,569 --> 00:08:25,740 -Scott Tolinski: Yeah, like it becomes a nice playground, right? I mean, you learn a whole lot while doing it, it gives you a chance to experiment with some stuff and allows you to sort of show off your skills and something that's like really feels like yours. I mean, it's Yeah, your platform. - -24 -00:08:25,829 --> 00:09:59,610 -Wes Bos: Exactly. And anytime I want to like maybe like tinker with something, maybe add a feature try like some sort of different marketing techniques, or integrated parody purchasing power for different countries. Anytime I want to do anything specific to that I just have to hop into my code base, and I can start building stuff on top of that. So yeah, it's I know, developers always like to build their own thing, but it's been I think it's been really good for my business to have had built my own thing. Yeah, but um, so what is in it, obviously, the the whole entire purchasing checkout system, the whole free course checkout system for that the course dashboard, where you can manage your courses and change your email and watch obviously watch all of the courses you can download the courses depending on what level because that's another thing that I did is like a lot of my courses, the the beginner level, you can only stream them, whereas if you buy a master package, you can stream and download them. So you have to be able to manage that. There's a whole affiliate system baked into the back end. So a lot of my sales come through an affiliate system where people who have large audiences refer my courses and then I give them a 40% cut of the profits from that specific sale. So I've got this affiliate system that comes in generates reports I can do payouts through it and, and all that good stuff. This so a lot of stuff sort of built into obviously coupons are a big thing for me as well. So a lot of like little things built into it and it's been been a blast to be able to build this from scratch. - -25 -00:10:00,000 --> 00:10:48,770 -Scott Tolinski: Yeah, yeah, it's funny with things like coupons, I guess this is sort of the the nice thing about having your own platform. I mean, honestly, like, if you're going with a pre existing cart, it would already have coupons baked in or something like that. But let's say you were existing on like a platform that didn't have something like that. And you need to add it in, you could do it at a very, because it's totally yours. Like I initially with coupons, I just had it as a private JSON file, where it's checking the coupon, and to see if that coupon is in that JSON file, or whatever. And that's how I did coupons. But then, you know, as my needs grow, I want to be tracking who's using coupons. And I want to say, Oh, you can only use this one, how many times and whatever, have a legit system you can build upon then build upon that. But you don't have to do it all at once. It can. It's you have like intimate knowledge of this, this platform. So you can make little things like that happen at a time. Yeah, - -26 -00:10:49,039 --> 00:11:31,409 -Wes Bos: that's hilarious. That's exactly how my coupon started off was just a JSON file with an amount that you take off. And then now it's, it's a lot more robust the ability to lock down coupons by country, or you can issue a fixed amount coupon like $11 or 28%, off coupon if you like, you can pretty much lock it down in any way you want. And every time you want to introduce some sort of new locking system, you just have to write another function and extend that all of the different checks that it goes through. It's pretty neat. Exactly. Cool. So uh, maybe we'll we'll start about talking about like, what is the like the main language and framework that each of ours is built in? Why don't you go ahead and check that off. - -27 -00:11:31,620 --> 00:11:49,650 -Scott Tolinski: So mine's pretty just straight JavaScript platform overall. So on my back end, here, I'm using Meteor, which is a node platform, and provides you with a bunch of really nice stuff. So do you want me to go in depth about that platform right now? Yeah, - -28 -00:11:49,650 --> 00:11:50,190 -Unknown: backends. Let's - -29 -00:11:50,190 --> 00:11:50,760 -Wes Bos: hear it. - -30 -00:11:50,760 --> 00:14:39,929 -Scott Tolinski: Let's do the back end. Yeah, so So for my back end, I chose Meteor initially, because it was easy to get up and running, right. You don't have to spend time writing an API, you don't necessarily have to spend time having you know, an express you have your your API, your back end and your friend and are so separate. But in BDR, it makes it a lot more combined. So to say, I mean, one of the initial selling points is that you could do database rights from the client, obviously, that's not secure. And it's not something you should have in production. So as you grow it, even though they're they're, you know, getting more separated, they're still a little bit way more connected than something like an express site, or less having your own API. So for instance, for me, it's easy to call methods on the server simply from the client by calling that method. And what's nice is it can do all the validation client side. And if it passes that validation, then it can move on to the server side and perform whatever actions it needs, checking permissions and roles and stuff like that. So I chose this, this Meteor node platform because it allowed really nice, just integration between front end and back end. And not to mention it, it integrates with front end tools, like react really well. So at the end of the day, it's it's just straight node stuff. And then anytime you need to sort of communicate with the front end, you're using Meteor stuff, but it also has like accounts baked in. So I don't have to think about accounts, I don't have to think about other platforms for accounts, I don't have to think about other libraries. It just works. It just baked in. And it I've been a huge fan. I know there's some people that have concerns about Meteor in various ways. But I mean, if you go to level up tutorial site, you refresh it or go to this site, man, nothing loads so quickly. Yeah. And so the performance concerns, I think, are totally overblown, just knowing how to write performative sites and stuff like that. Also, I think, you know, some people get scared from media, because of the reactive stuff where, you know, everything's done through WebSockets. Typically, if you're updating something, everyone's seeing those updates in real time. But you can turn off that real time stuff, or you can call a method to get your data just like hitting an API, and you don't have to use the reactivity. So their activity is is free. It comes with it. It's nice, but you don't need it. You certainly don't have to have it. So yeah, that's pretty much why I went with Meteor as my back end stack. It's it's basically just a node site and has some nice little features for communicating with the front end. And yeah, I probably would have used MongoDB. Anyways, I think that's another concern people have, we can get into database stuff a little bit more. Yeah. Anyways, but yeah, so because of that, yeah, Meteor seemed like a nice platform to me be able to go up and quickly and add new features quickly. - -31 -00:14:40,710 --> 00:16:28,650 -Wes Bos: Awesome. That's pretty sweet. My stack is fairly similar to that, with the exception of the meteor part. So mine is a node stack, I think initially built it back when it was like no 10 or node 12. I built it many many years ago. And I built it I've been sort of upgrading with Express as we go along. So it's a node stack, I'm using the Express framework on top of that to handle all my routes and all my rendering. I'm a big fan of Express. And there's a lot of different frameworks out there. But I've been coding and express for years and years and actually my my learn node course at Learn node.com, you should buy it. That's pretty much that stack is pretty much exactly the stack that my course platform runs on. And I was really proud of that course. Because it shows everything that I've learned over the like five years of doing no development. What else goes along with that passport, j s is probably one of the bigger modules that I have there. And that handles all of my, all of my sessions. Actually, x Express has a sessions package that you install there. And then I'm using passport j s in order to to log people into their actual system. And then I also, I don't have, you don't have to log in before you buy a course. So something I see a lot of people doing on their course platforms is they, I don't know if you have this or not. But when they when you want to buy something, they make you login first and that you have a huge drop off there if you make people create an account first. So what I do is I just take their money, and record their email, and then once you click through to the email, it will, it will either already be attached to an account, or it will ask you to then create an account, which will then attach that purchase to - -32 -00:16:29,400 --> 00:17:23,970 -Scott Tolinski: nice, yeah, I do actually require you to make an account. But it's you don't have to verify your account or something like that. It's just you click on the card, or you click Add now sign in whatever that's it like a one sort of step sort of thing. But actually just implemented that because I had it in place how you do before. And I was seeing issues where people were losing their email receipts and stuff like that. And then maybe they sometime down the line would want to make an account and then add that account in that the orders their previous orders to their account that they created. You know, last where they they made a purchase last year, then they created an account of this year, and they wanted those to collect each other and stuff like that. I was just dealing with a lot of issues there. I think it was a little bit easier for me to just since I have the subscription service and all this stuff to require you to log in first. - -33 -00:17:24,349 --> 00:17:55,609 -Wes Bos: Oh, yeah. Yeah, makes sense. Makes sense. It's certainly a lot easier on the customers and I often have people will buy something and then a week later, they're getting ready to take it in. And for whatever reason, they don't click the link in the email that I sent them. But then they they're a little bit confused as to like how do they actually get access to it because they try to like sign in. But they haven't yet created an account. So there's there's a little bit of like Limbo room there that that you give up in terms of being able to make checkout as easy as possible. - -34 -00:17:55,710 --> 00:17:56,550 -Scott Tolinski: Yeah, for sure. - -35 -00:17:56,700 --> 00:18:04,140 -Wes Bos: So what about database on the back end? I think we this is gonna be fairly simple. Yeah, I use MongoDB do use a MongoDB. - -36 -00:18:04,310 --> 00:18:31,800 -Scott Tolinski: Yes, I also use MongoDB. And there's so many haters out with MongoDB. I've never been one to get on, like the hate train about anything really myself. But like, yeah, MongoDB it's it served me well. I don't need a crazy relational anything in it. Like I said, it's the default database for Meteor. Right now, it's sort of a major pain to try to use anything else. So I was I was fine with that. I didn't have to do any major setup for it. And it just works. - -37 -00:18:32,330 --> 00:20:15,030 -Wes Bos: Yeah, me too. Um, I don't have the largest app in the world. But I do have a couple of my collections of a couple hundred thousand entries in them. And I don't have any trouble. But I know people get into millions and, and dozens of millions of things. And then they start to run into trouble. Or you try to build like an extremely relational, like MongoDB does do relationships, they have quite a bit of them in my node course. But I know that people who do heavy relational stuff or have something like Twitter, much prefer to use like a Postgres or MySQL, or something like that. But I really like MongoDB. I use the mongoose package to interface with the database. That is all promise driven, which allows us to use a sink await in order to have really nice clean flow control all the way through our controllers. So I've been been very happy with with MongoDB. And especially like, I don't know if we can we can talk about like, how do you interface with your database. But when I initially got started, I didn't have any administrative tools at all. It was just a database and dumping info and if if anybody asked me to do something super simple, like update their email address, or change the name on a package or anything like that, I just would pop open a GUI to interface with MongoDB. The one that I use all the time is called Mongo hub. But recently MongoDB The company has has put out their own prod project which is called MongoDB compass, it's just a fantastic GUI interface in order to database interface with your database and sort of get like a high level overview of like, what kind of data you have aggregations of that data. It's just like really nice. We use that in my node course as well. - -38 -00:20:15,390 --> 00:20:22,410 -Scott Tolinski: Nice. Cool. I haven't seen compass before I use a studio three tea. Have you seen lower? - -39 -00:20:22,820 --> 00:20:23,910 -Wes Bos: 3d? No, - -40 -00:20:24,240 --> 00:20:34,230 -Scott Tolinski: it's not like the the prettiest app or something like that. But it's a very full featured, and it allows for like, really nice importing. And Expo. - -41 -00:20:34,260 --> 00:20:35,599 -Wes Bos: This was Mongo, Chef. - -42 -00:20:35,640 --> 00:21:02,700 -Scott Tolinski: Yeah, this was Mongo. Shove us this. Yes. Yeah. It's, it's nice. It's it has a lot of features. And especially because you can interface in Poland. Like it makes pulling in, like, if I want to pull in from my production database into my development database. Just to bring in all the products or tutorials, I can do that like one click, it's like copy from this database to this one, import all those records go. And that's sweet. It's super nice. - -43 -00:21:02,760 --> 00:21:25,770 -Wes Bos: It looks like one of those those tools that does absolutely everything under the sun and is amazing. And then it looks like it's built in Java or whatever. You know, like those Absolutely. Like, what it was like working with the other day. audacity, what an ugly program, right? Yeah. Terrible so much. And it's amazing. And it's free. So yeah, mango chef is another good one as well, but pretty happy with that one. - -44 -00:21:26,040 --> 00:21:53,220 -Scott Tolinski: Yeah. And so you said you use mongoose. And Meteor you do is very pretty much the exact same. It's just a meteor interface for Mongo, your standard fines and aggregation stuff. And you publish that data. And then there's something called mini Mongo allows you to use Mongo on the front end to do your your fines and stuff like that directly on the front end, for whatever data you've had published. So yeah, that's pretty much I'm integrating there. - -45 -00:21:53,820 --> 00:22:32,609 -Wes Bos: That's pretty sweet. And I should also say, a lot of my, a lot of my stuff is built on like Ajax requests. So what you'll do with these is you have a controller that looks up your database, and then instead of rendering out a view, it will actually just send JSON response into into how you've actually ping that data. So that's kind of like I think the The one downside to to not using a more involved framework is every single time that I need to do something, I need to write another endpoint for that specific task. Alright, let's talk about front end. What do you use on your front end? How do you make things work? - -46 -00:22:32,790 --> 00:24:55,650 -Scott Tolinski: Yeah, so I use a I'm actually in react 16. I haven't been since the like second release candidate or release candidate, which I think they were so they were so solid at that point. Anyways, it wasn't really too crazy of an upgrade. And now I guess what yesterday, React 16 officially launched at the time of recording this. And so yeah, so I've been on react for a while. Ever since I've built this platform and made a huge fan. I mean, it works really nicely the component interface and stuff like that. So I use react. For my views, I use a stylus for my CSS stuff, although I've been migrating to styled components. And pretty much anything new I'm making with styled components is sort of built up that component library, but it's a pretty big project. So I haven't had the time to move everything over yet. It's still like, as it as something new comes up, I will build out those components that I need for that something new and if those components can be reused in the rest of my site, then I'll go through and refactor those areas to bring in those components and that sort of stuff. I don't use Redux for state management. And I not because I don't like Redux. But because I don't really feel like I need it. To be honest. Meteor handles so much of that data pulling in I'm not my data is not stored in Redux. So what would I be using it for, I don't know minor things like opening a navigation or a window here and there opening the shopping cart. But I actually do that with just straight up session variables there. Meteor has these things built in called, they're just called session session bars. And even in the meteor community, a lot of people don't use these because they're totally global. But I think they're totally underutilized. What it is, it's basically a reactive local session variable. So you're storing something in your local storage, right? And it's reactive, if it changes, that those updates will just filter on right down through. So you know, my my main navigation, I just have a session bar stored up there that's never open or closed. That's it. And I have a clear plugin that shows me all of my session bars across the whole thing. And since they're global, you know that that's it, but I don't have that much that much state to worry about. You know, it's not like a crazy amount of, of state. So, yeah, - -47 -00:24:55,680 --> 00:25:16,500 -Wes Bos: yeah, cool. Um, so my friend again, I built mine, probably Three or four years ago, and it's been working really well for me. So I don't use a whole lot of the the most recent technology. So most of my app is server side rendered. It's it's not like Scott's is done entirely in react, and you do do server side rendering, right, Scott, - -48 -00:25:16,739 --> 00:25:54,180 -Scott Tolinski: I don't I use a no, I use a pre render pre render.io to do my for for like, you know, web search crawlers and stuff like that, whatever they're called search crawlers, I don't know, search engines and search engine optimization, right. So I use pre rendered to do that. But for the most part, I just use really small JavaScript bundles, and everything loads really quickly. But yeah, I haven't. To be honest, I, I've had the server side rendering going at a point. And I didn't necessarily see any sort of performance benefit from it that I'm not seeing from the current system. - -49 -00:25:55,230 --> 00:29:44,070 -Wes Bos: That's pretty sweet. Cool. Well, mine is done, mostly all templated in, in Jade, or what is now known as pug. And that's all templated, I have sort of like, an overarching course layout. And then I will modify, I have these like, sort of like sub layouts, that that extend that and then modify it depending on which of course that we have. So I've got a bunch of different index files for each of my courses. And then some shared stuff. I've shared styles and, and shared mix ins and whatnot in Jade for things like listing out videos and showing modules and the videos that belong to that. So it's pretty nice because I can share things through all of my different domain names that I have. So that once the HTML from pug and Jade get to the browser, I then pick it up with JavaScript. Most of the The courses are done in jQuery, which I've I've slowly been refactoring that over to just vanilla JavaScript, because quite honestly, at the end of the day, it doesn't need jQuery doesn't need react, it doesn't need anything because like what's happening, I'm showing a modal box, I'm collecting your credit card data. I'm pinging stripes endpoint to get a token, and then take that token and ping my own back end with that token, and, and then the back end will pick it up from there. So I'm really not doing a whole lot of heavy lifting, aside from some sharing of data between all of my different domain names. So that's sort of where I'm transitioning to it now. But it's it's very low on my I much rather spend my time on the back end, which is react, the whole course viewing experience, being able to to watch the courses to skip through them to fast forward to change from to bookmark specific videos, and whatnot. All of that is built in react and react router. And that's really where I'm spending my time lately is because I want the the course experience to like I think I've got the whole like marketing side down pat. And I'm not too too concerned about the tech for that. But the the course being experiences is perfect for react because you can make this really slick interface without having a single page refresh or, or anything like that, which is pretty neat. Yeah. My CSS is all done in stylists. I've got lots of shared little components, that I share my stylist between all of my sites, because I have things like the login button and the frequently asked questions that all have a base CSS. And if I if I have an error on one of my sites, it's likely that I have an error on all of my sites and being able to update just that one base CSS will likely fix the bug across absolutely everything on my on my free courses. So if you go to like JavaScript, thirty.com, or any of these other ones, that's all done in vanilla JavaScript as well, where that's pretty much just pinging my back in and then on my back end, I've got a slew of checks that will check if you've already signed up for it if you're doing it maliciously, if you're trying to hit the back end multiple times, because I've had people maliciously try to pump thousands of email addresses into my database at a time. So I don't use Redux or anything on my own core site just again, it's it's not something that I necessarily need. I don't have a whole lot of data for the course viewer, I've got like an object that contains the videos. An object contains the user object that contains the user's progress that is sort of like synced with the back end there. If I were to do it again, I would likely and I'm likely going to move moving a lot of my stuff over to react Apollo, which will allow me to just not not worry about any of this stuff again. - -50 -00:29:44,490 --> 00:29:49,680 -Scott Tolinski: Yeah, yeah, I am likely to be adding some Apollo to my stack as well. So - -51 -00:29:50,099 --> 00:29:51,150 -Wes Bos: it's good stuff. - -52 -00:29:51,150 --> 00:29:52,109 -Scott Tolinski: It's good stuff. - -53 -00:29:53,099 --> 00:31:56,490 -Wes Bos: What else do I use? I use I've talked about this previously, I use a plugin called cross storage which is from Zendesk and what that allows to do is share local storage across all of it because because I am server rendered and because I am session based and not JSON Web tokens. If I want to be able to share data from one domain to another, it's a little bit tricky because you have cross origin policy and not being able to do that. So I've spent some time implementing that being able to like, like, what I'll do is, if you're logged in, I'll check if you have bought a course. And then if a course is on sale, I'm not going to show you that this course is on sale, because you've likely you've already bought it. So it's not something that you necessarily need to see just like little little things like that being able to share the data between the different domain names that we have there. Yeah. And I think that's, that's all of my friend. And it's, it's, it's funny, because all of my courses are very heavy front end. And my course platform aside from the the viewing experiences, is all done. Oh, I'm sorry, that's that's the other thing I totally forgot is I have an administrative back end, which is my own thing. And that is recently built. And I built that in next jass, which is a, a framework for building server side rendered react apps. And that's great, because like, I hate doing administrative stuff. So this thing is just so fast, you click something, it's all pre loaded, be able to search for people based on any of their things based on their email address based on their name based on what coupon they use based on what course they use, how much they paid. And then I can I can modify all of that data that you have there. And I also have team licenses as well. So when somebody buys a team license, they get like a special interface to be able to, to dole out those licenses, I used to have people email me who should go on their team license. But that's just that was a supreme waste of my time. So I felt like this nice, slick little interface that will be at give people the number of slots that they have. And then they can dole them out to teammates on their team. Nice. So - -54 -00:31:56,490 --> 00:32:01,140 -Scott Tolinski: you keep your your administrative tools entirely separate. Yeah, it was separate, but - -55 -00:32:01,680 --> 00:33:00,599 -Wes Bos: only because I had built it at a later point. Yeah. And I wanted it to be like a really slick interface for being able to manage all of my data. And I have all custom graphs. And I'm able to like filter down for how many sales that I have in the last week, or how many sales of this course that I have, what is my like, one thing I keep track of is what is my ratio of free courses to pay courses. And I try to like keep a keep a close eye on like, what what that looks like. So I've always wanted to have this like just TV in my room where I have like my empire and all of the stats coming in at once. And I'm slowly getting there. I don't have a TV yet. But at some point, I would like to have like the sort of like auto and that's the that's the other thing is it's auto updating. Yeah. Because it's not WebSockets just it just pings the back end every every, like 10 1020 seconds or so. But if it was WebSockets like yours, yours is all real time, right? - -56 -00:33:00,630 --> 00:33:33,720 -Scott Tolinski: Yeah, yeah, my mind's all real time. And that's actually part of my like orders thing, you could just leave my orders page and little graph and I use chart js, although I'm probably going to be moving off of chart JS when I have a free second because it's pretty heavy compared to some others. There's like victory by formidable that looks really nice. Either way, it's all animated and fancy. So in order comes in and my little graph goes. And then you know animates in with each order that comes in. So I can just sit and leave this open in a window if I want to. And just keep an eye on it, what do you would use for your charts, - -57 -00:33:33,990 --> 00:35:18,920 -Wes Bos: I actually had had brought in all these react chart libraries. And then like, I don't know, after a couple hours, I was like none of this is working for me. And really what I what I have is I've got here I'll read them off right now I have a block of my revenue for the day or sales for the day in us because that's what I believe in and then I have that converted over to Canadian at the I pull in the the current exchange rate just to give me an idea of what that is in Canadian I it shows me how much I've paid out in like in processing fees to stripe and PayPal, it shows me how much I've paid out to affiliates. And then it shows me like a final profit number of like, this is the revenue minus all of your affiliates and your fees and all that stuff. And then it shows me like a profit number for what that is. And then it gives me aggregates. So this is more like numbers, aggregates of how many paid products I have, how many what's my paid to free ratio looking at right now. And then I've got a little like mini chart for I basically use Flexbox Actually, it's pretty funny is I take I took all my courses. And then I just like like right now 129 people have signed up for my JavaScript 30 whereas 54 people have signed up for my Redux. And then I just apply flex grow of 129 and 54. That's my secret and then it Just that kind of makes its own bar chart. And then when that data updates, flex grow will transition, because you can just apply a transition, flex grow one second, and then it will just add itself out or in depending on how those numbers have have adjusted themselves. Same goes for my affiliates as well. Sorry, go ahead. No, - -58 -00:35:18,920 --> 00:35:33,540 -Scott Tolinski: I think that's like the universal sound for little animations coming in here. That's the only Yeah, that's the only sound I can think of. Yeah, yeah. That's really smart. You don't need a library for that then. And honestly, this discharge as like I said, it's too heavy for what I'm doing. Yeah, I - -59 -00:35:33,540 --> 00:36:03,750 -Wes Bos: just couldn't figure it out. Like I was so frustrated. And like, I also didn't need a chart that looked like that I just needed like, the raw data in my face. Yeah. And then to get like a high level overview of like, Oh, that's interesting. My JavaScript 30 bar is twice the size of my Redux bar. That means that twice as many people have signed up for it, and then you can like, I can filter for like the last week, last day. 30. Day, we talked about this when we're talking about moment j. s, I use? Yeah, I have this like filter that will filter it down for all the different days. - -60 -00:36:03,780 --> 00:36:05,670 -Scott Tolinski: Yeah, like was cool. - -61 -00:36:06,780 --> 00:38:26,690 -Wes Bos: Yeah. So that's, that's front end. Obviously, there's there's a lot that goes into to that want to take a quick break and talk about our sponsor, which is a course from Lawrence Stewart in the courses called intro to the serverless framework with AWS and node j. So you've probably heard a lot of people talking about serverless, Cloud Functions, functions that serves what what is that? Well, instead of building your app in like one monolithic application, what you do is you build your application in these smaller what are called Cloud Functions, or serverless functions where each function does a specific thing, whether it's scraping a website, resizing an image, trimming a video, or saving a, sending an email, bringing something saving something to a database, there's all kinds of different tasks that your application is going to do. And sometimes you're I know this myself, I just had a website crash on me, when your application gets really, really popular, you need to scale up really, really quickly. And rather than just like, buy a very expensive server, and then have to pay for that forever and ever, what you can do with serverless in AWS is lambda service is be able to just scale up, like let's say a lot of people are immediately resizing photos, or you have a spike in traffic. And one specific part of your website that needs needs a lot more hardware thrown at it. So Amazon's AWS, lambda function is going to scale up and you're going to just pay for that as you need it. So if it's only for an hour that you need that extra work, it's going to spike up and then come down, and you're not going to be paying for it over and over. So it's infinitely scalable. It only runs on an as needed basis, you're only paying for the execution time. And it's just a really cool way I'm seeing a lot more people build and architect their applications in this way. So if you want to learn all about that, then I definitely suggest that you check out this course. And we've actually got a couple freebies to give away 20 free courses if you use a coupon syntax, underscore free all caps. And if you miss that will probably be gone within the first 15 minutes of this episode. So once those are gone use the coupon syntax for an extra 10 bucks off the course. So thanks so much to Lauren Stewart and his new course for sponsoring. Yeah, - -62 -00:38:26,690 --> 00:40:13,230 -Scott Tolinski: so what kind of acid hosting for me, I have a lot of a lot of downloads, I make most of my videos available for download as well as series concerning I have like 72 series on level up tutorials. So that's a whole lot of content. And I have images and thumbnails for all that stuff. So I host all of my I host all of my downloads for big, big stuff like my my series and stuff on Amazon s3, just because that was the easiest one to get up and running with at the time. And it was sort of the de facto place to put all your stuff. So I haven't really had a need to migrate off of there. Although I heard you talking about backblaze I believe it is. Yeah. And so thinking about it, but yeah, so pretty much all my my series and everything like that are hosted. My actual videos are all hosted on YouTube, even the like premium series and stuff like that. I didn't want to write a video player. And I didn't want to pay for video hosting. So I just have them as unlisted private series, and I wrote some code that will be able to just I give it a playlist ID and so no one on YouTube playlist, I gave it a playlist ID and it imports into my thing. And then people who are, you know, subscribers who have access to that content, they can then watch this unlisted playlist, but they get all of the nice things like YouTube's and coding, they get all of you know all of the nice stuff you get with YouTube without having to actually make it be you know, Public. So I, that's where I start my actual videos is on YouTube for everything, series downloads on a s3, and then I host all of my images on cloudinary. I don't know if you've used them. - -63 -00:40:13,460 --> 00:40:14,040 -Unknown: No, - -64 -00:40:14,360 --> 00:41:04,440 -Scott Tolinski: it's sort of like a an on demand image thing. So basically, if image host that can do a ton of manipulation through URL, what's really nice about this is that a lot of these images that I'm using are actually pulled in as thumbnails from YouTube. So what I can do is I use this cloudinary path where it's like cloudinary, forward slash levelup, tuts, forward slash whatever. And then I just pass in the entire domain, or the entire URL of the YouTube hosted image, and it will pull that in to cloudinary, generate a version of it at whatever dimensions, I'm telling it. So I can give it like 100 different dimensions, I could say, at this screen size, give me That's amazing, or Yeah, and so all the sudden you get an image that's 300 pixels wide, and it's cached on their server. And it's perfectly optimized. And you can, you can crop, - -65 -00:41:04,440 --> 00:41:06,780 -Wes Bos: and you can do all kinds of stuff - -66 -00:41:06,780 --> 00:41:29,760 -Scott Tolinski: to do all kinds of stuff. I mean, you can do Instagram filters and stuff on it if you really want it to, but for me, I just use it mostly for the fact that you could have on on mobile, particular image, and I don't have to write software to generate, you know, five different versions of this image. cloudinary will just do it on demand. It's amazing cash. - -67 -00:41:29,790 --> 00:41:30,330 -Unknown: You - -68 -00:41:30,420 --> 00:41:58,080 -Wes Bos: know, it doesn't reminds me of his way back in the WordPress days before we had the concept of like a post thumbnail, there was no way to attach an image. So you had to do like a custom field. And then if you wanted to resize it, we had this thing called Tim thumb. Yeah, yeah, Tim thumb did the exact same thing. Like so many huge security flaws. I remember just like every month having to upgrade my Tim thumb because somebody could like, execute remote code on your - -69 -00:41:58,080 --> 00:42:04,320 -Scott Tolinski: server. Yeah, I know. I know. I remember them being a huge pain to get set up to occasionally. Yeah, it was at least on Drupal, - -70 -00:42:04,350 --> 00:42:13,130 -Wes Bos: you needed your server to your PHP server to have like, whatever the the package was to, to actually deal with images on the server. And - -71 -00:42:13,400 --> 00:42:29,940 -Scott Tolinski: yeah, yeah. So that's, that's pretty much it for this asset hosting, this was recommended to me by a friend of a friend. And I've been really just psyched cuz they have a really nice API on top of this, or you can just use these simple URLs and whatever. Their Doc's are good, they're their blogs, good and - -72 -00:42:30,060 --> 00:42:33,600 -Wes Bos: 300,000 images for free. - -73 -00:42:33,710 --> 00:42:45,600 -Scott Tolinski: Yeah, I know, the pricing is pretty outrageous, too. And if you do referrals, they like take take some off of your bill. So all I would have to do is put a link to the referrals in my YouTube account. And I think, okay, in the - -74 -00:42:45,600 --> 00:42:46,560 -Unknown: show notes. - -75 -00:42:46,860 --> 00:42:48,630 -Scott Tolinski: Yeah, I should put that I'll definitely put that. - -76 -00:42:48,650 --> 00:42:53,310 -Wes Bos: Yeah, everyone go and click Scott's link in the show notes. And yeah, let him get it. - -77 -00:42:53,340 --> 00:43:02,760 -Scott Tolinski: But so I, I've been on this and what I'm using, like 15% of my monthly bandwidth at the end of this month. And that's the free plan. I'm not paying anything for it. Oh, really? - -78 -00:43:02,760 --> 00:43:20,280 -Wes Bos: Oh, wow. I know. It's amazing. It's pretty I love I love things like that, well, sometimes they don't because they go out of business. And then you're Yeah, but I guess as long as you have the source image, the original image that is yours, it's fine. Because you can always find another service or build your own. - -79 -00:43:20,420 --> 00:43:43,050 -Scott Tolinski: Yeah, version of this Exactly. It's either always pulling the original image from my file system in the app itself, or from YouTube's API. So if these images would not be allowed, if they shut down tomorrow, all I would do from my code is remove that part of the string in the image that says cloudinary. And all the images would still work. They're not going to be optimized, but they'll work. You know, - -80 -00:43:43,590 --> 00:43:47,400 -Wes Bos: that's pretty neat. I never heard of this, I may have to start using this. - -81 -00:43:47,430 --> 00:43:48,330 -Scott Tolinski: Yes. Pretty cool. - -82 -00:43:48,780 --> 00:47:59,400 -Wes Bos: Cool. So for mine, obviously, what I do is I stream all of my videos, and then I offer downloads as well. So for the download side of things, I started with Amazon s3, and I didn't like at the time, when I did my sublime book, I didn't totally understand like, what the point of CloudFront was. So I just threw it up on Amazon in Virginia, or wherever the closest one was. And then I got all these emails from Germany, of it's always slow in Germany for some reason. And I didn't totally understand it. And then somebody said, like, you know, you're, you're hosting it in, in, in the States. So it's very slow for the rest of the world. So I use Amazon s3, and then you put cloud front in front of that. And then that will distribute it to all the different servers around the world and make it fast and cash and do all that sort of like a nice stuff for you, which is pretty, pretty neat. So that's what I was using for the longest time and my bandwidth bills were just absurd. And part of that is because it's s3 and CloudFront are, they're expensive. I guess it's cheap, but like when you're doing the sort of moving as many gigs as I am, it starts To get pretty expensive, I have many months where my mortgage was less than my Amazon s3 bandwidth bill. And the other thing was that I didn't totally understand like video compression. So I was uploading these these videos, zip files that were like a gig, or two gigs when they really could have been like 700. Meg's, or something like that, like I just re compressed my ESX series. And it went from like, three gigs down to like one and a half gig. So I was stupidly throwing money out the door, like, I'm pretty sure that if I were to look at my Amazon bills, I probably pay over 15 $20,000 to Amazon and just bandwidth bell. So that was mine. And I've recently moved off of Amazon s3 over to backblaze. So backblaze has always been the like, backup your computer, it's like Dropbox for your entire hard drive. And I've been using that for years, I always recommend it to people, because it's sort of the like, Oh shit, moment II where you accidentally delete something or your entire computer goes down. This is passive backup, it always runs on your computer. It's always backing up absolutely everything and you can restore parts are all of your computer, they'll even FedEx you a drive. Whenever it is, if you're like sort of in a panic. So I was I've been a big fan of backblaze for a long time. And then they recently announced this, well, they've had it for a while. But they have this thing called what's it called bt two. And they just recently announced that it is going to be much cheaper than Amazon s3, which is incredible. Let me just pull up the backblaze thing, maybe you cut this out, I just want to pull up the pricing. Here we go. So per gigabyte downloaded, it is two cents. Whereas on Amazon s3, it's five cents 10 cents. Sometimes when people from India download my courses, it's like 1112 cents, a thing. So it's like, five, six times cheaper than using Amazon s3. And that's not even including the extra charge they have for CloudFront on top of it. So I moved almost i think i think at this point, I've moved all my stuff over to backblaze. And my bandwidth bills have just like been sliced by like between compressing my files properly. And moving over to backblaze. My bandwidth bills have gone from thousands a month to not even 100 bucks 200 bucks on like a launch month or something like that. So nice. Very, very happy about this. The one thing that I haven't figured out is that backblaze only has one data center. Where are they they serve their stuff up from? So I'm like, well, is that going to be a problem for people across the world? And I actually haven't found an answer to this. But I also have never received a single complaint about the the downloads being slow like I did when I was on s3. Sure. - -83 -00:47:59,640 --> 00:48:10,080 -Scott Tolinski: Yeah, that's part of why I let YouTube foot the bill for most of my videos take us because they have they have enough servers and enough everything to take that - -84 -00:48:10,110 --> 00:49:35,790 -Wes Bos: Yeah, man, I didn't realize how expensive bandwidth can be. And then I should also talk about streaming all my videos. So what I do to stream my videos is I host them on Vimeo because, again, if I were to host them on one of these streaming services, it'd be very expensive. But I don't know why this is a thing. But Vimeo has like a $200 a year Vimeo, bandwidth Vimeo Pro, where you can just stream away till your heart's content. And it's pretty sweet. So I use Vimeo and I don't use the Vimeo player, I would love to use a Vimeo player because it's really nice. It is just missing the ability to increase the speed, the playback rate and so there's just no button, there's no way you can like get into the Vimeo iframe and like run some JavaScript to speed it up, like add a button on the bottom or something like that. Which looks something like Wistia you can do. So I unfortunately had to code my entire player from scratch, which is just an html5 video player and it has like captions and the ability to speed things up and jump around and all that good stuff sort of built into it. But if you were to view source on any of these videos, they're all hosted on Vimeo servers, which is great, except if you live in Indonesia, because it is blocked. And it sucks. If you live in India, she has to download my courses. Well, - -85 -00:49:35,820 --> 00:49:36,330 -Unknown: yeah. - -86 -00:49:38,040 --> 00:50:16,320 -Wes Bos: So that's where I host everything and my images. I host some of my images on s3 and some of my images on backblaze. I did have them on my my just my regular Digital Ocean server, which is not a good idea because I was just just my CPU with spike when I was like when I launched my JavaScript 30 there was like 8000 And people on the website at once and the like the server was falling over. And I realized it was because I was serving up static images directly from my Digital Ocean server. So I moved all those over to s3 and in a hurry to try to fix it. And that immediately fixed it for me. - -87 -00:50:16,410 --> 00:50:25,980 -Scott Tolinski: Yeah. And this is it's funny with these platforms, right? We built our own platforms. And essentially, we are reinventing the wheel over and over again, because so many other people are like, Well, duh, of course, that's gonna happen. Right? - -88 -00:50:25,980 --> 00:50:26,970 -Wes Bos: Like, - -89 -00:50:26,970 --> 00:51:14,430 -Scott Tolinski: it's a nice learning experience. It's not hurting anyone. Yeah. For me, I I like appreciate those moments, because there's so many of those moments that that really build out some of the best learning experiences like, Oh, this is why people say not to do that. Yeah, I should have listened for these reasons. But yeah, definitely, I didn't run into that myself. But I think on another project, I had some sort of issue where and then Elson was just totally understood why people separate their concerns so much. Because if your server goes down, your whole site's going down, and nobody's doing anything. So it's better something else is sharing the load. You know, I also use CloudFront. For my CDN, by the way, just because it's, I don't know, easy, easy to integrate. - -90 -00:51:15,210 --> 00:51:30,330 -Wes Bos: Yeah, yeah, it's, it's super simple. You just flip it on, and then you just change your use, you set up CloudFront to go in front of a bucket, and then you just change your URL to a different bucket name, and then it will automatically distribute them around the world. It's, it's pretty nifty. - -91 -00:51:30,480 --> 00:51:35,340 -Scott Tolinski: Yeah, yeah, definitely. So testing, do you do any sort of testing on your platform? - -92 -00:51:35,700 --> 00:52:18,870 -Wes Bos: Um, not a whole lot. I have some stuff that's done in mocha, I had written a bunch of it a couple years ago. And then and now anytime that I, I do write a new controller, I'll write that in mocha, just because that's what I've got set up. But for my new stuff, what I've been doing is writing it all in jest, I just haven't integrated that into my into my new my course platform just yet. So that's, that's sort of on my eventually, what I want to do is, have somebody helped me on my own course platform, because there's a lot of things that I would like to do. And I think it needs to be a little bit better tested before I let somebody run wild in changing stuff inside of the court, of course, platform. - -93 -00:52:19,080 --> 00:53:22,320 -Scott Tolinski: Yeah, I was. Yeah, I had been wondering a lot about that, too. I'm actually very interested in just because I've very briefly used it like I fired it up, I ran a snapshot, and I did did that kind of stuff. Yeah, but I haven't used it pretty extensively. I use mocha Chai pretty, pretty heavily in my testing. And then there's this Meteor package. Practical Meteor Meteor mocha. And just like the meteor testing environment. This is really nice if you run Meteor in the testing mode, and like pops up another window, and you get this whole visual interface for your test passing and stuff like that. You just server client tests or whatever. But the for a long time, I think the meteor testing thing was sort of all over the map. And people are just trying to figure out what was the right way. And then eventually, Meteor came out with an opinionated This is how to do testing on Meteor and everything's been good. Since then, everything's been really nice. And so just pretty much have gone with straight out of there. DOCSIS two. My dog is flipping out, every everything just straight out there docs. And that's pretty much it. - -94 -00:53:22,410 --> 00:53:42,930 -Wes Bos: Cool. And we're also going to have a show on testing coming up, that's gonna sort of dive into the different types of testing like unit testing and integration, testing and whatnot, to maybe clarify some of those stuff, because I know a lot of people have been asking me questions about that. Let's talk about API's up next. So is there any external services that you interface with on your stack? - -95 -00:53:43,200 --> 00:55:34,260 -Scott Tolinski: Yeah, I rely pretty heavily on the YouTube API. And I've been on the YouTube API since it was like version one or two. So it's really nice to see how it's grown and stuff like that. And I use this thing. I have a an admin tool, I called the import Iser all of my admin tools and an Iser, so I have like the series Iser the download Iser, or some of I have the affiliate or affiliate later. But yeah, the the import Iser basically will just hit up the API, and I bring everything into my local or into my Mongo database, so stuffs all stored in the database. But basically, I pass in a playlist idea grabs everything, it saves it to the database, whatever. And then I can hit that API whenever I want to update it. But I'm not ever really necessarily hitting the YouTube API to load the series because I just have too much. I want too much control over right. I don't want things to come out of YouTube directly into my site. I want to be able to tweak and modify it, you know, as I need. So I use the YouTube API to basically bring in and save everything to the database and then I have recently moved over to Braintree for my payments system, so Braintree and yeah, and I still use I still have stripe, integrated. I have a lot of legacy stuff on this stripe stuff. What I need to deal with is how many basically the people who have had subscriptions and purchases and everything with stripe, I want to be able to have all of that still up and running while I transition over to Braintree. Until obviously, all of my new subscribers are on Braintree. Yeah. And within that system, so I use both of those. And then I mentioned before pre render for basically pre rendered versions of my site. But yeah, that's that's pretty much it. Just YouTube and Braintree are the two heavy ones right now. Cool about Jim. - -96 -00:55:34,500 --> 00:56:05,160 -Wes Bos: I'm pretty much the same. I use stripe, and PayPal like me, Kate with their API's in order to transact. I use an API fixer.io to pull in my exchange rates. That's just for my own administrative dashboard. I don't show any exchange rates on the actual website, although it's something I'd maybe like to, to experiment with. Because showing it in US dollars, maybe I don't know, maybe people who don't live in the US can tell me this, do you prefer when a website tells you what the prices in your local currency, or in in us? - -97 -00:56:05,220 --> 00:56:21,750 -Scott Tolinski: Yeah, I'm interested in this as well, I actually have it on my to do list for the next release of my site to have international pricing conversions. But I would be interested in knowing if that's something that people really would like to see. Because if they would, yeah, that they'll get bumped up priority list. - -98 -00:56:21,990 --> 00:57:03,180 -Wes Bos: Yeah. And then I work with the Vimeo API as well, which, so I'll put all my videos to Vimeo and put them in a collection. And then when I want to pull down a list of videos to interface with my both with the front end, like the main page, I want to pull in a list of videos along with their titles, and thumbnails and everything that sort of comes in from the boom API, as well as when people want to watch the videos on the back end now comes from the Vimeo API as well. So those are the only three I don't do a whole lot of external touching other than email, maybe we'll talk about that in just a second. is external services for that as well. So let's let's actually, yeah, - -99 -00:57:03,960 --> 00:57:21,510 -Scott Tolinski: yeah, I was gonna say i guess i that is an API use mandrill for email sending, although, you know, MailChimp mandrill probably isn't like the cheapest, best solution. It's just what I've been on for so long, and I haven't had the time or energy or anything to move off of mandro slash MailChimp so that that's where I'm at. - -100 -00:57:21,900 --> 00:57:34,170 -Wes Bos: Awesome. I was on mandrel for for the longest time. And then what happened is they I think that they had some sort of they either were making money with it, or they had abuse because they were giving 1000 sends out. - -101 -00:57:34,380 --> 00:57:36,270 -Scott Tolinski: I know, I love that free tier and - -102 -00:57:36,840 --> 00:59:40,620 -Wes Bos: it was very poorly handled. I really like MailChimp as a company, but the mandrel what they did is they just shut it down within like, like two weeks or something like that. And then you can only use it if you have a paid MailChimp account, which I don't I don't use MailChimp I use drip to send all of my email out. So luckily, and this is like a lesson I didn't use any proprietary mandrill package I use just SMTP Yeah, I use a package called node mailer. And node mailer will just interface with smtp. So I was able to just swap out my credentials. Real quick. I moved to Amazon es es simple email service for a long time. But I had some some issues with deliverability on that. And apparently, like, people were telling me that like, that's where like, a lot of spammers go to send their email. deliverability isn't great. So I didn't and also like when people would tell me like, Hey, I didn't get my email, I would be like, I don't know, I don't know where it is, like, I don't know what happened. Because Amazon gives you absolutely nothing, no information, no insight. And I was like mandrill. And what I use now is called postmark, which I tried out a whole bunch of them and postmark was the best will give you activity for every single person. So if somebody tells me, Hey, I'm not getting an email, I can go into the activity for their email address and see every single email that they've ever ever been sent out. It saves a copy of what that email looks like. It tells me how many times they've opened it, when they've received it, if it's bounced, sometimes people have really restricted IT departments that restrict email from from people that are not internal. So I can tell them like, hey, it actually, it actually bounced back, you have to talk to your IT department to to allow my domain name. And so I'm a big fan of postmark. Yeah, over the years and it's so cheap, like I think like, how many how many credits if you want to send half a million email, it's $1 per 1000 emails that sent out so it's, it's almost nothing I'm gonna - -103 -00:59:40,620 --> 00:59:59,100 -Scott Tolinski: get on this because not because I don't like mandrill or whatever. But it is expensive and I'm paying for that right now. So this looks really nice and like you are not using any mandrel specific library or anything. So it would be as simple as me just swapping that out. So - -104 -00:59:59,550 --> 01:01:02,790 -Wes Bos: the one that You careful about is mandrel automatically encodes their URLs so that the URLs go through their system. And that's the way that they can track clicks. And then when they shut it down, they just killed all of my mandrel links. And I was like, What the hell, I have like, I've sent out like 300,000 emails all that have mandra links in it. Oh, now you just killed all of my my links. And then they said, you have to you have to formally close your account for the links to start working again, like, so. That was so stressful. And now I make sure that the links go directly to my server, should postmark ever go under, then the the URLs aren't going to go through because the amount of email that I got of people being like, hey, Wes, something's wrong with your links. And it's like, it's not me that they're just being fed through an intermediary. So lesson learned there. Yeah. About clicks anymore, because I just want to see, I just want the links to get to the people without having someone in between there. - -105 -01:01:03,390 --> 01:01:13,500 -Scott Tolinski: Nice. So okay. luden API's? Let's talk about hosting. Where do you host that? You said digital image? You mentioned digitalocean? several times. So I'm guessing digitalocean? - -106 -01:01:14,010 --> 01:01:17,790 -Wes Bos: Yeah, actually, can we talk about email real quick, a bit more? Yeah. Let's talk about email. Let's - -107 -01:01:17,790 --> 01:01:19,140 -Scott Tolinski: cut that back. - -108 -01:01:19,200 --> 01:01:54,270 -Wes Bos: Yeah, cut it back. A couple more things. Well, my email setup, I write all of my emails in pug, or Jade. And then I feed them through this thing called Inky, which is, I think it's called it's now called a foundation for emails and from the zurb, run the foundation framework. And essentially what that gives you is, rather than having, as we know, writing HTML emails is just a nightmare. So what it does is, it's sort of like react components, where you just like write a button tag or like column tag, and then it will convert it to whatever the like terrible - -109 -01:01:55,410 --> 01:01:56,100 -Unknown: HTML, inline - -110 -01:01:56,100 --> 01:02:31,500 -Wes Bos: CSS and HTML that it is. So I use that inky to convert the zurb. html to regular HTML. And then I use a package called juice, which will take my CSS and inline at all, because you need to have for most email clients, you need to have all of your CSS inlined into your actual elements that are there on the page. So it's sort of like it's like three or four steps to send out an email but have that all automated from compiling the Jade template to inline to actually sending it off to to postmark to send it to the customer. - -111 -01:02:31,560 --> 01:02:55,590 -Scott Tolinski: Nice. I use something, I guess maybe not that similar. But I just have basically straight up HTML email templates. I'm bringing those in and then modifying them with like a mustache, mustache, templating, and then bringing my data and rendering it that way, and then shooting it out. Through meteors built in email that send so this is pretty much it. Nothing crazy. Awesome. - -112 -01:02:56,040 --> 01:03:00,150 -Wes Bos: Looks like all hosting. Once you have your app, where do you put it online? - -113 -01:03:00,570 --> 01:05:00,510 -Scott Tolinski: Yeah, so for a long time I hosted on digitalocean I actually still host most of my stuff on digitalocean like my personal site and client work and any sort of that stuff goes up on digitalocean. And forever and ever and ever level up tutorials was hosted there, as well. But Meteor has their own host called galaxy, which was actually pretty reasonable for pricing for containers, they used to be like super expensive when they launched it and then they they dial it back quite a bit and had some more entry level things because I don't get a an insane amount of traffic that I need to be paying an insane amount. But of course it you know, gives you the ability to scale but the features on galaxy just kept getting so much better and better and better that I was just like, man, why am I Why am I worrying about my own server where I have to worry about security and all this stuff like this when I can take a container approach to this and just run a one one you know, deploy command or whatever and get an interface where I can roll back versions if I need to. I get access to just increasing I mean it's basically like it's a lot like Heroku if you used Heroku you can increase containers, increase container size or any of that stuff. And it gives you things like pre render, built in pre render so yeah, I've been really psyched with it at first when they came out I was pretty skeptical. It's one of those things you don't want to go put up on host if it's not a major company that you you know you have no idea if Meteor galaxies going to be around forever or whatever. It just the the features and everything. were so nice and at the end of the day the price was going to be the same so I made that jump and I've been just super psyched about it because there's nothing more that I dislike than trying to manage and keep my server up to date and all that sort of stuff have to deal with server stuff is really just not my, my forte and I don't think I ever will be necessarily so yeah I host on galaxy. Everything else on digitalocean though big fan of them. Still, - -114 -01:05:01,290 --> 01:06:48,960 -Wes Bos: that's sweet. Yeah, so I am currently on digitalocean as well, I've been on them for a long, long time. And it's working pretty well. And it's kind of neat because you can do like we talked earlier about this like concept of a floating IP. So you can run a couple of servers running your app, you can cut over to the, to the other one without a whole lot of downtime, or no downtime in that and whatnot. So, and what's nice is that the documentation for digitalocean is really good, you can always find ideas. But at the end of the day, you still are managing a server. So there's security updates that need to happen, there's, if you don't have enough memory, I had to set up like a swap memory in order to do some stuff on there. And I just don't like having to maintain a server at the end of the day for this kind of stuff. So I am looking at moving over to now sh which is from ziet. They do next jass, which is my favorite react framework, and hyper, which is the terminal that I use. So they do this concept of like immutable deploys. And I think this is similar to what you're talking about where you deploy your app to, to now. And then when you deploy it a second time, it will just give you It gives you a new domain name for every single deploy that you have. And then you can alias your main domain name over to the other one. So right now when I need to restart my app, I have about three seconds of downtime. And it's not a big deal. But every now and then I get people sending me screenshots of like they, they hit it at exact time that I reboot my app. And then they say like, hey, you're down. And I'm like, just refresh, it's up again. But with with now, what you can do is it will just cut over the the alias, the domain name alias, to the new URL, and you have zero seconds of downtime. Yeah, for that kind of thing. - -115 -01:06:48,980 --> 01:07:12,060 -Scott Tolinski: And I love this stuff. Because you don't have to worry about it. I mean, with galaxy like you have multiple containers, right? it decides always going to be available. Right? Yep. regardless of if one of them is down, another one's going to be up or any of that stuff. So yeah, big fan of that. I've also hosted a lot of stuff on Heroku before too, which can get kind of costly, but same sort of deal really nice. Where did you host to be for digitalocean. - -116 -01:07:12,450 --> 01:08:19,770 -Wes Bos: That's a so I've always been on digitalocean for my my course platform for since it's it started. But but for my other stuff. I've been on Bluehost from my own personal website and a bunch of family members websites for a long time. And now regret that because they did some shady stuff, where what they did is they went into every single word because like 80%, or 90% of Bluehost is just WordPress installs. And they went in and turned on a very aggressive caching plugin on everybody's WordPress install, without like, without telling them or doing anything like that. So I'd like just pissed away for hours being like, Why won't this update, and then I looked into it, and I was googling all these error messages. And it turned out that they went in there and flipped it on, which is such a shady move. So I highly recommend you never use Bluehost ever. So I've been recommending because like these hosts can get expensive when a lot of times people just need like a cheapo $5 a month. So what seems to be everyone's recommending these days is siteground. If you just need a quick PHP host to throw something up on, like nice. - -117 -01:08:19,770 --> 01:08:33,270 -Scott Tolinski: Yeah. All right. Do you remember media temple, I think that was the original home of level up tutorials was media temple. And then they got bought by godaddy. And I noticed out of that so quickly. So as they I wanted to do it. - -118 -01:08:33,560 --> 01:08:51,350 -Wes Bos: I had dinner with a lot of the media temple people once and they're very, they're very separate from GoDaddy, because they're like they talk about GoDaddy as being the rich uncle. Yeah. being like, by the way, GoDaddy, or by the way, temple if you want to sponsor this podcast, come on over. Oh, yeah. Well, that's it. - -119 -01:08:51,350 --> 01:09:00,390 -Scott Tolinski: I know, I never had any issues with media temple. And in fact, I didn't even wait to see if there was going to be any issues. It was simply they got bought. And I just was - -120 -01:09:00,420 --> 01:09:02,550 -Wes Bos: Yeah, I was out of there. Yeah, it was out of the - -121 -01:09:02,760 --> 01:09:22,170 -Scott Tolinski: you didn't know what Addy you didn't know what the future would hold. And at that point, is at the same time, that digitalocean was becoming like very popular. So it was like, oh, okay, I'll check this out, you know, kind of thing. Yeah, yeah, absolutely nothing against media temple. Their service was great the whole time. I had it. - -122 -01:09:22,260 --> 01:10:46,220 -Wes Bos: Yeah, I was on them for a while. And I it got expensive for me. Yeah, just for what I was using at the time WordPress hosting. So I cut over to Bluehost and move everything off of media temple, but it looks like they now also do, like they do managed hosting, so you can use Amazon's servers, but they will manage it for you, which is interesting, kind of neat. I don't know it's not really something I need. I think that like, as I'm getting older, I'd much rather pay a little bit more for a service like now and have them deal with it. Rather than be like, oh, five bucks a month. I can like host my entire world and my bandwidth. bills are cents every month, right? I don't care that much anymore. I rather just have it work and not have to, especially with like things like SSL. Like I have to like, like, a couple Sundays ago, I had my lessons encrypt, auto renew, but I forgot to set up a cron job to reboot nginx. So I was everyone's like tweeting me, like, all your sites are like, what's wrong with your SSL certificates, they're all broken. And I was like, Oh, shit, like what happened like Sunday at bringing out the laptop. I hate doing that. And then, and I just had to like type nginx s reload and everything worked again, honestly, it's a it's a quick cron job that you can have. But I don't want to have to figure out that cron job and, and make sure that it's working. I just want it to work. And I want to enjoy my weekend. - -123 -01:10:46,290 --> 01:11:15,229 -Scott Tolinski: I know that's a huge pet peeve of mine, I feel like SSL is are one of those things that I feel like they're one of those things that if you have a like a future facing hosts around Nice, nice host, and you want an SSL, it should be click this button, give me an SSL, and I don't want to have to do anything else about it. Because there's nothing worse than having to, to, you know, generate your certificate and do all that stuff and upload to your server. It could be so much easier than that. Yeah, yeah, whatever. - -124 -01:11:15,270 --> 01:12:23,700 -Wes Bos: Although I should say Let's Encrypt is, once you have the cron job in place, it is very, very quick like I can I can do an SSL for a site and validate it with like a custom. Let's see, I had to write a custom nginx config to Yeah, to be able to validate it. But once it's up, I can I can kick out a new site real quick. I should also say before everyone tweets me about CloudFlare, I do use CloudFlare in front of all my websites as well, that helps both mitigate DDoS attacks. It helps cache stuff. It helps save on your bandwidth bills for things like images. And then it also gives you a free SSL cert, or it's it sits on top of your existing server and will give you SSL, no problem. But I, I still want to make sure that my traffic between my server and CloudFront is encrypted, as well as from CloudFront to the end user. So I run SSL certs on both. And that way, that way, I can turn off CloudFront at any time, and my another SSL cert will sort of pick up the slack there. Word. Cool. Um, what else do we I think we're running a little bit. Over on time here. We got any other stuff to talk about in terms of what our stacks look like? - -125 -01:12:23,730 --> 01:12:29,910 -Scott Tolinski: Yeah, I guess just future plans, things you want to see out of your platform coming in the future. And then we can do sick pics. Peace out? - -126 -01:12:30,300 --> 01:13:25,520 -Wes Bos: Yeah, um, I think I want to rewrite my checkout flow. There's a couple issues with my checkout flow. Right now. One, I'm using placeholders instead of labels, which is a little bit confusing when people check out. Also, like, my coupon code flows a little bit funny, people often put the coupon code in the credit card form and flip over to paypal. And then the coupon code didn't apply to paypal. And they're like, what's going on? I put it in. And so there's like a couple like little things here and there that that I'd like to, to sort of make easier I would like after our talking about our stripe episode, I would like to try bring stripe JS back. Rather than running it myself. If you want to listen to that episode, you can figure out how I built my own interface to stripe jazz but but like the whole Apple Pay and Bitcoin, I would love to be able to just turn those things on. Yeah, and start accepting them. So that's that's in my very new features a rewrite of the checkout flow. Cool. - -127 -01:13:25,620 --> 01:14:28,800 -Scott Tolinski: Yeah, I since I just rewrote my checkout flow, thankfully, that's been crossed off of my plan. But I must say, I really am really loving the new checkout process. I know the last time we recorded a way to just launched and after like two weeks or a week now it's been really super nice. So pretty psyched with that. But yeah, so I think the future for me would be as much as I love Meteor, you never know what the future may hold. So maybe using less Meteor stuff here and there. So maybe start to look into integrating more Apollo into my data layer. And instead of relying entirely on Meteor, just to I don't know, see if it's see if it's a way to for the future. You know, right now, everything's working fine, though. So that one is obviously not going to happen anytime soon. And then if the site if the site is really growing in in state, then potentially looking to some sort of more managed state system, something like Redux. I don't love Redux. If I'm being entirely honest. I like what Redux does. But I don't love it itself. Don't hate me. - -128 -01:14:29,600 --> 01:14:30,840 -Wes Bos: Paulo. I know. - -129 -01:14:30,960 --> 01:15:15,540 -Scott Tolinski: Yeah. And then there's a server side rendering, which I would add, but like I said, I when I did have it, I didn't necessarily see the performance benefits. I'm not necessarily getting the SEO benefits. But it would be nice to have, I mean, just from a standpoint of when you hit the site, it would be nice to have that HTML already there instead of having to resort to JavaScript to load it all up. So yeah, those are those are some some future plans. But overall, I think a lot of the stuff is adding features, features. features for me. So like a lot of the stuff for subscribers, there's like a billion features I want to add for subscribers here and there. And luckily, my platform flexible enough, it's gonna allow me to just do that as I as I can. But yeah, pretty much it for me. That's pretty sweet. Yeah, I - -130 -01:15:15,540 --> 01:15:40,640 -Wes Bos: think with myself, it's always tough to manage just geeking out on my platform, whereas, like, where I should be spending my time is customer experience and developing new content. So yeah, and that's kind of a delicate balance that we try to have there. And that's why I still have jQuery running on all my sites, because it works fine. And I'm doing just fine. Who knew you could still make money with a website running jQuery? - -131 -01:15:40,970 --> 01:15:49,260 -Scott Tolinski: I know I, I would actually be interested to calculate how much money I lost by spending, like a couple of hours removing jQuery for my site. - -132 -01:15:49,260 --> 01:15:50,250 -Unknown: Like, - -133 -01:15:50,430 --> 01:15:57,540 -Scott Tolinski: I really probably wasn't hurting my load times that much. That said, My lifetimes are nice. Okay. Yeah. Um, yeah, so let's, let's - -134 -01:15:57,540 --> 01:16:02,010 -Wes Bos: get into sick pics. Awesome. What do you got for me today? Yeah, so - -135 -01:16:02,010 --> 01:16:12,810 -Scott Tolinski: I'm gonna go with something that people ask a lot about is my audio interface, which is, I believe you have the same one the focus, right? Sapphire, the red box. This - -136 -01:16:12,810 --> 01:16:16,590 -Wes Bos: Scarlet two idea is what I have. Yes. Okay, so - -137 -01:16:16,590 --> 01:17:50,100 -Scott Tolinski: this is a this is the Focusrite Scarlett two itu, it's basically an audio interface allows you to plug in XLR, or just any audio cables essentially, and digitally convert them to your computer. So if you're doing any sort of audio recording, instead of using maybe like a USB mic or something like that, you're gonna get a little bit better pre preamps. and stuff, a little bit better sound, it's sort of like the next step up from the entry level, like podcasters microphone, right? So and this thing is entry level, you're not going to spend a ton of money, I think it's like 100 something. Let's check. It's not very expensive. 140 bucks, super simple. Plug it in USB, whatever. And it just works. I've paid for way more expensive audio interfaces before I used to use an Apogee. I don't remember the exact model, but it was expensive. And it was really fancy and nice, but at the end of the day actually broke. So you know, two years and it's gone. And then I had another one which is an M audio inbox. Well, it was actually on by Digi design at that point. So Digi design inbox, which integrates with Pro Tools and it was like the top of the line nice little box for you know, using Pro Tools if you're like a hobbyist, and then they never updated their drivers and it's dead it's it's just dead weight sitting in my closet. Luckily, this thing is just nice and easy. No super proprietary anything and it just works. - -138 -01:17:51,330 --> 01:18:05,700 -Wes Bos: That sounds pretty sweet. Yeah, I have again, I have the exact same one. And it's really cool. Like right now I'm I'm being a true radio personality where I hear myself. I have feedback in my my ears of I can hear myself talking and - -139 -01:18:06,000 --> 01:18:14,550 -Scott Tolinski: sounds pretty cool. The next step if you want to get really radio, you got to take one year out of your headphones. You got to get Yeah, you got to yeah, check it out. - -140 -01:18:14,700 --> 01:19:14,640 -Wes Bos: Why don't I just get those like beats that you can Beats by Dre like this is swish back. Yeah, swish my sick pic is not the website hotwire. Which if you've never used it before, it's like this website where you can you just book a hotel in a general area, and it tells you how many stars and the amenities. But you don't know the actual name of the hotel. There's this website called better bidding calm, which will allow you to like match up the location and amenities with a list of a hotel. And every single time that I've used it, I've nailed exactly what hotel it actually is. So you can get some I'm going to New York in a couple weeks. And we want to get a nice hotel, but I didn't want to like pay full price. So I went on hotwire and I was able to sort of look that up. And and see so it's better bidding calm to have this little thing where you can like, click through and figure out, do a little detective work to figure out what that hotel is. Thanks for tuning in to another syntax. We'll catch you in the next one. - -141 -01:19:14,790 --> 01:19:26,640 -Scott Tolinski: Yeah, see you. Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like the show. Until next time - diff --git a/transcripts/Syntax140.srt b/transcripts/Syntax140.srt deleted file mode 100644 index f40921781..000000000 --- a/transcripts/Syntax140.srt +++ /dev/null @@ -1,328 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,589 --> 00:00:48,090 -Wes Bos: Hey folks, welcome to pa syntax Welcome to syntax. This is the tastiest web development podcast out there. Today we are having a potluck which is submitted questions by you. If you ever have questions that you want us to answer related to absolutely anything you can go to syntax.fm in the top right hand corner, there should be a ask a potluck question. You can submit your question in there. If you have a hard to pronounce name, please give us pronunciation as well, because we tend to butcher it with me today, as always, Scott Tolinksi ski. Hey, how's it going today, Scott? Oh, - -3 -00:00:48,090 --> 00:01:10,500 -Scott Tolinski: I'm doing good. It's a little it's a little rainy out here. I'm ready to go. Ready to kick this week off. I just finished recording my latest course. So there's a little bit of weight off my shoulders. I have a built in deadlines that I just hit nyama. And good rage start Devin. I'm working on a full rewrite of the CSS for level up tutorials. And it is fun. It's actually a blast. I'm having a great time. - -4 -00:01:10,649 --> 00:01:49,350 -Wes Bos: Oh, man, that's awesome. I've been just chugging away at my JavaScript course over like, I've had so much travel and workshops and conference talks. And little things pop up here and there. No, yeah. Last week, I've had nothing, not a meeting, no, nothing that could get in my way. And I've just have been having such a productive week, I even got sick. And I still feel like I got a lot done that week. So it's just like a, it's just a good reminder that like, these things are really fun to do. But like at the end of the day, my business is just like making courses. And it's really nice when you have time just to like, focus in on what it is you've been wanting to do for so long. - -5 -00:01:49,499 --> 00:02:30,360 -Scott Tolinski: Yeah, absolutely. I know in my last courses on animating in react, and it's the thing that is like, really love with react spring. So because I just did all this work to to dive into react spring and get like really, really comfortable with it. And sure enough, I get to turn around and on level up tutorials, just use all of that stuff I just taught, I don't have to look at the docs, it's so fresh. In my mind. I'm just like breezing through some nice little animations and transitions. So I'm having a good time with it. And I'm using custom CSS properties for it, which is fantastic. I'm gonna show you that. I love it. So you want to get into some of these potluck questions here. Yes. - -6 -00:02:30,360 --> 00:04:11,490 -Wes Bos: First, before we get into that we are sponsored by two awesome companies. First one is century going to do all of your bug errors and exception tracking. And the second one is Freshbooks, which is cloud accounting. So our first question today is from Mike. The question was media queries. I recently started a static site. And I want as much of the site as possible to change layout with just CSS first sponsor design. I'm comfortable media queries, but often find times the design is very different between sizes. It is easy to tame the complexity of repeated data for different component views by keeping everything in sync. But is it good practice to put two completely different component level views in a single HTML file? Does the repeated data in a static HTML have any effect on SEOs? I like this question a lot, because I just did a YouTube video a couple weeks ago called like, the impossible CSS layout where somebody tweeted a picture at me and said, like, hey, like this layout? Like, how would you do it? It was like, paragraph, image, paragraph, image, paragraph image. And then at a certain breakpoint, it went, all the images went to the left and all of the text went to the right. And you think like, No sweat grid can handle that. And then you get into Oh, no, like, grid isn't good at doing that. Because you have grid rows to think about? And you're like, oh, Flexbox, like, Oh, no, it doesn't really do that. Either. You can't really reorder them into columns, you think, oh, CSS columns, and then you can't you can't really put items into specific columns, they go floats on like, Oh, no, there's no like clear fix issue where the text is longer than the image. And it turns out was just not possible to do it at all. So the solution at the end of day was either to do some JavaScript or to just duplicate the HTML, like, output it twice with whatever CMS you're using. And question is like, Is that fine? Or do you think about that? - -7 -00:04:11,939 --> 00:04:36,540 -Scott Tolinski: I don't think that's fine. I don't think it's fine for a couple of reasons. And they say it's not good for SEO. But I don't know the specifics of this. And I'm going to need some accessibility people to bump me up here. But if you have something in the HTML twice, and I don't know if it's if it's display none if this comes into effect here is the display none. On the element itself. Is it gonna get picked up by screen readers? It won't be it won't be okay. - -8 -00:04:36,569 --> 00:04:57,950 -Wes Bos: No, well, I think if something is hidden, visually hidden, either by display none, or visibility hidden, or you just have like the hidden attribute on an element, both at Google won't see it. And accessibility readers won't pick up on it either. So I think it's fine. If you ever have to do duplicate content like that, then it's it's totally fine to do that. - -9 -00:04:58,169 --> 00:05:15,890 -Scott Tolinski: Yeah, I just It feels weird to me. For some reason I have does Yeah, duplicate navigation and level up tutorials, because the nav is so different from the main now. Yeah, however, I'm actually toggling it via, like it's mounting and unmounting out of the DOM, depending on the browser width. So Oh, yeah, - -10 -00:05:15,930 --> 00:05:50,940 -Wes Bos: see, you add and remove it with react, it's super easy to do something like that, because it will just add and remove it. But if you're not using that, if this was me, I would probably pop a hidden attribute on the DOM element by default. And what that will do is it will ensure even if your CSS doesn't load for whatever reason, or if Google crawls it without CSS, the hidden attribute will make sure that it's actually visually hidden. And then you can just add and remove that attribute yourself. Because I think that's even better than than CSS because like the hidden attribute describes the the DOM content, regardless of, of what CSS is being applied. Interesting. - -11 -00:05:51,210 --> 00:06:02,250 -Scott Tolinski: Yeah, I don't know. It still feels wrong to me. But at the end of the day, if you got to do it, you got to do it. Some of this, like wording in this question leads me to believe that like, maybe the design needs to change a little bit. - -12 -00:06:02,400 --> 00:06:10,500 -Wes Bos: I was just gonna say that. Yeah, like, part of being a good designer is knowing your your limitations, like part of being good designers pushing your limits, right, but also knowing - -13 -00:06:10,500 --> 00:06:35,220 -Scott Tolinski: them, but also so like, the website, or the app that someone is using on their phone? Like, how is it going to be that much different from the desktop app? Like, do you want to have the experience be so much different? That it's like an impossible? Like, if it's just layout, I guess? Yeah, I don't know. To me, it still feels really, like there's an issue here with the initial thought process in the design. But that's just me. Yeah, - -14 -00:06:35,460 --> 00:07:06,300 -Wes Bos: yeah, I agree. I've done it maybe four or five times over the last couple of years where you do duplicate content, just because it is totally different. Maybe it's like a gallery or something like that. And you just can't make it work with CSS, or you're doing some really funky stuff with CSS where the other day, it's probably better just to make two different components or two piece of HTML. But I would probably take another look at your design and figure out because I think the flexibility of grid and Flexbox is pretty flexible. And if you still can't do with that, then maybe reevaluate the design. - -15 -00:07:06,570 --> 00:09:13,890 -Scott Tolinski: Cool. So let's get into this next one is here is how should a mid level developer know when it's time to leave the current company, his tech stack, a decent reason, even though he or she is happy at the place, but feels like they are not growing enough? Yeah, this one is tough, because again, you don't want to leave a company, in my opinion, without having something else lined up. Like, every time I've quit or left a company, it's because a better opportunity showed up, someone was willing to pay me more to do something that is actually interesting to me, or a company that was a nice, nice change of pace, or everything that everything that they had, this is something that I wanted. And that's why I would leave a company. So I've never been afraid to interview while I had a job. Because even if they offer you the job, you can always say no, right? You don't have to accept any sort of job that you've been hired. So if you interview for a job, you learn a little bit about the company culture and all this sort of stuff, and it doesn't seem to be the right fit will then just abandon it. And if you interview for a job, and it seems like the holy grail of jobs for you, and they're gonna pay you more, and your commute time is less, and there's like a lot of positives here, then it's a tougher choice. But you know, I would never limit yourself to say, Hey, I'm looking for a job, or Hey, I'm not looking for a job, I would say my ears are open to opportunities that are going to be good for me in my career. So is the tech stack a decent reason? Yeah, it depends. I was working at a job that was just doing straight up WordPress sites, and an Drupal site. And it's not like I didn't like Drupal. But we were limited to using a certain version of older Drupal that I did not particularly like. And there was just like a lot of limitations on the stuff that we were able to write. And so for me, it did feel like I was sort of drowning in and not advancing my career at all. And that was the reason why when a job came along, I was happy to accept the job for a number of reasons. But again, yeah, I would just keep yours open apply for stuff that's interesting to you. And then if if it's not good when you get there, you don't have to take it. - -16 -00:09:14,010 --> 00:10:40,110 -Wes Bos: Yeah, that's a really good answer. I like it because you don't have to accept the job right? The thing that sticks out to me in this question is that they say he or she is happy in their place so think like being happy in your job is very underrated because oh yeah, there's probably a lot of people that make really good money in are absolutely miserable at their job, or they have a brutal commute. And like I see that personally a lot where I live we're live about I don't know, like an hour commute into the the big city and there's lots of people that live in these huge houses and they're absolutely miserable and their job but they've got this like sort of lifestyle creep that they have to sort of keep up with and it's really frustrating to see people like that because they feel like they can't make some sort of change because of that. So I think that's one reason maybe if you're happy that's that's a reason maybe to stay in and just To keep looking at it, if you don't think that there's room to grow, maybe talk to the person who Who's your boss and say like, hey, look, I feel like I'm just stagnating in my skills, this is ever moving industry, maybe we should move up other opportunities, shorter commute time is probably well worth it. Money, obviously is a big factor. They're working on things that you are passionate about. So maybe you're not super stoked on like real estate websites, maybe you are, maybe you're not, but you get the opportunity to go ahead and work for a business that saves cats all day long. And that would be like really fulfilling for you. So there's just so much that really goes into it. But I think pretty much what Scott said is most important. Yeah, and - -17 -00:10:40,110 --> 00:11:12,299 -Scott Tolinski: I personally left a job that I really liked for one that I ended up not liking, it had a worse commute, it had, the pay was better, but like the work was not as good. So you know, you can always make those changes and possibly regret those changes. But at the end of the day, just take it out, get a new job, move on, you know, this is one of those things that there is if you hit a crossroads like that there is a potential that your new situation isn't going to match your old situation. And that's okay, too, even if it is a bummer. A little bit. So - -18 -00:11:12,419 --> 00:11:14,279 -Wes Bos: yeah, you might goof it up, - -19 -00:11:14,279 --> 00:11:15,210 -Scott Tolinski: you might move it up. - -20 -00:11:17,429 --> 00:13:24,270 -Wes Bos: Next question we have here from Chris is should I worry about critical vulnerabilities when installing an NPM package? So right now, when you install, I think, as of NPM, was it six or something like that, when you npm install something, it also does a security check to see if any of the package versions that you are using, or if any of the dependencies down the tree and we all know as as node modules and NPM installs works is that sometimes you can go 400 levels deep have dependencies have dependencies having dependencies and if anywhere down that tree, there's any sort of vulnerability, it will report to you that there's like 400, mild, or I don't know what they're called, there's a critical, low, high, mild text max version of vulnerability. And the question is, should you be worrying about that, specifically, the critical ones? And I think he absolutely, first you should check out what's going on. But I think what's really important is that you should figure out it, can I easily upgrade this, if so, why not go for it, if it's an easy upgrade, you get rid of that Father ability, then you can sleep easy at night, sometimes it's a whole version bump, they fix it, they don't like patch, the older version that you're working with, and they bump it to the new one. And I specifically have this with my courses, sometimes where the course is built on a specific version. And the next version up API is slightly different. It's not really any new features. So we'll just stick with the version we have so that people don't trip up. But then when people npm install, you get critical vulnerability in the thing, and that's not great for being scared. But if you go and see like, what is this vulnerability, almost always it's just like this super weird edge KC thing where like, if you use this and a certain way with a regex, then there's a slight possibility that if you have logs that are viewable, there could be a big security. So go ahead and look at how would you have to use this thing? Because there might not be a use case where like, Oh, I didn't actually use it in this specific way. And it's it's not actually a vulnerability to me. And it's kind of scary to think about, but of course, just go ahead and review your code. See how you actually are using that specific package? - -21 -00:13:24,330 --> 00:14:24,000 -Scott Tolinski: Yeah, definitely. And also, like, what are the stakes of this packet like this? What are the stakes of this project? Is this client work? Is this public facing work? Yeah, this is some like private, just exercise that you're doing for yourself. I like wouldn't even necessarily as long as there's no, like, security concerns there. Like if it's just a mess around sort of thing. I don't know, I might not worry about it. But for the most part yet, you do want to you want to check this out. One of the things that I wanted to mention here about like upgrading your packages was do you use yarn or NPM? I use NPM. Okay, well, yarn has a really sweet upgrade interface called the upgrade hyphen interactive, and it'll give you a green, yellow or red letting you know if it was like a major version change or breaking change. And so that way, like you can Yeah, you can see quickly all of your packages, it's sort of like the there was an NPM package that did some same thing. But this gives you an easy thing. You can see all your green ones, this should be cleared update, you can update them, and just move on. And hope that fixes it. - -22 -00:14:24,210 --> 00:15:02,909 -Wes Bos: Yeah. And on NPM we also have something called NPM outdated. So you just run it and it will show you what packages you have what current version, what current version you have installed, what is being matched by the what's the called with the three dots? What's it called sis seven, their semantic versioning. And then what the the latest version is, I specifically use an external package called NPM. Check update. Yeah. And then I just run ncu on my repos all the time, and it'll, it'll show you what needs to be updated and you can either just push it to the package JSON and accept them You mainly can go through and update them as you need it. - -23 -00:15:03,049 --> 00:15:52,710 -Scott Tolinski: Yeah. ncu is the one I was I was trying to come up with. All right, next question here. I've had the idea for styling one side, two different ways professional slash artistic, and giving visitors a button to toggle between the to, to gimmicky. And a secondary question, how did you pick your brand color? Well, okay, so the first question is, they want to build the site and have a button that's going to toggle the visual interface, take it from professional to artistic, and they want to know if this is too gimmicky. I don't think this is too too gimmicky. I think this is cool. I think this is fun. And like it again, because it's like sort of none. It's not important, really, it gives the user the option, and they'll see the button, maybe they click it. And as long as everything is cool, and fun and good, then I think it's gonna be kind of cool. I think this is great. - -24 -00:15:52,890 --> 00:16:59,010 -Wes Bos: Yeah, I think it's really fun as well. I remember back when I was just getting into web development, there was this band called the junction. And they had this song called Good morning. And what they did is that they had a different design for Good morning, good afternoon, and good evening. And then depending on the time of day, it would load the different CNS. And I thought that just blew my mind at the time was like, how do they know what time it is in the website, and I just I couldn't even fathom how that could possibly work. And I'm like, they must be running PHP. Like that. And there must be a way in PHP. Like, I just like, I have such fond memories back then. Because I like I just remember thinking of like, all the possibilities of web development back then. And now like, I'm just jaded old man, like, of course, you could use PHP to check the time, depending on what server the located in. But I thought that was was really, really funny. I think it's cool to go ahead. And that's sort of the idea behind the whole CSS Zen garden as well, where you have the same markup, and you should be able to style this thing differently. Given that you have nice semantic markup, - -25 -00:16:59,100 --> 00:17:09,720 -Scott Tolinski: I still love CSS and Zen Garden. I remember being just absolutely blown away by some of those examples at the time just being like, how can you do all of this with CSS? Yeah, this is amazing. - -26 -00:17:09,959 --> 00:17:23,490 -Wes Bos: We should do like a syntax garden or something like that, where we come up with some markup and then see how everybody styles that differently. It's a great idea. That's Yeah, if you want to see that tweet us at Wes Bos goddess asked Alinsky. - -27 -00:17:23,840 --> 00:18:16,470 -Scott Tolinski: Yeah. Okay, secondary question. How did you pick your brand's colors? I didn't pick my brand's colors personally, despite loving purple and teal. I think for some reason, the designer just sort of telepathically knew that purple and teal were some of my favorite colors. So now we worked with a designer, he came up with the logo and the brand's colors. And we went from there there was originally sort of like a neon greenish involved to that we have not been using, just because there's a lot of colors going on. But yeah, so purple, and teal. You know, I used to like, I used to have a ton of purple and teal stuff growing up. Obviously, I had the Charlotte Hornets starter jacket, like a lot of kids did, and just have like, t shirts and all sorts of stuff. So now it's just the colors fit me very well. I saw them I was instantly like yes, this is where I want to go. - -28 -00:18:16,550 --> 00:19:02,160 -Wes Bos: That's funny. Actually, mine goes back to basketball as well. I when I was a kid, I loved the Lakers, and they were purple and yellow. Yes. And I've always stuck with a specific yellow regardless of where I'm going. With my design very early on, I did purple and yellow than a my current website is like, like a kind of a light black in yellow. Obviously, I've my cobalt to everything, which is a very specific blue, those colors came from there's the original theme called cobalt, which was it looks fairly different. But it was based on being blue. And then I sort of tweaked in pick the perfect blue that I like, and I've always kept that yellow. And then my new website again is going to be like sort of a black and yellow grungy. So. I don't know, I just always stuck with it. It just I feel like regardless of where I go that specific yellow always looks good. - -29 -00:19:02,489 --> 00:21:54,510 -Scott Tolinski: Yeah. Cool. I like your colors. Thank you. Speaking of purple, one of our sponsors today is also purple. And they're gonna make you not feel purple, they're gonna make you feel very green, and good and happy. Because this century here, is@sentry.io is going to be the place where all of your bugs and exceptions live so that you can solve them. Right now I'm staring at my century, and I'm seeing a couple of instances of some errors that have been popping up overnight since the last build. And I know what I'm going to be doing this afternoon, I'm going to be taking care of these issues. I'm going to be referencing them to GitHub issues, we're going to be tracking them, we're going to be completing them. I'm going to be assigning my build to be a new build and century so that when the new build goes up, I can see if there are regressions. So this is one of those tools that again it makes your life so much easier. If you have a project that people are looking at people are using. You're going to want to use century head on over to century.io And use the coupon code tasty treat all lowercase all one word, and you will get two months for free. That's more than enough time to find out that why Sentry is so, so awesome and why we like it so much over here at syntax. So head on over to sentry.io coupon code tasty treat. Alright, next one, any sick tips on a career change. I'm a full time employee with two kids and a lovely life who wants a fulfilling career. I throw as much time as I can to study but I feel like there isn't enough time there isn't enough to apply for jobs. I've always been the one to cast a pretty wide net. When it comes to this sort of stuff, I apply for a lot of jobs, I just go for it. I apply for jobs that are above my league. I go into do interviews for things just for the experience to get better at interviews. I think some of it is if you aren't getting callbacks and you aren't getting advancement in sort of interviews, you might need to look at your process, what are you doing to make yourself stand out, I always bring or do a personalized cover letter. For every single job interview, I do a little one page personal cover letter, I tune my resume for each thing that I apply for. And so my sick tips on career change is cast a wide net talk to a lot of people, a lot of times these jobs, they show up or they're being presented and things like meetups, and if you will have an actual personal connection with somebody at a meetup, they used to say, Hey, hi, I'm here, I'm a real human being, then that could help you get your foot in the door a little bit. So I would make myself visible, I would talk to a lot of people tell people that you're looking for a job change, go to those meetups and hopefully try to get this this get this career change going because trust me, once you're over once again, once you have a dev job, it's easier to get another dev job. So just just hustle for that first one, - -30 -00:21:54,539 --> 00:23:12,300 -Wes Bos: you got to get your foot in the door at some point, planning just thinking of people that I have seen who have made that sort of jump. And even like I might workshop, I forgetting his name, apologies if you're listening to this, but he is working at the Apple store as a genius right now. And he's looking to make the jump into web development, which coincidentally is also the exact path that Tom Dale is of ember fame has taken as well. So I thought that was pretty cool. I let him know that. But he's just like, perfect. Like I always see him on Twitter, I always see him on Instagram, I always he's he was all over the conference, first row of the workshop. And obviously putting a whole lot of time and stuff into this, I think as much time as is putting into the actual skills he's putting into the actual like meeting the right people and getting in front of people and all that good stuff. So I thought that was a pretty cool way. I also think that we should probably get somebody on the show that is like, like the hires, not like a, I don't know, someone that has hired a whole bunch of people. We have somebody lined up that we're gonna talk about hiring juniors, Mm hmm. But also some someone that knows about making this jump because it is frustrating when you only have like an hour or two a day to devote to this stuff. And you you want to make the switch. But you might have to sort of keep at it for a couple years before you can get your skill set to where you want it to be. - -31 -00:23:12,419 --> 00:24:08,820 -Scott Tolinski: Yeah, I mean, I've been hiring. I've been a part of the hiring process. Courtney's hiring somebody right now. So I'm like, really experiencing some of the things that she's experiencing with this hiring process. And let me tell you, there are some bad, bad resumes, candidates, interviews, you name it. And I just, there are so many times we had a, I don't want to call out too much about this, because I doubt this person that's listening. But we had a job interview one time, and it was at a computer store. And we asked the guy, okay, here's the situation. You're repairing somebody's MacBook, your hand slips, he'd knock a capacitor out the logic board or something, right? You break their logic Park, what do you do? Like what what is the what is the step? And this guy comes back with this. This is an interview. And he says I would order a new one from Apple and pay out of pocket and not tell anyone. - -32 -00:24:09,779 --> 00:24:10,500 -Wes Bos: Oh, my God, - -33 -00:24:10,500 --> 00:24:14,880 -Scott Tolinski: but never you man. Like that is the worst answer possible. Like why - -34 -00:24:14,880 --> 00:24:15,630 -Unknown: would you just - -35 -00:24:16,109 --> 00:24:45,780 -Scott Tolinski: tell somebody and get it taken care of and apologize? Like, I just couldn't believe that, like what the thought processes that would go through somebody's head to give that question. So if you struggle with confidence in interviews, I know some people struggle with confidence in interviews, just remember that guy. Remember the person who said that they were going to unethically you know, sweep it under the rug, and know that that's who you're up against a lot of these times. So just know that there are bad candidates and you're probably not a bad candidate if you're putting in the time. - -36 -00:24:46,019 --> 00:25:48,360 -Wes Bos: Next one we have from anonymous. Within the next two years. How well do you think Web VR and web xR? What's web xR? It's a great question. Let's look it up here, head to the Google Web. xR device augmented reality Oh, this is Oh, this is the augmented. The specification describes support for accessing virtual reality VR and augmented reality AR. So xR must be the spec. That's from the W three C. Oh, yeah, this is just updated two months ago, the spec for the API on the web. That's, that's pretty nice. Pretty neat. Yeah. Anyway, so Web VR and web as xR technologies would fit into mainstream development in a frame spark AR react 360 in normal websites and applications. So I'm very curious to see what you think about this, Scott, cuz I've always not gone into this at all. Hmm, primarily, because I've never been a gamer. And it doesn't appeal to me really all that much. There's a few augmented reality, like the measuring app on the - -37 -00:25:48,810 --> 00:28:21,780 -Scott Tolinski: a lot of augmented reality stuff that would I think it's gonna change your life, I think, yeah, reality will change your life. Yeah. So I guess that's my thoughts on it is so VR is really cool. And I'm really interested in in VR, in general, for a lot of reasons, like the thought of it. And this is sort of this is sort of terrifying, like feature sort of thing. But like being able to put on a VR headset, turn on the little misting fan, and this little lamp and pretend you're on the beach. Like, if you can't go to the beach, that's probably just pretty second best for like meditation wise, right, you could meditate on the beach. And there's like a lot of like practical applications, or one of the cool things I was looking at when I was getting into speaking was using a VR headset to practice speaking in front of crowds, because you can put on a VR headset, and see yourself in front of an audience, right. And there's a lot of like, really practical applications beside or be beyond gaming for this sort of stuff. But I think AR is one of those ones, that's going to just really just sort of blow everybody's mind once they're using it all the time. And once the the VR, or the AR implementation that comes out, that's like perfect, I think things are going to be really wild. So imagine this, you're you're at the you're at the store, you see several bottles of wine, you could just point your phone at them. And all of a sudden, you're getting user reviews just sort of hovering over them. You're it's almost like you're getting notes, tasting notes, because how much can you have on that little card that tells you about the bottle of wine, this can give you like maybe unbiased user reviews or whatever you just holding up your phone places, or visualizing a tree or landscaping in your backyard or visualizing furniture inside of your house. I mean, there's just so many interesting practical applications for AR and I know a lot of companies are doing it already using the native implementations on on iOS on their eyes. Yeah, like their IKEA like putting items in your your house or and things like that. I don't know, I think this is super cool. I haven't heard of WebEx before I really want to play around with this. Web VR is something that I've been really keeping keeping my eye on, there's a react VR for those of you react fans, I don't know, this stuff is really interesting. So within the next two years, how well do you think these technologies would fit into the mainstream? You know, I think they're going to be more mainstream. I don't think VR websites are going to take over normal websites anytime soon. I think AR is more likely to slowly creep until we're doing a ton of AR because again, that measuring up the furniture stuff, all that stuff is like creeping in. And I think it's gonna continue to creep until there's that like, perfect implementation of it. - -38 -00:28:21,960 --> 00:29:36,690 -Wes Bos: Yeah, I think Web VR is gonna be a little much for people to strap on some goggles. And I think that's that's a whole nother thing. But I think something like when we got GPS in our phone, that was like, Man, that's so handy. It's so handy to be able to have maps and be able to point where I want to go or figure out what stores are close to me and think like the Web VR or VR AR augmented reality is going to increase that handiness a whole lot more though. So IKEA Shopify, if you want to buy like a lamp, you can already do this on their app, you can just look at your room, and it will place that item, you can see what it looks like in there. I just measuring so things like I do a lot of online classifieds. And I sometimes see people use the measuring app on the iPhone to just measure like a desk or something like that. So much easier than having to just like measure it yourself and then write it down. And then for the person to figure out okay, the they have to like superimpose those measurements in their head on top of the actual thing. I think that's going to be extremely handy directions to items inside of stores. I know you can like Like Home Depot. If you want to know where something is. It'll tell you what I'll things like that. But imagine just like holding up your phone and telling you to go left, right straight. - -39 -00:29:36,930 --> 00:29:50,700 -Scott Tolinski: And Google Maps is sort of doing that right now. I don't know if it's in all of the versions of Google Maps, but there is a versions of Google Maps, whether it's like a beta or something where you can hold up your phone now and you're getting augmented, like really? pathfinding. Yeah, that's - -40 -00:29:50,700 --> 00:29:56,250 -Wes Bos: what I want. Yeah. Oh, that's awesome. I can't wait to get that. I don't think it's on iOS. Yeah, - -41 -00:29:56,580 --> 00:29:58,950 -Scott Tolinski: I just my Google's just triggered - -42 -00:30:01,740 --> 00:30:28,410 -Wes Bos: That's awesome. Yeah. So I think that it's going to be really cool. I would watch that web xR, which is the the API for bringing VR and augmented reality to the web, just because like, like, like all things when there's something new, it's just ripe for conference talks in YouTube videos and blog posts about how these things work. And if you want to sort of hit your, we always say this wrong, hit your dog to that wagon, or whatever - -43 -00:30:28,800 --> 00:30:30,390 -Scott Tolinski: you want to hit if you're a good - -44 -00:30:30,390 --> 00:30:33,600 -Wes Bos: wagon to hit your horse to Yes, we're hitting - -45 -00:30:33,600 --> 00:30:34,410 -Scott Tolinski: horses. - -46 -00:30:34,830 --> 00:31:55,050 -Wes Bos: We're hitting horses here. All right, next question. What do we got here? This is from TC, should I learn full stack JS or jam stack for freelancing? So we'll go through it real quick, full stack JavaScript means you do the front end, whether that is statically rendered, whether that is something like react or view, then you also do the back end, which is something like like a no jazz on the back end, or PHP back end, Laravel, whatever that's that's kind of the idea of full stack. Jam stack is the front end is just a static generated site. It's JavaScript API's and markup. And you can have react on the front end, and then that that will talk to a bunch of API's via back end. So the thing about jamstack is that you still need something on the back end. And there are plenty of companies that are willing to give you some sort of service, that will be that back end for you. But at a certain point, you're going to need to implement some sort of custom functionality. And if that's the case, you're gonna have to build up some sort of server side, or you're gonna have to spin up some serverless functions, you're still going to write some node. So I don't really think that there's all that much difference here. It's just sort of an implementation or a cool name. But the whole jam stack phrase is trying to be pioneered by these companies, because it's a good name to sort of encompass this new way of building websites. - -47 -00:31:55,050 --> 00:32:57,600 -Scott Tolinski: Well think about that, you know, my, my first inclination is just always say, go with whatever you're the most comfortable with. So learn Jas deck, or full stack for freelancing. Yeah, if you're learning in both from scratch, I would just pick the one that calls to you the most, maybe dip your toe in a little bit of jam stack stuff, and maybe you're feeling like there's too many pieces to it, or dip your toe into full stack, and maybe you're not feeling comfortable all the way up the stack and down the stack, whatever, I would pick the one that's easiest for you to build things quickly, fastly, especially if it's for freelancing, a lot of the things that freelancing is going to be about saving you time, you don't want to spend a ton of time on your projects, you want to get them done, you want to get them, you want to get them to be excellent. And you want to get it out, you want to push it out, so that you can cash in and move on to the next one. Because freelancing is one of those gigs where you always got to be moving on to the next one, you don't want to spend way too much time on one project here. So again, you want to do something that you're efficient in. And that's pretty much my my outlook on that. - -48 -00:32:57,860 --> 00:33:26,760 -Wes Bos: While we're talking about this jam stack. Do you see that Netlify you obviously saw this because I was at the conference where they showed it to us Netlify announced this thing called dev MX, which is going to allow you to sort of run all of the things that Netlify runs in the cloud locally. So it will make your sort of development process a lot smoother. You can run things like serverless functions locally, and you can without having to deploy them to the cloud in order to test them out. What do you think about that? - -49 -00:33:26,850 --> 00:33:33,750 -Scott Tolinski: Yeah, not only have I seen this, Wes, used it? I've already used it. Yeah, no, it was probably - -50 -00:33:33,750 --> 00:33:35,850 -Wes Bos: converted your whole platform to it already. - -51 -00:33:37,980 --> 00:34:36,270 -Scott Tolinski: was talking to Sean a little bit about I had, I had an issue where like, I have a site on Netlify. And the contact form is like more complex than just like, Alright, here's the form, send it to somebody. Like there's a lot of steps involved in like, if it goes to this person than these emails need to get fired off. And so I dove into functions. And so one of the things is when I was first looking at it, john was just like, oh, you should use Netlify dev to try it out. So I tried it out. I wrote my functions. I tested it, I pushed it up. It's a it's still in beta, right? It's not quite there. There were like a couple little weird issues. And it could have been with my platform or my setup. And like right now sort of the deploy sort of scheme for things is quite quite right for me. But the system was really nice. And it was really easy to get going once I I used one of their their templates, I just did like emails have lit and it just threw a bunch of code. And now I have it. It's great. It was very smooth. - -52 -00:34:36,380 --> 00:35:10,230 -Wes Bos: Yes, one problem I have with sites now right now I'm actually working on moving my course platform over to sites now and they don't have any sort of solution. They say they're working on it, but I don't have a solution for running it all locally. So if you want to like run it locally in here like make you have to like replicate the entire like server locally with your own custom Express and just hope it works exactly the same as before. ploy, which is odd. So hopefully, it'll come out with something like this because I think the whole like serverless thing is a little bit too hard. And there's a lot of companies working on it right now to make it a little bit smoother. - -53 -00:35:10,400 --> 00:35:39,170 -Scott Tolinski: Yeah, I like it. Because it does, it reminds me of my own platform, because I have my server side stuff sort of side to side with my UI stuff. So yes, my API just lives in a folder, and then I only have one start command, I don't have to worry about anything, and it just just works. So yeah, I had a pretty good experience with the nullify Dev. I can't wait to see what it's done. Okay. Here's the next question from Leo. And this question is front end development dying? No, it's not it's not dying? No, - -54 -00:35:39,330 --> 00:35:45,210 -Wes Bos: I don't know why. What kind of question is that? Why would it be dying? Like, what is it being replaced with my interface? - -55 -00:35:45,230 --> 00:35:50,460 -Scott Tolinski: Yeah, I know, people will be like it's being replaced with wisdom. No, you don't know what wisdom is, if you're saying that. - -56 -00:35:51,510 --> 00:35:59,190 -Wes Bos: We should do a wazzle show. Just to get out what that is. We haven't done one yet. Have we know what web assembly? - -57 -00:35:59,210 --> 00:36:44,130 -Scott Tolinski: Yeah, we should know, we should we should put that on the docket. The ad, no front end isn't dying. It's getting better and better. And it's, you can now have a progressive web application in the Google Play Store. If that tells me it's like more than not dying. It's it's flourishing. As this typing, he's typing. Are your books dying? As a segue for me to get into Freshbooks advertising? I love it. I love all the exclamation points and question marks you put here was, yeah, are your books dying? is a good question, because maybe you should be looking at new, fresher books. And Freshbooks is one of our sponsors. Today, they've been a sponsor of syntax for a very long time. And fresh books is the amazing cloud accounting software that will keep you and your books organized. - -58 -00:36:44,399 --> 00:37:27,230 -Wes Bos: Yes. So if you have any sort of small business that you're trying to run, it takes up a lot of time, just sort of managing the books, inputting expenses, taking photos of receipts, following up on late payment, reminders, all of that stuff takes away from your actual business. So I suggest you that you sign up for Freshbooks, with his cloud accounting to manage all of that for you, it will automate a lot for it, you can hire somebody else, just to input all the receipts for you. That's specifically what I do, just because that's, that's probably the biggest task for me, and I have someone else do it right into the Freshbooks team account. It works really well go to freshbooks comm forward slash syntax, you're gonna get a 30 day unrestricted free trial. And thanks so much to Freshbooks for sponsoring. - -59 -00:37:27,650 --> 00:39:06,110 -Scott Tolinski: Thank you. All right. Next question here. How do you deal with CSS and .js, when you have one off stuff, a couple of components, selectors, like CSS Grid container, and a grid child, CSS feels very verbose for this use case, this is from Ben greenhouse. Now, I, I basically organize my stuff like this, I have my elements that I'm going to be using over and over again, it's my reusable stuff. And then if I ever have any individual one off styling, those live in the components where that component is used, that's pretty much it. I think some of this stuff with CSS, once you get into it, and you have, you're noticing you have a lot of one off stuff, you have too much one off stuff, maybe there's something with your system that's worth looking into, maybe you're just tacking on a bunch of stuff to your system, typography, I think that's actually like a thing for me. Now, if I noticed that I'm defining font sizes, then I need to do something. Because my font sizes should be part of the system, I shouldn't have to have a one off component to define font sizes or something. So for me, again, I keep all of my reusable elements in one place and an elements folder. And then if it's a one off thing, this this design, this layout, this is only used in this particular space, I define it in the file and just use it as a status component. And that's that's that there are a lot of other ways that you can go about it with like the CSS Prop, or maybe the style prop that comes within react, and you can just have it as an object for CSS. There's a lot of things but yeah, does it feel for both? Maybe, maybe it feels verbose to define these components in this way, but I don't mind it. That's just me personally. - -60 -00:39:06,570 --> 00:39:40,230 -Wes Bos: Yeah, it's specifically mentioned, like think of a grid area, where you just have one element needs to go in a specific area, if that's the case, like Scott said, use inline CSS. So on react, you can have a style prop in any other thing. I'm sure you can just use style equals, and then just apply it directly to the element. There's nothing wrong with that. It's sort of sometimes people think like, oh, if you put CSS as an attribute on an element, that's a bad practice. And it's not it's like, obviously bad practice if you're doing that a ton, but that's exactly what it's for is when you need to just directly attach it to something because that's a one off. - -61 -00:39:40,460 --> 00:39:46,740 -Scott Tolinski: And if you want to get on that note, have you used the the CSS prop and styled components, - -62 -00:39:46,770 --> 00:39:48,330 -Wes Bos: the CSS prop? - -63 -00:39:48,359 --> 00:40:02,970 -Scott Tolinski: Yes, this was recently added because it was a feature of emotion that people really liked. And they they brought it out. What does it do? It basically allows you to write a CSS string directly prop rather than Oh, okay. Yeah. - -64 -00:40:02,970 --> 00:40:06,030 -Unknown: So I weigh on a styled component. Yeah. - -65 -00:40:06,090 --> 00:40:20,280 -Scott Tolinski: So it differs a little bit because it keeps it all within stuff components that way, rather than having it be a little bit of style components and then a little object. As soon as you have an object, then it's outside of style components, you lose any, like pre processing, or whatever you - -66 -00:40:20,280 --> 00:41:18,300 -Wes Bos: have set up with that. Oh, that's so I would probably reach for that. other stuff. I think that like one off CSS is is awesome for style, CSS, and js. Because I think of anything like landing pages or marketing one off pit sites, or sign up boxes, things like that. Those would always just be added to my CSS and then never again, like the other day, I found some CSS in my own course platform that says Black Friday 2016. I was like, Dad, this is so old. And if I had to use styled components for that, the, the sheer fact that I don't have my 2016 Black Friday banner on the page anymore, means that that CSS would never make it into the final bundle. So there's huge bloat that comes with one off CSS. And if you can have some sort of system that will automatically call the CSS that you don't necessarily need, then that's great. So if it's more than just adding a great area, and it's like, oh, I just need to like write some custom CSS just for this thing. I think CSS in jazz is perfect for that. - -67 -00:41:18,650 --> 00:44:28,860 -Scott Tolinski: Yeah. This is one of these things that I'm really loving right now, as I'm rewriting my entire CSS of my site, I the amount of stuff that I'm looking at, because it's been it's been years and years and years of just patches, and additions and changes. And the site is so incredibly different right now than it was when I started coding it. That is like, that's why I'm ripping everything out. Because you're patching on top of a patch, the system itself is no longer the system, and you're trying to make it all work. And to me, it's so funny to see some of this stuff. I'm having an absolute blast, deleting CSS, I'm like, Why is this here? Later deleted? Alright, extra components deleted? I did like a find for font size and line height and all this stuff. And I just deleted them all. It was great. felt very good. Next question here. It says Scott always talks about Meteor. I think it's really cool to what's the future of it? And why didn't it take off? It seems to have slowed down, they seem to have moved on other projects like graph qL stuff. Yeah. So I think the thing with Meteor was, is that when they initially launched, they didn't have NPM support, I think that really made a lot of people weary to try it, because everybody's so used to NPM. And Meteor soon after added NPM support and sort of by then I think the hype cloud had already even passed over it. But Meteor makes it really super easy to get started with things. And they also had their own front end framework, which I think was a bit of a thing for people when they first started, right? meteors Blaze is sort of like a view ask framework at the time. And it was really cool. I really liked Meteor Blaze. But then I don't think they moved quickly enough to support react out of the box and get it out of the box, that sort of thing. And maybe that's why it sort of has progressively slowed down. That said, I still really like it for building a meteor and react site with react on the back end. I really like it for building an Apollo site, because it makes getting set up with a database and authentication all that stuff very easy. That said it is it is slowing down. I think the community with Meteor, they think one of the big problems that they had was that they didn't give community open source access to do pull requests fast enough pull requests were just sort of sitting there. There wasn't like a big emphasis on like the community submitting code. And that said, there's still updates coming on the the most recent update to Meteor has been really good. There's been a lot of new features added to the build tool. It's been progressively getting better. But again, yeah, I do think it has slowed down. So you know, I don't know what my status on recommending it is. It's definitely really great. If you were planning on a project that you're planning this to be like your project for now until whenever maybe not pick it. But if you're looking to get up and going on something fast, there's no reason not to pick it. It's really nice. But yeah, that's pretty much all I have to say about that. You can always the meteor forms are usually pretty going or whatever. I'm usually hanging around there. So that's all I have. Yeah, part of the show is when we get into something called our sick picks. And our sick picks are the picks where we pick anything and seriously, it could be anything a podcast, a movie a book, and we tell you if they're sick, or what we like, do you have a sick pick today with - -68 -00:44:28,950 --> 00:46:13,020 -Wes Bos: I do, I'm going to sick pick the DeWalt oscillating tool or any any oscillating tool really it doesn't have to be the default one. And for the last like I don't know, three years every Christmas and birthday have been asking for a new tool because these I have a whole bunch of batteries and you have to like once you buy into a battery of a specific tool, you have to stick to that battery. Otherwise you have all types of different batteries and whatever. And I got for Christmas the oscillating tool which is this like maybe it's you have to Google exactly what it is. But it's this tiny little blade on this tool and it vibrates back and forth really quickly. And it has like cutting blades that you can put on top of it kind of like a saws, all but much more precise and somebody wants to refer to it, it's their like, get out of jail free tool, where anytime you don't have this specific tool to get into something, this is probably the one that's gonna save you. And I've been doing some work in my garage this weekend. And I had a cut off a whole bunch of stripped bolts that couldn't come off and I had all these nails in the wall that the heads had been like, my garage is like 100 years old, there's all these like old timey square nails in it, and I just couldn't get any of them out. And I needed to get them out of there. So this little oscillating tool gets into little nooks and crannies, if you need to cut a little piece of wood or trim something. It's amazing. So it's just a handy little tool to have around. And I got it I don't know, for Christmas a bunch of months ago. And I've used it a couple times since then I've bought a couple bikes that had stripped bolts on them, and I just cut them off with that. But this weekend is like the first time that it used it like 15 times like man, this thing is handy. So it's one of those tools that you just wait until have it and then wait until you actually need it because you're gonna need it at some point and it'll save you tons and tons of time. It looks awesome. - -69 -00:46:13,260 --> 00:46:28,020 -Scott Tolinski: I can think of a ton of things I would use this for right now. But I can't add any tools. I can't I can't add any more tools. I need I have nowhere to store them. I need to build a like a shelf first like a tool. Do you have like a tool rack shelf thing? - -70 -00:46:28,050 --> 00:47:06,450 -Wes Bos: Yeah. Garage I have this like tool bench? Did you buy the old man No, like it was in our garage when we got there. And it had like a bench grinder and a vise and a pipe cutter and all of those things were old and I couldn't get them off. So I just took this little zip thing and cut the bolts, right like I went in between the the workbench and the bolts and cut them right off and then and then I can get rid of them. And now I have this nice like, open workbench and I have a little shelf that I could throw all of my all of my tools on. It's not great because I have to bring them in in the winter because the cold in Canada is not great for the batteries. But oh yeah, it works well for the the summer. - -71 -00:47:06,510 --> 00:47:18,990 -Scott Tolinski: You know, it's like I have I have 100 year old garage. Why? Why couldn't somebody have built a tool bench over the course of those hundred years? And then I would have it like now I have to build it myself. It's been 100 years Come on, somebody should have done - -72 -00:47:19,470 --> 00:47:25,350 -Wes Bos: somebody up and at what, what has happened that is leading up to me having to build one right now. - -73 -00:47:25,410 --> 00:49:01,560 -Scott Tolinski: Exactly. There's no remnants of one, it's clear that one has not been there. So yeah, I'm jealous TJ and I gotta get one, my sick pick is going to be a book. This is a book that I really enjoyed, especially, it's brand new, it just came out I had it pre ordered. So I got it the day of it's called the making of a manager. What there's a little subtitle here, what to do when everyone looks to you. It's by Julie's Ooh, if I mispronounce your last name, I'm sorry, Julie. This book was so good. She worked at Facebook. And she basically was put into a managerial position. And basically, this book is sort of about lessons that she learned while becoming essentially a manager, the making of a manager. And I just found it to be really, you know, some books are just like really authentic sounding, I guess that's the right word to use. You know, she doesn't come across as somebody who's trying to sell you anything, some of these times these books, you can into this stuff. It's like a whole system and blah, blah, blah. And this is just very sort of, it's personal, but it just feels very authentic and genuine. So I really enjoyed this. If you're any sort of position where you need to manage people I found it is a nice little way that you can learn from lessons that she learned in her career so far. And I've just absolutely really, really enjoyed this book. I've heard that the actual book version has some really great illustrations in it. And unfortunately, I got the audiobooks. I don't get those. But I'm a huge fan of this book. And I think if you're in any sort of managerial position, you'll be interested in it again, it's not like a son of dry read or anything like that. I found it to be pretty entertaining and fun. Awesome. - -74 -00:49:01,590 --> 00:49:03,720 -Wes Bos: That sounds pretty interesting. - -75 -00:49:03,840 --> 00:49:11,700 -Scott Tolinski: Yeah. Okay, so now is the point of the show where we talk about our shameless plugs, shameless plugs West but you got what do we have to plug Today, - -76 -00:49:11,880 --> 00:49:35,790 -Wes Bos: I am going to shamelessly plug all of my courses at Wes Bos comm forward slash courses, I realized I forgot to give up my coupon code for last like three months. So if you use a coupon code syntax that's going to get you an extra 10 bucks off any of my paid courses. And of course, I've got other ones CSS Grid, JavaScript 30. Those are all absolutely free. Check it out at Wes bos.com forward slash courses. Cool. - -77 -00:49:36,090 --> 00:50:22,230 -Scott Tolinski: I have a new course on react spring that's called animating react and it we cover not only how to use react with react spring because react spring can be really confusing in their Doc's are great, but at the same time, there's just it's such a powerful library that it's sort of impossible to really get everything from the docks. So what we do is we show you the syntax and how to use react spring but in the most important part, we do these really practical examples, we build a menu that slides over, we build the shopping cart animation for level up tutorials, we build a model, we build an animation that triggers on scroll, and then at the same time we get into some really interesting stuff as well. So check it out at level up tutorials.com forward slash Pro, and become a pro at animating react with react spring. - -78 -00:50:22,500 --> 00:50:24,930 -Wes Bos: Awesome. I think that's it for today. Anything else to add? - -79 -00:50:24,930 --> 00:50:26,850 -Scott Tolinski: I got nothing. All right. Thanks - -80 -00:50:26,850 --> 00:50:35,550 -Wes Bos: for tuning in. As always, follow us on Twitter at Wes Bos at St Lynskey and at syntax FM, and we will catch you next week. - -81 -00:50:36,720 --> 00:50:37,320 -Unknown: Peace. - -82 -00:50:39,240 --> 00:50:49,020 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax141.srt b/transcripts/Syntax141.srt deleted file mode 100644 index 03eeffa53..000000000 --- a/transcripts/Syntax141.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. Totally at ski. - -2 -00:00:25,950 --> 00:00:40,680 -Scott Tolinski: Oh, welcome to syntax in this Monday hasty treat. We are going to be talking about a sink or a sink, await and error handling strategies. My name is Scott bliss game, a full stack dev from Denver, Colorado with me, as always is West boss. Hey, everybody. - -3 -00:00:40,680 --> 00:00:44,970 -Wes Bos: I'm excited to talk about error handling strategies. Yeah, - -4 -00:00:45,000 --> 00:00:55,400 -Scott Tolinski: this is the most fun topic in the world the error handling strategies because we all love it when stuff goes wrong. Talking about error handling strategies is going to be West with this week's sponsor is - -5 -00:00:56,400 --> 00:01:53,160 -Wes Bos: this is not intentional. But Sentry is sponsoring today. And part of our notes is what do you do with those errors once you've actually handled them? Or how do you handle them. And one way is you can send them off to Sentry, you don't actually have to send them to Sentry manually, Sentry will just be installed to your server or to your client side. And it will sort of just listen for any errors that happen. And then it will collect as much information about what went wrong. And compile that into a nice dashboard gives you things like breadcrumbs stack traces, a bunch of information about what browser what device who was using it, all kinds of great information and allow you to reproduce errors without actually having feedback from the user, which I think is invaluable for any website. So check it out@century.io and use the coupon code tasty treat that's going to give you two months free. And that will work for existing users as well. Go ahead and check it out. Thanks so much to Sentry for sponsoring. - -6 -00:01:53,220 --> 00:03:02,640 -Scott Tolinski: Thank you century. Okay, well, let's kick this off. I'm going to start off with this first one, because this is the one that I use. And I know you have a quite a bit more experience with doing different strategies for error handling. But the most common one is just a a simple try and catch. So try and catch up. Basically, you wrap your code inside of your a sync function, your async function, you wrap it in a try. And then below the try you have a catch. And that catch is going to catch if something goes wrong within the try. And then it runs the code and the catch. Therefore, you can see hey, did something happen during this this same code that is preventing it from continuing? And if so, all right, what do we do next? That is that that's how I use all of my acing functions. That's how I do all of my error handling. And for the most part, it adds some code bloat. At one point, when I was converting a lot of stuff from promises over I was having to select a bunch of code and do an extension to wrap stuff in a try and catch and it was just a little painstaking, all annoying. So I know you have some different strategies here. And I'm interested to see how they can make my read a little bit better. - -7 -00:03:02,910 --> 00:03:21,420 -Wes Bos: The try catch is probably the easiest and the simplest, you just wrap it, it's not great, because you take this beautiful a sink await code that you have that it's one level deep, and they have to wrap it all in trycatch. Or you have to wrap the actual call of that code when you execute the function. If there is that in a try catch. So - -8 -00:03:21,450 --> 00:03:28,170 -Scott Tolinski: it's like put it it's like taking like a beautiful cupcake and putting it Yeah, ugly box, you're like, Okay, totally ugly. There's - -9 -00:03:28,380 --> 00:07:02,700 -Wes Bos: also like a, there's also an issue with block scoping because a try catch is a block, it's curly brackets. So like, if you have like a variable inside of your inside of your try block, and you need to access that value in your in your catch, when it errors out, then you have to like either throw the error and put it in there, or you have to like let define the variable outside of the block or use a VAR variable and then be able to access so it's a bit of a pain. I don't run into that all that often. But it's certainly something that has happened a few times here there. So there's a couple different options that we have with async await error handling. And the first one and probably the nicest one, but the hardest to understand is what's called a high order function. Where a higher order function is the idea of it is that you you have a function, let's say, fetch users, and you just write that function as if nothing were to ever go wrong. And then you write a another function that's called like, handle errors. And that function takes in as an argument, your fetch users function. And then what it does is it returns a new function. The idea of a higher order function is a function that takes in a function and returns a new function from it. So I know I just said function a lot function, but again, I'll say that again. Yeah, it's a function function that takes in an argument which is a function and from that it returns a new function that is is generally the the function that got passed in and then slightly modified in some way. That's, that's how a higher order components work in react where you wrap a component in something like with state or with Apollo that what that will do is it will take your component and then add on a bunch of information or functionality into it, it works the same way with with functions. So the idea with a high order function is that you take in your, your regular function, and then you return a new function, which in turn will call your original function, but tat attach on a catch on to the end, because the thing that you need to know about a sink away is that a sync functions, they return a promise. And because a sync functions return a promise, you can just chain a dot catch onto the end of it. So you kind of pick one, you pick a sink away, but you can also use the dot catch from from regular promises to catch those specific error. So I specifically use that in my node course. Because in Express, if you have an error, you want to like pass it to an error page or something like that, you generally just call next, right? Yeah, I use this in Node all the time. Because in node, when you have an error, you have to call next with that error. And what that does is it sort of kicks it down the routing, and if you hit a certain endpoint, the last endpoint in your routes file, it will just render out like a 404 page or render out an error page if there's an error found. So one kind of cool thing you can do with this is you can catch errors with this higher order function, and then simply just pass them to the next function. And this is really cool, because you can throw your own errors and they'll just be caught. Or if you're anything that you're using accidentally throws an error, then that will also be caught in sort of pass it down to the error page. And then depending on if you are in development mode or not, you can show a stack trace and some information as to what goes on goes on. And I love this because you don't have to handle errors in every single route. You just write this higher function once and you know that it's being handled. Nice. - -10 -00:07:03,090 --> 00:07:13,950 -Scott Tolinski: Yeah, that seems like it would be more concise. I think part of the the main issue I have is just the amount of bloat, like reducing that bloat would be pretty, pretty nice for me. - -11 -00:07:14,010 --> 00:08:11,880 -Wes Bos: Yeah, yeah, absolutely. It doesn't work for everything, because the one thing you need in this case is you need to be able to handle the error, right? Same way every single time. And for a lot of people that's you want to handle the error differently every single time. But in the case of node, you almost always just want to kick it down to inchoate on an error page. And if there is some other way to handle the error, like you want to show the user an error. If that's the case, then you have to handle that in a different way. You might even have two or three different higher order functions are awesome. The other one we have here is handle the error when you call it. So like I said in the sink function can chain a catch on to the end. So if you don't use a higher order function, you can just say like const users equals await fetch users, and then just chain a dot catch and pass into an error handling function in this you need a try, then, nope, you don't need a try there. Because your errors will be handled with a dot catch. - -12 -00:08:11,910 --> 00:08:25,320 -Scott Tolinski: My big question here is why is this syntax not like the the main prot like the top like everyone always shows try and catch first. So why not show this is like the way to do it like this makes so much more sense to me. - -13 -00:08:25,680 --> 00:10:28,040 -Wes Bos: That's why I've been wanting to do this episode for a while because like, it is so much easier. I think whoever initially showed a sink away examples, they just showed a try catch around it just just to be safe. And you didn't have to get into it. I don't think a lot of people know that. an async function by default returns a promise, or it will always return a promise. And because of that you can always chain a dot catch on to the end. It's so much better like it's mix and match, right? Use a sink, or use await because that's the best syntax and then use data dot catch and pass it a function that is defined elsewhere that will handle your errors. Yeah, Love it. Love it. What else do we have here node has a unhandled rejection event. So you can use process.on unhandled rejection event. And that's important to have in your node apps. Because Pretty soon, node will just quit your process entirely. And a lot of people just don't use any error handling at all. And if something happens, you see it in your in your console. But soon that will kill your process. And that could take down your website. So sort of at a higher level. You can listen for unhandled rejections and your promises and and then handle them that way. So So if I'm under the rug, send them off to century, whatever it is that you want. Awesome. Yeah, let's wrap it up with talking about what you actually do with those errors. So obviously send them to a tracking service. One thing I do is I just have like a list of errors like that. I know what they are. So they're just made up error codes. And then if somebody emails me, like there's a bunch of error codes for when people are trying to do malicious stuff. And then people will sometimes email me being like, Hey, I got error for 980 ad. And then you know, yeah, either they're doing malicious stuff or they're using like a VPN or something that caused generally it's CloudFlare that's blocking them in between. and if cloud for blocks you, then I suppose throw a specific code to the user, and then they can tell me, okay, maybe, maybe try jump off your company's VPN, or something like that. There's a couple of workarounds we have for that. - -14 -00:10:28,350 --> 00:11:03,600 -Scott Tolinski: Yeah, yeah. And you'll want to make sure that you pass these along to your users, the worst thing that could happen is you click something, nothing happens, the user isn't notified in any sort of way that something broke. And if they're developer, they're going to go into your console and see like, oh, there's some some errors popping up here. And that's never a good experience for anybody. You know, I I definitely always pass these logs, I built a little error component for level up tutorials, and it makes it so easy. I use context. And I just have a context function that just says send error. And all it does is look a little toast message type thing that pops down with the color red. Well, that's such a good use - -15 -00:11:03,600 --> 00:11:05,430 -Wes Bos: case. Oh, yeah, - -16 -00:11:05,430 --> 00:11:06,270 -Scott Tolinski: it's such a good so you define - -17 -00:11:06,270 --> 00:11:20,400 -Wes Bos: your you define your like air UI, and handler at a very high level. And then you pass that down via contacts. And then anywhere you need your error handler function. You can just call it and then your UI will show it like the bottom right hand corner. - -18 -00:11:20,550 --> 00:11:25,170 -Scott Tolinski: Yeah. And it's in a portal. You just sits on top everything. Yeah, love it. Oh, even - -19 -00:11:25,170 --> 00:11:26,940 -Wes Bos: portals man next level. - -20 -00:11:27,120 --> 00:11:27,660 -Unknown: Yeah. Oh, yeah, - -21 -00:11:27,900 --> 00:11:43,800 -Scott Tolinski: dude, I'm on it. So yeah, I used I used not this is not an advertisement. I use injury to keep track of all these things. You know, I have it open right now. I typically go through this weekly to make sure that nothing is popping up over and over again. But - -22 -00:11:43,800 --> 00:12:03,120 -Wes Bos: yeah, that's it. Beautiful. I think that's it for today, hopefully learned a thing or two. It's really not all that complicated. There's just a couple possible options for handling errors, which doesn't go away. And hopefully you are better handled to handle those errors now. Nice. I am VAT. Alright, well, I'll talk to you on Wednesday. Please, please. - -23 -00:12:05,010 --> 00:12:08,910 -Unknown: Head on over to syntax.fm for a full archive of all of our - -24 -00:12:08,910 --> 00:12:14,790 -shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax142.srt b/transcripts/Syntax142.srt deleted file mode 100644 index 3b4729a71..000000000 --- a/transcripts/Syntax142.srt +++ /dev/null @@ -1,356 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,849 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:06,120 -development treats out there. - -4 -00:00:06,149 --> 00:00:10,560 -strap yourself in and get ready to live ski and West boss. - -5 -00:00:10,589 --> 00:00:18,510 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest well, drama treats out there got a little bit of a woody, would you call this cut today a special treat, - -6 -00:00:19,439 --> 00:00:21,300 -Scott Tolinski: special treats and extra special ones coming - -7 -00:00:21,300 --> 00:00:55,350 -Wes Bos: over for dinner. Today we have Travis Nielsen, who is a developer designer at Google. He's got a popular YouTube channel, all kinds of really interesting stuff. We're excited to talk to him today. Before we get into anything even saying hi to Travis Lowe, we are sponsored by to to actual jamstack companies today. First one is Stackbit, which is going to be themes for your jamstack website. And second is Sanity, which is going to be your headless CMS on your jamstack. So welcome, Travis. Welcome, Scott. How you guys doing today? - -8 -00:00:55,350 --> 00:01:06,330 -Scott Tolinski: I'm doing good. I'm so excited to have Travis on the podcast here because Travis and I have known each other for quite a little while through YouTube, stopping up at conferences hanging out a little bit. So Travis, how's it going? - -9 -00:01:06,980 --> 00:01:16,760 -Unknown: It's really good. Thanks for inviting me to be on the show. And good morning to everybody listening or, you know, evening or whatever. You're listening to this. Yeah. Excited to be here. Thanks for inviting me. - -10 -00:01:17,220 --> 00:01:43,110 -Scott Tolinski: Yeah, dude, you're our our second ever guest on the show. And I think you're one of these people that we've been talking about having on the show for a very long time, because of your experiences, not only on YouTube, but podcasting. And through design, I think you have an absolute ton to offer our audience. So for those of you who don't know, Travis, is been a designer and a developer for how long now, Travis? Oh, I - -11 -00:01:43,110 --> 00:01:53,550 -Unknown: don't know. I mean, I guess I got my start. My first websites were back when I was a teenager, you know, making websites for my band, like my rock and roll band need a website? Yeah. That's how I got into this thing. - -12 -00:01:53,940 --> 00:02:02,520 -Scott Tolinski: That's a interesting little connection, because both Wes and I started our sort of paths as developers. Yeah. Via creating websites for our own - -13 -00:02:02,520 --> 00:02:05,970 -Unknown: bands. It's really common, like you talk to people. And I really, yeah, - -14 -00:02:06,510 --> 00:02:09,360 -that's my hustle. Like, that's how I came up. - -15 -00:02:09,379 --> 00:02:15,120 -Wes Bos: Yeah, it's the punk rock DIY scene. Everyone just grows up and has to get a job. Yeah. - -16 -00:02:15,120 --> 00:03:07,319 -Scott Tolinski: So you're you had a very popular YouTube channel, which was dev tips for designers for a long time. And that's how Travis and I first met. Now you're working at Google, you're doing talks, you're writing a book, you you work on a podcast, the method podcast, you've also done another podcast traveling laws. I mean, it seems like you've done a ton of different variety of things. Yeah. But they all have like a really nice connection in general. So I think I wanted to talk a little bit about your career path to start off, because both Wes and I have had probably what you consider a typical career paths. And, you know, we we got into it a little bit, just now talking about creating a website for your band. But I want to know a little bit about the very start of your career. When did it start essentially, like, when did you know that you were going to do this for your career? And like, what were your ambitions initially? - -17 -00:03:07,590 --> 00:05:18,890 -Unknown: Oh, man, um, I mean, yeah, I kind of like always was like an artistic kid. And that all that stuff. When I had my band, it was like, the first time that I was able to, like, apply creativity to a business. And I kind of realized that there was a business behind like managing and running a musical act. And so not only was I like singing for the band, but I was like booking and like organizing concerts with other bands and kind of like just putting things together quite a lot. And so making t shirts and like album covers, and, you know, websites for my band became a thing that I did for other bands as well. And I kind of realized, like, wait, this is like a thing. People need commercial art. And so fast forward, I was kind of like, in my early 20s, not really knowing how to, like, make that leap. And I was, I was doing sales I did door to door sales for quite a while I did like sales on a sales floor. And I was always like, pretty good at it. Like, I'm a pretty good presenter, I'm, like, easy to kind of like, understand and listen to, I think. And so I was I remember one time, I was on the sales floor, pitching this whatever to this guy. And he was like, Man, you should come work for me. And I was like, What do you do? And he's like, I'm doing sales and blah, blah, and, and I went over to his office, and I was like, talking to him about, he's like, Well, what do you want to do? Like, like, what's your long term goal? And I was like, I just want to make websites. He was like, What? I was like, I want to be a designer, I want to think about type holography. I want to like, like, talk to people about color. And he was like, I don't understand. Like, in the middle of a job interview, I kind of realized that I didn't want like, I want that career for myself. And so I was like, Okay, this is like, what I'm doing now is like, if I can go into a job interview and pitch myself as something entirely different, that's not what I want to be doing. And so like, what are the skills steps I need to take to kind of realize that career. And so I started like hustling, like making things on the side making logos for people just like everybody does, you know? And then yeah, there, it's just like in the back door. Like, I sit here at Google now and I meet people and they're like, Oh, yeah, here's where I went to school. This is like, I did my masters here. And I'm like, - -18 -00:05:18,890 --> 00:05:19,470 -Yeah, - -19 -00:05:20,250 --> 00:06:07,650 -I mean, I, I saw school once. It's like, I really had to, like sneak in the back door is just like, I took the long Route, Route long. I took the long route. Yeah, you know, so yeah, after, after deciding that I wanted to be a designer, I kind of like just started answering Craigslist ads, and just like doing whatever I could to get work making fake companies. I think, Scott, we talked about this a while ago, like, like, I would just like make websites for fake companies that didn't exist, so I can put them in my portfolio. Yes. Awesome. You know, just like hustle, hustle, hustle. And yeah, and eventually, I mean, I remember my first like, well paying gig was for this Male Performance clinic. Which, if you guys understand the industry, you know what I'm talking about? Yeah, - -20 -00:06:07,650 --> 00:06:09,270 -Wes Bos: like muscles and stuff. Yeah. - -21 -00:06:09,270 --> 00:08:06,270 -Unknown: Not muscles, man. Yeah, so they would like just, you know, work with erectile dysfunction. And so I made all these websites and brochures and like, like everything logos for, for like clinics that helped dudes with EDI. And it was interesting. Like, that was like a big thing in my portfolio. And I finally started working in like, like working for agencies and such and getting that type of work like leveling up. And he was kind of like, stand on the thing that you did before. And then you kind of get the better thing, and then you show that off, and then you kind of get the better thing after that. So I was living in Las Vegas, and I worked at a few design agencies there. And then my wife and I wanted to get out of Vegas. So I started working in in Oakland with this agency that did like a lot of entertainment brands, like I worked on the killers website, Janet Jackson. Some like Taylor Swift stuff, things like that, like really, really fun, Bon Jovi kind of things. It was great. I didn't like pay very well, because it was still like production work. But while I was there in Oakland, I realized that this company was also doing something else. And it was like it was called, you know, using air quotes. And I was like, these are called product designers. And I learned about making products and the idea of, you know, making something for yourself, not just for a client, and to answer their needs. And so I got kind of into this idea of product design, and then moved around in Silicon Valley for maybe eight or 10 years, doing startups. And that was a really great experience. Eventually, Google found me and asked me to kind of interview here. And that was all documented on my YouTube channel, the whole interview process. So it's kind of funny, I'll be at my desk these days, and somebody will come up and they'll be like, Hey, your videos on getting hired at Google were really helpful to me. Oh, yeah. It's kind of nice to like, meet people that are here, because I really need them to get here. Yeah. - -22 -00:08:06,720 --> 00:08:19,860 -Wes Bos: Did you have to ask Google permission to document all of that, because I actually hired I interviewed at Google many years ago, and assigned all these MBAs and there was a bunch of stuff I couldn't necessarily say about it. In the blog post I wrote after, - -23 -00:08:19,860 --> 00:08:45,480 -Unknown: I was careful to say and not say certain things. But I mean, at that point, I wasn't an employee. And I was super naive, as well as a few of the things and later on, I went back and edited quite a few things. But yeah, I think that was something I was aware of, but also was just like on this like is it comes back to that, like whole punk rock thing? You know, like, I was just like, yeah, you won't do what you tell him or like, you know? - -24 -00:08:47,760 --> 00:09:35,399 -Scott Tolinski: Yeah, hey, as long as I've always known you, Travis, you're like, design aesthetic has always been really polished in even I mean, when you had your YouTube channel, everything, everything looked exceedingly good. And and no, you know, one thing that I've always been impressed with is just how your aesthetic has always felt. So there and realized, I'm really interested in in sort of the early days as your growth of a designer, and you mentioned really hustling. You know, Wes, and I both really gone through periods of like, really strong hustle in our careers where we've just really focused on on growth, right. So I'm interested in some of the things that helped you in that early stage when you were trying to grow like, what kind of content Did you consume? What kind of things made the overall like biggest impact in your design journey? - -25 -00:09:35,640 --> 00:09:39,899 -Wes Bos: We get questions about this all the time. So I think people are really gonna enjoy this answer. - -26 -00:09:39,919 --> 00:09:41,130 -Scott Tolinski: Yeah, well, - -27 -00:09:41,189 --> 00:13:00,149 -Unknown: I think the way it works for me personally, is that I'm a pretty obsessive person. And I'm not just go ham on one idea for like, a long time until I've kind of feel like I've exhausted that question or that interest. And when I was learning design, again, I didn't go to school, so I didn't have like an instructor. giving me a curriculum to follow or something like that. And in the whole idea of like YouTube, education and podcast was not really as developed as it is now. And so my design education was very, very much self taught. And a lot of that was just going to like Barnes and Nobles and borders and just buying design books and like going on Amazon and just buying design books. So Mike, my physical design library is quite, quite large. And I would read every single paragraph it wasn't like I would flip through things and just in browse and look for inspiration, I would like, read the history of design. And I would like read biographies of designers and people that are that I was interested in. And this is not just like, kind of like people that are popular right now. Like, this is like a historical look at things. And I remember one, remember that Helvetica documentary. Yeah, I watched Yeah, like 300 times, and I just fell in love with with Massimo Vignelli, and David Carson and, and Erik spiekermann. And I just fell in love with like these, like tight minded people. And I was really, really big into, like, understanding and collecting all of the typefaces that I could, and I would be able to recognize them and talk about why they were important and historically, and like where they came into informing each other and the context in which they work. Just this weekend, I was watching a video on YouTube, and they were talking about Trajan Pro, and how it's like the font of a movie posters and kind of in it and like where it sits in the historicity of typefaces and how it was. It was designed for Adobe, and it was like one of the first ones that launched with, with Photoshop, and that's when they made the movie poster. So like, understanding, like how all these pieces fit together and stuff was really, really thrilling to me. And so, yeah, I guess that's like a part of my, the way that I develop myself is that I just get like enthralled in understanding the mechanics of a thing. I feel like I'm really, really stupid, like really dense. And so I have to understand everything in order to understand a part of something. So like, when I'm learning a new coding language, or I can't just like watch a tutorial, and understand that part and be good with it. I'm like, so wait, who wrote this code base? You know, like, who invented this framework? And why, like, that's, those are the questions that I'm kind of asking when I'm like, trying to understand a new concept. And I think that serves me well, because like, again, I'm so dense that like, I really need to have a foundation of knowledge in order to build the things I actually need to know on top of it, or else like I have, like this shaky, kind of, like, you know, you know, foundation of, of education that will just slide out from under me if, if I don't really understand the thing. And often that comes down to a historical context. I'm asking like, Who are these players in this in this world? And how did they get there? And why did they build these things that I need to use? - -28 -00:13:00,659 --> 00:13:03,179 -Scott Tolinski: Did you ever read the book, just my type? - -29 -00:13:03,689 --> 00:13:05,970 -Unknown: No, just my type. No, I didn't. - -30 -00:13:06,510 --> 00:13:25,110 -Scott Tolinski: You'd be fascinated by that book. I think that's right up your alley. just my type is, I think it's like 12 chapters. Each chapter is on a different typeface. And it's about the history of that typeface. They get into like, was it Gill Sans? Is that the actual name? Yeah, his whole life and but it gets into - -31 -00:13:25,140 --> 00:13:27,090 -Unknown: he was weird writing press. - -32 -00:13:27,240 --> 00:13:35,940 -Scott Tolinski: Oh, yes. super weird. And the book is great. It's absolutely fascinating it. But it's all about history and typefaces. If you haven't read that, I think you're gonna love it. - -33 -00:13:36,059 --> 00:13:37,710 -Unknown: Just my sight. All right, I'll write that down. - -34 -00:13:38,340 --> 00:13:49,559 -Scott Tolinski: Yeah, I'll make sure I'll make sure you get it. So one thing I wanted to talk about real quick is, is they talk about, like, the gap. Are you familiar with the concept of the gap in class video? - -35 -00:13:50,309 --> 00:14:30,240 -Oh, yeah. where it's like, sort of like, where your tastes don't match up with your skill level. And like, this is something that I've really struggled with, because I can identify, like, excellent design, and I know what I like, and I know what I like about what I like, but my ability to create the things I like, is was you know, not there for a long time. And it's still like, maybe one of the things I struggled most with personally, is that sort of gap between, like that part of your career when when you had things that you like, the way they looked? Was that something that you personally experienced in at the time did you understand that? And did it frustrate you in any sort of way? - -36 -00:14:30,449 --> 00:17:24,590 -Unknown: That's a great question. So the gap is the difference between what you want to create and what you're actually creating? Correct? Yeah, being able to see that gap is is kind of great. Being able to see that gap is the first step in in like closing that gap. Because there's people that like don't know that they they're not great at something like you've made me like seem like, like the American Idol like auditions where people just get up there and belt their hearts out but like what comes out of their mouth is just like the worst thing ever. But they don't know it, they don't understand they don't see the gap. Sure. So being able to see the gap is that is like a gift. It's like a really good skill to have. And I think that I, I'm still seeing it, you know, of course, and I run into it all the time, but like, you could either despair at the gap, or you could be invigorated and motivated by it. When I was a kid, I wanted to be a comic book artist, and I would like read all these comics and just draw all the time. And like, the best things I ever made were, like, almost like one to one copies of what was good, you know, and I could never, like, come up with things on my own that were great. And, and that that gap certainly was there. And it filled me with like, a lot of despair. And I and I feel it now to like when I when I tried to make music or, like pursue a new venue of create creativity. But I think that it could either. Yeah, like it could either bring you down or kind of motivate you. And I think that they're those early days when you're just kind of like trying to understand the boundaries of what a thing is. Yeah, they're the most like exciting moments. Like I remember. Like, for example, Scott, I started a new YouTube channel, like three months ago, maybe two or three months ago, and I have like, 70 subscribers. I haven't really talked about it publicly. But it's it's like in a different. What's it called, like, a different content vertical? Like, it's, it's music. Yeah. And so like, none of my, like, coding design audience would like, I don't know, maybe they would like it, but it's not like I haven't told them about it yet. But I'm in those days where like, every single subscriber is hard to get, you know, like, yeah, like, you're in those days, guys, where you're publishing things. And like you, you post a video and it's got like, like, 1000 views in the first hour, you know? And it's like, yeah, and people are writing Scott, you're amazing West, this is so great. I want to give you all my money, and those are good. Let's have babies. And and I'm like posting a video and nobody sees it. And then three hours later, there's like a one next to the video counter. And I'm like, Yes. What they were so like, like, I feel like those first subscribers, those first views are like, way more thrilling and exciting, then when you when you actually build something, and it is successful, and you're kind of like just keeping the engine revving. Like building building it. Yeah, ours is more exciting than driving it to the grocery store. Sure. - -37 -00:17:24,630 --> 00:17:46,260 -Wes Bos: What What would you say? Like, a lot of people I know that listening are probably in that spot right now. They're thinking like, this spot sucks. And like, I see where I want to be. And I recognize the gap, but like, like, what is something tactical that I can do in order to close in on that gap? Or like just motivate myself to sort of enjoy the process that is building this thing? - -38 -00:17:46,610 --> 00:20:37,070 -Unknown: Yeah, I think this is kind of maybe not a great, satisfactory answer. But I think that like, yeah, appreciating the struggle is the best part, like learning to, like, step back and be like, Ah, I'm so excited that I'm frustrated that nothing is working. Wow. Like I get to struggle with this. You know, it's it's a privilege to to be able to have something that's not working that you can work hard at that will work. I mean, how many people in the world just have nothing there, there's no hope. So if you're struggling for something, that means you have hope that means you have a goal, a destination, something to work for. And that in and of itself is a huge, like, I don't know, like a like, you're so fortunate to have that. And then yeah, so like, if you're listening to this podcast, that means you've already chosen some really great mentors, and some in a really great community to join. So like you have so much opportunity and kind of like runway in front of you space to grow. Sometimes in like the startup business world, we talk about headroom. We talk about market share, and like, how much space Do I have to grow. And if you feel like, you know, like you're building your business and then like there's not much room to move around in. There's not much headroom, that's a claustrophobic feeling. But if you're young and when I say young, I mean like new to an idea or new to a practice or business. I'm not talking about age, when you're like young to your your career or your Are you making a switch. And you're looking at ahead and you see this huge runway, and maybe it's a little intimidating, sure. But you see it, you know where it is, you know what the next steps are? And usually the next steps are just grind, just do the hard work like every day. Yeah, start doing it. And a few of the principles that will accelerate that are like if the things that you're doing to grind and to educate yourself are beneficial to other people. If you can share and lift others, then you're going to start being not only like a creator or a generator of work, but also a leader in thought and the layout like a social kind of what do they call it like they call a thought leader, but I'm talking about even more than that, like you get to be a place that people would gather around, which is more valuable than being able to teach a new idea or accomplish a new work or publish a thing. Just being a safe place for other people to gather around and feel seen and feel heard and feel. Welcome, is is so valuable. And something that we don't talk a lot about is, as community builders, those people are so valuable, kind of like in in generating opportunities for others. And then that's kind of like how you get to the next level. I think when I started sharing, I mean that that's how I met Scott. And now Hi, meeting us is like, because I decided to share. - -39 -00:20:37,170 --> 00:21:36,150 -Scott Tolinski: Yeah, that's such a huge thing. And we often talk about just, again, sharing your work sharing your content, all that stuff. And it is it's, it takes a lot for the ego to let yourself put yourself out there in a way that shows like a way that is still in like growth mode rather than in like complete mode. And I think it's just so important to embrace that embrace those feelings of like this, maybe I'm not the best at what I'm doing right now. But the the sharing of it, and the being open of it is going to make me better faster, it's going to, you know, put that out in the out in the world and do really good things for both myself in my career. And I think that's something all three of us have experienced Personally, I think right now, we want to take a quick break to talk about one of our sponsors, which is Stackbit. Here, and Stackbit is going to allow you to build modern jam stack websites in just minutes. You can combine any theme site generator or CMS. Without complicated integrations, do you want to talk a little bit more about Stackbit? West? - -40 -00:21:36,390 --> 00:23:05,370 -Wes Bos: Yeah, I just just got back from jam stack cough, New York. So I'm all swimming in ideas about giemsa. Jam stack, if you don't know is this idea that you have a website that is JavaScript API's and markup and you sort of have this like, very static based website that is generated at some point and kicked out to a server. So there's different like portions to that you have your CMS layer. It's actually one of our other sponsors today, which is Sanity. And then you also have your hosting layer, which is things like Netlify, or GitHub Pages, but there's this sort of like third layer, which is like, how do you get it to look like what you want, right. And of course, you can build your own website, but Stackbit is the sort of the theme part of your your headless CMS chant jamstack website. So Stackbit is just in beta right now. So they're writing syntax listeners, because you're technical, you love to try things out to join the beta@stackbit.com forward slash syntax FM, you can join the beta, you can try it out. And it's pretty cool. They got like a neat little video on their website here, where what they do is they create a project, you select one of the themes that they have there, you hook it up to your static site generator, whether that's Gatsby or Hugo or Jekyll or, or view press, and then you go ahead and pick any number of the headless CMS that they support. And then finally, you deploy that sucker off to GitHub Pages, or Netlify, or something like that. So check it out@stackbit.com forward slash syntax FM, and you're gonna be able to join the beta and test it out before this thing is ready for primetime. - -41 -00:23:05,520 --> 00:24:06,030 -Scott Tolinski: Sick. So Travis, I came across one of your notes, you're compiling a book full of notes. Yeah. And one of your notes is on being all in. In you talked about it in this in your post that was like work life balance is a joke is the name of the bus. So I highly recommend just going and checking that that's on Travis's website. We'll link to it here. And you talk about the importance of diving in completely and focusing on one single task. I know a lot of our audience has trouble really just finding the time and energy to continue growing. That's like a common theme we hear is like I just yesterday got a message on Instagram, because I was posting about how I was recording a new series and someone messaged me saying, How do you have all of the time and energy? Or how do you how do you have all of the time to do this stuff? And I just said it's not about time, it's about focused energy. Right. And I thought this was like something when I read your post it it resonated with me so much. So could you talk a little bit about that concept of diving in completely? - -42 -00:24:06,660 --> 00:27:21,360 -Unknown: Yeah, so the post is kind of like, you know, maybe were three or four years away from when I wrote it. So I do realize that like it's a little bit hard, it's a little bit naive, and at times, life changes and shelves, and you kind of switch your ideas, but I think the principle behind the idea is true, that it's impossible to have balance in kind of anything. And so I think the metaphor I used was like a tightrope when somebody is walking, balancing, they're they're balancing on a tightrope. But I'm like, just jump off the tightrope and just choose left or right, just jump all in and go ham on that one thing for a while. And then when you've exhausted it, or when you've come to a good place, jump into the other side and just really immerse yourself in that experience. And so, one of the common kind of like paradigms for work life balance is like my day job, and my family life. You know, how can I help I spend time with my children and my spouse and my, you know, do my civic duties and at the same time, how can I kill it in my career? Well, if you're taking your work home, you're not doing either one. And if at work, you're answering your phone from your friends, and kind of like, if you're on Twitter, and you're being social or whatever, you're not doing that, either. So you what people are doing is they're not trying to balance they're trying to blend. And, and the concept of this article was to say, you know, don't blend just be all in on the one thing that you're doing right now. And that's kind of like the the concept but but to speak to you, Scott about your, your, your insight about people saying, Well, how do you have the time? And you're saying, well, it's the energy and, and I totally agree with that. And you said focused energy, which is like another level? Right? Yeah. Right. But I think a lot of it is about intention as well. And ritual. Yeah. So some people will come home, and then you know, they'll have their evening meal. And that evening meal is a ritual and it signals to their brain that it's no longer time to work or, or that now, now is the time that we do watch Netflix or relax or kind of wind down. And it's not because you need to wind down, it's because you have a ritual in place that like enables that. So my ritual is that I put the kids to bed at 730. And I talk to my wife and hang out for a while we usually have things that we're doing. And I say, Okay, I'm going to go record or I'm going to go do my go do some writing or whatever it is, and, and so I get up at 6am and I'm heading out to work, I'm on the bike at 630 come home and hang out with the family and like have intentional good moments with the wife and kids. But you know, around 830, I'm intentional about I'm trying to achieve something like I have a short list of things that I want to do. And I look at my mood and I say Do I have the energy to like be on camera right now? I kind of don't. Okay, so what can I do? I'll start writing, you know, or whatever it is. And it's about managing that focused energy, but also being intentional with your time if I get if I get into a place where I'm like, okay, every day, I'm watching a show or whatever, then I realize like, wait, I'm not taking advantage of these moments. I'm letting somebody else take advantage of them for me. - -43 -00:27:21,600 --> 00:28:50,190 -Scott Tolinski: Sure. Yeah, I think that's all really interesting. I mean, the intentional about doing what you're doing is something that is very tough. I mean, it's tough, it takes a lot of effort to be intentional about that. Because so often, you know, me personally, I end up just sitting down to work on something without even thinking about what I'm working on it. When I'm starting, it's sort of like, oh, I'll have the my design app open, I'll have my coding open, I'll have this open, I'll kind of bounce my email, and being able to look at all that and close the tabs and say, Alright, screw this, I'm just doing this right now. And, and maybe you're not feeling that, and maybe you want to move to something else. It's funny because there's so many, I like to draw like parallels a lot between my work in the dance stuff that I do. And in in breakdancing, you have a lot of different types of skills, you have creative skills, where you're you're working on movement with the music, and you have like very physical technical skills. And then you have very, like, you know, like the gymnastic stuff that takes a lot of like, really difficult practice. And sometimes I'll go to practice with the intention of practicing some of the gymnastic things, I'll do a couple of rounds and say, Hey, this, this isn't working for me right now. But I am noticing that I'm really interested in the music today. So for me, I'll show up. And I'll have the intention of working on one thing. And it is very obvious that that's not where my brain is at right now. And my brain wants me to do something else. So I think it is just so important to be able to recognize and have the intention to do that sort of stuff. I just think that's fascinating. - -44 -00:28:50,340 --> 00:29:00,510 -Unknown: Yeah. And you're building in opportunities to listen to your body as well and listen to your energy. But your ritual is putting you in a place to do some work, whatever that work is, right? - -45 -00:29:00,510 --> 00:29:02,100 -Scott Tolinski: Exactly. Yeah, - -46 -00:29:02,100 --> 00:29:26,160 -Unknown: you don't have to, you don't have to solve the problem today. You just need, you don't even need to move the Boulder. You just need to go and press against it. Throw your body against it, because that ritual will make sure that you show up tomorrow again. And that's where the real growth happens. It doesn't the real growth doesn't happen. today. I did it. The real growth happens is I did it this year, every day. Exactly. Wow. - -47 -00:29:26,190 --> 00:29:53,160 -Wes Bos: Yeah. Huge. I really like that. I have a question about how you choose what to work on. Because I'm sure you have thousands of ideas popping up. You have lots of different things you probably want to work on at any given time. And how do you choose what it is that you you put yourself into in the focus? Do you have a process? Do you have any specific applications that you use to actually narrow that in on so that when you do sit down when you do have that process of sitting down? What does that look like? - -48 -00:29:53,340 --> 00:32:24,150 -Unknown: Yeah, maybe I don't have a great process for figuring out what I want to work on because I just like as I said earlier, I'm pretty obsessive. And so like the thing that occupies my mind throughout the day, when I finally get that moment to decide what I want to do on my own, like without another person's due date, or, or, you know, kind of like request, driving the thing that I do when I sit down, and it's my own thing, it's usually that thing that's just in the back of my mind all the time. And sometimes that thing is, like, less, like, career oriented than before. Like I mentioned, I'm doing this YouTube channel, it's called little music boxes. And I just recently got obsessed with like, these little synthesizers and, and guitar delay pedals and stuff. And I'm just making this music that just has nothing to do with like my design career air quotes, you know, but it does, like it informs all like, like, you're talking about your dancing, Scott, like, everything comes back, everything informs. And so again, maybe more important than like, what I'm doing, you know, like, Am I doing this course? Am I making this website, but maybe it's just the fact that I'm showing up to do something. And I and I'm respecting that, that kind of like ritual and discipline, you know, just to show how everything comes back. So I'm like studying these, this music and how to make music. And I have this little like a sample sequencer. And I started using it in my talks. And now like I was in Tokyo, giving this talk to all these kind of Japanese designers. And I pulled out this little beatmaker. And I made a beat in front of 300, kind of like people that don't like, I had a translator and everything. And he was like, What are you doing? And I was like, I was trying to show a principle of like, sometimes to be creativity. to be creative. We have to make a mess. And so I showed them a really, like really simple four on the floor like boop, boop, boop, beep. And then I was like, let's just, let's just mess this up. And then so like, I just left the, the snares there on the, the the two and the four. But then I, I took the, the bass drum, the kick drum and just threw it everywhere. It's like, you know, in reverse, like, well, that's messy, but also it sounds good. So I think there's like this principle that I was trying to illustrate of, like, meskin sound great when it's anchored by organization, and kind of like structure. So one of the things to do is to allow mess into your process, and kind of like showing that point. But it was all informed by this idea of like, I've been studying music, and it has nothing to do with design, but actually, hey, it does it all comes back. - -49 -00:32:24,180 --> 00:34:35,100 -Scott Tolinski: Yeah, I almost find that, that everything that you do in any sort of capacity can be used to grow yourself in that way, if you if you look at it through a different lens. And I think that's really important. I mean, especially because a lot of us like to get bogged down in what we're doing. And especially once it becomes your career, right, when being creative becomes your career, or being a designer becomes your career, it's hard to always be motivated in the same ways that you were when it was your your passion, right? Yeah, it is still, you know, a passion. But it is different. Now that it is a career, especially, you know, I think that happens for pretty much everything, I think it's like an actual point of motivation is that once you start getting paid for something, the motivation sort of goes down a little bit. So being able to access those areas of your brain via creativity, and other sort of ways. And bring it all back around is such a huge important lesson, that I think that that you you illustrated there, especially with that organizational design stuff. And it's just really, really fascinating. I think we want to get into a little bit of your work at Google really quickly. And I think this kind of can be tied into some of that will we were talking about one of the things that to add bring back some of the music stuff is I was a music major in school and one of our assignments was to create a composition using six seconds of audio. So you had to record six seconds of audio. And then you had to use that to create a composition. And that's like a big constraint, right? That's really cool. So it was a really cool assignment, I ended up using like a lighter flick and me tapping on my desk and stuff. And I made this polyrhythmic thing. And like, I want to hear a little bit about some of the the constraints that come about in design when you're working at a company like Google, because typically, you know, when you're working for yourself, you're doing your own thing. There's no constraints, you can do whatever the heck you want to do, right, you have total freedom. But when you're working for such a company like Google, the big company, they have their own design aesthetic, how does that affect your work? How does it affect your creativity? How does it make you feel working with the system that exists that you have to work within? - -50 -00:34:35,210 --> 00:37:52,920 -Unknown: Yeah, great question. I think immediately, you might think that the design expression in Google is really constrained. Because, you know, we have material design guidelines. And in fact, we have an even more constrained version of that called Google material that we use internally to inform the way that Google does its own products. And it's really, really defined right and I would also say robust Because that's like, like, when I'm learning a new coding language or a framework, I spend so much time in the docs, you know, just like learning how it works, so that I can learn what it can do and where I can push. And it's the same with like any design kind of structure or design framework. And so here I am, find myself on Google search, which is like a product that everybody already knows what it looks like, you know, it's 10, blue links, and, and how can we kind of push on this. And that's what I spend so much time looking at Google material docs, so that I can understand, like, what its intentions are, when it says like, something should be this big, or this color, or whatever. And I'm saying like, okay, that's what they are describing for the kind of like the average, you know, the baseline, but where can I stand on top of that, and build, and that's like, I think that's really exciting to me. And then also, I get to work with a cup with a bunch of people that understand this stuff so well, that I'm often just like, spend a lot of my time just learning from other people, how they think about the product, and how they think about the way that our users use it. And I'm fortunate in that I have access to a lot of like research that's been done in the space that I work on. And also, we have, you know, like data logs that I can just log in and be like, oh, when people, like, for example, if people look for, you know, what's a good example? So a lot of the work that I do personally is on crisis. So crisis responses in Google's Let me try that again. So the work that I do, I'm on the Crisis Response Team in Google. So I design for earthquakes and hurricanes and just things like that. Well, yeah. And so if somebody does a query that says hurricane, and then they quickly do another query that says, Hurricane danger near me, you can tell that they're modifying what they're asking Google. And so now I can look in that. And it's like, if that happens all the time, I can jump in there and say, like, I need to design things to answer that question right away, and save people that additional interaction, right. And so my job, officially, I'm an interaction designer, so I try to think about how to people interface with the work, not necessarily so much what it looks like, although I do decide what it looks like. But my job is to say, if this button is here, or if this result looks like this, do they find what they want quicker, or slower. And if it's quicker than do more of that, you know, kind of thing. Yeah, there's a lot of constraint, but also so much opportunity to to innovate on those constraints, and to push them, sometimes material is telling me how to do this thing. But also, sometimes I'm generating an idea. And then I'm telling the material team, this is what I found really works. And our feedback from our users says this, and then they can kind of incorporate that into the next version of material. Nice. - -51 -00:37:53,010 --> 00:38:37,460 -Scott Tolinski: Yeah, I've always found that I mean, to be honest, like that, that constraint exercise that we had to do, it was probably my best piece of the entire time, because you have a system in place. So you have this content that you have to work with. But there is so much opportunity, like you mentioned, there's so much opportunity to do so many different things that like you aren't really constrained in that way you can do anything you want, it almost opens up a lot of that, that opportunity. You're working now on like a big, big team. And you mentioned really learning from other people. It has it been a challenge to work with a lot of people on a project, or has it been just sort of enriching and sort of ways or what have been the challenges? or what have been the the parts that have made you just really evolve as a designer? - -52 -00:38:37,830 --> 00:39:29,900 -Unknown: Yeah. So when I first joined Google, I had been kind of like in startups for nearly a decade. And in startups, you're, everything's very fast, and you're scrappy. And you know, when you're joining a startup of six people, you are the designer, you're not just the designer, you're the container of truth for how things should look and act. So it's bigger than just making marks. It's like you if people have a question of how does this work? You're the answer. You know, you are the answer. Not you have the answer. It's a whole this mind state right. And so you you get a little bit cocky. I don't know what it was. I don't know how to say that. But you get a little bit like, Oh, yeah, I am. I know the interaction. I am the interaction for this this thing. When I came to Google, I had so much ego, and so much like, kind of like, swagger, I guess. Yeah. - -53 -00:39:30,000 --> 00:39:35,790 -Scott Tolinski: Yeah. I always had a lot of swagger. I mean, that's definitely one thing it absolutely had. - -54 -00:39:36,150 --> 00:40:08,520 -Unknown: Yeah, so one of the things that happened early on was like, I just kind of broke, because I was not the important thing anymore. I was like just this little fish in this huge pond. And I had to learn how to operate within a system where I was not critical. Yeah, you know, and that was hard. emotionally. That was really difficult. I was used to being like this really quick. Cool designer, he kind of, you know, like, like, things would fall apart if I went on vacation for two weeks, you know? And then sure, - -55 -00:40:08,550 --> 00:40:09,420 -Scott Tolinski: yeah, now, - -56 -00:40:09,420 --> 00:41:14,420 -Unknown: I'm just like this little fish. And, and I got a lot of I was worried about that for a long time. And my wife was like, when I was, you know, doing the interview, she was like, Are you sure? Like, I don't know if you can thrive in a place where there's so much constraint and like, you know, you need freedom, you need power. And I was like, Yeah, I know, I know what you're saying. But like, this is different. I've never experienced this before I want to go for it. And we kind of like made that decision together. But it was, it was really difficult. And I think one of the things that I learned was just to like that, it's not about me, and that it's about the team and about what we can achieve together. So like this, this idea of synergy and kind of like collaboration comes through. And I learned to think a lot more, instead of like, when you stop believing that you have the answer, you get a little bit more desperate for learning and education. So I started, like, you know, really, really relying much more on like the knowledge of other people and research and kind of like having to justify and have rational explanation, explanations for my creation. So I think, yeah, there's a lot of lessons, but they were often difficult ones. - -57 -00:41:14,760 --> 00:42:21,030 -Scott Tolinski: So this episode is also sponsored by a longtime sponsor of syntax, which is Sanity. Now Sanity is the bring your own front end service that allows you to have a back end for your website. Now Sanity is one of the services that they put together a little demo for Western AI when we first started talking to them. And let me tell you, it really blew us away, because you have the option to actually manage and create essentially your own back end, while Sanity gives you all of the tools that you need to make it super easy. So you can check out sanity@sanity.io and see how they can make your website much easier. Because with their hosted back end, they're going to give you a nice API to access your data allow you to have your own custom back end. It's scale ready, its scale ready, its enterprise ready. And let me tell you, it's really super cool. And it's also open source. So all of the things that we love here at syntax, so check out Sanity at Sanity dot i O. - -58 -00:42:21,300 --> 00:42:51,440 -Wes Bos: Yeah, I didn't even tell you the Scott I met up but the Sanity folks at jamstack cough in New York. And they're saying like, Can we sponsor more podcasts because every time we do an ad read, we get so many syntax listeners, and they're staying, they're actually really enjoying the product. So I thought that was just like a kind of a really cool testament that a lot of you who are listening are trying it out, and are really enjoying it and are building your own Gatsby or whatever websites with this as a back end. So thanks so much to Sanity for sponsoring, - -59 -00:42:51,440 --> 00:43:49,380 -Scott Tolinski: yes, and as always, you should use the sanity.io forward slash syntax. And that doubles your usage quotas for the free plan. So if you want to get started, make sure you do that forward slash syntax when you're heading to sanity.io. And check it out. Okay, so now what we're going to be doing is getting into a couple of quick questions, Travis. So these are just going to be sort of little fast, quick things that might be like tasty treats for our listeners here. So these are to flip the script on the name of your YouTube channel, these are going to be design tips for developers. And so Okay, here's three quick little questions. Okay. So many developers have a hard time loving the look of their work, right? They start working on something, and it just feels a little bit off. I know, definitely. I've always been in that category myself, where you can you look at something you just know, it's not right. What advice would you give the developer who wants to make their stuff look nice, but just can't get it there? - -60 -00:43:49,650 --> 00:44:21,720 -Unknown: I think that I would try to find somebody who does know what they're doing and knows the answer of why it's not looking right. And kind of like, ask them to help, you know, a collaboration with somebody who has a, like an opposite or a complimentary skill set can take you so far. Sometimes you'll see that like that people will team up for a project and then realize that like the other person is just like filling in so many gaps that they have. And it becomes like a really great long term collaboration. There's a good opportunity there. I think. - -61 -00:44:22,200 --> 00:44:33,000 -Scott Tolinski: I think you're right. Yeah, I think that says, I asked for advice all the time. And it's always like, it's always one of the most most helpful things. Mm hmm. What's your take this next one? Yeah, - -62 -00:44:33,030 --> 00:44:49,740 -Wes Bos: this is one question we get a lot is people's thoughts on CSS frameworks, both from a development standpoint of getting up and running. And as well as like a design point of view where everything tends to look the same if you don't come if you don't really customize it. So like, what do you think about CSS frameworks? Yeah, - -63 -00:44:49,740 --> 00:46:24,480 -Unknown: I've made a few ranty videos about them. I don't use I don't use them, specifically the ones that provide visual kind of like cues as to what they are. Like if you can look at a website and be like, Okay, this is foundation or this is bootstrap or material or whatever, yeah, I tend to stay very far away from that stuff. But granted, that's because I'm a designer and like, I kind of, I feel very comfortable in generating those things myself, that doesn't mean that everybody has to feel that way. But here's the thing that I kind of will go pretty hard on is I think that if you're going to use one of those things, you're going to grow a lot more if you read the docs and and read the code and understand why and how they achieve a thing like I, I've learned a lot of great tricks from using foundation and bootstrap and you know, yada, yada, yada, all these different frameworks. I've just learned from them their approaches their tactics, like how do you make like a flexible video? Like, I've learned that from foundation? How do you make, you know, a really great drop down? I learned that from Bruce bootstrap, you know, and like, and I'm like, oh, how did that how does this framework do a modal and just doing that helps me to be a better coder. But it doesn't mean that. I don't know that, that I have to use it. And I have to stay with it for every moment like you, you can use, you know, use bootstrap just for its grid. Why not? Or you can there's like different tools where you can like export different portions of the framework as well, or just try different frameworks all the time. So you don't get lazy and comfortable into one aesthetic. - -64 -00:46:24,720 --> 00:46:36,600 -Scott Tolinski: Yeah, I think making yourself uncomfortable is a good way to grow in any capacity. Just because that that point of where you're feeling uncomfortable, you're going to work hard to make yourself feel comfortable. - -65 -00:46:36,600 --> 00:46:37,470 -Unknown: Mm hmm. - -66 -00:46:37,470 --> 00:46:43,650 -Scott Tolinski: Last one, what is one thing developers often get wrong about design? Wow, - -67 -00:46:43,680 --> 00:48:19,830 -Unknown: I feel like it's one thing that I often get wrong about design. And then developers are like, did you think about this? I'm like, Oh, my goodness. What I like about partnering with people who are really strong in development with design questions is, is they tend to have these insights. And they know how opportunity they know, like, what opportunities are available with the code that they're using. And so they really, really helped the design be better that way and bringing up opportunities and in maybe like corner cases that you didn't consider? Is there. So very close to everything they're seeing at work and be built. But to answer your question, Scott, what is one thing that developers get wrong about design, I would think that like to feel that they're not in control of the design, that they are not a designer themselves. I think that everybody who is involved in in the creation of a thing, whether they're the secretary answering the phone, or the help desk, or whether they're kind of like staffing or whatever, like everybody is contributing to the product. And so in that way, everybody as a user experience designer and developers kind of sit right on that line where they are designers like they are creating, and they're designing. And I'm not talking about they're designing a codebase I'm, they're, they're designing the thing that that somebody is going to use. And in what I did, before they started before they sat down, I was just drawing pictures. I was just drawing pictures of what might happen. And they're taking those those like squares and boxes and drop shadows that I thought maybe this would be good, and they're making it real. So they're the actual designers. I'm just a proposer of ideas. - -68 -00:48:20,700 --> 00:49:00,510 -Scott Tolinski: Yeah, I think some of the best teams I've ever been on are the ones that have been the most collaborative between the designers and developers. I've always felt like there's a large portion of designers or developers who complain about the designer not understanding the constraints of web. And now that there's less constraints of web than there were in the past, developers would often claim complain about like, well, I got this design from the designer, and it's impossible. I can't do it. Mm hmm. They don't know how the code works. And to me, that's like a failure of the team itself. Because you should have been more collaborative, you should have been talking and just that very act of knowing what's possible and not, like you said, makes you a designer. - -69 -00:49:00,660 --> 00:49:09,780 -Unknown: Yeah, I think it's like a really, really important point that you dress there. It's fun to say a strong developer at that point, Scott would educate the designer. Exactly. - -70 -00:49:09,810 --> 00:50:13,890 -Scott Tolinski: Yeah, exactly. And I think that's so so important. I was I've talked about before, on a one of the projects I worked on, one of the designers and I we sat down for an hour maybe, and talk to just about easing curves, just the designer. And that's all we talked about easing curves about this animation, we tried a whole bunch of different things. And it was so fascinating because he didn't know about eating curves themselves, but he knew about what he wanted it to look and feel like so we could share that moment and say like, Okay, this is this is how we get it to look like this is how we feel it look like this. Let's try a whole bunch of different stuff. Let's see it in action. And let's let's build this thing together. And I think that is is just really, really important. So what we're going to be getting into now is the section of the show we like to call sick pics aware we just share something that we think is sick. It can be literally anything a product, a podcast, a YouTube channel I shared once the functionality in the Google Drive app to scan photos. So I mean, it could be literally anything. So Travis, as the guest on the podcast here, would you like to go first and share what your sick pic is? - -71 -00:50:13,980 --> 00:51:00,660 -Unknown: I kind of like have to one is kind of silly. I watched this documentary on Colts this weekend. And I'm like, really into understanding cults. I'm thinking I might start one now. Yeah. But um, so that's it. That's on Hulu. But actually, no, seriously, cults are serious. And they're not, I shouldn't joke about them. They're dangerous. Anyway. The other one is like my podcast called on Google. It's called the Google method. And I interview people around the company and talk about what they make and how they do it. And it's really exciting. And coming up next month, we're doing an episode about hiring. So if you guys are interested in tips on kind of like getting that next job, we're going to be talking to everybody in Google about how they got hired, and what are the steps and processes involved with hiring users? - -72 -00:51:00,930 --> 00:51:48,300 -Scott Tolinski: Yeah, I had a bunch of questions planned about the method podcast, and I'm bummed that we couldn't get to them. But I mean, we got a lot of good. So I think there's, there's so much to talk to you about Travis that, you know, if you're ever keen to coming on again, I'm sure we have a lot more questions for you. And we can talk a lot more about that the the method podcast is just really great, because it is sort of Google based, but I have so much value in it as a non Googler. It's not like it's not like it's for Google, you know what I'm saying? I find so much value in the way you do it in. It's just like a very highly produced wonderful podcast. So definitely check that out. My sick pick today is going to be the Sony wh 1000 x mp3. That's a terrible name. headphones. Like how am I supposed to? Yeah, - -73 -00:51:48,330 --> 00:51:51,990 -Wes Bos: all right. Love them do much better than the XM sixes Yeah, - -74 -00:51:51,990 --> 00:51:52,500 -Unknown: right. - -75 -00:51:52,500 --> 00:52:33,930 -Scott Tolinski: These are our serious business noise cancelling headphones. These are by all accounts the best in class noise cancelling headphones or Bluetooth. I got the silver ones I have been wearing them like seriously every day, I dogs barking baby crying, I just put my noise canceling headphones on and don't even have anything on just so I can save my ears a little bit. But now these things are really awesome. And let me tell you the battery lasts forever. I've been using them almost every day, Wes and I have not charged them since before I went to San Francisco for the jams or for the reactor wow friends. So the battery life on them is insane. And I've just been a huge fan using them every day. It's - -76 -00:52:33,930 --> 00:53:37,290 -Wes Bos: amazing. My sick pick is going to be a book series for kids. It's ones that we've been collecting them over the past year or so. It's called Little People big dreams. And each book of the series goes into somebody in history that I would like to tell my children about so Oh, wow. There's one on Rosa Parks. There's one on let me just pull up the list of my not here. Amelia Earnhardt, Coco Chanel, I think we have all the ones that we have our women in history, which I think is really cool. There's like, I think there's one on Stephen Hawking, Muhammad Ali, rocking Muhammad Ali. They're very much skewed towards the women in history, which is really cool. Because as a dad of two little girls, and we read them to them, and they have lots of questions as to like, What happened to them? And then why was why were they treated this way? How did they overcome any adversity that they they had faced and it's just such a cool way to introduce them to the people of history that were very important. So check it out. It's called the little people. What is it called? - -77 -00:53:37,320 --> 00:53:38,700 -Scott Tolinski: Little People big dreams, - -78 -00:53:38,790 --> 00:53:45,150 -Wes Bos: little people big dreams book series. And you can click them all. There's I think there's probably dozens of them. We have about eight of them. - -79 -00:53:45,780 --> 00:53:48,900 -Scott Tolinski: So I'm gonna actually, I'm gonna I'm gonna pick these up. - -80 -00:53:48,990 --> 00:54:05,160 -Wes Bos: They're pretty cool. All right. Last part of the show, we'll wrap it up with shameless plugs. This is where you plug anything where we want people to see I will just shamelessly plug all of my courses at Wes bos.com for slash courses, as well as my YouTube channel. I'm at Wes Bos on YouTube. - -81 -00:54:05,190 --> 00:54:41,790 -Scott Tolinski: I will plug when is this episode being released? Let me double check. Okay of May. Okay, so I'm going to plug my new series on react spring called animating react. It dives into everything you need to know about physics based animations in react. We build complex animations, we build practical animations, and we build interactive animations. It's pretty sick. So you can check that out at level up tutorials comm forward slash pro my shameless plug is something I did for Scott I created a video series about learning how to use Adobe XD - -82 -00:54:41,790 --> 00:54:45,480 -Unknown: and it was really fun. I did that for you. Maybe in January or February. - -83 -00:54:45,630 --> 00:54:46,560 -Scott Tolinski: Yeah, January. - -84 -00:54:46,710 --> 00:54:49,470 -Unknown: Cool. So check that out on level up tuts comm - -85 -00:54:49,980 --> 00:55:20,700 -Scott Tolinski: Yes, levelup tutorials.com forward slash Pro, but you can check out the first five or six videos that are free to end. Let me tell you Travis, like when you submitted that the first thing That I thought of when I saw your videos is I gotta step up my production game because you're you're set the whole vibe everything is just so good. And you know it just really top notch stuff as always. So thank you so much for putting that together. But I just want to say thanks, Travis, thanks for coming on. I we had a great time. I think our audience yeah ton of stuff. - -86 -00:55:21,030 --> 00:55:21,870 -Unknown: Thanks for having me. - -87 -00:55:22,290 --> 00:55:33,570 -Wes Bos: You've got such great insight into everything I know walking away. This was just like the work life balance and going all in. There's so many little things I've taken away from this conversation. So thank you so much for taking some time to talk to us. - -88 -00:55:33,720 --> 00:55:35,400 -Unknown: It was my pleasure. I'm honored to be on the show. - -89 -00:55:35,670 --> 00:55:51,510 -Cool. Well, we'll finish it off with a piece so piece PCs. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax143.srt b/transcripts/Syntax143.srt deleted file mode 100644 index daeb90840..000000000 --- a/transcripts/Syntax143.srt +++ /dev/null @@ -1,104 +0,0 @@ -1 -00:00:00,359 --> 00:00:22,320 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott El Toro. - -2 -00:00:25,920 --> 00:00:33,150 -Scott Tolinski: Oh, welcome to syntax on this Monday tasty treat, we're going to be talking about the mysterious - -3 -00:00:33,860 --> 00:00:34,770 -Wes Bos: Shadow DOM. - -4 -00:00:36,930 --> 00:00:56,250 -Scott Tolinski: Yes, the Shadow DOM, the coolest sounding thing that exists, this sounds really cool if, like, I think we should have like a coolness meter for web tech, because the Shadow DOM certainly sounds super cool. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado with me as always is West boss. - -5 -00:00:56,250 --> 00:00:57,390 -Wes Bos: Sup everybody, - -6 -00:00:57,390 --> 00:02:50,400 -Scott Tolinski: sup sup Wes. In this episode, we're going to be talking all about the Shadow DOM, what it is why you need to know about it, what it like means what are the pieces of it and sort of how you can get started using something web component based in your own workflow. So this episode is sponsored by one of our longtime sponsors, which is century I'm gonna highlight something really cool about century that I use in my little dashboard here. And it's this this stats tab, the stats tab shows you just how many issues and bugs are hit over a course of time. And you can see, okay, over time, is my codebase getting less and less and less buggy, or more buggy, or you can see Is there like a trend here, where there's all of a sudden the huge burst to this day of big issues and errors. And it's just a two and a really awesome graph here. It lets you know exactly what's happening on your site. And this is just one of many features like this in Sentry, because Sentry gives you amazing visibility to track your deploys to track your releases, and track your projects to make sure that there are no critical bugs happening, any bugs that are hitting the user. Any things that are happening repeatedly, you know, I see above come around every once in a while where somebody is clearly trying to do something nefarious. And I can tell from the error that is popping up in my salary. And I go ahead and I can watch that one or I can ignore it, I can see the user that's trying to do it. Maybe we want to throw down that ban hammer and banned that user for trying to do something sneaky on my site. So head on over to sentry.io and use the coupon code tasty treat get two months for free. That's tasty treat all lowercase all one word, century die. Oh, check it out. Okay, let's get into the Shadow DOM. The Shadow DOM is basically the DOM that you don't see. As is that a good way to say it? - -7 -00:02:51,780 --> 00:02:56,430 -Wes Bos: Yeah, it's, in some cases, you can see like what it is, and well, - -8 -00:02:56,430 --> 00:03:00,210 -Scott Tolinski: you can see it but you don't you don't look underneath. You can? Yeah. - -9 -00:03:00,780 --> 00:04:29,570 -Wes Bos: So I thought maybe we can initially just start explaining like, what is the Shadow DOM as we see it right now, then maybe we'll get into like what is the Shadow DOM as part of web components and making your own shadow DOM components. So I think the best way to think about it is that sometimes in the browser, you need to encapsulate UI, and logic and styles and things like that. It's very much like any framework that you have, you often want to like, encapsulate all these things into one nice tidy package. And the browser itself has a bunch of Shadow DOM elements that are itself. So if you think about a video or audio tag, those things will have play button, pause button, a slider for the volume, the actual viewing place, event listeners for keyboard shortcuts, all kinds of stuff that's going into it. And if you inspect element on a video or audio, it's just a video tag. But under the hood, actually, if you open up an mp4 directly in the browser and inspect that, you will see that there are buttons and divs and paragraphs and spans and inputs there are there are actually made up of all of those different elements. So that is the whole idea behind the Shadow DOM is that single elements, or single components are actually made up of many more elements, sort of under the hood, in order to reduce complexity and to encapsulate at all, we just pack it into its own one little element called the video or audio or what other elements in the browser or - -10 -00:04:31,320 --> 00:05:40,170 -Scott Tolinski: things like a slight lacked, yeah, input, because they have their own functionality. They have their own styles and that you've been using the Shadow DOM all along, and you didn't even know it. It's easy to look at these things like video tag, you just pop it in. And you don't even realize that under the hood, it is it's just inputs, its buttons, it's divs. It's these things that we use as the basic building blocks. And once you realize that will the default browser stuff is all just shadow DME and it's just elements, then that should really sort of blow your mind. Because then when you think about it, what other things will I mean, the video tag didn't exist for a long time and HTML. So what other things don't exist right now, that should exist or could exist? Or, you know, I mean, maybe there's a whole host of components that we haven't necessarily dreamed up in the way that they need to exist. So I think this is totally fascinating, because maybe there's a component that your your site needs that no other site in the world is going to need. And then what do you do? Well, you create your own you create your own component, your own web component? - -11 -00:05:41,790 --> 00:06:34,080 -Wes Bos: Yes, I guess that's the second part to this is that obviously, there's default ones that come in the browser, and they're usually kind of hard to style, that's generally when you have things like a dash WebKit appearance. Or, if you ever want to style drop downs, and you find these like, really obscure, like, the one that comes to mind all the time is input type of range, where you have a slider, if you ever want to style those things, you want to style the the button that you grab on to the track the notches, all of those things are styleable. But via these weird things is because it is a shadow DOM element under the hood. But you can there is a whole browser based API out there using for creating your own shadow DOM elements. So maybe we should like like, what's the benefit of making a shadow DOM component or a web component over just using like a rack component or just a div? - -12 -00:06:34,470 --> 00:07:28,020 -Scott Tolinski: Yeah, I mean, when I think about that, like, even just think about the the ones that currently exist, like what do they do? Well, they have functionality that like doesn't leak over, right? This, like, let's just use it as a drop down, you click one or whatever, the video has the play, pause, whatever, you don't really need to access that sort of stuff. I mean, you can, but you don't need to access the internals. And then there's also styles, the styles don't leak out, right, you can style the div inside of a video player. And you don't have to worry about classes leaking or overriding classes, because everyone's going to use a video player. But everyone's doesn't want to have some basic CSS class or default styles leak into their website. So it encapsulates it scoped your styles. And it basically, I think the key thing is just encapsulation. For me, it encapsulate functionality and style in a way that's like, here's this thing, and it exists in the space. - -13 -00:07:28,080 --> 00:08:47,970 -Wes Bos: Yeah, uh, one thing I didn't know before we did this is that you can just take a shadow DOM element, you can append a style tag with a bunch of CSS inside of it, and that CSS will just be scoped to that element. One other cool thing is, when you when you actually go ahead and create your element, the way that it works is that you, you take like an empty element. So take like an empty div, and then you you run a method called attach shadow against it. So you just grab any element on the page and run dot attach shadow. And what that will do is it will turn that element into a shadow DOM element. And then you can use your regular Dom API's to start appending elements into that. So style tags, script tags, divs paragraph tags into it. And you can also when you run this attach shadow method, you specify whether it is open or closed in terms of mode. And when it's open, it can you can access the elements via JavaScript from the parent scope. And when it's closed, you cannot so I think about a video tag that's closed, you can't access the individual buttons of a video tag. But if it was open, you would be able to have access to that. So I thought that was pretty neat that you can lock it down or still give access to the parents. So it's in my opinion, it's almost like a better iframe. Where Yeah, yeah, you can reach into it, if you want allow people to do that. Yeah, there's - -14 -00:08:47,970 --> 00:08:57,120 -Scott Tolinski: a lot of interesting things about the Shadow DOM and web components in general. So do you want to take some time to talk about creating your own web components now? Yeah, so - -15 -00:08:57,120 --> 00:09:30,210 -Wes Bos: it just said about like you, you create a shadow DOM element with the attach shadow. You can append with a pen child or insert before insert adjacent, all of the DOM API's that you're probably used to. And then this is not anything I've ever done. Maybe you've done it before, Scott. But you can use the window dot custom elements, dot define method to define your own custom elements. So you can just make your own tags very much like we do in reactor view, or something like that. And then they'll just to be available on the page for you to go ahead and use. - -16 -00:09:30,690 --> 00:11:13,320 -Scott Tolinski: Yeah, and I've done web components for men. That was a while ago last time. Maybe not the last time but I worked on while Web Components back in, you know, 2014, maybe, yeah. And using Polymer, I actually had a couple of tutorial series on polymer for both the first version and the second version of Polymer. And since polymers changed a little bit, the polymer project is a little bit more encompassing of several different things now, but one of the things that's in polymer is basically this polyfill for webcams. Opponents where you can just use web components, and they just work. And Google even had a whole bunch of their own. It was really, really pretty sweet. But no, I have created web components. I've created them. And I used the polymer polyfill. When I did, and it was, it was pretty cool. I didn't do anything major with them. It wasn't like a huge, huge project. It was a side project. And it was really just for fun. But you know what, I did have fun. And I think there is, I think there's a lot of people who have rightful criticisms of web components. And maybe they're not as useful as something like react. But at the end of the day, I think it's a cool thing. And as long as they continue to evolve, I think it's just gonna get better and better. But, you know, me personally, I've only used in the small, small sense. So it was cool for what I was doing. And it worked well. And it felt nice. But again, I haven't done craziness with them. And usually, I'm probably just picking react anyways, because it's sort of a component based flow. And it sort of feels like you're making web components, even though they're not. So yeah, I don't know, I don't know if I would reach for it necessarily, until it's maybe a little bit more full featured. But the end of the day, if it ends up being as full featured as something, then you don't have to use the library use. It sounds pretty cool. - -17 -00:11:13,410 --> 00:11:36,810 -Wes Bos: Yeah, yeah. It's pretty exciting to see this stuff. There are some libraries out there specific. I'm looking at react shadow, which will allow you to use react components, and they automatically get turned into Shadow DOM elements. Interesting. And I guess the benefit of that is you can encapsulate your CSS, like that. So it's just yet another way to do scope styling in react. So I thought that was pretty neat. - -18 -00:11:37,170 --> 00:12:24,330 -Scott Tolinski: Yeah, you know what? Some of this stuff, it all reminds me of there. Actually, I think this will date when we recorded this. But today felt version three, I believe just came out. Yeah. And this framework to me is super interesting, because it's component based and it disappears. I don't think it has anything to do with web components necessarily. But it just the way it disappears. And you're only using browser API's rather than like a library itself. Yeah. It's just sort of fascinating to me. And I think that's sort of the future where we're going, it's like, why don't we put react in the browser? Well, I mean, kind of web components could be that future, as long as web components continue to evolve, like, why don't we just put the framework in the browser? Well, we sort of are I mean, that that is like the dream of web components. Right there. Yeah. - -19 -00:12:24,480 --> 00:12:37,170 -Wes Bos: One thing I have a question about is, I don't know if you know the answer to this this like, Is there anything like similar to live variables? I use that in air quotes here? Like, like state is in react in Web Components? world? - -20 -00:12:37,830 --> 00:13:11,220 -Scott Tolinski: Yeah, you know, I'm not, I'm not quite sure it's been a long time since I've actually used them. This may be one of these things where we both need to spend a little bit of time diving into them, and maybe report back on like what we learned about web components, because I think that is maybe a very interesting sort of topic. This is definitely a really interesting thing. So if you know about live reactive variables, and web components, tweet us out, listen, oh, yeah, actually, that might be an interesting person to have on as a guest in the show a web components expert. Yes. I would be interested in talking to a web components expert. I have a lot of questions. - -21 -00:13:12,720 --> 00:13:28,410 -Wes Bos: Awesome. Cool. So I think that is our explanation of what the Shadow DOM is. It's something that already exists in the browser has for a long time as well as an API for creating your own encapsulated components. - -22 -00:13:29,100 --> 00:13:33,030 -Scott Tolinski: Yeah. encapsulations keyword capsulation in capitalists the - -23 -00:13:33,030 --> 00:13:38,160 -Wes Bos: Word of the Week from Scott and why the week. Anything else to add? - -24 -00:13:38,160 --> 00:13:39,480 -Scott Tolinski: I got nothing. - -25 -00:13:39,569 --> 00:13:44,460 -Wes Bos: All right now. That's it. Thanks for tuning in. We'll catch you next week. Please. - -26 -00:13:46,560 --> 00:13:56,310 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax144.srt b/transcripts/Syntax144.srt deleted file mode 100644 index 19924dd2a..000000000 --- a/transcripts/Syntax144.srt +++ /dev/null @@ -1,568 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:34,820 -Wes Bos: development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. Hello, everybody and welcome to syntax the podcast with the tastiest web development treats out there. Today we are going to be talking all about side hustles. So you're a developer, you've got some, you've got your tech skills, and you want to make a little bit of side money or you've got some ideas as to something you want to build. And we're going to be talking all about that. So with me today is Scott Tolinksi. As always, how you doing today, Scott? - -4 -00:00:35,249 --> 00:00:41,729 -Scott Tolinski: Good, good. For a little something. I think you're getting a little over a little something. I think we're all getting over a little something. So - -5 -00:00:41,729 --> 00:00:53,189 -Wes Bos: we are all getting over a little something. But probably what's most exciting is today we have a guest on the show, which is courtland Allen, who runs the indie hackers podcast. Welcome, Kaitlyn. - -6 -00:00:53,489 --> 00:00:54,930 -Unknown: How's it going? Wes? How's it going, Scott? - -7 -00:00:55,019 --> 00:00:55,860 -Wes Bos: Oh, pretty good. Hey, - -8 -00:00:56,009 --> 00:00:56,520 -Unknown: thanks for having me on. - -9 -00:00:56,729 --> 00:01:09,450 -Wes Bos: Yeah, thanks for coming on. I'm, I'm a big fan of the indie hackers podcast. And I know Scott is as well. Do you want to give us I just sort of a quick rundown of what is indie hackers, what it is that you do and so on. - -10 -00:01:09,869 --> 00:02:08,880 -Unknown: Yeah, Scott said he's getting over something. So am I so apologies in advance if I just devolve into a terrible coughing fit? This episode, nd hackers is an online community of developers mostly who are interested and making money from their side projects, or just making money online, in general. And so we've got a whole bunch of different parts of the website, we've got a podcast, as you mentioned, where I like to feature developers or other founders who've found a way to sort of bootstrap their way to profitability. I had you on the podcast West guy like a year and a half ago now. Yeah, on time going short history. We've got the online community forum where you see all sorts of people, exchanging ideas, reading each other's landing pages, helping each other find the first users and just grow their businesses into something. And then we've got the online interviews as well, where we've talked to you something like 400 people, we've asked how they come up with their idea how they found the first users, how much money they're making, etc, the entire backstory of their business of the rest of us can learn how they did it and do it ourselves. - -11 -00:02:08,969 --> 00:02:36,810 -Wes Bos: That's how I actually initially found any hackers was those like, what I love so much about all indie hackers. It's all very tangible and all very real. So yeah, rather than just sitting around and saying, like, share what you know, and be passionate at you, you give actual tactical things that people have done, the nitty gritty. And I love that it's very refreshing to have conversations with people who have done it and who are successful. And you can figure out the little tricks and things they've done along the way. - -12 -00:02:37,080 --> 00:02:54,030 -Scott Tolinski: Yeah, and indie hackers is one of those podcasts where you can listen to every episode and know that you're going to walk away with something tangible, which think it is like something, something you cannot hold on to rather than just being okay on inspired. But this is like actionable items. It's one that I find immense value. And so I'm a big fan. - -13 -00:02:54,210 --> 00:03:02,789 -Unknown: Oh, shucks, guys, thanks. I really thought at the beginning, like maybe I would just make the whole website full of fluffy quotes that you can't do anything for him. But I decided to get with a - -14 -00:03:05,669 --> 00:03:38,250 -Wes Bos: be great. Before we get into any talking about side hustles. And whenever we want to thank our sponsors. Today we are with Log Rocket and Freshbooks will talk about both of them partway through the episode. So let's get right on into it. Um, we've had many, many episodes in the past about freelancing. And we're you sort of offer up your skill as a service. But we don't often talk about sort of the other side of things. Whereas getting into selling products, which is funny, because Scott and I both sell those things. And I think they both sort of started as a side hustles for us. - -15 -00:03:38,310 --> 00:03:41,430 -Scott Tolinski: Absolutely as a side hustle for me for four or five years. - -16 -00:03:41,789 --> 00:03:51,780 -Wes Bos: So I thought we were a courtland was the perfect person to come on and talk about that, since he's obviously an expert in this sort of was hold on was indie hackers started as a side hustle. - -17 -00:03:51,960 --> 00:04:04,470 -Unknown: Yeah, it was, it was my full time thing. So I quit my job in 2016. Now I was contracting, I had a lot of contracts. And I sort of waited for all of them to end at the same time. So it's a little fresh to say that I quit. And it - -18 -00:04:04,500 --> 00:04:05,880 -Wes Bos: were you you're a developer, right? - -19 -00:04:05,910 --> 00:04:06,990 -Unknown: Yep, I was a developer. - -20 -00:04:07,229 --> 00:04:11,310 -Wes Bos: And because you still build all of the the indie hackers infrastructure, right? - -21 -00:04:11,400 --> 00:04:15,240 -Unknown: Yeah, I spend three weeks a month coding and one week a month on my podcast. - -22 -00:04:15,509 --> 00:04:24,320 -Wes Bos: Oh, that's amazing. I love hearing that. Because like you're a developer first. And the indie hackers form is awesome. It's all built on Firebase. Right? - -23 -00:04:24,360 --> 00:04:30,140 -Unknown: Yeah, yeah. It's all custom Firebase database. coding is the fun part. You guys know, things like Yeah, it is. - -24 -00:04:30,140 --> 00:04:44,970 -Scott Tolinski: Yeah, I know, the same thing where you batch your content all all in one week or so you work on the code the rest of the time, and that sort of fuels everything keeps you fresh, keeps you keeps you ready to do each thing just by by bundling all up together. - -25 -00:04:45,240 --> 00:05:05,040 -Unknown: It made me crazy trying to mix both of them every week, because I wouldn't be like I had so much code to write then I'd have to take time out of my day to like, do this podcast thing and I would try to rush through it like get back to the code. Whereas now with a batch to like one week five or six podcast episodes, I can just take my time. It's fun. It's easy. And then I have three weeks I can code. I'm not worried about anything else. So yeah, - -26 -00:05:05,070 --> 00:05:27,480 -Wes Bos: yeah. So that's really interesting approach to it. I really like that as well. Because I often find myself sometimes when I've got like six or seven things throughout the day, I've got a meeting here, podcast record here. And then I'm just like trying to fit code in the cracks. And as we know, it doesn't doesn't work well, that way, right? You have to have large, unblocked time to actually put towards code code does not fit into the cracks. - -27 -00:05:28,500 --> 00:05:29,700 -Scott Tolinski: No, that's good. - -28 -00:05:30,540 --> 00:05:35,850 -Wes Bos: So would you mind like, give me taking a stab at like, what is a side hustle? - -29 -00:05:36,270 --> 00:05:36,930 -Unknown: What is a side hustle, - -30 -00:05:37,200 --> 00:05:38,280 -got a side hustle? - -31 -00:05:38,550 --> 00:06:48,930 -Well, it really depends. Like, I don't use the term side hustle. Very often I talk to people, we've sort of called ourselves nd hackers. And it's also like, it's other term makers. And I don't know, two years ago, people weren't really saying either of these things very much. But now it's all over the place. What I would describe as a maker is somebody who just really likes making things. And that's the only requirement if you got a computer, open up your your ID and like make something then you're a maker, a side hustle, I would have thought decide, like define something that you do on the side of your normal job, you don't have any, you don't necessarily have the ambition to quit your normal job. Or maybe you do, but you're doing it on the side, as the name implies. And generally speaking, your side hustle is something you want to make money from, you actually want to generate revenue and supplement your income or do what you guys have done it eventually go on to like, make it your full time gig. And then I would say an MD hacker, which is sort of the demon and for the people who come to my website, or people who, from a gecko are like, 100% sure, they want this to be their full time thing. At some point. They really want to make money online. And so a lot of them have side hustles out of them do what I did, and just quit their jobs cold turkey, and start building something while they watch the money in their bank account slowly dwindle down to zero. But that's that's how I would define those terms. - -32 -00:06:49,020 --> 00:07:08,490 -Wes Bos: Oh, yeah. So would you say the the people that you have and that you feature on on ad hackers, do you think that like, like, what proportion of them are people who sort of not necessarily stumbled into it, but there are people that were just trying all kinds of stuff? Like, what's the one with the html5 when it was a couple of weeks ago? - -33 -00:07:08,520 --> 00:07:09,960 -Unknown: You had AJ from card? - -34 -00:07:10,200 --> 00:07:37,980 -Wes Bos: Yes. So yeah, okay. I sort of like just was putting up these html5 websites. And that blew up. And then he sort of saw that, oh, this could be something people are asking for, like e commerce. And then he went ahead and made card. So like, like, what, what percentage of people? Do you think that would? Are people who sort of were just like working on something they're really excited about? And then it became a business versus people who just from the get go say, like, I'm gonna try to make this a business? It's a - -35 -00:07:37,980 --> 00:08:56,460 -Unknown: really fascinating question. Because I think about this all the time. In fact, I talked about it on the index form to people, I tell them to watch out for denominator blindness. And I'll get into what that means in a second. But probably the majority of people just stumble into it, they build something they think is fun, they work on a side project that they're just hacking on. And you know, one thing leads to another, they hear some, you know, feedback from potential customers, they add a few features or something, put a price tag on it, and they start making money that happens more often than not, I would say, that being said, a lot of the people that I talked to on the in the actual room are asking how can I do this? Right? How do I have the best chance of taking my side projects or taking a new idea, and making money from it to the point where I can quit my job or at least supplement my income? I think asking how you have the best chance at accomplishing something is not the same thing as asking you how many people do something, because the denominator, most people stumble into things. But the number of people who are just randomly doing things and might stumble on something is vast. Whereas I would say it's more rare to encounter somebody who sat down with a pen and a pad and sketched out an entire business plan or like, you know, some sort of strategy for exactly how they're gonna make money online. Those people are more rare. But there are fewer people trying that. So actually, it's somewhat deceptive because a higher percentage of those businesses succeed, I think, now, even though you see fewer on the numerator side of things. - -36 -00:08:56,779 --> 00:09:22,350 -Scott Tolinski: Yeah, I think I personally fell into the camp of falling into something. But once I decided that it was going to be the thing. Yep. Then I pulled out the pen and pen and paper and like, really figured out how it was going to need to work. Yeah, because it was like, Alright, everything is being staked on this. So you have to be smart about it. Would you fall in that in a different camp than either of those two are in your mind is that this sort of stumbling upon it? And then and then realizing it needs to be - -37 -00:09:22,440 --> 00:09:28,789 -Unknown: nothing that counts as stumbling upon it like you? I mean, did you start a completely new project? Or did you kind of tank like the same project? And oh, - -38 -00:09:28,800 --> 00:09:33,600 -Scott Tolinski: yeah, it was it was a same project massaged into a way that that works falling into it, for sure. - -39 -00:09:35,130 --> 00:10:17,130 -Unknown: Man is like I would fall into things that never worked. So I spent years building things, I've never found any traction, there's never a point to which I thought this is going to be the thing. And then I realized, Hey, I'm just gonna, you know, fly by the seat of my pants here. I should have some more discipline. I really should sit down and list all the things that I know that work that don't work. I made sort of a checklist for myself, and I'm like, I'm not allowed to work on any idea that doesn't score very highly on this checklist. Otherwise, it's very unlikely to turn into something that's profitable and so interesting for a few few days of ideation that came up the idea for indie hackers, which scored very highly on the checklist. And so that was sort of a switch for me being, you know, maybe I'll stumble into something, if I just keep coding things I like to let me figure out exactly what I should build. - -40 -00:10:17,419 --> 00:10:52,440 -Wes Bos: That's super interesting. I love I love hearing that that kind of thing where, like, there has to be some at least some bit of intention at some point. Yeah, if I think back to all of the stuff I've done, it was I probably wrote 30 blog posts, and then the Sublime Text ones just got we're on fire. And and that's me stumbling into something that worked well, because it's just trying stuff here or there. And then as soon as one did well, you sit down and say, Okay, this is obviously a thing, how do I now move forward with intention and to making this an actual business and, and making some money off of it? And what can I offer people, - -41 -00:10:52,500 --> 00:11:19,950 -Unknown: you did it the smart way, which is that you did, you're stumbling through something that had a very quick feedback loop, which was writing blog posts, you can crank out a blog post and a few days, see what the reaction is, and you're done. You can get out 30 blog posts a month, if you're a machine, maybe 30 a year, for more normal person, whereas I was sort of stumbling by writing code, and it takes a long time to build an app. You know, yeah, monster several months to build something and then discover that no one really liked it. So I like the doing things that have quick feedback loop. - -42 -00:11:20,250 --> 00:11:37,260 -Wes Bos: Is there anything that you can do to make that quicker? Obviously, there's the classic Tim Ferriss go buy ads, and I kind of done to death. Now I sort of roll my eyes when I hear people say that now, but like, Is there any other like tricks that you can do to what's that called in the biz? validate - -43 -00:11:37,260 --> 00:12:59,250 -Unknown: your ideation? Yeah, yeah. business idea, validation. So the whole idea is that like it takes, like I said, a long time to build an app, you don't want to spend time building an app that no one's gonna want. It's pretty surprising for a lot of first time founders, but like, actually, your convictions that your thing is going to work are no better than your mom saying that she believes in you, it doesn't really mean that it's gonna work in the real world. Do you want to validate what you're doing? And like you said, Tim Ferriss has this whole, like, put ads online and see if people click your ads, which actually is underused, even though people talk about it a lot. There are people who actually do that. What I did for indie hackers was I just let other people validate my idea. So I didn't like come up with an idea from scratch based on nothing. I saw what tons of people were talking about on a particular internet forum, and said, Oh, this is super popular. Look at these thousands of people talking about this every week. it's valid, I know, people are gonna want this. So I sort of just skipped over that whole step of having to prove it to myself, and just sort of adapted myself elsewhere and made it better. There's always talking to people. as developers, a lot of us don't want to do this step. I certainly skip it a lot. But you can afford to write a line of code, talk to people you think might be your ideal users, and ask them all sorts of open ended questions and learn a lot more. And you'd be surprised at how much 10 or 15 of these customer interviews will save you time, down the road. Data could go on and on. There's like, there's so many different things you can do. There's entire books written on how to validate an idea. Like I mentioned earlier, I have my own validation checklist where I will work on anything that doesn't match up against all these different criteria. - -44 -00:12:59,490 --> 00:13:01,830 -Scott Tolinski: Is this validation checklist open source. - -45 -00:13:02,279 --> 00:13:07,350 -Unknown: Um, you know, as you put it on GitHub right now, which is a little doc that I share with people, but I'll work on that. - -46 -00:13:07,590 --> 00:13:10,200 -Wes Bos: Yeah. That would be really cool to see. - -47 -00:13:10,380 --> 00:13:12,480 -Unknown: Do you guys have shown it? So I'll send it to you guys and put it in there? - -48 -00:13:12,510 --> 00:13:31,470 -Wes Bos: Yeah, yeah, totally. We can throw it in the show notes. So let's talk about like different tie types of, of businesses that you can sort of get into, I've just jotted a couple down here. You've got SAS, which is like a software as a service. Like, what's it? What's a good example of a SAS that one person has built up? You have any ideas there? - -49 -00:13:31,860 --> 00:13:34,500 -Unknown: You guys were of balsamic? balsamic, Marcus. - -50 -00:13:34,529 --> 00:13:37,529 -Wes Bos: Yeah. wireframing tool. Right, exactly. So - -51 -00:13:37,529 --> 00:14:15,149 -Unknown: you want to sketch out your whole app. But you know, the best artists, you just sign up for the wireframing tool, you know, drag things around. That was started by one guy, his name's Pelle D. Hilarious guy. I totally recommend him coming on this podcast. But he did this a long time ago, I think 10 years ago, after quitting his job and Silicon Valley. And he just built it by himself and whip it out. And he was making, I think, a developer salary within a year of him launching this app. So then SAS, it's just software as a service. It's on a server somewhere. People log in and use the app and pay him a monthly fee. Now he's got a whole team. And they're making like $6 million a year or something. But it was it was just having at the beginning. Oh, that's - -52 -00:14:15,360 --> 00:14:16,770 -Scott Tolinski: the that's the way to do it. - -53 -00:14:17,279 --> 00:14:29,909 -Unknown: Yeah, yeah. A lot of us resist building a team, like I've been so loath to hire Randy hackers. It's just like, it always seemed like such a headache. And I started doing it about this time last year, and it's actually like a huge relief. It's really fun to have a team. - -54 -00:14:30,179 --> 00:14:33,690 -Scott Tolinski: Do you have full time employees are all just contractors, contractors? - -55 -00:14:33,899 --> 00:14:37,409 -Wes Bos: Yeah, that's cool. And what kind of stuff do they work on? - -56 -00:14:37,949 --> 00:15:19,020 -Unknown: All sorts of stuff. Like we've got our newsletter that goes out Monday, Wednesday, and Friday. I don't have to write that anymore. We've got community manager and EMS Rosie. She's actually one of the first people that I interviewed for indie hackers. She grew her own community for software testers to something like $1,000,001.1 million in revenue. And then she decided that wasn't her favorite community. And she wanted to be an indie hackers Community Manager. So she works. She makes everybody in the forum feel welcome and helps answer their questions. We've got people who help us put out a lot of our content, because we're doing like, five or six articles a week plus newsletter plus the podcast plus our Twitter stuff. And an Instagram account will be telling stories there too. So I think all told, like five different contractors, and the main my brother, - -57 -00:15:19,169 --> 00:15:21,419 -Wes Bos: how do you make money on a community? Oh, God, - -58 -00:15:21,419 --> 00:16:27,419 -Unknown: I wish I knew the answer to that question. Before I joined stripe, so I started any hackers in July 2016. I worked on it for eight months, I grew my revenue to about 50 $500 a month by March 2017. And that was enough for me to pay my rent. I live in San Francisco, so right as expensive food etc. bills, I was pretty happy about that. And then any equity is acquired by stripe. So today I don't I don't charge any money for anything, I just work on it for stripe with the goal of making it bigger and better. Yeah, but I've seen a lot of people with communities charge money. And my bias is to charge the people who you think you're delivering value to. So if you have people joining your community, and you think a community is actually useful to them, put a price tag on it, say it's 50 bucks a year to join. And very quickly, people who don't find value in your community will leave and people who do okay. And that'll give you the signal that you need to figure out. Okay, what should you invest in? What do people actually like here. But there's other ways to do it as well. If you can charge businesses to advertise or sponsor, whatever you're doing, that could be a good approach. That's what I was doing with indie hackers. And I think it's probably the primary way that communities monetize, you could also do events, a lot of people like to do conferences, or meetups and make money that way. Yeah, keep everything else free. - -59 -00:16:27,659 --> 00:16:55,320 -Wes Bos: Oh, that's really interesting. I never ever thought about that. I think I think back to like, when I was, I don't know, like a kid. And there's all these amazing, like forums that were so specialized for every single topic. And I, I'm sort of sad that Facebook groups has killed off a lot of like, that's why like indie hackers were still like the OG community, and there's still people that are like, really actively involved there. Whereas like, the Facebook group has really hurt a lot of those those communities. Now, - -60 -00:16:55,860 --> 00:17:25,980 -Unknown: I don't think it'll last. I think now, I think as time goes on, people, like every one of those Facebook groups will eventually be picked off by somebody who wants to make their own custom thing better, because Facebook can't make the group software specially tailored to every Yeah, use case, like you're always gonna have the advantage if you can create something from scratch. And really, like, I mean, it's called product market fit, right? You want to tailor your product to fit in the market that you're targeting. So you always have the advantage if you go that way. And you just have to do the hard part, which is finding users but once you do your your software certainly be better than Facebook groups. - -61 -00:17:26,130 --> 00:18:14,600 -Wes Bos: Yeah, yeah, I mean, thinking of another example of a community I grew up with, which was called Red Flag deals. And it's a huge website for Canadian bargain hunters, so that they would have all the, we have like a black friday thing called boxing day here in Canada, so they have all the Boxing Day flyers. And the big thing was, people would always find these incredible price matching things where like, at the time, Best Buy would like price match down to like, they would beat it by 10%. So there was like an SD card that they had for like $300. And it was on sale for $30 at another place. Yeah, I smash it down to like $8. And that was like the best commodity. And they made tons and tons of money because like, there was lots of companies that wanted to get in front of these hungry buyers. So I guess that's another way is that there's just lots of people that want to get their eyeballs in front of the people of that community. - -62 -00:18:14,730 --> 00:18:19,140 -Unknown: Yeah, slick deals on that still going huge community of people trying to Yeah, - -63 -00:18:19,260 --> 00:18:30,800 -Wes Bos: yeah, that's awesome. Other other ways you can learn here are applications. So I guess that's similar to SAS, but it's just sort of a one time buy on that sort of thing. - -64 -00:18:31,890 --> 00:18:37,820 -Scott Tolinski: When our doing subscription based models for updates, you see that like more and more commonly, - -65 -00:18:37,820 --> 00:18:49,440 -Wes Bos: yeah, like, how does how does sketch works, where you buy it for a year, and then you can hang on to that you just don't get updates past the year? You have to buy another year's worth of any other examples of that. courtland. - -66 -00:18:49,860 --> 00:19:51,080 -Unknown: Yeah, that's an interesting pricing model. In my mind, I would still consider it like somewhat SAS. I mean, I guess yeah, because you've downloaded it. But it's not too different just to get different pricing model. And you find a different way to charge people and cut them off and pricing as a whole can of worms, where it's like, who even knows what the right price to charge anyone is the right price. Yeah, like everybody thinks they know. But then they change it up. And they're always surprised. So it's hard for things to come to mind there. But I like that you said an application is sort of a thing that you build once. It's something that I don't think it's done enough. Like I interviewed Dave to Sandro he has a company called metaphyseal. And he builds like plugins and libraries for people. And it's really cool because he's putting stuff online. It's not like an application that you download to your desktop or anything. But he just builds it. And then eventually, one day he's done. And he moves on to the next thing kind of like courses West, which is for most people building software, like a pipe dream, like any hackers can be done. There's always like, the more features I build, the more features are to build. Same with a company like stripe, like that's never gonna end or Facebook or Google. But if you build these these little apps, these little plugins, it's kind of cool because you can move on to other things and those things keep making money and you can build something new. - -67 -00:19:51,300 --> 00:19:56,840 -Scott Tolinski: Yeah, like that act of finishing something is just totally almost foreign in our industry at this. Yeah, - -68 -00:19:56,880 --> 00:19:58,850 -Unknown: I haven't finished anything in years. Yeah. - -69 -00:20:00,390 --> 00:20:50,550 -Wes Bos: I would recommend to our listeners to go listen to that one with. Is it Dave? De Sandro? Yep. Dave? Yeah. So he's the developer behind flippity which is like the best carousel out there. Jake are isotope it was jQuery isotope is no longer jQuery. masonry JavaScript as the original masonry stuff. Yeah, all of that. He just built these like wicked plugins, like granted. He's a genius, like, the amount of math that goes into these things is incredible. But it's just like a perfect example of like, we're gonna ask you a little bit later. But like, open source, like how do you make money off of open source where you just, you're giving your heart into this thing that is open for the community, but you also want to make money off of it. And I think I believe he charges if you want to use it production, or if for a commercial product, I think it is, which is, - -70 -00:20:51,210 --> 00:21:24,300 -Unknown: yeah, he just has a license on there. And it's like, if you want to use it free for your personal project, you just download it, it's free. And if you want to actually run a commercial, you know, enterprise and you use it, you have to pay, which is something you also never see people feel like you need to have a pricing page and you need to get people in, etc. to sort of just trust based, there's really nothing stopping a bigger company from using it. Like I doubt Dave is out there with a magnifying glass, look at everybody's website, trying to you know, send that lawsuits, but he still makes a lot of money from it, it still works. Because by and large, bigger companies don't want to skirt the law. So I liked his business model a lot. I don't think I've ever interviewed anybody else who does it that way. - -71 -00:21:24,450 --> 00:22:20,040 -Wes Bos: Yeah, that's like, I stumbled upon this. The other day, I was on my parents computer. And it was WinZip had that for the years where WinZip would just say like your trials up, and then you just push Okay, and it would still work. And apparently they made like tons and tons of money. And now I tried it the other day and they finally stopped that. Were you it just didn't work after you didn't pay for WinZip. But I thought that was always interesting business model to Yeah. Last type I have here I don't know if you have other ideas is some is just digital products. So obviously things like courses Scott and I sell I don't know if Scott would be considered more of a SAS because he's monthly where I'm a single purchase. But then there's also things like people sell themes that was really big in the WordPress world still is I think as well, but it's sort of a really crowded space. Now. Is there any anyone that you've interviewed, that do that sort of space besides me, - -72 -00:22:20,220 --> 00:23:58,980 -Unknown: a few people that I've interviewed that do digital products, I have one coming out pretty soon with this woman, her name is Allie fever. And she is sort of doing like a lot of consulting now. But she is rare, and that she started off doing digital products. And then she didn't like and she decided to like, I don't want to say revert, I don't say go backwards. But she decided to transition into consulting. And most people I interviewed that go the other way around. But I think it's a great business model for kind of similar reasons to what we were talking about earlier, which is having a very quick feedback loop. So for putting out digital products, if you're putting out basically information that people can buy from you, it doesn't take too long to do it if you're committed to doing a quick and dirty version, and you get feedback instantly. And so nd hackers itself, like arguably is a content site. We have a community, and I monetize our community through ads. But also, it started off with just me doing interviews. Another good website is Nomad list started by Peter levels. dejuan, what he did was he got a bunch of people on Hacker News to sort of crowdsource the spreadsheet of good cities to work in as a digital nomad. And he took that and he packaged it into a website is that the same as a course, I don't know that the lines are pretty blurry. It's not as neatly packaged doesn't have an end point like a course does. But at the same time, it's just selling people information, it's helping them learn something that they could find elsewhere online. But it's better if it's all in one place, sort of neatly packaged by a curator who can kind of explain it to people. So I think that's a great way to get started. It's fast, you can always sort of stair step your way from there into something more substantial. It's something I find myself talking to indie hackers about over and over again, because we all have this grand vision of some app we want to build, it's going to take us three years to build a solo developer, very often you can provide a lot of value to people just by putting together information selling digital products. And then once you build an audience from that, you know, use that to build a more substantial SAS product. - -73 -00:23:59,130 --> 00:25:49,230 -Scott Tolinski: Yeah, yeah, I found that that feedback loop is like really important for my business because I release a like a new tutorial series every month. Right? Right. And so it's really easy to see month over month, which ones are really resonating, which ones aren't resonating with the course for the future should be in terms of like providing content or building out different things. So I find that that feedback loop to be absolutely essential in determining what content to produce. As far as feedback loops. Go though, if you are having a trouble with your website code, and you need feedback, figure out what the heck's going on. When people hit bugs, you're going to want to check out Log Rocket, because Log Rocket is the best way, in my opinion, to get feedback about what's happening on your website. Those of you who don't know Log Rocket is the really brilliant way to track and record your errors and get a session replay. Now that session replay is going to be an actual scribble video interactive that you can see exactly what your users did to cause the bug Cause the air you can get a full stack trace, you can get your Redux store. It integrates with all the libraries, you know and love. And let me tell you this thing is absolutely essential for shining light on some of these very, very difficult errors. Somebody comes to me and says, Hmm, I tried to do this thing and it didn't work. No longer do I have to ask them for a bunch of information, I can go ahead, get a session replay, see what's going on and fix that thing as fast as possible. So if you want to try out Log Rocket, which I highly suggest you do, head on over to Log rocket.com forward slash syntax, and you will get 14 days for free. And just throw the throw a little code in your app, get started and try it out. Trust me, this is one of those ones that is really super cool. Once you throw it in and see just how insanely useful it is. So Log rocket.com forward slash syntax. - -74 -00:25:49,380 --> 00:25:59,610 -Wes Bos: Awesome. So we talked about the different types of businesses, we had SAS community apps, digital product, are there any other like categories of businesses, you might think that we miss your Cortland? - -75 -00:26:00,000 --> 00:26:39,270 -Unknown: Yeah, I mean, we didn't really touch on open source as much. But I love open source. I think open source is really cool business model. I think having you from Vue JS came on the podcast and talked all about his opinions on how to start a successful open source business, I recommend people listen to that. We haven't talked about e commerce as much. Ecommerce is pretty cool. It's, it's cool because you can sell products that other people made, which is great if you're just getting started as sort of a founder, because then you can focus your attention on you know, different parts, not necessarily creating the product, but selling it or marketing it or advertising it and that kind of stuff is hard. And as developers A lot of us have that as our blind spot. So I think commerce is up and coming and it's a really great place to get started. - -76 -00:26:39,360 --> 00:26:44,790 -Wes Bos: It's an e commerce You mean like like selling physical products or drop shipping or it could be anything - -77 -00:26:44,910 --> 00:27:26,880 -Unknown: any all of the above is e commerce there's so many different like and incarnations of ecommerce, you could have a Patreon, you know, that's not even necessarily a business, but it's ecommerce because you're generally providing like products to people that people you know, pay for from your Patreon, I think Yeah, you know, there's Shopify as a platform is huge and growing lots of love Shopify stores, lots of developers, I know have Shopify stores. There is there are platforms like Etsy, obviously, there's drop shipping on Amazon, you can build your own e commerce platform, your own e commerce website, sort of friend from school, somehow got into the business of selling shoes. I think he started on Amazon. And now he's got this whole online shoe store. And it's really cool. Actually, I visited his office, and it's just full of shoes. And it's not what you'd expect them to be doing. But it works really well. So I think e commerce is one that we've missed. - -78 -00:27:27,000 --> 00:28:24,090 -Wes Bos: Yeah, it's funny because I love the concept of just even just arbitrage in general. So arbitrage is where you buy somewhere cheap, and you just flip it for more money. And that's the whole business. And I've been somewhat doing that with bikes in this past spring. So I've been buying road bikes on from Kijiji, and Craigslist and all these things, and I've been fixing them up and selling them. But the reason why I'm so good at it is because I've built this like application that will snipe them off of when something is posted, I'll go get it immediately because I have an application constantly watching them. I've used technology to figure out like, Where do I buy, like tires, the absolute cheapest? Can I import them into Canada? So they're like $15 less a tire? And there's like all these things. I'm like, yeah, it's like, it's not really a developer thing. But I've put so much of my like problem solving developer brain into it, that I could think I could make much more money than someone who's just like, buying it and walking over to the bike store and buying the things that you need. - -79 -00:28:24,240 --> 00:29:28,530 -Unknown: Yeah, I think a lot of that stuff is really fun for developers because it's we just like problems and challenges and like little tricky things. And yeah, sometimes you don't want to get into things because like the the initial hurdles seems like a tie. But once you sort of break down that barrier, and you get into the world of arbitrage, and you know, whatever worlds you're gonna get into it's, it's fun. It kind of reminds me of sky interviewed Mike Carson A long time ago. He's one of my most popular interviews. I think our headline was something like Mike Carson makes a million dollars a year and he's the only employee. So I think people liked it. Yeah. But he was doing something similar where he wanted to buy a domain name. And he was like waiting for it to expire. I think he wrote a script to try to buy it. And the script last, let me just got obsessed. He's like, somebody else beat me, I kind of made my script better. And just kept making it better and better over time to the point where you could like get these.io domain names pretty quickly when they're going to expire. And so you turn that into a service, we're like, Okay, if you want to buy an IC o that's going to expire. But like, you don't have the chops to build some sort of programming script, you can go to this website and Hill's like, basically get it for you. And you just pay him and so he's making a ton of money doing that. But like for him, it was just a game like a side project of like trying to figure out how to buy these domain names as quickly as possible. - -80 -00:29:28,860 --> 00:30:06,930 -Scott Tolinski: I remember that interview because like it really showed specifically how if you feel like the market for something is too crowded, there's like almost always like another angle, typically like the domain registry thing. And He found you know, that IO domains were becoming really popular. I know, Wes and I both probably remember very distinctly when that was happening because I like many other people were trying to snatch up a bunch of IO domains. And so it takes an eye to be able to see this trend that's happening and be able to apply it in a new way. And now all of a sudden you are the person in that market that you previously might have assumed was just way too oversaturated. - -81 -00:30:07,260 --> 00:30:46,890 -Unknown: You know, what's funny is I always have this feeling like I'm too late, you know, it's the market saturated, it's already it's already jumped the shark. But like, the reality is probably all of us, like we're in tech or listen to podcast or developers, like we're on the forefront of most things. Things that we think are trends that have already passed are like just getting started and 99.9% of people don't know about them. So it's, it's rarely too late. And usually industries that like take off and have lots of competition, and lots of activity are the best places to go. Like, that's where the most money is. That's where the most value and desire is as evidenced by the fact that it's the biggest market where money is changing hands. You know, it's it's never too late to build a restaurant, it's always gonna be something that people want. Mm hmm. - -82 -00:30:47,670 --> 00:30:54,110 -Wes Bos: That's good point. Back to the open source thing. Evan, you who's the creator view? How does he make money? Is that a Patreon? - -83 -00:30:54,360 --> 00:31:15,810 -Unknown: Yeah, so is a Patreon set up. I think there's a few other ways he makes money, too, that we didn't get into as much in my podcast. But he makes a ton of money from his Patreon and just enjoys building view. I want to look up his Patreon right now to figure out how much he's at. At this point, I think he was at 16. k when I interviewed him, he said almost $18,000 a month now. Wow. 226 donators. That's amazing. - -84 -00:31:16,050 --> 00:31:27,090 -Wes Bos: Yeah, I love seeing when that works is almost always you look up a Patreon. And it's like, $3 a month. And like, every now and then you see a really good Patreon, someone's just killing it. - -85 -00:31:28,110 --> 00:31:55,320 -Unknown: Well, the thing is, it's like, people expect Patreon to do everything for them. But Patreon is a platform for releasing, you know, your rewards. And for accepting the payments, you really have to do all the marketing and building your audience yourself. And for me, that's kind of the fun part. Like that's the puzzle part of building a business. How do you get people interested in something, but for a lot of people, especially creatives, they just want to create something. And the marketing and advertising part of it is not that fun? So you see, a lot of a lot of Patreon sets aren't successful. - -86 -00:31:55,350 --> 00:32:18,960 -Wes Bos: What do you say to people that don't like marketing, I think developers are almost allergic to marketing, because they think it's deceptive. And they think it's just that you have to trick people. And they do like if you build it, they will come and there's all these developers who are extremely smart, are so good at explaining things and they want to be able to they want to build something, but they're just missing that entire aspect of running a business. - -87 -00:32:19,380 --> 00:33:48,690 -Unknown: Yeah, I think it just depends on the way that you look at things, you know, everything is marketing, the way there's, there is no way to talk to somebody without, you know, in some way trying to be persuasive or convincing. And that doesn't mean like you have to go way off the spectrum under the point of misleading people, you know, there's some scummy marketing out there, for sure. And it's unfortunate to me that that gets presented is like the epitome of what marketing is the essential nature of a marketing is it's really not I think a lot of developers are close minded about that. And if you take a little bit of time to read like a marketing book or something, you might understand what's good about it. But in my opinion, it's really fun. It's something that you definitely need. Like there are a few businesses where someone just built something and people showed up. In fact, you can probably find hundreds of stories like that, because those seem to be the most inspirational and interactive stories like I didn't have to do any marketing, like that's what I want to do. But like I was saying earlier, like you can't fall prey to laminator blindness, like you never know how many people are starting businesses that never tried to market and fail. So it's, I would say not the best path to go down. It's really worthwhile to think about the reasons why people use something, the reasons why we all do things, right. If you think about the millions of books, you could be reading video games, you could be playing apps that you could be building people you could be talking to, it's really a miracle at any given time that anyone is using the thing that you've built, right, there's so many options for them to do something. And so to make that miracle happen, you generally need to focus on things like sales, or marketing or distribution, and try to understand like the human psychology of why people go throughout their day, picking individual things to spend time on. - -88 -00:33:49,050 --> 00:34:14,690 -Wes Bos: That's great, any hackers, it's generally one person or a very small company. And as developers, we love to automate and whatnot. What are some of the important pieces of being a single founder of a business where it might still be your your side, hustle, like you can't afford to hire people out you can't afford to pay a bunch of people to do stuff is automation delegation? Are those things important? Both - -89 -00:34:14,690 --> 00:35:49,260 -Unknown: of those things are crucial. I'm terrible at both. I wait way too long to do both of those things. And then it's painful. There's so many things that any hackers that they want to automate. And I've been saying for two years, and I'm gonna automate and stop doing this little two years, like two minute tasks every week. And then I just never do. But both are incredibly powerful. My bias nowadays is to delegate first, it's pretty surprising how talented human beings can be, hire somebody, they can, you know, accomplish all sorts of things using their width and their intellect that it's really time consuming to get code to account for because there's so many edge cases. So I like delegation a lot. Automation is important. One thing I think that's discussed, not nearly enough, is attacking the problem from a different angle and just sort of reducing the scope of what you're working on. So very often people will be working on a side hustle They'll be working on something on the side of a normal job, and they'll just never finish it. I'll never get to the point where it's actually released and ready because, quite frankly, like what they've bitten off a super ambitious and you think, Okay, what can I automate my way out of this? I can work more hours nights and weekends, can I yeah, you know, hire somebody to help. Like, oh, you can also shrink, what you're working on, like any hackers is, is a huge community nowadays with a podcast and a forum and a newsletter, and all these social media accounts. But like, from day one, it was just like 10 interviews. And like, anybody can do 10 interviews, and like you can use, you can bite off like one small chunk of success, like you could take the first step out of the staircase. And that will give you the height that you need to reach a second step. So I think if you find yourself pressed for time, like consider what's the simplest version of what you're building that provide some value to somebody somewhere, and start with that, and get some attention for that, and then use that sort of momentum to move on to the next thing? - -90 -00:35:49,590 --> 00:36:28,800 -Scott Tolinski: Yeah, I found that especially while being a entrepreneur, and one of the low key really like applicable things that we get as developers is that we're typically always trying to, we're trying to solve different problems all the time. And in that regard, we can kind of be jumping around on things, I personally have a problem where I want to jump around on the next thing, the next thing, next thing, but being an entrepreneur gives you that opportunity to jump to the next thing, but have it all be related, because at different stages in your business, how do you take that first step, the problems are very different than that second step, that third step, that fourth step, and you're constantly having to solve different new exciting problems. - -91 -00:36:29,070 --> 00:37:03,630 -Unknown: Yeah, that's always more fun of your business succeeds, because then you have like more of an excuse to jump to the next thing, right, like a stable base to jump on. And so I think it's, it's really important to have some discipline for that first phase, you know, build something that's actually going to work that people will like, and trust that, even if it's not like your most favorite thing in the world, a little bit of success gives you a lot of leeway to jump into something better. You know, when I started any acquisition, not want to be an interviewer forever, I want to read a lot of code. I love writing code, like that wasn't a component of my business, I wasn't going to enjoy it. But it took a couple months to get there before I really had the audience and the traction to feel like that was a good use of my time. - -92 -00:37:04,110 --> 00:37:19,560 -Scott Tolinski: Yeah, we always talk about little wins small victories just being so important for motivation in general in terms of development, but at the same time, oh, yeah, really anything. And anything, get that that little win, or that little progress, that just, it just fuels the fire that much more. - -93 -00:37:19,800 --> 00:37:45,960 -Unknown: And that's the hard thing about being on your own. Now, if you have a job, you're gonna get that regularly, you have assignments that have due dates, you have probably a boss, or managers gonna tell you whether or not you're doing a good job, you have colleagues, you get that feedback loop, but on your own, you're just sort of spending freely, you might build stuff, and no one says anything about it. You don't know if you're doing a good job or not. There's no scorecard. There's no promotions. And so it's, I think, important for you to figure out a way to build in little little moments of success. Yeah, - -94 -00:37:45,980 --> 00:38:05,150 -Scott Tolinski: yeah, absolutely. And one ways that you can track those successes when they do happen, is by having really excellent bookkeeping software and invoice so you can get all those good invoices in. That's one of our sponsors. This week, is a longtime sponsor, we're here at syntax. So with a little bit more about Freshbooks is West boss, - -95 -00:38:05,250 --> 00:39:17,850 -Wes Bos: Mike McDermott, who is the co founder and CEO of fresh book, he built it in 2003, after he accidentally saved over an invoice. Mike spent 3.5 years growing fresh books from his parents basement, that's probably as good as any example as a sort of a side hustle or an idea of that, like, I have this problem. I'm so frustrated that I goofed up the invoice I want to build a SAS, like Freshbooks is the perfect example of a SAS where it's a software service, you pay monthly for it. And it is a software that they run on their computers. So perfect example there. I really like fresh books myself to organize all of my invoices, all of my expenses, automate all of the late payment reminders just to sort of see where I'm at. If you are a small business, check it out@freshbooks.com forward slash syntax, and you're going to get a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring. So I'm curious about like, obviously, there's people that are doing well, in their business, have you have you had people on the show who have actually sold their business? And if so, I'm curious, like, what does the process of actually selling a side hustler or some sort of business that's gain traction? What does that look like? How do people do that? I've always wondered that. - -96 -00:39:18,150 --> 00:40:52,770 -Unknown: Oh, yeah, I've had plenty of people. I sold my business. I talked to AJ coil, who created a business. I interviewed him for his current business g mass, but he'd sold a business before I talked to Natalie meagle of wild bit software, and make a bunch of different products. And she actually spun one of our products out and sold that. I talked to rob walling the creator of drip, oh, yeah, marketing automation software, he sold it to lots of people, so their businesses and what's interesting to me is it's always different. Like there's no two stories where they follow the exact same process. And like a lot of people emailing me who asked me for advice when they're going through this process, and yeah, my situation and story are almost never helpful to what they're working on and I feel bad about it, but it's just so it's kind of like the Wild West. You Yeah, I can tell you my story, and then maybe contrast it with somebody else's. So with nd hackers, it was completely random. I didn't have any ambition to sell the site, I just wanted to, I want any hackers to be my own indie hack. Really, I wanted to make money and survive that way. And I was and then out of nowhere, I got an email from Patrick Collison, the CEO of stripe, and it was called acquire Andy hackers like that. Here it is. Tuesday, March 7 2017. Hey, Colin, I've been admiring what you're doing with indie hackers, would you ever be open to stripe acquiring it? We get in funding and continuing to work on it largely as you are without you needing to worry about revenue models. But you direct the project amplified distribution and potentially do some neat things down the road straight from a service plan globally and build more relationships, entrepreneurs around the world. Just a thought. Happy to discuss more with you, if you like. I think he was thinking that I would say no, because it was called MD. When I read this. I was like, holy crap. But yes, - -97 -00:40:52,980 --> 00:40:55,670 -yeah. So that's getting that email. Yeah, - -98 -00:40:55,730 --> 00:41:46,020 -yeah, that came out of nowhere. And that deal took like, maybe a week first agree on terms four or five days. And then that's quite another couple weeks of me talking to their lawyer realizing that I should probably hire a lawyer, talking to my lawyer, talk to their lawyer and talk to Patrick and talk back to the lawyer like it's crazy game of telephone. I've talked to people who've had acquisitions that last for a year, and then and talks and then talks fall apart. AJ, who I mentioned earlier, he actively was trying to sell this company for like eight years. And he would go to private equity firms, he would listen for sale on different websites. And he had all sorts of issues of people saying they wanted to buy his website. But then when it came time to buy it, they didn't have the money. And he couldn't put it together until the deal fell apart. I talked to my friend David Spinks at CMS, his company just got bought by another company called Betty. And that went over super well super smoothly for both of them. So there's all sorts of different ways to do it. And it's good when it works out very bad when it doesn't. - -99 -00:41:46,230 --> 00:42:01,530 -Wes Bos: Oh, yeah. And is it mostly just, I guess he said, It is all over the place. But it's sometimes companies just out of the blue are like, hey, maybe this would be good for as part of our company. And then other times, it's, it's people actively trying to shop their business around to potential buyers. Yep, - -100 -00:42:01,530 --> 00:42:38,480 -Unknown: I think you're in a better situation, if people want to buy you. Yeah, you want to be in sort of a strategic acquisition, you want like something about your business to be a multiplier on the business of the person who's buying you, because a lot more money. If you're sort of trying to shop your company around, that doesn't mean that you can't sell for a lot like that happens. But generally speaking, if you're in that kind of mood, your business has probably gotten to the point where it's not that exciting to you anymore. It's not growing very fast. And that's like, not the best point to sell. Usually from businesses killing it, you're not thinking about shopping around and selling it. And so if you were that would be great. But if you're not, then like it's probably not gonna be the best time. - -101 -00:42:38,820 --> 00:42:49,290 -Wes Bos: Cool. Um, I we're gonna go into some listener questions that we have here. We tweeted out at syntax FM on Twitter, do you mind if we just sort of ask you a couple rapid fire questions here? - -102 -00:42:49,460 --> 00:42:50,070 -Unknown: Go for it. - -103 -00:42:50,310 --> 00:42:57,090 -Wes Bos: So first one is how do you stop the side hustle from affecting your main job in regards to overtime, sleep and commitment, - -104 -00:42:57,210 --> 00:45:07,380 -Unknown: I've seen some cool hacks for this, Mike Param, the creator of sidekick like a background job processor for Ruby. He was I think it's the engineering manager at his company. And he was like, our company should use my side project site. So and it was open source, and so you can sort of justify working on it while he was at his full time job. And I think he just spent progressively more and more of his time at his full time job working on sidekick. That worked really well for him. I've heard a couple stories like that. I know a lot of people who've been able to take time off work by asking their boss, Hey, can I work a four day a week, I can get all work done in four days. And I can take a fifth day just myself. And like, I've seen people prove that to their boss, they could do that effectively, and get some time off. I think these creative solutions are really cool. consulting and contracting and freelancing. Like, I think that's a very common stepping stone to starting a business. Because ultimately, if you work for an employer, like you're not always going to be able to do it like Pam did, you're not always gonna be able to do what I was saying you need like a four or three day workweek. But if you're your own boss, because you're a freelancer, then you're kind of able to set your own hours. And you don't necessarily have to work a full week. And so that's a good way to put yourself in a position where you have more time to work on your projects. But let's say you are absolutely trapped in your full time job is no way out of it, you've got a social life outside of that family, kids maybe, and you can't get time off. Like my recommendation is to do what I said earlier, and just try to shrink the scope of what you're working on. If you find that it's taking you forever to release what you're building, and it's really competing for your time, like, built something way simpler. Jason Cohen has this whole concept of an SLC. He calls it like a simple, lovable, complete product, as opposed to an MVP, which is like maybe this grand vision you have of something but you've just built you know bits and pieces of it and never really seems to come together and takes forever. Build an SLC build instead of a car that's missing a steering wheel and missing a seat. You know, build a skateboard build something super simple. It's not crazy valuable to a lot of people but it is valuable to some subset of people and then go from there. So if I was in that situation, I would probably only focus on projects that I could build like a weekend, start to finish, you know, project is complete, see where that goes. If it doesn't go anywhere. I've been to the next one. I would not engage in like some deathmatch project that's gonna take me nine months to finish. Because even though it might work out, it's more likely than not like, I'll get burned out before I finish. - -105 -00:45:07,740 --> 00:45:24,360 -Wes Bos: Yeah. Awesome. The other one I had here was from Aaron white. And this is actually kind of Scott versus me here is this, should you frame yourself as a one man band or as a company? And I don't even know if there's an answer to this. But what are your thoughts about that? - -106 -00:45:24,420 --> 00:47:15,660 -Unknown: There's trade offs? I don't answer most of these questions, it's just depends on what you want. You know, if you are a one man band, that I think it allows your audience or your listeners and readers to build more of a personal connection with you. It's an audience that you can take with you to pretty much anything that you want to do. So as if you decided tomorrow that you're going to become a science fiction author, you know, like, it probably be easier for you to like, have your manliness and say, Hey, read this book, check it out. Whereas if I did that, with indie hackers, it would be like completely out of left field people be like, why is the hackers proper? Right? Yes, book. There are downsides as well, right? If you put something under your own name, it's harder to sort of build out a team, it's harder to sell, actually, on the nature of like selling your business. I've met several people who have got, you know, their own personally branded business. And it's difficult to leave that because it's built around them. And no one wants to buy it without you. So you can never really get away from it. And a lot of ways like it might be hired harder to hire people, if the business they're working for is your name, because it's less of a team effort. You might seem like a smaller operation. I mean, it's just countless things. I could probably list of 100 pluses and minuses, I'm just trying to name more the exotic ones that people might not think of right now. But there's no one right way to do it. Just do whichever, whichever you prefer, you know, if you want to be Tim Ferriss, and you really like, like, I tell people to think about how they want their business to improve their lives. For the longest time, the only thing that anybody in sort of planted was trying to build something to change the entire world for the better, which I think is like, you know, fine, like, that's cool. Like people should do that. But like people should also try to change their lives for the better, you should think about how your business could affect your life. And if you're the kind of person who really wants creative freedom to work on whatever you want, like build a business, I'll let you do that. If you're the kind of person who really wants, you know, fame and recognition, because you're just as vain Wes Bos guy, it's got to name his business after himself to do whatever you want, like figure out what labs need to pull the trade offs you need to make, and that's what you should do. - -107 -00:47:15,810 --> 00:47:34,740 -Wes Bos: That's great. What else whoever This is not on Twitter, I just have a question. You always hear about these entrepreneurs living in Thailand making crazy money and that they're like totally anonymous it are those Is that true? Or is there any like white whales out there that you're trying to chase an interview down for for the podcast or for the website? - -108 -00:47:35,460 --> 00:48:33,420 -Unknown: Oh, God, I never even like I rarely asked people where they live. But yes, it is true. There are a lot of people who live in very cheap places that are making businesses from those places. And the amount of money they make is insane. based on where they live. I was in Cape Town two years ago. And I was kind of hanging out with the very first guy that I had on my podcast name is Jason and he's making like, I think 50 grand a month or something from his business. I didn't realize how cheap cape Tablas so I went and I was saying they're like everything there was maybe 15 20% as expensive as it is in SF. So I put two and two together. I'm just like, wow, Jason is killing it. For him to be living over here. Like that's like you'd be killing it in the States. But like where he is, it's like, that's he set for life. There's a lot of people in Bali, or a lot of people just Southeast Asia in general seems to be Yeah, the cheaper, more attractive places for their quote unquote digital nomads to go and work from. So yeah, I mean, we just had an ND hackers Singapore meetup last week. And there's tons of people there. A lot of them live all over Southeast Asia. - -109 -00:48:33,900 --> 00:49:06,420 -Scott Tolinski: Yeah, the contractor for level up Eric is a dev for me. I've known him for a long time. But he he's one of the digital nomad types. And he's living in meta gene and he's living in just somewhere different every couple of weeks. And it's like pretty amazing that he can he can do that and feel like you can find apartments you can see the world you can do all this cool stuff. And all he needs is his you know, backpack with a computer. And that's really it. It's it's like the first time in the history of the world where you've been able to do that kind of thing. And it's pretty incredible. - -110 -00:49:06,600 --> 00:49:16,650 -Unknown: Yeah, it's really inspiring. just sounds so simple and attractive. You know, I just discovered maybe I'm late to the game hear that there are portable monitors that you can buy, - -111 -00:49:16,770 --> 00:49:20,070 -just like a monitor is a new thing. I think it's very new. - -112 -00:49:20,730 --> 00:49:37,140 -Yeah, cuz I'm such a homebody. Like I'm sitting here with like, my huge screen in front of me and my MacBook, but I would love to like travel more and work from coffee shops. I'm just like, I want to give it my screen. But if I can bring a screen with me slip it in my bat my like, even my laptop bag or whatever. Yeah, pull it out and connect it. Oh, we're from anywhere. - -113 -00:49:37,350 --> 00:49:44,550 -Wes Bos: That's great. So before we get into sick pics, is there any thing either Scott or courtland anything you want to get in talk about? - -114 -00:49:44,700 --> 00:49:46,200 -Unknown: Now? Let's let's do the sick pics. - -115 -00:49:46,380 --> 00:49:55,710 -Wes Bos: All right, so the sick pics is pics that are sick. We have them every single week. Karlin, do you have anything? I know we kind of sprung it on you. Yeah, I - -116 -00:49:55,710 --> 00:50:02,250 -Unknown: don't I like looking around my house like what am I What am I eating right now? What am I using? I like that. post it notes, big fan of post it notes. - -117 -00:50:02,250 --> 00:50:02,940 -Oh, - -118 -00:50:02,940 --> 00:51:11,400 -that's a pic I like. So I don't know, like, the way that I use post it notes is I follow the sort of Ben Franklin, he had this whole self improvement plan where like, he wrote down 12 ways he wanted to improve himself. And then every month, he would try to like focus on nothing but like one of those particular issues, like draw Max's calendar for every day. And like, I don't know, I'm a sort of a self improvement junkie. I'm always like, how can I make my life better? What am I bad at? What am I good at. And I always have like, 15 different things at the same time that I'm trying to focus on. And I realized, like, last year, like this doesn't work, like you can't focus on 15 different things. And so I cut it down to like one per month. And I'm still doing Ben Franklin saying, and so I just like a post it note of that, like all over the place, my bad on my monitor on my laptop and my bag. So I'm reminded every day like focus on this one thing, and hopefully you'll get better at it. And it'll become second nature with some sort of a habit. And next month, I'll do something else. So super simple, big fan of post it notes where people should be using them. I guess a better pick will be like a book or something. My favorite book poor Charlie's Almanac, huge fan of that book changed the way that I think pretty significantly, maybe seven or eight years ago. So recommend people check it out whether you want to start a business or not. It's just I think a very wise way of looking at the world. - -119 -00:51:11,400 --> 00:51:18,150 -Scott Tolinski: Is that would that be your favorite self improvement book as a self improvement junkie? I know Wes and I are both on that. Yeah, I - -120 -00:51:18,150 --> 00:51:23,970 -Unknown: would say so. I mean, it's kind of a business book. But I would say it's also a self improvement book. So yeah, that's that's my top choice. - -121 -00:51:23,970 --> 00:52:42,300 -Scott Tolinski: Cool. My Sneak Peek today is probably gonna be pretty on brand for this episode in general. But I don't know if either of you guys are aware of this. I'm sure you are because Seth Godin is you know, he's sort of the man, his podcast akimbo if you guys listened to it before a fan or have it, yeah, so Kimbo is really great. Actually, it's funny because I first I first popped on a Kimbo and I was like, whoo, I love this podcast art. It's so minimalist and lovely. And so instantly the aesthetic for me was like already very nice and simple. But I found this podcast more than any other sort of, I don't know if you want you want to call it self improvement e business e whatever. I found it very clear, very focused and very clear. He basically picks a theme for an episode, whether it's Moore's law or something like that, and just goes through and then he answers questions about the previous episode. It's all it's all business improvement based a lot of lot of this stuff is stuff I need to hear kind of constantly so if you are interested in in getting a business going and in your in that sort of space entrepreneurial land besides indie hackers, because that's like a must check out a Kimbo as well. It's a really excellent podcast from Seth Godin. - -122 -00:52:42,480 --> 00:53:01,350 -Wes Bos: Sweet. I'm going to sic pick a elastic wallet. I don't even know the name of what wallet I have. So I'm not gonna sit pick a specific one. It's just a piece of elastic with a yellow X on it. And oh, Scott's got the same one kinda. This is like got like a very Colorado pattern on it. - -123 -00:53:01,380 --> 00:53:04,920 -Scott Tolinski: It did. It does. Yes. It's very, I picked it that way. - -124 -00:53:04,980 --> 00:53:34,170 -Wes Bos: Yes, absolutely. So I think probably a year ago, I asked on the podcast for wallet suggestions because I was sick of mine. And I finally found this sort of just like a sleeve, it's sewn at the bottom and you put all your cards in it, fold up your money stuffed in there, and I've been super happy with it. It's been about a year now of just like everyday use, and I'm super happy with it. So I'll try find a link to whatever when I have I don't know what the name is, but it's just a piece of elastic. Like, like, almost like you have finding your sweat pants. - -125 -00:53:34,380 --> 00:53:47,490 -Scott Tolinski: It's amazingly other I love that I'm like all about that. I just like look at my wallet now compared to where it was before. And I felt like I don't know if you watch Seinfeld ever, but I felt like I was George Costanza with a giant wallet. Even though it wasn't that big. - -126 -00:53:47,820 --> 00:54:13,500 -Wes Bos: Yeah, I put my wallet in my front pocket. So goof up my back. And I'm here it's so important that you don't goof up your back and but I can't stand like a huge wallet. It's just like such a big bulge. So big fan of this. I can't wait until you don't have to have any sort of wallet anymore. Like the one that I found is the best. It's not our when when waiting. - -127 -00:54:15,390 --> 00:54:15,990 -Scott Tolinski: I know - -128 -00:54:16,379 --> 00:54:23,400 -Wes Bos: all of my bank cards now do it. But you still have to carry them around because like one in every 10 spots doesn't have tap in Canada at least. - -129 -00:54:23,550 --> 00:54:34,410 -Scott Tolinski: Oh yeah, we have like a Whole Foods right by our house like a block away. And I like the whole foods the other day. And I was like I just got my phone ready to do the tap. And then I realized I had beer in my cart. And then they were like, - -130 -00:54:34,410 --> 00:54:35,400 -Unknown: oh man, - -131 -00:54:35,400 --> 00:54:40,740 -Scott Tolinski: do you care? Where's your ID? And I was like, Ah, this downside? I don't know my ID. - -132 -00:54:40,980 --> 00:54:46,380 -Wes Bos: Oh, they did they ID you all the time or just that you look young. I have no idea. Yeah, I - -133 -00:54:46,380 --> 00:54:49,620 -Scott Tolinski: had a child with me. My son. He was in the stroller. - -134 -00:54:53,310 --> 00:54:58,530 -Wes Bos: Yeah, honey. Oh, that's good. What about shameless plugs, anything you'd like to plug courtland - -135 -00:54:59,310 --> 00:55:19,530 -Unknown: obviously I got to play The hackers podcast is a podcast where I talk to founders like us. And I asked you to walk through your story. And just try to get a sense of you know, how you came up with your idea how you grew to what it is today, how others can be the same and the lessons that you've learned. And I've done this with 80 something people now. So every week, new episode, indie hackers.com, slash podcast, - -136 -00:55:19,710 --> 00:55:38,760 -Wes Bos: people still like, I get emails still all the time. Hey, Wes found you on indie hackers podcast, because I think it's such a good way to like, obviously, most developers, I'm sort of in that community. But there's like this whole other, I guess, community of just like business minded folks. And they I get emails all the time about that podcast still. - -137 -00:55:39,030 --> 00:55:40,320 -Unknown: Cool. Hopefully, they're nice. - -138 -00:55:40,680 --> 00:55:45,090 -Wes Bos: Yeah. Oh, yeah, for sure. Scott sick, sick plug, - -139 -00:55:45,450 --> 00:56:33,060 -Scott Tolinski: I would like to shamelessly plug my latest course, which is on animating react. And this, this has been very well received by anyone who's taken it thus far. And it's so so cool. What we're doing is all these practical interface animations using physics based animation. So not CSS transitions sort of stuff. But we're using actual physics based transitions with react spring. We cover animating with waypoints, we cover just we build a navigation, we build models, we build all sorts of really cool stuff. And by the end of it, you're going to feel very comfortable with react spring. So check it out at level up tutorials, comm sign up for the year and save 25% get access to animating react, and every other level up tutorials course like react hooks for everyone. - -140 -00:56:33,270 --> 00:57:04,350 -Wes Bos: I'm going to shamelessly plug my CSS Grid course if you want to learn all about how CSS Grid works, go to CSS grid.io. It's totally free. You can sign on up it was sponsored by Mozilla, which is pretty cool. That's why it's free. And I'm anxiously awaiting subgrid being released so I can add a couple extra videos onto the end when subgrid comes out. Okay. That's it for today. Thanks so much for tuning in. Thank you courtland for coming on. I'm sure people found that extremely helpful, and we'll catch you next week. - -141 -00:57:04,530 --> 00:57:06,420 -Unknown: Thanks, Wes. Thanks, Scott. Peace. - -142 -00:57:09,060 --> 00:57:18,840 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax145.srt b/transcripts/Syntax145.srt deleted file mode 100644 index d824fe477..000000000 --- a/transcripts/Syntax145.srt +++ /dev/null @@ -1,264 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally at ski. - -2 -00:00:25,980 --> 00:00:55,350 -Scott Tolinski: Oh, welcome to syntax and this Monday hasty treat. We're going to be giving you an Ask Me Anything we did this couple of weeks ago, where we took some of your personal and non technical questions. And we talked about them a little bit about our lives and stuff that we do outside of this podcast. So we're going to be bringing to you some of these questions here. And we're going to be answering these the best that we can I think some of these are pretty fun. So my name is Scott Flynn's game, a full stack developer from Denver, Colorado, and with me, as always, is Wes Bos. - -3 -00:00:55,440 --> 00:00:56,370 -Unknown: What's up everybody? - -4 -00:00:56,549 --> 00:00:57,479 -Scott Tolinski: What's up? Wes, - -5 -00:00:57,479 --> 00:01:31,110 -Wes Bos: not too much excited to answer some of these amas I think it's, it's fun. It's because when you go to a conference, these tend to be the questions that you get. It's people like once you start talking to someone for 10 minutes, you get past the normal, whatever, then people start to dig a little bit more personal. And I always find it really useful. That one thing I hate is when you listen to someone online, or you follow them on Instagram, and you're just like digging through, like what do they do for a job or like you're trying to figure out all this stuff? I'm like, why are they so intentionally obtuse about all these parts of their life? And I think it's kind of cool to be able to share these things. - -6 -00:01:31,260 --> 00:01:38,130 -Scott Tolinski: Yeah, absolutely. This episode today is sponsored by clubhouse. So can you tell us a little bit about clubhouse West? Yes. - -7 -00:01:38,130 --> 00:02:55,350 -Wes Bos: So if you want to make good software, you have to have probably a team of people. And in order to manage all of those people that are working on the software, you need some sort of project management software. And you probably have dealt with Project Management Software before and you probably absolutely hate it because project manager software is really frustrating, especially for developers who want to just get stuff done. And in the people who are managing the project, it's really frustrating for them, because it's hard to see where everything and then they have to have more meetings and stuff like that. So club house is our sponsor for this episode. And they are a fast, lightweight and powerful approach to project planning and product creation. It's really cool. Because anytime you can kind of take a look at your clubhouse dashboard, it's beautifully designed, you can see where you're at what's being worked on right now what needs to be worked on what issues are, are being raised and have to be worked on. And I think it's just a better way to work on software and to to work towards releases and quarterly goals and things like that. So if you want a better project management software, if you want to try it out on your project, go to clubhouse.io forward slash syntax, and you're going to get your first two months absolutely free. Thanks so much to clubhouse for sponsoring. - -8 -00:02:55,709 --> 00:04:36,770 -Scott Tolinski: Cool. So let's get into it. The first question here is what do your wives do? My wife, Courtney, she is a she's an educational psychologist, she has her PhD and in psychology. And she does a couple of things she will currently and this this can change a little bit as we go here. She teaches social skills to kids with learning disabilities. And she tests for different disability she works at a private school that is only kids with special needs. And it's very, very, very focused on on those kids. People come to this school from all parts of the state and or surrounding states because the school has a reputation of being very good at what it does. So she tests children for different learning disabilities and different things. And yeah, it's it's pretty amazing what she does. I couldn't do any of it, just some of the things that she does at work and has to deal with. It's just absolutely astounding to me. And I'm just like consistently impressed with the work that she does. She also ends up writing extremely long papers all the time. So each time she tests so she runs all these tests, she she, you know, has to basically submit a report and these reports can be like 20 to 30 to 40 pages long. And she writes all of those custom every time Wow. And I'm like holy cow. And because obviously you have to write a lot for your dissertation to get your PhD you got to write a lot in general in that program, but the amount of stuff that she writes in general and has to analyze the data and do all this stuff. I'm just like, holy cow. That is seriously Yeah, seriously, it's the crazy stuff. - -9 -00:04:37,050 --> 00:06:08,460 -Wes Bos: My wife has a background in fashion check. She went to school for fashion design. She spent a couple years designing shoes for one of the big sports stores here in Canada, which is pretty cool job. And she now does just fashion blogging, fashion videos on YouTube, lots of stuff on Instagram, and just a lot of stuff around like sustainably sourced good quality stuff that you're going to have a long time. And I think it's really cool. She's sort of found this little niche of women who are not necessarily caring about the fast fashion of Zara and stuff like that, but care more about fabrics and how things lay on you and, and whatnot. And she's created this huge list. She's been working on it for probably two, two and a half years now. And she's getting some really good traction on it right now, which is really cool. Because I think sometimes people think like, she's just shopping and posting on Instagram, what she bought shopping, and I think from the outside, it can look like that. But on the inside, it's really interesting people talking about talking to her about loving these clothes, and she's making pretty good money, the way that she makes money is through affiliates. So she'll, she'll go out and buy a bunch of dresses and talk about how they, how she likes them and what she's wearing and things like that. And then if people buy the dresses through her links, she'll take a pretty good cut of that. So she does great stuff. Kate Bos KITB Oh, s.com or she does a lot of on YouTube and Instagram as well. - -10 -00:06:08,579 --> 00:06:25,710 -Scott Tolinski: Yeah, it's funny because Courtney loves content in time, some of those new lines head or whatever, Courtney's all over that. And it's fun, because, you know, I don't know her content is is really just well produced. I mean, it's really well made. And I'm always just super impressed with it. - -11 -00:06:25,829 --> 00:06:37,770 -Wes Bos: Yeah, if if you have, I know that it's not all men listening to this podcast. But if you do have a wife who is interested in fashion and good quality clothes, definitely tell them about that. - -12 -00:06:37,949 --> 00:08:23,070 -Scott Tolinski: Yes. So okay, let's get into this next one here, which is that a lot of people ask this question. It's really funny, we got this one over and over again. So I'll read a couple of them that we got if you both had to give up making courses and get a nine to five job like most folks describe what your perfect job would be ours company tech, location, vibe, etc. This question was also asked in some different ways, if you could pick a different career outside of web development. So the first one is a little bit more in web development. And then if you weren't developers, what would you be doing to build a tasty Empire? So first, we can answer the one is if you had to give up making courses and aka, you're just stole a developer, what would you do? So for me, my perfect job and fit and whatever, you know what I really loved working at an agency to be honest, because the metrics that came in the doors were different, you almost working on something different almost every other month or so you could largely determine your own tech stack, the agency that I worked, at first only had like 12 or so employees, and only two devs. So if something came in the door, we would almost like not like fight over it. But we'd be like, Oh, I want to take this one. Or the other person would say I want to take this one. And it was really cool. Because the client didn't necessarily care what the tech stack was, or what the front end stack was, you could use sass or less or stylist or whatever you wanted. And the client doesn't care as long as the workbooks fine. And it gave me a lot of freedom to learn a lot of new things and try a lot of new things. And I really enjoyed it. So you know it I like the small agency, I liked showing up to work at this little company. And the work that I did had a direct impact on the growth of the company and the sustained income of the company itself. So I guess that's what it would look like for me, maybe not the money pit, but vibe and feel and everything work. It was really nice. - -13 -00:08:23,189 --> 00:09:50,220 -Wes Bos: I probably would either go to agency because of all the reasons you just said I like being able to start new projects every so often, I could definitely do without the chaos that is crazy to deadlines and being overworked as most agencies are. Or I would go towards like a some sort of company that uses technology to change the industry or change the bottom line. So obviously, that's most companies out there. But something like an online booking website or something like Airbnb or somewhere where you're like, this has been so hard forever. How can we then use technology to make this a lot easier? So that's what it would be if it was tech. If I wasn't in web development in general, I probably would. I was thinking about these like, what's called like unsexy industries where there's somebody making like, near my house, there's this like broom factory, there's this huge company and all they do is make brooms and brushes and bristles and things like that. And I'm like, that is such a crazy little industry and like I wonder what that is like, right? And sometimes I go to trade shows and there's some guy selling this like roller in the roller you roll it on your lake bed, and it gets rid of all the weeds in your lake and I'm just like that's a kind of a cool little industry to get into. So I probably would find some sort of little random industry, learn all that you know about it and then also see how can I use technology to forward this this business? - -14 -00:09:50,369 --> 00:11:48,510 -Scott Tolinski: Yeah, you're a lot more hands on than I am, I think. Yeah, because I will probably still do something on the computer. Like I think I would probably do motion graphics Which is what I wanted to do before I wanted to be a web developer. I'm really into animation and I got really far into motion graphics. And for a long time, that was going to be my career. So if I had to pick one, I would probably pick motion graphics or 3d graphics. I was never super into 3d, but 3d has gotten a lot better than it was when I was learning it. So you know, 3d motion graphics commercials or whatever like that, you know what, I would love to design, the sort of visual motion graphics that they're doing and in sports now, I think some of that stuff is fascinating. I don't know if you've ever watched UFC or anything but and UFC in the pay per views. Now they do this. It's like this huge tail of the tape, whatever. 3d thing with photos that's like, it looks like it's physically hanging above the ring. But it's all fake. Right? You know, the people in the audience can't see this. But this looks like a giant jumbotron thing. And then they pan the camera down and it still stays in place. And like the tracking and the 3d motion stuff without that is like so fascinating to me. Every time I see stuff like that. I'm like, Man, I wish I was doing that. So I'll do that. Or I guess this is a part two. This is this is always my answer for what would I do if I could like retire right now. I would make video games. There's a lot of video games I have in my brain that I would love to make. Some of which would have an audience some of which have like no audience at all. Like one of my video game ideas is basically a sequel to cruise in the USA. Like, who wants a crappy racing cruise in the USA I do. I love cruise in the USA and I would love to play more levels on cruise in the USA because I've exhausted all of the ones from cruise in the USA cruise in the world and Curzon Exotica, I've exhausted them. So I would love some original levels and I would create those myself. I would I would create that video game just for myself and if anybody else wanted to play it cool, that's fun. - -15 -00:11:48,719 --> 00:12:03,390 -Wes Bos: All right, next question we have from Paul is we're gonna do these rapid fire name your favorite color number movie smell fictional character commercial brand emoji item on your desk and animal so ready to go favorite color? - -16 -00:12:03,540 --> 00:12:05,010 -Scott Tolinski: Purple should be no surprise. - -17 -00:12:05,370 --> 00:12:16,230 -Wes Bos: Mine is MFC 600 it's that yellow that it uses an absolutely everything. My favorite color is actually blue, but I use that yellow. absolutely everywhere that I have a shortcut just for the hex code. - -18 -00:12:16,469 --> 00:12:34,200 -Scott Tolinski: Nice. Nice. My brain is purple. I love purple. I don't like a lot of colors. I like like yellow colors are good. Yeah, Steelers are great. Like black. I like a lot of colors. Alright, lucky number 258 for no reason in particular movie. - -19 -00:12:35,880 --> 00:12:45,390 -Wes Bos: I would took a second to get all these I was laughing I was like I don't watch movies at all. Either Virgin Suicides or Christmas vacation are probably my two favorites. - -20 -00:12:45,600 --> 00:13:07,530 -Scott Tolinski: Cool. My favorite comedy is how high featuring red man and Method Man, which is great movie. I've seen it like 10,000 times or five deadly venoms which is a kung fu movie from the 1980 early 1980s sharp brothers film I love short films. I love kung fu films five deadly venoms is definitely sort of the peak for me. It's one of the very best - -21 -00:13:09,120 --> 00:13:10,080 -Wes Bos: favorite smell, - -22 -00:13:10,440 --> 00:13:21,210 -Scott Tolinski: smell. I like Christmas smells but I'm not like a huge Christmas person. I'm not like I'm not a Christmas person. But I like the cinnamons and that sort of stuff makes you feel like a cabin or something. Minus campfire I - -23 -00:13:21,210 --> 00:13:35,370 -Wes Bos: actually found some incense that smells like campfire and it's amazing because it's something about campfire that makes me feel relaxed and I also have a smoker in my backyard and that kind of gives a similar feeling when you put a bunch of wood in it so now by far my favorite smell - -24 -00:13:35,610 --> 00:13:36,780 -Scott Tolinski: fictional character - -25 -00:13:37,110 --> 00:13:40,380 -Wes Bos: Adam from workaholics, which is I love that. Yeah, - -26 -00:13:40,440 --> 00:14:08,790 -Scott Tolinski: there's like a GIF of him doing a dab It's like my favorite thing in the entire I love workaholics great. My favorite fictional character is Sam Tate from from several kung fu films, but in particular 36 Chamber of Shaolin he's very inspiring character because he is like basically going through all of this stuff and in growing himself physically until he can accomplish his goals. It's very, very inspiring to me. Next is commercial brand. - -27 -00:14:09,209 --> 00:14:39,330 -Wes Bos: I say right now it's Yeti just because they have a Yeti mix of high quality product, many would say overpriced, high quality product mix with like, just a vibe, everything they put out has a specific vibe and I think that's really cool that they're able to do that. And there's somebody listening to this podcast, I forget who it was apologies off the cuff, but they sent me a whole bunch of Yeti stickers because they work on it as well. Never so I got a cute Stacie any stickers. I'm super excited about it. - -28 -00:14:39,510 --> 00:15:24,540 -Scott Tolinski: Nice. My favorite is scotch and soda. We have a scotch and soda at the mall here in Denver. I love scotch and soda. It's a clothing brand. For those who don't know, it's expensive, but it's all very high quality and all the stuff is unique. You can go into scotch and soda and find like, you know 50% of the things are like too ridiculous or not your vibe and I can still find 50% Some of the things that I'm like, ah, I wish I had more money because I would just buy a lot at the store. I wore this shirt to this wedding last month and as a scotch and soda shirt and they had this built in pocket square into it and everybody at the wedding everyone's like, wow, I love your pocket square was like built into the shirt. there and then like you didn't have to I didn't have to pick it out and it just made me look more stylish. And I was I'm a big fan. What's your favorite emoji? - -29 -00:15:25,049 --> 00:15:27,600 -Wes Bos: Either the okay hand or a fire? - -30 -00:15:27,989 --> 00:15:46,890 -Scott Tolinski: Oh, my favorite is the well with with slack incorrectly calls the call me hand. No, it's not the call me hand it's hanging 10 it's again hang Manning. Yes. If you tried to. There's no hang 10 if you do you do call me it's like a little hand that looks like you're on me. Yeah, call. - -31 -00:15:47,189 --> 00:15:49,290 -Wes Bos: Like, yeah, it's hang 10 is like, What's up, bro? - -32 -00:15:49,319 --> 00:15:53,880 -Scott Tolinski: Yeah, I use that all the time. Somebody says great work. I say hang 10 brother. That's what I got. - -33 -00:15:55,110 --> 00:15:56,520 -Wes Bos: What about item on your desk? - -34 -00:15:56,880 --> 00:16:58,860 -Scott Tolinski: I have this little tiger eraser. I'm not I think I got it in Tokyo when I was there. And it's a little head moves. It's it's like several different parts. It's tiny. It's like an inch big. And it's this this little cute little tiger eraser. I've had it for a long time. And actually, I take that back my favorite thing on my desk because that this wasn't visible at the time I picked this. I have this note that my wife wrote to me when we hadn't been dating very long. But she like just slipped it on my computer. And I it was on the back of a fortune cookie. And I've had it for I mean, ever since. And it says, excuse me, it's in German and says dubis they're tall. And I think that means you are crazy or you are mad. I think he's not mad. But it's like a an endearing kind of thing. And as a little smiley face. She wrote that on the back of a Panda Express. Fortune Cookie. I have it right here. And the fortune cookie says Ed Meyer is too shy to greet you. So I love this thing. I keep it with my speaker. I kept it in my computer for a long time. And I'm just impressed that I still have it to be honest. - -35 -00:16:59,160 --> 00:17:15,180 -Wes Bos: Wow, that that is adorable. And mine is a piece of tack. Mine's the Cal digit. Doc that makes everything my MacBook Pro is single cable, all my monitors USB, charging everything single cable. We've talked about it many times on this podcast. - -36 -00:17:15,300 --> 00:17:20,700 -Scott Tolinski: I love my my cape or my caldigit as well. What's your favorite animal minds a penguin? - -37 -00:17:20,700 --> 00:17:22,550 -Wes Bos: Dog hate cats. - -38 -00:17:22,920 --> 00:17:25,340 -Scott Tolinski: I love dogs too. I love I love dogs. - -39 -00:17:25,580 --> 00:17:29,730 -Wes Bos: And they're good. Why do you like penguins because of the hockey Teamer? No, I - -40 -00:17:29,730 --> 00:18:08,040 -Scott Tolinski: like that. Well, to be honest, I think I like the animal first. I had, like, you know, Penguin Books when I was a kid. And that might have been one of the reasons besides Mario and me that I'm such a huge fan of the hockey team growing up. But the animal is just so funny to me. I love like funny, ridiculous things. If I'm picking a character on a video game, I'm picking the most absurd ridiculous character because it's, it's ridiculous. I'm picking the obnoxious ones and I kind of feel like penguins are are both adorable looking and kind of obnoxious. They're kind of ridiculous looking. You know, the way they waddle around the colors. The white, black yellow is all great. I would rock those colors any any time of the day. I just love penguin man. They're just they're just cute. They're super cute. - -41 -00:18:08,220 --> 00:18:24,420 -Wes Bos: Next question we have here is hi Wes. Can you tell us about people who inspire you what you noticed and what may be reflected on your personality from them? So I was joking with Scott earlier I was like what Scott's gonna say like Jackie Chan at this point. Like Jackie Chan. - -42 -00:18:25,340 --> 00:19:16,680 -Scott Tolinski: Yeah, Jackie Chan for for so many reasons. Jackie Chan has this amazing documentary about his fight team, and his choreography team, and all of the different like tips and tricks and stuff that they do. And besides just being a physical superhero, the the kind of stuff that he's done throughout his entire career before in the 80s and the golden harvest up into like his American stuff. He is just brilliant. His knowledge of film, the history of film, his knowledge of these film techniques, and how he treats his bike crew, how he treats people in his life, and just how amazing he is that like literally everything he does, he's so insanely inspiring. So Jackie Chan is one of these people that I look up to an insane amount. So you have a couple more here too. I have some other Do you want to go back and forth here? - -43 -00:19:16,860 --> 00:19:31,530 -Wes Bos: Oh, sure. Yeah, I don't really like look up to a whole lot of people that are sort of in the public scheme. Anytime someone dies everyone's all upset. And I'm like, Who? Who is that? I'm not very up on like, cuz I don't watch movies or anything I'm not really up on. - -44 -00:19:33,210 --> 00:19:39,540 -Scott Tolinski: That's the funniest thing when we're recording this and you're like, I don't know, I don't watch movies. At least watch some movies. - -45 -00:19:40,170 --> 00:19:58,920 -Wes Bos: I do watch some. There's a couple people I have here. Anthony Bourdain is one. He was the first person that when he died, I was actually like, that's ox like I really enjoyed watching all of his shows Anthony Bourdain was like a TV host of no reservations and parts on knowns and he had another show called The layover and - -46 -00:19:59,190 --> 00:19:59,970 -Unknown: they're all great. - -47 -00:20:00,320 --> 00:20:10,340 -Wes Bos: Yeah, just awesome overlook at like food but also culture and like What does food mean and specific cultures and interacting with people, I thought that was really neat all of his outlooks on that. - -48 -00:20:10,469 --> 00:21:20,670 -Scott Tolinski: Yeah, I have a sort of off the wall one where most people aren't going to know who this is. This is a guy, his name was his real name. This is not his real name, but his stage name is Steve dangle. Those of you are hockey fans might have heard this name. This guy's about probably about my age, or maybe a little bit younger. And he started a YouTube channel and a podcast. And now he's on Sportsnet. He's on actual TV, and what's like equivalent of the NFL red zone. And just by coming up through doing YouTube videos, and having his own thing, and the content really gripped me a few years ago, just because he's hilarious. He's a really funny guy. And you could tell just by watching one of his first videos that you know, he's a really dynamic personality. But I've been following his stuff for so long. And the point now is that he has worked his way up from being, you know, on YouTube, or just doing his own thing to being a legit correspondent is that what they're called on a television network. Not only that, but like one of the biggest ones in Canada. It's pretty darn inspiring and amazing. And just by doing something that he loved, so it just really can show you that you can take your passions so far and really make a career out of it. - -49 -00:21:21,050 --> 00:21:49,740 -Wes Bos: Next one I have here is Adam Savage. So he's probably most well known for being a mythbuster. But he does a lot more. He's got tested, calm. He has this really awesome podcast. He has a book coming out, he's working on like a kid's version of the mythbuster. And he just is such a positive guy who is constantly working hard, and constantly learning new things and sharing what he knows. And I just look at him as like a great way to sort of shape my career around someone like that. - -50 -00:21:50,189 --> 00:23:06,210 -Scott Tolinski: Cool. I have one last one that another one you might not know. But he's worth a look up. Ken Swift is one of the he's not like an original B boy. He's one of the like he was that when the rock steady crew blew up in the 1980s. He was a member of all of that. So he was in Flashdance and all other things. But they describe Ken swift as the quintessential B boy. And I can swift to me is one of these people who he took something like braking, which wasn't anything at the time and really developed it in a way that he wasn't necessarily the most gymnastic guy. But he is essentially always embodied the attitude of what it meant to be a B boy. And he's always kept that he's kept level that level of integrity into everything. And if you google him, just like watch some of his YouTube videos, those of you who are used to sing the acrobatic stuff of his or not of his of breakdancing might not even recognize this being the same sort of dance, but he is the quintessential B boy in the terms of style, foundation skill, and in, in all honesty, you know, I would watch every single thing that he ever put out, because he's just endlessly inspiring dancer and human being so really great person to check out. Their - -51 -00:23:06,449 --> 00:24:16,290 -Wes Bos: last one I have here is Mike Rowe. He's probably the most well known for the show dirty jobs where he will go on TV and like just get dirty, right. But he in these hilarious of things, he would often have very insightful things to say. He also has a podcast himself. And he does a lot of work with like trades and getting kids into trades. But one of the things that stuck with me, I just looked it up. This is from 11 years ago, where he talks about this thing called the reverse commute. And he says the reverse commute has always been a big part of my adult life, my aversion to stalled traffic in lines of any kind is profound. And I often forego any activity that requires me to go shoulder to shoulder with the masses. And I think that's just really cool. Like my whole life is built around like not doing exactly what everybody else does are the exact same thing. So whether that's taking the job that everyone else thinks you should do, or moving to the city where everyone is moving right now. And I'm always trying to think like, what can I do? That's the opposite of what people are doing right now. That will work out for me. And I thought that it's funny that it's 11 years old, and it's stuck with me for that long. Dang. Yeah, - -52 -00:24:16,319 --> 00:24:55,380 -Scott Tolinski: I didn't know but that but I mean, I don't intentionally do that stuff. But I often do that stuff out of like spite. Essentially, my, my wife Courtney's always, like, I know why you're doing this, because she knows that I'm just trying to do the opposite to either, like, not make people mad, but just to like, do the opposite. And it's so funny because like, I don't really think about it, but it's just like something that is innate, that I feel like I need to do, you know, I don't want to listen to the I don't if some movie is being popular right now. Like I don't want to watch that movie. I want to watch the other movie or something. I have a really hard hard time latching on to that stuff. That's like in the in the mainstream. - -53 -00:24:55,409 --> 00:25:14,820 -Wes Bos: I have that all the time where my wife wants something popular and there's something mean that the it's like the deep hipster gene in me? Yeah. Yeah, just the fact that it's popular makes me not want to make me not want to enjoy and that's silly and a lot of silly. Yeah, there's a reason why these things are popular - -54 -00:25:14,970 --> 00:25:38,640 -Scott Tolinski: early somethings. Yeah. Like I'll give them some things like I've, I've watched you know, every episode of Game of Thrones, and I'm very, you know, into that, but like, a lot of things I'll just build. I don't know, right. Yeah. And sometimes I'll watch it finally, because I'll be forced to. And I'll be like, okay, it was really awesome. I shouldn't have you know, held out but there's so many of them where I'm still holding out. - -55 -00:25:38,910 --> 00:26:16,140 -Wes Bos: Oh, yeah, it's probably the I remember, in high school, we had a bunch of video assignments. And I used all this like, really obscure local scene music in my video. And then they're like, popular kids in school, put some simple plan into their video. And they won the like, best video and I was so mad. I was like, they use simple plan. Yeah, that's like the, that's the most normie poser music you can possibly get in your video. And I still think about like how silly I was to think that because the fact that everyone loved it because they had this awesome music that was so big and popular. And that probably will never leave me. Yeah, - -56 -00:26:16,140 --> 00:26:17,130 -Scott Tolinski: I feel you on that one. - -57 -00:26:17,400 --> 00:26:18,030 -Unknown: All right. Last - -58 -00:26:18,030 --> 00:27:55,590 -Scott Tolinski: question here. What's your ratio of client work learning new tech, teaching new courses that talks syntax FM, you guys seem awfully busy. It makes me feel kind of lazy. So West tonight, we record syntax on Monday morning. So by Monday at noon, we are done with syntax. So Monday, every single week, or noon to me, I don't know what time it is for you. I'm sorry, I'm not in Canada. But Monday, before noon. For me. That's it. And then I don't think zones in Canada. I don't think about it until the next week. But for learning new tech, I like to learn on the job. So I'm developing a lot of stuff for level up tutorials myself in the code base all the time. So typically, I'll be learning while I'm coding the code base, I like to do that. But that said, I record a new tutorial series every month. So I usually spend maybe a one week recording each tutorial series. So that's one whole week of each month done recording a tutorial series, the rest of the days, I'll be working on the code and learning new tech. As far as talks go, I don't do a ton of talks, I've done a few. And those who usually end up being on the weekend. So usually fly out and do this stuff on the weekends, developing the talks, maybe a different story, client work, I don't have any client work right now I have taken on some client work during lows in my in my output and things like that. And I always sort of regret it. So I'm not doing any client work right now, just because I have too many other things to work on. But not there's not I take one week to record the series, the rest of the time I'm delving and learning new stuff, preparing the next month series. And that's it. - -59 -00:27:55,860 --> 00:28:47,520 -Wes Bos: For me, I don't do any client work anymore. So zero, learning new tech in generating content is probably all grouped into one for me. And I would say that's probably like, I don't know, 65% of my days, syntax takes half a day per week to record each two episodes. So it's not that significant, we have a pretty good process in place right now, teaching courses, it really depends on like, if I if I'm recording, then it's like all of my time. And if I'm not, then I'm generally helping people out on chat room or generating new new types of content. So but I would say overwhelming majority of my my time goes towards generating new content and researching new and learning new stuff. So if it makes you feel lazy, it's just because almost everything both of us do is in public, whereas most other people's stuff is not in public. So just we're just posting everything we do online, right? Because we - -60 -00:28:47,520 --> 00:28:55,080 -Scott Tolinski: can we don't have client obligations. We don't have word obligations, our work obligations are to learn and to teach. That's it. - -61 -00:28:55,110 --> 00:29:26,790 -Wes Bos: Yeah. So I think that's it for today's ama. Thanks so much to submitting these questions. We will probably do another one in I don't know, maybe six months or so. And we will maybe we'll try to get the link out beforehand. We I just tweeted this one out. And we got like 70 questions in which was great. So thanks to everyone who voted on those thanks to pigeonhole for giving us the interface for these questions. It's pretty cool, a little live interface for voting. We used it on our live podcast as well as anything else to say there, Scott. Nothing. - -62 -00:29:26,790 --> 00:29:27,360 -Scott Tolinski: Thank you. - -63 -00:29:27,360 --> 00:29:29,670 -Wes Bos: All right, talk to you next week. Peace, peace. - -64 -00:29:31,980 --> 00:29:33,930 -Scott Tolinski: Head on over to syntax.fm for - -65 -00:29:33,930 --> 00:29:36,330 -Unknown: a full archive of all of our shows. - -66 -00:29:36,539 --> 00:29:41,520 -And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax146.srt b/transcripts/Syntax146.srt deleted file mode 100644 index f001a4b22..000000000 --- a/transcripts/Syntax146.srt +++ /dev/null @@ -1,540 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,590 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,619 --> 00:00:41,009 -Wes Bos: Welcome to syntax the podcast with the tastiest web relevant treats out there. Today we are talking about CSS the cool part, Scott has added three sunglass emojis Happy holidays in front of me. We're just gonna kind of go through some of the like more neat parts of CSS that you might not necessarily know about. Or you might not necessarily know but like kind of these neat ways in which they can be used in CSS. So with me, as always, today is Mr. szalinski. How you doing? - -3 -00:00:41,159 --> 00:00:48,119 -Scott Tolinski: Hey, I'm doing good. ready to start talking about these cool, cool, cool parts here? This is some of my favorites. Devon CSS, to be honest. - -4 -00:00:48,270 --> 00:00:52,740 -Wes Bos: Yeah. And you just been going through a big redesign of your your level up tuts Right, - -5 -00:00:52,799 --> 00:01:30,060 -Scott Tolinski: yeah. Big, big redesign. And since my user base is usually people, and when I say Usually, I mean, like 99% of people with modern browsers. Yeah, me a ton of freedom to use new CSS stuff, which I have been doing to maybe the fullest extent, yeah, look at the Can I use and I get to use some of this cool stuff. And then I get to feel just so inspired by how far we've come with CSS. So I'm really excited about a lot of the stuff we're going to be talking about on this episode, some of which these things I'm using currently in a website, some of which I used before, and some of which I'm sure you've used before yourself. Yeah, - -6 -00:01:30,060 --> 00:01:54,600 -Wes Bos: I think everything we're talking about today has been around for probably, what would you say at least two or three years? Yeah. So I think that they're pretty safe to use even more than that you have in here. I don't know if we'll go through the the browser support for every single one, just because like you can look that up yourself if you're really curious. But I think if you're if you're running a modern if you dropped iE 11 I think almost all of the stuff or if not all of it will work in all the browsers. - -7 -00:01:54,840 --> 00:02:06,840 -Scott Tolinski: Yeah. Cool. So this episode is sponsored by Sanity, as well as a century, we got a couple of sponsors, we needed a third sponsor with a C name, we could have had a CSS but the sponsors, - -8 -00:02:07,140 --> 00:02:11,520 -Wes Bos: oh, that would have been good clubhouse is one of our sponsors, hey, that would have been a lot of fun. Yes, - -9 -00:02:11,520 --> 00:03:14,759 -Scott Tolinski: Sanity is a bring your own front end back end system that is really super cool. They have some really neat new features, which we're going to get into and century, which is a place to keep track of all of your errors and bugs and exceptions in your application. Cool. So let's get into it here. And the first thing we wanted to talk about is a clip path. Now you have it written in here as clip path with an external SVG clip mask. But I'm just going to say clip path in general is pretty dang sweet. So for those of you who don't know what clip path is, is basically a way to clip or mask, it would be a word that you're frequently seeing in design applications. If you mask something, you're you're sort of hiding the things that are not within this shape, right, let's say you have a circle, the things that are inside of the circle will be shown and things outside of it won't be shown. And so with clip path in CSS, you finally have the ability to do masking, all sorts of things, shapes, circles, polygons, ellipses, so many different things, - -10 -00:03:14,789 --> 00:03:16,080 -Wes Bos: parallelograms, - -11 -00:03:16,109 --> 00:03:26,100 -Scott Tolinski: parallelograms, or custom SVG paths, and you even have it listed in here and external SVG. And you want to talk a little bit about that, yeah, - -12 -00:03:26,100 --> 00:04:28,520 -Wes Bos: I use this clip pass all time. Because if you've got like, a div or something like that, and you want to like cut out a piece of it, like if you want to have like kind of a, the example that I give here is if you go to my advance react.com course, you will see that there's a wave on the top and the bottom of a lot of the sections in that that sort of wave feature I wanted on the top and the bottom of the white section, but I couldn't just use like a, like a PNG wave or SVG wave because also the background of that section has a background pattern that needs to go into the waves and there's no way you could possibly line up the background pattern with the top and the bottom of that thing because it just by chance the height of it will probably not line up to be just perfect. So the option there was to just make it a square div and then to use this wavy clip on the top of the bottom and that will sort of punch out the div and show whatever is behind it much like a mask would work in Photoshop illustrator sketch, whatever. - -13 -00:04:28,820 --> 00:04:46,290 -Scott Tolinski: Yeah, it's funny. This is the kind of technique I would have tried a lot with like background images and, and all sorts of stuff and try to get it to line or reader Yeah, with a Photoshop like slicing out a Photoshop way back in the day and it would probably wouldn't have those things I would have driven you mad trying to just kind of lay out - -14 -00:04:46,560 --> 00:05:39,510 -Wes Bos: it would just never line up because if you have a perfectly repeating pattern, it will either line up at the top because if you anchor your items at the top, and then you anchor the background pattern at the bottom of the top piece and then the bottom won't line up. Such a maddening thing. But if you have any sort of complex pattern, you can obviously just use it in CSS with the there's like these functions in CSS called polygon. And you can just pass it like clip path polygon. And then you give it just like the coordinates of wherever you want these things to go. But if it's more complicated than that, you can just have an like, I just went on noun project and found like a wave SVG, and then export that to an SVG. And if you embed that into your HTML and give it an ID, then you can just say, clip path URL, pound wave, and that will look up the SVG in the document and use that as a reference to punch out the shape. So I thought that was pretty neat. The super - -15 -00:05:39,510 --> 00:07:23,310 -Scott Tolinski: neat, I mean, all this stuff is really, really interesting. I think clip paths, I used one time as like a circle in my next level animation course yet, I did next level CSS animations course a couple years ago. And one of the examples that we had was a menu that sort of opened up as like a circle from the menu button. So when you click the menu, button, it like it almost like cut away. And it was just so cool to be able to take a clip path, and then animate that clip path as the transition and have it grow. You have this circle that grows and is revealing something, I think there's the possibility for this kind of stuff is pretty much limited by your creativity. So I think if you are the type of art kind of person you like messing around with art stuff, maybe you are a lot of experience with Photoshop masks, and all sorts of different things like that, you're going to really find a lot, a lot of these features to be a ton of fun, especially these ones. Next step we have in our feature list is CSS filters, which there are a whole lot of CSS filters. And I've probably used a decent amount of these. There's some of these that I haven't used, and I probably won't see the need to use. But CSS filters, just like what they sound like filter, or modify the thing that they're around and what kind of like give you an idea, what kind of stuff can we do there? Well, we can blur. We can give it brightness so we can give it contrast. You can pass in a drop, Shadow grayscale, you rotate, invert, opacity saturate sepia. There's also a URL one, but I don't necessarily understand the URL one it says it takes an SVG ID. But once I do, - -16 -00:07:23,640 --> 00:07:45,360 -Wes Bos: SVG has his own like subset of filters. So you can write custom filters in SVG. Let me just do quick. Little Google here, SVG filters. And there are all kinds of you can do like different types of blur. You know how like, there's no UI and CSS has like the ossian blur and you know, got gajan How do you say that? - -17 -00:07:45,390 --> 00:07:56,610 -Scott Tolinski: I always said gajan. But I never thought she and I don't say Ian, I don't say guys Jian. I say gushin. But I don't know if I'm saying this correctly. So I've never heard anyone else say it out loud. I - -18 -00:07:56,610 --> 00:08:20,940 -Wes Bos: just Oh, yeah. Yeah, there's a merge filter here, a morphology offset scalar lighting. So like SVG has, it says SVG. svg is its own like little world. So you can you can use the the filters in SVG. And then simply just point to them much like we did with clip path with the URL function in CSS, and it'll pick up those filters. From there, - -19 -00:08:21,150 --> 00:08:40,039 -Scott Tolinski: it's fine. I almost wish specular lighting was like ghost lighting, not like full spectrum, lighting, whatever it probably is, that would be cooler. So which of these have you used because I have used quite a bit of these. And I even saw some cool tricks with some of these I haven't used recently. So which of these have you Yeah, dug into - -20 -00:08:40,080 --> 00:10:11,520 -Wes Bos: his blur a lot. In a lot of my talks, what I do is I put like images in the background of my talks. And I don't want to like have to find nice images for every single one that works perfectly. So what I do is I just go out and get like 40 really nice images. And then I will automatically use saturation, I'll crank it down a little or I'll use grayscale, I'll crank up the brightness or down and then I'll adjust the contrast. And just by doing that, coupled with the background mix Blend Mode makes for like really nice background images that aren't they don't take away from the slide itself. So you don't have to have like a background color on your text. But they just added a little extra little bit of depth for it. So that's basically where I've used it. I used it once on I used the raster pace font. This is this was sort of canned but there was this idea that you could have these like a raster base font where every letter is actually just like a PNG and I did that because I wanted to get what was it like all the texture in the font is one thing vector sucks at is getting like really nice texture and raster based fonts did that. However, the thing about raster based fonts you can't change the color of them because it's just a raster image. So I it was white and I wanted it to be black or something like that. So I just use the CSS filters to flip it. Most of the stuff if you abuse any of the stuff we're talking about today, you will probably end up with a really poor performance website, definitely been there in a lot of different situations, but you can push them pretty far before they start to get a bit chuggy. - -21 -00:10:11,820 --> 00:12:42,090 -Scott Tolinski: I had a really odd bug one time with one of these. And I'm really interested to know if this was like a bug that has been since fixed or if it is like, because I just abandoned using the filter. So here, here it goes, I had a drop shadow filter, which exists to allow you to put drop shadows on, you could think of it as like the entire shape, right? So if you were to build maybe like a tooltip, that has a little triangle for the thing, and then you were to put a shadow filter on it. Yeah, the triangle would actually get the shadow and not just the box in the show. Yeah, they get separately. So that's kind of the use case. Well, I was building like an Instagram style profile page. And I wanted to have some really interesting background sort of shapes, right, the main shape was sort of interesting with triangles, and whatever. And I wanted those to all have the shadow as well. So I threw a drop shadow on the whole thing. And it looked really nice on every browser, and I'm talking everything, even Samsung browser, whatever, except for Safari, which, as we know has been the outlier for a lot of these things. in Safari, instead of applying the shadow to the outer of everything, it applied a drop shadow to every single element inside of there individually. So they each had their own rather than the all encompassing shadow that I was expecting and that I was seeing in other platforms. So I don't know if Safari just handles these things differently. But either way, because there was a ton of elements inside of this user profile. The thing absolutely will besides looking like pure garbage, the thing absolutely chugged on mobile Safari specifically, it was like totally unusable. So these things can really get in your CPU usage pretty quickly. I've used among these I've used saturate to to desaturate images before that's a really good one for progressive enhancement. Because the browsers that don't support these, I mean, they're just going to get a in color photo, rather than a black and white one. And it was really that second a sinker design, I don't really think so. So for me, I think something like that was nice. I saw a really interesting trick with the invert one the other day where somebody created a dark mode, simply by using the invert filter on their site, and I will I hear, I think they had like a day of sitting on top of everything. I'm not quite sure I didn't look into the code too much. But they use the invert filter. And since it was a white and black site, It then became a black and white site. Really pretty neat trick. - -22 -00:12:42,120 --> 00:12:59,279 -Wes Bos: I'm gonna try that. I'm going to go on the HTML element of Twitter and say, filter, invert one. Oh, my gosh, it doesn't really work with pictures of people's faces. It looks like a Yeah, like, I hate camera, but it doesn't look terrible. Like it works. - -23 -00:12:59,309 --> 00:13:32,429 -Scott Tolinski: He kind of works. Yeah, it really depends on the situation of how you use this. But I just thought that was really clever. These things can be used in multiples, just like you can with a trend, I was gonna say transition transform the dance form, you can have a filter, and then you have the various properties. So if you want to give it a shadow and a saturate, you would just have those listed one after another. No commas, Does that ever trip you up at CSS West? That trips me up sometimes? like where do you put a comma between properties? And when do you not? - -24 -00:13:32,669 --> 00:13:41,700 -Wes Bos: There's probably some like sane reasoning behind when you do it and when you don't, but it does definitely trip me up. Or sometimes it's commas. Sometimes it's just spaces. I feel - -25 -00:13:41,700 --> 00:13:53,520 -Scott Tolinski: like that's one of the bugs that I create a lot of times on this working Oh, I had a comma in there. Okay. Oh, if you know the same reason if there is one why that exists, please let us know. But yeah, so these are - -26 -00:13:53,610 --> 00:14:08,850 -Wes Bos: I also just found out Sorry to interrupt but I also just found out you can transition all of these filters so if you transition sign to blur and invert and use put a transition on it, it will go from one to another which I thought was pretty neat. - -27 -00:14:09,090 --> 00:15:02,970 -Scott Tolinski: Yeah. And and the old old old version of the level of tutorial site the one that was like built in Drupal way back Yeah, day, I used desaturate or saturate and I transition the like the logo, so all of the logos, were a little bit transparent and had no saturation, you hover they become fully cake and then get their full color. I mean, that was like a long time ago. And I just remember being like, wow, this is the future. And yeah, sure enough, here we are. This stuff is still not being used that much, but it exists, it should be being used. I think you'll see people use blur a lot for us image loading now with a load like crappy small can have an image blurred up and then transition that into faded into the full res image once that image is loaded. That's like one of the coolest thing about some of these platforms like Gatsby and grid some is that they like Do all that default out of the box for you for free. Really, - -28 -00:15:03,120 --> 00:16:06,270 -Wes Bos: it's really cool. I someone tweeted me like a month ago who I have a tweet right here, David guar GW, er, I don't know how to say his last name, but he ran into a bug in react where if you're passing state into SVG filter for blur, React will not render it, even if that piece of state changes and you're using it in a because of the SVG is is being used is like separate like via URL, I guess react doesn't understand that it reaches out to that to get the blur value, even though the filter was right in the same component. And it stumped me for a while but the fix was just to put a key on the element to force react to rerender it whenever the the blur value change. So just like the key equals blurred ash, whatever. And that that forced react to rerender the whole thing whenever the blur value changed, it's a fun little a fun little bug right there. Yeah, I was I was i'd love stuff like that. Because I was like, Oh, this is should be easy. And then like an hour later, I was like, Oh, this is deep. This is deep, we might have found a bug. - -29 -00:16:06,659 --> 00:16:10,679 -Scott Tolinski: Do you really love stuff like that? Because I don't know if I love stuff like that. - -30 -00:16:11,070 --> 00:17:11,460 -Wes Bos: What also it's when somebody asks me, hey, do you know about this I in my ego gets going, of course, I can do that, you know. And I can't sleep until I found the solution. Funny. What do we got next here background mix blend mode. This is a pretty handy one. So very similar to in Photoshop or sketch or figma or anything where you have all of your blend modes. If you have got like a color behind something and you want to blend that thing you can you can do that. With background mix blend mode, I don't use this all that often. The one time I do use it is sometimes you'll have like a bunch of logos on a page. And the person that gives you the logo, it gives it to you with like a white background on it. Oh yeah. And you have like a gray background that you need to display it on. And you can't like wait for them to give you whatever it is that you need. So in that case, what I'll do is I'll just say background mix blend mode, I forget which one it is saturate? I don't know. I'm just guessing right now, but it's something to do. Let me find it. - -31 -00:17:11,570 --> 00:17:23,040 -Scott Tolinski: I think it's screen or must not multiply and multiply literally multiplies the values, luminosity, luminosity? Yeah, - -32 -00:17:23,060 --> 00:17:42,960 -Wes Bos: I tweeted it. Let me find it here found the tweet, use mixed Blend Mode multiply in your CSS to knock out white backgrounds for from images. So if you've got a white background on something, you can knock that out. I tweeted that in 2016. It's also a bit old. But it's it's definitely a handy one I reach for a couple times a year. - -33 -00:17:43,170 --> 00:18:39,690 -Scott Tolinski: Yeah, these are really fun. I think a lot of this stuff really feels like designer things that have been available in design applications for a long time like masks and filters, and over Erna blending modes here. And these are things that designers I don't know if you've ever worked with a no, because you do a lot of your design yourself. But I in the past had been working with designers somewhat frequently, that will take a color a background and then have the color be multiply on there. And then you had to go to them and be like, Listen, the web does not have blending modes. Like I can't get this look for you unless you do it differently. Or you output the asset like this. And I don't want to do that myself. Because I don't think that's a good strategy, whatever. But these these things are really all changing. Like now a designer come to me with a blending mode background. I can just say, Oh, yeah, okay, I got that. No problem. - -34 -00:18:39,870 --> 00:18:57,560 -Wes Bos: I did a popular look right now where someone takes like a like a brand color. And then they have a photo that blends on top of it. And you always see just like the people having to Photoshop and export that thing. And it would be so much nicer if you could just do it in CSS. You could even like do it in Canvas too, I guess. - -35 -00:18:57,800 --> 00:19:52,340 -Scott Tolinski: Yeah, yeah, these things are great. So the blending modes they include all of the ones you'd expect multiply screen overlay, dark and light and color dodge saturation color and luminosity alone I don't know if I would expect luminosity but that's sweet that they exist but I don't use these a whole lot but I could that's pretty much the way it comes down to it again if designers want to get it in their design some stuff with blending modes. Hey, they exist now I again I don't know about the looks like they're not supported in edge but they're in Chrome, Firefox Safari, opera. So yeah, look it up look up the the Can I use on your own time because there's there's definitely probably a little bit more nuance to what I just said there. But yeah, so these are these are all super duper cool. Now another thing that is super duper cool is one of our sponsors this week is releasing some new features. And that's Sanity. They've been around for a little bit as a sponsor and Wes and then he got a little bit you get some access to some new Sanity features. - -36 -00:19:52,380 --> 00:21:39,930 -Wes Bos: You want to talk about it. I don't even know if this is live at the time recording but it will be by the time this goes. This podcast goes live and it's called Sandy Create. So a real quick Sanity is a sort of headless CMS. So you sign up with Sanity, and you can create your own sort of back end with Sanity. And then you get an API, you will pull all that data into wherever you want into a react application into view, or Angular or whatever, a Gatsby, something like that. And what Sanity is releasing now is called Sanity create, which is going to get you started with a Gatsby And next, or a nuxt website deployed to Netlify. So they're sort of taking all of the steps, which is you get a back end, you get a host. And then you get a theme. And they're, they're putting them all together so that you can just one click Deploy a website. And I think mostly just to try this out in to sort of get you hooked on what's in it is, so I figured I'm gonna try it right as part of the ad just to see how quick it is to get up and running. So I'm going to sanity.io forward slash create, I'm going to use their portfolio with Gatsby example, I am going to connect to my GitHub account, let's see how quickly we can actually do this. So you just go to sanity.io, forward slash create, and you can hook up your GitHub, and you can hook up your Netlify. And just go ahead and deploy one of the examples that you have, they also are going to have support for other people's templates. So if someone else has a template up on GitHub, it will point over to that, and go ahead and click through to that it will scaffold it all up, and you'll have everything up and running real quick. So check it out@sanity.io forward slash create. And thanks so much to Sanity for sponsoring. Cool, - -37 -00:21:40,310 --> 00:22:10,860 -Scott Tolinski: super cool three sunglasses, smiley face, super cool. Next one we're going to get into and border images. Now, border images is not something I've used before. But it is something that I think opens up quite a bit of possibilities to do some interesting things for a long time. We've always had to deal with the border image, or the border style that came in CSS, which was some very, very, very basic stuff. It was just the dash that was the dashed - -38 -00:22:11,160 --> 00:22:14,910 -Wes Bos: line, dash dotted dotted line double, - -39 -00:22:15,180 --> 00:22:17,190 -Scott Tolinski: and never used anything other than - -40 -00:22:17,640 --> 00:22:19,350 -Wes Bos: line solid. Yeah, like, - -41 -00:22:19,350 --> 00:22:20,190 -Scott Tolinski: Yes, - -42 -00:22:20,190 --> 00:22:29,250 -Wes Bos: I use double every now and then. But you'd still can't control the width of how each one is. So if you have a very large solid, it doesn't look, it doesn't work as well as you think it would. - -43 -00:22:29,430 --> 00:22:58,350 -Scott Tolinski: Yeah, it's just okay. But now we can use images, and even coolibar, you can use svgs. And this really opens up to some very interesting things like gradients, right, you can now have a gradient border, which is not something that we've ever been able to do. Or you can just have a straight up image that is something that needs to be repeatable, and it could be really super cool. Again, this is one of those ones, I think that has the potential to go awry. I've seen some very ugly - -44 -00:22:58,980 --> 00:23:03,870 -Wes Bos: examples look like Word Art. And something that you get out of Microsoft Word from three - -45 -00:23:03,990 --> 00:23:15,420 -Scott Tolinski: is definitely one that I think has more potential than what you'll see a lot of the examples give it but this is again, basically just allowing you to use an image and have it be a border. Yeah, - -46 -00:23:15,450 --> 00:24:06,030 -Wes Bos: it's really cool. There's a whole it's very, very fine grained control over if they repeat, or if they stretch where you anchor them in the top left hand corner or wherever it is that you want it I have never needed this. But I could imagine like making like a diploma or something like that if you need to have the diplomas be a variable size, but you still need that fancy border that goes around what would be really cool to see somebody make make like a like a bill for their like a $10 bill or something like that with the borders that go around it, but make it like responsive based on using this I think that would be pretty neat as well. It's just some some pretty cool stuff that that can that can happen. It's one of those things that like not everything in CSS you're going to be using every single day. But it's nice to know that it's there. Should you ever run across needing something like this. - -47 -00:24:06,240 --> 00:24:35,670 -Scott Tolinski: Yeah, I think both of these come up about like when designer passes you off design COMM And in the past, you've had to say I can't do that. Now you can say let's talk about it. Maybe we can do this. Maybe we can make this work. Or maybe you can use one of the new exciting techniques. I actually really loved it when I learned something new and then and then I got a design that had that thing and then I guess this is the chance for me to to flex my background image muscle. I'm so excited about this because I get to finally show off some of my skills. - -48 -00:24:35,880 --> 00:24:51,000 -Wes Bos: You know what this reminds me of? is like when you're in like grade school, they had this like paper that you could buy that had like, like borders on it already. And then you could just like run that through the printer in the jail or something like that. That's what this reminds me of. - -49 -00:24:52,920 --> 00:24:56,760 -Scott Tolinski: Yeah, right. You have to like line it up. That's great. That's hilarious. Oh, that's - -50 -00:24:56,760 --> 00:25:18,150 -Wes Bos: good. So if you've ever used those, let us know twist. syntax FM because I would love to see some use cases or even like, like invitations depending on like the the paper size that you print. It's like responsive borders. This is a whole lot. I think a lot of it is more like printable and offline than it is having a ridiculous image border on your your website. - -51 -00:25:18,330 --> 00:25:36,240 -Scott Tolinski: I think. I think you just you just opened up the possibility of something. Yeah, you could you could make you could make an app that creates some you never get these from your grandma where they would print out like a card from Word Art or something. It was like a greeting cards, you'd go to word you say give me the Give me the birthday cards? - -52 -00:25:36,660 --> 00:25:38,040 -Wes Bos: It fold it in for - -53 -00:25:38,070 --> 00:25:41,190 -Scott Tolinski: ya, you fold it? Yeah, yes. Yeah, that'd be great. - -54 -00:25:41,430 --> 00:25:42,120 -Wes Bos: Oh, man, - -55 -00:25:42,300 --> 00:26:55,920 -Scott Tolinski: one of those things, actually, you could use this next one to do that, too, which would be multiple background images. This one here really good multiple background images actually is another one where the a lot of the examples you'll look at online are just corny and cheesy and like not useful. But there's a lot you can do with this. In fact, because you have the option to do multiple background images, I actually used this on level up tutorials to overlay a gradient on top of an image, both of which are background images in the same div. And then you can change you can have some opacity, you can have some saturation changes or something like that. Like I really like this technique, multiple, multiple backgrounds, it basically just says, Hey, you have a background image. And then coming back to the conversation we had about when to use commas and when to not you use a comma to differentiate your background images. And you can even give them different positions. What's cool about is you could give these like using the background position property, you could do like right bottom, comma, left top and the right bottom, we'll be talking about the first one and the left gap, we'll be talking about the second one. So you can align them and have them totally different positions, places, whatever in this is this one is right for for all sorts of interesting techniques. Yeah, I - -56 -00:26:55,920 --> 00:27:39,270 -Wes Bos: use this all the time, often, I'll just do a background pattern on the I'll do a background color. And I'll do a background pattern that goes over the whole thing. And if you go to my advanced react.com website, I use this. And in the top left hand corner, I anchor like a black crunch. In the top right hand corner, I anchor a white grunge in those two grunge textures go over top of each other. And depending on how wide or how short the browser is, they overlap more and less, but they both are sort of anchored in the top right and left hand corner. And I use this all the time, just like you said you you use specify multiple background images. And then if you have things like background attachment background position, you can you just separate them by a comma. - -57 -00:27:39,690 --> 00:27:42,900 -Scott Tolinski: Yeah, comma, there's that amino comma coming in again. - -58 -00:27:44,700 --> 00:28:16,680 -Wes Bos: What else do we have here, background gradients, like you said, you can make these like really cool backgrounds because you can have a gradient that is partially transparent. So you could make a background that has three or four gradients and they all sort of meld into each other. And you can even couple this with the background mix blend mode as well. And make some pretty nifty there was like a CSS gradient generator that use this but the the URLs no longer live I used to love that because people say like, you always have the best gradients. I'm like I'm just taking them website. - -59 -00:28:17,970 --> 00:28:21,990 -Scott Tolinski: That's a nice day. You have the best gradients. I love that somebody came up with a nice, - -60 -00:28:22,590 --> 00:28:45,660 -Wes Bos: yeah, we also thanks to layover Ooh, we have radial gradients in CSS now. Yeah, which we haven't had for a long, long time. And she worked really hard to get them into the CSS language itself. And these are just basically circle gradients where you can you can start from the middle and go on out. I don't know there's not too much else else to that. But they're they're pretty cool. - -61 -00:28:45,870 --> 00:30:49,560 -Scott Tolinski: Yeah, those are one of those things that you know, design applications could do. And you couldn't do that now you can do so again. Yeah, not too much to say about radial gradients. I actually had one of these on level up for a little bit but I don't anymore. I just have just a gradient that's been slanted down it has like a really interesting look to it on the new design. Next is going to be multiple box shadows. Now multiple box shadows is something that I don't I wouldn't want to say I abused this because I just use it uses a handsome Yeah, yeah, all the time. And the reason why multiple box shadows are interesting or good is because one box shadow has the tendency to like that's not really how shadows actually work or look in real life. And so because of that, if you have multiple shadows, and you define them with our good old friend, the comma, you have to give all of your values first. So you could say five pixels, five pixels, 10 pixels for a blur, rgba 000 0.3. And then you'd have a comma, and then you could have your second one. Now these get into a couple of different territories because with shadows with multiple shadows, you can do some really interesting effects. And you can do some more realistic looking shadows that actually Give your layers a little bit more character, I use these specifically to give my characters the distance from the surface, I used to give it a much more realistic shadow, maybe I have like a tighter, darker shadow. And then I have a looser, a little bit wider have a little bit more of like a fluffier shadow as well that much more transparent and can give like a really nice effect. If you want to see like an all star example of how to do this, just check out the material design guidelines. The material design guidelines have really, really excellent well thought out shadows. But you can also use these to stack up and do some really interesting effects. I have a code pen that I made a while ago of text effects that I made with multiple shadows. And, for instance, I made the this is actually I don't know if you're familiar with Wayne's World at all, but I know Yeah, movies. - -62 -00:30:50,550 --> 00:30:52,470 -Wes Bos: That's like one of the few movies I have seen. - -63 -00:30:52,610 --> 00:31:28,050 -Scott Tolinski: Okay, good. In Wayne's World, the text moves one way, and it does like yeah, square. And then the background is sort of like these, like repeated versions of it moves in the opposite sort of way, I actually made that Wayne's World style text effect by using transform to shift the background shadows one way and then translate the other way. And you create this really, really a really cool effect. So you can do like by layering a whole bunch of these code paths, or a whole bunch of these shadows, you can build some really, really interesting things. - -64 -00:31:28,350 --> 00:32:14,850 -Wes Bos: I love this, I use it all the time, on my own, where I will have like a background shadow that's just like a very, very light, one pixel darker version of the color that I'm on. And then I'll have like an another shadow that's like a more spread out. What's the word for it you have, you have your x, your y, your offset, no x, blur, y offset, your blur, Blur and your spread. And I'll usually do a little bit more blur and a little bit more spread to have it out. And I think just like two or three box shadow or tech shadows or works for box shadows, well, will often look really good, you shouldn't be able to tell that there's multiple box shadows without like really looking at it. Because if you can tell, then it's probably too heavy handed. Almost you're going for that. Right? - -65 -00:32:14,850 --> 00:32:16,320 -Scott Tolinski: Unless you're going for that - -66 -00:32:17,340 --> 00:32:18,840 -Wes Bos: look that you like Yeah, yeah, right. - -67 -00:32:18,840 --> 00:35:01,130 -Scott Tolinski: All of these things there are with a caveat of if it's intentional Lee, what they used to say in the School of Music, it was like you have to know the rules first to break them. So you learn the rules. And then like, it doesn't matter that Beethoven broke the rules, because he was very, like familiar with the rules. And when he broke the rules, there was intentional. So I mean, I think there there is a lot to that, where you're like, you know, you know how to make these things work in a way that shouldn't work just because you're that good. And let's say the rules have been broken on your application and your application has been broken, you're gonna want to head to one of our sponsors, which is Sentry at Sentry dot i o now I'm staring at my century right now. And when I log in, it shows me all of the issues that have taken place in the last 24 hours with their frequency, how many users they're affecting, and what kind of problems they're I can see some of these things are potentially issues that I need to be looking at ASAP and other which are, are well, they're not issues that I really need to worry about. For instance, I have an error in here that's telling me it's about the YouTube players not attached to the DOM. It's actually I think, an issue with the YouTube player embed code and not actually anything that I have to worry about. So you know what I do, I select that error, and I click ignore. And then what happens is Sentry ignores that error, cleared it off my thing, I don't have to look at it anymore. I don't have to think about it. It's not an error that I need to talk about. However, if there is an error that I fixed, I can select that error and I can select resolve and that error is going to be marked as resolved then if anyone happens to come across that same error again, it gets marked in two as a regression. That way I can look to see, okay, did I actually fix this diagnostics? This? What are the problems? What are the things I need to look at, and that's what Sentry is all about. So if you want to give Sentry a try, head on over to sentry.io use the coupon code at tasty treat all lowercase all one word, and you will get two weeks for free. Trust me, you're gonna want to throw this into your website and see how this can improve your air tracking your vision across your entire application. And it works on every single platform you could possibly imagine. So check it out at Sentry dot i O. Alright, next we're going to get into here is hex plus alpha. Now this one's fun because it's a hex values that we know and love are in our standard all hex values, but we can add a couple of different hex values that the two hex values at the end of our hex value if it's an FF for a 00, or anything in between, and you can actually make it transparent. So instead of our standard six value hex values that we're used to it would be eight, eight numbers or characters in your head. x value. Yeah, - -68 -00:35:01,130 --> 00:35:51,060 -Wes Bos: I use this all the time specifically in I don't use sorry, I don't use it all the time. But I use it in my cobalt to theme, because that's how VS code allows you to specify opacity on hex codes. Because sometimes you need to set like, like, if you have like a highlight in the VS code theme, and you want that highlight to be somewhat transparent, then you can set a hex value. It's kind of annoying, because I can not for the life of me convert zero to 100 to hack. Because like, I don't know, I memorized like some of the handy ones like 50 and 20, or whatever. Yeah, but I almost always have to just look it up, I would have liked if it was like, just like actual value, like you could just tack 0.5 million. And we're getting that with CSS color functions. It's a bit of a bummer that you have to memorize hex codes for it. - -69 -00:35:51,300 --> 00:36:23,670 -Scott Tolinski: Yeah, I always just know that instead of like trying to convert it to like a percentage. I just try to think of it as like, you know, FF, cc DD, you know, like, I know where those a chart, and I don't actually try to use, like, 20%, I try to use whatever cc is, you know, rather than what the actual percentage is because it for me, that makes more sense that said, I don't use these very often, most of the time, I'm using RGBA or hsla. instead. Have you heard the design book that came out from Steve sugar lately? - -70 -00:36:23,690 --> 00:36:25,230 -Wes Bos: No, I haven't yet. - -71 -00:36:25,350 --> 00:36:32,040 -Scott Tolinski: Yeah, he he makes a really good case for why you should use hsla. And I think I'm pretty pretty on board with that one. - -72 -00:36:32,250 --> 00:36:48,690 -Wes Bos: Yeah, I it just sells the best. I just sometimes they memorize like my yellow. I just memorized the, the yellow hex code. And I just change that in my head. Because like, this wouldn't be a problem if I just didn't use anymore. I just use a to sell. Yeah, right. - -73 -00:36:48,810 --> 00:37:19,230 -Scott Tolinski: Yeah, I know. That is one of those things that say if you you have these built in ways that you just do things and you feel like, you know, that's just how you know to do it, it is all and always like, I have to like open up my application and be like, what is just oh, no, I have no idea for this, where especially I mean, rgba and our RGB. I don't necessarily have those memorized. But I'm very comfortable within the point where I can write some stuff that I feel comfortable using, whether without having to open in my application or whatever. But I guess it's just one of those things. - -74 -00:37:19,500 --> 00:37:51,300 -Wes Bos: I'm gonna plug the website mother effing hsl.com. It's made by Paul Irish like very long ago. But it's helped me so much, because it just gives you the the whole spectrum. And I can almost now without going to this website, after using it for years, sort of just picture in my head, like what the rainbow looks like. Yeah. And then be able to just like between three, zero, and 360, you can sort of pick where you want to be in the rainbow. And then you can go up and down on the rainbow based on how the saturation and lightness - -75 -00:37:51,440 --> 00:38:02,150 -Scott Tolinski: Yeah, because that we should actually say we're talking a little bit about HSL. And its hue, saturation, lightness, and then a would be alpha channel for transparency. - -76 -00:38:02,360 --> 00:38:18,090 -Wes Bos: Do you know that if you add No, if you subtract 180 from HSL, it will give you the exact opposite color. And that works with any value. Because if you go HSL is between zero and 360, or zero and 359. And talking - -77 -00:38:18,090 --> 00:38:21,600 -Scott Tolinski: about the subtract the 180 from the H value, right? Thank you. - -78 -00:38:21,630 --> 00:38:48,090 -Wes Bos: Yeah, yeah. But if you're if you're at like 20, and you subtract 180, it still works. Or if you're at 200, and you add 180, and it goes past the rainbow, it just circles around the rainbow and it just keeps going. So ADSL will go infinitely in both directions. I'm sure there's a limit at some point. But you don't have to worry about being like wrapping around. If you have those values, you can just add it and it will wrap around for you. - -79 -00:38:48,300 --> 00:39:05,940 -Scott Tolinski: I think we should push it to the limit and write some code to see what that limit is. With like a nice little extra. I feel like I would love to do a, like a TV show where all we do is experiments like that. Can we break hsla just by increasing the H value to something that's ridiculous. Let's figure - -80 -00:39:05,940 --> 00:39:13,110 -Wes Bos: it out. Oh, let's try it right now. Do you think that what do you think that the highest HSL value? 10 ad? - -81 -00:39:13,320 --> 00:39:16,380 -Scott Tolinski: That's actually probably not 100? If it's this infinite? - -82 -00:39:16,670 --> 00:39:23,360 -Wes Bos: No, it's probably like the amount of like, like there's a limit to what integers can hold like the the highest number integer can hold. - -83 -00:39:23,480 --> 00:39:25,650 -Scott Tolinski: Yeah, right. But that wouldn't Yeah, - -84 -00:39:25,730 --> 00:39:55,170 -Wes Bos: I'm at about 15 three so far. Oh, I think I hit it. push it to the limit. So 1-234-567-8910 1112 1314 1516 1718 19 I don't know it's about 30 threes I just inputted and then a broke. So now you know if somebody finds the exact value tweet us at index FM. I would love to know what the upper limit of that is. Because there's a limit for z and x. I found it once. Yeah, - -85 -00:39:55,190 --> 00:40:27,510 -Scott Tolinski: there's a lady. Love it for a lot of things. I was telling this story about that. time we pushed it to the limit. We had a really weird bug. And you remember the background image replacement technique where you push something off the canvas? Yeah, yeah. Well, our our intern used EMS instead of pixels, but he had like 9000 EMS and it just like it just totally broke the site. And we're just like, what is what is going on here? It was a hard, hard bug to solve. We pushed it to the limits. We walked along the razor's edge. Where's the next lyric in that song? Do you know that song? - -86 -00:40:27,510 --> 00:40:28,770 -Unknown: push you to know? - -87 -00:40:29,189 --> 00:41:50,280 -Scott Tolinski: Well, good luck. Okay. But don't look down. Keep your head or you'll be finished. Hmm. Yes. That's a great time. Okay, let's talk about this next one viewport units. This is one I use 20 473 65. I use viewport units. And every literally he is that literally, literally, literally 20 473 65. I got a V WVH. tattoo. No, I don't. But I love viewport units. Because what they allow you to do is basically talk to the viewport in a way that says, hey, this is going to be 100 viewport units, aka it's going to be 100% of the viewport. Now the cool thing that I like about viewport units, besides the fact that you can actually get values that make your your thing fit into the viewport. That's all great, right? You can finally design things and have it develop without JavaScript to fit to the viewport. But when you say 100 Vh it does its job. Unlike when you say 100% height. Yeah, it's just sort of like oh, no, does that mean like if you do 100 Vh, it's like, okay, I'll do 100% of the height, or 100% of the viewport height, I don't need content to push me to 100% of the height. So viewport units are a godsend. They're just like, amazing. I love them, I use them. 24 seven, - -88 -00:41:50,520 --> 00:43:21,030 -Wes Bos: I absolutely love viewport units, nothing else to add there. They're just fantastic. So happy with them. The one thing that we did tell you last time was you can use viewport units for tech sizing, which blew your mind and a few other people tweeted that that blew their mind as well. So you can you can use v min. And VW in all of the viewport units for texts to size text based on how big the screen is, which is or the width or the height of the screen is which is pretty cool. Next up, we have calc. calc is awesome because it allows you to mix units. So if you have like a, if you have like a fixed header or something like that, in it, you say say that header is 30 pixels high. And you want something else to be 100% high minus that. Well, first of all, you could probably do that with like Flexbox, or grid. But if you need to do it for some reason, there's lots of use cases I've run into it, you can simply just a calc 100 Vh minus 30 pixels, and then that will output whatever that is. And it will recalculate itself when the window resizes, which is so cool, because now you can mix and match. Same thing with like, if you want something to be like, I don't know, 80% wide, and then you want to put like some margin on there, you can use calc to take away the margin from that and then the margin was and then the same. Previously, you've had to use like, if it's 80% wide, then you have to have like 2% margin and then at a certain point that's too much or too little margin. So you can keep it as a fixed amount with the calc. - -89 -00:43:21,359 --> 00:45:11,250 -Scott Tolinski: Yeah, I love this. I actually you were saying like some of the things that Flexbox could do one of the things that I I've found myself using for especially when you have like a, an area where you want it to be 100% height of the viewport, but then you have a fixed header. And so yeah, I could say I want this to be 100% of the viewport minus the height of the header. That way you have it actually the space that like people that are going to be like visible the visible space there. I use calc, I use them with viewport units a lot. I use them with a I think just anytime you you take percentages and say hey, maybe I want to subtract, you know, 50 pixels for this for some reason, right? This thing has a defined size. Yeah, I think calc is another one of these things that doesn't necessarily get used to its full potential. And the times when I see it being used to its full potential, it like really blows my mind. I'll be on a website how to like man, how they do that, I'll look in the Inspect Element. And I'll see some really like fantastic calc skills. And I'll be like, yeah, that's where it's at. I need to open my mind a little bit more to callkit myself, but it's definitely one of those things that's going to bring up a ton of possibilities. Now next one here, we have CSS variables, aka custom properties. And this is one I have become very, very familiar with. Lately, I've been building my new site with custom properties, instead of any sort of JavaScript variables or any sort of sass variables. I'm using styled components. So for me it would have been JavaScript and that actually got to be a huge giant pain. I'm importing all of my colors. okay to use the brand teal, I have to import teal from colors. You know, like that. That just sucks. I mean, we never had to do that in SAS, we never to do that and stylist. And it's a huge bummer that I have to do that in CSS and j s. Now I understand why, why it exists. - -90 -00:45:11,280 --> 00:45:19,890 -Wes Bos: We talk so much about like modularity and components. But there's something, something so nice of just have a global variable. Sometimes, you know, - -91 -00:45:19,950 --> 00:46:49,800 -Scott Tolinski: there are some things that need that like are cool to be global. Yeah, CSS custom properties have not only allowed me to do that. But that allows me I think about my design system in a totally different way. So for instance, I'll have all my colors, defined all my fonts, assign it, literally everything is defined in a custom property. And then I'm using it all just anytime I want to pull out my color, and you know, accent, color, brand, color, whatever. And I can change those colors. And it could be a global change. One of the things that I've been experimenting a lot is building in not only a dark mode, but an OLED mode. And I don't know if stuff like this is going to, if my new website design is going to be out by the time this episodes done. But there's some really, really amazing things that you can do, just by changing one custom property, I could change one custom property and see so much of my site change. And that, to me is absolutely fantastic. It opens up the door to a lot of really interesting ideas. So CSS variables, custom properties are one of those things that have really changed everything for me, because like we didn't really mention this in this episode, but we have in the past, unlike sass variables, or JavaScript, or maybe JavaScript, but unlike sass variables, if you change one of them, it actually updates live instead of needing to be compiled. So that's the use case. That's why they're better than a CSS preprocessor variable. But then again, the browser support isn't quite there yet. Luckily for me, my audience has the required browser nests necessities. - -92 -00:46:50,040 --> 00:47:22,320 -Wes Bos: Yeah, I use them a lot as well. I usually like to define them like nice and high on the route or HTML or body, something like that. And then what I love about them that you didn't say is that you can overwrite them later on. Yes, you can also use them. Like if you've got something like like text shadow, and you just want to change the color. There's no ability to just like reach into tech shadow, and just overwrite one part of tech shadow. But if it is a variable, all you have to do is just change the variable on hover or at a later point in your CSS. And that one piece will change in repaint the CSS. - -93 -00:47:22,680 --> 00:47:53,340 -Scott Tolinski: Yeah, yeah, that those are aspects of it are really super neat. And I was actually finding it to be really nice for responsive design to to say, all right, at this breakpoint, my body font sizes this via a custom property, change it up and have the whole thing the whole like type system adjust sort of accordingly. I'm a big fan of how these all work together. Last one we have here is text decoration style color, Linus skip ink, I have not used anything in this camp here. I've not used any of these I - -94 -00:47:53,340 --> 00:48:04,170 -Wes Bos: just stumbled upon this like two months ago, I didn't know you. So like, right now, if you want to have a link, and you want the links underline to be a different color. Like what would you do you put a border on it? border bottom Yeah. - -95 -00:48:04,170 --> 00:48:07,710 -Scott Tolinski: Or gradient, you can do a background image gradient and have it - -96 -00:48:07,710 --> 00:49:20,310 -Wes Bos: Yeah, exactly. And I only recently learned that like, we have text decoration color, where you can just change the underlying color of a link to be a different color. And it's it's the perfect use case for something like this, because it works in most browsers. And if it doesn't work, it just falls back to the color of the actual text. Interesting. So that's pretty cool. You can give text decoration takes multiple. So you can do text decoration, underline and overline. If you wanted to, you could do like line through which is sort of the strikeout. I don't know why you would want to do that. But maybe there's a situation you run into needing to do that. The really cool thing about it other than changing the color of it is there's text decoration style, which you can change it from just a regular underline to, there's a couple options here. There's solid, which is the default, novel dotted dashed. So you know, all three of those from just regular borders. But then there's also wavy, which wavy has been a border style only in Firefox for a long time. But I think wave is implemented in all the browsers now, which is really cool. So you can do this kind of like little, you know, like a spelling mistake in most editors. Yeah, it'll give you a little wavy underline. - -97 -00:49:20,460 --> 00:49:29,730 -Scott Tolinski: I bet that's how they do it in VSS. VSS code is what it is. I can't believe, like CSS so much - -98 -00:49:29,730 --> 00:49:31,110 -Unknown: CSS - -99 -00:49:31,230 --> 00:49:59,250 -Scott Tolinski: is just wanted to say VSS, it was so hard to say vs. Code. Okay. That's all I got for these. This is CSS, the cool part. There's a lot I've been CSS that gets a lot of hate. And we didn't even talk about like CSS itself, which is my opinion. I like CSS quite a bit. I'm a big CSS fan. So big fan. Yeah. Big fan of CSS, and it's only getting cooler. This is some of the fun stuff though. Some of the fun cool things, some of the sunglasses emoji stuff inside of CSS. Do you have any more - -100 -00:50:00,000 --> 00:50:07,230 -Wes Bos: I think that's if you have any other things you want to add maybe we'll do another show like this because there's clearly lots of cool things in CSS but - -101 -00:50:07,710 --> 00:50:31,590 -Scott Tolinski: so we didn't talk about this a whole lot but the CSS painting stuff Diane Smith has just this the most amazing will share the link in the show notes. Diana hyphen, is that Adrian calm Olguin will have the link in the description if you haven't seen this, this is like Well, well, well worth your time only inspect element on this thing and check it out. This is like this is top tier CSS. This is like this is - -102 -00:50:32,730 --> 00:50:39,660 -Wes Bos: black. He just took the blur off. Oh, that's a bad eyebrow job. Because the hilarious - -103 -00:50:39,690 --> 00:50:42,870 -Scott Tolinski: Yeah, yeah, this is some some prime CSS thing. - -104 -00:50:43,110 --> 00:50:45,630 -Wes Bos: Wow. That's Yeah. Incredible. - -105 -00:50:45,900 --> 00:50:49,770 -Scott Tolinski: Incredible. All right, so Diane, for that one. - -106 -00:50:49,800 --> 00:50:51,540 -Wes Bos: What about sick pics for today? - -107 -00:50:51,750 --> 00:50:55,620 -Scott Tolinski: take pics. Um, do you have anything if you have something go for it. - -108 -00:50:56,010 --> 00:52:27,180 -Wes Bos: I'm going to sic pick another tool that I've been finding so handy. I've had this for probably about a year now. I initially bought it for my stickers because I needed to know the width of my sticker. Oh, interesting. And it's it's a set of digital calipers. So it's I'm just showing Scott right now what it is, it's sort of a ruler with some pointy bits on the inside. And you can use it to measure how thick things are or how wide things are. And I found myself needing it all the time, like we bought, we bought an umbrella the other day, and we needed to buy a stand. And it wasn't like the standard umbrella stand width. So I just whipped out the calipers and measured it right up and like I can quickly find out how wide something is. Rather than taking a ruler and trying to like eyeball the center of a circle or something like that. You can just get this thing out. It's super precise. I use it for bikes all the time. If I need to know like the width of a pair of handlebars or a C post or something like that. And I was just thinking the other day I'm like I'm for sure gonna get this as a gift for somebody because it's one of those things that I never knew I did. But now that I have it, I use it all the time. And it's just the I don't specifically really high end one I know you can get ones that are like made for scientific purposes. This is just like a $20 Amazon one and it's it works really well it gets down to like the very like half millimeter. It goes to like the 10th of a millimeter or the which is really really specific for me. And when I measure something like a bike see posts were half a millimeters difference between two different sizes of seatposts it always gets it for me. Nice. - -109 -00:52:27,480 --> 00:52:32,490 -Scott Tolinski: Yeah, calipers. Yeah, I've never I've never had the need for something like that. But I think it's a really neat instrument. Yeah, - -110 -00:52:32,520 --> 00:52:41,910 -Wes Bos: you will that instrument that's a good word for it. You will you'll find yourself needing it at some point being like, Ah, this is why West has calipers. - -111 -00:52:42,060 --> 00:52:47,340 -Unknown: Yeah, I think the show is slowly becoming into tool. Yeah, what till the time was just been. - -112 -00:52:49,740 --> 00:53:01,560 -Wes Bos: The Summer is here doing stuff all around the house and the size of warm and it's funny how, how often I reach for a tool and be like, I'm so glad to have the right one right now because this was so much harder last time I did it. - -113 -00:53:01,740 --> 00:53:07,470 -Scott Tolinski: Yeah, yeah. Tim the tool man West West the tool, man. What - -114 -00:53:07,500 --> 00:53:08,400 -Wes Bos: was this? Taylor? I - -115 -00:53:08,400 --> 00:53:09,870 -Scott Tolinski: don't even know. Taylor. - -116 -00:53:09,899 --> 00:53:13,830 -Wes Bos: Yeah. jtt was murdered. jtt had to come on. - -117 -00:53:13,859 --> 00:53:15,390 -Scott Tolinski: Do I remember? Yeah, yeah. - -118 -00:53:15,450 --> 00:53:16,860 -Wes Bos: What's he up to these days? - -119 -00:53:17,220 --> 00:53:24,570 -Scott Tolinski: I don't know. Yeah. jtt If you Google jtt he comes. He owns the letters jtt. - -120 -00:53:25,379 --> 00:53:33,390 -Wes Bos: It's actually incredible. 1981. So he's like, he's 37. Yeah, it sounds about Oh, impressive. - -121 -00:53:33,479 --> 00:53:47,160 -Scott Tolinski: Yeah, impressive. My say pick today is kind of hipster if ik and trendy in a way but also very nice and futuristic. In a way you don't have those. You know that all hanging down? lights the patio like what are they called? Oh, the lights - -122 -00:53:47,430 --> 00:53:49,980 -Wes Bos: are off. Sir. hipster lights. - -123 -00:53:50,399 --> 00:55:17,610 -Scott Tolinski: Yeah, the hipster lights that make any space cozy. It's like cozy plus 10 we have been really interested in making our backyard more cozy. And just like so many other people we've like, let's bring up some lights. Because these things really make it nice and cozy now forever and ever and ever. And I trust me, I've been in this market for a little while. They have not gotten on to the solar trend for these. So if you were looking for solar lights of this style, like even I feel like last year, you had a hard time finding good ones. And now there's just like 10,000 of them on Amazon. So these ones are really super nice. They're weatherproof, they're indoor, outdoor, 27 feet, they have a little solar stake, you stick in the ground and it powers them you can clip on to have more. They're great. These things are just so great. And one of the things that's I think an underrated thing about lights like this being solar powered, is that they don't have to be here any sort of power plug whatever. You can string them up in your tree. You can string them up anywhere as long as little thing gets done. And to me that's like incredible because my backyard only has two hours. Let's and they're neither of them are in a good spot. They're both in just straight up bad spots. So be able to have some interesting cozy nice lighting in our backyard with these things is just been incredible. So I linked to the one I've been using there's a whole host of other ones I recommend just checking out some see what works for you. - -124 -00:55:17,850 --> 00:55:23,550 -Wes Bos: So are these like does it have a battery in it? Or how does it work? There's there's capacitors there. There's a solar - -125 -00:55:23,850 --> 00:55:24,870 -Scott Tolinski: power. Oh, you mean like - -126 -00:55:24,900 --> 00:55:28,290 -Wes Bos: Yeah, but like you need lights at night when they're when there's no sun. Right? - -127 -00:55:28,290 --> 00:55:38,760 -Scott Tolinski: I would assume that the what it is, is the battery and then the solar thing charges the battery. Yeah. And then the battery powers the lights on. That seems fine. That seems right to me. - -128 -00:55:39,210 --> 00:55:52,800 -Wes Bos: Oh, yeah. 45 milliamp 4500 milli amp hour charges over the course of five hours of sunlight in shines for eight hours. Yeah. That's awesome. Awesome. So you never need to plug them in. - -129 -00:55:52,860 --> 00:56:08,070 -Scott Tolinski: Yeah, yeah. And then again, and there's a ton of different options online. There's some really interesting ones too. So check them out. I found in my my search for this is that you can buy all of your Christmas lights if you celebrate Christmas or holiday lights. Whatever holiday you celebrate. - -130 -00:56:08,100 --> 00:56:09,750 -Wes Bos: Yeah, please just don't offend me, Scott. I - -131 -00:56:10,050 --> 00:57:47,190 -Scott Tolinski: Well, I mean, you know, I I'm not trying to offend here. But no, I mean, whatever. Whatever you celebrate if you need to let go festive lights. You've got solar power now and their little LEDs. We we went to a wedding and they put these little LEDs in a jar and and taped a battery to it and that liquid glow fireflies in a jar. It's incredible. The world is crazy. LEDs have changed. So so much stuff. It's no okay. No kidding. Hey, that's cool. A it's a shameless plugs today, what do you got, I have a new course on react animations. It's called animating react, we do a bunch of really awesome practical animations, stuff that you see all over the place stuff that you're gonna want to learn how to do and we do it all physics based with react spring. React spring is one of those libraries that you're going to want to learn these Let me tell you this thing is incredible. React spring does so so much. And for like I did, I just recorded a 24 tutorial video series on react spring and like I honestly feel like we scratched the surface of what react spring is capable of just to teach you practical, real world stuff. And so it's like it's not that react spring is hard because it's not hard. It's it's really easy. Once you get it, there's just it's effortlessly flexible. So if you want to learn react spring head on over to level up tutorials comm forward slash pro sign up to become a pro. If you sign up for the year you save 25% percent percent. And very, very soon when this redesign hits, the prices are going up. I know I said that before the prices are going up when the redesign hits. So get in now and lock in the price. lock it in. - -132 -00:57:47,550 --> 00:57:59,040 -Wes Bos: Awesome. A Wes bos.com forward slash courses has all of my free and paid ones. Check it out. Use the code syntax for extra 10 bucks off any of the courses and that is it. - -133 -00:57:59,370 --> 00:58:00,120 -Scott Tolinski: That is it. - -134 -00:58:00,419 --> 00:58:03,720 -Wes Bos: Thanks for tuning in. We'll catch you next week. Dude, please - -135 -00:58:05,610 --> 00:58:15,360 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax147.srt b/transcripts/Syntax147.srt deleted file mode 100644 index c8c0441b2..000000000 --- a/transcripts/Syntax147.srt +++ /dev/null @@ -1,188 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,989 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot. Here is Sarah CUDA, Bob, and Scott. Hello, Todd. - -2 -00:00:25,950 --> 00:00:51,330 -Scott Tolinski: Welcome to syntax in this Monday tasty treat, we are going to be diving into your weaknesses. These are the scary places where all of the hard things in your life your work your career live, and we're going to be talking about why the heck you should know about your weaknesses and what you should do about them. Okay, my name is Scott solinsky. I am a full stack developer from Denver, Colorado and with me as always is West boss. Hey, everybody. - -3 -00:00:51,990 --> 00:00:52,950 -How you doing? Wes? - -4 -00:00:52,950 --> 00:01:05,900 -Wes Bos: I'm doing pretty good. Excited to get a recording here with this. This one is going to be going live. What? The 27th? Yes, we're recording this way ahead of time. So congratulations. Maybe if you have your baby by now. - -5 -00:01:05,940 --> 00:01:15,810 -Scott Tolinski: I think there's like zero percent chance that my baby will not be here by this by this time. I guess. So. Yeah. About that graduate. Yeah, thank - -6 -00:01:15,810 --> 00:01:16,860 -Unknown: you little one. - -7 -00:01:18,420 --> 00:03:47,580 -Scott Tolinski: That's wild. This episode is sponsored by Log Rocket. Now Log Rocket is one of our longtime sponsors, here at syntax. And Log Rocket is a really, really cool service. Those of you who who use a system and a bug hits, you know that it's often mysterious. Even if you have the full error log of what happened, right, you're you're tracking your errors, you're seeing these errors come in or worse, you don't have any error tracking system at all. And your users are reporting a problem. You know, just how tough that can be to solve one of your issues, you can spend absolute hours just trying to figure out what the heck the user even did to find themselves in the predicament that they did. Now Log Rocket Is this one of those special services that really makes your life easier and so many sort of ways. So check out Log Rocket at Log rocket.com. forward slash syntax in what Log Rocket does is it gives you a video replay along with full console, you get access to the DOM, you can see everything that happened when the user hit their error. This is so important because well, like I said, there's so many times you're just left in the dark. So again, check out Log Rocket at Log rocket.com, you'll want to see their session replay. This thing is really super cool. It's one of my favorite services, that sponsors syntax. And I love and use this service myself. So let's get into it talking all about weaknesses. Now, I think the first thing I wanted to start off with was really like why why should you care about your weaknesses? So many people are like, why don't I don't think about the things that are difficult are the things that I'm not good at. And I just work on the things that I'm good at. And eventually I'll be a superhuman at those things. But I think the things that we avoid are the things that we're afraid or bad of or bad at. But if we constantly avoid those things, do you end up becoming lopsided in your skills as a human or a person. And maybe you just progress slowly or not even at all right? You just end up, you just end up stuck in these places where you're not you're not advancing forward. So I really think it's important to shine light on these things that you're scared of, so that you can approach them, you can improve them, and your life will get better. It's not just that you know what you're bad at, but you also have to have the want to change it. Because if you don't want to change these things that you're bad at, you're never gonna make any progress there. So you always want to look at these things that are are tough in your life is 38 inches, man. - -8 -00:03:48,030 --> 00:03:50,430 -Unknown: week, week week. - -9 -00:03:51,570 --> 00:03:52,290 -My God. - -10 -00:03:53,730 --> 00:04:01,800 -Wes Bos: Sorry, I was you said weaknesses. Like we have to get the soundboard out for this one. So I was trying to hook it up. That's why I've been so quiet. - -11 -00:04:04,680 --> 00:04:05,700 -Scott Tolinski: Oh, my weak, - -12 -00:04:05,730 --> 00:04:10,590 -Wes Bos: weak, weak weak, knowing your weaknesses. Sorry, I've like cut you off. Or you say, Oh, - -13 -00:04:10,590 --> 00:04:15,480 -Scott Tolinski: no, no, no, that's great. Then not like it was a serious topic or anything? No, - -14 -00:04:15,570 --> 00:04:16,230 -Unknown: no, but - -15 -00:04:16,380 --> 00:05:02,730 -Scott Tolinski: addressing the things that you aren't good at in your job or in your life are going to make your life so much better. And again, the last point I want to have before we get into some of the things that you want to dive into is don't optimize the things that don't matter. And this is an important thing because Sure, you might be a really good JS dev in your bad CSS Dev and maybe becoming a good CSS dev will help your life. But will becoming a better Python dev really help your life. I don't know, depends. Are you looking for a career change in Python? Sure. If so, but if you aren't planning on using those skills, don't optimize that thing. Just because you're bad at it. I'm bad at playing basketball, but I'm not going to go out and start shooting jumpers every day because it's truly not Important my life, I'm absolutely terrible at it. - -16 -00:05:03,320 --> 00:06:20,460 -Wes Bos: Yeah, I also have one more thing to add about this is that my wife and I talked about this quite a bit, because I'm very much of the personality type where I think I can figure it out I can, I can tackle anything. And like, it's can't be that hard. And often I run into people who think that they're pre programmed to absolutely suck at absolutely everything or suck at this one thing. And I think the biggest one that I see that always drives me nuts is that people say I suck at math more like I would never be able to figure that out. And I think that attitude is very is such a terrible attitude to have towards anything you see in in web development a lot, I suck at JavaScript, or I suck at designing things, or I hate CSS. And it's like, Ah, it's probably because you haven't actually, you do have a weakness there. But I bet you can get a lot better if you were to actually try at it. And that attitude of saying, we're actively trying to not teach in our girls to basically say, like, Oh, yeah, you might be terrible at these, this one thing, but don't write yourself off as someone who's no good at this one thing for the rest of your life. Because like I bet if if it's worth learning, like it's probably worth getting good at math. So probably, it's something that you should spend your time getting better at. Yeah, I - -17 -00:06:20,460 --> 00:08:21,270 -Scott Tolinski: think oftentimes, people who say that, it's not that they aren't good at it, it's that they maybe aren't pre disposed to have it come easy to them. So therefore, you have to say, Okay, well, it's hard, therefore, I'm not going to look at it, I'm going to sweep it under the rug. And just using that like sort of defeatist attitude, like, I'm not good at this, I can't do this, I won't do that kind of thing that sets you up for not ever doing it. Like, I think, I'm not gonna say I could get into the NBA, but I could get better at basketball. If I wanted to go practice basketball, I'm not predisposed to be good at it. But if I were to get practice, I could become better than I am. So again, a lot of it's about the time and energy putting into these things. And I think it's important to know which things in your life are actually important that you should be putting time and energy to that you're absolutely neglecting. Because I can think of a whole ton of things for myself all the time. And just by shining light and wanting to change those things, it moves you forward in life. So I wanted to talk a little bit about this first as a dev, then as maybe an employee or worker or someone at a company, and then also is just as general as like a human, what kind of things should you be examining in your life? So I think as a dev, I think what aspects of languages are you not good at JavaScript itself is a huge, huge, huge language concept. There's so much to learn with JavaScript, what aspects of JavaScript are afraid? Like? Are you afraid of what what are scary to you? What aspects Could you be better at that will help you I mean, if you're a JS Dev, typically, I think learning a lot about different things, it's going to help you out no matter what. So if you're here in JavaScript, I would think that you want to look at the stuff that is scary to you, and what things you want to dive in and build something with just build a project with get comfortable with it and approach it in a way that's like, Listen, I know I'm not good at this right now. But I can be good at this. So what aspects of what languages are you not good at? And how can you make yourself better at those? - -18 -00:08:21,810 --> 00:09:38,130 -Wes Bos: Yeah, this is totally something that I've run into in the last maybe six months or so is two things, I don't really understand a whole lot about our music. I don't understand how music works, how notes work, or anything like that. And therefore, when I was trying to do audio visual as a visualization, it was really hard because it didn't understand what by quad meant or what filters or like, understanding, like wavelength and things like that, like what, what do those things mean? They mean nothing to me, I could have written that off and be like, yeah, I'm not a music person. It's just doesn't, I'm terrible at it. And I could never learn an instrument now as a kid, or I could be like, Ah, you know, I could probably probably at least understand how this stuff works. So I sort of dug into that. Same with the the video stuff. And I don't I'm not an expert by far. But I did learn enough to make an audio visualization thing. I do understand what some of these these terms are now. And I feel like it's just made me a more well rounded JavaScript developer on the whole, which is, I think, the whole point of these things. Don't shy away from it that I think that's the whole point you're trying to get across here. Scott, is that like, Don't shy away from things, because you're not good at it. Because if we're probably make you overall better to Dev. - -19 -00:09:38,220 --> 00:12:40,950 -Scott Tolinski: Yeah, absolutely. And I think even like you'll become a more well rounded human being. Now I think that's like a trait that I often see in people that I really am impressed by and admire, people that I like to be around. They're often the type of people who are curious in that they don't limit themselves. For instance, I have a friend Who was pretty ignorant about just health and fitness and everything, he wasn't in bad health, he was in fine health. He knew about nutrition and whatever. But he learned about lifting and how lifting could help him out. And then now he read starting strength, he read some of these other books. And now the guy is putting up lifting numbers. And he's only been doing it for like a year and a half. But it's like, instead of just being like, Okay, well, personal fitness scares me, I'm just going to ignore it. He dove in, he read some books. And now all of a sudden, he, he knows all the proper forms, and he's doing all the lifts. And he's doing all of the the difficult compound lifts and all this stuff. It's just about being able to be creative and putting in that time and energy. One thing I see a lot in the dev community that really kind of kind of makes me upset, to be honest, because at the end of the day, it really comes down to what I would assume is is somewhat insecurity, right? Like, what aspects? Or what skills and languages are you bad at? And if you're bad at those skills and languages, does that translate into you being aggressive towards people who are good at those languages? For instance, you see a lot of people who are bad at JavaScript lashing out a JavaScript developer saying, like, all you're shipping this huge bundle, and you're using JavaScript for all this stuff that you don't need to be using JavaScript for. But at the end of the day, they don't, I don't know, if they don't know about code splitting, and server side rendering, and all these things that you could get around a lot of those JS concerns. I mean, there's the answers for a lot of this stuff. But those people are going to lash out, because chances are, they're gonna say, Well, my, my skills are good, I'm good at this stuff. Therefore, they must be, you know, unnecessary with the things that they're doing. And it goes both ways. There's definitely people who are bad at CSS saying that the only way to write CSS is to not write CSS at all, it you know, I mean, there's just so many like sides to this argument here. And at the end of the day, I think it all comes down to insecurity in your own skills, or maybe something that you're not good at, or taking the time to learn. And that might be a tough truth. But I honestly think that you need to dive into both things you need to understand fully before you're criticizing or anything like that, and just just take a step back, because oftentimes, the the boundaries are just drawn by, I wouldn't necessarily just say straight up ignorance, but maybe like insecurity surrounding something that you're afraid of, or something that's difficult for you. And is that leading for you to take a hard stance that's going to limit your career in some sort of way. I just think that's a very important thing to realize what languages Could you be good at that could be useful in your career that you're neglecting? Because you're potentially afraid of failing at them? - -20 -00:12:41,370 --> 00:13:21,270 -Wes Bos: Yeah, there was a Reddit thread the other day on our web dev, where someone basically says, like, I can't find it right now. But essentially, it was saying like, hey, all new developers, like cool it with knocking absolutely everything. I see this all the time, people are six months into something learning web dev a year into it, they they're starting to cut their teeth in something and they love their stack. And then immediately they start in bash, whatever it is that they have found hard. And I think that a lot of people think that it makes them look smart, and opinionated, and really good at what they're doing. But it just makes you look like a bit of an a hole - -21 -00:13:21,330 --> 00:13:22,230 -Scott Tolinski: in there. - -22 -00:13:22,710 --> 00:13:43,050 -Wes Bos: Yeah, it totally shows how insecure you are with your job. The thing basically like, oh, that sucks. That's the worst way to approach it. I would I would die if I had to work on that. And it doesn't make you look like a good developer. It just shows your insecurity and how you're probably scared of ever having to tackle that type of specific work should ever come your way. - -23 -00:13:43,199 --> 00:16:37,920 -Scott Tolinski: Yeah, I feel like that way is a lot with people trashing things. You know, it's like, I mean, even between frameworks, right? The view and react stuff, people trashing either framework doesn't really matter. They're both excellent. They both allow you to do great things like well, why why? If you were confident in your choice of what you're working on, why would you need to trash Anything else? So another thing I want to touch on as, as an employer or employee, he also is just like a worker and he sort of place like, what kind of things are you bad at your job? Like, I remember going in the nine to five, you just show up, you do your thing you leave, and you never sort of evaluate what you're doing, or could be doing better, unless you're maybe getting a performance review. And honestly, I don't ever remember taking performance reviews very seriously. Not because I was not inclined to perform well, but because I thought I was performing well. I mean, you know, I always had good performance reviews. So I always felt like I was doing fine. So therefore were really wasn't something that I thought about. But how do you communicate with your employers? Do you feel like you really are employees, your fellow coworkers? Do you feel like you reply to emails fast enough? Are you clear? Are you friendly? Are your goals aligned with the company's like, do you actually care about the things you're doing right now? If you're a company selling widgets, are you all in on selling those widgets? Or if your company's an agency? Are you all in on making quality work? Or are you just showing up and writing code and then checking out because honestly, you know, I understand showing up and checking out, but you work for some place and at some place to do something greater than just, you know, slinging code. So you want to make sure that you're excited about what you're doing, and how you're doing it, your code, and everything will be better because of it. Are you fast enough with your work? I've worked with a lot of developers who are slow, slow, slow. And I'm not advocating being like fast and breaking things. But you know, sometimes it doesn't take four months to do a site, it takes a couple weeks to do a site if you do it really, you know, focused? And are you providing that that speed that you're capable of? are you providing value to your coworkers? Are you teaching things that you you know, and that other people at your work may not know? Are you maybe potentially holding little mini workshops or things like that? What are you what are you providing for the people around you? Who do people want to work with you? I've had a lot of co workers that, you know, project managers and people would say, I want to work with Scott, because I know Scott's gonna get it done fast. I know he's gonna get it done, right? He's gonna communicate, he's gonna do do people want to be on your team? Or are you the last picked? And I think that is something that is important to constantly sort of evaluate all of these things. Add more, there's probably a billion more of these things. But as an employee, could you be doing a better job? What are you bad at? What are your weaknesses? - -24 -00:16:38,580 --> 00:16:41,010 -Wes Bos: Hell, yes. tasty treats. - -25 -00:16:41,340 --> 00:16:42,480 -Scott Tolinski: Those are some tasty treats. - -26 -00:16:43,920 --> 00:16:44,670 -Unknown: Exactly. - -27 -00:16:45,240 --> 00:16:47,940 -Scott Tolinski: Exactly. Exactly. shady. - -28 -00:16:50,160 --> 00:16:59,790 -Wes Bos: Awesome. Last section we have here is as a human. So how is knowing your weaknesses as a human in general? helpful? Yeah. - -29 -00:16:59,790 --> 00:17:48,900 -Scott Tolinski: I mean, in general, there's, there's like, everyone's in different stages of their life. So some of these things are going to be different. But like, in general, how do you treat people? Even like, even like when you're driving? Like, are you driving? Like if you drive, right? Are you an aggressive angry driver? For no reason? Yeah. When you're at the store, you're right. Are you? Are you letting people jump in front of you and allowing you treating people well? Are you tiptoeing? Are you just being like a generally good person? I honestly think that like treating people well, and just in general, being a good human being to other people is just such a way to enrich your life in different ways. Yeah. Yeah, I agree. Yeah. And it's, it's, it's an easy thing, but it's also an easy thing to lose track of, especially when you're frustrated or like things aren't going well. You can be turned into a grumpy, grumpy - -30 -00:17:49,470 --> 00:17:50,010 -Unknown: Gus. - -31 -00:17:50,060 --> 00:18:02,190 -Scott Tolinski: Yeah, I was gonna say gasp I was trying to think of a gender neutral gender or gender neutral or a woman's G. Okay, Genevieve, Genevieve. One. Yeah, yeah, grumpy Jovi. - -32 -00:18:02,370 --> 00:18:18,210 -Wes Bos: Well, hold on, there's got to be like a general neutral that we can just use for gender neutral Gump, because there's not a lot of gene names. I know Gabby Gregory, crude. Gertrude and Gabriella tweet asked if you know what a grumpy gender neutral person is, - -33 -00:18:18,270 --> 00:19:16,890 -Scott Tolinski: yes, I'm interested. But again, it's, yeah, it's just too easy to be grumpy when you cannot be grumpy. If you just put that energy and focus into it. Are you giving your time and energy where it needs to be given? Like, for instance, are you playing with your phone and watching the TV? When your child is saying play with me? Right? Are you giving your full attention to things? That's a big one that I think people often times they veer into not giving full attention to the thing they're doing? They're easily distracted by the stuff around them? And is that is that something that's a weakness in your life? Look for these things that you're neglecting? Like? Who are what are you neglecting in your life? And can you be doing a better job there? And will it make your life better? So this is something that has really come up since the whole konmari thing. But do you and Kate like take up time to assess your your living space and be like, Alright, this room, I'm just not loving this room like, - -34 -00:19:17,600 --> 00:19:57,390 -Wes Bos: Oh, yeah, yeah, kids always constantly re evaluating where it's at. And I recently did it in my garage or garage was a disaster of just stuff piled everywhere. And I just thought, like, how can I make this space better, because it's a huge frustration. In our lives, we need to find something specifically when I want to find a tool or something like that, because I have like all types of different tools. I have like little electronics tools. And then I have bike tools. And then I have like carpentry tools, and they're all just piled all together. I could never find anything. So at different toolboxes now for that specific thing. And we're always constantly re evaluating how to make the space better. So it gives us less grief. - -35 -00:19:57,720 --> 00:21:18,150 -Scott Tolinski: Yeah, yeah, I know. And we We sort of had the dream of doing a pop top for our house. And then we got some quotes lately, and they were way higher than we were expecting. So we've abandoned the whole popped up idea. And we're like, Okay, so now that we're committed to not remodeling, and just keeping the house as it is, like, what are the things that we're going to be wanting to spend money on to like really improve our lives? So like, what are these things in this living space that like, daily make our lives worse. And so like one of those is our backyard isn't really that cozy. Our backyard is like nice, but it's like a lot of sun. And we don't want to hang out there that much. So we're working on planting some trees, we're getting a lot of shade, we just got bought a big old shade for the backyard. And we're gonna get some new furniture, hang up some of those, you know, tree, those little like lights, solar powered lights to make it all just nice and cozy, and maybe do a fire pit or something. But we're just looking to make that space feel better. So instead of hanging out on the couch watching TV, we can go hang out in the backyard and read a book or watch something on the tablet or something rather than just hanging on the side all the time. So I think it's important to to evaluate these things in life instead of just living with them, right. It's like living with a cluttered desk. I know this desk should be better. And when you actually clean it off, it feels really good. So - -36 -00:21:18,510 --> 00:21:28,920 -Wes Bos: that's what I need to do right now. Like, every time right now, every time I clean my desk I feel so much better about just like what it is I'm working on. That's what I'm doing right after me too. Because I - -37 -00:21:28,920 --> 00:21:32,790 -Scott Tolinski: got a I got a Bobo's wrapper here. I got a - -38 -00:21:32,970 --> 00:21:34,140 -Wes Bos: What's up, Bobo? - -39 -00:21:35,060 --> 00:21:41,070 -Scott Tolinski: It's a Colorado. These oat bars. I see it. They're made in a colder tree. Yeah, there - -40 -00:21:41,070 --> 00:21:42,150 -Unknown: it Yeah, - -41 -00:21:42,210 --> 00:22:09,990 -Scott Tolinski: they're lovely vegan, gluten free, non GMO. They're all good, good stuff. But yeah, that's it. I mean, just think about that. Think about things in your life that you just live with every single day that you shouldn't be living with the way they are. Whether that is in code in your job, or in your life in general, and fix those things up. because trust me, it makes a huge difference. And you'll you'll thank yourself in the long run. That's all I got today. Do you have anything else Wes, I - -42 -00:22:09,990 --> 00:22:14,100 -Wes Bos: think that's it. Thanks for all the motivation. Going to go clean my desk now. - -43 -00:22:14,220 --> 00:22:18,330 -Scott Tolinski: I'm gonna go clean my desk as well. And if you're out there, clean your desk. - -44 -00:22:20,610 --> 00:22:24,900 -Wes Bos: Cool. Thanks for tuning in. We'll see you on Wednesday booth is - -45 -00:22:26,880 --> 00:22:29,070 -Scott Tolinski: head on over to syntax.fm for - -46 -00:22:29,070 --> 00:22:30,360 -Unknown: a full archive of - -47 -00:22:30,360 --> 00:22:36,660 -all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax148.srt b/transcripts/Syntax148.srt deleted file mode 100644 index df485cb75..000000000 --- a/transcripts/Syntax148.srt +++ /dev/null @@ -1,336 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,790 -Announcer: You're listening to syntax - -2 -00:00:02,819 --> 00:00:09,000 -Unknown: the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski - -3 -00:00:09,000 --> 00:00:10,530 -and West boss. - -4 -00:00:10,559 --> 00:00:16,110 -Wes Bos: Welcome to syntax, the podcast with the tastiest web development treats - -5 -00:00:16,529 --> 00:00:18,230 -Scott Tolinski: around. - -6 -00:00:18,389 --> 00:01:02,070 -Wes Bos: Wow. Today is a potluck where we answer your questions. We've got questions about how big is too big for state in memory? How much do I need to know to apply to us? dev job skeletons I'm a big fan of this like new like trend of skeleton wireframes well, things are loading CSS read sets, all kinds of cool stuff coming right at you. today. We are sponsored by Sentry and Sanity Sentry is going to do all of your error and exception tracking and Sanity is going to be your headless CMS. They got some new stuff that's called Sanity create. We're gonna talk about partway through this episode. With me today is Scott to Lynskey. Hey, Dan today, Scott. - -7 -00:01:02,430 --> 00:02:13,770 -Scott Tolinski: doing really good. Well, it's beautiful out here. And I'm taking so much time to make our backyard feel cozier. Right? I feel like in Denver here, the sun is pretty intense when it when it's out, which is, you know, 300 plus days a year. So we get a lot of sun in my backyard, in particular, especially in the first half of the day is just full, full, full sun. And it's really difficult to to really just hang out back there because it can get really hot. So we've been trying to do a couple of things and we're wanting to make our backyard much more cozy. So I planted some aspen trees. I got a giant 10 foot offset umbrella. We're, we're messing it up a bit, gusting it up. Is that a thing? Either way? I'm guessing it yep. either, right. We've been trying to make our backyard so much more cozy. And it's just been so much fun. I know, like we talked about working away from the computer. But to be honest, like I spent my entire weekend working, you know, shoveling and doing all that stuff in the backyard. And that feels awesome. It's so awesome to not even look at screens for that long. And that's really a challenge for me. So I'm feeling nice and refreshed coming in this week ready to get this potluck going? Awesome. Yeah, we - -8 -00:02:13,770 --> 00:02:42,900 -Wes Bos: spent the weekend just outside as well. I got a new table for my barbecue. I have a Big Green Egg smoker. Oh, yeah. So that I had bought it like last in the fall. And it was just too cold to ever put it in. It's super heavy. So you got to get someone to help you. And we've got that all set up. And I bought a piece of granite for the top. And you can go to like the Restore. You have the Restore down there. It's like Habitat for Humanity through people donate like, yeah, building products that are still good. So we bought a piece of granite and just cut into the table and slapped it in. It - -9 -00:02:42,900 --> 00:02:48,000 -Scott Tolinski: looks awesome. Nice. Yeah. Restore is the one with the refresh icon as the logo right? - -10 -00:02:48,870 --> 00:02:54,900 -Wes Bos: Really store. When I see. I'm not in Canada, it's just a Habitat for Humanity logo. - -11 -00:02:55,020 --> 00:02:59,940 -Scott Tolinski: Oh, well, it's like a house with two arrows circling around it like oh, - -12 -00:03:00,150 --> 00:03:03,960 -Wes Bos: I think that is I think that's what it is. Yeah, yeah, it is. - -13 -00:03:04,440 --> 00:04:21,830 -Scott Tolinski: Cool. So let's get into some of these questions here. This is the potluck where every single person brought some really, really tasty questions. I'm looking at how long some of these questions are. They're like paragraphs in here. So these ones, these are going to be some funny questions. And funny, but I mean, funny long questions. This first one is from Johnny, three hats. I don't believe that's your name. I am not easily fooled. I am easily fooled. And we have been fooled. Often Johnny three hats. If that's your name, then please tweet at me. So many people, they try to try to get one by us. So I don't know if this one's getting by me. But if you are, if you are real, I reserve that. Hey, Western Scott, how big is too big for state, I have an object of around 1000 items which will be used in a search box on the front end of my site. But the list of items won't be updated very often. What is the most diff mode is the most efficient way to store these items and deliver them to your browser? would you use state a JSON object MongoDB document in some other way that I haven't thought of this is for a side project? Well, maximum efficiency isn't vital. I'm also keen to learn real world best practices. Thanks so much for the left heart emoji. Thank you, Johnny three hats up. What do you think about this one? How much is too much? - -14 -00:04:22,050 --> 00:06:02,070 -Wes Bos: I think 1000 items depends on what's in each item. But yes, it's likely likely just an object with like a description and a title on maybe an image and like your standard everyday table object that you might you might run across. I don't think 1000 is too much to hold in memory. I think the thing that you need to know about having things in your JavaScript is first does it increase the load time of your JavaScript bundle? Chances are 1000 items in an array is probably going to significantly increase your JavaScript. So I would probably load that in on demand. Once the page has actually loaded itself. You can fire off for a To do that, then I think when someone starts typing, there's a question of should it be in memory already, again, is is lazy loading that going to be big, I think if it's anything over, I don't know, like 4050 K, maybe, or something like that, you probably should build some sort of back end that will just return the results to you. If it's much smaller than that, I would just keep them all in memory. There is like a memory tab in Chrome that you can take a snapshot. And I don't really know how to use this all that much. But if there were a problem, you would see that the the size of it would be like the snapshot is specifically larger than other websites. And then you know, you sort of have a problem. Other questions? would you use state? If it's just an object, then yeah, you can put it into state a JSON object, MongoDB document or some other way I haven't heard of, again, it really depends on how big it is. If it's if it's just a title, a description and the image, I probably would load all 1000 in at once, and then just just hold them in memory. From there. What would you think to do? Oh, - -15 -00:06:02,399 --> 00:06:38,520 -Scott Tolinski: it's one of those ones I've never done, I would need to test I think that's the only solid way to do it is to test it, push it to the limit, and see where those those limits ended up being. But to be honest, I really don't know. I don't know the answer. I think it's one of those things that you might only be able to figure out through trying something trying a different technique, record your performance and seeing seeing what works best. Yeah, or reach out to somebody who that's their specialty. There are people that work in large amounts of data, maybe even if it's with graphing, or whatever, and reach out to those people that that's their specialty, and see, hey, what's what's your preferred way of storing all of this data here? - -16 -00:06:38,699 --> 00:07:14,310 -Wes Bos: What other people will also do is they'll just stick it in the HTML of the document as that page load? Yes. And then you can just like put it as like window dot underscore, underscore results, and then you can just grab that for the global variable and stick it in. So again, yeah, I think the the key here is, tools over rules. So tools over rule tools over there's no rules here. You got to figure out is it actually big, chances are, if it is just a side project, it's just you using it, maybe it's running locally, you don't really care about load times all that much. You could just stick it in memory. But again, it's better to do stuff that is more real world to - -17 -00:07:14,369 --> 00:09:09,409 -Scott Tolinski: Yeah, definitely. Real World. No rules. Cool. Next question is from Tristan. And the question is, how much do I need to know before I start applying for dev jobs? At at you need to know at at web development, web development, you got to know 50%. css, you got to know 170 percent JavaScript No, apply, just apply. Because in my experience, a job interview is more useful than just an IT potential to get a job a lot of people look at, alright, I'm taking a job interview simply to get a job, when I've never looked at it that way myself personally, especially when you get into dev jobs, where you have to do things like you know, coding challenges, or any of this stuff. I personally look at dev interviews as practice. And I'm talking about practice here. Because it is like one of those things that you need practice of how many things in your life, have you ever been good at? without practice? Like, I don't think very many of them. I there's some things that I you know, the very first time I tried, whoops, I did it, and I'm good at it. But no, most of the time, you need practice. So even if you're not good enough, or you head into a job interview, and you bomb it, that's not a problem. That's that's like experience, that's valuable experience. And and if you you're thinking, how much do I need to know, I don't know, I think you need to know probably the basics in terms of foundational HTML, and CSS and just basic JavaScript. And it really depends on what kind of job you're applying for. Because when I applied and I got my first dev job, I didn't need to know any JavaScript. I didn't know any JavaScript probably got my first dev job. And you know, things have changed a little bit now. But I think you can get a job doing anything as long as you just go for it, apply, go to those job interviews and take that practice. That's that's my stance on this is, don't worry about how much you need to know. Just go in there and be optimistic and try your best and learn something from it. - -18 -00:09:09,599 --> 00:10:35,100 -Wes Bos: Yeah, I agree. I get this question all the time. It's so hard to just quantify something like this. It's just like a sort of a feeling thing. How do I know what I need to know before you definitely are going to be a little bit scared. So like Scott said, maybe try a few interviews and see sort of where you're at. Next question is from Fred Rivette. Do you folks have any opinions on skeleton loaders, and how to best implement them at my day job, we recently implemented skeleton loaders in a way that inherits the parent styles. Example, pop a skeleton line component inside of an h1, and it grows to fill the line height of the h1 would love to know if there's any other best practices of ways that we can improve this and then he links off to a medium article on loading and um, so skeleton loader is where instead of just having like a spinner, show up You try to mimic the look of the content that's going to be populating on the page via boxes. And just like lines of text that haven't loaded and grayed out images, things like that. So that when it does load, the whole page does not totally change. But the content sort of just fills itself on. And I really like this, this look for a lot of websites, I've only ever done it once on one website so far. And for that, what I did is they just created like a skeleton item. And we just show that skeleton item until the items actually get put in. So I don't really have a whole lot else to say here. What about you, Scott, - -19 -00:10:35,100 --> 00:14:09,779 -Scott Tolinski: I think these things there need, I think there was some sort of study that came out, I don't I'm gonna kind of butcher this because I'm going off the cuff here. But I think there was some study that came out that shows, if you show a skeleton screen when the loading time is under a certain amount that it actually the perceived loading time is lower than it would have been without the skeleton screen. However, if you have content that does take a little bit longer to load, there's a there's a threshold there, of Hey, if it's at this point, then scope and screen, perceived loading time is actually faster. If it if it's actually very fast already, then you don't want to use this golden screen, because that will make people feel that your your thing is slower. Go ahead and look that up. I'll look it up too and try to give it in the show notes or something that said, I think skeleton screens are dope for a lot of reasons beyond just their name, which is also dope. I love that they're called skeleton screens. I invokes a little, little skeleton images in my mind. But you know, I love it. I think this idea is really super cool. The websites that utilize it excellently do a really super duper Good job, the ones that don't execute well on it, it can be a little off putting, I love the things where the content sort of fades in from the skeleton screen rather than just like the skeleton screens there. And then it flashes in your content, I would love it if the skeleton screen were to like animate on and then fade into your actual content. Once it's loaded, almost sort of like the techniques that we do with image loading. I think that stuff is really sick, where you have an image that's loaded in a crappier quality or an SVG, and then it fades into the full one once the fallen loaded. I think this kind of thing has a ton of potential, I think skeleton screens are going to become more prominent and more easy to do in terms of best practices. You know what I think it's sort of the Wild Wild West, there's sort of a lot of different solutions to this right now. I've seen some libraries that are just straight up divs with animated gradients and stuff that is pretty pretty darn slick. I'm not quite sure if I was going to be doing this myself on level up tutorials, I might reach to just do everything by hand and try to figure it out. Like they have a skeleton line component, that kind of thing. I might just try to do that all myself to see if there's like some way that makes sense for me. Meanwhile, looking at other people's examples, this one I think is still open to like what the best practices actually are. Because I think there are several different strategies for implementing this. But again, I like skeleton screens. I think it's a really cool strategy. Just be cognizant of when it's making your perceived loading time faster and when it's not. Next question is from Jin Woo, I'm sorry, if I'm pronouncing your first name incorrectly, probably am. Do you think we still need CSS resets? Like normalize and sanitizer? Do I think we need them? Yeah, I think we do I use normalize on my site. And I probably always have, I think there's some newer ones. I just saw something about a newer one the other day, like what it's called. But to be honest, for those of you who don't know, the browser, and browsers for a long time, I've had some baked in default styles, but that's margin, padding, font sizes, all sorts of stuff. And for a long time, CSS reset was the thing to do, where you just dropped in a reset, and it made everything blank, like just totally blank, then people realize, well, the browser defaults are not awful. They're just all over the place. So what we then got was something called normalize, which takes them and makes them normalized so that all of the browser's are using sort of the same starting off points, rather than just a flat blank point. Can I use normalize? I've used it for a long time, I think. Right? I think I probably continue to use it for a long time, just because it's easy to drop in your CSS. But what are your thoughts there? - -20 -00:14:09,960 --> 00:14:56,100 -Wes Bos: it normalizes on version eight. So it's not like something this that was made for e6. And yeah, it's just around, they've dropped support for I think everything below iE 11. Now, and there's really not a whole lot in there. But there's things where sometimes I find myself being like, what is going on here. And then I go, Oh, I didn't have normalizing here. And it's just little issues that is so silly to think about your own like by by default main display block, it does not display block and IE if you just like look through the source code, you can read through it and probably a minute or two, I noticed find these like little weird edge cases where they're from browser browsers are not totally the same. And those are the things that are gonna cause you a whole lot of headaches down the road. So absolutely. You still need them, just pop them in. You don't really have to worry about them past that - -21 -00:14:56,220 --> 00:15:04,200 -Scott Tolinski: word. And next question is from Jamie. Go Billy go bill global, global - -22 -00:15:04,200 --> 00:15:05,279 -Wes Bos: global No, no, - -23 -00:15:05,429 --> 00:20:03,050 -Scott Tolinski: there's no I in the the do go go. Way, pal. Yeah. What? Okay, I'm so sorry, Jamie. I'm so sorry. Scott, can you tell me the story about how you landed and interview for a job in Japan, I am moving to Japan next year and wanted and wondering how that opportunity arose for you. This is actually an interesting, it's not necessarily an interesting story. But it's an interesting sort of anecdote to the importance of just talking to people. I am not an extrovert, I takes me a lot to just go to talk to people. One of my art classes that I was in in college, had a speaker come from the agency, Aqa, they have a they have locations all around the world, Aqa does insanely good work. I love aq A's work. And I was just so impressed. And I knew they had an office in Tokyo. So they came in and talk. This was probably my senior year of college. And I wasn't an AR major. But I went up to the speaker and I said, Hey, I'm a developer, I was a flat, I wanted to be like a flash developer at the time, because I knew that they did a lot of flash. And I just really wanted to work for Aqa to be honest. And so I went up to him, and I said, Hey, you know, I really, I'm looking for any sort of opportunity you got, you know, I'm taking Japanese language. So I can, you know, add to your Tokyo office, I think they have more than one office in Japan, you know, I could go anywhere and work for you. And I would really, like really love to work in Japan if that opportunity came about because I was taking the language. And this guy who's honestly a very high up person at Aqa had no reason to help me whatsoever. I'm just some random kid at a college class that just came up and asked a question. And he was like, Okay, I don't have anything, but I know some agencies in Tokyo. And if you want me to, I can just shoot you some some people's emails right now. And I said, Sure. So I took the emails. And then because that guy's name had a lot of weight behind it, I would email them. And I just said, Hey, so and so told me that you might be looking for an intern here, and I'd be happy to come work for you. And because of that, I got a job interview. And they flew me out. They you know, they flew me out to Japan, they had a guy to take me around for a week, Tokyo and did the interview. And the place was amazing. So that's how I did it. But like, the important thing isn't necessarily like, here's the spot that I went to get a job in Tokyo, the important thing is, is that talk to people like Todd, like, let people know that you're looking for this, you're trying to do this or whatever, just ask people, because if I was just a hair slower on that, I would have never talked to that guy. And I you know, to be honest, I it probably scared the crap out of me before I did it to just even go up to talk to him and say, Hey, do you have anything because he's such a high level guy at the company. But I did it. And I sucked it up. And I got that valuable experience. And I got a job interview. And it was a really cool thing. So again, even if you're introverted, or you have a hard time doing this, just try just really try to go to talk to people, ask them try to try to get that sort of stuff. Because you never know what kind of opportunities will come about, we often just talk about making your intentions known if you're a freelancer, just saying, Hey, I'm looking for clients, blah, blah, blah, it can really, really make a difference. And if you're looking to make a difference in the sort of performance, the error tracking the bugs, all that sort of stuff on your website today, the general health of how your application is functioning, you're gonna want to check out one of our sponsors. Now one of our sponsors, today is century at century die. Have they been a sponsor syntax for a little bit? And let me tell you a little bit about century now century is the bug error tracking service. It works with any of the tools, frameworks, anything that you've ever wanted to use, and it's used by so many customers are so many companies that you know, and love. I mean, it's used by Airbnb, Dropbox, PayPal, Uber, Microsoft, Reddit, ad roll, Prezi doordash. If you were to walk around San Francisco, and look at all of the different billboards, you could say, hey, they use century and hey, they use century, it seems like everybody is using Sentry to track their bugs and for good reason. Because their system makes it really easy to find about errors and exceptions, and allows you to quickly integrate with any of the technologies and tools you know and love. All of the coding platforms, native stuff, Python stuff, PHP stuff, dotnet stuff, Java stuff, JavaScript stuff, anything and then it works with all of the platforms, you know, and love like Slack, GitHub, git lab, Heroku Twilio, just so many Asana, Asana, Asana, Asana, dama. Yeah, got it, right, yeah, Bitbucket, any of this stuff, so check it out, head over to century century.io. Track your errors, bugs and exceptions like a pro. Use the coupon code tasty treat all lowercase all one word and get two months for free. You're gonna love that. So check it out at Sentry dot i o - -24 -00:20:03,240 --> 00:21:27,150 -Wes Bos: next question we have here is from the Dan love yalls podcast actually gave me motivation again to get after it after losing my first dev job. Awesome. I've been listened to it while delivering pizzas. Wow, bringing the treats just like us. That's good. Thanks so much. I look forward to your future tasty treats. My question you guys talk a lot about react in or view but only really mentioned Angular when discussing the big three major players in the jamis framework and never really end up? Do you have any opinion on Angular? I'm not talking about AngularJS, which is what people refer to as, as 1.0. Good or bad? Or is that you're more comfortable have used the other two. And then there's some other stuff. I'm looking into all three. So really, people ask me this all the time, it's probably six times a day I get an Instagram dm about it, like what are your thoughts? On? Which one do you use react? Why? And then I'm about I don't know, it's really just like, we've talked about at some point, I was on Angular 1.0. They, they announced Angular two, but there's this big gap. So I picked up react and I really enjoy it. And I've been on that ever since. So that's not to say that Angular or view is any better or any worse. It's really just all that we do. And that's why we talk about it, because that's what that's what we use. And that's pretty much it. So I wouldn't think that Angular is bad or something like that. It's just not something that we use. - -25 -00:21:27,300 --> 00:22:31,170 -Scott Tolinski: Yeah. And I think part of it, you know, the whole mess of Angular Angular j s the distinction where every, anytime you say one or the other people get sort of riled up about you're saying the wrong one incorrectly, whatever. I think that whole thing just confuses people. And I honestly think that that confusion around version two and version one and whatever. I think that just really hurt Angular as applied. Yeah. And that's personally why I sort of moved away from it, because it just didn't seem like it had an identity that was like as solid now flat, you know, now fast forward to 2019. And the people who stuck around Angular two, and now it's at version eight, or nine or whatever, 15. Yeah, yeah. I think everyone who stuck around and really likes it, they like it for what it is that said, I just, I can't get into it. Now. I I'm loving react. And now with the release of react hooks and suspense, I'm just I'm loving working in react. And to be honest, I really love working in view. And I just don't know if I have the capacity to add in another one. There's - -26 -00:22:31,170 --> 00:22:33,840 -Unknown: no more love to give was gone or left to give. - -27 -00:22:33,930 --> 00:22:59,220 -Scott Tolinski: And even if I did, I think I would go for something that takes a much different approach like spelt or something. Yeah. Which spelt version three wore rubber is really cool. So I'm sorry, angular fans, I it's not that I don't like Angular. It's just that I got no room the fans full. Next up, we have a question from a wX. All of all this, and I'm getting all the hard names. This time. I'm getting all this. - -28 -00:22:59,220 --> 00:23:01,980 -Wes Bos: I think that's right. All this. Yes. Hi. - -29 -00:23:02,280 --> 00:23:02,790 -Unknown: Hi. - -30 -00:23:02,790 --> 00:26:19,110 -Scott Tolinski: Could you talk about naming and structuring files, slash folders in your applications? At the moment, I'm building website with Gatsby, I'm having quite a lot of smaller components that I'm reusing throughout the website, I'm slowly drowning in folders and files with my app to the point where nothing makes any sense. In my website structure. How do you name components folders? Do you follow some sort of path? How do you structure files and web apps? This is a question that comes up all the time, specifically, because the React team for better or for worse, I think it's probably for better, to be honest, does not have like strict hey, here's how you do it. In terms of project structure, where other platforms like rails have been much more like this is the way Yeah, so how do you go about this, I personally have developed my own file system that I absolutely love working in. And to be honest, it's really not that complex. But as long as you have a system that worked for you, having a system is a big deal. Now, I should also say, when you're making your system, things will change. And you should be willing to constantly adjust and adapt your system. It's not really that hard to refactor filenames folder names, project structures, I do it all the time. And I have a big application. So that said, so here's what I do. I do feature folders. Okay, we have the in terms of components, we have our standard components for things that are only used once based on features. For instance, all of the playlist or the series base stuff are in one folder, all of the My Account, my portfolio, or my profile stuff is in another folder. The checkout stuff is in another folder, the admin stuff, the search features, all this stuff. They're in their own feature folders inside of those feature folders, all of my graph qL queries and related components. Next, I have folders for reusable stuff. For instance, if I'm using styled components, which I am, I have an elements folder, which is all my my reusable components, the stuff I could think of as being with my own personal HTML elements, right? The stuff that's reused all the time. Not the stuff that's one off. So anything that's reused, it goes in the elements folder. I also have a Utilities folder. And now utilities is often used for things like my colors, my breakpoints, my icons, my loader, that sort of stuff. I also have a hooks folder, which is a new one for me, where I include all of my hooks. And I have a global state folder, which includes all of my context and state stuff. But other than that, its feature folder. So one of the things I do to make things nice and organized, is because I don't have a ton of stuff in any of these folders. In particular, with the elements, utilities, those things, what I do is I create an index for the folder, the index is an index.js, inside of the folder that then imports and exports everything from the index. That way, I have all of my elements essentially collected. And instead of having to import a layout from UI elements, layouts, I can then import both my layout as well as my typography from imports, UI elements. So creating an index at the root of your folder for some of these things is a really good idea, especially the stuff that's highly reused, or in other situations, maybe less of a good idea for the things that are one off used are larger components or things like that. So I do straight up feature folders. And then I do specific folders, like what I just mentioned. - -31 -00:26:19,440 --> 00:26:57,930 -Wes Bos: Yeah, I'm pretty much very, very similar way, with the exception of not using index dot j s, I just name it whatever I want to name the component in that I'll usually in that folder also include my styles and the tests for that specific component. But for different apps, I have different approaches. And the main importance is just keep it somewhat simple at first. And then as you find yourself needing to go more complex then absolutely go more complex as I've certainly been in very simple applications where people have 4000 folders, and it's impossible to just move around it and to get familiar with the application, just like Scott says refactor as you need it into a more complex folder structure - -32 -00:26:57,990 --> 00:27:22,680 -Scott Tolinski: word. So complex folder structures. You don't have to deal with complex data structures. I don't know if that's a good transition. But one of our sponsors here at syntax has been a longtime sponsor, which is Sanity, it makes your working with your back end data and having your data as the service just totally effortless. And they have some sweet new features that Wes is going to talk about. - -33 -00:27:22,710 --> 00:28:54,240 -Wes Bos: Yeah, so sanity.io is a headless CMS. So it's sort of a bring your own front end. So think about something like next or next or Gatsby, and you want to pipe in some data to the back end, sign up for Sanity. And that will be your back end. One kind of cool thing about Sanity is that you can actually bring, you can bring your own react components to their back end. So that's kind of like they host it for you. But you still have control over what the UI looks like when you're uploading and modifying your data. They've just rolled out this new thing called Sanity create, which is really cool. Sort of the tagline here is have a Sanity powered site up and running in minutes. So if you want to try out Sanity, you have to sort of do two things, you have to pick a platform, because you need like something like Gatsby or next or Knox, and then you need like a somewhere to host it and something like Netlify. So what they've done is they've created sort of like one click installs for something like this. And you can get a portfolio running with Gatsby, or a tech event running with next or a landing page with knucks, you can get all these different examples up and running really quickly. And then you have all of the pieces in place between hooking up your get hooking up your Netlify having the actual code that needs to be run in the the back end on Sanity. So that's just a great way to sort of see the power. And if you just like wondering like I've never built a jam stack website. try this out. Go to sanity.io forward slash create and try it out. I think you're going to be pretty pretty impressed. Thanks so much to Sanity for sponsoring. Pretty, pretty, pretty, pretty impressed. - -34 -00:28:54,360 --> 00:28:58,530 -Scott Tolinski: Yep, yep. Yep. Got a little Larry David. David going on. - -35 -00:28:59,490 --> 00:32:57,860 -Wes Bos: Two more questions here. This one's from Brent. Kay, that was a really easy one for me. Hi, Wes. And Scott, I get all the hard ones. Yeah, you do. I have a question about back end Tech's specifically No. Do you think node is almost too powerful mo to handle some of the simpler tasks, a site that just needs a contact form for, for instance? Or am I missing some very simple configuration, it seems like other languages, such as PHP might be better suited for the simple task and node is really meant for larger scale application. Also, I am starting to think because as I have looked into hosting for Node JS applications, some hosting companies don't host Node JS on their basic plans. Hostgator is another. And so I'm about halfway through this question, hang on. And so you would need to upgrade to a dedicated server just to host a node Express server side code that simply sends a POST request to an email. I guess my question really boils down to as a freelancer, I understand that I need to have my hands in a lot of different tech stacks. But should I really just dive into PHP or maybe something else to handle simpler features like this. Thanks, guys keep doing what you're doing because it's fantastic. Whoo. All right, a lot here is node meant for for much more complex things versus something like PHP? No, I don't think so they can be all made for small, small things, or much larger things. I think the sort of the frustration that's coming along here is sort of two part first, PHP is just really easy, you can just write a file and hit it and handle all the logic in some in one file with node you need to have like, you need a server to be up and running, you need to start that server and listen on ports, then you need some sort of routing, and all of that stuff, starting the server route, and all the assessors comes for free with with PHP, which is why it's so easy to sort of get up and running. So there is that sort of like an I think that's sort of where serverless functions are going to really shine where you can just write a single j j s file and deploy that as a serverless function in the serverless function will take care of routing and giving you that request payload. And then you can simply just like, do what you need to do send an email, log the data, put in a database, and then send a response back to that specific user. So I think that that's one spot there. I think also part of the frustration is not having a good approach to hosting node applications. Because you think like, okay, I want to host this thing, I can't put it, I can't just like throw a folder up to my GoDaddy and it works. So like, obviously, there's, there's things like, now that sh or I know, Netlify is getting into serverless functions, there's lots of people trying to like make that area easier right now. And so you're not alone in thinking that this is too hard, it is absolutely too hard. But what I do is I have a just a Digital Ocean server, and then I use something called pm two. And what this will do is allow you to run multiple processes on your actual server at once. And then you can run a very simple, this is probably where it's very simple. I'm doing air quotes here, you also have to run what's called an nginx config on there that will proxy it. So you can do like subdomains or like Ford slash app one and Ford slash app two. And for that way, you can get away with $5 Digital Ocean all day long. And I think that's probably even cheaper than doing a hostgator. Yeah, like that. So it definitely does require a little bit more setup. There's people trying to solve that right now. And getting it easier. Like we used to have this thing called node jitsu, which was amazing. And no jitsu was really, really good. And they got bought by godaddy. And they did nothing with it, which I was very frustrated to see. Because I absolutely love No jitsu. It's sort of what now is try keep thinking next. It's sort of what now is trying to do right now, which is pretty cool. So I say Hold tight, definitely worth still learning node, given those caveats of there is a little bit more overhead than just a PHP script. But also that if it's just a simple contact form, and you feel like doing any PHP, absolutely nothing wrong with that, aside from the fact that you'll probably get spammed to hell on almost anything that doesn't have like a CAPTCHA or something installed on it. Yeah, - -36 -00:32:57,860 --> 00:33:42,110 -Scott Tolinski: I mean, I agree. And I think this is a good opportunity. If you wanted to do note for this, this is like the perfect use case for a serverless function. Just because it's so lightweight and easy to get going. I've recently used the functions on Netlify and really liked it. So if you're on Netlify, that's an option. If you're not then, you know, serverless functions elsewhere is something to look into again. I mean, I think you really covered all of the bases there. So yeah, no, I think that I think you nailed it. Next question is from San Malik. I think I got it. Yeah. What do you guys think about spelt? Before everything goes well as to why it was felt to be the future of programming. So okay, for those of you who don't know about spelt, let me tell you a little bit about spelt. - -37 -00:33:42,509 --> 00:33:48,000 -Wes Bos: I've never, never used felt myself before. It's called a cybernetically enhanced web app very which - -38 -00:33:48,000 --> 00:33:58,890 -Scott Tolinski: is which is funny because like, people were like, ripping on that, that hat like I just I That's funny. It's like cybernetically enhanced, or those things from Terminator. Like, it's funny. I think I don't - -39 -00:33:58,890 --> 00:34:00,600 -Wes Bos: I don't understand it. - -40 -00:34:00,749 --> 00:37:07,710 -Scott Tolinski: Yeah, I think it's from Terminator. It's not didn't shut me out about it. But so Okay, so what is felt was felt is a it's not necessarily a new, it's new ish, JavaScript framework eight came out with version three last month, by the time you're listening to this. And what's interesting or different about spelt was felt disappears. They used to call it the magically disappearing framework, because what happens is you build it your your application in spelt. And then you don't actually ship a library with your application, you just ship code. So it compiles down to nothing. Essentially, it compiles down to JavaScript. So that's the reason why you would want to learn svelte because hey, you don't have to ship react, you don't have to ship view or whatever. And one of the cool things that happened recently in spelt, when they went to version three is that they really changed a lot about how you're working with data that that sort of just the general data binding app. specs of things. And to be honest, remember the good old days of Angular one where he just threw everything on scope. And it all felt really fun and interesting when you're first learning it. Yeah, you know, to be honest, I think the smell like can really, with the new way it's doing things can really invoke some of those feelings. Because the modern way of aurvey version three way of writing spelt is pretty darn slick. And to be honest, I think it's really cool the way they handle state. Basically, if you have a count variable, you could define it in your script tags are like you do in view, you say, let count equal to zero, you have a function called handle click that just does count plus equals to one. And then guess what in your HTML or your thoughts templating language code, you could just output count. And then when you click on the thing, you run the handle, click and you don't have to reference. You don't have to bind, you don't have to create state, you just got a variable, and that variable is scoped to that component. It's pretty cool. And it's a it's a modern JavaScript framework. And let me tell you, as felt version three is sort of blowing up because I think people really, really like it. It's truly reactive, as they say, no virtual Dom write less code. Now the part of this question that I don't necessarily get is the part that's talking about, whereas before everything goes, wesam will spell be the feature, I don't think Wesson fits in here at all, I don't think it really, really matters or has anything to do with this. smelt is just a another approach for a JavaScript front end framework. And I think spelt is taking a different enough approach that it's definitely worth your time. Because some of these things are all just maybe like a different syntax do the same thing. I honestly think spelt has enough original ideas, that it feels like a very different thing, at the same time, feels very accessible and has a lot of upsides to it. So I might be doing a spell tutorial course I'm still looking into doing that. It was actually when I had previously started to record at some point first felt version two before I found out about the timeline for version three. So another version three is out here. If you are interested in that, let me know could be something we could put together again, it looks really super cool. I think easy is the right word easy, effortless, the bundle that you're going to ship is going to be smaller. I think it's really cool. - -41 -00:37:07,830 --> 00:37:14,670 -Wes Bos: That's really cool. I want to check out swell at some point I've been hearing a lot about it. The code examples look kind of vewy - -42 -00:37:15,060 --> 00:37:21,600 -Scott Tolinski: Yeah, it's like it's like vewy it's like Angular one II it's kind of effortless looking at it looks nice. Neat. - -43 -00:37:22,110 --> 00:37:40,170 -Wes Bos: Neat. Next question we have is from Noel Garcia what smartphones and laptops Do you use for work specific model and why this is going to be a bit boring for me I have the iPhone 10 x Xs max plus touring edition Eddie Bauer interior - -44 -00:37:40,200 --> 00:37:51,780 -Scott Tolinski: did not do that cuz I don't know iPhone stuff. So I was like, Okay, and then when you got to the the Turing edition, I was like, oh, okay, he's joking, but like I wasn't sure how many of those were actually joking. - -45 -00:37:52,110 --> 00:38:32,520 -Wes Bos: Yeah, no, I like it. It's as big as phone you can get takes awesome photos. And it works well. And then I have I don't know what kind of laptop I have. I have the MacBook that will be crippled if you get a chrome in it. So I don't know I bought it like a year and a half ago and I maxed it out. It's super fast, super stable. I really like it except for the actual hardware itself. But I spend probably 98% of my days having it just docked as well. I've never been one to like have a desktop and then have like a laptop and then try to sync stuff between those I just like having absolutely everything on one computer huge hard drive having everything on there. And it's just the the perfect setup for me. - -46 -00:38:32,960 --> 00:38:59,520 -Scott Tolinski: Yeah, yeah, I used to do when I had my hackintosh the two system thing and that was such a nightmare. Yeah, it was such a nightmare. And so I'm what I decided to do was not used my desktop anymore. And instead of getting an underpowered laptop getting overpowered ish laptop, I have a 15 inch MacBook Pro that has 32 gigs of RAM and 2.9 gigahertz I nine processor. - -47 -00:38:59,550 --> 00:39:00,440 -Wes Bos: That's it. - -48 -00:39:00,810 --> 00:39:01,560 -Scott Tolinski: Yeah, - -49 -00:39:01,560 --> 00:39:08,630 -Wes Bos: I've 3.1 I seven kilobytes of I nine wrote more eyes but I got more gigs hurt - -50 -00:39:08,630 --> 00:39:10,610 -Scott Tolinski: how many cores you got? How many cores? - -51 -00:39:10,980 --> 00:39:14,340 -Wes Bos: Intel Core i seven how many courses into that for - -52 -00:39:14,610 --> 00:39:24,810 -Scott Tolinski: what? I don't know how many years has but mine has six. If mine has six, six I nine 2.9 gigahertz cores and yours has four 3.1 whatever, then I win. So let's see here. - -53 -00:39:24,810 --> 00:39:27,060 -Wes Bos: How many courses and I seven have? - -54 -00:39:27,330 --> 00:39:29,070 -Scott Tolinski: If you go to About This Mac, it'll tell you I have - -55 -00:39:29,070 --> 00:39:30,030 -Wes Bos: four. - -56 -00:39:30,090 --> 00:39:33,440 -Unknown: Oh, that's it. That's it? Yeah, - -57 -00:39:33,480 --> 00:39:41,400 -Wes Bos: it's a 15 inch 2017. So yeah, it's almost two years old and it's still chugging along. I only have 16 gigs of RAM like a sucker. - -58 -00:39:41,580 --> 00:41:48,060 -Scott Tolinski: Yeah, like a sucker. So mine is a 2018 but only because Apple. Absolutely to Apple for those of you did not hear that story. Apple broke my computer and then gave me a nice discount on this super high powered one. So I have a much better computer than I originally bought and I only just pay like 300 bucks for it because they broke my other and then lied about it. That's my computer, and my phone is a pixel two XL, I will be getting the pixel four whenever it comes out, even though they haven't said anything about it. I don't know anything about it, but I'm gonna get it anyways, because I love my pixel two. It's been a great phone before then I always had the Google Nexus phones but the pixel two XL for me has just been amazing. performance wise, battery wise cameras incredible. My wife has the pixel three XL and it's been amazing for her. So nothing but good experiences, to be honest. And I like running the betas I like getting all that software stuff. So I like using the Pixel phone and I'm really big, big, big fan here. So that's specific models laptops for why yeah, that's pretty much it. I would love it. If there was a future where I could just like plug my phone into a monitor and do all my coding on my my pixel. Like have it be all VS code and Linux and stuff. Maybe that's the future some point. Who knows? I actually did see recently This is sort of unrelated but it gets called bliss OS bliss OS is a looks like it's a distro is that we say an open source distro? Yeah, of Android that runs on every device, including Mac books and surface books and stuff like that. So I have an old 13 inch MacBook that's just sitting in my closet. I'm going to install Android on my MacBook as its main iOS, and I'm going to try it. I know this this bliss. Oh S is very fresh and probably kind of buggy. But I would really love to see what that's like running Android. And then basically it's a Linux system. You could install any of your Linux stuff on it. Or mine trying it out. It's just like a fun little thing here. So check it out. I think it's at bliss. ROMs calm if you want to see more - -59 -00:41:48,380 --> 00:41:58,590 -Wes Bos: of it on on SourceForge. Remember stuff used to be on SourceForge Yeah, yeah. Yeah. Then they had like the banners that would be like download here like the ads that yeah. - -60 -00:41:58,590 --> 00:42:00,380 -Scott Tolinski: Oh, yeah. Yeah. - -61 -00:42:01,890 --> 00:42:04,230 -Wes Bos: They really shot themselves in the foot. Hey, - -62 -00:42:04,440 --> 00:42:13,500 -Scott Tolinski: I hate real. That's like a huge, huge industry. And they're just like, you know what? We're good with this crappy system here that ruin people. And they - -63 -00:42:13,500 --> 00:42:23,580 -Wes Bos: remember they always had like the like, diamond plate. Background design. I wonder if there's an image of the old. Do you remember like the design of the old SourceForge? - -64 -00:42:23,820 --> 00:42:30,570 -Scott Tolinski: I'm sure I do. But I don't I it's not coming to me right now off the top of my head. But I've been on SourceForge enough that - -65 -00:42:30,690 --> 00:42:35,210 -Wes Bos: Yeah, she saw I can't find a screenshot of it. But those are the days. - -66 -00:42:35,460 --> 00:42:37,400 -Scott Tolinski: Those were the days. All right. - -67 -00:42:37,440 --> 00:43:07,670 -Wes Bos: Last question from Aaron. Aaron. Should I apply for other jobs? Even if my contract gets might get renewed? Should I feel loyal to a company? Yeah, if your contract might get renewed, it might not. So absolutely apply? I think Scott talked about this on a previous episode. He basically said like, go for it. You can always say no to the job. But you might stumble into something really nice. Something really well paying something that you really enjoy the workout. So go ahead. It's nothing but practice at the worst. - -68 -00:43:08,010 --> 00:44:12,270 -Scott Tolinski: Yeah. And we talked about it the reason I added this question at the end here is because we did we talked about earlier in this episode, but we talked about it before. A lot of times people put too much weight into job interviews, like this job interview has a lot of weight, it's a thing No, it does not if you go apply for jobs, you're not hurting anyone's feelings. You don't have to accept a job. You just if you don't want your current employer to know that you're applying for jobs, then don't put your current employer down as a reference. And then if they asked why your current employers on a reference will say hey, my contract might get renewed there. I didn't want to make them angry if like to let them know that I was interviewing around or something but hey, if you're really interested in hiring me for this then please go ahead and talk to them. Because that's a you know, that's definitely just something you want to do you want to practice you want to get a new interview but again, the interview is not a job offer that you are accepting you get an interview go take it do it. I can't emphasize that enough. But yeah, I think that wraps up this potluck we got a pack it up. And I think there's a storm now there's not a storm coming. It's nice and sunny day here for this potluck. - -69 -00:44:15,090 --> 00:44:50,340 -Wes Bos: We are going to do sick pics now. I don't necessarily have another sick pic just because we've been batch recording these, but I needed to like work on a like a rotate a photo and touch it up really quickly today. And I ended up just paying someone to do it for me because I haven't had Photoshop on my computer for a couple of years now and sketch and figma these things aren't really meant for raster based editing. And a bunch of people said use affinity. Have you ever checked this out sky? affinity Affinity Photo? There's Affinity Designer? - -70 -00:44:50,370 --> 00:44:53,400 -Scott Tolinski: Yeah, yeah, I have a tutorial of course on Affinity Photo. Really. - -71 -00:44:54,750 --> 00:44:55,500 -Unknown: It's good. - -72 -00:44:55,920 --> 00:45:34,140 -Scott Tolinski: It's It's good. It's basically like Photoshop. The thing that makes me upset About affinity and I like affinity The thing that makes me upset about it is things like some shortcuts keyboard shortcuts and menus and stuff are like one to one the same as Photoshop and others are just different enough where it's going to make you really mad you'll kind of find this thing the applications great No, it's very powerful can do anything Photoshop can do I have it installed just because I bought it a long time ago, but yeah, no, it's pretty cool. It's it's very comparable. You know, there's like some open source Photoshop alternatives like GIMP instead. Yes, GIMP is there is that in Illustrator? One either way. - -73 -00:45:34,230 --> 00:45:36,000 -Wes Bos: GIMP. So Photoshop alternative? Yeah, okay. - -74 -00:45:36,000 --> 00:45:41,790 -Scott Tolinski: Yeah, it's way better than again. So yeah, it's much more of a Photoshop comparative. - -75 -00:45:42,150 --> 00:46:10,770 -Wes Bos: I need to try this out. Yeah, I also, I'm so jealous of everybody who edit stuff on the iPad, like, anytime you buy a texture pack, they're always just for iPad, like apps. And instead of like being for desktop apps anymore, and like I miss being able to do that sort of raster stuff, or Photoshop someone's face on something or whatever. So this is not really sick pic, cuz I haven't tried it yet. But I'm gonna, I'm gonna test it out. And I thought I'd just let other people know that I that are looking for something similar as well. - -76 -00:46:11,130 --> 00:47:29,550 -Scott Tolinski: Yeah, that's cool. That's cool. I'll you know, I'll go with you and keep the same sort of theme going an app that is taking the place of popular highly frequently used in production apps like Photoshop, whatever is for me, a big one has been DaVinci Resolve. And this might have even been a sick pickup mine before. But let me tell you, I use DaVinci Resolve for video editing. And for those of you who do any sort of actual professional level video editing, you probably use premiere and Final Cut, you probably know that Final Cut x, although it's really cool is very weird in some ways. DaVinci Resolve is a lot more like Adobe Premiere, but let me tell you, it's free. And it works on any OS. So you can use it on Linux or Mac or Windows. And it's free. Yes, it is as good as any of these other ones. It's, I've been using it professionally, the color grading stuff is sick, the audio tools, they're sick at literally everything about this application is sick. So DaVinci Resolve is my sick pick. It's a really cool app, and it looks like they just came out with version 16 I'm rocking 15 right now. So I'm gonna need to upgrade to 16 and see what's new. It looks like they they give you eight k editing in version 16. Oh, yeah, I'm into it. - -77 -00:47:29,880 --> 00:47:48,270 -Wes Bos: Alright, shameless plugs. Today, I'm gonna plug all my courses at Wes bos.com forward slash courses, use code syntax to grab anything if you want to learn react. Yes, six. Yes. Seven. Yes, nine. Any of the SS CSS has a whole bunch of free ones up there as well. Check it out. Wes Bos comm forward slash courses. - -78 -00:47:48,660 --> 00:48:22,680 -Scott Tolinski: Nice. I'm going to pick all or I'm going to shamelessly plug all of my courses that was well and I have a new course out every single month on level up tutorials COMM And if you sign up to become a pro, you get access to everything on the site. So that is like hugely important because there's a new course every single week. And if you sign up for the year, that means you get all of the I think there's like 27 Pro courses right now. And you'll get 12 additional pro courses over the course of the year. A lot of courses. The latest one is on react animations. So check it out at level up tutorials.com forward slash Pro. - -79 -00:48:22,920 --> 00:48:27,450 -Wes Bos: Alright, I think that's it for today. Thanks for tuning in. And we will catch you next week. - -80 -00:48:27,630 --> 00:48:49,650 -Scott Tolinski: We will catch you next week. And we're recording this episode in the future or in the past, I guess at this point, and it's really bizarre to say this before I say peace it's very bizarre. By the time you are listening to this episode, I'm going to have a baby yeah. That's I'm gonna have my daughter is going to be here by now by the time you're listening to this. So this is very wild. - -81 -00:48:49,680 --> 00:48:52,860 -Wes Bos: Yeah, that is really weird, like about the future, but it's now - -82 -00:48:52,920 --> 00:49:08,640 -Scott Tolinski: it is really weird, especially when it involves the new human being that you're taking care of. So Oh, welcome to this robot. Brooklyn, Brooklyn Delinski and this is really thick. So yeah, okay. But we will catch you in the next one. That's all we got for now. - -83 -00:49:09,480 --> 00:49:10,110 -Wes Bos: Please - -84 -00:49:12,000 --> 00:49:21,750 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax149.srt b/transcripts/Syntax149.srt deleted file mode 100644 index 06710ab4f..000000000 --- a/transcripts/Syntax149.srt +++ /dev/null @@ -1,120 +0,0 @@ -1 -00:00:00,359 --> 00:00:00,870 -Scott Tolinski: Monday, - -2 -00:00:00,899 --> 00:00:02,580 -Unknown: Monday Monday open wide - -3 -00:00:02,580 --> 00:00:19,980 -dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, - -4 -00:00:20,009 --> 00:00:21,660 -Bob and Scott Taylor. - -5 -00:00:23,610 --> 00:00:24,480 -Totally at ski. - -6 -00:00:25,890 --> 00:00:49,920 -Scott Tolinski: Oh, welcome to syntax in this Monday tasty treat. We're going to be talking about workshops. This is something that you can do if you are a developer and you want to teach other people maybe it's just a small little thing with you and a couple employees. Maybe it's a roomful of bunch of people and you're teaching them or maybe you are at a conference and you're giving a workshop, something like that. My name is Scott Lenski, and with me as always is West boss. - -7 -00:00:50,040 --> 00:00:52,500 -Wes Bos: Hey, everybody. How's it going today, Scott? - -8 -00:00:52,710 --> 00:02:29,780 -Scott Tolinski: Hey, hey, hey, hey, doing good. I'm awake. It's a it's a Monday as we're recording this actually in Monday as you're listening to this maybe as Oh, yeah. Monday, Monday, Monday. Yeah, I'm ready to get going on this one. This episode is sponsored by Sentry. Now, Sentry is the error and bug tracking software that we live here at syntax. If you want to know what's happening with your website, errors, bugs, track them all with century@century.io century is the open source error tracking software that helps developers monitor and fix crashes in real time. And trust me, I use century on level up tutorials, and I absolutely love it. It's an essential part of my business. Cut your time on error tracking resolution from five hours to just five minutes. It works with any language and integrates with dozens of services, syntax, listeners can get two free months by visiting sentry.io. And using the coupon code at hasty treat all lowercase all one word. And trust me, you're going to want to get those two months free. And you're going to want to try it because I use century and I love it and I cannot live without it. So check it out@sentry.io coupon code tasty treat. Now, Wes, I know you give a ton of workshops, I have never given a workshop. So I'm going to be taking notes here, I'm going to be using the notes that we got. I'm interested in knowing this. Because I mean, I technically you could say I've probably given hundreds of workshops on the internet, but none in person. So I'm interested in hearing all about what you have to say about how to give a killer workshop. - -9 -00:02:29,910 --> 00:06:22,980 -Wes Bos: Yeah, I actually that's how I got into teaching and to doing online stuff was I initially did a workshop in person. And it turned out I really like doing it. And it's fun, trying to explain things to people and sort of do it off the cuff. And I feel like it's probably my biggest skill that I've improved on over the past eight years of my career is being able to take something and just kind of riff on it and explain it to to an audience. So let's just kind of get into it. And we'll talk about different types. I like giving workshops, I don't give as many as I possibly could I, I probably get emails every week of somebody who wants me to come do a workshop either inside their company that's like, that's like a very lucrative business that you can get get into. And there's certainly people that just fly around, like, probably never home and just go from company to company giving workshops on specific technologies. And there's also public workshops, which I do quite a bit of, I probably do a 5050 split between the two, you can make more money doing private workshops, in my experience, at least. But the public workshops are also really fun. Because you can do them at a at a conference, it's usually you speak there as well, you get to go out with dinner and meet a bunch of really cool people. So those are fun as well. With the public workshops, I usually pair up with someone who's going to sort of organize it all for you. So if that's the case, you you pair up with a conference or somebody who knows how to run a workshop. They take care of selling tickets, getting the space making sure there's plugs, there's all kinds of logistics that goes into throwing a workshop that I do not care about, which is are there more plugs, what's for lunch, I bought a ticket but need to transfer and all that kind of stuff is not really what I want to do. So you have somebody else do it renting the space, etc, etc. and teach you just show up and teach for private generally as an office manager that's taking care of that type of thing. So you sort of pick which one you want to go with, then it comes to choosing a topic. So the upside to doing these sort of public workshops, is that like I have a bit of a repertoire of is that a word repertoire of courses or? Yeah, workshops. So yeah, like a beginner workshop. I've got an ESX workshop, I have an intermediate react workshop. I've got a Gatsby workshop that I just gave a couple of weeks ago as the first time ever, and then you you sort of like spend, we'll talk about building it but you spend two or three weeks building a workshop. And then you have it and it's locked and loaded and you can go on tour. With this sort of thing, and deliver it over and over, just you obviously have to update it as it goes. But it's not nearly as much work as the initial development of the content. So I like doing those some other times a company will sort of say, like, Hey, we're about to do a new stack. And this is our stack, and we need you to come in and, and teach us that stack. So it'll be very specific as to what tech they've specifically chosen. And then you have to develop customer content for them, which takes quite a long time as well. And you sort of go through it and figure out how you're going to approach it. So that's choosing a topic. I generally like to like I said, I like to do choose my own topics ahead of time, but I'm not opposed to also making custom content for for the private clients. Sure. Then when it comes to building content, there's sort of two approaches that I've taken. And it depends on what topic you're trying to teach. So there's, there's one, which is you can choose seven or eight different little things. So you're looking at a workshop, generally, I do day long workshops. And you say like, okay, like, what can I get across in this six to eight hours, that's not totally going to zap everybody's energy? Because it's a it's a long day to sit into a workshop and to be learning all this new stuff. - -10 -00:06:23,190 --> 00:06:40,170 -Scott Tolinski: Do you practice it ahead of time to know that the timings going to work out? Or do you have like alternate plans to say like, oh, if this audience is struggling at this thing, maybe I'll just cut this part out? Or is everything essential? And you can't veer from the script? Essentially? - -11 -00:06:40,200 --> 00:08:02,700 -Wes Bos: No, I have like a pretty good idea of what you can get done in a day. And it's, I've gotten that over the years, you I used to think I could get double the amount I could because you think like eight hours, you could teach tons in that right? Yeah, yeah. But it's, it's much slower than then you think it would be just because there's lots of questions that come up. And then you have to teach and wait for people to actually write the code. So I just have kind of a feeling for it. And then I'll usually have like two or three little modules at the end, if we have time to go through it. And usually at those at those times, I'll say, look, we're done the workshop, if you want to go home, by all means, I understand you're probably absolutely fried by now, because it's a long day. But I'm just gonna go through these extra little little parts, if you want to stick around and get it and usually about half the people stick around for that. Because they're like, Oh, yeah, I'd like to get as much as possible. And the other half of the people are like, I'm so tired. I've learned so much today, and I can't possibly do it. So yeah, that's kind of how I do it just have a little bit extra at the end. But also, the thing about a talk in a workshop is no one is ever upset that it ends early. So don't feel afraid that like, Oh, I have this eight hour workshop, and it was actually six. And these poor employees got to go home at three o'clock. Nobody is upset about that. If it goes smoothly, you've got across everything that you wanted to teach them. That's totally fine. Sure. - -12 -00:08:03,150 --> 00:08:35,130 -Scott Tolinski: Yeah. I don't know. One thing I'm interested about is like, what happens if somebody is totally failing at your, your initial setup? Like, I want to get started, like, what can you do at the very beginning of your workshop to make sure that onboarding and getting people to the point where they're even writing code is smooth? I went to a workshop once where the initial setup of everything took so long that Yeah, the workshop was over by the time people had their API credentials in and they? - -13 -00:08:36,000 --> 00:09:32,150 -Wes Bos: Yeah, yeah, usually, I'll give people like a little bit of a boiler plate and sort of tell them to npm install and to test things out before they get there. And that way, if anything, is broken with their machine, or they have some weird VPN issue that's going on, we've run into it all. And I make sure that we're at least at the point where you can start writing code and it's up and running by the time we start the thing. So I say like, do this the night before come in a little bit early, if you sort of hit that. Mm hmm. That that's certainly something you try to script it as much as possible. I remember back when I used to do WordPress, when Windows XP was a big thing. We will get the nightmare trying to get Wham started. Yeah, I just, I just remember this one lady. I'll never forget her. She said like, Honey, you're great. This is great. my computer's not working. I'm going shopping. Later. Yeah. I at least - -14 -00:09:33,050 --> 00:09:54,090 -Scott Tolinski: quit. You know, that person could say like, this is isn't for me, it's not working. And instead of like, I've been in workshops, where where people were just like, I can't get this going. I'm gonna just make it you know, instead of letting everybody move on and just watching I'm going to make it my mission to get this work. Yeah, you can progress. So - -15 -00:09:55,079 --> 00:14:25,920 -Wes Bos: do get those people every now and then where sometimes they just haven't read like the qualifications or something like that, or they're just just his way out to lunch, he had to be like, Look, I need to move forward with this workshop, we can't hold up the other 29 people on this workshop for your specific thing. And that's why I like to keep the workshops to about, I don't know, 20 to 30 people at most, it depends on the skill level of of the class. And any more than that you generally like to have like a mentor in place, or Yeah, sometimes even you'll get like it often, you'll get like really helpful people in the workshop, who are just good at debugging. And who can just like, while I'm helping somebody else, they'll just jump on and be like, Oh, this is what the problem was, and be able to figure it out, which is awesome to see. So building content, you can choose to build like one application. So I built the Gatsby website, we build a beginner react application that works with an API, build a Notes app with a back end. That's generally what I'll do, although I do have a couple other workshops where we'll tackle seven or eight different topics. So we'll tackle serviceworkers and image compression and bundling things with parcel and just like a whole bunch of different little things that are just handy to know, as a JavaScript developer, or something like when I was teaching ESX, I say like, okay, like, now we're gonna learn about this. Now we're gonna learn about this. And it's kind of hard to build that into an overarching application. So we'll build a bunch of like little examples instead of an entire app throughout the day. Interesting. So my process for for building an application is generally all think of like, Okay, what should we build in this website in this thing, and if for me, my Gatsby one does that we're gonna build a Gatsby website. And it's going to include image compression, lazy loading, page transitions, like I just come up with everything that I want to teach. And then I'll build up an application that includes all of that, then I'll sort of rewind it to the starter files, and like, what's the bare bones to get up and running with people. And usually, that's just a package JSON and a bunch of empty folders, because one huge thing that happens all the time is if you tell people to create folders, they will put them in the wrong spot, and you'll be debugging for half an hour. But if you give them an empty folder with a dot Git keep file in it a dot Git keep file, make sure that an empty folder gets put into into git, then you don't have to like fumble over something absolutely silly, like putting their folder in the wrong spot. Which is always happens. I don't know if it's because of VS code, sidebar, or whatever. But you always see people editing the wrong file. It's like the most common thing that that happens. Once I've reversed it back to the starter files, I'll build it up again a second time, but I'll write the notes as we go along. So I don't have like slides or anything like that I just have marked down notes with code in it. And that way, I'm able to sort of just teach off of that and give a give people a spot where they can copy paste it should they have not be able to write it themselves. Sure. And then the third time, I'll go through my own notes and try to build it myself to make sure that it flows smoothly. I also put all the get the notes up on GitHub, because there's bound to be little errors. And what happens is the attendees will send little pull requests, as I'm teaching, whether it's a spelling mistake, or something where I misspoke about something or a clarification that that people got tripped up on. That's really cool. Because that makes the notes better for the next time that it gives the workshop. How long should a workshop be definitely at least a day, or or I think a day is the perfect amount for a workshop six hours or like an eight hour with a lunch and a couple breaks in there is the most I don't think I'd be able to do anything significant in a half day workshop. I've certainly been to conferences where they have like 200 people in the room, and someone's giving like a three hour workshop. And that's kind of just a talk, you know, like, there's no way that you're actually going to be able to get good value. And people pay a lot of money. Like, if you look at what you pay for a workshop, they're generally two to $700 per workshop, whereas my course is like, I don't know it 90 bucks, 130 bucks. It's like way more than actually buying a course it's because you're paying for the in person experience of being able to go through it and ask questions and stuff like that. So you definitely have to make sure that people get real value out of it. At the end of the day. They look back at and say like, yeah, that was expensive, but definitely well worth it. - -16 -00:14:26,459 --> 00:14:51,660 -Scott Tolinski: Yeah, I think providing value seems to be the I mean, obviously, providing value is the biggest thing here. But I mean, if you're going to be up there and teaching people, you want it to be a good use of their time because in addition to spending possibly money, they're spending their time and energy, which as we know is also money. So they're there and you want to make sure that value is exactly what they are getting out of it. - -17 -00:14:51,660 --> 00:17:34,800 -Wes Bos: I agree. I agree. How much to charge for a workshop. How do you figure that out? Generally it if it's a private workshop, I'll quote it based on on travel time, amount, probably the biggest one is how long will it take me to actually build the content, especially if it if it's custom content, I can't pull content from anything I've done before and bring it into that workshop, that's going to be much longer if it's a prebuilt workshop, it's going to be a lot cheaper because I already have the content. So it travel, plane tickets, rental car hotel, sometimes I'll just bundle that all into my own expenses. Sometimes I'll say, the fixed price here. And then you also have to pay for my flight and hotel and things like that just really depends on where it's going. With that type of thing. When you do it with a conference, sometimes the conference will give you a fixed amount. Other times, they'll give you a cut. Generally, I'll just, I'll do what I think is better. Like if I think I you know what, I could probably sell out 30 of these spots, especially because I have the ability to market this thing as well, like, I have, like, I don't know, many, many thousands of people on my email list. And I know where a lot of those people live based on countries and cities and things like that. So I am able to send off emails, say, Hey, I'm coming to your city, here's a workshop. So there's that as well. So if I can like push that a little bit further and fill up the workshop, then sometimes it works a little bit better. on my end, how much to split it, it really depends. Some cities are very cheap. Sometimes people will have workshop space that is free because the conference is throwing their or they're throwing it at a company in their boardroom or something like that. Other times people have to like I've done conferences where the Wi Fi was $6,000, just just for like one day of Wi Fi, they had to pay $1,000 crazy. So there's all kinds of things that go in there, you need to take into account. Other tips, I will wrap it up here, this is just other tips that I have for giving a successful workshop, break away from your app and show other apps. So part of where I see people the most engaged in my workshops is when I say like, here's the topic, here's how we do it in the app or building Oh, but I also use this in my own app. And then I'll just open the code for my own personal website and start up the app and show how it works and show like, Oh, I used it here or here's some like really cool ways other people have used it. And that gives that gives much better context for how these things work. Rather than this one isolated example that we're doing. You show like I use it this way in like context is a good example. Here. I use context for this example. And here, I use context for another example. And then people can Okay, I'm starting to get the idea of how all this works. Yeah, - -18 -00:17:34,820 --> 00:18:00,860 -Scott Tolinski: I think context is actually a really good use case for that. Because text is you can look at context in the Docs or in how they suggest it. And you're like, Okay, I can see how it's used there. But I don't see how that translates into to my and I think that's a that's a good one. But no, definitely, to get that context is something that I always like to bring into when I'm teaching or talk about, maybe other ways that things could be used or how I'm using them. definitely important. - -19 -00:18:01,530 --> 00:18:57,030 -Wes Bos: Amazing. One other tips I have here Stop often ask if anyone needs help. So I'll always just take breaks, specifically, after you do like a hard part, you stop and say like, Is everyone okay? Is anyone need help is anyone struggling with anything, call me over if you need help, or I'll do a show of hands, like who's ready to move forward. And that way, you always have a second for people to catch their breath. And you're not just sort of keep going because as soon as someone's two or three steps behind, then you've lost them. And you have to wait till the next break to catch them up. And it's not really good experience. So lots of breaks for that. Also, lots of exercise time, people don't just want you to stand in front of them and talk for eight hours straight. They want you to talk about a topic, show a couple examples. And then you want to give them some exercises they like can you figure this out, I'm going to give you half an hour just to go nuts, here's a list of 10 things, I need you to go ahead and implement. And then that's where I think the real learning actually happens. Or they implement it themselves. - -20 -00:18:57,150 --> 00:19:06,660 -Scott Tolinski: How many of those would you do in a workshop? Because I feel like if you do too many of those people are gonna feel like, Oh, this person is just having me do assignments the whole time. And they're not updating. - -21 -00:19:06,750 --> 00:20:16,100 -Wes Bos: I'm probably like, for my last Gatsby workshop, I think I had let me let me pull it up here. I had nine, nine sort of topics, getting set up layout and routing styles, images, sourcing data, dynamically creating pages, sourcing your own data, building and deploying, and then next step, so that's nine in probably five of those had anywhere from five to 20 minute little exercises at the end of those topics. And most of them are just put right before breaks. So you can say like, go ahead and do this and then and then we'll have a 10 minute break. Go ahead and grab a copy coffee vape do whatever it is that you need to do, and you'll be you'll be good to go. So yeah, I don't I think people really like having time to cut their teeth on their own, because it's a chance for them to try stuff and Have the teacher within an arm's reach. And that's really what you're paying for when you go to a workshop. Whereas, of course, I could try to do this at home. But if I get stuck, or if got questions about it, I don't have you right beside me where I can get this explained to me as it would work. - -22 -00:20:16,500 --> 00:20:45,830 -Scott Tolinski: Yeah, yeah, I like it. It's funny. I've been doing even more of that in my video tutorials, even though it's not the same, because no, they can ask questions, but just being like, Alright, here's a challenge for you pause this video and try to take this on and understand if you can't like, figure it out in the time come back, we'll we'll get the solution. If you unpause that. I think that kind of thing helps. Because it does, it gives people an opportunity to like really struggle with something and through that struggles, usually where the best learning opportunities come from. - -23 -00:20:46,230 --> 00:20:57,350 -Wes Bos: Yeah, absolutely. I always have those pauses in my videos as well pause here, actually do it, and then come back. And I'll show you how I could do it. Because, again, I think that's where the real learning is going to happen. - -24 -00:20:57,590 --> 00:20:58,710 -Scott Tolinski: Yeah, absolutely. - -25 -00:20:59,040 --> 00:22:01,200 -Wes Bos: last little tip I have here is give challenges to those who want to do more. So sometimes you get people who are really good developers, and they'll just blaze through it. And they'll just be sitting there looking for the next thing. So if you can have a list of like bonus, I always call it or you you just go like way out like a try to try to do this again. But for an XML feed, or try to figure out how to do page transitions, but with not moving the nav at the top. So all kinds of like different things like that, where you can say like, give it in context, we're not going to cover it in this this in this thing today. But you've got time, why don't you try and go ahead and implement that yourself. So that's, that's what I got here. Today, workshops are pretty fun to give. It's a whole bunch of work upfront, but once you have it, you can start to tour around with it, you can make pretty good money on it. And I always find the very rewarding because you actually see people go through the workshop with you. And at the end of the day, they say like, wow, that was that was a lot of content. And I learned a lot here today. And thank you so much. - -26 -00:22:01,710 --> 00:22:37,200 -Scott Tolinski: Nice. Yeah, I think it's important. I think it's also important to know that you can give a workshop for like two other people to, you know, if you were Yeah, your, your your job, and you have a skill that your other employees don't have some really like really well done workshops. I've had just been by coworkers who are like, Hey, I know this thing you guys don't know, let's let's take five hours and have me teach you this thing. Six hours, let me teach it to you. So that's definitely an option too. If you're if you're maybe a little shy of getting in front of all those people might be a good thing to practice on some some coworkers and get that experience as well. - -27 -00:22:37,650 --> 00:23:02,940 -Wes Bos: Totally, I think that'd be that'd be really cool. I often hear of like, bigger companies have their own internal curriculum, because again, it's probably cheaper just to pay one developer full time than it is to fly somebody in or buy a whole bunch of courses or something like that. And they could just have their own internal curriculum, especially if your company is very like picky about how you do things, because then you could just tweak the curriculum to do it. Exactly how you build your apps. - -28 -00:23:03,300 --> 00:23:05,370 -Scott Tolinski: Yeah, your way. Yeah, absolutely. - -29 -00:23:06,840 --> 00:23:15,390 -Wes Bos: Awesome. So that's it for today. Hopefully you enjoyed that. And we'll catch you next week. Cool calculator, who's who's - -30 -00:23:17,370 --> 00:23:27,150 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax15.srt b/transcripts/Syntax15.srt deleted file mode 100644 index 712bf9ed7..000000000 --- a/transcripts/Syntax15.srt +++ /dev/null @@ -1,444 +0,0 @@ -1 -00:00:05,970 --> 00:00:11,250 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:12,570 --> 00:01:12,560 -Wes Bos: This episode of syntax is brought to you by fresh books, which is an easy to use Cloud accounting software that saves small business owners two days a month in paperwork, and get some paid up to five days faster for your 30 day free trial of fresh books. Go to freshbooks comm forward slash syntax and enter syntax into the How did you hear about a section, we'll talk a little bit more about them partway through the show. Hello, everybody. Welcome to another episode of syntax. Scott and I are here today to talk all about advice for newbies. So we've sort of compiled a whole bunch of the wisdom that we've gained over the years and sort of like things that we've noticed over the years of actually teaching people who are new to programming. And we're sort of just going to do a brain dump of all the advice that we have, as well as I tapped my Twitter crowd for some of the advice that they have as well. And some, some terrible advice on there. But also some really good advice that that has come in through so we're gonna kick it off in chat with Scott, how you doing today, - -3 -00:01:12,570 --> 00:01:41,550 -Scott Tolinski: Scott? Oh, doing super good on. I'm excited for this week. This, uh, I guess, tomorrow at the time of recording, this is the Google event to release or at least announce the new pixel phones. I'm very excited about. And the NHL starts this week. I'm a huge hockey fan. So it starts on Wednesday as well, I believe. And there's snow on the mountains out in Denver. So there's just so many things happening this week. So very, very excited. - -4 -00:01:42,149 --> 00:02:49,350 -Wes Bos: How about you a quite a bit going on with me, I actually just released a big update to my ESX for everyone course, which is available@esx.io. And I had released it, I don't know about a year ago, and that it covers all that ESX has to cover. And the nice thing about this course is that it doesn't go out of date because it is the language right? It's not like it's not like react or something that's going to update whoever JavaScript has not stopped. And there's a whole bunch of new stuff that's coming to JavaScript like a sink await. And we've had some we've got object spread coming we've got some new methods static methods on objects. So I what I did is I took a couple days and recorded just a bunch of videos that covers everything in iOS seven esa s nine, and in just a tacked it on to the end, the major part of it is using a sink await now that we have it in the browser, now that we have it in node, we can do a lot more flow control, which it's totally replace my use of like generators and regular then based promises. So yeah, I was super stoked to finally launch that. - -5 -00:02:49,980 --> 00:03:03,930 -Scott Tolinski: Yeah, that's one of those things that Meteor has had async await for quite a little bit by default on the server and like, Oh my god, that that totally just changed how I thought about any sort of, you know, promises or anything like that. Love it big, big, - -6 -00:03:04,200 --> 00:03:36,180 -Wes Bos: amazing I've been, I've been refactoring my own app and taking all the sync dot waterfall calls out. And it's just like, so beautiful. To be able to do that, as well as I go into some more advanced error handling, where you use a high order function to handle the errors rather than wrapping everything in a try catch, because that's a bit of a bummer to have to do that all the time. So sort of the combination of those things is makes coding just like so nice. For no sequence based stuff. - -7 -00:03:36,690 --> 00:03:57,780 -Scott Tolinski: Yeah, I think it's one of my favorite things about it, too, is just how easy it is to look at and just see exactly what's going on. Yeah, you know, sometimes with promises, I think even though they're not it's not callback, hell, it's still the visual aspect of it to me can seem a little like that. And so with async await I think it's just a nice little visual cue. Yeah, - -8 -00:03:57,810 --> 00:05:20,490 -Wes Bos: yeah, exactly. And then I also launched my stickers. Last Friday, which was a bit of a bit of a kerfuffle. So internet. Yeah, I broke the internet. I they showed up. They were supposed to show up on Monday. And they showed up on Friday afternoon. I was like, Oh, I bet I can get these suckers up by like three o'clock. So I did. And then And then last time, I didn't like email everybody to tell them that the stickers and I had a whole bunch of people that were mad that it didn't email them. So I was like, I better just like email and tweet it at the exact same time. So like everybody has a fair shot. And that was a huge mistake. Because I I it wasn't as much traffic as some of my other projects. But because I was not using CloudFlare to cache this because CloudFlare does not work on.af domains. The domain name that I use is bosta af as sort of a joke, which is stupid thing because you can't use my old server just fell over. And I got like something like three or 400 emails telling me my server was broken. So I fixed it all. I actually just had to scale up my digitalocean droplet. And everything was was back up and running. And they surprisingly all sold out within about 14 hours. So I guess now I have to order some more. - -9 -00:05:21,240 --> 00:05:26,009 -Scott Tolinski: Yeah, I mean, I'm not surprised. Everyone's hungry for stickers you know? Especially the - -10 -00:05:26,040 --> 00:05:31,889 -Wes Bos: the syntax sticker that here hold on me show you I haven't even shown you what it is yet. Beautiful. - -11 -00:05:31,980 --> 00:05:33,029 -Scott Tolinski: Oh, yeah. Oh, yeah. - -12 -00:05:33,029 --> 00:05:34,949 -Unknown: Love that tasty treats, - -13 -00:05:35,459 --> 00:05:36,300 -Scott Tolinski: tasty treats. - -14 -00:05:36,779 --> 00:06:12,209 -Wes Bos: Cool. Well, let's, let's jump into it. The our sort of idea is that we're gonna, we're gonna break this down into like, three sections, such as like mindset for beginners, tactical things you can can do day in and day out to make it work. And then we're going to touch on like a hot topic, which is imposter syndrome. How do you actually deal with being like, I'm not all that good at this, why should I be paid to do this or blogging about it or going to a conference or whatever it is? So I want to kick it off with some of your tips for dealing with mindset, Scott. - -15 -00:06:13,980 --> 00:07:27,209 -Scott Tolinski: Yeah, so I mean, at the end of the day, you one of the most important things, and learning in general is to have this understanding that the people who who get where they are, they didn't get there by, you know, wondering or worrying about not being skilled enough, they got there by opening their mind to deciding to devote a large portion of time in life to learning. So these people who are at the highest echelons of everything, are still to this day, never stop learning. So you have to just really open your mind to this. Oh, yeah, Wes is showing off and never stop learning sticker. It's so true. It's like, you have to just completely open your mind and say, Hey, I'm forever a student, there is never going to be a time where you're done in graduated. And like, I know everything. And you know, I think that is a mindset that can just hurt people's growth or hurt her, you know, what you're learning or whatever, you just really have to say, Hey, I'm gonna I'm going to soak up everything I can, I'm going to try to learn as much as possible. And I'm going to do that from now until forever, you know, - -16 -00:07:27,269 --> 00:08:25,980 -Wes Bos: yeah. And you have to be totally fine with like the your entire world being pulled from out from under you. Sometimes I see people that are in other industries, like, I had a talk once where I there's this thing called shark bite in the plumbing industry, that's just like totally changing how quick it is to plumb a house and how well how well the the joints fit together, and there's no leaking and you can like, take it apart, you don't have to solder and it's there's all these benefits to it. And there's a lot of like people that have been doing like soldering pipes together forever. And they're like, that's stupid, I would never do that. But like, the reality is that the entire industry is being shook up by these new things. And you have to be totally fine with that happening. Like, I don't know, six times over your career, like, how many times have my industry Let me think about this. How many times have my industry been shut out? Like, I started? jQuery came around. And then it was all about like Angular and backbone for - -17 -00:08:25,980 --> 00:08:31,379 -Scott Tolinski: don't even forget flash because yeah, I mean, just think how many people were going to be flash developers till the end of time? - -18 -00:08:31,800 --> 00:08:50,970 -Wes Bos: That's that's a that's a really good point. And what we saw when flash was is that like, people Haha, flash socks, but like the people that were doing flash were really smart people. And the ones that were smart about it, they just transferred their skillset over to other JavaScript API's. And then they were just amazing JavaScript developers at that time, right. So - -19 -00:08:50,970 --> 00:09:25,789 -Scott Tolinski: right, because ActionScript wasn't that far off. And I mean, at least you have your your foundations there, and is based on ACMA script, and one of my mentors was like a huge flash developer, and I never got super into flash myself, but like, the stuff she was making was like, she made like the Pokemon website. So like, wow, like the actual Pokemon website. And so like those people, you know, she she was smart enough to see that it was coming to an end and, and just transitioned hard. And she's a brilliant front end developer, and did not get lost in that in that transition. - -20 -00:09:26,100 --> 00:10:23,760 -Wes Bos: Yeah, absolutely. I think that's, that's a really good point that you have there. One of the mindset tips I have for people, and I've maybe I should give a bit of background. So I've taught maybe 200 people in person who are brand new learning to code and then obviously, there's been, like many thousands of people online who are new to coding who I've taught in some of the stuff that I see is, first a frustration with how come everyone's learning faster than me, especially if you're in like a boot camp or a class or something like that. And you see some people just get it immediately. And you look at those people and you're like, Oh, damn, you're like, why am I not getting as fast as them? And that's great for those people. But most people take a lot longer to to pick up these things myself included is people always ask me like, how do you learn so fast? I was like, I don't I learn really slowly. But if you can sort of chip away at it and keep at it, it's it's no problem there. - -21 -00:10:24,480 --> 00:10:45,120 -Scott Tolinski: That Yeah, absolutely. There's a lot of times where I'm telling my wife, I, there's no way I'm going to be able to solve this problem. And then like, you know, 24 hours later, you solve the problem, but it's just everyone struggles through stuff, especially learning and seeing things seem like way over your head. And if you keep persisting, you'll get through that, that fog or that misunderstanding of whatever you're doing. - -22 -00:10:45,150 --> 00:11:33,030 -Wes Bos: Yeah, it's so don't put yourself down, I think the other thing that I see a lot is, people write themselves off as not that type of person. So we see people come to programming and say, like, Oh, I'm not a math, the kind of person, I'm not going to be good at this, or I don't think that way. And they sort of just like, they like to like go online and find some sort of survey about their personality type, and then just write it off, because that's just the way that their personality is, when the reality is, is that doesn't matter at all. Those obviously, there's different personalities are going to learn to learn a little bit different. But don't stick that in your back pocket and pull it out as an excuse every time that something gets hard. Because this stuff is hard. And using that as an excuse is is not what you want to be doing at that point. - -23 -00:11:33,690 --> 00:13:52,919 -Scott Tolinski: Yeah, and if anything, you should be doing the opposite of that you should be looking at those those character traits. And thinking of how those character traits can improve your your learning, or maybe give you a different perspective that someone doesn't have, like, you know, even if you have something that you feel like can hold you back, it most likely is a strength in another way. So if you flip it and say, Hey, what is the strength allow me to do like me, personally, I don't have a great memory or something like that. I don't have these. You know, I don't have this programming background. But I am superduper persistent. And I will, you know, work on something as hard as possible for as long as possible until it gets done. So I could look at that and say, here are these things that are holding me back. But in reality, there's so many other things that will propel you forward, you just have to identify what those are instead. So yeah, it's so funny, because I taught I've taught breakdancing for a long time, why I don't currently but I've taught for like children, I've taught adults, whatever. And it's amazing how many similarities are back and forth between the stuff. I mean, at the end of the day, it's all teaching, but like, one of the things we used to talk about in breaking was your foundation, right? So the foundational elements are like the dancing elements and sort of base positions and sort of base balance things and handstands and whatever. And the idea is, if you don't have a solid foundation, you're never going to be able to get past that. So this, you must have a solid foundation, or else the entire house is going to fall down. So that holds true with almost anything you're trying to learn. And especially in web development, and things like that, do not neglect, you know, basic HTML stuff, basic understanding of why you use things. And when you use things, basic understanding of just general JavaScript basic understanding of CSS, because people do get they get to this point where like, even the things like CSS where they're saying, well, CSS sucks, for these reasons, well, maybe it doesn't. And maybe that like you just didn't learn the foundational elements enough. And you know, maybe it does, in some ways, too, but like, basically, at the end of the day, you want to make sure that you really, really, really drive home those foundations, because those are what's going to support your entire career. And if you don't learn those foundations, you're going to find yourself coming back to them later on in your career and having to learn them solidly before you move forward. - -24 -00:13:52,919 --> 00:15:24,360 -Wes Bos: Yeah, and I think that is probably the advice that most people hate hearing. Because I get all kinds of email people ask Should I learn react or view? I'm in this two months so far, what should I learn? And it's you want to like you want to be able to tell them like, Oh, yeah, take take react and run with it. And you're going to Atlanta job at Netflix, and it's gonna be great. But the like, the the like, sort of bummer answer is, is like, go back and do your array filters. And really focus on getting those fundamentals down pat, because by the time that you get up to speed with react, or whatever it is, it's totally going to be changed and the rug is going to be pulled out from under you. And if you're not able to adapt to whatever it is that people are working on at this time, then you're going to have a bit of a problem. So that's that's not to say like, you should be sitting in the console log and looping over foo bar Baz for your entire life, but and this is the exact sort of mindset behind my JavaScript 30 series is that focus on building stuff that excites you. But that is not so far abstracted from the fundamentals that you're not going to be learning them. So my JavaScript 30 series teaches you all kinds of like little fundamental things that you need to know about JavaScript, but not from an aspect of, we're just console logging stuff all day long. Because that's we all know, that's very boring to actually do. - -25 -00:15:24,799 --> 00:16:07,860 -Scott Tolinski: Yeah, yeah, absolutely. And I mean, it's one of those things where anything that can help you understand why you're doing nothing is going to save you an epic amount of time in the long run. I mean, so many times people get errors, and they'll they'll come in, they'll come to me and say, Hey, I'm getting this error. What's the issue here? And a lot of times, it says the issue right in the air. But if you knew why you were typing what you were typing, then the issue would be obvious, right? Like, oh, why am I putting these brackets here? Because it's an object? Why do we write objects like this? Because of this one, you know, it's like, if you if you understand these foundational elements, then you'll just have so much less friction, a, you know, growing up in your career here, - -26 -00:16:07,890 --> 00:17:08,089 -Wes Bos: exactly. Another example is, with when I used to teach beginner HTML and CSS, we would always have a couple people that would say, Can I just use bootstrap? And I would say, I'm, like, Sure, go ahead. I don't recommend it. But like if you really want to, because they think that they know, they know, HTML, CSS well enough that they're gonna just start using these things. And then inevitably, what happens is when something breaks, they come to me and they say, why is bootstrap doing this? Why is foundation screwing up? And the answer is almost always it's not foundation or bootstrap. But it's an underlying issue with how you understand floats, or how you understand the ideas behind inline block versus block, or why can I give a height to something? Or how do you clear elements that need to go side by side and as much as you want to just hurry up and learn these more advanced stuff, because that's what's on the job posting. It's well worth your time and learning those those fundamentals. - -27 -00:17:08,599 --> 00:17:49,950 -Scott Tolinski: Yeah, and especially, I found this to especially be true with CSS, because not CSS fundamentals and like an understanding of the cascade are how you can accomplish things easily. And CSS can take a large CSS file and make it so much more concise, and so much more readable. Because you have this big picture understanding of how it's all how a nice way to build these patterns. And basically, you can save yourself a ton of headaches later on with this big old, messy, giant spreadsheet or style sheet where you're adding a ton of styles to do things where you could accomplish with just a better understanding of how to solve your, your layout issues in general. - -28 -00:17:50,280 --> 00:19:33,390 -Wes Bos: Yeah, exactly. Another thing I always tell people who are new to programming is like, give it a chance, give it a second, because a lot of what I see when when people are learning how to do something a one way, the example that when I taught a boot camp that we had, as we were just building HTML and CSS websites, and then you switch to another way of doing it. And what we were doing at the time was we were switching to WordPress. And then that's a huge wrench in people's plans, because they just want to be able to edit the HTML directly, and not have this like thing in between that would compile the HTML for them, or output it in a little bit of a different way. And we always had a couple of people who would say immediately say, I hate WordPress, or I hate X, Y, or Z, and they would just write it off immediately. Because it's not exactly what they're used to. And chances are, they say it was such like, I don't know, if it's when people talk very aggressively about not enjoying a certain language, I think that some people think makes them look smart. And it makes them look very opinionated, and like well rounded. But it to me, it just seems like okay, clearly don't understand the whole scope of everything. And you don't understand the benefits of one way versus another. So it's okay to not like a certain technology, you're gonna have your own opinions, but like, give it a chance at first. Don't write it off immediately. Because you're there's likely a piece of that, that you're not actually understanding. And by learning how all these different pieces work together, you're going to get a better overall understanding, and then you'll be able to sort of form your opinions as you move along. - -29 -00:19:34,020 --> 00:20:27,990 -Scott Tolinski: Yeah, and we see this all the time, like all the time when anything new or fancy or anything interesting comes out even the upper level people get into, you know, arguments whether or not this is a good idea or not or whatever. They just give it a chance. Yeah, even like CSS and JavaScript. Like how how, how many seconds did it take for us to say that we were doing a CSS and JavaScript podcast to have somebody tell us that it CSS and JavaScript was stupid. I mean, it's just like It was almost like on the dot you hit send, and you're getting people telling you it's dumb. So I mean, that's my mindset too, is that you need to be totally open minded to just see maybe there's a reason why people are liking this. And maybe there's a reason why it's helpful. It can help you pretty much in anything, right? If there's a billion WordPress websites there, chances are WordPress isn't the dead? Yeah, maybe. Okay, you need to open your mind. Exactly. - -30 -00:20:28,200 --> 00:21:23,810 -Wes Bos: There's a there's, I can maybe go back and find the tweets for me that I was at the conference, when react was announced in I think it's 2013. And there's tweets of me being like, this is stupid, you don't put your templates in your logic, what you're the separations of concerns like, Don't you know that, and like, obviously, I had no idea I was so inexperienced, I didn't know of any better ways, I was sort of just like repeating the same stuff that everybody says about separations of concerns and stuff like that. And I thought that I was making myself look smart, and opinionated and well rounded in JavaScript. But clearly, I was so out to lunch, that people coming up with new ideas such as react where they had been around the block a couple times, and they understand that maybe you should rethink all of the best practices. And lo and behold, here we are a couple of years later, and everything is going in the direction that react was sort of showing. - -31 -00:21:24,240 --> 00:22:11,730 -Scott Tolinski: Yeah, and I was I was the exact same way, except for I don't have an embarrassing to look back on it was more or less between coworkers looking at what is this? Like, I'm happy with Angular here. And then like, sure enough, yeah, tried it, loved it, whatever. Yeah, there's, it's definitely one of those things. And, and you have to, I think this goes along with, you know, one of the things that I was gonna say was just basically don't ever act or feel like, you know, too much or everything. Because if you if you do, if you feel like you know, this, and you know that and whatever, and that these are the way things are, then you're you're you might as well just stop progressing at that moment, you're, you're done, you're plateaued. So you have to sort of always be sort of able to expand your mind a little bit. - -32 -00:22:12,000 --> 00:22:20,520 -Wes Bos: Yeah, exactly. So do you have any other mindset tips? Or should we move over to tactical things that you can do? - -33 -00:22:21,119 --> 00:22:24,060 -Scott Tolinski: Yeah, let's get into let's get into some tactical stuff. - -34 -00:22:24,090 --> 00:24:22,770 -Wes Bos: All right. So my first one is, you might even want to pause the podcast right now. And just Google Ira Glass, but gap. And this is like my most favorite motivational video, I show it to absolutely everybody who is first learning to code. And so if you don't know, Ira Glass is a radio producer, who runs the most popular podcast in the world called This American Life. And he's been at it for 30 years. And of course, he probably gets email every single day from new students being like, hey, like, how do I get better. And he sort of, like stumbles upon this idea of when you're first getting started with something, whether it's you're becoming a podcaster, or whether you're becoming a developer, there's going to be this gap in between your taste, and what you can actually make. And you know, that the stuff that you're making, you're looping over an array, and the stuff that you enjoy, which is really sweet, single page, React apps, there's this huge gap in between it, and it's sort of a letdown, to, to sort of look at that and be like, Huh, like, I'm so far from that. And I just don't know how to close this gap. And what our glass goes on to say is the only way to close that gap. And there's no book, there's no conference, there's nothing that you're going to do, except do a lot of work. That's it, you just keep putting in the time, keep chugging away, keep doing work every single day. And by putting in that work, you're going to become more experienced, you're going to have a lot more stuff under your belt and that sort of like that, like incremental, those tiny little improvements that you do day in day out. It's sort of like like going to the gym or any other thing that you are trying to learn if you put a little bit of time into it absolutely every single day, and you improve a little bit every single day, you're gonna wake up three or four years later and be go Oh, I'm actually kind of good at this and I'm getting paid for it. And it's my career. I'm sure I'm glad that I started this three or four years ago. - -35 -00:24:23,310 --> 00:25:44,160 -Scott Tolinski: Yeah, and it's one of those things that's so like, everyone wants instant gratification on stuff right? You want you know you're playing the video game, you you level up and all of a sudden your characters way better and fancy or whatever. And it happened really quickly happens, or whatever those games on your phone that like tap into that, like sense of you're constantly improving your farm or some, you know, whatever. Yeah, but like in real life, it just it doesn't happen that easy. And if you you want to take a little bit of growth over a long term and all of a sudden you'll wake up one day and say Holy cow, I have superpowers. And it happens to me all the time where I just, I somehow transport my mind into my mind, you know, five years ago, and I think about how cool like five years ago, my mind would have absolutely been blown doing the stuff I'm doing now. And it's it didn't happen overnight, it happened through every single day of working and growing to that, and it takes a long time. And it's pushing that little notch a little bit further every single day. And then all of a sudden, you'll find yourself just way, way, way, way, way further than you could have imagined. But it doesn't happen overnight. And it's not easy. And it's not necessarily like, you know, it's not, it's not the instant sort of gratification that you might want to get. - -36 -00:25:44,220 --> 00:26:52,859 -Wes Bos: Yeah, I have another example of this, which was not necessarily like development skills, but in terms of, like building online presence, or building a blog is when Chris coiour first started CSS tricks. I don't know how long ago that was, I think, like 10 years ago. And I saw it after about a year or two. And he had this huge following on the blog. And I looked at them like, Oh, that's amazing. Like, I could do that. I could just write a blog post every other day for an entire year. And then like a year later, I would look back at it, and it would be even more popular. And I would just be sitting there being like, I could do that. All he's doing is writing CSS, blog posts every single day and like, and what I finally like you'd like knock myself over the head is I'm not doing that. And clearly all that is like, obviously, he's a really good writer. He's a smart guy. He knows a lot about CSS, but all of that stuff has come just because he was incredibly consistent with writing these blog posts about it. And if you look at it over the course of 10 years, the thing is absolutely massive now, because it's a day in day out small little progress every single day. - -37 -00:26:53,460 --> 00:27:36,270 -Scott Tolinski: Yeah, and that same thing applied with level up touch, right? I mean, how many I know then then shaft the guy started level up touch with he and I used to talk about doing something like level up hubs for probably about a year before we actually did it. And if we would have started that year earlier, I can't even imagine where it would have been by now. I mean, we would had a whole nother year of content under our belt, but that was the same thing. It was, okay, well, we'll just start it, we'll just make video tutorials every single week. And people you know, ask about that YouTube growth. And really, it was just consistency over four years or whatever, just uploading content all the time, and it would never have gotten anywhere if it wouldn't have started right. Your own you have to start. Yeah, to get somewhere. - -38 -00:27:36,300 --> 00:29:40,560 -Wes Bos: Yeah, that consistency is such a competitive advantage, you know, just being able to, to do it. Because if you're looking at other people who might be catching you in terms of career, or if you're trying to build some sort of blog or online video course or something like that. There There are things like little tricks and hacks that can get you a little bit extra but there's there's absolutely no replacement for that day in day out work that's that's going to grow over time. This episode of syntax is brought to you by fresh books. And you all know that I love fresh books, and I use fresh books for all of my stuff. But I want to talk to you about one of the pieces of fresh books I didn't even know existed. So I actually sent fresh books and invoice for this podcast I have on my own Freshbooks which is mind blowing enough that you can build Freshbooks using Freshbooks. But one thing I didn't know is I goofed up the I goofed up the invoice and I put the wrong amount of tax on it because because Freshbooks is from Ontario where I'm from, and Freshbooks has the ability to comment on invoice and sort of go back and forth with the person who is receiving the invoice. And that is extremely helpful, because often I'll have like back and forth with clients on an invoice, whether it's the right amount or if it needs to be paid or something like that in that stuff gets lost in email, and it's not directly attached to the specific invoice that you're talking about. So if you ever need to pull up the information that you were we're trying to talk about with with your client, then it's kind of hard to match up email with the actual invoice. So Freshbooks allows you to comment on the invoice and go back and forth and chat directly tied to the invoice. So at any time, if you need to go back and look at what had happened. You can read the chain of events in terms of when people commented it and even when people have viewed it. So if you are a small business, you just need to build somebody and you need to get a real invoice through Microsoft Excel and the garbage in grab Freshbooks go to freshbooks.com Ford slash syntax and enter syntax into the How did you hear about a section? Thanks so much for them for sponsoring. Do - -39 -00:29:40,590 --> 00:31:10,530 -Scott Tolinski: Okay, yeah, so we're talking tactical. So one of the things you know, a lot of the times it's just getting your hands dirty. And we mentioned you know, Foundation, right, and there's a time and place to really drill that foundation and but there's also a time in place to get out of your comfort zone and experiment a little bit and have no idea what you're doing while you're sort of figuring out what you're doing. One of the best places to do that are things like code pen. And just, you can browse code pen. And there's so many cool projects on there. And you could look at this stuff and think maybe I can never do this. But I think one of the coolest things that that allows you to do is allows you to look at a project and then maybe without looking at the source code, say, I might not be able to do this, let me just try and just spend an hour or two or whatever, just hacking together something, seeing if you can do it. And maybe you're going to be in the total wrong way. But at the end of the day, that's a learning experience. And, and those those failures will push you in the right direction, but will also help you understand it a little bit more deeply. And when you look at the actual solution, then maybe that solution is going to make way more sense. And it's going to have a lot more impact than just like, Oh, I'm reading some code now. And this is what it is. So you do need to get your hands dirty. And you do need to experiment quite a bit with code, because that's how you're going to make mistakes, you're going to have issues, you're going to have problems, you're going to work through those problems. And then you're going to push that notch just a little bit further. And you're going to have some personal growth there. - -40 -00:31:11,040 --> 00:32:53,910 -Wes Bos: Mm hmm. Well, one other tip that I like, and this is actually from at Simon Swiss on Twitter, he said, Don't wait to be an expert to put yourself out there, write blog posts, submit meetup talks, you'll inspire people, and you'll grow your own self. So I think that that is 100%. My story as well is that I always like like to put myself maybe like I talk about putting yourself out there or pushing yourself maybe like 15% more than you think you should. And by doing that, you're going to put yourself into new waters. And you're going to learn new things really, really quickly. So when I first started writing blog posts, I had no idea what I was doing. But I learned like a little little thing, like whether it's a little piece of WordPress, or a little piece of CSS, and I understood it. So I wrote it down on a blog. And I also did that with meetup talk, I knew a little bit about this one thing. So I went to meetups, and I did talks on that one little thing and being being okay with knowing one thing, but not knowing a whole bunch of other stuff is exactly where you want to be, you're not going to be an expert, you don't sit around and wait until you're an expert at something to be able to start sharing and teaching others. By doing it as you are growing as a developer, you're going to strengthen your own skills. So much more, I think back to when I was first teaching CSS layout was back with floats. And like when I first started that class, I had a pretty good idea. I could hack together floats and keep changing stuff until it worked. But then when I taught it, I actually had to really figure out how to float actually work. Why does clear fix happen? Why is it clear fix fix it? And like all these things, I now have just like this amazing mental model of how does layout in the browser work? Yeah, - -41 -00:32:53,940 --> 00:33:36,720 -Scott Tolinski: I mean, is there any better way to truly understand something than to have to explain it to someone who doesn't understand it? Like I was sometimes when I'm working through something I know, my wife doesn't love this, but I talked with her. And she like her eyes Rola like I am not I have no idea what you're talking about. But it's not for her necessarily. Yeah, she can tune it out for all I care, because the process is me having to understand it in a way that I could explain it or at least attempt to explain it to someone who has absolutely no background or understanding of what the heck I'm talking about. And and some of those things can just truly eliminate like really those foundational what and whys and how's your doing something rather than just push button get code working? - -42 -00:33:36,750 --> 00:34:32,690 -Wes Bos: Yeah, nothing? Yeah, exactly. I think if if you are looking like how do I even start that, like what does that look like? For me? It is going on StackOverflow and answering questions. It's writing a blog post or my favorite is you find a meetup group that does sort of coding. And here in Ontario, we have ladies learning code, which does weekend workshops. And they are always looking for mentors, which you grab a table of three or four women and you are their point person to explain stuff to. And it's amazing that you spend a couple Saturdays doing this, you're going to really start to first understand what common trip up points are for people, but you're going to find that your own skill in whatever it is that they're teaching starts to get a lot better because you've explained at six or seven times to to that person. So find your local group, whatever that is and volunteer to actually help out with that because that's going to skyrocket you in terms of your own understanding of it as well. - -43 -00:34:33,270 --> 00:36:54,600 -Scott Tolinski: Yeah, or hop on even like slack rooms and stuff like that. There's a ton of like coding slack rooms. Wes and I both have one and and people there are always having you know, questions or problems or whatever and there's always opportunities to teach or show someone something that you might know that maybe they don't and and if you feel like you're you don't know enough to do that. There's always going to be something that you know that someone else doesn't, there's just always going to be the situation and So, I don't know, like Wes said, just jump into it and find ways to teach people. Yeah, it's definitely something that will improve your overall understanding of what you're doing. Exactly. Yeah. Another thing that I think is really tactical for just having personal growth here is, is we mentioned before, like doing things that excite you finding things and code that that will propel you into states of learning. Because that like flow state, or that learning state where you're not doing anything, but focusing on whatever you're trying to learn, those come about, because you are interested in what you're doing. If you're totally checked out and not interested in what you're doing, then it's going to be difficult or more difficult to get into those states of deep, deep learning, deep learning and deep thinking. So if you have a project for fun, or client, whatever, for fun projects are usually easier to be honest. Because, you know, there's obviously ties to motivation with monetary stuff, right? I don't know if you know about this, but it's like, psychologically, less beneficial to have money tied to a project it for your own personal motivation. And that's why many times when people get paid for things, they they lose the motivation. And it, it's interesting to counter intuitive thinking it works. My wife explained it to me that works to an extent, right, if you give someone $1 to do this thing, then they're going to be more inclined to do it. But if you make it their job, they're going to be less inclined to want to get into that flow state. So it's definitely one of those things is take things that are interesting, exciting, maybe not your job, but maybe could be related to your job, yeah, in some sort of way and, and just grow with it, find something fun, make it, try to make it and let yourself get totally enveloped in something that is, you know, potentially just groundbreaking for you. - -44 -00:36:55,610 --> 00:38:10,380 -Wes Bos: Another tip that I have is to take something that already works, and then try to tweak it to do what you want. Because sometimes if you're trying to like build an express app from the ground up, it's incredibly frustrating. And it's likely that you might not ever get it working. So what I like to say is grab something like if you're trying to learn Express, there's this thing called the hackathon starter, the hackathon the starter theme, or starter boilerplate, or something like that, where you can just npm install this thing. And then there's an entire like login system hooked up with Twitter, there's pages and data, everything is already done for you and go, Okay, well, now I want to make a new controller and a new model. And I want to be able to save items to that model. Or if you're trying to build a website, maybe grab WordPress and a very basic starter theme, and then build up from there. Because starting from a point of it works, and going sort of tweaking it and it works. It works. It works. It works all along the way. Especially when you're first getting into this is so much better, because I understand that the frustration of it's broken, and I've been it's been broken for six hours and I'm ready to quit this. That is all too true. - -45 -00:38:10,940 --> 00:38:28,730 -Scott Tolinski: Yeah. And in and yeah, you will experience that so much over the course of your career. Like I just don't even know I don't know how I can even proceed with this. But a lot of times it is that persistence, and you will get through it and it will work. You just have to trust that maybe go for a walk Yeah, your brain a - -46 -00:38:28,730 --> 00:38:38,040 -Wes Bos: little bit have a shower, and I always do that myself like Oh, yes, walk away, and then it's gonna come to you at some point don't waste any more time on it. Absolutely. - -47 -00:38:38,130 --> 00:39:16,400 -Scott Tolinski: Yeah. I mean, one of my one of my probably like my first or second WordPress website, probably my first WordPress website ever. It was it was just that it took a theme I already I didn't know the CSS layout stuff enough like floats and everything like that. I didn't understand that stuff enough. But I knew I wanted to make this this color. And this this color, whatever. So I found a WordPress theme that had the layout I wanted to and I just tweaked the visual styles until it worked. And it was just an experiment just for fun. But it didn't taught me a lot about how they made those layouts and how that stuff actually works and why people do things certain ways. The definitely, definitely a good tip there. - -48 -00:39:17,340 --> 00:40:14,520 -Wes Bos: Let's move on to the third part, which is talking about the imposter syndrome and how to deal with it. So imposter syndrome is when you think that you are a bit of imposter with your in regards to your level of coding. So it always comes when people take on a project or you're applying for a job or you actually get a job or you're going to do a conference talk or you're writing a blog post and it always sets in you're like I really don't know what I'm doing here. And the answer to that is first of all, you actually do no more than than you think. And second of all, everybody absolutely everybody gets this at every stage of their career. I get it myself all the time. And just being able to deal with that and understand that this is something that everybody gets is super important. So let's talk a little bit about like, how do you actually deal with imposter syndrome? Yeah, I - -49 -00:40:14,520 --> 00:41:23,760 -Scott Tolinski: think for me, one of the most important things for dealing with imposter syndrome is to look at your accomplishments. So, in you, you chances are you have accomplishments, right? Whether it's you've made this or you've made that or you, you develop this, I think about, like my wife, she has a PhD, and she gets imposter syndrome. And you just have to think you worked really hard for this PhD, all of that stuff that you got up until that point to work that hard. That is your proof that you deserve to be there. And breakdancing, man, we used to enter competitions, and we'd be going against some people and maybe like the semi finals, or something like that, that were just really high level people. But you got there, because you got there was a tournament and you were tired, and you got there. So you deserve to be standing where you're standing. And that same thing applies to absolutely everything right? in programming, you got to where you are, and you were given the opportunity, because of all of your past accomplishments. And so it's really important to look at those past accomplishments and really wear them as like a badge of honor and a badge of courage, right, like, let that stuff push you through? - -50 -00:41:24,630 --> 00:43:09,210 -Wes Bos: Absolutely. I think also where imposter syndrome comes in is when people are applying for jobs that seem a little bit outside of their realm, or they're interviewing for a job that seems a little bit harder than than the skills that they know. And that's absolutely absolutely normal. I think that it's, it's fine, because you don't get hired just alone for your skill set. Because people look at you as a potential hire. And they say, Okay, this person is great at learning, I could see them like people, they essentially want to like buy low and sell high with with developers, they want to they want to hire people who are at an entry level, because it's cheap. And like the hot like high level developers command quite a quite a large salary, they're hard to get they they move around a lot. So if they can take a look at you and say, Okay, this person has learned this much so far. And they clearly show that they enjoy learning. And then they also have all these soft skills stop. They also have all these soft skills that come along with being a good developer, which is having empathy for other people understanding how to work on a team, how to how do you communicate properly? How do you do understand the the business aspect and the goals and all the stakeholders of the actual business side of it, as well as as being a developer and sort of all those things that come together is what will make you a really, really good hire. And that's what people are looking for when they're off and looking for looking for someone to hire you, it might just look like a list of skills that someone wants to hire for. But being a very well rounded person is almost always what people are looking for when they're hiring for a job. - -51 -00:43:09,750 --> 00:44:13,800 -Scott Tolinski: Yeah, absolutely. And it's one of those things where you have to look at it this way, too. If If you are looking at this job application, and it doesn't feel a little bit over your head, and you're aiming way too low. Because that's how you grow as a developer, I don't want to take a job full of stuff that I already know how to do. You want to take a job full of stuff where you can grow in that role. I can't think of a single job I've ever applied for or gotten that wasn't above what I felt like my level was, because What's that? What's the point of staying down at that level, right? You want to be pushing yourself forward. And that imposter syndrome that comes in and says you maybe can't do this? Well, if you get the job, you can do it. I mean, you you can make it work, you can learn you can if they want you there in that role, then you're supposed to be there. So you know, you want to be looking for these opportunities to see it as a growth potential rather than a overwhelmed I can't do this. Yeah, potential there. I shouldn't be here potential. You know, - -52 -00:44:13,830 --> 00:44:19,350 -Wes Bos: I just thought of a really good new sticker idea, or a sticker that just says, I bet I can figure it out. - -53 -00:44:20,460 --> 00:44:43,170 -Scott Tolinski: Absolutely. And that's Oh my god, I can't tell you how many times that's been my motto. You know. It's actually really funny because again, my wife would be like, I told her I'm taking on this or this in this project, and should be like, Can you do that? And I'll be like, I can figure it out. Yeah, I can make it happen. And you do make it happen if you got it right. I mean, you get thrown overboard, you figure out a way to get back on so yeah, - -54 -00:44:43,200 --> 00:45:01,470 -Wes Bos: I would always take on stuff that was way over my head. And that's where I would always reach out to my community being like look like I remember once I took on the idea of like a realtor website where we're going to pull in live listings into his website, and I realized Sounds like one of those right now - -55 -00:45:02,639 --> 00:45:03,960 -Scott Tolinski: is a freelance project. Yeah, - -56 -00:45:04,019 --> 00:45:47,250 -Wes Bos: I realized I had no idea how to possibly do this. So I had to reach out to friends who did do this. And I explained it to them. And they sort of like, helped me out and got me up and running with the piece and getting it out of bare bones functionality. And just know that there is a huge developer community out there, whether it's, at times, I also had to, to pay people at this time as well, because I realized, like I took on this project, it's a paid project, but it's way over my head, and I need to help someone in but the next time around, I was able to do that. And then you do that every single time where you push yourself just a little bit to 15 20% more than you think you should. And that's how you you get some serious growth and, and sort of kill that imposter syndrome that you have. - -57 -00:45:47,759 --> 00:45:53,040 -Scott Tolinski: Yeah, and I mean, honestly. So there's, there's two things I guess I want to say about that is, - -58 -00:45:53,040 --> 00:45:53,700 -Unknown: you do kind - -59 -00:45:53,909 --> 00:47:19,170 -Scott Tolinski: of got to be a little bit smart about it. Because like, obviously, you don't want to take on a project that you have no idea. Like, you want to take something that like you're 80% sure you can do or 70% sure you can do, if it seems like somebody's asking you to build, you know, something that seems totally mysterious to you, and you have no idea where to even start and maybe reconsider. But yeah, you want to be finding these opportunities that are past your comfort zone, but not like epically past your comfort zone. And another is if you fail on these things, like what's the worst that could happen, right, all of a sudden, you get this job, that's like above your level, it you know, maybe it pays a lot or whatever the worst thing that could happen if you fail is you get fired. And then you look for another job because it didn't work out. But that that point, you're still at square one, and you've gained a little bit of experience. And that that's not a bad failure. There's nothing wrong with that. There's nothing wrong with being over your head, and not being able to hang you you'll grow from that. And same thing with any of these projects, like Wes said, what the worst that happened there is that there was something that was above your level, you paid someone else to do it, and you got through it. So like, yeah, failing is really not a huge thing with with imposter syndrome, right? If you feel like you take something on you, it's above your level, you, you fail at it. You got to look at that as still a positive. Right, your personal growth moment. - -60 -00:47:19,200 --> 00:48:17,430 -Wes Bos: Yeah. And another tip I have is just sort of adopt an attitude of not knowing absolutely everything in being obey sort of like this is like full circle to our first point, I think is that, like, I claim to know a lot about some things. But there's other things I absolutely know nothing about. And rather than sort of like fake understand in whatever I just say, I don't know, I've actually never done that. I've never touched it before. Like somebody asked me the other day, what do you use for code coverage? And I said, Well, I actually haven't done a whole lot of code coverage before. And that's fine, because that's something that I'm looking at learning right now. But just being being totally fine with not knowing absolutely everything and being open to chatting with other people who are experts in a specific thing, because you can always like leech information out of these other people that are experts in that specific area. Yeah, - -61 -00:48:17,430 --> 00:48:57,960 -Scott Tolinski: and nobody knows everything. They're you know, everyone has gaps. Everyone has gaps in different sort of places. And some gaps are bigger than others and whatever. But that shouldn't be holding you back from anything, right? Though, all you should be looking to do is if you need to fill those gaps, fill them and if you don't need to fill them, then maybe I don't know, maybe you don't need to fill them. But like if you have a basically you just don't. Don't let that stuff hold you back. Just don't let it hold you back. Yeah, because everyone has gaps. Everyone has imposter syndrome. Everyone struggles improving all the time. And it's all just about persistence. And I like we said open mindedness and persistence, you'll get there exactly. I - -62 -00:48:58,200 --> 00:50:19,230 -Wes Bos: think, Oh, I know, we're going long here. But I one more tip is like Gary Vaynerchuk always talks about staying in his lane, which means that like, find your thing, and just become like slam dunk that that one thing in your your aspect. So whether you are the person who does CSS animations, you're the SVG person, or you're the the view components person or whatever it is like you're the webcam person. If you just like take that one thing and just run with it, write a bunch of blog posts, submit talks to conferences, and you're going to get this really good confidence being like I might not know a whole lot about absolutely everything because this JavaScript world in this web development world is absolutely enormous. But I sure do know a lot about how text and x SVG work together. And whenever there's a question about that, or especially like, take something that's new and run with it, because like grid, just CSS Grid just came out. There's a huge opportunity right now. For you to become the CSS Grid person. So you can write a bunch of blog posts, submit a whole bunch of talks and over the next three years grid is going to become extremely popular. And you hit your hit your horse to that wagon or hit your wagon to that horse. Think the horse would be CSS Grid. You put your wagon on that and and run with it - -63 -00:50:19,230 --> 00:50:30,840 -Scott Tolinski: depends on if the horses and the horses always in the front of Yeah, I guess I should know this being in a wagon country here. I've worked with ever since we moved out west we're like, wow, this is a lot more Western, then. - -64 -00:50:31,290 --> 00:50:34,440 -Wes Bos: You know, there's just wagons in the streets, though. But - -65 -00:50:34,440 --> 00:50:42,660 -Scott Tolinski: we were just at an apple orchard or whatever. There was like, like old wagons like antique wood giant Where? Oh, yeah, like decrepid hanging out in the field. - -66 -00:50:42,690 --> 00:51:17,850 -Wes Bos: It's sure what is the thing let's let's look this up, hit you wrap your hit your wagon to a star. There's no horse, Scott. It's a star. So you want to hit your wagon to the CSS Grid star or the Flexbox star or the like I just tweeted today about some brand new stuff that's coming to to JavaScript, just figure out how this one thing works and write a whole bunch of blog posts, make some YouTube videos apply to conferences to talk about that. Well, we'll have another whole episode on conferences itself, but then you can use that as sort of your your launch point. And you can rock it yourself up in that topic. - -67 -00:51:18,570 --> 00:51:23,820 -Scott Tolinski: Yeah, well that you wouldn't full circle with the rocket. Hitting to a star. Yeah. - -68 -00:51:25,350 --> 00:51:28,860 -Wes Bos: I always screw up sayings. I don't understand how it all works. - -69 -00:51:28,890 --> 00:51:31,770 -Scott Tolinski: Oh my god. Yeah, I'm the worst about that. Yeah, definitely. - -70 -00:51:33,420 --> 00:51:39,480 -Wes Bos: Um, any any last tips about I think like, maybe we should talk a little bit about jobs? I would have one. Yeah, - -71 -00:51:39,480 --> 00:52:52,620 -Scott Tolinski: I would have one more in like job interviews. Yeah. And having to deal with imposter syndrome. And we can use this as a segue, well, imposter syndrome, you should never let it affect your confidence in a job interview. And in a job interview, you should be honest. Like, if they ask you a question, you don't know the answer. You can say I don't know the answer. But like, never let that hurt your confidence. Because if they ask 20 questions, and they're asking them to 20 people, if those 20 people are honest, you know, not all of them are going to have the answers to all of the questions. So you, you can't let it affect your confidence just because you don't know the answer to one thing, or maybe the other thing or this thing or that thing. You're still a viable candidate, though, you could learn that one thing or those two things, or those even three or four things you didn't know you can learn those on the job, it's not a big deal. So in an interview itself, you cannot let this stuff get to you. You have to go in there and be confident with your abilities. And you have to say, Hey, I deserve this job. Because I'm here, they let me in the door. I deserve to be here. They're not you know, hiring security to go grab me by the collar and throw me out, then you deserve. You deserve bet that chance to prove yourself. - -72 -00:52:52,979 --> 00:53:11,790 -Wes Bos: That's that's really good advice. I myself have I've only ever interviewed for one job. And it was years ago, I got asked to interview at Google and I went through it just because it was Google. And I thought that'd be kind of neat to work at Google. And I didn't get the job I got pretty far. I think I got about four or five interviews and say - -73 -00:53:11,880 --> 00:53:18,960 -Scott Tolinski: I also interviewed at Google how Yeah, how far did you go? I did you get flown out there? Because I got I got flown to Mountain View. That's it? - -74 -00:53:19,710 --> 00:54:36,690 -Wes Bos: Well, I I drove because Google's about 45 minutes out from here. But yeah, I think I did three phone interviews and three in in person interviews that were like technical, like whiteboard challenge. And it was I felt like so defeated after I had gone into the thing. But then what had happened is that I wrote a blog post about my experience and getting turned down by Google. And my email inbox exploded with job offers. Like I couldn't believe it. But it makes sense to me now, like some kid that got through six Google interviews now. Yeah. And also at the time, I felt like a huge imposter. I remember like, Oh, yeah, I remember just like reading about sorting algorithms and tree sword and bubbling and all these computer science stuff. And I was like, shit, I am not gonna be able to do this interview. And it turned out to be good. Like, the people were very reasonable. And the questions that they asked were, were stuff that would happen actually in JavaScript, and I didn't have to do a tree sorter or anything like that in the interview, and I'm glad I did it because I had huge confidence issues going in and then coming out of it, especially after writing that blog post. I felt great about my own skills, and maybe I do know a few things about this. - -75 -00:54:37,170 --> 00:55:42,240 -Scott Tolinski: Yeah, and I mean, I have a lot of the same feelings because here I am, I'm getting flown out. You know, they're they're paying for my my room and board to fly me out there. I had to spend an eight hour day I had to have had like six interviews and I had to give an hour long presentation. Wow, PowerPoint presentation. Yeah. And I was just in there like the entire, like, time leading up to it like holy cow, Mike. Good. Enough for this, like, what am I going to give a presentation like this is holy cow. And, you know, sure enough, you went through, you did it, and I look back on it. So finally, because it was awesome, it was a great, it was a great trip. And again, I didn't get the job, but I didn't get the job. And that opened up the opportunity for me to move to Denver, right, which is one of the, you know, the best things I've done in my career. So, you know, there's just so many things like that, that they'll seem like these big, giant, daunting, you know, I can't do this kind of stuff, and you do it. And you're always better for it. And you always feel good about it afterwards, even if you even if you would have gone in there and totally failed. They still invited you to come out there and do that. I mean, that was a big deal. - -76 -00:55:42,270 --> 00:55:48,540 -Wes Bos: Yeah, that's a pretty sweet story. So I actually I'm curious more about your Google interview story. What did you make a PowerPoint on? - -77 -00:55:49,260 --> 00:56:16,440 -Scott Tolinski: Well, so they gave me like a one of these exercises. It was like a mobile layout. And it was like, just recreate this mobile layout. And at the time, I was doing Angular. So I did it in Angular. So I had nice and fancy I had like, you know, touch pullout drawers, wow, on loading animations and stuff like that. So it was fancy, I did a good job and whatever. And I got to talk about, I did my presentation on animation. So then I talked about, you know, request, - -78 -00:56:17,700 --> 00:56:18,960 -Wes Bos: request animation frame - -79 -00:56:19,020 --> 00:56:52,020 -Scott Tolinski: request animation frame, I wanted to say request or user media because we had to. But yeah, request animation frame and talking about how I got it to 60 fps and how I did the you know, the touch drags and how I did the animation on loading and stuff like that. And just talking about why you wouldn't want to use easing curves. So I just did it on on CSS animations, which is one of the things I like the most, you know, that's sort of my go to is if you've got to do something that is big and scary. Go to something that you really like. Yeah. And I really like CSS animations. - -80 -00:56:52,050 --> 00:56:58,140 -Wes Bos: Yeah. That's pretty neat. That's kind of cool that we maybe this should be our clickbait title for the podcast - -81 -00:56:58,410 --> 00:57:00,150 -Scott Tolinski: is how we didn't get job. - -82 -00:57:01,680 --> 00:57:04,680 -Wes Bos: Advice for newbies and how not to get a job at Google. - -83 -00:57:05,370 --> 00:57:05,970 -Unknown: Alright, - -84 -00:57:06,690 --> 00:57:56,970 -Wes Bos: cool. Well, that's, that's good. I think one more tip, I really don't know all that much about like the job world. But I have seen quite a few bootcamp students. And like, one other tip is that in the tech industry, it seems that the best way to to increase your your level is to jump around quite a bit. So I've definitely seen lots of people who they have a beginner entry level role for a year or two. And then they jump to something else. And they get like a 2030 grand pay increase, and then they jump to something else. And for you know, what, after like five or six years, these people are in senior level there. They're leading teams, they have senior level positions, they're making over 100 grand a year. And it's pretty incredible. But you think about it, like if you were to spend six years straight on this thing, you you start to figure this stuff out, right? - -85 -00:57:57,690 --> 00:58:56,070 -Scott Tolinski: Yeah, and, and that's exactly how my career is mostly, when I've almost always worked at agencies and whatever, you can't be afraid to take those opportunities. I mean, one of the jobs I had I had, I had only worked at for six months before I got a recruiter email, giving me the opportunity to build the front end of four.com. And that's like, you get that email. And you're like, Yeah, I just took this job. But I know so many people that would be like, Well, I haven't been at this job this long and whatever. But here you have an opportunity. And this opportunity is going to one look great on your resume, but two, it's going to potentially propel you into so many further roles or learning opportunities or whatever. If these job opportunities are here, at the very least go and interview you've been at one place for two weeks, go and interview who cares, you get a job opportunity just interview and check it out and see what that opportunity could lead to because it could be something that could totally change your career. And in just the best possible way - -86 -00:58:56,100 --> 00:59:16,530 -Wes Bos: that's true and also helps shake off any nervousness or it'll help you get more comfortable interviewing because like Scott and I talk every week on the podcast and even just this how many This is number 1415 my conversational skills are getting a lot better just by doing this. So yeah, I could see that also happening through doing a lot of interviews. - -87 -00:59:16,950 --> 01:00:45,810 -Scott Tolinski: Yeah, I have gone to probably more interviews with the expectation that I don't want the job even if they give it just because you you you'll you'll flesh out some things right you'll want to get those skills practice you'll you'll feel more comfortable in interviews going forward which is a huge thing to feel comfortable in an interview. I mean, I think we should maybe even do a little bit more talking I have a lot of experience on both sides of the table there. So like what people are looking for or not but you do these things and off the off chance that this project ends up becoming something super cool. And maybe they valued you coming in. There's so much that they throw a big offer your way and then all of the sudden you have this big offer sitting in front of you You can take and just, again, totally change your financial situation, your career, whatever. You never know if you could go into something that says, okay, the base pay is 80,000, or whatever you go in, you do your interview, whatever. And then they say you are the guy we want you. And you say, Okay, I'm going to cost 100,000. Yeah. And then then they'll say, Okay, well, let's see if we can make that work looking to go back, maybe make it work. So, you know, don't be afraid to even apply in interview for things that you might not necessarily need. Right? Yeah, it's all going to be, it's all going to be personal growth, it's going to give you confidence, it's going to remove that imposter syndrome. It's going to inflate your ego a little bit, especially if people are throwing job offers at you. Yeah, - -88 -01:00:45,870 --> 01:01:53,550 -Wes Bos: yeah, absolutely. So hopefully that is some some useful tidbits to to newbies, if you are an experienced developer, hopefully, that will also help you maybe mentor somebody who is new to the industry, because I know a lot of times as developers we get asks for advice from people. And we might not necessarily know what to tell people. I think what most people do is, this is what I did. So why don't you go forward do the exactly same way. And this stuff is always changing really, really quickly. Like the fact that I started off writing blog posts might not be the best way anymore, right? So I don't know it's it's good to have this this sort of viewpoint when you're talking to newbies and whatnot. Also, I'm gonna plug the the the code newbies community, there's this really amazing community called code newbies, and they have a podcast and they have like a twitter q&a every every week. And I the only reason I know, but it's because my JavaScript 30 has become like a big part of the the code newbies sort of community. And it just seems like such a great positive, supportive community. So if you are fairly new to learn to code, definitely check that out. - -89 -01:01:54,420 --> 01:01:55,020 -Scott Tolinski: Nice. - -90 -01:01:55,860 --> 01:02:02,040 -Wes Bos: So let's do let's do some sick pics and some shameless plugs. So what do you got for me for a sick pick today? - -91 -01:02:02,040 --> 01:03:38,160 -Scott Tolinski: Yeah, so my sick pick is going to be something that is is the Nintendo Switch. Sure, maybe a lot of people know about this. I got it on pre order before it came out. I'm a big fan of Nintendo stuff. So I wasn't gonna miss the switch. It looks awesome. And sure enough, every single month, a new excellent game has come out for it. The hardware is fantastic. Like it's just so solidly built. It's great. Because if we're like hanging out and watching TV, my wife can, like put on some TV that I don't care about. And I can play the switch. And we're still getting to hang out together, right? It's not like, Oh, I'm gonna go play video games. Yeah, you're gonna go do something else, you know. So it gives you an opportunity to just sort of take video games with you, whatever. And I and I don't play a ton, but like, that Zelda game was just brilliant. And then I just got a game called a golf story, which is like, it's sort of like a classical RPG, where you're like walking around in different towns and talking to people and solving problems that the whole thing's like rooted in like, super regular Nintendo style golf game way, which I grew up playing these old golf games. I'm terrible golfer in real life, but golf games are just so fun. And it's it's just an absolutely hilarious combination. Someone described the game as like a warm blanket. It's very fuzzy and comfortable game to just sit down and play like low stress or what Yeah, so between all of that stuff, man, this the Nintendo Switch is just super cool. Even if you you know, are just playing video games here and there. It's just awesome. - -92 -01:03:38,550 --> 01:03:59,430 -Wes Bos: Yeah, I've never been a video game guy at all. My first website was about PlayStation two and I got super into building the website for it. And like just like dreaming of it for like a year in advance. And then finally, when it came, I camped out and we bought it the PlayStation two, and we bought two of them. We flipped one and paid for the pays for the other one, and then I just didn't play it after that. - -93 -01:04:01,470 --> 01:04:28,590 -Scott Tolinski: I grew up with video games we had like, before Nintendo came out we had an Intellivision. And then we had like all of the Nintendo systems growing up and then PlayStation, whatever. I've never been like, hardcore gamer man. But like, like, I'm not going on Reddit and complaining about video games or something like everyone else. But, you know, I really like you know, I like certain kinds of games and I like to sit down and just relax and play a video game every now and then. - -94 -01:04:29,220 --> 01:06:11,070 -Wes Bos: Yeah, absolutely. It's pretty cool. All right. My sick pick for today is more of like a sick Hot Tip pick where it's here. I just explained it. So when I'm when I'm designing something, whether it's a new course or, like right now I'm designing a slide deck for a conference that I have next week. One of my like, I'm I don't know if I consider myself a designer or not. But I have a lot of like little tricks and tips that I like to use. Okay, well when I design something and one of the biggest thing is getting a nice font, right. And the first thing that people do is they go to Google fonts. And then they just start scrolling through the, like 12,000 fonts that are available there. And when you're doing like a slide deck, are you trying to do like a hero image on a website, it's nice to have something that is not the same font that everybody else is using on their website, we'll have enough lobster in our lives to make this work. So my my tip is to go to these websites where these independent font designers sell their fonts. And pick up one of those because these fonts are often very ornate, very, very unique. They're not on Google fonts. And you can buy them for 10 2030 bucks for a really, really nice font. And it just makes your stuff look so much better than using one of the built in default fonts. So it's a little bit of a trick or hack that I like to do is to not use a built in one, you can always convert them to Web Fonts if you need to. Some of them can't be though, because they're massive, because each letter is like a big ornate SVG file. But a lot of them can be converted to web fonts and they work out and look really nice. - -95 -01:06:11,610 --> 01:06:14,190 -Scott Tolinski: Are there any places in particular Yeah, - -96 -01:06:14,220 --> 01:06:45,660 -Wes Bos: so I used to go and I was this is going to be my tip is I used to go to this website called sell fi and they would have like every couple months they would have these like packs of like 6000 fonts and all these brushes and I would bought for like 19 bucks I would buy them all and then there'd be like lots of good stuff in there and sell fi they recently discontinued their marketplace. So now I go to creative market where a lot of the same creative sell their their fonts and their their brushes and all that stuff, Photoshop actions and whatnot. - -97 -01:06:46,470 --> 01:06:52,620 -Scott Tolinski: Yeah, cool. I really like in terms of like fonts. I like last last type. Yeah. - -98 -01:06:53,310 --> 01:07:01,200 -Wes Bos: I see us last type a lot. But then it got so popular that you started. I don't know if this was this was me or not? Are they still putting out new fonts? - -99 -01:07:02,520 --> 01:07:03,980 -Scott Tolinski: I think so. Oh, - -100 -01:07:04,380 --> 01:07:18,630 -Wes Bos: I haven't been here in a long, long time. I remember this was like the one of the first like pay what you can font websites, and they're just amazing stuff. So last type is, is really good as well. So that's pretty neat. And these ones, these ones are often web ready as well, which is great. - -101 -01:07:19,140 --> 01:07:25,950 -Scott Tolinski: Yeah. Super cool. Nice. So yeah, you have any a shameless plug shameless - -102 -01:07:25,950 --> 01:08:11,160 -Wes Bos: plug, I'm going to shamelessly plug my ESX course, which I already have. It's now ESX. And beyond, includes all the cinco away and a whole bunch of new stuff that is sort of come to JavaScript. So first, if you've bought it, then just go and log in and watch the new videos, they're just tacked on to the end. I also updated the baybel video to not use the es 2015 preset, but to use the ES, or the Babel preset Nv, which is kind of like autoprefixer for JavaScript. So you just tell it I need to support these browsers. And then it will tell you what to compile and it will tell you what to keep as native ESX because all your browsers support it. So I yeah, whole bunch of Ops, go to esx.io and grab that. - -103 -01:08:11,880 --> 01:10:21,979 -Scott Tolinski: Oh, what am I yeah, I'm gonna plug my new mastering figma course, for subscribers now as well as it's on the store as of like right now. So by the time this episode releases, it'll definitely be on the store store dot level up tutorials, comm mastering figma figma Have you don't know is basically the coolest new design application. It's cross platform. It has these amazing features for collaboration. So, you know, Wes and I could work on a duck Google Doc style. It's basically like sketch meets Google Doc, wow, we both work on the same project, I could see his cursor moving stuff around, we could write comments to each other, like, I think this should be blue. And then you can change it in tweaking and whatever. There's also a handful of awesome prototyping tools and presentation tools. So you can give actual like really great design presentations with your app. Even with like hotspots clicking through without having to take it into envision or something else like that. It would be so handy. I can think of like, a billion times working at agencies where those presentation view like would have just killed it for us. And instead, we made a PDF out of such files and stuff like that. So it's definitely one of those apps. It's totally changed. paradigm shift. For me. It's like Excellent, excellent, excellent. They they just launched this like team libraries feature that allows you to like really, truly organize all of your components. So you can build out your whole component library in figma and store it all in a nice organized manner with labels and descriptions and stuff like that of all your components. And it's superduper flexible, all of your components can be updated and they can be manipulated and transformed and you can create sub components and components without and it is just super super cool. I wouldn't gush over this if it wasn't like my new favorite thing in the entire world. So if you want to learn figma mastering figma on store dot level up tutorials comm or you can become a subscriber to level up tutorials and I'm going to be doing a new series every single month. So if you become a subscriber, you'll get access to all of that new stuff as well. That's - -104 -01:10:21,979 --> 01:10:23,520 -Wes Bos: wicked congrats on launching that. - -105 -01:10:23,970 --> 01:10:27,120 -Scott Tolinski: Thank you been working on it for a long time I bet Yeah, fan - -106 -01:10:28,430 --> 01:11:09,720 -Wes Bos: wicked I think that's it. We did sick pics and shameless plugs. Other than that, if you have any tips for this episode that you want to give to to newbies, make sure you tweet it at syntax FM on Twitter, what what I've been doing is I've just been sharing all of the tips and retweeting them it's kind of cool because like I didn't really know what to do with the the syntax FM Twitter account. And obviously we can post like when the show goes live, but it's it's kind of cool because if you ever looking for like a handful of tips, whether it's command line or VS code or now advice for newbies, just tweet it at syntax FM, and then we'll retweet some of the good ones, then and other people can get some some benefit out of that. - -107 -01:11:10,290 --> 01:11:12,300 -Scott Tolinski: Yeah, we're just gonna smash that. - -108 -01:11:12,420 --> 01:11:14,370 -Wes Bos: Smash that retweet button all day long. - -109 -01:11:14,760 --> 01:11:16,170 -Scott Tolinski: Yeah. Cool. - -110 -01:11:16,200 --> 01:11:18,470 -Wes Bos: Cool. Awesome. Well, we'll see you next week. Head - -111 -01:11:18,470 --> 01:11:28,800 -Scott Tolinski: on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show until next time - diff --git a/transcripts/Syntax150.srt b/transcripts/Syntax150.srt deleted file mode 100644 index eca586899..000000000 --- a/transcripts/Syntax150.srt +++ /dev/null @@ -1,440 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,849 --> 00:00:06,120 -Unknown: the podcast with the tastiest web development treats out there. - -3 -00:00:06,149 --> 00:00:09,000 -strap yourself in and get ready to live ski - -4 -00:00:09,000 --> 00:00:36,720 -Wes Bos: and West boss. Welcome to syntax a podcast with the tastiest web development treats. We got a banger for you today. We have a Jason, how do you spell your last name lengstorf lang stores list are from the Gatsby team who's going to talk to us all about today about Gatsby themes, which is something I am pretty excited about. With me also, as always is Mr. Scott Tolinksi. How you doing today, Scott? Hey, - -5 -00:00:36,750 --> 00:00:56,280 -Scott Tolinski: I'm doing super good. I just got off the weekend. It was Mother's Day this weekend. And my lovely son decided to get his mother. A whole lot of throw up for Mother's Day. Oh, let it let it loose on her. And that's how our mother's day went. But I hope I hope yours all went better than that. - -6 -00:00:57,930 --> 00:01:27,840 -Wes Bos: Yeah, my went mine went pretty smoothly. So I'm thankful for no throw up. Today, we've got two awesome sponsors, we got Log Rocket, which is going to track all of the errors and how they happen. They can play them back to you. And you can see exactly what went wrong in your website. And Freshbooks, which is a cloud accounting is going to invoice expenses, time tracking all that stuff. If you are a freelancer, small business, talk about them partway through the show. So hello, Jason, thank you so much for coming on. How you doing today? - -7 -00:01:27,840 --> 00:01:31,080 -Unknown: I'm doing well. And I'm super flattered to get the invite. - -8 -00:01:31,320 --> 00:01:44,250 -Wes Bos: Oh, yeah, absolutely. And we just started having people on the podcast. And so far, the response has been really receptive. We're obviously a little guarded as to who we let on but Gatsby's got deep pockets. So they paid us enough money. - -9 -00:01:47,220 --> 00:02:00,960 -Scott Tolinski: Disclaimer, Gatsby did not pay us. That was a joke. But yeah, no, Jason, you are only our fourth guest ever on this show. So definitely we are we keep it pretty stingy around here in terms. Yeah, - -10 -00:02:00,990 --> 00:02:14,340 -Unknown: I'm, I'm aware. I've actually, like I kind of had written off the opportunity to get on syntax. I was like, Oh, yeah, I'm not in that. Not in that class of guests. So I'm, like I said, I'm super flattered to get the invite - -11 -00:02:15,990 --> 00:02:17,400 -Scott Tolinski: me to have you. Yeah. So do - -12 -00:02:17,400 --> 00:02:25,110 -Wes Bos: you want to like maybe kick us off? Tell us about about yourself, who you are, where you live, what you do? Anything else you find interesting? Sure. Yeah. - -13 -00:02:25,110 --> 00:02:57,900 -Unknown: So I work at Gatsby, I think my my official title is is head of dev rel, but I also tend to do a bunch of other things. So I always joke that my my real job title is human duct tape. I live in Portland, Oregon. And yeah, I don't know. I've been been doing this for a long time. But I kind of stumbled into it through music. And so I was in a band and kind of learned to do web development design as part of trying to like build a street team and keep this keep this band from failing because we didn't have any music or any money to hire help. Man, - -14 -00:02:57,930 --> 00:03:20,160 -Scott Tolinski: that's that's actually funny because Wes and I both started because of our bands. And almost Yeah, the second guest we had on this show, Travis Nielsen, he also started because of his band. And everybody, we you make music, it's a creative endeavor. Next thing, you know, you need a website, you're pumping out some stuff. And then next thing you know, you're a web dev. That's, that's our story. So yeah. - -15 -00:03:21,419 --> 00:03:29,370 -Unknown: In my case, it was like I realized somewhere about two thirds of the way through the band that I was like, Man, I'm actually a terrible musician, but I'm not so bad at this website. - -16 -00:03:31,289 --> 00:03:34,979 -Scott Tolinski: I only learned that halfway through music school, I did not learn. - -17 -00:03:39,060 --> 00:03:52,130 -Wes Bos: That's great. Um, besides being like, someone who we can complain to on Twitter, like, what does a dev REL do? I know that probably a lot of our audience will know what they do. But let's explain this real quick. - -18 -00:03:52,259 --> 00:03:55,350 -Unknown: Yeah. So I don't know what I do. What do I do? - -19 -00:03:55,680 --> 00:03:57,479 -Wes Bos: relations is the word right? - -20 -00:03:57,539 --> 00:05:34,440 -Unknown: Yeah, Developer Relations. Or you might hear it called like community evangelism, or some, you know, there are a lot of different ways that, that this, this role gets rolled up. But ultimately, my job I guess, is to be kind of an ambassador for for the Gatsby community. We have some core values that are all really heavily centered around the Gatsby community. Gatsby is an open source project first in a business second. And so taking care of our community is the like, primary directive because without the community Gatsby fails, like instantly. So my job is to do things like I you, as you mentioned, I kind of follow around on Twitter, make sure that people aren't stuck. If they do get stuck, I try to jump in and help and point them to resources. I build a lot of examples. So if you want to see a proof of concept of a thing, more than likely it'll be me or somebody on my team. That's that's kind of putting together a little proof of concept of how that works. I write a little bit I I don't do as much writing as I used to. We've just hired Marcy Sutton as our head of learning. So she's taking Going over a lot of that work, and she is far better at it than I than I could ever be. So we're super happy to have her on. And yeah, other than that I you know, I like I run a live stream and it's just kind of like, hey, let's let's get together with somebody else in the community who's smarter than me and like build a build something together. And we typically use Gatsby as kind of a jumping off point for that. But you know, we've we've done all sorts of cool things. But yeah, ultimately, I guess my job is to, like, be nice to people, like try to set a good example in the community and, you know, be be the kind of be that like, build the kind of community that we want to see a Gatsby. - -21 -00:05:34,770 --> 00:06:05,580 -Wes Bos: It's funny you say that, though. But that's like probably one thing that I've definitely noticed about the Gatsby communities, everybody is very kind, very approachable, very responsive. I don't know, obviously, that probably comes as a core value of the project. Because anybody who I interface with on that, especially like, this thing doesn't work. I've got a workshop next week, and it just gets fixed immediately. And people are very kind about it. And people are always willing to take the time. I think it's like, so cool that you can do that with an open source project. - -22 -00:06:05,760 --> 00:07:01,710 -Scott Tolinski: Yeah. For me personally, like I one of my first videos on Gatsby was like pre release of like a pre completion of Gatsby. And I think I did like a, not necessarily an unboxing. But like, here's an introduction to this cool thing. That's, that's happening right now. And it's going to be coming down the line and becoming a little bit more popular here. And Kyle specifically, like tweeted it out, like right after I posted it, and I was thinking like I I just released this, this little video. And here the Gatsby team is already getting behind my content. And they've been so good about that the entire time I've ever worked on or produced Gatsby content. And you know, me personally as the content creator, that signals to me that I should continue to do Gatsby stuff. Because the Gatsby team, the Gatsby project, they're going to support my work, and they're going to share my learning resources that to me, makes me want to work hard for Gatsby to to share the share the love. Yeah, that's, - -23 -00:07:01,800 --> 00:08:27,930 -Unknown: I mean, you know, you you mentioned it was it is one of our core values, we we kind of boil it down into an aphorism we just say you belong here. And so at any given point, we're kind of driving from the standpoint of anybody who shows up into open source belongs and open source and they deserve to be treated with you know, respect and and, you know, welcoming and we need to be looking at anybody who comes in and trying to meet them where they're at, and not being upset, if they don't know things that we feel like they should know, or not being inconvenienced if, if our stuff breaks at a time, that's not great for them, always trying to be as like welcoming and just open as we can be. Because we know that like open source is one of those things that if you show up to an open source project, it's a really weird feeling. Because you're basically showing up into a roomful of strangers, and, you know, kind of without asking, just touching their stuff and opening a pull request and saying, Here's, you know, here's my idea. And if your first experience doing that is somebody like closing it and just saying wrong, or like ignoring it for three weeks, or maybe never responding, the chances of you wanting to come back and do more of that are really low. And so we kind of look at it as like every you know, our social media presence, the the repo, the way that we treat people who talk about Gatsby, all of that as an extension of open source and community. And so we want to make sure that if you, if you do take the time to put that work out there, like we want to we want to notice, we want to say thank you, we want to make sure that you're not shouting into the void, you know, - -24 -00:08:28,290 --> 00:09:08,100 -Scott Tolinski: yeah, I think that is a big thing. Because I mean, I picked up Django and I went into like a Django IRC room and there was a bunch of core contributors, being rude to people trying to learn or saying, okay, you're using the wrong version of Python without like giving access to correct Docs or things like that. And that, to be honest, turned me off of Django for maybe forever. To be honest, if I picked up Python again, I'd probably go look at flask instead just because it's such as a sour experience with some of the some of the people running the project and, and I think that is just a key component of getting people to be really on board with you guys. And it I think you guys do a great job of it. Some of the best I've seen, to be honest. - -25 -00:09:08,899 --> 00:09:34,649 -Unknown: Well, that makes me feel great. I love it because our community kind of like it's a really good virtuous cycle because we you know, we wrote down these values, but the community was already like this, like the the open source project Gatsby was wonderful before the company existed. So we just were trying to like live up to the standards, the company, the community had said, and then you know, we the community mirrors us and we mirror the community. And we just I feel like everybody's making everybody better. It's really nice. - -26 -00:09:35,010 --> 00:11:07,409 -Wes Bos: Great. Well, let's jump into quick Gatsby refresher. I'm gonna go through the super quick because I'm we have had, I think two shows on on just Well, we have one on static site generators, which is Episode 34. And then we also did a, I think one of our more popular episodes this year, which was Gatsby vs. Next and we just broke down the ideas between those two cuz it gets me as a react based framework and so as next Yes, but they're very different things. So we broke down how each of those works. So go back to those episodes if you want to listen to, to the core idea, but I'm going to run through everything real quick. So Gatsby is a statically generated website web app. Next point I have here is that it's, it generates HTML files, which is great. Once you load the page, Gatsby picks it up again, and then rehydrates it into a full blown react application, where you can then do things like loading pages on demand and transitions and all that stuff. One of the really cool things about Gatsby is that everything is sort of backed by a graph qL API. I always say everything goes through Gatsby mean that your your images, your CSS, all of your data. And because everything is sourced through Gatsby, you have this amazing ecosystem of plugins that allow you to I think that's the the real power behind Gatsby is you can compress images, you can do really nifty pre loading things without really knowing what you're doing. And it just works amazingly transpiling, CSS converting markdown, all of that kind of cool stuff is just backed by the sheer fact that all of the stuff needs to first go through the graph qL API. - -27 -00:11:07,620 --> 00:11:36,450 -Scott Tolinski: Yeah, if you want to, if you want to knock someone's socks off with Gatsby really quickly, you just show them the image component where generates an image, maybe a blurry image and fades in the other one, or even better an SVG image that then fades in their image, Once it loads to give this insanely fast perceived loading time, even with decently sized images. That's like one of those those key examples that always show people when working with Gatsby, it's like, Look, look at how easy it makes some of this stuff, look at how easy it makes this, you know, - -28 -00:11:36,689 --> 00:12:27,720 -Wes Bos: Next up, we have the kind of there's three files behind Gatsby. And I think it's probably worth knowing about these files as we get into what themes are. So there's a Gatsby config file, which determines you kind of say what plugins you'd like to use, as well as some other site metadata that goes in there, and all the settings as to how your plugins work, that all goes in there. Then you have a Gatsby node, which is a this runs at build time. And it will allow you to hook into different points during the Gatsby build in there. You can do things like source content, dynamically create pages, create links, things like that. And then finally, have your Gatsby browser which contains code that runs in the browser? And you can I actually don't use this on my all that much myself. But you know, I look into things like routing service workers run it, what do you use it for it Scott animations? Oh, - -29 -00:12:27,750 --> 00:12:52,620 -Scott Tolinski: it allows you to sort of you couldn't you could build a wrapping component that wraps around things, because when Gatsby moved to Gatsby version two, you now have maybe a little bit, the entire page refreshes, right? When you go into a new page, essentially, in terms of the components that you use. So even if you have your layout there, you can't just wrap something in an animation. So this gives you the opportunity to wrap the entire route change in an animation. So - -30 -00:12:52,649 --> 00:13:12,899 -Wes Bos: yeah, so you can go a bit higher, because like in next chasse, we have the underscore document and the underscore app, and these are the higher level than your page. And at Gatsby level. I thought that the highest you could go was was the page but by using these you can you can maintain that component. Well, it could register like - -31 -00:13:12,899 --> 00:13:20,070 -Scott Tolinski: a rapper and have that rapper do stuff. You could also do that where you you could make your own dividers and things like that if that right. - -32 -00:13:20,070 --> 00:13:22,110 -Wes Bos: Okay. Yeah, awesome. - -33 -00:13:22,380 --> 00:13:45,899 -Unknown: So Gatsby browser runs on the client side. And then Gatsby SSR does, what would be client side things during the server side render. So it's a way to, for example, if you were going to wrap a provider around something to get like an initial state, or to do things that would or if you needed to, like make sure that your your client side stuff doesn't break, because you're using a provider during server side rendering. You can stub it out or something. - -34 -00:13:46,320 --> 00:14:08,760 -Wes Bos: Ah, cool. That's good. All right. So that's the one on one of how Gatsby works. And what you're here today to tell us about is Gatsby themes. Because, like, maybe start us off with like, how do you currently do layouts in Gatsby? And what are Gatsby themes? I actually haven't looked all that much into it because I've kind of been waiting to talk to you on this about it here. - -35 -00:14:08,909 --> 00:15:57,360 -Unknown: Sure. landscape is you have your stutter, which is kind of like a prebuilt Gatsby site that you would run Gatsby new or you would clone and then you end up with kind of like the this is your config, all the plugins are there and the the like various settings. So you have to go in and edit that. And you know that that's worked fairly well. But the The downside is that it's really difficult to do things like get upstream updates, right. So if you if you're using a starter and that starter changes, you would have to manually port any changes pretty much as soon as you run Gatsby new because it's like creating a fresh clone. it deletes the Git history and everything so that you have your own. So the way that we're doing it in Gatsby themes. Gatsby themes are effectively just plugins, but they're plugins that can install other plugins. So the way that that would work is like for example, if I wanted to build a For a blog, to build a blog site, you would need to install like let's say I'm going to use MDX I would need to install Gatsby MDX, I would need to install the file system, I need to install some image processing, and a handful of other plugins something to style it with. And all of that then lives my Gatsby config with a theme and a blog theme, I can install all of those things into a Gatsby config, I can build the templates, I can set up some base styles, I can, you know, set up the the where the content is going to be sourced from. And then I can take all of that and I can package it into like an NPM module, then I can npm install my theme as a Gatsby plugin. And that plugin then has all of the stuff pre configured so that theoretically speaking, I could have a whole Gatsby site that runs where I've got a folder called posts, and that's got MDX files in it. And I've got a Gatsby config that installs the theme. And that's it. There's no no other code required to run that block. Hmm. - -36 -00:15:57,630 --> 00:16:03,600 -Scott Tolinski: So is there an opportunity for multiple themes? Does that make any sense? Or is that is that totally off base? - -37 -00:16:03,750 --> 00:17:18,720 -Unknown: Yeah, so so that's actually what I think is the most exciting thing about Gatsby themes is that they're composable. So you can horizontally compose them. So like if you installed the blog theme, and then later you want to do like set up a shop, you're not having to find a theme that does blog and e commerce, you just find an e commerce theme, and install that as well. And then now you have like a blog and an e commerce site both set up on your on your like simple Gatsby config. Again, no code written, you're just you know, you're just pulling content from where it needs to come from. And then what makes us really exciting is that if you want to vertically vertically compose themes, you can say, take your blog and your e commerce theme. And then put both of them underneath a like style theme that sets design tokens or overrides the header selectively, we have this thing called component shadowing, where if you've got a theme, and let's say that theme has like a header component, a post component and a footer component, and you want it to swap out the header, you can you can selectively shout out just the header component in your your site or a child theme. And it gets all the same props as the header component in the theme. But you can completely override it, including like you can do cool stuff like import the theme header and just add some new props to it so that it looks different or behaves differently than it would before. - -38 -00:17:18,830 --> 00:17:21,300 -Wes Bos: Are you familiar with how WordPress works and themes? - -39 -00:17:21,479 --> 00:17:43,890 -Unknown: Yeah, it's it's Yeah, really similar in, in a lot of ways to how WordPress themes work. But there's no without like the kind of global nature of WordPress themes where you're calling, like, you know, global magic functions. Yeah. Yeah. So it's, it's really similar in that in that sense, the major benefit here is that it's like WordPress themes. If you can install multiple WordPress themes. - -40 -00:17:44,520 --> 00:18:47,280 -Wes Bos: That's the end they WordPress themes that can have dependencies, and in logic inside, because sometimes you see that with WordPress themes as they just jam everything in. Or they say like, make sure you've installed these eight other plugins because there's no right no concept of dependencies in WordPress land. Mm hmm. That's really cool. It cuz like I had a Gatsby workshop a couple weeks ago. And people were asking about plugins. And I was like, well, let's just crack one open. And I was like, it's just a Gatsby node. And like, it's, it's not anything that you weren't already doing in your your Gatsby website. It's just that you took all of this, like these things that were related and possibly complex, and you put it into its own plugin, or in our case, now we're just gonna call it a theme. And you can package it up so that it's easily installable. And it also can live in like a separate repo, I imagine this would be super helpful for somebody who, like an agency that needs to reuse a certain theme over and over again, or reuse a set of optionality over and over again. - -41 -00:18:47,570 --> 00:19:15,750 -Unknown: Yeah, cuz what's really exciting about this is like you could create, like a Gatsby theme, opt in or something. And that would be like a way to have a bunch of base config and controls for just an opt in component that you could then drop in anywhere on on any other part of a site. So you can you can almost use it as like a an even higher powered design system, because in addition to packaging up components and styles, you can also package up functionality and data handling. - -42 -00:19:16,259 --> 00:19:45,540 -Wes Bos: Oh, yeah, because I'll probably bring a lot back to WordPress. But I think that's a lot of our users are currently moving from WordPress land to JavaScript, headless land and Gatsby is like the the main thing there. The thing about like WordPress themes, you can put functionality, but that's not really what they're for. You should probably put that into a plugin. With this. You can you can just package up how it gets its data, how it transforms its data, and how it displays it all in one go. Is that true? - -43 -00:19:45,800 --> 00:21:33,180 -Unknown: Yeah. And depending on how you structure your themes, like you can, you can get a piece from each thing. So it's probably a little early to talk about it. But we've we've got some ideas around what we're calling data abstraction which is which is going to be really exciting. But you know, the it all kind of boils down to this idea, which I think is pretty is fairly present in Gatsby already. And we just want to improve it with this next iteration, which is a teaching concept called the progressive disclosure of complexity. And what that means is that we're trying to set the abstractions in the right place, so that somebody who doesn't care how Gatsby works, doesn't have to care. You can just say, I want to blog. And I want to write markdown. And so I'm going to install Gatsby theme, you know, blog markdown, and I'm going to have a folder full of posts, and I have a blog, I don't have to care, like how that works, it just works. And then for somebody who wants to go deeper, they can selectively remove abstraction. So instead of having to go from like zero to 100, where if you you know, with, with some apps, you get like a great boilerplate, but as soon as you want to move beyond what it does, you have to kind of reject the whole thing. And now you're dealing with like all of the config. With progressive disclosure of complexity, you're able to say, Well, I want to change one piece, and then you can selectively eject that one piece and change it. So you get to kind of choose your own adventure. If you don't want to deal with graph QL. No big deal, you don't have to. But if you want to customize that query and do some custom components, absolutely, like just pull that out, if you want to drive all the way down into the Webpack, or Babel config hundred percent, we got API's for you to do that. But you should never have to, as a developer, you know, we're ultimately thinking like, we'd love to see this be something that designers could use, without ever having to write any code, they can just kind of install the right themes. And then set design tokens and make these like beautiful websites without having to write graph qL queries are figuring out how react components work, there's going to be tweaking. - -44 -00:21:33,800 --> 00:23:08,640 -Scott Tolinski: Yeah, I think that's such a huge thing. And we we've talked about a lot on this, this show in particular about how we're not fans of doing the complex sort of boring stuff that you have to do in web development that we all just sort of accepted as like this is config you have to deal with this is stuff you have to deal with. But yeah, reality things are getting a ton easier on all the fronts, just by simply making the hard stuff very easy. And in your case, you can like you mentioned the progressiveness of it, that being able to will only pull out the harder things, the deeper layers as you need to go. And I think that's absolutely fascinating, because again, like you You mentioned, having to eject from a platform, and then you're left with the entire config. And having to deal with that entire config can be really super daunting. And especially if you just wanted to install like, this is an out of date example. But in an older version of what's called a create react app, you had to eject to install sass, and a lot of people wanted to use sass, so then you're rejecting really quickly, and then you've lost sort of all of the benefits of having that initial platform. And you're sort of stuck having to learn Webpack if you don't know it already. So I'm absolutely fascinated by that progressiveness of that I think that's something that not a lot of people are doing in any sort of way like that. And that is something that I think Gatsby does very well, overall already. So the fact that it's just going to get more like that, especially with themes here. I'm very excited to hear about that. Hey, Wes, I wanted to take a quick break to do a sponsor now. I think it's probably a good time for that. Yeah. 25 minutes. Yeah. - -45 -00:23:08,670 --> 00:23:09,900 -Wes Bos: Yeah, I agree. Okay, - -46 -00:23:10,110 --> 00:24:28,830 -Scott Tolinski: cool. So really quick, I wanted to dive into a sponsor break. If If you want to reduce some of the complexity in your error handling, you'll want to check out one of our sponsors, which is Log Rocket. Now Log Rocket gives you sort of a view under the veil of all of the errors and bugs that are happening on your website, as the users are experiencing them yourselves, you get a play by play session replay, that gives you all of the Network tab it gives you as you counsel, it gives you the DOM, it gives you your Redux store at the time the user hit the bug along with a video. So you can see exactly what happened when a user clicks something and the whole thing blew up, maybe they click the wrong pixel. And that pixel disintegrated your website. So Log Rocket is going to allow you to trace find that error and see exactly what's happening. So you're gonna want to check out Log Rocket Log rocket.com, forward slash syntax, and you will get 14 days for free. So again, Log rocket.com forward slash syntax, try it out and see why this is the best way to get the visual insight into the errors and bugs that are happening on your website. Cool. So if you obviously don't have to write a whole ton of code to get started, you're not going to have any errors. So I think that's a nice little goal of Gatsby themes here. - -47 -00:24:32,070 --> 00:25:06,360 -Wes Bos: So what I foresee is like somebody goes out and gets like a real estate Gatsby theme, or a car salesman, Gatsby theme, or something that integrates with Shopify or something like that, in once someone activates this thing, because it has functionality and UI that sort of comes along with it. I know Gatsby doesn't really cover like UI at all right? Like it's not really the thing where like with WordPress when you activate it, you might get like a setting panel. That's, I don't sure if this is a really a question or whatever. But that's more something for your CMS. Is that right? - -48 -00:25:06,600 --> 00:26:17,670 -Unknown: Well, So currently, yes. Like the the way that Gatsby is built right now is like anything in the UI is in user land. One of the goals that we have for themes is that as we start moving through, and seeing what the community is coming up with, that, we'll start to see some we want to see people start to solidify around some conventions for how we want to handle that with with you eyes. There are some ideas. Jackson on our team, Jackson black on Twitter is he is working on something that he's been calling like, system UI and theme UI, which are kind of utility libraries that set various tokens, those could pretty easily be extracted into a like settings UI, if you wanted to make that a thing, where you choose colors and set like fonts and the you know, kind of the general spacing and stuff. So we're working on ideas for how to manage the way that something would look. But yeah, as as of right now, those are all pretty early ideas. And there's a lot of like, you know, we're hoping that it starts to solidify, but we're not quite sure what the community is going to kind of pick up and run with. - -49 -00:26:17,670 --> 00:26:18,480 -Scott Tolinski: Hmm, - -50 -00:26:18,480 --> 00:26:32,400 -Wes Bos: what about like, Is there any, any chance that you're going to take a stab at doing a headless CMS yourself? Or is that more something's left to all of the different headless CMS that are currently available? - -51 -00:26:32,760 --> 00:27:35,070 -Unknown: Like I feel like I should never say never, I think, at present, it doesn't seem like something that would be smart for us to prioritize. Like at the moment, Gatsby's in this really great space where like, what's good for Gatsby is kind of good for everybody connected to Gatsby, we are a tool that is like it makes headless CMS is more powerful. It's, it gives you more flexibility, as a developer, you know, allows you to integrate all of these third party tools really well. So if we start like launching a headless CMS, now suddenly, where we're kind of like, putting a like putting a weird spin on that relationship, I think that we if we find like a very specific need, that's like, ultra niche for Gatsby, then Sure, there might be a reason that we would start to do that. But ultimately, I think what we're aiming for instead, is more of like, how can we be really good at being like a layer of polish on top of the headless CMS experience? Okay. And that's, that's kind of what we've been thus far. And I think what we what we would like to continue to be as we go, - -52 -00:27:35,310 --> 00:28:19,890 -Wes Bos: Well, that's good first sponsors of this podcast that we've we've like, it's kind of funny, because we've had tons of sponsors on this podcast that our headless CMS is or jam stack based e commerce or anything like that. And even if you go to the jam stack conference, which Gatsby is always at, there's tons of companies that are sort of in that space right now trying to trying to make that work. And it's it's kind of funny, because like it Gatsby's the darling, and then everybody else is sort of this, this whole ecosystem is sort of built, not necessarily just around Gatsby, it obviously works with anything, any, anything that you could possibly want to use, but it certainly is a very common use case. - -53 -00:28:20,280 --> 00:28:28,530 -Unknown: Yeah, it's honestly one of my favorite things about Gatsby and one of the things that attracted me to the company is that it's, it's a very non competitive business model. - -54 -00:28:28,530 --> 00:28:29,520 -Mm hmm. - -55 -00:28:29,520 --> 00:29:58,140 -I kind of see Gatsby as a tide that has a potential to lift all ships. And so if we continue to do the stuff that we're doing, every advance that we make, makes, like everybody in the headless CMS community better. And when they make advances, you know, we have the opportunity to kind of elevate the best ideas so that other headless CMS does have an opportunity to continue to innovate or kind of like find a way to be compatible with whatever new thing is coming out. An example of that is, we have a product, our first commercial product is called preview. And the way that it works is that if you are working with a non developer on your team, and they don't want to have to run a local copy of Gatsby to see changes, like as they're making content edits, then preview allows them to have like a private URL, where they can see draft content, kind of hot reload the same way that you would if you were developing locally with Gatsby. And in order to make that work. Like you know, the headless CMS providers have to have like a web hook set up so they can notify us to pull in new content and all those sorts of things. But then like a headless CMS, like sanity.io has come up with this whole new innovation where they are basically opening up a socket and just streaming changes. So it feels absolutely instantaneous to do that. And so by, you know, by them building that, that makes our product better by us building preview that makes them you know, puts like a better use case in place for their for their feature. And hopefully we're like more and more headless CMS to start to play with that idea. - -56 -00:29:58,410 --> 00:30:28,110 -Scott Tolinski: Yes, and it is actually been a long time. A sponsor of syntax, and we've been sort of talking with them for a long time. So it's really great to hear how this I don't know this whole community is sort of growing together right now. And we seen the growth firsthand from when we first started talking about sites like Gatsby to now where the jam stack has just totally taken off in such a such a great way. And like us, has mentioned West that Gatsby is like the at the the darling of it. It's at the very forefront. - -57 -00:30:28,470 --> 00:31:18,690 -Wes Bos: Yeah, absolutely. It's pretty neat to see that. By the way, we should say like, Sanity is not even sponsoring this episode. But no, we don't talk about it, because they've obviously seen that pain point in people trying to use these tools. And they're just gung ho for making this a smooth process, because it is, is a bit of a bumpy ride people have been using their existing tools for for probably 10 years now. And now we start to see that we're not just moving to these types of websites, because it's cool. I think the the huge use case for moving to a headless jamstack with something like Gatsby is that it's is the performance, the actual user experience is going to be much faster. I think it's just a better experience for the developer and the user at the end of the day. Do you think that? Yeah, - -58 -00:31:18,750 --> 00:32:05,160 -Unknown: yeah, I think you know, the, the thing that's really cool about all this is like, it doesn't feel like we're racing people to get features to market, it feels like we are like in a brainstorming session with the entire internet. You know, it's like we sit around and, you know, we'll get in a, we'll get on a call with Sanity. And they'll be talking about some they're working on and we're like, oh my gosh, that's so cool. Like, we want to do something like that. And so then we start like, riffing on a like, complimentary tool. And that's been happening with with companies all over the place. And again, you know, you mentioned that Gatsby is kind of at the center of it, or the darling and I think that's explicitly because we see this as like a buoy for for other companies. And I think if we were standing there saying like, Oh, yeah, we're gonna take out headless CMS, or whatever, that suddenly becomes a significantly less welcoming environment to be in, you - -59 -00:32:05,250 --> 00:32:20,250 -Wes Bos: know, yeah. Yeah. That's interesting. I like it, because it doesn't seem that there is there's obviously competitors to this type of thing. But it definitely seems like Gatsby is just standing out. And a lot of the industry is sort of rallying around it, which is cool. - -60 -00:32:20,850 --> 00:33:09,840 -Scott Tolinski: Yeah, I think one of the things the reasons why that is, is just because of Gatsby's approach to the pain points of things that we all deal with. And I think they're very good about having ears open. Because for instance, we often talk about some of the the maybe the the barriers to entry for something like Gatsby, let's say you have a WordPress site. And a lot of times the barriers to entry are not even necessarily a barrier to entry. But somebody might say, Well, when I update my WordPress site, it updates automatically. And the front, we don't have to wait for any sort of rebuild or anything like that. Without Gatsby. And now Gatsby's hearing net with this streaming ideas, streaming data, you're seeing hot reloaded data, things like that, I just think that you guys have such a good understanding of what the community needs, and are building and iterating upon that it's one of the most exciting aspects about the platform overall. - -61 -00:33:10,080 --> 00:34:09,980 -Wes Bos: Alright, so quick break for one of our sponsors, which is Freshbooks. Kind of one reason why I'm so excited about this whole Gatsby thing is because I foresee the sort of industry of people who build small to medium sized websites for clients. That's pretty big industry. And a lot of those people currently work on WordPress, and we're starting to see people move over to something like Gatsby. And when you want to build people for those websites, you want to use fresh books. So go to freshbooks.com Ford slash syntax that's gonna get you a 30 day unrestricted free trial, you're going to Bill all of your clients, you're going to send them when they don't pay, it'll automatically send them update reminders that are not passive aggressive, you can log all of your expenses in there, you can keep track of how much time you spent working on all of your clients, check it out@freshbooks.com for slash syntax. So maybe that's a good question right here. Jason, what do you think about WordPress, - -62 -00:34:10,259 --> 00:35:16,400 -Unknown: I love WordPress. I mean that's how I made my living for for almost a decade. I had an agency after I got out of my band and and was doing exactly what you just said building websites for small to medium businesses did that for you know, a very long time built a ton of websites and and WordPress was almost always the tool of choice because it just had it had the flexibility that I needed, you know, we we set up a kind of like a really simple child or base theme. And then we created a child theme of like, bespoke everything for for each client. Mm hmm. Which is great, you know, is a really powerful tool and so I kind of you know, I still think it's a great admin interface I think, if they can if they can work through the problems of this kind of Gutenberg turbulence, especially around like the the accessibility problems they've been having, and and Kind of the other just seems like a little bit of like PR weirdness around Gutenberg. So I think if they can weather that storm, I think that WordPress still has a great opportunity to be, if not an all in one solution, at least a really heavy player in the headless CMS space. - -63 -00:35:16,710 --> 00:35:35,790 -Wes Bos: That's really cool to hear. It's funny that you you've sort of had the same grow up as me as well. You go from music to sort of agency world. Do you see that Gatsby is gaining popularity in the agency's small website space, like, like, or do you even know like, what type of person is using Gatsby? - -64 -00:35:35,790 --> 00:37:21,860 -Unknown: Yeah, we're seeing agencies are actually one of the bigger upticks in Gatsby usage. And I think there are a lot of reasons for that we had Brian Webster from delicious simplicity has has talked about this a lot and his agency, they were able to do this amazing thing where they were able to basically cut the cost of their bids in half, which meant that they would win more bids. But they were building so much faster, because everything was portable, that their their hourly billing went up. So effectively, they were able to make more money by charging about half because Gatsby cut so much of the like boilerplate and DevOps and other other kinds of Yak shaving out of their their process, which is a really cool thing. But yeah, we've seen like, some some of the really exciting ones like Nike launched the Colin Kaepernick just do it campaign. The website for that was a Gatsby website built by an agency. We're seeing some some really cool stuff from like, Well, actually, I guess just like a lot of agencies are starting to use Gatsby is especially for like landing pages because it's so quick to get something up and out. Yeah, but we're starting to see more and more advanced stuff. I mean, I it's kind of on us as a company to to do a better job of showing what's possible. So like, you know, like shop Flamingo, from Harry's, the razor company, they just built like a really cool ecommerce site with Gatsby that's got like, authentication and and you know, shopping, you can buy stuff. It's really, really cool. And that's a full Gatsby app. That's not really agencies. I guess that's that's just a company. But yeah, it's it's been really, really interesting to see. And I do think that the agency stuff is one of the big markets for for people who are going to get into Gatsby because of all the things you said the the portability and the the like, you know, lack of Yak shaving all that good stuff. - -65 -00:37:22,260 --> 00:37:47,480 -Scott Tolinski: So the e commerce bit, I think the our large part of our audience would be really interested to hear a little bit more about how people are doing e commerce on Gatsby. I know one of the developer on level up tutorials. Eric did a site rachio he was built with Gatsby. I think he use Shopify with Gatsby. So there is a number of options between like snip cart, Shopify, what sort of approach Are you seeing a lot in the Gatsby e commerce space? - -66 -00:37:47,670 --> 00:37:58,590 -Unknown: I think the one that we're seeing the most is Shopify. And I think that's because we have a canonical example, open sourced. Our own swag store is a Gatsby app built on Shopify. And which is your - -67 -00:37:58,590 --> 00:38:05,760 -Wes Bos: awesome swag, by the way. Cheaper than going to target and buying a T shirt. Just go buy a Gatsby shirt. - -68 -00:38:08,550 --> 00:39:05,610 -Unknown: Yeah, we we wanted to keep it like we actually lose a little bit on it because we don't charge for shipping. But we wanted to keep it basically a cost and and we did that because we first of all, want everybody to be able to get Gatsby swag. And second of all, because we give it away like anybody who contribute to PR or launches a tutorial or or like helps out in the community we we give you a discount code for swag and invite you to join the the Gatsby. org as a maintainer. So that's like a that's a big thing for us. And we wanted to make sure that the swag was something that people would actually want, which is why we put a little more effort into it and tried to get like really cool things from around the you know, from like a good ideas that we borrowed or just outright stole from other projects that are doing cool things and wanted to make sure we had items for women like we got a sentence crunchy and like a racerback dress which the Razorback dress I straight up stole from Tracy Lee, from the node node swag store. Yeah, you know, it's been like it. - -69 -00:39:06,149 --> 00:39:07,290 -Scott Tolinski: That's the way to do it, though. - -70 -00:39:08,580 --> 00:39:54,570 -Unknown: Well, yeah, right. Like, yeah, no, I'm not gonna try to invent the wheel. So it's really nice to just see what everybody's stoked about and be like, cool. Let's do a Gatsby version of that. But yeah, to get back to your original question, the the e commerce thing, because our swag store is open sourced, most people have been referring to that as kind of their starting point, if they're doing e commerce. I've also done a live stream with with Thor from stripe, where he taught me how to use it for like, more simple cases. So if you were going to sell a one off thing and didn't need a cart, then stripe is really really good for that. They also have like a full ecommerce solution that, that I didn't play with that much. But it's, it looks like it's pretty full featured. So if you want to use stripe instead of Shopify, there's also some some open source code out there. I'll be it a little, a little more proof of concept. - -71 -00:39:55,170 --> 00:40:17,480 -Wes Bos: That's pretty interesting. I also heard of like, there's always questions around like, how big Have a website is too big for Gatsby, you know, just because the the whole idea is that you do have to regenerate the entire website at some point. But I have heard of a couple for now many thousands of products and they do regenerate it 678 times a day. I don't have anything to say about that. - -72 -00:40:17,630 --> 00:41:56,940 -Unknown: Yeah, I mean, so I guess the the major things that are worth considering with Gatsby are like, it depends on how quickly items go up and down. Because if the items stay fairly consistent, and what you need to keep is like whether or not it's in stock, and what the price is based on, you know, whatever sales or something, then you could statically render all of the products, but then dynamically pull in the inventory status and the price. And at that case, then you don't actually have a whole lot of rebuilds required. Because the you only need to rebuild when a product appears or disappears. So if you're comfortable showing a sold out for a while until it rebuilds again, and and then it goes away, then you could run you know, huge number of products on the store, where it would start to get kind of tricky is if you wanted to rebuild, you know, 10s of thousands of projects or products on every price change every inventory change, you know that that could get a little hairy, and it's something that we are working on. We've got a we've got a proof of concept right now in development of incremental builds, which I'm super excited about. Yeah, yeah, we've been working with Anthony morcar, who is, you know, one of those like kind of mad genius people. And he's been sitting and tinkering with Gatsby for a long time. And he just he's been subtly making changes to the underlying code of Gatsby so that we can do, like, only rebuild what actually changed. So some really, really powerful stuff is coming down the line that way that's gonna start to close that gap on whether or not you know, you can run like if you want a million page site. Yeah, your first build is going to take forever, but after that, you'll only be rebuilding what actually changed? - -73 -00:41:57,330 --> 00:42:28,770 -Scott Tolinski: Sure. You mentioned that having e commerce the products be statically built, but the inventory be dynamic? Well, I've been wondering a little bit about that dynamic aspect in Gatsby because typically, people think static, static static so like what it does, the Gatsby team has like a the standard way of doing dynamic content, the way that they would prefer you even using things like the graph qL API's? Or do you recommend throwing another graph qL way of connecting Apollo or something into a Gatsby site? Or what's the suggested solution there? - -74 -00:42:29,130 --> 00:44:00,000 -Unknown: I've done it a couple of ways. I think the the current most popular and probably best documented solution is to use Apollo. If you wrap your site in an Apollo provider, then you can do dynamic queries. And like you can send mutations as well. So if you want to do rewrite from your your website, you can, Apollo makes that really easy. They've got great Doc's they're a great team very helpful. I've also done it in way kludgy ways, like just installing axios and firing off POST requests. So you can do it whichever way makes the most sense to you, depending on how full featured your solution needs to be. So like I the one where I did it cleverly, I just needed to submit one little feedback widget. And so I just used axio, so that I didn't have to install like a big library to make that work, or I guess bigger than axios. And then for something like no swag store, I use the Apollo provider because that that gives us way more flexibility and and allows us to use not exactly the same graph qL API's because the Gatsby graph qL API's only run during the build, we don't keep those live. That's one of the benefits of Gatsby is like, once you've built the site, it just sits in a static asset folder. And that means that you've got, like, in addition to the performance benefits, like lowered costs, because you're not like maintaining or scaling a node server database, and also increased security because if somebody hacks a Gatsby site, there is no path to the server or to the database, because they're just just a bucket on a CDN, so they can deface the site, but they can't like get to user data or anything. - -75 -00:44:00,300 --> 00:44:02,010 -Scott Tolinski: Yeah, that's, that's great. Yeah. - -76 -00:44:02,220 --> 00:44:13,020 -Wes Bos: So I know you just got back from all hands meeting in New York. With Gatsby. Is there any secret things you can tell us? Is there anything secret about Gatsby? Or is it all just all open source? - -77 -00:44:14,460 --> 00:45:23,280 -Unknown: We uh, we Yeah, we don't really do a lot of secret. We do have private repos for like the the commercial part of the business. Yeah. You know, we we had a Gatsby days where Kyle Matthews, the the CEO basically fully announced what the the commercial business goal is. And so you know, we've got preview out now we're trying to get preview to an open beta here really soon, so that anybody who wants to can sign up and try it, and then to a general availability shortly after that, and then we've got, we want to get like a customized Gatsby build pipeline in place. because our goal is to in order to do those incremental builds, you have to be able to like stand up parallel machines, which means that we need like Kubernetes clusters and these kind of auto scaling things. There's a lot of infrastructure that goes into it to actually make it fast. And in order to do that, we need to have a Like product that we can sell because it's like otherwise you got to build it yourself. And it's going to be really expensive and cumbersome. And you're back to DevOps. So kind of what Gatsby's product is going to be, is the same level of ease that you have to develop a Gatsby site locally, we want to create that same level of ease for like deploying and managing, like on a on a large team, a Gatsby site. - -78 -00:45:23,580 --> 00:45:37,350 -Wes Bos: Cool. What about Is there anything happening with queries right now, in terms of them? Are those expected to change at all? I know, there's some pain points around static versus dynamic queries that it can only be done on a page. - -79 -00:45:37,590 --> 00:47:27,030 -Unknown: Yeah. So said on the the core team has been working on a proof of concept of kind of a unified query in Gatsby, we're also we we shipped a while back, something called schema customization, which allows you to do like you get a little more control over the Gatsby query, instead of being required to use whatever the whatever is inferred in the schema. So between those two things, we're hoping that that starts to unify things. The other thing too, is, we're really just trying to get to the point where unless you want to use graph qL, you shouldn't ever have to see it. Hmm, that data abstraction stuff that I talked about, is going to play a big part in this because one of the things that we're working on that that schema customization unlocks is the ability for like you, as a developer can declare a generic post type, for example. So you know, Title, Author content. And behind the scenes, you have an adapter, so you convert a WordPress post into a generic type. And then the theme gets built on the generics. So later, you could swap out your adapters and use markdown and the data source changes. But like you, as a developer, don't have to touch the graph qL queries, because the generics are already written. So effectively, you can just expect that all of your components are going to get a post object with a title, date, or title, author and content. And you can just use that, regardless of where the data came from. So we're trying to you know, again, it's just another of that, like progressive disclosure of complexity. You shouldn't have to deal with graph qL at all. But we are going to be working to make the graph qL interactions smoother. We really want to get static queries to the point where they they can be dropped in anywhere and use variables. Cool. I know that's at least the current stated intention. We'll see if, if that ends up being possible as we get further into the design. Sure. Yeah. Because the way that works is very complex. There's a lot. - -80 -00:47:28,260 --> 00:47:35,790 -Wes Bos: Yeah, it's it's not a hard thing to it's, it's not an easy thing to solve, right. Like you think like, oh, there's variables, right. But the because it - -81 -00:47:37,530 --> 00:47:43,920 -Scott Tolinski: does say that. It is tossing the variables. That's cool. Just add an option. Yeah. Just worried. Yeah. - -82 -00:47:44,640 --> 00:48:07,740 -Unknown: Yeah. And we the solutions, we found that are easy, add even more restrictions. So the way that you can use them, which seems like a bad idea, because now it's like, not only does it work in a way that's not consistent across queries, but now it works in a way that's inconsistent across queries. And there are magic rules that you have to know. So we're trying to figure out how to how to solve them in a more robust way. Cool. - -83 -00:48:08,100 --> 00:48:13,560 -Wes Bos: All right. I think do you have anything else to say? Or Scott or Jason? - -84 -00:48:13,979 --> 00:48:15,180 -Scott Tolinski: I don't have anything. Yeah. - -85 -00:48:15,180 --> 00:48:17,340 -Unknown: Oh, I'm, I'm happy. - -86 -00:48:17,609 --> 00:48:31,710 -Wes Bos: Cool. All right. Well, let's get into some sick pics. Sick pics, our picks that are sick. Things that we love in our life. I don't know how to how to describe it. It's a sick pick. Do you have a sick pick for us today? Jason? Yeah, - -87 -00:48:31,710 --> 00:49:04,290 -Unknown: I have been. I've been talking about talking with you about this actually on Twitter. I just bought a kamado Joe one of those lag grills. And I have been absolutely loving that thing. And, like, I feel like it's one of those things where I bought it. And I was like, this is a stupidly expensive thing to buy. And then I got home and I cooked like I made pizza with it. I've done burgers and steaks. And it all comes out so much better than when I tried to do it in my oven or on my on my stove like my stovetop. And so that that is probably the thing I've been most excited about recently. - -88 -00:49:04,649 --> 00:49:39,660 -Wes Bos: Man I love I so I've got a Big Green Egg, which is the like even more expensive version. But the tomato is the kamado Joe like sort of swooped in and it's cheaper and they fix a lot of the design flaws that the Big Green Egg has. And it's just like so good. It's the same thing. At the end of the day you have charcoal. And people always think like it's kamado Joe versus Big Green Egg but we're really together versus the trigger. Electric pellet Easy Bake Oven grill people. You know that? Do you know what the trigger is? Yeah, - -89 -00:49:39,660 --> 00:49:42,930 -Unknown: when I when I bought the tomato, Joe, they were trying to sell me one of those triggers. - -90 -00:49:42,930 --> 00:50:23,520 -Wes Bos: Yeah, everyone knows like everyone does that. They're like, Oh, I'm gonna get a smoker and then they come back with it. And I know there's a lot of people that actually have these things, especially now because Joe Rogan is now advertising for them so everybody's going to get one. And it's funny because it's not as romantic as Like getting the charcoal and lighting it and the smoke and the it's like an art right and then the the trigger is just, you put pellets in, you plug it in and it goes and it makes amazing food but you you lose the sort of the romance of, of actually smoking weed. I was saying the other day, it's like the instant pot of smokers where you just like, it's amazing. It's just there's not a whole lot to it. - -91 -00:50:24,720 --> 00:50:41,820 -Unknown: Yeah, and as an instant pot owner i can i can empathize with that, like I love you know, I feel like you have to opt into your complexity, like, like just pulling that back in. Like I really like the work of using a charcoal grill. I really don't like the work of like minding a Dutch oven or something. - -92 -00:50:42,090 --> 00:50:49,290 -Wes Bos: Totally, totally. Exactly. It's it's a funny place to go to. Man, I forget what my sick pick was gonna be. I'm just gonna pick it up. I - -93 -00:50:49,290 --> 00:51:20,670 -Scott Tolinski: got a I got a good theme here. I gotta keep the theme gone. Go fine is going to be another thing that eases the complexity of something that could be considered a process, right? I'm people who listen to the show. No, I drink a lot of tea. One of the things that I use in my everyday life 24 seven is my zojirushi water cooker. It's A water boiler. That's the standard. I always call these things water cookers and like a tea kettle, I'd be like where's the water cooker and my wife would be like you need a kettle - -94 -00:51:22,050 --> 00:51:23,430 -Wes Bos: cooker. Yeah, the - -95 -00:51:23,430 --> 00:52:12,180 -Scott Tolinski: water cooker. It cooks the water. So this is LG Ruchi. It basically boils the water it keeps at the very specific temperature will keep on set to 175. Although you if you're like a very you know really intensely about it, there's actually one that allows you to set the exact temperature This one is just as for temps, the one that I use, it's four liters, keeps your water hot 24 seven, and I use it for not only tea, but I use it for like oatmeal in the morning and pop Bob in a bowl of oatmeal and said I'm going to cook up some water or microwave or anything, you just push a button and you get 175 degree hot water to cook it ready to eat. I this thing has made my life better every single day that I've owned it and I've had it for maybe like two and a half, three years now I absolutely love my zojirushi. So great, great buy if you're interested in tea or you need hot water on demand. This thing is really really super slick. - -96 -00:52:12,689 --> 00:53:29,700 -Wes Bos: I'm gonna keep going with the the food thing here and in just sick pick just a good thermometer. So I think I need a new one. Part of why it scares people about cooking is that they're gonna die by eating some sort of raw chicken or something like that, or part of what scares people is that they're going to overcook something and it tastes disgusting. So a really good instant read thermometer, not one there's you can buy them at like home Outfitters or something like that. And they're like, five bucks, and they they're not good because you have to sit there for, I don't know, like 30 seconds while the thing like gets up to speed. But an instant read thermometer will it's not usually instant, it's within five, four or five seconds, it will help you be a better cook because you'll know exactly where your food is that may never have to do that thing where you cut open a piece of meat to make sure it's not raw inside and then you you sort of Runic that juices start flowing out. So the best instant read thermometer as you can get are called thermal pen. There are 100 bucks, I found a pretty good alternative. That's, I don't know 2530 bucks called the what is it called? Mr. Schaeffer. It's one of the stupid Amazon one, but it works awesome. I highly recommend you get some sort of decent thermometer digital instant read thermometer to make yourself a better cook. - -97 -00:53:30,120 --> 00:53:35,580 -Scott Tolinski: Wes, I'm gonna be sending you a couple of Amazon referral books now because we need one of these. So I'm going to be picking one up. - -98 -00:53:35,610 --> 00:53:53,430 -Wes Bos: Oh, wait, hold on. Let me get my link for you don't buy your link. Man, I do not have things that I've given Scott to buy and Scott has convinced me to buy is hilarious. Yeah. What about shameless plugs, Jason. - -99 -00:53:54,390 --> 00:55:08,940 -Unknown: So I'm gonna plug my weekly live stream. So every Thursday at 9am Pacific I get on and stream with, with somebody in the community live on Twitch at twitch TV, slash j lengstorf. We do all sorts of stuff like this week, I'm going to get on with Bram Adams from algolia. We're going to add a search to to a site. I'm getting on with Sean Wang from Netlify. We're gonna use Netlify functions. I'm going to do something with air table do air table is a CMS. And then one that I'm really excited about, oh, I meant to talk to you all about this. I'm going to get on with Henry Zhu. Who runs. He's like the core maintainer on babble, but he also runs a podcast called hope in source. And we started playing with a Gatsby podcast theme that amberly Romo built on our team. And she based it on the open source setup. And Henry and I are going to get together and stream like building out more functionality to it including taking yalls podcast player and turning it into something that that Yeah, we want to like turn it into a component that we can use us inside the thing and we wanted to do, the only feature that we wanted to add that yours doesn't have is we want you to be able to click a timestamp and jump to that part of the - -100 -00:55:08,970 --> 00:55:11,250 -Scott Tolinski: Yes. Yeah, yes. - -101 -00:55:12,360 --> 00:55:20,100 -Unknown: So yeah, I'll talk I'll talk to you more about it offline, but I would love we really I'm really excited about that one cuz it's, it's gonna be really fun to build. - -102 -00:55:20,250 --> 00:55:21,810 -Wes Bos: Oh, that's cool. Well, - -103 -00:55:21,840 --> 00:55:22,530 -Unknown: yeah, super cool. We'll - -104 -00:55:22,530 --> 00:55:29,580 -Wes Bos: put a link make sure you send us a link we'll put that in the show notes. Definitely. Cool Scott shamelessly plug your things - -105 -00:55:29,820 --> 00:56:10,350 -Scott Tolinski: shamelessly plug level up tutorials.com forward slash pro sign up to become a pro and you'll get access to the latest level up tutorials courses, including pro Gatsby, which is one of the I would not even one of the it's not even like up for debate. It is the most popular course on level up tutorials. So if you want to learn Gatsby pro Gatsby two is 26 videos to teach you Gatsby However, if you want to learn React Native the latest level up tutorials course is going to be on React Native and it's being taught by a guest instructor React Native expert, Spencer curly. So I'm so excited about this series. And if you are interested in learning React Native head on over to level up tutorials comm forward slash pro and sign up today, - -106 -00:56:10,590 --> 00:56:35,580 -Wes Bos: Wes bos.com forward slash courses has a list of all of my courses, you can buy one, you can get one for free, you name it, check it out, use the code coupon code syntax for 10 bucks off. That's it for today. Thanks for tuning in. Thank you so much, Jason, for come in and spending your time with us and schooling us on all that is Gatsby in Gatsby themes. I think this is really cool. I'm excited to see where it heads over the next six months or so. - -107 -00:56:35,700 --> 00:56:40,170 -Unknown: Yeah, thanks again for having me. And, and yeah, just get awkward at the end is - -108 -00:56:41,340 --> 00:56:47,160 -beautiful. All right. Well, we are gonna wrap it up with a piece. Yeah. All right. So I gotta say peace, peace, - -109 -00:56:47,550 --> 00:56:48,150 -peace. - -110 -00:56:53,250 --> 00:57:03,030 -Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax151.srt b/transcripts/Syntax151.srt deleted file mode 100644 index e478eb7bf..000000000 --- a/transcripts/Syntax151.srt +++ /dev/null @@ -1,176 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,000 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott El Toro. Totally. - -2 -00:00:25,890 --> 00:00:49,740 -Scott Tolinski: Welcome to syntax in this Monday tasty treat. We're gonna be talking all about the JavaScript standard lib or the standard library. This is a really fascinating topic about future JavaScript things that are going to make our life better and better. As we often like to talk about on the show. My name is Scott Lynskey. I'm a full stack developer from Denver, Colorado, and with me, as always, is a West boss. - -3 -00:00:50,220 --> 00:00:51,690 -Wes Bos: Hey, everybody. Hey, Wes. - -4 -00:00:51,690 --> 00:01:43,680 -Scott Tolinski: This episode is sponsored by longtime sponsor of syntax, which is century now century is the bug error and exception tracking software that allows you to make sure that your application is running as smoothly as possible at all times, you're gonna want to head on over to century@century.io. And you could sign up using the coupon code at tastytrade, all lowercase all one word and get two months for free. This is going to be a big time saver after you get this set up. Because this is going to let you know where your errors and bugs are happening directly before your users let you know about it. So head on over to century@sentry.io. And check out the tasty treats that they have over for you@sentry.io. So standard library or the standard lib, you give me a you know, just a quick little bit here. A quick little tasty treat - -5 -00:01:43,890 --> 00:03:58,920 -Wes Bos: the skinny. Yeah, so go there, there's a proposal to add a standard lib to JavaScript. And if you're coming from other languages, you probably already know this. But most languages Python, PHP, Java, they have a bunch of built in stuff that you can simply just import like it was an NPM module. So rather than having to go ahead and npm install something and then require that you can simply just like require it yourself. Same with like, even no j S has it has a standard lib with a bunch of utils stuff. We just don't have that in JavaScript. Of course, we have some Global's for, for working with arrays and objects and things like that. But almost always, when you need to do anything as simple as formatting a date, or I don't know anything somewhat complex with an array, you have to go and reach out for an external library in order to work with it. So there's this new proposal to add a standard lib to JavaScript, which will allow us to have sort of built in handy little features. Now you might be asking, like, like, what's the difference between having a standard lib? And just making it a global in the browser mean? Like, like, why can't we just like, keep putting stuff on the array prototype or something like that in order to get where you want to go? And I have the same question as well. And the answer, which this is on the Google Developers websites is not exposing built in modules globally has a lot of advantages. They won't add any overhead to starting up a new JavaScript runtime context. So anytime you spin up a ServiceWorker, a tab, a new node process, that startup time is really important to people, especially if you're talking about things like opening a new tab, or maybe like a serverless function that needs to boot up that boot up time is really important. Because if it takes like 100 milliseconds just to boot up, then that feels a little bit slow. So by having them as a standard lib, they don't consume any any more memory unless they're actually imported. And they don't run the risk of naming collisions with other variables defined in your code. So I think that's pretty cool. Because like it, they're they're, they're sort of NPM installed, but you're not actually requiring them until you actually go ahead and reach for them. Yeah, - -6 -00:03:59,040 --> 00:04:46,500 -Scott Tolinski: I like this little note that was in the the one Google Developers thing is they're just like, downloaded NPM modules, except for they ship with the browser. So I mean, really, if you've been using NPM modules at any given point, then you have a lot of the tools that you would need to even work with some of this stuff, because it's just going to be like importing anything, right? You're just going to be importing, let's say, import library from standard or j s, colon, and then the library name. And did you read a little bit about that? I was actually a little bit confused about that aspect of the importing. ut D is STD colon or j s colon to be the namespace for these things. I saw on the the one GitHub it says that the J s namespace is the namespace but on the Google one, they were referring to it as STD. - -7 -00:04:46,580 --> 00:05:21,240 -Wes Bos: Yes. So this is still a proposal so it's it's a little bit up in the air. They've proposed jazz colon, and they proposed STD colon, and then they've also proposed the NPM sort of way that you do it is Yeah, yeah. Standard forward slash. It looks like it hasn't been decided yet. So we're not sure it does say in the official proposal that it's jazz colon. However, in the one, the one standard lib that was already implemented. We'll talk about this in just a sec. Yeah, they are saying a CD. Yes. Standard. - -8 -00:05:21,420 --> 00:05:33,930 -Scott Tolinski: Yeah. So that aspect was a little confusing for me. But this this proposed, or is this is this in the in Chrome right now, because I would when I was reading is, this seems like it was still kind of potentially in Chrome. - -9 -00:05:34,110 --> 00:06:18,690 -Wes Bos: It is in Chrome already. This one is, it says here is key value storage module is currently available in Chrome 74. And therefore, you have the experimental web platform features flag turned on. So it's assigning a lot of developers flip on. So you can try out new stuff in the browsers, you go to about colon flags, I believe in Chrome, about colon flags. Yeah. And that that will open up this like, under the hood of your browser. And there's all kinds of stuff you can turn on and off. And the one you want to turn on is experimental web platform features, because you can already use modules in the browser as well with a script type equals module. And what this key value is, maybe we should talk a little bit in this module, - -10 -00:06:19,140 --> 00:06:25,860 -Scott Tolinski: I jumped into it a little quickly there. I was just wanting to not say anything that was not accurate initially. - -11 -00:06:26,100 --> 00:07:06,990 -Wes Bos: Yeah. So there is a local storage, you know, local storage, you can set key value strings in local storage in the browser. The one downside to that is that local storage is synchronous, meaning that if you have a larger write or something like that, you could be potentially blocking other things from happening. So this key value storage is the exact same thing except that it is a new a synchronous API that will allow you to work with it. And then there's also a whole new API of things for for working with it, it has get set delete, very much like we have had in something like a JavaScript map. - -12 -00:07:07,170 --> 00:08:10,470 -Scott Tolinski: Yeah. Yeah. What's what's cool about this is like the whole stated goals of it is performance, speed, and all those things, but also simplicity in the API. And that's something that local storage really got right, in my opinion was just yeah, how blade dead simple the API is to use. So now that we're having these in a standard library, and a different with performance as the real kicker here, I think this is definitely a good, good first module, I think this is an interesting use case. And, you know, I'm interested in giving this a try. Obviously, this is one of those things that you kind of have to be careful with, because, well, if you ship some code with the standard library in it, and your users do not have that Chrome flag enabled, well, guess what? It's not going to work unless you're using a polyfill, which I would imagine the polyfill I haven't done too much reading into this would just be the library as what could be a node package. And then potentially, you're loading the node node package from your packages rather than from the browser, if it doesn't exist in the browser. Does that sound correct? - -13 -00:08:10,590 --> 00:08:40,950 -Wes Bos: Yeah, I would, I would imagine that part of the synchronous loading of this thing is that it would just load it on demand. Yeah, it needs it. So it's using another part of, of modules in the browser is just loading it on demand. So it's, it's kind of cool. It's It's It's not the most exciting thing ever. But it's it's a perfect example of giving you the idea of what is a a standard library in the browser. Now, I guess we can talk a little bit about like, What kinds of things do you want to see being added as a standard library to the browser? - -14 -00:08:41,490 --> 00:09:31,020 -Scott Tolinski: Yeah, I think the thing that most people would want to see, I mean, we have listed here, deep clone, and then another link to a proposal. But it's funny, because the first thing that I thought of which I'm sure a lot of people, their brain would go just be like, Hey, be great. If Well, all the stuff that's not already in JavaScript already is from lodash, it would be as a standard library, that would be great, because we got a bunch of features from lodash, a lot of stuff that you used to use before we had that map and things like that. We got all those in JavaScript now. But there's still a host of things, a lot of the deep stuff, a lot of the things that are a little bit more tricky, where I'm reaching for lodash, it would be really great to have those built in because to be honest, it seems like that stuff should be part of the library. But again, the benefit of having these be in a module is that you wouldn't have to have them all the time. - -15 -00:09:31,230 --> 00:09:58,770 -Wes Bos: Yeah, you don't need to load the entire library on as you need it. They just be available for you in the standard library. So I think that will probably be one that we start to see. You can get most of your work done with the array methods that we have put every now and then maybe 5% of the time, you do need to reach for one of these specialized methods. When you're doing you're doing union of data you need to do a deep grab of property on although that is coming to the to JavaScript as well. - -16 -00:09:58,830 --> 00:10:09,750 -Scott Tolinski: You know which What do you Use a lot because I use, like, let's say I've used has in the past, although I'm now using the What is that? The operator the question mark - -17 -00:10:09,770 --> 00:10:11,540 -Wes Bos: optional chaining? chaining? - -18 -00:10:11,580 --> 00:10:36,170 -Scott Tolinski: Yeah, so now using chaining and optional chaining instead of has, however I use merge, I think I've used to set I've used find find is really nice flat map flat map. Yeah, flat map is actually really sweet. Find index is like a deeper find index times have gotten times which I mean, you could you don't need times anymore, I should probably rethink some of that code. - -19 -00:10:36,410 --> 00:10:42,360 -Wes Bos: Yeah, well, sometimes I just prefer like a nicely named method over an obtuse - -20 -00:10:42,510 --> 00:10:45,870 -Scott Tolinski: like, array. Yeah, yeah, yeah, - -21 -00:10:45,900 --> 00:12:10,440 -Wes Bos: yeah. And I know, I can make my own little, I can make my own little functions like that. But that's the whole point of a library like this, it will be very easy to do these types of things. And it's not adding any overhead to either your bundle of JavaScript or the the startup time of your application. So we'll probably see quite a bit of those. We already see this in in node node has an entire assert package that will check for for deep, deep, strict equal. So if you have two objects, and you want to compare those two objects, that's hard in JavaScript, so no just ships, a utility library that allows you to do that if you want to do a deep clone of an object. So real quick, if you have an object, and you do a copy of that object via something like object dot assign, or you use a spread, or something like that, it will only clone it one level deep. So if you have a nested object inside of that, the second level, third level, fourth level objects are still referenced to the original object. And that can be a bit of a bug city, because if you change that second level object, the original thing that you copied it from will also be changed. So a deep clone is when you actually copy all of the levels deep. And that doesn't that's hard to do in JavaScript currently, as well, we'll probably see something like that. What else? a synchronous JSON parse JSON stringify a library to do that would be handy. I bet. - -22 -00:12:10,740 --> 00:12:17,160 -Scott Tolinski: Yeah. Some some you you ID create some unique I What is this? Other you stand for? universal? - -23 -00:12:17,160 --> 00:12:23,070 -Wes Bos: universal, unique identifier, universally unique identifier? Okay. - -24 -00:12:23,160 --> 00:12:35,940 -Scott Tolinski: I was like, a unique identifier. That's only one you Yeah. So be able to create like a, what it would be like a database key, or even the key in general, it's like a unique string would be? Yeah, that'd be nice to have two, I think. Yeah. - -25 -00:12:35,969 --> 00:12:40,170 -Wes Bos: They're also called gu ID globally unique identifiers. - -26 -00:12:40,439 --> 00:12:46,410 -Scott Tolinski: those are those are like, those are acronyms I see. And I've never been like, Oh, I know what that means. But what does that actually - -27 -00:12:49,680 --> 00:13:07,950 -Wes Bos: that's great. A URL library for parsing URL. So if you want to build a URL with hashes, and query parameters, and pages and pads and all that stuff, or if you want to parse it into something, you almost always have to reach for an external library like that. So that's - -28 -00:13:08,280 --> 00:13:27,720 -Scott Tolinski: really handy. Get query string is in the browser, or I mean, yeah, is the URL, right? Yeah, yeah, I've actually, I used this myself, what is this? query string parameters? Because as many people who have used react router, know that react router doesn't ship with a sort of way of doing query strings? - -29 -00:13:27,780 --> 00:13:30,330 -Wes Bos: What's the name of that method? I totally forgot about that. - -30 -00:13:30,839 --> 00:14:10,530 -Scott Tolinski: Use ref cookie URL or URL search. params. Yeah. So you are a URL search params, new URL search params, you give it the string of your URL, and then it basically takes all of the params and spits them out to you as an object where you can grab it with a dot get. So you say hey, dot get, and then you pass in the pram name, and then you get that value back out of it. I use this skin, I actually use it with a polyfill. So the cool thing about this is, is you can use this totally right now as is you just do need a polyfill. If you're shipping to pretty much any browser, to be honest, it's not it's not super widely supported yet. - -31 -00:14:10,920 --> 00:14:21,930 -Wes Bos: It looks like edge 17 chrome 49. With most of it actually looks pretty well supported except for IE, but like, Who cares? polyfill it if you need it? - -32 -00:14:21,959 --> 00:14:26,880 -Scott Tolinski: Yeah, I would polyfill it just anyways, because the polyfill is easy to do, you know? - -33 -00:14:27,120 --> 00:14:38,820 -Wes Bos: Yeah, totally. Yeah, no kidding. And it will just load it on demand for you. Yeah. What about things like polyfill? Like path and hash? And is there there's nothing in the browser for that currently, is there? - -34 -00:14:39,050 --> 00:14:43,550 -Scott Tolinski: I don't think so. Correct. or wrong here. But as far as I know, I don't know. - -35 -00:14:43,949 --> 00:15:05,970 -Wes Bos: There's there's one like little trick I've seen is if you create like a document create element and you create an anchor link and set the href on it for F right. And you can use you can use that link to access all of the properties that link will automatically generate for you. So I think you can get that hash out. I don't know these these are just different tricks and stuff like that it'd be nice to have it in just one nice tidy little library. - -36 -00:15:05,970 --> 00:15:10,050 -Scott Tolinski: A nice little bundle, nice little standard standard bundle. - -37 -00:15:11,160 --> 00:15:32,940 -Wes Bos: So that's that's all I can think about. Right now. If you have any other things that you'd like to see come to standard live in JavaScript, let us know maybe like, like a nice Canvas API, like the Canvas API is, for me is difficult to use. I think so like maybe a, but maybe that's what libraries are for. Like, they're probably not right. - -38 -00:15:33,000 --> 00:16:06,420 -Scott Tolinski: Yeah. It's like, at what point what's the threshold, it's like, the things that are used frequently enough for will make every month the most people's lives better in certain ways, or by standardizing them making things easier for people making performance better, those kind of things. Yeah, I mean, we had like, a nice little conversation before we started this episode about Intel, or international, which is a new API coming to the browser. We were saying that we could probably do an entire episode about this, but you wanted to touch on it really briefly. And this one, how much did you want to get into on that? - -39 -00:16:06,780 --> 00:17:10,980 -Wes Bos: Yeah, real quick, I was just gonna say like, most people are probably going to say something like moment j s, which is like a date formatting in time ago, and relative time and currency formatting, all those things. And those things are I started writing them down, I was gonna be like, well, they are actually coming. They are in the browser already under the I NCL methods, and then I started typing it out. And I said, like, Man, this is a whole show right here. I'm super excited. Anytime I tweet a hot tip from ancl. It goes bananas. So we're going to save that for our next AC treat. Talking about currency formatting lists, formatting, date, time formatting, sorting things based on different like, I'm sure our international users will know that. Anytime we show a simple example. They'll say, it's not that easy. When you don't just have a, A through Z. And right you've got accents and things like that to worry about and different types of keyboards and different types of locale, where it doesn't necessarily match your language and how you format money, all that good stuff. So we'll talk about that in the next episode. - -40 -00:17:11,249 --> 00:17:18,030 -Scott Tolinski: Yeah, there is a lot there. And I think anybody who's worked with international anything has understood just how difficult that can be. - -41 -00:17:18,030 --> 00:17:19,710 -Unknown: Cool. So uh, - -42 -00:17:19,739 --> 00:18:07,710 -Scott Tolinski: this is it. This is exciting new stuff. You know, I think we absolutely about JavaScript in the evolution of things just being easier for the users and things like that things are just getting so much easier for the developers as well. getting nice and clean, we're not gonna have to do any sort of these hacky things to create things, because hopefully, we get everything that we asked for. It all shows up, and it's all perfect. And it makes their lives that much better. So I'm really excited about all of this stuff. If you want to try the key values storage standard library that is shipped in Chrome, make sure you flag or turn on that flag. And then we have a link in the show notes here to let you know exactly some of those API things and a little blog post explaining a little bit more about the key value storage one from Google. - -43 -00:18:07,740 --> 00:18:13,230 -Wes Bos: Sounds good. Thanks for tuning in, and we'll catch you on the next one. Peace. Please. - -44 -00:18:15,110 --> 00:18:24,930 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax152.srt b/transcripts/Syntax152.srt deleted file mode 100644 index 4f8c1c867..000000000 --- a/transcripts/Syntax152.srt +++ /dev/null @@ -1,316 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:05,760 -Unknown: the podcast with the tastiest web development treats out there. - -3 -00:00:05,760 --> 00:00:10,500 -strap yourself in and get ready. Here is Scott, ski and West boss. - -4 -00:00:10,500 --> 00:00:32,100 -Wes Bos: Welcome to syntax. Today we're talking about debugging tools and tips. So what are the different tools that we can use? What are the different techniques? What is the sort of the mindset that you need to put yourself into, to debug a problem and get through it as quickly as you possibly can? With me, as always, today is Mr. szalinski. How you doing today? Scott? - -5 -00:00:32,489 --> 00:01:22,500 -Scott Tolinski: I'm doing good, doing really super good. Because when you're listening to this, I have a new baby girl, which is actually hard for me to talk about, because she's not here yet. And you know, like, there's such a huge shift between, you know, the baby going to be here and the baby being here in terms of your actual mindset, in terms of just like how you feel about life. And like, yeah, it's hard for me to say, by the time you're listening this, I'm gonna have a baby girl. So I'm just going to imagine that I'm doing fantastic. And I'm super duper excited. That's the energy I want to put out there. But yeah, no, I'm ready to go. I'm ready to talk about debugging here. And yeah, this is one of my favorite topics. This is something I'm always been very interested in. And I'm happy to, to learn a little bit more about debugging all the time. This episode is sponsored by a couple of our longtime sponsors, which is Netlify and Freshbooks, both of which we're going to be getting into later on in this episode. - -6 -00:01:22,799 --> 00:01:48,600 -Wes Bos: Alright, so let's get on into it. We're gonna go through sort of first different tools and different types of debugging. Then we'll get into some network requests, talk about the VS code debugger. And then we'll switch more into some tips and debugging of mindset. And like, how do you like what questions you ask yourself and whatnot. So first thing is good old console dot log. So it's kind of the joke that got put here, see LD D, which is console log driven development. - -7 -00:01:49,049 --> 00:01:51,270 -Scott Tolinski: That's my style, man. That's my style. - -8 -00:01:52,139 --> 00:02:36,090 -Wes Bos: When you're debugging JavaScript, or we can really like, we're gonna pretty much be focusing on JavaScript here. But this obviously could could work with pretty much any language that you you were using. console log is probably the most basic where you run something. And then when something happens, you want to output some sort of data, or some sort of information about what happened in console dot log along with its other I think we flattened the entire episode just on the different console. methods. There's console dot warn console, dot info, console, dot trace, console, dot, time, start group groups, dark group end all there's all kinds of different methods. And there, we won't go into them all that much. But that's the very basic and I would say like, what percentage of your your debugging is done with console log. - -9 -00:02:38,880 --> 00:03:43,020 -Scott Tolinski: The fact that I'm laughing, there is not a good sign, I would say, a decent portion because I just I, for some reason, I just haven't spent the time. It's so funny, the episode we recorded that's going to be airing in a week or so we just recorded an episode on making yourself feel uncomfortable to grow as I am avoiding using the debugger because it makes me uncomfortable. So I would say a good portion of it, I even have I have a better like, I think it's a better console log or something. I have a console log extension on my VS code, and I remapped it to command l so I can highlight, or I can just have my cursor over a variable. And I can hit command L, she's outputs a console log with that a little indicator of where it is. And because that just little command L is so like, in my muscle memory, is it way too much. I use it way too much. I feel really bad about saying that. But again, we all have our holes, and things that we need to get better at. So a decent portion of my debugging is through console logging and some of the other stuff we're going to get into in this episode. But definitely I lean on it way too much. - -10 -00:03:43,199 --> 00:07:06,570 -Wes Bos: Yeah, so I'm pretty proficient in all the different debugging methods. The other sort of one is debugger. We'll talk about that in a second. But in most cases, a console log is fine. I would say like 92.8% of my debugging is just on console log. And I don't think that you should be ashamed of using console log because I think it's the handiest. And like if you're trying to debug a click, and you're like you want it to run a couple times, it's totally fine. It's when you get into more advanced use cases where a console logging a bunch of variables, or you're trying to peer into the scope or like if you're trying to log so much information, because you need all of that at that point in time. That's probably where you should reach for the more mature tools that are in the browser, which is debugger and break statement. So let's let's get into that. Now. debugger in the browser is just like one, it's a statement. Actually, it's just a word. You can type debugger in your your as a line of code with a semicolon. And what will happen is, if your browser has the dev tools open, it will freeze your website from running or your application. Wherever you had put that debugger command. That's what's called a breakpoint. It will break your code and pause the actual execution of the code at that point and it will throw little screen on your browser. And at that point, you have a whole bunch of options as to what to do next. So there is the ability to just resume the code. So when it pauses, you have the ability to peer into things like the call stack, which a call stack is going to tell you which functions ran up until this point. So if you have a function that runs another function that runs another function that finally calls, the one that that your breakpoint ran, you can see exactly what led up to that happening. And you also see a call stack when you have an error as well. And that's super helpful, because you can see the process of things happening. And then from that point on, you can actually keep going. And you can just say, okay, run the next line of code or step into the next function or step over the next function, there's a whole bunch of buttons there that will allow you to skip over functions or step into the next function, and keep running with that call stack, which is pretty helpful. So along with the call stack, we also have the scope. So the scope will show us any closures that have happened there, the scope will tell us what this is equal to. If it's a function, and there's only there's variables that are scoped to that function, it will, it will show you all of that. And that's usually where where people cringe, or they see somebody console logging 11 different variables. And if that's the case, just throw a debugger in there, it will freeze and it will give you this nice interface for going through objects like Chrome Dev Tools, or Firefox Dev Tools normally gives you, you can just sort of explore the objects as they were at that time. And know that's also sometimes a problem in Chrome Dev Tools, where if you console log an object, at the time of console logging, it was empty. But sometimes there's like a race condition where the object is actually it shows full in the console. But at the time of logging, it was empty, and then you're like, but I see the data right there. Why is it telling me cannot read property of undefined? And if that's the case, you don't you need to freeze your entire thing. So it doesn't give you a reference to that object, but it actually gives you the values of the time of running that thing. - -11 -00:07:06,870 --> 00:07:33,210 -Scott Tolinski: Yeah, that's such a key one. I think that happens all the time. For beginners. I mean, I think people will run into that. And that's one of the biggest like, hmm, it should work. But it's not working, what the heck is the problem? And it The fact is, is that it was never working. And the way that you attended it to it was just the way that console log works. So okay, I'm interested I can, I can throw a little debugger in my code and get some some info. That sounds all good for me. I like it, I like it. - -12 -00:07:33,570 --> 00:08:12,630 -Wes Bos: We should also say that you can also set breakpoints in the browser. So if you have like a website that you don't control the code to, you can't just pop a debugger in there, you can go into the sources tab of your your developer tool, and just click on the number. And when you click on the line number of that code that will set a breakpoint. And then when you run that code again, or you refresh the page, the breakpoint will break, it will pause the code from running at that specific point. So breakpoints and debugger statements are the same thing. It's just have you are you controlling it from the browser in the dev tools? Are you controlling it from your authoring environment? Which is your your VS code or something like that? - -13 -00:08:12,810 --> 00:08:40,350 -Scott Tolinski: So it seems like you can, you know, do the click the little breakpoint. And I mean, there's like the obviously the little breakpoint column in VS code, if you've ever Yep, hovered over to the left to where that numbers are. And then I don't know about other text editors at this point, because I've just been so in VS code code world, you get that little red circle. And if you click that, that actually adds a breakpoint. But how do we connect VS code to our our chrome debugger? Is that is that a? Is that an easy do is that Yeah, I do. - -14 -00:08:40,499 --> 00:10:31,669 -Wes Bos: It's not as easy as I thought. So um, the way that it works is that you have to proxy your application through VS code. So you run your own server, localhost 3000. And then you run a VS code server, a debugging server. And what that will do is it will just proxy all of the requests through this debug debugger server. And then it allows you to do things like you get your entire console in VS code. So you don't have to actually leave VS code in order to see what's going on. You can set breakpoints by just clicking the line number on there, you can see call stack, you can see scope, all of the stuff that you're used to seeing in the Chrome Dev Tools, you can actually see all of that inside of VS code. And if you have like if you're working on like one project for months, absolutely set this up. Because it's it's super handy to be able to have your authored code and your debugging information. In the same window. It's there's lots of helpful information that's going on there. And you can just you just start it up every time that you you want to run it, it will connect to the chrome debugger. And you get basically all the info. Like the logic is still running in the Chrome Dev Tools. It just ports, all of that information to your VS code so you can see it in there. For me it's too much of a pain to set up because the nature of the world work that I do is that I obviously have a few big projects. But I'm always doing, like for my upcoming JavaScript course I have like 50 demos or 30 demos Oh, yeah, like that. And I can't set up a new new one of these things for every single thing that I'm working on. Because it is a little bit, a little bit of extra work, especially like when you don't necessarily know what port your app will be running on, if to go ahead and change it. So I personally don't use that for any of mine. But I know that people are absolutely in love with this feature of vs. Code. - -15 -00:10:31,909 --> 00:10:49,020 -Scott Tolinski: I'm thinking I'm ready to set it up. And I'm going to watch a bunch of videos that I need to dig into this because I as we were talking here, through debugger into my into my app, I saved it. And I watched this I got all this information. And to be honest, this was easier than console logging anything. So - -16 -00:10:50,250 --> 00:11:02,220 -Wes Bos: James quick? Oh, sorry. Did you hear that? Yeah. Yeah. James quick, has an awesome YouTube video on setting it up. That's how I actually initially did it. And he's using my theme. So that's pretty cool. - -17 -00:11:02,399 --> 00:11:04,740 -Scott Tolinski: Yeah, James, the cool guy. Yeah, I know, James, - -18 -00:11:04,770 --> 00:11:06,929 -Wes Bos: we'll put a link to that one in the show notes. - -19 -00:11:07,169 --> 00:11:36,029 -Scott Tolinski: Yeah, shout out to James quick. Yeah, I'm gonna have to do this. And I want to since I mean, obviously, since level up tutorials is the project that I'm going to be working on for a considerable amount of time here. I think it's in my best interest to get this connected to Chrome or get my VS code connected chrome right away and start diving into the stuff. There is no more excuses need to make myself feel uncomfortable here. I need to get get going. Because it's, it's already pretty sweet. I'm already seeing the benefits of it. And it's kind of ridiculous that I've avoided it. - -20 -00:11:37,260 --> 00:11:42,390 -Wes Bos: Well, maybe we'll come back in like, a couple months and and get your thoughts on it. - -21 -00:11:42,600 --> 00:11:50,760 -Scott Tolinski: Yeah, right. Yeah, you know me by then I'm gonna be like, I'm gonna be wearing t shirts of the chrome debugger, and just totally all about it. So. - -22 -00:11:51,179 --> 00:14:04,830 -Wes Bos: So that like breakpoints are probably the the simplest version of it, you just click which line you want it to break on. But there's all kinds of different types of breakpoints when you're trying to debug. So a couple handy ones are break on x HR requests. So if you were like, Huh, I want to know when this application is sending data, like actually these like debugger tools are very, very handy when you're trying to figure out how another application works. So whether you're writing a scraper, or you're trying to find a private API, or you're just trying to figure out like, what data is this thing sending about me, you can turn on these breakpoints to say anytime there's an X HR requests, which is a fetch request, or a jQuery dollar Gad or anything like that, it will break and at that point, you can peer into the request. And then you can step into it and see what what the result of that data is. So you can do that by just going into your Chrome Dev Tools. And in the sources tab, there is a little breakpoints on the side here. And you'll see that there's breakpoints, which is code. And then there's also x HR fetch breakpoints, you can add those, you click on Add. And you can say break when the URL contains whatever it is. So if you want to see like, okay, who this app, if it's sending any information to Convert Kit, let me know exactly what it is that they're they're sending. So you could say break when this app send something to anything with the URL upconvert in it. And that can be very helpful as well as it can be very helpful for your own application, if you're just trying to figure out, like, let's say you get thrown into an application at work. And you want to know like, when is this thing, firing off the data, because you can sit there for, I don't know, seven or eight hours and try to just like comb through the code. But like that, that's a big problem. Sometimes where you get thrown into a large project, and you don't know where the code is, to actually modify it, you can do is you can say just set a breakpoint for whenever an X HR requests goes off. And you can just sort of click through the app. And anytime something is fired off, it will freeze. And it will show you the code that was written in order to fire that thing off. And that will allow you to quickly find in your source code where that actual thing it had been written. - -23 -00:14:05,039 --> 00:14:30,600 -Scott Tolinski: Yeah, well, I just I just went in here and I found the event listener breakpoints. And I think it's pretty sweet. I just selected, hey, give me pause on the next animation. And so it I then clicked my play button. Because I had a breakpoint in there, I clicked my play button, the webpage started to load. And since you know me, I have animations that immediately stopped the moment that the next animation came in. And I thought that was really pretty slick. - -24 -00:14:30,750 --> 00:15:15,600 -Wes Bos: Yeah, it's, it's awesome. There's, there's a whole bunch of other ones that we have here. You can break on attribute change. So if you want to know, like, this is something that happens all the time to me, like what code is adding this class to this element? Yeah, like how do you answer that question? I don't know. Well, you just say like, well, this element has a class of playing, you set a breakpoint and say, break once when the class changes or break when an attribute changes or you can set it to break when a child is modified and At that point, you can just go ahead and start clicking through your application. And then whenever that class has changed, or one of the child has changed, the whole thing will freeze up. And it will show you exactly the code that caused that to happen, as well as the call stack that led up to that happening. Dang, - -25 -00:15:15,659 --> 00:17:55,800 -Scott Tolinski: I'm feeling like I'm missing out. All the stuff that I've been missing out on all this stuff. And it was so much scarier in my brain. I think it's so funny. Once everybody listens to that making yourself feel uncomfortable episode, they're gonna have a whole lot of like context to what I'm saying right now. Because this falls into exactly what is it this is almost like a companion piece to that episode in a in a sort of tangential way. It's hilarious. This just looks like it could make my life so much easier. And this is going to be a sponsor transition here, just a heads up. But another way you can make your life easier is via Netlify. Netlify is a awesome and awesome. It's an awesome host that allows you to build, deploy, manage modern web projects. And we are joking. I mean, every time I look for every time I have a project that I'm working on, or something that this Netlify is the very first place I go to because they make all the hard stuff superduper easy. Let's say you have a site, you want to throw it up, you just connect your GitHub repo to it, you give it its build command. And if it's one of these platforms that Netlify is very familiar with such as Gatsby bullet automatically detects that you have a Gatsby site. And it automatically adds your build command. So you don't have to worry about any of that. And so if you have a Gatsby site in particular, I mean, there's other projects that work with it. So the Gatsby is just where we're very comfortable. If you have a Gatsby site, you can connect it to GitHub, and deploy this thing in just about like, I don't know, a minute or less in That's unbelievable. This is the easiest way to host any front end code. And Netlify is not all just about front end code, because they give you the ability to add in all of the cool stuff that you need, if you are using any sort of front end code, because they give you the ability to have functions which are serverless functions, you need some server side code in here, you could deploy serverless functions instantly and easily. Identity allows you to have logins, passwords, signups, that sort of thing. forums allows you to have contact forms in large media. So say, storing and saving large media, all this stuff is just super duper easy. Again, I think Netlify is big, big thing is that they just make everything that is hard about web development in sanely. Easy, so you're gonna want to check out Netlify netlify.com forward slash syntax, and let them know that they you came from syntax, because trust me, they love to hear that. We've spoke at the jam, stack calm, and we're big fans of Netlify over here. So again, if you use this for the first time, and it blows your mind, like it has most people that have checked this out, then go ahead and let them know that you found out about Netlify from syntax, thank you so much to Netlify for sponsoring this episode. - -26 -00:17:55,920 --> 00:19:12,630 -Wes Bos: next type of breakpoint is a conditional breakpoint. So if you want to break only when a variable is equal to a specific string, a number that is greater or something that is true, something that is false, you can do that. And you don't have to, like, let's say you say like, I only want to pause this debugger, if the event type was a mouse down. And if you wanted that, then you'd have to like go into your code and say like, if e dot type is equal to mouse down, then debugger, yeah. And then you have like a block. And that's its own scope. And you don't need to do that, you can just open it up. And you can have a condition in there. And it's like any condition in JavaScript. And the browser will specifically do that for you what other kind, I got a couple more here we have, you can break on event listeners. So again, if you like, one thing is my, my bank doesn't let you paste into password fields, which kills me because I use a password manager. Yeah, and like always supposed to have a secure password if I can't face into it. So like I was like, I'm gonna like reverse engineer this. So what I did is I took the input and I say break on paste event. And then what you can do is you can find the code that is stopping you from actually pasting the code. And then you can just go ahead and modify that. - -27 -00:19:14,190 --> 00:19:17,810 -Scott Tolinski: actually do it. You hacking a bank? West, it sounds like you're hacking bam, - -28 -00:19:17,810 --> 00:19:37,550 -Wes Bos: hacking a bank by allowing myself to paste my own password into the box. Like, it's just stuff like that, like answers the question like, Where is the code for this? And of course, you can just like, spend hours poring over the code. Or you can get really good at dev tools and breakpoints and figure out how to dynamically run them like that. - -29 -00:19:37,710 --> 00:20:27,720 -Scott Tolinski: Interesting. Very, yeah, you could even use it's funny because you meant I mean, we just talked about that. I said, you could do the animation in the event listener, but you could do anything in here. And it's a lie. It looks like it. It looks like it has all of the new chrome features, though. It even has one for picture and picture, which is like kind of wild because picture in picture is like a brand new API to Chrome. So I'm fast. needed by this. This is like kind of blowing my mind. And I am feeling I'm feeling like a dummy, feeling like a big old dummy. But this is really exciting. I think this is one of those things that if you are sitting at your computer or listening to this, pop open your web app, if you're if you're coding through a debugger, and there, try this out right now, because this is one of the things that I think is easier than people expect it to be. And I say that as speaking from the perspective of somebody who expected this to be more difficult. So, right. - -30 -00:20:29,330 --> 00:20:30,080 -Wes Bos: enlighten you. - -31 -00:20:30,180 --> 00:20:36,480 -Scott Tolinski: Yeah, I'm feeling in mind. Do you want to talk about the the next section here about network requests, or you want to stick on this for a little bit? - -32 -00:20:36,830 --> 00:21:03,350 -Wes Bos: No, I mean, that that's it. That's how simple it is. It's just breakpoints at different points of time. And if you know that a breakpoint is something that pauses your script from running and allows you to sort of peer into the code at that point in time, then, you know, all about breakpoints, and you just need to know that you can set them at different on different events and different exceptions and different conditions and different types of things like animations and fetch requests and whatnot. - -33 -00:21:03,350 --> 00:21:17,700 -Scott Tolinski: I sort of feel like people who come from none HTML and CSS backgrounds, like people who come from Java or, or any of these higher level programming languages. I feel like they're probably cringing pretty hard at this level. It's - -34 -00:21:17,700 --> 00:21:22,710 -Wes Bos: the same one, we're Geeking over VS code having like, yeah, like very simple ID features. - -35 -00:21:22,740 --> 00:23:33,840 -Scott Tolinski: Yes, because these are things that are like very commonplace, but this is the web. And the web is evolving to a point where we now have the tools that, you know, real programmers have had for so long. And again, yeah. It's it's funny because these, these are the tools that people have been using forever. And now we get to experience them in a way that is just like, so enlightening, I think is going to make our lives a lot easier. So another one that we wanted to touch on here in this episode, was the Network tab in your Chrome Developer Tools for debugging. Because a lot of the times we're working with requests, right? We're sending requests for anything, whether it's an image, whether it is an API call, whether it is a ServiceWorker, or something like that we're grabbing something, and sometimes it can feel like, like, why isn't this image loading? Why isn't this font loading? Why isn't this thing working? Well, we have access to every single request that's coming in and out of your website, how long that request took, if the request worked, the size of the file, the response, the headers, we have access to so much information in the Network tab. So if you pop up in your network tab, you give your page a refresh, you're going to see every single request that happened. And you're going to be getting the headers, the preview the response cookies, or timing, that sort of stuff. And I use this constantly. And I know, it's not just a graph qL thing, obviously, but let's say one of my queries isn't working specifically in graph QL. I don't know why it's working. Maybe I could throw the Apollo to give me the error output or something like that. But if I don't want to modify my code in that way to have the error, or console log or something, you can always just pop open the Network tab. And that failed request is going to be highlighted in red, you can click it, and it's going to tell you what the problem is right there. Right, right in your thing. Yeah. And it's so easy to navigate and find this thing. If you want to look at all requests for any given thing. You can filter it, you can say, Hey, give me all of the script request, or just give me the image request for the media, the font, this was really super instrumental for me debugging WebSockets. If you use WebSockets, this is the way to go to figure out what is the problem with your WebSocket I just get so much value out of the Network tab. Yeah, the - -36 -00:23:33,840 --> 00:24:49,770 -Wes Bos: the Network tab is kind of the console log of anything that gets fired off. And that's super helpful, even just to like sometimes if you go on like Instagram, and you can't like right click save a photo, like I even showed my wife Yes. shows like asked me like, how do I save this photo? Because they like did as a background image. And I was like, Okay, well, let's show you and it was easy enough for her to figure it out was like go to the Network tab, filter for images, and then sort by size. Because probably the main photo is going to be the biggest thing on the page. And then you just kind of hover over them until you find the one that you want, right click open a new tab. That's the reason why nothing is secure. Sometimes the photographer's asked me like, like, how do I protect my images from being stolen? So you can't you want to literally say the watermark, you're sending them to the person that's on the website. There's absolutely nothing you can do in order to say the actual What's one thing that I did see was blob was sending someone was streaming a blob in and just displaying it in a canvas, which I use again, you can still have a lot. But yeah, I guess I'll stop people and then you just get people screenshotting a low quality version of it, which is maybe even worse. - -37 -00:24:50,010 --> 00:24:51,930 -Unknown: Yeah, yeah, right. - -38 -00:24:52,170 --> 00:25:01,230 -Wes Bos: Big fan of network. We talked about Network tab in the scraping and what was that? What do we call that one scraping and like, like alternative method It's let's find it. - -39 -00:25:01,500 --> 00:25:03,030 -Scott Tolinski: Yeah, it was like it was. - -40 -00:25:03,030 --> 00:25:56,640 -Wes Bos: It was an interesting title, the undocumented web scraping private API's proxies and alternative solutions. That was episode number 30. alternative solutions, that was the word anytime and trying to figure out how a website works. I honestly think this is like the view source of understanding how servers work, because you want to know like, what data are they sending? Who are they sending data to? When are they requesting it? What's happening on page load? All of that information is shown hash. Yeah. Is it cached? Is it not? You can also in the Network tab, you can dumb it down to like 3g or edge just to see what your website looks like. The dev tools are so cool, we need to do like an entire show on every tab, everyone's tab because like there's the Performance tab, there's the memory tab, we've talked about the elements tab, the console tab in the sources tab a lot. But there's, there's more tabs out there, Scott. - -41 -00:25:56,850 --> 00:26:47,220 -Scott Tolinski: Yeah, and one of the my favorite things to do in the Network tab is to just see what's taking a really long time. Because maybe you have a request, that could be like an image, right? Maybe you have an image that's taking a lot longer than you I mean, maybe you just see it and you say, Wow, this image load is actually taking up a large percentage of the overall load of my entire page. And maybe that's like a little message to you that there's a different way, maybe you should be loading this image, maybe you should be optimizing it. Maybe we'd be serving like a web p to those of you who use Chrome or the users who use Chrome, I check out this all the time specifically for images of compression, that sort of thing, seeing what's cached, what's not cached, just generally tuning my performance, even though this is the Network tab and not the Performance tab. But I'm a big fan, in case you can't tell. - -42 -00:26:49,590 --> 00:27:59,460 -Wes Bos: Next up, we have just like the debugging mindset. So, uh, tools aside, you just have to be you have to think properly in terms of how do you fix things. We've all had that experience, whether it's in code, or just something else in life, where you work forever on something, and someone comes over, and you just explain the problem to them, and then they just start firing off questions to you. Did you try this? What happens when you do this? What color is this? What you get the point, right? They're just asking lots and lots of questions. And that type of person is really good at sort of just like triage into fearing figuring out and I don't know distilling down the information as to what went wrong. And anyone being a person who can ask the right questions like that, that's just it's amazing how quickly you can get to the root of the problem, if you know what questions to ask. And I think that's a huge skill in being a developer, that's something you should probably constantly be be working on. And that's the mindset. So what are some good questions and some good things that you can do in order to sort of narrow down the problem? - -43 -00:27:59,820 --> 00:30:05,670 -Scott Tolinski: Yeah, so I mean, my experience in this has started, like, even from a non web perspective, one of my jobs was that I managed and maintained projectors in an auditorium. And for doctors, right, and doctors have a lot of problem with technology, they would plug their thing in and it wouldn't work. And so a lot of times, I was having to debug or troubleshoot these issues in front of a an entire auditorium full of doctors. Meanwhile, they're all very busy and you know, wanting this thing to move on. So you feel the stare of 10,000 eyes of everybody just looking at you, while you're standing in front of a computer, right. And so a lot of the processes that I've learned in code have come from even those situations and how to how to find the problem in a situation. It's almost universal, even throughout code. And typically, it helps to have maybe a set of checklists, or a name that like an actual checklist, but just a set of steps that you go through and that you can use to figure out your problem, like what kind of stuff do we debug, for instance, like CSS, right, something's overlapping something else? Well, there's a number of ways that you can look at this thing, whether it's in your Inspect Element, and then you go into that 3d view. And you can see where it is on the DME, or one of the helpful tools that one of my mentors told me about, which is seems kind of dumb, but just start giving things, either borders or backgrounds of primary colors. And there's an extension that I have that actually just wraps all of the divs and everything in a box. And so you can see the boundaries of every single thing on your page. And once you can see the boundaries and look at these things and see the whole big picture. To me. That is the the best way to start debugging and get this debugging mindset is to have a view of what the thing is actually doing. Because we look at our code, we look at our website and we look at the output, but we don't always look at all right. What is the thing actually? Doing so that you can take a look and actually start solving some of these problems. I just - -44 -00:30:05,670 --> 00:30:31,590 -Wes Bos: got a little example that I've got here for something. This is when I taught in the boot camp, this would always happen. Someone would call me open, and we'd be doing something with API's. And they say, when I click the button, it used to go off to the API, fetch a joke, and display the joke on the page. And now when I click it, it doesn't work. Hmm. And you're just like, Okay, well, what have you tried? Nothing? Okay. What's the thing? I've tried nothing. And I'm all out of ideas yet. - -45 -00:30:31,590 --> 00:30:33,270 -Scott Tolinski: Yeah. - -46 -00:30:33,930 --> 00:32:44,940 -Wes Bos: But so like, what's my thought process for tackling something like that? So you click a button, it fetches some data comes back and displays on the page. So first, is your click working? Is the event listener actually working right? Like don't automatically think the API is broken? Or, or go to the very end and think like, the whole thing is broken? You just have to take it down. So is the event listener working? So how would I do that? Probably just console log clipped at that point. And just make sure that your event listeners working, if that's working, is the request firing. So go into the Network tab, and then go ahead and click it. And usually what I'll do is I'll clear out the Network tab. Mm. And then I'll click it and then see if our request forms there. If that shows I say, Okay, well, are you sending the right data. So in that case, I'll maybe throw a breakpoint in there and see what data is currently being sent off to that request, is the data in the right format. So sometimes you are sending the data but you're sending it as it's misnamed, maybe have a spelling mistake in there, maybe you've camel cased it, when it shouldn't have been things like that. So that's good, is the data is the request being sent properly. So you can click through the network request. And sometimes it will just tell you like 407, or 404, or whatever error, it's unauthorized, you're sending it to the wrong endpoint, your API key wasn't sent along, your API key was undefined. I've seen that all the time. So if that's the case, then then you know that that's a problem. So if it is being sent, you say, Okay, then what is the response, there's another tab in the network for responses. And that will allow you to see if the data has come back from the request properly. If that's still good, then you go in your function that handles the the sort of the callback or the async await. And you can console log or throw a debugger in there and see if the data is being there. And then finally, if you still have the data there, then obviously it's a display issue, you go into the function that displays the data, right. So like, that was like eight different steps that I took there, where you see me only a small problem. It doesn't work when I click this button, but there's so many different things and being able to isolate it and sort of step along, each step in the process is super important as a developer. - -47 -00:32:45,210 --> 00:34:48,510 -Scott Tolinski: Yeah. And I think that's what I was, like inferring when I was talking about having these steps, right. I mean, yeah, I'm thinking you click doesn't work well, okay. The first thing you need to make sure is right, like you said, Hey, is the ease the click even happening? And once that's happening, you can go from there. And it's all about this, this idea of getting the minimal part of it working, right, get the least amount of stuff working, and then add on and keep going as you go from there. Okay, did this work? Okay, yes, this work. Next step, did this work? Okay, yes, this work the next step. And that allows you to really find exactly where the problem is. And this can happen a lot in react where you have an issue, and the issue might not immediately be apparent where it lives. And you might be thinking, Okay, well, you know, I think this is in this component. But well, I can't be sure. And when I do this, it doesn't fix it. So in those kinds of situations, what I start to do is I go into maybe like the upper level of maybe my routes, and let's say, I have all of my, my header, my footer, my main section, my whatever this, I just start commenting those out. And I'll just, it's so easy to comment them out, I just Yeah, and command, backspace or forward slash, or whatever. So command, the command, whatever, and comment all that stuff, you reload, okay, the page still isn't working? Well, that means the problem is not within any of those things. So you can, you know, you can either leave them commented out, or you can uncomment, or whatever. But the idea here is to start getting rid of every single thing until you have something that works. And then once your code starts to work, then you have a minimal working example, once you have a minimal working example, you can work backwards from that. And you can start uncommenting things until it breaks. And then the moment it breaks, then you know exactly where the problem is. Because Hey, you just uncommented this component out. And now the whole thing breaks. Well, that gives you a hint that that's where the problem is. And so that's a really good tip that I like to do is, is take a take a look and just remove everything and see slowly add stuff back in until until it doesn't work anymore. - -48 -00:34:48,860 --> 00:36:08,580 -Wes Bos: Other things is if you're having a problem, like trying to debug something, take it outside of your application, and try to replicate it in like a code pen or something like that. I think that's super helpful. is just being able to build a use case of the problem. And almost always as you're building the use case, by isolating it, you figure out what the problem is. Or you figure out okay, well, this works on its own. So it obviously isn't this code right here, it's probably something totally different. I was working on a bike yesterday, and I was switching the derailleur, which is the thing that moves the chain. And I took a broken one off, put a new one on, it didn't work. And I was like, so frustrated with it. So I took it off and put another one on, and then the same problem. And then I was just like, What is going on? I like going all over it and tuning in and playing with the the cables and everything. And then I realized, like, oh, the issue was with the shifter, not being tight enough, had nothing to do with the actual thing I had spent the last half an hour on, I was like, that's the perfect example of taking a step back and saying, huh, this thing isn't working. But it might not be this thing, it might be something else that's actually causing the issue. And I thought, like, man, I can't wait to talk about this on the podcast, because this silliest example, but it happens all the time to us as developers. - -49 -00:36:08,759 --> 00:38:31,770 -Scott Tolinski: Yeah. Another one that I dislike is, is usually the thing breaks, when you change something, you know, like it works before you change something, and it breaks. I've had issues where like, I changed something in the body. This is this is just like a non real example. But it illustrates it, you know, let's say you change something in the main section of your site. And then all of a sudden, the error that pops up is something about your navigation or your header. And you might be thinking, Well, I didn't change anything in the navigation or header, how could it possibly be broken? Well, chances are, there might be some connection to some connection to some connection that leads to the error being thrown in the header. But even though the error is because of something you wrote in the other section of the site, because that happens to me all the time, where the error response that I'm getting is not necessarily exactly helpful. But I just changed this other thing. So what you don't want to do is you don't want to then jump into the header code and start tweaking that code if you didn't change it in the first place. Because chances are, it's not broken, if it was working fine before stuff doesn't break without you touching it. So going backwards in time, looking at previous Git commits. This is actually one of the huge benefits to commit a very frequently, you know, commit when your codes working and commit frequently. And then at any given point, you can always go back at your code and say, Wait, what did this file look like when it was actually working? VS code has that little icon in the top right, that looks like what the heck does that icon look like? It's called Open changes. But it's got like two little arrows and circles sort of looks like a refresh icon with arrows in it. But if you click that, it shows you the same file in the previous commit with some green and red diffs. To show you what's different, what changed. And I use this non stop when I'm troubleshooting. Because if like something is broken, I click that button and I say, Okay, this is what I changed. So therefore, the problem that I'm running into must be something in these sort of lines, and worse comes to worse, one thing I'll do is I'll just straight up, go into the previous commit, all select all of copy at all, paste it into the current version of file, and I'll confirm that it's working. And then once you confirm that it's working, then you can command Z, undo that copy and paste and then begin to know Okay, well, at least, it definitely works with this last commit, it definitely works with this previous code. So at the end of the day, I can always come back to this to sort of my baseline of something that actually worked. - -50 -00:38:31,940 --> 00:39:01,670 -Wes Bos: Next one is we talked about this before rubber duck debugging This is simply put a rubber duck on your desk and explain the problem to it. This is I always have this where I have the issue, I can't figure it out. And then I have to explain it to somebody else, so they can help me. And as I'm explaining to them, I figure it out. Because by forcing yourself to talk through an issue, even if it's to a rubber duck on your desk, it forces you to think about all the moving parts. And that will usually jog something in your memory and say, Oh, that's exactly what it was. - -51 -00:39:01,859 --> 00:39:43,170 -Scott Tolinski: Yeah, yeah. And sometimes your rubber duck can be another human being like my my wife, who may as well be a rubber duck when I'm rubber ducking debugging it there. Because she doesn't need to listen to what I'm actually saying. It's like, I need to just be saying it out loud for it to be helpful, right? She's not going to give me the answer. It's the fact that I'm telling her a bunch of this stuff is is what's going to help me with the answer. You know, she would probably prefer that I actually had an actual rubber duck to do it, though. I don't think it's exactly a good use of her time. But yeah, I think I think that's it for debugging. Do you want to get into our last sponsor here, which is Freshbooks. the freshest of our sponsors fresh - -52 -00:39:43,170 --> 00:40:28,880 -Wes Bos: books is the freshest of the books that you out there. If you are a small business, you're a freelancer, someone who needs to keep track of all of your expenses, all of your invoices all of your time tracking, who's paid who's not actually accept money online is one thing they do via PayPal Palin's stripe and all these things Freshbooks is what you want to check out. I use it all myself, I just finished up my taxes. And I just did one big dump of all of my information, sent it off to my accountant. He saw all of my all of my income, all of my expenses. It's just a great way to stay organized with all of your accounting, check it out@freshbooks.com forward slash syntax to get a 30 day unrestricted free trial. And thanks so much to fresh books for sponsoring you - -53 -00:40:28,880 --> 00:40:49,980 -Scott Tolinski: fresh books. Cool. So this is the part of the show where we like to get into sick picks, which are picks that we find to be sick. They're things that we like could be anything, like anything, anything I think you're sick pick here really illustrates that. I think I think pick a lot more before to to the little spoiler about what was the sixth pick is going to be? So do you want to get into your sick pick? - -54 -00:40:50,310 --> 00:41:33,540 -Wes Bos: Yeah, so my sick pick is the wall lawnmower, which is an odd thing that they sell it didn't even know they sold one. I've talked in the past how I'm on the DeWalt brand, just because I have lots of batteries. And once you buy into batteries of this tools, you start to stick with that set of tools because batteries, the batteries are so expensive, the tools aren't really all that expensive themselves the batteries. So we were looking for a new lawnmower. And we have we have pretty tiny little lawn, one in the front one in the back. And it takes like, I don't know, seven minutes to mow it. And we had a we had a push mower. And that thing sucks. It's it doesn't do a good job. And I sharpen everything and it's a lot of work. And I can't - -55 -00:41:33,540 --> 00:41:34,920 -Scott Tolinski: imagine doing that. That Yeah, - -56 -00:41:34,920 --> 00:42:02,610 -Wes Bos: there's more socks. It's it seems really cool. And then we've got electric one with a with a cord. And I grew up I had a lawn mowing business when I was a kid and I hated the lawn the thing because there's always a cord where you want to mow, and it just gets in the way all the time. And you always have to like flip it over and unplugged and you're like tethered to the wall. And we've always been long more blessed over my house, I guess. Yeah, oh man, I - -57 -00:42:02,610 --> 00:42:03,840 -Scott Tolinski: deal with the plugin one. - -58 -00:42:04,080 --> 00:44:03,570 -Wes Bos: so frustrated with with electric I grew up with electric and I used it for my entire lawn, my business, I hated it. And I ran over the cord so many times. So and also just like the setup of getting the cord out and plugging it in, moving it around. It took more time than actually mowing the lawn. So I thought okay, like we need to get a gas one so that it's just quick. But the problem with gas is that like he has to maintain it. And you take the fuel out in the in the winter and make sure that you mix the oil and everything properly. And that's a bit of a pain as well. So I was like Finally, I was like I think that these electric lawnmowers are at a point now where they're good. So I went and researched all of the different ones out there. I know Ryobi has like a decent one. But I found out that default now makes an electric lawnmower. It takes two batteries that came with two of the big beefy five or six amp hour batteries. You slot it in and it's it's relatively quiet much quieter than a gas one for sure. And I think it's even quieter than our old electric one. And the sort of the kicker was that they are super cheap refurbished because the reality is is that the batteries don't last all that long if you have a medium to large size yard, so there are tons of people who've returned them after using them one or two times and we just went and bought a refurb for a couple hundred bucks less than a brand new one would cost just because a lot of people actually return these and it came with brand new batteries not not the old used one so I thought that was really cool to be able to buy it. I've mowed the lawn three times and I'm only a third of the way down my battery so I figure for our small little lawn I can get two or three months out of a set of batteries. Though if you have a large lawn you might I've seen reviews online people can't even mow the in their entire lawn and one battery charge which if that's the case, then that's the big Yeah, that's that's a huge downside. You're not going to spend an extra like the batteries themselves as an extra 200 bucks or 150 bucks for - -59 -00:44:03,960 --> 00:44:05,670 -Scott Tolinski: batteries right there. recharge them Yeah, but - -60 -00:44:05,670 --> 00:44:21,660 -Wes Bos: like you Yeah, but you can't like stop mowing your lawn halfway and wait for four hours to charge these things. So yeah, I think that's why but if you have a small lawn I highly recommend it the wall it's a 40 volt. lawnmower it's two ticks two regular 20 volt batteries. I slot in big fan. - -61 -00:44:21,660 --> 00:44:25,710 -Scott Tolinski: I use the ego one eg Oh, - -62 -00:44:25,830 --> 00:44:28,770 -Wes Bos: yep. And this is a Home Depot brand, right? - -63 -00:44:28,890 --> 00:45:03,150 -Scott Tolinski: Yeah, they're they're at Home Depot. I think it's a Chinese company, but they're manufactured in Michigan. So that's sort of like backwards. Yeah. They're pretty cool. You know what the thing that like blew my mind the most about mowing the lawn within electric or battery powered lawn nor was I've always moaned with a gas and you smell that gas it's like coming up in your face and the thing to me that like blew my mind was just how awesome fresh cut grass actually smells while you're mowing the lawn. grass. And and also the sound benefit to it's so much quieter and it smells so good. I love everything about my battery powered lawnmower. So - -64 -00:45:03,210 --> 00:45:14,670 -Wes Bos: yeah, I want to get the I want to get a blower too because like my kids, I can't blow the backyard when my kids are out because they start screaming because it's too loud, dude. And I'm like, Oh, good. Yeah, - -65 -00:45:14,820 --> 00:46:12,000 -Scott Tolinski: I have the ego one again with that. And it, it is so powerful that I used it as the snow blower this year, I didn't know my snow blower at all. I just used it to do snow all over the place. And I love having a very, very powerful leaf blower is like something that I just never imagined that I would actually use that much having a powerful one because I had kind of a weak one before. And now I have a nice powerful one big fan. My sick pick today is going to be something to get you energized for the day. It's a cold brew coffeemaker, these things are just like really cheap and amazing. It's a giant ball jar. Like when I say giant o arrived, it is the largest ball jar I've ever seen. It is monstrous. And then it has like a giant, double layered filter, and then a little like lid popper. And so you can do is to basically throw coffee in here, throw water in here, put it in the fridge, let it cold brew, and then you have a concentrated cold brew crow. It's 25 bucks for the biggest one. And how easy is that? It's so easy to court - -66 -00:46:12,000 --> 00:46:15,750 -Wes Bos: which insane measurement is about two liters. - -67 -00:46:15,990 --> 00:46:17,070 -Scott Tolinski: I think it's three liters. - -68 -00:46:17,250 --> 00:46:21,390 -Wes Bos: Is it I'm just googling to CT two liter 1.89 liters. - -69 -00:46:21,450 --> 00:46:26,310 -Scott Tolinski: Oh, this. Oh, liters. Yeah. What am I? Yeah, get on. - -70 -00:46:26,760 --> 00:46:28,290 -Wes Bos: Get on metric, Scott. - -71 -00:46:28,440 --> 00:46:38,850 -Scott Tolinski: Yeah, I know. I would like to live your life that my whole life is based around Imperial. Is that what it's called? Yeah, it's called. It's a whole lot based on dumb measurements and - -72 -00:46:38,850 --> 00:46:40,560 -Wes Bos: leaders and stuff like that. Yeah, - -73 -00:46:40,590 --> 00:46:57,240 -Scott Tolinski: yeah, insulators. I'm all about insulators. Now this thing is super easy. super nice. super cheap. If you like coffee, cold brew coffee, man. Get yourself one of these beats beats thrown in a jar and having to filter it later. Yeah, that's all I got. Um, shameless plugs today. Do you have any shameless plugs? - -74 -00:46:57,330 --> 00:47:07,620 -Wes Bos: I'm going to shamelessly plug all of my courses Wes Bos comm forward slash courses, check them out. JavaScript CSS, you can learn it from me. JavaScript, - -75 -00:47:07,650 --> 00:47:10,830 -Scott Tolinski: CSS, JavaScript node modules. breakdancing barbecue. - -76 -00:47:12,690 --> 00:47:18,720 -Wes Bos: We need to make another one of those. If someone has an idea of like a silly thing to do, I think yeah, it would be really funny. - -77 -00:47:18,990 --> 00:48:19,920 -Scott Tolinski: Silly. Silly is good. My shameless plug is the latest course from levelup tutorials. If you want to learn React Native from a React Native expert, you're going to want to check out level two React Native and this one is not a course for me. It's a course from Spencer, Carly. And he has done such good React Native content. His React Native content is so good that it's so the way that I initially learned React Native myself through his videos. He's got a ton of work on YouTube. So if you want to see if his teaching style is for you, check out his YouTube channel. I'll have a link to Spencer Carly's YouTube Channel in this video. But if you want to learn React Native, we get into all sorts of amazing stuff in here swipe gestures, add removing items from lists, persisting lists with async storage. We use hooks in this course. So Spencer has done just a great job of using modern react and modern React Native. So if you're looking to level up your React Native skills, check out level two React Native on level up tutorials right now. - -78 -00:48:20,280 --> 00:48:25,200 -Wes Bos: Alright, I think that's it. Thanks for tuning in. We will catch you next week. - -79 -00:48:25,410 --> 00:48:39,300 -Scott Tolinski: Catch you later is please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax153.srt b/transcripts/Syntax153.srt deleted file mode 100644 index 911a600b7..000000000 --- a/transcripts/Syntax153.srt +++ /dev/null @@ -1,176 +0,0 @@ -1 -00:00:00,359 --> 00:00:19,980 -Unknown: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, - -2 -00:00:19,980 --> 00:00:21,660 -Bob and Scott Taylor. - -3 -00:00:23,610 --> 00:00:24,480 -Totally in ski. - -4 -00:00:25,950 --> 00:01:10,230 -Scott Tolinski: Oh, welcome to syntax and this Monday tasty treat. We're gonna be talking about a really interesting new feature that is coming to your browser API's all about internationalization, one of the least fun things that we have to deal with how do you deal with different languages, different currencies, that sort of thing. In all these different languages, it's actually a very, very difficult aspect of programming and something in specifically in JavaScript that if you've ever had to do it, you've probably come across some of the pitfalls, or some of the ways it could be better. So we're going to be talking about some of these cool little tasty treats that we have for you. My name is Scott Lynskey and with me as always, is West boss. - -5 -00:01:10,800 --> 00:01:12,750 -Wes Bos: Mr. International today. - -6 -00:01:13,230 --> 00:01:16,680 -Scott Tolinski: Oh, yeah. What is with that designation? - -7 -00:01:17,550 --> 00:01:23,040 -Wes Bos: Mister, because I I'm really excited about all these international methods. Oh. - -8 -00:01:25,410 --> 00:01:29,850 -Scott Tolinski: I don't like didn't know if that was a joke about you being in Canada or something? Oh, no. - -9 -00:01:29,850 --> 00:01:32,069 -Unknown: I was like live in your house. - -10 -00:01:32,250 --> 00:01:35,490 -Scott Tolinski: You're in you're not out of the country. What? - -11 -00:01:36,840 --> 00:01:45,060 -Wes Bos: Oh, man. Well, don't Google Mr. International, unless you want to see some cut dudes from around the world. - -12 -00:01:46,350 --> 00:03:59,190 -Scott Tolinski: I kind of probably could have guessed that. I think that's hilarious. So this episode is sponsored by Log Rocket Log Rocket is a really cool service. And a lot of people who have never heard of Log Rocket try for the first time. And they're really blown away just by how it can totally open their eyes. What it does is it gives you the opportunity to see bugs as they happen in your application, you get a really awesome little video, sort of replay of what happened when the error happened. And along with any sort of error logs, any of that stuff that you get via your browser, if you use Redux, you get the Redux store at the time, the entire networks tab, all of that good stuff. So check it out at Log rocket.com forward slash syntax and get 14 days for free, you're not going to need 14 days to realize how cool this is. But trust me, after those 14 days, you're going to be wanting to stick around because this is a tool that I use constantly in my application. And so let's get into it. Just to be totally honest, I am not, you know, the most fluent in internationalization of websites. Now, the furthest that I ever had to give personally for internationalizing or internationalization was via when we were working on this Ford project we had to deal with it was like 90 markets. Yeah, so the components that we were building had to work with all of these different internationalization formats, right to left to ride, you know, with whether it's up and down language of Japanese, all these different sort of fonts and everything like that. But we were looking at it from a design perspective, we weren't looking at it from how do you get this to work in a real production environment? It we actually the way we did it was we had a gulp plugin that basically swapped out the fonts and the text and all this stuff based on which language we passed into it. And that would just spit out a version of the site. So it wasn't actually doing any of this stuff live, it was just saying, Alright, here's the now here's this version of the site that we can test it in, we can do that looking around it and see how everything looks that way. So I'm really interested to get into some of this stuff today. - -13 -00:03:59,220 --> 00:06:48,540 -Wes Bos: Yeah, I think it's, it's funny, because all of this stuff that I'm talking about today, I didn't even think about it in terms of like translation or inner internationalization. I'm just excited because they're actually super handy even if you're just doing a single language website. Because these are things that have been a huge pain so things like formatting currency, or formatting percentages, or formatting lists of things with and or or doing things like moment j s, like four hours ago, or formatting a day. All of these things are just hard in general and they often require a whole external library in order to do them easier. And I MTL methods are making them super easy in one language, or super easy in many languages, which is really cool that it will just be easily updatable for whatever language you are locale you are trying to, to support. So let's get right into it. So I NTL is a global in the browser. So it capital i n t l dot and then We're going to go through some of these new methods that are coming. I think they're all in draft still, no, not all of them are in draft, but most of them are well supported in almost all the browsers. So it's, it's something that you can probably get to starting to use. The only caveat is that these are incredibly complex. So the polyfill for them is either non existent, or will be very large. Or even even things like no jazz, if you want these to work with all of the different locales in Node JS, you have to start up node differently, and tell it to actually include all of these things. Because I think under the hood, there's some super complex code going on in here, which, which is why it makes it so easy for us. So first one, I MTL number format. This also is available on on numbers with the method to local string, it's the exact same thing, it's it's said it's preferred to use the MTL number format, the way that all of these work is that you create what's called a formatter. And then you pass the format or a couple different options for how you would like to format your numbers. So with I MTL number format, you create a format or and you pass it, which locales you'd like to support. So there's a huge list I'm not even going to Arabic is the probably the only one that I can pronounce here. But you can also just pass it like Oh, locali e N dash U, S, or N dash CA, that'd be English, Canadian, or N dash, Fr, you get the point, right? You can look up a list of the lingo. Yeah, we'll - -14 -00:06:48,540 --> 00:06:51,300 -Scott Tolinski: link up to the page for the identifiers. Yeah, - -15 -00:06:51,360 --> 00:07:48,060 -Wes Bos: you can also just allow it to just look it up itself. So it will detect that from the browser, which is good, because I always hear from people who are living in a certain country, let's say you only speak English, but you move to France, and your browser is set to English, but because you live in France, it thinks you speak French, and then it just will automatically serve up French to you, there's a better way to do that. And that's just detected from the browser, what the language is set to on there. So that's good. The second one, you can pass this style. So you can set it to decimal currency, or percent. And this is really handy because in some languages, they use a period as a, like, if you have $11,400, they use the period where the comma is supposed to go, and then the comma where the period is supposed to go. And it's just, it's just backwards in some languages and, and cracked in English. - -16 -00:07:49,260 --> 00:08:00,930 -Scott Tolinski: Yeah, if you're a listener, and you hear us ever say something is like, correct in Canada, or the US or something, we're joking around your, your, your way of doing things. - -17 -00:08:01,230 --> 00:09:15,210 -Wes Bos: And then you could you can also specify which currency symbol, euro dollar, things like that. Or you can let it again, you could let it detect yourself, you can give it minimum and maximum integers. So I specifically use this API on my own website, because when I have a course, that is on sale for $97, I want it just to say 97. But when the course has cents on it, I want it to say like 97 and 58 cents. So when it doesn't have cents, I don't want it to show that. So I have a little bit of if statements there, that will, it will give it the minimum and maximum digits that it would like it to go. And I believe it will round it. If you have more than that is actually available at the end of that you call format on this thing. And it will spit out a beautifully formatted price or percentage or just a decimal number, which is amazing. Because previously, you'd have to go and get some like sort of format money function. And then there's all these weird edge cases, like specifically, when you have something that has 10 cents left, or a lot of times, it would just be like $40 dot one, like no, there's it's, it's 10 cents, I need the zero on the end, right? So as frustrating with that kind of thing. - -18 -00:09:15,630 --> 00:10:23,970 -Scott Tolinski: Yeah. So next one we have is the list format, which this is the first one that we we talked about this morning. This is really fascinating. Basically, you have a list, right? Maybe you have an array of strings, maybe it's let's say yellow, black, with another good syntax color, white, yellow, black and white. So your string is an array of yellow, black, white, and then you tell it that it's going to be a list of strings. Or you I'm sorry, you create your list. You give it a international list format, you say it's English, and then you format the list. And then it basically adds in what would be the common words that would create a list for instance, if you had an array like we said, which was just a yellow, black White, the output of that would then become yellow comma, black, comma and white. So it puts in the commas where they need to be. And it gives you the and and I see here that by default, it looks like it does do the Oxford comma. I don't know what doesn't that Yeah, I typically use the Oxford comma myself, I don't really have any strong opinions about it, though. But I like it. Yeah. - -19 -00:10:23,970 --> 00:11:28,050 -Wes Bos: It will also do, you can set a conjunction, which is junk, or, by default, it will use and, and then you can set it to be what is the conjunction, junction disjunction, and that will give you or so it will say, yellow, black, or white. And again, like, this is just something that if you had this in an array, you'd have to take all of the items except the last one. And then you'd have to join them together with a comma. And then you'd have to take the last item. And then there are no spaces here. And yeah, and then put the last item on there and then have a period and this will just do it all for you. And then you can just pass it a different locale, and then have not exactly sure how it works in other languages, but I'm sure they figured it out. And it will properly format it for the different types of languages. There's also like different styles, you can give it a style of long, short and narrow. I'm not sure what the difference between long - -20 -00:11:28,050 --> 00:11:31,290 -Scott Tolinski: and short is these examples look the exact same to me. - -21 -00:11:32,520 --> 00:11:49,440 -Wes Bos: The long and short. I don't know what the difference between long and short is. But narrow will will will not give you the end, or it will simply just give you comments, which I guess you could just do with a raid join as well. But I'm sure there's some fantasy things between different languages in there that makes that worth it. - -22 -00:11:49,920 --> 00:12:15,090 -Scott Tolinski: Yeah, interesting. stuff. So fascinating. Um, yeah, yeah, I think a lot. There's a lot of browser API's that when you dive into really, there's so much stuff in there that maybe you haven't used before that there's just a lot of opportunity to like not pick up an NPM library to do some of this stuff. And to just try to use the browser API to do it. instead. It's one of those things that I wish I had more time to just like sit and read through the MDN docs all day. - -23 -00:12:15,689 --> 00:12:39,780 -Wes Bos: Yeah. Next to we have here our date, time format and relative time format. So very much like moment j s, where you can nicely format your date times based on based on like, if you want to have your first show whatever or like I know that the US does, what day first? No, the US does month day, year on day, which makes makes no sense. - -24 -00:12:39,930 --> 00:12:44,400 -Scott Tolinski: It doesn't make any sense. But when you grow up and you're used to it, it makes perfect sense for no reason. - -25 -00:12:45,180 --> 00:13:10,650 -Wes Bos: Like most things in the US, right? works. Yeah, it works. And then everywhere else does day, month, year. So if you just format it by passing it n us It will do it the wrong way. And if you pass it the E n dash GB, it will do it there. I wonder what happens when you pass it the Canadian way? Let me see. Hold on. Maybe I'm talking smack in Canada. Same way here. Hold on. - -26 -00:13:10,710 --> 00:13:21,510 -Scott Tolinski: Yeah, I kind of felt like it wasn't just the US that did that way and that Canada did the same way as the US but we'll see here. even sweeter after you did talk trash. - -27 -00:13:21,810 --> 00:13:29,430 -Wes Bos: If you pass it. e N dash ca it will give you year, month day. So - -28 -00:13:31,110 --> 00:13:31,800 -Scott Tolinski: weird. - -29 -00:13:32,610 --> 00:13:39,690 -Wes Bos: Yeah, that's, that's interesting. Oh, what about French end? fr dash ca. - -30 -00:13:39,990 --> 00:14:02,610 -Scott Tolinski: So the cool thing that while Wes is doing is a cool thing about this is you can fire up your browser, throw in some of these things and just run some of these little experiments yourself. It just in your console there. I think that is that's awesome. You can just yeah, try it out and answer these questions without having to go to Google, you can use your own .js skills. You can pass it different types of calendars, Buddhist, Chinese, Coptic, - -31 -00:14:02,610 --> 00:14:12,180 -Wes Bos: Gregory, Hebrew, Indian Islamic, Islamic with to seize Japanese, all kinds of different different types of - -32 -00:14:12,510 --> 00:15:06,660 -Scott Tolinski: calendars. You can pass here, our cycles, you can pat like, I would love to meet the people that have implemented the logic behind all this. Yeah, so incredibly complex, just tucked away nicely for you. Yeah. And this next one, I think is the plural rules, which is pluralization. And listen to me seems like that has to be very complex, to get any sort of pluralization working, where you could be confident that the word is going to be pluralized. correctly, there's not just as simple as tossing an S on to the head of it. That dimension. I have no idea personally, what other languages the ways of doing pluralization I should know I feel like I know enough about other languages, but most of the languages that I know don't have any sort of wild ways of doing this, but I'm sure there's a ton of weird little exceptions here and there. I'm sure there's a ton of weird stuff about this. - -33 -00:15:06,900 --> 00:15:43,170 -Wes Bos: It's in the example says Arabic has different plural rules. So if it is, if it is zero, it says zero. If it's one, it says one. If it's too It's as to if it's six, it says few. And if it's 18, it says many. I wonder at what point does it change from few to many here? Let's try 10. Few. Strike 15, many Oh, 13, many 12? Many 11? Many 10? tennis few and 11 as many, you know, a - -34 -00:15:43,170 --> 00:15:47,550 -Scott Tolinski: few to me always enter that three. Yeah, yeah, always the three, - -35 -00:15:47,970 --> 00:16:19,710 -Wes Bos: hold on a couple you eat. And we pass it N dash us. Eight is other, bypass it to other one is one interesting. You can also get things like first, second, third, fourth 42nd. So that's always, that's always kind of a tough thing to do. It's just like very simple to say it out loud. But if you're ready to write an algorithm as to how that works, this will do that all under the hood. For you. - -36 -00:16:19,770 --> 00:16:23,520 -Scott Tolinski: This is this is all good stuff. And it all exists in your browser. - -37 -00:16:24,090 --> 00:16:45,270 -Wes Bos: Oh, I think this is like this is useful to distinguish between singular and plural form example dog and dogs. So it will give you other if it's dogs. So zero dogs, one dog, and then two dogs everywhere. Everything else everything except one is is dogs. And then one is dog. And that's just - -38 -00:16:45,270 --> 00:16:49,650 -Scott Tolinski: transform dog, two dogs, or am I Oh, tripping on that one? - -39 -00:16:49,680 --> 00:17:25,140 -Wes Bos: Well, what I'm what I'm seeing is that it will just give you the word, one, two or other. And you have to write the logic. Yeah, like like WordPress does. Where it will you like I have comments, right? Then you can say like, like for zero or more as a comment. Otherwise, I would usually just use a little shorthand if to add an s. But again, there's many use cases where that doesn't cut it. And this will, then this will go to other languages. Right. Interesting. - -40 -00:17:25,170 --> 00:17:36,780 -Scott Tolinski: Yeah. So I was I was thinking for some reason that this was the ability to transform a dog into dogs, despite not seeing that example. Anywhere. It's interesting, very interesting. - -41 -00:17:37,100 --> 00:17:59,730 -Wes Bos: Yeah. It just gives you the, the type, and then you would have to write your own function to tell it. Nah, pretty, pretty cool. I think like it's you might be if you just do an English website of a saying like, hey, like, why would I need this? But it's probably worth doing ahead of time. Because as soon as you need to internationalize something, you're already set up. - -42 -00:18:00,390 --> 00:18:13,650 -Scott Tolinski: Yeah. And it's at least worthwhile to just head to these docs and pause through them because you're gonna someday run across something. And instead of reaching for a library, you're gonna say, No, wait, nevermind. I know how to do this. I know how to do built in. Yep, built in. Got it. - -43 -00:18:14,330 --> 00:18:25,680 -Wes Bos: All right. I think that's it. If you want to check it out. I suggest you go to the MDN Doc's and just look up by MTL, and they have a list of all of the things we talked about, as well as hit the show notes. Awesome. Well, thank - -44 -00:18:25,680 --> 00:18:45,510 -Scott Tolinski: you so much for following along with us today on syntax and we will see you on Wednesday. Please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax154.srt b/transcripts/Syntax154.srt deleted file mode 100644 index ff8dae678..000000000 --- a/transcripts/Syntax154.srt +++ /dev/null @@ -1,416 +0,0 @@ -1 -00:00:01,319 --> 00:00:22,859 -Wes Bos: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. Welcome to syntax. This is a podcast with the tastiest web development treats. Today we are going to be talking all about SP GS with Sara. Please say your last name Sarah - -2 -00:00:22,889 --> 00:00:23,700 -Unknown: suede done - -3 -00:00:23,700 --> 00:00:34,610 -Wes Bos: beautiful. We were just I was just trying to say it before the show. And I was like, You know what, I've got a bad, bad history on this show of goofing up people's last name. So I appreciate that. - -4 -00:00:34,680 --> 00:00:36,930 -Unknown: I think the way you said it is the worst I've ever heard. - -5 -00:00:39,900 --> 00:00:42,840 -Wes Bos: Oh, that means so much to me. Believe me, believe me. I - -6 -00:00:42,840 --> 00:00:47,189 -Unknown: have people butcher my last name all the time. But you've set a record right now. - -7 -00:00:47,250 --> 00:00:48,900 -Sudan is what he said. - -8 -00:00:49,890 --> 00:00:53,549 -Yeah, it was very weird. Yeah, definitely. completely messed up. - -9 -00:00:55,409 --> 00:01:18,330 -Wes Bos: Oh, that's great. So you're probably listening to this saying where is Scott? So Scott was hoping to join us today. But he just had a baby. So big congratulations out to Scott. You had a little baby girl, Brooklyn to Lynskey. And he is obviously super tired right now dealing with the baby. So he wasn't able to make it. But make sure you go and tweet Scott a congratulations. - -10 -00:01:18,360 --> 00:01:19,650 -Unknown: Welcome to the world. Brooklyn. - -11 -00:01:19,680 --> 00:01:50,130 -Wes Bos: Yes. today's podcast is sponsored by two awesome companies. First one is Sentry gonna do all of your error and exception tracking. And second one is Sanity. It's your headless CMS. Alright, let's get going into the show. The reason why we've had Sara on here is because you seem to be a bit of an expert in everything front end web development, and specifically you do a lot with SVG. So do you want to like maybe give us an introduction as to who you are what you do? all of that good stuff? - -12 -00:01:50,130 --> 00:02:24,120 -Unknown: Yeah. First of all, I don't like to label myself as an expert. So I'm gonna skip that part. Yeah, I love that stuff. I've wrote Well, yeah, my name is Sarah swidden. I'm a front end developer from Lebanon, I do freelance. I work with clients across the globe. Most of our clients have been based in the US and Europe so far. I do front end development. So everything HTML, CSS, SVG, accessibility, with focus on performance. Yeah. So that's literally what I do. I also do speaking and I run workshops, both at events and in house. This basically sums up everything that I do. - -13 -00:02:24,690 --> 00:02:33,120 -Wes Bos: You do you do a lot of blogging as well, I think the first time I saw your work was probably what maybe like seven, eight years ago on code drops. Well, - -14 -00:02:33,150 --> 00:04:01,860 -Unknown: yeah, yeah, I wrote the CSS for the CSS reference for code drops. I do write a lot of articles. And I think most of the people that know me, no me because of SVG. So it all started, when I was introduced to SVG in 2014. I was supposed to give a talk at CSS conf about different ways to create texture text and, you know, graphical text effects. But I was I just lost the inspiration for that talk a couple of weeks before the talk. And at that time, I was getting into SVG. And it was like this new thing. And when I'm learning about something new, I like to write and talk about that thing. So I was just getting started learning SVG. And I thought that it would be a very good opportunity for me to dig deeper into SVG. And then whatever I learned, I could speak about that at my first talk. So I did that. And then after the talk, I started digging a lot more. And then I wrote the go to guide for the SVG viewbox, which I'm very, very proud of. And I think that article is what kick started the whole SVG thing for me. So I started digging deeper. And people started asking me more questions I was I get, I got more interested in SVG and different uses. It's not just an image format. It's a document format. So it can do a lot of things. And I was kind of like the SVG person for three or four years in a row, until I started shifting a little bit towards other aspects of the front end, and recently accessibility. So this is how I got started. And this is how most people know me via SVG, or because of SVG. - -15 -00:04:02,009 --> 00:04:24,930 -Wes Bos: Yeah, yeah. I'm just gonna say I love that the way that you approach doing talks is just whatever you're interested in at the moment, and whatever it is that you're learning, you're sharing, like, that's a huge that we get people ask all the time, like, how do I I'm too scared to do a talk because I'm not an expert on it. And the reality is, is no, you should just be learning something and sharing it as you learn. So I think that's really cool. That's what that's what you did as well. - -16 -00:04:24,990 --> 00:05:10,520 -Unknown: Exactly, yes. Because when you're learning when when the idea is fresh in your head, it's always like when you have that aha moment, that's the best time to write about that, like how you got to that moment. And I'm pretty sure that a lot of people will find themselves in exactly the same position that you were when you were trying to get to that moment, and you will be helping them we all have different perspectives about things and the way we learn is different. And some people find my way of teaching, teaching approachable, while others will find yours more approachable. So we all have different ways of learning and teaching at the same time, so definitely don't don't like it. None of us, okay, there are a few experts out there. But we're all learning, especially in our field. We're all learning something every single day. And why would you learning? That's the perfect time to be teaching as well. - -17 -00:05:10,880 --> 00:05:15,120 -Wes Bos: Oh, this SVG viewbox article that you wrote, where is that located? - -18 -00:05:15,630 --> 00:05:16,880 -Unknown: On my website? - -19 -00:05:17,160 --> 00:05:20,190 -Wes Bos: Okay. Here's your website, by the way. Sorry. Go ahead. - -20 -00:05:20,550 --> 00:05:24,770 -Unknown: Yeah, I was just gonna say you just Google viewbox and Sarah sweat. And you'll, you'll get to that article. - -21 -00:05:24,950 --> 00:05:30,330 -Wes Bos: Great. Well, we'll put a link in the show notes for that as well. Your website is super fast. By the way, what's that built on? - -22 -00:05:30,660 --> 00:05:38,580 -Unknown: Oh, well, HTML, CSS, a little too non JavaScript. And I'm using service workers for offline. Ah, - -23 -00:05:39,180 --> 00:05:46,380 -Wes Bos: that's awesome. I was just just going through the many like, you've got probably a hundreds of articles, or at least 100 articles on here. - -24 -00:05:46,530 --> 00:05:48,240 -Unknown: Definitely more than 100. But not - -25 -00:05:48,270 --> 00:06:17,490 -Wes Bos: Yeah. And I was just going through the air pagination, which is really cool. On the sidebar here, go to Sara's website. And I was like, wow, this is super fast. And I intentionally didn't look at it just to see what was what was behind it. Um, Alright, so let's let's get into SVG. Do you want to maybe give us a rundown of like a, what is it? Is it an image? Is that a text file? Is that its own thing? Is that HTML? Just explain it to us like we're five years old? - -26 -00:06:17,820 --> 00:07:08,700 -Unknown: Okay. Well, I don't think a five year old would know what XML is. So let's let me say five year old 30 year olds, okay. Okay, five year old going going on 30. So SVG is an XML based image format. So it's both a text document and an image at the same time, or in other words, it's an image that you can edit. So the contents of the image, you write those down using markup using XML, which is very similar to HTML, you have all of these conveniently named elements. So if you want to draw a rectangle, you have a rect element, you can draw circles you can you have a lot of stuff you can animate inside of the SVG. So it's basically kind of like HTML, but a different kind of HTML. So you have all these elements that we don't have in HTML. Yeah, that's, that's how I would describe it. You know, it's an image that you can edit. That is the summer. - -27 -00:07:08,700 --> 00:07:58,620 -Wes Bos: I think that's a really good explanation of it. Because when you get into it, you first think like, Oh, it's just, it's just HTML. They're like, what are these other? What are these other tags, oh, there's just some tags I have to learn. And then and then you sort of get into it, and you go, wow, this is this own world. And like, it really is this, like, if somebody we talk a lot on the show about how people can like, specialize in something and like, make that their thing for a couple years. And that's a great way to sort of get ahead in this specific spot. And I think SVG is a really good spot, because, like, I'll be saying, like, I know a lot about web development. And it's just not an area that I know a whole lot about. And I would say that's probably true for a majority of our audience. So if anyone listening and thinking like, like, like, what's the area that I could just double down on and get really good at, this is an awesome area, if it's something that interests you, - -28 -00:07:58,650 --> 00:08:33,360 -Unknown: SVG is fantastic, especially because it has so many there are so many places in front that you can put it to good use. It's not just about displaying images. It's not just about logos. It's about iconography, and different ways to load and to optimize for performance. And then you have a data visualization. And then you have accessibility. And so many things you can do with SVG. svg, can aid with accessibility. So it's not just making SVG is accessible. But SVG is can aid and making certain things like icons accessible, it's fantastic. And it is definitely definitely one of the most important tools that we have in our front end arsenal. - -29 -00:08:33,529 --> 00:08:53,399 -Wes Bos: So an SVG can be it can be used in I guess two ways. Like first, you can just use it as a regular image tag. So if you have an image source equals logo to SVG, and then you can also just use the like an SVG tag and dump all of the XML right into your HTML. Do you want to give us the pros and cons of both of those? - -30 -00:08:53,490 --> 00:08:58,470 -Unknown: It's not just two ways. There's almost like seven different ways to embed and really, yes. - -31 -00:08:58,860 --> 00:09:00,270 -Wes Bos: Okay, can you give us all seven? - -32 -00:09:00,510 --> 00:09:03,210 -Unknown: Did you really don't watch my talks? Do you? What - -33 -00:09:04,200 --> 00:09:09,570 -Wes Bos: I ashamed to say? No, I have not seen that specific one. Is there one on YouTube that we can link up? - -34 -00:09:09,720 --> 00:11:51,480 -Unknown: Yeah, it's an old one. But it's okay. I mean, I am not a person that watches a lot of talks myself. So I'm not judging. Okay. I was just teasing really. So yeah, there are seven different ways. So you can embed an SVG is just like an either an any other image using the image tag, you can also use the picture element, which is my, my, the alternative to the image, the more modern way because you get to link to the SVG. And then you get to also provide a PNG fallback if you want to do that. And inside of the picture element, you can also use SVG as background images and CSS just like any other image. You can embed an SVG using an iframe. I don't usually do that because I usually use object. So there's also the object element, which is my favorite, especially for very large SPGs. That also requires some scripting. Let's say for example, infographics is my favorite example. You can also embed them Using the old embed tag, but nobody uses that or talks about that anymore. And then you have the inline SVG, which is just throwing the whole SVG tag with everything inside of it inline in your HTML, oh, you have all of these. And each one of them has its own pros and cons. So image and picture, they have the same pros and cons and background image in CSS. Also, they almost share the same pros and cons. So there are limitations. And I always say that the way you embed the SVG very much depends on what you want to do with it. And there are a lot of questions that I asked myself or other people before I decide or to choose one of them budding techniques. So if you want the SVG to be animated if it's just a static image, if you are animating it, is it just a simple fill, color change? Or on hover, for example? Or is it more complex animations? What kind of browser support do you need? What kind of fallback Do you want to provide? So again, if I if I were to talk about infographics or even data visualizations, if you have an infographic, that infographic is a visual representation of some sort of data, right. So for that kind of content, the best kind of fallback is to provide the data itself as text, for example, or as table the object is, would be a fantastic way to embed that because first of all, infographics are usually very, very large in size. So you don't want to embed them inline in the HTML, you would link to an external SVG file, which means that the file is going to get cached, which is the first advantage. And then between the opening and closing tags of the object element, you can put the fallback, which is the actual data, you can put that there. So if the SVG fails to load for any reason, or if there's any error, or if if a browser does not support SVG, we're talking about IE eight and below. I don't know if a lot of people have to support those. If they do, I'm so sorry for them. If they don't, then you don't have to worry about that. But the good thing is that you can provide a completely different alternative or view of that data between the opening and closing object tag - -35 -00:11:51,600 --> 00:12:00,779 -Wes Bos: a, like a video tag, if back in the day when Yeah, the video tag used to put the like flash fallback in between the video tags works the same way. Yes. Okay. - -36 -00:12:00,809 --> 00:13:30,960 -Unknown: Yeah. So iframe and object have also both have the same pros and cons. When it comes to SVG, image, picture and background image and CSS are similar object can be scripted using JavaScript. Whereas images Cannot you can, you cannot use any JavaScript on SVG is embedded using an image or a picture or a background image, image picture background image cannot be animated or interacted with, whereas the other embedding techniques can be absolutely the absolute most flexible way to embed an SVG is to put it in line. Because you can use JavaScript, you can use CSS from the main stylesheet. If you have an external SVG, if you're loading an external SVG, whether it's using an image tag or an object, you cannot access the contents of that SVG from the main stylesheet on the main page, so you would have to have a separate style sheet for the SVG, you can go into your SVG, and you can link to an external stylesheet. And then you can provide the styles in that. But the most flexible way to embed the SVG, of course is or to use an SVG is to be able to access it and control it from the main stylesheet. For that, you would need to embed it in line. So whenever I Yep, so whenever I can I do embedded in line, if the file size is too big, if it's going to clutter my HTML, I put it externally, if I need to use JavaScript, I use the object tag, if it's just a simple static image that maybe I animate, and on scroll, I use the image tag or the picture. So certainly, definitely different considerations. When you want to make a choice, you will have to ask yourself a few different questions and then choose accordingly. - -37 -00:13:31,169 --> 00:13:45,510 -Wes Bos: Okay, I didn't even think about that is that if you have an extremely large SVG, and you are just doing it in line, there's a possibility that that could really bloat your initial page load, because that's just making the HTML really large. Is that correct? - -38 -00:13:45,539 --> 00:14:33,179 -Unknown: Yes, absolutely. In my, when I when I bought the front end foundation for a Smashing Magazine, I gave a talk about this. So it was a case study. And in that case study, I showed one of the illustrations that we had. So we have three different illustrations for each one of the smashing membership options that we had, each one of those images was so big, I recorded a video of me scrolling through that SVG, it was huge. And we had three of those. So there was no way I was going to put all of those in the HTML. So I came up with a different way. So I load I loaded an SVG inside of an SVG. That was very, very neat. So if you can check that video out, I highly recommend it. So because as we choose a document, you can use the SVG to load another SVG SVG image inside of an SVG document inside of an HTML document. Pretty awesome. I love that. I love that. - -39 -00:14:33,419 --> 00:14:46,049 -Wes Bos: That's cool. And inside of inside of an SVG file, you can also have like style tags as well, and that CSS would be then scoped to the just to that SVG. Is that right? - -40 -00:14:46,049 --> 00:15:30,720 -Unknown: It depends on how you embed it. So if you have an SVG image, that's an SVG file, and you have styles, definitely those styles are scoped to that SVG. But if the SVG is inline in the HTML, and you have a style tag inside of that as well. And then you have another SVG, for example, on the same page. And you have. So in SVG, number one, you have a style tag, and you have a set of rules targeting an element with a class name bird, a bird. Yeah. And then in the other SVG, you also happen to have another element that also has a class name bird, then the styles from SVG, number one are going to affect the styles in SVG. Number two. So just because you have a style tag inside of an SVG tag does not automatically scope the styles to that tag, especially when it's embedded in line. - -41 -00:15:31,260 --> 00:17:41,430 -Wes Bos: Okay, wow, that's, that's great. I didn't know about the object way of approaching it, I had gone the way of always just almost always in line in them if I needed to attach some JavaScript to it, or if I needed to attach some CSS to it. And then I want the way of just using an image tag or a background image if I didn't need to change anything about the color because like, the one I guess, limitation with using a background image or an image tag is that, like, if you you can't access the parts of an SVG when it's when it's used as an image. Like you can't say, when somebody hovers over top of an eyeball of a smiley face. Just make that one eyeball wink, right? Right. Yes. Okay. That's pretty neat. The other thing I want to sort of move into here is this idea of icon fonts. Because I think maybe when did like Font Awesome come out, maybe like five, six years ago, Font Awesome came out where they took before that everybody was using, like, like PNGs, and sprites to do icons. And it was really tough to do, especially as we're doing responsive design. And then the iPhone came out with the retina screen where all of these icons that were raster based, looked terrible on on these screens, and then all the screens started to get better. So we started to switch to vector base icons, which is amazing, because they're almost always much smaller, you can inline them, you can change the color without having to open up Photoshop. There's all these amazing benefits. Yeah, it's just like, it's such It was such a big win for for the, the web in general, when when Font Awesome came out, but the way that Font Awesome used, sort of rolled it out is they they hacked the the italic tag, they use an eye tag, and then you gave it a class of FA and then you do like FA dash Twitter or FA dash Facebook and it would replace it with an actual icon. So behind the scenes that's obviously using SVG there, but there's been some pushback in the last, I don't know a couple years that you should stop using that way because it's inaccessible, and move the way as just using something else. Do you have any any thoughts on that? - -42 -00:17:41,520 --> 00:21:07,680 -Unknown: Well, definitely don't use icon fonts, that's for sure. Do not use icon fonts. There are many, many different reasons not with some of those reasons like SVG icons have advantages over icon fonts, from a development perspective, like styling with CSS, and let me check like I have an article here open here on CSS tricks that are always linked people to but for me, it's it's mostly about users, you know, so when if your user, for example, decides to disable fonts, for example, or block custom fonts, if you're using a font icon, then your icons are not going to load anymore. And if you have an interface that requires those icons to be usable, then you've already lost that. Opera Mini does not support icon fonts at all, because you're not supposed to have icons and fonts. So you it does support SVG, but it doesn't support icon font. So I can fonts are not going to show up an Opera Mini. Also, recently, exactly the month tweeted about how font display does not work with icon fonts. So again, there's going to be a lot of failures. Yeah, so from a user experience, perspective, icon fonts are really, really bad. And I come from a place where the internet connection is not always very fast here. So I see a lot of icon font failures, a lot of them, I visit a website, and for some reason the connection gets interrupted or the JavaScript fails to load or the page is just way too slow. So I have to wait a lot to see the bunch of icons. And sometimes I literally don't see them, I just see a bunch of small rectangles. This is horrible user experience. And the only literally the only reason I hear developers say that they prefer icon fonts over SVG. Okay, maybe two reasons. But the one, the major reason is it's more convenient for them. It's just faster, you know, just like you said, throw a class name on that span, and it's gonna work. It's not about us. It's not about us developers. It's not about our convenience. It's about the user experience. And if you're breaking that, then I'm sorry to say that you're not a good developer, I'm sorry. No matter how many awesome tools you use, if you're not building for the user, then you're just building for yourself. And that's very selfish. And I'm not saying that everybody who uses icon fonts is selfish. Just a disclaimer, that's not what I'm saying. I'm just saying that you need to look for whatever works for the user. And when it comes to icon fonts, they fail way too much. And unless you have a very, very, very strong, good reason to use icon fonts over SVG, then you should definitely be using as well. Plus, there are three different ways that you can embed an SVG there is one, which is the most popular one where you create an SVG sprite you and then you use the use tag in SVG to put the icons and line and which is pretty, pretty great. It's my favorite one. Personally, I just inline the icons, most of the times I don't even use a Sprite. But if you have a lot of icons and spreading them is the way to go. But one of the three different ways to spread an SVG is very, very, very similar to using two icon fonts. There is a tool by the filament group called grant icon, which creates an SVG Sprite. It's very different from the spreading that I mentioned earlier, using the use tag, the way you would embed that sprite is exactly the same as the way you would embed an icon font, you can put a span and empty span, which is not semantic, it's not you would have to put some extra stuff on it to make it accessible. But okay, let's say that you will do that. So you can just throw an A class name on that span, and it will load the SVG icon, a set of the icon font. So you can there is one convenient way to do it. But the only disadvantage in that case is that the SVG is like changing the color on hover requires a little bit of extra work. - -43 -00:21:07,770 --> 00:21:08,330 -Okay, - -44 -00:21:08,430 --> 00:21:25,290 -yeah. But the all of the other advantages that you get from using SVG are definitely worth it. So it's good to be a lazy developer, because being lazy means that we usually look for the fastest way to to achieve something. But it's it shouldn't be at the expense of the user experience. That's all. - -45 -00:21:25,440 --> 00:22:32,310 -Wes Bos: Yeah, I totally agree. Like we're all for, like developer experience on the show and making things easier for developers. But it shouldn't be at the expense of your users. And it definitely shouldn't be at the expense of of your users who you're probably forgetting about people on slow connections, people with different types of browsers that you don't think people actually use, things like that. So it's really interesting, like I definitely was in the camp initially, of like this, it's so much easier just to use a font icon. But what I found is that, like, you just need to put whatever time you need to put in to set up the tooling. So it is as easy as using Font Awesome, exactly. And then thank you, once you have that tooling in place, then it is as using is you can you can set up tooling that is going to just simply inline it for you, if you're using PHP, you can submit just like include that SVG file, or actually in most templating, at the very basic, you could just include an SVG file, and it will just inline it directly for you. And then there's obviously other stuff like this like so grunt icon is not just for grunt Is that true? Well, - -46 -00:22:32,520 --> 00:22:56,280 -Unknown: grumps icon is for grunt, but they also have a web tool, a web app. So you can, you can use the web app in order to generate the sprites as well, I don't know if they created something for gulp. I haven't checked in a while because I don't usually use that technique myself. Like I said, I usually just inline the icons. Or if I have to, like if there is a lot of icons and spreading them is more beneficial than I use the use sprite technique. - -47 -00:22:56,490 --> 00:24:57,540 -Wes Bos: There's likely I don't know any offhand. But like a lot of our developers that are listening to this podcast, use react or view or something like that, there's probably some sort of component that you can use to inline it yourself. Or I'm sure there is also like, different Webpack configs that you can pop in and it will do it for you. So I think it's probably easier than it was a couple years ago to do this type of thing. Yeah, let's take a quick break for one of our sponsors. And that is a century if you want to know what's happening with your errors, track them, compile them, find out all the information, what browser people are using, all you have to do is install Sentry on your website. And then as your errors happen, they will be caught by Sentry, all that data will be sent off to the dashboard, you can log into the dashboard, you can see how often an error is happening, who it's happening to what devices they're using, what browsers are using all of the information about that. So if you have any sort of website, and you don't even think you have errors on your website, I guarantee you do so go ahead and install. century century@century.io use the coupon code tasty treat, you're going to get two months for free. And that also works for existing users, which is super cool. We've had a lot of people on Twitter recently say like thank Sentry for not just making it for new users because I know a lot of you have probably tried it in the past. And you want to give it a go on another project that you're working on right now. So check it out. sentry.io coupon code tasty treat Thanks so much to Sentry for sponsoring. Next I want to talk about like the actual files themselves. So there's kind of two options or maybe a bunch of options when you want to use an SVG is you have to go off and find an SVG from somewhere that has the thing that you want, or you can design it yourself out of some some sort of program. So let's start with SVG is like if you are working with a vector based editor like sketch or Illustrator or figma, or any of these things, can you just export them from illustrator and just start using them on the web or what does that look like? - -48 -00:24:57,870 --> 00:29:24,900 -Unknown: Yes, definitely. But okay. If you're using illustrator, especially the latest one, which is currently the be one, you know, be exported SVG are very, very, very good. And a lot of times you don't even need to optimize them. The people that are working or that have worked on the export options in Illustrator and illustrator are Dirk shazza on and that was German, Dirk scholtes. And Dimitri baranowski. Both of them are SVG wizards. They're amazing people, amazing developers, SVG experts, and they worked on the export options to make sure that the exported SVG is are as clean and optimized as possible. So most of the times, if I'm exporting something from illustrator, I don't need to even optimize it anymore. But if you're not using illustrator, if you're using another tool, then you're probably you'll probably want to optimize them. The go to up to SVG optimization tool today is SVG. Oh, it has a lot of different options. So I use the drag and drop g UI, where you literally drag and drop SVG into the goi and optimizes them for you. You can also use grunt, gulp sketch, Illustrator plugins. They're all available. I have an article on my website that lists all of the different options that SVG o provides. Depending on your workflow, you can choose the one that works for you. I don't usually recommend using sketch for optimizing SVG. And I know other developers who work with designers who use catch to optimize SVG is I don't know about figma. I've never checked out any SVG is exported from figma. So I can't can't talk about that. But I know that the last time I worked with an SVG that that was exported from sketch, it was a pain in the neck to work with. And most of my previous client work, I worked with designers who exported SVG is from sketch and I literally had some of them, we looked, we just had to recreate those SVG s and they recreated the GS and illustrator, yes, because especially if you're going to animate the SVG. So if I'm the developer, usually, and I work with a designer, and I need to animate that SVG, right. So I need to have access to the contents of the SVG, which means that I need to be able to read the contents. And the content needs to be organized in a specific way. So if there is, say, a bunch of dots, and I need to animate those dots individually, separately, then I need those dots to be created as small circles literally like circle element, circle, element, circle element. But when a designer creates that SVG, for example, they would probably like in one of the projects that I worked on, they created a dotted line instead. So those circles were not semantically related like them, then they were not real circles, that there was no way for me to animate them. So they would have to recreate those as circles. See, yeah, so you need to be able to separate the contents of the SVG in a way that makes editing it and animating it possible. So this is one of the main reasons why the usually, you know, designers and developers should communicate, they should talk about everything, when when they're working together. But SVG is one of those areas where they absolutely need to be on the same page. designers need to know enough to create the SVG in a way that makes it easier for developers to work with. And developers should be able to communicate what they need to the designer. So I sat down with I didn't sit down with you, I work remotely. So I talked with a designer, and I told them that I needed, I need to be able to animate these circles separately. And that's why we need them to be created as different circles. And then I need this element to be separate. I need that element. I need this to be grouped with that. So the way you will interact with the SVG also dictates the way the SVG is created. And the way the SVG is created is going to dictate whether or not it's going to be easy to work with. So communication is key. And there are I can also have an article about that for tips for creating creating an exporting better SVG for the web. It goes over a few things like for example, creating simple shapes using simple elements instead of using parts because elements such as a circle, it comes with a few attributes and animating those attributes is easier, versus having a path that doesn't have those attributes. You don't want to convert elements to outlines because otherwise, a shape would be again converted into an A path. And, for example, texts could also be converted to a path and that makes it not text anymore. There are a few things that I highly recommend. If you're a designer working the best pitches, then definitely check these out. So yeah, communication sketch was not the best way to optimize SVG is the last time I checked, if you can afford using illustrator or if you use it in your company, then it's the tool that I recommend for creating and exporting SVG today. - -49 -00:29:25,050 --> 00:30:27,090 -Wes Bos: That's good to know. And just for our listeners as well, in the past, I've used some different things. I've used that what's it called image min, which was one of them. And usually if you're using something like Gatsby under the hood, they're going to be using, I think it's sharp what Gatsby uses but image min, there's Gulp image min, there's lots of different things. And under the hood, what they do is they take all of these different libraries that's used for compressing images, including SVG, which is the one that is used for compressing and cleaning up because often people will have like comments or unnecessary tags in their SVG and those can just be taken out And I recommend you go to Jake Archibald, SVG OMG. He has just a GUI on the web that you can drag and drop an SVG up. And you can turn on different features as to how to compress it. And we'll show you what is happening. And it kind of gives me an idea of like, what, what does compressing an SVG even look like when it's text based, rather than like a raster based PNG, where you can kind of see the compression happening in the image itself. - -50 -00:30:27,299 --> 00:31:33,630 -Unknown: Yeah, the Jake's tool is also fantastic. Because sometimes depending on the way that SVG was created, like sometimes when I used to get an SVG from sketch, and then I would optimize it with SVG, oh, it would break completely. Because Because of the way SVG, oh does the optimization, sometimes it removes certain attributes that remove certain things that ends up breaking the SVG. And one of the things that SVG Oh used to remove by default is the view box. And then it was changed, because the view box is very, very important without it never ever removed the view box as the rule, usually. So what's good about SVG OMG, is that you can choose what you want to remove from the SVG and you get to see the result of that optimization live. So say you want to remove extra ideas that are not used on used ideas, then you can see if that's going to break anything, it's probably not because they're unused. Although sometimes if you create an SVG in Illustrator, and you add a few ideas in it yourself, because you want to use those in your animations, then running it through SVG. Oh, is probably not a good idea, because SVG O is going to remove those IDs for you. - -51 -00:31:33,630 --> 00:31:34,950 -Wes Bos: Oh, yeah. - -52 -00:31:35,010 --> 00:31:42,030 -Unknown: And that case, if you use SVG OMG, it is good, because you can tell it not to remove those IDs. See, so yeah, definitely. Yeah. Because - -53 -00:31:42,030 --> 00:32:16,740 -Wes Bos: you can turn on the IDE, you can turn on and off the little features of SVG. Oh, depending on what you do want to strip out in what you don't want to strip out. What about getting SVG. So like a lot of us aren't designers. And we're not able to work with a designer, but we do want to go off and like if I'm building any sort of website, it's likely that you need to go off and grab an SVG. In the past, I've used the noun project, which you can either pay for it's pretty affordable, if you're only using like, I don't know, 1020 different I think they're $1 each, or you can just credit the the author as well. And I think they're, they're free in that case. - -54 -00:32:16,860 --> 00:33:08,160 -Unknown: Yeah, I I do use the nonprofit I also use I come on, I come on also come it does not it doesn't only just provide you with a bunch of icons, but it also can generate the SVG sprite for you. So you can use it not only for choosing the SVG, but also it facilitates or you can skip a complete step in your workflow if you use icons, because it generates the things for you. And all you have to do is just include them in your project. So I use icon moon, I use the non project if I use if I need to some sort of more complex illustration, for presentational purposes only I use free pick com free key ik.com. It's one of my favorite resources. It's also saying also the same as the non project, you can either either credit the the author or just pay a monthly fee if you can, I don't pay the monthly fee, because I don't use it that often. So I usually credit the author in my work. There's a lot of different options. Yeah, - -55 -00:33:08,360 --> 00:33:55,560 -Wes Bos: people think that the the credit needs to be like, like a huge, like banner over top of every single time you use an icon. But if you read into it, there has to be a page on your website somewhere that that says who has made it. So it's actually pretty reasonable only thing I don't like is that if I'm designing in sketch, and I download an SVG from the noun project, it always has the author's name in it, and you have to go and go ahead and delete that. I always use that as a time to put that in, like a running list of authors that I have. And then I can always just credit those when I need to. Because it's easy to download it and then forget who made it? And then good luck finding that one again. Right? What else are we gonna say here? What's the view box? I've heard this a couple times. What is What is that for? Why is it so hard to work with? What does it do? You only - -56 -00:33:55,560 --> 00:33:57,660 -Unknown: have to work with if you don't understand it, - -57 -00:33:57,840 --> 00:33:58,920 -Wes Bos: I don't understand it. - -58 -00:34:00,660 --> 00:34:19,290 -Unknown: It does take some time to get to wrap your head around it. But once you do it literally you level up your SVG skills, or go up to the next level. So the viewbox is, did you know that an SVG has two coordinate systems, not just one? No. Okay, so the SVG has two coordinate systems, not just one? - -59 -00:34:19,770 --> 00:34:20,460 -Wes Bos: No, I know. - -60 -00:34:22,170 --> 00:37:55,500 -Unknown: So you have the width and the height of the SVG, just like any other HTML element, it has a width and a height and that width and height creates a coordinate system would be top left corner or the origin of that coordinate system being at the top left corner. That coordinate system created by the width and the height of the SVG is called the viewport core. No, it's not that you work. Well, the width and height create the viewport. I call it the viewport coordinate system, the initial coordinate system, that's the official name. So the initial coordinate system is created by the width and the height of the SVG. But the only thing that this coordinate system does at first or by default is determine how that SVG behaves in the context of its page. So just Like any other HTML element, but when it comes to drawing inside of that SVG, you need the view box. The view box is the coordinate system that is used on the canvas inside of the SVG. So the SVG has a width and a height that creates a viewport that's kind of like an iframe and has a width and a height. But inside of that iframe, you can have a page that is much longer than that width and height. And SVG Canvas is conceptually infinite. So you can, I usually think about it in terms of layers. So I have this window or the HTML page. And then behind that, I have an infinite Canvas for the SVG. And drawing on that SVG requires a coordinate system and that coordinate system is created by the view box. So the view box has four numerical values, that's usually 00. x and no width and height, the width and the height and the view box are usually identical to initially identical to the viewport. So when you create an SVG in Illustrator, for example, and you exported the viewbox as 00, and then value value, those two values are equal to the width and the height of the SVG, because by default, when you create an SVG, you are creating it so that the content is all contained within the viewport. So the coordinate system of the canvas is identical to that of the viewport. And then when you start changing the values of the view box, what happens is the canvas inside of that viewport inside of that window starts to change, it starts to move around, it starts to zoom in, and then you zoom out. So this is literally what the view box does its coordinate system. Yeah, it's a coordinate system on the canvas and changing those values, changing the value of the of the top left corner. So I set for numerical values. 00, which is the top left corner, which is the origin, if you change the origin, you would be moving the canvas around inside of the viewport, you can move it around, if you change the value of the width and the height of the of the coordinate system inside of the SVG, you end up zooming in or out of the content and showing only specific areas at that at a time. So viewport fixed width and height. And then you have the view box on the canvas, which you can stretch, expand a shrink, zoom scale and out, move around. That's what the viewbox does, it gives you superpowers. And it's very, very useful. Cool. Like one of the ways to create an SVG Sprite. So I mentioned the grant icon way I mentioned the spread that everybody uses usual using they use element. But there's also a third one that I only usually talk about in my workshops, it uses the view box. So you would have an a canvas that has a set of icons on it. And then you change the value of the view box to only show one icon inside of the viewport at a time. This is one of my absolute favorite ways to create an SVG sprite is very similar to the way we used to create sprites using PNG sprites. But only this is SVG. And it's more powerful. But it also does come with a limitation because using this technique in particular, using the viewbox, you would be embedding the SVG using an image tag, which means that it's limited. It's it's the the icons are going to be static. - -61 -00:37:55,670 --> 00:38:10,940 -Wes Bos: Oh, yeah. Yeah. Oh, that's pretty. That's pretty nice. So like you could and I'm sure this is what used for a lot of times, you can have stuff outside of the view box that you're maybe creating or, or building up. And then you can just animate that thing on it or bring it into the view when you want to show it Right. - -62 -00:38:11,010 --> 00:38:12,000 -Unknown: Right. Correct. - -63 -00:38:12,000 --> 00:40:36,230 -Wes Bos: Ah, pretty nifty. I like that a lot. That that was like a really, really simple explanation of I totally, I think I totally understand what it is. Because I often see that like, you open up an SVG. And sometimes I just want to like change the color of an SVG, if I download like an icon from the noun project. And I'm like, Okay, this is great. But I just want a white, I'll just open it up in the in my editor and change the fill color or something like that, and over to white. And then I'm just like, what is this view box thing doing here? Can I can I remove it? No, there is no, don't ever do that. Oh, that's good. Let's take a quick break for one of our sponsors. And that is a headless CMS called Sanity, Sanity is a just set it a headless CMS. And what that means is that you sign up for Sanity. And you can create a sort of a back end. So you can create your different content types, you can assign different types of inputs and fields here different types of content, you can relate them to each other. And then you get an API that allows you to sort of access all of that data via any way possible, whether that's a react application, whether it's a vanilla JavaScript, whether it's a statically generated thing like Gatsby, or, or next or knucks, or and pretty much any way that you can fetch data, you can use it in it, they also have some really cool integrations with Gatsby that allows you to have instant updates, which is pretty nifty, because like if you're updating content in your CMS, you want to see that live, you want to see that live on your actual website before you actually have to do a redeploy, you don't want to have to sit there and wait for the thing to regenerate. So if you want to check out Sanity, I suggest you go to sanity.io forward slash syntax, they're going to double the usage quotas of their free plan if you use that, so don't just go To sanity.io and sign up, go to sanity.io forward slash syntax and try it out. They've got lots of kind of things over there. They have an example of podcast, they've got a migration tool. They have our entire syntax website that they rebuilt using Sanity, which is pretty nifty. Check it out. Thanks so much to Sanity for sponsoring. All right, let me Maybe I'll ask you what you want to talk about, because we probably won't get to all of it. So I wanted to talk about text accessibility filters, animation. Yeah. Is there one you'd like to talk about? - -64 -00:40:36,359 --> 00:43:28,080 -Unknown: Yeah, I can give a few tips about SVG animation, because we got a lot of questions about that on Twitter. So the most recommended way to animate SVG is if you have very few, if you have very, very simple animations, like you're just changing the color of an SVG on our then the CSS will do. But whenever you have any kind of more serious complex animations that requires cross browser support, then definitely use JavaScript, you will not want to use vanilla JavaScript because it's a pain in the neck. So you will want to use a JavaScript library, in which case I would recommend green sock, which is my go to animation library for SVG s, or you can also use snap SVG GS app is more powerful than snap SVG, because it comes with a lot of plugins that make animating SVG is a lot lot lot easier. And believe me, if you're looking for developer convenience, then g Sap Green sock is the way to go. It's easy to learn fairly, fairly easy to learn. It has fantastic documentation, fantastic help forums. JACK, the people behind green sock are amazing people, they are amazing. People, they are very helpful. They they share resources, they share demos, they share experiments. Green sock is the way to go. So if anyone ever asks me, what is the go to JavaScript animation library for SVG, then it's definitely Greenstock. For me learning about SVG animations, I would recommend Sarah dresner as SVG animation book. I don't know of any other book that is just about animation and SVG, other than this one. So I would recommend that. You just look into a couple of other questions that we have about animations, performance, just like with anything else, I always say you need to test it. svg animations are not hardware accelerated. As far as I know, I think there they were, there were a few optimizations and edge if I'm not mistaken. But that's just about it. So they are not hardware accelerated if you have very complex svgs. And you are using a lot of JavaScript, and you will need to test the performance, especially on mobile, just like with everything else. svg tips for performance in general. So just like okay, with animation, animation performance, I would say use a performance library. Green sock is a very good candidate there. Test up animation animations, always make sure that they're not too heavy. I also have an article from 2014 that I tweeted about, like 45. Before, right before we got on the show. It's still valid today. So you can there are a few things that you can do. And we already mentioned, some of them like optimizing the SVG using SVG. Oh, you can also the way you create the SVG in the editor also affects the size of the SVG when it's exported. You will, you will want to enable SVG jesup on your server, there are few things that you can do to to optimize SVG delivery, try to cache the SVG is use a cacheable. sprite, although sometimes it's recommended to inline the SVG if you need more accessibility, which I could not use to jump into the accessibility topic if you want. So - -65 -00:43:28,109 --> 00:43:43,200 -Wes Bos: yeah, we had a lot of people ask about that like, like, because you can put like SVG could be an image, but it also can be this interactive thing. And all also can have like content, it can have text inside of it, right? Like, how do you make sure that that's accessible? - -66 -00:43:43,260 --> 00:43:48,420 -Unknown: Well, the text, the sound of the SVG is accessible by default, if it's text, if it's real text, like if you don't come up - -67 -00:43:48,420 --> 00:43:49,950 -with a tag, right, - -68 -00:43:50,039 --> 00:45:01,290 -right, exactly. Okay. So working with text inside of an SVG is a pain in the neck, because everything is totally completely absolutely positioned. So we don't have like you, you don't have text that automatically breaks into a different line unless you use a foreign object wrapping. Right, right. So unless you use a foreign object, so you could have a foreign object, which is literally a foreign object inside of an XML document, which means that you would be able to put HTML inside of your SVG and the HTML text does wrap. But for an object is depends on the browser support that you need, because I don't think it supports it. So there are a few things that you can work around with text. Someone also asked about a font face inside of an SVG, what I would recommend is instead of linking to an external stylesheet, that contains the font face there, I usually put the font face declarations inside of my SVG file. And then I apply those inside of the SVG. So put everything inside of the SVG if you count. But again, if you have a lot of fonts, and you will need to test for performance, just like with everything with SVG, there is no silver bullet. There is no just one way to do it, particularly with SVG because, like I said, it's a world of its own and there are a lot of things that Take into consideration there. - -69 -00:45:01,500 --> 00:45:45,300 -Wes Bos: I don't even know if we'll get into this today. But like there's this whole world of just like data vis right, which is you have maps and graphs and charts and just taking like data like I've, I've done many workshops in the past where it's just journalism majors or people who are in the journalism section. And they say, like, I don't want to build a website, I just need to take this data that I have and tell a story about it. So I need to know, JavaScript or Python in order to get that across. Yeah, it's it's such a big, it's, it's funny, once you get into it, it's just such a huge, huge area, which again, that's why I'm recommending to people like this could be it could be your specific thing. Have you worked in in using like d3 or anything like that before? - -70 -00:45:45,540 --> 00:47:14,310 -Unknown: No, no. But when it comes to accessible SVG, like graphs, for example, I have read, I've done some light reading. Laney Watson has a website, fantastic website, she writes about accessibility. And she has a couple of articles about creating accessible SVG charts, for example, there are no elements, semantic elements inside of an SVG that describes something as a graph or as a chart, there is no way to say to tell a screen meter that this is a bar chart, for example. So semantically speaking, it is very, it's not easy to do that. So one of the things that she recommends, like if you have a line graph, for example, you can work around it by like, by adding a few Aria roles. So basically, you turn the content inside of SVG semantically speaking, as far as cleaner is concerned, what they see is a table. But what's visually represented as a chart, I'm not real as a line graph. I'm not sure how that would work for more complex SVG is I don't think it would. And she even mentioned in her article that this doesn't really work across all browsers, or across all screen readers, if I'm not mistaken. So the high level, the best recommendation that that I see other accessibility experts recommend is, make sure you provide two separate views to consume the content. So not just the graphs, not just the visual data, provide the data as simple tables, for example, or simple text and let the user choose which view that they want to view it with. - -71 -00:47:14,550 --> 00:48:32,850 -Wes Bos: I'm just looking up this foreign object tag that you mentioned a couple of minutes ago. So it's a tag that you can just put in your svgs. And then inside of that, you can put just regular HTML, paragraph tags, writing tags, you get the point. And the support is actually pretty good. There's obviously like you said, there's no IE support. But there is there is edge support, which is great. I think that goes for almost half of the stuff we talked about on the show where it doesn't support the foreign object. It looks like it looks like edge does support it. No Opera Mini and no UC Browser so that that could be an issue but not or it could not be it depending on what your audience is like. I had no idea that that was a that was a possibility inside SVG. What about filters, this is the reason why we have you on the show here is because Scott and I were talking about filters on on the CSS, the cool parts episode that just went out a couple days ago. And we're talking about like one way to do different types of blurring and filtering is With CSS, you can link out to an ID that is associated with an SVG filter, and it will apply it and Scott had no idea and I had used it just like once or twice. Can you explain how that works? I think probably a good chunk of our audience has never heard about this. That - -72 -00:48:33,030 --> 00:50:18,360 -Unknown: was that was actually that was very, very convenient timing, because I had just given my talk about SVG filters at an event apart. And I actually thought that you requested this because of my talk. So no. Yeah, that's very convenient. So I gave him a whole talk. And I have a bunch of articles about SVG filters. They are fantastic. So CSS filters are nothing compared to SVG filters. And I'm not even exaggerating as CSS filters are shorthands a few shortcuts to some of the possibilities that SVG filters comm can do. So CSS filters are imported from SVG. And they are shortcuts fairly optimized versions of of the SVG filters. But SVG filters can do a lot more than CSS. So in CSS, for example, one of the examples that I give in my talk is, so the blur function and CSS, it is exported, as it's important from the Blur, Gaussian Blur filter and SVG. Okay, so it's a shortcut. It's important from there, but it's, it's very limited. So it doesn't do everything that the SVG blur function does. Because when you apply a blur function and CSS, it applies a uniform blur along the x and y axis, so the whole image is blurred uniformly. Whereas if you use the Gaussian Blur function, and SVG, you can choose if you want to blur the image or the content, whatever it is, you want to blur it uniformly like you do with CSS, or you can apply a blur horizontally only or vertical only a vertical blur horizontal blur. Wow. Yeah. If you haven't rosental blur, for example, with a bunch of other effects, you can create motion blur, for example, CSS filters are very, very limited, very limited compared to SVG filters, a lot of things, they can do a lot of things. So do you have anything specific that you want me to talk about? Or ask or would you like me to just go on and on about that? - -73 -00:50:18,390 --> 00:50:29,700 -Wes Bos: Well, I'm just like, just saying, like, it's probably worth, if you need to do a filter, it's probably worth writing it in an SVG, and then you can reference it by CSS. That's right, correct. - -74 -00:50:30,120 --> 00:51:09,660 -Unknown: It's correct. But browser support for some of the like, if you have an SVG filter, and then you reference it in an CSS, it means that you're applying it via CSS to an HTML element. And sometimes browser support for SVG filters applied to HTML elements is not very consistent depends on the filter and the effect that you're trying to achieve. So yeah, currently, the best way to use an SVG filter is to apply it to elements inside of an SVG. So if I have text or if I have an image, and I want to apply a filter effect to that, I put that text or that image inside of the SVG, I create the filter inside of the SVG, all of it in line, of course. And then I apply the filter and within the SVG to my element. - -75 -00:51:10,050 --> 00:51:12,840 -Wes Bos: I can couple that with the foreign object tag we just talked about. - -76 -00:51:13,020 --> 00:51:19,680 -Unknown: Yes. Oh, man, I haven't tried. But yes, I would say yes, definitely. - -77 -00:51:19,710 --> 00:51:45,570 -Wes Bos: But like it should work, right. And most things in web development, that should work just work. So I, if you, I think some of our listeners will probably make some code pins after listening. So So tweet us at syntax FM with your examples, I would love to see how it because it seems pretty simple. You just pop up an SVG, you write your filter in there, and then you have a foreign object tag, and then you keep going with your HTML, - -78 -00:51:45,629 --> 00:53:39,270 -Unknown: it's not simple, oh, SVG filters can be very intimidating. At first, the syntax is very intimidating. So the way I got into them, I had been postponing, learning them for a couple of years. And then when one of the engineers at Netflix requested my SVG workshop about 18 months ago, he specifically asked for SVG filters and SVG filters, were not part of my workshop. So that was my chance to finally start learning them, and then including them in the workshop. And that's when I did and there aren't a lot of very good resources about SP. Well, there are a few very, very good resources, but there aren't many resources. So I had to do a lot of digging and a lot of concepts. And SVG, you can, it's not just about simple image blowing, you can generate texture, you can distort content, you can apply 3d or kind of 3d effects. So you can distort a text. One of this is one of the demos that I have in my talk. So you can apply, he literally recreate Photoshop effects using SVG, using almost exactly the same steps. You can have displacement maps, to displays text and kind of 3d, you can generate texture, not only can you use texture, but you can generate texture, you can use lighting effects, you can generate things like cloud texture, marble fire, you can distort things in very, very creative ways to start text and distort images. What else you can create more, you can morph objects, you can do blobbing effects, so many so many amazing things they can do with SVG filters. And learning them is not was not very easy. For me, it took me a couple of months of like, I only I did nothing. I learned nothing in those eight weeks, except SVG filters, a lot of thinking and research. And I only barely scratched the surface of what's possible. So hopefully, the series of articles that I wrote for car drop co drops a couple of months ago will help anyone who is planning to get into SVG filters now, because I explained everything that I've learned myself and those articles. - -79 -00:53:39,270 --> 00:53:48,990 -Wes Bos: That sounds awesome. Is this workshop that you have, is this something that you go into different companies and can offer to people as I'm sure some people listening right now would love to have you in? - -80 -00:53:49,050 --> 00:54:03,300 -Unknown: I would love to do that. Yes. So I can run either the SVG workshop, or I'm currently focusing on accessibility accessible UI patterns. So I do run workshops in house. Yes. Awesome. Yeah. I have two workshops. Like I mentioned SVG and accessibility at this time. - -81 -00:54:03,540 --> 00:54:14,400 -Wes Bos: That's great. So I think I got through most of the stuff. I wanted to talk to you. But there's a couple little things here and there. But I'm sure we'll have you on again, at some point, because SVG is a huge thing. - -82 -00:54:14,580 --> 00:54:15,240 -Unknown: Sure, yeah. - -83 -00:54:15,240 --> 00:54:20,250 -Wes Bos: Is there anything else that you wanted to cover before we move into some shameless plugs? - -84 -00:54:20,370 --> 00:54:43,530 -Unknown: I had not sure if there's anything I missed. There. There was a couple of questions about CSS for styling SVG, but that is a whole like, we could go on for hours of me. We got a few questions about react apps using SVG. I I've never used react. I've never been a fan of it. So I don't have enough context to answer those questions at this time, unfortunately, - -85 -00:54:43,560 --> 00:55:34,170 -Wes Bos: oh, yeah. One thing I have run into somebody the other day tweeted me an example of the SVG filter that used react state data, and then that filter was being applied to another element, and it wasn't triggering a rerender and likely was just a bug. Because I had rewrote it in vanilla JavaScript, and it worked fine. So it was just like a weird thing where react didn't like react knows about SVG. But like, there's probably some intricacies there about what to render. And when a filter is changed, should it really render the thing that it's putting a filter on. So the the fix there was just to put a put a different key on each element and that forced to re render of the whole element there. So it was it was it wasn't a great fix, but until react fix that it was there. - -86 -00:55:34,170 --> 00:55:35,790 -Unknown: I have no idea what that means. - -87 -00:55:38,580 --> 00:55:41,160 -Wes Bos: It's a it's just like a whole nother it's funny. - -88 -00:55:41,400 --> 00:55:42,810 -Unknown: It's a whole different world. Yeah, - -89 -00:55:42,840 --> 00:56:28,170 -Wes Bos: it is. It's the web development is so huge, like you think you have like a pretty good handle on web development. And then you go deep into one topic. And you could spend your entire career on like half of se SVG, or just react, right, like, Yeah, I think that's probably some encouragement for people listening as well that you can become an expert at probably 100 different things in web development and make a career out of it. So we're gonna move into the end of the show, which is our sick pics and the shameless plugs. The sick pick is a is described it as ticks that are sick. These are different things in our life that we quite enjoy and find joy out of out of using I'm not sure if you came prepared or not for a sick pick. Do you have anything for us? - -90 -00:56:28,800 --> 00:56:30,450 -Unknown: You said it could be anything, right? - -91 -00:56:30,900 --> 00:56:32,760 -Wes Bos: Absolutely anything? Ooh, - -92 -00:56:32,760 --> 00:56:47,670 -Unknown: I'm a minimalist. So I don't use too many things, at least not in real life. So when it comes to web development, one of my favorite things like if I if I want to look at recommend something, I would say that Netlify use Netlify It's amazing. - -93 -00:56:48,060 --> 00:58:13,800 -Wes Bos: I don't know. That's good. We love Netlify. Here, actually, they they've just come on to sponsor a bunch more of our episodes. And it's such a such a beautiful thing to be able to deploy to. Yeah, so it's, it's pretty nifty. I am going to sick pick these sensors called the wise sense. So a couple episodes ago, we did the, the Smart Home episode with. And I recommended these wise cameras, which I've been absolutely loving. They're like $20 Wi Fi cameras. And they just rolled out these contact sensors, which tell you when doors are open or windows are open or, and they also rolled out a motion sensor when so when someone walks by it, and I've been testing them out for about three weeks now, I put one on my garage door. So I can tell when the garage door is open or closed. And I put another one on, I've been just kind of moving it around just on different things, there's some people are putting them on their mailbox, and you can use them to trigger recording on the camera, when somebody opens, opens a door. Or when somebody walks past the motion one, I think it's pretty cool. It's 20 bucks, you get two little little contact sensors, one motion sensor, and then a little bridge that plugs into the back of the camera. So you don't have to go and buy a separate bridge yourself. And they just run on coin cells. So you don't need to, you don't need to run power to them or anything. So I think it's pretty cool. They are rolling out light bulbs Pretty soon, which I'm super excited about. I haven't tested those yet. - -94 -00:58:13,950 --> 00:58:25,020 -Unknown: Do you do like videos about these things? Like when you look these thick pics that you that you usually recommend in Europe because I was they look like very good material for videos like reviewing the things. - -95 -00:58:25,170 --> 00:58:44,700 -Wes Bos: We haven't done videos. But I think that that would be kind of cool. I do want to do like more like the stuff from my office or stuff from around around my house because it's not necessarily totally web development related, although you can control them with JavaScript, but they is like 100% overlap of the interests of developers? Because it's like, oh, - -96 -00:58:45,360 --> 00:58:46,770 -Unknown: you know, and we're okay. Yeah, - -97 -00:58:47,010 --> 00:59:17,250 -Wes Bos: exactly what everybody loves this stuff. It's pretty nifty. And the fact that it's so cheap now, and there's no monthly, like, there's all these like people rolling out these like $20 a month things. And there's no monthly charge with these with all the wise stuff, which is what makes me love it so much. You don't have to like buy the thing once and then get billed for the rest of your life and using it. Let's move on to the next section, which is the shameless plugs. You can plug anything that you'd like to send people to do you have anything you'd like to plug - -98 -00:59:18,230 --> 00:59:42,540 -Unknown: my workshops, probably yes, so I'm running workshops at conferences, probably by the time this episode is released, the workshop in the Netherlands is already going to be done. So I'm running my workshop on accessible UI patterns. That's smashing conference September. I'm also I might also be running it for a couple of other conferences, but those haven't been confirmed yet. So if you can come and attend one of my workshops, then highly recommended, - -99 -00:59:42,690 --> 00:59:45,600 -Wes Bos: beautiful and people can find those on your website. - -100 -00:59:45,660 --> 01:00:00,810 -Unknown: Yes, on my website, I have a list of my speaking engagements. I should probably just add a note of where at which one of these were conferences. I'm running workshops yet, so that's a good point. But if anybody follows me on Twitter, I keep tweeting, tweeting about them all the time. - -101 -01:00:00,840 --> 01:00:01,920 -Wes Bos: What's your Twitter handle? - -102 -01:00:01,920 --> 01:00:03,300 -Unknown: Sarah sweat on my name. - -103 -01:00:03,330 --> 01:00:44,190 -Wes Bos: Beautiful. All right, I'm going to shamelessly plug all of my courses Wes Bos comm forward slash courses. And you can learn JavaScript or CSS Grid Flexbox. There's a bunch of free ones, a bunch of paid ones there. And I will soon have a vanilla JavaScript for beginner ones out as well. I'm pretty excited about that. So thank you so much for coming on the show. This was very selfish, ask for you to come on just because I wanted to learn about svgs and my father, thanks so much for having me. Absolutely, really appreciate it. That's it for today, and we will catch you in the next episode. Oh, and we also and the show was saying peace, peace, beautiful peace. - -104 -01:00:46,140 --> 01:00:55,920 -Unknown: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax155.srt b/transcripts/Syntax155.srt deleted file mode 100644 index 860edfe77..000000000 --- a/transcripts/Syntax155.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor taught totally at ski. - -2 -00:00:25,860 --> 00:00:49,590 -Scott Tolinski: Oh, welcome to syntax and this Monday hasty treat, we're going to be talking about making yourself uncomfortable, to get better, to become a better developer to grow as a developer to grow as a programmer to be more efficient to do all these things that make you a much, much better coder. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado and with me, as always, is Wes Bos. - -3 -00:00:49,710 --> 00:00:51,120 -Wes Bos: Hey, how's it going, everybody? - -4 -00:00:51,120 --> 00:00:52,680 -Scott Tolinski: Anyways, how's it gone? - -5 -00:00:52,920 --> 00:01:02,880 -Wes Bos: Pretty good. Pretty good. Ready to talk about getting uncomfortable? Yeah. Which I really like it's it's a good spot to be in. And that's how you know you're growing, I think. Yeah, - -6 -00:01:02,909 --> 00:01:45,870 -Scott Tolinski: yeah. Speaking of uncomfortable, and this isn't an NAD transition. This is just a fact of life right now. It snowed like three or four inches of like wet snow here last night. No way. Yeah. And like all of our bushes because everything's already grown leaves are just completely flopped over. We have a tree here that's like bent in an arc. And I I shook off all the snow even when shook off a lot of the trees last night at like 1130 because they had like covered in snow already. And they were all in the ground. And so if you let go on on Twitter right now or anything you're just seeing, there's like trees that got bent and broken fell all over the place. By the way. You are listening to this episode in June, we have recorded this episode in May - -7 -00:01:46,980 --> 00:01:52,260 -Wes Bos: 21. We're recording this you have snow that sucks. It's like It's like beach weather. Yeah, - -8 -00:01:52,260 --> 00:06:17,460 -Scott Tolinski: okay, here has been here and it will be again on Friday. But right now it is it is very cold and snowy all of a sudden. Now nowhere. It is not snowing in June dry for for the listener. But so today's episode is sponsored by one of our favorite sponsors over here is intact and a longtime supporter of syntax. And that is Netlify. If you've been listening to syntax for any amount of time, you know how much Wes and I love Netlify. Now what is Netlify, it's a host for all of your front end code. And it makes doing all of the hard things with your sites and applications. Easy. So if you want to deploy a Gatsby site, all you have to do is give it a GitHub connection, you just you connect your GitHub via the project and you click go and Netlify takes care of the rest, it throws it up on a free little domain there for you. And you can add your custom domain when you are ready to go and launch. It takes care of the build process and everything and takes care of your continuous integration. So hey, you push a new version to GitHub and Netlify says no, no problem, my guy, you let me go ahead and update that site for you. Yeah, and it makes it really great and easy. If you're doing any sort of headless site, all you got to do is push a web hook or something like that, and it's going to rebuild your static site. In addition to that, no hay has everything that you need to do user accounts via something called identity. There's forms via something called forms, as well as functions, serverless functions, and it makes them extremely pain less. There's also a really cool new thing called Netlify Dev, which allows you to do all of these things in your local environment. So check it out@netlify.com and see why we love hosting so much over here as syntax on Netlify. So head on over to netlify.com forward slash syntax and see why we love Netlify over here to host all of our stuff. Okay, so let's get into it. I think the the first thing I wanted to do is to talk a little bit about maybe like a I know, it's a parable isn't a parable is just terrible story here about the developer who, let's say they saw CSS. This is this is this is a few years ago, right? CSS preprocessors were coming out. And they were the developer who's good at CSS, I'm good at CSS, I can build all these great things. And now here comes this fancy new CSS preprocessor. You know what this thing is doing? It's getting in the way of how I used to work. It's it's adding a whole nother step. My CSS has to be transformed. Now I used to write just straight CSS, and now I have to write as CSS or sass or less or whatever, and that spits out CSS. And you know what, that's scary to me. It makes me uncomfortable. And I'm not talking about me personally, because I was. I was an early adopter. But there are developers because I worked with them who are very, very against CSS preprocessors. Now they were against them, in my opinion, because maybe they just didn't understand how it could make their life better. And it made them a little bit uncomfortable. And so as a defense mechanism along these developers would say, you know what, I'm good at CSS. I don't need some stinking Robot doing the things that I'm good at. For me, I don't need something automatically writing prefixes and all that stuff, I don't need that I can do those prefixes myself, I can copy and paste them from CSS three plays, if I so choose. But the end of the day, that person was held back. And I'm not speaking about a single individual here. But that type of person was held back from writing better CSS, from writing better code from writing more efficient code and from writing less code. Because the feature of a CSS preprocessor made them uncomfortable because it was outside of what they were comfortable with. So the whole premise of this episode is how you can become a better developer by identifying the things that your ego is getting in the way of and squashing those things so that you can grow as a web developer. So don't be that person who looks at the CSS preprocessor and says, I could do this without this. Because to be honest, the person was probably a slower, worse developer at the end of the day. And now that CSS preprocessors and everything are so commonplace here, you're you're kind of left behind. So I think the first thing I want to talk about is efficiency. So when are you most efficient in your development? Wes, like you personally, when are you when are you most efficient? - -9 -00:06:17,580 --> 00:07:01,290 -Wes Bos: I think I'm most efficient when I know my tools. And I have done something maybe three or four times before. And I can sort of like see all of the different pieces that it is that I'm doing knowing and I think that comes from good planning in terms of like, what features need to happen and how you're going to architect that, as well as just like familiarity with the the different pieces of all the different tools and the code, and then the sort of the gotchas as to how they're so I always remember when I would tackle like a new client website, or if I have a new feature I want to build and know exactly what it is that I'm going to do. That's how I feel most efficient. So that's kind of where I find my best spot. What about you? - -10 -00:07:01,320 --> 00:09:19,550 -Scott Tolinski: Yeah, no, absolutely. When you it's almost like your fingers. They just like know what to do with their typing it out. Because they've done it a whole bunch of times, you're very comfortable, you're very fast, you're very efficient, you get the work done. And that's great. I mean, that's really great for productivity, it's great for getting the work done. It's great for confidence, and it makes you feel good. All in all, that's where you want to be right. That's your comfortable spot. That's that's where you want to be as a developer, however, it's it's hard sometimes to take a look at that, and say, What systems here, what processes, what things Am I doing could actually be improved? What are the things that maybe I'm adding? And this could be even like speed, this could be efficiency, this could be code base, right? Maybe your applications are adding a bunch of libraries and stuff, because you may be maybe you're adding jQuery, right? Because you're just very comfortable with jQuery, but you don't need it. And it's it's adding size to your loading. So what are these systems or processes that you're doing that could be improved in your day to day work? And it's important to take a step back and examine these things and look for the things that could be made worse, or could be made better. For instance, I think there's some common pain points amongst developers. And these are different ones. And I see this a lot from users on Reddit or users on Twitter, or people just talking just around write about different things. For instance, I see people occasionally on Reddit say, well, CSS floats, float based layouts, they work well for me. So why would I spend the time learning something new? Right? Why would I spend the time to learn Flexbox or grid? Because I already know floats, and they work just fine for me. And I think this is just such a missed opportunity. Because floats add a lot of overhead to your code, right? And everything is so much more efficient now with Flexbox and grid that you're really being held back by just not going for it. And to me, that developer is avoiding the uncomfortable feeling that they don't know something. And they're avoiding that feeling of uncomfortableness, uncomfortable. ality? Yeah, there's the avoiding being uncomfortable, right? They're avoiding it, specifically, because they want to feel good. They want to feel like efficient, they want to feel awesome all the time. And that's not always the best, best way to grow. And the best way to learn, yeah, - -11 -00:09:19,670 --> 00:11:01,980 -Wes Bos: I have this even with my own keyboard. So many times, I've wanted to change to a different keyboard layout, because like there's like before I can and all these other different layouts. And it's just like the whole the overhead of having to learn it, and they'd be slowed down. Like I bet, like if I were to take the next six months to learn it, the rest of my life would be much more efficient. But I don't know that I want to take that much time. And there's always this sort of like balance that you have to find where do I spend the time to initially become slower at something or do I have to put the time into learning this thing to get the greater benefit over the next couple of years? Or do I sort of just stick with what I what I have. And I think a lot of developers just like to say like, you know what, like, I'm busy enough as it is. I don't necessarily like having to learn new things. I'm very happy with the sort of whatever's going on with me right now. And at a certain point, I think that's, that's totally fine place to be totally. But at a certain point, you do have to always be continually improving your skill set and sort of ignoring these things or bashing them. It's funny that we use a Reddit because that's generally where I see this sort of stuff where people say I central silly, why would I ever want to do this? I'm totally happy with my current layout. And I don't know, like, do you have any sort of like, like guide to when should you just let something pass you by? versus when should you figure out that this is probably something that I need to be adopting? Because you certainly could adopt all of this brand new stuff, and just be spinning your wheels and wasting your time and have this thing deprecated in a year, whereas you could just be letting stuff pass you buy? And then before you know, you look up and your skill set is three or four years old? And you're not all that hireable anymore? - -12 -00:11:02,280 --> 00:11:49,530 -Scott Tolinski: Yeah, I think there's there's a couple of aspects to it. For me, there's a few things where if something's a new standard, right, like flow, yeah, we're not necessarily made for layout, right? They were made for pulling out of the document flow. So when we got new layout, tools, and CSS, and those became the standard, like the moment those became the standard, that's when you should have learned them. Because Yeah, you can't argue that I can't argue standards right there. They're here, they're not going away. It's not a library, it's not a trendy framework, or something like that they're here. So if it's something like that, then I'm going to say this is the way or this is the this is the thing that I should be learning, this is the time to learn this. Other things are harder to gauge like that. However, you could see a sort of critical mass critical velocity. - -13 -00:11:49,530 --> 00:11:50,070 -Wes Bos: I don't know - -14 -00:11:50,130 --> 00:12:18,120 -Scott Tolinski: what that word for that is. I don't live like he got that. But I like a critical velocity. For I don't think it's mass, a critical capacity for things like CSS preprocessors, where it wasn't just, you know, a small percentage of people were using them. But every single job interview you'd go on, they would ask you if you're using SAS or whatever, every single meetup and everybody you're talking to, and if it starts to feel like that, then I would guess at that point, you probably don't want to ignore it. - -15 -00:12:18,300 --> 00:12:37,890 -Wes Bos: I think this the seventh time we talk about something on this podcast, you should pick Yeah, you want a hard number, keep a count of how many times we measure and like what's something intersection observer, we've probably mentioned that maybe three or four times, two more times, and it's time for you to sit down and learn intersection observer. - -16 -00:12:37,920 --> 00:14:42,180 -Scott Tolinski: Yeah, that's something that's a good example, too. Because let's say you know, a little bit of JavaScript, if you know a little bit of JavaScript, you know enough to go try to figure out some stuff with intersection observer, like, it doesn't have to be good and doesn't have to be easy or whatever. You can struggle through it and experiment a little bit here and there just to get a little bit of a handle on it. I think some of these things that people they like maybe some, some good examples would be like CSS cascading, like people who go through great lengths to avoid learning proper CSS cascading techniques, or, like I mentioned, grid and Flexbox, right? People are avoiding learning that they're saying, well, I can't use grid anyways, because it's not supporting the browsable, you can use Flexbox. So you should learn Flexbox, because that's way better than a float based layout anyways, or heaven forbid a table based layout in this day and age. But then also like doing things with jQuery instead of JavaScript, so many people feel very comfortable finding their elements and doing all of their processing with jQuery, when so many of those things. If you haven't listened to this episode, listen to our episode about why you might not need jQuery or I think it's called is jQuery dead, which is the greatest clickbait title. But you wanna, you want to replace that, because there's so many things you can do with just JavaScript now that we don't need jQuery. And that's an overhead in your application that could be removed. And even front end frameworks in general, I think there's, there's a point at which now where people are still denying the usefulness of front end frameworks. And I'm not saying you need to use a front end framework on every project, because that's not the case. But they are extremely popular for a good good reason. So whether or not you're picking up view, or felt or react, if you want to go with the most popular one, you're probably going to pick react, if you want to pick, I think the easiest to learn, you're probably going to want to pick view. But if you're picking one of the things he did, it's the point where you should at least have one of these in your tool belt so you can understand why because I think that's a big aspect of it is understanding why it's going to make your life better. - -17 -00:14:42,390 --> 00:16:16,590 -Wes Bos: I think there's probably another thing to be said about putting yourself in uncomfortable places is you're not necessarily just ignoring new stuff, but it's just also pushing yourself into a spot where you don't feel comfortable is is how you're going to grow and I think that goes for everything with Like public speaking for me was a big oil, were saying here, it just makes my stomach turn as to how afraid I was to go in front of 12 people at a meet up and talk about JavaScript or doing like a speech at a wedding or all kinds of stuff like that. And really the only spot to sort of get rid of that fear is to slowly push yourself into a spot where you feel uncomfortable, even even with like, like saving money is another good example where like, like, how much money should you be giving away? Or how much money should you be trying to save enough that it makes you feel uncomfortable that you're doing that, and if that's the spot that you want to be, because it's going to push you to grow in whatever skill set it is. And I think that's how you can can like, sort of Supercharge Your, your your learning. So another example might be like, if you've never done anything with Canvas, or audio or video, yes, yes, try to go build something with that, you're gonna be super uncomfortable. It's frustrating, because you might think that you're a pretty good developer, and then you're you find out like, oh, man, I'm actually garbage at this stuff. And again, that puts you in a spot where you feel uncomfortable, where you might have to reach out to others and ask for some help. And again, that's going to really push you forward in your skill set. - -18 -00:16:16,620 --> 00:21:25,550 -Scott Tolinski: Yeah. Because Well, what's better for you is that to do the same thing, you've done 100 times or to do something new, and push that that circle outwards just a little bit. They always like talk about when you get a PhD, that there's like the circle of human knowledge. And you're just making that circle, just a tiny, one pixel that bigger, but everybody who pushes that circle out is like increasing human knowledge. And I like to think about that in a personal sense, too, right? You have this circle of capabilities, or maybe it's like a graph or something, if you want to be a little bit more, not circular with it. But each thing you learn that's different, or you know, advances your skills will push that circle out just a little bit and help you learn or understand things in a different way. So that maybe next time you have a problem, you're going to look at it with a different set of knowledge than you might have looked at it last time. And it could allow for better, more efficient code. And again, like you mentioned, this isn't about learning new stuff. Absolutely not. It's about learning things that you're not good at, and you're not comfortable with and making yourself be in that place. Because, you know, oftentimes we get put in places in the times that we we learn and grow the best is when we're in our sink or swim situation, right? You're you said yes to this thing. And now Holy crap, you have to do it. I said yes to making this slideshow a few months ago, and I've never made a slideshow from scratch. But not only that, this slideshow in particular was like, very complex. And I was like, Okay, well, I've never made a slideshow. I don't exactly know where to start. But this one in particular has some interesting aspects to it, I'll just say yes. And I'm going to figure it out. And as I started going, I started coming up with really interesting solutions. I'm using Flexbox, I'm using viewport units, I'm using all the stuff I know and love. But at the same time, I was just feeling very, like, wow, I just built this and it wasn't that hard. But if I would have, I would have stayed in my comfort zone, I could have used a plugin or a package or something like that. And I could have taken that time and not learned anything and not grown at all, and just plop some code in there. So there there is like a balance. If you have the time and ability to make yourself feel uncomfortable. It's one of those things that you absolutely need to do. You need to put yourself in a place where you're not efficient, and you're not comfortable. And you will grow as a developer. And if you take this little strategy for life, in general, you're gonna grow in all aspects of life, you know, what's comfortable, what's comfortable is sitting in front of your your TV every night and watching TV, and doing nothing, right that's very comfortable, you know, it's not comfortable is taking that time and going out and taking a dance class or taking a cooking class or doing something beyond your limits, and pushing yourself a little bit and putting yourself out there. And I like that you mentioned the thing about public speaking, because that was a big thing for me. I'm really good at avoiding things like that. However, I'm also very good at saying yes to things without necessarily realizing their consequences. So like someone says, Hey, do you want to speak at this meetup? Sure. I'll speak at this meetup. And then like, 15 minutes later, what have I done? Yeah. Meet up now. What am I gonna do? And so I'm pretty good at putting myself in positions like that it was the same way it was for me with with breakdancing competitions or performances or something like that. One good instance is they have like our our crew scheduled to do a performance. And then like two or three people from my crew couldn't make it but we were still scheduled to do the performance. And then the the event organizer was a friend of mine, and she was just like, Well, how about you just do a solo performance? And I was like thinking Sure, okay, whatever. And then I thought about I'm like, wait, I have to do one stand up on stage by myself and do a solo performance but to I have to like right in choreograph a solo performance that I have to like, figure all this stuff out and I had to do it. I was uncomfortable and it was all fine. And I loved it every, every minute of it was great. And I wouldn't have done it, if I would have really, really, truly thought about it. So let's talk about some practical stuff here. Before we get out of here, what are the best ways to like, let's say, you've decided to make yourself uncomfortable here, what's the best way to pick up something or to learn something you're uncomfortable with? I think there's like two major ways of going about it. There's the maybe the research method, and then there's the like diving in headfirst. I think in some instances, let's say you're learning CSS Grid, you're already fairly experienced with CSS, there's really no harm in diving in headfirst and just writing some code, checking out the docs and writing some actual CSS because that's when you're going to see some of its benefits. But I think On the flip side, there's some stuff like let's say you're not great with JavaScript, and you want to learn about Canvas, you could get overwhelmed very quickly, if you get into writing code, if you don't know what the little bits and pieces are. So I think there's this other mode where you have to decide if this is something you're comfortable enough with to start writing code. Or if you're uncomfortable enough, that you want to maybe pop on a YouTube video and watch like a 15 minute basics on this thing, or maybe a few videos on just to get the lingo, the syntax, what's happening, and have a greater understanding of it, because I think that is a, that's something that could make you potentially feel more uncomfortable, right? You're feeling uncomfortable, you pop on some code, you start typing, it all breaks, and then now you're feeling totally defeated. And even even more - -19 -00:21:25,550 --> 00:22:39,060 -Wes Bos: Yeah, my approach to this is generally just to first kind of consume and suck in as much as possible about the topic. So that might be reading four or five blog posts, or watching a couple of YouTube videos spinning up a couple demos that actually work. And then I when I feel like I have enough, you really just have to go ahead and do it, and start to go ahead and build something. So I kind of have a bit of both of those. Like another example for my real life is I'm trying to, I'm trying to make sourdough and bacon right now. And I actually just finished the bacon. And I had watched probably like 15 different YouTube videos on both of these topics. And I still felt like, I'm not sure I sure like there's lost so many steps. And there's all these things. And I just like, you know, I just have to go ahead and do it. And who cares if it turns out terrible. Yeah, no. And now I'm doing it. And I finished it. And it turned out great. And now I feel so much more confident in making bacon or making a sourdough starter from scratch. And it's kind of funny, like, I just looked back as to just like two weeks ago, where I thought like, man, I maybe I should watch more YouTube videos or something like that. And like, just do it. Just go ahead and do it. You've done enough YouTube watching the real learning will come when you actually put it into play. Yeah, - -20 -00:22:39,210 --> 00:24:51,120 -Scott Tolinski: I know. It's like so true. And this advice can be applied for anything like and think about it, you have a nice camera, right? Well, maybe not you. But you might have a nice camera like a DSLR, mirrorless, whatever. Yeah. And it has all these buttons and switches and stuff. And you know what, it also has an auto mode. And sure enough, you could just leave it on auto mode and probably get some pretty decent pictures. Or you could turn it to any of the number of modes, you could start turning some dials, you could start pushing some buttons, and you could start seeing this thing actually being used to its fullest potential. And you could learn a whole lot about the process of photography and in the process of that. And again, in all of these things, it's it's just amazing. When you look at your life and you look at the stuff you're doing how many different things you can apply this knowledge and this process to of making yourself uncomfortable and feeling uncomfortable and being okay with that. One of the things I like to do to practice feeling uncomfortable, and somebody made fun of me on Twitter for saying this, but I think it's important. They're like, Well, why would I be uncomfortable? Well, okay, you have to be comfortable with feeling uncomfortable and taking cold showers or I like contrast showers where you're really hot, and then really cold is a great way to if you are feeling a little too comfortable to put yourself in that place to say, Alright, I can do this, I'm comfortable with this, I can take that knob all the way too cold and feel fine about it. So again, it's just about practice. It's about evaluation. It's about learning what your uncomfortableness uncomfortable with. And I think the the main point here is that we avoid the things we're scared of because it typically makes us feel smart, right? If I can write the same stuff over and over again, it makes me feel good. Makes me feel like I'm good at what I do. And if you're working on stuff that you don't know about, it makes you feel bad, bad at what you do. Okay, good, bad, okay. And feeling smart is not necessarily the same thing as being smart. And being smart requires you to grow as a human being. So don't fall in the trap of wanting to feel smart. You want to feel dumb, you want to feel like you're you're growing. So check your ego at the door, pick up something that you are scared of, and grow yourself as a developer and as a human being. - -21 -00:24:51,210 --> 00:25:08,310 -Wes Bos: Alright, I think that's it for today's hasee treat. Maybe if you have something that you are going to push yourself with, tweet us at syntax FM I'd love to see what it is that people are are trying to learn or push themselves in or make themselves uncomfortable with anything else to add here, Scott, - -22 -00:25:08,340 --> 00:25:09,960 -Unknown: I got nothing. All right. Thanks - -23 -00:25:09,960 --> 00:25:14,010 -Wes Bos: for tuning in and we will catch you on Wednesday. Please - -24 -00:25:16,020 --> 00:25:25,800 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax156.srt b/transcripts/Syntax156.srt deleted file mode 100644 index e0ba0dd45..000000000 --- a/transcripts/Syntax156.srt +++ /dev/null @@ -1,408 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,589 --> 00:00:14,610 -Wes Bos: Welcome to syntax. Scott is back. How you doing today, Scott? - -3 -00:00:14,969 --> 00:00:27,000 -Scott Tolinski: I'm good. I'm better than good. I'm excellent. I'm straight up. Excellent. I have a lovely, brand new daughter, Brooklyn, and glinsky. She's here, and I'm just man. loving it. loving it. - -4 -00:00:27,149 --> 00:00:31,890 -Wes Bos: Ah, she's super cute. We missed you in the last episode with Sarah. - -5 -00:00:31,949 --> 00:00:34,530 -Scott Tolinski: Yeah, that's weird. It was weird not to be there. - -6 -00:00:34,649 --> 00:00:52,500 -Wes Bos: It was weird. There was no one to bounce my jokes off. And Sarah said that I was the worst pronounciation of her last year. However. I was pretty proud of that as I didn't think I could I could put her anymore and I honestly thought that I had it had it down pat. - -7 -00:00:54,420 --> 00:01:27,990 -Scott Tolinski: What's funny about that is is a lot of our pot. We have a potluck episode today, which is an episode where people bring us questions, right? A lot of our submitters with difficult last themes gave us pronunciations, and they are all elevated human beings. So hopefully, we won't have too many of those kind of issues today. But I'm excited. I'm excited to be back. I'm excited. It was it was just weird. Knowing that you were recording an episode I was just sort of sitting at home with with the baby just being like, Huh, not recording this. Alright, - -8 -00:01:27,990 --> 00:01:51,540 -Wes Bos: today we are sponsored by two awesome companies. That is first one is Sentry gonna do all of your error and exception traction. And second one is Sanity, which is going to be a headless CMS for your next project. Cool. Today is a potluck. These are the questions that you submit, we do these once a month and we try to answer them. I really liked them. They get really good listens on these ones because we're kind of all over the place talking about lots of different topics. - -9 -00:01:51,560 --> 00:02:01,860 -Scott Tolinski: Yeah, it's a good one today. Yeah, we have a real good one. So the first one is from couch, john Australia. You I don't know what they used about. - -10 -00:02:01,950 --> 00:02:03,180 -Wes Bos: Probably Australian thing. - -11 -00:02:03,240 --> 00:03:36,960 -Scott Tolinski: Yeah, Australian clothes. Now if that's the thing, is the long question. So give me give me a warm up here and do any vocal exercises first, all right. Question that your wives might be able to help answer to I'm 33. With a wife and two young daughters. I am trying to change careers. I have an $80,000 a year job and I hate it. I realized a few years ago that software development is what I want to do. So two years ago, I started doing a bachelor degree in information technology and had been learning web development on the side. My wife is okay with me doing University. But when ever I tried to do web development tutorials or learning, she calls it a hobby. She wants me to stay at the job. I don't like we still do family things but I'm trying to crank by knowledge any chance I could get it. Am I being selfish? Should I stand my ground? And say no, I'm doing this I feel like my age is making my chances of becoming a dev harder and harder to achieve any tips on achieving my goals? make me happy but also keeping my family happy. Sorry for poor formatting. No worries john got through it. This is a tough one. Because you're you're dealing with a larger family dynamic right? than just like here are the here's the thing. I'm you know, what an 18 year old programmer hacker, I can just sit in my room all day and hack along and stuff. And so you have all these responsibilities. And so the way I see it is is your responsibilities. First and foremost are to your your family, right and providing for your family. So in my opinion, you should keep that $80,000 a year job. - -12 -00:03:37,020 --> 00:03:40,800 -Wes Bos: You should it's which is 55,000 us a year - -13 -00:03:40,859 --> 00:04:54,770 -Scott Tolinski: I did the math. Okay, so Okay. And I think should keep the job while you have, you know, you don't want to try to jump from one ship to another ship. If there's no other ship there. If you leave that job, and you might be stranded or something. I don't know, it's a tough one here because I don't think you should take away family time. Right? But is there time that you would have had as like your own time, where you could be studying and things like that, I don't know how it works in your family wise, but I personally need, you know, not like a decent amount but I need you know, solitude time I need time to either play video games or do some yard work or, or do something by myself, right? As much as I love hanging with my wife and hanging with the family once the kids are asleep. You know, there's some days a week where it really makes sense for me to go off and do my own thing, create some music, you know, do that sort of thing. And and in that time, that's the time I would have used to further my programming knowledge. But if it's time that you'd be spending with your family, then I'm not quite sure about this one. I would say, you know, don't, don't take away from your family. Try to find time somewhere else, whether that's on your lunch break at work or anything like that. - -14 -00:04:55,070 --> 00:08:25,260 -Wes Bos: Yeah, this, this is a tough one and I've sort of gone through this with my Wife as well, when we initially got married, she was a shoe designer. And she's like, I hate this commute. I don't like what I'm doing. I don't feel good about like the, like the Chinese factories that these shoes are being made in and all of these like things. And at the time, I was like, You know what, like, just quit and start going off on your own and do your own thing. And that was very much easier to do, because we had, like a cheap apartment that we were renting. And I was making pretty good money at the time. And we're sort of able to, like, kind of do it. And there was no, there's no real downside to something like that. But when there's like a wife and kids, and you probably have a house to pay for. And I think like once you get a little bit older, there's sort of an expectation. And I think like, I know, like some of my friends, significant others will sort of be like, you know what, like, I don't want this like instability that comes, you have a good job, just stick with it, we've got enough craziness going on in our life right now. It's like changing this one thing also is going to be frustrating. But then again, I've also seen lots of my other friends who've like, like 30 ish, 33, even even later than that, that's it sort of when you realize they're like, I don't like what I'm doing. And I've still got another 25 years left of this, like, that's a huge amount of time to sort of look down the barrel of it and be like, you know what, like, I will die if I have to do this for another 25 years, and I'm going to be miserable with what I'm doing. So I think that this is almost like a, like a marriage counseling, there needs to definitely be some give and take like, it's, it's not crazy that your wife is thinking like that this would be kind of a scary thing to do a career change. But I think at the same time, you also need to talk to them be like, Look, I don't like what I'm doing. I'm really passionate about this thing, it might not work out, it's really hard to break into this thing. There's a lot of learning. But it is something that I think I want to go into. So how do you do that? I don't know. Like, the thing is, at the end of the day, it's all time, right? You just need more time to build to work on this thing. And it's hard to take that time away from, from family from kids. And I think that really at the end of the day, you just need to figure out what that looks like for you and make sure that it's a nice clear boundaries. So if it is twice a week, where you take the mornings and serve, you take like, I don't know, three, you wake up early, and you don't have to deal with the kids for two, two mornings a week or two evenings a week, or just something like that, you're like, Look, I'm gonna give me a year and a half to do this. It's definitely going to be hard on on you and on me and on the family. But I think that in the long term, it will work out for us. And I think that's that's what marriage is all about. It's all about give and take and things like that. So I think that you need to maybe sit down with them, maybe even go and see like a marriage therapist or marriage service, not necessarily just for when things are in danger. It's just for like configuring it out, I want to do this, I want to be able to communicate, I want to make sure that everybody's happy with this, it's going to be hard, but I want to make sure everyone's happy with it and figure out how that so that's not really good. You're definitely not being selfish in wanting to do this. Because again, like you have like at least how old you are. Like you you're 33 now like, you might work until you're, you're 65 like you have your entire life to double over doing something that you love. So, again, people ask us all the time, am I too old? Absolutely not. This stuff changes so quickly that you can come up to speed with it. You can sort of hit your we always say what is it again? Hit your horse to that wagon? - -15 -00:08:25,320 --> 00:08:26,760 -Scott Tolinski: Yeah, I think you say that. - -16 -00:08:27,240 --> 00:08:59,580 -Wes Bos: I said hitch a dog last time, which is not. But you get the point. You can Yeah, you get into this industry, I don't think the I think the thing with age is just that when you're older, you just don't have the sheer amount of time and there's so much more pressure to actually make it a thing especially if you have like a well paying job that you're trying to jump ship from. That's where it's really frustrating. We see that in the boot camp all the time. Or like people are coming out of these, like super well paying jobs. And and their spouse might not necessarily be on board, but there's miserable and what they do. - -17 -00:09:00,000 --> 00:09:22,080 -Scott Tolinski: Yeah. So I mean, it's it's a hard one with I mean, there's a lot there and at the end of the day, like you said you need that family support, right? So you need everybody to be on board, there needs to be you know, a bit of push and pull their I liked your your idea to go see a marriage therapist or something to talk it through because I think that is an important thing, just to have that communication. Okay, next one is - -18 -00:09:22,140 --> 00:10:05,820 -Wes Bos: one more thing. Well, I got one more thing to say is, whoa, well in here, um, if it's a hobby like there's nothing wrong with calling it a hobby because like certainly, hobbies can turn into careers, certainly hobbies gonna be very profitable hobbies, like, it might even be like a thing where you're like, for the next couple years, you just do some freelance on the side. Like that's a great way to make some money and learn as you go. And if you're starting to bring in an extra couple thousand bucks a month, I think people's tune changes real quick because all of a sudden you can I don't know go buy a boat or something like that with extra money or like go on a vacation with the family. And then once you've got some of that freelance under your belt then you can start over applying for jobs and making that jump word. Yeah, don't buy a boat. Save it. Yeah, save it for when? - -19 -00:10:06,480 --> 00:12:57,179 -Scott Tolinski: Unless you Yeah, you've dreamed of owning about. Okay, next question is from Melissa. Maya. So thank you, Melissa for giving us a pronunciation there. She even added a smiley face, which I presume is not part of the pronunciation. What is your advice to a very junior to junior devs? In writing cover letters for jobs part of me feels like cover letter is pointless. I wonder what to say without sounding like canned? I wonder what to say without sounding canned and fake? Thanks. This is a good one because I believe in writing cover letters, because I think it makes you stand out. It really depends there. There's some when I was writing cover letters a lot for jobs, there were some jobs that were sort of here's the sort of the job that I just need to apply for. Right. And then there's other jobs through like, this is my dream job. And you know it to be entirely honest, I never felt too unprofessional, like letting them know that that was my dream job for those dream jobs. And I didn't say it on every single cover letter. So it wasn't fake. So it was saying like, Hey, you know, I obviously don't say, hey, in your cover letter, but just say, Hey, you know, ever since I started my career, this is the exact kind of opportunity I've been looking for. And I would really, really love to get an opportunity, or I'd really love to get the chance to show you that, you know, I have the passion and skill to do this job for you. And so I think in my opinion, cover letters are always best when it's something genuine and from your heart. And to be honest, if it's the job that it wasn't that kind of thing, right? It was just a job that I was looking at maybe a job to hold me over, I would still do a cover letter, but it might be a little bit more canned, it might be a little bit more fake. But you know, I think the important part is, is that you need to do it. And the more and more cover letters you write, it's not going to take you that long, you could write a one page or a half a page cover letter, you could do that in half an hour or less. And in your your you know, your your job, hunt, whatever the job that you're going to get. I think that's important enough that you want to be able to do it. Again, I'm not a great writer, and, and I still wrote cover letters for all of my applications. When I was interviewing some people at one of my jobs, I was on part of this interview team. And I was just amazed that the poor quality of some of these applicants, they would just have a crappy resume, you know, sort of just half assed everything. And the ones who did a cover letter, even if it was a canned and sort of fake cover letter, they did stand out in a positive way. So I think you want to do it, and you need to do it. But again, those jobs that are really personal and the ones that you you can't see yourself passing, make sure you let them know that this is, you know, personal this is this is genuine, this is something that you really need. - -20 -00:12:57,899 --> 00:14:28,649 -Wes Bos: So well Scott was talking, I just wrote up what I would put on a cover letter because like, as someone who gets we've talked about this lots of email, and it's often just like you, you look at it, and you're like, like I guarantee is the same feeling for people who get 100 100 resumes, and they just like look at it. And it's just wordy. And people say they're passionate about stuff. And like come on, you know, like, at least to me, I just like look at that. And I'm like, I don't feel like reading this whole thing. So if I were, I'm going to use tm lacs, which is a really well known design company here in Toronto. So if I was applying for a job there, I would I would write this on my cover letter. Hello, I'm Wes Bos, a full stack JavaScript dev from Hamilton. I'd absolutely love to interview at your job. I love the work that T hen lakhs is doing, especially the project that you last did. And then mention one of the projects that you're actually interested in, don't just go look don't yet don't just read the latest blog post they have. I once saw john speak at a conference. And I was really intrigued at the stuff he did with Bell or something like that. And then please take a look at my GitHub for a few work examples. Make sure you check out the webcam one I had really fun making that I'd love to hear from you. That's it. Like that's what I would do love it really quick to the point shows who you are shows that you actually know what the company is. And you're not just copy pasting it. I think there's like a delicate balance of just going to their website and like picking one of the projects that they did and like if you're actually interested in doing a little bit of research on the company, and just mentioned that really quickly. So I think that's that's really what you got to head for. - -21 -00:14:28,679 --> 00:14:30,450 -Scott Tolinski: Yeah, I like that. I like that one a lot. - -22 -00:14:30,480 --> 00:14:31,980 -Wes Bos: Let me do one here. Oh, - -23 -00:14:31,980 --> 00:14:32,850 -Scott Tolinski: I do them all. - -24 -00:14:34,950 --> 00:14:40,679 -Wes Bos: Next question from I don't know how to pronounce this is it? We? We wi - -25 -00:14:40,679 --> 00:14:42,870 -Unknown: Ll I think it's Wi Fi. - -26 -00:14:43,260 --> 00:14:50,340 -Wes Bos: We Scott Oh, this is a question for you. I will ask it. Hey, Scott, what was the stack you're using at Ford? - -27 -00:14:50,370 --> 00:16:40,770 -Scott Tolinski: Yeah, um, okay. So I should preface this I don't I don't know how much I can get into Ford's exact stack or how they do things in production. But we were a part of a team, I want to say like a crack team of excellent developers from all over Metro Detroit who came together to produce a style guide that other developers would then come in and use. But our style guide had to be interactive. But guess what, we couldn't show off any of our code, it was just bizarre and sort of, I don't know, it was it was sort of bizarre in a lot of ways. Basically, we're a part of a team that was developing interactive prototypes. And these were more than just like your, you know, your sort of envision prototypes. These are actual clickable, essentially real apps just with sort of, you know, cans data. So the stack wasn't a full stack thing, or anything, that what we were using was canned data. And we were using Gulp as a build tool, we were using Angular 1.3 on the front end, and no database or anything, because it was all canned data. And then we had this really neat build process where it could transform everything right to left, left to right. or different languages that were more than just translating, because some of the things had to change in the actual the code base. But yeah, that that's pretty much it. It was just Angular. And then you know what it was, it was sort of, I don't know how to say this correctly, because they were all prototypes. And we been given short deadlines with lots of stuff. It was sort of like, Alright, you have two days, we need user testing on this thing really quickly to see how it works. So then we would stay up till two in the morning, like hacking together things as fast as possible. So it was fast and dirty, quick and sloppy. And it had I don't know, can you say quick and sloppy? I'm gonna go ahead and oh, yeah, - -28 -00:16:40,980 --> 00:16:41,909 -Wes Bos: absolutely, no. - -29 -00:16:45,240 --> 00:17:25,820 -Scott Tolinski: And that's just just how it was. So that not not too much info there. Because this is not obviously not the stack or the code that they're using in production. Very little of my production, or my work actually made it into production, which is kind of sad, because we built some really cool stuff. Shout out to Jeff Marcel, who is one of the devs there for me for a long time did some really great work for them. Okay, next one from Julian Zammit, other than reading the ducks. How do you guys go about learning or trying out new technologies? Do you rebuild similar applications or pick up an individual features that you think are sick? Thank you for you using sick, Julian? - -30 -00:17:26,429 --> 00:17:36,270 -Wes Bos: Yeah, I'll start with this one. I've talked about this in the past. And I think we did like one of our most popular episodes was called keeping, what's it called Keeping Up With The Kardashians? - -31 -00:17:36,390 --> 00:17:42,780 -Scott Tolinski: That one and too fast, too furious? I don't know if that was that was the name of my talk. I don't know what the episode was like how to learn things quickly or something. - -32 -00:17:42,800 --> 00:18:39,420 -Wes Bos: Yeah, how does something how to learn things quickly, we did a whole episode on it. But the short and skinny of it is a first I immerse myself in it, though I started, read a bunch of blog posts, watch a bunch of talks, talk to people on Twitter about it. And it sort of just like suck in all the information that you possibly can. And that will give you sort of an idea of the surface area of that tech, then you go ahead and try it out. So I'll try to like grab like a demo from GitHub, or follow like a tutorial of something that is already made, then I'll tweak it. So I'll change the demo to do whatever it is that I want. So like, okay, I did a whole crud operation with this content type Can I then change it to be slightly different and but do the entire same thing. And then finally, when I'm done that, I'll just scrap everything and then build it out from the ground up. Because that's really, I think, where the lot of the learning comes. And that's just my approach to it. I know a lot of people are different, they just like to take something and tweak it to to their app. But I found it to be a really good process. - -33 -00:18:40,050 --> 00:19:15,210 -Scott Tolinski: Yeah, you know, what I do is I install it, I give a quick glance at the code and the examples and I just start typing. And then I get a bug and then I fix it and I get a bug and then I fix it. And then I go back and reread thing and be like okay, so for me should have read that. Yeah, should have read that. But to me that part of it is really, I don't know instrumental. It's just how I learned personally, where for me, if I get my hands dirty, quick, Lee, it doesn't matter if I'm making a lump of sand rather than a sandcastle. All that matters is that I'm playing in the sand. I just came up with that on the spot. - -34 -00:19:15,780 --> 00:19:17,910 -Wes Bos: Good. Wow, that's good. You're so prolific. - -35 -00:19:17,940 --> 00:20:48,270 -Scott Tolinski: Yeah, I don't know how to I don't know how I do it, man. But really, to be honest, like, that's sort of what I'll do. I'll make a mound of sand and then I'll go back and figure out how to make an actual sandcastle. Because what's what's important is that you actually get to feel that like here, here's the way things work. Maybe here's how he did to be entirely honest, you may be a very different type of person, you might be going to the source and say, Okay, I need to know the ins and outputs of the inputs and outputs of every single one of these API's. And then now when I start playing with that, I know how it all works. But for me, like I'm going to understand how it works better if I'm breaking it rather than if I'm just typing something. So I like to just get my hands dirty quicker rather than later. Wes has a Brilliant transition here into this ad read a My mind's blown Westboro. Yes, playing in the Sanity with Sanity, I think you in the middle here for the Sanity, man, they really good, that's really good. And that leads us into one of our sponsors today, which is sanity@sanity.io, where you can use a really awesome service to have your back end for all of that front end, front end framework sort of stuff you love to do. And you might be wondering, what do I do for the backend? What do I do for my data? What do I do for my database? How do I get halfway, you know, how do I build something with persisting real data, user accounts and that sort of thing? Well, that's where something like Sanity comes in into play here. What do you want to tell us a little bit about Sanity? - -36 -00:20:48,690 --> 00:22:13,560 -Wes Bos: Yeah, so the idea is that you, you log in, and you can create your own back end with Sanity. So you've got, obviously your different content types, I'm just looking at some of the different examples that they have here. And one of them was that they, the back end of the beer festival in Copenhagen was was powered by Sanity. So you would imagine that you log in, and you're like, Okay, well, what types Do I need, you probably need a beer type. These are all the beers that are being served. But then you also need like a brewery type, which is like a relation to each of the beers, then you probably also need like days, like a schedule. So you need like events. And those have to be on a have date input types, and maybe images associated with them. And, and you get the point, like, anytime you make something, you have a back end, and you have to make all the different types. And you have to relate all the different types, you have to have all the different types of fields and have them as rich text so people can edit them. And that's what Sanity does. And then you go ahead and you grab reactor view or anything really anything that can consume an API, and then you you consume that API, and you go ahead and build it. So obviously, something like Gatsby is a really good good choice for using as a front end with Sanity. So if you want to check it out, go to sanity.io forward slash syntax, and you are going to double your free usage limits. So go ahead and check it out there. They have lots of examples to get you up and running. Speaking of how to, you can go ahead and play in the sand. Yeah, yes, sanity, so - -37 -00:22:13,560 --> 00:22:23,130 -Scott Tolinski: that way, you're gone, man. Yeah, you are. Yeah, that was that's good. This is why I'm out of practice. And yeah, I missed the last episode, and all of a sudden, charming crashes. Wow. - -38 -00:22:23,160 --> 00:22:26,580 -Wes Bos: That's why we get paid the big bucks here to transfer into those ad reads, - -39 -00:22:26,610 --> 00:22:30,960 -Scott Tolinski: look at that. Look at that. All right. Next question. You want to take this one? - -40 -00:22:31,290 --> 00:24:05,670 -Wes Bos: Yeah, from Brad, Xia z pronounce z Yo, or like seija? Is it always necessary to use set state in react when storing data, for example, a form input, even if you don't intend on re rendering the page? Or can you get away without using state. So this is a good example. So like, let's say you've got a form input, and you've got three or four, sorry, you have a form with three or four inputs inside of that. And then when someone submits that form, you want to go ahead and send that data off to like an API back end? Like is it necessary to do the whole song and dance of like when they key up, put that data in state and then reflect it back into the input? Like, if you just need it once? When you submit a form? Is it necessary to first put that data in state and then go ahead and take it? And the answer to that is no, unless you actually need it in state, you don't necessarily have to, it's definitely handy to have it in state. And I've definitely run across many use cases where I'm like, I'll just use a ref right here, because I don't actually need this piece of data. And then you're like, Oh, I need to write an error message with the data in the error message, or Oh, I want to like, loop over this data and clean it before I go ahead and send it and for me, anytime you need to do anything with the data, put it in state and then you can massage it and then you actually have it just in case. Anything else happens. Otherwise, you just have to grab it off the input value every single time. So yeah, you don't need it. You don't necessarily need it. Yeah. Although if you're finding it like cumbersome just to put it into state, I would look at writing some hooks or some sort of helper library. It's just a pop that and mirror that data to state. Yeah, I - -41 -00:24:05,670 --> 00:25:11,820 -Scott Tolinski: mean, there's a lot of form libraries that that do that kind of thing to hide it a little bit. So you don't have to do all those use states set states, whatever. I know that I'm not totally opposed to using refs for on, you know, on tracked witnesses, they would they call that on that I am not sharp trolled for uncontrolled inputs. Yeah. I don't intend on re rendering the page. Yeah. If you're not going to put that state in anywhere. Yeah. And it's easy enough to grab it out of the input dot value, right. And you submit it then yeah, that's really neat. You could do some html5 form validation to make sure everything's validated. You can always cleanse your inputs in different ways. But I'm not totally opposed to just using refs and having a forum so you don't always have to, but in many times did end up being easier to just throw it in state like Wes nailed, I think you nailed it answer. So I don't really have a lot to contribute there. Next question is from Timothy. And the question is development has a stereotype for being a young person's game? - -42 -00:25:12,180 --> 00:25:14,760 -Wes Bos: We just talked about this perfect. Sorry, keep going. We did. Yeah. - -43 -00:25:14,760 --> 00:27:55,110 -Scott Tolinski: As someone who started their career out of university, I often wonder about how long I can sling divs. For man, I'm glad slinging divs is catching on. Do you think you could make it to retirement age? Or do you think the game will change out from under you, the game will only change out from under you if you have your head in your head in the clouds that aren't looking at the ground. I don't know if that works. But the point being here is really that, you know, if you're paying attention, the game won't change out for money. I mean, so for instance, when when I started web development, everything I did was with out a database, it was just straight up HTML. And you know, what, if we needed a header to be repeated on some pages, we maybe just copied and pasted that header onto some other pages. We weren't necessarily working with PHP or anything. And then, you know, the CMS, the rise of the CMS, and every single client needed a WordPress site, every single client needed a Drupal site, they all needed them, right. And if you were not the person who was going to take the time to notice that, well, maybe you got stuck just slinging static HTML files one at a time and saving them up onto the server or you dragging and dropping them with FTP, like any of those things, right? That that change has already happened. So so much. So if you've been in the industry, for any amount of time, like, five, five years, you've probably seen things change a ton already. And if you aren't looking at the current state of things being like, Well what the heck happened, then you're probably fine. And you're probably going to be fine, because it means you at least have your head in the game a little bit. And that doesn't mean you have to learn all of the front end frameworks, it doesn't mean you have to learn every new bit of everything. But it's good to keep up on the core new technologies. As in like the additions to JavaScript, it's good to keep up on the additions to HTML, the additions to CSS, you want to be able to write the foundational stuff for all of those things as they evolve. And you want to at least be aware of new technologies. For instance, I am aware of Web GL, I'm aware of what is that? react 360, which is the VR react platform. I'm aware of augmented reality, I'm aware of all of these things, just enough to know that if I need to do jump ship quickly into something else, that I could do it before the masses have done it, and I will be marketable. hireable, whatever. Now, that's all changed, since I'm an educator full time. But you know, at any given point, it's at least good to have your eyes on the things you don't need to learn everything. - -44 -00:27:55,590 --> 00:28:02,580 -Wes Bos: Yes, as long as you're like, I don't think webcam on Leadville and obviously does change quickly. But I don't think it's as quick as people think. - -45 -00:28:02,640 --> 00:28:38,520 -Scott Tolinski: Yeah, like, you're not gonna wake up in one year and be like, I'm totally obsolete, but you will wake up in seven years. And if you don't change your skills at all, like what was the skill set seven years ago in 20 2012? I don't know. It's funny. In 2010, I had a job where the webmaster at our job was creating real media files all day long. That's what his entire job was. If you've never heard of like a real video real media file in real player, real player, and I wouldn't be surprised if that guy was still doing it. He was a lifer. So that that is an example of somebody who the industry has passed them by. - -46 -00:28:38,760 --> 00:29:43,260 -Wes Bos: Yeah, the very fact that you listen to this podcast makes makes me think like you're gonna be fine. Yeah. I think the as you make small changes every day, like we said, you don't have to learn absolutely everything. Just Just be even just listen to those podcasts once or twice a week, knowing what's going on keeping up with your skills, when new stuff JavaScript comes, take three hours and figure out what is it how do I use it? I think you're gonna be fine. I think the kind of the the other scary part about that is just like staying interested in something. Because certainly I've run into lots of people who have been at it for 15 years, and they're like, just don't don't care about this stuff anymore. And they're just uninterested in, in how it works. And it's changing, and there's just no motivation to actually learn this new stuff and to actually go ahead and implement. So I think that's a that's an entirely other issue where maybe you're just a little bit burnt out on web belt in general. Certainly some people like that and they just move into other programming areas like web development is not the only thing you could certainly get much more into databases or much more into back end work or - -47 -00:29:43,650 --> 00:29:45,390 -Scott Tolinski: even management more than like that. - -48 -00:29:45,540 --> 00:30:08,190 -Wes Bos: Yeah, management is like that's a whole nother skill set or be like a marketing Dev. Like that's, that's huge for a lot of people are like, you're not necessarily building stuff, but you're using your skill set to crunch numbers into AB test stuff and like there's just so many different areas. You could go into that, as long as you still like typing and figuring out problems, and I think you'd be fine. Regardless of what comes your way. - -49 -00:30:08,550 --> 00:30:20,310 -Scott Tolinski: Yeah, totally. Like you said, I mean, I think the message that I got out of your answer was listen to syntax. And don't stop. Listen Daigo mentor everybody, you know, listen to syntax, that's the answer right? - -50 -00:30:20,310 --> 00:30:27,840 -Wes Bos: Or what? Or maybe don't tell a friend because then they'll be the one that no doubt lose their job. No, I tell a friend. Okay, Dell friend. - -51 -00:30:27,930 --> 00:30:30,660 -Scott Tolinski: Just don't tell your friends. Tell the coworkers you don't like don't - -52 -00:30:30,660 --> 00:30:44,400 -Wes Bos: tell your enemies. Yeah, yes. Next question from monkey man. This one's again for Scott, you've mentioned you love hip hop. Would you be willing to share any playlist of your all time favorite hip hop - -53 -00:30:44,460 --> 00:30:50,610 -Scott Tolinski: artists? Yeah, sorry. There's a couple that are directed at me here. I figured episode to yourself. Get a couple. Yeah, - -54 -00:30:50,610 --> 00:30:53,040 -Wes Bos: we gotta give Scott some some time here. - -55 -00:30:53,070 --> 00:32:18,860 -Scott Tolinski: Yeah. Um, so I have a couple of playlists. And I've shared them recently. My favorite golden era rap music. There's 75 songs here. It's like, almost like B boy tracks but 90s tracks. I have another playlist. That's like level up tutorials rap music to code for Oh, no, not sorry. It's called just rap music to code to. And I'm going to tell you up front that but all of these playlists are going to be a little bit explicit, their their their Parental Advisory sticker on them. So these aren't ones you want to listen to with kids in the car, your son's like, it's rap music. So I have a couple of playlists, right music to code to and golden era. And I'll make sure that both of these playlists are linked up in the show notes for this episode, so that you can go ahead and just in throw those on if you're interested in that kind of music, you want to see some of my favorite albums. is funny, Trevor, see Trevor Trevor see media, Brad. Trevor. See, I'm sorry, Brad, if I've never heard your last name said out loud. He tweeted at me asking about some of my favorite albums. And there's like a little tweet thread where I have like, maybe like 2030 albums that I list. So I'll make sure that's all linked up in the show notes. You can check out my favorite rap music. If that is something you are interested in. Wes has had none. had none had none. Okay, so that means I'm reading the next question. Next question is from Brooke. Brooke, you have a wonderful name as the same name. We just named our new daughter. So excellent job on having a name that says Oh, - -56 -00:32:18,870 --> 00:32:23,160 -Wes Bos: you're gonna call her Brooke will probably call her a short. Yeah, lucky. - -57 -00:32:23,279 --> 00:32:46,110 -Scott Tolinski: We call her brookie. Right now to Landon. That's what he calls her. But we call her I plan on calling her Brooke. Brooklyn's great Oh, my color Brooklyn. Who knows? I think the intention is to call her Brooke. So what are your thoughts on html? preprocessors? If you use one, which ones do you prefer? And why I know you actually do use Windows us or you have in the past. - -58 -00:32:46,650 --> 00:33:47,040 -Wes Bos: I use JSX. Oh. I also use pug. Yeah. Which was Jade. And there's now pug on my node course, which is server rendered. And quite a bit of my own actually now not quite a bit. I've been slowly moving over my course platform to like headless. So all of the pug is is slowly getting re factored into into react with JSX. So I think that's still one. What are my thoughts on it? I really like them. It's there's obviously like a learning curve there, where you need to learn how that specific templating language works. And you have to also like the fact that it's based on indentation, things like that, but I've always been a big fan of it. I quite think that I really like it. I would be happy to see something like pug in JSX. But I don't think that's gonna happen. So it's not a huge put out for me just to use Jade or sorry, JSX. - -59 -00:33:47,430 --> 00:34:06,060 -Scott Tolinski: Yeah, I think I've tried a whole bunch of them. Like was the ej s? Was that one of them? Yep. Yeah, I feel like I've tried a whole bunch of them over time. And it is never anything that I stuck with. But always something I kind of liked when I did. And then like kind of hated when I ran into like a little bug here or there and just realized I didn't understand the syntax well enough. - -60 -00:34:06,390 --> 00:34:32,730 -Wes Bos: Yeah, I think that like, they're all better than than HTML. And they all have, I really like all of I really like Jade specifically, because you can use all of the JavaScript logic inside of it. So all of your ifs, all of your loops, everything that you're used to. And I wish that we had all of that logic in JSX instead of having to use loops or like for loops and weird if statements inside of it in order to do logic. - -61 -00:34:33,380 --> 00:34:35,960 -Scott Tolinski: I'm sure there'll be something and if there isn't already. - -62 -00:34:36,509 --> 00:34:44,610 -Wes Bos: Yeah, they're looking at it for we should do a web like a hasty on JSX 2.0. Yeah, with that, I - -63 -00:34:44,610 --> 00:34:51,000 -Scott Tolinski: just feel like there's no one for me. I know is existed forever and ever and ever within like, - -64 -00:34:51,230 --> 00:34:52,500 -Wes Bos: three years almost. - -65 -00:34:53,040 --> 00:34:59,130 -Scott Tolinski: It's been in web developer years. It's been like 40 years. Which is like what like a year and a half. Talk - -66 -00:34:59,130 --> 00:35:09,060 -Wes Bos: about getting out J sX 2.0 is only three, three years old. I've been talking about it. I don't know what the the it was locked in 2016. - -67 -00:35:09,599 --> 00:35:15,750 -Scott Tolinski: Yeah. And about in 2016 they had this conversation, and then it's locked. - -68 -00:35:16,109 --> 00:35:49,440 -Wes Bos: Yeah, I wonder if after like suspense is out, if that's what they'll turn their attention to is adding a couple nice things to JSX. Cool. So that's, that's my thoughts there. I think they're great. We just don't use them all that often because a lot of what I'm doing is moving over to react. And if that's the case, I know that there's some hacks you can do, but I'm not about to. I don't like doing like weird stuff like that. Like I don't like doing weird Webpack configs and things like that. rather just keep it pretty standard so that almost anyone can jump in and work on it. - -69 -00:35:49,979 --> 00:35:57,750 -Scott Tolinski: Yeah, that's funny. That that needs to go into the soundboard. Whoever is working on the soundboard. I don't like doing weird stuff. - -70 -00:36:02,850 --> 00:36:10,230 -Wes Bos: All right, next one we have is from chase lorette. I think how do you think I did on that one? Li r e TT? - -71 -00:36:10,400 --> 00:36:16,080 -Scott Tolinski: I'm gonna go ahead and give it a you know, a seven hours six, seven out of 10? I don't know. - -72 -00:36:18,170 --> 00:37:43,230 -Wes Bos: What advice would you have for someone considering to level up? Oh, they're, wow, go to level up tutorials.com forward slash store. By moving from a city with a few tech jobs to a city with more opportunity for tech jobs? What are some of the biggest things to consider when moving cross country to further our career? So someone here is talking about like, what what do you think about moving from Nebraska, or apologies to our Nebraskan friends don't want to move to Silicon Valley in order to level up in something like that. And I think that I know a lot of people who have done that in early in their career, and I think it's been a good move for them just because they're able to sort of cut their teeth and just dive into the head of it. I'm very much against that. Just because obviously, I'm very much about working from home, and being able to live wherever you want it. It's funny, because we probably have like the most like remote, okay, jobs we all have are all connected, and we all can do it anywhere you can get an internet connection, but people still seem to want to flock or still have to flock to these big tech centers in order to get those jobs. So I think it's probably a good thing. But I also think at the same time, maybe that should be like a, like a goal of yours in order to like stay where it is that you want and be able to work remotely. - -73 -00:37:44,360 --> 00:40:08,820 -Scott Tolinski: Yeah, I'm gonna go ahead. And I'm gonna disagree with you pretty hard on this one, because I'm someone who did this kind of thing I moved from, it's not necessarily the middle of nowhere, because you know, sort of by the the University of Michigan there, but I moved from essentially farm country in Michigan, to Denver. And so you know, in Michigan, not to hate on the Michigan devastating because it's awesome, right. But you had the SE JavaScript meetup. Right. And that was Yeah, like all things JavaScript. That's great, right. That's the big meetup. But in Denver, there's a meetup, which is where I moved, there is a meetup for literally everything in Denver is like not I mean, 10% of big tech scene. It's a big, big tech scene, but it's not San Francisco, right. And yeah, you still get some of the small town vibes in different parts of Denver, you still get like some of the small areas stuff. But at the same time, you have all of these different meetups, there's conferences out the wazoo here, there's some insanely good conferences, and so many of the ones that like, there may be even the touring conferences, we didn't get them where I was from, and we get them here. And so I don't want to hate on the Michigan scene at all, because the Michigan dev scene is great. But the difference has been pretty big for me in terms of the amount of stuff I can't attend in the amount of things that are at my disposal, networking wise, you know, I can go the React meetup here in Denver, and it's a packed house. And there's a ton of people there. And there's a ton of companies looking to hire. And it's really a different vibe. Now, that said, I've been out of Michigan for three years now. So I have no idea what the scenes like there now if you're don't play me about cuz I'm sure it's great. You're all wonderful. But, you know, I moved from somewhere that had less stuff going on to someplace that had more stuff going on. And I was surrounded by dev stuff in a different way than I had been before. So yeah, that that, you know, my tips for this kind of thing is to get out there if you're going to these things and make yourself visible, be a part of the community, talk to people find where the devs at, find where the devs that find out where they're at, and like make yourself visible and show up to all these events and really take full advantage of what moving to a place that has more to offer has to offer. So you know, those are my thoughts on it. I know that's a you know, the move to from someplace to Silicon Valley like you mentioned. That's That's hard. That's lot of money, that's a huge commitment. There's a lot of stuff they're not saying it's the wrong idea. It's the right right idea for a lot of people maybe just moved to Denver, then maybe just moved to Denver - -74 -00:40:08,850 --> 00:40:11,400 -Wes Bos: sounds like a pretty sweet place to live. Yeah, I - -75 -00:40:11,400 --> 00:42:10,130 -Scott Tolinski: know, my, my wife's gonna roll her eyes if you listen to this, because she keeps telling me I should run for political office here now, because I'd be good at politics. But because I just talked about Denver so much. On this wonderful city, where everything is candy. Another, you know, place where everything is, is candy, and wonderful is one of our sponsors, was just typing something in here in our show notes. But our sponsor, this week is a century, which is a longtime sponsor syntax here. And this allows you to track your bugs to make sure there are no bugs in your candy, which who wants that unless you're into eating bugs, which I guess is okay, if you're into protein. So one of our sponsors today is century now century is a longtime sponsor have syntax here, and they are the excellent bug tracking service over@sentry.io. And they're gonna allow you to track solve, and really keep stock of every single bug that you have in your application, whether or not that's in your front end, your back end. It also integrates with all sorts of different services, everything you could possibly know and love. Seriously, there are more integrations than I could ever possibly list off here. So I want to highlight a couple of these integrations. You can, you can connect to GitHub to have it connect to your error log. So you can connect a specific bug in actual code land to a specific area and GitHub land but also in Bitbucket, get lab. Any of those lands as well. You can connect it to your Heroku for development, you can track releases that way. All sorts of things like another one of our sponsors, over here, clubhouse connects to clubhouse. It connects to Asana, Trello, JIRA, Slack, I don't know what rollout is, but rook out pager duty Twilio, data dog Splunk segment, and there's too many to go through here. So head on over to century.io and use the coupon code tasty treat all lowercase all one word and get two months for free. Check it out. And thank you so much for century for sponsoring. - -76 -00:42:10,770 --> 00:42:39,110 -Wes Bos: Awesome. Next question we have here is from Paris. Ah, you both seem very involved with parenting your kids, which is really awesome. Thank you. Also, that's like, I don't know, sometimes when people like congratulate the dad for being a parent like, that's Yeah, the parents supposed to do. Anyways, what are your recommendations in terms of resources for first time dads and moms like books, podcasts, etc? And generally good co parenting advice for working professionals? Yes, - -77 -00:42:39,110 --> 00:44:00,780 -Scott Tolinski: a good one. Um, I don't have a lot of great necessarily advice, because I'm lucky enough that I'm married to a child psychologist who taught a master's level course on human development. So I sort of defer to the doctor for everything, say, Hey, Hey, Doc, what do I do here. But now that said, we had a couple of decent books, we're still very much in the early stages of parenting. So we haven't really had to get too much into discipline or anything like that. My wife did just purchase a book on our audible that she's heard is really good. And I have not put it on yet. But it's on my my to do list here. She's invited on yet either. But we've heard excellent things. So this is going to be going on the recommendations of other people that aren't us. But the book is pull it up here, how to talk so little kids will listen, ages two through seven. And it's this final guide for kids. I've heard it's a really great book. And I think it has some scientific backings in terms of you know how kids will respond to things. So that said, you know, one of our kids is a week and a half old and the other one is two years old. So we still haven't gone too much into this. I'm interested to hear what kind of resources you're all about Wes, and maybe pick up some tips from the master. - -78 -00:44:01,080 --> 00:44:07,320 -Wes Bos: Yeah, I don't. I'm like not much of a book reader. I know. We did read like bringing up baby. - -79 -00:44:07,440 --> 00:44:10,350 -Scott Tolinski: Oh, yeah, we read that one. Yeah, this class, - -80 -00:44:10,350 --> 00:44:15,660 -Wes Bos: really not a whole lot of books and things like that. I'm sorry to interrupt. - -81 -00:44:16,320 --> 00:44:35,550 -Scott Tolinski: Do you know what I did? Before Landon was born, I attended a dad boot camp that was offered for free from our hospital. And it was awesome. I did not want to go because I was like, I know everything. I'm gonna be fine. And I went to this thing. We're like, Dad boot camp. Yes. So if you have any boot camp, stuff like that available near you take it because it works. - -82 -00:44:36,150 --> 00:45:42,660 -Wes Bos: Awesome. I've never heard of that. That's pretty cool. I don't even know what my tips are. I really like to explain things to my kids as to what's happening and how things work and going to the grocery store with my love going car shopping with my kids because they asked so many quality. Yeah. Like where'd beets grow? Did they grow under the ground or over the ground? Or what is that made out of? Is that healthy? Is that a good price? Things like that. Just being able to like talk to them. Like they're an adult, I think has been very helpful and to, to stop and answer their millions of questions that they have. Having good communication with your partner, I think is really important. If you're both working professionals, my wife and I go on date night, once a week, which we find extremely helpful. Just because like, I don't know, it's, it's, it's really easy to talk when you're sitting there over a meal or having a drink or whatever. And rather than like trying to, like sit down or a talk when you're watching TV or something like that. And we've found that to be obviously that's a bit of a privilege. We have a babysitter locked in once a week for that type of thing. And I know a lot of my friends are just like, I cannot find a babysitter for the life of me, which is like just for like once a month rather than - -83 -00:45:42,660 --> 00:45:45,240 -Scott Tolinski: weekly. We're sort of in that same boat there. - -84 -00:45:45,690 --> 00:46:39,780 -Wes Bos: Yeah, it's so hard to find like a decent babysitter, especially like I live downtown. And there's like just no teenagers at all that live downtown. It's just all young families, and they're all scrambling for like the two kids that can babysit. And then just prioritizing kids over work. So I'm not getting frustrated when they although I just said Hey, be quiet like they were stomping up the stairs, they usually don't come up to their floor. But sometimes they come and ask for stickers and things like that. And you always have to make sure like, I'm busy right now. But Sure, let's talk. Let's get some stickers. Let's talk about what you're working on today. Because obviously, that that's really important. And then I think just being like, like we talked about earlier, the question is like, knowing what your partner's goals are with their career as well. And making sure that you're aware of that. I think it's easy to be selfish, when you're all tired and things like that. But knowing what their goals are and where they want to go so that you can try to help them through that as well. - -85 -00:46:40,050 --> 00:46:42,870 -Scott Tolinski: Work. Cool. All right. ready to move on? - -86 -00:46:42,870 --> 00:46:43,590 -Wes Bos: Yep. - -87 -00:46:43,590 --> 00:49:01,620 -Scott Tolinski: All right. Next question from Anthony Brock Kuma man Anthony. Awesome. Bryan Kuma. Thank you so much for that pronunciation. I nailed it. Love the show with Travis. Me too. Travis is amazing. had a question about the gap. Similar to design ambitions tastes surpassing current skill, when did you feel like your code had grown up, and that you could actually do what you envisioned with JavaScript? I have. I don't know if I have a very specific story for this. But I have like a very clear understanding of that moment, there was something when Meteor came out. And it was it was along the lines actually, maybe around the same time that Angular one was like starting to pick up steam, where Meteor with a little bit different for me because it had a database, and it's persisting, and it had WebSockets, and all that usual, all this real time stuff. And it was all these things I couldn't do before. And I remember I created this, my boy tools app, the original version of it, which is, you know, the app is is not really in great shape right now. Because I haven't touched in a while. But when I first created it, and I was thinking it'd be really great if I had this tool that could keep track of all my breakdancing moves and categorize them. And, and and I created something that took values from each move. Like, if I had a dance move that I deemed to be a nine out of a 10 value in terms of like wow value or something, right, I gave all of my moves values, I wrote some code that would generate collections of moves that I could do in a competition together so that all of my sets, as we call them would be evenly scored. So like it would, if I had an level nine to move in my set, it would balance it out with like a weaker move. And then another one, it would be you know, so the average that I remember creating this thing, and that popped it out, and just being like, wow, wait, I made this what, like, this is something that I couldn't have made last year. So there was a very distinct moment when I was comfortable enough in JavaScript to be able to create something like that. And it just felt like holy cow, if I can create this, the possibilities of stuff that I can create beyond this are pretty much endless for me. And like it's only going to be limited by the energy I put into it. So even though you know, Meteor did a lot of that stuff for you. At the time, it was still just sort of a wow moment for me. And I was very, very happy with my skills at that point. - -88 -00:49:01,980 --> 00:50:38,430 -Wes Bos: I had sort of two big aha man, I can make anything moments. The first was when I made like a custom custom field in WordPress, or just custom fields in general, most WordPress and custom post types, because you realize, like, oh, everything in the world is just a type that has fields in it. And they can be related to each other and, and I can write queries to pull any of this data. And for me, that was like a big aha moment and being able to say like, Oh, I can, you can pretty much make anything at this point. Because I know what it is. Obviously, there's some limitations in WordPress, but you can you can really do a lot at that point without having to like worry about plugins and things like that. Just making it all from scratch. And the second one was when I wrote my first middleware and express so I've been building Express apps and sort of piecing stuff together and using plugins and at a certain point, I think I like console, I wrote a middleware and I like console log the entire world. request. And I had a database connection. And I was like, I have everything at this point I have the all of the things that had happened in this request is in this one object. And I have a connection to a database that I can pull data from and put data into. And at that point, you go like, oh, wow, like, this is what it is. This is what it is people are sending requests in. And I can do anything at this point. And that was like a really like relieving moment to Me, me remembering that, but like, I like obviously, it's gonna be hard. And I have to figure out all this JavaScript stuff. But I know how this all works. And I'm pretty sure I can figure anything out. From here on out. - -89 -00:50:39,030 --> 00:50:41,130 -Unknown: Word. Cool. Yes, - -90 -00:50:41,130 --> 00:50:45,030 -Wes Bos: I think that's enough questions for today. Should we get into some sick pics? - -91 -00:50:45,060 --> 00:51:06,840 -Scott Tolinski: Sick pigs? All right. For those of you who don't know, this may be your first episode of syntax. See, pics are the pics that we have that are sick. They're stuff that we like, could be literally anything and I'm using literally correctly there could be I mean, I think we've sic picked some of like the weirdest stuff like a TV channel before or something so you can pick pick anything you want. Do you have a sick pick? Ready and ready to go here? - -92 -00:51:07,410 --> 00:52:57,240 -Wes Bos: I am going to sick pick a sound machine. Oh, so are you one of these people who needs to sleep with a fan on you bet louder the better asked. Yeah. Yeah, I love having a fan on. And it's funny that sometimes when like we go to a hotel or something like that, and there's not like a fan or anything like that, I always go to the website, noisily and oh, s Li. What is it noisily.com. And you can just like mix your own little background noises. Like I always try to throw a little campfire in there. And Caitlin hates it. So you can do like rain and things like that. Anyways, just sound machines in general helped me sleep. And we've had sound machines for our kids. like crazy. We've had a bunch of these different random sound machines that you buy at the drugstore. And we recently got a new one that's called the marpac roem. white noise machine. And it just has like the most bacey I can't even describe it. But like the kids sound machines kind of stressed me out because the the sound of it, I didn't really enjoy it. And the I don't know if it's the quality of the speaker in this one or just the the recordings that they have on the white noise that they have on these ones. It just has like a very bacey sound to it. And I just I say it's hard to describe on this podcast, but we like turned it on. And we're like, this is so nice. I love this one. And we got another ones we have two of them in our house right now. It has a battery in it. So you can just charge it via USB, which is a must for me for any kids stuff these days. And then it has a battery, which I think will run about eight or 12 hours without a charge. Which is great. So you can just like sometimes if you don't have have somewhere to plug it in with when you're traveling, you can just take it with you so called the marpac Rome white noise sound machine. And I'm a big fan of it. Hmm, - -93 -00:52:57,780 --> 00:56:02,370 -Scott Tolinski: nice. Cool. I yeah, I'm gonna check that out. We use this like turtle right now that's probably not very loud. It makes like, some weird noise. And it's like sort of like oceany noise and does like a light projection, which is kind of nice. But oh yeah, yeah, yeah, this for layman's term. And for the light projection, I made this like really dope Twin Peaks esque style video with a light. I don't know if you've ever watched Twin Peaks that I've a feeling no of it. But it's like this weird light projection on his face and this sort of dreamy sound. And it was like something straight out of an avant garde film, and I loved it. Okay, On another note, my sick pick is going to be the Oculus quest. And let me tell you, this thing is legit. I've been waiting to buy a VR headset for a long time, I've had a daydream, which is the one your phone plugs into, I had the Google Cardboard, you know, these are just cheap little things you can use your phone to, but in terms of like the Oculus, or the Vive or any of those are vive or vive I don't know how people say it. And in terms of the any of the other headsets, they'll need a really you know, big powered powerful PC of which you know, I'm a Mac guy don't have a big powerful PC, I had one at one point. But you know what, I don't really want to be tethered to my computer. I like to keep my computer in my office is sort of my office space and not like gaming space or anything like that. So the headset those kind of headsets just weren't more quite for me. incomes the Oculus quest which is an all in one unit. So it's a bit like a bit like the the cardboard or the Daydream where it's like putting a phone into a headset. But this thing is so dang words can't really do it just to see kind of kind of go and try it or something like that. It's VR headset, you can draw in your your area. And if you get too close to like leaving that play space, then it like shows you that you're approaching your boundary. So what we do in my living room is I just sort of move a couple of chairs at draw this big old space in the living room. If you want to see me do it uh maybe I'll have a video I had there's a corny posted a video on Instagram but it's gonna be gone by the time you're listening this but Basically, I just draw the space in my living room. And I know that in this space, I'm free to move around, I was playing a game in VR last night. And there were people, it was like matrix bullet time, it's called super hot for those of you know, it's like bullet time, like the matrix, right, and you move really slowly. But there, there's so much room, in instance, you're not wired or tethered to anything. Like, there's bullets coming at me in slow motion, and I'm laying on the floor in my living, I'm like laying on the floor to dodge these bullets, and hiding behind things. It is incredible. This is the first VR headset that I put on, and then like, this is gonna change things. I'm loving it. Even my parents were playing like one game where you're either shooting targets or dancing with the robot or throwing paper airplanes. And my parents were using this thing and they took it off. And they were just like, we got to get one of these. So I really think this thing's gonna blow up once more people use it, because it's really that super cool. So Oculus quest. Is my sick pick for the day. Yeah. - -94 -00:56:02,550 --> 00:56:07,620 -Wes Bos: sick. I saw that video of you dancing around with it with it on Oh, yeah. Hilarious. - -95 -00:56:07,650 --> 00:56:08,430 -Unknown: It is hilarious. I - -96 -00:56:08,430 --> 00:56:12,780 -Scott Tolinski: know. It's funny, because you have this whole thing on the I didn't know Courtney was taping me while I was doing that. - -97 -00:56:13,080 --> 00:56:18,690 -Wes Bos: So it's like, haha, yes. Nowadays. That's great. What about shameless plugs, - -98 -00:56:19,080 --> 00:57:24,480 -Scott Tolinski: I'm gonna shamelessly plug my new course which came out yesterday. By the time you're listening to this, it's weird to say that say I haven't even started recording this course yet. But it came out yesterday, that shows how we're how far in advance we're recording these in the courses. Forgive me on the title of this course, this is a sort of pre release course name here. So by the time you're listening to this, the course name might change. But the course is going to be dev tools and debugging. It's going to be a full on guide into your Chrome Dev Tools, but not just Chrome Dev Tools, debugging techniques, we're going to have exercises, things like find them, find the the, you know the time sink in terms of performance, we're going to be diving into every single tab that you could possibly think of, we're going to be talking about how you can use those tabs to find and fix any of your problems. And we're going to be talking just a little bit about general debugging techniques. So this is one of these core skills that you're going to need to have in web development. If you're interested in learning, debugging and dev tools, head on over to level up tutorials.com forward slash pro and sign up for the year save 25% - -99 -00:57:25,020 --> 00:58:05,070 -Wes Bos: I'm gonna go into just sick pick all of my courses. By the time you listen to this, I might have my bet, depending on when baby boss comes, might have my beginner JavaScript course launch. I'm recording it right now as we record. And it's been a long time coming. It's not a huge course. But it has been like a tough course to sort of put together in terms of like, how do you teach JavaScript to beginners, in a way that is super interesting, but also like, you can't just make amazing stuff out of the gate. So I'm really happy with how I've put it together. That will be at Wes bos.com forward slash courses. Nice. That's it for today. Thanks for tuning in. And we'll catch you next week. - -100 -00:58:05,310 --> 00:58:05,820 -Unknown: Cool, - -101 -00:58:05,820 --> 00:58:07,620 -whose face - -102 -00:58:09,450 --> 00:58:19,200 -head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax157.srt b/transcripts/Syntax157.srt deleted file mode 100644 index 489b01550..000000000 --- a/transcripts/Syntax157.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally in ski. - -2 -00:00:25,890 --> 00:00:37,140 -Scott Tolinski: Whoo, welcome to syntax in this Monday tasty treat, we're gonna be talking all about what is a headless CMS? Because this is one of those things that you might think, - -3 -00:00:37,140 --> 00:00:37,950 -Unknown: well, - -4 -00:00:38,100 --> 00:02:14,720 -Scott Tolinski: I knew what a headless CMS is. Or maybe you're like, I've heard this thing over and over and over and over again, and I really just don't get what it is or why you'd want to use it. So we're gonna go over what does it mean? We're gonna use some examples, we're going to talk a little bit about the why you might want to use it. We're gonna be talking about static generation versus live sites and how we can even do a headless site at all. My name is Scott klinsky. I'm a developer from Denver, Colorado with me as always, this West boss. Hey, everybody. Hey, Wes. This episode is sponsored by century now century is a longtime sponsor of syntax, and they are the place to go if you want to make sure that you can track record, keep record of every single bug that happens in the front end back end, or any end of your sight century is one of the services that I used long before we started syntax. And when they approached us to be a sponsor for syntax, I was just an instant. Yes, absolutely, yes. Because this is one of those services I can gush on because I use, and I've used it for a long time at this point, and essentially keeps a record of all your bugs allows you to check them as resolved, it allows you to ignore the ones you should ignore, and allows you to basically know exactly the status of errors that are happening on your site, right now, as they're happening before your users send you an email saying, Hey, I clicked this button and it didn't work. So head on over to century@sentry.io. Use the coupon code at tasty treat all lowercase all one word, get two months for free. And find out why I use and love century myself and have for a long time. So let's get into it. Let's talk about headless CMS. What the heck is a headless CMS? Yeah, we - -5 -00:02:14,720 --> 00:03:38,130 -Wes Bos: get this question every now and then it's funny because we have sponsors. And we say they're a headless CMS. And we sometimes explain what it is. But like I thought we just dedicated an entire show to what a headless CMS is. So the whole term headless and software means that there is no no head, no visual front end to the thing that is you're working on. So we hear like headless chrome means that you can actually run a chrome instance via the command line without actually having to open up the entire GUI of Chrome and see the website from have it actually running, it would just sort of run in the background without a head, right. It's just like walking around without a head on. And a headless CMS is sort of the same idea where you have a back end where you can log into, and you can have all your different content types. And you can manage all of you can do all of your crud, just create, read, update and delete operations on your data. But there is no templating to that that whole system, like traditionally, we're used to like a, like a rail stack or server rendered node stack or something like that. And part of having that stack is the templating side where when you visit a URL, you go off and render the data. So a headless CMS doesn't have that website portion to it. It just spits out the data via an API. So that a good fair way to describe it. - -6 -00:03:38,430 --> 00:05:45,060 -Scott Tolinski: Yeah, I mean, headless front endless. Yeah, that I mean, I find it much less. Yeah, it's a CMS that spits out an API. And that's, you know, for the large part we're used to CMS is doing all the work for us, right, the CMS handles the front end of the site, as well as handling the data, the relations, that sort of thing. But I think some of the things that the CMS is do typically best is handled the data. And sure enough, some of the front end stuff is great. But I know specifically, in some systems like in Drupal, people will like go to great lengths to have all these plugins to avoid having to write any sort of PHP code. And they're using all these sort of visual editors and things like that. And I think this headless CMS is really the opposite approach of that is that instead of having to not worry about the front end at all, you're worrying much more about the front end and you're able to use anything, you might possibly want to give you a ton of freedom flexibility, to not be sort of stuck into these systems and stuck into how they're doing it. So let's talk about some examples here of headless CMS is, and I think one of the most commonly ways to use a headless CMS is to take WordPress, and those of you who don't know WordPress has by default, an API spitting out JSON. And so since WordPress by default hasn't JSON API set up with no additional work makes it really super simple to use. As the back end for a headless CMS, because all you have to do is connect to that API. And BINGO, BINGO, you now have what is a basically a back end service that can do all of the data relations. And all of these things. Not only that, but it's going to give your clients the interface they're known and familiar with for all of the hundreds of WordPress sites they probably seen before. And again, allows you to use any sort of front end. So one popular combination is WordPress, and Gatsby, it's one that I've used numerous times where Gatsby is a static site, that's going to be built from the data coming from your headless CMS. Now we're gonna get into the difference between live and static sites and a little bit, but this is just sort of one static option for the front end, and WordPress on the back end. - -7 -00:05:45,419 --> 00:07:01,560 -Wes Bos: A bunch of other examples that we have here, you could grab any hosted service that you have, obviously, we've had some sponsor of the podcast, Sanity is a sponsor, we've had contentful sponsor, there's other ones Netlify has a CMS, you can you can use pretty much any CMS that you are already using, they will likely have some sort of plugin or baked in, like WordPress has JSON API baked in, we're also going to have the creator of WP graph qL on the show just to talk about that, because that's a that's a huge spot. Also, like people have 1015 years worth of content in a WordPress, yeah, right. That would be a huge undertaking to move it to something that like might not be just as good and you have to retrain people. So like, it's totally fine just to keep your data in one of these systems. And then to do your front end. In Gatsby, you can do it in react, you could do it in in PHP, or cobalt or anything you want. Like, it doesn't have to be a JavaScript front end. And it also doesn't have to be a static site generator, it could be a dynamic thing, that on every request to it that in turn will make another request to your CMS, which you would have to do with the database anyways, pull back the data and then render it out. However it is that you want to display that data. - -8 -00:07:02,400 --> 00:07:53,160 -Scott Tolinski: Yeah, definitely. And I think you're even getting into some of the next section, which is like the whys. Why would you do this? What's the purpose of that? And I think you nailed it really quickly with? Well, all of your data might live somewhere. And who wants to migrate all of that data out of there? Sure. Now you can export it into two csvs. You can do all that stuff. But like, do you want to do that? I don't really want to do that. Wouldn't it be super cool. If you could use all these things and not have to do that it would be just by using the API instead of moving it to some other service. So again, I think that is a key point is that a lot of the times it's a legacy system, but people want to take advantage of all of the new cool things. And not just because they're new and cool, but because they're cool and new for a reason, because they do all these excellent things for you make JavaScript really just a first class citizen of your application there. So yeah, - -9 -00:07:53,220 --> 00:08:39,870 -Wes Bos: yeah, oh, we also have like the separation of concerns. So if you have all of your data in a CMS, that data can then be pulled into multiple places. So it's likely that you'll have like an app, a mobile app, maybe an iOS app and an Android app, and you have a website for whatever it is that you're working on, but maybe also have like a micro site that you're working on. That's like a totally different stack. And the idea here is that whoever is implementing the thing in whatever platform or whatever language is able to pull all of the data from a central spot. And you don't have to worry about like updating it in this CMS and then also in this CMS, as long as it spits out some sort of API at the end of the day, whether it's JSON API, whether it's graph qL, or maybe even XML, if you want to - -10 -00:08:40,080 --> 00:08:42,900 -Unknown: do that to yourself, whatever you want to do. Yeah, yeah. - -11 -00:08:44,910 --> 00:09:11,520 -Wes Bos: What other things, you can optimize a site for performance. So one of the huge benefits to a statically rendered site like something like Gatsby is that you get huge performance wins, and you don't have to hit the API, every single time that someone requests something, you just hit the API at build time, and then it renders the day out to static HTML with that data. And then that that goes into the next one, which Scott has here, which is security, right? That's huge security. - -12 -00:09:11,939 --> 00:10:14,730 -Scott Tolinski: Yeah. And the security is just an important one. Because I remember in the Drupal scene, like such a huge amount of effort was going into hiding the fact that your site was Drupal, because there's a whole bunch of not necessarily exploits in any of these systems. But the moment that you know, your attacker knows that you're on a WordPress site or a Drupal site, they're going to approach it very differently. And they're going to hit it with some WordPress specific attacks or some Drupal based attacks. But let's say your front end is entirely separated, your, you know, potential attacker is going to have no clue with the back end of your site is in and therefore because they have no clue. Unless, of course, you're giving them access to seeing that it's WordPress in some sort of way. And they're going to look at this thing and say, mmm hmm, not only do I not know where the back end lives necessarily without doing a little bit more work, but I don't even know what the back end Does or the attack, it just throws off potential attackers. And it's also going to throw off potential, like robots that are going to get in there and just look for some little hints and little hints and tricks and tasty treats to snack on and your site - -13 -00:10:16,830 --> 00:10:48,510 -Wes Bos: will probably get a lot of questions about like, what's the benefit and downside to a live site, which would hit your API on every single request, or you could put some sort of caching in there, if you like, and maybe expire those and regenerate them every single time versus a static generate. And that is the we did an entire episode on next gen versus Gatsby. And that just dives into really not even just next versus Gatsby but a dynamic website versus a statically rendered website. What are the pros and cons to each of those. So will will point you to that episode, if you want to know more? - -14 -00:10:48,900 --> 00:12:50,010 -Scott Tolinski: Yeah, definitely, I think just listening to that episode would be a better show isn't trying to recreate it in a mini form here. The next is going to be the how do you do this? Well, there are some considerations that you need to take, basically, and I think some of the hardest parts of the How are really wrapped around hosting because if you think about it, now you have a database, and you have a back end service and your front end service. And they're separate, right? You don't have the separation of concerns, but they're separate. So you need to host your back end somewhere. So the options would be to either host it as a service, or either I mean, not host as a service, but to use a service like content full sanity, or any of those, right? Or you're going to need a host for your database. So where are you going to host that database, if it's a static site, well, then you don't really need a high performing host, you can go host that on a shared Blue Host for two bucks a month, or whatever it is. And it's just seeing that API in generating at once. So the performance of your server is not really connected to the performance of your front end. So there's a little bit of a cool thing there. But you do need to consider that you do need to have a host. Now what about the front end? Well, you also need to host your front end somewhere. And this is for production specifically, because in development, all this stuff's going to be local, you're running at a local, you're connecting a local whatever, but in production, your friend and also has to live somewhere. So again, you could potentially keep it on the same host and do a bunch of server side stuff, not server side stuff, but server configuration to get both your API and your front end up and running on the same server. Or you can defer to a service that specializes in this sort of thing you can use. Now as a host, you could use Netlify as a host. And those are going to be specialized hosts that specialize in hosting front end software. I'm personally a fan of using Netlify. And for like a really cheap option. What I've gone and done is I do like a Bluehost. For I know, West isn't a fan of Bluehost. But I use the host because it's cheap for hosting WordPress, JSON APIs. And then I use Netlify, for hosting all my front end code. That's just how I do it. - -15 -00:12:50,340 --> 00:13:53,730 -Wes Bos: Yeah, yeah, it's it's not the simplest thing out there. And you can certainly like write proxies that could host both of them on a like a digitalocean. droplet, you could save yourself an extra five bucks a month. But then you also have to manage an nginx server and you've got SSL certs that you need to renew yourself or set up a cron job to do that yourself. So in the simplicity, that is having a headless CMS, there definitely is a lot more overhead in terms of having to manage two things at once and learn where to host them and, and whatnot. So I definitely think that headless CMS is a good idea. Definitely something worth building a website on and seeing if it's a specific if it's good for you, and if it meets your your use case. Because at the end of the day, I think a lot of us are moving to building these websites or apps in JavaScript frameworks anyways. So if that's the case, you do need to have some sort of API to pull your data from. So it would be worth looking into some of the different headless CMS 's that are out there. Work. - -16 -00:13:53,940 --> 00:15:36,090 -Scott Tolinski: Yeah, that's really good. It's one of those things that like in the headless CMS space, it gives you so much freedom and in a lot of different options, right, you can use view, you can use react, you can create some really great interactive things. But at the end of the day, it does add a layer of complexity. So if you are budgeting time and trying to figure out keep in mind that you will need to budget time for that additional layer of complexity because it exists. And once you are new to the game, sort of it's going to take extra long your first time, and it's really easy to look at it and say, Hmm, you know, why am I doing it this way? Why, why can't I just go back to the way I was doing it before, and then you might want to give up and just go back to the straight up WordPress, whatever way of doing it before but a lot like things like coming from jQuery to react, you're going to really notice the benefit the second third time around when you're really building something totally interactive. I had a client who was they needed this slideshow and this slideshow was like, supreme being like, this thing was wild. It was sort of had a lot of different things and it's not like a I could just take a existing slideshow and modify it specifically in WordPress, I feel like that would have been a nightmare, I would have needed like a jQuery plugin, and then I would have needed to modify the jQuery plugin, or just write it from scratch. And so it seemed like to me that the headless was the best option. I wrote the slideshow in like, two hours in an afternoon when it would have probably taken me a few days in any other sort of way. So once you get really comfortable and see the benefits there, there is different, you know, I'm not going to act like it's all a rose garden here, but it well, it is a rose garden, other sense that there are some thorns that you need to watch out. - -17 -00:15:37,530 --> 00:15:38,820 -Unknown: That's a that's good. - -18 -00:15:39,150 --> 00:15:50,730 -Scott Tolinski: Yes. So maybe it is a rose garden. And it's beautiful, but at the same time, thorny. Who knows? Cool. Yeah, I don't really have anything else to add any other metaphors to try to shoehorn in here? No, - -19 -00:15:50,760 --> 00:16:21,000 -Wes Bos: I think that's it. If you are running on the headless CMS specific, I'd love to hear like different types of applications, because he always got like, you have like a personal website, you have a micro site, you have a like a marketing website, you have your full blown content website, you have e commerce, there's all kinds of things that could happen with a headless CMS. And there's certainly no shortage of companies that are trying to provide services in that as well. So let us know what you're using a twist at syntax FM, via case to hear what you're using. - -20 -00:16:21,329 --> 00:16:21,870 -Unknown: Yeah. And - -21 -00:16:21,959 --> 00:16:51,960 -Scott Tolinski: specifically, I want to hear about API's to like how you are connecting with your API's. Are you connecting with graph qL? Are you connecting with the rest? Are you are you connecting with graph qL? Through Gatsby specifically, or something else like WP graph qL to serve a graph qL API directly from WordPress, I'm really interested to hear what kind of things people are using in this space, because there's a lot of possibilities. There's a lot of open ground to use all sorts of different stuff. So again, let us know what you're using. We want to hear all about it. - -22 -00:16:52,590 --> 00:16:57,630 -Wes Bos: Alright, that's it for today. Thanks for tuning in. We'll catch on Wednesday. Dude, please - -23 -00:16:59,520 --> 00:17:02,100 -Scott Tolinski: head on over to syntax.fm for a full - -24 -00:17:02,100 --> 00:17:09,300 -Unknown: archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax158.srt b/transcripts/Syntax158.srt deleted file mode 100644 index b5261bc7f..000000000 --- a/transcripts/Syntax158.srt +++ /dev/null @@ -1,540 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:10,590 -Unknown: the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. - -3 -00:00:10,619 --> 00:00:21,030 -Wes Bos: Welcome to syntax, the podcast with the tastiest, the yummiest most delicious treats on web development around. - -4 -00:00:22,019 --> 00:00:22,530 -Unknown: Yeah. - -5 -00:00:23,099 --> 00:01:06,420 -Wes Bos: Today we're gonna be talking about the fundamentals, we're sort of kicking off this new series of tasty treats that is talking about what are the fundamentals like, what do you need to know, before or during getting into interviewing, getting into picking up frameworks like like, what is it worth knowing? And at a bare minimum, before you dive into these things, as we'll talk about in a second, but like we are always talking about, like, the fundamentals are so important, and it's kind of an interesting place. So we're gonna try to distill what are the fundamentals today of HTML, CSS, and then we've got some other topics, obviously, JavaScript, and maybe server side, maybe, maybe some design stuff. So talk about that with Mr. szalinski. How are you doing today? - -6 -00:01:06,899 --> 00:01:25,320 -Scott Tolinski: I'm all over the place, man. We just recorded an episode a minute ago. And it was like double talking. And yeah, so I am still getting into my routine here with her new baby. And yeah, I'm just, I'm just I'm ready to go. But I'm holding on for dear life right now. So yeah, - -7 -00:01:25,380 --> 00:01:30,660 -Wes Bos: I'm enjoying our my good sleeps until ours comes, which could happen any day now. - -8 -00:01:30,690 --> 00:01:31,830 -Scott Tolinski: Yeah, good luck. - -9 -00:01:31,830 --> 00:03:23,639 -Wes Bos: Yeah, thank you. So we are sponsored by two awesome companies today. First one is century's going to do all of your error and exception tracking logging information about what happened, as well as Freshbooks, which is cloud accounting software for small businesses, freelancers, anybody that's got to charge some money and get paid. So let's, I thought I would just sort of like, talk about it real quick. On Friday, I tweeted this thing out, I tweeted a screenshot to a Reddit thread, or somebody said, just an observation. I've been interviewing candidates for a web dev position, a serious lack of knowledge in HTML and CSS. I feel like a lot of up and comers are rushing to cool frameworks react to the Angular, whoever, when tested on building a simple landing page, they fail out, I fell down this hole before, it's good for you to make sure that you have some solid understanding building blocks. And then it goes on to list some of the what he thinks are, are helpful. And I kind of like this thread, because obviously, it's somebody who is actually hiring people, like I'm looking to hire someone and I want to, and it's sort of like a little pitfall there. So when people see this kind of thing, we all start chanting like, the fundamentals are important. The fundamentals are important. I'm sure I've said it a million times myself. And I absolutely agree. But at a certain point, like you also, like I understand why people are rushing into frameworks, because that's what people are hiring for. And you can't just sit around, like learning the fundamentals and doing this like five year journey to really nail the fundamentals like you got to get into it. And quite honestly, I didn't start with the fundamentals. I started with trying to like, shoehorn a jQuery plugin into a WordPress theme that I didn't build either of and then I sort of backpedal then I wish I had done. What about you, Scott, did you learn the fundamentals first? - -10 -00:03:23,880 --> 00:05:09,870 -Scott Tolinski: No, yeah, no, I didn't. But I learned them. And that's what's important is that you have to treat them with some degree of well, not some degree, you have to treat them with absolute importance, but at the same time, don't treat is like the only thing I like to think about this in in breaking, we always used to say, without a good foundation, your house will fall down in terms of like so I for those of you don't know, I've been breaking or breakdancing for a long time. And the fundamentals and breaking are like musicality related, you're sort of dancing. You're doing maybe the footwork stuff where you're sort of running around on the floor, that stuff. And for people who come into breakdancing, they didn't watch that stuff. And we're like, well, that's why I want to learn breaking. No, they watch somebody spin on their head. And they're like, that's super cool. Like, wouldn't it be cool if I could do that? And so yeah, some instructors would like scare people away, because they would say, okay, you want to learn how to spin your head? Well, you need to spend two years just dancing without even touching the floor. And like, that's not why they're here. They're here to learn the fun stuff. And the fundamentals aren't always the fun stuff. And so no, regardless of what you're going to do, like you're gonna say, well just make learning the fundamentals fun. We'll put some games behind it, like people have fun when they get into building stuff, and when they see wins, and they see progress, and you're not going to see progress, just memorizing a bunch of syntax and names for things. And so the point here isn't that you should ignore the fundamentals. The point is, is that you need to learn the fundamentals. But at the same time, you need to get your hands dirty, you need to learn a little bit, but we want to talk and we want to do our very best to make learning so These fundamentals of fun in this episode is the best we can or at least give you an idea about what these fundamentals are in terms of CSS and HTML specifically. - -11 -00:05:09,870 --> 00:05:42,000 -Wes Bos: Mm hmm. And I there's I was just reading through all the replies, obviously, people have opinions all over the place on this sort of thing. And people are saying like, like, why do you need to know the fundamentals? I never used them. I only use this like, angular framework for doing this specific one was I just use Angular for media queries. I don't write them by hand. I just use this like Angular framework in that. And I think that's, that's fine to use that. And I bet that you could probably figure it out once you fall back. But there's a sweet by john Philip, - -12 -00:05:42,000 --> 00:07:49,500 -Scott Tolinski: I'm gonna butcher it ready. Cheerios, serious. s IR II s, he says abstractions work well until they fail. And then you have to debug them. knowledge of the core fundamentals of web is kind of a big deal. And I agree, because often I see people, why is bootstrap doing this? Have you ever like, Wes, I'm having trouble with this, like, very specific WordPress theme. Yeah. And that's all I only know how to build stuff on this like, Child Theme subset of a very specific thing. And great, you're probably doing really well in your thing. And I definitely think that you should double down on being a specialist in that. But when things break, you definitely need to know how, like a little bit of PHP works. So you definitely no need to know how the how like media queries work under the hood, so that you can debug it, and not just say, Why is my abstraction here not working? Yeah. And you see this all the time, with people asking for help when they're just getting into some of this stuff. And they want to ask for help first about like, Hey, I use this ID all over my website to do some styling, I use this one ID and now things are behaving badly, or the specificity of CSS getting in the way of why is this thing being overwritten or whatever. Again, we're gonna be talking about so many of these things in this episode. But really, the like you mentioned, the fundamentals really come into play here, not only when you have to debug, but when those tools that you're used to using aren't there anymore, either, you know, Angular is not always going to be here, and some other system will be. And if you understand what the core functionality behind everything is, you're never going to feel like you're lost with any of this stuff, you're going to know exactly what to do. And really the most important fundamentals in my mind, in front end web development, flat out period, the most important ones are HTML and CSS, because the entire web is written on HTML and CSS. It's been that way for a long time, and will continue to be that way. And I know, you know, you got CSS and j. s, we got j s, right and everything. But JSX is still HTML in a lot of ways. So you got HTML, you got to know semantics. Well, at the - -13 -00:07:49,500 --> 00:08:33,690 -Wes Bos: end of the day, if it's just outputting, HTML and CSS and something goes wrong, you need to understand how it's working. Right? So let's maybe jump into like, what are the the fundamentals HTML is pretty, pretty simple, I think, semantic markup, knowing what all of the HTML elements are, what they're used for. And like, in some cases, they're they're meaningful, like h1 through h6 tag is meaningful. The like, a birth, the abbreviation tag, there's the paragraph tag, those are very meaningful. And then in some cases, they're they're not all that meaningful, like a div, like what is a div? Right? Like, what is it for? And sort of like understanding what the what the difference is between those two? And why would you ever use a div something like that. - -14 -00:08:33,720 --> 00:08:43,909 -Scott Tolinski: But there's also meaning in the meaninglessness of a dip, write the fact that a div is meaningless, yes, is inherently meaningful. It's got it, - -15 -00:08:43,950 --> 00:08:50,580 -Wes Bos: it means a lot that it is meaningless. It's like the whole null in JavaScript, it is a value of nothing. - -16 -00:08:51,049 --> 00:09:13,399 -Scott Tolinski: Right? Right. It has no semantic meaning. And it's important that you need to know when you need to use something that has semantic meaning versus when you don't aka a section aside, any of those things that you replace an article that you replace will typically would have been a div, the main tag, remember when we got the main tag that was pretty sweet, no more divs with an ID of main. Now, that's the main tag. - -17 -00:09:14,850 --> 00:09:53,370 -Wes Bos: Along with that is accessibility basics. I think that this is sort of underrated. And even in my own JavaScript course that I'm doing right now is, there's two things that I'm making sure, is going to be included in my JavaScript course. It's a security and accessibility because like, these are things that should be known up front rather than sort of look back on later, we did an entire show on accessibility. Just going into like, what are the things that you need to know about to in order to to make sure that you're not like, accidentally being a jerk to somebody on your website who has a disability or someone who just in general, making a good website? - -18 -00:09:53,779 --> 00:10:42,919 -Scott Tolinski: Yeah, yeah. So um, let's get into some of the attributes that you have on a HTML elements. First and foremost is the one that you see all the time is ID. And Id is most frequently misused by using multiple IDs that are the same aka, you have a div, that's the main ID. And then you have another div. That's the main ID, then maybe add another one all on the same page. And you know, what an ID is for it's for an identification of a specific thing. So when you give things more than one things, the same ID, you're sort of saying all these things are the exact same thing, which isn't correct, right? Well, an ID should be a unique thing that is only applied to one thing on the page. And that is that same thing every single time. - -19 -00:10:43,350 --> 00:11:38,039 -Wes Bos: I also have a bunch of like class related ones here for name and action. These things make even if you are doing your forms in JavaScript, the foreign name and action attributes of a form tag, knowing what they do how you associate labels with inputs, what happens when you submit it, all those things, they make even a form submission in JavaScript, I think, much easier. Like I'm very big on using the just like regular HTML attributes in my JavaScript, as well as using Aria attributes for my CSS, rather than adding a class of current or something, or adding a class of like, highlighted or something like that. Just go and grab whatever the equivalent Aria one is, and then use that to actually style this thing thing, because then you're killing two birds with one stone, you're making it accessible. And then you don't have to manage these like weird classes of like, highlight or whatever. - -20 -00:11:38,490 --> 00:13:21,390 -Scott Tolinski: Yeah, yeah. And that's a really, that's an interesting thing that I think is lost on a lot of newer people that they may not even know that you can use those to target an item in CSS. And so they might think they might reach for a class right away. And a class is one of those things that we use, mostly just to use just to assign CSS. And so that's just another one of these huge foundational elements is a class no classes, unlike IDs can be used all over the place. And the classes are really just your denoting that something what it is, and you can use that class as a select door, as we'll get in with a selector is in the next section in your CSS to identify some visual attributes to this thing. Okay, so I, you know, the HTML side of thing, it seems like there's not a whole ton here, right? You have accessibility, you have attributes do semantics, but each one of those categories is pretty deep, pretty deep. Well, I mean, specifically, you could spend probably an entire 30 minute episode talking about form HTML form best practices, because forms are difficult in HTML, and you got to know how everything sort of works and functions in it should be done. So that you're building an assessable form, you're building a form that can be used by everybody. And you're building a form that is just well structured, and, you know, just correct. But HTML overall, is like that. If you're using the right semantic templates and rights, right, semantic tags and, and all those things, you you're inherently starting to build a more accessible website, for screen readers for things that utilize and use those semantics the way they're designed to be used. - -21 -00:13:21,450 --> 00:14:20,909 -Wes Bos: You know, it's one thing that drives me nuts, when we're talking about ideas here is people think like IDs are bad. And so they never use an ID anywhere, because classes can be reusable. And often I get this when I'm trying to link somebody to like a paragraph that's partway down through a page. And I was like, Oh, I bet this like, I bet this h2 tag has an ID because if you put a hash in the URL bar and given an ID, the browser will automatically just jump down to the element with that ID. If your heading tags don't have those IDs, then you can't link to somebody that's partway down the page. And I find that really frustrating. And it's probably even accessibility thing where you're just like, let me give somebody context into this issue. And it's not possible to to scroll partway down the page. So always give or not always, but if you have the option of especially like a WordPress or Gatsby, there's plugins that will do this, they'll just automatically generate IDs for you. That's a huge win and such an easy thing to turn on. - -22 -00:14:21,270 --> 00:14:34,620 -Scott Tolinski: Word. Cool. Before we get into a fresh section of this podcast, we should take some time to talk about our sponsor fresh books, ah, wow, after a non bad transitionary go followed up with an actual transition. - -23 -00:14:34,860 --> 00:15:53,250 -Wes Bos: So one little feature of Freshbooks that I want to sort of feature here is the the time tracking thing. So like Freshbooks obviously can get invoices and expenses and things like that. But like just one part of what Freshbooks does is you can do time tracking. So if you've got a whole bunch of clients and you're sort of jumping around between them, it can be easy to forget what you've done and it can be easily easy to like forget that you forget to build a client for specific Avik hours I've done that myself, or you just sort of say like, how much did I do like two weeks ago. And that's not really fair to your client either. So freshbooks, the mobile app has a sort of a client and project timer on it, you can turn on and off. Depending on what you're working, you have different rates for different types of stuff. So if you have a different rate for like design versus Dev, you can you can charge different ones. I always used it just to write exactly what I had done so that when I submitted my hours, at the end of the week, the person who had hired me be able to quickly look at what what I've been actually doing, it makes them feel confident like this money is not going to waste. So check it out@freshbooks.com forward slash syntax that's going to get you a 30 day unrestricted free trial. And tell us it makes sure you use syntax, and how did you hear about a section that will keep them sponsoring this show? Thanks so much to fresh books for sponsoring. Cool, cool, so - -24 -00:15:53,250 --> 00:16:15,000 -Scott Tolinski: let's get into everybody's favorite foundational topic. And actually, to be honest, this is my personal favorite. That wasn't being facetious there was CSS. And I think, honestly, there's a lot of here in terms of CSS. But one of the things that is one of the most foundational elements of CSS, besides the syntax is specificity. Right? - -25 -00:16:15,240 --> 00:16:16,529 -Wes Bos: specificity? - -26 -00:16:16,799 --> 00:16:21,570 -Unknown: Yeah. And did you notice that I said it correctly? And correctly all the time? So spec? - -27 -00:16:21,600 --> 00:16:23,279 -Wes Bos: specificity, specificity? No, - -28 -00:16:23,299 --> 00:16:26,220 -Unknown: no? I Are you actually I got - -29 -00:16:29,730 --> 00:16:32,490 -Wes Bos: it and no, ternary? ternary? I - -30 -00:16:32,490 --> 00:16:38,429 -Scott Tolinski: can't say it. I don't believe you anymore. So really don't believe you say? - -31 -00:16:39,899 --> 00:16:44,820 -Wes Bos: specificity. specificity. Hmm, yeah, that's already there. Scott, - -32 -00:16:45,360 --> 00:16:59,730 -Scott Tolinski: somebody told me the city part, you got to say city specific city spend that best really, it really, for me, it opened the door, it was like here's the bank vault, it's wide open. Now you get to say specificity for the for the for the - -33 -00:16:59,730 --> 00:17:01,200 -Wes Bos: what is like a fifth city. - -34 -00:17:04,410 --> 00:17:53,160 -Scott Tolinski: So this is a which the order in which CSS properties and in design component things are applied design component things, though, the way that the visual components are applied to your elements. And so specificity follows basically a little bit of a pattern here in terms of order of operations, because what happens is, is that people will have a class name something, and they'll target it with the class and say, all right, this is good, the color of red, and then they'll also have an ID on that thing. And maybe they have color of blue on the idea. And they'll be like, why isn't this thing red? What's going on here? Because different topics and different selectors in CSS have different levels of specificity? Do you want to get into some of those levels? - -35 -00:17:53,550 --> 00:17:57,450 -Wes Bos: I honestly don't even know what they are off the top of my head, I know that. - -36 -00:17:57,830 --> 00:17:59,010 -Unknown: It's fundamental is man - -37 -00:17:59,040 --> 00:19:00,830 -Wes Bos: what I think like like, in my mind, I know that like, you have an element selector. And then you have something with a class, you have something of multiple classes and you have something with an ID. And then also depending on like, where they are, are they in line? Are they in a style tag? Are they in a CSS file? If there's something with the same specificity does one come later? It just sort of having a general idea of like, like, anytime someone posts one of those quizzes on like, which one is more specific, and they post like this really up to slicker, I always get it right. I don't know what the rules are under the hood. I know that like a class gives it like a one point and like an ID gives the two points or something like that. But as a general rule of thumb, I know that I can like look at a selector and understand which one will be applied and unapplied. And then also, if you're running into like specific Edie issues, facility issues, you know that you're probably writing some terrible drivers or some terrible CSS, and you need to sort of reevaluate why your selectors are looking like that. - -38 -00:19:01,440 --> 00:19:04,170 -Scott Tolinski: Oh, my God, I really can't tell. - -39 -00:19:04,260 --> 00:19:09,930 -Unknown: I can't Oh, man. It's a it's a disease. specificity. - -40 -00:19:10,310 --> 00:19:14,640 -Scott Tolinski: It's a spesa. fizzy, specificed disease. - -41 -00:19:15,800 --> 00:19:17,820 -Unknown: Do you know the rules? Well, I - -42 -00:19:17,820 --> 00:20:03,150 -Scott Tolinski: don't know the whole point system out of hand. But I know that, you know, an ID is going to override a class. Yeah, important is going to override an ID is an element like if you're going to say h1 has the color of red, that's the least specific than a class is going to be more specific. So an h1 with a class of something, an h1 with an ID of something is going to be even more specific. And then styling directly inline styles is going to be more specific if you're just applying the style directly to the element in HTML. And then you have the important tag Lastly, which is on top of everything, with the exception being if you have another Important targeting the exact same thing further down in your code, you - -43 -00:20:03,150 --> 00:20:07,100 -Wes Bos: have a more specific important tag selector. Right? - -44 -00:20:07,170 --> 00:20:43,550 -Scott Tolinski: Well, in that I really highlight something, you know, the important tag really should not be used often, like the only time you should be using the important tag is if you're overriding some foreign CSS that's coming in from like a library, and you're only doing that and maybe one spot, it shouldn't be used for anything global. It shouldn't be used for anything. Important tags overall, like my rule of thumb is do not use important tags. Now, you could tell me, I'm wrong about that. I don't, I don't really care. I personally have my own personal rule, do not use important tags. Because they, they do nothing but hurt feelings and cause problems down the line. Yeah, yeah, - -45 -00:20:43,580 --> 00:21:02,790 -Wes Bos: that's, that's like a last ditch effort to throw it on there. I've definitely been there. I have it in one of my courses where I think it's my CSS Grid course. I'm like, screw it. I just threw an important on it, because I couldn't figure it out. And everybody knows that cuz they're like, Oh, it's good to hear that you do. That's a Friday afternoon. 4:45pm fix? - -46 -00:21:02,969 --> 00:22:33,240 -Scott Tolinski: Yeah, I don't use it. But I can't I've been on code. When I was a junior Dev, when I first got my like coding job, you know, you're a junior Dev, you get all the projects that none of the other people want to work on at an agency. It's like, all right, you We can now pass off all the ones that we've been trying to get rid of onto the new guy. And like one of them was just awful in terms of CSS, because it had been passed around for different devs for maybe like five or six years. And the thing was all flat HTML files. But it was almost like you couldn't write a single property in HTML without using an important tag. Because someone had used an important tag at some point down the line, and then patched and patched and patched. And then you're just like, Well, I have to write like important is just become a part of the syntax for this website, because that's the only way this CSS is getting applied. And can you imagine looking at that CSS that's like six years old and being like, let's rewrite this did not break anything that would not happen. So part of the CSS specificity, fundamental learnings things. The reason why it's important to understand the specificity overall with CSS or even the CSS fundamentals is because the longer and longer you take to apply good foundational fundamentals on your CSS, the longer you take, the worse your CSS is going to get. And the tremendous tremendously almost monumental task it will be to rip it out at some other time. Yeah, I can do it. You will hate your life. Yeah, - -47 -00:22:33,269 --> 00:23:27,330 -Wes Bos: yeah. Been there. And we only know that from experience where like, you go into something too big without spending a little bit of time on learning it. Next one we have here is selectors. So knowing you don't have to know all of the different I think there's like probably, like 15 different ways to write selectors. You've got class selectors, and element selectors and descendant selectors and direct descendant selectors and sibling selectors and future selectors and attribute selector. So like, you probably don't need to know absolutely all of them. But I would definitely say class selectors, Id selectors, descendant direct descendant, did I say attribute selectors things like, like Aria dash, I don't even know what they are right now. I just I look them up every time I need them. But like Aria dash open or Aria dash selected, and and just things like disabled selectors. So knowing how attribute selectors work can definitely be handy. Yeah, - -48 -00:23:27,330 --> 00:23:51,030 -Scott Tolinski: super handy. Yeah, I think it's funny because the word selector might scare people, but selector, you're just selecting something, you saying, Hey, I'm gonna have to go pick something. And in knowing those foundational terms, those syntactical terms like selectors, I think that's an important thing to have. But if you dive into saying, hey, use selectors before you're talking about what a selector even is, then, I think, - -49 -00:23:51,030 --> 00:24:17,940 -Wes Bos: or why you need to so that's, that's another issue that we have. I'm doing that with my JavaScript course right now. Like you often have to pedal back in and not just show somebody like what a variable is, or what something I can't think of an example right now. But like, often have to pedal back and say, like, this is why we need to learn this and not just this is this thing. And because people don't learn well, and they don't understand, like, why do I need to use something? Yeah, - -50 -00:24:18,060 --> 00:26:25,830 -Scott Tolinski: yeah, definitely. And I think that goes a lot of time for jargon. People want to get into jargon. There are syntactical names for things before they understand why they need them, or why they need to know what the heck they are. But selectors just like properties and any of those other things in CSS, there are terms you're going to want to need to know. So that when people like Wes and I are saying the word selector you actually know or talking about it, rather than just like, Oh, yeah, that's CSS selector. I think. So in modern CSS, this has changed quite a bit between using these new tools. But I think the next thing is going to be foundational understanding of setting up layouts. And now layouts. There's a lot of stuff that goes into layouts and some of this stuff is is very closely related to me. Every out there topic that we're going to be talking about for the rest of this episode here. But in 2019, we have more options for layouts in CSS than we've ever had before. When I started web dev, it was pretty much, okay, you have percentage based units, and you have floats. So Oh, and tables, you have tables too. So good luck making a layout, you can float things, but you need to clear fix them, you can use a table, but you should never have done that anyways. And that those were the options. But now in 2019, we have Flexbox, and grid, and Flexbox. And grid, to me make way more sense than floating with a layout ever did because with floats, like I mentioned, it takes something out of the flow of the documents, they have to clear fix, you have to change the height, or you have to allow the height of its parent container to reset, like, the nightmare caveats that you have to teach somebody who doesn't even know what the heck they're doing. And you wonder why people hate CSS because of things like this. But with Flexbox, and grid, you're basically just saying, Hey, this is how this stuff should work, here's a flex container, the items that are gonna flex, here's a great container, the items in it are going to adhere to this grid that you're designing. And to me, a layout in 2019 is one of those things that the foundational elements of layout and CSS is just infinitely more friendly to new developers and people learning the foundation. - -51 -00:26:26,130 --> 00:27:29,130 -Wes Bos: Yeah, and so I think you should know part of the fundamentals, you should know how to do basic layouts in in Flexbox. And grid, you don't need to go into the the super nitty gritty of nested grids, and future will have sub grid and, and like, I don't know, like What the What's the repeat autofit min max, like all the intricacies of that. But like a basic grid of putting a couple elements beside each other, maybe maybe changing them at a at a breakpoint. I think that that's probably good enough for your fundamentals, anything more than that you'll pick up when you need it, it goes through my course or whatever, if you need it, but it's not something that is totally necessary, because I think like the easiest 20% of Flexbox. And grid is what I use almost like 80% of the time. And then all of that sort of edge Casey stuff like custom layouts. Yeah, wrapping and changing the going from row two column to row reverse and Flexbox. All of that stuff is like I may be used a couple times a year. So just knowing the basics of it and not sweating, the the the nitty gritty of it. Yeah, - -52 -00:27:29,340 --> 00:28:33,900 -Scott Tolinski: yeah, definitely. It's like one of those things, look it up when you need it, learn the basics, learn, learn why they exist, and how to use them. But don't don't memorize all of the little properties. You don't need to memorize all of the properties. A lot of the memorization that happens with some of these things just happens over time anyways, you can make flashcards for yourself and learn these things. But to be honest, I think you'll probably learn it faster, the more you try it and use it. Next up we have is the box model, which is really one of the most important parts of CSS is understanding that everything you have sort of follows this model of a box, you have a box, and how the spacing, padding margin borders, all the things related to that box, how they affect the size of that box is the box model. And so this is a concept that I think people maybe ignore when they're first learning sometimes, you know, not saying all the time, sometimes people ignore this when they're first learning. And they maybe give something a width and they give it a border, and they don't understand why the results are what they are. And, - -53 -00:28:34,380 --> 00:28:34,890 -Unknown: yeah, - -54 -00:28:34,890 --> 00:29:05,550 -Scott Tolinski: I think the box model is the easiest to be understood by looking at a picture. And one of the coolest things that we have for us in our browser tools is if you inspect any element, and you look at the styles tab down here at the bottom, right or however yours are set up shape at the bottom right is going to be a nice little graph graph on a diagram is a better word, have a box, and you're going to see the width of the thing. You're going to see the padding the margins, the border, and you're going to see how all of those affect the actual shape of that box. - -55 -00:29:05,880 --> 00:29:13,470 -Wes Bos: Yeah, I think like between understanding the box model and understanding positioning, I think I had the most enlightenment and ncss because - -56 -00:29:13,470 --> 00:29:15,390 -Scott Tolinski: block in mind block two. - -57 -00:29:15,780 --> 00:30:14,070 -Wes Bos: Yeah, that's Yeah, that's true as well, because oh, frustrating when you can't get it to freaking go where you want it to go or like, like, why does the 60 and 40% thing not line up together? They're they add up to 100. Right. And there's all these sort of like, little gotchas. And then some projects, almost all projects will use border box sizing border box now. Yeah, but you may be in a interview question where they don't give you that or something like that. That's kind of like a sneaky interview question. I think someone might throw your way. And I don't honestly, I don't think it's that difficult to understand, you know, that you've, you have an element. It's maybe 500 pixels, and that element might have padding, it might have border and it might have margin, and the question is do those things padding border and margin, do they make the box bigger? Or do they eat into the 500 pixels of that box? And that depends on what your border box is set to. In your CSS. It's pretty simple. Do a couple examples. And you'll have it down pat. - -58 -00:30:14,430 --> 00:30:45,750 -Scott Tolinski: Yeah. Yeah, border box for life, as you have written in here ever since there was like that Paul Irish post way back when he was like, This is border box. And this is why I use it. And here's the little snippet data to your site. I think that might have been one of the greatest days in my web development. Because I suddenly did not have any more issues with the border box functioning the way that I would have expected it. It's like, border box. Like so many CSS woes for beginners have been solved if border box was the default out of the box. - -59 -00:30:46,050 --> 00:31:07,410 -Wes Bos: We should do like kids these days. You know that there's like that meme. Like some of y'all have never coded. Some of y'all never coded regular border box. And it shows you know that like, we should do like a whole episode of like, like y'all taking your web fonts for for granted. It was just like things the olden days of web development, - -60 -00:31:07,410 --> 00:31:10,800 -Unknown: and how the heck a coupon was? Yeah. - -61 -00:31:12,810 --> 00:31:30,960 -Wes Bos: That would be a great show, we put that on the list. If you I know, like a lot of people listening, I've been delving for over 10 years. So if you have some of those things that you used to have to do that were so painful, tweet us at syntax FM and at West Boston, slmc. Because we will put a whole show together of those funny things. - -62 -00:31:30,990 --> 00:32:43,610 -Scott Tolinski: Yeah, painful CSS, I'm all about it all about it. I'm also all about one of our sponsors, which Wes and I have both been using for a long time, which is sentry@sentry.io. Now, Sentry is going to be the place where you can track all of your errors and exceptions. If you're writing some code, your user does this thing and it breaks your site will century is going to lock it for you. They're going to categorize it well. They're going to catalog it, categorize it, you can categorize it, by your release or by the operating system, you can see exactly all of that sweet, sweet information that you need to know to solve these bugs. So if you write any code that is being used by any number of people, notice how I'm using the word any, it's really going to be one of those things that is going to save your butt constantly allow you to solve all of the bugs allow you to give you that sweet information, which without having to email your customer who reported the bug and say, Excuse me, but what browser Are you on because this is going to let you know exactly what browser they were on. And it's gonna allow you to solve that problem. So head on over to century@century.io use the coupon code tasty treat all lowercase all one word and you will get two months for free I highly recommend checking it out century@sentry.io thank you so much to century for sponsoring this episode of syntax talking about the fundamentals here. - -63 -00:32:43,920 --> 00:33:12,060 -Wes Bos: Next we have a as part of the fundamentals one thing absolutely have to nail and understand how it works is positioning so a lot of the comments in this Twitter thread were saying like we see new developers abusing are using position absolute way too much as it's kind of hard to understand like you know if you have trouble top right bottom left, as is by the way trouble. We did like a what was the one you had never eat shredded? We - -64 -00:33:12,420 --> 00:33:22,140 -Unknown: know I said it was clockwise. Clockwise. Yeah. What is what was that one wild concept? You have a clock these millennials - -65 -00:33:22,500 --> 00:33:27,600 -Scott Tolinski: these days they never read a clock was never Yeah, read by analog clock. True. - -66 -00:33:27,660 --> 00:33:34,800 -Wes Bos: Anyways, we had it. We had a poll on Twitter. Let me pull it up here. Real quick, just so I can bask in the sweet. No, - -67 -00:33:34,800 --> 00:33:41,670 -Scott Tolinski: you didn't. You won. I was winning this poll the whole time. I really feel like you gain this if you're you're winning now. - -68 -00:33:42,110 --> 00:33:46,530 -Wes Bos: Oh, damn, I just pulled it up. And I did lose. I thought it was I thought I won that one. - -69 -00:33:47,010 --> 00:33:51,150 -Unknown: Of course you did win because people are familiar with clocks. No. - -70 -00:33:51,480 --> 00:33:55,620 -Scott Tolinski: Didn't you even try to gain that? What was the question that you ask? Let's read the question out. - -71 -00:33:55,620 --> 00:34:39,330 -Wes Bos: I said CSS shorthand question mark. So we're referring to when you have shorthand, and you do look up something like a margin or something like that. It goes top right, bottom left, and I always remember that by saying stay out of trouble tr bl. And 54% of you said trouble was correct. 5% of you did never eat shredded wheat, which is like a compass and 50% of you did clockwise. Yeah. So clockwise is dumb. Yeah, it's clocks anymore. Yeah, it's the coming generation Scott. They're not going to know what clockwise is I always myself, I have to when someone says clockwise, I have to just like sit there with my finger and pretend it's a clock. - -72 -00:34:41,480 --> 00:34:43,170 -Unknown: I actually can't tell you that. - -73 -00:34:46,529 --> 00:34:55,730 -Scott Tolinski: I like to pull out and personally I like to pull up my sundial and I like to let the sun come down and wait half an hour and see which direction it went that way. - -74 -00:34:56,040 --> 00:35:32,960 -Wes Bos: So out of touch. Anyways, what we're talking about Listening, it's hard, it's hard to know how to position something. If you've got like a div inside of another div and that parent is relative and you position absolute mouth thing, are you fixed and relative. So knowing how positioning works in relation to its parents and what their position are, is, is a hard thing to get. And I definitely think that, regardless of whatever framework you're using, you're going to need to learn how to use this because I don't think there are any tricks for for getting this to work. So understanding positioning a huge fundamental you should spend some time on. - -75 -00:35:33,300 --> 00:35:37,710 -Scott Tolinski: Yeah, what is absolute relative fixed? And now we have sticky? - -76 -00:35:37,710 --> 00:35:38,940 -Unknown: Yeah, - -77 -00:35:38,940 --> 00:35:56,250 -Scott Tolinski: I thought I'd sticky kind of hard to use. I use it though. We're listening on the syntax side, I use it personally. But sticky is one of those ones that I've, you know, I think people have wanted for a long time, and I'm happy to have it. So yeah, positioning. I think people, we should throw static on here, too. Oh, because - -78 -00:35:56,880 --> 00:35:59,130 -Wes Bos: I didn't even say oh, that's like the default. - -79 -00:35:59,190 --> 00:37:09,900 -Scott Tolinski: Yeah, it's the default. And I think because if you just apply position relative to something, it doesn't do anything, you know. And I feel like people might always assume that the default is position relative. And I'm projecting it because when I was a new developer, I just assumed that the default was relative. I always just thought that, okay, you use position relative as a kid and Taner for position absolute, and that's what for, but no position relative allows you to position the thing relatively to where it is. So I mean, it literally is has a specific use case, that's not just a container for position absolute, or I think that's just an important thing. Again, I'm projecting some of my dev insecurities onto the audience right now. Another one we mentioned before, in the HTML section is forms and inputs now forms and inputs, in my mind are one of the biggest pains in the rear ends, I got a kid to get out of it. Gotta say rear ends, I can't say any of these other words. Is is the default CSS that comes on to form inputs. Now, I think we would all hate life, if CSS inputs are inputs in general had no default CSS. And we're just like a blank square, I suppose. But because they have some default styling, - -80 -00:37:10,080 --> 00:37:12,230 -Unknown: it's just a default. - -81 -00:37:12,420 --> 00:37:43,560 -Scott Tolinski: Yeah. Yeah. Consistently default is really the the thing that needs to happen, they have styling in different browsers. And because of this, we need to make sure our inputs look nice in every single browser. But this is where some of the things like in addition to the default styling of every other element, but where CSS resets are normalized, or those things come into play. But it basically forms and inputs have some default CSS, and we need to both respect that default CSS and override it to do anything with CSS forms. And that can be a frustrating thing for people who are new to CSS. - -82 -00:37:43,730 --> 00:38:20,520 -Wes Bos: Yeah, I particularly like aligning forms or making them look like the the mock up and also understanding. So part of what this Reddit thread was stateful HTML, and everyone's like, what the heck is stateful? HTML? Myself, I was like, What is stateful? HTML? He went on, it went on to explain that like, like, your your inputs can be empty. They can have placeholders, they can have text in them, they can be invalid, they can be valid. They can be CoverGirl like it hovered. down and focused on it. That's a good one. Yeah, there's just a lot that goes on with interacting. - -83 -00:38:21,630 --> 00:38:23,460 -Unknown: Remember, visited links? Oh, yeah. - -84 -00:38:23,460 --> 00:38:32,100 -Wes Bos: Visited links. Did you know that visited links? You cannot? This is a bit of an aside, but I think it's interesting, you cannot get the color of a visited link via JavaScript. - -85 -00:38:32,130 --> 00:38:43,130 -Scott Tolinski: Did you know that? I didn't know that. And that seems kind of know why. But who's using visited links anymore, I actually I prefer to have all my links blue with my visited links being purple. And that's just the way you got to happen. - -86 -00:38:43,560 --> 00:39:22,380 -Wes Bos: But the so the reason that you can't get the color of visited link, is because there was a hack where somebody listed every URL out there. And then they just did, what was it something like, like, visited display block, and then the rest of the links were displaying none. And then they just grabbed the visible ones. And then you could do just loop over links and say, if this link is purple, then they had visited it. And that's a way to, that's a security issue, because then you can tell a user's browser history without while they're on your own website. So you cannot get any information about visited links, styling - -87 -00:39:22,940 --> 00:39:26,460 -Scott Tolinski: it via JavaScript. So just like I said, it's a terrible idea. And it should not. - -88 -00:39:28,140 --> 00:40:10,530 -Wes Bos: Well, I like getting in Google where like, you know, if you've been to a search result already, yeah, definitely. What else do we have here? forms and inputs? Yeah, that just knowing how to style them is I think part of the fundamentals. You don't have to get too too into it, but I definitely see it that like a fieldset tag is really underused people are often just thrown extra divs Oh, yeah. Yeah. When when a fieldset is that's what it's for. I feel that is for grouping together, groups of inputs. And I often will use them for Like as a grid container, a Flexbox container. And you could also disable an entire fields that Do you know that if you put disabled on a field set, it will disable all of the inputs inside of it. - -89 -00:40:10,710 --> 00:40:19,460 -Scott Tolinski: I didn't know that. But it makes a lot of sense. And I've never really built that many complex multi step forms or anything. So I don't know if I would have run into that. But that's really neat. - -90 -00:40:19,940 --> 00:40:40,530 -Wes Bos: I use it on my react course. Because if you want to disable an entire form, when something is in loading state, then you can just wrap all of your inputs in a field set, because a form tag won't take a disabled attribute, but a field set will. And that's a kind of a cheap way to quickly turn off all of the inputs, so people aren't typing into them as you're doing work. - -91 -00:40:40,710 --> 00:40:42,210 -Unknown: Yeah, interesting. - -92 -00:40:42,570 --> 00:40:44,520 -Wes Bos: Yeah, we'll do that next year. - -93 -00:40:44,880 --> 00:42:39,710 -Scott Tolinski: And the next one is going to be block verse, inline verse, inline block, in terms of what an element actually is in this is one of those ones that I think you do need to memorize when you're first starting out, every single HTML element out of the box has a default status, whether it's a block level element, an inline element, or an inline block element. And this really determines how the item takes up space onto the page, if it's a block level, is always going to be the width 100%, or whatever width you specify. And typically, block level elements are either used, they're used as containers, a paragraph as a block level element, H tag heading tag, those are block level elements, they take up the whole width of the site, the application, you think can be given a height, you can say it's 500 pixels tall, and it's going to respect that. And then you have inline, which are going to fall in line. Typically, you see this with things like span span as a generic wrapper for an inline element. anchor tags are inline elements. Let's say you have a bunch of links here. And you have one of the reasons why an anchor tag needs to be in line is that if you wrap some text that's inside of a paragraph and an anchor tag, you wouldn't want that taking up full width, block level space, you'd want that to be in line in line with the rest of the paragraph. And inline block means that has some of the properties of an in line item as it falls in line, but also has some of the level properties of a block level item, you can give it some space and things like that. So yeah, I think this is one of the huge foundational elements that you need to memorize, memorize which components which elements have what and memorize what the block in line and inline block are all doing. And the fact that you can turn anything into anything else, right? You have an anchor tag, you want to take up space, you could say, display block. There's also another display here that we didn't have, which is display none, but it does. It's kind of different. - -94 -00:42:39,750 --> 00:43:07,260 -Wes Bos: Yeah, there's a bunch of like weird ones. Obviously, there's display flex display grid. Yeah, but those are, those are blocky, they're block ish. They have they do all the things that block element do. You can give them a width and a height. There's inline flex, which is just like an inline element. There's display table, which used to be a hack for vertically centering things. I'm in line. Honestly, don't even dive into all of those just just know what block in line in line block is. And you'll be able to extrapolate to the rest of the displays. - -95 -00:43:07,290 --> 00:43:08,820 -Unknown: Yeah. Yeah. - -96 -00:43:09,110 --> 00:43:50,490 -Wes Bos: Next up, we have sizing units. We did an entire episode on different types of sizing. Yes, I think that's probably just a good one to listen to. If you want to sort of get up to speed pixels, atoms rems, what are the differences between the two? These like, specifically, like rems and M's, where something is sized based on something else that is sized in the parent? That's what's always tricky. It's the same with absolute and relative where something is position based on something else. Same with EMS and rems. So knowing how those works, why you may or may not want to use pixels or percentages, things like that. And then you can get really into the weeds turns radians, degrees, it I don't think that those are really all that necessary, do you? - -97 -00:43:51,120 --> 00:44:25,680 -Scott Tolinski: I don't at least not for a foundational That to me is like a very specific use case that you're looking to do. For me. I mean, it's like, like, I think the biggest things is like pixels, verse AMS verse Rams know when the difference is no, you need to use them. percentages, pixels, know when to use them know why they're there. And then just don't worry about the obscure stuff. Everything else after that is essentially things that you need to learn on a per case basis or per situation, like an FR unit. Oh, well, you only need to really learn that if you're learning CSS Grid, and if you should learn CSS Grid, but I wouldn't learn it in the same context in which you're using other units. Yeah, - -98 -00:44:25,740 --> 00:44:47,040 -Wes Bos: yeah, that's a whole different spot and you don't need to overwhelm yourself in it. Again, we're talking about fundamentals here. Like what are the what are the basics that you need to know before you jump into doing something a little bit more advanced? Yes, sir. Next typography like what would you say? We don't have any notes on this? Like, what do you say the basics of, of typography is, - -99 -00:44:47,250 --> 00:45:15,360 -Scott Tolinski: for me the basics of typography is knowing I this is gonna be a weird one. But knowing about like collapsing margins gets people a lot how margins work to me. So yeah, how margins and line height Work is a huge part of effective typography and vertical rhythm and all those things. So that seems like a weird answer. But one of the things that the things that helped me the most out writing effective typography is understanding line height and margin and how it all works together. - -100 -00:45:15,870 --> 00:45:22,560 -Wes Bos: Yeah, that collapsing mark, you want to give us a rundown because that that is a lot of people seem to be like what's so collapsing margin? - -101 -00:45:22,590 --> 00:47:31,320 -Scott Tolinski: Yeah, a collapsing margin. Okay, so let me paint you a picture here, you have a div inside of that div is an h1. And underneath that h1 is a paragraph tag. Now, both of these things, let's say all of them have a margin of top and bottom of one rep, all of them do, I'm just giving you some some easy values here, one might think that there's a margin on the top of one rim and a margin on the bottom of one rim and then the paragraph is going to have a margin of top and then the margin bottom one rim. So therefore, there should be a two ram difference between that h1 and that paragraph tag. But there is not because of how HTML works, there's or I guess how CSS works on HTML, there is something called collapsing margins where adjacent siblings as in the h1 next to the next of the paragraph tag, they're adjacent or they're directly touching their margins, if they collide are going to collapse into the largest possible margin, aka, since it's just one in one on top and bottom, that's just going to be a one margin difference. And this allows you to build really consistent looking, I guess, typography systems where you're not getting those double spacing. So you're not having to do something like margin bottom zero, but only in this particular instance, when there's a paragraph tag right here. So basically, the collapsing margins is a thing where even though they're theoretically should be two Rams are to double the margin, they're the margins collapse into each other to form one margin. And that allows you to create these systems. Now I in the past, when I was a junior, when I started getting into CSS, I really wanted to just eliminate all possible issues by either only setting margin bottom on things, I would just do margin, top zero all and then only set margin bottom. But once I learned to embrace collapsing margins and truly understand them, I think I write better way better CSS less overrides less unique situations, because I'm letting sort of HTML and CSS do the job that it is built to do. Mm hmm. - -102 -00:47:31,710 --> 00:48:18,720 -Wes Bos: That's, that's good. That you said that. Other things typography, sizing your headings, sizing your, like setting up like what a font stack is setting the size of all your paragraph elements. I think that's probably the basics, maybe not even loading in external fonts. Although that's not the hardest thing. I don't think it's necessarily part of the fundamentals. Yeah. Last thing we have here is just basic media queries. So understanding how to write a, like, what is a mobile first media query, and that is that things go from small up? And what is the, I guess a desktop first media query where you write increasingly bigger or smaller media queries as things get smaller? That's really just just basic media queries. You don't need to get into the nitty gritty of it, just understanding how it works. - -103 -00:48:18,990 --> 00:48:21,840 -Unknown: Word. Cool. I think we covered it. - -104 -00:48:22,320 --> 00:48:54,690 -Scott Tolinski: There's there's probably stuff we missed. I mean, there's there's so much stuff here that I think it's sort of an inevitability that we may have missed something, maybe we can do a limited follow up in a hasty or something. But this area, yes, UML and CSS foundations, the fundamentals, Wes and I both turned into Larry Bird here and, and worked on our fundamentals for a little bit. And we're, we completed this we're gonna be doing like you mentioned a series of fundamentals episodes. Let's know if there's any topics in particular you want to see out of the fundamentals series here. series, the episodes. I love - -105 -00:48:54,690 --> 00:49:42,330 -Wes Bos: talking about fundamentals, I often get this on Twitter, or people like people always saying I'm like, what I often say like whoa, would you like to see included in beginner something and never being 100 tweets of people with like, very specific, like, Oh, I think blockchain cryptography is pretty important to know. And Okay, calm down. That's not that's not fundamentals like this is bare basics, you should know, as a sort of a high level thing before you before you start jumping into using foundation or bootstrap or whatever. So see, let us know what you think we're gonna have one on JavaScript, maybe even the fact that this will put an hour into just HTML, CSS JavaScript might need to we'll see two I think a server one understanding how servers work would be interesting. And then we'll, we'll sort of see from there. Yeah, - -106 -00:49:42,330 --> 00:49:59,970 -Scott Tolinski: I'm excited. Excited to get through all these fundamentals. This part of the show or we're gonna we're gonna be talking about our sick pigs. And sick pics are things that we find to be sick and sick isn't rad or dope or cool or any of those cool things. So or whatever word you like to use. I don't know what the kids are using today. These dang kids. - -107 -00:50:02,010 --> 00:50:03,360 -Unknown: Yeah, so would you got a sick pic I - -108 -00:50:03,360 --> 00:50:05,940 -Scott Tolinski: knew I have one sitting around here. So I do - -109 -00:50:05,940 --> 00:51:20,760 -Wes Bos: have one. And this is another hilarious, not totally unrelated. And it's the four arm forklift here heard of this sounds interesting. So part of my job as a husband to my wife and my job really moving heavy things, and I also as my I grew up, my parents would always buy new furniture and make me rearrange it and I hate it so much lifting furniture and like, heavy things and moving them around is like my most hated thing. And I'm always the guy that people call to, like, help him out and I'll do it but it's it sucks. So I bought these like straps many years ago called the forearm forklift. And there's these like, basically there are these big, yeah, orange straps that go underneath like a dryer or a mattress or something like that. And yeah, and basically you put them around your forearms and then you can just kind of lift from there and it's so much easier just to hold on to the thing when you have your you have the weight close to your body rather than reaching out and lifting it. I'm sure it's gonna like help your back and all kinds of stuff like that so big fan of these I would definitely pick up a strip a set next time you're at I don't know what what do you What's the Home Improvement place called - -110 -00:51:20,760 --> 00:51:21,300 -Unknown: Depot, - -111 -00:51:21,300 --> 00:51:25,080 -Wes Bos: Lowe's or something? Home Depot? Yeah, we got it I got my Canadian Tire. - -112 -00:51:25,770 --> 00:51:26,730 -Scott Tolinski: Wow, just - -113 -00:51:27,930 --> 00:51:28,440 -Unknown: 20 - -114 -00:51:28,800 --> 00:51:34,950 -Wes Bos: Canadian Tire is like it's like a weird I don't even know how to describe it that obviously still tires. Yeah, - -115 -00:51:34,950 --> 00:51:37,440 -Unknown: they also sell like maple leaf for a logo, don't they? - -116 -00:51:37,649 --> 00:51:47,820 -Wes Bos: Yeah, it's like a hardware store but also like a like a sports store. And also like tools and that's all kinds of very mediocre things. - -117 -00:51:49,350 --> 00:51:50,760 -Scott Tolinski: But they got a forearm forklift when - -118 -00:51:50,760 --> 00:51:52,710 -Unknown: you said for forklift. - -119 -00:51:52,710 --> 00:51:59,760 -Scott Tolinski: I was thinking, you know, like no man that two arms forearms, you know, like a forklift comes with as for two, - -120 -00:51:59,880 --> 00:52:01,740 -Wes Bos: so yeah, four arms go into them. - -121 -00:52:01,770 --> 00:52:12,180 -Scott Tolinski: I was now I was thinking like an actual forklift. But like with Prongs, instead of to, like some guy was just like, you know, these two prong forklifts, they could be twice as effective. If we had to imagine - -122 -00:52:12,180 --> 00:52:16,440 -Wes Bos: having a forklift. I would just cruise if I had a forklift. - -123 -00:52:17,700 --> 00:52:20,070 -Unknown: Just rolling through town on a forklift. Yeah. - -124 -00:52:21,300 --> 00:52:23,190 -Wes Bos: That allowed probably not probably not - -125 -00:52:23,550 --> 00:52:32,580 -Scott Tolinski: depends on maybe like, if you're cruising through town on a forklift for like, five minutes. 10 minutes, like yeah, sure, but like, once it gets to like a whole day, I think somebody is gonna be stopping. Yeah. - -126 -00:52:33,149 --> 00:52:35,220 -Wes Bos: Yeah, I would. I would mod mine out. - -127 -00:52:35,249 --> 00:52:37,050 -Scott Tolinski: Yeah. Gotta put some effort. What - -128 -00:52:37,050 --> 00:52:38,190 -Wes Bos: do you got for me today? - -129 -00:52:38,399 --> 00:54:14,700 -Scott Tolinski: I have a show on Netflix. And this is some people are gonna hate this because it's one of those types of shows that like can make some people cringe really hard. Courtney watched one episode and it's like, I'm out. I'm tapped. I can't I can't do this. It's comedy. It's called. I think you should leave with Tim Robinson. And it has like some of the Lonely Island guys like What's his name? Andy Samberg. Akiva. They produced it. And it's it's done by Tim Robinson. Who's the comedian. You've probably seen him before in other things he was in the show Detroiters and it's it's a sketch show. And I don't know how to describe most of these sketches other than painfully awkward to the point of like, you You almost like you just tense up when you watch some of it because it's great. I don't know how to describe it other than the comedy is not for everyone. You'll know instantly. If you watch one episode and you think the episodes funny, then this show is for you. If you watch one episode, and you're like, No, no, no, you aren't going to like the rest of it. Because it almost gets gets worse and worse every single episode. And I've been I've been loving this series I did all the other day. And I was just in tears at some of the stuff. The episodes are quick, like 16 minutes. So it's not like he had to devote a ton of time to it. It's a sketch show the same way that like portlandia is Yeah, it's got a lot of celebrities in it. People that you've seen before from SNL around are in it. A lot of SNL people. It is great. I had a great time watching this. I'm a huge fan. I really hope they do another season again. It's called. I think you should leave with Tim Robinson. It's brand new. Oh, - -130 -00:54:15,269 --> 00:54:29,760 -Wes Bos: yeah, check that out. Funny. ELO's. I've always been disappoint Canadian Netflix Sox. Oh, and it has like no, nothing good. So whenever it's something that's like a Netflix actual show, then we get it. And I'm always happy when there's something good. Oh, nice. - -131 -00:54:29,789 --> 00:55:17,550 -Scott Tolinski: Yeah. Yeah, this is good. I've had a great time watching this, Jeff. So check it out. My shameless plug is going to be my new course on debugging and dev tools. It's live on level up tutorials. If you're a pro subscriber, it should be available for you already. If you are one of the sad souls who is not level up pro subscriber, you should get on that head over to level up tutorials.com forward slash Pro, sign up and learn dev tools and debugging. today. We cover just about every single tab in your Chrome Dev Tools and Talk about what they do, how to use them properly, how to understand what the heck the information is that they're giving you. Because the more tools that you understand and know how to use, the faster you can solve any sort of problem that you're having in your web development. So if you want to save time, and get those dev dev debug and dev skills up, level up tutorials, comm forward slash pro - -132 -00:55:17,880 --> 00:55:35,910 -Wes Bos: sec, I have all my courses at Wes bos.com forward slash courses. And we're working on a beginner JavaScript one right now, which should be out soon. And you can go to that URL and see if it's live yet or you can take one of my free ones. I think that's it. Thanks for tuning in. And we will catch you next week. - -133 -00:55:35,910 --> 00:55:37,020 -Unknown: copains - -134 -00:55:37,410 --> 00:55:38,130 -peace so - -135 -00:55:40,230 --> 00:55:50,040 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax159.srt b/transcripts/Syntax159.srt deleted file mode 100644 index d980dfa1c..000000000 --- a/transcripts/Syntax159.srt +++ /dev/null @@ -1,88 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott, Todd. Totally in ski. - -2 -00:00:25,890 --> 00:00:52,860 -Scott Tolinski: Or Welcome to syntax in this Monday tasty treat, we're going to be talking all about security and front end security specifically. So we're going to be keeping this largely and and very largely related to front end stuff. But more or less, what are the things you sort of need to know a little bit about security on your website. So my name is Scott Tolinksi. I am a developer from Denver, Colorado and with me, as always is West boss, - -3 -00:00:52,920 --> 00:00:54,000 -Wes Bos: sup everybody, - -4 -00:00:54,180 --> 00:01:45,120 -Scott Tolinski: sup sub West? This episode is sponsored by a longtime sponsor of syntax, and that is century century is the really excellent system and service for tracking, logging, storing, keeping track of just all of your bugs. And this is one of these tools that if you run any sort of site that users are facing, you're going to want to make sure that you have a system in place to be able to track log and know exactly what's happening on your site at any time, we highly recommend you dive in and check out century@century.io This is a service that both West and I've used for a long time even before we've recorded this podcast. So we're big fans over here at syntax. So again, check out sentry@sentry.io use the coupon code at tasty treat all lowercase all one word, and you will get what will you get West? You'll get two months, two months - -5 -00:01:45,420 --> 00:01:46,230 -Wes Bos: for free. - -6 -00:01:46,260 --> 00:02:11,750 -Scott Tolinski: tu tu tu tu tu tu tu mods for free? Yes, I'm ready to go. I've had one heck of a morning this morning. We now have two kids. And I have a bunch of new responsibilities in the morning and apparently still getting used to those responsibilities. I'm lagging hardcore. I'm chucking back some coffees and some cold brews, some brewskis some cold brewskis. And I'm feeling ready to go. How about us? Yeah, yeah, - -7 -00:02:11,760 --> 00:04:11,310 -Wes Bos: I'm ready to ready to rock and roll. So we're gonna be covering a couple sort of things about front end security, lots of your sort of security stuff needs to happen server side. But there are like a handful of things that you need to know as a front end developer, so that you don't sort of shoot yourself in the foot. By accidentally doing something, I think that's something I hear from a lot of people, they say then yeah, that's called a foot gun where like, you're like, I don't actually know like, what I'm, I might be doing bad. And there's probably just a handful little things that you need to be aware of. So you don't actually set yourself up for your entire website being hacked or for your users data being taken away rogue. So first one we have here is it has to do with sort of sending data. And that is whenever you are sending, I would go as far as to say whenever you are sending any type of data that must be over a secure a secure origin, meaning that the server that you're sending the data to, as well as, like I don't want to get too, too in the weeds here. But the website you're serving it up on should have an SSL certificate. So what this will do is when you have an SSL certificate, obviously, you get that little green lock in the URL bar that you have. But sort of the what happens there is when you have a website that talks to a server, the data that is being sent from your your users website, over the Wi Fi through the internet, through the government, surveillance, and finally to your server. It's encrypted all the way along, meaning that if anyone were to intercept that data, if anyone were to sniff that data, they still do know about like, like what website it's going to and the size of it and and things like that. That's why ISP can still throttle things like Netflix when they're still using SSL, but they're not able to sort of dive into that data and inspect it as as it were raw text where with HTTP, you totally can you can intercept data requests that are going anywhere. And you can see the entire payload in plain text. - -8 -00:04:11,490 --> 00:05:05,390 -Scott Tolinski: Yeah, so I mean, that's really it is that the seeing the the payload in plain text, I mean, imagine you're on like an airport Wi Fi, and you're entering your credit card information and sending that somewhere down the line. And everybody who's on maybe the same network and is doing some sniffing, sniffing around different for that packet might be looking at that information because it's unencrypted. So that's really where the SSL comes into play here is that it's not only just encrypted but encrypted to a key that's connected to the organization's details, right. So when you apply for an SSL, it's attached to basically you as an Hey, this is level up tutorials.com. This is level up tutorials, sending the message and the encryption is connected directly to that organization, rather than Just some, you know, just some generic key or something it yeah connected - -9 -00:05:05,790 --> 00:06:06,720 -Wes Bos: and the server to like the you have to, in order to get an SSL certificate working, you have to sign it, which means that your your cert, you have to prove that you own the server. By the way, there's a number of different ways that you can like sort of do that. But the most obvious one is just you just put an HTML file on your server. And then the people who are issuing the certificate check if that's there, and they go, Oh, thanks for putting that very specific HTML file here, you must actually own the server, and therefore we're going to issue you this certificate. One sort of other thing to note is that a lot of new API's that are somewhat sensitive things like webcam, geolocation, those will only work on a secure origin, meaning that you either have to be a local host, or you have to be on a HTTPS website. And I think that's good, because you shouldn't be able to get people's microphone pictures of people data about where somebody is without actually being in a secure environment, because you could potentially send that data over the wire and it shouldn't be able to be sniffed. - -10 -00:06:06,900 --> 00:08:09,990 -Scott Tolinski: Yeah, we want to stop those sniffers. Just put a plug right up those sniffers. All right, next one here is going to be talking about setting inner HTML. And this is actually, you know, a fun fun question is that people who use react will often see this when they want to insert some HTML, like maybe they have some HTML saved in the database, or coming in from an API, and they want to use it. And they have to go ahead and use this prop called dangerously set inner HTML, which sounds super scary. And believe it or not, it was actually named to sound scary, because this is going to sort of go along the lines with some other stuff we're going to be talking about later on in this episode, but largely that you have to know sort of what is going on places what the data actually is. And it needs to be always what you expect it to be. Because simply just inserting HTML into HTML isn't necessarily a security risk as long as that data has been sanitized? And is that definitely what you're expecting it to be aka, just straight up HTML, maybe, yeah. And so that gets into the point of sanitizing, which is just sort of a word that you may have seen around before. And I wanted to quickly touch on WTF is sanitizing before we get into some of these other things about this inner HTML, because sanitizing comes up a whole bunch throughout any security things because sanitizing, if you have heard the term before, and maybe don't know what it means. And maybe you can just guess, because it really feels and has a lot to do with what the real world definition means for sanitizing aka you're cleaning it, you're cleaning the data, you're removing unexpected data from that string, just like you would sanitize your counter, you're removing germs that should not be on the kitchen counter. They shouldn't be there, get rid of them sanitize. And that's exactly what sanitizing is. So this can be very important for anything. When you're inserting code into the into your site. It can prevent all sorts of stuff. - -11 -00:08:10,020 --> 00:08:25,590 -Wes Bos: Yeah, maybe we should talk about like, how, why is this unsafe? So like if you have like a user's input for their name, or their bio, the users name could be Wes Bos open script tag, hack your bank account closed script tag? - -12 -00:08:26,100 --> 00:08:29,270 -Scott Tolinski: Yeah, mine some cryptocurrency? Oh, yeah, - -13 -00:08:29,340 --> 00:10:14,010 -Wes Bos: yeah. So if the user puts any sort of HTML in their inputs, and then you dump that data into the DOM as HTML, doing it as text is not an issue, because you can set it like dot inner text or setting text into anything is totally fine, because it's not going to be parsed as HTML. But whenever you're you're taking, like creating some HTML, and you have data that's from a user, you cannot trust that the user did not maliciously put in a script tag, or is probably the most, the easiest one is go ahead and make an image tag and put a source on there, and then put an onload attribute. And the onload attribute will actually be fired by the browser and run whatever JavaScript is in the onload quotes once the image has actually loaded. So that's the very easy way to see how it might go awry. And I like to use like I personally and a lot of my courses, I always use ESX template strings to scaffold out HTML because it's way easier than doing document dot create element div document dot, create element, paragraph, paragraph, enter a URL that txt equals Hello, and then you take the paragraph and put it in. It's really knowing that that's why JSX is has been made, because it's really simple. And you are almost very set. You're always very safe in react world because they don't let you do those things. But if you're just using vanilla react, or sorry, if you're just using vanilla JavaScript, you could accidentally set some inner HTML and then you'd be pushed. So it's not that you shouldn't use that. It's just that you should run it through. I use something called Dom purify. And that will just strip out anything that is potentially malicious. And you can also allow it to let things through. So maybe you do want to allow people to have code blocks or image tags without the onload attribute, things like that. Yeah, - -14 -00:10:14,219 --> 00:12:01,530 -Scott Tolinski: yeah, definitely. Cool. So we did talk about sanitizing Do you want to get into the next one, which follows along right along with this, which is about sort of the I think it goes hand in hand with this is just not to trust anything coming in from the client. I mean, that that is, in my opinion, that's just a good rule to live by 24 seven, with any front side security is never trust things that are from the client, because the client can be manipulated by the user. So in any particular use case, you're always going to want to make sure that you're checking the data, you're sanitizing the data, you are type checking the data as well. And this is one of those things you get out of the box for free with graph QL. Because you're always type checking the data has to be very specific types. And neither information that's getting passed along the server has to be the explicitly set types that you have. So basically, we never want to trust information that's coming from the client, whether that's from an HTML form, e commerce or anything like that. And that said, you know, people, they've added client side form validation to html5, whatever, however, many years ago at this point, when when they did that, it was a big deal. But a lot of the times people maybe Miss misconstrue that with, okay, well, this html5 is validating my data. So therefore, I don't have to do anything else with it. And that's not really the case. Because even if the forms, the form validation for html5 is really just a UI kind of thing. It's really just to let your users know, rather than to be any sort of security measure, it's just an extra little layer there. So you always need to check types, check the data, make sure you check it when it enters your server, before you're inserting into your database before you're doing anything with it that could potentially just run some code that you might not know exactly what it is. - -15 -00:12:01,709 --> 00:13:27,450 -Wes Bos: Yeah, I saw this when I was building my advanced react course, every single example that I looked at, even with graph qL, they would take the price, and they would calculate the price on the client side, and then just send that to the server. And that made me really frustrated. Because obviously, yeah, it's a simple example. You're just doing a quick little tutorial. And the whole like having to recalculate the carts. Total cost. Yeah, on the client side, and the server side is annoying, but you absolutely have to do it. And otherwise people will just change the cart. But people do this me all the time. It changed the product to one cent. And then it says like, the success charged your card for one cent. And they think they hacked me and then they get their credit card bill. And it's obviously I'm checking for the I'm recalculating the price on the client side and server side. Yeah, so that's something just to be super aware of is anything on the client side can be changed and will be changed by malicious actors. So don't trust it being sent in from from the user. Same thing with like, like, what was I saying, like if you're like, take the request dot body and express and you're saying, Oh, this is this is server side. But if you're just like taking the entire payload from the user, and then saving that to a database, the user could send any data that they want. And you could just immediately say that to your database. And that could that could also be like overwriting private fields, like privileges, which you don't necessarily have access to on the client side. So be very careful about that. Don't trust the client? - -16 -00:13:27,749 --> 00:16:42,270 -Scott Tolinski: Yeah, yeah, I checked my types every step of the way. I check them before they're inserted into the database, I check them when they're coming from the client to the server, you know, you got to check all check all that stuff all the time, clean it, sanitize it, whatever. Last thing I want to talk about really quickly here was PCI compliance, which if you're doing any sort of e commerce, accepting of credit cards, accepting a payment, PCI compliance is very important because you can get into big trouble for not following these things. And largely, if you're following best practices, you will be PCI compliant. There's a lot of server side components to this. But there are some client side components as well. For instance, we mentioned very, at the front of the show that we wanted, you always need a secured encryption of sending your data. And obviously, if you're sending credit card information down the line, you're going to want to make sure you definitely have an SSL. So do you encrypt your plate your cardholder data, there's also the option of doing like a secure iframe. I know stripe and Braintree have a solution where they have an actual secure iframe. But I would just also have an SSL anyways. So those are options. If If you don't want to construct your own form or have to deal with security for credit card data, I would just use the stripes or brain trees solutions for those anyways, simply just because they already have all the best practices worked out for you. Next, again, you're going to want to encrypt transmission of card or cardholder data, okay, along with the SSL stuff. That's all for free. If you have an SSL, you also want to restrict access to cardholder data, your API like you shouldn't be able to Hit the API and say, Hey, give me West, Wes Bos, his credit card token and all of his, you know, expiration date and information and stuff that your API should say, Nope. And that's obviously a server side thing where your API but also if you're using you build your your graph qL API, you just got to be sure your your REST API that that information that's coming down the line there is what you would expect it to be is that is more server side. When I wrote this, I was thinking client side for some reason. Next up, we have restricted physical access. This is this is actually I have a personal story about this, we were redoing this website for this monk company. And we were talking about PCI compliance. And they were really annoyed at the new sort of way, they had to do everything. They were just like, Oh, I have to check the order. Is this in the system? And I got to do this and the system now? And we're like, Well, yeah, but how did you do it before because this is how you have to do it. They're like, well, the credit card would just come to me via the website, and I would write it down on a notepad. And then I would walk over to the machine and I would type it in. And then I did Enter. And we were just all standing there, horrified. Like, you mean, the credit card information is coming in as a string in plain text via email to you. Oh, my lord. So we, we fix that up real quick. And they weren't, they weren't happy with the new system, because it added all these extra steps. But these extra steps were very important. Like that was a horror show to me, I couldn't believe what they were doing. So the do all these things in no help you remain PCI compliance. But at the end of the day, all of this stuff follows the same sort of pattern that we've been talking about encrypted, don't trust it, sanitize it, clean it, all that good stuff. - -17 -00:16:42,390 --> 00:18:21,830 -Wes Bos: Yeah, I've one more little tip here. And that is if you have like a form input, or you have a form, and that has like sensitive fields, a credit card or password or something like that, I mean, you're doing that with like a JavaScript framework, or what I often see is people forget to put a method on their form, because you just you just have a form tag, and you say on submit, and then you send it. But what happens is if JavaScript is for whatever reason, JavaScript breaks, the form tag will default to a method of get, and a method of get will put the inputs that have a name attribute on them, and we'll put them in the URL bar. So if you accidentally forget to put a method and you put a name on your inputs, and somebody submits that form, what will happen is that the user's URL bar will will submit that data and then it will say like, at the end, question mark, credit card equals ABC 123 ampersand password. And then what you've done there is is one you've, you've pushed the user because now their password and credit card is in their browser history, which may be may be logged by analytic companies, it may be a public computer, it may be in server logs, meaning that like somebody just said, like somebody requested this, and then it all sudden, you have sensitive data in your server log. So as a rule of thumb, I never put a name input on sensitive fields, I just use JavaScript to grab them some other way. And then and be always put up POST method equals post, just in case something breaks. And you sort of cover yourself there. Because obviously posts won't go into the URL bar. And you can you can unless you're logging all of the posts variables that probably won't go in your logs either. - -18 -00:18:22,100 --> 00:18:44,090 -Scott Tolinski: Cool. Well, I think that does it for this episode, we want to hear what you do for front end security. I want to hear all about the some of the stuff that maybe we missed or didn't cover in this episode that you think is important for front end and security. If you tweet us out at syntax FM, we will retweet you some six security tips for the front end. Cool. So that's all I got. How about you? - -19 -00:18:44,300 --> 00:19:36,930 -Wes Bos: I think that's it, I just want to say we intentionally didn't get into HTTP, local storage tokens because that's a dumpster fire of people arguing but generally, maybe just real quick, the sort of hot and certain skinny of it is is that if you are using JSON Web tokens, you can put them in cookies, and you make that HTTP only cookie and then that can't be accessed by JavaScript, meaning that if a rogue person does get the ability to run JavaScript on your page via the inner HTML we talked about, then they can't access that. If it isn't local storage, then you're poached. And that's why people don't like putting JW T's in local storage. We have a whole episode on the pros and cons of the two of those. I personally use cookies, but I don't really, I think that if you have somebody running JavaScript remotely on your page, you're you've got big problems, and one of them is that they can see your token. - -20 -00:19:37,290 --> 00:19:38,610 -Unknown: Yeah, yeah, - -21 -00:19:38,610 --> 00:19:44,490 -Wes Bos: I think that's it. Yeah. Thanks for tuning in. We will catch you on Wednesday. Please - -22 -00:19:46,440 --> 00:19:56,220 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax16.srt b/transcripts/Syntax16.srt deleted file mode 100644 index 849160a50..000000000 --- a/transcripts/Syntax16.srt +++ /dev/null @@ -1,516 +0,0 @@ -1 -00:00:05,970 --> 00:00:11,250 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:12,540 --> 00:00:34,400 -Wes Bos: Hello, everybody, welcome to another syntax. Today we're gonna have sort of a q&a show or like mini treats show where we don't have one specific topic, but we're gonna sort of rattle through a bunch of questions that we start to have, it doesn't necessarily have enough to make up an entire show, but enough to to have some nice little q&a. So, Scott, how you doing today? - -3 -00:00:34,770 --> 00:00:43,830 -Scott Tolinski: I'm tired. Yeah, so it's having a, you know, a four month old is, can be rough, sometimes. - -4 -00:00:44,340 --> 00:00:45,570 -Wes Bos: Very rough, slowly, - -5 -00:00:45,570 --> 00:00:49,380 -Scott Tolinski: slowly waking up here, but I'm doing my best. How about you? - -6 -00:00:49,410 --> 00:01:24,450 -Wes Bos: That's good. That's good. I'm doing pretty good. We also had a bit of a rough night, I just got home last night or last afternoon, a trip to I was in New Orleans for CSS dev comm, which was super fun. It's always a really fun conference, I met a whole bunch of really cool people learned a lot about CSS, and I did a job. I'm always the guy that comes into the JavaScript talk at CSS conference. And then I did a react workshop. So I was really fun. And then my wife and I sort of took a couple days to hang out in New York before for coming home. So feeling good, but also feel entire Yeah. Nice - -7 -00:01:24,450 --> 00:01:28,200 -Scott Tolinski: little hangover from the the trip. - -8 -00:01:28,620 --> 00:01:48,510 -Wes Bos: Yeah, yeah, exactly. So let's jump right into it. This, this is gonna be all over the place in terms of soft skills, hard skills, whatever, I thought we'd start off with a very technical one, which is do you use rems M's or pixels or Vw vhr or whatever? Like, what is the best way? And what are your thoughts on that? Scott? - -9 -00:01:48,540 --> 00:02:24,410 -Scott Tolinski: Yeah, I largely for the most part, use rims for everything. I like them, because I don't have to worry about the container potentially having that multiplication effect, or whatever you'd want to call that. But yeah, I use rims as relative units. I use, I use pixels for things like the height of my header up, but I guess I don't always sometimes I do. I don't I use pixels occasionally. But not not. I don't really intend to use the viewport. The viewport dimensions a lot. The VH VW Yeah, - -10 -00:02:24,420 --> 00:02:25,080 -Unknown: those are great. Those - -11 -00:02:25,080 --> 00:02:45,090 -Scott Tolinski: are absolutely great. The moment that I felt like, I could use them. I was all on board like 100% on that train. So yeah, I use rems, I use the viewport widths and heights and then yeah, I occasionally use pixels. I found myself never using EMS really ever since rims came into the picture ever since that came out. Yeah. - -12 -00:02:45,090 --> 00:02:49,590 -Wes Bos: Okay. So some follow up questions. What about media queries, pixels, or rems? - -13 -00:02:50,640 --> 00:02:52,920 -Scott Tolinski: Oh, pixels. This is where I use pixels. Yeah. - -14 -00:02:52,980 --> 00:03:00,000 -Wes Bos: Okay. Yeah. Cool. And then what about what, uh, what's your base font size? If you're using rems? I get to like, 10. - -15 -00:03:00,030 --> 00:03:28,350 -Scott Tolinski: I don't do that I did for a little while when I was like transitioning into rooms, I would set them to 10. But now I guess it's based on the design that I'm working with. And yeah, I'll set I'll set my my one REM to whatever my body font size is typically 16. But just yeah, if it if it is 18, or, you know, 24, something like that, depending on the size of the the current design or something I'll just said to my body side by body font size. Yeah. - -16 -00:03:28,980 --> 00:05:12,600 -Wes Bos: Cool. Cool. Well, I'm in a similar boat. Maybe I should for those who haven't used a whole lot of rams, RAMs, let me explain real quick. The idea with pixels is what you say is what you get a rendered out to the screen, you set something to be 100 pixels, it will render out 100 pixels to the screen. With EMS, the way that it works is that you can set something to be like one M. And then let's say that that renders out to be 10 pixels. And then if you have something inside of that container, and you set that to be two M, then it's it's going to be two times whatever the parent is. And what can happen is that as you start to move stuff around or nest things, it gets really out of control, because it's always based, it sort of just like multiplies itself as you nested. So if you have font size, whatever m nested inside of something else that has a font size nested and something else that has a font size, then you start to get in trouble where this thing is sort of going off of each other. So I don't use that a whole lot. However, there is a very good use case for EMS. And that is when you want your entire container to scale up proportionately. So if you have, like, let's say you have a widget where you have a h2 tag and a paragraph tag and your h2 tag needs to be twice the size of your paragraph tag. So you could set your h2 to be one M or a to M and you said your paragraph to be one M and then you set the entire parent container to be like font size 10 pX, and then if you just want to double everything up, you want to just sort of like proportionately scale. All the way up, then you just change the font size of the actual container. And that's that's really nice. I don't run into that all that often. But when you do need proportional M's does come in very handy for that. Yeah, - -17 -00:05:12,629 --> 00:05:20,250 -Scott Tolinski: I think it's more likely that the design itself, like at a breakpoint is scaling in some sort of way, like overall, right? - -18 -00:05:20,490 --> 00:06:11,009 -Wes Bos: Yeah, exactly. And rems is a is all based on the HTML tag font size. So it doesn't do any of this multiplay multiplying it stands for root m. So you set the you set the font size on your HTML tag, and that's exactly what I do is I set the font size to be 10 pX on my HTML tag. And then I always know that if I need something to be 20 pixels, I set it to be to rems, and I sort of set it the reason why I set it to be 10 pX is so that to maintain my sanity in terms of trying to convert over to at the end of the day. So that's pretty nice to be able to do. And then I do use pixels for, for sizing all of my media queries, I know that there's a lot of people that like, try to like convert it in rems, and stuff like that. But I've never ever run into the situation where I need to scale up or down my media queries. - -19 -00:06:11,040 --> 00:06:13,920 -Scott Tolinski: Yeah, I personally benefit there at all. - -20 -00:06:14,550 --> 00:06:51,329 -Wes Bos: At the end of the day, everyone's trying to just calculate pixels in their head. So that's actually one one cool thing I did see is I once had a student who accidentally designed their entire website when they had zoomed in two times. And their media queries just weren't making sense. No, like, why is this media query not making and then I just like, hit the command zero or Command minus this zoom the entire website out? And they're like, Oh, no, but because they had they had done everything in rems, they were able just to, it was like a two minute fix. I could scale everything up proportionately was just kind of, yeah, right. Nice. - -21 -00:06:51,480 --> 00:07:17,129 -Scott Tolinski: Yeah, I really love using rems for things like margins. And then when you can, you can set up a whole nice little vertical rhythm system going and then you know, that like, one space at one REM is always going to be you know, fitting with your vertical rhythm. And then two rooms is still just going to be a little bit bigger, but still fitting with that same rhythm and three rooms, four rooms and so on. And I definitely really like using it for things like that. - -22 -00:07:17,610 --> 00:07:54,240 -Wes Bos: Yeah, yeah, totally. So yeah, rems and pixels are good. There was like, I don't know, I don't know if this is still the case. But there's sort of this like pixel shaming going around a couple years ago, when when Rams came out, and you sort of like, do all that you can to dance around using pixels, but 10 of the day, our screens are made out of pixels. So that's what it's all calculated out to be at the end of the day. So All right, next one is what activity This is from Amanda McNeil. So I asked on Twitter for some questions. What activity that isn't developer related Do you feel most benefits you as a developer so I don't know if you have anything for this Scott? - -23 -00:07:55,199 --> 00:08:59,970 -Scott Tolinski: Yeah, so for me that most benefits me as a developer Yeah, I would say it maybe is is dancing, because there's a lot of creativity and perseverance through working through things like for me breaking it is not like one of those things that comes easy it took me eight months to learn the move the windmill, if you look up the windmill took me eight months of like practicing magic every day and it takes a lot of persistence and in try and see what's going wrong, fix that problem, try again, see what's going wrong, fix that problem, try again, and not being frustrated and being like angry with not being able to do these things because at the end of the day, it's all about personal advancement. So you know, I use braking a lot when I talk about web development stuff but definitely I'd say it's taught me a lot of these like troubleshooting and patient skills that have definitely carried through into my programming - -24 -00:09:01,380 --> 00:10:58,140 -Wes Bos: awesome that's I'm pretty much on the same same wavelength as well i think the the two other things that are a big part of my life right now is is cooking I really like to cook often spend weekends I'm really into smokey me I'm really into like techniques. So like whether it's I just got a new suevey a couple a couple years ago but I was like super into that at the moment or if I got a new smoker I was really into that really into different techniques and being able to take a technique that that is cooking and like I was super into kombucha and and I'm looking into curing meat Pretty soon, is like being brand new at something and realizing that you're garbage at it and being having to figure out how it works. Whether it's watching YouTube videos and reading blogs and sort of like accumulating all this information. It's good to be in a spot where you are totally green and excited about something so for me that's cooking and I also think that it's it's good for me as someone who does teaches because you can sometimes get hung up in sort of the the technicalities of things like rems versus EMS, when at the end of the day, it really doesn't matter all that much. And it's funny going into into cooking and you can look up on YouTube like this Gordon Ramsay how to make scrambled eggs, which is like the simplest thing in the world to make scrambled eggs. And he just does this dance where he's like, Oh, no, oh, funny. Oh, funny. Often, he's like, put the butter in and all that terrible, the Gordon Ramsay accent. Or in the barbecue world, there's people that are people that like swear against putting salt on your meat. At the same time that you put your robe on. And there, there's all this, like scientific evidence behind it, and people argue over it. And it's really funny to be like an outsider looking in. And that must be what people who are new to programming looking in and seeing us argue about silly things like that, right? Like, it doesn't make a difference. But it's also fairly silly, right? At - -25 -00:10:58,140 --> 00:11:01,380 -Scott Tolinski: the end of the day, all that matters is that the meat tastes good. Right. - -26 -00:11:01,409 --> 00:11:12,210 -Wes Bos: Exactly. Exactly. And you have cooked some damn good meat either way. And I don't think it matters as much as you actually think it does. So cooking is sorry, go ahead. No, I - -27 -00:11:12,210 --> 00:11:22,230 -Scott Tolinski: think they're parallels. They're just like really anything that involves troubleshooting, learning, being able to like examine methods and grow and improve over time and stuff like that. - -28 -00:11:23,610 --> 00:12:04,770 -Wes Bos: Yeah, absolutely. So the other one for me is is exercise I've been recently a couple past couple months, I've always been into exercise, but I've been like getting like super serious into it last couple months. And I find that good because I think it's the I'm really into like right now trying to become like more like mentally strong, because like having kids is exhausting. And trying to get all this stuff done. Like at certain times, you just feel a little bit overwhelmed and you feel a little bit sort of like bummed out on a lot of stuff because there's a lot being thrown at you. So I think that being taking like these new things and trying to figure it out definitely helps me become a better, more well rounded, well rounded developer. - -29 -00:12:04,799 --> 00:13:21,299 -Scott Tolinski: Yeah, on that exercise tip. Man, I read a book by this guy, Kelly starlet starlett, start let he's it's called How to be a supple leopard. It's a hilarious title name. But this guy. He goes from like teach. He goes from like, essentially professional sports team to professional sports team and teaches them like basic movement patterns. And I read this book, it's a tome, it's huge. And basically find out you're doing everything in life around from a push up to walking up the stairs. I mean, then he gets into basic movement patterns for you know, the bench press, and squat and all this stuff like that, and how, how these little sort of body mechanic tweaks that you can make to set yourself up for success a little bit more, really just make a huge difference. And it's so funny, because it's like, yeah, there's just an infinite amount to sort of go through and any of these things to progress yourself. Like after you get, you know, 20 push ups, you find out you can do them better, or you can do them differently, or you can, you know, yeah, we tweak your form a little bit this way or that way. There's just so much so much there. But also, if you're if you're into exercise, that book is awesome. He sees like a huge mobility guide. Definitely something to look into. Interesting - -30 -00:13:21,510 --> 00:13:22,380 -Unknown: out there. Check that out. - -31 -00:13:22,409 --> 00:13:37,169 -Scott Tolinski: Yeah. Okay. Next question. Is a hot dog sandwich. No, yeah, absolutely not. I don't know. And what universal hot dog sandwich. Sandwich. Sandwich. Yeah, - -32 -00:13:37,230 --> 00:14:01,140 -Wes Bos: a sandwich is a sandwich. a hotdog is its own class. Yeah, exactly. So next one. If Google, this is from Dan on Twitter, if Google realized they missed out by not hiring you and got back to you with a job offer today? Would you accept it? So last, the last episode, Scott and I both talked about how we both got rejected by Google. So would you take it Scott? - -33 -00:14:01,679 --> 00:14:24,840 -Scott Tolinski: If it involved me having to leave Denver, Colorado? I would say no. If they were like you could work in the boulder campus or work from home or something like that? I'd have a harder time saying no, or I would definitely be more interested to hear them out. But if it was like, you have to move to California right now, that would be huge. No, are pretty much musician or to be any, to be honest. - -34 -00:14:25,230 --> 00:15:32,370 -Wes Bos: Yeah, yeah. I'm the same way. Um, there's no I'm very glad that Google did turn me down because things panned out. Great for me. Like I moved to a smaller city that's really cool. It's, it's very cheap to live here. And by being able to do that, it allowed me to really just like, take some risks and focus down on my business. So I'm at a point now where like, I'm really trying to optimize career for for happiness and not necessarily for money. And that's cool to be able to do that. Because then I don't have to Don't have to worry about like commuting or like I was thinking that I was in New York this past week. And there's the traffic there is absolutely brutal. And there's these people in these very, very nice cars. And I, I turned to my wife, and I was like, no matter how nice of a car you have, you're still fucking sitting in traffic. Right? Like, unless you have a helicopter, you still have to sit in traffic in it. For me, it's just not worth that. Right. Like I'd rather be I'd rather go downstairs at 5:02pm and rather have that flexibility that I need. - -35 -00:15:32,940 --> 00:15:57,000 -Scott Tolinski: Yeah, and that's definitely the the traffic thing is a big one the commute in like not being able to just go into the mountains or something like going snowboarding during the weekend here. It's like a huge nightmare. So like being able to just go on a Wednesday or a Tuesday or like any random day is. It's just it's a it's a it's a luxury. I'm not sure I'm willing to give up. You know, - -36 -00:15:57,030 --> 00:16:51,330 -Wes Bos: yeah. Yeah. There's one of my favorite people in the world is Mike Rowe. Who who does the show Dirty Jobs. Yeah. And he has this I don't know where I heard at once. But he he just said this thing is like, Let's applaud the people who are willing to do the reverse commute. Which is is makes so much sense. Because it's like, literally, if you do the reverse commute, which is like you go the opposite way of traffic or like, in life, if you don't do the same thing as absolutely everybody. Like if you go and try to renew your health card to two hours before most people do it, you're not gonna have a line. Yeah, I think that like my whole life is trying to optimize for the reverse commute is do things at the exact opposite, do the exact opposite that most other people are doing. And life will be a little bit smoother for you. Because you you don't you're not chained to the nine to five, you don't have to do the same things as going snowboarding only on the weekend. You can go during the week, if you like - -37 -00:16:51,360 --> 00:16:54,570 -Scott Tolinski: yeah, and then things overall will be much more pleasant. Right. - -38 -00:16:56,070 --> 00:17:03,600 -Wes Bos: Exactly. I think that's that's one of the like the I guess it's people know that but working for yourself is that's one of the hugest benefits to being able to do it. - -39 -00:17:04,309 --> 00:17:10,200 -Scott Tolinski: Yeah, that is one of the hugest benefits, along with a whole bunch of stressful non benefits. - -40 -00:17:11,299 --> 00:17:13,980 -Wes Bos: Yeah, it kind of comes along with it, I guess. Yeah. - -41 -00:17:14,970 --> 00:17:34,500 -Scott Tolinski: Okay, cool. So let's see this next one. How did Wes and Scott meet? If I remember correctly, you had a react course. And I had a react course with the same name. And you reached out to me on twitter like, Hey, man, change your course. - -42 -00:17:35,730 --> 00:17:51,080 -Wes Bos: What are you doing? Yeah, but I think it was like, like, like two weeks apart. I had released react for beginners. And then you like a couple of weeks later you had released which you probably were working on at the same time as me. And you were it was called react for beginners. Yeah. And then I was like, Hey, could you not? - -43 -00:17:51,109 --> 00:18:22,980 -Scott Tolinski: Yeah. Which I which I knew that yours was out first. And yours was yours was like mine was like, just on YouTube? I mean, yours was like a product. So like, yeah, I'm like, Yeah, I don't want to get in the way of this stuff. So I had no problem changing mine, too. Which is funny, because I already had a naming structure, which was blank for everyone. I had Meteor for everyone. I Oh, yeah. All this stuff for everyone. And then I was like, I want to switch it up with this particular one for some reason, and then change it to react for beginners. And then it just happened to Yeah, to cause that collision. - -44 -00:18:24,150 --> 00:19:33,420 -Wes Bos: Yeah, that was pretty cool. And I'm glad you did that. And then what happened from there is that I had always been talking about starting up what's called a mastermind. So mastermind is a group of people who are in the similar industry to you, and you meet once a week or once every month. And you start to just sort of riff on on what's going on with you What problems you're having, what challenges you have, what's working, what's not working. And it was Scott and I and two other guys who also do sort of training tutorials in the space. And we did that for I don't know what maybe about six months or so once a week, we would meet up for about an hour and sort of just one person would take the lead in and explain. I don't know Facebook ads, or I remember Scott showed me his entire recording workflow. And like, we would just like get like details into like one thing that's working really well for us. And that was really, really helpful. We've since stopped. Just one of the guys took a full time job. And I think at certain point, you sort of stopped receiving value from specific things. And it just like, I don't think it was worth meeting like past the past all the info that we had sucked from each other's brains. Yeah. - -45 -00:19:33,420 --> 00:19:43,609 -Scott Tolinski: Yeah. And the guy got a little tough, too. I had a child and like he said, people were taking jobs and stuff like that. I think it was, yeah, just a little too difficult to maintain at that point. - -46 -00:19:43,980 --> 00:20:04,070 -Wes Bos: Yeah, I highly recommend though, getting a getting into a mastermind, especially if you're trying to run your own business, because you always left that feeling like really amped up because sometimes if the day in the day out, you can get a little bit tired of your own stuff. And being able to be re energized on a specific topic really, really helps. - -47 -00:20:04,099 --> 00:20:22,820 -Scott Tolinski: Yeah, I remember one, one meeting in particular, it was called make Scott cry because of this product page. I think that's, that's what we titled it. And it was just like, I left with like, maybe like 10 pages of notes, just ripping apart some of my store stuff. So I would definitely ton of value in there. - -48 -00:20:23,460 --> 00:22:10,740 -Wes Bos: Yeah, it's true, like people who, not just like the general public, but somebody who knows how to like sell products, they can look at your page and be like, Look, you're doing this wrong. This is like a hurdle for people, I don't really understand what's going on here. There's no really nice pictures. So it's helpful to have a group of other people in the same business. As you I know, there's there's people that are in like six or seven masterminds. And at that point, it becomes a little bit funnier. Actually, like it was really hard for us to meet because we really want it to just get to work. Yeah. But I know this delicate balance that you need there. Next one we have is what are your thoughts on CMS is adding JS frameworks like react? So WordPress is adding Gutenberg and that's all built on top of react are starting to see a lot of like CMS is change what they are doing, to to add in different types of frameworks. So I'll maybe I'll give it a shot. I think this is great, because I think the the direction that we are moving in is that we're seeing a lot of separation of your CMS and your your front end. So WordPress is still going to be extremely irrelevant. But maybe in five years, the whole WordPress theme plugin ecosystem will look a lot different. I think that WordPress is going to be a really nice back end CMS, where it at the end of the day, it just spits out JSON API or I graph qL, which is pretty neat. I'm looking at redoing my own WordPress website right now in the WP graph qL plugin, which is pretty nifty. So yeah, I think that those two things are becoming further and further apart. And it's really cool to see the CMS is sort of change up their their ways. Yeah, - -49 -00:22:10,770 --> 00:23:34,170 -Scott Tolinski: I think it's dope, I think I would love to see it even to some extent, you know, it's like, which framework Are you gonna pick? Right? I mean, everyone wants their favorite framework to be picked or to be the de facto framework for WordPress, or whatever. But I would love to see it be like pretty tightly coupled, like I would love to see react tightly coupled, where you're writing your entire theme and react instead of having to deal with the API dot whatever for your WordPress site and then hitting that API, like, it would be really cool if you didn't have to deal with any of that. And you just were able to write your themes more smoothly, in a nice little way that WordPress maybe does some magic for you to grab some of that stuff. But you know, whatever. It's it. Everyone's gonna have their own different versions of it. But I think, yeah, I think it's entirely necessary to go this way, because I think even some of the reasons why I don't want to build a site in WordPress today is because I don't get some of the awesome, you know, interactive stuff that I'm getting from react, I don't get those nice page changes and animations and stuff like that. They did nice UI stuff that you get from using a front end framework is much more difficult with just PHP loading up pages and stuff like that. So I love to see more integrations, more connections, all that stuff would love a nice tightly coupled WordPress and react. - -50 -00:23:35,490 --> 00:24:22,800 -Wes Bos: Yeah, I think that we're seeing a lot of the WordPress back end move to to react. And I don't think that the the theme system, I don't think that the killer, how do you build a theme? Or how do you build a website in one of these frameworks with WordPress? I don't think that's there yet. Yeah. Because like you and I, most people are not going to fire up a Redux store and architect this crazy thing and have it deploy because that's way too hard. So I think that at some point, we will start to see, this is the way that a lot of people are starting to build single page apps with WordPress. And I don't know what that is yet. But if you are a WordPress Dev, I would sort of sit on your hands for a little bit more in wait until to see like what are people building these things with? - -51 -00:24:22,830 --> 00:24:28,770 -Scott Tolinski: Yeah, definitely. Okay, next one. Where do you find remote work? - -52 -00:24:30,090 --> 00:25:23,250 -Wes Bos: Yes. This is from James chetwode. Thanks a lot for putting that in. Where do you find remote work? So I always tell this to people is there is no website there is no like there are websites out there. There's obviously lots of like postings, but as soon as good work gets posted online. It's a Puranas come to that and there's no way that you're going to be able to beat out like the 30,000 other people that email in for that type of work. So don't put any time into trying To find these like secret honey holes of amazing well paying remote work, if you need to, like go back to the freelance episode and go through that you need to work on your own brand. You need to work on getting yourself out there. You need to work on meeting a lot of people asking for work getting good referrals. And then once that ball starts rolling, then the work will always be coming in. - -53 -00:25:23,280 --> 00:26:32,010 -Scott Tolinski: Yeah, this is the second time that the word Honey Hole has been dropped on this. this. So I'm pretty psyched about that. But yeah, I agree. I mean, absolutely, there's so many things like that. It's like, you're going to build your network, you're going to want to talk to people and you're going to want to make relationships because I see on Twitter and stuff all the time people are saying I have a sweet remote gig open hit me up for more details and if you already knew that person that did that post then they're going to be more likely to recommend you for something like that or or maybe in the slack rooms we like on the level of tut's slack room we have a look a job board and you can post your jobs and other people can respond to them and we can talk to them. And I think it's it's just about forming those relationships with people who maybe know people that need work and are able to find that work for you. And you know, if you're not looking for like freelance work, but more like a full time remote a remote job. Yeah, I think it's it's all about grinding. Like I said, make those relationships to find out who's posting those jobs and apply for everything. Yeah, that's pretty much it. - -54 -00:26:32,700 --> 00:26:59,790 -Wes Bos: Yeah, exactly. Next one, this one didn't come from Twitter. This was in I have like a GitHub ama. And someone asked this one and I got a lot of thumbs up is what do you make your living from? So people see me sorta just tweeting all day and might not understand like, what do you do all day? Like? Where is where does your money come from? So I thought that'd be kind of a neat one to break down. Do you wanna go first year army? - -55 -00:26:59,940 --> 00:27:49,650 -Scott Tolinski: Yeah, I'll take this on. I have several revenue streams. So for me I, I do freelance web development work. So I take on maybe one or two freelance projects a month here and there, depending on how intense they are just because I like building stuff and, you know, keeps me working on stuff. I do. I do like premium tutorial content for companies. So you'll recognize my voice on figmas latest videos, or I've done videos actually for sketch before I've done them for companies just sort of all around, you'll, you'll maybe hear my voice here and there on tech training tutorial videos, because who knew that doing 1000 videos would set you up to this like really odd niche of being able to do screen recording tutorial videos for companies. - -56 -00:27:49,980 --> 00:27:50,580 -Wes Bos: Yeah, - -57 -00:27:50,820 --> 00:28:41,220 -Scott Tolinski: so that's sort of an odd one, right? But definitely is nice freelance gig, it's something that I really enjoyed doing. I do, I do actually get income from YouTube from ad revenue, despite it being pretty, pretty bare bones. It's, it's kind of rough at like some point it like totally cut in half. So it's not something you can rely on. But it's definitely something that comes in every month. And then I sell I have the level up tutorial store where I sell my tutorials. And I have the level up tutorials pro subscription, where you get access to all of the Pro Series, or you get I'm sorry, you get access to all of the series like any of the ones for sale or anything like that. So if if I would like to say next year, where would I like my income to come from? I would like it to come 100% from subscriptions or sales and be able to - -58 -00:28:41,250 --> 00:28:45,480 -Wes Bos: sign up right now folks, exactly right level up tutorials calm. - -59 -00:28:46,080 --> 00:29:02,760 -Scott Tolinski: Because that way, because I mean, that's my core competency, right. I love making tutorial videos. And if I could do that 100% of the time, I would be 100% in on that. But the reality is I have to pay bills and stuff like that take on freelance gigs and work my butt off to make it happen. So - -60 -00:29:02,820 --> 00:32:02,550 -Wes Bos: yeah, totally. Cool. So I am I haven't actually taken on any freelance work for about a year now. So I had done freelance work for or consulting, excuse me, high dollar co Yes, Yes, I did. I did consulting for about 10 years. And then I haven't done any year. Because now I am here. I'll let me run through it. So I have my free courses. And I have my paid courses. And generally where most of my income comes from is that somebody will take one of my free courses and they'll say like, Oh, I like the way this guy explains things. Or this is really good quality, or I specifically like this guy's font. Let me go ahead and buy one of the paid ones. So I've got those free ones. A lot of people who take the free ones will then finish that and want to learn more. So they go into my Patreon. So I'd say like 92.7% of my income comes from selling courses. That's sort of my my approach. bread and butter. But I do have like all these other smaller revenue streams. So on my courses, I sometimes will have sponsors. So I just tried this out recently with or about a year ago with my learn Redux course, I partnered up with a really cool company called century. They do like client side error logging, or they do error logging across the board. But specifically, I was showing how to use it with client side. So if you get like a console error that that happens in a specific browser, it'll, it'll like sort of like double it up. So century paid me to include one of their videos, one of the videos in the redex course, was how to use there. And it was like a perfect fit. Because, yeah, it was a product Kurt used, and they're willing to pay me some good money for that. So that was a kind of an interesting revenue stream for me. On my paid courses, you'll notice that you get a, I think it's a $25, credit to digitalocean when you buy my node course. And then what happens from that is that if any, you use up that $25, and then I forget what the the arrangement I have with them is, but at a certain point, if you become a paying customer of digitalocean, then I get a referral credit for for you signing up for that. So that was a good one. Most of this stuff comes from like negotiating custom deals with these companies, because they all do have affiliate relationships. But if you want something special, like like that, then you sort of like have a have a couple calls with the the people that work there. And often what it will be is that these companies reach out to me and they're like, hey, like, I'd love to work with you. Let me know any any ideas that you have. And that'll that'll usually I get a lot more, I probably only take about 1% of the stuff because it has to be a company that I've used before and that I actually believe like Sentry and Digital Ocean very good companies. I use both of their products before. And I was happy, happy to take their money when they wanted to do deals with my some of my courses. - -61 -00:32:02,580 --> 00:32:15,960 -Scott Tolinski: Yeah. And that's why when like, even like with figma, when they wanted me to do their training tutorial videos, I was just like, over the moon with that, because I already was wanting to do my own series. And I already used it daily. And I was just like, - -62 -00:32:16,320 --> 00:32:23,940 -Wes Bos: Yes, I would love to do that's that's ideal when you can be like, of course, I love your company. Right. And you can you can totally do a lot with that. Yeah, - -63 -00:32:23,940 --> 00:32:30,390 -Scott Tolinski: I think for both of us, though, it's at this point, it's like whatever you can do to make it to make it work, right. - -64 -00:32:30,929 --> 00:34:43,080 -Wes Bos: Yeah, exactly. Yeah. What also have I do workshops as well. So I just got back from CSS dev comp, where I did a react workshop. So often I'll go to conferences, and I'll do a talk, which sometimes you get paid to do a talk. It's usually not a whole lot, it's between. And I think the the most I've ever got paid for a conference was about 2000 bucks. And that was very rare. It's usually nothing or five 600 bucks for a conference that obviously will pay for your, your traveling accommodations at the same time as well. And then I also go in privately to companies, I don't have a whole lot of time for this right now. But it is very lucrative to be able to do that where a company needs to like for example, earlier, I went into a company that had 50 Angular developers and they needed to learn react. So I spent a couple days going in and training up all their their staff on react. And that's good. That's it. I really like that because generally the developers are all on the same page. So it's very easy to teach to somebody a team that is all on the same page. So workshops and then I have some some smaller affiliate stuff so make a couple hundred bucks on YouTube per month, obviously nowhere near Scott money, but it's it's good. Like, I'll take it if it pays for like a adds up at the end of the year. Yeah, right. Absolutely. Um, affiliate deals on Amazon affiliate. So if you go to my Users page, or if you click on any of our generally our sick pics, in this thing is Amazon affiliate links. So if you click through to that, and then buy anything on Amazon, we get a small cut of that. So that adds up to, I don't know, maybe thousand 2000 bucks a year Freshbooks. I have one blog post that's called things I wish I knew about being a sole proprietor. I wrote it like four years ago. But I consistently make 100 200 bucks a month off of that blog post that people signing up for Freshbooks. And then obviously, there's this podcast as well. We've got sponsors on it from time to time that that helped make putting our time into this podcast worth it. So all over the place, just a little bit, a little bit here a little bit there. It all adds up and it's well worth it. - -65 -00:34:43,109 --> 00:35:57,780 -Scott Tolinski: Yeah, absolutely. Okay, so next one, can a back end dev become a good designer? And this one's interesting to me because I I don't I don't see why not. I mean, none of them. Uh, like, I think some of these things is that people sort of occasionally view design as like an a nebulous sort of good versus bad sort of thing. But if you're a back end def tech, probably you have sort of a technical brain, right? And you can look at things technically, you can learn the technical aspects of design, and and use drew inspiration of getting inspiration from other places, but like, learn what mathematically would make a design nice in terms of like, font, vertical rhythm, and spacing and stuff like that, and your designs gonna look good. So I think you can be a good designer, regardless of anything, you just, you know, understand what your strengths are. And if your strengths are technical, understand what technically makes a good design, and then maybe good colors and visual aesthetics from an inspiration source, stuff like that. Because I'm personally not a designer, and I don't think my design is awful. I wouldn't necessarily put it in the - -66 -00:35:57,810 --> 00:35:59,580 -Unknown: nice stuff looks good. Okay. Well, - -67 -00:35:59,580 --> 00:36:11,760 -Scott Tolinski: there you have it. Yeah. So did I'm done? I have no design training, right? Like, I'm a developer and a musician and whatever. But I have no design training. So yeah, if I can do it, anyone can - -68 -00:36:12,660 --> 00:37:48,630 -Wes Bos: do exactly, I think, absolutely. I don't think that designers come out of the womb, understanding how to be able to current fonts, or pick colors, or any of this stuff. And what surprises me about design is that a lot of it is very technical and very rule based, meaning that there are a whole lot of things that you can learn that are sort of like rules, like put extra spacing here, make sure you increase your line height, have a good vertical rhythm with your, with your paragraphs, all these things all add up to technically nice looking design. There's obviously like the artistic side of it, where you you have a bit of an imagination and whatnot. But how I learned design was that I will used to be the the PSD to WordPress guy where people would drop a Photoshop file on my lap. And then I would have to try to duplicate that in code. And then what would happen is that you would sort of like overlay the Photoshop file on your code, and you realize, like, Oh, this needed 20 more pixels of margin or padding on it, and it looks so much better. Or this color is a little bit darker than this color. And there's all these like little like, the designers would just come back at me and be like, change this bump this over. And as annoying as that is you start to realize, like what actually makes up a nice looking design. So if you're a back end developer trying to get good, just go on, like themeforest or something and buy a couple of these really nice looking designs and just try to implement them exactly to what they look like in the Photoshop file or the sketch file. And that will really start to set in what makes something look good. - -69 -00:37:49,130 --> 00:38:21,030 -Scott Tolinski: Yeah, and ask for advice from designers who you know, aren't going to like, rip you to shreds, like I have a couple of designer friends that I'll shoot things to, and just be like, what do you think, you know, give it to me straight. And then they'll give me great feedback. You know, why don't know if the space is enough here or whatever. And you can look into it a little bit more. Sometimes they'll even give you a little bit more direct feedback as I move this over 10 pixels or something like that. But definitely asked for feedback. And don't be afraid of critique and grow. - -70 -00:38:21,060 --> 00:39:11,960 -Wes Bos: Exactly. One little tip I'll give you right now is I'm Steve Kroger scholar, I can't say his last name. But he is he's the guy behind hero patterns, calm all these really, really nice patterns. And what he's done is you know how I post like code tips on Twitter, he's sort of taken that and started posting little design tips that like things that make your website look just a little bit better. Whether it's colors, whether it's like these little things that you can do like put a like a lot of my websites, I often put a little bar at the top of my website like a boarder top on the body just to make it look a little a little nicer. And then he started just like tacs little things that you can add to your design. So go to his Twitter, and just scroll through the Media tab. And you can see a lot of these these little tips that he has. I think they're they're pretty nifty. - -71 -00:39:12,270 --> 00:39:12,840 -Scott Tolinski: Nice. - -72 -00:39:15,060 --> 00:39:24,840 -Wes Bos: Next up, what do we got here? Do you ever feel tired? Scott, this is a this is a great question. Because I think Scott and I both were up through the night with our little kids. - -73 -00:39:25,440 --> 00:39:26,580 -Unknown: Yeah, so I don't - -74 -00:39:26,580 --> 00:39:48,480 -Wes Bos: know, like what's I don't know what the answer to this is. But like I think a lot of people, they see us being online and posting lots of stuff and putting out all kinds of courses in it. It just seems like you're unstoppable. When the reality is that it is exhausting doing this stuff. So I don't know. Do you have any? Any thoughts or tips or anything on this? Yeah. - -75 -00:39:48,480 --> 00:39:57,710 -Scott Tolinski: You know that like George Michael from Arrested Development? Jeff, where he just like walks in and falls down on the floor and lays down that's me all the time. - -76 -00:39:57,980 --> 00:39:58,730 -Unknown: Like Yeah, - -77 -00:39:59,040 --> 00:41:13,940 -Scott Tolinski: yeah, no, I am I am tired. Yeah, definitely, especially since having a child. That has been definitely one of those things that like, totally shakes up everything. But you know, it's even finding time for anything at this point. I mean, I workout three days a week, and I go to breaking practice two days a week. And I record a ton of tutorial videos and do this podcast and all this stuff. But it's all about scheduling and maximizing the time that you do have, so that you can be helpful and take care of your life stuff in the other time. And still leave time for yourself to like, totally, just, you know, sink into the couch at some point. Like I don't Yeah, I certainly like leave periods of time like Sunday evening, when lane that Landon is my son when Landon's to bed. Like Sunday evening, I just, I go downstairs, I play some video games that I stretch. Because I love stretching, it's relaxing, and just like totally chill out. So I think having these moments of like being able to fully recharge are extremely important. If you're going to be the type of person who's doing a billion things. - -78 -00:41:14,820 --> 00:43:13,190 -Wes Bos: Yeah, I think that's good. I always get these questions on Twitter from people like do you even sleep? And I'm someone who needs at least eight hours, nine hours a night to sleep? Yes, I sleep a lot if I can, if my children allow me to. And I think like, sometimes you see these people online that are just putting out massive amounts. And maybe you think that about Scott and I but my answer to that is always the reason why it seems like I do a lot is because almost everything that I do is put out in public. So most people are working a job full time all day long. And then they put out a little bit open source at the end of the day, if they can squeeze it in, or as my entire job is putting up code, screenshots, videos, YouTube, Twitter, all that stuff, everything I do is put out online, there's not really a whole lot of stuff that gets done in private. So I guess there's a, it just looks like that. I definitely don't work more than than eight hours a day, which I think is really important to be able to have that sort of rest in that balance. And then I think the other one is right now is I'm just trying to figure out, like, Okay, I'm going to be perpetually exhausted for the next couple of years. Like, what can I do to try and hack that so that when I get to when I do have time to work, which is during the day that I'm on, and I'm absolutely slam dunking and making good use of that time. So I'm trying to I'm trying to figure out in terms of like, scheduling things. Obviously, the GTD mindset is really important trying to figure out like, how do I eat, right, so that I don't feel sluggish during the day? Because that's a waste of time as well. So this is not something that I have an answer to yet, but it's definitely something I'm actively I'm also trying to like hire like an assistant right now to do some work for me. So it's something maybe like, we'll come back in a couple of months and talk about this, because it's something I'm actively trying to figure out. Yeah. So don't be come a zombie. - -79 -00:43:13,230 --> 00:43:17,760 -Scott Tolinski: Yeah, we should talk about that, too, because I just hired a video editor to help me out too. - -80 -00:43:17,760 --> 00:43:18,840 -Wes Bos: Oh, awesome. Yeah. - -81 -00:43:18,840 --> 00:44:28,710 -Scott Tolinski: So I somebody I've actually worked with before to do some video editing. So I'm pretty psyched about that. Because I mean, I I like video editing, but it takes up so much of my time. And I have a lot of video to edit. I would be better off just recording a whole bunch, right? Yeah. But yeah, I mean, I feel Yeah, and I think some people like I've had people get on me at work before, like, like, I don't have time to work out, or I don't have time to take a 15 minute break, because I have to work 24 seven, like you're gonna work better and you're gonna sleep better, and you're gonna do all this stuff, if you take the time to work out or you take the time to take a break. Or you take this, whatever. I mean, I think in the past, I haven't been entirely good about keeping it as an eight hour workday. And I'm definitely getting way better about that. Now, although the eight hours isn't continuous, I'll work you know, five hours here, and then I'll go do something I have to you know, take care of take care of my son or watch my son while my wife works out or any of this sort of stuff. And maybe I can come back to it from seven to nine you know, after he's asleep and maybe that additional work even though it's not continuous is still not pushing that eight hour work limit. - -82 -00:44:30,270 --> 00:44:54,510 -Wes Bos: Yeah, yeah, absolutely. I that's one thing I'm having I'm slowly realizing I'm having a hard time grasping is that it's better to roll Orca seven hours a day and go to the gym during the day than it is to work eight hours and not go to the gym, which just like doesn't make any sense to me. But obviously it does work right because then you're, you're more focused and you're you're mentally stronger and all this kind of stuff. So yeah, I am - -83 -00:44:54,510 --> 00:45:03,030 -Scott Tolinski: interesting. I quit work yesterday at 330 to hit the gym. And then it was definitely Definitely something that I need to do. You know, - -84 -00:45:03,479 --> 00:45:19,440 -Wes Bos: that's cool. So if you are a parent as well, and maybe we'll do a whole show on parenting, but if you have any tips of how to get through this as well other than slam a bunch of coffee, because that only works so much. Then make sure you tweet it at syntax FM or Scott and I, we'd love to hear it. Yeah. - -85 -00:45:19,440 --> 00:45:31,230 -Scott Tolinski: Because slamming a bunch of coffee does work. to a certain point, yes. Yeah, I'm currently slammed on a bunch of coffee, and it's not doing me a whole lot of good. - -86 -00:45:33,150 --> 00:45:49,470 -Wes Bos: Next one is a live streaming. I know Scott does a bunch of live streaming. I've only ever done it once. So people are asking like, will you ever live stream? What are your thoughts on it? So? myself? I don't know. Maybe I'll actually let's hear from Scott first because Scott does a lot of live streaming. Do you like it? - -87 -00:45:49,979 --> 00:47:12,540 -Scott Tolinski: Yeah, I like live streaming, because I could just like talk for a long time about, like, if it's a topic that I'm interested in, or whatever, like I did the latest one on figma. And the whole thing was how I use figma in my designs, and as a aside from the technical issues of live streaming, which I apparently this is like my fifth time live streaming or whatever. I apparently cannot get one right and with absolutely no, she's I haven't had one single one go off without a hitch. Like this time it was broadcasting and for at for some reason, instead of 1080. And just like, gosh, darn it, like one time Can I get this going without having a whole bunch of tech issues? But yeah, which is ironic, because I feel like I'm a video tech kind of person. Yeah, whatever. So I, I do like live streaming a lot. And especially if it's a topic I'm interested in talking about I, I don't I don't write scripts for any of my tutorial videos. So I do them all sort of freestyle on the mic. And yeah, I think for that aspect, I think I could be pretty decent. Like, I feel like if I, I planned a tutorial, I could do a live stream tutorial and have it be just as good as one of my recorded and edited ones. So I'd be totally in for a syntax live stream. Yeah, Wes would be and I don't think we make we don't have too many mess ups outside of my dogs barking or something like that. - -88 -00:47:14,010 --> 00:48:20,130 -Wes Bos: Yeah, I think it'd be kind of cool to do some sort of live stream. I've done a couple on Facebook just to test the waters where I'm sort of just answering questions. So to being out on on video, I haven't done any live coding stuff just yet. But I am, I am really interested in that just because I'm really scared that Twitter is going to go away sometime soon. And Twitter is a huge part of my business. And like, I've obviously put a lot of stock into Twitter. But I like I realized that there's a whole younger crowd that isn't on Twitter, they're spending their time on whether it's Twitch, or they're on Instagram, or I know they're on different platforms. And I'm like sort of trying to double down right now and figure out how do I how do I make these other things as big as as my Twitter and my email list. So live streaming is definitely near the top of that list. And it's fun as well, because you can sort of like interact with people and people ask for it fairly often. And it's a little bit more more casual than some of my video stuff, which is a little bit more refined. - -89 -00:48:20,340 --> 00:48:59,850 -Scott Tolinski: Yeah, I had a tip I have for live coding is if you are going to live code something, make sure it's something you've done before. I've had like a couple of them where I'm like, I'm gonna just gonna figure this out and like being live on air and having people in the comments being like, just not not being rude or something. But people have been like, well, he's struggling, like, Yeah, he's just like, never done this before. And it's hard to read documentation and look at your code while like you have all that stuff going on. So I think if it's something you've done 100 times before, it'll be way easier. But yeah, can I recommend Yes, figuring something out for the first time. - -90 -00:49:01,440 --> 00:49:34,860 -Wes Bos: I'm curious if you are a developer who likes to watch live streams, or if you don't like to watch it, like, tweet me and let me know because like, I myself have tried to watch live streams. And I find it so boring, because it's not to the point like it's not maybe like because it's a lot like my stuff is it was really nice and clean and efficient. Whereas a live stream is kind of just me talking a little bit slower. And I feel like I don't get to the actual points more like just hanging out and watching someone code. So let me know what your thoughts are on watching people live stream versus a sort of a more produced tutorial, like I put out - -91 -00:49:34,860 --> 00:49:45,180 -Scott Tolinski: Yeah, yeah, definitely. Okay, what stack? Should new developers use? This is an impossible question to answer. Yeah, yeah. - -92 -00:49:45,210 --> 00:49:47,700 -Unknown: It doesn't matter. Yeah. new developers? I - -93 -00:49:47,700 --> 00:50:18,420 -Scott Tolinski: don't I don't know. It depends on what you're trying to learn. Right. I mean, I don't know new if you're a new developer, my my stack is HTML and CSS. And then yeah, go learn some little JavaScript here and there, but like, I Don't know if you if you want to, if you want to be a new develop the Mamp, stack and WordPress and then I honestly don't know if you want to learn react, maybe the something like next j. s or Gatsby? And if you want to learn a database? I don't know. - -94 -00:50:19,980 --> 00:51:43,140 -Wes Bos: Yeah, I don't think that's always such a hard, hard question to answer because people just want to be told exactly what to do. And the answer is you sort of have to flounder around on a few things. And one, I still, I still think WordPress is a very good first web development, Introduction to people, whether you like it or not, it's, it's like a database back end for you without really having no having to know anything about server side, like, you have to figure out PHP tags and loops. But you'll have to figure that out with any templating language. So I think that's a really good really good starting point to get started on. And then otherwise, I think the whole like men stack Mongo, express node plus insert whatever framework you're interested in, or just using, like a pug or a jade templating. on the server side, I think that's really good to sort of get you up and running. That's specifically why my node course doesn't have react in it is because there's this whole, like, mindset that you need to sort of get into when you're understanding how does the server side work? And how do requests happen? And how, what is authentication? And what is this difference between a session and j WT, and whatnot? So I think that that's a really good one. I'm obviously biased, because that's the stack I use. But other people might say, Ruby is a really good introduction stack. I think you just sort of like, pick one, and stick with it and try to build something all the way through to the end. - -95 -00:51:43,230 --> 00:52:05,490 -Scott Tolinski: Yeah. Agreed. Yeah. And like, I like what he said about WordPress and mean, because it does, it abstracts a lot of that stuff that's really tough and really confusing. When you don't know like, why isn't this just working? I'll lead and do this, and this, and this, and this, and this. And WordPress does those things for you. And then you just don't have to worry about them. And you can focus on learning about the patterns of what working in something like that is actually like, - -96 -00:52:05,550 --> 00:52:45,960 -Wes Bos: exactly. And there's such a huge community of people who are at that point where they're new developers, or they've been at it for a couple years, and they're not so far advanced that like, I don't know, the stop debugging WordPress is easier, I think, than some of this node stuff to beginners, because node will often give you a really big stack trace and being able to read through that and go through it is kind of tough. I know the WordPress does give you PHP gives you some weird errors as well. But there's always like a chatroom or WordPress Facebook group or something of people who are willing to help you through whatever that tough part - -97 -00:52:45,960 --> 00:53:10,680 -Scott Tolinski: is. Yeah. And you can even like find snippets, like, how do I do this, and there's like always a hit result, because you have to do it. And maybe you don't understand why or whatever. But you paste in your code gives you an opportunity to learn and read. Maybe you can go to the Codex from there and see exactly what you're doing. But it gives you a little bit more opportunities, because there are people that have answers for you instead of just like, I don't know, figure it out. Good luck. Yeah, yeah. - -98 -00:53:11,970 --> 00:53:12,660 -Unknown: Okay, - -99 -00:53:12,990 --> 00:53:51,420 -Wes Bos: next one up. Do we got two more quick questions? What is your process for picking new tools from Tim Arnie on Twitter Tim? Tim runs this really nice react website react fair was called we'll link it up in the in the show notes. But if you're interested in a really good resource for react, check out his site. But uh, yeah, new tool. So something new comes your way like, like coffee cup j s, which is the best new framework tool for transpiling? compiling your, I don't know, the post it notes into react applications. Yes. How do you decide whether that's a good tool or not? - -100 -00:53:51,660 --> 00:55:28,680 -Scott Tolinski: Yeah, for me, there's a couple of things that the readme the documentation, like, if a readme doesn't tell you what the heck this thing is, and what it's doing and like the first couple of seconds, like in plain English, sometimes it's, it gets so jargony fill that so this in this in this for these in these in these reasons. Okay, but like, what's it going to make you do like, what what are you going to get out of it? Is it going to make you develop react sites faster, is it's entirely own thing. It's a user interface, building tool, whatever, like, so having some sort of like clear understanding about what this thing is, and why you would want it in a readme is, is the surefire way that I'm not going to click out of it immediately. Just be like, I have no idea what this is or why I would need it. And I guess second is killer demo. I'm like an eye test kind of person. I'm very visual. So like, if there's a killer demo, and your thing is the reason why this demo is so killer, I'm going to be way more inclined to be like, give me that. Give me that now, you know, like, Yeah, I remember the first time I saw a meteor demo, and they were just like, oh, everyone in this room. Here's the textbox you enter anything in this textbox and it's suddenly just going to populate and guess what this took me Like no lines of code to make, I was just like, so that's really cool. I want to do that right now, I could not do that without a whole lot of code with node and WebSockets. And whatever, right? So the killer demo and the nice README and nice looking set of API Doc's, I don't have to get into them. But like, if they look like they're organized and make sense, then that's all good for me that that's pretty much it. Also, if I can see an immediate benefit of how it's going to make my life cooler. So - -101 -00:55:28,770 --> 00:57:42,120 -Wes Bos: yeah, awesome. For me, I am much more of like a like a wait and wait and see kind of guy, I don't jump on tools, when they're brand new, because they will inevitably change, they'll never be break my actual application, I don't want to have to babysit something like that. So I always wait until there is sort of like you can like really tell that there's a lot of people behind a specific tool. And a lot of people are just like, praising it. Like, for example, on Apollo, I've been watching Apollo graph qL for like a year now. And it just seems to be at the point now where I talk to enough people who are using it in production. And it seems like it's at a really good spot where I can start to implement it into my apps without having to worry too much. So I just like let other people get bit by that bleeding edge. And once they're healed up and feeling a little bit better about it, then I'll jump into it. Yeah, yeah. And I think that's important not to like not to worry too much about, especially specifically with tooling that's out there. If you see a whole bunch of people that are using a specific tool, and you don't necessarily know, know why, obviously ask questions and see why. But it might not necessarily be the thing that you need, like, I feel that way about Webpack. Right now where absolutely, everybody's moving to Webpack. And it's really hard. It's It's way too hard for for what it is, and we're not all we're all doing similar stuff. And I just don't it's obviously one of the most powerful tools that's come around in a long, long time. But it's I think it's way too hard for for just us regular people who, who need to be able to use it. So I'm sort of just like, I don't use Webpack, all that much. I use these tools that sit on top of Webpack, like next jass or I know Meteor has something baked into it and, and whatnot. Or if if you are fine with your current Gulp setup that you've had for a couple of years, and you don't necessarily need something like code splitting or whatever, then it's totally fine to just be happy with with what you have. And I think at a certain point, you will realize why people are using tools and why you might want to, to move over to it. Yeah, - -102 -00:57:42,120 --> 00:58:02,370 -Scott Tolinski: yeah. Yeah. And a bunch of big names and big sites production using this doesn't hurt either. Right. And you found out Facebook had how x minnow react components, and they were going all in on it, you know, that gives it that proof that it's being used by big company to do big things. Yeah, yeah, absolutely. - -103 -00:58:02,610 --> 00:58:18,540 -Wes Bos: That's sort of the nice thing is react will always be used by facebook.com. Before it's put out for the rest of us. So you know that like, you'll likely find any bugs, because facebook.com is running it before, like syntax, FM. - -104 -00:58:19,980 --> 00:58:21,840 -Scott Tolinski: They have all the incentive in the world. - -105 -00:58:22,170 --> 00:58:24,330 -Wes Bos: So to make sure that it's good, yeah, - -106 -00:58:24,360 --> 00:58:41,700 -Scott Tolinski: totally performative. All I'm sorry, performance. Dang that, there we go. Someone corrected me that I said performative. And the word is performance. And I promise to remember that and I did remember that. Oh, so there I There you go. happy about that. Okay. Okay, last question here. - -107 -00:58:42,720 --> 00:58:49,080 -Wes Bos: This is one of those those questions. Why don't you read it off? It's one of those questions that I usually don't entertain, but I thought it'd be interesting. Yeah. So where - -108 -00:58:49,080 --> 00:58:51,510 -Scott Tolinski: do you see yourself in five years? - -109 -00:58:51,510 --> 01:00:08,910 -Wes Bos: Yeah. So it's, there's a q&a at the conference I was just at and one of the rules in the q&a was, do Don't ask questions about the future. Because I don't know I don't make any bets on the future. I react to stuff happening. So. But where do I see myself in five years? I don't know. Let's take a gander at this. I think I still think I still think JavaScript will be big. I know that we've been hearing rumblings rumblings of, what is it wasum webassembly, webassembly. webassembly. We're hearing rumblings of that for for a couple of years lately. So maybe that will be a thing. Maybe it won't be. I think that in five years, I see myself just still reacting to whatever it is that we're building applications, right. Like maybe JavaScript won't be anywhere in five years, maybe we will have abandoned it. And that's that's fine with me, because I'm not, I don't put obviously all my my eggs are in the JavaScript basket right now. But I know that I can react to whatever it is that we need to switch over to and learn, right, like at the end of the day, I'm a developer. And if we somehow shut down the web, and start just building it have apps or if we go the total opposite way where absolutely everything is done in, in JavaScript, I know that I will be able to react and sort of play along with that. - -110 -01:00:09,450 --> 01:02:01,920 -Scott Tolinski: Yeah. Yeah, I think that's the the only way to look at this. Because then think about five years ago, were you working in react? Did you know what react was? Did react exist? And no idea? No, you know, some JavaScript stuff. Sure. What, five years ago? Wait, I don't even know what I was doing five years ago. But I think the one was that that was 2012. Whoo. So I wasn't even I wasn't doing any. I was doing very minor Angular stuff. Maybe? No, 2012? No, that was pre Angular for me. Yeah, as I was doing Drupal sites in 2012, Drupal. So it's, you, you can't really comprehend where you're going to be in five years. And if you think you can, then you're totally wrong. So, you know, five years ago, I didn't even know anything about the city of Denver. And now it's like, my favorite place in the entire world. Like, you just can't predict, I couldn't predict that I would get a chance to interview at Google. I couldn't predict that. Well, I guess I probably could predict that I would have a son, or a child, not a son, but a child at this point. Yeah. Okay. Sure. That's like maybe one thing. So in five years, I would like, here's what I'd like I would like to be I'm still teaching web development or development or technical anything. Who knows, maybe we're all going to be living in virtual reality or augmented reality by then. And instead of me on YouTube, I'm like sitting on your desk. And I'm like pointing at CIT on your computer. Like here, look here, right here is the bug. But I think you can't really, I think you can't, I can't You can't plan for anything like that. And planning for stuff like that is only going to hold you back for what you can accomplish. Because, in the essence, the reality of it is if if you're saying in five years, I want to be building this, then maybe you're selling yourself short, because you could have been building then two years or one year and you was part of your five year plan or something like that. - -111 -01:02:02,070 --> 01:02:20,700 -Wes Bos: So yeah, my father, he should Yeah. should be looking in like shorter amounts of time. To see like, what that looks like, you should be like having goals for three months, six months, a year out at at the most? Because anything else is just guessing. And that's that's sort of a waste of time. - -112 -01:02:20,729 --> 01:02:59,730 -Scott Tolinski: Yeah. yearly resolutions? No, thanks. I used to do a monthly resolutions. In fact, the first app that I built in Rails was a monthly resolution app that I would use for myself to keep track of my monthly resolutions. I'm going to do this this month, or whatever and get better at it. Actually, it's one of my I think it was my first Meteor tutorial to I did the monthly resolutions app, but either way, yeah, a five year plan. I have no clue. Hopefully, I'm healthy and probably still able to dance in some capacity. Probably not spin on my head or stuff like that. But that's it. Yeah. - -113 -01:03:00,390 --> 01:03:22,500 -Wes Bos: Awesome. So hopefully, that was some some tasty treats in a q&a form. If you like this form of show versus the the one specific topic, let us know we won't do it all the time. And all that can sort of drag on but every now and then it's nice to to answer these smaller questions and get a little bit into it. We could even do a live stream. - -114 -01:03:22,730 --> 01:03:26,460 -Unknown: q&a. Tommy actually really fun might be a nice way to do a live stream. - -115 -01:03:26,730 --> 01:03:34,680 -Wes Bos: Just let people that's a great idea. If you'd like to see a live stream, tweet us, let us know what you think about it. We're gonna move into some sick pics. Oh, - -116 -01:03:34,920 --> 01:03:35,580 -Unknown: yes. - -117 -01:03:35,580 --> 01:03:37,890 -Wes Bos: What do you what do you got for me today, Scott? Oh, yeah, so - -118 -01:03:38,100 --> 01:05:16,920 -Scott Tolinski: this one came up? In a Twitter question. Yesterday someone asked me what kind of notebook I like to use. I want a big notebook fan. I like to use notebooks but you know I have no book the movie or yes no book the movie not I see notebook the movie but only only once. Only if it's a good date film, you know the date film, but not for me. Other than that. I'm definitely i'm a i'm not like in like sort of a weird movie. I have a weird movie tastes I watch a lot of like 1970s Chinese Kung Fu films. So my movie tastes are not to be. Okay, so my notebook here I'm trying to show it to you even though it's not on camera here on the radio. So is a five star like the brand that you used when you were in high school or middle school. It's a five star spiral notebook with a plastic cover that I got once from one of my employers just had a stocked cabinet full of these things. And they were like, the one I use, I think it's like maybe 250 pages. It's it's pretty thick here. And it's spiral bound so you don't have to worry about a cover anything like that, but you get big old graph paper on it. So I get a graph paper five star spiral notebook gives you a ton of real estate. It is not fancy at all. It does not look cool and black, like a moleskin. I have a couple of those, but I just don't use them as much. Because the thing you can always have folded open on your desk and the same there has a billion pages in it cost $1. So and it's awesome. So my five star notebook is my pick for notebooks. - -119 -01:05:17,909 --> 01:07:32,280 -Wes Bos: It's pretty sweet. My sick pick today is more of like a life pro tip. And that is like read your credit card manual. So I just got back from a trip to New York and my wife's luggage was delayed for about nine hours. So they didn't throw it on the plane for whatever reason. And then she got it like nine hours later. But I know that and this is the reason why whenever I do a conference, I was booked my own travel with my own credit card and get them to reimburse me because my credit card has like travel insurance and all these like sort of like nice little gotcha things. Where if your flight is delayed more than five hours or if your bags are delayed more than six hours, they will often cover hotel or food or in the case of my wife's this weekend, they're covering up to $500 worth of clothing and like like makeup and things from the drugstore which is pretty sweet. So and being able to know what exactly your credit card covers by just like reading the little manual that comes with it is great because we've This is like I think this is the third time that I've actually used my credit card insurance. Um, previously. My my wife's MacBook got a glass of water dumped on it. And what my credit card does is it doubles the the warranty for the thing. So Apple care, said it's gonna cost I think they said 2800 bucks, or 1800 I think was 1800 bucks to fix it. So I just took that quote to to my credit card company. And then they sent me a check for exactly that much Oh, and bought a new MacBook, which is amazing. Yeah. What else and then I've also used that I was like, delayed my flight was delayed due to weather and if the airline delays your flight overnight due to weather, they don't care because it's it's not it's beyond their thing, right? Like it's not like they crashed a plane or something like that. So I was able to go into a nice they gave me $500 for the night and I was able to buy a nice steak and get a nice hotel and fly out in the morning right? Like I've used this things like three times now. And it's it's just because I actually went ahead and read all of the the different perks that come along with your your actual credit card. Just pretty pretty nifty. Yeah, - -120 -01:07:32,280 --> 01:07:34,290 -Scott Tolinski: I like steak was the important part there. - -121 -01:07:34,470 --> 01:08:32,970 -Wes Bos: The steak was the important part. Yeah. And also, like, I know, people always say like, Don't buy the extended warranty. But the amount of times that I've actually like cashed in on that extended warranty is like crazy. Like I've bought squaretrade for squaretrade my monitor a couple times. And last time it like my monitor croaked like a month before the square trade was up. And because it was a three year old monitor and I had bought it for like $600 and it was worth like nothing after three years, they cut me a check for the exact amount that was that I paid for three years ago. So then you just take that check and you go buy a brand new one that obviously it's much better technology out of 4k one instead at that time. So it's I don't know people are really against these like extended warranties and whatnot. But if you if you start to like weigh the benefits and you know that something like a monitor is gonna croak in a couple years then you you know you're covered for that and I've definitely used them more times than I can count. - -122 -01:08:33,539 --> 01:08:45,300 -Scott Tolinski: Yeah, yeah, totally. Yeah, if I see that's the whole thing if I would have had a square trade on that phone that I shattered I would have gotten a new phone and then I got one on the next phone and didn't shatter but that's how it goes. - -123 -01:08:45,350 --> 01:09:20,550 -Wes Bos: Yeah, that's Yeah, that's that's how the cookie crumbles. Yeah, but before everyone asked me the visa is a it's called the arrow gold it's just like it's like a pretty popular business card here in Canada. But I know that every most most credit cards that you get will have some sort of like if your stuff gets stolen or if you if your stuff is damaged within six months or whatever they just go and read all the documentation for your credit card and know exactly what you're covered under and then use your credit card This is probably bad advice but use your credit card to buy everything obviously but pay it off too. - -124 -01:09:20,760 --> 01:09:21,329 -Unknown: Yeah right - -125 -01:09:21,329 --> 01:09:32,600 -Scott Tolinski: yeah, that's a sick pic right there. I have no that's a big enough into that and we got to make this soundboard I had a request for the soundboard awesome soundboard needs to happen. - -126 -01:09:33,180 --> 01:09:57,600 -Wes Bos: Ya know what I also want to do is go on like Fiverr and get one of those like radio. Oh, you're welcome good. Yeah, we're sorry like that. We should we should do that. It's like five bucks. I'm gonna do that. All right, cool. Well, that's another show in the bag. In the Honey Hole, man, it's another showing that's another Honey Hole and the in the are another show in the honey Hall. - -127 -01:09:58,020 --> 01:09:59,670 -Scott Tolinski: This region here and grab it. Yeah. - -128 -01:10:00,000 --> 01:10:03,979 -Wes Bos: Hopefully you had some tasty treats, and we'll see you next week. - -129 -01:10:04,310 --> 01:10:17,850 -Scott Tolinski: Please head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show until next time - diff --git a/transcripts/Syntax160.srt b/transcripts/Syntax160.srt deleted file mode 100644 index ce60fa112..000000000 --- a/transcripts/Syntax160.srt +++ /dev/null @@ -1,404 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,820 --> 00:00:55,080 -Wes Bos: podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. Welcome to syntax, the podcast with the tastiest web development treats. This is an episode I've been really excited about for a couple of months now because it sort of merges all of my interests into one. So we have Jason ball on who's the author of WP graph QL. And we're gonna be talking all about like WordPress, headless WordPress graph qL and WordPress, I'm sure we'll talk about like frameworks, like things like react and WordPress, so I'm really excited about it. We'll get into that and choose Jason in just a second. Today, we are sponsored by two awesome companies. One is Sanity. And the other is Log Rocket. We'll talk about them partway through the episode. With me as always, today is Mr. Scott Tolinksi. How you doing today, - -3 -00:00:55,289 --> 00:01:10,050 -Scott Tolinski: Scott? on doing super good. I think this might be the single most sleep deprived episode of syntax since our since the start of recording. Wes and I are both newly I don't know, newly Christian with the new babies. Yeah, to say that. Yeah. - -4 -00:01:10,139 --> 00:01:28,800 -Wes Bos: So my kids have been running around telling people. So for those who don't know, I just had my baby boy, which is kick boss is his name. And we had him what, three or four days ago now, and yeah, I'm feeling pretty good. He's very easiest baby so far, but that's good. We're cautiously optimistic. - -5 -00:01:30,600 --> 00:02:21,330 -Scott Tolinski: Yeah, yeah, Brooklyn's doing a lot of sleeping. And that is good for us as well. So we are we are pretty psyched about this one. But yeah, I'm doing I'm doing good. I'm pounded to cold brew. So I should be should be somewhat lucid and ready to talk about WordPress and graph QL. I mean, this is these sub subject. I'm like, very, very psyched about so we got a billion questions for JSON. What's my word? a JSON. That was a happy accident. That was great. Just to show you where my brains at today. But yeah, no, no, good. Wes. and I were talking before the show started, we just couldn't believe how many questions we had for Jason here. And I hopefully, our questions lined with your questions, and we get everything answered. And you all feel like you got a whole lot out of this episode, because I'm personally feeling like, I'm going to get a whole lot out of this episode. Mm hmm. - -6 -00:02:21,360 --> 00:02:23,660 -Wes Bos: So JSON, tell us about yourself. - -7 -00:02:23,690 --> 00:02:42,840 -Unknown: Yeah. My name is Jason ball. I've been working on WP graph qL for about two and a half years, been working with WordPress for over a decade at this point, full time in various roles. Yeah. I don't know. I love open source in general. I'm happy to give back with, you know, something I'm passionate about. - -8 -00:02:42,930 --> 00:02:58,710 -Wes Bos: That's awesome. So you recently, I saw that you had left your current job to work on WP graph qL full time. And then just like, I don't know, like 10 minutes ago, I got a message from you. You have some exciting news, which I we didn't even know. But you want to tell us about - -9 -00:02:58,710 --> 00:04:22,920 -Unknown: that? Yeah. So a couple of weeks ago, myself and Kyle Matthews had some conversations. Kyle Matthews is the CO creator, I believe of Gatsby heads that up. So I chatted with Kyle and Sam. And basically they said, Hey, we like what you're doing with WP graph QL. We've got a lot going on with Gatsby and WordPress, and having some issues with the REST API. We think that a native graph qL implementation on WordPress is kind of the way to go to bridge the gap between the two technologies, using Gatsby for your static site, front end and WordPress as your CMS back end. And so we chatted and they said, Hey, we'd love to have you join the team. So you can work on WP graph qL full time without distractions. I have a day job. And so I obviously accepted. So I'm joining their team starting on what is it June 24. And my primary focus will be WP graph QL. Just get it to because we're still in beta, right? We're not at a 1.0 yet. So one of the early focuses is going to be just getting that to stable point work out some of the kinks we know about now. And then make sure Gatsby has a first class you know, integration between WordPress and Gatsby. But also WP graph qL should work well for any client, not just Gatsby. So well, - -10 -00:04:22,980 --> 00:04:52,800 -Scott Tolinski: why it seems like a rabbit. Yeah, it seems like something then I think is a smart move for Gatsby considering how much of the web is powered by WordPress and Gatsby seems to be such an excellent choice for teams that are looking to maybe upgrade the front end of their WordPress site that maybe is already existing. And so for them to to invest you know time and talent into sort of the WordPress Gatsby seen just the WordPress scene in general, I think it's a really smart move for them. - -11 -00:04:54,720 --> 00:06:28,710 -Wes Bos: Um, so let's let's talk about data in WordPress real quick and then we can sort of get into depth P graph QL. So the sort of the basic way to get data in WordPress is you make a theme. And these themes by default will will have sort of data like available to them inside what is called the loop. And then if you want to have like custom data, like you want to have like a homepage that pulls in your recent posts, and, and the members have your company and a list of your stores and like a tag cloud, remember, that was the best tag cloud and all of that data, if you want all of that available to you on a single page, you have to go off and write a bunch of custom queries with either the get posts or the WP query class that they have in there. And then you loop over each of those and whatnot. A couple years ago, WordPress started working on the the WordPress JSON API, which allows you to have endpoints for hitting them and just going and grabbing those different pieces of data. Which is great, because if you are trying to build something with a WordPress back end, and you want to pull in that data, even if you're just doing a regular WordPress theme, and you want to like be constantly refreshing posts, or for whatever reason, if you want to fetch that data outside of a regular WordPress theme, that's what the the WordPress REST API is for, as well as there's a whole bunch of like mutations there where you can push data to. And so that's good. And but so you've come along and created a sort of graph qL interface for actually fetching data. You want to tell us a little about like, like, What is it? What is WP graph? qL? And why did you make this thing? - -12 -00:06:28,740 --> 00:08:15,360 -Unknown: Yeah, so what is it I'll start there. So WP graph, qL is a makes if you install the plugin, it's a plugin currently, if you install the plugin, it makes your WordPress site a graph qL server. And what that means is that you can use the graph qL query language, which is a specification not tied to any specific technology bits, a specification for how to make how to write queries and how a server should respond with data. So your WordPress site becomes a graph qL server. So now you can, you'll have a graph a slash graph, qL endpoint, so you get a single endpoint. And then you can write queries this using HTTP requests, you can write a graph qL query to ask for any number of resources, and in response would get a JSON payload, matching the shape of the data that you asked for. And right now we support like pretty much all the chord data that WordPress ships with like posts and pages and custom post types, tags, categories, and custom taxonomies, comments, users all that stuff. So out of the box, you just activate the plugin, you get an endpoint, you can start writing graph qL queries against that endpoint and getting data back. It's almost like a hybrid between the two things you mentioned, like WP query on the server side that allows you to get data kind of in a flexible manner. And rest allows you to get it over an endpoint where rest isn't so flexible. It's like a resource per endpoint. And web query, you can combine like you could query on a single page for, let's say, comments and pages and posts like if you want it to. And WP graph qL allows you to query for many resources in one request, where rest is kind of like one resource. And then if you want another resource connected to it, you have to follow up with another request. Mm hmm. Like - -13 -00:08:15,389 --> 00:08:46,230 -Wes Bos: so if you've got a list of users, and you want to, you want to pull in those users, maybe you want to pull in their posts, and for each of those posts, you want to pull in the categories. And for each of those categories, you want to pull in the description, like that's often in WordPress, that's like two or three different queries. And then you have to do like a weird PHP loop where you're like, you were like, rebuild it almost like a like a there's a there's math in PHP, right? Yeah, you just map over it and create you need it does. So does does WP graph qL? Get rid of that where you can do relational queries? - -14 -00:08:46,260 --> 00:10:09,750 -Unknown: Yes, it does. And it actually makes it more efficient. If you did it the way that you talked about, like in PHP, you'd probably write something like a WP user query, let's say to get 10 users. So that's one query, and then you're going to iterate over that. And you'll probably say, Get 10 posts for user one, get 10 posts for user to get 10 posts for user three. So for 10 posts, you're gonna write 10 more queries to get 10 posts for each user graph QL. Since you since we know ahead, what data you're asking for, we can make use of what's called deferred resolving, or in greater graph QL. And it's called Data Loader. And this allows, this allows us to say, okay, you're asking for users, and you're asking for their posts, I'm going to write the one query to get all 10 users. And I'm going to wait until I have all 10 users and write one query to get all posts for all 10 users. So instead of 11 queries behind the scene, talking to SQL, it ends up being two queries. So that's kind of the gist of it. So since you're asking for your data up front, it's smart enough to be able to make some of those optimizations for you. So yeah, it's less code for you to write because you can just in graph qL syntax say, here's what I want. I don't really care how I get it, but this is what I want. Graph qL is gonna figure out the how for you, and then give you the data back. So it's Yeah, yeah, it's pretty cool. - -15 -00:10:10,710 --> 00:10:47,149 -Scott Tolinski: Yeah, that was my own personal experience with graph. qL is like one of the biggest benefits is that it? You do you don't worry about how you're getting the data from the API, except for when you're writing the API, you just worry about what the data you want is, I'm a little bit curious. Because obviously, you said you've been working in WordPress for over a decade. I'm interested in maybe how you came about graph qL initially, and maybe like, what some of your initial thoughts were when you saw graph qL when you first started to use it, and maybe how this sort of idea for Oh, hey, I should be working on a WordPress implementation of this even came about? - -16 -00:10:47,189 --> 00:15:36,240 -Unknown: Yeah, sure. So yeah, so I've been Yeah, like you said, working with WordPress for a decade or so mostly, mostly building just like sites, right, like, like most people in WordPress, worked for a couple agencies, building sites for realtors, and or like real estate, Home Builders and stuff, built some auto dealer websites, but all sorts of stuff. Now, for the past four years, I've been working for a newspaper publisher, we have about 100 newspapers across the United States. And we do a lot of content syndication. So like two papers, for example that we have are the Denver Post and boulder David camera, which are I don't know what 50 miles away from each other something. boulder is a smaller town has less coverage, like in the newsroom. So Denver Post, let's say they write a news article about the Denver Broncos, Boulder daily camera can say hey, we don't have reporter there, they can click a button saying we want to subscribe to these articles. And then automatically as them post publishes these articles, any paper, such as automated camera that subscribe to it will automatically get that information. So we were doing a lot of this content, syndication, pushing and pulling of data across our network of, you know, hundreds of sites across the country. And we were using the WordPress REST API pretty heavily. We started using that before it was in WordPress core. And then we used it afterwards in WordPress core, but it was causing us a lot of headache. We were kind of at the spot, because when you syndicate our call, if you think about like a post or an article in WordPress, it's not just one entity, it's it's the post, but then it's the terms and the images and the author, right. So you're talking all these different resources that you have to move around to syndicate one article. And so at the rest we were doing, you know, we'd send over the post data, it would make a callback for the featured image, then make a callback for the gallery and then make a callback for the terms, right. So we're doing all these, like network requests kind of got out of hand, like it was very hard for our team to like, manage what was happening. So when there was a bug, it was like very difficult for our team to troubleshoot. And it was taking a long time, because there was so much stuff happening, like you had to wait for one request to finish before he could do the next request. So syndicate one article, sometimes it's taken us like three minutes. And that's like, in news, like, obviously, we're trying to do stuff fast. And so yeah, those rooms were like, Hey, this is broken rock, it's not broken, just give it time. So. So there was a lot of pain points around that, especially as we started scaling to more sites, were sending out more messages and have to handle all sorts of other stuff. So at that time, I was just like, as a hobbyist playing with JavaScript framework called Meteor, just nothing in production. I just had heard about it, I was fascinated with real time, like real time interfaces. So I was like, Oh, this Meteor thing might allow me to build some of this stuff. I didn't have a real reason. I was just curious. And so I followed that ecosystem for a while, built some hobby projects with it. And then they pivoted to this product called Apollo. And one of the one of the guys heavy in that ecosystem, put up a site called learn graph qL, calm about the same time. So and I followed him on Twitter and whatnot, until I was like, Oh, what's this graph qL thing. This is probably maybe mid 2016, or something like, graph qL was fairly new. So I started learning about it. I said, Oh, this is real cool technology. I didn't, I didn't quite like have a real use case that I thought of at the time. But then when we started having these pain points with syndication in the newsroom, I said, Oh, I remember this tech called graph qL that allows you to do things with multiple resources in one request, maybe this could help us so I kind of spun up a proof of concept of, you know, how we could syndicate multiple things in one request. And I showed it to my team, and they said, yeah, this makes sense. I did get a little pushback and whatnot. But once I had like a working prototype, and said, Look how little code this is, and how easy it is to follow. It was kind of a no brainer, like yeah, let's let's try to go this route. So it took us a little while, but we've been in production, syndicating on GraphQL. Now for I don't know you Monster so on, I think 54 or 56 sites on WordPress. Well now at the moment. Yeah, so that's kind of the origin story. So it was server to server communication, which is not typically, like the story you hear for graph QL. Usually there's like some JavaScript or Native Client, like a native mobile client that needs data. And usually, that's where you hear the origin story. But yeah, for us, it was PHP to PHP servers, getting data in the most efficient way possible, and in a way that our team could easily debug when issues happened. - -17 -00:15:36,960 --> 00:16:24,029 -Scott Tolinski: Interesting. It's funny that you say that your first experience with graph qL came out of the meteor community because it was the same for me just because of Apollo, and the connections there. And I personally, that was that was my whole experience as well. I'm doing some some projects with Meteor, my sites actually still be built in Meteor, but it's basically the whole API is now Apollo and graph QL. But it was funny, because when that first came out all the learning material around it, everything started to shift. And the team really started to push this message message of graph QL. And, again, it was sort of just shocking how easy it all felt like it was. So it's really interesting to hear that somebody had the nearly a similar like a very similar experience in terms of latching on to it. - -18 -00:16:24,539 --> 00:17:03,299 -Wes Bos: One question I have here, and one criticism I hear craft queue all the time is that like, you just write these queries, and you have no idea how they're sort of fulfilled under the hood, you could be 10, potentially writing this like beast of a query, then, really, but because at the end of the day, you do have to write a database query to actually resolve that data. And what I was like, I was really glad to hear you say the opposite, where you said, like, Oh, no, this is much faster, because we know exactly what you need ahead of time. So there, we can sort of think ahead and make it much more efficient. So when you're writing the resolvers, for WP graph, QL. How does that work? Are you writing MySQL queries directly? Are you still running that through the WP query interface? Yeah, - -19 -00:17:03,299 --> 00:18:02,490 -Unknown: I think almost exclusively, we're using native WordPress abstractions like WP query that exist already. And the reason for that is, WordPress already has like an ecosystem built around these things, such as like dropping cache plugins, right, if you want to have Redis as your cache, you can drop that into WordPress. And that makes use of internals within these like WP query abstractions. So the way like WP query works, as soon as it fetches an item from the database, it attempts to cache it. If you have a plug in like Redis Cache, or mem cache or something like that, it'll cache an persisted cache. And so by making use of those existing things, any thing you're already doing to optimize WordPress, will already be in effect. We go a little bit above that and say, if you write a WP graph, qL query we do this deferred resolving, but it's still once once we get an object from the database, we cache it like WordPress does, because we're using WordPress functions. Yeah. - -20 -00:18:02,969 --> 00:18:15,540 -Wes Bos: So any any off the shelf WordPress plugin, or anything that like modifies your data in between you actually fetching the data from the database. All of those plugins still work, right? They should, as - -21 -00:18:15,750 --> 00:18:19,230 -Unknown: much as I know how to support it. Yeah. I mean, they're not - -22 -00:18:19,230 --> 00:18:37,890 -Wes Bos: doing anything funky here. You're not going like you're not going around anything that WordPress does. You're just using the native WordPress interface to actually fetch the data. And any any hooks or whatever that are sort of in between you your query in the database will still work as Yeah, as intended. Yeah, for example, like, - -23 -00:18:37,979 --> 00:19:36,660 -Unknown: somebody was building a membership site, and they wanted their, you know, content of posts to be private. And they said, How, how can I lock this down? And WP graph qL? I said, depending on how they did it, it might already work. So he was using, I think, restrict content Pro. And he's like, Okay, let me give it a shot. Yeah, it works, right. So he just does a query. And if he's not authenticated, then the content just was returned. No. But then if he sent an authenticated request, like, you know, we we had, there's lots of different ways to authenticate. And WordPress would maybe talk about that later. But if you send authenticated requests, and we're going to verify, just like the rest API would do have capabilities to see this content. And if so, plugins, like restrict content pro that are doing that logic of using core WordPress hoaxes, check your capability. If it knows that you're authenticated, it'll send it back whether trust or graph qL or a normal WordPress request. So he ended up being able to do this without any extra magic. - -24 -00:19:37,170 --> 00:19:45,180 -Wes Bos: How do you send a authenticated request then to graph qL? Is it is it client side like cookies or j wt? Or how does that work? Yes, - -25 -00:19:45,180 --> 00:22:35,490 -Unknown: you know, you could do you could do either one. So if you're on the same domain, like if you have a headless site, but it's on the same domain, like you have your site calm is WordPress, your site.com slash headless app, right. So there's same domain Yeah, you can use The cookie off that WordPress already has. So if you have if you have a cookie for your WordPress domain already stored, then then you can have that sent in the headers. I have an example app. So I have an app called WP graphical. So if you're you're probably familiar with graphical, and if you're not graphical is a so graphical is like an ID for exploring a graph qL schema and testing queries and mutations and whatnot. So I've, I have a separate plugin that you can install called WP graphical. And that's on GitHub. And when you install that, you get the graphical ID in your WordPress dashboard. And in the source code of that, we just have basically a function that wraps that react app and says, anytime you make a request, just pass the existing WordPress cookie along with the headers. So that's one way that's and that's source code you can look at to see how you can use cookies as authentication. Oftentimes, though, your WordPress site and your whatever site whether it's next j. s, or Gatsby review, in grid summer, whatever it might be, there's going to be on two different domains. So cookie authentication won't work in that case. So there's different like with the REST API, there was a couple authentication mechanisms like OAuth, and basic auth. And there's a work on, there's a team working on JW t ot that they're hoping to get into WordPress core at some point. So any of those mechanisms, they also make use of just core WordPress functions. So there's a hook early on in WordPress execution called determine current user and graph QL. And REST API and your normal WordPress dashboard. respect that. So any of the REST API authentication plugins, if you use those, you can use those with graph with WP graph QL. So basically, most of those give you some sort of header token to pass in your request. And it determines that who you are, what capabilities you have. And then it continues to process whether it's a REST request or graph qL request. So your user your identity is figured out early in the process, and then pass down through the rest of the execution. And then I have my own plugin called WP graph qL JW t authentication. So that's like a, that allows you to actually do a login mutation with graph qL to get a token response. And then you can use that token in your headers, as well. So there's lots of different ways to do it. But anyway, you can authenticate with WordPress core should be respected by any of these API's. Cool. - -26 -00:22:35,880 --> 00:23:05,940 -Scott Tolinski: Yeah. So that's fine. I mean, you mentioned that there's, there's lots of ways to do it here. There's also lots of ways to host your back end data. This is a sponsorship, ad transition. And one of those other ways that you can host your data is through something called Sanity at Sanity i o. Now, Sanity is the longtime sponsor syntax over here, and they make hosting your back end. Really simple and really interesting with their whole bring your own front end service. With a little bit more about Sanity as Wes. - -27 -00:23:06,300 --> 00:24:31,110 -Wes Bos: Yes. So we realized that WordPress and Sanity are a bit of competitors. And actually, it's funny. I've talked to the Sanity folks at a conference and they say it's, it's not us versus the other headless CMS. It's all of us vs. WordPress, because there's a lot going on right now in this whole space of like, who stores your data? And what's the best editing interface for it? How do we pull that out and put it into a something like Gatsby or whatever. So we'll just say that up front, we obviously realize that they're sponsoring the WordPress episode. And we hope that that shows you that we're not tailoring our content to whoever sponsoring the episode, but you want to check it out. sanity.io is a headless CMS, which means you can log in, you can create your content types, you can have relational content types, you can even like code your own react based component, UI. So if you want like a custom upload interface, or custom data input, or custom validation, you can code that all in react and use it on their hosted platform, which I thought was pretty, pretty neat. So check it out@sanity.io forward slash syntax, and you're gonna get double the included monthly usage. If you already signed up not through the syntax, just ping them in the chat with the in mentioned the code tasty treats and you'll get sorted. That's it for today. Thanks so much to Sanity for sponsoring. - -28 -00:24:31,470 --> 00:24:51,840 -Scott Tolinski: Cool so I wanted to talk a little bit about maybe development process a little bit. So in 2019 for you personally, what is local WordPress development look like? How are you spinning up a new WordPress instance? Like what are the fastest ways what are the most efficient ways to get going with like a WordPress site so - -29 -00:24:51,840 --> 00:25:48,180 -Unknown: that you can get get going there might be better or faster ways but my preference I use local by flywheel it's a desktop Je UI app that lets you just click new site and you can configure like the PHP version and the MySQL version. And in I don't know, 20 seconds you have a WordPress site and you have it spin it spins it up in Docker for you. And then you can with goi just click buttons to get access to SSH or access to, you know, the SQL database through SQL pro or anything like that. It sets up the x debug for you to work perfectly with PHP storm. I personally, I've been using it for probably two years or so for most local work that I do. And I rarely have a reason not to use it. I there's a lot of other ones like I've heard Lando is a good thing I've heard like Laravel has like some local development stuff that people make work well with WordPress. I can't remember the name of it. - -30 -00:25:48,420 --> 00:26:11,550 -Wes Bos: Yeah, we I used that when I used to teach a WordPress class. We used it on Windows because like the what's the one that everyone used on Windows for so long? whap Yeah, when and damp lamp was such a nightmare. Yes. XAMPP. And that there was like a Laravel one that works super well. I can't remember the name of it right now. And it works super well on Windows, which I was surprised to see. - -31 -00:26:11,790 --> 00:26:35,400 -Unknown: Yeah, I've I haven't really explored any of those other ones. For some more newsroom sites, we have a custom Docker install that sets up like our cluster sites for syndication and stuff. So for that we use like a custom Docker eyes, local environment, but like all the WP graph qL stuff I do I do with local by flywheel. This is not a sponsorship either. Like, it's just how it works. Yeah, yeah, - -32 -00:26:35,400 --> 00:26:36,090 -yeah. - -33 -00:26:36,390 --> 00:27:20,910 -Wes Bos: Although we'll take them if they want to sponsor with a flywheel. That's cool. I always love hearing people's development process it What about like deployment? Like, what do you do about like data that needs to be migrated? Because the sort of the one pain point that I always had with WordPress was, if you have like some like settings or something like that in your database, that needs to be part of the deployment. Ideally, those settings would be exportable to like a JSON, and then you can commit those, but some of the plugins only let you like, save it in the database. And that's a frustration. So you have to be like, Alright, deploy this thing and quickly update the settings. Nothing breaks, like, what do you do about that? Oh, - -34 -00:27:20,940 --> 00:29:34,740 -Unknown: yeah. So like, on our production, like in our newsroom sites, we usually if, if a feature is going to change something like if a feature depends on an existing setting, we usually try to roll things out with, like a different setting for the new feature that this new feature will then take over once this setting has been changed. So like the old feature will still work. But if if we add support for the new setting, after it's been deployed, so we'll deploy both features basically. And feature B, the new feature will only be active once we do something on production to activate it like a flag or whatever. And then we'll usually hopefully try to remember to pull out the old feature. detect that. But that's kind of been what we do. We have been doing some interesting things with graph qL, and things like that, though. So like I mentioned, we have 54 sites across the network. And so managing like small things across 54 sites is very tedious. Like if you need to change one setting, like, Hey, can we change, I don't know, the favicon for all 54 sites or whatever, like that's an interns whole day, right? Like, login, decide, hey, login site B. So we've been building like a react app that uses graph qL, to talk to all of our sites. So we can log into one site and do things like that, like user management is our biggest pain point. someone leaves the newsroom and they had access to 54 sites. Oh, yeah, we got to, you know, get rid of them fairly quick, or, you know, change their capabilities, or whatever. So we have like a react app now that can talk to all 54 of our graph qL endpoints. And then we can in one interface search for a user. It'll use graph qL, to search for the user across all our sites, bring it blab and say, Here's where this user exists, then you could click on and say, I want to delete this user or I want to change this user's role. And then you can confirm these are the sites I want to change it on, click Submit, and it uses graph qL to send a mutation. So what used to be, you know, several, our job is now a 45. second job. So it's not exactly deploying, but it's like, yeah, how do you handle these settings when you roll out and for us, like, that's one, one use case. - -35 -00:29:34,950 --> 00:30:06,780 -Scott Tolinski: It's just so interesting to hear about other people's custom tools like that. I love writing custom admin tools in the back end. Yeah. And to hear about stuff like that, especially with WordPress, it just goes to show you that you can, you can use WordPress in these kind of ways, like people are using their own custom Express apps. You just have to know where to send the right messages, how to connect to the right sites build these custom tools, but it's fascinating to hear it This react app that can modify permissions across so many different WordPress instances. Really cool. - -36 -00:30:07,170 --> 00:30:25,080 -Wes Bos: So there WP graph qL obviously has support for mutations pushing data like he told me you can create and delete users are all of those things like creating posts, updating posts, deleting people uploading images, or all those things supported. WP graph qL, - -37 -00:30:25,470 --> 00:31:24,030 -Unknown: pretty much we don't, we have an open issue for uploading images still, that we need to address, you can sideload images, so you can pass a URL of an image and it'll sideload it. But as far as actually like uploading from like a forum, like using multi party on input or whatever, that's not at the moment supported, but will be soon. There's also like, debate in graph qL on like, how you should even handle uploads. So I've been a little hesitant on like, what approach to take here. So I've partly intentionally I'm holding off on that. Because like, because, you know, if this, there's potential, at some point, I don't know for sure that wp rathkeale could make it to WordPress core, or at least be recognized as like, the official way to do grammar, with WordPress. And so like, I feel like I have a responsibility to do things like, well, up front as much as I can. Because if I make breaking changes, it potentially affects a lot of people. So sometimes I'm a little patient with - -38 -00:31:24,330 --> 00:31:44,550 -Wes Bos: That's good. That's don't do it right the first time otherwise, you end up with this what like some mistakes that were made in the first days of WordPress 15 years later, we still have these like, some some stuff is the underscore and some stuff is get underscore. And then you have get that you're like, what does it return? Do I echo it? And it's, it's so important. Yeah, - -39 -00:31:44,550 --> 00:32:29,400 -Unknown: now, I've already made some of those mistakes, like I have, like, I don't want to commit to 1.0 yet, because there are some mistakes that I made that I want to correct, which will lead to breaking change. But I want to do that before I say this is 1.0. And, yeah, so now that I'll have time, like a lot of that a lot of those features have been just on the back burner, because they're going to take a fair amount of time to accomplish. And, you know, as I do get to work on this at my current day job, if the features make sense for a job, but for features that they don't use, like if I want to work on them, I got to work on nights and weekends and whatever, which I do a lot of but now I'll be able to work on it all day every day. So some of those features that have been on the backlog I'll be able to address - -40 -00:32:29,610 --> 00:33:06,000 -Scott Tolinski: really interested in the the hosting picture for all of this, because that definitely is like a complication that I think can get a new developers thrown off a little bit when they're working and maybe a headless WordPress setup. So I'm interested to hear your thoughts on what do you think are the easiest, most efficient ways in your mind host the WordPress back end and the front end site? Is there anything that makes it easier along the line, I personally am just like spinning up a site in a WordPress site in a cheap server and then throwing the front end up on Netlify. But I'm interested to hear what the the approach that you see happen a lot is - -41 -00:33:06,510 --> 00:34:25,650 -Unknown: honestly, I think it really depends on what you're trying to accomplish. Like in your case, it sounds like it's a site that largely you're managing by yourself. So your your actual needs for the WordPress site are pretty minimal. Like in our case, we have a newsroom. We have newsrooms with you know hundreds of people logging in. So the WordPress still needs a decent server because there's lots of, you know, lots of writes happening and lots of concurrent users using it. But if it's just like a, you know, one person then their personal site, I think what you're doing works well my current WP graph QL. Doc's website is a Gatsby site on Netlify as well. In that case, it's not actually using WP graph. qL is just mark down because I want the community to be able to contribute by pull requests. I don't want the content in a WordPress site that only a handful of people have access to right to. So that's why I did that. But it's on Netlify. It works great. I'm real happy with Netlify. I think I think it really depends on your needs, though. Like I mentioned, like our react apps. In our case for the newsroom. The SEO doesn't matter to us. They're all admin apps. So we just use create react app. And then we don't really host them anywhere like we just like we just put up we just on cue them in a dashboard page of WordPress, right. So they're just this file that WordPress so Oh, interesting. Yeah. - -42 -00:34:25,650 --> 00:34:26,310 -Wes Bos: But that's - -43 -00:34:26,310 --> 00:35:02,610 -Unknown: that's because they're not we're not trying to like rebuild WordPress themes with it. We're, we're building admin interfaces. But if I was, yeah, I think what you're talking about though, you have a WordPress site on whatever comfortable host depending on your needs, you can go cheap for five bucks a month with something like Bluehost or whatever. If you have a lot of users that need to be in there editing, you know, there's higher end hosts, you know, the P engine or Pantheon or something like that, where you start paying 30 bucks, yeah, or higher. And that's and then the good thing with a static site though, is you can host it for free, almost anywhere. Very cheap like he could tossed on s3 for. - -44 -00:35:02,820 --> 00:35:21,000 -Wes Bos: I don't Yeah, he's a month probably because it only needs to be Netlify ones, right? And as long as it's it's all static content and nothing is then reaching back to the the original endpoint it doesn't even need to be alive. Like you can't even put it on, like one of these services that spins down when it's not being used. Yeah, - -45 -00:35:21,420 --> 00:36:31,020 -Unknown: yeah, yeah. serverless. Yeah. And now there's those speaking of that, though, there is this new like Gatsby has docks and whatnot on building dynamic sites with Gatsby, right. Like the Gatsby swag store is a good example of one in production, right? Like when you load it, it loads up their inventory. But then it allows you to do dynamic stuff, like purchase a product and maybe check the count of inventory left or something. So in some cases, a static site might still make dynamic calls back to a server. So it depends on what you need, like. So we have a guy Jeffrey Taylor, who's working on WP graph qL for WooCommerce. And that would probably be an example where you still have a live WordPress server. But you could build a Gatsby site that does, like puts your inventory in a static file, but then still make calls back to your live WordPress server for things like the amount of stock left. Yeah, product, right. And then to process the actual like order and cart fulfilling and things like that. So it would save, it would save your WordPress server, you know, some traffic, but you'd still have to have a live connection for some parts of it. But the big thing is you get to Thea react, in my opinion, it's - -46 -00:36:31,020 --> 00:36:31,610 -a big that's a - -47 -00:36:31,610 --> 00:36:43,650 -big one where like, I don't know anybody super excited about theming. in PHP, especially once you've learned like, how to take advantage of state and modern JavaScript libraries like the word react. - -48 -00:36:43,670 --> 00:37:13,020 -Wes Bos: Yeah. Do you? Do you see any pushback from people who like the one of the huge downsides to theming and reactor theming, in Angular with a WordPress back end, is that you give up everything that's been pre built for you. And a huge portion of the WordPress community is people who are just buying a theme, getting a couple plugins clicking it together. And that's it. And you see a lot of sort of anxiety around this whole, like, themes are going away. I don't even know what you think about that. Maybe you can say, say that as well. - -49 -00:37:13,880 --> 00:37:48,000 -Unknown: Yeah, I think there's trade offs, right, in my opinion, I personally would rather work on a project that didn't have all this stuff being hooked in for plugins, and I had complete control. But I've also, like, I'm, I've been working more on like, products at the newsroom. Like we're we're like iterating on the same sites over time. Yeah, I'm not working for an agency that has six weeks to deliver the site. Right. So that's my personal preference. But I do you think there's a huge portion of the ecosystem that doesn't have that time and freedom to work on sites like that, and they just need - -50 -00:37:48,630 --> 00:37:49,980 -a slider plugin? - -51 -00:37:51,030 --> 00:38:52,230 -Yeah, exactly. So I think we're gonna start seeing more plugins support, like, Okay, this works in WordPress, but it also shipped like Caldera forms, for example, as a form builder. And their forms are outputting, a react component. And so you can use WordPress, but then you can also use it potentially in Gatsby. So, like, I've been talking, I have an open issue on his plugin on color forms on GitHub, where we did a call like this and brainstorm like how it could look to do form like use graph qL to query the form fields needed, uses existing react component to render the form fields, and then use a graph qL mutation to set it back to WordPress. So like, we're exploring that so that you can use an existing WordPress plugin, potentially in another environment with, you know, very minimal effort. So I think we'll start seeing more of that the more API's like WP graph, qL evolve. I think you'll see more of those, like, use this in WordPress, but also use it. - -52 -00:38:52,320 --> 00:39:17,610 -Wes Bos: Yeah, like it comes with a react component that you can drop in. And even like, we had another Jason on the podcast a couple weeks ago, talking about Gatsby themes. And the whole idea there is you'd be able to bundle together, like, what it looks like and how it gets its data and the functionality all in one thing, and they can be composed. So that technically could be a thing as well, where you could just ship a Gatsby plugin. Yeah, yeah. - -53 -00:39:17,630 --> 00:41:22,920 -Unknown: I also, I think, I think for good reason, we're gonna start seeing a more of a trend of being like, more prescriptive with themes versus like WordPress ecosystem is like, all in one, like, build any website, under the sun with this theme. Right? And, and there's pros to that. But there's also a lot of confusion with it. And people have the word. Yeah, right with that. So I think we'll see like with Gatsby themes, I think we'll start seeing potentially more prescriptive themes. Like this is the theme specifically for documentation. Like if you're not writing documentation, don't use this theme. Right? Like it's gonna have features and styles and stuff specifically for that purpose. And it'll you know, in this case, it could have quick pre written to get data from WordPress or whatever your sources in the specific shape that a documentation site needs. Or you might have a restaurant theme, there was a press 75 themes. json by Jason Schuler, he was pretty active in the WordPress ecosystem for a long time. And he's doing some cool stuff with WordPress still, like he's got a site called leaflets or whatever. But his his ideas, that theme should be very prescriptive as well, he had a thing called pickle. Back in the day, this is just a classic WordPress thing. But it was, it came with custom fields on the back end, that only gave you certain inputs, and then a very specific output, you had no drag and drop page builder, you didn't have shortcodes, you didn't have anything, you just had very specific inputs. If you wanted a menu, you enter your data here. And that like it was very unflexible, like the opposite of what you think of WordPress as as being like this flexible, do anything you can. And his idea was like, if I do the work of making what a great restaurant theme, then that you don't have to think about how to do it, you just install this enter data. So I think we might see a comeback of that kind of approach of like, this theme does exactly this. And then potentially less need for that like flexible, like, Do everything you can imagine. But I don't know, I think there's gonna be use cases for both. But I think we'll probably We'll see. We'll come back with that. Hey, - -54 -00:41:23,100 --> 00:41:43,770 -Scott Tolinski: I have a question about when you have a WordPress site and you're using it for the API exclusively. Do you have any techniques that you commonly do to sort of prevent the WordPress front end from being loaded? Do you have a theme that you use the redirects, you're doing it on the server? What do you what are you doing for that aspect of the front end of the site? - -55 -00:41:44,150 --> 00:42:14,550 -Unknown: Yeah. So we have, we have one theme and our newsrooms that we call a content hub where all our newsrooms push some information to, and that has no front end to it. So I think we hook into I'd have to look up the code. I don't remember off the top my head, but I think we hook into maybe the template redirect hook in WordPress, and we just have like a one line function that basically says, if it's not a graph, qL and REST request, just like, return them. And so you just get a big white screen. I think that's all we're doing there. - -56 -00:42:14,730 --> 00:43:31,610 -Scott Tolinski: Sure. Cool. Yeah, really interested about that. So in this world of building all of this stuff here, you're never really gonna get into problems. Sorry, everybody. I'm sleep deprived. My transition game is not good today. I'll get back at it, it'll get back once the once things get back to normal here. Our sponsor of this episode today is Log Rocket. Now Log Rocket is the service that allows you to see the errors that are happening in a real time, video replay of everything that's going on in this session replay includes more than just the user clicking around and a bug happening. It also shows you the the error log at the time, your network requests, tabs, your Redux store, pretty much anything you'd want to see to be able to solve a bug. And this way, you don't have to ask your user a bunch of questions via email, Hey, what did you do to get this bug to happen? You can see it happen yourself and solve the bug. So if you want to try this excellent service, I went over to Log rocket.com forward slash syntax, you'll get 14 days for free, highly recommend checking it out Log Rocket is one of those services that I find to be extremely not only fascinating, but just so so useful for getting these errors and bugs solved up in no time. - -57 -00:43:32,070 --> 00:44:26,490 -Wes Bos: All right, next question. I think that part of the reason for WordPress has huge popularity is is due to custom fields and custom content types, custom taxonomies, that's where you are able to create, like you can create a store content type. And then you can have like custom taxonomy, which is like a tag or category. But it's just another way to categorize your content. And then the the the plugin advanced custom fields, which I think seems to be the biggest one. There's another one. I haven't been in the WordPress world for a couple years. Now. There's some rumblings of another one that people seem to like as well, those things alone, allowing you to create your own custom content types with custom input fields on the back end, I think are why WordPress is so popular in sort of the agency world where you can just whip up a quick site with a custom back end, is that have support in WP graph? qL? - -58 -00:44:27,000 --> 00:46:09,840 -Unknown: Yeah, so yeah, if use register post type registered taxonomy, um, there's just a couple extra parameters, you have to fill in to add graph qL support. So like rest the REST API, for example, you just say, Show and rest equals true. And then you give it like a callback for the controller class. So in graph qL, you just say showing graph qL true. And then he give it a graph qL single name and graph qL plural name. And that's like the names that this will use to reference your objects. So yeah, you could say register Your post type car, for example. And then Shawn graph your true graph, you'll single name car, graphical portal named cars. And then you'll have a schema where you can query for cars, mutate, cars update, create delete cars. So yeah, you know, three or four lines of code, you can have all sorts of craziness. And then if you register a post or a taxonomy to be related to the cars, like a make and model taxonomy, for example, so you could like label it as Honda. Yeah, for example, then if you register the taxonomy, they be connected to the car post type, graph. qL does those connections in the schema for you? So you can, you could do you could do something like query like cars, and then on cars query for make, and then ask, you know, get a list of the main URL, and you probably won't have a list of makes for cars. But yeah, so or you could go the opposite way and say, like, get a list of makes, so you could have like Honda, Toyota, whatever. And then nested on that, you could say, give me the 10 popular cars or whatever it might be. So in one request, you could ask for the makes and the car nice have that make? And - -59 -00:46:09,990 --> 00:46:24,210 -Wes Bos: what about filtering and sorting? That's the one of the big like, moments of graph qL is that it's not, it's not actually a query language at all. There's nothing built. There's nothing related to graph qL that lets you filter and sort and things like - -60 -00:46:25,320 --> 00:46:36,600 -Scott Tolinski: that I first started, though, always like looking at one document. Yeah. And trying to use another. And I was just like, why isn't this filter not working? It's like, the never built in the filter, dummy. You know, you have to build it in yourself. - -61 -00:46:38,940 --> 00:47:59,820 -Unknown: Yeah, so we do have some open issues on that we do have some filters already for things like filter by you know, the tag that a post exam or whatever, you can pass an ID, we have some filters like that, for custom post types. taxonomies. It's not super well supported, we have some open issues that I plan to address pretty soon on that to make it dynamic as soon as you register post type filters available. So some of that's up in there. But I do have an extension plugin called WP graph qL tax query that allows you to, to query posts by taxonomy input. I'm not, I didn't want to put that in the core plugin, because I'm still kind of iterating on the shape of how I want to do it. But that does allow you to query based on various taxonomy. Yeah, parameters, like so. And then there's also a extension I have called WP graph qL meta query, which allows you to query you know, filter your query by meta field values, like date. So, but yeah, well, dates depends on how you do date date is actually like, not a meta field. It's part of a core post object. So yeah, you can do a date, you can do a date query with WP graph. QL. Core. So you could say, give me all posts before March 5, or you know, yeah, like before March 5, but after March 1, or something like that. Oh, so you can do that. that's built into WP graph. QL. Alright, so - -62 -00:47:59,820 --> 00:48:10,620 -Wes Bos: if I was doing like an event, and that that event have a date, like, when is the event? would you use the like built in date to that content type? Or would you create a custom field? - -63 -00:48:10,620 --> 00:48:13,860 -Unknown: I probably in that case, I probably do. Because it could be - -64 -00:48:13,860 --> 00:48:16,560 -Wes Bos: in the future and then not published? Right? - -65 -00:48:16,890 --> 00:49:37,350 -Unknown: Yeah. Because the date the date? Yeah, the data in WordPress affects so many things like permalinks, potentially, depending on your billing structure, it can affect that it can affect the actual, like ownership status, like if your date is in the future, than only admins have access to it, right? It's not considered published. So are not necessarily admins. But based on your user role, you may or may not have access to the object. So I probably wouldn't do states for an event type thing where you'd need like future dates or date ranges. So yeah, probably use a, it's hard to say you might even actually use a custom taxonomy, because taxonomies are more performant for querying against. So you could have like a start date taxonomy and an end date taxonomy. And put a term for the date timestamp. And then you could actually do a filter using a text query, which is more performant than meta query, especially as your site scale. That's probably how I would do it if I knew what my needs were to query against that field. And then it could do hooks. Like tom tom know, wrote, he works for WordPress VIP. He wrote some good articles a couple years back on, like, proper uses of metal versus taxonomies. If you want to Yeah, - -66 -00:49:37,350 --> 00:49:45,780 -Wes Bos: yeah. It's good to have like smart people on that kind of stuff. Just because it stops us from shooting ourselves in the foot when we're trying to use it. Right. - -67 -00:49:46,290 --> 00:50:08,220 -Unknown: Yeah, because the problem with meta if you're going to query as it's not indexed at all, right, it's just like this wild card key value store and so as your sites grow gets very expensive, or taxonomies are like you They're, they're indexed properly to query against. So they're their main intent was to basically query by groups of things. - -68 -00:50:09,210 --> 00:50:28,770 -Wes Bos: I think that's all the questions I have for you about this. I think it's answered so many of the thoughts I had about like, how do you even build this? How do you host the thing? What do you do about custom fields? What do you do? But authentication? Seems like almost all of the bases are covered. Do you have anything else that maybe you don't think that we asked about or anything you want to cover? - -69 -00:50:28,770 --> 00:52:10,620 -Unknown: Oh, yeah, we did talk about custom types. And taxonomies, you did mention a vast, advanced custom field. So I've also written advanced custom fields. So I don't know if you've seen that or not. But I actually released that about two months ago, I was in an attempt to try and kind of bootstrap myself to go full time on this stuff before. And then Gatsby reached out to me so. So that was my first like, premium extension, to explore if I could make enough money, but in this whole time, but yeah, the way that works, if you're using advanced custom fields and graph qL, you just install that extra plugin WP graph qL for advanced custom fields, and then whatever fields you have registered, whatever field groups, you have get applied to your schema automatically, in graph qL, and then you can query that data. So let's say you had, you know, posts, and you added a field group called, I don't know, let's go with your event. date. example, you could have like a event dates right now a start date and an end date, then you could query your post, you could just say, I want my post, and then it'll prefix it with the field group. So you'd have like event fields. And then on that you'd have two fields like event date, or start date and end date. And no extra work, you just install ACF and saw that plugin, it'll add two fields to your ACF, like admin UI, where you create your fields. One, you just click Show and graph qL that you want that field group to be exposed to schema. If that set that need to, there's a one key that you can change what how you want it to be shown in the schema. Like if you if you named it something silly back in the day, and you don't like that name anymore, you can change the name but so you have those two settings and then it shows up in your schema on all the resolution happens without you having to - -70 -00:52:10,620 --> 00:52:27,600 -Scott Tolinski: run a line of code I think we're all very experienced with naming something something silly one point in time and then looking back at it later, like what was I thinking with this name? Yeah, cool. Well, I don't have anything else. So do you want to get into sick pics now? - -71 -00:52:30,090 --> 00:52:30,930 -Wes Bos: Oh, yes, - -72 -00:52:30,930 --> 00:52:31,890 -Unknown: thanks. Let's see, - -73 -00:52:31,890 --> 00:52:35,880 -Wes Bos: I think I'm selling too so I was trying to I was - -74 -00:52:36,420 --> 00:52:51,840 -Scott Tolinski: so sick pics of the part of the show for those of you who have never listened to a syntax episode before where we like to talk about things that we have in life in our office in our work that are sick, something that we really find to be excellent and want to share with you. - -75 -00:52:51,840 --> 00:53:54,600 -Wes Bos: I have one it's I'm going to sick pick something that I sick picked a long time ago and then Scott sick picked and I'm going to sit back in again. The cat the cow digit Ts three plus, which is the the Thunderbolt three dock for the MacBook Pros that don't have any ports in them. And you so you plug this thing in and it gives you a whole bunch of USB it gives you Ethernet gives you it charges that you can run multiple monitors off of it and I've talked about how it's unreal that you can actually have a single cable install where I've got audio gear and hard drives and two 4k monitors and charging an 85 watt MacBook all on one cable which is unreal that you can actually do that so I bought this thing before it even came out initially and then I was bummed that they like released the new one where they they put they had like a SATA ports on the original one which is like allows you to like hook up a hard drive which I don't know who's doing that - -76 -00:53:54,600 --> 00:53:59,070 -Scott Tolinski: and if you're doing that you could still do it via USB with a you know a simple setup. - -77 -00:53:59,340 --> 00:54:05,400 -Wes Bos: Yeah, so I I was kind of bummed because Scott you bought the new one that has the SD card right yeah, - -78 -00:54:05,400 --> 00:54:14,820 -Scott Tolinski: although they came out with the space gray one no and I don't have the spare one when I got I want this big screen one now in America I'm not gonna drop the money to buy one that matches but yeah. - -79 -00:54:15,840 --> 00:54:27,780 -Wes Bos: Oh man. So I was super happy because I did have to run an external USB hub off of this thing because it just didn't have enough USB ports in it. And then the new one I think they added two new I was gonna - -80 -00:54:27,780 --> 00:54:30,690 -Scott Tolinski: say mine's got a lot of USBs Yeah, - -81 -00:54:30,720 --> 00:55:10,320 -Wes Bos: the the new one has I think three or four more than the original one and an SD card slot which is the best because if you've got like a camera or something and you just want to pop that was the best part of the Old mac books readers slapping in you don't have to worry about a dongle. So big fan, they did send it to me I bought the original one with my own money. And then I've been like evangelizing it for two years now. And they said like hey, you if you want the new one, we can send it to you because probably sold more enough that it's worth it for them so that's full disclosure. They did send it to me but big fan of it. Absolutely love it. It's the Cal digit Ts three plus. Thunderbolt three dock. - -82 -00:55:10,769 --> 00:57:08,250 -Scott Tolinski: Nice. I have a sick pic as well. Seeing as I we we do have them. Dang it I had it just head my head. Now I'm just like blinking. I was just stalling for time. I don't know why I just forgot about it. Okay, and this a pic is one that since Wes has gone with a repeat, I'm gonna go with the repeat as well. This this harkens back to one of the first few episodes of I don't know if Harkins word anyways. But this goes back to one of the first few episodes of syntax where I recommended the application figma. I use figma every single day. And I probably used it every single day since that episode, where I recommend it a long time ago. And figma is basically a sketch alternative that works on any platform, it works in your browser. It has like Google Docs style multi user called multiplayer mode, well, everyone can edit a doc, you can leave comments to resolve. And if you've used sketch before, sketch sort of just stopped coming out with new features for a while. It it only worked on Mac, and they just like sort of, I don't know what they were doing. They just weren't doing a whole lot where figma was constantly adding stuff, whether it's new layouts, or the way their their component system works. And let me tell you, if you've used symbols and in sketch, you're gonna be blown away by how components work in figma. Because it just it's so much more practical in real world. So I'm such a huge fan of this application. So check it out. It's figma. It's it's an illustrated app. It's a prototyping app. It's a design app, I use it to design everything, my entire design system for the new level of tutorial site, which we just recently launched a couple of days ago. At this point, I guess it was all done in figma. first before we moved it into actual react components, and to be able to have a whole component system and everything built in figma at a time really made the new design system what it is. So yeah, that's my take big. - -83 -00:57:09,210 --> 00:57:11,190 -Wes Bos: Sick. What about you JSON? - -84 -00:57:11,820 --> 00:57:58,890 -Unknown: I already talked about in saga with local by flywheel, which is application that allows you to spin up WordPress sites very quickly, you know, in probably 20 seconds or so you can configure your PHP version, configure your SQL version, set up x debug for PHP storm, have access to SSH to run, you know, COI commands against a WordPress site uses Docker behind the scenes. So very helpful. I use it almost daily. Sick, if I can one thing. You mentioned figma had Google style, like Google Doc style, like integration? Or you know, yeah, what is your collaborative editing? that actually brings up a something about graph qL that we didn't talk about? Yeah. - -85 -00:58:00,150 --> 00:58:01,980 -Wes Bos: Yeah. Tell us about - -86 -00:58:01,980 --> 01:01:00,090 -Unknown: it. An amazing part of graph. qL is subscriptions, which is still like, as a whole, like being worked out, like what's the best way to implement subscriptions. But the idea behind subscriptions is that a client say a react component can subscribe to data until the server Hey, when something changes, tell me about it. Instead of like, historically, you write an application and you do something like long polling and say, a server did something change the server did something change a server did something change? Well, here you just say, hey, I want to know about this. But just tell me when it happens. I'm not going to ask you. Again. Just tell me. So with WP graph qL, I've been working on prototypes for how that could look. So that you know WordPress has event driven architecture already. So there's actions that gets sent out when certain things happen, like unsafe post or on comment deleted or whatever. So there's these events already happening. And so we can with graph QL. If you subscribe to these events, we can send you a payload that matches whatever you want in return. So I've been prototyping what that could look like. We're exploring that with Gatsby for doing like incremental builds. Right. So that's been a potential pain point with Gatsby is, you know, if you have a large site with lots of data, and you just correct a typo on one page, do you have to rebuild your entire site with just to fix a typo? Right. But with subscriptions, if if the site was already built, and Gatsby could just receive a payload of hey, here's this one thing that changed, it could potentially merge that into the already built site, right? Yes. So we're exploring graph qL subscriptions for end like I think one thing in WordPress, I'm not. I'm To be honest, I'm not a huge fan of it, Gutenberg. Yeah. New editor and WordPress. I think there's a lot of potential With it, like I love the concept of block based editing, I love react. I'm a huge fan of react. There's a lot of things. I'm not a fan of how it's been done today. I've tried to be vocal as I can with the time I have in like the GitHub repository for it. And Twitter, of course. But yeah, I think there's a lot of potential for it. And it if at some point in the future, you know, graft kills baked into WordPress core, or even as a plugin, you could do collaborative editing with Gutenberg, because at the block level, it could subscribe to events, and then it can know who's edit Oh, yeah, you know, you could show like the avatar of who's editing it, like on the top of the block. And maybe you could lock that block down so that only that person can edit it, but somebody else could edit the other parts of the page or something like that. So graph qL, like, enables that future. And I don't know what it would look like and if that's how it would happen, but it's possibility because of graph qL, and the subscription spec of graph QL. So it could be interesting word. - -87 -01:01:00,750 --> 01:01:04,530 -Scott Tolinski: We have so much to talk, we could do a whole nother episode. Gosh, - -88 -01:01:04,590 --> 01:01:23,340 -Wes Bos: yeah. If you've got questions to follow up, maybe we'll do another one in like six months or whatever. I'm sure a lot will change. I think the whole incremental build thing is is one of the biggest pain points in Gatsby right now. And it's something that they're focusing on. So I'd love to like hear like, what does that look like in six months? Eight months from now? Yeah. - -89 -01:01:24,570 --> 01:01:25,080 -Unknown: Yeah, - -90 -01:01:25,080 --> 01:01:52,830 -it's a very hard problem, especially like I have ideas on how it could be solved for WordPress specifically. But since Gatsby can talk to any data source, it really gets complicated. Like if get if you're just building a Gatsby site for just WordPress, like, I feel like I could give me a few weeks and I could have a solution. But for the multitude of data sources, like I that's a very hard problem. So we'll see. It's gonna be fun if you know if they come up with some Yeah, - -91 -01:01:52,830 --> 01:02:09,780 -Scott Tolinski: right. Yeah, yeah, we know. That's awesome. Cool. So now we're gonna get into some shameless plugs where you can shamelessly plug anything that you are working on. Are you working on anything other than WP graph? qL? Or do you want to just shamelessly plug WP graph qL? - -92 -01:02:10,140 --> 01:02:29,640 -Unknown: Yeah, just WP graph. QL. And Gatsby Hadn't you know the ecosystem between the two? I've lots of WP graph qL extension plugins, you know, like WP graph qL tax query and meta query WP graph qL for advanced custom fields. Yeah, that's pretty much what I'm trying to. Yes, shamelessly plug that. - -93 -01:02:30,210 --> 01:02:33,660 -Wes Bos: Yeah, you should plug your your Twitter's so people can follow you. - -94 -01:02:34,080 --> 01:02:42,810 -Unknown: Oh, sure. Oh, yeah. So I'm on Twitter at at Jason ball JSN ba HL. And then at WP graph. Nice. - -95 -01:02:42,840 --> 01:03:17,760 -Scott Tolinski: Awesome. I'm going to shamelessly plug, my new debugging course, which is on dev tools and debugging. We just cover all of the practical areas of the react or the React dev tools, the Chrome Dev Tools. Specifically, we talked about how to debug very common things like how to find images that are too large, how to find things that are pushing off your canvas and CSS, all sorts of practical real world bug solving, we're going to be tackling via the Chrome dev tools. So check it out at level up tutorials.com forward slash pro sign up for the year and get 25% off. - -96 -01:03:18,180 --> 01:03:30,150 -Wes Bos: I am going to plug all of my courses. Wes Bos comm forward slash courses, use the coupon code syntax to get 10 bucks off and you can learn mostly JavaScript and CSS stuff. - -97 -01:03:30,510 --> 01:03:31,950 -Scott Tolinski: Learn those JavaScript. - -98 -01:03:32,340 --> 01:03:44,640 -Wes Bos: Yes. Thank you so much, Jason, for coming on. This is so much information that I've been wondering about. And I think that this was probably gonna be one of our more popular episodes for the year. Yeah, I don't think we really appreciate it. - -99 -01:03:44,670 --> 01:03:46,950 -Unknown: So yeah. Thanks for having me. All right. That's - -100 -01:03:47,190 --> 01:03:50,070 -Wes Bos: thanks. And we'll Oh, we end off with a piece. So - -101 -01:03:50,400 --> 01:04:03,390 -Scott Tolinski: PC, please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax161.srt b/transcripts/Syntax161.srt deleted file mode 100644 index 593522e16..000000000 --- a/transcripts/Syntax161.srt +++ /dev/null @@ -1,148 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,580 -Monday, open wide - -3 -00:00:02,580 --> 00:00:06,990 -dev fans yet ready to stuff your face with JavaScript CSS - -4 -00:00:06,990 --> 00:00:07,590 -node - -5 -00:00:07,590 --> 00:00:08,820 -module, BBQ Tip - -6 -00:00:09,059 --> 00:00:12,810 -Get workflow breakdancing, soft skill web development hasty, as - -7 -00:00:12,810 --> 00:00:21,989 -crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott Todd. - -8 -00:00:23,610 --> 00:00:24,450 -Totally in ski. - -9 -00:00:25,860 --> 00:01:03,930 -Scott Tolinski: Oh, welcome to syntax on this Monday. Hey, Steve, we're gonna be talking about one of our favorite topics. In fact, I think we could go hasty or in haste here with this sort of topic. But this is going to be a really fun one, we're gonna we're gonna get into it fast here. And we are going to give you all of the things that we love in VS code right now, some little themes, some fonts, some extensions, and some techniques. And again, this is going to be a hasty treat. So it's not going to be entirely comprehensive, but it's going to be a lot of fun. So I'm really excited to talk about a lot of the things that we love in VS code right now. My name is Scott Tolinksi. And with me, as always, is Wes Bos. - -10 -00:01:03,930 --> 00:01:29,130 -Wes Bos: How's everybody doing? Well, I've just had my baby boy. stoked to get back to recording as funny of it took, I took a couple days off, and now I'm starting my like paternity leave, which is, I don't know, gonna be like, a couple hours a day of working in a couple hours with the kids. So I'm really curious to see how that works. Yeah, yeah, - -11 -00:01:29,130 --> 00:03:28,590 -Scott Tolinski: it's been interesting for us as well, because we're, what, three weeks in the future, have you so to say because our baby was born in May. And so, yeah, things have been interesting, although you now have three, so it's not going to be your exact future here. But let's get into it. Let's actually first we wanted to quick touch on our sponsor today, which is going to be net LIFFE, I now for those of you who have been listening to syntax for a little while, you know how much we love Netlify. And those of you who are new to the show, are about to find out just how much I love Netlify. And just how much I know Wes loves Netlify as well, if I'm picking a service to host anything with at this point in my life, it's going to be Netlify. And let me tell you why. Because Netlify makes everything so incredibly easy. We're used to having to deal with servers and build processes, and continuous integration and setting all these things up can take up your entire week, let alone just make you want to pull your hair out sometimes Netlify does all of those things. So so well. Netlify makes it incredibly easy to get up and running with any Git repository and have it built and up in a free web host essentially, in absolutely no time at all. So give it a try netlify.com forward slash syntax, take advantage of everything they have to offer from a global CDN, continuous deployment set up for free one, click HTTPS which you need in 2019 in some seriously awesome other things. And if you need the power of server side functionality, Netlify has that for you too, in various features, as well as serverless functions. Cool. So let's get into our favorite VS code stuff. Do you want to kick it off with what theme you're using? I actually actually might be able to answer this for you. Because I'm going to be able to take a guess here. You're using your own cobalt theme still right? - -12 -00:03:28,980 --> 00:03:34,980 -Wes Bos: cobalt two. Yeah, cobalt is the was the original one that I forked probably like 11 years ago now. - -13 -00:03:35,010 --> 00:03:40,770 -Scott Tolinski: So the two, the two is like stamped on there. You can't just say cobalt. Yeah, you guys say cobalt. You - -14 -00:03:40,770 --> 00:04:06,030 -Wes Bos: know, if you say cobalt, then again all the time people email me like, I'm using your cobalt theme or like, no, it's not built. It's not the one that comes with VS code. It's you have to install it yourself. So it's, it's, it's quite a bit different from that now. And yeah, it's been my favorite people ask me like, Don't you ever get sick of it? And I think No, I've been I've been tweaking and working on this thing for for years and years and years and years now and absolutely love it. - -15 -00:04:06,210 --> 00:04:57,770 -Scott Tolinski: I actually have a hard time getting away from my own level of touch themes that I've been using. I have two themes. I have a dark one and a lighter one. And I love my level up themes. They're the best things in the entire world. But you know what, man, I am just way too, you know, I got I gotta change it up, and I gotta change it up sometimes. So I'm not currently using my level up themes, although I still love them very much and I missed them every time I open VS code. I'm currently using this theme that kind of got a lot a little bit of boost on the Twitter land when it came out, which was synthwave 84. And this theme, it actually looks enough like my level of themes. There's lots of purple in here and a lot of color contrast the things that I love in a good theme. So this one wasn't too crazy for me to go to from another purple theme to another purple theme. So I'm using synth wave 84 and I really like it and I missed my themes, but I really like it. - -16 -00:04:58,070 --> 00:05:00,890 -Wes Bos: Awesome. What about a font Using these days - -17 -00:05:00,930 --> 00:05:35,460 -Scott Tolinski: fonts, I'm using a dank mano, which is a paid font. Before then I was using fear code but dank moto. You know what it came out and it has a little bit of niceties that Fira didn't have I used the ligatures within, dank moto And trust me, I love ligatures. I don't know if I could live without them at this point, you know, I could live without them. And that's hyperbolic. But like I love my ligatures and I know some people hate them. But I'm a huge, huge fan. So I use danke mano happy to support that font with ligatures. I'm a big fan, it looks great. - -18 -00:05:35,669 --> 00:06:54,750 -Wes Bos: I use operator mono have for many years. And it's it was pretty expensive. I think it was like 200 bucks when I first bought it, which is nuts. But my answer to that is it's literally my job, you staring at it, but I'm coding so I can spend a little bit of money on that kind of thing. I actually don't like ligatures. I prefer to see the actual characters myself. And I always thought that there would be an issue with people taking my courses being like, that's just like a that's a very wide equal sign. I know it's three equals and something like that. But I know you've never had that issue before. So it no completely warranted. Yeah, yeah, you know it, I should try it. At some point. You also have to like patch operator Moto, if you want ligatures, and it's not something that I've been been interested in getting into. So I absolutely love it. It's It's such a, like your coding font and your coding theme is such a hotly contested thing. And people either love it or absolutely hate it. And they think like, it's it's funny, I used to get asked every single day like how do you look at that it's awful. And like the the mental overhead, that's the what people always use as an excuse for anything that they don't like, they think like the mental overhead is unbelievable. For something like that is like no, it's fine. I know what h looks like, and I absolutely love it. - -19 -00:06:55,260 --> 00:07:09,930 -Scott Tolinski: Yeah, right. Yeah, it is. It's one of those things. I mean, it's, it's a kind of an extension of you, right, you spend so much time in this environment, it's like your room or something, it's just another part of your your life that you spend a lot of time in. So got to make it yours. - -20 -00:07:09,930 --> 00:08:14,730 -Wes Bos: So now we're gonna get into each we each have five extensions, or just things we love about VS code, maybe it's a feature that has been released the last little bit, maybe it's a package and extension that we have. So we'll sort of just go back and forth each and hopefully you find a few things that you can add to your own workflow. So my first one here is bracket pair colorizer. It's pretty, pretty nifty little thing where if you have lots of nested blocks, maybe you have a function inside of that you have object with nested method. And inside of that you have another object, seeing what the associated brackets are curly brackets, parentheses, things like that, obviously, you can just click them and they'll they'll highlight each other. But another little extension that I run is the bracket pair colorizer. And it will just every time you have a nested block or nested parentheses will choose a new color for those brackets. And then you can you can quickly look at it and say like, oh, purple opens here, purple closes here, yellow opens here, yellow opens or closes there. Yeah, - -21 -00:08:15,000 --> 00:09:29,010 -Scott Tolinski: I love black, black and bracket colorizer. I use this one all the time. People always ask me about this. This is one where they see screenshots and they're like, how did you get those colored brackets? Where'd you get those colored brackets? No, I absolutely love this one too. I use this non stop. Yeah, so my my extension actually kind of goes along with this in a way that has to deal with colors in a way that in your code that's just helps you find things. And this is better comments from Aaron bond, that our comments has nearly a million downloads. And I use this all the time because what it does is it colors, your comments to be different colors based on a sort of indicator character. So for instance, if I have a comment, and then I put an eye started with an exclamation point, it colors the entire comment red, I use the app or anytime that it's like emergency stuff or something you need to be aware of. Then there's the to do one which I like to use to do some comments. I used them you know so much frequently and this color's your to do's makes them stand out make some orange, there's a question mark turns blue and asterisks which turns a green and a puram. One for parameter based comments. Love, love, love this extension, better comments, one of my favorites. - -22 -00:09:29,220 --> 00:10:39,000 -Wes Bos: Yeah, I've been using that one for a while now as well. And what I like about it is that it's not like a it's not like a specialized thing. Because if somebody is not using VS code, those comments don't look weird. They're just they just have the word to do or an exclamation mark in front of them. They're still comments at the end of the day. They're just highlighted a little bit differently in when you have the sync turned on big fan. Next one I have here is to extensions actually permute lines and unique lines. So in Sublime Text days, we had the ability To permute, which is flip line. So if you've got, sometimes I'll just copy paste data and paste it into VS code. And I want to flip all of the lines, top to bottom, bottom to top and permute lines will do that as well as unique lines will not take all of the lines and just give you remove the the unique ones. And I often have that where if I'm like making an object or something like that, and then pasting in data from a few sources. Like one example is one of my demos I'm working on right now is I took like a list of different colors from three or four places. And then I selected them all. And it just ran unique on them. And if I had like gray in there twice, it would just remove it for me. - -23 -00:10:39,120 --> 00:11:34,320 -Scott Tolinski: Well, I don't have unique or permute line style, but I just clicked install on both of those. Especially the unique lines with like you mentioned working on an object or something, I'm definitely going to be using that one. Absolutely. Cool. Next up I have is one that is very popular, a lot of people know this extension, and this is import cost. Now I less import cost because it's really easy to just install a bunch of stuff and not think about it. But when you have import cost installed, whenever you import anything in your application, it's going to tell you the bundle size as well as the jesup minified bundle size. So you don't really have a whole lot of excuses about not knowing what's in your project if it's staring you in your face, okay, by importing this, I'm now bringing in this amount of kilobytes into our project. This one was made by Wix, it has nearly a million downloads. So it's very popular, but I love import cost. - -24 -00:11:34,740 --> 00:12:45,150 -Wes Bos: Next one I have here is just a new feature to VS code, it just popped up last week in my VS code, and it's breadcrumbs. And I specifically love this for for my tutorials, because what will happen is if you're in a folder, three levels deep, and then you're inside of a file, and then you're inside of a function, and then you are defining a variable, what it will do is it will show you breadcrumbs, the all of the folders, the actual file you're in, and then it will go down to the nitty gritty of which function and which variable Are you currently in. And I love that just for my own sanity, because I can click on a folder, I can see a list of all of the other files and allow me to quickly jump into those sibling files, as well as for people who are taking my courses, they can quickly see what file am I actually in currently, because that's a huge problem I find in not just my own courses, but even when I'm doing a workshop is people create folders, they create files in the wrong folder, because of how small the VS code sidebar is. And maybe the indentation isn't as great, but sometimes easy to accidentally create a file in the wrong folder. And that there goes your your Friday night or whatever it is that you're doing. It's a bit of a bummer. - -25 -00:12:45,210 --> 00:12:46,950 -Scott Tolinski: There goes your Friday night. - -26 -00:12:49,290 --> 00:12:51,930 -Wes Bos: Obviously we do fun things if that's what our Friday night is. - -27 -00:12:51,959 --> 00:13:52,560 -Scott Tolinski: Yeah, yeah, definitely. Absolutely. Now I'm going to go with another piece of functionality just like you do this, wouldn't it although has been in VS code for a long time. And this is the go to definition by holding the Command or Control key, I believe it's Ctrl. On Windows on Mac, it's the Command key. If you are using react or view or any of these systems, this thing kicks so much. But let's say I have a component here, the component name is series. I've imported it from the series file. But you know what, I just want to jump to the definition where that thing was defined, I can hold the Command key, and then you your component, or your function or whatever now becomes a link, you can click it, and it takes you into the file. If it's in another file, it takes you to the line. If it's on another line, it basically it goes to the definition. So you never have to guess or try to find where things are specifically defined here. And this thing works. so darn awesomely, I love it, I used it non stop, big, big fan of go to definition by control or command control, click. - -28 -00:13:52,829 --> 00:14:21,930 -Wes Bos: Next one I have here is the toggle quotes extension is very simple. If you create a string with single or double quotes, ideally, your prettier will fix it for you. So I find myself using this lesson last, but I always create strings with single single quotes. And then I go shoot, should you use Tableau or you should use backticks. So what this will allow you to do is toggle between single, double and backticks. In JavaScript specifically, and works in all languages, it will toggle between all the different different kinds that you have there. - -29 -00:14:22,050 --> 00:14:30,480 -Scott Tolinski: It looks like it's a pretty easy, like command to it. It's just command and then the tilde de is that what is known as outlanded single quote, - -30 -00:14:30,600 --> 00:14:49,550 -Wes Bos: when I first installed it, there was no there. It wasn't hooked up to anything, which I thought was silly because people are like, Oh, it doesn't work very well. Because in Sublime Text, I had a similar one that would allow me to command till the end toggle between it and looks. I wired it up to do that and it looks like they have made that default. Now - -31 -00:14:49,620 --> 00:16:41,040 -Scott Tolinski: I just installed this and I just did a command it's command single quote actually. So the default one Okay, so I just wired it up to commit or I just installed it. I went to a string I did command single quote, and it's gone between my Wow, this great, I'm gonna use this all the time, especially for turning quotes into backticks. I'm gonna love that. So, next one I have here is one that people ask me about all the time, because I use this non stop this thing is called a rap council log. Now wrap console log is a really neat extension that basically allows you to run a single, you know, command and have it output a console log on the very next line of whatever your cursor was on. And it can be really interesting because it can also prepend it with a string of the with the variable is there you're logging, or if you have multiple ones selected, it can do multiples. This thing is just so incredibly easy. And what I like to do personally, is rig it up so that I can just do command l to do the one word outputs with the string. And it has been actually Whoa, hey, get this. So I talked about this. I'm wondering if this person heard me talk about this on an episode of syntax before or the level of tutorials because somebody has gone ahead and created a package that I'm now seeing called rap Council. Log simple, which has my command l a shortcut that I talked about before doing the exact same thing that I talked about where it does the variable string with the variable, so maybe just install wrap console log simple, then you don't have to modify the other one. And it's just going to do this stuff that I'm talking about here. Yeah, that's my advice, rap console. log simple. This one's really cool. So I'm going to uninstall rap council log, and change it to rap console log simple. Right now. Last one I - -32 -00:16:41,040 --> 00:17:07,770 -Wes Bos: have here is called snapshot tools for VS code. And what it will do is if you use jest, snapshots, it will, it will show you the, if you highlight over the snapshot, it will show you what the snapshot looks like overtop of it. And it will show you if there is an error in your snapshot compared to what it had last time. And it's kind of cool, because you don't have to go to the terminal. To see this, you can just hover over top of it. And it will show you if it's broken or not. - -33 -00:17:07,770 --> 00:18:23,010 -Scott Tolinski: Super cool. Yes, my last one is also a very popular one called a good history, you can be on any single file at all, you can open up your command prompt, and you can type get file view or view File History. And it shows you a history of that particular file. And when it's been changed what branch you're on, you can choose your branches, you can choose all your commits, you can copy the commit name directly, or you can click on the commit itself and compare the version of the file to the current file that you have open. I use this all the time, because I'm not a huge fan of commenting code out, I like to just get rid of it if I'm getting rid of it. And then if I ever needed anything from it, what I can do is just check the history of the file really insanely quickly check the history of the file, compare it against what I'm doing, maybe copy and paste or if something broke, I can compare it to the previous commit those kind of things. I absolutely love Git history, it gives you a really nice visual of all of your commits and branches as well. When you just generally click the Git history link that it puts in your your top menu bar gives you one of those like subway maps of all all your commits, and branches and all that stuff. So good history is one of my absolute favorites. I use it daily, big, big fan here. - -34 -00:18:23,090 --> 00:18:29,280 -Wes Bos: Yeah, I use that one quite a bit as well. The UI for it is is great. Like you said, beautiful, beautiful. - -35 -00:18:29,570 --> 00:18:52,920 -Scott Tolinski: But yeah, that's it this these are just some quick, tasty but hasty VS code tips that we absolutely love. So if you want to hear another one of these other events, I'm sure I could come up with 5678 more VS code extensions or features that I absolutely love. Maybe we can make it a little bit of a running thing if you're into it. So thank you so much for checking out this Monday history tree. Do you have anything else to add? Wes, - -36 -00:18:52,980 --> 00:19:08,810 -Wes Bos: I think if you have something you'd like us to try out VS code extension, tweet us at syntax FM at Wes Bos and Scott is at stilinski. And that's it for today. Thanks for tuning in. We'll catch you on Wednesday news, please - -37 -00:19:10,610 --> 00:19:20,400 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax162.srt b/transcripts/Syntax162.srt deleted file mode 100644 index 6dbddfe3b..000000000 --- a/transcripts/Syntax162.srt +++ /dev/null @@ -1,396 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:09,000 -development treats out there, strap yourself in and get ready to live ski - -3 -00:00:09,000 --> 00:00:10,530 -and West boss. - -4 -00:00:10,530 --> 00:00:28,710 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there. My name is Wes Bos. I'm a full stack developer from Hamilton, which is a city in Canada. And with me, as always, is Scott to linski. From Russia. - -5 -00:00:30,750 --> 00:00:38,220 -Scott Tolinski: zero percent from Russia. I'm Polish I am not Russian. And I live in Denver, Colorado. So No, you're wrong on all of friends close and - -6 -00:00:38,220 --> 00:00:39,060 -Wes Bos: close enough - -7 -00:00:39,060 --> 00:00:43,770 -Scott Tolinski: basic that you see Russia from my backyard, I guess kaylynn joke. - -8 -00:00:44,699 --> 00:01:44,910 -Wes Bos: Today we are talking about the fundamentals of JavaScript. So we're gonna like sort of go through like we always, we did an episode a couple weeks ago on like, what are the fundamentals of HTML and CSS. And now we're going to do an episode on the fundamentals of JavaScript. So if you are new to JavaScript, and a job posting says you should know the fundamentals of JavaScript. I think we're gonna go across today, we think that this is the fundamentals is at a certain point, like Java, just never JavaScript never stops going. You can like go into like, wormhole after a wormhole and just like find yourself in like random areas. But I think what we're going over today, which is going to be sort of a base that everybody should know about JavaScript, ideally, before you sort of branch off and go into frameworks, or canvas or audio or video or whatever direction you're going to be taking, these are a set of core skills that you need. Today's sponsors, Log Rocket and Freshbooks. We'll talk about them partway through the episode. But how are you doing today? Scott? - -9 -00:01:45,210 --> 00:01:45,810 -Scott Tolinski: Do good. - -10 -00:01:45,810 --> 00:01:47,010 -Unknown: Yeah, you know, we - -11 -00:01:47,010 --> 00:02:09,599 -Scott Tolinski: didn't live in them sleep deprived to dad life. But uh, yeah, I'm good. As far as everything goes, you know, we got the level up redesign launched a couple weeks ago, I finished my most recent course, recording that by the time you're listening to is already going to be available. And I'm feeling good. I'm gonna be working on some code stuff today, recording some syntax and a feeling feeling happy to be doing all of that. - -12 -00:02:09,719 --> 00:02:43,310 -Wes Bos: That's good. Yeah, I've got crazy over here, we just obviously just had her baby, we're about to go up to our cottage, which we bought, we just closed on it in a couple days, which is really fun. So I've been prepping for a big move up there. And then I'm working on a getting a new course launched on JavaScript, beginner JavaScript, which I took, I took a lot of the sort of outline of my course, my course will cover more than this. But I took a sort of an outline of the first part of the course. And and use that to scaffold up today's show. Well, - -13 -00:02:43,319 --> 00:02:47,940 -Scott Tolinski: I think that is going to make it extra special, extra. Extra tape. - -14 -00:02:47,940 --> 00:02:55,590 -Wes Bos: All right. So let's, let's get in on into it. You want to take the first one, what is the first part of the JavaScript fundamentals? - -15 -00:02:55,680 --> 00:04:22,680 -Scott Tolinski: Yeah, so the very first part, and I think there should maybe preface this where there there is some order to this. But there's a lot of things where you could think of is like this is the first thing you should spend time on. But really, I think the core concepts of any of this stuff is how variables work. And in JavaScript, we have var let and const. And those are basically where you assign things to right you have your variable, you have your lead, and your constant variable that should be unchanged. Now for the most part, I think beginners learning in 2019 should understand the difference between var, let and const. But maybe also understand why people are really saying to just use const and let when you need it. Because basically const means the identifier can't be reassigned, right? You can't reassign this thing. And that's one of the I think that's one of the techniques for writing good clean code is to not be assigning things ever if at all, I don't reassign things ever myself unless I absolutely need to. So knowing that const means you can reassign it, where let and var you can reassign it. However, they both understand the scope in a different way. I don't know what's the best way to say that you're the one t they are block scope, they're their block scope, but like a beginners not gonna understand what that means, right? So earlier, you want to get into what block scoped is and then maybe, maybe we can lead back into this one. - -16 -00:04:23,270 --> 00:06:17,790 -Wes Bos: Yeah, in my course teaching it that's exactly what we do we just say like, these are var Latin const here's the gotchas. And by the way, there's some weirdness around arrays and objects where they're not technically like you can add value to the Reign object and but you can't reassign the variable Yeah, that's sort of a downside to like this even my course my course is not like here's everything you need to know about it because like that's too much right? And then you have to get into object freeze and all that and all sudden you're overwhelmed. So you just need to know like var Latin const they one can not be reassigned. One can be reassigned in one is also can be reassigned, which is var. And then you get into at a later point, which is with the next item that we have here is is scoping. So, understanding where variables are available to you based on where they've been created where they've been passed into. So in JavaScript, we have block scope and function scope. And function scope is is also a block scope, which is kind of confusing to some people. But because there's curly brackets to block scope as well, then knowing basically how scope lookup works. So basically, if you've got a variable, and it's not available inside of that function, does it go to a higher level, you don't have to know every little nitty gritty thing about it, but just have a decent understanding of how scoping in JavaScript works and, and how the lookup works. Because I think that's probably a huge, that's a surefire way to write bad code is not understanding scoping and having global variables or or having lots of errors. And that would make me really hesitant to hire somebody if they don't know how scope works, because you essentially have to rewrite a whole lot of the code and you could potentially be writing some huge mistakes. Yeah. Next up understanding what types are. So types in JavaScript are different types of values. Anytime you have a value, it's going to fall into one of the six available types that we have, is it six or seven? Now? JavaScript? - -17 -00:06:17,790 --> 00:06:20,550 -Scott Tolinski: Did we just do a thing on that no syntax live? i? - -18 -00:06:20,640 --> 00:07:12,270 -Wes Bos: Did I just I literally just recorded a video. There's seven, I can never remember. Yeah, there's seven, because the new one is symbol. So understanding what the different types are, like, Why is there only one type of number, like what's in what do you do with decimals in that specific case? And then go into sort of every single type. And so with strings, there's double, single and backticks? What are the pros and cons of all of those? And then once you get into objects, I think objects is is like a little bit deeper, you don't have to know absolutely everything about them. But I think there's one thing you do need to know about objects. And that is how do you copy them? And what is the difference between a reference versus a copy? And so yeah, I mean that like if you have a nested object inside of it, or if you want to take a copy of an object, you don't accidentally just reference the original one. So I think those are some some important terms to grasp. Cool. - -19 -00:07:12,720 --> 00:08:49,520 -Scott Tolinski: Yeah. Okay. So next, I think it's important to talk and understand the functions, the different types of functions and how they're used and why you might use some of the different types of functions, but also the scope and in everything that comes along with a function. And the fact that you can store a function as a variable, right, you can declare a function as a variable, but you can also use a function as an expression. And you see these a lot of times with just like anonymous function expressions, or even named function expressions, but you can use an inline function directly with your your arrow functions or your non arrow functions. So you want to know the difference between a function definition or I mean a function expression using the keyword function, but also using the arrow function and, and maybe what the difference is there, I largely use arrow functions myself, but a lot of people don't. So the important understanding of the usage of this in the scope around an arrow function, and why those even exist is important to know. I also think it's important to know the difference between a function and a method where a method is sort of a function that exists on something else, to put it in the most non technical way possible, maybe a functions within a class. And you can declare that that class or that method, and that scoping that function to the class. So you'll want to understand the difference between what a method is and what a function is, and how those two interact in the sky. I guess the key word so far over, I think everything here has been scope A lot of it, you'll be able to understand scope within all of these instances. - -20 -00:08:49,590 --> 00:10:19,159 -Wes Bos: I think a lot of interview questions also surround like you said, functions can be stored as values. So not every programming language allows functions to be values, meaning that you can't stick functions in variables, you can't pass them as arguments. They can't be, they just can't be moved around like that in JavaScript, you can that's what people that's what they mean, when they say functions are first class citizens are first class functions. And that's sort of the basis for functional programming. So I think a lot of a lot of people who are like functional programmers interviewing you that they want to know that you understand that a JavaScript is kind of special in that it can hold functions as values. So just knowing about that is important. Definitely. Next we have here is the DOM. So part of JavaScript obviously is going to be working with the DOM. And even if you are planning on using some sort of framework, it's important to understand how the DOM works at the end of the day. So that is creating elements, selecting elements, modifying elements, looping over elements, but basically just being able to interface with raw DOM elements on the page is going to be something that you need to know and I'm offering Then surprises, I think a lot of people just went straight from jQuery to react, or they just go straight into react when when they're learning. They don't spend a whole lot of time. But I find that I have a awesome understanding of how the DOM works in vanilla JavaScript. And I find that it's very helpful in react in react land, just because you know, how websites work at the end of the day? - -21 -00:10:19,440 --> 00:10:49,710 -Scott Tolinski: Yeah, I think that's actually something that's largely looked over. For some reason, when people are teaching JavaScript, they they go so much into the JavaScript fundamentals and the JavaScript things that they don't like, take into account that the DOM is really what we're working with. So JavaScript and the DOM, and how JavaScript interacts with the DOM is is one of those ones that is just largely, I don't know, passed over for some reason, people don't spend enough time on it. those skills are always going to be applicable. Yeah. - -22 -00:10:49,740 --> 00:11:20,640 -Wes Bos: And I don't think you need to memorize it. I find myself every day just know I look up stuff all the time. Yeah. How do you do this in vanilla JavaScript, that's absolutely fine. There's probably not worth putting space in your brain, especially if you're working on a react app, or what other kind of app full time, you're not going to be using it all day. But again, spending some time adding elements, putting elements adjacent to each other, duplicating elements, removing them, yeah, what the difference between a node and an element is, that's a set gotcha that a lot of people have. - -23 -00:11:21,059 --> 00:12:30,809 -Scott Tolinski: Yeah, even just updating basic properties, classes, in your text, those kind of things, those skills are always going to come in, in handy. And if you understand a lot of these things, then maybe you're going to have less errors in your site. But if you don't understand them, and you have lots of errors in your site, or maybe you do have lots of errors, because that's how life is, maybe you'll want to check out one of our sponsors this week. And this is Log Rocket. Now Log Rocket is the service that allows you to see bugs as they happen with this amazing session, replay the video that gives you everything that you could possibly want to know about the bug. When it happens. It gives you your network tab, it gives you the console it gets your Redux store allows you to really see the issues as they happen along with a session replay video that you can scrub through and see what happened when the user clicked and broke the whole site. So you're gonna want to check out Log Rocket at Log rocket.com forward slash syntax. It integrates with everything you know, and love. And it is one of those services that is going to save your bacon. Save your bacon in a Big Green Egg smoking it up. So check it out. I can too. What's that? - -24 -00:12:30,809 --> 00:12:32,970 -Wes Bos: Yeah, it'll save your Canadian bacon as well. - -25 -00:12:33,000 --> 00:12:35,190 -Scott Tolinski: Yes, Canadian bacon. Also an excellent movie. - -26 -00:12:35,909 --> 00:12:36,750 -Unknown: Canadian bacon - -27 -00:12:37,020 --> 00:12:39,390 -Scott Tolinski: movie or the or the thing? Ah, - -28 -00:12:39,419 --> 00:12:40,230 -Wes Bos: the thing. Is there a movie - -29 -00:12:40,230 --> 00:12:44,730 -Scott Tolinski: there's a movie with john candy and Canadian bacon. - -30 -00:12:44,730 --> 00:13:01,380 -Wes Bos: It's funny because Canadian bacon is a very different thing to everybody to Americans. They tend to think that's what that's what people think it is. That's not what it is. Like, we don't just yeah, we don't just go by like a circle ham from the grocery store and put it into the frying pan because - -31 -00:13:01,799 --> 00:13:06,029 -Scott Tolinski: I like some like sandwich meat and we throw it on the thing. We're like, we're Canadian. - -32 -00:13:07,950 --> 00:13:47,940 -Wes Bos: No ik bacon is off. So and also in I think in the UK. Bacon is like the part of the belly but also part of the tenderloin. And it's like this like, I think they call it like back bacon. If you get bacon in the UK. That's that's what it looks like. It's I think it's also not smoked. It's just cured. Hmm. Which is kind of interesting. But that's again, that's not what Canadian bacon. Canadian bacon is what we call it peameal bacon here. So we don't just like walk around saying like, like, I always want to say like, this is bacon in Canada, like the French people probably don't just call toast french toast like, maybe they do actually do you think they do. - -33 -00:13:48,360 --> 00:13:55,080 -Scott Tolinski: I you know, french fries, mean? fries, and I'm ignorant American. So - -34 -00:13:56,429 --> 00:14:16,950 -Wes Bos: anyways, PML bacon is the pork tenderloin, which is a really lean cut of meat. They cure it for like a week or so. So it ends up really pink. And then they roll it in cornmeal. And then you slice it up really thin and cook it ideally in a cast iron pan. So it's not saying that we have all that often in Canada, but now you know, - -35 -00:14:18,299 --> 00:14:22,409 -Scott Tolinski: you have just been given the fundamentals of Canadian bacon. - -36 -00:14:24,750 --> 00:14:27,059 -Wes Bos: So Google, it's Google peameal. Bacon. - -37 -00:14:27,090 --> 00:14:34,080 -Scott Tolinski: No, I don't know if I'm gonna do that. I don't know what that word. Maybe you should have a spelling link in the - -38 -00:14:34,110 --> 00:14:57,149 -Wes Bos: e a m e a l peameal. Bacon. That's amazing. I would highly recommend that you. You try it yourself a female on a bun. That's that's what they saw at the farmers market in in Toronto. And it's like a huge thing. Ooh, okay. Anyway, back to JavaScript. I thought we would we got a couple of minutes I thought we would dive into what the heck Canadian bacon is. - -39 -00:14:58,140 --> 00:15:57,799 -Scott Tolinski: rightfully so. Well. Let's get into To the I was going to try to make another Canadian bacon connection, but I don't have one here. And this is going to be understanding prototypes. And this. Now this is one of those things that I feel like, I feel like people. They talk about how hard this is. And maybe it's just because I didn't come from different programming languages. But this has never given me that much trouble in JavaScript. I don't know why. But this just always refers to this the thing that you're talking about, and the the sort of scope that you're under at this particular point. And now again, that scope is going to be different based on where you are and your application. But I don't know, for me if I ever needed to be confused about what this is, I just looked at this, you know, through debugger in there through a console login. Okay, this is this thing. Okay. Or this is undefined. I guess I should figure out why. You know, and to me, what is this equal to? - -40 -00:15:57,840 --> 00:15:59,850 -Wes Bos: Just? I don't know, check it. Yeah, just - -41 -00:15:59,850 --> 00:16:22,710 -Scott Tolinski: check it right. Exactly. Yeah, people talking about confusing that is it maybe it is confusing to know exactly what this is all the time. But I don't know, this is one of those concepts, that it's hard to talk about this without saying this too much. It's like saying that Amazon assistant name whenever you're talking? Oh, yeah, when you're trying to you're trying to talk about this, you just end up saying this a whole bunch. And everything gets kind of wonky, - -42 -00:16:22,919 --> 00:17:11,040 -Wes Bos: a little trick that I use, and this isn't 100%. But generally, when you want to know what this is equal to and a function, you take a look at what what got called, it's usually a method, and the method will have a.to the left of it, and to the left of that there will be something there's usually an object that you're calling that method on. And that's what this is equal to, this is equal to the thing that the method got called against. And that's usually an instance of some sort of, like a class or react component or something like that. And if there is no this, then you are it's probably just equal to the window. So I know it's, I think that the problem is, is that a lot of people like they like try to learn this prototype a little bit too early, and they don't understand like, why you might need it or even like a lot of developers don't even use that at all. Yeah, - -43 -00:17:11,219 --> 00:17:12,720 -Scott Tolinski: I hardly use it. No, no, yeah, - -44 -00:17:12,959 --> 00:18:05,400 -Wes Bos: I hardly I, the thing I used to always use it for was event listeners. And then I switched over to using like e dot target and EDA, different target, just because like, then if it's like an arrow function, I don't have to go like, Oh, whoops, I did an arrow function. Now I have to do it. So I just started using the event, in all cases. And then now that react is going hooks in the coding a lot and the hooks direction, I even now start using this a whole lot less. So it's more of like a object oriented programming style. So you might not even have to use that sort of thing in your your job. But it's worth knowing like how it works and creating an object yourself. It's worth looking at the old class creation, design pattern, and then looking at the classes that came in ESX. And how those are the same thing. Just because it's a common interview question. - -45 -00:18:05,489 --> 00:19:14,280 -Scott Tolinski: Yeah, I feel like this, like, what is this equal to at this point is a common interview question. So if you have trouble with understanding what this is equal to, then maybe just there's got to be like a site that has a whole bunch of just scenarios. And they're like, what is this equal to at this given time? And if you want to understand it a little bit better, maybe you can build that little scenario thing yourself, just write a bunch of JavaScript, and then check what this is at any given point. And then, well, I think you might be able to pick up on patterns and how it's used. But obviously, I think you'll want to spend some time with it. Because it is a common interview question. It's one of those things that people like to get other people on, like, oh, that you can't find what this is, at this point, or, or what's the scope here? I've been asked what a prototype is many times on an interview. So understanding prototypes and understanding I mean, it's all based on the word prototype anyways, but how one function or one class can access the, it's so weird to talk about classes now in JavaScript, even though they've been in here for a little bit. But you have a function, you have a function prototype, like how do those two relate to each other? And what does that mean? Okay, - -46 -00:19:14,670 --> 00:20:03,660 -Wes Bos: that would be an awesome little website for somebody to build. That would, I think that would be an awesome on your resume as well, where Yep, you just create a little micro site, and give me 10 examples of different instances where this will be equal to something else, like an event listener, a method on an object, an arrow function on something else, and just list out a whole bunch of things and make I just looked up the domain name, this dot Dev, which somebody has taken and used as hire dot this dot Dev, but I don't know find a snappy domain name. That would be an OS. If I was a hiring manager, I saw that on somebody. Someone's portfolio saying, like I built a little site that explained how this works in JavaScript. And I was in that's amazing because you obviously thought I need to understand this. So I tapped And then share the share the wealth with everybody else. - -47 -00:20:03,720 --> 00:20:44,250 -Scott Tolinski: Yeah. And I mean, if they're gonna ask you about it, you can show that not only do you understand it to the point where you could explain it, but you can understand it to the point where you could teach it other people or create a resource like that, I think is very valuable. Next, I think you wanted to get into events, which is a big one, because right along with the DOM, you know, I, I know a lot of resources, they like to use events, maybe in a non practical way. But understanding how events work specifically, in real world use cases, like submitting a form and doing something with that form other than just sending the request via the post or something like that. There's a lot here in terms of wanting to make sure that you have foundational bases covered. - -48 -00:20:44,250 --> 00:21:09,780 -Wes Bos: Yeah, so listening for clicks on buttons, listening for all of the different mouse events, because there's, I think there's four different mouse events. And now we also have pointer events, which tries to aggregate touch and mouse events into one, which is actually pretty sweet, I think. But I think there's like a nine different pointer events that are in there, or you obviously don't need to know them all. But just understanding how these things work. Like what does bubbling and propagation mean, - -49 -00:21:09,800 --> 00:21:12,000 -Unknown: bubbling. So we should definitely, - -50 -00:21:12,110 --> 00:21:56,730 -Wes Bos: we should do an episode on on bubbling and propagation. Yeah, that would be a good one. So understanding how those work and why why those work. One thing I found helpful is that even though this might seem like an advanced topic, which is dispatching your own events, I think it will actually help you understand how events work in general, because what you can do is when something happens, you can dispatch your own event. And then on the other end, you can start listening for your custom event, and figure out how you can pass data from the dispatched event to the event handler via the event object. I think that will that will maybe give you a little bit of an aha moment. And custom events are super handy as well to if you're building any sort of component word, - -51 -00:21:56,880 --> 00:23:34,680 -Scott Tolinski: yeah, I think this, this next one, this is a very, very important one. And if you really want a good understanding of some of these things, we have a whole episode on JavaScript array method. So I think understanding arrays and how they work are a big part of JavaScript, especially foundational things, when you want to manipulate an array, how you do so with push pop any of those things, slice, splice, whatever, when you'd want to change an array versus when you'd want to create a new object itself, you will want to understand spreading and resting those kind of things, you'll want to understand any of the main array methods, and go ahead and listen to our syntax episode on array methods. It's one of our most popular episodes if you aren't into array methods. If you aren't, if if you don't hear the word array method and go, Oh, yeah, array methods are awesome, then I don't think you spend time with them because they are awesome. So go ahead and listen to our episode on array methods. Because knowing the at least at the very least, for each map, filter, reduce will save you a ton of time and headache trying to do more complex things with loops. And who knows what trying to get the array to bend to your will, in the way that you want it to when to use an array versus an object when it makes sense, when you need those keys, or when you want to pull stuff out, specifically, an election or something. And again, like we mentioned, when you are modifying an array versus when you're creating an entirely new array and what that means for you and your code. Then you have mutation verse immutable written here. And I think that's a good foundational point on JavaScript as a whole, like not just arrays, but like that's a - -52 -00:23:34,680 --> 00:23:37,380 -Unknown: military word people have. It's scary. - -53 -00:23:37,380 --> 00:23:43,470 -Scott Tolinski: It scared me a lot of mutability. Hey, if something can change, you're not Yeah, if you can change it. - -54 -00:23:44,790 --> 00:23:48,900 -Wes Bos: Can they mutate? Yeah, they change from one thing to another? - -55 -00:23:48,990 --> 00:23:51,150 -Scott Tolinski: And is it changeable? changeable? - -56 -00:23:51,150 --> 00:24:29,220 -Wes Bos: Are they changeable arrays? Yeah, that's, that's so much nicer. Yeah. Yeah, mutation sounds so much scarier. But there's a thing like some of the array methods, like pop will take items out of the original array, and then some of them will like slice or splice, I can't even remember what they are, I always have to figure it out myself, we'll just return a new array. And they're sort of sort of a trend right now, just to going all immutable, only using the array methods that will return a new array instead of modifying the other one. But in some cases, that's annoying, because then you have to, like you have all these, I got all these variables, and you're just re assigning a variable. I do do that I - -57 -00:24:29,220 --> 00:24:35,940 -Scott Tolinski: typically keep things immutable, but that's it. Yeah. Not nothing. Maybe like 99% of the time. I do. - -58 -00:24:36,240 --> 00:25:06,990 -Wes Bos: Yeah. Especially if you've, if you have a function and you pass in the array, and then you remove an item and you don't you don't think that it's going to be modifying the the array outside of that function. So that goes back to the whole reference versus copy sort of thing. So I think that's that's worth spending some time on and understanding how these things are. Again, like with all this stuff, you don't need to be an absolute expert. But if somebody's like in an interview, or or you need To know about like this, this, by the way this will mutate the array. You should know what that does, because that's the potential for a huge bug down the road if you don't, - -59 -00:25:07,410 --> 00:25:37,980 -Scott Tolinski: yeah, yeah. And I mean, in speaking of winter reference something, and I don't know what what the transition here is, but when you want to reference your invoices, and you want to reference your clients is your clients as your clients, you're going to want to go ahead and check out fresh books. So which is the place that you can keep track of all of your, your your invoices, your payments, all that good stuff that you use, so you can get paid for the work that you have. So with more about fresh books, one of our sponsors this week is Wes Bos. - -60 -00:25:38,070 --> 00:27:58,050 -Wes Bos: Yeah, you've got enough to learn about JavaScript. So if you are trying to freelance work your way up as a web developer, it's not worth spending also more time on taxes and invoices and expenses. And time tracking that stuff is very, it can take over your entire life, I always talk about like working on your business versus working in your business. And working on your business would be doing the busy work. Working in your business, I forget which one it is. But essentially, don't waste your time doing stuff like that, get fresh books. To do all of your cloud accounting@freshbooks.com four slash syntax, it's going to give you a 30 day unrestricted free trial. And make sure you syntax in the How did you hear about a section that will allow them to keep sponsoring thanks so much for fresh books for sponsoring. Cool. Next we have here is flow control. And flow control means doing things in different orders doing things when they're conditional. So this has to do with looping. So looping alone has a whole bunch of flow control in it, you can, we have the for of loop, we have the for in loop, we have all of the array loops, which is the we have got for each we've got map and reduce, like so understanding how those all work. And then also when might you want to use a for in or for of loop versus a dot for each and scrutinize both opinion, almost always you reach for one of the array methods. But specifically, I found a good use case for the for of loop, I think the other day where I had an array of promises that it needed to run in sequence. So did one when that was done did the next and when that was done did the next one. And right now there's no way to await inside of an array loop right now. So if you've got like an array of things that you need to do one and the next and the next, but you can await inside of a for of loop. And that will sort of pause the the loop from running until you've until you've resolved that promise. So I don't know if that has anything to do with that what we're talking about here, but I just thought that was a useful little tidbit where I go Hmm, I was wrong about always hundred percent of the time using for each because that was a good use case of using a foreign or for of loop. Yeah. What other kinds of looping Do we have not looping if it's his flow control, knowing about truthy and falsy do you know about truthy and falsy sounds like a like a couple that lives down the road. - -61 -00:27:58,320 --> 00:28:49,650 -Scott Tolinski: Oh, yeah, truthy and falsy Yeah, I see them out gardening every once in a while they're putting in some hydrangeas today, truthy and falsy if that just really understanding that that control. You know, it's one of those things that I think if statements in particular, they seem like they're so basic, but when people are first starting out, I don't know if they truly understand like, really how you can make things efficient with your if statements or readable sometimes people go really deep with if this than if else than if else or or this or whatever. And then maybe a switch would be more more suitable, or ternary would be more suitable. Or maybe even they're using those things, when is straight up if would be more usable. So just knowing how to write clean code in those sort of ways. And I have a resource at the end of this episode that you're gonna want to check out that's going to help with a lot of that stuff. And, yeah, - -62 -00:28:49,830 --> 00:29:33,690 -Wes Bos: that's good. The other thing we have here is promises and a sink await. So this is somewhat related to Ajax calls. But it's also related to flow control, which is if you have stuff that takes time. And if you don't know what a synchronous is that I guess that's a whole nother topic there is what does this word synchronous mean? And why do why do we need promises? And how do they work? And why do we need a sink await? And how does that work? So especially if you're coming from another language like PHP, where it's kind of hard to do a synchronous stuff or everything by default is synchronous. And then you move to JavaScript or a lot of stuff is as synchronous by default. So that's, that's another big hurdle to get through and understanding how that works. - -63 -00:29:33,750 --> 00:30:39,630 -Scott Tolinski: I feel like a lot of this stuff we have syntax episodes on. So honestly, if you want to like really hear more of us talking about some of these things, deep dive into the syntax back catalogue, and just look for titles that call out any of these things. Next up is security and accessibility exe s s which is also cross site scripting. Basically how a site and a server are basically how domains are talking to each other and what they have access to To and why that matters is important. Obviously, all websites shouldn't be able to pull all information from all all other locations and setting up those sort of rules and understanding what the heck is going on, there is an important thing to know just for your own security, but it's also something you're going to hit. Anytime you do anything, you follow it tutorial, then you go to do it on your own, where you're not following your script 100%. And then you get hit with a cross site scripting error. And then, huh, yeah, so you got to know how that stuff works. Understand just any, anytime you are working with API's, what exactly is going on? requests, headers, responses, those kind of things? Yeah, - -64 -00:30:39,660 --> 00:31:45,420 -Wes Bos: I don't think you need to go too deep into all of the like, requests back and forth and curity keys and all that, because that's, that's pretty complicated. But like, at least know, like Scott said, at least know that when you're creating HTML, and you're dumping data that's coming from someone else into your HTML, know that that's a possibility for access and why that might be. And we've got a couple shows on on this as well. I think we did one just a couple couple weeks ago explaining what that potential issue is, I think the other thing that is important to know, is just a couple things about accessibility, you don't need to be an absolute expert. But there's certain things that can be what we call foot guns, where you can accidentally or unintentionally make a website inaccessible to a large portion of your user base. And just knowing about things like when you're creating elements, if they can be accessed via the keyboard, what other kinds of things, we have a whole we have a whole show on this that you can you can go through but just like knowing like, you're not an expert, but you should know about these things. So you don't accidentally be mean to somebody who's visiting your website. - -65 -00:31:45,510 --> 00:32:33,690 -Scott Tolinski: Super, super, super important. Yeah, I mean, I guess testability. Overall, I think in every facet, you should have the accessibility foundations down. Because I think that all this stuff's important. It needs to be more important. So make sure you got it, make sure you got it down. We already mentioned immutability, and then you have a little section here to know about, but not to master or you're not needed to master and the first one is modules. Now, you know, I agree, especially because modules are used, so is pervasively the right word. Right now, with all of our front end frameworks, you're breaking things up, just understanding it the very least basic Import Export named imports and exports, those kind of things. You don't need to get in to all of the crazy specifics, but just lighting design patterns, things like that. - -66 -00:32:33,720 --> 00:32:36,480 -Wes Bos: That's a rabbit hole, but import export, like you said, - -67 -00:32:36,510 --> 00:32:39,510 -Scott Tolinski: Yeah, yeah, wins, name diverse default, that kind of thing. - -68 -00:32:39,660 --> 00:33:34,440 -Wes Bos: Totally. And knowing that modules have their own scope is probably important as well. How do you share data from one module to another, knowing about closures? closures is one of these things that people always ask in interview questions as well, right? Oh, yeah, it's it's it goes along with immutability, where you're like, Whoa, closures that sounds like serious. That sounds like something but it's not. It's just that I don't know you got a function. And then when that function returns, there's sort of this like, mysterious space that still lives inside of there that you could have variables inside of. So I've got a couple simple examples coming up in my courses, lots of good stuff online, that will give you just the the main idea as to what is a closure? And then I think you'll find yourself running into lots of different situations where you say, I could use a closure here. You don't have to code absolutely everything. And closures just know what they do and why that might be useful. - -69 -00:33:34,680 --> 00:33:50,850 -Scott Tolinski: Definitely. And it's funny, you have Ajax requests here. And I kind of mentioned this in the cross site scripting one, but yes, requests in general, how to, it's funny to hear them called Ajax requests in 2019. Just because I remember that being like a thing in Dreamweaver, - -70 -00:33:50,910 --> 00:33:54,330 -Wes Bos: right? You do Ajax requests, or am I just being old? - -71 -00:33:54,630 --> 00:34:25,670 -Scott Tolinski: I think you're being called I don't call them I just call them requests. Yeah, just your fetching or whatever. But basically, being able to request information from a third party, being able to then take that information, parse it, and then use it typically via JSON, or whatever it is, or graph QL. Now at this point, but just understanding requests in that sort of way, how you can get data from an API is is I think, one of the most Yeah, it's it's an important thing to understand what the foundations here. - -72 -00:34:25,770 --> 00:35:02,210 -Wes Bos: Yeah, I agree. I think we should stop calling them Ajax requests. Because Ajax means a synchronous JavaScript and XML and synchronous to now it's all a synchronous by now. The XML HTTP requests used to be synchronous. No longer is you can you can no longer I don't even think you can turn that setting on anymore. I always see like little errors in my Chrome console that this will be going away soon or something like that. And obviously, it's not XML knowing what JSON is another good one, like what is JSON, and why do we use it? It's it's JavaScript object that is put into text so you can easily translate ported from one place to another, - -73 -00:35:02,550 --> 00:36:27,570 -Scott Tolinski: I feel like after the recording of this episode, we're gonna be like, oh, there's so many foundational things we missed, because there probably is. So if you think we missed any of these Foundation, things, I would love for you to tweet us out, we'll give you a retweet. And we'll that'll be our way of saying I'm sorry for missing it in the episode, I think the last thing that I had on here, and this is one of the things that got me so much better at JavaScript is understanding clean code. And now I've linked to a clean code at GitHub repo that is basically based on the book by Robert Martin clean code, but it's adapted to JavaScript. And the thing that's so great about this repo is that does a, here's what's bad, here's what's good. And here's some code like a one liner, really illustrating why. And in terms of understanding the foundational concepts of JavaScript, this might help you understand the, like you said, with foot guns, these things in this clean code repo are going to prevent you from foot gunning yourself, or shooting yourself in the foot, so to say, because the cleaner your code is, the more it adheres to sort of these kind of standards or a standard like this. Yeah, the easier it is for I think, for you to get the picture and to understand how these things are working. So I would highly recommend taking some time and going through all of these and this was one of those ones to me, that will greatly improve your understanding of foundational, - -74 -00:36:27,650 --> 00:36:48,230 -Wes Bos: this is really good. I'm just reading through this right now. I love when people say bad example. Good example. I love that because I can just look at these little really clear and very clear. Oh, yes, I shouldn't do that. Or that's what people mean, when they say at most two arguments. What if you need more than two arguments? What do you do? Well, here shows how to use an object as an argument. Yep, - -75 -00:36:48,270 --> 00:36:53,820 -Scott Tolinski: this this function should do one thing. Here's why. You know, I love it. Beautiful, big fan. - -76 -00:36:53,850 --> 00:36:54,710 -Wes Bos: I'm gonna do this. - -77 -00:36:54,710 --> 00:37:03,210 -Scott Tolinski: I like that a lot. Yeah, my, my better JavaScript course is basically this repo adapted into a JavaScript course. Or basically what we do we just that's - -78 -00:37:03,210 --> 00:37:09,630 -Wes Bos: available at level up tutorials. COMM Ford, store Pro, pro Pro, the store - -79 -00:37:09,630 --> 00:37:12,980 -Scott Tolinski: has actually gone away. It still exists, but it's kind of gone away. - -80 -00:37:13,130 --> 00:37:16,460 -Wes Bos: Oh, interesting. But there's a link on the top it says store. - -81 -00:37:16,770 --> 00:37:41,550 -Scott Tolinski: No, it exists. It exists. But it's now just the same as the tutorial listing. Okay, just shows. Okay, now buttons. So it's really just a toggle for those buy now buttons, so it allows you to buy it's so funny because the store used to be an entirely separate section of level up tutorials comm like an entirely different codebase. It was its own own thing. And now it's, it's pretty much gone. I mean, there's now it's just essentially a component that's toggled on and off by a route. - -82 -00:37:41,940 --> 00:37:53,550 -Wes Bos: Cool. All right. I think that's it. That's the fundamentals, it's probably a little bit overwhelming to know that that much stuff, like almost an hour's worth of stuff is the fundamentals just rest to tell you what plumbing, - -83 -00:37:53,760 --> 00:37:55,110 -Scott Tolinski: yeah, for me to talk about it. - -84 -00:37:55,130 --> 00:38:17,420 -Wes Bos: And that's not even getting into any frameworks or anything. It's just knowing how the language itself works. But I think like, you could probably master this in, I don't know, a couple weeks or something like that understanding what it is before you. You're not going to be amazing at it, but just knowing what they are and sort of having headspace about them. And then I think as you build real stuff, those things will cement themselves. - -85 -00:38:17,690 --> 00:38:27,170 -Scott Tolinski: Yeah, absolutely. I like that word, cement. Cement is the perfect word to build your foundation. We got to cement Oh, this foundation. That's deep. - -86 -00:38:29,160 --> 00:38:32,130 -Wes Bos: All right. What about some sick picks the sick pick for me today? - -87 -00:38:32,399 --> 00:40:02,340 -Scott Tolinski: Do? Yeah, I actually have a couple of sick picks, I'm gonna have a hard time picking between I got so many things I like right now. Lots of stuff. This is going to be a sick pick that will fit this episode, I think very, very appropriately. This is a really awesome podcast that I just found some I'm so sorry. Because I don't know who tweeted this out. Somebody tweeted this out. I saw it. It's from code newbie. And the podcast is called a base CS. And so to give you the sort of the basics of this podcast is it's computer science topics that are distilled into a really sort of brief episode maybe like a 20 minute long episode. So let's give you an example. season one episode one is bits binary and bytes, a beginner friendly breakdown of how to count in binary, and how it relates to bits and bytes. And so they start sort of there. And if you start at the very beginning and just listen up a friendly intro to big O notation. I know people were asking about that in one of the episodes of syntax stacks in real life, like basically what is the concept of a stack and how does it relate to things in real life. There are so many things in here trees in real life. Don't be stumped by trees, binary searching, just all these concepts in computer science that you might not have ever picked up anywhere. And here they are explained in a really brilliant way the two hosts are absolutely amazing. So I'm a huge fan. of this podcast and I've been listening to every episode, - -88 -00:40:03,570 --> 00:40:29,670 -Wes Bos: I am going to sick pick a baby item. And this is the outlet sock. So probably the funniest part about having a new baby is that you're always like, just like looking at them and making sure that their chest is moving to make sure that they're still breathing. Every new parent is just like, Huh, and when your baby's sleeping, sometimes they're breathing very lightly, and like you just like have to poke them to make sure that they're still awake. - -89 -00:40:29,690 --> 00:40:37,590 -Scott Tolinski: It's the worst part cuz they're sleeping, baby, but I'm not quite sure. And you put your hand on them and you're like, Okay, they're breathing, and then they wake up. You're like, I shouldn't Yeah. - -90 -00:40:37,590 --> 00:40:48,210 -Wes Bos: So it's the worst part for sure. It's I think it's what contributes to a lot of sleep loss for parents, because you're constantly on edge being like, are they okay? Are they okay? - -91 -00:40:48,479 --> 00:40:49,730 -Scott Tolinski: Then the whole crying part, - -92 -00:40:49,859 --> 00:41:58,920 -Wes Bos: that data the whole crime part as well. That's, that's awful. When we had our last kid a couple years ago, we bought this thing called the outlet smart sock. And it's basically you and you go to the you go to the hospital, and they put the little clip on your finger that has like a red light. So it's like, it's one of those it will track your your heart rate and your your oxygen level. But this is a sock that you put on the kid's foot. And then there's an app that will basically just transmit that data. And I know there's a lot of people that are gonna say like, Oh, you put in your kids. vitals on the internet, Mark Zuckerberg is gonna comment like, last time I tweeted about this, we had some really opinionated people. So please hold your fire. This makes me feel a lot better about my child. But it's great because and then it will alert if the sock falls off, it will alert if there's ever an issue, and only ever once alerted for our last baby. And you're not sure if it's a if it was a false alarm or not. But I'm happy it did alert us. And it's pretty cool. So it's just a little little sock that you put on their foot. And you you can see their vitals and I think the new one does like sleep tracking. They'll tell you like when they're sleeping and when they're awake based on if they're wiggling or not, which is pretty cool. So it's the outlet smart sock - -93 -00:41:59,129 --> 00:42:01,980 -Scott Tolinski: word. Cool. Yeah, this looks nice. Yeah, - -94 -00:42:02,010 --> 00:42:21,380 -Wes Bos: it's a little little design, super expensive. But it's well worth your it's like, I think it was like 300 bucks for us. But your sleep is worth it. And the thing about kids stuff is that you could just sell it. And like six months because kids stuff is just turns over so quickly. And like the Facebook groups for selling kids suffer amazing. - -95 -00:42:21,440 --> 00:42:35,550 -Scott Tolinski: Yeah, yeah, I believe it. Absolutely believe it. Most of the stuff that we got was either given to us or borrowed, you pass it along and you buy from somebody else. That's just how it is. Cool. So shameless plugs. Do you have any shameless plugs for us? - -96 -00:42:35,669 --> 00:42:50,630 -Wes Bos: Wes bos.com. forward slash courses, has a list of all my courses, you can learn ESX, or node or react or CSS Grid, just take a look at what of that available bunch of free bunch are paid. And you can, you can grab a course if you want to support me. - -97 -00:42:50,879 --> 00:43:49,290 -Scott Tolinski: Cool. So for those of you who may not have listened to syntax before, Wes Bos, and I do our own courses, we both teach web development stuff. And I know you're hard to work on some new stuff. And yeah, I'm hard at work on a new series every single month. So we have a new month here, and a new tutorial series. Now the series that came out last month was all about real world debugging and Dev Tools teaching you every single tab in dev tools. But the course for this month, I'm happy to announce considering it's the 17th of July today, as you when you're listening to this, the course is going to be on e commerce with Gatsby. So if you want to build a web store in Gatsby, head on over to level up tutorials.com forward slash pro sign up to become a pro. And that course is going to be available on the 31st of July. And if you're waiting for that course, you can listen to all of the other new courses you can get all caught up with Gatsby with pro Gatsby to any of that good stuff. So thank you so much. And check it out. Level Up tutorials.com for slash Pro. - -98 -00:43:49,410 --> 00:43:53,400 -Wes Bos: Beautiful. Thanks for tuning in. We will catch you on Monday. - -99 -00:43:56,580 --> 00:44:06,360 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax163.srt b/transcripts/Syntax163.srt deleted file mode 100644 index 5178d1dba..000000000 --- a/transcripts/Syntax163.srt +++ /dev/null @@ -1,192 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott Taylor. Totally in ski. - -2 -00:00:25,920 --> 00:00:57,780 -Scott Tolinski: Whoo, welcome to syntax and this Monday tasty treat, we are going to be sort of going over several of our different favorite resources in different topics, we're going to be talking about Twitter accounts, web dev resources, design resources, desktop tools, and YouTube accounts. And now these are largely going to be web dev related, but we have some fun ones as well, you could sort of think of this as an episode of web dev sick pics. My name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me as always is West boss. - -3 -00:00:58,020 --> 00:01:02,430 -Wes Bos: Hey, everybody, Scott some sick pics today. Oh, Episode, follow them - -4 -00:01:02,700 --> 00:02:17,580 -Scott Tolinski: sick picks some tasty, tasty treats. This episode is sponsored by one of our longtime sponsors over here and syntax. And that's Log Rocket. Now Log Rocket is the amazing service that allows you to visualize the bugs. As they're happening, you get a session replay, which is a scrubbable video that includes network requests, the console, your Redux store, all that stuff, you need to be able to solve any sort of bug, just imagine this, you have a bug and instead of having to ask your users, you know, what OS, what did you do to make this happen? Where did you click on? And how did it break? Well, now you can just get an actual session replay and watch as the user clicks the link and breaks your entire site. So you can go ahead and fix that without having to ask your users anything. So check it out at Log rocket.com forward slash syntax and get 14 days for free. But one of the services we really like over here is syntax, so highly recommend checking it out. So let's get into it. I think we wanted to start with Twitter accounts, we're going to give you sort of one Twitter account that we like, talk a little bit about why and I shouldn't stay at the the you know, the jump here that if we left anybody off? I mean, we're only giving one pick each here. So we're gonna leave. - -5 -00:02:17,580 --> 00:02:18,300 -Wes Bos: We're leaving. - -6 -00:02:19,019 --> 00:02:31,190 -Scott Tolinski: Yeah, we're leaving everybody off. So if we left you off, don't Don't feel sad. Maybe we'll do another one of these then who knows? So, yeah. Did you want to get into who was the Twitter account that you said that you like to follow here? - -7 -00:02:31,560 --> 00:03:51,270 -Wes Bos: Yeah, so there's tons of tons of ones. And I think in a lot of cases people know about them, like we all know, follow smashing mag and CSS tracks. But the one that's just like consistently amazing things about JavaScript is Mateus Bidens. And he works on va, which is the engine behind chrome and, and node Actually, he works at Google on that. And he is also on Tc 39 which, which is Tc 39 is the committee that decides and works through all of the sort of proposals as to what gets added to JavaScript. So he is on the cusp of what's happening with JavaScript and his tweets are just like awesome to like people always ask me like how do you stay up to date? How do you know when new stuff comes out? And his Twitter account is probably one of the main sources that I use because like anything anytime something has been proposed, anytime something that has been approved or anytime anything is actually shipped to JavaScript, he will always tweet out saying like, I'm just looking at his Twitter right now. Here's some things that got announced array dot flat map string dot match all all the I MTL methods, I NTL that number format, big in support object dot from interest, all kinds of like this new stuff. He's always tweeting about it. So huge resource for sort of staying up to date with what's new in JavaScript, and just like really interesting as well. - -8 -00:03:51,480 --> 00:03:54,750 -Scott Tolinski: Cool. And you said that Twitter handle is - -9 -00:03:54,899 --> 00:04:00,120 -Wes Bos: Oh yeah, forgot that it's matea switches ma th ay ay s - -10 -00:04:00,120 --> 00:06:08,670 -Scott Tolinski: cool. Glad to hear that. I have not following Mateus. So I go along Mateus. Mine is in a totally different direction than this in yours as I walk in several different directions minds in a different direction. Yours was a individual and it was JavaScript based. Mine is an aggregate account. And it's designed based. It's called Hey, designer at a designer. And this is just a daily curated design blog list. They tweet out every day. Some design links, some really good stuff from good people. If you go to their site at hay designer.com. They categorize things in different ways. It's really nice. You can browse by topics that way, but I just like to follow them on Twitter. And every once in a while every every day or every other day something pops up and I'm like ooh, I need to click on that and check it out. So this is one of those ones that you just you just sort of have it on and when something useful pops up into it you are very happy that you are following it. So as a designer is the Twitter account I have picked for this next one Let's talk about web dev resources, aka some sites that we like. And mine is a site that I would assume a large amount of you already are familiar with. And this is this scotch.io. Now scotch.io is basically web dev tutorials. And this is run by at Chris on code, so you can follow him as well, too. That's a good Twitter follow. But really, it has tutorials from a lot of people, blog, post videos, all sorts of stuff. I think Chris even does some live streaming now. So this is one of those resources that besides being tremendously well designed as a resource, I think the content is all very good. It presents itself in a way that is easy to follow big headlines, code examples, and all those good things you like from a resource without actually being bogged down with a bunch of extra bs stuff. So I'm a big fan of scotch.io. It's a great place to come for inspo, great place to come from tutorials. And if nothing less, just go to the site and hover over the logo because it has the beautiful SVG animation, that is definitely worth your time. - -11 -00:06:08,820 --> 00:06:12,930 -Wes Bos: My next resource is actually just going to be an aggregate of other resources. - -12 -00:06:13,770 --> 00:06:15,810 -Scott Tolinski: Yeah, what? Yeah, aggregate the first one. - -13 -00:06:17,100 --> 00:06:58,080 -Wes Bos: This was launched a couple days ago on Twitter by Twitter at last design, which is at losses, I'm not sure what his actual name is. But he launched his website called the web gems.io, which just aggregates like amazing resources on the internet. And it has this really nice little way that you could filter by CSS design, front end, full stack, HTML, JavaScript, PHP, Python, Ruby, and the website's fastest hack. I think it's built on nuxt. I was doing a little bit of poking around. And it's just like, if you're looking for stuff on a specific, I know, you look for JavaScript tutorials. Oh, my free ones on there, which I was happy to see. Yeah, yeah. Yeah. And of course, yeah, yeah. It's just mine - -14 -00:06:58,080 --> 00:07:00,090 -Scott Tolinski: is to see that. - -15 -00:07:01,140 --> 00:07:04,590 -Wes Bos: Well, it's, it's open source. So submit a pull request - -16 -00:07:04,620 --> 00:07:06,570 -Scott Tolinski: somebody else that doesn't look like - -17 -00:07:10,260 --> 00:07:17,340 -Wes Bos: no, you got to own it, your stuff is good. So just send a PR in there. So I don't know all kinds of good stuff. That's web gems.io. - -18 -00:07:17,520 --> 00:07:41,610 -Scott Tolinski: Nice. Yeah, I really like this, I fired it up. And one of the things I liked a lot about this is it feels like it feels like a bookmarks page, or one of those things that's easy to navigate. It doesn't take up too much space. A lot of times these things they'll want to put like paragraphs about all this stuff. And I don't know, this just makes it nice and easy to find what the resource is and why you might want to check it out. I liked it. Next up is design resources. What do you got for design resources. - -19 -00:07:41,820 --> 00:08:04,290 -Wes Bos: One of my favorite design resources is creative market. So it's a paid market where there's a lot of amazing artists that will sell things, I grab fonts off there all the time, often buy like, if I'm looking at my like purchase history here. I bought hipster burst pack, where like, you know, design a logo and it's got the like the like blinds that are bursting from behind it. - -20 -00:08:04,320 --> 00:08:05,790 -Scott Tolinski: Oh my God, that's funny. - -21 -00:08:05,790 --> 00:08:53,040 -Wes Bos: I just I just bought like a pack of those to add often I'll go on there and buy textures, things like that fonts, people always ask me like, wait, like, where'd you get your font because you could spend hours and hours combing through we want or you can just go on here and find some pretty nifty ones. So big fan of creative market. I want one other thing I'll say, though, is that often what will happen is that the authors will have their own website for selling these things. So what I'll try to do is, I'll search for the own author's website, first one I'm about to buy. And that way the that way the artist gets all of the money instead of credit market taking their cut. I think that's such a stellar tip there. Because you want to support the the creators first and foremost, I think creative markets probably doing fine themselves. Mm hmm. - -22 -00:08:53,040 --> 00:10:17,900 -Scott Tolinski: Sorry, if you work for creative marketing, I think that this but supporting the individual creators is a great idea. Mine is something I just saw yesterday. So it's good timing that we're doing this episode. It's called the UI movement.com. And it's basically weekly inspiration. And everything kind of moves. I don't know if that's a requirement, I would assume it is with the name UI movement, as well as the fact that Yeah, everything has a play button on it. You don't state explicitly that all of these things are for movement based, but it looks like it is. And let me tell you, this is sort of dribbly in the way that a lot of these things are done in a in a vacuum. You know, somebody just designed this in a motion graphics tool, and then said, Okay, this is a website. So I understand that everything's super practical on here, but you can get a lot of really great inspiration as long as you sort of ignore the fact that everything is very overly trendy and overly optimistic. But I think there's enough good ideas on here that it can really just get those wheels turning in especially if you are looking at movement. I mean, a lot of this stuff is really good. To do but there's some very practical examples on here, if you look for them, and being able to pull that inspiration and put it into your project is one of those things that's going to take it up a notch, especially if you you know, have some skills in your back pocket, like maybe perhaps react spring, or one of those, there you go, a big fan of - -23 -00:10:18,020 --> 00:10:44,660 -Wes Bos: this is cool. This reminds me of dribble, like five years ago, where I would like find something on dribble, and you just be looking at me, like, come on, you can't do that. And you can't do that. And then I'd be like, oh, maybe you can, maybe you can put a slant on the end of that thing. And then I'd be like, ah, screw it, I have to try it now. And then you spend the next couple hours coding. So maybe if you want, like a little practice, just pick one of these UI things and try to implement it yourself. - -24 -00:10:44,730 --> 00:12:16,950 -Scott Tolinski: Yeah, can I actually say that people are always asking on Reddit or on Twitter, like, I need good ideas for portfolio projects, right? I don't have any clients, I need some good ideas is a to do list a good enough idea for a portfolio project and usually ask for it all that stuff is no because it's gonna be crappy, or just basic, but I think you could look at here and and just pick one of these and try to build it in, the more impressive, the better. Because it could end up looking really nice in your portfolio, as long as you credit the designer and the people who created these visuals. But these are, I mean, this is a whole bunch of, you know, really difficult sort of things that you could look at and say, Wow, I could add these to my development portfolio and show that I can create this kind of stuff. I think that'd be a really good use case of your time, if you're looking for stuff to build. Alright, next we want to get into desk top tools. These are just sort of apps that are going to help you in your day to day, ours are very, very different. Mine is going to be a new app. Well, it's not a new app, but it received a big update. And this is POC p o ck at POC dot Dev and POC is the app for those of you who are on Mac I'm sorry, Windows and Linux people. This is for people who have a MacBook with a touch bar. And what it does is it actually makes the touch bar sort of useful. Now I know a lot of other people like better touch tool and things like that. But to be honest, the better Touch Tools interface and whole thing gives me anxiety. There's way too many options. - -25 -00:12:17,220 --> 00:12:20,430 -Wes Bos: Does bettertouchtool even do the touch bar. - -26 -00:12:20,430 --> 00:12:23,700 -Scott Tolinski: I think it does write better touch tool. Yeah, I think it does. - -27 -00:12:23,730 --> 00:12:34,500 -Wes Bos: Does. Yeah, I didn't I didn't realize that. Yeah, bettertouchtool does. Absolutely everything goes under brazier. Like if you've got like a like one of those old Apple remotes from 15 years ago, I guarantee it works with this thing. - -28 -00:12:37,500 --> 00:13:17,670 -Scott Tolinski: And so yeah, so POC is like basically it gives you a dock it gives you a widget it gives you a status widget it gives you control center and looks like they're updating. And like I said it's very minimal right now. But in terms of making your your touch bar actually somewhat useful. I'm using this right now. And I gotta say, I'm loving it quite a bit. Even if it's just for like, I threw some folders in my dock like my doc is pretty minimal, but I threw my sites folder, my level up tuts folder, my downloads, and now they're just sitting there all the time in my toolbar. And if I ever want to access the level of tut's folder, I just tap it on my toolbar, and it actually makes it useful for the first time ever. Yeah, - -29 -00:13:17,939 --> 00:13:48,720 -Wes Bos: I don't have to try it out. Cool. Yeah, mine is MongoDB compass. So if you use MongoDB, a good GUI tool is important to be able to quickly edit stuff, especially when you're in like the prototyping phase where you haven't created like an admin UI for that yet. MongoDB will just give you a raw access to the data. But it also provides some aggregations a nice visual UI for your data. Big fan of it. There's a free version available under the community. I don't really understand MongoDB like charges for it, but it's also free. Yeah, I - -30 -00:13:48,720 --> 00:13:52,200 -Scott Tolinski: was wondering about that. There's a Community Edition. And then there's a - -31 -00:13:52,230 --> 00:14:07,620 -Wes Bos: like cloud and kind of like, like Oracle or something like that, where like they've got this like amazing open source product, but they're also a huge company that makes money. So sometimes the that stuff is a little bit confusing, but I don't pay anything for it. And I love it. It works great. - -32 -00:14:08,100 --> 00:14:27,210 -Scott Tolinski: is I actually use a studio three t for that. In studio three t looks like it was just plucked right out of the year. 1990. Yeah, I'm sorry, studio three t devs. If you're listening to this, you do great work the applications great. Doesn't look great. And hopefully they update that that sometimes, you know, check out this. - -33 -00:14:27,420 --> 00:14:28,830 -Unknown: I think I've used that company. Yeah, - -34 -00:14:28,830 --> 00:14:29,490 -you know, I - -35 -00:14:29,490 --> 00:14:50,490 -Wes Bos: use one similar to this. It's called the another one I use a UCS is called Mongo hub. And I still use it from from time to time just because the aggregation UI is pretty nice. But yeah, some of these UI are that's that's specifically why like compass is that they spent some time but I think it's built on unlike electron app as well. Cool. You have the added benefit of your CPU being - -36 -00:14:52,380 --> 00:15:06,570 -Scott Tolinski: the call on handwarmer. So we just had the benefit of it warms your hands, I'm in cold call. There you go. Next step. We wanted to get into some that you YouTube channels. So let's do our dev YouTube channels first and then let's do our for fun ones after that, - -37 -00:15:07,020 --> 00:15:57,300 -Wes Bos: what do you got? All right, um, mine is actually I'm going to change mine, I just decided mine is the dot conferences YouTube channel, which posts all of the talks from the.js dot CSS dot whatever conferences if you haven't heard the dot conferences are I think some of the best conferences out there, I think they're only in Europe I spoke at one about a year and a half ago. And the talks are, I think mine was like 15 minutes, most of the talks are under 20 minutes long. And they they really put a lot of stress on like practicing your talk and getting it forward. So if you've just got if you've got lunch, or you've got like, I don't know, you put it on to x, you can like really suck in a whole bunch of amazing information from some of these talks in a really quick amount of time. So it's the dot conferences, YouTube channel. - -38 -00:15:57,960 --> 00:17:36,510 -Scott Tolinski: Yeah. And that's funny, because mine was going to be the J s, calm EU YouTube channel, just like what you were saying, you know, one of the things I like to do with this stuff is throw on a playlist of a conference, and just like Chromecast up to the TV or something and just have it on, you know, maybe while I'm working, or it's almost like background noise, because not every talk is going to be applicable to you. But like, the talks that are applicable to you are going to like pull you out, and then you're going to sell what is this tasty tree here, let me pay attention right now. And just start listening. So I love to have this stuff on in the background, it's part of my learning strategy is to have these sort of conference talks. And then that way, if I'm ever thinking, you know, what I really want to learn this topic, I might have something in the back of my head that says, You know what, there was a talk on that, that you sort of listened to, but maybe you want to listen to a little bit more. So I highly recommend it, just any of the big conferences, just subscribe to all those YouTube channels. Okay, let's get into some fun ones, some non web dev ones. This is a channel that I've sic picked before on this is and this is stance elements. Now stance element is just dance. It's it's breaking primarily. But there's also other dance like, I think they probably they have some popping, they have some locking, those are two separate dances by the way. They have some voguing and all sorts of stuff. But if you're interested in seeing human capabilities, then being inspired by some movement, I, which I typically AM, is a stance elements for for this kind of stuff. It's amazing. I'm gonna - -39 -00:17:36,510 --> 00:18:49,980 -Wes Bos: pick another one that I just stumbled upon, like a couple weeks ago, and I've just been glued to it. I feel like it's, you know, when people say like, Oh, I just found a new Netflix show and has like six seasons to feel like that is me on YouTube. Now, when I find a new YouTube channel, and it's like, oh my gosh, there's like four years worth of content here. This is amazing. So the new one that I found is Andrew Camerata, CA m, AR, a TA. And he, it's hard to describe what he does. He does like excavating and small engines, and he built this like house out of shipping containers, but he built like a castle. And the reason why I like it is it's just very pointed into like, here's what I'm trying to do. Here's how I do it, or this broke, here's how I fix it. And I think that the the whole problem solving methodology behind how he approaches thing and also explains how he's doing something, I think it's like, totally unrelated to web death. But I think I learned a lot just about like problem solving and how to tackle things and also how to explain what is he doing cuz at the end of the day, that is what I do from for my job. So plus, they're super entertaining, just learning about all these this random stuff. So it's Andrew camera, Rod. I'll put the link in the show notes. - -40 -00:18:51,930 --> 00:19:38,970 -Scott Tolinski: That's great. I'm always on the lookout for stuff like this. We're about to do some potential excavating over here. So this is okay. This is actually a good funny side story. For those of you who aren't into children things you might not find this to be that funny. But Landon loves excavators. Keep in mind, he's two years old. And he loves he says x gubbay tar. He says the longest word he knows other than succulent, which he just learned but excavator he loves the word excavator. So my brother who loves you know, to be the uncle who gets annoying gifts. He got Landon, a giant excavator that he could ride for his birthday this year, turning to and so he got in this giant excavator and the first day that he got the excavator Landon wouldn't go to sleep because he was just like, - -41 -00:19:40,850 --> 00:19:41,840 -Wes Bos: oh my god, - -42 -00:19:41,970 --> 00:20:13,170 -Scott Tolinski: he just loves it so much. And then the next day, this is the funniest part I woke landed on. And he usually says that he just says something like that I miss you or did I love you or something like that when I wake him up? And he I wake him up and I pick him up out of his crib and he goes dead. And I'm like, Yeah, he's like, ah, Love excavator. You covered we had. Oh, that's great. He loved excavator seat so we're gonna put some of these on. He's gonna go nuts. It's like get PBS. - -43 -00:20:14,330 --> 00:20:41,790 -Wes Bos: Yeah, it's it's super interesting. Oh, this other this guy he also did. The way I found is that he was fixing all these jet skis. He would buy these like jet skis that been sitting in a field for like, 1010 years. And then he would like, like, bring them back. And I was like, Oh, I would love to be able to know how engines work and fix a jetski that'd be so cool. But but that's the thing about YouTube videos is that like no never do. Yeah, but it's fun to watch somebody else do it - -44 -00:20:41,880 --> 00:20:58,290 -Scott Tolinski: right. Totally cool. Well that's a that's a lot of sick pics. I think that's all the good stuff that for the most part we haven't really talked about on this show before I think there's only a I think the LA enough the dance YouTube channels. The only one I think any of us have mentioned before this. So - -45 -00:20:58,820 --> 00:21:08,330 -Wes Bos: lots of good sick pics there. Yeah. If you have any of your own resources, make sure you tweet us at syntax FM, and we'll retweet some of the the good ones. - -46 -00:21:08,400 --> 00:21:09,800 -Scott Tolinski: Yeah, only the good ones. - -47 -00:21:09,900 --> 00:21:14,400 -Unknown: Well, thanks for tuning in. We'll see you on Wednesday, whose face - -48 -00:21:16,320 --> 00:21:26,090 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax164.srt b/transcripts/Syntax164.srt deleted file mode 100644 index 9a61aa4c1..000000000 --- a/transcripts/Syntax164.srt +++ /dev/null @@ -1,388 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,849 --> 00:00:09,000 -Unknown: the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski - -3 -00:00:09,000 --> 00:00:11,370 -and West boss. Oh, welcome - -4 -00:00:11,370 --> 00:00:58,080 -Wes Bos: to syntax. This is the podcast with the tastiest web development treats. Today we have super interesting guest on a super interesting story about Kanye West. I'm just gonna say that and I'm gonna kind of Weiss is not on the podcast right now, but close enough. We'll talk about that in just a second. But it will do our sort of pre show stuff that we need to talk about real quick. We are sponsored by two awesome companies Sentry, which is going to do all of your error and exception tracking and Sanity, which is allows you to build a structured content so you can distribute to any device or channel over flexible API's with a fully customizable react JS editor. I will talk about that partway through the episode. So with me, as always is Mr. Scott Tolinksi. How you doing today? Scott? - -5 -00:00:58,109 --> 00:01:12,330 -Scott Tolinski: Hey, doing good. Yeah, fill in the fill in the flow of things. Yeah, I don't know. We just launched a new course yesterday. And so I am ready to start the month over and start working on the next one. Awesome. Yeah, that's that's good. Happy to have Harry here today. - -6 -00:01:12,419 --> 00:01:17,670 -Wes Bos: Yeah. So welcome to our guest, Harry dry. Welcome, Harry. Thanks for coming on. Absolutely. Pleasure, guys. There's - -7 -00:01:17,670 --> 00:01:19,260 -Unknown: no place I'd rather be - -8 -00:01:19,289 --> 00:01:26,220 -Wes Bos: alright. So Carrie is a developer from where you're from England. - -9 -00:01:26,850 --> 00:01:27,780 -Unknown: Yeah, live in London. - -10 -00:01:28,830 --> 00:02:37,740 -Wes Bos: Awesome. So Harry is a developer from London. And I don't know, maybe a couple months ago, this sort of came across my my Twitter feed was this random website, which is the Kanye story calm. And Harry built this dating website for Kanye West lovers, which is absolutely hilarious. And he's a web developer and sort of just made it work. And he's just got this insane story, both in terms of like, web development and building the thing, but also in terms of just like, getting in touch with Kanye West's management. And also, we I won't spoil it too much. But so what we're gonna do today is we're sort of gonna go with Harry through this crazy story. And then we will sort of talk to him about like, how do you even get ideas for this kind of stuff? What do you do when you hit? Like, this is the ultimate side project that totally blew up. And it's like, the perfect example of things that that you want to do. So we're trying to pull enough out of them that we can so that you can sort of like maybe build your own Kanye West dating website. So Harry, do you want to give us like just a quick rundown of who you are, and whatnot, and then sort of talk about the Yeah, sure. - -11 -00:02:38,550 --> 00:05:06,600 -Unknown: I'm Harry, I guess, a humble web developer from from the land of London. And I've, I've tried a few side projects before, and they've kind of been very hit and miss. Well, actually, mainly Miss. And this one flew a little bit more. So I funnily enough, someone I think tweeted it to Wes, because he features a little bit in the story and was messaged me, and here we are so ready for it. Funnily enough, I started back in 2017. So I was a university, I went to Durham University in England and did economics. And by third year, I kind of knew that I didn't really want to be in a suit, talking rubbish about macroeconomics for the next 50 years. And at this point, I had two things going on, I was in a little art group. And I had I was trying to write a book. And neither were going to well, and I kind of convinced myself that the reason why they weren't going to well was because we didn't have a website. So at this point, like websites seemed, I don't know, like a totally, like something which only EMI EMI MIT people could make, I was absolutely no interest in this sort of stuff at all. I'm so bored of economics that I had to try it. So um, I started out on Code Academy, as a lot of developers do. And I did the HTML course, working through that. And in the library, I think I was probably supposed to be doing my dissertation actually, at the time, and did the HTML course. And I think when you look back at it now, as people who maybe have a little bit of experience with development, it's easy to forget that when you start it's just such a, like a black hole, like a really is, like a blank canvas, really. So funnily enough, I did the HTML course. And I hadn't like no idea what to what to try next. And Code Academy for some obscure reason, recommended me Angular. So I kind of jumped from HTML, with very little knowledge to Angular. And then I spent a month and a half trying to piece through this and just going absolutely nowhere on it. And little did I know that Angular probably wasn't the language I should be learning straight out of HTML. So fast forward a little bit, I think. And by this point, I was I figured out Reddit was a website which existed and I started asking questions on there, like, you know, how do I learn web development basically, and people were applying I think some really great messages came back someone said, the net ninja this YouTuber who is absolutely awesome as I started - -12 -00:05:06,600 --> 00:05:09,540 -Wes Bos: doing a huge, huge YouTube channel, doesn't he? - -13 -00:05:09,870 --> 00:05:59,310 -Unknown: Yeah, I don't actually get why he isn't bigger than what he is. He's really amazing, a huge fan. And the others were, I think people mentioned JavaScript 30 and then level up tut's was, was being talked about. And I started working for these. So I slipped into JavaScript. And I remember being in the bill bracer Library. It's during library, and my dissertation deadline was looming over me here, but I just really wasn't into it. So I distinctly remember that I was on level three about five 6pm. And I cracked open with his drum kit, which is the first first teacher who sure we've all been there, done that one. And it was a bit of a breakthrough moment because I mean this in a nice way, but I as I said, I used to think websites were for a really smart people and I just couldn't really do it or not, I'm - -14 -00:05:59,310 --> 00:06:01,650 -Wes Bos: not that's what - -15 -00:06:03,120 --> 00:06:07,320 -Unknown: I saw. I saw you kind of like a bit of a bumbling fool in the - -16 -00:06:09,630 --> 00:06:21,150 -Wes Bos: No, totally I that's why I love leaving all of my goof ups in show. It's both shows my debugging process, but also shows people like like, I really am not just going to cut out like half of this video, which is me goofing up. - -17 -00:06:21,180 --> 00:06:33,870 -Scott Tolinski: Right? You got to leave it and Scott Lee leave a lot of your errors in as well. I do. Yeah. Specifically even like the typo ones or the ones that show Okay, unexpected token on line. 19. Let's go to the lining keynote. There it is. Oh, yeah, I accidentally typed something. - -18 -00:06:35,640 --> 00:06:37,080 -Wes Bos: bumbling fools for life? - -19 -00:06:38,520 --> 00:09:00,480 -Unknown: Well, that gave me a lot of reassurance really, and working through these tutorials and then finished university and I went actually did a coding bootcamp. After that I went to Israel, funnily enough, there's this company called founders encoders. And the idea is that it's a free boot camp. So what you do is, you take the course, and then you end up being a mentor. So that's how it kind of pays itself back, I guess. Ah, well, unfortunately, I had to leave for for personal reasons. So I'm back in the UK at this point, and didn't really want to get a job I was trying to, like, puzzle it through in my own in my own world, and my parents house. And when I left nazzer of the founders encoders course they were doing learn they were doing note. So I picked up West course learn node, and started working through that. And slowly but surely just in the digital library, just hammering out the videos skilling up, and I'm getting this slowly but surely. And I'm a big fan of real world stuff. So I think yeah, I think at this point I kind of was just copying a lot. I was, you know, I'd be copying videos on YouTube versus the low node course. And I think there's probably as two different types of knowledge. There's kind of blog post knowledge, and then there's more real world knowledge. And, you know, if you read a blog about Cuban ETS and Firebase, it's never going to be like that in real life. And I was kind of conscious of that. So I thought, like, let's try it. Let's try project. Let's try and make a start up. There's no better. There's no better way of getting getting into it and trying to do real world startup. So come back from uni. And my friend Joseph sent me these huge canvases, his Twitter canvases, and they had a tweet on it from Roger Federer. And I was thinking was Roger Federer tweeted me here. It turns out, no, it was just all photoshopped. And it was this little gift you've given me. But I got so into it, this this gift, I thought it could be in a million pounds idea. And I said to Jaws, like let's make a website where we sell these canvases, and it's going to blow up, we're going to be huge. For me, as well, it's just a great project to like, cut my teeth in development, I could kind of do a little projects and, and it'd be real world stuff. So I couldn't do any design at this point, really. And Joe was was not too good either. So, again, I'm on YouTube. And that's kind of how I learned it really, just by how do you design a website? And I think at this point, Scott Scott sketch. YouTube series. Yeah, - -20 -00:09:00,480 --> 00:09:01,159 -Scott Tolinski: yeah. - -21 -00:09:03,289 --> 00:09:07,950 -Unknown: So I was doing it about four or five years after it was recorded. I think you recorded it ages ago. - -22 -00:09:07,980 --> 00:09:09,870 -Scott Tolinski: Yeah. 2009 long time ago. - -23 -00:09:09,919 --> 00:09:15,720 -Unknown: 2012. But I was convinced this is gonna be like, too old, but it really isn't. I just sketch hasn't, - -24 -00:09:16,649 --> 00:09:18,390 -Scott Tolinski: hasn't. No. - -25 -00:09:18,510 --> 00:10:01,500 -Unknown: So I'm doing a designer's website and like, make it blue. Actually, any designs out there, what I did was add sketch kind of on my computer, figuring it out, and still couldn't really do much good stuff. But why did was I started finding websites online, which I loved that stripe was one. And I would just try and make it pixel perfect and sketch. And the philosophy was that you've got to know what it feels like to create a masterpiece. So I think you could throw enough shapes around, sketch your day, and you'd really get you ready to get nowhere. But I would just duplicate these sites pixel perfect and slowly you sort of realize, all right, that's how to do a button or that's how you add a show. Whatever. I don't really Life would be nice. - -26 -00:10:01,739 --> 00:10:19,710 -Wes Bos: That's I love love hearing that that's exactly how you should should do it. Like I did the same thing with like implementing an encoding, like, just do it pixel perfect. And you're going to learn so much along the way, rather than just trying to grasp but these like sort of abstract concepts that you often will find in a tutorial. Yeah, - -27 -00:10:19,710 --> 00:10:32,850 -Scott Tolinski: and I was gonna comment on your design overall, like, specifically on, you know, the Kanye story website? I mean, it seems like you do have some design chops there. Do you have any design background? Or is more or less just all self taught? - -28 -00:10:33,049 --> 00:11:24,659 -Unknown: That's actually such a big compliment? Because I ever I felt like I had an inferiority complex with my designs. Yeah, I look at that 140 the site for the canvas project, honestly, like, it just it sucked for about a month, I was just trying to redo it. And I guess it's your practice. And I think the skill I've got is, I'm really not afraid of copying stuff. And it's not it's not like a bad thing. For example, with the refactoring UI guys like, I know, you guys are big fans, and they show you some amazing design, just copy it and change it so that it's your own thing isn't how I think if we learn, just going back to the whole copying thing, there's that's how I got the idea from this writer called Hunter S. Thompson. And he used to copy his prolific writer. Oh, yeah. And he used, he copied out The Great Gatsby word by word, the whole book. And that's what he said. He said, like, that's how I learned, I just copied out the best things in the world. And you - -29 -00:11:24,750 --> 00:11:28,590 -Scott Tolinski: get that. Yeah, he's a, he's an interesting guy. - -30 -00:11:32,490 --> 00:12:36,360 -Unknown: Yeah, I'm not sure how good he would be a web developer. I site goes live. And I think on the first day, we put it on production. And it sold just one we sold one canvas. For me, that was amazing. I was 20 years old at home, and the first money had ever come through from stripe, and is another kind of game changer. I think, yeah, he talks about this. But you know, the first little bit of money comes in and you sort of realize, you know, I can actually use my development skills to find makes me cool people will pay me and I don't necessarily have to get a traditional job is a big thing. So the site kind of 140 canvas that rolls by and to be honest view, the site pretty much just died. But it was it was a everyone starts there. Like there's no kind of, actually this is a what analogy. So I look at success a bit like, and then all your failures are like the 140 Canvas, Canvas project or this, they're just bricks it and you have to lay them in, and then you end up maybe a few years later or five years, 10 years later, with a bit of a finishing. - -31 -00:12:36,720 --> 00:13:00,240 -Scott Tolinski: I think that's a great way to look at it. And we hit we talked about failure before. It's just being like one of those things that you have to get through if you want to push on, you want to do and that way, I'm such a huge fan of that technique of just doing things, figuring out what the problem is. and growing from that, that problem rather than letting that problem hold you up or define what your your skill level is, or anything like that. - -32 -00:13:00,419 --> 00:13:18,840 -Unknown: 100% Yeah, I couldn't agree more. So cameras printed out the way. And then I'm lying in bed one night, and I've got my just looking through Twitter is one of those bad habits. Javon go riddle? Yeah. And I saw, this is Donald Trump dating site, which had kind of going crazy on Twitter, it went viral, opened up the site. - -33 -00:13:18,840 --> 00:13:20,610 -Wes Bos: That's actually how Scott met his wife. - -34 -00:13:20,970 --> 00:13:23,580 -Scott Tolinski: No, no, please don't start. - -35 -00:13:27,090 --> 00:13:28,679 -Unknown: But the site I load up. - -36 -00:13:34,649 --> 00:13:35,789 -Scott Tolinski: No, no, - -37 -00:13:36,029 --> 00:13:36,570 -Unknown: I thought that. - -38 -00:13:38,429 --> 00:13:39,179 -I know that guy. - -39 -00:13:41,940 --> 00:13:47,159 -And I looked at the site, and it's just a load of rubbish really is that awful site of whatever you - -40 -00:13:47,159 --> 00:13:52,289 -Scott Tolinski: think I got, like, right away the dating site. I'm sure it got hacked. - -41 -00:13:53,700 --> 00:15:15,659 -Unknown: I look at it and it's getting like all this attention. And I think forget Trump, it's really kind of brilliant idea. Because you're just leveraging a massive audience, massive fan base, which is already built, and they're just piggybacking on it, and they're probably doing really, really well. So I felt like Alright, what could I do here? Like, I want to make more websites and data and websites. Good challenge. So I started writing down viral ideas. Harry Potter in the UK, Brexit really big thing. So I thought, What about a Brexit dating site? Maybe that's fly. And then I'm a huge Kanye West fan. So I felt like you know, dude, what you you love? I know a lot. Let's try that and also maybe I'll meet someone at the same time. Who knows. I the next day I wake up at a bit I buy the domain easy Dayton. And as a backup I also bought Brexit dated but never got used. And I put up this pre launch page online. It just says a dating site for fans of the genius Mr. Kanye West, coming soon, and then underneath I wrote Taylor Swift fans are banned from this website. I feel like with the sings that that line was essentially, you know, a platonic gesture. No one's ever going to I'm never going to play. It just gives a little hook for the media to kind of get their teeth into. Yeah, I - -42 -00:15:15,659 --> 00:15:29,850 -Wes Bos: think in Oh man. I should say that. For those listening Yeezy is a Kanye West like his own brand. It's like a dudas meets Kanye. He has he's got like famously. Do you have any Do you were uses? - -43 -00:15:31,380 --> 00:15:34,049 -Unknown: Yeah, kind of embarrassed to but yes, I do. I wish. - -44 -00:15:34,549 --> 00:15:43,830 -Wes Bos: Okay, I've got a couple pairs too. So he's got these like silly shoes that are actually super comfy. And that's what easy is so easy dating calm. I should - -45 -00:15:43,830 --> 00:15:46,409 -Unknown: have I should have made that clear. Actually, it was just easy dating. - -46 -00:15:46,439 --> 00:15:48,179 -Wes Bos: I think it was easy that daddy sorry. - -47 -00:15:48,210 --> 00:18:42,050 -Unknown: I think the thing was, this is a funny thing that if I bought a.com with easy in, it was like 10,000 20,000. But for some reason, the dating domain just hasn't like hasn't taken off yet. So it was about seven bucks. Alright, so then at this point, I was doing some work, some really simple development work for a payments company just a couple of days a week. And to go I live in at this point, I live in my parents in Portsmouth, which is really South England. And I have to get the train up to this company each day, come back, and I'm sitting in this meeting. And my phone rings in this in this payments meeting wasn't really to present in the meeting to be honest. And I turn it off, and then I turn to the side and it rings again, I turn it off and then attach to this meeting. And I check my own. I had email set up on MongoDB. I think, again, it just shows I guess my naivety that people would probably use MailChimp and stuff I just didn't know about that stuff. So I was just saving everything to Mongo, and I checked the database. And there was like 15,000 emails in there. So I googled, I googled Kanye West's name. And suddenly it's everywhere like Fox News are talking about it. MBC news, MTV, I get the train back home and like hundreds of unread emails, people are trying to get ready for interviews, TV interviews, radio interviews, everything and oh my god. Little did they know that it was just a 21 year old in his pajamas at his parents house, which is a landing page one day, I should actually add that I to kind of spark off all that media stuff I just posted on Reddit. It was it was that simple, really. And post got about 700 up votes. And I did it the night before us and I went to work and never really checked and I think an earlier break at work. I just emailed it off to a few journalists. And I think it's kind of funny that with the right idea, I guess that you don't really need to kind of try that hard. And maybe that's the wrong message to give out. Yeah, something is just kind of fly I suppose. So had all these emails in this in this email list. And it suddenly hit me that I really have no idea how to make this dating site as getting the train back into London. And on the train. My friend texted me he was like the BBC, you want to talk to you right now. They're talking about you on Radio One, like, you've, you've got it, you've got to talk and I was on this train. So I try to call the number but there was no service on the train. So I couldn't get through to them. And at that moment, I was just thinking, I'm blowing an opportunity here. Because I'm trekking into London every day, I someone's got to build this site. And add to that night, I got back home and I called my boss and just explained to him that I was going to leave because I was making this this carny dating site. And he liked me. He wished me luck. He was brilliant about it. I think he kind of kind of got it. I guess. He - -48 -00:18:42,050 --> 00:18:42,780 -Scott Tolinski: kind of got - -49 -00:18:44,670 --> 00:19:20,520 -Unknown: I'm not sure. I really don't know. He was a cool guy. So next day, it hits me Alright, I've got to make dating site now. And at this point, I'd been coding for about eight months. And again, like via kind of got over the hurdle where I felt like, you can actually do web development. I still felt like apps and stuff and complex sites that just for the geniuses, I could never do a dating site. It just seemed inconceivable. So the only thing going for me really was I had done with this course. And I had tasted What was it again? What was the restaurant? What was the restaurant? In LA note? - -50 -00:19:20,640 --> 00:19:35,330 -Wes Bos: Dang, that's delicious. So on my learn node.com course we build a like a restaurant review. So you create a restaurant, you can update it, you can comment on it, you can review it, like you get the point. Right, so the standard app that you sort of build in that tutorial. - -51 -00:19:35,880 --> 00:22:43,380 -Unknown: Yeah, so I had I had dang that's delicious. Open on my computer on localhost 777. And I'm just thinking, alright, I've done that course. How do I maybe transition that into a dating site and it's I realized this time afterwards, it's called crud, which again, I had no idea of at the time, but essentially, you can kinda it was a bit of a similar thing because I'm where's this course you create stores, and then you can delete stores. You can like stores. And it's not that dissimilar from dating. So you can create profiles, you can upload a picture, you can like profiles. Yeah, only thing is really missing, I guess were like chat and notifications. So they came a little bit later on. But I think here, a huge thing I picked up from this was like, just the importance of being thrown in at the deep end. If it wasn't for these, you know, 15,000 emails, barking at me every day to actually make a dating site, I'd have probably spent six months in react or some fancy framework, trying to figure it out and probably would have got really nowhere or done the same work. I didn't six months I didn't work. And and I think during the site, like I love this line by Confucius, he says that those who think they can and mostly think they can't both usually correct. Mm hmm. And I think that in web design, there's no better application of that, quote, If you think that you can solve the bug, you're going to solve the bug. If you don't think you can solve the bug, you're not going to solve the bug. If you think that you can make a dating site, you'll go figure it out. If you don't think you can, you won't. And fortunately, for me, I guess that my hands are tied, like I have to do it. So just slowly, but surely, that thing gets pieced together. And in node and pug and MongoDB. Same stack as learn node. And, um, I went, I had this little ritual before I release a product where I have to go to the phone shop. Because I haven't got any testing software on my computers or anything, I have no idea how to really browser test, like that kind of technical stuff. So every time I cycled down to to Vodafone, the phone company, go into their shop, and I say to them, I'm just browsing while I load up the site on all these different iPads. And then I'll make, I'll make a few different accounts for each of the devices. And just test it and pick some messages around test it test that it's all working. So I get the phone shot. Here we go, like sites ready to go. Put it online. And for the first It started off, like people flood into it 10 2030 users, people are matching, I'm talking to goes on my own dating site is going crazy. And then suddenly, and when I've got a bit of a bone to pick, yeah, suddenly, what happens is that left, right, Center, the images just stop vanishing from my sight profile images disappearing one by one. And it's in plain sight was that I think I'm right here, feel free to correct me. But the way that you save images on the Learn node course, is that you see to Heroku Heroku or like you saving to a local file storage or something. So I just completely copied that using moltar and stuff. But I think that that's like a temporary solution. I'm sure you probably mentioned it on the course. I - -52 -00:22:43,410 --> 00:22:43,920 -yeah. - -53 -00:22:45,510 --> 00:23:04,410 -Wes Bos: Because the way that the course works is we just save them to the server not using like s3 or or cloudinary or anything like that. And if you're using one of these like immutable hosts like Heroku they just get wiped out when you when you read it. Yeah, because it's it's push only right. So sorry about that. - -54 -00:23:06,420 --> 00:24:28,230 -Unknown: So yeah, that's what happened to me I kind of the first iteration of easy dating was a dating site without any images on i'd sent out an email saying Alright, guys, like a little messed up here. I spun it as the service of crash too much too much traffic in I came back two weeks later, and I figured out cloudinary was solution. So I kind of figured out how to do that and put up the site live. And again, it goes pretty well. Like I get emails from people they're saying, I've just had my first date on easy dating. Thank you so much for the say. More press coverage. It's, it's going good. But I think what kind of struck me at this point was I made this a it was going well but I still felt really out my depth. So I had no real market and experience at this stage. I was fixing all the bugs you know, most dating sites probably have millions of investment and you know, 50 employees I was just trying to work it out day by day and I was really tired as well because of the intensity of making the whole site and then it Yeah, it was taking its toll but it that way. So slowly but surely, you know the traffic was at like 30,000 and it just drops day by day. And I had a theory at this point that I can save this I got one kind of place to save the save the dating site. And it was way better if I get Kanye West and both like that's a surefire way of transitioning is - -55 -00:24:29,370 --> 00:24:42,450 -Scott Tolinski: reasonable a reasonable person would say that's hilarious but if I just take Kanye West involved I actually think that's the solution for for tutorials here. Let's just get Kanye involved - -56 -00:24:44,520 --> 00:28:25,680 -Unknown: Yeah, numbers would spike I think. So. I didn't know what I was doing here. But so I started out on LinkedIn and I would just message people people we worked at easy just be like, by chance know this Kanye West fellow and didn't go anywhere to go interview, I think I spoke to my dad and he said, Look, you know, you've got to do sweet pretty granted to get him get him interested. So I for like, what if I write a song, or if I put up a plane or something good. And then it hit me that Kanye just tweeted the day before that he was opening offices for his new company easy in New York, London, San Francisco, and Wyoming. And I thought, I've got it, this idea just flew to my head. What about if I put up billboards in these four locations, send phone me, Kanye West, I've got ideas, followed by my phone number. And as for it comes in, and like I shut it down. I was like, Ah, you're never gonna do that. You're never ever gonna do that. And it just for the whole day just kept like, I don't know, kept coming back to be like, what if? What if you did it? So I started, I started calling billboard companies, I would call them up and I'd be like, hey, how do you get a billboard up? How does this work? How much money does it cost? How long can they stay up for? And I just realized that it's actually so cheap. So for a billboard in Times Square in New York for 24 hours, it was like $670, which I thought was crazy. So I I kind of just, I guess I followed through is that I lined up all these billboards for going up at the same time, like suicide. And I had a problem, though, because I didn't live in any of these locations. So originally, I just felt like, Oh, this will go huge. And people will take photographs. But I had done enough projects to know that things just don't really work out. So I did a bit of them use my brain look, but I had this Mongo database, all these users who were on the dating site, and I did like a little query for locations. So I found like, Alright, in New York, there's 250 people on the dating site in London, there's about 200 people. And I just pulled them all out and sent them emails being like, Hey, I'm putting up a billboard in Times Square by chance, could you swing by there after work, and take a quick photo and send it to me? And people did, I guess, I got, well, the bill was about to go up. And I'm primed and ready to go. And I get an email into my inbox from the company who Lamar who are going to be putting these things up. And it says, like, we can't put up these billboards. They're blocking Kanye West's right to privacy. He's been told by the legal department. And obviously, like, Damn, I've already paid for the London one at this stage. This is all going wrong here. Like I have to do more together. And when I went downstairs, walked downstairs and I talked to my dad, and I was thinking, maybe I should pull out maybe this is all too big for me. And he kind of says, Don't worry, we'll figure it out. You always figure this stuff out. So we're both start calling the Lamar wood company. My dad's pretending he's a BBC journalist following the story. Hey, look, I'm fine. This kid. Right, we've got camera crews outside right now. And but they're not budget put it that way. They're just not. They're not. They're not buying it. So we were we came to a sort of compromise that we could see, instead of Kanye West, Mr. West, not really using his name. And they said, Okay, that's fine. So 10 minutes later, stresses over the billboards, go live, get all the photographs for you. I put out some tweets, email all the journalists who I kind of had lined up. And then the next day, I see Kanye, his name trending on Twitter. I was obviously following it all quite closely. I was thinking, why have I done it? - -57 -00:28:27,720 --> 00:30:01,230 -has it taken off? And then it turns out, no, it hadn't. Because what happened was, this was exactly the same day. I did the billboards was the day when I'm not sure if you guys would remember. But Kanye did that TMZ interview, where he says slavery sounds like a choice. Yeah. So that kind of hijacked my story a little bit. And I think he had other things on that timing, but I wouldn't Well, yeah, it's what it is really, I think I got really lucky with the first the first dating site, and maybe a bit unlucky with the second one, the second billboards, but I was chatting to my dad. And we just felt like we put in all this work. And we shouldn't just give up. So we started trying to track down the headquarters of easy on Google Maps, weed. And we sort of found roughly where it was, but there was no addresses or anything. We found companies nearby. And we just started calling them up, explaining that I've made this dating site and I was young and you know, put up these billboards. And if you could do and phone gets put down on me and then suddenly this this young girl just says yeah, like my friend works be easy. I'll I'll sure I'll send this over. So I think that was a bit of a lesson. I guess that you know, all the fancy stuff like trending on Instagram, going viral press media coverage, whatever. It doesn't. It doesn't really get you anywhere. Like all it took was a lot of hard work. We found the numbers we got a breakthrough and, and a couple of days later, an email drops into my inbox from this, this contact easy saying Oh, we've just seen everything like we'd love you. Talk to our CFO, - -58 -00:30:01,950 --> 00:30:02,760 -Wes Bos: oh my gosh, Chief - -59 -00:30:02,760 --> 00:30:03,840 -Unknown: Financial Officer. - -60 -00:30:04,380 --> 00:31:20,070 -Wes Bos: So before we hear about what's in that email, story's insane. We got to stop first sponsor real quick, which is a century century does all of your error and exception tracking, we've talked about them a lot on the website, you install a piece of code, and then errors that happen, we'll get logged to the Sentry back end. And you can sort of see, I'm gonna highlight one feature of Sentry, which is custom queries. This is pretty neat. They have the way they say it is dig deep, no shovel required. So if you want to know like, how often are these errors happening, if you want to search for specific errors, you can use their custom queries editor here and you can search by file name, or, or function, you can sort by count of how often it is you can aggregate them, you can search where the country code is not know if they've got some good examples on the website here. So if you've got tons and tons of data, sometimes too much data is hard to sort of dig through and figure out like what's going wrong? And is this actually an issue or not. So centuries custom query, which is available on the business plan is pretty nifty. You can check it out. So try out century@century.io and use the coupon code tasty treat, you're going to get two months absolutely for free. Thanks so much to Sentry for sponsoring. Alright, Harry, what was in that email? - -61 -00:31:21,090 --> 00:34:23,910 -Unknown: says this skill Actually, I maybe shouldn't say a name, but yeah, sorry. This go Ashley said, given see if I watch the chat, let's like light up a call. And then she sends through a WhatsApp message, which was actually open. This is from Ashley just I got sent this WhatsApp message. And it's it's essentially I think it was the easy Connie's like group chat and his office. And they were saying, I can't remember exactly what it said. I think it was something like, like someone showed us to Kanye, let's run a Let's run a, like a drop in what's it called, like a taster at the office? Let's see how it goes directly to Kendall Jenner. Someone sent it to Kris Jenner like, and obviously Oh, my God, this has really taken off. So the CFO calls we have a chat. And lovely guy gave me lots of time on the phone. He said we'll keep in contact. Like we had more back and forth on email. He I think he to be honest with you, I think he probably sussed out that I was just this really kind of naive, 21 year old, and I was nothing to worry about. Part of me thinks that I think he wanted to call me check that it wasn't like some big company who were gonna make a big play and like steal their brand name or something. And he was lovely. But I think he kind of saw me and he was like, Oh, no, this guy's harmless. He's, he's not going anywhere. So we have more back and forth. And then suddenly he stops email it, I was like, some odd maybe he's busy or whatever. But then I later found out from the girly, lovely like gala easy that they'd be huge changes. So loads of people would kind of left the company. I don't quite know why. But there was just big changes that easy. So this guy there who I was kind of chatting to. He left and as in the cold, I guess to a degree. So the site like Ron was on. I also from that, like I started getting loads of calls people saying, Do you want a job? Like, do you want to do joint joint work for us. So I had the site and I was still doing that. But at the same time, I was still not a great developer. And I felt like I could go into a job here kind of an a good level. And as a web developer, which would be a transition from economics, I could like pick things up. So I started out as a web developer for a bit site in the background. And then slowly but surely, I guess I kind of just, it's a little bit sad, really, I kind of just like slowly lost interest in it. And, and then I accidentally deleted the database, which didn't go too well. And I guess that's more or less the story. That's kind of the whole year and a half of dating. And I think although, you know, there's the end isn't as crazy as it could have been, I think the whole of, of like year and a half doing that was just training. And I think that the best thing to do, if you're in development, if you're into startups, whatever, is just getting your train in early because the first things don't really go well. And if you can train in like a jujitsu, a real life situation, a real life combat situation, you're going to get so sharp so quickly. And you know, oh, boy, maybe it didn't pan out as I wanted to. It was a crazy thing. And I think it Foster, would it be like four or five years? I'd say, yeah, I - -62 -00:34:23,910 --> 00:35:11,100 -Scott Tolinski: think this is the perfect example of just getting your hands dirty and making something. I mean, this is, to be honest, an extreme example of that I've read you you are you got way further than most people who are just going to hack together something and that's, that's hilarious and amazing. It's absolutely the whole story is absolutely amazing, left to right. But I think it just goes to show you that even as somebody who's just picking this stuff up, and yeah, learning from a perspective like that, you can make amazing things with this technology. And you can make things that are Get all the way to Kanye West with this level of skill. I mean, it just goes to show you where our tools and everything are in the year 2019. It's amazing. Oh, yeah, yeah, - -63 -00:35:11,190 --> 00:35:52,610 -Wes Bos: it's such a crazy story. And like, it really reminds me of my first thing that I built, which was this daily deal aggregator that, like, I just put it together for myself. And then I shared it with a couple friends and then boom, it blew up. And before I knew it, like, people are saying, it's a startup, and I had investors emailing me and I'm just like, like, Whoa, whoa, whoa, like, I'm, I'm very under qualified for all of this. And I'm sure you would say that about your story as well. But if you just just keep stabbing at different things, and before you know it, something's gonna catch. Something's gonna work. Same thing with my like, YouTube videos, I was just making random blog posts. And before you knew it, one of them caught on and go, Ah, this is one of the the kind of the cool things. - -64 -00:35:52,920 --> 00:36:25,940 -Unknown: Yeah. 100%. I think of what Scott said, like, to the outside, this is magic. You can someone looking at it from the outside be like, wow, they didn't say, how do you do that. But once you start looking at development, like bit by bit and really take it step by step, lesson by lesson, I guess, you just kind of figured out like, it's not, I really did have this complex, where I just felt like it wasn't for me, and I wasn't kind of the sort of guy who would ever do this sort of thing. And it got thrown into it. And it turns out, right. Wow. - -65 -00:36:26,010 --> 00:36:52,230 -Wes Bos: So the story is crazy. But like, like what made what made you think to like, man, I gotta, like, make an entire website for this, like the Kanye story calm. It's not just a blog post. Like it's an experience. You've obviously got our attention. You've been on some other blog posts, like, you've got this like, ability or like, I'm gonna take this and use it as a huge lever to sort of forward my career like, Is that is that the plan and like, what are you doing right now? - -66 -00:36:52,320 --> 00:39:42,960 -Unknown: that's a that's a really interesting way of looking at it. I had, I think, with whatever I do, it always starts off with Sony, which is like, which is quite small. And then I just end up holding it and holding it. So I had the Konya story broke for about six or seven months, but just never kind of got around to finishing it. And yeah, I guess, the extra little details that help. No, I think like the Kanye story, I think is compartmentalised. I think that's you know, that part of my life is over. There's a grapevine in my life. I don't want to try this story around I think this is the the premiere, I guess of the story is going nowhere else like it's I don't want to, you know, be the guy who bangs on about the same thing. And my parents are sick of me talking about it, to be honest with you. The way I did find is that this just fueled me a lot. So it gave me I kind of learned, I can do development now. And I can actually take money on the internet. And I got really into marketing because the whole billboard thing, it was kind of created marketing. Yeah. So after the Kanye site, I kind of looked around like what can I What can I do next. And I love the phrase and in business life, I guess that build the product that only you can build, write the book that only you can write, film, the video series that only you can film. And I think that it's a way of escaping competition is through authenticity. So if, for example, look at maybe the Joe Rogan podcast, he's kind of his own guy, like there's no, you can't compete with Joe Rogan, because he does all these crazy things like you jitsu he's really into free speech, comedy, etc. And it's in a way, I guess the same with you guys making the courses. Like if Scott Tillis his level up Tapscott kind of pulled from the air, or Wes Bos courses got pulled off the internet. Actually, it's pretty bad is that because people would probably still find. But I think just backing up from the Joe Rogan thing, I think that the idea with marketing is, is to kind of Actually no, sorry, a few mistakes in here. But we'll we'll run for it. I think you're kind of selling your own, like your own brand, in a way your own voice, you're in style. And it's really authentic. I think that a good test is, let's say a venture capital company came along hundred employees, millions of pounds of investment. Could they replace you? And to be honest with you? The answer is probably like, I don't think they could people just like your guy's style. So and also, another example of that is refactoring UI to Adam and Steve, the guys who do that thing, like, no matter how much money you have, you're not going to be able to kind of get rid of them. Like they just do it their own way. And people love it. So the idea of this marketing example site is just to do marks in in my own way, I guess, like, try and conjure up my own style, my own voice and make it my own. And if any developers want to learn a bit more about marks in it, definitely maybe check it out. And he will let you learn it. He thinks, - -67 -00:39:43,050 --> 00:40:30,960 -Wes Bos: yeah, I was talking to Scott about that on Friday as well. I was like, the podcast is obviously like, we're good at web development. We can talk to you but like, people listen for that, but they also listen just as much for Scott's breakdancing stories or barbecue Tips or Scott's transitions into ads and things like that. And that's, if you can sort of like double down and make it is who you are. Like, I even think like my pictures of barbecue on Instagram and whatever it is that I'm super into right now, I think that's just as important as sharing web development stuff. Because people tend to latch on to that as well. And they just like you as the person, which I think is kind of interesting way to go. Because then you become, it's hard to replace that kind of thing. Because people like, Scott, right, yeah, I - -68 -00:40:30,960 --> 00:41:27,360 -Scott Tolinski: mean, everybody's different. And those things that that make us different are the things that are interesting. Now, whether or not uh huh, you know, set an index on a MongoDB database or something. But I wanted to talk a little bit about like the the learning aspects of when you were learning to code. Specifically, you would mention that Code Academy had given you the angular thing, I actually really love Code Academy system I like highly recommend for people that are learning to fly through the cutting Academy courses. But I think it was just so it's funny that you mentioned that it was very tough to know what to do next after HTML, and then it sort of threw you into the weeds with Angular. I'm interested in that that period where you were like, Alright, I want to build web stuff. And I want to learn HTML, where you just sort of flying at the whim of whatever, the instructors the computers, were telling you to learn next, or Were there any particular things that influenced you in the technologies or the resources that you chose to learn? - -69 -00:41:27,630 --> 00:43:01,800 -Unknown: Yeah, that's a great question. So specifically, the reason why I wanted to learn code was to make a website for my book. And this is our is our project we were doing. So I had HTML down from that point. And then there's Dreamweaver, which I had the Adobe suite of products, like Premiere Pro, and all that. So they had Dreamweaver. And again, I didn't have those no friends, there was no, no podcasts like I was listening to. So I just kind of thought that Dreamweaver was the whole of the internet, it was the only ID I guess, the only text editor, so I was fumbling around. And yeah, HTML, I think for that, I paid some developer on Fiverr, to do a little bit JavaScript for that project. But thinking back to Code Academy, all I really remember was just how kind of I think how much of a black hole it felt like, in reality, all I really had to do was just go into forums and ask people for help. But I didn't ever think that was a possibility at the start. And when I figured out that it was I would be on Reddit every single day. Like Reddit web development, I've had a pre that most hated person on Stack Overflow for the last last year. It's tricky to think back, I guess, remember, it being a big, slow, slow grind. Until I kind of found like, the net ninja. I did a lot of weather stuff. I did. Lots of level up tuts. I think those are probably the three which kind of I mean, the net Ninja, for example. So I don't have to keep plugging away. No, no, yeah, - -70 -00:43:03,330 --> 00:43:03,900 -Scott Tolinski: absolutely, - -71 -00:43:03,960 --> 00:43:29,610 -Unknown: it's up. But he does level up touch this as well. But this playlist, so you just feel like you get into C pants. And on codeacademy. I just didn't feel like I was in safe hands. I felt like I was paying on Code Academy. You can you can pay for like the premium where it's like five pounds a month, and this developer will kind of help you out with your problems. So I was paying that. And he was helping me out with Angular. And maybe, I don't know, I can't really remember it too. Well, angular was just a bad time. - -72 -00:43:30,630 --> 00:45:06,840 -Wes Bos: In my career, I think. And we all have a checkered past with Angular. Yeah, that's super interesting. Uh, one thing I do want to do is stop real quick for another one of our sponsors, which is sanity@sanity.io. So what is Sanity? It's the ability to build a website with structured content. So what does Where does your data go? When you're trying to build a website with Gatsby or next or PHP, or pretty much any language you want to do? Where do you put your content? So Sanity is sort of to two parts. The first is Sanity Studio, which is is what you get when you log in, you can create instant you eyes for complex data, you get real time collaboration, it's all stored in what's called portable text, which means you're never going to be locked into a specific vendor, which is really important to me, because you should be able to get your data out if you want to do it. And doing that in a standardized way is, is key. So you don't have to like write some sort of adapter to put it into another CMS. You can customize it back end with react j s, which is cool, because like it's a hosted service. But if you do want to build custom UI eyes, you can do that with react js. And then the other part is the content back end that they have, which is a powerful API, you can query all of the data. It's fully GDPR. Eu hosted. Pretty nifty. If you're looking to build a website, you need something to do with your structured content, go to sanity.io slash syntax, and you're going to get double what the free plan normally is. Thanks so much to Sanity for sponsoring. - -73 -00:45:07,020 --> 00:46:04,140 -Scott Tolinski: So I'm really interested in a lot of the I don't know, the learning aspects of your journey here and the things that you had to struggle through. I know you mentioned some of the bugs that showed up. And then some of the things that were just born out of, you know, being a new developer in learning through these things. But I'm interested in in your sort of process for pushing through bugs and figuring out what the problem was debugging those kind of situations, because those aren't skills that are easy to necessarily just have out of the box, debugging and troubleshooting skills. So I'm interested in what you did to pick up and understand how to solve problems, because that seems to be definitely a blocker. For a lot of new developers, when they hit a problem. They don't necessarily know where to go. I know you mentioned being hated on Stack Overflow. And, you know, being a regular visitor, is that is that to sort of your approach is to just ask a lot of questions, or did you have another approach to solving bugs? And - -74 -00:46:05,160 --> 00:48:07,710 -Unknown: that's, again, really interested in make me make me think back to this. So one learning right now from that is when I when I worked for this subsequently, I did a bit of work for this some Development Agency in London could crowd form. And I'd be kind of like more of the junior developer and there'd be this more senior developer that would Leo, I used to ask him loads of questions. And what I realized during the back and forth with him was that he doesn't know the answers either to these things that he can't debug my thing either. But what he has got is just more tenacity, it kind of comes back to the if you think you can solve the problem yourself the problem, and he would just Google for 10 minutes longer than me, you figure it out. So with the specifically with the the easy dating site, I did have a system, I ran into so many things that I got together a system, there was an online group called work in progress, which I was a member of. So I post everything on there. Anytime I had a problem, essentially, I'd write it out as in like a title code embedded into the thing. And I post it on work in progress, then I post it on Reddit web development, then I post it on Reddit and node. And if it's specific to Mongo, I post it on Reddit Mongo, and then that was kind of it, I closed my eyes, an hour later, I'd get at least one replay. And maybe I felt like a bit of a spammer doing that stuff. But to be honest, I was a bit desperate and people which is really, really nice. I think that's the thing about development is that if you can somehow find like a mentor or a little online group, like whether slack is a good example of this, people really love to help you. So when I was making the chat for ease dating, he's the single check it so it's by pusher. I'm not sure if you have heard of it, but it was in its infancy. And they were so stoked to have like someone used their beta product. They pretty much just handhold me through it. So every single day, I'd genuinely every single day, I'd be messaging on this slack group. Alright, guys, how do I do this? How do I do this? And they just walk you through it. And you're kind of there. So I really, I guess, struggle around enough and ask enough questions, and you will, you'll work it out. - -75 -00:48:07,859 --> 00:48:46,140 -Scott Tolinski: Nice. Yeah, that's, I think that's a great way to look at it. Because too often times, there's like a sort of famous comic of like a guy mining for diamonds, and he's hitting the diamonds. And then diamonds are like an inch away. And he's giving up. And then the guy below him is mining for diamonds. And he's like not giving up and he's going to be the one that hits it. I mean, there's certainly like the the person who is the most stick to itiveness. Like, perseverance to push through these things usually walks away with the knowledge and metaphorical diamonds so to say, Yeah, no, I think that's a great lesson for new people is to just push through it Work, Work Work hard to get that that knowledge. Yeah, yeah, absolutely. - -76 -00:48:46,140 --> 00:48:57,090 -Wes Bos: I think that's really all the questions I have. Is there anything else that you want to any wisdom that you want to impart? You seem so prolific with your, your English accent? - -77 -00:48:58,830 --> 00:49:40,500 -Unknown: Wow. No, I think the only thing I'm in no position to give any advice. The only thing I would take from this story is that I really sincerely think that the more clueless you are, actually, this is what I say that every single person out there starts off and they're making it up as they go along. No one likes we're talking about Steve Jobs, Elan, Musk, Scott Tolinksi, West, but no one knows what they're doing. And just understanding that is a really, it's really kind of refreshing. Because you also don't know what you're doing. And then slowly but surely you you'll figure it out. And you'll and you'll get there. And I think the only thing I take from this story is if I can do it, anyone else anyone else can do. For sure. - -78 -00:49:40,740 --> 00:51:03,450 -Wes Bos: Yeah, I love that. It's true. Like I I really don't know what I'm doing like any any more than than anyone else. But I do know that I'm good at figuring things out and I'll be able to sort of make it happen. I think that's the attitude that you need. So when you're sort of cowboy going through all this stuff. Alright, we're gonna get into some stuff. Sick pics, sick pics are pics that are sick. And I don't know if you you have anything, Harry but I'll start myself off here. I recently switched to the Logitech MX two master MX Master to something like that. It's a, a mouse, Bluetooth and wireless USB available. And it's it's pretty nifty. I've been using the Magic Mouse for a long time. And I love the Magic Mouse. But I thought I just tried this one out. And it's really, really smooth. It's got all these different buttons that you can customize. I'm maybe three or four days in so far, and it's taking a bit to get used to it. I didn't dislike immediately love it, and I still don't immediately love it. But I really liked the ergonomics of it. I really liked the software that comes with it. And I think that if you're not getting a Magic Mouse, which is super ergonomic, the MX Master two is probably the best mouse that you can possibly get. And that was confirmed by very many people on Twitter and Instagram saying I've had this one for a year and I absolutely love it. So check it out. If - -79 -00:51:03,450 --> 00:51:42,840 -Scott Tolinski: you need a new mouse, I'll put a link in the description, guys. I have a thick pick, which is a TV show that I used to love when I was a kid. I don't know when this was on originally. And now it's back. I don't know how long it's been back for. But I recently found out that it's back. And that show is battle bots. I don't know if you've ever watched a battle. But is that what the robot robots are fighting in a cage? And yeah, awesome. I mean, the production value is just so nerdy and whatever. But it's so much fun. And I have such a lot of fun watching the robots beat each other up. So battlebots has returned. And this is one of those things that I really love. So that's going to be my sick pick for the day. - -80 -00:51:43,020 --> 00:52:00,810 -Wes Bos: That's how the the mythbuster Grant imahara that's how he got sort of into the whole Mythbusters is that he was like a champion at battlbox interest. And he's like just like one of those kind of guys that can build stuff like Harry, do you have a sick pick? - -81 -00:52:00,870 --> 00:52:07,320 -Unknown: I do. Yeah. Is is one the the maximum number of sick picks people can take. I could have to but I'm not sure where streets is - -82 -00:52:09,000 --> 00:52:10,290 -Wes Bos: your only time on the show. - -83 -00:52:11,760 --> 00:53:20,640 -Unknown: I'm gonna get a sick pick. The Twitter's me good Twitter, Demetri keetsa. It's by this guy called Benjamin grasa. And it basically hides all your twitter and instagram numbers. So your follower count your likes and your tweets, your retweets, your notifications. Oh, I started using it. Actually, when I when the carnia story got so much attention. Originally, I downloaded this thing it kind of gives you anxiety seeing all these messages or isn't notifications. And I didn't want to make like stuff like followers or things like that a goal. So I think it's really healthy. And although I guess if you look at your Twitter more like a business you probably do want to know, but um, it helps me a lot and you can always turn it on and off. And the other thing I will throw in is there's this boxer called Tyson fury and GS and he's just got a dad who john fury and a video a week you're on YouTube. It's called Camp life. Big john theory gives tour of vintage caravan. 13 minutes long and honestly, there's more wisdom in in big john fury than probably the horror that United Kingdom put together. check out that video, you'll learn a couple of things I think about about life. Oh, - -84 -00:53:20,700 --> 00:53:24,630 -Scott Tolinski: yeah, I like that. Cool. Yeah, put that on camper van - -85 -00:53:24,630 --> 00:53:54,960 -Wes Bos: life. I have a sick pet coming in another one about somebody who travels around in a van as well, which is loving it. I'm not gonna spoil it now because that's my sick pick for later but I'll check this one out. Thank you. Awesome. Well, now we're moving to our shameless plugs. I'm going to plug all of my courses. This whole episode has been a plug for Scott and I's courses but mine are available at Wes bos.com for slash courses, including the node one that Harry used to contact contact Kanye West himself. What about you, Scott, - -86 -00:53:54,960 --> 00:54:31,740 -Scott Tolinski: I have a new course on level up tutorials called the dev tools and debugging that was released the last day of June and I am currently recording the next series which is going to be released next Wednesday. By the time you're listening to this is going to be to confirm July 31 is going to be released it's gonna be on Gatsby an e commerce. So if you want to be building a store with Gatsby you're gonna want to check out the new Gatsby e commerce tutorial series that's coming to level up tutorials next week or the 31st of July thank you and check it out at level up tutorials comm forward slash pro - -87 -00:54:31,919 --> 00:54:51,150 -Unknown: before it gets us saying that I when I started out I was you know pretty clueless and in the library and both of you guys's courses pulled me free I genuinely mean that from kind of having no idea to be in here so it's a cool moment to be on the show and I really appreciate you guys for button means a lot. Hey, we - -88 -00:54:51,150 --> 00:55:09,540 -Scott Tolinski: really appreciate you taking the time to tell us your your story cuz it's not only is it a wild one, but it's full of like awesome advice in awesome. life lessons and awesome dev lessons. So I think the audience is really going to get a lot out of this in terms of seeing what Yes, the power that you you wield, you know? - -89 -00:55:09,780 --> 00:55:41,760 -Wes Bos: Yeah, I honestly rather have like stories like that on this podcast just because like, you want to hear from someone who just did it who you always wanted, like, like sort of trail behind somebody who's just a couple lengths ahead of you, rather than maybe like I've said this before, but that's why I just don't understand why people love Ilan musk and Steve Jobs and stuff like that so much, because like, that's not inspiring to me at all. What's inspiring to me is like someone who's like, just, I don't know, five years ahead of me where I'm just like, oh, wow, like, Look, look what they've done in the last five years. I could do that in the next five years Really? - -90 -00:55:41,820 --> 00:56:07,530 -Unknown: Well, yeah. I said, I've recently started this marketing, project, food marketing examples.com. It's distilling real world marketing lessons into kind of short, concise summaries, as Twitter, Twitter for that quarter at good marks in HQ, where I kind of try and turn these examples into friends. So check that out. And also, I'm Harry dry on Twitter, and any questions about the show or anything, just feel free to get in touch and help out? - -91 -00:56:07,830 --> 00:56:12,420 -Scott Tolinski: This website looks great. By the way, another great little design. Yeah, it looks really nice. - -92 -00:56:12,480 --> 00:56:15,330 -Unknown: Thank you. Yes, yes. sketch for you. - -93 -00:56:16,710 --> 00:56:17,250 -Ah, - -94 -00:56:19,440 --> 00:56:21,870 -Wes Bos: that's cool. I love the way you say ah, as well. - -95 -00:56:23,430 --> 00:56:24,000 -Unknown: Hey. - -96 -00:56:26,580 --> 00:56:40,770 -Wes Bos: Awesome. Well, I think that's it for today. Thanks, everybody, for tuning in. Thank you so much to Harry for coming on. Make sure you check his website out marketing examples.com. And we'd love to hear what you thought about the show at syntax FM. Yeah, that's it for today. - -97 -00:56:41,010 --> 00:56:54,780 -Scott Tolinski: All right, he's, he's head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax165.srt b/transcripts/Syntax165.srt deleted file mode 100644 index bbbe0476d..000000000 --- a/transcripts/Syntax165.srt +++ /dev/null @@ -1,152 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,149 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi - -2 -00:00:26,610 --> 00:01:10,050 -Scott Tolinski: Welcome to syntax and this Monday tasty treat. We're going to be talking all about some of our VS code, tasty treats here and this is going to be sort of a partner to for a couple weeks ago we did a VS code hasty treat, where we talked about some of our favorite things. And you know what VS code has so many awesome features, awesome new things. It's changing and evolving all the time. So we thought we would take some time to do a another episode. And in this episode, we're gonna be talking about some extensions that we like, some features, some things to learn some keyboard commands, some snippet libraries, those kinds of things, and just all the stuff we love. My name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me as always is Wes balls. How you doing Wes? - -3 -00:01:10,110 --> 00:01:26,340 -Wes Bos: Hey, doing great. It's actually killer today. Whoa, today. So it's a it's a holiday, but we're gonna be taking a whole bunch of time off this summer. So we thought we would work today and not goof up our recording schedule. We record on Mondays, which is hilarious because almost all holidays are on Mondays. It's - -4 -00:01:26,340 --> 00:03:04,560 -Scott Tolinski: weird, it seems. So here's a lot of holidays on our on our recording time. But yeah, no, dude. I'm excited for this episode. I'm excited for VS code. And nothing I'm excited about is one of our sponsors today is a longtime sponsor of syntax. And those of you who have listened for a very long time will recognize this bunter is one of the ones that we gush about all the time. And this is Netlify. Netlify, is a service to host your front end code, your serverless functions, you can do so much stuff with Netlify, it is unbelievable. And let me tell you that the experience of getting started with Netlify is as simple as just selecting your repo, choosing your build command and have it go, it takes care of continuous integration, all that stuff that you know, and is a giant pain in the butt set up somewhere else Netlify makes it nice and easy. So I mean, this is one of those services that the proof is really in the pudding here where you got to, we got to go and use it. And to do that you want to head to netlify.com forward slash syntax, and you want to sign up, you want to check it out. And I don't know if this feature is going to be live by the time you're listening to this. But we know for a fact that this is going to be announced this is no heist new analytics service, that is going to be one of those things that's going to knock your socks off because these analytics can be trusted. Unlike some analytics, like Google Analytics, they're coming directly from the browser, which can well a lot of stuff in the client can be spoofed, this is all coming directly from the DNS. So this is going to be this is going to be analytics that you can't spoof. And this is going to give you better real data that is going to be more accurate and easier to trust, I should say. So yeah, - -5 -00:03:04,590 --> 00:03:22,410 -Wes Bos: yeah, like I can't trust my my analytics at all, because almost all web developers use ad blockers. So if I look at my like email, open rates, or conversion rates or Google Analytics, they're like so much. They're so far off from my actual sales data, and like actual amount of people that I think - -6 -00:03:22,410 --> 00:03:25,440 -Unknown: are on my website. So it's like, what's the point of even looking at them? - -7 -00:03:25,470 --> 00:03:36,210 -Wes Bos: Yeah. But getting the logs from just the server requests is amazing. Because you can't block a server request. Otherwise, you're blocking the entire website. - -8 -00:03:36,329 --> 00:04:45,890 -Scott Tolinski: Yeah. All right. Cool. So let's get into it. With this VS code hasty treat. Now, I think we want to start off with some extensions, we did a whole bunch of our favorite extensions. Last time. This one, I kind of want to just talk about some extensions that are, you know, interesting, some ones that we use are ones that we find to be useful. And the first one I want to talk about is get blame. Now, git blame is the one that allows you to easily see who the heck wrote a line of code. And this makes it really nice and easy. If you're on a team. Whenever your cursor is on a particular line of code down at the bottom little info bar, it will tell you exactly who wrote that line of code. For instance, I'm on a line of code right now in my API, and it says that I wrote this line of code stilinski wrote this two years ago, so you can see instantly if something's not working, and Wes Bos was the culprit. Wes Bos wrote this entire essay, Wes Bos wrote this line of code. And it was of course better than the line of code that you wrote so you can see exactly what's going on who wrote what and what of these tools I'm a big fan of Do you use get blaming? I know you don't really code on a team that much - -9 -00:04:46,010 --> 00:04:57,300 -Wes Bos: Hmm, I don't use it in VS code. I need to use get blame every now and then. When I want to see what's going on. Is this the one where it actually shows you in line inside your codes? - -10 -00:04:57,480 --> 00:05:08,760 -Scott Tolinski: I don't know if I think it maybe can I'm not sure this One just shows you down at the bottom, which I find to be nice and unobtrusive. I have turned off all pop ups and hovers really in my VS code. So like, I don't see those pop ups, - -11 -00:05:09,000 --> 00:05:47,820 -Wes Bos: I used to have that one where it would just put it above the chunk of code that the person had written. Hmm, because it can do that. And I really didn't like having it in inline because it looks like there's actual code inside of there. So I totally turn that off. I also had, I was doing a workshop once. And somebody had actually, like, typed down that piece of code. It was from the other one, which was VS code, like file size, where it tells you how or import costs. That's the one. It tells you how big the imports are. And somebody actually wrote like, hundred 28 kB, beside as if it was Kota had to go, Oh, I remember the things. Yeah, - -12 -00:05:48,540 --> 00:07:14,160 -Scott Tolinski: that sounds like something that I would do, I'd be like, I don't understand why this isn't working. token bellotto. What is the same, like another one I i've been using, although this plugin is great. Let me tell you this. I'm going to preface this with this. So don't sound like I'm hating on this at all. But it is not exactly the easiest one to set up. And that's the Apollo, the official Apollo graph qL package. And you do need some things you need to well, you can publish your schema with the Apollo schema registry, and you set up an API key, there's a lot of setup involved. And it was kind of frustrating, because I felt like I had the setup working. And then something changed. And then it broke. And I felt like I was kind of chasing it for a little bit. But the features you get out of this are really good at adds a really nice while it adds syntax highlighting which you can get already from other other places. But it gets really great intelligent auto completion for fields, arguments, types, variables. So when you're writing your queries, you get more information. Basically, it's making VS code aware of your schema and how it all functions together. That way, you can see exactly what's happening. Like you can hover over a fragment, and it's going to tell you what exists in that fragment. It gives you some performance information, it validates fields, it's really, really pretty cool. I like this extension a lot, it is kind of a pain in the butt to set up from my personal experience, but definitely one worthy of checking out if you are an Apollo user. - -13 -00:07:14,400 --> 00:08:58,950 -Wes Bos: Next one we have here is the VS code spell checker, which is funny that this is like one thing that's just not included in the ability to do spell check. And it's frustrating because it doesn't use like the system spell check. Yet these a totally separate plugin, but it's good, it works well. You can add items to your own dictionary, which is cool. You can also it also allows you to install dictionaries from other commonly used like you can install a JavaScript dictionary, and it will it'll do things like constant, let it'll it'll make those actual words in your dictionary. So you don't have to add them yourself. It does spell check from camel case, which is cool. So like if you type a word, in camel case, it will translate that to just like spaces and then spell check it for you, which is really, really cool. That would not happen with normal spellcheck. And probably my favorite thing about this that I didn't know for the longest time is that my biggest gripe is that it puts a little like light bulb near the spelling mistake and you have the light bulb. And it's so frustrating because it just the light bulb moves on me all the time to like a random spot. I don't understand how it's detecting it, probably something to do with my zoom settings. But I realized that you can just use nVs code this this is called code actions, which will modify your code like es lint is a code action. And what this will do is if you just hit command space, you can select the spelling correction with your keyboard, which my biggest qualm with a built in OSX is you cannot fix a spelling mistake from the keyboard, you have to reach for your mouse. Yeah, and I've ever looked for a solution for this. And since I do almost everything in VS code, you can now do it from the keyboard, but hitting command space. And that will open up a list of fixes. I love that tip. - -14 -00:08:59,130 --> 00:09:09,020 -Scott Tolinski: I should mention for those of you Alfred users who have tuned the command space, you might need to have a little change for that dude, what was your Alphard command was I'm interested in that - -15 -00:09:09,050 --> 00:09:10,890 -Wes Bos: minus option space option. - -16 -00:09:11,460 --> 00:10:24,870 -Scott Tolinski: Whoa, I command space because that was like always the default. And then that was the default for spotlight in yakko OS. So I'm gonna maybe have to reassign some, some keyboard commands, cuz I don't use this, I kind of use my mouse a lot. I'm a little bit of a mouse user. And I think that makes some people upset. But I need to get on this code action business because I'm clicking the light bulb right now and I shouldn't necessarily be clicking that light bulb. I want to talk about a new feature that was recently added to VS code which is being able to change the tree indentation and allowing to have guides in the tree. So the tree is the Explorer. I think they call it the Explorer and see view view Explorer. Yeah, so Command Shift E it's where your files are living. And if you're like me, you know I have my structure of my application, memorize it. Don't need to see a ton of spread out in this thing so you can change the intent level to make it more compact more concise, or you can make it bigger and you can add some indent lines here there's another property of preference called tree indent guides would really you draw lines from your folder to your folder This is a new thing here in VS code at some point I'm on I should state that I am on the insiders build but I'm pretty sure it's in the regular one as well - -17 -00:10:24,900 --> 00:10:27,210 -Wes Bos: what sorry What's this called again tree - -18 -00:10:27,270 --> 00:10:37,710 -Scott Tolinski: in yours it may just be in the insiders and it might be coming to the other one so let's go ahead and search for tree indent in tree indent Yeah, so okay work but - -19 -00:10:37,710 --> 00:10:40,800 -Unknown: I just have tree and dead pixels. Oh, wow. Okay, so - -20 -00:10:40,800 --> 00:11:12,090 -Scott Tolinski: this must be one that's coming to VS code. And so I see tree indent where you can choose the indented pixels You see that? Yeah, and then there's one directly below it will be workbench tree render indent guides and you can tell it to always on hover or none, you actually should change mind on hover that's a little bit nicer. So this is this is coming in VS code insiders. I by the time you're listening to this, it might be in your VS code. So double check. I use the insiders I don't know why it's kind of a pain in the butt updated every day. But that's just how I am - -21 -00:11:12,960 --> 00:11:44,130 -Wes Bos: Yeah, I switched away from insiders just because I I found that the the pace of new features in VS code was already it's already so fast. Yeah, that I didn't even every now and then I want to try something new. And I'll dip into insiders. I just checked it. Now. You're right, that tree render. That's a huge pain point from mine is that especially doing workshops, people put files in the wrong folder because the indentation is, it's muddy as to like, where where you actually are. And this and the new breadcrumbs is going to help that a lot. - -22 -00:11:44,189 --> 00:12:37,890 -Scott Tolinski: Yeah, and that's the next thing we want to talk about is breadcrumbs. When the witness got released, a turn on breadcrumbs right away, and breadcrumbs basically adds what you if you don't know turn breadcrumb is that nice. It basically is like, here's the folder structure that it took to get to where you are. And, or even like any sort of navigational structure because of bread bread crumb on a website is just the navigational structure. But here we can see that like, if I'm in playlist j s, my little breadcrumbs Joe's playlist that j s is inside of a playlist folder, which is inside of an API folder, which is inside of an imports folder. And just by clicking any of those folders, it opens up a nice little drop down allows me to potentially open up all their files within that same folder. Like if I click playlist j s, it shows me every single file that's in that folder, so then I can then click on playlist, graph qL, if I want to jump into my graph, qL schema really cool. - -23 -00:12:38,040 --> 00:13:31,320 -Wes Bos: It goes even further than folders and file names, it will show you what function you're really in Yeah, and then you can drop down a little further and see what variables are inside of that function. And then it's actually an awesome tool for viewing scope of variables. Because you can see what what variables are scoped to that module, you can see what functions are there you can see if there's like a closure, and you have like a for each inside of that it will nest them. It's pretty, pretty impressive. That it goes as deep as this and used to be you can do this in in sublime were used to be able to I think it's command r it works in VS code, at least for me, it's command R and that will open up the at mine in your command palette. And then you can just search for function names. But this will just give you sort of a nice little map view of all the functions in that specific module. - -24 -00:13:31,560 --> 00:13:37,110 -Scott Tolinski: Yeah, I don't think it command R is the default for that. What is the default for that? I'm not sure what the default is. - -25 -00:13:37,140 --> 00:13:51,900 -Wes Bos: If you just open up your command palette and type Yeah, the and then you'll be able to see all of the different these these things are called symbols, which is a good word. variables, functions, methods, I'm sure other languages have different names for them. - -26 -00:13:51,930 --> 00:14:29,820 -Scott Tolinski: Yeah. Cool. So breadcrumbs is one thing that if you don't have on you can turn on, I believe it is in View menu, where you can select View from the very top and then show breadcrumbs is the one it should be right by mini map their show mini map and then show breadcrumbs there, you can just check it. Next one we'll talk about is the version control menu or SCM if you do Command Shift g Ctrl, Shift G, and this thing, how much you use this I because I primarily use Git via the command line, but I love the VS code, get features, specifically just managing commits, managing changes through this command shift g Do you use this at all? - -27 -00:14:30,180 --> 00:15:03,420 -Wes Bos: I don't but it's the first time I've used it every now and then I should say and I especially use it for the color highlighting in the sidebar to see which files are new which files have been modified, because it will color them red or yellow or green based on their their git status. I've not used this as a as a GUI but I think that if you are getting into git, I think this is how you should should be learning it. I think that the only reason I use the command line is just because I'm an old guy and I have been using Git on the command line forever, - -28 -00:15:03,510 --> 00:15:25,950 -Scott Tolinski: I use the command line a lot, there's several things I do use this interface for, like, if I'm doing a commit, I mean, I have a keyboard or an alias set up for my z, sh that I use primarily. But sometimes when I'm in here, I'll do Command Shift G, and just type in the message box, and then do command Enter to commit. And it's so fast every time I do it, I'm like, man, why am I not doing this more often, it's me, I - -29 -00:15:25,950 --> 00:15:33,930 -Wes Bos: need to like, force myself to use it for like an entire week or something like that, and then make a decision on that, because that's it this is it might even be better, it doesn't - -30 -00:15:33,930 --> 00:16:41,370 -Scott Tolinski: pull you out at all. And there's even switching branches. Like if you switch branches, there, there's a couple ways I don't know the keyboard shortcut. To be honest, I know I'm gonna, you know, with my mouse clicking, but I click on the branch name in the bottom left. And then you could just choose what branch you want directly from here. And it not only visually shows you every single branch that exists in your repo. But for me, I find it very nice to just sort of get an overview of the current state of my version control to see okay, here are all of these branches, maybe I should turn some of these branches. Maybe these are ones that I created at some point, you know, had an idea with and now I want to delete them. And you can delete branches from from Git to directly if you just had to your command palette, you can type in delete, and that should bring up the Git delete branch. And then you could just go highlight a branch that you're not using anymore, click on it and delete that branch. If it's one that is no longer necessary. I'm definitely a fan of con con marrying Marie Kondo method, some of my branches here and get cleaned it up. Only the essentials? Yeah, - -31 -00:16:41,820 --> 00:16:45,660 -Wes Bos: it's pretty cool. I also like the the UI for merging things. - -32 -00:16:45,689 --> 00:16:46,890 -Scott Tolinski: Yeah, beautiful. - -33 -00:16:46,950 --> 00:17:07,140 -Wes Bos: I'm big fan of the, the GUI that will show you what's been added and what's been removed. And you can also just like diff two different files, if you feel like it, you can diff from your master branch to another branch or to an old commit. I know all these things you could do and get but it's just I think it's so much easier to have it built into your VS code. - -34 -00:17:07,229 --> 00:18:00,080 -Scott Tolinski: Yeah, yeah, I know. It's funny, because it's ID we say this every time we do these episodes, but it's like ID people are going to be just shaking their heads 24 seven at us, because it's like, this is the stuff you could do for ID. Or you could do an ID and just have it be, I don't know, easy built in, and something that you've either paid for now WebStorm and knew that stuff. And you know, that, hey, this is free. And it's VS code. Cool. Well, there is so many darn things to learn into. To get down with VS code. We're actually we're running out of time in this hasty tree. But we have so many other things that we're going to extend this into a monster part three, where we're going to be talking about some really things that we loved, that are really important to learn in VS code, we're gonna be talking about some keyboard commands. And we're going to compile some of our favorite snippet libraries, and maybe talk a little bit about some tools to generate snippet libraries and how to use snippets to their fullest extent. - -35 -00:18:00,630 --> 00:18:10,100 -Wes Bos: Awesome. Well, thanks so much for tuning in. If you have your own vs. Code tips, make sure you tweet us at syntax FM. I'm at Wes Bos. And Scott is at stilinski. He - -36 -00:18:10,100 --> 00:18:28,770 -Scott Tolinski: is and that's it. Yeah, we love VS code. So tweet us out some of your favorite extensions. We want to hear what you're using what you're loving within vs. Code, maybe some sick tips and tricks that we have not covered in this episode. And we will hit you up with one of those nice fancy retweets from the syntax Twitter. So thank you so much for listening and we will catch you on Wednesday. - -37 -00:18:29,160 --> 00:18:30,540 -Unknown: Peace, peace. - -38 -00:18:32,520 --> 00:18:42,300 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax166.srt b/transcripts/Syntax166.srt deleted file mode 100644 index 656c5c0bd..000000000 --- a/transcripts/Syntax166.srt +++ /dev/null @@ -1,512 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,829 --> 00:00:05,760 -development treats out there. - -4 -00:00:05,760 --> 00:00:09,000 -strap yourself in and get ready to live ski - -5 -00:00:09,000 --> 00:00:10,890 -and West boss. Oh, welcome - -6 -00:00:10,890 --> 00:00:18,690 -Wes Bos: to the summer edition of scinto. Yeah, it's I don't know how it's any different than the normal syntax. - -7 -00:00:18,710 --> 00:00:24,270 -Scott Tolinski: You're wearing a Hawaiian you're wearing a flower shirt right now. So like, that's summer edition enough right now. - -8 -00:00:25,019 --> 00:00:32,359 -Wes Bos: Very, very summery. It's like the perfect weather right now where you don't have to have the AC on or you just open the windows and live for free. - -9 -00:00:32,459 --> 00:00:37,140 -Scott Tolinski: Oh, we have the Avery aacn down here. It's hot. It's very hot. - -10 -00:00:37,169 --> 00:00:45,240 -Wes Bos: We had it all last week. But thankfully, you could turn off for at least a day or two. So that voice there Mr. szalinski. How you doing today? Scott? - -11 -00:00:45,329 --> 00:00:49,439 -Scott Tolinski: Do good. How you doing today, Mr. Boss? We're doing good. - -12 -00:00:49,589 --> 00:00:54,840 -Wes Bos: Doing good as well. Not slipping a whole lot with the the new baby but we're surviving. - -13 -00:00:54,869 --> 00:01:04,860 -Scott Tolinski: Yeah. Likewise, that coffee this morning. I got my tea sitting here. So I'm already doubling up on the caffeine tip. So that's, uh, enough of a sign to tell you around that. - -14 -00:01:05,009 --> 00:01:42,900 -Wes Bos: Yeah. Oh, great. Alright, so today we are sponsored by two awesome companies. First one is Sentry. And the other one is Freshbooks. Sentry does your error exception tracking Freshbooks into your cloud accounting. We'll talk about them both partway through the episode. So today potluck, if you have a question you'd like us to answer on one of these episodes, we do one per month, just go to syntax.fm. In the top right hand corner, there's a button that says ask a potluck question, you can go ahead and type your question in the box, and we will see it and put it into one of the future shows if we like the question. We don't we won't answer it at all. Ready to get rockin there, Scott? - -15 -00:01:42,930 --> 00:01:51,450 -Scott Tolinski: Yes. Although I should say if we don't answer your question, it doesn't always mean that we didn't like it, we get lots of questions. So I just wanna want to put that out there. Put that - -16 -00:01:51,450 --> 00:02:01,800 -Wes Bos: on, let me just pick the ones that we think will make like an interesting episode, and also ones that we sort of see over and over again. Yeah. So that will help it. So you want to you want to grab the first one there? Sure. The - -17 -00:02:01,800 --> 00:03:20,639 -Scott Tolinski: first question here is from Elon, that collagen. Hey, guys, newer listener to your show and dev in training here. I hear you both talk about state a lot in your podcast. And while I understand a little bit about it, it's something that I couldn't do with learning more about on never understanding the context. You both used it. Could you enlighten us. Thanks to you and your amazing content, whose Thank you, Alan for the piece. Loved it. So state, what's up with state what is state and state in application? You're right, it does get tossed around and us in particular, we do tossed around in wood, you know, you just sort of take for granted that this is this thing. And it's almost kind of even hard to necessarily pin down and define what the state of your application is, as it says it's just how your application is at any given moment is the state of your application, right? If you have, let's say, a basic HTML website, right? And you could call it an application, if you weren't sure. We have a web app, that's just an HTML page, right? The state of that application is essentially either it has been loaded or it has not been loaded. When it's loaded. It's static. That's all it is. But in applications as they grow, they have more situations they can be in, for instance, you have a good way - -18 -00:03:20,669 --> 00:03:22,530 -Wes Bos: situations situation. Right? - -19 -00:03:22,560 --> 00:04:29,100 -Scott Tolinski: Right. So you have let's say the let's use the level up tutorials website for an example, the default state of the application is not locked in, the data comes in, and that data is stored in a specific way. Now, you could view that data as being state as well, because that data has specific things that are are only relevant to this particular state of the application that we're in. But then once the user logs in, the state of the application changes. Or if you're in a dynamic single page application, when you change pages, maybe the state of the application changes, or pretty much anytime you're doing anything dynamic. Think about this, the navigation pops open slides open, like a hamburger menu. Well, there are not that navigation is opened or closed is the state of that navigation. What is the status of this thing? Is it open is closed? Is it mounted? Is it unmounted? What is it? What would it where is it currently living right now. So that to me is the best way to describe state is just sort of how the application is right now or how this component is right now. - -20 -00:04:29,250 --> 00:05:05,700 -Wes Bos: Yeah, if you think about like CSS, CSS elements will have state they'll have you have your regular, you have your visited links, you could have a hover, you could have an active, which is you're currently clicking on. So those are different states of the actual link. And then when you expand it to your entire application, like Scott was saying, There's often a lot of data that is associated with that. So you might have like, what is the current logged in user? What do they currently have the navigation open? What items are in the shopping cart, and all of these sort of pieces of data as to like what Are they even if you just think of it outside programming internal, like, what is the state of the world right now? - -21 -00:05:05,880 --> 00:05:06,420 -Scott Tolinski: Yeah, - -22 -00:05:06,420 --> 00:05:32,100 -Wes Bos: who is president? how hungry? Are you? How many family members do you have? These are all pieces of information that play into how you go ahead and live your life. And if you ever wanted to totally replicate that, you would have to make sure that every single piece of state in your life is exactly the same. So when we say state, we just essentially mean like things that are currently happening in your application. Yeah, - -23 -00:05:32,100 --> 00:05:45,840 -Scott Tolinski: I think that's a good way to define it. And I think there's some interesting ideas around state and what you consider to be state or the application state in general. Have you done any learning and reading into state machines? Wes, - -24 -00:05:45,900 --> 00:06:18,750 -Wes Bos: I have a little bit I found them fairly interesting. Because what is that David k piano? Yeah, yeah, those are a lot of unreal code pens, and he's always pushing state machine. So I went and watch that talk. And then I also went through some of the like, very basic JavaScript state machines. And it's kind of interesting, because he just basically lays out like, this is the house. This is the house with two windows. This is how so two windows in two doors. This is a house with three windows and one door. And those are different, like ideas of what the state of a house could be. - -25 -00:06:19,080 --> 00:06:50,730 -Scott Tolinski: Yeah, yeah, yeah, I found a lot of that stuff really interesting. I, it's one of those things I wish I could spend more time with. But every time I get into coding up any sort of state machine anything, I think it's a little it's a little much for some of the stuff I'm doing, but I understand some of the benefits, I think it'd be worth maybe a topic on an episode topic for us to maybe research a little bit about state machines. And then yes, and then give a little intro one on one to what a state machine is, and and how you can use it. Tweet us out if you are interested in learning more about state machines. Oh, next - -26 -00:06:50,730 --> 00:07:57,240 -Wes Bos: question we have is from Larry masuleh. Thank you for the pronounciation I have an idea for a project that assisted for WebSockets pushed text, images, documents to a bunch of users in real time, I just learned about firebases real time database and looked like it would be pretty easy to implement my idea. What are your thoughts of pro con of these two technologies? Thanks from a super fan. Alright, so we actually have sort of like a WebSocket. One coming up a show I have I've had it for a long time. And I've just been adding ideas to it. So we'll do a show at some point. And then people say Firebase, so Firebase is not an alternative to WebSockets. Firebase is a platform for storing data and storing images and doing authentication. So it's sort of like a database in some some services around that. That is real time. And that uses the technology that is a WebSocket. A WebSocket is sort of like a highway between you and the server, which will allow you to send data immediately over these WebSockets. I'm just doing this like pointing motion right now, if I have data going back and forth, you can imagine me and my fingers in the air. - -27 -00:07:58,500 --> 00:07:59,790 -Unknown: Yeah, they're they're flying. - -28 -00:08:00,990 --> 00:08:49,669 -Wes Bos: So it's not really one or the other, you can certainly get a lot of other platforms out there. There's another one, there's an open source version one called feathers, j. s. I know Meteor is all built on on WebSockets. A lot of graph qL subscriptions are all built on WebSockets. So the pros and cons of using something like Firebase is that it just like built for you. It's a service, you don't have to worry about hosting it or anything like that. The cons is that it's not open source, there's a possibility that it will get shut down. At some point. I think Google is pretty Google owns Firebase. I think they're pretty invested in it. But that said, Google has shut the door on plenty of things in the past that people people thought was unreal that they would they would do that. So that's the con there. But you could also build your own. But then you have to sort of maintain that that entire infrastructure there as well. Yeah, - -29 -00:08:49,770 --> 00:09:16,380 -Scott Tolinski: I would definitely say to consider Meteor because you know what Firebase you are, you're stuck on sort of somebody else's platform, right? firebases platform with their data, you're sort of stuck in that system. But with Meteor, it's using Mongo. And you can host that and do anything you want with that database. That's your database, it's like, it's probably a lot more common to have maybe MongoDB developers or something, then I don't know, Firebase is really popular. But at a larger scale, or something, - -30 -00:09:16,470 --> 00:09:47,820 -Wes Bos: I would say if you have an idea for a project, and you're sort of like new to learning this kind of thing. Just go with Firebase. Like, honestly, if this thing takes off, and it's amazing, doing super well. And you're finding that Firebase is a bit of a limitation, then you can absolutely move over to that type of thing is to be able to save like a large part of your application. It's just how the data gets transferred, that you'll have to swap out and that's not a big deal because your your app is doing awesome. You're probably a millionaire by now. And you can pay some sucker to do it for you. - -31 -00:09:48,000 --> 00:11:33,330 -Scott Tolinski: Sure. But if you are I mean, my my idea here is that like this is going to be like Meteor right now. If you used it with Mongo or whatever, it would be a cheaper solution in the short term. Yeah, because you're not going to get Like the hosting for just hosting a database is going to be cheaper than hosting a service like Firebase. But I think that coming on this Tuesday, actually, tomorrow, there's like a big Meteor conference where they're going to announce the feature of the meteor, not like a conference. It's like a meteor night they used to do and they're going to do another one. So I'm really excited about what the future of Meteor, we'll hold it. I've been using it on level up tutorials for a long time. And if you're looking at real time stuff, let me tell you, it's like, it's so easy to get going with that stuff on Meteor. I'm such a huge fan of the platform in general, but I would just say check it out. It's a cool and easy way to do WebSocket stuff, and it takes care of all the hard stuff for you. Cool. So next question comes from Ross White House. Got a bunch of easy names today. And is how is your fitness going? We haven't heard an update except for Scott's crazy AB workouts on Instagram. This one's funny because we were doing sort of, we've done two fitness episodes. We did one when we first started and then one maybe a year and a little bit later. It might be time for another update on that one. I don't know what the timing is, but maybe we should keep I think we're gonna plan on doing that a yearly thing. We should look into that. As far as yes goes. It's tough when you're a parent at this stage in the game to do everything but I'm finding time to hit to the gym a few days a week like normal and I'm not finding as much time to get my breaking cardio stuff in but yeah, everything's everything's been progressing. I would say I'm in a better state than I was last time we did that episode. So yeah, we should maybe we should consider adding an episode another fitness part three to the docket here. - -32 -00:11:33,690 --> 00:11:44,820 -Wes Bos: Yeah, added to the thing. My Fitness is going okay, I sort of got hit with the sort of one two punch of my daughter not sleeping and new baby on the way - -33 -00:11:44,850 --> 00:11:46,980 -Unknown: so hard to do everything. Just - -34 -00:11:47,010 --> 00:12:11,970 -Wes Bos: Yeah, it's it's really, really tough to do it when you have a new baby and things like that. So it's been a going, Okay, I'm not a I'm not like 100% happy with where I'm at right now, I definitely could probably lose a little bit more weight. But I think I'm sort of like maintaining where I'm at, which is good. I don't want to want to like let myself go. And then as things start to get easier as you start to get more into a schedule, you sort of get back into that - -35 -00:12:12,090 --> 00:14:41,760 -Scott Tolinski: word. Cool. Okay, so next question here is from Tim Moran. And Tim wirkungen. Sort of only half answered this question for you. But don't worry, you submitted a bunch of questions. So there we're actually going to fully answer another one of your questions later on, in this episode, question his five year outlook Back to the Future with West and Scott. Let's say both of you, gents, or junior developers to basic knowledge and skills, HTML, CSS, JavaScript, how do you add all of the expertise and knowledge of how to best master those skills and where the industry is heading? What would be the outline and focus for roadmap for basically the next five years? The premise of this, this question is going to be what's going to change in the future? And where would you start learning right now for a five year outlook. And my advice for everyone is that five years is too long, like the question Where do you see the industry in five years? I we could speculate, but like, where do you see your career in five years? I don't know where were we both five years ago, when was five years ago, it's 2019. So this was 2014, I wasn't even living in the state that I'm living in right now. I was working for a small agency, and I was building WordPress websites with PHP. So it's really hard to project that far out. And my advice to you, or anybody else would be to don't project that far out. Because you're going to go down some wrong paths project six months out, three months out, look at sort of stuff where you want to go where you want to learn in that kind of timeframe, not sort of the larger timeframe. So what stacks would i would you learn who knows, whatever is relevant five years, I don't think we can understand or know, it could be react, it could be something you've never heard of. So I would say bet on maybe just core foundational programming skills, how the web works, HTML, CSS, and JavaScript, you're going to want to make sure you have those skills. And what resources would you use to learn I would use level up tutorials and nothing else? No, I don't know. There's, you know, again, it's whatever content works best for you. And who knows what's going to be around as things change inside? So Tim, this is this isn't a great answer to your question. But at the end of the day, I think five years is way too much to project. And just you'll want to keep an eye on the industry and see where things are going. But if as long as you have like core JavaScript skills, those skills are going to be applicable to pretty much anything that you're going to probably try to learn in the next five years, unless of course, TypeScript is now taken over JavaScript or who knows what we don't know. - -36 -00:14:41,820 --> 00:15:31,409 -Wes Bos: yet. We get a lot of questions like this people asking like what does the future hold and we have absolutely no idea and I don't, I know that it probably causes anxiety and a lot of people not knowing what the future has and not knowing if your skills will be relevant and they probably won't be and that's why he needs to kind of calm Being be re evaluating and learning new things. But like, like, what should you be doing? Just put your head down and start making apps start building applications. That's what we're probably going to be doing. And five years from now, with what tools, I don't know, it will probably change a little bit, but it's not gonna change that much like, people were starting to talk about jQuery being dead five years ago. And there's still people using jQuery now. So it's not going to be this like, apocalyptic thing where it's absolutely totally changed. It doesn't it doesn't even though we say it move fast, it doesn't move that fast. Yeah. - -37 -00:15:31,409 --> 00:15:35,190 -Unknown: So not generally refresh your browser and have it be a different frame. Yeah. - -38 -00:15:35,220 --> 00:15:56,159 -Wes Bos: Oh, my gosh, I have no absolutely no skills and things like that the fact that you listened to this podcast, and that you typed in a question for us means that you're already probably at like the 10%. of cutting edge. And that puts you in a really, really good spot. So just keep making apps, you changing your tools, every six months, little things here, little things there. You'll be fine. Don't worry about it. - -39 -00:15:56,250 --> 00:16:21,090 -Scott Tolinski: Yep. Yeah, that's good answer. You just gonna want to make sure that you keep your knowledge fresh, non stop fresh. This is a an ad transition into fresh books, which is one of our longtime sponsors over here, it's in text. Now first books is the way that you can keep track of all of your billing and accounting needs, for once you've gained those skills that are going to propel you to the next five years of your career. So with more about freshbooks is Wes - -40 -00:16:21,149 --> 00:17:20,040 -Wes Bos: Yeah. So what does Freshbooks do quick, easy invoicing, they say if you send your invoices via Freshbooks, you get them paid online, get them paid immediately, you get paid two times faster, definitely been in the situation where if you have to like mail them a PDF that gets forwarded to somebody else, and then they have to like print out a check and then mail it to you. If you can pay online directly on the invoice, you often get paid. I've been paid within five minutes before on Freshbooks. Because they just make it that easy. You can customize the branding, you can have multiple currencies, you can have reoccurring invoices if you've got somebody like on a retainer, all this stuff just takes the busy work out of running a business and puts you at the home to actually build websites and be a programmer. So go to freshbooks.com forward slash syntax in use syntax in the How did you hear about a section, you're gonna get a 30 day unrestricted free trial Again, that's freshbooks.com forward slash syntax. Thanks so much to Freshbooks for sponsoring. - -41 -00:17:20,040 --> 00:17:20,600 -Scott Tolinski: Thank you. - -42 -00:17:20,729 --> 00:18:16,800 -Wes Bos: Next question we have here is from TP is it worth to find a remote dev job at the early stage of your career, I have six month internship and one year of software engineering experience. So one and a half year of web developer experience considering the stuff I learned from my seniors and other dev team, I wonder if I will lose the opportunity to learn stuff from my team members. I think we sort of answered this question maybe like a year ago, or someone said, then I think that's true. I think when you are a junior, it's so much easier just to roll your chair over to somebody else's desk, and get a little bit of help and have somebody explain it to you in person. And I definitely think that that is lost, as well as the the whole skill of working remotely. And the whole skill of being good at slack and the good and good at email and being available to your court. These are all things that you need to learn. And I definitely think that it's easier, it's not impossible, but it's much easier to do it when you are in the same office as someone What do you think about that? - -43 -00:18:17,009 --> 00:20:04,890 -Scott Tolinski: Yeah, I totally agree. I mean, I learned so much from my boss and coworker, when I got my first even couple of dev jobs. And it was maybe one of the most important things for my career development to be able to say, Hey, man, I don't know what I'm doing here. Can you look at this. And then, you know, you just roll this chair over and look at it for me, and we could talk about it. And it was just a different experience than, you know, chatting in slack slack chat room, because yeah, somebody can try to solve your problem in a slack chat room, but it's not going to be the same. And you're not going to get that same kind of, I don't know your that same kind of experience. So if you're a junior, and you're really valuing that learning things from the more experienced developers, then I wouldn't hunt for anything remote. Remote stuff for me is like I work remotely because it makes sense for me. But you know, to be entirely honest, if I had a job in the same city that I was living, I could drive to work and go into an office. I love that there's a lot of like glamorizing of remote work and ensure there's, you know, it's really great to be able to go to a coffee shop or my backyard or whatever and work, but at the same time working in an office is sweet for a ton of reasons. So don't feel like you have to work remote just because you see other people working remote. If it's something that makes sense. Like your your dream job is giving you a job offer, but you know, there are two states away and you don't want to move then yeah, maybe that's a cool idea. But I wouldn't just glorify it for being remote itself. And yeah, definitely value that experience you'll gain from the people in your office. All right. Next question is from King Lawrence. Cao belay. Oh, I'm so sorry if I butchered that one king. You did not provide us any spelling notes here. And you pronounciation there's one of those YouTube pronounciation things Kubo eo I think it's kubelet Oh, I'm gonna I'm gonna go on the line Google - -44 -00:20:04,890 --> 00:20:08,360 -Wes Bos: a la Oh, that sounds right. Yep. Yeah, let's let's go with that. - -45 -00:20:08,400 --> 00:21:27,690 -Scott Tolinski: Yep. Hi, I'm listening to syntax for three months now. I find it very useful, especially the sick pics part, I had a question about how to keep myself motivated in coding. Now, we've talked about this a few times on several different episodes. But really, the motivation factor in web development really comes from the same motivation factors that you get from literally everything else, like what is makes you motivated to do anything, typically, it's just generally being excited about something I don't know about you. But like, when I'm really excited about maybe like home automation stuff, the first thing I do is go to YouTube and watch a bunch of videos and buy some things and try them out and get really excited about it. And you know, that propels me to learn the things I don't think about like, Alright, now I'm going to sit down and learn about home automation. So for me, the the big thing is really just finding what's exciting for you, and finding ways to make your work exciting through those things that are exciting to you. Specifically, we talked about using hobbies as side projects to attach excitement to the coding itself. Or even on top of that, like, I am really excited about animations. Before I was with developer, I wanted to be a motion graphics artist. So I spent a lot of time learning and playing around with the animations specifically, just because I love doing it. And that's what gets me excited. So that's my answer is find, find ways to get excited about this stuff. - -46 -00:21:27,780 --> 00:22:20,820 -Wes Bos: Yeah, for me, it's entirely just what I'm excited about what I'm interested in the motivation, I have huge problems with motivation when I'm just not invested in it. And that's probably why I work for myself and do whatever it is that I want. Because I'm mostly interested in learning new things and teaching other people and making money from that. And if you go back to the episode a couple couple episodes ago, when we talked to Harry dry, that was like the perfect example as well. Like, how do you keep yourself motivated? Well, Kanye West is on the phone. And you gotta get this thing working right. Like, I don't think that he would have learned as much if he was just kind of sitting there building something that like a, like a pet keeper app or something that just was totally uninterested to him. I think if you throw yourself into something, maybe try find a way to make money at it or find something that might blow up. That's the sort of the way to do it. - -47 -00:22:20,940 --> 00:22:21,900 -Scott Tolinski: Yeah, totally. - -48 -00:22:21,900 --> 00:22:24,930 -Wes Bos: So sick name King Lawrence. Capello, - -49 -00:22:24,960 --> 00:22:31,380 -Scott Tolinski: I know it's, it's a really cool name. But I think that might be top tier names that we've had on this. These potlucks. - -50 -00:22:31,440 --> 00:22:34,770 -Wes Bos: Yeah, King. What if I named my son King King boss? I - -51 -00:22:34,770 --> 00:22:42,300 -Scott Tolinski: don't know, opportunity. Damn, that would have been cool. That's a cool. That's a really cool. - -52 -00:22:43,950 --> 00:23:30,030 -Wes Bos: Next question we have here is from HUD. He says when Ryan Jones, what's your opinion? Oh, y'all. Okay, I have an accident. What's your opinion on using? using some obscure or at least in my opinion, features of the language such as JavaScript bitwise operator and a production app? So hold on, let me let me do the the bitwise operator real quick. So the JavaScript bitwise operator, most people don't know what this is. So the bitwise operator is a way to sort of invert with a Tilda I personally don't use it because I just myself had to pause and say what does it do again? Because I've certainly used it a few times, but I always forget and we put - -53 -00:23:30,030 --> 00:23:33,720 -Scott Tolinski: it in inverts Yes. Oh, the till they does invert Yes. - -54 -00:23:33,720 --> 00:23:43,410 -Wes Bos: Okay, the till they will invert it and invert Yeah, bit of the upper the bits. So that's, if you have some, some bits you want to invert, these are just - -55 -00:23:43,739 --> 00:23:47,100 -Scott Tolinski: using it as as a as all there was like - -56 -00:23:47,100 --> 00:24:53,040 -Wes Bos: a couple cool tricks I saw. And I've used before, same with the the triple arrows, or the triple right angle bracket, things like that. I don't know, I probably wouldn't use them unless your entire team is on board and knows about them. But whenever I use them, I find myself kicking myself have to come back and Google what they actually do. So it's it's kind of a cool way to do it. And it looks neat. But there's almost always just an easier, more readable way to write that code. Anyways, that wasn't even the entire question. Such as JavaScript bitwise operator production app that dozens of other engineers will maintain and continue to maintain long after you leave the company seems hard to read and Amelie understand which possibility makes it hard to debug and refactor. Yeah, sort of the same thing that we're saying here? Yeah, I probably wouldn't use them. They're not all that well known. They don't read well, like if you see a Tilda or two arrows, you don't immediately know what that is. So I would probably just use something else that's a bit more readable and a bit more referenceable. - -57 -00:24:53,130 --> 00:25:58,380 -Scott Tolinski: Yeah, totally. I'm right there with you. In fact, I had bitwise operators in my code base, just because they were like Alright, here's a quick code saving, you know, snippet that you could toss in to do any number of things. And it may be this is potentially just a tiny little bit more fast or more performant. But and it takes less, you know, characters in your code. And to be honest, I've ripped them all out, because every time I hit them, I was being like, Well, what does this do again? And then if I wanted that same exact technique, I always had to go look up how to do it, because it wasn't something that I was just there for me. So I don't know if your whole team is down with bit wise in like understanding how they affect the bits and what that even means, then, like, go for it. But personally, like you said, exactly, it's it's not they don't read well, they're not easy to parse, unless, of course, you're very experienced with them. So I don't really see any of their perceived benefits to necessarily be benefits enough to make up for the downsides of them. So I have an es lint rule that yells at me if I use them, so I don't use them. - -58 -00:25:58,680 --> 00:28:41,250 -Wes Bos: I'll read the next question. Because it's, it's directed at me. Wes, I keep hearing you talk about working from your Dropbox, do you sync everything up even like your node modules folder, you have me interested in a semi similar workflow. So my opinion on this has actually changed in the last couple of months. So I'll go over it real quick. Putting a JavaScript project in Dropbox is a good way to backup your entire project. And if you accidentally goof something up, then you can always revert it with the Dropbox, the tools, and that's nice, because sometimes you're in between Git commits any accident, delete something, you have to go back and revert it. I don't have two computers. So I've never had the problem of sinking Git repos with Dropbox. I know people can run into a problem with that. Dropbox does not have the ability to exclude folders, they do have some sort of like ability to not sync things, but they don't have the ability to just like get ignore all node modules folder. So I'm not about to go into every node module folder of every project and ignore it. And that doesn't even work. By the way, it removes it from your, your local computer as well. So I've probably done it for 10 years now. And it's been working really well. But in the last couple months, I've been noticing like, Dropbox is hungry for both CPU and memory on my computer. And I have like one of the fastest computers you can buy. And I don't know if something changed in the last couple of releases of Dropbox. But it's it seems like, like the node modules has millions of files. And it seems like it's just real chuggy. And it's making a noticeable difference in how fast I can move around my computer. So I'm actively looking for alternatives also, like I don't really use Dropbox all that much anymore. They seem like they they don't care about technical users all that much anymore. And they're more going towards like, I don't know, different like tools for teams and trying to compete with slack. And it just doesn't seem like a like the tool that it was when I was in university. And it was like this, like online USB drive. And it was amazing. Now they've, they've sort of gone in a different direction. And I don't really enjoy it all that much. So I still use backblaze, which does not have the same issue as Dropbox. So backblaze will backup my entire computer, including all of my node modules, folders, and never ever do I have to worry about backblaze being a hog of memory or CPU and never see it in the top ones. Whereas Dropbox is always chugging along, taking 30% half a gig of memory. So I'm probably in the next six months, I'll probably just get away from Dropbox entirely and go to do something else. I'm not sure what that exactly is. Yeah, if you have any suggestions, make sure you tweet us at syntax FM. - -59 -00:28:41,370 --> 00:28:45,480 -Scott Tolinski: Yeah, I can't believe your Dropbox wasn't chugging long before this. Because that - -60 -00:28:45,510 --> 00:29:12,300 -Wes Bos: never to know me for for doing it. And I was like this works great for me. I love it. I got an amazing doing. Yeah, it's all passive backup, which is your backup should always be passive, if you like are working on something and then you don't do a git commit, and you come back the next day and something happened. It certainly saved my bacon many times over. But it's at a point now I just I just think Dropbox as a company is kind of goofy. - -61 -00:29:12,360 --> 00:30:17,220 -Scott Tolinski: Yeah. Okay. Well, that one question is from Tim Moran, who asked the question that we sort of didn't answer correctly before. So there's your your answer, Tim and Nicolas Angelo is the next question. And Nicholas asks, have you talked about Firefox Developer Edition? It looks like it should be very useful, but I can't quite make the transition. I might there with you, Nick. If I can call you Nick. You know. I don't want to be presumptuous here. The Firefox Developer Edition is awesome. I just did a course on developer tools. And I was just like, and I love Firefox developer tools. I should use these all the time. Firefox Developer Edition is so great. And then like 24 hours later, I find myself just going back to Chrome or brave or not using Firefox, the developer tools are excellent in Firefox. So I would highly recommend checking out Firefox Developer Edition. But at the same time, I don't use it as my default browser. I don't know why, but I definitely recommend checking it out. They're there. They have some really cool new tools. I don't know if you've used it a little while Wes. - -62 -00:30:17,280 --> 00:31:16,320 -Wes Bos: Yeah, I have used it quite a bit. It's not my daily driver, I should be totally up front. Firefox sponsored my CSS grid.io course. So the reason it's free is because they paid me. And I put it out for free. And I used the Firefox dev tools in there, because the grid dev tools in and all of the layout tools, the Flexbox tools, they're all much better than Chrome. But I still use Chrome day to day. And like he said, I don't know, I don't know why I did imported all my history. I got my LastPass setup. So those aren't like really issues. And I just kind of keep going back to Chrome. And I think it's the same reason why like, I still use the Mac keyboard and like, I still find myself wanting to go back to the Magic Mouse. I'm like, it's just comfortable. And I should almost just like uninstalling, because like there's no excuse for me not to actually be using every even like from a privacy standpoint, it seems to be much better. It's just I don't know why. - -63 -00:31:16,320 --> 00:31:17,190 -Unknown: Yeah. - -64 -00:31:17,520 --> 00:32:30,360 -Scott Tolinski: Yeah, I know, I'm right there with you it. I like the way it looks better. I like the sort of vibe of it better. I like everything better, and I just don't use it. I don't know if you've used the font tools in there. But the font tools are Yeah, I'm just being able to change the font line height with all those dragging Draggy, you know, got little sliders to change your fonts, you can see all of the fonts tag for any given website, it tells you exactly what the fonts are, how they're used. And it makes working with typography really excellent. And there's another clip path tool that I briefly talked about in the in the series that I just did. And it's if you've ever used any sort of video editing or Photoshop where you make a mask, and you can like click and drag and move the mask around to mask something, you have that ability in Firefox dev tools. So if you're using clip path at all, you can shape and create your clip path SVG directly in Firefox, or I guess it's just a clip path path string. And you can shape those directly in Firefox dev tools, and it is awesome. It is so cool. So if you're the type of person who prefers that visual sort of visual editor sort of style of things, I would definitely recommend checking out it could be could be your new browser, if you could commit to it. Like we both are having trouble committing to it, - -65 -00:32:30,390 --> 00:32:51,690 -Wes Bos: why we should do one week with Firefox. So and then do like a hasty treat on and like what our issues were and what we liked and what we didn't like, because that will like give us like a full week. You have to use it the entire week you have to use on your phone as well. And then we can we can do like a hazy treat explaining why or why not. We decided to continue going. - -66 -00:32:51,720 --> 00:32:53,760 -Scott Tolinski: Let's add it to the list. And if you want to see - -67 -00:32:53,940 --> 00:32:56,040 -Wes Bos: a Saturday, I like it. But yeah, let's - -68 -00:32:56,040 --> 00:32:56,670 -Scott Tolinski: do it. - -69 -00:32:58,440 --> 00:33:57,240 -Wes Bos: Next question from Tom G. Hey, guys, just wondering what your opinion of CSS naming convention methodologies is such as Ben, thanks, I'm a big fan of them. I think some of the criticism of them is that is very verbose in your code, and you have very long HTML things. And I'm I didn't really find that all to be issue. The problems that bem solves is the fact that you can't really have scoped CSS, things like that. So big fan of bem, I don't really use it all that often because I'm almost entirely using some sort of a CSS in j. s, and a lot of my projects, and what that allows me to do is just to scope them with like a styled component or something like that. So I don't know, I think that bem will probably fizzle out in the next couple years as we start to see other other possible solutions pop up a lot of people using CSS and j. s, hopefully will have something coming to CSS that will just be native for for scoping. So we'll start to see that what do you think about that? Yeah, I - -70 -00:33:57,240 --> 00:34:42,960 -Scott Tolinski: think that's pretty pretty on. You know, I used them anytime I was doing CSS. And I guess the thing that's important about them is really just understanding how to separate your components on into could be blocks, elements, modifiers, those kind of things, how to look at your code and think about your code. And that sort of structure, to me is way more valuable than the actual syntax of bem itself. I never really loved the syntax of bem and I used a lot of those same core methodologies in my styled components set up. So you know, I think bem is great, I'd have no idea what's going to replace it. But I think what's important is just having like a defined structure like that within your CSS general and understanding the scope and components of how you're using that CSS. - -71 -00:34:43,440 --> 00:35:02,310 -Wes Bos: Yeah, one of one of my favorite things like you said is that it like forces you into some sort of structure. And I love when when things make me have structure I love when people give me the names of the folders I should use I love when people tell me what my naming convention should be, you know, like Then you just follow that you don't have to think about it. - -72 -00:35:02,670 --> 00:35:08,900 -Scott Tolinski: Yeah, definitely. Cool. Next question from suave G or is this five g suave q? - -73 -00:35:09,440 --> 00:35:10,440 -Wes Bos: suave a que - -74 -00:35:10,460 --> 00:35:14,460 -Scott Tolinski: suave a que suave a que Yeah, I thought this was Vic, Slavic. - -75 -00:35:14,480 --> 00:35:15,920 -Wes Bos: He's He's from Poland. - -76 -00:35:16,080 --> 00:36:00,660 -Scott Tolinski: Okay, I'm so sorry. I am earning my own people's names. Hey, great podcast. I'm listening in Warsaw, Poland, Europe. Oh, thank you for the clarification there. I appreciate it. I would love that. My, my hometown. I guess I am I'm Polish for those of you don't know, little bit tiny little bit. I would like to refer to the question in Episode 140. About front end development possibly dying? I don't feel satisfied with the answer. So maybe I could state the question differently with machine learning being developed rapidly in the last few years? Will the web change causing reduction of front end jobs? Maybe we will just train smart algorithms and develop them instead. What do you think? Pick? - -77 -00:36:00,660 --> 00:36:01,320 -Wes Bos: A Yeah, - -78 -00:36:01,320 --> 00:37:26,400 -Scott Tolinski: I you know, okay, so I, there's so many things you can say about this. But at the end of the day, robots are probably going to take most people's jobs. So understanding how that change will happen is maybe what you want to think about. So it really depends like how far in the future you're talking about. But I don't think web developer or developer jobs are in danger anytime soon. Because there's always going to need to be people connecting things to connecting things. But one of the links they gave us here is how to train AI to convert your design mockups to HTML and CSS. Cool. Let me know when you can have an AI that will take design mockups and build a level up tutorials, because those kinds of systems are endlessly more complex. And so will robots or AI take over some of the basic web jobs? Like here's an HTML page, maybe Sure, who knows. But you know, there's services like Wix and Squarespace and whatever that exists already, right now that do much of that work for you, and they haven't killed the job. So we will see what the future may hold. Who knows how incredibly smart and powerful our robot overlords will be when that inevitably happens. But you know, honestly, we just goes along with the other one, we can't predict. would I not take a career in web development? Because the robots are gonna take it? No, you could say that about any any career. Yeah, - -79 -00:37:26,460 --> 00:39:31,440 -Wes Bos: yeah, this is always people like scared of like, oh, like, that's not safe, because robots are gonna take it or that's not safe, because something is going to change about it. And it might button you sort of just have to roll with it. If that happens, sort of my my answer to this is the easiest stuff gets automated. So yes, the easiest stuff to do right now, taking a very simple design and turning that into HTML. And then maybe writing a bit of little CSS to that, for sure. That'll get automated that will get that's like, so simple, that it should be automated it the tool should get easier for us to do that sort of stuff. And then I think the hard stuff gets easy. Building a real time graph qL based site that instantaneously updates all around that stuff has gotten so much easier in the past five years in scaling, auto scaling, like that's AI right there. It used to be like, you'd have to like buy servers and manage them and plug in and rack mount them and things like that. And now you can just auto scale up by paying a couple bucks a month to one of these big cloud providers. So hard stuff gets easy, and then we invent new hard stuff. So we say okay, well, now that that's easy, maybe we could go ahead and do something more, maybe we can push it a little bit further. Maybe we can make self driving cars now that this other stuff is a little bit easier. So honestly, I think the world keeps on turning or the robots are going to take over on one of the two. I don't think it's going to be like an oil people always say like, we're like two years out from robots doing things I don't think it's gonna be that crazy. Like, I've had a robot vacuum for four or five years now. And it still is the robot. You can't go over top of my vent is sucked up a USB cord the other day, like honestly, come on, we're, it's gonna be a little bit longer before this, this type of stuff all all sudden, like a robot comes out and starts building tutorial courses or something like that. Yeah, at some point, it might, but I don't know. Maybe I'll just start making how to train your robot courses. And I'll be fine. - -80 -00:39:31,590 --> 00:39:56,670 -Scott Tolinski: Exactly. You always want to be uh, you know, you know, a couple steps ahead of that. But who knows? Like it's like, again, right? You said once the easy stuff gets taken care of, we can spend our time working on some of the harder stuff and the harder stuff gets easier. So like, who knows, maybe the applications that we're developing in the future are just stuff that lives in your brain or in your eye or whatever is powering some thing who knows we're soothsayers here. We're going to just take it as it goes. - -81 -00:39:57,209 --> 00:40:17,630 -Wes Bos: Imagine we didn't have to write another router and then We could start building like a robot chainsaw or something like that. Like we're all here trying to configure a router and upgraded every three months. Yep. And then once that gets off, please AI come fix that for me. Let me work on something else. So I can make a chainsaw robot or something like that. - -82 -00:40:17,760 --> 00:42:26,900 -Scott Tolinski: I don't know why you went with chainsaw robot that seems very dangerous to me. I am a little terrified of a chainsaw robot, I would prefer unless it's on battlebots. Of course, I would prefer Yes. Most of my robots do not have chainsaws. So next question is from narrow. How do you deal with anxiety and fear during interviews that might hinder your ability to give the best impression of yourself or solve coding challenges? Now my answer to this is the same answer I have for lots of things, which is practice, we are talking about practice, you just want to put in the time and the hours. You want to put in the time to practice the stuff. Okay, so this can come from multi layers if you want to, if you get nervous or scared during interviews, talking to people answering the questions, do a lot of interviews, do a lot of interviews for jobs that you don't even want, just get that interview, get in there. Talk to people practice it. If you cannot get an interview to practice with seriously this, this might seem like a little you know, play time, but you know, have a friend or your partner, whoever, sit down at the chair with you and pretend to interview you, because there's no substitution for practice of any kind, shape or form. So practice it, practice it, practice it, coding challenges, find out what kind of stuff they're most likely going to be asking you practice it. If you're at a react job, Google react, interview, coding challenges, practice it, coding challenges, questions, practice it, do all that stuff, get as much practice in as possible when I was terrified of doing one of my talks, because I don't give a ton of talks. But when I do, I really like to make sure that I'm well practiced. I gave my talk for my dogs, my toddler, my wife. Anyway, I gave that talk over and over again. And then when I got up on stage, it was easy, just because of practice. So the same thing goes with interviews, find though, find ways to get your reps in. And if I'm a little rusty from job interviews, I will go on a couple job interviews just for fun. I interviewed at a couple of unnamed companies here that I definitely didn't want the jobs after I learned a little bit more. But it was good to just go out there and meet some people and talk web dev for a little bit and get that practice in. - -83 -00:42:27,090 --> 00:43:23,400 -Wes Bos: Yeah, I think about this a lot with I've got three kids now. And I want them to grow up not being afraid of these types of things. And I realized there's different types of personalities. And anxiety is a real problem that can can fester in in people. But I think like if one of my kids is scared of something, the solution is not just to keep them away from that the solution is to slowly introduce them to something and to practice and to just make it very apparent to them and very front of mine. And we've seen it with with many things, including just like bugs in our backyard. They love bugs in our backyard right now. Why not? Because we like run away every time that there's a bug. It's because we we take a look at it, we play with it, and we try to go back to it. It was scary next last time. Let's try it again this time. So like Scott says just practice do it a lot. It will get easier. There's honestly no other cheats or things like that around it. - -84 -00:43:23,480 --> 00:43:29,010 -Scott Tolinski: Yeah. Do you know what that that's called? You're doing a psychological practice without even realizing it really, - -85 -00:43:29,250 --> 00:43:29,880 -Wes Bos: what's what's that called - -86 -00:43:30,120 --> 00:44:54,390 -Scott Tolinski: exposure therapy, where you you, basically you take somebody who's scared of something, and you expose them to it in a safe environment in like in small amounts. Like if they're terrified of snakes, you might start by, I don't even know, I don't want to speak on actual psychologists behalf here, because that would make my wife pretty upset. But you know, you expose them to it a little bit by little bit looks like for instance, you know, my my coordinator, she accidentally screamed when she saw a spider in the house. And because of that Landon was like all spiders, I'm afraid of spiders. So then, you know, a couple days ago, we went on the rock wall, and we looked at spider webs. And we talked about the webs and we talked about the spiders and we said okay, here's the spider. And then if I ever have a little spider, uh, you know, I let it run in my hand or something. And I, I try to show it to him in because it's like, we just don't want to instill that these things are scary, you know, and it wasn't an accident that he, you know, perceived them to be scary in the first place. So we want to try to correct that through a little bit of positive exposure, just like you said, cool. So now let's get into our last sponsor, which is a longtime sponsor here at syntax. And this is one of those sponsors that's going to take things that are scary for you like bugs, not spiders, but bugs, and it's going to help you solve those bugs, hopefully in a non violent way. You're going to take those bugs, you're going to learn them outside and you're gonna want to scamper away. You know, that's what it's all about. - -87 -00:44:54,390 --> 00:44:57,300 -Wes Bos: It's like good. That's one of your best transitions yet. - -88 -00:44:57,360 --> 00:46:14,370 -Scott Tolinski: Oh, thank you. You know I'm you know, hugs Yes. Absolutely. So essentially is the bug tracking and error and handling and exception tracking tool that is going to take your application to the next level. So head on over to century.io. Use the coupon code to use the coupon code tasty treat and get two months for free. With century you get access to every single bug that's taking place on your site, you can keep track of them, you can attach them to GitHub issues, you can see the operating system, you can see the browser you can see so much awesome information about these bugs. And this is a service that both West and I have used ourselves, oftentimes you'll get people who messaged us about our sponsor reads and say, guys, I can't tell what's your personal opinion and what the sponsor read. And century is one of the perfect examples where this is something that we both used for so long, like my personal opinions about this thing are the same as what I'm telling you right now in this ad. Like a big big fan of this platform. So sentry.io coupon code code, tasty treat, and you will get two months for free. Check it out. All right, so now is the part of the show where we'd like to get into our sick picks things that we pick that are sick stuff that we like could be anything and we share it with you so West, what is your sick pick? - -89 -00:46:14,460 --> 00:46:24,180 -Wes Bos: My sick pick is I were laughing today when we first started I'm like, Can you hear me? Okay, cuz I'm downloading a lot of Arthur. And sounds like Oh, I love Arthur. - -90 -00:46:24,180 --> 00:46:25,260 -Scott Tolinski: Yeah, doesn't love art. - -91 -00:46:25,290 --> 00:46:28,680 -Wes Bos: So Arthur is what is he? aardvark? - -92 -00:46:28,680 --> 00:46:29,400 -Scott Tolinski: He's an aardvark. Yeah. - -93 -00:46:29,400 --> 00:47:42,990 -Wes Bos: Arthur is this like kids show that I watched growing up like crazy. I love it. And it's still on and they're still making much higher quality episodes. Now. I think they're on episode 18. Which would make sense because 18 years ago, I was probably watching it myself. And they have a bunch of them, I think like 40 episodes of them on what's the CBC kids youtube channel. So CBC is the Canadian Broadcasting Corporation. It's like our PBS government run. Yeah, it's kinda like PBS, but in Canada, and their YouTube channel has tons of really good episodes on it. And so I went on there right now, and I use this tool called YouTube DL, you can brew install YouTube DL, and you can just point it at entire playlist of videos, and go and download them all. And I use that because then I can throw them on the iPad, or I can throw them on the TV. And then if you're if you're without internet or something like that or not, you're not using up all the bandwidth. So check it out. CVC kids on YouTube specifically, they have an Arthur if you just Google and YouTube CBC kids, Arthur, you'll you'll find the entire playlist there and enjoy I love watching with my kids one of my favorite shows. Yeah, - -94 -00:47:42,990 --> 00:48:01,830 -Scott Tolinski: I'm I'm very I the other day, I was like Courtney, we maybe we should put on Arthur and she's like, I think Arthur is like he's not old enough for Arthur yet, which is a bummer because I just really wanted to put on some Arthur. And so now I'm gonna be really excited. Because I still love that show. When I was a kid. I loved Arthur. So I'm, I'm happy that this is your sixth pick. My sixth pick is in a whole nother realm here. - -95 -00:48:01,830 --> 00:48:03,360 -Unknown: Okay, - -96 -00:48:03,360 --> 00:48:06,930 -Scott Tolinski: speaking of eating bugs, though, don't aardvarks eat bugs? I don't know. That's Uh, yeah. - -97 -00:48:06,930 --> 00:48:09,930 -Unknown: I would imagine or anteaters is an anteater. Yeah, - -98 -00:48:09,930 --> 00:48:11,040 -Scott Tolinski: yeah. Sure - -99 -00:48:11,040 --> 00:48:13,440 -Wes Bos: are VOXI bugs. What else would they? Yeah, you're - -100 -00:48:13,440 --> 00:48:46,680 -Scott Tolinski: right. I was just imagining in any year when I was saying that. So my sick pick is going to be the wise sense pack. Now we've talked about wise cams, w y, z on the site before on this podcast before we're both big fans, we have them. I use them for all sorts of stuff I have all over the place at one point in the back yard, front yard, all sorts of stuff. Now, Weiss has recently come out with something called wise cents. Now wise cents is a little package of sensors. And they are super cheap. It looks like the wise site might be having some trouble right now. So I'm not getting 20 - -101 -00:48:46,680 --> 00:48:51,120 -Wes Bos: bucks, 20 bucks to contact sensors and emotion sensor and a bridge - -102 -00:48:51,150 --> 00:49:31,680 -Scott Tolinski: to context sensors, motion sensor and a bridge. And for that price, like these things are so awesome. I use the context sensors and all of my fences. I have them on my garage. So I know if my garage is open. And they'll wise recently added Google Home integration to their cameras. And I'm really excited for when they added to the sensors because they they I know that's on their user forum saying it's coming very quickly. So I'm very excited for that. Because then you can trigger actions and do all sorts of interesting things with the y's sensors. And yeah, I use them for all sorts of stuff. So check these things out. They are really cheap. And they are microscopic. They're tiny. They don't require yeah - -103 -00:49:31,680 --> 00:49:33,390 -Wes Bos: be much smaller than I thought, - -104 -00:49:33,420 --> 00:49:44,280 -Scott Tolinski: oh my god. Yeah. When the little box came, I was like how they fit vor things in this box. And then you pull them out and you're like, holy cow, these things are small. So I'm big fan of these. If for those of you who are into Smart Home stuff, - -105 -00:49:44,460 --> 00:49:55,140 -Wes Bos: you don't really need a bridge. All you do need a bridge but because they're like they drive on coin cells, which is great. They don't the run power to them, but they give you this little bridge that plugs into the back of one of your cameras. - -106 -00:49:55,410 --> 00:49:57,540 -Scott Tolinski: Yes, you do need in that era. for it to work. - -107 -00:49:57,570 --> 00:50:35,640 -Wes Bos: Yeah, you need a camera, but it's cool because then you can actually actually detect real motion because the current motion on the camera is based on frame comparison. And then this is real motion or like I have put one on my garage door. And anytime the garage door opens, I start recording, you can put them on your mailbox so you can get an alert when someone like your mailbox is open. So you know there's mail this whole company wise it's wy Zed E. They're just rolling out I actually got a couple a message from Tony who listens to podcasts at works there as a developer night which is super cool just like the one of the best companies ever if they don't have like a monthly fee for using the camera like - -108 -00:50:35,640 --> 00:50:37,380 -Scott Tolinski: hub you don't have to buy a hub - -109 -00:50:37,650 --> 00:50:45,960 -Wes Bos: all the stuff yeah they've got a bulbs now I haven't tried the bulbs yet because of I'm not a big fan of like bulbs when the switch gets turned off the ball doesn't work there's - -110 -00:50:46,080 --> 00:50:52,230 -Scott Tolinski: a lot I have I have some of those the what's it called bulbs there's some big issues that we need to like sort of have answers to - -111 -00:50:52,470 --> 00:50:55,020 -Wes Bos: you've had the of the wise bulbs or the Philips we - -112 -00:50:55,020 --> 00:51:14,160 -Scott Tolinski: have the Philips use ones but like you know yeah, I'm not going to buy it via Philips outlets or switches because they're proprietary whatever you know, I want I don't know that that whole switch everything answer none of that's been solved yet. So I'm waiting for that to be solved but that now the interesting problem - -113 -00:51:14,160 --> 00:51:21,750 -Wes Bos: yeah you almost have to like board up your old light switch keep that power on all the time and then get like a Wi Fi light switch. - -114 -00:51:21,780 --> 00:51:23,070 -Scott Tolinski: Yeah, right exactly. - -115 -00:51:23,100 --> 00:51:27,720 -Wes Bos: That will but then yeah, that's that's like rewire your entire house. There's - -116 -00:51:27,720 --> 00:51:29,250 -Unknown: no good answers. Yeah, - -117 -00:51:29,370 --> 00:51:50,370 -Wes Bos: if I were to ever build a house I would put a hotline in every junction box as well so that you can do this sort of thing, but I don't know I think that the lights which is probably a better a better go if you're doing bulbs and then you just use a cheap LED bulb. So we're pretty nifty I love talking about this stuff. Maybe we should do another like smart home on so down. So - -118 -00:51:50,370 --> 00:51:58,770 -Scott Tolinski: right now my home automation and smart home life has changed substantially since the last episode. So yeah, yeah. I've been doing a lot of research and learn a lot of stuff. - -119 -00:51:58,800 --> 00:52:03,720 -Wes Bos: Yeah, pretty cool stuff. There's rumors that there's going to be an outdoor camera coming pretty soon. Well, there's - -120 -00:52:03,720 --> 00:52:09,150 -Scott Tolinski: a countdown clock on wise calm that says in 22 hours a new wise cam will be coming. - -121 -00:52:09,629 --> 00:52:11,100 -Wes Bos: New wise cam feature. - -122 -00:52:11,160 --> 00:52:22,950 -Scott Tolinski: Oh feature. Oh, man. Yeah, reading reading comprehension. Now my strong is, I don't know, what could it be? Because they already have Google integration. Oh, no. We're gonna find out. Yeah, - -123 -00:52:23,100 --> 00:52:53,250 -Wes Bos: if you want to, like be in the know, of this stuff. There's a there's a really good Facebook group called wise labs, beta testers, you can apply to get in. And there's just just hackers. Everybody's a hacker inside that group. And the employees are also in that group. There's like one guy who, who put a new like wide angle lens on his. He like opened it up and figured out that they're just using like off the shelf lenses that you can just buy on Amazon. And yeah, so many cool things. I love this company so much. - -124 -00:52:53,700 --> 00:53:15,030 -Scott Tolinski: Yeah. Awesome. Cool. Well, let's get into our shameless plugs here. Shameless plugs is the section of the show where we talk about stuff that we sell Western, I both create web development courses, where we teach you web development topics. And this is the part of the episode that we get a little bit of Sally and we try to sell you some stuff or just talk about the things that we're working on. Yeah, I'm - -125 -00:53:15,030 --> 00:53:37,110 -Wes Bos: gonna shamelessly plug my CSS Grid course it's totally free. At CSS grid.io. You can learn all that is to know about CSS Grid, it was sponsored by Firefox, which is why it's free. And we do use the Firefox Dev Tools all throughout that one. So if you want to like maybe get comfortable with the Firefox dev tools, that would be a good course to go through as well. Nice. - -126 -00:53:37,140 --> 00:54:28,740 -Scott Tolinski: I have a new course coming out today. When you're listening to this, it might not be up by the time you're listening this but this is this episode will be released on July 31. And if it's not July 31, in this episodes out, then it's not going to be out today. But this course will be out July 31. And it's going to be e commerce with Gatsby. So if you are looking to sell stuff with a static site generator like Gatsby, make your own little Gatsby store everybody who's ever used the Gatsby store has been like, wow, this thing is slick. If you want to be able to build something like that, you want to head over to level up tutorials.com Ford slash pro sign up for the year and save 25%. And also this month or last month, we came out with a course called dev tools and debugging, which dives into every single tab and feature in Chrome dev tools to the greatest extent. And we talked about how to solve very common bugs using dev tools. So check it out. - -127 -00:54:28,830 --> 00:54:37,890 -Wes Bos: Sweet. I think that's it for today. Thanks for tuning in. Thanks everyone who submitted a potluck question. Hopefully you enjoyed it, and we'll catch you next week. Please - -128 -00:54:39,840 --> 00:54:49,590 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax167.srt b/transcripts/Syntax167.srt deleted file mode 100644 index 917a20f17..000000000 --- a/transcripts/Syntax167.srt +++ /dev/null @@ -1,140 +0,0 @@ -1 -00:00:00,359 --> 00:00:00,870 -Scott Tolinski: Monday, - -2 -00:00:00,899 --> 00:00:04,009 -Unknown: Monday Monday open wide dev fans - -3 -00:00:04,009 --> 00:00:19,980 -yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA - -4 -00:00:20,609 --> 00:00:21,660 -and Scott Taylor. - -5 -00:00:25,950 --> 00:00:57,330 -Scott Tolinski: Oh, come to syntax and this tasty treat. We're going to be talking about VS code. Again, we love VS code so much. This is part three of our VS code love series, where we're just talking about all the things we love about VS code. In this episode, we're gonna be getting into things, to learn a little bit about how to get around VS code quicker and how to be a little bit more efficient. Some keyboard commands some snippet stuff, and I have an extension here I wanted to talk about. My name is Scott winsky. I'm a full stack developer from Denver, Colorado, and with me, as always, is West boss. - -6 -00:00:57,390 --> 00:00:59,190 -Wes Bos: Hey, everybody, good to be here. - -7 -00:00:59,250 --> 00:02:22,860 -Scott Tolinski: It is good to be here. It's good to be here, talking about VS code, because that's where I want to be in life of VS code is one of my favorite things. And I talk to people about it all the time who don't want to hear about it. So hopefully, every single one of you wants to hear about it, because that's why we like talking about it. So this episode is sponsored by sentry@sentry.io, which is one of our favorite sponsors over here at syntaxin century is the service that allows you to track and find all of your errors and exceptions. Now one of the coolest things about Sentry is all of the things that it integrates with. Now, if you ever used anything in web development, it probably integrates just fine with Sentry, which is one of the key selling points is that, hey, you know you got enough stuff to worry about to learn between languages and frameworks and whatever, when It'd be great if one of these said tools will just work with all of them with no fuss. And that's where Sentry comes in. It keeps track of all your errors and exceptions and it works with basically everything you could possibly imagine. So check it out@sentry.io use the coupon code tastytrade, all lowercase all one word and get two months for free. And find out why so many companies and developers love and use century including Wes and myself. So let's get started here talking a little bit about VS code. Let's talk about some things to learn maybe ways to be a little bit more efficient or have a little bit more fun inside of VS code while you're using it. Do you want to kick it off? - -8 -00:02:23,030 --> 00:03:21,840 -Wes Bos: I think one of the biggest things that I see people not taking advantage of is just moving your cursor quickly around the editor without having to touch your mouse. So if there's one thing that you just want to sit down and get really good at it's jumping by word, and jumping by line, jumping to the top of file, eo F and to F top of file and to file, these things will greatly improve the speed at which you work. So if you just have some text or maybe a paragraph tag, being able to move your cursor word by word, or being able to move your cursor and select word by word, being able to select to the end of the line being able to select to the end of a wrapped line. There's all kinds of stuff that you can get good at. And the keyboard shortcuts are different for everybody. What I recommend doing, a lot of people also don't know this, they just like Google around forever. But if you just open up your command palette and type keyboard shortcuts, you'll be able to just search for like, I don't know, jump, - -9 -00:03:21,989 --> 00:03:24,990 -Scott Tolinski: you want to tell the audience how to open up their command palette. - -10 -00:03:25,170 --> 00:04:00,330 -Wes Bos: Yeah, it's Command Shift p or Ctrl, Shift p on Windows. And that will give you access to pretty much every action in the entire editor from there. And there, you can just type keyboard shortcuts. And it'll give you a huge list of all the different keyboard shortcuts and you can filter that list for jump by word and select by word. I think that's probably something that you should invest your time in. And if you find yourself working on some on like something and you reach for the mouse, just stop, it's going to take a minute or two to to get good at it. But do that four or five times you'll get used to it and then you're good for the rest of your life. - -11 -00:04:00,450 --> 00:05:52,980 -Scott Tolinski: Yeah, yeah, it definitely it saves you so much time, it means you did talk about the command palette just there. But the command palette is another one of those things that I think people often neglect, because maybe they just don't know how useful it is. So if you do that little Command Shift p Ctrl. Shift p on Windows, I believe windows people tweet us out if that's not how you do it. But it basically gives you every single thing you could possibly imagine like, why would you go to the little menu up top and select you know, have to go through two little drop downs things just to change your theme when you could do Command Shift p t, H and then here preferences, color theme. All right, there you go. So that is so much faster than having to click around and try to find things any other way. I use the command palette for basically everything that I want to do in VS code, sort lines or look at Git history. Like that's actually a big one too, right? You're on a given file. You have a git history package installed that we talked about in one of the last episodes. You just type in Git history view File History. There we go. Now I'm looking at the files history. And I didn't even have to touch my keyboard and I type like three things. So I use the command palette, absolutely non stop. And this is one of those things that you do does take some muscle memory to get used to. But again, just like what you were talking about was not having to reach for the mouse to go do something. It is a huge time saver. I know people always cringe at my tutorial series, when I use the mouse for anything, once you get good at, you know, not gi T. But once you get good at? Yes, yes, yes, at navigating with the keyboard, it really just opens up a lot of doors and makes the experience that much faster and nicer. And it already is pretty awesome and nice. By the way, did you know that there's a command palette in Chrome Dev Tools, I use this myself quite a bit. And I think a large part of our audience might not be aware of that - -12 -00:05:53,040 --> 00:06:18,570 -Wes Bos: you can take a screenshot of a specific element from the dev tools, I don't know of any other way to do it. So yeah, the Chrome Dev Tools, command palette is amazing, you're starting to see like lots of apps do the same with them. Google Sheets, like their Excel competitor now has a command palette and send among which is great, because you shouldn't have to hunt around for a button to click, you shouldn't have a keyboard shortcut, and then just kind of fuzzy match type what you're trying to do. - -13 -00:06:19,080 --> 00:06:29,640 -Scott Tolinski: Yeah, so I, you know, once you once your fingers get used to the command palette, that's a skill that's going to permeate into other areas, such as your Chrome dev tools or whatever. - -14 -00:06:29,970 --> 00:06:43,020 -Wes Bos: Next one, I'm not sure if you put this one here or not. But it's the Find and Replace in files. Yes, I did. If you have a function that's named, get courses, how would you replace that in your entire project - -15 -00:06:43,200 --> 00:06:44,400 -Scott Tolinski: in my entire project? - -16 -00:06:44,850 --> 00:06:47,460 -Wes Bos: Yeah, or entire file, maybe, maybe say both? - -17 -00:06:47,460 --> 00:08:21,450 -Scott Tolinski: Well, for entire file, I would just do Command F. And then I would just look for that, that method name directly or a function name and do a Find and Replace. If I was looking at my entire project, I would do Command Shift F or B Ctrl, Shift F and I would do the whole thing I have, since I like don't, you know, work on I work on pretty much one project I have for this project files to exclude setup, so that it's not looking at any of the files that I don't want it to look at is only looking at essentially my API or UI files. Yeah. And that's pretty much how I do it, there's a couple of buttons in here that you'll want to make sure are checked if you are wanting to match only that specific function. Like for instance, you can match case is one of the buttons so like it's not going to match a lowercase a to an uppercase a and then there's match whole word if you're looking for to match the entire word itself, and not be like a partial little bit of a word to match. So that's how I do it. That said, it's a little bit different. Some of these things I uncheck, like for instance, match case, I'll leave match case unchecked. And I'll use the Replace where you replace the like if you're replacing a lowercase a with an uppercase a Oh, yeah, that same art about Yeah, I needed to change the word playlist to series throughout the course of all level up tutorials, because I'm no longer calling them playlist I'm calling them series. And so for me, it was a command f playlist for series across the entire site. And it worked pretty darn well. - -18 -00:08:21,450 --> 00:09:06,770 -Wes Bos: I use if you right click on like a function name. And you can click Rename symbol. No, yeah, really smart about it being a function. And I've certainly gotten bitten before, like if I've got a function called double. And then I have another function called Double Trouble. If I just select the word double, it will actually rename the function that also is double trouble. So using rename symbol, this is I often will just like Command F, until I have all of the ones I want. Because I can see everything I need. It's not a big deal. But if there is multiple files, or there is a huge file, right click Rename symbol is a little safer, because it will it knows what a function or a selector or something like that is in your actual application. - -19 -00:09:06,870 --> 00:10:33,750 -Scott Tolinski: Yeah, I have used that before. But I find myself going to find and replace more often because I feel like I have more control over it. But that's maybe not actually the case. And maybe I'm just ignorant as to using. Next one here we have is a move and copy lines. Now I use this all the time when you have one line of code, or even a selection of lines of code, right, let's say you have maybe like five or six lines and you want to move it a lot of PL what they'll do is they'll do command x and they'll cut it and then they'll do Command C and copy and paste it or Command V and paste it like six lines down or something like that. Or if you're not moving it to another file almost every single time what I do is I select my lines of code, I'll hold the Option key and then hit up or down on my keyboard and that moves that whole selection up or down in your lines of code I use this time Non Stop. And if you need to duplicate a line of code, which you'll do, like maybe you're working on the Select list, you wrote one option, you want several more options. If you hold shift in option, then you hit up or down, and it actually creates a copy on the next line rather than moving one. So I use these two shortcuts, I use the non stop to control maybe not even just like the layout or organization of a file, but also maybe the content sometimes this is a big one for me, I use it non stop. And I always cringe when I see people cutting and then pasting five or six lines. Yeah, - -20 -00:10:33,770 --> 00:11:11,070 -Wes Bos: me too. It's, it's kind of dangerous. Because like I, I have like a, like a clipboard history app that I run, if in case I accidentally copy over something that was important, but you should be I call this line bubbling, you should be just like moving your lines up and down, without having to remove them. Or if you if you select an entire function, you should be able to bubble that thing up and down and see where it's going. So yeah, absolutely should be using that one. super helpful. Yeah. Next little section, we have here keyboard commands, I will hide the sidebar with the buttons on it. I don't even know what you call that. What's that called - -21 -00:11:11,220 --> 00:11:23,790 -Scott Tolinski: the browser, I don't know, you hit command B or control B to show and hide it. So I show and hide it all the time, I think it is it may you might just called the sidebar, it is just called the sidebar. - -22 -00:11:24,000 --> 00:11:44,760 -Wes Bos: Okay, that's I hide that as well as the extensions or the the file system, all of that I hide it all, because I just want a minimal coding experience. And then when you do need to open it up, just hitting, I hit Command Shift X to open extensions, Command Shift E to open the Explorer, which is your files. There's a couple other ones - -23 -00:11:44,790 --> 00:12:00,990 -Scott Tolinski: Command Shift D for debug x for extensions, F for search, II for Explorer. And then yeah, it is Ctrl Shift g for version control. It might be Command G, I don't know why mine is Ctrl Shift g for version control. But - -24 -00:12:00,990 --> 00:12:19,230 -Wes Bos: it is Josh f g for me as well. And that's actually helpful view because it will show you in your project, what files have changed and been deleted. So if you ever just want a quick overview of what's going on, that's better than just doing a git status, because then you can click through to the actual files that have been changed. So - -25 -00:12:19,260 --> 00:12:35,940 -Scott Tolinski: pretty. I use that all the time myself. Actually, I think though the the sidebar, it's not actually the sidebar. The sidebar is the area that all that stuff lives in, in the activity bar. Is that the one you're talking about? Yeah, that's one of the bars the one with the icons. Yeah, I had that as well. I - -26 -00:12:35,940 --> 00:12:52,080 -Wes Bos: go ahead and hide that. Because there's a crutch, because you actually click on it. And I'm half joking. It's fine. If you want to click on it, go for it. But I found that when I actually hit it myself, I've forced myself to get better at finding out the shortcuts total for this things. - -27 -00:12:52,199 --> 00:13:55,500 -Scott Tolinski: Yeah, absolutely. right there with you. Next one is going to be actually this falls under tips, not really keyboard commands. But one of the tips I had was to check out the insiders build I know Wes, you do not run the insiders build I run the insiders build. If you just Google VS code insiders build, it's going to give you an option to download that this one basically gets an update every single day. And it occasionally has some bugs and problems that things don't work quite as expected. So if you're the type of person like me, who really relishes in having a new thing every day, even though you don't notice it ever, it's just a little dopamine hit I like to get from downloading a new update for VS code, even though it's not giving me anything. If you're that type of person. You want these features early, then check out the insiders build just know it's not always perfect. I have to reload it. I feel like more than I ever had to reload the non insiders build. That said, I have been using the insiders build for I don't know, a couple years now. And I haven't really needed to go back to the other one for any particular reason. So I'm a fan. Check it out. - -28 -00:13:55,740 --> 00:14:08,250 -Wes Bos: Next we just have use of snippets. What are some of your favorite snippets? I know I have like a react snippet library that I have. But I also find myself just stopping and making snippets for things that I do over and over again. What about you? - -29 -00:14:08,430 --> 00:15:58,620 -Scott Tolinski: Yeah, I use a few I use a JavaScript. He has six code snippets. I use HTML snippets. I use es seven react Redux graph qL, React Native snippets. And let's see a use view VS code snippets. And I think I have one for MongoDB MongoDB. I've made my own snippet library that I used for Apollo and react. However, I don't have hooks support in there. So I haven't really been using it, which I need to add back in there. I'm the maintainer of that package. So if you'd like to commit some hooks to that package, just go ahead and submit a little PR and I'll get that merged in, otherwise, I'll do it myself. I find myself creating snippets all the time to four things that I find myself doing or even just like even just things that are that are like my code base specific coding style that might not translate into something For anybody else, I'll make us Yeah, for that. And I use this snippet generator, we talked about this snippet generator on one of the older episodes of syntax. And this is by Pavel Grisha. Beck and Pavel. If you were listening, I know he's the syntax listener, tell me how I did on your name there one time, he recorded himself saying his name, like this was like two years ago. So that's out of memory there. I'm hoping that's a very Polish name. So hopefully, I got it right. This is that snippet, a hyphen generator dot app, we'll have the link in the show notes. This thing allows you to write a snippet in one place and have it automatically write the code you need in your configuration for VS code, Sublime Text and atom. So it works really well if maybe you found a package of atom snippets, or maybe you found an atom snippet in particular, or VS code, or Sublime Text snippet that you want to translate between platforms, you've just pasted it in here and then automatically converts it to each one. This thing is awesome. I use it all the time. Cool. - -30 -00:15:59,220 --> 00:16:53,820 -Wes Bos: I one thing I want to say about snippets is get to know defaults as well as tabs. You can you can put dollar sign one, and then curly brackets. And that will that will be where your cursor lands. When you hit Tab the first time, you can set defaults in there. So if you hit tab and don't type anything, it will just put the default in there. Get to know those because they're they're pretty powerful in snippets in general. I also put a lot of my snippets that are a little bit more simple. ones that don't need those tab controls, I put my snippets in text expander just so that I can use them in like a code pen or I have a lot of markdown snippets that I write I writes markdown snippets in GitHub, I write them in VS code, or write them in a whole bunch of different editors, and then just having them sort of like system wide, I find it very helpful as well. Totally. What else you have here, you got one more extension for us? I think that's it. - -31 -00:16:53,880 --> 00:18:01,050 -Scott Tolinski: Yeah. And it's actually just a snippet thing I probably should have just mentioned in the last little part, I've been working with a lot with Mongo queries. So you know, if you're into MongoDB, this Mongo snippets for node j. s, I found to be really nice. And it's named Mongo snippets for node j s. So check that one out if you are using a lot of Mongo. And I want you to share with us some of your favorite snippet libraries, or maybe even just snippets in general, maybe we could create like a syntax snippet extension or something. I don't know that's probably not going to happen. But I'd be interested to see what kind of snippets people are using. There's some always really interesting stuff like for instance, aliasing in in bash, or Z, sh, you know, people do their own personal little aliases, right for things that make sense for them. And sometimes, I think the same as with snippets, right, where people create something that makes sense for them. And I'm interested in seeing some of the creative or interesting snippets that people have created for their own code bases or work and how you've made them work for you to prevent yourself from typing the same thing over and over and over again. - -32 -00:18:01,410 --> 00:18:15,350 -Wes Bos: Awesome. That's another episode of vs. Code tips. We'll probably have another one in six months or so once we gather up some more tips. If you have any tips that you would like to share with us, please tweet us at syntax FM, love to retweet some of the good ones - -33 -00:18:15,450 --> 00:18:21,660 -Scott Tolinski: were absolutely so we will see you on Wednesday for a full on tasty treat. - -34 -00:18:21,860 --> 00:18:25,140 -Wes Bos: Thanks for tuning in. See you then please - -35 -00:18:27,000 --> 00:18:36,780 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax168.srt b/transcripts/Syntax168.srt deleted file mode 100644 index a77a19f16..000000000 --- a/transcripts/Syntax168.srt +++ /dev/null @@ -1,276 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,590 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. - -2 -00:00:10,649 --> 00:01:02,220 -Wes Bos: Welcome to syntax today is the tastiest podcast about blogging, we got an awesome question in our potluck, and it was super well thought out. And I thought, hey, let's do an entire episode on this because I've got a lot to say about blogging, I think blogging can be super beneficial to your career. So we're gonna dive into like, sort of the the specifics of creating content and how to make good content as well as the mechanics of like, where do you post it? Like, what's the best platform for that? How do you get traffic to it? Today, we are sponsored by two awesome companies. First one is a century they're going to do all of your error and exception tracking. And the second one is Sanity, which is going to give you a structured content, CMS, it's gonna be the backend to your front end. We'll talk about them partway through the episode. With me today. And as always, is Scott klinsky. How you doing today, Scott? - -3 -00:01:02,220 --> 00:02:03,840 -Scott Tolinski: Hey, doing good. Just hanging out ready to talk about blogging? Yeah, just uh, I've been working on a lot of fun projects lately, just on my little spare time. And it's, uh, it's been really nice, because it's so funny when you, you know, level up tutorials is, has always in it still is a fun project for me. But like, the moment it becomes your job job, it's inherently becomes a little bit less fun. So I've been working on some little little fun side projects that actually are gonna be pulled back into level up at some point, but it does a nice little trick in my brain that makes me think it's a fun project. And I'm pretty pretty into it. So yeah, no, I'm just, I'm in a good coating mindspace right now and I'm ready to talk about some blogging stuff. Because I'm, I'm actually going to be doing a form of video blogging myself. It's totally not relevant to this episode in terms of blogging, but yeah, I think at least there's some connection there and the type of content and things like that. So no, I'm just excited about talking about sharing what you know, and how to do it. How are you doing? - -4 -00:02:03,869 --> 00:02:30,600 -Wes Bos: Good. I'm doing pretty good. We are still up at our cottage. We have my wife's Caitlin's family over right now which they so kindly took our kids to the park while we can record because I realized where I had put my office in the in the cottage. The kids playroom is right above us. And have you ever lived in an apartment where like people above you are so loud? Like what could possibly be doing? - -5 -00:02:32,550 --> 00:02:59,729 -Scott Tolinski: We just weren't. They were they were people. Uh, we got a new roof over here. And there was like, yeah, six guys hammering on our roof. And I was like, I tell the car down like, this reminds me of that one apartment that we lived in. In Arbor where this guy? We actually we called him stompy because we just were like, Is he an elephant? Like what does he do? Is he an elephant. He's rolling bowling balls up there with the with stumpy doing today. And a little side story about stompy he was a learning how to play the guitar, which is cool. You know, - -6 -00:02:59,729 --> 00:03:00,810 -Unknown: it's a loud hobby. - -7 -00:03:00,810 --> 00:03:23,160 -Scott Tolinski: Maybe we should put some headphones on or something. But he was learning how to play the guitar and instead of like practicing or playing a bunch of different stuff, the dude played one song 24 seven. And that song was hit me with your best shot. And so we just had to hear that. Dun, dun dun dun just oh. So start Oh, - -8 -00:03:23,190 --> 00:03:46,169 -Wes Bos: man. Um, I think if there's any motivating factor in my life to buy a house, it was living above or below random people like I had one time when I lived in Toronto. It was like a shared vent system. So like you could hear everything through like the cold air returns everything. And this person would just decide to play drums out like one in the morning like - -9 -00:03:46,199 --> 00:03:49,770 -Scott Tolinski: full on drums like do not realize there's people here - -10 -00:03:49,800 --> 00:04:06,660 -Wes Bos: you will go down there and be like, what are you doing? Like, in the Oh, sorry, is it loud? Obviously. can't draw that one in the morning. Oh, that drives me crazy sharing sharing. So anyways, my kids are doing that right now. So I have to figure out another spot for my desk because our - -11 -00:04:06,660 --> 00:04:09,990 -Unknown: stompy I can't hear him so it you know, - -12 -00:04:10,080 --> 00:05:02,700 -Wes Bos: no, they're they're gone at the park right now which is conveniently timed. Yeah. So let's talk about blogging. We got this awesome question from Tim, who puts in quotes sticker Dev. The question was, hi gents, you frequently talk about writing blog posts as a good way to improve skills, show motivation, help others and really double down on learning something. So I have decided to write a blog post. I have started searching the internet and it is all geared towards WordPress mainly. But surely there is different ways and stacks to do this. I know your Gatsby starter course shows a blog Scott maybe an episode or a tasty treat done on the following. It's funny because he detailed out this entire show notes. And I read over it I was like this is perfect. One of the questions was like how do you outline a blog post? I'm like Tim, you you know how How to do this kind of clearly you just outlined a show for us. - -13 -00:05:03,890 --> 00:05:05,760 -Unknown: But this is the best and - -14 -00:05:07,740 --> 00:05:57,390 -Wes Bos: so we're gonna go through that and the one like sort of thing here he he put this at the end but I'm gonna put at the start is how to blog posts help you learn make a list of topics, start researching those topics for the blog post, what a better way to learn than trying to explain to someone else who doesn't know it. You guys say this all the time, but it didn't really sink in until right now this was a huge aha moment for me. So I think that is such a good thing to double down here is you, you might think like, I don't have anything to share with people, there's blog posts out about other things is that's not the point of blogging, the point of blogging is to be able to explain something well enough so that you confirm it to yourself that you know it and if you don't know it well enough, you're gonna figure it out. Same thing with talks, and podcasts. And anytime that you try to explain something to someone else, you're really doing it for selfish reasons to teach it, teach it to yourself, right? - -15 -00:05:57,449 --> 00:07:04,170 -Scott Tolinski: Totally. Yeah, I so I still very much get that especially because the things that I learned and teach the best are the things that I've just learned. Just because you you understand the pain points, you understand what exactly the things that you ran into when you were learning this technology. And then by therefore, writing these things all out, it's almost like an advanced form of like, double notes where you'd like maybe you took notes, maybe you just took mental notes. But then the blog post is sort of like an affirmed version of those notes to say, this is what this actually is in my brain. And this is how I understand it to, you know, I even like talk to coordinate sometimes. And I'm sure she absolutely loves this. I'm sure this is one of her favorite things about our relationship, when I tried to explain to her web topics, and she's just sort of like, Yeah, why are you telling me about this? So you know that just being able to explain it to people who don't know what you're talking about is is the best way to just totally get a better handle on it. And maybe you'll run into some epiphanies yourself while writing the post about the topic at hand. Mm hmm. - -16 -00:07:05,220 --> 00:08:01,140 -Wes Bos: Alright, so the first question we have here is what are some of the different platforms to publish a blog on? So I think that this is probably not the best first question to ask yourself, but it is the the first question that people ask they say, Okay, what am I going to post it on? And what is it going to look like when the reality is the meat and potatoes of blogging is what is the actual content? That's that's what matters at the end of the day. Right. But that said, I definitely think the the, where you publish your blog post is super important. So there's I guess there's a couple camps, there's, there's hosted yourself. So whether that's you're doing a Gatsby or WordPress, or something where you host it yourself, and you're coding it and doing all that, or there's the the other sort of way, which is publish it on something like probably medium is the most popular right now or wordpress.com, something like that. So what are your thoughts about both of those approaches? Scott? - -17 -00:08:01,200 --> 00:09:48,120 -Scott Tolinski: Yeah, I think there's I think there's, there's so many platforms to pick from, right you got in the hosted space, even ones that look that are outside of third of our tech industry like Tumblr that people use Tumblr as a blog, Squarespace or, or WordPress, or any medium, but medium is just so obnoxious, right? pop ups that are like little far not really gonna read the rest of that, like I really can't stand using medium at this point. You know, I'm personally because I'm a tech person, I'm going to go the self hosted route. And specifically because it is easier now than ever to get something that's very, very polished, but nice and fast. And all these things, like when I think about in the past, okay, in the past, you say I wanna I want to host my own blog, should I hosted on WordPress? Or should I develop a WordPress site? Well, then you think about, Okay, I got to get my, my XAMPP or MAMP server going or whatever, I got to get my Apache server going, I have to install WordPress, I created database, then I've got to install a theme, you got to do all of these things that take quite a bit of time. And it probably by the end of it leaves you a little exhausted. So for me, I'm gonna go self hosted. And in my opinion, I don't know if we're going to get into this just yet. But in my opinion, the fastest way to get going with the self hosted blog is with one of these new class of static site generators and markdown files. So if you're a tech person, you can write markdown files. My first instinct would go to Gatsby or grid, some if you were a view fan, and just install it get going right away because those platforms are going to allow you to do that in just seconds. Right? - -18 -00:09:48,450 --> 00:11:43,950 -Wes Bos: Yeah, especially the the hosting aspect of the static site generators is so simple things like Netlify. I think that's often a tripping point or people never want to update their own. They never want to update So like I forget how to deploy it, and then that's a huge thing. And that will deter you. So I agree as well, I think you should go that route. I even said this, like, probably six years ago, when medium was starting to become popular, I was like, they're going to pull the rug from under you, they are going to screw you. And everyone's like, no mediums way better. And there certainly is lots of like hacker noon and Free Code Camp. All of these things were like they built on the back of medium. And they guarantee they would not be nearly as popular if it were not for medium. But you starting to see people sort of turn their back on medium right now, because they're starting to do weird things with your content, they're starting to block it, they're not allowing you to do things. So I am always 100% of the the idea of just own your own content. And I would say like, it's fine to whip up a quick WordPress or medium or something like that, that's hosted just to get your ideas out there. But in the long term over over the arch of your life, this is your content, you should own it. And you should, you should ideally be sort of hosting it yourself and having control over it. Especially like, I don't know, if you want to like, let's say you've got this amazing backlog of 40 blog posts, and you've got tons of traffic going to them. And also knew you could like you could launch a course on that. And you can make a lot of money. But if you're on medium, you don't, you can't like put a banner or something up like that. And you could put a little text link at the top, but you're gonna make 100 times more money, if you're able to put a banner or a little countdown clock or anything like that, if you have control over the the source code of that it's going to be better in the long run for you. I guarantee it. - -19 -00:11:44,370 --> 00:13:38,850 -Scott Tolinski: Yeah, I can totally hear what you're saying. Cuz even in even in like hacker noon, or some of those were dev two or whatever, though, where you don't own the platform itself. And you're just publishing on there. It's great for name recognition. But in the same respect, you're not able to do those things, either. And I think that is a big part about owning your content, if you're looking for this thing to, you know, advance your career in some way other than, hey, look, I wrote these blog posts, because you see that you see, oh, so and so writes, completes tutorials, if you'd like to learn about these tutorials, you know, head on over to here, but that requires a lot for the user, and it requires them to read it that read that little section. And you know, they might get to that part and see Oh, this is an ad I'm gonna just turn back now, compared to if they're seeing a banner ad or something a little bit flashy year, maybe not something obnoxious. But still, yeah, I totally hear what you're saying on that in terms of being able to own the platform. And I personally have gotten screwed, so to say, and not owning my platform in some sort of ways, when I was trying to do everything through YouTube. So before I built level up tutorials, I was really just trying to do everything through YouTube in terms of how I make money, or how I, you know, interact with the community, and I and I relied on YouTube's ad revenue. And when their revenue model changed, and my revenue dropped in half, and then in half again, I just had to sort of be like, oh, okay, well, I guess, I guess I just have to accept this because I have no power and no control over how they manage their platform. And And sure enough, they have better tools for monetization and stuff in there now. But like, it was, it was such a huge, my fire had been extinguished by the giant bucket of water that YouTube's revenue had poured on. I was just like, oh, man, like I put so much work into this. And now I'm making 500 bucks a month on 300,000. Yeah, drivers, you know, it's like, this is not worth it at all. - -20 -00:13:39,600 --> 00:14:25,500 -Wes Bos: Yeah. And on the flip side, I've always been aggressive of getting like you can use, I use YouTube. But I try very hard to take those people off of YouTube in my own course platform. And because I did that, with all of my free courses, I've had massive email lists and a massive audience to be able to sell my free stuff to, and I guarantee I wouldn't be able to do this full time if I had not tried to channel those people out of the platform. Because, again, these companies are out there to make money and they do what makes sense for them. They don't care about you, the the creator at the end of the day. Yeah, we should. We should also say like, there's also like this, like third area, which is like writing blog posts for other people. So you can go out there and write blog posts for smashing mag and CSS tricks. And web designer mag. - -21 -00:14:25,919 --> 00:14:32,190 -Scott Tolinski: You could write one for level up tutorials do if you want help, I'll publish it. We have a post section, but we don't have an official program, but I'll - -22 -00:14:32,190 --> 00:15:23,299 -Wes Bos: publish it if it's good. Yeah, I've written posts for both smashing mag CSS tricks and the the what's a web designer magazine, web designer magazine, whatever it's called. net and. NET bag that was sort of was and those are great publications. But I think with the exception of the CSS tricks when I wrote my Sublime Text article, because that was that was what gave me a huge initial push. I thought that I was gonna To get a lot more fame and recognition than actually was and I found out that in the long tail not maybe not maybe immediately when, when these big entities can push 40,000 people to an article, but in the long run over three years of just getting random Google searches. Yeah. And recognition, I think that it's better in the long run that I had put most of the stuff on my own blog. - -23 -00:15:23,730 --> 00:16:48,840 -Scott Tolinski: Yeah, I think I think there is sort of, it's funny, because I think there is a matter of like, what your intention is, like, is your intention just to blog about your interests? Is that just about to share your experience it? Are you trying to do something more with it? Are you trying to have it Enhance Your Career, you have to look at as like, what's your intentions? Are you trying to get eyes and audience on this? Because there's a lot of these questions that the answer could very well be well, the right solution for me is to post on one of these sites, you know, Free Code Camp or anything, because because your piece is more likely to get read. Because if you if it's on your own thing, you're gonna have to hustle for it. I mean, it's you know, it's not if you build it, they will come situation, you have to hustle for those clicks. I can't think of how many times I've seen like a, forgive me if for saying this, but like a crappy blog post on on Reddit that got, you know, just pushed onto the web dev Reddit, and then it will like, it'll grow to the mass of two thumbs up or up. Yeah, yeah. And that's where it remains. Because, you know, people just don't don't don't care about it. Right. So yeah, without some sort of heavy name attached to it, like one of these platforms, people just flat out might not care. And that could be a big problem. Because you post it, you maybe get like 30 or 40 views and then like, like, That's it? And if that's Yeah, - -24 -00:16:48,840 --> 00:17:43,070 -Wes Bos: it's kind of deflating. You spent days but writing this thing? And then why doesn't go out to? It's hard to get that in? It's hard to get that sort of initial line in that. I think that's a really good point. You said like, like, what is your idea, like, sometimes there's people out there that maybe have like an open source project, and they just want eyes on it. And they don't, they don't necessarily care about creating, like a blog that has lots of readers and, and people behind it, because that's not their end game. They're not like me, and you or they need to capture these people, right? They just want people to be able to use their thing. So of course, in that situation, then absolutely. Or people who are big proponents for accessibility, they just want to, to get the most people ever to know about accessibility. And if that's the case, then they go to these platforms and write an article for them. And you can also get you get paid by these platforms as well. You can make some decent little pocket change there. Yeah, yeah, - -25 -00:17:43,140 --> 00:18:11,360 -Scott Tolinski: I think that's all good things to keep in mind. It's funny, because you have this idea of you publish a blog post on your own platform. And I said, You know, I might get one or two upvotes. And then nobody will, you know, care. But all of these platforms, like every platform ever, including level up tutorials. That's how it started, right? You release something nobody cares. You release it on the bottom. Here's, yeah, yeah, I started now we hear? Yeah, I don't like Drake. I'm sorry. I'm sorry. - -26 -00:18:11,360 --> 00:18:17,060 -Wes Bos: I'm either I hate Drake. I, I'm sorry, from Canada to the rest of the world for Drake. - -27 -00:18:20,670 --> 00:18:58,920 -Scott Tolinski: But yes, I mean, it is it's like if you have a longer term end game, you have to get cool with the nobody caring about any your stuff, and then just go from from there, and then something will get picked up. And then something will get picked up and something will get picked up. And who knows, maybe the first video or the first blog, you you released will eventually have a million views on it. And just people get tired too after after doing a couple of not seeing that progress. So you have to know what your long, long term end game is. And if you don't have a long term end game, that's cool. You can just sort of bounce off the walls like a ping pong ball. And until you find what that end game is, you don't have to have the plan and everything at the outset. - -28 -00:18:59,330 --> 00:19:02,040 -Unknown: I think that's the beauty of, of blogging. - -29 -00:19:02,700 --> 00:19:03,210 -Scott Tolinski: Yeah, - -30 -00:19:03,210 --> 00:19:30,350 -Wes Bos: is that just do it all, you can just try things with a blog, like, that's what I did. I was just trying blog posts, and then I hit my Sublime Text blog posts, and then took off and I said, that's my thing. You know, like, I didn't know what my thing was. I specifically done those. And that's the beauty of a blog, you can like taste test things. And you will know by the stats and the shares and the comments and the tweets as to what has hit a nerve and what is going to work for your thing. - -31 -00:19:30,860 --> 00:19:35,430 -Scott Tolinski: Yeah, my thing was SAS tutorials before anybody knew it's has always been thing. - -32 -00:19:37,100 --> 00:19:53,330 -Wes Bos: Good thing. So the other questions we had here, what are the pros and cons of each of these platforms? We talked about that? What are the easiest platforms? quickstart I think Scott answered that is I would probably get a Gatsby or grid, some blog up and running. You don't - -33 -00:19:53,330 --> 00:19:59,700 -Scott Tolinski: need a database. You have no configuration. You just hit a command and the markdown files you make a new markdown file, just work. Love it. - -34 -00:19:59,700 --> 00:20:28,710 -Wes Bos: Totally busy day, you probably don't need the admin editing UI. If you're a developer like that's, I've been working on my own Gatsby website for a while now. And I don't think markdown is a good, a good solution for anyone not technical, like you're not going to ask a client to do markdown. But as a developer, it's amazing because you can just start writing a text file, deploy that sucker and it will go up on the website. And that's like, such a low barrier to actual entry. - -35 -00:20:28,820 --> 00:20:32,250 -Scott Tolinski: Yeah, yeah. Now they'll get MDX MDX. Love it. - -36 -00:20:32,969 --> 00:20:51,690 -Wes Bos: Yes. And then the fourth question here is what are the best platforms for a developer to learn more skills by building so again, I'd probably go with a Gatsby or a headless WordPress, with Gatsby, something like that. Because you're also going to learn just building your own thing as well, you're gonna get better at your web development design skills by doing that, - -37 -00:20:51,830 --> 00:22:17,880 -Scott Tolinski: and you learn graph qL, you'll get better at react, you'll see just how dang fast react sites can be. The thing that bugs me is that when people like talk about some of these platforms, it'd be like, why would you want to use a front end framework for this kind of angle, because we're not shipping the frame and you are shipping it, but like the initial hit is just HTML and CSS. It's the fastest darn site on the in the planet, Gatsby sites are so dang fast, that with the amount of like pre loading and all those things that you get with a Gatsby site out of the box, like they get I could build an HTML site with all of those features that does all those things like that, but it's gonna take me longer. So like a Gatsby site, to me is really the the pinnacle of building a fast site quickly, Goodson included as well for those of you viewpoint. And we've talked a lot about markdown files and things like that. But I do want to talk or at least lead into one of our sponsors here, which is Sanity, which allows you to have an actual full on backup. Now, I did mention that I thought having to get a whole WordPress rig setup for your darn blog is kind of a pain in the rear, especially you got to do all the database stuff. But what happens if if you could just sign up for a service that allows you to build a fully extendable UI for a back end, and allows you to do it as quickly and painlessly as just simply signing up for any account anywhere, that's where Sanity comes in with sanity.io. - -38 -00:22:18,090 --> 00:24:04,050 -Wes Bos: So if you do want a UI for your blog posts, maybe maybe your website is a little bit more complex past what a markdown file. And like, though, if you, if you get complex with markdown, you start getting into what's called frontmatter, which is a bunch of like tags, and slugs and things that you put at the top of your markdown file and this kind of like hidden data. However, at a certain point, you do want, if you if your website gets a little bit more complex, you might want a UI where you can do relational data, you have a interface for uploading images, you can create your own custom inputs. And that's what Sanity does. It does structured content. So you can sign into Sanity, you can you have a UI for creating your own CMS back end. And then you can bring along your Gatsby or they have like a Great Gatsby integration, any any sort of front end that you want to build your own. With that. So I would recommend checking out sanity@sanity.io forward slash syntax, if you go to that URL, you're gonna get double the free plan than what you just get on the homepage. So make sure you go to sanity.io forward slash syntax, they also have a couple links there. On some quick getting started with a like you can get started with next or next or Gatsby, you can take a quick look at those. Thanks so much to Sanity for sponsoring. Awesome. Awesome. So the next one, I think this is something Scott and I are pretty good at how do you structure a blog post. And I don't necessarily mean just for a blog post. But like any time that we want to make a video, anytime we want to make a podcast or blog posts, we have to take this idea that is just a bunch of stuff floating around in our head and we need to like distill that down into an outline. The big question is, how do you do that? You want to tackle that? - -39 -00:24:04,229 --> 00:24:30,330 -Scott Tolinski: I don't know if I'm the right person to answer this. Because I'm so bad at reading. I like have to like listen to my blog posts a lot. I'm just dread deliberating. So in my mind, everything comes down to the same type of structure that you'd use sort of for anything right? You have your introduction, maybe the what and wise of you reading this. I don't recommend starting off with Webster's Dictionary defines testing. Oh, yeah. So stuff like that. No, don't do that. - -40 -00:24:30,450 --> 00:24:55,020 -Wes Bos: That's like every every like conference talk starts with that too. Like Brendan, I created JavaScript in 1922. Yeah. And, like, okay, you don't like it makes sense that people start with Webster's dictionary or this is the history of it, because they don't know where else to do it. But that's so boring and almost nobody cares about that. Get into that. Really, you have to start with something that will hook somebody to reading or listening to the rest. - -41 -00:24:55,680 --> 00:26:37,710 -Scott Tolinski: They called the hook for a reason, right? Yeah, it's a hook. You got to hook them in. You got to let them know why they should be reading it. I see this a lot with libraries to people, they don't they don't give you the hook, they just start getting into some of the mumbo jumbo without telling you the hook, you know, some of the best, the best libraries and blog posts have a great hook. Here, you're doing everything wrong. For these reasons, I don't know, it doesn't have to be click Beatty, but click Beatty can be a decent hook sometimes as long as it's accurate and not totally overblown. But you could say like the five linting mistakes you're making, hey, these five linting mistakes are gonna be wasting you a ton of time. So let's get into you know what they are. Yeah. And then so that gives the reader clear expectation right from the get go. It says this is what the articles about. And then also not only that, but it also gives them maybe like, Alright, here's what I can expect out of the length, because I see that there's going to be five things, they're going to hit on each of them. And then that's going to be the article, you have this intro that needs to hook and give a good idea of what they're in for. And then subheads is subtitles with sections of each thing that you're looking at before then the best blogs, do it with an anchor link so that you can link directly to those headings, and have you know who does a great job of this is scotch scotch IO. Mm hmm. They have like a little pound sign next to the logo or next to the subheading. So you can just click that and get the update the link to the page. So you can copy and paste the link really quickly from there. So again, subheadings images where they're needed, those kind of things. But for structure for me again, you need to hook the intro, the meat that's organized and structured, and then the conclusion, this is what you should have learned. And then you can do your shameless plugs. And whatever at the end. - -42 -00:26:38,610 --> 00:26:41,790 -Wes Bos: I always like to have front is described the problem that - -43 -00:26:41,790 --> 00:26:47,790 -Scott Tolinski: kind of described our episode. Sorry. Yes. That's great. It's a pretty much a syntax episode. - -44 -00:26:48,390 --> 00:28:25,980 -Wes Bos: Well, that's what we do for a syntax episode is we have a little description at the top. Why is this episode important? We did that right here. We said, because we think that blogging is important for your career, it can really put you forward. And we sort of summarize it. Today, we're going to be talking about how we actually create the mechanics of where you should host it, as well as the actual content. Right? So those are the two things that we're going to be talking about that hooks you in for the the entire episode. Another thing that bugs me is people don't provide links to demos and other important things. Like if somebody's excited about it, they might read the summary, they might scan the sub, the titles, but they just want to see a demo of what it is. So if you have like a blog post that's 7000 words on like, I hook lasers up to my cat, and no jazz, right? Like, I want to see a video of that immediately when I see it. And then then I want to get into how did you actually do it? Right, like put the demos put the links up top? Or like, if you're saying like, I researched office chairs for 60 days. And here's I decided on this one, just tell people what it is that you've decided on. And then people will go into why did you decide on that put put the important stuff up top. I think that's super important. So structuring, I think that's good, just do an outline, and then sort of fill it in. That's how I do absolutely everything in my life, including my videos, I'll just sort of dump all the info into a bunch of titles, I'll rearrange it until it makes sense. And then I'll go into each of those sections. And if you find that there's too much in one section, that's a great time to split it up into two different sections. Yeah, - -45 -00:28:26,010 --> 00:29:10,440 -Scott Tolinski: I do that too. And even for the series, I'll do an outline for the series. And then I'll do an outline for the videos that it sort of, you know, like, Alright, now I'm going to dive a little bit more in depth. And that actually could be like how you structure a blog series, you know, here is the here is the the global outline. And here's the more in depth outline. In that kind of thinking, again, it will just get you thinking about structure. Okay, thinking about the key points that you want to hit on in general, it seems stuff that you learned in middle school or high school, and they were having you write papers. And it's no wonder that I'm not doing blog posts concerning I turned in one essay in my senior year, and my teachers that think you have dyslexia. Oh, maybe that's why I'm not good at this. - -46 -00:29:10,650 --> 00:31:06,030 -Wes Bos: Next one is how do you get direct traffic to your blog post, because that's part of a frustration. With writing these blog posts, you finally finish it, and you launch it and you get like 10 hits to it, and probably five of them are from a bot. So this is a hard topic, or a hard thing to do. Because I think often people will create content in the dark. And then in this, this goes for anything. I see this all the time with people that build courses, or people that are building a YouTube video, they'll just like, stay in the dark, create all this content. And then when it's time they go, Okay, I'm done. How do I get people to it? And I think it's really important to if you do want people to go to it, you have to do what I think everybody else is doing is you have to be working on building an audience to that type of thing and unfortunately That type of thing takes a very long time. So like how do you get traffic to your blog, you blog for five years with no traffic. And slowly over time, especially because of because of Google because of backlinks because of like, one like a really good example that I have is I have a blog post about being a sole proprietor, that's, I think, probably eight or nine years old. And I in that I just sort of detail all of the things that I need to know about running a business as a sole proprietor. And in that I put a link to Freshbooks. And I still seven years later to I get 200 bucks a month in Freshbooks for affiliate referrals to it. And that that never had never in my life had had a lot of traffic, never probably, I don't know, eight to 15 hits a day, but 18 to 15 hits a day times seven years. This is sort of like longer term things. People do find it. It's got links everywhere. It's been reprinted in countless textbooks, people like a lot of the big publishers have asked to reprint it and textbooks like just stuff like that will it'll slowly gain momentum over time. - -47 -00:31:06,150 --> 00:33:04,860 -Scott Tolinski: Yeah, totally. So one of the things that's hard for us is developers is that we often feel like slimy pushing our stuff, or we feel concerned that people are going to rip it apart, and they might rip it apart. But that's one of those things you kind of just got to get over at some point, the fact that people might, might just rip it apart. And you can choose how you respond to that, whether you learn in advance from it, where they're you, you just ignore it, whatever, it doesn't honestly matter as long as your response is appropriate, right. So don't, don't be rude back, just move on or address the problems and or if there are them, but you have to push your stuff out there or else no one's ever going to find it, I have a lot of friends who are musicians, who would create excellent music, and they would just expect Oh, well, if my music is the best music ever, which it's great, but it's not the best music ever. If it is great, then like, you know, people aren't just going to inherently find it, love it, and you're not going to blow up, you have to hustle for those listens, you got to hustle for those clips, you've got to work for it. It comes down to really anything that you want anyone to care about. Because at the end of the day, people are mostly thinking about themselves, how am I going to get this? You know, job? How am I going to do this? How am I gonna do that people are thinking about themselves, they're not thinking like, Oh, I have to go looking for the best blog post and the best author, they're just going to, they're gonna, you know, get hooked on your your topic, because it's been shown to them in some sort of way that's been put in front of their mind. So you, you have to work to get those clicks, you got to work to get that audience. And that's not something that's just going to happen via SEO, or automatically you got to work for it, you got to tweet out, hit him up, do all of those things. And you can learn lessons from them in literally anything I mentioned musicians or anything like that. But it's literally any art or anything, where you're having to sell yourself or whatever, in any sort of way, you gotta you got to work for it. And I think that's one of the hard lessons that developers need to learn from marketers is, you know, it feels slimy, but you got to work for it. - -48 -00:33:04,980 --> 00:33:24,360 -Wes Bos: Mm hmm. Other things you can do is submit them to weekly emails. So there's this huge Peter Cooper runs Cooper press, which has JavaScript Weekly. He's got like a weekly email for absolutely every single topic and he's looking for links all the time. He doesn't necessarily care who it's from. He just cares that as one - -49 -00:33:24,360 --> 00:33:26,070 -Scott Tolinski: of our episodes he's recently in there - -50 -00:33:26,580 --> 00:33:27,860 -Wes Bos: was in which one? - -51 -00:33:28,200 --> 00:33:30,390 -Scott Tolinski: Yeah, the foundational JavaScript one. - -52 -00:33:31,020 --> 00:33:32,280 -Unknown: Ah, that's how I got, - -53 -00:33:32,280 --> 00:33:33,600 -Scott Tolinski: I got the newsletter. I was like, - -54 -00:33:33,630 --> 00:35:05,960 -Wes Bos: Whoa, cool. That's awesome. I love that episode did super well, I saw it got got shared by a whole bunch of people. And we didn't submit it there. But he obviously saw it. But most if you don't have a big audience, then you can just submit links, he has a whole process for submitting links to this. I think that's, that's really good. And then you can also just straight up ask people to share it for you. So this is something I'm not I don't totally feel great about. Because I get emails all the time from people saying like, I wrote this thing, can you share it or the I thought your audience would enjoy, which is straight out of marketing Handbook, which I don't necessarily like all that much. So usually, I'll share stuff for for people who I'm sort of not friends with, but like, who have maybe helped me out in the past or who are sort of friendly with me, generally, like I see their Twitter avatar, I know who they are happy to do something like that if I can. My DMS are full. So I don't see all my DMS, but I'm happy to do that. But then other times you get like the first dm ever from somebody. They're just like, hey, share this, please. Like no, like, Who are you? And then I have to vet it. And sometimes you tweet something and then people get all if there's something in the article that they don't agree with. And you're in the middle of this like huge Twitter fight and like, that's not necessarily something that I want to get on. So absolutely. Ask away. Ask everybody. You want to share that thing? Nothing wrong with that? Just don't expect it to hundred percent work all the time. What do you think about that? - -55 -00:35:06,600 --> 00:36:00,440 -Scott Tolinski: Yeah, I get we get a lot of it's funny, even with the podcast, I know there's so many of these things that we can relate to the podcast, but just how many emails do we get that says, it's like the exact same script, I feel like they copied and pasted the script, but I'd be like, my CEO of the company that I work for would be a really great guest on your show, I think your audience would really enjoy the book that they published with the link to the book. Like, it's like, Where did you get this script? There is so many people who give us this and it's like, Do you honestly think that that's going to work if we've gotten that 100 other times that your CEO from some company is the perfect guest for the show just so happens to line up with the release of their book, like that is not what we do on this show. Like when we are on that on the show, it just shows that you don't listen to the show, and that your guest isn't a good fit for the show. And it's like, Yeah, I don't know that really bugs me people who have those scripts? I mean, if you're gonna do it, kind of at least do your own but more genuine than that, if you expect them to do it. - -56 -00:36:01,190 --> 00:36:11,400 -Wes Bos: Yeah, that's awful. I can't believe how many people email saying, My boss wants to be on the podcast like, Can your boss not email me themselves? First of all? Yeah, - -57 -00:36:11,580 --> 00:38:49,320 -Scott Tolinski: yeah. I want to hear I want to hear what your boss's thoughts on the podcast if they're going to be and I want to hear maybe about one or two episodes, maybe maybe some proof, maybe something from the back catalogue to show you've been a longtime fan or something. No, I don't, I don't care that much. But like, honestly, you got to, if you expect the people to share your things, you've got to have at least some sort of a connection there. And having zero connection and cold calling like that is the same as calling up some person at random and asking them to, you know, subscribe to a magazine or something, it's not going to work. And you know, what else is not going to work your website because you write bad code. And your bad code needs to be tamed with a an error and Exception Handling tool, one of which is our favorite over here at syntax and that is century. Now I say it's our favorite not because there's sponsoring us because you know, they are but I use century myself and I pay for it I this is you know, then they're not giving me century for free. I pay for it. And I love it. And I use it. And I have since before we took them on as a sponsor. Now, Sentry is an excellent service that allows you to capture a login and handle all of your errors and exceptions. For instance, I've been having a really weird bug that I've been crushing lately. And, you know, I discovered some interesting new features and tools within Sentry, for instance, I had one sort of Sentry bug that's been popping up over and over again. And it's very obviously from a user's Chrome extension, because it tells me that in the error handling, and I found that inside of my project in the project settings, I can tell it Hey, you know what, you should not log any errors that look like they might be coming from a Chrome extension, because honestly, I don't care to debug someone else's Chrome extension. That's not what I'm here for. So I can click that. And then easily No, I don't get all those errors. And my error log makes more sense to me century is just great. And they somewhat recently change their API's, it'll be a little bit more unified, you're no longer using Raven, you're no longer you know, you're using node century, you're using JavaScript century in it, it works really well. I've been a big fan of these changes. And a century is just one of these tools, I really, really couldn't run my business without because it lets me know of these bugs, how many users they're happening to when they're happening. Let me know about releases. If I screwed something up in a release, what release who made the commit, how to fix it. From there. So head on over to sentry.io use the coupon code tasty treat all lowercase all one word, and you will get two months for free. So sentry.io coupon code tasty treat all lowercase? One word, two months free. That's all you got to know. Go ahead and do it. - -58 -00:38:49,860 --> 00:38:59,790 -Wes Bos: The last question we have here is how you get content to be in depth. But second. sink - -59 -00:38:59,790 --> 00:39:19,710 -Scott Tolinski: is a typo in the in the show notes and says suck int which is I'm not judging because I would probably spell succinctly exactly the same way. But it's hilarious. It's a sucking looking. It's like a it's like a integer in JavaScript. But it's like never the value you want. That's a second it sucks. It makes your code bad. - -60 -00:39:19,710 --> 00:41:24,510 -Wes Bos: Mm hmm. I should say the answer to this is you're never gonna make everybody happy. But you should be aiming to make people equally mad on either side. That's sort of how I go on my mind tutorials. I want enough angry emails, that stuff is too hard as matching as stuff is not in depth enough. And that way if I feel that those two things are balanced, that means I know I'm hitting the spot that I want to be because you're always going to get people who like with my node course a lot of times people say like, I wish that you would just do it with pure node API's and no packages and like, like, just do low level, database stores and things like that. And then You also get the people saying like, Oh, this is too complex, I wish you just use a framework right and and and and then most of the people are sort of down the middle. So don't worry about those fringes, those are just people who are not your target audience. And I've said it many times, there's the Seth Godin quote, where he just says, like, make your thing. And if people don't like it, you just say it's not for you. Because generally, if you have this idea of something that you want to build, and you want to make, you know, who it's for, you know, it's probably for you three months ago, and and you're gonna find your sort of audience. And don't worry about those, those people. So on that, that said, I always recommend to not go long winded. Just because no one's gonna read it, you people's attention spans are really, really low. And if you can sort of catch them with being succinct and getting enough that you can. And then the last point that I have here is that the beautiful thing about a blog post, and the worst thing about video is that blog posts are living there easy to update, you can always patch things in where you need it. And if you find you're getting lots of questions or lots of comments on a specific issue, you can always go back and edit and put that in. And that sort of living document that's both good for Google juice. Google wants to see that you're sort of tending to this article over time. But it's also just good for making a really hard, beautiful blog post over time. - -61 -00:41:25,170 --> 00:43:18,060 -Scott Tolinski: Yeah, like a topiary, you got to make sure it stays nice and pruned, and looking looking nice and fresh. I mean, but for real, I think a lot of it is just knowing who that audience is, like you mentioned, if it's not for you, it's not for you. But you got to look at some blogs like overreacted right Dan aber mouths blog, he goes deep into some of these things in react, and it's the perfect thing for him to do. And it's really captured that audience because the people listening to him or reading his blog, they're gonna want to see that kind of content. And that's what makes it so good is the fact that it had a point, it nailed that, that line. So you know, you personally your audience is a little bit different in my audience to is different. And, and you know, the things that I'm going in depth on is like, here's how to do this basic thing, right, here's how to do this thing. And if you want to follow along in the next one, and the next one, I'll tell you how to take it a little bit further. Or you can just stop here and go off on your own. If you've picked up the thing that you've learned by now, you can always add on more. So I usually personally venture on the shorter side of things, and keep it shorter, keep it more succinct, and worry less about covering every single use case in one single post, you know, try to have one central idea, keep it to that idea. And then don't go further than that. Because you can always make another post that encapsulates that other idea. You can link it, you can do multi part blog post part one, part two, part three, Part Four, that kind of thing. I have no problem with that. So I usually keep it more on the sink side, I usually keep it less on the technical side and more on the here's how to big picture of everything. Here's how this thing makes your life better. Here's the things to type to get it up and running. And here's what happened because we did that. So usually that that's my my structure, my thoughts on it. But again, it depends on who your audience is. Some people really, really can go in depth and deep on things and have that really work out for them. - -62 -00:43:18,570 --> 00:44:14,220 -Wes Bos: So that is all about blogging. And I'm actually really happy with this episode. There's a lot of things that I like to say about blogging, I wish that I did more blogging myself, right now I have other avenues of sort of getting my thoughts out. And that is via the podcast via my own videos, things like that. But I think blogging is probably the lowest barrier to entry. And also sometimes I even think about, like I say all this stuff on Twitter, and then it just like it goes away. Like I should really be taking my Hot Tips and turn them into just very short blog posts. And that's another tip I have here is like, Don't think that a blog post needs to be this huge thing. It could be three sentences of ha, today learn. You can change this in this program, or today I learned you can use the JavaScript spread to do this. That's totally fine. Just document it for a later time has even if I look at my own Hot Tips, people are like, what's the archive? I don't know. They're all they're all gone by now. And I'm sure I could read them out somehow. But - -63 -00:44:14,910 --> 00:44:42,270 -Scott Tolinski: it would be worth it. One of the podcasts I listened to the one of the hosts, he always like goes on, like tweet threads. And then they were saying like, if it's more than, you know, four tweets, then just put it into a blog post, just put it into a blog post and then that way, all of those are at least a one spot it's easier to follow and it is you know, searchable and all those things and archivable and easy to find in those ways. But yeah, I don't really have anything else is the my final thoughts here. All right, let's - -64 -00:44:42,270 --> 00:45:20,640 -Wes Bos: get into some sick pics. I have a sick pic today. That is a podcast, another good one that had been been finding. And this one is called spectacular failures. It's a podcast that goes into just spectacular failures, things like that. Beer companies and how Kodak went under and the funeral industry and a Christian theme park that went under her. And it's it's not the these, the stories are just insane. I love listening to this type of thing. So I would recommend that you check it out. It's called spectacular failures. - -65 -00:45:21,060 --> 00:48:33,180 -Scott Tolinski: Well, I just I just clicked that little checkbox and just smash that like button, and I'm gonna be subscribing to that. You know, it's so funny I have my stick pic is also a podcast. And it not only is that also a podcast, but it's very kind of similar in a lot of ways. And so when you were starting, I was just like, I wonder if we're gonna have the same exact sick pick, we don't, but it's very similar. And I think there if you subscribe to both of these, you're gonna get like a ton of fun knowledge. And these kind of ways. Mine is called business wars. And it's from wondery, who's, you know, one of the big networks, they do a lot of big time shows. But business wars is really great because it tells the story of different business situations, different competitions, where companies are competing against each other. I'm currently listening to one of the ones the story's a little bit more interesting than I would have thought in the story is Netflix versus blockbuster. And I just really just assumed that Netflix came in did their thing. And you know, blockbuster didn't hang, but it goes a lot deeper than that. There's a lot of like, CEO and board members stuff. And, you know, there's people on blockbusters team that essentially had everything. And the idea is to counter Netflix, but didn't have any sort of power over their bosses. So you just think of it as like, Oh, yeah, blockbuster, they didn't adjust, they died. But there it goes so much deeper than that. And there's so much more interesting than that. And they have these things for all sorts of different ones from Hasbro, vers, Mattel, McDonald's versus Burger King. And all of these are like five or six episodes long. So they're they're really in depth, they're really good. And I personally have just been loving this podcast. So you subscribe to to business wars, subscribe to spectacular failures. And now you're gonna get a lot about corporations and how they operate, and neat ideas and epic failures. Because really business wars, a lot of the companies end up failing at the Fed. So a little common theme there. And if you want to learn more about failure, just listen to the syntax episode on failure because I thought we nailed that one. I think it's just called failure or something to that extent, one of the older runs in our back catalogue. Yeah. Shameless plugs. I yeah, I have a big shameless plug, the level up tutorials, subscription level of Pro, the prices going up in a 15th. So you don't have very long here to subscribe. And if you subscribe to the year, not only you're going to get 25% off, but you're going to get that price forever. And so it's 180 bucks a year, if you subscribe for the year, right now, when you listening to this, if it's after August 15, you missed it, I'm so sorry, this is going to be the last chance you have to get this rate forever. We have a huge catalogue that came to level up tutorials over the past year, two years here. And there's so much more content now available now than ever the latest courses gets the e commerce. And the next course that's coming is Shopify and Gatsby, both of which of these courses, you'll dive into headless e commerce and the common pitfalls you might face from building a very simple site to building a very complex site. So if you want to learn that stuff, then off to level up tutorials.com forward slash Pro, and sign up, this is your last chance to lock in at this rate for ever - -66 -00:48:33,900 --> 00:48:52,890 -Wes Bos: sick. I have all my courses as well available at Wes bos.com forward slash courses. You can learn there's a bunch of free ones bunch of paid ones, check it out. Use the coupon code syntax, you're gonna get 10 bucks off any of the paid courses. If you get a free one, I will send you 10 junk. I'm not gonna send you 10 bucks. These are still free. - -67 -00:48:54,330 --> 00:48:54,870 -Unknown: I - -68 -00:48:54,900 --> 00:49:09,780 -Wes Bos: think that is it. Thank you so much for tuning in. Make sure you follow Scott and I on Twitter. I'm at Wes Bos Scott is at St. linsky. We're also on the gram as well. So hit us up on there. Yeah. All right. Thanks for tuning in. Please. - -69 -00:49:12,240 --> 00:49:21,990 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax169.srt b/transcripts/Syntax169.srt deleted file mode 100644 index 92e75da38..000000000 --- a/transcripts/Syntax169.srt +++ /dev/null @@ -1,136 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. Totally at ski. - -2 -00:00:25,950 --> 00:03:04,350 -Scott Tolinski: Whoo, welcome to syntax on this Monday tasty treat. We're going to be talking about how Wes is able to get internet out in the remote Forest Lake, where he is out at his cottage we're going to be talking about this is going to be really interesting. It's going to be kind of techie in terms of its web related, but it's it's the internet in remote areas and the strategies that Wes is using to get internet. I mean, he's communicating with me live live via the internet right now. And it's a he's in the middle of wilderness. So it's pretty awesome. I can't wait to hear a little bit about him following his stories on Instagram. It looks really super fun. My name is Scott Dylan ski and with me as always is Wes Bos joining us today jumped up. So this episode is sponsored by one of our longtime sponsors here at syntax is Netlify. Now Netlify has launched recently, a really neat new service allows you to get analytics straight from the DNS so that way, you have your you know, your your Google Analytics, right, your Google Analytics is a script that loads it onto a page and somebody visits your page or registers a click although your Google Analytics is not accurate, why is it not accurate because people block that stuff, people block the trackers people don't, they don't want you snooping on them. So they block all that stuff. This however, is a little bit different. Because this information is coming not from a script is coming directly from the server itself. So because of that, you get accurate analytics via Netlify. It's really super cool. And I really think it's a totally different approach than we've seen before to analytics, something that I've found to be just really, really, really inventive and amazing. So Netlify, for those of you don't know is a hosting company allows you to host your front end code, serverless functions, and do all really, really easily with their simple commands and just get up and running in no time. Netlify is one of our favorite hosts. And really my personal choice for if I'm hosting any front end code, it's going straight to Netlify. You can get up and running for free with Netlify. So head on over to netlify.com forward slash syntax and sign up just smash that link, just smash it and head over there. And you get continuous deployment, global CDN, https and all that for free. Dang, get it now go there. Okay, Netlify, what's up? Alright, let's get into this remote internet thing. If you can tell I'm highly caffeinated. And I'm ready to hear all about how you're how you're able to, you know, grab that that sweet, sweet internet up there in the Yeah, remote wilderness. - -3 -00:03:04,380 --> 00:09:17,070 -Wes Bos: I think this is it's kind of interesting because us web developers, we really can work from everywhere. I know that not everyone agrees that remote work is the best. And in some cases, it doesn't make sense. But it's kind of cool that if you can get internet and a space you can work from wherever it is that you want. And I've heard from from many people, when I was researching this to say like we had to pass on my dream house because the internet was two kilometers out and we just couldn't get it like. And that's it seems like getting internet in remote locations is getting much easier and much better, especially in Canada. And I think that's really cool, because then us as web developers are able to expand where it is that we want to live. So what my hope is today is to do sort of like a brain dump of absolutely everything I've learned over the last six months of doing research into how to get internet because my wife and I bought a cottage which is up near Gauguin parking Canada, and we're pretty remote, we're four hours drive from from where I live, and especially where we are, we're on a small little lake, we're probably half an hour out from the closest town where you can go buy gas and groceries and things like that. So before we bought the house, we did make sure that we could at least get a cell phone signal. And then we went ahead and bought the bought the cottage and moved in now now that we're here I've done a whole bunch of research as to how to get into it. So first thing is let's talk about what are some of the options if you live in a remote area and need to get internet so the the first and probably the most available one is Satellite Internet. So if you put a satellite dish just like a regular TV satellite dish on your property somewhere, you can ping a satellite and get internet. Now the speeds that I see people getting around here is it seems to be about five or 10 megabits down and one up, which is okay. It's not Great, and it's really finicky. So if you have a tree that goes in front of it, if it snows on the satellite dish, if it's raining all of those things, all those problems that you get with satellite TV, also go to your internet. So for nothing but terrible stories about Satellite Internet, so I started decided to just pass on that one other option that a lot of people are getting now is what's called local LTE. So not the LTE that you get on your phone. But what's happening is a lot of small internet providers are putting up towers that will cast a, I don't know, 510 kilometer radius around it. And there's even options where you can pay $20,000 and get a tower on your land, and then your neighbors pay you and you sort of you sort of make your money back double and 510 years, which is kind of cool. And that's using in Canada, at least we have this 3.5 gigahertz spectrum that went up for auction in the last couple years. And that spectrum is now being used by companies to do the sort of local LTE. So that's cool is just not an option where I live or where we have our cottage as well. But just because there is no local LTE tower that anyone has put up in our area in order for us to get that so we're just not within range. So that's pretty popular in like small towns, where maybe there's just like a bunch of farms and sort of a town and someone will throw up a tower and and broadcast LTE out to them. All their options are line of sight. So if you live somewhere remote, but you do have access to somewhere that does have fast internet, you can get these like parabolic satellite dishes that you can beam a signal from one to another. And if you actually go on YouTube, and check out Denmark fives house tour, it's pretty unreal, because he did my five lives in Canada. But he moved I think like I forget where it is, but north of Milton. And he wanted fast internet it just wasn't available where it was. So he put up this massive tower and just beaming in the internet from the closest city and because of the where he lived sort of on a hill, he was able to get line of sight directly to it. That again was not an option for me because where we live is called Hastings Highlands so where it's very mountainous where live so there was no direct line of sight to that I could even like put up put up a tower in the city and beam it in. So I looked into that just for for fun sake. But it wasn't an option we did end up going with was just regular LTE. So we do get very good cell connection up here or okay cell connection I'll talk to you about about it. And by getting a decent cell connection where we are, you can actually get internet over that. So I'll talk about the plans and the data and the speed and all that in just a second but I'm gonna dive now into modems and routers. So if you want to use the your cell carrier are one of the cell carriers as an internet provider, there's a couple things that you need. So first is you need a modem that takes a SIM card and you need like a router obviously. So most of the things that you can buy are modems and routers in one. The one that I settled on and in this is mostly because it's one of the best ones I found and I found it super cheap unlocked on online. It's the ZTE mf 288 I'll put all the links to this in the show notes. It has a battery in it so you can actually just like take it with you on the road if you wanted to do that. And it came unlocked which is cool because I've been testing a bunch of SIM cards from different providers where I am other other modems in this area or the Netgear lB 1120 really popular in this space is mophie at mophie network comm This is really big I did a lot of like YouTube research and surprisingly all of the research comes from like the RV and community where people just go off and live in an RV for for their entire life and they need internet wherever it is that they are so mophie makes a really good one that is it actually runs on open WRT which is that like custom router firmware. Hmm. Which is is pretty nifty custom router firmwares - -4 -00:09:17,070 --> 00:09:18,410 -Scott Tolinski: kind of scares me. - -5 -00:09:19,320 --> 00:09:25,710 -Wes Bos: Oh, really? No, it's it's pretty popular. Like do you remember like tomato firmware for your router? Or? - -6 -00:09:26,459 --> 00:09:36,530 -Scott Tolinski: I've never met with my router ever. I've always just rented from the cable company and I mean now we're on fiber, but I've always just rented the router and plugged it in and not thought about it. - -7 -00:09:36,900 --> 00:10:59,610 -Wes Bos: Oh man. No, I've I've run like custom firmware on my router for a long time. And it's cool because like if you want to get I also went to school for Telecom. So I know a little bit about this stuff. But if you do want to get into too that you can because it's hackable and they don't sort of limit what you can do. I did find that the mophie router is just this like No no name brand is what's Zed btw iE 826 t, which I don't know if that means anything to you. But if you want, you can actually just buy that yourself and build it up yourself. So you can you can get a modem card, slap it in there for a sim. And then you can also load DD WRT on it. I don't know if that's really something I want to do myself. But I ended up with a ZTE mf 288. And it works great. Now, one little thing that happened was when I tested when I tested my the speed before we bought it is that my phone connected to there's two carriers in Canada, Rogers and Bell and my phone connected to a bell tower just because where we live, there was no Rogers reception. And I assumed that it connected to the Rogers tower and it didn't. So I realized like we're gonna need some antennas here in order to get the the fastest speed possible. So when we turn this thing on, - -8 -00:11:00,660 --> 00:11:04,800 -Scott Tolinski: getting into antenna, I saw those antennas you were installing to. They're serious business. - -9 -00:11:05,010 --> 00:14:03,660 -Wes Bos: They're huge. Yeah, big because we turned it on and there's zero bubkis nothing. Zero signal. Guess. And I was like, Oh no, like this is this is awful because the carrier I wanted to use go sir Roger, it's not through bell. So it was like, okay, and like our own cell phones weren't even getting connection if we if we didn't connect to the bell tower as well. So I did a bunch of research into it. And there's two types of antennas, you can get an omni antenna, which is omni directional. It's just something you throw up in the air and it goes, it sort of looks for signal on all ends. And then there's directional antennas, which you point directly at the cell tower. So Omni is easier. Directional is better. So I went with directional, and I ended up getting these things called a Yagi antennas. They're made by Wilson electronics, but Yagi is the type of antenna and you run two of them, you run one horizontal and one vertical, or you just you just run them in 45 degrees from each other, or 90 degrees, I guess. And what that will do is it will get all of the signals, whether they're horizontal or vertical, I don't really understand how how frequencies work. But you're supposed to mount them like that. So we we got these and we plug the antennas directly into the router. So you take off the tiny little plastic ones that they come with. And you plug these ones in, I sent my brother in law up on the roof just to hold it up in the air. And then we used an app called Open signal. And that will tell you exactly which direction is the the cell tower of where you should be pointing it. And we lucked out because where we wanted to mount it was a break in the trees, which so it would, it's about five kilometers away, and we mounted it directly to it, plugged it in. And we went from no signal at all to four out of three out of four bars. Which is it's it's not amazing signal. But it was certainly much much better than absolutely nothing. So we plug that in. And right off the bat, we were getting 15 2025 megabits down and 1215 megabits up, which is for some people, that's awful. But yeah, that but a lot of people are messaging me being like that's better than anywhere in Britain. We're getting so certainly faster upload speed than I even can buy at my own home. And then that download speed, I get up to 30 megabits down, which is way more than you need about like two or three to watch a watch an HD YouTube video. So certainly more than than we could possibly need. Other things in this area are called cell phone boosters. So the college we have also has a metal roof, which is not good for cell signal, because it just blocks it. So you can get these little things called boosters where you throw a Yagi antenna up in the air. And then if you literally throw it - -10 -00:14:03,660 --> 00:14:04,620 -Scott Tolinski: in the air like you - -11 -00:14:04,620 --> 00:15:19,620 -Wes Bos: throw it up in the air Well yeah, yeah, yeah. Screw it does something nice and high. Yeah. Although not too high, because the longer the cable the the more frequencies you lose, or the more Yeah, the dBm. Yeah. So you want this sort of like I want with a 30 foot cable, which was long enough, thankfully. So these boosters, they take in a signal, they boost it, and then they rebroadcast it inside the house. And I have one of those, which ended up not using it just because of how well the the current one worked with us. So that's another option for people. If you're getting low cell signal LTE signal, you can just throw one of those up and rebroadcast inside the house. That's that would be even helpful if you just have like a basement apartment, something like that. And you want to get better, better reception. Let's talk about plans, data and speeds. So we talked about the speed that I got the plan I've tried a whole bunch of them. In Canada, all of the major cell phone carriers offer just like a data only SIM card. And they're they're decent. They it tends to be about, I don't know, $3 per gig, which is not decent at all. It's actually robbery. But like actually, - -12 -00:15:20,489 --> 00:15:38,970 -three or two, we I was doing the math and I was like, we'll probably spend like two or $300 a month. If we need to, like do a couple hundred gigs of it, we stop watching Netflix, things like that. But if we're just doing our regular Instagram, I'm doing video chat with you right - -13 -00:15:38,999 --> 00:15:41,040 -Scott Tolinski: now. I wonder how much it's costing? Yeah, - -14 -00:15:41,219 --> 00:19:13,200 -Wes Bos: kind of the kind of the the cost of doing business. So I did that. But then I also tried this is in Canada, you can get like I went to the states and eBay and bought both at&t and Google phi SIM cards that have roaming data enabled on them. And I'm currently testing those right now the at&t one is working really well. This is what I'm on right now. Which is so bizarre that it's cheaper to go to the states buy a SIM card and bring it back into Canada and operate on roaming. And then it is just to buy a local SIM card. For data only. That seems to be at&t seems to be the if you're in the States, that seems to be what everybody is using in the sort of LTE community. And they do offer. There's a couple of things out there that some people buy an iPad Sim, and use that some people buy if you go on eBay, you can find these connected car, SIM cards that you take out of your car and put it into your modem. There's also some resellers have unlimited data plans of via at&t. So I've used 80 gigs so far, and it hasn't been throttled. It's not perfect. It does go out every now and then I haven't been able to pinpoint why traffic on port 80 is sometimes blocked. Because it it thinks it's not a phone or something like that. I'm not totally sure why. But you Port 80 almost, I was surprised almost nothing runs on port 80 anymore, because everything is SSL. So that's not a huge problem, you can use a VPN as well, if you want to get around that I've had to jump on a VPN if i a couple times. But so carriers, I'm still testing it out, I might have to jump back to one of the Canadian carriers. If things go south, that's totally fine. But just know that if you can get an LTE signal, there are some decent ones out there, especially in rural areas. Because the throttling that these companies do after you hit however many gigs they allow you, the throttling is not like immediate, it's only they just do, they put you at the end of the line. So if there's other people using the tower, they you get they get priority over you. And if you're in a rural area, it's not like you're at a football game where there's thousands of people, there might only be 100 people in like a square 10 kilometers, something like that. So it's, I don't think it's that much of an issue for people who live in rural areas. So something to think about, I'm still testing them out. I have this like, I feel like a drug dealer because I have an old iPhone bag of SIM cards from all the carriers. And I'm just like testing them out. And like like if someone were to like, Yeah, it looks like a burner phone with all these different SIM cards, like I'm trying to sell drugs or, or like do SMS jacking or something. Yeah, but hilarious. I'm spending a little bit of money on a bunch of different plans just to test it out. Because like, this is this is my dream to be able to work from a cottage and have internet and there's no like, good solution. Everybody here uses Bell and it's like capped at five megabits down and it does one up and not doing Yeah. And you can live with that you get like 10 gigs a month or something silly like that. I'm like, come on, like, there is some stuff like the CRTC, which is like the regulatory body in Canada, they are forcing and working with the big telecoms, to be able to give internet to rural residents. That's - -15 -00:19:13,200 --> 00:19:16,500 -Scott Tolinski: another thing I can say. Rural, rural, rural, - -16 -00:19:17,039 --> 00:19:47,220 -Wes Bos: but it's it's kind of a joke, though. They're like, they always have these press conferences. They're like, we're bringing internet to everybody. And then you look at it, and they're screwing you on the cost and the speeds. And once you look into the actual details, it's it's not a good deal for very much at all. So I'm very much looking forward to Google's Satellite Internet, which is supposed to be lower level satellites that they're going to launch all around the world and then be able to get high speed anywhere, which is a balloon barrier. Am - -17 -00:19:47,220 --> 00:19:48,210 -Scott Tolinski: I making that up? - -18 -00:19:48,539 --> 00:20:49,200 -Wes Bos: I remember hearing they have balloon ones that they could throw up. Like if there's like a natural disaster that they're also launching just satellites. low low orbiting satellites, which is pretty cool. So I can't wait for that to come out as well. But I don't know i'm i'm two weeks in on this and it's been working great. I'm pretty happy with it. Other things to think about I have here is that the static IP is not almost never available. So if you need like an IP for your computer, then you probably have to go a different solution, or I've heard of people paying extra for a static IP and IP address that doesn't change for your router. But that's never been we've got cameras and things like that security cameras, all of these things, I don't need a static IP. And even if you do just use something like what D D and D DNS dynamic DNS where you can get like a domain name for your your computer, and then just port forward that to wherever it is that you want. - -19 -00:20:49,289 --> 00:20:57,210 -Scott Tolinski: Man networking is, this is something I have no experience in. That's like blowing my mind all of these things that I don't know here. - -20 -00:20:58,680 --> 00:21:20,300 -Wes Bos: It's really interesting stuff when you can you can get into it and figure it all out. I've got a bunch of the ubiquity gear here as well, which I haven't hooked up yet. But the the idea is that I'll have like a mesh network in the cottage, so that we get get access everywhere. And then they sent me a bunch of cameras as well, which I'm gonna hopefully install so we can check on the place when we're not here. - -21 -00:21:21,000 --> 00:21:26,190 -Scott Tolinski: Man, we're gonna do our home automation Part Two episode. Yeah, because there's so much stuff that has changed - -22 -00:21:26,549 --> 00:22:08,250 -Wes Bos: and changed so much stuff. I love this kind of stuff. It's it's not intentionally developer related, but I think it has 100% overlap in the interests of developers total fund to tinker with this stuff. So that's, that's it. Hopefully that answers any questions that you have. I know I've got a hundreds of DMS on an Instagram from people saying like, oh, like, I want to move remote or I'm I'm living in a tiny house or our internet situation sucks right now. And it's, I can barely do. Like, I can barely do a Skype with my coworkers. I need something better. So hopefully that helps you out. I'd love to hear any other tips that you have. Just tweet them at me. I'm at Wes Bos. - -23 -00:22:08,490 --> 00:22:12,900 -Scott Tolinski: Yeah. Cool, man. This is really, really fascinating. - -24 -00:22:13,140 --> 00:22:26,760 -Wes Bos: Yeah, yeah, the The world is changing. So I've also got my fair share of like, people being like, you should probably just relax at the cottage and not like have high speed internet. - -25 -00:22:27,420 --> 00:22:30,420 -Scott Tolinski: See there and you're working. I mean, it's like, yeah, - -26 -00:22:30,900 --> 00:22:53,700 -Wes Bos: I think for a lot of people that don't understand that like trying to, like craft my life in a way where I can enjoy my family, but also be like, work at the same time was about the pay for all the stuff. I enjoy creating stuff. Like, it feels really good just to sit down. I haven't I haven't been on my computer for like two weeks. And I sat down today and I was like, ah, feels good. I like being able to sit down and create stuff as well. - -27 -00:22:53,819 --> 00:22:54,360 -Unknown: Yeah. - -28 -00:22:54,779 --> 00:23:09,000 -Scott Tolinski: Yeah. That was another thing too. What happened to me? I like some I did something. And it was like a Sunday, I tweeted out that I had gotten a lot of Redux errors on Sunday. And people were like, it's Sunday, you should just relax. I'm like, Listen, like nine to five. - -29 -00:23:09,000 --> 00:23:09,930 -Unknown: I do. - -30 -00:23:09,930 --> 00:23:34,980 -Scott Tolinski: I don't work nine to five. I like you got to find the times that you can. But also, I just like it. I like working on this stuff sometimes. And like if Landon's taking a nap, like oh, you know, work work out in the yard. Yeah, sure. I'm gonna do that too. But I sometimes just want to, you know, work on some stuff that's non work related. Like I was just, it was like a side fun little project. And like, that's a that's where it's at. So, yeah, totally. - -31 -00:23:35,009 --> 00:23:41,250 -Wes Bos: Yeah, it just you do you, do you? Well, with that. I'm actually gonna take my girls fishing. - -32 -00:23:41,700 --> 00:23:43,860 -Scott Tolinski: Nice to catch some dinner. - -33 -00:23:43,890 --> 00:23:55,740 -Wes Bos: Maybe. Yeah, TJ and TJ can go well, thanks for tuning in. I think this episode is long enough. And we'll catch you on Wednesday. Peace. - -34 -00:23:57,750 --> 00:24:07,530 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax17.srt b/transcripts/Syntax17.srt deleted file mode 100644 index 5b1879618..000000000 --- a/transcripts/Syntax17.srt +++ /dev/null @@ -1,396 +0,0 @@ -1 -00:00:01,290 --> 00:00:16,460 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. Wow. Yes, I played it again. Yes. - -2 -00:00:17,009 --> 00:00:40,590 -Wes Bos: Oh, welcome to syntax, everybody. That is our $15. That was money well spent, which is over the top introduction. We paid I paid 15 bucks for that thing. And I told the guy to make it as over the top as possible. And I think it was a little bit offended. Because I think most people get those that actually serious. But I don't know, what do they get that's got - -3 -00:00:40,610 --> 00:00:56,160 -Scott Tolinski: no strap yourself in and that it's, it's amazing. It's everything you could hope for and more. And every time I hear those, those startings and podcasts I'd like wonder if they're tongue in cheek or not? And like, yeah, that's my instant judgment of a podcast. - -4 -00:00:56,160 --> 00:01:59,010 -Wes Bos: Are they doing this tongue in cheek? Or is this? Are they serious, serious about this kind of thing. So strap yourself in and get ready. So hopefully you enjoyed that. So today we're back apologies for last week, we didn't have an episode out what happened is a couple of weeks I was I was traveling, which means that we were we were supposed to just record on on Monday. And then I came down with a wicked, I was so sick, and not the good way that I just couldn't, I had a throat infection. And I couldn't put together an episode. So apologies for those who missed it, I was happy that some people actually noticed that we missed a week, which is great to hear. But we're back at it today. And we're gonna be talking about buzzwords and jargons are gonna tackle some of these things where you're like, what does that What does that even mean? Does it mean things? things. So we have Freshbooks today as our sponsor, thanks so much for them to sponsoring Freshbooks this cloud accounting software, they're my favorite. We'll talk a little bit more about them partway through. But let's let's talk to Scott, how you doing, Scott? Hey, I'm - -5 -00:01:59,010 --> 00:02:45,360 -Scott Tolinski: doing I'm doing good. I don't have a throat infection. So I'm probably a little bit better. Yeah. And, you know, just working really hard. And I launched a new react course on react 16 best practices and that sort of stuff on Friday. And it's like 23 videos. And it doesn't get into Redux II stuff yet. It's definitely for beginners. It's for that like entry level, React level. But it uses all of the the latest and greatest, like static prop types and async await and the fetch API and there's like a lot of great JavaScript stuff in there and not just great react stuff. So yeah, I think it's a pretty darn cool. I'm gonna be publishing some preview videos on my YouTube channel this week. So keep an eye out for that. Those should be up today. - -6 -00:02:46,410 --> 00:02:48,420 -Wes Bos: Wicked. That's good. That's good. - -7 -00:02:48,450 --> 00:02:51,960 -Scott Tolinski: Yeah. Other than the cold though, how was your vaycay? - -8 -00:02:52,260 --> 00:04:10,500 -Wes Bos: vacation was fantastic. Did we do an episode? I think we did an episode in between then. But yeah, I was just in New York for a little bit. That was really fun. But then I mean, the whole family got sick for a week for about three weeks. And now we're trying to try to crawl our way out of it. Now I have this really nice like boomy radio voice, which is kind of cool. Hey, but uh, hopefully I don't I don't cough too too much through this. But let's, let's jump into it. We've got a dev jargon buzzwords, we're gonna do our best shot at trying to explain what some of these things mean. And then there's some of them, I asked on Twitter for them. Some of them, we just don't know what they mean. Or we just like, I don't want to take a chance at trying to explain it. Because I don't really have a good grasp on how these things work. But we'll we'll go through and hopefully, you'll you'll be able to understand these are sort of these like, come out gunslinging interview process words that people throw out. And you're like, Oh, I actually don't know what that means you do a quick little Google before your actual interview. So hopefully, you can get you a little bit more comfortable with using these words that get thrown out. So you wanna you want to start us off with grabbing one of these, Scott will sort of go back and forth and do our best to explain them. - -9 -00:04:10,920 --> 00:05:34,649 -Scott Tolinski: Yeah. So now, if I want to take off the top of the list here, because I'm not sure I'm confident on the first one. But let's let's do we can start with serverless. Because that's a hot one right now. Yeah. serverless is pretty hot, because people are throwing it around left and right. Like, oh, you can do this service service server lessly. And what serverless is doesn't mean that there's no server involved, it means that the server is not one that you necessarily have to manage or worry about. And you're essentially able to write your server side functions off on a service somewhere. So whether that's Amazon's What does Amazon service lambda? It's lambda. Yeah. So whether you're using lambda to maybe hit that Like an API And have that like, one useful feature I've seen as remember that software, we were talking about cloudinary, where it like handles your image, image storing. And yeah, so basically, you could write your own version of cloudinary. So when you upload your image, it's hitting lambda, instead of a server, you manage somewhere, that lambda, that function, that's whatever could process your images and store them somewhere else, maybe in an s3 bucket or something like that. But either way, you're not essentially worrying about that being a server that you're managing somewhere. So it's essentially server less, but it's your server less, you know, it's not your, - -10 -00:05:35,190 --> 00:06:52,470 -Wes Bos: it's not your own server, it's kind of like that sticker that people have on their laptop is there is no cloud, it's just somebody else's computer. Exactly. And that's exactly what it is that sort of the draw to to using serverless. Or people call it functions as a service or function. I don't know, there's all kinds of different different words for a describing it serverless is one of the popular frameworks that allows you to sort of sit it on top of all these different cloud like Amazon, obviously, but like, you can also put it on top of Microsoft Azure, and all these different ones out there. The benefit to that is that instead of coding like one big monolith application, you you code these these little functions. And then when that function gets really busy, though, one really good example is code pen does sass pre processing, or babble transpiling. And sometimes, a lot of people want to do sass pre processing at once. So what they do is they just kick that off to a separate function that lives in the cloud. And then if a lot of people are doing it at once, that just that function will spike itself up and then spike itself down. And you really only have to pay for the server time that that one function has done. So it's like sort of like infinitely scalable without having to maintain a whole rack of servers or something like that. - -11 -00:06:52,649 --> 00:07:10,649 -Scott Tolinski: Yeah. And that and it also prevents you from potentially or runaway, or just a huge amount of people potentially crashing other aspects of your site, right, it could quarantine an issue, because that one particular issue would be sort of off on its own and wouldn't have the potential to bring down anything else. - -12 -00:07:10,680 --> 00:07:22,740 -Wes Bos: So Exactly. Like say, for example, you're selling stickers that were silly for $5, you wouldn't actually bring down the important aspect of your business, which would be people trying to buy $130 courses. - -13 -00:07:22,800 --> 00:07:24,000 -Scott Tolinski: So what an example? - -14 -00:07:24,089 --> 00:07:34,199 -Wes Bos: Yeah, what if I don't, I just just had top of my head and might it might accidentally happened to somebody where it could really affect their how their business works. But you know, it's a good example, right? - -15 -00:07:34,829 --> 00:07:38,790 -Scott Tolinski: Yeah, yeah, no, it's perfect. And all real world. - -16 -00:07:41,310 --> 00:09:47,030 -Wes Bos: Let's move on to the next one. Will may find a good one here that we've got here. Um, composition, this is this is a hot one, a lot of the ones that we we've got here are sort of like loosely related to functional programming. And maybe I'll just throw out a little, a little plug for fun, fun function, the YouTube channel, because anytime you want to understand how these things work, and not end up curling in a ball and crying because these are so obtuse examples, go to the funfun function, he does an awesome job at explaining all these things. So what is composition? Well, um, you hear this a lot, especially in react. And what I understand it to be is that if you have a function that does something and you want to have that function, do more stuff, it doesn't necessarily make sense to just like, make your one function do a whole bunch of things, what you rather do is you rather make a whole bunch of little functions that do one thing and one thing well, and you sort of click them together to make one big function. So for example, in react, we often use composition where you might have like a component that fetches your data and displays it, or sorry, you might have one component that that displays your data. And then you might have like another function that will go out and fetch your data and do your caching like something like Apollo, what you would then do is you you sort of wrap the fetching component around your, around your other displaying component, and then together, they make this one sort of super component where the one function eats the other component, and then returns us returns a new component from there. So like the concept of a function, returning a function returning a function and each way along each way each sorry, each step along the way, you're adding some sort of functionality or some sort of value to that specific function. Yeah, so I don't know what do you think, Scott? How was that? - -17 -00:09:47,150 --> 00:10:04,740 -Scott Tolinski: I think that was great. I mean, it's pretty much the the main context that I use it in is react that is specifically composing data containers and that sort of stuff. But yeah, and I think that's a better way to I could have described it. So definitely, definitely like the F Exactly. - -18 -00:10:04,860 --> 00:10:13,770 -Wes Bos: If you want to function to do more than one thing, you can click together multiple functions. By composing them together. I guess that's the simplest way that we have there. - -19 -00:10:14,370 --> 00:10:55,380 -Scott Tolinski: Yeah. So the actual definition of the word composition is the way in which a whole or mixture is made up. And I guess that kind of works very neatly with how you just described it there. So it's nice, sometimes done, I guess, get an idea about like these words and why they were chosen to explain. Yeah, like what they're explaining. Sometimes I have a hard time with that. Like, why the heck is this word being used for this thing? Like, what's the connection there? So that that's one that coming from a music background, you hear the word composition in so many different contexts from that, it was a little bit tougher for me to get my head around, like, what the heck is this actually talking about? So definitely. - -20 -00:10:56,160 --> 00:10:57,900 -Wes Bos: Awesome. We got an X for us. - -21 -00:10:58,470 --> 00:13:17,940 -Scott Tolinski: Okay, let's do progressive enhancement. This is one that is, is pretty important with all of these new fancy features coming out non stop nowadays. Yeah. So for me, progressive enhancement is sort of taking care of your, your, your audience, or your users that don't have access to the latest and greatest features, at the same time, being able to code with the latest and greatest features. So like I mentioned, the first time I came across progressive enhancement was talking about CSS, when CSS three came out. And it was sort of like, here's, you could do you know all of these great new things with CSS three, whether it's gradients or whatever, but you are fonts, but you might want to have this backup of CSS that handles the older, older people. So what progressive enhancement means is that the system itself doesn't break for people with older browsers, or who aren't using the latest and greatest stuff. But they might not get the same experience, right. So at some point in the past, like IE six, I remember, ie seven or whatever, you develop websites, and you'd have to redo the entire way you were doing your website just to accommodate those people. And instead of accommodating for those people in that way, you are giving them a different experience that just doesn't have necessarily all of those advanced new features. And then the people who can have the advanced new features, get them still. And they you know that you enhance the site or the application progressively with the new features? Exactly. I think another good example, is geolocation. So if you have a map page, where you have a store, locator, you ask the user to input their postal code or zip code, whoever, if they have geolocation available in the browser, you can progressively enhance that experience by by just generating it for them and they don't have to type it in. Right, it's still works at the end of the day, it's just a little bit different for users on older browsers. Yeah. And that's I think it was a nice little shift when people started talking about progressive enhancement, because it stopped you from thinking, Oh, I can't use these things too. Well, how can I make this experience still workable for these people and and still provide this great experience for the people who have the new great features, because the new great features are usually new and great, you know? - -22 -00:13:18,930 --> 00:15:01,710 -Wes Bos: Exactly. Next up, I have one called a singleton. And this is actually not something I see used very often at all. But it's one example that does use it is mongoose when you want to interface with your database. So the idea behind a singleton is that when you have some sort of package, and you need to configure it like connecting to a database, you just configure it in a one of your files. And then if you were then to require that package anywhere else in your application, it would already be set up, it would always refer to that one instance where you've configured it. And this is really only ever a good pattern for when you absolutely only ever need one of those in your application. And you don't need multiple router might be another good example of a singleton where you your application will only ever have one router. So you set that thing up in one file. And then anytime that you require that router package from NPM, it's going to be already set up. A lot of people don't like this, they rather import the stuff that they have, do their configuration and then export that configured version of the package. And then and then just use that from now on. But mongoose is a really good example where if you want to reference any of your models, or you want to be able to grab your database without it being configured where it's configured in a different file, you can just require mongoose directly and it already knows about it being it sort of goes, it's sort of counter to what we always do, which is have you shouldn't assume that these things are sort of global and globally available throughout your application. But in some use cases, we do see this sort of stuff. Singleton pattern being used. - -23 -00:15:01,800 --> 00:15:11,430 -Scott Tolinski: Nice. That was a, this is one that I was hoping you would take, because I didn't have a good explanation for what it was. And if I got it on that, so - -24 -00:15:11,460 --> 00:15:13,020 -Unknown: yeah, no nice I go. - -25 -00:15:13,170 --> 00:15:21,960 -Scott Tolinski: Yeah, it's it's a lot of these things you use and you know, and you've experienced, but you don't know you don't combine the name one to one with the tech Yak. And - -26 -00:15:22,470 --> 00:15:48,660 -Wes Bos: it's something like, I never really understood why it works that way. I always like I remember, for years, I use mongoose. I'm like, why does it just know like, how come all my other applications I don't, I always have to, like, reconfigure them, or export a configured version of it. And, and with mongoose, I just have to simply require it and it knows about it. Right? It's kind of kind of nice. But also, it could lead to some problems. If you're, if you don't, I don't know how that exactly works. Yeah. - -27 -00:15:49,050 --> 00:17:37,980 -Scott Tolinski: Yeah. Okay, so I'm gonna take on API and SDK here, which are great for being jargony. Because they're acronyms. So you know, they're easy to just be like, Oh, that's the API. What the heck is an API like if especially I mean, how many people know the actual acronym for API off the top of their head is Application Programming Interface, which it says what it is right there, right? It's an interface, where SDK is a software developer kit. It's like a kit for for software development. So to get into like an API, an API is a way to interface with someone else's application essentially, like that. You could think of it like YouTube has their website right in their website is all pretty nice. And then they have their API, which is the API is the code that I can write that connects to their system, which is available, right? There's their system is available publicly with a key. So I give them a key to say, let me into your system. And let me grab some information. And that way that that interfaces there is is the API from for me connecting to YouTube to being able to say, on this path, give me this data in this data comes back to me. And API's can be all sorts of different stuff from like I said, just grabbing data, but you can also use API's in a way to like to keep with the YouTube thing, if you want to update, you know, your description on your video, you could do that through an API or if you want to charge payments, you could do that through an API. So an API is the interface that's made available to you to work with someone else's someone else's application, essentially. I mean, it could be your own application as well. Just another another thing that you're interfacing with. Do you have anything to elaborate on that before - -28 -00:17:38,189 --> 00:18:43,070 -Wes Bos: I get? Like when I think of API, that's where my mind goes to is like some sort of endpoint that I can ping in work with YouTube or grab a list of dogs or like it's basically it's kind of synonymous with like a REST API, being able to push and pull data from the services. However, sometimes you also hear people talk about API in terms of, I don't like the lodash API, or I love the lodash API. And then you think about like, like, does she have like a REST endpoint that I have to hit? And API essentially means just like, how do I talk to this computer? And if people are talking about a software API, then often what they're they're furring to is like, what are the names of the functions? Or how do I interface with this specific database cache? That's, that's the API. So that's how I actually talked to it as well. So it's kind of one of those like broad things, that means a couple different things. So if people if you hear people saying it, maybe just pause for a second and try to understand like, do they mean like a Data API? Or do they mean being able to interface with this computer? Or what do they mean? - -29 -00:18:43,169 --> 00:20:07,340 -Scott Tolinski: Yeah, at the end of the day, it's just how you're interacting with with something. Right, exactly. Okay. So SDK, which is software developer kit. And the software developer kit is actually another pretty encompassing thing. It can include all sorts of stuff from actual programming languages, to libraries, to text editors, and IDs, and common tools and utilities. Like, for instance, I'm gonna keep, here's the and the Android SDK includes an ID, which is Android Studio, and includes the modifications to Java, that you would be using to interface with Android, it would include all of the tools like the command line tools that you would use to, like, let's say, I want to install because because androids open source, I can go and grab it and a modified version of Android from the web, right. And then using these command line tools, I can push that directly into my phone and install a brand new version of this operating system that someone else created. So those those command line tools that come in this are also part of the SDK. So it can be anything like I said, from libraries, languages, IDs, utilities, all sorts of that stuff is included within an SDK. And it's primarily for like its its purpose is to help You build stuff. So it's a software development kit, right? It's a kit of stuff that enables you to build other stuff. - -30 -00:20:08,940 --> 00:22:56,490 -Wes Bos: Great, I like it, I'm going to tackle one here, which is pure functions and side effects. So let's start with the what a pure function is, a pure function is that is a function that will always hundred percent of the time return to you the exact same value, given that you provide it the same value. So let's a very simple example, add a MP, if you were to pass it one into that as a pure function, that will always return three, because given that you pass it the same values, it will always and that makes that makes your function very easy to unit test. Because there are no surprises there, nothing, nothing is going to happen 100 years from now you run that function, it's going to do the exact same thing. The idea with a pure function is that you don't ever reach outside that function to modify external data, or maybe display some data or, or anything like that, that function is simply just something that takes in values via the arguments and returns to you some sort of computed result, that will always be the same. Now a side effect is when you need to make some sort of mute, we'll talk about mutation a second when you need to reach outside that function, and change something. So sometimes you see people writing functions where maybe like a plus b, okay, it will return that value. But I'm also going to put the answer in an array that I also have some sort of have outside of this function, because I need to store that value, that that is a side effect. Because when you run that function, it's going to reach outside and modify something, something other than the function that you are working with. And that can lead to problems problems down the road. So another example might be is if you have like a calculate total, where it takes in the amount that you have, and it will add sales tax and tip or whatever. And that's great, because that'll always calculate the value. But if you were to also inside of that function, like grab a div and update that on the screen, that is what is called a side effect, because you're reaching outside and updating and there's a chance that that div might not be there, you're you're sort of not keeping it sort of what's the word for it, you're not, you're not keeping everything nice and tidy inside of that one side, that one function, obviously there is there's a point you have to make a side effect at some point. But it's really nice to sort of code your entire applications library of functions in these pure functions. So that you, you always know that you're going to get a result that comes back. Same with if you're ever working with dates, that's that's not going to be a pure function, because time changes. And you will every time you run that if you're working with the date, if you run it tomorrow, you're going to get a different result. And then what you have today, so that's sort of the idea behind pure functions and side effects. - -31 -00:22:56,520 --> 00:23:09,840 -Scott Tolinski: Yeah, and one of the upsides is that they make testing a lot easier. Because if your test case is going to pass and you know, your functions always going to give you the same kind of answer, then you know, that anything you give it is also going to pass Exactly, - -32 -00:23:09,840 --> 00:23:46,740 -Wes Bos: yeah. And the idea is that if you ever have anything that is variable, like a date, you should pass that date data in rather than generate it inside of the function. So if you're trying to make a function that calculates how many days until Christmas, you shouldn't figure out what is today inside of the function, you should pass in what is today into the function. That way, when you're testing it, you can always pass it October 15, or whatever date you want. And you will always get a very the same result. Because the difference between October 15 and December 25 is always going to be I don't know, however many days that exactly is. - -33 -00:23:46,770 --> 00:24:41,880 -Scott Tolinski: Yeah. And this is also a plug for that date FNS date functions library that Wes told me about a replacement for a moment. Yeah, that was a lot of episodes ago. But yeah, where moment is not pure immutable. And obviously working with date functions isn't. This is and that can save you so much time and headache when working with dates. Because that is a thing is even if you know that working with date functions is going to mutate your date or whatever. It's easy to forget that in the moment when you're coding something and then all of a sudden, you know, something's not what you'd expect it so again, yeah, working with dates. I love the date FNS when I when I changed it over everything just got a little bit nicer. So So speaking of date functions, you know, it's really tough to keep track of is the dates for when your invoices are due. And you know, it makes that really easy. - -34 -00:24:42,210 --> 00:25:53,820 -Wes Bos: It rashba sir. Wow, I we've never had a really good segway on this podcast. We're getting good at this. We got to our intro, and now we've got segues. So Freshbooks is cloud accounting software that small businesses, freelancers larger businesses use to keep track of their books. So I've been using myself for, I don't know, eight, eight years or so. And all of my businesses history is in it. My accountant loves it. Because I just take a dump of all of my data at the end of the year, I use it to keep track of invoices, who's paid me who has not paid me I have like four or five different currencies, running inside of that all of my expenses go in there. All of my tax reporting comes out of there at any given time. And if I ever need to see like where I'm at and a business in at a given time, like how much have I been spending this year, I can just run these really nice reports. So if you are a freelancer, if you are a small business just getting started, and you need to send somebody even just one invoice, go ahead and sign up for fresh books, go to freshbooks comm forward slash syntax, enter syntax into the How did you hear about us? And you'll get one month of free with that. So thanks so much to fresh books for sponsoring. - -35 -00:25:54,480 --> 00:26:15,180 -Scott Tolinski: Nice. Yeah. So while we're on the topic of, you know, pure functions and stuff like that, I figured I would take a stab at immutable and mutable, which are to meet if I'm being entirely honest, are you while they're accurate words, they're sort of, I don't know, unnecessarily verbose that it meant - -36 -00:26:15,180 --> 00:26:26,910 -Wes Bos: like, when I first had it, I thought that like mutable means that you can mute it. Like it can be quiet. Yeah. And I didn't understand it at all. But then when I switched to like Ninja Turtles, I made a bit more sense. - -37 -00:26:27,270 --> 00:28:08,010 -Scott Tolinski: Yeah, right. I just I just don't I get I mean, I get it. But like, Man, you couldn't have come up with a, I don't know, makes a sound cool. more easy name. Yeah, yeah. So mutable and immutable. They're, they're fancy words to get thrown around when you're talking about stuff changing. And, and then you know, programming, we're talking about variables, right? So if you set a variable, and then you then let's say we set a variable name, and then I want to reset that variable name is now going to be equal to something else. So first name is equal to Scott, and then I set that same name equal to Wes, what that's doing is that's mutating that string. And so muting that variables. So that string is is mutable, right? That is, it has been changed, that variable has been changed and is no longer the same thing. In addition, you could also say that, like Scott, and then adding on a Y and having it Scotty, but having it set to the same variable that it was set, is also mutating that string, it's modifying it. So I mean, you could, in my opinion, you could probably just change these to like not modifiable in unmodifiable, I don't know any better. But the immutable is the exact opposite, it's constant, it's not going to be changed. And you pretty much at this point, you're going to be wanting to do most things as immutable. So that's why they they mostly give you the advice now with es six is to always use constant variables, because those constant variables are going to complain if you are setting a constant variable or mutating it to something else either than it originally was. So yeah, mutable is chain can be changed or is changed. And immutable is something that is not changed or cannot be changed. - -38 -00:28:08,730 --> 00:30:03,390 -Wes Bos: Yeah, that's great. I think sort of the rule of thumb with this kind of stuff is that anytime you're trying to overwrite a variable like variables, then it's not paper, they don't grow on trees, you can make a new variable. So rather than modifying the existing one, just make a new variable for the value that you do have. And then we also talk about like immutable and mutable methods. So if we take our array, for example, we often have things we have slice, and we have splice, which, first of all, like, but second of all, slice is immutable, meaning that you do not change the original values when you modify it. So if I would, if I had an array of 10 names, and I wanted names two through five, I would slice two comma five, and I would get those values where is if I were to use splice, it works very similar in that it'll return a portion of that array. However, splice is mutable in that it goes back and harms the original array, which is generally not what we want to do. Because you don't know what what that are, you might need that value in the future, something else might be bound to it. And that's that's the whole reason in react where why we don't just modify state directly on the state object, where we use this whole take a copy, modify your stuff, and then call set state and you sort of put it back in Facebook has taken it even further with immutable j s. And rather than using arrays and objects and stuff like that, you can use immutable j s, which will give you your own set of array addition object ish kind of things, and it will allow you to modify the values of your data without actually harming them. or going back and modifying that the original data? - -39 -00:30:04,020 --> 00:30:51,600 -Scott Tolinski: Yeah, I haven't used immutable JS myself. But I, there's I guess there's no reason why I haven't I just haven't explored it or anything like that. And to me, I think a lot of it came from, like, having an understanding of using this stuff came from starting to use more functional things like, yeah, you know, even in starting to work with lodash. And seeing how you're creating a new array or a dot map, right? You're creating a new array, when you are modifying your array instead of overwriting an array. And to me that practical example of this stuff, why, why it works out well, for you really sort of set me over the edge in terms of understanding why it's important and why you would want to keep things immutable. Exactly, exactly. Plus - -40 -00:30:51,600 --> 00:31:29,880 -Wes Bos: it, it helps you like just dance around some of these just annoying bugs, where sometimes you, you forget that you actually removed it, you use splice instead of slice, and you removed it from the original array, and then you're confused as to like where your data went and, and whatnot. And then I guess it comes back to that whole pure functions where you don't want to be modifying your array, you just want to be returning a new subset of the array. And that's why you should go to my JavaScript 30 course and do the array cardio ones, where we do a whole bunch of just map, filter and reduce, because those are all three of those returned you a new array, rather than modifying the original one. - -41 -00:31:29,970 --> 00:31:56,010 -Scott Tolinski: Yeah. And if there's some things that are going to, like straight up, make you a better JavaScript developer, like hands down, it's understanding those array functions, array methods, because I'm telling you, when when I learned that stuff, all of the sudden, you feel like you have superpowers, you throw a map and a reduce on here, a map and a filter or something like that, all of a sudden, you're like, wow, that would have taken me so many lines of code before to do this. Definitely makes you feel very, very powerful. - -42 -00:31:56,010 --> 00:32:01,830 -Wes Bos: It's amazing. Like, do you remember the days of creating like an empty variable? And then using a for loop? Oh, my - -43 -00:32:01,830 --> 00:32:08,310 -Scott Tolinski: god, it wasn't even that was like a couple years ago. Yeah. Like, what? Like it was - -44 -00:32:08,310 --> 00:32:20,400 -Wes Bos: when I started react, that my whole, my whole JavaScript, like got a whole big upgrade, because react forces you, I believe into becoming a much better JavaScript developer. Yeah, I - -45 -00:32:20,400 --> 00:32:36,750 -Scott Tolinski: know, dot map looks scary for people who have never used it. And if you go into react, you're like, Where's my for loop? Or where's my for each, and then why don't have to use this map thing. And then all of a sudden, you're like, wait, map is awesome. And all of this stuff is awesome. And I totally get it now. - -46 -00:32:37,380 --> 00:33:56,460 -Wes Bos: Exactly. I'll take a stab at isomorphic, or universal JavaScript, this is very, very fancy way of saying it also works on the server. So if you're writing any sort of JavaScript these days, it's great if you can take into account that people might be running this both in the client, but they might also be running it on the server. And you hear people talking about isomorphic react, that means that you'd be able to render out all of your react templates on the server with server side rendering, there's really not a whole lot to making sure that your your JavaScript will be universal or isomorphic. Other than sometimes you you reach for a window.on. Maybe sometimes people use Windows set timeout, when you should just be using just set timeout, because you can't assume window when you're in Node land, and other things like event listeners and whatnot, but no jQuery arm then. Yeah, obviously no jQuery, things like that. I've been been billing quite a few universal apps lately. And I do often run into just plugins that aren't server side rendered, or they're not friendly for that. And in that case, you often just have to submit a little pull request where you check for a window. And if it is, if there is a window, then you just skip that portion. Because obviously, you're not going to want to render that piece on the server. - -47 -00:33:56,520 --> 00:35:23,130 -Scott Tolinski: Yeah. And one thing actually, I really liked about Meteor is they have a method called is client. And because of that, he made a his client component. And now anytime I have something like that, I can just wrap that component is in his client. And it's not even going to attempt to render that on the server. If it's not essential. I don't have to like, I can worry about that later. It can like save me some headache at the very moment. I also did the same thing with the route, let's say a route is having issues. It's like, here's a client route. And that route isn't going to be server side rendered at all. save you a little bit of a headache there. But yeah, I so morphic stuff is really exciting. I mean, can you imagine writing? I mean, this is gonna sound ridiculous. But can you imagine writing a WordPress site and having that that PHP be, you know, client side as well? I don't know. It's kind of mind blowing to think about because the PHP is generating HTML for you. But imagine that your WordPress application was all of a sudden running the client side. I don't know it's, it's something that we've never been able to do is right. Everything client and server side on one language is you never been able to do it until now really with node and in things like react and stuff like that. So it's just super exciting. And definitely one of those things that is kind of worth the pain in the ass that it can come along with it. But it's definitely, I would say definitely worth it to have that client and server side connection. - -48 -00:35:23,690 --> 00:35:29,070 -Wes Bos: Yeah, yeah, absolutely. Next up, I think it's your turn Wait, for me, - -49 -00:35:29,150 --> 00:37:17,460 -Scott Tolinski: let's do micro services, because we already touched a little bit on this with serverless. Right? Yeah. And that serverless approach, like let's say, we said, Were you having maybe your image uploading moved somewhere else, right, that image uploading chunk is now what's considered a micro service, it's a service that you're utilizing, that is decoupled from your application, you could go and then use that on another application, potentially, you know. So you know, the whole thing is that microservices are these small little services that you write that are decoupled from your application, and basically, you would write them to small sort of handle one thing, and only handle that one thing. And that way one, you could reuse them, you could have it not bring down your entire application, if it goes down, you could scale this service independently from the rest of your application, potentially saving you a lot of money. So there's a lot of a lot of upsides for micro services. The I guess the downsides would be that there's more stuff to manage and more places that stuff ends up being. You know, I don't know if you could consider, no, you can consider these micro services. But when I had my my store, and my website is both sharing a database and a whole bunch of code and all this stuff, they were separate services for the same the same code base, and no other they weren't micro, they were still sort of separated. And that that approach can like definitely be very nice at times. And other times. Maybe you want things tightly coupled. Yeah, one one huge pain point I'd run into with serverless, and microservices, just being able to reshare data between my different services, and it's sometimes is a huge pain, just to be able to share simple things. - -50 -00:37:17,850 --> 00:37:20,420 -Wes Bos: Yeah. Between all of your different functions and services. - -51 -00:37:20,459 --> 00:37:51,150 -Scott Tolinski: Yeah. And it I should note that micro services are not inherently tied to serverless. Although I guess I don't know how else you would I mean, you would have your own server and whatever and manage them. Yeah. But it's basically it's the the server lists, or the micro services is just a software pattern. And this is a software pattern. That is I don't think it's I mean, it's definitely not web specific. But it's I don't know, when it was invented or something like that. But it's it's definitely been around for a little bit and exists. Yeah, - -52 -00:37:51,209 --> 00:38:28,400 -Wes Bos: I think, I think big companies that move slowly invented it. So they could just be like, micro services is a fancy way of saying, we'll just frickin do our ourselves totally outside of your application, and call it a micro service. Because we don't have to, we don't have any of the technical debt or emotional baggage that comes along with this massive app and whatnot. So you definitely, yeah, it's huge in corporate world, which is such a funny way of saying, like, we you guys are moving too slow, and we need to build our own thing totally outside of what you're building. I'm gonna take a stab at another hard one, which is a closure. - -53 -00:38:28,710 --> 00:38:30,650 -Scott Tolinski: Yeah. And like this one? - -54 -00:38:30,980 --> 00:41:03,300 -Wes Bos: Yeah. Let me real quick scoping. I realize a lot of people know what scoping is, but scoping is where are my variables available to me and and if you have a function and you make a variable inside of that function, then your variables are scoped. Or I always like to think of the have a function or a block with curly brackets, I always like to think of those as little fences, and they're keeping your variables in they're scoping fences, right? So scoping answers the question, Where is my? Or where are my variables? And where are my functions available to me? Now, what is a closure? A closure is like when you have a function and you you create a function, you have this scope, and then inside of that function, and you make a variable, the variables are only available inside of that. So the idea with a closure is that sometimes you need like just a couple of variables, and then you need a function, it wouldn't make sense to, like sometimes you need to reach outside that function and update some sort of variable. Well, one of the solutions to that is just have a bunch of global variables, and then have your function and have your function reach outside and update those global variables. Well, that's kind of what you want, you don't really want to have a whole bunch of global variables. So what you can do is you can create one function that creates scope for you, you can make a bunch of variables inside of that, and then you can create a second function inside of that original function. That will will then reach outside and update those variables. Now, the benefit to that is that from your source For your parent function, so you got, you got a function, highlight your high level function, then you have your function inside of it, you can return the lower level function from that higher level function. And then what happens is that, you've then created this sort of like, kind of like, I don't know, the space, that is called a closure, where your function will be able to sort of have its own internal scope and its own internal data set of those variables, and then be able to use it. So you can create multiple instances of that function. And each function will have its own scope, and it will have its own closure variables that are available to you. So it's kind of like a, I don't know, it's like you have a box, but then you got to put extra stuff that you need to put in the box. And and then what you can do is you can put the smaller box and your extra stuff, which is variables inside of a larger box. And then you can take that box and nice and cleanly and bring it anywhere without having to worry about bringing those variables along for the ride as well. I don't know if that was good or not. But yeah, that's how I understand it. - -55 -00:41:03,330 --> 00:41:33,210 -Scott Tolinski: No, I think it works. And I mean, another thing is, you could go back to the actual definition again of the word and it's basically like the, the range of view something has right. So like this, the scope is the the range of view that a function or you know, your current workspace has right, What can your What can your current function, see? What can it access? What is it was looking at us, right? I guess that would be in my opinion, the scope? When you think of it like a binoculars What can you see? Exactly? Yeah, what - -56 -00:41:33,210 --> 00:41:41,460 -Wes Bos: do you have access to? Good? Ah, that was a guy. So we did scoping and closure, what else you got for us, Scott? - -57 -00:41:41,480 --> 00:42:27,420 -Scott Tolinski: Yeah, so I'm gonna do another pattern here, which is MVC, which is been around since the 70s. It's been around forever. And it basically the MVC stands for model view and the controller, and it basically is a separation of concerns in your application. So that model handles the data, the view handles what the user seeing, and the controller sort of manipulates the data and handles the connections, right? And it's funny because MVC is used throughout a lot of different software platforms. It's Ruby on Rails is an MVC framework. Django was an MVC framework. And I would you say, I guess, I don't know, there was arguments whether or not Angular was a Angular one was an MVC framework at some point for the front end. - -58 -00:42:27,750 --> 00:42:33,540 -Wes Bos: It was like, let's say it was people come in with these PVC, PVC. - -59 -00:42:33,570 --> 00:43:39,570 -Scott Tolinski: Yeah, right. I know. And that was always kind of ridiculous to keep track of. But but it's funny because in you know, even though it seems like model view controller is like, pretty specific there, i a lot of the frameworks then kind of took it and made it mean, sort of what they wanted it to me, and I don't know, if you, you worked in Django or rails at all, but they both were MVC, but the, I'm trying to remember which one it was, but one of them had the model as the controller and the controller as like, it was like swapped around a little bit from the other one. So like you weren't defining your data in man, which I'm trying to think of which one it was, whether it's Django or the other one. And so that could make this stuff kind of confusing. Because if you're looking to go from rails to Django, you got to suddenly ever shift, what you're talking about pretty instantly. But yeah, so it's pretty much a way of structuring your application. And it's it's not used in react land too much, because react is just a view, right? So react would just be the view of the MVC. - -60 -00:43:39,860 --> 00:43:40,860 -Wes Bos: Yeah, yeah, I - -61 -00:43:40,860 --> 00:43:44,400 -Scott Tolinski: don't know. You don't hear MVC talked about as much these days. - -62 -00:43:45,450 --> 00:44:38,700 -Wes Bos: Yeah, in my, my node course, is MVC. And the way I explain it is, you've got data, which is your model, you got templates, which is your view. And then you need somebody to like, sort of, like, do the logic and put these two things together. And that's, that's your controller. So I always like to talk about it is everybody has the friends, where you're one of your friends has booze, that's your your data. And one of your friends has like a place to party. But you'll always have those friends that like, or you have that one friend that is always texting and calling and organizing everything. That's your controller, and your controller is talking with your friends with the booze and your friends with the party. Place the party and your friend that does all the texting and calling of everyone is your controller that will sort of get everybody together and pull in the things that are needed in order to make that party happen. Yes, stupid. Example number two today, - -63 -00:44:38,760 --> 00:44:40,440 -Scott Tolinski: dude. Those are the best though - -64 -00:44:40,470 --> 00:44:49,950 -Wes Bos: those like those. Yeah, you think it's dumb now but then like some couple months down the road, you're gonna be shaking your head and like that last. That's a good example. - -65 -00:44:50,520 --> 00:44:53,610 -Scott Tolinski: Those are the ones that stick with you the Exactly. - -66 -00:44:54,030 --> 00:45:47,610 -Wes Bos: I got a quick one here which is bike shedding. You hear this a lot of people arguing on Twitter. shedding is where you argue about the color of the bike shed when you have much greater bigger things to actually worry about, like, what material should you be using? how big should the bike shed be? What in how should it be built? Right? So the classic example is people sitting around and arguing about semi colons, or tabs versus spaces. When it does not matter at all. At the end of the day, who cares? It's fun to sit around and bike chat about those things. But we've got much bigger problems, which is trying to understand immutable JavaScript and how to architect and design patterns and things like that we have a bigger stuff at hand that we should probably be talking about. So that's what bike shedding is. Let's don't let's not bike shed on tabs versus spaces. Let's talk about some stuff that actually matters. - -67 -00:45:47,640 --> 00:48:19,410 -Scott Tolinski: Yeah. And I joked, when we had, when I found out what bike shedding meant that you should just rename Reddit to the the bike shaft because that's, that's like, the entire purpose of that website is to argue about stuff that doesn't matter. So yeah, bike shedding is definitely one thing that I don't know, I feel I don't know, if people like can are realizing they're doing it while they're doing it, or they don't realize that these things don't matter. They're just arguing for the sake of arguing about something right. But at the end of the day, like I think it's something to be cognizant of, like, is this something that matters in the bigger picture? Is this one little change, in fact, going to have an impact in any sort of way? meaningful way? I guess. So. Yeah. I like bike shedding is a term I just learned today. And definitely, like in that one, let's, uh, I'm gonna keep up with another fun fun sounding one. And just do tree shaking, because it has some great imagery as well. associated with it, I can go into my yard and shake a tree. So really, what tree shaking is, is the removal of dead code that you're not using, right. So like, let's say you have a JavaScript application. And, and there's whether or not like a component. Like, imagine this, you built this component, this component sitting here, and it's being wrapped up in your bundle, but you're not using it. And your your, your bundler should be smart enough to know that you're not using it. But if you're using just something generic, it's gonna just bundle that extra code in there. And it's gonna add on some kilobytes here and there, right? And so a tree shaking does is it goes through, and it's basically a part of your build process that's finding the code that's not being used or being executed whatsoever, and just shakes it out of there. It's like, a bunch of dead. Yeah, yeah, it's a bunch of dead leaves on your tree, you go, you shake your tree, all the dead leaves fall out, and then your tree is a little bit lighter weight. So it's a it's a nice because your tree loads faster, your tree loads faster. Yeah. What's great about it is like in this modern modern JavaScript world are building these giant client side apps. And people don't realize, unless you're going in your your network panel, and you're seeing Holy cow, that JavaScript bundle is nine megabytes or Yeah, you know, just this giant or something, you have this big, old, large image sized version of an application that you could probably shave off a bunch of those by eliminating dead code and making that experience better for your users. So definitely something you should be using if you are have the capabilities, whether that's like web pack or your build system. - -68 -00:48:21,030 --> 00:48:39,510 -Wes Bos: Right on, I'm gonna I keep taking hard ones I try to explain a hoisting is. And this is one of those things that I understand it. However, I've never actually used it myself, and our own if maybe Scott has an example. But anytime I look online, I can never find really good examples of why you would ever want to use this, but - -69 -00:48:39,510 --> 00:48:41,490 -Scott Tolinski: I kind of hate this word. So I - -70 -00:48:42,209 --> 00:51:14,910 -Wes Bos: kind of is like one of those interview questions that you sort of have to be able to explain it. But then you're like, why, so hoisting? Let's talk about scoping. Again, when you are to actually picture of this blank, blank Sublime Text or vs. Code screen. I typed the following code, alert age, new line. var age equals 100. Run that sucker in the browser, what do you get? You get undefined. Oh, why? Well, what happens is hoisting is the idea is that when JavaScript runs, before JavaScript even runs its first lines of code, what it does is it It runs through your entire application, it finds all of the instances of your variables, and it will move them to the top of the application. And then it runs through your entire application, it finds all of your functions, and it will bring those functions to the top of your code. So it hoists it takes your variable declarations and it takes your functions and we'll move them to the top. Scott is showing me I'm moving my hands to the top those things to the top of your application before any of your actual code runs. So the reason why you can alert age before you even define it is because JavaScript will take your variable age, and it will hoist it before that alert even runs. Now the catch is, is that it does not actually, it only does the declaration but not the actual value, meaning that that's why it's undefined and not 100, or whatever I set it to. And then functions as well as you can actually use a function before it's been defined if you do like a proper function like the word function. So you can you can, you can, sorry, you can define them after you've actually used them. So that's what hoisting is. Not all that useful. It's simply the fact that things exist. Things can exist before you actually define them. Because JavaScript will move them to your to the top of your application. And it's not all that useful with let and const. You don't even get undefined. They still are hoisted, but they are not are if you're in strict mode, I believe var will not give you undefined, but it will, it'll error out for you. So what should you do? Well, what do I What do I do I always define my variables defined my functions first, and then use them that makes sense, right? Define your stuff, then go ahead and actually use them. Do you - -71 -00:51:14,910 --> 00:51:38,760 -Scott Tolinski: know what I don't do that? There's like a very specific instance, where when I don't do that tell me is with styled components in react, I put my styled components below my component. So I'm, yeah, I'm using it before it's declared. I guess, I don't know if I am using it before it's declared because it's being used within the class. Whenever the class is being I don't know, when the class is being executed? I don't know. - -72 -00:51:39,060 --> 00:51:40,110 -Wes Bos: Yeah, that's a good question. - -73 -00:51:40,110 --> 00:51:43,410 -Scott Tolinski: That's a good question. Either way it works. So don't worry about it too much. - -74 -00:51:43,710 --> 00:52:05,910 -Wes Bos: I've got some es lint rules that tells me Do not use a function or variable before it's been declared. Yes, I have those as well. If you if you do have a useful use case for using hoisting, let us know at syntax FM, and we'll retweet it we've been getting some really good, like answers on there. So it's kind of fun to be able to have the after the watercooler conversation. - -75 -00:52:05,940 --> 00:53:41,970 -Scott Tolinski: Yeah, we are using the power of community to to help everyone. Cool. So yeah, here's one that, you know, you hear he is whatever he is 2016, he is six, seven, whatever he is, next is one you're hearing a lot now. And it's, it's sort of, like people get that s whatever 2017 or 2016 brings in new features into JavaScript. But it's really ECMO script it, which is the root of the language that JavaScript is built on, is getting a new version, this new version has new features. So whatever, initially, it was es six, which is the, you know, the sixth edition of ECMO script. So JavaScript obviously going to get all these new features, right. But then, but then at some point, you know, I mean, it does kind of naming conventions are okay, but like, what do you go, as, you know, 34 and stuff like that all the way up there? So they decided excited for that. Yeah, yeah, there's gonna be like a new edition of JavaScript every year, or Ekman script every year. So the they're classifying it by yours now. So if you've ever heard the term, yes, 2016, or ies, six, you know, I mean, now what they're doing is the yearly version of ECMO script. So what s next is is sort of like the features. You correct me if I'm wrong on this, but these are the features that are proposed, but not confirmed for the next few versions, right. Like would decorators be considered as next? Or is that considered a as hopeful? That sort of - -76 -00:53:42,000 --> 00:56:17,100 -Wes Bos: is a good question. I don't think it's like, been confirmed what Yes, next actually is, but I just like to think of it as like what is probably coming down the pipe. And in terms of JavaScript, what is what's going to come by in the next couple of years. And to me, that usually includes things that are like stage three or greater looks like the probably going to make it into the language and stuff that is confirmed, going to be in a future version of JavaScript. My last one here is a synchronous and synchronous, which is so confusing in JavaScript because it is means the exact opposite thing that means in real life. So synchronous means at the same time synchronous I always like when I was learning was like synchronous swimming is they're all swimming at the exact same time. So that must mean that if you have a synchronous function, they are all running at the same time. And that is not what it means that all synchronous means one after another, right? If you're coming for a PHP world, PHP is very synchronous, where one line runs a waits for that line to be done. And the next line, the next thing runs. However, JavaScript is built almost entirely a synchronous, meaning that it will fire off a line of code and then the line of code and after it will immediately happen even if that one line of code is not yet finished. So a synchronous means it's things will sort of just fire office As fast as possible, like, if you've got five different Ajax requests and you fire them all off, they're all going to fire off one after another. And they're not going to wait for the the other one to come back at the end of the day, so and then synchronous wouldn't mean that things happen, you fire one off, you wait for that to finish, then the next line when that one's finished, the next line will run. And often in programming in JavaScript, we can't use synchronous stuff, because what that does is it will sort of freeze up the browser. That's what you hear people close it don't block the browser, like an alert or a prompt that will always freeze up the browser and won't let any other JavaScript to run. So if you're making an AJAX request, you should still be able to do all the other stuff on the actual website. So the solution to that in JavaScript is that we want it to look synchronous, because we it's it's very easy to code things linearly. But we don't want to block anything, we want it to run a synchronously So the solution to that is a sink await. And that's why it's called a sink await is that when you mark a function as a sink, you can sort of you can await a value. And it's not pausing JavaScript, it's not putting it off in a second thread or anything like that. It's sort of just like waiting. It's gonna pause that actual function until that promise has then been resolved. - -77 -00:56:17,280 --> 00:56:52,950 -Scott Tolinski: Yeah. And that's actually, man, a sink await has been one of the absolute my favorite additions into JavaScript just because, you know, you can use promises or even to some extent, you know, callback hell, but like, a sink await to me is just so much more readable to say like, hey, wait on this thing to finish, right? You need, you need this data. So let's wait on it to finish. And that, to me has been, I don't know the biggest hurdle in understanding asynchronous or synchronous programming overall in JavaScript. So Exactly, yeah, love that those tools know exist for us, - -78 -00:56:53,160 --> 00:57:20,910 -Wes Bos: especially because when I do it myself, when you're teaching programming, you use alert, prompt and confirm, which are blocking and synchronous. And then you go into the rest of JavaScript and say, Oh, actually, it doesn't work like that at all. If you want to prompt somebody for their name, and then the next line use that name, you have to use a callback. And then it starts to unravel from there. So using a single weight is it's huge, biggest, biggest change to my programming, in a long, long time being able to use this stuff. - -79 -00:57:20,940 --> 00:57:23,940 -Scott Tolinski: Yeah. And it's syntactically cleaner too. - -80 -00:57:23,940 --> 00:57:30,180 -Wes Bos: I love it. Beautiful. It's beautiful. Cool. Got any more for me? Are you here ready for some sick pics? I'm - -81 -00:57:30,180 --> 00:57:32,220 -Scott Tolinski: tapped out. I'm ready for some sick pics. - -82 -00:57:32,370 --> 00:57:39,780 -Wes Bos: Sick pic. So I went way too sick last time and I ended up being so high. You got you got some for me, Scott. - -83 -00:57:39,810 --> 00:58:14,760 -Scott Tolinski: Yeah, I have a book I really liked from this. The author is the subject of the book is about in this this guy Kevin Mitnick. It's really applicable to programmers because he's like one of the most famous computer hackers of all time. And it was sort of basically his life story. It's called the ghost in the wires. My adventures as the world's most wanted hacker. He went to jail for a long time. I mean, I think prison Actually, I don't know if it's prison or jail. I guess that distinction kind of matters. But - -84 -00:58:15,689 --> 00:58:17,310 -Wes Bos: basically, a lot of trouble. Yeah, - -85 -00:58:17,310 --> 00:59:23,400 -Scott Tolinski: he got a lot of trouble. They were worried that he would be able to launch the nuclear rockets via his telephone by some magic, you know, there's no way you could do that, because they were just totally ignorant. But what the story is just so good. And he talks about his hacking methods and all sorts of stuff. Most of it's like social engineering and manipulation. But the story is just like, I don't know, it's it's movie good. You know, it's something that you would sit down and watch and be like, wow, thoroughly entertained if it was a fictional story, and the fact that it's totally real and happened and this this guy did all this stuff is darn pretty amazing. And I just remember every single chapter and listening to stories just being like, wow, this guy is smart. So it's just a really excellent excellent book, Ghost in the wires, my adventures as a most one of world's most computer hacker. I personally did the audio book, which I really enjoyed myself, because like I said, it's a lot of good stories. So it's almost like listening to a nonfiction audio book kind of stuff, but loved it a big fan. Cool, I'm - -86 -00:59:23,400 --> 00:59:44,100 -Wes Bos: gonna have to add that one. I've got all these audible credits. And they only audibles dumb in that they don't they don't allow you to hold more than six credits, because it's impossible to store in a number greater than six and a variable, I guess. But they're, they're squeezing me out now. So I gotta find something to buy them. I'm starting to stack up all those audible points. Nice. Yeah, - -87 -00:59:44,100 --> 00:59:47,580 -Unknown: this is definitely a good one. Good one for audible. Awesome. - -88 -00:59:47,610 --> 01:00:50,480 -Wes Bos: Mine is an iPhone app called it just came out. It's called Apollo. And it's a new Reddit app. And I actually don't like Reddit all that much just because there's a lot of it's a wasteland and there's a lot of terrible people on there. Whoever There are some really good subreddits of people who are like super into a specific topic. So whenever I'm doing anything new in my life, whether it's learning how to smoke me or learning, I'm right now, I've been two months into keto, which is like sort of a diet where you eat a lot of meat. It's kind of fun. So whenever I'm in that, I always just dive into whatever that read it is, and just like, absolutely read absolutely everything. So the Reddit iPhone app is kind of, kind of not that great. So there's a new one that came out called Apollo. And it's just nice and fast. It has nice big images as really good search, just the UI of it. I think it's a couple Apple engineers quit their jobs at Apple and built this thing. So big fan of how it works. It's called Apollo. - -89 -01:00:50,480 --> 01:01:17,460 -Scott Tolinski: So check it out. Nice. Super cool. Yeah, I use Reddit for mostly hockey. I follow game day threads on hockey and like, but it's one of those places, if you spend too much time in comments of the reddits that are, I don't know, aggressive or something, you just see bike shedding non stop. Whereas like, it is an amazing place to find a lot of great information in great communities where people are helpful if they I - -90 -01:01:17,460 --> 01:01:56,700 -Wes Bos: really, really like our web dev. And it's obviously a web development one. And it seems to skew a little bit more beginner, where people are very hopeful and very happy and not so much jaded. From Yeah, from all that stuff. So I really like that one. That one also helps me like sort of keep tabs on like, how do people think, and I always like to talk to a lot of people who are new in web development, because it helps me make really good courses. So I spend probably most of my time on our web dev, just reading, what people are going on and what people are thinking about what questions they have and whatnot. - -91 -01:01:56,730 --> 01:02:26,760 -Scott Tolinski: Yeah, likewise, yeah, and that was a really good one on there. Sorry to get this off track here. But there was like a, there was a taco in there, one of the React conferences lately about state machines. And I just saw this, it was like up yesterday, but you're managing your state think twice. And it was a blog post about state machines about that particular conference talk that I'd have to look at the author's name, to be honest. But it was a really super interesting content. That's a great, great way to find and stay up on stuff like this. It'll blow your mind temporarily. - -92 -01:02:28,710 --> 01:02:33,600 -Wes Bos: Awesome off to check that out. Word, I have a link it up in the show notes. So go ahead, I - -93 -01:02:33,600 --> 01:03:05,940 -Scott Tolinski: have a shameless plug this time, which is my react 16. Yeah, for everyone course, you can go to level up tutorials, comm forward slash store to purchase it, or you can find my a pro and get access to all the code and all the videos and stuff like that. So 23 videos, high quality stuff, they'll teach you a lot of really cool stuff, we build a movie database application with a pretty sick animation for page transitions. So definitely something that is pretty real world skills. And you'll get a lot of extra little nice new JavaScript stuff, too. - -94 -01:03:05,940 --> 01:04:07,890 -Wes Bos: That's pretty exciting. Cool, check that out, I have not necessarily a plug, but maybe I'll give a little update. So I've been working real hard on advanced react course. And I sort of put on ice for a few weeks because there was some major announcements coming out in terms of graph cool, which is a graph qL service as a service. And they recently open source their entire thing, which is great, because you can use this service. However, if they go under, they lose funding for whatever reason, or they start start to just to charge you $12,000 a month, then you just host your own version of it. So there's no vendor lock in there. And then Apollo not bap, I just recommend it. But the React graph qL data library, I guess it's called, they came out with 2.0, which is a nice little upgrade from from where is that? So now that both of those things are out, I'm gonna keep working on that. And then I'm also been been working hard in between on a CSS Grid course, which is going to be free. And I'm pretty excited about that one as well. - -95 -01:04:07,920 --> 01:04:24,230 -Scott Tolinski: Nice, nice. I'm also going to be doing a little bit of a not necessarily a CSS Grid course, but like a course that uses CSS Grid coming very soon to level up tuts. So maybe those two will work nicely together. Maybe there'll be a little like a synergy there. I'm gonna have to reach out and - -96 -01:04:25,260 --> 01:04:30,180 -Wes Bos: reach out and connect. There's some synergy and activity. Yeah, I'll circle back. - -97 -01:04:30,209 --> 01:04:32,280 -Scott Tolinski: We can do a deep dive. All right, let's, - -98 -01:04:32,280 --> 01:04:40,440 -Wes Bos: uh, let's end with this hilarious bumper that we got made and let us know on Twitter what you think of it. Enjoy. Say - -99 -01:04:42,060 --> 01:04:51,390 -Announcer: you're listening to syntax podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott solinsky and West boss - diff --git a/transcripts/Syntax170.srt b/transcripts/Syntax170.srt deleted file mode 100644 index dc38f2431..000000000 --- a/transcripts/Syntax170.srt +++ /dev/null @@ -1,416 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:06,120 -development treats out there. - -3 -00:00:06,149 --> 00:00:10,560 -strap yourself in and get ready. Here is Scott, ski and West boss. - -4 -00:00:10,560 --> 00:00:42,930 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there. Today we are talking about state in react such a simple thing, but there's very many ways to approach it. Lots of different things out there. So we're gonna try to dive into local state and global state and UI state and data state and caching and API data and, man, there's just tons of stuff here so yeah, with me as always, is Mr. To linsky. How you doing today? Scott Lynskey. Hey, - -5 -00:00:42,930 --> 00:00:54,360 -Scott Tolinski: I'm doing I'm doing okay, I'm doing pretty good. My office is is like under a state of transition. So things are a little chaotic. There Brittany and Kevin chaotic. And - -6 -00:00:54,869 --> 00:00:58,080 -Unknown: do you remember that show? Brittany and Kevin now? - -7 -00:00:58,259 --> 00:01:50,520 -Scott Tolinski: It was a show it was about britney spears and Kevin Federline. I don't know if that's the same, but it was called Britney and Kevin chaotic. So I like can't say the word chaotic without prefixing it with Brittany for some reason. But no, no, dude, huge bummer. Yesterday, somebody rear ended, Courtney and her friend and Brooklyn are and her cars all jacked up. And you just I feel so bad. I was like, in total, like dad rage mode. driving out there. I was like, I was gonna crack some skulls. I'm just, you know, everybody's okay. They had to have an ambulance, come check out Brooklyn and stuff. It was just awful hours all messed up. So, you know, things have not been exactly carefree the past 24 hours. But you know, all things considered everybody safe. And yeah, know that. That's it. That's it. But yeah, bummer. - -8 -00:01:50,670 --> 00:02:18,840 -Wes Bos: I am. So we moved up to our cottage, which it's a funny word that the Canadians use it as just kind of like a place on the lake where you swim and hang out for the summer. So if this audio is sounding a little bit weird, it's because I haven't totally got my office setup yet. And I don't have the compressor running. And it's a little echoey in here. So apologies for the audio, but it seems to be working somewhat. Okay. Yeah. I - -9 -00:02:18,840 --> 00:02:37,860 -Scott Tolinski: mean, it's really okay. Because you're living the college life. You're wearing a flamingo shirt, and you're hanging out in the water and stuff. And we just had, we just have to look at you on your social media feed. Be like, dang, he's living it living it right now. So, TJ and over here, - -10 -00:02:38,340 --> 00:02:48,720 -Wes Bos: yeah. Oh, well, you said TJ and then I was googling it. And I was like, What is TJ and mean? That's, that's, um, it's tj. And - -11 -00:02:48,870 --> 00:05:06,720 -Scott Tolinski: that's, we're getting into state here. That's some local state of my own personal slang that I came up with that I I always say, and I feel like I just like, totally neglect the fact that I don't know that people don't know what it means. But it means Well, technically, it means totally jealous in. Okay, I'm totally jealous. And in sometimes All right, TJ, and then apostrophe n. So I'm like, totally, totally jealous thing. And I don't it's, yeah, it's not it's not good. But yeah, so that's some local state for my own personal slang. Let's get into actual state in applications in the local state of sponsorships for this episode are going to be Log Rocket and Freshbooks. We'll get into both of those later. Those are longtime sponsors, but syntax, we love both those services. And the first thing we want to dive into I think, is what is state this was the question that we actually answered in the last potluck, I believe somebody asked us what is state I hear about state all the time we answer that question, maybe we'll do a little bit of recap here, but basically, state itself, what is state in your application? Well, the best way I feel like I could describe it is it's how your application is at any given point, the the state of the data could be whether or not that the navigation menu is open, whether or not the modal is open. But it could also be your data, maybe let's say I'm level up tutorials, I have an array of tutorials that need to be loaded, those tutorials would also be considered an application state. So it can be all sorts of things from global to local. And maybe it's maybe there's some some gray area in between there. But what we're really going to be talking about, again, is is maybe the difference there and maybe some of the different strategies that you could use to wrangle in your state. And obviously state is not specific to react applications is pretty much a general concept, right? any application that you're building in any framework, or any language or anything is going to have state at any given point. So even though this episode is specifically about react, you can think about a lot of these concepts in other applications as well. So let's get into what kind of things Captain state now that we have an idea a little bit about what state is, what do you keep in state was? - -12 -00:05:06,870 --> 00:06:29,130 -Wes Bos: Yeah, I think it can kind of be broken down into a few different pieces. The first is obviously, data, that is your application, I guess it is all data. But if you think about your application, you generally have a few different kinds of data, you've got the temporary client side data, I like to think. So if you've got data that's coming in from a form input, or a search, or when someone clicks a button or information about something that the user is currently doing, I like to think of that as like temporary client side data. And if you need to hold on to that for any amount of time, temporarily, generally, you stick that in state. So probably the the most common thing in react is that when somebody types into an input box, you send that data immediately into state, and then you reflect that data back into the input box. So it looks like the user is actually typing that data. And that's helpful, because when you then go ahead and submit that data, you want to send it off to the server side, you have it in a nice tidy little piece of data. Other types of data is cached Server data. So if you've got an API, whether that's graph qL, or JSON, or any other type of API, you ping that server, and you come back with some data, you need to put that somewhere in before you go ahead and display it. And where to put that data is state. - -13 -00:06:29,430 --> 00:08:10,140 -Scott Tolinski: Yeah, I mean, I think it's like most beginner react tutorials. When we I know, in my beginner react tutorial, we do this where you hit an API, the one that we do in mind is the movie DB API. And you hit this API, and you get some information back. And sure, you can display that information just straight up. But the way that you end up managing it in most beginner cases, is just throwing it into some local state. And then from there, you can move on to more advanced topics of which we'll talk a little bit more about, there's also UI state, which, again, a lot of this stuff, I'm not making up the names. Well, I guess I am making up the names here. But these aren't like official names. That is the UI state you could think of is sort of like at any given point, again, like things like the think about like a hamburger menu, right? Whether or not that hamburger menu is open or not. That's a piece of state where there's a value somewhere that's set to true or false. And that true or false is going to toggle and a react component that shows up or maybe it animates in, or maybe it drags on or something like that. But either way, the fact that that menu is open is most likely a Boolean that's just toggled somewhere. Or maybe it's like a string or something depending on how you manage your local state. I wanted to briefly have a an aside here about naming things. How do you what's what's your strategy for naming local state thing? Because this is one thing that I've found, I have gone through several evolutions in my codebase, about how I name things. And I think it's tricky, but I think I've landed on something that I really love. So I'm interested to hear about how you name state, like if you were going to be making like a modal, what would you name now that we have hooks? Three if the name the functions and? Or maybe you have an action or something? What How do you name stuff? - -14 -00:08:10,410 --> 00:08:40,440 -Wes Bos: Yeah, I'm usually with with those types of things I like to I initially started with like cart open, but I've started just sticking is on the front. And I think that might be a little what you do as well. Because then I find that my if statements read really nicely. So is nav open and and you show that the the drop down inside of react. So big fan of that I'm trying to think about other variables that might not just be - -15 -00:08:40,980 --> 00:08:42,570 -Scott Tolinski: about like an action or a function, - -16 -00:08:42,720 --> 00:08:47,610 -Wes Bos: I don't really have any any really good rules, do you have a specific rule of how you approach those types of things? - -17 -00:08:49,039 --> 00:11:17,130 -Scott Tolinski: To say like I had this sort of like light rules. And then like last night is this very specific last night, Ty was in one of those, you know, in one of those galaxy brain states, where where you can see through the code, and you're just like looking at the matrix lines just trickling down, you know, it's like, I could see that next line of code I was gonna type before I typed it, and I ended up refactoring, maybe like 15 components. Because in level up, I've been, I've been encountering this really bizarre bug. And I have to assume it's a race condition somewhere, or it's honestly probably something with my state, I really don't know what the problem is, which is not a great way to operate. I have all of my error tracking, I know the conditions in which it happens. I have all of the error logs, I know exactly what's happening. But I cannot reproduce it. I have my account. I do the exact same thing I see my users doing in Log Rocket because I use Log Rocket, one of our sponsors today. I see all of that stuff, and I still cannot get it to happen and it's driving me nuts. So I was like, You know what, I know the files in which this is happening. I'm going to take a deep dive into these files and really just try to rewrite them so I sort of just looked at all this stuff. And I came up with maybe better rules than what I had before. Because again, I had ways of naming things, but I didn't have like solid rules. So now, again, everything is going to be it like is whatever, which for the most part was, but when I started getting into these components, I saw things like, so I had his tutorial visible, right, that tells you exactly what it is. But then I also had things that was can see video, and I'm like, okay, like, why do I have can see video, and then I had another one, which was will do something else or will be available. And I'm just thinking like, okay, the these things are all sort of describing the same kind of thing, but I'm approaching it from different perspectives as the user or whatever. So I just rewrote everything to be his tutorial visible his playlist visible is this right. And by by really standardizing that it made my application so much more transparent. Another thing I did is I've sort of come up with rules for how I name actions. So you know, toggle theater mode, right? If it toggles something, it's toggle theater mode, if it's setting something, it's set blank, if it is removing something, it's remove something. But that that's pretty much it. So - -18 -00:11:17,549 --> 00:11:31,679 -Wes Bos: yeah, putting a verb at the front of the function, I find, it tells you that it does something, it should tell you what it does, I'd be curious to see if other people have some sort of rules to how you name your things. written. - -19 -00:11:31,710 --> 00:11:32,850 -Scott Tolinski: I'm very interested in that. - -20 -00:11:33,330 --> 00:11:59,700 -Wes Bos: Or I've certainly had like different approaches to, like, get movies or and then I would go get movies. Yeah, yeah. It's annoying, like I should I should have some sort of system in place. I would love to hear what other people think. Yeah, what their system is, because I think that would probably, it's like a linting rule, right? Like, it's the it's the code still works. But I would love to have some sort of rules that makes me a better Dev, same here. And just, - -21 -00:11:59,820 --> 00:12:56,549 -Scott Tolinski: I actually, as we were talking here, I was thinking after this episode or the next one, I would just go pop over to notion and just write out my the simple rules to how you write stayed stuff in my application for other devs. It's I don't know, it's one of those things that I think can make an application way better, because even changing is visible to his tutorial visible makes things make way more sense. So it's small little thing, but it definitely has a big impact. And after refactoring these components, I'm just reading through my my code. And last night I just looked at, and I was just like, you know, Job well done here. You know, it just it made me feel really good. And I'm very confident that this, this issue that I'm facing is gonna get get worked out. But it's, it's one of those things, you can really go down the rabbit hole with. So next, let's talk about global state. vers local state, and what the heck that is, you hear you heard talked about global state versus local state? Do you want to take a stab at it? - -22 -00:12:56,820 --> 00:15:17,909 -Wes Bos: Yeah. So the idea of global state versus local state is that your data, let's say, something like, is nav open? And then you have another piece of data, like a list of movies? Does that data need to be globally available? I mean, does it need to be available everywhere in your application? Or should any component in your application be able to access that data? Or should that data stay contained within the component that uses it. And there are certainly arguments on either end, local local state is certainly much easier to make, make components that are you can move them around, they contain their own data, they often contain the logic for fetching that data. Whereas global state is often it's much easier, because if you have the data living at the top of your application, you can certainly pass it down or use some sort of thing like context or Redux to inject that data into into the the components that need it. So now, it's not really one versus the other, I think generally, all applications will have both global state as well as local state. And I think the, you need to ask yourself, does this data need to be accessed outside of this component. So if it's the case, for actually that's, it's a really good example of in my node course, I would have the his cart open. And I thought like, that's clearly just a Boolean that only needs to be available to the cart, because I only need inside of the cart to open or close it. But then I found myself needing to open the cart when somebody added something to the cart, so I thought, Oh, now I need to move that like that center, the thing that updates state outside of the cart, because now it is it needs to be accessed in other parts of my application. So generally, I'll start with local state, and then if I think that I won't need it, and then it's it's fairly easy to refactor out into a global state. Things like data. Like let's say you have a list of movies, I'll generally try to To keep those as close to the component as as I need them, because like, you could have three or four NASA components, you just have that at the top. But then again, if you if you do need it elsewhere, you you stick that in global, do you have any any sort of like rules or any methods for determining whether it's local or global? - -23 -00:15:18,299 --> 00:17:12,860 -Scott Tolinski: You know, we just did this huge rewrite of level up. And I definitely learned quite a bit about it, because I've gone through a lot of changes in Mike my global state. So like before, I was using something called Meteor session, which started things at session variables. But it was very active, it was really cool. And then I moved to I moved in next, I don't even know what I moved to Next, I might have moved to Redux. Next, and then from Redux to Apollo client, and now to context. And I haven't been happy with many of those systems, because I found it difficult to add an update and changed and new state and ever since moving to my new system, it's become way easier to take things out of local state and move them into global state very easily. So my rules are really just again, it's, I like to think about it as just ahead of time, what are the situations where I'm going to need to access this toggle this whatever, right, and you think something like as simple as a main navigate, like the navigation, the hamburger nav opening and closing, you think something as simple as that should just be local state. But let's say you have the nav open, and the user logs in from the that, that navigation, they click that they log in, and all of a sudden the menu doesn't close Do you want to go have to pass that function all the way down into your log in function to be able to do that. So at that point, I've really like erred on the side of putting most things in global state. But I think there is like definitely, like form form state, for me belongs in local state, like little toggles, and little things like that mostly belong in local state. And what some of the larger aspects of the site, you know, is the navigation open is the shopping cart, open, what's in the shopping cart, those all go into global state for me. And then obviously, all of my data is in Apollo cache. So I don't really think too much about that as being global state. But I don't really have any hard and fast rules other than just trying to visualize where exactly this is, needs to be accessed. - -24 -00:17:13,290 --> 00:18:05,520 -Wes Bos: Yeah, I think there was like, people sort of got scared of global state, because back in the day, everyone would just throw all the data on the window. And I think it's sometimes he will mix up this concept of global variables and just have everything globally available and just reaching outside to it. And this idea of just having a single global store for your data, and having a method to inject that data into the components that need it. And I think we've got plenty of good options. We'll talk about that to put them in there. So yeah, nothing wrong with global state. And also like, we talked about component reusability, and all these things all the time. But if I'm if I'm not kidding myself, I know that most of my applications, I don't share components to other projects. I know that my data is here, and my components need those data. Yeah, totally. That data. - -25 -00:18:07,260 --> 00:18:16,820 -Scott Tolinski: Do you personally do you? Do you think of your Apollo client as like, our caches is a global state? I think that's sort of what I do. Yep. - -26 -00:18:17,280 --> 00:18:28,530 -Wes Bos: Yeah. Because Because you can put everything goes into the the Apollo store, you can even put your local data in there. Okay. Yeah, I definitely think that is a global surrogate. And you can only have one of them as well, per app. - -27 -00:18:28,680 --> 00:20:41,190 -Scott Tolinski: Yeah. So definitely. And we can talk about that in the next section, which is going to be managing local state. But before we get into that, I wanted to quickly transition here into one of our sponsors, the ultimate transition there. So this week's sponsor is Log Rocket to know I mentioned earlier on in the episode that I'm having some issues with one very particular weird use case. And to be honest, I was seeing my my error pop up in century in century is giving me some good information, it was sort of telling me where the bug was happening. But I couldn't necessarily figure out how the user was managing to do these things. So I fired it up in my Log Rocket, and I watched as the user clicked a link, and it showed me exactly what happened. Now, obviously, as I mentioned, I haven't solved this bug because I haven't been able to reproduce, but at least now I know exactly what the user was doing. And importantly, I know who the user was. So I can look at their user object, I can see exactly the steps they were able to do to reproduce this issue. And I'm hard at work. And after we get done recording, I'm going to be solving this bug. But Log Rocket has made that absolutely possible because with Log Rocket, what you get is a session replay, it's a video and the you could drag it you can see the session you can see the network responses. You can see everything the Redux store, if I used Redux, that would be a great use case as well and allows you to see all this happening in the same time as the users doing it. So allows you to solve the Bugs quickly and easily. Again, I'm going to be really diving into this later today here a little bit more, as much as I love rocket, I can't wait to get in there and solve this bug. So if you want to get 14 days for free head on over to Log rocket.com forward slash text and sign up today. Great service. I really love using it myself. And again, I think some people maybe occasionally, you know, they hear our sponsor reads and they think we're getting a little like blurring the lines, getting cheese, burn the lines between the you know, stuff that we like, and stuff that we're trying to sell you or something. But to be honest, we use this stuff. And, you know, I don't think I would be Hawking it here if I wasn't just in it myself and loving it. Yeah, - -28 -00:20:41,280 --> 00:21:12,320 -Wes Bos: that's it's funny, like some of our sponsors like, like Log Rocket and Freshbooks and Sentry. They do very well on our podcast, because we actually really love them. But that's, that doesn't that doesn't go across to every sponsor that we have, because we don't necessarily use in love every single month. Yeah, sure. So it's why it's such a good fit, right? Like, ideally, the sponsors will find people that have podcasts that actually use and love their products. So it's a, we're happy to have them on. - -29 -00:21:12,630 --> 00:22:11,430 -Scott Tolinski: Yeah, absolutely. Very happy. Alright, so let's get into managing local state. Now your options for managing local state, even though there's probably lots more they inherited, we're going to get into but the main ones are really just what's built into react, the new use state hook as well as set state, which has been here from the get. And yeah, I personally have just loved, like, loved refactoring my application to use use state. Because again, it allows me to name things better with less code, right? I can have a little function that says this. And that's like not very much code. And then I don't have to write a whole separate function to do the whole set state thing in. And I absolutely love using use state personally, it's really changed the readability of my application. If I see a set state call in my codebase, I'm like, get it out of here I have that's just me. I'm obsessed with refactoring. Sometimes. - -30 -00:22:11,730 --> 00:22:45,810 -Wes Bos: Yeah, the hooks has made just local state so easy, because it has decoupled the like, what it looks like and where it lives. It's it's totally decoupled it and made it really easy to inject that kind of local state into something so big fan of, of using hooks and use state and for for local state. I previously had used Apollo for some local state, but I found that it was just too cumbersome to have to write graph. qL queries? Yeah, first setting Booleans. - -31 -00:22:45,810 --> 00:22:46,470 -Scott Tolinski: Mm hmm. - -32 -00:22:46,680 --> 00:23:10,200 -Wes Bos: I think they're working on getting on making it better. But I remember talking to them, I'm like, I just want set state for Apollo. Yeah, like, I just want to throw it in there. And that's kind of against the whole idea of graph. QL. Because graph QL. So, so rigid, and typed. And you have to know ahead of time, like what it looks like, and you have to write a query to pull that data out. And I just wanna, I just want a variable. - -33 -00:23:10,290 --> 00:23:38,880 -Scott Tolinski: Yeah, I was doing so I sort of had a flow like that going, where I was doing direct writes to the cache, and then I had my own functions that were doing direct writes to the cash No, sort of all obfuscated behind the scenes. So that like, you just had one single function that was like toggle math. And that's all you needed to do. Yeah. But like the amount of code that I needed to write to have that was just sort of annoying to do all the time. And to be honest, yeah, you know, the Apollo client state is awesome. But I did feel like it was a little too fresh, little to green - -34 -00:23:39,570 --> 00:23:46,020 -Wes Bos: heads, find a way to test it either. Just do it my course we don't test it. Because it's, there's just no way it doesn't work. - -35 -00:23:46,020 --> 00:25:36,870 -Scott Tolinski: Yeah, if you, if you google anything about testing local state, you'll probably find three or four GitHub issues I created at some point, and then people are still like, has this been resolved yet. So you know, I love the Apollo team. And I hope they figure that that part out of it at some point soon, because like real that the testing piece is non existent. And that like it, especially if you have mixed, because they advertise, you know, the ability to do a query that pulls in your data plus the client state at the same time in one query. Yeah, that's great. But then I found myself having to have a totally separate query just for my test that didn't include the client state, just to get the test working. And it's like, that is not a good way to test your code. So I was not happy with that. So I converted over to context for my global state. But all right, back to back to managing local state here. There's a bit of a always a thing that comes into play when you get into more advanced components. Like when you have maybe like a toggle, let's say a modal, right? You trigger the modal from the outside, but that modal needs to close itself from the inside. And you probably might not want to put all of those in global state. So then what do you do? Well, you have to pass the state and the update state function down into the component. That's like a huge question. People always ask us, how do I traverse my state? Right? I have this state in this one component. Now I wanted this other one. And the answer is always well, you got to create a parent component that includes both the state value as well as the state senator or whatever, and then pass those down to both. Yeah, I don't know, this is one of those things that I used to do all the time. And now it like makes me kind of upset to do so because depending on how many times you have to pass down or where you have to pass it, it can get kind of cumbersome, kind of dense and kind of unnecessary. And I find myself reaching for context and global state at most of those times I need that sort of stuff. - -36 -00:25:37,110 --> 00:26:16,170 -Wes Bos: That's the sort of the thing in react is that you can't pass data up unless you have a function that is passed down. Yeah, if you've got your setter and your data at a low level, there's no way to send it upstream unless you move that up. And react has a word for that. It's called lifting state. It which sounds should essentially just means put it higher. get past a dam and state, you know, Salmon River. Oh, that's actually awesome. That's actually awesome name for like, a library where you could use an emoji like, Is there a salmon? Like you use salmon? I don't think so. Um, hold on. Let's figure this - -37 -00:26:16,170 --> 00:26:25,890 -Scott Tolinski: out. This is important innovators. We are innovators here. And, you know, I don't have to do any I can be the name guy. I can just come up with the names and then somebody else can write the code. - -38 -00:26:26,520 --> 00:26:36,540 -Wes Bos: There's a couple there's three fish emojis. There's a blue fish on iOS of cat blue fish on a rod and then a tropical fish. - -39 -00:26:36,810 --> 00:26:39,510 -Scott Tolinski: So what about salmon? Look at sashimi. - -40 -00:26:40,500 --> 00:26:47,430 -Wes Bos: Yeah, there's a fish cake. Fish cake. And there's sushi as well. Yeah, no sushi me though. Okay, - -41 -00:26:47,820 --> 00:27:15,180 -Scott Tolinski: well, we got some work to do. First thing we got to do is get the salmon emoji standardized, then we can begin working on this library. Okay, good. So next up, I wanted to talk briefly about state machines. And I say briefly, because to be honest, I personally am not that experienced in state machines. I am aware of them I sort of am aware of how state machines are, I would be interested in having a state machines expert on this show to talk a bit more about them. And why I didn't tell you. - -42 -00:27:15,390 --> 00:27:41,070 -Wes Bos: Yes. Because like like six minutes ago, or like six months for recorded this podcast. I messaged David cage. Yeah. And said, Can you come on and explain them to us? Yeah. And he said, Sure. So he's gonna be on probably in two weeks, I think he said would be good. Cool. So which is good, because it'll be like soon enough after this comes out that it's like fresh in our minds as to how it works. - -43 -00:27:41,160 --> 00:28:38,340 -Scott Tolinski: That's great. I'd be very excited to talk to David, because his library access state is really the state state machine library of choice. And I see x state now is using the new organizational GitHub where it has the at x date forward slash react, and they're using hooks. So there's like a little use machine hook. And so x state really seems to be your application state can only exist in several different ways, right? There's the active state, the where the inactive state and that canceled state or whatever, basically, you're defining these ways that your state or your application is, and you don't worry about the little individual parts of the state. So making invalid state parts not possible is my very, very rudimentary understanding of it. So hopefully, when when David comes down here, we can get him to give us the whole rundown. - -44 -00:28:38,640 --> 00:29:11,340 -Wes Bos: Yeah, it's just the there's another another good example they have here is the fetch machine where you have an idle state, you have a loading state, and you have a success state and a failure state. And each of those states can have a bunch of information that's associated with it. So what to happen when there's a successful what to happen when there's an error, where to fetch the data from things like that. So I'm really excited to have him on I'm intentionally not going to look into it too much. Just because I think it makes for a better podcast. - -45 -00:29:11,490 --> 00:29:19,110 -Scott Tolinski: I'm going to do the opposite. I'm going to look into it really in depth. And then Okay, yeah, but then I'm going to pretend that I haven't. So then I can do - -46 -00:29:19,110 --> 00:29:20,010 -Wes Bos: it in depth, Lee. - -47 -00:29:20,010 --> 00:29:24,720 -Scott Tolinski: Oh, so it's like this, you what you're saying is this. Oh, okay. I'm getting it. - -48 -00:29:25,440 --> 00:29:26,970 -Wes Bos: All right. That sounds great. - -49 -00:29:28,830 --> 00:29:57,000 -Scott Tolinski: Yeah, so the next section we're going to get into is going to be global state. But before we do, we're going to get some new fresh state in here with one of our first sponsors. So this is we're refreshing the state here and this is fresh books, is one of our longtime sponsors that helps you keep your books accounting, bookkeeping, all that stuff, invoices, organized and modern and excellent. So with Barbara freshbooks is Wes - -50 -00:29:57,360 --> 00:30:49,260 -Wes Bos: for fresh books is the cloud accounting software. that you need. If you are a small business, if you're a freelancer, if you're just someone who needs to send a couple invoices out at the end of the year seems easy just to make a Word document. But when it comes to reporting, making sure people have paid for getting if people have paid, that kind of stuff can get really be a headache. So check out fresh books, you're gonna get invoicing, expenses, time tracking, projects, payments, the mobile app is awesome. I love the mobile app just for inputting receipts, things like that. What I'll often do is, even when I'm out, I'll just have a receipt, I'll just take a snapshot of it, input all the details, and then stuff the receipt in a in my pocket. And I know that I don't have to like worry about keeping it because like receipts, you know, how receipts like fade over time? Or if they get caught they? Yeah, they go all black? - -51 -00:30:49,260 --> 00:30:55,590 -Scott Tolinski: They're like, it's like a you didn't see this movie you didn't see Back to the Future. Did you know it's like photos fading? should I? - -52 -00:30:57,510 --> 00:31:50,160 -Wes Bos: Yeah, so don't don't get that. Go to freshbooks comm forward slash syntax and use syntax in the How did you hear about a section, it's going to give you a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring. Alright, let's talk about global state. This is a bit of a big one. So we talked about what global state is, it's this idea that you store all of the data related to your application in some sort of store. And the store is just a fancy word for an object. in JavaScript, it's where you keep your data. And then usually, along with that data is a bunch of instructions as to how to update that data, how to fetch that data, a bunch of little stuff around that. So you want to take a stab at a first couple ways to do global state interact? Yeah, yeah, I - -53 -00:31:50,160 --> 00:33:35,850 -Scott Tolinski: think obviously, well, not obviously. But the most popular one is probably Redux, it's been the king of global state for a little while in react. The problems with Redux are that it's really kind of complicated and hard to pick up. I think the people who have Redux click easily for them don't necessarily understand that. But like the people who don't have it, click easily for them, could really just bash your head against Redux for months and months and months, because it is, there's a lot of boilerplate code. And people complain about I complained about that. It is a a thing. Some people are like, I don't understand the complaints. But there is a lot of boilerplate code that to do some very simple things. So Redux is complicated, it's hard to learn. But it's very, very, super useful. It's very organized and structured, makes your application a lot more solid. I found my application state was sec very, very nice. When I was using Redux, I understood exactly what everything was the states that how it, how it all how it all worked, it has some really great tooling around it, such as the time traveling features, and all of the Redux dev tools, like almost make the cost to entry. Totally worth it, because the Redux dev tools are really second to none. And that sort of regard, their excellent being able to see your state. And this all happens because of Redux his use of basically, immutable data. And so we say that word occasionally immutable, it really just means that this data isn't, you're not changing it, right. So with Redux, you have your store, and you're not updating your store unnecessarily, but you're creating a new copy of it. And because you're creating a new copy of it, you're able to go back and see any version of that store at any given time, allowing you to basically time travel, those kind of things, especially in the dev tools. - -54 -00:33:36,120 --> 00:33:38,820 -Wes Bos: Yeah, let's talk about what that is time traveling. - -55 -00:33:38,970 --> 00:33:39,630 -Scott Tolinski: Yeah, - -56 -00:33:39,690 --> 00:35:08,880 -Wes Bos: yeah, like Scott just said, You're, you're let's say you have an array of Scott and Wes. And then you add another item to that array. Brooklyn, now we have an array with with three items in it. The idea behind time traveling is that because the data is immutable, meaning that we don't do, we didn't just update that array, we have two arrays. Now if the old array scotton less, and we have the new array, Scott, Wes and Brooklyn. And the idea is that what time traveling is that you can go back at any time and go back to that earlier data, or undo actions. So in Redux, you have actions, which are things that you do add a name. And then you have a reducer, which figures out how you how you add that name to the array. So the sort of the logic as to how you're adding items in there. And then the time traveling will allow you to go back in time. And it's kind of cool, because you can you can turn off any of the actions, it doesn't have to be sequential. So you could go back and turn off three or four actions and it will just replay the application as if those three things never happened. But everything before and after them did happen, which is pretty pretty cool for if you're doing animations or you want to like replay something, you want to say like, Oh, I added this item to the cart, and you want to just go back and forth, back and forth. Just It's such a handy tool. I think that's why people absolutely love Redux. As Scott said, it's worth the the pain and the setup and the boilerplate for that kind of thing. - -57 -00:35:09,090 --> 00:35:51,030 -Scott Tolinski: Yeah, yeah, you do get people who are very into Redux. And then you get the people who are like standing on the outside being like, but I don't get it. And then, you know, there's is sort of that back and forth there in terms of like, well, is it worth it to learn this stuff. And I think learning Redux is absolutely worth it. That said, I do think it's kind of unnecessarily complicated. I personally, I don't want to, but I know some people are mad about this. But I like a little bit of magic. Like, I don't love a ton of magic, where I don't know where things are happening. But like, if I could just, instead of having to call an action, which does another thing, which hit 3d, like, instead of doing all that, I would rather just call a function like I do right now, and have that do everything else behind the scenes. But then again, - -58 -00:35:51,090 --> 00:35:51,650 -Wes Bos: yeah, - -59 -00:35:52,710 --> 00:36:46,110 -Scott Tolinski: whatever there. There's other approaches here of what you're going to get into. And there's a ton of new hooks based libraries to ever since hooks was released this one that was probably I don't know if this is the most popular one. But I've been seeing it around a lot, which is called the Easy peasy, which is basically a wrapper for Redux. One of the cool things about something like this is that you don't have to really learn Redux in the same sort of way, you still get access to the Redux dev tools, the code that you're writing, the syntax for, it is definitely smaller, cleaner, whatever than Redux. And it is a little bit easier. That's why they call it easy peasy. But again, there's a lot of little libraries that are popping up like this right now with hooks that make global state more easy. So actually, I'm really interested, if you're using a global state hooks library, tweet this out, I want to I want to know what people are using in their code. Because it's really interesting to me. Do you have anything else on Redux? - -60 -00:36:46,230 --> 00:37:41,610 -Wes Bos: Yeah, I just think like Redux May, the reason why Redux got so popular is because the whole idea of global state in react without react Redux initially, was that you had to pass things down, all the way down. So if you've got a component at your top, and you've got a component listed, eight levels deep, they had a pass all of those downs via props, in Redux made it easy to keep your data and keep your actions, your functions on how to update them at your your top level. And then you can inject that data in those updaters at a lower level. Now, that's obviously changed. Now we've got context. But it's that's the reason why it got so popular. And I that's also the reason why a lot of people aren't are sort of moving away from it right now. Not because Redux is bad, but because the thing that that the only thing that they are using it for was the ability to do that. Mm hmm. is now much easier in just pure react. - -61 -00:37:41,760 --> 00:39:01,880 -Scott Tolinski: Yeah, definitely. Cool. So let's dive into the next one, which is mob x, which is another one I have not used, people who use it seem to like it, I don't use it, it's a little different. They use decorators, they use observables. It's basically as it says it's based on observables. And for those of you who don't know, I got this little this little uh, I guess you could call this a definition of observables. From this website, I just googled and found hype dot codes. I don't know anything about this site. But I thought this was really nice description of observables, which is an observable is like a stream. For those of you know, what streams are ended allows you to pass zero or more events where a callback is called for each event. Often observable is preferred over a promise because it provides the features of a promise plus more. So it's sort of like a promise, if you can think about that. However, it allows for listening for specific events or waiting and pausing on different times. So mob x is based on observables. The syntax is cleaner and nicer than Redux. But it does use things like decorators and observables. So if you don't know those concepts might be worth taking some time to dive into those. Again, I haven't used mob x, but they have a good sized community. And it seems to be well liked by the users. - -62 -00:39:02,070 --> 00:39:12,840 -Wes Bos: Yeah, it seems to be one of those things that is not all that popular, but the people that do like it are crazy about it. And it seems to be a really good use case for whatever it is they're working on. - -63 -00:39:12,920 --> 00:41:26,040 -Scott Tolinski: Yeah, it sort of emerged as like the first major competitor to Redux. So I think that gave them a bit of a heads up. Next is going to be context. And this is what I use for my global state. I use reacts context. And I get a lot of questions about this, because people are like, well, doesn't that context cause a bunch of unnecessary re renders when you have all of your data in one provider? And sure it would, but I have all of my data in several providers. So what I have is a little system that has several different providers. And then I have like a merger that essentially merges all the providers so that in my app.js, I just have one provider there that sort of encapsulates all the other ones. And then I have several different global states, so to say for all of my different types of state, so anything related to the checkout right is the checkout open, is there an item in the cart cart, you know, is there order complete, those things are all living in the checkout context, I have one, that's the app context is the navigation open that sort of thing, I have one that is the, actually the alert context is an alert fired. And that is so that way I have like global toast messages. And what's great about this is that anytime you want to call any of these, or update any of these functions, all you have to do is use the use context hook. And it's amazing because I don't have to do anything, I just say, use context, and then pass in the context. And then I get to pull out my send alert function, I have a send alert function, you pass it a string, it calls updates, the global state, the alert pops up, if I do a send error, it does the same alert, but the background colors red, and I can create these little functions inside of my context, components that are able to update manage all my state, a lot of people do this same sort of concept using use reducer, but most of mine are to be honest, is just use state with inside of my, my context. So I use a lot of use state. And that's pretty much it instead of you I don't use reducer to me is like a little bit overkill for a lot of these things. If you want to check out the merger that I have, I think I have a call it a provider composer, I didn't write that I actually got most of this code from somewhere else. And although I want to change the name, because I don't really loan or provider composer, rather call it like merger Iser, or something fun. - -64 -00:41:27,300 --> 00:41:27,810 -Unknown: Yeah. - -65 -00:41:27,810 --> 00:41:41,850 -Wes Bos: So you're saying that if you've got multiple providers, or if you have one provider with all of your data in that, then that will trigger too many renders on things that are not necessarily changing? - -66 -00:41:42,230 --> 00:41:49,440 -Scott Tolinski: Yeah, my understanding was that when you update the state of a provider, every bit of code that touches that providers updated, - -67 -00:41:49,649 --> 00:41:50,340 -Wes Bos: okay, - -68 -00:41:50,399 --> 00:42:06,900 -Scott Tolinski: so like, if you were to have everything within one provider, and you were to open the navigation, then my alert would trigger a rerender on the alert component, it would trigger a rerender on another component and another component and checkout component, whatever. But if I had it, you know, in its own individual islands, then it won't. - -69 -00:42:07,169 --> 00:42:46,130 -Wes Bos: That's interesting. That's a kind of a cool way to do it. We should also say that, like, the whole idea of context is that you don't context is just like a bus that gets your data where it's going. Context doesn't hold any of the data itself. So if you want to hold data, you still like Scott said, you still put it in state. And if you want to update that data, you still have state updaters. And then how you get that like how you teleport that data and those updaters from the top of your application down to where it needs to be is via context. So context is sort of like your data is in the air. But before you can before you can actually grab it out of the air, you need to use context. - -70 -00:42:46,169 --> 00:42:58,860 -Scott Tolinski: Yeah, and let me tell you, I didn't love context, until hooks came out. It wasn't until use context came out that that it really solidified it for me, but also made it seem a lot more elegant, easy, because now - -71 -00:42:59,580 --> 00:43:01,650 -Wes Bos: render props are just too much, right. - -72 -00:43:01,730 --> 00:43:12,780 -Scott Tolinski: It's just too much code, how much code is that a render prop to get that stuff out of there? It's like five lines of additional JSX. And just like clouds, your your your not your DOM, but your JSX it just Oh, yeah, - -73 -00:43:12,780 --> 00:43:19,320 -Wes Bos: yeah, it's funny. There's so many things that were saying today is is just like it used to be so terrible. And now integrate. - -74 -00:43:20,210 --> 00:43:23,070 -Scott Tolinski: Yeah, right. Yeah. Except for mixins. - -75 -00:43:23,210 --> 00:43:49,830 -Wes Bos: Except for mixins. Yeah. I use context as well. Just like Scott was saying, big fan of how it works, especially now with hooks, I think I reach for in almost all of my applications as a default. And then if not, if I want to go more graph QL. Then I go for Apollo. But I don't even reach for Redux anymore for it or any of my applications. It's just either context, or Apollo. Yeah, - -76 -00:43:49,920 --> 00:45:07,140 -Scott Tolinski: Yeah, same here. Cool. So let's get into the last section here, which is going to be Apollo. Now, Apollo is just really a library for graph qL, of which there are several of these libraries. So we can't talk about them, obviously, all because there's too many of them. There's erkel, there is relay, there's a whole bunch. Apollo manages the cache of your entire application. And you could think of it as sort of like your Redux store. So anytime you call for data, it pulls in that data and caches it, then if you try to get that data again, your your Apollo store is going to be like whoa, we already have this data, let's pull it or you can do another fetch off the server if you need to grab fresh data. In addition, you can also have your client state your local state like Wade mentioned, they're your clients, they can be saved as data. And again, managing your global state. That's not the data coming in from your API's, as we both mentioned can be a bit of a pain but the system's nice like when I first saw it, I was like, this is really cool. I can do everything through Apollo, I don't need Redux. But after using it again, I think there are some some kinks to work out and some little things here and there that that that you know, it is really nice to be able to just say Yeah, also give me the the client state in here as well. But yeah, that's a good. Yeah, - -77 -00:45:07,140 --> 00:45:47,430 -Wes Bos: I think that's a pretty good rundown of state in react, how you get your data where you need it to be how you update the data when you need to update it. It's a pretty, it seems like such a simple thing. Yes, have a object, you want to change the data, you change the data, but you really get into it, both in terms of like performance and immutability, and writing testable code and being able to have good dev tools, you get really into some but just storing data in an object. So hopefully, that was helpful to you. If you've got anything to add, make sure you tweet us at syntax FM, on Twitter, we'd love to hear what you have to say about this. - -78 -00:45:47,729 --> 00:46:29,010 -Scott Tolinski: Yeah, I'm of the mind that some of the some of the state stuff like some of the problems that people talk about in state aren't necessarily the same problems that a beginner or smaller applications will have. So people might look at some of this stuff and be like, I don't get it. Why don't you just use your state or whatever, for everything. But as your application grows, that changes in different sort of ways. And just know that there are people who need to solve these problems, because these problems are very, super real, with what happens when your application grows to this size. And again, not all small applications will pop up and have the same sort of issues. So if you're listening, and you're like, I don't understand why I needed any of these hardcore tools like this, you just Just wait. - -79 -00:46:29,669 --> 00:46:45,330 -Wes Bos: Just wait, you will eventually stub your toe on something. And you'll say, Ah, that's why people are spending so much time on these these problems. What about sick pics today? What do you got? A I have a sick pic. For - -80 -00:46:45,330 --> 00:46:48,150 -Unknown: me a - -81 -00:46:48,780 --> 00:48:17,460 -Wes Bos: mistake? I have one. Let's see. All right, well, you go ahead and find your sick pick, I am going to sick pick a keyboard, someone sent me this keyboard A while ago, it wasn't in the company, it was just someone who listens and thought that I should try a mechanical keyboard because I've been a Mac Book keyboard or the apple keyboard for probably for 10 years. And I love it. And I've tried many times to get into mechanical keyboards. And it seems odd that this whole mechanical keyboard, sort of john rrah, where you put it together yourself and you have to spend all this time configuring it. And it's never been all that appealing to me, especially with the how loud they are because I record screencasts for a living. And you might even hear me typing. So this is the the massdrop control keyboard. And I finally I brought it up to the cottage here because they don't have another Mac keyboard and I thought I'd try it. And I forced myself to figure out how to remap some of the keys. And I'm I have to say I'm actually really liking it. I'm surprised once I forced myself to use it for a couple days now and I'm feeling really good about it. It's got like a rainbow LED on the bottom, which My kids love. It's wired, which sucks, but I'm sure I'll get a Bluetooth one at some point. But big fan of it. It's called the mass drop control keyboard. And I think you can buy it on drop calm. Big fan. - -82 -00:48:17,820 --> 00:49:18,810 -Scott Tolinski: Yeah, so I I'm currently using a mechanical keyboard myself, I have the key Kron k one. It's low profile. And it's Mac specific. So like the keys are really flat. And they remind me a lot of like the chiclet style on the MacBook. So I was really interested in this keyboard, because it's mechanical switch. And I was thinking okay, this is like a nice little bridge between a mechanical keyboard, and whatever. It's also Bluetooth that has all the fun LEDs and all the Mac keys right where a lot of the ones just aren't like not Mac specific. And the point of actuation I believe it's called the point in which it registers a key press is before the click. It's driving me nuts. I like I'll rest my finger on the key and I'll type a letter because the key is slightly depressed. No click but it still registers a key press and I am probably going to return it I like right I like took a photo of my desk and I got like a billion Instagram coming What keyboard oh my gosh, - -83 -00:49:18,810 --> 00:49:33,900 -Wes Bos: that Instagrams the worst. I like the word a huge banner. Like this is a control keyboard and like a 400 people what keyboard is that? Yeah, and Instagram people are the worst for asking what keyboard is that? It gets you the likes. But but - -84 -00:49:34,350 --> 00:50:03,240 -Scott Tolinski: so I had to but every single time I couldn't just I couldn't just paste it in as the key shot. I had to paste it. It's the key term, but I'm not sure if I like it. I think I'll return it. Yeah, like, it's like, I just want to ignore it. So I'm like, I don't know, I'm back and forth. Because to be honest, the typing experience is really nice. And if I can like train myself to use it correctly, then then be fine. But it's like I spent 70 bucks on it. So it's like you kind of want it to be I don't know. Perfect. That said it does work really well. I don't know other than the typing issue a little bit like doesn't - -85 -00:50:03,240 --> 00:50:13,080 -Wes Bos: type the only board to do well it the keyboards main function it's a to type and BT get the likes on the gram. - -86 -00:50:13,110 --> 00:50:21,600 -Scott Tolinski: Yeah. And have rainbow colored LEDs. Set to be teal right now, which is really nice because it's my brand colors, you know, to I want to - -87 -00:50:21,600 --> 00:50:27,630 -Wes Bos: change mine, but I can't figure out how to like this whole, you have to like inspru install 100 things. And - -88 -00:50:29,130 --> 00:50:31,830 -Scott Tolinski: if it's a good to brew install anything, I'm like, - -89 -00:50:31,830 --> 00:50:33,240 -Unknown: I - -90 -00:50:33,240 --> 00:50:41,700 -Wes Bos: don't want a hobby. I just want it to work. Yeah. I think most people are into these keyboards because it's a hobby and I don't want it to be a hobby. - -91 -00:50:41,730 --> 00:51:02,940 -Scott Tolinski: I don't want it to be a hobby either, right? I know. My sick pick is going to be another podcast, my podcast hick picks, people seem to really love. So I've been doing a little bit of hunting for some new podcasts. And I've been trying some out here and going on bit of a hunt for different ones. And I in the past don't really love tech podcast, or even programming podcasts. There's only a few I listen to like the React pod attacks. - -92 -00:51:02,940 --> 00:51:04,980 -Unknown: syntax is the best. Well, - -93 -00:51:05,040 --> 00:52:04,170 -Scott Tolinski: I never miss an episode of syntax. I hear the hosts are both very smart and very handsome. Yeah. Oh, yeah. exceedingly. Yeah. And so, you know, I, I'm sort of skeptical about getting into too many tech podcasts. But this one has been really good. It's right up my alley. It's called command line heroes. And it is history of web dev stuff. So the first couple episodes were just okay. They were doing like the whole Apple and Microsoft history. But then they got into like a hit Linux history. And then they're doing like a DevOps history. The most recent episode that was released on today was is just called creating JavaScript. And I haven't listened to it yet. But it's all about the history of JavaScript. And there's one on basic and all sorts of stuff, again, is, you know, tech podcasts are not typically my thing, but this is right on my alley. I love history. And there's a lot of really great episodes. It's narrated really well, it's high production value. They do it in seasons. So it's called command line heroes, and I've really enjoyed this podcast. - -94 -00:52:04,350 --> 00:52:31,530 -Wes Bos: They asked us to be on this. Hey, but yeah, did they had it? They sent it? It's red hat is behind this. Yeah. Right. Send us an email to what it was to like to host it to host one of the episodes, I think, well, it was it was like safer. No, it was like super, like, short notice, though. So I think I said we can't do it. I think you're on it. Maybe we should Check. - -95 -00:52:32,190 --> 00:53:57,930 -Scott Tolinski: Check. I would be on that podcast. I'm a big fan now. Yeah, that's really cool. Command Line heroes. Maybe you'll hear me in west on it. Who knows? But that Yeah, that's it. My shameless plug Today is August. My shameless plug today is going to be the latest level of tutorials course, which is called Gatsby e commerce. Have you ever been curious about how people do e commerce with static site generators and Gatsby specifically, well, this is the good, it's not just good. It's great. It's such a it's not. It's not just great. It's incredible. This is the incredible start to e commerce with Gatsby. Now this isn't the advanced course. But what we are doing in this course is first, we build a Gatsby site with just stripe that allows you to just accept payment via stripe then we do another Gatsby site where we connect to Shopify and use this iframe to buy button that has an iframe cart and does everything for you. And then lastly, we show you the very basics of building your own Buy Now button directly with Shopify. The I should say that the course that's coming out in August as will be the announcement of the August course is going to be an advanced Gatsby e commerce which is just going to be Gatsby and Shopify exclusively in we're going to be building a really nice full on site. So if you are interested in learning gets B and E commerce head on over to level up tutorials.com forward slash pro and sign up today. Save 25% of sign up for the year so do that now. Right now drop what you doing Santa. - -96 -00:53:59,610 --> 00:54:15,510 -Wes Bos: I'm just gonna plug all of my courses again. Wes Bos comm forward slash courses I've got courses on react and node and in CSS Grid and Flexbox. Some are paid some are free. check them all out. Wes. Bos sw SB oh s.com forward slash courses. - -97 -00:54:15,510 --> 00:54:16,410 -Scott Tolinski: sick. - -98 -00:54:16,410 --> 00:54:23,700 -Wes Bos: I think that's it for today. Thanks for tuning in. Apologies if my audio was not as good as it usually is. Don't apologize for - -99 -00:54:23,700 --> 00:54:24,540 -Scott Tolinski: anything ever. - -100 -00:54:26,370 --> 00:54:30,630 -Wes Bos: Just know we get we get lots of hate when the audio is not perfect. So - -101 -00:54:31,620 --> 00:54:40,260 -Scott Tolinski: I understand that I listen to a podcast and someone's eating during the podcast or Oh, yeah, just I'm like ready to get on Twitter. What are you doing? And then I don't. - -102 -00:54:42,060 --> 00:54:47,730 -Wes Bos: Oh, boy. Alright, that's it for today. Thanks for tuning in. And we'll catch you at the next one. - -103 -00:54:49,110 --> 00:54:49,770 -Unknown: Peace. - -104 -00:54:51,630 --> 00:55:01,410 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review If you like this show - diff --git a/transcripts/Syntax171.srt b/transcripts/Syntax171.srt deleted file mode 100644 index 5a44bf86a..000000000 --- a/transcripts/Syntax171.srt +++ /dev/null @@ -1,84 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott Tolinksi ski. - -2 -00:00:25,890 --> 00:01:06,950 -Scott Tolinski: Oh, welcome to syntax. In this episode, we're going to be talking about publishing a react library. This is something that I'm currently doing. And I'm getting more and more interested in this. And I've been really impressed with just how easy it can be if you let it. So we're gonna get into all about some of the key things, some of the ways to get off the ground running. We're going to talk a little bit about doc libraries. There's a lot of stuff in there. And just a little bit about the projects and in how you can maintain a project here as a new, somewhat open source developer. So my name is Scott Lynskey. I'm a developer from Denver, Colorado, and with me, as always, is Wes balls. How you doing? - -3 -00:01:07,170 --> 00:01:20,280 -Wes Bos: Hey, everybody, I'm doing great. I'm excited. I've actually never published one of my modules. Like when I'm sorry, one of my react components to NPM. So I'm very curious to see what the process of this is like. - -4 -00:01:20,400 --> 00:01:38,670 -Scott Tolinski: Yeah. And this, by no means is the definitive process. This is the process that I did a little bit of research and found and really was impressed with just how quick and easy it was. So first and foremost, I think we want to talk a little bit about our sponsor this episode, which is going to help you along the way of writing some good code. - -5 -00:01:39,000 --> 00:02:31,310 -Wes Bos: Yes, the sponsor is century@sentry.io. And they're going to do all of your error and exception tracking. Basically, what it is, is something you install to your app front end back end, any end that you have, you're gonna install it. And what it will do is it'll sort of catch any errors that happen and collect a bunch of info as to what happened, where did it go wrong? What made this thing happen, and then you get this amazing dashboard that allows you to filter and look at aggregate details about what happened and basically is just a treasure map to to what the bug is. And with that insight allows you to fix your bugs much faster. So check it out. century.io use the coupon code at tasty treat all one word, that's going to get you two months for free. And that will work for existing users as well. If you haven't used that yet, make sure you pop it in. Thanks so much to Sentry for sponsoring. - -6 -00:02:31,709 --> 00:04:58,560 -Scott Tolinski: Hey, thank you century. So okay, let's get this started with what I found to be the fastest way to get a library going. And that's through a library called create react library. crate react library to me is really super cool. You can just fire it up directly from NPM you know, just NPM crate hyphen react hyphen library. Next thing you know, you have a repo fired up that uses roll up it bundles c j s and s modules, it basically you know sets up Babel for you. It has a create react app built in so that you can fire up a quick little site to do testing and examples. And like I said it uses bat roll up for bundling it uses Babel for transpiling. It has just configured. It supports complicated peer dependencies, CSS modules, optional support for TypeScript source map creation. And there's a lot of people working on it, this thing's pretty, pretty, super cool. I fired this up. And in two seconds, I have actually a YouTube video where I show this thing going. And it's maybe like a five minute process of having a thing growing, and then all sudden you have your component. Now, just like any other create react app or any other thing, you sort of have this going in two ways. It's pretty cool because you have your package, which is one bundler, and then you have the Create react app that's built into it. And they're all linked up. So you can import directly, immediately and start using it. And so the development process goes a little bit like this, you have your app, j s, or whatever it is and your create react app. And you can just throw the component on the page. And then in the other bundler, while you're, you know, writing your component, they'll all auto update. And it's just like working in one site. Now, the cool news is, is that that's pretty much all you need to do to have a package here. And this thing just basically gets everything set up for you except for the NPM stuff, it names it, it sets up your bundler, and it sets up all of the paths and directories, everything to be okay. Now, I did find some pitfalls a little bit with the version of create react app is kind of all balled, and there's some weird dependency stuff. I tried to use hooks and some stuff broke. So I had to update the versions for everything and then react was complaining that I had two copies of react running, which is a really unhelpful error. I'm just gonna say that it says you have two copies of reactive running and then you're like, Okay, thank you for telling me that. But I have no idea where the the copies of react are coming from or how to fix this. So I guess I'm just gonna have to - -7 -00:04:59,130 --> 00:05:00,570 -Wes Bos: capitalization issue. - -8 -00:05:01,130 --> 00:15:18,180 -Scott Tolinski: No, it was an issue where the one bundler, the bundler for the Create react app, and the bundler for the library itself, were both using react. And because of that, I get, so I had to link using NPM link, my react to the package, I'm going to do a video on it. So for anybody who's interested, there'll be a video on my YouTube channel showing the exact process I did, because it was a giant pain in the butt. And there was like a Stack Overflow issue that Dan Abraham himself answered, but like, the answer didn't work for me. So I was just sort of like, oh, okay, great, it didn't work. So I guess I'm not doing this manually. But I figured it out. So that said that, that's pretty much it. And other than that, if you want to get it published on NPM, which is also easy, you just need an account on NPM, I created a organizational account for mine, you may have seen those popping up with the at sign, like it'll be at testing library or something rec testing library, mine is AP level up tuts forward slash the package, which is named fresh is the one that I'm working on. And so you create your your NPM account, you create your login, and then you install mol you already have NPM installed. So you don't need to install NPM. But you basically just sign into NPM using their csli. And then you can publish your repo, and then it's available for anyone in the world to install on their application. So just like that, you could create something that's very simple. And so for me, I just started a little forms library. And it was amazing to me that I could get it up and on NPM and have people using it in about two seconds. So this is the process that I've been taking. And I've been loving this. And then it got me into improving, developing and changing the package. And I ran it ran into a bunch of issues around how to document this thing, right? Because we all know documentation is a big deal. And honestly, I want to turn this into a community project. I want other people to work on it. I want it to be documented well and people to get the idea of what the library is. So I started to dive into documentation libraries of which we could probably do an entire episode on because that is a deep dive. There was a lot of different documentation libraries, from style guides, just react style guide, best story book, you know, there's there's a doc xe docs, and there's there's some others docs, yeah, dogs. Yeah. And let me tell you, none of these really worked super, super well. I know storybook works well started books the exception but it is kind of a bit more of a pain in the butt to set up than some of the other ones. Because you have to do all this storybook specific stuff style guide, just I think just like scans your repo for MDX files, like you don't have to tell it where things are. And then even the doc z one, that configuration is pretty minimal. You have a doc xe folder, and then you have markdown files in your app like anywhere in your app, and it will just find it and use those that said, Every single one of these that I tried has some sort of weird issue going on, like dogs Z's, that, like, man, their team has created something really super cool. And like, let me tell you duck zzz dogs is really cool. I really liked it. But there's a lot of open GitHub issues. And you will run into a lot of those open GitHub issues, even just following their install instructions from their homepage, or from their getting started, like didn't work, just the bundle, there didn't work, I wasn't doing anything interesting, just did flat out didn't work. And then I found a second set of instructions to do the same process. So my guess is that it's just outdated or, or legacy documentation. Because I tried the second process, I just started from scratch, and was slightly different, but it worked. So maybe I should be submitting a pull request. I don't honestly know enough about the repo to assume those kind of things. But there's a lot of open GitHub issues. And I personally have found a lot of them, you'll see me commenting saying I'm also having this issue in there that said, I like this system and dogs these Doc's maybe the most storybook is great, it's a little bit heavier, it's a little bit more intense. And to be honest, I find a lot of storybooks that this is more of like an indictment on the people who write libraries that are like, not health, like they'll show the component in action. They'll show the knobs which have all the props, and but then they don't they like wrote some like obscure code to get it to all just, you know, generate each one because you have to write essentially, like code to use your components for each one. Like I get to that code. And then they wrote, they wrote a bunch of helper code, and it's not actually how you would really use it. So it's like, what's the point of doing this? If you can't actually, you know, I have to like inspect with the React dev tools to see the actual usage. So storybook is great. It's an awesome platform. I just don't know if I'm ready to bring that in just yet. I want something that like sort of does things for me a little bit more. There's also doc Saurus. I think it's called doc you source that a lot of libraries use I believe, just uses it react testing library uses it. If I'm being entirely honest, I don't like the documentation that any of those platforms have been in the source. But that's that's a personal issue on my part, you very well may like it. That's the only reason I didn't pick it, it looks like a really solid platform. Again, this is a thing I could talk a lot about. All of these platforms have a lot of like really good people hard at work on them. And so hopefully nobody takes my comments as being derogatory towards entities because I thought they were all excellent. It's about finding the one that's right, right for you in your library. So right now, I'm just really working with, essentially, my GitHub README. My GitHub README is a nice little props table, nice little basic README. And I think as long as you give people the options of what props are there, what are the components they can use, and maybe some examples of how to use them that that work, then they'll be happy. And you don't need an maybe necessarily huge docks library until this thing gets a little bit bigger or something. So maybe let's get into a little bit of what I'm building, I'm building a forms library. Why? Because there's a billion form library. And I think their API's could be a lot more simple, just like looking at some form libraries. And their basic example of a form is like 15, lines of code long to just get a text input in the form going, it's like, I just write this myself, like, why do I need a library to do this. So my library, the API is really simple. I built it for me. And that's the kind of stuff that you want to do for these things, right? Like not every open source project needs to serve the entire community, or serve all these people or serve a billion people. One of the things I found about this is that I can take this thing, this code that I may have written for level up tutorials, anyways, as a form library, right, I might have wanted to just use this as my own personal form library level up tuts. But by creating it as a react library, and then distributing it, and linking or whatever, it's turning it into something different, something the community can work on, something that I can, you know, grow from, because the code is going to be public, but also something that is going to be useful for other people, you know, it's like, why would I spend all this time creating this thing that is just useful for me, when other people, you know, if it if it fits their fancy, they can use it too. So I think that's a big lesson is that you don't have to create things for everybody. But you also don't have to create things for just yourself. And it's really opened my eyes to maybe some parts of my platform that I've written, that you're really I think people could benefit from, right? Or even just other projects, right? Imagine this, I have all of my react, styled components living in a folder called elements. They're all totally self contained. That's my entire CSS, all of my level up tutorials components. Well, why wouldn't I just turn those into a node library. And then anytime I'm doing a level up tutorials, video series or something, I could just install my own my own elements. And I'm so familiar with those elements. It's like my own personal bootstrap. And it would take two seconds, it would take creating the library, copying and pasting the elements in there, publishing it, and then installing and importing. That's pretty sweet. And so you might be concerned, because you might be thinking, well, well, how do I work on these things, right, like, let's say I'm local, developing level up tutorials, then do I have to update my package, change the version, publish it to NPM, and then install the new update from yarn or node or whatever. In my package. Note, you don't have to do that. If you are developing locally, there's this really amazing thing called link. Now, if you've never used that link via NPM, or yarn, it's super simple. If I'm in my library, let's say my form library, which is called fresh if I'm in the fresh library, from the root of that library, I just do NPM link or yarn link, it's just different. But if you're using yarn on your site, use yarn link. So you do link NPM link, that's it. Then you go to the directory of your project, whether it's level up tutorials, or whatever. And then instead of typing NPM, install, whatever you do NPM link, and then the package name, or yarn link, and then the package name. That part's essential, because what it does is that links the local package build to your site. And this is really super cool, because now you can develop your site. And it's going to be linking the package directly to there, you don't have to worry about NPM, or any of that stuff. So I've been loving this because I've been using this form library already in level up tutorials on some really basic stuff. And it's taken me No time to get this up and running. And it was just really exciting to be able to drop it in there. If you want to see this process. I have a video on YouTube right now that illustrates this process and shows you exactly how easy it is. In fact, we create a library in two seconds, and then I drop it directly in level of tutorials using link. I'll link to this video in the show notes here if you want to check that out. But it's just so easy. All this stuff is is easier than I expected. Because every single time I've looked into this, I've looked into adding it all from scratch, like, Okay, I gotta set up my Webpack config are gonna do this, I got to do that. And like now I have a create react library that I can just click once and get my app going. And then there we go. The things I'm looking forward to in the future with this are more community involvement of which we have done right. Somebody mentioned that it'd be really great to have releases and milestones so that you could see what The plans are where this is going. And then maybe people could work on it that way. So that's something I'm going to be doing, taking advantage of more of these tools that exist that you see in open source libraries. And really just try to cut my teeth learning a lot about this, maybe we'll do a follow up after I've been an open source maintainer for a little bit longer than one week. - -9 -00:15:20,250 --> 00:15:57,390 -Wes Bos: That's great. I love hearing how easy it is to push these things. Sometimes I do make these simple little components, I even have a little react component called dump. Just is is sort of like the the PHP equivalent of like the pre print are, where it just dumps like an object onto the page so you can see it. And when I did that, I didn't publish it to NPM. I just said just just literally just copy paste it into your project, because it's so simple as to what it does. But maybe I should try and go the route of putting dump on on NPM people could just npm install it. Yeah, - -10 -00:15:57,420 --> 00:16:08,460 -Scott Tolinski: yeah, no, it's uh, I don't know it. It was so much easier than I was expecting. You. If you already have the code written for dump. You could get dump on NPM as Wes was - -11 -00:16:09,750 --> 00:16:12,840 -Unknown: at West boss at Wes Bos. Yeah, Wes Bos dump. You - -12 -00:16:12,840 --> 00:16:18,120 -Scott Tolinski: could put an S on there, too. You could just do at Wes Bos dumps? And then that would be that'd be pretty funny. - -13 -00:16:21,600 --> 00:16:28,020 -Wes Bos: Oh, it's funny because I have I have a very popular package called Wait, which has become one of those one line NPM - -14 -00:16:28,020 --> 00:16:30,300 -Scott Tolinski: packages actually used wait before - -15 -00:16:30,360 --> 00:16:44,400 -Wes Bos: Yeah, it's it's it's been installed like a quarter million times or something silly like that. And it's really funny. I should have like at Wes Bos Wait, at Wes Bos dump, just like just all these different verbs of things that can happen in your app. Yeah. - -16 -00:16:44,640 --> 00:16:46,320 -Unknown: Yeah. That's funny. - -17 -00:16:46,650 --> 00:16:54,120 -Wes Bos: Beautiful. Well, that is such a helpful little primer. I'm gonna try it myself. Do you have anything else to add? Or should we wrap this up? - -18 -00:16:54,210 --> 00:16:55,140 -Unknown: Let's wrap it. - -19 -00:16:55,320 --> 00:17:22,530 -Scott Tolinski: Let's wrap it and nothing else. I'm interested in anyone's tips or tricks for hosting or maintaining any open source projects. As somebody who's really getting really feel on the flow for this. I'm liking it. I'm interested to hear what people who have already gone through some of these processes have learned. We can share those pre decided syntax on syntax FM on the Twitter and I will give you a retweet and wellness journal, all that good stuff. So yeah, that's all I got - -20 -00:17:22,770 --> 00:17:23,330 -Unknown: peace. - -21 -00:17:26,219 --> 00:17:36,000 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax172.srt b/transcripts/Syntax172.srt deleted file mode 100644 index 643378dca..000000000 --- a/transcripts/Syntax172.srt +++ /dev/null @@ -1,276 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax, the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:05,520 -development treats out - -3 -00:00:05,520 --> 00:00:10,530 -there. strap yourself in and get ready to live ski and West boss. - -4 -00:00:10,559 --> 00:00:33,150 -Wes Bos: Welcome to syntaxes to the podcast with the tastiest web development treats today we've got a potluck coming at you. These are questions that have been submitted by you the listener. We've got some questions on CSS Grid, deploying career advice, TypeScript, boot camps, JavaScript, you name it, we're going to be covering it today. With me as always is Mr. To Lenski. How you doing Scott? - -5 -00:00:33,150 --> 00:00:33,810 -Unknown: Hey, I'm - -6 -00:00:33,810 --> 00:00:45,360 -Scott Tolinski: doing good. Just, you know, working. I'm speaking at a developer Denver in like two days. So I got to prepare a run through my talk a little bit. Yeah, it's - -7 -00:00:45,360 --> 00:00:46,200 -Wes Bos: a talk on. - -8 -00:00:46,529 --> 00:01:08,370 -Scott Tolinski: It's gonna be my too fast too furious talk. So if you were listening to syntax, you remember we did an episode that was based on how to learn things quickly. And that's really yeah, the topic there. I'm changing up some of the things in it, maybe updating it just to hair, but for the most part, it's the same talk, and I'm really excited to give it so yeah, I'm pumped. Yeah, I'll be my first talk in a little bit here. - -9 -00:01:08,609 --> 00:01:29,550 -Wes Bos: Great. Well, today, we are sponsored by two awesome companies. First one is century dissolve your error and exception tracking as well as Freshbooks. Does. Small Business Freelancer invoices. So invoices expenses, all of your cloud accounting needs. We'll talk about them partway through the episode. Other than that, you're ready to get into it there. Scott. - -10 -00:01:29,609 --> 00:01:32,100 -Scott Tolinski: I'm ready to play. All right, - -11 -00:01:32,129 --> 00:01:33,630 -Wes Bos: you want to grab the first question there. - -12 -00:01:33,809 --> 00:01:54,660 -Scott Tolinski: Yeah. Okay. Eric saw. Thank you, Eric, CSS Grid question. prefer using grid, prefer using a grid row and grid column instead of grid area. For example, grid row one, three, and grid column, one fourth, instead of grid area. 1134. Hard to visualize. - -13 -00:01:56,340 --> 00:02:12,630 -Wes Bos: what he's referring to here is is how to span an element. So we want to put something on a grid, he prefers to use grid row and grid column versus actual named areas where you say like grid area, header grid area, footer grid, or even just our grid area with, - -14 -00:02:12,630 --> 00:03:20,069 -Scott Tolinski: you know, the line numbers. So he says, I find it easier to parse when looking at code, but is grid area more performant? I thought of it because in Flexbox, it's a best practice to use a shorthand flex property instead of writing out flex grow shrink basis. Okay, so on. So then he goes on to say thank you for all of the podcasts. You're very welcome, Eric. Yeah, so this is this is a interesting question. But it's To be honest, not one that I've ever spent any time thinking about whatsoever, cuz I don't think any of these things are going to be performance issues that you're going to have to worry about. Even the using the flex verse, flex shrink thing, I use flex, shrink and flex grow all the time, I use grid row and grid column instead of grid area just about every time. Because to me, it makes more sense to think about the grid row in the grid column spans rather than just the entire grid area span. That said, I think it's all just personal preference. You could look at the performance of this and say, Okay, well, it is more performant to do it this way or that way. And therefore, that's the right answer. But me personally, I've never ever been in a situation where that mattered, ever. - -15 -00:03:20,220 --> 00:05:56,610 -Wes Bos: Those performance things, people are always scared of these random edge KC things being performance. And if they really are a performance issue, then the browser should fix that because you shouldn't have to make your job harder as a coder just because like one thing is has this weird edge case performance. So once you use whatever you like, I personally go your way where I just use grid row grid column, whatever it is that I want. I very rarely ever use the grid area syntax unless I'm specifically doing like a kind of a neat response of where I want to relay it relay it out every single time on when I hit like a breakpoint. So yeah, totally fine. Don't sweat it and go for it. I think that's a great question. Yeah, totally. Next question we have here is from Tomek, do you have any advice on how to deploy an application? I mean, what do you think about AWS zite Heroku. Firebase to use automated tools like circle ci or buddy dot works? I also wonder, should we keep the whole application on one server? Or should we split the front end? example keep it on s3 back end, put it on easy two images uploaded by users on another instance in case of s3? So this question, I didn't actually pick it because I went and added this as an entire show. I think this would be really interesting to talk about lying in general. But like, we can obviously answer that real quick here. And let's go into it a little bit more than an entire show cuz we can talk about images and like security credentials, and there's so much back and yeah, front end and, and like migrating data and like how do you cut over from the old version of your app to the new version of the app? So there's really a lot to it. So how do you do deploy an application. There's so many ways, I guess I can talk about my own application. Right now I have it all as a single application, which is nice because I have, I do also have many other applications where I have a separate front end and back end. And I find that to be a bit of a pain to have to restart it. It is good for scaling to have them as separate front end and back end, just because if your back end needs much more resources, you don't have to scale up the entire thing just to handle that. Lots of people do keep their images on separate ones. But personally, I put all of my images on cloud Neri is in cloudinary. Yes, the one. Yeah. And then all of everything else, the front end and the back end all goes on a single Digital Ocean droplet. I'm currently working on moving that over to sites now. But that has not been easy task to to get the regular node app up and running on it. Yeah, what about you? - -16 -00:05:56,790 --> 00:05:58,170 -Scott Tolinski: Yeah, so no, - -17 -00:05:58,200 --> 00:05:58,710 -Unknown: yeah, - -18 -00:05:58,710 --> 00:07:50,940 -Scott Tolinski: I'm using something called Meteor galaxy right now, which is really just sort of, I believe it's just sort of a wrapper over an AWS instance. But to be honest, I don't think about it too much I was using, I believe it's called semaphore. And it was a build tool, like a continuous integration tool. And I really liked it. But then they changed it pretty substantially for the version two, and I like having, like, completely changed the interface and the API and all that stuff. So now I'm looking at it like, well, I don't want to learn something new. So I just haven't learned the the new version since it was released. I don't know there's this is a this question. But ticular I think maybe we should record this episode really soon. It's something that I'm doing a ton of looking into at this very second, because, you know, I like Meteor, and I really love my platform. But the hosting is expensive with galaxy, right? I'm not necessarily getting anything special out of it. And I'm hardly using anything that's even Meteor based anyways. So at some point, I could be saving a ton of money on hosting, I could be with a platform that is, you know, has more people behind it at the moment. And I could be taking advantage of those platforms, special features, rather than sort of sticking on a platform where I'm not using the special features and paying more for it, you know. So it's something that I've been really strongly looking at, and especially since next j s, version nine added API routes, I've been looking into moving my platform to next and hosting on zite. Now I believe it is and I'm using the next JS server via API endpoints as my entire API because each one of those runs on its own container. And I guess you can scale those up individually. These This is what I'm hearing. I haven't done necessarily the full - -19 -00:07:50,940 --> 00:08:05,400 -Wes Bos: research yet. That's how they're now that sh, the new version now 2.0 works. Yeah. And which is why it's so hard just to host a regular node app is because they want you to cut it up into every route being its own app, when you have - -20 -00:08:05,580 --> 00:08:26,370 -Scott Tolinski: a graph qL API, because you don't really matter, right? Because all of the sudden you just have one endpoint. That's one API route. And that connects. So I'm going to be able to essentially move over my entire API, right the bit of code to connect my Mongo DB up instead of using meteors, Mongo, and then I'll have all my API's on one endpoint. - -21 -00:08:27,180 --> 00:08:27,930 -Unknown: Beautiful. - -22 -00:08:27,990 --> 00:09:07,350 -Scott Tolinski: I know, I'm, it's actively in my brain. And I'm really thinking about this. So this is going to make a great episode. To be honest, I don't have any good answers for you either. I also use cloudinary to host my images, because I was doing it myself at some point. And I realized, you know what, I just don't have the back end skills to make some of these things happen. Like I was, you know, really overloading my server with image transforms and doing all sorts of things that I just realized, you know, what, I'm a little bit out of my depth when it comes to media handling like this, and I'm gonna let a service like cloud Neri handle it for me, and I'm happy I did because it saved me a boatload of time trying to figure that out, even though you know you pay for it. But Connor is cheap for what it does. - -23 -00:09:07,380 --> 00:09:27,510 -Wes Bos: Yeah. cloudinary is tricky, because it does get really expensive when you start getting into the paid version. Yeah, it goes up pretty quick. And that's that's the same with almost all stuff is either way too hard, and very cheap, like Amazon and whatnot, or it's super easy and gets expensive real - -24 -00:09:27,510 --> 00:09:29,460 -Scott Tolinski: quick. Totally. Yeah, sure. - -25 -00:09:30,169 --> 00:09:30,690 -Unknown: All right, let's - -26 -00:09:30,690 --> 00:09:34,500 -Wes Bos: move on to the next question we've got here. Cool. - -27 -00:09:34,520 --> 00:11:48,600 -Scott Tolinski: Next question is from David. Sorry, the A's capitalized I wanted to emphasize a career advice question. I'm best at being a front end JavaScript developer. But in the quest to make my job easier. I've also been getting into full stack architecture, namely ci CD Travis CI Git lab ci Kubernetes. And I'm feeling like I'm spreading myself a little thin. And I guess I'm just trying and I'm finding it a bit frustrating. configuring Kubernetes is a lot of bashing your head against the wall, I know that my skills as a front end developer are already viable. Whereas I can't say the same for my Kubernetes ci CD skill set. I'm wondering whether I should narrow my scope a bit. Maybe this is just frustrating bump, I'm climbing over and in six months, I'll be happy with where I'm at. interesting to hear your thoughts. One thing I've been thinking about is, maybe I should step back from the network architecture stuff Kubernetes and focus more on DevOps that is closer to the front end stack, ie writing test VS code tooling and commit hooks, ci tools, and more. You know what it depends, it depends on what you find it interesting, if you find this Kubernetes continuous integration, continuous deployment is that what the DMC D stands for? Yeah, if you find that stuff, interesting, I would stick with it like, but I would approach it is more of like a hobby, for instance, you know, I'm really interested in design stuff. So I practice design, and I do these things. And I learn about the design. And it's not easy for me, but it's a you know, it's become a hobby of mine. And it's one of those things that like I've now grown to be much better at it sure, through practice. And that practice was never like, reliant on anything. Not everything that you have to learn has to be like in a direct laser beam towards your goals. Sometimes it's fun to learn things that are just, you know, off to the side a little bit, and still related somewhat, and are going to increase your, you know, your skill set as a developer. But you know, it all depends on what makes you happy. And to me, personally, I find the stuff that's the most challenging and the most rewarding the stuff that makes me the most happy. So if this stuff, like, you know, bashing your head into Kubernetes, if that actually makes you happy, then then stick with it. If it doesn't, then I might, I might look on to something else that is more practical or more related to what you're doing. - -28 -00:11:49,380 --> 00:12:50,429 -Wes Bos: Yeah, it sounds like he says, I'm spread a little thin. So it sounds like right, this stuff is not fun. And I feel like I want to be spending more time. It seems like an odd thing to try to pick up. If you're just focused on being a front end. Totally as Dev, I can maybe see some of the like automated testing could be helpful, but like continuous integration, all this deployment Kubernetes, that stuff is sysadmin level. And there's sort of this whole gap between the middle it which is being a back end developer missing. I think so probably our may or may not probably maybe that you had seen a bunch of job postings, you see, you keep seeing Kubernetes and Travis CI, and this stuff popped up popping up, I wouldn't sweat it, I would probably just double down on my JavaScript stuff. And then only when you need to actually use these things, then the interest you picked up, that's generally how I learned stuff as well, I have no use for some of these things. So I'll never learn them. But as soon as something like that pops up, I'm happy to double down and I find that the learning is much easier when I have a real use case for it. - -29 -00:12:50,549 --> 00:13:05,610 -Scott Tolinski: Yeah, especially that that spreading yourself thing. Thin part is like pretty key, I guess. Because if you're spread, then you're not going to be learning anything as well as you would if you were, you know, focused on learning that specific thing. So I totally hear that. Yeah. Mm hmm. - -30 -00:13:06,419 --> 00:13:55,679 -Wes Bos: Next question we have from a Yannick he you think TypeScript adds value to react or more complexity than value when to choose TypeScript for a project? So this is kind of a question we get all the time people are saying like, hmm, I'm like, I'm kind of happy with my setup right now. But seems like everybody's talking about TypeScript now. And is it worth it? I think the reason why you probably hear a whole lot about it, and you hear a lot of people started chanting about it, because it gives you that sort of like, Oh, my gosh, this is amazing. Why have I not done absolutely every single project in this so far? So I think it absolutely adds value in a lot of projects. I don't think all of them and I don't think you should sweat it too much. But there definitely is a reason for people going absolutely nuts over it because of the benefits that it gives you in a react project. What do you think about that? Scott? - -31 -00:13:56,039 --> 00:16:25,230 -Scott Tolinski: Yeah, it's TypeScript is one of those things. This is kind of a spicy topic, because TypeScript people really love TypeScript. I mean, if you even if you saw the state of the JS survey, right, TypeScript was really well liked by the people who use it. So there's this barrier to entry, where you look at something that's done in TypeScript. And it just reads like, maybe a little bit confusing, right? The syntax is a little dare I say, super ugly, a little super ugly. I think it's pretty ugly. I don't I don't know. I know, people are gonna not like that. But, you know, I don't think people are using TypeScript because it looks super nice in your codebase. I think, you know, they're dealing with the syntax for the features and all the stuff you get. And the fact that, you know, you can just use straight up JavaScript and have it compile as TypeScript. I mean, it's easy to migrate over to. So this is a tough one for me, specifically, because I know TypeScript is going to make your project most likely less buggy. But at what point is it worth to have that and maybe if you're thinking Getting on the ground level? What point? Is it worth starting with that? It also depends on your developer skills, right? Is everybody on board? Is everybody committed to learning and using TypeScript from the get go, then that's a great way to do it. If everybody's all of the the mind that TypeScript is going to make this project better, then yeah, that's good. But if you're just sort of saying, hey, my project works fine. I'm really happy with my my dev flow and how things are going, like, do I need to rewrite everything in TypeScript? I don't think so. I use, you know, prop types and default props and all those things. And they catch a lot of my type stuff. And I use the typed API with Apollo and things like that. And I totally I totally get the appeal of having types. And in just in general, so yeah, I mean, personally, I, I don't know, I'm sort of split on this one, because I would be looking to migrate my codebase to TypeScript. But isn't the highest thing on my priority list? I'm not exactly sure. It really just depends to me on different stages of the project, different levels of understanding, does to answer the question directly, do you think TypeScript adds value to react? Yes, does it add more complexity than value? I don't know, from what I've heard from people who have used it a lot, know that the value outweighs the complexity. But I haven't used it enough on a personal level other than just, you know, smaller projects, - -32 -00:16:25,500 --> 00:16:46,230 -Wes Bos: I think, probably, if you're just learning react, absolutely. Don't touch it. But maybe if you have a larger project, start something else up just to see what the benefits are. And then you'll probably go, Oh, it's one of those things, we say this all the time, you sort of have to have the problems that it solves, before you can realize the benefit that it gives you. Exactly, - -33 -00:16:46,230 --> 00:20:08,460 -Scott Tolinski: exactly. And TypeScript is definitely one of those things that will save you bugs down the line. But really, you know, your codes gonna maybe have bugs in it either way. And obviously, you'll want to use something like century to log in, categorize and find those bugs. West has a little thing in here says, Hey, you know, you can use source maps to track errors back to your TypeScript. That's awesome. And that's absolutely true. You can upload your source maps to century and century will be able to automatically link those errors directly back to the source. And that's one of these awesome features about TypeScript that I use personally, even without TypeScript. So yeah, definitely, you know, TypeScript can work hand in hand with something like century to make your code way better. So what is essentially you will century is the error and Exception Handling software that logs categorizes, and lets you just keep track of all of the bugs that your users are happy having. So that way, you can go through and solve them. If you would like to get two months of century for free, head on over to sentry.io and sign up using the coupon code tastytrade, all lowercase all one word, and you will get two months for free. That's more than enough to check out some TypeScript, upload a source map and check it out in action. So yeah, definitely head on over to sentry@sentry.io. All right, next question. Here, I am in a well known boot camp as of right now, from what they have taught us. This is what I'm working with HTML and CSS, JavaScript, jQuery, node, express, SQL auth. And VC API's react Redux, as we finish off the program, they're going over Java. Ah, I do want to learn Java. However, I feel like my time would be better spent fine tuning my knowledge of the stack. And I can learn Java at some other time, do you recommend it that I fully engage with Java and try to absorb the some of the basics and fundamentals now? Or do you recommend that I take this last month here and strengthen my current skills? So I do better during my technical interviews? By the way, thank you for everything you do. Okay, this question is interesting, because there's a lot of interesting things being taught at this boot camp. But more particularly Java, as everyone knows, is the shortened name of the original programming language, JavaScript, it was produced as JavaScript and never thought that words too long, will just cut the script off and ship it as Java. And and that's the story about Java. Actually, you because they cut off half the word the Java is actually twice as small now. Okay, so they're teaching you Java, I have no idea why they teach you Java that makes no sense to me. People don't really use Java that much in any setting here. I mean, they do but they don't use it that much. It's not like one of those skills that I really see that even like, like the one of the big reasons to learn Java in the past, however many years was to build Android apps. And Android doesn't even use Java anymore. I mean, so this is really odd to me. I would not spend any time on Java. It's gonna just completely I don't know There's, uh, doesn't really I don't see the benefit other than just getting a taste for different programming language other than JavaScript. Yeah. What are your thoughts on this was - -34 -00:20:08,489 --> 00:21:40,610 -Wes Bos: I think I know what's happening here. And it's that like, first of all, Java is super popular. Even though in our circles, it seems silly, like almost every bank out there runs on Java, like the big the big corporations all run on Java. And I bet that this boot camp is either in bed with a bunch of these corporations, or they live in a town that has like an Oracle, a Sun Microsystems, and like even Google, like things like that, then these people are hiring for Java, whether they like it or not. So I bet that that's what hap is happening here. They're sort of just trying to bait everyone's resume with a little bit of Java knowledge, that way that they could go either way. And that's even what most computer science programs taught for a long time. Some still do. But it does seem to be that a lot of in computer science are now teaching like web development languages like JavaScript. So I would I would just spend time on it. I don't think you would, especially if you want to be a web developer, and you want to be a web developer that sort of has a modern stack and you want to be hired by some of these companies, then I probably wouldn't spend time on it. If you do want to plan on like, you can get a well paying job that's maybe not that all that exciting. I don't know I we're kind of being kind of hard on it here. But it definitely seems silly that they would, they would put that on the end of something that is HTML, CSS, JavaScript, jQuery, express, SQL, React Redux, all these like super modern things. And then they just put Java on there for some reason. Yeah. - -35 -00:21:40,649 --> 00:21:45,030 -Scott Tolinski: Yeah. That's bad to me. I yeah, I don't really know. Yeah, so - -36 -00:21:45,050 --> 00:23:08,460 -Wes Bos: I wouldn't, but it's not gonna kill you. It's probably just gonna give you a bit of a better evaluation for other programming languages and how different programming languages work, but your time is likely better spent getting better at JavaScript. Yeah, yeah. Next question we have here is from JD Hirsch. Code hustle. Have you seen live coding going on on Twitch thoughts? Maybe stream do a syntax stream in the future a good list that live coders dev? Thanks for all you do keep killing it. This, the twitch thing is definitely interesting to me. I've definitely looked at it a whole bunch. And I've done some live streams on on YouTube. But I personally don't find it interesting at all to watch a live stream of somebody coding. I don't know if it's because I'm getting old. And that's just like what like young people like to do. But like I can get stuck on something for half an hour. And you just have to sit there waiting for someone to do something like my my tutorials are very trim. And they take they take out some of the arms and ahhs and they speed up when I'm typing along thing and people get distracted even on those videos. And they say this is taking too long. click away. So I have a hard time believing that people sit there and watch. And obviously they do because the numbers are there. It's just never been attractive to me as someone who produces content. And as someone who watches content. - -37 -00:23:08,640 --> 00:23:26,610 -Scott Tolinski: Yeah, I'm right there with you. I yeah, I can't think of a situation where I would watch a programming live coding. I guess it's like to see how people like really their thought process. Yeah, I have I have thought about like, I've thought about doing it, but maybe not live and like, - -38 -00:23:27,330 --> 00:23:29,010 -Wes Bos: I've got a lot of videos. - -39 -00:23:29,249 --> 00:23:42,540 -Scott Tolinski: Yeah, but the same style of content where it's like, Alright, here's this thing I'm working on just like watch me do it for a little bit instead of like teaching because most of my videos are like, Alright, we're gonna sit down, we're gonna learn this one thing. Oh, yeah, no, - -40 -00:23:42,630 --> 00:24:18,180 -Wes Bos: that's kind of what I keep my YouTube for is like, here, I'm gonna like, figure it out on screen. But I'm going to trim, trim it down. I'm going to speed up some of the coding and we're going to figure it out together, or I'm going to come back in five minutes, and say, Okay, here's what I've learned. Right? So like, I could see maybe live streaming, and then and then editing those down to a bit more palatable thing for YouTube. But I don't know, it's definitely something I keep my eye on. Because I don't want to like wake up one day and be like, Oh, yeah, I'm the guy who don't want to watch it. The old man who nobody watches anymore doing Java tutorials. Yeah. - -41 -00:24:19,560 --> 00:24:21,360 -Unknown: You know, yeah, no, I - -42 -00:24:21,360 --> 00:25:51,540 -Scott Tolinski: hear you. And like, I didn't know I, I wanted to do it a couple of times. At the same time. I like I have stuff to do. And I you know, it's like, yeah, if I'm going to be coding the level up site, it's like, Yes, I could live stream me coding the level upside and talking about my thoughts as I refactor this component for the 1800s time or whatever, or write this new cool thing. And that's really great. But like, that's a lot of pressure, man. Like people are judgmental, too. So if I'm typing something in like people in the comments the whole time, they're like, you forgot this, you forgot this or whatever, which they do. Like I do. That's not going to be productive for me, I'm not going to feel like, I don't know in the zone. And I, I don't know about you guys, but I do a lot of googling and a lot of looking stuff up. And a lot of like time reading things when I'm working. So like, if I'm trying to solve a problem for the first time ever, the last thing I want to do is be like under the gun, have a bunch of people watching you try to read some documentation and try to, to figure it out on the spot. Like, that doesn't sound like fun to me. That's maybe like content was prepared. And instead of like doing a edited video, I just went up and taught this thing live and then called it a day. Yeah, that, you know, maybe I would do that. But yeah, it's an interesting thing for me, like you said, I'm keeping my eye on it. And I would like to practice it and be decent at it. So that like, if I needed to go in that direction, I could, but yeah, it's not something I'm actively pursuing, I guess. - -43 -00:25:51,690 --> 00:26:03,360 -Wes Bos: Yeah. If you do watch live streamers, do coding, tweet us at TEDx FM, and let us know, like, why and what it is that you like about it? Which ones do you like? Because I'd love to get some more insight into it. - -44 -00:26:03,600 --> 00:27:25,680 -Scott Tolinski: Sure. Yeah, absolutely. I want to, I want to see the best examples of like, what it is and what makes them good. Cool. So next question is from Mr. JavaScript, JavaScript. Whoa, we're talking to Mr. JavaScript right now. Mr. JavaScript asks, How do you handle people who think that JavaScript is a joke? And is going to be overthrown by blazer or some C sharp library framework? Can we all just get along and live in the same industry? I am having a hard time I'm being an adult, these kinds of responses around the web and in random discussions with people I know very well. You know what I do? I just don't care about it. Like, I don't care if somebody writing C sharp thinks that C sharp is the future. That's cool. Good for them. I know No, I don't care about that. I don't care about anybody who says JavaScript is a joke, or that you're, you know, you're writing too much CSS, I don't care about any of this, anything that anybody else is saying other than, you know, the things that are going to make me more productive and whatever my job So to be honest, people's opinions really matter very little in this and most people who have an a, you know, most people have an opinion and lots of people have bad opinions. And I don't know, I just would not care about this for two seconds. Somebody wants to argue with it about it, then just say, okay, you know, that's, that's your deal. I'm just gonna, you know, move on. - -45 -00:27:25,740 --> 00:28:26,400 -Wes Bos: Yeah, like GL wt Good luck with that, like, congratulations, that we've talked about this before pet people, these people that have these really aggressive opinions are usually hiding the fact that they're not very good at other things. And they've sort of learned they're one thing and they're scared that other things are gonna become the thing and they like to just put other stuff down because of it. I've definitely run into lots of people like this where especially like, at, like conferences, sometimes you get these like, questions that are not questions, but it's just like somebody's talking, though. I and I feel sorry, for cuz it's often a lot of the women who speak get these like, well, there's a blazer framework, and it's actually, it's gonna be much better. And I just thought I'd let you know, like, thank you, like, down, like, just let me do my thing. You do your thing. Good luck with that. I think that's the best you can do. Let those people live their lives. Yeah, it's - -46 -00:28:26,400 --> 00:29:52,590 -Scott Tolinski: funny that you that you mentioned something like that, because it's like recently, now, not recently, but like, Ah, there's so many things in this world right now that people like want to attach themselves to like, it's like a sports team or something. Like, oh, I use JavaScript, therefore, my a and my entire identity is JavaScript. And then when somebody says that JavaScript sucks, the first thing you do is you hear I suck, because JavaScript is my identity. And I, you know, they're saying it sucks, therefore, I suck. And this is like, for everything. For phones. You can't say anything bad about any particular phone or device or anything, because people who love it are going to come after you and they're gonna say, well, this obviously, you know, this phone manufacturer is the greatest thing ever this computer or laptop or this brand. I mean, Apple people know exactly what I'm talking about. Because they do that all the time. Like how I can't see how anybody in the entire world could possibly not want to use anything that's not this device, or this library or this framework or this anything. none of it matters. It's not a sports team. It's not your identity. It's it's a thing that you use to you know, advance your life and your career or whatever, or in you know, phone or tech computer cases. It's a tool to get your job done. That's it. And I just I just don't get it. I don't get why people want to wrap up so much stuff into the things they buy or the things they're a part of. Yeah, mini rails. Mini rant, - -47 -00:29:53,010 --> 00:32:44,010 -Wes Bos: beauty. Next question from Roy M. There are plenty of places saying that is important to say Your API keys by not embedding them in the front end code. Cool. I'm on board, but not many places tell you specifically how to do this. How do you safely use an A? This is so true, though, like every tutorials like either says like, don't actually use your your API key use a proxy or like something like that. And then they don't know how to do it. Because like, it's the answer is like, oh, sorry, maybe let me finish this question here. How do you safely use an API key and a crud project? Roy M. So the answer is that it's hard. And it's hard to stop people from abusing it or misusing it or, or something like that. So let me just go through real quickly, let's say you get an API key from let's use get help as an example, or GitHub. Yeah, if you use that API key in your JavaScript code, anyone can view source on your JavaScript code and pick up that API key, and then start to make requests as yourself. And this is definitely happened many times before somebody had a Twitter API key. And they built like a little Javascript app. And they're like, I'm like, hey, like, you shouldn't do that. Because you, you someone could use your API key. Yep. And I'm like, you shouldn't put your Twitter API key in, in your front end, because anyone could then tweet from you. And they're like, No, I've, I've limited it. I'm like, No, like, you can't do that. Yes, specifically, that thing, and no, it's fine. I know what I'm doing. So then I just wrote up a quick little app and tweeted from their account, and they're like, Oh, okay. Anyways, um, so that's why you can't use it, right? So like, what you have to do is you have to put the API key on your server side, and then use your boot up a server, and then your JavaScript pings your own server, and then your own server and turn pings GitHub or Twitter or Yelp or whatever it is. And that's what that's what's referred to as a proxy. It's a server that does sort of the work for you. Good, but then like, haven't you sort of just moved it move that sort of vulnerability from your server or their server to your server? And now like, what happens if somebody pings your own server and uses API key through there? So how do you safely use an API key and a credit product, there's a couple ways, you can use cores, which is only allowing your requests from a specific domain name, that kind of works, you can use rate limiting only allow certain amount of requests per IP, you can use whitelisting only allow people who have a specific IP address to hit it. And then probably the most common one is just use authentication. So the the person has to be logged in and and the cookie or the jadibooti needs to be sent over with the request before you go ahead and perform that. So I think those are the four ways. Is there any other thoughts you have there? Scott? - -48 -00:32:44,580 --> 00:33:03,330 -Scott Tolinski: Yeah, no, I do all my API calls through my server or through Apollo, you know? So no, I have all of my private keys and all of my API keys as environment variables. And that's that's it pretty much. Yeah, I guess I just don't do a whole lot of this. - -49 -00:33:03,749 --> 00:33:29,250 -Wes Bos: Yeah. Like, even if you even if you have it as a private variable on your own, like, what's to stop somebody from just using your your API, and pinging the like, like, let's say you, you had like a Google Translate API key. This happens all the time people figure out like, third party services endpoint for translating, which probably under the hood is, is using that key. And a lot of people just do nothing and hope nobody finds that that it right. - -50 -00:33:30,600 --> 00:33:46,140 -Scott Tolinski: security through obscurity. I know. I mean, I have I my API in my front end are tightly linked. So yeah, we get a course error if they tried to do anything there. But yeah, I mean, that's pretty much it. I just locked it down that way. - -51 -00:33:46,140 --> 00:34:14,280 -Wes Bos: Awesome. Let's take a second to talk about one of our sponsors, which is fresh books, fresh books is cloud accounting software, for your small business, for your entrepreneurship, for your freelancer, whatever it is, freshbooks is going to help you out for your cloud accounting, go to freshbooks comm forward slash syntax and sign up for a 30 day unrestricted free trial, it's going to help you get paid faster, and let you spend more time on your business. Thanks so much to Freshbooks for sponsoring. - -52 -00:34:14,580 --> 00:34:15,120 -Unknown: Cool. - -53 -00:34:15,120 --> 00:34:26,730 -Scott Tolinski: All right, next question from Gonzalo. Do you plan to launch a syntax FM app? I don't think so. Not not one that I'm aware of. - -54 -00:34:26,730 --> 00:34:27,440 -Unknown: Yeah, - -55 -00:34:27,480 --> 00:34:31,940 -Scott Tolinski: what would it what would the syntax app do? Would it deliver you some tasty treats? - -56 -00:34:32,040 --> 00:35:02,880 -Wes Bos: Yeah. I don't really know what a syntax app would do. Maybe like you could have offline. I always get mad when podcasts have their own app, because like, Can I just use this like normal app for all of my podcasts? Do I download your app just to listen to your podcast? I think what would be better would be just to keep working on the website and adding features to the website so that the website gets better. And that's because I'm a web developer and I'm on Team web. I just don't think Angular an app would be all that necessary. - -57 -00:35:03,110 --> 00:35:12,330 -Scott Tolinski: We could always make it a TWA. Yeah. Though, the one that you can the progressive web apps that you can Oh, yeah, submit to the Google Play Store - -58 -00:35:12,980 --> 00:35:29,280 -Wes Bos: would be pretty nifty. Being able to track what you've listened to, I think there's a pull request on out for that right now, I think all the features that would be in an app can be easily added via the web. And then we can just ship it as a pw a if you really wanted to do that. ship it. I - -59 -00:35:29,280 --> 00:35:46,170 -Scott Tolinski: think that I think just by declaring that I think you were shipping the the, the official app? No, I don't really don't know what we would do for a syntax app. I mean, if there was an any practical reason, but I don't think there really is. So yeah, sorry about that one. - -60 -00:35:48,960 --> 00:37:31,650 -Wes Bos: Next question is from sad, Dev is a bit of a sad question. to end it off on I was hired as a junior developer at a company in the last year, it's my first web development job. And I was so excited. The interview and application were all about react and full stack development, whoever now that I've been here a while I found out the company does primarily DevOps work. So that's like working with servers and Amazon, things like that. None of this was mentioned in an interview or application, but it looks like it will be the majority of my workload, I am feeling very discouraged. And I was wondering, what would you guys do in this situation? So who That would suck because you spent all your time trying to get your job. And finally you're in a job. And then that's your most of your time is doing this work? And you're not even doing the work that you had hoped you are doing? So like the the easy answer is get another job. But yeah, yeah, it's, it's not always that easy, is it? Because like, there's, you have this job now, and you probably have bills to pay, and then you don't have all this time to sort of keep up with your skills. And it's tough. So I think either ask your, your boss Hey, like, what's going on? Like, why? Why are we not doing what we had hoped to do? There's certainly nothing wrong with DevOps work, maybe you could get really good at that. But if I were you, I would sort of just maybe burn the midnight oil and, and keep learning, maybe start applying to other jobs while you're working there. Hey, maybe that's a benefit, you've got you money to put food on the table. While you're looking for your next you have some experience, you probably still have a portfolio, you can probably make a switch somewhat easily somewhat. I don't know how difficult that would be, depending on your skill set. But I'm sorry, that sounds like a bit of a bummer situation. - -61 -00:37:32,010 --> 00:40:52,170 -Scott Tolinski: It does. Yeah, it definitely sounds like a bummer. And I've been in a situation not exactly the same, because it's not nearly as drastic, but where I was sort of sold the job on doing one thing, and I wasn't doing that when I got there. And it's the only job I've ever worked at for like six months. And then I'm Luckily, you know, one of my one, this is actually funny, one of my recruiters that, you know, reach out on LinkedIn, of all places, a recruiter from LinkedIn got me a great job, and I got to leave this job. So you know, I would just keep your ears open, maybe let people know, specifically recruiters, or those kind of things that you are looking, because people can find you a job, you know, especially if recruiters are active in your area. So I would I would just work it out, I would try to do the whole thing where like one, you know, you got your feet in one boat and the other boat pulls up, and then you try to stretch out and put your foot on the other boat without falling into the water. If you can imagine what that metaphor is. So like jumped, jumped ship, so to say from one job to another without ever having to take a ticket dunk into unemployment land, so I you know, I personally would do that, stick it out, while you look for a job. If you need things to build your resume, grind it out, make it happen, get that job that you want to do, because let me tell you even working six months in a job where I wasn't doing what I was sold on was it was soul crushing. You know, I really didn't like what I was doing. And I didn't like the work and I didn't like the end result of the work. I wasn't proud of it. I keep nothing from that job in my portfolio or on resumes because I just flat out it's not something that you know, I'm proud of so so to say that we'll even my thing was like little so they they sold me that I was going to be doing essentially Drupal sites and that I was going to get to do a lot of modern stuff. This is before front end frameworks, right. And so I was sold on that and I get there and oh, we're using an old version of WordPress, it has to support IE seven, and you don't get to make any decisions. We're using pixelated images for icons, like all sorts of stuff. And I'm just thinking like, well, should we do it this way, this way and this way, and they're just like, No, we were not doing it that way. And so you know, I had to just suffer through that for six months of, of, it wasn't even like bad work or whatever that I was putting out but the just not it wasn't modern work. At the time, we were, we're just going way backwards and it just felt it felt bad. So I didn't I didn't feel like I needed to add that to my stuff. And I just worked hard. I got out of it got a new job and things looked up forever after that. So yeah, I you know, pretty much the same advice as West's in a more long winded fashion. But yeah, just stick it out. Look for a job, interview it up. Let people know that you're looking cool. So that's it for this week's potluck. This week's Yummy, yummy potluck. Next week, we're gonna be back and with maybe an interviewers, I don't know, it's gonna be a mystery here. It's gonna be a lot of fun. And I'm excited about it. Now it's the part of the show where we talk about things that we really enjoy. It could be literally anything we we call these the sick picks their picks that we find to be totally sick. Wes, kind of sick picks you go for us today, - -62 -00:40:52,610 --> 00:41:05,310 -Wes Bos: I am going to sick pick something that's really weird, but I thought I'd let people know. But it's the Amazon basic sells kitchen faucets. Hmm. Isn't that weird? - -63 -00:41:05,900 --> 00:41:10,860 -Scott Tolinski: Weird pick this Yes. And maybe some of the weirdest, weirdest that we've done. - -64 -00:41:11,100 --> 00:42:20,690 -Wes Bos: Because we needed a new kitchen faucet. And I went online to find like ones and there's lots of like, kind of plasticky ones out there that that are great quality. And then there's like the high end molan ones for sure, like four or $500. And I was on Amazon, just kind of looking at what my options were. And I realized that Amazon basics which Amazon looks like on Amazon's a brand. And what they do is that they free brand, sort of high quality stuff, kind of like how Kirkland does with their their batteries and things like that. So I don't I haven't figured out who Amazon basics is rebranding yet. But it is like decent quality. And it's it's cheaper than IKEA, which was surprised me. So it's if you're in the market for a new faucet, we got one from Amazon basics. And I was surprised like we just it's just for the cottage. So we just needed something cheap to throw in there. So we weren't looking for super high end. But I was pleasantly surprised at at that as well as the actual install instruction. So check it out. We got the pro style springs sprayer. If you're interested in that, - -65 -00:42:21,170 --> 00:44:30,750 -Scott Tolinski: springs by her. Yeah, that's pretty cool. That's also sick. My sick pick is also going to come from Amazon. But obviously you can purchase this other places. Now if you've been following me on Instagram or any of these things, you may have seen little pictures here and there if my office because I'm My office is undergoing a great change right now, I don't know how to explain it other than my office feels very cramped, because of my desk is in the middle of the room so that I can have my camera shoot me behind the desk, there's a lot of weird things like when you see my my desk on camera, it's, it looks like it's just my desk against the back wall. Now my desk is like in the middle of the room, and I have to have it all configured a very specific way. Well, I was just looking at it the other day, and I was thinking you know what, I'm just gonna start getting stuff out of here, getting new furniture, getting, you know, just making my office feel better, right. And one of those things was that I was using this old monitor stand from, you know, way, way, way back. And it was a two armed monitor stand for my two monitors. And I just taken one of the monitors off so I had this like arm from the monitor stand sticking out. And it was like catching people's sweaters when they walk by and stuff. It was giant pain in the butt. So I went to look for an upgraded monitor stand and found this heavy duty arm with it's like a pneumatic spring height adjustment. And it can be positioned anywhere gets super tall, good super far out and moves very easily, which is great for me because I need to move my ultra wide out of the shot when I'm doing video recordings. But also I'd like to just move it and get it into a position that's good for me when recording that might actually be different from what I'm doing. So this thing is totally take it was only 74 bucks, which is actually great price compared to a lot of these. And it's been rock solid. For me, I've been absolutely loving this thing. And it's a huge upgrade for me at a cost of 75 bucks definitely worth it in my mind. So I highly recommend it's mean by vivo. I don't know if vivo is a company or if this is just you know, one of those other you know, like distributed by Amazon type things, but yeah, loving this thing. - -66 -00:44:30,960 --> 00:44:54,810 -Wes Bos: Beautiful. What about shameless plugs today I will plug all of my courses, as I always do. Wes Bos comm forward slash courses. I am working hard on my beginner JavaScript course which should be out probably a month from when you're doing this maybe a little longer. We'll see how that comes. But it's coming along nicely. And I'll be sure to announce that on the show as well. about you, Scott. - -67 -00:44:55,050 --> 00:46:11,010 -Scott Tolinski: Cool. My shameless plug is going to be my my, I guess my course that was it had come out was a Gatsby e commerce which basically gave you a just like a foundation of working with e commerce and a static site generator aka what kind of stuff can you do? What can't you do and what's difficult at the very end of that we get into really working with Shopify. Now this course that I'm going to be releasing this month, as in August 2019, will be coming on the 31st. So not quite out by the time you're listening to this, but it's going to be a continuation of that course, we rebuild a dynamic Gatsby site using Shopify and Gatsby. So we're going to be building our own shopping cart, we're going to be adding Apollo to the mix. And we're going to be talking a little bit about how to use Apollo to do more dynamic stuff in Gatsby, we're going to be writing our own shopping cart handling a little bit more interesting things going a little bit more in depth, and really just rounding out all of the stuff that we couldn't cover in the last series. So check it out. I don't have a title exactly determined yet for but it's most likely going to be Gatsby in Shopify, dynamic Gatsby, something like that. But yeah, that's what's coming to level up tutorials that this month, so keep your eyes open. - -68 -00:46:11,280 --> 00:46:16,710 -Wes Bos: Awesome. That's it for today. Thanks so much for tuning in. And we will catch you in the next one. - -69 -00:46:17,370 --> 00:46:31,140 -Scott Tolinski: Right whose face head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax173.srt b/transcripts/Syntax173.srt deleted file mode 100644 index f3d02637f..000000000 --- a/transcripts/Syntax173.srt +++ /dev/null @@ -1,160 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. Totally at ski. - -2 -00:00:25,980 --> 00:01:00,960 -Scott Tolinski: Oh, welcome to syntax in this Monday tasty treat. We're gonna be talking about spelt three. Now this is going to be a fun one because Wes and I have not really dove that much into spelled I've maybe spent an hour looking at the docks in the past. I don't know about what's his experience with this, but we're going to be talking about our initial impressions, we're going to try to look and answer some some of these questions that we have here about it, we're going to approach it as sort of novices or people who are ignorant about this new framework and technology. My name is Scott Lynskey. I'm a developer from Denver, Colorado. And with me, as always, is Wes Bos. - -3 -00:01:01,049 --> 00:01:02,520 -Unknown: Everybody. Hey, Wes. - -4 -00:01:02,900 --> 00:02:19,410 -Scott Tolinski: This episode is sponsored by one of our longtime sponsors over here, it's intact, and one of our absolute favorite services on the entire web, and that is Netlify. Now, Netlify is such an amazing place to host your front end sites. But it does more than just host your front end code. It also, I mean, besides giving you an endless amount of features of global CDN, like absolutely painless, continuous deployment, one click HTTPS, basically all the stuff No one likes to do, but it gives it to you for free without you having to do anything. So that's one of the reasons why we like Netlify. But in addition to that, you can also have really easy serverless functions, you can use their off identity program. So you can authenticate users directly via nella phi, all without needing your own server or needing to manage any of that stuff. So head on over to netlify.com forward slash syntax to get more info Sign up today. And seriously, you'll just, I mean, even just look through the amount of times that syntax users have tweeted at Netlify saying I had no idea it was this amazing. So that's generally how I feel about Netlify. Over here. Big, big fan. So thank you so much for Netlify for sponsoring. Alright, smelt. What is felt? Do you want to do you want to take a stab - -5 -00:02:19,799 --> 00:02:21,960 -Wes Bos: at cybernetically enhanced web? - -6 -00:02:21,960 --> 00:02:23,630 -Unknown: He read the tagline? - -7 -00:02:24,810 --> 00:03:23,130 -Wes Bos: I think, and I'm like super new to this, and I haven't built anything. And so I think that's why it's gonna kind of make an interesting thing that you haven't either haven't either. Yeah, yeah, I it's it's sort of an alternative to using something like react or Angular or view. And what I'm finding is that it has an awesome very sort of bare bones syntax, it sort of just works, how you you go for it. And then second, the sort of the thing that people are loving is the fact that it compiles down to vanilla j. s, which I don't know, I don't know what I think about that just yet. But it's kind of cool that you can look at the examples and see what it kicks out at the end of the day. And it just kicks out like dot enter HTML and text content, and it just creates elements for you. So yeah, it's kind of cool. I don't I don't know what the benefit of that is just yet. Maybe smaller, faster. And we'll take a look at that. What that is through here. - -8 -00:03:23,160 --> 00:06:23,490 -Scott Tolinski: Yeah. Yeah, I think that's really the main selling point is that if you don't have to ship the platform, then you don't have you don't have to include it right, your users aren't getting the platform every single time. They're only seeing it really in the development of compiles away. Right. And that, to me is like really interesting. And I think it's probably the direction you'll see react, going, at some point, right? To compile it away, right? It's just, it seems like it's the next step to here we have this thing, that it would be removed entirely. Now they are noticing there's a lot of like, there is no virtual Dom on this thing. And it's faster because of it, right? I don't know how I feel about any of that. Because to be honest, I don't really know enough about performance of these these types of frameworks to say like, Oh, yes, that's definitively correct. Or somebody I'm sure is correct. But I think that's an interesting thing. It's not using the virtual DOM. It's not using that concept that we've been sort of really embedding into ever since react came about. So that to me is a it's a big leap, right. And the fact that it compiles away is very fascinating to me, I really think this is kind of the future of things. Let's talk about this syntax. I have pulled up. I'll have these in the show notes. spelt dot dev forward slash examples, is a really cool page here. This is I love this. I wish react had this where it's basically navigation, you click on any of these and then it gives you a direct, like almost like a code sandbox Style Editor and then output directly to the left of it. It's really sad. I'm loving this because these are all basic things. It's like oh, You want to see how to declare props? Well, here's not that these aren't Doc's This is a direct felt document here. So let's actually get into the syntax a little bit, the syntax of spelt is minimalist, really. And I personally feel like it's for the best, they talk about it a lot being just HTML. So in yourself file, you would have a script tag and anything in the script tag is your JavaScript, right? You would also have a style tag anything within your style tag is instantly becoming scoped CSS. At least that's my understanding. If we say something that's not entirely accurate, please let us know. Because we're just looking at this for the first time. And then below that is just your straight up HTML. Now, one of the things I really liked about this is, there was no need for like dumb stuff, like you're not needing like a fragment. Right? You don't have to worry about the language of JavaScript, you're just writing HTML. Yeah, like, Here's to two components side by side with no wrapper, you know what, like, sometimes I wish react would make. I don't I don't even know how they would do this. Because react is just JavaScript. But sometimes I feel like react makes me think too much about JavaScript or something like this is like, oh, here's this templating syntax. It's not just JavaScript tm, it's, you know, it's its own templating syntax, and therefore, they can do things that you know, JSX and react can't do. Mm hmm. - -9 -00:06:24,000 --> 00:07:25,320 -Wes Bos: What kind of cool thing I'm seeing here is the ability to do mutations. So if you've got a variable called count, and it's set to zero, and then when you click on something, you just make the say count plus equals one, or or count equals two, or you just you just overwrite that value. That seems to be a Okay, in svelte world. Whereas that's like, a huge No, no, in the world of react. And we have to write all these, like, functions of set state and callbacks and whatnot. And I always thought that was kind of silly, because like, just let me update a variable and let that variable on the page change, right? Yeah. And it seems like that's totally fine in salt world. And then it also, if other values are dependent on that variable, then you can put like, $1 sign in front of it. Hmm. Which is not JavaScript, it's like dollar sign colon, doubled equals count times two. And that the dollar sign means it will rerun whenever the values change. Interesting. - -10 -00:07:25,500 --> 00:08:37,860 -Scott Tolinski: Yeah, there's a lot of templates and taxi things here that I personally, really, you know, cut my teeth on when I was really getting into JavaScript frameworks. Three there, I guess, not really Angular, but more like mustache js, right? So for like me, this looks very comfortable to see an IF tag in your HTML inside of brackets, that looks very comfortable. To me, a lot of this looks minimal in the way that I like it to be minimal. And the reactivity on variables, just like sort of out of the box. I like that. I like that mutation. I don't need to write this does this date. I don't know this syntax, to me is interesting enough that I want to try it in a project and see how it goes. When you're using things like global state when you're using lots of components and nesting and all sorts of stuff. I I don't know what the patterns are for this. But just looking at these examples, I'm just endlessly impressed with the amount of ease in which things are pulled out. Like, I know, look at there's one that's like, there's some form example ones in the bindings category, like just think about react forms and like, oh, React forms versus spelt forms here. Yeah, not even a competition - -11 -00:08:37,980 --> 00:08:42,049 -Wes Bos: doesn't seem like like react is kind of the odd one out now. It does. Yeah, - -12 -00:08:42,059 --> 00:08:43,740 -Scott Tolinski: this is very lightly like, - -13 -00:08:43,909 --> 00:09:19,980 -Wes Bos: Yeah, we got view and angular are so easy. And it just works. And it's simple. And you have some sort of some of this magic syntax inside of your thing to make it work. And then react, everything is, I don't know, like, like, I'm fine with it. But it definitely seems much harder for a beginner coming to it. Having to know about all these gotchas and the syntax and when you're in JSX, and when you're in JavaScript, and then there is no logic inside of the templating language. So you don't have each or if or anything like that. So this is pretty nifty. I like this a lot. - -14 -00:09:20,270 --> 00:10:10,790 -Scott Tolinski: nifty indeed, man. Um, I feel I'm feeling the syntax. And I think this is the sort of spark This episode is I saw something about spell three. And I had seen it before and sort of, you know, read about it and saw the syntax before it was cool. But like, I was probably too busy at the time to like, really sit down and check it out. So it was like, last night, I sat down and I was like, oh, man, this is my kind of thing, and kind of like this a lot. So I have another note in here and it says, What's up with the build tool? I'm also interested in this too. So you have spelt and it compiles away to plain JavaScript. Now, how does it do that? Exactly? I'm looking here. I don't have an answer for this. Exactly. So Is it its own compiler? Or is its own build tool? Or is it like part? is he using Webpack? Let's see, or is it using roll up? Maybe - -15 -00:10:11,010 --> 00:10:22,860 -Wes Bos: it looks like that is something called the svelte compiler. And I don't know how you use it, I would assume that you use it with your regular tools. - -16 -00:10:22,890 --> 00:10:39,900 -Scott Tolinski: I don't know. No, no. Maybe it has its own. I'm seeing not a whole lot of things about any other tools. You know, I'm not seeing anything about other tools. So I'm not sure I really don't know the answer this one if somebody has. Yeah, - -17 -00:10:40,160 --> 00:11:10,260 -Wes Bos: I'm just just looking at the thing here says there's NPM, run, build and NPM run Dev. So probably it comes with its own build tool. And how you access that? Or if you if you need to access that I'm not sure. I'm sure there's some some way to same with like next yas as well, right. Like you don't have your own build tool with next as you just run next build? Sure. And then if you do need to access the web pack, and the Babel config, then you can, I would imagine that it's similar in scope. - -18 -00:11:10,470 --> 00:12:30,660 -Scott Tolinski: Yeah. And I found a project, spelt loader, and I'm not exactly sure which versions is supports. So this is interesting in it. I mean, it's a web pack loader, so I don't know. Yeah, I'm interested in hearing more about that. If you know the definitive answer to this. Please shout us out. We will retweet you on the Twitter. All right. Next question I had was about sort of like tooling around it. So I found some stuff. So one of the things I found was sapper at sapper dot spelt dev in sapper is called the next small thing in web development. It's powered by spelt basically a platform for building apps with felt what you can think of it as at least the way I've been seeing this branded is sort of the sort of the the next .js of the spelt world as an it takes care of a lot of stuff for you. It takes care of the routing sort of things that takes care of SSR, I believe, PwC sort of stuff. So it looks like to me that this is the de facto definitive, sort of, I don't know if it does do PwC stuff. But it looks like this is the platform for building spelt apps on it right now. Because it's, it's hosted and maintained by spelt themselves. It has their whole branding. It looks nice, it looks easy. And maybe it'd be something to try out on our sponsor Netlify here. What do you think about this sapper thing? Wes, - -19 -00:12:31,050 --> 00:13:37,500 -Wes Bos: I think it's pretty cool. I was just I was just skipping ahead to this felt native really quickly, because I was so enthralled on what that was. But the sapper looks pretty nifty. I think that anytime that you have one of these frameworks, you're it's almost a given now that you need like the the next equivalent and or the the Gatsby equivalent where you can go ahead and build either a static site, or you can do an easy SSR JavaScript web app. So that's sort of a no brainer. I think that you can see that next one that we have here is felt native, which it says felt native is a new approach to building mobile applications using native script. Where other JS native frameworks like React Native and native script view, do the bulk of their work on the mobile device felt native shifts to work to the compile step that happens when you build your app. Instead of using techniques like virtual Dom diffing, svelte writes codes that surgically updates the native view widgets, when your state app changes. So I don't know that sounds cool. Yeah, - -20 -00:13:37,530 --> 00:13:46,140 -Scott Tolinski: yeah. That seems to be the the mo overall, is to let the compiler do the work, rather than runtime or whatever. So yeah, I don't know. It's very interesting. - -21 -00:13:46,470 --> 00:14:07,680 -Wes Bos: Yeah. Well, we'll have to see, like, I guess if you're writing your entire app in spelt, just like you, you want a static site generator, you probably also want a native. I've never done anything in native script. I've done very little in React Native myself. So it's sort of hard to talk about this. I want to start running my mouth, but some I don't really know. Yeah, I - -22 -00:14:07,680 --> 00:15:59,040 -Scott Tolinski: mean, I've used React Native pretty extensively. I haven't used native script and more than just, you know, a little little check out here and there. So either, right, like this felt native seems pretty cool. It's one of the things that I do when like a language or technology like this is getting push is to see like, how many platforms are sort of there around it, who's using it, how many people are using it? And just to even check for like some sort of native solution or seemed like that there's some things coming out. It's a good sign that the community is healthy, right? That there's people working on this stuff. And there's a lot of things there. The salt themselves seems to have a lot of great stuff, you know, in their own repos, such as the sapper and it seems like there's a lot of people interested in working on salt for seemingly good reason. It looks really cool, man, I'm gonna have to dive in. I'm gonna have to build something with this. So that's it. I hit some questions initially when I was writing these, these show notes, and one of the questions is what's the TypeScript story? We know that TypeScript is really important in the web right now everybody's using it. Everybody's loving it. If you're not, you know, then I guess you're just like me and not using a, currently, not yet, but like, a lot of people are gonna require TypeScript. Right. So I went looking and I found an issue for TypeScript support. And it's from 2018. It did say in their docs, I found something that said that they were trying to get TypeScript to launch with TypeScript or felt three, I could be making it up, because I can't find it now. But it looks like they are close on getting TypeScript working here. But TypeScript is not officially currently supported. I have not dove into it any more than reading this issue on GitHub. I'd be interested, I think that's one of the essential pieces that they're going to need to have to get the kind of market share that they need. Right. So I guess, that's the big old question mark there. But it looks like one that's probably coming down the line. - -23 -00:15:59,250 --> 00:16:32,580 -Wes Bos: Yeah, there was a comment just three weeks ago that they're, they're sort of still waiting and still working on it. It seems like there are a couple like third party ways to do it. But I always shy away from using these sort of hacks. Yeah, because before you know it, the official version comes out. And then all of yours is using this like weird or older version from some random person online made it when it's something that big, I would probably just hold off and wait for wait for it to work with the wait for it to be officially supported. Totally. - -24 -00:16:32,609 --> 00:17:42,050 -Scott Tolinski: You don't want to do the same thing twice, just in different ways. If you can help it just because you're impatient. That's like a that's like a classic me me thing to do. It's like all but I can't read. For instance, I just bought a phone and I'm returning it today because I couldn't wait, couldn't wait for the pixel four, I had to have a phone right now. And I bought the one plus seven pro and I liked it a lot. But to be honest, you know, just the software, the hardware, it just wasn't for me. It was a great phone. But like, really, it is too techie. Well, when the pictures are awful into like, the skin, and everything is too techie, people expect you to want to route the phone and stuff and I'm just thinking, you know, I'm, I am not a spring chicken anymore. And I want my phone to just work super easily. I don't want it to I don't wanna have to tweak it and whatever, want the iPhone experience and Android, which is basically a pixel device. And so like, I just wasn't getting that in the phone and it was just like, Alright, you know, this clearly isn't for me, it's a wonderful phone. And I've got nothing bad to say about it. But you know, just not for me. Oh, yeah. So, sorry to get off topic there. Next question I had would be how hard Do you think it would be to convert a largish react app to spelt? I'm thinking it would be pretty tough. - -25 -00:17:42,480 --> 00:17:44,010 -Wes Bos: Yeah, I think so too. - -26 -00:17:44,279 --> 00:18:12,630 -Scott Tolinski: The syntax is very different. You have to worry about like state, how they manage state, how they manage the props, you got to worry about all of those things I did find there is an Apollo spelt that looks super nice and does not look too crazy different. But it's still different enough where you're having to touch every single component in your application. And if you have a big application, I just don't know how that's gonna go. Seems like why that would be a hard transition, you'd have to do some hashtag microframework stuff to get that to work. - -27 -00:18:15,590 --> 00:19:07,890 -Wes Bos: The next question we have here is will svelte be able to capture the market share needs to grow and compete. But judging by the amount of potluck questions we've got about it, and the amount of emails and tweets and things of what do you think of this? I think so it definitely seems to have the hype. I'm just looking at this view YouTube video, from the creator of svelte called rethinking reactivity. Yeah, I have 1000 views. So there's obviously similar to how view has struck a chord with people who are not totally happy with how things work in other frameworks. I think that this is also striking a chord with people, be it for performance, or just for the simplicity of the markup and how it's actually written. So I'm gonna be watching this tonight. Maybe I'll get my wife. Watch it with me grab some popcorn. - -28 -00:19:08,730 --> 00:20:23,730 -Scott Tolinski: I'll watch it. It's good. It's a good, it's good watch, I highly recommend what we should put in the show notes a link in the show notes. Yeah, I think this is the tough question, right? Because you still have some questions, right? You know, that there's gonna be people who write it off immediately, because the TypeScript supports not there just yet. You're also going to get people who look at and say, hey, there's too much magic going on. But I don't really think there's, I mean, there's some magic going on. But I don't know, it feels like a step forward, while simultaneously being not a step backward, necessarily, but like a look backward. Usually, you're glancing backward to all of the stuff that we've learned up until now. And this looks like something that is more radical than view because view is definitely has its like, take place. It's stuff that is taken from react and other frameworks, right? And you look at view and say, Okay, this is more simple than react, and it's a little bit magical, but it makes my life easier. And then you look at spelt and spelt to me feels more futuristic than view and that sort of way, it sort of went a whole nother step. So I'm really interested, I'm going to be watching just the sort of community in general to see how it grows and changes. And I would love to build something with it. Which actually leads us into our next question is, would you Wes or Scott, use this would you use felt was - -29 -00:20:23,760 --> 00:20:37,260 -Wes Bos: yes. I think this looks awesome. The fact that it compiles down to J s seems pretty neat. I'm not sure why that seems neat to me, but just being able to see that it is vanilla j. s, under the hood compiled down to is pretty cool. - -30 -00:20:37,580 --> 00:20:38,160 -Unknown: Yeah, - -31 -00:20:38,160 --> 00:20:38,910 -Wes Bos: yeah. - -32 -00:20:38,910 --> 00:20:40,260 -Scott Tolinski: Just the platform. - -33 -00:20:40,610 --> 00:21:11,130 -Wes Bos: It just like the like the the reactive variables, how they just work like that are as pretty nifty. I'd like to, I'd like to actually see how that works in a compile down to vanilla j. s, like, how would you do reactive variables in just vanilla j s. So definitely going to try to obviously, you're not going to just switch over to it just yet. I need huge market share, especially for like someone who makes it tutorial series for a living, I need to be able to do that. But I'm putting that on the list of things to check out because it's pretty nifty. Yeah, - -34 -00:21:11,130 --> 00:22:07,680 -Scott Tolinski: I'm gonna dive in like hard this month, I think after after really taking a look at it, I think I'm going to go in real hard on it. And then I still going to do a tutorial course on it, and really, really get deep in there and really understand this thing. I'm excited. I think it's going to be really cool. And to me, this screams like something that I would like to use. I like simplicity. I like a little bit of magic where I can tell where, you know, I can still tell what's happening and how to control it and do everything but at the same time. Do I really like to write you know, fragments all over the place for no reason other than the fact that you know, it's an array and JSX doesn't like it, you know? It's like, it's like there's these little things in react that uh, hold me up from really truly loving it. So yeah, I'm gonna I'm gonna be happy to use this. I'm gonna test it out. I'm gonna try it out. I'm gonna maybe put together a course on it. Who knows? We'll see and we'll see what we can build with it but I'm excited spelt three looks super cool to me. This looks like kind of the future in a lot of ways. - -35 -00:22:08,040 --> 00:22:22,980 -Wes Bos: Awesome. Well, hopefully that was enjoyable if you're using spelt let us know at syntax FM let us know we think about it. Yeah, do you like it wherever you don't? I'd like to hear from you. I want to hear all right. Anything else to add there? Scott? - -36 -00:22:23,279 --> 00:22:28,350 -Scott Tolinski: I don't think so. Yeah, check it out. Just head to their dogs had did their examples. If you you know, maybe scares you a little bit. Just - -37 -00:22:28,350 --> 00:22:28,860 -Unknown: check it out, I - -38 -00:22:28,860 --> 00:22:30,060 -Scott Tolinski: think could be really cool. - -39 -00:22:30,090 --> 00:22:37,650 -Wes Bos: Yeah. Thanks for tuning in. And we'll catch you on Wednesday, who's is head on over - -40 -00:22:37,650 --> 00:22:47,040 -Scott Tolinski: to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax174.srt b/transcripts/Syntax174.srt deleted file mode 100644 index feaf37e9e..000000000 --- a/transcripts/Syntax174.srt +++ /dev/null @@ -1,236 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:09,600 -Unknown: the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West - -3 -00:00:09,600 --> 00:00:10,860 -boss. Oh, welcome - -4 -00:00:10,860 --> 00:01:00,360 -Wes Bos: to syntax. This is the podcast with the tastiest web development treats. Today we're going to learn how to build an API. If I've actually built a handful of API's in the past and seems like almost every project that I work on has some sort of API endpoint that need to ping in order to upload data or to modify data or pull data back. So we're going to sort of step you through the ins and outs of creating an API, some of the questions you should ask. And I think like, just for beginners, a hard thing for people to understand is just the sort of mindspace of like, what's going on behind the scenes, especially if you're not a back end developer, you just for front end, you might not necessarily understand like what's happening. So even if you don't want to create your own API, this will be a helpful sort of primer on what's happening behind the scenes when you send off a request to that API, - -5 -00:01:00,569 --> 00:01:11,370 -Scott Tolinski: like mindspace would be a good name for a social media website in the future where you just like, think about it, and then you're in that space mindspace. So hi, space. - -6 -00:01:11,370 --> 00:01:41,340 -Wes Bos: I like it. I'm sure that's something already. Today, we are sponsored by century and sanity century does all of your error and exception tracking insanity is a structured content, CMS that we've got some kind of new updates about what they've been cranking out lately or what's to come. So we'll talk about them partway through the episode. My name is Wes Bos, I am a full stack developer from Canada. And with me, as always, is Scott to Lynskey. How you doing today, Scott? Hey, - -7 -00:01:41,370 --> 00:02:15,150 -Scott Tolinski: I'm doing very tired. I'm very tired. The you know, Courtney went back to work. So yeah, this morning was was a little rough, getting everybody ready, and getting everybody where they need to go. But I'm sure you're very well aware of that. So yeah, no, I'm, I'm ready to go. I'm looking at this coffee, like it needs to hurry up and work a little bit better. But other than that, I'm feeling great. Gonna be recording a lot of tutorial content today and stuff. So gotta get juiced up. But yeah, ready to talk about some API's? Let's let's get into it. Alright, so - -8 -00:02:15,150 --> 00:04:30,020 -Wes Bos: first thing we need to do is the question is how do you build an API from scratch? There's lots of generators out there. There's lots of like, kind of helpers out there, which are great, like something like Prisma, or I'm not sure what the other ones are off the top of my head. But generally, the way that those work is you create your content types, and they'll create all the, the crud, we'll use that word a lot in this podcast, crud means create, update, read and delete. Those are the four operations that you're generally doing when you are hitting an API. But we thought we'd sort of peel it back and just talk about like, how do you create an API from scratch, because sometimes you might just need one or two quick endpoints, you might have an existing database you might have, like, a lot of my sort of API work came from building server rendered websites. And then as you need it to add, add functionality or build something in react, you need it to be able to ping that database and ping that API, or to crud your data. So actually, maybe I should just run through sort of the headings that we have here. So you can know to expect so first is you need to choose an API type. And that's rest or graph qL, then you need to set up some sort of server, we'll go into what some possible options are there, you need to document the endpoints, this is probably the biggest part of it, you need to figure out how to name it, you need to figure out how to secure it, you need to figure out how to protect it from malicious and bad actors. You need to then actually write the we're gonna call them resolvers, which is or controllers often people call them that basically the work that needs to be done when when somebody hits that endpoint. And then finally, we'll end it off with some some helpful tools for writing an API endpoint. So first one is you need to choose an API type. There are like I don't know, what are the different types of API, the two big ones are rest, which is probably the most popular where you hit like a URL like donuts.com for slash flavors. And and that will bring you back a list of flavors, right? And you could also create flavors, or you could modify flavors. Or you could delete flavors from that endpoint. That's a REST API where you have all these different endpoints. And each of those endpoints do different things. The other type of popular API now is obviously graph qL, which you want to take a stab at what that is Scott? - -9 -00:04:30,060 --> 00:05:49,770 -Scott Tolinski: Yeah. So instead of having an endpoint for each thing that you're expecting to get back, you have one endpoint. And so you connect once right, you connect via the single graph qL endpoint and instead of hitting a different URL to get a specific thing back, you just tell that endpoint in a graph qL query language, what exactly you want. And that way, the difference is really there is that a REST API is always going to sort of return the same kind If data if you give it the same sort of the endpoint with the same parameters, right, but whereas a graph qL query, even though if you only want a very specific amount of data, you just ask for that specific amount of data, rather than saying, Let's go back to the donuts example, right? You're hitting that doughnuts endpoint with a REST API, you're always going to get back the donuts information. But with the graph qL API, you you hit your endpoint, you say, Hey, give me the donuts. And maybe, maybe I want some flavors. And maybe I want some accessories, or what the, I don't know, they made out of flour, or whatever the the donuts made out of. And you can get all of that information directly from the graph qL endpoint just by asking for it. So yeah, the big difference is it's one endpoint, and you're asking for information rather than many endpoints. And that's like, I guess the big distinction. - -10 -00:05:49,890 --> 00:07:21,660 -Wes Bos: Yeah, absolutely. Other types of endpoints or other type of API. In the past, we've had like XML endpoints. So that's actually why it that's why we have the word Ajax it means a synchronous JavaScript in the XML. And then there, I believe, there's also soap endpoints, which soap endpoints which are so sorry, sorry, soap API's, they would return XML, those are a thing of a past, unless you're working in sort of more mature industries as a nice way to put it, like banking, or, I don't know, like, a lot of the banking is the big one, where you're working with tech that's 1015 years old, and he just doesn't change and you have to work with things like that. So that's sort of where you need to go, I would think in I would think, like, my approach to this type of thing would probably be, if I'm using something that has graph qL, built in like a generator, I would just go for that. I don't think that you need to have a large project. But then then again, if I just have a simple, if I'm just cooking up like a simple little app for myself, I'm just gonna put in one or two endpoints, I don't need relational data. Now, I don't necessarily care about the the fields that I do and do not want. So it's pretty easy to move over from one to another. We'll talk about those resolvers in just a minute. So you could you could pick either one of those. But if you are planning on like a beefier, bigger application, I would probably go graph qL right out of the gate. - -11 -00:07:21,930 --> 00:07:47,270 -Scott Tolinski: I personally Yeah, go graph QL. Just because because I've been working in it so much that I'm so much more comfortable right now just and I've grown accustomed to the the niceties that graph qL provides, being able to ask for that specific data and not having to worry about endpoints and any of that stuff. So I personally would grab graph qL, too, but only because I have that experience, and it's most likely what's going to be the fastest thing for me to work in right now. - -12 -00:07:47,640 --> 00:08:39,629 -Wes Bos: Yeah, one more thing we should say about this idea of rest and graph qL is that these are not things that you NPM, install, graph qL NPM, install rest, these are rest and graph qL are more methodologies as to how do you approach and structure your thing. So it's not a piece of software that you go out and do it's just more of a way that you tackle things. And then you have to then go out and get and this is our next one, you have to go out and get some sort of server that is going to accept the requests. That's a REST API endpoint or graph qL requests, do the work and then send responses. So you can do this in any language out there. Obviously, Scott and I are both JavaScript developers. So I would probably reach for something like express what I personally run all of my own endpoints on. koa is, this seems to be a pretty popular one. I know Scott runs his on Meteor. - -13 -00:08:39,990 --> 00:09:14,820 -Scott Tolinski: But actually, believe it or not, my API is in Express within Meteor, if that makes any sense. Oh, yeah. So before in the past, my API was all straight up Meteor. And what it was was this thing called mini Mongo where you had to publish data via MongoDB. And then you could access it on the front end. But now since I'm doing all my queries through Apollo, yeah, no, I basically I'm just running an express server that's connecting. And what Meteor is doing is allowing me access to some meteors other goodness in there. But the API itself is actually expressed, which is kind of interesting. - -14 -00:09:15,000 --> 00:10:06,630 -Wes Bos: COA seems to be a pretty popular one for specifically creating API's. I've just never myself got into it. Because I've been so comfortable with Express and I've never really had too many issues with it. I've been I've been fairly happy with Co Op or not co with express all my life. But if you want to check that out, I think that's a pretty popular one as well. The thing about Xpress is that often you're going to need to reach for middlewares to do things like authentication or rate limiting or blacklisting. And the beauty of Express is that they're all for almost everything that you need. There's already a middleware, which is sort of like a plugin that someone has already written. That will just immediately add all of that functionality. To each of your requests, and you don't have to do the heavy lifting, heavy lifting for yourself. Totally. - -15 -00:10:06,799 --> 00:10:36,120 -Scott Tolinski: Yeah. Which is that one of the nice, like, I think that's a low key underrated aspect about a lot of things in development, right, people want to jump to this next great thing, right. But now, like, a lot of times, the thing that's around an established has such an amazing community behind it, that's already built the stuff that you need. So when you go needing something, you're not gonna have to really scramble through either incomplete or stuff that's still being built or any of that stuff. I mean, it's a low key aspect of really established frameworks. - -16 -00:10:37,230 --> 00:11:10,919 -Wes Bos: And of course, you can use any other language you want to to create an API, you could use Laravel, if you're in PHP, you can, I don't know what the Ruby on Rails comes with this. It Ruby on Rails sort of like made this popular. Yeah. Where it came with everything built in to create an API. And I think that really rocketed forward these sort of JavaScript based websites, which is pretty cool. So and any server out there that can accept a request, and then return a response at the end of the day can be used to make an API. So next, let's - -17 -00:11:10,919 --> 00:12:46,409 -Scott Tolinski: talk about documenting the endpoints because this is actually a huge thing, right? If you have an API and you expect anyone to use it, let alone yourself or anyone on your team. Or if this is a public API, then this is even more important. You need to document the endpoints, you don't does the best job of this is, in my opinion, I think stripe does the best job of this. They have their their side by side documentation, where they show you what the end point is, they show you exactly what you're going to get back. And then they have on the the left side of it. I believe it's just the I don't have it pulled up right now. Maybe I should. But it tells you exactly what the different parameters, what the different headers needed, what everything is needed to make this query work really well. And it is, yeah, okay. So basically, on the right side, here's what you'll return. Here's the endpoint that you'll hit. Here's the different CRUD operations you can do on those endpoints. And then here are the different attributes or parameters, you can pass into that endpoint to augment what you will do get back. So this is such a huge aspect of any particular API, that you'll want to really pay close attention to how you're doing this. And in my mind, the best option here is to just copy the people who do it well, and don't try to make up something yourself. Because there's so many bad ones. I don't want to call anybody out. But I've used my fair share of awful API documentation. And most of the time, I'm just wasting our stripe. Yeah. I'm not gonna call anybody out. But West is happy. - -18 -00:12:49,919 --> 00:13:30,360 -Wes Bos: Yeah, so it's awful. Just because it doesn't describe like what things do. And I know that they're working hard at that. And they have a lot of balls in the air, and they have different products in different countries. And it's a hard problem. I certainly wouldn't want to solve that problem myself. I just like to complain about it. But so what else do you need when you document it, like Scott says, document what parameters are required and that those parameters can be anything. So if you are requesting donuts, maybe you want to filter by cake, or yeast, if you are want to, if you want to sort them by the the time that the donut was created, then you could you could do that - -19 -00:13:31,020 --> 00:13:33,840 -Scott Tolinski: you got done. Today, you got doughnuts on the - -20 -00:13:35,039 --> 00:15:04,830 -Wes Bos: doughnut API. And that would not actually be a pretty fun little app to do. Maybe I'll tuck that away in my Yeah, tuck that away in my list of things to build. Pretty much the parameters are a Scott also has here like if they're required or not, they need to be documented. Because often you will say like, give me a list of doughnuts. And you can hit that API with no parameters. And it will give you back a list of doughnuts. But if you were to I don't know, what's another good example, if you were to get a list of food, maybe it says like, you can't just request all the food, you need to tell me the type of food first. So you'd have to pass a type puram along with it to do it. Also document what headers are required. So kind of a tricky thing about params and headers is that sometimes you need to send data along to an API via headers, and other times you need to send it along in like the body of the request, or as a get puram. We'll talk about that a little bit more. So just make that super clear. I know I've spent lots of time on API's being frustrated, because they just assume that you know, to send it as a header or whatnot, document what you get back when you hit the endpoint. So just a simple example of what data comes back is so helpful, because often, you aren't looking at the API URLs. You're just basically like I need this piece of data and looking at What you get back, and then you can sort of trace it backwards is super important. - -21 -00:15:05,190 --> 00:16:11,429 -Scott Tolinski: Another cool thing is if you have an API that exists in Well, I mean, whether or not you have any, like a software API that exists in different languages, but if you have, you know, code that you're expecting your users to just be able to figure your thing out. Good practice is to have like examples of hitting your API in different language. Yes. And one of the things I really love is when they have a drop down, or something like that, on the page right there, there's just like a little drop down, maybe it's in the header, maybe it's somewhere on the documentation page, but you can just say, oh, convert these examples to Ruby, and, you know, convert these examples to JavaScript, whatever, and it will just change it all. And that gives your users the people consuming this API, the ability to just copy and paste if that is a thing. That is like if you're expecting people for different languages to be using this. If it's your own team's private API and stuff. This isn't like a hard requirement. But for really good public API, specifically ones, like the ones that we consume every day with Braintree, PayPal, whatever. I think this is a great practice. And something I'm always happy to see inside of API Doc's, - -22 -00:16:11,490 --> 00:17:44,090 -Wes Bos: I love that. What drives me nuts is when they don't provide anything at all, or when they just provide like a curl example. Curl is the command line, sort of equivalent of fetch, where you can just like make requests on the command line. And now that I understand what curl is, it makes sense to me. And I'm able to parse that into whatever language it is I'm working in. But as a beginner, I remember being so frustrated being like, what, why do I need to curl this, like, I'm using JavaScript here, and like, you should know that like, okay, most like 98% of your users are either using PHP, JavaScript, or Ruby. So just give a couple examples of how to use each one in each of the languages. And that goes a long way. Other things you need to put in your documentation is what's called the HTTP verb. So when you make a request, and in any language, you can send that request as any number of different verbs. So you can make a get request or a POST request, those are probably the two most popular that you're used to just when dealing with, with forms, in general. But there's also put requests which are generally used, generally the the thing I'm saying generally a lot here, but yet is used to pull data post is used to create data put is used to update data, and delete is used to, obviously delete data. And then there's there's some other ones, there's like options, which I've never used in my life, I pretty much just stick to GET and POST, even when, even when I'm updating or deleting. - -23 -00:17:44,300 --> 00:17:59,550 -Scott Tolinski: Yeah, is it because getting posts were the you know, the Oh, geez. And then the other ones are new. So for a long time, a lot of API's didn't have the ability to do anything other than a gator post. So you just had to do get post, and then act accordingly. - -24 -00:17:59,810 --> 00:18:35,550 -Wes Bos: Yeah, the other thing about rest API's is that there there is sort of a couple like standards out there of people who have said like, this is how you create a RESTful API. But I, in my experience, nobody really follows that they sort of just kind of cowboy however they want. And the thing with graph qL is that it is a living standard, it is a spec, and you must conform to that spec. So things are a lot, a lot less sort of wild west and trying to figure out how things were rigid with graph qL, which is great. Yeah, it's much more rigid and graph qL world which can be frustrating. But seriously, it will help you in the long run. - -25 -00:18:35,600 --> 00:18:53,160 -Scott Tolinski: Yeah, definitely. And if you want to have a standardized API, and a really nice way of building one, here comes one of our sponsors, and that is sanity@sanity.io. It's a back end for your site's front end. And it is really super cool. - -26 -00:18:53,430 --> 00:20:52,710 -Wes Bos: So speaking of API's, if you do want just to be given an API based on sort of the data types that you have, you can use Sanity. Sanity is a structured content CMS, where you go into the back end, you go into the the Sanity dashboard, and or they call it the Sanity Studio. And you can create your content types, you can create that kind of food for the type of doughnuts, you can create people that have cooked those donuts, you can relate those things together. And then that at the end of the day will just kick out an API will that allow you to do all of the CRUD operations. So they will give you an API. I'm just reading through an email from them here. They've got all kinds of new stuff, which seems pretty cool. They've got a History API, meaning that if you update data, or you unpublish something, or you change some data, you're able to go back in time and see what changed and when that change, which is pretty nifty. You can both see that in the the Sanity Studio, but you can also get that data via the API. So like even if you're doing like, like a Twitter clone, you know how like Twitter doesn't allow you to update tweets. You could with this use the ability to update a tweet. And then you could show the previous iterations of that tweet with this new API, which I think is pretty cool. Super cool. Yeah. What else the they've got real time content preview coming for grid some. So they were sort of the first one on the scene here with real time updates in Gatsby. And now they're, they're moving that over to grid view. Yeah, all kinds of nifty stuff coming up, I highly recommend you check it out. sanity.io forward slash syntax, that's going to double your free usage tier. And also go to sanity.io, forward slash create. And that's going to show you just a bunch of examples with Gatsby and next and nuxt and bunch of other stuff there. Check it out. sanity.io forward slash create. Thanks so much, Cindy, for sponsoring. - -27 -00:20:52,850 --> 00:20:53,430 -Scott Tolinski: Nice, - -28 -00:20:53,430 --> 00:20:54,390 -Unknown: cool, yeah, I - -29 -00:20:54,390 --> 00:22:17,160 -Scott Tolinski: think this is, I don't know, I don't want to say this is a golden era of anything. But like, this is just such an amazing time to be building API's in general, we have so many great options. And if you want to get into it and write your own rest and graph qL API, you can and if you want to use a service like Sanity to make your life that much easier, you you can do it and it's gonna be awesome. So I mean, what a What a cool time to be building fun stuff like this. So next part, we're going to talk about naming things do you think is one of the hardest parts about software development, as we all know, can be tough for developers to name things. But I always like when API's are named, obviously, I don't know how you view naming endpoints and things like that. But personally, for me, since I'm primarily working in graph qL, I have a fair amount of resolvers that rather than just having like a tutorials, or tutorial, I have a whole bunch of different resolvers to make that a little bit more micro to what I need. But going along with that, I do like to make it entirely obvious, aka if I need to hit tutorials, I name it tutorials. Now, obviously, this is different from a REST endpoint. But the concept remains the same. It's pretty much here's the object, here's the object pluralized. And then if I have some more specialty ones, it's narrowed down by how specialized those are. What are your thoughts on naming things like this? - -30 -00:22:17,490 --> 00:23:57,360 -Wes Bos: Yeah, I generally like to use like a noun. So let's use doughnuts, again, Ford slash doughnuts. So you use the pluralization of the noun, never use like, never use like a Ford slash create donut, because the verb is done in the HTTP verb. So you could have an endpoint, that's Ford slash doughnuts. And if you get that endpoint, it will give you a list of of doughnuts. But if you post to that input, or that endpoint, then it will create a donut. So the same URL depending on what verb you have, can do different things. Then also the the beauty of that is that you could do forward slash donuts, forward slash the donut ID. So if you have like donut seven, and then you can hit that endpoint, and you can either get the data about that specific donut or update that specific donut or delete that donut. So that's kind of what I stick to pretty simple. In how it works. There is this great website called RESTful API. And they have a whole page just on like best practices for naming your endpoints. Because it's easy at first. But when you get into it, when things get complicated, your endpoint URLs can get really gnarly. And also you can, you can like start creating multiple endpoints because you're like, I have donuts endpoint. But now I have doughnuts and pies. Yeah. And now I have like doughnuts and pies with authors endpoint. And that's the whole reason why graph qL was created. Because before you know it, your your needs change. And then you've got all of these crazy endpoints just running amok. And graph qL sort of takes away from that. - -31 -00:23:57,420 --> 00:26:59,820 -Scott Tolinski: Yeah. And that's it. That is a very, I don't know, it's a very common thing. And API's in general, for naming, it will get tough. And I personally, have spent a lot of time trying to optimize and change these and whatever. But it's always good to have a idea of what the API is going to look like ahead of time so that you can really put some forethought into planning these out. Because if this is a public facing API, and the API version is like, version that people are using, it's gonna be really hard to change those in the future, because you don't want to break people stuff. And I mean, obviously, you conversion the API, but Oh, yeah, yeah. So that's a whole nother idea is that versioning of an API, which I can talk about right after this, but it's over time, this API will most likely change and evolve. But if you are constantly changing the endpoint names, you're going to kind of make people angry because they're gonna have to update their code. It's almost like changing the version of a library. Now, they could always stay on the older API, but chances are, it's As the API grows and changes, they're going to want to take and get access to the new things in the API. So that's the whole thing, too, about versioning and API jermy. To get into that now already, why did you have Martin? Yeah, yeah. So a lot of times companies have different versions of an API, because the initial version of the API that you wrote is most likely not going to be the same one forever and ever. And many of these API's, they give you the ability to use an older version of the API. That way, when you hit the API, it's not just going to magically change on you. So by versioning, it, it's sort of locking in that functionality to a given point in time. One of the companies that does this really well obviously, is stripe within their API documentation, even based on what your account is set at you, you set the API version for your account. And then all of the documentation that it shows you is for that version of the API, therefore, you're never looking at older, outdated Doc's and you don't have to worry about it yourself. Sometimes you had to an API, and you might be using version two. And you might not realize that and you're looking at the doctor version three wondering why this thing isn't working. So firstly, an API is an extremely important thing to make sure that you are accessing the correct version of whatever you're trying to hit. But it also gives library authors the ability to change update the API. But as we mentioned, you're not going to want to go ahead and changing things like crazy. Otherwise, you'll make people upset stripe also does a really good job of showing what's deprecated inside of the API. So like if you're on version, I'm just making this up. But let's say you're on version, like five or something, if there is a version five, and one of the API methods is going to be going away in the next release, you can mark it as like deprecated, do not use and show like what you should be using instead, within that version of the API. That way, when they get the next version, they're not going to be stuck with a bunch of code, they have to change because they already know they shouldn't be using this thing. - -32 -00:27:00,180 --> 00:28:36,660 -Wes Bos: Another thing I love about stripe is that the version of the API can be tied to the API key. It can be tied to the URL, and then it can also be overwritten per request via header. And that's great if you need to slowly upgrade your entire API. Because there's nothing scarier than moving your entire income at once cutting fresh over. So what you can do is you can stay on version two of the API and you can set a header on each request saying this is version three of the API. And then you can update those slowly as you go. And as you have time to do that word. Next up, we have securing your API. So it's likely that parts or all of your API needs to be only accessible to certain people with the right credentials or the right authentication. So there's a couple of different ways that you can secure an API. First is this probably the simplest is only accept requests from logged in users. So that could be a cookie session, that could be a JW. T. You could also use OAuth, which is a little bit more complicated, although a lot of popular big popular API's use that. Other ways you can give people API keys. So you can just generate a random ID and give those out to people. And then you can track the number of requests that go against that API key and different API keys can have different authentication. You can use cores, which we have an entire episode on what cores is cross origin resource sharing meaning, should this API be accessible in the browser? Or is this more of just only a server side thing? - -33 -00:28:36,900 --> 00:29:44,430 -Scott Tolinski: Yeah. And there's also, one of the things you're going to keep in mind is the access level of your users. I mean, this is a huge one, if you're have any sort of content that is not only, you know, sensitive, right? Like, you don't want to be able to hit an API and get access to every single users all of their information, right? But maybe some administrators need access to those kind of things. So you can check the access level on the server to say, Hey, does this user have the credentials needed? If they have the credentials needed? Here? they can, they can access this information. Otherwise, you can throw an error that says authorization error or something like that. That's typically what I do. You're going to want to be doing this for not only your GET request to get the data, but all of your modification requests. For instance, what like, think about a tweet, like you said, We let's say we wanted to edit a tweet, which you can't do. But let's say you wanted to edit a tweet. You don't want to be able to edit anyone's tweet, you want to be able to edit only the tweet that you wrote yourself. So you would check to make sure that the ID of the tweeter is the same as the ID of the tweet before you allow them to edit it. - -34 -00:29:44,610 --> 00:30:22,260 -Wes Bos: Yeah, in my courses, actually, we create a lot of little helper functions for that where like you say, like, has the ability to edit this thing. And you can you can either check if they own it, or if they are an administrator. We have I think we have it Entire podcast talking about like roles and authentication roles and levels. Because that's that's a whole different way to how to approach it like you can do different levels. But then you can also do different things like can edit can delete, it gets pretty complicated. But there's I like that episode, I thought it was pretty nifty. I changed how I did my own roles in my own applications, after I had asked on Twitter about that is pretty good. - -35 -00:30:22,710 --> 00:30:27,480 -Scott Tolinski: Yeah, there's a lot there. That's a whole whole thing in itself is designing that aspect. - -36 -00:30:27,720 --> 00:30:34,440 -Wes Bos: One other thing that could happen with an API is that you have errors in your API, and I don't know how would you track those Scott? - -37 -00:30:35,280 --> 00:33:54,860 -Scott Tolinski: Ooh, I don't know. You know, me personally, I might track them with a piece of paper and a pencil. When they come in No, I I'm gonna check them with century myself, because I'm a big fan of one of our sponsors today, which is century@century.io. No century is constantly saving my butt, because it's allowing me to see the errors that are coming into my application allows me to see how many users are hitting those. And it allows me to do things like assigning them to an individual, it also gives me a chance to really understand some things whether they are bugs inside of a library or or even a browser, right, for instance, I've been getting, I'm just getting this one error in my, my front end. And it's telling me that it's losing the connection to the WebSocket. The error is really interesting. And for I was really confused about why this error was popping up. I wasn't seeing it myself, until I went to the events section, the Events tab. The Events tab shows you every single time this happened. And it's in a giant table that shows you when they happened, the browser version, the browser name and the operating system version, the operating system name. And this was a bug that I couldn't for the life of me understand until the events section showed me that every single time this event happened, it happened with Firefox. So no matter how many users or what users Firefox was always to blame. And sure enough, this is actually a bug within Firefox. So it's not even something I have to worry about. So I can just go ahead and click select the error and click ignore. And I don't have to think about it because it's not affecting the users experience. But it's coming up nonetheless. And it's gonna fix itself on its own. So essentially allowed me to figure that out instead of allow it instead of having me really just ruminate on this bug that was not really a bug at all. So thank you so much century for constantly saving me a ton of time. And you'll want to head on over to sentry@sentry.io, use the coupon code, tasty treat all lowercase all one word, and you will get two months for free. Something I highly recommend you do if you have any application that users are using. So thank you so much for century for sponsoring. Next, we want to get into protecting your API, this is not necessarily the same thing as a security. But it's along the same lines of that you'll want to be able to protect your servers and your computers that are serving up this data, all sorts of malicious intentionally or unintentional activities. Sometimes people are hitting your API, it's, you know, public API, they're hitting it, and they're not intending to be malicious. But they're still maybe wrote some bad code that's causing the whole thing to hit it 1000 times. So one of the things you can do is to rate limit, which kind of is a fun way of just saying, hey, if somebody's doing something too many times in enough, like an A, like, let's say I click this button, or hit this API 100 times in less than a second, right? They just hit it that many times, it just hit rapid firing. The API can say, Whoa, whoa, hey, can you not? Can you not do that? How about you wait some time before you hit it again, otherwise, I'm not going to serve up this date anymore. This prevents people from hitting it thousands and thousands of times crashing your server overloading things preventing fast queries for other users, or anything like that. This is definitely an important thing to have on your API. If people are going to be using this. - -38 -00:33:55,020 --> 00:35:44,880 -Wes Bos: Yeah, you can you can rate limit an API by the users API key. So something like Google Maps gives you an API key. And you can only make 30,000 requests per API key, then you can also rate limit it by a person's IP address. So if it's a client side API, you could say only each person can only hit this API 100 times per day, or or once, per once per second, or once per 10 seconds or something like that. And what that does is it puts the rate limiting on the user themselves, not on the API key. other stuff that I do is a whitelist and blacklist. So if somebody is pinging it too frequently, or if it's a known sort of bad actor, or if it's coming from a known set of IP addresses that are bad. CloudFlare helps a lot with this as well. If you put your API behind CloudFlare they just know when things are bots and spammers. So they'll they'll sort of try to do that. It's really important that you put these things in place before You get an API in email for in the morning where your servers being pummeled or it's really hard to lock down an API because you're essentially giving people programmatic access, pulling and creating data. That's That's why Twitter has such a, an Instagram has such a hard time with opening up their API. If you look at API's over the years, Twitter used to be super open, it was amazing, you could create anything, and Instagram had a really good API and so to Facebook, and now it's so locked down. And that's half because they want you to like use their own apps and stay on the platform and suck their ads in. But it's also just because if you give spammers like the tools to to push content to it, they're gonna abuse it. - -39 -00:35:44,940 --> 00:35:49,350 -Scott Tolinski: Yeah, making bots and disrupting elections and those kind of things. - -40 -00:35:51,210 --> 00:37:14,550 -Wes Bos: Yes. So the last thing we need to talk about is Oh, sorry, the second last thing we need to talk about here is, is actually making it happen. So and I like to call this a resolver, or controller. And this is where the actual work happens. So when somebody hits your API, they're either they're crediting, they're creating a doughnut or updating a donut. They are see are removing create, update, delete, they're either doing one of those operations, yeah, you're doing it right. And when someone hits it, you need to do the work. And most likely, what that is, is it's looking up stuff in the database, it's checking for authentication, it's saving data to a database and waiting for that to come back. And that's what we call a resolver. So update the data, get the data, fetch the data from the database, and then send back to the user, both the data that they need, so often it will be an updated record. This is the updated donut, but also sending back the correct HTTP code. So if there was an error, you send a 404. If it's an authorized use, I think you sent a 503. I don't know them off the top of my head. And then also, I like to log what happened as well. So if you ever need to go back and say, like, who actually changed this data? You can, you can save some logs as to what happened when? - -41 -00:37:15,630 --> 00:37:53,210 -Scott Tolinski: Yeah, totally. Yeah, logging is one of those things that is, is pretty important when you're running an API, because if you are having things mysteriously happened, again, there are a lot of services, I don't know, if you use anything specifically for locking, I've used a couple of them different ones before, then that I wouldn't necessarily jump to recommend. But if there's any that people are using, I'd be interested in knowing what people are using to, to log in to be able to store logs, other than writing a custom log or a custom log list, I guess that maybe might be the best idea. But it's just a little bit of work. In that I think you you pretty much covered everything. - -42 -00:37:53,690 --> 00:38:05,940 -Wes Bos: Awesome. Well, we'll wrap it up here with some tools. Do you have any specific tools that you use when when creating an API testing an API, anything like that, documenting now, to be honest, I - -43 -00:38:05,940 --> 00:38:27,650 -Scott Tolinski: don't I especially because I've been working with graph qL so much, pretty much all of my tools resolve around Apollo. And it's just like the Apollo stuff. You know, I use Apollo engine to make sure my queries are fast, and all those good things. Now, I don't use anything specifically to test any of this stuff. My platform is all pretty. I don't know, I don't want to say basic, but it's pretty contained. - -44 -00:38:27,860 --> 00:39:13,650 -Wes Bos: Yeah, me too. Over the years, I've used postman quite a bit, postman is a Chrome extension or app that will allow you to debug requests. If you're having a hard time figuring out what's going wrong. Sometimes writing like a fetch request in JavaScript is not good enough. And you need more insights into what's going on. And you can save requests. a postman is great for that. A lot of people have told me to use swagger, which seems to auto document, your API. So if you write your API in a specific way, it will automatically create documentation, which is great, because writing doc sucks. Yeah, those are pretty much the the two I don't I don't go super heavy into this type of thing, just because it's mostly just me. And if I need to figure out what happens, I can just look at the code myself. So - -45 -00:39:13,730 --> 00:39:52,110 -Scott Tolinski: yeah, that is a thing because we're both writing API's that other people aren't really consuming, you know, I my API is is consumed by me and the developers on level up tutorials. And that's it. And because of that, it's, it makes it pretty easy to to not have to worry about some of these things. But at the same time, you can take it for granted. And as your team grows, and certainly as my team will grow these things have to be continued to be documented and improved. So now we're going to get into the part of the show called sick pics, where we pick things that we find to be totally sick, and they're usually it could be anything. I have a podcast, they do have something for your sick pick with. - -46 -00:39:52,530 --> 00:39:59,630 -Wes Bos: I do it's so you've been recommending solar lights like crazy over the past. I don't know six or so. - -47 -00:40:00,000 --> 00:40:01,710 -Scott Tolinski: Yeah, here - -48 -00:40:01,940 --> 00:41:12,060 -Wes Bos: we are we at our cottage we have these like steps that are like it's weird. It's like 10 feet of deck and one little step 10 feet of deck, one little step and 10. It's very gradual. And what happens is people don't see it and they, they, they do that thing where you step, yours walking and you didn't realize there's a step. So you go, boom, right, and I don't want someone to bail on it, especially when it's dark out people don't see them. So we got these little solar lights that sort of clip on to the side of a deck or a dock or something like that. And they're awesome. They're super bright. They they run for I'm not sure I haven't slept a lot. I've been sleeping when they're mostly on but they've been running for. Apparently they run for all night, eight to 12 hours, which is awesome. They're pretty easy to install. They're waterproof, which I'm going to put we just built a floating dock. I tried to put them on there. Oh, that don't run it run into this thing. Yeah, and it 50 bucks Canadian. I'm sure it's like 30 American for a packet eight. Big fan of these. I think it just like looks slick. It looks like that. I was like this looks like an expensive restaurant. I was telling my wife. - -49 -00:41:12,090 --> 00:41:16,560 -Scott Tolinski: Yeah, yeah, I saw that photo. I was like, Oh, yeah, this looks great. Yeah, - -50 -00:41:16,590 --> 00:41:41,760 -Wes Bos: yeah, it's, it's nice. It's what are they called? They're called upgraded solar stair lights environmental friendly. They don't even have a name there. They're just like some random generic design one. Yeah, but I'll put a link to them in the show notes if you want to check them out. Highly recommended. It's just a nice way to class up your backyard or, or add lighting to a spot where you don't necessarily have a floodlight or or power to run to it. So big fan, - -51 -00:41:41,760 --> 00:42:11,960 -Scott Tolinski: I want a solar light everything now that I've done this, dude, I'm on the solar light everything and we have these like I mentioned in one of the episodes, but we have these you know, hanging down lights that are just awesome. Yeah, be solar powered. I just like clipped it to my fence. You don't have to you can put them anywhere because you don't have to plug them in. And then I have like these little fairy lights in the in our peach tree. And you can set them to like twinkle so you go outside and the peach trees twinkling I'm like, Oh, yeah, this is great. Kind of back on peach tree. - -52 -00:42:12,150 --> 00:42:15,330 -Wes Bos: I want to come over hang out with you. That sounds fun. I know. Right? - -53 -00:42:15,360 --> 00:44:17,190 -Scott Tolinski: Yeah, just just wait till it's like peach season and like our backyard smells like fermented peach wine because all of the peaches have fallen. And it's it's whenever rotting. Yep, I love it. Cool. So that Yeah, dude, these things are amazing. I got to check some of these ones out that you got they're really nice looking. I'm gonna say pick a podcast because I like podcasts. And this is, you know, I did a couple of podcasts recently that weren't in the realm of swindling people or hacking people. So I'm gonna I'm gonna go ahead and change that up. I'm going to go back to you know my niche of those kinds of podcasts. But on the latest episode of swindled which was awesome, by the way, they recommended a podcast called hoax h. x. And this thing has been awesome. I listened to I've gone back for a few of the episodes. And let's see, I think there was one called Operation mincemeat, which is about an operation in World War Two, this deception operation in world war two that I did not know about. I don't know how I didn't know about this, but it was amazing. And it totally blew my mind that this thing had happened. There was an episode about Andrew WK, which was ridiculous. Every single episode I've put on so far has been very different and very interesting. I mean, it went from World War Two to Andrew WK to a high school student, manipulating his his classmates to like Russians who are selling property they didn't own every single story has been absolutely fascinating. And it's it's really well done Hi. So I've been I'm really enjoying it if you like any of those other pics I had like swindle dirt dark net diaries. So like hoax. There's a weird thing about hoax, though they do ads in hoax, but like, I don't know who's in charge of doing the ads, but they just like, drop them in in the middle of the audio. So somebody will just be talking. And then all of a sudden this ad will just come in. And then sometimes they play the ad twice. So I don't know who's editing this podcast. It's not good in that aspect. But the content is awesome in the production none. Everything's great, except for the advertisements how they choose to do that. I - -54 -00:44:17,190 --> 00:44:20,970 -Wes Bos: was like, you need to go over there and tell them how to transition and add you - -55 -00:44:21,930 --> 00:44:25,170 -Scott Tolinski: been? I think I'm gonna start a workshop. Yep. Here's how to do it. - -56 -00:44:26,940 --> 00:44:40,080 -Wes Bos: Awesome. So for shameless plugs. Today, I'm gonna plug all of my courses at West boss comm forward slash courses, use the coupon code syntax to get 10 bucks off, and the free ones you can get for free. What do you got today? - -57 -00:44:40,140 --> 00:45:29,250 -Scott Tolinski: I'm going to be plugging the course that's coming out on when you're listening to this. It'll be coming out on Saturday. And it's going to be on Gatsby. And it's going to be not only just on Gatsby, but it's gonna be on Gatsby and Shopify. I know this sounds familiar, because last month of course was also on Gatsby e commerce but this one dives deep. We go deep into building a site with Gatsby and Shopify, it is going to be really super interesting. We're going to be building a full on e commerce store with a custom shopping cart, none of this iframe stuff like we did in the last series. So if you're looking to take what you learned from the first series and step it up a notch or you just want to really get into building headless ecommerce sites, check it out. We're going to be building that over on level up tutorials. COMM sign up, become a pro for the entire year and save 25% - -58 -00:45:29,400 --> 00:45:37,530 -Wes Bos: Beautiful. All right, I think that's it for today. Thanks so much for tuning in and we will catch you in the next one booze pace. - -59 -00:45:39,360 --> 00:45:49,140 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax175.srt b/transcripts/Syntax175.srt deleted file mode 100644 index 06d1b0838..000000000 --- a/transcripts/Syntax175.srt +++ /dev/null @@ -1,284 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,989 -Unknown: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott, Todd. - -2 -00:00:23,610 --> 00:00:24,480 -Totally ski. - -3 -00:00:25,890 --> 00:01:18,650 -Scott Tolinski: Oh, welcome to syntax in this Monday hasty treat. We're going to be bringing back one of our favorite segments and favorite types of shows. We all know that you love to this type of episode. And this is of course, I'm talking about the stumped episodes. Now, in stumped if you are a new listener to syntax, you might not have heard one of our stump episodes. But what they are is, Wes and I are going to ask each other a few interview questions that we randomly selected, and we're gonna do our best to answer them. Now, this is no pressure, we're not getting to look up any of the answers here. And if you listen to any of these episodes before, you will know that we both get easy questions wrong all the time. So that's the beauty of this stuff is when you're put under the pressure, you might not always come up with it. So my name is Scott Tolinksi. I'm a developer from Denver, Colorado. And with me, as always, is Wes Bos. How you doing Wes? - -4 -00:01:18,780 --> 00:01:21,390 -Wes Bos: Hey, everybody, I'm doing pretty good. - -5 -00:01:22,050 --> 00:02:37,220 -Scott Tolinski: Pretty, pretty good. I'm doing pretty good too, because I know the situation on my web app at all times, because I use sentry@sentry.io. Now, Sentry is one of our sponsors for this episode. And what Sentry does is it catalogs it collects all of your bugs. And it makes it so you can know exactly what's happening on any given point of your website. Now, the cool thing about Sentry is that they have different versions of the API for every single platform that you could possibly use IO century on my API for node, I have my century for my front end with react and JavaScript. I can connect to it via anything that I want. If I wanted to have a Ruby aspect of my site, I could have century for Ruby to century, it just takes care of everything catalog categorize catalog. That's a tongue twister. And one of the cool things is you can attach it directly to a GitHub issue and then I can assign it to someone like myself to take care of later, directly from Sentry. It's absolutely amazing. One of my favorite favorite tools that I use every single day in my business, so head on over to century@sentry.io use the coupon code tasty treat all lowercase all one word, and you'll get access to two months for free. I highly recommend checking it out something I could not live without in my devstack. So do you want to get into it? Who is going to be asking the first question and who's going to be answering what do you what do you think? - -6 -00:02:37,280 --> 00:02:40,350 -Wes Bos: Let's do rock paper scissors. - -7 -00:02:40,350 --> 00:02:52,110 -Scott Tolinski: Oh, yes. Let's do rock paper, scissors live on air. And we're just gonna shout out what it is. Okay, we Rock Paper, scissors, shoot and then the item that you want to do. - -8 -00:02:52,500 --> 00:02:56,310 -Wes Bos: Rock paper scissors, shoot. Is that like the American rock paper scissors? Yeah, we - -9 -00:02:56,310 --> 00:02:59,130 -Scott Tolinski: always say shoot Rock paper scissors. Shoot. Really? Yeah. - -10 -00:02:59,399 --> 00:03:00,420 -Wes Bos: Okay. All right. - -11 -00:03:00,420 --> 00:03:05,130 -Scott Tolinski: I can do that. But we'll so we'll be Rock Paper, scissors, blank. Whatever you're choosing. - -12 -00:03:05,339 --> 00:03:08,070 -Wes Bos: Oh, okay. That makes sense. You don't say the word shoot? - -13 -00:03:08,399 --> 00:03:10,590 -Scott Tolinski: Yeah, sorry. Yeah. Okay, okay. - -14 -00:03:11,670 --> 00:03:12,420 -Unknown: Okay, ready? - -15 -00:03:12,420 --> 00:03:31,620 -Scott Tolinski: Yes. Rock Paper Paper. We gotta get no, no, no, we gotta get we gotta get a look at cadence going. So we're okay. All right. Like, like this. I know that. Let's go slower. Rock paper. Okay, paper. So yeah. Ready? - -16 -00:03:32,670 --> 00:03:47,940 -Wes Bos: Rock, paper, paper, scissors, rock, rock. Oh, through rock. Alright, again. Rock, rock, paper, scissors, rock scissors? - -17 -00:03:48,270 --> 00:03:48,900 -Unknown: Yes. - -18 -00:03:50,340 --> 00:03:51,330 -You get to choose. - -19 -00:03:51,450 --> 00:03:57,450 -Scott Tolinski: I'm gonna ask the question first. Okay, what is the difference between no and undefined? It should be pretty. - -20 -00:03:57,480 --> 00:04:46,170 -Wes Bos: Oh, no, it's funny, because I actually just recorded a video off for my beginner JavaScript course on this. So hopefully, it's it's good. So no, is explicitly nothing. Whereas undefined is the absence of something. Yeah, well, what I'm what I mean by that is, when you create a variable, and you don't assign any value to it, it's undefined. Whereas if you want to explicitly set a variable to nothing, you use null. So I always like to use what was the example that I used share shares last minute shares just share share doesn't have a last name. She's just share her last name is undefined, right? Whereas somebody like who, like, got rid of their last name? Who's someone like that? - -21 -00:04:47,790 --> 00:04:49,440 -Scott Tolinski: Who got rid of their last name? - -22 -00:04:49,700 --> 00:04:50,490 -Unknown: Yeah. - -23 -00:04:50,970 --> 00:04:51,830 -Scott Tolinski: I don't know. - -24 -00:04:53,220 --> 00:05:33,810 -Wes Bos: Someone that got rid of their last name. I can't I can't think of I had a hilarious example in my course that I could go back and look at but some One who explicitly got rid of their last name, they would set their last name to No. And that is nothing. And that's further complicated, because you can actually set values to undefined. But I won't get into that just because you technically can do it. But that's generally how I see it, undefined is not set, whereas null is explicitly nothing of value of nothing. And I also find that helpful in situations where, like, you don't want to set a value. If you're dealing with numbers, you don't want to set it to zero because zero is a valid value, whereas, you know, is explicitly a value of nothing. Word. - -25 -00:05:33,960 --> 00:05:39,330 -Scott Tolinski: Yeah, yeah, I think that is a very long way of giving that correct answer. Yes, absolutely. - -26 -00:05:39,360 --> 00:05:45,720 -Wes Bos: Thank you. Next, we have I have a question for you. What is short circuit evaluation in JavaScript? - -27 -00:05:45,720 --> 00:06:39,330 -Scott Tolinski: What a short circuit and there's a robot involved? No. Um, so I don't know if this is the right answer. Because I don't know if I've used this term specifically before, but I think I have an idea of what it could be. My idea would be that you let's say you have a function that has a purpose, right, this function is going to output, it's going to alert Hello. But a short circuit would be when you were to let's say, let's check the users role ahead of time, maybe this user is like his user admin. And if that comes up as false, then you would just return to get out of the function without actually completing the process. So it's something that would be like in front of the process of the function supposed to do to get out of the function or get out of that intended activity, if some requirements aren't met? Is that even close? - -28 -00:06:39,330 --> 00:07:20,340 -Wes Bos: That's exactly it. So if you have like if you if you have a like an if statement, you could say if is admin, and and has special powers, it first checks if it is admin, and then it checks if you have a special power. And if you're not admin, it's not going to continue on doing those additional checks. It will just stop there. Same thing with there's a number of different loops that can be short circuited the which one is it the I forget which one it is, there's a couple array loops that you can short circuit, meaning that as soon as you find the thing that you're looking for, it's not necessary to loop over the rest of the items, you'll simply return that value and you've got it. dot find is does that - -29 -00:07:20,430 --> 00:07:28,140 -Scott Tolinski: cool? Yeah. Me. Alright, next question is, here we go. Got one. What is use strict? - -30 -00:07:28,140 --> 00:08:26,310 -Wes Bos: Oh, you strict is the ability to set the document. Is that good? Let me back up here. So it's there's new. in JavaScript we have, we have features that are added to the language. The problem is when you add new features to the language, you can't remove old features, you always have to be backwards compatible. So there's some some weird things in JavaScript like, Man, I'm I can't remember what they are. I just recorded a video on this as well, like the ability to define redefine a variable like either say var age equals 10. And then the line under that var age equals 12. The ability to var twice. If you're in strict mode, that's not allowed. So essentially, you can sort of like say, like, get rid of all this old sort of bad practice baggage that JavaScript has and put me in strict mode, which allows you to also like use some some new features as well. So I don't know, is that a good example of is that a good way to say it? - -31 -00:08:26,310 --> 00:08:27,330 -Scott Tolinski: I guess, oh, - -32 -00:08:27,330 --> 00:08:28,770 -Wes Bos: what does the answer say? - -33 -00:08:28,979 --> 00:08:44,660 -Scott Tolinski: I mean, the answer just says use strict is a statement to enable strict mode. So it doesn't really give you no direct access to what strict mode is specifically. And to be honest, I don't use strict mode myself. So I don't I don't really know, I know a lot of people really live on strict mode. - -34 -00:08:45,120 --> 00:09:31,790 -Wes Bos: Well, yeah, if you're in a module, if you're using ESX. Modules is strict mode is enabled by default, you don't have to use strict at the top of all your module. So that's why you actually probably do use strict mode for all your dough and you just never type it. Yeah. Beautiful. All right, I'm going to grab another one. Oh, here's one that I probably wouldn't have known. Oh, no. What is the only value not equal to itself in JavaScript? So I'll give you an example. What Yeah, what does that mean? A true equals true. One equals one string of less equals a string of less, those are values that are equal to themselves. So what is an instance in JavaScript where this exact same type value not equal itself? I didn't know this. - -35 -00:09:32,069 --> 00:09:41,370 -Scott Tolinski: You did not know this? I don't know this, and I'm probably seen it in one of those, like, 10 reasons why JavaScript script sucks blog post. Yeah. Oh, no answer - -36 -00:09:41,370 --> 00:09:43,650 -Wes Bos: is no. Well, why not? - -37 -00:09:45,030 --> 00:09:46,280 -Unknown: Oh, you didn't even know - -38 -00:09:46,650 --> 00:09:55,280 -Scott Tolinski: why I was gonna say zero, but okay. I don't know that. I don't know why 08. Maybe zero is equal to five. I don't know. Who knows. That's not a good who knows. - -39 -00:09:55,500 --> 00:10:12,570 -Wes Bos: I didn't know this thing either. So if you have not a number is not not equal to itself. And is equal to not equal to na n. Yeah. So go in your console and type triple equals na n is equal to false. - -40 -00:10:12,720 --> 00:10:24,570 -Scott Tolinski: What a dumb piece of knowledge. When would you ever need to know that? Like, there's no particular situation where that will ever memorable? I can't think of a single situation. So now that's dumb, man. All right, you - -41 -00:10:24,570 --> 00:10:25,860 -Wes Bos: can give me a dumb one now. - -42 -00:10:25,860 --> 00:10:40,440 -Scott Tolinski: Okay, let's go. Let's find the dumbest one. I'm not trying to find a dumb one here. I'm not actually trying to give you a hard one. This was gonna be an easy one. But it is I think it's a good one for the listeners. When would you create a static class member? - -43 -00:10:40,740 --> 00:10:43,380 -Wes Bos: When you do a static class member? - -44 -00:10:43,770 --> 00:10:51,650 -Scott Tolinski: Yes, static class members aka properties and or methods? I don't I've never heard the word member for this before but no common. A member? - -45 -00:10:51,840 --> 00:11:20,550 -Wes Bos: That's a fun, that's probably like a word that's used in another programming language or something like that. So when would you create a static property when you don't want each instance of that class to have it? So an example is array dot from an array of every single array that you create does not have that method, if you want to use it, it's, it's on the the prototype the capital A array, is that right? - -46 -00:11:21,360 --> 00:11:30,600 -Scott Tolinski: static properties are typically configuration variables. static methods are usually purely utility functions, which do not get done the state of the instance. - -47 -00:11:31,710 --> 00:11:56,070 -Wes Bos: Oh, you know what I was, I was saying methods I didn't think about I said properties. But that's, that's good to know. Same with like something like math.pi. If you want to access bi, you can access on math.pi. But every single number that you create, you do not have access to pi, nerdy, nifty. I have one here for you. What is a pure function? - -48 -00:11:56,969 --> 00:12:24,270 -Scott Tolinski: A pure function always returns the same thing. If you pass it, let's say like a function that adds two to the number. If you pass it one, it's always going to return three every single time. There's nothing else that's going to get in the way, no outside usage of any variables and therefore a pure function is nice impure, it is not going to have its result modified by anything outside of the function. Does that? Is that it? Yeah, - -49 -00:12:24,420 --> 00:12:32,250 -Wes Bos: that's it. Yeah. It never modifies anything outside of it. And it never reaches outside of itself so easily. They're easy to test. - -50 -00:12:32,550 --> 00:12:41,160 -Scott Tolinski: Yeah, I love love with a capital L o. v. Pure functions. Big fan. Awesome. Yeah. Pure function fan. Oh, one. - -51 -00:12:41,160 --> 00:12:47,700 -Unknown: purify. We should make a sticker like that. That would actually be great. Pure function. 86. Yes. - -52 -00:12:51,300 --> 00:12:55,560 -Wes Bos: Awesome. All right. Well, you got one. Let's maybe do one more each. - -53 -00:12:56,099 --> 00:13:10,680 -Scott Tolinski: Chair. Yeah, let's do that. We're getting to that time. Okay, my my Baba, Baba, I almost asked you one that we just answered in the last episode. So that's not going to happen. Okay, this is a pretty good one. Yeah. What is a JSON p - -54 -00:13:11,250 --> 00:14:05,850 -Wes Bos: o JSON. P stands for JSON with padding. And it gets around the ability. Before we had cores on the server side, it was not possible to send data from one domain name to another domain name, because that violated the course in the browser. However, you can get around that because one thing you can send from domain to domain name is not raw data, but you can send JavaScript. So JSON p essentially takes your data that needs to go from one domain name to another and wraps it in a function called a callback. And instead of sending the raw data you're technically sending I'm using air quotes here JavaScript, where the one argument to that JavaScript function is all of the data that you need in this sort of a way to sort of hot potato the data over into a global function, then you can grab that data via the callback. Hot potato. - -55 -00:14:06,089 --> 00:14:11,700 -Scott Tolinski: Yeah. Yeah, that's good. That's a good that was a good question for you. I felt like yeah, you you kill that one. - -56 -00:14:12,209 --> 00:14:18,360 -Wes Bos: Thank you. Okay. Well, you're just, I'm trying to I'm trying to nail you here. And you're just giving me softball. So I appreciate that. - -57 -00:14:18,360 --> 00:14:19,470 -Scott Tolinski: You're welcome. Yes. - -58 -00:14:19,470 --> 00:14:35,190 -Wes Bos: I've got one here. This is a CSS question. Describe the layout of the CSS box model and briefly describe each component. So how do you calculate the size of something? What are the things the four things that make up the size of something? - -59 -00:14:35,250 --> 00:14:58,590 -Scott Tolinski: Yeah, so it would be the content itself? Instead, they call it the boxes, the whole thing? I don't know. Whatever. You got it. Yeah. There'd be the content, the margin, the padding? Well, first, it goes to content padding, or first it goes content. Border net, sorry. content, padding, border margin. - -60 -00:14:58,650 --> 00:15:00,660 -Wes Bos: Yeah. Now Yeah, - -61 -00:15:00,720 --> 00:15:21,420 -Scott Tolinski: it's like I gotta visualize that little image that's inside of the Chrome Developer Tools. But yeah, that's pretty much it. And then the width is calculated as the entirety of a wall. I'm sorry, the width is not is just the width of the content. But if you use a box model border box, you get that whole thing as the width, which is everything except for the margin. That's how I like to do it. - -62 -00:15:21,960 --> 00:15:23,790 -Unknown: Got it? Yeah, yeah, - -63 -00:15:23,820 --> 00:15:25,170 -Scott Tolinski: yeah, yeah. Yeah. Good. - -64 -00:15:25,200 --> 00:15:28,440 -Wes Bos: That was a good one. I'm I like that one. You nailed this one. We - -65 -00:15:28,440 --> 00:15:32,820 -Scott Tolinski: got I mean, we got to do one of these stumps a month. I know we were talking about doing that. And we just didn't. So - -66 -00:15:33,000 --> 00:15:34,380 -Wes Bos: I'll let's let's get back into doing this. I - -67 -00:15:34,380 --> 00:15:36,300 -Unknown: think I think there are a lot of fun. - -68 -00:15:36,360 --> 00:15:55,860 -Wes Bos: All right. I think that's that's enough for today. I think that what we want to do with the stumped is somehow have listeners submit questions like this as well, because it's these are fun, like little interview questions, but it'd be fun to have listeners, submit ones and try to try to stump us. Yeah. All right. Anything else to add there, Scott? - -69 -00:15:56,189 --> 00:15:58,410 -Scott Tolinski: I got nothing. All right. - -70 -00:15:58,770 --> 00:16:03,900 -Wes Bos: Cool. Well, thanks so much for tuning in. And we'll catch you on Wednesday. Dude, please - -71 -00:16:05,760 --> 00:16:15,510 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax176.srt b/transcripts/Syntax176.srt deleted file mode 100644 index 1aeac0abf..000000000 --- a/transcripts/Syntax176.srt +++ /dev/null @@ -1,572 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,849 --> 00:00:05,760 -Unknown: the podcast with the tastiest web development treats out there. - -3 -00:00:05,760 --> 00:00:09,000 -strap yourself in and get ready to live ski - -4 -00:00:09,000 --> 00:00:10,560 -and West boss. - -5 -00:00:10,560 --> 00:00:45,060 -Wes Bos: Hey everybody, and welcome to syntax. This is the podcast with the tastiest web development treats out there. Today we are going to be talking about building games with JavaScript specifically building actual Steam games. Not like a silly snake or something like that. But actual shipped games with react, we have drew Conley on who is a game developer react developer will talk to him in just a second onto the show today, super excited to have him on and with me, my name is Wes Bos. I realize I forget to say who I am when I'm introducing. My name is Wes Bos. I'm a dev from Canada. - -6 -00:00:45,179 --> 00:00:49,140 -Scott Tolinski: You gotta like take it like it's everyone's first episode every single time. - -7 -00:00:49,379 --> 00:01:08,010 -Wes Bos: Yeah, that's the funny thing is like now that we have like 176 episodes. Sometimes people ask me like questions. I'm like, don't you listen to every single episode? I'm like, Oh, yeah, no, nobody has the eight days to just listen to the straight. It's just funny. But with me, Mr. szalinski. Scott Lindsey, how you doing today? Scott? - -8 -00:01:08,189 --> 00:01:20,640 -Scott Tolinski: Doing good. Finally, caffeinated. So I mentioned in the earlier episode that we recorded the knocking a whole lot asleep, obviously, at this point in our lives, but I'm ready to go. You know, I'm Mama. stepping it up. I'm ready. Yeah, - -9 -00:01:20,669 --> 00:01:33,750 -Wes Bos: I'm here. Awesome. Good. I'm finally back from my maternity leave slash long vacation in the summer. And I'm back at my huge monitor. And it feels so good. To be back in my my regular spot. - -10 -00:01:34,469 --> 00:01:40,560 -Scott Tolinski: Yeah, good about that, like comfort of your workspace or whatever just pulls you back into work a little bit more. It feels good. - -11 -00:01:40,949 --> 00:01:54,930 -Wes Bos: Yeah. So let's get into it. I want to like immediately off the bat plug Drew's game. It's called danger crew, and you can grab it on Steam. And it is super fun. I'll let him tell you what it is. But welcome, Drew, thanks so much for coming on. Hey, yeah. - -12 -00:01:54,959 --> 00:01:56,010 -Unknown: Thanks so much for having me. - -13 -00:01:56,639 --> 00:02:06,840 -Scott Tolinski: Yeah, so do you really quick before we get into Do you want to just give us a little bit a high level overview about me, not the technical aspects, but just the the game itself? And then we'll get into the tech stuff as we as we go? - -14 -00:02:07,049 --> 00:03:34,229 -Unknown: Yeah, sure. So yeah, kind of started as some friends and I work together in an office building, in this really pretty area of St. Louis, Missouri called Clayton. And we were like, at lunch one day, or walking to lunch one day, and it was one of those like, picture perfect fall days where the weather was perfect. And the part of town has like these really nice buildings. And it just felt very inspirational, kind of like you were walking through a movie set or something. Mm hmm. And my friend Henry was like, You know what, we should make a game about this. We're like, you're a developer, and you walk to lunch to AAA, and then you like, walk to the office and like, and yeah, you know, you could get on your laptop and like, battle other programmers and stuff. And yeah, and so we kind of just, like kept piling ideas on and, and we're like, I just felt so in love with this idea. I was like, I'm gonna pull this off. And at the time, I didn't know anything about how games were made. Like, I didn't know anything about unity, or c++ or anything like that. So I was like, You know what, let's just start today with what we know, which for us, were a bunch of front end developers. So we chose just HTML, CSS, and JavaScript, specifically react because I was doing a lot of react at the time. And I just felt very fluid in it, you know, nice and fast and productive. And I was like, you know, if, if the technology gets on our way, will will shift. But for now, we'll just do that and see how far we get. And we just never had to, we never had to switch? Oh, cool. Yeah. And so finally, the game came out earlier this summer. And it was just a really cool experience to work on. - -15 -00:03:34,469 --> 00:04:08,669 -Scott Tolinski: You know, what's amazing about the game, I think the thing that you're going to notice immediately if you go to the steam page, or just any any way of seeing the game, is that the first thing you're going to think is this is built in react like it. When I think of video game built in react, I certainly don't think of what you've managed to put together. And I mean, and I say that in the best possible way, because this thing is very impressive on all accounts. So I'm sure we'll both have a ton of questions asked you about how you how you managed to put this thing together. Wes, do you have anything before we get into into those aspects? - -16 -00:04:08,699 --> 00:04:55,130 -Wes Bos: Yeah, I just I just think this is so cool. Because naturally, developers I think people think there's like this hundred percent overlap on people that that play games. And I all the time I get people coming to me even like the summer, I was hanging out with my nephew. And his parents were saying like, yeah, we want to teach him to code. Like, could you teach him how to build a game? And I was just like, I could I could teach him how to like build like a drag and drop wiziwig and like an app and I was like, but like, those who don't know about me is like, I never ever play games. I had to download steam this morning to even just play this game. I've done it before. And I've just never had that connection with games. And it's always sort of been like this empty spot because I think gaming is such a cool way to introduce people to programming get them excited about actually making things. - -17 -00:04:55,409 --> 00:05:15,810 -Scott Tolinski: Man, I wish that's a contrast for me because I have I'm one of those people that has more steam games than they could ever possibly play. Like, because you go through the humble bundles during the sales and you have all this optimistic idea of all the stuff, maybe you get like four or five games at a time for one of these bundles. And man, my Steam my Steam to do list is much longer than my capacity to play games. So - -18 -00:05:15,830 --> 00:05:17,130 -Unknown: that's a common problem. - -19 -00:05:17,370 --> 00:05:22,760 -Scott Tolinski: Yeah, the common problem. So we're on different ends of the spectrum here. So this should be pretty good. - -20 -00:05:22,920 --> 00:05:23,490 -Wes Bos: Yeah. - -21 -00:05:23,490 --> 00:05:35,070 -Scott Tolinski: So let's get into the game itself. You said that you didn't have any knowledge. So you have like no background in game development before? Is that just something that says interested you? And all of a sudden you're like, let's, let's just do it? - -22 -00:05:35,430 --> 00:06:38,070 -Unknown: Yeah. To be honest, as a kid when I was like in middle school, I tinkered with this program called gamemaker. Oh, yeah. Which is still I mean, today game thing, very valid. Tons of really large games are made with Game Maker. But this was back in like the early 2000s. And it was a very small thing back then. And so yeah, gamemaker comes with this little program, a programming language called GML, Game Maker language. And that was kind of my like, first gentle introduction into programming. But then life happened, and I like got got away from programming or, you know, did some growing up or whatever. And then when I got back into it, basically, after college, I saw I was starting to get into web development, and I saw the syntax of JavaScript. I was like, oh, I've seen this before. This is just like gamemaker. And so that was kind of a fun way for me to get back into programming and get excited about it again. But I was making little like, Mega Man clones, like I grew up loving Mega Man. So I'd make like the alpha little Mega Man fan games and Game Maker, ripping, you know, art from other games and stuff. So I was very casual, you could say, - -23 -00:06:38,160 --> 00:06:55,830 -Scott Tolinski: yeah, I think one of the game that I had played that was made in Game Maker was, obviously is a very popular game hotline, Miami was probably maybe the most popular game made in Game Maker, as far as I know. But it is really impressive what you you can create with that. So why not head back to game maker for this? - -24 -00:06:56,280 --> 00:07:24,660 -Unknown: Again, I think it was at the time, I was just so excited about the idea. And I haven't touched game maker in like a really, really, really long time. And so yeah, it was one of those things where I didn't want those, like the friction of having to learn new thing to get in the way of, of God putting out the idea that I wanted to put out. And so again, I was very open to like, we might need to switch or something. But there's also kind of this exciting concept of building the game that you could just load up on a webpage and play. Isn't it interesting - -25 -00:07:24,660 --> 00:07:45,990 -Scott Tolinski: how sometimes like the the tech choices, like choosing to use web tech as a challenge, these things can act as sort of like a motivation to work on the project even more, because it's like, yeah, sure, I want to make a game. But the challenge of building a game in these sorts of ways are these sorts of ideas can really like drive those motivation factors and working on it. - -26 -00:07:46,080 --> 00:08:25,890 -Unknown: Right, I was trying to kind of find, like, Okay, what differentiates this from any other game? And it's kind of cool, because there's opportunities that let me what we're talking about is really just a webpage, right? So you, you can have the desktop game, and then if it's responsive, right, cuz it's like web code, so then it could gracefully, you could play it on your phone, too. And there's just a lot of opportunity there that I wasn't in, like I grew up playing games, but I wouldn't say that I'm 100% up to speed on all the latest stuff going on in games. And I know that there's a lot of like multi platform, things out there today and all of that. But yeah, at the time, it felt like this really new, exciting way to use the stuff that I already knew, which is, you know, web. - -27 -00:08:25,890 --> 00:08:26,910 -Cool. Hmm. - -28 -00:08:27,210 --> 00:08:48,330 -Scott Tolinski: Yeah, we'll get into talking about like the publishing aspect and wrapping it all up at the little bit further along. But I'm still interested in this like, so you started building it in react? And what were some of the first initial resources that you went to, to figure out how to even approach building a game in react? - -29 -00:08:48,360 --> 00:08:59,299 -Wes Bos: I'm curious about that. Because like, if I were to like whip up, create react app and start to make a game. What do you what do you do like I get you have state? Maybe you put points in state or something like that? Yeah. - -30 -00:08:59,340 --> 00:09:09,690 -Unknown: Well, it's funny, you mentioned that, because so first of all, the game is just create react app, in a way. Yeah, there's no fancy configuration or rejecting or anything like that. It's just out of the box, create react - -31 -00:09:09,690 --> 00:09:10,260 -Scott Tolinski: app. - -32 -00:09:10,279 --> 00:09:49,020 -Unknown: No, yeah, either way. Yeah. And I think the most important thing to understand is that under the hood, you approach it just like you approach any other web project. The kind of key difference is a bunch of visual like, tricks to make it look and feel like a game rather than a webpage. Right? So it's a lot of like moving elements around and doing things with the camera camera is like a pinkies up way to say it's like cropped divs that are moving. Yeah, and then from there, you know, it's just a lot of artwork and svgs and a little bit of canvas here and there. But it's it's really nothing that's not approachable for some of it's done at least a little bit of web development work. - -33 -00:09:49,350 --> 00:09:53,760 -Wes Bos: So you're not using like, like a framework or unity or anything. - -34 -00:09:53,760 --> 00:10:27,179 -Unknown: No and and that stuff is perfectly valid and awesome. They're great libraries out there. Like Laser that kind of gives you a lot of resources for putting graphics on the screen and physics and moving them around. But our game, if you look at it, it's very simple, where it's basically just characters moving around a grid, and then kind of transitioning in and out to different scenes. But there is nothing in it that really warranted like anything super heavy. It's really just a lot of thing. A lot of simple pieces put together that kind of that net effect is this thing that looks like one of those classic RPG games. - -35 -00:10:27,390 --> 00:10:32,850 -Scott Tolinski: So how much of it is Canvas? Because when I looked at it, the first thing I thought of is the whole thing is can No, - -36 -00:10:32,880 --> 00:11:15,390 -Unknown: no, it's very little. So any, any character you see on the screen is their own individual little canvas. And the only reason I use that is because Canvas comes with this cool CSS property you can use. I have it written down right here. It was a trick I just like recently discovered. But yet, image rendering pixelated. And what that allows you to do is basically provide an asset that's designed very small at its natural pixel size, and then upscale it without losing any quality. Because the nature and pixel art is like these perfectly even little squares of color. You can upscale it as long as you're doing it evenly, right. So the squares are always like evenly multiplying. That answers such - -37 -00:11:15,390 --> 00:11:25,529 -Scott Tolinski: a big question of mine about how you get to do that, because I know you create these pixels in the size of the pixels. So you're just outputting that to a canvas and scaling it up. Right? super great. - -38 -00:11:25,560 --> 00:12:10,320 -Unknown: Yeah, the game has this, anytime you resize the window, there's this little calculation that happens on like, how much real estate do I have? And how much of this Can I fit in. And that's why if you kind of open the game and start resizing the window, you'll see that art snap proportionally. Yeah, and it's funny because for the longest time, I had to find that trick because for the longest time, we were using svgs, for all the art to kind of have that same benefit of needing, you know, nice fluid resizing assets. But as the artwork evolved to get way more detailed, and then the file sizes of these SVG started getting huge. I was like this, this probably could work. But it's not the most sustainable thing. So that's when the canvas, I discovered the canvas trick, you can also use that for an image tag. But I didn't know that until, after way, - -39 -00:12:10,350 --> 00:12:33,360 -Wes Bos: way. One kind of cool thing, I'll just say, as an aside, I found with that, that little Canvas trick is that if you want to get the dominant colors of an image, is you can write an image to a canvas very small, and then use that pixelating thing and it will give you a grid of like nine pixels. And then you can just loop over nine pixels and find out what colors they are. No, that's interesting. - -40 -00:12:33,419 --> 00:12:37,500 -Unknown: That's awesome. You can totally generate like color palettes and stuff from that that's so cool. - -41 -00:12:38,730 --> 00:12:58,890 -Wes Bos: Using like, I was using like a library to like to snoop colours and do all this like equations and someone's like, you can just write this to Canvas and at nine pixels by nine pixels wide and get our two pixels by two pixels wide. I'll give you four. And it will give you the four most dominant colors without any libraries at all. That's so cool. - -42 -00:12:58,919 --> 00:13:03,840 -Unknown: I've always wondered how that's done. It seems magical, like some you need some heavy processor or something. - -43 -00:13:03,899 --> 00:13:04,860 -Scott Tolinski: Yeah, right, right. - -44 -00:13:05,520 --> 00:13:10,919 -Wes Bos: Are you using like anything like like Redux or any other JavaScript libraries? - -45 -00:13:10,950 --> 00:13:56,070 -Unknown: Yeah, there's a very light, light usage of Redux. Basically, just to glue some of the pieces together. So the game for context. Most of it is flow from moving from like the scene where you're walking around the world and talking to people into these little turn based battle sequences. And those are like kind of two different distinct scenes that happen. And so Redux helps, and like providing a place to store some state that needs to persist between those. And again, like this project, it took, like we started it in early 2015, when the landscape of things around react was very different. And so if I was starting today, I don't know if you'd really need Redux. But again, it's one of those things I just felt comfortable with, and really enjoyed how it worked. And so I just kind of stuck with that. - -46 -00:13:56,340 --> 00:14:44,909 -Scott Tolinski: It's probably great to have that structure too, when you're dealing with any of this. So one of the things that I mean, the graphics, for me are such a big interest point. Like I'm so curious about how you did so many of these things. So the each individual person is a canvas. But so let's say the environments, especially you have like repeating floors, and things like that, I'm really interested in how you laid out the environments. And I'm sure a lot of it is CSS, and HTML right. Now that I've heard a little bit more, but I'm really curious about how you got some of these repeating patterns in here to look so good. Not only that, but like with some of the variability, let's say you have like, it's like a grid of outside tiles every every once in a while, there's gonna be like a flower on one of the tiles or something like that. I'm very curious about not only how you created the grid, but how you created some of those interesting variations, right? - -47 -00:14:44,940 --> 00:15:01,110 -Unknown: I wish I had a better answer for you. But the honest truth is that a lot of that stuff is created created outside in an art program, like you can use whatever you're comfortable with. I've been using this pixel art program called a sprite, which is really lightweight, and it's designed For pixel - -48 -00:15:01,140 --> 00:15:06,049 -Scott Tolinski: art, hmm, the letter A like a Yeah, it's like a e sprite, - -49 -00:15:06,059 --> 00:15:08,190 -Unknown: I can send you guys a link, if you - -50 -00:15:08,299 --> 00:15:10,230 -Wes Bos: want to link to it, it's Yeah, we'll put it in the show notes. - -51 -00:15:10,260 --> 00:16:35,010 -Unknown: Yeah, it's like one of my favorite pieces of software, I think it's like 15 bucks hundred percent worth it if you want to even just experiment with pixel art. And you're absolutely right on the side, we have this like Dropbox folder of all of our tile sets. And we use that to construct actual like baked PNGs of each individual map outs outside of the game, and then we just import it into the game. We also made this little editor like a separate app that acts as an editor for the game that basically pipes any piece of content as JSON into the game. And so each if you notice, like if you move from a map to a different map, that's like moving to a different node in the JSON tree of what what's happening in this area, what asset do we use? How big is it when you talk to someone? What did they say? All of that data is kind of structured that way. But yeah, as far as the graphics side, it was pretty manual. And that's, that's not because it had to be I was just kind of a way that I had this one devastating moment where we did try to work with pure tile sets where you'd you'd place like individual tiles, and it would dynamically render kind of like what we were talking about before. Sure. In the tiling program that we were using corrupted all of our files, and we lost. Yeah, I wasn't smart enough to like version control them. I had them in like Dropbox. And I could have, I could have done some reverse engineering to fix it. But it was kind of like, you know what, we're gonna keep this real simple and just make individual assets for the maps. Wow. - -52 -00:16:35,039 --> 00:16:45,600 -Scott Tolinski: So what about like, the text? Is the text actual text? And you just used excellent fonts that totally mimic that art style? Or is the the text also rendered? How does that work? - -53 -00:16:45,750 --> 00:17:15,780 -Unknown: Yeah, so the text is all SVG, where each each character kind of has its own SVG paths in it. And in that you can kind of get in there and play with them and recover them. But yeah, they're one of the things with pixel art is that it's really important that every single pixel on the screen matches the pixel ratio. Yeah, I have a one pixel thing like no character, like say, You're making a T of the character T, you know, the little top of the T needs to be one pixel that needs to exactly match like the one pixel of a character's eye. - -54 -00:17:16,140 --> 00:17:16,650 -Yeah, - -55 -00:17:16,650 --> 00:17:39,720 -otherwise, you get this weird, like inconsistent kind of effect. It just doesn't feel right, because it doesn't match. You know, like how that the overall grid. Right, right. Yeah. And so to do that, we basically used svgs that match. Again, similar calculation, like how big is the pixel size right now? We'll use that to size the characters. Wow. And then under the hood, we have some like text baked into the DOM for readers and that kind of thing. - -56 -00:17:40,100 --> 00:17:47,060 -Scott Tolinski: Yeah. So okay, so even within SVG, it's just these are all paths, each letters that don't path. Yeah, yep. - -57 -00:17:47,090 --> 00:18:09,540 -Unknown: If you get in there and inspect the game, you'll just see like a bunch of SVG s for each character on there. And then also, there's kind of this like typewriter effect, where if I'm saying hello, you'll see that the you know, the text color atll kind of reveal one at a time. It's just SVG is like, you know, CSS visibility popping in and out. So pretty simple stuff. But it when you put it all together, it feels like a game. - -58 -00:18:10,070 --> 00:18:23,730 -Scott Tolinski: That's amazing. I mean, what you have is that even though there's simple solutions, they're like really smart solutions to all of this stuff. Where those are those svgs is with those all created with this a sprite as well or is that? - -59 -00:18:23,910 --> 00:19:13,310 -Unknown: Yeah, yes. So a Sprite. Basically, the workflow for art was created in a Sprite. And then it the time of this recording a sprite doesn't really have any SVG export support. And so I would export it as a PNG and then pipe it into Daniel Shaw made this amazing code pen that I have bookmarked. I use it almost every day. And you basically can drag a PNG into it. I'll send you guys this link to you drag a PNG into it. And then using similar magic, it will give you out SVG of what you just dropped in. So pixelart, I basically took every character and dropped it into this tool that he made and then copied the the SVG paths into the React code, and kind of like a reusable, if you mentioned like a reusable icon system kind of thing and react. It's basically that but their letters. Wow. - -60 -00:19:14,300 --> 00:19:23,840 -Scott Tolinski: This is really cool. Yeah, I'm so glad we had you on today. Have you ever noticed that like we have uneven amount of people from Denver on this show? I think it's because - -61 -00:19:25,140 --> 00:19:28,260 -Unknown: I yeah, I live in Denver right now. I yeah, I guess I didn't say that. - -62 -00:19:28,979 --> 00:19:33,080 -Scott Tolinski: Yeah, I don't people that people aren't really from Denver West. It's a very transients. - -63 -00:19:33,080 --> 00:19:34,850 -Wes Bos: So if we just go to Denver, - -64 -00:19:34,890 --> 00:20:28,650 -Unknown: yeah. So my wife and I moved here. A year and a half ago, I guess, from St. Louis, Missouri. We just we kind of like grew up in St. Louis spent our whole lives in St. Louis had never left St. Louis and we're like, you know, it's time for a change. We're gonna we're gonna move somewhere and just from traveling around and exploring different cities we visited my brother happened to live here in Denver, too. And so we were visiting him we're like, man, Denver's awesome. I had never come here as a kid like for vacations and stuff, we'd always go to the beach in Florida or whatever. So I've never really been to the mountains never been to this area. And so we just kind of fell in love with it and decided to move here. And yeah, that's the thing is like, a lot of so a lot of people have a similar story where a lot of people have moved here and people that are what they call it, Colorado natives, you know, born here. Quiet. And now there's all this traffic and stuff. So yes, I'm part of the problem. I'm also - -65 -00:20:28,650 --> 00:20:47,840 -Scott Tolinski: part of the problem, we moved to here three and a half years ago, and from Southeast Michigan. So Midwest to Colorado to Denver, it's very common thing. We've met so many people who are also Midwesterners, or anybody who's come here, and it's just like, I don't want to leave. And now, I'm sorry, natives. I'm sorry, every single one of you, - -66 -00:20:47,880 --> 00:21:01,140 -Unknown: right? Well, that's what's so funny, because I think something that really drew us here was that people are so welcoming, because there are so many people that you know, have gone through the same thing. And so although it's a very cool place, we're really happy here. I'm excited to see you know, where we go with it. Cool. - -67 -00:21:01,170 --> 00:21:15,000 -Scott Tolinski: Yeah. All right. Well, let's get back into the game stuff. But really quick, before we do, let's take a quick break to blast off to one of our sponsors, which is Log Rocket. I know that was - -68 -00:21:15,300 --> 00:21:18,590 -Wes Bos: pretty good. No blast off to sponsors get I like it. - -69 -00:21:18,749 --> 00:22:36,360 -Scott Tolinski: Yeah, okay, we'll use it. Log Rocket is a longtime sponsor over here at syntaxin, they're going to make solving some of your bugs absolutely painless. Because a lot of the times what we work in when we're trying to solve bugs, is trying to sort of work in an environment that we can't necessarily reproduce Exactly. So you're just sort of going off of, you're going off of error logs, you're going off of what your users are saying you're going off of maybe potentially, you know, a service log or something that somebody had submitted. But what you don't get is any sort of visual understanding of what happened for the user themselves. Besides what they've told you. Now Log Rocket changes all that because what they do is give you a pixel perfect replay of exactly what the user saw. When they did, It even gives you things like your Redux store at any given point in time, your network activity, your console login errors, so you can scrub through this video of what they did, where they clicked. And you can get their network requests, console logs and errors right there in front of you. It works with all the platforms, you know, and love from any front end framework you possibly imagine to some of our other sponsors like Sentry, that categorize and log your bugs. So you're going to check out Log Rocket at Log rocket.com, forward slash syntax sign up, they get 14 days for free, check it out. - -70 -00:22:36,840 --> 00:23:05,160 -Wes Bos: All right, let's keep rolling with this. You talked about how you've made the sort of the, the PNGs and scgs, and whatnot, but the actual like animation, moving someone from one place to another, maybe we should explain a little bit like the the whole premise of the game is that you're a developer and you walk to the coffee shop, like you said, and you walk around the thing, and you have these little battles. And there's a lot of animation as part of walking and doing the battles and whatnot. Like how is that all done? Is that CSS or using library? - -71 -00:23:05,400 --> 00:25:02,730 -Unknown: Yeah, yeah, basically, it's all CSS spreadsheets. And so when you see a character on the screen, you're actually seeing one of 16 frames of that character. Again, a lot of fancy div crap, fancy, right, just cropping divs, where you see, basically each each character is like a parent div with an underlying spritesheet. And then as you are moving around, we're utilizing CSS has this easing function called steps. And so as you're walking the characters kind of leapfrogging under the hood, to show like frame one, frame two, frame three frame, 41234, just like that. And then the end result, when you only see one of those frames at a time looks like they're walking. And so that that does like the the movement of the character itself, but then to actually move the character to a different cell. It's just a simple kind of x, y change, a lot of like CSS transforms to just smoothly move something to the next space, we are using a requestAnimationFrame loop to kind of keep everything in sync rather than relying on something like timing. Okay, yeah. And so every, like, every character on the screen kind of operates in that same loop. Yeah. And yeah, so you just, you know, you as the, as the player, you hold the right key down, the character starts moving to the right, or the left key down, the character moves to the left. And then to do that, we're also moving the map behind you in the opposite direction. And that's kind of what creates that like camera effect, where, where the frame is centered on the screen. But then as you move, it kind of feels like you're walking through our world because the world is moving behind you too. Huh. And that came like, I don't know if we said it, but we started this game in 2015. So it's been three and a half years. Well, more now. But by the time it came out, it was like three and a half years of constantly iterating on ways to do this. There's a million ways to do it. It's I don't want to sound like this is the way but just going through a lot of trial and error and experimentation. Like That's kind of the method that we ended up shipping in the final game. - -72 -00:25:03,240 --> 00:25:12,060 -Scott Tolinski: It's so impressive. The whole thing is so impressive on this lips thing is nuts. Yeah, that's how Twitter does their little animation, when you click the heart is really that - -73 -00:25:12,060 --> 00:25:22,920 -Wes Bos: thing. Yeah, I didn't know about this. So you can like transition from one thing to another, but instead of it smooth, yes, doing smoothly or busy a curve, it just goes. - -74 -00:25:24,480 --> 00:26:07,230 -Unknown: Yeah, and it's nice for like the designer's point of view, because you can design the the animation in like an animation program, and then just export the end result as a file and then basically just drop it in. Like in our case, we use react, you obviously don't have to use react, you can use whatever you want. But we have this nice reusable react component where you drop in the spritesheet and tell it how many frames are there. And then it will just handle the, you know, the animation for us. And that's used all over the place. Almost every piece of animation in the game uses that technique. It's pretty simple once you wrap your head around it, but it's really effective. And it looks just like the games that influenced us as kids like the games, we wanted to create one like, and yeah, so that that's worked really well. - -75 -00:26:07,320 --> 00:26:21,510 -Scott Tolinski: So I have a question about performance. Did you ever run into any major performance issues? Were there things that were like really locked you up at any given point? And you didn't know how to proceed? Or wondering if this was the right solution? Or was it smooth sailing in that regard? - -76 -00:26:21,540 --> 00:27:22,740 -Unknown: Yeah, part of the many years of iteration was kind of constantly discovering, as the game grew. And we're trying to do more and more with it, that the performance started to suffer here. And there, a lot of that was learning to consolidate loops. Like at one point, every character on the screen had their own loop. And so we did kind of a big refactor to turn it into, you know, just one shared loop that everybody would use. And then, like, certain optimizations to turn people on and off if they're not visible on the screen, so that you're not wasting time. Yeah, like, we saw varied results, right, like on most of the time, you know, I use like a fairly modern MacBook Pro. And performance is good. But then I'd like go over to my parents house and fire it up on their old like PC laptop. Gosh, this isn't right. I have different browsers to wood. I guess we'll get into this later. But we ended up shipping it on electron. And so yeah, kind of our cat browser is chromium under the hood. But at the time, you know, you can play the web demo in any browser you want. And you we definitely see, you know, certain browsers would handle it better than others. And I - -77 -00:27:22,740 --> 00:27:42,960 -Scott Tolinski: guess that's the beauty about shipping in electronics, you get to control that environment a little bit more than you could just saying here Not to mention, you can bundle it along those lines, like user user states and saves. are you saving those just as files or something via electron and the node and electron? Or are you doing something specifically? - -78 -00:27:42,990 --> 00:29:20,880 -Unknown: Right, exactly. So basically, the nature of well, first of all, the nature of react, first of all, is that components are hydrated from data somehow, right? So we can take the, the state of where the user is out right now, and then lock it away somewhere. And then later, you boot up the game ganda resume, we just pipe that same day at a back end, and you were right back where you were. And so that's definitely a nice thing. It turned out to make the saving and loading thing pretty easy. But yeah, you're exactly right under the hood, the game kind of has an environment variable that knows, am I the web version, or am I the electron version. And so when we run the Save function on the web version, it'll basically just write something to the local storage. So you still have it. Previous and previous demos of the game, we went through the whole route of having like a Firebase server where you'd make an account and login, and then your data would persist that way. Which is cool, because you could pull it up on different devices. And it wasn't, you know, as fragile as local storage. But we ended up getting away from that just when we decided to pursue steam and releasing it that way. And yeah, but anyway, on the Yeah, on. So electron will save a file to your machine, electron if to those who aren't familiar, it gives you this nice like instance of chromium that runs only your code, while it also gives you this little Node JS environment. So you can run back any kind of code. And yeah, so we just fire off basically like hitting a local API or something like that. You just fire off a call. And then it saves the JSON file to your machine. And then later, when you come back and boot up the game, there's a another one that looks for any existing JSON files, and then you cool you're back in business. - -79 -00:29:20,940 --> 00:29:24,900 -Wes Bos: So there's no server side aspect to this at all, like even - -80 -00:29:25,260 --> 00:29:26,820 -Unknown: the analytics stuff. Oh, - -81 -00:29:26,850 --> 00:29:36,270 -Wes Bos: yeah. But like, do you do ever send data outside like, dude, keep? My friend has a game and he keeps track of how many, like bullets are sent in like crazy stuff like that you can do with Google Analytics. - -82 -00:29:36,300 --> 00:30:10,200 -Unknown: Yeah. So we're not using Google Analytics specifically. But we do have a little bit of an analytics layer that basically just sends message off to what messages off to one of our servers, and it's completely anonymous. It just tells us stuff like, which battles are super hard. What like how far are people getting into the game? Where are they playing through to and stopping. We'll see like the breakdown of wins. And losses in the battles and so we'll see like a battle start to go read read read read read like this battle might be too hard because X percent of people are rage quitting after it and that was yeah. - -83 -00:30:10,710 --> 00:30:13,230 -Wes Bos: Oh yeah, that's that's really cool. - -84 -00:30:13,260 --> 00:30:33,270 -Scott Tolinski: That's this is so fascinating Yeah. And it's funny that you it's it's really interesting they did it just via like loading JSON files for those users dates because we I mean we do that same technique in my like beginner electron course you can learn that in like 10 minutes just writing a file and loading the file on unstart. That's just so it's so great, right? Again, I - -85 -00:30:33,270 --> 00:30:41,460 -Unknown: think it gets back to like, under the hood, it's really the same approach is making anything else on the web. It's just some of the visual stuff that makes it feel like a game. - -86 -00:30:41,910 --> 00:30:54,450 -Scott Tolinski: Some of the things that impressed me the most I was looking into this for like the level editor. And it from what I read, you said that all of the levels were created with the level editor itself. Is that true? Or am I making them? Yeah, no, - -87 -00:30:54,450 --> 00:31:24,300 -Unknown: you're totally right. So I think I mentioned before, we have a different repository that is just the map editor. And so things like constructing What does this person say when I talk to them? What if I've already completed this task? And then I talked to them? What do they say after that all of that's done in this kind of nice visual editor, for one to keep it nice and maintainable. Because it's, the game is just like working off a bunch of JSON under the hood, that editor is a glorified JSON creator, we're just making this really complicated object of like, what should happen when - -88 -00:31:24,930 --> 00:32:27,930 -Scott Tolinski: I'm doing something very similar right now even just an interface where it's a, it's just a series of forms that are crafting, for the new like courses platform that we're in, I mean, it's like courses, right? It's just a series, you learn this one, then you learn this one, the latest one, we have a nice little like Mario overworld stub map connecting everything. So I just drew an SVG path through the center of each one. But the whole thing at the end of the day is just saving everything to a basic JSON write, you can load that up and create essentially a visual path. And this, if you if you anyone listening hasn't seen this or anything like that, besides just checking out the game, we'll post a link to this blog post in the show notes. But juror is a blog post here about his editor. And it's so cool, you have to get a visual aspect on this, you have to get your eyes on this thing, because it's all react. And even though it is a glorified JSON editor, it's amazing. And this just sort of like blows my mind of the stuff that people are able to create with this, this web tech, I'm like, so inspired by looking at all this stuff. - -89 -00:32:28,230 --> 00:33:07,200 -Unknown: Yeah, that's awesome. Like from the beginning, we knew that we wanted to make a really long Well, it didn't turn out that long, it takes about average person completes it like six hours. But Originally, it was like an eight hour game. And I'm not gonna write all that JSON by hand, very error prone and not very creative, kind of slow and sluggish. And so like from day one, we need some maintainable way to add content to this. It's also kind of cool because someone that's not technical could get in and make their own levels and add their own content. So if we wanted to do the user generated content kind of thing we could, we didn't end up going that way. But it's nice to be set up to do that in the future if - -90 -00:33:07,200 --> 00:33:45,150 -Scott Tolinski: we wanted. Not only that, but you now have a like a working editor in case you want to even change the art style, change the theme, change the game or whatever, you have this editor that you could probably use and retrofit into any other type of game that uses a similar sort of like tile tiling set or use case editing is just superduper. Cool. Another thing that's superduper cool, this is week transition is getting paid, we all like to get paid. I'm sure drew would love to get paid for making this game. So go by his game. But in addition to that, you want to get paid. So you want to make sure that your invoices and everything are sent viewed and everything correctly. And for that you're gonna want to check out fresh books. - -91 -00:33:45,270 --> 00:34:36,540 -Wes Bos: Yeah, I'm gonna do this ad read. And just Scott and I right before this podcast, we use fresh books to figure out, we're like, hey, did one of our sponsors pay us yet? I said, I don't know. Let's go into fresh books. And just that ability of like, I don't have to track down like 80 emails and pieced them together and figure out if they sent a check and go into my bank account. It's like, No, you just go on Freshbooks and you take a look at your invoices, and you can see if they paid it, or if they didn't pay it. And it's that simple. I love fresh books. Obviously, they do a lot more cloud accounting stuff than that, but that's the one I'm highlighting today. If you want to sign up for fresh books, please go to fresh books calm for slash syntax, use syntax in the How did you hear about a section that's gonna get you a 30 day unrestricted free trial? well on your way to billing and tracking everything that's going on as your business. Thanks so much to Freshbooks for sponsoring. - -92 -00:34:37,050 --> 00:35:00,650 -Scott Tolinski: Cool. So I think the last major aspect we want to talk about is and we've talked a little bit about this before already by bringing the fact that it was shipped to electron so to say, but I'm interested in the process of publishing this game, getting it wrapped up getting it ready to go for Steam, and like also, how do you handle updates through Steam? Those kinds of things are Yeah, seemed like giants. To me, - -93 -00:35:00,650 --> 00:38:06,480 -Unknown: yeah, totally. And there are definitely mysteries. We've learned a lot in the past few months of going through this sort of painful process of doing it. But yeah, yeah. So first of all, we knew that, like, we had a lot of fun releasing these demos to code pen and in our own website and stuff as a web thing, but kind of earlier this year, we made the conscious decision that we want people to play this and so we need to go where the gamers are. And and while the code bend community is awesome, and very supportive and cool. They're like that, while they appreciate the game, there's very much makers themselves, and not necessarily the people that would spend eight hours playing a game. And so yeah, so we made the decision to go to steam. And so which led us down the path, like we need some way to wrap this so that you can open it as an app on your computer and have like this, this tangible thing that you can buy and download. And, yeah, so so that is what led us to electron electron, if you haven't used to before, there's a pretty straightforward process where under the hood, kind of the root of your project is an HTML file in that HTML file will execute whatever code just just like Chrome would, and then it opens that web page and your nice little like private instance of chromium, where you've got the same dev tools available to you. And you just feel right at home. When you're done making your edits, you basically run a build command. For us, it's NPM, run electron builder. And then that will create the the final like dot app on my Mac machine, electron exports to Mac, Windows and Linux. And so even though I'm a Mac user, I can still create Windows versions and Linux versions directly from my Mac. And so we just run the command to build all three of those. And then you go through a little bit of initial setup process to create a developer account with steam, you do some back and forth on taxes and business stuff and sign some like NDA with them around money and all that but but at the end of the day, once everything is cool, they give you access to this uploader program where then we can go in and upload our our three versions. Right now we're only on Mac and Windows, we do have a Linux version out, we've just had a hard time testing it so so it's not up there on Steam just yet. Yeah, so you upload your versions of your game. And then they give you a little editor for your store page, which is that page that you see the trailer and the reviews and you can update the copy of your game and all that. And then you go some some like final final approval kind of process with them where they download your game and make sure it is the game that you say that you're that it is. And then eventually, yeah, you hit you literally hit a button on launch day, it says launch on Steam. And then it's live for people to download and buy and getting their steam libraries. When it as far as updating. If you make a change to the game, which we've made a bunch of them after our release date, you go through the same process of uploading the new versions, and then steam is smart enough to trigger like, hey, danger crew has an update waiting. So the next time a user opens the game on Steam, it'll just automatically download the new version. We don't have to do any extra code for updating or anything like that. It just works out of the box once you give them a new version, which has been really cool. - -94 -00:38:06,629 --> 00:38:15,440 -Scott Tolinski: Yeah, that makes it nice and easy. Okay, I was thinking it was gonna be way more complex and obtuse than that. But that sounds really, really not too bad. - -95 -00:38:15,710 --> 00:38:39,750 -Wes Bos: Is it allowed to, like I know, when iPhone like react and JavaScript for iPhone apps became popular, a lot of people were just manually refreshing the app themselves. Oh, yeah. And then Apple laid the ban hammer on that be like, you know, you have to go through our update process. You can't just they're just loading a web. Yeah, you could just go and fetch a new JavaScript bundle and refresh the page. Is that allowed? seem would probably have? Well, - -96 -00:38:39,750 --> 00:39:41,420 -Unknown: it's funny because they don't, they don't really do a lot of checking when you release an update. So theoretically, I could like go update the game to have all kinds of bad stuff. And I'm not gonna do this. But you could do that. And then I don't think they'd know, until someone complained about it. Whereas I think I'm not super familiar with like the iOS world, but I think someone like manually checked your update. Right? Yeah. And so the sneaky way of, you know, loading, like, dynamically pulled code into the final app. Yeah. Yeah. As far as like, is that allowed on Steam or not? I'm not really sure. Because I think there are quite a few. Well, I don't know how many. But we're not the only electron app on Steam, like people have been doing this. And so I'm not sure how different the like gaming landscape is on how many games out there are like pulling in this code. I know a lot of them are pulling in dynamic content. Like it's Halloween. So the Halloween level is out today. And I'm pretty sure that, you know, through just API calls and such without having to redo whole builds. Yeah, so that's an interesting question. I'm not really sure. - -97 -00:39:41,940 --> 00:40:13,860 -Scott Tolinski: Wow. So I have one more question about some of the game logic stuff. So you know, this is like a traditional sort of RPG style, where you have, you know, an action and that's taking place and then they're sure, like, surely some sort of percentages stuff to figure out out what the result of that is. So even with buffs and debuffs, and all that stuff was that aspect of it hard for you to tweak get right. Did you have any experience there before you went in this? Or was this all a learning experience? Yeah, so - -98 -00:40:13,860 --> 00:41:18,650 -Unknown: I wrote that part of the game seven times. The seventh iteration is the one that was final. And you can see a lot of early versions on code pen, like, my friend David made this really cool artwork of Voldemort verse, Harry Potter. So we had this like prototype of Harry Potter verse Voldemort, that was like my first experiment with having basically like react state, like I'm this character, I have hp of 100. And on this character, I have hp of 80. And if I use this move, it's going to subtract your HP by minus 10. And then we have all kinds of different moves that affect the state in different ways. So it started as like a nice, simple prototype like that. And then we got a little bit more fancier with things like statuses, like if I'm using the deadline status, then I get an extra turn this round. Or if I'm, we've got like, all kinds of programmers stuff in it. So someone gets furious. And so then they're like a troll. And then they're, they're like, they're attacked as more but then they're, they take more damage and like your focus, so you put on headphones, and then that makes your your attacks like way more accurate. All the developers stuff. - -99 -00:41:18,920 --> 00:41:29,010 -Scott Tolinski: I had a question about that, too. I just had, like, you know, the dev themes in this game are so prominent, like that must have been super fun to do. Like, that must have been a really great aspect of it for you, right? Yeah, - -100 -00:41:29,010 --> 00:42:06,000 -Unknown: just kind of piping like stuff that I've seen as a developer into the game. Like, there's a part of the story where you attend meetings in an office and you like, go through an interview process. And you you go to a conference at one point, there's just all kinds of stuff, there was just this fueled by just kind of funny, silly things, trying to poke fun and make people smile. Like that's the real point of it is to it's a little far, it's super far fetched. There's some really goofy stuff in there. But it's Yeah, it's all about like, as a developer, haha, there's a lot of humor in here. And hopefully, you know, if you check it out, and you resonate with some of the stuff, it'll like, put a smile on your face. - -101 -00:42:06,380 --> 00:42:22,410 -Scott Tolinski: It definitely did. For me, I think those are like some of the fun things. And especially, it almost feels like being a part of this community, like almost inside jokey kind of stuff, where, you know, it's the stuff you get from just being a developer. And it's just, I don't know, I just really loved it. So you know, thank you for those aspects. Yeah. Cool. - -102 -00:42:22,410 --> 00:42:27,810 -Unknown: I'm glad that that stuff's coming through. Because I was like, I don't know if anybody's gonna like this. No, yeah. - -103 -00:42:27,840 --> 00:42:48,710 -Wes Bos: No, it's I love that the just the developer, you see that even on Instagram like this, the I don't know what you call it. But just the idea of being a developer and just celebrating the things that are developer II, like, talking about array methods are having stickers like those are, it's such a fun thing to do it and put it into a game. - -104 -00:42:49,260 --> 00:42:56,070 -Unknown: Yeah, it's fun to work on. And there's no shortage of there's no shortage of that kind of content. And so already, we're kind of starting to work on the next one. And - -105 -00:42:57,390 --> 00:43:00,420 -Wes Bos: you know, can you put in Scotland ski character? - -106 -00:43:00,480 --> 00:43:03,960 -Unknown: I can't. Yes. Diaz in your podcasts in the game? - -107 -00:43:04,230 --> 00:43:05,070 -Scott Tolinski: Yeah, syntax. - -108 -00:43:07,020 --> 00:43:18,090 -Wes Bos: Oh, and then like me and Scott, like battle it out by like the cheesiest transition into a sponsor or something like that. Yeah. That would - -109 -00:43:18,090 --> 00:43:32,850 -Unknown: be great. That was it's funny. It's kind of worth mentioning, like, if you guys have been to, like a conference or a meet up before where someone's in the audience, and they have to, like, raise their hand and interrupt the speaker and tell the room how smart they are. It's like, yeah, down, but it's - -110 -00:43:32,850 --> 00:43:34,320 -Wes Bos: kind of like what if those - -111 -00:43:34,460 --> 00:43:43,500 -Unknown: two of those even though Yeah, so like, in a such a heated argument over code that they like, busted out their laptops and started going at it with each other? That was the real inspiration. - -112 -00:43:43,950 --> 00:44:21,540 -Scott Tolinski: That's awesome. We really, we were just joking about that. The other day, that was so funny. Cool. I don't have any more questions. This is awesome. I highly recommend everybody check this out. Because it's not only from a technical perspective, it's it's superduper impressive. If you think about it being react the entire time, it's gonna blow your mind. But just from a fun standpoint, if you like playing games, you're gonna check this out. This is my kind of game. I play a lot of stuff like this too. Anyways, it was always a Final Fantasy fan and stuff growing up. So just anything like that classic RPG is my jam. But yeah, so check it out. Again, we'll have the links available in the episode description was David availa - -113 -00:44:21,720 --> 00:44:26,340 -Wes Bos: store dot steam power.com Ford slash app Ford slash 1064690. - -114 -00:44:27,150 --> 00:44:39,630 -Scott Tolinski: Yeah, you can also just go to danger calm the danger crew.com that was the URL is referring to West Thank you very much. So Drew, do you know about the concept of sick pics? - -115 -00:44:39,810 --> 00:44:40,800 -Unknown: Yeah, of course. - -116 -00:44:40,830 --> 00:44:55,500 -Scott Tolinski: Yes. So we do we do sick pics on this show. For those of you who don't know where we pick things that we find to be sick can be pretty much anything whatsoever. And since I don't have mine ready just yet, Drew or west. Would you like to start with your sick pick? Yes, - -117 -00:44:55,500 --> 00:44:57,510 -Unknown: I can. I can go first. So my - -118 -00:44:57,540 --> 00:44:58,380 -Go for it. First of all, thank - -119 -00:44:58,380 --> 00:45:01,680 -you for letting me pick a sick pay. This is a this is this weird - -120 -00:45:02,909 --> 00:45:04,560 -Wes Bos: part of the show. Yeah. - -121 -00:45:04,829 --> 00:45:37,680 -Unknown: So mine is actually an Instagram account. This is actually already a pretty popular thing. So it's likely that people have heard of it before, but I find it hilarious it brightens my day every single day. It's called a Nathan w pile strange planet. You can just google strange planet Instagram, this cartoonists makes these hilarious little comics about aliens that are like observing humans and acting like humans. And it's hard to describe the humor, it's hard for me to articulate it, you just got to check it out and follow them on Instagram. If you're an Instagram user, and I promise they will make you smile every single day. I think he releases a new comic every day. So definitely check that out. - -122 -00:45:38,069 --> 00:45:42,840 -Scott Tolinski: I've seen his comments or his comics before, but I have not subscribed to him on Instagram. So I'm - -123 -00:45:42,869 --> 00:47:10,110 -Wes Bos: not seeing them on Reddit. I didn't realize him. I'm following now. That's right. Let's good. My sick pic is going to be a tweet thread. So couple, Peter, and it's a 40 part tweet thread where I go off and rant. Oh, something you're gonna like no, it's uh, I don't know. But a month or two ago, I sick pick the Logitech MX Master MX two or MX two s master something like that. It's a new mouse that I got. And I've been loving it. And I've spent some time after like 10 years with the Magic Mouse, I spent some time sort of configuring it. And just like on a month or two later, I finally was like, Alright, I'm happy with my config. I'm happy with all there's like 40 buttons on it what each of the buttons do. And then I tweeted it out because a bunch of people are asking, like, what config do you use? And then the replies this we thread just totally blew me out of the water with much better configs to do because there's like buttons that you can have gesture. So if you're pushing the button, you put you move your move up, then it can like raise the volume or switch nap or you can do specific settings in a specific app for that mouse. It's unreal of what you can do with it. And the the reply says right? It's not my tweet, it's the replies that are actually the interesting part. So I'll link up the thread just go in and read through all of the the different replies and see what people are doing with their MX Master mouse and how they are configuring it. It's pretty cool. Cool. - -124 -00:47:10,110 --> 00:48:21,810 -Scott Tolinski: And I think pick is going to be an application that was a sick pick a long time ago, maybe like one of the first or second or third episodes of syntax. I'm just picking figma again, because I absolutely love and use figma. And the reason why I'm sick picking is because they recently within like the past two months or so I've released plugins for figma which is like always sort of the thing that was like oh, suppose gauchos plugins ball, okay, it doesn't work on most computers only works on Macs. So figma is the sort of relevant for this episode because it works in your browser, just like built with web tech. And it now has plugins. So you can add plugins, not only can you build plugins yourself, but it's just so super cool that plugins have just sort of come about in the past couple of months here. And there's already just about a billion of them. So I'm really excited diving in. I was thinking about doing a little video series about maybe exploring some of these plugins, so I might I might do that. If you're interested in that. Let us know. But yeah, figma figma.com. It's my favorite tool. I absolutely love them. If you watch the tutorial videos, you might hear my voice a little bit because I liked it so much. I did some of their tutorials for them. So, but yeah, that's my stick pick. I don't know anything else. Shameless plugs. Drew, would you do you have anything that you'd like to shamelessly plug in? I - -125 -00:48:21,810 --> 00:48:46,830 -Unknown: can take a stab at a shameless plug thing. Yeah, so danger crew. It's a top down RPG about being a developer at a company. So if you if you grew up playing like some classic RPG from the 90s, and you'd like goofy programmer humor, considering Check, check it out on Steam. And if you do happen to check it out, please consider leaving us a review. If you like it, the reviews a small action that really goes a long way. So cool. - -126 -00:48:47,010 --> 00:48:50,100 -Scott Tolinski: Yeah, please do that. Wes shameless plugs. - -127 -00:48:50,220 --> 00:48:55,260 -Wes Bos: I'm going to shamelessly plug my Instagram bow for I switch it up a - -128 -00:48:55,260 --> 00:48:57,810 -Scott Tolinski: little bit expecting it to be all of my courses is - -129 -00:48:57,840 --> 00:49:24,300 -Wes Bos: Oh my God, that's I shamelessly plug all the same thing every week. So instagram.com forward slash West boss, equal parts coding, cooking in kids, food coding, all cuz sounds coding, cooking and kids. So if you're interested in any of those things, join me there. It's kind of fun. Did his Instagram seems to be a lot less loaded lately than Twitter is so it's kind of a fun little retreat. - -130 -00:49:24,900 --> 00:49:27,540 -Unknown: Food pictures, man. The food pictures are just amazing. - -131 -00:49:28,080 --> 00:49:33,930 -Scott Tolinski: I like cooking up some nice stuff all the time. Totally jealous and about all your stuff. - -132 -00:49:34,350 --> 00:49:39,930 -Unknown: Jay, what is the word? TJ? You've been TJ and TJ? - -133 -00:49:40,080 --> 00:49:51,660 -Scott Tolinski: Yeah. And if you were if someone was at Trader Joe's that'd be TJ and that they were at t J's. So I'm going to shamelessly plug what is the day of the release of this course. Let - -134 -00:49:51,660 --> 00:49:53,430 -Unknown: me check it out September 9, - -135 -00:49:53,460 --> 00:50:41,670 -Scott Tolinski: I think September 4. So before they get ready to pay the price we are releasing on August Is 31st advanced Gatsby and Shopify? It's a headless e commerce course. That is the follow up to e commerce, or Gatsby e commerce that came out last month. And we build a, like a shopping cart from scratch. We use all sorts of really cool stuff. I mentioned before that we're using Apollo, I'm sorry, we're not using Apollo in this one. I changed it up a little bit midway through. But we are building our own shopping car. We're doing all bunch of custom stuff with coupons and interface stuff. And it actually looks nice. So we're building a whole ecommerce store with Shopify. And Gatsby. It's really super cool. Check it out at level up tutorials.com forward slash pro sign up for the year get 25% off. That's all I got. - -136 -00:50:41,850 --> 00:51:09,270 -Wes Bos: All right. End of the show. Thank you so much for tuning in. Thank you so much, to drew for coming on. And yeah, thanks for talking about this. I think our mind watching this episode, it's so cool. And I was playing that game. Just trying to be like, I like I try. I wish that you could inspect element in steam, because I think that'd be kind of cool to like, see it, but I'm trying to like guess like, Oh, that's a div that's Canvas, like, - -137 -00:51:11,310 --> 00:51:16,140 -Unknown: on the web, too, if you want to get in and inspect and judge all of our code. Oh, I'm - -138 -00:51:16,140 --> 00:51:26,220 -Scott Tolinski: gonna do that. I'm not gonna judge but I'm gonna inspect the life out of it. Because I really want to make an Ogre Battle 64 modern version, because it's my favorite game ever. That needs to exist. - -139 -00:51:26,550 --> 00:51:45,900 -Wes Bos: The demo is at play. The danger crew.com you can check out and I guess there you can inspect element. I'm gonna have the React Dev Tools open a little bit later today. That's pretty fun. Dude. That's it. Thanks so much again, and we will catch you on Monday. Peace. You can say peace true. Oh, - -140 -00:51:45,900 --> 00:51:46,770 -Unknown: peace. - -141 -00:51:46,800 --> 00:51:47,910 -Thanks for having me. Here we go. - -142 -00:51:50,100 --> 00:51:50,880 -Wes Bos: So that's it. - -143 -00:51:52,830 --> 00:52:02,580 -Unknown: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax177.srt b/transcripts/Syntax177.srt deleted file mode 100644 index 58cb92660..000000000 --- a/transcripts/Syntax177.srt +++ /dev/null @@ -1,160 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott l Tara. Totally ski. - -2 -00:00:25,950 --> 00:00:58,400 -Scott Tolinski: Whoo, welcome to syntax. on this Monday tasty treat, we're gonna be talking all about what it takes in some of the pitfalls, the classic pitfalls of moving from PHP to node to very popular server side languages. And I'm sure this is something that a lot of you have done at some point. And a lot of you may be doing again in the future, or perhaps you are doing this currently, my name is Scott Toland scam, a developer from Denver, Colorado with me, as always is West boss. - -3 -00:00:58,470 --> 00:01:34,020 -Wes Bos: Hey, everybody, I'm excited to talk about this. I think it's kind of a cool episode, I even asked on Twitter, like if you had learned node after PHP. And this is not to say that you should move from PHP to node. But this is just I know, there are a handful of people who have made that switch. And it's a pretty big like paradigm, I think, a big paradigm switch. And there's a lot of like gotchas and things that you maybe didn't totally understand. So we're going to attempt to detail what all of those are. And even if you are no developer, there might be a couple clarifications for what this beast of note is. Yes, absolutely. And - -4 -00:01:34,050 --> 00:03:40,860 -Scott Tolinski: today's episode is sponsored by a company that will aid you very, very well in your transition to learning anything new. Because obviously, if you're going from PHP to node, you're going to be making a ton of mistakes. So you'll want something to capture all those mistakes and tell you what you're making. In case there's anything in production. And of course, I'm talking about century and you're going to want to head over to century and century.io. And you're gonna want to subscribe using the coupon code, tasty treat all lowercase all one word, you're going to get two months for free. I have a I want to talk a little bit about briefly, I have successfully used Sentry to squash that bug that I was talking about. It was very, very difficult. But luckily, Sentry really gave me a complete understanding of the things I needed to have. So here's a little background, I had this bug that was coming about. And it was happening intermittently, maybe about 10 years users or so we knew the exact qualifications for this bug to happen. But we could not reproduce it ourselves. And it was driving us absolutely bonkers. Because we couldn't reproduce it was sort of like shooting in the dark. That said, because I had century here was like a little flashlight on the top of my helmet, allowing me to navigate the Cave of this bug. And it really, really helped us out so much so that we were able to finally solve it. So thank you very much for century for making my life that much better. So head on over to sentry.io Sign up today, check it out one of my very favorite tools and a central part of my workflow in general. So PHP, I think this might be real the first time that we've spent some time talking about PHP for any extended point of time outside of WordPress. Yeah, show. So I'm interested to get into it a little bit. It has been a decent amount of time since I've written PHP code at this point, which is not not saying anything about PHP, specifically, just that that's where my head's been at, you know? Yeah. And I was never the best PHP developer outside of any of these other frameworks, Drupal or WordPress. So I'm really interested in in some of these things, and some understandings about moving from PHP to node and what some pitfalls that people generally have. - -5 -00:03:41,100 --> 00:04:29,490 -Wes Bos: Yeah, so the first one we have here is that servers need to be started and babysat and restarted when the app crashes. So this is kind of not true. But generally, when when people are using PHP, it comes along with nginx, or Apache comes with the server. And then if something breaks, like, like one of your scripts goes awry, and it doesn't work, you can just refresh the page or the next person that goes to that URL is not going to see the server falling over. But with node if something crashes, if if your node process quits, that's it, you have to actually start your server over again. And that's why people use things like I personally use forever. And most recently, I've switched over to pm two. And what that will do is it'll watch your process. And if anything breaks, it will try to restart the process for you. - -6 -00:04:29,790 --> 00:05:45,870 -Scott Tolinski: Yeah, which is definitely one of those things that people hit very early on the first time they have a crash, and they're just sort of like, wait, what, especially in a live server, you got to get into those things almost immediately when you're learning web development with node, and it's not something I had ever personally thought of with PHP. So the next one is, you know, PHP has been established for so long that some of the tools that are sort of just, you know, ubiquitous or they come along with it, maybe it's Apache or nginx or something like that, but there is a No file system based routing built in. So you can't just go ahead and visit the index file or something in your browser, you have to build the route yourself, you have to tell the request what to do. And you have, I remember, this was like a big, weird thing for me. When I first picked up node, I went to like a node meetup. And we spent the entire meetup just like outputting, a Hello World from an index dot HTML. And I just remember thinking like, wait, why are people using this? Again, this is so so much work or so. So weird. This is one of those things that we typically many PHP frameworks, because that's really what you just went off of just done for you and not something you had to ever have to think about, especially if you're using Apache nginx, which you most likely were? - -7 -00:05:46,110 --> 00:07:01,260 -Wes Bos: Yeah, it's it's kind of interesting. And for that reason, I think that's why PHP is so easy to get up and running, where you could just sling an index j s. And if you want it to have a set a separate file that just did did something, you could just throw that on your server. And that's its own sort of process. And when somebody hits that process, it's up and running. Whereas node is lot I think, is the kind of overwhelming idea of this entire podcast is that note is a lot less batteries included, you sort of have to bring everything yourself to note including lots of language, because JavaScript, the language lacks what's called the standard lib, it doesn't come with a whole lot of software as conversely, PHP has this massive standard live, and you can get a lot done without ever having to reach for external dependencies. The other thing I also asked on Twitter, like like, what are some of the gotchas that came from switching from PHP to node? Pete Tasker is at p Tasker said, node is more building on building a server and PHP is working on a server. Same idea with learning code. Also PHP, you don't necessarily need to have a framework with no, you basically have to have express or happy or something like that to get anywhere half decent. I totally agree. Like we said, there's a lot less batteries included. - -8 -00:07:01,650 --> 00:08:16,800 -Scott Tolinski: Yeah, another one that we had was the functional programming concepts within JavaScript, in general, are not something that you would typically dive into, you're probably doing like, object oriented PHP or something. You know, me personally, I didn't know necessarily because you know, I come from a front end world. So whenever I was doing PHP, in general, it was so much of working within the confines of these different frameworks that have already existed, whether it's Magento, or WordPress, or Drupal, right, you're existing within their systems, you're not building it yourself. And then when I moved to node, and JavaScript for everything, even my JavaScript skills weren't exactly great when I first started. And one of the things that made me a better developer for both node, but JavaScript in general was learning functional programming. And even if I'm not doing strict, hardcore functional programming all the time, I'm doing functional programming to an extent for just about every single thing I do writing pure functions, using what's called immutability, those kind of things. These are concepts that I never even thought about once in PHP. And now it's become the key part of writing clean and good code for both not only my server side, but my front end code as well. - -9 -00:08:16,890 --> 00:11:43,500 -Wes Bos: Next one we have here and I would wager that this is probably the biggest sort of gotcha the biggest hurdle moving from PHP, and that is that JavaScript is mostly so synchronous, whereas PHP is mostly synchronous, yes. Or, like, JavaScript doesn't have this concept of threads. And really quickly threads in programming are sort of this idea of you go off and do a little bit of work and come back, when it's done, we kind of have that with like a web worker. But in general, JavaScript kind of just works that way with concurrency. Meaning that if you were to set off a fetch request, we're not just going to sit there and wait for that fetch request to come back before the next line comes, it will just fire it off, and then keep going with the rest of lines. And then when the data comes back or response comes back, then we actually deal with it with what's called a callback. And with PHP, everything is very synchronous, meaning it reads top to bottom. And if you do want to explicitly do something that is sort of a synchronous, you have to get into what are called threads. And that's probably true for a lot of languages where they don't have a sink await built in by default. So sort of getting over that mindset of everything is a synchronous, and JavaScript is a bit of a hurdle. But I think now with a sink await that we have here it's fairly simple to get up and running with that. The other thing that a lot of people said and I've found this myself is that on PHP, everything gets cleaned up on each of their quests, meaning that you sort of just like when you hit a hit a file or an endpoint or something in PHP, it sort of starts up a new process and you can have variables and things like that and then when when the request is sent, all of that is cleaned up. With node you, you have the possibility of having global variables or you can have state management or you can have memory. That's kind of a weird thing with I remember when I was first learning Xpress, I was using passport j s, and all of my logged in users would were stored in memory. And then when the process restarted, everyone got logged out. And I just couldn't figure that out. And I was like, oh, like, in No, you do have this ability to sort of like have these various. And there is like sessions and things like that in PHP, but everything sort of gets cleaned up with PHP, whereas node, you have to sort of think about that. And I've also run into many bugs. When that when I was first learning node where I accidentally had shared a variable from one request to another, where that's kind of hard to do, unless you explicitly do it in the PHP world, huh? What other things I'm just going to read these straight from lens Webber, which is Ph. R. Y said, multiple client requests exists in the same process. Hence, you bleed data over from one to another, if you don't stick to the context object religiously. in PHP, you store so much personal data and services, and it's cleaned up on every request. So that's just another good way of explaining sort of what we went through. Other things about that is that the JavaScript event lifecycle is funny. We've talked about this before, in quite detail on some of our like, our stumped episodes, which like, you know, how the JavaScript lifecycle is funky. And sometimes you have to await a zero second timeout in order to put somebody on the end of at the end of the lifecycle that's just much simpler, I think, in in PHP. So I think like, it's sort of like when learning react, there's a lot of gotchas that you sort of have to have to know when you do this stuff. - -10 -00:11:43,739 --> 00:12:07,680 -Scott Tolinski: Yeah, it's like the price of entry. To get into this, it's like, you have to now pay the Node JS troll tool to you know, get get through some of these things. It's just each platform. And each library or each anything is always going to have its own set of here are things that you just got to work through at some point or hit on those transitions, and maybe have a little bit of a stumbling here or there, but make you a better developer. - -11 -00:12:07,919 --> 00:12:38,490 -Wes Bos: Yeah. Last thing I have here is that dependencies are key in Node when I was doing PHP, and I think this has changed since then. But when I was doing PHP, sometimes you would have to go off to GitHub and copy paste a, like a wrapper or something like that. And I know that PHP has composer and things like that for installing dependencies. But dependencies are a way of life in Node so much that it's almost become a meme. That you have to install four gigs of stuff before you can even write a Hello World in Node world. Yeah, it's - -12 -00:12:38,490 --> 00:12:56,730 -Scott Tolinski: it's funny when Drupal moved over to composer I remember, I think a lot of people in the community were like, I don't know, necessarily get this. But like, now, if I was coming back to something like that, now, it makes so much more sense in a different context. Now that I've worked in this type of environment where that kind of thing is much more normalized. - -13 -00:12:57,599 --> 00:13:04,410 -Wes Bos: I still even remember doing like jQuery plugins, and you just download the zip, and you just then you just put it over - -14 -00:13:04,410 --> 00:13:10,980 -Scott Tolinski: it in your head tag, you just get it from an ABN Who cares if that CDM goes down at some point. - -15 -00:13:11,369 --> 00:13:33,570 -Wes Bos: I remember teaching, if this was even like six years ago, I remember teaching like jQuery plugins. And then people would people would have the hardest time being like, which of these 700 files in this GitHub repo actually need? And I'd be like, Well, it depends. I don't know. It's different for every single one is so much easier. Now. We just require the thing and call it a day. Yeah, - -16 -00:13:33,570 --> 00:13:43,170 -Scott Tolinski: I know. It is so much easier and so much different in so many ways. I can't imagine like I know people complain about the complexity of today. But come on, there's so many less complex things about today. - -17 -00:13:43,529 --> 00:13:53,490 -Wes Bos: Yeah, yeah, absolutely. It's it. We should do. I think we've talked about this before, but would you do a show on like the olden have we even done that? Have we did that? - -18 -00:13:53,969 --> 00:14:02,790 -Scott Tolinski: Like the olden days? I'm so disturbed sleep deprived right now, I could not tell you what we have done a show on? Because I am out of my mind. - -19 -00:14:04,080 --> 00:14:13,530 -Wes Bos: Oh, man, I don't think we've done it. But we should do an episode on like the way things used to be. For those young listeners, they can know how good they have it, - -20 -00:14:13,590 --> 00:14:15,090 -Scott Tolinski: get off my lawn episode. - -21 -00:14:16,020 --> 00:14:49,920 -Wes Bos: Awesome. I think that's Oh, one more thing I had here. JavaScript doesn't have keyed arrays only based on index that's just like maybe a programming thing where in JavaScript or sorry, in PHP, you can have arrays that have keys, sort of like objects do in, in JavaScript, where you can say like, if I have like a person, square bracket, middle name, that could that could be an array where you reference the arrays, middle name, property, whereas in JavaScript, everything is index base 012345. So that's it. Anything else you want to add there? - -22 -00:14:50,700 --> 00:14:52,260 -Unknown: I don't other than I'm happy. I'm - -23 -00:14:52,260 --> 00:15:11,520 -Scott Tolinski: not working in PHP anymore. For no reason other than I was just never very good at PHP. I think I probably could have been good at PHP. As you know, you, you know, you learn and whatever. But for some reason writing one like that a lot easier for me to get better at one language, even if node is very different from you know, client side JavaScript, it's - -24 -00:15:11,520 --> 00:15:12,390 -Unknown: still one language, I - -25 -00:15:12,390 --> 00:15:30,540 -Scott Tolinski: don't worry about all those syntax little things that I got to remember. My brain is not cut out for that. So yeah, I'm happy that I'm not writing PHP. But if you are writing PHP, that's cool. I'm sure. It's changed a lot and improved a lot. Even as versions of PHP have grown. It's gotten much better. So not a hater, not a hater on it. It's all good. - -26 -00:15:30,900 --> 00:15:37,200 -Wes Bos: Yeah, Scott's been very careful now, because he got no roasted for saying nobody uses Java. - -27 -00:15:37,439 --> 00:15:42,300 -Scott Tolinski: Yeah, I did get roasted for that. I also got roasted for saying anything about tailwind. - -28 -00:15:42,420 --> 00:15:43,230 -Unknown: Cisco - -29 -00:15:44,550 --> 00:15:46,590 -Scott Tolinski: is Yeah, I'm just gonna ride that line. - -30 -00:15:48,480 --> 00:16:40,260 -Wes Bos: That's great. That's it's one thing I like about our community is that they actually are fairly respectful. And I don't feel like anything comes from, like Angry place. I think most of it just comes from, like, I actually really love this. And I would love for you to love this as well, which is cool. If you have any thoughts on this, if you know both node and PHP, if you learn node after PHP, or maybe even the opposite way, tweet us at syntax FM, we'd love to hear what your sort of gotchas are. And we will retweet them. Cuz they're a, I was thinking this is a total aside, Scott, but I thought I would just bring it up right now. We should make like a retweet machine, where when people tweet us they're like, thoughts about an episode. Yeah, it will like go into some sort of queue. And then like the audience can like upvote ones. And then once they hit a certain certain threshold, they'll automatically get retweeted out. - -31 -00:16:41,340 --> 00:16:44,490 -Scott Tolinski: That dangerous and a lot of work. Yeah. - -32 -00:16:46,590 --> 00:16:47,880 -Wes Bos: Couldn't be abused at all. - -33 -00:16:47,910 --> 00:16:56,820 -Scott Tolinski: It could not be advised at all. Yes. But by all means, yeah. No, if you want to put that work in and you do not fear what could happen there. Go Go ahead. - -34 -00:16:57,030 --> 00:17:21,480 -Wes Bos: Thank you. It would be a fun. a fun way to use like a, like a queueing system or do like a note app that uses uses streams because Twitter has a Streaming API instead of just like a request API. I think that'd be pretty nifty. So maybe maybe coming to a YouTube near you. Alright, I think that's it. Anything else to add there, Scott? - -35 -00:17:21,959 --> 00:17:23,670 -Scott Tolinski: I got nothing. - -36 -00:17:24,180 --> 00:17:30,540 -Wes Bos: Cool. Well, thanks for tuning in and we will catch you on Wednesday. Please - -37 -00:17:32,430 --> 00:17:36,990 -Unknown: head on over to syntax.fm for a full archive of all of our shows. - -38 -00:17:37,230 --> 00:17:39,270 -Scott Tolinski: And don't forget to subscribe in your podcast player - -39 -00:17:39,270 --> 00:17:40,050 -Unknown: or drop - -40 -00:17:40,050 --> 00:17:42,180 -Scott Tolinski: a review if you like this show. - diff --git a/transcripts/Syntax178.srt b/transcripts/Syntax178.srt deleted file mode 100644 index 1f76c300a..000000000 --- a/transcripts/Syntax178.srt +++ /dev/null @@ -1,540 +0,0 @@ -1 -00:00:01,319 --> 00:00:11,010 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. Oh, welcome - -2 -00:00:11,010 --> 00:01:11,120 -Wes Bos: to syntax. Today we're gonna be talking about our process, hardware, software, everything that we do to record edit in hosts our courses as assigning, and we get a question probably every day somebody say like, Hey, what do you do. And we've done this sort of in the past on the podcast along with another show, but we don't have a definitive thing to send people to. And also, I think our processes have changed, they change over time, you're always tweaking the hardware, the software that your process for editing, things like that. So we are going to lay it out exactly how we do all of the stuff. And hopefully, it'll give you some tips if you are looking to do maybe build a course or your own or make some YouTube videos or things like that. Today, we are sponsored by Log Rocket that does all of your error and exception tracking and fresh books, which does all of your invoicing, expenses, things like that. If you are a small business or freelancer, my name is Wes Bos, I'm a full stack dev from Canada with me, as always is Mr. Scott to lidsky. How you doing today, Scott? - -3 -00:01:11,219 --> 00:02:43,830 -Scott Tolinski: I'm doing good man. My name is Scott Tolinksi. I'm the developer from Denver here. And we just bought a new car this weekend, which was kind of while Yeah, Courtney, unfortunately, was rear ended again. And although she was totally safe and everything, it was one of those things where the insurance company's like, Oh, it's gonna be you know, six grand to repair your car, which is, you know, okay, whatever, you know, the insurance will pay for it. And then that number just kept going up until they like, no, it's actually like 18 grand, and then they just a little bit. So it like took us like two weeks to even find out the car was totaled. So at this point, we're just like, well, crap, we got to go get a car now. And we didn't have a whole lot of time to do research or sit down and really think about it, she's got to go to work. So we just ended up getting a not what we intended on doing By the way, we just ended up getting a new rav4 hybrid, which, for the New Year of them, they're incredible. I couldn't believe how good this thing is it gets 40 miles per gallon as an SUV. It's because the hybrid it's so responsive, it's super peppy. The car has a ton of ridiculous features for the price, like the rearview mirror can be like a video. So instead of like a mirror, you have a video meaning that anyone can see the rearview mirror from any position. You don't have to adjust it to make it like correct. There's a lot of like little things like that, that you wouldn't expect to exist. Yeah, instead of a Toyota. And it has the Lexus paint color on it. So people have just been asking us is that a Lexus because it's like brand new model. people haven't really seen him around. Ah, it's not a Lexus. It was a it's Toyota. And I'm really impressed. - -4 -00:02:43,889 --> 00:02:47,850 -Wes Bos: It looks sick. It's got a gnarly grill on it. It's like like aggressive, - -5 -00:02:47,879 --> 00:03:20,639 -Scott Tolinski: got a gnarly grow. I was not a fan of the previous version of the rev for the looks, or like the power output or anything. We test drove one and I hated it. And so I was like really not interested in this one. Then we watched a Doug demuro video on it, and he loved it. So he had to go check it out or like, holy crap, I think we're gonna buy a new car. So we bought it and we're gonna hold on to it for a long time. it it's it's perfect car record. So yeah, that you know, that's an adventure. Um, that whole thing was an adventure trying to do it with two kids and all that stuff. So I'm sure you're aware of what that process is like. - -6 -00:03:20,669 --> 00:03:30,150 -Wes Bos: Yeah, yeah. Trying to like make major decisions or your children are screaming is very hard. Especially when like you're under the like, you have to buy a new car right? You have to get back on the road. - -7 -00:03:30,299 --> 00:03:34,979 -Scott Tolinski: Even like test driving, like figuring out like how to test drive a car with kids and stuff. It was tell Yeah, - -8 -00:03:34,979 --> 00:03:47,940 -Wes Bos: you can see how to put the car seats in. One of my least favorite things in the world is installing car seats. And we have the like, click Connect one, which they're like super easy to install, but it's just always miserable. By the end of that. - -9 -00:03:48,029 --> 00:03:57,900 -Scott Tolinski: I jam my my thumb in the thing this morning. It still hurts. You know, one of those fingernails. But yeah, that's pretty much it. You know, don't need to give you a whole update here. But uh, no, that's cool. - -10 -00:03:57,900 --> 00:04:05,940 -Wes Bos: Have you seen the Honda has this new electric car and there's no mirrors on it? It's just cameras. So cool. - -11 -00:04:06,000 --> 00:04:29,370 -Scott Tolinski: Yeah, it's not coming to the US it I want this car so badly. Because I don't do a lot of driving. I just zip around the city, you know, to drop the kids off at daycare. And this is little Honda. It's not coming to the US. I've already expressed my displeasure with that. But it's really super cool. Look it up. I don't know the name of it offhand. But it's a just do a google Honda electric car. It's got the cutest little face. I love it. - -12 -00:04:29,550 --> 00:05:28,200 -Wes Bos: I got to find it because the name of it is super interesting. It is the Honda he is what it's called. Yes, the Hyundai he Yeah, super cute. It's super cute. Yeah. Awesome. Well, um, let's say we get down into it. We are going to start with recording how do we record our courses? And maybe we should just say really quickly. So Scott and I how we make our money is that we record these web development courses showing you how to build stuff in web development. We both been doing it for years and years. And we sort of have honed in on, on what gear and our processes and things like that. So we're going to go through recording, we're going to go through editing, and then we'll go through how we actually host them up. We also have talked about our course platform. That's something I get all of questions about all the time. If you go to syntax.fm, and search for Stax explained, Episode 14, maybe we should do an updated version in a couple months. - -13 -00:05:28,200 --> 00:05:29,940 -Scott Tolinski: Oh, yeah, mine's changed a lot. - -14 -00:05:29,970 --> 00:06:59,070 -Wes Bos: I have some new updates on mine that I'd like to get rolled out first. But it's pretty good. People always ask me like, what is it that you're using as a WordPress plugin? Can I get it? Can I use it as well? So yeah, it'd be kind of fun to go into that. So first thing recording. Software wise, I use just a couple things, I use a software program on the Mac called ScreenFlow. And that does a pretty good job at recording your screen. It's aware of windows, it's aware of cliques and key presses. So if you ever want to do things after the fact, like zoom in on a key or on a click, or put a ring around where your mouse is, or do any of these After Effects, it saves all of that metadata along with the actual recording video. And I don't use that all the time. But I do find it helpful every now and then, because it actually knows, I also find it helpful because you can record your like multiple screens at once you can record an iPhone screen, you can record your webcam, and a couple times anytime I'm doing sort of funny stuff. Like I'm doing face detection or the drone stuff, I often need to record what I'm doing, as well as the the actual screen. So I've liked ScreenFlow I'm not super stoked on like ScreenFlow itself. There's I've got lots of qualms about it. But it's definitely the best thing that I have. And I also have zero ambition to learn something else just because like it works totally fine. For me. I'd much rather spend my time building more courses and working on stuff like that, then then switching software. - -15 -00:06:59,100 --> 00:07:11,280 -Scott Tolinski: Yeah. And at the end mean, if you haven't used a professional editing software before, I think you're not even before but like frequently, I think you are, you're better off because that is a pretty steep learning curve at the beginning. - -16 -00:07:11,310 --> 00:07:35,270 -Wes Bos: Yeah, it's funny because my wife needed to edit some videos. And they weren't even like screen recording. And I just gave her ScreenFlow Yeah. And she she was up and running. And then after, I don't know, after about a month or two, she's like, Okay, I need more like I actually need a little bit more control over this type of thing, because I'm not actually editing screencasts. And then she went and learned a new editor I forget, I think it's Premier Pro, something like that. - -17 -00:07:35,429 --> 00:08:01,200 -Scott Tolinski: It's funny that our tools and these like professional tools can be used for like, sort of different things like that, like I gave Courtney needed, like a very simple brochure for her work. She was doing it in like Word or PowerPoint or one of those. And I was like now here's a checkout figma just here's a figma template. And she was up and running in no time. She was like, Yeah, I can't believe how easy this is you can just click and drag things. And like, Mike Yeah, this is this is where it's at. So - -18 -00:08:01,260 --> 00:09:20,490 -Wes Bos: yeah, modern tools are the best seriously other software I use, I use something called Uber layer, which is actually a very old app. But it's been working for me for ages. And essentially what it is, is I I run my recording on my 4k monitor, and I only record part of my screen, so that I can export it to like a 1080 DPI, resolution. And in order to do that, I can't record my entire screen. And I actually prefer not to record my entire screen because I don't like getting things like tabs in OSX. Like when I first did it OSX had everything glossy and was like that dark gray color. And then as soon as OSX updated, it just makes my tutorials look out of date, even if the actual content in them is up to date. So I stopped recording as much of that as I can obviously like the URL bar in Chrome, I have to record and things like that. And sometimes chrome will update its look and then that sort of looks like it. But I like to record as much just actual text editor as possible. So it doesn't crowd the screen as well. So I built this thing in in sketch and it's just this like rectangle that I overlay on top of my screen. And then I drag my windows into that however it is that I want to put it I have little notches on it. I can I can rearrange them. A lot of people have asked like, why don't you use like a dv or something like that. So you can snap your windows, - -19 -00:09:20,580 --> 00:09:22,669 -Scott Tolinski: I was ready about to ask you that. Because Yeah, - -20 -00:09:22,710 --> 00:09:51,990 -Wes Bos: because Debbie doesn't let me get exactly how I want it to go. Like they give you the amount of blocks that you get or you can like you can customize it up to like a 20 by 20 blocks. And you can increase the the grid space and the offsets and the margins too, which is what I do. Yeah, I've done that. But it's just like it's it's like way quicker for me just to grab the window and resize it inside of my rectangle instead of like having to figure out which one to click and I know you can like save them with other apps and stuff like that but - -21 -00:09:52,620 --> 00:09:53,700 -Scott Tolinski: or with Divi. - -22 -00:09:54,409 --> 00:09:56,460 -Wes Bos: You can save your spots with Divi. Yeah, I'm - -23 -00:09:56,460 --> 00:10:02,730 -Scott Tolinski: gonna get on you about this because all I do is hit Ctrl R and all of that. I will snap into the the little window, maybe - -24 -00:10:02,730 --> 00:11:40,740 -Wes Bos: I should try it I get harass all the time people like why don't you do it, it's like because, yeah, like I'm and also I often will, if I'm if I'm doing some code that's very wide, I'll make my editor bigger and the browser smaller. And like I'm not always just doing the exact same setup for everything, it just kind of whoever it is that I want to, or I have the terminal that needs to go on the screen while things are running so that you click something in the browser and you see a log in the terminal. So I just move them around, it takes two seconds, never been a huge problem for me. What other things I have a 4k monitor, so I record at double the resolution. And that's not to say that everything is tiny, it's just that everything is two X, I don't export it at like, what is 1080 times two, I don't export it at 2160, export that I do export it at 2160, actually, and then I let Vimeo, which is my host, dumb it down to 1080. And that resolves in very, very crisp videos for the user. As well as anytime I need to zoom in on something, I can zoom in to two x and it's never going to look pixelated because I have those extra pixels available. If I need it. Other things that I do is I've got my editor here, my VS code, I zoom out the editor very, very, very high. So things like tabs and all of the like editor chrome gets out of the way. And then I bump up the font size really, really high. So again, we there's a space is so limited on a screencast. So I try to make the actual code as large and as visible and as clean as possible. So that's my software, you want to go into your software, and then we'll do hardware. Sure, - -25 -00:11:40,830 --> 00:12:09,210 -Scott Tolinski: yeah. So myself, where is this? It's so funny. Anyone who's listened to this podcast for any bit of time knows I'm changing stuff all the time, because apparently, I just have that amount of hyper activity. But over the course of levelup tutorials, I've used maybe like eight different screen recording software. So I'm currently using screen flick, which is a software that I wasn't using for a little bit. And then now coming back to, I jumped to I show you HD for a little bit, - -26 -00:12:09,210 --> 00:12:11,159 -Wes Bos: which that's a good one. - -27 -00:12:11,370 --> 00:14:43,380 -Scott Tolinski: It was good. But some thing happened in one of their updates recently, not recently, maybe like five months ago, and I would lose recordings non stop with it, here's what would happen halfway through the recording, my CPU would spike like crazy, it would spike all the way to the top, it would cut out my audio and then my audio would never come recording. And since I show you has latency and their audio monitoring. So like right now we're recording and logic and I have an earpiece in so I can hear my microphone to monitor it. But I couldn't do that with with I show you because it was delayed, and it would really mess up how I was talking. So here's delayed, but I couldn't do it. So therefore I would never know when the audio would cut out of the recording until I listened to it afterwards. And I was losing maybe hours and hours and hours and hours of recordings, I would send them to my video editor and he'd be like, Alright, this one doesn't have any audio after that midway point. And then I'd have to set up my code for you. It was just a total nightmare. So I'm really angry. I show you HD right now. And I'm not using it anymore. So I'm using ScreenFlow, which has been excellent. I also record at two x the resolution on my retina screen, but I do that specifically. Because I want 4k output. So I actually output at 4k. And so I'm I'm exporting at 4k and I'm uploading at 4k as well. So I'm not doing any zooming typically, it means to me I do I end up doing live via the browser or zooming in in Mac OS while I'm talking about it. So I don't do any post zooming. Let's see. So for config, like we had it, like you mentioned, I do use Devi and it snaps my windows up to the top into a recording space, I just do it with command R or no option or one of those, I also have an option C that puts one dead in the center of what would be the video recording. So like typically, my I don't know why I do it this way, just have my text editor has been full screen, my browser has been full screen. But my terminal I always like to have a little bit of margin around it. For some reason, I just like to have it be in the center with some margin. So I have a little command for that. I hide the menu bar and Mac OS which took a little bit of getting used to because you'd really like to have that menu bar up top but I hide it Yeah, for the same reason that you do. I don't really want one I don't want all of my tools that are up top like the one that shows how long the recording has been going on for and stuff like that. I don't want that in the video, - -28 -00:14:43,549 --> 00:14:48,360 -Wes Bos: or like the time and then you can see like, oh, that obviously took him 15 minutes to figure out. - -29 -00:14:49,080 --> 00:15:28,770 -Scott Tolinski: Right so I hide that menu bar. And it's been one of those things that took a little bit of getting used to but I had it all the time. Now it actually gives you a little bit of extra screen real estate because the 16 by nine area doesn't show the doctor Anyways, I don't even think or worry about the duck, or at least my usage of the doc, oh, yeah, I bump up my my font sizes in VS code, I zoom in on a browser occasionally, one of the hard things is bumping up the font size in dev tools, I do that, but I don't leave it bumped up. Like if I want to show something very specifically in the dev tools. I'll click over and then plus plus to show it. But I won't necessarily leave if they get really super crowded really quickly. And then you're not getting your show a whole lot. - -30 -00:15:28,799 --> 00:16:11,250 -Wes Bos: Yeah, so I've spent probably entire week on this trying to fix this issue. Because Chrome Dev Tools, you can write custom themes for it. And I was like, I'm gonna create a custom theme that just makes the text in the console big and everything else small. And at least last time I checked, everything in Chrome Dev Tools is done in sprites, and you cannot zoom them up, because it can't make the font size smaller on some things, because the sprites would goof it up. And I was so frustrated with it, I might be might be changed now, because they've gotten rid of a lot of their icons. And either imagine a lot of their icons are now SVG. But you cannot just zoom in the console part and everything else stays small, which is frustrating. So I do the exact same thing. Yeah, I - -31 -00:16:11,250 --> 00:18:23,700 -Scott Tolinski: like that. Occasionally, I was hiding browser tabs, but I stopped doing that, because I want the user to be able to see what tab we're on and look what window we're on. So I don't do that anymore. One thing that I do when, when I'm recording it, you know, my process is very non edit heavy. So to say. And non script based, what I do is I record a little bit, I know where I know where the end results gonna be. And I know the code we're writing. So I record a little bit and I talk about I talk about it, I do it I code. And I don't typically make too many mistakes. And then I pause and take a breath. And then I start the next section, I think about it a pause, take a breath, and then think about the next section. And we'll talk a little bit about more while I do that in the editing part of this. But that really helps me record these things without major issues or goof ups. I know if the code that I'm going to be writing is in my external monitor that I always have, like sort of a roadmap of where to go, right. Yeah, so I'm never getting lost and never like really goofing up in that sort of way. But that's pretty much it. I have some other stuff too. Software wise, I do 4k video intros that are animated video intros for all of my series, please, I have for like the past six or seven of them. For those of you don't know, I release a new series every month. So buy like 20 some videos, and they have a theme, they have a little card, they have a logo and this whole thing animates to start each video. Well, I create these using two pieces of what are not appropriate software for what I'm doing. I'm creating it in figma, which I guess is fine. So I make the original frame in figma. It's just a couple of layers. And then I use an app called principal for Mac, which is for interactive sort of prototyping, where you can click on things and drag things in whatever but principle for Mac added a 4k video output. And they have an auto mode. So I should do a tutorial on this because this process of refined and basically you just import a frame from figma. You have it the starting frame, the ending frame, and you basically just drag stuff around, you click a button and everything just sort of animates on. It's unbelievable. So I use principal for Mac to do all of my video intros. And it allows me to export as 4k making it one of the coolest apps in my workforce, it almost becomes like After Effects light. And that's exactly what I want. - -32 -00:18:23,790 --> 00:18:41,280 -Wes Bos: That's amazing. I need to check that out. Because I've I always feel limited by I used the ScreenFlow to do my intros as well. And I always feel limited by like what you can do, and it's pretty good. It's got all of your standard swoop in swoopo Yeah, but I sometimes I think I could do a better job of this. I just coded it in CSS. - -33 -00:18:42,080 --> 00:18:49,550 -Scott Tolinski: Right. And so mine allows me to do all custom easing curves, you can drag the points. It has a bunch of presets. That's great principle for - -34 -00:18:49,550 --> 00:18:50,490 -Unknown: Mac. Yeah. And - -35 -00:18:50,490 --> 00:19:12,050 -Scott Tolinski: you know, the the process for what I do is easy enough and quick enough. Like I have made a video intro for one of my courses in less time than what would be like an Instagram video. So you could watch the process of me making one of these within like the whatever the one minute limit or whatever it is on an Instagram video. It's pretty slick. - -36 -00:19:12,080 --> 00:19:14,360 -Unknown: That's really cool. You have to check that out. - -37 -00:19:14,489 --> 00:19:17,250 -Scott Tolinski: Yeah. All right. So let's, uh, let's get into hardware. - -38 -00:19:17,400 --> 00:20:12,830 -Wes Bos: Yeah, our hardware is I think largely the same. Now. When I first started, I used a Audio Technica 80 2020 and that was okay. But the biggest problem with recording is you've got your laptop that has a fan. You've got vibrations in as somebody types. You've got the annoying when someone breathes in, or has a sniffle and all of those things, drive listeners absolutely crazy. So I think between Scott and I were both like we want this recording to be as good as possible right out of the gate. Because we don't want to have to spend any time fussing with it after the fact we don't want to edit it. We don't want to spend a lot I'm in editing, we don't want the audio to sound garbage. And then we'll have to fix that after the fact, we just want it to like, come in nice and clean, do some light editing and then ship the thing off so we can keep making more content is it would you say that's true for you? Yeah, - -39 -00:20:12,960 --> 00:20:23,520 -Scott Tolinski: that's 100%. My, my thought process is any This is, the more prepared I am up front with everything, the less I'm going to have to do post or even a video editor or any of that stuff. So yeah, - -40 -00:20:23,640 --> 00:21:20,040 -Wes Bos: because that stuff takes so long and it's draining and it makes you not want to record stuff because you know, you're gonna have to spend extra time editing it. So for hardware, I use a Heil pr 40 mic, and on front of that I have a pop filter, which hopefully takes out a lot of pops. And anytime I have like a big wind gasp from my, from my mouth, that sits inside of a shock mount, which takes out almost all of the typing sounds. So the annoying thing with screencast is when people are typing the vibrations of that go up the microphone and you hear so you can mitigate a lot of that by just putting a T shirt underneath your keyboard. But a proper shockmount works really well. That's on a boom arm so I have just like a Heil PL two t boom arm I don't you don't get a crappy boom arm you will be frustrated. So yeah, spend the money on that. - -41 -00:21:20,060 --> 00:21:49,340 -Scott Tolinski: I then got a nice one. And I don't like it really what I really want what I really, really want is like, sorry, I just I would really want like a like a radio station one. And it'd be really cool came out of the ceiling pull it down at No, I don't know. But is this the sort of hurdle like spring system that exists in these is like inherently sort of weak? I got like a pneumatic air pressure one, or whatever. Oh, yeah. For my computer monitor. And it's like the greatest thing ever. And I would love to have that for a microphone. - -42 -00:21:49,380 --> 00:22:19,590 -Wes Bos: Yeah, it's like the the light at the dentist. They put that thing anywhere with one finger. Yeah, that would be pretty sick part of that one of the hardest things I have when coding is trying to put the mic close enough to my face, but not close enough that it can't see the keyboard. Because I need to be able to type that's uh, I haven't found a great like what I would love is the equivalent of a Heil pr 40 I'm sure this exists, but just like a Brittany Mike, like one that hooks onto your your ear? That I don't think that exists. - -43 -00:22:19,620 --> 00:22:30,270 -Scott Tolinski: No, no, because those mics, nearly the diaphragm is way smaller on those mics. Yeah, you're right, like, yeah, I mean, those are good for public performance. But for audio, audio, - -44 -00:22:30,360 --> 00:22:43,620 -Wes Bos: I've got it pretty good. I actually have mine upside down the way that I have it. And the reason why it's upside down, people always message me. It's because I need it to get out of my way. So you can actually see what it is that I'm typing. - -45 -00:22:43,650 --> 00:22:46,470 -Scott Tolinski: Yeah, upside down is the way to have it. That's how the pros do it. - -46 -00:22:46,530 --> 00:22:58,290 -Wes Bos: Yeah. That's how all the pros are pros. So that's how we do it. That gets piped into like a, I don't know, what do you call this DB x 286 s. It's a preamp processor. - -47 -00:22:58,320 --> 00:23:10,650 -Scott Tolinski: Yeah, it's a compressor, a limiter, excess eliminator. It might be a limiter. It has some very minor EQ stuff. It is a also a gate. So it acts as several things. Yeah, - -48 -00:23:10,739 --> 00:24:29,490 -Wes Bos: yeah, I actually was surprised because when I was at my cottage, I have this exact setup. But I never hooked up my preamp because I didn't have my guy name and set it up for me. And I was listening to the podcast, I was like that actually sounds pretty good. Considering I was in like a cinderblock room without my preamp installed, and it still sounded pretty good. So I think like probably 90 or 85% of it is the mic, and then a good preamp will get you all the way there. This thing's pretty cheap, I think it's a couple hundred bucks. And it just takes out a lot of the background noise like I can have my window open in the summer and a truck and drive by and that won't get picked up. I can have the air conditioning on and it will usually not pick that up. It just sort of takes out a lot of the others you have to you have to be eating the thing for it to pick up your voice. But that's that's good because then it doesn't pick up a lot of the sort of outside noise, which makes a low quality screencast. Or then it gets piped out of that into focus right to itu which is just a USB interface for XLR stuff. So you can plug a guitar something in there there is a focus, right like one eye two or one eye one that just has one input. I don't know why I got the one with two inputs, but we used it when Scott and I did in person podcast and we just two mics right into it. So it was worth buying. The one - -49 -00:24:29,490 --> 00:24:48,120 -Scott Tolinski: the one I wanted might not been out because the two It was like the cheapest one when I got it. Yeah. And like this thing is cheap. Because I used to buy USB interfaces back in the day. This is fine. Believe it or not. This is my third USB interface. So I'll talk a little bit more about that. Never. But this is the cheapest one and it's been the most reliable and it works just fine. So - -50 -00:24:48,300 --> 00:25:12,450 -Wes Bos: yeah, it's great. I the only sort of qualms I have with it is that there's no like monetization. So your microphone just comes in on one channel. Yep. And that's sometimes when you watch a video and it's On the left ear, and most good editing software will allow you to monetize that. And ScreenFlow by default makes you do it on every single audio track, which drives me nuts. That sucks. - -51 -00:25:12,450 --> 00:25:13,320 -Unknown: Oh no. So you - -52 -00:25:13,320 --> 00:26:07,650 -Wes Bos: have to like select every audio track and the possibility of forgetting one, by accident, it's awful. So what I use is I use a piece of software called loopback. And that will automatically pipe in the Scarlet to itu and then it just, it'll just pipe out another interface that is just the left and the left pipe to the left and the right. And I also really like that because if I'm doing some, like audio coding, I can pipe in the audio of my browser into that feed as well. Or I can I can pipe in the audio of the show or something like that. So I like it. It's cool, because I also have my mic here and I have my mic at the cottage. And I can pipe both of those mics into the same interface. And then I can just hit record and not have to be like, oh, shoot, I forgot to switch the mic. You just know that it's it's always going to work because I have it set up for both microphones into one. One input word. That's my hardware. What about you? - -53 -00:26:08,160 --> 00:26:44,070 -Scott Tolinski: Yeah, so for me I use the my microphone is the electro voice ar e 20. It is a famous radio mic. In fact, if you like go on any ESPN talk show you chances are they're using this a mic. This is like a super super famous radio mic. It's been around for a long time. It sounds really good on low voices. So for me it works really well with my voice. I've tried several microphones in the past. I've used a couple condenser microphones I started with the Blue Snowball, and I'm not that snowball isn't the snowball? It's like it was like a $600 blue mic so it wasn't like their their intro mic. - -54 -00:26:44,550 --> 00:26:50,520 -Wes Bos: No, the Blue Snowball is I just bought one at a yard sale for 10 bucks. Okay, it's that's the cheap USB one. Why is it Oh, it's - -55 -00:26:50,520 --> 00:28:52,140 -Scott Tolinski: the bluebird Bluebird, the bluebird. I had that for a long time. And then I have another microphone. I'm not currently using a condenser mic, but this one has been the best mic the thing that the the problem with this mic is really that the volume level the the level on it is so low that no matter what I needed a preamp, so I also went with the the dbx x 286 s for my compressor and all that stuff. But to be honest, I needed a preamp anyway. So when I was looking at like decent preamps, it was like okay, well you can spend 150 for a decent preamp, or you can just get this whole thing that does everything for you and including a preamp. So the DB 286 S is an essential part of my hardware flow. Without it my microphone would be not working really well. But this microphone is great. Fantastic. I'm in love with this microphone. I always pointed out when I see it on TV like it's my child. Look at that microphone. So I'm a huge fan. I also use the focus right to eye to again, I mentioned them I've owned several preamps before I had one by Apogee that was really nice until legit died on me. And then I had what did you see I had one by m box, or it was by Digi design who owns Pro Tools. So it's like the Pro Tools like intro, reg but because it allowed you to use the Pro Tools software, which at the time, I don't know if it still is it was like locked down by hardware. They like upcharge the hell out of it. So you could use the Pro Tools software. So I was really into Pro Tools when I was in college. So I had to get like a really nice one. But that one also was on some older version a USB and they never updated the drivers for new Macs. So once a Mac OS I don't know it was like maybe like five versions ago. I just couldn't use it it became a paperweight because even though the thing worked fine. It probably works as well as this two It does. It just did never got software drivers for it so well. I went about the two It was pretty cheap and it's been been really good for me. I also do video recording. I know you do like via your webcam. - -56 -00:28:52,290 --> 00:28:57,090 -Wes Bos: Yeah, not I just have like a 10 ADP webcam. So it's not nothing. Nothing amazing. - -57 -00:28:57,210 --> 00:30:28,320 -Scott Tolinski: Yeah, I've been getting born to like building a set. You'll see it in the latest series, the latest level up tutorial series. I have like a set in my office which is really just my desk even though I call it a set. I have my set and I have my videos and my lights all set up. And my video camera is a Sony A seven, three, I guess this is the a seven three but it's a seven and then three eyes. I don't know how you say that out loud. I will type it but this thing is incredible. Records 4k like smooth as butter. It can record HD at 120 frames per second. I have a 22 millimeter lens forward. That's a fixed lens, a prime lens and I just have it set up in the perfect spot. It has a really nice bokeh and it looks really nice for the background blur effects that I'm going for. And it records in 4k so my whole process is 4k, 4k video animation 4k video at the start and 4k for my screen recording. And so for that the process I use is I record the video camera with just the cameras on built on mic. Now I could get an external mic for that. But with my whole process right now, this is extra money. So I have the camera just recording it standard audio. And then I have my electro voice are he recording into logic and then I just use the editing app I use to synchronize the two. And that's it. I just say, Hey, hey, you synchronized by the audio waveform. Use the nice audio coming in from my microphone. Bingo. Bingo. I got really nice audio and really nice video on one clip. So that's my hardware. - -58 -00:30:28,410 --> 00:31:45,600 -Wes Bos: One website I really like is BSW usa.com. Yeah. So broadcast supply worldwide. They have these like podcasting packages, and they change them every couple weeks. And if you're looking at like, right now, I'm looking at my package, which is the Heil pr 40 the Heil shock mount that they have, they make their own pop filter, that's like nice and small. Most of these pop filters are like pantyhose over like a car tire. And they're just massive. My mind is is huge. And they actually want to know something really funny. When we were broke college students, like freshmen in college, we want to do recordings, we made our own pop filters out of sewing hoops, and pantyhose. That's exactly what we did. There you go. Yeah. So the NC says basically exactly what it is. Yeah, I've been trying to buy another one of these. It's hard because from Canada and you run the risk of getting absolutely nailed with duties when it comes into Canada. Luckily I didn't get any when I when I bought my first one. But the pop filters are amazing, but they've got it right now for 369 bucks. You get the mic cable, the pop filter and the shock mount for 369 bucks. Its regular 606 so they have actually has some legit deals there. I know Sweetwater is good as needed. I often will buy stuff at long and McQuade they have a lot of a lot of good, good equipment. - -59 -00:31:45,810 --> 00:32:09,480 -Scott Tolinski: We water sends you candy in the box too. So if you really short on candy, you will get some with your Sweetwater I order a lot of stuff from Sweetwater because I just always have they've been real good good to me as a customer in terms of customer service and stuff. So I usually order from Sweetwater just because I've been ordering from them since 2004. So for a very long time, at this point. Big fan, what else? Are - -60 -00:32:09,480 --> 00:32:10,650 -Unknown: you a big fan of Scott? - -61 -00:32:10,740 --> 00:33:16,770 -Scott Tolinski: Oh, I'm a big fan of video recording, like Log Rocket does. And Log Rocket Records a video of your users while they're making your site break? Because let's face it, we all write code that can introduce bugs occasionally. And the worst part about trying to solve a bug is getting users to give you the correct information, hey, my thing broke. Okay, how did it break? What browser are you using? What did you do to break it? And how can I fix it? Well, Log Rocket answers all of those questions for you by giving you a session replay, which is a play by play of what happened when the user clicked it the follow on video that you can scrub, get the network requests, get the dev tools, get the Redux store all that stuff. It's amazing. One of the services that you've got to try, especially if you're producing software that people are using, so head on over to Log rocket.com forward slash syntax, and you will get 14 days for free. A big fan of this service. So check them out. Okay, so let's get into our editing process. Now. Editing is something that I used to spend a ton of time on. And now I have somebody else doing it for me. But I'm interested to hear what your editing process is considering I think we're on different ends of the spectrum here. - -62 -00:33:16,920 --> 00:35:05,690 -Wes Bos: Yeah, my editing process is pretty simple. So the way it works is I have a set video that I want to record. And usually that's somewhere between five minutes and 20 minutes. And I know exactly what it is I wish to accomplish in that video, I usually have the code up in in one of my other screen so I can sort of reference it. And then I'll record the entire thing. And this is a little bit controversial, but I edit it out right after I have recorded it. So I'll finish that 15 minutes of recording. And then I'll go through the entire thing, I'll chop out the spots that I don't want to put in, I'll often slow up or sorry, speed up slow typing. So you don't want to like watch me type in something for, I don't know, for like 20 seconds. So I'll try to like speed that up a little, especially if it's something that like, if it's a crucial to the actual tutorial, I won't speed that up, because you have to type that yourself as well. But if it's something really simple, like I'm typing a sentence, or I'm just like uploading a uploading an image, I like that I'll speed that up now just so that it keeps people engaged. I'll edit out some of my goof ups, although I do leave a lot of them in because I've heard from people that that's the part they like the best where you goofed up, then you have to debug it. And then they see my process for actually debugging what had happened. And then the reason why I edit it right after is that is because I'm in the headspace of what I just did. So I know exactly what I need to edit out. And then also sometimes I'll just be like, ah, I just spent half an hour on that. And it sucks. It's not very good. I was sort of like, falling over myself a couple times. I'll just scrap the entire thing and do it. Again. And and that's good, because I think that for me at least that gives me a better end product. - -63 -00:35:06,000 --> 00:35:17,690 -Scott Tolinski: It's only you sort of just know, like, I know that like very much when I'm recording things. Like, yeah, I know this one is not it. This is this, ain't it? Chief? Did this. - -64 -00:35:17,730 --> 00:35:18,810 -Wes Bos: Yeah. - -65 -00:35:19,830 --> 00:35:29,550 -Scott Tolinski: I know very, very early on. Like, if it's like 20 minutes in, and I'm not halfway through with the recording. I'm just like, Oh, this is a disaster. I will just scrap it right then in there. - -66 -00:35:29,580 --> 00:35:48,330 -Wes Bos: Yep, absolutely. Sometimes I just need to like go for lunch, or whatever, and then come back to it. Because energy is a huge thing for me. And when I'm recording is that if I'm just not into it, or I've been doing it for too long, like, recording is exhausting. Yeah. So if if I'm just like not feeling it, I'll just scrap it and come back when I'm feeling my energy's a little higher. - -67 -00:35:48,600 --> 00:35:50,210 -Scott Tolinski: Yeah, same here. So - -68 -00:35:50,250 --> 00:35:56,630 -Wes Bos: that's, that's my entire process. It's, it's pretty simple. I like to keep it simple, because I can make more content that way. - -69 -00:35:56,940 --> 00:39:48,690 -Scott Tolinski: Yeah, I like that. That's actually how I used to do it. When I was doing level up tutorials, like three videos a night sort of thing, when I was really grinding through it. Now I have product release schedules and things. And I've really changed my process quite a bit. And I've changed it necessarily, because it's the right thing for how I edit, but it's the right thing for getting the content out. So right now I work with a video editor last month. Unfortunately, I didn't get to work with my editor because I recorded 10 videos in the series and had to throw them all away. Because I was like this is redundant, it's redundant from another course I did on level up, I'm not really bringing anything new to the table, it's not really bringing the value that I wanted in this course. And instead of trying to continue push around through that, I just I scrapped 10 videos, and I was like, You know what, instead of starting at video number one, I'm going to start this course that would have been would have been video number 11. And then I can offer way more value essentially for that. So unfortunately, I had to edit it all myself for the first time in a little while, which is not a huge deal. I like editing. But I usually work with a video editor. His name is Tim Tim Smith, he's the coolest Tim is great. I just dropped off my videos, I give it to them before the 15th of each month. And he has informed me by the end of the month, he does a great job, he does a really super good job. And as you know, he never misses a deadline or anything. So Tim is the man. And he's really saved my butt lately, allowing me to focus on some other stuff. But when I do edit, I use DaVinci Resolve version 16. Like I mentioned before, when I record I pause a lot. And I don't pause a lot. But I pause to get a breath to think about what I'm saying next. And I know when I'm looking at my audio forms in the in the video anytime there's long pauses where I'm not talking, that's a spot for me to cut. So I zoom way out. And I have some shortcuts, which is just a C, and then z and x. And so C will cut like a blade through it. And z will trim from the back to the front. And x will turn from the front to the back. And so I just leave my fingers on C x and z. And I just use the cursor to click here's a here's a spot, cut, trim up, cut, trim up, cut, trim out and I remove all of the blank space. So once the blank space is removed, that's the only time they start to watch the video. So I remove all the blank space, then I watched the video and then I'll find goof ups and cut them out. I try to find arms and cut them out. But that's tough to do. It's tough to cut out all of the arms and it's really only if it's a problem where I'm like clearly being like, okay, yeah, I think about this. So I you know, I do do my best to cut that stuff out. But it's hard. It's hard to get it off. And I really love Da Vinci resolve because it's free one, but it has the best features in my mind between premiere and Final Cut Pro. I have a background in professional video editing. I used to edit videos for Guitar World Magazine, future music magazine, guitar, one magazine. So I have a background in professional video editing. And I always use Final Cut. And then I use premiere premiere has major issues with variable framerate, which all screen recording software pretty much produces variable frame rates. And it's not like it's funny because you go on the premiere forums and be like, how do I deal with variable frame rates? And you know, the professionals they're like, why are you having variable frame rates? Like Well, okay, what's this a screen recording software? It's not my choice. Yeah, because your computer needs to like adjust while you're recording, right? If you were stuck at a solid framerate, it might overwhelm itself or something I suppose. So DaVinci Resolve basically has the features in the interface or something like premiere without having any of the weird little bugs and you don't have to have an Adobe subscription, which I you know, I'm not a huge fan of myself. So DaVinci Resolve is where it's at. I'm a big, big fan. - -70 -00:39:48,710 --> 00:40:06,090 -Wes Bos: I like what you said about the like the just being quiet for a bit. I use that as well because you can edit so much faster when you can just visualize the audio wavelength. Yeah, and you can Cut out. Or I'll do like a, I know you've done your screech in the past or do or something like that. - -71 -00:40:06,960 --> 00:41:21,650 -Scott Tolinski: And you can quickly see, like, where the goof up was. And you can edit it just by visually seeing it rather than having to sit there and listen to the entire thing. For those of you who have not heard this story, I had this I had this great idea is a great idea of doing this screech anytime I messed up, and it was like a hideous noise. And I was like, Oh, this is a great idea. until I started working with an editor and a publisher for one of my courses, I'm not gonna disclose who, because I'm not super happy with them. I never made any money off of that course, I put a lot of time into it. And it was like, oh, we're not really gonna pay you anything for it. You get like 5% of your royalties. So I did this screech, which was just totally obnoxious. And I sent off all my videos to the publisher, after they were edited. You know, this is for final. This is for here, listen to these. And we're gonna release this. And so the editor is listening to it. And I get comments back and it's like, everything looks great. But at 555 in this one video, there's a loud scream into the microphone. And I would assume the video editors headphones just shot out of his ears because it was so bad and so loud I listened to it was maybe one of the most embarrassing moments in my professional career. - -72 -00:41:21,750 --> 00:41:23,760 -Wes Bos: Ah, that's hilarious. - -73 -00:41:23,790 --> 00:41:44,880 -Scott Tolinski: Yeah, one of my biggest, biggest goof ups there. So needless to say, I needed to make a fresh recording of that just like you know, our friends at fresh books. Fresh books gives you awesome cloud accounting software and no screeches. There's not going to be any screams or squeals when you're learning this website, maybe just squeals of joy. - -74 -00:41:44,900 --> 00:42:31,670 -Wes Bos: Yes, if you are a small business, if you are a freelancer, just trying to track your invoices, send them out. If you want to send quotes, if you have expenses that you need to input, take a picture of receipt, attach that managing all of that in fresh books, cloud accounting is the way to go. I use it for all of my money coming in all of my money going out. And at the end of the year, when tax time comes, I can just provide a big dump out to my accountant and he has Scott Do not laugh at that he has all of everything that is needed in order to do my taxes, which I absolutely love. So check out fresh books at fresh books calm forward slash syntax, use syntax in the How did you hear about a section? And thanks so much to Freshbooks for sponsoring. Nice, cool. - -75 -00:42:31,710 --> 00:42:33,920 -Scott Tolinski: So hosting, how do you host this stuff now, - -76 -00:42:34,230 --> 00:45:46,980 -Wes Bos: I've actually gone through a couple of different hosting platforms over the years I initially hosted on Wistia. And Wistia is a sort of like a video host. And they're they're sort of like the MailChimp of video hosting where they're really good at like, doubling down on like capturing emails and things like that. But their bandwidth is just the bandwidth is probably the biggest expense, or was the biggest expense for me. So I stopped using Wistia because the bills were getting massive. And I moved over to using Vimeo because Vimeo has business plans that you can, I think there are a couple hundred bucks, I think I paid three or 400 bucks a year. I think they even have one for 200 bucks a year. And you can use Vimeo and I initially was using the I've told this story before but I wish I initially was just using the video output. They give you like a streaming mp4 where you can use it with your own html5 player. And I had my own custom player and everything. And it was great because it wasn't branded Vimeo it was just my own custom player. But downsides to that is that if somebody was on a slow connection, it wouldn't dumb it down. If somebody was on mobile, it wouldn't resize it for them. And then also I got an email from them that I was using, like three or four terabytes a month. And they said like, Hey, you can't do this. This is too much. And it was somewhere in the somewhere in that. So I said fine, fine, fine. like can I have give me like a month to move this over to the Vimeo player. So I did I moved over to the Vimeo player. The reason I wasn't doing that initially is because there was no way to control playback rate on the Vimeo player initially. And that's a huge thing for tutorial watchers, they want to be able to speed it up. So they finally did land that in the Vimeo player so I was able to move over no sweat. And now I use Vimeo for hosting everything. I use rev.com for captions. So you can hook rev comm right up to captures I also have a script that will upload the captions from GitHub because people will make corrections to the captions on GitHub. And then I just run that script and it will push the captions up to the Vimeo and then my my own course platform is like a kind of a additional controls. It's all built in react and I have just like kind of extra controls that I add like skip ahead 15 seconds, skip back 20 seconds. The volume I want to store locally on the users so that they can, I can sort of keep that as a profile, wide setting, things like that. You say them local storage on the user object. I currently save it in local storage. But it is I'm going through a big rewrite of the player right now. It's not live yet. And that is then moved to the user in the database, just because like it sucks, if you want to watch on your phone, or you want to watch on like your work, you watch it at work, and then you sign in at home. And those things don't don't switch, just little annoyances. It's nicer to sort of put them in there. Oh, also, I use backblaze to provide downloads for my courses. Because some people want to watch them on airplane or offline, something like that. I used to use Amazon s3 - -77 -00:45:47,010 --> 00:45:48,210 -Unknown: Yes, at that s3, s3, - -78 -00:45:48,210 --> 00:45:59,490 -Wes Bos: and it was I would have months where it would be over $1,000 a month just for downloads. And it's I don't even know what it is for backblaze probably under $100 a month for me. - -79 -00:45:59,640 --> 00:46:00,810 -Unknown: It's definitely cheaper. Yeah, - -80 -00:46:00,840 --> 00:46:08,340 -Wes Bos: yeah, things the cloud storage has gotten so cheap in the last two years, it's unreal. So that's how I provide downloads of my zips, - -81 -00:46:08,430 --> 00:46:09,390 -Scott Tolinski: your big zips, - -82 -00:46:09,630 --> 00:46:12,240 -Wes Bos: my bigs that we have an entire episode on pig zips. - -83 -00:46:13,140 --> 00:47:21,990 -Scott Tolinski: We have an episode on tips. So my process is largely similar. Although I host on YouTube, I am moving to Vimeo for no reason other than I don't necessarily trust YouTube with my entire business, you know, everything is unlisted and brought in through the API. So you know, users can't just head to YouTube and see the stuff that you're paying for and you won't be able to find it. Now, that said, I have this thing I call the import Iser the import, Iser just went through a huge rewrite. And what it does now is I can create a series of it used to be that I had to import it before I did anything, and I would import it from YouTube, and then I could edit it. Now I can actually create the entire series product, the the look of it, all of the facts about it, and then I can click Import just by passing in an ID, and it's going to fetch all the videos and you can see them pop into the import Iser right then and there. Now the import Iser now also has the ability to import from Vimeo. So I'll be moving to Vimeo and I've been paying for it for a little bit. But you know, when you record and you do all this stuff, it's really hard to work on the platform 24 seven, so that's one aspect of the import Iser that needs some work will be coming. - -84 -00:47:22,080 --> 00:47:25,020 -Wes Bos: What's this Vimeo? Vimeo, you're talking about? - -85 -00:47:25,230 --> 00:47:32,310 -Scott Tolinski: Oh, you say Vimeo, Vimeo, Vimeo, I okay. Mr. Said, video. - -86 -00:47:32,970 --> 00:47:45,030 -Wes Bos: No, Canada is wrong about that. I'll stand by that. Same when we're talking about the car as well. We use in in Canada, we use liters per 100 kilometers city No, the worst miles per gallon is better. - -87 -00:47:45,540 --> 00:48:31,260 -Scott Tolinski: Yeah, and I host I host my videos on s3 currently, although I also host on the backblaze B to like you do. So it's funny because I have so much of my system that it has like all locked down so that it wasn't like googling certain public, but that API call and all that stuff is set up through Amazon and I just haven't had the chance or the ability to rewrite it. So half of it's funny, when I upload a course I actually upload it to both s3 and v2. But I have the one that's going to be downloaded more often in v2. That way, the most of the downloads are coming from v2 and not s3, but the s3 is there for some of this stuff. So that it just doesn't break my old code. I am moving at all to be to at some point, but it's like, man, just finding the time for those kind of things. It's not it's not worth it. - -88 -00:48:31,290 --> 00:48:43,200 -Wes Bos: Yeah, that kind of stuff is like I rather just pay the extra money and keep building stuff. It's hard to when it's working fine. It's really not it's not maybe not that expensive, right? Is it worth it? - -89 -00:48:43,290 --> 00:50:13,350 -Scott Tolinski: It's not in since I have it. No, it's not I have my like the majority of my downloads coming from v2. So because of that, the I'm only paying like 100 bucks. And that's three a month, which is really not that much. So that's pretty much it for my my hosting for everything I I've been looking into using a new video player called plier. pl y er. And it's really just it's it's not really new video player, but it's sort of a CSS wrapper over it. But the cool thing is that it it basically themes, both the Vimeo player as well as the YouTube player. So I'll be able to have mixed Vimeo and YouTube content on the site and the user most likely won't notice. So that is going to be something we're working on right now. It also can be branded and look a little bit nicer. So we'll see where that goes. It's obviously something we're working on. But definitely nice little new thing here. But I kind of work on some of these features. We also we save like autoplay and stuff in the user settings, which is in the database, not in local storage, which is why I asked because I was contemplating that decision for a little while. And then I made like a user settings. object. Yeah, that has, you know, whether they're on dark mode or something. So we save autoplay in there, but one major frustration for our users is that they can't save their video speed in there. So I'll be looking to fix You're out how to save the videos. Oh, I mean, I know how to save the video speed. But like, I want it to work with both Vimeo and YouTube. So being able to translate that with the Player, Player, whatever it is, and get that all working. - -90 -00:50:13,410 --> 00:50:36,180 -Wes Bos: Yeah, that was a pain for me. Yeah, it's gonna be a pain because people also have like the Chrome extension, the video speed player. So there's like, there's Vimeo, which tries to save the speed. There's me, which tries to save the speed. And then there's this, like, third party Chrome extension. And it was just a headache trying to figure out like, No, mine, mine is the winner. - -91 -00:50:36,870 --> 00:51:14,670 -Scott Tolinski: Mine wins. I have. It's funny, because this has been something that's like been totally on my brain lately. My platform checks like user's watches and stuff, it tracks whether or not they've watched a video. So that was like a big thing. I have a timer that starts essentially, when they start playing a video, and then every, like five seconds or something, it checks to see what the progress of the video is like, it checks to see what percentage of way through the video they are. And if they're greater than, like, 93%. I did this just by feel. If they're greater than, like, 93% of the video, then it it submits a user did finish this video, - -92 -00:51:14,790 --> 00:51:26,070 -Wes Bos: Mark, I did his exact same thing because people weren't getting all the way to the end. Yeah. And then it would mark it as finished. And they're like, Ah, it's ruining my add that the bar is not checked. - -93 -00:51:26,340 --> 00:51:37,830 -Scott Tolinski: Well, I actually had to also help solve that problem. I added a nice little button, like a checkbox. So if you did watch the video, you could just click that checkbox to submit it. Same thing to submit a watch thing. Oh, that's good. - -94 -00:51:37,830 --> 00:51:49,260 -Wes Bos: Can I ask a question with the Yeah, if somebody scrubs back to the beginning of the video to rewatch it? Do you unmark it because I currently do that and people complain? I do not unmark it? - -95 -00:51:49,380 --> 00:51:53,550 -Scott Tolinski: Well, Mark I need the only way you can unmarked it is by clicking the checkbox checkbox. - -96 -00:51:53,580 --> 00:51:59,040 -Wes Bos: Okay, yeah, I need to add that that's I like adding that kind of stuff, though. That's fun stuff to code. Yeah, I - -97 -00:51:59,040 --> 00:52:34,650 -Scott Tolinski: also do a check to see if like, so when I get one of those checkboxes, and it were when the user has watched the video, I also run a check to say, Hey, have you watched every single video in the series if there's 23, checkboxes for this series, and there's 23 videos in the series, then mark the series as completed. And so that way I can keep track of if you've watched the series or not all of which this stuff is becoming more relevant now that we're actually using some of these features. We've had these features in the site for a little bit, but they weren't user facing. And now they've become user facing. So we're adding a little bit more features around there. - -98 -00:52:34,980 --> 00:52:37,800 -Wes Bos: Beautiful. Anything else about hosting? - -99 -00:52:37,890 --> 00:52:40,050 -Unknown: Now? That's it? We got a lot of stuff here. - -100 -00:52:40,050 --> 00:54:01,710 -Wes Bos: Yeah, it's, it's kind of a lot of fun stuff. We also have common questions. So with this type of stuff, we all I always get, like, why not do it this way? And I always like to entertain those questions, because maybe I am not doing it the best way. But right, we're just gonna rattle through some of the common questions that I get one of the ones that I get all time is, why not show keyboard shortcuts? So like, people often get distracted watching my videos, because they're like, oh, what theme is that way? Like, how did he do that? How do you move? Like, how did you do the multiple cursors, things like that, I often try to just record a quick video to show the person. But the reason I don't show keyboard key presses in my editor is because they're different on everyone's computer, not everyone's using the same editor, not everyone's using a Mac or whatever, I have my own custom shortcuts enabled that are not the same as what other people have. So it's a very hard thing to do. The exception with that is my, my Sublime Text course because that is all shortcuts. And we are all on the same editor and assuming that you're you have been customized that yourself. But other than that, I don't want to distract from the actual thing, which is learning react or learning node or something like that. Whereas, like, how did you do that cool thing with your keyboard that should be for you to figure out or hopefully, for another course that I record. - -101 -00:54:01,830 --> 00:54:27,660 -Scott Tolinski: And I'll call out vocally keyboard shortcuts I have if they're important, yeah. But if if I had them like the screencast or mode on VS code, if I was using that, or via the editor, people would see that I hit Command S maybe 10,000 times every time I make a change. Just I make a change and I just rifle off command as command and as you know a few times like I think people would be really annoyed with my keyboard shortcuts I don't have the self control over those. - -102 -00:54:27,900 --> 00:54:35,460 -Wes Bos: Yeah, it's you can you can turn them on and off in VS code and that editor what was the thing the recorder use? Like presenter Oh, - -103 -00:54:35,460 --> 00:54:36,660 -Scott Tolinski: screen screen flick? - -104 -00:54:36,660 --> 00:54:40,830 -Wes Bos: Yeah, it does record key presses so you can show them at a specific time but yeah, - -105 -00:54:40,830 --> 00:54:46,590 -Scott Tolinski: and there's also the the presenter mode or whatever in in VS code does all that stuff. Yeah. - -106 -00:54:46,620 --> 00:55:21,090 -Wes Bos: So it's just not something I want to muddy up my my screen with. We went over why not record full screen because it looks dated. The other I guess the other problem is that if I did record full screen I'm on a 32 inch monitor. Hear, I would have to like, like be across the room to be able to see it. Because if I recorded it right on my laptop, it would probably be better. But because I'm recording on my 4k screen, if I did do full screen, everything would be massive, like the letters and be as big as my head. And I can't necessarily do that maybe I should just get like a smaller monitor smaller 4k monitor just for recording. - -107 -00:55:21,240 --> 00:55:55,770 -Scott Tolinski: Yeah. So Oh, yeah, we had this other one is People often ask us why we don't use TypeScript for our normal tutorials. And it's really just because you're limiting the audience, you can expect that the people especially beginners, you can't expect that everyone is going to know those shortcuts, or you can't expect that they're going to know TypeScript. So if you do everything in TypeScript, well, then you're sort of inherently limiting your audience. And I would, you know, obviously show TypeScript if it was like a react and TypeScript course, but for just normal react stuff, you know, even if you're using it or whatever, it's gonna limit your audience, it's gonna, you know, hurt the beginners, the people you're actually trying to service here. - -108 -00:55:55,860 --> 00:57:27,240 -Wes Bos: Yeah, I get that question a lot. Like, why not use this very specific thing. And it's because you're trying to teach the fundamentals of something you're trying to, to get the ideas across. And the more specific you go, the more sort of like deep end you go, the more people fall off during the course and ask for refunds or are frustrated. And those are never I get lots of frustrated emails where well, not a lot, not lots, the course you get great, you should try them. But every now and then you get like dislike, it's funny often wake up in the morning, and there'll be a string of like six or seven emails, and someone and the last one is just apologizing, because it's just like, you know how hard it is when you're coding and things aren't working? And you're like, this is a crappy ass course, you're like, Oh, actually, I didn't understand how these things work. Yeah. Same thing with like things like testing, my latest advanced react course does have testing in it. But it's like, it adds an extra, like four hours to the entire course. So I can't add that to absolutely every single course. Because a it's not the focus of it and be, it's just going to add too much overhead to things. Because if I put in absolutely everything people ask for the courses would be 40 hours long, and no one would ever actually finish it. So there's this fine line between me trying to teach you something and get it across and including absolutely everything that people are asking for. So I sort of gauge it. If I have people on either side being like, this course is too advanced for me, or this course is not advanced enough for me. I'm sort of going for in the middle of those people. - -109 -00:57:27,600 --> 00:57:59,790 -Scott Tolinski: I feel it. Yeah, I mean, I do the same thing. And and I have a course on testing, it's like, Okay, this is the course on testing. If you want to learn testing, watch this course, we cover everything that you would cover in this. And then Okay, let's get back to the other stuff, you can always watch the testing course totally, you know, I, you know, it is important, and I highly recommend you test your components thoroughly. I don't necessarily again, want to take up that time to do that. And, you know, maybe I'll add something like Cyprus or something to the sakes and love in Cyprus. That's a whole nother topic for another episode here. - -110 -00:57:59,910 --> 00:58:23,370 -Wes Bos: So you've just probably triggered all of the testing people that think you're gonna get some angry tweets, tweet us at syntax FM, if you're angry about that, yeah. But hopefully you understand how that works. So that's our process for recording editing and hosting our courses. Hopefully, there's a couple nuggets in there that keep you happy and you can apply to your own recording tasty nugget. - -111 -00:58:23,670 --> 00:58:36,150 -Scott Tolinski: Alrighty, JC. I like that. I like to do what Landon always says, Landon. When he likes some food. He goes, I eat that. I eat it. We're like he wants a tasty nugget because I eat it. - -112 -00:58:36,180 --> 00:59:03,780 -Wes Bos: I eat I eat it. That's great. I love that my my daughter's always say it tastes good. And we've been recently every time I make something I call it dad's famous. So if I if I made something like mac and cheese that's like not the famous mac and cheese. Yeah. And now they've started to ask for it. Can we have dad's famous peanut butter and jam and honey sandwiches? I was like, I didn't even invent that but sure God, that's great. - -113 -00:59:03,809 --> 00:59:06,390 -Scott Tolinski: I'm gonna steal that I'm sorry. I'm taking them ripping it right - -114 -00:59:08,790 --> 00:59:14,400 -Wes Bos: all right. I think that's it for today. Anything else to add there Scott? I don't know. We got to do we got to do sick pics. Oh, yeah, I - -115 -00:59:14,400 --> 01:00:26,940 -Scott Tolinski: got a sick pic. I gotta sit pick on what is it? My sick pic is a show on Netflix. And it's so cool. If you're into cars at all, or to be honest, this the show's called hyperdrive, and it's basically you could think of Ninja Warrior with cars, and they have an obstacle course and you have all these drifters coming from all over the world to do this adrift course in the drift course is awesome. So not only is the production value of the show, unreal, it's like it's fun. The whole thing is fun. They have like my Michael best thing in there from the UFC is one of the hosts and the whole thing is that like super serious, it's very Ninja Warrior esque with the way they do the announcing and stuff and they have to do these. Some of them are extremely technical drift maneuvers, and other ones are just sort of ridiculous like a giant balancing That they have to do with their cars. But the drivers are fantastic. The stories are all fantastic and the the energy, the vibe, everything about the show this style is just super, super good. You will watch this and just be in total of some of these drivers so my show is hyperdrive. It's on Netflix, if you have Netflix, check it out. I watch I don't binge a ton of stuff, but I binged the life out of the series and I really really enjoyed it. So check it out beauty - -116 -01:00:27,029 --> 01:01:17,220 -Wes Bos: I am going to this has been the best second pick. I got a sick pick a pic quick. In this is a screwdriver with Piglet in the handle, I have gone through, I don't know tons of screwdrivers, I'm a mess with organizing my tools. And I have all these different screwdrivers where like they put the bits in the handle, and they have like these tiny little screwdrivers and you lose them as they're not the right one. And probably for about four or five years I've been just using these things called the pic quick. And it's a screwdriver where the handle has all of the different bits that you need. In order to take out one of the bits from the handle, you must put take the old one out and push it up. So you push the new one out so you can never lose your bits because the only way to get them out and put the other one back. Oh, that's fun. And I love it. It's just the best design. - -117 -01:01:17,279 --> 01:01:23,850 -Scott Tolinski: If only they had that for video games. I always put the video games in the wrong containers when I'm done with them, making everybody angry. - -118 -01:01:23,969 --> 01:01:58,440 -Wes Bos: So good. I I refer to this and we have like a bunch of them. But I have one that we called the junk drawer screwdriver where it's like the house screwdriver it doesn't go with my tools doesn't go in the garage. It's just in the house for doing things that need screwdrivers around the house like taking batteries out of a kid's toy or something like that. And it's like 12 bucks you just have it around the house. They have torques specific ones but I just I just buy the red one where they have all just your standard ones I'm not sure if this is a Canadian thing or not because they have Robertson in the all of the ones that I buy. Do you know what robertson is? No, I - -119 -01:01:58,440 --> 01:01:59,940 -Scott Tolinski: have no idea what robertson is - -120 -01:01:59,969 --> 01:02:05,340 -Wes Bos: in Canada we use a lot of square screws instead of stars. Oh, - -121 -01:02:05,369 --> 01:02:06,980 -Scott Tolinski: that's that's called robertson - -122 -01:02:07,109 --> 01:02:10,050 -Wes Bos: is called the Robertson head. Yeah. What's the star called? - -123 -01:02:10,079 --> 01:02:13,200 -Scott Tolinski: Not the torques one. There's a torques which is sort of a star - -124 -01:02:13,229 --> 01:02:17,700 -Unknown: know that the star screwdriver is called I've always just called a star. - -125 -01:02:17,759 --> 01:02:21,570 -Scott Tolinski: I've been taking apart a lot of hard drives lately. Oh, yeah. He's the star. - -126 -01:02:21,689 --> 01:02:25,500 -Wes Bos: It's called the Philips is the star. Oh, - -127 -01:02:25,500 --> 01:02:28,200 -Scott Tolinski: that that doesn't fill up. That's just a four pointer. - -128 -01:02:28,229 --> 01:03:01,860 -Wes Bos: That's not a star. Yeah, that's true. It's not really a star x. But yeah, check it out. I love the screwdriver. I have them all over the house in my toolbox because I have thrown all my other ones out well worth the money. For shameless plugs. today. I'm gonna plug all of my courses Wes Bos comm forward slash courses. I am officially back from paternity leave. Yeah, I am. Well on working on my beginner JavaScript course. It's almost done. So you should hear announcement from me in probably a couple weeks. Cool. - -129 -01:03:01,920 --> 01:03:53,640 -Scott Tolinski: excited about that. I have a new course on advanced to get to be in Shopify. We build a custom shopping cart. We work with coupons. We put things in local storage. We have persistent shopping carts through Shopify, and even talk a lot about like the post signup or the post, like purchase process and all sorts of stuff. There is like so much there. I've done two series on Shopify and Gatsby. And I like really feel like I feel like there's so much more you could do, because it's just an endless amount of topic. e commerce is hard. We all know e commerce is hard. But if you're looking to build some really cool Gatsby sites using Shopify, check out my new course. Advanced Gatsby in Shopify, it's available along with every other level up tutorials course on level up tutorials.com forward slash Pro, sign up for the year and save 25% off the total price. So thank you so much. And yeah, check it out. - -130 -01:03:53,640 --> 01:03:54,240 -Unknown: Also, - -131 -01:03:54,240 --> 01:04:01,770 -Scott Tolinski: we have a new course coming out in September, and I'm really excited about it. I'm gonna talk to you more about it next week, but very excited about it. Sweet. Alright, that's - -132 -01:04:01,770 --> 01:04:03,930 -Wes Bos: it for today. Thanks for tuning in. And we will catch you - -133 -01:04:03,930 --> 01:04:10,680 -Scott Tolinski: on Monday. Oh, guess what we're doing on Monday in the in the the syntax episode. Do we want to give a teaser? - -134 -01:04:10,730 --> 01:04:22,350 -Wes Bos: Yeah, the TLD game, the TLD game, we have to guess what a TLD is What country are businesses from how much it costs to register. I think it was hilarious. It went really well. We already recorded it. - -135 -01:04:22,380 --> 01:04:39,390 -Scott Tolinski: It was hilarious. I really enjoyed it. It was a lot of fun. So get excited for that. Please head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax179.srt b/transcripts/Syntax179.srt deleted file mode 100644 index bff5297b6..000000000 --- a/transcripts/Syntax179.srt +++ /dev/null @@ -1,436 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,000 -Announcer: Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott L. Todd. Totally. - -2 -00:00:27,420 --> 00:04:42,480 -Wes Bos: Welcome to syntax in this Monday hasty treat, we're going to be playing a TLD game, which I am so excited about. Wes has a little story about this game, so I'm gonna let him introduce the game. But before we get into that this episode is sponsored by Log Rocket. Now Log Rocket is a longtime sponsors syntax, one of the coolest services in the universe, I was gonna say on the planet, but considering it's a rocket ship, it's most likely outside of the planet. Log Rocket is a error tracking and handling service that allows you to see the errors as your users have seen them. It is awesome. What you do is you get a session replay video of the error that's happening. As the user saw, let's say they click on this icon of a maybe a winking emoji or something mean that Winky emoji breaks the whole site, you can see exactly what they clicked the error log, the Network tab, the Redux store, all that stuff that you want to know, to figure out what happened when you solved the to solve your bugs. So if you want to check out Log Rocket, head on over to Log rocket.com for slash syntax, and you're going to get 14 days for free, one of those services, you really have to, I should say C to believe because it's a visual thing. But it's just that cool. So check it out Log rocket.com forward slash syntax. All right. My name is Scott to Lenski. And with me, as always, is Wes Bos. And, Wes, you have a little bit of story about this game. So I'm interested to hear this little intro. Yeah, I was out for drinks with a bunch of creatives, I guess, some photographers and whatnot. And we're just kind of standing around talking about how I make websites and domain names. And then I somehow I brought up that I own bo bosta af. And I was telling them how how much of a pain in the butt it is because it's Afghanistan. And there's like a sanction in the US against doing business with Afghanistan businesses, so you can't get CloudFlare for it. And there's all these, these things that can happen with it. And I was saying like how it was, like 100 bucks a year to register this thing. And it's funny, but it's also a pain. And he's like, oh, man didn't even know AF was a thing. Like, that's Afghanistan. And he's like, Man, you must know so much about domain names. And I was like, I do know so much about domain names. Like, it would be fun to do a, like a little game where kind of like stumped, where we go back and forth. And we have a list of every single TLD a TLD is a top level domain so.com dotnet, dot onion dot actually done, you know, I think is actually one that's not a, that's just if you're actually using Tor. Yeah, but there's hundreds and hundreds of them here. And some of them are associated with businesses, some of them are not registerable. Some of them are associated with countries. So what we're gonna do is Scott will pick a TLD. And then we have to answer the question. Is it for a country or a business? And so yeah, we have to say that, if so, what country is it for? Or what business is it for? Or what type of business is it for? So like, if you look at something like doc accountant, right, that's obviously not for a specific business, but it is for the type of business that is an accountant. How much per year does it cost? So you either have to guess how much it is per year? Or you can say unregistered because there is some that are unregistered. And because they're just there, they're owned by companies like companies can go ahead and pay to get their own TLD like dot blog is owned by WordPress. But WordPress does allow it does sell it whereas they could just keep it for themselves if they wanted. And then finally the last question is is Scott dot whatever? TLD and West dot TLD available. So it's got dot blog available and is West dot blog available? So we have to take yes, those. Do you have any idea like points scoring for this? I was maybe thinking about doing like a golf thing, like lowest score wins. So every time you get one, right, just to make it more. And then if you guess like how much per year if you are off however many dollars you're off. That's how many points that you have to add to your score. And - -3 -00:04:42,890 --> 00:04:43,800 -Unknown: my God. - -4 -00:04:44,910 --> 00:05:50,190 -Wes Bos: put a lot of thought into this over the weekend. I'm so excited about it. I'm excited. I think that all sounds fun. And you know what, this doesn't have to be the only time we play this game. So let's say we run with these rules and they're no good. We can always change it. We can tweak it. Yeah Yeah, there's no rules. This is our podcast. We do what we want. Yeah, I'm wearing an overalls t shirt right now to remember those. No rules. No rules. No. What's, what's that from? What is that? It's a brand. I think I remember that. We had a when I was a kid, we had extreme zone, which was like the Sears like streetwear brand. And I loved having everything extreme zone. And we used to go to this like outlet mall in Canada that had like a Sears outlet, and I would buy all buy up all the extreme zone gear and just rock it so hard. That's amazing. All right. So first TLD is dot B. Oh, oh, that'd be Oh, okay. So first question. Is it a country or a business? - -5 -00:05:50,280 --> 00:05:55,650 -Unknown: Is it a country or a business? I'm gonna say it is a country. You are right. - -6 -00:05:55,830 --> 00:05:57,270 -Yeah, country. - -7 -00:05:57,330 --> 00:05:59,220 -So I got negative with five points, - -8 -00:05:59,250 --> 00:06:02,970 -Wes Bos: you get negative five points. So okay. Scott is at negative five. - -9 -00:06:03,180 --> 00:06:09,120 -Unknown: I know I've already made the table. Look, look, look down in your notion page. You'll see okay. - -10 -00:06:09,180 --> 00:06:15,030 -Wes Bos: All right. I'll let you score. Okay. Okay. And which country is it? Ah, - -11 -00:06:15,060 --> 00:06:23,460 -Unknown: which country? Is that be? Oh, I'm going to say, oh, man, Bolivia. - -12 -00:06:23,760 --> 00:06:25,380 -You got it? Oh. - -13 -00:06:27,300 --> 00:06:28,260 -That's amazing. - -14 -00:06:30,900 --> 00:06:44,520 -It's the first the first literal first country that came into my head with that even sounded anything like Bo. Okay, that's great. I was thinking European the whole time. The first time I went to South America. there when? Okay, cool. Okay. Wow. - -15 -00:06:44,700 --> 00:06:53,460 -Wes Bos: I don't know my country's very well. So this is gonna be very interesting. All right. Next question. How much per year does it cost to register? - -16 -00:06:54,450 --> 00:06:57,630 -Unknown: I'm gonna go ahead and say 70 bucks. - -17 -00:06:58,049 --> 00:07:10,860 -Wes Bos: 199 99. So $200 a year. See, US got decimated there. I don't know if you'll be able to come back from that. So you were 30 $30 off - -18 -00:07:10,919 --> 00:07:18,720 -Unknown: minus 10. So I'm 120 why this price guessing is a little skewed here. Okay. I'm at 120. - -19 -00:07:19,229 --> 00:07:23,490 -Wes Bos: All right. And it's got Bo and West up Bo available. - -20 -00:07:23,820 --> 00:07:25,500 -Unknown: I'm gonna say yes. On both accounts. - -21 -00:07:25,890 --> 00:07:30,600 -Wes Bos: Scott doppio is available. Yay. And Wes doppio available. - -22 -00:07:30,600 --> 00:07:35,190 -Unknown: As you get 10 for those each 10 h for those bring me down to 100 - -23 -00:07:35,370 --> 00:07:39,690 -Wes Bos: Yeah, I need you to come back from that. decimation that you with the pricing. - -24 -00:07:39,989 --> 00:07:49,380 -Unknown: Okay, so I got 100 points on that round, just because of the pricing. Even though again, lower is better. Lower is better. All right. Well, good luck to you, sir. Okay, good - -25 -00:07:49,380 --> 00:07:49,920 -luck. Okay. - -26 -00:07:49,920 --> 00:08:09,480 -I got I got one for ya. Yeah. Good luck with this one. is.bz. h as in Hey, Wes. Is dot busy. He's, he's busy. Is this a country or whatever? Okay. country or business age - -27 -00:08:09,719 --> 00:08:10,740 -Wes Bos: is a country. - -28 -00:08:11,099 --> 00:08:16,950 -Unknown: You are correct. It is. It's not a country necessarily a geographical - -29 -00:08:16,950 --> 00:08:17,880 -Wes Bos: region - -30 -00:08:17,880 --> 00:08:24,270 -Unknown: geographical region in France. For Brittany. I don't know. Wait. - -31 -00:08:24,390 --> 00:08:29,400 -Wes Bos: You're supposed to ask me this. Ah, that's the second question. That's fine. Just keep going. - -32 -00:08:30,930 --> 00:08:35,460 -Unknown: All right, well, I spoiled this one. So what country or business type? Is this for? - -33 -00:08:35,700 --> 00:08:46,040 -Wes Bos: a? I don't even know you said you said Brittany. It is Brittany. I did say that all right. But is that it? Like what's that h4? Uh, - -34 -00:08:46,160 --> 00:08:53,640 -Unknown: I have no idea. You would have never got that. All right. I give me those points. It is a region in France, - -35 -00:08:53,700 --> 00:08:54,600 -Wes Bos: a region in France. Okay. - -36 -00:08:54,600 --> 00:08:57,480 -Unknown: So So what are your points that now and negative 10? - -37 -00:08:57,630 --> 00:08:58,830 -Wes Bos: Yeah, killing you. - -38 -00:08:58,980 --> 00:09:06,120 -Unknown: Okay, I spoiled that. What was that negative 10 to before this, how much does it it that much does it cost to register that bch? - -39 -00:09:06,480 --> 00:09:10,230 -Wes Bos: I'm gonna go with $89 a year. - -40 -00:09:10,550 --> 00:09:12,270 -Unknown: It costs 6999 - -41 -00:09:12,330 --> 00:09:15,170 -Wes Bos: Oh, nice and close. - -42 -00:09:15,330 --> 00:09:16,800 -Unknown: Yeah, grumpy. I - -43 -00:09:16,800 --> 00:09:18,360 -want to grow it over here. So - -44 -00:09:18,360 --> 00:09:34,670 -Wes Bos: you're at zero right now? No 10 point difference bringing you to zero. Okay, so is Scott dot b z h in West Bz h valable. I'm gonna say Scott that Bz bch is taken in Wes is available. Okay. - -45 -00:09:34,829 --> 00:09:47,340 -Unknown: You are correct on one account. They're both available. So you owe a score of negative 10. Oh, worked on that pricing. 111 200 bucks. - -46 -00:09:47,420 --> 00:09:53,900 -Wes Bos: Dang. All right. Okay, and they give you a fun one. dot Banana Republic dot - -47 -00:09:54,000 --> 00:09:55,860 -Unknown: Banana Republic. - -48 -00:09:56,010 --> 00:10:01,710 -Wes Bos: Is this a country or a business? Or like a we shouldn't say country geograph Africa region or a business? - -49 -00:10:01,710 --> 00:10:03,650 -Unknown: I'm gonna say it's a business. - -50 -00:10:03,960 --> 00:10:06,390 -Wes Bos: That's correct. What type of business? Is it? - -51 -00:10:06,690 --> 00:10:09,920 -Unknown: Is it a clothing store business? Uh, yeah. - -52 -00:10:09,930 --> 00:10:17,130 -Wes Bos: Could you be a little bit more specific? a banana republic? Who owns banana? Republic? - -53 -00:10:17,219 --> 00:10:18,290 -Unknown: I'm gonna say the gap. - -54 -00:10:18,410 --> 00:10:28,080 -Wes Bos: Yeah, yeah. Man, do I get two points for that? That's, that's okay. Given it. All right. Good. How much per year? does it cost to register? - -55 -00:10:28,499 --> 00:10:37,020 -Unknown: Now? would anybody want to adopt Banana Republic domain? Ah, I'm gonna go ahead and say it cost 60 bucks. - -56 -00:10:37,379 --> 00:10:39,720 -Wes Bos: an unregistered bowl, on Register - -57 -00:10:39,720 --> 00:10:43,620 -Unknown: bowl. So what does that mean? How much money do I gotta lose for that? - -58 -00:10:43,829 --> 00:10:47,270 -Wes Bos: Well, you were it was zero and 60 is? Yes. - -59 -00:10:48,360 --> 00:10:53,640 -Unknown: I got 160. And this pointing very skewed towards these number values, which apparently, - -60 -00:10:54,120 --> 00:12:52,110 -Wes Bos: don't give me the answer for the next one. Yes. Is Scott that West? Yes. They're both available. So yes, give me 10 points back. Thank you. For 20 points back. Okay. So I have 140 points West, you have negative 10 points. Are you ready for your next challenge? I'm ready. Bring it on. All right. We're gonna do dot baby. Bat Why? Oh, the Isle of baby. Is that to say that's a business? Uh, I don't think it's a business. Well, it's not a geographical like, it's not a country. It's not a geographical region, is it? No, but it's just generic. Okay. Yeah, that's what you mean. Like, it's it's obviously a business registered that so they could make money selling baby? Oh, I see what you're saying. Yes. Yeah. Okay. Yes, it is a business. Okay, and what type of business? Or is it? Is that an actual business? I'm gonna say it's just a type of business. So for baby related businesses. I'm trying to find out to be honest, let me see. Here it says if you go to one one domain.com Ford slash baby dot htm it says the purpose of baby dot baby domain name extension is to create online space where people can connect to a worldwide network of parents as well as goods and services aimed at parents. Hmm. So you're wrong. So you know, I said it's for I said, it's for baby related businesses. Okay, that's not the right parents. You miss the P word. The parent the parent. Babies can't use the internet, I guess. Okay, so you are sitting pretty at negative 20 points so far. How much does it cost per year? Two register, dot baby. I'm gonna say 20 bucks. You're wrong. It's 80 bucks. Oh, that's a - -61 -00:12:52,110 --> 00:12:52,680 -Unknown: lot. - -62 -00:12:52,680 --> 00:12:59,400 -Let's just add a 62 year total here. Thank you. Sorry. So you're a positive 40 Thank you. We have a difference of 100 points now. - -63 -00:12:59,490 --> 00:13:32,310 -Wes Bos: Oh man, you're catching up late Well, now it really is West West that baby and Scott baby available? I would say both are available. They are both available. You know what I should when I tested this domain? I should have checked if I should have done the pricing based on Scott that baby I did the pricing based on West baby and the price he for some reason West baby 80 bucks. What about Scott that baby 300 bucks that would have put me in first place. - -64 -00:13:35,160 --> 00:13:35,670 -Unknown: Oh, - -65 -00:13:36,150 --> 00:13:41,100 -Wes Bos: man. So funny. That's a premium domain name. Yeah. - -66 -00:13:41,130 --> 00:13:42,270 -Unknown: Dang. - -67 -00:13:42,300 --> 00:13:43,500 -Wes Bos: Oh, that is great. All right, let - -68 -00:13:43,500 --> 00:13:52,980 -Unknown: me find another good one here. By the way, for those of you listening to the current score is 140 for me, Scott and 20 points for Wes - -69 -00:13:53,040 --> 00:13:54,570 -Wes Bos: lower is better so I'm winning. - -70 -00:13:54,570 --> 00:14:00,780 -Unknown: Lower is better. So Wes is currently winning but all it takes is one Scott that baby to change this whole game. - -71 -00:14:01,110 --> 00:14:05,970 -Wes Bos: This list is massive. I gotta go with.kr - -72 -00:14:06,449 --> 00:14:08,790 -Unknown: o I'm gonna go ahead and say it's a country. - -73 -00:14:09,240 --> 00:14:14,010 -Wes Bos: It is a country correct? Yeah. You What country is it for? - -74 -00:14:14,189 --> 00:14:20,820 -Unknown: I feel like it's it's gonna be one of those. Like, I'm gonna say Kurdistan or one of those comments a Kurdistan. - -75 -00:14:21,240 --> 00:14:26,970 -Wes Bos: Is that your final answer? It is incorrect. It is South Korea. - -76 -00:14:27,240 --> 00:14:31,470 -Unknown: Yeah, I knew I didn't think it was Yeah. Oh, that makes so much more sense. - -77 -00:14:31,829 --> 00:14:43,950 -Wes Bos: Yes. How much does it cost to register a.kr domain name I mean to use the starting at value here just to be clear, it's a starting at this much per year. - -78 -00:14:44,130 --> 00:14:45,870 -Unknown: Where do you find the starting value? - -79 -00:14:46,170 --> 00:14:48,330 -Wes Bos: This is on one on one domain comm - -80 -00:14:48,660 --> 00:14:50,490 -Unknown: you have a weird like when you type in - -81 -00:14:50,580 --> 00:15:37,920 -Wes Bos: if you go to 101 domain.com Ford slash kr dot htm Yeah, they have like a little landing page every single one. It tells you what it starts at yet. Yeah. Okay, cool Korea South Korean domain name, South Korean domain name qkr. I'm gonna go and say I'm going to stick with my my number, which is not that successful for me. I'm gonna say somewhere around 60 bucks. Oh, that's good. 50 Oh, so I'm still 100 No, I'm at 150 Oh, 100 No, because I got negative five bringing me down to 135 then I got positive 10 so 145 Okay, he had a fall, and it's gotten West available. I'm going to say yes to both. They're both available. And both are unavailable. - -82 -00:15:38,819 --> 00:15:44,130 -Unknown: 20 points. No, I get to keep I don't add anything. I don't lose anything. Stay. - -83 -00:15:44,490 --> 00:15:45,840 -Wes Bos: Only if you get it, right. - -84 -00:15:45,900 --> 00:15:47,400 -Unknown: Yeah, that's how we've been doing it. - -85 -00:15:47,610 --> 00:16:28,950 -Wes Bos: Okay, okay, maybe we should, should put this. Oh, Scott. That VIP is 600 bucks. Whoo. All right. So I will let's do I'll do mine. And we'll do one more each. This is kind of fun. Yes. I'm finding this to be very fun. Hopefully. everyone listening is finding this to be fun. We Okay, I got a good one for you. And I think this is gonna be very interesting. So good luck. This is a dot, moto. moto. Okay. I must say it's a business is a business. Okay. I going to say it's Motorola. - -86 -00:16:29,400 --> 00:16:42,750 -Unknown: It's not Motorola. Moto G would would you like to hear what it's for? Yeah. moto is. A it's a generic for websites about motorcycles, cars and trucks. - -87 -00:16:42,930 --> 00:17:33,050 -Wes Bos: Oh, wow. Interesting. Yeah. So not moto I actually, it's funny. I thought it was going to be for Motorola too. And I looked it up. So that's how I knew it was going to be a good one. Okay, so how much per year does a dot moto cost? If you want to register? You know, West Moto, I say 50 bucks a year. 50 bucks a year? Well, unfortunately for you. This is not available yet. Oh, so you get to add 50 bucks to your total 65 meaning I'm still double behind you. So are double Yes. Double behind you so. Okay, so neither of them are available. That's it. Oh, I think I got a good one. Oh, man. I love this. Doc dot A W dot a. w. m - -88 -00:17:33,080 --> 00:17:35,700 -Unknown: country or a business? I'm gonna say - -89 -00:17:35,840 --> 00:19:13,530 -Wes Bos: country correct. Wow. Yeah, I would have guessed this for you guys have the burger chain a NW down there? We do. I don't know if they have them in Denver. But we have them in here. I would have guessed that. It was like for a NW but it's not it's it's a country. I don't know if I would have guessed that. I don't really think of a AWS that much. No, no, I don't think the super popular. Oh, they're all over Canada. That could be the next controversial thing I say in this this podcast. Okay, so a W what is a W stands for country? Is it for what country? I don't know. We'll say Antarctica. No, no, although I did look up my article before this game was like aq, so it's close. W is a Roomba. A Roomba? Yeah. Okay, cool. Yeah. So how much does an urban domain name cost? And the Reuben domain name what it starts at? Yeah. Starting at Aruba domain is going to start at $60. That's gonna keep my number 90. It's pretty close. Hey, so plus 30 plus 30. So plus 30. And it's got that AWS and West AWS available. Yeah, they're both available. They are correct. Yay. So that brings me back down to 150. Which is the final for my score of this tournament. Right. 150 Okay, Wes. Are you ready? I'm at 65. So the price here could really botch it. The price could botch it. And I got a good one for you. - -90 -00:19:13,530 --> 00:19:16,350 -Unknown: I had a really good one. Yeah. - -91 -00:19:16,350 --> 00:19:23,600 -This is a dot. I am. I am. Oh, - -92 -00:19:23,640 --> 00:19:28,920 -Wes Bos: that's for sure. A country because I remember I am being around for a long time. - -93 -00:19:29,360 --> 00:19:34,770 -Unknown: Dang, you are correct. I was hoping you would confuse it with instant messenger. So - -94 -00:19:34,770 --> 00:19:45,300 -Wes Bos: no. Yeah, well, people use the IM for a long time for I am. What country? I'm going to say Indonesia. - -95 -00:19:46,100 --> 00:19:48,780 -Unknown: No, it is the Isle of Man. - -96 -00:19:48,960 --> 00:19:50,760 -Ah, - -97 -00:19:51,000 --> 00:19:59,570 -located in the Irish Sea. Yes. So No, you're wrong. It is the Isle of Man which I don't know how you could have guessed that. I wouldn't get that - -98 -00:20:00,659 --> 00:20:03,800 -Wes Bos: How much per year I'm gonna guess this 89 bucks a year? - -99 -00:20:04,169 --> 00:20:10,200 -Unknown: Ah, nope. It is not $89 a year. Unfortunately for you. Ah, - -100 -00:20:10,820 --> 00:20:13,920 -yeah. So no, - -101 -00:20:14,300 --> 00:20:19,820 -I think you are officially the winner, but it ended up being much closer than I got - -102 -00:20:19,820 --> 00:20:55,440 -Wes Bos: 120 Oh, wait, no, hold on. We got Scott. I am we got the last question to answer here. One Two. Well, yeah, you still gotta guess. Yeah, yeah, I know. I know. But you still Yeah, because God I am. is available in West I am is available, I'm guessing. Okay. Uh, Scott that I am is not available. And it doesn't matter. Either way. West I am is also not available. So no, your final scores. 20 points. Wow. Well, I got so I got what, 140? No, you're no you don't get you don't get plus points. Oh, yeah. You talked about that. Wow. Well, that was kind of fun. It's like golf. - -103 -00:20:56,279 --> 00:21:03,990 -Unknown: I can't believe it ended up this close. I mean, the after the first round, it was 100 to negative 10. After the second round was 142 20. - -104 -00:21:04,139 --> 00:21:08,760 -Wes Bos: If you didn't botch that first one. It would you would have just decimated me. - -105 -00:21:08,939 --> 00:21:14,520 -Unknown: Yeah. is all about what was the win the first one I don't even remember what it was. Oh, I got the country right to Oh, my gosh, - -106 -00:21:14,600 --> 00:21:32,160 -Wes Bos: yeah. You killed that with the country. Bolivia, add that to the soundboard. Bolivia. All right. Well, I know if you found that entertaining. I certainly did. I think we should do that again. Because there's literally thousands of other. - -107 -00:21:32,759 --> 00:21:40,290 -Unknown: There's so many. When I looked at this list, I was like, Oh, my gosh, there's just more than you can possibly even parse. So - -108 -00:21:40,310 --> 00:22:34,590 -Wes Bos: yeah. Because like, a couple years ago, they opened it up where you could like put in a application for a space. I think it was still like $100,000 to get a TLD. And I'm not sure what the the costs are to maintain that. But there you can get like there's New Holland. Oh, that's a good one. Is that the popular brewery in Michigan? Or is it the tractor dealer? Do this live? We should do a live PLD game with the audio. Yeah. But like, I have it like timed countdown. So you can Yeah, and we should be able to look at like a list of countries as well. I think that'd be kind of interesting. I don't know. Yeah, I think we just we just discovered something. All right. Well, that's it for this hasty treat. We're going to be back with a back you on Wednesday with a full on tasty treat. pumped about that one. Beautiful. Thanks for tuning in. Catch you then please - -109 -00:22:37,080 --> 00:22:46,890 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax18.srt b/transcripts/Syntax18.srt deleted file mode 100644 index c083b768d..000000000 --- a/transcripts/Syntax18.srt +++ /dev/null @@ -1,400 +0,0 @@ -1 -00:00:01,290 --> 00:00:02,790 -Announcer: You're listening to syntax - -2 -00:00:02,790 --> 00:01:12,659 -Wes Bos: the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott solinsky and West boss. Welcome everybody. Hope you're ready for some tasty treats. Today we're gonna be talking all about CSS Grid, the new layout, the new addition to CSS that allows us to lay out websites in in crazy ways and unfathomable ways. I'm really, really excited about it. Today's episode is sponsored by save a bro.com. So happy November everybody. And this is a saver, bro is what they're doing is they're selling t shirts to raise money for prostate cancer. And as you know, in Movember, what people do is they either don't shave or they grow. Huge mustache. And if you go to save a bro calm and pick up one of these t shirts, there's various one that says let it grow, bro. And then there's another one that says grow a mole save a bro. And all of the proceeds are going to be going to fight against prostate cancer. So we'll talk a little bit more about about these t shirts partway through but go head on over to save a bro.com Hello, Scott, how you doing today? Hey, - -3 -00:01:12,659 --> 00:01:21,329 -Scott Tolinski: I'm doing super good, super good. It's starting to get a little chilly. All ready to head out into the mountains pretty soon. Maybe try to get a shred session this week. - -4 -00:01:21,650 --> 00:01:26,129 -Wes Bos: sash. Yeah. Awesome. So is there already snow on the mountains? Yeah, - -5 -00:01:26,159 --> 00:01:43,650 -Scott Tolinski: yeah. And a lot of the some of the Walton, a lot of some other resorts open maybe like two weeks ago, one of them opened a week ago. My favorite couple of resorts are opening this week, I believe the 10th or something like that. So that's starting to certain get active here. That's pretty sweet. - -6 -00:01:44,640 --> 00:01:51,209 -Wes Bos: I feel like we should tell the story of what, just before we started recording. Yeah. - -7 -00:01:51,570 --> 00:02:14,750 -Scott Tolinski: Yeah. So to preface this, I had a note on our show notes, which was Wess family connection to CSS Grid. And so before the episode started, said, so so Wes, how much do you want me to get into your dad's contribution to CSS Grid? Which was just started cracking up? - -8 -00:02:15,750 --> 00:02:21,300 -Wes Bos: I was like, What are you talking about? Like, I don't understand what this is. Yeah, so - -9 -00:02:21,300 --> 00:02:26,400 -Scott Tolinski: that leads us back to an Ask me anything that was dead. I don't know. When you When did you do this? - -10 -00:02:26,400 --> 00:02:28,220 -Wes Bos: August a couple months ago? - -11 -00:02:28,250 --> 00:03:11,640 -Scott Tolinski: Yeah. And there's a question in here. That was, what's your What? Are you a relative of CSS co inventor, Bert boss, who Berg boss has a huge part in the history of CSS Grid. s. And Wes, his response was, yep, that's my dad. And I read that and just stopped reading there. And I was like, holy shit, that's Wes is dead cool. What I didn't read was further down after he had a bunch of spaces. There was a whole bunch of spaces between in this then there was this JK, I didn't even know that. So this whole time, it's been months since I read this article. I just assumed that was your dad. - -12 -00:03:12,180 --> 00:03:21,540 -Wes Bos: My dad like invented CSS. That is hilarious. I didn't even know that this guy's name was the same last name as mine, which is pretty sweet. - -13 -00:03:21,720 --> 00:03:26,760 -Scott Tolinski: Yeah, I'm surprised I haven't mentioned it before right now. That's hilarious. - -14 -00:03:26,790 --> 00:04:46,500 -Wes Bos: That is hilarious. We should get stickers Burton West. Oh, man, that is good. So that's not my dad, if you're wondering. And I thought that was funny, because when I did that ama, I figured out that if you put multiple spaces, it will just trim it to one space. But if you go online and find like the ASCII space character and paste a bunch of those in, it will like give you a whole bunch of blank space. Which is pretty funny to see breaking. Well. Let's uh, let's dive right into talking about CSS Grid. Pretty excited about this. I've been, I've been been toying with CSS Grid for about a year and a half. Now I've just sort of been maintaining a list of examples. And every now and then I go back to it and toy around with it when it gets added to a new browser. But we'll talk a little bit more about browsers before we're but we're pretty much at a point now where we can kind of go full steam ahead with CSS Grid. And I've spent all of last week I spent working on my CSS Grid course, doing lots and lots of examples trying to like, do a lot of examples. That's like very, how does it work? Like 123 boxes everywhere. That's kind of the fundamentals, but also like, when would you actually use this in like modern day layout? So I've been pretty excited about CSS Grid. Have you been you've been working with CSS Grid there, Scott? Yeah, - -15 -00:04:46,519 --> 00:05:40,620 -Scott Tolinski: actually. There is CSS Grid on level up tutorials comm right now. Wow. Because, honestly, if you're using my site to build websites, like, I mean, do I care if you're using internet To explore I don't know, progressive enhancement. Right? So for the most part, yeah, I've been using it and I haven't been I haven't dove full full on into it. I'm gonna say that right now, I don't know all the ins and outs. But I know, I know the basics. And I've built layouts. And I'm very, very excited for from what I've done. And I'm actually also working on not necessarily a CSS Grid course, but like a layouts course. Right? Just like a CSS layouts course. So because of that large exploration right now of like, practical CSS layouts, and, and that sort of stuff. So yeah, no, it's a it's a, I don't know, paradigm shifting. - -16 -00:05:41,040 --> 00:06:23,759 -Wes Bos: Yeah, it's, it's crazy that I think like, I haven't wrote a even with Flexbox. alone, I haven't wrote like a float base layout in probably two years. And now a CSS Grid, because sometimes with Flexbox, he had to do a couple hacks and stuff like that. Now with CSS Grid, it's, it's totally going to change kind of like a sink await totally changes the way that we write JavaScript, and grid and Flexbox. Together, we'll talk about like, what are the differences between those two, it's going to fundamentally change the way that we lay out. So if you are a web designer, web developer, front end Dev, get ready to have things shook shook up a bit, it's going to be a little bit of work to actually learn this, but it's going to be well worth it for the advantages that it gives you. - -17 -00:06:23,820 --> 00:06:34,170 -Scott Tolinski: Yeah. And on that note, about the last time you're out of float, I mean, I'm right there with you, I, I do not mourn the death of clearfix, I do not mourn the death no - -18 -00:06:34,170 --> 00:08:20,759 -Wes Bos: whatsoever. That was that was so painful. So I thought we kick it off and just talk about like the fundamentals grid is is massive. It's it's really, there's a lot to it. But I think that if you're a web developer, the fundamentals of it is mostly what you will be using, I think like, they're like the first like 30% of greatest what you'll be using most of the time. And then as you get into more complex examples, you can get into naming your tracks and whatnot. So maybe we can both sort of take a stab at explaining what is grid, and then we'll we'll go into sort of the different pieces of it. So, um, grid is a new layout engine in the browser. So instead of having display block, or display inline, or a couple of years ago, we got display flex, we now have display grid. And what grid allows you to do is to take an element like a div, and slice it up into a grid of both columns and rows. So if you think about it in terms of like a spreadsheet, you can determine how many columns are there? And how many rows are there? And how big are the columns? And how big are the rows and and then the elements inside of that grid, you can also determine how big are those elements? How do they span multiple columns or rows, or do they span one or two rows that you have in there. So it's kind of neat, because now instead of taking a div, which was the blocked div, which was just a square, and then to in order to size stuff inside of it, you always had to size the children, you now take that parent container, display grid on it, and then you can slice it up into rows and columns, which are called track. So that's sort of my one on one understanding of it. - -19 -00:08:21,420 --> 00:09:22,740 -Scott Tolinski: Yeah, and I mean, that's, that's really, I mean, the best kind of Overview Description of it, it's, it's as you can think of, it's a great, you know, it completely replaces the need for any sort of class based CSS Grid System, in my opinion, I mean, you'll you'll never need to use that sort of bootstrap grid unless you want to go ahead and make those classes for yourself. Or I guess, I don't know if see if bootstrap implements CSS Grid stuff into their, their grid or whatever. But it totally removes the need to have a whole bunch of extra code in your project to handle all this stuff. Because one of the things that CSS Grid does so nicely, is it is able to build these complex grids with pretty minimal code. So yeah, I mean, the track rows spreadsheet, I mean, there's no better way to get a handle of it than to just think about a, you know, a to two dimensional matrix, you know, and that's, that's just really what it is. - -20 -00:09:23,850 --> 00:11:01,410 -Wes Bos: Yeah, exactly. So let's talk about the differences between it and Flexbox. And we're going to assume that you have a Okay, grasp on Flexbox during this entire podcast here. So the main difference between grid and Flexbox is that Flexbox is one dimensional, meaning that you you choose that your flex direction is either going to be a row, left to right or right to left, or a column top to bottom or bottom to top. And Flexbox does have the option to do a flex wrap wrap, which will bring those items on to the next line or on to the next column. But it's Primarily and then those items are all size the same same size on each row or each column that you have. But it is primarily used for a one dimensional layout where meaning that if you've got a bunch of elements, and you need to horizontally lay them out, or you need to vertically lay them out, that's sort of when you you reach for Flexbox. And with grid, you have two dimensional layout, meaning that you can control your grid both left to right and right to left, as well as top to bottom and bottom to top. And you can sort of mix and match where those items in your actual grid will be laid out. So it's pretty exciting, because I know that when we decided that we wanted to do grid based layouts in Flexbox, there was a lot of bugs that came along with things like margin and padding and trying to perfectly align spaces or that if you had like, a grid of nine items, but you only had eight, and you have this sort of extra space being added in there. All of those issues sort of go out the door when we actually move over to CSS Grid. - -21 -00:11:01,920 --> 00:11:36,030 -Scott Tolinski: Yeah. And I mean, I find the overlap to be really interesting. And I think we're still at sort of the infancy of like, when to efficiently use what in where? Because I mean, everyone's still growing. And once once everyone's using CSS Grid, I think that we will see, you know, a little bit more clear cut lines of when to use grid, verse Flexbox. I think it's still still a lot to learn there. But it's it's awesome, right? I mean, because grid can essentially do nearly, I don't know, can it do everything that like what, what is something that Flexbox can do that grid can't do is? - -22 -00:11:36,060 --> 00:12:58,230 -Wes Bos: Yeah, that's a great question. Because in there is a huge overlap between Flexbox and grid. So the general rule of thumb that we've been saying is that you use CSS Grid for, for layout, like general website layout, like your your sidebar goes here, and your header goes here and your navigation goes here and your content goes here and inside of your content, you split that up into three different pieces. And then you use Flexbox, for the things that are inside of that. Things that are sort of component based where you have to line it up. But that's that's not a hard and fast I wouldn't like I wouldn't live and die by those rules, because we're still trying to figure this stuff all out. And I think the other thing that's that trips a lot of people up is that there's often going to be use cases for when you use, you could use either, and it's going to be totally fine to be using either. And I tweeted something the other day where you could like, you could align like these like lines on the left and right of an h2 tag, because you can use before and after. And people got really angry that you could also use Flexbox for this with two less lines of code. And I was like I I'm sorry, I was just trying to show you how grid worked. And it's okay, if you use Flexbox. With that as well, it's totally fine. To use Flexbox, or grid, if they both do the same thing at the end of the day. And in many cases, still, you might want to just use Flexbox for that, because it has better browser support at the given time. - -23 -00:12:58,350 --> 00:13:35,910 -Scott Tolinski: Yeah, I know. And I find myself typically using Flexbox for things like if I have a couple of columns, and you want to justify, justify content space between their space apart, whatever, and just separate these two inside of their container quick and easy. Whatever, like that sort of stuff. To me, I usually jump to Flexbox in and then 90% of the time, it's mostly just because I'm been using it for so much longer. Now. I'm just very familiar with it. And so with, again, also browser support. But that's to say that the layout would probably be just as easy within CSS Grid. But yeah, to your your point about people complaining about that men bike shedding. - -24 -00:13:37,380 --> 00:14:16,410 -Wes Bos: Exactly. So I think like in in those cases, Flexbox would make sense because you don't have to go and explicitly define a grid, you just have to apply a like a flex grow a flex shrink and a flex basis on each of those children elements. And they'll sort of just figure themselves out based on how big they actually are. So every time I like run, every time I come up on one of these different layouts, I say like hmm, how could I do this in grid? And how could I do some Flexbox? And then I think after like a couple of months of us figuring out how would I do it in either we'll start to get a good feel for when you might want to do something in Flexbox and why you might want to do something in grid. - -25 -00:14:16,440 --> 00:14:22,650 -Scott Tolinski: Yeah, I think over time there will be at that de facto way. This is this is the way to do it. Mm hmm. Yeah, - -26 -00:14:22,650 --> 00:14:23,490 -Wes Bos: exactly. - -27 -00:14:23,760 --> 00:15:20,010 -Scott Tolinski: I'm talking about like learning research, like how did how did you learn CSS Grid or like, well, what would you recommend? Because I see like games and stuff like that, for me. I learned primarily through just reading blog posts, but like there's I mean, there's some excellent, excellent blog posts like this CSS tricks, always has like they had like the definitive Flexbox article with pictures and graphs of like, these are the properties and here's how it works. And they have the same thing for CSS Grid that complete a complete guide to grid and I found these these pages to be just excellent. I mean, one for Flexbox. And the one for grid, they show you all of the properties, there's nice visuals, there's nice images to sort of show you what the properties are doing. And I just find these display to be a great way to learn if you're a sort of visual learner. But yeah, do you would you know of any excellent learning resources? - -28 -00:15:20,400 --> 00:16:34,020 -Wes Bos: Yeah. So the first thing that I did in this the same way learn Flexbox is I went to the CSS tricks article, because they have this is one page is absolutely everything on it. And some really nice quick little diagrams. And that got me up and running with like, what are all the possible different situations on it, I read a bunch of different articles on it. Rachel Andrew, who was part of making CSS Grid, over the last, I don't even know how long this took, I think it was like, like, five, six years to get this thing in the browser. And Rachel, Andrew was a huge part of getting that working. So she has this awesome website called grid by example. And the part of it, she's got videos and stuff like that. But the part of it that I went into is just, she has these patterns where they're just sort of common different layouts that you have. So I took a look at a couple of those played with a couple of the code pens. But really, for me, it was just about over the last six months or so every, every time I had a half an hour. So I would just like take a layout that I was thinking of and figure out how would I build this in CSS Grid and as you after you build three or four things, and that's especially after you build real things, rather than just trying to put block numbers on an actual grid, it starts to start to feel a little bit better. - -29 -00:16:34,080 --> 00:17:02,430 -Scott Tolinski: Yeah, you got to get your hands dirty. And that's what any of this stuff do. I remember being very confused about like, what the heck Flexbox I mean, I knew Flexbox was awesome, and I knew was gonna save me a bunch of time. But when you're first learning it, you're sure like, this is a bunch of new terminology and new CSS properties. And there's a lot to go over here. But you know, you you start to get that stuff just really cemented the more and more you you click through it, and the more and more you actually get your hands dirty and put it into real world practice. Yeah, - -30 -00:17:02,460 --> 00:17:36,570 -Wes Bos: yeah, um, the one more one other resource that I know a lot of people have been recommending to me is called CSS Grid garden, which if you learn Flexbox via Flexbox, Froggy, or you jump over and stuff like that CSS Grid garden will it gives you like carrots and then you have water and you need to put the water over top of the carrots so I don't know that it's pretty neat. I don't I don't learn too well in in games like that are much rather just actually build something real world but I know a lot of people really enjoyed the Flexbox Froggy. So if you if you like that check out CSS Grid garden calm as well. Yeah, - -31 -00:17:36,570 --> 00:18:20,840 -Scott Tolinski: I'm right there with you. I mean, I I really, really enjoyed that site. But I don't know if I learned well from it. Same with Flexbox ragi. You know, they're they're cool resources. They're definitely pretty amazing feats of educational material. And if you want to learn about the history, there's a there's an awesome post on a list apart and actually just got pushed to the I believe the web dev Reddit today. But it was the the story of CSS Grid from its creators. It was published in October 19. By erina. Gustafson, Gustav sun, said that Yeah, is just a great history of of the grid itself, you can read a lot about Wes was is dead. And then that post, - -32 -00:18:21,860 --> 00:18:52,230 -Wes Bos: I should also give a shout out to Jen Simmons as well, she, her and Rachel Andrew have been speaking at conferences and working on this back in putting all kinds of examples out there. So I think whenever you say anything CSS Grid, you sort of have to include Rachel Andrew and Jen Simmons, because they have been like, tirelessly working on informing and helping people understand what this thing is for last, like many, many years, yeah, check out jen simmons.com. She's got lots of great content on that as well. - -33 -00:18:52,260 --> 00:18:59,060 -Scott Tolinski: Yeah. And make sure to follow them both on on Twitter to cuz that's, I mean, there's just tons of great resources all the time being posted up. - -34 -00:18:59,910 --> 00:20:31,200 -Wes Bos: Exactly. And even Rachel, Andrew has a like, ask me anything specifically for grid on GitHub. And you can just go through all the different questions like I had a question, and maybe we can kind of go into this is, how do I do a Pinterest base layout in CSS Grid, and I asked her that on on GitHub, and she came around, she was like, that's not what grid is. And it actually kind of, I always thought it was like just this like kind of nice block fitting thing. But it's it's not that at all. So you take your grid and you chop it up into your rows and columns, which are called tracks. And then you place your items in those tracks. And each item can span as many columns or rows as you want. But the thing about it is that it doesn't do that Pinterest based layout where if you have five items across the first row, and they're all variable height, then the next row is not going to automatically block fit themselves into each of those and just take up all the space. That's actually what CSS columns are made for. So CSS column We'll, we'll take your items in and put them into as many columns as you want. And all the all of the content will fit snugly underneath each other. The one downside to CSS columns is that the content goes, if you're visually viewing this goes one, two underneath it, three underneath it. And then four goes in the next column, which is generally not what you want. So there's some talk about having like a CSS columns direction property, which would allow your items to lay out left to right, rather than top to bottom and wrap around it to the column. Yeah, - -35 -00:20:31,230 --> 00:20:57,560 -Scott Tolinski: I think between that or like a Flexbox, direction vertical with a wrap, you know, on it. I think those are like the two closest options we have right now to doing the Pinterest style, the masonry layout with just CSS. I know that's a question all the time, like, how can I do this with just CSS? Well, that's as close as you're getting, you're not getting the true masonry or whatever, without using some Java. So there's - -36 -00:20:57,590 --> 00:22:48,570 -Wes Bos: always some sort of downside, you have to use JavaScript. So if you use, everyone always tells me you can use Flexbox for that, but you can't, because your flex wrapper needs to have an explicit width on earth explicit height, which if you're doing infinite scroll, or you doing anything, where you don't know the height of your container, that sort of goes out the window as well. So I did do one example on Twitter, because CSS Grid does have this thing called dense. So by default, maybe I should talk about this by default, what will happen is that CSS Grid will lay out your items as it can fit them. And then if you so if you have like three items, and they all fit nicely snug together, and then you have a fourth item that's too big, either vertically or horizontally, it will just move it until it finds it until it finds like let's say it's two by two, until it can find a space that is is big enough. And then what happens is you start to get these holes in your CSS Grid, because those items can't fit. So what you can do is you can set your layout mode in CSS Grid to dense, and then it will take it what it will do is every time it has a new item to place on the grid, it will go back to the start and to see if it can like fill a hole or box fit it anywhere that it could possibly want. So what I did is I created a bunch of images that were all 100 pixels based. So some images that were 100 pixels by 100 pixels, some other images that were 200 by 200, some others that were 200 by 400, some others that were 400 by 200, right, they're all hundred pixel based. And then if you have a bunch of extra hundred by 100 pixel images, and you set this to dense, all of those extra hundred pixels, ones will always go back into all of those holes and sort of plug them in, you get this nice, like beautifully fit thing where you haven't didn't have to do any math to figure out where these these items go. So that's as close as you can start to get to masonry, if you think ahead of time how big these items will be. - -37 -00:22:48,780 --> 00:23:39,300 -Scott Tolinski: Yeah. And that to me, honestly, that's not a tenable solution, if you have that content that works that way. But again, yeah, you know, you can always reshape your content to fit your, your, your grid. Yeah, so let's talk about browser support, and polyfills. And that kind of thing. Because for a lot of these CSS properties, what happens is they come out for a couple browsers, and all of a sudden, you want to use them. So you go look up a polyfill, or just any sort of way to get back and have that browser support. And I think a lot of people were, I don't know, put off by using CSS Grid immediately, because there's no polyfill for it, right? There's no drop in and all of a sudden, this works on your old browsers. Because it's just way too complex. There's - -38 -00:23:39,300 --> 00:23:46,500 -Wes Bos: no way you can write a polyfill for all of CSS Grid, there would be brutal, so many features for it there there, isn't it? Yeah, - -39 -00:23:46,560 --> 00:24:19,110 -Scott Tolinski: it would be very difficult. And yeah, I don't I just don't know if that's possible, practical at all. So because of that there is no polyfill for CSS Grid, which means that you are sort of stuck with the browser's that can handle it can handle it. And you have to sort of be you know, if you're going to use CSS Grid, you have to know if your audience is going to be able to support it. So what kind of backup plans can you have four? Well, browsers that don't support CSS Grid. I mean, yeah, well, - -40 -00:24:19,410 --> 00:26:06,270 -Wes Bos: yeah, let's talk about what browsers don't support CSS Grid right now, because we're actually in really good shape. The thing with Flexbox is that they developed Flexbox behind a prefix, so you always had to do like WebKit display box. And then there was a couple, and they decided not to do that for CSS Grid. And that's kind of the way that new CSS features are being built now is that you have to go into your browser's features and turn these things on if you want to try it so that nobody goes ahead and uses it too early or prematurely before all the browser's have gotten along. So in the last year, it's kind of like all the browser's just flipped that switch and said, okay, it's good to go. We have browser support, obviously in Chrome, Firefox, Safari, opera, iOS Safari, we have it in, we just shipped in Microsoft Edge, which was like the last major one that we're waiting. And then where Don't we have it? Well, we we have like, there's an older version of grid in IE 11, which I know a lot of people are in corporate world are still stuck with iE 11. So that's sort of a bit of a downside there. But I think that's that's quickly going away. I wouldn't worry too too much as currently, what 3.22% globally, but again, that might be 50% of yours. And then we also have so other than iE 11. We've got some other ones, which is UC Browser for Android. I know that's, that's pretty popular in different different countries around the world, you can't forget about those Samsung internet browser. And that's on a lot of phones and tablets. So that has a fairly large, again, it depends on what type of people are visiting your website. And then qq and Baidu, Baidu. Those are really big in China that you need to know about. - -41 -00:26:06,300 --> 00:27:25,620 -Scott Tolinski: Yeah, and you don't you don't think occasionally about browsers like the Samsung browser, right. But like, my wife uses a Galaxy phone. And she, you know, though it comes with an app browser, well, she downloaded chrome and knows and uses Chrome, I would venture to guess that most of the people who have the phone will just use the browser, just like most people have an iPhone are going to use Safari, and then the people who want to use Chrome can go grab that. So you know, there are these browsers out there that don't necessarily make its way into our, our thinking of browsers that we need to think about, but they are used pretty heavily. So definitely glad I was really glad to see the Samsung one because I recently did a bunch of testing with the Samsung browser. And I was just like, on some power. Yeah. But uh, yeah, so so. So that's great. I mean, it if you go to Can I use for CSS Grid, the amount of green that we're seeing on this is just extremely positive. Right? You know, what, it's unwell, obviously, unprefixed. But it's what nearly 70% or 75% of global browser support. Yeah, and I think that will jump quite a bit now that it like I think just two weeks ago is shipped in edge. So once everyone has that sort of update cycle, it's gonna come, - -42 -00:27:25,620 --> 00:29:24,090 -Wes Bos: it's gonna come pretty quickly at us, which is, I think, don't sit around whining about browser support right now. Because like, before you know it six months a year, I think that we're going to be in a spot where it's, it's very commonplace, and you're going to be able to use it even even now. So like, let's talk about that. What are what are our options when you don't, you can't use it. So the thing isn't just don't use it at all. The idea is that you can have progressive enhancement. So for a lot of these mobile browsers that don't support it. And a lot of cases, you're not actually using the complex grid layout anyway. Because you're on a mobile and a lot of cases, your mobile layouts are very, very small. Yeah, yeah, they're vertical, right? So but then you you can't like there's this whole, like progressive enhancement, rah, rah. And there's a lot of people that are saying, like, just serve your mobile experience, ie 11. But I think, Sarah, let me pull this up here. We'll pause it a second. Sarah studion had a tweet the other day, which I thought was perfect for the show. It said, if someone thinks progressive enhancement means providing a crappy experience for older browsers, and they've got a lot of reading to do. So as much as a lot of us who are in the like cutting edge web development space want to be like, like, who cares serve the mobile experience that you love? And that's their fault, right? Like, if you're making money on the internet, and your sales start dropping on iE 11? You got to make that work, right? So you can't just do that. You can't just serve them the mobile experience. So in that case, what do you what can you do? Well, what I would probably do is go back and curry code just it for IE 11, in either float based layouts, or or Flexbox. layout in IE 11. And then as soon as you drop that you have all of that code that you can remove from your thing. And it doesn't your website doesn't need to look exactly the same in every single browser. But still make sure that you're providing like a decent experience to your users who are on these browsers that do not support grid. - -43 -00:29:24,110 --> 00:31:09,630 -Scott Tolinski: Yeah, in a couple of things to go along with that is, is do know, your audience, because like, like Wes mentioned a minute ago, like globally, the percentage of x browser, whether it's IE might be like 3% usage. But if you go into your analytics and see that that browser is used by 20% of your audience, you know, that you can't use those statistics or those percentages for usage and you need to greater accommodate for those people. Likewise, if you see that your audience's point 01 percent usage of iE 11 then, you know, you don't necessarily have to do it. I mean, it Like a nice way for that for that tiny little bit depends on what those people are. If that's like two people. I don't know you don't again, you don't want to serve a bad experience. But is spending, you know, five hours writing fallbacks for everything worth your time for like two or three users? I don't know. It's a question you have to ask, ask yourself and whatever. But yeah, that the nice thing about CSS Grid is that if you write CSS Grid, and the browser doesn't support it, it's not going to error out. It's simply just not going to use that CSS Grid. So if you write everything under the, you know, the idea that it's a CSS Grid, and then you write your fallbacks for the stuff that needs fallbacks for progressive enhancement. the browser's not going to care and your your future browsers if you're doing like, was it like feature flags, or whatever you want to say, like feature classes? It's to know that the browser support is there to target features specifically, then you can write your fallbacks that way and, and make sure that, you know, nobody's getting a bad experience. But the nice part is, is it doesn't break anything to just start writing CSS Grid. - -44 -00:31:10,290 --> 00:31:59,160 -Wes Bos: Yeah, exactly. I'm looking at my stats right now, for my learn node.com, which I would assume is mostly web developers going to that website. And I have 0.48%, Internet Explorer. So not half a percent Internet Explorer. And then edge is 0.42% or less edge users than Internet Explorer is, but then again, it's it's a very, very small amount of users. And then Samsung internet browser users, which is one of the ones that you have to care about if you're supporting grid 0.25%. So obviously, I'm a web developer, most people are coming in on 80% chrome are coming in on am Well, that's interesting. 10% Safari 7%, Firefox, more Safari users on Firefox. Interesting. That is surprising. - -45 -00:31:59,610 --> 00:32:21,150 -Scott Tolinski: Yeah, I think we have the benefit of most of our users of our web content being tech people, they're going to be on the forward edge and our statistics are going to be skewed in that direction of the people who are actually have the finger on the pulse a little bit more than the people who are stuck in it, maybe a corporate environment where they're they're stuck with a certain specific browser that they have to use. - -46 -00:32:21,600 --> 00:33:38,280 -Wes Bos: Alright, we're going to talk a little bit more about our sponsor, which is save abroad calm and save abroad calm is selling t shirts to support fighting prostate cancer, which is done by the Movember foundation. So these are pretty funny t shirts. And if you want to support save a bro head on over to save a row.com and pick up one of the T shirts. So saver bros mission is to spread awareness for men's health by selling mustache t shirts to propose to support and promote No Shave November which raises money to fight prostate cancer, cancer, among other things. So there's two options, I got the let it grow bro shirt, and then they have a grow mo save a bro, which is hilarious. These t shirts are only 18 bucks. And all of the proceeds are going to be going to the Movember foundation. These are not cheap shirts, they are really nice, good quality cotton shirts that you can have. So again, you pick one up, you can be supporting the Movember Foundation, as well as being able to get a really nice t shirt. If you use the code syntax, you're going to get free shipping in the United States, they don't even have to worry about throwing down an extra 10 bucks towards using that. And that will cover if you want to buy two or three shirts. - -47 -00:33:38,459 --> 00:33:45,150 -Scott Tolinski: Yeah, and they are like as I said, they are soft, man, they're, they're the right kind of soft for a T shirt. So thanks - -48 -00:33:45,150 --> 00:35:19,860 -Wes Bos: so much to save a bro for sponsoring. If you have it in you please go to save a row.com and pick up a T shirt use a code syntax at checkout, you're going to get free shipping in the US. And make sure you tweet out your picture of your T shirt. Let us let us see your your bro t shirt. And also if you're growing a mustache or a beard, this November would also love to see it at syntax FM. Let's keep going with CSS Grid. Actually, I want to talk about one one kind of cool thing about a CSS Grid that I didn't expect it to be in the The cool thing about CSS Grid is that you can overlap CSS Grid Elements on top of each other. So if you were to slice up a div into a grid, and then you have your create items inside of that you can put them anywhere you want in the grid, including behind or over top of other grid items. So one really neat thing about this is that it's going to actually replace the need for position absolute in a lot of use cases. So you don't have to, to worry about use the position absolute and all those sort of headaches. You know, we've all done the whole position absolute top right, bottom left zero, try to stretch a div across a screen or make it 100% wide or anything like that. We'll see That's great, you just put them exactly where you want them to go. And if you want them to span the entire width, you just say, you can tell it to go from track one, all the way to track negative one, and it's going to span all the way across. And then if you make your items position relative, your z index will be respected hundred percent there. - -49 -00:35:20,150 --> 00:35:58,770 -Scott Tolinski: Yeah. Again, these like little takes tips and tricks and stuff like this, I feel like they're just going to, they're going to flood out, the more people that get their hands on it, because everyone's going to have just a slightly different creative eye to look at it and going to find things just like that. And all of a sudden, I think we're going to have just this wealth of new techniques and new tools for creating the same sort of stuff. That was a pain in the ass to create before. And that, to me is just so endlessly exciting, because obviously no one likes things that are a giant pain or require, you know, six or seven lines of CSS that, you know, you could accomplish in one or two. - -50 -00:35:59,420 --> 00:36:30,710 -Wes Bos: Exactly. So much cleaner, I want to give a shout out to Benjamin de Kock who initially posted that to Twitter. He is a designer at stripe he is responsible for a lot of the like beautiful things that you see coming out of stripe and all these amazing websites. And he has been actually coding this grid in production at stripe for a while now. And he often has quite a few tasty treats that he posts up on his Twitter so he's at BDC make sure you go ahead and follow Him for for tasty treats. - -51 -00:36:32,760 --> 00:36:43,050 -Scott Tolinski: tasty treats, and you know, I mean, stripe is stripe is the place for for design tasty treats, and devs Dublin got that they're just absolutely excellent. - -52 -00:36:43,169 --> 00:36:45,150 -Wes Bos: Some of the tastiest I've ever encountered. Yeah, - -53 -00:36:45,150 --> 00:36:46,460 -Scott Tolinski: right, for sure. - -54 -00:36:48,570 --> 00:38:08,460 -Wes Bos: So that's overlapping Another thing I get questions about all the time is animating CSS grids. So how does that work? And unfortunately, there's not a whole lot you can animate with CSS Grid. So with Flexbox, you can you can transition flex grow. And that will just sort of like go from flux for one to flex grow 10. And it will just make itself nice and bigger. And currently I know this might change Currently, the only thing that you can transition in CSS Grid is grid gap. So when you define a grid, you can set the grid gap. And that will define how much it's been as much like margin where it will put space outside of your columns and outside of your rows. And if you were to change your grid gap from 10 pixels to 100 pixels, and you put a transition on that it will grow itself without having anything else. But even then that's only Firefox, right? That was the only Yeah, sorry, I forgot about that. It's only Firefox. So no other browsers currently support that, which is a bit of a power because I love when CSS transitions just work when you transform something or pass it to something and you change it on hover, or you change it when you add a class and then we'll just figure out how to get from A to B. That, unfortunately, is not the case with CSS Grid. - -55 -00:38:08,480 --> 00:38:43,260 -Scott Tolinski: Yeah, if there's one thing that would i would be considered the biggest bummer of CSS Grid, I would say that's it. Because, you know, personally, I love working with in browser animations. And I would love to see some really beautiful layout transition animations. I mean, just I my brain goes immediately to all of the great transitions, you could do animating some of this stuff. But you know, I will accept CSS Grid very, very happily with without animations. And I'm not going to, you know, dwell too much on that. But it would be cool. - -56 -00:38:43,880 --> 00:39:12,480 -Wes Bos: Yeah, let me let me tell you about about how I did get it to work because I posted some tweets last week about how I did get CSS Grid to animate. And it was because I went to when I was at CSS dev comp a couple weeks ago, David k piano, who is prolific code Penner and CSS, er, he did this talk on this thing that I had never heard of, and it's called flip animations. Yes. And what flip animations are is what does it stand for? - -57 -00:39:14,010 --> 00:39:17,670 -Scott Tolinski: I actually use flip animations on my site considerably. So - -58 -00:39:17,939 --> 00:40:50,310 -Wes Bos: really, oh, so it's first, last, invert and play. And the idea is that you have instead of having one element that you just transition from one to another, is you maintain like double code, which is a bit of a power because you have to have two sets of HTML. But what flip will do and he has this cool library called flipping is that when you go from one item to another item, it's going to figure out what changed from A to B's and then it will transform your elements from A to B. So what I had done is that I just had two different grids, and then what happened is If you change from grade one to grade two, and then it's going to line up all of the matching flip items. So if if grid item one is matched to grid item one on the next grid and grid item two is lined up to grid item two on the next grid, it will figure out where it needs to come from and where it needs to go to. And then it will transition it between the two, which is so cool. And that's how a lot of these really neat. Animations actually happen. If you've ever used like Android or iOS app, and you get this really cool transform, apparently, that's how it's all done. And he wrote this really great library called flipping, that will allow you to use web animations API, that's the one I was using. Or you can use green sock or anything like that in order to, to animate it from one to another. So it does require JavaScript, but it is possible. - -59 -00:40:50,340 --> 00:41:53,360 -Scott Tolinski: Yeah. And man, that flip stuff, I mean, you can get really, really smooth 60 FPS animations using that technique. And that's definitely one of the one of the cooler parts about it. If you were a react person, there is a CSS transition sort of library called react, flip, move, React hyphen, flip, hyphen, move. And it's extremely performative performance, gosh, okay, performance transitions using, essentially the flip technique, and it takes all of the guesswork out of it. Now, granted, there's only like a few examples you can do that the library isn't like, doesn't do everything for you. But if you want a very simple animation, for instance, the level up tutorials forward slash tutorials like my tutorials page, those animations that come in where the tutorials load up there that's actually using this package. It's flipping those in, and it's using this this grow animation from here. But it's awesome. It's awesome, because it's zero configuration, and the animations are - -60 -00:41:53,360 --> 00:41:58,560 -Wes Bos: still here, your code because react will just create a new element when it mounts, right. - -61 -00:41:58,710 --> 00:42:30,540 -Scott Tolinski: Yeah. And it's great. Like I said, it's not the most flexible library. But anytime you're using transitions, or anytime you're using transforms, this thing will do it for you, you can write your own transforms or anything like that. And it does it with absolutely no configuration. And super smooth, super beautiful. One of the things I really like about it is you can stagger really easily and you can stagger a delay. So there are definitely a lot of really nice, cool things that give your animations some life here with no effort if you're a react folk. - -62 -00:42:31,380 --> 00:42:51,330 -Wes Bos: Not so cool. So check that out, we should maybe have another entire thing on like animations and transitions in the browser, because I had no idea about flip until like three weeks ago. And now my I was just like, Wow, this is amazing. I can't believe that I didn't know about this. Do you want to flip everything? Yeah. - -63 -00:42:51,600 --> 00:44:00,900 -Scott Tolinski: So now let's talk about dev tools. Because with any of this stuff, you know, the tools that you use to build it are just as important as the stuff itself. And you know, one of the great things that Dev Tools has done for us, it's allowed us to work very efficiently and test things out and code in browser and see things update in action. And as far as Dev Tools go for a CSS Grid, the Firefox, CSS Grid inspector is like one of the coolest things I feel like has ever been shipped inside of browser dev tools, period for you know, doing any sort of CSS. And to give you basically a an overview, it's a visual representation of your grid, and you can see it in action. And you can interact with your grid. And it gives you the nice sort of highlighting when you highlight over like the dummy grid onto your actual code and stuff like that. It's really just a brilliant way to see your grid and see your site in actual ways. So that I don't know you know exactly what's going on, in my opinion, like these dev tools are some of the best ways to really get a handle on what exactly is going on with your Yeah, - -64 -00:44:00,900 --> 00:46:16,410 -Wes Bos: I'm sure you're running into this just listening to this podcast, it's really hard to visualize this stuff. And because grid makes these things like rows, columns, gutters, grid areas, they're not elements, but they are these things that have been made in the browser and the Firefox dev tools are fantastic. For for overlaying this sort of visual thing of where your grid is, where your grid starts and stops. What grids are what tracks are, because there's this whole concept of I don't even think we should try to do it in the podcast. But there's this whole concept of explicit tracks and implicit tracks, meaning that Once you've filled up your grid and you have more items, they spill outside, then they they go from explicit to implicit meaning they've just been auto generated. And there's a whole bunch of stuff in grid that you can use to decide those things. It shows you track numbers because there's other confusing thing in grid That if you want a number, if you want to like put an item from one to four, you're not counting the columns or the rows, you're counting the gutters. So if you have four columns, you have five gutters. So it gives you these nice little number overlays, it allows you to change the color of the tracks on top of it, it'll show you the areas of your actual CSS Grid. So another thing we haven't talked about is that CSS Grid will allow you to name your areas. So you could take your entire website, slice it up into this is the header, this is the nav This is the sidebar, this is the content, this is the footer. And then you can just take an element and say this goes in the footer, this goes in the header, this goes in the nav, and you don't have to tell it start at one go to 10. You just tell it go into the actual header area. And it will just like expand itself to fit that entire area, which is pretty neat. So Firefox dev tools, amazing. They really helped my understanding of how it works. Chrome 62 just shipped grid tools. But they are nowhere near the Firefox Dev Tools just yet. I'm sure they'll get better as time goes on. But if you're doing any sort of grid stuff, definitely pop open. Firefox, yeah, new Developer Edition, you - -65 -00:46:16,410 --> 00:46:35,490 -Scott Tolinski: get to those by it's under the Layout tab if you're looking for it. If you open up in the bottom, there's rules computed layout, and then you have to click a checkbox to overlay your grid. There are several other checkboxes to basically have this showing what sort of information you want. That's in case you're if you're looking for it. - -66 -00:46:37,590 --> 00:48:08,280 -Wes Bos: Exactly, exactly. Other things about CSS Grid, I know we're not we're not going to be covering all of it just because this is such a visual thing in CSS Grid. And for us to try to explain it over audio is a little bit tough. And we've got some stuff coming out that's going to help you understand on how that works. One other kind of neat thing or not neat thing about CSS Grid is that they do have this like ASCII syntax, where you can you can define your grid areas, by saying like the header starts at one and goes to 10, your sidebar starts at one and goes to three and your content starts at three and goes to 10. So you can define where these areas are. But there's an alternative way to lay it out, which is really just ASCII where you just say you can just make a grid with words. So you can say let's say you wanted something that was a grid that was four across and however many Hi, you could just say header header header header, header header header header, header header header header, so that would be four by three of your header, then nav nav nav nav would be three across, and you can do sidebar content content content, sidebar content content content, sidebar content. And your you can visualize what I'm doing here is that I'm just making a grid out of the words. And if the words match up, like sidebar, sidebar sidebar, that is how you define the grid area that is named sidebar. And it's kind of neat. It's kind of weird. A lot of people that was their that was their first introduction to grid because - -67 -00:48:08,460 --> 00:48:23,790 -Scott Tolinski: isn't that super? Like? Isn't that one of the things that in Bert Bert bosses his element yet Wes is dad's implementation of this thing. I think that was one of the things that his did. And that's how people had first saw it. - -68 -00:48:25,080 --> 00:49:20,730 -Wes Bos: Yeah, I think there was a lot of people being like, the syntax is horrendous. And I will agree that the syntax of CSS Grid is hard to learn, because there is forward slashes and there's space. And then there's there's also functions called repeat. And then there's new words called min, and there's a function called min max. And there's words called auto fit and autofill. And just use the lines, there's just a whole bunch of new stuff. And and people can immediately go to this as garbage, when you have no idea how powerful this CSS Grid thing is. And I would like to see you tried build a better API, with the constraints of not breaking any backwards compatibility of CSS. So I don't know don't complain about the syntax, because it's, it's, it's hard, and you're gonna have to learn it. But I don't know, you spend 1015 hours learning this thing over the next year or two. And it's going to become second nature to you, just like Flexbox was Yeah, - -69 -00:49:20,730 --> 00:50:10,380 -Scott Tolinski: and some of the best things in life are a little bit hard to learn. You know, and, and this is one of those things that the, the new changes are some of its best features, because of the fact it allows. I don't know, my favorite thing about CSS Grid. And this allows for it because of this is that it'll, it allows CSS Grid to be as concrete and definitive or as sort of open end as you want it to be. So it can be very like, hey, everything just sort of fit in here into this space, or, hey, this is exactly how this grid needs to be. And because of the API being so flexible, you It allows CSS Grid to do so much stuff. That is with ease, I should say it allows it to do so much stuff with ease that it just makes. I don't know, it may it makes any of this stuff just a joy to work with. - -70 -00:50:11,280 --> 00:51:30,600 -Wes Bos: Exactly one. One other advice I'll have to people that are learning this is I always like to tell people to embrace the flex. Because when we initially saw Flexbox, what happened is that people said, Great. And they started making these frameworks that did the exact same thing that your float base layout, like column six, call seven. And it was just doing the exact same thing that floats or the floats were doing. And I would encourage you to put your your existing layout stuff aside, forget what you know about these very rigid layouts, these bootstrap grids and everything like that, and just learn to embrace the flex and and know that not everything is not going to be as rigid as you could possibly want it. But you the browser, if you use min max and autofit and autofill. And, and these, this new unit called fr, which will allow you to expand through the free space, kind of like a flex, flex grow value. If you embrace all these things and know that the browser is going to do its best job at trying to fit your content into the space. And if you embrace the flex, it's you're going to have a much better experience learning grid than trying to mash it into what you have already known because it's going to change the way that we do layout because a lot of stuff is now now possible, right? - -71 -00:51:30,960 --> 00:51:42,570 -Scott Tolinski: Yeah, yeah. And it's, I just love how concise the syntax is, like what you can accomplish with little to no syntax because of those things that I mean little to - -72 -00:51:42,570 --> 00:52:23,940 -Wes Bos: no syntax and and not a lot of duplicate or extra markup. Yeah, so a lot of times, we would be adding extra divs and spans and and whatnot to our markup just to make these layouts work. Whereas with grid, you're going to have a very toned down layout where your header and your nav, and your sidebar and your content and your footer and your features and your about section, those are all going to be siblings. And you're not going to have to have like, like a wrapper for all these, you're still going to have wrappers, that's one thing I did did realize, by doing all these examples, you still will have wrapper components. But you'll have a lot less wrapper components than you used to have with your float and Flexbox. Base Layout. - -73 -00:52:23,970 --> 00:52:44,790 -Scott Tolinski: Yeah, I found I found it to be a nice exercise in deleting divs. Once you're getting into this, and it's a, there's nothing better than being able to eliminate some code, that's just being there to essentially be a nice extra little CSS wrapper, right? If you can get rid of one of those divs that's really not serving any sort of structural purpose a plus. - -74 -00:52:45,510 --> 00:53:30,900 -Wes Bos: And one other thing I noticed as well is that you write a lot less media queries. When you're using grid, because they have this thing called min max, where you can tell an element inside of your grid to be minimum 400 pixels maximum, and you can put a pixel value on it. Or you can give it a fr unit, which it'll expand out to as big as it wants. And it will just sort of figure out how to best fit these elements on the thing, which is great. Because then you're not thinking about the viewport, this comes back to the whole container queries thing. You're not thinking about how big is the viewport? You're just thinking about? How big is this grid and how big are my elements inside of it. And the grid will start to figure out how many it can fit on a row and a column and it will just wrap the the additional ones. Yeah, - -75 -00:53:30,900 --> 00:53:55,650 -Scott Tolinski: and we all know that's the future anyways, because with reusable components you want your component to to work well, whether it's a child of something else, and it's sort of stuck and constrained, right? And yeah, or if it's on its own, filling up the entire layout, you want that component to be smart enough to be able to handle those changes. And that's definitely will, you know, an excellent little thing here to get a little bit of element query stuff going on. - -76 -00:53:57,030 --> 00:55:07,530 -Wes Bos: Awesome. Um, let's talk about what we can wrap it up, I'll talk about some things that CSS Grid doesn't do. So I already talked about the Pinterest masonry layout. It doesn't, it doesn't really do that unless you, like I said you define a bunch of predefined sizes. One other thing that it doesn't do is something called end throw, which I discovered. So let's say you wanted to build a navigation, and you had six or however many top level elements you want it so you have about home contact, and all these elements in your nav, and then you have extra elements and they wrap on to the next line of your grid that's great will be cool is if you could size or style those elements in the second row, or the second column to be a little bit different than the elements in the first round. And currently That is not possible. There's no like end throw selector to select each row and you can't Tiger stripe each individual row or column that you have. So I wrote a I don't know 15 lines of JavaScript to add a class of row one row row three are odd even. It wasn't too hard. But you do still have to reach for JavaScript if you need that. - -77 -00:55:07,950 --> 00:55:15,390 -Scott Tolinski: Yeah, or use something else. But I guess that, you know. Yeah, that eliminates all of the benefits. - -78 -00:55:15,900 --> 00:55:27,120 -Wes Bos: Yeah, exactly. And then another thing that didn't make it into the spec is this thing called sub grid. And I thought I would just try to explain what sub grid is. Have you ever heard of sub grid before Scott, um, - -79 -00:55:27,300 --> 00:55:30,750 -Scott Tolinski: I haven't. But I'm gonna go ahead and guess it's a sub grid to the - -80 -00:55:30,750 --> 00:57:13,260 -Wes Bos: grid. There you go. Nailed it. So I, Rachel Andrews has a really good blog post about about this about what it would be if we eventually do get it. So let's say you have three cards on a page, and the cards are all three of them to to a row, and they're all beside each other. And then you each of those cards has a header, a content and like a footer. So you can imagine that each card is broken up into three, three different rows. And the middle row on each of those cards is dynamically sized, meaning that the height of the middle row on each of these cards hold, you stay with me here, the middle row, and each of these cards is different. Because the first one has only six words in it, the second one has 60 words, and then the third one has 20 words in it. So what will happen is that the 60 word one is the tallest and it will size, the one to the left and the one to the right to be as tall as it, what doesn't happen is that you there's no way to tell the middle, there's no way to tell the second row of the of each of the cards to all be the exact same height. Because they're not they're not siblings, right? Because they're they're both a child of a card, and then the cards are actually sibling. So my understanding of what subgrade will do is that you will be able to size non sibling elements to be the exact same height, or to all size themselves to be the same height of as the highest one. I don't know if that makes sense or not, does it? I'm - -81 -00:57:14,790 --> 00:57:15,840 -Unknown: gonna go ahead and leave my answer. - -82 -00:57:15,840 --> 00:57:19,740 -Scott Tolinski: I'm not quite sure To be honest, I would need a like I said, I'm a visual guy there. And he goes - -83 -00:57:19,740 --> 00:57:31,710 -Wes Bos: to Rachel, why are we trying to lay stuff out on the on on radio anyways, but it's kind of exciting. I bet we'll get that eventually. And that'll solve some of our little edge cases that cannot be solved with Flexbox or grid. - -84 -00:57:31,740 --> 00:57:34,560 -Scott Tolinski: Yeah. All right. Any - -85 -00:57:34,560 --> 00:57:38,160 -Wes Bos: other any other grid tips for me? Or do you want to move on to some sick pics? - -86 -00:57:38,460 --> 00:57:59,820 -Scott Tolinski: Um, no, my I mean, for me, it's like, just use it, get your hands dirty. Have fun with it. You know, I think there's a lot of you know, people maybe a little bit afraid to get into it, because they feel like they can't use it in production. And like now, now is the time to learn it. You know, like, Sure you can learn it next year, too. But now is the time to learn it not next year. - -87 -00:58:00,630 --> 00:58:19,500 -Wes Bos: Especially if you're trying to get a job or trying to upgrade your skill set. It's a great time to jump in. And you can get ahead of a lot of people who have been been through the tables, two floats to Flexbox. And now to grid it's like the sort of the fourth iteration of of layout, and maybe they're not moving to it as quickly as you might be. - -88 -00:58:19,530 --> 00:59:12,360 -Scott Tolinski: Yeah. And if you feel like it's, it's still I don't know, for me it is it is the future. It's not or I mean, it's the present. It's not the future, it is the present. And it is CSS. It's not one of these things where you can feel like you can't learn it right? Or you shouldn't learn it like I shouldn't learn this because I can already do everything with floats or Flexbox. Or no, this is like going to be how you write CSS from this point forward. So use it just like I yeah, I had somebody in one of my comments. And it was like, Why are using es six for your tutorials. It's just going to confuse people. And I said ESX is JavaScript. It's like, the next great is JavaScript. Like, if I'm not using JSX, I'm not using JavaScript like flat out. I'm not using modern modern code. So use it, - -89 -00:59:12,390 --> 00:59:52,680 -Wes Bos: use it, use it exactly. And you might be coming at this and be like, well, I use some sort of framework or I use like at CSS dev cough, the author of the Suzy sass, like grid layout. She had a talk and she said don't use my Fr. I think it was called don't use my homework. Which is great to see because I personally believe you don't need any of these bootstrap frameworks, grid systems or anything like that. Because you don't need something to abstract away the complexity of floats anymore because grid is going to be can be hard to learn, but it's extremely simple to implement. - -90 -00:59:52,799 --> 00:59:55,050 -Scott Tolinski: Yes. Cool. Yeah. And - -91 -00:59:55,050 --> 00:59:57,210 -Wes Bos: can we expect your layout course there, Scott - -92 -00:59:57,210 --> 01:00:35,280 -Scott Tolinski: this month. Awesome. I think end of November. I'm trying to get it finished. I'm trying to wrap recording on it by the 24th. Actually, I'm trying to I'm sorry, I'm trying to get wrap recording done on the 17th. And then, so who knows, we could see it anytime between the 20th and the 30th. But like I mentioned, it's it's going to use grid, but the course isn't going to be like the Definitive Guide to grid or something like that. It's going to be mostly on modern CSS layouts, how you would approach like, if I want to approach Trello, I want to make Trello. How would you write the Trello layout using modern CSS? - -93 -01:00:35,310 --> 01:00:47,480 -Wes Bos: Yeah, because grid is just one of your tools in your toolbox. Exactly. Cool. I'm looking forward to that. That should be exciting. Let's talk about some sick pick six. What do you got for me? - -94 -01:00:47,880 --> 01:02:25,110 -Scott Tolinski: Yeah, so I got another book, I got people telling me they like the books I suggest. So I'm going to suggest another book, which is going to be the book, just my type. Now, I know a lot of us are developers and designers and sort of stuff like that. But one thing we all have in common here is that we work with type a lot, whether or not we're designing it, we still work with fonts and stuff like that. So you've probably encountered a whole bunch of fonts that are existed for a very long time and have really complex and rich backstories. And just all sorts of interesting stuff. So this book, just might type is a book about fonts. And it's essentially, each chapter talks about a different font. And sometimes they're like these origin stories about this font, like how this font came to be. And other times, you know, there's a chapter on Comic Sans. And there's a chapter on like, some of the crazy stuff that some of the people that were behind these fonts did in their personal lives. And but either way this Yeah, this book is endlessly entertaining, you walk away with it. learning a lot about type, the history of type and and how it all works, but you also walk away with it. I don't know, I'm a history fan. So it's like, there's a lot of great history in here about both the typefaces, the people and type itself, and really just one of those ones that, again, tough to put down or just superduper entertaining and relevant, but not like it's not going to be reading a book about JavaScript. It's interesting stories and history stuff. - -95 -01:02:26,760 --> 01:04:25,230 -Wes Bos: Neat. I'll check that out. My sick pack is not new, but I'm going to do a little bit of an update because I get lots of questions about this on Twitter. So I don't know maybe two months ago my sick pick was the Cal digit Thunderbolt three dock because I got the new MacBook Pro. It's all USBC based. And I've been running it for a number of months now and I've been super happy with it. People are asking like How's it going? It's been rock solid being able to I've got my 4k display. I've got 22 inch monitor plugged into it got all of my recording gear plugged into an Ethernet plugged into it. Multiple hard drives that need to be powered because they're powered over USB. It's incredible how much stuff I actually have plugged into this thing and it's been amazing. So I initially reviewed it when I only had it for a couple of weeks and it was working really well. And it's been been rock solid. The one thing I did have to do is that because this thing is one plug meaning that you plug all of your monitors all of your USB and then it also charges your computer. It's all over one Thunderbolt three USBC cable. And because it needs to charge the 15 inch MacBook Pro at 100 watts or the MacBook Pros at seven but it like the cable supports 100 that cable is stupid expensive. I think I paid after I shipped it from the US and got hit with duty it was well over $100 Canadian I think it's like $65 us plus shipping so it sucks because now I'm in 350 bucks for the talk and another hundred for the stupid USB cable so I'm I'm in over my a lot of people pay for just their laptop for a doc but being able to plug it in with one cable is almost worth all that money. So if you if you have the budget for it if your boss is willing to pay for it, I definitely recommend it. - -96 -01:04:26,760 --> 01:04:28,020 -Scott Tolinski: Joe, that's sick. - -97 -01:04:28,049 --> 01:04:42,420 -Wes Bos: Sweet. That's a sick pic. Alright, so that's it with this CSS Grid. If you have any tips about CSS Grid, make sure you tweet them at syntax FM, as well as make sure you follow Scott and I am at Wes Bos WSB OS and - -98 -01:04:42,420 --> 01:04:47,250 -Scott Tolinski: Scott is at S kolinsky to LISKI. - -99 -01:04:47,939 --> 01:04:49,170 -Wes Bos: That's it. See you next week. - -100 -01:04:49,620 --> 01:04:50,160 -Scott Tolinski: See it - diff --git a/transcripts/Syntax180.srt b/transcripts/Syntax180.srt deleted file mode 100644 index 4c1ed35eb..000000000 --- a/transcripts/Syntax180.srt +++ /dev/null @@ -1,340 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:01:08,310 -Wes Bos: development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. Oh, welcome to syntax. This is the podcast with the tastiest web development treats today we have a potluck episode, which is we answer your questions. We go all over the place talking about JavaScript, CSS tools, hosting platform soft skills, all kinds of fun stuff like that. If you have a question you'd like us to cover on an upcoming episode of a potluck, we do them once a month go to syntax.fm and in the top right hand corner, there's a button that says ask a potluck question. You bring the meat Scott and I will attempt to answer the that them or something like that. Today we are sponsored by Sentry, which does all of your error and exception and your bug tracking and the second one is Freshbooks which does all of your small business, freelancing invoicing, expenses, time tracking things like that, with me as always, which I just learned the most hilarious thing about Scott is Mr. Scott Tolinksi, who had a tongue piercing - -3 -00:01:10,050 --> 00:03:00,449 -Scott Tolinski: Yeah, I had a tongue piercing for a long time. We were just talking about Western he went to the dentist. Yeah. And I was thinking I hate the dentist because they have a receding gum. Due to a tongue piercing that I had for. I don't even know I would be very interested in counting how many years it was a long time maybe like eight 810 years. Which is hilarious. The funny thing is, is I really just got it to get a piercing It was like well I want to get a piercing. That said I don't want an eyebrow piercing I don't want to lip piercing and I don't want an ear piercing and I don't want to know I was like whatever I'll just get a ton of like this is just be a fine you know life experience. And then I got it done. Another really fun bit of that story is I got it done one without telling anybody but I got it done the same day that we were supposed to be doing a performance with my breaking crew. Oh my gosh. And so we were supposed to be dry. Okay, so I think I'm gonna get this thing done after work I'm gonna walk in there I'm gonna get it done it's gonna be fine I'm gonna go performance I'm gonna kill it whatever I get it done and I immediately Pat well I didn't immediately pass out I leave and as I'm crossing the street I start to pass out and I feel like I'm gonna like you know lose it so then I I lay down in the middle of this is Ann Arbor Michigan against a building if for those of you who who know and Arbor by the Starbucks over there I laid down in in sort of like a a door well like our door is I just kind of leaned against it and then just like passed out like a drunk ass against the door or something. But I was just out of it. And then when I came to which is kind of ridiculous that I passed out in public like this, but when I came to I had all these people calling my phone saying dude, where are you? You're supposed to pick everybody up and drive this to this performance sign Sorry, I could talk but totally cool and then I just pushed out - -4 -00:03:00,720 --> 00:03:02,610 -Wes Bos: so oh my god needless - -5 -00:03:02,610 --> 00:03:10,680 -Scott Tolinski: to say we did the performance and it was a Okay, I have some cool photos of me doing some flips over some people so I was still able to do that kind of thing. So whatever - -6 -00:03:11,160 --> 00:03:16,440 -Wes Bos: that's hilarious Wow, that's it. That is a fantastic story. I can't believe you haven't told that one before - -7 -00:03:16,470 --> 00:03:19,380 -Scott Tolinski: dude is yours there's that's my life. I got a lot of stuff like that. - -8 -00:03:19,410 --> 00:03:21,840 -Wes Bos: You got a lot of stories. Do you have any other piercings? - -9 -00:03:21,930 --> 00:03:33,750 -Scott Tolinski: No that was it. I had it in for a long time and it was great. I enjoyed it and then because my gums to recede and now I know I'm regretting that decision so - -10 -00:03:34,860 --> 00:03:55,319 -Wes Bos: I have a tragic piercing which is that little like no but nub of skin Yes, your your headphones in and I've had it for probably like 12 years and it fell out like last year and I was like Dwight do I get it replaced? And I did because I want to stay cool dad with that - -11 -00:03:55,319 --> 00:04:06,380 -Scott Tolinski: in you know it's funny when I first met you I always whenever I talk to you got your headphones on. So yeah, when I first met I was like oh my God appears easier. But like I never see that because your headphones I was covering it. - -12 -00:04:06,449 --> 00:04:22,640 -Wes Bos: Yeah, it sucks with the ear pods I sort of got used to it but when I first started putting the air pods in in like the it would kind of like get in the way of and hurt a little bit because it's there's obviously a big ring there that is pressing up against their pod. I - -13 -00:04:22,640 --> 00:04:25,980 -Scott Tolinski: still have a giant hole in my tongue but it doesn't really cost me any trouble so - -14 -00:04:26,390 --> 00:04:28,050 -Wes Bos: can you like shoot water through it? - -15 -00:04:28,070 --> 00:04:34,200 -Scott Tolinski: No, I'm pretty sure it's closed up inside of it somewhere but the top and bottom still are there. - -16 -00:04:35,330 --> 00:04:42,200 -Wes Bos: Wow. Well, that was pretty cool. Send us your piercings at syntax FM on Twitter. We'd love to see what kind of crazy piercings - -17 -00:04:42,200 --> 00:04:45,120 -Scott Tolinski: you know if I want to see photos of the piercings you can just tell us - -18 -00:04:46,580 --> 00:04:54,570 -Wes Bos: I want to see a photo unless it's like super weird friends that had like the sub dermals Yeah, it goes in your cheek. - -19 -00:04:54,600 --> 00:04:55,440 -Scott Tolinski: Yeah. - -20 -00:04:57,270 --> 00:05:43,440 -Wes Bos: Anyways, let's talk about web development. Hi We have got a whole bunch of questions. I'll grab the the first question here. And we'll sort of go through and answer them. First question is from not sure of the name, it was anonymous. Hi, guys love your show. What do you think about Webpack verse parcel versus the old way, gulp, etc. Webpack seems to bring a lot of magic improvements, but it is overly complicated and a lot is not easily visible. Is it worth putting in the time to learn? Where do you see the future towards some specialized guy, as example, a front end dev build specialist. So like somebody, his full time job will be just maintaining the web pack, or going towards some sort of simple build tools? Thanks. Oh, I've got some opinions on this. Thank you anonymous. - -21 -00:05:43,770 --> 00:05:46,200 -Scott Tolinski: I knew you would. That's why I picked this question. Yeah, - -22 -00:05:46,560 --> 00:07:10,950 -Wes Bos: um, I think that I haven't, honestly, I haven't really written a web pack in probably a year and a half. And I think that's amazing. And that's because, and I've been saying this for a long time is that the Webpack is under the hood, sort of tool that people are much smarter than most of us will configure for us. And then they will surface themselves via higher level tools that are much easier to use. So things like if you use next js, or Gatsby, or any of these sort of like pre built things, they sort of just do it all under the hood for you. And you you can you can expose it if you need to. But at the end of the day, we're all writing, like modern JavaScript, or TypeScript. And we're all sort of doing the same thing. So it doesn't really make a whole lot of sense to me. why a lot of people have to write their own web pack from scratch. Other questions here was parcel, I absolutely love parcel, I've been tracking parcel two, which is is a kind of a nice quick way to get up and running. I'm using personal in my upcoming JavaScript course, just because you just type parcel index. html in it, it starts bundling it all for you. It's kind of annoying, because it doesn't do a sync away by default. So then you do have to like get a Babel config file, which is annoying, but personal two will hopefully solve all of that. So that's my thoughts on that. What about you? Yeah, I mean, - -23 -00:07:10,950 --> 00:09:06,330 -Scott Tolinski: I think I'm under the same mind. I'm trying to think when the last time I wrote a config for any of this stuff was alright, I guess I am adding some config to it for next j s right now. But you have tools. I mean, if you're writing react, you have you know, parcel which obviously isn't Webpack base, but does so much stuff for you, you have platforms like Gatsby next and create react app. But most of those times, you don't really need to get into the Webpack stuff. And me personally at my sites in Meteor, so I haven't really written a Webpack config. I haven't written a gulp file in a long time. Not because Gulp isn't, isn't great. But like, I feel like with parcel just existing to do everything for you, or Webpack, you know, any of these things just that exist. I feel like I haven't had the need to have a gulp process like I did in the past. Yeah. So you know, I'm of the same mind, I haven't had to write any of this stuff in a little while. And I'm pretty psyched about it. That was the one thing I always loved about Meteor. One of the things that really made me gravitate towards that initially, when I picked a desert project is that to add a package, you just did blah, blah, blah, add package, you didn't have to worry about the Babel configs ever really, I mean, you kind of do, but you didn't really a lot of stuff was enabled by default. I never had to tell it anything. If I wanted sass, I just added a sass package. I didn't even have to write any configuration code. I didn't have to tell the platform to use the sass package. I just really liked that aspect of things. So for me, I would personally always go towards a platform that doesn't involve you having to maintain any sort of complicated config, because packages become out of date things change, and you're gonna have to get into that mess at some point. Keep it updated in the future. Yeah, yeah. And you you're gonna get into something here in a second. But again, they do just take the things that are hard in the process. And they make it easy if if you use any of these platforms. - -24 -00:09:06,480 --> 00:10:34,110 -Wes Bos: Yeah, the talking about golf. I love golf when it came out. Yeah, written like a I somewhere on my computer. I have like a 10,000 word book I wrote on gulpin never released, which is a bit of a shame. But I was kind of bummed when when golf started falling out of favor in Webpack. And I didn't totally understand why because I was like, this is so much harder, I was really happy with the like, go grab the thing that you want, pipe it through whatever transform that you want, and then pipe it out the other end. And and the reason why that I Webpack sort of fell in love with everyone fell in love with Webpack and Gulp out of favor is that it's a different paradigm shift in terms of like how you handle all of your assets and dependencies and things like that, where with Gulp you were in charge of figuring out what went in and what went out. Whereas with Webpack you just have like a script file or HTML file and then Then any sort of assets, CSS, code splitting, things like that image compression, because the web pack or even if you look at something like Gatsby, because all of that goes through Gatsby, we're able to do a lot smarter things like bundle, minute minimization, code splitting, that's like automatic based on your route, because Webpack knows a lot more about your application, it can do a lot more powerful stuff about it. So I didn't understand that for the longest time. But now I'm finally like, okay, that it makes sense to me. - -25 -00:10:34,279 --> 00:11:52,860 -Scott Tolinski: Yeah, totally. In, it might seem like we're dumping on things like Webpack, or configuration. But it's not that those tools are overly complicated period, it's that the average user doesn't need to get in there and change those configurations. Because chances are their use case is not that special. And if your use case, isn't that special, you don't need to reinvent the wheel. Now there are people who really love to tweak and maintain and set up and all that stuff, and that's fine. But you have to know if you ever leave your organization, there's something that maybe the person that comes in after you might find that one to do that. So I don't know, there's a lot, there's a lot of here, but you know, these these tools are all fantastic. And really whatever works for you works for you. But I'm of the mind, if I don't have to write a config to get it to work, then that's probably best for me. That said, my new site does have a fair amount of config in it. But yeah, all right. Next question is from Bartel, what is your opinion on AWS lambda functions? Now for those of you don't know, a lambda function is simply just a function that you can run without having to have a server setup. And you can run these functions and node can you run them in just any old language? I don't I'm not quite positive about that. Because I haven't used straight up lambda functions. - -26 -00:11:53,370 --> 00:12:24,210 -Wes Bos: Yeah, I think that they obviously have no js. I think you can do them with PHP. I mean, look, AWS, lambda, languages, what languages does lambda support natively? Java go PowerShell node j, s, C sharp Python, and Ruby code provides a runtime API. Okay. So Ruby is one that I wasn't sure of at the time. So anything's read our documentation using node Python, Java. So pretty much the big ones out there, although PHP is not in that list. Interesting, huh? - -27 -00:12:24,630 --> 00:12:25,890 -Unknown: Well, now Oh, - -28 -00:12:27,270 --> 00:14:39,000 -Scott Tolinski: yeah, I'm not too upset about that. Go on. So AWS, lambda functions, you know, the thing I like about these is that you can encapsulate small bits of functionality that you would typically need to create a server for and have it up and running in a nice little thing really quickly be able to hit that whether this is maybe building your own cloudinary or building a redirect system, or there's all sorts of little use cases, or you can have a fully like serverless thing where your entire API is living in lambda functions or something, there's a there's a wide variety of things you can do with these functions. That said, I wouldn't, you know, what I really don't like AWS for, I don't like it for anything that requires you to use AWS counsel. Yeah, it's just, it's bad. And their documentation is out of date. And bad, their language is inconsistent and bad. Like they call one thing, one thing somewhere, and then something somewhere else. I mean, there's just there, it is very difficult to get into it, just by straight up reading the documentation, or even just trying to click around things don't, it's not intuitive at all. So if you're the type of person who really loves nice, intuitive based systems, you know, I don't love AWS lambda stuff for that. That said, I don't know if AWS lambda is always going to be the right way for you as a dev to consume serverless functions, please. There's all sorts of platforms that exist on top of AWS lambda that serve to make your life easier, especially now that like serverless has become much more of a mainstream thing. I mean, just think about what Netlify did when they added serverless functions, but they don't really make a big deal out of them. They just call them, here's these functions, you can run. And you don't have to get into all of the extra AWS console stuff with routing and whatever. You can bake them into your app. But then again, you have to be on Netlify. Or at least you use Netlify to do that. So I think AWS lambda functions for serverless functions. I think it's all great. That's it. I've just never really like working in AWS console. Every time I have to go into s3, I sort of just like cringe at the interface and what I'm having to do. Yeah, so yeah, that's that's my thought on it. - -29 -00:14:39,059 --> 00:15:09,299 -Wes Bos: Yeah, I agree. Yeah, same, same way. I'm always willing to pay a little bit more for I mean, there's, there's hundreds of startups out there right now trying to figure out how do you make this serverless thing really easy, and as painless as just building a regular app and you don't have to think about it like we have got Netlify Right now Yep, serverless j s. m, man, I'm forgetting a whole bunch of them. And we're gonna get 100 emails from people being like, I'd love to come on and talk about it. And - -30 -00:15:10,409 --> 00:15:16,980 -Scott Tolinski: I'm using I'm using next JS nine right now with the API routes. Yeah, I really like it really beautiful. - -31 -00:15:17,279 --> 00:17:49,530 -Wes Bos: So I think, again, this stuff is for smarter people. I think just as we said, with Webpack, there is going to be abstractions built on top of it, that are much easier, you pay a little bit in terms of flexibility and probably cost. But for a regular web developer who just wants to get stuff done, that's probably not a huge thing at the end of the day. So I think that that's totally fine. Work. Yes. Next question from Roberto on the syntax website. Each episode is a markdown file, how do you push into production? Do you have a different branch for each episode in a merge into Master? Or what is your strategy to avoid releasing an episode before the intended date? So this this index website I made like two and a half years ago, before, or maybe even three years ago, and we haven't really touched it all that much since then. And I'll just sort of tell you what the process is right now. And there's probably better ways to do it now. But it's not I kind of like how it works. So every single episode gets a markdown file. And in that markdown file, we get frontmatter, which is frontmatter. matters, just metadata about a markdown file. And it's kind of like custom fields if you're using like a WordPress or something like that. And in that we put the name of the episode, I'll link to the mp3 file and a release date, which is a timestamp. And then when we push to Master, what happens is we have a it's an ext JS website. And when the next Yes, oh, sorry, it's an X JS website on the front end. And there's a small little node server that when the node server starts, it consumes every single markdown file and spits out the equivalent HTML out to a out to like, sort of like a little API that we have set up for that. And then when the website loads every single time we hit that API, so you visit the homepage, it's it's server rendered. But the same thing happens if you refresh it in the browser, it will hit that API, the API will then filter episodes, which are only in the past based on the timestamp and then a lot just render them out to the page. So that's it. What's to stop somebody from listening to future episodes? Nothing? I know, a bunch of you actually do that, because I can I get, like, 1011 listens before they're released. And that's clearly people going into the GitHub, copying the mp3 file, and and playing it, which means all the power to you if that's, - -32 -00:17:50,250 --> 00:17:53,010 -Scott Tolinski: yeah, that's the web right there. That's the spirit. - -33 -00:17:53,060 --> 00:18:01,170 -Wes Bos: Oh, that also that that build process is done via What is it? What's the automatic build thing that we use? - -34 -00:18:01,170 --> 00:18:05,360 -Scott Tolinski: Now? Isn't? It's just that next as I thought that took care of everything? - -35 -00:18:05,460 --> 00:18:09,830 -Wes Bos: No. Yeah. But you we have to actually like build the site. Oh, you - -36 -00:18:09,830 --> 00:18:11,040 -Scott Tolinski: set that up? Yeah. Sorry, - -37 -00:18:11,060 --> 00:19:18,270 -Wes Bos: which now J. Now j. s? Does that now you can or sorry, right. Now, yeah. Now we'll do that. If you hook it up to your GitHub, it will automatically build it. But I'm using some sort of continuous integration software. Code ship, we use code ship. That's what it is. And it's funny, because now I'm thinking like looking back on that. And there's a number of things we could do is we it's there's no need for an API, because there's not really anything dynamic about it other than the the filtering. And we could easily move that show filtering just to the client, like you could do a react loop and say, if it's not earlier than the current timestamp, then don't show it. So we could probably it probably better suited for something like Gatsby Gatsby wasn't all that popular, back when the site was built. So that's that's why we made that decision. And now I finally got access to GitHub actions, which I think unfortunately, is going to put a lot of these automation startups out of business. Because you're able to do things like run a build on something like that before you actually push it out to your hosting provider. Yeah, I - -38 -00:19:18,270 --> 00:19:24,660 -Scott Tolinski: use a semaphore, but I think I'm gonna be using actions very soon here. I've had those for a little bit. - -39 -00:19:25,019 --> 00:19:27,350 -Wes Bos: Did you get access to GitHub actions yet? - -40 -00:19:27,479 --> 00:19:28,380 -Scott Tolinski: You bet I did. - -41 -00:19:28,440 --> 00:19:51,210 -Wes Bos: Well, you got to do a show on them because they're still in beta. And you got to have a hook up at GitHub HQ, I think in order to get pushed up to the front of that list. But from the people I've talked to about GitHub actions, man, does it look cool, and I think it's gonna make life a lot easier. And you don't have to use all these like third party $5 month bleed until you die startups for that. - -42 -00:19:52,580 --> 00:20:48,240 -Scott Tolinski: But you one, one thing that one thing that GitHub actions aren't going to take care of is error and exception handling. Yeah, so you're gonna want to use another tool for that which be century@century.io. You're gonna have to use the coupon code tasty treat all lowercase all one word when signing up, because if you do tasty treat, you'll get two months for free of century. Now, I wish I had two months for free a century, because I use century all the time. And it's one of my favorite services in the world, it really, really makes me confident that my site is not breaking right now I'm up, I just pulled up my century, I could see sort of the issues at a glance. And really one of my favorite things about this is I can see directly how many users this error is affecting. So I can come in here and I can see Oh, okay, here's the error that only happened for one individual, it looks like Oh, it looks like it might be being caused by some sort of, - -43 -00:20:49,800 --> 00:27:21,330 -like ad blocker tro tool. So you know, what I can do is come in here and I can click ignore, I'm gonna ignore you. And you're not anything I have to worry about. Now it's removed it from the issue, queue it removed it from anything that I have to think about. And if you see several of these ones, you can batch it, you can do any of that great stuff. And I have my API and my front end of the site set up side by side, I can click back and forth between them. Check it out, check out what the bugs are, and get those fixed up right away. So head over to sentry.io and sign up using the code tasty treat. Thank you very much for century for sponsoring. Alright, next question is from at dono. Kuhn. Okay, dearest, Wes. And Scott, well, thank you don't Okun Wow. Yeah, a lot of job postings in my city are from Digital agencies. I remember Scott mentioning one of his first jobs was at an agency. I was wondering if maybe Scott can share some of his experiences working at an agency job. The reason I'm asking is because it seems like there is always a thread on our web dev with horror stories about working in an agency, whether it's about management long hours, or just being on stable. The threads have made me second guess which agencies to apply for a first job? Is there any red flags? When you work in an agency to jump ship? You guys have the best thanks and love. Okay. So I think he don't know Kuhn. Let's, let's talk about this. Yeah, I think that one of the main things that I get out of this was the thread on web dev about horror stories. Man, if you go to read it for anything, you are going to have people screaming and complaining about everything. I mean, somebody put this money, I don't want to say too many controversial things. Somebody put a little minor minor ad in a GitHub or at a iterm thing. And I swear people were ready to burn down the cities, like people on Reddit were just absolutely furious. And that's not like a mature response. So Reddit is very, very, very far from a mature response to anything. Okay. I don't know if I would ever trust a comments in most reddits for things that said, Sean moderates the React Reddit, he does a great job of that the React Reddit does do a much better job of these than some of the other ones. And for a lot of this stuff, I've had to completely remove myself from Reddit entirely, because of just the amount of pitchforks and aggression and all sorts of things people have towards any opinion, that is not their own. So, okay, that said, I really liked working in agency, I've worked at three agencies in my career, I worked at a small agency, that was 12 people, I worked at a medium agency that was oddly enough double that at 24 people. And I worked at a very large agency, which was 3000, some people, okay, and the best experience out of all of those was the smallest of the agencies. So the 12 person one, every time I did a project, I was one of a couple devs there a couple interns and I felt like everything I did really contributed to the bottom line and contributed to the excess success of my coworkers. That said, we you know, you will add a 12 person agency, you end up accepting a little bit of, I want to say responsibility in terms of, you know, it's a company and if the company isn't doing well, at for, you know, several months, it's a lot more difficult for that smaller company to be secure. Pay everyone salaries, I had to take a 15% pay cut for like six months, just because we are in a recession. And you know, the clients weren't coming in or they weren't offering as much money as they were before. And that was hard. I mean, I chose to stay at the job because I love the job, but it was hard. So when time came to get an upgrade to a bigger agency, this one was backed by the University of Michigan. So I know that I'm never going to miss a paycheck there. I took that job, and the agency job was fine. The work was fine, but I didn't love the work. I didn't get as much control over what I got to do. For instance, at the smaller one, I got to set up my own Git workflow, I got to set up my own build process, I got to choose which frameworks and things I was working on. And then we get to the University of Michigan, they say, Okay, well, we're only on this old old version of PHP. So well, you can't do anything fun and to, well, we have to support IE seven. And well, we have to also use this older version of WordPress, and you can't use this or that or whatever. And like it was a fight to even get access to use Drupal seven at the time, which was kind of ridiculous. So that was difficult. There are things that you might concede there, I also worked at a very large agency. The thing about the large agency was great, they paid a lot, the work was really interesting. And it was higher level work. It was more fascinating work. less crazy deadlines, so to say, but I've never ever had to meet with a client. So when I worked at a small agencies, I was always doing the client meetings, which is great. But sometimes you just like to Dev, you don't want to sit up to client meetings and stuff. When I worked at the huge agency, I never even saw the client, they didn't want me in the room with the client. They didn't want any of the developers and they just like lifted these the these the guys that work in the dark, we'll just put them in the corner. But again, at a larger agency, you're going to just blend in a little bit more. For instance, our offices in our desks were in a hallway. They weren't even in an open office space, they were in a literal hallway because they didn't have any room for us. So they just folded up some card tables. And they put us in a hallway and said it was temporary. And then two years later, we found out it wasn't exactly temporary, it was for the entirety of my contract there. So there's upsides and downsides to all of these things that said, my time working at agencies across the board was great. I always felt like I had a variety of projects to work on, I always felt like the code I got to you do was challenging enough for me and I met some really amazing, both coworkers, clients, people, I get to work more closely with designers and UX people than I did anywhere else. So I'm a big fan of agency dev jobs. You know, if I went back into it, I would probably look for another agency job just because that's how I liked it myself. So that was a long winded way of saying that. - -44 -00:27:22,590 --> 00:29:02,910 -Wes Bos: I really liked working at agencies as well, as a freelancer I probably worked with, like, I think like 20, or 30 different agencies. And some were an absolute nightmare of sending hundreds of emails and changing scope and calling at all hours like I remember, I remember I just had my daughter. And it was like 9pm on a Friday. And I was just the phone was not stopped ringing. And they're just like, they just kept being like, hey, like, sorry, we need this right now. And like just like, holy, like, How are you so disorganized. And also because a lot of it is like there's a big agency that outsources to a smaller agency, which can't handle the work. So then they hire me. So you're like three or four, like ripples away from the client. And it's just like stuff gets telephone tagged from one to another. And that's, that's really hard to work on that. But some of them were awesome. Like, I absolutely love starting a new project every couple months, because you get it's like it's fresh, you can start from scratch, I spent a lot of time working on like the tools that would automate my workflow things like setting up a brand new WordPress, like even if it takes you like three hours to set up a WordPress, I would automate that into a script. And it would take 10 seconds to set up a new WordPress. And that's well worth your time. Because then you can hit the ground running a lot of the people that you see, that are complaining on on Reddit about these things is because they everything moves way too fast, and they don't have enough time to work on what they want. And they feel like they're always being rushed. And that's absolutely true. I think part of that can be solved by automating. And the part of that is just like, you have to have a good time estimate estimation estimation. For your manager, whoever whoever's working with you. - -45 -00:29:02,940 --> 00:29:12,720 -Scott Tolinski: Yeah, personality fit is a big thing there. Because, you know, I'm the I'm the I'm the type of guy who is refactoring my code base all the time. So obviously, I'm gonna like to start a new project from fresh all the time. - -46 -00:29:12,750 --> 00:30:12,060 -Wes Bos: Yeah, it just is just a it's just a doggy dog world out there. Like some you I've seen. Countless agencies shut down. A lot of companies are bringing work in house now. Because like technology is just becoming part of the business rather than a thing that used to outsource to build like a pamphlet website and a Facebook marketing campaign. It's all bringing being brought in house. So a lot of agencies have closed down in the last couple of years, but I don't know I would probably go for it. red flags are just when you do feel like even if you quote it properly, you're always being rushed. That's probably time to move on. And also when there's just people are unwilling to use new technologies because like, Well, we've been using the same like Photoshop 12 grid and WordPress starter theme for 15 years. And it's what we're cranking out. Those are the agencies that are going to go under because they've gotten comfortable with the sort of thing that they offer. And I don't know that I think they'll go under pretty soon. I think - -47 -00:30:12,060 --> 00:30:44,850 -Scott Tolinski: that is indicative of sort of a larger point is that there are good startups, there are bad startups to work for, there's good agencies to work for, and there's bad agencies to work for, and the red flags are going to exist in all of them. So across the board, no, agencies can be amazing to work for. And I'm sure they can be terrible to work for too. So it's really just about your intuition and your understanding of whether or not this company is going to be good to work for regardless if they're an agency, regardless of their startup, whatever. - -48 -00:30:45,480 --> 00:32:37,830 -Wes Bos: Next question we have here is from Arnold, hey, Arnold, what's the deal with recruiters? How do they work? Should you use one to land a new job so the thing with recruiters is they're sort of like real estate agents. Most of them are people just grasping for some money, it's a very easy thing to get into. Because for a lot of people, it's just a numbers game. If I email 4000, people, one of them might be a good fit. And like, from what from what I've heard, recruiters can make like thousands of bucks, like, like I've heard, it's like 20% of the first year salary, or like 10, even if it's 10% of $100,000 dev job, you can make 10 grand if you just like keep like splattering it, and that's why you get so many emails. And so because of that recruiters have sort of have a bad taste with developers, because we're these amazing developers that make the world turn with the skill and you peasants are trying to find me And no, I can pick from what it is. So he turned to give me money. Yeah. But I think the other thing is that like, I've had so many recruiters who absolutely waste my time, with like jobs that are like, hey, Wes, I see you're super into JavaScript. What about this ASP SharePoint job? Like No, no, not at all that hasn't that has zero overlap with my skill, you have no idea actually about web development. So you've started just trying to throw it against the wall and see what sticks. So I personally probably would not go with with a recruiter. But I don't know for recruiter, if a recruiter contacted to contact you. I give them a bit a little bit of a sniff test to see what they are I probably an in house recruiter. Like if somebody is working for Google or one of these big companies. That's probably something to pay attention to. But past that i don't i don't think a recruiter is all that helpful. - -49 -00:32:38,220 --> 00:34:23,400 -Scott Tolinski: Yeah, uh, I've gotten a really good job, my my job at Ford, I got through a recruiter. And they were just a recruiting agency. And it just so happened, that they reached out to me via email. And so many times these recruiters send you an ad before I get a message from a recruiter telling me why I understand why they get a message. And they say, we got this great job it's in, it's in, you know, what's to say, downtown Denver, and they're looking for a senior developer. And they expect to me somebody who's at a job or whatever, to see that email be like, oh, JOB, JOB, JOB, sound good, me apply for a job. But in reality, as developers we have, I don't want to say we have a lot of freedom and flexibility. But once you get into maybe aspects of your career, once you've had experience, and you're looking for more senior roles, you get a lot of opportunities, right? Because the opportunities are definitely there. And what these recruiters don't understand is that there's so much more to a job than the title and the location that you will you will be working at, for instance, I really want to know what company it's for. I want to know what kind of work I would be doing there. Those are the things that are all really important to me. And they're not going to tell me until I establish some sort of contact with them. The one thing I really really liked about this recruiter from Ford, or they weren't from Ford, they were from another, you know, outside agency, but they messaged me, they said, Hey, I have a great opportunity. It's with Ford, it, you know, pays really well. I think it's perfect for your skill set. You know, they do this and this and this and this and they nailed it. It was for my skill set. But most importantly, they told me what the job is and what I'd be doing at the job. Oh, that's good. Yeah, they're - -50 -00:34:23,400 --> 00:34:25,050 -Wes Bos: always so opaque about it. - -51 -00:34:25,080 --> 00:35:01,290 -Scott Tolinski: They're so old pick up on it. What's up with that? I mean, like I get it, they don't want you to just go to the company or to go through another recruiter they want to capture you like some sort of Tiger in a cage or something they want to get you and in. The thing I've always looked for in recruiters is those recruiters who are legitimately just out there to help and like, Oh, I got this thing. It looks like you'd be a good fit. Let's chat. And those are the recruiters that I want to work with. And so it can be really annoying. But again, like you mentioned, they're just doing it. They're just doing the job some of them are skeezy or added in others and to - -52 -00:35:01,560 --> 00:35:34,830 -Wes Bos: real estate agents, car salesmen and recruiters, and 98% of them are people just trying to trying to do something like I'm 32 years old. And all of my friends that couldn't hack it at their first shot, are either car salesmen or real estate agents right now, because it's an easy thing to get into. And it has a possibility of paying well, real estate agents. It's crazy. Yeah. But most people aren't really adding all that much value, but there's some of them that are super helpful. So - -53 -00:35:35,070 --> 00:38:01,320 -Scott Tolinski: we just had this conversation because we just bought a new car. And we're at these dealerships, and I was telling was, I don't know if it was Malcolm Gladwell, or one of those books was talking about car dealerships were like, one person at the dealership is responsible for like most of the sale. Yeah. And in it, we had so many bad agents, when we went or agents, whatever they are salesmen, whenever we went to go to any of these, like, most of the ones that we talked to, were terrible. They were bad with customer service, they were bad with everything. And Funny enough, when we called check on a car is one guy who just sort of like, Oh, I can't get you this car, it's not gonna be here, or it's off the truck. But you can't even look at it until after four o'clock. So come back at four o'clock. Well, we call just to like, check on it to say we're going to make an appointment and some other guy who's clearly the salesman salesman of the store answered the phone, and was like, oh, that guy said he couldn't get it for you all get it for you right now, if you come inside, like, and so like, there. That's the difference. One guy clearly wanted to help us and the other guy is just like, you know, trying to follow procedure and trying to do I don't know. So there's just so many bad ones. So that's a little aside about car dealers. So next, we have a question from Max. Max says, What do you think about Upwork? And or what do you think about the upward platform and their latest updates? I don't know what their latest updates are. But is it possible to find a cool full time job there is that only work for beer Upwork is tough, you're going to get outbid a lot, you're going to get you know, your your prices slashed people are just absolutely going to be cutthroat trying to get these gigs. And oftentimes, you're going to be outbid by people maybe in in potentially countries where the dollar isn't as much. So it really depends, depends on what kind of work you're looking for. I've posted jobs there before and had some really bad applicants and just wished that the person who was skilled with the right things would have just come into my inbox. And then I would have given them the money to do it. But I couldn't find anybody full of the right skill. So I think if you have a good skill set for the role, and it's potentially maybe a rare skill set, you'll probably clean up a little bit better on it, it really depends, I think you can get outbid very, very intensely and end up not making anything. Yeah, we, - -54 -00:38:01,610 --> 00:39:59,150 -Wes Bos: every time we talk about Upwork, we get a couple tweets from people being like, Hey, I actually make my entire living off Upwork. And it's great. And I think those type of people love that. They don't have to do anything, but actually do the work and the work will come to them. And it's sort of just a great and they have like a really good, like reviews, they've done thousands of hours of installs thousands of dollars on there. But just as like me looking at that as like, Okay, first of all, there's somebody between me and the clients, so they have total control. And if a business has control over you talking to your clients, you're not really like a freelancer, you're sort of just like working for somebody else. And the possibility of them pulling the rug from under you, at some point is very large. And also like, like, they're going to take a cut of your pay, because like the money has to go through Upwork, which is I think that's good for some people, you know, you're not going to get ripped off. But also they're they're taking a cut of it as well. So if it was me, I would just spend my time trying to increase my client list, trying to increase my notoriety, write a couple blog posts, and then just go to the clients directly, because you're going to have, I don't know, any platform that sort of puts me on the same shelf as 40 other people. And you it's all based on, it's not all based, but it's very much based on how much will this cost at the end of the day. That's very frustrating to me, and I don't think I would really want to be put on that. Whereas I'd much rather be my own business and have clients find me and be able to have coffee with them and talk about this amazing thing that we're going to build with them and show them that the value goes much, much more past then this is the task get it done. So I know that's that's sort of what I think Upwork same with like Fiverr, things like that. It doesn't seem like a really great marketplace, but I do know there's lots of people making a living or a little bit of extra cash on it. - -55 -00:39:59,730 --> 00:40:03,540 -Scott Tolinski: Yeah. Totally, I think I'm in agreeance with you on that one. - -56 -00:40:03,570 --> 00:40:15,270 -Wes Bos: So if I was going to go out on my own and not use something like Upwork How would you like build people? How would you track your hours? How would you do your invoices all that Scott, any thoughts? - -57 -00:40:15,360 --> 00:40:19,650 -Scott Tolinski: Probably with pencil and paper, I would maybe just sit judges are handwrite it? - -58 -00:40:19,710 --> 00:40:32,760 -Wes Bos: No, what about XLS x docs, where you just save them to your desktop, and then when it comes time for to do your taxes, you you have to open all your XLS x docs. - -59 -00:40:32,790 --> 00:40:48,860 -Scott Tolinski: Yeah, I could use XLS I am a big fan of XLS. For most things, I would prefer probably to do it in a PPT and then take a screenshot of it. But whatever works for you works for me was and neither of those, neither of those strategies would be that first because they're not fresh books. - -60 -00:40:49,800 --> 00:41:26,730 -Wes Bos: So our sponsor today is fresh books. If you are I don't know if you're gonna be a freelancer, do it on your own, use fresh books. To handle that part. Part of the reason people don't want to use something like Upwork is because it handles all of the paperwork and the taxes and the billing and all of that software like Guess what? Freshbooks does that all for you as well? Well, I want you to go ahead and check it out. Max freshbooks comm forward slash syntax, and you're gonna get a 30 day unrestricted free trial max this this ad is only for max really coming from Max here. Yeah. So check it out. Max, thanks for listening fresh books, or thanks for listening, Max, and thanks to fresh books for sponsoring. - -61 -00:41:26,879 --> 00:43:25,020 -Scott Tolinski: Okay, cool. Next question from Jamie. After your episode on spelt, I did a deep dive to see what it could offer. I like it. I'm willing to make the buy in. But I had there. Jamie's got a lot of intonation here and is typing. So I just wanted to get that across. But I already have a fast website and a developer flow, like dot files, the starter templates, snippets, and this is the big one, linting and formatting on Save. If my website is already fast, why should I sacrifice my developer experience to learn a new syntax note, you should not sacrifice any of that stuff to learn any syntax? That's the answer. If you really like felt enough to go off and build some stuff with it, do it, go for it. But like, just because the syntax is fancy and nice and clean, and whatever, doesn't mean you should abandon the things that make your workflow fast and effective and efficient. And all those other things because you have these processes react is not going anywhere. If you're talking about react or whatever you're coming for, you know, there's really not a whole big reason to switch unless you one are willing to invest the time into replacing those processes. And to do that you probably have to be pretty dang sure that this is the technology you want to switch to. So there is a little bit there. I'm liking and using spelt myself, but I have not started the spell to branch of level up tutorials comm yet, just because that would be a huge investment of my time and my effort. And I really got to be dang Sure. So why should you sacrifice your device? I don't think you should. I don't necessarily think you should totally jump ship from whatever you're doing. That said if you want to slowly migrate over that sounds good. You want to jump in all at once. That sounds good too. But you kind of got to be sure of what you're doing. If you're making a big change like that. And like I said, I love spelt, I'm really excited. The next level up tuts course is going to be installed. It's really cool platform. But I don't know if in 2019 right now you need to drop what you're doing and switch. - -62 -00:43:25,320 --> 00:45:19,170 -Wes Bos: Yeah, I think there should there should be a clear benefit to the end user which faster, better, greater website and a clear benefit to you as a developer, which is a better developer experience enjoy ability, big array of plugins that you could you can tap into. So I know don't write it off because like certainly we've all been there before where we write something off because it sounds silly and then you realize two years later I was wrong about that react. Yeah, react or, or anything like that. But I don't know. I think it should be a clear clear why and I don't think you also have to get in so early on stuff like this, like if you're like, Huh, pretty interested in it. I'm gonna sit on my hands for six months, and then take a look at it in six months and see like where people at because there are people right now trying to figure out all of the things that you mentioned, as to how do we make that very, very easy for everybody. Next question from Mr. tasty treats. Wow, that's a copyright infringement. So you'll hear from our lawyer. Will there be a CSS Grid inspector in Chrome? Do you use a third party grid inspector or stick with Firefox CSS Grid inspector. There is a CSS Grid inspector in Chrome. But it's not nearly as good as the one in Firefox where the one in Firefox you can turn on and off. Areas showing you can see the line numbers you can see all of the information about it like Firefox is just killing it and CSS tooling right now. And CSS Grid in Chrome is just you just hover over the elements It shows you the grid. So will there be? I would? I would hope so I would think so I would think that there are people working on it right now. But I don't use a third party one in it. I honestly don't need the inspector all that often. And when I'm working on something particularly challenging, I will always help. Yeah, - -63 -00:45:19,170 --> 00:45:25,350 -Scott Tolinski: I'm right there with you if it's really something challenging, or new or fresh Firefox to get a handle on it, but - -64 -00:45:25,350 --> 00:45:27,090 -Wes Bos: you're good at it now. Yeah, I'm - -65 -00:45:27,090 --> 00:46:06,990 -Scott Tolinski: typically fine with the chrome ones. I use the grid so much that like, I don't know, most of the simple use cases. Yeah, I can just, I just, you know, think of the code becomes a reality. And my site just looks nice, because CSS Grid is like that once you get good at it. So no, yeah, I think the the chrome ones will probably get better. Like you said, the Firefox ones are great. Yeah, if you need them. But for the most part, just keep practicing at the grid. And you'll hardly end up wanting to use them or need them anyways, unless it's extremely complex. Although maybe when sub grid comes, that's going to even be different, because I could see sub grid getting a little tricky. I know, we talked about that in one of the previous episodes. So check out the sub grid talk, if you want to learn more about that. - -66 -00:46:07,380 --> 00:46:38,070 -Wes Bos: Yeah, that was good. I finally just using like, the standard stuff in CSS Grid, like 90% of the time. And then when I'm doing a particularly challenging layout, that's when we'll have to get into it. It was funny. I came back from code Ace and CSS nav in grid. And I was just sitting there being like, how do you center something? And I took me a second. And then I was like, Okay, I'm back in it justify in line and items and content and all that. And it's like, Okay, I'm back on. Yeah. - -67 -00:46:38,700 --> 00:49:27,330 -Scott Tolinski: All right. Last question of the day comes from, is it chat or shit? I think it's chat. Sorry, chat. Chat is from New Zealand. So it's fun last name from New Zealand. It's pretty sweet. Last name their chat. Hey, Scott, and Wes, I'm looking for some advice on what is the best way to handle media queries in Gatsby with styled components I've seen online, just add styles from the components. So to say with a squeaky screen width of 678 pixels, you'd have to go through each component and add the media query there. So they end up being the same media max width 768 pixels, heaps of times, even more, when there's more breakpoints in the UI find it a bit tedious. Okay. Surprise. Part Two question here, too. If I want to pass a different props to a component in Gatsby on the window size, how should I go about doing this crate react app, you might use window dot inner width to determine the viewport size and pass the appropriate props into that Gatsby window isn't available at build time. So how should I handle this? Here's how you handle this Mansur part two first, because that's how I do it. Um, you check to see if window exists before accessing a window dot inner width. So you just check to see if it exists. That way, when you build the site, it's not going to exist, you can have some default value there for it. So yeah, you don't have you can use window dot inner width, just check to make sure it exists. First check to make sure window exists, I should say. And then that way is a good way of getting around, especially anytime you're doing anything with SSR. And you have that window is with that's how you get around it regardless of the platform. This first question, how do you manage breakpoints, I do it via the same way that styled components recommends to do breakpoints on their website, which is to basically have an object with template tag literals, and be able to do things like above dot mid above large and do it that way. Otherwise, I would most likely hand write out the media query. That said, I think the key here because you mentioned having to add a media query over and over and over again, I think the answer lies into building a more reasonable reusable component system. If you find yourself having to add the same breakpoint over and over again, I would, I would do it the way styled components recommends on their website. But in addition to that, I would look into maybe what things you can abstract into components that are both wrappers or layouts or, or things you can use, I have a whole component layout and library system that I built for level up tutorials myself, uses styled components. And let me tell you, I hardly ever have to create a one off component with a media query. Because all of my layout tools are already built as a styled components library. So I don't really have to think about them that much. - -68 -00:49:27,629 --> 00:50:43,500 -Wes Bos: Yeah, I it's funny, you say this, like I've sort of moved away from just building like a medium version of my website or a 768 version of my website where you have like three sort of main break points. First of all, because CSS Grid makes things so much easier, absolutely. That I probably write a third as many media queries as they used to before CSS Grid. And second, I just basically whenever I hit a point where things are getting tight, or it doesn't look good, I say okay, what's that about? Thousand pixels. Okay, I'll pop a breakpoint in there, and then just write it for that specific component. So I'm not sort of thinking sitewide. I'm just thinking more in a component level. And I do think that like, like sort of component queries, where you can say when this thing is a specific width, then then change that way. So that way, the components a lot more flexible than putting anywhere so yeah, I sometimes I'll put like a medium sized breakpoint in there or put it in my theme provider. And then say, like, this is my breakpoint. And the nice thing about that is that if you ever do want to change that breakpoint site, why then you can, I can't say that I've actually ever run into that the need for that. Yeah. - -69 -00:50:45,090 --> 00:51:14,940 -Scott Tolinski: I think that that's pretty much it. I don't really have a whole lot else to say on this. That's it. I just make sure your site looks nice in all of these different viewports. But again, zine systems, those kind of things. They're your friends. Okay, so that is it for this week's potluck question. I'm so sorry. If we did not get to your question, you should see the absolutely monstrous list of questions we have to pick through. It is it's like we can't even read them all, let alone picks them. So I'm so very sorry. - -70 -00:51:14,940 --> 00:51:25,410 -Wes Bos: If any of the spreadsheet lags when you scroll it. That's it. Don't let that stop you from submitting it. Because we pick the very best questions. Yes, yes, - -71 -00:51:25,410 --> 00:52:11,040 -Scott Tolinski: we I mean, we really try. We really try. But again, if you feel like your question was top notch, and we didn't get to it, I'm very sorry. Maybe even try resubmitting it because maybe if it's been a couple months, maybe we've lost track of it. But thank you so much. For anyone who submitted questions. If you'd like to submit your own question, head on over to syntax FM, and click the little ask a potluck question. It's in the top right side of the screen there. And we'll we'll get to it on one of our next potluck episodes, which is going to be in four weeks from now. One month from today. It's going to be the next potluck episode. So that was the part of the show where we get into his sick picks. These are picks that we find that are sick. Oh, wow. This could be anything I think you have even I think West sick pick the garbage bag ones. What else have you sick pick before - -72 -00:52:11,100 --> 00:52:12,450 -Unknown: I picked a garbage bag? - -73 -00:52:12,990 --> 00:52:23,310 -Scott Tolinski: No, you didn't. I just made it. They can be off the wall. The fact that you you like weren't like no, I didn't do that is evidence that it's it's possible. - -74 -00:52:23,970 --> 00:52:30,300 -Wes Bos: I've got thoughts about garbage bags. So yeah, absolutely. I would probably pick pick a garbage bag at some point. - -75 -00:52:30,810 --> 00:52:36,150 -Scott Tolinski: Right? Yeah, as long as it was able to tell me the time and read my Twitter feed. Smart garbage bag, - -76 -00:52:36,150 --> 00:53:13,320 -Wes Bos: man. That's what I did make. I made my own Garbage Pail out of I went to a like auto mechanic and they have these big blue barrels. sitting outside. Yeah, windshield washer fluid in and I got those and I cut the tops off of them. And then I got like bungee cords that will keep the you know, when you throw something in the garbage in the bag comes in after it. That's the worst thing to me. So I put that and then you also drill holes in the bottom of your garbage can so that when you pull the bag out, it doesn't suction to the bottom of the garbage can. So like Yeah, lots of hard tips about garbage bags here. - -77 -00:53:13,830 --> 00:53:19,650 -Scott Tolinski: See? See? isn't totally off base there. Okay, so what is your sick pick for today? - -78 -00:53:19,710 --> 00:54:24,960 -Wes Bos: My sick pick is a YouTube video of Steve Rowe and Andy Roy. So you know, TiVo is obviously the guy from jackass. And Andy Roy is a skater. And they both recently have had been sober for like, I don't know, six months a year or something like that. And they're both of their lives like if you'd like if you heard the story of like Roy, Steve o doing ketamine and like it's not an MD ROI just like has no teeth and things like that. And he got teeth and they both got like sober and they both look amazing. And they have this like YouTube video where they're just like filming in a car and they're driving somewhere. And it was super interesting to listen to just about like their past and growing up in San Francisco and things like that. So if you want to have I don't know a very entertaining especially if you like sort of grew up watching these guys skating and jackass and all that. I think it's really interesting watch. Yeah, if - -79 -00:54:24,960 --> 00:57:03,840 -Scott Tolinski: you want to, if you want to know why Andy Roy is like how he is are you going to do is watch that vise did a little documentary on him. And Holy cow. His life is set up to sort of put him in the position that he sort of was I can't really say too much other than that other than like his family life, his parents, all that stuff is sort of horrifying. So Andy Roy's a fascinating person. And definitely something that his his a little documentary about his life was well worth watching if not for any other reason than an interesting Life of some human being my sick pick today is going to be a DIY air filter, I have a gym garage, it's like an old garage, it produces a lot of dust in there. It's the old sort of dank garage, it can flood occasionally. And that's where we have our gym stuff. So I decided I really need an air filter in there who knows what I'm breathing in. And we bought this really nice expensive air filter from Costco it cost like 140 bucks. And that's great. But like, I don't want to go throw that thing out in the dank old gym. Yeah, so I found some video from a professor at the University of Michigan who specializes in air quality stuff. And they found that this solution of a standard $20 box, and a pleated filter, like a standard air filter that you'd put on your furnace is actually extremely effective. Although it's not as great as an air filter. This cost me like 40 bucks, maybe, which, you know, you could get three of these, or these for the same price that you could have regular fancy air filter. So I you know, I was I bought this air filter, and what I did is I bought a four inch thick air filter, which actually believe it or not, the four inches thick part of it makes it so the airflow is easier through it rather than more difficult. So I got one that is a carbon pleated Merv 12 air filter, and the carbon does a lot to pull out some of the smells. And like I said, this gym is pretty dank. And I noticed a 10,000% reduction in dankness in there when I went in. I was like, Oh, this is this is a little bit less dank. It smells pretty good. So I'm a big fan of this so far. It's obviously doing something and it's obviously working. And the fact that somebody from the University of Michigan says it's going to work means that I am going to believe it. Because I'm a big fan of the unit. So that's amazing. Yeah, I put put the link to the box fan of the filter in the show notes here. You can check it out if you're interested in that kind of thing. - -80 -00:57:04,170 --> 00:57:55,080 -Wes Bos: You know, you can also do with that thing Scott was said, Get some beef sliced it real thin. And you get another filter. Yeah, put it in you can make beef jerky. That's like a pretty popular way to make beef jerky is put beef between two airfares and run a box fan. Yeah, drying those meats. meats was? Yeah. Cool. Oh, man. That's good. Good. Sick pic. Shameless plugs today. I will shamelessly plug all of my courses I can just, I'm working so hard on my beginner JavaScript course. It's a half of the questions that we get in our potluck. When is it coming out soon. It's going to be great when it does come out. But I have Wes Bos comm forward slash courses that has a list of all of the courses that I offer. If you want to take a free one or a paid one use a code syntax for 10 bucks off - -81 -00:57:55,530 --> 00:58:48,750 -Scott Tolinski: sick. My shameless plug is going to be my new advanced Gatsby e commerce series that just came out and we build a custom shopping cart. We work with coupons, we work with local storage. And we work with Shopify all within Gatsby to build blazingly fast sites, it picks up where the Gatsby e commerce series that left off. And you don't have to worry a ton about like styling are the initial stuff of connecting Shopify to Gatsby, we sort of do all that stuff for you, or at least in a faster way than we ever could have in the other series. And we spend a lot of time talking about strategies for dealing with the Shopify API via context, all sorts of stuff. So if you want to learn Shopify, in Gatsby, head on over to level up tutorials.com forward slash pro sign up for the year and to get 25% for free. 25% off, not for free. But thank you so much, and check it out. - -82 -00:58:48,930 --> 00:59:00,990 -Wes Bos: Beautiful. I think that's it for today. Thanks for tuning in. And make sure you follow us on Twitter at syntax FM. I'm at West boss Scott is at St. olinsky. And I think that's it anything else to add? - -83 -00:59:00,990 --> 00:59:01,500 -Unknown: No. - -84 -00:59:01,890 --> 00:59:03,450 -Scott Tolinski: All right, peace. Hey, - -85 -00:59:05,520 --> 00:59:15,270 -Unknown: head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax181.srt b/transcripts/Syntax181.srt deleted file mode 100644 index 24442fd04..000000000 --- a/transcripts/Syntax181.srt +++ /dev/null @@ -1,152 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,000 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally. - -2 -00:00:26,579 --> 00:00:53,220 -Scott Tolinski: Welcome to syntax on this Monday hasty treat. We're gonna be talking about automation and things that you can do with your own workflows that we do. And just give you a little bit of insight of some of the stuff that we do to make our lives easier on a day to day basis. Whether that's recording or delving or any of this stuff. My name is Scott to Lynskey. I am the creator of level up tutorials. full stack developer from Denver, Colorado and with me is always is Wes, boss. - -3 -00:00:53,280 --> 00:00:55,140 -Unknown: Hey, folks. Hey, Wes. - -4 -00:00:55,140 --> 00:01:00,780 -Scott Tolinski: What do you find if your nickname was the boss? And then you could have like West, the boss boss. - -5 -00:01:01,110 --> 00:01:13,530 -Wes Bos: That would be really cool. People always call me But hey, boss. Yeah, like when you're out like a shwarma shwarma place or something like that. Like they shed a boss. What do you want? I'm like, Do you know me? Or are you just call me boss like, because that's a cool thing to do. - -6 -00:01:13,560 --> 00:03:17,280 -Scott Tolinski: Yeah, that'd be pretty cool. I approve. Cool. So this episode is sponsored by Sentry. Now, Sentry is one of those really key things part of my workflow that allow me to track all of my errors and exceptions. I look at my Sentry just about every single day, I get alerts for regressions, and all sorts of stuff like that. So if you want to check out Sentry, head on over to century to IO, and use the coupon code tasty treat to get two months for free. Let me tell you just a little bit more about what I'm using Sentry for right now. So I have Sentry all the time on both my API. And by front end of my site. One of the coolest things you can do inside of Sentry is to mark a bug as as been confirmed that you've completed this. So let's say I got this bug says cannot read property underscore ID of undefined. Okay, I didn't then go and then find within my react component or whatever it may be where I'm trying to read a property from something that doesn't exist, but I push an update. And then I go ahead and say, Hey, this was resolved. And this was resolved in the next release, or even the current release, or even a very specific release, I can attach these these things to release this directly. So I can just say check checkbox, you've resolved in this release. And then, uh, you know, I'm sitting at home, I'm watching TV, and I get a little buzz on my phone, it says, regression. And I can see that I had a regression in this bug and I didn't actually fix it the way I wanted to. And sure enough, that the release, I pushed out to fix it. So these are the kind of tools that you get with Sentry, as Sentry die of stuff that I absolutely rely on in my day to day life. So this episode is going to be talking about other things that we rely on in our day to day life in coding workflows. And these are going to be automation workflows are things that we just use to make everything easy. And we're going to be talking about some home automation stuff, some bash scripts, some Alfred stuff, and maybe just a little bit of miscellaneous things as well. Do you want to kick it off? I think the first thing we want to talk about is Alfred. - -7 -00:03:17,460 --> 00:04:45,950 -Wes Bos: Yeah, I'm a big fan of Alfred myself. It's if you don't know, Alfred is this like Little Mac app that I personally hit alt space and it pops open, Alfred, and you can launch apps from it, you can install extensions, like I use one to convert HTML entities from one to another. So if you have like Exxon, thank you. And you want to know like, what is that in HTML entity, like ampersand, excellent, a Gu, semi colon. I'm not sure exactly what it is. But you can just take it in there. I'm going to do it right now. That's pretty sweet. So I just typed D or encode, er, you know what my laptop is in the shop right now. And I haven't installed all of my alfrid extensions to this new one. So I would be able to tell what it was or, or the times and then I have another one that will do the other way around where you can decode and percent times and it will show you what the equivalent one is. And it will show you basically for and I've got all these different plugins that I use without friend, we've talked about that in the past. But another thing Alfred allows you to do is like workflows where you can say like, when I type this thing in, go off and do these things and has this awesome editor where you can stream together different tasks and whatnot. And quite honestly, I don't have any of my own custom workflows for that. But after seeing what you have here, I'll let you talk. I kind of want to build some of my own. - -8 -00:04:46,169 --> 00:07:46,680 -Scott Tolinski: Yeah, I have a couple of that are great, and I've been recently getting more and more into these. I goofed around with them a little bit in the past, but I have a few that I've been using right now hold on one of them. The first one is the most basic I have one that changes my audio inputs. So I can just do like, oh, is my audio playing through the wrong thing. So I can just toggle my audio input. Okay, that's just minor. But the major ones I have are ones that actually prepare me for my different work environments. One of the things that I really struggle with is occasionally, I don't want to say, focusing, but it's my brains all over the place. So I have a hard time necessarily shutting everything down. And if I have stuff here or there, whatever, I'm likely to sort of bounce around, or maybe glance on Reddit or something like that. So I've been really trying to make my life automated in those ways that I don't have to think about some things. So for instance, I have one that I just called record. So if I do Alfred, and I can just type Rec and it, you know, finds the right one. And what this does is it closes every single app on my computer, it then turns on my focus blocking software, so that I can't visit any social media sites or any blogs or any of that stuff. And then it opens up the apps that are required. So I will open up my screen flick, it will open up VS code, it will open up Chrome, it will open up anything that I need for my recording, I think that's it, let me check, it opens up a notion as well, because I keep my notes and notion. And that's pretty much it here. That way I can have everything up and running and nothing else. And it This ensures that which is something that I really need more and more. Now, I don't know why, but it's getting harder for me to focus. So I'm making my things happen more like that. I also have one for syntax, which closes everything but then opens up logic, zoom and notion. And it also has chrome open to just so I could look up notes and things like that. So using these little workflows are really great. There's not a lot of great ways, though, to make these super shareable these ones that I have, because what I've done for the ones that close apps, I've written Apple scripts to do them. And it's not going to fit your workflow entirely. It's so it's kind of hard to just share because it's not something you can just plug and play, I kind of just, I don't know, I just kind of like wrote this whole thing in Apple scripts. But you can definitely find workflows and things like this online that you can copy and paste, it's largely what I did is copied and paste these from other places. But I definitely rely on these and I've been using them more and more I'd like to get into combining some of my bash script, we'll see sh script, I guess stuff. Because it's not as easy or whatever my z sh functions, I'd like to combine some of those with some of these to make these gigantic transformer workflow things but have not had that happen. yet. That's such a good idea. It's a great idea. - -9 -00:07:46,859 --> 00:08:58,550 -Wes Bos: The cool thing about Alfred is you can always kick out to any like script that you want. So whether it's a PHP script, or a node script or a bash script or anything, you can just kick out to that and then receive the data back and then display it in, in your Alphard output or throw it in the key in the clipboard. Whatever it is that you want. I think it's really important. If you have a hard time with the sort of setup, being like, I'm gonna record a video today, but like, oh, then I have to close on my windows, like, Oh, you have all this sort of stuff blocking you, automating all of that same with like starting a new website. Like I don't feel like starting a new site today. If you could just automate that all and like when I when I was doing WordPress, I would just have like a one key command or one shell command and it would automatically create the folders for me it would give me a new Photoshop file, it would give me a fresh WordPress or create a database, it would change the words in the WP config file. And like all of that is like and then like I was up and running. I was like, Ah, okay, like I'm done the boring part. Now I actually get into the fun stuff, which is actually building it. So automate away the boring and the monotonous because that is often a blocker in terms of getting actual work done totally. And - -10 -00:08:58,550 --> 00:11:04,560 -Scott Tolinski: that's sort of what I'm about right now is about getting all this stuff. One thing I really wish Alfred could do is I wish it could really quickly and easily integrate with my Google Assistant stuff. Because I have some home of flows my smart home routines that I would love to be able to include in this I would love to be able to type an alpha command and have my smart home routines just happen. I found it's maybe possible but not exactly obvious. There's like some Python thing library to integrate with it but it hasn't been touched in a little while. It's a little iffy. That said we also have some smart home routines here. I don't know if you do a ton of this stuff but I use a lot of these I tell my my routines that I'm recording. And one of the things that does is it turns off my studio monitors that way I don't get any sort of digital hum there or anything coming out of my studio monitors there. No accidental noise coming out of them. I also it turns off my air conditioning because the air conditioning units right outside my office. I also Have vents in here. And what this does is it just prevents any of that low hum in my office. It also turns on my office lights and turns on my desk. My desk includes my monitor and all sorts of stuff with my my audio stuff. So I have a recording one. I also have an intros one where it turns on my studio lights for when I record the introductions for all of my videos. I have one that says I had just told Google that I'm working and it turns on my studio monitors so that I could listen to music, listen to podcasts, or any of that stuff. Turns out my desk just gets my office ready to go. And then I have a shut it down routine called shut it down that runs every day at 6pm. And it shuts off my desk. It turns off every single outlet in my office except for one, which is the wise cam I have that's pointing into my backyard. That's actually I know you have wise cam setup outside. But for me, yeah, I have a really nice windows spot in my office that can I just point out the window. And I use a little magnet mount thing that they come with. And I have just pointing out the window so I can get my whole backyard and the wise cam through the glass. - -11 -00:11:04,650 --> 00:11:08,340 -Wes Bos: Does the IR at night not reflect off the glass though? - -12 -00:11:08,550 --> 00:11:17,040 -Scott Tolinski: I haven't had issues with that. But it's like, it's like pushing up against the glass. It's not like a distance away from it is right up on there. - -13 -00:11:17,160 --> 00:11:31,170 -Wes Bos: Okay, okay, cuz I ever thought I could do that at some point. But I put one in my office pointing out the window. And then at night when you want night vision, it was just reflecting the IR off the glass and that you could just see the camera itself. - -14 -00:11:31,200 --> 00:11:37,560 -Scott Tolinski: That's funny. I I should check on that. I don't think I've had that issue. No anything. And I just had some clients that at that much. - -15 -00:11:37,740 --> 00:12:38,190 -Wes Bos: Yeah, we put some in some outdoor enclosures, which would they've only been running for two weeks, but they're going strong, but wise themselves have said, we're testing an outdoor camera right now. So I bet. Yeah, next couple months, we'll see an outdoor camera for sure. Cool. I just have a couple of those little there are through Google Home as well. We have one called it's called shutter down. And you just say, okay, Google shutter down. Sorry, if I just tripped your chapter thing. And that turns off the TV or girl, we forgot about gorgo gargle, turns off all the lights, I used to have it turn the thermostat down. But then I just figured you just automate that anyway. So I took that off. And then we have a wake up as well, which turns the lights to like 12% in the morning. And it's it's pretty nice to be able to do that. past that I don't really have any other smart home routines. I think as I'm getting more and more stuff that is smart in my house, I'll probably start getting into that. - -16 -00:12:38,310 --> 00:14:29,850 -Scott Tolinski: Now man, I got a lot of routines that aren't necessarily even a part of my office. Like, we have these porch dangly lights that come on at a certain time, the lights throughout the house, maybe starting at six o'clock progressively get dimmer, so that way, we you know, the evening time nine o'clock rolls around, the lights are all dim. We're not all just being blasted with light. So we're, you know, ready to go to sleep. So I like to I rely on these things a lot. I really have a fun time really playing with these routines. For some reason. It's something that I could just do endlessly. I really enjoy setting these up. It's like, I don't know, I'm really into it. So the next one we want to talk about was bash scripts and aliases. I use a lot of aliases for stuff more so than I use functions or scripts, not you know, functions are fine, but aliases just really do the job a lot of the time. For me, I have one that is just G, which runs git add period. And then it runs git commit hyphen m, and there's an argument of, you know, the thing so I can just type G, and then my commit message, and then that adds any unstaged, untracked files and then commit them. Really nice and easy. I hate having to type git add git commit hyphen, M Yeah, you know, like the word I'm on. So I have that I have one that's just push that just as git push origin with an argument. So push master push develop. I also have one called lat. l UT so I can just, I just open up a new tab le UT and what it does is it changes directories into my level up tutorials directory, and then runs yarn and then runs yarn start. So that way I can get my whole application just up and running with a one little commander, just that Oh, UT. I'm sure I have lots more to be honest. But these are the ones I use. Primarily I use these all the time. So the those are the ones that I'm a big fan of. - -17 -00:14:30,330 --> 00:14:57,210 -Wes Bos: I have Yeah, I've got a handful as well, sort of depending on the project that I have. I sort of just add them as as I go. One that I use everywhere is get a see exactly what you said. It adds everything and commits it with whatever message I pass it. I have that as a I used to have it as like a like a bash script, but I changed it to be a get alias get script. Did I hold on? Hold on? Yeah, - -18 -00:14:57,210 --> 00:14:57,720 -Unknown: hold on. - -19 -00:14:57,720 --> 00:14:58,920 -Hold the phone here. - -20 -00:14:59,160 --> 00:16:25,590 -Wes Bos: Yeah, it's it's It's not a, it is a it's in my like, my Git config file. So it is a proper get. One, I don't know, what's the benefit of making it a good alias other than not that versus something else. But I did. I use z a lot. So z is like a thing that will allow you to jump to free sent directories, which is frequent and recent, mixed together. So you just say like, z, I call my thing, Boss monster. So I just type z monster, and it will put me in the monster, I'll do z monster back end. And it will put me in the back end folder inside of my boss monster folder. So that has done away with a lot of my aliases because it's just smart. And it learns based on what paths you go to. So I deleted a whole bunch of my things, I have one just called like, db, and it puts me in my Dropbox folder. Oh, nice. Yeah, I have one called t, which uses this utility called tree. If you I think it's brew install tree. And what that will do is give you a nice tree listing of your directory. And then I can just say t three. And that what it will do is it'll give me three levels of directories. And then it will ignore DS store, node modules and a couple other files that don't necessarily want to see. And that's great for tutorials to sort of just give people a visual as to where where the files are. And where we currently are, oh, this might Yeah, I have one called source, which just - -21 -00:16:26,880 --> 00:16:29,610 -Unknown: sounds like an alien race source. Yeah. - -22 -00:16:30,690 --> 00:17:08,570 -Wes Bos: That will just source those that sh RC file, and then move back to the directory where we currently we used to be, because if you ever make edits, to use that sh file, you have to close the terminal and open it up again. But if you type source, that sh RC and then and then go back into that directory that will allow you to sort of stay where you are in the headspace. So I just made a quick little alias or a little function. It's a function called source. And I've got a couple other I used to make animated GIFs on the command line. But I don't do that any longer just because there's a lot other better apps out there for creating animated GIFs. Interesting, - -23 -00:17:08,810 --> 00:18:06,990 -Scott Tolinski: I forgot one that I use all the time. And I'll have a will have this in the show notes. But I use one that I have as our NPM. And what it does is it removes my node modules folder recursively from every directory. So like let's say I'm running low on Well, okay, so I should should note that I create a lot of repos when I do my courses. Because I duplicate repos, I do a lot of stuff there. And I occasionally get a ton of node modules folders. So I can just point I just do our NPM when I'm in the site's directory, and that's going to find every single node modules directory in that thing, and delete all of them in one fell swoop, saving a ton of space. And to be honest, like you don't really probably need those node modules folders anyways, you can just head to your directory and type, you know, yarn or npm install when you're about to work on the project anyways, so I like this our NPM again, I'll have the the actual syntax for this available in there. So you can check this one out, too. I use this all the time. - -24 -00:18:07,290 --> 00:18:41,280 -Wes Bos: That's neat. I, I have some, I can't find what it is right now. But I have something that will search my hard drive for node modules, folders and just delete them. If I haven't touched the directory. It's been more than a month. It's somebody built after on Twitter, I was like, how do I delete because they're like you're running out of space on your laptop and node modules. If you have like any sort of like, like Time Machine backup or anything like that 40 million files will make it really slow. So just cleaning those up is is really helpful, because you can always go back and npm install them later if you need to. - -25 -00:18:41,360 --> 00:18:42,480 -Scott Tolinski: Yeah, totally. - -26 -00:18:42,750 --> 00:19:57,930 -Wes Bos: Uh, what else we got here. Other things that we have, I do a lot of not a lot, but I wish I did more email automation. So if you're a student, you sign up for a student discount that will go into a queue and then I can just mark it as approved and then it will automatically send out the email student discount to them. And then it will then check if you had bought it three days later. And if you have not bought it three days later, it will send a follow up email being like, Hey, is everything okay? Like, did you get the code and that's it's both a sales tactic. It sells a lot more courses. And also it's it's helpful because a lot of people are like, Hey, no, I didn't get it or Oh, sorry for I checked my my junk in it went into there or something like that. So I find that be very helpful. I'd love to get a lot more email automation like that, because it's really good for for sales. I've like I use stripe web hooks for a lot of things is specifically if people if there's a dispute on a charge, or if there is I forget what the other hooks are. But basically, if there's anything fishy going on with stripe or PayPal, it will ping a URL on my on my server and my server will automatically freeze that person's account. - -27 -00:19:57,930 --> 00:20:06,800 -Scott Tolinski: So are you doing all that with this node mean even the previous one, the email discount the student discounts thing? Is that all are you doing though with node? - -28 -00:20:07,229 --> 00:20:49,410 -Wes Bos: The No, that's all done with drip, which is my email provider done with drip, okay, they have a whole, like a system that you can create these workflows in. So basically, if you look at the workflow, it will, the person signs up, they put their email in, and they can email some proof. And then you can go in and tag it as approved. And then it will then send out the email to them, that gives them a discount code. And then you say, wait three days, and then after three days, you have a if they have a tag of customer, that's it. And I don't have a tag of customer, then do a follow up email, say, Hey, is everything okay? Do you have any questions? Things like that fun? - -29 -00:20:49,410 --> 00:20:50,570 -Scott Tolinski: Cool. - -30 -00:20:50,879 --> 00:21:13,140 -Wes Bos: Yeah. And then I've affiliate payment that's somewhat automated, I still have I still approve it manually, because it's kind of scary automating sending people money. But it does a lot of the sort of the heavy lifting of calculating and creating a CSV for me, and then that CSV, I can just manually upload to paypal and, and send out my affiliate payments. - -31 -00:21:13,850 --> 00:22:19,110 -Scott Tolinski: Very fun. All right, like this. These are all things that I'd be looking to automate more like my student discounts. I'm still approving all of those by hand, I look at every one of those anybody time. If you think that's a robot, now, that's me looking at your your student account stuff. So I need to fix that I need to make it better. I mean, to have it, because that sounds nice to just be able to check and click and whatever, rather than respond to an email or something so interesting. Interesting. I would love to Yeah, I've been working on automating some of these processes within my codebase. A lot more. I mentioned, I think it was in the last episode or a couple episodes ago, about my new importing system, where before, I used to have to import the playlist, then import all of the videos, and I had to like copy and paste a whole bunch of stuff. And now I can just paste in the playlist ID I click Import, and it brings in not only the playlist, but all the videos. And if I want to update I just click it again. I mean, there's like trying to automate that stuff out of my life has been definitely something that I've been wanting to dive more and more into both within the code as well as these systems. - -32 -00:22:19,710 --> 00:22:33,090 -Wes Bos: Yeah, I can't stand doing that sort of like stuff that you have to do every single month, you have to remember to do it has to be done in a certain time. Oh, yeah. Or like the same thing over and over. It's much better just to write some code and try to automate it. - -33 -00:22:33,120 --> 00:23:16,530 -Scott Tolinski: Yeah, yeah, definitely. One thing that we didn't talk about that I mentioned on the recording episode, is that I use an app Devi. And I use it to automate the placement of my windows. So if I want to put my windows in recording mode, ideally, my Alphard script could interact with Devi in somehow put all of my windows in recording mode after they open them. But we'll see might be one thing that I look into improving at some point in my Elford, scripts, my Helford workflows. That's all I have. I want to hear what kind of automation and cool stuff you are doing to make your dev life better. Even just simple things like what are some like fun little aliases or commands that you set up to make your whole process a little bit more seamless and easy for you? - -34 -00:23:16,860 --> 00:23:21,810 -Wes Bos: Yes, tweet us at syntax FM. I think that's it for today, though. Anything else to add there, Scott? - -35 -00:23:22,200 --> 00:23:23,070 -Unknown: I don't have a whole lot. - -36 -00:23:23,100 --> 00:23:26,310 -Scott Tolinski: I'm interested in this stuff. If you have any cool fun tools, let us know. - -37 -00:23:26,549 --> 00:23:31,620 -Wes Bos: Cool. All right. Thanks for tuning in. We'll catch you on Wednesday. Please - -38 -00:23:33,450 --> 00:23:43,230 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax182.srt b/transcripts/Syntax182.srt deleted file mode 100644 index 742ddca76..000000000 --- a/transcripts/Syntax182.srt +++ /dev/null @@ -1,396 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:01:34,560 -Wes Bos: development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. Welcome to syntax. This is the podcast with the tastiest web development treats. Today we are going to be talking about how we would tackle building a modern web app front end back end CSS images, all that stuff. We got a question from Michael Gunn fallston. And he said, I would like to suggest a syntax episode. How would you implement a simple version of a website like Reddit, Twitter or Airbnb including the back end, the front end data model all kinds of interesting stuff there. Now I thought that would be kind of a cool episode. So like if we were to be building, if we were in a startup, and we had this sort of idea of one of these apps, what tech would we choose? And how would we tackle this is absolutely not like a final word on this type of stuff like certainly much smarter people than than us. But if Scott or I just regular developers were to try tackle one of these things, how would we do it? Today we are sponsored by Netlify. And Sanity Netlify is going to you can make it easy to deploy your websites and Sanity is a structured content CMS for sort of like a back end for your front end. That could be hosted on Netlify or just perfectly perfect monsters that go too well together today. With me today, Mr. Scott to Lynskey. How you doing? - -3 -00:01:34,769 --> 00:02:27,360 -Scott Tolinski: Hey, doing good, I'm very tired. As the parent movie I feel like this is gonna be the internet like every episode for the little while. Yeah, I can't Well, I'm tired of it. Yeah, no, I'm, uh, I'm doing good. I'm working on a spilt course right now. I've been recording it for the past. past couple weeks here. Yeah. And I love spelt man, I just want to do everything in that now. There's so many cool little things about it that we didn't even get into in that episode, like, yeah, the fact that there's like a built in physics based animation and transitions library built into it. And it's awesome and super easy. That context stuff is super easy and awesome. Man. There's, there's so many cool things about it. And I feel like, you know that the person is always bouncing back and forth between new stuff. This, this thing seems new and nice enough that like, Ah, that's just want to use it. So rewrite your entire - -4 -00:02:27,360 --> 00:02:28,560 -Wes Bos: platform minute, - -5 -00:02:28,560 --> 00:03:00,720 -Scott Tolinski: a deal, I can't, I can't, I did find something that allows you to write spelt components in react, and I have no idea how good of an idea that is. I'm gonna guess it's not probably not a great idea for me to even try to do but, man, I just really like using it. And I'm excited to do more with it. So if, if you're interested in it, check out one. There's lots of stuff about it. And I'm gonna hold back, I'm not going to say that I'm going to use Vault for this because I'm not Yeah, I'm still pretty new to it by itself. But I think this is going to be a really interesting episode for our listeners. So - -6 -00:03:00,720 --> 00:04:08,460 -Wes Bos: let's get into it. There are certainly some situations in here that we will just say like, I don't know what I would choose for that, because it's not something I've totally run into. But let's get going. We'll start with the back end, what would you choose for that? For me, I probably would choose a node back end. Which is, because that's probably my by far my most comfortable language. And I think that it would work as well, especially because I think if you're building something that you hope to scale this big, you definitely do want to be writing it in something that can be easily transitioned or even initially written in, they say these things that can be done in serverless functions. And I think node is a really good fit for, for something like that. In terms of back end framework, I would certainly probably initially reach for something like Express. But I probably would also take the time to evaluate what a serverless framework would do for me in that case, just because of how cheap it would be to host and how easy it is to scale something like that. What about you? - -7 -00:04:08,699 --> 00:05:13,070 -Scott Tolinski: Yeah, and I probably go there as well, specifically, because you're gonna find a lot of it, like if you decide to do it with node, you're going to probably find the most available developers in Express. And so if you're thinking about growing this thing, or, you know, having it be more than just a one person development flow, you're not going to want to put yourself on something that no one's ever heard of. And everyone has to learn the moment that they get into your thing, because then you're going to spend so much money and time training people on something that is like, Oh, hey, this obscure node framework that nobody uses Good luck. Now you have to go learn all the documentation, but there's enough people using Express and using node that you're most likely going to be able to find the developers out there who have those skills to be able to make this vision a little bit more. So I would probably go in the same especially because that's what I know. And I'm most familiar with I've built stuff in Ruby on Rails stuff in Django before. And to be entirely honest, I've just way more comfortable in Node than I am either of those. So totally, - -8 -00:05:13,260 --> 00:05:56,130 -Wes Bos: in terms of an API, I would certainly go graph qL, from the get go on something like that it's a perfect fit for it, I don't think that I would reach for one of these off the shelf done for you graph qL products right now, just because there's a lot changing in the space right now. And I don't think that anyone has absolutely nailed it just yet. So I would probably just sort of roll my own out of the gate. And what that allows you to do is that you do have control over the raw database and all the resolvers should you ever need to move to something else and get, it's not impossible, but it is sort of difficult when you buy into something a little bit too early. And then you have to switch over to it. - -9 -00:05:56,310 --> 00:07:03,810 -Scott Tolinski: Yeah. And it's, it's not that hard. Well, it's not as hard as you might think. Because I've I've run my own Apollo server graph qL API with, I guess it is with Express, even though it's on Meteor right now, the API, part of it is done through Express. So it's really not that intense or anything, if you you're you're scared about it, you're nervous about it. If you can do basic database queries, you can you know, write a basic express or you can get your own graph qL server up and running in in not that much time. So I would I would reach for graph qL, just because I like it. And the next one is database, you know, people are going to be mad, because I'm going to say Mongo DB, and I'm not going to say Mongo DB, because it's the right option. I'm going to say Mongo DB, because I know how to use it well. And so while a relational database might be fine, I mean, it depends. Okay, am I building this to be Airbnb? Like, one day? Or am I building this as just a project? Because if I'm building this to be, you know, an absolutely massive thing, I don't know, I might look into a more appropriate database. One that's more relational based. - -10 -00:07:03,840 --> 00:07:24,060 -Wes Bos: Yeah. I don't know if you need to think about scale that early on, right? Like, those are good problems to have. If you're having trouble scaling, then obviously, you can, you can work on it. But I think a lot of times people spend way too much too early on worrying about scale, versus other things like developer experience, user experience, or whatnot. Yeah. So - -11 -00:07:24,060 --> 00:07:41,520 -Scott Tolinski: I mean, I personally would reach for Mongo, just because again, it's the database technology that I have the most experience with, and therefore it's the one I'm going to be able to work the best in other than maybe like my sequel, and like, most of my MySQL stuff has been done with PHP anyway. So yeah, - -12 -00:07:41,670 --> 00:08:29,010 -Wes Bos: yeah, I would probably like, again, Mongo is my own database. I've been very happy with it. But I've certainly seen a lot of people have Growing Pains with that. And I've never heard anyone complain about choosing Postgres. So I don't really have all that much experience in it. But I have looked at some of the adapters, there's packages out there that allow you to write your queries like you, like you do in Mongo, mongoose, or MongoDB, which is pretty cool. So I would probably reach for something like that, like a Postgres or MySQL, just because they're tried and tested. They work well, they scale well. And I haven't really heard a whole lot of people being like, ah, we chose Postgres on this. And it's the worst, you know? Yeah, totally. - -13 -00:08:29,270 --> 00:08:46,740 -Scott Tolinski: Yeah. And I would probably, if there was, like time in the project, to say, hey, you can go get very comfortable with a database technology, I would probably pick Postgres to just for the specific reasons. And I have a little bit of experience in Postgres, because that's what I used when I did rails and Django, but I'm not like great at it. So - -14 -00:08:46,830 --> 00:08:52,980 -Wes Bos: yeah. Also, like, we're probably far from database experts in this situation. Yes. - -15 -00:08:52,980 --> 00:08:54,510 -Scott Tolinski: I yes, definitively, - -16 -00:08:55,039 --> 00:09:42,960 -Wes Bos: we get a lot of requests for people like, why don't you come on? And like, why don't you do an entire episode explaining all the different databases and the pros and cons? I'm like, well, we actually don't know that at all. Which is, is funny, because, like, I think that there's a whole, I don't know, cross section of developers where you don't ever like you can, you could probably pick any database and never have any trouble with any of them. But it's when you start getting into real big scale. And I think of something like drip or ConvertKit, where they track every single event. And they have like billions and billions of rows in their databases. And they have huge Growing Pains over that. Because there's just so much data and being having to be able to scale that thing up is really, really difficult. And that's just something I've never had to encounter myself. - -17 -00:09:43,260 --> 00:09:57,840 -Scott Tolinski: Totally. Yeah, right. Because as large as my platform gets, it's never probably going to be that large. So it's not even something that I need to personally even really think about if it is if my platform does get that large. I'm gonna hire somebody to take care of it. Somebody who's an expert, so - -18 -00:09:57,960 --> 00:10:36,289 -Wes Bos: yeah, that's a great problem. To have. If Right, you are running into scaling issues like that, that we had data model as a question in here, I don't really know, I guess we kind of answered that with graph QL. and whatnot, I don't know how I would probably create a new content type for every content type on the website. So if in the end, you'd have, you'd have your user, you'd have your listings, and then you might have some, like, relationships between those two. And you'd obviously have a lot more, you might have like a messages data model. And those are relational to that. So I guess that's, I think, how everybody would sort of tackle that though, right. - -19 -00:10:36,289 --> 00:10:50,190 -Scott Tolinski: And even with graph qL style database, or graph qL style API's to truly easy to write those relational queries anyways. And so I would just make everything relational, even though I said use MongoDB. - -20 -00:10:52,440 --> 00:10:57,210 -Wes Bos: You still can. Yeah, like I've I've got lots of religious vibrational stuff in mine. - -21 -00:10:57,360 --> 00:11:00,240 -Scott Tolinski: Oh, absolutely. Yeah. Likewise, yeah. - -22 -00:11:00,480 --> 00:11:10,409 -Wes Bos: What about like real time? This is a question. It's like, would you go real time right out the door? We certainly remember that. That app we use for our live syntax pigeonhole. - -23 -00:11:10,440 --> 00:11:11,279 -Scott Tolinski: Yes pigeonhole. - -24 -00:11:11,279 --> 00:11:21,149 -Wes Bos: The whole thing is built on I think, graph, qL subscriptions, it's all immediate every time you hit save, it immediately updates, the whole thing is built real time out of the gate. - -25 -00:11:21,299 --> 00:12:33,029 -Scott Tolinski: Yeah, level up was real time out of the gate with Meteor for a long time until I just realized I wasn't using a ton of those features. So yes, it was cool to be able to push updates and have it just pop in there for the people who are currently using it without even refreshing the page or any of that stuff or be able to that would that was actually really might have been the coolest part is that I could change the data. And it would get pushed to the users immediately without them having to do any sort of refresh. But to be honest, I was not using those features. And it's the main reason I'm moving off of Meteor right now is that I'm just not taking advantage of that stuff. So I probably wouldn't go real time unless it was like absolutely necessary. And you know, like, right, it's adding chapter whatever every every app adds chat eventually. That's the joke is that, you know, your app just keeps growing until you have to add a chat to the app, which Yeah, think about every single app that you have probably added chat to it at some point. So I wouldn't go real time unless I absolutely needed those features, or until I needed to, because I spent a long time working around that stuff. And I really enjoyed the features that I had when I had them. But once it came time to, you know, work around them, it was a little frustrating to, you know, have that be sort of the default. - -26 -00:12:33,149 --> 00:12:57,149 -Wes Bos: Yeah, I think I would go with something like I would think early on. Is the framework I'm using have the ability to go real time like is it as easy as just flipping a real time switch and changing over to a graph qL subscription? Or is that going to be be more difficult? Like there's I was actually looking the other day? This feathers j s is now another version for - -27 -00:12:57,179 --> 00:13:08,429 -Scott Tolinski: feathers came out of Meteor? I think I mean, I don't think it came directly out of Meteor, but I think some of the ideas that I know, yeah, when the meteor community talked about feathers when it first when it first dropped? - -28 -00:13:08,669 --> 00:13:46,380 -Wes Bos: Yeah, I remember I was doing like some WebSocket demos, and somebody from the feathers team sent me a What is this? David luuk. Probably mispronounced that as they do everything. But he like created the equivalent in like a kind of express in feathers. I thought that was pretty nifty. I think it uses MongoDB under the hood as well. So I'm similar to Scott, I probably make sure I can go real time should I need to. But for a lot of these things, maybe Twitter would be would be helpful to go real time Airbnb, probably not read it, maybe. - -29 -00:13:46,380 --> 00:14:12,809 -Scott Tolinski: But even like, even Twitter isn't going to be real time real time because they're like collecting, they're not going to the tweets aren't just going to pop in there, right? They're gonna collect and say, all right, there's been 15 new tweets since you know. So you would think that that would more benefit to like this batched sort of like every x amount of time, we're batching to look for something rather than having the thing pop in there in real time. Does that makes sense? - -30 -00:14:13,140 --> 00:15:21,690 -Wes Bos: Yeah, I think TweetDeck uses streaming. And I think that that's kind of interesting, because like, Twitter itself, like the API is, is not. But if you need to build an app, that is a different experience, like Tweet Deck, then you you can reach for the Streaming API. So again, I probably make sure I could do it if I need to. Totally. So I guess I will be the back end of what I would choose for there on we didn't I'll say didn't talk about any, any templating or anything like that, because I probably and I would do it all as a not necessarily a single page app, but I would use some sort of JavaScript framework to build the entire thing. So I would reach for react and next jass so So perfect use case for something like next. jass is a server and client rendered react JS application. So that's like it comes with a router built in, you don't have to worry about picking that does server rendering for you don't have to worry about that. Next, jazz just comes batteries included with a lot of the stuff that you need for a web app like that. - -31 -00:15:22,200 --> 00:16:36,720 -Scott Tolinski: Yeah, you know, I'm currently moving my platform to next JS nine. And it's funny because I'm moving my API to their API routes, which has been really super cool. And this might be a nice little option, too, if you are looking for sort of server lists, style, because you can build each of your API endpoints as a single route within next j s now, and it's really nice. I have my entire Mongo around my entire graph, qL Apollo database coming in on one next j s. Route, essentially, and it's, it's really cool, I really like it. So I'll probably use next two, I'm really enjoying using next. And, you know, if you don't want the entire thing to be server side rendered, maybe you just want the template to be server side rendered, and maybe some other information, you don't want to for whatever reason, you can take control over exactly what becomes server side rendered at that point. So you could server render your entire application, you could do just little bits here and there, you could do just none of it at all, if you really wanted it that way. But I would personally have the whole thing be server side rendered, I would use react to do so I would do so with next js, and I would use their API routes most likely. - -32 -00:16:36,840 --> 00:17:02,880 -Wes Bos: Yeah, as sort of an aside, I can't wait for suspense to land. Mm. Because like, even though like next JS does server side rendering, it's still hard because you have to, like at a page level, you have to know any components that are loading data, and you have to wait for them. And it's this weird dance to do when you're loading that data. So I can't wait for suspense to come out make that stuff a lot easier. - -33 -00:17:03,270 --> 00:17:56,810 -Scott Tolinski: Yeah, and it's hard. Now that I'm moving to next, it has been easier than what my own custom one was. Because for my own custom, when I had to really, really take control of my own code, splitting stuff, had to take care of my own. All of my own Apollo code splitting, React server side rendering stuff to the point where it was really difficult to troubleshoot all the time, things were hydrating, oddly. And the next .js definitely has just sort of standard ways that they have to do things. There's a large community of people that use it. And the best part about next in my mind is their examples folder, which shows you examples of just about every single thing you could ever possibly want to do with NEC. So I'm a big fan of that. We had in here for routers, libraries. Again, since we're both talking about using next that's built into the platform. Otherwise, I would use react router, which is what I've always used if you're using react react router is pretty much the only choice right now. - -34 -00:17:57,029 --> 00:18:01,310 -Wes Bos: Yeah, reach reach router is being folded back into react router. - -35 -00:18:01,469 --> 00:18:53,460 -Scott Tolinski: Yeah, right. So before you you say, Oh, I want to try something new here. Yeah, no, I think it's react router or next jazz or Gatsby, one of those platforms that has the router built in. As far as CSS I would personally use, I would personally use self components. And here's why. Because I have a my entire component library that I've built upon freelance projects, my own sites, client sites, whatever, I built up my own CSS and JS sort of library for my own personal use, I know how to use it. It's sort of like a component library. But you know, the best code is the code you wrote. So I'm very familiar with it. Yeah. And I know exactly how to make anything happen with my own design system. Also, my design systems largely based right now and CSS custom properties. And I love it. I'm gonna, you know, absolutely love that. So, - -36 -00:18:53,670 --> 00:19:53,010 -Wes Bos: yeah, I would also go with some sort of CSS and j. s platform, just because I, I love how when you stop using a component, then that CSS is immediately dropped from the build. And I love how you can easily generate critical CSS from like when your JavaScript framework knows about the CSS, doing those performance, things are so much easier. Like I did a little poll in my my Gatsby workshop last weekend, was like what are people using? And of the people that were using CSS and j. s? It was all over the place. Some people are emotions, some people style components, comfortable stuff I had never heard of so. But I think I would pick something like probably solid components or emotion where the CSS that you write is as close to regular CSS as possible. Because should you ever need to move to something else? It's not going to be a huge chore to move that thing from one to another. - -37 -00:19:53,279 --> 00:20:19,410 -Scott Tolinski: Yeah, that's actually a huge reason why I don't write my CSS and the object format inside of Java, even though I'm doing CSS and JS because it's like, if I need to copy and paste that move it out somewhere, that would be a huge project to move it into objects. Another reason I don't use the CSS and j. s from next JS myself personally, is because I think that ties it a little bit too closely to the platform. I mean, I think you can probably use was it styled JSX is - -38 -00:20:19,410 --> 00:20:34,890 -Wes Bos: what they use, yeah, that they use a package called style JSX, where you just pop a style tag, yeah, anywhere inside of your thing. And that's actually as I think, as close as you can possibly get to writing CSS, but I have never, I've never liked that as well. - -39 -00:20:35,160 --> 00:22:14,250 -Scott Tolinski: I don't, I don't know why I don't like it. I just, I just don't, I'm sorry. So I'm probably gonna keep it on with stuff components myself as well, that's fine. And the next thing we're going to get into is deployment process. But before we get into there, let's talk about deploying an application and just how easy it can be with Netlify. And Netlify is one of those services that allows you to host your application just so insanely easy. And have all of these features that have been typically very difficult to get set up, for instance, you get continuous integration out of the box, where Netlify just built your site automatically a push to a repo Netlify says it, no worries, I got it. You can do a B testing, you can get a free SSL certificate that is, you know what, sometimes they just say, Oh, yeah, you get a free SSL certificate with this thing. And then you still have to go through the entire process of setting up an SSL certificate. But now it's Netlify. No, you don't do anything. That's the single best part about Netlify. You don't do anything, get this all set up, it just is set up. And it just works. Which is really as you should just be nullifies. tagline in my mind is it just works. Every single person who is on the Twitter will say, dang, syntax is not lying. Netlify just works and is absolutely incredible. So you're going to want to head over to netlify.com Ford slash syntax. And you're gonna want to see all of the amazing features, so many of them that we didn't even get to talk to, like serverless functions, identity, free, global CDN, and all sorts of cool stuff. So netlify.com, forward slash syntax, sign up today, push a repo up there in about two seconds, and see why we go nuts for it over here. - -40 -00:22:14,460 --> 00:22:33,000 -Wes Bos: Awesome. It's funny, I'm just doing a little bit of research on our next sponsor Reed, which is Sanity. And at my workshop had a couple questions about like, how do we like how do you deploy to Netlify when your CMS changes? And I was like, that's perfect, perfect. Little iterate for the next one. So stay tuned for that. - -41 -00:22:34,230 --> 00:22:35,730 -Unknown: Noon for the ad read? - -42 -00:22:36,360 --> 00:23:06,390 -Wes Bos: Yeah, it's gonna be a good one. So next up, we have is like a deployment. So you built your back end, you build your front end, where do you put this thing that has a probably a node seems like we've chosen the same things together, you've got a node back end with some sort of graph qL API, and you have a front end. In react, you have to deploy this thing. What would your deployment process look like? using one server? two servers? I using services? - -43 -00:23:06,420 --> 00:23:20,760 -Scott Tolinski: Yeah, well, if we're doing next day, so I'm going to play on now. And now two is really super cool. Because Do you have different containers for a minor standings? You have different containers for every route? Is that your understanding as well? - -44 -00:23:21,060 --> 00:24:00,750 -Wes Bos: Yeah, well, so if you're, if you're deploying your back end to now, the whole idea is that you can ideally write your app in kind of the way that you've always written it, and then it will automatically serverless it for you, which is great, because then you don't have to, like worry about serverless, sing it yourself. But like posting just a regular note app to now is very hard to do, because they want you to modify it a little bit in the routes so that it will deploy it for you, which is great. Because like, if you're going serverless first, then you you don't have to really worry about the four serverless frameworks and all that stuff. You just kind of build your app. Yeah. - -45 -00:24:00,960 --> 00:24:44,100 -Scott Tolinski: If you're doing a graph qL back end, then for me, I didn't have to modify mine at all, because, well, I had to write one file. But the the API routes are just basically a folder with an API that gets a one single API route. And if you have a graph qL API, you only need one API endpoint anyway, so I have one folder that is my quote unquote, serverless function or whatever. It's my entry. It's my endpoint to my graph, qL API. But the entirety of the rest of my API, which is fairly large, is just loaded through that one page the exact same way it was when I was doing everything on Express anyway, so yeah, that's but really didn't change very much for me. - -46 -00:24:44,190 --> 00:25:30,270 -Wes Bos: Yeah, if you can write it, the appointment process for me, I'm, I'm not sure actually. I'm kind of like right now moving over my own platform to now which is good because like it does a lot of heavy lifting for you. It's fairly affordable for what it does for you, which is great. Just trying to think like, there's so many different options that have been going through right now. And I haven't really given them all a heavy look into. Yeah, so I think it would, I would certainly like to try to do it all in one go. Meaning that like you can deploy it just the one app handles your back end and your front end, it will handle scaling, auto scaling. And that's kind of the that's what now is trying to do for you. So I like that. But you certainly could go another option to where you host your front end somewhere and back end somewhere else. - -47 -00:25:30,389 --> 00:26:52,140 -Scott Tolinski: So that that's kind of interesting. So I had my my site's been in Meteor for a long time, personally, and I have always had that one push deploy does everything. For me, that's the way it's been for the past however many years, right, or five years that the my site's been on Meteor, so I'm so used to that. But I would have to have that the last thing I want to do is manage two different deployed processes or be able to like have to worry about whether or not the API went out first, before the the front end deploy completed, or even containers, I've hosted my site that had that sort of deploy process on digitalocean on my own custom droplet, on Heroku. On now Meteor galaxy, and Meteor galaxies, the most expensive, but it's also the most turnkey, I don't have to worry about it. And scaling up containers is really easily. So that's, you know, something that would be very important for me, and one of the reasons why I would pick now, but also Heroku, or any of these options, we're scaling is easy. If I'm building this as a one person or a small team, I don't want to have to go ahead and hire a system administrator or right off the bat, I don't want to have to hire anybody to worry about that. I want to be able to Hey, just scaled up really quickly if I need to, or have that addressed based on these needs that you have at the time. And again, once the application is either making money or it has the traction, you can then go ahead and build into a bit more of a managed one to save some money in that regard. - -48 -00:26:52,199 --> 00:27:08,340 -Wes Bos: Yeah, exactly. And that's it. We probably say it quickly. It's now it's now.sh if you want to check out the the website for that, as you know, we'll get some some emails about it. Like love love tutorials, somebody thought Scott was saying love love tutorials for like an entire year. - -49 -00:27:08,429 --> 00:27:10,980 -Scott Tolinski: Yes. Yes, it Now. Now. - -50 -00:27:12,390 --> 00:27:41,790 -Wes Bos: Another question we had here was what would you do for data on your front end? Right? I would probably do it in either Apollo. If it's all graph QL. And then it stuff that doesn't need to be in Apollo, I would use context and, and state to be able to just just throw that stuff in state. I don't think that I would reach for like a state management like Redux or something like that. I think I would try to keep it all in, in Apollo or in state. - -51 -00:27:41,850 --> 00:27:50,010 -Scott Tolinski: Yeah, I would pretty much just describe like, here's, here's the platform that I'm working on right now. These are like this is Yeah, this is pretty much it. - -52 -00:27:50,040 --> 00:27:55,530 -Wes Bos: Well, I think the stuff I'm doing is the best, like my best opinions. Right? Right. - -53 -00:27:55,620 --> 00:28:37,410 -Scott Tolinski: Yeah, exactly. And so I probably do the same thing. I'm using Apollo for my stuff. I like Apollo for my graph qL stuff. And again, I like context. Now. It's not overdone. You know, you missed out on some of those really nice dev tools. But if you're not doing your data loading within Redux anyways, then you're missing out a lot of that stuff anyway. So I would probably just use the context straight up data flow. Yeah, I mean, I don't like to keep my components too tightly coupled. So I would make use of context somewhat frequently. And, you know, obviously, if something's not being reused, parent, child relationships, all that stuff that you're typically used to with a react site, - -54 -00:28:37,650 --> 00:29:19,800 -Wes Bos: a email, sending transactional emails, a big part of the app, you you book, something, you tweet something, you get a DM, you have to send one off emails for that type of thing. We have an entire show on sending email, and what the different ones are. So you can go ahead and listen to that. That is Episode 32. is designing templating inlining in sending email. So check out that episode. If you want to hear more about sending transactional email, I would reach for probably something like, like our react base email template or, and the one that we talked about before, what's the name of that one? - -55 -00:29:20,009 --> 00:29:22,230 -Unknown: Oh, MJMLMJ ML, - -56 -00:29:22,230 --> 00:30:12,110 -Wes Bos: which allows you to like write emails with things like column and image and it's so good row. So currently, I don't do this, I write my emails in G pug, and then I template them out. But I would probably be because the entire site would be in react, why not do your emails and react as well, they obviously don't get I think some confusion is like react is not going to run in your email client. It will just at the end of the day, kick it out to HTML for you. There's a CSS inliner I've used in the past called juice and then that will allow you to write your CSS in such a way, like style tags, and then it will it'll inline all the CSS for you. So it'll it'll put it a style attribute for for that. I think that's I use something called inky right now. - -57 -00:30:12,210 --> 00:30:14,040 -Scott Tolinski: Yeah, that's from Foundation, right - -58 -00:30:14,070 --> 00:30:39,960 -Wes Bos: from zurb. Yeah. And inky is sort of the same idea as MJ ml, where you just write your own components, like row and column and image and things like that. And then it will convert it to the table equivalent. It's like, whatever you choose, you certainly should not be writing tables down yourself. And you certainly should not be inlining, the CSS yourself, those problems have been solved. Yeah. And that's an awful thing to do with your life. Yes, - -59 -00:30:40,260 --> 00:30:47,220 -Scott Tolinski: that was one of my, my first gigs that my first agency job was just like only doing HTML emails, and it was just like, - -60 -00:30:47,700 --> 00:30:48,360 -Unknown: oh, - -61 -00:30:49,530 --> 00:31:10,380 -Scott Tolinski: mg ml is so good. That's what I would use. Because, again, it allows you to write this stuff and react and not have to think about it too much. And just have it output in line, all that stuff right there for you. So you could again, get to use the tools and stuff that you're most used to. I personally really like it, I find it to be very, very useful, especially if you are already a react developer. - -62 -00:31:10,920 --> 00:31:48,480 -Wes Bos: for sending it on the server side, I use node mailer, and I would still use that I love node mailer, it's fantastic. And then I use postmark, you actually need someone to send the emails for you. And whatever you choose, use someone that will support smtp. So you just use a standard. And that way, if you ever need to choose to change mailers, then you can quickly change over your credentials, and you'll be able to keep sending email. So I personally use postmark. I absolutely love it. But there's certainly like there's mailjet, which made it mg ml. You could use them those. What other What do you use Scott? - -63 -00:31:48,570 --> 00:32:03,450 -Scott Tolinski: I use mandrel mandrel. Katana, I've been on it since it was free. And then I just have not moved off of it. I probably should move off of it because they goof with your URLs. And not super interested in that. Yeah, - -64 -00:32:03,540 --> 00:32:13,230 -Wes Bos: yeah, you can turn that off the but that that allows you to like track clicks and things like that. I think I have that turned on. No, I have it turned off with postmark postmark will do that as well. - -65 -00:32:13,560 --> 00:32:28,290 -Scott Tolinski: Yeah, whatever, ever since I don't know that, like that. There's this weird divide between mandrill and MailChimp, where like everything in mandro looks like it was made 20 years ago, and everything in MailChimp looks brand new. So I like really hate messing with mandrel at all. - -66 -00:32:28,440 --> 00:33:02,340 -Wes Bos: Yeah, I think that what happened is that they, they're kind of bullish on this whole company. And it was free. And it worked forever. And I was using it for everything. And then they they pulled the rug from everybody and said like, Oh, no, you you have to start you have to pay now and right, those are free. And I think because they have huge issues with spam and putting resources towards that thing. Like, I think that's why the best companies that do this stuff are companies that just do that stuff. And it's not like a side hustle that the email companies trying to do. So I probably wouldn't go for mandra. I know that you probably wouldn't recommend that either. - -67 -00:33:02,400 --> 00:33:06,540 -Scott Tolinski: Yeah, I wouldn't use it. But I would. I don't I would. I would opt to do research. - -68 -00:33:07,230 --> 00:33:14,130 -Wes Bos: Yeah, yeah. I also probably another tip here is get approved and sign up and get everything working with two. - -69 -00:33:14,250 --> 00:33:15,300 -Unknown: Oh, gosh, yeah. - -70 -00:33:15,330 --> 00:33:40,500 -Wes Bos: Because if something goes wrong with one of them, you need to switch quick. And you should ideally even have like a like a rollover coded into your system so that if one of them goes down, or for some reason you get blocked by one of them, you can quickly fall over to to another one. Users authentication, things like that. What would you use? Would you hand roll something like I used your system? would you use sign built in? - -71 -00:33:40,740 --> 00:34:48,030 -Scott Tolinski: What do you think I'm dealing with this right now? I would not handle something I'm handling mine right now. And I'm just yeah, just there's so many pieces to it. There's some my non handrolled one did for me. And now that I'm having to handle I'm like, Oh, I gotta worry about this email, I got to worry about this part of the account set up and it's just kind of a pain in the butt. So I would roll with something that is pre made, whether that's just like passport, which is just a package, you know, or an actual service like auth zero. I'm not quite sure I would probably roll with something like passport because there's a huge community of people using it. I'm not sure I'm using something right now called accounts hyphen j s, which is an Apollo, Mongo dwell, you can use all sorts of stuff with it, but it's not a huge package. And it's done by a bunch of former Meteor devs who wanted to sort of bring the meteor experience back to Apollo. And it's just not there yet. It's pretty cool. But they're, you know, I'm not turnkey and it's certainly not as easy as something like passport. So you know, I would probably go with something like passport. - -72 -00:34:48,600 --> 00:35:54,330 -Wes Bos: I would probably reach for passport j s. It's such a hard thing to roll your own. In even using something like passport jazz. It's still hard to build Have your own user system like that there's a lot of heavy lifting to do yourself. He had to worry about avatars and user permissions, all that kind of stuff. You could certainly go with the solution, like alt zero is probably the biggest one available out there. Just know that, like, it gets expensive really quickly, these these types of things where you're like, Oh, it's so easy. And I use like services to do almost everything. And I certainly would reach for services in some situations, but like, I'm just running the calculator on, on like, what mine would be at, like, I don't know, 50,000 people a month watching courses is 1200. dollars a month like that? Real quick, right? Yeah, I don't know, it's hard, maybe I would just go with with something like that. And then, as it gets more expensive than then move it over, I don't know, it's hard to hard to say, - -73 -00:35:54,650 --> 00:36:39,600 -Scott Tolinski: it is hard to say. Because there's so many of these little services that you could just be adding here that are gonna make your life a ton easier. And the next thing you know, your bill, a month is way, way too much. You know, the company might go under. So there is some you know, there's definitely some considerations, cost verse time that we're not exactly considering in this. So, cost first time, if you want to be saving a bunch of time, and you want to not spend a whole lot, you're gonna want to head to sanity@sanity.io. And check out what they have going on there for our whole back end solution. And let's talk about saving you a whole bunch of time. With more bad sanity is Wes. - -74 -00:36:39,980 --> 00:38:47,730 -Wes Bos: Yeah, so Sanity is a structured content, CMS, which is kind of a cool way to say you can log in, you can create all of your content types, you can do all of your relations, you can actually create your own custom react JS components and pop them into the editor. And then at the end of the day, that will kick out an API for you to consume in your front end or for your back end, which is pretty nifty. One thing cool thing I want to sort of like, say about Sanity, is that like I was teaching a workshop on Gatsby, and we were saying like, okay, like, what are your options for headless? If you want to, like build a Gatsby website, like what can you Where can your content come from? And one of the options is Sanity. And they have this really cool thing where it will update in real time, because somebody asked like, okay, cool, but like, if my client changes content, like, does it, it has, it has to rebuild, right, and then I have to go manually rebuild it. So there's kind of two things I got out of that is, first Sanity has a plugin that will show you real time updates in Gatsby so that you can have that real time feedback where the client updates the content. And they can look at your like staging site and immediately see what it looks like. And then second, there Sanity has like web hooks. So you can hook up Sanity to something like Netlify. And then say when the content changes on Sanity, immediately trigger a build on Netlify. So you, the developer don't need to sit around and always be pushing new builds, like obviously, you can you can push a new build on git, but like what about when other things change? Most likely, what about when your content changes. So Sanity is got you covered on both of those fronts. Check it out@sanity.io forward slash syntax that is going to double your free usage tier than what you normally get. So check it out. sanity.io forward slash syntax, they've got some pretty cool examples on that page as well. Thanks so much to Sanity for sponsoring. Cool. - -75 -00:38:47,820 --> 00:39:56,250 -Scott Tolinski: Alright, let's get into media a little bit. Let's talk about images. Now, I'm personally going to be reaching for cloudinary. Myself, because images are another thing that are very, no fun to work with. And cloudinary can really save you a ton of time generating the right images, they can also save your users a ton of bandwidth, because you can serve up Web PS or web ends, or any of that fun stuff that Safari doesn't support yet for some reason. And, yeah, that'd be really great thing to do. But again, with just like any of these, the more that you host, the more you serve, the higher your costs are going to be. So it depends on how many images you're working with here. Yeah, if you're working with a ton ton ton of images, you know, there is a decent way to roll your own cloudinary via serverless functions and just open source packages and Amazon s3 That said, it's all time versus cost here. So how much time you're gonna spend on that. If this is something you want to support, and you want to do, you know, maybe you could just build your own serverless function and not have to pay those costs of having a company do it, but you will have to pay the time and effort of getting that thing set up. - -76 -00:39:56,460 --> 00:41:13,670 -Wes Bos: Yeah, you know, what I would do is I would spend a day and a half Trying to make my own cloudinary with a serverless function and see how far I get because you have to use this package called sharp. And sharp is a very low level package. That's not it's not built in JavaScript, but you access it via JavaScript. And or maybe that's wrong. Maybe sharp is the JavaScript package and it access things like PNG, kuantan, mas, jpg, and image optim, all these things sort of under the hood. So I would I would give it a go. But you certainly can drop in cloudinary. There's another one I learned about I met a conference image ix Hmm, I think I might have mentioned them before. Yeah, I think Yeah, so they do similar thing to that as well. So I would certainly check that out the pricing $3 per thousand image, Master images, plus eight cents per gig of bandwidth. So I don't know if that is good or not. I'd have to like, run some calculations to be like, Alright, I've got 500 listings that each have 24. Especially like Airbnb, you need nice big photos, right? Yeah, that type of thing. So that's certainly something that can get real expensive, real quick, but also is something that could save you a ton of time. Right? - -77 -00:41:13,919 --> 00:41:47,630 -Scott Tolinski: Yeah, is a lot of these things, you got to run the numbers a little bit. And some of them, you could just fire up and get going as like a proof of concept. And maybe that's the whole thing, right? Maybe you just need a proof of concept together some investment, cash, and a proof of concept. You're not going to be having a ton of people using in there for something with a cloud and it would be good just to get up and running to be able to show this stuff off. It really depends on what the end result is. There's just so many different paths, all of this can go depending on what your ended goals are. If you're just trying to get this thing working as soon as possible, like cloudinary all day, - -78 -00:41:48,029 --> 00:41:56,360 -Wes Bos: um, other things like what are other things I just got rattled a few things here handling cash, like I would reach for stripe, for sure. - -79 -00:41:58,080 --> 00:42:12,980 -Scott Tolinski: But it depends on where your clients are. if everybody's USA and you don't need to support PayPal, then sure. stripe, but like, yeah, gotta start any of that stuff, then you have to go to Braintree or you have to roll your own. - -80 -00:42:13,440 --> 00:42:17,960 -Wes Bos: Well, I would go for stripe and PayPal. That's what I'm doing right now. stripe - -81 -00:42:17,960 --> 00:42:23,610 -Scott Tolinski: and PayPal. But what if you want to do reoccurring billing then you have to manage two separate reoccurring billing platforms? - -82 -00:42:24,030 --> 00:42:27,900 -Wes Bos: Yeah, maybe that's true, maybe maybe Braintree would be better than - -83 -00:42:27,920 --> 00:43:10,110 -Scott Tolinski: there's always services like recurly that handle reoccurring billing. But that's a whole thing if you need to do recurring billing, and they are going to take a much larger chunk. So depends on what your back end skills are there. If you don't have a ton of great back end skills, then you're probably going to want to reach for one of these platforms that handles reoccurring billing, I run a reoccurring billing thing myself, it's not exactly a ton of fun. So if you don't want to manage a ton of that stuff again, or no services that you can pay a little bit more for a something like recurly. That way you can do it through basically you could do it through stripe, Braintree, PayPal, all of those things, anything you'd want, and you don't even have to think about it. So just some food for thought there. - -84 -00:43:10,650 --> 00:43:52,290 -Wes Bos: Other things, I guess, unsure of queuing, that's never something I've had to run into before. But if you have a lot of traffic or you're doing something that's that's fairly heavy, then you have to put things into a queue. Like if a user uploads 40 images of something, you probably want to throw that into a queue and have whatever it is you're using to compress them and convert them and resize them and crop them. You probably don't want to let the user sit there and wait for these things to all come back from from an API. So that's probably one thing I would look into is queuing but it's not anything I've done before. I'm not really sure how I would handle that. - -85 -00:43:52,500 --> 00:43:59,250 -Scott Tolinski: I feel like there's just about 100 things that I've never done before. Yeah, I would probably come up the moment that you are at a critical impasse in this project. - -86 -00:43:59,760 --> 00:44:05,040 -Wes Bos: That's how you learn I guess. Hmm, anything else that I didn't cover here? - -87 -00:44:05,280 --> 00:44:19,050 -Scott Tolinski: I don't know. I don't think so. I think this is fascinating to just think through maybe like what I would do today if I was an open application thing that will just want to use felt for everything. I I would have a hard time resisting that. It's really good. I really like it. I'm sorry. - -88 -00:44:19,110 --> 00:44:28,680 -Wes Bos: Yeah, no, it's might be like worth, I don't know, like, picking up a big project like that. Grabbing a brand new. I've certainly been burned in the ass. - -89 -00:44:28,800 --> 00:44:39,540 -Scott Tolinski: It's not that new. I mean it. I guess spell three is new, but spelt itself isn't? Yes. Yeah, yeah. No, no, forever. The problems with this, if you can't tell it's a thing I wrestle with. - -90 -00:44:40,020 --> 00:45:02,340 -Wes Bos: Yeah, I've run into all kinds of things. Anytime I'm building a course I try to use something new. You run into these weird edge cases, like, even like Gatsby. Gatsby images are so hard right now where you have to like write a graph qL query. And there's there's dynamic and static queries, like that's an early pain point in Gatsby right now. And I guarantee you that The effects because it's silly how hard it is right now, - -91 -00:45:02,400 --> 00:45:11,310 -Scott Tolinski: you should see how grid some does it really good. Some is like total turnkey for that. It's like Oh, just pass it back, just pass an image to this component. And don't ever think about it again. Yeah, - -92 -00:45:11,370 --> 00:46:53,430 -Wes Bos: how it should work. Yeah, exactly. Like there should be a way to dynamically do that. But there currently isn't a really good solution for it. So yeah, that hopefully, hopefully that is helpful to you, seeing how you would tackle it. It's pretty bang on how we currently do our own platforms. But that's because we're both kind of sort of constantly tweaking and changing our own platforms, how they work. Let's jump into some sick pics. Now. I am going to sic pick a YouTube channel called bone appetit. Bone appetit is obviously the magazine has been around forever. But they've just been running a YouTube channel for a number of years now. And I think that they've absolutely nailed. Nailed it on YouTube. So they they make these cooking videos that are approachable, but they're really funny. And then they have all these different personalities that do different types of videos. So there's this guy, Brad does a lot of like fermentation, and like kombucha and all these kind of interesting things. And there's someone else that Claire, she tries to replicate, like Twizzlers and m&ms, and she tries to like remake things in the kitchen just with her own skills, which are really cool. And then they're always filming in this kitchen where there's just like hilarious people running around in the background. And it's sort of throws out the like, high quality video shifts, things that you often see, and just takes a totally different approach at it. And it's funny because my wife and I stopped watching like master chef and started watching this on YouTube at night. So is that good that it's sort of it's totally moved our TV viewing habits over to this YouTube. So check it out. Bone appetit on YouTube. Hmm, - -93 -00:46:53,460 --> 00:48:35,460 -Scott Tolinski: I gotta check that out. Yeah, we've been watching great bit, the great British baking show or Great British beer, whatever it is. I mean, we've been watching that forever. But the New Seasons out on Netflix right now. Oh, my favorite, my favorite cooking show. My second pick is going to be the case save. We're going to talk about this in the next episode. But this case a thing is this kitchen safe. And what this what this does is it locks anything inside of a safe for a given amount of time, upwards are under seven days, I think it is. So you can put something in here like let's say cookies. And you can say well, I have a cookie eating problems. So I'm going to lock these cookies in here. And I'm going to cook it and says I can't have these cookies for four or five days. And then the thing automatically unlocks after that time, I found this to be incredible. They they say this is really good for just enforcing accountability for things that you're trying to change our episode on Monday. That's command as I'm going to be on habit. So ram talk a little bit about this. But I've been throwing my phone inside of a K safe so that I can't use it when I want to just mindlessly pick it up. Or it's a good idea. Maybe for those of you have kids, maybe you want to say okay device times over and you can show everybody mom and dad, everybody on their phones in here, whatever, and lock them up. And yeah, you can open this thing until the time limit is up. So obviously don't set it for something they need to get open. Otherwise, you're going to be breaking your expensive low case, a fear, but I've been loving mine. It's super cool, really nicely made. And a really interesting little, I guess you'd call it a gadget. Not really a gadget. But a really, really cool thing. - -94 -00:48:35,520 --> 00:49:19,440 -Wes Bos: Awesome. Let's talk about shameless plugs, I'm gonna pick one of my older but extremely relevant courses. And that is my flexbox.io course. So even though grid is out, you still need to know Flexbox for a whole bunch of use cases, it's funny, I tweeted this thing the other day, which is I ordered every CSS color name by the length of the name. And then I ordered them by hue, and then by saturation, then by lightness, and then I ordered them by all three and it was kind of fun thing to do on the internet. And everybody was like nice. Did you do that with grid and I was like it's not possible in grid, you have to use Flexbox for that. So they obviously aren't. This still is a lot of use case for Flexbox. And if you want to learn it, check out flexbox.py Oh, cool. - -95 -00:49:19,680 --> 00:50:28,530 -Scott Tolinski: I have a new course coming this month on spelt. Like I mentioned, I'm absolutely loving it. In this course we build a quiz, the quizzes using a free open API. So in this course, you not only learned the basics of spelt itself, but all the kinds of stuff that you'd need to do in a normal app for working with scoped CSS to working with animations to working with API's. And it's really cool. I think you're gonna, you're gonna get halfway through this course. And you're gonna be like, I cannot believe what we're able to accomplish with such a little code. I'm writing like very little code here. And we're able to just make a really, really functional quiz app and absolutely no time at all. It's really really super fantastic so so if you want to learn any of those things head on over to level up tutorials, comm forward slash pro that is level up tutorials the.com forward slash pro sign up for the year and save 25% Thank you so much. And we will see you next week where we talk about building habits on Monday. And who knows we might be kicking off our our spooky, October web dev stuff very soon here. Yeah, - -96 -00:50:28,530 --> 00:50:31,680 -Wes Bos: that's not next week, but it will be soon. No, it's - -97 -00:50:31,680 --> 00:50:34,890 -Unknown: not next week. I'm saying I'm saying very soon. It's very soon, - -98 -00:50:34,950 --> 00:51:28,320 -Wes Bos: we're collecting all these developer horror stories, which I was reading them to Kaitlyn, my wife and I was just dying. Get ready for it. If you actually, we should say, in preparation for Halloween if you have a horror story of a developer so I'm talking deleting a database accidentally pushing a bug to production that order toilet paper to everybody's house screaming into your microphone, writing swear words in pushing into production, all these hilarious things. If you have one, tweet us or email us or send it to us any way you want. Most of the good ones are coming in via email. I'm Wes at Wes Bos calm because they want to remain anonymous. So please send those over. We're gonna do an entire show of these spooky horror stories. Yeah. - -99 -00:51:28,530 --> 00:51:44,640 -Scott Tolinski: Oh, yeah. Cool. Well, we will see you next one is head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax183.srt b/transcripts/Syntax183.srt deleted file mode 100644 index 8e5b52fd4..000000000 --- a/transcripts/Syntax183.srt +++ /dev/null @@ -1,92 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,989 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Todd. - -2 -00:00:26,940 --> 00:00:45,090 -Wes Bos: Welcome to syntax in this Monday hasty treat, we're gonna be talking about habits, habits and how to develop them. as developers, we're always developing websites. This time, we're gonna be talking about developing habits. So my name is Scott Delinski. And with me, as always, is Wes Bos. How you doing Wes? - -3 -00:00:45,150 --> 00:01:04,680 -Unknown: Hey, everybody. I'm doing pretty good. I just got back from fitc web unleashed conference, which was super fun. I did a workshop on Gatsby, I did a talk, I did a panel and I am zapped of all of my energy from talking to people, like four days straight. - -4 -00:01:04,760 --> 00:05:24,450 -Wes Bos: Yeah, I still have to although I didn't go anywhere, it's just the nature of having a three month old as I'm sure you're aware. So this episode is sponsored by Sentry. Now, Sentry is one of the longtime sponsors over here at syntax. And it's, if you don't know, Sentry is a service that is useful in tracking all of your errors and exceptions, locking them and allowing you to make sure that these things get taken care of. Because without a service like Sentry, you're sort of just sort of waiting for your users to report your errors. Or maybe you're you're going to find them yourself. But that's not a great way to do anything, especially when you have production software that people are using. So head on over to century as sentry.io, use the coupon code at tasty treat a lowercase all one word and get two months for free, you're going to absolutely love this service. Once you try it. It's one that I use personally, myself so century, it's sentry.io, track all of your errors and exceptions. Okay, so I thought this would be fun, I have been really in the mode of building habits lately. And this is something that I've always been very interested in personally, and how to just make things better. But sometimes you get distracted here, you get distracted there. And next thing you know, you fall back into your old ways, your old bad habits or something. And I want to talk about maybe some strategies that I've used, or some things that we've done to will help you build better habits and replace the ones that are bad with ones that are good, we're also going to be first talking about some of the habits. So we're trying to build in our lives right now. And I know there's probably 1000 more here that I'm forgetting at this moment. But I thought it'd be good, maybe we can just go back and forth and talk about some some habits that we're trying to build here. I think one for me is been, I find it hard to really focus on one project at a time where I'll have my figma open, I'll have my code open, I'll have some email open, I'll sort of do an email and then I'll work on design, and then I'll work on some code, I'm just bopping around. And this is obviously not really great for productivity or just in general, right, your mindset, your whole frame of mind when you're working on anything is is kind of scattered at that point. So this is a habit that I've been really working to try to be cognizant of is to be able to focus on whatever I'm working on. And so to do that, I have been reached really just developing systems to make things easier for myself to quit everything else. For instance, I have I talked about this in another show, I have an Alfred task that quits all of my applications, except for the ones that I need for the task open right, we're recording syntax, it quits everything and then opens up zoom logic and notion and slack because that's what we use when we're recording syntax. I have one for level up recording, I have one for web development. And overall these things have really made my life a little bit easier because if you cannot run one thing and have it quit all of that stuff for you, then it's not really necessarily a struggle and you're not just sort of going at this with all your windows open and all your things open. So this one one strategy that I've been utilizing lately and I think it has been working if I'm remembering to run that one Alfred command and turn on my block sites and stuff like that I noticed that has been working and making myself a little bit more focused while I'm doing just about anything. Yeah, I've got to he I've got two sort of habits here one habit I'm trying to get better at and other habit which I'm trying to get rid of. It's kind of the funny thing is that sometimes you want to have good habits and other times you want to get rid of bad habits and the good habit that I want to get rid of or I want I want to get going on is flossing every time I go to the dentist Just berate me made me feel like garbage for not flossing often enough. And I was talking to you about it. And it's funny that we're doing this because like, I was like, Oh, yeah, that was making me like garbage or not flossing my teeth and tell me my teeth are gonna fall out. And I'm gonna get ginger vitus and all these awful things. So I got this app called done, which I guess we'll talk about in a second. But that's one thing I'm working on right now. - -5 -00:05:24,539 --> 00:09:52,280 -Yeah. And we had this conversation off the air that I also had a trouble flossing for, you know, it's like I would floss. But I would not do it every night. And I was like, this is like, terrible, I feel bad about this, you know, I have good tooth care routine. Other than that, I just really didn't like it. And a couple years ago, you know, same thing, we got a new dentist here in Denver, and our dentist was like, really, like, Listen, man, you know, you just you have to do this. So. So I got an app to help me keep track of my habits again. So I think we're gonna be talking a little bit about, and I have not missed a single day for like, I think it's been three years now, maybe four years. But every time I go in there, they laugh about my app that I was like, Oh, well, there, we always tell everyone that you use this app to floss every day. And you know, you stuck to it, and I totally stuck to it. I actually feel ridiculous for not sticking to it earlier. But that's, you know, that's one for me that definitely took some effort, but taught me that it's like you can make these small little changes that are, you know, you just make it a little change every day. And next thing you know, it becomes your habit, I don't even think about it anymore. One for me that I'm trying to build is the habit of being more efficient with my time, which sort of goes back to the last one. Last one was more or less about being scatterbrained but this one is more or less about making sure that I scheduled time, my calendar is busy, there's no doubt about it, I got two tutorials to record, we have syntax to record, I have products to release, I have code to write, I have so much stuff going on. And I find myself, again, not necessarily making the right amount of time for things that I'll spend, you know, way too long, something that entirely doesn't matter. For instance, I spent, um, I spent a good two or three days on this issue that I'm having with my migration from Meteor to next j s. And it ended up not being anything that is essential for my business or essential for me to work on. And I wasted so much time on it in reality. And so I would have been better off really, really removing those sort of blank times where you're just sort of just grinding away in something and not necessarily getting anything done. So lately, what I've been doing is utilizing a good old fashioned tool called the calendar, and I just been making sure that all of my time in my day is completely scheduled out into blocks, I'll say, Okay, I have an hour and a half to work on level up code stuff. And then I have you know, three hours to work on recording my course. And then some time to work on this or that or an hour and a half to work on email stuff, and I stick to it, I have to stick to it, I only get that time. Once that time is over, I have to move on to the next thing. And that involves a little bit of self control as well. But simply just having the calendar being all blocked off with here's what you're doing every second of your day has really made my day so much more structured. And coming from my a, a workplace environment where you had calendars where you had to go to meetings and stuff like that to now being on my own. This is really made my day quite a bit more structured and better. That's good. My other habit here is what I call mindless context switching. And that is just mindlessly I'll often just make a new tab in my browser. And for me, it's all go to Twitter, or go to like Facebook marketplace, see what kind of crazy stuffs on sale there. And sort of just like see what people are talking about on Twitter. And that's hard, because like part of me knows that I need to be on Twitter for my job and like, it's like a large portion of the reason why I can do what I do. But then other part of it, I know that I might be wasting some time and it's probably better to break that habit of doing it, and then intentionally go and do something else. So those are sort of the two flossing, which I want to get better at and a bad habit, which is just mindlessly context switching. And I think that in order to get rid of that we'll talk about is is replacing it with a better habit. Totally. Yeah, absolutely. And yeah, this is by no means a complete listing of all my habits because I'm gonna show you guys right now this is my, my all of my habits that I track right now, man, there's a whole bunch. And so not all of these have checkmarks marks. And if you were to look at this, you would be thinking What are you doing lately? Because there's not a whole lot of checkmarks on the sheet - -6 -00:09:52,440 --> 00:09:53,820 -Unknown: because I'm missing a lot of them. - -7 -00:09:54,510 --> 00:11:37,470 -Wes Bos: But another one I have is too much screentime and enough Courtney listens to this episode. She is going to definitely agree with this one, I have way too much screen time, I spend way too much time listening, looking at screens of any kind, whether it's a TV, a Nintendo Switch, or my phone or my computer, it's just about endless how many screens I have in front of me at any given time. And so I've been trying to get better at this. And there are some things that I do now that Mike leaving intentionally leaving my phone places. Like, if I'm getting out of the car, and I don't need my phone, I'll leave my phone in the car. If I am doing something somewhere, I'll leave my phone in one specific spot. So that way when I'm, you know, mindlessly doing something, and I'll just pull it out, look at it. Yeah, that way, it can be a little bit more present. One other thing we started is that we were not doing any TV when Landon is awake, except for on. I think like Saturdays, we'll do an hour or two or an hour on Sundays, we'll do an hour. So let him watch like a little bit of PBS. But we're doing a whole lot of no TV, no screen time where we can help it. Especially because we just don't want it on for him, I have a bad habit of we grew up with always having the TV on just 24 seven in our house. So the TV's always on this background noise and I have that sort of comfort of having the TV on right. So we've started playing music during dinner instead of having the TV on because I was always thinking my family just had the TV under dinner. So now we'll do music, we'll maybe switch it up regionally, this is actually something really funny. We've been looking listening to like, authentic music from the area in which our food is from so Ah, that's great. It actually has been great. Like, - -8 -00:11:37,470 --> 00:11:38,190 -Unknown: if we're - -9 -00:11:38,190 --> 00:15:24,150 -Wes Bos: having like tacos, you putting on like, authentic, you know, Mexican music not not, you know, I don't know pop or something that will switch it up. But thanks for Spotify for that just it's kind of funny that we're doing it but at the same time, it's kind of nice to get and it's been getting the away from having that screen on and stuff like that. So yeah, you know, what's one thing we've been doing in our family recently, it might be over the last month or so it's like our kids love to during breakfast, like wake up and watch a show. And then during breakfast tilicho Can we like turn the TV to the table because we've got our TV on big mountain and his show while the breakfast and we switch that to the Chromecast we hooked it up to our Google Photos. And it was just randomly every five seconds. Show us a photo from the past. And it's awesome because like the kids are glued to it. I love seeing photos of who have pictures of when we were young. And they love seeing photos of just like last week what they're doing something silly in Google Photos does such a good job at showing you one like it used to be where every 30 seconds, it would change the photo and it was way too slow. But they they changed it now or you can do it every five seconds. And we find it such a fun way to eat our breakfast or whatever is just kind of looking at photos and talking about it and be like, haha, remember we did that or made such a mess with your ice cream. So yeah, highly recommend putting a slideshow on your TV. If you're trying to break that habit. We have those little Google Home things with the screen. It's like a Google Home, but it has a screen. And we have those as like digital picture frames throughout the house. And Landon will just stand in front of they'll be like, it's Mama, you know, and he'll what he knows is kids are amazing nowadays, you know, he just knows he can swipe to go see the next photo. Oh, there's Lucy, you know, I mean, it's just so funny. He loves it. So they totally love those photos. So let's talk a little bit about general strategies for building habits. Because I, I've read a lot of books, I feel like I've put a lot of effort into learning how to optimally build habits, even though your brain is sometimes the you know, even though you know how to do everything your brain gets in the way, you know, your human intentions, just everything sort of gets in the way. But what are some systems that you look to put into place to help you build better habits? I know I have a whole bunch. So we're gonna probably go back and forth on some of these things. Yeah, the first one, probably the one that we've been talking about already is have some some way to make them trackable. And we've talked about this many times when we have goals episodes. Goals are if you have a goal that is not trackable. So we always talk about smart goals, which is I will go back to that episode and listen to it. But we basically want to be able to quantify what it is that this habit is in by having some sort of app or some sort of way to even look at it and say these are the things I need to do. It is very clear what I need to do. And I need to do them every day or three times a week or twice a day. And I have recently got this app called done and you can put in I'm just looking at it right now. I have gym three times a week. brushed brush teeth twice a week, floss once a day. Take your vitamins once a day and a couple other things. ones like that. And just getting into the habit of using this app, which is another habit in itself. And I as like someone who loves the Getting Things Done mindset for doing stuff. I love the idea of just like it being very clear whether it's done or not, you tap in, you see the colors light up and everything like that. So quantifying and trackable is key. - -10 -00:15:24,329 --> 00:15:36,510 -Unknown: Yeah, totally. So what was the piece that you said you use something called done? Yeah, I just looked up on an app store, like habit tracker. Yeah. And done popped up. I'm sure. There's 100 other good ones. - -11 -00:15:36,800 --> 00:15:45,330 -There's all there's so many of them. I was thinking like, that'd be a fun, like, tutorial to build one of these. Oh, yeah. Simple enough. But hard enough? - -12 -00:15:45,330 --> 00:15:45,930 -Totally. - -13 -00:15:45,930 --> 00:18:09,450 -Wes Bos: Which one do you use, I use one called loop habit tracker. I know it's on Android, I have no idea if it's on iOS as well. It's just loop habit tracker. This app is great, because the interface is really nice. And it's not like overdone. It does the one thing very well. And that's it, it shows you all of your metrics, if you click into any one of them to show you like how long your streaks been going, and if you set it to say, hey, I want to do this thing five days a week, and then you've done it five days a week and automatically puts checkmarks in for the next two to say like, Okay, you've satisfied your your five day thing. And I really like this app, you can have as many as you want, you can archive them, you can filter them. And I use this thing pretty much every day can pop up with little push notification, at the end of the day, say, Hey, did you do this thing that you're you're supposed to do today, obviously, there's some of my habits that I haven't been sticking to for some reason or another, I really injured my back, which is no surprise to anybody that I'm getting hurt again. But you know, for instance, I have to do handstands every day. You know, that's one of my my habits. And that one has been gone completely blank lately, because my back has just been killing me. And I don't think handstands are gonna be the things that will fix it. So I've been being a little cautious there. So quantifying and making them trackable is key but also making it making sure that the app is easy enough and simple enough that you're actually going to stick to it. They're saying in the app on the Android store, I know it's probably an iOS two because it's really popular words about it's like a habits RPG. And if you're a fan of RPG games, which I typically AM, you can like earn XP and level up and give your character new costumes just through competing habits. And I was like, this sounds awesome. This sounds like the perfect app for me, because I like all of these things. And it's going to make me stick to it. But I found out that the app was just way too much. And not like not what I need. Like I wouldn't use the thing simple. And because it was way too much. I didn't use the app. And I didn't really stick to the habits that were on it, or I didn't least track them in the way that I would want to do. And so make sure the thing that you're using to track yourself is simple. If it's a calendar, like one of those, you know, classic cats, black and white cat photo calendars that's like you hang on your wall, and you just got to put an X on the date. If that's the easiest way to do it for you then do that. Because whatever is going to make you actually track it is is going to be the best option. - -14 -00:18:09,659 --> 00:18:37,200 -Unknown: Yeah, I agree. This loop habit tracker is open source. And looks like they're working on a web version as well say well, though, yeah. web version has one line of console log hello world. Looks like it hasn't actually ever been started. But the whole Android and iOS. There's no iOS app yet. But it looks like they are currently working on iOS app. You can see it on GitHub. This is open source. Yeah, I'll put a link in the show notes. - -15 -00:18:37,259 --> 00:21:11,810 -Wes Bos: I love this app. Yeah, a big fan. Cool. Well, next tip we have here is making you're making the habit small enough. Again, just like we talked about goals, don't say like I want to get better at web development. Make it like I want to build one code pen per day. And if you make them small enough, you can make them quantifiable enough. That's going to actually make you do them. Because these apps don't work where you just put in this like amazing habit that you wish you have like, go to the gym for six hours a day and then you put it in the app, it doesn't just doesn't just work, right? Like you need to actually make it reasonable enough that you can get yourself into that habit and sort of get over the initial hump. Yeah, that is that is hard part is making it because you you have really lofty ambitions when you make your goals, right, I'm gonna do this, I'm going to do this. But if you make it too intense, you're not going to stick to it. Once you stop sticking to it, you're not going to build those streaks. One thing that I really like is forcing accountability. Like I'll tell Courtney that I'm doing something or making these changes or, or I would like to do this and then we'll be sitting down. I'll pull out the Nintendo and I'll be like, Alright, ready to chill out and just be like, I thought you were taking a break from screens. Oh, you're right. I am taking a break from screens. Thank you for reminding me. So another thing I like to do. You know, if you if you don't have the ability to, you know, to make yourself accountable or have somebody be accountable, I found this thing called the K safe, it's a kitchen that safe. And if you've ever used any of these like things that you keep your spaghetti in, or something online, these plastic containers for your kitchen, it's basically that with a timer, it's super cool because it locks, I got one of these specifically to put my phone in because I have such a hard time being away from my phone, it's a it's a real problem. So I put my phone in there, and I can spin the dial and press the button and I say, hey, do not open for two hours. And guess what, I cannot open this thing for two hours that locks it in like I would have to take a hammer to it. And I paid 50 bucks for this thing. So I'm not about to take a hammer to it. And so I just gotta wait it out for that. Two hours and no one opens up, okay, I can have my device again or whatever. Obviously, you should only do this if you're in a you know, we're people don't need to get a hold of us. So like if I'll do that, if like Courtney's home and you know, we're supposed to be doing X, Y and Z and I don't want to be on my phone or I want to be present. I'll definitely toss it in there and fire up that case safe. It's pretty cool little gadget. I'm really impressed with mine. - -16 -00:21:12,780 --> 00:21:22,100 -Unknown: Next one that case a looks pretty cool. I don't know if I think I would just try cut it open. If I was like I need my phone. It's in there. - -17 -00:21:22,170 --> 00:21:33,660 -It's it's I mean, it's flat, you'd have to, you'd have to hammer it like you're not getting it open. It's pretty cool. But like what happens if you need it? Is there an emergency? Are you out of luck? - -18 -00:21:33,780 --> 00:24:16,920 -Wes Bos: No, there's an emergency, you can probably gonna have to smash it. But that's why I'm saying I would only do that if like Courtney was like, I'm only putting my phone in there. If people don't need to reach me like if they corny or whatever, then that's fine, I wouldn't probably put both of our devices or if she's out, I wouldn't put my phone in there. But it's definitely useful to put other things in there, you could put by like track if you want to quit smoking, you can put all your cigarettes in there, put your vape in there, put your vape in there, if you name it. Next one we have here is replace bad habits with good things. So one of my bad habits is just constantly going on Twitter. And the reason why I just go on to Twitter is probably because I feel like I need a break or deserve a break. Or I like my main thing is building content and recording content. And the reason why I'm switching over to that is because I'm probably tired or I've hit a point where it's a bit hard for me and I need a bit of a distraction from that. So what I'll do in that case is not just try to force myself to go back to doing that because I know myself better than that. And I know that that doesn't work and I know that I'll be unhappy with that. So I just have like a little list on my computer of things that I should be doing instead of that in like fun things like design a sticker or reply to three emails or go drink some water or look at my habits app and that will usually be enough of like a five minute 10 minute break to do one of these things and then then I can switch back to whatever it is that I'm working on. So being able to identify like why is it that I have this habit and what better habit Can I replace that with? Yeah, that's a really good point because if you don't replace it with anything, you're likely to just go back to that right away. When I was in high school I used to drink a lot of pop I'm not calling it soda from Michigan here we call upon a streak a lot of pop and even I don't know about into college I didn't but you know I just I wanted to replace that right in and I just started drinking green tea and water just drinking green tea and water drink green tea I've replaced it I got really into tea and made sure that it was like something that was like interesting for me and I look forward to it because I replaced that it was definitely a much better experience and you know what i like cannot have a pop today I couldn't tell you in the last time I had when it was so definitely replaced for me yeah except for Red Bull which I guess I don't really classifies that even though it is I don't have a lot of Red Bull but I'll do is a treat occasionally will treat here and there next a good one is do celebrate your wins productively don't like if you know your goal is to stop drinking for a week don't go out and get hammered the very first chance you can get like is - -19 -00:24:16,920 --> 00:24:49,020 -Unknown: that's not like don't go drink a case a mountain dew yeah the rain right that's not productive that's you know that's just like gorging out on the thing that you're you see heavyweights that movie heavyweights with a no I haven't seen any movies Well yeah, but this was like a long time ago and it's not like so and heavyweights it's a camp for overweight kids and they send them there to lose weight. Is that what the blob? Yeah, yeah. Okay, one of like the 12 moves I have seen right yeah. Ben Stiller's in it yeah - -20 -00:24:49,020 --> 00:25:20,040 -Wes Bos: and then there's a scene where they like just absolutely go on gorge themselves after the Yeah, the candy. Eat a whole bunch of food. Yeah, that's not productive way to celebrate. So um, Make sure that you have you had like, you could celebrate by doing something that you enjoy. That is going to be a nice little surprise or treat for yourself without overdoing it. Like, okay, I survived two hours without my phone. You know what, I get to just mindlessly browse my phone for 15 minutes now or something beautiful. Um, - -21 -00:25:20,040 --> 00:25:36,150 -Unknown: what other tips do we have here? If you got keep the streak alive, I think that is the best part about the app is you're able to see your streak and see how long you've done something over the course of weeks and years. And you don't want to break the streak just because of one silly thing. Any other tips that you have there? Yeah, I - -22 -00:25:36,150 --> 00:27:03,330 -Wes Bos: like to tell myself, you know, I can't do x until y is done. So like, I really like going to the gym. And okay, it's approaching gym time. Well, I can't go to the gym. Unless I, you know, answer to emails. So then I'll answer my emails, and then I'll get to go to the gym. But I'll make it. So it's definitely something that I can accomplish. Not something that's like a huge lofty goal, but definitely something that's like, here's this thing that you've been putting off all day. And you'll just tell yourself, all right, I cannot go do the stuff that I want to do until I do this. And then once you have that in your head that that's how it is okay, I just got to go do it. There's so much more to building good habits, though. And I don't know there was a atomic habits was a really good book. I don't know, if you read atomic habits. Yeah, you should check that out. If you haven't Power of Habit is another good one Power of Habit. There's, there's so much stuff there. And at the end of the day, I really think it comes down to just like making the movement to do it. And not just totally not just like thinking about doing it or talking about doing it like actually making the movement to doing it, tracking it, replacing those habits and get going on it because they're really not that hard to replace. And they're really not that hard to work in there. But you have to do it. So that's all I really have on building habits. It's something I'm super interested in. If you have read any good books or know any good techniques or have any good apps for this, shoot them our way. We will share those up with everybody else on the Twitter feed. Great. All right, I - -23 -00:27:03,330 --> 00:27:21,510 -Unknown: think that's it. Thanks for tuning in. I look forward to hearing what you have to say and we'll catch on Wednesday. Great face. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax184.srt b/transcripts/Syntax184.srt deleted file mode 100644 index 230705185..000000000 --- a/transcripts/Syntax184.srt +++ /dev/null @@ -1,496 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,849 --> 00:00:10,530 -Unknown: the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. - -3 -00:00:10,589 --> 00:01:08,670 -Wes Bos: Welcome to syntaxes. The podcast with the tastiest web development treats. Today we are going to talk about building a desktop app specifically, we have atn LeMay here from missive, which is an email client that Scott and I both use. We'll talk about what it is in just a second. But he's here to talk to us about how to build actually everything in JavaScript iOS app, the desktop app, Android app, you name it. So today's episode is sponsored by two awesome companies. The first one is Log Rocket, which is Log Rocket is going to give you playback into bugs that possibly happen on your website, as well as a whole bunch of insights into what happened as well as Freshbooks, which is cloud accounting and invoicing and expenses and all that good stuff. So welcome, atn thanks so much for coming on. I really appreciate you taking some time away from building your app and coming on do you want to give us like a, a quick little rundown of who you are and what you do? - -4 -00:01:09,089 --> 00:02:43,470 -Unknown: Yeah, so I'm, I'm probably a front end developer, although it can do a bit of full stack, but I'm admitted I do the front end. So missive is a full fledged email client. So with all the modern tools you would expect from your email client nowadays, so we're talking news and later on do send canned responses and contacts and we even have rules, what we call rules. It is the equivalent of let's say, Gmail filters so you can apply automate whatever workflow you have. So that's that's the email client part of missive. But in missive, we bring collaborative tools and features right to you right in your inbox. That was the the idea behind missive so you can share conversations with your colleagues or you can even delegate a full email account so that you don't have to show your password or it's easier to know who did what, especially if you're sending on behalf of a company or you're sending on behalf of someone else. That's something you like to know. So in terms of cognitive features with the different is, is we brought in chat. So basically, your email conversation can become like a chatroom. And then you can have tasks assignment, and real time collaborative composing, show labels, teams, etc. - -5 -00:02:43,740 --> 00:04:13,020 -Wes Bos: Yeah, everything. So to give you some insight, I started using missive probably two years ago, where I had brought on an assistant. And I said, like I need something to be able to work with my assistant on emails and things like that. So I ended up on on missive, versus Canadian products, how to support the home team. Second, it was very clearly the best one out there. And the way that it works is that I have my personal email box, I've got my work email address, and then I have a support email address. And I have all three of those funneling in. And then what happens is the support one immediately goes through my assistant, and she will try to reply to as many of those as she can. And if there's a question, we can chat back and forth in line about the email. So like, like, you can see like the person's response, we can go back and forth on a couple little chats, then somebody can send it an email, as anybody and then you can close it, you can assign it to people, and it's just like the best workflow. Yeah, for just kind of like boop, boop, boop, boop, boop, boom, like trying to assign emails to people and handle it. And there's a chat room in there. And, and like, I think it would be like great for like, like people that are trying to do support or people that have like, if you have like a shared inbox, if you know if somebody replied from one or not, it's just it's just an awesome tool. I know. I've been using for a while. Scott, you picked it up? How long ago? - -6 -00:04:13,319 --> 00:05:51,750 -Scott Tolinski: Yeah, so maybe about three months ago, four months ago, I had been doing sort of a trial of several different email clients, I used nihlus. And one I believe it's called, I don't know, they changed it a whole bunch over the course. I've used spark considerably. And I was just looking for something that had these features were team accounts. These kind of these kind of features were all very important for me to be able to track again, who's answering what and where they're coming in. So I've been looking in personally into getting a virtual assistant to handle at least my support emails, or at least to help with the support. Yeah, the common things that I do every single day. And so because of that, it's like okay, now I have to improve my workflow. I have to get it. This One of my requirements that didn't seem to be a requirement of a ton of other people was that it needed to have an Android app because I use Android primarily. And so many of these, like email platforms are like, the world's best email platform. And then it's like, oh, iOS only. Okay, great. Yeah. And then they're a lame excuse as well, we just want to focus on the best experience for the small now, like, you can focus on, you know, supporting the other 60% of mobile users out there. So I'm a big fan of this app for for that reason. And I know you had talked it up. And I personally did, I just, I don't know why I didn't bite initially. And now that I did, I'm feeling like a total dummy for not biting two years ago, or whatever, when you first told me about it. So I've been a big fan than a daily user of it for the past, you know, three, four months? - -7 -00:05:51,960 --> 00:05:57,810 -Wes Bos: Yeah. So it's obviously awesome app. We love it. This is not sponsored or anything, even though we bought these. - -8 -00:05:58,200 --> 00:06:00,600 -Scott Tolinski: Yeah, I don't want to gush too much here. It's great app. But - -9 -00:06:00,600 --> 00:06:15,090 -Wes Bos: the reason we're having him on is because the the desktop app, the Android app, the iOS app works in the browser. All of that is built in JavaScript. So you want to start with the maybe just the desktop app, how is what is it built in and explain about that? - -10 -00:06:15,450 --> 00:07:57,090 -Unknown: Yes, of course. So it's the basis is, is is a good old react app. And we started building like in January 2014. So I just had a look. And the first react we had was the 0.8. Wow. So we're talking like the 2013 version. So had a quick look to and the first commit of Redux, for example, was in 2015. So that was a year after we had already started missive. So in that regards, we didn't know what we Redux was or even at the time, I don't think I mean, bundlers were not much of a thing, either. So the rest is, maybe something we could consider nowadays, a little bit of a legacy. For the the tools we use, but we haven't had a reason to change that yet. It's working quite well, and you don't want to break something, especially with it. This big of a codebase. Yeah, so the rest is a is a backbone for the models, collections, router events. So backbone with underscore. It's a build with CoffeeScript. Oh, really? Wow. Yes. At the time was, it was the only way to create classes and instances. Yeah, yeah. It wasn't pretty doing that in JavaScript. And that's something we know, we knew we wanted to have a good base. So we built that with CoffeeScript. And the rest is just libraries and the helpers. But it's basically that. - -11 -00:07:57,420 --> 00:08:08,310 -Wes Bos: So you use react with backbone. How does that work? Do you just use react for like the for templating? And the virtual Dom stuff? And then backbone for the rest of it? - -12 -00:08:08,399 --> 00:08:38,779 -Unknown: Yeah, pretty much. So backbone is like our Redux. Yep. We use it for the events. So mostly, everything is event based. So you just trigger an event with your backbone. And you know that the good components are listening to that event. And we use it for the router, too, which, at the time, even react router router, I don't think was a thing. And also for the models and connections, which is the biggest reason we we've been using backbone. - -13 -00:08:39,119 --> 00:09:03,960 -Wes Bos: Oh, that's, that's really neat. And have you looked over at TypeScript sort of like that meme looking over at it? Or is that just like, you've probably got there's, there's only three people your hire, you hired a fourth, online, this massive app. So I'm sure that you've got enough on your plate. But have you ever thought about the benefits of something like a TypeScript? We have not considered it yet? For the same reason, - -14 -00:09:03,960 --> 00:09:42,770 -Unknown: it's just a big codebase, that it would take a lot of effort and time to do something to use a TypeScript or a change. Or ideally, maybe it would be more like a modern JavaScript. So instead of CoffeeScript, because for all the other tools that we could use, but at the end, you realize that it's it's not what makes a good app. Yeah. So you can you can sub profile of JavaScript, you can profile your events, you can profile your react nonetheless. So that's, to us. It's not been like a reason yet to to change that. - -15 -00:09:43,200 --> 00:09:59,070 -Scott Tolinski: Wow. So the React part of the code base, did you use any libraries in particular to get yourself like there? I know the desktop app is electron. I feel like it most likely is Yeah. And so for the front end, you used react app or next or any of that stuff. - -16 -00:09:59,340 --> 00:10:38,460 -Unknown: No, you No, it was still so new at the time. So I want to say, we didn't know about create react app or so we just started with a bare bones, we react. And we just create a few routes and came up with a structure that was working well, and components and some intertwined with the backbone models, you can register to the events. We did Oh, we did add the React backbone library at the time, which was something that helped glued backbone in react together. So that was pretty seamless for us to implement. - -17 -00:10:38,640 --> 00:10:51,480 -Wes Bos: And what about, like tooling? How do you dev on this thing? Like, what do you run on your computer to dev on it? And then And then also, like, what's the process for bundling this thing up into an app and eventually into electron? - -18 -00:10:51,690 --> 00:11:38,909 -Unknown: Yeah, we changed along the line, but it's just web back. So we just started with back server, which compiles everything into a single JavaScript file. It is not so much optimized, that is something that we would like to to improve and work on. But on other than that, I run a single process in terms of building the client part, the front end part, so that it's just a single process, which is the Webpack. config. And then that's literally bytes four bytes, the same JavaScript file that is in electron or Cordova for the mobile apps. And the same one that we use on for the the web browsers. Hmm, - -19 -00:11:38,940 --> 00:11:45,899 -Scott Tolinski: so what kind of state management Do you have going on? So you said it's all sort of event based - -20 -00:11:45,929 --> 00:11:47,309 -Wes Bos: backbone models? Right. - -21 -00:11:47,370 --> 00:12:02,190 -Scott Tolinski: Right. So we're on the React end of things, I guess, d? Are you using anything to manage state locally for react? Or are you just centrally running pretty much with the the backbone as sort of the catalyst for everything? - -22 -00:12:02,820 --> 00:12:44,190 -Unknown: Yeah, we do have one state object. That is, in fact, the backbone model. Yeah. But because it provides with the, the events we need, you can listen to just specific events. So you can have a component that will listen for the events state, just online offline, if you we know a user goes online and offline, we trigger an event. And we just update the state and the state will trigger the event. And the components that are required to know about the online state, they can just, if it's a UI component, it can be rendered with reactive Ensign. - -23 -00:12:44,190 --> 00:13:43,590 -Wes Bos: That's so neat that you can can do that all in react. Because if I think about the an email app that I use, there's so much fussy stuff. And I bet like most of your dev time is spent on very small little bugs, because like an email client has tons of shortcuts and tons of little things and different context switching. And when you press arrow keys, different things happen and different checkboxes and like, the reason why I wanted to have have you on is because like I spend, probably most of my day between VS code, which is the electron app, and and Miss have, I spent at least a couple hours a day in in my missive app being the or at least maybe half an hour an hour doing email every day. And I was like, the fact that this thing is so nice and polished and done entirely in JavaScript is pretty amazing. Like, is it challenging to do a lot of these like UI things in JavaScript? Or? Or is that a benefit to doing it in JavaScript? - -24 -00:13:44,069 --> 00:15:06,360 -Unknown: Oh, yeah, well, it's a little bit of both, you can be considered a side effect of adding only JavaScript applications. For example, the worst thing to do in JavaScript or do yourself are everything related to swipe. So of gestures that comes for free, normally, in a native application, or if you use Apple SDK, or even an Android, you get those for free. And we are used to do the iPhone gestures. We know how they work, when they are smooth, they responded in whatever app you use, they will always respond the same way. So that's something you expect from the apps you use. So having to build that in JavaScript. I would say that that's been the most challenging part. It's the UX around all these little things that you expect to be in an app while be all the everything that is UI, and that you would get like the picker, select the context menus and things like that. Yeah, I mean, once you nail them, it's there. They here for long you can just reuse them or you can have a higher order component that you can reuse and those I wouldn't consider them most challenging parts, but definitely the the UX and the gestures and the the other stuff around me. - -25 -00:15:06,840 --> 00:15:40,470 -Scott Tolinski: So mysid has a fairly unique gesture as far as what I've seen, this could be different for Apple users, where if you start swiping on one email, and then you hold down or swipe down, you can dismiss or archive, like as many emails as you can, in one fell swoop, I'm really interested in that interaction was that, like, what was the catalyst for that coming up with that interaction, and when you made it, where you instantly like, this is superduper handy, because that's something that I use 24 seven in missive, and I found myself just absolutely loving that. - -26 -00:15:40,830 --> 00:16:31,529 -Unknown: Yeah, yeah. We've always said that we were the first and only ones to do what we call the multi conversation swipe. Mm hmm. I don't exactly remember how we had the idea. Maybe it was because we we had to find a way to do act on multiple conversations at the same time. And, you know, the the pattern of select, and then you just stop the conversation you want? I don't know, I guess it wasn't fast enough, or wasn't productive enough. And, and once we had the idea, and once we did it, there was no, no going back for us if there's something that we've been pushing a lot. And when we we demo missive, and that's something we're just or we're really proud of the the UX around the multi conversation swipe. - -27 -00:16:31,679 --> 00:16:46,380 -Wes Bos: Yeah, I love that, that that UI myself. And it's funny, because I see myself using it and like, Oh, that's really nice. But then I'm curious about like, but how did they build it? You know, always want to know, like, what's behind it? and whatnot? - -28 -00:16:48,179 --> 00:16:52,110 -Unknown: Yeah, you mean, technicalities or challenges? - -29 -00:16:52,230 --> 00:16:58,799 -Wes Bos: No, I just as a as a user, I think it's just interesting. From a developer standpoint, whatnot. - -30 -00:16:58,830 --> 00:16:59,370 -Unknown: Yeah, - -31 -00:16:59,370 --> 00:17:15,240 -Scott Tolinski: I would actually be interested in hearing just a little bit of the technical behind it. Yeah. When you're swiping, you start to swipe, like the handle the event? And then what are you triggering the event on? Is that the drag of the email specifically? No, yeah, exactly. - -32 -00:17:15,240 --> 00:17:53,130 -Unknown: That's, that's a good point. Because you work with the DOM, you know, how you want to limit your reads and your rights. So actually just swipe on your screen. And with the x and y coordinates, we can map that to the conversations that we know are there, we just don't query the DOM at all. You just move points. And then we just, we move in, we use the CSS to move with J with JavaScript that moves the transform treaty of each elements that are detected to be within the swipe range. Cool. I - -33 -00:17:53,130 --> 00:18:19,260 -Scott Tolinski: mean, it looks and feels super smooth. So I think that would be like the challenge of it. That's it. That sounds like I don't know, that's a super interesting approach. When you have problems like that, that are sort of a typical, it's always sort of like, Okay, I'm gonna start this is just a drag and whatever and this thing, and then oh, no, wait, we have to support everything. So then you have to move on to, well, how can I, it's almost like you're selecting something, I just, I find that that solution pretty darn interesting. - -34 -00:18:19,550 --> 00:19:11,550 -Wes Bos: Yeah, in my JavaScript 30 course, one of the exercises is to just click a checkbox, hold down SHIFT and click the lower checkbox, and just select everything in between. and for it to work the opposite way, select a lower checkbox and do a higher one. And the logic in that very simple example. It was like 40 lines, 4050 lines of JavaScript, and it's fairly complex. I can't imagine like, implementing it, like for real life with like, all these swipes and everything, oh, it is a lot of lines. And then you mix in requestAnimationFrame a lot of techniques to have like a 60 FPS animation and transitions once I found a way to improve on very old devices, because back then we had to test like, just the iPhone four. - -35 -00:19:11,550 --> 00:20:10,550 -Unknown: I don't know if you remember the iPhone? Oh, yeah. But as much as they were very nice devices, that's the kind of transition that would kill your phone, it wouldn't work and, and then enjoyed the it wasn't much more smoother than iOS. So you have to find ways around that. And in our case, it was a we had to, to have two levels of transform 2d. So one level 40 Aaron's on doll swipe and another for the vertical. So it was a very complex and back and forth trial and error. But yeah, just a there are no secrets Besides, don't read and write that down too often. So you want to cache if you you know your your elements are Certain position, you want to catch that position, you don't want to query too dumb to know where conversation b is. You really want to work with data in the DOM itself. - -36 -00:20:10,770 --> 00:22:07,500 -Scott Tolinski: Yeah, I think we'll get into a lot of this more after we talk about one of our sponsors. But I think that leads me to like, maybe the next section we can get into, which will be like the mobile mobile app space of it, because that's such a, it's such a big part of this. And that app doesn't feel like a Javascript app. So real quick, I think we're going to talk about one of our sponsors, which is Log Rocket. Now, if you have users using your app, and maybe they're swiping in the thing in their email app does not do what they're supposed to. So Log Rocket is one of these really cool software's that? Well, it allows you to see exactly what's happening. It typically when we're solving bugs we're doing so almost in like a cave without flashlight on you got like a call stack, maybe which is like your phone's flashlight. But maybe you want that big ol flashlight to see everything. I know Wes wants big flashlight, see everything. And so what we have at Log Rocket is your entire bug system illuminated, you can see exactly what the user did with a session replay video, you can get access to the network tab, error logs, Redux store, all that awesome stuff. I'm a huge, huge fan of Log Rocket. So check it out at Log rocket.com forward slash syntax, and you will get 14 days for free. So check it out. And thank you to Log Rocket for sponsoring. So let's get into talking about this mobile app because the mobile app is great. And you know, it's funny that we talked just about the animations and some of the techniques that you needed to use to remove jank from the animations. And so many times that when you're using native apps that aren't native apps, they they have those issues, where specifically with things like dragging events, I know I personally have built like Cordova apps and things like that to get those dragging events. And I could never get the animation feeling like a true native app. And I never felt like missive felt slow in those ways. It feels very smooth. - -37 -00:22:07,710 --> 00:22:17,250 -Wes Bos: I didn't even know. I asked him before he came on. I was like, is the app built in JavaScript too? Or is that that's native? And he's like, no, it's JavaScript. I was like, What I didn't even know like, I - -38 -00:22:17,250 --> 00:22:47,790 -Scott Tolinski: there's no way you can tell that. It's, it's built in JavaScript. And I agree like those JavaScript apps have that feeling, you know, it's just a feeling it's like that a j anchor or fps loss that you do notice, and I don't notice it with missive. So I would love to get into quite a bit about the the mobile app, I'm sure we have a billion questions about it. But first and foremost, maybe Can you give us maybe a little bit a high level? What's it built in? Is it you know, same codebase? With that kind of stuff? He's sharing components? I'm very fascinated by this. - -39 -00:22:48,210 --> 00:23:05,760 -Unknown: Yes. And that's actually a bar that we're quite proud and not ashamed. And I'm saying that because it is a Cordova app, first of all, cool. So it is bytes, four bytes, the same same app that you get on your desktop, - -40 -00:23:05,790 --> 00:23:06,420 -really, - -41 -00:23:06,810 --> 00:23:08,490 -Scott Tolinski: I swear it's super impressive. - -42 -00:23:09,120 --> 00:23:11,550 -Wes Bos: So it's, it's like the same bundle shipped out. - -43 -00:23:11,610 --> 00:23:54,780 -Unknown: It's media queries, no way and CSS. If you resize your desktop app down to a mobile, you almost get the same experience. But with the exception of We know you're not on a touch device, but the animations, everything you can even swipe on desktop, if you hold down the shift. The shift key. So yeah, back to mobile, but it is this exactly the same app. So it's same technicalities, same challenges, same law, that's what allows us to be fast. And to be able to provide such a big app with a lot of features only as a team of tree and to deploy on all the platforms at once. Wow. - -44 -00:23:54,810 --> 00:24:09,390 -Wes Bos: So you say it's built on Cordova, which is like what phone gap used to be, I've been sort of out of the game and these types of things. And what does Cordova give you in order to run an app on iOS or Android. - -45 -00:24:09,450 --> 00:24:43,110 -Unknown: So it's similar to electron so it gives you a WebView. So in our case, it's WebKit. So that's, at least you can you know, you're working with the same browser, and then it has like an ecosystem of plugins. So then you can add all the native, the functionalities you need. So if you if you want to control a few things about the keyboard, you we have a plugin for using the photos and images, uploads, downloads, and stuff like that. Yeah. - -46 -00:24:43,200 --> 00:25:21,330 -Wes Bos: Okay. That's pretty cool. It's always interesting to see. So that differs from something like React Native where I just say this for our listeners, I'm sure you know, that difference from React Native where in React Native your UI is done natively in iOS or Android and all that. Your logic and everything happens in the background in JavaScript, whereas this is your UI is HTML and CSS and you run JavaScript right on it, which is pretty cool that you get such as smooth Express. I'm still I know you said this like two minutes ago, but I'm just resizing my email app right now. I'm still amazed that you can I just resize my app, and it's the mobile app. on the desktop. - -47 -00:25:21,390 --> 00:25:57,810 -Scott Tolinski: I think anybody's ever built it even like a mobile mobile, not even like a mobile app, but a mobile view of an application and had to do a lot of this stuff, whether it's gestures or animations, you'll know that it's not always super easy to get it feeling like a native app. And, and I'm really impressed that missives using Cordova. What's your experience been with something like Cordova because I have used it but I haven't done it for anything larger than this. Do you feel like using Cordova has been a large positive for this app? Or do you feel like it's holding you back in any sort of way? Do you wish it was on different platforms? Or are you totally satisfied with it? - -48 -00:25:58,170 --> 00:27:25,800 -Unknown: I think it's a it's a spoof was positive for us. It's been working well. But to be fair, we have a lot of internal toolings. To make Cotto act exactly like we want it to work. There, there was a lot of times where, for example, you would you would want a plugin. It was a the WebView is a plugin to on Cordova, so you want your WebView. But on Android, if you included the plugin, the Android app was just crashing. And if the plugin wasn't included in iOS, iOS would be crashing on your state, we're fine. I just want it in iOS or vice versa. But you can't do that with Cordova. So we kind of had built our own structure around Cordova, just just to the endows us to have plugin in only one platform while we don't have it in another platform. And then we rely on Fastlane. I don't know if you know about Fastlane. I don't know know, that manages all the building part and the deployment on iOS and the slide and Google Play Store. Okay, so that that's a tool that's been I think it's been bought by Google used to be an open, it is still open source. So app automation - -49 -00:27:25,800 --> 00:27:38,670 -Scott Tolinski: done right. And they have a little counter of how many developer hours they've saved, which is kind of like a, you know, people serve, but how are saved we have, you know, 19 million hours saved. It's pretty cool. - -50 -00:27:39,239 --> 00:27:43,230 -Wes Bos: It's that fast lane dot tools, if anyone's trying to look it up as we're talking. - -51 -00:27:43,469 --> 00:27:52,140 -Unknown: Yeah. So at some point, we'll just switch to Fastlane for the compiling and building and releasing to the respective app stores. - -52 -00:27:52,259 --> 00:28:02,430 -Wes Bos: Oh, and if you never had any trouble with Apple or anything like that, for I know that a long time ago, it used to be they didn't like using JavaScript apps. But now it's fine. - -53 -00:28:02,880 --> 00:29:08,910 -Unknown: Yeah, no. And I mean, I don't even know if they are aware. It must be but we've been featured on the apps we love and, you know, little stories here and there on the app store a few times already. I think both on Apple, Canada and Apple us well, to our knowledge at least. So yeah, it's it's a recurring every two or three months, we will see a missive icon in one of these categories. So we Yeah, so as far as far as we can tell, they don't have a problem with that. Your ad being a JavaScript, but you do have to play by the rules. And we don't inject everything is bundled in the app. Download assets afterwards, or we don't we always go to the store. That's good. Yeah, then no, we besides a few guidelines here and there, they will change the few things you have to to update for the billing and stuff like that. But - -54 -00:29:09,300 --> 00:29:21,060 -Wes Bos: the thing about a Javascript app is if you want to update the app, you can sort of just go to the internet and download the entire jazz file. Yeah, but that's not allowed. You have to go through the update process, then yeah, approves you. Right. - -55 -00:29:21,450 --> 00:29:53,640 -Unknown: Yeah. And that's what we heard, and we haven't even tried. That's something we'd like to do for the desktop app to come up with the ServiceWorker and download the assets. Just the assets and not electron itself. But I don't I don't think that's something that you want to try with Apple. You do. So I think we'll it will keep on waiting 24 hours before being approved and just continue that way. Yeah, you - -56 -00:29:53,640 --> 00:29:55,290 -Scott Tolinski: don't want to get the band. - -57 -00:29:55,410 --> 00:29:56,100 -Unknown: Yeah, no, - -58 -00:29:56,280 --> 00:31:12,150 -Scott Tolinski: yeah. But that's pretty impressive that you you know, you know, you're just doing something right when you have a Javascript app that can be featured in those apps, because it means it, you know, it is a Apple approved experience, which of course, they, you know, they definitely value very highly. So this is, this is darn interesting. I was sort of expecting the app to be maybe not Cordova. So this is changing a lot of my mindset on this whole thing. So the app number feels like, it's an email fine, right? We all know, email clients have like a ton of state where these things are downloading emails, there, you know, grabbing emails, when you open it, it has to feel smooth, it has to have notifications, it maybe has to fetch them into background, like it should fetch them in the background. I never feel like this app is waiting, like, I never feel like I'm waiting for this app to load. What's the message that you've durer? What's the techniques and shares you've done for dealing with those kinds of data? Whether that's offline online, low network stuff, notifications, like how background tasks? How do you manage to do all those so well with a Javascript app? - -59 -00:31:12,690 --> 00:33:04,560 -Unknown: Yeah, that's, that's interesting, because I truly, we don't have any background fetching, whatsoever. Interesting. Besides, of course, the API, our API, our server does all the heavy lifting of I mean, getting the emails into our servers in parsing and doing whatever server needs to do to render them to just provide an email that's usable. Sure. But as far as the client is concerned, we just prioritize getting the right emails and because that's the thing when, when you first open missive, you see a list of conversations. So we want that to be as fast as possible. So the server never includes any data of the message itself, it doesn't have the body of your email that is hosted on the s3, so on Amazon s3. So the HTML required to render the email we fetch. Once the conversation has been rendered, we know we can fetch the latest message, which is the most likely want to be read first. And then in the background, all the other messages are fetched, while you read, for example, the last message, and it's just so far, it's been, it's been working pretty well, because we we rely on what the browser does best, which is making requests. So we just fetch the content. And then we reduce persisted in the index dB. So all the other times, we don't query to the server, we just, we use the local version we have, which is stored in index dB. - -60 -00:33:05,190 --> 00:33:12,810 -Wes Bos: Okay. And index DB for our listeners is a sort of like the grown up local storage that's built into the browser, right? - -61 -00:33:13,229 --> 00:33:39,720 -Unknown: It's a little bit similar. But it's a sync, so it's not sync, like the local storage. And you can do, you can query it a little bit. You can. It's transactions based for those who knows a little bit more about databases. So you can just have a cursor and iterate over items. So you can be you can do a little bit of queries to that database in JavaScript. - -62 -00:33:39,720 --> 00:33:48,090 -Wes Bos: That's cool. I've actually never run into somebody who uses index dB. I always look at it and like Collins, pretty neat. I wish I could, could use that. - -63 -00:33:48,390 --> 00:33:51,090 -Unknown: That's pretty cool. You should build an email client. - -64 -00:33:51,299 --> 00:33:56,040 -Wes Bos: Yeah. Sounds Sounds hard. I don't want to do - -65 -00:33:57,150 --> 00:34:10,650 -Scott Tolinski: it does sound hard. I like there's sometimes I think about projects like oh, I can I have this project that you know, there's no good solutions for me, I'll just build it didn't like in an email client is one that I would look at for maybe half of a second and just be like, no. - -66 -00:34:12,750 --> 00:35:11,360 -Wes Bos: Let's take another quick break for one of our sponsors. And then we'll get back into it as there's a whole bunch of stuff I want to talk about here. And their next sponsor today is fresh books, fresh books, does. Your cloud accounting keeps track your invoices keeps track of your expenses, you can do your time tracking on there, you can do automated follow ups if people haven't paid you, all of that good stuff. It makes it makes billing painless for small businesses. I use it myself I have for probably 10 years now. I'm in it probably at least a couple times a week. It's great. Check it out@freshbooks.com forward slash syntax for a 30 day unrestricted free trial. Don't forget to use this syntax. When they ask you how did you hear about us? Thanks so much fresh books for sponsoring. Let's talk about testing. Just also like obviously, you can test it like in the browser and whatnot, but like, like, how do you make sure that it works on all of these devices? Do you do that by hand? Do you have any, like test suites or automation or anything built in there? - -67 -00:35:11,460 --> 00:35:46,710 -Unknown: Yeah, we do have a, I would consider it a small test group for everything that is unit based. So the unit test that's mostly tested, but as far as integration tests that we can call them or that's that, you know, that will make sure that your react component act accordingly or whether you're on a mobile device, we don't have exactly any tests of that sort, yet. Oh, yeah. - -68 -00:35:46,740 --> 00:35:50,760 -Wes Bos: Yeah. I'm wondering like, how would you even test that swipe? One that we talked about? - -69 -00:35:50,790 --> 00:35:52,770 -Scott Tolinski: Yeah. Yeah, right, seriously? - -70 -00:35:52,860 --> 00:36:51,600 -Unknown: Well, you have to buy an Android and you have to buy an iPhone. So yeah, we know we do a lot of manual tests, and then the, they are ups and downs. And you have to just be aware of what you're, you're releasing, what's new code review, we do a lot of code review between us. And then a lot of testing, we have a little staging environment for us that we are barely a week in advance of our stable releases, which are almost weekly anyway. So we're not much in advance. So yeah, sometimes we have a few bugs, hit the production here and there that we try to be as fast as possible to fix them or in regards to, especially with the App Store review, and everything, you know, you can add some times before fixing the actual bug. But yeah, we tried to be careful. - -71 -00:36:52,109 --> 00:37:30,120 -Scott Tolinski: So have you at all looked into anything like Cypress, which is for those of you who don't know is a an end to end testing library that gives you these visual things. The reason why a lot of times people won't use Cypress is because it's only Chrome. But since your app is Chrome, electron, Chrome, Chrome, Chrome, that obviously don't know what the iOS Cordova WebView is, but it seems like Cypress would be right up your alley for at least doing like, quick step through testing. We use it ourselves quite a lot. And it's been very nice. It's sort of like a jQuery interface for interacting with your application. Hmm. - -72 -00:37:30,120 --> 00:37:39,570 -Unknown: Well, that's, that's interesting. Me. Ah, I don't even think I knew what Cypress was. So that's, I will definitely note that, - -73 -00:37:39,629 --> 00:38:15,920 -Scott Tolinski: yeah, you should check it out. Because it's, it's not testing in the same way that normal testing platforms are where you have to worry too much about, you know, if you're using react, react, testing library, whatever, you're having to actually deal with the platform Cypress, it's more like load up this URL, click through it, make sure things work, even just have a Cypress test, that's just called site tour. That's just the user clicking to go to every single individual page just so I could make sure I didn't goof up, you know, something that would have caused a page to not load the correct data at some point. So yeah, I check it out. Cypress is one of those tools that I really liked myself and rely on so - -74 -00:38:16,379 --> 00:39:33,810 -Unknown: yeah, no, that's interesting. But we do have a, a CI that runs for the client part, which is using puppeteer. Okay. Yeah. Yeah. Yeah. Which is that the headless Chrome, chromium? Yep. We are set up to be a little bit more deep with the React testing and everything. But for example, most of the, let's say we have some, you you add a label, which is, well, the the assigned label, if you move a conversation to assign to me mm in missive assigns, you has to add yourself as an assignee, that's to remove the conversation from being in the state where it's considered closed or opened, and so does a lot of automatic actions. And because you applied the label assigned to me, and that is something that we can test, because that's a unit part, the only thing we cannot test yet is knowing whether the right components will be will show that, you know, the US been assigned for real and gotcha. Yeah, yes. That's the lacking part. We have like a 50%. Of what we need to test that. - -75 -00:39:34,400 --> 00:39:53,210 -Wes Bos: I yeah. I think the last thing I want to ask about here is the styling of the UI. It's a like, what are you using there? It's a pretty like stripped down UI. But like I'm curious into, like, how do you obviously use CSS any specific frameworks Also, do you use Flexbox grid, things like that? - -76 -00:39:53,879 --> 00:41:06,980 -Unknown: I'm a huge Flexbox fan. I don't think there's anything Flexbox cannot do. Yeah. And I the I don't consider the walk, I've been using flat growth for quite a few years. So I don't consider the the API to be. Sometimes it's easy to get lost into the cheat all the here with the justify in the alignment and everything. So yeah, we use Flexbox. For everything. It's sass, mostly, we're just for a little bit of nothing too fancy. No, no, make sense? No, it's it's almost only CSS. And what I like to do is build a, you know, like a CSS API of sorts. So you, if you want to add a margin, you know, you'd have a class for that margin, which is, for example, margin left, you know, it's, we don't write as much CSS anymore. Once you have a good base, you can just apply these in consider in consider the CSS as a language of a solid line. You could use a - -77 -00:41:07,379 --> 00:42:08,880 -Scott Tolinski: Yeah, I've often heard of that referred to as a utility base CSS, or sass. Somebody is trying to call it functional CSS at some point. Yeah. But yeah, that that's a very, not just common approach. But I think it's a very, it's an approach that a certain group of developer really, really likes. Because we hear that all the time with with tailwinds. that's largely how they do it as like these micro classes that handle their use cases. And you apply a bunch of classes to handle those use cases. I am absolutely fascinated by that approach. And a ton of people seem to really, really love it. So that that's great that it's working for you, especially because they said you don't end up having to write a lot of CSS that way, you're just applying the classes for a system that already determines how this whole thing should look. It's, yeah, it did the styling. So it's pretty cool that you're using, like you said, sass, not using a ton of crazy stuff. And again, that's just all being done through your build tool. So that seems pretty straightforward to me. - -78 -00:42:09,690 --> 00:42:52,610 -Unknown: Yeah. Very old school, very old school. It shows how long ago we started, and we just kept using the same tools. And that's, that's also an advantage of, of being a small team. Every single decision you make toward your stack, you really have to, to ask yourself is if it's worth it, if it's Yeah, it's something you will end up just rewriting over and over. Again, that's something you can build on. And if it's easy to use for everyone in the team and easy to integrate some someone new and you try to you have less options a little bit if I may say, I - -79 -00:42:52,610 --> 00:43:48,990 -Scott Tolinski: think we I think this has a very good message behind it. Because I think I even like message something on, I think on Twitter, something about spelt about how I like spelt. And somebody responded to me with like, Oh, my gosh, you know this, what is this? What is this other thing we have to learn? Now it's like, well, you don't have to learn it like, this goes to show you not that these technologies are old, but you're using backbone in a Cordova app that feels like a native app on all platforms. So it's really not the latest and greatest tool that matters. It's the tool that your team knows how to use effectively. And it seems like you guys have really locked down these tools effectively. So I want to stress that because I don't like just because something new comes out doesn't mean you you have to learn it, or you have to do it or whatever. Yeah, I mean, you guys are using just amazing tech to do this. And it feels like a great experience. - -80 -00:43:49,169 --> 00:44:24,840 -Wes Bos: Yeah, it's just like, and like I think the quickness of how quickly you can roll out a change. Like, I think like a couple times, I've emailed you and say like, Hey, is it possible to do this? And then like, three hours later, you're like, update the end now. And it's like, oh, man, like, I think it was just like different font sizes, what I wanted, and he had rolled that out in like, a couple hours or something like that was amazing. I was like oh, that's like such a huge benefit of like the web stack and keeping things lean is that you can move a lot more quickly with that type of thing. - -81 -00:44:24,990 --> 00:44:57,990 -Unknown: Yeah and whether or not you got the West boss treatment that's between us I can hardly be more biased but we do even just with the the trio's we care a great deal about support. And that's something we're really proud of. And we we follow up every single request. We personally follow up with everyone. We requested a feature. That's something that's very important to us. And yeah, that's that's the care we put every single day into building missive. That's amazing. Well, - -82 -00:44:57,990 --> 00:45:04,620 -Wes Bos: it's appreciated because Scott I just love gushing about about it. And we're not paid or anything to do that. Yeah, - -83 -00:45:04,740 --> 00:45:17,430 -Scott Tolinski: this is an ad. This, you know, like a lot of podcasts they like to do that, like the promotional tour, or something or somebody just released a book. And like, this is not a promotional tour, we just thought this was absolutely fascinating. - -84 -00:45:17,700 --> 00:45:22,560 -Wes Bos: You should see how many people want to come on this podcast to plug their product. - -85 -00:45:22,590 --> 00:45:33,570 -Scott Tolinski: Oh, you see how many people want their boss or their their coworker? My coworker, my boss is the perfect guest for your podcast. And they also just released a new book. Oh, - -86 -00:45:33,870 --> 00:45:41,370 -Wes Bos: that doesn't work. We won't have you on if you have signed cool to sell. But we will have you on if you actually built something nifty. - -87 -00:45:42,060 --> 00:46:02,070 -Unknown: That's really nice, because that's actually our only channel of marketing. We don't do any marketing. We don't do any ads. Word of mouth, as always, and is still be our only channel. So we know you guys gave us a few shout outs in the past. So that's extremely appreciated. - -88 -00:46:02,940 --> 00:46:10,860 -Wes Bos: Absolutely. Um, is there anything else you that is interesting about the technology stack that you think listeners would like to hear about? - -89 -00:46:11,190 --> 00:47:08,850 -Unknown: Well, we could we could move on to a different topic. Very, like new, we could talk about the back end, we could talk about the servers, the microservices, we have. We would be here for a few hours. Oh, yeah. But, uh, no. I mean, in terms of front end, as far as the client is concerned, the application, whether it's an email client or not, it's a fully aware of that. It's just a matter of sending and receiving requests and making sure everything is, is up to date. So that that's the challenge to deal with them first, yes, an email app. And then you have chats in real time. And you can archive from Gmail, you can archive from Outlook, you can archive from missing. So there are a lot of sources, a lot of places the data can be updated. And that's something for the back end guys to to have fun with. - -90 -00:47:09,000 --> 00:47:24,990 -Wes Bos: Yeah, that doesn't see, like a fun job. Doing all of like, email, email, and calendaring have been around forever, and trying to innovate on something that is like a standard SMTP or I don't think anyone uses pop anymore. But like, - -91 -00:47:24,990 --> 00:47:26,040 -Unknown: Oh, we don't, - -92 -00:47:26,490 --> 00:47:39,360 -Wes Bos: those are like standards, right? And then but that but then you have like Gmail adding stuff on top like using and like that's, that's not part of the standard and having to deal with that. I can imagine that's, that's a tough thing to do. - -93 -00:47:39,390 --> 00:48:09,930 -Unknown: And both Gmail and you have outlook, the, they're both moving away from a map, which, so you have to connect to their own API. So now, it's you cannot consider those standards anymore. They have their own proprietary API. So that's, that's not something that we're, we are supporting right now. But yeah, that's, that's going to be something we will need to, to address at some point. Interesting. - -94 -00:48:10,169 --> 00:48:26,220 -Wes Bos: Well, um, that was super helpful. I'm sure we could talk another hour about it. But I want to respect your time. I think I just love these kinds of interviews, because it's, it's just super curious about how is it built, and we get to use our podcasts as a way to get into people. - -95 -00:48:26,729 --> 00:49:13,230 -Scott Tolinski: I know. Well, that reminds me of the the one we do with Drew about the danger curve game, because it's so inspirational to see to like, you know, as somebody who develops things with, you know, primarily web sites and applications, it's amazing to see something like an email client, which is an application you've been using since you probably started using a computer. And it's interesting to see that kind of thing done so well with our technologies. And so that's absolutely fascinating to me, it's totally inspiring, and if you download us missive, you'll be pretty darn blown away about I don't know, just the impressiveness of the whole the whole project. I'm just absolutely fascinated by this. So thank you so much for coming on and sharing everything. - -96 -00:49:13,499 --> 00:49:15,000 -Unknown: Oh, thank you for having me. - -97 -00:49:15,090 --> 00:49:27,450 -Wes Bos: Absolutely. Let's move into some sick pics. This is the section of the show where we pick things that are sick. I've got another I've I've been on a bit of a roll with tools lately. - -98 -00:49:27,479 --> 00:49:36,720 -Scott Tolinski: I know you're gonna stick big and I knew what it was before we even started the show. I'm pretty excited about this because I'm like, I'm gonna have to be using your referral link here. - -99 -00:49:36,810 --> 00:49:41,910 -Wes Bos: A couple people even like DM me on Instagram. We're like, hey, sick pic in the making, - -100 -00:49:41,910 --> 00:49:42,450 -Scott Tolinski: I know. - -101 -00:49:45,060 --> 00:50:58,260 -Wes Bos: Anyway, so what I'm sick picking is the Wagner flexio It's a paint spray gun, which is it's basically like a plugin gun. They call it an airless gun, and it's got this huge wind turbine on the back. And then you can screw on a nozzle with a big thing of like paint like just like latex painter or oil painter, whatever it is. And we had bought this thing for our kitchen which is like a kitchen island off of Kijiji like it was used and it was the wrong color. So we took one of our doors into the store and got a color matched and got this like melamine paint and I put it in the gun I had to thin it out a little so it would spray nicely. And this thing is awesome. It's like having like spray paint but for any color that you could possibly want. And so much cheaper than spray paint. So it was a little bit of investment. 200 bucks Canadian. But I am kicking myself the amount of painting I've done as a homeowner I hate painting. Yeah, worse. And this just turned out so nicely. So check it out. I got the 590 I can't find it on Amazon but I at my local in your Canadian you'll know Canadian Tire is where I got it. - -102 -00:50:58,290 --> 00:51:02,100 -Scott Tolinski: Yeah, we hit those initial again so I'm aware of those. Wait, - -103 -00:51:02,130 --> 00:51:04,740 -Unknown: you have Canadian Tire in Michigan? Yeah, we did. Yeah, - -104 -00:51:04,740 --> 00:51:08,490 -Scott Tolinski: we don't have them here in Colorado, but we have Michigan. - -105 -00:51:08,790 --> 00:51:11,850 -Wes Bos: Really? No man it's a it's an odd Stark. - -106 -00:51:11,880 --> 00:51:13,710 -Scott Tolinski: I know the logo very well. Yeah. - -107 -00:51:13,740 --> 00:51:16,440 -Wes Bos: Yeah. You probably see it on like hockey games and stuff like that. - -108 -00:51:16,440 --> 00:51:29,010 -Scott Tolinski: Or maybe they're not in Michigan. Maybe they're just in Ontario right across the winter there. Oh, I just googled it and it looks like they're only in Windsor. I guess that's a sorry, I misspoke. - -109 -00:51:30,480 --> 00:51:36,390 -Wes Bos: Yeah, I'm looking at it too. Alright. Okay, that would have been amazing, because I know there's Tim Hortons is close enough. - -110 -00:51:36,600 --> 00:51:39,510 -Scott Tolinski: We we spend enough time in Windsor. Yeah, we got tea hearts. Yeah, - -111 -00:51:39,540 --> 00:52:08,280 -Wes Bos: yeah, you got t shirts. So check it out. Wagner flexio 590. I got one that came with two tips. One like spray detailed gun. And then one. Like a regular gun? I guess I don't know. Go check it out at your whatever. May nerds or whatever that you shop at? What do people in the UK shop at home base? Go check it out at home base or Wikis? I know I talked to you at the end about this before. You didn't. Did you think anything or you want to skip it? - -112 -00:52:08,670 --> 00:52:43,770 -Unknown: Well, yeah, no, I do have one. But I feel not lame. But I you know you were talking about on stacks. You know, I'm a little bit outdated. Yeah, I can be, but I know. Especially because I can use it with missive because we are with CoffeeScript. But in other side projects or other micro services, we build pharmacists, I use prettier quite a lot. Yeah. And that's been a really a time saver for me. So yeah, that's, that's the only thing I could think of - -113 -00:52:43,950 --> 00:52:46,530 -Wes Bos: Wait, does prettier work with CoffeeScript? - -114 -00:52:46,770 --> 00:52:59,370 -Unknown: I don't think so. I've been I've been trying to find ways, but there's like maybe one fork on GitHub. I don't know the status of the thing. - -115 -00:52:59,460 --> 00:53:06,960 -Wes Bos: I'm a big fan of prettier myself. Check it out prettier IO, auto code formatter, Scott D of a sick pick. - -116 -00:53:07,110 --> 00:54:57,060 -Scott Tolinski: My sick pick, today is going to be another podcast, I found this one to be super fascinating. If you're into if you're in the music industry at all, I've always been, you know, big fan of, you know, just in general. I don't know I my first concert was when I was in like Elementary School. I've been a big fan of listening to music for a long time. This podcast is called disgrace land. I don't know if you've ever heard of this West. It's got like Elvis as a mummy as the logo or a zombie. And so Graceland is sort of true. You don't want to call them true crime, but their true crime. So sort of stories because they're not necessarily crime related. They're just events about different sort of disgraceful events and music history, or even just general like, really rough events. So some of them would like Amy Winehouse rehab, the Muse and the rare talent, Johnny Cash pills, more pills and playing with fire. But they're just sort of these really kind of dark stories about things that have happened in music history. And I found them to be absolutely fascinating. So many of the stories because the ones I just said don't really sound like they sound kind of mainstream. But the some of the stories that I've listened to have been things that I never had any idea that they happen, things about, like famous musicians that you've heard of that you didn't maybe know of the backstories behind, or just situations they got into that are super sketchy. And so I found this podcast to be absolutely fascinating for nothing less of these stories of people and musicians that you've heard about for a long time, but never heard of any of these stories. So check it out. It's disgrace land. It's by one of the bigger podcast people who is by it is by I Heart Radio, and it's just really good, hyper high production quality done really well. So big fan of that one. If you're a music fan. - -117 -00:54:57,240 --> 00:55:07,230 -Wes Bos: Cool, we'll move into some shameless plugs. All of my courses at Wes bos.com forward slash courses. It's the end of anything you'd like to shamelessly plug. Oh, let - -118 -00:55:07,230 --> 00:55:27,810 -Unknown: me see. Course missive app.com. Or you can find missive on any platforms specific app stores. And you can just drop us an email if you have questions or whatever. We're pretty responsive on emails, we know emails we do, we do. That sounds like a tagline, - -119 -00:55:27,810 --> 00:56:28,260 -Scott Tolinski: no emails. My shameless plug is going to be from my latest course, which is going to be spelt for beginners. And it teaches you everything you need to know to get up and running and started with spelt. It's done really cool. I've been showing some stuff on Instagram about it, because you would not believe how little code you have to write to do some things. It's sort of like they took some ideas from react and view and just sort of like at least the coding aspect of things, and then just removed all of the fluff all of the extra little things, you know, I found it to be absolutely just really nice to work in. And there's some really great platforms along with svelte to do some server side rendering stuff, too. So check it out, you will be amazed that all of the things that we're able to accomplish in this course we build a quiz in about two seconds, and it uses an API and it has animations and it has styling, it's awesome. So check it out, at level up tutorials.com forward slash pro sign up for the year save 25% and that's all I got. - -120 -00:56:28,560 --> 00:56:46,860 -Wes Bos: Great. Well, thank you so much again for coming on. appreciate all of your time. Check it out at missive app.com. It's an awesome app even just to like, try it out and see like oh, this is JavaScript behind the scenes and to see what a well built Javascript app can look like on mobile and desktop. - -121 -00:56:47,160 --> 00:56:51,870 -Scott Tolinski: Yeah, and just give it five stars on every platform while you're at it, too. Is there to - -122 -00:56:53,940 --> 00:57:01,290 -Wes Bos: go. Alright, that's it. We usually end with a piece. You can say how do you say peace in French? Hey, hey, - -123 -00:57:01,290 --> 00:57:02,040 -Unknown: hey, - -124 -00:57:03,450 --> 00:57:13,230 -head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax185.srt b/transcripts/Syntax185.srt deleted file mode 100644 index 0ad23f8af..000000000 --- a/transcripts/Syntax185.srt +++ /dev/null @@ -1,136 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott. Todd. Totally in ski. - -2 -00:00:25,920 --> 00:01:02,220 -Scott Tolinski: Whoo, welcome to syntax on this Monday tasty treat. We're gonna be talking about our flow for creating features, dealing with bugs, and just all around working on our platform. What kind of things that Wes and I do now, this isn't necessarily going to be a definitive de facto, this is how you should do it. But more or less a conversation between Wes and I were we just share sort of what are our approaches right now how they could be better maybe you know, we can pontificate a little bit on that maybe maybe my name is Scott to Lynskey. I'm a full stack developer from Denver, Colorado, and with me, as always, is Wes Bos. What's up? Wes? Oh, not - -3 -00:01:02,220 --> 00:01:15,390 -Wes Bos: too much. Just the I just tweeted about this like sleep thing. I got this, like watch about sleeping, or it's a watch and it tracks your sleep. And I realized I'm the watch is always telling me I don't get very much deep sleep. - -4 -00:01:15,390 --> 00:01:18,720 -Scott Tolinski: What OS does the last run? I'm actually interested in that - -5 -00:01:18,780 --> 00:02:15,530 -Wes Bos: it is I don't know, it's a Garmin vivoactive. Three. I don't know what it runs on. But it does like herpe, or heart rate and some interesting stuff on it. I think it's kind of cool. I've never thought it would be a watch person, but I got as a gift. And I actually think it's kind of cool. Anyways, I've been wearing it at night to see what my sleep is like. And I've been wearing it for four nights. And it's actually like, like, I get like, I've gotten four good nights of sleep, which is rare for me, which is so I have like four days and the deep sleep. It's telling me I'm not getting a lot at all. So I'm just I tweeted about it. And I'm having all these unreal answers like lots of very helpful stuff from people saying some people are saying can't trust the watch. Other people are saying get a sleep study. Some person said put tape on your mouth and I looked up this like Amazon tape that looks like something that like no like terrifying someone or the van would put on your mouth. It's - -6 -00:02:15,600 --> 00:02:33,090 -Scott Tolinski: Oh, God. And you showed me this before the show started and my first opinion on it was this is scary. This thing is like creeps me out this these. We got to share this photo in the show notes or something because this straight up creeps me out. I don't like it. I really don't like it. - -7 -00:02:34,740 --> 00:02:41,750 -Wes Bos: So that's how I'm doing I'm super distracted by these people sleeping with their mouths taped seems like they're gonna get robbed or something like, - -8 -00:02:43,560 --> 00:04:06,690 -Scott Tolinski: Oh, so yeah, we don't like that. We don't like the mouth tape shot while you're sleeping. But we do like Sentry, which is one of our awesome sponsors, they've been sponsoring syntax for a long time. And for good reason. Because this is a software that both Western I use personally in our projects. Now, this is a very fitting sponsorship for this episode, because century is one of the things that I utilize every single time in my workflow for tracking new features and bugs, I attach releases to each of my releases within century. So that way, I can say, Hey, you know, he century, this source map and this git commit are all attached to this particular release. And if you find any bugs in this release, please let me know about it. And then you can categorize, categorize, and catalog your bugs by release. And you can see if the ones that you think that you fixed in this particular release have actually been fixed in the release. And that's really key. And definitely is something that I've been needing to dive into much more and more as my application grows. So if you want to try out Sentry, head on over to century@sentry.io, use the coupon code tasty treat all lowercase all one word, and you're going to get two months for free to that's gotta be enough time to do a release. And check out some of these release features. Because if you're doing this kind of thing, you're gonna want those features. So let's get into it - -9 -00:04:06,960 --> 00:04:57,450 -Wes Bos: feature in release planning, the way that it works is sort of like dwell on my own course platform, which is me and another dev who work on it, as well as some of our past stuff that I've worked on for bigger companies that have a proper project managers and proper release cycles and inversions and things like that. So the way that it's always worked for me is that you log all the features that you'd like to see into some sort of software. This actually goes for bugs as well, where you have things that you'd like to fix in your platform, whether they are regressions or bugs or new features like that you like that to use. So I currently use GitHub just to use issues in my own GitHub. And then I put those into the GitHub like Kanban board. I don't know you know, that thing where it's like Trello, where you drag and drop into different columns. Is that - -10 -00:04:57,450 --> 00:05:20,370 -Scott Tolinski: called Kanban board. Yeah. Bond board is a Japanese. It's spelled jet it is Japanese hey there Look at me with my Japanese language skills. You it's not spelled with an H though. So you have an S with an H it's KN ba. And when I say going, I think oh, that is the Japanese word. So con con con bond it would be combined bored. - -11 -00:05:20,489 --> 00:05:31,230 -Wes Bos: Sounds like something I want to like, man, I went to this amazing Japanese restaurant the other night and I had the compound board. such delicious little things just just a nice Board of miscellaneous things to eat. - -12 -00:05:31,559 --> 00:05:40,530 -Scott Tolinski: I had a combine Courtney had the bento we Yeah. We did karaoke after, what are the Japanese words can be thrown here. - -13 -00:05:42,810 --> 00:07:34,380 -Wes Bos: So once I've got it into those things, I'll have like a column of like things I'd like to do, or like needs talking about. So like, just kind of like, every time I have an idea, I just throw it into that column or create an issue and throw it into that column. And that doesn't mean that they're gonna things that I'm going to implement, that doesn't mean that it's things that needs to be done, it's just sort of like I have a place for it. And then if something comes up, I don't know, like a two weeks later, I have somewhere to put it, I have a little bit of a home for it. And then when I want to actually work on them, I'll drag them into another column of like needs to be implemented. And then I'll have a list of all of the things that want to be implemented. And I'll just drag them up and down. In order that I like to see them implemented. The at the top is what I want to do first at the bottom is not so pressing. Lots of times, people in the past I've worked on, like use JIRA, and they have like a level that they want to have. At that time, they'll often assign like a quarterly or whatever release schedule for that type of thing. For me, it's just the order in which I wish to implement them. Then when it comes time to work on something, you sit down and you tear off one of these features that you'd like to have. And then you move that into working on category, then you do the work and make that feature actually implemented. And then when it comes time to pushing it, you you test it, you write tests for it. And then you push that out to production after it's been test. So and then you just move the card into done, you close the issue, and rinse or repeat through the entire way. And the entire thing. That's my entire process. It's pretty simple. Because it's just me and another developer. There's much more complex processes I've used in the past working for different clients. But that's kind of what's been working for me and I've really been liking it. - -14 -00:07:34,470 --> 00:07:43,320 -Scott Tolinski: So is your course platform public on GitHub? And do you have the ability do people can they submit issues for yours? - -15 -00:07:43,350 --> 00:08:36,330 -Wes Bos: No, all of that all of it is private actually. And the way that it works is if I get an email from somebody, or I get like a Twitter dm or slack dm or something like that, I'll usually talk to the person for a quick second, because that's where a lot of like the good info will come from. And having developers as customers is really helpful because they'll often like think about, I want to make the skipping better, I want to fix the autoplay, like, I think that would be a cool thing for you to do. And here's what I think about it. And they'll like almost like like sort of how we sometimes get potluck submissions where the whole episode is detailed out. Often people will just give me like, everything you possibly need. It's probably because developers is trained to think in terms of like tickets. Yeah, and then so No, none of it is public, it would be kind of cool to do that. But I also don't know that I want to have to manage something like that. - -16 -00:08:36,449 --> 00:08:38,030 -Unknown: Right? I'm feeling the same way - -17 -00:08:38,070 --> 00:08:57,990 -Wes Bos: where you then you have this like, public thing, and especially the entire course platform, like maybe I could do like feature requests publicly. Yeah, but I don't want to release my entire code base, I haven't zero time to manage that type of thing and has support it. And that's as most open source maintainer is, no, it's a full time job just doing that. - -18 -00:08:58,260 --> 00:09:27,000 -Scott Tolinski: This is a it's a thing that I'm really interested in, especially like the feature requests. I know there's a ton of services out there that do that if you are a listener and you use something I know user voice is one of them. Only here if you're using a feature request platform that you really like and isn't super expensive and or is free or open source. So I'm interested in that kind of thing. It could be interesting to talk about, do you use milestones within Git Hub at all? - -19 -00:09:27,410 --> 00:10:20,190 -Wes Bos: I don't I know that they're in there but I just kind of work on them and release them as as quick as they can or as I as I feel like it obviously things that are pressing to the user experience come first and then features that I'd like to add sort of come after that but i don't i don't tie anything to a specific milestone. Cool. The other thing I just want to add is the we just just finished recording with a tn from missive and they use canny, which is canny.io it's just a service that you can use to allow people to upvote features and based on trending, so that's a Yeah, so it's it's something I would probably would like to like just do a course on one time, like, maybe like a smaller little full stack course that I could do with we just build that right the ability to login with GitHub only vote once per thing, filter based on most popular within the last week, something like that. That'd be kind of a fun little course, I'd like to put together at some point as well. - -20 -00:10:20,520 --> 00:10:22,910 -Scott Tolinski: Yeah, yeah. No, that's a great idea, - -21 -00:10:22,950 --> 00:10:25,830 -Wes Bos: even for like, like potluck questions when that'd be great. - -22 -00:10:25,980 --> 00:10:27,240 -Unknown: Ah, - -23 -00:10:28,790 --> 00:14:48,240 -Scott Tolinski: voting platform. That is Yeah, it would be pretty darn easy to pull off and we could be cool. Awesome. Well, way I do it here is I have two systems. Essentially, I used to just keep everything and get up I did the projects that combine boards I did the milestones have a lot of labels, my labels are fun have like emoji and all of my labels for my issues to make them cute. You know, it's a speed thing. It has a rabbit running. It's cosmetic, it has been more than fingernails getting painted. But it's the bug, it has a spider. That way you can see it's a bug. So but it also says bug, it doesn't just have the spider. So all of my issues go within GitHub issues. Still, it still bugs 100% of the time, even if they end up sort of being attached to a release, they go in issues exclusively, I tend not to put bugs in my actual project tracking stuff that I use. And like you I use a Kanban board for that stuff. But I actually use it in motion, not GitHub. Now the reason is, is because I like to track priorities and releases in terms of things that aren't maybe just purely code related, but also maybe some process things. And so the way I have my feature set up is I have a table within notion that's just called priorities. And so I have the biggest problem of as you probably all know, by now wanting to jump from thing to thing before I finish thing. And so it's like, oh, I 90 90% of the ways through this, this new testing thing I've done, let me just jump into something else entirely. And I'll come back to this one. And the next thing you know, I have like 800, open, different projects. So I started this table largely as a way for me to say you can only work at the thing that's at the top of your priorities list do not work on any of this other stuff. If you have ideas or anything, you can type them out into them. But don't work on the code, because that's not your highest priority. And so my table has the name of the release with a version number. So it's the version number and then the main name of whatever that is. And then it has tags, whether or not it's for business development, front end, back end enhancement feature, those kind of things. And then it has the branch name for the branch that that version is. For instance, we have a branch on Cypress testing right now. And it says in the table, Eric Sartorius came up with this and it's Cypress Hill is the branch the branch. So we do a lot of fun branches. Okay, so if you work for level up there we do we do fun branches. So Wow. Yeah, I know, every Friday is fun branch day where we get to make a fun branch. And enjoy those kinds of benefits. But yeah, no, we haven't been a lead dev on it. So somebody leads up each project. For instance, Eric is leading up all of the Cypress testing, so his icon is there. And then I'm leading up version 2.4. Here, I used to name all of my versions and releases after Pittsburgh Penguins players. But that got very confusing. Instead of being like version 2.4. It was like a version oily Mata. And people were like, what the hell is this? Like, if people work on the branch, like, Do I really have to type out this finished person's name, their full name as the branch name. So there wasn't really a great way to do it. Now I just do by by version number. I don't use sem bear for this project, I just I want to say arbitrarily increment the version. So it makes it feel like I'm making progress. I have the goals of each particular release. So the current version 2.4 release, I have the goals up top above the combine board. And it's largely to improve user experience and tighten up things. And then also put in time saving things for myself so that the goals are time saving to tighten up, improve user experience. And then I have my Kanban board, which has four states not started in progress, testing and completed. And so between Eric and I, we just assign each other different issues. And that's the nice thing about notion is that I can sign something to Eric, I could just create it and then I can add comments I can add add any relevant links. Do you ever use the comment system within notion? - -24 -00:14:48,240 --> 00:14:58,890 -Wes Bos: No, I I saw that you commented on something like we're selling our sponsors right now. And I saw that you commented on one of them. And I was like, oh, whoa, I didn't even know that that was actual feature that you could do. - -25 -00:14:59,100 --> 00:18:02,010 -Scott Tolinski: Yeah, and it doesn't really Really nice little Ping. And then there's a resolve button next to it. So he can message out and you know, have a question that says, hey, I'm trying to do this, but this, you know, somebody goofed up something, you goofed it up. And then so I can look at and say, Oh, I goofed it up, I fixed it here you go resolved. So we use the notion entirely for all of that tracking. And I like to have as many bits of, you know, tagging or assigning or anything in there, it seems like it's a lot of work, but I need it because for so long, I've been to all over the place with what I'm doing. And I need to have a system in place of to do's priorities. Everything on my list, whether it's a bug or an issue is labeled with a p one through p four, which is the system that we got through getting things done. I also do the same for my daily to do list. This allows me to quickly look at things and say, Alright, this is a p one, this is the first thing I should look at this is a p two or priority two, it's less important all the way to P four, which is get to these last or whenever you can. So I use the P one through four system. And what else is important about my priorities, each of my releases has a little emoji attached to it, I guess that's important. I usually just click Add icon and notion and it just gives me one I just added an icon and there's like a guy levitating in a business suit. So I guess that's the emoji for this particular release. That's pretty cool. But yeah, that's that's pretty much I keep track of my issues, notion has really changed that for me, again, I, before I had a system, I was just sort of all over the place. What I would really love is for simple templates with a notion I just tweeted about this the other day, well you can't do is you can't like just select a page and say, Hey, turn this page into a template, and then go from there, there's this whole weird template button thing that doesn't quite work the way you'd want it to. So I would really love to be able to just click new issue or whatever new priority and have it do everything for me. But that's just how it is. This is how I do it. I know there's a ton of more complex systems. Again, I only have a couple of people in my notion, I think there's like three people in my notion working on this at a time. So obviously, this would not scale to a team of 30 4050 people. So we know a lot of our listeners do work on big teams like that, and teams that have to support those kind of systems. I would love to hear about what your system looks like if you have blog post, or if you have any sort of you know, even just links to share this with us as at syntax FM, but we will retweet you, we want our audience to hear what some people are doing in larger and bigger, more intense groups of project planning. And I guess it's a little bit different since we're the single developers like we are largely the people making the calls of saying, Hey, this is what's going to get done next, this is where we're going. But it would be a totally different game. If you had a coming from above somebody saying you know what, you know, that thing that you really wanted to work on, we're not doing that anymore, we got to do this other thing. So that would be a totally different world to me. And I'm interested in hearing about how you do and manage that. - -26 -00:18:02,090 --> 00:18:03,990 -Wes Bos: Awesome. Anything else to add there. - -27 -00:18:04,140 --> 00:18:11,520 -Scott Tolinski: Just don't just share us with us your systems. And let us know if you hate what we're doing with our systems and think we have to do it a better way. - -28 -00:18:11,550 --> 00:18:38,190 -Wes Bos: Yeah, I would like to hear if people have better systems as well. Just like, I don't know, I've never really spent all that much time on it. Like I'm happy with it, but there's probably better ways to do it. I just don't want to get sucked into something that is more work. Yes. On the system than actual getting work done. Because that's that's where you like sort of fall into this trap and then free know it your management. And you've you're doing here all day long. Not suck Yeah, right. Exactly. - -29 -00:18:38,190 --> 00:18:47,060 -Scott Tolinski: Yeah, these systems are supposed to make our lives easier and not more difficult. So if your system is making your life more difficult, that's a good sign, - -30 -00:18:47,250 --> 00:18:48,390 -Unknown: not the right direction. - -31 -00:18:48,480 --> 00:18:55,140 -Wes Bos: Awesome. Well, I think that's it for today. Thank you so much for tuning in and we will catch you on Wednesday. We will - -32 -00:18:55,140 --> 00:18:57,270 -Scott Tolinski: catch you on Wednesday later. - -33 -00:18:57,560 --> 00:18:58,100 -Wes Bos: Please. - -34 -00:19:00,630 --> 00:19:10,410 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax186.srt b/transcripts/Syntax186.srt deleted file mode 100644 index 8690cb291..000000000 --- a/transcripts/Syntax186.srt +++ /dev/null @@ -1,452 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:06,480 -Unknown: the podcast with the tastiest web development treats out there. strap yourself - -3 -00:00:06,480 --> 00:00:09,000 -in and get ready to live ski - -4 -00:00:09,000 --> 00:00:10,590 -and West boss. - -5 -00:00:12,240 --> 00:00:32,179 -Wes Bos: Come to syntax. This is a podcast about web development with tasty treats. I thought I would mix it up there a little bit. We say sometimes you say the same thing every day, every single time. We are doing a potluck episode today, which means that you bring the question Scott and I will cook it. - -6 -00:00:32,280 --> 00:00:33,450 -Unknown: No, you don't cook, you know. Yeah, - -7 -00:00:33,450 --> 00:00:40,350 -Scott Tolinski: we don't we just present it. We just put it on the table. We bring the plates, we bring the napkins in the forks and we present it. - -8 -00:00:40,590 --> 00:01:12,330 -Wes Bos: Yeah, we are gonna cover all kinds of fun stuff. We've got some questions about couple questions about freelancing CSS reset, too much Flexbox NPM dependencies and being out of date, lots of interesting stuff. Today we are sponsored by Sanity, which is a structured content CMS, it's the back end to your headless front end, and Netlify which is actually going to host your your website specifically is really good at hosting headless websites. So welcome, Scott. How you doing today? - -9 -00:01:12,749 --> 00:01:36,150 -Scott Tolinski: Do very good. I'm just uh, you know, fresh ready to go. Ready. I'm releasing a course today. Today is September 30. I'm also I'm getting my first iPhone today, which is kind of wild. I was sort of like a never iPhone person but their their video features and then that iPhone pro whatever they got me. They got me they got me with a 4k video and three cameras. - -10 -00:01:36,330 --> 00:02:05,970 -Wes Bos: That camera like we we have the stars at our cottage, their stars there, you can see them. And I we Oh yo try to take a picture of them. But like it looks like garbage and can actually take a picture of them. And it's sort of like fireworks where there's like kind of like three things you should never post on on Instagram is no one cares about like the the band that you saw live your Instagram. No one cares about your fireworks. And the other thing is like stars, your stars photos aren't very good, because no one can see unless you have a - -11 -00:02:05,970 --> 00:02:07,710 -Scott Tolinski: Pixel phone. They're good. - -12 -00:02:07,710 --> 00:02:16,880 -Wes Bos: I've never tried that either. And I can't wait to take photos of the stars. Welcome to iPhone family. I'm glad that you're you're finally switching over to the good. So we'll - -13 -00:02:16,880 --> 00:02:35,430 -Scott Tolinski: see I'll give it 15 days. And if I hate iOS, as much as I hated currently then yeah, you won't I? I really don't like it, man. Why do you got to put everything in a folder? Like are like what all your apps got to be on the home screen? What can you have a nice clean, it's not good for minimalists, which is kind of surprising, because that's - -14 -00:02:35,910 --> 00:02:37,970 -Wes Bos: a Wait, what do you want to do with apps? - -15 -00:02:38,000 --> 00:02:47,190 -Scott Tolinski: Where do you want to put them if they're not on your names, right? They're in a drawer and you swipe up and you get all your apps. And then you can put the ones you want on your your homescreen. It's like your apps folder. You - -16 -00:02:47,190 --> 00:02:48,569 -Wes Bos: can do folders, and I Oh, - -17 -00:02:48,600 --> 00:03:02,400 -Scott Tolinski: yeah, but by so in an AI iOS, the all the apps live on the homescreen. And if if you owe your Android, they all live in the drawer. And then you can put the ones on the homescreen that you want on the home screen rather than having just all of - -18 -00:03:02,400 --> 00:03:04,470 -Unknown: them on there. So I see - -19 -00:03:04,500 --> 00:03:13,319 -Scott Tolinski: it's not that's not the beef I have but that but that is one of the little to me, I'm also really not looking forward to Siri over like google assistant is so nice. Siri - -20 -00:03:13,319 --> 00:03:14,460 -Wes Bos: sucks. Yeah. - -21 -00:03:14,699 --> 00:03:27,389 -Scott Tolinski: So we'll see. I don't know who knows your check back in with me 15 days, and we'll find out if I have returned it or not. It has got returned his iPhone yet. Maybe I'll make a little Netlify site for that. - -22 -00:03:29,069 --> 00:05:37,500 -Wes Bos: Awesome. Alright, let's jump into some of these questions that we have here. Thank you so much to everybody who has sent in their question, we asked you please send us your follow up questions go to syntax.fm in the internet, and in the top right hand corner, it says ask a potluck question. And then a link off to a little form where you can fill it out. Fill out your questions. Yeah. First question is from cam. I'm interested in freelancing full time and have some projects big and small lineup over the next few months to work on the side. How much work do you think is a good amount of work to transition into full time? freelancing is an interesting question. It's sort of like the question of like, how how do I how do I know that I have enough JavaScript skills to apply for a job. And this question is, how do I know that I have enough work lined up. And we've talked many times about the boat. Let's talk about the boat here. So when you are making the jump to freelancing full time, you have to make sure that the ship is close enough to the dock where you can jump off right if you don't have to wait until everything is perfectly tied down and whatnot because that will probably never happen. But as long as the ship is close enough to the dock where you think you can make a jump and somewhat safely make it across that's where you that's where you want to be. So how do you know where you are with freelancing and in how do you know when you can make that for me it was I was actually just working co ops at the time making minimum wage or or 20 bucks an hour and I was making much more money in as like a freelancer in the part time. So I think like when you feel like you've got some really good stuff lined up, like when you feel like you are feeling a little bit overwhelmed with your freelancing, that means that you're doing a good job. And as soon as you go full time, there's like most, I think most people don't want to work with a freelancer who has another job, because your lower priority, and as soon as you open yourself up to I'm now full time, you can have calls during the day, you can send emails at any given time, then you'll you'll start to go so how much I think like once you've consistently got a couple months of consistent part time freelancing, then I think you're in a good spot. Totally. - -23 -00:05:37,560 --> 00:07:57,180 -Scott Tolinski: Yeah. And to your point about the boat, I love the boat. I also have here as a note that also, you know, know if you can get wet, right? Maybe you're holding your you know, your precious heirloom that can't get wet or holding your baby or something and you're, you're stepping from one boat to the dock, you cannot get wet, you don't want to fall in the water. But let's say the you know, the the real side of that metaphor be you have a family, you have bills, you have a mortgage, you have financial responsibilities, and you don't have a safety net of savings built up to what happens if you don't end up having that, that support. And so in some cases, depending on how many responsibilities you have, you cannot get wet. And you have to make sure does a really close. So you can do that nice little, you know, easy transition. But maybe you're you know, young, you have an apartment, maybe you have enough cash saved up for several months of rent rents cheap, or maybe you're living with your parents, or maybe you just don't have those financial burdens, or you do have a large enough savings backed up that you don't necessarily have to worry about it, maybe you can take the jump a little bit sooner and get out of the dock a little bit quicker with the knowledge that you could get wet fallen and have to go crawling back to a job just to make your next bill. So by all means there is that aspect of things too, you can, you can make a riskier jump. But again, it's all risk versus reward. And whether or not you know that you can do that, I've always sort of erred on the side of caution for most things like that. And I never made the jump full Lance or full time, full length. That's why they should call it full time freelance myself full, full stack freelance now, but I never made that jump myself. But ever since quitting my job and running a business full time, you have to know that there is these tremendous peaks and valleys of income versus non income where you have to balance it out. Unlike a job where you have a paycheck coming in, there's a lot of different responsibilities that come into play. When you're supporting yourself rather than working for a company who's paying you to do that, it can get real tough. So just keep in mind that you have all of those things as well. - -24 -00:07:57,210 --> 00:08:31,520 -Wes Bos: One more thing I've got to add there. And sometimes what you can do is you can either ask your like your employer will maybe say like, Look, can we take three days a week of your time, or i've i've found many clients in the past who who want just like they want to reserve me for a couple days a week. And those are great clients because then you're still are freelancing, but you have that sort of like safety net. And for those clients, you offer a reduced rate, because they guarantee you that money is sometimes called a retainer, or just like a I don't know, like they call it just a contractor that's on for a couple days a week - -25 -00:08:31,559 --> 00:09:32,899 -Scott Tolinski: and it depends on what your relationship is like with that company too. I worked in agencies where we had people go out on their own to do freelance stuff and immediately were picking up work from their former agency and it's almost like all of a sudden you're getting paid more to do the same work with the same company but in the same regard you're taking on all that risk and all that you know they're only booking you for X amount of hours rather than a full study time paycheck. So if your relationships really good, and you could say hey, listen, I'm thinking about going full time freelance. I really want to do this. If you have any work please you know that you want to shoot out to me and if your relationships really good, you could get a lot of great work from that agency. Okay, so next question is from our good good listener. good listener of Flexi source Rex. What's your status on dinosaurs? They just have a little hole holes in the ears like birds. I guess. That's they don't they don't have yours. Yeah, our Derrick Dennis for being good hearers listeners - -26 -00:09:32,940 --> 00:09:39,360 -Wes Bos: do dyno dinosaurs have good listeners years of years. They do have a year - -27 -00:09:39,480 --> 00:09:43,020 -Scott Tolinski: and a half years do they have good ears? Do they have capable ears? - -28 -00:09:43,950 --> 00:09:48,919 -Wes Bos: Oh yeah, this have holes in the Yeah, okay, that sucks. Yeah, probably not great. Well, but not great. - -29 -00:09:49,590 --> 00:11:31,049 -Scott Tolinski: It's okay, they're down is there so flex the source rez Lex a source of Rex asks how much Flexbox is too much Flexbox is that a bad idea too. To use a dozen flex boxes for viewport filling application, or AR. And they added that raring I mean, I had to embellish a little bit, they were a rar. And there's a lot of our so like, I would go for it. So okay, what's the source Rex? How many flex boxes, I don't think there's too many flex boxes. If you've ever used React Native, you'll know that literally everything in layout for React Native is a flex container. So what I mean, that's like, the only way of doing layout really is the flex boxing. So I am of the mind that as long as it's not extraneous, I like a flex within a flex and the flex as long as it's not extraneous or unnecessary, then I don't think there's too much. That's the whole. The whole key to that statement, though, is like if you could be doing this with like a margin left auto or something stupid, that's not a flex, and then a whole bunch of additional properties omits like just smart CSS. So I don't think there's too much Flexbox unless you're throwing in Flexbox. In places where it's not appropriate to do the same thing. I don't think it's going to cause you problems, I use Flexbox, all the time, within flex within a flex to do containers, I usually end up going straight to grid, but grid and then Flexbox, where it's appropriate. But again, yeah, as long as you understand, like more or less complex CSS properties that could maybe get you there without doing it a text align and whatever, then, you know, go for it flex it up flex source. - -30 -00:11:31,260 --> 00:11:36,840 -Wes Bos: Yeah, I think this question could probably be said for like how much Flexbox is too much Flexbox. And how much grid is too much grid? How - -31 -00:11:36,840 --> 00:11:38,460 -Scott Tolinski: many cookies are too many cookies? - -32 -00:11:38,549 --> 00:13:11,370 -Wes Bos: Well, there's an answer to this. But I think like the Flexbox, and grid are the layout tools of the web. So it's not bad to have them nested as far as the eye can see, like a, like any one of my websites might have 20 3040 different Flexbox and grid layouts on the page, because that is pretty much the only two ways to lay things out these days, if you're not using floats, and whatnot. So I think the only thing that you need to be careful about is things that trigger like reflow or rerender on the page. And because Flexbox is flexible, the whole like content changing, like if you have an image in a Flexbox, and then that image loads, then that changes the width of the flex container. And then that will then trigger a change on the other items. And sometimes that can trigger two or three paint repaints. That can be a possible issue. But in my experience, that's that's mostly just people saying like, oh, what about this problem with Flexbox, it's a major issue. And it's a bit of a chicken in the egg thing because like Flexbox can't solve that ahead of time if it doesn't know how big your content is. So you can solve that by by setting widths and heights on your images if you like but I wouldn't sweat it all that much. So yeah, go nuts on it, go use it as much as you want. And also, I think maybe just like understanding all the ins and outs about the line like Scott said alignment properties of Flexbox. So where you're you're nesting Flexbox is sometimes you can get away with just proper use use meant use. Use min - -33 -00:13:12,000 --> 00:13:13,350 -Scott Tolinski: min, even though they're not a word - -34 -00:13:13,350 --> 00:14:54,840 -Wes Bos: proper use min of the Align and justify properties in Flexbox. Totally. Next question we have here is from definitely not Justin Trudeau, can you explain the potential benefits of resetting CSS whether it's necessary? And in any circumstances? Where should you use the approach? So this is talking about those things normalized CSS, CSS reset, where before you write any CSS, you apply some sort of like base CSS that will bring your browser's all in accordance. And so like, what's what is the benefit of that? Well, all of the browser's start off on sort of unlike uneven playing field, some of the fonts are a little bit bigger than others, some of the padding is a little bit different than others. So if you just start coding a website, you're all starting from an uneven foundation. So what a CSS reset or CSS normalized will do. And the difference between the two is that the reset will bring everything back to zero, like all the font size and whatnot, and then you have to go back, whereas a normalize will just make sure that all the browser's are starting from the same spot and leave those browser defaults. And so I personally use normalize. I know most developers use normalized now, just because those are helpful to have all of the heading tags and all the bold things set for you. Totally. Yeah, so I use them every single project. It's not an old thing they're continually updated for in consistencies in newer things like Flexbox, and video players and whatnot. So you should always use one in my opinion, and I don't see any downside. And it's also not this is a question I get a lot is you don't have to update it. People are like what happens when a new normalized comes out? And I personally just don't update it, because then you're like, What if something changes, and then you have to change your code? - -35 -00:14:55,169 --> 00:15:34,799 -Scott Tolinski: Yeah, at the end of resolvers. As long as your CSS looks good, right. There's no reason to update You wrote your CSS to work with one particular version. And again, I, you know, you you hit on everything there, I don't have anything to add to that. I use normalize myself. That's that is exactly why you would use reset. It's always the worst when you start a project and you haven't had reset and normalize that and then adding on the body and all sorts of funny stuff. You're like, yeah, I gotta, I gotta add a reset or normalize here. Okay, next question is from Steven Duvall. And Steven says, first off, I love the show. You guys are amazing. - -36 -00:15:34,799 --> 00:15:35,970 -Unknown: Thank you. - -37 -00:15:35,970 --> 00:16:59,340 -Scott Tolinski: Thank you. Thanks, Steven. I would love to hear an episode or a potluck segment on your shell, not shell fish, but shell forward slash fish or slash z sh configs. maybe explain the little tweaks you've made and why you've chosen to use the show you do keep up the great work. Can't wait for the episodes to come. Thank you, Steven, I use z sh. Now I was using fish for a long time. And let me explain why I went I went from bash to Z, sh to fish back to z sh. And this is over the course of you know, 15 years. So it's not like these things happen quickly. But I've been using fish for the past like five or six years. And I recently moved back to z sh, because I was getting tired of the differences between standard bash and standard z sh and fish fish has like very opinionated ways that wants you to do things, which leads to not really allowing you to copy and paste a lot of scripts from different places. If you find a script, and you paste it into fish, fish is going to complain a lot about the different syntax usage. So it's not a one to one the exact same with bash and Z. Sh you never have to worry about that because they're all the same, right? Or at least the things that you're copying and pasting typically from sites are going to work. - -38 -00:16:59,370 --> 00:17:16,050 -Wes Bos: Yeah, there's a couple little gotchas here. There it to put quotes in a certain spot, but nothing that's ever been been too frustrating. And also like, you can still run bash scripts, if it's like a separate like.sh file, you just have to put the little bin bash thing at the top and then or run it as a bash and - -39 -00:17:16,140 --> 00:18:45,150 -Scott Tolinski: then like fish, where most of the things you paste in and try to go with or even whatever type in from a blog post, you're gonna have to augment. And you're gonna have to understand well, how you're augmenting and why that's it, there were a lot of really great features I liked about fish, which was like the history and the auto completion stuff, which I have added in some capacity to Z, sh. Now, I don't like it as much still, but it's definitely pretty good. I use I turn to version three, which is confusing in itself. And it's awesome. And it worked really well with some of the cool things that csh does. And I get that nice history. Let me pull up my z sh config right now just to make sure I'm not missing any of the plugins or anything I'm using. I'm using the out of the box Robbie Russell theme. And let's see if I'm using any plugins in particular, I'm not using a ton of stuff. I wanted to get this to be feature parity with fish I just haven't had the time. The only thing I have in here in terms of plugins as I have a git plugin, I have z sh hyphen auto suggestions, which gets me close ish to the fish functionality. And then I have a VS code plug in. And then other than that, it's just aliases and things that we talked about in our aliases episode. So now I don't really have a ton of modifications to z sh outside of the OH MY csh themes that you know, use the Robbie Russell one and those plugins, but that's it for me. - -40 -00:18:45,450 --> 00:19:41,520 -Wes Bos: Yeah, I've I use Zed sh z sh, along with Oh, my z sh, which is the bass I have a whole course. Let me plug that here I get command line power user.com. It's a free course basically shows you how to get like it set up on your computer is that sh themes, the actual terminal, I use I turned to in that one, but I use hyper now. It'll works the same way regardless of which terminal you use. And then I have a couple plugins with there. So I have Git node NPM brew and what those plugins will do is they'll give you better tabs suggestions. So if you hit node NPM tab, it will just list out what the possible options are. Same with Git often I'll forget the name of what something is and just hitting tab will suggest it for me and you can sort of tab through them and select which one you want. I have a couple extract is a good one for for compressing and extracting. - -41 -00:19:41,969 --> 00:19:49,230 -Scott Tolinski: You don't have the tar Cz Cz Oh man. I had it memorized and down there on the spot I can't see - -42 -00:19:49,230 --> 00:19:52,410 -Wes Bos: that's why I don't have it memorized so that I can never remember it. - -43 -00:19:52,529 --> 00:19:56,280 -Scott Tolinski: Huh z VM now, man this is gonna kill me now. - -44 -00:19:56,300 --> 00:20:57,030 -Wes Bos: Yeah, it's I never could never remember though. So I think They'll have that. And then the two big ones that I highly recommend everybody suggest is set sh syntax highlighting, which will give you if you type a command like get space, it'll turn it green. And if you like spell something that's not a command, it will turn old and read this. So that tells you if what you're about to type is broken or not, before you've actually run it. It says right here fist show like syntax highlighting feature parody here trying to get to it. That's Yeah, that was the best. And I also use that sh auto suggestions which, if you type something, it will, it'll start to suggest what the last thing that you typed. So if I just type git, and then it will just like in like very faint letters, it'll, it'll say push, because that's the last like one that I use. So big fan of that. And also z. z is the thing that I used to jump to frequent directories frequent and recent, I use that like, crazy, I recommend that's in my course as well. If anyone wants to get better at the command line, - -45 -00:20:57,110 --> 00:20:59,160 -Scott Tolinski: it's just the letter z or - -46 -00:20:59,190 --> 00:21:00,000 -Wes Bos: z yet. - -47 -00:21:00,110 --> 00:21:06,750 -Scott Tolinski: Okay? So Americans out there when wet says that you do not type z Ed, you just type the letter Z. - -48 -00:21:09,060 --> 00:21:34,710 -Wes Bos: Yeah, just the the Zed keyboard type, Zed key on your keyboard said key past that. That's, that's really all I use. Like, I've got a couple little, I'm just looking here a little like, we talked about it on the past a past episode about what they are, I use my cobalt to theme there. But past that, no, no, nothing, nothing else. It's pretty out of the box. I'm surprised at how much is just good out of the box. - -49 -00:21:34,740 --> 00:21:46,050 -Scott Tolinski: It's great. It's been great for so long. And I think the next the next version of Mac OS, Catalina wine mixer, it's going to have the csh just the default shell. - -50 -00:21:46,050 --> 00:21:47,790 -Wes Bos: That's pretty sweet. Sweet. - -51 -00:21:47,790 --> 00:23:04,950 -Scott Tolinski: So those of you who aren't under now you're going to be on it soon. I'm gonna tell you that. And let me tell you what also you'll be on, you'll be on Netlify because it is the easiest way to host your site. Absolutely anywhere. People always tell us this, I can't believe it took me this long to try out Netlify after Scott was talking about it so positively, I thought it must have been an ad. No, it's done every day absolutely love Netlify it is the perfect place to host any front end code. And let me tell you, the experience cannot be any better. You most likely you got your code and repo already. You just log in, you select the repo, you type in your build command, or even better. Netlify recognizes the what kind of site it is and has the build command in there for you already, which is even easier. You click go and you automatically get insane features like a CDN, and you get an SSL and you get continuous deployment without having to do a darn thing. It is so stinking cool. And there is just non stop addition to new features being added to Netlify every single day. So what we want you to do is head to netlify.com forward slash syntax and sign up, let them know where you came and just tweet them out and say, Hey, we heard about Netlify syntax, we love it. So so much. So thank you to Netlify for sponsoring, - -52 -00:23:05,100 --> 00:23:24,870 -Wes Bos: when you tell our sponsors where you come from, they love that they really do. Yes, we've just had a whole bunch of calls. We just had a bunch of calls with sponsors for next year. And they're like, man, your your audience is crazy. They always tell us they come and they want to make sure you get credit for it and everything like that. That's awesome. We love that we absolutely do. Thank - -53 -00:23:24,870 --> 00:23:45,840 -Scott Tolinski: you so much for that. All right. Next up, we have a question from agno, which is I always get confused on when and how to use dot bind method. Any pointers on when I should use that bind? in what situations? Wes you have a good amount of notes. Do you just want to rock through this one? You wrote down a decent amount here? - -54 -00:23:45,930 --> 00:26:59,820 -Wes Bos: Sure. My answer here is methods or functions are often bound to an object. So when you are inside of like a like a method, like let's say like dot log log is a method that lives on side of console console dot log. And in order for console dot log to work, in order for the log method to work, it needs to know about what it was bound to, which in this case is console. And the way that it references that is by using the this keyword. Now, sometimes you need to move a function into its own function or if you you need to change how it works. But you still need it to be bound to that that object or you need if you need a method to be bound to something totally different. You just want to use that same method but change the context in which this is equal to and that's so that's the first way that you can use bind is is changing the the context in which it is run under. And a little A good example is if you want to make your own console log function, if you just say like const ello, double g Snoop d, o double G, if you open up your terminal right now it's a constant g g is equal to console dot log, and don't call it but just reference it. So now you have a method called l o GG. And after you try to run that actually hope that didn't change this, oh, they fixed it. Okay, this seems to be the case where you couldn't bind console dot log to its own function. And if that was the case, you'd have to do console dot log dot bind console, and you'd have to change, make sure that it is bound to that grill function. They've changed that since then. So that's not a good example. So that's, that's the first one here. And the one that you're you're you're asking about here, which is, I often see in react in react like an unclick, something like that, if you want to pass an argument, on click, there's, there's two options that we have, because you can't call the function on click like you do in vanilla JavaScript, you just give it a reference to a function. But if that function needs to pass like an ID, or any other arguments, you can't really do that, right. So your options are, you can either say like on click equals send user dot bind. And then the the first argument to dot bind is the context of this, most people will just say dot null, because it doesn't matter in react and react world. And then the subsequent arguments are when it gets called, these are the arguments that should be passed. And then you are returned a new function that has sort of like, sort of batteries included arguments, now you have this brand new function that already has the arguments built into it. And then when you call it, it will know, it will know what arguments to run out. So that's one option. And then the other way that is pretty common in react world now is just to use an arrow function in line, where you just say on click equals, and then you do that little arrow function, and then you call the function with the arguments that you want. I prefer that way, just because it looks a little cleaner. But in both cases, you are creating a brand new function, which is is what you're doing. Yeah. Makes sense. Yeah. Fantastic. - -55 -00:27:01,710 --> 00:27:07,110 -All right. Next question we have from Brian. And he said pronounced, Brian. - -56 -00:27:07,140 --> 00:27:09,930 -Scott Tolinski: Thank you, Brian. Thank you so much. - -57 -00:27:10,860 --> 00:27:35,820 -Wes Bos: What are your suggestions for handing off client sites for freelance work, I don't take on many contracts, I have another full time jobs, but I'll take on one here or there during the summer to supplement a little bit. Quite honestly, I love that I love that. That's what you can do as a default as you can take on a little extra work make a little bit of beer money, or, or Disneyland money or whatever it is that you're spending vape money, whatever it is, you're spending your money on, you can - -58 -00:27:36,720 --> 00:27:40,830 -Scott Tolinski: hopefully not vape money at this point. Okay, big thing going on. - -59 -00:27:42,420 --> 00:29:22,950 -Wes Bos: Anyways, I'm finding it difficult to make a clean handoff when the project is finished, the contractual requirements are met. And like anything, there are always tweaks to be made. I handle some minor deployment issues without billing, but I struggle where to draw the line or the suggestions that you have? That's a great question. Because like when you're done, you're not always done. There's always stuff that comes back. And like Who are they going to ask? Well, the person that made it and the person that we paid to actually do it? So how do you do that, usually, what I'll do in this case is I will find somebody that I trust, and say, I'm handing it off to this person right now you can deal with them for anything going forward, and know that like you have to pay them right. And if it is, if it is things like usually what I'll say is, I will cover bugs by me. But I will not cover bugs that are that are introduced because of a third party, whether that's an upgraded CMS, whether that's an API that's being deprecated, like a good examples, anytime you work with Twitter API will change things on your website might break or our new stripe API needs to be implemented. So anything that is out of my control, because they change, you have to you have to do somebody else, those bugs are mine. Hopefully, you don't have to do a whole lot, but but then set them up with somebody else. Because more often than not, they just rather go with somebody entirely going forward. So that's how I would do it, I would make myself available to the person that you pass it off to. And then finding someone to pass it off to is a whole nother problem. Because like finding a good reputable Freelancer who knows their stuff is hard. And that's why I always tell people like honestly, if you're a good developer, have good communication skills, you'll do super, super well as a freelancer. Yeah, - -60 -00:29:22,950 --> 00:29:32,310 -Scott Tolinski: there are there's a lot of things here, when you're handing it off to the client. And some people bill, they'll host it themselves. They'll have even like, - -61 -00:29:32,850 --> 00:29:35,010 -Unknown: don't do that, yeah, dedicated virtual and - -62 -00:29:35,010 --> 00:30:08,460 -Scott Tolinski: they'll they'll host all of their freelance client sites, and they'll pay them for hosting. And you say don't do that. But that could be a really good income stream, if you don't mind managing those servers. And it's easy for you. Because the cost of running a virtual private server is like nothing and if you charge, you know, eight bucks a month for a few clients to host or something that's a nice little steady income stream. an addition to that, but again, it's more trouble than it might be worth I've never done it personally, I've never tried them and you've done it. Okay, you can just ignore everything I'm saying because No, I haven't, I haven't done it personally. - -63 -00:30:08,670 --> 00:30:52,410 -Wes Bos: Well, some people like to do that. But honestly, when you like I have one client from like, 10 years ago, I bought the domain for them. And I every year to like, renew it or figure out how to transfer it and pay for their hosting. And, and when their email goes down, they email me and like, I'm like, your emails with Google. And but they're like, they don't understand that. And then like something changes like WordPress, they installed 400 WordPress plugins, and it's broken now. And like, you're the point of contact, right? Whereas like, that's why I like GoDaddy for that kind of thing. Like you hate GoDaddy all you want, but put your crappy clients on them, because they GoDaddy will pick up the phone and talk to non technical people all day long about those kinds of problems. Yeah. And - -64 -00:30:52,860 --> 00:32:57,450 -Scott Tolinski: like you mentioned, like, if you break something, like if the code was broken from, then you're responsible to fix that stuff, if the user comes in and breaks things, I think it's a, it's important to let your client know, obviously, that, here's what my expectations for this relationship are, I'm passing it off to you. And unless there's an emergency that I caused, then I won't be with able like to pick it up and fix it for you within you know, 48, whatever, 24 hours. And if you broke it yourself, then I you know, I'm certainly not going to be around to do that. So, as long as those expectations are met, that you know, maybe you can, like you mentioned, pass it off to another Freelancer who can be there to support it. But in reality, I think it's just making those expectations clear. Because so many times, you'll get a client who does that whole thing, I broke it, fix it. For me, it's Sunday at 10 o'clock, drop what you're doing and fix it for you. So um, be careful with what you promise, I found this aspect of things to be both hard and easy, depending on how you set the expectations between you and your client of what is you know, what needs to be done. And if they say, Hey, I'm not exactly comfortable taking off the life jacket to keep the boat metaphors going. Exactly, you know, I'm not exactly comfortable taking off the life jacket that is of having a developer on call. What else can you do for me to make it more extra robust, maybe you can pick up some extra hours at the end of a project, they're just really, really adding in some robustness to this library, if it needs a code base, whatever. So sanity is a, it's going to be that that company and experience that's going to be extra robust for you. And it's unlike your own code, your own back end, it's not gonna break because what Sanity is, it's it's a back end for the front end code that you are writing. And it is a really super cool back end. So I know Wes, you have a lot of interesting things to talk about. So you want to pick this one up with Sanity? - -65 -00:32:57,690 --> 00:35:17,190 -Wes Bos: Yeah, so I was just going through some of the features on Sanity the other day. And one kind of thing I want to focus on. First of all, let me tell you real quickly, it's a it's a structure content, CMS. So you can code up your JavaScript file and then deploy that or run your your Sanity command. And it will create based on the fields that you want, and the types that you want the relationships that you want, it'll create sort of a back end, that you can then hit with your API and pull that into Gatsby or, or nuxt, or next, or whatever it is that you're working with. And the thing that I want to focus on is this this asset pipeline, the image pipeline that they have. So if you upload an image to like a typical like a WordPress or something like that, it will try to resize it into the sizes that you've preset. But with sanity, what's cool about that is, when you upload an image, of course, you can get all the different sizes that you want. You can also get the the base 64 version, so you can blur it up, like kind of like how Gatsby does that. But the really cool thing is that when you upload the image, you can draw a little oval around the thing that is the focus of the photo. And then when all of the different images are cropped, then they will all crop them based on that being the center of it. And I remember clients when I had WordPress people, like how do I get it to stop cropping people's faces out and I was like, oh, there's no like, thumbnail size crop, like you could do top left, bottom right top right, there's no like face crop right. And this is the case where you can just draw a quick little oval around the thing of the image and then all of your different sizes that are generated will all be centered on that one little piece that you have. So whether that's a face or whether that's like a phone or a piece of your product, it will look good in all of the different sizes. And that just comes with Sanity. Right It's not a plugin or anything like that that you need to have that comes built into Saturday which is pretty cool. You get all the different sizes all the different compression they need. So check it out. Sanity dot o for its slash syntax. And you're going to get double your free tier that normally that you normally get go and go to that also they have a whole bunch of examples using it with Gatsby and next and Knox and that list is growing with all the different integrations that they have. So check it out. - -66 -00:35:17,820 --> 00:35:28,110 -Scott Tolinski: Cool. Okay, so this next question is from Brett jolin. ski. Hey, Julian ski Tolan ski. What's up my homie? bred rat Delinski - -67 -00:35:28,110 --> 00:35:32,210 -Wes Bos: Scott Tolinksi. I think it's a joke. Oh, or real? - -68 -00:35:32,550 --> 00:35:33,600 -Scott Tolinski: It's maybe a joke. - -69 -00:35:33,710 --> 00:35:36,920 -Wes Bos: Let's look it up. Brad szalinski Are you a real person? - -70 -00:35:37,260 --> 00:35:40,610 -Scott Tolinski: Are you Ah, is a joke. brat. - -71 -00:35:40,670 --> 00:35:42,650 -Wes Bos: I think most people give us fake rabbit. - -72 -00:35:42,690 --> 00:36:37,320 -Scott Tolinski: This is a joke. A people who are always goofing I don't think it's a real person. This man, people are always goofing with us without these names here. I like it. I like it one bit. Yeah, I don't think Brad is a name at all. I just thought it was maybe some Polish name that I wasn't familiar with. Okay. Okay, Brian, whoever you are. I get it. This is a question for Wes. Oh, okay. Thank you a double dosage. Brad. You really hammering me here. I live in West or Northwest. I live in Central New York. And every time I go onto the highway heading north or south, I see several Ontario license plates. Where are y'all going all the time? I don't think you're from New York brat. You saying y'all type in y'all in here? Is there a secret Canadian spot down here? Florida comma cheap beer. COMM This is weird question, Brad. - -73 -00:36:37,380 --> 00:36:40,400 -Wes Bos: No, that's sorry. That's, that's my answer. I'm starting to put your - -74 -00:36:40,800 --> 00:36:43,110 -Unknown: putting your questions and the answers man this - -75 -00:36:43,110 --> 00:37:57,270 -Wes Bos: question. Sorry to type Wes in front of you. Um, well, Brad, if I have a sweet Canadian spot, I'm certainly not going to tell you after you just got there. But yes, US Canadians do like to go to the States. Because of the first of all target. We had target. liquorice be a little we have Lacroix's now but they're they're unaffordable to most Canadians. So we get the What do we go down there for we go there down there for target the Lacroix's we often will go to Myrtle Beach or Florida. The beer is much cheaper down there. So a lot of people just go over for a couple days, after you've been there for 48 hours, you can take home $700 worth of goods and get just good. Pretty awesome. And you can't bring any services back. Often we'll go for less than 24 hours. And as long as you claim it to the border guard, we've found that about half the time they make you pay duty so you can bring as much as you want. You just have to be very clear about how much you're bringing back and honest and they will sometimes they'll make you pay duty and sometimes they won't. So that's where we're going. We're going down to take all of the the good things about the states without actually having to live Yeah, - -76 -00:37:57,270 --> 00:38:08,040 -Scott Tolinski: yeah, you get to go back piano with your health care and your Yeah, polite manners and your thank yous and your stories and all those things that you have in Canada, - -77 -00:38:08,040 --> 00:38:20,340 -Wes Bos: people go down there for CAT scans all the time. Because apparently for a couple hundred bucks, you can go get a CAT scan, and the line up in Canada is often months long. It's weird. Yeah. Okay, - -78 -00:38:20,340 --> 00:39:07,590 -Scott Tolinski: next question from Matthew M. Hey, Wes. And Scott, each time I reopen an old project, I lose so much time with NPM dependency being outdated, and it drives me mad. I'm starting to dislike NPM and everything around it. But is it only NPM? How do other languages like PHP, Python or go handle this mess of dependencies? Are we better today than yesterday? And am I complaining about nothing? Yeah. So the answer to this is lock files, lock files, lock down the versions to be exactly what you want to be. So that way, when you run npm install, it just looks at your lock file and get grabs the correct versions that you're locked into lock files became a thing in NPM. And oh, I don't know what version but a couple years ago, yeah, - -79 -00:39:07,590 --> 00:39:09,840 -Wes Bos: a year and a half ago. Yeah, - -80 -00:39:09,860 --> 00:40:34,260 -Scott Tolinski: yarn added lock files, which have been a thing in other languages for a long time. So yarn, add lock files, and then because of that, NPM added lock files just about really soon after that. And I'm pretty sure I'm right on that timeline. I could be wrong. So shout out. Yeah, I'm wrong about that. But really what the lock file does, like I mentioned it keeps your versions correct but also if your application is working, right if that's not the problem they have the problem is is that all of a sudden your your dependencies themselves, they're now have different versions or whatever. There's no reason you have to update that stuff unless there's security vulnerabilities or anything. Now I personally run yarn upgrade interactive all the time, like every other week, just because when you upgrade constantly and consistently becomes a tiny little, you know, tiny little one hour project rather than a, you know 10 hour long slog of You know, having to fix a billion different things with your, you know, tests and all that stuff. So I personally am constantly updating my stuff. But if it's a project I haven't touched for a long time, I don't, I don't even bother updating the packages Unless, of course, there's security vulnerabilities that I have to worry about. Because you don't have to upgrade this stuff. As long as it works a work then it should work. Now, as long as your lock files there and dependencies are all all lower at that I don't necessarily have this issue. I don't necessarily understand exactly what the issue is. Am I missing something here that you were reading into this? Yeah, I - -81 -00:40:34,260 --> 00:40:50,880 -Wes Bos: think I think part of it is around like you, you leave a project for a month, and you come back and you npm install? And it's like, well, there's 40, deprecated packages and 800 security vulnerabilities. And if you see that it's hard to just ignore it be like, well, I'm happy with like, what's working for me right now. - -82 -00:40:51,030 --> 00:40:53,940 -Scott Tolinski: But if it's, I guess if it's vulnerabilities, it's one thing, but - -83 -00:40:54,600 --> 00:42:19,710 -Wes Bos: yeah, but that's the other thing is that these vulnerabilities if every time I have a vulnerability, which is every single package every day, I look into it, and it's like, oh, that's actually not affecting me at all. And that's a huge frustration for me and all my courses as well, because you you ship a course and three days later, this, the pace at which JavaScript is moving right now is incredible. And that's great for progress in the industry and things being new features and, and things being better than they used to be. But that's it's a downside to people who are like, Oh, just let me do my work. I can't like, I can't hold on. I don't think that PHP, Python go. I don't think they're as bad as it because of, well, first of all, like JavaScript has no standard lib. So everybody is reaching for all these utility packages, which are constantly being updated. So that's, that's a huge, huge thing right there. And also, NPM is very much around small things that do one thing well, so that's the reason why we have so many packages when you install something. So are you complaining about it? Yeah. It's frustrating to everybody. I think you're not complaining about nothing. But also it's just like, I think that's part of our I think it's currently just part of being a JavaScript developer. And it is a reason why people don't like JavaScript, and they move to other languages, because it's, it's all thrashing way too quickly. So yeah, I think just either just learn to deal with it. Or like, what could I do is I just YOLO update, were like, dude, I - -84 -00:42:19,710 --> 00:42:21,060 -Scott Tolinski: Yo, yeah. Oh, man, we - -85 -00:42:21,060 --> 00:42:29,880 -Wes Bos: should make like a like a bash command or something just called YOLO update, where you just blow it away. Who cares? Major versions, minor versions, update everything? - -86 -00:42:29,910 --> 00:43:56,340 -Scott Tolinski: Well, okay, so this is what I do. I use yarn personally, just because I like it. And I run yarn, upgrade hyphen, interactive, hyphen, hyphen, latest, once a week, and now there's some packages like date FNS, I've been putting off updating to the latest version, because I've heard there are, I know that there are breaking changes based on sem bear. But I've heard there are modifications that go beyond something I have to I actually have to spend some time diving into seeing what those are. No, I haven't looked into that. But to be honest, if you run your update stuff often enough, and you YOLO update to the latest versions, and you have good tests, which I used, and then testings with Cypress, I have react testing library unit test, as long as you have good tests, you should be able to quickly determine if things broke, and chances are unless the package maintainer is sort of reckless things aren't going to break insanely amount. And if they are the cool thing about that upgrade interactive is that shows you in red, which are major version changes and which are not which ones you should be expecting. And maybe you want to do some research. Like if there's a huge react router update, which changes the way that react router works entirely or something, you know, you can put that off until you have the time to do it. I really like updating frequently and often just to avoid the big headaches down the line somewhere else. Okay, last question here is from Sean, do you want to take this one? Sorry, I've taken like several in a row I think. - -87 -00:43:56,550 --> 00:44:59,910 -Wes Bos: Yeah, I didn't I fell asleep in a rest area and subconsciously listen to three of your episodes. Which podcast player Do you use Android PC or other? And why? Where do you listen to them in the office on the road at church or PTO meetings? So I listen, I use overcast, which is a only an iOS app. Is it? Big fan of it? Yeah. Yeah, it's it's Marco arment, who's like Apple fanboy, so he just just focuses on iOS. Big fan of that. Why do I use that? Because it's good. I like it. What do I listen to them? I listen to podcasts at the gym. When I'm walking somewhere when I'm driving, and usually as I'm falling asleep I'll listen to a little like a short one like a I listen like planet money the indicator it's usually 1015 minutes Dude, that's a good podcast. Yeah, and it's daily. So in this just enough because I fall asleep and I fall asleep super quick. They usually within 1015 minutes I fall asleep and then you don't wake up at like 3am with like Joe Rogan talking about taking mushrooms in your air sound like that. - -88 -00:45:00,000 --> 00:47:43,950 -Scott Tolinski: Yeah, the indicator I've been really loving. There was an episode on like probiotic recently that was really good. Yeah, that was, yeah, I've been a big fan of the indicator. So I use pocket casts, which has been my podcasting app for a very long time. I've used several on Android. But pocket cast is cross platform and, and browser, it's very good, has a lot of great gesture support. When the new version launched that there was like, I think, a little bit of blowback that they'd like made it to be gesture based. But to be honest, it's been awesome. Once you learn and get used to the little, little niceties about it, it just keeps getting better and better. I love the sort of visual aesthetic of this app. So I'm a huge fan of pocket casts. Again, iOS and Android and lose the power I saw. I don't understand how falling asleep in a breast area correlates to the rest of this question. But I feel like that's kind of dangerous. I don't know about you, at least it is probably in the States. When you're at a rest area. Those aren't necessarily the coolest places to hang out. Okay, where do you listen to them in the office on there, I listened to them. I listen to him in the car. When I dropped my kids off at daycare. Of course, I have to have this where I get to listen to the like planet money indicator in some of my hockey podcast, some of them I don't listen to, but they have a selective bunch of podcasts that I only listened to in the morning when I'm dropping my kids off because they are the ones without the F bombs dropped in them. So we got to make sure you know Yeah, little ears listening. That's it. I listened at pretty high speed. So I don't think Landon's really picking up too much but never always safe than sorry. And then I also listened to them in my office. I have a a gorgo home sitting on my desk here that I can you know Chromecast to I have Do you listen to them while you're coding depends on what it is I listened to a lot of comedy casts and those aren't like ones I really have to pay attention to they're just jokes here and there and whatever they're just a little goofy things and so some of that stuff or I listen to like eight hockey podcasts. So if I've heard like the same storylines on like five or six hockey podcasts by like the seventh or eighth one comes around like if I'd let Can I listen to the Detroit redwings winged wheel podcast while I code? Absolutely. I don't really need to know that much. I'm a Red Wings fan, but I'm not a huge Red Wings fan. So they're like my second team. They're not even my first team and podcast. So I also listened to them in the gym. I put it I have a Bluetooth speaker out there I also have a Google Home out there I will put it on and I think that's I mean I listen to them all over that like if I'm mowing the lawn I have my Sony bluetooth headphones on I'll just pop those on and just listen to them all the time. Oh, no. has no podcast pretty much all the time. 24 seven, and yeah, that's pretty much it. - -89 -00:47:44,280 --> 00:47:45,480 -Wes Bos: Yeah, big fan. - -90 -00:47:45,480 --> 00:47:47,070 -Unknown: All right. - -91 -00:47:47,070 --> 00:49:12,810 -Wes Bos: Let's move into some sick pics. These are the times that we pick things that are sick. I've got a new one. And I've talked about a little bit here and there but I was gifted this Garmin vivoactive three which is like a like a smartwatch, right and I've never in my life worn watches Swami here in there when I was a kid. But I never wear a watch. And someone got it for me as a gift. I was like I'll give it I'll give it a shot. I've always been kind of interested in like, this smartwatch, I thought it was kind of silly to have like, you need another thing right and telling you when you have notifications. So I turn it on. And I love it. It's It's amazing. Like you you getting notifications on your wrist. By the way, I'm super aggressive with notifications, I don't get a lot of notifications on my phone, like, I don't have any Twitter or Facebook notifications, Instagram notifications, all of those are off. So if I do get a notification, it's something that's somewhat important. So it's cool because you can clear the notification, right from your your watch. So you don't want to take the phone out of your pocket. Or, like there's just so many situations where you can clear it, get it off your plate, and you know that that's done. And then the other kind of thing about it is that it's a whole fitness watch. So I take it running, I go to the gym with it. I've been checking my heart rate, it tells you how many stairs you have which having a newborn baby, we do like 40 stairs a day, it's going up and down, up and down, up and down. And the battery lasts like three, three and a half days - -92 -00:49:12,810 --> 00:49:14,970 -Scott Tolinski: on this day. Yeah, that's good. - -93 -00:49:15,030 --> 00:49:31,380 -Wes Bos: And it's it's about half the cost of an Apple Watch. So I'm thinking I'm telling myself if I still like having a smartwatch and like six months or something, I'm probably gonna go and buy Apple watch because I would like to be able to like reply to texts from it. I don't know if that's possible on the Apple Watch or not, but - -94 -00:49:31,560 --> 00:49:37,860 -Scott Tolinski: I'm sure yeah, it was possible on my Android watch from like, seven years ago, so I'm sure Apple's Oh, yeah, - -95 -00:49:38,010 --> 00:49:48,390 -Wes Bos: they're getting out though. Yeah. So I think it's like a nice entry level. Fitness watch. And I like it the Garmin vivoactive three. - -96 -00:49:48,660 --> 00:51:47,370 -Scott Tolinski: Yeah, that's a whole thing for me too. You know, I mentioned like, getting the iPhone was largely because of the camera. But again, it's because there's no Android wearables story like the Android ones are sort of at the mercy of the process. sesar were like apples creating their own processors. So the reason why there's no pixel watch is because everybody knows that the processor is limiting it. And it's only going to be so good. So the last thing that Google one really Yeah, because Apple can create their own. So the the pixel watch can't be any better than the fossil watch that fossil is putting out unless Google gets into the game of creating your own processors. So Ah, yeah, so that's the whole rub. And that's the main reason there, there's a report that came out that there's been a pixel watching development for like the past three or four years, and every time it comes near the time to launch it, they're just like, it's not good enough, like, this is gonna hurt the brand, because it's not, it's not at the same level as the Apple Watch, because it can't be. So that to me, was like a huge thing is that the Apple Watch is so good, that it's really enticed me to be like, Hmm, maybe I can, you know, grin and bear with iOS just to be able to have something like the iOS or the Apple Watch or something. So, yeah, okay, so my sick pic for today is untitled goose game. So I occasionally sick video games on this, in this game is just, and always been a fan of games like this. I was a fan of, there's a game called Katamari damacy, where you roll a thing and you just you pick up things and they slowly get bigger and bigger and bigger is really beautiful game. This game is kind of the same way. It's very chill. It's very, it's very fun. You play as a goose. It has this really minimalist like low color art palette, where it's it's 3d, but it's all very shaded color. It looks illustrated, and you play as a goose. And you really are just causing havoc, you can honk at people in the Hong Kong and you can - -97 -00:51:47,520 --> 00:51:48,060 -Wes Bos: sounds like Canada - -98 -00:51:48,060 --> 00:53:13,530 -Scott Tolinski: case here in this very done for Canadian geese. It's a white goose with with orange feet and uses while around, there's a button that makes you open your wings. And you pick stuff up and you just cause general chaos like I untied a little boy's shoes. And then I stole his glasses while he was bending down to tie your shoes. And then I gave him some other glasses that weren't his and he was pretty upset. So like that is the premise of the game is you're just causing mischief and you have these like little tasks, it'll be like, get the farmer to switch his hat. So you have to find some way to steal the farmers hat and you really get in the mind of a mischief causing goof goose where you're just sitting there and God Hmm, what can I do to get this farmer to take off his hat? And then you still had a lot of fun. I was having a blast with this game. And it's so dang cute that you just you just absolutely love cutting this JFS. This goose. Had a great time there was this old lady coming at me with a broom. And I was just talking at her I was flapping my wings and honking at her and I couldn't do anything. She had a broom, but haha. And like that, to me is with playing video games all about. I had a great time. Not about shooting people, or that kind of stuff. It's about honkin and old lady with the broom and big fan. So this untitled goose game check it out. I'm playing it on the Nintendo Switch. I'm not sure what other platforms it's available for. But a big fan. so shameless plugs, got anything plug. - -99 -00:53:14,129 --> 00:53:22,860 -Wes Bos: I'm going to plug let's do so I unplugged my Instagram. I've been loving Instagram the last like a year or so. - -100 -00:53:23,040 --> 00:53:23,940 -Scott Tolinski: I do love and - -101 -00:53:24,180 --> 00:53:43,260 -Wes Bos: yeah, and it's just a good spot. good spot to to share what's going on in my life. I've been sharing stuff that's like coding, obviously, but a lot more not coding, cooking, fixing random stuff around the house, juicing up my kids, Power Wheels, toys, all kinds of fun stuff like that. - -102 -00:53:43,290 --> 00:53:45,090 -Unknown: I'm loving the power rails toys stuff. - -103 -00:53:45,120 --> 00:54:12,690 -Wes Bos: Yeah. And it's I feel like it's such a it's just an easy way. I don't know if it's because I have so many followers on Twitter that like whenever I post something to Twitter, I have to think about it and have to like get ready for all the idiots that reply with all their stupid replies and everything like that on Twitter or on on Instagram. I just like post anything I want. And like I posted last night it's like I got this new starter jacket that has like Boston Red Sox logo on it. Oh, yeah. And I put on it like - -104 -00:54:12,720 --> 00:54:15,300 -Scott Tolinski: I heard you're a Big Red Sox fan. Your Big Red Sox head. - -105 -00:54:16,050 --> 00:54:27,630 -Wes Bos: As everybody's I put on like don't talk to me about sports. Because I don't actually know anything about it. But and then I said I don't know anything about football and the amount of people that thought I was serious. - -106 -00:54:29,010 --> 00:54:29,850 -Scott Tolinski: That's a good that's a - -107 -00:54:29,879 --> 00:54:37,230 -Wes Bos: good. Yeah, so that's kind of fun. I'm at Wes Bos w e sp OS on Instagram. - -108 -00:54:37,440 --> 00:55:11,220 -Scott Tolinski: Cool, man. I'm gonna plug my latest course which is spelt for beginners. Now if you don't know about spelt, this is the perfect time to check it out. Because we go over all sorts of cool stuff. We build a quiz as animations that works with an API. We talked about what happens when you build a site in spelt, which is different from what happens when you build the site in other platforms. And it is just so dang fast. Fantastic. The little amount of code you have to write to do anything cool in spelt. So check it out at level up tutorials.com forward slash Pro, sign up for the year and save 25% - -109 -00:55:11,220 --> 00:55:12,210 -Unknown: check it out. It's - -110 -00:55:12,210 --> 00:55:18,690 -Scott Tolinski: belt three or I guess it's just called spelt for beginners but it's on spelt three big fan of that one. So check it out. - -111 -00:55:19,140 --> 00:55:25,230 -Wes Bos: All right, thanks so much for tuning in. And we will catch you on Monday. - -112 -00:55:25,560 --> 00:55:26,220 -Unknown: Live it up. - -113 -00:55:26,730 --> 00:55:40,410 -Scott Tolinski: Get you There he is. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax187.srt b/transcripts/Syntax187.srt deleted file mode 100644 index 8b0b7878f..000000000 --- a/transcripts/Syntax187.srt +++ /dev/null @@ -1,72 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Unknown: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. - -2 -00:00:23,610 --> 00:00:24,480 -Totally ski. - -3 -00:00:25,950 --> 00:04:54,380 -Wes Bos: Oh, welcome to syntax in this Monday hasty treat. We are transforming ourselves into the Joe Rogan experience podcast or or whatever, because we're talking about the float tank experience. Wes and I have both done a float tank in the past couple of weeks here. And we just wanted to talk about it because it was a really interesting experience. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado and with me as always is Wes Bos. How you doing Wes? Hey, good. I was gonna do like a hilarious intro like Joe Rogan podcast by night all day. Let's go. I stole your joke. It was written in the in the show notes, so I decided to just yank it for my own. What else is in his? His intro? The one UFC fighter said something hilarious trained by day Joe Rogan podcast by night. Oh, yeah. Anyways, this is gonna be Yeah, like a kind of a different episode. But I people are so interested in this whole flow of flow. Just Just to give you a quick rundown real quick before we hit our sponsor, like a float tank is where you float in salt water in complete darkness, which sounds terrifying. There's supposed to be all these benefits to it. So Scott and I, the good journalists we are we tried it. Yeah, that's exactly why Yes. So this episode is sponsored by one of our sponsors here that has just been so incredibly useful for both myself and Wes, and this is Log Rocket. Now Log Rocket is the exception tracking tool that allows you to see the errors and bugs as they're happening in real time on your site. The cool thing about Log Rocket is they give you this session replay allowing you to see the video of what the user did. So you're not going to be in a sensory deprivation tank, while you're trying to solve these bugs, you're actually going to be able to see things and understand what's going on instead of pitch black. So you'll want to head to Log rocket.com forward slash syntax to get 14 days for free. So check it out. Again, get out of that sensory deprivation tank when it comes to solving your bugs and figure out what's going on. So let's get into it here. You said you mentioned What is it off the bat but I think our experiences might have been even a little bit different in terms of like what it was so do you want to give a rundown of what it was in your experience maybe like the actual physical what was going on there? Yeah, so there are these float centers or float tanks probably you have one within a 20 minute drive from you wherever you are the if popped up all over the place. Anytime I'm driving I see one and there's been one like literally five minute walk down the road from me for a while now and I've always wanted to try it. So I booked up one the other night and went on over and what it is is it's kind of like a spa they do massages and stuff there as well. And you go in and then there's like three different rooms each have a tank in them and then they have like a shower where you have to shower before and after. And then there's some other kind of cool stuff there's like a oxygen bar with kombucha which is pretty cool. So you can hook yourself up to the otu and get going and there's just like it's kind of like a gym as well where you can like do your hair after and things like that so I don't know like what what was yours like how is that different? The place I wouldn't was only floating like that's all they did. They had maybe like 10 rooms or so. And the rooms are like very lodgy with very woodsy very lodgy Oh, shower super nice. And did you have to do the whole like, plug up your ears with the there was like some like wax that you did like yeah, plug up yours with because you can't get the salt water. They gave you some wax earplugs. They got a stick in there. Yeah, it was pretty intense. Yeah, they they say you cannot do them and you're supposed to put some stuff over cuts as well. Yeah, like Vaseline stuff over cuts. Yeah, and that's just because if salt water gets in your ears and dries up and that could be bad. So I have like a lot of like little scrapes and cuts all over me all the time. Yeah, just from breakdancing but because I just bump into things all the time and I'm very pretty clumsy dude. So I had a lot of nicks and cuts and I used the entire thing of Vaseline just basically covering myself and handed to him as a lead. I didn't do any of it and it did not help that much if it still hurt it still hurt. Oh yeah, I was like screw this. I just went in the guys like you don't have to use it if you don't. It's good for you. There's like magnesium and salt and those are good for any little cuts that you have. Well, - -4 -00:04:54,450 --> 00:05:56,730 -I got my fair share and it was a not the best feeling. So I saw A photo of your tank and your tank looked pretty small my tank was like the size of my kitchen. Like my, I really I could, you know, put my arms out in a T pose and like, you know, spread my legs, I would not be able to touch any of the walls. So my my tank was almost large enough. It was I would say my tank was like eight feet vertically by five feet wide. Like I couldn't I couldn't lay horizontally in it. But I had a lot of room and there was points where I felt like I was spinning in a circle. And you just expect to hit the wall at some point. And I didn't I never hit the wall. Yeah, you didn't. Okay, cuz I my take was like, I'm just kind of like ballparking it? Yeah, it was definitely at least eight feet by like six feet wide. But I definitely did bump into the sides every now and then. When I was in it. So you take was how tall was your tank? Because it looked like it might have been shorter. It was five oh, like three and a half feet tall? Oh, yeah, that's - -5 -00:05:56,730 --> 00:06:05,070 -Unknown: kind of creeps me out, man. Yeah, here's a little bit like a coffin. And mine was like, at least like eight feet tall, like vertically. - -6 -00:06:05,340 --> 00:09:24,750 -Wes Bos: Okay, I'm just looking at the website. And they have three tanks here. I think I have I was in the oldest tank. And I think they buy higher tanks. Because of that. Like it. I think the hardest part of getting people to try this stuff is getting over the anxiety of being trapped in a black hole. Because the other thing is this is alternatively called a sensory deprivation tank, where you can't hear anything. You can't see anything. And you're floating in water, which is people's nightmare and a lot of cases. Yeah, yeah, it is. So okay, they talk about the benefits in the benefits are largely in my mind, you know, they could be a lot of things they're going to claim it does a lot, obviously. But in my mind, it seems like the the biggest benefits would be just simply that ability to meditate and totally zone out in that kind of space. And really just shut off your mind a little bit. But not only that, but it's like how many times in your life Have you ever been in a position where your muscles aren't doing things to hold you in a specific spot whether you're laying down even if you're laying on a bed, your muscles are still activated in some way with this float tank, there's so much salt in in the water that I found for like the very first time I've been having all these back problems that like I was able to identify when I'm at rest, which of my muscles are firing and which ways and I found the ability to shut off each muscle individually to the point where I was just sitting there like a dish of mold or something like I was just in total able to shut off every single one of my muscles. So for me that was the biggest benefit of everything was the ability to just like deactivate any sort of tense muscle activation I was having. Yeah, I could feel it. So as soon as I laid down, or maybe about 1015 minutes in you could I could feel like my neck was the biggest one where you could just like feel that it was tense. And I have to like actively focus on relaxing it. Um, it was my lower back for me. Oh, yeah, lower back for me was the one yeah, just never been in a situation where your head can like maybe my pillow is wrong or something like that. I've just never been a situation where you can just like let limp like that. And it was kind of interesting. Totally. There's supposed to be all kinds of like benefits. The reason why I got interested in right now is that I got a watch that tracks your sleep. And it says I have very low deep sleep. So I'm going down all these different roads of like, what are different things you can try to get better sleep. And this was sort of on the list. And I've always wanted to try it at some point. I didn't we talked about it on the podcast like a year ago. So that's kind of why I tried it. And I thought it was pretty neat. So like, you want to go into now like how did you feel like how long did you float for about an hour? hour and a half? Oh, wow. Yeah, right in Yeah, I did it. I did an hour but I think the guy gave me an extra 10 minutes on either side. So I was an hour and 20 minutes for me. Yeah, mine was an hour and a half I got in the tank. And I don't think I had like panic immediately because so the blue lights on the light shut off and all of a sudden it's pitch black. And I didn't necessarily have a problem floating the water in the air and everything is like perfectly 90 degrees. So you're just like best band ever feel comfortable? And yes, yes, you're right. Sure. - -7 -00:09:26,880 --> 00:14:12,750 -I initially, I don't know if I it took me a little bit to shut my brain off in any sort of meaningful way. But I was worried that I was going to have some sort of like panic issue or anything like that I didn't. But I did have a bit of anxiety at the beginning that Oh, you're in here for an hour and a half, like doing nothing. And for those of you who know me at all I like to do things I'm a doer I'm I'm bopping around and moving around. And I haven't found you know, I wasn't able to float and relax the whole time. So what I did is I got it. And I it took me, you know, like really, you know, 1520 minutes to just sort of decompress. And then I found myself okay saying now I'm going to really heavily relax and I would heavily relax for about five minutes and feel very relaxed and then get the urge to like, okay, now I need to like stretch. And since mine was big enough, I was like doing sort of side by sides stretching out my side stretching on my back, like I said, I largely when, because I was having back issues. So I was in there really finding them that muscle and moving around, and I would do that for maybe about 1015 minutes. When I say, you know, you're in here to relax, let's float again. So I'd float, not move and just chill out. And then I just started, like, I'm just like this, I was starting to like trying to figure out what kind of positions I could get into and still float, which is ridiculous. like trying to get into like, in the hour, I was like doing my legs like totally cross like a yoga, Lotus yoga. And then I put my hands up in this different ways. And I'd like to start to roll over. And I was like, seeing what kind of, like balance points I could find. And it was like it was so to me, that was like ultimate relaxation. Because I wasn't thinking about anything, it was like you're floating here and you're you're not exerting energy, but you're trying to find these positions in which you can maintain your balance, which is kind of ridiculous. But I went into it thinking, Okay, I'm going to have some quiet time to just think in plan out my month, week, whatever we're like, really run through course ideas, run through code ideas, run through that kind of thing in my head. And let me tell you, it was impossible to think about any of that stuff. I couldn't think about my computer, I couldn't think about code I tried like eight or nine times to be like, Alright, so let's just the series that you're recording right now, like, what are we going to do about it, and then just couldn't get anywhere. So I found the best use of my time was to again, stretch and to just zone out. And when I was expecting, like the time to be over, and I was maybe like 45 minutes in. So I just realized, okay, just need to chill out and chilled out and floated for the last half an hour and just relaxed. And it was it was very refreshing. And like I said, I think the biggest factor is just how much stress I've been having on my back lately. So I think that was the biggest benefit for me. That's really interesting. So I ended up bringing my phone in so I could take no joke and bring my phone and I was about to like it. I didn't want to judge too hard until I heard the rest of that sentence. But I was I was putting on my judgemental hat right now. Oh, no. So when I went in you so you go in and you close the door on yourself. And then you lay back and the first five minutes had like a couple mini like, oh, maybe I should open the door and just like get my bearings like little panic attacks. And then you just have to learn how to like sorta just give it up and just lay there and that's very hard thing for me to do because I'm very much always on and whatnot. And a lot of people told me like, I'd be too scared because like, I don't want to have these like, like weird thoughts like my thoughts come and eat me, you know, that I didn't didn't have any of that. So first, after the first five minutes, the panic went away. After the first 15 minutes I finally started to just like, just relax and sort of let my head float and then just kind of totally go for it. And then for about I don't know, at about like 40 minutes I didn't do any moving around. I the only thing I changed is my arms floating above my head and then the beside my head. And every time I did that my head hands were like so heavy. They feel like they're 5000 pounds. Did you ever flow with your arms like this? I for those of you who can't see me have my arms back and like you if you're doing the YMCA football. Yeah. Oh, touchdown. Yeah. That's how I spent most of it like that. And then like, I was also getting like sore. Like, like, I felt like I needed to stretch. And I asked the guy about that after. And I was like, does that happen? He's like, no, sounds like you need to do yoga. - -8 -00:14:12,780 --> 00:14:24,180 -Unknown: Yeah, if you're like this and you're feeling sore, it means you're you're activating some sort of muscle because maybe this isn't like comfortable. Like this is a venue to watch more football. Maybe. Celebrate more, man. - -9 -00:14:25,680 --> 00:15:26,640 -Wes Bos: So I out about 40 minutes, I started to like, see like these blue lights. Like I felt like I was dang I felt like I was laying in a tent camping. And I could start to see like blue light and stars, which is really cool. So I was like, Alright, I'm I'm digging this all like I don't have anything like that. Oh, totally into it. So I just kind of like at a certain point. I was like, oh, maybe I shouldn't like this, but I was like No, I'll just like go totally into the blue stars and whatnot. So it's kind of like a really neat experience for about like 10 minutes of just feeling like you're floating and like obviously are floating. But you feel like you're floating in sky. At a certain point, I didn't know if my if my body was underwater or above water. I didn't know if my eyes were open or not like I remembered like, opening and closing them. And I was like, I can't tell the difference. And that was really, really neat. And then that stopped about 1015 minutes. And then yeah, at the end I had like, I don't know how long I had, but I kind of just started to anticipate it being over in the day turn music on when it's over. And they play Enya. Or something like that. - -10 -00:15:26,670 --> 00:15:29,850 -Unknown: Yeah, I had, like, I was like hearing Phantom music. - -11 -00:15:29,940 --> 00:15:31,440 -Oh, yeah, me too. Like, oh, is - -12 -00:15:31,440 --> 00:15:35,820 -there music playing right now? Is there music playing? Wait, is there music? The adult like? - -13 -00:15:35,939 --> 00:20:20,330 -Wes Bos: Yeah, the other thing I have is I have a very slight amount of tinnitus from probably going to hardcore shows when I was a kid. So I have a slight ringing in my ear. I noticed that a couple times and started driving me nuts. Because you have earplugs in and everything is pitch quiet. But then as soon as you start to I started to focus on something else and just on my breathing, and that totally went away. Which I was glad I didn't have to spend an hour there hearing ringing in my ears. So yeah, that was and then after about 15 minutes, I came out I felt amazing, like so relaxed. almost felt like you had like a really nice massage, which was cool. And then you go ahead and you shower off all the salt. There's just so much salt on you. It tastes disgusting. I think it's Epsom salts is what they use. It tastes this you got it in your mouth. Yeah, like I had a scratch and I scratched it was tasted awful. It's not like like oh, salty ocean are like an oyster so that it's like, it tastes like like super bitter. Like you had laundry detergent in your mouth or something they told me like, or no, I sorry, I read that in some blog. And they were saying do not scratch your your eye or anything when you're in there because that would just totally ruin the experience. I was like hyper cognizant of not touching my face in different ways. Yeah, he said to make sure you dry your hair very well, before you go in because if there's one drip of water that drips down your forehead, you're you're toast, huh? Yeah, that would suck. So that was experience. It was really, really neat. I thought it was pretty cool. I felt super relaxed after it had an unreal sleep that night. Like I did it from 9pm to 10pm. So I just walked home and that sounds great. fell asleep and had an awesome sleep. There was the stats were not any different. on my watch, which they have been actually getting better. I'm still trudged trying stuff, but that was pretty neat. So now the question is, would you do it again? Yeah, yeah, I would absolutely do it again. I might augment the experience to hair. But no, I would definitely do it again. I thought it was fantastic. In terms of how much I was able to shut my brain off. I was impressed with myself. I left being like, Oh, I had no idea. I could be that calm for that long. And just like with no assistance whatsoever, just chill out. So yeah, I would absolutely do again. I had a great time. I actually I wouldn't double duty on this. And so I went on that Tuesday, and I had just gotten a massage on Monday with like cupping. So they had like done little cupping on my back and they just like hammered on my back and then I got to do the floating for an hour and a half. And I think between those like those two days, was like really instrumental in bringing my back out of some sort of hellhole that it was in currently. I think I'll do it again. I think I need to give it like two or three more goes to sort of get the full experience. My only apprehension is it's super expensive led like mine was 60 bucks, or 6069 bucks Canadian which is like what let's 65 Canadian and US is 50 bucks us for a float. Well, how much was yours? For a one and a half hour? Probably like 60 bucks us. Okay, we did a Groupon and we had like Groupon bucks because we were returning one so we were just like trying to get rid of the Groupon bucks before they expired. And yeah, that's so we didn't pay real money for it. We paid Oh yeah, that we had paid already at some point and another like a year ago for it so it was allocated money. I the 60 bucks is a lot. Some of them you can get your your if you get it with a massage, you can get your like, what's called your benefits to cover it, but my benefits don't cover that kind of stuff. I pay for my own benefits, right? We don't have that good of a plan. But like you can get a full body massage for 480 Yeah, so that's I don't know I think I'm gonna give it a couple more to see if there's anything revelate revolutionary about it but it's probably something I'll do every now and then yeah, especially if I see like a deal where it's like I think they have like one day a week where it's like 39 bucks for a float maybe I'll try that. Yeah, I I think the massage to me is more beneficial simply just for how goofed up a lot of my spine, neck back and all that stuff fire. But the flow was just I thought it was great and I would definitely do it again. And I wouldn't dissipate that it will happen. We've both had a lot of people telling us that the benefits really come in in the second and third more so than the average one. Also, one thing I just couldn't stop thinking about when I was in there was how much just one of these costs. Like, I want to figure out, like, Can I put one of these in my house? I have no room for maybe put it in my office showing like that - -14 -00:20:20,360 --> 00:20:26,090 -Unknown: you best believe that? Like major athletes have these in their houses? I can imagine that's like a thing. - -15 -00:20:26,429 --> 00:22:54,870 -Wes Bos: Yeah, I bet it's like, I don't know, like 15 grand or something like that. It's it's essentially you're getting a hot tub installed in your house. And then I think there's some extra equipment to filter it with salt in it. Yeah. Cool. Well, that's it. That was a kind of a cool experience. I know. We tweeted it out. And tons of people are say, oh, man, I've been meaning to try that for a long time. And I would highly recommend to go try it out and see what you think about it yourself. We'd love to hear what you what your experiences were on it. Yeah, I was, uh, I was just excited to get to do it. Now. Look forward to training again. So I hope you enjoyed this episode of The joyride funny I don't even listen to the Joe Rogan is that the Joe Rogan podcast or the Joe Rogan experience? Yeah, I I like MMA, and I like Joe Rogan as a commentator, but man, I can't get over on shows like that when they just like spout off some like pseudo psychological bs without like actually understanding it as somebody who's married to a doctor of psychology when people just start like talking out of their butt about stuff they don't know too much about. Yeah, irks me a little bit and hidden that that sort of like the prime place for that sort of thing on that show. But yeah, he he often does have actual doctors on Yeah, but it's definitely has a reputation of like, bro science where he just has this random person on that heats mushrooms or does this crazy things? like yeah, definitely we get we get the joke like every single person who's like, Oh, you do Joe Rogan? Yeah, I know. Yeah, I know. I know. I still let me try it. Yeah, I know for sure. So that was the bro science half hour on syntax FM. Let us know what other things you'd like us to report on as non doctors and we will do it. Yes, absolutely. Actually, I've mentioned this twice. We should get Courtney on here. Talk a little bit a psychology stuff. We should also get Kate on here. We should? I don't know. We still may be on the same show. They could just tell great stories about the two of us. That would be a lot of fun. Yeah, I asked my wife. She thinks that that would be pretty fun to do. Yeah, I think Courtney is dying to tell some ridiculous stories about me. So like, definitely, we should have like an episode with your wife because she probably has a lot to say, just on like psychology in general, and how that can relate to devs. And she's an actual doctor. Yeah. And then we should have like another one that like people submit questions for our wives and tell stories about us. That would be good. - -16 -00:22:54,900 --> 00:22:55,740 -Unknown: That'd be very good. - -17 -00:22:55,740 --> 00:23:04,260 -Wes Bos: Cool. All right. Well, that's I think we're this this hasty is getting a little tasty. So she'll end it here. Thanks so much for tuning in. We'll catch you on Wednesday. Please - -18 -00:23:05,520 --> 00:23:15,300 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax188.srt b/transcripts/Syntax188.srt deleted file mode 100644 index 001dc89f8..000000000 --- a/transcripts/Syntax188.srt +++ /dev/null @@ -1,556 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:06,120 -development treats out there, - -4 -00:00:06,149 --> 00:00:09,000 -strap yourself in and get ready to live ski - -5 -00:00:09,000 --> 00:00:10,530 -and West boss. - -6 -00:00:10,530 --> 00:00:19,170 -Wes Bos: Welcome to syntax. Today we're going to talk about the server side Phantom Phantom. Let me start that again. What's the different word for welcome? - -7 -00:00:19,319 --> 00:00:19,980 -Unknown: Howdy, - -8 -00:00:20,069 --> 00:01:04,730 -Wes Bos: howdy to syntax. This is the episode about server side fundamentals. So we've done a couple episodes. Now we did CSS and HTML fundamentals, we did a show on JavaScript fundamentals. And they have been doing super well in terms of listens and the feedback that we're getting for people. So we've been planning this one for a while it just sort of piecing together what do we think the fundamentals are to understand about the server side. And that's what we're gonna dive into today. A couple quick things. First thing we're sponsored by Sentry and Freshbooks. Sentry is going to do all of your error and bug exception tracking, and Freshbooks is going to do your cloud accounting with me as always is Mr. Scott to Lynskey. How you doing today? Scott? - -9 -00:01:04,760 --> 00:01:23,460 -Scott Tolinski: Doing good, doing really good that they were recording this I we just got news yesterday that Meteor was acquired. And those of you who know that my platform is that Meteor. So I'm really excited because it means that the future of Meteor might be a little bit different than I was anticipating. And who knows, maybe I will stay on the platform for a little bit longer. - -10 -00:01:23,490 --> 00:01:26,310 -Unknown: We'll have to see. But interesting stuff, - -11 -00:01:26,370 --> 00:01:31,020 -Scott Tolinski: exciting stuff. Also, hockey starts today. So I'm sorry about that. - -12 -00:01:31,080 --> 00:01:32,280 -Wes Bos: That sure is exciting. - -13 -00:01:32,340 --> 00:01:41,070 -Scott Tolinski: It's funny that the American on the podcast is excited about hockey starting in the Canadian does not care. It's just a funny little paradox there. That's not a paradox. - -14 -00:01:41,130 --> 00:02:47,039 -Wes Bos: I wish I could get excited about hockey. Honestly. It's so fun. Like, I like those, like getting together with the beers and having some wings with the boys and, and all that, like the actual watching hockey. Same with like, oh, whenever I hang out with my buddies, they all like play FIFA on Oh thing. And I'm just like, this is so boring to me. I don't want to be here. But anyways, so the server side fundamentals, we're gonna attempt to kind of go through them. I asked on Twitter, what people thought, what were the server side fundamentals? This is not going to be an explainer episode. Because we could probably do an entire episode on each one of these things. But more of a high level overview of like, what really are the fundamentals? What are the things that you should know, if you feel like you're trying to dive into just server side? So Scott and I are both full stack devs we're by no means like expert back end developers, but we know our way around our request. And we know how to send a response. And we've deployed many websites in our day. So I think we're pretty qualified to talk about something like - -15 -00:02:47,039 --> 00:02:51,000 -Scott Tolinski: this. Yeah, we got we get back in skills, where matters. And I think that's what's important. - -16 -00:02:51,240 --> 00:03:51,840 -Wes Bos: Totally. So the first thing you need to understand the concepts of server side is that the request and response, essentially, the way that the web works is that somebody types in a URL to your browser, or they make a request from an iPhone app or something like that, that will ping a server. And that is what those are called a request. And that with that request comes a whole bunch of stuff we're going to talk about, sometimes it's cookies, sometimes it's headers, sometimes it's body data, things like that. And then you are on the server, you get that request. And then you can do some work, you know, whatever it is that you need to do, generate templates, find some files, query database, and then you send back a response. And, and with that request and response, there are sort of two main things. The first one is called the HTTP method. There's all these different methods that are get post put delete options. Does that it? I think there's some other weird ones that have never used. - -17 -00:03:51,960 --> 00:03:56,220 -Scott Tolinski: Yeah. never used like any of them. Other than the standards. Yeah. - -18 -00:03:56,520 --> 00:04:51,200 -Wes Bos: Yeah, get post put. And very rarely do I even use delete myself, I just use get posted. Yeah. And now that I use graph qL, I don't even it's Don't even think about Yeah, you don't have to do any of them. Right, you don't have to think about it, you just send your function off, and it takes care of it for you. So like, what these are just different methods that you can use to contact a server, a get request is similar to how you just go visit a website. And then a POST request is similar to how when you submit a form, and if you've ever been in like Chrome or Firefox and you've submitted a form, and they try to refresh that page, and it says, like, Do you wish to resend this data like you get a little pop down? That's because you're on a page that was rendered by a POST request. And by refreshing that you're resending the post request. And that could potentially, I don't know resave it in the database or, or change the page or a lot of times people won't allow that request happened twice. So the thing might break. - -19 -00:04:51,300 --> 00:05:18,240 -Scott Tolinski: Yeah. And so along with any of these methods, the server's going to respond with a status code right in this code that gives you Information about whether or not the request was successful or not. So there is a five. What do you call these like levels? Or numbers? I don't know what they would there's five? Oh, I guess category headings is what they're listed as here. I don't know if that's the official terminology. - -20 -00:05:18,390 --> 00:05:23,760 -Wes Bos: Yeah, I've kind of five categories of responses that you might have, right. And they're basically listed - -21 -00:05:23,910 --> 00:06:08,340 -Scott Tolinski: through a 100 level, a 200, level, a 300 level, a 400 level and a 500. level. And largely, we don't, I don't know how many of these you end up seeing, but the main ones that you see are largely some of the ones that you've probably seen in your own work, for instance, a 200. Rate response is beans, pay a Okay, everything's all good, the big old thumbs up, they should just actually return a thumbs up emoji. That's really what it is. And some of the other ones that you may have seen will be like a 307. is a temporary redirect or a 301. is a moved permanently a permanent redirect? Or I mean, I'm sorry, a 30308. Wait, what's the difference between a 301 and a 3080? - -22 -00:06:08,429 --> 00:06:15,570 -Wes Bos: That's real one is the standard redirect. And you use that for SEO? I've never seen a 308 before it says experimental. - -23 -00:06:15,660 --> 00:07:40,020 -Scott Tolinski: Yeah, I have never seen that either. That's when I saw that. I was like, Oh, am I missing something here. But then there's some of the other ones you you may have encountered, you probably wouldn't have encountered a 308. Because it's experimental, but would be like a 400. Right? A 400 is a bad request didn't work, something failed their 401 would be an unauthorized request to something you might see a 403 is a forbidden hate, you can't you can't be here. And then a 404 is probably the most common. Not for any reason other than you're probably just seeing these jokes a lot. Or you've ran into a page that you googled and clicked on the link, and it's no longer there. And it's a 40444 page not found, or just a simply a not found response, that might be one of the most common. There's also a 500 error, which is internal server error. So I mentioned these number codes 100 through 500. There's a 100 code is an informal A 200 is a success, a 300 is a redirection, a 400 is a client error, and a 500 is a server error. So those are the different classifications. And now you know, if you see a 500 come along, you'll know that there was an error on the server. And likewise, you know what 300 comes back, you'll know that there's something having to do with a redirection, or a 200 comes back. And that's an okay, - -24 -00:07:40,020 --> 00:07:44,700 -Wes Bos: the funniest one that I've run into in real life as a 418. - -25 -00:07:44,790 --> 00:07:46,920 -Scott Tolinski: Did you run into a 418? Yeah, I - -26 -00:07:46,920 --> 00:09:07,380 -Wes Bos: was, well, I was so mad when I did too, because I was working with vimeos API to upload captions, and like you had to upload them in like, I forget, it was a weird way that you had to upload it. And something was broken with the API. And it just kept returning for 18. I'm a teapot. And I was like, no helpful information at all on marine. So like, in clearly the the developer behind that, because you, the developer, are responsible for sending these different codes, depending on on what happens, right? Like, a lot of times people just send 200, okay, and then they say an error happened. And that's not what you should do, you should send like a four, a four, or four or one or 500 or something like that, or you don't, you know, you never send a 500 because if the server falls over, it sends a 500 for you. And you're you're responsible for sending all of these different numbers along with your response to the user. Like if you're rendering out a not found page, you also send the code along so the browser knows what happened. And then there's a teapot one, which is a joke, when it was defined in 1998, as part of April Fool's joke, and it was actually implemented by most surfers. So you can send a 418 I'm a teapot. But I'm sure the developer academia was just having a like just joking. Like, this should never happen. I'm a teapot. And then it actually did happen. It ruined my day. - -27 -00:09:09,000 --> 00:09:10,440 -Unknown: That's hilarious. Yeah, - -28 -00:09:10,440 --> 00:09:17,779 -Scott Tolinski: I've never seen that one in the wild. And that's a it's, it is a funny joke. But at the time that you would get one, it's probably not a funny joke. - -29 -00:09:18,000 --> 00:10:31,549 -Wes Bos: No, no. Next we have like just basically understanding what a server is because you think like a server that's like a computer that's connected to the cloud somewhere, right computer, but and then you hear about, like, whip up a quick node server, or something like that, or a PHP server. But then you also see these things like Apache nginx IIS, which is Microsoft's caddy, which is a really popular one with SSL, baked in Tomcat, these are all different types of servers. So like, like, what are those and just like real quick, the sort of the idea is that like, if you're thinking about node or PHP, those languages, you can build a server in those languages. But generally what happens is that you run something like Apache or nginx. And they handle all of the incoming requests. And they do things like handle static files, they handle redirects ahead, it handle proxying your application. And they're much better at doing that. They also will handle SSL certificates. They do like the hard work of that. And then they just pass off the request to your actual application. So you can run a website without them. But I say almost everybody runs one of these web servers in front of their application. - -30 -00:10:32,009 --> 00:10:43,620 -Scott Tolinski: Yeah, definitely. And ports just like you have on just about anything, right you on your computer, you have ports in ports are open. So information can come and go via ports on your computer. my MacBook - -31 -00:10:43,620 --> 00:10:45,960 -Unknown: doesn't have any ports, no ports. Oh, yeah, - -32 -00:10:46,139 --> 00:10:48,870 -Scott Tolinski: it's got USB C ports. Yeah. - -33 -00:10:51,000 --> 00:10:51,750 -Unknown: That was a joke. I - -34 -00:10:51,750 --> 00:12:16,080 -Scott Tolinski: have a good joke. The joke. That's the kind of joke that I would tell the Courtney and she would just be like, what are you what ports so ports are again, you'll typically see this, especially when working on localhost or something where it says localhost colon 3000. And that 3000 is the port that is your application is running. And typically those are local ports, or things that can only be accessed from internally within your computer. But did you know you can also open up those ports, so people can also access those from your IP and a port. that's largely how people might run a server or something off of a home computer, there was actually like a really bad Reddit thread where somebody was like, I want to run a website, and I can't get my port open correctly on my computer, I want to just host it like anywhere else, like I want to host it the right way. And I want to host it on my computer in my bedroom. Okay, so the ports are the ports that are available and open. And largely when you run an application, it's what port you're running it on. So people can access it. And then eventually pointing your domain name at a specific IP and port, so that it will be able to access that application. But the ports again, it's just basically you think of like a porthole or something, it's a way that things can go in and out of the server, - -35 -00:12:16,140 --> 00:13:19,860 -Wes Bos: you don't actually point a domain at a specific port, you just point a domain at a, I don't think you can actually you just point a domain name at your IP. And then you can run different ports. Generally, your if I have like three node apps, yeah, I have this on one server, if you want to run three node apps on one server, you have to run them on all different port. And you can run one on port 81 on port 443. And those are HTTP and HTTPS, then there's Port 22, which is for SSH, but like, then you kind of run out unless you want your like users to go to Port 3000, which nobody does. So what you do is you you have an nginx or an Apache config that will run on 443 HTTPS, and then it will proxy it'll proxy it for you underneath the hood. So even like if you go to react for beginners calm, I'm actually running it on like Port 3000 or Port 6969 or something. But then it just shows it running on port 443. Which is HTTPS, - -36 -00:13:19,860 --> 00:13:20,399 -Unknown: correct? Yeah. - -37 -00:13:20,399 --> 00:13:28,260 -Scott Tolinski: Okay. Yeah, that's it. So I've always run nginx to proxy my apps. I've never run anything directly out of the port. - -38 -00:13:28,559 --> 00:14:22,559 -Wes Bos: Yeah, me too. And it's, it's my least favorite thing to do is to write nginx configs. I always like wish that there will be something like pm two, which allows you to run multiple node processes on your server. I always wish that that would like hook into something like caddy or nginx. And just like, just do it for me, you know? Yeah, I do know. Next up, we have just database connection and interaction. I don't think a whole lot of database stuff is necessarily a fundamental of server side. But just knowing that the idea of a database is generally that it is hosted on a separate server, but it can be hosted on the same server, but almost always, you will host a database somewhere else on another server that is running the software that can save MySQL, or MongoDB, or something like that. I think that's pretty much all you need to know, as a fundamental of server side. - -39 -00:14:23,010 --> 00:15:16,679 -Scott Tolinski: Yeah, definitely. And especially because, I mean, as developers, maybe you've gotten into this stuff via other things. But you don't often think about this, when you run an application that is complex like that. You have one server that's a virtual private server, most likely, that is running the software, right. And if that software is chugging that server to make it run slower, and the database is living on that same server, then that database is going to run slower, everything on that server is going to run slower because if it's a server, it's a computer that is struggling to run that software. So a lot of times Besides, you know, other people having figured out those problems, Better than you could, in hosting on a, you know, another platform for your database. It's also separating a lot of these aspects that are related but not completely partially, you know, not completely tied together, it's a good idea to separate some of those things for those reasons. Next up, we - -40 -00:15:16,679 --> 00:15:33,000 -Wes Bos: have cookies and sessions. So we're not going to go into what they are just because we could do an entire episode on them. But understanding what cookies are. And when you have a request with those cookies come along, for the ride, understanding, just picture your cookies, - -41 -00:15:33,029 --> 00:15:39,750 -Scott Tolinski: yeah, just put picture and cookies on there on a train car, they're gonna last hands up in the air. They're long for the ride, - -42 -00:15:39,870 --> 00:15:47,370 -Wes Bos: and sessions, what sessions are and how you can use them to save data about the user or what's going on on your server - -43 -00:15:47,490 --> 00:18:09,390 -Scott Tolinski: word. So the next one we have here is writing files and directory permissions. Now you have to think about this. Again, it's like a computer, right. And on your computer, you have a user and that user has different permissions and what it can edit what it can't edit. And this is largely done for well, security, right permissions. And so on a web server, we have these same ideas of permissions, what directories that can a specific user access, and that's where the whole idea of root root is the root user, the root user can access everything. Now, I don't know about you. But ever since I started following digital oceans server tutorials, I shut off the root user, the moment I spin up a new server. And that's really just Oh, nobody has root permissions. And then I create a group that has very specific permission permissions to do what I want that way in case somebody accesses my system. They don't have access to the root user yet, or unless the root user can only log in via a certain port or something like that. So you know, I think it's important if you're managing one of your own servers to if this is your first time managing a server, whether it is on digitalocean, or another one of these VPS providers that you do follow some sort of tutorial that really runs through setting up file and folder permissions, as well as like what users can access what because the last thing you want is somebody to be able to come in and start polling, you know, the images to me just like ripping out stuff out of a computer, you don't want somebody to just be able to go willy nilly throughout your application, or throughout your server that is, so you're going to want to make sure that you set up correct permissions, and directory permissions file folder permissions, what who can read access and write what. And that can be a very common mistake, when people are just starting to get into this things is I go to do something, I don't have the permission, or my application is white screening, because the application itself doesn't have the permission. The application is running as a user that doesn't have a permission to write to this file that read to this file, and therefore it's not working. So just know that everything on a computer is just like your own personal computer that has a user that can read write and access and execute certain things. Do you want to go over that? That whole whole bit here where the the numbers come into play? The 677 sevens? Like I'm ludicrous. - -44 -00:18:09,450 --> 00:18:20,840 -Wes Bos: All I know is that I often when I was learning WordPress, I would often see people suggesting just it's called ch mod. Yeah, CH mod Srimad. How do you say that? - -45 -00:18:20,940 --> 00:18:32,490 -Scott Tolinski: As you know, I it's funny because I say ch mod for for changing permissions, but then I say Chone for changing ownership of files, Chone, - -46 -00:18:32,550 --> 00:19:17,550 -Wes Bos: I say, Joan for CA, Joan. But it's like Ichabod. It's ch mon. And then it's shown, like I said, it's so funny that I don't do the same system for both of those. Change mode is what it stands for. So ch mode, mod ch mod is make sense. They have all just different numbers. And if you want to, like make things totally open to anyone that can run, then they suggest that you 777 that code. And I would always see these like Stack Overflow. And somebody's been like, got it fixed ch 777 the entire server, and now it's working. And that's unfortunately not a good thing to do. So I don't know, maybe take a little bit deeper and look at permissions and how all that works. Well, I - -47 -00:19:17,550 --> 00:19:33,210 -Scott Tolinski: think we should I think we don't have to get too deep into it. But I think we should at least say that 777 means that the user, the group, and the world can read, write and execute. So everybody can anybody can this 777 - -48 -00:19:33,830 --> 00:20:51,660 -Wes Bos: Next up, we have headers. So when you make a request, so go back to the start when we talked about making a request via get put post, things like that. Generally, you can send data over the wire in a couple different ways. And one of the ways is you can send body content along so like if you submit a form, you will send all of the fields that are associated with that form along for the ride. You could, but you can also send that data along via the headers. And the headers will often contain information, things like, like what browser? Did it come from? authorization tokens? What type of request? Was it, any authorization tokens, content type, things like that, just so understanding that there is often a bunch of information in the headers, and you can sort of like learn about headers, if you open up your network tab in your dev tools, and just like make any sort of request and click on that request, you can see there's an entire there's an entire tab for the request headers, and as well as the response headers that have come back in terms of like, other things that can't how big the content is, when it was sent content type, we'll talk about that. So pretty nifty. - -49 -00:20:52,200 --> 00:22:12,930 -Scott Tolinski: It's funny that that's where you when I was going to go to the exact same spot next, because that Network tab can really give you even though it is, you know, the the response you're sending and the response or the request you're sending, and the response that's coming back, it gives you into a huge insight into what these things are actually doing for every one of your requests. I've been moving my account system over to next j s, which is kind of a big deal, because Meteor handles all of my accounts. And I was having this bug. So to say where the user auth token is where my I should say my authorization was working on the initial load, but then any subsequent graph qL request afterwards, the context would just be an empty object where user would be undefined. And that was sort of confused. I was using a package. And then so I was like, You know what, let me let me just check these headers real quick. And the author, the auth, headers weren't being sent on any of the other requests. So obviously, none of the requests are going to be authorized because, well, when the request goes out the auth token, just flat out wasn't there. So I was checking to see if it was it was there and it just straight up wasn't. So it was an easy fix. Because you know, I just had to change essentially one line of my graph qL request to send those headers along. But the Network tab is what allowed me to see that in about two seconds. So this is one of those things that can really give you a good handle on what's going on. - -50 -00:22:13,500 --> 00:23:20,280 -Wes Bos: Next up, we have error handling. So what to do when, when things go awry. And often I think in PHP world is a little easier just to let things break, because you could just refresh the page and try it again, and it will work. However, with your log with the node server, the error handling will call in most cases, if you don't handle the error, the entire process will, will fall over and it will break. And that's why you run things like pm two or forever. And that will restart your your application should anything like that actually actually happened. So that along with like another one we have here a little later I was talking about and I was having logs, because when there are errors, those will go to the logs and often when there are requests that will be logged and just knowing that there is usually logs on your server somewhere that will detail what happened. And knowing that those logs can also fill up the harddrive space and your server very quickly, especially on some of these smaller servers that just have five gig little space on them. That will cause it to fall over really quickly. - -51 -00:23:20,520 --> 00:23:57,450 -Scott Tolinski: I feel like that's a rite of passage is to have your server crash because the arrow has filled it up. I've had times where I've been like looking at the usage of the hard disk usage. I'm just like, What in the world is taking up this month, this like much space on my server? Oh, it's the logs, the logs that I've just been writing and writing. I've used it I don't know if you've used any of these. But I've used paper trail before for like logs as a service. They make it like easier to search and analyze and stuff like that. It could be a little bit of an alternative to something like a century without the same. It's like more or less like here are the logs for everything. Here are the errors and exceptions. - -52 -00:23:57,480 --> 00:23:58,950 -Wes Bos: Yeah, just the raw data. - -53 -00:23:58,980 --> 00:24:32,100 -Scott Tolinski: Yeah, here's the raw data if for all those data heads out there, when I had a really good joke was when you said when things go awry. And I was going to say what is this the bread hour? Oh, that's a good one. Wow, wow, couldn't get I couldn't get that one in there. But I really wanted to. So sorry about that. I'm sorry, everybody. But I'm not sorry about this. And this is one of our sponsors, which is Freshbooks. And Freshbooks is the cloud accounting software that we know and love. If you've listened to syntax for any bit of time, you've probably heard us talk about fresh books. So - -54 -00:24:32,100 --> 00:25:01,320 -Wes Bos: with more about that is with fresh books is a cloud accounting that you need to keep track of your invoices keep track of your different clients that you have. You can track all of your hours in there, your expenses, different projects, different rates, everything you need to do to manage sort of the finances of your business and I recommend that you check it out@freshbooks.com forward slash syntax, you're going to get a 30 day unrestricted free trial and thanks so much to Freshbooks for sponsoring, yeah, - -55 -00:25:01,350 --> 00:25:17,910 -Scott Tolinski: thank you fresh books. Cool. So the next one we wanted to talk about was async data handling. Now, I don't know about you, but I pretty much I don't I don't do a lot of this other than just through my API and promises on that end. But async data handling, what do you what did you What were you thinking for this one, - -56 -00:25:18,090 --> 00:26:07,080 -Wes Bos: I was more thinking, like, in terms of making your server as fast as possible. Things don't always need to happen sequentially. Yeah, especially if you are waiting on responses from databases or servers. And just understanding that things can happen synchronously, especially in JavaScript, it's very easy to do it. And just to sort of be wise about how to run multiple requests concurrently, and then that will make things the fastest because you certainly can put yourself into code yourself into a corner is that the saying? Where you maybe have like 10 different requests, and you do one after another? And, man, this is this is getting kind of slow? Why is that and I'm handling that data a synchronously with concurrent requests is important. Interesting. - -57 -00:26:07,140 --> 00:26:12,630 -Scott Tolinski: See, I wouldn't have thought about that as being a fundamental, but it is one of those things that you can put on yourself with, you know, - -58 -00:26:12,720 --> 00:26:32,100 -Wes Bos: I was just gonna say that, yeah, it's like one of these things just to know about, you don't have to go and study up on it. But just know that like, if you ever are doing multiple requests, or multiple database queries, know that you could possibly be making it slow if you're doing one after another and look for a sync strategies if you are running into those problems. - -59 -00:26:32,190 --> 00:27:13,080 -Scott Tolinski: Yeah. So Okay, so the next one here is routing, which is a common thing that we talk about in web development terms on the front end and the client side of things. But if you think about it, everything here with our server is, you know, accepting requests for a URL. And that's exactly what it's doing. I think that's a big problem that people have when they're first learning about client side things is that they, they have this disconnect between the client side routing aspect of things and the server side routing aspect of things. There's a long time where people would say, Alright, my page works when I navigate to this page, but then I refresh it, and the page no longer works. Can you think about that? why that might be Wes - -60 -00:27:13,170 --> 00:27:15,150 -Wes Bos: routing? Is that the answer? - -61 -00:27:15,720 --> 00:28:29,970 -Scott Tolinski: That's the answer? No, because if you think about it, okay, so a request comes in to a specific route on your server. And many times, if you have a client side only application, what you need is basically a catch all route that says, hey, I'm going to catch every single route. And then I'll let the client side router handle what's actually displayed on the page. But for those of you who don't do any client side stuff, and are just primarily doing things like, you know, whether you have a WordPress or you have a any sort of application that runs primarily on the server as a full stack application, maybe you have an express server that's accepting these routes, you might have the route, accept a route and then load a specific page or send a specific response back. So again, a route on a server is the exact same thing that you would encounter in a route on the client side of things. But again, this is the route that the web server is hitting, when the user immediately navigates to that page. When the user navigates to that directory. It hits the server side route. And one of the things that html5 brought us was essentially, the html5 style routing, where you could have a route that loaded the client side stuff without having to refresh and hit the server. - -62 -00:28:30,270 --> 00:28:40,050 -Wes Bos: Yeah, it was called push state. And that's that's what pushed all of the React router all of the routers for your single page apps. Those all use push stay underneath the hood. - -63 -00:28:40,050 --> 00:28:42,060 -Scott Tolinski: Did you ever use p Jax? p Jax. - -64 -00:28:43,320 --> 00:29:00,330 -Jax was like the coolest thing in the world when it came out. P Jax dot Heroku app.com. I have that memorized. Because I used to love this stuff. PG X was back in the jQuery days before you find Yang works. And so P Jax stands for? - -65 -00:29:01,020 --> 00:29:01,860 -Unknown: What does it stand for? - -66 -00:29:01,860 --> 00:29:15,690 -Scott Tolinski: It stands for push state plus Ajax Yeah, push they play Jax is p Jax. And it's basically a jQuery way to swap out the page without having to do a full client or full server side refresh. - -67 -00:29:15,810 --> 00:29:34,080 -Wes Bos: Yeah. So it would just in the background, go and fetch that page. Yeah, via an AJAX request and then just swap out the page with push date and then change the entire body out with with whatever had been Northern Iowa. I thought that was I think in in Rails land. They call that turbo links. Is that what that is? Oh, interesting. Yeah, - -68 -00:29:34,080 --> 00:29:46,110 -Scott Tolinski: yeah, I remember turbo links. I remember p Jack's like blew my mother effing mind. When I first did it. I was like, Oh, this is so cool. The header doesn't even refresh. And when I on the next page, - -69 -00:29:46,590 --> 00:30:09,000 -Wes Bos: I remember in jQuery is dot load. You could give it a URL, and then you give it an ID of that page. And then it would just load like a subset of the returned HTML and then put you could put That in like some HTML and like, that was like next level to being able to like, yeah, like you said the the nav doesn't change your scroll position doesn't change half the - -70 -00:30:09,000 --> 00:30:10,800 -Scott Tolinski: stuff doesn't have to refetch. Yeah. - -71 -00:30:10,860 --> 00:30:30,660 -Wes Bos: And then you can use push date to update the URL. And yeah, that was some some pretty nifty stuff back in the day. Yeah, right. Still is honestly, like, if you have a server rendered app, you can just you can just slap on a little bit of that, and it makes your experience so much better. I think that's Basecamp is still done that way, as well. And I think a lot of GitHub is done that way as well. - -72 -00:30:30,840 --> 00:30:38,400 -Scott Tolinski: Interesting. It's just so funny. I've been in, you know, ever since Angular came out, I've been in the framework world, I don't even remember what that's like, - -73 -00:30:38,610 --> 00:30:55,290 -Wes Bos: drinking that Kool Aid there. Next, we have MIME types, which, so you've got your like circus mime. And then you have your European holiday, St. mime. And one other kinds of minds are they're gone. Let's - -74 -00:30:55,290 --> 00:30:56,940 -Scott Tolinski: keep going on sometimes. Here. - -75 -00:30:57,180 --> 00:30:58,680 -Wes Bos: We got cartoon mime. - -76 -00:30:58,710 --> 00:31:04,140 -Scott Tolinski: Yeah, got a cartoon mine. We got the, the, you know, the person on America's Got Talent mime. - -77 -00:31:07,170 --> 00:31:13,680 -Wes Bos: Types of mimes my man, he got a French mime, which has like the big guy in the hat. - -78 -00:31:13,860 --> 00:31:26,010 -Scott Tolinski: Oh, yeah, that's a classic mine. There's a mine who's a bee bee boy who became a mine. And he does this routine where he like pulls the string out of his mouth. And it just keeps going and going. And you're like, Oh, I know. That's just like a tape measure thing in your mouth. But it's still fun. - -79 -00:31:28,110 --> 00:32:49,610 -Wes Bos: What we're talking about is not actual mind, sorry, not actual minds. But every file type in the history of files has a specific type associated with it. Like JPEG has a MIME type of image forward slash, jpg, a GIF, and a PNG will all have it. And video will also have their own MIME types for each one. So the reason why you can call your files with a dot anything like you could, your JavaScript could have like a dot west on the end. And you could do script source equals scripts dot West. And it would still work. As long as your server returns a MIME type. And even the browser if it gets like a MIME type that it wasn't expecting. Get up actually does this, they goof with the MIME type of their files, so that you can't hotlink CSS and JavaScript directly from GitHub. If you've ever done that, I have not. And by default, the server's will take care of this all for you. That's why you have a that's why you use something like nginx or Apache. Because if you serve up a.js file, or you serve up a PNG, the server will try to detect what type of file that is. And then part of the header is the type is a type and that that gives you the the MIME type that's sent along. So very rarely do you have to do that yourself. But it's good to know that there's these things called MIME types, - -80 -00:32:49,770 --> 00:33:23,880 -Scott Tolinski: I think that time you've probably run into that the most is when like uploading an image or something, right? Because you have to define the format of the images or the files that it will accept. Because otherwise, that file input isn't going to accept, like just willy nilly, I just had somebody say like, Hey, I tried to upload a GIF to my avatar, I don't accept gifts as the image upload type. So we block those. So there, that's why they're hitting an error. And now I know I have to write an error bit of code to say, hey, this file type is not supported. Go ahead. Oh, that's a fail on my part. - -81 -00:33:24,300 --> 00:34:11,960 -Wes Bos: While we're talking about this, one thing that really grinds my gears is apps and websites that don't accept the new iPhone, high efficiency image format. So when you take a photo on your iPhone, it gives you a hike a gic, which is for pictures. And when you upload that, it's like oh, it's not a JPEG or a PNG don't know what to do with that. And it's really annoying because I have to like convert them. I have like an app on my desktop. I have an app called hike converter with from it's just from sin Dre sin Dre Saurus. Probably butchered that. But update your app so that you can upload hikes, because they are same with like web p as well, like they're the feature and we should be able to upload those things. Yeah, - -82 -00:34:12,000 --> 00:34:20,190 -Scott Tolinski: absolutely. And as somebody who just got an iPhone, that's suddenly a problem I'm actually interested in as opposed to a problem I might not have been as interested in - -83 -00:34:20,250 --> 00:34:22,920 -Wes Bos: as opposed to not having problems with Android, right? Yes, - -84 -00:34:22,920 --> 00:35:55,050 -Scott Tolinski: exactly. Yeah. None no problems. And we like to transition into this sponsor when we talk about bugs. And your server can also have bugs. I have to mine does. Yes, mine does. Yes, absolutely. If I got bugs, yes, I two bugs. No, I have two of these accounts. Well, not two accounts. But I have two of these projects within my century. Now. century@century.io is an error and Exception Handling tool that will not only just work with your front end code, but it's going to work with any server side or back end code as well. So I have a century project for my API, as well. Believe it or not, and that way I can see all sorts of errors. Now what kind of errors do I have? Well, I'm looking at Brown one right now, let's see, is a graph qL error field, create course, must not have selection string. So I goofed up, I have to adjust my API that said, This isn't public yet. So that's is a bug that I don't worry about user saying. So we know I can go as I can come in here. And I could say, ignore this bug. Even though this bug is a part of a release. It's not a public facing bug. And I don't have to think about this bug ever again. So if you want to be able to catalogue and know exactly what's happening on your server, head on over to sentry@sentry.io and sign up using the coupon code tasty treats all lowercase all one word and get two months for free. So that's sentry.io coupon code, tasty treat, let them know that you heard about century from syntax. - -85 -00:35:55,380 --> 00:36:19,560 -Wes Bos: Last thing about Sentry is that they just closed the Big round of funding, So congrats to them, and they are hiring. So if you want to work for Sentry, and possibly have Scott, talk about your suite features, go to sentry.io forward slash careers. They're hiring in San Francisco, Vienna and Toronto, where my Canadian folk, Vienna, Vienna sounds warmer than Toronto, - -86 -00:36:19,880 --> 00:36:25,110 -Scott Tolinski: is it I don't know very much about the NFL, it just sounds nice. Got a nice name, it sounds like a nice, I'd like to go. - -87 -00:36:25,860 --> 00:37:35,960 -Wes Bos: Alright, next we'll talk about authentication. So different ways to add off to an application. So I would say as education is an advanced topic, but knowing just about the basics of the different types of authentication. So at the very basic, you have this thing called basic auth, which is it's literally you type your username and your password into the browser with like, if my username was Wes, and my password was boss, it would be West colon boss at, and then the domain name that I want. So that's, that's very basic, basic auth. And we also have this concept of bearer tokens, which come along for the ride in your header, you have JW t, which can come along, you can come along in the header as a bearer actually, it can come along in the body, it can come along in a cookie doesn't matter. And come along, I like to say like, what I mean by that is that like it gets sent in the request to the server, as well as just regular cookies, we have sessions, there's all kinds of different ways. So just having a good primer on on how they all work and whatnot, not saying you have to know how to implement all of these because I couldn't do it from scratch. I've done it many times. And it's it's kind of a hard thing to implement. Yeah, - -88 -00:37:36,210 --> 00:38:31,730 -Scott Tolinski: auth is not my favorite thing. And it's so funny, because it seems like I sometimes pick my platforms based on the things that require me to do the least amount of odd. Yeah. So here we are today. So Okay, next thing is environmental variables. Now, this one's probably seen as a NV somewhere. And an environmental variable is something that your server can read. But the client can't read. And this is makes it a great place to keep all of your secrets, all of those secret things that you don't want the browser to, while the client side for that matter to be able to read, such as API tokens, things that you're going to be calling there. And I use environmental variables for like database credentials, those kind of things and be able to load them up in my application server side, and again, allow my application to call them without having to pass that stuff along to the client side. - -89 -00:38:31,830 --> 00:38:49,230 -Wes Bos: Yeah, I use a thing called dot envy me too, which is like a node package that will load them into your environment. From a file. However, that file should not go in your should not go in your version control, you should not have those types of things in your version control, because what - -90 -00:38:49,230 --> 00:38:54,150 -Scott Tolinski: are your thoughts about that, if the version control is private, and will always remain private? - -91 -00:38:54,170 --> 00:40:17,790 -Wes Bos: Well, like I did it in the past, and then I brought a contractor on to work on it. And I was like, shoot, like, I can't give him access to my Git repo at all, unless I go, even if I were to take it out, those those credentials are still in the, in the history. So I either have to go back and scrub all of these environmental variables from the good history, or I just had, like, I just made a new repo. And we just started from there, because I had done that, because like, you don't want to give them you don't necessarily want to give your like database credentials to a contractor who can like you don't want them accessing your entire codebase or your entire client base. You give them like a like a test set, right? Yep. And you you don't give them actual access to, to those types of things. And same thing with like email servers or an API keys and all of that, like, just give you you should have like a separate set of dev stuff. So I've made that mistake in the past. I am also interested in your thoughts on if you were given an additional contractor or an employee, publishable rights, the ability to publish your application. What would you do then? Oh, yeah. Like if if that was the case for me, I would go into the server and make sure that the environmental variables are there. I guess if they can get on the server, then yeah, they can get access to those tokens. So if that was the case, no, I'd use some sort of ci. Yeah, where it would it would deploy it for me because you don't want them necessarily having access to those things. Yeah, - -92 -00:40:17,790 --> 00:40:19,440 -Unknown: I have you. Can - -93 -00:40:19,440 --> 00:40:21,300 -Wes Bos: you Yeah, sorry. Go ahead. No, no, I - -94 -00:40:21,300 --> 00:40:29,790 -Scott Tolinski: use a CI for that. I was just wondering what your way of just trying to turn to get your thoughts on that unprovoked whatever I was, Oh, yeah. Yeah, - -95 -00:40:29,820 --> 00:40:31,830 -Wes Bos: I was good. You're a good interviewer. - -96 -00:40:31,830 --> 00:40:32,460 -Scott Tolinski: Why thank you. - -97 -00:40:36,170 --> 00:41:29,900 -Wes Bos: Next up, we have and I think this is the final thing that we consider a fundamental of server side. And that is just deployment in general. So there are so many different ways to deploy things. But I think at a very basic, you should know that you can SSH or SFTP into a box, and drag and drop those files up there. And then know that that is probably the most primitive way to deploy your application, it still works fine. It's nothing wrong with that. But there are lots of different ways to deploy your application from continuous integration to using a bunch of different apps. Or you can do this like domain name switch over that a lot of things are using now or like if you use now to sh they'll just deploy a new instance. And then once it's once it's running, they'll cut over your domain into the new one. So you don't have any downtime. That's what I do. Just understanding how how that all works. Yeah, it's, - -98 -00:41:29,900 --> 00:42:33,330 -Scott Tolinski: it's fascinating. There's a lot here. And deployment can be one of those things that I think is often left to services like now that just do it. Yeah, well, because you're really not saving that much money, in fact, now is really, really pretty cheap. So you know, I think that when it comes to an application like that, where you want no downtime, you don't want to have to drag and drop whatever, then use something like now if it's a front end site, I would use Netlify in a darn heartbeat. Because of all that built in continuous integration stuff. So deployment is one of those things that has never been the most fun. I used to manage my own deployments via my own virtual private server with my note app, and it was just like, always prone to goofing up somewhere along the line and me know, potentially having some downtime. And I say that as somebody who's not an admin, like a sysadmin, although I'm sure if you are a sysadmin, you're probably setting up your own container flow. And I think that's probably where things like Kubernetes or, you know, Docker really shine, yeah, - -99 -00:42:33,330 --> 00:43:06,650 -Wes Bos: you start to spill out into this, like, sysadmin person. Like, also, like, it's for sure worth it for, like companies that are super big, you figure all that stuff out themselves. But for for you and I you're just getting into this fundamentals, you got enough stuff to worry about, like ports, and proxying. And all of this stuff that it makes sense, like probably 20% of the stuff that is off your plate, if you if you go and use a different service to host or do auth or to do image uploads. And then you worry about and always learn that stuff. - -100 -00:43:06,689 --> 00:43:21,480 -Scott Tolinski: So many things security. I mean, like I would rather offload security to a company that like specializes in it, I just would. And it's a small, small price to pay to not have to manage that stuff that said, if you are really confident in your skills there, then by all means, yeah, go to town. - -101 -00:43:22,020 --> 00:44:17,760 -Wes Bos: All right, um, we just got a list of stuff. Because anytime we ask for like suggestions on Twitter, like, what do you think is the fundamentals for this, then you almost always get things that are like, the most advanced stuff that I don't even know myself. Yeah. So like, some of the things that were suggested as fundamentals that I think are advanced, I'm not sure what you think about this God, but like scaling databases, and rmws WebSockets in real time is kind of an interesting one, because it can be easy, but it also can be really easy with Meteor. Yeah, there you go. streams. So dealing with streams and streaming responses. So some of the new like, yeah, suspense server side rendering stuff is pretty interesting. where like, I saw some demos where like, they're not even running react on in the browser. They're just running it on the, on the server and streaming the responses to the browser, which is kind of cool. Do you see that demo? - -102 -00:44:17,910 --> 00:44:28,140 -Scott Tolinski: No, you know, streams are a fantastic mystery to me. I was like, just like, doing some work with streams and Apollo and I was like, I don't I this is just during my brain. - -103 -00:44:28,620 --> 00:44:52,620 -Wes Bos: Yeah, it's if you want, like a really cool intro to streams, look at the Twitter Streaming API, because you can just search for something popular like Justin Bieber, and you just boop boop, boop, boop, boop, we get in tons of tweets. And you know, and you can actually, like, get a good idea of what a stream is. And I always have the stupid did I ever do this the example of like, eating a sandwich and stream? - -104 -00:44:52,709 --> 00:45:05,040 -Scott Tolinski: Oh, we did. We talked about a very large sandwich. We talked about a giant Subway sandwich and I was like, That was a long time ago at this point. And I think people really liked it. So let's reprise that bit - -105 -00:45:05,070 --> 00:46:08,670 -Wes Bos: anyways, we have streams and buffers. And the idea is that a buffer will read entire file at once, or it'll bring everything in at once before you do some work on it. So that's, that's like you go and grabbing a quick six, six inch from subway and bringing it home and then eating it. And then a stream is like, Oh, my gosh, I have such a large, a large sandwich, it won't even fit into my house, I better start eating it as they're bringing it into the house. So like you're working on eating the sandwich as the workers are bringing the sandwich into the house. Whereas with with a buffer, you'd wait until the entire sandwiches in your house before you start to work within. streams are often helpful for things that can be processed really quickly as they are streaming in like video or like, I've done it where I've had like millions of entries in like us a CSV file. And like I couldn't, I couldn't load a million entries into memory because it was too big and it just fell over. So I had to deal with them and save them to the database as I was streaming them in from reading them. I don't know if that's a good example or not but sandwiches, man, - -106 -00:46:08,910 --> 00:46:18,060 -Scott Tolinski: can we just call this episode? sandwiches, man? server side rendering or the server side foundations sandwiches? - -107 -00:46:18,150 --> 00:46:19,950 -Wes Bos: Why don't we have subway sponsor - -108 -00:46:20,040 --> 00:46:23,310 -Unknown: this? Yeah, because subways garbage it is - -109 -00:46:23,370 --> 00:46:25,710 -Wes Bos: they're in big trouble in Canada. Good. - -110 -00:46:26,010 --> 00:46:26,910 -Scott Tolinski: I hope they are. - -111 -00:46:26,970 --> 00:46:30,810 -Wes Bos: They're trying to sue the CBC, which is the Canadian Broadcasting Company. I - -112 -00:46:30,810 --> 00:46:35,910 -Scott Tolinski: know the CBS man I watch hockey. I got john Terry on there. Yeah, I know what that - -113 -00:46:35,940 --> 00:46:42,720 -Wes Bos: Oh, yeah. Sorry about him. Yeah, they're suing because of chicken. Which is hilarious. Apparently it's not real chicken. - -114 -00:46:42,840 --> 00:47:06,390 -Scott Tolinski: Yeah, they are. They're awful. Did you hear about this thing in the believe it was in in England or something where they were hiring employees as quote unquote, sandwich interns so that they didn't have to pay the minimum wage because they weren't waiters. And they were just they were just saying they're just employees. And they were just trying to skirt the law that is so darn gross. That makes me It's so obnoxious. - -115 -00:47:07,590 --> 00:47:09,000 -Wes Bos: It goes along with sandwich artists, - -116 -00:47:09,000 --> 00:47:25,200 -Scott Tolinski: though it does sandwich. Now it's good. Okay, let's get into the part of the show that we call sick picks. That's where we pick things that are sick things that we like, last week, I picked a video game about goes West, what are you picking this week, - -117 -00:47:25,500 --> 00:48:45,540 -Wes Bos: I am picking something that I got for free from a company. I will always mention that. And I these are the wise plugs. So I own a bunch of cameras. I bought them myself. And I love the wise cams. And then they're I think they heard on the podcast. We're like, Hey, thanks for recommending wise cam, want to check out this time we're checking out the wise plugs. It's a plug that you put in and then you can use Wi Fi to turn it on and off. And the kind of cool things about it is that you can also I also have wise sensors. So if somebody that the sensors don't need to be hooked up to Wi Fi, they run on like a coin cell so you can put them anywhere. So if someone walks by a sensor, someone opens a door, one of those things, then you can trip, like a lighter or anything to turn on. You can also schedule them really easily with the wise app or with Google, Google Home, which is pretty cool. So what I've started to do is from 6am to 9am, I turn the fan on in my office and just get it like nice and cool in here before I come in. And then the fan turns off right at 905 right when I'm about to just start working. So they're pretty cool. And they're also like way more affordable than some of the other stuff like we were sent the Levitan plugs. Yeah. Which Scott famously did not like at all, - -118 -00:48:45,750 --> 00:49:22,680 -Scott Tolinski: please. Okay, I should state that when I use them with the iPad that we have here. They were perfectly fine. But the Android app was just like, if I could build an app that was it was built just as like a toy puzzle to infuriate the person that uses it. You click on the button and the button moves. There's something that was their app, but it was their legitimate app. And I'm getting so angry at that application that, yeah, I am so mad at that. In fact, I still use one of the Levantine ones, but I only push the button on it. I don't even use that as a smart outlet. It has a button on it, I push the button to turn it off, because that's my life. - -119 -00:49:22,830 --> 00:49:48,390 -Wes Bos: So like the Levitan outlet was what 28 bucks I'm looking at on Amazon right now. And the wise plugs are two for 15 which is awesome. So a big fan of everything that ys does. I've been trying out the plugs for a couple of weeks and like they're not that exciting and their plugs and you can like you can do stuff with your cameras or with your sensors, which is kind of cool, but they work they work well and they're they're affordable. - -120 -00:49:48,600 --> 00:49:51,960 -Scott Tolinski: That shouldn't be their tagline. They work. shrug. - -121 -00:49:55,410 --> 00:49:56,100 -Unknown: What more do you want? - -122 -00:49:56,100 --> 00:49:59,520 -Wes Bos: They work. They work. Hey, come on. What am I you - -123 -00:50:00,000 --> 00:50:09,360 -Scott Tolinski: So I think YouTube's sick pic and this is the YouTube channel called. I think they just it's a it's a guy Sam crack am cracked. Yeah, I love - -124 -00:50:09,360 --> 00:50:11,250 -Wes Bos: that love Sam crack. - -125 -00:50:11,280 --> 00:51:21,900 -Scott Tolinski: Yeah. So what he does is he he fixes sort of totaled cars that he buys at auction. And so he'll some of my favorite videos of his though are where he's just like wandering through a car lot and is just like, oh, he's just like pointing out what's wrong with these cars? Okay, this car is totaled it's a, you know, $200,000 Lamborghini, it looks pretty good. But check this out. It's got frame damage. This is what it's gonna cost to fix. And so he can look look at these things and know whether or not these projects are good or not, based on just a quick glance at them, and it's pretty fantastic. Because sometimes we'll buy the car and get into it and realize it's not as bad as he thought it was. And sometimes it's not as good as he thought it was. And I've just found it to be awesome. So Sam crack. I've been obsessed. There's a ton of these videos. I find it to be just just endlessly fascinating from a tinker's point of view. He's not like a like the classic like, Hey, guys, we're doing this like sort of YouTube that I almost can't Yeah, but I find the content to be good enough where it doesn't necessarily matter. And I like to put this stuff on before I'm going to bed just to chill me out a little bit. It's like a tinkerer sort of TV and that's what I'm into. I'm into this. - -126 -00:51:21,900 --> 00:51:37,590 -Wes Bos: I watch a lot of these like rebuilder car rebuilder shows just funny because I watch it because I think one day I'm going to convert a car to electric and I don't really know all that much about like probably seems like you're getting started with those - -127 -00:51:37,620 --> 00:51:38,400 -Scott Tolinski: power Yeah, - -128 -00:51:38,430 --> 00:52:01,350 -Wes Bos: well I'm starting with 12 volts and like little these tiny little motors but like, I think maybe in like five or 10 years I'm going to take like a really cool like, Land Rover or something and like make it electric right and totally that would be crazy. I don't really know all that much about how cars work. So I've been watching these for probably a couple years I love B is for build is one that I really like. goon squad is another really good one - -129 -00:52:01,379 --> 00:52:07,590 -Scott Tolinski: I that's like a it's a rabbit hole. I went down on YouTube and was like, This is not something I knew existed. - -130 -00:52:07,740 --> 00:52:28,950 -Wes Bos: Yeah, tovarisch is another good one. He just like rebuilds, like he's rebuilding a Lamborghini from the Fast and Furious right now. There's just tons of them and I pick and choose which builds I want to watch. I'm not really all that interested in that like supercar ones. I'm more interested in just like kind of like middle of the road nice cars. I mentioned a supercar or Yeah, - -131 -00:52:28,950 --> 00:52:32,850 -Unknown: most Yeah, yeah, I'll seek Oh, yeah. karwan specifically, yeah. - -132 -00:52:33,960 --> 00:53:07,410 -Wes Bos: But the BS rebel guy is LS swapping a Lamborghini right now, which is you take like a an engine from like, I don't. I'm gonna not do this justice. But what is an LS swap? It's like a Chevy. Yeah. If you take an engine from like a Chevy trucker Corvette or something like that, and you put it he's putting it in a Lamborghini, which is bonkers. It's all bunk. what he's doing Yeah, yeah. Really cool. I love those those channels. It's so fun to watch. And I think you learn a lot about like, problem solving and how cars work and, and whatnot. Word. - -133 -00:53:07,440 --> 00:53:17,520 -Scott Tolinski: Yeah. Big fan deck pic. Yeah, so shameless plug. My name is Wes Bos, and I'm gonna shamelessly plug all my courses for you. Yeah, I know. I saw. I saw that joke. - -134 -00:53:17,610 --> 00:53:18,750 -Wes Bos: What's the URL? - -135 -00:53:18,840 --> 00:53:21,480 -Scott Tolinski: A Boss Boss stuff, calm. - -136 -00:53:22,560 --> 00:53:49,890 -Wes Bos: Just boss things. Wes bos.com forward slash courses. has all of my courses added. Thank you, Scott. Yes, I'm actually working on my beginner JavaScript course I was recording it all day just got finished. big lesson on truthy and falsy which I was pretty stoked about. It's a fun way to talk about true and false values. And so get ready for that it will be at beginner javascript.com when it is ready. Cool. Nice. - -137 -00:53:50,730 --> 00:54:48,510 -Scott Tolinski: I'm going to be plugging in my smelt for beginners course you could hear me say the word answer 100 times in that course because we're building a quiz. And that's one of those words that gets funnier and funnier and weirder and weirder, the more you look at it. So we build a quiz. It hits an API. It has a little bit of really fun stuff. We do some animations using the built in spelt animation library which is awesome and let me tell you, it is so stinking cool. I love spelt and I want to build everything in it right now. Because it is too darn simple and it makes me like upset at how simple it is. I'm just like, gosh, it shouldn't be this easy and it is It feels great. And I absolutely love developing it but it's same time it feels like react we have the control and the power but it has the What is it? It's got the control of react but it has the syntax of a Lamborghini I don't know. It's awesome. So spelt for beginners is that level up tutorials comm sign up, become a pro and save 25% off the year. So that's all I got. - -138 -00:54:48,750 --> 00:54:54,360 -Wes Bos: Awesome. Thanks for tuning in. We will catch you on Monday. Base - -139 -00:54:56,190 --> 00:55:05,940 -Scott Tolinski: head on over to syntax.fm for a full archive of all our Our shows and don't forget to subscribe in your podcast player or drop a review if you like this show - diff --git a/transcripts/Syntax189.srt b/transcripts/Syntax189.srt deleted file mode 100644 index 633f7ad86..000000000 --- a/transcripts/Syntax189.srt +++ /dev/null @@ -1,152 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA bombs and Scott Taylor. Totally at ski. - -2 -00:00:25,950 --> 00:01:27,030 -Scott Tolinski: Whoo, welcome to syntax in this Monday tasty treat, we're gonna be talking about that SSR and I'm not talking about super sweet raspberries, I'm talking about server side rendering here. This episode is sponsored by Sentry. Now, Sentry is the amazing way that you can track and log and keep track of and just really solve any of those bugs, errors and exceptions that you have inside of your code, whether it is and react or JavaScript or Ruby, or Python or anything, you can keep track of it with Sentry, you're gonna want to head over to sentry@sentry.io use the coupon code tasty treat all lowercase all one word, you're going to get two months for free off that sweet error and Exception Handling service. Now, let me tell you, if you run any sort of software that is public facing and people are using, you're gonna want to make sure you have some way to catalog and categorize those bugs. because let me tell you, there will be bugs, and you will need to find a way to fix them. And now I know what that century is also hiring. Do you want to talk a little bit about that Wes? - -3 -00:01:27,179 --> 00:01:34,380 -Wes Bos: Yeah, century is hiring sentry.io forward slash careers. They just got a bunch of funding. So they are hiring like crazy. Check it out. - -4 -00:01:34,590 --> 00:03:16,890 -Scott Tolinski: Check it out. Okay, so this episode comes from a question that we received, I would say a good amount of time ago, this one's been sitting in our docket for a little bit. And the question is, hey, Wes, and Scott, I'm a huge fan of syntek. Thank you. And thanks for inspiring and educating everyone in the latest j s trends. My question is on server side rendering, Can you discuss what exactly SSR is and when to use it? How can a client library like be like react be rendered on the server? Are there any gotchas to know before implementing this? Yes, there are. If everything renders on the server, how are my ex HR requests handled? I also read that there is an additional step for somebody using Redux. Both next j. s and Gatsby are server side rendering. SSR is my go to option. Are there any react frameworks that do not perform SSR? Thanks in advance. And this question comes from Chai, as they say, to call them, they have Chaitanya, as the name I, they said, just to call them Chai, because they knew we would butcher it, which I most likely did. So we're largely gonna be talking about server side rendering from the perspective of a react situation. And not maybe a let's say, WordPress situation. I have a joke in here that back in my day, it was just called rendering. Because so many times in the past, you never even thought about server side rendering up until the point where we had what we had a client side frameworks like react Angular backbone, and all of those that came across where we would build applications on the client side. Okay, so before we get too deep into it, let me introduce my co host, as always, is West boss. - -5 -00:03:18,660 --> 00:03:19,290 -Unknown: Hey, - -6 -00:03:19,290 --> 00:04:06,540 -Wes Bos: I think it's probably important to sort of like, say, like, what is server side rendering? And how does it work before the time and how it worked traditionally, is that you would gather all of your data, and you would gather all everything that you need, and you render out some HTML, and then send that to the client. Now, the way that it works with react applications, etc, is that you send usually, like, an empty HTML file with just a blank div in it. And then the JavaScript loads on that page, picks it up, and then starts rendering the app. That's what's called client rendered, right. So today, we're hopefully gonna talk about like, how do you run that JavaScript client renderer on the server? And maybe like, like, would you want to talk? Like, why would you want to server side render a JavaScript application? - -7 -00:04:06,660 --> 00:05:18,260 -Scott Tolinski: Yeah, yeah, these are all lots of good things. And we're gonna also be talking about some of the gotchas, some of the frameworks, some of those things. So let's get started with the very first part, which is why SSR at all, if you see CSR, again, that is client side rendering. So you often see people say client side, or you might see it as CSR. Now the big thing, the reasons why you might want to use SSR is because well for endless amounts of time before this, the web crawlers, particularly those of which that work to catalog and categorize to do things like Google, right, the Google type of crawlers, the ones for search engines, they're not going to be able to render the client version of your application. Now, I should say there is other solutions to that other than server side rendering, but to keep it simple, basically, each one of these spiders is going to come crawling along your site to come crawl it and they're going to See a blank HTML page. And that's not really necessarily the best thing for the Google juice, you're not going to rank super high with a blank HTML page. So largely, that's the been the biggest driver to want to do server side rendering is that it gives you good SEO. - -8 -00:05:18,260 --> 00:06:41,040 -Wes Bos: Yeah, there's some stats over a Google does crawl and render, just server sorry, client rendered now applications, but the stats are poor. Yeah. And honestly, if it was my website, and if it was my business, I wouldn't trust the fact that they say, Yeah, we do, we do crawl it, because at the end of the day, it doesn't look like it's as as good. Hopefully, that changes. And that will sort of cross off. One reason why you have to do server side rendering. But right, now you have to do it for SEO, at least in my mind. The other one is speed. So like, the whole round trip works is that you you load some HTML, and then you load some JavaScript and that JavaScript will go and render the page out, and then maybe that needs to go and fetch some resources from your back end. And then that will come back and and then that can be a bit slow, because you've got a couple back and forth to the server before your pages even rendered out. With server side rendering. You can do all of that on the server, oftentimes ahead of time, which is what Gatsby will do, or, or what next JS pre loaded link will do. It will do all of that on the server, and then just render out a big string of HTML, send that to the browser, much like it has been for since the dawn of time. And then you can pick it up. That's called rehydration. Yep, you can pick it up from there, and then turn it into a client side application. - -9 -00:06:41,070 --> 00:07:32,250 -Scott Tolinski: Yeah, rehydration is one of those things that's really come about ever since we've had client side frameworks, they could be server side rendered. And so rehydration is a newer problem. And one of which will give you a fair bit of gotchas here. If the thing is trying to hydrate, is it necessarily the same structure might give you some guff there? There's also like you mentioned, the whole pre loading aspect of things, you could do a pre render, I think, what's the one the.io? One? Is it pre render.io, there's like services in the past that would take your client side framework, and just basically crawl them as a, not like a Google spider would do. But they would crawl them as like a user would do save that HTML, and then allow you to ship that to be a faster load. I haven't used those myself. I don't know if you have any experience there. - -10 -00:07:32,430 --> 00:08:15,060 -Wes Bos: No, I don't either. The other one that we have here is just like page meta. If think of facebook, facebook, descriptions, Facebook images, Twitter profile, yeah, things like that. All of the stuff around shopping, if you want to provide Google with information about stock, and prices, and if it's a video metadata around that all of those meta tags, they generally need to be server rendered so that those web crawlers can crawl that page and pull that data out of the head with the if that data happens in like a react helmet or something like that. I highly doubt that will actually work as well as similar to SEO - -11 -00:08:15,090 --> 00:09:13,230 -Scott Tolinski: Yeah, I think largely, you can think about it is like if a robot needs to view your page content, then maybe that's a use case for SEO, or for SSR. And there's too many darn acronyms in here. So a robot or somebody that's not a person is crawling your site and trying to get some data out of it, whether or not that is like one of those Facebook links or something like that. That is a big use case. So let's talk about some react platforms. There's platforms for all sorts of libraries that do server side rendering, this person is asking about, they say, How can a library like react be rendered on the server, and then go on to mention things like next Jason Gatsby, you know, we briefly mentioned some of these. Now, next, JS can do server side rendering on build time, or in a pre loaded way. Right. But it's primarily you could think of it as on runtime, right? You hit the server in my thinking about that correctly. I'm not an ext JS expert here. - -12 -00:09:13,620 --> 00:09:38,070 -Wes Bos: Yeah, it's it's done on runtime. So some when somebody makes a request, next jass is a server. It's a node app that that runs, right. And when that request happens, next, JS will intercept that request, or or take that request, and then attempt to server render your react application and fetch all that data that it needs. We'll talk about that in just a second send HTML out to the browser. - -13 -00:09:38,070 --> 00:11:16,500 -Scott Tolinski: Yep. And that's largely why we often you often hear us recommend next JS four times when you need a more dynamic based site, where you have something like Gatsby, which is rendering your, your application on the server on build time, aka you run a build command, and at that given point, it spits out a bunch of HTML and JavaScript right and so therefore, If you have frequently updated data, or things like that, where maybe authenticated behind user data that you want to be server side rendered, then maybe Gatsby isn't the right one. But if you have like very static content, or I mean, you can use things like Apollo with Gatsby. But if you have more like a brochure type sites, then Gatsby is going to be awesome for that stuff, because it just generates a once. And that's a faster return, you're not having to wait for the server to generate those on demand. those files are already built and already ready. And that HTML just goes boop, right over to the client. There's also basically a billion other ways you can do server side rendering with react with any sort of build tool that said, it's not a ton of fun as somebody who I have my own server side application via Meteor. Now granted, Meteor does a pretty good job of actually picking up a lot of the hard stuff for you. But you can do server side rendered react applications with Webpack, or partial or any of these build tools. You just have to know what you're doing. And it's not exactly the most fun, which is typically why if you're looking to do SSR, with react, you would pick up a static site generator, or next j s to do it for you. Because again, that's going to solve a lot of the big heavy lifting problems you might face. - -14 -00:11:16,830 --> 00:11:50,850 -Wes Bos: Let's move into some gotchas. So server side rendering, it's not as easy as often people will say on Twitter, like just use next Yes. And then and then it's like, super easy. It's not all that easy, because there are a whole bunch of gotchas. So the first one here is that there's no window, right? Because all of this stuff is being rendered. It's being rendered in node j. s, not in the browser, JavaScript, so you don't have access to that window, right. And that's why I always tell people don't use like window dot set timeout, and things like that, just use set timeout, because then you're going to run into issues with server side rendering. - -15 -00:11:51,240 --> 00:13:17,130 -Scott Tolinski: Yeah. And let me tell you, if there is a gotcha in SSR, and react, I have hit it, because you will hook them all, when you're when you're just starting with this. And you're, you know, largely trying to use some things. Another one is, if you if you've ever used use layout effect, which is one of the new react hooks, right? Use layout effect, waits for the DOM to finish loading and therefore doesn't make sense within a server side context, right. So unfortunately, use layout effect throws big fat error when you try to do it. And that's something I've only learned recently, to be honest, I had just through a use layout effect in my application a couple weeks ago, and I saw this error pop up. And I was like, Ah, this is a funny bug that I haven't really thought too much about. So what I did is I created a and I didn't create this from scratch, I got this code from somewhere else, I'll make sure I include it in the show notes here. This is a use the isometric layout effect, which basically checks to see if a window is defined. And if window is defined, then it will use layout effect in your code. And if windows not defined, it will use just a standard use effect. And so that really just solves those problems. And it really just prevents some errors, this error is one of those ones that will pop up the moment you do any just testing, because you know, you're just servers are gonna you're just test they're gonna run the node, and that's gonna hit that bug right away. So if you use use layout effect, this is one of those ones that's going to hit you. - -16 -00:13:17,490 --> 00:15:03,510 -Wes Bos: The next one I want to talk about is data fetching is hard. So the idea with next j. s is that you have pages and add a page level. So the very highest level, you can get index JS except for the app and the document pages. You that's where you have to define where the data that needs to be fetched and awaited, before it gets because the thing about all of your data fetching is synchronous, right? And if you have a component 11 levels deep, that is fetching data. How does your page know about that is the big question. And if you don't really want to have to fetch your data at a page level, because that should be done at a component level, right? Because right, that's the component that needs the data. So you if that's the case, then you have to like write some sort of crawler that will crawl down every single component and find any requests. And specifically with Apollo, yeah, there's a couple out there that will, that will search for them and bring those requests or bring the promises at least up to a page level and wait upon it. So it's still very hard to do that. And suspense, which is coming to react, it kind of is in react already. But the the suspense for data loading is going to change how we do data loading, and it will change all of our fetching to resources. And then the higher level page level will be able to tell when any of its children have resources that are not ready yet. And you can also like tell the browser just like Wait, wait three seconds and try to load as much data as you can in three seconds. After that be like well, the cars leaving we're going ship it to the grab as many toys as you can. - -17 -00:15:04,890 --> 00:17:11,360 -Scott Tolinski: But there was like an old game game show on TV where you could grab as many Nintendo cartridges from the shelf as you could. And I was like, I wish I was on that as a kid, I would have liked me in my life. But no, I yeah. So the way you do it and Apollo right now is with the, you know, Apollo just shuffled everything around into being like the different packages, they like, changed all the package names. So you now do it through the package in the app, Apollo, what are the namespace, forward slash react hyphen, SSR is the package and there's a function in there called renders to string with data that does exactly what you're talking about, where you basically you give it your provider, you give it your application, and then you just say, hey, render string to data, and you wait for it. And then it gives you your whole application with the data after the data is all complete. That's it, I had the worst time getting this up and running with react loadable, which does code splitting. So like I had, I have a thing where I could get SSR and code splitting, working, or I could get data and SSR working or you could get code splitting and date, I couldn't get all three of them. It was like a triangle of pick two of these. But I eventually got it all working with the help of some awesome, awesome people. And it was like not a ton of fun. Luckily, the meteor community has written some really excellent packages to make it super easy. But if I was doing this with Webpack, I'm pretty sure I would have thrown my computer out the window, because of just how obnoxious some of this stuff can be. But it is it is you have to it's not the most fun, you got to wait for that data. And, and that is actually much more difficult than it sounds until like people like awesome libraries like Apollo have given you those tools to do so. Another one is we mentioned that window is not available. But you have to think in addition to window, what other stuff is only on the client side that you use all the time, because there's a lot of stuff, right? A fetch to fetch. Yeah, I use something called isomorphic. Fetch. Yeah, yeah. And I polyfill with use isomorphic, or with this isomorphic. Fetch, I believe that's the package. But yes, there's so many of these things, right? They we think about all the time is being browser folk, I'm a browser folk and like, I think about the - -18 -00:17:11,360 --> 00:17:12,830 -Unknown: browser, like that. - -19 -00:17:12,830 --> 00:18:24,690 -Scott Tolinski: Yeah. So local storage, that's one of those big ones, right. So for instance, by authentication, anything in my auth only works with local storage, because that's where my tokens are said. And I'm actually rewriting that right now to be in cookies, to make that whole process just a little bit easier on myself. But because of that, I cannot send authenticated requests via server side rendering, therefore any of my user pages are not server side rendered. And so therefore, that is just something I've been living with. But it's one of those things that, you know, I'm fixing it right now. But I haven't always had, you know, the time to fix it. So no, I'm excited that I'm going to be able to actually get in there and fix it. Because again, I'm using meteors off system, which is sort of like, you know, under locking key, not totally, but like, I'm not thinking about it, it's just there, and it does its own thing. So hopefully now, I'll be able to find the time to really dive in and swap that out with a more custom login system. But again, just think about all those things that are not available in the server. And if you're not thinking about them, you will have to start SSR because your codes just gonna break anytime. It's just gonna break on the server. So let's talk about tools, kind of tools to use for this thing. - -20 -00:18:24,990 --> 00:18:53,130 -Wes Bos: With next js, I use this package from actually from from Lewis, who works on my platform as well, he he made it for my course. And now it's become sort of a go to for working next and Apollo together. It's a high order component for doing the thing I just talked about walking the tree, it's called next with Apollo. So that makes it a lot easier. You don't have to worry about at what level are you fetching your data? And there's this, you have this no SSR j s here. - -21 -00:18:53,160 --> 00:20:57,030 -Scott Tolinski: Yeah, yeah, it's funny, Aaron Oda from next, who works on next, he used to be big in the meteor scene. Back when he was around, he did a ton of the amazing like the most amazing Meteor packages before he moved to next. And he created this thing for Meteor, which was just basically a no SSR component. Now, granted, it's been several years since he created that and people have changed it up quite a bit. I've pasted one in the show notes here. That's actually from the material UI material UI ships, their own version of this package. And this one's hooked based where Aaron odos was component will mount based. So this, this one's probably the one you should use. But what this does is basically a component, or could be a higher order component that you just wrap, or an actual just normal component that you'd wrap around anything that you don't want to load via SSR. Now, I've used this a couple times. And sometimes it's really handy when you're using like a third party library that you don't have access to change. Or maybe you you just want to get like a shell of the SSR up and running. Like maybe you just want like the main layout and then the internal Have it you'll say, Okay, well we can client side render the internals, right. So this SSR, you can just wrap anything that you don't want to fire via SSR. And it's just works. It's great. All it does is basically check to see if windows defined and if so, yeah, so it yada yada yada, it works. So use a component like this, if you're having troubles getting up and running. That was like a strategy I had for taking an app that was primarily client side rendered and turning it into a server side rendered app was to say, Okay, I'm going to wrap the entire app in this no SSR component, and then I'm going to slowly slowly pyramid down the app and the component tree so that you know, okay, now the header is server side rendered, okay, it all breaks. Let me fix the header. All right now, the footer. Okay, now until I get to the main body content, and then Ah, yeah, that way. That way, you can do a sort of step by step day by day. Yeah, a little step by step and get that going. - -22 -00:20:57,480 --> 00:20:58,100 -Unknown: You watch - -23 -00:20:58,100 --> 00:21:01,740 -Wes Bos: TGF a no, what's that? Oh, man, there's - -24 -00:21:01,740 --> 00:21:03,590 -Unknown: a show called step thing I think - -25 -00:21:03,690 --> 00:21:24,420 -Wes Bos: is step by step. Day by day. Yeah. I thought that was full house for some reason. No, no, that's step by step, man. Okay. Yeah, definitely. When I was a kid, yeah. This side No, SSR II, that makes me I was thinking about that was like, it kind of sucks that it's like another component that you have to wrap it like, wouldn't it be cool if you could do it like a directive? - -26 -00:21:24,510 --> 00:21:28,530 -Scott Tolinski: Yeah. And you could use this as a higher order component? I mean, you could do that, too. Oh, - -27 -00:21:28,530 --> 00:21:30,660 -Wes Bos: can you use it via hook? Did you say, - -28 -00:21:30,660 --> 00:21:50,970 -Scott Tolinski: I don't know about hook? I don't know, this is this is basically like a, a component that just says, Hey, can you use state? Or can you? Can you render server side? Oh, yeah. Or I mean, is this a server? If it is, you know, pass through? If it's not the or I mean, is this the client then pass through? If it's not the server, then just throw out a spanner something? - -29 -00:21:51,180 --> 00:21:58,620 -Wes Bos: Oh, yeah. You could do this with the hook as well. Yeah. You could probably do with anything. Yeah. It's just checking for checking in Windows undefined or not. - -30 -00:21:58,980 --> 00:22:06,510 -Scott Tolinski: Oh, yeah, you could write this code. The The only thing about having a component reasonable like this is just that it's super easy to just bounce in there anywhere you want to use it. - -31 -00:22:06,540 --> 00:22:21,420 -Wes Bos: Yeah, the gotcha is that you can't check if there's a variable called window you have to do type of window is not equal to undefined a string of undefined. Which is annoying to have to type that every single time. That's why these these little packages are worth it. Oh, yeah. Yeah, I - -32 -00:22:21,420 --> 00:22:27,900 -Scott Tolinski: don't even recommend installing this as the package. I recommend just copying and pasting this, throwing it in your code. That's how I do it. - -33 -00:22:27,900 --> 00:22:44,400 -Wes Bos: Beautiful. I think that's good. Hopefully, you learned a little thing or two about server side rendering and how it works. It certainly has gotten a lot easier in the past, but I can't wait for suspense to come because I think it's gonna make a lot of this really, really easy. And you don't even have to really think about it after a while. - -34 -00:22:44,520 --> 00:23:00,870 -Scott Tolinski: Yeah, I think we're gonna have to have a do a next episode. And before the React wreck, people that say, oh, suspense is when we're talking about a suspense with data fetching and all that. We're talking about the whole shebang, like server side, render all that stuff. So yeah, once that stuff's available to us, we should make an another episode about it. There'll be a lot of fun. - -35 -00:23:00,960 --> 00:23:12,240 -Wes Bos: Yeah, it's Episode 127. If you want to you want to learn more about what is to come with react suspense as a good episode. It has a lot of lessons word. Cool. Alright, that's it for me. Anything else from you? - -36 -00:23:12,240 --> 00:23:13,230 -Unknown: Nothing. - -37 -00:23:13,230 --> 00:23:14,670 -All right, please. - -38 -00:23:17,160 --> 00:23:26,940 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax19.srt b/transcripts/Syntax19.srt deleted file mode 100644 index f8e138d52..000000000 --- a/transcripts/Syntax19.srt +++ /dev/null @@ -1,420 +0,0 @@ -1 -00:00:01,290 --> 00:00:04,560 -Unknown: You're listening to syntax, the podcast with the tastiest - -2 -00:00:04,560 --> 00:00:09,300 -web development treats out there. strap yourself in and get ready. Here is Scott solinsky - -3 -00:00:09,350 --> 00:00:55,710 -Scott Tolinski: and West boss, a welcome to syntax. In this episode, we're going to be talking about getting into speaking at conferences, we're going to be talking about the sort of whys and how you can start to get involved, you know, tips and tricks and even some little tasty treats for attending conferences yourself. Yeah, so this episode is sponsored by fresh books, head to freshbooks.com forward slash syntax and enter syntax in the How did you hear about us and check out the modern, simple, easy booking software from Freshbooks. It's as easy and as awesome as they can get. Because who likes doing accounting? Now? Freshbooks makes that super easy and painless. Awesome. - -4 -00:00:55,859 --> 00:00:57,630 -Wes Bos: So hi, Dan Scott. - -5 -00:00:57,899 --> 00:01:48,420 -Scott Tolinski: Oh, I'm doing I'm doing all right. I don't know. Yeah, just working working away. I've been writing a lot of tests for my site. I'm moving like everything over to Redux right now. It's so funny, cuz we like chatted. And I said in like, what are you gonna do? And you're saying, I'm like, well, maybe I'll do some SSR. Maybe I'll eventually add some Redux. And it's like, no, I like got into that right away is like the moment we stopped recording that I added SSR. Now, to make my data a little bit easier with that server side rendering, I'm adding, I'm ripping out my, my container components and data layer, essentially in form of adding Redux, and then eventually upgrading that to Apollo or something. But because of that, I'm writing a bunch of tests. And so I'm just coding a ton, is really what it comes down to. How about yourself? - -6 -00:01:49,260 --> 00:02:13,680 -Wes Bos: That's awesome. I'm doing pretty good. I just added a show to our list called syntax. Where are they now? Where we go back through all the episodes? And if if we have had a change of heart, or we've implemented something differently, or what any, any which way, it'd be kind of fun to give little updates on each of the episodes, stuff that we talked about. But - -7 -00:02:13,710 --> 00:02:22,770 -Scott Tolinski: yeah, I know, I feel kind of bad for saying that. I don't love Redux, because I love Redux right now. It's like, All I said was, I don't love it. And now I'm like, but I do love it now. - -8 -00:02:23,630 --> 00:03:06,810 -Wes Bos: Now you it's a change of heart, it's fine, it's fine. To do that. I'm doing good. I've been heads down the last week or two working on my CSS Grid course. Having a ton of fun with that. I was I'm also working on my advanced react course. So I'm taking a bit of a break from that while I work on some CSS Grid stuff, and it's a nice little change some of the, the React stuff is pretty pretty heavy duty. And it's fun to to switch to something a little bit more visual base, so pretty happy about that. Other than that, just enjoying it's nice and cold here and enjoying wearing my flannels and down jackets and all that fun stuff that comes along with along with November December in Canada. Yeah, - -9 -00:03:06,810 --> 00:03:13,110 -Scott Tolinski: right. I'm getting my immediately following this recording. I'm gonna go get my snow tires put on so - -10 -00:03:13,770 --> 00:03:15,090 -Unknown: already, uh, - -11 -00:03:15,120 --> 00:03:55,200 -Scott Tolinski: yeah, my, well, we It's weird. So we'll get in Denver here we'll get a snow and we'll get like hammered. And then the very next day, it's going to be sunny and everything's gone away. So we get so much sun here that the snow doesn't stick around. But it can come at any given point. And my tires aren't rated for like under 50 degrees and on dry pavement and like 40 degree weather my tires spin and it's Oh, wow. Yeah, so I'm like waking up really early, like 6am ish to drop my son off at daycare every morning when it's really cold right now and last thing I want to do is be slipping sliding around when he's in the car. So yeah, right now I'm going to get my my grippy grippy tires put on and be pretty psyched about - -12 -00:03:55,200 --> 00:04:10,170 -Wes Bos: a question about snow tires. So my sister's from Michigan and nobody there put snow tires on and it's just an absolute sh it show when it snows and she told me that Americans don't have snow tires. Not - -13 -00:04:10,170 --> 00:04:34,259 -Scott Tolinski: true. I'm born and born and raised in Michigan. I have lived there. Oh yeah. I lived in Ann Arbor Michigan area for like my entire life. And no, I had snow tires. When I lived in Michigan. I transported them here when I moved here and I know a lot of people do. You kind of have to either. I don't know you Oh, you have to? Well, no, you don't have to have to but like they from - -14 -00:04:34,290 --> 00:04:35,190 -Wes Bos: you'll die from. - -15 -00:04:35,190 --> 00:04:51,630 -Scott Tolinski: I don't know from November to May you can have like slush and stuff on the ground and people are decent. I don't know that decent drivers, but they're there. They're better drivers and they're out here and I don't know. I knew I knew a ton of people that had snow tires. - -16 -00:04:52,740 --> 00:05:44,160 -Wes Bos: Interesting. Yeah, I would hear it. It's actually kind of the law though. If you go into the mountains, there is a law where you have to either have always wheel drive snow tires or chains, or studded tires, or else you'll get pulled over a big ticket in the mountains. Just thing we bought our first car a couple of years ago, they had all season tires on it, which there's four seasons, all the seasons, all four seasons. And we realized very quickly almost crashed on the way home. That all seasons does not mean all of the seasons, it means three of the seasons. Yeah, and you have to go throw down 1000 bucks and buy snow tires. And then you also have to buy an extra set a Hellcat or wheels. I don't even know the words for these things. Because it's it's too much work to take them on and off of the rims all the time. So you got to get some some sick rims for the winter. Yeah, - -17 -00:05:44,160 --> 00:05:59,730 -Scott Tolinski: but dude, snow tires are life changing. Like, I remember the first time I drove in the winter with snow tires. It's just like, this is great. This is the best thing ever. You can actually stop and control your car. You actually have control over how you're driving in the snow. - -18 -00:05:59,759 --> 00:06:17,160 -Wes Bos: Yeah, yeah, we've got four wheel drive, and some pretty knobby snow tires. And I sometimes intentionally do not shovel my driveway just because how much fun it is to give her up. up the driveway. Yeah. Anyways, what are we talking about today? - -19 -00:06:18,389 --> 00:06:20,160 -Scott Tolinski: This episode is snow tire. - -20 -00:06:20,160 --> 00:06:24,449 -Wes Bos: This episode is brought to you by Blizzard. - -21 -00:06:25,079 --> 00:06:28,980 -Scott Tolinski: I used to have a friend that just deal Blizzard acts whenever he had snow. He's just like blizzard. - -22 -00:06:32,730 --> 00:06:56,699 -Wes Bos: Oh, that's good. All right, so we're gonna talk about speaking at conferences, and this is a show where it's not so even like a lot of the other shows that we have is I have quite a bit of experience. I've been speaking at conferences for a long time, and Scott is just getting into the whole conference game. So the hope is that I can give some tasty treats to Scott and then Scott can take those tasty treats and, and implement them. - -23 -00:06:56,730 --> 00:07:24,209 -Scott Tolinski: Yeah, I'd like I said before I got my learning cap on, I am ready to just absorb everything. Because you know that I come from the the side of things where it is it is kind of scary. I haven't done a lot of public speaking I did things in school or whatever you do public speaking here and there. And I've given a conference talk before I've given a talk, I'm just not the the man and I'm not I'm not the West boss of conference talk. So to say. - -24 -00:07:25,740 --> 00:10:45,920 -Wes Bos: Goodbye, cool. Well, um, let me let me give my my experience in it. I've been speaking at conferences for probably, I don't know, seven, seven years or so. So I've been at quite a few over over the years. And I've grown to really like it I initially when I first started speaking at conferences, it was just like, I would speak at like, a meetup. That was like not even a conference, just a little user group meetup. I had like 30 people. And I just remember being so sick to my stomach that I was going to share. And I spent just like weeks working on this talk. And, and it's definitely gotten a lot easier. I've gotten a lot better at speaking at conferences. And what we hope to do today is to, to dole out a couple of those little nuggets, some of those tasty treats that will be speaking at conferences, so why speak at conferences is sort of what we're gonna kick it off with is why would you ever want to speak at a conference in in web development, there are tons and tons and tons and tons of big conferences, small conferences all over the place. And I get asked to speak at them all the time. And the probably the best part of speaking at a conference is that you you essentially get a free vacation, or you get to travel for free because if you speak at a conference, at a minimum, they should be covering your travel, which is a, an economy ticket book to wherever it is that you need to go. And a lot of these conferences are overseas, so you have the opportunity to go to Europe, or if you're from Europe, you can come to North America, wherever it is that you're from. And they also cover your hotel. So you get to stay in a hotel for a couple days. And often what I would do is I would just take tack on an extra couple of days on to that hotel, the conference would still pay for your flight there and back in the conference of pay for a couple nights in the hotel. And then you can use your own your own pocket money to pay for an extra couple of nights in that hotel and you can go explore whatever city that it is that you're you're hanging out in. So that's obviously one of the huge benefits to being able to speak. It's not it's not related to tech, but it's it's crazy to look at all of the different cities around the world that I've been able to go to absolutely for free, because conferences are willing to fly you out and put you up in exchange for your hard work of, of putting together talk and talking to people. So that's that's one of the huge benefits that I have there. Another huge benefit is good friends and good connections. So I've met some some really awesome people at conferences, I find that like, I meet really great people online and on Twitter, but it's not until you you meet them face to face and you have a meal with them. Or you sit down and talk about them that does that. That bond between you get really, really strong. And you I don't know, I feel like sometimes people, especially on Twitter, people are a little bit aggressive towards each other. And they like to be a little bit mean and stuff like that. And then as soon as you meet somebody in in person at a conference, then all sudden that hostility seems to die down. Because that you're no longer just this avatar online. But you're you're a real person. - -25 -00:10:46,790 --> 00:10:49,650 -Scott Tolinski: I don't know, I know human beings have been humanized. Yeah, - -26 -00:10:49,710 --> 00:12:24,030 -Wes Bos: I don't need to make this like a Don't be a dick on the internet. But I don't know is there something just about meeting people and going out for drinks, because often these conferences will have like a party and one of the nights or if you show up at night early, you go and go and meet all the other speakers, all the other attendees, you go out for drinks and, and dinner. And it's just an awesome, awesome opportunity to meet good people, and then also make really good connections in this industry. Because I was a freelancer for a long, long time. And all of the very, very well paying jobs that I got came from speaking at conferences and meeting people going out for dinner. Because usually at these conferences, the type of people that are going to these conferences and speaking and they come from really big companies that have budget to send people out to conferences, I know some people that work at smaller companies, you maybe get one, you get some sort of budget per year. And maybe you spend that on Scott nice courses, maybe you go to one conference a year. But some of these bigger companies have budget to send people to a couple of conferences per year. And often when they needed help on a specific topic, then they will call me up. And I would jump on their team for a couple months and be able to, to help them out with whatever it is that they were struggling with. And same thing goes for job opportunities as well, if you're trying to meet people and trying to get in, before a job is even ever posted. And most of these companies, they ask around their developer team and say, Is there anybody that you'd recommend to bring on and that's sort of the sneaky way to get in on the on the ground floor is, is becoming friends with these people at conferences. - -27 -00:12:24,060 --> 00:12:48,720 -Scott Tolinski: Yeah. And that seems like parallel to I mean, a lot of industries and stuff like that, I mean, the best way to get a job in the movie industry is just start helping out and being around and making yourself available and making yourself known and seen, right. And then when people think of somebody, I need somebody, right, then we'll think of the person that's there. So I could see that being very, very important. definitely get you on people's minds. - -28 -00:12:49,890 --> 00:13:52,590 -Wes Bos: Exactly. Um, and last is the benefit of speaking and also attending at a conference is just renewed excitement for the stuff I sometimes we do it day in day out. And I know there's a lot of burnout in our industry, people get kind of sick, or you're working on the same stupid CSS bug for three days straight and you, you start to get a little bit sick of it. And then often what happens is you go to these conferences, and you see the talks from all these different people. And you there's often like one or two talks that are just really getting me going like I was talking last episode about the flipped David k pianos CSS flip animation, or Nazi s JavaScript flip animation. Talk, like, I can't imagine I can't remember the last time that I was like, Oh, no, you could do that. That's amazing. And I was so excited about I went home, and I learned how to use it with CSS Grid and all this kind of fun stuff. So there's nothing like a good conference, to sort of get you reinvigorated about web development again. And back in the old days when you first fell in love with it. Yeah, - -29 -00:13:52,739 --> 00:14:16,110 -Scott Tolinski: I think I mentioned that even on one of the first year second syntax episodes that I just gone to the dinosaur JS conference in Denver, and like, I'm gonna, I'm gonna plug that one again. Because honestly, it was one of the best conferences I've ever been to where like, each talk gives you that sort of like, Oh, this is awesome. Everything's great. And it gets you excited. So shout out to the dinosaur JS Denver, folks. Yeah. Love that. - -30 -00:14:16,950 --> 00:17:27,960 -Wes Bos: Awesome. And then what other another benefit to speaking can or cannot be there. And there's all kinds of different conferences out there. There's there's very large, corporately run conferences that charge 2000 bucks a ticket, and they make a lot of money. And then on the flip side, are kind of in the middle, there's conferences that people run, they make their living off of running a couple conferences a year, but they're not getting filthy rich off of it. And then there's there's also community run conferences, where it's just a group of volunteers giving up their day and their night in order to run a conference and you sort of have to know like, what are the different types of conferences that are coming at you and I don't necessarily always ask To to be paid to speak, I have been been doing a lot more paid speaking lately and a couple episodes, I said I haven't. But I'm looking into 2018. And I have a couple of nice opportunities to make some money off of that. Because doing a conference, it takes forever to build a talk. It's one of my most hate things ever making a talk because it takes so long like I think my last conference talk that I did, I spent an entire week, probably 4050 hours working on one talk. And that's fine, because then I'll give that talk five or six times at different conferences, and it helps sell courses. And it's well worth it for me. But it does take a lot of time especially like, that's me, I have I don't have a job during the day, a lot of people are doing this stuff, and their evenings and their actual weekends. So sometimes you can get paid sometimes you get like an honorarium which is a couple hundred dollars on top of your flight in your hotel maid. And then sometimes it's just a community run conference where these things if you don't know a lot of people are bashing conferences online, they are expensive as hell to run a conference and is something like a coffee perk will cost like $100 for a pot of coffee or Wi Fi. I remember talking to a conference organiser, the Wi Fi for, like a three day conference was like 25 or 30 grand just to use the hotel's crappy ass Wi Fi. And it's insane how much how much these things like plugs, you think like, oh, there's no plugs at this conference because they're expensive as hell right? So I don't know it's it's expensive. But that's not to say there's some people that will never speak without getting paid. And then there's there's people kind of all over the spectrum. And usually if it's, I like obviously like to get paid for my time. But I also will speak at some of these community conference for free as long as they cover your flight your hotel and it's fun, you get it, they take you out for dinner, you get free drinks, you get a cup of go into a nice hotel, you get a sort of see the see the the area, some of these conferences that give you like really nice swag bags, they have like, like some cell phone SIM cards inside of them. And it's a give you a hoodie and a T shirt and stuff like that. So it's a, I don't necessarily think the money is the biggest part of speaking, because of all the benefits that I just talked to you about. And in terms of traveling and job opportunities and meeting people and having industry recognition, sometimes they will record your talk and put it up on YouTube. And that will explode. So I think there's there's more than just money being able to speak at these conferences. - -31 -00:17:28,169 --> 00:17:56,490 -Scott Tolinski: Yeah. And I mean, I can't tell you how many conference talks I've watched, even for ones that took place two years ago or three years ago on YouTube, because that information ends up being so relevant. And then that's how you'll find out about this person. And maybe this person has a course on it, or maybe they have a lot of great information on their blog. It's a great way to discover people who, who know exciting things. And you know, you can always goes back to the person who who did that that talk, you know? - -32 -00:17:57,110 --> 00:20:48,030 -Wes Bos: Yeah, yeah, exactly. So applying for conference, how do you get into applying for conferences? And the first time? And how do you come up with a talk with like, where did these things come from? So when I first started, it was what I like to call brute force. So what you do is, you take some sort of topic that you are passionate about, or that you're really really interested in, and you you create what's called a CFP a call for paper, which it's not a paper, it's just usually like a couple hundred word description about what your talk will be. And then you submit that to different conferences. So often, what I'll do is every year, I'll come up with a couple different talks, like last year, I had this ESX talk that I did, and I came up with a really good, I don't know a couple hundred word description of what the talk will be, what people are going to learn what it's going to cover. And then I go around to different conferences, sort of proposing that I would like to use submit it via whatever submission form that they actually have. Now, when I first got started with this, nobody cared about, like, who I was, or the kind of like the stuff that I like to do. So it was just a matter of brute force being applying to, I don't know, I probably applied to 30 or 40 different conferences in a year. And then like, I don't know, three or four of them actually accepted the talk that that you went ahead and and submit it to them. So that's how you do it. There's some really good websites out there. There used to be this website called lanyard, which seems to be dying a slow death right now. And there was this lanyard calm forward slash calls. And they would have a list of every single conference out there. And there was just all these like really edge KC conferences that you didn't even know existed, like, outside of the whole, like web development, CSS JavaScript community. There's all kinds of different conferences that are like a little bit more corporate II or you didn't necessarily know about them because they're in a lot of different causes. countries, you need to find these honey holes there you go to find, you need to find these honey holes that have all of these things. And for me it was that lanyard website which no longer exists. There's a newsletter that comes out every week called a weekly CFP. And they they do a great job at saying like where it is if they're going to cover your travel if they pay a couple other a couple other things when the when the submission is actually due as well. And then there's a website called paper called IO, which I know a lot of people use now as well, where you can submit these talks to our hundreds of different conferences and really if you want to get into this stuff that's that's where you've got to start is just absolutely posting your your your talk description to as many conferences as you could possibly want. - -33 -00:20:48,150 --> 00:21:16,980 -Scott Tolinski: So let's say that seems daunting to someone right? Like to just sort of go off and instantly start speaking at conferences. I know you had mentioned speaking at a meetup group and stuff like that. I think that might be a great tip is to head to meet up is it just been up calm? It's meetup. I always just think about meetup.com Yeah, and check out your well they got a new logo. Like Maria they got a new little red color too. It's like a more samnee red color. - -34 -00:21:17,010 --> 00:21:18,000 -Wes Bos: Oh, yes. It's - -35 -00:21:18,000 --> 00:21:43,580 -Scott Tolinski: very different. Yeah, almost pink. Yeah, I'm like this i didn't i the other red was a little a little bold. name badges. Yeah. So I mean, yeah, meetup.com is a great place to see irrelevant and you're relevant meetups, and it could be a great place to reach out to organizer and, and try to even, you know, attend a few and then try to get in and in talk about whatever it is you're going to be talking about or want to be talking about. - -36 -00:21:45,060 --> 00:23:08,940 -Wes Bos: Yeah, they there are always meetups looking for people. And that's how I initially got my start as well is I would prepare these little talks or what had happened is like, I was working on a lot of like webcam based stuff and a lot of like jobs to kind of experimental JavaScript stuff. And I actually was contacted by what is the O'Reilly like fluent conference, O'Reilly runs this massive JavaScript conference. And they asked if I will come talk about that at the time. And that was sort of my big one. But before I did that, because what had happened is like it got on Hacker News, and I wrote a blog post about it, and I made a YouTube video. And that that's what I would also recommend to people is if you have something cool, make sure you write a blog post and make sure you write a YouTube video or record a YouTube video and post it on Hacker News and all that stuff. Because if it becomes popular, often people who are running this conferences will email you and ask you to come speak. But if you don't have that, go to my local meetups. And I would go there all the time, and just practice my actual talk or just practice like 20 minutes of my actual talk in front of it. And it's really cool, like meetups have a very really good like vibe to them. Because it's like, just like local developers, sort of like a lot of people like looking to learn more. Everyone's eating pizza and drinking beer. So it's, it's a really good environment, just to sort of get the get the nerves out before you do a larger conference. - -37 -00:23:08,970 --> 00:23:28,650 -Scott Tolinski: Yeah, I'm from when I found that they're very supportive. local groups, everyone is very just, I don't know, like you said, everyone's there to learn. So everyone has this sort of, you know, ego checked at the door, maybe not everyone. Yeah, there's definitely a lot less egos involved here. And, you know, everyone's just looking to get that and share that information. - -38 -00:23:29,970 --> 00:25:50,970 -Wes Bos: Exactly. So let's talk about now, what kind of talk should you submit, and I sort of broke this down into a couple different kinds of talks that I see at conferences. The first one is sort of like a lessons learned talk, where you work on a team, and you have an interesting technical challenge. And you, you try a whole bunch of different things out, and you go through it, and you actually launch it, and you talk about what you tried, what worked, what didn't work, what problems you actually ran into along the way, and how you actually ended up launching this thing at the end of the day. And those are some really interesting talks, because it's often like a one or two years of a developer's time that they've put into launching or defeating this technical hurdle. And once I've gotten over it, you can sort of like see how these different teams, how they work together and how they accomplished any, or how they got past any hurdles that they hit. So that's called the lessons learned talk. The next one is the new concept talk. And this is this is sort of the one that I like to go with, which is, there's something new in web development, and I'm going to tell you about it. So I like to think of my talks as sort of like mini tutorials where you're going to sit down for 45 minutes, and I'm going to try my best to explain this topic, explain how it works, explain when you might want to use it, and then provide a bunch of examples of how that actually works. And then you leave you leave the tutorial or you leave the the conference talk to me like hmm, I think I can use that in a specific different peace of mind. website and specifically my style of talk that I like to do is, is tasty treats. Where, rather than having like a like one huge universal talk, what I'll do is I'll take, like ESX, I'll take 15 different things from ESX. Or my the talk that I'm doing right now is not ESX. But it's like, kind of like future JavaScript where I talk about new browser API's like web payment API, and resize observer, and all these new things. And I sort of explained like, these are coming to the browser, here is when you might want to use it. Here are some polyfills. Here's some examples of when you might want to use it. And then, and then if you're not interested in one piece of that, it's fine. Because like, five minutes later, I'll be on to a different topic, and you sort of leave with like a couple different learn, having learned a couple different things. - -39 -00:25:51,330 --> 00:26:29,910 -Scott Tolinski: Nice. Yeah, I mean, I like that, because it's easy to get excited about tasty treats and new fancy things like that. Because at the end of the day, you know, if you're excited about this stuff, that excitement is going to translate. And for me personally, when I use something like, like CSS Grid, and the taught, you know, the last podcast we talked about, it's really easy to get excited about CSS Grid. And that excitement that you have for this, this new kind of interesting thing that's going to make your life easier is going to translate through to the people that you're talking about. And I think just inherently finding that stuff that excites you, as little tasty treats is a nice way to be. - -40 -00:26:30,690 --> 00:29:19,050 -Wes Bos: Exactly, exactly be what you're excited about is really where you got to be for for doing these talks. The next one is the my approach to x, y, or z. So this is more for, I don't know, people that are a little bit more prolific than than your IRA, or those those people that are a little bit there sort of I hate to use this word, but the thought leaders in the space where like somebody has a problem, like for example, Jonathan snook has his smacks CSS. So what would he probably would do when he came up with that he would go and do talks on like, here's a problem we have with CSS. Here's how I'm solving that with something that I've this idea that I've created called smacks or I have this idea called bem or Dan Abramov. Learn the flex or flux pattern in react. But he thought that it could be a little bit better. So what is my approach to handling state in react is called Redux. Or here's some ideas called time traveling, right? So like, those are really good talks. Because sometimes you are sitting at the ideation of some of these, like fundamental ideas in the web development industry. So as out to lunch, as sometimes these people think, like always give them time of day because I've told the story before or I was out the React conference, or I was at a conference where react was announced. And I thought it was stupid, but turned out to be amazing, right, for sure. Now, this one is complicated, topics simplified. So you just take something that people don't totally understand. And this is going to, this is going to be playing into my sick pick today. But there's this really good conference talk called how the JavaScript event loop works. And it's just something that like people kind of know about, but don't totally understand it. But if you can just like slam dunk, explain how this complicated thing works in 45 minutes, people always come out with their gushing. And generally, those videos do really well on YouTube as well. And then the last one is just something super interesting. So maybe not something that you're going to be using day to day, but something that is interesting to the audience. So I want to talk about how does mp4 encoding work? And how come sometimes when you're watching mp4 it glitches and you see this like green frame for a couple seconds? or How come sometimes a piece of mp4 sticks on the screen until that part of the movie changes. And he just I this is awesome. Talk a bit just how mp4 encoding works. And it's not useful to me at all, because I don't encode mp4 is. But it was just interesting to understand how it actually worked behind the scenes. So pick one of those kind of talks and and sort of run with it. It really depends on what your personality is like and how you like to explain things. Yeah. - -41 -00:29:19,050 --> 00:29:21,780 -Scott Tolinski: And don't pick something that you're not excited about. - -42 -00:29:23,040 --> 00:30:07,230 -Wes Bos: Exactly. Yeah, that's, that's really important. As soon as you see people, just they submit six or seven out, talk ideas to conferences, about things that they could do. And then you obviously write the talk later. But I often just, I like to just pick one thing that I know is going to be really good. I'm a bit a bit of an advantage now because I'm at a point now where I don't apply for conferences is that they because I have a bit of a backlog of conferences. I've been around the circuit for a couple years. People often call call on me to come to their conference to to actually speak at it. So that's a bit nicer that I can be able to just pick it up. My talk will be and they will often ask me like, do you have a talk that you would like to give, and then we go back and forth, and talk about that. - -43 -00:30:07,530 --> 00:30:08,100 -Scott Tolinski: Nice. - -44 -00:30:09,870 --> 00:30:14,190 -Wes Bos: Let's talk about what makes a good talk, what makes a good call for proposal. - -45 -00:30:14,820 --> 00:30:15,330 -Unknown: One, - -46 -00:30:15,330 --> 00:31:22,770 -Wes Bos: the one pet peeve that I have if talks is that everybody starts off the talk with like the history of X, Y, or Z. So people, because that's like, like the one on one of like, in 2001, or 1994, Brendan Eich was born and he created JavaScript out of the womb, and then let's just like go through the entire history of X, Y, or Z, or like CSS was initially created in like, nobody cares when it was created to get to the thing that you're actually trying, because people always run out of time for their their conference talks, because it always goes longer than you actually think. So skip that initial, like history lesson, and get right into it. People are web developers, they're there for a reason. It's like, if I was to do a CSS Grid talk, I wouldn't start off with like, we used to use floats, or tables, and then we use floats. And then we use Flexbox. And now we have grid, like people know that. And I just dive right into grid. And that's what makes her really engaged, because people often just leave a talk in the first five minutes, if it's not worth their time, because there's other talks often going on on different tracks that they might be able to, to still catch. - -47 -00:31:22,800 --> 00:31:28,290 -Scott Tolinski: Yeah, and I've been one of those people leaving before. So I know, you know, you got to get hooked. You got - -48 -00:31:28,290 --> 00:33:05,550 -Wes Bos: to you got to get them home. And one other thing is, don't, don't like tell your entire history at the start as well. You obviously have to explain who you are and what you do, but keep it to like, I don't know, under a minute or so just to explain real quick who you are. And then you can you can do more stuff at the end, as you're sort of wrapping up and tell people like where they can, they can find you on Twitter and whatnot. But don't spend too too much time on that because it's, oh, seems a bit weird. I got a point here called Star with a banger, which we just kind of talked is to start with something really good. And I some of the good times I don't do this, but I kind of want to steal it as sometimes people will just start with like a really interesting thing about their topic. And then their like, fifth slide will be introducing themselves, and then you're hooked. Because you got that banger at the start. lots of examples, how fun. So don't put too too much text on the screen. So what I do in my talks is I will often do very short code examples because larger code examples get lost on the audience or they can't see it because the projectors crappy and the font is too small. But if you do really big pictures of very small code examples, that gives somebody that gives them something to look at as you're talking through that specific point. And it sort of helps give people context for where you're at. And lots of examples, what I do is I record my examples on video and put them on loop. Because live examples will always fail, when you're trying to do it and your something will break. And you're not going to be able to be able to fix it on on the web while you're doing it live. And you're all jittery up there. Yeah, - -49 -00:33:05,550 --> 00:34:11,630 -Scott Tolinski: I feel like that's like one of the biggest things you always see is like, and now we're just gonna play this video and the audio is distorted and loud and feeding back or it's not turning on or the audio or the video wasn't embedded. So like, there's just so many things that can go wrong. And I'm like, I'm definitely of the type of person. I mean, whether it's at when you're at the airport, or when you're like in a situation where there's a lot of things going on that could be kind of chaotic. In my mind, you always want to keep it as simple and as concise as tight as possible. And adding external variables like that is something that, you know, could could blow up in your face. And well, yeah, could end up in your face. So, so keep the amount of things that could blow up in your face to an absolute minimum. Because I mean, that seems like a really great way to make you feel insecure about how that talk went, right? Your your, your video example didn't work, and you had some issues and people responded negatively to it. And then all of a sudden, this great talk that you had wasn't so great just because of some stupid video technical issue. - -50 -00:34:12,210 --> 00:34:35,730 -Wes Bos: Exactly. And it's often because conference, Wi Fi sucks. And so what I always like to do is make sure that my entire talk will run offline and turn my Wi Fi off and run through it make sure that I'm not trying to load any external scripts or images or videos or anything like that, so that it doesn't have to draw on external stuff. Because then it's like awkward having to just like wait for it to actually load. Yeah, - -51 -00:34:35,730 --> 00:34:44,850 -Scott Tolinski: and I don't know if you know this, but I before, like immediately out of college. My job at the University of Michigan was running a V for several auditoria Yeah, - -52 -00:34:44,880 --> 00:34:49,290 -Wes Bos: I know. That's because I listened to your podcast. Yeah. Scott's origin story, its origin story, right. - -53 -00:34:49,350 --> 00:35:48,090 -Scott Tolinski: So like, in that time of running the projector for a couple of years right in an auditorium. I saw more of these videos not working and like weird stuff or like, you know, people not trying their thing offline and stuff like that then you could ever possibly imagine maybe one a day, you know, there was always somebody who didn't think about it. And so definitely, definitely test it in different environments. No, no Wi Fi, slow Wi Fi, you know, any of that stuff, different aspect ratios, even that we had like an issue, oh, there was like aspect ratio several times where you'd plug in a projector and it would just like totally skew everything. And the person didn't know their computer well enough to know how to adjust those settings on the computer, it would be in the middle of the thing. So it's not like the AV guy like I can't run down there in front of everyone and go like go into their computer settings, they just got to deal with it, you know? So yeah, - -54 -00:35:48,210 --> 00:36:10,020 -Wes Bos: it is that's a super good point go into, I always go into the projector at lunch or before and plug my computer in, because the resolution is always off. And then you can open up your displays and set the resolution to what you're expecting. And then when you go and plug it in later, it's going to remember that specific projector and reinstate your, your state of what size you had it - -55 -00:36:10,050 --> 00:36:14,690 -Scott Tolinski: Yeah, yeah, definitely reduce the amount of technical baggage. - -56 -00:36:15,380 --> 00:39:00,650 -Wes Bos: It's because it's, it's so scary. When you're up there and you it doesn't look like you remember, or your fonts aren't loading or you don't know how to fullscreen something or whatever reason is going on or you don't have the other thing is like you don't have the right dongle. Like I carry this little purse around with me that has every dongle converter out there imaginable. Because often you run into this like VGA projector from 1993. And you need to be able to you all you got is USBC. And that stress of not having the right connector, because believe me, the people running AV have not seen that laptop before it always. It always ends poorly. So yeah, make sure you got make sure you got some dongles on hand as well. Tell your audience why they would need to learn a topic so well, one earlier and tell them early because one time I had a guy at a conference, I was explaining how you can you can pipe video into Canvas and modify it. And in the middle of my example, he yells out, when would you ever use that? And then I looked at him and I said, Well, smartass, and I clicked it to the next slide and shown real world example of when you might want to use that arrow died. But it's just a good example of like you, like, obviously tell people how things work. But I think more importantly is like, why would you ever want to know that as a web developer, right? Like, we need to sort of know both both sides of these things. Nice. And then last one, this is not really like what makes a good talk. But it's nice if you can, like have a bit of a draw or help sell tickets to the conference, because I've had quite a few and specifically this year, I think what's happening is people who sponsor conferences are starting to stop that because I don't think it's very good deal to sponsor conferences as a company. So I've had quite a few conferences just pulled out entirely because the sponsorship didn't come through, and they're gonna lose their, their shirt. And, or they're just not selling enough tickets to that specific one. So also, they, they thought that they could sell a lot more tickets, but they can't they couldn't drum it up. So if you yourself, like we'll have an episode on like personal branding and stuff like that. But if you yourself have a bit of a Twitter following or a Facebook following, or an email list or anything like that, that will often like I specifically have a web page on my website that lists my upcoming talks. Because people always ask me, where are you coming to the UK anytime soon. So that's a bit of a draw. And that that allows you that gives you a better chance at being able to, to get into a conference, if you have even if you have an email list of 500 1000 people, that's really good, because I bet a couple of those people aren't going to want to come to that conference so that they didn't know about it before. - -57 -00:39:00,710 --> 00:39:02,880 -Unknown: Nice. So So or - -58 -00:39:03,419 --> 00:39:04,200 -Wes Bos: so go ahead. Oh, no, I - -59 -00:39:04,200 --> 00:39:06,110 -Scott Tolinski: was gonna I was gonna move on to the next. - -60 -00:39:06,650 --> 00:39:07,880 -Wes Bos: Yeah, go for it. Okay. - -61 -00:39:08,360 --> 00:39:34,050 -Scott Tolinski: Yeah. So I mean, these are a lot of awesome tips for like having your conference talk goes smoothly. And and something that's really difficult for developers and, and designers to maintain sort of smooth usage on is is accounting, right? Like man, accounting is difficult for developers. So the one thing that makes accounting smooth and easy for developers is freshbooks.com. - -62 -00:39:35,190 --> 00:41:11,630 -Wes Bos: segue. Well freshbooks.com is a cloud accounting software. So if you are a small or medium sized business, you're trying to keep a keep track of all the people that owe you money, all the different taxes that go into that all the different expenses, that you have all the different expense reports figuring out how much you spend in a specific year. You need to communicate back and forth with your client on how much is owed. To have that all in same space, freshman's is exactly what you need for doing that. Don't, don't delay and use, I don't know, Microsoft Excel and save a PDF and send that back and forth. Because believe me, when tax times comes for me, I always have to prep my stuff in March or so. And I hate it because I have to spend, I don't know, I have to spend like, a couple hours just prepping all my stuff. But the the one, the one part that is really good is that I can just export all of my invoices, all of my expenses, all of my different tax tax stuff that I've had coming in, I can just create a big dump of that and give it off to my accountant. And he's super happy with that. And I don't have to worry about it being done. Same with all of my invoices and all of my receipts, what I do is I snap a picture of that receipt. And that way, if I ever get audited or anything like that, I know that I have pictures of all those receipts that you don't have to go diving in the shoe box that I have of different seats, I can just pull it up really quickly, without without any fret from that. So check out fresh books, go to freshbooks.com Ford slash syntax and interest in text into the How did you hear about us? Thanks so much to them for sponsoring. - -63 -00:41:11,670 --> 00:41:34,730 -Scott Tolinski: Nice. Nice. Cool, so Okay, so we got a good information about like, how to get started, how to give a good talk, or how to prepare a good talk? What are some more like technical things we can talk about? So like, what kind of software do you recommend? And I mean, there's there's obviously, presentation software. But there's also code solutions to this as well. - -64 -00:41:35,900 --> 00:45:53,430 -Wes Bos: Yeah, creating a nice looking slide deck is often a challenge, because you have to figure out like where things go, you have to fit stuff on the screen, often you want to have syntax highlighted code in your actual editor. So there's sort of a lot going on there. So some of the people who are a little bit more refined, my like presentation style is, is pretty off the cuff. It's kind of like this podcast where we'll take a topic, I'll have some stuff that I'm launching off of, and have lots of screenshots and examples. But I don't have any like speakers notes. And I don't know some people time themselves and go through it. So people that are a little bit more polished with their speaking and, and plan a little bit more ahead. They tend to use like keynote or PowerPoint and they have some nice, fancy animations. keynote is a pretty powerful application. And you can make it look really good. You can do a lot of animations and transitions, you can embed videos and whatnot. So that seems to be pretty popular even amongst the web developer crowd. myself, personally, I use sort of a modified thing Google back, I think it was like, what was the first Google i o? Oh, first Google, like 2011. I don't, I think let's just say it's 2011. So Google i o in 2011. They had this like html5 slide deck. That was like they're trying to like push the the value of the web. And like how amazing it was that you could build apps in the browser. And one of the things that all of the speakers use was the slide deck, that they could build their slides in HTML. And then there was a little bit of JavaScript that came along with it that allow you to advance your slides or build a list of bullets and slide one in after another. And all it did is it just added classes to your slides, called current, next, far next, previous and far prefer, and then you know that with CSS, if things have classes, and those classes change, you can just use CSS transitions, to translate x hundred percent, you can do anything you want with those. And that's how they sort of slide in the slides from the left to the right or up and down or, or whatever it is. Same with the the bulleted list, all you have to do is create an unordered list in the class of build and put anything in there list items, images, or whatever. And then every time you hit your clicker, it will fade in the next element or slide in the next element depending on how you have your CSS. So that's what I use. I've been using that for for years and years. And I've sort of stumbled upon what I like to have my my slides look like. So I took that and I built like a custom Gulp setup where all my slides are done in pug or Jade, all of my CSS is done in stylus, and then this Gulp task will just automatically serve it up live and auto refresh it with browser sync. And what I've done with the CSS is that I take, I don't know 20 or 30 different images, I take 15 or 20 different nice looking gradients, or colors or something, whatever looks good for the slide deck, I always do a different design for every slide deck, I go and find a really nice looking font. And then what I do is I put that background image on there, I put that gradient or that color over top, I use like background blend mode, something so that the the color sort of bleeds into the background image and then I have the have A couple different styles for my my typography. So I have one that's like an h1 tag, it's really huge, it's going to fill up the entire slide, I have like a subheading where I can put underneath that I've got different sizes for images that will span the entire height or the entire width, depending on if it's portrait or landscape. It's all built in Flexbox. So it will automatically center everything on both axes. So dependent no matter how many elements I throw at it, it's always going to perfectly center it. So I don't have to like mess around with adding margin or padding or vertically center or anything, all the Flexbox will just take care of all those children. So like I've sort of stumbled upon this framework for building my slides. And it lends itself really well to the type of talk that I give. And if you're interested, all of my slide decks are up on up on GitHub, I'll link a couple in the show notes. So you can sort of check out the system that I have - -65 -00:45:53,490 --> 00:45:57,510 -Scott Tolinski: nice. Yeah, those kind of things I've only used revealed that .js. - -66 -00:45:59,460 --> 00:46:00,570 -Wes Bos: Heard that one's really good. Yeah, - -67 -00:46:00,570 --> 00:46:15,150 -Scott Tolinski: that was it was a nice one, it does a lot for you, it they have like themes that exist. So if you're looking for like a quick and easy JavaScript solution, one that revealed that .js is, is pretty nice. I've only worked in it a couple times. But I did enjoy it. - -68 -00:46:16,020 --> 00:46:37,830 -Wes Bos: Oh, this is the one that allows you to so reveal j s was based on the one Google put out. But it's it's really cool because you can have a slide and then if you have sub slides, you can slide left to right and up and down. Which I thought was was pretty nifty to be able to do that. So I would definitely check that out as well. Maybe not my like janky one that I built. And - -69 -00:46:37,830 --> 00:46:45,060 -Scott Tolinski: I like it because it is you know, all the stuff you'd want like keyboard support, and you know, the stuff that you got to have to happen, you know. - -70 -00:46:46,770 --> 00:47:14,220 -Wes Bos: So there's also this one called react spectacle, which allows you to build your presentations in react components. And that's pretty neat. Because you can pull in any of the rack stuff that you want has a whole bunch of you can write markdown, right in the slides, and it will convert it. You can put code examples in there. Auto highlight in my mind is code examples as well. But I often opt for just screenshots of the code, so I can stretch it as big as I possibly can go. - -71 -00:47:14,430 --> 00:47:15,870 -Scott Tolinski: Yeah, this is really nice. - -72 -00:47:17,460 --> 00:47:56,880 -Wes Bos: That's pretty nice. I think that transitions are, are some of the fanciest stuff. And then you can also have speakers notes with it, which is one thing that I don't do. But a lot of people like to have bullet points of stuff they need to make sure that they touch upon, or as I just wing it, and like I know, I practice my talk four or five times before I actually do it. And then by going through it four or five times I get a good sense of what do I need to cover without having a million bullet points up on the actual website. So there's, there's all kinds of slides comm there's a really cheesy one called Prezi that allows you to zoom in and out everyone was bananas for - -73 -00:47:57,450 --> 00:48:24,240 -Scott Tolinski: a while, as somebody who worked at a design agency, when Prezi came out, when we were like, We were like, let's knock the socks off our clients, we're going Prezi on this one. And like they were I don't want to make this sound negative or something. But it was like that, you know, if we really want to do impress a client, they spent all night making some Prezi that zoomed in and out on a you know, micro piece of text on that thing and zoomed in out of nowhere, - -74 -00:48:24,420 --> 00:48:25,380 -Unknown: stuff like that. - -75 -00:48:26,730 --> 00:48:49,500 -Wes Bos: It was all in Flash. And I think like there's maybe even someone listening if you work at Prezi. I would like love to hear. I would love to see a Prezi about the challenges of converting Prezi from flash to transforms and CSS animations and all that stuff. Because it's it's no longer I don't think it's any longer done. And no Oh, it's done in Canada is now - -76 -00:48:49,530 --> 00:48:58,680 -Scott Tolinski: Yeah, that seems like the because then you could probably translate a lot of the ActionScript over to just JavaScript. And yeah, it sounds like an easier, easier task. - -77 -00:48:59,880 --> 00:50:42,900 -Wes Bos: It's interesting. So if you work at Prezi, I'd love to see a Prezi on that. Let's talk about not speaking but conference training. This is something that I will often do is I'll go do a talk and I'll do a training like the day before or the day after an actual conference because people are in town anyway. And then I'll do a training. One of the big ones that I do is like a react fundamentals training, where we do we build an application in react all the way from scratch. So those are really fun. Those ones pay pretty well often what you can do is you can negotiate with the person who runs a conference where you you get a like a 5050 split or a 6040 split or whatever the split is going to be it's all over the place. Sometimes the ones that are run at hotels have a bit of a bigger budget sometimes. The other ones are a little bit cheaper to run, but in my experience, you can make quite a bit of money running trainings around there. So often it makes the whole trip of doing a talk and doing a training. Well, well worth your time. Nice. So yeah, it's, I don't know if other people are interested in that it's kind of a weird thing to get into. But if you just like put it up on your website and say, Hey, I'd like to do training or if someone asks you to do a conference, I often will say like, hey, do you want to do a training as well. And even if the conference doesn't offer, that, it's something that they will often be into, because it's not that much extra work for them to order lunch, find a projector, and tables, and a place for me to do my workshop. And then they everyone can make a little bit more money. And the people who are going to the conferences Can, can get a little bit more hands on experience, rather than just sitting in a chair for for eight hours listening to talks. Yeah. - -78 -00:50:43,170 --> 00:50:50,130 -Scott Tolinski: And that's it is important that hands on, I mean, we talked about in the last episode, this is just on the you got to get your hands in at some point. So - -79 -00:50:51,570 --> 00:54:04,440 -Wes Bos: Exactly. So I will end this off now with just some tips about attending conferences, and I guess, being a speaker or an attendee. So it's a lot of work to go to a conference and you have to take time away from your family away from your job. Sometimes people even use their own vacation time to go to conference. So it better well be worth your time to actually go to that specific conference. So I wrote a blog post a couple years ago, called How do you get the most out of a tech conference. And I just wanted to go through and touch upon a couple of the tips that I have from here, and then maybe Scott's got some of his own, you can chime in as you want words. So my first tip is, first to read the code of conduct this is a huge thing in our space lately, is that people sometimes act inappropriately at conferences, and there's no really no excuse for it. But it's unfortunate that we see blog posts and stories and like props to the people who come out and tell these stories, because I'm sure it happens a lot more than we do. But there's just something about developers getting together, or just people in general getting together. And there's always someone that sort of steps over the line. Whether they mean to or not, it's just kind of a bad space to be in. So often your any conference worth its weight will have a code of conduct up online. And they will share. Like what often say these things are so simple, but it's also like, there's it just blows my mind that there's people that don't understand these things. But just like how to talk to people, you get the point on it, let's let's pull one up here code of conduct. So go to code of conduct calm, and that's sort of the base one that a lot of these these conferences do. And it just talks things about harassing people based on anything sexual orientation, disability, physical appearance, body size, race, ethnicity, all these things. Just basically, don't be a dick at these conferences. And you're going to be in a good shape, but take time to actually read through it as well. Just even though it's not gonna, it might not necessarily be you. But if you see somebody acting inappropriately, I wanted these conferences as well worth sticking your head out and being like, hey, not cool, talking to the conference organizers or whatnot, because you want to make sure that these are a space that everyone feels comfortable for going to Yeah, definitely important. Yeah. Next up, is get a nice clicker. This is for speakers. There's one that I use, it's a Logitech something. And it's just a nice, nice little clicker that will advance your slides, it has a what's it called a laser pointer on the end, if you can't, I like touching the screen and pointing to things. But if it's too big of a screen, I like to use my laser pointer to point to things. So that's a big one. Rather than you having to touch on it. I once was at a conference and they had a clicker to advance it, you turn it upside down. And none of the speakers knew how it works, they would turn it upside down and their slides would just go. And they didn't understand how to go back. And you had to like flip it upside down twice to go back and say who made this thing but but just bring your own clicker and something that you're comfortable with? Because if there's enough nerves that you're going to have when you're up there, being comfortable with your clickers is important. Yeah, - -80 -00:54:04,440 --> 00:54:08,580 -Scott Tolinski: so how well do those integrate with some of these JavaScript libraries? - -81 -00:54:09,330 --> 00:57:08,190 -Wes Bos: Great. It's just a clicker is just a left click to it's just bound to a left clicks on your mouse. So and then there's there's a couple other buttons on there that you can bind to like I think it's like right clicking, and whatnot. And there's a scroll wheel on some of them as well. So they work perfectly with with all these different libraries. Nice. I'm joining Twitter early, so week, a week or two before Twitter, find out what the hashtag is for the conference. And I always like to keep a column up on Tweet Deck to see what's going on. That way you can start to meet the people that are going to this conference, because that's one of the main benefits of going to a conference and not just going not just having these talks, but actually meeting the people and having meals with them and whatnot. So I find that if you go on Twitter, and you you see who else is excited about this conference, talking about it, then you can sort of read out to these people earlier. Next one is have lunch with the speaker. So if you are in a town where the conference is coming often speakers will fly in the day before the actual conference and the attendees as well. So if you can maybe reach out to a couple of the speakers and say like, if there are people that you are dying to have some sort of lunch or dinner with dying to talk with them, often these people, myself included, we're just sitting in our hotel room waiting for the conference to start, because we're in a city where we don't know anybody. So being able to reach out and say, Hey, would you like to go for lunch or grab a beer or whatever it is, is a really good, really good point. Nice. Next one, stay off your phone. This one kills me because I am anytime I feel awkward, you're in the elevator, you're in a group of people, you're sort of standing around and you want to break into a circle of people. It's awkward as hell. So what do you do, you look at your phone. So my thing that I do is I try to just awkwardly stand there, and just like not touch my phone, because if you're in your phone, you're not approachable. And those people, no one's gonna walk up to you and say, Hey, so on that same point, if you're a little bit more approachable, not on your phone. Now with your head down, you're sort of just looking around, what often do conferences I realized is like, nobody knows anybody at these conferences. It's all just a bunch of people that don't know anybody. So what I'll do is I'll just walk up to random people and say, Hey, I'm Wes, where are you from? And and that will often just kick off a really good conversation about what kind of stuff they're working on and whatnot. But everybody's a little bit awkward together, especially in the web development industry. So being able to stay off your phone and just like get past that, and I realized this is a very extroverted thing to do, but being able to just be like, Hey, what's your name, or have we met yet or something like that Is it really helps, because then you start to meet all a bunch of people. And then usually, when it comes around to dinner time, or whatever, there's just like a gang of you, people who have met the last couple hours, and then you just sort of have a little posse that you can, you can do with that - -82 -00:57:08,850 --> 00:58:09,960 -Scott Tolinski: you have if you have like the extroverted of the bunch, you know, if you insist that the extroverted of the bunch, you know, everyone goes and does this, then the introverted of the bunch will hopefully get talked to by one of the extroverted and then everybody can talk to somebody because, you know, half and half and just say you'll, you'll find someone to talk to you it just but like, like I said, Don't make yourself approachable and head down. You know, body language in your phone says, like, Don't talk to me. And it's important. And last one I was at, I've met so many great people. And we didn't even talk about web development, we talked about rock climbing, we talked about, you know, the area and the mountains, and all sorts of just stuff like that. And, you know, just from a standpoint of, you know, developers are all into code and all into stuff, but everyone's got hobbies and interests. And sometimes those things are just extremely interesting to learn about or can give you a new perspective on a different people in your industry. - -83 -00:58:11,130 --> 00:59:47,760 -Wes Bos: Exactly. I developers always have really cool hobbies and and getting into those hobbies, with people is is really fun. You can you can kind of bond a bit of a closer relationship with people. name badge, make sure your name badge is on at all times. And make sure that it's it's pointing the right way, because people always forget each other's names. So it's silly, but make sure that it is there. Some nice conferences have the name badge name on both sides of the badge. So if it flips around, you don't cover up your name. Some of the conferences, we'll put the schedule on the back of the name badge, what I like to do is just like, I don't know, try to like pin it to like a button so that it doesn't accidentally flip the other way. Because forgetting someone's name is the worst. And it happens a lot of conferences. So having that nice and visibles is important. And then practice your breakaway. So as much as it as great as it is to talk to random people. It also sucks to just sort of stand around with the same person all night or sometimes you meet some real doozies of people who will not let you go. And you want to talk to other people right? You want to you want to talk to as many people as you can. So practice your breakaway. There's a Jerry Seinfeld's comedians in cars getting coffee, he talked about this, or he said, he is really good at saying it was so nice to meet you. Because it's the nicest possible way to say I don't want to talk to you anymore. And then like and the what is the response that is so nice to meet you to see you later. - -84 -00:59:47,790 --> 00:59:48,900 -Scott Tolinski: Right? That enzyme - -85 -00:59:49,140 --> 01:00:11,010 -Wes Bos: practicing the brick way my brother in law is, he's a pastor at a church and you can get all kinds of people just like tackling your time and it's important to be able to To talk to all kinds of people, right? So he has an awesome breakaway, where you give the people the time that they need, but also you need to be able to break away from that conversation and not overstay Your welcome. Yeah, - -86 -01:00:11,010 --> 01:00:11,940 -Scott Tolinski: absolutely. - -87 -01:00:13,469 --> 01:00:18,840 -Wes Bos: I think that's it. That's all my my tips any you got any other tips or questions or anything like that? No, I - -88 -01:00:18,840 --> 01:00:45,330 -Scott Tolinski: think just be no be happy and excited to be there. And that positive energy is going to radiate outwards. And you know, people are going to want to talk to you, and I don't know, I get I get so much positive energy from from conferences, that I think that's something that, you know, it's just a great way to approach it. And just to be totally open minded, and I don't know, they're just such great places to learn and get excited about things. - -89 -01:00:45,540 --> 01:01:34,950 -Wes Bos: Yeah, huge advance for your career. I think like, if you are hoping to speak in 2018, maybe make it your goal in the next two months to put together two or three different ideas for talks that you'd like to give, and, and put together. Like a CFP, a couple of maybe like a couple, I don't know, seven or eight sentences about what the what it's going to include. Because the worst thing is, is when the conference talk is closing in six hours, and you want to submit a talk, but it's just not enough time to accurately pull together a CFP. So put that together in the next couple of months. And then 2018 is going to be a good especially in the next couple months, that everybody is planning their conferences right now, for 2018. So put those together, and then you'll you'll have a really good chance of being accepted to one of them in 2018. - -90 -01:01:35,100 --> 01:01:37,380 -Scott Tolinski: Nice good tips, sick tips, - -91 -01:01:37,770 --> 01:01:41,340 -Wes Bos: sick tips. You got any sick pics for the sick tips. - -92 -01:01:41,640 --> 01:03:49,680 -Scott Tolinski: I do I do I have a I have a sick pic here. And this is an app for your computer for Mac OS, specifically our computer. Yes, I'm so sorry for Windows people. But I think this stuff's built into your operating system. So you know, there's a lot of like window management libraries and things like that. Sorry, hit my mic. Yeah, so there's a lot of like window management libraries available or applications available, whether it's better touch tool or cinch or one of those for like snapping your windows in certain places. And I have found a nice, nice application that is sort of like Clippy, it's open source. So it's called spectacle, you can find it on GitHub, I'll have the link in the show notes, obviously. But um, it's basically Oh, organizing your windows. Now what it doesn't do is it doesn't do the mouse click and drag snap to a side. But it does all the keyboard shortcuts are fully customizable. And the one thing I really liked about it, obviously, other than it being free and open source is that it has things like it, the one the one shortcut to move something to the left half of your screen, if you hit that shortcut a second time, it'll then bisect, then half again, and it'll do a quarter. So I actually don't know if other ones I'm sure are the other ones that work this way. But if you do your shortcut to hit it to the left, it goes half and then you hit it again, it goes to a quarter. And it because of that the simplicity of it is just so nice to be able to snap your windows wherever you want, you learn a couple of keyboard shortcuts and all of a sudden, you can put something in the top left corner or something in the bottom right corner or something on the right side, like just have everything exactly where you want it to a good window management is supremely needed in Mac OS, because even after all of these years and having windows having this feature, it's like they cannot get it together and put this in the operating system. They gave you some like half assed split screen full screen view that no one's going to use. And this thing just really makes window management super easy, free open source all of the good stuff. - -93 -01:03:51,390 --> 01:04:27,990 -Wes Bos: That's pretty sweet. have to check that one out my I'm currently using better touch tool, which amongst 1000 other things that also does does window management. And I just got some keyboard shortcuts to snap them. And then I also use Devi, which does the the visual drag and drop of where you want the element to go. What does this spectacle do this one thing where this is what I really liked about better touch tool from the windows days where you would like move a window into the corner. And it would like automatically snap to that side of the screen or you move it to the top and it snaps to the entire screen. No, it - -94 -01:04:27,990 --> 01:04:32,130 -Scott Tolinski: doesn't do any it doesn't do any mouse snapping it's keyboard because it's all keyboard. - -95 -01:04:32,130 --> 01:04:34,170 -Wes Bos: Yeah, maybe I should be doing keyboard anyway. Yeah. - -96 -01:04:34,170 --> 01:04:57,570 -Scott Tolinski: And then once you get once you like that's the hard part is you got to learn the shortcuts. But once you learn, you know, I think it's Command Option F to do full screen or whatever. And it's not full screen full screen. It's like half the window take up the full screen, not the full screen mode. That's kind of unwieldly you know, so once you learn the keyboard shortcuts you're cruising I use this thing Absolutely. On the daily, nonstop - -97 -01:04:58,590 --> 01:05:02,220 -Wes Bos: spectacle Or do you get a spectacle app? Calm? - -98 -01:05:02,250 --> 01:05:05,610 -Scott Tolinski: Yeah. No. Is it spectral app calm? Maybe? - -99 -01:05:05,610 --> 01:05:07,470 -Wes Bos: I believe so. And links to their GitHub. Nice. - -100 -01:05:07,470 --> 01:05:21,450 -Scott Tolinski: Okay, so that's gotta be it. Okay, spectacle, app.com spectacle app on GitHub. I just got it from their GitHub page, which is exile journey. ECC z. Or Zed AR n y Zed ethical? Yeah. - -101 -01:05:21,450 --> 01:05:23,580 -Wes Bos: Can you please respect Canadian? - -102 -01:05:24,510 --> 01:05:27,720 -Scott Tolinski: I've had to learn a whole lot of new vocabulary since we started this podcast. So - -103 -01:05:29,010 --> 01:06:55,080 -Wes Bos: yay. All right. My sick pick is a YouTube video from a conference called how what the heck is the event loop anyway, and it this is one of those things in JavaScript. And Scott and I were talking earlier about some trouble he was having with a race condition. And then I was talking about how I found a bug in Apollo, which had a race condition. And the way that I fixed it was by setting a set timeout zero. And, and I always, I've always been using that like set timeout zero every now and then, for years, and I never really understood why it works. If you queue something up for zero seconds, it actually adds it to the end of the the events, the event call stack, rather than exactly where it should be in it's sometimes fixes bugs with race conditions. But there's this amazing conference talk back from 2014 by Philip Roberts. It's got almost half a million views on YouTube already. So you might have seen this already. But I've watched it probably 10 times. And it just explains how JavaScript works. How events are queued up and run. uses words like event loop, non blocking callback, a synchronous single threading and concurrency. If you ever like that stuff confuses you like it did me. This is an awesome 26 minute talk that you can, you can do. And he built this, he built this really cool tool that will help you visualize how events are added to the call stack - -104 -01:06:55,110 --> 01:07:13,290 -Scott Tolinski: nice. Love that. Check it out is the best way to learn that kind of stuff. Because like when are you going to devote all your time to it? I mean, just go and watch a video like that and have your understanding widen just a little bit. Now the sudden you learn about something that has existed and you've sort of worked around it without really necessarily knowing the the nitty gritty. - -105 -01:07:14,250 --> 01:07:34,590 -Wes Bos: Exactly, exactly. It's well worth your 26 minutes or for those who listen to their stuff at two X. It's well worth your 13 minute works. Cool. All right. That's it for today. Hopefully you enjoyed that. Make sure you tweet us at syntax FM. Thanks so much to Freshbooks for sponsoring and we'll see you next week. See ya. Bye bye. - diff --git a/transcripts/Syntax190.srt b/transcripts/Syntax190.srt deleted file mode 100644 index 9069e1878..000000000 --- a/transcripts/Syntax190.srt +++ /dev/null @@ -1,632 +0,0 @@ -1 -00:00:01,319 --> 00:00:05,730 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there. - -2 -00:00:05,730 --> 00:00:23,160 -Wes Bos: strap yourself in and get ready to live ski and West boss. So welcome to syntax is the podcast with the tastiest web development treats out there. Today we have I intentionally asked him not to tell me his last name, so I could try it, Brad to snuff. Wow, that - -3 -00:00:23,160 --> 00:00:24,660 -Unknown: is very good, sir. - -4 -00:00:24,839 --> 00:00:25,740 -Wes Bos: Is actually - -5 -00:00:27,300 --> 00:00:35,850 -Unknown: yeah, pretty damn close, man. This to nr is is how I say it. So to an hour to an hour. Yeah, I think you got it, too. And - -6 -00:00:35,850 --> 00:00:39,180 -Wes Bos: I I you French? I am. Well, my - -7 -00:00:39,180 --> 00:00:43,979 -Unknown: my family was from France. You know, a couple generations back so. - -8 -00:00:44,250 --> 00:01:00,119 -Wes Bos: Oh, that's good. Well, that's sort of a thing on the podcast now is we only have French Canadians on. We had ATM from missive, who is from Montreal. So only French Canadians Come on the podcast from this point forward. - -9 -00:01:00,869 --> 00:01:06,540 -Scott Tolinski: I mean, I'm I'm actually I'm French Canadian. So they're like a little bit my grandma, - -10 -00:01:06,590 --> 00:01:07,200 -Unknown: are you really? - -11 -00:01:08,370 --> 00:01:10,560 -Scott Tolinski: Marsh and from Montreal? - -12 -00:01:10,620 --> 00:01:15,090 -Unknown: All right. Well, we'll allow you on then you should rename it to syntax. - -13 -00:01:19,860 --> 00:01:58,950 -Wes Bos: Oh, anyways, today we have Brad on to talk to us about migrating, deploying and hosting WordPress, we'll talk about and introduce him in just a second. Today, we are sponsored by Netlify, which is going to post your website it's gonna it's like the easiest way ever to host like a Gatsby website or static site, or pretty much anything you want to host you throw it up on there, and it works out well. And a new sponsor today is Hasura, which is a instant real time graph qL API that sits on top of a Postgres database, which is pretty nifty. We'll talk about them partway through the episode. So welcome, Brad. How you doing today? - -14 -00:01:59,060 --> 00:02:01,110 -Unknown: I'm doing great, man. Yeah, thanks for having me. - -15 -00:02:01,620 --> 00:02:20,780 -Wes Bos: Oh, yeah, you're welcome. I'm always happy to have Canadians on the podcast. I was laughing because people always say I'm in Ontario. And people always say like, oh, you're on the east coast. And I said, like, No, no, like, even just because we line up with New York doesn't mean we're on the east coast. Like there's a whole much there's a whole lot more Canada. To the east. - -16 -00:02:21,060 --> 00:02:28,310 -Scott Tolinski: I still feel like, even after you say that, I'd still consider it to be the East Coast, just because it's relation to New York. Yeah. - -17 -00:02:29,100 --> 00:02:32,690 -Unknown: It's definitely Eastern Canada. But it's it's not the coast. - -18 -00:02:34,110 --> 00:02:35,160 -Ontario. No. - -19 -00:02:35,160 --> 00:02:41,130 -Don't forget about all of cabac also the second largest province in the country. - -20 -00:02:41,910 --> 00:02:48,300 -Wes Bos: Some of us do forget about Quebec. Anyways, you're from Nova Scotia, which makes you a merit timer. - -21 -00:02:48,300 --> 00:02:48,930 -Unknown: That's right. - -22 -00:02:48,960 --> 00:02:58,050 -Wes Bos: So yeah, well, you want to introduce yourself, what is it that you do you I know you have a company? You're actually our I think our very first sponsor on this podcast many years ago. - -23 -00:02:58,229 --> 00:03:50,190 -Unknown: Oh, yeah. Yeah. I've been a fan of your requests. And so when you said you're gonna start a podcast as like, I want you know, on that, yeah. So my company is delicious brains, Inc. We do three plugins for WordPress, and SAS app called spin up WP. And we've just launched two of those products this year, actually. So we went from having two plugins, to having three and a SAS app just in 2019. So, so lots of changes for us. We're remote team of 10 people. And so we've got some in the UK, some in Pennsylvania, and a couple in Ontario, actually. Oh, awesome. And then myself, and we've been going since I guess 2013 is when we launched our first product. So been at it for a little while now. - -24 -00:03:50,280 --> 00:04:12,330 -Scott Tolinski: So when you when you started that company, was the thought process. This is the worst part about working in WordPress, let me try to make it better. Or did you just like to be masochistic? Because like, when I personally work with WordPress, I like want to stay like the deploying process of everything is just always my least favorite part of it. So the fact that you would make that your business? - -25 -00:04:12,870 --> 00:05:23,160 -Unknown: Yeah, yeah, I was actually working at an agency in Vancouver. And I had the problem of, you know, going from dev to staging to production. And so I cobbled together, I actually hacked up a plugin that I found that did exports have the database, and I hacked it to export but also do a Find and Replace, to kind of make the migration to other environments. Super easy. And then I just threw it up on wordpress.org and just sat there for years, probably three or four years, actually, before I kind of realized, Oh, this thing has a following. Now, maybe there's a business here, you know, maybe this is something I could turn this into So I did a little bit of customer research. So I added like a sidebar to the free plugin and asked people if they'd be willing to pay for like, you know, the push and pull features and some support. And people, you know, there was I get like, 300 responses before I decided, hey, there's, I think there is something here. So nice. Let's start, we started coding. - -26 -00:05:23,330 --> 00:06:00,150 -Wes Bos: Yeah. Interesting. So maybe I should real quick, just explain what these are. For people that don't know, the big plugin you have is WP migrate DB Pro, which allows you to push and pull your database and also your files as well, from local to production or staging and vice versa. And it's it's a huge tool in many WordPress developers toolbox because of how painful that was, like I, I still remember the scripts that I wrote to find a replace strings in a SQL file, when I was doing a lot of WordPress, and it's really painful, especially if you goof it up. - -27 -00:06:00,690 --> 00:06:20,820 -Scott Tolinski: This is like the scariest thing to write. Because you're once you get into, I mean, not even just manually editing the database. But like, once you get into writing a script that you know, will modify all these records. Yeah, that that really scares me when I die, especially if it's my own work. My own work, I'm like, Oh, I don't know if I'm gonna break this or not. - -28 -00:06:21,600 --> 00:06:57,420 -Unknown: Yeah, there's, there's weird stuff that you don't even realize that we've tackled for you, and that plugs into. So like, when when you go from like MySQL, 5.0 to 5.1 or something, there was some weird difference between those two databases that we had to accommodate. I can't remember what it was now. But But you know, we were we were just handling that we added that feature. And so yeah, there's there's just weirdness. Basically, when you're migrating from one environment to another set, so that we, you know, we there, there therein lies the opportunity, you know, for us to take care of all that stuff for you. - -29 -00:06:57,990 --> 00:08:09,060 -Scott Tolinski: Yeah, and especially as workflows change and become more modern, I remember that was like a huge thing, because I was never, I was more of a dribble person. And in my agency work, and by the time we were into WordPress, there was like, sort of like a deploy person, and you just push it off to them. But in the Drupal world, that was such a huge thing, when Git was becoming more popular in version control. In general, how do you version control your database records, because so many of these things, you don't just want to do a database poll, and then just throw up the database, you want to keep it all, either in version control, or you want to pull them out. And somebody came up with this really great plugin that essentially took all of your database records and stored them as a custom Drupal plugin. And then all you had to do was install that Drupal plugin on the new database, it pulled in all of the data. And it was like really super fascinating. It was not it like it never got to the point where it was like very seamless or excellent. But it solved a lot of those issues. And I remember there being such a huge void of like, Okay, I get that we should be using version control here, I get, we should be using these modern deployment practices, but I don't necessarily know how to do it. So I find tools like yours to be endlessly valuable. - -30 -00:08:09,300 --> 00:08:27,360 -Wes Bos: Alright, so I maybe should go through the other two plugins real quick as well. These are two I've never used myself. But it looks like you have one called WP offload media, which will allow you to offload your images from that local uploads directory to something else like s3 or digitalocean. Is that right? - -31 -00:08:27,600 --> 00:09:38,010 -Unknown: Yeah, yeah, that's pretty much it. It allows you to get your media in your WordPress Media Library, off of your server and onto object storage. The reason I made that plugin actually, is because I was, again, this is just a fork of another plugin that I needed, because I was I was load balancing a WordPress site. And what happens is if, if you're uploading your files to server one, and then you know, they don't end up on server two, right? So then you need to either set up some kind of like shared drive between the servers, or in this case, we just upload the images directly to s3. And then you've got a you know, everything's in object storage, so no problems. So that was kind of the reason for that. But now, you know, there's a bunch of reasons why our customers use it. It's kind of some people use it as like a redundant backup. Hmm, some people use it as a like, if they're serving video files or like have huge files, then they want to get those off the server anyway. So there's there's all kinds of use cases that people want it for. - -32 -00:09:38,029 --> 00:10:02,159 -Wes Bos: Yeah, I would imagine in lots of WordPress instances is it doesn't make sense to have your media on the same server that's hosting up your WordPress, especially if you're moving towards one of these, these hosts that are what's the word for a host that you can't change the files once it's on the server, like a Heroku or a now or something like that. What's the word Scott? Oh, - -33 -00:10:02,159 --> 00:10:02,789 -Scott Tolinski: beautiful, - -34 -00:10:02,789 --> 00:10:04,620 -Wes Bos: beautiful house thing. That's what I'm looking for. I've - -35 -00:10:04,620 --> 00:10:07,020 -Scott Tolinski: never heard that. I've never heard it be referred to as that. - -36 -00:10:07,039 --> 00:10:08,419 -Unknown: Yeah, me neither I - -37 -00:10:08,419 --> 00:10:40,260 -Wes Bos: mutable hosting would be that, like, you have like a WordPress website and you deploy it to your host. And then once it's there, once it's running the files on that host can't change, right? Because like, that's your deploy. And if you want to, you have to deploy a new instance, if you want to change something about that website. WordPress is this kind of like this weird thing where like, you can deploy it. But then like, also, it can also change on the server because of media uploads, and like plugins get updated on the server, and then you run into sort of this hellish spot where things are changed on both ends? - -38 -00:10:40,350 --> 00:11:39,750 -Unknown: Yeah, it's kind of a security dilemma as well, right? That PHP has access to change the PHP. Yeah, right. So like a lot of managed WordPress hosts will actually lock that down. So I know on WP Engine, and now flywheel, because WP Engine acquired flywheel recently. So if you had a plugin, say that received an API request from an external source, it doesn't have access to change the PHP file. But if you're executing a PHP file, when you're logged in, then that php file does have access to change the file system. So they're limiting it to logged in users, which certainly helps the situation, but throws a wrench in the gears for plugins like mine, who are trying to do things remotely, right. So got some extra work to do for their platform as a result of that. That's not not easy, I - -39 -00:11:39,750 --> 00:12:47,520 -Wes Bos: bet. Why don't we start there? Let's talk about like, like migrating a WordPress, I'm a super in this headspace right now. Because I spent, I maintain a number of different WordPress websites. And I spent a couple days last week just totally redoing some some WordPress stuff. And I had to do the whole song and dance of Okay, so the client has changed their remote version with both content and media uploads. And I have my own version, which is in a Git repo. So then I had to pull it all down. But then I had been working on it first, like I had, like, been doing some dev on it. And then I'm like, Oh, I need to pull the content. And then I ran into the situation where like some of my custom fields, and some of my custom post types were in the database. So I had to make sure to bring those to code first. And then, and I still lost stuff at the end of the day. And I was like, Oh, this is hard. So like, can you tell us like what's the best way to to migrate a WordPress where you have a remote, you may maybe even have a staging. And you have your local? And at any given time data, and code is changing on all three of those things? How does that even work? - -40 -00:12:47,580 --> 00:12:48,960 -Unknown: Yeah, it doesn't. - -41 -00:12:50,279 --> 00:12:57,840 -Wes Bos: And this is not like a WordPress problem, either. This is like a this happens with any CMS or anything where things are changing at any given time. - -42 -00:12:58,020 --> 00:15:42,330 -Unknown: Yes, it is a CMS problem. It's not traditionally an app problem. If you have an app, it's pretty rare that you run into the situation where you're going to be changing a lot of the data locally that you're going to need to move that data to another environment, it's usually just schema changes. You needed to kind of track with an app. But yeah, it's CMS. CMS is or boger. For this, like, Yeah, because of a lot, a lot of the data that's stored in the database is like structural. Right. So like, you just mentioned custom fields, which that's stored in the database. And yeah, it's a problem. And like pages like you, yeah, if you need to add some new pages to your site that you're doing some development on, those will be going in the database as well. So we actually worked on solving this problem for almost three years, and, and a lot of threw a lot of resources, and then pull the plug on it completely. So it was it's one of those heartbreaking stories. But we did we did when we set out the goal was like a moonshot, right? Because we knew this was a super hard problem that no no one had solved. Right? And, and in the end, you know, we didn't make it to the moon, right? So it's, I mean, it's, it's one of those things like, if you're going to have a big lofty goal like that, sometimes you're just not going to make it. So what we recommend now is that is scripting, which is essentially the way that that tool was working. And so let's say you need to create new custom fields and advanced custom fields, like you would instead of like doing that via the UI, you would script it in your code with PHP, like creating those fields so that you can run it in staging and then production when you need to, without like, overwriting the database or anything like that. And when you refresh your local copy of the database, you can just blow away everything, and then just run that script again and you get your if you can kind of do a dry run of your your Yeah, your live deploy, if you have that script that you can just run, so you get that huge advantage. So it's, of course, it's more work right to like to create these scripts. But the you get some pretty massive advantages by doing it. So that's what we recommend. That's what we do on our on our site. We've got all of our sites on WordPress, and, you know, whenever we're doing development, that's that's what we do. We just run, create a script and then run it when we deploy. And, and it's it works great. It's just more work. - -43 -00:15:42,990 --> 00:16:11,580 -Wes Bos: Yeah, I think the the benefit of that also is that you get your fields and your post types in your version control. And that traditionally has not been something that, like, has people have been as part of version controller, oh, yeah, you got to go in there and make new fields and make sure they're exactly these names. And exactly these post types, right. And I was happy. It was like 500 lines of code to put them into my, into my theme, but it works great, right? - -44 -00:16:11,880 --> 00:16:33,299 -Unknown: Yeah, there is a, there's a little hack that we use once in a while to, if if we're being lazy, which is. So what we'll do is, let's say we need a new page or a new post, for some piece of work that we're doing. We'll just go to the live site. And we'll create that on the live site, but just leave it in draft. - -45 -00:16:33,390 --> 00:16:34,020 -Okay. - -46 -00:16:34,140 --> 00:16:49,409 -And then we'll maybe script switching it from draft to published in our script. So it's kind of like a little shortcut. And it's just yeah, it's way easier than scripting the whole creation of a post. That's that's a good point. - -47 -00:16:49,409 --> 00:17:46,070 -Wes Bos: I like that. All right, let's switch to talking about like, the like migrating your database as well. So when you have a, like, you have a local version of your website that has the updated theme, as well as some updated content that is in the database. What does that look like? When you need to then push that to a remote WordPress, install that to either your staging or to your production? Because like, the way I usually do it is I'll just like, I'll just pull everything down. And luckily, the websites I work on where I can just tell people like, Hey, don't touch the website for the next like, like three hours. I'm working on it right now, though, usually, like, okay, that's fine. Or, or you can like, look at what has been changed in the last little bit. And then I'll make my changes, and then I'll just push that all live. But I know like, obviously, you have a plugin that will allow you to selectively push stuff like what does that look like for you? Or for someone who's doing like maybe a larger website? - -48 -00:17:46,410 --> 00:18:51,690 -Unknown: Yeah, I mean, some of our customers actually will, you know, they'll pull down the site, make changes to the database, and then push it up to their production. We don't recommend doing that. Because in the time between when you pull down and you push up, yeah, you know, the production database may have changed. And so you could lose those changes. So as a general rule, we avoid encouraging that. But, but if you've got a brochure aware site, that never the bait database almost never changes, you can kind of get away with it. But yeah, I mean, pushing the data with migrate is pretty easy. Like you just install the plugin on both sides. And you stick the connection info into one side, and which connects to the other side. And then you hit push, and it sends your data over the wire from one plugin to the other, and over HTTPS, which is important. But yeah, other than that, that's that's all you have to do pretty much. And you can just push your data and pull it down as well. So - -49 -00:18:51,900 --> 00:19:40,710 -Wes Bos: Oh, yeah, I always make sure that I take like for backups of the database, because oh, yeah, that's kind of this the scary button to push. I know, it's part of the plugin where it will automatically back it up for you. But I always will go and do it myself. Just because like, that's always nightmare scenario, when, when something could go wrong, because like the code I haven't get, and maybe we'll talk about that next. But the data isn't necessarily versioned. Like that. I know, some CMS does have really nice versioning, like built in at a low super low level. And that's the benefit of a lot of these new CMS is out there where they start it from like a versioning to anytime you update anything, you can always look back at the data and say like, Okay, this had changed, and you always have access to the older version of that data. But that's not always the case in WordPress land. - -50 -00:19:40,950 --> 00:20:21,420 -Unknown: No, I think the only version of WordPress is on the posts and the pages. Yeah, those are all version. So anytime you update one, it kind of saves a version of it. But yeah, but versioning is kind of a separate issue from backups, right? Because even if you have versioning, you're still going to want to create a totally up your site, right. And and I would highly recommend everyone have, you know, hands off just recurring backups going. And if you if you're on a managed WordPress host, I would definitely make sure that they're working. Because the illusion of backups more dangerous than not even having them on right. - -51 -00:20:21,450 --> 00:20:47,400 -Scott Tolinski: Yeah, right. I think that's a that's like a common thing is that like, Oh, I'm taking backups. Well, have you tried any of your backups? No. Well, I guess you're not taking backups, then. Because you don't know if they actually work. Right. And that I that's something that I probably I've never done that I I'm like, kind of terrified. I take I you know, I have regular database backups. But to be honest, I've never tried to load one of those database backups. And I think that's something that you got to do. - -52 -00:20:47,670 --> 00:21:51,390 -Unknown: Right. I think there is some talk about automating the testing of backups to Oh, yeah. And basically, you know, getting a report kind of on a regular basis, maybe it's weekly or monthly, that says, hey, we tested your backups. And they were, you know, that the zip files are not corrupted, or like, you know, it's good to know, right, that's, it's like one of those things like the, you know, things are still running smoothly. And, you know, so yeah, I think that's, that's something that we're planning to do in the future for our new SAS app called spin up like that one. We do daily backups currently, for that app, and but we're not testing the backups. We're leaving that up to you right now. And I think most people are used to that. Like, that's kind of the industry standard. Right now. There's very few services that are testing your backups and telling you that they're good. But I think that would be a nice kind of value add Yeah, customers to have that reassurance. - -53 -00:21:51,420 --> 00:22:18,450 -Wes Bos: Totally. When I was in university, I did a co op at an investment bank. And every once every six months, they would have a Saturday, where someone would literally just go in and kick the plug. And like they would see if they could get it back. Right. Like if the worst case goes wrong. And our investment machines go down. like can we get back up to speed? And they obviously did it on Saturday when the markets were closed, but kind of a scary thing to try. - -54 -00:22:18,810 --> 00:22:31,500 -Unknown: Yeah, that reminds me of Chernobyl. Yeah. Because I'm pretty sure that was that whole meltdown was due to a test there. They were testing the safety features of the PowerPoint. - -55 -00:22:31,710 --> 00:24:19,680 -Scott Tolinski: I like can't bring myself to watch the TV show now about it. Like I heard, it's awesome. And I just I can't bring myself to do it. It's too gnarly for me to know, like the realities of that situation. Oh, all because of a test. Ah, so hosting WordPress without some of these tools might be difficult. But hosting the front end of your headless WordPress site should not be difficult. And that's where we turn to services like Netlify. Netlify is our favorite host over here at syntax. And let me tell you, you're going to want to try Netlify. Because this is one of those services that you try it and you love it, you basically login, you select your repo, and you add your build steps. And it takes care of everything from continuous deployment to CD ends, to SSL certificates, and some more acronyms of all sorts of different types. Netlify is absolutely incredible. And we invite you to sign up@netlify.com forward slash syntax, and sign up and deploy a site and then head to Twitter immediately. And tell us just how surprised you were at how insanely easy The service was, because that's what everybody else does, even though we didn't tell them to do that, because it's that cool. So head on over to netlify.com forward slash syntax and check out all of the insane features they have over there, including some of the new stuff like Netlify Dev, which allows you to have your entire serverless platform on your own laptop and Netlify edge, which is their new custom Delivery Network designed for blazingly they blatantly and they they I think they need to add one fire emoji in there next word blazing sites and modern workflows. So check it out. netlify.com forward slash syntax. Cool. So let's get back into it. All right, - -56 -00:24:19,740 --> 00:24:51,330 -Wes Bos: so we're gonna talk about deploying as well as hosting WordPress. But before we get into that, I'm curious, a lot of people have asked me about this. And I get questions like this all the time. Like, when you have a WordPress in get in version control, like what goes into, like, what goes into your WordPress repo and what doesn't go into it, like what do you ignore? And how does that look like? And I've heard different answers from ever absolutely everybody. I'm curious, Brad, what do you do for version control on a WordPress site? - -57 -00:24:51,810 --> 00:24:55,410 -Unknown: Nothing. We don't do anything. No, I'm just kidding. - -58 -00:24:57,240 --> 00:24:58,230 -Wes Bos: There's v1 - -59 -00:25:00,000 --> 00:25:00,600 -Unknown: We will have - -60 -00:25:01,050 --> 00:25:02,790 -the old boy although - -61 -00:25:02,820 --> 00:28:58,530 -no, I mean, the the thing would be you would ideally want, right? It's only the coat your custom code would be in. We're in source control, right? The Yeah. So like, if you've got some custom theme or some custom plugins, like that's it would just be that stuff. And you can totally do that. So the way we've set up our WordPress installs is we use composer. So we'll use composer to manage WordPress. So WordPress would be in like a subfolder of the main directory, and composer would be used to install it and and update it. And then any plugins that are on the wordpress.org repo, we also use composer to manage those. So when so there's there's actually a mirror a composer repository mirror of the wordpress.org repo, it's called w packagist. So w or w packages. So WP packages is not WP packages. It's just one piece of packages. Yeah, W packages 70. Okay, yeah. So so there's up on a link, please. So there's that. So if you need any plugins, for.org, you can use composer to manage those as well. And that's, that pretty much licks it for you, right? Like you've you've got composer managing your core. I mean, if you've got a scene from the from.org, you could put it in there as well. But let's say let's say let's make this harder. Let's say you've got some plugins and themes that you've bought, okay, from a third party vendor. Yeah, now things get more complicated, right? Because there is no composer repository. For most of those, if you're using one of our products there is we actually have a composer repository, so you can manage all of our products via composer as well. But yeah, if they're, if they don't have that, then you're probably going to have to put it in Git. Unfortunately, Either that, or you need to do a git ignore and ignore it, and just have it installed. And maybe you do your updates rate on the server, or you update locally, first test it and then update on server once you've tested that, it's all good. So yeah, it's a it's a bit of a wild west. So I we've had been having a debate about this internally a little bit recently, as well, because managing plugins and composer works out. Okay. If you don't mind deploying your site every time you need to update plugins, yeah, right. But let's say you've got, you know, the Yoast SEO plugin installed, and it's every week, every week you need to update. It could be you know, if it's a blog, or, or a site that's not that, you know, mission critical for you. Do you really want to be doing a git deploy? Or, you know, whatever your deployment process is, do you really want to be doing that every week for that site? Or would it be easier just to log into the dashboard and click Update? Yeah, right. If the answer if the answer is the latter and for me it is then I don't I don't bother with composer I just keep the plugins installed on the server and just click update and you know test to see if my blogs broken and and it's not so all cool you know, carry on. So I find that less of a pain but if it is mission critical side or you're doing client work and you don't want downtime, then composer gives you that that extra control over the versions of the software on on your site. So - -62 -00:28:59,040 --> 00:30:17,430 -Wes Bos: Oh, yeah, we should say for our listeners, mostly a JavaScript heavy listenership here, composer is similar to like an npm install, but you just you can't use composer to install PHP packages, right? Oh, yeah, I'm just gonna tell a little story of I had that exact problem where I had like, when I was doing a lot of WordPress, I had like a starter WordPress I had and that was just on get like the whole WordPress core, all of my plugins, my base theme, everything and I use that to like, start a new WordPress every time I needed to do one, I would just clone it and that I would keep that up to date. And then I got DMCA by one of the paid plugins that I like I paid for, like, I think it was like a custom custom taxonomy reordering plugin where you could drag and drop the order of a taxonomy. And then the author rightly so the author of that plugin, DMCA cuz then people wouldn't have to buy it. They just go on GitHub and download it and I never figured it out. I think Just like I just used it as a private repo from there on out, because I could never figure out how to open source. Obviously, it could just open source part of it. And then I'd have to like, copy paste it. And it was like, too much trouble to allow the Yeah, the world to have access to this. I just made a private, right the rest of the time. - -63 -00:30:17,460 --> 00:30:31,170 -Unknown: Yeah. So if anyone is interested in, you know, using composer to manage their site, we've wrote written a bunch of articles about this on our blog. So we can link those up in the show notes, and people can consult them for trying it out. Definitely. - -64 -00:30:31,500 --> 00:31:14,490 -Wes Bos: Yeah, I think that's probably worth it. Because WordPress gets a lot of hate around, I think, because of how sloppy it can possibly be. Because you have this issue of just data everywhere, and plugins, here or there. And a lot of the stuff, we talked about a lot of these problems, and for a lot of people who don't either know or care, they just kind of, they just kind of go for it. And it's the Wild West, and eventually something bad will happen. And then there's a sort of this other part of the WordPress world, which is like people who are putting good time and resources and are good PHP developers trying to like fit solve these problems. And I think that's why WordPress is sort of gets a bad rap. And in some cases, people aren't willing to, to go the route of understanding what is composer and whatnot. - -65 -00:31:14,550 --> 00:31:15,420 -Unknown: Yeah, well, I - -66 -00:31:15,420 --> 00:31:35,880 -Scott Tolinski: think you have a lot of people that maybe WordPress is their first Yeah, foray into database development, or CMS development or even application development with a server component. So just that that aspect of things, you're inherently going to have some sloppy or newer coders coming in to try to work in these things. - -67 -00:31:35,910 --> 00:32:38,040 -Unknown: Yeah, I think, I think the PHP side of WordPress, which, at this point is becoming less and less, right, because WordPress project has really embraced react. Gutenberg, which is the visual editor that's basically taking over the entire dashboard is all done in react. So, you know, the PHP side of WordPress is kind of shrinking a little bit. And kind of as things go forward, I think, I think it'll shrink more and more and more, right. And hopefully, the part that's, you know, the small part, this left gets updated and more modern, as we drop support for older versions of PHP. That's really the thing that's holding the WordPress codebase back or has held it back is that there's been this fanatical support for all versions of PHP, right, like PHP. 5.2, was dropped relatively recently. Right? And 5.2, I think is over 10 years old. Wow. - -68 -00:32:38,040 --> 00:32:38,670 -Wes Bos: Really? - -69 -00:32:38,730 --> 00:32:57,450 -Unknown: Yeah. It's crazy that we we still supported that. Yeah. But the reality is, you've got lots of web hosts out there running old servers with old versions of PHP, stone and old versions, WordPress. And so if WordPress did an update, that would break all of those sites, right. So it has - -70 -00:32:58,410 --> 00:33:00,510 -Wes Bos: a huge portion of the web would go down. - -71 -00:33:00,540 --> 00:33:37,830 -Unknown: Yeah. Right. So that's, that's the reason for it. But as the reason doesn't really matter that much to PHP developers who get in there and see the state of things and are just like, uh, you know, like, this is horrible. You know, there's no namespaces object oriented programming is kind of there, but not really. So it's, it's in a pretty sorry, state when you're, let's say, you're coming from the Laravel world, like, it's, it's, it's pretty shocking if you go from Laravel to WordPress, PHP development. - -72 -00:33:38,790 --> 00:33:49,020 -Scott Tolinski: And that's really the benefit of starting when Laravel started, right. I mean, they they didn't have to deal with all this legacy that WordPress is forever indebted to. - -73 -00:33:49,110 --> 00:34:01,830 -Unknown: Yeah, well, and larvell takes the complete other tack, like when a new version of Laravel comes out. They're like, it's PHP seven point, whatever. Plus, yeah, like, if you don't get with the program, too bad. Yeah. - -74 -00:34:02,190 --> 00:34:24,060 -Wes Bos: Yeah, I think that that's probably a benefit to the audience that Laravel has is that, like, it's mostly professional PHP developers using this thing? And they are able to say, like, you know, what, moving along, you we're gonna keep on trucking. We're cutting this stuff. Here's your upgrade path. And I know, there's even tools out there that will automatically upgrade it for you. - -75 -00:34:24,230 --> 00:35:03,480 -Unknown: Yeah, it's great that PHP has, you know, end of life a lot of its stuff and it's on a it has a much stricter end of life schedule now, where it's like, you know, I think it's PHP 7.1 is end of life next month in November already, right? I feel like see PHP seven just came out, but you know, yeah, relatively speaking. You know, so like, so they're, yeah, they're, they're stopping doing security updates. So which is also forcing web hosts to like, take this more seriously. And, you know, keep their servers updated and stuff. So it's all good. - -76 -00:35:03,540 --> 00:37:28,650 -Wes Bos: Yeah. So our new sponsor today is has surah. They are instant real time graph qL on Postgres. Postgres is a very popular, highly scalable database. And Hasura is a graph qL server that's going to sit in front of that, and do all of the heavy lifting, it gives you the ability to get a graph, qL server up and running really, really quickly. It's pretty cool. You go to hasura.io, and deploy one to Heroku, just to get immediately up and running and started with it. And sort of the way that it works is that you go in create your your data types, and you can set up all your relationships. And they're going to give you an entire interface for working with your graph qL server, they have ability to deploy to Heroku, or to Docker, Digital Ocean, Microsoft, Azure, AWS, Google Cloud, you name it, like I personally have, have seen this at a couple conferences, and I've gotten a demo from them a couple months ago, but I think it's pretty nifty. And some points they've sent over for us to talk about here is that it's a real time graph qL database on Postgres, so you can either grab a brand new Postgres database, you can put it on top of an existing one that's out there, they have this concept of remote joins, which is pretty cool. And what that means is that they can configure relationships between independent graph qL schemas, so you might have your own one, but you might also pull data from GitHub or from stripe, and you can sort of just stitch that into a single schema, which is graph QL. They also have authentication as like sort of first class support, which is pretty cool, because of course, these demos are neat, but you need to be able to secure down and lock down all of the data that they have there. Finally, they're working on making it super easy for developers to write custom business logic in REST API. So whether that's a serverless function, or micro service, something like that, and you can write those wherever you want, and then expose them via your graph. qL so you're looking to do graph qL, definitely check out hasura@hasura.io. Thanks so much to Hasura for sponsoring, let's talk about deploying and hosting WordPress. So seems like you've made a company on on hosting WordPress. And so I wanted to like sort of get you're not as like a big ad for your company. Obviously, we're interested in that's why we have you on here. But like, like, what are your thoughts on like, what's the easiest way to host a WordPress? Or what's the best way to do it and tell us what the spin up WP does? - -77 -00:37:28,880 --> 00:40:23,610 -Unknown: Yeah. So I would certainly wouldn't recommend spin up WP for everybody, right? It's not, it's not the magic bullet for every situation. So basically, spin up WP allows you to connect to digitalocean server or linode server, any cloud server, anything with an IP address, really. And it will set up the server for hosting WordPress, like really well, like it'll set up full page caching, and just make the site run fast, like really fast. And so that's basically what it is in a nutshell. But the issue is, you're kind of on the hook for making sure that that server, you keep the software updated. You don't have to babysit it. Yeah, you have to babysit it. Exactly. So we try to facilitate that as much as possible. Like that's our that's our mission with this product is to basically it's basically training wheels for for developers that want to manage their own server, right? Yeah, so it's, we're trying to make it much, much easier to manage your own WordPress server. Because there's some massive benefits you get from doing that. And you get full control of the server. And and you can tune it how you like, you can change the full page caching rules, if you if you need to, which which can really have a huge impact. So like, just just to give you numbers on that. So like a full full page cached page can be served in like 30 milliseconds, right? Like a cache page. If it bypasses the cache and hits the PHP, and the MySQL, and the object cache, you're talking like 300 milliseconds plus, right? So like, 10 times slower, right? And 300 milliseconds is a really low. That's that's a very conservative estimate. Sometimes it could be over a second to load a page. It really depends on the page and what how much process is going on. If if there's already something in the object cache, if the object cached prime or not, or if it has to go and query MySQL, it can really slow down that page load. And so when you're talking about the web, right, like, speed is everything. It's so important, right? So So this is where I think spinnup lp comes in, like it's Looking for that kind of control and optimization and performance and you're willing to babysit the server? That then it's, then it could be a solution for you. But if you're not willing to babysit the server, then you really ought to go with a managed WordPress host. Right? Because that's what they do. That's why you pay them the extra bucks, right? Yeah. - -78 -00:40:23,630 --> 00:40:26,850 -Wes Bos: What what are some examples of managed WordPress hosts? Some people know? - -79 -00:40:27,920 --> 00:41:29,940 -Unknown: WP Engine is probably one of the bigger ones. I mean, go GoDaddy, I think is the biggest web hosting company in the world. And they're probably the biggest WordPress host in the world as well. Yeah. And then you've got Paisley Paisley has been around for a long time. I think they were like the, they were basically the original manage WordPress host before, before the term was really coined. Paisley was has been around. And they seem like a really great host. In fact, I think if I needed to manage WordPress hosts, I'd probably go with Paisley. And then flywheel which just got bought by dopey engine has been a big one. Site grounds and other one. Oh, yeah. And kinsta concert is another big one as well. And the list goes on. You know, there's a lot of and it shows, of course, wordpress.com really could be considered a managed WordPress host now as well, because you can Oh, yeah, yeah, you can install plugins now on wordpress.com. So can you - -80 -00:41:29,940 --> 00:41:30,600 -Wes Bos: really - -81 -00:41:30,629 --> 00:41:50,610 -Scott Tolinski: Yeah, yeah. It's the whole thing is a little difficult, though. The whole, like managing your accounts and knowing where the sites are. I found the it's not exactly you have to log into here and then go to here. And then here's your sites, but I just I think they maybe miss miss the mark on some of those usability aspects of nailing down multiple accounts. - -82 -00:41:50,879 --> 00:42:17,460 -Unknown: I agree with you on that. They actually they created a separate dashboard experience. Yeah, but it doesn't, it doesn't. You can't do everything in there. So sometimes if you need to do something you have to bounce to like the the regular WordPress dashboard. So it's Yeah, that's the disjointed experience. I think that you're talking about there. And so yeah, so it is Yeah, I agree. I'm not a fan of that either. - -83 -00:42:18,920 --> 00:43:19,560 -Wes Bos: Yeah. Oh, this is interesting. The spin up WP because I think like we have this problem in JavaScript world as well, where you can go on one side of the spectrum and spend five bucks on a Digital Ocean server and host it on that. But then you have to do everything yourself, you have to worry about backups, you have to mean like you have to like sudo apt get everything and before you know it, you're your assist admin. And then on the on the totally the other side of the spectrum is you can go like sign like a now or a Heroku or something like that, where it's all done for you. And that's great. And it's just a little bit more expensive. And I've always wondered like, like, Where's the thing in the middle where I can pay for the the server space myself, but still have like something that will help me babysit this thing? So I don't want to have to worry about it too much. And that sort of seems where what that is for this? Is that right? That sir? I'm trying to gauge it. - -84 -00:43:19,680 --> 00:45:33,570 -Unknown: Yeah, that's that's a very good way to gauge it. That's a very good description of it kind of sits in the middle between managing and entirely yourself. And the managed WordPress hosts kind of sits in that nether region that that no one has filled until now. I guess. There has been, you know, we were very much inspired by by Laravel. forge on this. Yep. And we there's tons of people that host WordPress sites through Laravel forge because it's a way to quickly get set up with a server running an optimized LAMP stack. Right. But yeah, for doesn't go the extra mile for WordPress, because it's not what it's designed for. It's designed for Laravel apps. So we thought like, what if we did go the extra mile for WordPress? What if we built Laravel forge but for WordPress, like what would that look like? What would be the? Because we're because essentially, we're hosting a very specific app. What can we do beyond what Laravel forge does? Because Laravel job forges and know what app you're running. So it can't it can't guess what you might need for that specific app. Yeah. But we can, right? We know it's going to be WordPress. So we can we can backup your site and your your site files and your database, for example, right without any configuration needed, right? You just flip a switch, right? And so we can do all kinds of stuff. We can configure your full page cache, right. So like, there's a bunch of really cool stuff that we can do, knowing that I am deploying WordPress, right. Totally. One of the other things we're trying we're going to do that we haven't done yet is we're going to like send monthly or weekly emails that say like, Hey, here's the things that you ought to be doing with your server. Right? So, for example, I mean, you guys have run servers before. So like, give her login to the server, and it's like you have 162 up software updates. Yeah. And then your immediate thought is like, oh, maybe I should log in here a little more, more often. And then you never do. - -85 -00:45:34,980 --> 00:45:40,170 -Wes Bos: Yeah, yeah. Right. That's it, or something's gonna break for sure. I'm not touching that. Yeah, yeah. - -86 -00:45:40,200 --> 00:46:43,410 -Unknown: Oh, yeah. That's the other thing. So what I what we're thinking is like, what if we said regular email that's basically gives people a little update on like, how their servers do it, and maybe some suggestions on what they should do to the server to like, keep it in good health. So that will be like updating that software? Like, for example, we just, we just updated nginx, from 1.5 to 1.6. Because apparently, when nginx comes out with a new version, the old version is basically deprecated. lol, there's no security updates for that. And it's like, we didn't even know that until recently. How would someone know that if they're managing their own server? You know, they probably wouldn't. Yeah. And so so there's all these things that that we feel like we're in a good position to help people like do and to have success managing their own server without the kind of anxiety of like, Oh, God, you know, what am I missing here? Like, what's gonna happen to my server tomorrow? - -87 -00:46:43,740 --> 00:46:56,760 -Scott Tolinski: Yeah, right. Yeah, it's, for those of us who aren't sis admins, or, you know, not used to dealing with those kind of vulnerabilities, that thing can be just super daunting and super terrifying. - -88 -00:46:57,240 --> 00:47:17,160 -Wes Bos: I want to ask about deploying to so obviously, we talked about deploying a database, but like, what about the, I guess, the code for you? Do you use composer for that as well? Or like, what's the process from you check in? Maybe even this, maybe it's not even part of git, but like, what does your deployment process look like from from beginning to end? - -89 -00:47:17,640 --> 00:47:22,320 -Unknown: Do you mean on spin up load up like if you're if you're launching a site on there, you mean or - -90 -00:47:22,770 --> 00:47:46,800 -Wes Bos: Alright, just maybe just in general for either using spin up WP or if you were just using like a write like anything else? Like Like, if I've got a server and I've got a local WordPress, how do I get that on there? Like, honestly, how I do it right now is I still use FTP. I just open up my FTP client drag and drop the folder overwrite thing. Wait for 45 minutes, and then it's life. - -91 -00:47:47,130 --> 00:47:50,130 -Unknown: Yeah, we've become a bit more sophisticated than that. - -92 -00:47:52,290 --> 00:47:56,100 -Wes Bos: You don't have somebody drag and dropping folders. Yeah, - -93 -00:47:56,100 --> 00:48:04,530 -Unknown: I mean, yeah, it's been a while since we've been with that stage. But I mean, it's kind of our whole thing, right? That's that's our whole - -94 -00:48:04,560 --> 00:48:05,190 -Wes Bos: Yeah. - -95 -00:48:05,190 --> 00:48:51,210 -Unknown: So we use buddy. Do you guys know buddy, buddy dot works? No. Okay, buddy that works is is a great deployment tool. We use that it ftps for us. assuming everything passes, the tests before you know it, it does, you know, compiles their assets. It runs a build and all this stuff and, and then it just ftps everything. And it it's all based on the branch. So when you when we push to master, yeah, I mean, I guess we don't really push the master. We usually merge. I guess we merge like our develop branch into master and then push master. And there's a good hook that fires that buddy. body's like, - -96 -00:48:51,210 --> 00:48:52,020 -okay, - -97 -00:48:52,020 --> 00:48:58,350 -I'll grab. I'll grab your latest. They should really use my my marketing on this. - -98 -00:48:58,560 --> 00:49:10,680 -Scott Tolinski: Okay. Yeah, buddy. What a money. Yeah, they need a little buddy, little buddy character on here. Remember, that was like the thing. MailChimp came out there. They're MailChimp and then they're just like, you know what everybody needs to care. - -99 -00:49:11,250 --> 00:49:21,030 -Wes Bos: They tried to sponsor this podcast, Scott. I just searched them. I was like, that sounds familiar. They tried to sponsor the podcast, but we were sold out. So here's your free spot, buddy. That works. - -100 -00:49:22,050 --> 00:49:26,220 -Scott Tolinski: Buddy, that works. Great domain. And there's some good marketing tips. Get a character - -101 -00:49:26,249 --> 00:49:29,970 -Wes Bos: whatever it is. That's interesting. That's That's cool. Well, it's - -102 -00:49:29,999 --> 00:49:36,570 -Unknown: if this if they see some signups from this, they'll be they'll be signing up for a year of sponsorship with you guys, right? - -103 -00:49:36,959 --> 00:49:47,760 -Wes Bos: Yeah, that is cool. So like it's kind of like a continuous integration piece of software reminds me a lot of like a like a code ship. But - -104 -00:49:47,789 --> 00:49:50,280 -Scott Tolinski: yeah, you could design is great. Yeah, I really liked - -105 -00:49:50,280 --> 00:50:07,530 -Unknown: this lightning bolt. It is it we actually were inspired by buddy when we were designing spin ability fee like we were like, Oh, we got to do this like buddy. Like they just now this UI on this, you know, so. So yeah, we're we're pretty impressed with with their work there. - -106 -00:50:07,620 --> 00:50:09,390 -Scott Tolinski: Yeah. Looks good. Cool. - -107 -00:50:09,750 --> 00:50:14,100 -Wes Bos: All right. I think that's all the questions I have about this. Do you have anything else? Scott? - -108 -00:50:14,310 --> 00:50:21,630 -Scott Tolinski: I don't know. This has been fascinating. Yeah. Is is like, yeah, hugely giant pain point in lives people of working with WordPress. - -109 -00:50:21,810 --> 00:50:30,990 -Unknown: Yeah, like, I guess one. One thing I'll say that we didn't mention is I actually had a chat with the founder of Gatsby. - -110 -00:50:30,990 --> 00:50:33,030 -Scott Tolinski: Oh, Kyle. - -111 -00:50:33,090 --> 00:50:55,560 -Unknown: Yeah, Kyle, because he was super interested and promoting spin up LDP as a way to like, get a headless WordPress site set up, like really quick. And so apparently, that's another good use case for spin up is headless WordPress, which is totally not what we were thinking of when we started building this like a year and a half ago. Yeah. And how - -112 -00:50:55,560 --> 00:51:01,410 -Scott Tolinski: this WordPress with Gatsby is like, Yeah, it's definitely great. It's a nice little, nice little way to build. - -113 -00:51:01,680 --> 00:51:32,370 -Wes Bos: Yeah, yeah. Because you think about like, obviously, our sponsor Netlify, how easy the front end is. And there's not a great WordPress story. There's lots of services, we've got no entity as one of our sponsors, where it's super easy to get back up and up and running. But if you still want to do WordPress, you still have to host the PHP somewhere, right. And that has to be done somewhere, simply. And I even recently hunted for a client of mine to do it. Well, a clan of a friend of mine to do a WordPress headless WordPress site - -114 -00:51:32,370 --> 00:51:50,070 -Scott Tolinski: install, and we just ended up going with some cheap, you know, Bluehost. I know you're not a fan list, but just just to have a thing, but then you have to, I don't know, it's definitely not as modern or as cool as it could be. So I think that's definitely a Avenue worth exploring. Yeah, - -115 -00:51:50,070 --> 00:52:01,980 -Unknown: I mean, if Gatsby is the one hitting the site, the headless site, I guess it doesn't really matter too much where it's hosted. Right? Like, because it's not like direct, traffic's hitting it. - -116 -00:52:02,130 --> 00:52:04,380 -Wes Bos: Right? No, no, just that build time. It's - -117 -00:52:04,380 --> 00:52:06,330 -Scott Tolinski: the API. Yeah, exactly. - -118 -00:52:06,660 --> 00:52:24,000 -Wes Bos: Man, I'm just looking at the pricing. I'm just going back to the body of know of WP Engine. Oh, yeah. And like, like a if you got if you have over 25,000 hits a month. So you have over a couple hundred hits a day, it's 115 a month to host your WordPress that's - -119 -00:52:24,000 --> 00:52:47,430 -Unknown: expensive managed WordPress hosting is you're basically paying for support, right? Mm hmm. Okay. And it's, it's really not even support, you're paying for support insurance. Right? Because he you don't necessarily need you're not gonna necessarily use support every month. Right? So if you're paying for insurance when you're buying managed hosting, so - -120 -00:52:47,460 --> 00:52:48,960 -Wes Bos: yeah, that makes sense. - -121 -00:52:48,990 --> 00:52:59,910 -Unknown: Yeah, it totally makes sense. And it's totally worth it. For a lot of people. That peace of mind is worth paying for. Yeah, yeah. Right. So yeah, it's just different different cases. Right. different strokes for different folks. - -122 -00:53:00,480 --> 00:53:06,570 -Wes Bos: Yeah, surely. Cool. Anything else you want to? That we didn't talk about here? No, I - -123 -00:53:06,570 --> 00:53:09,120 -Unknown: think that's great. I think we've covered lots. - -124 -00:53:09,240 --> 00:53:25,980 -Wes Bos: One crazy question I had I don't even know if this is the thing is, have you heard anybody talk about serverless? WordPress? before? I know that Laravel just released vapor, which is serverless. For for Laravel. Is that even something that could happen with WordPress? Do - -125 -00:53:25,980 --> 00:53:28,680 -Unknown: you even know? The new hotness? Yeah, - -126 -00:53:28,980 --> 00:53:29,940 -Wes Bos: yeah, - -127 -00:53:29,970 --> 00:53:48,270 -Unknown: we were we were pretty pumped when we saw that the excited about the vapor announcement, because sounds so cool, right? serverless you don't need servers anymore. But at the same time, like my second thought was like, we just built a whole business on top of top of cloud servers, servers. - -128 -00:53:48,270 --> 00:53:50,640 -Wes Bos: Yeah. Yeah. - -129 -00:53:51,630 --> 00:54:29,730 -Unknown: But yeah, when I when I thought of a site, then I like thought about it more as like, Huh. I don't know how the heck this would work with with WordPress, because when you're building an app, you can build it for a certain platform, right? Like you can build an app to take advantage of, you know, serverless functions, for example, right? But if you're installing a plugin from the wordpress.org repo, right, like, you don't even know what it's gonna do, you know, like, how could you possibly accommodate that on the infrastructure side, right? Yeah, I, - -130 -00:54:29,820 --> 00:54:33,810 -Scott Tolinski: I'm having a hard time even wrapping my brain around how that would any of this would fit together. - -131 -00:54:33,810 --> 00:55:02,250 -Unknown: But I think it would have to be serverless in the sense that like, each request would still have to, like execute pretty much like it does now on a typical server. So be some kind of, yeah, some be some kind of adapter. I don't know. I haven't done a ton of thinking about it. But the thoughts that I've had around it, it's like I can't see around it. I can't see how it works. How how you'd be To do serverless with WordPress, - -132 -00:55:02,430 --> 00:55:07,920 -Scott Tolinski: well, you could always just release it as a coming soon and collect some of that. Yeah, and just never - -133 -00:55:07,950 --> 00:55:15,000 -Unknown: never launch out or do like an anti campaign on it. Like serverless is silly. You know, you spin up WP? Yes. - -134 -00:55:15,000 --> 00:55:17,370 -Scott Tolinski: Get some alliteration going on. Yeah, again, - -135 -00:55:17,370 --> 00:55:21,600 -Wes Bos: I'm server, you should make some, some t shirts that say serve our full - -136 -00:55:21,630 --> 00:55:22,710 -Scott Tolinski: Yeah, like, - -137 -00:55:23,700 --> 00:56:26,280 -Unknown: I've also done, I've done a little bit of reading on serverless. And one of the things that I heard is that serverless can be really beneficial when you architect your app to take advantage of these external serverless functions. But if you just jammed all of your requests through like one serverless endpoint, which is what vapor does, it actually results in poor performance? So that's, that's something to actually look at as well. So there's, like, I haven't tested vapor, I don't know if it suffers from performance, or if it's great, I really have no idea. But it's something to be to look at for sure, like, are the costs of serverless gonna actually be higher than if you architected your app to use serverless kind of sparingly, rather than for every request? These are all questions that I don't know the answer to. It's early days for serverless. Even on the app side, so I don't even know where that leads WordPress. - -138 -00:56:27,060 --> 00:56:34,230 -Wes Bos: Yeah, yeah. All right. All right. Now we have our sick picks. Brad, do you have a sick pick for us today? - -139 -00:56:34,410 --> 00:57:30,540 -Unknown: Sure. Do. One of the questions I like to ask is like, what's like a purchase under $100 that you've had in the past, I think is a Tim Ferriss question. Yeah, so mine, mine is a grill. So it's like a large grill, it's like two or three feet long, I think and like a foot wide or something like that, or foot and a half wide. And once a week, we do Teppanyaki at home. So like, I'll just, you know, cut up a bunch of seafood and vegetables and stuff. And, and my kids will actually, like cook their own dinner. They they can't pronounce Teppanyaki. So they just say cook your own dinner. are we cooking our own dinner? And they love it. It's like one of their favorite meals. It's great. Like, it's hard to describe like how good hot food is like right from the grill. Like, it's just yeah, taste here. It's really good. Oh, have - -140 -00:57:30,540 --> 00:57:32,670 -you ever made okonomiyaki on this? - -141 -00:57:32,700 --> 00:57:33,540 -I don't know what that is. - -142 -00:57:34,920 --> 00:58:02,220 -Scott Tolinski: Oh, Google it. okonomiyaki it's it's sort of this Japanese savory pancake. It's almost like a it's a wheat flour based batter. And it's got some Japanese sort of barbecue sauce and some fish flakes and all sorts of stuff on it. It's It's wild, and it looks kind of wild. But that's how they serve it. And if you go to Japan and get okonomiyaki it's excellent. I'm one of these. This - -143 -00:58:02,610 --> 00:58:18,690 -Wes Bos: girl so Oh, this is cool. I want one of these my wife. When we first started dating I took her to Korean barbecue where they you get like the thing Oh, yeah, table and she's like, this is dumb. Why do you have to cook your own food. And I was like, This is so exciting. I love cooking my own food, - -144 -00:58:18,810 --> 00:58:21,060 -Scott Tolinski: she would say like something - -145 -00:58:26,340 --> 00:59:29,480 -Wes Bos: that's funny. Um, I am going to sick pick something that I sick picked, like, probably two years ago on the podcast, and that is Magna tiles. These are a kid's toy that we got for our kids a couple of years ago. And they're Yeah, they're just these little plastic squares that have magnets in all four squares, and all four corners and allows the kids to make pretty much anything that their imagination can come they're squares, there's little triangles. And then for gifts we always get like my parents and grandparents to get the our kids like they get us like a big bass or get us some wheels or it's kind of like Lego but they're way bigger. And it's like two years later and my kids play with them I'm not lying every single day wow it's such a cool creative thing. My kids are three and four now and I imagine they've got still a couple more years left before they they start to go for like Lego and stuff that's a little bit more intricate but like my two and a half year old three year old they no problem playing with these things. It's really cool. Awesome. - -146 -00:59:29,520 --> 00:59:37,830 -Scott Tolinski: Cool. Yeah, these are these are red I remember when you pick pick these before. Got to get some landed Landon's at that age now where he's going to start to love this stuff. - -147 -00:59:38,010 --> 00:59:47,880 -Wes Bos: We have mix and match. We have some Magna tiles and some Picasso tiles. And oh yeah, they're interchangeable hundred percent interchangeable. So we don't we can't visually see the difference between them. - -148 -00:59:48,230 --> 00:59:54,900 -Unknown: I love that the box says for ages three to 99 100 year - -149 -00:59:54,900 --> 01:01:04,950 -Scott Tolinski: olds, you're out. No gotta leave it around. Okay, my sick pick is going to be For the HV HBO television show succession which is people are starting to take notice the show right now I we just started watching it because it's so funny this this is like the constant progression of television shows with Courtney and I is all like mentioned it to Courtney, like months before and then she'll be like, not interested. And then like as months go by, she'll be like, seeing it on their Instagram feed or whatever. And then her friends so and so is watching it now and our other friend should be like, oh, maybe we should watch Game of Thrones. I'm like I told you that like three years ago, and you said you didn't want to watch it. So that's it. That's how succession is gone. And she had enough of her friends cert to watch it that she decided she would like to watch it and now we're hooked. So we're about you know, six, seven episodes in and we're loving it. And a little side shameless plug or sick pick in addition to that is the righteous gemstones on HBO. I'm going to be out I guess the righteous gemstones on HBO is satirical comedy about like, mega churches, and it's great. It's Danny McBride and Adam Devine. And it's just it's hilarious. So those two shows on HBO. Nice. - -150 -01:01:05,160 --> 01:01:11,430 -Wes Bos: Alright, shameless plugs. Brad? What would you you can shameless plug as much as you want? I feel - -151 -01:01:11,430 --> 01:01:24,090 -Unknown: like I've been basically plug in everything already. So you guys, you love it. You guys. Go ahead. I mean, yes, everybody can check out my stuff. spin up WP calm. So let's just brains calm. So there's, there's my plug. - -152 -01:01:24,930 --> 01:01:47,220 -Scott Tolinski: Yeah, just start shouting URLs. That's what I do. My name is Scott Tolinksi. I'm going to be plugging all of my courses on the mat. Love Scotland ski and you can find those courses at level up tutorials. You can find all I'm going to be plugging all of my courses. Standard Wes Bos refrain so you can find them level up tutorials.com forward slash pro sign up for the year and save 25% - -153 -01:01:47,550 --> 01:01:54,630 -Wes Bos: I'll plug all of my courses as well. Wes Bos comm forward slash courses and check it out. Check it out. - -154 -01:01:54,630 --> 01:01:55,200 -Unknown: All right. - -155 -01:01:55,200 --> 01:02:01,710 -Wes Bos: That is it for today. Thanks so much to Brad for coming on. And we will catch you on Monday. All right. - -156 -01:02:01,730 --> 01:02:02,850 -Scott Tolinski: Thank you, Brad. Thanks, guys. - -157 -01:02:02,850 --> 01:02:03,810 -Unknown: Please, - -158 -01:02:03,810 --> 01:02:15,540 -Scott Tolinski: please head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax191.srt b/transcripts/Syntax191.srt deleted file mode 100644 index bbdae391e..000000000 --- a/transcripts/Syntax191.srt +++ /dev/null @@ -1,120 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,580 -Monday, open wide - -3 -00:00:02,580 --> 00:00:21,660 -dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott Taylor. - -4 -00:00:23,610 --> 00:00:24,480 -Totally ski. - -5 -00:00:25,950 --> 00:00:49,229 -Wes Bos: Oh, welcome to syntax. And this Monday histy treat, we're going to be talking about something a little bit different. I have been a longtime Android user, and I bought an iPhone. So I'm going to be talking about my experience moving between the two platforms, and sort of what I like about each platform and what I don't like about each platform, but we're going to keep it largely positive. So all good stuff there. My name is Scott Tolinksi. - -6 -00:00:49,229 --> 00:01:03,930 -Unknown: I'm a full stack developer from Denver, Colorado with me, as always is West boss. Hey, everybody. Hey, Wes. This episode is sponsored by century. So with more about this century AD read is Wes. - -7 -00:01:04,049 --> 00:05:23,730 -Wes Bos: Yes, century is we've talked about them a million times on this podcast, Aaron accepted attraction. But I have something new for you today we'll talk about century just launched support for monitoring errors in native application. So what does that mean? Well, they've extended their toolset, you know, you can use it in in any language out there. Like you can use an a PHP JavaScript on the server or JavaScript on the client. Now they've just rolled it out for native apps. That means if you're you're building a game, or you have an iOS app, or an Android app, or Mac App, or Objective C or cocoa, there's like you should see the list of Go to sentry.io. forward slash for forward slash native. And that will give you a list of all of the different things that they now work with just for native alone. So check it out, use the coupon code tasty treat. To get two months for free with Sentry, go to sentry.io. For that, thanks so much to Sentry for sponsoring. So cool. Let's get into it. I think I wanted to start off first with some of my device history. I want to keep this largely about the platform's themselves, though. So I'll be brief on this. I've always used Android phones, for as long as I've had a phone. My very first phone was the original droid. And then it went to Nexus and then I got pixel phones. So basically, I stayed sort of almost mainline Google phones this entire time. And that said, I do have experience with iOS, I had, you know, an iPod Touch. When it first came out, I had pretty much every iPod ever before that. And largely when it came to the phones, I think the initial iPhone was not very excited about it, the fact that you couldn't do copy and paste, it seemed like they withheld a lot of features that they just should have had from day one. So because the original droid had that stuff directly out of the box, there was just so many features that I was like, Okay, this phone clearly is like loaded up with features compared to the original iPhone. And I think that really just kept me into the Android ecosystem this whole time. Now, at some point here, I started thinking like, hmm, all of the apps I use on my Android phone are available for the iPhone. And it should be pretty decently easy to swap between the two. So maybe I should give it a try. I think there are some rather large misconceptions about Android Oh, when I mentioned that I was going to buy an iOS phone, people were largely like, oh, you're finally getting them a modern device or something. I don't even know what the the sentiment is there or that I heard a lot of that Android phones were sort of analogous to Windows computers, like, oh, maybe you can, you know, drop windows can be I'm not using a Windows computer. And largely, I think the comparison is pretty bad because Android Yeah, way more design focused. And we're like when you use Windows like Windows 10 or something, use Windows 10. There is remnants of Windows XP throughout windows 10. Right, just like icons that don't match and some really ugly design stuff and having to click through some weird error messages. And largely Google's done an amazing job of in particular with their their mainline pixel phones, of really matching like a very nice experience. So the design across Android phones is lightyears ahead of what I would consider design on Windows stuff windows. People don't ask me, I just don't like it. But for the most part, I never really found that comparison to be that super great. And as far as like cheaper and not as nice if you're buying a flagship Android phone, and that's really not a concern. The Samsung's and the pixel phones are really they're really excellent phones. And I think that's another thing too is that people see there being like two OSS here, right. There's there's iOS and then there's Android. Yeah, but really, the Samsung version of Android is very different from the Google version of Android, which is very different than the LG version of Android. And sure enough, Google has had some issues with that aspect of things. But what you have to know is that everybody tweaks in manipulates the platform. So they're not all the same. Okay, so why switch? Again, I mentioned that to be easy to switch. You know, I have a lot of users of my platform that use iOS and I wasn't experiencing my platform as one of those users. So I needed to get a modern iOS device anyways, just to do testing. And I figured if I can, why not just get the king of the hill here? For - -8 -00:05:23,760 --> 00:05:32,100 -Unknown: Which one did you end up getting the iPhone pro Max? So the big boy pro so like the most decked out one you can possibly buy? - -9 -00:05:32,159 --> 00:05:40,650 -Wes Bos: Yeah, pretty, pretty much that looks sick. But not with the most hard disk space. It's only 256 out here. Only 256 to come up. We're gonna use that with all the cloud storage. - -10 -00:05:40,860 --> 00:05:51,720 -Unknown: Oh, I did no Hold on. app you do have storage is the worst I run out of there. I stopped using it because they give you like one gig. And like, that's like three photos on on an Apple phone? Oh, yeah. Well, I'm - -11 -00:05:51,720 --> 00:06:04,380 -Wes Bos: still I shouldn't say I'm still using Google Photos for photos, obviously. Because Yeah, that is way better. I use Google Drive, because I'm paying for it. And I've paid for it. I got like two terabytes for like $8 or something. So - -12 -00:06:04,740 --> 00:06:11,670 -Unknown: it's like, it's pretty cheap. I don't use any Apple services. They're all way too expensive, and not nearly as good. Yeah, - -13 -00:06:11,700 --> 00:09:17,970 -Wes Bos: yeah, they're really not as good. And so that's like, part of the the bummer about switching here is is a lot of these little things that I've kind of hit like that. But so I switched. I've been using the iPhone for a week. And I've been using it every day as my main phone, I have largely put my Android devices in the drawer, just to allow myself to not, you know, fall back to it. And I figured I would give a little bit of pros and cons to the iPhone here. And I will basically approaches as to who does what better, right? So who does things better? Who does the apps better? While iPhone is way better for apps, that's the one thing I've quickly learned is that every single app that I'm used to using on my Android device, even like the exact same app one to one runs better, feels faster, feels more connected to the operating system looks better, every little aspect of these apps is better on the iPhone and and that to me was sort of shocking, because I never really felt like they were bad. On Android, most of the apps I've used felt really good. It's only after using them on the iPhones like oh, yeah, these are really smooth. And that's coming from I had a one plus 70 Pro for a little bit. And that has a 90 hertz screen. So for those of you who don't know, the screen is basically refreshing at 90 frames per second, like a you know, it's like a super fluid video, rather than like a choppier less frames per second video. And I was thinking that after using the 90 frames per second, or the 90 hertz screen, that I wouldn't be able to go back to a normal screen. And I think the iPhone smoothness overall really sort of put those concerns to rest because although the screen isn't technically as smooth, it just feels very smooth. And all the apps feel good to us. So that to me was like really, I was blown away by that aspect of iOS. And I really, really enjoyed how the app experience has been. That said, one of the things I like way more on the Android phones is the homescreen. The homescreen on Android phones is basically compared to the iOS, iOS is just a grid, right. And it's a grid that keeps you in this very specific grid. You if you move an app, they all shuffle around where an iPhone or an Android, you can, if you put an app at the bottom of the screen, it stays at the bottom of the screen. Likewise, you can throw widgets on the Android homescreen. And they iOS added widgets to their little sidebar, but to be honest, everything they suck. They suck every week that I've had on here has been worse than the counterpart on Android. I wish that you could like add them to the homescreen. And like have useful ones where you could like glance at it. But there instead they were like hidden in this like weird swipe Yeah, spot with all of your notifications. I've never liked that at all, either. Some things are weird about it like like a podcast, player one. The one on Android has the keynote, the widget has the ability to jump forward 30 seconds or something. And that's something I would use somewhat frequently. And now this the pocket cast widget on iOS is just like a playlist of the upcoming next tutorials are now coming next podcast. But iOS like unifies what's playing? And the apps have the ability to add skip buttons to the homescreen which is what I use. Does you not see - -14 -00:09:18,090 --> 00:09:32,270 -Unknown: that yet? What do you mean, you skip buttons to where on the home screen like in the pull down? No, if you're playing if you're playing a podcast and you like wake your phone by pressing a button, you see what's currently playing Oh, yeah. And there's their skip buttons as part of that media player. Right. - -15 -00:09:32,300 --> 00:14:09,090 -Wes Bos: Yeah. And that's a whole nother thing is Android does all that stuff better. So for me that's like not really like that. Oh, like a negative. That was a big deal for me when I got gift buttons on the homescreen. So I kind of feel like iOS users just don't have the breadth of experience with like a Pixel phone to know what's better or worse about them. Because there's so many things that Google does really well as phones. But there's a lot of things that obviously iOS does really super well too. So so far we're blissfully ignorant is what you're trying to say about us. Yeah. Think that's totally true. Because, yeah, the homescreen is definitely worse. You know, a lot of people because I got the big phone, and I've mentioned like not being able to tap the Apps in the top left corner, and people would say, well, you have to turn on reachability, you'd have to do this weird, weird little double tap trick, or you have to do this or that or what I was like, or, you know, they could just let you put the apps at the bottom where your fingers are, so that you could touch them better. Because to me, that seems like a no brainer. I mean, like, Apple wants to talk about your thumb position, but it is shocking how many things in iOS, the tap target is in the upper left hand corner. Yeah, even situations where you have, you know, the gesture, pullback gesture, there's so many instances where that gesture doesn't come into play, and you have to physically go up and reach in the top left. And I've just like, there's solutions that have been available for this specific problem in in Android for you know, you know, whatever, 10 years, and like, they have that much time to look at these and say, Oh, yeah, let's adopt some of this stuff. But in, you know, typical Apple fashion they're just holding. So what's the what are the solutions to that? Because right now, what I have to use is the reach ability, where you swipe down quickly on the very bottom. Yeah, and that works like, like one in 10 times that actually works for me, it's awful. He used to be great with that used to triple tap the home button. Yeah, and it would dry with john good, scoot the whole thing down. And it was great. But now I've I've moved to mostly just using swipe motions to go back and things like that. It's it's kind of annoying. Yeah, I mean, the solution to that is to not pin all of the apps to the top left of the screen and pin them to the bottom right. You know, if you had to, if you wanted to have them pin somewhere, pin them to the bottom right where their hand is, or the bottom left or, or heaven forbid, let the user choose where they're pinned or not have them pin it all. You know, like I could see it functioning like a you know, an iOS or Mac OS desktop where you could like clean them up or something that said, I just I wish that I could like because what this encourages encourages you to have a billion apps on your homescreen. No, no was one a billion apps in my homescreen. I'm a little bit more minimalist than that. But if I were to put everything into folders, then all the folders would be in the top and then I wouldn't be able to go and touch them. So it's almost like I have a layer of two of apps that I don't really use just to push down the apps that I want to use. And so people will say get a pop socket, or these were all bad solutions to worse. Yeah, easy answer. And the easy answer is let you move the apps to the bottom of the screen. That's a that's just a you know, a thing that they could have done by now. So another thing that iOS does really super well as the new cameras are awesome. But the wide angle lens, the ultra wide, I keep playing with the ultra wide like crazy. The new camera system is super good in every single facet. And it really beats the camera system on any Pixel phone I've ever owned. With the exception of night photography. Apple's like really advertising their night photography. They very oversold it. It is like if you were coming from an iPhone to this phone, you'd be like, Oh, this is awesome. But if my pixel two has better night photography, then this brand new Apple does. So it wasn't really impressive to me. And it was a little disappointing. The night photos were kind of muddy in comparison. Sure, they're they're better than an older iPhone. And honestly, the the phones interface for doing a night photo was way more intuitive than it is on Android. So props for that, largely like most of the apps and camera app stuff is way more intuitive on the iPhone. But for the most part, I found the camera system to be incredible. With the exception of the night photography was just kind of weak. Another thing is the device quality, this thing is darn heavy, then I kind of I'm trying to figure out where the weight comes from. Because I have pixel phones. It's the gigabytes. Yes, it's the gigabytes. I like really wonder like if there's like weights in here, because the Pixel phone is all glass. It has all the same features and whatever, but it's way lighter, maybe even like I don't, I'm just holding them here. It doesn't feel like half is light, but it definitely feels like I don't know, third as light or something as the Pixel phone. So I don't know where all this weight comes from. But it's a heavy darn phone and it feels nice. Feels nice in your hand. Yeah. So overall, I feel like the build quality is is nicer on this. That said, - -16 -00:14:09,090 --> 00:14:36,330 -Unknown: I think there is assumptions about a pixel or Android device build quality and for my experience, they've always been totally Excellent. So did you get a case for it yet? Or do use a case? No, I don't know if I will. It's like $5,000 if you drop it, I know the back is like $350 if you break the glass which happened to me on my other one but thankfully I had another issue and I was still within a year and they just swapped it out and without worrying about the broken class. Yeah, maybe - -17 -00:14:36,330 --> 00:14:37,440 -I should just order one - -18 -00:14:37,860 --> 00:15:00,450 -do it honestly man. Yeah day and it's it sucks cuz like thanks for making the phone out of glass and I take this beautiful thing at the throw in this ugly rubber case. They have to make it heavy man that's the whole thing is so for people like me will be like, Oh, it's heavy. Yeah, glass is expensive. Yeah, it costs $350 per square of glass. Yeah. Well, this machined out of one piece of glass. Yeah. I don't - -19 -00:15:02,310 --> 00:15:38,640 -Wes Bos: I can't really. Yeah, no to that. So overall device quality is awesome. The phone does like fun things really well. So what I mean by that is like they make like using the camera very fun. The amount of apps that exist that are more fun than what exists on Android. You know, games come out sooner, those kind of things on iOS, I found for the large part this, this phone to be a lot more fun. Like I wanted to be. I wanted to be playing with things on it more often. Which isn't to say, I didn't do that on my other phone. But like, I just I had a lot more fun on this device, if that makes sense. - -20 -00:15:38,760 --> 00:15:49,500 -Unknown: Interesting. Ya know, something that I did a couple of weeks ago is I took one of my old iPhones is actually the iPhone eight, nine, what's before the 10? The before the 10 was eight. - -21 -00:15:49,530 --> 00:16:24,420 -Wes Bos: Well, nine comes before 10 not an apple world. No, I think it's an eight. And I jailbroke it remember like, I don't know, like years ago when I first got like the first ever iPhone. I jailbroke it and then you could like run like apps on it. Because there were there was no App Store for the first one. Yeah, and I recently needed the ability to run a jailbroken app on my phone, which was interesting. The tethering they locked down tethering on some phone plan. And I was like that honestly. So I i jailbroken. And I was like, man like this is you can get like custom homescreen layouts and yeah, other stuff. But like, let's - -22 -00:16:24,420 --> 00:16:37,470 -Unknown: talk about that. Bit. The problem is with jailbreak Look, I've been looking into jailbreaking extensively because it solves a lot of my issues. Like Yeah, to move the apps to the bottom. But then you open yourself off to some random Chinese hackers. And - -23 -00:16:37,550 --> 00:19:34,260 -Wes Bos: there's only so much that I know because I rooted Android phones for a little while. So I'm like sort of in in that that like know what to look for sort of vibe about stuff. But again, you you're you are opening yourself up because once you know the the walled garden is open, who knows what can get in? Yeah, but I'm really I yeah, I might jailbreak if it comes to the point where it's easy for this particular phone to do. But so far this phone and this OS is not available. So if it was I might have already jailbroken it to be honest. So we'll see, I found that the iOS keyboard is not good. And I complain about it a lot. So I'm sorry, if I'm being annoying on social media, the Android keyboard out of the box, the G board is way better. What's better about it? I was curious. So yeah, it's funny because people were like, I never I got a lot of people on Instagram saying, well, I never had a problem with the iOS keyboard. Okay, but you maybe you've never used a good keyboard before because the iOS keyboard is dog sh it, it's not good. So, for instance, the iOS keyboard feels like it's always trying to know what to do for you at all given points at the time. But like sometimes they'll hide the number row when you don't want it to and then you have to do an extra click, or the keyboard always has your numbers behind any of the letters. So you can just push and hold, just push and hold on the P and it gives you a zero anytime anywhere, you never have to ever touch that. That's just always there available to you. And oddly enough, I found most things in iOS took one or two more clicks to do than than Android, which was shocking to me, I was figuring it to be the other way around. But like for instance, the the Android keyboard has things like gift search and an extended clipboard built into it. But in a way that's way easier for you than to like have to rely on the app that does it. Like a lot of the stuff that I message has in it, the G board has an out of the box. And the G board on Android is way better than it is on iOS, I found it to be not so good. I actually have found my keyboard sort of bliss on this thing with swiftkey, which is a keyboard I used to use way back in the day and Android and never really loved it. But the iOS version is basically just a slightly augmented version of the iOS keyboard itself to the point where it makes it just a little bit more usable. So for those of you who feel like the iPhone keyboard is great. I just, I feel like you probably haven't spent enough time with a nicer more modern keyboard. It just hasn't changed. It feels like the iOS keyboard feels like the exact same keyboard that was on my iPod touch that I got when I was in, in college. Yeah, they I ran I ran the G board, which is Google's keyboard for iOS for over a year. And it's amazing. I like it. I especially like the ability to search emojis. It's like yeah, how much time I waste flip, flipping through looking for the like dead eyes or something like that, oh, gee, you can't do that on iOS. It like tries to suggest them for you. But it's never. I always like type like dead eyes or something like that. And I can't figure out what it is. And I switch back. - -24 -00:19:34,340 --> 00:19:56,610 -Unknown: I feel like the Google frequently used emojis is better. Yeah, g board. Interesting. But I switched back just to try the new swiping. And I feel like the swiping on iOS is better than g board. Yeah, I the swipe thing has existed in Android for since like version like one. Oh, like I got it like three weeks ago. I know. It's funny. I used to use it all the time. And now I don't use it as much. I - -25 -00:19:56,610 --> 00:20:17,730 -Wes Bos: pretty much just use voice dictation. But that was another thing. It's like A lot of these things that are coming to iOS that people make a big deal about are like not a huge deal to me only because they weren't ever problems for me in the first place. They were problems that have been solved. So that the keyboard, okay, yeah, I just don't I don't love it. But the swift key is better than nothing are better than the iOS one. - -26 -00:20:17,730 --> 00:20:30,660 -Unknown: There was a one thing I thought was really interesting. I use a password manager. I don't know if you do I use one password. Yeah, I use LastPass. Okay, I use LastPass. But their support staff was rude to me. So I cancelled the service. - -27 -00:20:32,730 --> 00:24:10,560 -Wes Bos: I was like, how did you do a team account and a family account? They're like, well, you have to create two separate accounts, and you can't merge them. Like oh, my Okay, see you later. Yeah. So yeah, so I use a one password. And one password takes like three or four more clicks to get my passwords to autofill than it does on Android. On Android, if you like pop open a form that it just like you can do the fingerprint or the whatever authorization, the moment that you load the form, you just do the fingerprint, and it does like a little paint over like a modal. And then it just auto fills. We're on iOS, I have to click on the input, then click the passwords and then select from which key chain manager whether it's the iOS built in one or one password, and then I have to then select to autofill. The thing it's like three or four clicks when an Android it's really just me resting my finger on the fingerprint reader. So there's like little things like that where I'm like, okay, I feel like they probably should have should have figured this out by now. But is that enough to negate the positive things about this phone? No, obviously not. I think the iPhone overall isn't like an awesome package. And I've been super happy with it. The haptics on the iPhone are way better, which is not surprising, or which is surprising to me, because Android has been doing haptics for a long, lot longer. And so I was expecting the haptic feedback engine, which is the little vibration, I was adapting that to be okay. Especially because on Android out of the box, each key press on the keyboard triggers a haptic vibrate, which is something I really love and something they don't do an iPhone because they feel like it will artificially make the battery or it'll make it seem like the battery's worse than it is. So they just say, Hey, we can't You can't do this at all. So instead of like giving you the option, they're just like making that decision for you, which is fine. I've gotten used to not having it but I wasn't expecting the haptics to be so good, but they feel very nice. I like it a lot. I like the vibration motor, how it feels in your hand, for Okay, so let's get into the last couple of things I don't like about the iPhone before this episode goes way over. Android does a couple things way better. So search and usability are generally better. So because the Google search bar is at the bottom of the phone with a little microphone in the bottom, right, the very easiest thing for your finger to hit on the Android phone, or at least the latest pixel is a microphone to do a Google search or Google Assistant, whatever you want it to do, right. So for me, it's really easy for me to press that button and just ask my phone something or search something. Siri is nowhere near as useful or as good. So for me to even get a Google search out of that, what I had to do is create a shortcut that opens up the Google app and then selects the input. And then I have to click the microphone button. So it's like three clicks to get a Google search Where is like the easiest click in the world on an Android. And that's it, I could just ask Siri. But I haven't a great experience with Siri. Also, it like triggers all the time when I'm not even saying the word. So I don't love it. Last one is notifications are way better on Android notifications, like they don't dismiss easily on iOS. Like you have to swipe them twice, like a message one, you have to swipe and then swipe again, to clear it. You can't just do like a hard swipe to get it to go away. The Android has these quick replies. So that if I had a notification is the text message. And like Courtney would say like, Alright, I'm coming home, or something I could just with basically one click from the notification, send a response that says See you soon or something because that's like a built in reply. So that aspect, I know the built in replies exist on iOS, but they're not integrated as well until the notifications. It's just, you know, notifications. In general, I - -28 -00:24:10,560 --> 00:24:23,610 -Unknown: think anybody who's used the two operating systems would probably say that the Android implementation is a little bit better. But overall, I am I gonna keep this phone? What am I gonna do? I'm gonna keep using it as my daily phone. Oh, - -29 -00:24:24,269 --> 00:25:20,280 -Wes Bos: yes, I'm gonna keep it. I'm gonna keep it, I'm gonna keep using it. Like I said, I just have a lot of fun on this device. And not to mention, I feel like I need more experience with iOS more, you know, just more exposure to the apps in the ecosystem so that I can have a totally different breadth of understanding of interaction and that sort of thing that you get from using a completely different operating system. But I do I do recommend people check out the pixel phones and try them out. Beyond just talking trash on the internet. They're not windows. It's not It's not like that at all. They're very good phones and they just A lot of things in my opinion better. So you know, give them a check out if that any of this sounds interesting to you. So this is my experience switching from iOS to Android. I've been using Android forever and ever. And I probably won't stop using Android. But for right now, my main device is going to be the iPhone. And I look forward to getting a dead Apple watch because it looks pretty dope. - -30 -00:25:20,580 --> 00:25:46,050 -Unknown: Sweet. All right. Well, that's good to know. If you think Scott is wrong about any of this stuff, we would love to hear you tweet us at syntax FM, and we will catch you on Wednesday. Alright, catch you then. Please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax192.srt b/transcripts/Syntax192.srt deleted file mode 100644 index df8418f93..000000000 --- a/transcripts/Syntax192.srt +++ /dev/null @@ -1,376 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,849 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:06,120 -development treats out there. - -4 -00:00:06,149 --> 00:00:08,010 -strap yourself in and get ready - -5 -00:00:08,669 --> 00:00:10,560 -to whiskey and West boss. - -6 -00:00:11,339 --> 00:00:12,120 -Wes Bos: gum. - -7 -00:00:14,610 --> 00:00:15,120 -Unknown: Alright, - -8 -00:00:15,150 --> 00:01:02,400 -Wes Bos: welcome to the Halloween edition of syntax FM. We have some spooky web dev horror stories, we reached out to you and ask for your most disastrous scary stick your whole stick your head in a hole. And Scott has a soundboard of spooky sounds, we're gonna be going through some awful stories of people losing their databases and accidentally pushing code to production that they shouldn't have. And just some, some really, really hilarious but also some really like, Oof, I hope that never happens to me. In my career stories. We are sponsored by two awesome companies Log Rocket and Sanity. We'll talk about them partway through the episode with me today is spooky to linsky. How you doing today? - -9 -00:01:04,980 --> 00:01:26,580 -Scott Tolinski: I'm doing good. Oh, yes, yes, I am ready for this spooky. Oh. And we're going to be giving you some lovely campfire stories here. You can just imagine, I have a flashlight on my face coming from the underside of it. - -10 -00:01:28,560 --> 00:01:29,280 -Wes Bos: Beautiful. - -11 -00:01:36,060 --> 00:01:39,870 -Scott Tolinski: I promise I will not be that annoying for the remainder of this one is a bit - -12 -00:01:40,079 --> 00:02:12,960 -Wes Bos: long. Scott is on the sounds by the way. So send your tweets to him, not me. So we've got all kinds of stories. We're going to keep them all anonymous. Most of them were privately sent to me on Twitter, DMS over email. Some of them were just tweeted to me but out of respect for people's jobs will be saying their names. And we're just going to sort of jump into it. First got has his own disastrous get clean. Sorry, you want to start us off with that one. And we'll get into it. - -13 -00:02:12,990 --> 00:03:21,449 -Scott Tolinski: Yes, this is Scott's disaster escape plane, a young junior developer is learning new commands. And he takes way too long to realize that he just ran Git clean from the root directory of his MacBook Pro. He watches in horror as he sees the command line logging out deleting all of his files, as one by one each file disappears, like a specter into the night is quick fingers. hit Command C just in time to save the computer. But what was lost some client projects that he could never get back, including some After Effects render files, and an after effects project that he had spent 50 plus hours working on and had to continue building it from scratch. And that's how I learned how to run good clean on a non Git directory or just in general. - -14 -00:03:22,110 --> 00:03:24,210 -Wes Bos: That's what get clean does. It removes - -15 -00:03:24,210 --> 00:03:35,370 -Scott Tolinski: everything from the directory that you're in. That's not a part of the current Git repo. And I didn't have a Git repo in that directory. So just start deleting things, - -16 -00:03:35,910 --> 00:03:39,660 -Wes Bos: really. So you can run git commands on non repos. - -17 -00:03:39,660 --> 00:03:44,880 -Scott Tolinski: I I'm pretty sure I was very new to Git, so there's a chance Oh, I had Yeah, - -18 -00:03:45,180 --> 00:03:58,110 -Wes Bos: I was very new. Oh, man. Are this a chance you might have accidentally created a repo? Yeah, in the root like ninja? Yeah, I've heard of people doing that. They're like, Oh, I'm making a new repo. And they're now they don't realize they're in the root folder. Oh, - -19 -00:03:58,130 --> 00:04:24,140 -Scott Tolinski: yeah. I it was it? Yeah, it was it was bad. And the After Effects project was very complex. And it was like I you know, had to grind out through the weekend to get it, get it back, or to redo it from scratch. And that was just, yeah, so yeah, it was a one of those simple I turn command DS open up a new tab and don't realize you're not in the current directory. So I've since changed that parameter forever. - -20 -00:04:24,380 --> 00:08:09,750 -Wes Bos: Ai x is spooky. I write that three out of three pumpkin spooky. All right, next one we have here is magic updates the gathering. This is this is probably one of the best one that I had received. I read the email and just the over the entire weekend. I was thinking about the story and I told it to my wife and I just can't stop thinking about how awful this would have been to happen to myself. So it goes like this. Like all good dev horror stories. This one centers around bad practices. I was a full time public school teacher at the time. But I was working at a side gig at a local game store, the owner of the store had learned enough PHP over time to build some basic tools for managing our e commerce site. But since I was a resident techie, I started to learn to code as well and took over a lot of his projects. Unfortunately, since I was learning the job, a lot of generally accepted good ideas got passed me, for example, having a development environment. That's right, everything was edited live in prod. So at this time of the story, we recently had started carrying singles of a new trading card game, and we needed those cards to be built onto our website, no problem. I found a fan site for the game and wrote a scraper. So I'm imagining that this is like a Magic the Gathering sort of thing I ran in, I ran it once and successfully and built all the cards from the set into our database, great, except I made a mistake and parsed some of the data incorrectly, no big deal, I'll just tweak the scraper and make it run an update statement again, against the database, all of our problems will be solved. I fixed the code and started the script and waited for it to finish running. And I kept waiting. And it waited some more. Why is it taking so long, I looked at the code to see if I could spot the problem. alarm bells started going off in my head, I saw the problem immediately, I forgot the where clause in my SQL, I had overwritten every single item in our e commerce database with the data from a single card, then, and then I continued to loop the process for every other card. The best part about the whole thing. I wasn't actually at the store when I was working on this. In fact, it was the worst possible place in my classroom with 30 kids watching a movie. That Class dismissed A few minutes later. So in between classes, I ran into my office and called my boss to his credit, he was unbelievably calm about it, I told him I would head over straight after work and get to work on it. I wasn't sure but I would come up with something that was Friday. Thankfully, I put in 24 hours at the store. And by Sunday night through a convoluted process, I was able to rebuild most of the data in the inventory. But what I couldn't rebuild was the stock quantities of Magic the Gathering singles in the store. So just like a bit of a side here, I've learned that Magic the Gathering these comic book stores and things like that will often have like hundreds of thousands of dollars worth of these cards on file and they have an entire database of of what it is that they had. So we had to do that by hand over the next month, how many cards you ask over 100,000 cards. So this guy had it written over written 100,000 Magic the Gathering entries and they had to redo it over by hand. So once the initial shock blew over, the whole thing turned into a joke. Again, I earned the nickname where I see SQL from the incident and often told people my mistake was actually just my way of establishing job security. I was eventually hired on full time as a manager, developer and proud to say I'm no longer development prod - -21 -00:08:11,910 --> 00:08:15,750 -Scott Tolinski: rookie. Ah, yeah, that stinks. - -22 -00:08:15,929 --> 00:08:24,750 -Wes Bos: Isn't that awful? Can you imagine your heart when you realize that you had overwritten 100,000 Magic the Gathering cards and had no backup - -23 -00:08:24,750 --> 00:08:27,930 -Scott Tolinski: in production? Whoo. - -24 -00:08:29,640 --> 00:08:35,879 -Wes Bos: I'm gonna give that one a six candy corn out of six candy corn because that is awful. - -25 -00:08:36,119 --> 00:08:49,649 -Scott Tolinski: That's candy corn is scary. So I'm also going to I'm going to give that a three candy corn veterans the highest candy corn rating that there is very spooky. That's like chip your teeth on a an old stay. Okay, and a corn. - -26 -00:08:50,820 --> 00:08:51,539 -Unknown: Boy. All right. - -27 -00:08:51,539 --> 00:09:31,350 -Wes Bos: Next one I have here is called yas. So testing a feature to overlay text on map tiles. I decided Yes. Was the appropriate text. Yes. Forgot. I had also just implemented caching. So it saved all of my new tiles to our production s3 tile cache lines called asking all the countries in all of their states said Yeah. So I logged into AWS went into our cash bucket on s3, deleted everything and then zoomed up and around the map for a while to recache a bunch of tiles. What bug you must have been seeing things, - -28 -00:09:31,500 --> 00:10:53,880 -Scott Tolinski: new bugs. I don't know what you're talking about. Yeah. This next spooky story is called token trouble. There was once a password list signup system, which sent out an email with a password link. This form was not a normal form. No. What was wrong with it, you ask? Well, it did not check the validity of the token. The route you were led down posted. The ID of the user. And while this situation was looking quite grim, it gets worse. Not only was this form unvalidated, and the token was not checked, because due to decay, none of this code was currently working. So with a loud scream, our hero finds out that the user IDs were actually sequential integers, meaning that anyone and anyone could hijack any Echo, they wanted to simply by changing the sequential number of the user ID on the post form. Luckily enough, our hero, he had the tools. And he had fixed this, like a carving knife through a pumpkin, and all the spooky exploits were put to rest. For However, - -29 -00:10:54,570 --> 00:11:24,720 -Wes Bos: I'm bad. That's, I've seen that before. Like, I remember when like the Groupon was a big thing. There was like a competitor. And the URL just said, like, coupon ID equals 400. And I was like, 400. Seems low. Maybe. And I was gone for Oh, yeah. Oh, man, I can see the entire address and name of everybody. And then I ran a little script. And I was like, Yeah, I can see like, hundreds of them. And I sent them an email and they fixed it, thankfully. But who? Yeah, buki? - -30 -00:11:24,779 --> 00:12:14,250 -Scott Tolinski: Yeah, I found, I found something like that I forget what it was, it was like a WordPress client forum or something. And it, you know that the username was going to be just that you know, your name, and then the passwords were auto generated for you. And it would be like St. 2019. So that way, if you knew the name of any user on the site, you could reasonably just type in their name, then their initials, and then 2019. And they all went, Oh, man, how generated are just like, oh, not so good. Not so good. That's like, almost like getting a when you get an email, and your passwords just sitting there in plain text in the email, and then you just really regret doing that you're like, I should never have given these people like I've never used this password ever again, for anything. I suppose a lot of these are cases for getting a password manager. - -31 -00:12:14,700 --> 00:14:17,549 -Wes Bos: No hitting. Next one we have I'm gonna say his name because this is very well known. Adam J. Sontag, back in the days of jQuery. Adam was part of the jQuery core team and he was the the jQuery plugin registry was dealing with some spam problems where like, you could submit, you could submit a plugin to the registry, and then they would approve it and put it in thing but people were submitting plugins that would like link to these like sketchy plugins that made you pay for them. And it's just a bad experience overall. So like, it was both like SEO spamming, but also people like trying to trick users into buying like plugins that they just had repurpose. So Adam was sort of like working on managing all of this and deleting it, and he was in the database one day, and he was just deleting some of these, the spam things here. And he accidentally deleted the entire plugin registry. And the the only backup they had was over a year old. And this was that jQuery heyday when things were changing every single day. So they they put up this blog post, basically, and said, like, Look, the plugins registry is is gone. we deleted it. Sorry about that. But it wasn't really all that good anyway, and they had they rebuilt it on Git and GitHub where you could do it. And actually it was it was kind of nice, because it just kind of cleared out all the cruft. And all of the good ones immediately made their way back into the registry. And then that was a huge push for people to move to using like NPM, and package managers, things like that instead of the old way that we're doing it. So can you imagine deleting, like the jQuery, the most popular JavaScript framework, probably ever at especially at the time, and everybody uses plugins, and then you just accidentally deleted all of the links to all of the plugins. And what do you do over there? - -32 -00:14:17,789 --> 00:14:21,750 -Scott Tolinski: And that reminds me of the Git lab thing. Do you remember that Git lab? One? - -33 -00:14:21,779 --> 00:14:22,409 -Wes Bos: No. - -34 -00:14:22,620 --> 00:15:54,210 -Scott Tolinski: What was it let me Google this really quick. Git lab, deleted their database, part of it like a huge part of their database? Oh, yeah. It was like a engineer. Oh, yeah. Git lab database. And, yes, I could almost read this one. Yesterday, we had a serious incident with one of our databases. We lost six hours of database data, including issues merge request users comments, snippets, and more. Yeah, they were gone. They got lost. There's this whole thing. Maybe I'll post a link to this in the description, considering this isn't necessarily a A spooky story that was submitted to us but this is a spooky story. And you've got to feel really bad for whoever goofed that went up because those kind of things they just happen as we have seen you know, it's so you got to be careful but at the same regard you know, everybody makes mistakes. Okay. I'm sorry everybody if you hate the soundboard because I love it. Next one is going to be success. There was a time when I wrote the word success to a file in production to the tune of nine gigabytes. That's a lot of success. Here's some people work their whole careers for that much success in the eye. He is able to pull it out in what probably was a couple of seconds. After that folks always trolled me for putting success in my work. Alrighty, and QA team had no idea you were running. Why we were running out of disk space. - -35 -00:15:55,169 --> 00:15:57,240 -Unknown: Access, success. Success. I - -36 -00:15:57,240 --> 00:15:59,340 -Scott Tolinski: yeah, that's great. - -37 -00:15:59,580 --> 00:16:03,720 -Wes Bos: That's exactly what can happen if you just leave a console log success in. - -38 -00:16:04,049 --> 00:16:05,460 -Unknown: Yes. Right. - -39 -00:16:07,529 --> 00:16:10,140 -Wes Bos: Oh, that is so funny. Success. - -40 -00:16:11,850 --> 00:16:36,000 -Scott Tolinski: These stories are quite spooky. I am beginning to question my own reality. And my own sanity. Oh, one of our sponsors today is sanity@sanity.io. And Sanity is fantastic. Let me tell you that. And West, I know you have some new things to talk about. With Sanity do you want to give those a give those a whirl. - -41 -00:16:36,120 --> 00:17:38,940 -Wes Bos: So sanity.io is a structured content CMS. So basically, what that means is that you you can go and you can npm install the Sanity, and you can create this sort of CMS it will, it's really cool it all run locally. It's not like you have to go to the the website and create it there. And then you can push that all of your, your fields and all of your relational data to Sanity. And then what that will do is they'll start up this little interface where that will allow you to edit all of your content, you can use your own react components with a lot of their content, which is pretty nifty. And then they just got like a lot of like helpful features that you don't necessarily have to build, like, image resizing and cropping. And you can choose where the thing crops around, like someone's face, something like that. Pretty, pretty cool. Check it out@sanity.io forward slash syntax, build your next Gatsby nuxt. Next, whatever, whatever it is you're trying to build. Try it with a Sanity back end. Thanks so much to Sanity for sponsoring us. - -42 -00:17:39,180 --> 00:17:50,880 -Scott Tolinski: I think that's fantastic. Because as developers, we like to just like be in our code, you know, like, just yeah, hang on your code. So being able to work on that locally, and not having to be always in a UI is super cool. - -43 -00:17:51,110 --> 00:17:54,320 -Wes Bos: Yeah. And like, not to mention, just like version control. - -44 -00:17:54,390 --> 00:19:44,220 -Scott Tolinski: Yeah. Right. Like that was a huge problem. And all those problems we just talked about with WordPress. Yeah, yeah. Cool. So next one is Parental Advisory. This one's pretty good. I started my first software development job out of college a few months ago at a mid sized company doing educational management software. About a month ago, I was working on a bug for a fixed a notification feature that sends letters to parents informing them if they qualify for free or reduced lunches, obviously very sensitive information. I was new and didn't know the codebase that well just yet. And when my boss let me know, they really needed this fixed done soon, and our QA person was gone for the day. I still wasn't very confident in it. And it was totally working, but not wanting to let my boss down. I said, Sure, it's ready. Famous last words. About two days later, the team gets an email from the project manager informing us that the school district has sent out letters, but instead of sending one to each parent, they had sent every letter to every parent, full of information. As a parent, I'm very horrified right now. I immediately knew my change was the problem and I had a pit in my stomach. Thankfully, my manager quickly reverted the change. But apparently, the customers were furious. Understandably. It gets worse. The next day, the whole development department 20 people are so got an invite with a random meeting with the CEO. I knew exactly what it was about. So I sat down in the chair and by chance when the CEO arrived he took the last empty seat, which was directly next to me. - -45 -00:19:44,430 --> 00:19:46,650 -Wes Bos: That's for sure the co workers leaving - -46 -00:19:47,300 --> 00:20:11,090 -Scott Tolinski: right they knew everybody know everybody's like is like that CD is toxic. All right, we go on to said we don't want to sit by this person. So for the next two hours, I had to sit with my entire depression. While the CEO ranted about how he got chewed out all day by customers or parents, because of my bug, and a few things related to my bug, four things. - -47 -00:20:12,719 --> 00:20:14,060 -Unknown: I don't know you either - -48 -00:20:14,060 --> 00:20:52,950 -Scott Tolinski: think, yeah, I just didn't lock those out. But they're they're there. I don't know if my boss told our CEO, I caused the bug, but everyone on my team knew it was me. I was mortified. I saw my software career flash before my eyes. After that, I did not get fired. And things just kind of carried on as usual. But Boy, was I anticipating starting a new job search in the next coming days. And that's that, yeah, that stinks. That is a that's scary, I would be absolutely sweating profusely, I would just be feeling downright - -49 -00:20:53,219 --> 00:21:34,380 -Wes Bos: awful. Oh, the email ones are awful. Because if you send an email out to many thousands of people, like, let alone you just send private information, but you can't stop it. Like it's the emails are sent. And you probably get emails and calls from people for the next two days being like, Hey, did you know that this is happening? Like I've certainly done that before, even just a spelling mistake in one of my emails, then I buckle up for the next week of getting emails from people saying like, Hey, did you know you spelled this word wrong, and it's awful, there's no way to like, go back and change it at least with the website, you can get it up and running again, or change whatever it is on the website. So they'll stop. - -50 -00:21:34,530 --> 00:21:45,240 -Scott Tolinski: Yeah, that is like super, super scary, just not like, it's like seeing the train, go down the tracks, and you're like, Oh, this is gonna fall off the bridge, and I can't do anything about it. - -51 -00:21:47,010 --> 00:22:42,150 -Wes Bos: I've got another one here called students changing grades. This is from anonymous, who's everybody catching a caching bug in prod had users receiving permissions of the user before them, which is off by 1000s of students click to see their grades. But if you have teachers permission, you get the teachers grade book, not only could you see everybody's grades, but you could change them to and they did. Everybody changed their grades right back, they're probably just curious to see if they could accept a few of them, left them change. I think that is bananas. Because off by one bugs. This is a perfect example of what is an off by one bug. It's if you have an array and you're trying to look up something or if you're looping over something, and the reference to what you have is the reference of the last iteration of the loop not this one. That's what off by one bug is and that is a nightmare in the new update to con. - -52 -00:22:43,440 --> 00:22:44,610 -Unknown: That is scary. - -53 -00:22:45,269 --> 00:23:45,300 -Scott Tolinski: This next one is going to also this one's not called Parental Advisory, but this one will have a little bit of a Parental Advisory. This story is called Laura cell. This story is hardcore. You see, the site was built on something called site core, and a featured a landing page with a few interactive custom pieces. Like a ghost, our hero was testing a feature to show and hide content, making content vanish, and then reappear right before our very eyes. There was a bug giving our hero a bit of anything quick, our hero use some random text throughout their work, although he made a grave mistake. Now what was this mistake? Well, he seemed to have it on the brain because he decided to use the random text of next face. Of course, naturally that that's what you would choose, right? With swift action. - -54 -00:23:45,390 --> 00:23:46,800 -Unknown: He splashed the bug - -55 -00:23:46,800 --> 00:24:30,510 -Scott Tolinski: everything was working. And well, you know, with limited QA I think actually, that might be the lesson for a lot of these stories. Is the words limited or no QA seems, seems to be a big clients limited to no QA. Yeah, that that is a frequent occurrence in these stories. Well, with limited QA is this stain would see itself all the way into the hearts and minds of 15,000 users and generated a staggering amount of emails demanding that email face be removed from the website at once. Our hero is left to admit their mistake in front of entire office simply by raising his hand - -56 -00:24:31,050 --> 00:24:32,160 -Unknown: to say yes, - -57 -00:24:33,240 --> 00:24:52,980 -Scott Tolinski: it was me and he had you know had no one to blame for this stinky situation but himself. Needless to say they have switched to a lorem ipsum generator, but some throughout the halls still tell tales of the face, and the mess that he left behind. - -58 -00:24:53,640 --> 00:25:07,410 -Wes Bos: Never put swear words when you're debugging never puts swear words in anything. They Is this always happens, I do it, I do it. And I've I've accidentally pushed them into production before. And I've learned the hard way as well. - -59 -00:25:07,860 --> 00:26:21,300 -Scott Tolinski: I have some in production right now that are not user facing. So this is actually funny, I took a screenshot of some of my code on Instagram, and people were cracking up that I have a mutation, a graph qL mutation named a bolt in my code. And they're like, well, what this is both mutation Well, I work my sites in Meteor Currently, I'm actually moving off of it. But the This is hilarious. I, when you log in as a user, it's done through a WebSocket. And through just ordered a standard request, right? Well, my whole systems in graph qL, except for that login. So I really needed a way to refetch specific queries on that thing. And since Apollo doesn't provide any sort of just refetch queries method or anything, what I did is I created a state mutation that that does nothing, it just returns a function that returns null, and it's an empty state mutation. And that way, I can just run that bullet state mutation and then cause a refetch of specific queries or run cash updates on that, even though it's not a graph qL function. And so I wanted to get that explainer out. Because before, like, what is this thing you have got going on in your code. That's it. It's just a little workaround a little bonus, but it's going to be gone. So sadly, it's no longer with us. - -60 -00:26:21,750 --> 00:28:08,940 -Wes Bos: Next one we have is I like to call it drowning in a waterfall. And this is not really a mistake, but it's just a scary client to have to work for. So the entire admin tool only work because the 35 script tags loaded in a waterfall. So what does that mean? You have a script tag that has to load and be parsed before the next one can be downloaded and be parsed and like etc, etc. and scripts further, further down the stack had hidden dependencies on a sync things done in the first script, change the script order, breaking everything, minimum minify, and concatenate, break everything. Even just looking at the terrifyingly, a long list of script tags, broke the list, broke the site. Oh, and then I mentioned that every page did this and all shared all of the JavaScript, or all of the files were served by an Apache Tomcat, for God knows why. So changing any file meant a 32nd restart of the server. That's when we find the waterfall problem. Tomcat was serving everything on the page. So requests were deeply queued. Moving the script tags to another port meant that the waterfall change which concurrent with concurrent requests to both servers, so deeply broken, I want to cry, my mom sounds like JavaScript that had been added on to for years, and years and years and years. And it's all dependent on things, just assuming things that are loaded before it. And thankfully, modules and things like that have solved these problems. But that certainly was an issue. Before we had any sort of modules in the browser, or even like something that common jazz. - -61 -00:28:09,240 --> 00:29:59,970 -Scott Tolinski: Yeah, it's fun. It's funny that these things totally exist. If you've ever worked in an agency, and like, maybe you're the first like, you're the newest member on the team, like you're giving the project and they're like, Oh, yeah, by the way, there's like, there's like 25 different CSS files in this and they all kind of override each other in this weird way. But you can add this one or this one or whatever. But just if you're gonna make something new, just add a bunch of new classes and copy and paste, I've had that same situation where like, all the sudden, you get the project that everybody has been, like avoiding touching for all this time, because they've had it for, you know, 10 years and nobody wants, wants to rewrite it from scratch. And the stories scare me this one scares me in particular, because I used to do a lot of Magento. So this one coming up is called Magento upgrades, which is honestly scary enough title in its own, it doesn't need any embellishment, if you've ever worked in Magento. I've had more white screens during like a simple version update on Magento than literally any other platform. Okay, so this story is September 2018. me the new client, you should update to Magento 2.3. CIO, we need a year to that we need a year to do that. We're still on 1.7 point two, actually, even the jump from two to one is sounds awful to me. September 2019. They haven't even started. So it's going to take them one year from when they start Magento 1.7 is from what year but 2012 security performance costs. In fact, I've worked in Magento 1.7. And I cannot imagine continuing to work in Magento 1.7. So I do hats off to you for putting up with that. But that right there is all you got to tell me for a scary story is upgrading Magento - -62 -00:30:01,439 --> 00:30:02,730 -Unknown: His name is john - -63 -00:30:11,730 --> 00:30:28,020 -Scott Tolinski: Did you ever listen to that prank call with the john cena prank call? Yeah. Oh, that guy's hilarious. Yeah look up john cena prank call might be the funniest prank call I've ever heard in my entire life and I could listen to that maybe 100 times and still find it to be funny so funny. - -64 -00:30:28,020 --> 00:31:06,060 -Wes Bos: I do that I just after I heard that is walked around my house being like, anyways, the reason why we just played that is cuz I can't even read this one. I was laughing so hard at this I had to show my way I could tell the ones that I told my wife about are the most hilarious. So customer called complaining that when using our application, every few hours, he would be blasted with fullscreen, john cena. So hold on. Imagine you're just chillin, working on a corporate app, something like that, and you have - -65 -00:31:06,990 --> 00:31:07,500 -Unknown: jobs. - -66 -00:31:12,780 --> 00:31:25,650 -Wes Bos: After a few minutes of giggling, we kind of already knew he had seen a phi, which is a Chrome extension, installed on his browser, the customer checked extensions and promptly called out his coworkers. - -67 -00:31:25,830 --> 00:31:41,340 -Scott Tolinski: Oh my god. So I think the lessons that we're learning here is one q&a. And two Chrome extensions that are goofy. You gotta like not use those in your death. Man, sir. Yes. Oh, this hilarious. - -68 -00:31:41,430 --> 00:31:42,030 -Unknown: Oh, man. - -69 -00:31:42,030 --> 00:31:46,610 -Wes Bos: Let's let's do Log Rocket. Man, these are great. We have tons left. - -70 -00:31:46,680 --> 00:33:21,240 -Scott Tolinski: Yeah, these scary stories are making me just want to leave this planet. And if I do, I would leave. So in a Log Rocket. And Log Rocket is a service that allows you to leave this planet to a higher, you're going to ascend to a new planet where everybody knows their bugs. And they can see the answers immediately. Because what Log Rocket gives you is a session replay. And if you've ever used any sort of error tracking tool, you'll know that you can get a lot of information, that is exactly what you need. But you don't always know exactly what the user did to cause the bug. So what Log Rocket does, besides working with your existing tools like Sentry, and everything else, any of your platforms that you could potentially use, Log Rocket gives you a session replay, where you can literally watch a video of the user clicking around on the site and see the thing as they click the thing and the other thing breaks all of the sudden. And not only that, but you can check out their console log, you can look at their errors, you can look at their network activity, you can look at their Redux store. You can see all of that and more just in a simple video being able to scrub through it. This is like next level bug tracking software. If you want to ascend to a higher level of bug finding hop on that Log Rocket at Log rocket.com forward slash syntax, you're going to get 14 days for free 14 days so that you can eliminate any spooky bugs in your code. All right, - -71 -00:33:21,270 --> 00:33:22,770 -Wes Bos: give me another spooky one. - -72 -00:33:22,800 --> 00:35:23,610 -Scott Tolinski: Spooky. This one's good. My gration my grain deep. In the heart of Texas, a large well known plumbing company was about to get the fright of their lives, something so spooky that it would cause their drains to Decalogue. They demanded super fast work and didn't want to pay for these fancy things like a proper environment for staging or queues, or A's. No, no IQ series, neither us nor as No. So soon enough, they would learn their mistake as a client services, sold them on the idea that they could build the entire site within the admin editor. And for those of you who don't know, the admin editor is editing PHP code on the browser in production into the database. Oh, so after four grueling days of finger tapping, nearly destroying the very keyboards that created the code, our hero was hacking and slashing through the work like a machete. Things were looking clean and the sun was coming out. But just then a page refresh and boom. It's all gone. The entire site is gone. It was all of the updates. They were gone. They were missing. The Plumbing Companies admin had actually wiped the slate clean by migrating to a an older version of the database by ironically enough, a plugin get it dry. No plugin Pour. Everything was gone. And I mean, everything, all of the hard work our hero had done was gone. Of course we know how clients are the plumbers denied having any responsibility for this clog in the workflow. And our hero was left to start over from square one a long weekend. Indeed. - -73 -00:35:24,029 --> 00:35:35,630 -Wes Bos: Oh man that things like that. Just make me if you ever have a client that goofs around with stuff like that. You just set up like hourly backups or something like that just just to save yourself because like, - -74 -00:35:35,669 --> 00:35:38,690 -Scott Tolinski: oh, awful. That sounds bad. Yeah. - -75 -00:35:38,729 --> 00:36:08,630 -Wes Bos: Next one we have is called the primary key nightmare. This one is gold. I work for a large financial institution that shall stay nameless. Last year, I found a bug where you could edit the page source when retrieving your monthly statement. If you changed it to somebody else's account number Wallah, their statement became yours to download. The account number was used as a key to retrieve the back end service. - -76 -00:36:08,630 --> 00:36:09,540 -Unknown: Oh, that - -77 -00:36:09,540 --> 00:36:21,330 -Wes Bos: is a major goof up. Oh, it's funny, like, you think like your bank has good security, things like that. And sometimes it's not at all. No, - -78 -00:36:21,380 --> 00:38:38,460 -Scott Tolinski: this is this. That's your bank right here. They don't care. Okay, this spooky story is called the $20,000 yamo format, or you got the words $20,000 in the title, you know, it's gonna be good. Here's a story about an auto formatting frontmatter. I was working on an e commerce client site during my first dev job and added their products page, a simple request that only required the change of the frontmatter. For those of you don't know, frontmatter is like a bit of metadata that gives information about a particular page. No problem. Well, I saved quickly and pushed it to their store, just like I had done a million times before I checked out the category when it was pushed. And all was cool. I didn't go to check on the live store. Because I got a call from another client. Mistake number one. Yeah, that is that happens. Four hours later, I get a call about why the site which should make you about two to $20,000 a day had gone down. For hours the Yeah, the other 20,000 that's a that's a spicy meatball right there. Well, I made some support calls and called the client a bunch and I couldn't figure it out. Finally, at the end of the day, I had forgotten that I had turned on my HTML format on save for a project I was working on earlier, it had indented the YAML. Those of you don't know YAML has the indentation rule. Like it has to be indented a certain way like Python or some other languages, right? So it had accidentally indented the YAML. When I made the change, pretty much all of the yamo was then invalidated. Luckily, they were cool about it. How are they cool with that? How would that like I would not be cool about that. Even though they didn't quite understand the technical aspects. Good Times exclamation point. Also, if anyone knows how to ignore YAML in HTML files, when formatting on Save, it would be rad. Anything that works lol please use the name smokey. Okay, smokey. I should have read this in a much smokier voice. - -79 -00:38:38,550 --> 00:39:04,610 -Wes Bos: Oh, man. That's awful. That's it's funny because like, that's something that you didn't do. But your code is there and you have these robots that format your code, and they accidentally do something with it. And ideally, that would go through a kind of approval or even just like a some sort of ci right. But like that's ideally a lot of a lot of people are just kind of cowboy in it and doing quick little changes here and there. For you know, the thing crashes and burns. - -80 -00:39:04,650 --> 00:39:48,330 -Scott Tolinski: Yeah, I mean that that seems like a I mean, there there is some legitimate and common threads throughout these. And of course they are cowboy coding. Yeah. Which is where you're just editing live on the server, which, you know, we all have kind of done at some point in our careers. Whether or not we wanted to or not, maybe it was the demand from the client. Bad q&a or no q&a at all. browser extensions. just general Miss steps here and there. But these things are hilarious. We have a lot more for you. I think we're gonna have to do a second episode. But I thought these stories cracked me up. Because they're so relatable on so many levels, but at the same time, you just feel so bad and you just cringe for the things that have happened. - -81 -00:39:48,630 --> 00:40:20,850 -Wes Bos: Alright, let's move into some sick pics. So like like Scott said, we'll do the rest. in upcoming episodes. We've got some off some really good ones coming up here, and we'll do some sick pics. Now and catch you in the next one. I'm going to sick pick a subreddit called absolute units. This is a hilarious subreddit of things that are big. So something like a carrot or somebody who is 300 pounds and just jack like have you seen this? The guy the mountain to know who this? - -82 -00:40:20,880 --> 00:40:39,920 -Scott Tolinski: Yes, I've seen the mountain. Yeah. Oh yeah, dude. Besides Game of Thrones, which I know you you didn't watch. he's a he's an actor in Game of Thrones, but we watch the the strongman competitions The World's Strongest Man just to see him go, like throw around some giant bricks and just like toss them after the dude is unreal. - -83 -00:40:40,170 --> 00:40:56,460 -Wes Bos: If you just Google the mountain holding a mug, it just looks like he's holding like a kid's mug. It's so tiny. And so this subreddit is just full of absolute units. So anything that is larger than it normally should be, and I find it very amusing. Check it out. - -84 -00:40:56,630 --> 00:42:14,690 -Scott Tolinski: Nice. My sick pic. I always thinking about this because, you know, sick pics, they gotta be these things that genuinely make our lives better. You know, like a subreddit full of absolute units, right? I mean, that makes our lives better. And so one of the things I was using the other day that I realized I've never sick pic, but I've had for a couple years. And it's kind of ridiculous how much this thing has enriched my life. This is this Dyson chord free vacuum. And like, Oh, yeah, so vacuums. I've added a Costco while ago there's, you know, a whole bunch of different ones in the same class a vacuum. But the idea here is just it's it's like a little, whichever. When you get there all awesome. You plug it in, it charges up hangs on the wall. And it has a billion attachments. And it's this super light, little it looks like it looks like a dustbuster for those of you have ever had dust busters. But there's a long tube on the end, too. So we use this thing as our standard vacuum because we don't have a robot vacuum. And it's just awesome. I use it every single day, we have an old house that generates a lot of dust. So we use this thing, absolute 24. Seven to vacuum just about anything but you you swap out the tube and you're not vacuuming the floor anymore. But you're, you know, vacuum thing here in there. The battery lasts forever. It is super powerful. - -85 -00:42:14,690 --> 00:42:26,670 -Wes Bos: How long does the battery last? Because I see them all the time used? And they say it runs for two minutes. And obviously Yeah, it's probably like, like, really old. And I'm like, I wonder if I could swap the battery? Like, what is it when it's good. - -86 -00:42:26,790 --> 00:42:31,350 -Scott Tolinski: I don't know there's when it's good. It's enough to clean the whole house - -87 -00:42:31,400 --> 00:42:32,610 -Wes Bos: longer than you need it - -88 -00:42:32,690 --> 00:43:06,860 -Scott Tolinski: longer than you need it. And then unless of course you turn on the like the hyper power mode or whatever. And then it's done in like, very not that long. Because like there's like a super power mode, which I never use anyways. But this thing is just fantastic. I've been using it for years now, a couple years. Yeah, I think we probably had their like add v 11. I think we probably have the V six or something like that. But it's great. It's fantastic. It's super nice, super easy. So if you don't if you're in need of a vacuum cleaner, and you want to not get a robot one, this one is where to go go to Costco because they have a decent price on it too. - -89 -00:43:07,020 --> 00:43:29,100 -Wes Bos: Cool. Let's move into some shameless plugs. I'm gonna plug all of my courses, Wes bos.com, forward slash courses, you can grab yourself a free course or a paid course or whatever it is use the coupon code syntax for 10 bucks off anything that is on there, except for the fried ones, you can't get 10 bucks off free. That's how it works. What about us got - -90 -00:43:29,400 --> 00:44:27,990 -Scott Tolinski: a, I'm gonna be plugging my course that comes out tomorrow, it is going to be full stack react with next j s nine. And it uses the new next day as API routes. And this course is pretty dang jam packed full of content. It's not a beginners course. But it's also not like too daunting. What we do is we're building like a habits tracking app. And we set it up with a graph qL API via Apollo Apollo server, we set it up with a database using MongoDB. And then we use react on the front end. And what you get is a server side rendered site, you get all of this running out of one repo using next J. Next js is API routes. So your entire Apollo API, it runs out of a single folder within your next JS application. It's pretty dang sweet. So check it out. It's going to be available October 31. On level up tutorials comm you can sign up to become a pro today and get access to that course and more - -91 -00:44:27,990 --> 00:44:33,060 -Wes Bos: beautiful we should do a show on next. Yes routes. I think it's pretty cool how they work. Big fan. - -92 -00:44:33,240 --> 00:45:07,890 -Scott Tolinski: Oh, yeah, dude, I'm the new the new version of level up tutorials is built using the API routes in next nine. Yeah. And like I just, it's the perfect thing I needed for moving from Meteor because my whole API was already out of one folder within Meteor. And like the fact that I could basically just remove the meteor stuff and point the next JS application essentially to one file and that's all I needed to do to migrate it. was like pretty darn amazing. So, and this is going to give me a lot more control over my containers and stuff. So I'm pretty psyched about it. Wow, that's awesome. All right, - -93 -00:45:07,920 --> 00:45:18,570 -Wes Bos: well, let's wrap it up here and we will catch you in the next one for some more spooky stories these days - -94 -00:45:20,580 --> 00:45:30,330 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax193.srt b/transcripts/Syntax193.srt deleted file mode 100644 index 8083f024f..000000000 --- a/transcripts/Syntax193.srt +++ /dev/null @@ -1,256 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Unknown: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA bombs and Scott Taylor. - -2 -00:00:23,610 --> 00:00:24,450 -Totally at ski. - -3 -00:00:26,520 --> 00:00:54,390 -Scott Tolinski: Welcome to syntax on this Monday, spooky treat. We're going to be continuing some of our devs scary stories. And we're going to be doing so in a hasty or fashion these are just going to be so we had a lot of these spooky stories and we couldn't just leave it to one little episode so we wanted to extend it. This is an A this is an EP, an extended play of this spooky stories. My name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me as always, is z Wes Bos. - -4 -00:00:54,840 --> 00:00:59,040 -Wes Bos: Hey, everybody. Hey, Wes. You should West booth. - -5 -00:00:59,040 --> 00:03:27,780 -Scott Tolinski: Yes, I did. I don't think there's any possible way. Scott hilinski maybe, huh? I don't know. Yeah, that's not that good. So let's get into it. This episode is sponsored by century now century is for those of you who have been tuning into syntax for a little bit, you'll know that Sentry is one of these sponsors that's been around for a really long time. We love Sentry over here, we both use Sentry ourselves. And I personally rely on Sentry every single day to make sure that all of my bugs are tracked, logged recorded, and that I know how to solve them. Now Sentry is the error and Exception Handling tool that integrates with just about every single thing that you could ever possibly use, from react to node to or whatever Sentry is going to be there for you, you're gonna want to head over to sentry.io and use the coupon code tasty treat all lowercase all one word, sign up, let them know, you're going to get two months for free of century when you do them, let me tell you, you're going to want to just try it out, throw it on your site, see the kind of errors and exceptions that are happening when you aren't looking. If you aren't on the site, you're not experiencing these errors you have anything that anyone's using, there's going to be bugs and things that are happening. So might as well categorize them, catalogue them with a tool like Sentry. So check it out@sentry.io coupon code tasty treat. Okay, here's a tasty treat. The first question or the first spooky story here is called perf. Whoa. In my beginner days, I built a charity system that needed to screen recipients for duplications, the pages spit out all recipients in a particular order. Well, the client was wrong about the number of expected recipients and it took down the shared database server and 20 production database. Though the woes of shared server in general, I remember I ran updates on a Magento site. And it brought down an entire shared server on GoDaddy because Magento or GoDaddy or whoever at the time, this was way back in the day, one of my first websites did not have the memory requirements to run Magento but they still had the one touch for Magento on whatever this system was. And then like after talking to customer support, they were just like, yeah, we're gonna remove that one, one quick install, because it's bringing down people sites. That's funny. It's It's funny how often like in my entire career, - -6 -00:03:27,780 --> 00:03:59,250 -Wes Bos: I've DDoS myself more than people have DDoS me, you know, like, you can accidentally write some queries that write a million database queries and take down your server. definitely been there before. Totally. Next one, it was called always backup your backups. We have a dev who knew he was being let go. And he deleted our site and backups before he left. I had to restore what I could feel the Wayback Machine page by page. Man. - -7 -00:03:59,820 --> 00:04:02,880 -Scott Tolinski: That's rough. Don't do that. If you're if you don't do that, what the hell - -8 -00:04:02,910 --> 00:04:04,920 -Wes Bos: I almost wonder if you go to jail for that, you know, - -9 -00:04:04,920 --> 00:04:07,800 -Scott Tolinski: like seriously, that's should be legal. - -10 -00:04:07,950 --> 00:04:34,410 -Wes Bos: If that was like someone like a filing cabinet. And you just lit the filing cabinet on fire or like dump water in the filing cabinet shredded it like that's for some reason doing that digitally is allowed or it's probably not like I bet you could get get into legal trouble for doing that. That seems like a shady way to go. Why not just leave the way everybody does and light a bag of dog poop on your bosses? Yes. - -11 -00:04:35,310 --> 00:04:40,860 -Scott Tolinski: That's a good way to make sure you never get hired ever again. Boop buggin Yeah. - -12 -00:04:42,990 --> 00:04:51,570 -Wes Bos: So don't do that. That's a nightmare. So backup your backups or have off site backups i think is probably the the solution there and test your backups. - -13 -00:04:51,600 --> 00:05:29,400 -Scott Tolinski: Yeah. Is that the thing that people say to do? Okay, next one is kill children. Don't get don't kill children. Back in the day. Before console log, we used to have to alert ourselves to whatever it was up to. I accidentally pushed to production, some j s that had alerted the names of some custom DOM manipulation functions, one of which was named, killed children. visitors were a bit freaked out. Yeah, if you're on a site that just pops up and it's like, kill children, you're gonna be like, Man, this site was hacked by Jason. I don't even know what to think about it. Yeah, so don't do that. - -14 -00:05:29,610 --> 00:05:44,670 -Wes Bos: I remember before I learned JavaScript, like IE, like five would always tell you like illegal something. Yeah. There was some sort of illegal and remember it popping up being like, ooh, like, Am I doing something illegal? Yeah. on this website? - -15 -00:05:45,300 --> 00:06:01,320 -Scott Tolinski: Yes, I know, we will. What is that people like non tech people, like freak out when the developer tools act that they're the developer tools open? And like, if somebody I'll put something to the console, there'll be like, Oh, I'm being hacked. Physics, telling me to not be on this page. What are you - -16 -00:06:01,320 --> 00:07:13,170 -Wes Bos: doing? Yeah. Next one is robots don't eat food. I blocked Google, from the at the time largest recipe website in Europe that had a community with thousands and thousands of threads. Google removed 50% of the index during a weekend, so visibility dropped horrible. And Google stopped delivering ads. So long money was lasso. Ooh, imagine so robots. That txt is a file that lives on all websites and tells Google whether which pages or directories, it should crawl. I've certainly done that before. Actually, I had a website years ago, where we, we migrated it for some reason. And for some reason, that like local version of the robots. txt, had, like a disallow star. And we accidentally just put that up. And then overnight, or over a couple days, everything dropped from Google. And I think it actually was a setting in the WordPress back end, don't allow Google to crawl this. Yeah. And I just went in there and clicked it. And luckily, a couple days later, it came all back. But imagine like someone that relies on search traffic for your entire business to function. - -17 -00:07:13,289 --> 00:07:31,080 -Scott Tolinski: Have you ever done the opposite of that? Because I have, where we have a staging dot whatever. And that staging site wasn't secured by anything, because we had a lot of people looking at it, and then you forget to put a don't follow and then you're googling something and you see your staging site pop up in the search results. - -18 -00:07:31,289 --> 00:07:32,430 -Wes Bos: Definitely has happened. - -19 -00:07:33,020 --> 00:07:35,010 -Scott Tolinski: Yeah, that one's happened to me. No, no, - -20 -00:07:35,130 --> 00:08:20,820 -Wes Bos: I actually have a kind of a funny story somewhat unrelated to that. But I for a long time, I scheduled WordPress database backups to just email to me, and then I immediately archive them. And I have one from probably 10 years ago that I installed on a client's local server. And every day it's still email is a backup and I like can't figure out that WordPress is like, I can't figure out where the WordPress is installed. I think it's just like a local machine. And again, figure out how to turn it off. And this a ghost Yeah, I don't want to block it as spam because it would hurt their domain. I am sure I could contact them at some point. But on some rogue server I'm sure they haven't. They've decommissioned but it's still running for some reason. It's like every day send me a backup for like yours. Oh - -21 -00:08:20,820 --> 00:08:24,750 -Scott Tolinski: my god. That's hilarious. That's a good one. Oh, go server. - -22 -00:08:24,840 --> 00:08:26,190 -Wes Bos: Yeah, that's spooky. There - -23 -00:08:26,190 --> 00:09:28,830 -Scott Tolinski: you go. Spooky. Yeah, yeah. You said you didn't have any spooky stories. That one spooky they didn't include the ghost. Alright, email goof up. So when I was a junior, I was emailed a job from the boss a list of email accounts to remove well the email was forwarded as part of a chain I saw the first email and a long list of accounts. I worked through them removing them one by one, you know, pop to the bathroom, come back and I see my boss's face is read. He read the wrong email. And I had removed the initial list of accounts not the accounts that were supposed to be removed. Luckily they were p o boxes so the clients emails or allowances what oh pop boxes p Oh, I hit my my cursor over it. I was like how does a p o box fit into this? Luckily, they were pop boxes. So clients emails were all local and we restart the accounts from a backup thank God for backups because yeah, yeah, you don't want to do that. That's a bummer. But yeah, email goof up for sure. And - -24 -00:09:29,150 --> 00:10:19,500 -Wes Bos: that's why a lot of people do what's called soft delete now so because of how scary deleting things is scary they don't actually delete it. They just mark it as deleted yeah as like a property or a column in the database entry. Next one we have is hundreds of thousands of date issues. I had two arrays for a calendar short names for the week and long names for example, MN tues, weds and monday, tuesday wednesday, but one of them started on Monday and the other one started on Sunday. De, which my OCD had couldn't stand up. So I updated them to start on the same day, I forgot to update the calendar logic. So through 36 hours, I had customers booking products for the wrong day in the applications used by hundreds of thousands of people. - -25 -00:10:21,570 --> 00:11:21,990 -Scott Tolinski: And I did so when I worked at the startup, that's what we were doing was like booking stuff. And I did all of the logic for the calendar and booking stuff. That is not an easy task. Like it, there's so many possible ways to goof up or allow maybe like a duplication of a booking or anything like that. That is just one hefty pie there. So yeah, the hundreds of thousands of data issues for sure. Yikes. All right, spooky. August, one of my projects used a release branch to deploy to production. Okay, very common. This wasn't a problem until we needed to merge fixes from one release branch into another release branch, and a dev left to the Delete after merged text box checked. We lost our August release that day. Oh, so it needed to merge. And then how did how did they lose the branch? I guess I understand like the delete the previous branch. But wouldn't the merge even though it wasn't like failed? Wouldn't the merge at least have like been there still? - -26 -00:11:21,990 --> 00:11:42,480 -Wes Bos: I don't know. I delete after merge. Yeah, like wouldn't? I don't know how that can happen? Maybe it was all on one devs machine. Oh, and then they delete because part of what happens is when you merge a branch, you just have that branch kicking around forever. And then before you know you've got hundreds of old branches, so you can delete them. Oh, yeah, - -27 -00:11:42,510 --> 00:11:43,650 -Scott Tolinski: I delete all the time. - -28 -00:11:43,800 --> 00:11:54,720 -Wes Bos: And also, that's because if you want to clone something, if you clone it with all these weird branches, and then it's kind of weird as well. So I guess it was deleted. That seems like a dangerous button to have, right? - -29 -00:11:54,960 --> 00:12:00,810 -Scott Tolinski: Well, they're even in GitHub when you when you merge a PR. It's like delete branch. I mean, obviously it's not auto but - -30 -00:12:00,810 --> 00:12:30,060 -Wes Bos: yeah, ideally, you'd have like a local version as well. Yeah, totally. But that seems like a like, that shouldn't happen, right? Like he's a call. There's so many safe cases. But stuff like that does happen where there's like, it's a perfect storm of the accidental things that had happened. Totally, maybe it was like the actual GitHub, like the GitHub like, like desktop app, maybe and it deleted it locally and remotely. I just don't ever want to get into that. Sorry. Yeah, - -31 -00:12:30,060 --> 00:12:30,810 -Unknown: I'm good. - -32 -00:12:31,350 --> 00:12:48,180 -Wes Bos: Next one we have here is you're up to bat when I was a left. This is hilarious. When I was 11. I wanted to help tune up my friend's newly acquired and very old PC, so I replaced his boot dot bat files with mine. His PC wouldn't boot after that friend cried playdate over - -33 -00:12:49,680 --> 00:13:13,380 -Scott Tolinski: boot, Beth Brooklyn's my daughter, her initials are bat. And when we when we were first naming her, Courtney was like, I don't, I don't want the like, I love the name Brooklyn, but I don't want her to be named bat, or initials defeat bat. And I was like, Oh, is this this is too bad. Like, I like Brooklyn, and now, both leaning into it super hard. And we're like, oh, there's our little bad - -34 -00:13:13,440 --> 00:13:16,740 -Wes Bos: or bad. That's great. - -35 -00:13:16,860 --> 00:14:30,480 -Scott Tolinski: Okay, this next next one is printed code. We went to a potential client that was having issues with their software. I asked them if we could see the source. And he said, it's hanging up in the back. That's already confused. It assumed that he meant a USB stick. Okay. Yeah, that's Yeah. Okay. When we get back, it's actually printed out on paper and hanging. Apparently, they had one guy writing this over 10 years spaghetti code in PHP, no version control, no comments. And, uh, oh, there's not good, no comments. And sadly, we were brought in because the guy had passed away. So Oh, my, written down on paper. I have never heard of that happening before. That is outrageous. It reminds me of a, there's a is one of this the city that I'm from, there was a guy who I'd worked with at a computer store who was applying for a job at another computer store. And he had went into this place to interview and he turned down the job and you're gonna hear why because he goes into the interview. And the guy's like, so I hear you're good with puters puters puters. He's like, - -36 -00:14:30,660 --> 00:14:31,200 -Unknown: yeah, - -37 -00:14:31,200 --> 00:14:52,110 -Scott Tolinski: I guess I'm pretty good with pewters. That was just like a small microcosm of everything that happened on that interview, but it was apparently a very similar type situation where there was just like, like, the people he would have been working for just like had no idea how computers worked, right? printing out code, and like, you know, they print out emails or whatever, but yeah, - -38 -00:14:52,170 --> 00:14:59,970 -Wes Bos: pewters man. Wow, that's, that is great. I bet like you could go onto the server and grab a copy of it. - -39 -00:15:00,359 --> 00:15:03,150 -Scott Tolinski: Nowadays, just take a picture of it with your phone and have it. - -40 -00:15:04,109 --> 00:15:09,690 -Unknown: OCR and yeah, run a linter on it and you're up and running in a couple minutes. BINGO, BINGO, I just start pulling out my - -41 -00:15:09,690 --> 00:15:10,230 -Scott Tolinski: code. - -42 -00:15:11,039 --> 00:15:32,640 -Wes Bos: Next one is the first production code update at think key thinkgeek, which is like a website that sells geek stuff, right? It's pretty, pretty popular website stuff. That syntax was elsif Ls if instead of ls space l Yeah. l LS if what language is that? Is that Python? - -43 -00:15:34,320 --> 00:15:36,600 -Scott Tolinski: It's PHP, isn't it? It's Ruby. - -44 -00:15:36,600 --> 00:15:37,410 -Unknown: Oh, - -45 -00:15:37,410 --> 00:15:38,910 -Scott Tolinski: I see what you're saying. Yes. Okay. Yeah. - -46 -00:15:39,150 --> 00:15:49,710 -Wes Bos: No, because PHP, sorry. It's LS if PHP does elsif and l space? If yes, but who saved a letter there when building Ruby? That's funny. - -47 -00:15:49,740 --> 00:15:51,570 -Scott Tolinski: I know. That from Ruby. Yeah. - -48 -00:15:53,250 --> 00:16:01,710 -Wes Bos: It's server rendered. And I took down the entire site. It was fun hearing QA run around the corner gelling sites down sites down. I faint. - -49 -00:16:02,970 --> 00:16:04,320 -Scott Tolinski: Oh, no. - -50 -00:16:04,620 --> 00:16:05,880 -Wes Bos: Yeah. Oh, that's - -51 -00:16:06,090 --> 00:16:49,140 -Scott Tolinski: something bad happen. Just like one letter. one letter. Yeah. Next one it would take. It would take a while to catch up on all of these orders. Oh, this is a good euro catch up with a K. This one? Yeah. Like this? Yeah. Well, when I was just starting out in the biz, like 15 years ago, I worked for a pretty big Swedish grocery chain, redoing their website to gain some time, we had a hard coded all article names to catch up in that dev envy instead of lorem ipsum. This is another ipsum folly. Guess what eventually ended up in production? Well, when they finally launched, they sold a lot of ketchup. - -52 -00:16:53,640 --> 00:18:39,320 -Wes Bos: Oh, that would be awful. It's probably like maybe on the client side, it says the name but when the order actually goes through, just catch up. You know, product is Yeah. Rough. Next one is this story makes me want to stick my head in a sink. Oh, actually, S is a good one. I told my wife about this one. My first dev job was working at a meal kit startup think Blue Apron that is no longer with us. So it's one of these meal kits syrups that no longer is there. I was doing full stack node and react on one of my first major back end projects was the integration with the new shipping fulfiller. Fast forward a few weeks and I had finished the integration was ready for an actual production run, it would be responsible for the fulfillment of 1000 orders each week. Keep in mind these orders were meal kits, which are perishable errors and delay could mean wasted. Money lost lots of money. I was definitely super nervous. But I tested it a bunch and had written actual unit tests and felt as confident as I could be. The first orders were placed on a Friday afternoon for some reason. Yeah. Shortly after I got home, I got a text message asking what was going on with this shipping integration I wrote, it was crashing and only handful of orders were going through. I almost passed out a few hours of troubleshooting later, I still couldn't figure it out. I got bailed out when one of the IT guys in the Project Lead manually inputted all the orders. I later realized I didn't know what a sink coding was. And that I was unintentionally slamming the shipping API with all 1000 orders at the same time. This led to some serious digging into promises, generators and a sink await which I can now say I've become advanced and proficient in absolutely the scariest bug I've ever produced. - -53 -00:18:40,650 --> 00:20:00,000 -Scott Tolinski: There's no greater like learning incentive, rather like the neck kind of thing happening where you're just like, well, I it looks like it got a lot of stuff to learn. The first time we had learned Angular was we were working this job and there's three contractors. And they gave us an assignment. And one of us had the assignment that was due, like first his assignment, let's say was due on a Wednesday and ours were due like a month later, right? And he presents his and they were so mad about it. They were like we need this is a bunch of jQuery plugins, like strapped together this thing is awful. And like the other two developers, and myself and this other guy, we'd also been mostly just using jQuery not because for no reason other than these were just prototypes, right? And so they fired the one guy. And they were like, We need this thing due today. And so the other to the me and the other developer, we spent like 24 hours just like slamming through Angular tutorials to like build a better system for this thing. And then work it out. And then we got done in where we were rewarded with a nice little bottle of whiskey for each of us for our hard work but we It was like there was no greater thing. It's like okay, this guy just got let go. If we don't get this together in 24 hours and really like master something here, we're going to get - -54 -00:20:01,610 --> 00:20:09,540 -Wes Bos: Yikes Well, I think that's enough spooky stories for the for everything I think we'll do another one of these next year. - -55 -00:20:09,590 --> 00:20:10,470 -Scott Tolinski: Oh yeah - -56 -00:20:10,550 --> 00:20:22,820 -Wes Bos: these are great so if you are listening to this and you have it send us over one you can send it to my email Wes at Wes Bos comm send it to Scott however which way you try to send it over to us we'll start a list - -57 -00:20:22,920 --> 00:20:26,700 -Scott Tolinski: Scott at level up tuts is the shorter email for me - -58 -00:20:26,760 --> 00:20:29,160 -Wes Bos: Scott love love tut's dotnet - -59 -00:20:29,190 --> 00:20:36,720 -Scott Tolinski: yes level up tuts I even people messaging me on my level up tutorials comment form talking about love love tuts now because - -60 -00:20:40,170 --> 00:20:43,650 -Wes Bos: you should do like a limited run of T shirts love tutorial need - -61 -00:20:43,650 --> 00:20:46,310 -Scott Tolinski: a little heart heart logo. That's it. I'm done with that. - -62 -00:20:47,670 --> 00:20:53,700 -Wes Bos: Cool. All right. Well, thanks so much for tuning in and we will catch you on Wednesday. Please - -63 -00:20:55,610 --> 00:20:58,200 -Scott Tolinski: head on over to syntax.fm for a full - -64 -00:20:58,200 --> 00:21:05,400 -Unknown: archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax194.srt b/transcripts/Syntax194.srt deleted file mode 100644 index eb15b5667..000000000 --- a/transcripts/Syntax194.srt +++ /dev/null @@ -1,448 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,820 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:05,760 -development treats out there. - -4 -00:00:05,760 --> 00:00:06,480 -strap yourself - -5 -00:00:06,480 --> 00:00:41,250 -Wes Bos: in and get ready. Here is Scott to Lansky and West boss. Welcome to syntax today is a potluck, which is an episode where you submit the questions, Scott and I will answer them we're going to be talking about all kinds of stuff. Gatsby next j. s security with things like Google Home listening to you over writing prototypes. Is that an okay thing to do, man some some good ones today. Today we're sponsored by Netlify and fresh books that we'll talk about them partway through the episode. My name is Wes Bos, and with me today is Scott to Lynskey. How you doing today, Scott? Hey, I'm - -6 -00:00:41,250 --> 00:01:16,440 -Scott Tolinski: doing good doing very good. So you know, I had my tailbone injury. Yeah, I have. I've gotten a shot in my tailbone on last week. And everything feels great, man. Really? Yeah, it's supposed to last me the entire year. So I'm going to actually be able to sit down for a whole year. I'm pretty darn psyched about it. If you've ever paid attention to we did our syntax live shows I'm either like leaning forward or standing up or whatever, because my, my tailbone is always killing me. So I'm really psyched to be able to sit down and it's kind of life changing. So here I am. I'm ready to go. - -7 -00:01:16,469 --> 00:01:20,190 -Wes Bos: What What did you get injected? Is it some of those like stem cells? Yeah, no, I - -8 -00:01:20,190 --> 00:01:25,140 -Scott Tolinski: it's like a it's a straight steroid, I believe. But it's like, right into the bone. And - -9 -00:01:25,469 --> 00:01:27,870 -Wes Bos: you Rhoden you can't go in the Olympics. Now. - -10 -00:01:27,870 --> 00:01:35,070 -Scott Tolinski: I know, man, I'm artificial now. So but whatever. I don't care. The other alternative was to cut it off. And I'm not into that. - -11 -00:01:35,729 --> 00:01:54,560 -Wes Bos: Oh, no. Yeah, nothing. Sounds rough. Yeah, you're rolling up. Yeah. Funny story. My mom was in the hospital eight years ago, like pretty, pretty bad situation. And to get her back out of it. They gave her all these steroids. And they're like you're doing well, but you can never go in the Olympics. - -12 -00:01:57,300 --> 00:02:07,500 -Scott Tolinski: That's super funny. Yeah, I saw you I saw you swap out those mirrors on your your car, you will swap them out with some carbon fibers. - -13 -00:02:07,590 --> 00:02:22,350 -Wes Bos: Yeah, pretty sick. Hey, hey, we have an SUV and our garage is like we downtown. So having a garage is lucky enough. But this thing is like our garage is super not wide enough for the type of car that we - -14 -00:02:22,350 --> 00:02:23,720 -Scott Tolinski: have. Oh, I know how it is. Yeah. - -15 -00:02:23,750 --> 00:03:21,960 -Wes Bos: And like, you have to be really good at backing it up. And twice. Now two mirrors on the car twice. Thankfully not me. But other people who have driven our car have knocked off both of the mirrors, not knock them off. But like clip the side of the garage when they're like backing up. And like this, these these mirrors are like they fold in and they're heated and they're they're auto dimming and you can change them every angle and they do everything like the entire mirror is like like $3,000 so I like I went on eBay and found all the parts and the only thing that they didn't have was like I like a cap like the top part to match the color of the car because you have to get that painted right if you order it from the dealer or whatever it comes just primed and you have to paint it so I like got some sick carbon fiber one yeah. of like, like some like, like BMW racing thing. Yes. And, man it This cargo is so much faster with that weight reduction. - -16 -00:03:23,190 --> 00:03:28,050 -Scott Tolinski: Nice, nice. Yeah, it's like reducing your JavaScript bundle size a little bit or something. - -17 -00:03:29,910 --> 00:03:48,990 -Wes Bos: One thing to do, though, like anyone to like, I don't know, try fix your own stuff. Because like a shop would have cost thousands of dollars and I was able to get away with new blinkers, new caps, and new supports for just a couple hundred bucks and they're ready to be smashed again. Even just like for the troubleshooting and problem solving bits of it. I - -18 -00:03:48,990 --> 00:04:37,410 -Scott Tolinski: mean, that's analogous to programming. I fixed my my fridge today. We've been having a water dispenser Coco papa, papa, papa. Yeah, you tried it yet. And so I was like, Okay, I need to do like hoes for the or the new valve for the line. So I like pull the whole thing out, I pull the fridge out, and I start to pull the line out. And like as I pull it out, I'm like, you know what, I'm gonna hook up the knob, this is sort of dissembled, I'm gonna hook up the water filter, and just try the water thing. And it all of a sudden stopped bubble bubbling. So I put it back together, and it just works. It was like 100 bucks. And I was I was like finger on the trigger to buy it. And I was just like, you know what, let me just pull this apart first and see if I can like find a clog or something. And sure enough, it's working. So who knows what I did, but uh, yeah, man, productive weeks for both of us on the DIY front. - -19 -00:04:37,520 --> 00:05:27,690 -Wes Bos: That's great. That's funny how many so for those listening, I always put whenever I fix something at home, I posted on my Instagram just because it's kind of interesting. Getting into stuff like I fixed our espresso machine the other day, there was like a water regulator that went bad in it. And I swapped that out and a lot of developers messaged me, really, you're so handy and I was like, Huh, like not really like I'm not handy either. I'm a developer. I'm pretty good at debugging So just take that mindset and apply it to like, I don't know, unscrewing stuff and looking around and poking things. And yeah, yeah, you can get away with a lot of YouTube parts, like a list of what parts are in the thing. And like a multimeter to see where electricity is. And I would encourage anyone who's, who has something break, like, what's the worst that can happen? You actually have to call the repair person like this. These repair persons you call, they don't have any other skills past us. They probably can do it faster. But - -20 -00:05:27,690 --> 00:05:29,430 -Unknown: are they experienced? Yeah, - -21 -00:05:29,489 --> 00:05:32,490 -Wes Bos: yeah. They just have parts in YouTube as well. Yeah, - -22 -00:05:32,519 --> 00:08:22,080 -Scott Tolinski: yeah. No, it is. It's totally analogous to programming because I think about that very much. When I'm doing it. It's like, Alright, especially with my code. It's like, here's this bug. Here's the breaking, we have a, you know, we know what the symptom is we have an error log, so we can sort of tell it is, so you can just sort of narrow narrow, narrow, narrow, narrow until you get to it. And that's the same thing you do with any of this stuff. So hey, do you want to get into our potluck questions? Today, we have a potluck episode, which is the type of episode where we read your PL Q's, your potluck questions on air, and we answer them to the best of our abilities sometimes. very excellent. The other times, we say things about Java that we regret. So let's go ahead and start the first one, which is from Robin, we work we work. We Rick wyrick. Any of those will probably work. Robin, you did not provide us with the Pronunciation Guide. So you get what we give you. So curious if you would consider to run your course platform on Gatsby instead of next JS? If not, what dynamic content would prevent you to do it. So this person is wondering if we would ever run our course platforms on Gatsby j. s. My course platform, for those of you who do not know is currently based on Meteor, I'm doing a rewrite index JS right now. And the way it works is that you have this content that's behind a paywall, and you have content that's free. And when you purchase the content, or you subscribe to level up Pro, you get access to all of the content. Okay, so there is content behind a paywall. And that's really specifically why I think Gatsby is not a good fit for my platform. Now not to say that you couldn't build level up tutorials in Gatsby, there's nothing to prevent you from doing that using Apollo and Gatsby is just as easy as using Apollo anywhere else. And that's really what I'm doing for my front end anyways. So you definitely could, but I'm losing a ton of benefits there because everything's done on build time. And what you can't have on build time is you can't have a user's status, whether or not they're logged in all of their account stuff in real time. So for instance, you'd be losing any of those sort of server side rendered benefits that you typically get from a static site. Now, granted, all of the static things would be very fast, but also going to be very fast on next day. So I really don't think it's a good fit for me, especially because I can get server side rendered user accounts and pro content, using cookies for my authentication with next JS rather than, like a static build. So I personally, you could do it. But I think next year is a better fit. - -23 -00:08:22,409 --> 00:10:00,720 -Wes Bos: Yeah, I think if I were to do anything in NEC or in Gatsby, it would be like the the marketing the sales pages for each of them. But I have so much in terms of like, who's watching what, and affiliate tracking and courses that you've bought? And like there's like so much that is dynamic. And that needs to actually happen. Even things like, what is it the parody purchasing power? Yeah, that's all done. That's all done server side, right. And moving that to a static Jen at the time of build just means that you have to load the page, and then start doing a bunch of work in the browser really quickly and trying to update the interface. And that's where it gets kind of janky. So no, I for right now, I don't think that Gatsby is a good solution for dynamic sites that need to be like that. We've set up before Gatsby for websites next for apps, that might change like I wouldn't, I wouldn't be surprised if Gatsby rolled out some kind of really interesting way to do serverless or like, you know how like, these like nice API routes now. Yeah, I wouldn't be surprised if Gatsby's got some sort of like, I bet we could get away because they've already distanced themselves from this whole idea of static site generator. Sure. Yeah. And like what the play looks like to do a dynamic site in Gatsby, maybe that will change one to add on. I don't know anything that you don't know. But I'm just sort of just talking here. If Gatsby really does want to become the like, boom, like the thing that that will finally go away from WordPress, then then maybe that's what they'll do, but maybe they're they're happy just sticking with their static they generated really fast front ends. - -24 -00:10:00,750 --> 00:10:20,340 -Scott Tolinski: Yeah, totally. And I think like if you if you look at it like a better use case for Gatsby would be like the syntax website. Now granted the yaks websites index js. And it's it's totally great in that, but it changes once or twice a week. And then there's nothing dynamic necessarily about it. So like that would be the ideal content for that. - -25 -00:10:20,460 --> 00:11:18,510 -Wes Bos: Yeah. If I ever get down to redoing some of the syntax website, for sure, we'll rebuild it in, in Gatsby just because like, like, even just before this thing right now, our like code bundler, like broke, or not the code bundler, the the like, ci, just like, it didn't build properly, and it wasn't up by 9am, when the podcast goes out, and I just logged in and hit rebuild, and then it worked. I was like, ah, those are the worst kind of issues, you know, for sure. So. Alright, next one we have here is from Wilfred, what is the difference between a software developer and a software engineer, in your opinion? Well, software engineers drive trains? Absolutely, I'm gonna say I'm gonna say nothing. Because like many other engineers, we are not held legally responsible if a website causes the death. Whereas if a bridge collapses as the like an actual engineer that built that bridge can go to jail. - -26 -00:11:18,659 --> 00:11:22,260 -Scott Tolinski: I think if the website caused the death, you would be responsible. - -27 -00:11:22,740 --> 00:11:28,080 -Wes Bos: Yeah, there's probably some way in that that you could find out I tend to find that - -28 -00:11:28,080 --> 00:11:33,149 -Scott Tolinski: fails. It's not going to it's not an emergency. If the website fails, I get Yeah, yeah. - -29 -00:11:33,450 --> 00:11:58,529 -Wes Bos: I think if you were to draw a line somewhere, someone that's gone to school for comp, sigh should be able to call themselves an engineer. And then everybody else should be able to call themselves a developer. But it doesn't really matter. At the end of the day, there's no like, legal definition of what that is. And and developers love to sit around and and pontificate about job titles and things like that. And really, who cares? Just start building your website. - -30 -00:11:58,710 --> 00:12:42,720 -Scott Tolinski: Yeah, yeah, pontificating is one of my favorite words, actually. So I'm glad you use that. But yeah, no, totally. I think really, the The only difference is whether or not it's in your job title or not. I really think that's it. I had a job title. Once where I was an engineer, I had a job title ones where I was an interactive producer. These job titles really don't matter that much at the end of the day, and in fact, I think over across the pond, as they say, and in England, the United Kingdom, I don't really know. I've heard that they do not refer to software developers, as engineers whatsoever in that, you know, it could be making that up. So if I, if that's wrong, please correct me. But that's what I've heard. Certainly. Okay. Next question. - -31 -00:12:43,140 --> 00:13:04,950 -Wes Bos: What sorry, one more thing I'll add to that is I've heard that in in Canada, it is illegal to use the title as an engineer without a license. So if you're Canadian, you And you call yourself a software engineer, you might go to jail, because it's actually part of like regulations in Canada that you cannot call yourself an engineer unless you are legally allowed to. - -32 -00:13:05,880 --> 00:14:51,799 -Scott Tolinski: Well, I'm an engineer, then and I'm going to rub that in your face. I'm going to engineer engineer it over here. All right. Next question is from simple back. No simple Beck asks how to deal with designers who design without any thought about how the dev will implement it. Usually, this is regarding consistency, for example, they use different font sizing for headers, or different pages, out of the blue spacings 20 different buttons sizes. So okay, I think the my outlook on this is that number one, you have to stop looking at how to deal with a designer, or how like, you can't look at it as us versus them, or us devs them designers, because at the end of the day, your creative team producing a creative product. And the outcome isn't just one person's doing right, the designer may have this, this idea right to do these 20 different buttons. But it's definitely your responsibility to talk with them early and often about the design and explain to them different concepts. But when I say that, I don't mean to lecture them. I don't mean to talk down to them. I don't mean to say Oh, you don't know anything about developing anything like that does, that's not going to get you anywhere, what we need to do is from the get go on every project establish a greater communication more early and more often. Because that's what's going to. That's what's going to enhance your team on just about every single project. Some of the best teams I've ever been on, are the ones where the designers were coming to the developers 24 seven to talk about easy things and animations and different things. And it's your responsibility just as much as it is theirs to educate and to talk these things through and communicate well, so yeah, - -33 -00:14:51,960 --> 00:15:33,870 -Wes Bos: yeah, I ran into that a lot. I was actually really annoyed because developers just like, want to create something beautiful, new and in reality I think that's Probably a signs of a bad designer as well, because a good designer would stick to a design system. And they would build a design system that's robust enough and flexible enough that they can build whatever it is that they want. So maybe talk to the designer, I find people complaining about designers. Half of that is valid, but the other half is just that, like, you don't want to be pushed enough. And I find working with designers who build these crazy things. It's like almost a challenge to me to figure out how you can do it well and perform it and things like that. And sometimes you do have to peel it back. But that's that's part of your job. - -34 -00:15:34,169 --> 00:15:45,029 -Scott Tolinski: Yeah, yeah, it's tough. I think at the end of the day, you're you're a team and their process, you have to educate them just as much as they probably have to educate you on different design things. So yep. - -35 -00:15:45,990 --> 00:18:03,180 -Wes Bos: Next up, we have a question from Daniel, which is, Hey, guys, I saw Wes has an example in one of his slides where the array prototype is written onto the nodelist prototype, is this safe enough for production as it overwrites all of the regular nodelist behavior. I was wondering if it was so let me bring it up real quick. This is referring to a slide I showed of bling dot j s and bling j s gives you dollar and dollar dollar for query selector query selector all it gives you the on functionality, where you can just like select an element, say on click instead of having an event listener, it will give you on for node lists instead of just having to loop over do a for each and individually attach it. So in one of the lines in there is node list dot prototype equals array dot prototype and you're overriding the entire node list prototype to be that is that an array prototype and real quick, a node list is sort of like an array, except it has a very much appealed back prototype on it, meaning it doesn't have all of the map and filter reduce methods that you're used to on an array. So often what you find yourself doing is converting a node list to an array so that you can use those things. So this one line Ah, this is it, is it okay to do that. Generally, the thing is, don't touch built in prototypes, build your own functions that do that. So like why, why are you doing this? And I think it's probably fine. Because this bling j s was built by Paul Irish, who is a dev over at Google. And this has been around for, I don't know, probably six or seven years now. And I haven't heard of anybody complaining about this. And it's not like your your node list is duplicating these properties on each, you're just pointing the prototype to the array prototype. So I think it's fine. I don't know if it is, but I have never heard anyone complained about it is from Paul, Paul Irish, who I respect immensely in performance and JavaScript world. So I think it's totally fine. And oh, sorry. The other thing is that all of the node list methods are also in the array. So you're not losing anything by overriding the nodelist prototype. So I think so I'm not sure. - -36 -00:18:04,410 --> 00:18:36,000 -Scott Tolinski: Yeah, I have nothing, nothing necessarily to say on that. Because I honestly don't know, I don't really do too many of those overrides, but at the same time, I think that's this year, a lot of these concerns about overriding anything, I think, become a problem more with teams, right? Because if you're overriding something yourself, you know what to expect, right? You've overridden it with this library. You know what to expect, but maybe somebody who's coming in on a project in maybe everything doesn't transfer? I don't even know I'm, my opinion is not valid here. So yeah, - -37 -00:18:36,000 --> 00:19:16,580 -Wes Bos: you should never you should never overwrite built ins with your own version of that thing, right? Because then anyone else running JavaScript on that doesn't know. And that's actually what happened with prototype j. s. They literally overrode the prototypes. And that's why we have string.is. It contains or includes, let me see if I take awesome and I say.in. Its includes that's why we have string dot includes instead of string contains, yeah, because prototype had a contains and it was different. And they didn't want to break the web. So in general, don't. Don't do that. But if it's if it's native methods anyways, that's not you're not changing anything on the node list. And that's probably fine. - -38 -00:19:17,060 --> 00:20:50,400 -Scott Tolinski: Cool. All right. Next question is from loot fi thank you for giving us pronounciation. In a potluck episode, you mentioned that you do not host your clients websites. If you don't host your clients websites. How do you go about handling clients that are less tech savvy? Are you do you avoid those clients? It's funny this question and the next question are are sort of related. So I wanted to put both of these in here, but I think we should answer them separately. So this question is about whether or not we think, like, okay, so you have a client's website, you signed up, what do you do about their hosting? Now, typically, what I would do is get them either online with you whether or not That's on the phone or maybe on a screen share, and have them sign up for the service and enter their credit card on whatever it is, and have them give you login credentials. Or they can provide you with a credit card. And you can create the account and sign up and do all that stuff for them to get the application set up. Because the last thing you want in my mind is reoccurring billing from some service on your own credit card. So you want to have their card, their account, it's all theirs, and you can set it to reoccur forever, and whatever you need to do, but in my mind, that's how I would approach it. And whether or not they're technical, I wouldn't consider that is anything, it's just a matter of not being responsible for either the payments or for keeping this thing alive, essentially. - -39 -00:20:51,000 --> 00:21:27,510 -Wes Bos: Yeah, don't don't do it. And we had a lot of people tweet us being like, Yes, I made the same mistake, don't actually do it ever. Because they will come back to you when when things break. Everybody knows how to buy something online, you're not asking him to like, SSH into a box and set up a linode server or something like that. You're you're asking them to go and go to a website that sells a hosting plan, click it, put their credit card in. And then usually they just send me the password for their login. And you can log in and do and do the rest. Everybody knows how to buy stuff online. And honestly, even if they can pay their power bill, everybody should be able to do that. - -40 -00:21:27,930 --> 00:21:30,240 -Scott Tolinski: At least in 2019. Yeah. - -41 -00:21:31,050 --> 00:23:11,220 -Wes Bos: So the next question we have which is related. I know you guys, especially Wes, have been pretty insistent recently and not hosting clients site. But what do you think about continuously hosting client sites with a service like Netlify is highly likely to go down and skills for all of you. So it might be a little bit of recurring income if you build them yearly for the minimal Netlify fees. So yeah, I think that that's fine to do that. But you getting in there and trying to scrape 11 bucks a month off of the top is not going to be worth it because of other stuff that is unrelated, that they think is your problem. So their email goes down, they want to make a quick change on the website Six years later, and you're not like essentially, by doing this, you are attaching yourself to the client, likely forever, because you can obviously transfer it out. But it's a pain to do that. So is it worth making an extra hundred bucks a year, when they're gonna call you up on a long weekend at five o'clock on a Friday night? Probably not. But like there's there's businesses that have support and things like that to do this. And if something goes wrong with any one of these things, like the website goes down, like their email, you need to direct them to the actual support, which they're paying for and say, Look, I I wrote the code. I'm not it. And I'll say I'm so adamant about this, because I've been there. And it's just not worth not worth it. Because a client's aren't dumb either. Like they can go and search, how much does hosting costs. And they're going to find the GoDaddy page where it says it costs like a ham sandwich to host your website. No, they're not sound like and find out that it is their gimmick, why are you charging me an extra 20 a month? So that's my thoughts. Yeah, Been there, done that - -42 -00:23:11,220 --> 00:26:21,480 -Scott Tolinski: bought a T shirt, you know? And did all that. So okay, so this is going to be the easiest to add transition in the world because this episode is also sponsored by Netlify. Hey, so Netlify, we were just talking about them. It's a super easy way to host your applications. Now. What does Netlify give you? Well, it gives you just about the easiest setup and hosting that you could ever possibly imagine, along with some things that right out of the box like a CDN, an SSL, a bunch of other acronyms. But it also gives you continuous integration and automatic deployment things that you don't even have to think about seriously, just connect your repo to Netlify. And let Netlify take care of the rest, it couldn't be any easier. And they also have a bunch of additional features, things that you're going to use for just about any major project that you're doing, such as some really awesome, unique DNS level analytics that are just like really super cool. Their analytics are very different. They come from a higher degree than something like a script on your page like Google Analytics. So you can actually trust these analytics. They also give you access to server side functions, login via identify forums and large media. So check out Netlify and netlify.com forward slash syntax. host your website, get up and running in just about two seconds, and then tweet at us just how awesome you found Netlify to be because that's what everybody else does. So check it out. netlify.com forward slash syntax and thank you to Netlify for sponsoring this show. Okay, next question is from Mr. X. Mr. X says, Hey guys, I'm a huge fan of the show. And I want to thank both of you for your amazing courses that you create. Well, thank you, Mr. X. I was listening to an episode on the smart home and I'm interested in buying a Google Home mini myself however, I cannot Stop thinking about the privacy implications of this device always listening around my house. What are your thoughts on this topic and on privacy related to online services in general? Okay, so this is a tough question. I have Google a Google minis all over my house. And so there is a microphone, and it's listening to you. I mean, it's definitive, and maybe some interns gonna listen to some audio. That's not you saying, hey, gargle, right. But people who think like this, they don't think about every other microphone that's in your house, considering every single device you have, whether it's a phone, or whatever, also has those same voice detected features. It has a microphone, so your phone is also listening for Hey, gargle, or Yo, any of those? Whatever? Sandra. Yes, Sandra, any of your, your queries that you're talking about your phone microphones already? Listen to that stuff. So I think this is the I don't know, maybe the future where we're just giving up our privacy? And for convenience, I honestly don't know, to be honest. Yeah, it's a tough thing. I might even if like I might even just straight up Turn off the mics on all of mine. Because I mostly use them through like Chromecast to Chromecast my thing rather than yelling at it, but sometimes I yell at it. I don't know, - -43 -00:26:21,600 --> 00:28:00,870 -Wes Bos: we yell at ours all day long, we had to replace our daughter's light switch with a Wi Fi light switch. And then we just put a plate over top of it. Because our daughter was turning the light on at three in the morning when she was angry and woken up. So we just put a Wi Fi light switch in and put a plate over it. And now we have to yell downstairs to turn their light on. That's funny. The developer in me knows how much this can be abused. Yes. Because like I know, like, it's sometimes funny you talk to you talk to like your non technical relatives, and they're like, oh, man, I just got an ad for the thing we were talking about. And the developer in me is like, hundred percent. They're listening to you. Yeah. Because there's so many like, I've got, like, I've listened to the reply all that and I know that about Bluetooth beacons and all these things, and hundred percent don't believe that they are listening to you for sure. But I but like also, like, I don't think it's as overblown. I don't know what to say about this. It's I don't think people say that about the wise cams as well. Every time we talk about them on the thing. People are like, oh, they're Chinese cameras spying on you? And I think like, Probably not, but maybe Probably not. I could bet. But it's hard. I'm taking the risk. I believe that the benefit maybe outweighs the cost. At some point. Maybe that will irk me a little bit more. I definitely am much more privacy focused than it was maybe even two years ago. And I think that there's a bit of a trend right now. And I think that's why I sort of sat I'm saddling up on a lot of Apple products over some of the other ones. - -44 -00:28:00,900 --> 00:28:19,950 -Scott Tolinski: Yeah, hey, that's a consideration I had to for getting the the iPhone although the report you know, Apple's interns and their third party people listen to you, too, because that report came out. So I think is Apple's regard maybe just be a heavy, hefty dose of marketing, but they do tend to back it up a little bit. So - -45 -00:28:19,950 --> 00:28:30,210 -Wes Bos: I think so. Especially like the the Catalina now asks for everything. And people are so annoyed by it. Like can access. Yeah, I don't mind it. Oh, I - -46 -00:28:30,210 --> 00:28:32,880 -Scott Tolinski: like it. I love it. I love it. - -47 -00:28:33,060 --> 00:28:47,280 -Wes Bos: Yeah, that's totally I love knowing what it being able to like know that someone's not using my mic. someone's not using my microphone or my webcam, things like that before actually use it. And I don't know, the world is amazing. But also awful. - -48 -00:28:47,460 --> 00:29:02,640 -Scott Tolinski: Yeah, right. The new Android has like a lot of those features, too. But I really loved how the iPhone was just like, would you like this application and know your location only when you're using it never where I like, I like how easy they're making a lot of those things now. So yeah, - -49 -00:29:02,700 --> 00:29:06,300 -Wes Bos: yeah, skeptical, but the by default, but cautiously optimistic. - -50 -00:29:06,390 --> 00:29:07,290 -Scott Tolinski: Exactly. - -51 -00:29:08,190 --> 00:30:25,050 -Wes Bos: Next question we have here is from Al Chen. What are your thoughts about using a CMS that uses flat files versus a traditional MySQL, Postgres database for a company blog that won't have large traffic? We are currently evaluating graph CMS and craft CMS, which I know you've mentioned a few times on the podcast. I think flat file CMS is fine for technical users. Yep. And I think that that's okay, as long as it doesn't stop you from posting stuff. Because you know, like, Oh, I don't know if it's gonna work. I don't want to have to run the build and update everything, things like that. Not a good solution for like, I worked on a large website once where we built it all on markdown files. And then we ended up building a markdown editor for the non technical users and we did everything like we built Table layout and everything. And it just wasn't like it didn't the end users were just like, Can I paste my Word document into it? You know, like, just wasn't there? Yeah. So I myself, I'm building a flat file, like Gatsby site for my own website. But that's because I'm a developer, and I want my want everything to be in markdown files. But I would probably go a traditional CMS for almost everything else. - -52 -00:30:25,080 --> 00:31:14,010 -Scott Tolinski: Yeah, I know, this person says that they don't say anything about non technical people editing. But that's such a huge thing, regardless of how optimistic you are, non technical people will never one understand markdown files, and to never go to GitHub to edit something sometimes, like, oh, it does have the metadata. GitHub will submit a port or no, nobody's gonna do that. No, no, nobody knows how to do that. And I wouldn't ask anybody to do that. So as long as, as long as it's user friendly, I know craft seems to look nice. I've never used it myself. As long as it is a decent editing experience, then it's fine. But again, like you mentioned, if for some reason, you're not going to want to edit it, or people aren't going to want to edit it because it's too much of a pain, then I you know, people just flat out won't so yeah, yeah, cool. - -53 -00:31:14,070 --> 00:32:08,850 -Wes Bos: And I would jump, I would jump at it. There's so many new CMS is out there right now. Prismic and Sanity have sponsored in the past Netlify has CMS headless WordPress content contentful. There's also this new thing that got released the other Tina's CMS, which is not a CMS. But oh, it's forestry is another one, they put out Tina, which is like an editing UI that will connect to your CMS. Actually, that's a that's a perfect solution. So this new editing Tina thing will have the ability to edit RAW files or like hook up to a headless CMS. So maybe look, take a look at Tina, because it's it gives you the ability to like edit your site in real time with a nice editing UI that comes out from the side. And then it will save it to respective wherever that that data lives. - -54 -00:32:09,000 --> 00:32:12,930 -Scott Tolinski: Yeah, cool. Good adoption. Good Modern UI, check out adoption. Yeah, - -55 -00:32:12,960 --> 00:32:14,190 -Wes Bos: came out three days ago. - -56 -00:32:14,730 --> 00:32:59,310 -Scott Tolinski: Right. Right, exactly. Next question is from Oliver. Seven. All right. Oliver asks, have you used data attributes as custom elements in the CSS in j. s. I have been developing, using them for the past two years and think they are the way forward. Here's some example usages so far. So they're talking about using a data attribute to style as like a look as a replacement for maybe like a like a styled components or something. Right? Yeah. How is this different than just using a class? I guess that's what I don't understand. Because you're just signifying a thing via a data attribute instead of a class. So how is that different than a class? - -57 -00:32:59,520 --> 00:33:40,200 -Wes Bos: Yeah, let me explain it real quick. So he gave us this example. Airedale, chemical.com they're gonna get these we're just gonna get like 40,000 hits. Yeah, right there. Air is a ir da, l e, chemical calm and then just view source on it. And yeah, is that they've got like a header component that has data dash CSS header equals header. So that's a specific kind of header they have, and they have a data CSS selection, content, slim. And then data j s header equals header. So what they're doing is they're creating custom components that have CSS and functionality attached to them. Yeah. Via data attributes, instead of like a class and, - -58 -00:33:40,320 --> 00:33:55,890 -Scott Tolinski: sure, let's look at the footer. The footer has data hyphen, CSS, hyphen, footer equals footer, and then data hyphen, CSS hyphens. Section equals content. Why wouldn't you just say class equals footer? Space contact? Yeah. - -59 -00:33:56,460 --> 00:34:34,260 -Right? You just you just typed so many more words to do the exact same thing, because it's just going to compose it the same way classes are, I think, yeah, maybe just more explicit in the HTML. But to me, I would just use this this is just seems like you're just coming up with a new way to do the exact same thing that people have been doing for a long time. And I think the only reason that I would use styled components over classes anyways, is just because of how it looks and feels within react to me personally. I mean, I don't think this, I don't, I guess I can see where the perceived benefit would be here. But to me, this perceived benefit does not surpass the utility of it. - -60 -00:34:34,440 --> 00:35:15,920 -Wes Bos: Yeah. What I've done in the past is sometimes I've added a class to something and I've used that class to style it. And to add functionality via JavaScript, like grab it via color selector and add, yep. And then I'm like, ah, shoot, I just tied like, what it looks like, and what it does into one class. And that's annoying because it should be separations of concerns, right? So like, what I ended up doing is I would just say like fn dash Like function dash, whatever. And then I knew that if it had fn in front of it that that class was for selecting it via JavaScript. So that's our Yes, this is a bit of a better way to, or a different way to like nice, clearly state. This is a footer and this is the type of footer it - -61 -00:35:15,920 --> 00:35:28,350 -Scott Tolinski: is. But when Couldn't you do that with just classes anyways? Like, yeah, you're saving by doing a prefix. Like if you wanted to say section, footer section, hyphen, footer as the class I mean, to me, this is just extra markup for not a lot of benefit. - -62 -00:35:28,380 --> 00:36:00,170 -Wes Bos: Yeah, maybe if you, I'm just trying to think like, what the benefits would because I had never heard of this until we got the question. I was like, This is super interesting. Yeah, show me all these web sites that have it. And like, and maybe because like, you can easily access data attributes via JavaScript, but you can access classes, and you have to parse the prefixes off of them. I don't know. I don't, I think it's cool. Absolutely. I don't think there's any downside to it at all. If it makes a lot of sense for you go for it. But he said, it's the future of components. And I highly doubt that. So - -63 -00:36:00,270 --> 00:36:40,050 -Scott Tolinski: that's cool. Yeah, I think anything that makes your system more robust and more usable as a design system is good, because it's helping your team build something that's organized. And really at the end of the day, like I wanted to do an episode on. I added to the hasty calendar here, if you wanted to talk about this at some point, but I'm writing good CSS, like CSS at scales. And I think that is such, like, the biggest component of that is having a system that people would adhere to. And that works, right. So anything that allows you to write a system like this, I believe is a positive. Whether or not it is the future, I think that it remains to be seen. - -64 -00:36:40,400 --> 00:37:25,710 -Wes Bos: Yeah, I also think there's There are many ways to do it. And it tends to be an I find in CSS world, people get really angry about people doing things a different way than they think is right, which like, I don't go for it if this is the way that you like to do it. Yeah, seems kind of neat. And I bet there's some benefits that we're probably missing here, like, tweet us at syntax FM, if you if you found any other benefits. So I'm just looking at the media queries here. And they're using a lot of Tilda selectors. So like if something has a full or center data dot CSS selection, then apply this padding. And then I think you can probably have like full dash hero, you know, like, yeah, maybe like different types of items. I think I'm stretching it a bit far here. But sure, it seems interesting. I probably wouldn't go into it myself, though. - -65 -00:37:25,920 --> 00:37:29,820 -Scott Tolinski: Yeah, yeah. No, I'd be interested in hearing more arguments for this. But yeah, - -66 -00:37:30,030 --> 00:37:57,650 -Wes Bos: yeah. All right. Next question we have here from Scott Cardoza, why do so many people jump on styled components? slash CSS and j s? Are these all people who have never used sass or SCSS? Seems like such a pita? To get a sass working with either of these? It feels like coding tables vs coding HTML. To me, it seems backwards. Oh, - -67 -00:37:57,690 --> 00:38:00,420 -Scott Tolinski: is it more of a an anon bread than a pita? - -68 -00:38:00,690 --> 00:38:24,780 -Wes Bos: Enough? Wow. Um, why do people so many people jump on it? I will see they see this question a lot from people because they're like, I'm used to SAS, I think it's great. And why are all these people changing? I'm annoyed that my comfortable way of doing things is changing. So first of all, you don't have to change. Absolutely not. sass is still extremely valid. - -69 -00:38:24,920 --> 00:38:29,580 -Scott Tolinski: I just added sass to the level up website for a small little thing. I just added it. Yeah. - -70 -00:38:29,609 --> 00:38:30,980 -Wes Bos: I mean, how come? Why? - -71 -00:38:32,070 --> 00:38:33,710 -Scott Tolinski: It's kind of a long story. - -72 -00:38:33,860 --> 00:38:34,460 -Wes Bos: I got time. - -73 -00:38:34,530 --> 00:39:46,460 -Scott Tolinski: Yeah. Okay. So I have some global CSS for things like my custom properties. I use a lot of custom properties in the live website. And so I had a lot of global CSS files. And I was occasionally getting some very, very weird Safari books where there would be just like memory, out of control in Safari exclusively. And I, it was the hardest thing to solve. But every single time, I would comment out my global CSS from styled components like that create global CSS component, every single time that I would comment that out, the bug would go away. And so instead of spending, you know, two weeks to try to figure out what exactly was causing this to happen within styled components, I just copied and pasted all of that CSS into a sass file. And that was it. Because the beauty meteors build tool is as simple as just saying, hey, yeah, add sass to this and it takes care of it. And it was just a few things anyways, but that solved the problem in just about two seconds. So it was only styled components, global CSS, and honestly, I have no idea what the problem is. It could have been anything from server side rendering to something specific with Meteor. So honestly, I have no clue. - -74 -00:39:46,649 --> 00:40:05,730 -Wes Bos: There you go. Yeah. I think like, why are people switching to it? People like having all of their CSS in their JavaScript. People like being able to run JavaScript inside of their CSS, which makes doing things like dynamic CSS. Really, really Easy you can't do if statements inside of your SAS super simple to do it inside of a stock component, - -75 -00:40:05,879 --> 00:40:07,320 -Scott Tolinski: or you can't do it on runtime. - -76 -00:40:07,350 --> 00:40:31,880 -Wes Bos: Yeah, exactly. You can't have what I guess with with like variables, you can do it on build time. Yeah, custom properties, you can now have variables in your SAS, which is great. Yep. So it's just a different thing that people like. And if it's certainly not everybody likes it. There's a lot of hate against stock components in the whole CSS and .js. So certainly don't have to go that way. But a lot of people quite enjoy - -77 -00:40:31,890 --> 00:42:31,110 -Scott Tolinski: it. Yeah, I think some of it too, is that okay? So CSS is built to cascade, right? And then so sometimes the people who are anti CSS and JS see those solutions as simply being a solution to scoping and cascading. So to say, well, we just want to scope everything. But I don't really think that's the case. Because a lot of times, if you're writing good CSS and j s, anyways, you're still taking advantage of all of the cascade, but it does give you more control over that scoping by having scoping, essentially there by default. And you can turn it on when you want or turn it off when you don't want by just how you compose things. So I think there is a little bit of that scoping thing in there. And I don't think it's that people don't know how CSS works to me, to be honest, it just gave me more control over that scoping and the overrides than files. And sure enough, you can get that same thing by different ways of having CSS load, whether or not it's being bundled in different ways. I like CSS and j. s, simply just because of how it allows me to organize my things in a way. So like, not that you can't organize these things with them, or with a system, you certainly can the exact same way. But I just like the way it looks and feels in that regard. But I think the biggest benefits, as you mentioned, are like some of the interactivity between JavaScript where you can just have JavaScript right then in there, modifying and changing your CSS, instead of having to do a bunch of overrides or anything like that, again, custom properties solves some of that as well. But yeah, I just like it. And, you know, I would consider myself a CSS head. You know, like, you know, I toured with CSS back in the day, you know, with all their shows, you know, I'm a huge fan of CSS. And like, I like CSS and .js. Just because it helps me write better CSS. And I don't think it's a pita, but maybe, maybe I think you should spend a little bit more time with it. And maybe you might like it, just like react. I thought it was ugly when I first saw it, and I was kind of annoyed by it. And then once I picked it up, I ended up really liking it. - -78 -00:42:31,260 --> 00:42:40,400 -Wes Bos: Yeah, I think that's like a good. Like, Scott has no horse in this game, whether CSS and j s wins or loses or sass, like, Oh, yeah, - -79 -00:42:40,439 --> 00:42:41,940 -Scott Tolinski: I was an early sass, man. - -80 -00:42:41,960 --> 00:42:57,570 -Wes Bos: Yeah, he just wants to use what's what works for him? And what he enjoys authoring and what makes writing scoped and maintainable CSS in his code base. Easy, right? Yeah. And because of that, he's probably tried them all. And he likes style components. So that's like a good way to look at it. - -81 -00:42:57,629 --> 00:43:07,380 -Scott Tolinski: I like CSS more than I like JavaScript. So like, you know, it's not, it's not like, I'm just trying to shoehorn JavaScript into everything I like, yes, more than JavaScript. So yeah, - -82 -00:43:07,499 --> 00:43:23,970 -Wes Bos: yeah. It's, you tend to get that feeling from the like, I'm a JavaScript person, and I'm a CSS person. And, and people are sort of fighting. And it's kind of nice to like, I think people like Scott and I were like, We literally don't care who wins this battle, because we're just using both at the end of the day. - -83 -00:43:23,970 --> 00:43:25,460 -Unknown: I don't see it as a battle. Yeah, - -84 -00:43:25,499 --> 00:43:26,010 -Wes Bos: yeah. - -85 -00:43:26,010 --> 00:43:35,940 -Scott Tolinski: If you see it as a battle, I think that's the wrong side of the argument. I think there's only one wrong side. And that is like the person who's divisive on either side. It's like, do what works for you. - -86 -00:43:36,419 --> 00:43:39,000 -Wes Bos: You know what, I'm not divisive about Scott. Oh, - -87 -00:43:39,170 --> 00:43:41,210 -Scott Tolinski: uh huh. Is it - -88 -00:43:41,420 --> 00:43:42,120 -Unknown: fresh books, - -89 -00:43:42,180 --> 00:44:11,310 -Wes Bos: it's fresh by our sponsor today is fresh books, which does your cloud accounting. If you're running a small business and you need to get paid, you need to send off invoices you need to track your time convert those time into invoices, log all of your expenses. freshbooks is going to do it it does small business accounting that makes your billing painless. Check it out. freshbooks comm forward slash syntax looks like they got a big fall sale going on right now. If you want to sign up for six months to - -90 -00:44:11,399 --> 00:44:12,450 -Scott Tolinski: get them deals, - -91 -00:44:12,780 --> 00:44:24,060 -Wes Bos: you're going to get a 30 day unrestricted free trial. If you check it out, make sure you enter syntax in the How did you hear about us that will get us credit and keep fresh books sponsor and thanks so much to fresh books for sponsoring. - -92 -00:44:24,270 --> 00:46:32,310 -Scott Tolinski: Yeah, gotta get those deals. All right. Next question is from Jerry. Hey, Jerry. When do you ever reach for a component library like material or bootstrap currently working in a corporate job? We're almost always expected to use one of these for our internal applications. I usually prefer to make it on my own, but I'm wondering if I'm going to make my life more difficult than it needs to be any advice. When do I reach for them I typically reach for them for side projects. And that's pretty much it or something where I don't want to have to write or design something else. Reach for it. Because if I'm having to do too many overrides, then, at the end of the day, I would rather pick a smaller, or like a selection of smaller tools, rather than one big tool, right? I would rather pick not that you need it with CSS Grid, no anyways. But like in the past, I would have rather picked a grid library, a, you know, a typography, a system of this system, and of that system, rather than one all encompassing system. And we worked on a project with a large team, I can't get too much into this project, because it was not one that I can share anything about. But we used bootstrap for I believe on it. And, man, the amount of time we spent having to fight bootstrap to do what we wanted to do was like kind of outrageous. And now granted, things would be very different with Flexbox and grid today. But I'm almost never reaching for these things. Unless, of course, it's a project that I need to get done quickly. And it's a project that I don't want to fiddle a ton with. In a corporate world, there's going to be a different expectation, because sometimes these decisions aren't made by you, when we made these decisions. Neither of the developers working on the project actually got to make that call, it was already started passed down to us. And here you go, you got bootstrap. So you don't always get to make those calls. And sometimes you got to, you know, work within the system. And that's all part of what we're doing as developers, you know. So when would I reach for them? Not ever unless it's, unless it's a side project, or I don't want to spend the time developing it myself? - -93 -00:46:32,430 --> 00:47:33,450 -Wes Bos: Yeah. Last time I reached for it was when I was doing my like course back end player. And I just needed a quick couple of classes to slap together an admin. And I kind of regret it. Because anytime I want to make a change, I have to like, figure out what is it doing and override it. But that said, it's certainly if you learn how to use foundation or bootstrap, well, it's a great base, and you can get really good at it, I just don't think that it's worth the time and investment because of I don't know I can, I can slap up a quick website design based system in like an hour or two. And I'm up and running. Like Scott said, the only time I would use it is if I needed to like have an admin dashboard, something that is so fussy with graphs and cards and blocks and things fitting together. And like that's a really fussy job. And that takes a lot of finesse. And if you can go and spend 50 bucks on a bootstrap admin theme, and just pipe the data right in there. You're laughing. So I think that's probably a really good use case for it as well. You know, one - -94 -00:47:33,450 --> 00:48:30,300 -Scott Tolinski: thing too, I might recommend is what I did is I created essentially my own, I don't want to call it a design system. But my own utilities, where I've sort of built up my own library mini library of utilities that I use for everything, whether or not in my in my projects, these are styled components, but they could just as easily be classes where I have a specific reusable layouts that I have, I have specific buttons, I have specific typographic settings. And I could take these things from project to project with me, and I know them really well. Now granted, those aren't going to transfer. If you have another developer, you'd have to teach them your system rather than a bootstrap system. But the benefits are that you don't have this giant behemoth known as bootstrap or any of these libraries sort of hanging out in your project. So that may be just a thought to consider is maybe it's worthwhile to develop your own internal one because internal well developed tools like that can always be a little bit more refined to what you need specifically. - -95 -00:48:30,720 --> 00:48:56,310 -Wes Bos: Next question we have here is from Dale. Dale, he's gotten worse. First off, great podcast. Thank you, Dale. Thanks. Please. Could you chat about get clients and which ones you use? And why or are you hardcore terminal geeks? Cheers from South Africa? Well, Dale, I had learned via the command line, and I do everything via the command line. However, I did switch for a little bit using the VS code built in one. - -96 -00:48:56,340 --> 00:48:58,380 -Scott Tolinski: Yes. Okay. I want to talk about that. Yeah, - -97 -00:48:58,470 --> 00:49:22,500 -Wes Bos: I recently saw like, in the latest release, it got even better. So it's good. Yeah, I think you should use a GUI. I don't use one just because like, I don't know, I learned the hard way. And now that's how I know it. Like I would say don't do it the way I did it, use the user GUI to at least learn it off because they seem really great. Whenever I see people using them. It's just that if for some reason, just love using the terminal. - -98 -00:49:22,680 --> 00:50:41,850 -Scott Tolinski: Yeah, you get all those interactive, like merge stuff. Now from VS code, but from a GUI I've never used a GUI I tried to use the get get cracking Is that the one I tried to use? Yes, at some point or but really, once you have your your muscle memory really tuned to your you know, your keyboard, your aliases set up, just bah bah, bah, bah, bah, bah, you know, fly through it. It's really easy to just have that be how you do it because that's your muscle memory. But just like you I've recently been trying out the VS code ones considerably more to use the whole interface for staging and merging and whatever, specifically because I've been doing some pretty monster merges. It's like the monster mash over here with merges for me and, and so I've been having to like really navigate through some conflicts and some complex merges. So I've been using the VS code ones. And I really love the history, I think it's get lens, a lot of that stuff. The tools I found to be in VS code have made me much less to tab over to my command line. But at the end of the day, I'd still say maybe like, 80% of my commits are still done through the command line. I don't know why I think it's just muscle memory. But yeah, that's pretty much it. I wouldn't even describe myself as a terminal geek, because I do a lot of stuff on terminal, but I'm not necessarily a terminal head. I'm not using vim or any of that stuff. - -99 -00:50:41,850 --> 00:51:10,320 -Wes Bos: Alright, that's all the questions for today. Thanks so much for sending those in. If you have a question, please, please send them on in@syntax.fm. Click in the top right hand corner, it says ask a potluck question, you can go ahead and pop your question in there. Whatever it is you want to hear us talk about. We really like these just because even if we don't answer them, it's usually helpful to like we see things over and over again and then say, Oh, we should do a show on that. Yes, totally. Something people are asking about all the time. - -100 -00:51:10,560 --> 00:51:19,650 -Scott Tolinski: Somebody told us that they didn't like our flow tank thing. Did you see that one? No, I didn't. Somebody said, Please keep your to your shows about coding now float tank? - -101 -00:51:20,880 --> 00:51:52,080 -Wes Bos: Well, yes, sir. It's our podcast. Well, we we do appreciate your feedback. We do. But also it's, it's our podcast. And we can do what's fun, because like, we do this thing twice a week. And we want to keep it fun and interesting. And we want it like my number one goal in web development is don't burn out. And if that means doing interesting shows on random stuff, and or if that means just talking to Scott about sleeping like I did for 20 minutes before we started recording. Yeah, then that's what I'm gonna do. Because we're having fun over here - -102 -00:51:52,170 --> 00:52:33,330 -Scott Tolinski: in float tanks. I mean, honestly, even though it's, you know, we weren't trying to be Joe Rogan, or anything like that with it. I was like you might have been but like, at the end of the day, this stuff is important to us as developers who are under a high amount of stress, like, I'm under a really crazy amount of stress. I know a lot of developers are I have crazy deadlines. I'm like, constantly freaking out about things, my codes not working this or that or whatever. Uh, having that time to wind down or whatever was is was super essential to me. And to try and experience like that, I think that's something that would be beneficial to people to know about. A lot of people just don't even know about that thing. So that's, that's my thought on it. I'm not gonna I guess apologize for it. But yeah, - -103 -00:52:33,750 --> 00:52:59,460 -Wes Bos: totally like, well, that's why we do podcasts on like health and fitness, and all of that sort of semi related stuff. Because honestly, it does make you if you're sharper, if you're more well rested. If you're in good shape, then I think you are going to be a better web developer. So slightly, anything that's related, let us know what you think at syntax FM, we can handle it, we can handle it. Cool. Ah, sweet about a sick pic for today. - -104 -00:52:59,730 --> 00:56:27,030 -Scott Tolinski: Yeah, I have a sick pick. So okay, I'm gonna preface this with that. Okay, so those of you who have been paying attention to this podcast for a little bit know that I've recently switched to an iOS device. As my sort of daily driver, I have four phones on my desk right now, three of which are Android devices, and one is an iOS. So it's by no means totally entrenched in this iOS device, but I've switched to it as the phone that I'm using, right. And so I like working out. And I have been really struggling to find the right fitness app for me, because there's the billion fitness apps and a lot of them look really good. And then you download them, and then they expect you to pay $10 a month, just Yeah, do your fitness stuff. And so some of them that have been suggested and like strong fit BOD at rep count, gravitas, heavy set. And so a bunch of these apps, I tried them out. And I need something very specific from my fitness app, I do not need it to use machine learning to generate routines. For me, I do not need people to say okay, this fitness person created this routine, like all I need is the ability to log my things, to save it to look at pretty graphs that that show me you know how much stronger I'm getting. And with some of the things that I was I wanted to connect to like maybe the health apps if I'm gonna get an Apple Watch, or I have a smart scale that connects to the Apple Health thing. So if I'm buying into this Apple Health thing, I want the app to connect to it as well. So I did a trial. And I downloaded a ton of these apps. And I have found in my mind, what is the best one for me. And this is called heavy set. The app was a $9 or $10 purchase but a one time purchase rather than a monthly or a yearly subscription. I'm into that because I think that's kind of nuts, because like a fitness app does not need to have servers running right. Sure you can have backup data and whatever but my fitness app on Android backed up to Google Drive and like that was That's free. So you just a one time purchase, there's no reason to have server costs for that. So yeah, I i've been using heavyset and let me say it's very pretty the opposite of it's like this neon green and black, the app is very pretty. The interface is not the most intuitive. But it's very good. If that makes sense. Once you like, get it, once you understand what's going on, it's super easy to navigate and looks really nice. But when you first open it up, and you're trying to figure it out, you're like, I don't what do I click on here. So it's definitely one that might be benefit from like watching like a how to video on YouTube, how to use it or something. But this is definitely my favorite app, you can import and export the data, you can get all your nice charts and graphs, it connects the Apple Health stuff. And it's totally customizable. So if they don't have an exercise that you do, you can add it in like two seconds. And it just didn't really nice things. You know, I'm one of the interns. This is like a web dev thing, even one of the interface things that I love about this app is that when you're searching for an exercise, and it doesn't have that exercise, it automatically is adding that text that you're searching for into like a create new exercise button. So if I search for overhead press and it's not in there, I can just easily hit one button to say add this instead of having to retype it and re add it. So it makes adding things really nice and easy. In the process of using it. There's just a lot of nice little user face user interface stuff. And - -105 -00:56:27,210 --> 00:56:31,260 -Wes Bos: this looks awesome. definitely gonna try this at the gym today. Yeah, - -106 -00:56:31,290 --> 00:56:33,720 -Scott Tolinski: I like it a lot. So heavy said check it out. - -107 -00:56:33,720 --> 00:57:36,390 -Wes Bos: Cool. Check that out. That's a good sick pick. I'm going to sick pick. Canadian television show. That's called the bar. I can't print a bar NASS Vaughn sketch. And yes, that's the way I can describe this as is Canadian women portlandia. Because it's a sketch show very much like portlandia where they do these hilarious little things. And it's it's for women who just like, there's one where they're like doing superpowers, and the one girl superpower is being that woman who like tells people to stop smoking and stop parking in the bike lanes. And everyone's like, Oh, I want to be that woman. You know, like, social interaction is hard. And it is hilarious. I think it's five seasons in already. You can watch. If you just search on YouTube, you can watch some of their best sketches. But we've been watching all of them on the CBC app. I'm sure you can find it somewhere else if you're not in Canada. So check it out the bar, NASS is ba r o n, e, ss, Vaughn sketch - -108 -00:57:36,810 --> 00:58:09,000 -Scott Tolinski: word. Shameless plugs, I have a new course on next j. s nine that that uses the next j. s API route to uses MongoDB. It uses Apollo and we build a habit tracking app, it's pretty darn cool. Where we do all sorts of really fun stuff related to server side rendering with react and the modern stack, and all wrapped up within one code base using these fantastic API route. So check it out at level up tutorials.com forward slash Pro, sign up for the year and get 25% off. - -109 -00:58:09,450 --> 00:59:09,300 -Wes Bos: I'm going to shamelessly plug in advance probably by the time we're listening. I don't think I'll have it out yet. But I my beginner JavaScript course is just about done. It's going to be it's it's crazy. I've been working on this thing for like almost all year, like nine months. Yeah. And I'm so happy with him so proud of like, I actually think this is going to be like a fundamental building block of a lot of people's learning of JavaScript. So it's going to be at beginner JavaScript calm, depending on when you listen to this. It might not be out yet but just put that in your head If you or someone you know like that's the other thing as like I know a lot of people listening don't necessarily need this course. But a lot of people listening know somebody who is looking to get into JavaScript and needs a beginner course that's not just like a hold your hand and console, log something and that's it, but you actually want to like end up building real stuff. So check it out, beginner JavaScript calm. I almost said thanks so much for sponsoring. Thanks so much for checking it out. That is my plug anything else today? - -110 -00:59:09,540 --> 00:59:10,440 -Scott Tolinski: That's all I got. - -111 -00:59:10,830 --> 00:59:15,930 -Wes Bos: Alright, thanks for checking in. We'll catch you on Monday. Later, please. - -112 -00:59:18,540 --> 00:59:28,290 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax195.srt b/transcripts/Syntax195.srt deleted file mode 100644 index 9d072326a..000000000 --- a/transcripts/Syntax195.srt +++ /dev/null @@ -1,148 +0,0 @@ -1 -00:00:00,329 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bobby, and Scott El Toro. ski. - -2 -00:00:25,920 --> 00:01:10,140 -Scott Tolinski: Oh, come to syntax on this Monday tasty treat, we're going to be talking about domain selling. Now, this is something we as developers, we love domains, buying them selling them. And this is one thing that can really come up a lot of times, once you get that bug of buying domains is all of a sudden, there's a domain you really want. Or perhaps you own a domain that somebody else really wants. And Wes has learned firsthand some of this experience stuff. So he's going to be sharing with us a little bit about his experiences buying and selling domains in a greater sort of way. Because domains, they can be worth a lot of money, depending on what you own. Now, my name is Scott kolinsky. I'm a developer from Denver, Colorado, and with me, as always, is West boss. - -3 -00:01:10,230 --> 00:01:13,170 -Unknown: Hey, folks. Hey, folks. Hey, Wes. - -4 -00:01:13,170 --> 00:02:15,720 -Scott Tolinski: So this episode is sponsored by Log Rocket. Now Log Rocket is just really the next generation for bug finding in your application. Because what you get is a session replay. If you've ever wanted to see what's happening when a user clicks a button and the whole thing breaks, let's say you click a button, and then fire starts shooting out, you can see how and why that happened. You can look at their network requests, you can look at their error log, you can look at the Redux store. And it works with more than just react, it works with anything you possibly using, including all of your current error and Exception Handling tools like century. So head on over to Log rocket.com forward slash syntax, and you're going to get 14 days for free and try it. because let me tell you, it's not going to take 14 days for you to see why you need this, it's going to take one bug that you cannot solve. And when you hit this bug and you get to see this session replay in action, you're going to say, ooh, let me hop on that rocket. So Log rocket.com forward slash syntax, check it out. - -5 -00:02:16,160 --> 00:05:57,449 -Wes Bos: All right, well, we are going to talk today about buying and selling of domain names. I've actually I'm thinking back at all of my things. I think I've bought maybe five or six domain names in the past. And then I just sold my very first domain name. Not I didn't get rich off of it. But it certainly I'll tell you how much in just a bit. But I thought that the process of getting a domain name from somebody else and giving them money, and then getting the domain name to use securely was interesting. So we'll talk about that in today's AC trade. So let's talk about first buying, then selling and then transferring. So the first thing is if there's a domain name you wish to buy from somebody? How do you do that? Like, how do you even contact them? So this is my process. First, I'll go to the contact form on a website, if there is a website that is already there. So usually, usually this is not the case, because there is a domain name you want to buy from them. It's almost always somebody bought it. And they're thinking about doing something with it, or they're sitting on it for a while. And there's no there's nothing pointed there right now. So if there's no contact form on the website, my next step is I'll go to who is and look up the Whois records for the domain name. And often that will not it's becoming less and less popular now. Because domain name registrations give you free Whois protection, which is great, because certainly some of them do. Yeah, yeah, you don't want your you shouldn't use the registrar if they don't give you that. Because you shouldn't have your home address easily visible by just someone who is in your website. Right? Yeah. So thankfully, that's been the case with a few of them that I've bought, I've been able to just look it up and find the contact there and then send them an email, say, Hey, are you interested in selling it? That's always kind of a delicate dance, because you don't want to show all your cards off the table? Because then they're like, Yeah, sure. $1 million, please. If that's blocked, so there's nothing on the website, there's no who is you're like, who owns this website. Next, what I do is I do sort of a deep search. I've successfully bought one by searching on Twitter for the domain name. And often you will see people not often but sometimes you'll see someone tweet about the domain name. Or if there was a blog on it, at some point, you'll see that someone had tweeted out a blog post on that domain name. So you can you can find Twitter accounts that have talked about it. And then you message them and say, Hey, do you are you Do you know who owns this domain names? I'm interested in buying it. And then finally, if all of those are blocked, there's no way to figure out who owns it. You can enlist like a buying agent, which I've never done myself. But I know that there are people who have connections inside of registrar's or there's processes I'm not really sure what that looks like. But you can get a buying agent and they will try to deliver I think Even like GoDaddy or something like that will try to like contact the person, you can like, say I wish to buy this domain name. And they'll try to like contact the owner of it for you. So there's that. domain names I've bought in the past. I bought JavaScript co probably two years ago, like not.com but.co. I thought that was pretty good. I think I paid about $700 for it. And I thought this is gonna be the domain name when I finally do, like a beginner JavaScript course or like a, just a JavaScript fundamentals course. And I had been sitting on that for for a while. And I knew that that's what the domain name was going to be. But then I got an email from Dave Martin, who also makes courses. So shout out to Dave and he says, Hey, Wes, I've got beginner j s.com. Do you want it? And I said, No, absolutely. Yeah. And I was like, What do you want for it? And he said, don't worry about it. I believe I had helped him out on a course like just some feedback earlier. Ah, what? - -6 -00:05:57,540 --> 00:05:58,470 -Scott Tolinski: That's awesome. - -7 -00:05:58,500 --> 00:09:54,720 -Wes Bos: I know, like, perfect. I think maybe let me look at my email. Big shout out to Dave. Yeah, I believe I had given them feedback on his own course sales page, like three years ago. And I guess that little 10 minutes of me, giving feedback helped out huge because he gave me this wicked domain name. The only problem with it is that it was beginner .js dot com. And beginner javascript.com was owned by another dev who was sitting on it. And I contacted them as like, Hey, can I buy it? Because like, I don't want to have beginner j s and not beginner JavaScript calm? Because the course will be called beginner JavaScript, right? Sure. So I said, I contacted me said, No, I'm not interested in selling it. I'm gonna build my own beginner course for that, like, shoot, shoot, well, what do I do now? And so I just like whatever. And then like, maybe three or four days later, the owner of it came around and said, You know what, I'm talking to my wife. Maybe we would like a couple, a little bit of money for it. Sure. And you know what, I'm never actually gonna build this course, like real talk. So he said, Okay, I'll sell to you. I think I forget how much it was a couple hundred bucks. I paid for it, which I think was fair. And I send him over the money. I'll talk about transferring it in a second. But I bought it off of him. I bought learn node.com, which is my node course. And that was, I think I gave a $300 donation to the E FF in exchange for it. So the owner of it was cool enough to say I don't want your money, but please donate and then I'll give it to you for free, which is cool. Now, the best one that I just did is my son, my recently born son, his name is kit and I have all of my other children's calm. And when we decided to name him kit, I was sort of bummed because I was like, I love the name. But the domain name is not taken. There is a Danish photographer who owns it is taken, it is taken. And I saw whenever and then a couple months ago, a month ago, I went to it again. And they had redirected it to a new domain name. I was like, Hmm, interesting. They're using a different one. So I contacted her and said, like, Hey, I'm ever interested in selling it. And no, no reply. Founder on Instagram messaged, no reply on Instagram. And then, just as a Hail Mary, a couple about a week ago, I messaged I commented on one of her photos. I said, Hey, did you get any of my messages? It says no, nothing. Why? What's going on? So sorry. And then I messaged and she was like, check your DMS, like the the Instagram like, you know, the part of Instagram where your dams go if you've never messaged her somewhere? Yeah, I was like, check that. And then she says, oh, sorry, I missed all of your things. So she's like, I'm not sure if I'm interested in selling or not. But I'll talk about it. I'll think it over and we'll see. So I said all right. And then I got a message from her. The next day says my son listens to syntax. No way knows who you are. So shout out to Dan boss for convincing your mom to sell me the domain. Oh, that's sweet. So she said my son listens to your podcast and really likes you. And honestly, we're not using it. So we came. I think it was a couple hundred bucks as well. I sent him over. And then additionally, I also have hooked up the son with all of my courses. That's so cool view as part of part of the deal. So that was super cool. I was I'm so happy that I can't get it because now I have Kip boss calm. I don't know people are asking like our.com is going to be like a cool thing in 20 years when they actually need it. And I don't know when I have them just in case like it for sure. None of my kids friends are going to be able to get the.com of their name right in 20 years from now there for sure all going to be taken. Well, unless you're like me. None of my kids are going to be taken but I got them anyways, just in case just in case somebody wanted to goof with me. - -8 -00:09:54,720 --> 00:10:03,360 -Scott Tolinski: I got Yeah, I got Brooklyn to ski calm and Landon to Lynskey down Calm just in case. So they'll have them forever and ever. - -9 -00:10:03,870 --> 00:11:02,760 -Wes Bos: And if you put them on, I put them all on CloudFlare, which is like eight bucks for a domain name is they they sell their domains at cost if you're wondering. So it's not that much to maintain them. Just in case, I don't know, just in case they ever want to be on the internet. And just in case you ever want a domain name, because I'm so glad that I like my oldest son, my youngest kid have six letter domains. And my middle one has eight letter domain. And those six letter domains are hard to come by, right. There's only I think there's only so many five letter domain names even available and yarn and all the six letter combos will eventually be gone, I guess, as well. So that's how, that's how buying them works. And then I also have sold one recently, which is learn.li. I want to see it, they haven't done anything with it. So I when I was rebuilding my course platform, I was like, should I like rebrand away from Wes Bos and make it like a platform? Yeah. And I was like, What could this platform be like, learn Li learn like - -10 -00:11:02,789 --> 00:11:04,080 -Scott Tolinski: step up tutorials? - -11 -00:11:04,110 --> 00:11:07,620 -Wes Bos: Yeah, step up tutorials, increase your skill. - -12 -00:11:08,669 --> 00:11:10,230 -Scott Tolinski: Next Level tutorials - -13 -00:11:10,260 --> 00:11:20,340 -Wes Bos: next level, something like that. And I said, so I registered a whole bunch of domain names that I thought I was going to use, and one of them was learned. Li and I thought it was pretty good domain name. Oh, that's - -14 -00:11:20,340 --> 00:11:23,669 -Scott Tolinski: pretty good. lonely. Yeah. No, like, It's cute. Yeah. - -15 -00:11:23,730 --> 00:11:31,559 -Wes Bos: Yeah, like lonely. And I ended up talking to a bunch of people are like, No, just stick with Wes Bos. Like, that's sweet. So I scrapped it. - -16 -00:11:31,590 --> 00:11:38,070 -Scott Tolinski: Yeah, you have a cool name. If you're like somebody named Scott Tolinksi. or something, it's not quite as easy to use that as your your brand name. - -17 -00:11:38,100 --> 00:14:53,400 -Wes Bos: No, no, it's not we and we've talked about that before just branding in general. So I've had this learn that Li and for some reason, I just kept letting it renew for like 20 bucks a year for probably three years, four years now. And out of the blue, I got an email from somebody say, hey, do you want to sell it? And I said, Sure. I'd like to sell it. $5,000. So I said 5000 bucks. And then they reply, first of all, I did all my research on this person that had emailed, and I'm guaranteed it's a fake email account, because it's like a company. Like imagine, like Uber wants to buy a domain name from you. Yeah, they're not there. They're not gonna like be like, Hello, we're Uber, we'd like to buy the domain name. Hey, Uber, how about a billion dollars, please write there, they're going to use an agent, or like a fake identity. And by the by the English that this person used? I don't think that they were, I think that English was their second language. So I think it might have been some service that goes off and tries to buy domain names for people, there is a learn lead.net or like a Learn, learn lead calm. There is a service called lonely, a lonely co learning to end development budgets Made Simple. And I was like that might be who is not contacted them and say, Hey, do you want in on this as well. And I'm trying to shop it around now. And they didn't email back. And I was checking out their website to book a demo from there. Oh, the demo was broken when I tried to sell it. And now their demo is working. It probably was them. So it probably was them. So I said 5000 bucks. They said no, How about 700? And I said, How about 2000? And they said, How about 700? And I said, How about 1500. And we met right in the middle at $700. And I was a very good negotiator. But I think 700 bucks, I was like, Oh, that's weird, because I just paid a couple couple hundred bucks for Kip boss. And now I'm selling this one for 700. There's a bit of room in between there. So I was pretty happy with that. And so this is like the more official process because with every other domain name, we'll talk about transferring it now. Every other domain name I've done, I've just done based on goodwill, meaning that I see these people, they're on the internet, they're part of our industry. Yeah, I'm gonna gamble, PayPal, and the PayPal will have your back though, you can always pull the money back, I made a gamble sending this person a couple hundred bucks, in hopes that they actually send me the domain name totally. So it's worked out in every case so far that the person didn't screw me because they could certainly take my money and not send me the domain name. And the way that it works is that they give you a code. So you get an auth code, and then you try to register that domain name fresh. And if it's already registered, you give it an auth code. And that will allow you to transfer the domain name into a registrar. So I transfer them all you have to transfer them over to something other than CloudFlare because CloudFlare doesn't have registrations yet. They use hover.com which is what I use for everything else that is not on CloudFlare and it worked. But with the this official one learn to ally and it's kind of risky. Yeah, it is. It's pretty risky. And I was like, whatever. You know, like I'll figure it out if they screw me, but - -18 -00:14:53,459 --> 00:14:56,490 -Scott Tolinski: as long as you you're aware of that risk, like Yeah, - -19 -00:14:56,520 --> 00:16:21,150 -Wes Bos: yeah, everybody. Everyone else that had bought them had been developers In their in our industry, you can see their Twitter and whatever it's like, they're probably not going to screw me. And Kip FOSS was, I don't know, I've never met a Danish person I didn't like. But with this, this other one that I couldn't find any info about this person buying it, I ended up just using they use escrow calm, yeah and escrow.com will they send the money to escrow.com and then you give them the domain name. It's weird, I thought like, I thought escrow would be like you give escrow the domain name and then they give escrow the money in escrow verifies both are in their hands and then they then they switch them over doesn't work that way. You add they give escrow the money. Once escrow has it then you just send the domain name directly to the the person buying in and then escrow releases the funds once they verified it has been transferred. So I was like, how am I not gonna get screwed on this? Like, what if they just say I didn't get it and then it then it's gone forever, right? So I tweeted about it. And a lot of people are like, trust escrow, they they're like the gold standard in the industry of buying and selling. So I went for it. And I got my money. Everything went smooth. I'm very curious to see now who are buying it. But I don't know. I don't think it's that crazy of a dome. I had a friend once who sold the domain name for 27 grand. - -20 -00:16:21,179 --> 00:16:22,770 -Scott Tolinski: Yeah, these money. - -21 -00:16:23,100 --> 00:16:26,299 -Wes Bos: Those imagine what would you what kind of boat would you buy with that? - -22 -00:16:28,320 --> 00:17:17,300 -Scott Tolinski: If that big, it's a big boat gonna be a big boat. Yeah, my, my boss had bought a domain for his like, perfect side project. And he was like, this is like my dream domain. And to be honest, I don't necessarily remember it was a three letter.io domain. And he was so like this is this is the domain that I've always wanted to wanted to get. And he got it because he like waited right for the moment that it expired and ended it that way. So instead of ganging up somebody in the knee. I think he had the domain for like a month. And then somebody messaged him and was like, I will give you a good amount of money for this domain. And he's like, yep, here it goes. I'll do I get. So it's like, wow, work so hard to get that domain, but then it was definitely worth enough money to somebody else that it made that worthwhile. I've always had the dream of buying a domain that would be like, I gotta gotta have somebody got to have it like Bob calm. - -23 -00:17:17,400 --> 00:17:18,030 -Wes Bos: Yeah. - -24 -00:17:18,030 --> 00:18:06,150 -Scott Tolinski: Did you hear that Bob? Calm story? No. This is actually I think it's perfect to fit this. This is the story of bob.com. So this, this guy, let's see, where's the story of Bob Kahn, and I get a shortened version of this Hold on one second. It's actually really funny story. So this guy, Bob had had owned windows 2000 dot com. And when Microsoft was, like, all of the sudden, like, Uh, oh, crap, we need windows 2000 dot com. They went to sell it, or they wanted to buy it from him. And he was like, Well, if you can give me bob.com because Microsoft had owned bob.com Oh, gave him bob.com. - -25 -00:18:07,070 --> 00:18:29,550 -Wes Bos: That's amazing. He probably made a ton of cash on that. That's hilarious. That's great. Um, a couple other people asked like, well, I'm sure we all have 100 domain names that we want to get rid of, because they're costing us money every year. But you're like, I can't give it up. Because whatever. Yeah. What if I get rich on it? So you can listen on marketplaces. So sido SE do is one - -26 -00:18:29,600 --> 00:18:33,780 -Scott Tolinski: I sold through there. Yeah, I'm sorry. I bought through they're not sold. Now. That's good. - -27 -00:18:33,780 --> 00:19:41,490 -Wes Bos: And another popular one is park.io, which initially tried was just just buying and selling domain names. And I think the product that they have is a $99 back order. And then this guy's got this wicked fast sniper. As soon as a domain name expires, this thing will sniper register it for you, which is what you want. Because if you think you're going to be wise and wait for a domain name to expire, and they quickly register it, you're in for a world of hurt because there are people who any domain even like if you have like, I don't know, a granny to lynskey.com Yeah, somebody for some reason we'll we'll register that because for whatever reason, a one in 100 are people that are worth money or people accidentally let them expire and they have to buy them back at a certain amount of money. So check it out. They have recent sales on park.io and weekday.io. sold for 990 clap.io sold for 700 bucks. That seems like a good deal. Yeah, one to sold for 20 grand one to that sounds like a spam site for sure though. - -28 -00:19:41,759 --> 00:19:48,720 -Scott Tolinski: If you hadn't been in an accident, you could buy one to E and then that could be your domain. I got one toe. - -29 -00:19:48,989 --> 00:19:49,850 -Unknown: Oh, - -30 -00:19:50,009 --> 00:19:50,580 -wow. - -31 -00:19:50,580 --> 00:20:07,740 -Scott Tolinski: I'm in the end up there. I'm a father man. I got I got I got dad jokes. Now. I it's funny because we talk about these dad jokes in our household and life. corny, I think was like, yeah, you don't have any dad jokes. And now that I do have dad jokes. I'm thinking she's regretting saying that because she doesn't like - -32 -00:20:09,510 --> 00:20:44,520 -Wes Bos: self taught iOS is for sale right now. Current bid is 100 bucks. That'd be a good Yeah. If you're trying to build a course platform self taught.io startup as well. Yeah, well it will be sold by the time you listen to this. All right, well, that's buying and selling a thought hopefully that is somewhat interesting. It's it's always very mysterious. I think people keep it hush hush, because yeah, they either have made a ton of money on it, or I don't know for what a reason. So I'm, I'm happy to share my experiences of making and sending a few hundred dollars here or there. - -33 -00:20:44,640 --> 00:20:50,460 -Scott Tolinski: Yeah, I'm not I'm not trying to get rich off this. I don't even do any of it. But I have a dream of doing it. So I will say, - -34 -00:20:50,570 --> 00:21:00,930 -Wes Bos: Yeah, I should look at my list of domain names that I bought. I think I bought like, like iPhone 10 dotnet one time and like, I never get rich and that never worked out. Yeah, - -35 -00:21:00,930 --> 00:21:05,640 -Scott Tolinski: I know. I need to like prune them. I need to go through and prune them. - -36 -00:21:06,860 --> 00:21:13,580 -Wes Bos: Cool. All right. That's it for today. Thanks so much for tuning in. And we will catch you on Wednesday, whose face - -37 -00:21:15,510 --> 00:21:25,290 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax196.srt b/transcripts/Syntax196.srt deleted file mode 100644 index 69e8bbd60..000000000 --- a/transcripts/Syntax196.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:59,900 -Wes Bos: development treats out there, strap yourself in and get ready to live ski and West boss. Welcome to syntax. This is the podcast with the tastiest web design treats. Today we're talking about what are the design foundations that you as a web developer need to know, in order to make something look good. I think there's like probably a handful of rules, you can probably listen to this podcast. And if you apply those, your design skills will get much better. Today, we are sponsored by two awesome companies. First one is Sanity, which is a structured content, CMS. And the second one is fresh books, which is a cloud accounting software. So with me, as always, is Mr. Scott Tolinksi. How you doing today, Scott? Hey, doing good. We have grandma and grandpa in town visiting. So it's a lot of fun. The kids are having a blast. And everything's just a little bit easier for us. It's not just us to hanging out with the kids. So I'm having a good week, how about you? - -4 -00:01:00,299 --> 00:01:01,229 -Unknown: That's good, good, I'm - -5 -00:01:01,229 --> 00:05:04,010 -Wes Bos: doing pretty good as well, I just sent off an email to my email list about my upcoming JavaScript course just detailing a little bit here and there. And I hadn't sent an email and probably six or seven months, I don't tend to send email a lot, which goes against the grain of of what a lot of people say to do. But what I do is I just put a huge unsubscribe button at the top of the email and be like, hey, if you don't want to be here, hit the unsubscribe button. And I was just like, marveling at how the unsubscribe rates are not at all higher when you do that versus when you hide it in a gray link in the footer. Sure. Yeah. And it's, it's pretty good. Like I really, first of all, I think that probably speaks to people that are subscribed, but also like, I don't know why all people don't do that. Right. If people don't want to be on their email list, they're gonna find that link anyways. Oh, totally. I think it's probably just insecurity. I don't do it. Because I'm not good at email. in general. If you've subscribed to the level up newsletter, you'll know that it's not exactly the most of the it's not the most common of newsletters for me to send, I just, I need to be better about it. Maybe I just need to get somebody who could make that their thing, their specialty, and they could just handle it for me. But for the most part, I'm really bad at it. So I think it's probably a good day for me as well. I'm sending an email, which I don't often do so glad to hear that you sent an email that's pretty sweet. sent one email, it's a big day. It's funny because like my I look at my wife's inbox and like she gets like, banana republic will email her like 43 times in one day. And she's just like totally fine with that. And I'm like stressed out about sending one every year. Let's talk about Ragab old man I gave revocable my email for 10% off coupon and oh my gosh, they really take advantage of that they have and I don't know why have an unsubscribe because typically I have a very low patience threshold for this but they send me like two or three a day too. And I'm like, I'm ready to toss workable out the window. But you know, that's how it is. Yeah, it works. That's that's the problem with these things is that is because I'm gonna buy rug. Yeah, I've seen these things before is that the rug where you can like throw it in in the thing and wash it gay can throw it in the in the washer. Yeah. Which is very good for babies and dogs, you know? Yeah, I've seen them and I was like that there's no way that will stay down like that will just flop over but I'm very curious if it's actually good or not. We'll see. Yeah, I'm gonna get one for my office. I need something in here to to warm in warmth in it up or warm Mormon warm it up. Yeah, I've got one nice little IKEA knockoff Persian rug behind me and I get lots of comments from people asking if it's a real Persian rug, unfortunately. has the answer to that ever been? Yes. It's a real Persian rug. Yes. like everybody's got a like a knockoff one from somewhere. So that's hilarious. All right, let's talk about designing foundations for developers. So the first tip we here have here is always use Helvetica. You just don't really want to think about it. You just use it. Just use it by default. No problem. Best designers always use Helvetica what else he got? always just look at stripes website and you just copy it just copy that really? Yeah, they're inventing design so why not go with it? Kind of a bit of a side tip but if you have a Twitter account and a company releases a new logo, make sure you hate it. And yeah, make fun of it, critique it, find lots of different logos that it might accidentally look like from the past makes you makes you a much better designer critiquing logos. Totally. That's it can we can we take a second to critique the latest slack logo it's not very good. Never been a huge fan of Next one is always used the latest trendy illustration style and sometimes these designers they even release their animations or their illustrations on you know the design news website and you could just go take them and use them. Yeah, you just got to have these like oddly shaped perfectly. Pull people, purple people were in front of, yeah, that's - -6 -00:05:04,010 --> 00:05:07,110 -Unknown: Yeah, you need that got like sort of weird yellow hair. - -7 -00:05:07,380 --> 00:09:17,149 -Wes Bos: Exactly. If you're not using yellow hair and lots of purple on your homepage, I don't even know what kind of designer you are. And really, the final final tip we have here, before we wrap this up is always draw the golden ratio overtop of everything, makes it look like you know what you're doing. And it just kind of the way to do design is put that Golden Ratio overtop of everything, and you're good to go. It means it looks good. It's really what it means. Obviously, those were joking, hopefully you haven't turned us off yet. But developers and designers, even though we work together, we often I don't know, poke fun at each other. And there's all these sorts of things. So what we're hoping for this episode is not to tell you those, like do this. But like what is it that you can think about? What are the foundations coming from a not a design background? Both Scott and I, these are things I think Scott and I make beautiful websites, we think that our websites look pretty good and are fairly usable. And these are things we've learned over the years. So that's kind of what we're going this is by no means a design of everyday things. We just read the book, and we're going to tell you about spacing and whatnot. But that's our hope today. Yeah. And if you are thinking this is going to be the I don't know the thing you need to kick off your design career? I would say it's probably not, but it is going to help you make better looking websites, which is certainly the the end result here. So do you want to start off with some of our backgrounds and designs in general, or maybe your background with learning design and how you feel about your design now and maybe just a little bit of that stuff? Yeah, I so I started off as a designer, and I actually almost went to school. For design I had applied to OCAD, which is the Ontario College of Art and Design. And I almost went there to be a graphic designer, but then I decided to go more down the tech route. So I had started designing in Photoshop, I don't know, maybe 15 years, 18 years ago, building CD art, and I design t shirts and things like that. And then like that translating over to good web design was a bit of a jump because like you go from just like this, like unlimited canvas of a CDR to actually having to make something usable. And you can't just put grunge on as as hard as I try. You can't just put grunge on everything you say Unlimited, but it said I mean, there's some major constraints about being this little tiny square versus infinitely expanding Canvas, you know, that's true. And interaction design is kind of another thing, right? Like a CDR is just a piece of paper at the end of the day. And that was a big jump for a lot of people. There's a lot of print designers that made the jump over to digital, I remember implementing a lot of these designs for print designers, and they had like 400 fonts on them and, and things like that. And it was a bit of a jump. So that was kind of my background is I just learned with that. And then over the years I've I feel like I because I always did the design as well as the dev for all of my freelance clients. I feel like I got pretty good over the years at making something that looks good and is pretty usable. Yeah. So what was it that that took you from feeling unconfident? With your design skills for your clients to feeling confident and strong with your design skills? Like what was it? Like what was the threshold that you had crossed that made you feel more confident designing things, I think to me was, I've talked about this before, but it was taking other designers designs, because for most of my clients, I would implement the design myself, but I would get these designs from other designers and implement them myself. And that made me realize so quickly that things like spacing, and colors and inline heights and like all these little things where the designer will come back and be like sorta nitpick, but like, the like, good part of the design is not just getting it rough. The good part of it is having finesse over these things. So I think that was it. And then going back to my own designs and trying some of these things like colors and spacing and line height and fonts and whatnot. I'm like, Oh, that makes it look 100 times better. And that was really just these handful of little things that I had had to go back and implement. - -8 -00:09:17,580 --> 00:14:01,500 -Yeah, definitely. Yeah. So I've been mine's pretty similar in a way, although I didn't necessarily do a lot of CD design or even print design at all. But I did start in by intention. When I started my career in web was just started as a designer, and was like, really, my thing is I wanted to be a designer. And I found out pretty quickly that I just wasn't very good as a designer and I could build websites. I could build, like a technical website better than I could design a website. You know what I mean? Like the it was easier for me to build something than it was for me to design it. And it took me a long time to realize that because I just I saw the building of the website as being like, Oh, just the thing you did. After you designed it, so I'll just design it, and then I'll build it and then I cycle Okay, well, it actually turns out I'm kind of better like building these things more than designing them. That said, I've, because I've always had this drive or passion to want to be a web designer, once I decided to make my formal career change into being a developer, rather than a designer, or attempting that, I did keep on design skills as a hobby, so to say, so I would think, well, I'm going to design this as a as a hobby, rather than look for a career. And then and then side projects. If I was doing a side project, I would always make sure to design it myself. Or if I was working with freelancers, I would always make sure to design things myself, or even the level of tutorials website, we did work with designer Mike McMillan for the logo and the very initial version of it. But you know, the past like three or four iterations of level up tutorials, I've pretty much just designed myself. And I think you can probably track my progression as a designer, just by looking at the design iterations of level up tutorials, it always, it's still surprising to me, when people tell me they like the way it looks, or that the design on it is really excellent, because again, I've always approached design as a hobby. So I've been largely sort of struggling through becoming a confident designer with my skills. But I think a lot of the stuff that we're gonna hit on in this episode is things that both I've learned as well, as you've learned over the course of our time becoming competent designers in this industry. Yeah, yeah, if there's one more thing I can say about that as doing the because every time I release a course, I design and develop a brand new website for that. I think that's really helped me because first, it's just doing a lot of content. And I have to come up with a new look and feel every single time. But also, as, as, like, the marketer and developer in me knows that, like, I need to communicate these things to the person because I want them to buy it. And I need to make sure that this specific course is a good fit. And figuring out like how do you communicate things as effectively as possible. That's a huge part of design. And then also just wanted to look look kind of cool. So sometimes they go a little bit bananas on patterns, and rotating and shadows, but it's kind of fun. Hey, if you want to see me go overboard, just go to fresh dot level up tutorials, comm with my forms library, this is the kind of design I do when I'm not trying to communicate things just like outrageous colors, and simple, but you know, aggressive. So I mean, it's fun design is a lot of fun, if you allow it to be like that kind of thing, right? If you allow it to be a fun exploration rather than maybe like a stressful thing you got to do. So let's get into some foundations, some things that you should probably think about, before we get started with any of these things. These are tips that really hold over to just about every single area. So for instance, I think one of the biggest ones is I think that people, they fail to utilize consistency. And sort of the, I want to say the the system of consistency, right? When you have several different buttons or font sizes or anything, you want them to be consistent, there's so many times that you fire up a bad design. And you'll see the spacing in one direction be you know, let's say like two rems or something and the spacing in another direction be like 14 pixels just sort of oddly, something that's like not a division or not half of it's not something sort of related, it's just sort of they're trying to do it by eye, but the end of the day, their AI isn't necessarily good enough yet. And so consistency within a system is always going to make your designs better. Making sure that you have the same sort of colors and the same sort of consistent everything is going to just go a hugely long ways. And I think if I was going to tune up some people's designs, that was one of that would be one of the very first things you would do is simplify and make it more consistent. - -9 -00:14:01,949 --> 00:18:33,830 -Yeah, that's I think that's probably the biggest one ever. Um, nothing else out there is consistency is key. Another kind of thing I want to say here is one of the fundamentals is often less is more subtle is better. And that's true in almost everything except padding, I would say. Because when you go like I'm just looking at a website that I am always irritated by the design of and that is LastPass. Have you I don't know sure if you've used LastPass before, but I have to use LastPass Yeah, there. There's something funky about their overall design aesthetic. just doesn't look good. Yeah, it annoys me. No, and I ever like the whole app itself. And I'm just sitting here thinking like, like, what is it that I don't like about it? Like, what is weird about it? And I'm just looking at it right now and it's all the drop shadows are a little bit too heavy. The padding is a little bit too close together. Yeah, there's no consistency like I'm just looking at At the footer, the spacing between they're like little footnotes. And then there's a huge space in between that. And there's not enough padding on all our logos and some of their available on the App Store. They're all pixelated. And it's just little finessing like that, that I just couldn't put my finger on it. But I was like using it the other day. And I was like, What is it about this house? It's a good product to me. But something about the design annoys me. And it gets in the way of me using it, it totally annoys me. Yeah, I hear you. And like, yeah, some of the icons are just a little bit too. Even like, I'm looking at like the, like the grid view where it says, like favorites, or shared it as your different passwords into different groupings. Like there's not enough breathing room there. And so yeah, it's hard to explain sometimes with the design stuff, it's a lot easier for us to look at something and just know that something's off. Rather than be able to explain that something's off, I had a client one time, who told me that the design was too cloudy, and they wanted the sun to come out, which is like kind of like a typical thing for a client to say, but like this designs a little cloudy. And you know, obviously, clients don't know what they're talking about. But what they're trying to express is just something looks off here, right? Something's just not quite right. And that's largely going to come from again, these sort of systems that we're we'll be talking a little bit more about. And I think that's really the next point is to always work within a system, because especially on the web, and I think I'm going to talk about this a little bit later. But, you know, you know, you have to know the rules before you can break them. And largely, if you are the type of person who's learning this stuff, you probably don't know the rules very well. So because you don't know the rules very well, you want to work within a system, whether or not you've created the system yourself, having a system itself will be going a long way for you. And I'm talking about a typography systems, the spacing system of color system, build systems for everything. And then when you have a design challenge, you largely don't have to think about it as hey, here's this new design challenge. But you have to think about it as like, which system do I use here? And how do I apply it? Now, obviously, you don't want to do that 100% of the time to 100% of everything, you have to use your brain a little bit. But having a system overall is going to make your designs really come together and be more consistent. And like you said, just fix some of those weird padding issues or weird issues like that. Yeah, I saw a tweet the other day, I'm trying to find it, I can't pull it up. But somebody was talking about how companies like like Facebook, and Airbnb, they have these very rigid design systems. And even we had Travis Travis Nielsen on and he was talking about like, he's the designer at Google. And then they have this like, incredibly strict material design. And they're like, well, like how do you be a designer when you're basically just like playing with these Lego blocks and clicking them together? And the tweet was like, No, like, it may seem restrictive. But the reason we have this design system is so that you don't have to think about those things. They've already been decided on how much padding to put on something and what font to use, has been decided on. And then it's up to you to decide how do I use these parts to actually, it's sort of next level, right? All of that gray stuff has been taken care of. And now I'm at a next level of how do I figure out like he was talking about using the design system for earthquakes, right? Like he's a designer, figuring out how do we get information to people who are in an earthquake faster. And like that, to me, I was like, oh, man, I always thought like, that must suck. If Google tells you what blue you have to use. Like, that's not very nice. But I think I finally understand that. - -10 -00:18:34,170 --> 00:23:34,230 -Yeah, it's it's definitely interesting problems, there are different problems than we have to solve as developers. Last one I have here is to use the like training, I'm going to call them like a training wheel type of tool until you are more confident in your abilities. And I'm talking about things that will generate a type system for you like all of the sizes, maybe not necessarily the funds as much you can pick your own funds, but to find things that develop a typography system for you find things that develop a color palette for you. And these things are largely going to help you make better looking designs until you understand those tools and those designs enough for you to be able to take those training wheels off and to start to write that stuff yourself. So I think the people sometimes equate that with, hey, use bootstrap or use this or that I don't use any of those things. But I will pick and choose from different websites or different generators or things like that to build out my type system. I'm not going to rely on all of bootstrap. But that doesn't mean that I don't want to take at least some CSS from another tool to help me build out that stuff better. All right, now we're going to move on to talking about color picking colors, what colors go together, which ones don't go together. And you have a note here color theory. I actually don't know all that much about color theory, but I've certainly in the past I've used like a generator that will go off and give you a sort of a set of colors to work with. But for Most of my designs, I generally start off with three or four different colors. And I sort of tweak them and work with those colors, and start to build the website. And then I'll go back and tweak those colors. And then I'll sort of settle on just a couple colors to actually use with the website. But is there anything you used to figure out? Like how like, if you know nothing about color, or and you wouldn't know what to pick? Like? How do you know if colors go well together, there's just about like 1000 palette generators out there. I would just Google for one of those. Google like a color palette to generator, typically, what I'm going to do is I'm going to have some base idea of the colors that I want to be implementing, or maybe there's like a brand color, and then I'm going to look for accents or things that go along with that. And the real the state thing about color theory here is really, you don't have to be a master at any of this stuff. But you do know the basics of color theory, you know, what is blues complimentary color? Shout it out. Um, you don't know the complimentary color for blue? No, what? I don't actually orange, it's orange. Yeah, it doesn't mean you got to use blue with orange. But that means that those are the the complimentary colors. And so there's also the the tertiary colors, where it's like a triangle of complimentary color ish things. And not to say that you have to know that stuff. But any of these color palette generators are going to create those things for you. And a lot of that stuff you probably learned in elementary school unless you're West, and so got grade school here in Canada. And we learn about beavers and things like that in Canada. Yeah, yeah. Army hollers. mamos marma. marmol Amar Mo, Mo, we one website I did use for the longest time I just remembered it. It was called color lovers calm and it's like a social network for colors and patterns. And you can go on there and just grab, like popular palettes or palettes people have used and that's really cool. Because you can like first like, see what are the popular ones. And then you can kind of scroll through them and and pick one that sort of jives with you. Yeah, and there's like ones that will help you find colors from photos and all sorts of interesting things too. Largely these these palette generators and finders, what they're going to help you do is maybe pick out exact hex values that you might not have thought about before. And that's really just a huge thing is because, you know, you don't want to use the default CSS blue. Unless you're like growing for a brutalist design or something. Unless you're like Bloomberg did. Are they still doing that? I don't know. I kind of liked it because it was brutalist. And that's like my style, but the same time. Yeah, it looks like they backed off from it. Yeah, maybe people worry. Yeah, I remember Bloomberg released, like a new design, and it was just totally blew. Yeah, it looks like they've really backed off from going all that blue. Then another one is Dropbox as well. They know Yeah. They have like really went for it on like the brutal colors together. And I don't know, it's sort of a trend now, I think. Yeah, it was for a little bit. Certainly. So that's really it for colors is you know, you could rely on your your own intuition your own eye. But at the end of the day, I don't think I've ever gone to the color picker in figma. And just selected, you know, a couple of colors at random based on my own I I've always used something to help me pick that pick that stuff up now, as you probably maybe have a better eye for that than I do. Because it seems like that's how you you approach it, right? - -11 -00:23:34,469 --> 00:26:12,270 -Yeah, yeah, it's, it's really just often I'll just take inspiration from something else as well, whether it's like, I've talked many times about how I like have old CD art that I've loved. And I tried, I have a specific yellow, and I try to work that into absolutely everything. And, yeah, that that's kind of just how I've gone about it. And it's probably not the proper way. But I tend to think my stuff looks pretty good. Your stuff does look good. And at the end of the day, there isn't like, a proper way. I mean, we're all designed this is one of these things that there are objective elements to it. But there at the end of the day, it can be totally subjective. And just like music, you know, if you know the rules are you have good intuition with the rules, you can break them and you can break them. Well. That's something I've always wondered, like, can you programmatically create beautiful design, you know, like, could you just pop in one color and out the other like using math and like I was, we used to have this album when I was a kid called the relationship between music and numbers. And I was like, I wonder what that is. And I looked into it and I was like, oh, like, good music is very mathematical. Right? turn out good design can be that way as well. I'm always curious, like, give me Just give me a sass mixin that will kick out the most beautiful design. Never. Yeah, what am I was funny. One of my very first projects in music school for my music programming class was to write an application that generated s ers. Regular Nintendo style chiptunes randomly. So every time you push the button, it would use Markov chains to essentially create an original composition. And since the types of things you could do in that sort of environment, were a little bit easier. It was really sort of simple and everything sort of sound good. But you could create little chirp toonies dee doo doo doo doo doo doo doo, whatever, just based on simple rules. All right, you you do like a fourth interval? No, no. Fourth, and then from there, well, what typically can sound good? Okay. Well, this can typically be a common out from that forth. So what do you what are you going to do? Well, maybe even there's a, a 1% chance that it's going to go to some wacky note. And that wacky note is gonna influence the rest of it. So there's like a whole lot there. And I really think there is a such a huge connection between design and music and any of this stuff that you could probably create something there was that whole service, it was like grid IO or something. I forget what it was the golden Yeah. Yeah, I don't even remember what that is. But I don't think it's still around unless, people were talking about that going to kill design. I was going to kill every web design job ever, not resolving anymore. - -12 -00:26:12,300 --> 00:26:14,610 -Unknown: not resolved, like see there. There you go. - -13 -00:26:14,640 --> 00:31:00,060 -Wes Bos: I just put a card in our thing. I was like, I want to talk about that, like GUI editors, like where are they in relation to what we do? And like, are they going to take our jobs is are they going to fail? Is that a joke? Is it is it just something we live with? So I think that'd be kind of a cool episode as well. So let's get into talking about one of our sponsors today, which is sanity@sanity.io. And let me tell you, they got some good design over there at Sanity, that was one of the first things that I noticed when I went to their website. So we want to talk a little bit about Sanity as the service was. Alright, so sanity.io, who just did a, like a design refresh, they didn't do it like a redesign, but they just refreshed a bunch of their design a bunch of the layouts. So check that out@sanity.io just feels feels really good. If you want to see an example of good design, and colors and things being slightly different from each other I, I really like the design of this. But what is Sanity, it's a structured content, CMS, what does that mean? It's a, we refer to them as a headless CMS, meaning it's the back end to the front end that you're going to build, whether using next or next, or Gatsby, or pretty much anything custom react application, you can use their API to fetch and grab your data, they just released it a new workflow, which is initial values. And what this is going to do is allows you to pre fill your fields with minimum configuration that can be dynamically prefilled. You can mention data from like, basically, you have like a resolver function for the default value. So if you want it to go and go off and fetch some data for your, your pre built stuff, you could it's not just like a standard, like john smith, filled in default text, right? The initial value templates for quick selection of different values. So if you want to like start up something, you can take like a template that you already has maybe 80% of your data filled in, and then you can just change it off from there. And I know for a lot of people in WordPress land, that's something they would just clone an existing post that was close enough, and then change it. I think this is a pretty cool API. And it shows that they're thinking about the like, really fuzzy stuff, like, they obviously have all of the base of the entire CMS. And now it looks like they're getting into some pretty neat Ed, not edge case stuff, but like making your experience as a developer even nicer. So check it out@sanity.io. And if you go to sanity.io, forward slash syntax, you're going to get doubled the free usage tier. Thanks so much to Sanity for sponsoring. Cool. So let's get into the next part here, which is spacing. And we talked a little bit about spacing and the foundational aspect of things. But I think one thing that the one big mistake that developers make when they're trying to design things, is they're not, they don't give things enough space, right? They don't, they don't give things enough room to breathe. And especially with paragraphs or headings, these things maybe just don't get the full one space that they need. And some of that can be resolved by even picking a proper system, right? If you have a system of margins, and spacings and paddings, you're going to be much less likely to say, Okay, let me eyeball this and then your eyeball might not be totally correct. Whereas if you have all right, this is always going to be the margin at the bottom of an you know, an h3, then things are going to get to breathe a little bit more. Another part of that spacing is even like line spacing line height. Mm hmm. I noticed that's like a big thing as people don't often get the line height aspect of it correct. And I always Personally, I use something called Vertical, Vertical rhythm. I don't know if you use vertical rhythm. No, I've never used it. It's sort of a difficult concept to explain without some visuals, but vertical rhythm As essentially, the idea is that you have like, you have a vertical rhythm to use the word in the definition. For the vertical spacing of your document, we're typically used to grid systems going, like left and right. But this is almost like here is each, each line of the site takes up this amount of space. And a heading should fit in between these lines. And then the paragraph text should fit in between each of these lines as well. And if you follow all of those systems that are developed for that, it ends up looking really nice. And it just puts it all on one vertical vertical system, right? So really, vertical rhythm is a just a fancy way of talking about the consistent spacing amongst headings, line heights, and all that stuff. And I do use largely vertical rhythm systems. So check it check, like Google around for vertical rhythms, and you'll find it Tutorial It takes a little bit more of a, here's some math to make it happen. But you shouldn't have to do the math yourself. Somebody's already done it. So yeah, definitely something to look into. - -14 -00:31:00,540 --> 00:34:44,210 -So that's just like, like, let's say you set a 20 pX vertical rhythm. That means that you're you have like a like a vertical grid. And anytime you end off a paragraph, have some padding have a horizontal rule is Does that mean that it always just snaps to the closest or 510 20 pixel? horizontal line? If you were to overlay something? Yeah, pretty much. And that's really what you have to think about. It is like a, like a line every every, let's say every 20 pixels, right? There's a line every 20 pixels. And you would want everything to always fall between two lines. So that dictates the line height of your paragraphs. it dictates the distance between your headings that dictates the margins beneath and above your paragraphs and things like that. It's really just making that spacing consistent. And you don't have to follow these vertical rhythm rules. But what it does is it gives you a system to work off of, yeah, I would, I would imagine like that's a great system to have for your your line height, your padding your margins. But I like I would imagine that like a, an image or a one PX border, right? That would throw it off. But like, you probably don't care about that. Do you? As long as you're sort of following the base rules, it's going to look okay, yeah, and I used to care about that I used to like, be okay, these images can only be you know, it would it would have to snap to whatever. But that is a giant pain in the ass. And I'm not I don't adhere to that really yet, at least any more. Interesting. Yeah, it's largely changed into a here's a consistent margin beneath and above things and consistent line height that fits within that vertical system in a perfect world. One other tip I have is, on your headings, I will for a lot of fonts and Helvetica included, you set the letter spacing to minus minus one negative one pixels. And that, I don't know what it is about doing that. But it just makes it look a lot better. And if you would go to any website that you enjoy the look of, you'll almost always find that they have set the letter spacing of that either to be one pixel less, or sometimes they even stretch it out a little bit more, depending on what the font is. Yeah, I don't do that. But I used to with the other font that I used when I changed my head and font has changed for me. But I used to definitely do that a lot. Because I think I used Open Sans before it just didn't look good without it. And again, the last one is really just consistency within your margins and paddings. One thing that I really have done consistently in my site is to have these, you know, sort of default margins. And padding setup is essentially, you know, one REM two REM sort of deal. And I know that if I want a consistent spacing in my site, it needs to be something reasonably divisible as in, if I'm going to have a margin bottom here, I'm never going to use margin bottom 10 pixels, I'm going to use margin bottom, you know, point five Rams or margin bottom one ram or something. So that way at least falls within some divisible system of this thing that exists rather than just some arbitrary value that is determined at that particular point. I think arbitrary values that you just determined are a great way to throw your system off and just have things look out of place. You know, I just did a quick look up of sanities Letter Spacing because I was like theirs looks good. And they're using half a pixel. Now I didn't even know as i can you can you use half a pixel. And they looked it up and I turned it on and off and at least on my monitor 4k monitor, there is a difference. So a half pixel Letter Spacing might be the ticket if the negative one is not what you're looking for. So try that out next time. Whoo, Hot Tip sanity. - -15 -00:34:46,730 --> 00:39:11,610 -All right, let's get into the typographic elements. And this is the stuff that largely can throw people for a loop because it's I think it's the easiest to really goof up and since type is such a huge component on the web. Yeah, I mean, you could remove a background image From most major websites, and our background images, colors, all that stuff, you could remove that for most major websites, and you'd still be able to tell what they were just based on the type system that remained. So the type is such a huge component of a visual effect for a website. And in the past, there used to be some really hard and fast rules like oh, you use sans serif for headlines and use tariffs for body text. That's what you just did, right. And since we only had like five fonts to choose for you, just like Georgia, or something for your paragraph, text and Arial for your header, because we couldn't even use Helvetica at that point. But largely, the world has changed. New fonts have existed now that are better for displaying it small font sizes, like body text, right? So there's really not that hard and fast rules about when to use sans Harris versus when to use Eris. And it can largely be totally up to your own personal aesthetic at this point. Now, for me type holography in terms of picking which fonts and picking a system is both a hard and an easy problem to solve. Because for picking fonts, I am not talented at picking fonts. But for developing a type scale, I can use something like type hyphen, scale.com. And it's just give me the CSS that I need for my type scale. So yeah, I use things like type scale, and I just don't even think about it, you know, because your paragraph types, your heading types, all the sizes, it even spits up the CSS for you. And you don't have to bring in a giant framework or something like that. So I have a much easier time with developing the system just simply because I can use somebody else's system. But in the same regard, picking fonts is a really tough one. And something that I've noticed that you were really super good at. So I'm interested to get some of your hot tips on how you pick your fonts. Yeah, I, I used to do the whole, like, go to Google fonts, and then just sit there and scroll forever. And what I realized is like, I don't really, I'm not good at picking out these or if they're all like a quick angry Fox, or whatever the thing is, like, I can't spot them like that. So what I started doing is I went to these websites like creative market, and I forget what the other ones are creative market is probably the biggest one. And I look through there the fonts that people sell there. And usually for 2030 bucks, sometimes even less, you can go and buy a really nice font. And and what gets me there is that when they sell it, you see them using the font, both with other fonts, as well as you see them like stylizing it and colors and things like that. And then I just sort of like, look at that because I'm I have my sketch on the right. And like that doesn't look as good as it did when I bought it. And then I look at what they did. And it was like, Oh, you know why it's better. It's because they've put some texture on it, they've done some spacing, they've used like a really big B and then the rest of the letters are much smaller. So that like little things like that. And you can pick up all kinds of tips from the person who made the font, who knows how to make that font Look, its best. And also you just get these like fonts that nobody has necessarily seen before. Because they're not on Google fonts, you have to go ahead and buy them, there's a little bit more overhead, because you have to make sure that you have a license to use it on a website. But that almost is never a problem. Because they just give you the font and they give you a license to use it. They often will give you the the woff, the Hoff all of those different files that are used, pop offs, whatever is needed. So that's my like little trick, I've been really into this font called Red, Nika. Next, I use it on a lot of my websites, it's the syntax logos built in that as well. Actually, I think the syntax is red, Nika. And they just released another one, which is a little bit updated. And a lot of thought went into it. My only other tip that I would say is that if you're going to buy a font from somebody, first check if they're selling it on their independently on their own website, because in all the money goes to them because like, honestly, these 20 bucks for a font, I can't imagine how long that takes for to build. - -16 -00:39:11,820 --> 00:42:51,750 -Yeah, and I bought fonts before. And it's one of those things that if you're buying from an individual, it's such a, it's such a good thing rather than buying from one of these giant stores that have just bought up licenses to a bunch of old fonts and whatever. Yeah, like cording onto old fonts and jacking up the rates. But again, it does take a lot of work. And if somebody is an independent font creator, one of my favorite they went was the site there was like a site of this person who had taken a couple of fonts from like things in the 1970s like one like gang biker jackets from New York. And another one was like a big boy Grandmaster Flash style stuff. And I use that in all of my talks. I bought that font because it was like, the coolest thing ever and it was like a one off and you know, so As a huge fan of buying fonts whenever you can. And even if you want to check out some cool fonts, you can check out the levelup tutorials library fresh. But if you want to look at some maybe less exciting fonts than that, you want to check out another fresh sponsor of ours, which is fresh books. Yes, fresh books is a cloud accounting for small business, whether you need to track your time, you need to keep track of your invoices, send people invoices, accept payments online, that's a big one that I like is often get people wanting to buy a course for me. And they'll email me like, hey, like, we would like to buy the course, please let us know how. And usually I have to like email back and like, push the buy button and type in your credit card details and click Buy and, and almost always, like I'll say it I don't say that because that would be rude. But almost always, they have a process where they need to get an invoice, they need to send it off, then someone needs to approve it, then the invoice gets turned into a purchase order. And then I have to approve that. And then finally I get paid in something like that. And almost always what happens is I do that all through Freshbooks, where I'll give them a quote, The quote will get approved I'll turn that quote into an invoice via Freshbooks. And then they can pay it directly online. right through it. It goes into stripe, same place that all of my other isn't the only thing I have to do is have to manually set up that license, which takes me 10 seconds to do. Yeah. So even if you have your own, like, obviously, I don't sell all of my courses through it. But anytime I need to send off an invoice or have something that's a little bit more official that has a little bit more overhead larger companies do this all the time. The freshbooks is my go to go to freshbooks comm forward slash syntax, use syntax in the How did you hear about us, you're going to get a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring. Cool. So let's keep this moving. This episode's brought along we have next one is going to be interaction and interaction design is such a huge component of the web, that you don't even think about being a design component. But we are all interaction designers, especially if you are used to using things and building things that people interact with. So one thing that I think people oftentimes neglect is to have their interactions make sense, right? When you click the right arrow, it should do the thing on the right direction. When you hover over something, maybe it should interact and move in a certain way that you'd expect it to. Like you don't want to hover over something and have it jump over to the side of the screen just because you think it looks cool. Again, you can do these things. But you have to do them well to have them work out. Well. Yeah. My other tip here is that design for all states. So think about your standard state what's like the regular state called normal vanilla design for just your regular state, which everybody thinks nothing but - -17 -00:42:51,750 --> 00:42:52,500 -Unknown: a resting - -18 -00:42:52,670 --> 00:47:49,680 -Wes Bos: resting state, then you also have visited active and hover. So think about when somebody is hovering over with their mouse. Think about when somebody is currently clicking on it. Like even just like a little I know some people hate this but the one pixel down on a button. When you click it, the button goes down it presses D presses think about visited states for for links when somebody actually visited that, that you're all How can you change that a little bit differently. And also when somebody is tabbing through your application, that's sort of the one that everyone forgets about. And you can leave it on like the default blue at the very least leave that on, don't take it off. If you do take it off, then you have to think about, okay, what do my links went to my buttons? What do these cards whenever somebody is tabbing through them? What does that look like when they are in their active state? Sure. Another one we have here is about animations. And you want your animations to be fairly quick, I have most of mine over unlike point three seconds of sort of around then I all of my stuff on level up right now is actually physics based with react spring. But for the most part, you want your animations to be quick because even if it feels longest to you, it probably feels very long to your users who are waiting to use your thing. You have a lot of patience for whatever app you're using at any given point. But a lot of times the people who are using your stuff, just want it to load and just want it to do its thing and lay you they don't care about the fancy animation. Now while I do use fancy animations and level up tutorials, I'd like to think that I don't let them linger too long. Yeah, I love that. Like if you want a rule and I don't know what rules are not necessarily the best thing but if you want like a base to start put all of your animations at 0.3 seconds, that's a really good spot to start and then tweak them from here there anything over probably half a second is probably too long. Because it makes it's gonna make your website feel sluggish and, and things like that. And that's one of those things where someone uses their website and just gets irritated. And they don't necessarily know why. But if you were to dig into it, I guarantee that would be one reason. Yeah, totally. So one last thing is we want to say there are concerns beyond like the way that it just looks for you, right? Because there's all these larger concerns about accessibility, right? Because you are just a person using this thing. But everybody has different concerns about how they use things, whether or not I mean, there's a lot of different things that could be considered a disability when you're using an application. So go back and listen to our accessibility episode, if you want to learn more about this, but accessibility is a major thing. And color contrast is one of those things that really just got totally neglected, especially when there was a trend of using super light Gray's for text for everything. Accessibility, that was like a big trend. And it was like basically like an anti accessibility trend if you think about it, because they did not pass the color contrast checker rules, which you should obviously be checking out at all times. Because not everybody has good vision. Not everybody can read those things. And the last thing you want to do is limit the ability for somebody to read your application. Yeah. So always assess your excessive accessibility. Yes. What else do we have here is check your fonts on Windows, like that's such a simple thing. But almost always, I'm, I'm guilty of doing this myself, have you picked this beautiful font that has 800 weights, and you have these amazing thin fonts, and it looks amazing on your 4k super expensive display. And then you bring that up on a older Android or like a Windows and the font rendering is not the same from device to device. And that's just a huge Miss. I think on a lot of websites, I see it all the time. And I often see people complain about it. And I know I'm like I know exactly what happened there is somebody on a 30 inch iMac design that thing and never thought to try it on solely on like a Windows computer because the font rendering is different. In that same regard. Make sure you load up your design another computer anyway. Have you ever had that thing where the font is installed locally? And you're like, Oh, yeah, the font face the declaration is working. But it was actually not working. And because you had the font installed locally. And this happened to me before where the the phone was installed locally. So then I pulled it up on another computer and there was like, a weight, the font face isn't working crap. Everybody's been Yeah, not the right font, check out Firefox, they've got a fonts tab and it will tell you if the font is local or, or loaded over a font face. And that's because I used to be like, Look, I don't know if it's working or not because I have it installed on my computer. So like How would I know if it's not like you can't necessarily turn them off. And then when Firefox rolled out their fonts tab, I was like, Oh, this is so much better. It tells you all of the fonts that are loaded on the page and whether they're system fonts or not. By the way, I think you can turn fonts off. Just FYI. Really how I'm book I think you can disable them. - -19 -00:47:50,130 --> 00:51:44,580 -Oh my gosh, how live I've been living my life for this long. This is why I tweet things because almost always want to have a problem with something. Yeah, someone's got an answer. Someone's gonna answer. Oh my gosh, yeah, you just right click it and disable 12 years. Oh, my gosh, wow. Now Now I know that I know, you know. Cool. So there's a lot of other areas, you know, concerns here again, there's a lot of accessibility stuff. Some people are just saying, look, make sure you keyboard navigation. But to me, that's more of a not a design thing. I don't know, either way, you want to make sure that your application is passing all sort of accessibility, making sure that your application is easy to use for everybody, in addition to all types of browsers and users. Yeah, there are some things you probably don't need to support, like a tiny little watch that somebody just made for one year or something. But for the most part, try to get things working on as many things as you can. Okay, the last thing we want to talk about here is inspiration and resources. And this is such a huge component of design, especially for people who may not have the inherent design AI out of the box like myself, I take a lot of inspiration from different things. And we joke that you don't want to go ham on some of these design trends. But some of the design trends and some other really excellent design resources like looking at stripes website can be a really illuminating thing for figuring out really good practices. Now, I don't mean to say you should do the exact same thing stripe is doing because that's a joke that we made at the beginning of the show. But I do think that you can learn a ton about design in general from stripes website. In fact, one of the things that I learned about design from stripes website was a table design. Yeah, my tables. Were looking just god awful. And I couldn't figure it out. Like why were my tables looking so poorly spaced and just tighten whatever so then I went to stripes dashboard because I like their tables. I examine them I figured out what they were doing differently than I was and I adjusted my tables accordingly. I didn't just straight up jack their CSS, but I understood exactly what was making theirs look good and what was making mine look bad. I believe Using dribble, it's dry BBB le.com. It's where designers will post screenshots of whatever it is they're working on. And I find that to be the best spot. When I'm having trouble designing a card or a table or a nav or something like that, I will often go to dribble and look at other other ways people have done things. There's lots of great ideas. And if you want to get better at design, just take like six of the things on the homepage, and just build them pixel for pixel as they're showing up on there. I did that quite a bit. I remember people would always post these like navs that like folded down like an accordion. And all the comments were like, Oh, nice, but you can't actually do that. And I would just try to build them myself and little code pens or things like that. And that really leveled up my skills. So for the most part, the things that people think you can't do, you can they just don't have the imagination to pull it off. So totally. So go go ham on dribble, site inspire. Obviously, we joke a lot about science fight yet my problem with I used to go to all these websites like CSS REMAX, and yeah, there's a whole bunch all these like best web design. And they've all turned into, here's a huge photo with the name of the website overlaid. And like, I'm like, this is not, this is not helping me like yeah, there's like a beautiful designers homepage. But like I'm designing a real app here. And I need to be able to fit dense content in there, I need to be able to convey value. And having a beautiful photo with some Helvetica, and white overlaid, doesn't help me. So I stopped going to those websites and just went on, on dribble, - -20 -00:51:44,850 --> 00:55:11,040 -you know, what I look at that stuff has as less of a guideline for how to do things and more of a of a place to jog my creativity in a way and just say like, Yeah, what are things are interesting or different about this that I can think about? Or utilize myself rather than, like, is this practical, because chances are almost everything on site inspires not practical. I also really like code drops from Yeah, Tim Panis. I don't, I never know how to say that word myself. But code drops, they have these great code demos about different things. And even just like button inspiration, there'll be like cares, or pay to 30 different button interaction designs. And like when I'm looking for something to do, or looking for something to figure out in that regard, I'll go to code drops and just mess around with some of them and try it out. Because they're designed really well. And they have the interaction things in here. And not only that, but it's all you know, open source to be able to just borrow the CSS in ways that you would want to use them. Another thing I have here is take a nice little trip around the world wide web. And really just check out websites, check out things that look good if you if you're onto something that looks good, and you don't know why it looks good, inspect it, check out their fonts, check out their spacing, check out their, their margins. I mean, even just like on code drops, right now, here I am, I'm noticing that there are little articles where they have a heading a date, a paragraph and a read more button, it looks nice. So you could come in here directly and see, okay, what do they got going on? They have an h2 with a font size of whatever. And then they have a paragraph that has one m of padding on the top and bottom. And then they have a paragraph with no margin on it. And like what are the things that make this look good. I mean, there's a max width on the paragraph. I don't do that personally. But that's something I probably should do, right? Because some paragraph text just look better when they're a little bit more narrow. And so there's these nice little things that you can pick up just from browsing the web. And I remember there was the first time that I discovered Do you remember when this was super trendy in the web 2.0 era where there was like, you do a like a not like a white but a very light color, one pixel hairline and then a very dark one. And it would give this a like embossed effect on any I still have that on West boss calm. And I was looking at the other day and I was like, Man that dates my website so much ran out. Sorry. Yeah, yeah, for sure. Yeah, that's I mean that but when I saw that technique for the first time, it was on some like video game website. And I was like, cool. That looks really nice. I really want to figure out how to do that. And then I saw that, okay, that's how they were doing it. And then I just started implementing and and everything because that's the era. Yeah. Another resource is Adam wathan. And Steve sugar. I remember the first time we talked about him on the podcast, we I called him escoger. He has refactoring ui.com. It's a book just about design. And he also has these amazing Twitter tips where similar to how I do the coding ones, he just goes into design things and creates these amazing like, they probably take them hours to build awesome it shows because like he he's gained like 60,000 followers in like a year's time, just because he's really broken down and just provided real content. So check him out. He's Steve sugar. sc HOG are on Twitter. He put some good stuff. And he also has like a list of all of his tips which I need to do. - -21 -00:55:11,609 --> 00:55:12,540 -Unknown: Because you're right. - -22 -00:55:12,839 --> 01:00:12,090 -Wes Bos: Once I tweet them, they're gone. Right? But so he has this like list and I see people refer to the list of tweets quite a bit, because a lot of them are pretty timeless. Yeah, totally. I I learned so much from refactoring UI, but also, just from I think that the things that are the most helpful are like the do's and don'ts things and I just love that that style of, of learning things in general. Cool. So that is it for our designed foundational tips. If you have designed foundational tips, let us know. We are both developers, and we are always looking to learn more about design in general. So let us know what your your sick design tips are. We'll give you a retweet, we'll share you out here and hopefully everybody can learn a little bit more about making their stuff look better, because that's what it's all about helping each other. So let's get into sick pigs. Do you have a sick pic? I do. And this is a vitamin A mineral, magnesium. I've been on this mineral Wow. Yeah, it's a mineral. I'm gonna it's a sick mineral. I've been on the site quest of trying to figure out how to like have more energy. And we've talked about this a lot. Like obviously the gym is one and, and whatnot. But I'm also thinking like, maybe I'm not getting enough vitamins and things like that. So I've been trying all kinds of different stuff. And I think the one that is really helping me because I can tell when I don't take it is just magnesium before bed. And it makes me feel a lot more like I'm so tired in the morning, but not like a mazon. Right. And that's big for me, because that's good zombie noise By the way, you were believable. Thank you. Thank you. So check it out, do some research into magnesium. Apparently, it helps you get a better sleep and feel more well rested. And I was talking to Scott and you said that you you take it as well. Right? Yeah, shout out to magnesium. Yeah, I take something gold. I'm actually in a cycle. Not a cycle is like a break from it right now just because I think you're supposed to something called DMA, which is like zinc, magnesium and vitamin B. And, man, if I take that before bed, I sleep like a dark rock. And it's like, unfortunately, I feel bad. Because sometimes, you know, like, Brooklyn will wake up. And I'll just be like, out, I took the XIX I feel bad if I took that every night, but it helps a lot. The magnesium, it's got to be the magnesium in it, because I know that it makes you a little sleepy. But I know it does interact with something. So check out your interactions, whatever medications you're taking. Yeah, don't take it. With your it's I always thought I was getting it. And I thought it'd be in my multivitamin. And then I realized that it you're not supposed to take it within a couple hours of any other vitamins because it harms the absorption, something like that. Yeah, I couldn't take it with my nerves medication with my tailbone. Or at least I had to wait two hours. So yeah, definitely one of those ones you want to check on here? I have a really interesting sick pick. It's this app. You know, I've been I've been learning a lot about apps since I got this iPhone, because there's a lot of new apps for me to discover. Gotta get the apps on the phone and the phone and the apps. So what am I What have I discovered? Well, I found an app called real good. And I'm so sorry, Android people. I'm so sorry. This exists is a website. So you can use those a web app, I'm turning into one of those people who's suggesting things that aren't cross platform. But this is real good art elgod.com. And this is the place to find what streaming where and the design of the interface. Everything's good. If you want to talk about design and all that stuff. This is really good. It takes sort of the Netflix style design and changes it a little bit. But what this services does is it basically tells you what where things are streaming. So like let's say there's a movie I wanted to watch the other night it was called the night of the comet. It's a movie from 1984 it was sort of a, like a fun light hearted horror movie about zombies. And it was really funny, really good, super good movie, but we didn't know where to watch it because it was this older movie. It wasn't super popular. So I went to this real good app on my phone and I typed in the comment and it told me Hey, you could stream it for free on tubi TV, VUDU or you could rent it or buy it from these following services. And I'd never heard of TV TV so I installed it And sure enough, it's like a Netflix competitor with a bunch of free movies and it Chromecast did well to the TV and played this movie for me. I would never ever heard about that if it wasn't for this service. And so this works with all that stuff. Netflix, Hulu prime, Showtime, HBO, anything if you are looking to find where things are streaming, you just type it in and it tells you where if anywhere things are streaming or otherwise. You may have to buy it or whatever. I've already used this like eight times since then. So I've been a big fan of this site, this app in general, and a real good r e. l good.com. - -23 -01:00:12,600 --> 01:01:22,350 -I thought it was gonna be a fishing app. So that's interesting. Yeah. Yeah, real good. Awesome. What are we doing now? Shameless plugs. I'll plug my upcoming beginner JavaScript course is almost done. I'm recording like bananas right now. And I can't wait to get it out. beginner JavaScript calm. What about you, I have a series out on next j. s nine with server side rendering and server side routes. Using the fancy new API routes within next time we build a graph qL API with MongoDB. It's a full stack application. And we build a little habit tracking app. It's not a perfect app, because we only have 24 videos to get it done in but by the end of it, you should have the confidence to one connect to a MongoDB set up a Apollo API via a server list route within next j s nine without anything else that's fancy. It's super cool. So check it out, level up tutorials, comm forward slash Pro, sign up for the year and save 25% Alright, thanks for tuning in. We will catch you on Monday. - -24 -01:01:22,950 --> 01:01:36,090 -Unknown: Dude, please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax197.srt b/transcripts/Syntax197.srt deleted file mode 100644 index 3b070aab0..000000000 --- a/transcripts/Syntax197.srt +++ /dev/null @@ -1,176 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,219 --> 00:00:07,590 -open wide dev fans yet ready to stuff your face with JavaScript CSS node - -4 -00:00:07,590 --> 00:00:09,060 -module BBQ Tip Get - -5 -00:00:09,060 --> 00:00:16,730 -workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats - -6 -00:00:16,730 --> 00:00:21,660 -coming in hot here is Sarah CUDA, Bob and Scott Taylor. - -7 -00:00:23,610 --> 00:00:24,480 -Totally at ski. - -8 -00:00:25,890 --> 00:01:02,070 -Scott Tolinski: Oh, welcome to syntax in this Monday tasty treat, we're gonna be talking all about tips for writing good CSS, because we love CSS over here at syntax. Too often, there's this whole, you know, anti or pro CSS and everybody's too caught up in the pros and cons. Well, we just want to say that we love CSS, we want to talk a little bit about how to write good CSS. And if you want to write good one, no, sorry, let me introduce you first. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, Valley tried CSS with me, as always is the West boss. - -9 -00:01:02,340 --> 00:01:08,090 -Wes Bos: Hey, everybody, I'm excited to lay down some hot tips on writing good CSS, - -10 -00:01:08,370 --> 00:04:41,010 -Scott Tolinski: lay down those Hot Tips was, we're gonna be talking all about some things that we like to keep in mind when we write our CSS. Now this episode is really has the perfect sponsor for this because this is a browser that's going to help you write really excellent CSS and we say this is a browser, it's more or less like a design tool that you can use to see your application across device sizes, and I'm talking about size D at size e.co. That's si zy.co. You're gonna check this thing out. Because this is an awesome design tool, especially for all of those browser sizes and devices that you're using in your applications today. It allows you to see your application at a glance across all sorts of different devices at different orientations and navigate and use it it is super cool. It keeps them all in sync. So let's say you have your iPhone, you have your Pixel phone, you have your iPhone x, they have them all sort of right next to each other there. And when you scroll on one, they all scroll, which is such a huge thing when you're trying to use this thing in different designs too often we get into what are the devices that we have at our disposal that we're using. And that's where we prioritize this is going to allow you to ensure that your device isn't just hitting a certain subset of pixel widths, but it's going to hit every single design type that you could possibly have. And there's some really fancy built in tools such as being able to scroll to specific selectors across every single one of these device windows allows you to quickly and easily navigate a page or heading just choose a direction and your devices will navigate to it. It's so super cool. Again, it's a developer's best friend, they call it because it supports hot reloading allows you to see all the changes instantly across so many device sizes. It has your standard Chrome Developer Tools built in because this thing is based on Chrome. It is superduper awesome. any fancy tool or feature that you would expect to have when you're developing or designing a site across browser sizes. This thing has it and makes it easy to use and find again, the lassi to quickly and easily disable the network, have a touch cursor organized at your devices, add new devices based on which ones you want to be testing for manager cookies quickly and easily. It is just so super cool. And you even get to screenshot things super easily. It's $5 a month for the solo price. So you're gonna check it out at size e.co. That's si si si y.co. And give it a try because this is one of those tools that's used by a lot of companies, such as Bentley, Netflix, Comcast, Samsung sketch, duck, duck, go Gatsby Basecamp. Oh, deep going on and on for the people that are using this. for good reason. It's a really super cool tool. So sciency deco, check it out. Okay, let's get into our tips for writing excellent CSS. I think this episode is going to go along really well with the one that we just released on Wednesday, about design foundations, because really a lot of this things in both this episode. And the previous one could be summed up into use a system, make yourself have a system that allows you to write things in a way that are consistent. And that way, there's never any guessing work. And when people need to write something new with CSS, or use something that's existing, instead of inventing a way to do it, they're going to refer to the system. It's a big, big thing. - -11 -00:04:41,390 --> 00:05:41,160 -Wes Bos: Yeah. The next one we have here is using overrides and the cascading I always tell people embrace the cascade. There's some people out there that don't like the sea of CSS, and they rather just have SS. But the c a c and CSS stands for cascading. Meaning that you can write some CSS, have it apply to sort of a broad spectrum of things. And then I narrow in on things and override or add additional properties as you want it. And I say that not to do absolutely everything that way. Because certainly that could be a debugging nightmare. But don't rewrite the same CSS over and over again, if you don't have to. But also on the same note, I'll say like, Don't go too bananas with it, because I've certainly written some CSS there where it was much too broad. And I find myself either undoing a lot of stuff because I went that way, or having to just write multiple things over and over again, - -12 -00:05:41,400 --> 00:06:45,720 -Scott Tolinski: totally. It's It's so funny, because people are so aggressive about CSS on the internet. And you know, what else are they not aggressive about, but you have like, these folks who are like, embrace, the cascade cascade is everything. And you have these other folks that dog scope, everything. But I really think that CSS was designed for and works best when you utilize the cascade, and you utilize scoping. And that's the huge misconception about people who use CSS and js, like I use styled components, but I use the cascade heavy, and people will look at that CSS js, it's like, well, it's only for people who don't know how to use the cascade, that's not true. You can use the cascade in any of these ways. And it's going to make your CSS more efficient, if you can tame that cascade and tame the way it works, in addition to one off scope, if something is in fact a one off pattern, or maybe you know, an extrapolation of a pattern or something like that. So you need to embrace the cascading as you have said, but I also think you need to embrace scoping where it makes sense as well and utilize both of those techniques. - -13 -00:06:45,990 --> 00:08:01,140 -Wes Bos: Yeah, I have a little note here says I'm trying to understand why scoping in CSS is good. And that's just because, because CSS is global, meaning that if you write some CSS, it will apply to absolutely everything on the page. And even if you try to get good at naming conventions, and classes and things like that, all too often, some of that CSS will accidentally apply to something else on the page. So I think that's like a frustration with a lot of people that like CSS and js is that there is no scoping, or as you can, can make it extremely scoped to something like CSS and j s. So maybe dive into why that is good. And, and honestly, I think a lot of the things that we're talking about today are only things that you will understand once you've run into the trouble that they cause like, I never really understood the power of scoping, or bam, or things like that. And then I had worked on a large project that got a little bit out of hand. And it became a bit of a chore, anytime we wanted to add some new CSS to it, because there were so much like we had an entire framework. And then I had to override all that framework stuff with a bunch more stuff. And then I had, like, I it was just too much at the end of the day. And I thought like, it would be nice to to be able to chop that up into smaller components. - -14 -00:08:01,500 --> 00:08:45,720 -Scott Tolinski: Totally. And that is, there's so many like disasters that you can encounter over a lifetime of working on CSS stuff. And it is the thing that has weighed too much CSS way too much global and you're trying to understand and and over the course of time, maybe people have written patches in with important or things like that. And I think it's a big thing as well as you probably don't want to use important I pretty much just like one time I've used important in the past, you know, five or six years. And it's because I was overriding something that had important on it in a library that I was using, and I couldn't. So you need to understand the look the property order and what the specificity of each thing is. She just nailed that word. I didn't even hesitate on it. There was no editing - -15 -00:08:45,750 --> 00:08:47,580 -Wes Bos: specificity. - -16 -00:08:47,580 --> 00:08:50,640 -Unknown: Did I say it as you'd Got it? You got it? Wow. Yeah, specificity. - -17 -00:08:50,640 --> 00:08:52,790 -Wes Bos: I think I'm cured. - -18 -00:08:54,170 --> 00:08:56,610 -Scott Tolinski: Digital high five. Yeah. - -19 -00:08:58,260 --> 00:09:46,890 -Wes Bos: Oh, that's good. Um, next one we have here is nail down your typographic early revisit, it isn't what you need. So one thing I always do globally, even if I'm using this very scoped component based thing is always nail down my typos, graffiti, what fonts, what sizes, what colors, padding, spacing, things like that on all of my type. I'll nail that down globally, very early on. Yeah. And if I find myself going back, or if I find myself writing a lot more CSS to change something, then I know that I didn't do a good job early on in my typography. And I think that's really key because way too many times I've written stuff. And if you set the font family on, like 30 different things. That's a huge pain, if you ever want to change it. - -20 -00:09:47,150 --> 00:11:37,440 -Scott Tolinski: Yeah. I mean, yes, that's a key point is that if you notice that you are doing things like adding a lot of fun sizes to like scoped CSS or you're doing a lot of others. favourites for font sizes, then that's an indication that your system is not quite there needs to be revised. And that's totally cool. Because sometimes over the course of a project, as you get into it, you start realizing there's different use cases than maybe you'd expected. And maybe there's a different things here and there. And it is important to occasionally relook at your system and revise your system. Because type holography is one of those things that I don't find myself overriding very much specifically, because I've written this system, and the system should be able to handle it right. So another thing that we talked a little bit about systems here, I want to talk about, like, JavaScript patterns, right. And so there's a whole bunch of CSS patterns, there's a whole bunch of different patterns that you can use to develop your system, the most popular of which is most likely bem for block object modifier, element, block element, not bomb them. But with them, you have the basically you have your thing, you have your modifiers, you have your specific elements with inside of them, and you follow the system, the usage of hyphens and underscores to devise your class names to be a specific way. Now, I don't use bem myself, but I have in the past, and I really liked it. And I think what isn't important about them, what isn't important, isn't the syntax, the syntax doesn't look great. It looks a little over sometimes it looks like there's a lot of typing. But that's not important. What's important is that simply there is a system. And that single handedly made me a better CSS developer simply working within a predefined system, rather than just trying to cowboy code at all. - -21 -00:11:37,740 --> 00:12:12,330 -Wes Bos: Yeah, whatever pattern you pick bem functional CSS, like something like tailwind CSS, and j s, whatever it is, stick to it, and don't stray from the pack. Yes. And it's kind of funny, because like CSS by default, you can get yourself into a lot of trouble. And the same is true for JavaScript as well. There's a reason why most of us don't write large applications just in vanilla JavaScript, you reach for something like react, because it is a system. It's a way to organize your code. It's a way to write your code, it's a way to share data between it. And the same thing is true for for CSS. - -22 -00:12:12,480 --> 00:12:17,310 -Scott Tolinski: Yeah. And there's like that whole thing. It's like you either use a framework or you write your own, is that the same? - -23 -00:12:17,550 --> 00:12:18,060 -Wes Bos: Yeah, - -24 -00:12:18,150 --> 00:13:07,110 -Scott Tolinski: yeah, it's like, it's basically, you know, if you don't have a framework in place, by the time you're done with your own system, you've basically written one. And I think there's just a big thing, and I get I use, my pattern is a CSS and JS based pattern, it's using styled components. But that aspect doesn't really matter. But for me, you know, I have my individual elements, I have the modified versions of them, and then I have props that could go into them. And you could really think of it as block element modifiers, you could really think about it like that. And it really is sort of based on that. But at the end of the day, it's not adhering to their specific syntax. And I don't think you necessarily have to as long as again, the system works for you and works for your team. And that everybody is briefed on how to expand upon and use the system. - -25 -00:13:07,500 --> 00:14:36,150 -Wes Bos: You want to like give a quick example of what bem is because regardless of if you like that syntax or not, the ideas are probably apparent in any way that you're writing your CSS, right? Yeah, go for it. So Ben stands for block element modifier, and you think about like a, like, let's say we have a card, and that card has an image and a title, a description and a price selling something that might be the block there would be a sales card, and then the the elements inside of that thing may be elements that are associated with it, you can get a little bit further and you can go, you could even have like an element of an h2, but a very high level, you have a sales card, and then you'd have a sales card heading. And then if you wanted to change one of those elements a little bit, that's called a modifier. So you might have sales card heading, like sale or cheap or discount or something like that. And it's a really neat way to, to think about approaching your CSS and I would again, say it throw away all of your hate for how it looks, because who cares what it looks like, in your HTML, visitors are not viewing source on your thing. And even if they're Who cares? Certainly looks a lot better than CSS and j s with the random random classes, right. Other tips we have here is don't style based on element type. Kind of, - -26 -00:14:36,210 --> 00:14:37,410 -Scott Tolinski: yeah, don't do that. - -27 -00:14:37,470 --> 00:14:43,110 -Wes Bos: So like don't just say like h2, and then font size 100. That's good for base styles, but - -28 -00:14:43,170 --> 00:14:44,820 -Scott Tolinski: or scoped it's good for scoped - -29 -00:14:45,000 --> 00:15:52,500 -Wes Bos: Yeah, first scoped as well. That's that's something that's why I said kind of, yes. If you're styling like a banner text, just say give it a class of banner and say dot banner, there's there's no need to attach those styles only to the h2 version of it. Because often the semantic element like an h2, and what you want it to look like, are totally different. And I remember seeing somebody have a h3 with a class of h2, and doing what's going on. And I realized, like, no, they semantically need an h3, but they want it to look like an h2. And there's nothing wrong with that. You just give it a class of what you want it to look like. And I personally, now that I'm using scoped CSS, I will use element selectors inside of that. So I'll say like, I have a sales card. And then I say inside of that h2 paragraph image, and it's, it's so nice not to have to give everything its own class. Yeah, and just select it based on what type of element it is. So if it is scoped to something small enough, go ahead and use it. But at a very broad level, don't just use element selectors. - -30 -00:15:52,710 --> 00:17:46,950 -Scott Tolinski: Totally. You know, it's funny I have a lot of my system is based on custom properties. And then custom properties, once they're more usable within these systems, for a lot of people are going to really fill in a lot of the spaces because custom properties, unlike SAS variables, which really blew up design systems overall, and being able to set variables and have whatever change your whole design system based on changing a couple of variables, CSS custom properties are going to do the exact same thing with allow you to use them in runtime, rather than in build time, right? And so long, we've been really liking it here, too, you know, these these CSS things, but I have, how many headings Do I have, I have nine different headings, custom properties, I have heading seven, right, I went all the way to h seven, heading 654321 extra heading an extra big ass heading. And all of these heading sizes are I can use them on any element that I choose. Because like you mentioned, the visual aspect of what the headings should look like is not tied to the semantic meaning necessarily 100% of the time, sometimes even h1 and h2 the same size based on what it's actually meaning in the document flow. Right? Do you want to talk a little bit about naming techniques. I know we talked a little bit about this, but how you name things, how I named things. My general strategy is to name things as a thing, right? This is the playlist Alright, then I'm going to name it playlist. And if it's a playlist header, I'm going to name it playlist header. And then I do modifiers. And via props in react. But again, these can just be different Additions on to a class with CSS, all of these things, the vessel, whether it's CSS and j s, or it's JavaScript or whatever, it doesn't matter, as long as you follow the same types of rules. You have a message here to use a warning as a color name, rather than red. Right? Or a class name? - -31 -00:17:47,520 --> 00:17:59,280 -Wes Bos: Not necessarily like a Yeah, as a class name. If you I've certainly in passing, these are almost everything is this episode is me saying things I did wrong in the past. Okay? - -32 -00:18:00,390 --> 00:18:10,140 -Scott Tolinski: That's right. Because you make this big, unmaintainable monster, and then you say, oh, next time, I'm not going to do that. And then you do that better. And then you learn the pitfalls of your new system, - -33 -00:18:10,740 --> 00:19:27,560 -Wes Bos: just describing what they are instead of what they look like. So not like use banner instead of large text or use warning instead of red, because I certainly have had a class of big green text ended up being small red text in the final design. And that's, that's the worst to have to maintain that. So I've learned that. And another tip I have is you talked about saying like thing, and then inside of that thing, child and thing modifier. One thing that used to stress me out is I never knew if it would be like an element within a component or if it should be its own component itself. Mm hmm, totally. And I finally just been like, whatever, I can start it off as a component or sorry, an element of a component. Like you said, what was your heading of a card? Yeah, and then you're like, Hi, I actually need this exact thing. Somewhere else that's not inside of a card, then just move it right. Just Just take it out, make it its own, make it its own design, and, and then you can move over the classes or whatever you want. And that's very much how I approach writing react components, as well as just just put it in the same file until you don't need it in or until you need it outside of that file and then then refactor it. And that's doesn't stress me out as much anymore. - -34 -00:19:28,380 --> 00:21:34,070 -Scott Tolinski: Totally, the very best way to develop a CSS system is to have every single thing in every use case determined ahead of time. But there's just so many instances where that's not reality, and that can't be reality. So just assuming that you're going to have every bit of knowledge that you're going to have about this thing, when you start to develop it, it's kind of just wait to non realistic for me. And I think this is another area that variables in custom properties can kind of disrupt things right in, we've used the systems in SAS and whatever, for a little bit of time, they were like, everyone made a variable and they would make the variable blue or red. And they would set that to their brands blue color. And then people started saying, well, no wait, you actually should have your variable name to accent in brand color. And instead of blue or red, because while the, like you mentioned before those things can change? Well, what I like to do is I like to set my own root colors. And I really love this in stylist, because you could have what were called transparent variables where the variable itself had no indication It was a variable. So if we were to say red is equal to this, then anytime you used red, like the custom, the CSS text, it would just, it would just overwrite the the built. Yeah, I love that. But so that's what I really do is I set up my, my color system, I set my color system up as and here are the defaults. This is the green, this is the red, this is the blue, this is the whatever I'm going to use. And then I also have my warning color, which references the red color. And then I have my you know, success color, which references potentially the green color, but maybe I want to change it to the blue color at some point. But either way, just change that variable. So I have variables referencing variables that reference variables and build out this really nice system that obfuscates a lot of this stuff and hides it sort of beneath the surface. And again, custom properties really blow that up. And it allowed me to write like a dark mode for my site in like three lines of CSS. So these things are going to be really super cool. And until you can use them, swap them out for SAS variables are those kind of things because they they're really super effective. - -35 -00:21:34,070 --> 00:21:49,100 -Wes Bos: Other tips we have here is group like CSS together. So don't just willy nilly throw it into a file, wherever it is, wherever you want. It's very tempting, when you're doing a quick little, just stick it where wherever it is, you're right now - -36 -00:21:49,140 --> 00:21:53,280 -Scott Tolinski: it's right at the bottom of the big global CSS file. Yes, toss it in there. - -37 -00:21:53,520 --> 00:22:20,070 -Wes Bos: That's what you want to do, we have a sometimes you have to just spend like three or four minutes trying to figure out where it is future self will thank you, you will earn that time back in the future. So group it together, chunk it into different files, especially now as we get into things like Webpack and parcel, these tools are getting so smart about which files are and are not being used. And that makes getting rid of unused CSS much - -38 -00:22:20,070 --> 00:23:48,720 -Scott Tolinski: easier. Which is that's a tough thing in itself. I mean, there are tools, but as it as its own thing, getting rid of CSS or even like that, you'll occasionally stumble upon some CS and you'll you'll just be like, hmm, just been used anywhere. Is this class used anywhere? Yeah. Let me do a command. It's not being used anywhere. But it's it's been in my system for so long that you know, now I can finally delete it, because there's no, there's no point in shipping code that you're not using. And too often times there. There are times when we do that, just based on the evolution of a CSS system. I really like your your tip about you know, grouping things together. I I'm a big proponent of writing good comments within CSS. And by good comments. What I don't mean is I don't, I don't write a comment that says like, all their styles, the header when it's a class for a header, like not like that. What I mean is, if you have something hacky, maybe have a little comment that says why it's hacky have headings for grouping things together, like maybe I'll have a larger, more obnoxious heading that says, These are the layouts. And then I'll have all my layout CSS there, or these are my resets, all my reset stuff goes there, my base styles or whatever. And I keep it all very explicit. I used to write this is actually a really funny tip. But I used to do this, I haven't before anymore, because it's not maintainable. I used to write a table of contents for my CSS, and I used to update it anytime I added sections or zones to my CSS, like, hold on table of contents whenever you would arrive at my main sass file. - -39 -00:23:49,080 --> 00:23:50,040 -Unknown: I did that too. - -40 -00:23:50,220 --> 00:23:58,890 -Scott Tolinski: Yeah, it was really I spent way too much time on it thinking like, yeah, this is gonna be, it's gonna be great. And, of course, you never reference it, because you're the only person using it. But - -41 -00:24:00,840 --> 00:24:05,280 -Wes Bos: I think that's all I have any other tips that you have? I mean, there's, there's a lot of stuff, we - -42 -00:24:05,280 --> 00:24:35,700 -Scott Tolinski: could probably get more episodes out of this. So if you have CSS tips that you want to share with the community, please let us know. Tweet us out at syntax FM will we will retweet you if you have any awesome CSS properties. But at the end of the day, I think the big big pieces are have a system, make sure everybody knows what the system is that define the system. As you know, here's this organized thing that we're going to do. Name things well, and understand the cascade scoping when you should and everything's going to be gravy. - -43 -00:24:35,850 --> 00:25:01,290 -Wes Bos: Beautiful. Well, thanks so much for tuning in. Make sure you tweet us out your tips at syntax FM, we will retweet them I've been loving. Like I know we say this every single episode, like tweet us your tips, but we've been getting some good stuff coming in. And I'm retweet happy. It's really fun to have like a community curated source. Totally. That is the Twitter account. That's it. Thanks for tuning in. Catch you on Wednesday. All right. Hey, face. - -44 -00:25:03,149 --> 00:25:12,929 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show - diff --git a/transcripts/Syntax198.srt b/transcripts/Syntax198.srt deleted file mode 100644 index 0162a1479..000000000 --- a/transcripts/Syntax198.srt +++ /dev/null @@ -1,148 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:09,000 -development treats out there. strap yourself in and get ready to live ski - -3 -00:00:09,000 --> 00:00:10,530 -and West boss. - -4 -00:00:10,589 --> 00:00:21,480 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats. My name is Wes Bos and with me as always is Scott to linsky. How you doing today, Scott? - -5 -00:00:21,539 --> 00:00:30,570 -Unknown: Hey, doing good. It's winter wonderland here in Denver, which is not typical for this time of year. So Nick, I think it's gonna be back to 17th - -6 -00:00:30,599 --> 00:04:27,750 -Wes Bos: I still have snow. We still have snow. Yeah, I don't know what happened. We got like a huge Blizzard dump. And then I mean, all the ski hills are psyched about it. So I'm psyched about it for that, but it's gonna be like 70 next week. So I just want that to happen. You know, you know, how are you doing? Good. It's it's getting a little chilly over here to note thankfully, no snow yet, but it's unseasonably cold, which I kind of like getting out all the beanies and parkas and stuff like that. But we're used to it a little bit too early. Yeah. Just odd that I'm so much further south than you. It's the mountains. Yeah. Old World even work. Maybe the world got tilted or something. It's flat, though. So I don't understand. Well, I guess anyways, like a you know, give it a little shift. There you go. So today, we are talking about how to get better at problem solving. This is a, I just asked on Twitter, like, like, have you ever taught another developer to get better at problem solving? Like what are your tips and like, a flood like, this is something people are super passionate about? And honestly, because I think it is like the core of being a developer. And clearly, debugging and problem solving are probably the two biggest skills that you can have. Aside from being React.js developer, that's probably the number one skill. But I'm really excited to talk about like, how do you think like a better developer? How do you how do you become a better problem solver? We got two awesome sponsors today. First one is Netlify, the host with the most they're going to host your website and go from local to your global development. They do all kinds of neat stuff around caching and making your website super fast and check it out. And the actually these sponsors go really well together today. The second one is a new sponsor called Prismic, which is a headless CMS with a graph qL API. I actually went down to Prismic. Last last December, and we did a couple little videos, trying to explain the differences between next and Gatsby. So if you want to check that out, just Google Next versus Gatsby, Wes Bos on YouTube, you could check it out. We'll talk about these partway through the episode. You want to kick it off there, Scott? Yeah, let's get this started. You know, the very first step when solving any sort of problem is the the most important real real step here is to start gathering the info in the ways that you can, because that's really how you know what's wrong. And it's really difficult to solve any sort of bug issue or literally anything if you have no idea what the problem is. So this is this is a sort of a key step here. So first and foremost, the thing that you're doing, like, what is it trying to do? And where is it getting stuck? Okay, there's tons of tools at your disposal to really start to get into the heart of the matter here. And we are as developers, we're very used to our dev tools for all sorts of things, right. And maybe you don't even realize it, but even just doing little simple, you know, inspect element, that's a, you know, a very low level troubleshooting thing, because you're, you're just looking at the element in the DOM, right? So we have all of these tools at our disposal to help us gather information to what's the problem. The big problem with these tools are is that a lot of developers don't know how to use all of the tools at their disposal. And therefore they may pick a tool that is not the most appropriate tool for getting to the heart of whatever your issue is, ie if you're having network issues, use the Network tab. Don't rely on console log to solve a network issue, right? If a request isn't working, the Network tab is the best place to do that. So on and so forth. There's a billion tools at your disposal, make sure you're using the right one to find the right information. Yeah, one example I have here is you often hear developer say like WordPress is slow or my website is slow. Or this thing sucks because it's slow. And you go, Okay, - -7 -00:04:28,520 --> 00:08:56,899 -well, what's slow about it? Because certainly you can have slow all over the place. So right, that could mean anything. Is it the Is it the database that is querying? Is that slow? Is it the PHP scripts that are running are like the time to first byte over the network? Is that slow? Is it your server that is having a slow response? Is your source server overloaded? Is it slow in the client side, like does it feel laggy in the interaction? Are the images loading slowly? Are you using caching? Are you not There's probably like eight different parts of it and just kind of looking at a website and saying this is slow, you need to know how to be able to. And I think like we should say, for all of this stuff, if you're a new developer, you'll get better at this. And this is something that you're going to be able to crack open. Like, I clearly remember very many times in my, when I was doing WordPress, I would get like 500 bucks to make a WordPress faster. And like, I was so good at it, because I could just crack it open and see, where is it slow is slow on the servers, the database is there's something wrong with the, the server itself is the or they're loading too many plugins. And you can kind of look at all of these parts. And then you can just start chipping away at each of those and solving each of those problems. Whereas if you sort of just go like mano, it's slow, like more more server, maybe not, let's just install a plugin that does everything. And no, let's just install it. Yeah, add more stuff to make it faster. Do you remember those things you could download to get faster internet when you Oh, yeah, speed up the internet faster button. Yeah, let's just, let's try that. I recently did this as a favor for a friend of mine who had a WordPress site. And he's not a developer, he just has like a small little blog going. And he was like, this thing's really slow occasionally, like what's going on. And sure enough, I went in there. And there was four different versions of jQuery being loaded, he had like, paid some people to make this theme forum for different versions of jQuery, all load to their entirety, along with a host of other plugins, and whatever. So I just like went in there and, and you can see that stuff really easily. I think the easiest way to see any of that stuff is just to see what's being loaded and how much it's being loaded. But again, it's all about knowing your tools at your disposal and where to look. I also had like an issue when I was first when I was very first working with PHP, and I didn't necessarily understand the server side aspect of what I was doing. And this is like pre This is like, you know, Scott hacker days when he was just like, you hacking stuff together and Dreamweaver type of system not once I was a professional, but I would get like a white screen in PHP, and I just wouldn't know what to do. It would be just like, Hmm, I guess I gotta like three download and install WordPress here with the data, all things poached whole things, pooch and I, once I realized that every single where you look, there is a path to solving any sort of issue, whether it's the error logs on the server, the error log in the client, the Network tab or whatever, once you understand where to look just about any problem gets quite a bit easier. It's a little treasure map. Treasure Map take. Yeah, you. You look at like something like a century or Log Rocket, and they're just treasure maps to your bugs, right, you can be able to follow your nose to whatever went wrong. Can we get some money for that little average? You just did there? Yeah. Well, we'll, we'll bill Yeah. We'll talk to Sentry and Log Rocket and get a couple extra bucks for that one. Yeah, Tom for fiber. Another thing we have here is just like knowing where to look will be one of the skills that you can develop over time. So like, I clearly remember I was at the doctor with my daughter this past week. And he just like we give him the symptoms. And he starts asking these questions. We're like, initially, I'm like, why are you know that the problem is not with her ears. The problem is with her chest or something like that. And if he starts asking these questions, and he's looking in places that seemingly are totally unrelated, but because he's so good at getting to the root of the problem and asking the right questions, he knows exactly where to go. And same thing with like a mechanic with your car. Many times have brought my car to a mechanic with a weird rattle or shake or something like that. And they will quickly rapid fire ask a couple questions to you just to narrow it down. And I think that that is probably one of the biggest skills you can have as a developer is being able to narrow down what's going on with him. - -8 -00:08:57,020 --> 00:12:41,850 -Yeah, and there's no reason to worry about that. If you're not, if you're still somewhat new or even intermediate with development, one of the things that separates, you know, senior developers from junior developers, besides, you know, actual technical skill would be straight up the amount of things they've experienced, because just like with any other profession, wisdom comes from experience. And the more experience you have, the more your brain has remembered situations that it's encountered before. And you know, there's some times you see bugs. And since I've encountered this bug two or three times, I'll just say, Hey, I know exactly where this problem is. But somebody who's never encountered that bug is going to hit that issue and say, who, I got that problem on my hands here, what do I do, but the next time they come about, they're going to quickly and easily have a way through this mess because they've seen it before. It's just part of the reason why more experienced developers can work through issues a little bit quicker, and some of that really just comes with time and putting in the reps right, really finding out what the issues are through repeated exposure to that Next one we have here is look at the end game. So ask yourself the question like, what are you really trying to do here don't focus so much on the tech, because your problem likely isn't a problem with the framework or library or even language that you're working on. So like one example I had was, when I was in initially working on my advanced react course, one of the problems we had was with pagination, caching. So you, you have page one, you go to page two, and then you go to page three, and then you go back to page two, and that's already cached, right? Because you visited it, and you can go back to it, and it loads nice and quick. And then you'd like delete an item from page two. And then all of a sudden, you have to refresh page two, because now you have one spot, and you have to shift them back once right? And then all sudden, page three is out of date, because you've shifted them by one and then page four is out of date. And then I was like, like, what's the what's the solution here for being able to tell which which pages need to be refreshed. And so pretty much everything in the future needs to be refreshed. I know there are some solutions with cursors. And, and stuff like that. But there wasn't like a really good solution with that. And I went and talked to the devs behind it. They're like this is a fundamental cache invalidation problem. That happens absolutely everywhere, where if you're trying to cache things, but you need to clear that cache, by deleting one thing, it sort of will ripple through either the rest of the pages or if you add something, then it will ripple backwards. So what I should have done there is that not like I was so honed in on like, this is a problem with the Polo. Like, surely they could fix that. But that was more of like a Oh, this is the problem with just like in general, like same with like, we were talking about CMS is we were talking about with Brad about migrating data. Yeah. How do you what happens when your data changes on both places? Right, right. And you have like the and he's like, that's kind of a fundamental CMS issues. This is not necessarily just a WordPress issue. So what I'm trying to say here is that maybe zoom out a little and see, what are you really trying to do here? Something I see a lot is I love cooking. And if I run out of an ingredient in something, I can very quickly replace it with something else in my fridge. So if you run out of oil, you can use butter. Because why? Because I know that what are we trying to do here? We're trying to add fat to the recipe, right? Not the fact that this thing needs oil, because it works this way. What does the oil do in the recipe? What is what are we trying to do with this fast, same thing with like, you run out of milk, you can swap it out with sour cream, or applesauce because you're trying to add moisture to the recipe. So there's like, a lot that can be done there, where you if you understand what it's doing and how it works, you can problem solve a lot easier. - -9 -00:12:42,360 --> 00:16:15,029 -Totally. It's funny, because that goes along with the thing we just said is that the reason why you know what you can swap out is because you you're experienced in that regard. Mm hmm. And that's the kind of thing that can come with experience and having issues or working through things. I think a point I wanted to make is, after we sort of isolate whatever the issue is, we'll talk a little bit more about isolating the issue. Next, but after you have isolated the issue, and you can't figure out what's wrong, I mean, how many times have you ever looked at a bunch of code and just like sat there and stared at and say, I just don't get why this isn't working. And if you hit that, my advice is always to read it again, read everything, read the error log, read them closely, read it again, one thing I really like to do is actually read my code line for line like straight up read it, it so happens that when you write it, you've looked at it, you sort of have this idea of what it should look like in your brain just easily skims over it right. But if you actually read it line for line word for word, maybe you're encountered a little bit of a bug here that you wouldn't have seen that maybe you know, whatever language you're writing in isn't going to find itself. And so, you know, one thing I like to do to do this is to actually take this as an opportunity to comment my code really well, which is, you know, kills two birds with one stone. So if I have a bug, and my code isn't commented, well, I'll read it line for line and all add comments to say, Okay, here's what this code should do. This code should get the user, it should check their order status. If their order exists, it should do this. If it doesn't exist, it should do this. And then I'll attach those comments to the lines of the code and make sure that the control flow that I've imagined is happening one to one with my code into English exactly the way I would understand it to happen. And I can tell you, there's so many times where I've solved major issues that way just by breaking it down and saying, okay, line for line in English. What is this supposed to do here? And is this code actually doing that? That's such a good tip. I often do that. When I'm doing my tutorials. We often write that that's called pseudocode, where you just write in English, what should happen first, and then go back and write it in actual JavaScript. And I often hear from I don't anytime I tweet something, people Like, well, if the code was good enough, it will comment itself. Like there's, there's like a subset of developers there that think that commenting your code is unnecessary. Because if you write good enough code, you don't need comments. And that what do you think about that? Scott? Man, I write good, good code sometimes. And it's like, Great code. And regardless of like, how well labeled and well named things are, you know, I have a huge emphasis on naming things correctly in my code, no matter how many times I do that, I could come back to something, you know, four months later, after not looking at it and being like, okay, so I get this function is sending admin an email, but how's it doing that? Okay, let me let me actually have to reread the code, what it does is it reduces sort of that, that cognitive load that you have from trying to translate code into English, and then instead, you can just read English. So what it does is it makes it easier for you to understand the code. It's not like it's, it's not like you couldn't figure it out just by reading the code. But it makes it so much easier. Because at the end of the day, when you're reading the code, you're translating the code into English into your brain? And if the answer was just there in the first place, there, hey, it's at that time translating it. So totally agree. Yeah. That's a big thing. That's silly. Yeah, - -10 -00:16:15,029 --> 00:20:59,060 -I know. And when we're talking about timesavers, here, let's talk about a hosting platform that we both love, that's going to save you a ton of time, wow, you bought this netlify@netlify.com forward slash syntax is is seriously, you know, it's so funny, no matter how many times we do these ad reads, we always get people who tweet out afterwards saying, I heard that they really loved it. But I didn't believe it until I tried it. And it blew me away, I seriously will get so many of those after each episode that we have an Netlify ad, right, because we really do use this service and love it. I'm absolutely huge fan of this platform. We talked a lot about really just making things easy for us developers. And this is a platform that gets it if you want to host a Gatsby site, all he could do is you just point it to your repo. And then it just takes care of the rest. All of a sudden you have HTTPS, you have continuous integration setup, you have so many excellent features out of the box for free with a couple of clicks, that it's just unbelievable. When the first time I used this, it honestly felt like magic. And sometimes people see simple platforms and think, Okay, this is a simple platform, but no Netlify has access to server side functions, it has access to their whole authentication identity system, server side forms, can handle large media, it gives you so many things for free that the stuff that you have to pay for, you'll gladly pay for it. Because once you hit those limits, it's like, yeah, this service makes my life so definitively better, that I'm happy to, you know, pay for these services. So check out Netlify netlify.com. Again, it's the host, with the most I guess, is the tagline we're making up for them at this point today. But we absolutely love this service. And again, you got to it's one of those things, you got to see it to believe it. It's totally magic. Love it. Alright, next we have is this is probably the the most advice that we received on Twitter, it was break it into smaller parts, simplify it. So that probably the best example I can give about this as if you're having trouble with writing some CSS and your layout is broken, you got to go to code pen and make that thing in code pen where there's nothing else in the world that will go into it. And if you can replicate the thing within your code breaking, then, of course, there's a problem there. But almost always, it's something else on the page is leaking in there. Some other CSS, some JavaScript, something else is goofing around with your CSS or JavaScript. And by making a little use case, that is totally outside of everything else will help you and the person you're asking help for people send me stuff all the time. And often they'll just send me their entire GitHub repo and like, sure, let me just spend, like 45 minutes replicating your development environment to get this thing running. Whereas if the problem really is with something very small, then we should be able to make a smaller reduced test case for that. Totally. Yeah. And this is such a huge part of it is this isolation, right? To understand what the problem is you have to isolate it and figure out where where it's happening. And one technique that I like to do is let's say, let's say I'm getting an error in a like a weird, okay, here's, here's a difficult bug that's difficult to track. There's no error log, but you're getting this is when I had specifically in Safari, I was having like major CPU skyrockets and slow animations. And so you might think, okay, the problems with the animation, there's no error log happening. There's nothing on the console. There's a you could hit to the Performance tab, but honestly, I wasn't getting a whole lot of the Performance tab, I was able to see that components were mounting and unmounting themselves for no reason. Then it wasn't happening on any other browser. Okay, what do you do? Well, what I did is I started commenting out components, because there was no real way for me to figure out what component was causing the issue. So I started out at the main source of my application, which would be the layout, I commented out the header had commented up the footer, I commented up the main body. And sure enough, the site started loading with no performance issues and Safari. So I've isolated that it's now taking place in one of those three components. Next thing you do uncomment out the footer, all right, it's not happening in the footer uncomment out the body not happening in the body, this issue is happening somewhere in the header, right, what I've done is I've basically taken out everything other any other possible issue out of the equation, and I've isolated where it's happening. And you can drill that down into smaller and smaller chunks, until you find the chunk that is causing the problem. Not every problem is going to have that trail map leading you to the treasure. - -11 -00:20:59,730 --> 00:24:49,950 -One other example I have here is does this problem exist outside of the framework? So a couple a couple months ago, someone tweeted a link at me, they're like, hey, why. So I'm trying to use SVG clip path in react, and they were piping data from a react state into into an SVG clip path. And then and then using that to, or to add a blur, I think it was like a special kind of blur in SVG. Which, by the way, you should go back and listen to our SVG episode with Sarah, it was awesome. We talked about this the same problem in there. And we said like, okay, like, is this a problem with the browser? Or is it a problem with react because it was working in Firefox, but it wasn't working in Chrome, or something like that. So what we ended up doing was making a reduced test case, and just vanilla JavaScript. And then we saw that it did indeed work in vanilla JavaScript. So we knew it was a problem with react. And at that point, we had had done another example, just in react, if vanilla, sorry, not vanilla, react, but only in react. So then we took it outside of their application. So now we had two test cases, it does work in JavaScript. And it doesn't work in Chrome in react at a very reduced test case. And we could say, Okay, this is likely a bug with react. And at that point, you have to go and push it. But that's like the perfect example of how do you tackle something where you're like, there's so many moving parts, right? Yeah, the browser, you've got your, your application, you've got your own code you've written you've got the entire framework, and the problem could exist anywhere in there. And it was a good example how to narrow down on that and break it into smaller pieces. Yeah, another thing you want to do is test to see if this works in a clean environment. And this one is kind of, it's kind of more difficult sometimes, depending on how entrenched in and intertwined to your code, your code is. But honestly, if you have, let's say, a component or a function or something that's not operating the way that you think it could be, this goes along right with it, does this problem exist outside of the framework, but also does this exist within whatever same sort of system, just a clean version of that system? Right, it takes absolutely nothing to fire up a create react app, maybe toss some components in there, it depends on how big of a problem and how much time you spent on this thing, if you spent all day on it, what's another hour recreating this component inside of a clean environment? Or maybe you're not sure if the issue is with a library itself? This is an easy one, right? Let's say you're using a third party library. And whenever you use that library, something funky is happening. Well, it could be your system and how its interacting with that library, or it could be the library itself, fire up a create react app, or, you know, create view app or whatever, and start adding the component to it. And without anything else, seeing how that library functions within a clean sterile environment that is very similar to your current environment. And that should hopefully help you understand a little bit more, I should say, before we move on. Sorry. Go for it. Yeah, I told Wes to move on. And then I immediately interrupted him. No, the, I think that this is this is really my, in my mind, this is the most important step is isolating the problem before you try to solve it. So this is the one that like, I think you could spend a ton of time on just figuring out where the problem exists. Because again, if you're trying to solve a problem, and you don't know where the problem exists, you aren't doing anything. You're just you know, shooting in the dark. Honestly, that's probably unfortunately this also takes the longest I think totally you often hear people, like people out off to ask me questions like, Hey, I'm trying to do this, like, why is it broken? And I'm like, Well, have you like, have you tried to make a test case and they're like, right, - -12 -00:24:50,370 --> 00:29:38,610 -post some code. You never hear from again because like, oh, like that's so much more Just tell me what the problem is. But like I had at the top of this episode, essay is like problem solving. is most of our job, the stuff that is easy will get taken over by robots. That's probably one of the biggest skills that you can have as a web developer is being able to break things down and figure out what it is. That's what we're getting paid what's what we're getting paid for at the end of the day. So if you don't like that, that's a bit probably a little bit concerning. And, and you might not like it because you just don't like problem solving. But you might not like it because you're not sure what to do. And that's our hope with this, this podcast is that you will have some steps as to how do you tackle something like that? Totally. Next one we have here is take yourself out of your environment. So one of the tweets we got was from Andrew Walpole, he said, you should be able to look at the problem at all different zoom levels. I love that idea of zoom levels. Because if you're able to check on a problem at all zoom levels, often you're in the weeds, everything looks like a problem. He uses old Library's low server resources, bad scaling tightly tightly coupled code. But does it do what we need to do to do level it's working for no other reason. So I like that a lot like Scott Scott says it doesn't work locally doesn't work on your server doesn't work in different browsers, yet doesn't work in a production build on a staging server. You know, that's even a big one, too, is to have some place to completely emulate your production environment. In case this is a bug that's only showing up on production. Yeah, I we often talk about in debugging, we talk about rubber duck debugging, where you explain the problem to a duck, I think we should have something similar for problem solving that is like stand on your head. And what that means is that the Can we make that a thing like I've stood on my head, and I've talked to my duck, and it's still a problem. And I think because standing on your head means like, look at it from different viewpoints, right? This is gonna sound like the most college student thing ever. But when we were in college, and like I was this was when I was like learning how to breakdance and be boy, gosh, when I had a break, we would be like, sometimes we would go to practice and you would get into a headstand because you were practicing headstands. And we would just watch other people break dance upside down. And like a bunch of college kids, we'd be like, Whoa, looks so cool upside down. Like, it was just so interesting to watch that kind of thing from a completely different perspective. So I love this, turn, go turn, what is your little saying that you're you're on your head and on your head, I've literally done this for something else. And a non related context, it can really change your perspective. The next one is going to be to this is a big one, stay calm. I used to have a job where I worked as a technician on projections, projections, projectors, like the digital kind of projectors. And it was with a bunch of doctors. And so it was in like medical auditoriums. And so I would these doctors, turns out they're not good at they're not good at pewters. They don't understand pewters. And so they would just like be like God put the the flash drive in the CD player and it's not working, you're like, Okay, let me plug the flash drive in for you, you know. And so that was largely my job. But usually, you had to solve these problems like, hey, this computer isn't working in front of an auditorium of 100 doctors just staring at you while you're some, you know, punk kid projection is to who's trying to fix the system. And a lot of people who took that job would get like very nervous because you're standing on a stage in front of all these people. And they're all waiting on you because they got all this stuff to do. And they're just like, why isn't this guy fixing this thing yet? So the biggest tip that I always gave to new people in that job, and then work environment was to stay calm. Because if you are freaking out about whatever bug you're solving, maybe it's a bug in production. Maybe it's a high stakes bug, right? Like this thing is in production. You can't roll back for some reason. And you got to fix it as fast as possible. You got your project manager breathing down your neck, the CEO is knocking on your door. What do you do? Well, you breathe. Sometimes it's counterintuitive. Take a 10 minute walk, go just take a walk clear your brain, because it's going to reset things a little bit. It's going to get your mind off of being terrified of the problem. And that's really just a big thing is when you're scared when you're nervous when you're that excited. So to say your brain is going to be thinking about how nervous you are. It's not going to be correctly solving the problem. So take some time. Go for a walk. Bree, chill out, sit at your desk. Deep breaths. So if the doctors are waiting there, you just go for a walk. Well, - -13 -00:29:38,729 --> 00:31:01,260 -that's a different situation. I'm talking about code bugs when Oh yeah. When the doctors are waiting, I stand at the stage. And I say, all right, what's the problem? There's not a whole auditorium full of people watching me. It's just me and a computer and I know how to fix these things. Okay. I'm experienced enough to know Know that if I restart the computer, that's a good start, then I can do this, then I can do this. And sure enough, it's most likely going to work. But if I start freaking out and plugging things in and pulling things out, who knows where I'm going to be another tip I have here the actual we don't even have a center notes, but I'm going to add it in right now. And it's just like, talk it over with with other people. So it's like so underrated. And quite honestly, a downside to working from home is that you don't necessarily always have people to talk it over. It's a little bit too sometimes too slow to do it on slack or something like that. But I certainly do. Do do that with people on slack or on Twitter or something like that. You started to just like say, here's my problem. It's my least favorite thing about working from home, or working for myself. So yeah, I loved being able to show some code to my deskmate, Jeff, or Ben and just being like, is this a bad idea? Is this dumb? Is this okay? And then they could say, yeah, this is stupid. Why don't you just do it like this? Oh, - -14 -00:31:01,290 --> 00:31:01,830 -Unknown: yeah. - -15 -00:31:01,830 --> 00:31:07,200 -Oh, you're right. I mean, that no matter what we can all have those situations happen to us. - -16 -00:31:07,410 --> 00:35:14,550 -Wes Bos: Yeah, it's funny, you often see that on StackOverflow, as well, where someone posts I have this problem, here's my code. And the problem is with this part of my code, and the answer is Oh, almost not almost always. But often. Why don't you just do this an entirely different way, which sometimes is unhelpful? Because like, you have to say, like, Well, I have my reasons. Like, this is why this is the code we've written, I have my reasons that maybe you don't understand my entire world that I have on right now. But sometimes it's just like, oh, wow, I was totally approaching this thing in the wrong way. And by approaching the problem and rewriting it a different way, that totally just gets rid of my problems altogether, because this new way of doing it no longer has those problems? Well, a good indication of that is if you're looking for solutions, and you can't find anybody else who has the exact same problem you are, it's like a good indication that you might be thinking about the problem in an incorrect way. You might be thinking, I want to do this thing. And nobody else is saying that anywhere else. So of course, there's not going to be here's how to do this thing. You might want to take a step back and say, What am I actually trying to accomplish here? What is the goal here? And what are the ways that people do that? And then look for techniques, I'm commonly used patterns for those type of things. Another one I like is the making it obvious as possible. This is a huge one. If I'm debugging CSS man, I started slinging primary colors, like a first grade teacher, I just started throwing yellow, green, or green, my primary color, yellow, blue, red all over this stuff, outlines backgrounds, I like to check on one of the things I love to do is if I'm debugging breakpoints, right, all right at this breakpoint, background yellow, this breakpoint background green at this point, background blue, and just make sure that my even my media queries are written correctly so that the thing is happening in a way that it'd be expecting them to. There's so many things that you could just reduce it to make life more obvious. Yeah, you the debugger is a really good one. Because often I have some code that does five or six things. And I think I know how it's working. And I see that there's a problem. But by throwing a debugger in there and being able to step over it line by line by line, it then plays it back to me. And I'm sort of lining that up with my head is like, Okay, next, I think it's gonna run this function. Next, I think it's going to wait until this thing is resolved, and then go, oh, man, the next line returned, and that thing was undefined at the time. And sometimes the console log doesn't get into there. So when when I'm really slammed on a on a bug, throwing a debugger in there and being like, Alright, let's just take the next two minutes to step over this, and make sure it lines up with what I think is happening. And if it's not, then that's where the problem lies, almost always. Yeah. And how many times has this ever happened to you, to some people is, let's say you just start slinging console logs, right? And so you put in console log here, whatever it may be, the console logs aren't even labeled, like so I like to label on my console logs, if I'm doing that. And then all of a sudden, you see the thing logging out and you're like, well, this thing is logging out correctly. So therefore, it should be working. And what you don't realize is maybe it's actually firing off a different console log than what you're expecting, and you're not paying attention to the fact and what the debugger is going to do is allow you to see Alright, this line of code is stopping directly here. This is the state of it at this moment. And then again, like he said, step over it, make sure things are happening. Ever since we had that episode about the debugger man, I just like debugger on node debugger in the browser. I live for the debugger now. Good. I'm glad that you went bonkers on it. Yeah, it's I love the debugger. I will say I don't use it on everything. Like nothing wrong with a console log, probably still 90% of my my debugging is with the console logger. But for sure debug, even in my last, I was recording a big video for my JavaScript course on Friday and it wasn't working. And I thought like perfect. Let's throw a debugger in here. instead. over and immediately we found the problem where a console log just wasn't helping us at all. And I left that all in because I thought it was such a good learning opportunity. Totally. Yeah, I mean, it's, it's so essential to see that kind of stuff happens. Another thing that can really help is to - -17 -00:35:15,110 --> 00:40:16,730 -this comes down to the isolating of the issue again. But if you were using Git correctly, and committing frequently, having proper commits, and if your code is all committed, you could not be afraid of really goofing up your code, because like, sometimes, the bug is significant. And I just got to start ripping stuff out, I just got to start deleting code, who knows where I introduced this bug, but if my code is up to date in the comment, and I know this is the last working iteration of this thing, then what I can do is I can just start deleting stuff, start ripping it out, and then I can revert to the either non working commit or the previous working commit, you can always revert back to where it is. It's I mean, that's a good argument for always using proper version control. You never know when something's gonna break. And it makes sense. If you goof things up enough while you're trying to debug that you have someplace that you can get to. That's a clean slate. A next one we have is was one of the tweet replies from Bolen Dev, Poland. He says, I taught Java devs. For years problem solvers don't jump out solutions. They take the problem apart and make sure they've covered the thinking before the doing. They don't coudl ideas. Caught on maybe coddle can't read coddle, it's obviously caught on, I don't coddle ideas, but they stay open to the solution being different than they originally thought. They ask for help. But I love this, I immediately thought of somebody like Dan Abramov, who's one of the he's on the core react team. He's the developer behind Redux. And someone like that, who comes up with solutions. Like he's not the only one responsible for this. But he's a large part in react, suspense, Redux, React hooks, all of these things is that often we have problems and the solution is throw a render prop at it or do something like that. And what he does is they've take like, I don't know how the suspense has been in development for well over a year now. And what they're doing is they're really looking at what are the problems that people have tried to understand how people use this thing, to try and understand how browsers work, they're looking at all of the problems that is a developer experience, server side rendering, quickly rendering to the page without affecting performance on the browser, and they fully understand all of the problems that are at play there. And then they come forward with with some of the examples, I think that is a totally underrated skill. And I think even myself, often, I'll just find a solution and throw it at it. Because because that's the way without totally understanding the full problem first, and that's the kind of people that come out and make programming languages and and things like that, because they they really think like, if you look back at the if you go watch the talk from Ryan Dahl from I don't know, like eight years, nine years ago, when he created node j. s, he didn't create Node JS because he wanted JavaScript on the server. A lot of people thought that was silly. He created node j. s, because he had a problem with writing a synchronous code on the server. And he just like went through all of these different things. And he finally settled on using JavaScript on the server. I thought that you should go watch that talk after you listen to Spock s it's great. Yeah, I mean, how many times have you had a bug you worked in worked in worked in work to solve this bug, and then you didn't get anywhere you maybe wasted like two or three hours, and then you say, Okay, you know what I'm gonna do, I'm gonna start back from square one. And that's usually when you solve it, because you're actually taking that time to do the thing you should have done in the first place in this take the time to fully dissect it, rather than just straight up going in. I have a silly example here is when when we bought our first car, I don't know maybe six years ago, I had we'd always lived in a city and never owned a car. And then probably like six months into owning it, we got check engine light, and I was so stressed out, I was like, the engines gonna blow up. Like, everything is like, what's what's gonna happen? And then my dad is like, Did you check that the gas cap was like, screwed on tightly? And I was like, What? No, what? And then I went and checked it. And I was like, Oh, yeah, like if you have the gas cap loose, it will cause the check engine light and little did I know that it will actually most cars will even tell you that if you run a scanner on it, but I was just so like, Oh my gosh, like the, the engine is broken, you know? So like, if you just like step back and think about like, check the simplest things. Same with like a furnace repair. If you call up my furnace repair company. Unfortunately, I know this, because I've had to call them many times. We just got a new furnace. Get ready to call them and dealing with it. Yeah, one of the first things they ask you is did you accidentally Turn off the light switch that cuts power to your furnace? Did you maybe forget to change the furnace filter is the fuse that's on the server, the furnace popped. Like there's so many quick little five second things that probably covers 50% of their calls. And you go, Oh, no, I should have I should have done that before I started panicking. - -18 -00:40:16,770 --> 00:42:36,810 -Yeah, even think about this one. This one relates right back to coding is that our furnace had like a debugging light that flashed. And if the light I mean, I'm sure all furnaces do, but it's like if this flashes twice for like every second and then stops for a second, and then this is the problem. And sure enough, like that's the error log, right? You can check it Okay, it's overheating, which means I need to chill it out for a little bit. You know? It's it's super funny that I don't know, when I think about troubleshooting. I don't necessarily jump to my mental model list and go right to programming. It mostly goes towards other things in life that I'm frequently trying. Yeah, we'll shoot because these are all super transferable skills. Like I mentioned that job I hit with the projectors, or again, your car, car troubles or furnace trouble owning a house is a non stop tour of troubleshooting issues right now are right now our house is leaking. Well, we have a old house 1920s house, right. And it is very cold outside and our house is very cold inside. And our house is obviously leaking like crazy. And so it's funny, I'm doing a lot of troubleshooting. Right now what I did is I bought one of those thermal draught detectors, I'm going around the house, and I'm trying to identify the biggest issues, and then I'm solving them and then confirming that they're fixed. It's like one by one by one. I'm troubleshooting. Alright, the doors drafty. How do I fix the door, okay. And that's, that's life right there. If you keep on always troubleshooting and moving on from things like that, you're gonna solve a lot of problems in life. quick break for today's sponsor, which is Prismic. Prismic is a headless CMS that has a graph qL API on the endpoint. We didn't Scott, me and Scott just tried it out ourselves to kind of kind of take a look at it. And it's, it's awesome, you can get up and running, having the whole CMS actually without even writing any code at all. So you, you log in, you create your project. And then you go ahead and make all of your different data types. So we made one that has a podcast, and we have authors, and the authors are related to the podcast. And if you've ever used sort of like advanced custom fields in WordPress, it has that kind of vibe, where you got all these different types of input fields, you drag and drop them in. You can do nested content types, repeaters inside of their maps with with pickers all kinds of stuff like that, - -19 -00:42:36,960 --> 00:42:54,330 -Unknown: I think we should be very clear about its similarities to advanced custom fields. Because only in functionality, this thing, like anybody who's used advanced custom fields knows that the interface is total garbage. This is Yeah, gorgeous. Yeah, they do a great job of design throughout the application. Yeah, - -20 -00:42:54,380 --> 00:46:32,520 -Wes Bos: once you've got your content types, you can go ahead and and start to make your content, you can schedule it, you can have revisions of your content, go ahead and publish that relate different pieces of content to each other. And then once that's, once you've got your content in there, you can give that interface to your client, and then start pulling all of that data into whatever application you're working with, whether that's a Gatsby or that's a next. They have a JSON API and a graph qL API, they give you the graphical editor that you can kind of play around with it right in there. They have lots of demos on making it work with Apollo, which would be very much of interest to our listeners, they've got some examples with different languages, PHP, as well. So check it out. If you want a headless CMS, it's at prismic.io. And we're going to send you to prismic.io forward slash syntax. Make sure you check it out there. And thanks so much, Prismic, for sponsoring, thank you. Another thing we heard on Twitter, and this one's specifically from Laurie on .TECH. I think probably a whole bunch of people mentioned this is just like this concept of pattern matching, being able to see problems and match them with patterns that happen often. And I think this is something that will probably come with time. Being able to just look at what happened. Do we change any code? Do we change any logic? This this problem tends to happen when this thing happens? So this slowness tends to happen when you incorrectly use a sink await. And I think that is something that will unfortunately only come with time, but just sort of logging it even just listening to like the Halloween horror stories when we did. You should be logging all of those horror stories in your head. And knowing Okay, this is what happened, or this might have hopefully, this is what might happen. And here's how we can go ahead and prevent it. mort. I think the next thing is obviously one thing that we often almost joke about as developers but is that developers good developers use Google or you know, the internet to solve their problems. And there's really a very real thing. It's not just like, Oh, we don't know what we're doing. So we Google everything. It's that typically, when you run into an issue that you've never had before, the first inclination is to gather information about what the issue actually is. And getting good at understanding Google and maybe how to do more advanced searches on Google is a real good way to get better at bug solving. No, I actually did a test test drive. And some people might not agree with this. But I did a test run of duck duck go for a while to see if I could like live off of DuckDuckGo. And I found the search results for programming issues to be significantly worse on DuckDuckGo. So much so that I found myself always going to Google anytime that I had a bug and I wanted to Google it. Because the DuckDuckGo results, were just not getting me what I needed. I know DuckDuckGo people are not gonna like me saying anything bad about that. But that's honestly just the way it was, for me my experience. And so when you understand how to search for what, on Google, or even within GitHub issues, or things like that, when you understand how to search for issues or bugs, you'll find hopefully, people that have answered the problem, or at least ran into that same problem. The worst, one of the very worst things in the world, is when there's only one Google result with your bug. And somebody responds with fixed it. - -21 -00:46:34,230 --> 00:46:35,580 -Unknown: They fair how they fixed it. - -22 -00:46:36,210 --> 00:46:42,060 -Yeah, you solve a bug in your in a GitHub issue. Always leave another comment to say how you fixed it, because that's a big one. - -23 -00:46:42,630 --> 00:47:30,330 -Wes Bos: I can't believe sometimes I go back to issues I've posted on Google, like, two years ago, and there's like, 400 thumbs ups on it. And like, I'm good. Like, I clearly have helped thousands of people by taking two seconds to post it. I think getting good at googling is, is key. Honestly, like I'm such a good Googler often my wife will bring problems to me and say like, I can't find anything online, can you? Can you Google it? And I don't know why I'm so good at googling, but like practice being it, like, practice, like like, what are like what are some tangible things when one thing, one tip I have for JavaScript development is, if you can't find anything on the error that's happening. First of all, when you paste the error, take out any thing that's related to you. So yeah, you might have like an error that's like - -24 -00:47:30,330 --> 00:47:33,060 -Unknown: a path, remove your system path. - -25 -00:47:34,140 --> 00:50:18,630 -Wes Bos: Remove, remove your system path, or try to qualify it with like add react to the end or add whatever framework you're working on that we'll focus it in, because often you'll hear like, cannot read property no of undefined or cannot read property, Scott of undefined. And that's the most common error out there. So you have to like narrow it in. Another one is open that open it up in another browser and search that error message. Because often the error message might be slightly different in another browser, and searching for that will hit bang on hit somebody, maybe somebody had the same problem. They were using Firefox and you're using Chrome, then you can sort of narrow in on that. Yeah, use use quotes to when you're searching, like if I'm having a next .js issue all do quote next .js quote, and then that way, it tells Google that this word needs to be found in the in the results, right? Yeah. Or you could wrap a sentence in quotes, maybe the bug right accounts not found, I guess that's not a good one. Something not found is not typically good to search because bug is itself that is not found. That's not the problem. That is the result of the problem, right? So you want to be googling the problem itself, not necessarily the results of the problem. And on the flip side, make your search more generic as well. So I had a problem with our fog lights the other day, and I was searching for 2015 BMW, and I couldn't find anything. So I figured out okay, like, well, this is the same car as like four other years, the same problem would occur on all four years. So I found out the name, like the model number for our car, which was f 15. And then I searched f 18 Foglight issues. Yep. And I found that problem and it was someone who had a 2016, right. And I was like, okay, like, good. Like, I'm glad that I could I could step back, I could zoom out a little and be able to find somebody with the same problem. Even though it wasn't the exact same car it was the same problem. also changing up the word itself for a synonym also works because we had like, a thumping sound coming from our fridge water thing when you push the fridge Up, up, up up the Yeah, I just changed the word. You know, Maytag fridge, water thumping, nothing may tag the fridge water, chucking whatever I was just trying to like, find different synonyms and sure enough, I found the exact Issue under I forget what the word ended up being. But it was like a rumble word or something like that. And I found a YouTube video of a guy showing exactly how to fix the problem. It's like just by using a synonym from what I'm thinking, totally blew up that Google shirt search and actually led to the solving of the problem. That's such a good point. Use sentiment. Okay, you - -26 -00:50:18,630 --> 00:50:21,120 -Unknown: send it on. Yeah, lots of cinnamon. - -27 -00:50:22,710 --> 00:50:53,820 -Wes Bos: Ah, I think that's all the tips we have here how to get better at problem solving. It's kind of a hard skill to just sit down and get better at. But every single time that you encounter a problem, you should start thinking to yourself, okay, break it down into smaller pieces, read the error logs, figure out what I'm trying to do here. Maybe just make a list of like 10 things you should do when you encounter a problem from this podcast, and then start to go through them. Because honestly, I think that will save you time in the long run. Totally. - -28 -00:50:54,180 --> 00:51:02,280 -Unknown: Cool. So I don't know if I have anything else. I'm sure there's lots of other tips. We will retweet you if you shout us out with some of your sick troubleshooting tips. - -29 -00:51:02,610 --> 00:53:55,860 -Wes Bos: Yeah, honestly, there's so many aliens. I'm just looking at the tweet. I tweeted that thing two hours ago and has 54 replies. Yeah. And it's also great because a lot of these people are like senior developers, who have helped juniors get into a spot where they can be better at debugging, so they know exactly how to how to explain it to somebody. For sure, for sure. Cool. So let's get into some sick pics. For those of you who this is your first syntax. Sick pics are the stuff that we find to be sick could be literally anything that we like. And I use it looks like you have something pretty cool for us today. What is it Wes? I can hear it's a little widget that was actually a problem. So this is the marpac Rome sound machine that I sic picked probably six months ago, something like that. And we've went through all kinds of different sound machines with my family. And we use them all over the place because it helps our kids sleep. And we have such a creaky house. That like if you create the wrong floorboard, it wakes up our kids. So we we have these things running all the time. And it helps our kids sleep and they love it. And this sound machine has such a good bacey sound that doesn't irritate me. And we bought we bought four of them just to have them in like the kids crib and attached to the car seat and things like that. And one of ours or two of ours broke. And I was like, Man, this sucks. Like I said, pick this thing. And I love it. And I'm annoyed that the power button like went in like it basically it looks like someone pressed it too hard. But everybody in the family says they didn't they didn't press it too hard. But the power button, just like push itself in and it's causing it to turn on and off randomly. And a couple of times it made our kids wake up because it turned off in the middle of the night. So I was like, This is annoying. So I contacted the company and they sent me two new ones immediately. Just part of I sent them the receipt and it showed that I bought them and they FedEx me to brand new ones. I had them and a day. So I still stand by this product. I think they're very good. It sucks that that happened. But hopefully they are fixing it. Tech. Maybe I'll I'll report back in six months again, if the new ones have any issues with them. Because it's such a it's got a little battery in it. It's got all kinds of different sounds. It's loud enough. So big fan. Yeah, it's funny. Um, Landon has a noise machine. That's a turtle and it flashes like like kwatak lights, IT projects in sort of under the ceiling as well. It's really sort of awesome. Yeah, but the weird thing about it is this that it doesn't have to like the timer shuts off way too quickly. So we'll put him down for bed. And he loves his little turtle and doing this like sort of Twin Peaks a little like thing. Like sort of and he loves that. And then it shuts off. And you just hear it on the baby monitor - -30 -00:53:56,100 --> 00:53:58,080 -Unknown: my show. - -31 -00:53:59,610 --> 00:56:51,510 -Wes Bos: We got to like run down Oh, I've like gone downstairs like four times in one night to turn the turtle back on because he hadn't fallen asleep. I'm so sorry man. I just wish Yeah, so how long did those things have a timer on it that they're pretty decent? No, they don't they don't have a timer don't have a great they just they just go and I think the battery lasts for eight hours. It's enough. I think it says 12 hours on the listing. It's enough for an entire night sleep with the kids. We have a just constantly plugged in. And then you can just unplug them when you need to go somewhere and you take it with them. So big fan. That sounds dope. Yeah, it's the marpac Rome Mar Pac aro Hmm, I'll put a link in the show notes. It's kind of a weird spelling but cool. Yeah. lindens Turtle takes triple A batteries. So a lot of them to buy a bunch of batteries. Alright, my sick pick is this YouTube channel. And this is a it's like a fitness channel, no fitness channels. There's just a billion of them and you want to go to a real full market. Alright, I just I just clicked the link and started playing hardcore. And so this is a basically this guy isn't doing anything that nobody else has done but his presentation Everything about it is really well done. The whole thing is science based so he does a lot of it's like the the science based working out videos like you know, what is the science say about building a better back with three o'clock what is the scientifically that three back exercises you should do. And he goes through studies and stuff like that, but he makes it really nice to watch. Like, there's nice infographics, there's nice animations, there's not a ton of fluff in this, there's one thing that I really love is that I used to watch this other YouTube channel that was very similar called it was a Jeff nip fired, I think was like the science of something else. And it was all you know, or he'd read out studies and things like that. But the first like 10 minutes of the videos would just be like, you know, lo fi hip hop beef with him like making a protein shake, and like eating his cereal and like running through his day, you're like I don't I don't care about any of this stuff. I don't care about what you get from, you know, 9am to 2pm while you're waking up before you go to the gym, and whatever, because clearly all you do is work out and make YouTube videos. But this this one I found to be super informative. None of the videos feel like they're too long anywhere between like six and 12 minutes long. And it's all science based. He talks about the studies makes it really interesting. And I've just like been really, I probably watched all the videos because they're all great and they don't take too long to get through. And you feel like you can build your own workout plans and stuff from this. So big fan of this channel, link in the description of this video. If you are interested in going to the gym, or going to the gym or almost approaching then resolution time, we're almost approaching that 2020 heading into the future. So a good time to start thinking about this stuff now. - -32 -00:56:52,440 --> 00:56:53,010 -Unknown: JOHN, - -33 -00:56:59,400 --> 00:57:02,370 -cool. Shameless plugs. Whoa, - -34 -00:57:02,370 --> 00:59:08,700 -Wes Bos: Jinx, shamelessly plug my upcoming beginner JavaScript course it's going to be at beginner JavaScript calm. I am heads down, blowing through these recordings of it super excited to get it out. It's going to be at beginner JavaScript calm when it's out, check it out. My shameless plug is going to be the course that is coming out on level up tutorials this month, as is in the last day in November. And that course is going to be on TypeScript and react. And for those of you who have never spent a ton of time with TypeScript or react, I just got done converting the entirety of level up tutorials to TypeScript. So I got a lot of thoughts on TypeScript and react. And if you want to learn how to use TypeScript in react, or maybe you're just curious, this is going to be for people who are very new to this as in, you maybe have never done TypeScript at all. Maybe you've never done TypeScript in react period. Maybe you you're just very curious about why everyone is talking about TypeScript. So this is specifically TypeScript course TypeScript basics, with react, and it's coming out the last day in November, if you want to get on to level up tutorials, head on over to level up tutorials, comm forward slash pro sign up for the year, and you'll get access to this upcoming course as well as last month's course, which was next year nine full stack with API routes, and then the previous month's course, which is on Felton every single course that I make next year so thank you so much for checking that out level up tutorials comm forward slash pro jobs. No, we need is like a intros with that but and his name is Scott Delinski. Yeah. I really liked the basketball one too. That one sounded fun. Yeah. And I've got the blink 180 to one comment. I think we're gonna get sued for that one. We can't do that one. Now open 22 is not going to sue you to show us No, I think it's old enough song. It's in public domain. Isn't it? Isn't isn't blink 100 years old? - -35 -00:59:08,730 --> 00:59:14,250 -Unknown: No, it's owned by its own. I don't think I don't think blink way too will sue us. I think Sony Entertainment will sue us - -36 -00:59:14,250 --> 00:59:23,910 -Wes Bos: and that's because it was. Alright, that's it for today. Thanks for tuning in and we will catch you on Monday. Please - -37 -00:59:25,860 --> 00:59:35,610 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax199.srt b/transcripts/Syntax199.srt deleted file mode 100644 index db907b4ca..000000000 --- a/transcripts/Syntax199.srt +++ /dev/null @@ -1,132 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi ski. - -2 -00:00:25,950 --> 00:00:33,720 -Scott Tolinski: Oh, welcome to syntax in this Monday tasty treat. We're gonna be talking about making courses. So you want - -3 -00:00:33,720 --> 00:00:35,430 -Wes Bos: to make a course Well, you got, you - -4 -00:00:35,430 --> 00:00:50,400 -Scott Tolinski: know, two course masters over here who are going to enlighten you. And that to some things to keep into consideration before you get started. My name is Scott Tillis, gamma developer from Denver, Colorado. With me, as always is Wes Bos. How's it going? Wes, - -5 -00:00:50,400 --> 00:01:15,950 -Wes Bos: I'm doing good. I'm excited about this topic. Because I get all the time people ask me like, hey, I want to make a course Do you think people will buy it like? And the answer is don't just ask me because I don't know. There's techniques. I see it all the time on Twitter as well. People are like, I'm thinking about making a course on X, Y and Z. Will you buy it? And then they have yes or no. And it's always like 100%. Yes. And it was like people vote with their wallets on Twitter polls. - -6 -00:01:15,950 --> 00:03:05,790 -Scott Tolinski: Yeah, it's really easy to click yes inside of that. And I mean, the worst is that when you see like a course that's been completed and released, and obviously took a lot of time to work on and you just know just from looking at it that it's not going to work out well for them. So we're gonna be talking about some of our tasty treats around making courses. Now this episode is sponsored by one of the tastiest sponsors in syntax history, and this is sentry@sentry.io you're gonna want to sign up using the coupon code tasty treat Now, what is Sentry? Well, Sentry is the place to keep track of all of your errors and exceptions. No matter what platform you are using seriously. Any platform you're on, you're working in node, PHP, react, whatever, literally anything, it's going to work with Sentry, and Sentry is going to help you solve your bugs. Now, let me tell you how I use Sentry, I attach each of my releases. Each of my releases within Sentry are tagged to the release name. And it's tagged to a specific git commit. And I have my whole source maps uploaded there. And anytime that I have a bug, I can check out my source maps and I can see exactly where that bug is happening in my code on production. And what release introduced that bug let's say here's the bug, I'm at a not at the office right now I got this bug, well, I can just roll back to the previous release. Because I know that's going to fix the problem. And Sentry gives me the ability to fully understand that. So if you run any kind of software that other people are using, you're gonna want to check out century@sentry.io again, use the coupon code tasty treat all lowercase all one word, and you will get yourself two months for free. But But uh, but yeah, you're gonna want to do that. Because Sentry is one of those things that we live over here. So check it out at Sentry dot i O. So let's get into it was. - -7 -00:03:06,359 --> 00:04:04,920 -Wes Bos: So the first thing I want to talk about is just validating and gathering ideas about what you want to build a course on. Because you have maybe you you want to build a course and you're you're an expert at something. But first, you need a couple ideas. So first, what should you build your course on If you still don't have an idea? First, you need to be like pretty good at something you need to be an expert or somewhat close to being an expert on it. You need to know a lot about it. You need to be passionate and excited about it. Because you certainly could go and make a course on like Excel tricks. Have you seen that YouTube video of the guy who is does competitive Excel? No, but that sounds awesome. That sounds great search for on YouTube. I'll put the link in the show notes. It's called the Marco Ma, KR. Oh, our macro is his name. It's like a competitive gamer. But it's just talking about like all these like hilarious things in it. God, this - -8 -00:04:04,920 --> 00:04:09,120 -Unknown: looks hilarious Excel stream highlights. Oh my god. - -9 -00:04:09,899 --> 00:05:12,450 -Wes Bos: And he talks about new releases at balmar con. And he's like, honestly, I think that Microsoft is going the wrong way it needs to get his head out of the water and and stop. Oh, man, I can't even describe how hilarious This is. So that's a bit of an aside, you need to go and watch that after this podcast. But you basically need to teach what you know, and you need to be excited about it. Because you certainly could go in the direction of something like an Excel course or something like I don't know something that is well needed, but not exciting. I don't think that that will ever result in a very good course. So once you have a list of ideas of things that you might possibly want to make a course on and I say list of ideas because you might have an idea of like, I'm really good at CSS, SVG, react, view Angular Being able to write a testing course or something like that. And those are probably good ideas, but you don't know if people are going to be receptive to them. So you have to go and validate those ideas. - -10 -00:05:12,569 --> 00:06:34,320 -Scott Tolinski: Well, even before validation, I do want to stand a little bit more on the, like teaching what you know, things. Because when I broke into level up tutorials, like when we first started doing that, I first I want to emphasize this, this things that you're excited about. Because the very first tutorials that I tried to do were on Adobe Premiere. And sure I knew Adobe Premiere, but I wasn't necessarily excited about it. At that time, I just felt like this is a thing I knew really well. So it would be easy for me to do tutorials on Meanwhile, I was working all day as a web dev doing Drupal stuff. And it wasn't like Drupal was that much more exciting. But I was in it at that moment in a way that was more exciting to me at that current moment than premier was. And so sure enough, my premiere tutorials were total garbage, because I wasn't really that into it, where every single day I was coding in Drupal. So one of the things that really broke through my courses into actually being good was to take something that I was working in every single day, and maybe not enough, something that I was an expert in. But something that I was so excited about at that time, and so into at that time that it was going to translate correctly into that course. So that to me was like a big thing was like, What are these topics? Right? Was it sass, Drupal, HTML, CSS, those were the things that I was really excited about that Adobe Premiere, - -11 -00:06:34,349 --> 00:08:04,050 -Wes Bos: right? Beautiful. That's such a good tip. So talking about validation, you basically need to throw out a bunch of content and see what sticks. And this is from a lot of people, they are kind of bummed to hear this because they just want to create a course right out of the gate, make a bunch of money off of it or sell it. And first of all, you need a whole audience to market to that that's a different show. We're not gonna talk about that here. But you need to like throw a bunch of ideas and see what sticks. So whether that's a series of YouTube videos, a series of blog posts, reading StackOverflow, going to Twitter, going to meet up see what people are having, having trouble with, basically making a bunch of content, whether that's a YouTube blog posts, Twitter tips, and after, I don't know, a couple months of putting out consistent content, something is going to spike up and for Scott, that was your sass course, right? It's something just like, wow, this is just a super needed right now. For me, it was a bunch of blog posts on Sublime Text, and they did super one. And even now, if I want to know what we should do podcasts on, it's often just like, I have a two little Twitter tip. And I either get tons of questions about it, or people are just like, wow, I had no idea you could do that. And I'm like, that's probably something we should do a blog post on because or syntax on because it's well needed in the space. So basically, you need to know that it's going to be popular, the numbers need to be there, before you go ahead and spend a whole bunch of time on creating something that you're not necessarily know will do. Well, - -12 -00:08:04,199 --> 00:08:30,870 -Scott Tolinski: can we talk about? If I did I wonder if you'll pick up on this? If If I say what? I don't want to give away the answer. What product in our space that has come out in the past year and a half or so do you think has done the best job of this? I wonder if you can pick this up? Because I have one in mind that I think is very obvious. We talk about it somewhat often on this podcast. We talked about it in the design episode of the podcast. - -13 -00:08:31,169 --> 00:08:40,620 -Wes Bos: Oh, the Adam and Steve's design. Yeah, so refactoring UI. Yeah, refactoring UI. Let's just talk about how that worked. Let's - -14 -00:08:40,620 --> 00:08:43,400 -Scott Tolinski: talk about it. It was good. It was very good. So - -15 -00:08:43,619 --> 00:09:40,740 -Wes Bos: they have Adam within and Steve sugar have this thing called refactoring UI. And day one by for me, that's for sure. It's a book on how to become a better developer from, or sorry, how to become a better designer from a developer's point of view. And like, how did they know that this would do? Well? Well, Steve was just posting Hot Tips to Twitter. Yep. And they were runaway success hot flames hot flame, and then they they got together with Adam and Steve got together, put out this book and like, that thing has done so well, and is so well praised by everybody in the community. And they started like, did they just know that right? And like, how do they know that they needed a design book for developers? Right? It's because they didn't just like make it and launch it. And it's like, wow, who knew? They knew they for sure know that this was gonna do well, yeah. Because of all of the stuff leading up to it. - -16 -00:09:41,129 --> 00:11:11,820 -Scott Tolinski: Totally. I, the moment I saw that they were doing a book literally, the moment I saw that book, I was like, that's gonna do well, like that's gonna be that's gonna sell gangbusters because you just knew that it was already validated. It was so validated that everybody outside of it probably couldn't tell that that idea was currently validated. I think that's an important thing to work. You know, another thing people need to verify if people are going to get onto this on board with your work, they need to verify the quality of your work. And if you're not West boss, right? How are people going to verify the quality of your work? It could be through validating it through things like this, right? By putting out those Hot Tips, right? They know that these tips are already going to be good. Or maybe you have a YouTube series that's like for free as like a prerequisite or a precursor to this right. And you can see what the reaction to the content is. It could also serve as a validator or a legitimize for your work. I love the word legitimize by the way. It's, for those of you don't know, a member of my B boy crew and I came up with this whole concept of legitimizes, which is just really validators. Right? Like, what are the things that make you legitimate, right? Like, my wife is a doctor of psychology. her PhD is a legitimize her, she could do all sorts of things that people without a PhD couldn't do just because she has the that, that certification, right, that level of Forgive me for using this word again, but legitimize her right. And so what are the legitimizes that your content has? And how can you show those off? and make those known for people? - -17 -00:11:11,970 --> 00:11:40,530 -Wes Bos: Yeah, it's funny you say, if you're not Wes Bos, but like, even mine, I don't give previews of my course. I just have entire free courses. Yeah. And that's my, that's my legitimate Iser Well, there's there's other things as well, that I used to be legitimize there, but that's a big one where people say, like, I don't know, if I'm gonna like it or not, like, Well, go take a couple of videos of the free course and come back and see if you really like, the way that I teach things, or the way that I describe things or the way I say JavaScript. - -18 -00:11:42,060 --> 00:12:05,760 -Scott Tolinski: I have I get I do the first five videos of all of my courses. As far as a preview. That way, anybody who can come, you know, you're curious about a specific course, you can at least get up and running. Yeah. And you can do like the first five videos and say, Okay, I would like to continue this, or, you know, maybe no, this one isn't for me, you know, just to give the the users that quick little view into the course, - -19 -00:12:06,239 --> 00:12:59,220 -Wes Bos: you may be asking like, okay, less, like, what do you do now? Okay, to figure out why Yes, I don't see you writing blog posts every single day to validate what you want. And like, one big thing that I do is I'll often send an email out to my entire email list and say, like, hey, like, what do you have in trouble with like, before my, when I was thinking about making a beginner JavaScript course, I sent an email out to like, 300,000 people and said, Hey, like, what, what's hard for you? Like, just tell me what's hard for you to learn in JavaScript? What are you struggling with right now? What do you feel? You're not that good at? And I got thousands of emails back from people and I read every single one of them. And both, that's good marketing copy, like you take it right out of the Is it the horse's mouth? Is that is that the saying? You take it right out of there, you get - -20 -00:12:59,220 --> 00:13:07,170 -Scott Tolinski: it from the horse's mouth, I don't think you take things away or take things out of the horse's mouth. That's a good way to lose your arm, right? There's big teeth, - -21 -00:13:07,620 --> 00:13:31,230 -Wes Bos: you get it straight from the horse's mouth, where what are people struggling with? And they tell you exactly like what it is. And then you could just turn around and say, Okay, good. I've, I've literally heard from thousands of people what they're struggling with. Now, let me take that and turn it into something that is easier. So that that's another great way to validate as well as you just have to talk to a lot of people. And don't ask your friends. - -22 -00:13:31,319 --> 00:13:34,650 -Scott Tolinski: Yeah. Hey, should I do this? Yeah, man, go for it - -23 -00:13:34,680 --> 00:14:01,230 -Wes Bos: totally feel like yeah, I would totally by that, yeah. That that's why we're bagging on tweeting out, should I build this thing, because you got to ask people to commit with their time with their money with their attention. And that's how they, like if somebody sent me like a, like, it probably took them 20 minutes to write some of these emails. They clearly care enough about learning JavaScript, if they take 20 minutes to type up an email to me and send it over. - -24 -00:14:01,380 --> 00:15:46,020 -Scott Tolinski: Yeah, you know, another thing is, is like, you have to pay attention a little bit to what some of these issues are, like, what's popping off right now. Okay. You know, this is popping off. I see in maybe a couple of Reddit posts here, check out this really cool thing that I did, check out this cool react project or check out this cool thing. Oh, you know, for instance, I knew that my spelt the three course was was going to work specifically because at the time I made it, there was a lot of chatter about spelt around people were really starting to notice how simple it was. And I myself was really enjoying it. So I took that opportunity to say, okay, a lot of people are talking about this right now, right? If I did the same course, for you four months later, who knows? But if I did that course right now, I know that there is conversation happening around this in a way that there may not be at a given point or wasn't maybe even before I have a whole List of like, you know, 10 courses that I could make right now, they're just sort of sitting there in my Kanban board, right, just like just just hanging out there in my hopefuls, and I just kind of keep an eye on them. And, and just, if something starts to really tick and move a needle a little bit, I'll start to become a little bit more interested in this particular topic. Or if I I personally have, like, the subscribers on my channel get to vote, right? for potential series, their votes don't Yeah, like one to one, determine which ones I'm going to do. But it definitely gives me a little bit of that validator to, you know, what are people who are currently on my platform interested rate right now. So just paying attention to what people are talking about, and what's popping off is a big thing as well. - -25 -00:15:46,320 --> 00:16:52,650 -Wes Bos: I love it. Um, anything else to put out, the last one I should say is like, collect people's email addresses. So what I did on the bottom of all of my blog posts about Sublime Text, as I said, I'm launching a book, sign up to get a coupon. And I had, like, 2000 people enter their email addresses in over a year's time. And like, to me, if somebody's willing to give you their email address, developers don't give their email address for anything. And if someone's like, honestly willing to give your email address for something like that, that is like payment enough for me, because it shows that they really want this thing and they don't want to miss it. Right? Totally. So start collecting an email address, or just like, you could you could honestly, this, this sounds a little bit weird. But you could probably put up three or four different course websites, and put, make a couple little practice YouTube videos and say, Hey, I'm building a course. Yeah, here's just a couple of videos from it. And make sure you sign up to get the next couple and then see which videos get the most views and which which websites gets the most signups it's all about testing stuff. It's almost like a B testing. Yeah, yeah, I - -26 -00:16:52,650 --> 00:17:34,920 -Scott Tolinski: do that with all my emails. And each time I send an email out, I always a B test the titles of the email, and I'll do two titles. And then MailChimp had I'm sure other platforms do but you just say I want to a b test the title. And then you have two different titles, MailChimp sends out a test run of like 25% of your list or something like that, whichever title gets the most amount of clicks, it then sends that title out to the rest of your audience. But it's like sort of the same thing. You're, you're validating something by giving them multiple options, and then seeing which one is the most popular. I think that's really a cool idea. And if you had a template for a course, and you could just, you know you had the ideas, it wouldn't be too difficult to maybe swap out some of those ideas and see which one is more popular. That's a pretty cool idea. - -27 -00:17:35,190 --> 00:18:19,020 -Wes Bos: So that's it, let us know if you like this, because we could certainly do more hasty treats on marketing and reaching people and like, to me, it's it's almost kind of too bad that launching, of course requires all of this extra work, because and let me explain is that, like, I wish that people who were experts in a certain technology could just make a course. And they're really good at explaining it. And they're really good at marketing it and they are really good at pacing it and but unfortunately, there's just like all this other stuff that comes along with also being an expert at the topic. So I don't know I got questions about this stuff all the time. And let us know if you want to hear any more about marketing or recording and things like that, - -28 -00:18:19,230 --> 00:18:19,980 -Unknown: where - -29 -00:18:20,600 --> 00:18:24,560 -Scott Tolinski: we're approaching our 200th episode Wednesday. Oh is our 200th episode. - -30 -00:18:24,750 --> 00:18:34,890 -Wes Bos: It will be already recorded by the time you listen to this one. But it's gonna be amazing. Make sure you sign in. Make sure you send Scott flowers as a congratulation. - -31 -00:18:36,350 --> 00:18:41,490 -Scott Tolinski: toss him on the whatever fictional stage just buy some flowers and toss him at a stage in your imagination. - -32 -00:18:41,760 --> 00:18:49,140 -Wes Bos: Yeah, or just tweet a flower emoji at syntax FM and then do it. Thanks for tuning in. Catch you later. All right, - -33 -00:18:49,140 --> 00:19:03,510 -Scott Tolinski: catch you later. Please, please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax2.srt b/transcripts/Syntax2.srt deleted file mode 100644 index 2d82c3ffb..000000000 --- a/transcripts/Syntax2.srt +++ /dev/null @@ -1,416 +0,0 @@ -1 -00:00:03,810 --> 00:00:09,090 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:10,950 --> 00:00:47,579 -Wes Bos: Welcome, everybody. Welcome to the second episode of The syntax podcasts, we're super excited to be talking about web RTC and get user media today. And essentially what that is, it's actually not all that new. However, Apple iOS 11, recently released or it's, it's about to be released. And that was that was sort of like the last missing link. And we're going to be talking about how to access your webcam, how to access your microphone, and a new way to sort of send data from browser to browser, which is called WebRTC. It sort of goes hand in hand with with get using media. So I'm going to kick it off. Hello, Scott, welcome. - -3 -00:00:47,759 --> 00:00:49,020 -Scott Tolinski: Hey, how's it going? How - -4 -00:00:49,020 --> 00:00:51,030 -Wes Bos: you doing? What are you working on these days? - -5 -00:00:51,540 --> 00:01:18,540 -Scott Tolinski: Yeah, working on a bunch of improvements, really, to the level up sites, just upgrading everything to latest versions of Meteor to take advantage of some of this sweet code splitting and bundle packaging they got going on right now. Changing up routing, moving off of a sort of an older Meteor router to react router for throwing in some server side rendering in there, just basically a bunch of just nice little updates about you. - -6 -00:01:18,980 --> 00:02:47,520 -Wes Bos: Awesome. I just finished up the big coupon rewrite of 2017. I previously only had fixed amount coupons. And then I also didn't have the ability to restrict a coupon by by product. So what was happening is that like, sometimes I would have these like really big coupons for people who needed like 50 bucks off of the team license, because for whatever reason, they needed to bring it down by one person. And people were finding them just by like guessing what the coupons were and then using it so I had a couple people checkout by with like a $2. So I, I rewrote the whole thing, which is pretty cool, because essentially have the coupon and then I have like all these different levels of restriction. So I can restrict it now by by an entire course like react for beginners or by a product, which is like react for beginners master package, or only a teen license. And then I can also restrict it by by time, I can restrict it by either being a fixed amount or percentage off. And then I can also restrict it by country, which is really cool. I just rolled out these, what's called parody purchasing power, where if you're coming from one of the countries around the world where your buck doesn't go as far you can now buy it at something, it's it's still, it's a little bit more affordable for you. What from whatever country you're coming at. So pretty, pretty stoked to finally get that out. - -7 -00:02:47,639 --> 00:02:54,150 -Scott Tolinski: Yeah, I mean, like the benefits of rolling your own platform, right? Yeah, exactly. Well, freedom. - -8 -00:02:54,930 --> 00:03:12,630 -Wes Bos: It's true. Like some people ask me why I don't have like you use like an existing platform. And it's because of stuff like this. Whenever I have an idea like this, I can just go right into it and start building out my own thing. There's no way I would be able to have something that custom with an existing platform. - -9 -00:03:12,750 --> 00:03:13,950 -Scott Tolinski: Yeah, totally. Yeah. - -10 -00:03:13,980 --> 00:03:17,220 -Wes Bos: Well, and you had your first father's day yesterday. - -11 -00:03:17,310 --> 00:03:28,889 -Scott Tolinski: I did. Yeah. So first, I know, little guys a month old today. So it was great. Ya know, just hung out did some decent you know, yard work stuff and felt filled very - -12 -00:03:28,950 --> 00:03:31,980 -Unknown: dad ish. You know, the most dad thing ever. Yeah, yeah, totally. - -13 -00:03:31,980 --> 00:03:45,810 -Scott Tolinski: Yeah, I did everything but like cook steaks or something other good stuff. That's awesome. It was great. And it's a it's been a wild month and feeling very, very, very just blessed and happy. You know? - -14 -00:03:46,130 --> 00:04:10,230 -Wes Bos: Yeah. Awesome. That's good. We should we should talk about like parenting. I have two kids as well, that are nine months and two years old. Right now, we should do an episode on what we've learned from parenting or whatever. There's this like, Cool thing that I like to call like the parent effect, which is like, when you have kids, it sort of kicks into high gear and you really start getting shit done. I noticed that at least when I started having kids. - -15 -00:04:10,260 --> 00:04:28,800 -Scott Tolinski: Yeah, I'm feeling that I'm definitely feeling it. That extra dad's strength in my work every day. Like, you get this little boost, like yeah, you really got to make this work or else you know, like, yes, there's the consequences are much greater. So yeah, yeah, absolutely. Yeah. What's going on in your life? - -16 -00:04:29,820 --> 00:06:09,630 -Wes Bos: Not a whole lot. I'm just getting ready for a whole bunch of vacation. I got something like four weeks of vacation plan the summer nights a whole bunch of cottaging or lake house or cabining, depending on where you're you live in the world. But we just rented a whole bunch around around the states and here in Ontario, so Oh, cool, excited to take some time off. So let's kick it off. We're going to be diving into web RTC and get user media so um, I thought that I would just sort of like kick it off and Talk about what the two things are. And then we're going to dive into a whole bunch of examples of what it is where we've used it in the past and, and whatnot. So web RTC is, stands for real time communication, which essentially is a new protocol, it's a way for you to talk from browser to browser without having to actually have a server in between. So if you're doing something that is needs to be real time, like video chat, or audio chat, or you're doing something that is very bandwidth heavy, again, like video or audio chat, it doesn't necessarily make sense to go upload your video to a server and then have the server relay that over that's, that's too heavy. There's too many points of failure there. So what WebRTC aims to do is that you have this new protocol, which you're allowed to talk from client to client, you can talk browser to browser, you still do need a, what's called a stun and a TURN server, which is just a server that sort of like connects the two, it's like plenty of fish for servers, where you can just like, I don't know if that makes sense or not. But - -17 -00:06:10,320 --> 00:06:12,210 -Scott Tolinski: what is what is plenty of fish. - -18 -00:06:13,260 --> 00:06:42,510 -Wes Bos: Right? That's a dating website where it connects to eligible people who are interested in courting each other, right. And in our case, we have the the browsers that need to talk to each other, and then the the server's just figure out, like, I don't know, router levels, and networking and traversing all of that networking and IP addresses to get a solid connection between the two. I don't know any questions about that, or any comments about that? - -19 -00:06:42,600 --> 00:06:58,440 -Scott Tolinski: Yeah. So uh, with the the sun server, the TURN server, so those services that you typically have to hire out pay for rent as a sort of a server space, like you would a typical server virtual server? Yeah, I think - -20 -00:06:58,800 --> 00:07:20,790 -Wes Bos: from from what I've done before, in the past, is that I've used a public one, just because you can obviously host your own. But I just don't understand how it works. It's it's a very low level networking sort of things. And I'm assuming that if you look, you could find some service that will do that handshake between the two, it's, it's very little overhead. - -21 -00:07:21,000 --> 00:07:28,440 -Scott Tolinski: Yeah. So if you're doing a more than a hobby project, you'd probably want to roll your own or use a service or is that? - -22 -00:07:29,340 --> 00:07:47,670 -Wes Bos: I would, I would, I would say you probably could get find something again, I haven't done it. In a couple years. When I was initially doing it. It was like a little, I think it was like a Python server you had to get up and running. So you could probably find some existing package that will get you up and running with a low servers. Cool. - -23 -00:07:48,180 --> 00:07:55,800 -Scott Tolinski: Yeah. So yeah, let's talk a little bit about, you know, what can you do with web RTC and get user media? - -24 -00:07:56,010 --> 00:08:24,870 -Wes Bos: Yeah, so the the get user media end of it is the is sort of a new browser API. It's not new, it's been around since 2010. I look back at my initial examples, it was in 2010. And it was pretty cool, because you could actually access the webcam and the microphone from your actual browser and get using media is allowing you to access media from the user. And obviously, that's going to be webcam and audio. But it could really support any sort of input device from the user. - -25 -00:08:25,110 --> 00:08:58,350 -Scott Tolinski: Yeah. Go ahead. No. And so like, once you get that, that that video stream, right, you get that webcam stream, I mean, you're not limited to just here's the video stream, right? You can, you can throw it into a canvas, you can, you know, take screenshots, you could manipulate that Canvas. So the possibilities of just having access to the webcam alone, are just like pretty endless. If you're, if you think about it creatively enough to just, you know, take that information, you're just working essentially with a, you know, matrix of pixels really. - -26 -00:08:58,770 --> 00:10:29,580 -Wes Bos: Yeah. So what happens is that, when you ask the user for their webcam, or their audio, they will give it to you. And then the browser will sort of just dump what's called a blob on your lap. And that blob will, you can then pipe that into an audio element or video element. And then the sky's the limit, you can take screenshots of it, you can take the raw data out of the video object and dump it into a canvas, you can take pictures, we'll talk about some some real examples of stuff that we've worked up in the past. But essentially, by having these new API's in the browser, they let us do things like slack is now putting out sort of a Skype competitor, or Google Hangouts competitor. And they can do that because all of the stuff comes for free in the browser with using WebRTC. Another really cool example that I was super excited to see is web torrent. So if you know how BitTorrent works, it's there's no centralized system. There's essentially you get a torrent file And the torrent file points towards a tracker. And then the tracker will will connect you with other people that also have that bit torrent file and you can send data directly to that person or receive data from that person. So someone said, Well, that sounds like web RTC. So they've made web torrent, which uses web RTC, which again, is just a protocol for sending data. And then you can run a bit torrent client in your browser by sending data back and forth via a WebRTC. Connection. - -27 -00:10:29,850 --> 00:10:30,360 -Unknown: Yeah, - -28 -00:10:30,410 --> 00:10:34,350 -Scott Tolinski: that's a, that's pretty brilliant. When you think about it. - -29 -00:10:35,070 --> 00:11:03,480 -Wes Bos: It's, it's amazing, because if you think about like, like, if somebody were watching, like, even my courses, I don't do this, but I've thought about it is that if you're watching one of my courses online, you could also be acting as a seed for other people that like you just watched two minutes of it. Now, you could send that two minutes to somebody else, obviously, and be it can't just use up everyone's bandwidth, but I'm pretty sure that's how Spotify works as well, by saving a bunch of their bandwidth. Oh, really? - -30 -00:11:03,960 --> 00:11:05,580 -Scott Tolinski: Yeah, that's pretty wild. - -31 -00:11:05,879 --> 00:11:15,510 -Wes Bos: Yeah. Um, so let's talk about some examples of stuff that we've done with with WebRTC. In the past. - -32 -00:11:15,749 --> 00:13:46,950 -Scott Tolinski: Yeah. So you know, I came into web programming through actually, originally through I was a music major in college, and one of my first classes was this music programming class. So my initial introduction into programming was through music and video programming. And, you know, you were making things like like video editing software, vj stuff to maybe have videos live, manipulated by audio and stuff like that. So that's initially when I came into web stuff, that's sort of where my brain was. So what's the way that the way that I've always thought about this video stuff is what like, what you have access to the video stream, you can just it your your possibilities are endless, really. So one thing that I've been wanting to do for a long time as a as a dancer, is when you perform a you dance or something like that, it's, it's not often that you want to essentially see yourself while you're doing it, you maybe want to watch yourself in the mirror, but you want to see what it looks like. So I created this, what I call a time machine mirror, which actually records any given amount of time, I haven't tried it over 30 seconds, I'm a little afraid of doing it over 30 seconds for the the buffer essentially will break or something like that, because it's a lot of information. But really, what you're doing is you're recording a given amount of time constantly. So constantly, your recording in 30 seconds spurts. And then the next 30 seconds plays back the previous 30 seconds spurts. So that way, you can treat this as sort of like a mirror that's showing you 30 seconds ago. So basically, I can go out and I can do some sort of a dance performance. And then I can come back to my computer. And I can watch it without ever interacting with my computer without touching anything without ever recording anything. So essentially, what I'm doing here is I am I'm opening up with get user media, I'm taking the audio, or I'm taking the video as a blob. And with sort of a set timeout, after 30 seconds, I'm pushing that data somewhere else into a buffer in which I'm going to be out playing it again, 30 seconds, but at the same time, I'm still recording those 30 seconds. So it's essentially like you constantly have one variable, that's the stored data the previous 30 seconds, then you have another that's essentially the current data coming in, it's allowing you to essentially see back in time, 30 seconds ago. - -33 -00:13:47,310 --> 00:13:52,530 -Wes Bos: That's pretty cool. And, uh, do you do anything with those files after 30 seconds, or they just get garbage collected, - -34 -00:13:52,560 --> 00:14:09,180 -Scott Tolinski: they get garbage collected, okay. And I thought about saving them, but you know, and the reality is, it would be cool. Maybe if you had in that 30 seconds of time, like if you did something really great. You could always just throw a download button on there. And in pop that out as you know, an mp4 or whatever. - -35 -00:14:09,780 --> 00:14:30,570 -Wes Bos: Yeah, so there's there's another API pass get user media and that's called media recorder and media recorder will will take a stream which whether it's I believe they can do a screen capture, or you can do like hot off your your camera. And then you can actually save that off to a webcam or mp4 or something like that. - -36 -00:14:30,690 --> 00:14:35,880 -Scott Tolinski: Yeah. And I'm actually using the media recorder to have the 32nd old - -37 -00:14:35,970 --> 00:14:37,170 -Wes Bos: Oh, are you okay? Yeah. - -38 -00:14:37,170 --> 00:14:52,500 -Scott Tolinski: Cool. So that's that's essentially how I'm storing the data. Right? So it's coming in I'm using media recorder for the the current blob, right that's coming in. And then I'm, I'm starting it essentially is just like a standard video playback. 30 seconds later. - -39 -00:14:52,530 --> 00:15:35,250 -Wes Bos: Yeah. That's pretty neat. There's, um, there's this really cool app. Electron app electron is sort of like the They took Google Chrome and made it so that you can record desk or you can do desktop apps. And things like slack and whatnot are built in in atom. And somebody built this thing called cap k AP, it's at get cap Co. And it allows you to just record your audio and parts of your screen. And then it will kick it off to an mp4 on your desktop. And it's really neat, because these apps used to be really hard to actually get and you had to pay for them. And someone just went ahead and built one with HTML, CSS and JavaScript, using these browser API's on the desktop. - -40 -00:15:35,460 --> 00:15:43,410 -Scott Tolinski: Yeah, and it's brilliant. Because you get, like you said, you get it for free. It's a proprietary system that you have to create from scratch. It's brilliant. - -41 -00:15:43,800 --> 00:16:03,360 -Wes Bos: It's true. It's you think about like how much how much engineering went into building something like Skype, where in the browser, it comes for free, including, like, if you have, if you don't plug in headphones, and you get like that feedback, the browser automatically cancel that out for you. It's pretty neat. - -42 -00:16:03,450 --> 00:16:14,070 -Scott Tolinski: Yeah. Right. And I'm sure that bit of logic is that I'm sure that that took quite a bit of time and quite a bit of money to create and things like Skype. So yeah, yeah. - -43 -00:16:14,850 --> 00:16:16,200 -Wes Bos: It's, it's pretty sweet. - -44 -00:16:17,610 --> 00:16:19,860 -Scott Tolinski: You've been working on a security camera. - -45 -00:16:20,009 --> 00:19:20,300 -Wes Bos: Yeah, it's I actually did it quite a quite a long time ago. But a couple of maybe six months ago, I actually updated it. And when I was living in a rental up in Toronto, well, what happened is that I would get packages to my delivered and I was my office was in the back of the house and the, you know, delivery people, they like knock, and then run away, and you have to like, take a bus to go get your package. So what I did is, at the time, when when get used to media just came out, the very first browser to support it was opera. And this was before opera merged their their engine with Chrome, so it was just opera. And a cool thing about that is that opera on Android already did it as well. So what I did is, I built this thing, where I would take the take the hot feed off the camera, on my phone or on my on the desktop, and then I would pipe that feed into a video element. And then every 200 milliseconds or so I would take a screenshot of the video into a canvas element, because that's if you want to work with your actual data, you got to put it into a canvas element. And then when you have something in a canvas element, you can pull out all of the pixels, it's actually pretty cool. What happens is every single pixel of the picture, you get four values, the red, the green, the blue and the alpha values. So you just get this massive array of millions and millions of pixels. And with that information, what I was doing is I would take a screenshot and then take another screenshot. And then I would just I'm sure this is probably the worst way to do it. But I'm sure there's better ways, better algorithms, but I would just do like a massive diff. I think I use like lodash diff or whatever or you some, some algorithm out there that would like check how different the two arrays were. And then if the two arrays were more than 30% different or 40%, you can set the threshold, then that's that's motion detection, right? You take a picture, you take another picture two seconds later, if they're different enough. That's motion detection, right. So what I did is I built up a client, which was this thing that took the pictures and diff them, it was funny a diff them right on this old Android device, and it it actually ran just fine. And then if there was motion, it would take that image, convert it into base 64, which is sort of like a text representation of an image kind of cool. And then I would send that over a web socket with socket IO to my computer, which was on the other side of the actual house. And then it would show up in this little browser window that I had open, which is kind of like the the other end of it. So it was just a little node server that was communicating between the two browsers then it worked extremely well to be able to record motion between the two and I actually got some pictures of the mailman coming up. - -46 -00:19:20,810 --> 00:20:02,910 -Scott Tolinski: Yeah, and that's like a perfect example of using your your technical abilities or using your, you know, want abilities right, like I want to learn web RTC. So let me just hack away on something. And I think those are the some of the best ways I'm not saying necessarily that you learned web RTC through this but like, that's one of the best ways to learn. Okay, yeah, even better, right? Like learning these technologies when you have a practical goal like that, that you know exactly what you want to come out with. And it's not too far fetched. Yeah, in my opinion, is like the best way to pick this stuff up. Yeah, just come up with something. It doesn't have to be a security camera can be like something totally wacky. - -47 -00:20:03,959 --> 00:20:27,420 -Wes Bos: But get just just build something fun. That's really how I got into it. And my, my, I'll talk about the next one in a second. But that's my whole philosophy towards learning in general is build something fun that you're going to be invested in. Don't build these like silly things where like it works, and then you never actually do anything with it. Because you're gonna push yourself that extra 20%. If if you're actually really, really invested in it. Yeah, - -48 -00:20:27,420 --> 00:22:04,890 -Scott Tolinski: seriously. Yeah. And one of the, and likewise, one of the first things I built was a, this color bar projection app, it worked. So similarly to yours, right? I'm doing just a diff on two videos. But the only difference is I split those videos up into four equal sections. And that turned it into essentially vertical sections. So the way I did it, I've made this essentially a video synthesizer or a projection synthesizer. You You had a projector project for color bars onto the wall, you could actually see a video of this on YouTube, I think you just type in color bars, it might be under my username, I can put it in the show notes. But basically, yeah, it projected four color bars onto the wall. And if someone were to walk into any of the color bars, it was playing a note from a chord. And if you were to run through them, it would play the chord. So you know, you had various people, it was at an art exhibit. So people could walk into it and run through it and make it like an E major chord. So Oh, wow. Yeah, it was like that the apple, you know, the apple startup tone, essentially. But yeah, so really, the whole thing was built on the same idea, right, you have, essentially an initial screen capture of those four bars, you could split those four bars up, because you know, they're, they're widths essentially into four equal canvases. And then you can just do a diff on each one of those. So if any one of those triggers, then you're sending essentially amedee signal, I was sending it to Ableton Live, which was just handling the audio synthesis, because I wanted to use some nicer sounds than maybe what I get out of the browser. - -49 -00:22:06,120 --> 00:22:19,470 -Wes Bos: That's super cool. I just now I'm thinking of so many different ways that you could, you could be doing this with a with a webcam, you could just pull in the data from the webcam and and be running. Yeah, for now algorithms against it. And once - -50 -00:22:19,470 --> 00:22:26,130 -Scott Tolinski: you have all that data, I'm sure there are already video tracking. Have you looked into any video tracking stuff? Yeah, - -51 -00:22:26,130 --> 00:22:33,450 -Wes Bos: that's, that's my next one. Actually. I'll talk a little bit more about that. Cool. But yeah, I don't know, do you have anything left on your, - -52 -00:22:33,689 --> 00:22:46,620 -Scott Tolinski: um, that nothing on that particular but with video tracking stuff? There's, there's some really, really interesting things. I haven't done it in the web. I've done it on some other platforms, with video tracking programming. So I'd love to hear what you have to say. Yeah. So - -53 -00:22:46,620 --> 00:24:43,200 -Wes Bos: back in 2011, when I was I was pretty into this. I was the kind of the first thing that I built was sort of a face detection, where I found this library that does face detection on images. And I thought like, Oh, that's interesting, I wonder if you could just do it a lot, really. So I loaded up this face detection library. And then I figured out how it could just pipe an image into it. And then it would turn you an array of faces, and then each array a face will give you a width and a height and like where the eyes probably work. And it actually worked really, really well. So I just set it up on a continuous loop. Where every it depends on how how beefy your machine was, at the time, it was, I think every 200 milliseconds or So would it be able to or every hundred milliseconds. I tried it out recently on my new MacBook, and it's just buttery smooth. And essentially, what it would do is it would find the faces and then it would take this like, like hilarious like mustache and nose glasses. I just put that right over top of your actual face. So you could just like walk around the actual image, and it would actually detect where your face was. And it was pretty simple, maybe 100 hundred 50 lines of code for me to get up and running. And it was leveraging one of these libraries out there that had been trained to detect actual faces. Now, there's there's much better libraries out there now to do this sort of stuff. And they can do things like detect hot dogs, or whatever. Though Silicon Valley built an app to detect hot dogs in these models just need to be actually trained. What I learned is that these models that have been trained for other applications can also be used on the web. You just need a training library that already knows about faces or hot dogs or whatever it is that you're you're using. Well, - -54 -00:24:43,620 --> 00:25:02,580 -Scott Tolinski: yeah. And you have to imagine that that's how the Hangouts, you know, the Hangouts has all those different costumes they can put on you and stuff like that. Yeah, just like exactly what you're describing. I mean, you have to imagine they're doing some sort of similar just face detection video, finding your eyes, putting Things aligned with what it's finding. - -55 -00:25:03,870 --> 00:25:42,030 -Wes Bos: Yeah, there's a super good. Another thing that I found out that at the same time, and this was using kind of 3d where I would print out these little QR codes. And then as you move the QR code around the actual video, it would detect where the QR code is, and at what angle it had been bent at or angle that. So you could just like, and this is what augmented reality is, is that you, you look through a pair of glasses or you put your phone up in the air, and then all sudden you see Pokemon or, or something on the actual that is overlaid on top of the camera. - -56 -00:25:42,180 --> 00:26:44,100 -Scott Tolinski: Yeah, so it reminds me of one of the things I built was a very similar, but instead of using a QR code, I was just using like a fluorescent sticky note, because this was before QR codes. So I would put the fluorescent sticky note on like a black background card or something like that. The whole thing was just a small little business card size thing. But you could move it around the frame, and it would detect not only the position of the card, but also how close in, in 3d space the card was in to and from the camera. And I was using those values to both modify video as well as audio. So I essentially made I wasn't I didn't realize this at the time, but I made a video. What's the word? airman the theramin? Yeah, I made a fairman with my webcam. And it's dead simple, though. If you think about it, and you have that tracking component, you move it up and down in space, you can control the pitch, the frequency, all of that stuff. Yeah. Yeah, that's amazing. The possibilities are truly endless, right? - -57 -00:26:44,100 --> 00:27:05,220 -Wes Bos: Especially if you know you're doing like, I'm, I'm just like a web developer here, sort of hacking this stuff together. There's actual people out there that this is their career, and they understand how image processing works, and how to detect edges and things like that. No kidding. It just blows my mind. If we can do it, and we're just, we're just like slinging divs on a normal day, bring it - -58 -00:27:07,050 --> 00:27:09,120 -Unknown: out, do they just slang and then is - -59 -00:27:09,180 --> 00:27:59,160 -Wes Bos: that that's actually was another example here is at so in 2010, I did all these examples. And then I did this YouTube video showing, like what I had learned. And it got pretty popular. And that's actually how I got into conferences. O'Reilly asked me to come speak at their first fluent conference, nice. And part of my conference was I built this thing that would take my raw feed. And then I brought a big Burstall board, which is like a big piece of paper. And I did an html5 green screen, where I just put it the green screen behind me, I couldn't find green. So I had adjust the code to detect pink. And then we had the slider RGB sliders at the the threshold. So if the value was between a threshold of this green and this green, then make the alpha channel of that pixel zero, - -60 -00:27:59,220 --> 00:28:03,660 -Scott Tolinski: right? Because you have access to each channel of each pixel. Exactly, - -61 -00:28:03,690 --> 00:28:19,560 -Wes Bos: yeah. And then you can just take it out. And then whatever's behind you, whether it's another video or just like a picture of a beach, it will just show through, which is pretty neat, because you can take the data from the canvas, and then dump it back into another canvas to display it, which is pretty neat. Yeah, - -62 -00:28:19,590 --> 00:28:36,720 -Scott Tolinski: yeah, like I said, possibilities are seriously there seriously. And you don't have to do very much for it to be cool. I mean, if you're getting into the stuff you use, get user media, you pop in your webcam, you make an app that you click a button and just saves a screenshot. That's cool. - -63 -00:28:36,720 --> 00:29:17,850 -Wes Bos: I mean, that's, that's, that's something I couldn't have imagined doing on the web. When I started working on the web. It's, it's pretty neat. If anyone's actually interested in getting started, I've got a whole day on my JavaScript thirty.com series. And we just kind of dip into how do you access a webcam? How do you take it from the webcam into a Canvas? And then how do you start manipulating the pixels? So we talked about a couple different filters where we mess with the RGB values and offset them. So you look like a ghost. Some pretty fun stuff. And what's cool about that is that it's just enough to get you started. And then people usually come back three or four days later, and like, I haven't slept, but this is what I built. It's amazing. - -64 -00:29:20,790 --> 00:29:21,600 -Scott Tolinski: That's awesome. - -65 -00:29:21,900 --> 00:29:35,580 -Wes Bos: Yeah, yeah. So I don't know. Those are just some some really cool examples. Obviously, we're not experts in this stuff. But we've we've both used them and had a lot of fun with them. Anything else that you've got to say about this stuff, Scott? Oh, - -66 -00:29:35,610 --> 00:30:00,900 -Scott Tolinski: really? It's just that's where the learning comes from. Right? I mean, we've mentioned it before, but not being an expert in this stuff is is the best possible way because you just you don't know what's possible. You don't know your limits. You don't know. Anything's limits. You maybe have a wacky idea. You just go and do it. And yeah, that's, that's really, you know, I guess the message I want to get across is just start picking this stuff. Just start trying it. It's a lot of fun. - -67 -00:30:01,350 --> 00:30:40,830 -Wes Bos: Exactly, exactly. And you learn a lot about JavaScript along the way, like, Well, one thing that I, I figured out is that when you grab all the pixel data from the actual Canvas, it's not a regular array. It's like, I forget what the name is. But it's like a special array in the browser for like, very big arrays. And it doesn't have any of the methods on it. So you have to use like a regular for loop, there's no mapping or filter. But it's, it's pretty fun to be able to learn that stuff. And it's pretty amazing that it actually works, given that you have millions of millions of pixels, and you're doing this computation. Many times, sometimes 6070 times an actual second. - -68 -00:30:41,010 --> 00:30:52,890 -Scott Tolinski: Yeah, I mean, when you when you work, only building web interfaces, it's sometimes hard to remember just how truly powerful these machines are at doing sort of rapid computation. So - -69 -00:30:52,920 --> 00:31:13,650 -Wes Bos: I'm excited to try it out on iOS 11. I haven't loaded on my phone yet. But uh, once it is off, I'm definitely going to be trying to build some stuff, I think I'm going to try build like another face detection or some sort of thing with the with the, I think I'm going to build something with either face detection or the security camera. I think it'd be fun to get into something like that. Yeah. - -70 -00:31:13,650 --> 00:31:19,710 -Scott Tolinski: And we also should note that you you need to HTTPS if you're on a live site. - -71 -00:31:19,740 --> 00:31:25,170 -Wes Bos: Yes. You need a secure origin, which Yeah, https or local hosts will work. - -72 -00:31:25,350 --> 00:31:25,890 -Unknown: Right? Yeah. So - -73 -00:31:25,890 --> 00:32:02,850 -Wes Bos: if you're on localhost, right? Okay, if you're on a live site somewhere HTTPS required, or else it's going to blow up in your error queue, not like any further because you shouldn't be able to access your users webcam, unless you for sure are not having that inch intercepted anywhere along the line. In all of my examples, the the data never actually left the browser, except for the security camera one. But every hour, all of these were just the data stays in the browser. But you can certainly send screenshots over to a server or obviously you can you can stream the entire thing over web RTC. Awesome. - -74 -00:32:02,880 --> 00:32:03,960 -Scott Tolinski: Yeah, that's all I got. - -75 -00:32:04,410 --> 00:32:07,320 -Wes Bos: Awesome. Well, it's time for some sick pics. - -76 -00:32:07,350 --> 00:32:08,070 -Scott Tolinski: Yeah. - -77 -00:32:08,100 --> 00:33:23,340 -Wes Bos: So this is the portion of the show where we talk about something, whether it's a physical item and app, something for a code editor, something that we really like. And this week, I'm picking my backpack. I maybe I had a same backpack for about eight years where it was hilarious that it's still had a skateboard Spa in it, because that's how long ago initially bought it. And currently has the skateboard spot in it. I bought mine in high school. Yeah. I'm you last year or whatever this was there. So maybe you'll be buying this after. So if that thing finally blew out on me and the zipper busted, and I decided that I needed to get a new backpack. But I was pretty fussy about like, what it would include some of my things that I needed, where I needed what's called a luggage way where you if you've got a roller bag, you can slide the luggage, you can see the backpack over the handles of the actual luggage, because I do quite a bit of traveling and I really like that it needed a nice spot for sunglasses and needed a nice spot for your laptop. And then just any other sort of like nice things to be able to travel around with this. But still, I don't know I'm still a bit of a punk so it needs something that it doesn't look to to corporate. - -78 -00:33:23,360 --> 00:33:23,910 -Scott Tolinski: Yeah, - -79 -00:33:23,940 --> 00:34:22,800 -Wes Bos: yeah. So I ended up with this thing called the peak design everyday bag. And I'm not really going to do do it justice, but it's just the best backpack ever. There's all kinds of different zippers that you can access your stuff. It's got dividers inside out, sort of like a camera bag where you can, you can divide it up as you wish it swivels so you can just like sling it from your backpack in front of you and unzip the side without having to put it down. It's got a really nice laptop sleeve in it. It's got this nice little lanyard for your keys where you can clip it onto your key chain. And it's got all these different I don't know straps to be able to hold stuff on to the back. It goes really really small when you need it but will really balloon if you've got a whole bunch of stuff. There's if you go on YouTube and search for peak design every day, you're going to see some really good and you're going to want to buy something it's pretty expensive. I think it was about 350 bucks. Grab it at a local camera store here. - -80 -00:34:22,800 --> 00:34:34,400 -Scott Tolinski: But if you are serious about backpacks, this is definitely the one to get like I you started that with I can't do it justice. This is the greatest backpack of all time. - -81 -00:34:34,770 --> 00:34:52,440 -Wes Bos: It might sound like oh well. That doesn't sound that great but I look for ever for a backpack that had absolutely everything in it even just the handles are super, they're made out of that like seatbelt material. So yeah, you can even grab it from any angle. You got magnets in it, a lot of love wellmade - -82 -00:34:52,440 --> 00:35:01,880 -Scott Tolinski: stuff like that. It's just it's like the little things that that when you have a product that's so well made like you want to get on a plane Casting tell people about a bad show. - -83 -00:35:02,100 --> 00:35:06,360 -Wes Bos: Yeah, as if you're not like not very good at talking about it, and people are just like, Okay. - -84 -00:35:08,550 --> 00:38:09,090 -Scott Tolinski: Oh, so my, my sick pick is something I've used a couple of times, I haven't haven't dove into it entirely. But it's a video editor for mobile, which is the space that I've been really interested in. As someone who's been editing video for a really long time, I feel like I've tried every platform on desktop from, you know, avid, premiere, Final Cut, Final Cut x, pretty much anything, you can get your hands on DaVinci, whatever. So I've always been really disappointed with video editing, on mobile devices, iOS and Android, the options are pretty terrible. And it's I feel like it's, it's mostly because of the approaches people take, they want to have the same sort of either they, they go in two directions, they go, Hey, it's a mobile phone, you don't need any features. So here's a sort of feature list, basic video editor, what doesn't include things like really true, like editing for like, fine, find splits and stuff like that. Or you go the opposite direction. And they're trying to do a desktop UI. And it's just a complete mess, and yeah, usable. So what I love about this app, which is quick, it's made by GoPro, of all people, and they have essentially features in this thing, where it's, it's simultaneously both as deep and as shallow as you'd like it to be, you can select a whole bunch of video from your, your photos, whatever, and it's going to auto cut it and throw some music on there and throw some transitions and whatever. Or you can say, I don't want any of that, screw it, let me fine tune this thing. And the interface is unlike really any of these other people's approaches. So they give you sort of just what you need at a glance, here's your clips, whatever, whatever. But if you tap into a clip, or you dive further, you have total granular control of this thing of the edits, the splits, whatever. Yeah, and not only that, but effects per individual clip. So they give you essentially what you need at a glance. And then you can dive in further and further. And I edited just some clips of me dancing together for Instagram. And I, it was actually the nicer experience. I usually like have to upload everything and then I'll fire via file, Final Cut, or, you know what iMovie now or something like that just to make a quick edit. And I found this to be easier than that whole process. So it kind of blew my mind. The app interface is one of those apps that you open and start using and you're sort of like, hey, this makes me like rethink everything in this genre of apps. So I find apps like that fascinating for more than just like a Hey, this is super useful to me, but more like, how did they come up with this interface that is uncommon, but still intuitive, and beautiful and all this stuff? It definitely is one of those ones that like makes you think long and hard about certain interfaces that you're just used to using. - -85 -00:38:09,780 --> 00:38:20,630 -Wes Bos: So true. So true. Have you used splice by GoPro because it seems that they have I've been using splice and I just checked this out. I'm like, what's the difference icon seems to be almost the same. - -86 -00:38:21,710 --> 00:38:31,460 -Scott Tolinski: I haven't used splice, I'm assuming the quick one is called Quick because they give you access to all these like, select a whole bunch of videos and auto make it for you. - -87 -00:38:31,770 --> 00:38:46,190 -Wes Bos: I'm just just looking it up right now it says a splice is for those who want a bit more granular control. It's more it's still very intuitive, but doesn't do everything for you like quick does. Interesting. So check out quick then - -88 -00:38:47,069 --> 00:38:56,040 -Scott Tolinski: I'm checking out splice it doesn't look like so it doesn't look like splice exists for Android. So maybe quick for Android is splice and - -89 -00:38:57,110 --> 00:38:58,050 -Wes Bos: it does everything - -90 -00:38:58,050 --> 00:39:00,810 -Scott Tolinski: I get full granular control and quick - -91 -00:39:01,860 --> 00:39:08,730 -Wes Bos: what your explorer explaining is exactly what I use it in splice. So it probably is the same app. - -92 -00:39:08,940 --> 00:39:09,540 -Unknown: Yeah. - -93 -00:39:10,670 --> 00:39:25,380 -Wes Bos: It's great. The thing I use it for, even just for simple things is if you have an Instagram video that's more than 24 hours old, you can't post it on stories. So if you just run it through splice, it'll give it a new timestamp and then you can post it as fresh content. - -94 -00:39:26,370 --> 00:39:28,880 -Scott Tolinski: Wait, what is this? What is the time stories? - -95 -00:39:29,040 --> 00:39:31,860 -Wes Bos: The well you know, do you use Instagram stories? - -96 -00:39:31,919 --> 00:39:38,010 -Scott Tolinski: Oh, you know I never used those. I see them there I like almost never look at them or see them but I really - -97 -00:39:38,250 --> 00:39:57,900 -Wes Bos: know that they exist. So is it gram stories only let you post a video that's from your phone that's less than 24 hours old. Otherwise, it will only select it. So if you've got like some decent video or you've exported some video off your computer that you want to post up, then you can run it through splice real quick and it'll put a fresh time stamp on it. - -98 -00:39:57,900 --> 00:40:02,280 -Scott Tolinski: hackin Yeah, well pack a heck in the gram - -99 -00:40:03,959 --> 00:40:07,560 -Wes Bos: cool so I believe that's it for today anything else on your end Scott - -100 -00:40:07,560 --> 00:40:08,360 -Scott Tolinski: I got nothing - -101 -00:40:08,789 --> 00:40:22,500 -Wes Bos: awesome so we want to just mention our Twitter account which is slowly climbing thing we just cracked 800 followers it's at syntax FM give it a follow give a give Scott and myself a follow as well. I'm at Wes Bos got - -102 -00:40:22,500 --> 00:40:26,850 -Scott Tolinski: your ad s to Lynskey to Li and SPI - -103 -00:40:27,230 --> 00:40:38,010 -Wes Bos: awesome. And as always like and review on iTunes or whatever it is that you're using. We'd love to get that feedback from you. Until next time, we'll see you then - -104 -00:40:39,810 --> 00:40:50,340 -Scott Tolinski: head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you liked the show. Until next time, - diff --git a/transcripts/Syntax20.srt b/transcripts/Syntax20.srt deleted file mode 100644 index 0d9c0c559..000000000 --- a/transcripts/Syntax20.srt +++ /dev/null @@ -1,396 +0,0 @@ -1 -00:00:06,000 --> 00:00:41,700 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. Welcome to syntax In this episode, we're going to be talking about fitness.js, which isn't actually a new JavaScript framework, thank God, it's actually Yes, it is a, we're just gonna be talking about health, nutrition, fitness and how it relates to you and your career as a programmer, designer, any of that stuff, someone who sits in front of a computer all day long, it's a important thing that we all have to spend a little bit more time on. - -2 -00:00:42,030 --> 00:02:53,250 -Wes Bos: This episode is sponsored by a company called dev lifts. And this is kind of a neat episode because I'm going to be talking about my experience with fitness over the last couple months. And actually, even from my experiences last couple months was through our sponsor day, which is deadlift. So Douglass's two guys, that and JC that are on a mission to make web developers healthy. And what they're doing right now is they're offering these personal training plans that will, and I got one of these myself a couple months ago, just to they wanted to sponsor the podcast. But in order to suss it out, make sure that it was a good sponsor, I actually did it myself. So what they do is they, they sort of sit down with you for about 30 minutes and talk about your goals in terms of like, where you want to be why what you want to do in terms of getting healthy. If you want to lose some weight, if you want to have some more energy, if you want to get stronger, whatever it is. And then what they do is they make you this like training plan that has, however many days a week that you feel like you want to exercise, if you want to go in the gym, or you want to do it at home, they they sort of take your needs into account and make a training plan. They make you a nutrition plan, what you should eat, what you shouldn't be eating, how many calories a day, you should be eating all that good stuff, you get access to the slack. And it's kind of neat, because it's like a personal trainer, but they're not going to go to the gym and yell at you. They're just going to give you the plan, you can go off and watch your own YouTube videos to learn the exercises and whatnot. And, and then you join in the slack. And they check in with you every week and make sure everything's going good. And they answer like all the all the questions, all the silly questions that I've had. So right now what they're doing is they have let me open it up right here. It's dev lifts.io. And they have a, this whole thing that I'm talking about is 249 bucks, and it's currently on for 149 bucks. But they only have 95 spots left there was 100. But at the time recording, it's only 95. Who knows what it's at right now. And then they're offering another 50 bucks off for syntax learner. So really this $250 training plan, which which takes them hours and hours, hours to put together. We'll talk about why they're doing this a little bit more. It's really only 99 bucks. So head on over to dev listado to grab that. - -3 -00:02:53,730 --> 00:02:55,590 -Scott Tolinski: Yeah, super comprehensive too. - -4 -00:02:55,620 --> 00:03:00,570 -Wes Bos: Yeah. Yeah. Did you actually end up having one done? You can cut this out if you didn't? - -5 -00:03:00,870 --> 00:03:39,330 -Scott Tolinski: Yeah, I did. Yeah. And in fact, was nice for me is we can talk about this a little bit more is that I've never had a specific workout that was tailored for my athletic performance. Yeah, like an athlete, right? I'm breaking pretty constantly, but I've never had my workouts like help my, because I don't have a trainers, right? Like people, like professional athletes have trainers and everything. For me. I'm just like, oh, I'll just lift weights and I'll be stronger. And it turns out, like there's a whole lot of extra things I could be doing that could aid my like dance performance in all sorts of different explosive and strength ways that just totally opened my brain to all of that stuff. - -6 -00:03:39,540 --> 00:04:05,880 -Wes Bos: It's interesting. Yeah, so that is a personal trainer himself. And JC is a web developer and who's currently getting his personal training certification. So it's kind of an interesting mix to be able to just focus on just developers so this episode might seem like an IV huge, huge add for them. It's not I'm just very it's been working out super well for me, so I'm very thankful to them for for helping me out. - -7 -00:04:06,510 --> 00:04:42,000 -Scott Tolinski: Yeah, yeah, absolutely. I think one of the things we should kick it off with then is like sort of your history and my history of like, fitness and movement and working out or any of that stuff like over the course of my life. I've been sort of active 24 seven I was you know, always playing street hockey and whatever in the street growing up and constantly like outdoors kind of kid. Definitely like doing a lot of like play stuff. Yeah. And I I became like a rollerblader in a skateboard. I even was like skateboarders even sponsored by vans pretty briefly, - -8 -00:04:42,000 --> 00:04:42,830 -Wes Bos: where you really? - -9 -00:04:43,130 --> 00:05:39,180 -Scott Tolinski: Yeah, I got to open a van skatepark and was it and it was in. I think it was in Royal Oak, Michigan. It was in Michigan. I'm trying to remember the city but I got to be one of the first five skaters at this van skatepark like backstage passes to the warp tour. And all bunch of cool stuff and a bunch of free t shirts and whatever, but I soon actually got my first concussion, like several months after that, and I quit entirely. Sure. So um, that was in high school they pretty much all the time. So I'm definitely like super active throughout high school. And then I just started breaking because to me breaking was like, it was cool. You were singing music videos at the time. And to me, it seemed a lot like the same kind of path is skateboarding, rollerblading, that sort of stuff, right? But you didn't get in the air, which is the part I was having troubles with after a concussion caused by being like high in the air. So it's like, oh, I get to stay close to the ground. - -10 -00:05:39,990 --> 00:05:46,860 -Wes Bos: So for those of us who are not super cool breaking is breakdancing, right? Sure. - -11 -00:05:46,890 --> 00:07:54,600 -Scott Tolinski: Yeah, yes, sorry. That is something that I have trouble with. I always just refer to as breaking. Yeah, so I've been breakdancing since I was 18, I used to just sort of drive up to the University of Michigan because they had a club there and just start practicing with those guys. They used to sneak me into the the back door of one of the Campus Rec buildings, we used to have this thing because you had to be a student to go to the rec building. And these guy, it was super cool of them to do this without even knowing me. I just emailed them, and they were like, oh, we'll sneak in. And they had this whole routine where they had someone distract the guy at the desk. And then they would have someone pop open the exit door, which was right next to the guy at the desk. But it was right next to a stairwell. So they kick open the exit door really quickly, I would run in the exit door and we'd run down the stairs. And they would always like shout at you like stop, no don't, but you can't get out of your seat if you're the guy at the counter. So like that's all he could do was like, No, please don't go inside here. Please Don't sneak in. So I used to do that like once or twice a week. And they never figured it out. Because we used to do it every week. And I just started going up and breaking because you stayed close to the ground. I was 18 and whatever and eventually went to school at U of M and became president of the club at some point. And taught lessons and and been doing it ever since now. So it's been a been a long, long time that I've been doing this dance, but because of that I spent all this time maybe, you know, over the course of these years, maybe four hours a week dancing, and somewhere around then I think like maybe like 2014 I started hitting the gym. Just because it seemed like that was like a nice way to do preventative like I was getting hurt a lot. So it was like, Oh yeah, way to prevent me from straining myself, whatever and hit the gym. And then I started to learn about lifting weights and all this stuff like that, and brings me today I have a gym out in my garage that I go to three days a week and really, really enjoy. I'm the type of person if I'm not moving around or whatever, I'm getting depressed and, you know, just not happy and not productive and all that stuff. So that's sort of me, you know, I've just always been very, very active. Interesting. - -12 -00:07:54,630 --> 00:09:48,600 -Wes Bos: That's, that's cool to hear. on my end, um, I was always a pretty active as a kid as well playing sports, I was super into skateboarding as well. That's really where I got a lot of my exercise when I was in, in like high school age university, I started getting into both running and lifting. But maybe, I don't know, maybe three or four years ago, I would casually go to the gym. But I just I wasn't doing it as much as I probably should. And I think most importantly, as I wasn't following any sort of like really good nutrition plan. And just over over the years, I think I gained maybe like an extra 2025 pounds from when I was married I was in good shape or when like the day you got married, I was in good shape. And then you have kids and and you're married don't impress anybody anymore. And it's sort of like, slid from there and probably about Yeah, exactly two and a half months ago, I was talking to the devil of skies, and they came up with a plan for me. And I was super excited because I always really enjoyed. Especially I always enjoyed lifting weights, I never really enjoyed cardio or anything like that I did a lot of it just because it's good for you. But I was enjoyed lifting weights, it just never had like a clear goal or clear plan, I would just kind of go every now and then. So two and a half months ago, I've been going every week, four days a week for 45 minutes, as well as accompanied by we'll talk about my nutrition plan, and it's been working out super well. For me, I think I'm down, down about 17 pounds. And I think more importantly is just like feeling really good in terms of energy focus, being able to like work better and all that stuff. I don't know maybe that all that all go into as I like what are the benefits to maybe you can answer this what are what are the benefits to to getting in shape as a web developer? - -13 -00:09:48,920 --> 00:10:40,260 -Scott Tolinski: Yeah, a lot of that. I mean, even so, regular workouts are going to not only make your brain work better, you're going to have see cognitive benefits, you're going to think a little bit more clearly but You're also going to get better and more sleep, your body sleeps better if you have that energy expelled, right? So better sleep is also in turn going to improve your cognitive performance, right. So, you know, thinking smarter, getting better sleep, are all things that like, definitely aid you in your day to day programming. And, and honestly, the change in the difference between having that athletics or just working out or having some sort of anything movement based, right and not having it at all is like pretty huge in terms of the thinking clarity you get, you'll suddenly realized that you you have like, super brain powers or something like that. - -14 -00:10:40,260 --> 00:11:40,800 -Wes Bos: It's It's incredible how much we talk about productivity and using TextExpander and shortcuts and all these apps to like, make ourselves faster, because I'm just obsessed with that kind of stuff. When there's just like this one huge glaring thing in it is that if you were to put some time into fitness and getting healthy, your your brain is going to be so much better clarity, you're going to be so much more productive, you're going to get a lot more done. And, and to me that's like, that's like the huge obviously, you want to like look good and, and be healthy for years and years. But like one of the huge driving factors for me is like, I just want to I only have eight hours a day to work. Like I can't I'm not young as when I could just put in 15 hour days and work all day and work on weekends and, and stuff like that, like I only have so much time and I want to squeeze as much of it out of that. And I think a really good way to approach that is to, to get your head in the right space. So that when you are on you're you're given a right. - -15 -00:11:41,040 --> 00:12:51,030 -Scott Tolinski: Yeah, yeah, absolutely. And also, if you think about it, we spend so much time either sitting sitting in chairs, or standing desks or whatever, but we spend all this time sort of hunched over a computer or phone and stuff like that, and, and lifting weights or doing all this stuff requires you to sort of adjust your posture and your form and whatever and an increased like strength and better posture is going to improve your day to day even sitting at your computer, your back's not going to be hurting and hunched over and whatever. And you're not going to be feeling these sort of symptoms of sitting in a chair all day long, the same way you would if you would have like less strong core muscles and back muscles and all sorts of stuff like that. I mean, in addition, like you also get time away from screens, like how much time do you just spend with your eyes glued to your screen, and I know me, it's, it's, I have to be pulled away from my computer sometimes. And my wife is just like, you need to get away from screens right now. You know, it will help you sleep better. All that stuff is just all positives that if you take an hour out of your day, that you probably maybe not working efficiently anyways, it the benefits outweigh that the cost instantly. - -16 -00:12:51,120 --> 00:13:27,270 -Wes Bos: Yeah, I also find, like the hour that you go to the gym, I find that to be an awesome time to listen to podcasts, or just to think through stuff, I can't I can't tell you how many times I've had ideas for courses, or I've had a particularly troublesome code issue. And then as you're sort of just like working out you, your brain is sort of trying to process it. So very similar to like the shower where you always have like these aha moments, is because those things force you to sort of take yourself out of out of the situation, and you can start to have some time to let your brain think through all of those issues that you might have. - -17 -00:13:27,720 --> 00:13:57,660 -Scott Tolinski: Yeah, that's a perfect, absolutely perfect thing because it does it, your brain is working on it, even when you're not actively thinking about it and your brains like smart enough to solve these problems without you like having to think about solving these problems. And, to me, I found that to be great, because now you're getting if you think about it, you're becoming ultra productive, because you're you're still solving problems, but you're also working out your body, you're gonna be getting better sleep, all that stuff. So it's like, you're, it's almost like you're Double, double teaming these problems at the same time. So - -18 -00:13:57,690 --> 00:14:54,780 -Wes Bos: yeah, and I also want to say that in terms of like taking time out of your day to work out and maybe we can talk a little bit more about this later. But I people will always tell you like if you if you take an hour out of your day, and you only work seven hours a day, instead of eight and you go to the gym, you're gonna you're gonna get you're still going to be more productive than if you were on for eight hours. And you hear that from a lot of people but like, I never actually really believed it. Like, like, holy like I was like, oh, that kind of makes sense. But like really I rather just spend the eight hours like throwing myself into whatever I'm doing because I just like I love what I do. And I would love to have all that time but and slowly but surely figuring it out that like it is especially for me because like I don't have a ton of time and part of my plan is two days a week I have to go like lunch or two o'clock or in the afternoon. I have to stop my actual work to actually go to the gym. But in my experience the last couple months it's been well worth it. - -19 -00:14:55,290 --> 00:15:58,530 -Scott Tolinski: Yeah, yeah, definitely. I know. Three days a week. I stopped working at the 330 and then I go to the gym from 330 to 430. Because my wife has to get our son for daycare come home and at 430. And then she wants an hour to work out hour and a half or whatever. So then she gets her time to work out, I get to watch Landon, then we have dinner and then I can get another hour to work in after that. And then it's not ideal. And it's not like, you know, standard nine to five or something like that. But it works and it works for you. Yeah, and some of those times those that additional hour or two hours after dinner or whatever, some of my most productive time because you have this mental focus and clarity that you didn't have during the day. Or maybe even at the end of the year workday. Like how many times is it like 330? And you're like looking at the clock, like, Oh, is it four? So I can start thinking about when can I drive home yet? Like I just remember, like all those times at work just like an hour left of work. I might as well just browse the internet for this hour, because I'm not going to be productive right now. Anyways, so definitely a good time to cut that stuff out. - -20 -00:15:58,650 --> 00:16:30,600 -Wes Bos: Yeah, actually, it was I think it's kind of cool to hear people and maybe if you have like an arrangement, tweet us out syntax FM was I'm always curious to hear what people's like work. workout routines are and like how they work that into their actual work, like do you work a little bit later at night? Or in the morning? Or how do you split up your day? So that because if there's one thing I've learned is that like, you have to make some sort of change in your work routine in order to make this going to the gym or going doing your workout actual actually possible, because otherwise, it's just not going to happen. - -21 -00:16:31,860 --> 00:18:08,520 -Scott Tolinski: Yeah, yeah. And I think the people who have like nice gyms at their workplace, trust me, there's tons of developers out there who have a nice gym at their workplace. That's not being utilized. I was just at galvanize in Denver a few weeks ago, it's getting a little tour. And they were like, Oh, yeah, and here's the gym. And, and she opened it up. And it was huge and awesome. And like a gym, you'd pay $100 A month ago, and it was completely empty. She was like, sadly, it doesn't get much use. And I'm just thinking like, Man, these people, like, there's so many people upstairs have just, you know, you could take an hour out of your workday to go hit the gym, that's at your office, you don't have to pay for a gym membership. You don't have to have any equipment of your own. And it's all there. And it would make you have a better day, you know. And so those kind of things take advantage of if they existed, like I said, that just kind of bummed me out to hear that nice equipment was going on us. Yeah, so we went over the sort of wise in terms of how it's going to make you a better more efficient programmer in your day to day life or designer, whatever you do on your computer. Let's talk a little bit about maybe some of the house because there's a lot more of like the house than I guess anything else. Because there's just so many things in working out that can cause you not to work out based on the amount of choices you have to make whether it's Oh, do I go for a run? Do I go for a walk? Do I lift weights? Do I go take a dance class? Like what the heck do I do? There's just too much there. Right? Yeah, - -22 -00:18:09,420 --> 00:18:45,960 -Wes Bos: that was actually my my problem is that I would just like walk around the weights room and try to find a couple things that were free. And I would do it and then like you just don't know, like, like, when is it okay to leave or whatnot. And one of the nice benefits of having a plan is that you just do your things. And it actually after a couple weeks, it only takes me 45 minutes to actually get my stuff in. So I can walk, walk to the gym, do my thing and come back in just over an hour which is which is great. Because then you know, like, this is the start this is the stop this is exactly what I need to do. And this is how many reps I need to do today. And it's a nice clear focused and so - -23 -00:18:46,200 --> 00:20:36,350 -Scott Tolinski: yeah, so I think the the starting point is like, I mean, what are you what are your goals, right? Like, at the end of the day, your goals? May they be superficial or not superficial like right now. Like I've been breaking for so long and lifting and whatever like I don't know if my goals are as superficial I want to I want to make myself less injured when I'm braking and stuff like that. I don't want to hurt myself and I want to be able to be like performance but like I've had superficial goals in the gym and that's like that's super cool. Like there's there's absolutely nothing wrong with just being like man, I want to look good. look good naked is like number one reason people want to get in shape. And there's there's like I don't know if there's like a stigma about that I've always heard like, you know, sometimes developers are coated people want to talk down on people for having those superficial goals or anything like that. But that's that's super valid. And you know, so that starting point is really like what do you want to what do you want to get done? Do you want to put on some muscle? Do you want to lose some belly fat? Do you want to just, you know, actually like, what do you want to get done? And if you're, you know very overweight or something like that, like first step, just taking daily walks right going out there and getting moving, it just took a walk around the block like a walk several blocks one way. And then another if you have dogs take your dogs for a walk, but like, just really getting out there and get moving. But if you're not, if you're looking for a little bit more of like a fitness challenge, right, like, there's several different directions you could take, you could go like the couch to five K's sort of route where you're slowly ramping up your running until you're feeling confident able to run a five K, I hate running myself, like running. I don't know why I just I like in the middle of a run, I'm just like, get me out of here. - -24 -00:20:39,330 --> 00:20:47,040 -Wes Bos: Yeah, I feel that way as well. I still do it. But it's just like, it's not something that I really look forward to. Yeah, it's just one of those things that you do. - -25 -00:20:47,360 --> 00:21:43,050 -Scott Tolinski: And if you want that cardio and you don't like running, you can always take a bike ride, you can go to the gym and do the elliptical or the recumbent bike or any that sort of stuff. There's all sorts of routes. Basically, the cool thing about any of this workout stuff is, well, like there's always an alternative to something if you don't want to go for a run, there's several other ways. I mean, if you want to, if you want to build muscle, then there's obviously like lifting weights and stuff like that. And the cool thing about lifting weights is that that muscle that you build actually burns fat over time. So if you're looking to lose weight, having that muscle on you is inherently going to make you less have less body fat percentage just by lifting the weights themselves, right. So I guess those are like some of the the routes you can go right? Take a walk, go for a run, use any of that equipment, lift weights, right? There's also like dancing and more fun things like I don't know, like skateboarding or - -26 -00:21:43,050 --> 00:22:25,170 -Wes Bos: any of this bar. It's hockey, soccer, or whatever it is. Yeah, we're both in frozen country now. So go on, skate down the river on your hockey skates on and skate down the river. Yeah, I think important part here is that you just have to find something that you actually enjoy. Otherwise, like, we've all been there before, it's just not something that like, obviously, it's not going to be very fun, especially for the first month or two because you'll be very sore, and you'll be very tired. But once you get past that hump of of doing it, your body starts to crave it and you start to look forward to actually going to the gym or going for your run or whatever it is. It's just like a really nice thing that everybody enjoys. - -27 -00:22:25,620 --> 00:23:25,410 -Scott Tolinski: Yeah. And part of that is is this routine, right? So like nothing's more important than finding a routine that you like. And there's all sorts of ways that you can get your routine from, you know, like deadlifts. Right, that's a great place because they're going to tailor a routine for you. Yeah, right. You can have it you had, I don't know how you're zoned. But I had an interview with them. And then they sort of asked me a bunch of questions. And through that they discovered like what my program should look like, yeah, to me, that was really great, because it was like a tailored routine. But in addition to like having a tailored routine, just developing a routine itself, like if you want to do yoga, go to like, do yoga with me calm and just fire up a video every single other day or something like that, and just say, Hey, I'm gonna do a yoga video every other day and just stick to it. I'm gonna go running these days and stick to it. And that's like, a huge thing is not to maybe try to do too much at once. But just try to do something that you can and will stick to because that reoccurring nature of your routine is really the most important part. - -28 -00:23:25,440 --> 00:24:21,630 -Wes Bos: Yeah, yeah, really important. Don't Don't say I'm gonna try to go to the gym more often, you say I am going to go to the gym, even if it's just Tuesday and Thursday, that's all you can do right now. And stick to it. Because there's no, there's nothing to say for that in every aspect of life, especially learning whether you're learning to code or whether you're going to the gym if you just stick with it and actually put in the work, which is it's really funny for me because like, I've been like preaching this whole, like, just put in the time you have patience, keep at it do do the hard work day in day out and it will pay off for you. And that's the exact same advice for working out as well. Which is, which is why like, I feel like right now is the time that I need to I have I have the time kids are starting to sleep a little bit better. And I don't really have any excuse because I I've figured out how to teach so many people to code that the same advice should also apply to to getting in shape, right? - -29 -00:24:21,690 --> 00:25:16,860 -Scott Tolinski: Yeah, right. Yeah. Yeah, absolutely. Yeah, I think I got lucky enough where I instilled such a strict routine in for myself, in like the three years before we had kids, that now that we have our first child, like, it was more like, okay, now he's here. How long after he's here? Can we both find a time to get back to our routines? And how can Courtney and I assist each other to make sure that we both stay on our routines because it's really easy at this point. When you have a child to just say, Man, we are tired? Yeah, maybe let's just do it tomorrow. And if that comes up if if I say that or He says that it'll just be like, No, I'm watching Landon right now and you go to the gym, or you know, vice versa. Because it's important to stick to that stuff that just even keeping that routine, you let it slip a couple of times. And next thing you know, you're sitting there five months later and you haven't gone and who knows how long? Yeah, - -30 -00:25:17,010 --> 00:25:42,840 -Wes Bos: I think one important point that you had there is like buy in from your significant other is super important. Obviously, if you have a significant other just because you are going to need to skip some time at night when you'd normally be watching Netflix or you are going to have to take the kids while the other person goes and does our workout or whatever. But being able to work out a schedule like that has worked really well for us. - -31 -00:25:43,200 --> 00:28:09,120 -Scott Tolinski: Yeah, and it leads to like, you know, like less resentment over like free time and stuff like that. Because you're you're you're giving your your spouse and they're giving you all the free time you need to make yourself have that work. And you're nobody's feeling like I can't go do the things that like the gym or something like that. So it's definitely, definitely important. And you can hold each other accountable in terms of like, what you're doing and your routines and stuff like that. So just developing a routine is really great. I mentioned for yoga do yoga with me is a great place for free videos. There's like endless YouTube free youtube videos on YouTube, just like a billion people trying to make YouTube videos for yoga. So just Google it, find some popular ones and just do it. Like I said, there's a couch to five k for running. There's a website called fitness blender, which is all free youtube videos for different workout routines. And they're like, anything from short to long. I know Courtney does these fitness Blender videos and really, really loves them. There's all this is cool. I've never seen this, oh, man, it's insanely high quality. I've been inspired so much through their YouTube channel, just the amount of brilliant work they're doing. Obviously, if you want to go to the paid route, there's the whole Beachbody. They do p90x and insanity and all those bunch of DVDs you can purchase. But sometimes when you buy those, it's like, oh, I'm gonna do this workout, you buy them and then you never do it. So like I would always go the free route when you can. In terms of like, if you're going to watch videos or something. Yeah, for for like weightlifting, a good starter plan, if you're not getting a personalized plan is something like starting strength is another great, great plan. We'll link all this stuff in the show notes. But starting strength is great because it gets you all of the base complex lifts, which are just sort of like squats, deadlifts, bench, overhead press, and like through those lifts, your workout ends up being like, only three exercises long, I think it's starting during, I think it's like only three exercises long, and that's your entire workout each time. But because they're these complex lifts, it's using your whole body, for the most part are activating a large amount of muscle groups. And you end up seeing huge results, especially if you're starting at nothing in terms of lifting. Courtney was doing starting strength and like added, like a ton to her benchpress in absolutely no time. So dif a big fan of all of those plans in terms of whatever you're going for. - -32 -00:28:10,170 --> 00:28:10,740 -Unknown: Cool. - -33 -00:28:11,490 --> 00:31:12,090 -Wes Bos: So let's talk a little bit more about our sponsor, which is deadlifts. I know we've been talking about them all the way through this podcast. So I told you about like what you get for the the 99 bucks if you use the coupon syntax. But I had a Skype call with JC the other day just to like, make sure that like what we get across for them is important. And what he said is that like they're they're on a mission to get developers healthy, like that's like sort of his his life's goal and, and that's what he's he's going forward to. And he really stressed that like, the whole fitness industry is kind of around, like what you look like or be getting jacked and stuff like that. And that's cool, but like he's more or DevOps is more focused on just getting devs healthy, being able to, I don't know, like as developers, we sort of like tend to side to working long hours and eating pizza and the beer cart comes around on Friday and, and whatnot. And if we can sort of change this culture of, of working really, really hard and being super busy, and change that to be a little bit more healthy. I think that'd be really, really cool. So how you take care of your body, I think it really really affects how you work we talked a little bit about that in terms of productivity in terms of both focus and stuff like that. It's it's about being more productive, more fit more efficient in your actual work when you are on so that you can have that time outside of your life. So you don't need a gym membership. If you have dev list obviously they're gonna ask you what kind of stuff do you want to work like for me I travel a lot so they gave me an extra a bunch of exercises that are I could just do in the hotel room if I'm if I'm actually traveling. I told them like I want to lose that a little bit of weight. I want to get stronger. I want to put on a little bit of muscle and baby On me telling them what my goals are and and also like, in terms of like, this is where I'm sore have a little bit of back pain here, they will tell they will recommend all the different workout preferences, all the nutrition preferences, all that good stuff for you. So it's only 99 bucks, which is awesome if you if you get in before it. So if you are thinking about getting in shape, I would definitely drop the the 99 bucks on this just to both get to be part of the community. There's a lot of people that are sharing in the slack room already I'm I'm in there every day sort of reading what's going on with everyone, there's a lot of people that are sort of like at the same level. So we're all starting at the same time. It's kind of cool to talk through that stuff. And then also it just like gives you a plan. Like that's why people buy Scott nice courses as well as like, of course, there's lots of really good material out there. But sometimes you just need somebody to hear me out for 30 minutes and tell you exactly what to do on what day and what muscle groups so workout or whatever they recommend for you might be more cardio based or, and whatnot. So check it out at dev lifts.io. And we'll link it up in the show notes as well. So thanks so much to them for sponsoring. - -34 -00:31:12,390 --> 00:32:01,410 -Scott Tolinski: Yeah, while we're talking about them, you know, I want to say like my favorite part about my deadlift plan was it opened my mind to some training methodologies that I wasn't like super aware of like, for instance, I have done a lot of bodyweight training, but I hadn't done like so do handstand push ups, right and things like that. Because obviously that's very applicable to for breaking to be able to do a handstand push up. But like, they had one of my workout days do like a time under tension handstand push up where I would take three seconds to go down and three seconds to go up and it was unheard of thing is done in it. I've never done it. And I remember the first time I did it with the workout plan, it sucked. I was just like, the amount of handstand push ups I could do just went in the absolute toilet. It just went it just went right down the drain. I was just like, - -35 -00:32:01,680 --> 00:32:02,520 -Unknown: oh boy, this - -36 -00:32:02,520 --> 00:32:28,440 -Scott Tolinski: is really impossible. And it turns out like that exposed me that I don't have the ability to do that stuff very well. I can, you know, push them out explosively, but I can't do that big old, you know, this slow down and then slow back up. And so one day, it was all about explosive pushing and stuff like that the other day was all about like time under tension. And that totally blew my mind because I just was like, dang, I am really deficient in some areas, apparently. - -37 -00:32:28,830 --> 00:33:01,560 -Wes Bos: Yeah, they seem to know like exactly like, the poor parts. Like in a was it like two weeks after I started he just sent me messages like hey, like make sure you're spending time under contraction because you can do your workout but you do it improperly. Or if you sort of like swing the barbell up, it's you're not going to get the the benefit that you actually would so it's kind of interesting to he's, he's they've both have trained enough people. I think they know exactly. The little deficiencies after talking to someone for 3035 minutes. - -38 -00:33:01,800 --> 00:34:13,710 -Scott Tolinski: Yeah, definitely. And if you want that sort of help without having to ping someone else, like if you just want to like YouTube, but even if you are doing a dev list plan and you just don't want to like bother them, you just want to like look it up or something. There's a really good YouTube channel. I think it's by Jeff nip nip heart net part, I'll have to link this off to let nip harder Nippert I forget it, but he does these videos about like the science of growing your biceps, this is just thinking your shoulders, and he'll go through and he'll be like, these are the three best exercises that you should be doing and here's how you should be doing them. And if you're a scientifically minded, here's the scientific studies that back it up. So I really like that channel because I am like that and like I get some studies about what I'm doing and why to and that makes me like, Oh yeah, well, this study says to do it this way. And that makes me feel really like good. I don't know if it's a placebo. But the fact that you know, the science backs it up makes me feel better about it. You know? Cool. There's, there's so many great resources for this stuff. I love the there's a lot of like, again, there's a lot of like scammy stuff in the fitness industry, but like, there's a lot of just brilliant resources. So okay, so we talked about routines, we talked about why? I guess. - -39 -00:34:14,940 --> 00:34:16,610 -Wes Bos: Let's see, no, I did nutrition now. - -40 -00:34:18,170 --> 00:34:36,170 -Scott Tolinski: Yeah, we can do nutrition. Okay, yeah. So let's talk a little bit about is something that's definitely important for being fed is what you put into your body because the exercise is really only half the story, right? It's all about calories in versus calories. Yeah, so - -41 -00:34:36,179 --> 00:34:51,210 -Wes Bos: I would argue even like exercising is even less than half the story which is kind of unfortunate. I rather just eat whatever the hell I want and, and work out but unfortunately, it's it's so much based on like, how much and what you're putting in your body. - -42 -00:34:51,480 --> 00:35:50,880 -Scott Tolinski: Yeah, there's an old saying, which is that abs are made in the kitchen and it's like super true because you don't get I mean, you get ABS by doing crunches and stuff like that, but You don't get good looking ABS from doing 1000 crunches, you get good looking ABS from having no body fat on your stomach. And all of that comes down to nutrition. So I mentioned it's calories in versus calories out, right, the workout part is calories out, it's going to be burning your calories, even just going for a walk for 30 minute walk is going to burn a bunch of calories, and that's great. But if your calories in is so high that your calories out can't make a difference, then you're not actually a net positive or one that negative in this case, you're at a net positive and you're going to be still gaining weight. Right. So let's talk a little bit about that nutrition key here that you can maybe not necessarily like limit the quality of your food or something that comes in but limit the total amount of calories coming in. So it's easier to be at a deficit. - -43 -00:35:51,000 --> 00:37:37,170 -Wes Bos: Well, I'm gonna talk a little bit about what I've been doing for nutrition in the last wild. If you follow me on Twitter, you know that I love food, I love to eat, I love to cook. I love to drink beer and stuff like that. So part of my plan was that like, they asked me like, what types of food do you usually eat? What do you like to eat, etc, etc. And they have put me on this nutrition plan. I call it nutrition plan rather than diet because it's, it's not really something that you just like do for six months, I guess you can do exactly to temp it sounds I don't know, it sounds a little bit weird. But so what it is, is called keto. And I'd sort of do my best to describe it. But I'll link up some, some good YouTube videos in in podcast that you can listen to to totally understand like, why and how it works. But the idea is that your body runs primarily on something called glucose. And when you eat things that are full of carbohydrates, like like breads and pasta, and rice and potatoes and stuff like that your body converts those and in when it needs energy, that's what it's going to to run itself off of. So the idea behind keto is that your your body is not going to be running on glucose and all the sugars that come from eating carbs, but your body is going to Sorry, I should explain what you do is you you adapt a diet that is extremely high in fat, like 70% of your diet is fat. 25% is proteins and 5%. As carbohydrates are somewhere around, I can look it up, I use an app called My Fitness Pal to track what I'm eating and make sure I hit those sort of levels. - -44 -00:37:38,580 --> 00:41:35,480 -And what's so sorry, and what comes from that by eating mostly fats and proteins and very, very little carbohydrates is that your body stops running on all the sugars and all that glucose and it switches it over to a state called ketosis. And then your body switches itself over to to fueling itself for energy based on fat. So it's kind of interesting and then as you It takes like a while I think it took like two weeks or so to two and a half weeks to fully get into the state that is ketosis because your body is so used to to running on carbohydrates. But once you switch over to that, then your body reaches for stored fat that you might have just on your body to to reach for energy or the the fat that you've been eating, it'll it'll reach for and the the benefits to that is first you just drop like I dropped like six pounds in the first like two weeks and it's just because your body is with all those carbohydrates and you your body's retaining a lot of water so it's like not like it's great because you feel great and you drop all this water like immediately and then once you've done that you you start to actually burn away any any actual fat that you have. So like, like I don't have like I wasn't overweight, but I have lost 17 pounds in two and a half months which is pretty good. If you go on the the Reddit keto, you can look at a lot of people's stories, people that were hundreds of pounds overweight and they did keto for two years and they've lost like half their body weight. So that's one of the benefits is obviously weight loss. And the other benefits are or at least for me is like better focus and consistent energy burn. So rather than gain those ups and those downs or that three o'clock crash after your lunch are a little bit sluggish. You want to watch a couple YouTube videos after lunch. It's a much more sort of like solid consistent burn of the energy and you don't feel you don't find yourself like craving snacks throughout the afternoon and you don't find yourself like getting into that that little energy slump where you need something like maybe you need an afternoon coffee or whatever to pick you up. So it's kind of interesting. You eat mostly meats and green vegetables so I have bacon and sausage and eggs every morning. It's I will prefer Those who who are just hearing this for the first time, it does sound crazy. It sounds nuts to just eat this kind of food all the time. It sounds like it's very unhealthy for you because there's like, No, we've been we've been told that for the long time that fat is bad for you. So like I definitely did my did my homework and did a lot of reading and whatnot on these things for people that are not just personal trainers, people that are actually scientists in this field. But yeah, what do you eat a lot of meat, you eat a lot of green vegetables, the sort of rule of thumb is anything that grows above the ground is fine. Anything below the ground is not because they're like potatoes are high in carbohydrates, whereas in like, broccoli, or brussels sprouts are, are very low in carbohydrates. A lot of dairy whipping cream, sour cream cheese are just really good. Like, it's like a very delicious nutrition plan to be on. As long as you're okay with not eating rice and bread, which is kind of brutal. And also beer as well. You can you can have a little bit of beer. And there's also this is one called modified keto that you can be on where you can do like, I think I try to stay under 20 grams of carbs. And you can find beers that have three or four carbs in them. So it's definitely still doable. The only really downside that I found to it is that like because all of these things are are high in calories like bacon, a couple slices of bacon, foreigner calories, it is easy to run up your your calories for the day, because you can't just go willy nilly eating whatever you want, you still need to make sure that you're in a deficit if you want to be losing weight. Yeah, so - -45 -00:41:35,690 --> 00:43:48,030 -Scott Tolinski: yeah, that I mean, again, like the best part is that you have a plan and it's one that works for you with what you like to eat. For me like we always pretty much ate that way anyways, we'll still still do white rice here and there. Um, I need a little bit more carbs because I'm I'm the dance stuff is like pretty super cardio intensive. And you need a little bit of that. But like for me, it was like getting calories and dumb places that I could cut out for instance, like knocking back a few Red Bulls here and there. It's like I didn't drink soda or pop pop for all you Michigan folks. And up in Canada to Oh yeah, pop all the way I only say soda to make other people happy. But I was never like a pop person. But like, you know, I was like super into grabbing a Redbull every day or every other day or something like that. And, and that's like just totally unnecessary wood, you can get your caffeine fix from so many more nutrient, better places, like even just coffee or green tea or whatever. And so in addition to like cutting out those sources of extra calories, if you drink pop, stop drinking pop your body is like tuned to say, like a dopamine response whenever you drink that pop, because that sugar rush and whatever, but it like I can guarantee you if you cut it out of your life, you will not miss it. I have not had a pop that's not like a red bowl. And like, I don't even know when like, I don't drink it and I don't miss it at all. I drink a lot of water. So you just replace that pop with water. And at first it's gonna suck and you're gonna feel like, Man, this has no flavor. And eventually you're going to be like, Man, this pop is way too sweet. Why, like, why was I drinking this so much? Because you're just your body gets used to it. And you don't even realize that you're bringing in all these calories and all this sugar when you when you absolutely don't need it. So cutting out stuff like that was big for me in terms of like Red Bull. And again, like I could knock back a pack of chips. Like if there was like a bag of chips sitting on my desk. I would just eat a chip while I'm wearing a chip be the chip and then all sudden, like Oh crap, there's no more chips in the bag like we have in - -46 -00:43:48,030 --> 00:43:49,830 -Wes Bos: the dangerous slippery slope. - -47 -00:43:50,009 --> 00:47:25,470 -Scott Tolinski: Yeah, so it's like stuff like that, for me was for my diet plan was getting rid of that stuff. I replaced chips with baby carrots, which is an awesome idea because I love baby carrots. And it turns out though, when I got the stomach flu, we weren't sure if it was the baby carrots. Oh, no, that was one of the two items that we've had the dogs and we both had like so it was either baby carrots or rotisserie chicken. And because of that we haven't bought baby carrots again because neither of us can think about it. Unfortunately, that one's out of the door right now. But I look forward to the return of baby carrots. But like finding like little things that you like, like I like snack if I'm looking to snack on something, you know that that's a nice replacement to me. So just being able to remove those calories or replace them with something that's much better for you. And actually, here's something I just started doing in the past week. This is my first week. In fact, today is Friday. So add on Sunday, I'll have done one full week of this. I can't necessarily talk too much about its success or anything like that. But I've started doing something called intermittent fasting is like several flavors. I became really, really into it. A couple of weeks ago, and then it's just like, screw it, I'm gonna start doing it. In fact, whenever I talk about intermittent fasting, the joke is, is that if you watch Stranger Things that Courtney turns into that, the little boy who has the monster inside of him, she's like, he doesn't like that. Like, he doesn't want me to do intermittent fasting because she thinks I'm going to try to make her do it or something like that allowed her to do. But she's just like, No, I don't I don't want any part of your fasting. I'm like, that's, that's cool, like. So the intermittent fasting is basically not eating, the way that I'm doing it, there's several different flavors, the way that I'm doing it is to not eat for 16 hours, which sounds maybe like a lot. But when you think about it, it's not a lot at all. It's essentially just skipping breakfast. So if I ate dinner at 630, and I, whatever I ate dinner at 630, then I can't eat again until I believe 1030 the next day. So 630 to 1030. That doesn't really sound that bad. Like I never really had snacks at night anyways, for me just be like, skipping that breakfast meal. And that 16 hour window, what it does is it sort of causes your body to like burn through some of its fat storage is instead of other things that it wouldn't be looking to do. But in addition, and there's all sorts of like, really interesting benefits from like, suppose that cognitive benefits but also like, things like you have a greater tolerance to drops in blood sugar, your your blood sugar will sort of like, perform better because it's being like trained, right? Like anything, you're training yourself, yeah, to be able to handle periods where you're not eating. And only that, but you're not going to be hung. Like if you ever get stuck in a place where you can eat for a period of time, you're not going to be cranky and grumpy and, and all this stuff, you're going to be like, totally cool about it. Because you're used to this this state. It's sort of like people who take cold showers or whatever like that to train themselves to different temperatures and stuff like that. So you know, I said, I've only been doing this for a week. I'm not doing it for the fat loss, I have a pretty low body fat percentage already. I'm just doing it for some of these little minor benefits here and there. And so far really liking it I I can't say if I'm going to continue to do it or not. It's definitely something to look into. But intermittent fasting again, there's like a Reddit with a whole bunch of people talking about it and success stories. And now there are people who have lost a lot of weight people who do intermittent fasting with other things to lose a bunch of weight. - -48 -00:47:25,500 --> 00:47:52,950 -Wes Bos: Yeah, it's pretty big in in the keto world as well. It's not something I've tried just yet. But I've heard that people who are trying to especially in like, there's another like kind of like subculture of keto, which is people who are trying to gain a lot of muscle while on keto. And when you're in your cutting stage, when you're trying to get lean drop some body fat, they seem to a lot of them seem to be doing over the 16 eight, intermittent fasting, it's pretty neat. - -49 -00:47:52,980 --> 00:48:25,800 -Scott Tolinski: Yeah, that's actually where I heard about it from was like a powerlifting podcast. And then the one like two, these guys were like, huge names in the powerlifting community were about this, like, Yeah, I do 16 by what you know, every year for a couple years. And I was really surprised by it, because I thought it was straight up for losing a lot of weight. And I guess there's just a lot of other benefits for it. So I've been pretty psyched on it so far. But that said, it's easy to do this for a week. And be like cool about it. Like let's see, you know, a month from now, if I'm saying the same thing, or if I abandon entirely, - -50 -00:48:25,830 --> 00:48:30,870 -Wes Bos: we'll do Where are they now? fitness in six months and see where we are, I see where we're at. - -51 -00:48:31,800 --> 00:49:01,950 -Scott Tolinski: So okay, so we talked a little bit about nutrition. There are like we we mentioned a little bit about making like a nutrition plan. I want to emphasize that like dieting is not a good plan. Like just say I'm gonna go on a diet because it is temporary. And the moment you stop that diet, you're gonna go back to whatever you're doing, you're gonna put on all that weight again, and it's not going to it's gonna have a net negative, right, you're going to be at the same place you started. So like really changing your, like permanent nutrition plan is a better way to be. Absolutely, yeah. Yeah, - -52 -00:49:01,980 --> 00:49:39,000 -Wes Bos: your relationship with food needs to change. And I'd have to say that like when you do go out and have a beer or when you do cheat and have like a little bit of something that you not don't usually do have. It's so much better. It's like I guess the or does that thing like delayed gratification really does work? Because like we I was on it for two months. And then I went to New York and I didn't care about it for a couple days, even though I like I still kept pretty good to it just because I really enjoyed that, that way of eating. But I think we went and had some pizza and it was like, Oh, this is amazing. Rather than like I used that pizza a couple times a week. Right? - -53 -00:49:39,180 --> 00:50:01,350 -Scott Tolinski: Right. You don't need that. Like that's all thing is that like if you have it a couple of times a week. It's like not as good and even sometimes you feel crappy after it and stuff like that you have like I'll just go get pizza and you're like, Okay, maybe I shouldn't have like gotten that pizza or something. Yeah, and if he if you do it is more of like a irregular thing. It just becomes a better experience overall. - -54 -00:50:02,370 --> 00:50:03,870 -Wes Bos: So totally agree - -55 -00:50:04,140 --> 00:50:09,900 -Scott Tolinski: about nutrition. Let's talk a little bit about like supplements because as you probably know if you've done anything and some SOPs, - -56 -00:50:10,589 --> 00:50:30,750 -yeah, like the supplement industry is absolutely, like gigantic and people are gonna try to sell you on everything. So like, I'm not necessarily going to sit here and say you need this and you need that. I'm just going to talk a little bit about what I use. Wes is going to talk a little bit about what he uses and why. And maybe just a little bit about our views on on supplements. - -57 -00:50:32,010 --> 00:50:33,690 -Wes Bos: Yeah, um, you want me to go first? - -58 -00:50:33,720 --> 00:50:34,680 -Scott Tolinski: Yeah, kick it off. - -59 -00:50:34,710 --> 00:51:52,230 -Wes Bos: Sure. Um, so what I'm taking right now is I'm actually not doing taking protein which is is kind of interesting. It kind of threw me because every time I've ever worked out Yeah, big scoops of protein and this chocolatey shake after. But because of the the macros that I talked to you about earlier, it you have to be careful that you do not have too high of protein, you need to make sure that you're you keep with that. fats, protein, and carb layout mom, but what do I take? The deadlift guys got me taking branched chain amino acids, which is kind of interesting. There's specifically one Hold on, let me find it. It's called amino energy is bcaas. And what that does that helps repair in correct me if I'm wrong, helps repair like any like sore muscles that you have. And as your muscles sort of build themselves back up after working out, this will help to speed up that process. And it definitely does work. I can definitely tell when I haven't taken them because I'm sore for for much longer. And what's cool, is they they taste awesome. You can get all these really delicious flavors. And you you scoop them in a huge ass thing a wash like JC carries around this like, like get in the states have like a gallon of milk in this like big goal. - -60 -00:51:52,290 --> 00:51:52,830 -Scott Tolinski: Oh yeah, - -61 -00:51:52,830 --> 00:52:30,600 -Wes Bos: I think we have. So we have bags of milk in Ontario, which is very bizarre. Yeah, we could talk about that. It is weird. But we have bags of milk. And so he carries around this thing and it's blue. And it looks like he's carrying around like a gallon of Windex. And I was just talking to him on Skype he swigs from and I started dying. I was like, What are you doing? But anyway, so that has caffeine in it, which is great because it gives you a little bit of a boost the boost, which is kind of cool. Sometimes I take a pre workout. So there's all kinds of different pre workouts out there, which will it'll kind of Kochi up before you go workouts, - -62 -00:52:30,600 --> 00:52:42,690 -Scott Tolinski: some of them had like so like, even like five years ago, one of the pre workouts which you can't like buy anymore had like a relative of meth in it. And it's usually like before people knew what it was in it you were just taking you're like, Oh my - -63 -00:52:42,690 --> 00:52:43,230 -Unknown: god, I - -64 -00:52:43,230 --> 00:52:44,400 -need to go work out. - -65 -00:52:44,940 --> 00:52:48,960 -Wes Bos: This stuff is not it's like you, you take a scoop of it, and then you're like tingling? - -66 -00:52:50,100 --> 00:52:52,770 -Unknown: Like a couple, beta alanine. And yeah, - -67 -00:52:52,799 --> 00:53:38,730 -Wes Bos: yeah, so every now and then when I'm feeling like I haven't taken it in probably a couple of months. But every now and then when I'm tired and I want to like just kill it. I'll take a scoop of that. I'm on Geno flex, which is citrus quadrangularis apparently it's for joint support. Getting old, I'm almost 30 now I got to make sure my joints are in good, good shape. Fish Oil multivitamin, those things are just generally good for metabolism and making sure that you're you're getting all of your all of the different vitamins that you need. So I wouldn't say not a whole lot of stuff. It does seem like a lot of stuff but no, it's good. It's good stuff. I found that they they work pretty well. So I've been happy with them. Are you? - -68 -00:53:39,030 --> 00:54:21,570 -Scott Tolinski: Yeah, and that's the thing like I also take a multivitamin and it's one of those things that people will say like you don't need a multivitamin because you get nutrients through your food right but like 990 Brown This is a made up statistic but 90 like aren't getting the all of the nutrients so like what a multivitamin does is sort of just fills in the gaps Yeah, talking like a men's specific or a lady specific multivitamin. It's going to be good for you especially as we're getting older right I'm 30 and you probably don't need it when you're younger but as you're getting older it's definitely something that's gonna help you out so I do take them men's multivitamin I take the now now brand you see now all over Amazon they make really nice stuff. - -69 -00:54:21,780 --> 00:54:31,890 -Wes Bos: Oh, we should like to that I'm taking the one called Vita gym, but the gym because I ordered everything from bodybuilding.com and Oh, nice. Everything on there sounds so douchey but - -70 -00:54:31,890 --> 00:55:50,040 -Scott Tolinski: Oh, it does. Yeah, I know. It's all about it. So yeah, in addition to the multivitamin, I also take the the quadrangular, whatever that one for joint support. This is the first time I heard of it, Dev, the dev lips guy told me about it. And like the first time I'd ever heard of this, I have awful joints, my wrists. I went into the doctor one time because my wrists were hurting and the doctors like well, just like the bad news is like you have no cartilage in your wrists. Also abuse, like from doing all the breakdancing stuff, which is really super hard on your wrists apparently. And the easiest. So here's your options. He's like, your wrists are like in a lot of pain, so we can give you a steroid. The only problem is, is that your like, wrist will be worse over after six months, but it'll feel good right now. Like, why is that an option like you're gonna give it six months like he's like other than that you just like, tough it out. So yeah, my wrist had been absolutely shot for a long time. It's my own fault, I take full responsibility for it. So I take that for joints. It I actually have noticed a big thing. It helps with my carpal tunnel, which is carpal tunnel, I did not get it from bad posture. I got it from breakdancing and then like the computer work does not help it. So but just being raw that - -71 -00:55:50,250 --> 00:55:56,160 -Wes Bos: just so you so you actually notice the difference after taking this cissus quadrangularis. - -72 -00:55:56,250 --> 01:00:46,380 -Scott Tolinski: Yeah, I'm really hard on my wrists. Yeah, twice a week. So I've noticed a big difference. In terms of just the amount of general pain I'm in when I leave practice, which my pain should be zero, but unfortunately, I'm not smart enough to like not to do things on my wrists. You know, it's like, Yeah, what's the, I don't know, I want to do this. So I'm gonna do it, I guess. So in addition to that, I do take protein powder. I take the I think on nutrition brand, it's really good stuff. Yeah, I take it post workout to just sort of I do like pretty heavy lifting stuff sometimes. So I'll take it, then I'll take it maybe before practice if I'm going to be working really super hard. Like I said, I've pretty low body fat percentage. So it's mostly for me about like keeping that muscle on that I have and not letting my body burn that off. And then I take creatine which is like as a ton of misinformation about it. But creatine is one of the hands down like best supplements you can take if you're doing any sort of weightlifting, what it does is like surrounds your muscles with water and helps them heal faster. It also makes you look stronger than you really are because it gets a little bit of water weight in your muscles. But creatine is one of those ones that they're just like people were thinking that it gave you like rage symptoms and all sorts of stupid. It's like, it's like one of the most mild mannered supplements out there. And if you check out the science behind it, it's like one of the most scientifically backed safe supplements that exists. So I take creatine, I take this stuff called citrulline malate or citrulline de maleate, which is again, it's it's just for like straight up athletic performance, it's good for muscle endurance, muscle endurance is something I really super need when I'm you know, at the third hour of a breaking competition, and my whole body wants to give out. So that stuff really, really helps. It also gives you a sick pump. When you're lifting weights. Again, it makes you look stronger than you really are. Oh yeah, I actually really like it. I just started taking it maybe like six months ago. And I've really enjoyed it. I take psyllium husk which is just straight up fiber. It's like these fiber capsules, that you take three of three times a day. And it does, it's not like a it's not like it doesn't do anything for you, other than gives your body like maxed out on daily fiber requirements. Most of us, most of us don't eat enough vegetables, which is where you're supposed to get a lot of your fiber from so it fills in that fiber gap, the dietary fiber gap. But other than that, I don't think that's it. So just protein, creatine, citrulline, malate, and psyllium husk and then a multivitamin. I also take caffeine as a supplement, which is like I bought a this is actually purely from a financial perspective. Because I like coffee, my stomach doesn't like coffee, I like tea. And I obviously like Redbull. But I found on Amazon, you can buy a bag of 200 milligram hokay pills, which are not like they're not like they're not like no dose. They're like bulk supplements. Calm is a really great website for ads, where I buy all my supplements is bulk supplements. And so it's basically just like, you take one of these, and it's the equivalent of having two cups of coffee in the morning. But then you get the caffeine without anything additional. Right? And the bag of 300 200 milligram caffeine. Like capsules is like 13 bucks. So for 13 bucks, you have caffeine that's going to last you the entire year. And why if I want a coffee, I'm not going to take one of the years or if I want a tea or whatever. I'm not going to take one of these Yeah, if I just want the experience of having the caffeine in the morning and then you're all straight. Obviously, it's important to know your like caffeine limits and people look at this and they'll say like, Oh crap, caffeine pills or something like that because there was an episode of Saved by the Bell where Jesse was taking caffeine pills and she was getting nuts on him or there or something but yeah, but like they remind his kids Yeah, right now These kids. But actually like, the regular sort of, you know, caffeine range for people is anywhere from like 100 milligrams to like 400 milligrams, which is maybe like four cups of coffee over the course of a day. So if you're taking one 200 milligram pill, you're like, right and dead center in the middle of that. And even like the the warning limits for caffeine is like up around 1000 milligrams or something like that. Obviously, caffeine isn't something you want to mess around with, because there is like, pretty easy to overdose and kill yourself on caffeine. So you know, be careful. And obviously keep it in that like under 400 milligram range, and you're good. But I found that that has been like a nice little thing for me financially because then I don't have to spend all this money on coffee or tea or Redbull, you know? - -73 -01:00:46,770 --> 01:00:49,920 -Unknown: Yeah. I get myself a bag a lot. Yeah, - -74 -01:00:49,950 --> 01:00:56,010 -Scott Tolinski: yeah. Just keep it away from the kids and the dog. Yeah. Anything? Anyone? Yeah. Because it's kind of dangerous stuff. - -75 -01:00:56,160 --> 01:00:57,300 -Unknown: Yeah, totally. Totally. - -76 -01:00:58,590 --> 01:01:09,660 -Scott Tolinski: Yeah, so Okay, so we covered we covered the whys, we covered the house, we covered supplements and nutrition. Is there anything else you want to cover? - -77 -01:01:10,140 --> 01:02:07,170 -Wes Bos: I think that's that's it. For me. I'm I mean, like, I'm just a couple months in on sort of this, like, new fitness life that I've been living. So I'm sure that I have new new stuff and new tips to say, but it's pretty interesting stuff. I Hopefully these tips are helpful to someone who's maybe thinking about getting getting into better shape, or maybe you're feeling a little bit not as energetic as he used to be, and you want a little bit better focus. I'd be really curious to hear. And maybe I'll even see you in the dev dev lives chat room. Yeah, if you if you do that, I'd be curious to see how well it works out and what other tips people have, as well. So if you have any tips for your own fitness that you found work really, really well make sure you tweet them at us. Because I'm still learning just tons and tons. So it's helpful. Even just talking to Scott here today, it's helpful to find tips like bags of caffeine and stuff. - -78 -01:02:07,410 --> 01:02:35,010 -Scott Tolinski: Yeah. It's like one of those things. It's like, I guess my biggest takeaway here is like, don't feel like it's too much stuff because you don't need any supplements. And you you don't need an exercise plan. Like you need to get moving several times a week, you need to do it regularly. And you need to cut your your calories out where they're the easiest possible ways to cut your calories out with pops and stuff like that. - -79 -01:02:35,040 --> 01:02:38,820 -Wes Bos: Yeah. Well, one thing I should say, Sorry, cut you off. - -80 -01:02:38,850 --> 01:02:39,570 -Scott Tolinski: Yeah, no, - -81 -01:02:39,900 --> 01:03:51,090 -Wes Bos: oh, one thing I would say in terms of the calories is get a calorie tracker for at least the first couple of months. Because it's amazing what you think you're doing okay. But it's really easy to quickly go 10 to 20% over your calories when you think you're being good. And then even if you're over, you're not going to lose any weight, you're going to gain weight, right. So I use my fitness pal and I just input it, it's got a little barcode scanner, you scan all your you scan your bacon, or whatever it is. And you can just add all of the portions that you've done, I've got a little scale on Amazon that's super helpful is like eight bucks, and you weigh all of your food. And being able to do that after after a couple of months, you sort of get an idea of, of how how, what's bad for you, and what's good for you and how much you can eat in a day. But that was really really key for me because there's a lot of kind of like, Whoa, I was eating way too much of that or, or Wow, I could eat I could eat a lot more like I was some days I would not track it and I'd be super hungry. And then I would just put in everything I ate and I'm like, oh I still 400 calories left I can I can eat my big My favorite thing in the world is to make guacamole with pork rinds. Because it's like the keto you can't have chips when you're doing keto, but you can have fried pork skin. - -82 -01:03:53,430 --> 01:04:50,790 -Scott Tolinski: Yeah, man. Yeah. Again, it's like whatever gets you to do it. There's some people who are all about that, like that analytical mind that you want to see all of those calories. Yeah, if that's the encouraging thing that gets you to do it like, man go right for that. And if you're the kind of person that that sounds totally overwhelming to like, Ah, you know, don't do because you don't have to write you don't have to, but as long as you're doing something, it's it's going to improve your life. And I guess that's my, my, like I said, my takeaway is just do something. And if you're the type of person who's analytical, you want to get in depth with it. Yeah, calorie count is going to blow your mind. But more or less just move. Stop eating bad stuff. Yeah. I don't know take it seriously because it's serious. And you're going to be a better developer designer person because of it. So make it happen. Don't neglect it. It's important. - -83 -01:04:52,710 --> 01:05:33,230 -Wes Bos: Awesome, so let's move into some sick pics. So keeping with the fitness my sick pick is just going to be a pair of sweat pants that I never I was never the guy that wore sweatpants ever actually didn't even own a pair of sweat pants until a couple years ago but I wear them at the gym. And I've I found that I get really picky about the sweatpants because I want to have my phone in the sweatpants. And then if they don't have zippers on the pocket, then they fall on your phone falls out. Or the it's too small or the zipper is hard to open. So I settled on the Nike tech fleece sweatpants which are if you're looking for a nice set, they are the ones that you want. - -84 -01:05:33,930 --> 01:05:43,860 -Scott Tolinski: Nice. Yeah, I got some nice sweat pants myself that are definitely gym ready to a crucial piece of equipment. Got a nice - -85 -01:05:43,860 --> 01:05:45,780 -Wes Bos: zipper pocket on it. Oh, they - -86 -01:05:45,780 --> 01:05:51,300 -Unknown: don't. Your phone's gonna fall out. It does gonna crack your screen. It absolutely does. - -87 -01:05:51,330 --> 01:07:42,230 -Scott Tolinski: Yeah, I got a bumper case on I'm bummed. Okay. My sick pick is going to be a trigger point grid foam roller, which is like this little thing. It's like a foam roller. What it does is I got one of those. Yeah, it's it's basically like a personal massage. So it's this foam roller. It's like a, it's like a tube. And it's made of foam and plastic and you put it underneath your muscle and you roll around on it. And what it does is it works out knots and all this stuff in your body. But if you're sore, it's one of the best things in the entire world. It's basically like getting a massage at your home. They're pretty cheap. They They range from all sorts of different prices. I have the triggerpoint grid foam roller, it's awesome. I'd leave it in my living room, and we're sitting there like watching TV or Netflix or something. And I'll be like just foam rolling left and right because it makes you feel and recover a lot better. It actually can give you some sweet flexibility gains to which I'm all about I'm like I need that stretching every night. So this thing like really helps just sort of work out those kinks in your muscles. And you man if you have something especially if you have posture issues or you've been sitting in your chair weird, this can be really super good for your back. Another thing I use a lacrosse balls, which you can get from Amazon, they're just like dense lacrosse balls, and you could put them underneath the sore spot in your back and just lay on it for a little bit. All of these things are important because like I said, we sit in chairs all the time, and definitely your back and your shoulders to get that like Turkey neck, we're like leaning really far forward can be like awful for your, your, your backfields. So yeah, trigger point, massage foam rollers like the greatest thing ever. I've had it for a few years, it's held up perfectly. I don't know when I would ever need to buy another one. It's great. Yeah, - -88 -01:07:42,270 --> 01:07:50,550 -Wes Bos: I got one as well. It's like it's super cheap, like 20 bucks or something like that. And I just need to use it a little bit more than than I currently do. I - -89 -01:07:50,550 --> 01:08:05,970 -Scott Tolinski: like the idea of putting it in front of the TV though I'm gonna steal that anywhere. Anytime there's like something I want to do more of I put in like, I want to play the guitar more put the guitar right in front of the TV. Or put in like I have all that stuff. our living room is just like filled with my my stuff that I want to do. - -90 -01:08:06,900 --> 01:08:10,680 -Wes Bos: I like it. Cool. Any shameless plugs that you got, - -91 -01:08:11,160 --> 01:09:15,660 -Scott Tolinski: I have a I have a CSS layouts course coming out at the end of the month, I'm hoping to get it out the last week of November, I'm looking at the 27th as a release date, but it's not set in stone, it will be out before the 30th. And we do a bunch of modern layouts teach you to build like the Instagram layout responsively and all sorts of cool ways we build my website using CSS Grid, we're building like Facebook, and we're building trust, not Trello we're building a Tweet Deck, a bunch of like modern stuff using CSS Grid Flexbox. All those tools. It's not specifically about CSS Grid, but it's gonna teach you those properties and all sorts of stuff like that, just new ways to look at layout in ways that we haven't had before. So plugging that in addition, I'm going to be doing a Black Friday sale for a level of pros, you're going to get a big discount on the yearly plan if you sign up for a year on Black Friday. So by the time this episode comes out, which is what the 22nd - -92 -01:09:15,870 --> 01:09:19,470 -Wes Bos: Yeah, it'll be right before Black Friday, right. So - -93 -01:09:19,500 --> 01:09:30,270 -Scott Tolinski: yes, so yeah, so on that I believe it's the Black Friday is the 24th and I am awful at dates. Is Thanksgiving really on the 23rd? I'm just - -94 -01:09:30,300 --> 01:09:45,350 -Wes Bos: Yes. I already had Thanksgiving. Oh, yeah. But uh, we've we sort of adopted the whole Black Friday thing, which is bizarre because we also have a song called Boxing Day, which is 26 is when our deals come. But now I have double deals because we love deals, - -95 -01:09:45,390 --> 01:09:46,380 -Scott Tolinski: double deals, deals, so - -96 -01:09:46,950 --> 01:10:00,210 -Wes Bos: I'll be having some black Friday sales, all of my courses are going to go on on sale as well. So you'll likely get a couple emails from me with many exclamation marks and countdown timers and all the kind of things that work to sell you stuff. Bom Bom - -97 -01:10:02,180 --> 01:10:03,540 -Scott Tolinski: sounds good looking forward to it. - -98 -01:10:03,629 --> 01:10:06,470 -Wes Bos: Cool. Other than that, see you next week. - -99 -01:10:06,660 --> 01:10:18,960 -Scott Tolinski: Alright see it, head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show until next time - diff --git a/transcripts/Syntax200.srt b/transcripts/Syntax200.srt deleted file mode 100644 index da36d4588..000000000 --- a/transcripts/Syntax200.srt +++ /dev/null @@ -1,780 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,820 --> 00:00:11,340 -the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bos. Oh, welcome - -3 -00:00:11,340 --> 00:00:20,820 -Wes Bos: to syntax. This is the podcast with the tastiest web development treats out there today is show 200 Wait, I got that. - -4 -00:00:24,630 --> 00:00:27,030 -Scott Tolinski: That wasn't even a real laugh. That was the soundboard laugh. - -5 -00:00:28,800 --> 00:00:49,380 -Wes Bos: Anyways, thank you so much for tuning in. This is a kind of exciting we are doing a live stream of our syntax right now at syntax comm Ford slash 200. Yeah, obviously you know that if you're listening to this live, but thank you so much for tuning in. Thank you so much for making 200 episodes happen. My name is Wes Bos with me as always is Scott to Lynskey. - -6 -00:00:49,380 --> 00:00:49,890 -Unknown: Hey, - -7 -00:00:49,890 --> 00:00:50,400 -Wes Bos: how you doing? - -8 -00:00:50,400 --> 00:00:51,390 -Scott Tolinski: Good, how you doing? - -9 -00:00:51,390 --> 00:00:56,520 -Wes Bos: I'm doing good. We got a ranger snow storm going on right now. So kind of excited about that. - -10 -00:00:56,820 --> 00:01:00,960 -Scott Tolinski: We have a raging snowstorm going on over here to double snowstorm, - -11 -00:01:00,990 --> 00:01:57,240 -Wes Bos: double snowstorm all the way. So the way that today works is that we are going to be answering a bunch of listener questions we've taken in a bunch of questions from you. We use this thing called pigeon hole, which is pretty cool. They gave us access to their software, when we did both of our live events. And then we they also said like, hey, like, why don't you try this for your 200th episode? And we did. And that's awesome. So if you want to submit a question, while you're listening to us on the live stream, go to syntax.fm forward slash 200. And you can ask your question there, and you can vote on your favorite ones. Today, we are sponsored by two awesome companies. First one is Log Rocket, which is going to track all of your front end events and give you sort of a treasure trail to what went wrong and sanity which is a structured content, CMS. It is your headless CMS tier, head full front end. - -12 -00:01:59,130 --> 00:02:01,560 -Scott Tolinski: Those are the kinds of things we can edit out typically. - -13 -00:02:04,410 --> 00:02:26,370 -Wes Bos: Except for you how many people are watching it right now? 122? Yeah, you 122 are enjoying it live. Alright, so I guess we just kind of go through the questions and talk about that. If you've got any questions you'd like us to answer anything related to love, or life or web development as well. You can you can ask that. You want to grab the first one there, Scott? - -14 -00:02:26,400 --> 00:02:58,800 -Scott Tolinski: Yeah. So the first one the the question with the most amount of votes here is we're rolling into 2020 make some wild Oh, wild and fun predictions about the next about what the next decade will hold for web and the development of it. Some might call that web development, the web and the development of it. So 2020 wild predictions, I'm going to have a different answer. If I were to think about this for a little bit longer. Do you do have some predictions offhand that you can go with? Or do you want me to go? - -15 -00:02:59,520 --> 00:04:05,819 -Wes Bos: Um, we talked about this, like the last two years, we talked about, like, what do you hope for the next couple of years? And and I think for both of those episodes, I said, I think it's gonna get easier to do tooling. And I hundred percent think that we are in a good spot right now with tooling. I haven't written a web pack all year, I've things like parcel two are coming out, which is makes it going to be really easy. It's going to be good. So like, I don't that's not the answer. But I'm really excited that that is actually gotten really good, I think and I hope what 2020 will hold is frameworks that will make it really easy for us to build complex applications. So thinking about Keystone has just come out and that's going to make it really easy. The what's the one that Sasha is working on? volgen Vulcan j. s, that's gonna I think that will probably gain some popularity. I think like it's especially once suspense, react, suspense come out. That coupled with a lot of these things that people build on top of that, I think it's going to make it really easy and really awesome to build complex apps with these frameworks. Yeah, - -16 -00:04:05,880 --> 00:04:15,479 -Scott Tolinski: I mean, that's the trend that we're we're sort of been saying, I don't know if that constitutes as a wild prediction, though. that constitutes as, like, I know, a mild prediction. Like, - -17 -00:04:15,539 --> 00:04:16,350 -Wes Bos: yeah, while I - -18 -00:04:16,350 --> 00:04:19,800 -Scott Tolinski: continue in the direction that it's been going in up getting more and more. - -19 -00:04:21,419 --> 00:04:30,600 -Wes Bos: I don't know, like this stuff doesn't move that fast, right? No, so no, no, I don't know if there's gonna be anything that's like, Whoa, nobody writes HTML anymore. - -20 -00:04:30,600 --> 00:04:35,850 -Scott Tolinski: You know, that's pretty well, prediction. There was West ba nobody will write HTML and - -21 -00:04:35,910 --> 00:04:38,610 -Wes Bos: no one's gonna clip that nobody writes HTML or - -22 -00:04:38,610 --> 00:06:10,560 -Scott Tolinski: No, nobody writes CSS. Don't Don't click that because I like CSS. We should just make a bunch of hot hot, hot take sound bites? No, no, I you know, I mean, largely, I feel the same way we, we didn't seeing a lot of things things generally get better and better. I'm really excited for you know, I'm excited for what the React team will do in 2020. And predictions wise, I don't know, I think there, there would be some really interesting things happening. If once suspense starts like really making its way, I think we're gonna see a bunch of like really interesting patterns around data loading, and controlling the mounting and unmounting of components. So none of those are none of those are very wild. I agree with like everything, I think there will be something that comes up to be a little bit more of the fills in the space for rails of JavaScript, whatever we talk about. And you see some of this with next JS right now. The NDC, some of it with Gatsby were these these two platforms that have like really grown this year. And neither of these platforms really seemed content in, like staying where they are. Both of these platforms are like constantly growing and improving. Specifically, if you think about it, like the API routes, and now there's this new I don't forget what it's called s w. Are react hooks remote. What does it stand for react hooks for remote data fetching, stale, while revalidate? Do you ever seen this? No, I - -23 -00:06:10,560 --> 00:06:12,330 -Wes Bos: haven't looked at it. I've never seen this. - -24 -00:06:12,840 --> 00:06:52,110 -Scott Tolinski: Yeah, no, this is a this is a, it's a project from zite, about loading data with suspense. And it can use graph qL can do a bunch of stuff. It's pretty interesting. And it works with suspensa. It looks very nice. I haven't gotten to use it yet. But a bunch of people have been sending it to me. Check it out when you get a chance. But I mean, that just goes to show you that like companies like zite are doing things like this to make things generally easier and more interesting. I Yeah. Like, you know, what are some of the things that next .js has? Or doesn't have that like Meteor had it doesn't have like an account or a database or something like that, right? - -25 -00:06:52,410 --> 00:07:02,040 -Wes Bos: Yeah, that's like, well, somebody and I know that people are working on in Keystone, Vulcan, things like that. But like, oh, Gatsby or knacks please just bake in account. Yeah. - -26 -00:07:02,040 --> 00:07:29,460 -Scott Tolinski: Yeah, best thing about Meteor was that you would just fire it up, and you automatically had accounts set up, and you didn't have to do anything. So I think that'll be interesting. And you know, Gatsby's doing a lot of big changes, you see them working in the space with their themes, they're just making adding additional functionality really easy. So I think it'll be very interesting to see what both of those platforms do next year, and I think they're, they're on the, you know, they're on the ticket to do something hot. - -27 -00:07:30,119 --> 00:07:41,580 -Wes Bos: And a bunch of people in the chat have been saying, like, ie is gone or dead. It's using WebKit. So like, ie is now using WebKit, or edge is using WebKit as a core and they have that new confusing sushi logo. I love the logo. - -28 -00:07:41,580 --> 00:07:47,700 -Scott Tolinski: I saw Henry has made the little surfing emoji guy on it. And I was like, that's pretty cool. It's pretty sweet. - -29 -00:07:48,300 --> 00:08:23,130 -Wes Bos: But like, does that mean that like, the days of complaining about edge are over? Like, do we have to start complaining about Safari now? Or Mardi Gras? Is it gonna be like easier? Like, is the like? I don't know. Cuz it used to be like, Oh, cool. I can't wait to use that in 10 years. Can we start using things now? I don't know. Maybe? I think that the like, the feedback cycle for like, here's a new feature, it's implemented, everybody can use it, I think that's gonna get a lot shorter. Yeah, in the next year now that the officially IE is going to be underground. - -30 -00:08:23,399 --> 00:08:42,240 -Scott Tolinski: And like custom properties, man, what's cost? Like everyone can use CSS custom properties and not have to worry about it. I think everybody's gonna find out just how darn awesome they're there. My, like, one of my favorite things in web development is grid and custom properties. Those two really make my life a ton better. - -31 -00:08:42,799 --> 00:10:10,830 -Wes Bos: Next question we have here and we got this question a lot. And I we also have been working on a show about it? And is is Wix going to steal my job? Or is webflow gonna steal my job? Or are these site builders like Squarespace? And I know like web flow is probably a little bit different than than all of these that we're lumping them in. But like, are these tools going to totally replace us as web developers? And we'll I think we've got an entire hasee treat, like we could talk about this for 20 minutes, I think. And I think, if your job is making pamphlet websites, where you add content, and you drag and drop things into spots, I think it will, because quite certainly, if I look at this, from a client point of view, the client would much rather log in and make the changes themselves. Not all the cases, but then a lot of times they rather just do it themselves, then have to like book time and three weeks on somebody's schedule. So I don't think that that's to be scared of I think what that's going to do is it's going to free us up from doing that base work. Because as tools get better, it's easier to like go ahead and build like a full stack website and server rendered react and I think we just shift up to stuff that's a little bit more complex. Everybody, the people that are at the top Start working on self driving cars. And then us regular people who were making like portfolio websites start making like a little bit more complicated web apps that, that these things can't do. - -32 -00:10:10,980 --> 00:10:30,720 -Scott Tolinski: Totally. Yeah. And we're gonna see, I mean, we're gonna see some tools come out that are gonna scare you a lot more than Wix will like, the only thing. The only thing scary about Wix is that they email me too dang much telling me that, hey, why don't you make a tutorial series on Wix? It's like, I don't really think my audience would appreciate that. You know, - -33 -00:10:31,020 --> 00:11:07,830 -Wes Bos: I should tell you a hilarious story about them. So they, like Wix is doing some server list stuff. Yeah, yeah, I that's actually kind of cool. But like, they emailed me and said, like, Hey, will you tweet out? Anybody building a site with wind? And then they said, We expect the responses to be negative, and then we'll swoop in my eyes with ours. Like, there's no way I'm gonna tweet, anybody building a site with, like, they were like, wanting to pay me just to tweet it and cause ruckus. So they could swoop in and save the day. Yeah, yeah. - -34 -00:11:09,660 --> 00:11:45,299 -Scott Tolinski: Yeah, I know, I get emails like that. And I just say, Hey, you know, I don't know, I would appreciate that. And they'd say, Well, actually, we do think you're on it. Well, I know you think that, but I don't think that but so yeah, I don't know. I you just wait till you see some of these tools coming out? You know, I think have you have you checked out? My I think it's mod modules. mod duels? I'm gonna. I think it's just supposed to be modules. Let me my jewels app. Okay, the spelling, I'll post this in the chat is m ODULZ. dot app. This is going in the live stream. - -35 -00:11:45,330 --> 00:11:51,990 -Wes Bos: That sounds like a toy that my, my daughter went by? Yes. Hey, Daddy, can we get some more modules? - -36 -00:11:54,600 --> 00:12:43,200 -Scott Tolinski: What is this, you seen this. So this is basically you could think of this app as figma that spits out react code that allows you to edit react code and have it edit the components. Now, there's some plugins and stuff working with figma, or sketch that kind of do this to some sort of an extent. And then there's framer, which sort of erroneously got billed as being that kind of tool, but isn't. And this is really that whole design and develop in a mean, you can see the interface looks just like figma. So it's sort of like a figma, like application here. That is for creating code. And one of the interesting things about this is I don't think it is react only, I could be totally wrong about that. But I'm pretty sure - -37 -00:12:43,350 --> 00:12:45,149 -Wes Bos: there, there's a few logo there. - -38 -00:12:45,179 --> 00:13:27,120 -Scott Tolinski: Yeah, there we go. Yeah, there's the view logo, and the mobile view that was hidden. So it's pretty interesting allows you to design and develop and deploy your design system without writing code. I've been in chats with these guys for a little bit. So I'm going to try to get access at some point. They didn't want to give it to me just yet. Obviously, I don't think they want me to see it when it's not ready. So yeah, I think the tools like this are to me a little bit more interesting than Wix, because it's going to allow people who are better than you at designing to design applications that actually work. So I think that's a that's a major concern, more than like, you know, a default crappy template from Wix or something, - -39 -00:13:27,659 --> 00:13:29,100 -Wes Bos: or you want to grab another question. - -40 -00:13:29,940 --> 00:13:40,260 -Scott Tolinski: This is a fun question here, because it is a special 200 episode question. The question is, what does the future look like for syntax? - -41 -00:13:40,260 --> 00:13:41,250 -Wes Bos: gram? - -42 -00:13:44,640 --> 00:15:13,080 -Scott Tolinski: No, okay, what is the future look like for syntax? To be entirely honest, it probably looks very similar to what the present looks like, we're going to continue to release you know, the same episode schedule that we're releasing, where we have a tasty treat a little 20 minute, 30 minute episode, and then a tasty treat a longer episode. And, you know, I think one thing that is it's as you do these episodes, it's not necessarily easy to lose sight of but you know, the, the end goal of what we're trying to do here is trying to make everything worthwhile educational and, like full of like value, I'm gonna say and not value like the monetary yet tasty. We want to be providing like, something that you can grow and use in your career and not just something that's, you know, filler to listen to, while you're sitting on the train. Like we want that time to to really grow your skill. So I mean, if what is the feature syntax looks like I think the the feature syntax, we're we're gonna continue to get better at the format and formula of what we've been doing, but I can't really see it changing too too much. We might have some tasty morsels coming down the pipeline, some things that are not like guaranteed yet, so we're sort of sitting on some stuff. We're gonna be doing a live episode next year next March in person on stage, React a THON. But other than that, I don't really know too much. What do you think? - -43 -00:15:13,590 --> 00:15:35,669 -Wes Bos: Yeah, I honestly think like we just keep doing I do. And I think we can try new things every now and then, like, I was trying to get a Google recruiter to come on the podcast, because he like, emailed me and said, Hey, you want a job? I was like, No, but can you come on the podcast and tell us how to get a job at Google? And he didn't reply. We could tell them, they could be anonymous. And we could do a voice transformer, - -44 -00:15:35,700 --> 00:15:37,080 -Scott Tolinski: yeah, transform their voice. - -45 -00:15:37,500 --> 00:17:25,340 -Wes Bos: We had to do whiteboarding interviews, just like a black shadow over. Honestly, I think all that is important to me about this podcast is that those who are tuning in are actually learning things. Yeah. And also that we continue to have fun and enjoy recording it. Because it's takes a lot of time every week, to do this type of thing that prep it and all that. And if it becomes like a slog to do it, then you can you can hear that in people's voices when they're on a podcast. And sometimes they skip a week and things like that. And then it just becomes a bit of a, it feels like homework, right? Yeah. And I want to make sure that this podcast keeps being fun, and people keep learning things from it. Like I was telling Caitlin the other day, I was like, I'm so glad, like we sold our sponsors for all of next year already. And I was like, I'm so glad that we are done that. So that we don't have to try and like beat our numbers every single time. Yeah. Because you know, those you watch people on YouTube. And they have to like resort to clickbait and coming out with these like awful videos, where they're just sort of grasping at straws to keep the viewership up, or to hit some sort of like arbitrary. Yeah, thing that they need for either monetization or whatever. But that you become beholden to this, these these things that maybe aren't the reasons why you started doing it in the first place. Totally, totally. And I want to like, keep true to that, where the reason we started this podcast, is because we didn't think that there was very good podcasts out there that actually taught you stuff. Like this isn't just Scott and I sitting around shooting the shoot. We're actually trying to explain stuff to you, and that you walk away going, Oh, I have a better idea of how CSS variables work, or I know, I kind of understand how data goes from the back end to the front end now. - -46 -00:17:25,580 --> 00:18:16,310 -Scott Tolinski: Totally. Yeah. I mean, it makes sense. Because we both have been teaching web development for so long now that like that is the first and foremost the goal of this thing. So that's what I see the future looking like. And again, it's it's a blast to do I have a great time doing it. And you don't that's going to hopefully continue into the next year. One thing that's not fun is solving bugs. because let me tell you, you're already stressed out that you have a bug, your code doesn't work. Things are a huge bummer. So what do you do? Well, you fire up Log Rocket and Log Rocket is the bug finding platform that gives you a session replay. I don't know how many people watch sports here. But in sports, they kick the ball, they throw the ball and something happens, right? And then if they don't get it, right, they check the replay. And they say, Oh, look at that replay. - -47 -00:18:16,500 --> 00:18:18,720 -Wes Bos: Oh, that's a good, that's a good analogy. - -48 -00:18:18,750 --> 00:18:48,560 -Scott Tolinski: It's a good analogy, man. And so with Log Rocket, you can check that replay. And you can see the Network tab, you can see the error states, you can see all that good stuff. All those things that happen when the user click the bug, as if it were happening right in front of you, allowing you to solve the bugs that you come up in your code all the time. Let me tell you this kind of tool is absolutely invaluable when you're trying to figure out what the heck happened. And you don't want to have to call up your user or email them and say, What did you do? What did you click on what browser we're using any of that stuff? So check it out. - -49 -00:18:48,750 --> 00:18:58,080 -Wes Bos: It's Log rocket.com forward slash syntax. And with that, you get 14 days for free. Try it out. Thanks so much to Log Rocket for sponsoring. - -50 -00:18:58,080 --> 00:18:59,640 -Scott Tolinski: Thank you luck rapid. - -51 -00:18:59,640 --> 00:19:33,900 -Wes Bos: Next question we have here is what emerging technology advancement, advancement most excites you in the next five to 10 years. I thought this is sort of unrelated to web what might be related to web development. And I very much have two things that I'm really excited about. First one is electric everything. electric cars. Yep. I really hope all cars are electric in I don't know how long it's gonna take. It's it's certainly going slower than I had hoped. But electric cars, electric leaf blowers, things like that. Like it's fall in Canada right now and do - -52 -00:19:33,900 --> 00:19:37,170 -Scott Tolinski: my electric leaf blowers. The craziest thing on the planet, - -53 -00:19:37,260 --> 00:20:06,300 -Wes Bos: they're so good. And like we've got everybody with these old like red, big like bus on the end of a on the end of a hose blown. They're so loud, so obnoxious. I would love to get rid of all gas power things just because they're allowed and bad for the environment. So that's one thing I'm excited about. And the other thing I'm excited about is fast internet everywhere, because of what that means for remote work because of what that means for access to information for everybody, like, - -54 -00:20:06,350 --> 00:20:10,230 -Scott Tolinski: just think about how much JavaScript you can download with a fast internet connection. I - -55 -00:20:10,230 --> 00:20:15,630 -Wes Bos: just want bundles to be huge. I want to be able to ship every framework and not have to worry about it. No, but like - -56 -00:20:15,630 --> 00:20:17,250 -Scott Tolinski: all of them at once. Yeah. - -57 -00:20:18,270 --> 00:20:48,300 -Wes Bos: I think like, as a web developer, one of the privileges we'll have is being able to live ideally, wherever we want because of remote work. And because of the internet, right, and I one thing that is severely stopping a lot of people right now is access to good internet. And whether it's Google or Elon Musk's satellites that float in the air, or five G, which is is going to be rolled out. I don't know if 5g will be the answer for remote areas, because 5g is super fast, but it doesn't, it doesn't go very far. - -58 -00:20:48,300 --> 00:20:49,890 -Scott Tolinski: It's got a small range. - -59 -00:20:49,920 --> 00:21:17,250 -Wes Bos: Yeah, that's the whole thing. Like the lower frequency, like you have is like not 800 megahertz. That's why your, uh, your radio is on like 870, the farther it can go, the higher the frequency, the more bandwidth you can do. But the slower can or sorry, that the smaller the ranges. So just, I don't know, some sort of fast internet, whether whether that's going to be 5g, 4g satellites, I'm just really excited for that for everybody to have access. - -60 -00:21:17,520 --> 00:21:48,480 -Scott Tolinski: I'm excited for augmented reality in a way that I think other people might not be as excited about it. And I mean, people are excited about augmented reality. But like, think about this, like, we're so tethered to displays, right, I have this ultra wide display on my desk, it takes up a ton of space. But what happens if like, all of the sudden, I have infinite displays built into my glasses, and I look this way, and there's a display, and this way, and there's an ultra wide display. And this way, there's a display with all my stuff on it. And like nothing on my desk. - -61 -00:21:48,830 --> 00:21:50,250 -Wes Bos: That'll be really cool. Like, - -62 -00:21:50,600 --> 00:22:07,740 -Scott Tolinski: man, I you know, who knows when that kind of tech would be available. But like, just think about the abilities you have when you're not tethered to hard devices screens to look at and you can see things anywhere you look I am. I don't know, augmented reality to me is one of those things that really fascinates me. - -63 -00:22:07,830 --> 00:22:12,150 -Wes Bos: Yeah, even on our car, we have the heads up display. Have you ever driven a car that was one of - -64 -00:22:12,150 --> 00:22:17,310 -Scott Tolinski: those? No, but it's like the coolest thing ever looking at. It's like a director Jenny - -65 -00:22:17,340 --> 00:22:39,990 -Wes Bos: on the windshield. And it tells you how fast you're going. And it will give you the nav directions, man like that's like perfect. I always think like augmented reality, some nerd with goggles, swooping around, but like that's also augmented reality is that you're just projecting the speed and information. And I can scroll through my my songs on with the steering wheel without having to look away and totally cool. - -66 -00:22:39,990 --> 00:25:40,320 -Scott Tolinski: You know what, I don't ride a motorcycle. In fact, they terrify me. But I still in the coolest AR devices i think i've ever seen was like, not a real device. But a like a prototype or a concept of a motorcycle helmet that had like rear view mirrors right here and your speeds and like blind side things. And I'm just thinking like this is actually going to change people's experiences in life in general, making things safer or more excellent. By putting the information, like you said, where it needs to be in front of us, you can change the songs without having to, you know, look away from the road. I don't know, ar is one of those things that absolutely really fascinates me. So I think that's what I'm most excited about. Okay, let's do another question here. What do you guys think of the I like this one from Ian, what do you think the future of a web hosting might look like? Is the Netlify. And now going to eat up the world? What should hosting companies do differently? hosting companies should get off their butts and start doing things like Netlify. And now, one of the things that I've always hated about hosting companies is just how difficult they make literally everything, like setting up an SSL certificate, right? Yeah, like I had a host one time, and I bought an SSL certificate through them for whatever, 150 bucks whatever they were back when that was the thing. And the process for getting it going was so darn frustrating. And then there jQuery time or crab timed out, and it was like not working correctly. And you're just like, why I just paid 150 bucks for this thing? Why do I have to do all of this other stuff just to install this SSL certificate on my server that's managed by you guys anyways. So I think the services that take the approach of Netlify. And now and if for those of you who have never used those platforms, they basically do just pointing your code to it. And it takes care of all this stuff that's annoying to set up like continuous deployment, or, you know, the actual managing of servers because you can have serverless functions at scale differently and things like that. You can have just your server side stuff, not even on the platform like Netlify has their identity stuff or their functions and all those things. Things that just make it really easy to not have to manage all of your own stuff. So in my opinion hosting companies need to offer more for what they're doing, and not worry about being, I don't know, I don't wanna say not worrying about being the cheapest. But like, because now and Netlify are darn pretty cheap comparatively, I think they just need to innovate, everybody get too complacent with the HTML and PHP web that we're living in. And these companies like Netlify, and now have really figured out what kind of things people actually want to use. When a company that I really like that kind of in the hosting space, but not hosting specifically, is DNS simple. Have you ever used DNS simple? - -67 -00:25:40,590 --> 00:25:42,540 -Wes Bos: No, I don't think so. - -68 -00:25:42,720 --> 00:26:22,590 -Scott Tolinski: DNS simple takes the idea of all that stuff, and is like, we're gonna be a domain management service. But we're going to add a one click everything. So you want to add an SSL on one click it right. And this is outside of Netlify. And outside of now, so like, let's say you were hosting somewhere for a client or something, or even, oh, I want to add Google email, one click, I want to add CloudFlare. One click, it's one click everything for your DNS. And it's really super good. You know, and I always hated like setting up mail gun, and like mail guns, like paste this into your DNS, but then you go, yes. And it's like, those options aren't even there. Or it requires it to be in a string or whatever. - -69 -00:26:22,620 --> 00:26:24,450 -Wes Bos: It's a little bit different. Yeah, you're like, do I include - -70 -00:26:24,450 --> 00:26:38,280 -Scott Tolinski: the quotes or not right? And it drives me nuts and DNS simples like, Oh, just paste this two things in here, click Oh, and it's done. So services like that, that take the guesswork out of any of that stuff is is what hosting companies need to do? - -71 -00:26:38,610 --> 00:27:28,110 -Wes Bos: Yeah, I think like, anytime there's a new need, there's always a hosting company that that will come up and be the hosting company for that specific thing. And then that's why people are loving things like Netlify. Now, because it makes it easy to host things. And I think like, we'll see a lot of both of those, we'll see a lot of companies that specialize in things like now and then Netlify and Heroku. And then we'll also see the total opposite was just just like raw server, and you can go for like a backblaze, or Amazon or Digital Ocean, something like that. Or even though like, I think Digital Ocean is a good example. Because like, like Digital Ocean is just like raw server space. But they don't approach it in such a way that like good luck, like Amazon dice. They like make it easy, right? - -72 -00:27:28,140 --> 00:27:39,480 -Scott Tolinski: If you want to go for the other end of things where it's like not doing everything for you. But like digitalocean has that figured out because they still give you so much. All right. Next - -73 -00:27:39,480 --> 00:29:13,260 -Wes Bos: question we got here is Wes in your node course, you globally set the font size to 10 px. So this is referring to setting 10 pX on the HTML element with the logic that allows the reason why you did this is because the mental math is easy to rems is equal to 20 pixels. My question is, and often people will set the base to 62.5% as well. And that brings it down. We answered the difference between that once on the show. I forget what it is, though. But the question is why? Why do that if you really want to calculate two pixels, why not just use pixels at the end of the day. And there's one comment on this thing, which says the user can change their browsers font size, and all the text will scale accordingly. That's not true anymore. If you use pixels, and the user scales a browser, it will scale accordingly. That has been true for like six years or so. But like why do I use that? Because setting a base size does allow you to scale up the entire website without the user having to scale it up. Because if the user scales up your design, everything, the images, the buttons, all of the UI will scale up. And often it's helpful to give your user the ability to just scale up the text and not all of the UI with it. So that's why I think using rems instead of pixels is better. We have an entire show very early on about the differences between that and also how to use rems and EMS together because it's not like rems replaced EMS. Yeah, cool. - -74 -00:29:13,260 --> 00:29:14,250 -Scott Tolinski: Cool. That's a good - -75 -00:29:14,360 --> 00:29:15,000 -Wes Bos: visitor there. - -76 -00:29:15,000 --> 00:29:18,930 -Scott Tolinski: We got a visitor. We got a guest. Hey, come on and say Hi everybody. - -77 -00:29:18,960 --> 00:29:20,760 -Wes Bos: Welcome. Get an earbud - -78 -00:29:20,790 --> 00:29:22,350 -Scott Tolinski: get in here. But yes, you're the everybody gave - -79 -00:29:22,350 --> 00:29:25,350 -Wes Bos: her the wrong you gave her the wrong one. This is the cutest thing I've ever Oh, - -80 -00:29:25,350 --> 00:29:30,540 -Scott Tolinski: yeah. You're right. Yeah. - -81 -00:29:31,590 --> 00:29:32,400 -Unknown: Hi. - -82 -00:29:32,910 --> 00:29:33,540 -Wes Bos: Hi, - -83 -00:29:33,540 --> 00:29:34,770 -Dr. Courtney Tolinski: Happy 200 - -84 -00:29:35,460 --> 00:29:38,880 -Wes Bos: Thank you. Do you want to introduce who this is Scott? - -85 -00:29:38,940 --> 00:29:50,670 -Scott Tolinski: This is uh, this is my wife, Courtney. Dr. kolinsky. She is a What is today's Labor Day? So it's better? Oh, no. Veterans Labor Day. Oh my God. - -86 -00:29:50,700 --> 00:29:51,960 -Dr. Courtney Tolinski: He doesn't know any days. - -87 -00:29:51,960 --> 00:29:54,480 -Scott Tolinski: I don't know. holiday. So sorry. Yeah, - -88 -00:29:54,900 --> 00:30:00,000 -Wes Bos: it's Remembrance Day here in Canada. Oh, yeah. But do you is that a holiday for everyone? In - -89 -00:30:00,000 --> 00:30:03,660 -Dr. Courtney Tolinski: the state's Veterans Day for government workers, yeah, - -90 -00:30:03,690 --> 00:30:07,380 -Wes Bos: Cannabis, just government and banks are closing down remember saying that's it? - -91 -00:30:07,610 --> 00:30:13,800 -Scott Tolinski: I don't even know when Halloween is so my holiday. Holiday knowledge is just awful. - -92 -00:30:14,910 --> 00:30:18,780 -Wes Bos: So what do you think about Scott and the podcast? How's it doing? - -93 -00:30:19,170 --> 00:30:26,460 -Dr. Courtney Tolinski: I think he's doing great. Yeah, I think you guys are getting like the full flavor of who Scott is. And what I deal with every day. - -94 -00:30:28,410 --> 00:30:31,110 -Wes Bos: is Scott always dancing and bopping around? Oh - -95 -00:30:31,110 --> 00:30:32,220 -Dr. Courtney Tolinski: my God always. - -96 -00:30:33,300 --> 00:30:36,930 -Scott Tolinski: Did I kick kick the air filter or some? I don't even - -97 -00:30:36,930 --> 00:30:37,920 -Dr. Courtney Tolinski: know. Yeah, - -98 -00:30:37,950 --> 00:30:43,200 -Scott Tolinski: I just another day dented the grill a couple summers ago. I just yeah. hurt and stuff. What - -99 -00:30:43,200 --> 00:30:44,910 -Wes Bos: What is Scott's worst habit? - -100 -00:30:45,860 --> 00:30:48,390 -Dr. Courtney Tolinski: his worst habit? You know, right. - -101 -00:30:48,390 --> 00:30:49,140 -Wes Bos: We got embarrassed. I - -102 -00:30:49,140 --> 00:31:04,800 -Dr. Courtney Tolinski: think the worst one is that he likes to take his socks off. And like stuffed them in place. I don't know. Do you stop them in the couch and like other places, and now our son is starting to do it. So I don't know if it's just like part of who he is. Or like what he's watching. - -103 -00:31:04,860 --> 00:31:16,140 -Scott Tolinski: I think it's the albis Landon takes my socks off. Yeah, yeah, he does. He does. Take them off. Now. I don't know. They're not for me. But he takes him not only to wear socks. I work from home here. And I like to. - -104 -00:31:17,520 --> 00:31:23,850 -Dr. Courtney Tolinski: I like to be I want to meet Kate. Okay, like, I didn't even text her. Hi, everyone looks so cute. - -105 -00:31:27,180 --> 00:31:29,100 -Wes Bos: How's it going? kailyn just brought me sushi. - -106 -00:31:29,640 --> 00:31:30,360 -Unknown: Ah, - -107 -00:31:30,480 --> 00:31:43,920 -Wes Bos: I'm just we're recording our 200th episode. Right now. Your live. Just very many hundreds of people watching you. She says she says Nice seeing you. - -108 -00:31:45,110 --> 00:31:48,780 -Dr. Courtney Tolinski: I'm a big fan of Kate air newsletter every week. - -109 -00:31:49,380 --> 00:32:02,360 -Wes Bos: Oh, awesome. That's cool. Yeah, we are gonna have our wives on a show. At some point, and we'll talk about I don't know. Sure we were gonna talk about yet but embarrassing Scott. Yeah. - -110 -00:32:02,610 --> 00:32:06,990 -Scott Tolinski: Yeah, that's the story. Yeah. Yeah. There's their stories. Yeah. I'm always goofing around. - -111 -00:32:09,480 --> 00:32:12,780 -Dr. Courtney Tolinski: Alright, well, how about Nice to meet you. Congrats again. Both - -112 -00:32:12,780 --> 00:32:14,160 -Unknown: of you. Thank you. Thank - -113 -00:32:14,160 --> 00:32:15,300 -Wes Bos: you. Appreciate it. - -114 -00:32:15,450 --> 00:32:16,080 -Scott Tolinski: All right, Sammy. - -115 -00:32:24,180 --> 00:32:25,610 -Wes Bos: Awesome. Well, - -116 -00:32:25,610 --> 00:32:33,390 -Scott Tolinski: thank you for Courtney for popping by Veterans Day, man. Apologize for goofing that one up. - -117 -00:32:33,989 --> 00:32:37,470 -Wes Bos: All right. You want to grab another question? Sure. - -118 -00:32:37,470 --> 00:34:14,790 -Scott Tolinski: Okay, this is a fun one. West posted a picture of himself in 2005, I posted one of myself from 2006 as well, which is a funny picture. So Wes, and we both picture posting pictures of ourselves from 2005 2006. If you could go back in time, what would you say to yourself, um, I would tell myself to to get a single focus rather than, you know, focusing on too many things. I was trying to do a lot of things, especially back then I was trying to do music, I was trying to do video I was even in those disciplines, I was trying to do too many things. For instance, I was producing videos, but I was doing the editing, the videography, the audio, I was doing everything myself. So like, not only was I trying to do too much in a very large sense of thing, video, audio, web, whatever, I was also trying to do too many things within those one specific things. Even in web I was trying to do, you know, I was trying to learn at the same time, PHP, whatever, JavaScript, CSS all at the same time. And I would tell myself to pick one thing, focus on it, work through it, get better at it improve and then move on from there before going to the next thing. I think I'd still have a really hard time with that. But um, I just some like dose of reality to say like, you're never going to make it doing all of those things. And that makes no sense anyways, at that time, so that's what I would tell myself and I think it would have been, you know, get some dang focused, man, as you can tell, I still struggle with those issues. - -119 -00:34:14,850 --> 00:35:46,680 -Wes Bos: Yeah. But honestly, I think like a little bit of that is, is fine, because I have that as well, where I should be working on something, but I just goof off on YouTube or post a tweet or like, do something totally unrelated. But many of those things have have done very well for me. And it was only because I had sort of gone off course and done something so I think a little bit of that is fine. Obviously it's worked out for you and and I What would I say? Um, I think just like, keep doing it, like keep building stuff keep, like building audience like things like that. Like I very much remember when I was like I need to build an audience if I want to be able to do the stuff that I'm doing. Very much need an audience of people who will support me and pay for courses and watch videos and like things like that. Because otherwise without them, I can't do any of this kind of fun stuff that I thought I was doing. So like, maybe I should have done that earlier. Maybe I should just like, tell myself to just keep keep building stuff keep focusing on because I also remember just taking weeks off at a time because I was so frustrated. And I didn't, I didn't really have anybody that I could tell me like, That's normal. The stuff is very hard. It is very weird. So I don't know, just kind of keep going at it double down on it. Because like that, that early momentum, especially when you're you're young, like 2005 I was, I don't even know like, what how old are you what that was? What, 15 years ago? - -120 -00:35:46,680 --> 00:35:47,280 -Scott Tolinski: I was in college. I - -121 -00:35:47,280 --> 00:35:49,560 -Wes Bos: was, like 17 years old? I - -122 -00:35:49,560 --> 00:35:52,170 -Scott Tolinski: think sophomore? No, I would have been a freshman in college. - -123 -00:35:52,190 --> 00:36:11,730 -Wes Bos: Yeah, I was in grade eight. So like, that's the best time of your life. You got all kinds of time to goof around and stuff like that. So I don't know. I'm pretty happy with what I like the whole course. I did work very hard when I was young, but just think I just tell myself just double down and keep working hard, because that will pay off huge in the long run. - -124 -00:36:12,090 --> 00:36:20,040 -Scott Tolinski: Yeah, totally. Yeah. I would also tell myself to get on Twitter earlier. Now puts it on Twitter until like, way late. So - -125 -00:36:20,040 --> 00:36:21,150 -Wes Bos: Oh, yeah. - -126 -00:36:21,209 --> 00:36:23,820 -Scott Tolinski: Yeah, I was very late to that. All right, let - -127 -00:36:23,820 --> 00:36:33,030 -Wes Bos: me grab another one here. Should we do a YouTube question or iframe? I mean, I asked this question. But I think it's interesting. And I feel like sharing it with you ask your - -128 -00:36:33,030 --> 00:36:39,060 -Scott Tolinski: own question. I will answer their own question. Let me do 100 episode. - -129 -00:36:39,230 --> 00:38:23,340 -Wes Bos: Let me explain. I mean, some some time here. So the the pigeonhole to embed, to embed the pigeon hole into our website, I just whipped up an iframe and gave it a height of like 200 pX, because with like an iframe, you can have variable width, but the height of it, like essentially what I wanted was height equals however high the body of the iframe is. And that's really hard to do with an iframe. Because when you go across origin on an iframe from one domain to another domain, you can't reach into the DOM of that iframe. Yeah, and modify it, because that's a security issue, like you could iframe in someone's bank account, and start selecting buttons and clicking on them. So if you want to know how high the body is, of an iframe document, you have to the the iframe document needs to be sending that information up to the parent and and to communicate between an iframe and, and a parent, you need what's called post message and a lot of things like Zendesk and all these like web apps that integrate via an iframe, but it looks seamless. That's how they work is that they're constantly checking for a height change in the body. And then they send that data up to post message. And then on the the parent website, you catch that data and then you you set the style attribute of the iframe to be that high. So that's just kind of interesting. I've definitely implemented it myself a couple times. In the past, just when we've been doing it, the big one used to be with Facebook apps. Remember Facebook apps used to be iframes? I don't know if you remember that or not. - -130 -00:38:23,360 --> 00:38:32,760 -Scott Tolinski: You know what? Facebook apps? Um, yeah, I don't remember ever. I'm trying to remember what I even used Facebook apps for. You know, - -131 -00:38:32,790 --> 00:38:39,300 -Wes Bos: we did a lot of like contests. Like enter upload a photo cutest baby, cutest puppy. Like, I - -132 -00:38:39,300 --> 00:38:43,230 -Scott Tolinski: know, a lot of I've never built a Facebook app. But I remember man, like. - -133 -00:38:44,960 --> 00:38:45,650 -Wes Bos: Yeah, - -134 -00:38:45,860 --> 00:38:51,540 -Scott Tolinski: that's a weird part of like, the history of the web. I think. So that is - -135 -00:38:52,350 --> 00:39:02,100 -Wes Bos: that is it. post message. I thought I would get a little time to that. A little tasty treat. take home. Yeah, I get back a little dogs - -136 -00:39:02,100 --> 00:41:09,150 -Scott Tolinski: back there answering your own question here. Yeah, yeah. We got another one until well, let's do this one here. What's one thing you see devs stressed out about for? No reason. So what's one thing you see dev stressed out about? For no reason, the most? aka, what are some things that people worry about that maybe they just don't need to worry about as much or at all? Some of these things are, I think, like premature performance optimization. I'm very performance minded, right? Very performance minded, small bundle sizes, fast code, get everything and test it right. But a lot of times people are wondering about the speed of something that they're doing before they're even doing it to the point where they don't even know and I think pre optimization of code that you haven't tested or haven't seen, you know, there's the whole thing In test driven development, where you write some code, or you write your test, then you write your code, you get the test to pass, and then you refactor the code into something that's perfect. And I'd like to take that stance on performance, a lot of the times where I get something working first, then I monitor and I test its performance, I see how it handles, and then I see if I need to make any further modifications to make this code more performant. Rather than starting at the right, what are the things that I have to do to hammer in performance ahead of time? Because, to be honest, you know, think somebody asked me in my bought my react course, like why I'm not showing use memo and use callback, the ways that people use them occasionally. And for the most part, it's like, you don't need to use use memo and use callback every single time that you think you might need to because chances are memorizing, sure of memorizing can, you know help there? And, you know, we'll caching those values can help. But is that something you need to worry about? When you're learning the basics and learning how to become a beginner? I you know, I don't know, I think I think that's something that you you fix when you need to fix rather than before you need to fix? - -137 -00:41:09,440 --> 00:42:02,400 -Wes Bos: Yeah, the one I see all the time is people stressing out about frameworks changing orne going from one framework to another, or, or the the framework itself changing or things moving too fast. And the answer to always, this is like, honestly, if you're good at if you're good at JavaScript, these things are never going to stop changing, it's always going to come out from under you. That's just the industry that we're in. Yeah. But if you can honestly get good at just JavaScript, then like, your skills will transfer no sweat from one over you spend a couple days a week or so take a course just learn the ins and outs of how that framework works. You'll be able to pick it up no problem. So don't stress out about that so much your job is not going to be gone if react goes away tomorrow. Unless that's all you need to know is how to use react. And that's the case you're probably not writing very good react anyways. - -138 -00:42:02,420 --> 00:42:04,890 -Scott Tolinski: Yeah, yeah, no, I feel Yeah. You know, what - -139 -00:42:04,890 --> 00:42:10,400 -Wes Bos: shouldn't stress you out? Yeah, what Sanity, you know, that's you, you were sitting right in - -140 -00:42:10,400 --> 00:42:21,570 -Scott Tolinski: front of you, you know, it shouldn't stress you out managing the backend code when your own. That's why, you know, it's a back end CMS for your front end code, and so much more. Take it away. So - -141 -00:42:21,570 --> 00:43:53,130 -Wes Bos: we've talked about Sanity, as it's called a structured content, CMS. But what I really want to focus on in this ad read is the Sanity Studio. So Sanity is not this typical thing where you log in and start creating all of your content. Obviously, your front end is built in Gatsby react, PHP, anything you want, anything that can consume data. And then your back end is the the server is is hosted by Sanity. But the actual interface for editing your data is called the Sanity Studio. And that's an open source app where you can you can also host the UI for editing it, you can host that yourself, you can bring in your own react components to yourself. And the Sanity Studio is really cool, because it's not like you have to like type all of your own inputs, and handle save events and things like that the Sanity Studio includes that, and you can hook it right up to your Sanity, where that usually goes wrong in a lot of cases is they're like, Okay, that's good. But I have a special use case. But because Sanity Studio is open source, you can create your own inputs, you can create your own modules and create your own handlers, different ways to display the data yourself, which is pretty cool. So you want to check it out for your next project, go to sanity.io and use the forward slash syntax URL. So sanity.io forward slash syntax, that's going to give you double what you normally get on the free plan. Check it out. Thanks so much to Sanity for sponsoring. I've got another question here. - -142 -00:43:53,520 --> 00:44:29,340 -Scott Tolinski: And I'm gonna answer a question while you're thinking and somebody posted in the comments, saying something about an advanced react spring course, I wanted to state because I've mentioned several times I'm going to be doing them but like people are wondering where it is. React spring is in beta for their new version, and I don't want to record and release it. While it's still in beta. I'm gonna wait for that to be released. And then I will record the course. Just so just so that's out there. It's one of those things just like how many times is that burned either of us where you record something and then they slightly change it. So that's, that's, that's the status of that. - -143 -00:44:29,880 --> 00:46:59,460 -Wes Bos: It happens all the time. That's like, sometimes I have to like delay outputting courses just to wait until something is is pushed. Because you don't want it to like put it out and then a day later it's it's out of date. My next question here is from anonymous. Do you feel overwhelmed? Hmm, yes, yeah. Whenever I think of writing a post, I just feel like the space is so overcrowded and I don't want to add to the clutter or overwhelm. So this is a good question. Do you think about writing a blog post? about something you know about? Oh, there's so much out there. There's already ready 400 people that have done a blog post on react suspense. What? Why would I do that? Or why would I make a YouTube video on something? Why would I make a course on something? And thankfully, I never feel like the space is too crowded. I'm working on a beginner JavaScript course right now, how many beginner? resources are there out there? Probably 78. Right, like, there's so many out there. And I continually hear from people. Nice thing about having audiences, they tell me, like Wes, there's nothing good out there. Even there's 78 bad ones out there just nothing clicks with me, right. So like, never underestimate a the way that you can describe something, because someone might really like the way that you do it. And also, just like putting another resource out there, that might be the one banger that that really gets it done for for a lot of people. So don't feel overwhelmed at that just like just do your thing, put your head down. And like, Who was it? Seth Godin, I always say that Seth Godin has this thing, like, you put your work out there. And if people don't like it, it's not for them. And there's so many developers out there that if you think you're, you're good at doing it, then then go for it. And there's a comment on this as well. Like there's no better feeling and finding your own blog posts and solving your own answer. How many times does that happen to me hundreds of times, I google something, my own StackOverflow my own blog posts, my own spectrum thing comes up and go, Oh, I had this problem a year ago. So just simply documenting your own problems is well worth it for the community. How many times you go to a GitHub issue and see 500 thumbs up on someone's silly comment? That's because someone took the time to write a comment, think about what would happen if you wrote a blog post about a problem that you you encountered? - -144 -00:46:59,490 --> 00:47:38,970 -Scott Tolinski: Totally? Yeah, I can do. There's just about like, 100 times where I google something that I've like, done 100 times, but I still want to just confirm it. And then a little Wes Bos blog post comes up, and I'm like, oh, let's click on this one. Okay. No, but for real, I think the big thing for me here is that I recorded a Redux course, what like, I don't know, two years after every Redux course, in the world has been made. And it was mostly because I'd watched all those Redux courses. And I was like, none of these things really helped me understand this. They're using jargon. They're saying, Oh, you connect to a reducer to the transducer into the reformer into this? Oh, yeah. Oh, yeah. Michigan - -145 -00:47:38,970 --> 00:47:39,870 -Wes Bos: a after - -146 -00:47:39,870 --> 00:50:26,850 -Scott Tolinski: reducers. So like, they just start throwing all these words. And when you don't know what any of those words mean, then how are you going to understand the concept? So for me, it was more about I released my Redux course, because the content didn't exist in a way that I like to learn. And I made the assumption, but I think a good assumption that other people would have the same sort of issues, learning those ways that I did. And I was totally right, because a lot of people told me, my Redux course, really helped them understand everything because I broke it down in a different way. And chances are you have a different perspective than somebody else. And your perspective could be the key that opens that door for somebody to say, Oh, now I get it. Okay. So that's really, I think the, you know, the key message there. Now, I have a question here. This question would have gone really well, for a Sanity ad transition. So no, we missed this one. It says naming conventions. How do you say saying, I stay sane? With sanity? No. How do you stay sane with your naming conventions? This is one of my favorite things. I love naming things. Now. I used to not like naming things. But I love it now. Because I've got children. Yes, children. Children. Yes. I love naming children. No, but I love naming things in development. Because like, honestly, there was a time when you you get something and you say, ooh, what do I name this thing? This this this thing's popping up. And I have no idea in the answer to me recently, not super recently, but within the past two years has become make a system for how you name things. And if you have a system for how you name things, you're never having to guess if it's a Boolean, some sort of toggle, it's always like is is open is closed, whatever set closing set open, toggle open toggle closing. And what I do is I have this system of these set words, I'm always going to use every single time for the given action. It's never going to be like change this or whatever this it's going to be set. It's going to be toggle, it's going to be or remove, not delete, whatever. There's a set of vocabulary in the words that I use to name things in the code and it has made my life so much easier when deciding What the heck to name anything at any given point? So that's how you stay sane is you develop a system now, what system? Is there guidelines for a naming system? there? There are some guidelines. If you look at the clean code JavaScript repo, there's definitely some naming guidelines in there. But oftentimes, it's your team and your decision as to what makes the most amount of sense to you. As long as there's a system there. Everyone's going to know what to name things. - -147 -00:50:27,210 --> 00:50:38,820 -Wes Bos: Yeah, I have nothing to add to that. I think that's, that's great. I've never really had an issue of that. And if I were to look at it, like maybe I have some sort of system under the hood, maybe I should try clarify that at some point. Yeah, I - -148 -00:50:38,820 --> 00:50:43,050 -Scott Tolinski: wrote like a little notion page for like, the here's, here's what I think - -149 -00:50:43,500 --> 00:50:49,020 -Wes Bos: you should share that. That'd be really cool. Yeah, show notes show link below. smash the like button. - -150 -00:50:49,170 --> 00:50:56,640 -Scott Tolinski: I don't know if I share. I don't know what how, like permissions work in. notion. No, just hear that copy. Page. Oh, - -151 -00:50:57,360 --> 00:51:00,330 -Wes Bos: or put it in just our guest. Is it just a guest? - -152 -00:51:00,390 --> 00:51:10,320 -Scott Tolinski: I say just but I may as well. But just because everyone hates on me for saying GIF instead of GIF. So last thing I want is to further expand. - -153 -00:51:12,750 --> 00:52:15,570 -Wes Bos: Night. Next question we have from Johnny tight lips. Gatsby is best for static websites. And next is best for apps. That's something we said many times on, on the website, they're referring to us saying that a few times. How does create react app compare with next j s, if you were to start a new react app with a project with a back end, would you use next or create react app. So create react app is a is your baybel your Webpack couple different loaders built in ability to handle CSS, I think it does sass now. So it's all of that stuff packed up into one. And then it gives you the ability to eject from it. And then it will give you the ability to bundle it up. So at its basics, that's what create react app does. Whereas next js is more of like a server. And it has a router baked in it has serverless functions built in. What else does it have built in? Like linking pages that I guess has a router? - -154 -00:52:15,600 --> 00:52:16,260 -Scott Tolinski: Yeah. - -155 -00:52:17,970 --> 00:52:22,140 -Just like built in, it has I mean, some of that sweet pre loading, - -156 -00:52:22,470 --> 00:52:23,910 -Wes Bos: you know, pre loading, - -157 -00:52:23,910 --> 00:52:29,070 -Scott Tolinski: the automatic code bundles, um, just yeah, a lot of good stuff, - -158 -00:52:29,550 --> 00:53:37,410 -Wes Bos: all of that stuff. So whereas create react app is just react and the tools that you need to get a react app pushed out to production. And in some cases, you need to eject from that and manage it all yourself. Whereas next, yes, you sort of like you go at it. The next .js way, you have to code in their conventions, you have to talk about the underscore document j s, the app file the pages, you have to do it in their way. And that's more convention, what's the same convention over configuration figuration, whereas create react app is the other way around, it's you got to configure it yourself, you got to bring in your own router, you got to do all that stuff. And for some people, they rather do that all from scratch, they can make all the decisions for me, I'd much rather just use the next shass and have it tell me where to put the files and how to how to do things. So what would I do probably next jass. But if you're just learning react for the first time, I would probably go with create react app, so you can very easily separate what is react and what is all of this ecosystem built stuff up built around it. - -159 -00:53:37,680 --> 00:56:25,350 -Scott Tolinski: Yeah, that's the perfect answer. Whenever I teach react, I teach it in create react app. But whenever I build anything, I'm not reaching for create react app, because I want that static page rendering, I want that server side rendering, I want those kind of things. I want the benefits that come without create react app. But create react app is the best way to spin up or even like a code sandbox, create react app, it are like the best ways to get quick up and running so that you can start learning react rather than getting bogged down in those platform. So that's that. I mean, I think you nailed it with that answer. There's not really too much for me to add there. those platforms are all good, though. You do want to take the time to learn next. And Gatsby, I think they're, they are dead on with making things just easy enough that you know the hard stuff, the stuff that we don't want to worry about the stuff that gets in the way of perfmon loading speed. I have a question that goes along with this here too. This is really nice related one, which is how much or how much is too much or too little magic in a framework or library. For example, a lot of folks say Laravel has too much going on under the hood or included. Meanwhile, other say react is too open ended. And this is a really good question for me. I recently have released a svelte three course, I released a view course and I released a react course all of which in the beginner sort of realm here so I think I have a handle on these things. different frameworks, more or less in how much magic they have. So we have a lot of magic in spelt, right? The compilers taking care of a lot of stuff. There's a lot of things that aren't JavaScript, even though there's a lot of stuff that is JavaScript, right. But like, there's a lot of magic going on and spelled. And to me, it feels very, very nice to us. Because you don't have to write very much code to do a lot, right? Everything just sort of works. And then in react, you have to write a whole lot like I remember being so annoyed with having to do like dot mind to do my set states or whatever, because it's just like, why do I even need this stuff? Like I get the the technical reason why I need it. But I don't understand why I feel like I'm having to do these workarounds to get this, like, this code. Doesn't feel nice, even though it's working correctly are working nice. So there is these different spectrums. And I'm of the mind that as your product gets more and more elaborate, the less magic is going to be beneficial. And as your project is more and more simple, the magic is going to be better. I started level up tutorials with Meteor with meteors front end framework Blaze. And it was very, very simple. The API tightly integrated, I was doing all my, this is like a neat little feature of Meteor, but I was doing all of my, I don't owe you 99 cents, you - -160 -00:56:26,220 --> 00:56:28,020 -Wes Bos: someone just tipped $1 99. - -161 -00:56:29,250 --> 00:57:35,700 -Scott Tolinski: Thank you, Joe. So voice him on Freshbooks. That's so funny. Um, so I've had the mind that like when level up tutorials was very small, I used so many of meteors magic. And then as level up tutorials got more complex. And I was dealing with subscriptions, I was dealing with sales, I was dealing with importing, I was dealing with different ways the API's being used in the admin section, they made more and more sense for me to remove some of that layer of magic. And there's still magic involved with Apollo and react. There's still some magic there or magic with next and Meteor, how I'm using it. But there's a lot less. So I like magic. But I think as a project itself grows more complex, you want to have a better handle on that complexity. And some people might look at that and say like, Okay, I know this project is going to be this complex from day one. So therefore, I'm gonna go very little magic route out of the box and other people, maybe they're just doing exploration, they're doing their prototype, and you just want to get into it as fast as possible. I say go full force into magic. If you're doing that. That's just my look on it. - -162 -00:57:35,730 --> 00:58:29,970 -Wes Bos: Yeah, I think the magic is great for getting up and up and running. And I even think like, as long as they have the ability to get access to the lower level stuff, whether that's injecting whether that's access to the document and next jazz, that's totally fine. I don't think Laravel is too much magic, because like, there's like huge web apps built on that entirely. It's no different than just using any other PHP framework. So I kinda have to make that decision yourself, but certainly do like some magic. Let's do one more or two more. We'll see how we go. I just got one non tech question for Wes. And follow you on Instagram. And just Kate is my wife ever get tired or roll her eyes at you buying all the difference? Yeah. Especially for your cabin. Or she rolls with it so I'm kind of I buy I often what I'll do is I'll buy broken stuff some random stuff I - -163 -00:58:29,970 --> 00:58:35,310 -Scott Tolinski: broken stuff online like big mouth Billy bass. I wouldn't be surprised if you buy big Oh, actually, - -164 -00:58:35,310 --> 01:00:30,960 -Wes Bos: I that's that's a failed one of mine Actually, I once bought a big mcfeely bass. And it was broken like he would he was short out when he did take me to the river. So he would sing the whole song. And then as soon as he goes Take me to the river, it would go okay. So I said, Bill, I fix it. So I bought another big mouth Billy bass that was a Santa one. And I said I need the gear from the broken one. I'm going to put the gear in the Santa one and then I'll have one good Big Mouth Billy bass. And both of them it didn't work they were not the same gears inside. And that was a failure and early on my wife got annoyed when I would do that because that's a waste of money right? I spent like $10 on too big mostly bad. But I think now she knows that like like I also buy I bought a whole bunch of these broken kids cars for my kids and and anytime I buy one of these things that's a risk because it could be it could just like not work totally at all. But she's learned to like she knows like that's who I am and I love to fix these things and I love to just like Tinker and and sometimes it means I have to throw it in the garbage and are wasted money but like I learned a lot about gutting a big mouth Billy bass I learned a lot about how it works and things like that. So yeah, big mountain believe. My track record is pretty good. We have three wicked kids jeeps at our cottage. And I've got like, I got like 100 bucks into all three of them. And they're wicked and the kids have so much fun. So like, she's she's sort of learned, like, Okay, I need to let them have some time to tinker. And I'm trying not to waste too much money on these things. But more often than not, I'll just like buy something. If I if I see a good deal at a yard sale, buy it, and I'll flip it and make 40 bucks. And then I'll take that 40 bucks and spend it on big mouth Billy basses. And then it's kind of like slush money just to play with there. - -165 -01:00:32,040 --> 01:00:56,010 -Scott Tolinski: Yeah, when I was a like a punk teen, I worked at target for a long time. And I used to like go down the like, the aisles that had those things like big mouth, Billy bass or the this like the dancing Santas or whatever. And I used to just like, push all of them and run away when I was. I was working there and I was just like, oh, man, this is gonna be really annoying. - -166 -01:00:57,180 --> 01:01:05,790 -Wes Bos: Working in that cheap Blaze and I have no idea that somebody just speaking of blazer, - -167 -01:01:07,050 --> 01:02:03,090 -Scott Tolinski: somebody sent a hit not somebody my. So Courtney sister has a son, maybe two years older than Landon, and he sent Landon a birthday card. And the birthday or no, I'm sorry, it was a thank you card. He said Landon a thank you card for his birthday present. And the thank you card is like a like a monster truck in it says let's Blaze and I was telling Courtney like you can't send that to somebody in Colorado. I feel like that has a very different connotation when you get to Colorado. Let's Blaze. We're cracking up about that. So Okay, question here. Let's see. One of them. Show us your office setup. So follow us on Instagram at ST AOL INS KI and you're at Wes Bos on Instagram, I post lots of photos of my office set up there and no West can probably do that. Yeah, he wants to get some dev dev follows. - -168 -01:02:03,230 --> 01:02:10,200 -Wes Bos: I just need to my desk is always a disaster. So I can't take like a beautiful photo. Because it's like, always messy. - -169 -01:02:10,350 --> 01:02:14,480 -Scott Tolinski: So I need to like people who post their beautiful desks like don't work at those. - -170 -01:02:14,520 --> 01:02:32,760 -Wes Bos: No, it's funny. Like, that's not how it works talking to their day. Like, there's like this whole learning to code Instagram, where there's like these people, like, go through my like JavaScript 30. And they all have like, 48 4k monitors and like, your learning code, and you have like an $8,000 setup like I want. - -171 -01:02:34,980 --> 01:02:53,220 -Scott Tolinski: Yeah, it's so funny. Yeah, it's a weird part of Instagram. Or like the the posing for photos in front of my laptop. It's like, here, I'm sitting out on a park bench with my laptop. Like, is your like wife or your husband or your girlfriend or your bar? They're just following you around and like framing up those photos. - -172 -01:02:53,340 --> 01:03:26,880 -Wes Bos: Yeah, it's weird. I've started posting my Hot Tips on Instagram. And I think that is working well. But there's this whole other like lifestyle. People are very attracted to the coding lifestyle, which it's good. Like, but like it's it's not I'm not sitting on park benches and sitting on the edge of a cliff. Like get committing. You know, I'm getting here. I went to a coffee shop the other day, and I was like, someone was oh, I have a question for you. Someone at the coffee shop was doing a FaceTime on speakerphone. Not allowed. No, no. Yeah, - -173 -01:03:26,940 --> 01:04:14,880 -Scott Tolinski: you know what I thought I'd be like witness a major coffee shop, full pause as a developer getting chewed out by his client once just getting ripped apart for not being on deadline and the FaceTime thing or people with their air pods in just like talking away like having a huge long conversation. Now go outside, you can go outside. That's that's the polite thing to do is to go outside. Thank God for noise cancelling headphones. Yeah, like I say, um, okay, here's the one sorry, though. The actual last question that was like a little not actual last. But actual last question here is, how long do you think it will take before we can use suspense for data loading with libraries other than relay? I really liked this question. I wanted to make sure I got asked in this. - -174 -01:04:16,140 --> 01:04:16,800 -Yeah, - -175 -01:04:16,830 --> 01:05:25,770 -I think the answer is hopefully not very long. I think we're seeing that already. I mentioned in this episode, once s w. r, which is a library from the site, you'll want to check out I can post a link here in the chat. This is a really cool library. And this is it gives you the ability to use the suspense with something other than relay. Now, what I'm most excited for is whatever the Apollo team does with suspense, I have no idea what that is. I have no idea what that looks like. If it looks any different or if it's just basically looking very similar to the same. I really don't know, but I you know, this the space is open right now. And I think we're gonna see a lot of innovation around data loading in general, within react. So, yeah, I would think that Singh is at the speed at which this library came out from zite. I think by the end of this year, you'll definitely see a few more things pop up into early next year, you're gonna see more stuff. I think Apollo client three just got announced, even though it didn't say anything about suspense. But I think they're probably heard at work on some sort of solution. - -176 -01:05:26,040 --> 01:05:37,110 -Wes Bos: I did a talk on suspense over a year ago. And like, they've been working hard on it. So everybody knows exactly like what the whole point of it is. So I'm excited to see it come out. I cannot wait. - -177 -01:05:37,260 --> 01:06:08,820 -Scott Tolinski: Yeah, it's funny. I, some of the times have I'm like reading some of these threads about like the problem suspend souls. And as I, you know, I don't know if these are Facebook problems specifically, or if these are problems that an app like mine could have. And then like, just yesterday, I had like, one specific component that was like driving me nuts that I would have been like, you know, I'd prefer if this component would load last, I really prefer this. Like, and that's, you know, suspense gives you some of those controls that we may not have had of like, you know, component odor, or data even order of in which it loads. - -178 -01:06:08,850 --> 01:06:30,480 -Wes Bos: Yeah, I would imagine. We'll see in next 10, we'll see a deprecation of get initial props, which is the special method. They put on all of the classes in order to fetch data, but you have to do it at a page level. I think we'll see that go away. And we'll have suspense come in and save the day there. Yeah. Cool. Well, I don't I mean, - -179 -01:06:30,480 --> 01:06:35,580 -Scott Tolinski: there's lots more questions, but I mean, we could be here for hours if we tried to answer all of them. I'm so sorry. - -180 -01:06:35,940 --> 01:06:44,610 -Wes Bos: Yeah. Well, I don't let us know if you like this sort of like live version of a podcast, and maybe I'll do another one for Episode 1000. - -181 -01:06:47,970 --> 01:06:58,170 -Scott Tolinski: Maybe we Yeah. I mean, I think this wasn't too bad once we got it set up and apologize for any sort of technical difficulties at the front end of this, but we don't do this very often. So that's how it goes. - -182 -01:06:58,590 --> 01:07:05,220 -Wes Bos: Shout out to Marco and Joel, for giving us tips in the chat. Scott owes me three bucks now. - -183 -01:07:06,420 --> 01:07:10,020 -Scott Tolinski: Yeah, we can just chop that off of whatever you owe me for the sponsor. There - -184 -01:07:10,020 --> 01:08:01,860 -Wes Bos: we go. All right. Sick picks Today, I am going to sick pick the world's best windshield wiper blades. I Whoa, whoa, yeah. Lynch's why would show me so I hate it when the windshield wiper like does leaves a streak on it. And because of that, I used to replace my windshield wipers like every couple months, because they would always go bad. And then one day I decided to buy some good ones. And like kind of, they're kind of expensive, and they're the Bosch windshield wiper blades. And we've had them on our car for two years now. And they're still Perfect, perfect streak our streak free they they're really well that goes through they handle ice No problem, which is a problem in Canada. And it's it's such a one of these things were like not a fear of hockey, - -185 -01:08:01,860 --> 01:08:03,120 -Scott Tolinski: it's not a problem with your hockey player. - -186 -01:08:04,470 --> 01:08:29,669 -Wes Bos: It's just one of these things where like you don't have to worry about it anymore and it's just a good product overall. And then I was I follow this YouTube channel called Project farm where he tests everything with your wiper blades, batteries, adhesives, random things like that. And he tested windshield wiper blades and I was like oh man I hope the Bosch when and they did they were like by far the best blades that they tested so if you want some good blades, Bosch - -187 -01:08:29,879 --> 01:11:01,220 -Scott Tolinski: team exploits over here. No Bosch Uh, yeah, I still look them up have to check out I actually probably do need when new windshield wipers it's one of those things that you're like you don't realize that they're they've gotten bad until you're just like, Oh yeah, these are terrible. Yeah. So maybe I gotta I gotta do something about this. I got a sneak peek today of for those of you who've liked some of my podcast picks this is going to be right in line with some of the more popular podcast pics that I've done such as darknet diaries swindled what's the one that is very similar to this this one's definitely like a prolonged story rather than a little miniature stories. But this podcast has been absolutely fascinating. Oh, it reminds me of the the dream the multi level marketing one in some sort of way. So this podcast is called the missing crypto queen. And this is about is from BBC sounds and it's as you know one of those you know NPR style productions whatever that's just doing very good production. But this is basically about one coin one coin I believe is the coin and is about a crypto coin that was just a huge scam and in there some of them are yeah is a huge scam and basically this this woman was who's actually very very smart was getting on the cover a Forbes and stuff and she was you know, hailed as the next crypto queen. And turns out holding was a scam. They at some point in the book very like After it was already being used by thousands of people, or hundreds of thousands of people, they were reaching out to developers to say, Hey, can you build us a blockchain? And they're like, wait, I thought you guys are buying are already selling coins, like how you don't even have a blockchain. And so they just started lying about everything. And it is substantial. And what's crazy is it's like a huge cult. It's like, very cultish. And unfortunately, they've moved into lower economic situations where they're pulling money from people who don't have it and swindling him out of their money. And it's absolutely horrifying. So give it a listen. And if you know anybody who is investing in this coin, tell them to stop it because it is a huge, huge scam. And I've found this podcast to be utterly fascinating and totally, totally horrifying. The there's a huge mystery component to it, because this person has disappeared. And she's undergone plastic surgery, and she's hiding out in there trying to find her. So it's it's just, it's a thriller, it's good. So check it out, the missing crypto queen. - -188 -01:11:01,560 --> 01:11:16,640 -Wes Bos: All right, shameless plugs, I'm gonna plug my upcoming course, which is beginner javascript.com. And I will have more details about that very shortly, I'm really excited to get it launched, it's going to be a banger. So get ready, banger, - -189 -01:11:17,010 --> 01:12:55,949 -Scott Tolinski: this episode's coming on the 27th, which means that my course my next course, will be approaching its release. And that course is going to be on react and TypeScript. I'm gonna be showing you react and TypeScript patterns, we recently rewrote the entire front end of level up tutorials, thanks to the epic life in the chat for working really hard on a lot of that right now. And so we recently worked really hard to get TypeScript all up. We did the API a little bit ago, and now we're doing the front end of the site. And is I I really love it. I get it. I get why people talk about TypeScript and, you know, evangelize for it. I definitely, I don't want to say I ignored it for too long. But I definitely really understand and appreciate the benefits of TypeScript within a react website. Right now, I used to think like, Can I just do all that with prop types and default props? And it's so much better when you read a component. And that component has a little squiggly underline that says, hey, you're missing this required prop. say, Oh, yeah, this is missing this required prop. And I think it's already opened up. It's opened up a couple of bugs that we were having on the site where they were strings were changing into numbers and numbers, were changing the strings and just sort of magically and it really gave me a handle on some of that stuff I didn't really even realize was going on. So check it out. It's going to be on level up tutorials.com forward slash Pro, sign up for the year and save 25% so check it out. Oh, it's the 27th Do you know what that means? Hey, what does that mean? - -190 -01:12:55,970 --> 01:12:57,810 -Wes Bos: Black Friday, Black Friday. - -191 -01:12:57,930 --> 01:13:07,890 -Scott Tolinski: So by the time you were listening to this, the level of Black Friday deal will be on you can get 50% of the yearly subscription by merch. - -192 -01:13:07,949 --> 01:13:18,510 -Wes Bos: Yeah, I'll have mine up as well. I always do half off as well. So check out all of my courses. Wes Bos comm forward slash courses, forgetting that sweet Black Friday deals. Yeah, those - -193 -01:13:18,510 --> 01:13:24,020 -Scott Tolinski: deals got to get those deals. So yes, and if the year say 50%, level up tutorials.com Ford slash Pro. - -194 -01:13:24,229 --> 01:13:36,659 -Wes Bos: Alright. Thanks so much, everybody for tuning in. That was really fun. Thank you so much for making 200 episodes happen. I think it's really cool that we get to do this podcast, and we will catch you on Monday. Bye. - -195 -01:13:37,710 --> 01:13:51,560 -Scott Tolinski: Bye. Peace, peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax201.srt b/transcripts/Syntax201.srt deleted file mode 100644 index 41ba191b7..000000000 --- a/transcripts/Syntax201.srt +++ /dev/null @@ -1,164 +0,0 @@ -1 -00:00:00,359 --> 00:00:00,870 -Unknown: Monday - -2 -00:00:00,899 --> 00:00:19,980 -Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA. - -3 -00:00:19,980 --> 00:00:21,300 -And Scott. - -4 -00:00:23,610 --> 00:00:24,450 -Totally at ski. - -5 -00:00:25,950 --> 00:00:26,850 -Oh, welcome. - -6 -00:00:28,260 --> 00:00:33,720 -Wes Bos: Oh, it's your turn. Sorry. Go ahead, Scott. - -7 -00:00:33,750 --> 00:01:06,060 -Scott Tolinski: Welcome. Well, yeah, let's, let's take this from the top. Welcome to syntax on this Monday hasty treat. We're gonna be talking about some cool new CSS features. And these are gonna blow your mind a little bit. You know, every time CSS comes out with something new, it blows my mind. This is CSS logical properties. And this is largely going to address some of the issues that we've had with positioning things in the current web and how it's changed to be a greater, more modern web. My name is Scott Tolan ski, and with me, as always, is Wes Bos. - -8 -00:01:06,300 --> 00:02:08,819 -Wes Bos: Hey, everybody. Let's talk about today's sponsor real quick. Before we get into it. Today's sponsor is Hasura, which is an open source, real time graph qL engine, so it sits on top of a Postgres database, even an existing database or a brand new one. And it allows you to create a graph qL API right on top of it, they've got all kinds of stuff for deploying to her Roku, or to AWS or Docker scan, I actually saw this at react a THON, and they did like they had, I think they had like eight minutes or something like a lightning talk. And they built an entire graph qL API in that time and, and had it up and running. And the thing scales really cool. Like they have this example where they just slam it with traffic, and it auto scales itself, which is pretty nifty. So you're looking to check out a graph qL API that sits on top of Postgres, check it out. Hasura, it's h a s, u r a.io, Hasura. io, thanks so much to them for sponsoring. Cool. So - -9 -00:02:08,819 --> 00:03:44,340 -Scott Tolinski: let's get into this a brand new CSS thing that has just sort of come to the attention of developers here. And this is going to be changing the way that we really think about and use properties. Within CSS, I think one of the first things you learn in CSS is the standard sort of box model, you have your top left, right bottom, and you think of those Trouble, trouble. And you larger think of those as this vertical, this space that exists in a left to right world and up to down world. And it's always margin, top margin left, or padding, left, padding, top, whatever. But if you think about it, the web has evolved in so many different ways. There's a ton of different languages, I mean, you think about Japanese can go from the top to the bottom, and you have right to left languages, you have all sorts of different ways that language and just in general content is used on the web in should be, you know, should have been used this way from the start, probably. But in 2019 2020, we're given the opportunity sort of fix some of these issues or things that prevented us. Now, I don't know about you, but I've had to work on a right to left to text website before, we didn't bother with the top to bottom text or anything like that. But I've had to work on a left to right text website. And it was not easy. We had a bunch of classes, toggling all sorts of things that, you know, we had to add a right to left class on a paragraph or whatever that would, you know, send it over to the other side, everything felt hacky, and just totally not easy. - -10 -00:03:44,579 --> 00:04:59,970 -Wes Bos: Yeah, I've never had to do that myself. But we said the same thing. When we talked about the new incm methods, if you use this stuff out of the gate, when it comes time to translating your website to something that reads in a different direction, it's going to be much easier to do that. And also like just thinking about, like sharing CSS as well, that the people who you're sharing the CSS with, it doesn't really matter which language they're quoting it in, because it will just work with them. I should say, for all of the the content, I'd got up and running with a sort of this blog post from elide Schechter. And he's got this amazing blog post that just like details, all of it, so we're going to link that in the show notes. Yeah, this good post. And then I also just like took a look at his medium. And man, there's some fantastic content here. So like, we talked about, like, like, How do you stay up to date? Well, I'm going to be reading elide sectors medium now. I just followed him on Twitter, which is e la de sc. And also I had found out about this initially from a tweet from Adam argall Argyle article. What How do you think you say that I dare you - -11 -00:05:01,319 --> 00:05:05,160 -Scott Tolinski: I don't know, embarrass myself here. you embarrass yourself. - -12 -00:05:05,249 --> 00:05:30,510 -Wes Bos: He's a dev REL for CSS at Google. And I just recently followed started following him on Twitter as well. And he's got some bangers banging of like how to keep up to date. So he is a rG YLEI nk arqule. Inc. on Twitter, make sure you follow those two, because that's I think that's perfect example of how do you stay up to date you find these people who are in the trenches and and surfacing it. - -13 -00:05:30,719 --> 00:07:37,200 -Scott Tolinski: Yeah, seriously? Well, okay, so let's talk about some of the differences here in some of these techniques and CSS properties. Because what this is, is basically new CSS properties that are going to give us a more flexible system for working with just sort of positioning spacing the box model in general, because when you let's let's look at some like little groundwork in here, if you've used Flexbox, you know, that flex box doesn't think of things as top left, right bottom, they don't think of it as that it's flex start flex end, right, whether it's a column or a row, you have the start and end properties. And so that's kind of key to thinking about some of these things, because again, your website might change left to right up to down whatever, based on what is the direction that this thing should be rendered in. So what we have here in the past, we would have something like margin, right, and so margin, right, in a left to right up to down world would now become margin inline, start, okay, so sort of like flex start flex end, margin, inline start. Now that inline bit does not correlate to left, right, it correlates to the inline flow of your document. So if you have an understanding of the standard block inline, where a block direction versus inline direction, right, you have the block start and you have the inline start. So in an up, down, left to right, you now have a margin inline start and a margin block start. So a margin block start is going to be a margin or mark or in the past would have been margin top. So margin, top becomes merchant block, start, margin left becomes margin inline start, okay. And so you're gonna want to check out this blog post, because it's a very visual thing to try to realize here. And it is a little bit more heavy, syntactically, I think, via the language. And it's not necessarily a Blissett, it's a little bit more abstract. But if you've ever encountered any of these problems, you'll you'll appreciate these changes. - -14 -00:07:37,439 --> 00:09:00,330 -Wes Bos: I think people are going to not like this initially, because it's there's a whole rethink think I you have to think okay, I want top. But now, how do I translate that into the new thing, and I honestly think that it will just take a little bit to sort of retrain your brain, because like, I don't think of like, flex Align Left, I just think of flex align, start flex the line. And so it's a sort of simplify this, we can break it down into two things, you have block in inline. And if we are just coming at it from an English website, block is going to be your top and bottom. And inline is going to be your left and right. So if you go and inspect an element on a page, and then add a quick CSS property that says border dash block, to px solid green, what that will do is it will put a green border on the top and the bottom. And then if you say border dash in line, it will do the same thing but put a border on the left and the right. So by default block is the top in the bottom and inline as the left in the right. And then you can also go a little bit further by using Start and End added to those by just attaching them on to the end. So border block start would be the top border, border block, bottom would be the bottom and then the opposite for in line. Yeah. - -15 -00:09:00,359 --> 00:09:07,670 -Scott Tolinski: So it's funny because if you're listening to this in your your car or something, I think you're at a little bit of a disadvantage, you might want to put - -16 -00:09:07,670 --> 00:09:09,210 -Wes Bos: your hands in the air. Yes, - -17 -00:09:09,390 --> 00:10:15,960 -Scott Tolinski: you might want to put this episode on, again while reading and looking at this blog post. Because again, this is such a visual thing. And it affects everything from margin, border padding, whatever. But we also end up having this block size in line size stuff in our content area. So the entire box model, as we know it is not really necessarily different. It's just not orienting it by default. In a well it's not orienting it in a top to bottom left to right manner anymore. It's orienting it in whatever that may be whatever the greater context of the the rendering of the application will be. And this will lead to all sorts of really cool application uses but it's also going to fill in for those languages in areas where Go top to bottom left to right, whatever that we're saying over and over again isn't the way that things are done. And so far, it's been very difficult to do, it's been very, very difficult to do. And hopefully this is going to make some people's applications feel much better in all parts of the world. - -18 -00:10:16,520 --> 00:10:45,210 -Wes Bos: So another thing that is gonna change in addition to all of the box model stuff, so box model is what padding margin and border is width and height can now be defined as inline size. Yep. And block size. So inline size would be your width. And block size would be your height, assuming it's an English thing. I'm curious, do you think like, do you think that this is gonna replace width and height? Or do you think people are like, that's too hard? - -19 -00:10:45,270 --> 00:11:33,270 -Scott Tolinski: I think that's the intent, right? The intent is, is to make the tools there by default. And to turn this into the way that we do things rather that like, I that's what that's what I'm getting from this. You know, it's funny, because it's mirror so closely, Flexbox and grid to me that I think that if, you know, if developers look at this as being the old way versus the new way, then they're not going to like it. But if they look at it as like, the old way versus the Flexbox way or something, then they might like it a little bit more, because they've already had that experience with the whole flexter flex and thing. I mean, this affects all sorts of things, even from text alignment, like the you can do text align, start, instead of left, right. So you're no longer thinking left to right. You're thinking text align, start text align. And this makes a - -20 -00:11:33,270 --> 00:11:34,170 -Wes Bos: lot of sense to me - -21 -00:11:34,170 --> 00:11:49,890 -Scott Tolinski: floats to Yeah, float in line start in line end. Other properties. I kind of wish I was just starting into. But you know, I don't know, I think all of this stuff is probably still fluid, that you know, the status of how buttoned down everything is here. - -22 -00:11:49,949 --> 00:12:04,920 -Wes Bos: I think it's I think it's pretty buttoned down. css logical properties. It's not working draft right now. So it's not done, but it is in it's in the latest edge. It's in the latest everything. Yeah. - -23 -00:12:05,189 --> 00:12:07,020 -Scott Tolinski: What it's in the latest everything. - -24 -00:12:07,020 --> 00:12:08,790 -Wes Bos: every browser has implemented this. - -25 -00:12:08,819 --> 00:12:22,620 -Scott Tolinski: Wow. And this is like the first time I think I've really heard of it is there was a is really this this blog post this conversations about it on Twitter, but I haven't heard about it until like a week ago. - -26 -00:12:22,949 --> 00:12:34,620 -Wes Bos: Yeah, Yeah, me neither I had I had not heard of it at all. I'm just trying to think like, going back to this width and height one, like, is there languages that are like rotated 90 degrees? - -27 -00:12:34,709 --> 00:12:36,090 -Scott Tolinski: Yeah. Japanese, - -28 -00:12:36,209 --> 00:12:44,940 -Wes Bos: what Japanese is topped about him. So in Japan, it's top to bottom, instead of real. Okay. - -29 -00:12:45,000 --> 00:13:11,160 -Scott Tolinski: It's so the bottom and right to left. In fact, the books that you have, like when you have a hardcover book in Japan, it's the opposite the spine of the book is on the right. And you flip through it Really? Yeah. Because I took Japanese for a year in college. And I've been to Tokyo a couple times. And, you know, so I have a little bit of experience reading Japanese, especially in that format. And it took a little while to get used to obviously, but once you get used to it, it's pretty neat. - -30 -00:13:11,640 --> 00:13:26,010 -Wes Bos: So if I have a sheet of paper in front of me, and I wrote Japanese on it, the first sentence would go from the top right, down. Correct. And then the second sentence would be top right, one over and down. - -31 -00:13:26,219 --> 00:13:54,360 -Scott Tolinski: Yeah. And you can wild is also I mean, you will also see Japanese written left to right, as well. And especially in situations like manga, or comic books, but you see it mostly vertical, or at least, that's the way traditionally it's always been. And that's the way you'll see a lot of books written and things like that. I honestly, I don't know what the status of what is left to right versus what is up and down. But from what I understand that it's it's typically vertical like that. - -32 -00:13:54,630 --> 00:13:59,910 -Wes Bos: And then, like, you have Microsoft Word in Japan, how does it decide when to wrap it? - -33 -00:14:00,150 --> 00:14:06,750 -Scott Tolinski: I don't know, I think Microsoft Word it in Japan probably does left to right. I don't know, though, to be honest. Wow, - -34 -00:14:07,020 --> 00:14:08,460 -Wes Bos: that's wild, I had no idea. - -35 -00:14:08,579 --> 00:14:55,710 -Scott Tolinski: We had to write a fair bit of stuff in Japanese in my class on the computer. And so you just you can write Japanese on your computer just by changing the text input right now on your MacBook Pro. Okay. And I used to have to do that all the time. And you would just type in Japanese, like, you know, if I was going to like what's, uh, I don't know, it's a good word. If I was going to, you know, just type Konnichiwa, right? Just a standard Japanese word, right? You would write that as if you were typing the English characters out and the computer translate those into the correct characters. Wow. But it doesn't do I don't think it does vertical like that. So who knows? I honestly have never tried to do anything. Web top right down ever in my entire life. I think that would be fascinating. - -36 -00:14:55,980 --> 00:15:17,760 -Wes Bos: I think that would be like a cool YouTube video. Just like maybe even a cool YouTube series of like, here's how someone who's blind uses a website. Here's someone who has Japanese as a first language uses a website. And here's how they switch between. Like that would be like, if you want to, like have a really cool YouTube channel, it's free. I'll let you go and take it go go and build that. That'd be really cool to see. - -37 -00:15:17,940 --> 00:15:18,990 -Unknown: Yeah, do it. - -38 -00:15:19,830 --> 00:15:59,190 -Wes Bos: So that's it. Just remember, block is top and bottom. This is very English. What's the other one? in line is left and right. Yeah. And that's that's the thing about it's the same with Flexbox is that everything changes? As soon as you change the the flex direction, right? And then everything is often because it's a column and a row or the opposite. And it's kind of confusing, but I don't know, it's I think it's pretty rare for people to have to just switch all that often unless you're doing multiple language sites. So check it out. Let us know if this will help you as a developer. I know lots of you who listen, do multi language website. So I'd love to hear what you think about this and how excited you already use it. Totally. Yeah, - -39 -00:15:59,490 --> 00:16:07,290 -Scott Tolinski: this is fascinating here. I'm very interested. I want to see some examples of people are using this and these sort of meaningful way already. Because that's a it's supported. - -40 -00:16:08,220 --> 00:16:14,400 -Wes Bos: Cool. All right. Well, thanks for tuning in. We will catch you on Wednesday. Face - -41 -00:16:16,290 --> 00:16:26,070 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax202.srt b/transcripts/Syntax202.srt deleted file mode 100644 index e737a06cd..000000000 --- a/transcripts/Syntax202.srt +++ /dev/null @@ -1,172 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,530 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,560 --> 00:00:58,560 -Wes Bos: Welcome to syntax. This is the just someone put their name is Scott berlinski on this q&a I just saw that when I was laughing anyways, welcome to syntax. This is the podcast with the tastiest web development treats today we've got a potluck q&a, we got some really good questions since since we last did a potluck I thought like man, there's more here than I would like to answer. So thank you for sending them in. If you want to send in your own questions to the episode, go to syntax, FM top right corner, click the potluck button and submit your question that way. Today we are sponsored by Sentry which is going to do all of your error and exception tracking and Freshbooks which does your cloud accounting with me as always is Mr. Scott Tolinksi. How you doing today? - -3 -00:00:58,740 --> 00:01:00,210 -Scott Tolinski: Hey, do good. It's - -4 -00:01:00,210 --> 00:01:08,880 -winter wonderland outside. I'm on my new 16 inch MacBook Pro, of which we're gonna have to talk about at some point, but uh, ya know, I'm feeling real good. - -5 -00:01:09,240 --> 00:01:20,100 -Unknown: Yeah, I got mine today. So excited about it. I just did the typed on the keyboard of it. And I thought it was amazing. And Escape key is great. And the arrow keys are great. - -6 -00:01:20,339 --> 00:01:21,090 -Yeah. - -7 -00:01:21,090 --> 00:01:56,400 -Scott Tolinski: Do you know what my favorite aspect of the keyboard is that I don't think people have been necessarily talking too much about what is that the keys are further apart. And I have kind of fat fingers. So like my finger will would often hit multiple keys at once the keys are further apart, right? So you get air further apart and get a nice separation when you're typing. It also feels a little bit like I feel like my fingers still aren't attuned to like where to reach to hit certain keys just yet. But I know once I do, it's gonna feel really good. Because so far I've been getting a lot better separation. And me particular I'm definitely a you know, just go to type. - -8 -00:01:56,400 --> 00:01:57,120 -Unknown: I don't know, I - -9 -00:01:57,120 --> 00:06:17,970 -Scott Tolinski: want to say recklessly I guess this is how I do things. And yeah, if this is much better for my reckless style of typing than the previous one was, yeah, it's the same. I use a I use a magic keyboard just on my desk. And it's the same keyboard. That's what I always loved about it. And I think if I fix it even took a key cap off of a magic keyboard. And it fits perfectly on the laptop. It's just a little bit taller. That's the only problem. Oh, yeah, I it's I'm so happy with it. And we'll we'll do a full episode kind of talking about its people always ask like, what's the best machine for being a web developer? And we I've been saying recently, like, not the MacBook Pro. That's for sure. And let's see get an old one. The Chromebook pro the Yeah, yeah. Or whatever. It's like if you like what did you you made some joke about? You're eating a crunchy granola bar. Yeah, nature Valley book. Right, exactly. Yeah, if you eat a rice cake in the same building as the MacBook Pro, it will fail. So I'm so happy that they're fixed. And it will do a whole episode on on like hardware and just kind of reviewing them because it's such a such an integral part to being a developer is having like a rock solid laptop. So stay tuned for that. Um, so you want to you want to grab the first question here from Scott solinsky. Yes, this question is from Scott berlinski, or boss Lynskey. Hey, guys, this is hopefully a quick one, I'm potentially starting a new job as an Angular developer, modern Angular, but I am scared that even though I will continue to stay on the cutting edge in my personal project, using Angular in my job will make it harder to get a job. After that with more modern tech, like react, do you think there's any truth to this? Well, I think the the biggest problem with this question off the bat is that Angular, modern Angular, whatever, that's modern tech man, I the only thing I would say is not modern tech is using like jQuery plugins, and, uh, you know, sort of hacked together away or something. So right there, I'm gonna go ahead and say that I don't think there's anything that you have to worry about. There's a billion jobs that are Angular jobs. I mean, Angular is probably a billion. Yeah, yeah, like the second largest job market, if not the largest job market for developers with react. And so modern Angular, and you can make a great career and a great living right now, doing Angular is straight up. I mean, there there is a huge amount of interest in Angular, just because maybe, sometimes people like us don't talk about it as much, mostly because we don't use it. But I don't think you have anything to be worried about there. And also, Angular is to TypeScript. So you're still like getting all that goodness going on? That's true. I don't take anything that you hear on this show. As, like Scott and I are react and node heavy. And that's not a representation of web development. In general. That's a representation of Scott and I who use react and node. So no, this is totally fine. Plus, like, I know, modern Angular is awesome. Like, we obviously love to make Angular jokes here because they're funny, but modern, Angular is amazing. And you're going to be a badass JavaScript developer by the end of it, and you'll be able to pivot into whatever framework comes next at your next job. Don't sweat that at all. Yeah. And also, I mean, any modern framework, like Angular is all component based anyway, so you still, like most of the concepts apply. It's just different syntax and different ways of accomplishing the same goal. So as long as again, you're getting those little nuggets and you're you're learning Yeah, you're gonna start you know, still progress. Next question we have here is Yo guys sauce soy sauce stirred up quite the controversy. lol What are sending developer disagree with you? On Twitter, I like posted like soy sauce. Does it go in the fridge? Or does it go in the pantry. And I got like 4000 votes and it was 5050 for almost the whole time and then pantry pulled ahead. And like, I always put it in the pantry and my drives my wife crazy, but hot sauce in this pantry. When I was growing up, we put ketchup in the pantry, which I agree is weird because it gets like, you get like that weird sauce on top. So that that's weird. But like I put everything in the pantry, it's not gonna kill you, especially soy sauce. And like Scott comes swinging, that he puts it in the fridge because that's what the label says on the label that it's a label like, hey, - -10 -00:06:18,180 --> 00:06:19,500 -Unknown: they know I didn't - -11 -00:06:19,500 --> 00:11:16,230 -Scott Tolinski: make this soy sauce. I don't know, all of the ingredients they put in it. You know, I know what soy sauce should be me. But I'm inspect the label. I didn't say I'm gonna Trader Joe's but in their soy sauce as a preservative or if it needs anything or whatever. I honestly have no idea. But all I know is that it says refrigerate after opening and so you know what, I'm going to refrigerate after opening because I don't want to get any any. I know before people lock up on their soy sauce command me about this. I really don't have a like a specific dog in this fight other than the fact that the label says to do it. So I I followed that rule. That's big fridge, big fridge lobbies for soy sauce, so that you need a bigger fridge. It's all a scam anyways, so like, I don't know, I thought that was pretty fun. Because like, Twitter can be a bit of a angry place at some point. And it's it's fun to get riled up about something like soy sauce. Totally because it's funny, right? And everyone's got their I don't know soy sauce wrap on there. That was really good. Yeah, I like that. Thank you. What are the actual developer disagreements we have? Like, I think like me and Scott very rarely have disagreements in terms of like what we have. And it's not because we're like totally in line. But I think it's just because like, we're both kind of like, I could see why that would work for you. Or like that would work for somebody else. So I don't really have super concrete opinions because I'm I'm often wrong. And things that you like, even when we did we talked about tailwinds. And we say like, yeah, it's cool, but not for me. I got so many people are like, Whoa, like you hate. And he's like, no, it's, it's cool. And like, we might be wrong about it. It's definitely gaining some serious momentum. And so we talked about it. I don't know, what are some other disagreements that you have about web development, I think I might be able to start some disagreements here. Because I've changed some of my, we had like a, we had like one episode a while back where we were talking about our dev opinions. And we were trying to disagree on stuff. And we ended up agreeing on everything. But I've since changed some of my viewpoints on some of those things. For instance, I don't use semi colons anymore. I've abandoned semi colons, I turned them off in my ies lens settings, and my pretty here settings and it removed in for me and you know what? I'm still here. My application still works. It still works. It's beautiful. Unbelievable. And you know what, I don't have to have those stumps me cones. Anyone? I can read the code still. So I think some people are like, I can't read their code. Yeah, I don't know. It's been absolutely fine. I've had absolutely no seconds lost to removing semi colons in my codebase. And absolutely not. Another one is I've actually, somebody made a really good argument for why you should use tabs over spaces due to accessibility reasons. And it swayed me. So I haven't converted my project to tabs, because that's gonna goof up all my commits. But like, I think I'm swayed to tabs. So I just pulled up the article here, and it says, using a tab width by just using one tab, then you can customize it in your editor as to how wide to display that thing. So for some developers, they like to jack up the font size, because I don't know maybe like I personally do this. I keep my font size pretty big. I always get comments, people saying like whoa, that's pretty big in half. That's because I record a screencast I just leave it large and half is like I kind of like it. I keep mine pretty small and then I shoved my nose into the screen. I just get really close. But if you have if you jack up the so Like using like, pixels for padding can because if you jack up the font size, then also the padding and everything Jacks up as well, which is not necessarily what you want. So if you use a tab, you can jack up the font size and then and then really clamp down on what actual tab character looks like in your editor. So that's a valid argument. I like that. Yeah. And I was just thinking about it. And I was thinking, yeah, I guess it makes enough sense. And it really gives me no detriment. Right, it gives you no detriment. Also, somebody said your file sizes are smaller. Like, I guess that's fine to not like, like, I got a two terabyte hard drive on this thing. I don't care anymore. Can't imagine all the space here saving without four tab characters. How many node modules can I fit on this hard drive? Also, like that's, that's not really true with G zip or minification? Right. I don't know if that's really a valid argument. Well, I mean, I think I'm not like file size loaded. But file size on your hard disk is what I was thinking. Oh, yeah. But yes, of course. So I don't know if we disagree with those things. But those are two two little bits that we used to agree on that I since changed my opinion on. I don't know if I swayed you in any sort of way here. I didn't make an argument for semicolons. Other than, you know, I just don't like them anymore. I just mean, me and semi-colons. No longer my best friend. - -12 -00:11:16,409 --> 00:15:53,039 -Yeah, I could see why you wouldn't want it. And like I might change that at some point in time. But I've never felt so moved to try to convert somebody on on some of these things. But it was the episode on a bike shedding. That was where we talked about all these silly things. Yes. Yeah. It's just just not my personality. I really couldn't care. Just enjoy what you do. Yeah. All right. Emily says in JavaScript, bang equals equals is the same as bang equals, but I was told there was a slight technical difference. I cannot find what that difference is. Can you elaborate on this? love the show? It's been a huge help. Thank you. Thank you, Emily. Okay, so this question is related to the whole triple equals verse double equals in comparisons in JavaScript. As you may know, in JavaScript, there is some sort of interesting behavior with comparisons. For instance, if you had a double equals A numerals zero would be true if it was equal equal to the string of zero, which obviously, is kind of unpredicted. Like that's not something that you would commonly think of as being the same, right? Yeah, once a string once a number, right, right, the value is the same, but not that the type? Exactly. So it leads to some interesting sort of situations, right? So what it really comes down to, is that whether you're doing the triple equals, or the double equals and whether or not the bank is in front, it's still a strict check like that. That's really what it comes down to is whether or not this this is a strict check. And what more is there to really say on it, then then that's it. Yeah, yeah, it's the bank double equals will check for type. And value in the bank equals will only check for value, right? That's it. I don't know, when I was a more of a newbie programmer, I was doing less strict everything because it was seemed easier or something. And in reality, it just led to more issues and bugs. And yeah, and I've since been changing my thought process and becoming more strict on everything. Especially I've moved my project to TypeScript recently, and I, you know, strict everything on TypeScript. And at first, it was a giant pain in the butt. And then as I saw the benefits of TypeScript, and then I saw the benefits and then tried to use TypeScript without most strict aspects. I started being like, wait, wait, why would you even use TypeScript without strict checks? So, again, I'd become more strict in checking anything, whether it's comparisons or types, or whatever. So that's sort of why we always say use the triple exclamation or triple equals just because it's more clear of what it's asking for. But, you know, I don't know. You're gonna run into all kinds of bugs. If you always use the triple equals, that's my role. That's what I put in my beginner JavaScript course. Yeah. The only use case for the double equals if you want to check if something is undefined, or no, that double equals will work there. But I think that's the only use case you should be using it for totally. Uh, next question is from E Piff. It says rap artists, check out my music if he likes a little little SoundCloud drop right there. Oh, thank you. What are your rules on using other devs repos as boilerplate example, using Wess advanced react starter files you just utilize for my own project. I just want to play fair and not step on any toes. So this always comes down to what is the license of the code? So you have to check what the license is. Actually, this is probably bad. I don't even know if I have a license on some of those but it's fair game. Yeah, the rules. I get people email me all the time. Hey, can I use this in my like startup, or can I use your your starter files in a project of mine? Or can I like post the code to GitHub Absolutely. Totally fine. Almost every on GitHub has a license attached to it. You just double check it, and almost everything is fair game to go ahead and keep using yourself. Word. Yeah, that's really it. Again, it's always check the license. But as long as the license is good for it, and didn't go for it, I mean, that's why it's there. That's the point of open source. And then there's a ton of repos that I always consult with, even if I'm not straight up jacking the code, and maybe I'm taking some of it to apply the techniques. And I think that's, you know, entirely within the legality and ethical bounds as long as the license allows you to do so. This next question is from Ryan, Tracy. What music do you listen to while you code? as an extension? Could we crowdsource a dev playlist and hosted on Spotify that actually might be a lot of fun, I could be in charge of the rap playlist, and West could be in charge of the scream screamo playlist. - -13 -00:15:55,559 --> 00:19:01,140 -It's a funny thing music like, I don't know, I like hung out with my buddies at the cottage on the weekend. And like, I tried playing my own music for like 10 minutes. And like, nobody, nobody enjoys other people's music unless you like you like the same kind of music. And it's a weird thing to try to like push your music on somebody else's. Yeah. Because it's like, it's the same. I feel the same way with editor themes. Like I never tried to, like sell somebody on using my editor theme because I'm like, hey, if you like it, go for it. But if not, I don't care. It's all personal. It's just it's my own personal preference. So I don't know what I listened to mostly hardcore. I have a couple public playlists that are getting pretty popular with devs because one's called the retired scenester metal core. And then I have another one that's called head Bob, which a lot of you have subscribed to after I mentioned it last time. And it's basically just music that you Bobby head to and he puts in the in the zone. There's no screaming in that one. I listened to the two genres I probably listened to the most would be like golden era rap music. I have a playlist called the Golden Era we can share. And then I have a show notes. Yeah. And then I have a rap music Dakota which is like modern rap music. And what else do I listen to? To code to I guess I listened to a lot of ghostly artists, I used to work for record label, ghostly International. They do a lot of electronic music. But it's it's techno sort not techno based. But the label has techno roots like Matthew dear sort of stuff. So I listen to a lot of one of their new artists is drama, all caps, and it's really good to cotu because it's sort of she has electronic music that just doesn't really take too much of your concentration out of you. And it's just really nice. A lot of that music like Tyco or any of that stuff is really good for me. I've been recently getting into this is like sort of a weird genre of rap music, but it's like just stoner rap music where these guys put out 1000 mixtapes a year like currency and burner and whoever they put out, like 1000 mixtapes, and they're not necessarily the most creative or most interesting. In fact, I don't want them to be because they're just like, just a sort of relaxed bead and some guy basically just talking about who knows what, and because they've released so many billions of music, they're not saying anything important. They're just talking about, went to the store, and I got my car. And it's like, so I don't I don't know what it is about it. But it's so mundane. I can I love coding to it in a way that I don't know, it's it's funny. So I'll put some of this music up in the show notes. But that's really what I like, I just made a playlist. And I made it collaborative. So anybody can add music to it. It's called syntax coding music. So we'll put a link in the show notes. You just search it and go ahead and add your fav tracks for coding L and make sure you follow that playlist. It'll be fun. They'll be Oh, that's, that's sounds like a great time. - -14 -00:19:01,440 --> 00:19:02,700 -Unknown: Yeah, cool. - -15 -00:19:02,700 --> 00:21:24,990 -Scott Tolinski: What also sounds like a great time is setting up your error and Exception Handling so that you don't have any bugs in your project any more. because let me tell you, I can't live without century. And century@sentry.io is one of our favorite sponsors over here. All our favorite sponsors, we love our sponsors. But century is the exception handling tool that works with just about anything that you could possibly want to use it whether you just connect it to your application, it can log in and connect exceptions, you can track them to specific leases, so you can tell when a bug was introduced so that you can make sure that if you need to rollback that commit or that release, you have that bug right in front of you or you can say okay, I fixed this bug and then in the next release, you can mark it as a regression of that bug pops up again, and all this within a really nice and easy to use interface that looks great and allows you to basically see any issue that you're having right in front of your face. So Head on over to century AD century.io. And use the coupon code tasty treat and you will get two months for free. That is a tasty treat all lowercase all one word, let them know that you You came from a syntax. We over here it's syntax, we, you know, we advertise for the companies that we use in love. So I'm a big fan of century I use it on all of my projects, and a huge fan of the project in general. So check it out. Thank you so much for Sentry, for sponsoring. Next question from one Gonzales, how do you go about working with different technologies in stacks front end related when you have to accommodate for client or other developer biases towards specific things? Like you have to learn a different set of tools in a new project? Because someone doesn't like what you use and says x is the better tool for a job. hope that makes sense? Yes, this is every developer ever has opinions on what's what's the best stack. And often you'll have, like a senior developer who makes these choices and has opinions or like something that's better. And then you also have like this whole web development sphere that changes their mind as to what is the best stack every three minutes. And you have businesses that actually need to make money and can't keep changing it. And the answer, my answer to that is that you can obviously try to change their mind. But almost always, there's smart people that have made these decisions. And just because it's something that you don't know, doesn't mean that it's bad. And your job as a developer is to learn that thing and to work with those tools. - -16 -00:21:25,170 --> 00:26:25,200 -Yeah. And that's, I mean, it goes along with even what we've talked about with working with designers too. Because it may seem like this at times, I know, I've been into some pretty heated dev conversations, heated dev moments, as you might say, where people are just really getting into it over what the stuff they liked uses. And again, I think it needs to be a conversation, it's hard part one personalities clash, because some people are just really just, I don't know what the right word is, but just aggressive towards what they really like to use. And they think it's the only way and they're not going to listen or budge. And maybe it's nice to have a moderator involved if there's multiple people, but at the end of the day, it's a lot about learning why they like something, and then hopefully they'll do you the same favor of learning why you like something, and maybe you can chat about it. I remember one time we had a project, and the project was initially created with less. And we had this huge, like a for dev discussion of our SAS versalles and was sort of leading the charge along with another developer and saying, you know what this project should really be in SAS, because Hey, man, less doesn't really do as much as SAS does. And there's better SAS libraries out there. At the time, it was, you know, grid framework for all the rage and the SAS SAS frameworks like Suzy were way better. So we had a talk about and we went through the pros and cons. And we sat down as mature developers, and we talked out and worked it over. And at the end of the day, it's a group project and you need a group result, sometimes you need to give a little. And sometimes you need to push down a little harder. But at the end of the day, be respectful to your co workers. Nobody has the necessarily right answers. Everybody just has different opinions. So yeah, that's all I got to say about it. I think we had a fall. Next question is from Andrew Gilliam. And dear boss and scooter man, people come in these names today. legit podcast mad respect. Yeah, mad respect back, Andrew. I know there is no magic SEO silver bullet. But what are some of the best practices for implementing SEO into your website or web application? Now this one is, it's kind of tough, because as your SEO stuff changes all the time, you know, Google can sort of change or tweak their algorithm or DuckDuckGo, or whoever they can change to tweak their algorithm all the time. And really, some things that are important a couple of years ago may no longer be important today. Think about back in the days we used to spam keywords into our site until Google's like alright, people are just spamming keyword. So let's adjust the algorithm right. So I don't even know if that was Google back then. No might have been AltaVista. AltaVista might have been adjusting their algorithm. But yeah, one thing I like to think about SEO is it's never going to hurt you to have proper HTML semantics, and proper HTML structure at all times, using the correct tags whether or not something really truly is an h1. And following those rules, Article section, main header, footer, nav, all those that ellos semantic elements in HTML, learning why people use them, what they're used for, and using those appropriately is one of the biggest things. And that's not going to skyrocket you to the top of search rankings because that's not how it works. But having those core fundamentals is going to help as same with anything that's performance based. You want to fast website you want a mobile first, not as a mobile first, but a mobile responsive website. So it has to load quickly. It has to work well on mobile and it has to be okay semantically as a base foundation. Before you tried to do anything else within your SEO, yeah, that's honestly all I do is just have good. Like, it's not even amazing, but just good HTML semantic structure. Because like at the end of the day, you have to remember that Google is trying to find their users the best possible result. And as soon as people catch on to tricks, yes, like backlinking and stuff, they change it, and they will, they will go out for it. So so don't go any down any rabbit hole of tricks, surely those work, and surely those will change over time. But honestly, just just putting out the content. So it's easily accessible. It's fast. It's mobile friendly, things like that. As long as that content is accessible, and good quality for your users. I think that that's going to really help out I get people asking me all the time, they're like, hey, Wes, how do you get that like little box at the top of Google? Where if you search, I used to have it? If you search, let verse cons. I think Tyler McGinnis took it from me, oh, hey, just again, if you'd search, let verse constant Google, I used to have the box for about a year. And then I googled that a couple months ago, and Tyler McGinnis took it. And now it looks like a medium article has it? So I don't know what they're doing there. But I think we're all just trying to provide good info. There might be something about my article was from 2016. And Tyler's article is from January one, so maybe keeping that up to date. - -17 -00:26:25,200 --> 00:27:01,110 -I've heard that works as well. It's funny, one of yours always comes up when I'm looking for good examples for default parameters. And rest verse bread sort of stuff. I think yours always comes up. And I think it's just really content is written really well. I mean, that's another huge thing if your content is good, and your content is what people are searching for, and people find it, they're going to link to it. It's just going to continue to move up in the rankings. Like Like he's I mean, it's all about the best practices, right? Who are tricks for Wes? Who are tricks for - -18 -00:27:01,350 --> 00:27:02,460 -Unknown: checks? There's what - -19 -00:27:02,550 --> 00:27:04,320 -they're for kids man tricks are for kids - -20 -00:27:04,320 --> 00:27:05,280 -jerks ever kid? Yes. - -21 -00:27:05,280 --> 00:28:49,770 -Scott Tolinski: Yeah. Don't leave those leave those tricks at home. That's, that's not the answer. Anybody ever wants to hear now it same with like, they're like, how do you like her? How are you hacking sales and getting Twitter followers? And like, honestly, just that's the long game. Just good content? That's unfortunately, I don't have any other tricks there. Yeah. All right. Next question we have here from cmoh. Hi, gents. Love the podcast. It has given me lots of inspiration ideas, when dealing with responsive sites, how do you go about respecting the request in iOS Safari to show the desktop site? So this is on Google Chrome on mobile, as well as if you are on a website, and you click Show request deck desktop site, like what happens there? Like how are you the developer implementing it. And unfortunately, responsive sites don't respect that. Because all that is doing is changing the user agent string of the request. And a lot of websites will take in the user agent, user agent string is this little piece of data that comes along with every request in it, it gives you information about the browser that is requesting the website. And then based on that either in JavaScript or in on your server, you can serve up different websites. And that's what a lot of websites do. They have a mobile site and a desktop site. And by doing that, they they change the user agent to a desktop browser. And then it tricks the website into loading the desktop site for you. Fortunately, you can't do that with responsive. Yeah, I mean, that yeah, that is that Yeah. Okay, next question is from Daniel, bro. Hey, code, Kings, or Hi, code kings. - -22 -00:28:49,770 --> 00:29:30,540 -First of all, I love the soundboard effects on your show. Oh, they love the show. But then the sound effects soundboard effects are in parens. I got a quick and simple question from a newbie myself, I get confused about your usage of the word app. You don't make iPhone or Android apps, but you often throw the word around like I would create a node app or some apps I made etc. Is it just website applications? Or how exactly should interpret the word node app or web app compared to mobile app? Keep the episodes come in peace from Denmark pacement Denver, - -23 -00:29:30,720 --> 00:30:08,670 -Daniel, we, we just use the word app primarily as web app. I'm not a native developer. I know I've worked in React Native. I've built things in React Native, but largely, I'm not an app developer on the App Store, so to say, however, I do make web applications now what is the difference? Well, the difference is, they're hosted on or created with web technologies. Now with the addition to T are they called t essays for whatever web progressive web apps that can go in the Android store pw A's, the progressive web app, but there was like a lite version that we talked about a while. I think it was TSA. - -24 -00:30:09,060 --> 00:30:43,050 -Yeah. Where you can now actually Store apps on the app store that are written in web tech. So largely, when we refer to applications, we're referring to web sites that have more than just straight up HTML and JavaScript and maybe JavaScript to do like a little toggle here or there or something. We're talking about things that are primarily using JavaScript to write the application to fetch data from an API to do things like handle accounts. It's, it's just websites that are advanced. It's just a different language for the same thing. - -25 -00:30:43,410 --> 00:32:28,320 -Yeah, that's it's just there's words in programming like app and state, and order some of those other words that you just use, and they mean a different thing. It depending on the context, yeah. It just means application. And that that's what API is another one. Yeah. Like think API is, is like a like an endpoint where you fetch data from but then API is also just like a set of functions that you can use to interact with something right? Like API just means the way that you interact with something. And unfortunately, those words are often loaded. And and then you you have the added benefit of someone like Apple coming around. And like just taking the word for themselves. And saying, like, okay, apps are now like iPhone apps, there's something that are bundled up and push. So that just means code that's put together to run somewhere. Yeah, yeah, that's it. Beautiful. Next question is from Robbie, thank you for the thank you for the pronunciation. Robbie, Doyle, yo, oh, all of these questions are like, hilarious. Yeah, I think we I think we have successfully appealed to the younger demographic. Scott, based on some of these questions, yo, oh, holy crap. My two favorite tech guys have a podcast and I didn't know it. Thanks for all you do. I wanted to ask you, for your thoughts on transformed class properties from people heard heard the cast on react state, I found it mind blowing when setting everything up without constructors. What the question here is they wanted raw be wanted our thoughts on transform called property properties. Yeah. Okay. Can Can you explain real quick what what are class properties. - -26 -00:32:28,740 --> 00:33:16,080 -So in the context in which Robbie is talking about is within react. And oftentimes, when you're setting up your class based component, you needed a constructor to pull the props in or do things like that, and modify or set up the state. And what this allows you to do is have properties like an object property would be on an object just on a class. And typically, you'll see this being used as like, like static properties, or something like that. But basically, instead of defining your state is this dot state, whatever you're defining is just state is equal to an object within your class directly. And that way, you don't have to use a constructor to get that initial state said, then it has been so long since I have written a class component. And I'm just feeling like, - -27 -00:33:16,080 --> 00:34:26,190 -I like don't even remember that I can't even picture the code fine lines, I need to like, go look it up. It's so fun. I just did a tutorial on it. I can like it. Because it works in Chrome now. Like, you don't even need this plugin. I yeah, it just works. So like when you have your class, and you have your your methods on your class, which would be prototype methods. But if you want a either an instance property, meaning that a property that is unique to every instance, not on the prototype, or if you want a static property, which means that it doesn't exist on the instance, it just, it only exists on the class like array dot from is a static, that's a static method. But so like, how do you do that? That's what the class property and you just do n equals inside of the class. So you might, sorry, previously, like Scott said, you'd have to set those properties in the constructor, and then then your constructor just starts looking a little bit like weird, you know, like, you've got so much junk just thrown in your constructor. And class properties allow you just to it's very much just like a property on an object, except we use the equal sign instead of a colon. Yeah, - -28 -00:34:26,360 --> 00:34:27,960 -Unknown: yeah, exactly. But yeah, so - -29 -00:34:27,960 --> 00:38:58,140 -Scott Tolinski: what are our thoughts on it? I used it extensively, and exclusively, when I was still writing class components, so I like it. I like the syntax. It's cleaner. It's nicer. Yeah, it's it's funny. Like I don't use classes a whole lot. That's the classes are more of like an object oriented approach to it. And I think Scott and I are a lean a little bit more towards like functional total JavaScript devs. Yeah. So we don't use them a whole lot. I did include them in my course. Just because, like, I think I once did a poll on Twitter. I'd like to use classes and it was 5050 split, just like soy sauce, right down the middle. Just and there was a very classic, very divisible sauce. Some people put it in the pantry and some people put it in the fridge. And if you want to keep your soy sauce fresh like mine, and that not not fresh, like Wess in the pantry, you'll keep your soy sauce in the fridge. And not just joking, I don't have strong feelings. But you'll probably want to use fresh books to keep track of your expense when you buy soy sauce for the office. Because we all need soy sauce in the office. So I'm just telling you right there, Scott, if you were to buy soy sauce in Canada, for the office, you'd only if it was food, you'd only be able to write it off for 50% unless it was part of a sushi party which you are giving to your employees. And you could write off the soy sauce 100% How do you keep track of how much of an expense to to shoot you write it off? 50%? Because it was a meal? Or it? Should you write it off? 100%? Because you are providing as part of a party that's tax rules in Canada. And and how do I do that? Because sometimes I just go out for lunch when I'm traveling, and I can only expense 50% of that. And sometimes I we have like a Christmas party with me and my wife at the end of the year Exactly. And I use Freshbooks to track all of that, including my soy sauce purchases. So check it out@freshbooks.com forward slash syntax. And make sure you use syntax in the How did you hear about a section you'll get 30 day unrestricted free trial when you check that out. Thanks so much to fresh books for sponsoring. It's coming up on that time where we got to get all our expenses in order and all those things. Looking forward to it. Although I'm working with a new new accounting service this year, so I think it's going to be a little bit better. Okay, next question is from the SAR moon in a sir moon asks Hola, Wes and Scott, big fan of both of you. I'm a beginner, I have mostly learned front end so far HTML, CSS JavaScript react, should I first get pretty good at these before learning some back end? Or should I start learning some back end and have a basic knowledge of both front end and back end? Thank you in advance. Um, it depends. Depends on what your goals are. If your goal is to just get a job as a front end Dev, you just get get that expert tag and just work really hard on the front end stuff. But if your goals are to be a better developer and have a bigger understanding of the web overall, Hey, no harm, throwing a little bit of a note in there. And I personally do it because that's me. And I'm like a little too, all over the place and scatterbrained to stick to one thing for too long. But it all depends on what your goals are. If your goal is specifically to get a front end job, then I would just get good at those front end technologies. If your goals are to be a good, well rounded developer, then pick up some note as well. Yeah, honestly, if you you should at least build some small app in Node. If you want to take my learn node course that would be perfect for you. Just so that gave Candela Yeah, getting little Sally Sorry about that. couldn't resist. I think if you're a front end Dev, you should at least understand how the server works. And if that means just building one thing, you might love it. And you might be like, well, I'm gonna be a suite full stack dev now. And I love building the back end and the front end like you can't hurt you're only it's only a benefit by learning at least one project in the back end, you'll either say Good, I'm glad to understand how that cycle works. Or you might say, Oh, I really enjoy going from backend, the front end and doing react in jobs. I love doing it all. And that's me and Scott. And I'm super glad that I'm not limited by plus, like you probably have your own ideas. You're like, Oh, I wish I could build an app that did X, Y or Z scraped bikes or something silly like that. Then you can build it you can being able to build and fix your problems as a developer is one of the best parts. Cool. - -30 -00:38:58,140 --> 00:38:58,650 -Unknown: All right, - -31 -00:38:58,650 --> 00:40:42,380 -Scott Tolinski: next question from Gabe. If for some reason react died today and you're no longer able to use it. Which framework would you pick to use full time view or Angular or something like svelte, I would pick view? I would, I would probably pick you because the community is large. Ya know, it's like one of those things that, you know, if the communities large and it's growing and there's energy behind it, then chances are as people paying you money, right, or projects that need to be built in view, there will be projects out there, there will be jobs out there, right. You can't necessarily count on there being spelt jobs out there right now. That said, if I'm going purely on dev experience, I look for more. I like spelt more. It's different enough. I don't know it's a very simple and it's very nice. It has a lot of wow factor to it. But again, depends on what my goals are. If I'm building something for me, you know, I build something for me, then I would probably go out. That's hard to say. I don't know. We have enough experience building real world apps with either of them. All I know is that the view community is definitely larger. So that those are my thoughts. Next question is from anon. Not not the name anon, but a n o n anonymous. What habits, strategies or specific tools do you rely on to prevent your hard drives from filling up with useless files? Um, that's funny. We joked a little bit about this. I use spaces. That's what I do. No, I, I use an application called the daisy disk that has a really nice visual representation of that's what I use. Yeah, I've been using Daisy disk since like, - -32 -00:40:42,630 --> 00:40:53,130 -Unknown: 2003. Since since the public school era. Yeah, no, just like a rappler. I forgot what song though. And that's Biggie Smalls party and Bs. Yes. That was one of my - -33 -00:40:53,130 --> 00:45:36,930 -Scott Tolinski: favorite thing. In here. That's my one party trick. My one party trick is I can rap every word of party and Bs funny they can pick that Oh, yeah, I was when I was in high school. We had like a super long bus ride. And I was like, I'm gonna learn every word to that. And it's like the best party trick is every party I was like, Whoa, like totally did not expect you to know everywhere to party and Yes, I can. I could I could rap ludicrous is welcome to America. That's my my party trick, which is not even like a ludicrous single it's, it's, it's like just some random ludicrous og. So that's my party trick. But yes. I believe the correct therapy is that I've been a terrorist into the public school air. Is that what he says? Yeah, yeah, bathroom classes, cut. Back, bathroom passes, cutting classes. Squeezing lemons, keeping school is a daily routine. Something he insists 13 chubby guy on the scene. Yeah, I used to have a trade Deuce and the deuce Deuce and the bubble goose and now I got the bag in my backpack lounge in general so the thing is, like half the words I can't say yeah, no, that's that's correct. You need a nice nice a cool song like a wild wild west by Will Smith because he doesn't need Jim West West right up. roughrider don't wait, man. I got that song. Jim West. roughrider. Oh, man. No, man. I'm gonna try. Don't want none of this. None of this six gun running this. damsel in distress. Let's be out of that dress when she meets Jim West. Okay. Oh, yes. Well, okay, we have a podcast together. Brian arch at react athon. We will wrap on stage. Yeah. I can bring my soy sauce wraps. Okay, so what habits and strategies I use Daisy disk, I look at this thing all the time, because they did like, especially for me with a lot of video files, they take up a lot of space. So it makes it really easy. Especially my my node modules folder or Meteor project folders, that stuff can fill up pretty huge. And this thing at least gives you a perfect view as to where to dial down to find all of those, I also use an application called the clean my Mac, which I've been using for a number of years, which deletes a lot of cache files. It's Yeah, system utilities, stuff that you don't need. It checks on permissions, it resets all sorts of nice stuff, and generally is a nice utility to have. So those are my two key apps is Daisy disk and clean my Mac. Yeah, I use Daisy disk a lot just to see where everything is. I also have anytime I'm coding something that I know is temporary. I'll just name the folder delete me. And then I know later if I find a random folder, I can just delete it. Yeah, I know that it was just a temporary thing. There's the thing I use I forget the name of the package, but it would delete node modules that are older than 30 days because no module Yeah, if you I don't know like I I personally have probably 300 projects on my computer. And if everyone has node modules, then I don't know that's that's gigs and gigs of README files that you don't need on your computer. Totally. The biggest one for me is archiving video, because they're huge. So what I'll do for that is I'll put it on an external drive and I'll upload it to an off site backup I use backblaze B to for that. So I have to if I ever need to pull them back down I'll do that. And then I also have a policy of nothing is safe on the desktop or downloads and every now and then I'll just select everything on the desktop, everything on in downloads and just blowed away those are just temp and then yeah, if if it matters to you don't put it in your downloads folder I see people do all the time when I used to teach at boot camp, people would like work on their project out of their Downloads folder and then like it would be called like, like GitHub master or whatever. They would accidentally delete them like oh, like have a good Yeah, like have good folder structure right. And then and then also archive old folders like I had like WordPress is from 10 years ago, I just uploaded them all to, to backblaze b two. And then I just delete them off my computer. So I have space. So I almost went for the two terabyte MacBook, which I think you went for right? You bet I did. I have a good reason for that, which I'll get into, if you want. Yeah, I'm curious to hear Yeah. What is it? Well, I like to, I like to play games. I know, you're not a gamer. I'm not necessarily no gamer, either. But I have a huge Steam library, as many people do, and only work on Windows. So the two terabyte drive, I'm gonna throw 600 gigabytes of that thing into Windows and say, Hey, - -34 -00:45:37,019 --> 00:48:03,930 -have that Oh, that's a great idea. Yeah. And so now I'm gonna have a decent Windows machine. Because from what I've seen on reviews, and the benchmarks, the gaming performance is on is really good. And since I got the, the highest video card, this thing's gonna be really good as a gaming laptop. I didn't buy it as a gaming laptop. But I used to have a hackintosh that I used to Game on. And I haven't been able to since taking that down. So I have an Xbox controller, and I'm going to hook it up via Bluetooth. And I'm going to play me some video games at a high resolution on my laptop. How about that? That's cool. Yeah, that's great. I didn't go for the one terabyte because my old laptop is one terabyte. And I want to I've many times I've needed to bring my computer into the shop. And I just Time Machine restore the entire computer to my old one. And then I have absolutely everything I need. And so it's just a one to one copy in. I've had it in the past where where the machine I was backing up to was or restoring to was smaller than what I had and then you can't restore to it. So ended up going one terabyte although it sure would love two terabytes just to not have to worry about deleting stuff. I haven't even NAS drive. So I'm kind of always moving stuff over there. Like I never let my hard drive get above like 500 gigabytes full. And I really got the two terabyte one just so I wouldn't have to feel bad about losing six. Windows. That's great. Yep. So that's really my thoughts on it. Um, next Oh, I also I should say, to remove my node modules. I have an alias to remove those node modules. We talked about another episode, we can make sure that alias is or at least the command that I run is in their show yet, so I'll make sure I have that in the show notes. Okay, uh, Nick Richmond asks the last question which we picked off of Twitter because we thought this was funny, which j s library is most like the Tesla cybertruck. If you haven't seen the cybertruck by now you probably have because this is it was out last night in an event and it is like the most brutalist looking vehicle ever been created. Et is absolutely absurd. It looks like a giant triangle pyramid thing. And I absolutely love it because I think it's super ugly. And, you know, that's sort of how I roll. What, what JavaScript library is the most? Like the cybertruck Oh, I got a good one. - -35 -00:48:03,960 --> 00:48:04,740 -Unknown: You got a good one. Please - -36 -00:48:04,740 --> 00:48:43,110 -Scott Tolinski: go with your good one. Because I'm, I'm struggling to come up with one. Oh, man, it this is the clearest. It's RX js. So RX js is a observable based. I don't even know how to describe it. Reactive extensions library for JavaScript. So it's basically a coating with observables which it's it's a great way to actually code and why do I think that is similar to the truck? Because it's, it's misunderstood. Often, a lot of times, it's fast. It's performance minded. It looks ugly at first. And lastly, the people who use it and talk about it are insufferable. - -37 -00:48:45,660 --> 00:48:46,230 -Unknown: Oh, - -38 -00:48:48,210 --> 00:50:41,400 -Scott Tolinski: the new vegans they said oh God, they are not good. You can't say anything. Like you pointed out one minor thing about a Tesla being I honestly like are they buying bots or something? Because like, like there are certainly like Tesla's are great. I would love to have one because they're the Bitcoin there are people there are certainly flaws and like, same with Apple people, though, like apple, people do not want to hear about Apple's flaws. Like they just don't want to hear it. Yes. Like these personality cults or something. I have no idea. So I'm not saying you're a cult, if you're an atheist, I'm saying cult of personality. Okay. My pick is not going to be it's going to be a VS code theme. Which is, I guess, not a library, but who cares? I can't think of anything. This is the synthwave 84 code theme. It has a nice beautiful glow on it. It has a beautiful look. It's my favorite VS code theme currently. And just it's just out runny. It's outrun. It's cyberpunk II. It's all of those things. The cyber Yeah. If there was if there if honestly, if there's a Robocop j s, I'm gonna look up Robo Robo cop .js cuz, you know, I just do that you can type in a word and then there is a Robocop .js. Okay, of course there is because I had no idea. Robocop .js is something about JavaScript at data schemas. It's a great name. I'm gonna say Robocop .js. Because this cybertruck reminds me exactly of the movie Robocop, which is a favorite of mine. Robocop? For those of you who don't know, it's a really, really awesome movie. If you like, very violent movies, it's very violent. So if you're into that action movie, and you haven't seen Robocop make sure you get it on blu ray. But yeah, I don't really have anything else. That's pretty much it. The tight cyber trunk is my kind of ugly and I'm here for it. So - -39 -00:50:41,609 --> 00:50:42,540 -Unknown: that's all I got. - -40 -00:50:43,049 --> 00:50:43,770 -All right, - -41 -00:50:44,219 --> 00:55:23,190 -Scott Tolinski: let's move into some sick pics. All right, I'm going to sick pick a crewneck from everlane and it's part of their like a critic is just like a like a sweatshirt without a hood on it. And everlane has this like uniform line which is stuff that is put through the washer hundreds of times and they test it out and they guarantee it for a year 365 so if it becomes faded or stretched or anything like that, it's it's just an awesome quality clothes. And I honestly don't think a year is all that impressive. Like I would hope that a nice sweatshirt would last you for for many years. But it's I've been loving it. It feels great. My wife is really big into ethically sourcing of of where the clothes actually come from an anti fast fashion. So she got this for me when we were in New York and I was like this is awesome. So check it out. It's called the everlane uniform crewneck I got the green one. It looks sweet. I'm going to pick pick something that I sick picked in the past and well i don't know if i actually did sick pick this and that has me have talked about this. This is a keyboard the key Tron k one, I bought this keyboard as a Bluetooth Mac mechanical quote unquote keyboard. It's got these weird, tiny little switches. They're not like full on mechanical switches. It's like a low profile mechanical keyboard feels really nice. I've been a huge fan of this keyboard. Well, I purchased it before the 16 inch MacBook was released because my Chromebook pro was giving me double T's and every time I hit the spacebar it put a comma in because that's how a computer should work. And so I got this keyboard, the K Tron key one A while ago and the sensitivity was totally off. If you rested your finger on a key it would trigger a key press instead of when the click happens. So it was a total mess to use. Despite the typing experience being pretty nice. Well, they have rereleased it with the third edition of it. So if you purchase this thing, make sure you get the third edition, do not get the second edition or you will have a crappy keyboard. And this thing is great. It looks good. It's very fancy. It's got some really beautiful RGB, you know, fancy when I press a key like radio that's got some animation. I mean, I have a sucker for that stuff. I love it. I love the globe. So it's got this beautiful glow on it. It's a nice keyboard. And then now that the switches actually work, it's actually a nice keyboard. And there's not too many one Bluetooth keyboards that are mechanical, but two Bluetooth mechanical keyboards that have default neck settings and Mac bindings and Mac keys already on them. So this really, you know, checks a lot of those boxes. And I really like it. The typing experience is great on this thing. So a big fan of the key turn key one key cron, B cron. So I'm gonna shamelessly plug my beginner JavaScript course at beginner JavaScript comm If you or someone you know, Oh, is this out, it's it's not out as of right now. But by the time that this it should be out otherwise, sorry if it's not, but I've got four more videos to record. But like out of this has been my life's work for the past year. And I'm really excited about I think it's going to be like one of the best ways to learn JavaScript. So if you or someone you know and i think that I'm kind of banking on people who listen to this podcast already know JavaScript, some people are gonna take it as just a refresher just to fill in the gaps. But check it out beginner javascript.com cool. I'm gonna be plugging my Black Friday sale that's going to be ending like today is when you're listening to this, this is December 4. So we record these episodes in the future so it's like hard to put myself in future mes shoes here. But this sale will be ending tomorrow and it's going to be 50% off of a level up tutorials subscription for the year so sign up for that right now. This is going to be the cheapest price you can get the level of tutorials scription for all year, so make sure you sign up head to level up tutorials comm forward slash pro the course that I had just released in a couple days ago as you're listening to this and November 30th. Of course I just releases react and TypeScript for everyone. So that's the latest level up tutorials course you'll get that along with animating react. Next j s nine and react. Gatsby calm Every single level of tutorials course I've already released along with any ones that I released over the course of the next year. So if you are interested in learning all that stuff and shaping the future of levelup tutorials, head on over to level up tutorials comm forward slash pro and sign up for the yearly price for Black Friday and save big money is all right, sweet. Thanks so much for tuning in and we will catch you on Monday. - -42 -00:55:23,609 --> 00:55:24,870 -Unknown: Hey, bass. - -43 -00:55:26,790 --> 00:55:36,540 -Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax203.srt b/transcripts/Syntax203.srt deleted file mode 100644 index 765b2708e..000000000 --- a/transcripts/Syntax203.srt +++ /dev/null @@ -1,128 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos, and Scott Tolinksi ski. - -2 -00:00:25,950 --> 00:00:48,900 -Scott Tolinski: Oh, welcome to syntax on this Monday tasty treat, we're gonna be talking about GitHub actions, GitHub actions, we're going to explain them what they're here for. And you've probably gotten access to them recently, if you're on GitHub, and we're going to talk a little bit about what they do and why you might be interested in them. My name is Scott Tolinksi. I'm a developer from Denver, Colorado, and with me, as always, is Wes Bos. - -3 -00:00:49,229 --> 00:00:51,630 -Wes Bos: Hey, everybody. Hey, Wes. - -4 -00:00:51,870 --> 00:01:39,810 -Scott Tolinski: This episode is sponsored by Log Rocket, one of our favorite sponsors over here at syntax, we love Log Rocket, because what they do is they make solving your bugs so much easier by giving you a reproducible video that you can watch as you clicks around and does this thing and breaks your site, you might be getting some reports, or perhaps you're using another error and Exception Handling tool. Or perhaps you just logged into your Log Rocket and saw that there was a bug happening and you wanted to know why. And so you can click that video and you can see the network activity, you can see the console logs and error logs, you can see just absolute pixel perfect video what the user saw, you can even scrub through it. And it's really cool. It puts a little timeline markers in the little timeline there to show you when events happened. - -5 -00:01:39,810 --> 00:01:42,660 -Wes Bos: Scott's doing lots of hand gestures right now. - -6 -00:01:42,780 --> 00:02:36,330 -Scott Tolinski: I'm just tickling like crazy right now. karate chopping over here. And in honor of GitHub actions, I'm doing some chops. And let me tell you, this is one of those tools that really saves your bacon. Because how are you going to know how user managed to goof up things users can like find the craziest ways to goof up things on your site, you turn your back and all of a sudden, the headers upside down and the footers where the header should be in there, their arm broke somehow. And you got to figure out how the heck they did that? How did they break their arm using your website? Well, this thing will help you figure that out. So check it out at Log rocket.com forward slash syntax and you will get 14 days for free. This is a service I use and love over here, I level up tutorial. So check it out at Log rocket.com forward slash cindex. Alright, GitHub actions, you want to get into it. But what you want to give us a what is GitHub actions? What are they? - -7 -00:02:36,600 --> 00:04:12,930 -Wes Bos: Yeah, so GitHub actions was rolled out. I know I've had it for about six months now. And I've seen a couple conference talks about it. And I actually haven't used it on any of my projects yet. But I've been like really digging into it. So my hope for this episode is to explain what it is and what it can do. So that the next time that you have this problem, you can go, Oh, that's what GitHub actions does. And then you can sort of roll into it. So GitHub actions are little pieces or big pieces of code that will run when some sort of action on GitHub happens. So essentially, it's a file with code in it. And this code can be written in JavaScript, I think I've seen libraries for, for Ruby, and for a couple other languages, that code can be run and can be triggered when different things on GitHub happen. So like, what would that be? Well, when somebody submits a pull request, or creates an issue or edits an issue, or assigns a milestone or pushes some code to your repo, or closes an issue, or any of these things that happen, like they're all events, all of these events on GitHub, you can then listen for them to happen. And when those things happen, you can trigger some actual code to run. And these things are called actions. So the code that you write is called a runner. And you can host them on GitHub yourself. Or you can also do a self hosted runner. I'm extra Sorry, it's it's only in beta right now. You can't do it yourself just yet. But they're, they're beta testing it. - -8 -00:04:13,049 --> 00:04:17,880 -Scott Tolinski: So why would you host it yourself rather than hosting and GitHub? Like, what's the benefit there? - -9 -00:04:18,120 --> 00:06:01,800 -Wes Bos: So GitHub offers three environments to host these runners right now. And they have Linux, a Windows and they actually haven't even have a Mac one, which is really interesting. And they give you 2000 minutes for free on a free plan. And it goes up from there. And I guess for people who are doing a lot of actions, maybe I should say, just for a couple examples, an action might build your application, it might deploy your application, it might run prettier, might run tests, things like that. So you might have, I don't know, six or seven different actions. And each of those takes, like I know, building the syntax website and deploying it to now takes about eight minutes. And if you're doing that, oh 20 times a day, every single time that you send in a pull request, you'll run out of those minutes really quickly. And then you go and pay GitHub anywhere from point eight cents a minute up to eight cents a minute for Mac OS, to actually run this code on it. So it's I kind of equate this to like a serverless function, where anytime something happens, you can run these actions and it will, you'll be able to run a script that does whatever you want, it deploys, it builds your app, it can publish to NPM, it can run prettier, it can check for spelling mistakes, it can apply tags, to pull requests, things like that, it can notify people of imagining you could like send text messages and things like that, as well. And when you get over your minutes, you have to go and pay GitHub or if you have your own infrastructure, if you don't want to run maybe sensitive code on GitHub servers, and you want to run on your own servers, a lot of companies can't do that. Gotcha, then they might want to, you might want to host it yourself on your own servers. Okay, so - -10 -00:06:01,800 --> 00:06:37,980 -Scott Tolinski: this sounds a little bit like, I guess it sounds like a little bit of super powered, continuous integration stuff. Because more than just continuous integration. It's also building in things that were even like process based maybe around issues or things in your repo. But one of the things that I'm really interested in, is this going to replace continuous integration services? Like, am I going to need to use codeship? Or said before, or circle ci, or any of those things? Are you still going to need those with GitHub? It doesn't look like it actions, or could it completely replace that, - -11 -00:06:38,190 --> 00:07:33,900 -Wes Bos: I think it will completely replace it, because you do have to take it on yourself to actually write the code that the CI does, because like, it's not like GitHub is going to like write code for every single possible situation, but when people will, but But well, they people have published all of these different types of actions. There's hundreds of actions already on GitHub, for things like deploying to Google Cloud, deploying to AWS, running your test suite, and making sure all of these things happen. And you can also order them as well, it's called steps. So you might want to like, first run a linter, and then run a builder and then run a deploy and then run like a domain name swap on that. So that might be four different steps that you have interest. Um, and as far as I can see, yes, this is going to replace all of these like little 510 dollar a month services that are used for your continuous integration. - -12 -00:07:34,050 --> 00:08:03,480 -Scott Tolinski: Yeah. Which I've never found to be super user friendly. Anyways, you know, I don't want to complain too much, because they're fine. But I feel like there's things they could have done. Like, coach, it was really great, because it did a lot for you. But I think you were paying for that right? Well, I think some of them, I don't know, they all have their own ways of doing things and their own systems that you kind of have to adhere to and learn and then becomes a big thing that you have to learn this thing, where I feel like GitHub actions are gonna be a little bit more. I don't know if the word right word is ubiquitous, but used is ubiquitous, - -13 -00:08:03,570 --> 00:08:42,020 -Wes Bos: used by everybody? Yeah, like, you don't have to learn a new way. It looks like they're all based on YAML, which is the indentation based config file. So if you've ever done like a Docker file or something like that, kind of similar to that. So it certainly we'll still take a lot of setup like this is not some amazing GUI, where you just click together things that exist, you still have to write your own config files and whatnot, but like, I'm just running some math on what I would need it for. And it's, it's real simple, real simple. I think it will be I think it will be very cheap. If we were to run syntax, or even my own build on on something like this. - -14 -00:08:42,210 --> 00:08:54,630 -Scott Tolinski: Interesting. So yeah, it seems like it could be definitely very useful, especially and maybe you were like on a roll your own Gatsby type of thing, where, like you were headed a Gatsby and you wanted to have like a build created directly every time you pushed, - -15 -00:08:54,720 --> 00:09:49,500 -Wes Bos: yeah, deploy it to your server. Yeah, comment with a, like, you could also like you could check it. And if it's if it's failing some tests or failing code style, then you could either just automatically fix it or have a bot, write a comment under it. Like there's a lot of bots that currently do stuff like this. And GitHub actions, I think will totally replace all of that as well. Cool. Pretty cool. Yeah, it's and so GitHub has libraries in, I was just looking at the JavaScript libraries, and they have them in other languages as well. So like, you would write like a node app, or a node script that imports the GitHub libraries. And then you can use those libraries to get information about the code, you can check out some, check out a branch if you like. It's pretty neat to be able to do all of this. And it's pretty cool that GitHub is opening up the ability to run code on their own servers. Wow, - -16 -00:09:49,790 --> 00:10:57,300 -Scott Tolinski: this is really interesting. I just found just googling around within the action googling I'm just searching within the actions here. And I found one called it next diff for next j. s does actually Made by site themselves. I've never seen this before. And this action takes a screenshot of your change to pages, and then writes a comment on a PR. Yeah, just the positive, stuff like that, like, yeah, I'm running a site like level of tutorials, there's a lot of pages and I make changes. I rely on, you know, Cypress and my unist unit tests, but I'm not testing for visual changes necessarily. And so sometimes things do maybe introduce a small visual bug on a page that I haven't checked or didn't look at, or manually test for some reason, in a visual way. And this seems like that could be a really great thing to just get a nice little Alright, here's the changes that have happened. And here's them and screenshots right here in front of you. That seems like that seems like a task betta, like a manager would do to be like, hey, go off and take screenshots of every single page and then email them to be because I'm, you know, not tech savvy. ahead. Wow. Have - -17 -00:10:57,300 --> 00:11:00,600 -Wes Bos: you ever had that, that gets you? Oh, you rusty, we're not. - -18 -00:11:00,720 --> 00:11:11,670 -Scott Tolinski: We had somebody was just like, we need screenshots of all the pages. It's like, why don't you just go to the darn site and look yourself, or you know, pull it up on your phone, even all I need screenshots? Oh, - -19 -00:11:14,370 --> 00:12:02,670 -Wes Bos: that's great. I'm just reading through the code on the next diff. And it seems 190 lines of JavaScript, it uses puppeteer. So like the beauty of GitHub actions is that if it's done in JavaScript, you can just use any node module that you can think of, it does look like there's a Docker file, which is 25 lines of code. And part of the Docker file is that once the Docker image is up and running, I'm imagining it has puppeteer or headless chrome running in it, then it just runs this node screenshot j s. And then that will in turn, pull down the website, check all the pages, and then post a table to the comment. So that's actually a really good example of like a simple example, which seemingly pretty powerful, - -20 -00:12:02,760 --> 00:12:43,440 -Scott Tolinski: yes, it's simple. Yeah, we should actually link to this marketplace, I'll pull up put this in the show notes here. Because the the marketplace looking for actions, there's a lot of cool stuff that just popped through in here. And just even again, just to check them out, like you said, just pull through their code and see to see what you can do for some of these. But also maybe just get inspired. Like I had no idea that screenshots thing even existed. And I just searched for next, and it popped up. So I'm pretty darn excited to dive into these a little bit more now that I have a firmer understanding of how powerful they can be. I was sort of thinking they were just sort of a continuous integration replacement. And I wasn't thinking that they were so powerful. - -21 -00:12:43,650 --> 00:13:36,000 -Wes Bos: Yeah, it's it's the sky's the limit if you can run your own code, right. So that's pretty cool. I'm just looking at other ones. Validate license, make sure repo has a license, environmental variables, syntax checker, lots first things like es lint in here. That's because that's like the probably the most simple one is just format the code, when somebody sends in a pull request, yeah, format the code properly, get up actions for Gatsby, see Li Twitter action, update a status on behalf of a user. So like, whenever you merge a pull request, or whenever you cut a release of an application, you could post it out to GitHub, update or create a DNS record on CloudFlare. That's huge, because a lot of this like hosting is just changing your DNS a record to a new value, and then your domain name will - -22 -00:13:36,030 --> 00:13:45,810 -Scott Tolinski: cut over immediately. Here's one that exports figma components directly from figma and then uploads them to a GitHub repo. Pretty - -23 -00:13:45,810 --> 00:14:18,660 -Wes Bos: cool. Yeah, there's that Oh, there's SMS I SMS responsibility alert. I said that earlier that that does exist. php runner? Yeah, pretty cool. Pretty, pretty, pretty. Oh, secret scan, scan your repository for secret? Oh, by accident. Mm, scan your repo. Ah, so if you because I've certainly heard of people accidentally posting like AWS tokens to GitHub. So maybe this will stop you from doing that before you even push - -24 -00:14:18,660 --> 00:14:25,020 -Scott Tolinski: it. s3 backup mirror repository to an s3 storage repo. Cool. - -25 -00:14:25,230 --> 00:14:59,130 -Wes Bos: I can't figure out how this thing works. But what the secrets can but I think the way that it works is that it will stop the push from happening. So I even think you can go even before you push code to a repo, like from your command line, I think you can reject it. So you don't even accidentally push a secret to GitHub, those things like well, how would that work if as soon as you even submit a pull request, the code is on GitHub, and then you're poached, but I think this will stop it. That's just another example of like, being able to trigger these actions from running at any given point. - -26 -00:14:59,370 --> 00:15:04,980 -Scott Tolinski: Super cool. I'm very excited. I'm glad we chose to do this episode because now I'm inspired. - -27 -00:15:06,270 --> 00:15:16,980 -Wes Bos: Awesome that that was my hope with this is that like, not necessarily, here's how I'm using it. But here's what it is. And here's what people are using it for. So just clear the air as to what it is. Wow, cool. - -28 -00:15:17,040 --> 00:15:48,510 -Scott Tolinski: So these are GitHub actions, I am pretty darn excited. I don't know about you. And I'm going to be spending some time in this marketplace today. So check it out. We have the links in the show notes here. If you want to check out the GitHub actions marketplace and just pass through some of that code and see what you can use or might be useful in your projects. Just doing a little quick little search about whatever you know, type of thing you're using or something you might be interested who knows somebody may have already written this thing for you. And that's the best case scenario. So as always, this has been an awesome episode of syntax. I look forward to Wednesday's episode. All right. - -29 -00:15:48,510 --> 00:15:53,100 -Wes Bos: Thanks for tuning in and we will catch you later later. Please - -30 -00:15:54,930 --> 00:16:01,800 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player - -31 -00:16:01,800 --> 00:16:02,580 -Unknown: or drop - -32 -00:16:02,580 --> 00:16:04,710 -Scott Tolinski: a review if you like this show. - diff --git a/transcripts/Syntax204.srt b/transcripts/Syntax204.srt deleted file mode 100644 index 4ec42319f..000000000 --- a/transcripts/Syntax204.srt +++ /dev/null @@ -1,688 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and Wes Bos. - -2 -00:00:10,559 --> 00:00:46,020 -Wes Bos: Welcome to syntax the podcast with the tastiest web development treats today we've got a really fun one for you. It's an entire episode of sick picks. We at the holiday gift guide. So these are things whether you're looking for something to ask for whether you're looking to buy for a techie or a web developer, these are things in tack food experiential clothing, that Scott and I think that are good gifts. So we're gonna sort of go through it's always a fun one we did this last year and people loved it because it's just also a neat way to discover new products and services and things like that. How you doing today, Scott? - -3 -00:00:46,409 --> 00:01:44,910 -Scott Tolinski: I'm doing good. Yeah, I'm tired. It's it's Yeah, it's that time you know, the kids are maybe both not sleeping we moved landed into his big boy room and he's sleeping into a full sized bed because that's all we had didn't ever so little guys in the giant bed. And he he's getting used to it. But sleep has been disrupted. So to say I also had a little bit of an issue this morning with my robot in my house. I told Google to turn on my right power strip. Yeah, say girl turn on my right power strip and it goes turning left power strip on I said turn on the right power strip horrible. So turning left power strip on and I said gorbel you are mF and dumb. And then gorgo says back to me. Sorry, I'm still learning. like okay, I don't need my darn robot talking back to me. I did not know that was a thing. - -4 -00:01:44,939 --> 00:01:46,770 -Wes Bos: I got kids talk back to me. - -5 -00:01:46,889 --> 00:02:03,660 -Scott Tolinski: I need a robot talking back and say my mistake sir. Like a come on? I don't know. Maybe made me feel not feel bad for swearing at it. But it made me feel bad. Oh, made me feel creepy. There's creeped out by this thing apologizing. - -6 -00:02:04,080 --> 00:02:37,190 -Wes Bos: Yeah, we we have that with the the Chromecast about half the time when we tell it to show us something on our TV. Like we're say, like, show us photos of camping or photos of swimming in it about half the time. It's like, are you putting them on the TV. And then the other half of the time. It's like, I don't have a screen. And I go on. There's like I love the Google Home stuff. And we'll talk about that in here. But sometimes that you can tell that they're like constantly tweaking it. And like when you think you have a handle on what to ask it or how to exactly say it, then they change it on you. - -7 -00:02:37,740 --> 00:02:58,740 -Scott Tolinski: Yeah, it was like for one week, if we were to tell Google to sing Twinkle twinkle little stars. Because Leah loves that land, it will be like our friends all three. So we'll tell it to sing it. And then for like, one week, it would be like playing Twinkle twinkle little stars. And Spotify would be like, No, you sing it. We want you to sing it. - -8 -00:03:00,150 --> 00:03:02,880 -Wes Bos: Don't don't pass this off. Don't - -9 -00:03:02,880 --> 00:03:09,690 -Scott Tolinski: do yeah. And now let's see they get it didn't sing it for like a couple weeks. And now it's singing again. So I have no idea they need to stop tweaking. - -10 -00:03:10,139 --> 00:03:51,090 -Wes Bos: Oh, man. All right. Well, today, we are sponsored by two awesome companies. The first one is Prismic, which is a headless content CMS with a graph qL API. And the second one is Freshbooks is just cloud accounting software. We're talking about them partway through the episode. So we're just gonna go through some categories here. Things that are are nice gifts, the some of them are just like very generic. And you can find them anywhere. And some of them are actual specific products. And for those ones, we'll have links in the show notes if you want to check them out. So don't feel like you have to write them down while you're driving. hands on the wheel and on the wheel. So let's let's kick it off with some some tech gadgets you want to you want to grab the first one there. - -11 -00:03:51,330 --> 00:03:51,840 -Unknown: Yeah, - -12 -00:03:51,840 --> 00:04:46,700 -Scott Tolinski: I recently have bought into the apple ecosystem. And I got the Apple Watch and let me tell you, it's darn good. So if you have an iPhone and you're on the fence about the watch, check out the Apple Watch. I know this is old news here but I really liked mine and I was definitely a holdout for a long time. So I use it all the time for absolutely everything from tracking workouts to controlling my podcast. Honestly, probably my favorite feature on it is the decibel meter. I use it all the time to check how loud things are which is sounds ridiculous but I really love it like my dogs barking and I'll be like, Oh, this is really bad for my ears right now. Or, or I can even just tell the ambient level in my office like I can visually get a good indication that my ears are hearing what I'm thinking I'm hearing correctly in my office. So either way, the Apple Watch is great and and I highly recommend it if you need another recommendation for it. - -13 -00:04:47,610 --> 00:05:51,060 -Wes Bos: Awesome. I'm going to pick up wireless chargers as the next one. So I've got this little pad on my desk. Most phones now have the what is it Queen Chi. How do you say that Queen g I don't know. I don't know isn't basically you you you lay your phone down or your your your headphones or whatever that has wireless charging on these pads and they charge just make sure that you get one that does 10 watts there's a bunch out there that are five watts seven and a half watts do do one that does 10 watts I personally have the sovereign one which they sent me for free that's why I have that one. But I'm just looking on Amazon here and the anchor ones are much cheaper and encore has never let me down on on anything. I love their products so I would probably go for that one instead. Although the sobre one that I have has this like really cool light ring around it. And it does get the likes on Instagram. Because it looks cool. Can you use it in like the bedroom like I know my charging pad to be not lit up? - -14 -00:05:51,779 --> 00:06:01,980 -Scott Tolinski: Yeah, and it's baby monitor can't like the baby monitor thing itself has this huge light on it. You're like what Come on, like I don't need this light on 24 seven Why is this late on? - -15 -00:06:02,219 --> 00:06:27,840 -Wes Bos: Yeah, we we bought like this I just bought this huge pack of every color electrical tape available. And I just went around our house just taping everything with the light on I was like Why does everything have such a blinding light? So a good idea. Don't get this don't get this opera one. If you want to put it in the bedroom because it's bright as hell. I honestly don't use the charging pad in the bedroom or anything like this sounds weird saying in the bedroom. - -16 -00:06:28,950 --> 00:06:30,480 -Scott Tolinski: In the boudoir Yeah. - -17 -00:06:31,590 --> 00:06:47,040 -Wes Bos: Because I like just having it on like a chord is fine for me. And I've got some recommendations for wicked chords. But I do use it on my desk because I take my phone out and just lay my phone on this thing when I'm at my desk and get a couple extra percentages while I'm sitting there. - -18 -00:06:47,250 --> 00:07:31,110 -Scott Tolinski: Nice got to get those percentages in that battery got to be charging, charging that battery all the time. My next pick is going to be for the Sony wh 1000 x m three headphones, it's the stuff I hate how they do those names, man. But these are the like the class leading noise cancelling headphones. And I wear mine absolutely every day at some point, I have them on my head and the battery lasts for long, like the longest time ever. The sound canceling properties of them are absolutely fantastic class leading absolutely as good as it gets. Definitely worth the price. So these are these are my personal headphones of choice. If you're not rocking like a pod situation. But these are great are absolutely awesome essentials for flights. - -19 -00:07:31,260 --> 00:07:33,660 -Wes Bos: Yeah, they're USB C two, right? - -20 -00:07:33,770 --> 00:07:35,670 -Scott Tolinski: Yeah, USB C. Yeah, - -21 -00:07:35,850 --> 00:08:23,790 -Wes Bos: I was looking at these, they're on sale for Black Friday, like 80 bucks off or something like that. And I was so tempted, I have which I guess will be my next pick, I have the Bose QC 35, which were there are like one of the best ones you can get as well. You can connect to devices to them as well. So you can flip between your phone and your computer. So if you get a call you listen to music and you're you get a call you can flip between, although that's not perfect. It's sometimes confuses itself, as to which one it should be connected to. And but the big fan of those as well. And the problem, the only problem with them is that they're amazing. And like I've had them for like, I don't know, two or three years and they're they're nowhere close to being needed, needing to replace replace the ear cups on them. And they feel like brand new headphones. So maybe in another three or four years when these things dial, I'll be able to check out the Sony ones. - -22 -00:08:23,910 --> 00:08:26,760 -Scott Tolinski: Yeah, right. Yeah, who knows, but they'll be like by then. - -23 -00:08:27,300 --> 00:09:36,649 -Wes Bos: Next one we have here is a USB C hub. So if anyone has one of these new MacBooks, or really any computer that is USBC based, you'll know that they often don't come with any ports. So having like a rock solid USB hub has been or is super important. I've had many different hubs in the past and a lot of them don't work, a lot of them flake out and I go to conferences and do workshops, and I can't have a flaky one. So the one that I got was the sovereign eight and one. It's kind of expensive, like 55 Canadian, which is probably about 40 3038 American, something like that, but it's got your HDMI in it got a bunch of USB regular ports, a couple of USB C ports, just does everything, everything that you need. So I've been a big fan of having that one and then just like the cord on it because like what happens with these things is that you get the projector and they have the bend the cord that often put it in the side. And that's where these things flake out is when they get bent. And then that's really flaky and this thing has been rock solid for like two years. So big fan of that one. - -24 -00:09:36,990 --> 00:10:37,380 -Scott Tolinski: Yeah, I have one that is the techy and yeah, this one's really good as well. It's been doing good for me, but I also I like what you're saying about anchor like everything that anchor makes is always been good for me. So between the sovereign said techie anchor, I'm sure you can find a really good one. This is a neat little gadget for those of you who are maybe potentially getting interested In streaming, maybe you have a camera you're interested in upgrading your webcam. This is a neat little device that I use called the Elgato cam link, and it basically plugs one end USB, and the other end HDMI. And as long as your camera can do a output, it's called a clean output where the output doesn't have anything overlays on it, it's just straight up video, you can use that as your webcam, you can use it to record directly onto your computer, you can use it for just about anything live streaming, this little device is really super cool. It looks like a USB drive. And it does so so much. So check it out. Elgato cam link. - -25 -00:10:37,529 --> 00:10:49,590 -Wes Bos: Oh, that's cool. I'm just looking at these like, well, how much did that cost? Like hundred and 10 bucks. 150 bucks. That's pretty good for if you've got like an old DSLR kicking around. As long as it - -26 -00:10:49,649 --> 00:10:54,240 -Scott Tolinski: outputs correctly, you would have Yeah, sure. It's on the list of what to have on the website. - -27 -00:10:54,360 --> 00:11:20,190 -Wes Bos: Yeah, okay, man, I'm really tempted to this because I'm getting kind of sick of my webcam right now got a 1080 p Logitech webcam. And it's it's good, but like everybody's stepping up their game with these like DSLRs. And Scott looks amazing on his. And that My only problem is I don't have like, I'm right up against the wall where my desk is, and I don't think I'm far enough away, I think I need to just tear down everything in my office and reject the layout, you just - -28 -00:11:20,190 --> 00:11:30,029 -Scott Tolinski: need to build an extra extra few feet behind your wall, just knock down the wall of your desk where it is, instead of just moving your desk, you just shift everything a little bit. - -29 -00:11:30,630 --> 00:13:00,000 -Wes Bos: I badly need to redo my office. I just got wires everywhere. I mean, like one of those like rack mounted things that I can put everything into. Yep, nice and clean. Yeah. Next one we have here, which is still under attack is the bunker five in one quick charge hub. So I've picked this a couple times. And I have a couple of them throughout my house. So the problem that you have is that generally you have like, I don't know a couple USB things plugged in, you've got like underneath our couch, we've got two lightning cords for both of our phones. And then we've got a couple of USB microphones to charge random things from around the house and a bunch of the kids stuff is USB and some of its USBC. And then we have an old iPad, which is the old 30 pin. And like you've got all of these different connectors. And sometimes it needs to be charged at the same time. And you don't want to have to like keeps switching out the cord. Like this is a bit of an aside but I always go go nuts on my wife because she is a cord mover. You know the type of people that have like one nub and one iPhone cable and they like carry it around with them. Like if you want vacation. They like unplug it from beside the bed and like pack it like yes. the complete opposite, where I'm like, the court should always stay in one spot. And you just buy more chords and put them where they should be and you never move them. Because that way you never lose them. And they're never in the wrong spot. And they always have one when you need it. Oh, totally. - -30 -00:13:00,210 --> 00:13:12,299 -Scott Tolinski: Yeah. What's funny about that is that like, there gets to be a point in which you have like an apple power cable that cost like 120 bucks or whatever. And you're just like, yeah, okay, maybe I'll just move this one around everywhere. - -31 -00:13:12,539 --> 00:14:13,080 -Wes Bos: The laptop is a bit of an exception, you can move that that's the only one I will move. But everything else like I'll just device USB charging devices, you just have one where you are anyway. So this thing is 63 watts. And it has you can get them with five, eight and 10 ports, I believe I have the five one. And then you just have like USBs coming out of this thing. And you can charge all your stuff at once, which is awesome. It charges super fast because it has mine has this thing called IQ in it, which will it will detect the max charging rate that the device will take like it will keep bumping up the charging rate until it realizes it's not taking anymore and then it'll back it off. And then these new ones have quick charge in them. So if you have a device that accepts a quick charge, then there's two of those ports are quick charge enabled. And the rest are are IQ powered, which is pretty neat. So I love this thing. We have three of them throughout our house. kind of expensive, but 50 bucks Canadian, but well worth it, I think - -32 -00:14:13,529 --> 00:14:17,340 -Scott Tolinski: interesting. Yeah, that's pretty cool. Quick Charge hub. - -33 -00:14:17,580 --> 00:15:31,799 -Wes Bos: Yeah. Oh, I got one more. So my last one on on this kind of gadgets here is are these new three in one, like I'm a sucker for a weird cable. I have these cables that are like in the same plug there USB and then if you turn it upside down, it's micro like it's not like a like a little adapter you take off it's the same plug. And it works pretty good. And I've in the past I've tried those like magnetic tearaway ones in the past and I've recently found these three in one cables that are braided First of all, because braided cables are the best. But they have like three you plug one into the wall and then they have three, they have a USBC, lightning and a micro USB all in the same one. And they all work at the same time. Meaning that you might not even need the last thing that I picked unless you need a high charge rate, because it will charge them all at once. And it's just the best. I bought one to try it out for a couple weeks. And I've been loving it. And now I have ordered one for everybody in my family. It's gonna be like a little stocking stuffer. Oh, that's fun. Yeah, I got them on. So there's just like, you ever go to this website? dealextreme. calm. - -34 -00:15:32,070 --> 00:15:37,919 -Scott Tolinski: Nobody sounds awesome. So yeah, deal extreme. It's spelled with an X instead of x. - -35 -00:15:38,429 --> 00:15:47,669 -Wes Bos: It's actually dx.com dX like developer experience calm. Oh, and this website is awesome. It's all kinds of cheap little gadgets that you get from China. - -36 -00:15:48,029 --> 00:15:52,770 -Scott Tolinski: Oh, man, I just got transported back into the 90s in a nice day it - -37 -00:15:54,090 --> 00:16:15,630 -Wes Bos: so you can you can find I got them on this website for about four bucks apiece. The only downside is that they come from China. So the shipping is anywhere between a week and it never shows up. Yeah, yeah, I never. I have seen them on like Amazon, things like that for about 10 bucks a cord, which is, in my opinion, well worth it for a high quality braided cable. - -38 -00:16:16,080 --> 00:16:40,679 -Scott Tolinski: Nice. Cool. You got to be a little careful with buying tech, sometimes at one time, my buddy but some ram for his girlfriend's computer. And they had only been dating like a year. And she's not a techie. She just like she was like a writer. He's like, well, her computer was slow. And that was the only gift he got her. Like, dude, that's not a sick. Would it make sense? It's a practical gift. I'm like, dude, - -39 -00:16:41,909 --> 00:16:44,429 -Wes Bos: giving someone a vacuum for Christmas. And mostly. - -40 -00:16:45,450 --> 00:16:54,929 -Scott Tolinski: Yeah, they're asking for ram for it unless she was like explicitly, like, I really need some ram for my computer. It's like, well, I heard her talking about how slow was oh my god. Okay. - -41 -00:16:54,960 --> 00:16:57,799 -Wes Bos: Oh, look at that one. - -42 -00:16:57,929 --> 00:17:25,800 -Scott Tolinski: Yeah, careful with that one. Let's section we want to talk about is automation, home automation stuff. We like smart home stuff over here. I know we're all big fan of the wise cams. But one smart home device that I really liked more than a lot of anything that I have else in my house is the Google nest home hub. For me, I really get a lot of use out of this. Courtney and I both have one. And it has like a revolving door of family photos on it is just like our family and friends photos. - -43 -00:17:25,800 --> 00:17:26,970 -Wes Bos: It has a screen right? - -44 -00:17:27,000 --> 00:18:07,470 -Scott Tolinski: Yeah. So it's basically like a little it is small to the small one is pretty little small. And it's like a little photo frame. And it is so smart. and nice. To be honest, this thing really, really has. That is probably the best smart device because you can tell it to do things but it has a good speaker. But you can also swipe when you need to swipe, push when you need to push. Landon can yell at it to the weather in the morning, because he really likes to do that. But he'll just like sit there and swipe through pictures. And it'll be like that's grandma. That's that's uncle Ron. Like, he'll just go through all of them. And it's so much fun for him. So we really like our nest home hub. It's it's really nice device for the for the price. Yeah, we - -45 -00:18:07,470 --> 00:19:06,000 -Wes Bos: just got one on Black Friday, and I brought it home, plugged it in. And it does all the stuff with Google Home does. But the frustrating part about Google Home is there's no screen. So when you turn on the lights, you sort of have to yell at it. If it did it wrong. You can also just like run over there and hit the dimmer on it or something like that. And the kids love it for swiping through the photos to plays YouTube videos. It's like an iPad. But it doesn't have a browser which I'm surprised no one's hacked it yet. Like first thing I did. I was like, Alright, who's got custom firmware for this. Nobody has hacked it as far as I can see. But for like it was an eight nine bucks Canadian so good. We went and bought another one just to have another one. In our cottage just it's so cool to have the like the family photos, just constantly on it's so good because it detracts our kids from wanting to watch TV, because they just like sit there and watch the photos and swipe through them. And they can go back if they missed one which is really cool. - -46 -00:19:06,000 --> 00:19:07,800 -Scott Tolinski: Oh yeah. Yeah. Love it. - -47 -00:19:08,010 --> 00:19:17,550 -Wes Bos: Yeah, that I'm very tempted to get the max one which is a larger screen. I think the cheap ones like an eight inch screen, which is Yeah, it's big enough. But the max ones like three times. - -48 -00:19:17,600 --> 00:19:24,860 -Scott Tolinski: We'll be getting a max one for the kitchen. I think just yeah. Courtney would really like to use it for like watching TV. or cooking or - -49 -00:19:24,900 --> 00:19:25,650 -Unknown: Oh, yeah. - -50 -00:19:25,650 --> 00:19:28,230 -Scott Tolinski: Yeah. Asking for recipe stuff. - -51 -00:19:28,500 --> 00:19:33,930 -Wes Bos: Yeah, as you have YouTube TV, right? We do. Then that does that go on the Google Home? Yeah. - -52 -00:19:33,930 --> 00:19:36,030 -Scott Tolinski: You just say you put this on this. Yeah, - -53 -00:19:36,030 --> 00:19:37,500 -Wes Bos: that's so cool. - -54 -00:19:37,500 --> 00:19:39,050 -Scott Tolinski: The accordion does that all the time? - -55 -00:19:39,210 --> 00:19:40,920 -Wes Bos: That's like having a TV in your kitchen. - -56 -00:19:41,160 --> 00:19:50,840 -Scott Tolinski: Yeah, if she's like, she's in the bedroom and just like hanging out on the bed. She'll just tell the google home sits right on their nightstand there and play something on there because we don't have a TV in there. You know? - -57 -00:19:51,180 --> 00:20:05,220 -Wes Bos: Yeah. And the future is awesome. I was just thinking about that one. My kids were watching a YouTube video on it. And they're just sitting in front of and I was like, like, 10 years. Your old me would have killed to have Yeah, little touchable TV like this would have - -58 -00:20:05,250 --> 00:20:06,780 -Scott Tolinski: loved that content. - -59 -00:20:06,870 --> 00:20:38,640 -Wes Bos: Yeah, we've talked about all the wise stuff on end in this podcast if you want to get somebody a nice camera, the Wise cams are 19 bucks. Yeah, American. They're amazing. There's no monthly costs associated with it. They're USB powered. I have seven of them in my house. And I have two of them outside which they're not supposed to be outside but they're holding up okay. In the Canadian winter, big fan. The the wise plugs are good ones. You've got a couple of the bulbs, right? I don't have the bulbs yet. - -60 -00:20:38,969 --> 00:20:47,790 -Scott Tolinski: I don't have any of the bulbs. I don't have anything but the cameras and I or the I'm sorry, of the the cameras. And then I have the motion sensors and the proximity sensors. - -61 -00:20:47,840 --> 00:20:48,590 -Wes Bos: Oh, yeah. Yeah, - -62 -00:20:48,590 --> 00:21:05,760 -Scott Tolinski: I've got that as well. And those have all worked really good. You know, we have the motion sensor in the garage. I have a prep or a door open sensor on the garage as well. So I can tell if the garage doors open. I have one on all the doors. It's really nice. I like it a lot. Yeah, no way. We can just make sure everything's all good. - -63 -00:21:06,050 --> 00:21:14,940 -Wes Bos: Yeah, that kind of stuff is a great 20 $25 gift for somebody. Oh, yeah. And I think it you get you get your bang for your buck on that kinds of thing. - -64 -00:21:15,150 --> 00:21:24,390 -Scott Tolinski: Yeah, the the sense ones are really cheap for what they are. And they work really, really well. So big, big fan of those. That's a nice, cheap, fun gift. - -65 -00:21:24,630 --> 00:22:48,150 -Wes Bos: Mm hmm. Apparently the wise outdoor cam was delayed. They were supposed to release it by the end of the year. And they just sent an email saying, apparently, it's going to run on battery for like six months, which is pretty cool. Right? Probably similar to how the ring doorbells do like whenever there's motion, it will turn on. But then you can also hardwire it, which is pretty cool. But apparently it's delayed. I'll be happy to do my battery wise, because we don't have a lot of good wiring situations as is with this house. So be nice to get some of those and not have to worry about that aspect. Yeah. And it's not a big deal to like, have to grab it down once or twice a year and plug it in for a half an hour to charge it. Totally. Um, what else here at Google Chromecast, that's always a cheap one to give somebody if it's got a TV with HDMI port, you plug this thing in at the very basic for most TVs Google Chromecast will turn your TV off via Google Home. So you just say okay, Google, turn the TV off. And like that alone is good. But also as a picture frame like you turn your entire TV into a picture frame. And then things like watching Netflix and whatnot is pretty cool. Although we don't we don't like doing YouTube and Netflix all that much. Because then you don't have like a remote control, which is frustrating. So we like to go just use actual TV raw to do Netflix and stuff like that. - -66 -00:22:48,210 --> 00:23:45,600 -Scott Tolinski: Yeah, we've been getting into once our TV got the apps that are really nice. Yeah, I got good ABS that's like really sort of what changed it for me was using the apps in the TV. But before we had a crappy old TV in the apps are all terrible. So we always Chromecast did everything. And now we do a little bit more of the TV usage just because of how nice that is. Let's get into I guess one last thing that I have. I have a smart power strip that I really like. I'll post a link in the show notes here. But I've really liked having these smart power strips because you can control each outlet individually or the whole strip itself. It has four USB plugs on it. My camera is powered by it. My studio monitors are on it my video monitor all of my studio lamps. So I can tell it like various commands to say, Oh, it's recording time. And then all of my lamps will turn on my monitor will turn on my studio monitors will turn off. It's so good. Seven big fan of having something like this to give you that like fine grained control. - -67 -00:23:45,600 --> 00:23:46,260 -Wes Bos: Who makes this - -68 -00:23:46,260 --> 00:23:51,360 -Scott Tolinski: one? I'll have to look it up. To be honest. I'm not sure without looking at it. I'll have to post a link. - -69 -00:23:51,779 --> 00:24:11,370 -Wes Bos: Cool. I've been thinking about getting one but then I also just have regular power strips. I was at a garage sale this summer and I found all these like super high end power strips and I bought them all. And I was like I just plugged this into the wise outlet thing. And and then it's smart. Just put that on the end. - -70 -00:24:11,400 --> 00:24:13,680 -Scott Tolinski: Yes. That works. Sure. Okay. - -71 -00:24:15,810 --> 00:24:24,690 -Wes Bos: That's the red or the Clark Griswold of our home. All right, what's next here? We've got a laptop. - -72 -00:24:24,930 --> 00:24:28,080 -Scott Tolinski: Movie reference. Wes Bos did a movie reference. Oh. - -73 -00:24:29,610 --> 00:24:49,710 -Wes Bos: That's one of the movies I've seen probably dozens of times is like Christmas vacation. Oh, yeah, that's a good one. Let's take a quick break for our sponsor, which is Prismic. And I'm gonna just ask you to go to the website prismic.io forward slash syntax because it's actually hilarious what they've built right here. - -74 -00:24:50,010 --> 00:24:51,300 -Scott Tolinski: Oh, this is so funny. - -75 -00:24:51,390 --> 00:25:00,000 -Wes Bos: They found a clip of Scott breakdancing and a clip of me. And they've sort of pitted us against each other as Scott being team view and West being team react. - -76 -00:25:01,620 --> 00:25:02,310 -Unknown: That's funny. - -77 -00:25:03,689 --> 00:25:11,130 -Wes Bos: And then they've taken their employees and like pitted them against suddenly Levi's on Team Wes. Well, Phil is on teams. - -78 -00:25:12,029 --> 00:25:15,960 -Scott Tolinski: That's great. Scott, Scott. Oh, so - -79 -00:25:15,960 --> 00:26:07,230 -Wes Bos: anyways, what is Prismic? They are a CMS that has a graph qL API. So you log in, you create your content types. You create relationships, you create, what kinds of inputs that you want. And then they've got a JSON API, as well as a graph qL API, you can pull that data into Gatsby, React Apollo, pretty much anything that accepts data, which is absolutely everything. But you probably want to use it with a view and Knox or next or react, something like that, check it out. It's the component based CMS that you didn't know that you needed prismic.io forward slash syntax. They've got a bunch of docs and starters. That will sort of get you up and running with a little example. So maybe over the holidays, if you're looking to try something new, check it out. prismic.io forward slash syntax. Yeah, it - -80 -00:26:07,230 --> 00:26:20,130 -Scott Tolinski: looks like they have some really nice Getting Started stuff on that forward slash syntax page as well. So definitely need check out there. At least run through the getting started. I'm sure you'll be pretty amazed at how easy this stuff is pretty cool. - -81 -00:26:20,130 --> 00:26:31,530 -Wes Bos: Also, check out the Prismic YouTube channel as well. They have been bringing in people that are in the industry just in for some like chats just about the tech. They're doing it really well - -82 -00:26:31,559 --> 00:26:34,320 -Scott Tolinski: people, huh, just some people, some some people, - -83 -00:26:34,379 --> 00:27:12,330 -Wes Bos: some some amazing, good looking people knows, obviously I was brought in to talk about react hooks and next versus Gatsby and something else. And they I think, like once a month they're bringing in someone and I think that it's a perfect example of like content marketing to me, because they're not like sitting you down being like, so tell me how Prismic is going to be changed your world. They're just talking about tech in general. And I think as a side effect of that, that makes you have a positive outlook on on a company like that. So I thought, yeah, good job as content marketing in that respect. So anyways, let's keep going with our gift guide. - -84 -00:27:12,539 --> 00:27:35,460 -Scott Tolinski: Yeah. So the next thing, you have a laptop, you have a desk, well, maybe you need a laptop stand for that desk, I personally have the one by 12 south, it's a really nice, it's all one piece, it's really sturdy, it puts the laptop in the perfect spot. That's the one I like to use. I know you have some other options here. But this 12 South one is really nice. If you're a fan of this brand, it's really nice stuff. In general, - -85 -00:27:35,849 --> 00:28:12,390 -Wes Bos: I personally have the rain design m stand and I've had this thing for probably 10 years now. And they still sell the exact same one and it just looks like your lap. Actually, now that I have a space gray laptop, it doesn't match it anymore. But it's just like a solid piece of aluminum. And it's perfect for just like putting your laptop on it and raising it to the right height. But there are some other sort of designs that have popped up in the last couple years. The big one was the roost stand. And this thing is like, like an umbrella and you unfold it, and you get this like really cool. Oh, I - -86 -00:28:12,390 --> 00:28:15,180 -Scott Tolinski: see that. I know and explain it. - -87 -00:28:15,209 --> 00:28:16,980 -Wes Bos: It's like this like origami thing - -88 -00:28:17,069 --> 00:28:19,950 -Scott Tolinski: on brella is a good good way to explain in - -89 -00:28:20,069 --> 00:28:22,230 -Wes Bos: Yeah. And you can put it at different - -90 -00:28:22,230 --> 00:28:25,890 -Scott Tolinski: angles. It's sort of like the spider from a wild wild west. - -91 -00:28:28,560 --> 00:28:31,980 -Wes Bos: I don't even know what that is. What is that? - -92 -00:28:33,210 --> 00:28:45,720 -Scott Tolinski: Will Will Smith movie from the 90s. And there's a giant spider in it. Oh, mechanic, it looks a lot like that. You know, like Connect sir. Those kind of things. It's like Yeah, yeah, Google that's out there. It looks like the stand. - -93 -00:28:46,230 --> 00:29:31,740 -Wes Bos: The benefit I've seen to this roost stand is first you can travel with it because it's portable. Second, you can put it at any angle that you want. So often I'll see people even at like coffee shops or on a on a plane. They'll just set this thing up and put their put their keyboard like put their MacBook like almost all the way open, very angled. And then you have like an external keyboard underneath it so well. That's pretty cool. rousse makes a nice one next day and makes a nice a nice one. There are a bunch of knockoffs now on Amazon. I think the risk one is like hundred bucks, something like that. The next stand is like 35. So I'm kind of tempted to get this but I don't I don't need it. Yeah, I - -94 -00:29:31,740 --> 00:29:32,910 -Unknown: started Yeah, he did. - -95 -00:29:33,090 --> 00:29:49,590 -Wes Bos: If I was like when I taught the boot camp, we had a bunch of students, they would bring in external keyboard and then they would just set this thing up on their desk, and they would work all day from this. And that's the perfect setup. You don't have to like hunched over your laptop all day long. You can just set this thing up in front of you. - -96 -00:29:50,220 --> 00:30:35,070 -Scott Tolinski: Yeah, I don't know if I would do that. I like typing on my my laptop and shoving my face up into the screen and yeah, definitely like that. Another option would be phone cases one of my favorite phone cases is the Rhino Shield. This case is a little bit different. It's like a bumper case. It just goes around the rim of the phone. I've dropped my phone. I've now had three phones with Rhino shields. I've dropped them hundreds and hundreds of times. I've never had a single issue. Never a screen crack. Never anything. All of my phones are great. And I'm a clumsy dude. Anybody who knows me knows I'm bumping into things. 24 seven. So the rhinoshield for any device. I think they have them for just about every major phone is just been a fantastic phone case for me for ever and ever. So big fan. - -97 -00:30:35,430 --> 00:30:44,820 -Wes Bos: Cool. I don't have any phone. I use a phone case, but I'm not even sure which one it is I just go to the mall and try them on until I find one that feels good. And that's the one that - -98 -00:30:46,860 --> 00:30:48,840 -Scott Tolinski: I'm shaking my head over here. But yes, continue. - -99 -00:30:49,650 --> 00:32:02,360 -Wes Bos: I may well check your rhinoshield out next time. Um, next one is something we did last year. And this got a lot of heat on Twitter when I asked for gift guides and that's a mechanical keyboard. And David Elster on Twitter said, that's like buying somebody a mattress without asking if they like their bed for her or software's. And it's kind of true. So mechanically, keyboards are awesome. It's such a good gift for developer, but you It's such a particular thing, because the keyboard itself, the key caps, the switches underneath, all of those things are customizable by you. So maybe even just getting someone like a decent bass keyboard and then or gift card and letting them spend the money on the caps. And switches themselves might be a good idea. gift cards to keyboard stores. I'm sure that exists. Is that a thing? I'm sure that exists, you can get gift cards for like the gas station. So I can I'm sure you can get mechanical gift card or mechanical keyboard gift card. I have the control keyboard CT RL big fan of that one. I also have another keyboard here that has been sitting on my desk for six months. And I have not yet been able to put it together. - -100 -00:32:02,970 --> 00:32:58,440 -Scott Tolinski: Because I just it's it just doesn't work when you do so. Yeah. That's the same as a big project. And that didn't work. I also I have the code keyboard which is a really nice. It's a variation on another keyboard. But I have the code keyboard for a wired option. And if you're like know somebody who's just maybe not like a mechanical keyboard, crazy person because they exist. I like this key tronic key one. And it's a key cron sorry, nice Tron. And it's like a really low profile mechanical keyboard. It has these really interesting mechanical switches, the latest version of it, it's really nice. And it's something a little bit different. Maybe Maybe there is a mechanical keyboard fan out there who might find this to be maybe a novelty, but I personally use it as my daily driver keyboard and really like it because it's clicky. And it's nice. It's tactile. It's also low profile. It's Mac first Mac focused. Yeah, it's just really nice. - -101 -00:32:58,560 --> 00:33:06,270 -Wes Bos: I think this is really cool. I'm looking at this. You've said it a couple times. And I think I would be really happy if somebody gifted me this for Christmas. I - -102 -00:33:06,270 --> 00:33:12,360 -Scott Tolinski: think if somebody charges via USB, see it's Bluetooth. So it's wireless, which is a big thing for me. - -103 -00:33:12,390 --> 00:33:14,910 -Wes Bos: Yeah, a lot of them are all wired and they're all wired. - -104 -00:33:14,910 --> 00:33:32,460 -Scott Tolinski: Why? Because people like don't want to have that tiny, tiny, tiny, tiny little bit of latency that you don't notice anyways. Yeah, but I really like it. It's a nice keyboard. And it when you click you can set it up. So when you click a button, LEDs radiate out in a rainbow pattern. And it's fancy. - -105 -00:33:33,030 --> 00:33:58,410 -Wes Bos: It's it doesn't seem that expensive either under what 74 bucks I'm looking at it right now. Yeah, for what it is. That's really nice. I think if somebody like if somebody is like a hardcore gamer don't get them this Oh, yeah, yeah, I think if someone's like a web developer designer loves Mac products that's this is probably something that they would enjoy. Yeah, totally. That they're playing starship or whatever that those games are. Don't get them that - -106 -00:33:58,440 --> 00:34:06,510 -Scott Tolinski: yeah, if they're playing starship, you better believe this is not the right keyboard when they're on that starship. What's that fate? What's the famous line from that starship game - -107 -00:34:06,540 --> 00:34:07,650 -Wes Bos: starship? Oh, - -108 -00:34:07,650 --> 00:34:12,900 -Scott Tolinski: what's the famous one they always say? They say right before the big ending. Oh, - -109 -00:34:12,900 --> 00:34:15,690 -Wes Bos: live long and go forth or something like that - -110 -00:34:15,710 --> 00:34:18,150 -Scott Tolinski: live long and go forth from from the game. That was this time - -111 -00:34:18,150 --> 00:34:23,190 -Wes Bos: that it's got that Bill Nye and what's his bunny? The other scientists guy in part of Yeah, - -112 -00:34:23,190 --> 00:34:29,460 -Scott Tolinski: Bill and Neil and Neil Neil did yeah. Mika, Mikko Koivu Mikko Kaku said his name. Okay. - -113 -00:34:31,020 --> 00:35:15,840 -Wes Bos: All right. Next is Mac mice. I recently switched to the Logitech Logitech MX Master. I got two which was quickly I realized why it was on sale. Number three came out a couple months later, but I've been loving it. I had huge problems with it not connecting and I went through absolutely everything it turned out to be the dongle can't be plugged into like a hub or like there's too much interference. So if you get somebody this mouse also get them just a USB extension cable for like three bucks. And then you can extend the dongle down from away from the hub that they're using to where the mouse's so it makes it kind of wireless - -114 -00:35:17,279 --> 00:35:17,880 -Scott Tolinski: extender - -115 -00:35:17,900 --> 00:36:59,900 -Wes Bos: it works amazing since I've done that I love this mouse so much, I would highly recommend you get this for someone cool. Um, what else we have here, lamb cow flexible tripod, so my wife is a fascist. And she goes through tripods like crazy. And I tried to get her like I got like for a long time I got her like some knockoff gorilla pods and they weren't all that good because eventually after like half a year, they would start slouching, the camera would would fold over. And then I got her like a legit gorilla pod, which is like the number one. It these are like little tripods that you can wrap around like a tree or a fence or anytime that you need a quick little tripod there these bendy tripods. And the GorillaPod is amazing, but I recently got her that are actually over a year ago, I got this lamb cow flexible one, which is I think even better than the gorilla pod because it bends in any way. It's basically just like a big bendy, three bendy sticks. And it comes with all these attachments for your phone and for your tripod. Mm hmm. You can wrap it around. I personally we have like a ring light. I'll personally put my phone in this tripod and then wrap the tripod in the middle of the ring light. And it looks amazing when it happens. So that's pretty cool. We should specify that this is if you're if you're just listening and not looking at the things it's not lamb cow like a little lamb and a cow that gives you milk it's all one word Li m m co you lamb cow. Yeah, big fan of this thing. And it was it was much cheaper than the the gorilla pod as well. - -116 -00:37:00,110 --> 00:37:52,710 -Scott Tolinski: Cool. If you want to get into some expensive gifts, like you're talking big money gifts and you know this person is really wanting a new camera. Obviously this is something like this is something you'll probably want to consult with with them. But at least you something maybe you could have a conversation with about if you know that they're interested in cameras. My camera which is the Sony Alpha mine says Sony 873 is just an absolutely fantastic camera in terms of quality. These Sony mirrorless cameras are absolutely blown away everything else. That's out right now for the price. So if you want to get a nice, nice nice camera, possibly used for all sorts of things, video, whatever 4k video, the Sony A seven, three is a beautiful camera, it's around, it's earning 1798. So it's pretty expensive for the body itself. Santa - -117 -00:37:52,710 --> 00:37:54,090 -Wes Bos: is coming this year. - -118 -00:37:54,090 --> 00:38:05,400 -Scott Tolinski: Yeah, so this is this high end gift. But this is a very nice camera. So something to maybe have that conversation about if your person is interested in a nice camera, - -119 -00:38:05,900 --> 00:38:51,210 -Wes Bos: we're gonna move on to experiential gifts here. So some of the best gifts I ever got, were just like, like a knife skills class or a cooking class or massage and because these are things that I will normally not take time out of my day to go do or spend my own money to go do but when somebody gives you a gift card for a float or a massage or nice skills or cooking class and you go and do it, you kind of look back and go Hmm, that was actually really fun. And I took a knife skills class maybe four years ago, and I still have the knife. I know how to sharpen it really well because of that. And like I have, I think I have like pretty good knife skills from just that one day class. I think it was pretty cool. Nice. Yeah, - -120 -00:38:51,230 --> 00:39:45,380 -Scott Tolinski: I personally get a massage every couple of weeks because of my turns out when you spend, you know, good 15 years spending on your head. Your body doesn't like it when you're 30 something so I have to get a massage every couple of weeks here. So this is the kind of thing especially as developers, I know how many people have bad posture habits. I've seen it hunching over, I've been there. You're slouching at the end of the day. It's two o'clock and you're just passing out your postures gone to absolute hell. So massage is gonna go a long ways we did this floating experience which like honestly, you mentioned already but it was really nice for the overly stressed out person in your life. The floating experience the the salt was just saltwater floats or whatever they're called. The deprivation floats was absolutely great, relaxing thing for me. - -121 -00:39:45,959 --> 00:40:05,820 -Wes Bos: Yeah, I I went back and did my second float the other day. They remember we talked about like, I'm not sure if I'm going to go back. And it was right after I launched my course. And I was feeling like, Oh, I need something right now and I went and had a float and I felt Amazing after So, highly recommend going for a full class or getting someone a gift card for that. - -122 -00:40:06,230 --> 00:41:16,980 -Scott Tolinski: Yeah, totally. I'm just gonna knock out my couple of ones here. And then I'll let you just rattle off the rest because you got a lot here and their food. Yeah, my two food ones are a cold brew coffeemaker, which is essentially just a giant, I'm talking giant mason jar and filter, you just ground up your coffee, you put it in this thing, and then you fill it up with water, and then you leave it in the fridge for a couple days, boom, cold brew coffee, I have two of these, I always have a pot of CB going cold brewskis all around the house until insky household because we get a couple of these. And another one is going to be these prep naturals and glass meal prep containers. This is funny, somebody on our Twitter actually suggested this, but we have a ton of these, we maybe have like 15 of them, maybe 1520 of them. And these are great. They're they're hefty glass. It's all safe plastics. And you don't have to feel bad about you know, using these plastic Tupperware that are just creating waste on the planet. And granted, this is glass so you could recycle it a little bit better. So I absolutely love these things. They've held up really well. We've had them for about half a year right now. We do all of our meal prep inside of these containers. So big, big fan. - -123 -00:41:17,340 --> 00:41:29,670 -Wes Bos: Oh, yeah, I'm just looking at these right now. These are we have very similar ones. They're called glass lock. And about two years ago, I'd like standardized our entire house on glass lock we Yeah, we just - -124 -00:41:29,670 --> 00:41:30,480 -Scott Tolinski: did that. Yeah, - -125 -00:41:30,540 --> 00:41:49,730 -Wes Bos: you just gotta like, just go with one and like find one. Like we've had all of the different kinds out there and they're all garbage. And finally found these glass lock ones that looks very similar. Nice, good quality. The lid is plastic for these good locking hinges on each side. Yeah, it's just it just looks great in your D. - -126 -00:41:50,070 --> 00:41:50,940 -Unknown: ft. Glass. - -127 -00:41:51,000 --> 00:41:53,070 -Wes Bos: It looks great in your fridge as well. - -128 -00:41:53,310 --> 00:42:00,270 -Scott Tolinski: That's really what's the most important part. When you have company over they better open their fridge and be like, wow, that glassware. - -129 -00:42:00,570 --> 00:42:10,560 -Wes Bos: You have lots of leftovers. If somebody opens my fridge they say Wow, you have a lot of hot sauce. I'm I'm like a lot of sewer - -130 -00:42:10,650 --> 00:42:13,800 -Scott Tolinski: I would say they would say I have a lot of soy sauce in my fridge. - -131 -00:42:14,040 --> 00:42:48,030 -Wes Bos: Oh, well. I wouldn't have any soy sauce in my fridge. A good I would like a really nice hot sauce. It's such a good gift and it's usually under 10 bucks. So it's like a little stocking stuffer or something like that. The two I'm going to pick right now are blue top creamy buffalo. Any of the blue top creamy ones are amazing. They have one that's like a like an Indian spicy Indian one. The creamy buffalo is really good. And then a new one that I recently found at my local store. It's from Canada. Thunder Bay. Heart heartbeat hot sauce. - -132 -00:42:48,900 --> 00:42:52,940 -Scott Tolinski: Bay. Do you have any kids hockey players that are born there? Oh, - -133 -00:42:53,610 --> 00:43:05,250 -Wes Bos: that's all that comes? Well, that's all it comes out of there plus their hot sauce. This one is the pineapple habanero, which I bought it and then I posted on Instagram and everybody's like, Oh, that's on hot ones this year or this season. - -134 -00:43:05,520 --> 00:43:07,110 -Scott Tolinski: I love a good hub in your home and - -135 -00:43:07,170 --> 00:44:02,760 -Wes Bos: and I looked it up and it's it's good. So order those up for the person that loves loves the hot sauce. Next one is Maldon salt. This is just like really high quality flaky salt is a finishing salt that you sprinkle on, on literally anything and it just tastes great. So what I'm doing this year for my family members is I bought these like really nice. They're called weck jars. So if like if you're like if you appreciate like a ball mason jar, these wack jars are on like the next level of glass jars. So I bought a bunch of these wack jars that look like tulips, and I filled them with Maldon salt. And for I don't know for 10 bucks out the door you have like a really nice Stocking Stuffer for people in your family. Oh, yeah, good one. I bought a bucket of Maldon salt, which is probably more than I'll ever need. - -136 -00:44:03,540 --> 00:44:06,600 -Scott Tolinski: salt pans though, you know, understand. - -137 -00:44:06,810 --> 00:44:52,440 -Wes Bos: Next one I have here is thick sheet pans and pre cut parchment. So sheet pans are like the cookie. I don't know if some people call them cookie sheets or baking pans, things like that. They're called sheet pans against two baking sheets. The half sheet Is this normal size that you have. I have ones called the Viking they are super good quality to get the really thick ones so they don't warp and bend in the oven and then get their standard size. So if you go and buy pre cut parchment paper, those two things make cooking so enjoyable because you just whip out your your sheet pan you grab a couple pieces of pre cut parchment paper. You're making amazing brussel sprouts in just a couple of minutes. - -138 -00:44:52,530 --> 00:44:54,360 -Scott Tolinski: You get some sprouts gone. Love it. - -139 -00:44:54,390 --> 00:45:04,050 -Wes Bos: Yeah, top five kitchen gadgets I think ever for me is good pen and paper Cut parchment paper cutting parchment paper to fit is it's for the birds. - -140 -00:45:05,759 --> 00:45:10,890 -Scott Tolinski: It is not something that I spend more than five seconds thinking about my life but I oh my gosh then - -141 -00:45:10,919 --> 00:47:33,540 -Wes Bos: kills me. Yeah that well like those are the kinds of things that like not people that are not into cooking, don't really think about that. But man, I spent a lot of time thinking about these things. Hmm. Next one is a good instant read thermometer. Part of being a huge part of being a good cook is having is just being knowing like what's the temp of your food, so you don't under cook or overcook it. And I said pick this a while ago, it's called the Mr. Scheffer. It's one of the best known name thermometers I've ever had. I've had the expensive like hundred dollar ones, and they're called a thermal pop. Those are amazing. But they're also $100. And I think I got this one called the Mr. Schaeffer. And it's like 20 bucks, and it's just as good. It's nice and fast. It reads it quick. Which is also what I said nice and fast. And it's got a backlight, things like that nice and big. So I like that one a lot. Next, we have my dry steak aging and charcuterie bags. So these are one way breathable bags that you put meat into, and they will you put it in your fridge and they will dry age, or here Shakuni, which is pretty cool. So it if you normally want to dry aged steak, you need a whole bunch of like equipment and whatnot. And these, these bags sort of do a control, it's a bit of a cheat code. And a lot of people who do proper dry aging of steak, turn their nose at them. But from what I've seen, they're pretty cool. And last couple, just some eco friendly ones, I recently switched to using mesh produce bags, and they're awesome. You don't have to like take the little plastic bag off the thing at the grocery store. You just bring all these mesh bags there see through so if there's like apples or something in there, the cashier can still read the code off the apples. And it's good for the environment because you're not throwing all these gross bags into the garbage every week. Alongside that beeswax wraps for wrapping your food in. So instead of using a plastic cling wrap to put over a bowl or to wrap a piece of cheese in just take a piece of bees it's basically a cotton that's been submerged in beeswax so you can make them yourself as well. Wrap your food in them. Yeah, I've been on a bit of a anti plastic kick the last year in our kitchen. - -142 -00:47:33,869 --> 00:47:34,950 -Scott Tolinski: Oh totally. Yeah. Like - -143 -00:47:35,939 --> 00:47:44,220 -Wes Bos: I've been sort of honing in on it and I'm these mash produce bags have been a bit of a game changer. The hardest part is trying to remember them when you go to the store though. - -144 -00:47:44,489 --> 00:47:50,700 -Scott Tolinski: I've never even heard of that. That's the hardest part about bags in general for me. Yeah, I know. I get the whole foods and I'm like shoot. - -145 -00:47:51,149 --> 00:47:52,530 -Wes Bos: Yeah, the bags. - -146 -00:47:54,000 --> 00:48:14,280 -Scott Tolinski: We live we live like two blocks from a whole foods. So I always like walk there to go get stuff and then bring it back. And then I had too much of pride too prideful to just be like, no, it's okay, I'll take the paper bag. I'll just be like, No, I'll carry it all so then I'm like walking several blocks like trying not to drop anything with my arms full of food. - -147 -00:48:15,450 --> 00:48:19,830 -Wes Bos: Well, the the the earth appreciates your Yeah, - -148 -00:48:19,980 --> 00:48:24,420 -Scott Tolinski: every sheets that. Like are you sure you don't want a bag? Yeah, I'm sure I got it. - -149 -00:48:27,540 --> 00:49:17,880 -Wes Bos: Last thing I have here is just Yeti drinkware. So stainless steel cups that keep your tea or coffee hot forever. I've tried a lot of them and a lot of them after a year start to peel or you put them in the dishwasher and they started to discolor and the only ones that have held up are the Yeti ones which are way too expensive for what they are but they do hold up and I've got the the lowball with the it's like a mug with a with a handle on it. And I've been loving this thing and my wife got one as well. We'd like the much better than the really tall ones. Because they don't tip over on your laptop screen or something like that. Yeah, they just don't fit in your your car cup holder. So they're not to go cups. They're just like a mug for busy parents who forget their coffee. - -150 -00:49:19,890 --> 00:49:40,800 -Scott Tolinski: Can't forget that coffee man. Next up, I have a few wellness items. These are mostly gym related. One of them is a favorite gun. If this is a percussion massager. It's basically this like you can imagine what's a tool like a jig? Like workers in saws like a jigsaw. Is - -151 -00:49:40,800 --> 00:49:43,680 -Wes Bos: that a jigsaw? A like a saws all - -152 -00:49:44,010 --> 00:49:46,890 -Scott Tolinski: a Yeah, like a saw. But yeah, yeah. - -153 -00:49:46,890 --> 00:49:49,350 -Wes Bos: So it's basically like, yeah, - -154 -00:49:49,379 --> 00:50:01,320 -Scott Tolinski: yeah, and oscillating. So yeah, so it's basically just like that with a giant rubber ball on the end. And really hard. So you pointed out your muscle goes wow wow. Like Really, really fast. - -155 -00:50:01,650 --> 00:50:02,820 -Wes Bos: You have one of these, - -156 -00:50:03,150 --> 00:51:22,320 -Scott Tolinski: I just ordered one. I've used them before, and they're really cool. So I'm really excited to get mine. I'll let you know how it is when it when it comes here, but I've heard really good things from both massage therapists, physical therapists, I'm going to use the life out of this thing on my neck, my back, shoulders, all that good stuff. Another one is a foam roller. If you don't have a foam roller by now, gotta get one, they're cheap, just lay on it for a minute. If you've got back pains, this thing is just so essential for getting the muscles in your body to chill out, save some money by not having to go get a professional massage. The last one is power blocks. These are really awesome. They're adjustable dumbbells. I've talked about these A long time ago on syntax, but we have these specific ones that power blocks, you can adjust them anywhere from five pounds, up to 70 pounds at five pounds, or even 2.5 pound increments. And I use these every day. They're perfect for the person in an apartment who maybe wants to just start moving around a little bit more. It wasn't like you start at five pounds you can start with whatever you want you can use them for every single exercise before we had our home gym we literally did every exercise with these things so I'm a huge fan of these power blocks and then West headed the Japanese nail clippers because people really liked those last time - -157 -00:51:23,189 --> 00:51:33,390 -Wes Bos: a hard time for them and like everybody like if we looking at like clicks and stuff like that for everybody was all over these Japanese slippers. Yeah, they are. - -158 -00:51:33,689 --> 00:52:27,750 -Scott Tolinski: They're from Seiko, if I'm pronouncing that our psyche, psyche yeah psyche. I don't know why type Seiko Seki edge. These are stainless steel nail clippers. And they are darn heavy duty like this is the heaviest duty nail clipper it could probably little chop your finger off if you let it these things cut through absolutely anything that Japanese steel yet some Samurai steel apparently in these. But I absolutely love these nail clippers. They are just darn heavy. I mean, they are just absolutely beastly. I got a couple of them and I can't recommend it enough. It's something you use all the time and nail clippers. So you might as well get some really good ones. Because you know, you don't know just how good good nail clippers are until you get some of these beasts that could cut off your finger or something. And they're not too costly. They're I mean 13 bucks for the big one or something but they're not too bad. Man. I'm - -159 -00:52:27,750 --> 00:52:38,220 -Wes Bos: just looking at these muscle tissue deep tissue massage guns. I always try to get my walk on the backs of my legs. Yes, yeah. And if I could just give them this - -160 -00:52:40,170 --> 00:52:58,200 -Scott Tolinski: secret. Hey, could you just hit me with this thing he just pulled in? Yeah, I'm really excited to see what this is like I did not get the 24 k Gold Edition that costs $1,000 which is ridiculous. I don't know why you'd need a gold plated theragun but you know you do use their gun. Yeah, - -161 -00:52:58,620 --> 00:53:03,750 -Wes Bos: I guess they know their their target market. Well, yeah, right. I gotta get gold one. I - -162 -00:53:03,750 --> 00:53:06,270 -Unknown: gotta get the rose gold one. Yeah. - -163 -00:53:07,260 --> 00:53:09,480 -Wes Bos: Cool. Well, let's move into some sick packs. - -164 -00:53:11,850 --> 00:53:13,620 -Scott Tolinski: like pigs is it? This is the whole show sick. The - -165 -00:53:13,620 --> 00:53:53,400 -Wes Bos: entire episode was the sick pick. Shameless plugs, I can finally shamelessly plug my beginner JavaScript course. And found beginner javascript.com slam dunk your JavaScript fundamentals is the fun exercise heavy approach to learning modern JavaScript. It's been selling like hotcakes, I've been super happy. But the feedback has been amazing. People have been saying things like, man, I never understood closures or like functions. Like I don't know how you pass arguments into functions and things like that. That was always like a little bit like, fuzzy for me. And now I've had that aha moment, which is really cool. So, so happy to get it out beginner javascript.com. Yeah, just - -166 -00:53:53,400 --> 00:54:05,550 -Scott Tolinski: take a little bit here to say, you know, what I really admire about all of your courses is how fun you make that stuff. Like when I look at your examples, I'm like, Man, these look so fun. Say - -167 -00:54:05,610 --> 00:54:06,540 -Wes Bos: yeah, yeah, - -168 -00:54:06,630 --> 00:54:53,400 -Scott Tolinski: I really admired that about your courses. They're really super really super fun. My I'm going to sick pig or not sick pig I'm going to shamelessly plug level up pro level Pro is the tutorial service where you get access to every single tutorial series on level up tutorials. COMM there's so many from testing, react, animating react, there's a bunch of basic view stuff, basic speld stuff, a full stack react. And next my latest course was a react in TypeScript for everyone. Those of you who are interested in learning how to write TypeScript within react, or even level one TypeScript. If you're looking to just Indian simply understand what the heck TypeScript is. So check it out at level up tutorials.com forward slash pro sign up for the year and save 25% - -169 -00:54:53,760 --> 00:55:02,190 -Wes Bos: All right, that is it. Thank you so much for tuning in. Hopefully you picked up a thing or two for us. someone in your life or maybe just yourself? - -170 -00:55:02,670 --> 00:55:04,620 -Scott Tolinski: Totally Yeah, nothing wrong with that - -171 -00:55:04,710 --> 00:55:09,420 -Wes Bos: and we will catch you on Monday booth, please - -172 -00:55:11,340 --> 00:55:21,060 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax205.srt b/transcripts/Syntax205.srt deleted file mode 100644 index f6d21d417..000000000 --- a/transcripts/Syntax205.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally in ski. - -2 -00:00:25,950 --> 00:04:09,180 -Scott Tolinski: Whoo, welcome to syntax and this Monday tasty treat, we're going to be talking about our newer laptops. And that is the new MacBook Pro is 16 inch for web development. Specifically, we've seen a lot of people cover this topic in the means of maybe video editing, or audio editing or graphic design. How many Photoshop files can you open with the new MacBook Pros, but we're gonna be approaching it from an entirely different angle as to people who have largely used Mac computers to do all of their web development. Wes Bos and I are going to be talking all about how we have found the new 16 inch MacBook Pro so far for our development workflows. My name is Scott Tolinksi. I'm a developer from Denver, Colorado, and with me, as always, is the Wes Bos. Sup, everybody. So this episode is sponsored by Sentry. Now, if you you want to be able to buy a MacBook Pro yourself, you got to write software that's free of bugs. And to do so you want to have a service like Sentry to catalog and capture all of your bugs. Now one of my favorite features of Sentry is the ability to attach a single bug to a specific software release. And you could even attach that to a specific commit with your source vamps and everything. So the cool thing about that is you can tell exactly which release introduced which bug and how many people that bug is affecting. And then from there, you can fix that bug, you can mark it as fixed. And then if that bug comes up, it's gonna say, hey, there's a regression in this bug because of XYZ commit. And like, really, is there any greater visibility than understanding what you introduced into your code that caused your user some error? So Sentry is the error and Exception Handling tool that we love and use over here at syntax? Check it out@sentry.io use the coupon code at tasty treat all lowercase all one word, and you'll get two months for free. So check it out@sentry.io coupon code tasty. Treat. Cool. So let's get into it here. I think we should start off by maybe talking about why our previous computers sucked. And then we could talk about why we changed or what what you know what's different about them? Yeah, so we both had the last generation MacBook Pro mine was over two years old at the time, and the hardware is still a super fast computer. And I had it plugged into my dock and everything drove on my monitors. And like all of that was awesome. is just the fact that the actual laptop part of it was awful. So you've probably heard there's the keyboards would get like a crumb nature Valley stuck in it. And my battery just ballooned and they had to replace the entire like bottom half of the computer. Apparently, there was no escape key the keyboard was hard to type on. We both had ours in the shop for like a week you've had yours in shop for what like three weeks something like that. Yeah, for three weeks, my my, my command keys stopped working. And because of that, apparently, that was a three week fix, which involved a one of the apple servers texts actually breaking my screen, stashing my computer somewhere in there, their system, and then lying about it. So then Apple came in and gave me a bunch of stuff for free. So that was pretty sweet. Which is actually funny because I bought my computer at the same time that you did those the 2017 or something model. Yeah. And they gave me my computer as our 2018. So did I need this 2016? No, but it was just ruining my life. So many ways that we'll get into what we'll do with our old machines and stuff. But for the most part, it was just it was a huge fiasco. It was an absolute huge fiasco, all because of a darn chrome under a command key. Oh, - -3 -00:04:11,340 --> 00:04:47,070 -yeah, it's super frustrating. So the new ones have will go through the settings, but they have greatly improved, absolutely everything. And spoiler, at least for me, it's awesome. I'm so happy to have a back like this. The I think the MacBook Pro is like a workhorse for a web developer. It's like the laptop. I know that there's like Windows users and Linux users and stuff like that. And we'll talk about why we don't use those. But like, we think that this if you have the money to spend because they're expensive as heck. But if you have the money, this is the laptop I think you should buy as a web developer. So let's let's go into like, what were the specs? What did you get Scott? Yeah, - -4 -00:04:47,160 --> 00:05:57,630 -I learned this thing out man. I loaded it up. So we can talk a little bit about why too but I got the 64 gigs of RAM which is totally overkill, the highest processor which is a 2.2 For eight core i nine, and then the highest video cam or video card which is a dedicated eight gigabytes A and D radium pro five or five the one on the one a 550 hundred m card. I don't know how they the pros say that card name. But man I loaded this thing up and I got the two terabyte hard drive. And I did so for maybe a little bit different reasons I want to play a I have a lot of games on my old hackintosh that used to dual boot. And I haven't gotten to play any of those games in a long time because I took apart my hackintosh. So I loaded this thing up with the specific intent of not only having it be a video master for me, but also with the intent of being able to dual boot and throw windows on here and play some life video games. Which I'm going to do Yeah, awesome. I did not load mine up nearly as much as you did, but it's still insane. - -5 -00:05:59,580 --> 00:06:19,410 -laptop that I have a well I got the 2.838 Core i nine which I got 1000 DMS on Instagram, although I nines run hot, they'll crash. And so part of part of the like Apple had this big thing where they used to throttle the CPU because so they didn't get too hot. - -6 -00:06:19,530 --> 00:08:10,770 -But in the freezer and yeah, yeah. So now apparently that's fixed because the new MacBook is slightly thicker. And I have been running I've just got I've been running it on full blown video export for 24 hours right now. And the thing is, it's hot, but not nearly as hot as my old one would get just browsing the web, which is amazing. Yeah, 32 gigs of RAM on it, which is more than enough for a couple of VS code instances in Chrome. Dev open. I got the one terabyte just because I wanted to be able to revert back to my old one, which is one terabyte as well. If I ever need to just Time Machine backup. I've done that a couple times. I certainly would like another terabyte in there. But no, it helps me have good good hygiene. It's It's frustrating, because like video takes up so much. But like, like one terabyte will probably be enough for the entire world. If you're just a web developer, right? You don't even need one terabyte. I think that is about it. Obviously they're both 16 inch, which is one inch bigger than the old one. I can't really tell the difference on the bigger screen. Can you Yeah, I can. Slightly Yeah, yeah. Especially because I was running them side by side for a minute here. So you know, I'm still migrating whatever. But when I see them side by side, definitely. But another thing that I did with this one verse, My old laptop as I'm running this in the scaled resolution or the like the most zoomed out as possible resolution Yeah, and the display settings, which I wasn't doing before. And I have so much more room for activities now. It is outrageous. It's everything feels way bigger to me, but it's also probably a little bit of that as well. I do like how the screen reaches further to the edges. That looks very nice to me. - -7 -00:08:11,010 --> 00:08:32,780 -Yeah, I love that too. It's just nice. A lot of space. What I usually do with my resolution is I'll bump it down as low or as as low as it can go maybe one up from there and then all of the like yeah, and then just just scale up tax because that's all I really need. Like I don't want the tabs and all that stuff to get in the way that just leads for lots and lots of room to work with. - -8 -00:08:33,000 --> 00:09:51,600 -Yeah, like the toolbar up top and whatever. Did you get applecare on yours? Of course Yeah, I got dude after my my fiasco with Apple not getting anything without Apple care. Because Yeah, I To be honest, I've had enough issues I believe it or not the last time it wasn't even the first time that Apple's given me an entirely new computer one time I bought the very first gen MacBook Pro like the very first when they went from power book to MacBook Pro. Yeah. And they like slathered, an insane amount of thermal paste in those there was a huge thermal paste issue. And my computer had like three logic boards die and all sorts of issues, the power cord caught on fire. And so one time I went into the Apple store, and I was like, Listen, this computer has given me a lot of trouble over the past two years. Like I just need a new computer. And they're like no, we don't do that. And then they were like well, let's just pull up your your Apple sheet and it was four pages long of repairs. And they're just like, oh, crap, like, we got to do something here. So despite all of your all of your issues, they've always made it right yeah, yeah, you still think it's like the best laptop you can buy us I'm sure there's some people listening right there being like Oh, I got lots of troubles. Yeah, right. What are the what I'm going to do run Windows? - -9 -00:09:53,160 --> 00:09:54,090 -Announcer: No, no, I - -10 -00:09:54,090 --> 00:10:02,420 -Scott Tolinski: would honestly probably not mind running Linux if there was actually support or it like Don't know Linux people get mad about that. But - -11 -00:10:02,519 --> 00:10:38,420 -yeah, what's like video editing is our kind of our job right? And like, I need like a rock solid. And no, you can do video editing on Linux. But honestly, I just I'm not worth I'm not interested in babysitting something like that. And having to like that was younger Wes, I just need the thing to work mostly. Yeah, let's back up, just in case. Um, what else the keyboard on this thing, they switch back to the butterfly keys, which feels exactly like the magic keyboard, which is what I use all day long. And honestly, that was the best keyboard ever. I love it so much. I'm so happy that it's back. I can type way faster, Make way less mistakes on this thing. - -12 -00:10:38,609 --> 00:11:15,930 -So far, I've noticed the type thing has been a great experience for me as well. really liking it. One thing that's taken a little bit getting used to is the Escape key is back right we have a physical key for an escape key, but I got so used to just lightly touching it even though I Oh, I hated the touch bar. But I found myself like three or four times just touching the key and not actually pushing it. And then like oh yeah, you have to push it now. Which is kind of funny that I've been like trained to you know, not push the Escape key. But I like that it's back. I like the Touch ID a lot better on this one. You can actually like find it since it's its own dedicated little module rather than just being like part of the strip. - -13 -00:11:16,079 --> 00:11:36,930 -Yeah, it's tactile, especially because like I have mine docked over to the left of me. And I love using Touch ID so over typing in my password all the time. And I have to just like throw my hand over there and touch it. While I'm like looking at what's going on on the screen. And having it as a tactile button is so much better. Big fan of that. The touch ID is just awesome. In general, I - -14 -00:11:36,930 --> 00:11:55,500 -kind of bombed that they didn't go for face ID in the new ones. The cameras are gonna be getting a bump, probably in the next one. If you think about it. They're so old and laggy behind. Yeah, the cameras are what 720 p it's not very good. They're from the dinosaur age. I have no idea. Like - -15 -00:11:55,559 --> 00:12:17,850 -I run I just attend ADP webcam from Logitech. And it looks good, but I really want just like a really nice 4k webcam without having to do what you're doing, which is hook up a DSLR and pipe that in. It's not a DSLR West. It's a mirrorless Okay, is that Oh, yes. I mean, it's a Sony Alpha, Alpha seven, three, - -16 -00:12:18,329 --> 00:12:19,290 -Unknown: or whatever it is. - -17 -00:12:19,319 --> 00:16:04,530 -Scott Tolinski: Yeah. And yes, I am running a 4k webcam and I love it. But it's not really a webcam. What else? speed the computer is very fast. Oh my god. Yeah, very fast. And yeah, I haven't even come close to using all of the RAM and anything in my I love I step menus up, they're telling me Oh, you have used 5% of your CPU or 5% of your RAM. So that's pretty good. For me. The trackpad is always is just the best. That's you know, that's sort of like a killer feature for me on the Mac is that I've never had a trackpad on a PC, a Chromebook or anything that's felt anything like the trackpad on a Mac. And I'm a trackpad fan. Like I don't use the mouse. I'm sorry, most people. But even as my like external mouse is the Magic Trackpad. Just because I like I really love the trackpad. I don't know how to express that, for some reason that I've just always been very into the feel of the trackpad. So big fan, I found that it's super fast as well. I never had any speed issues with my old one. My old one is almost two and a half years old. And it was still like flying like, Yeah, mine was outrageous. Yeah, if it wasn't for the like, like these laptops, the amount you pay, you should have them for at least four, maybe five years for how much you pay. And in that thing, if it wasn't bad, like keyboard and hardware, the things we talked about that thing would have lasted forever. Like I still have my I still have my the good one with the HDMI ports. And that thing is like six, six years old, and I booted it up the other day, and it's just flying. It's still super fast, like, like, I think like we're at a point, especially for web developers that the pace of these things is outpacing kind of what we need, which is good because like as a web developer, you should also be able to just go and buy a $400 laptop as well and get up and running. It's just that I think like Scott and I since we do media, and podcasts and all this stuff, we do need something a little bit more beefy. Yeah, it's really nice to be able to screen capture in 4k, record a video stream in 4k and record my audio or whatever. I'll do all of those things without the computer even thinking right? Just like Okay, sure. So, you know, for me, this kind of beefy system is absolutely required for what I'm doing. The amount of video editing a video production, all that stuff. They said, Look, the render times are sliced in half between this computer and even the last model. So we're several models behind that. So the amount of performance gains we're getting is really sort of game changing along with the keyboard right we're screen casting, and anybody who's watched any Level Up tutorials in the past year will note that I do apologize for my keyboard when I goofs up on me like you can't really help it because it's like the keyboard occasionally does double presses and this or that. And, man, I can't have that stuff in my content I just straight up can have it. Yeah. Other things that didn't upgrade the ports, which is unfortunate. So they're still just four USBC. They're technically Thunderbolt, which is faster, but they're the same port as USBC. And that sucks at the carry. I have like a really nice little dongle I carry around. But the fact that I have to carry around a dongle, like how many times have I been like, Oh, I don't have a USB C converter on me right now. And I need to charge this thing or I need to plug it in. And it's so annoying. And like I get that USB C is the future. But I've had a USB C computer for almost three years now. And I still every day run into that might just give me one regular USB a port. And that would be enough for me to for those little situations. But totally fortunately, they're not going to give it to us. - -18 -00:16:05,100 --> 00:16:07,020 -Unknown: No, never, never. - -19 -00:16:08,310 --> 00:20:15,450 -Scott Tolinski: Let's go into some why nots. So why not a Windows computer, Scott, I just hate windows. I'm sorry, I tried. And I actually have Windows installed on this machine. So it's not like I haven't used it. I use Windows frequently. But man, there's just something about Windows where like, half of the icons are from Windows 98 still are like, I don't know what it is with the experience. But like, I don't know if they haven't done this or what but they need to start from scratch. Like they need to have, like a totally fresh operating system, that where everything is where it is. But like there's so many weird things to get into Device Manager, you got to click on this and this and this and this. And it all looks like you're in 1994, you went into a time machine. That's it. I do like the base thing of Windows 10. I like where the star bar is. I like the way that it functions with their little dock. I like a lot of the features in Windows, but I cannot see myself running Windows. They're doing obviously Microsoft's doing better things than they were before. But this it's still on. It's still windows, I can't I can't do it. Yeah, I have. So I've got a Surface Book that Microsoft gave me. Try to coax me over to Windows and I love it for recording windows parts of my tutorials. That's great. I love it for testing. And I spent a lot of time getting all of the windows subsystem Linux stuff, because I'm like, if I'm going to move to Windows, I need like my, my terminal, I need all my commands. And all of that stuff just worked. It was amazing. But I think it's part, I don't want to relearn something because I got enough on my plate right now. And like, I'm not 17 anymore, and I don't have time to tinker around with. And also like anytime we have an app like Alfred, people are like, what's the Windows version and the replies on Twitter and someone's like, hey, there's this but like, ask, it's not as good. You know, like, ah, and I ran into that with Android to where like, I love Android as an operating system. But there'd be so many times I'd be like, Oh, this doesn't exist for Android Nexus for Windows. And it makes me very upset, you know? Yeah, so I don't know, I just don't have time to move over to it. I'm sure it's great. I'm sure there's a lot of people that love it for for what they do or make do. But I just I'm so engrained in having Mac and how fast it is, and, and my workflow and all my keyboard shortcuts that is I'm just not going to move over to that. Totally. Next up, why not a hackintosh I had a hackintosh do I have it. I haven't booted it up in a long time. And it was super reliable, super fast. But then, like, every time a new update came, he had to like find the new kexts and all the drivers and everything like that and upgrade the thing and like it was a really fun hobby because I like doing that sort of thing. But I just need a machine that is fast and that I can bring to the geniuses when it breaks. Yeah. And then just go backwards on my other one. Will they fix it? Like I need almost zero downtime was my job. And I can't afford to fuss around with something like that. Even though it was it's I think it's much more reliable than then people think it is. Totally. Yeah, absolutely. And my hackintosh was great. I ran one for so many years. But again, anytime an update came out you had to spend a weekend making sure everything was fine on it. Like he said if something breaks like that used to just like absolutely, totally disrupt my entire life and when level up tutorials was a side project. Sure that worked but a little tutorials is my entire business and livelihood so I can't trust a hackintosh to do that right now. And why not an iMac which is ah, I've had desktop computers in the past and you know what my very first computer was an iMac g4 and you know what I did? I sold it and bought a netbook pro because I just I loved having the the beef Enos of a desktop computer, but at the end of the day, man nothing beats being able to take this beast with me. Take it to a Coffee Shop, I'm not going to be that hipster who's walking around holding on their iMac and bringing into a coffee shop, that's not going to happen. Things got 64 gigs of RAM and eight gigs of video. memory. So like, I don't know, man, it's a pretty beast. - -20 -00:20:15,690 --> 00:20:54,450 -I have a desktop computer and it's my laptop plugged into my doc. I don't want to computers because I need to I go and teach workshops, I go to conferences, I go to the coffee shop every now and then I just need to be able to bring my computer somewhere else. And I don't want to have to fuss around with having two instances of things and I forgot to get push and the sink didn't work or I closed the laptop before the sink updated or, or any of that stuff. I just don't want two computers. It's it's expensive. And it's it's too much to fuss with. I just want one rock solid computer, which is why I think we've we've put so much money into these things. It just works pretty well. - -21 -00:20:54,630 --> 00:21:10,470 -Totally cool. Well, that's all I got. I'm excited to see where this thing goes. I'm gonna see how many chrome tabs I can get open at once. That should be pretty sweet. Awesome. Thanks for tuning in. We will catch you on Wednesday later these days. - -22 -00:21:12,390 --> 00:21:13,230 -Announcer: Head on over to syntax.fm - -23 -00:21:14,600 --> 00:21:16,980 -Unknown: for a full archive of all of our shows. - -24 -00:21:17,220 --> 00:21:22,170 -Scott Tolinski: And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax206.srt b/transcripts/Syntax206.srt deleted file mode 100644 index 2f11d8bb0..000000000 --- a/transcripts/Syntax206.srt +++ /dev/null @@ -1,612 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:10,560 -the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and Wes Bos. - -3 -00:00:11,279 --> 00:01:03,650 -Wes Bos: Welcome to syntaxes. The podcast with the tastiest web development treats out there. Today, we've got a banger of an episode, where we have a guest on. We're gonna learn all about state machines, which is really exciting. They applied to CSS, they applied to JavaScript, they apply to react in view. And it's just a really cool thing that seems to be getting some serious it's like a little talk about it is this like really like old concept, but it's it's getting some serious traction in our web development industry lately. So let's do some sponsors real quick. And then we'll dive into it. Our first sponsor today is Sanity. They are a structured content, CMS and second one is Sentry which is going to do all of your error and exception tracking. With me today is Mr. David Kay piano and Scott as always, but let's talk to Mr. Mr. David today How you doing? Doing good, - -4 -00:01:03,659 --> 00:01:04,200 -David k piano: how are you? - -5 -00:01:04,829 --> 00:01:23,190 -Wes Bos: I'm doing good. I just about to launch my course I've been working on for like a year. And I cannot wait to get this sucker out. So it's a I've been just heads down on that for like a year but like building the website for a couple days now. I'm pretty excited about it. How are you doing today? Scott? Doing good. - -6 -00:01:24,360 --> 00:01:45,930 -Scott Tolinski: Yeah, no, I finished my month course I'm working on the next month scores. You know, as always, ready for this. By the time this episode comes out, be ready for the new year, which is kind of crazy. So just getting all that stuff working hammer got like a foot and a half of snow last night. So it is extreme weather territory out here in Colorado. Where are you from? David? - -7 -00:01:46,230 --> 00:01:49,470 -David k piano: I'm from Orlando. So we have no such snow problems to deal with. - -8 -00:01:50,700 --> 00:01:52,290 -Wes Bos: Have you ever had snow in Orlando? - -9 -00:01:52,889 --> 00:02:02,880 -David k piano: There have been times where very early in the morning, you have like these tiny little flowers that really stick but they technically call it like, hey, it snowed in Orlando. That's great. - -10 -00:02:03,389 --> 00:02:27,990 -Scott Tolinski: Yeah, Colorado is beautiful with the snow because the elevation is so high that like the sun's pretty intense. So when the sun comes out like tomorrow, inevitably, the roads will all be dry and warm and whatever. And we won't have that lingering. Like ice snow that you get in some other parts of the country. So yeah, yeah, yep, yep, yep. Okay, so state machines. Do you want to get into those? Or do you want to get into CSS perspective? first quest? - -11 -00:02:27,990 --> 00:03:02,039 -Wes Bos: Yeah, well, actually, so I've got two questions. First, first, I want to like allow you to introduce yourself. And the second of all, I know that you're really good at CSS. So I would just I was working on something like two minutes before this. I was like, we should ask David. I bet he knows. But like, do you want to give yourself an introduction? I know, I've known you for, I don't know, maybe four or five years now. And yeah, you have some of the best conference talks that I've ever seen. Yeah. Like, it's very rare that I go to a conference talk, and I go home being like, Oh, I'm gonna try that. And I believe you had a conference talk on flip animation. - -12 -00:03:02,100 --> 00:03:13,740 -David k piano: Oh, that was a while ago. Yeah. Yes. So we met at a CSS def conference, right. I believe that's the first place we met. Yeah. In San Antonio, or New Orleans, New Orleans? Oh, - -13 -00:03:13,740 --> 00:03:23,819 -Wes Bos: yeah, very long. That was probably like six years ago. It's a long time. Not sure if that's where the talk was. But I love that talk. And I went home and built something in flip animations right after that. - -14 -00:03:24,210 --> 00:03:59,400 -David k piano: Yeah. So uh, you know, a lot of the work that I do actually stems from just thinking about animations, just because I used to be really bad at JavaScript. I still am. But you know, also used to. So now I think about a lot of the things in terms of animations. And when you have an animation, you have certain states that something can be in, and then an animation is just literally a tween between those states. And so I apply that to application design and logic and everything. And I'm like, Well, everything seems to just be a transition between states, if you really think about it. - -15 -00:03:59,789 --> 00:04:17,820 -Scott Tolinski: Totally. Did you have a background in animation, prior to web because I personally worked quite a bit in After Effects before becoming a web dev. And that was sort of my introduction to animating on the web. You have your initial state, you're in state and you, tween between it. Did you have a background? Anything like that? - -16 -00:04:17,820 --> 00:04:26,390 -David k piano: I did not. I made some silly animations and flash back in the day, but that's pretty much it. I actually miss it there. There are days when I miss it. - -17 -00:04:26,700 --> 00:04:29,160 -Scott Tolinski: There are small parts of it. But yeah, - -18 -00:04:30,720 --> 00:04:36,930 -Wes Bos: yeah, you have a whole code pen, I think is that is that where people can go to View some of the stuff you've worked on before? - -19 -00:04:36,950 --> 00:04:48,510 -David k piano: They can they could go to code pen.io slash david key piano and just see a bunch of stuff. A lot of animated dogs, a lot of just other things. Even some things related to UI, I'm sure somewhere in there. - -20 -00:04:48,929 --> 00:05:05,550 -Wes Bos: The one that always stands out to me is Oh, the Husky Did you do this Husky? Yeah. Oh, man. So uh, probably everybody has seen this. There's 200,000 views on it. You When you move your mouse around, there's a husky that just looks around and watches you. Oh, yeah. - -21 -00:05:05,550 --> 00:05:17,390 -David k piano: So this is the that was the reactive version of the original, which was just a, you know, just a normal animation but decided to throw in some RX JS in there and have it follow the mouse cursor around and all of that. Oh, - -22 -00:05:17,570 --> 00:05:32,670 -Wes Bos: man, it's so cool. While you're listening to his podcast, if you're not driving, go go to code pen.io. forward slash david k piano, you'll get to see it. The one that I have, I always think of is this this room selector, where you have a house? - -23 -00:05:32,700 --> 00:05:36,330 -Scott Tolinski: Yeah, that's the that's exactly where I was gonna go the house responsive house? Yeah, - -24 -00:05:36,330 --> 00:05:51,600 -Wes Bos: yeah, that's like a slider. And then as you slide the number of rooms in the house animates itself from like, the number of windows and it's so cool. Like, like, how did you build that? Do you want to like maybe give us a rundown of that, that's, that's using RX js, right? - -25 -00:05:51,780 --> 00:07:02,430 -David k piano: Uh, not exactly, maybe maybe a tiny hint of it, but just to get the values in place. So that was an original animation by gal shear, who's a very talented designer from Israel makes all of these cool animations. And if you follow him on Instagram, you actually see him drawing things in procreate, and it's really, really satisfying to just watch him work. So this was one of the animations that he made. And I looked at it and I was like, there has to be a way to do this in CSS. And so what I did was I first just designed everything based on how many rooms there are. And I worried about the in between states later, and so you have three, four, or five or six rooms. And then I had to figure out like, well, there's so many different ways, you could go from like three to five rooms for the six rooms for the five etc. And so that's when I used flipping, which is my library. I'm working on a v2 of it. But basically, it's a way that allows you to go from one state to another states like visually, in sort of apply that flip animation, which gives it the illusion of moving from any location to any other location in a smooth way. - -26 -00:07:02,670 --> 00:07:48,840 -Wes Bos: That's cool. I we've talked about using flip on the podcast before, it was probably right after I saw your talk, because I thought, I bet you can use this flip idea with CSS Grid. Because, as you know, you can't animate much of grid or any of grid and Flexbox. in Firefox, you can use Firefox, you can but not not yet at the time, there was nothing in CSS Grid. And so if you make like multiple versions of something, like you said, You have every instance of that, and you can just tween from, from one to another. Right? That's amazing. This is so cool that this is the kind of stuff that blows my mind when you're looking at it like, wow, I had no idea you could do that with just CSS and JavaScript. - -27 -00:07:49,260 --> 00:08:10,520 -David k piano: Yeah. And only a little bit of JavaScript. And that's why CSS variables are so powerful, because you can define them in JavaScript, and then use it wherever you want in your styles. And I found that a lot easier than you know, the old jQuery way of like doing dot CSS and doing all of those styles on every single elements that that sort of sucked. Yeah, - -28 -00:08:10,560 --> 00:08:34,159 -Scott Tolinski: I mean, CSS custom properties, more than anything have changed my workflow. I just absolutely, it's one of the It wasn't an unexpected, like killer feature for me, because you come from SAS or lessor, or any of these, you know, stylists and you think, Oh, I already know variables. But there's so much more useful than a preprocessor variable because of how you can control them. And it just opens up the door to so much. - -29 -00:08:34,590 --> 00:08:47,270 -Wes Bos: Yeah, big fan. So state machines, do you want to maybe give us an just at a high level view? What is the state machine? What are the idea behind it? And then we'll dig into like, how do you actually use it as part of our web development? - -30 -00:08:47,370 --> 00:11:08,279 -David k piano: Sure. So I'll tell you, first of all, if you google state machine and find the Wikipedia article on it, don't read that first are going to be so terribly lost, because the first thing you're going to read is it's this mathematical model of computation, blah, blah, blah. But that goes to say that state machines are very, very old. In fact, electronics nor computers would exist without them, like finite state machines are a model for just determining what state you could be in. And so what a finite state is, is just a well defined state that expresses what something is in, for example, I'm awake right now. I could be either awake or asleep. I can't speak both at the same time, unless, you know, you can't sleep walking or something like that. But I'm only in one of those states. Or I'm hungry or not hungry. And it's not necessarily Boolean, as well. You could be like a traffic light. That's a classic example. Yeah, the traffic light could be green, or yellow or red. It can't be more than one of those at the same time. Otherwise, you have some serious accidents. That's not gonna be a good thing. So a finite state machine that's the finite part of it. The whole Machine part is how you transition between those states. So let's take a traffic light again, for example, it goes green to yellow, and then yellow to red, and then red to green, right. And it's always going to go in that specific order, which is really important. Again, you want to avoid accidents. So these things need to be predictable. Now, this is why I wouldn't trust a JavaScript developer to code the traffic light is because you don't want to have something like set yellow, or light equals yellow or light equals red. Instead, you want to send an event that says, When I'm on green, I send you this trigger event. And that will determine what the next slide is. So now there's impossible transitions. So you cannot go directly from green to red, or from red to yellow, everything happens in a very specific way. So a state machine is just describing a way that finite states can transition between each other in a very deterministic way. Ah, it's a lot less complex than it sounds, I promise. - -31 -00:11:09,029 --> 00:11:23,520 -Scott Tolinski: Yeah, totally. I think the, um, the traffic light model is a really, it's an explanation of it, that everybody is your memory knows what traffic light is, right? Yeah. And so I think that is really like a killer example, in terms of just getting the, the idea out there. - -32 -00:11:23,939 --> 00:12:15,690 -David k piano: Mm hmm. So another example to like, actually, a more practical example, let's say you're fetching data, right? You're you're trying to show something loading on the screen. So you might be in a state of not loading. And then once a request is made, now you're in the state of loading. And then after a while, you could be in a state of success, or in a state of failure, whether the request succeeded or not. And so the typical way that we could our applications is we, you know, we say is loading is true, or is loading is false, you probably use that variable about two times. Yep. Yeah. But then the question comes, if is loading is false. What exactly does that mean? Does that mean that it didn't start loading yet? Does it mean that the loading succeeded? Doesn't mean that the loading failed? You know, what exactly does that mean? Sure. - -33 -00:12:15,779 --> 00:12:34,020 -Wes Bos: I wrote some code probably a couple months ago that says, if it is loading, and it has fired, initially, like there's then I had another variable that has fired, and then I have all these things, like, if there's no error, but it isn't loading it, but it has fired, then go ahead and show them like, oh, there's got - -34 -00:12:34,020 --> 00:12:56,610 -David k piano: to be a better way. Yeah, yeah. So the easy way to see why those Boolean variables and flags everywhere could be so problematic. just multiply them. Let's say you have three, two times two times two is eight. Now you have eight possible things to do with add another Boolean flag now that's 1632 64. possible states like, it's going to get messy really quickly. - -35 -00:12:57,090 --> 00:13:37,590 -Scott Tolinski: Yeah, this is something I think couldn't improve my own codebase. Because one of the things you run into specifically with Apollo is you have a situation where loading is equal to loading is equal to false isn't this isn't isn't loading any longer, but the data might not be there for any particular reason. And then you have to either optional chaining null check whatever or error checking for every single time you're doing any sort of query component, decide how you want to do those things, but not having you still don't have explicit states because there are states where the data might not be what you're expecting, or the data might not come in correctly. And it's still loading is equal to false. So the Boolean right does not trustworthy. - -36 -00:13:37,770 --> 00:14:45,510 -David k piano: Right, exactly. And that's why, yeah, Booleans cannot express all the possible things that can happen in your application. And so if a designer or someone else comes to you, and it's like, what are the possible states that this could be in? You can't just say it's either loading or knots. Like there's a lot more to it than that. And that's why even like, just a very small stepping stone to start thinking in these finite states is maybe use a status variable instead, like statuses loading, or statuses idle or statuses, success or failure. Ah, in fact, I was doing a CSS animation today, which I'll probably post on Twitter sometime. And I noticed that there was a property, like, I wanted to know, how do I control whether the animation is playing or not, I can't say animation, looting true or animation playing true or animation playing false. Instead, they have a property called animation place dates. And so that's, you know, it's either running or paused. And so that defines, like, each of the possible states that the animation could be in. And so that's a lot more clear, at least to me. Sure. - -37 -00:14:45,539 --> 00:15:16,200 -Wes Bos: Yeah. Totally. So the idea with this is that like, you just think ahead of time, what possible states, there will be. Yeah, and then like, we'll go back to that traffic light example. How does that relate to programming where you can only Go through, like you said, to transition between them, there has to be idea. So like, maybe take the example of Apollo or you have like, you've got data, you have loading, you have potential errors, right? You have potential knowledge, like how does that apply that idea apply to programming? - -38 -00:15:16,740 --> 00:15:31,350 -David k piano: Have you ever run into a user interface where you have the screen and it says, like, it shows a loading spinner for a while, and then it says, Hey, success, and then like a split second later, it shows an error like, Oh, wait, it actually failed. So yeah, - -39 -00:15:31,470 --> 00:15:40,020 -Wes Bos: yeah, that the current Reddit is the opposite. It's like there's no load Reddit yet. There's no purpose. And then at the top, there are post JK, - -40 -00:15:40,200 --> 00:16:28,549 -David k piano: yeah, that was just the example, you know, I was thinking of, or sometimes you'll have a success with the loading spinner, like still happening. It's like, what are you loading, like what's happening, or what I what I like to call the Phantom error, where, let's say, you know, your internet connection is solid, you have a loading spinner going, and you're like, this has been going on for a while. So you decide to open up the dev tools and see what's going on. And there's a big red error, but the loading spinner is still spinning. So um, anyway, the way we apply this to programming is that we make impossible states impossible, like it should be impossible for it to be both a success and the failure at the same time that makes no sense, or even success while loading at the same time, totally. And so it's just a different way of thinking through your different states. - -41 -00:16:29,070 --> 00:16:30,210 -Wes Bos: That makes a lot of sense. - -42 -00:16:30,480 --> 00:17:10,380 -David k piano: And the interesting thing, too, is designers actually naturally think like this. I don't know if you all do any design, but you use programs such as, I don't know, envision or even framer, framer, x, things like that, you have each of your mock ups in a separate screen, right? And you might have an error that connects like, Alright, when you click this button, it's going to this mock up, when you click that it goes to there, or it could go here, and you have like this sort of user flow diagram, whatever you want to call it, of all the possible states your application can be in. So designers naturally think like this, which is great. Yeah. - -43 -00:17:10,580 --> 00:17:20,010 -Scott Tolinski: Yeah, totally. I mean, immediately, you and think about how those apps are made, right? Like figma, or whatever, you have the two frames that the two states. I mean, so Totally, - -44 -00:17:20,159 --> 00:17:46,200 -Wes Bos: yeah. And then explain the, um, I'm just looking at the example that you have here. So x date is a state machine library that you have developed. Yeah, it looks pretty interesting. I'm just looking at the example here, like you, obviously, you you define the states ahead of time. And then how do you go about actually changing that state? Or is that is that an implementation detail of the of each library? - -45 -00:17:46,380 --> 00:18:56,970 -David k piano: Sort of? So are you familiar with Redux? Sure, yes. So in Redux, you have a reducer the reducer takes the current state, the action that does happen, it's really an events, but we haven't come into that they swing that one, but you take the events that just happened, and it returns you what the next state is going to be. And so you're never directly setting state, instead, you're sending it some sort of signal or message in, it's like, hey, given this date in this event, what's the next date going to be? x date works exactly the same way. So the machine thought transition function, you give it the current state some event, and it tells you what the next state is going to be. And then you could actually have it be a runner, where, you know, you just say, all right, instead of you telling me what the next state is going to be just keep track of all that for me, and all subscribe to state changes. But anyway, in in theory, it's exactly the same as what Redux would be just defining when you have a state. And so that's what that the JSON configuration object looking thing is, is you telling it, when I'm in this state in this event happens, here's what the next date is going to be? - -46 -00:18:57,450 --> 00:19:38,600 -Wes Bos: Oh, okay. Okay, I that was a big aha moment. For me, I'm seeing it right now is that you are sending an event of toggle, that's, that's the best that happens. And then you say, when I'm in the inactive state, then toggle does this, it makes it active, right. And then you went ahead and described a total another one, which is when I'm in active state, and toggle happens, then make it inactive. So you go ahead and you describe what to do to these things when the events happen in every single state. So you might have three or four of them. I just think of like a, like a form would have lots of different states as well, right? - -47 -00:19:38,700 --> 00:20:16,340 -David k piano: Oh, yeah. Oh, yeah. And so if you're coming from Redux, there's a tiny bit of a mental shift here. In Redux. You're saying, When events happens, here's the next state. The problem is sometimes the events might do something different based on what state you are. So people in Redux when they write their switch case statements, they would say when this event happens, See this, this, do this have status that to that. So x date sort of reverses that, it says, when you're in this date, then when this event happens, here's what the next one is. So within it eliminates all of those if, you know if statements, ah, - -48 -00:20:16,380 --> 00:20:21,390 -Wes Bos: yeah, that's cool is, is this similar to how RX JS works as well, - -49 -00:20:21,540 --> 00:21:25,850 -David k piano: sort of So, um, Rx j s, it's, it's a little bit different, because it's, um, you know, it's for subscribing to observables, and all this streaming data. And in fact, x date when you interpret the machine and you started running, and you're subscribing to the States, that that's also observable as well. However, I like to think of RX js is like lodash, for you know, for observables in this stream of data. So it doesn't exactly do the same thing as x date, but you could use it with x eight, or you could even build your own x date with it. Hmm. Okay. And so what when I talk about using state machines, in applications and stuff like that, I don't mean like, Hey, you need to use my library, you need to use x eight, that's the only way you could do this. You could describe the state machine using a simple switch case statement. And that's what programmers have been doing for literally decades, is building state machines exactly like that. And so actually just gives you a lot of extra capabilities on top of that. Interesting. - -50 -00:21:26,220 --> 00:21:42,150 -Wes Bos: Yeah, I think that's, that's why it's important to just describe what it is, and the idea behind it. Because if you're just doing a little vanilla j, s example, you can pretty easily do that, like, even in CSS, like, how would state machine work in CSS? Do you have any examples of that? - -51 -00:21:42,420 --> 00:22:50,280 -David k piano: Yeah, I do. In fact, I gave a talk over at, um, it's called Finch comp, and also at CSS comp Budapest about that, about using the idea of finite states within CSS. And so my favorite and we do this all the time on the key framers, by the way, but my favorites, data attribute property to just put everywhere is data states. It's because this data state instead of, um, and I'm so guilty of this, but if you put like a class equals loading, or something on the button, or class equals disabled, instead, by having a single data state attribute, you're saying there's only one possible states or one possible value that could go in this data state attribute. So it's like data state equals loading or equals success. And so you don't have like this mess of, you know, trying to figure it out from the class name. And also, working with data attributes, and CSS and JavaScript is so downright easy. Yeah. I don't ever want to mess with the class list again. - -52 -00:22:50,970 --> 00:23:22,050 -Scott Tolinski: Yeah, you know, what? sold me entirely on the data attribute. This seems weird, but react testing library more than anything. Think I mean, I've used data attributes before. But once you fire open react testing library, and you do everything via data attributes, you just say, Oh, these actually are really nice to work with in general, but you just start to see the utility of them beyond maybe what I would have thought in the past. So the definitely can, I don't know data attributes overall. So Loki, awesome addition to HTML? - -53 -00:23:22,320 --> 00:23:51,510 -Wes Bos: Yeah. Because they're super easy to work with in JavaScript, you just have this data set object available to you. You can use them to style use attribute selectors in ncss. Man, it's, it's, it's great. It's true. I just wrapped up my beginner JavaScript course. And even though my JavaScript 30 course we use them all throughout that course just it's awesome. how helpful there. Yeah, like it. Some people are like, Oh, that's weird like that. You just make up your own attributes. But big fan of them. I'm glad to hear that you think so as well? - -54 -00:23:51,720 --> 00:23:54,540 -David k piano: Oh, yeah. I mean, it's what they're there for. Really? - -55 -00:23:54,810 --> 00:23:56,130 -Wes Bos: Yeah. Yeah, exactly. - -56 -00:23:57,270 --> 00:24:01,440 -David k piano: I just remember the jQuery days. Were all class names everywhere. Yeah, it was painful. - -57 -00:24:01,860 --> 00:24:18,120 -Wes Bos: Yeah. Cuz like if you said such a perfect example of like, he would sometimes have multiple classes, or like, you would have some like data in your class name that you had to like, strip the class name. Yeah. And like, parse out the data from the class name. And oh, man. So much better now? - -58 -00:24:18,660 --> 00:24:19,740 -David k piano: Yep. It was bad. - -59 -00:24:20,670 --> 00:24:51,570 -Wes Bos: Here's a totally unrelated question. But we had a question the other day where somebody was coding, so part of our potluck where we asked questions somebody asked, like, what do you think about instead of using classes to style things, just use all data attributes, and they pointed us to this website. That was there was not a single class on a thing. It was all like data dash header equals top and things like that. Scott, and I could not figure out why. Yeah, what have you seen it there? Yeah. Oh, - -60 -00:24:51,600 --> 00:25:33,330 -David k piano: yes. Um, I think that goes into the be atomic styles category where you're just like putting all of those in. So there are some great libraries that do that like tailwind and things like that. But yeah, this all comes back to states too. But the way I like to style my components is just, I know my component has a certain set of base styles. And I know that my component could also be in a certain number of states. So if I have a button, I will style the disabled button, I will style the loading, if it's a special loading button that loads data or something. And I would use data state in order to do that, instead of having all these like, pollute the HTML. I'm not a fan of Yannick style. - -61 -00:25:33,360 --> 00:25:43,860 -Scott Tolinski: I don't I don't use it myself for those reasons. I mean, I would rather build utilities within my CSS, rather than utility classes that I'm just a prying. Yeah, you're awakening - -62 -00:25:43,860 --> 00:25:45,210 -Wes Bos: the dragon. I - -63 -00:25:45,210 --> 00:25:50,040 -Scott Tolinski: know. I said something. I said something about how I didn't use tailwind on an episode. And a lot of people got man, - -64 -00:25:50,310 --> 00:26:27,240 -David k piano: I'm sore split on that. So like, I've been doing CSS for a long time. I love CSS. So I would never use, like, atomic styles or anything like that. And so that's why at first, my opinion was so strong. It's like, I don't want to use atomic styles. And then I started thinking about, well, hold on. There's other people like heavy JavaScript developers who might not know that much about CSS, unfortunately. And so in that case, I feel like I just just use the atomic style library, at least you at least I could deal with that rather than whatever you come up with. And in CSS, - -65 -00:26:27,270 --> 00:26:46,500 -Scott Tolinski: yeah. And I've used them in tutorials too, because it's easy to just say, while you're in the, you know, not have to focus any time on either having pre written styles or having to write CSS in a tutorial. It's not about CSS, you could just throw some classes and mock up something in two seconds. When you're teaching it. But right. Yeah, if I'm if I'm doing my own project, I'm not reaching for him, necessarily. - -66 -00:26:46,500 --> 00:26:49,290 -David k piano: And to be fair, tailwind is beautiful. - -67 -00:26:49,350 --> 00:26:50,220 -Scott Tolinski: Oh, yeah. No, no, it - -68 -00:26:50,220 --> 00:26:52,890 -David k piano: looks great. Yeah, it creates Yeah, yeah. - -69 -00:26:52,920 --> 00:27:24,480 -Scott Tolinski: I use it as a inspiration for a lot of CSS in general. And just to styling things overall, but I just don't use the library. Yeah. Right. So a lot of what we're talking about with states really comes from working with data in general, right, you have your loading your error, whatever. And one of the services that we like to use to load data, and query for data and access data without having to have our own server is sanity@sanity.io. With more on the one of their query languages is Wes. - -70 -00:27:24,870 --> 00:29:05,910 -Wes Bos: Yes. So Sanity, we've talked about them 100 times on this podcast, they are structure content, CMS, it's pretty cool. Because you can you can run your own react components in it, and get it all up and running locally. And it just talks to the Sanity servers. One neat thing that they just launched is his website, grok, Dev, GROQ. Dev. And so the the query language that Sanity uses to pull in the data to your like, let's say you're writing a react component, and you want to pull in a list of blog posts, the query language that you use is called grok, which is a query language for querying JSON. And it's pretty cool, because you can do a lot of like filtering, a lot of really neat selects with it. And it's an open specification that they have developed, and then just open source. so other people can implement this as well. And they just released this grok dot Dev, which allows you to load in some JavaScript, and then start querying it and see what the result will be. So if you're like, not sure how this query language works, they have a bunch of example queries in there. And you can just get it up and running. You can load in your own data, start writing your own queries, and that'll get you comfortable with it. It's pretty nifty. So check that out. grok, dot Dev, GROQ dot Dev. And then also make sure you check out sanity.io forward slash syntax. That's where super secret URL, you're going to get double what the free plan on Sanity normally gets. Thanks so much for just Sanity for sponsoring. Alright, so you know a lot about CSS, right? Can I ask you just a random CSS question? Sure, go - -71 -00:29:05,910 --> 00:29:06,450 -David k piano: for it. - -72 -00:29:07,260 --> 00:29:35,640 -Wes Bos: So I'm just I'm just working on a website right here. And I'm, I'm working on the cards. And I have rotated x, like 40 degrees, just so like, it looks like the card is kind of swinging out towards the user. And in order to get it to look like it's swinging off of the page, you need to put a perspective on the parent. And I was just sitting here with Scott and I was like, What is this perspective number? I always just put random mount of pixels in until it looks good. You just give any idea. - -73 -00:29:36,720 --> 00:29:37,410 -David k piano: Right? - -74 -00:29:37,530 --> 00:29:39,690 -Wes Bos: Do you have any idea what that is? Sorry. Go ahead. - -75 -00:29:39,750 --> 00:31:03,000 -David k piano: Yeah, sure. So so with CSS, you don't really there's no really this not not really this concept of death. And so you sort of have to that I'm that's why perspective exists, you know, sort of added on as part of CSS three and all of that. So perspective is basically when you define like a translate z, your your your Telling It Like how stretched out like, do you want it like isometric? So that would be a smaller or I think would be a smaller one, or maybe would be an infinite one. I forget what it is. Um, but it's like how stretched out are the, you know, the those the value pixels? So, in fact, oh, yeah, so I've been wrestling with perspective, too, for a while, and like just trying to figure out what those numbers are. What I do at first, now I just leave it at whatever the default is. Because a lot, a lot of times I'm doing a, like nested transforms. So I'll have a 3d transform on something and then a 3d transform off of that, because I'm doing ridiculous 3d stuff in CSS for no good reason. And that I just, you know, I played around with different perspective values. That's sort of one of those magic number type of things, though, but generally, a higher value is going to be your more realistic value. Or at least I think so. - -76 -00:31:03,390 --> 00:31:27,090 -Wes Bos: Yeah. Because if you do like perspective, 10 pX, it looks like that thing is, is flying off the screen to you. Right, like, and if you do, like 1000 pixels, it seems a lot more normal. Some I'm just I thought it would be the other way around, though. Cuz like, isn't 1000 pixels like? Is that how much is it stretching off the screen towards you? - -77 -00:31:27,540 --> 00:31:44,130 -David k piano: I think it's how much is how much fits within a certain thing. So obviously, like, let's say, from where your faces to a foot away from you, fitting 10 pixels in there versus 1000 pixels in there. So 1000. - -78 -00:31:45,360 --> 00:31:46,710 -Wes Bos: The opposite of what not? Yeah, - -79 -00:31:46,710 --> 00:31:52,710 -David k piano: at least that's that's what I think about when I think about perspective. css. - -80 -00:31:53,010 --> 00:31:54,780 -Wes Bos: That's a great perspective. No, oh, - -81 -00:31:54,780 --> 00:31:56,010 -Scott Tolinski: gosh, - -82 -00:31:56,010 --> 00:32:12,090 -David k piano: I actually do have a, I have a three speaking of perspective, I have a 3d CSS animation coming out soon. So yeah, it's been a while since I did a code pen except the weekly code pens I do on the key framers with my friend Shaw. - -83 -00:32:12,750 --> 00:32:16,530 -Wes Bos: Oh, yeah. Well, tell tell us about the key framers plugin as much as you want. - -84 -00:32:16,710 --> 00:33:07,470 -David k piano: Yeah, sure. So you can find more information on keyframe.rs. It's a weekly podcast, or not really a podcast. It's a live stream, where we bring imaginative user interfaces to life using CSS, HTML and a little bit of JavaScript. What we do is we find these really cool dribbling animations, these advanced animations that we're like, oh, how is that done? And we try to do them live on the air. So we have absolutely no preparation whatsoever. We're just like, Alright, let's sit down and do this for a couple hours and see how far we get. The Shahs a very talented animator, and very good with just all aspects of you know, web design and development. So we we get a lot of stuff done. And most of the time we do succeed in in at least getting some form of the animation. And most of the time, we don't even use JavaScript all too much. - -85 -00:33:07,680 --> 00:33:15,450 -Wes Bos: Really like so. Yeah, it what do you reach for like what's in your base toolkit when you're building urges that decided per, per episode? - -86 -00:33:15,510 --> 00:33:47,700 -David k piano: So in our toolkit, I mean, we try to do things as vanilla as possible. So our HTML is HTML, our CSS is SCSS. Just because sass is what we're used to using. And sass is really helpful for nesting and variables and stuff like that. Even though we try to use CSS variables as much as humanly possible. in JavaScript, we just, we use Babel, in case we want to use ESX. But we don't really use any libraries. I don't think we've even used g SAP on the show. Wow. Yeah. - -87 -00:33:48,210 --> 00:33:55,470 -Wes Bos: That's cool. I'm gonna have to start watching some of these just subscribe. So it's a YouTube channel as well. Just keyframes on YouTube. - -88 -00:33:55,770 --> 00:34:27,110 -David k piano: Yep, it's a YouTube channel, which is just a recording of all of our live streams. Eventually, we do want to get into shorter form tutorials and just talking about all the things that we have both learned and we've worked on, like whatever's in our toolbox, and just digesting all those for you know, anyone who wants to learn cool oh, yeah, yeah. And it's it's it's not basics. It's pretty much if you want to animate anything in CSS, like even the really really hard stuff. That's that's what we focus on - -89 -00:34:27,540 --> 00:34:28,320 -Wes Bos: all really - -90 -00:34:28,529 --> 00:34:33,170 -Scott Tolinski: day. I'm always really impressed with all of the demo so super, super good work - -91 -00:34:33,330 --> 00:34:39,630 -Wes Bos: in you. You accused live stream this on Twitch as well. I see. You got like the green screen background. - -92 -00:34:39,779 --> 00:34:44,940 -David k piano: Yep, that's our mean. That's our mean live stream. Okay. Okay. At least for now. - -93 -00:34:45,000 --> 00:34:46,110 -Wes Bos: Yeah, yeah. - -94 -00:34:46,130 --> 00:34:59,900 -Scott Tolinski: How do you like live streaming on Twitch because we've only so far done it on YouTube with OBS. I don't know. I don't know if you want to get into any of that. But what's your what's your reactions and thoughts about twitch versus YouTube for streaming or if you have any - -95 -00:35:00,230 --> 00:35:18,240 -David k piano: So we've actually been talking about moving to YouTube for streaming with twitch shot takes care of all the OBS all those technical details. I really don't i don't think my laptop could even handle it. I have one of those 2015 MacBook Pros, which used to be the best MacBook Pro. But - -96 -00:35:18,240 --> 00:35:19,410 -Unknown: yeah, yeah, now - -97 -00:35:19,410 --> 00:35:20,880 -David k piano: they have the 16 inch. So - -98 -00:35:21,960 --> 00:35:25,860 -Wes Bos: started GoFundMe, they need these episodes, though, we - -99 -00:35:25,860 --> 00:35:41,420 -David k piano: do have a Patreon for cameras, and we use that to buy audio recording equipment, like this microphone here. And I have a green screen as well. And basically everything to enhance the user viewing and listening experience. - -100 -00:35:41,480 --> 00:35:47,760 -Wes Bos: Totally cool. Man, there's so much interesting stuff to ask you about. That's really cool. - -101 -00:35:48,060 --> 00:35:51,440 -Scott Tolinski: Let's take it back to us x state and state machine. - -102 -00:35:51,440 --> 00:35:52,650 -David k piano: Yeah, sure. - -103 -00:35:52,650 --> 00:36:33,510 -Scott Tolinski: I think I'm most interested in about his usage with the stuff that you know, people are already using. Right, right. So people using like Apollo or react or whatever, I see that there is like a react library, which really just looks like it adds a hook for x state. But overall, within if you were saying, okay, I want to get into state machines, x date seems like a good place to start. There's documentation, there's libraries, how would I go about adding x date to my my current project? Regardless of what it's using? Is there like, does there need to be any sort of connection from x date to something like Apollo? Or does x date just sort of exist on its own? And you can use your own things with x date? - -104 -00:36:33,650 --> 00:38:14,400 -David k piano: That's a really good question. I mean, obviously, if you have an open source project, where you have a big dev team working, you know, 40 hours a week on it, then yes, you can make all these connectors for all these other libraries. But my philosophy on talking about Apollo in that case, but my, my philosophy is that nothing that you know, you use like a library, or whether it should really be framework specific, I want to make it react, like or a view or Angular specific. And so that's why x state is, in essence, two things. Number one, it's that pure function where you give it a state in an event, and it gives you the next state. And number two, it's something where it's sort of like an event emitter that you could subscribe to, where instead of you asking you what the next state is, you just say, Hey, I'm gonna send you events, calling dot send on whatever. And I'm going to subscribe to whenever the state changes. And that's it. So just like any other library that might expose some sort of subscriber or event emitter interface, as long as you know, the patterns of how do I retrieve values, like from a subscription, and put them in my framework, you could use this with literally any framework. And that's one of the reasons why there are hooks for reacts. But that's just out of convenience. Yeah, totally. You don't need that. And so people have been asking, like, hey, why, why can't you? Why Why isn't there an adapter for viewer Angular, and to be honest, like, no offense to react, but it's because it just works, you could just take it on the object, subscribe to it and update the state and everything just works. So it's pretty, pretty straightforward. - -105 -00:38:14,580 --> 00:38:18,510 -Wes Bos: Nice. Cool. That is so cool. I want to use this right now. - -106 -00:38:19,440 --> 00:39:20,760 -David k piano: And also, um, so one of the other biggest things about it in this is I've been asking like, why why do people use Etsy? Why are so many people interested in it all of a sudden, in a lot of people have told me that it's actually the visualizer. So by the Oh, yeah. Yeah, by by defining your state machines, but these objects, it's sort of like a JSON looking, you know, notation sort of thing that you just put in this machine function, and it spits out a state machine for you. You could copy and paste that exact same code, stick it on to x date.js.org slash biz, in C, your state machine visualized. So imagine trying to do this with a reducer and Redux? Yeah, you can't really do that. You can't really say, if I'm in this state, what are the next possible states I could go to, but with XD You can because that's what state machines are all about that determinism, that no matter what, when I'm in the state in this event happens, this is always going to be the next state - -107 -00:39:21,150 --> 00:39:53,100 -Scott Tolinski: visualizers great. Um, my very first introduction to programming in general was through a language called max MSP, which was visual programming in general, you basically set up these states and connected them via patch cables. And this is such a he I don't know if it's just because I learned like that, but looking at this, it makes the picture so clear, to me much more clear than looking at the JavaScript object, because here, you see exactly what routes were what can route there. What are the events that take place? I think this visualizer is such a killer feature. - -108 -00:39:53,420 --> 00:40:09,360 -David k piano: And sometimes sometimes people make state machines and state charts that are complex, and they're like, hey, David, this is really good. Using to look at in the visualizer. So I tell them, yeah, imagine not having that visualizer. Imagine how complicated your code would be without state machines at all. - -109 -00:40:09,630 --> 00:41:41,040 -Scott Tolinski: Yeah, just trying to navigate those different states just via the code. Yeah, yeah. So really, what we're hearing is that state machines are going to make your code less prone to errors. However, your code is never going to be entirely free of errors. And when your code inevitably has an error, you're going to want to check out one of our sponsors. Now that sponsor is a Sentry, you're going to want to head over to sentry.io and use the coupon code a tasty treat all lowercase all one word, and you'll get two months for free of Sentry now what is Sentry Sentry is the place to know what's happening with your errors, you can track them, store them, attach them to releases, attach them to specific developers or even users on your site. And so this way, you can quickly add something as an issue into your GitHub application or anything else that connects to every single service that you already use anyways, and it makes finding and solving these things next to effortless Now I use Sentry myself in my own applications, and I absolutely love being able to tag a specific release to a specific GitHub commit, allowing me to see whenever I introduce a bug in a specific commit, this is really just amazing. And it really has refined our process, it is one of these tools that is absolutely essential in my mind. So again, head on over to sentry.io coupon code, tasty treat, and get two months for free. Thank you so much for Sentry for sponsoring, - -110 -00:41:41,100 --> 00:42:14,100 -Wes Bos: yes. So if you think of some of these, like just UI widgets on websites, where you have uploaders, or like a multi select drop down, that you can do a fuzzy search on and not needs to fetch data, like, there's so much that goes into some of these custom UI widgets, that having a, like a visualization of what goes on, really cover you. I think in a lot of those cases, I think this is so cool that you just paste your JSON into the end of this website. And then it just builds a visualizer. For you - -111 -00:42:14,100 --> 00:42:33,210 -David k piano: paste the entire JavaScript, it doesn't necessarily need to be JSON, because it recognizes whenever you pass into that machine function, and then it does not only does it visualize, but you could actually simulate events. So you could click through the machine and just make sure that whatever you're doing matches the logic that you have inside your head. - -112 -00:42:33,710 --> 00:42:55,710 -Wes Bos: Ah, yeah, I see it and it's, you can reset it. So you can click on fetch, and then that puts it into loading. And then you can either resolve it and then then it puts it into success, or you could reject it. And that puts it into failure. But based on failure, then that opens up retry. Which brings you back to loading. Yeah. And then it counts the number of retries. That's, it's so neat. So - -113 -00:42:55,710 --> 00:43:20,280 -David k piano: it expresses that complex logic. Because I'm yeah, think about it's easy to make a tutorial in normal JavaScript, like, here's how to fetch data. But then someone asks you, how do I cancel that? Like, how do I provide a Cancel button? It's like, Oh, no, I don't know. But thinking about it this way it makes, you know, it makes things like that easy. Or easier. I don't want to say easy. - -114 -00:43:21,510 --> 00:43:32,190 -Wes Bos: Yeah. Would there ever be like a need or an idea of to do something the other way around, where you just start clicking it together in the UI, and then it kicks out some code? - -115 -00:43:32,690 --> 00:43:53,610 -David k piano: I'm working on that. I'm working. Oh, slowly, but surely. So early next year? Hopefully, I'll have something outs. I would like this. Yes, sort of like a visual editor. But the reason I did this the other way, too, is because it's a lot harder to convince developers like hey, just play around with this. Oh, yeah. editor, and then it'll spit out magic code for you that you copy paste. Like - -116 -00:43:53,700 --> 00:43:57,090 -Scott Tolinski: developers like that. flashbacks to Dreamweaver. - -117 -00:43:57,600 --> 00:44:03,810 -Wes Bos: We're not gonna acknowledge anything that's gonna take our jobs. And if you're building this weekend, x date job killer thing, - -118 -00:44:04,020 --> 00:44:17,910 -David k piano: then we don't want that. Exactly. So that's why I did this week. First. It's like, just here's a really simple way to code your state machines. And it happens to be visualizable. So or I don't even know if that's a word visualizable - -119 -00:44:18,090 --> 00:44:24,630 -Wes Bos: visualizable. It is on this podcast. Your words? Yeah, we do a lot and we mispronounce everything. - -120 -00:44:25,499 --> 00:44:26,190 -David k piano: Fantastic. - -121 -00:44:28,620 --> 00:44:32,250 -Wes Bos: Scott, D have any other questions for David do other stuff that we haven't covered yet? - -122 -00:44:32,760 --> 00:45:15,270 -David k piano: Just one thing, like when when you start learning about these state machines, you're not going to like it for one simple reason. And that's that you're going to start realizing that there are so many things, pretty much everything on the web on your phone, or whatever is a state machine. And you're going to be really frustrated because you're going to be like this should be a state machine. I'm like, dude, do you ever like, I don't know, use some sort of custom chat app where things Just keeps showing up on the bottom. And then you're like, You know what? I want to see what messages on top. So you scroll to the top. But once a new message comes in, it just scrolls you back down to the bottom. And you're like, why is that? So just just the tiniest things like that. That's - -123 -00:45:15,329 --> 00:45:32,940 -Wes Bos: super interesting. Yeah, it's true. Like, I run into that enough already that I think of like, Oh, this, like, you know, you can see an error happening on something and you can almost tell in your head, what happened. And then now you're now you start thinking, I know what happened. And I know how they should have done it - -124 -00:45:32,999 --> 00:45:54,900 -David k piano: exactly. More. Or when someone inevitably forgets to disable a button, and you're like, why is this taking so long to load? So you click it five times, and then you realize, like, Oh, I just placed five orders of something. He wants to place one or something silly like that. We have 40 undefined cards that are notion right now. Because of exactly that. - -125 -00:45:57,090 --> 00:46:02,160 -Wes Bos: Yeah, until it showed up. And then eventually, 40 of them showed up. So we - -126 -00:46:02,940 --> 00:46:10,650 -David k piano: behave, right, we Yeah, it's always good for the happy path, we have to consider every single possible edge case that, you know, can happen. - -127 -00:46:11,520 --> 00:46:21,090 -Wes Bos: Oh, that's funny. Wow, um, you seem to do a lot like, do you have a day job as well? Are you just doing this all day? - -128 -00:46:21,180 --> 00:46:44,490 -David k piano: I didn't know I I work at Microsoft. So I work with their commercial software engineering team, where we do a lot of interesting projects with a lot of big companies. And with that, I don't always get the chance to work with JavaScript and TypeScript. Like right now. I'm working with Python, and some data science stuff. So that's, that's my main job. - -129 -00:46:45,870 --> 00:47:00,720 -Wes Bos: Oh, cool. That's it pretty busy. I'm always amazed that when people have like they have a normal job, and then they also have this like, a podcast and the ability to keep up to date on the stuff and put out libraries and all that stuff. That's, that's amazing. - -130 -00:47:01,080 --> 00:47:08,040 -David k piano: Yeah, I wish I had more time, I would have gotten 10 times as much things done if, if I had all the free time in the world to do it. But - -131 -00:47:08,070 --> 00:47:12,060 -Wes Bos: yeah. Cool. Um, anything else to add there? Scott? - -132 -00:47:12,330 --> 00:47:20,730 -Scott Tolinski: I don't have anything. This has been really illuminating. I'm gonna do a little little demo in my code, just to try it out. Some I'm pumped. Awesome. Cool. - -133 -00:47:20,730 --> 00:47:31,410 -Wes Bos: All right. Well, let's move on to the next section, which is sick picks, these are picks that are sick. And Scott, you got a sick pick, yeah, - -134 -00:47:31,440 --> 00:48:56,880 -Scott Tolinski: I have a podcast that I've been really enjoying. I'm about halfway through it. It's one of those ones that's like 10 episodes or so. And then it's done. And so this is a podcast on a subject that I was not interested in. And I'm not necessarily still interested in. But the podcast itself is fascinating. It's called the big one, and your survival guide. It's from kppc, Southern California Public Radio, and it's all about the San Andreas Fault, and a potential devastating earthquake in LA. And basically, it talks about what happened in the past with past earthquakes, what people's experiences were, how likely earthquakes are to happen, and what could happen to you. So it's basically giving you like, really nice, like, I'm not in an earthquake zone here. But I still find the tips to be really super interesting. And they were just saying, like, oh, if you have two bottles of water underneath your desk, you're way more likely to live your life 200% more likely to live in the event of an earthquake. But the podcast itself is just really, really well done. It's a mixture of storytelling, scientific, they get a lot of like, really, really smart people on the topic of earthquakes in general a little bit of the history of earthquakes in California, how plate tectonics work and all that stuff. And I found it to be absolutely super well done. So I'm really intuitive, totally fascinated and a little bit terrified by it, but it's all super good. It's called the big one. - -135 -00:48:57,330 --> 00:49:02,070 -Wes Bos: Beautiful I David, do you have it? No, we sprung this on you. Do you have any fix? - -136 -00:49:03,030 --> 00:49:32,070 -David k piano: Yeah, so about a few days ago, there was a website by Lynn Fisher not sure if you're familiar with her she she makes these really amazing while she she doesn't love single div CSS things, but she also has this website at linen tonic.com where it's basically always a masterclass in responsive design. It's always the most amazing responsive designs that you could possibly do on the website. So I encourage you check that out and just - -137 -00:49:32,700 --> 00:49:34,140 -Wes Bos: Oh, yeah, - -138 -00:49:34,170 --> 00:49:39,030 -Scott Tolinski: I I follow. I follow on Twitter. So I'm, I'm aware. These are great. - -139 -00:49:39,240 --> 00:49:47,520 -Wes Bos: This is cool. It's just I just go to linen tonic calm and resize the browser. That's all I have to say for you. Yeah. Cool, sick pack. - -140 -00:49:47,520 --> 00:49:48,300 -David k piano: Mm hmm. - -141 -00:49:48,300 --> 00:50:58,650 -Wes Bos: My second pick today is going to be a documentary called American factory and it's on Netflix and it goes into a Chinese company. Start up a glass factory in Ohio. And I usually don't like when people come out swinging, they watch a one hour documentary. And then they're they have all these opinions because a lot of documentaries on netflix or house, their fires, they have somebody money behind them. Yeah. And then people come out swinging and saying just watch this documentary. It'll change your life. And this is not that kind of documentary. It's just a really interesting look into Chinese vers American culture. It sort of changed my mind about unions gave me kind of an interesting look into like, what a union will do at like a big factory like that. I just thought it was interesting. All around. So check it out. It's called American factory. It's about a glass company called fuyao. Interesting. Yeah. Good one. All right. Uh, this is the part where we do shameless plugs. You could plug anything in anything as many things as you possibly want. without having any shame. Do you have anything to plug David? - -142 -00:50:59,310 --> 00:51:08,310 -David k piano: Oh, yeah. Well, my ex State Library, of course, and also key framers keyframe.rs, which is our weekly live stream for really cool CSS animations. - -143 -00:51:08,310 --> 00:51:11,430 -Wes Bos: What is the.rs domain name? - -144 -00:51:11,730 --> 00:51:16,560 -David k piano: I think it's Russia or something like Russia. So yeah, I'm not too sure. - -145 -00:51:17,460 --> 00:51:26,790 -Wes Bos: We had a podcast once where we did a game. And Scott and I had a guess, what the domain name was for, and how much it cost, which was rough. - -146 -00:51:27,180 --> 00:51:29,580 -David k piano: So it's it's Serbia and Kosovo. - -147 -00:51:30,000 --> 00:51:32,790 -Wes Bos: Ah, interesting. I wouldn't have guessed that. - -148 -00:51:33,060 --> 00:51:37,470 -David k piano: Yeah. So R stands for Republic of Serbia. Ah, - -149 -00:51:37,500 --> 00:52:26,460 -Wes Bos: makes sense. Yeah, well, you would have won the game there. Cool. So check that out, we'll put links in the show notes to key framers as well. I'm going to stick pick my beginner JavaScript course, which hopefully by the time you're watching, this should be out at beginner JavaScript calm. This is a course on how to get absolute confidence in JavaScript from the ground up. So totally beginner friendly also, like brush up friendly if you're intermediate. And you just want to make sure that you have a rock solid foundation in JavaScript. It's all project based learning or mostly project based learning. So we're actually building things and learning as we go rather than just sitting there and console logging foo bar Baz all day long. So check it out. beginner JavaScript calm use syntax for 10 bucks - -150 -00:52:26,490 --> 00:53:09,810 -Scott Tolinski: off. Yeah, I would like to plug my course on how to console log FUBAR bass, it's available on now, I would like to plug my latest course is react and TypeScript for everyone. It is out now. And it teaches you how to use TypeScript in react using react hooks and all of that great stuff that we know and love and react. So it basically addresses all the real world situations that you're going to run into when you're trying to either type things like rafts or state or even just your straight up react components, props, default props and all that stuff in modern react and TypeScript. So check it out at level up tutorials.com forward slash pro sign up for the year and save 25% that's all I got. - -151 -00:53:10,379 --> 00:53:23,070 -Wes Bos: Awesome. All right. Thanks so much to David for joining us today and schooling us on fate machines and all those bonus CSS tips. Very tasty. So thanks a lot. Appreciate it. - -152 -00:53:23,399 --> 00:53:27,330 -David k piano: Thank you for having me. Peace, peace, peace. - -153 -00:53:29,310 --> 00:53:39,030 -Scott Tolinski: Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax207.srt b/transcripts/Syntax207.srt deleted file mode 100644 index b50b15ef9..000000000 --- a/transcripts/Syntax207.srt +++ /dev/null @@ -1,180 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA and Scott Hill. Totally ski. - -2 -00:00:25,890 --> 00:00:26,610 -Scott Tolinski: Whoo, welcome - -3 -00:00:26,610 --> 00:00:48,030 -to syntax on this Monday hasty treat, we're going to be talking about how we both launch our courses, this is going to be giving you a little bit of a, you know, a little bit of a view into behind the scenes of what Wes and I both do when we launch a course you know, it's fun, because our platforms are very different. Our styles are very different, and how we release is inevitably going to be very different. So I'm excited to hear what Wes has to say. - -4 -00:00:48,060 --> 00:00:49,380 -Wes Bos: Yeah, vice versa. - -5 -00:00:49,620 --> 00:00:56,970 -Scott Tolinski: Yeah. We'll talk a little bit about those processes. My name is Scott Tolinksi. I'm a developer from Denver, Colorado, and with me, as always, is Wes Bos. - -6 -00:00:57,210 --> 00:00:59,400 -Wes Bos: Hey, everybody. Hey, Wes. - -7 -00:00:59,610 --> 00:02:22,080 -Scott Tolinski: This episode is sponsored by Sentry. Now, Sentry is a critical part of my platform when I'm watching anything, because it lets me know if there are mistakes in my code, lets me know if there's a problem. Because what Sentry does is it It isn't an error and Exception Handling tool and it can notify you of different bugs, it can categorize them, catalog them, and allow you to attach them to various releases, commits, and so on, you'll be able to then see within your source manager exactly where these issues happen. Now, Sentry is one of those platforms that works with just about everything you could possibly use. So if you are concerned, well maybe I'm using this and this and this, maybe it's not gonna work. No, it's gonna work. But let me tell you, Sentry just has connectors or even just ways to use with just about any language. And you'll want to give Sentry a try over@sentry.io, use the coupon code, tasty treat all lowercase all one word, and you're going to get two whole months for free to test out Sentry, go ahead and have people use your site, have them trigger a little bit of a bug and watch into light as you have that bug catalogued, so that you can go ahead and fix it and make sure that that bug is fixed. So check it out. sentry.io coupon code, tasty treat. Okay, so let's get into it here. We're gonna talk about our course launches, the West recently launched a course, what's your course called West, - -8 -00:02:22,380 --> 00:02:25,880 -Wes Bos: beginner javascript.com. Thanks for the opportunity to - -9 -00:02:26,000 --> 00:08:46,740 -Scott Tolinski: get a little Sally got to get himself out of the way got to get it in here. Mine is a level up tutorials.com. And so the difference between Wes and I, as I release a new course every month, in my my subscription platform is mostly like a you can think of it as like a magazine subscription. It's like the way I like to describe it, right? you subscribe to the magazine, and you get a new tutorial series every month. And West, your courses are a bit longer and a bit more involved. And you release them whenever you are complete with them. So we have very different strategies and very different types of content in general, despite some of the topics being kind of similar. And so my pre release, I recently modified my platform. So I have a whole custom code platform, which is great because it allows me to build in the tools and things that I need when I need them. For instance, we had a lot of people saying, Hey, I never know what the next course is he i don't i don't have Twitter, I don't subscribe to your email list. How do I know what the next coming courses. So we started getting a little bit better about this by having a new pre release. So I have a tool that I call the series Iser, I give all my tools really fun names. So in the series Iser, there's a button that says new series. And that's the first first step I click the button. And it gives me a course creator, where it has the thumbnail images that I create, it has like a little color picker, like you'd see in figma or something. And it has all of the options that I need, I can upload an SVG background for it via drag and drop, I start to select things like the logo, the color. And so typically, I'll design the thumbnail for this course, I'll drop it in here as an SVG, I'll set the status to pre release, and then set the title and then I just click Save. And what that does is it puts the tutorial series, the upcoming one in the listing with the rest of them. But it doesn't make it a link so you can't browse to it. And it adds a little coming soon badge. That's cool. So that way you can see it in the listing with all the other ones. This is a problem that we've had. And so this is a solution that we that's the largely the cool part about owning your own platform like this is that you can make those changes to fit the needs of the audience. Right. So the series Iser is the same, basically the same form as it is when you edit it. I also have this series listing, which is a big long list of all of my series with their skews their prices, their logos, whether or not they're active, whether or not they're Pro, and that's how I reorder them as I just drag and move them around. And that's automatically responsive to the front end as well. So I put the course in the pre release I save it all up and then just sit there for a little little bit. I do some marketing, whatever. And then the course is complete, right. So I've I record all my courses I send to my video editor, Tim Smith, who does a great job editing them for me, he gets them back to me a day or two before the actual release date. Since I'm on a magazine sort of schedule, it's really easy to say, Okay, I need these by two days or a day before the end of the month, every single month, right, we're always on the same schedule. So I really will cut it, I cut it to the last second, but I do so on purpose. Since I released this content every month, I want to make sure that everything's like sort of the latest, right, so I'll record the series in the first 15 days of the month, my editor will edit it over the next 15 days. And usually I have like one day or less, and to push this thing live. So to push it live, I've been given the content, what I'll do is I'll upload it to YouTube, I'll wait for it to completely process. And then I'll use YouTube dl to download it from YouTube. Why because YouTube's compression is really good for ADP stuff. And if I'm going to be giving away downloadable versions of this, to be honest, it's actually faster for me to upload it to YouTube, have them do all the compression. And then for me to download it, it's faster to do that than it is for me to try to compress it to the same standards via Da Vinci or whatever I'm using at the time. That way, it frees up my computer processing to do something else on Google's servers to handle that one. And then, so I compress it all into zips, I upload them to both s3 and v2. And then I basically input all the data whether or not whether the keys or whatever from s3 into my series Iser, to update it. And then here's the fun part, I have to get all of the individual videos into my site, right, because right now they just live on YouTube. So what I do inside of the series Iser, there's just like a little text input box, and I paste in the ID of the playlist into YouTube, and I click import from YouTube. And then just like magic, all of the video tutorials pop in there, or they update if they already exist. I also have an import from Vimeo button, I can import from any platform and it just brings them all in, saves them into my site. And that gets the basically the whole site sort of locked and loaded ready to go. Now at this point, if you were the proper role, like if you're an admin, you could see and edit these so that way, we can go ahead and edit the titles or descriptions as we need, we can make sure that the course everything looks fine. And then when it's ready to go, basically, all I need to do is change it from pre release to active in a select list. Now at that point, I do want to make sure I have the the price and the files and every everything I could possibly want with this project or this particular series ready to go. But it's really just a flip of a switch from pre release to active, click Submit, and all of a sudden, it turns the series card into a link. And it is available for anyone with a pro subscription do watch or anyone without a pro subscription to purchase. So they're all the same thing, whether it's a product or whatever, it's all the same piece of content. And how I choose to open up that flag is whether or not you have purchased a specific one or you are a subscriber. So that's really it for me, I've really refined the process, releasing a course for me used to take a day or two. And now it takes a couple of hours, right? It takes almost like the time I need to do is like wait for the processing for YouTube, or whatever. But the actual things that I need to do are just about every single piece is is ready to go ahead of time. So that all I need to do is upload things where they need to go click go, and everything is ready to go. So this is my process. I've refined it over the course of many years here. And hopefully we'll continue to continue to refine it as we go. - -10 -00:08:47,130 --> 00:11:13,290 -Wes Bos: Beauty I think I'm I want to try the or trick of using Vimeo or YouTube to compress it for you. Because honestly, one of the longest things that I have to do is to run it through handbrake. For the downloadable version. I just talked about that. Let me just say so I'm gonna break mine down into pre launch, launch day and post launch. So by the time I'm done, like building a course, it comes time to, to export the videos and compress them and everything. So usually, the first thing that I'll do is I'll start to build the website. And it usually isn't from scratch, it usually is me over six months or so just kind of throwing around ideas for branding and colors and design and things like that. And I'll just have a whole bunch I should I should post on Twitter, some of the revisions of the website. And then once I have a good enough idea of the look and feel what buttons what text is going to look like I'll just jump into the code and start building, building it out from there. Probably the hardest part about that is trying to take everything that's in my head about who the course is for what they're going to learn why it's a good course, all of these things, which is essentially just copywriting and trying to get it out of my head and into text, but not just like, like, we've all seen these websites where it's just like paragraphs of text, like, no one's gonna read that, right. So trying to just to get across all that information in a visually appealing way. So that's, that's a big part of it. This time, when I launched my beginner JavaScript course, it took me two days to build the website, which was much quicker than in the past. But it definitely leaned on a lot of the existing CSS and media queries and things like that from my from my past courses. Then it comes time to I edit all of my videos as I record them, because I'm in the headspace then, and also, I hate editing videos. So just editing them immediately after I record them taking 1015 minutes to edit it really quickly. So once I've done all that, I'll put all the bumpers on them. So I'll usually just put a front bumper that's like two or three seconds anything more than that people get real mad at me about it. So just like a quick little bumper on the front of the video to let you know that you're in a new one excited about the video. And then I export them all which takes for freaking ever, maybe one now. - -11 -00:11:13,290 --> 00:11:15,990 -Scott Tolinski: Or did you do your exporting on your new computer, - -12 -00:11:16,170 --> 00:12:16,380 -Wes Bos: I did it I moved them all to my new computer and export them because I had 28 and a half hours of video, export it at 4k. So at this time, I didn't export at 10 adpi. What full 4k and they look freakin awesome. By the way, like if you go on Vimeo and just like let Vimeo figure out the quality for you that it looks so good. I'm so happy with them but it just like like a one hour video. Like some of my some of the videos are one hour because they're they're big things that we're building, like those took like 30 minutes, 45 minutes to export, because I export that at such a high bit rate. Because I need I hate it when the text is pixelated. Like I want the text to be as crisp as possible. So I export it at a very high bitrate. At 4k, it takes forever. Like I think I think the 28 hours took me something like 20 hours to export on my poor little MacBook it was - -13 -00:12:18,000 --> 00:12:19,440 -the entire time. - -14 -00:12:21,870 --> 00:12:38,190 -And then once those are exported, I'm sure there's I also think that because I use ScreenFlow. Like I don't think that that's the best video. I think if I use like a proper video editing, that would be faster. But also like i don't i don't care that much like I'm working on the website at the same time. - -15 -00:12:38,460 --> 00:12:53,730 -Scott Tolinski: You know what I've been considering? I've been considering getting screencast or ScreenFlow. Again, whoa, I used to use it. And one of the things I didn't like about it was like it was really slow to populate the audio waveforms and things and still is it still is - -16 -00:12:53,730 --> 00:13:22,530 -Wes Bos: it got a lot better in the latest release. Because what happens is they try to they try to paint the video forms first. Yeah. And then they paint the waveforms and I don't care about the video about the video always just my code so that now they they have this new thing where it will, it will render out like a 720 version of it just for you. And then when you go to export it, yeah, like a proxy. Yeah, it's a proxy. It's exactly what it's called. It's it's a bit faster. But still, I don't know, it's still kind of slow. - -17 -00:13:22,770 --> 00:13:52,830 -Scott Tolinski: I've been thinking about just because as good of a job as Tim has done for my video editing, he's not going to be available next year. So I need an editor and I was thinking about maybe just streamlining the process and moving it all in. Because right now I have to record it into ScreenFlow and I have to run an export compression from screen flick which is stupid that I have to do that. And then I have to would then have to import everything and it would be nice to maybe just centralize it all and I'm really not doing intense multi cam editing or something. So I don't Yeah, I go back and forth. - -18 -00:13:52,920 --> 00:13:59,250 -Wes Bos: does everything I need I like it a lot like I complained about it only because I want it to get better. - -19 -00:13:59,490 --> 00:14:07,050 -Scott Tolinski: I think I would like the simplicity. I use ScreenFlow for like two years primarily when I first started low Yeah, and it's been a while so - -20 -00:14:07,470 --> 00:15:42,720 -Wes Bos: yeah, you're good. You should try it out. It's it's not the best thing but like I think it's the best thing at least for me. I don't I don't want to get into anything else. It's nice and nice and quick to edit the videos which I like. So anyways, once I have that once I've exported all the videos that have them all in super high quality, then comes uploading to Vimeo. So I have 97 gigs of video for the course as high rez and then that gets compressed down to six and a half gigs. So at the same time I will or on a different computer I will upload them all to Vimeo and then I will also run them all through handbrake which compresses them down to attend ADP and does like like some sane settings on them. So it's like it's like did you can download them on for a plane ride or something like that. So I run that through handbrake and Then I compress them into a number of zip files, usually two or three zip files, depending on how big the files are. So people can download them. I'm looking at automating that right now. Because what inevitably happens is that I have six gigs of zip files, maybe it's two or three files. And then I have like, Uh, oh, I left like a one, one little false start in a video. So I have to edit that video, export it, compress it, upload it to Vimeo, remake my zip files and then upload it and I have the fastest internet upload I can get at my house, which is like downtown half a million people in my city, like I'm don't live on a farm here is 10 megabits up, and it's so slow, it kills me, - -21 -00:15:43,080 --> 00:15:43,980 -Scott Tolinski: I get 1000 - -22 -00:15:44,130 --> 00:19:54,390 -Wes Bos: Yeah, like that blows my mind like I could, I could do so much more, I could release my courses so much faster. If it wasn't for that, because it takes a couple days to export and upload these, all of these videos at once. So once that's all up, I've got my zips, I put them on backblaze b two, I'm looking at trying to figure out how I can streamline the compression because there is a handbrake c li and I'm looking at how I can automatically compress them with streams. Maybe we'll have a video of me explaining what streams and buffers are again, in the future. I then once that's done, I go ahead and create all the graphics that are needed. So each package that you buy has a graphic, you always have to have like Facebook share on Twitter share graphics, five icons for each one, there's all kinds of these little graphics that need to be made for each one. So create all of those, then it comes to launch day. So once I have it all online, and we have a we have video on our each of our course platforms you can go and listen to but essentially I have I connect to the Vimeo API and pull down a list of all of my videos. And I go and add the module information to each of those videos as to usually my courses are broken up into different modules. Like this last one, I think has 15 different modules, things like the DOM events, a sink, await flow control, things like that. And that that all gets pulled into the website, it gets pulled into the video player to tell you where you're at. And then when it comes time to actually launch the thing. Usually I'll just push the website live and don't say a thing. And there's enough people that are sort of chomping at the bit to get to it, that they are refreshing it every half an hour or something like that. I believe this time, it took two minutes before somebody bought it after I pushed it. So I just be quiet for a couple hours or not a couple like an hour or so. And just make sure that nothing goes awry. Usually I try to get both people into beta test the videos and to beta test the website. But this time, I was just under way too much of a time crunch. Because of Black Friday, like I had to get this thing launched by Black Friday. So I had no choice. I couldn't do it, which is okay, there's there's still like things coming in here, here and there that are broken that I have to fix. But I'm quiet. Then about an hour later, I'll tweet it out. And then that spikes, the number of people on the website, things like that. And then I'll message My slack room, which has quite a few people in it. And that will give me another spike of people on it. And I'll get like lots of good feedback. Usually people are sending me Twitter DMS. Hey, Wes, this is broken or whatever. Things like that. Like I probably should have been vetted, proper QA process, but we'll do it live I did at this time. There's always little things like that, that pop up. Of course, I'm watching my like Sentry, something like that, to see any errors that spike once people are on it, because there's often stuff like that that happens. And then finally, once I'm like confident bunch of people, a couple hundred people have bought it, it's looking good. Then I send it to my email list. And that's the big kahuna that then I get worried about my email my server crashing, which thankfully hasn't happened in the last couple launches. I've got that sorted. But then I sent it to my email list and I get lots of people going on that. So that's my launch day, and then post launch. So usually like I'm almost a week post launch right now and and my days look like I've keep a close eye on the slack room for little things that pop up that are confusing, like one silly little thing. But like in one of the videos I said VS code already gives you the curly brackets for your settings object. And a lot of people didn't have any settings. So they didn't have curly brackets. And like that's such a silly thing. But when people are new to programming, they don't know to put the curly brackets in there, right so I have to go back and edit that video and say like if you don't see curly brackets, make sure you put a set in there first and then paste this thing on in there. I do a bunch of small little edits. So inevitably, I'll forget to edit out a 32nd long pause of me going oh - -23 -00:19:55,920 --> 00:19:57,540 -Announcer: why isn't this work gang? Maybe - -24 -00:19:57,540 --> 00:19:58,310 -Scott Tolinski: screaming - -25 -00:19:59,360 --> 00:20:24,590 -Wes Bos: Yeah. So I'll edit those out, which that causes the whole trigger of me having to export it, uploaded the video, compress it, re zip it, re upload that whole thing, which is why I'm looking into to streamlining that right now because it's a bit of a pain. And then I'll just send a bunch of follow up email. So like, I don't email a lot. But when I launch a product, like it's hammer time, like I do send, - -26 -00:20:24,590 --> 00:20:25,860 -Scott Tolinski: guys, - -27 -00:20:25,860 --> 00:20:55,410 -Wes Bos: I it's hammer time, I do send like, I think Black Friday set for four emails to my which is not a lot for like Old Navy, but it's a lot for me. So send a bunch of follow up emails, which only got two f words as replies, which is amazing. Yeah, new all time all time low. And that's it. That's, that's my my launch process, I just kind of wind it down, I've got a couple more videos, I need to tack on to the end yet. But then I do it all, again, start working on the next course, tick, - -28 -00:20:55,820 --> 00:20:56,460 -Scott Tolinski: tick, tick, tick, tick. - -29 -00:20:56,460 --> 00:20:57,930 -Yeah, I had - -30 -00:20:57,930 --> 00:22:26,400 -one little thing I forgot about until just now when you were talking that I wanted a dimension to something that I do that I think could be really neat for people. I use figma as my main design application. And so if you're creating content, you know, typically we think about responsive content primarily being for the web, right? Because that's, you know, why you have constraints, where their app design or whatever, but I use figmas constraints to do all of my thumbnail design. So I do my thumbnails that you see on the level of tutorial sites as an SVG. But what I do is I have several other modified versions of that component in figma. I did a little finger quotes when I said that. So I have a component in figma. And when I create my thumbnail, it automatically creates an Instagram sized promo material, it automatically creates an Instagram promo material, and it creates a 4k one that I use for by video, it creates smaller ones that I use for the site. And it creates ones with coming soon banners and whatever. So that way, I can just select all of these frames and export them all at once. It would only making the design once I that was one thing that I was going, I don't know a lot of a lot of times in my process, you're like finding something that is a pain point, right? And that you want it to improve here or there. So I like to refine my process and those ways to automate things. And that's just a little extra thing I like to do to use a design app in that way. But that's really all I have on my course platform. - -31 -00:22:26,460 --> 00:22:27,780 -Wes Bos: Such a good idea. - -32 -00:22:27,780 --> 00:22:28,500 -Announcer: Thank you. - -33 -00:22:28,500 --> 00:23:23,280 -Wes Bos: I need to do that. Oh, and the other thing we didn't talk about is the copious amount of support email that comes my way. So whenever whenever I launch something, I get hundreds I think I think I counted. over this last launch. I got 1400 support emails from people and a lot of them are. Some of them can be fixed by UI. Like one bad thing I did on the website is I put the starter package before the master package. And people on mobile just scroll down and they say oh, there it is. I'll buy it and then they go oh, shoot. I bought the wrong one. I didn't buy the mat. I wanted it all right. And like that's bad UX on my end, right? Like that's easily terrible. Bad. Yeah, super bad. And other things are just like it's people send you their life story. Like I was I was born in West Philadelphia born and raised. I did Java for most of my days. And chillin out maxin - -34 -00:23:23,280 --> 00:23:24,390 -Scott Tolinski: relaxin, all cool - -35 -00:23:24,420 --> 00:24:15,570 -Wes Bos: chillin out Adobe max. Oh, like in real cool. Anyways, so the people give me their entire life story and say, like, what should I do, and you have to like, sort of like parse their entire life and tell them which course to take or something like that. And I one of the big ones for me is that there's overlap between my ESX course in this course. And also, I have a beginner JavaScript course already, which is JavaScript 30. And I have a huge thing on the website that explains what the differences are and how they work together, or if you shouldn't take this one or not. And that really helped as well. And then just like little things, like oops, forgot to use the coupon code, or probably 200 of those were, I spelled My name wrong and my email address, and I didn't get it, right. So like all kinds of stuff like that. And I have a system that does most of that. But the support is is a lot of work. - -36 -00:24:15,990 --> 00:24:17,490 -Scott Tolinski: It's a lot of work. It's tough. - -37 -00:24:17,700 --> 00:24:28,590 -Wes Bos: Then there's Twitter, DMS to Instagram DMS and young calls and like I put my phone number on my website, which people think I'm bonkers about, but I got three phone calls. - -38 -00:24:28,830 --> 00:24:33,330 -Scott Tolinski: Yeah, people thought thinking that you're too crazy for that, that you must have put my phone number there. - -39 -00:24:34,110 --> 00:24:34,710 -Wes Bos: I should. - -40 -00:24:36,060 --> 00:25:00,630 -Scott Tolinski: You know, that's something that Courtney and I do is that whenever we're interested in receiving I shouldn't say that she started this. Whenever we're interested in receiving updates about something whether it's like an email thing, but we don't want it in our own inbox or a phone number. Oh man. Yeah, put in each other's information there. So I'll be like, why did I just get a home goods email in my inbox and garden They'll be like, Oh, no. - -41 -00:25:00,630 --> 00:25:03,120 -Announcer: Ah, - -42 -00:25:03,390 --> 00:25:33,990 -Wes Bos: that's funny. Yep. Cool. Well, that's our launch process. I'm not sure if it's interesting to you or not. I know a lot of people who also have courses are interested in it. And then people just in general, just interested like, what is the process for launching this thing? Because sometimes I get people being like, hey, like, Can you just give me early access and like it literally takes me 20 hours to export this thing. I can't just like give you type of button and say early access, right, Early Access - -43 -00:25:33,990 --> 00:25:35,490 -Announcer: Board. Cool. Alright. Thanks - -44 -00:25:35,490 --> 00:25:38,640 -Wes Bos: for tuning in. We will catch you on Wednesday. - -45 -00:25:38,879 --> 00:25:52,380 -Scott Tolinski: Later, please. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax208.srt b/transcripts/Syntax208.srt deleted file mode 100644 index 98d9485ec..000000000 --- a/transcripts/Syntax208.srt +++ /dev/null @@ -1,508 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,820 --> 00:00:06,120 -the podcast with the tastiest web development treats out there, - -3 -00:00:06,149 --> 00:00:10,530 -strap yourself in and get ready to live ski and Wes Bos. - -4 -00:00:10,559 --> 00:00:56,250 -Wes Bos: Welcome to syntax. This is the 2019 year end show. It's definitely not a clip show. So we're not gonna do what everyone does they call it in, you know, you watch a show on TV and they call it in and just show you clips from all the other episodes No, we are going to talk to you about what were the most popular syntax episodes. What we've got planned for next year, some personal staff what went on with us this year, what we got done what we learned a whole bunch of interesting stuff like that. So buckle up and get ready. Today's episode is sponsored by Prismic, which is a headless CMS and fresh books, which is cloud accounting software talking about both of them partway through the episode. My name is Wes Bos, thanks for tuning in with me, as always, is Scott to Lynskey. How you doing today, Scott? Hey, - -5 -00:00:56,250 --> 00:01:34,710 -Scott Tolinski: I'm doing good, I'm doing good, I'm doing good. It's getting near that time near the end of the year, you know, it's like, like a thing where people get ready to do all their resolutions and get ready to be hyped up for the next year of their life. I've always tried to do the resolution thing on like a more monthly basis. But this year has been nice, as you probably know, and as we're going to talk about. So. Yeah, there's a lot to talk about this year. And uh, you know, I'm looking forward to this renewed sense of energy you get every sort of January. I'm looking forward to just moving on with 2020. We all know 2020 is going to be a better year than 2019. Because that's just how the positive mindset works. Cool. So - -6 -00:01:35,910 --> 00:01:36,540 -Wes Bos: there you go. - -7 -00:01:37,170 --> 00:01:39,480 -Scott Tolinski: That's all I got really, yeah. Nice little intro. - -8 -00:01:40,080 --> 00:01:53,910 -Wes Bos: Let's start with next year. So we plan to do a live episode of syntax in March at react a THON we did one last year. And it was absolutely hilarious. We did the live coding, where we did like the tag team coding we did. - -9 -00:01:55,170 --> 00:02:23,250 -Scott Tolinski: What else did we do? We did something like the asking the audience, we had the real or fake where we made up things and you had to guess whether or not they were in the library. The the master chef coding thing was so exquisitely hilarious. And it worked out so perfectly, that neither of us were on the same page for that. If you haven't watched it, find the clip on YouTube West posted on his YouTube, we can make a link available to that. And while you're at it, just hit that subscribe button so we can get West as YouTube numbers up. But uh, - -10 -00:02:23,280 --> 00:02:24,000 -Unknown: we, uh, - -11 -00:02:24,840 --> 00:02:57,150 -Scott Tolinski: we did this thing where we did this back and forth coding, and it just so turns out, we had very different ideas of what we should code. It's absolutely hilarious. You should check out the React athon website as well. I think it's, it's new, or it's live with some of the new speakers that are going to be there this year, like Ryan Florence and Cassidy Williams. It's gonna be really cool. They're just starting to start to talk about some of the speakers who are there next year you'll see Wess photo up there but you won't see mine just yet. Hopefully they're gonna put me up there soon. - -12 -00:02:57,270 --> 00:03:03,660 -Wes Bos: Well, they got a drop they get it when tickets sales start to Peter off then they drop the big bomb who dropped the - -13 -00:03:03,660 --> 00:03:05,280 -Scott Tolinski: ski, right? - -14 -00:03:05,310 --> 00:03:09,389 -Wes Bos: Yeah. And then then they sell it out. So they're they're waiting to drop it. - -15 -00:03:09,479 --> 00:03:10,800 -Unknown: Yeah, no, I understand. - -16 -00:03:11,490 --> 00:03:41,490 -Wes Bos: Yeah, Erectus on was an awesome conference. It definitely felt like a very, I don't know how to describe it felt like a very like community conference, like a lot of people that were at the conference were pretty, like advanced in the React that they were using, like hooks had been out for like a couple weeks at by the last year. And they had already been almost everybody there was already using them, which is pretty cool. Yeah, people were shouting out how to properly write the code that we were trying to write during our our - -17 -00:03:41,520 --> 00:03:58,050 -Scott Tolinski: math. Yeah, thing. No, that was a great event. I had a great time. And I'm looking forward to next year's in, in seeing what we can come up for more live show antics because both of our live shows have been absolutely, totally super fun. And I'm just excited to do more of those. - -18 -00:03:58,259 --> 00:04:58,110 -Wes Bos: Yeah. What else has begun? Well, this year, the Twitter syntax FM on Twitter has done really well. We've are almost at 30,000 followers, which is pretty significant, I think. And I think that just comes from us, constantly plugging it every single show and then also using it as a medium not for us to push out information that we make, but using it as a medium for the people who listen to this podcast to share tips and tricks and thoughts and opinions and whatever it is. And I've really liked. I think like we've sort of hit the sweet spot on that this year, with the Twitter account basically just retweeting other things because it's hard when you're just like listening to a podcast and you're probably screaming at the screaming at your iPod or car or whatever it is that you're listening to mean like know that you're wrong about that or there's there is a better package for that and giving everybody a voice which is the syntax FM Twitter account has worked out really well. So big fan of that I'm impressed. - -19 -00:04:58,470 --> 00:05:48,270 -Scott Tolinski: And that's really why we're working Doing everything is for everyone to learn, right? That's why we're here. And that's why we're, we're talking about this. So we rely on the joint knowledge of the community more than anything for people to share what they're working on, share what they know and improve the knowledge of everybody together. So if you're not on Twitter, or you're not following us on Twitter, get on that right now. Because we really like to share a lot of tasty treats there for not just us, but the the rest of the community. Yeah. But yeah, in the syntax community overall, is absolutely incredible. Can we just talk about how, you know, we, we have sponsors on the show, and it's obviously we use, they're the sponsors that we use on the show are products that we like, products that we use products that we know a lot about, we're not just pushing you Harry's razors, or whatever, Taco Bell, obviously, - -20 -00:05:48,810 --> 00:05:51,720 -Wes Bos: although I would take Taco Bell in a second if they were Yes. - -21 -00:05:52,950 --> 00:06:23,160 -Scott Tolinski: We're not just shoving this stuff on the user. Yeah. Taco Bell. Get at us Lacroix. Yeah, get at us, please. Um, but for the most part, the whole audience just does such an amazing job of letting our sponsors know where they heard about their things. And let me tell you, that just helps us do this show. so incredibly much, you're all amazing. If you're sitting at your desk, just start giving yourself a round of applause. And have everybody look at you in the office, just let him know that we will we want you we want to support you, you know, - -22 -00:06:23,670 --> 00:07:07,890 -Wes Bos: yeah, yeah. And we actually have sold out all the sponsors for next year. And there was a number of companies that wanted to sponsor but weren't like a really good fit, like it felt like it would have been like kind of forced first guy to have him on. And we're lucky enough to be able to say no to that. And, and just bring on companies that we are we're really excited about and we want to see grow and things like that. So I'm feeling like really good about that as well. Because like, when you're bringing money into something that is very community oriented, it sometimes gets a little achy. And I feel like really good about the the space where we're sitting at with being able to make money off of this thing and pay our bills and make it worth our time, but also not get to Sally and things like that. Yeah, it did. I - -23 -00:07:07,890 --> 00:07:43,560 -Scott Tolinski: mean, it's a thing I know, we both have grown up with like punk rock music. But to me, honestly, that sort of punk rock mindset, in a way has never really left me. And I've always like, been a huge fan of, you know, record labels and people who have done it all themselves. And if, you know, they're, they're really going for it without necessarily, quote unquote, selling out. So yeah, we do have advertisers on here, but again, they're companies that we know and love, and I would never feel comfortable, like really pushing something I didn't believe in anyways, especially in that medium just because of, you know, like I said, my background, and that is just how I've always viewed things. - -24 -00:07:43,920 --> 00:07:54,060 -Wes Bos: Yeah, you know, what I thought was really funny is that like the skateboarding culture is very much about the brands and very much about the sponsorship. And I was like, I was - -25 -00:07:54,060 --> 00:08:03,870 -Scott Tolinski: like watching. They're all small companies with the sponsorship isn't for like Nike, and whoever. But yeah, a lot of them are skate skater owned small companies. - -26 -00:08:04,290 --> 00:08:17,850 -Wes Bos: Totally. And I know a lot of the companies that we have are, obviously some of them are huge companies. But they've all started from, like actual developers trying to trying to solve a problem, like you look at Netlify or - -27 -00:08:17,910 --> 00:08:20,790 -Scott Tolinski: just any of them. Literally any of them. - -28 -00:08:21,179 --> 00:08:44,029 -Wes Bos: Yeah, all of them are have developers at that, like the all of the founders of the companies were developers, at some point, looking to solve something in the space, which is really cool. So I don't know, for skateboarding culture, I'm not necessarily going to start wearing around a Freshbooks t shirt. Actually, I do have a Freshbooks teacher. Maybe I will start wearing around a Freshbooks t shirt. - -29 -00:08:44,039 --> 00:08:47,070 -Scott Tolinski: But those books get me I don't get one. So I - -30 -00:08:48,450 --> 00:09:12,480 -Wes Bos: when we had our first baby Freshbooks sent me a blanket that has fresh button. This is before they even our sponsor, they are just a customer. And I don't know how they ate Freshbooks is like a Toronto company. So maybe they saw on Twitter, I forget how they, how they found out that I had a baby, but they sent me a blanket. And now I have this Freshbooks blanket that my daughter uses. That's awesome. - -31 -00:09:12,570 --> 00:09:18,029 -Scott Tolinski: That is awesome. Yeah, that's super cool. baby blankets, - -32 -00:09:18,029 --> 00:09:37,380 -Wes Bos: that would be really cool. Um, next, what we're going to do is we're going to count down the 10 most popular episodes in syntax, we'll go from the 10th most popular down to the most popular, and we'll started just talking about why we think it did well, and any other thoughts that we have. So you want to take number 10 number - -33 -00:09:37,399 --> 00:10:13,649 -Scott Tolinski: 10 number 10 in this episode makes sense that it would be on this list because it was the very first episode that we released in 2019. It's funny that it's number 10. You know, this was a look forward to 2019. I know I probably want to do another look forward episode. I don't know how you feel about that. But yeah, talking about like our personal lives and our businesses and all that stuff. And this is sort of a look back So maybe in the next episode we should do should be a look forward just like this one. And so give that episode a listen, if you want to see, just go back in time a little bit and see how our lives were on January 1 2019. - -34 -00:10:14,220 --> 00:10:19,159 -Wes Bos: Next one number nine. This was probably personally one of my favorite episodes I - -35 -00:10:19,200 --> 00:10:21,649 -Scott Tolinski: cuz I wasn't there is that why is that why you're saying? Oh, - -36 -00:10:21,649 --> 00:10:26,190 -Wes Bos: you I forgot that you weren't even part of that one. Yeah, maybe we should do that more often - -37 -00:10:26,220 --> 00:10:28,500 -Scott Tolinski: mega dis was negative? - -38 -00:10:28,669 --> 00:11:14,669 -Wes Bos: No. So it was number nine SPGs was Sarah Sweden. Probably butchered that again, but not as much as I butchered it in the actual episode. And this was just like a total eye opening episode. Just there's so much in the SVG world. And if you go to my beginner JavaScript course, I'm using this SVG mask. So you can use the SVG as a mask, the drips on the website are using SVG masks. And I had learned about that from having Sarah on the episode. It's just like, it's just action packed full hour of amazing stuff, you probably want to listen to that one a couple times over. Just make sure you delete the mp3 and then download it again, if you listen to it a second time, so keep those numbers up. - -39 -00:11:16,620 --> 00:11:51,330 -Scott Tolinski: Nice. All right. Number eight, how to build an API. Now this is one of our newer episodes. This one came in August 27. So this is probably the most, is it the most? Yes, the most recent episode, yeah, arrive on our list here, which shows that it was a very popular episode, it hasn't had the time to really grow as much as some of these. So how to build an API was a lot of fun. We talked about the different ways that API's are from rest, to graph qL, that sort of stuff, and talked a little bit about interacting and working with them. - -40 -00:11:51,809 --> 00:13:03,090 -Wes Bos: If then occation, things like that. That was a, those episodes are always my favorite. We can't do every episode. That's a huge explainer like that. Because there's certainly just I don't know that many things. But that was one that we have been working on for a while just sort of putting things in as we thought about it. And really happy about that one, because it's like, it's almost a tutorial. With that one, just understanding all of the the moving parts. And that's something that sometimes the tutorial doesn't necessarily teach you. Because the tutorials is more focused on the nuts and the bolts and the coding. But because of the podcasts, we can't tell you what to type. So it really just focuses on the ideas and everything like that. And I was even listening to a podcast, the Free Code Camp podcast. And they were saying like, one of the ways that they stay up to date is by listening to syntax. And I was like, that's exactly what I want. Because like, there's this other part of web development that is not writing code, but it is just understanding how things work, what things are what they do, just to get a bit of a headspace as to what things are. So I think that that's why that episode did so well. I bet that will be one of our most popular episodes ever. If we were to look back at it in a year. - -41 -00:13:03,570 --> 00:13:07,409 -Scott Tolinski: Totally. Yeah. Next is number seven. - -42 -00:13:09,690 --> 00:13:12,539 -Wes Bos: css the cool parts. Yeah, - -43 -00:13:12,539 --> 00:13:14,820 -Scott Tolinski: super cool. I love this, - -44 -00:13:15,090 --> 00:14:03,210 -Wes Bos: when this episode went into some of the neat stuff that you can do with CSS and surprisingly well supported things like clip path filters, background mixed blend mode, border images, using hex codes with alpha. So RGB a Oh, no, that's is that how Yeah, that's how it works. RGB ba Yeah. So using eight characters instead of six when you're doing hex codes, radial gradients, viewport units, CSS variables, new text decoration. Some of these stuff were like, I don't know. Like nobody is googling new updates, detect decoration, text decoration. But yeah, there is news. There's new stuff to text decoration. So learn about it. Yeah, that was a we should probably give the episode numbers here too. That was Episode 146. - -45 -00:14:03,810 --> 00:15:15,779 -Scott Tolinski: Yeah, this is this the cool parts was really one of my favorite episodes, because I'm using so many of these things right now with custom properties and all the new stuff in CSS, and I love it. So very much. I've always been a CSS head. And you know, this stuff just really is what I'm passionate about right now beyond just JavaScript and those kind of things. So the next episode, which is what number six in the list here, six most popular episode is episode number 130. The Vue JS show, Scott teaches Well, this one's not really surprised to me considering just about everybody was asking for the show for over a year. And Wes dragged his feet so hard that they left a permanent indentations in the floor of his office. So when we finally did it, it was after I had done my view course, I had done a course on the grid some so I had been spending a bunch of time in the Vue JS land, and I decided to talk about my understanding Have the interiors of view and how it's different from react in a syntax way and maybe give us a little bit of a knowledge on, you know what the differences are, what the what and why why people like it so much because it is such a popular framework nowadays. - -46 -00:15:16,469 --> 00:16:24,929 -Wes Bos: Next one we have the fifth most popular episode this year is what's new in web development, where we talked about the new promise methods, promise dot race, promise all settled promise that any lazy loading images, there's a new attribute on the image tag that is just lazy. And that will only request the resource once you've loaded once you've scrolled into view. Or once it's close enough to view I'm not sure what the I have to go back to that episode and look it up. css Houdini, we got to do an episode next year. Yeah. Once we actually build something with CSS Houdini, that's pretty cool sub grid. We did an entire episode on sub grid last year, did we? We did sub grid. We did it on January 14, so that one of the first episodes on 2019 was sub grid. And we said in that episode, it's about a year out and we caught some heat for that. Because a couple people said it's not a year out. And here we are almost a year later, and we don't have it just yet. No, I bet I bet it will. And pretty soon, - -47 -00:16:24,989 --> 00:16:36,049 -Scott Tolinski: actually, I think it did land in Firefox, the latest for it in it. I think it did. I don't We'll see. Up sub grid. I think I just read that headline in the latest version of Firefox. - -48 -00:16:36,719 --> 00:17:13,230 -Wes Bos: You're right Firefox 71 released December two. So it was 11 months from the time of recording that it got launched. And it looks like it's in Firefox 71, which is good. Everybody has fired off 71. That's the most stable and it is not in any other browsers not even behind flags. No at the moment. But once it hits in Chrome, every other browser runs on Chrome now. So we'll start to see I'm really excited to get that and I've got handfuls of little, even building my beginner jazz site. I've ran into two or three little things. I'm like, oh, give me some sub grid right now. - -49 -00:17:13,379 --> 00:17:18,360 -Scott Tolinski: You know what I want more than sub grid, why element queries? I have react, what - -50 -00:17:18,360 --> 00:17:19,710 -Unknown: the heck, what the heck - -51 -00:17:19,710 --> 00:17:38,060 -Scott Tolinski: I use, I use a JavaScript library for element queries. And it's like been giving me a lot of guff with my server side rendering, because it's like now you got to tell it to relook at the the sizes of everything on Mt and Reno rehydrating all that stuff is just no fun. So I really want element queries, please. - -52 -00:17:38,360 --> 00:17:42,180 -Wes Bos: Yeah. I don't even know what the where it's at right now. - -53 -00:17:42,560 --> 00:19:02,460 -Scott Tolinski: I don't know if it's anywhere. I mentioned it on Twitter. But yeah, no, no, no, it's it's it's not a lot of fun to do them as they are right now. But yeah, okay. So let's get into the next one, which is the the fourth most popular episode. And that's a boot camps at verse school verse self learning. This episode aired on March 13. And let me see what episode that was March 13. This is Episode 126. We talked about what we did, I went to college, West went to a university for business tech. So I went to school for music. We didn't necessarily take typical career paths of getting like a CS degree or necessarily a bootcamp. But we're both largely self taught web development. And we talked a little bit about the pros and cons of self teaching versus going to college versus taking a bootcamp from our perspective. So yeah, that was a really good episode. I knew that one was another one people had been asking for a lot. Yeah, I had a lot to say about that. And it's something that I've been thinking about with our kids, right now that our kids are alive. It's sort of like, well, when they when they're old enough to go to college, like, what is the landscape of going to school to do it? Like, would I go to college if I had to do it again? So these are all questions that I'm largely thinking about right now for myself. - -54 -00:19:02,729 --> 00:20:17,130 -Wes Bos: Yeah, I think we were really well placed to do that episode, because like, obviously, we're both self taught. We both went to higher education. And I have taught a number of different boot camps. I've taught hundreds of people in real life. And I've now seen them go on to, like some of them are. A lot of them are smarter than I am. You see this type of stuff that they're working on is pretty incredible. So go back and listen to that episode. 126. I'm pretty proud of that one. Yeah, me too. Next one we have here is the fundamentals. So something that we set off to do in our home a couple of months ago is to do a bunch of fundamentals episodes and sort of break down not to teach you the fundamentals. But to break down what are the fundamentals in we did one on HTML and CSS. We did one on JavaScript. We did one on server side and we did one on design. And the the fundamentals for CSS is number three. That's episode number 158. And we just broke broke down like what What are the different things that you need to learn? Because, like we always chant, learn the fundamentals. And like, don't just focus on the fundamentals in here, like a lot of people are like, well, what are they? Like? Do you have a list of things that I could focus on? And we made the list? So check it out. That is episode number 158. Yeah, those - -55 -00:20:17,130 --> 00:21:25,380 -Scott Tolinski: fundamentals episodes were all very well received. People seem to really, really like them. So check out all of the all of the episodes in that series. This next one arrived, February 20. And this one is absolutely no surprise to me. This is the second most popular episode of the year. It's Episode 120, Gatsby verse. Next j. s. I see people linked to this episode all the time. Whenever anybody's asking about what's the differences here? What are these platforms? What do they do for us? When would you use each one? That's such a huge question I see it asked on on Reddit all the time. And I'm so thankful that, you know, one of our viewers almost always post the link to that episode and says, this is a great explainer for why you would use each of them. And granted, it's changed a little bit in turn, maybe we should be doing like a 2020 version of Gatsby verse next week, because both the platforms have evolved quite a bit. Gatsby got themes next JS got API routes and static static building. So both of the platforms are evolving, and maybe we should do a follow up. Gatsby verse next to Electric Boogaloo. - -56 -00:21:25,770 --> 00:21:32,880 -Wes Bos: 2020 that's actually going to be a wicked search term. We should jump on Gatsby vs. Next. 2020 2020 - -57 -00:21:32,880 --> 00:21:33,960 -Scott Tolinski: don't steal it. Anybody. - -58 -00:21:34,770 --> 00:21:49,610 -Wes Bos: That's always the modifier. We gotta roll it out. All right, and the number one episode of 2019 it was actually released. what's what's the seventh month of the year? I always do this, - -59 -00:21:49,620 --> 00:21:54,060 -Scott Tolinski: too. I'm so glad that you don't know that. Because I don't know. It's It's July, - -60 -00:21:54,090 --> 00:21:54,810 -Wes Bos: July. - -61 -00:21:54,810 --> 00:22:07,590 -Scott Tolinski: Yeah, I always go to one that I know. Okay, so I know may is five. So then I can count up a couple and I can't get there. People who are actually normal are probably like, come on. You don't know, though, the month just don't - -62 -00:22:07,650 --> 00:23:02,700 -Wes Bos: do it. Anyways, uh, that episode is episode number 162. And it's the fundamentals of JavaScript. And that this one is way ahead, almost almost 10,000 more listens on that episode, then number two, which is incredible. And I'm really proud of this episode as well, because we basically just broke it down. I was luckily lucky enough to spend the entire year working on a layout for a beginner JavaScript course. So we could lend a lot of that to the episode. And just breaking down the different parts of JavaScript is what you should focus on. What are the fundamentals so very proud of that episode as well. I'm quite surprised that even though it was released, what five months ago? It's by far the most popular episodes that one will probably go down as one of the top episodes ever, - -63 -00:23:02,700 --> 00:23:03,780 -Unknown: ever. - -64 -00:23:03,780 --> 00:23:07,050 -Wes Bos: We should look real quick. What is our most popular episode ever? - -65 -00:23:07,050 --> 00:23:08,070 -Scott Tolinski: Look, - -66 -00:23:08,400 --> 00:23:09,240 -Wes Bos: let me look it up. - -67 -00:23:09,240 --> 00:23:18,030 -Scott Tolinski: Most Popular episode ever is react hooks. That true. It doesn't include this Spotify listens but - -68 -00:23:18,719 --> 00:23:27,330 -Wes Bos: yeah, most popular episode ever is react hooks. Which ship fundamentals of j s is just like 2000 listens on now. - -69 -00:23:27,330 --> 00:23:27,930 -Unknown: Wow. - -70 -00:23:28,050 --> 00:23:40,740 -Wes Bos: So yeah, amazing that fundamentals one is gonna is gonna go fire man props who sponsored that one? They're lucky funnels of JavaScript Log Rocket and Freshbooks. Greg got a deal there. - -71 -00:23:41,400 --> 00:23:41,970 -Scott Tolinski: Yeah. - -72 -00:23:43,170 --> 00:23:44,040 -Wes Bos: Oh, that's good. So - -73 -00:23:44,040 --> 00:25:15,690 -Scott Tolinski: speaking of Log Rocket, and Freshbooks, one of our sponsors today is Freshbooks. So they're going to help us with especially right now year, the end of the year is such a huge time for bookkeeping, services and software. And this is where companies like Freshbooks really excel because they make a lot of this stuff. Yeah, I don't know if you've ever used QuickBooks. But I opened up QuickBooks for the first time when I was like 20 years old. And I was like, wow, this application is hard to use. And so so many of these bookkeeping applications that are modern, like fresh books have come out now trying to solve that problem and just make things easier. It's the absolute best kind of software for this if you're doing any sort of freelance business where you need to pay people track invoices, that is something that I hate doing is keeping track of my invoices. And I love it when my software lets me know that, hey, this person paid hasn't paid here. Do you want to resend this? Do you want to give them a little little slight little nudge? It says hey, do you want to you want to pay for this? So check out fresh books. They're a longtime sponsor here at syntax now, you know, it's the end of the year. I want to thank all of our sponsors. I want to thank Freshbooks but specifically they've been one of our first sponsors and been with us for a long time so head on over to a fresh freshbooks.com forward slash syntax and put syntax in the How did you hear about a section? We know you love to do that. So please head on over to freshbooks.com forward slash syntax coupon code or let them know that you heard about us syntax. - -74 -00:25:16,140 --> 00:25:36,450 -Wes Bos: Awesome. Alright, so next up, we're gonna talk about personal stuff. So what did 2019 look like? Like both professionally, but also personally, I think that those two things sort of meld each other together, just because of this podcast. We talk a lot about our lives, we also talk a lot about what we're working on. So you want to give us a rundown of 2019 there, Scott? Yeah, let - -75 -00:25:36,450 --> 00:29:09,690 -Scott Tolinski: me just start off and say 2019 was absolutely bananas. It was absolutely bananas. So we have a two year old and Landon, he is amazing, right. But I wouldn't necessarily call myself the most experienced parent at this point, because we had one child, and he was just a great, great little baby. But there's two of us work, you know, being able to watch him. So our daughter, Brooklyn arrived in May, and it was a, it was a huge event. For me. It was huge. Because now all of a sudden, our family is where we want it to be. I don't think we're gonna have any more kids. And we're just very happy to be where we are. But at the same time, you don't sleep, you are constantly. Now with two kids, it's so much harder to get that personal time that my wife and I both like whether that's in the gym, we're doing coding outside of work, or for me just simply running my business. So everything had to become more flexible, as it became more chaotic. And now Brooklyn is absolutely amazing. She's an incredible baby. I love her so very much. But it has made life an absolute chaos fest. It's just been just been bananas. So a lot of this year has been a complete blur to me, I don't really even know where the time went because most of the time was spent chasing kids around or getting business going. But I somehow managed to produce and release 12 courses on level up tutorials.com. And that was no small feat, it was really difficult. And there were some months where I was very concerned about being able to actually get the courses out. So for those of you who don't know, level up tutorials is kind of like a magazine subscription, where you get a new tutorial series each month. It's like 20 videos long. But I managed to do a couple courses on TypeScript. A couple of courses on Gatsby animating react, React Native, we had a couple of guest authors for the first time, Travis Nielsen and Spencer, Carly, and soon to be James quick people that I really love their content. So it was just absolutely huge year for me in terms of growth. I launched this new, newish version of the level of tutorial site, a lot of changes in the codebase. My gosh, just like looking back and thinking about how much effort went into this. It's just unbelievable. The huge production value changes, I got a new camera new lighting system, I completely redid my office and to be like a set in that has been huge for me what else the codebase. and level up tutorials is completely different ending this year. This version isn't released yet, but it's like 99% done. The codebase is now 100% TypeScript, whether that's the API is TypeScript. The front end is now TSX. And TypeScript. The framework is now using next j s instead of Meteor. That's a huge change that's going to go up and one that I am being very careful about finishing. It's now using mongoose instead of Meteor, it uses a new account system. And we now are going to have server side rendering for all logged in users and all that amazing stuff that next gives you I just can't believe how far the site has progressed, how many things I was able to put out, while being in a complete daze of not sleeping, and all that stuff. So that was my year. And it was it was absolutely wild and incredible. And somehow we managed to release two episodes of syntax every single week on top of that, so - -76 -00:29:09,750 --> 00:29:12,630 -Wes Bos: it's true. I don't think we missed one. No, - -77 -00:29:12,660 --> 00:29:18,150 -Scott Tolinski: no, no, we don't miss was call us. Who's the sharpshooter? I don't know. - -78 -00:29:18,330 --> 00:30:00,750 -Wes Bos: I don't know anything Coby shooting Colby Colby. Yeah, that's amazing. Actually, I'm, that's amazing that we have capped out two episodes every single week. And I don't think anything else in my whole life has been that consistent, other than putting out this podcast, and it's totally just because like, I have to do it because God's showing up. And we sold the sponsorship spots, and Scott has to do because I'm showing up you know, and like we just sort of keep each other accountable for this type of thing. So it also hasn't felt like too much of a slog either like some days where like, oh man like it's Monday already with the record again. But but generally it's just been like, Oh, this is kind of fun to do. I always like leave recording this podcast been like That was a good one. I - -79 -00:30:00,750 --> 00:30:14,400 -Scott Tolinski: enjoyed that. Oh, totally. The caffeine has been something that's propelled me to do each episode. I like to think I would like to thank my lovely wife, Courtney, my amazing co host, Wes and caffeine. - -80 -00:30:14,400 --> 00:30:15,000 -Unknown: Thank you. - -81 -00:30:16,109 --> 00:30:17,010 -Scott Tolinski: pushing me through. - -82 -00:30:17,609 --> 00:31:04,980 -Wes Bos: All right, 2019. For me, 2019 was similar to Scott it was, it was a really tough year for me just in terms of feeling like I was not getting as much done as I had hoped to get done in the year. And feeling like I wasn't as productive as possible. Because I think like, every year before this, I've always had big leaps and bounds whether it's huge increase in numbers in my email list or launching new courses, something like that, in 2019 was really hard for a number of reasons. One of them was we had a new baby in June as well. And that was amazing. We're really excited about that. But that paired with one of my daughters who does not sleep Hmm, is just absolutely I was just just like a zombie for a good chunk of the year. - -83 -00:31:05,069 --> 00:31:20,430 -Scott Tolinski: And we talked about how not sleeping is just absolutely devastating to every Yeah, you get your your temper is a little shorter. You don't your energy levels are down your intellect is down. not sleeping is absolutely a huge killer. - -84 -00:31:20,669 --> 00:31:50,460 -Wes Bos: Yeah, like I had a good sleep last night. I went to the gym this morning. And I feel like on it right now, like, just ready to take on the world. And huge to do list. I'm going to sleep through it. But a lot of the days were spent sort of half capacity, which is really frustrating. And, like I feel I feel for people who have it worse than I do. Because I certainly have it very comfy work from home, I work for myself. I don't have to commute things like that, like I certainly have it really good. Imagine being a single parent to - -85 -00:31:50,489 --> 00:31:56,940 -Scott Tolinski: Yeah, I thought about that. That would be so incredibly hard shout out to the single parents who be PBL are amazing. - -86 -00:31:57,269 --> 00:32:13,470 -Wes Bos: I think one of the episodes I want to do next year is like talk to a mother who has learned to code after having kids because I certainly heard from a few people and like yes, do that. That's that's that's really tough. So we're gonna bring someone on in the new year to do that, that shorter sort of show. - -87 -00:32:13,799 --> 00:32:20,070 -Scott Tolinski: If that sounds like you, and you want to even show on the show and chat with us. Oh, you have people in mind? - -88 -00:32:20,099 --> 00:33:45,810 -Wes Bos: Yeah, well, I've got a couple of people. But if you sounds like you as well, like maybe even having a couple of people on to, to share how they did it would be interesting. So get in there. Yeah. So what else we had a new baby in June, which is amazing. Personally, we bought a cottage, which was a long term goal of ours, we intentionally bought like moved to a cheaper city, so that we could divert some of our housing funds to buying a cottage just because we work for ourselves, I want to be able to go up there in the summer and things like that. And that was a huge, a huge goal for me. And we hit it and we're so happy about it. And as we sort of lined up with the baby, so I took a three month maternity leave, which was amazing. I always see a lot of these people who work for like Facebook and whatever taking paternity leave. And we don't get that as self employed people because because of we choose not to pay into employment insurance. And because of that, we don't get maternity leave, we don't get paternity leave, we don't get top up or anything like that. So it was kind of cool to be able to just say, you know what, taking three months off, so like I cut my, I cut a third or sorry, a fourth of my year out just by doing that. And I don't regret that at all. I'm very glad I did that I got to spend a whole bunch of time with my kids in the summer, we made some amazing memories. And that's probably one of the things I'm most proud of this year as being able to just disconnect like, go to my GitHub and look at my GitHub, you can clearly see where I took time off. - -89 -00:33:46,019 --> 00:34:00,110 -Scott Tolinski: That's a my biggest thing of FOMO is your I guess this is an iPhone mine. Oh, no. But you're you're seeing your college. I'm so Tgn over that cottage. That's Oh, yeah. Amazing. And you Congratulations. - -90 -00:34:00,299 --> 00:36:40,730 -Wes Bos: That's amazing. Thank you. This one company on a shout them out. Get dev dev mugs. It's dev mugs.com. They sent me my GitHub history on a mug, which is cool. I kind of want to get another one that shows my gap. And just like like, like, hold on to that and be like, yeah, that was cool. Because like, we're not gonna have any more kids. That was my one chance. And I'm really glad that I did it. What else here, I made the biggest course I've ever made in my life this year, which was my beginner JavaScript course. And this is by far the hardest course I've ever had to make. Because teaching beginner stuff, at least I think is much harder than intermediate or advanced stuff. Because Yeah, you can't assume anything. You have to start from the ground up. And taking something which is not linear, like learning to code is you do a little bit here, you learn a bit here you do, of course here you here sort of going all over the place and trying to convert that into a linear course where you try to build upon what you've learned, but sometimes you need to look ahead Things you don't necessarily know. So just basically laying that thing out and investigating what it is that you should teach a beginner and making it fun and making all these exercises and styling them. And that was a slog. It was it was really hard. There's a lot of times where I didn't it felt like homework to me. And that's when I say I felt like homework. I mean, there's that feeling in my life where it's Sunday night. And I don't want to do this. Yeah, yeah. And I very rarely get that feeling in my career. We're talking to my wife. And we're like, we both love Mondays. I love Mondays, I love Mondays. Yeah. And sometimes I was just like, man, I got like six more months of this thing. And I want it to be good. So I'm spending a lot of time on it. And luckily, I could just keep chipping away, keep chipping away, keep building stuff, investigating how to best teach this stuff, talking to a lot of people who are struggling with it. And the course is massive, like I spent, I spent the like my earliest notes date back like three years on this thing. But basically the entire year, every single day, I just sat down and worked on this thing. And I finally was able to launch it a couple weeks ago. And it's done really well. And now I look back on it and go like, Oh, that was great. I'm so glad I spent all that time on it. But during it, it was like, Oh, this is this is hard. Like I really committed to this, this really big thing. But now that it's out, I'm really happy. I think it's going to be like one of these fundamental building blocks of learning JavaScript. So that was a huge milestone for me this year. And now I'm back, we're really recording my advanced react course right now. And I'm, I'm slinging graph QL. And like, that's really fun to me to be able to get back into the more advanced stuff as well, - -91 -00:36:41,010 --> 00:36:41,580 -Scott Tolinski: totally. - -92 -00:36:41,580 --> 00:37:57,000 -Wes Bos: What else a lot of this year was spent on I was working with the developer Louis, I know he listens to this podcast, rewriting a lot of my course platform to next .js unfortunately, is not launched yet, just because I haven't been able to give it my attention. And I think that's my like biggest downfall of this year is that my attention was kind of sharted meaning that like or, like sharded sharted. Like in shards? Yes, I didn't short. It was not sharded. But basically, there's like a lot of things that need my attention. And I'm very good at not caring about a lot of other stuff. Because I know I have this one task at hand. And I don't let busy work get the best of me, which is a good quality to have. But also, sometimes I need to spend an entire day doing email or accounting or looking at the other areas that I've sort of been neglecting so early next year, and we'll get this thing launched. I'm really excited. It's amazing. There's a lot of like little bugs on the course platform that this will fix as well. So that was my 2019 a lot of ups and downs. But overall, I look back at it. And I say wow, I'm proud of of what I had accomplished. - -93 -00:37:57,359 --> 00:38:01,530 -Scott Tolinski: Yeah, I am very proud of of what I've accomplished this year. And - -94 -00:38:02,249 --> 00:38:05,070 -Wes Bos: you did 12 more courses or 11 more courses than I did. Oh - -95 -00:38:05,070 --> 00:38:17,010 -Scott Tolinski: my gosh, it was very difficult. Yeah, it was very difficult. Cool. So do you want to get into the next sponsor, which is one of the things that I really want to dive into more this next year, which is Prismic. - -96 -00:38:17,249 --> 00:39:15,390 -Wes Bos: Yes. So Prismic is a headless CMS that makes it easy to build website pages as a set of components, you break your pages into sections of components, and then using react view or whatever you like, you make corresponding slices in Prismic. Start building the dynamically. So take your website, slice it up into different sections, create your types on the Prismic back end, and then pull in that data with a graph qL API into Prismic. They've got lots of examples with next and Knox and you you get the point all of those front end frameworks, you want to check it out@prismic.io forward slash syntax. And again, this is an absolutely hilarious landing page to go. There's animated GIFs of Scott Nye, there's team West and team Scott, you just need to check it out. prismic.io forward slash syntax and try it out. Maybe around the holidays in the new year. You want to build a website. try this out. Yeah, - -97 -00:39:15,390 --> 00:39:56,130 -Scott Tolinski: try it out. Cool. So let's get into the last section of this is stuff that we've learned this year. And let me tell you, I have learned a ton of stuff turns out when you do 12 courses a lot. And this is this has been great for me. What are the things I learned that I actually don't have on this list is I learned to be a better speaker. I've done now a few talks. I hadn't done that many talks in the past, but I've done a few talks and this most recent talk I did a develop Denver, I felt like I was just really comfortable for the very first time and just felt very, very good with it. So that was a skill that I picked up this year is to just feel it feeling more confident in my speaking. I learned a lot. - -98 -00:39:56,190 --> 00:40:00,710 -Wes Bos: Do you think that's because you do the podcast podcast. I can't even say The - -99 -00:40:00,710 --> 00:40:06,330 -Scott Tolinski: well the podcast for me has been. No, I'm used to talking in front of a microphone Anyways, this - -100 -00:40:06,440 --> 00:40:07,320 -Unknown: point like that. Oh, yeah, thank - -101 -00:40:07,320 --> 00:40:35,210 -Scott Tolinski: you. No, I never I hated doing, like stand up book reports or whatever. In school I hated doing that stuff. I really hated speaking in front of crowds. And to be honest, I think I got, I think it just by pushing myself into the deep end and making myself do it, I think it was just like, remove the scary element of it for me, and is more like, I have these things of value. And people want to hear me speak them. So there's no reason to be nervous about it. And to be honest, I don't know. I think it was just a practice thing. - -102 -00:40:35,420 --> 00:41:08,940 -Wes Bos: Yeah, that's good. I find that as well. Like I've been, I've been doing speaking engagements for probably almost 10 years now. And I always like I'm in the, in my hotel room trying to practice because it's not very good. And then once I get up there just banging, right, like doing so well, I just get such energy from the crowd. And I'm so happy to be in a place like that. Because I remember certainly, like, even at my wedding, being like a little bit afraid to do like the, like the speech and that and now everybody asked me to emcee their wedding. - -103 -00:41:09,920 --> 00:42:32,460 -Scott Tolinski: Oh my god. Yeah, I did. Like I did. My brothers. You know, my brother's wedding. I you know, did the best man speech. And yeah, I was very, very nervous for that. I think I would be much better at that. If I were to do it again. Yeah, so Okay, I learned a tech wise, I learned a lot of TypeScript. I did lots of TypeScript. And I taught two courses on TypeScript, one with react and one, just straight up TypeScript. But more importantly, I got my hands really dirty. And I rewrote my entire application in TypeScript. There's so many dang files. My whole API is in TypeScript. Now. My whole front end is react and TypeScript. And let me tell you, I absolutely love it. I think there was a episode maybe like midway through the year, where I was like, I don't know, we'll see. I'm not totally you know, sold on any of them. But I am sold on it. I like it a lot. It works really well, it it finds all the bugs for me. And it makes me feel good. So next thing I learned was I learned how to be better at debugging, Wes taught me about the debugger in the browser, but I also learned about the using the debugger in Node. More importantly, I got better at every single tab in the dev tools to solve my issues. And I really feel like I'm at my, my very best in terms of being able to solve problems. What's something that you made, let's do a little bit of back and forth instead of me rattling all these off? - -104 -00:42:32,480 --> 00:43:28,770 -Wes Bos: Yeah, I got really good at the just vanilla JavaScript Dom API. Because of building this beginner JavaScript course I my idea was don't use any frameworks or anything like that, just JavaScript. And I didn't want to just like console log things all day long. I want to actually build interaction and learn about events and event delegation and all those things. And in order to do that, we need to actually build things. So I got really good at the vanilla JavaScript Dom API, I was already pretty good at it because of my JavaScript 30 course. But I feel like I can pretty much build anything. And I had all these tweet tips over the year of things that I learned while doing it. And I don't know, I just feel like I'm I'm really on it with that stuff. And it's not all that useful to me in my production applications, because I mostly use like a react in my production application. But it it does teach me just to be a better JavaScript developer in general. Yeah, you're - -105 -00:43:28,770 --> 00:43:34,610 -Scott Tolinski: not gonna be relying on the the framework, quote, unquote, as much totally whatever framework that is, - -106 -00:43:34,770 --> 00:44:07,980 -Wes Bos: yeah. What else I did react hooks and suspense. Yeah, I learned a lot about both of those things. Even though suspense is still not out. It might not ever be out, it probably will be at some point. But I totally shifting the thinking of how to approach your react application, more so with react hooks. And then the suspense stuff will be pretty interesting as well, when it comes to loading data and loader screens, things like that. I'm excited for that to come out. I'm really excited for that to come out because it's going to give me another excuse to refactor my code base. Now, I - -107 -00:44:07,980 --> 00:44:40,230 -Scott Tolinski: really love react hooks and I, I learned so much about react hooks this year, rewrote nearly all of my application to function based components, there's still a couple that I haven't. But in the process of it, you learn about, you know, the benefits of using hooks and how they can make your code cleaner. I wrote so many custom hooks, and I absolutely love to use them. There's so many things that have gotten easier for me by abstracting it out into a hook and being able to push it somewhere else. So that's something that I really spent a lot of time on this year with react hooks as well. - -108 -00:44:40,440 --> 00:45:05,940 -Wes Bos: Um, other things I learned I finally learned about the audio visualization API or not, basically there's a huge Audio API in the browser. And I've always wanted to make really, really for the the syntax website. I wanted to make one of those like dancing bars based on the frequency and time waves and I've never there's like two problems. First of all, I didn't understand the audio Audio API. And second of all, I don't understand how audio works. - -109 -00:45:07,740 --> 00:45:11,220 -Scott Tolinski: You could ask your your buddy who went to school for audio engineering, - -110 -00:45:11,310 --> 00:45:38,490 -Wes Bos: yeah, I should have. But I learned enough about both of those things much better at the JavaScript part than actually understanding the audio. But I certainly understood frequency and time waves. And one of the things we build in my beginner JavaScript course, is this really cool visualization. And that's something I've been wanting to do for years, I probably tried, like six times over the past years, and finally got it and where I understand every line of code. - -111 -00:45:41,100 --> 00:47:02,250 -Scott Tolinski: One thing that I really spend some time on was felt, especially towards the end of the year, when spelt three dropped. I really like it. I'm not using it for anything important or anything, but the amount of code and you know, typing, it saves us really great. For the most part, I found everything to just work in terms of examples and documentation. Let me tell you, spelt is the gold standard, like react really needs to learn from this. So it is you because they have this huge examples page, where it just shows you how to do basically all of the stuff that you would want to do. But since Veldt is a little bit more, I want to say opinionated than react because react just sort of like, Well, you know, there is no react way to do you know, let's say drag and drop, or animations or whatever, you will use these libraries. So you have to go somewhere else, but was felt in the examples. It shows you all of that stuff, and more. So okay, here's how you work with props, here's how you work. And they're all editable, essentially examples that run live in the browser. And if you want to learn animations, or spring based animations, hey, there's an example. And here's the spilt way to do it, because Phil has a package. So because of that, it's a little bit more opinionated, and it's so easy to learn, so easy to look at a huge, huge fan, I'll probably be doing more svelte in 2020. - -112 -00:47:02,640 --> 00:48:46,230 -Wes Bos: Another thing I looked into a lot is some upcoming API's around shape detection. So if you want to be able to do things like face detection, barcode detection, whether it's a QR code or, or just something on the side of a package, if you want to look up nutrition information, and text detection, there's these new API's that are coming to the browser surrounding that. And I think they're pretty cool. Fortunately, they stopped working. So I couldn't include them in my course. But hopefully, once they are up and running all I'll add a video on them. Other things I've been really looking into this year are just like headless CMS is. So that's obviously a very popular thing right now if a couple of them sponsor this podcast. So I've just been trying them out. And one, one dream I have is I want to make a GitHub repo that shows how to use all of these different headless CMS is with like Gatsby or something like that, right. And like that would be a really cool because you could have like, I have some some notes written somewhere where like, create three different data types relate two of them, like one to many, and then many to one relationship, and then just have the ability to just to pull in this data route from page to page, fetch the data and display it on the page, like very simple, but very good example of showing how to use all these different API. So I personally tried out Prismic Sanity, WordPress with the graph qL API, Keystone j s Hasura, Prisma. Obviously, Prisma. Two, I've had some, it's not out yet, but I've had some calls with them. Just kind of looking at that. So the headless CMS space is certainly one thing that is going to be on my mind in coming up in the 2020 as well. - -113 -00:48:46,410 --> 00:50:21,150 -Scott Tolinski: Yeah, absolutely. There's just so many good ones out there. And this is the space that we all want to watch for 2020. And could really, really changed a lot of people's workflows. The last one for me is I learned just a lot about not necessarily JavaScript itself, but how to write good JavaScript, how to write good code, my programming skills in general got better. I had a problem in the past where I, you know, when I'm developing things, something comes to mind, you need to name something, I would just pick something on the spot, things wouldn't be necessarily organized in the right way. And this year, I learned so much about organizing, naming, making things very clear writing better comments, writing better organized and looking code when to abstract things and when abstracting is going to cause you trouble. And I learned it all kind of the hard way by experiencing troubles in my code. And I still find things I just found a I found a variable yesterday in my code that was like, Man, what was it was so it was like the visibility set or something. And I'm like, No, that's a Boolean. It's a true or false it needs to be is is whatever this is modal open. This whole system and I saw this one, and it made me really upset when I saw it. So I'm still finding these things in my code to improve. And I think overall, I'm just writing better code at the end of this year. And I guess you say that every year, as long as you're progressing, you look at your code you wrote last year, and you absolutely hate it. And that's a sign of growth in your programming. So I guess it's where I'm at. - -114 -00:50:21,450 --> 00:50:35,220 -Wes Bos: Yeah, I read to you every year. I like it's funny. The better you get a programming, the more you realize how awful you were before, like five years ago, I thought it was pretty good at JavaScript. And now, now I look back at it and be like, Oh, man, I was I was awful. - -115 -00:50:36,120 --> 00:50:50,850 -Scott Tolinski: Really, like I want to like put myself in my 2011 shoes doing the JavaScript I know now. And I think about like all the things that we hired and like Freelancer to do that, like are just so simple in my brain now, but at the time seemed like they were impossible. - -116 -00:50:51,149 --> 00:51:51,300 -Wes Bos: Mm hmm. I'd certainly learned a lot about the nitty gritty of JavaScript the past year just doing research for this thing like nothing teaches you to get really good at something then trying to teach it to other people. So absolutely. closures and hoisting and objects and the this keyword and the new keyword, all of the ins and outs and all of the little edge cases of how these things work. I feel like I have a really good a good handle on that stuff. Just because I've had to record a bunch of videos on it. I wanted to make sure I was dead set on understanding it before I went forward and taught it. So that is 2019 a year in review filed definitely not a clip shows a good year hard year for both of us. But looking forward to 2021 to thank everybody for tuning in and listening to this podcast. It's been a hoot we did well over 100 episodes this year of this podcast, you may feel like one of our best friends because we talk to you for a couple hours a week every every week. - -117 -00:51:51,450 --> 00:53:28,920 -Scott Tolinski: I hope so. I feel like I'm a pretty good friend. So yeah, be be friends with us because that's cool. Um, yeah, so this is the hardest show if this is your first episode, if your first episode then you might be a little bit confused about the show. But if this is your first episode, we do sick pics at the end stuff that we like it can be really anything. I have another podcast people loving my podcast pics. I you know, I get a lot of comments about how people love these. They're sort of like, I don't know, shady people podcast. There's like swindle and then darknet diaries and all these ones. So this is a podcast I've actually had as a sick pick before. But here's why I'm sick picking and again, the season two of this podcast just launched and I had actually unsubscribed since I thought it was a one off thing. No, this podcast is back. It's the dream. The dream was all about multi level marketing schemes for the first is sort of like here's how these companies get Jay. Here's their influence and here's how they're terrible. Well the dream is back with Season Two focusing on the wellness industry. Instead of multi level marketing. They're focusing on crap you know, just supplements that don't do anything vitamins, probiotics, there's gonna be a whole episode. The first episode was on essential oils. Let me tell you, I love this podcast. And I'm so glad they're taking on this industry because it's an industry that I feel like I have a little bit of knowledge on I you know, I work out and I do supplements and stuff like that. So I'm very interested in the season and I'm excited to have them debunk a bunch of stuff that I have thought to be true. Wow, - -118 -00:53:29,010 --> 00:53:44,070 -Wes Bos: I had unsubscribed from that one too, because I thought it was over. And I just I think of all the time how much I love that podcast. so so good. Just just subscribed. Good. Yeah, I'm in a sick pic. Synology diskstation dS 918 Plus, - -119 -00:53:44,100 --> 00:53:45,660 -Scott Tolinski: I got one of those. Yeah, man, I - -120 -00:53:45,959 --> 00:55:26,580 -Wes Bos: for the longest time, I've been just using these little passport drives to backup my stuff. And then I've been mirroring it to backblaze b two. And they just got sick of doing it because it just takes so freakin long. Like I wanted to delete one of my old courses from my laptop, but I won't do it until I have two copies somewhere else right and I need one on my hard drive. And the neat one uploaded and my internet upload is so brutally slow that it takes like, I don't know, 200 gig course takes like a day or two to upload. And like I can't close my laptop. And so I finally buckled down and got the diskstation it put 16 terabytes in the sucker and I set it up with raid. So if one of the drives dies, then you could just swap it out and put a new one in. And it's amazing like this. This thing is great. Like I have these different folders on it. And I can just drag all my old courses onto this thing. It's fast as heck because I'm on a wired gigabit connection. Yeah, so it takes like a couple minutes to move over 200 gig course. And then over the next couple days it will upload it automatically to backblaze for me, so it'll duplicate that on up for me and that's amazing. And then I'm also running like Plex and MB and some auto downloading software. Where and we'll do a whole episode on like, what our backup strategies are. But, man, I can't believe how awesome this thing is like it. It all just works. Like I had some trouble with the backblaze where it wasn't backing everything up, but I just restarted it fresh and it seems to be working perfectly fine. So super cool that Synology diskstation dS 918 I know they're smaller ones. - -121 -00:55:26,790 --> 00:55:33,060 -Scott Tolinski: What do you use for the backups on that you use time machine or what do you use to do the automatic backups - -122 -00:55:33,630 --> 00:55:54,690 -Wes Bos: I don't have automatic so what I'm using it as it's like a it's like a cold storage where if I'm done with a course I drag it off you can use it as a time machine. But in my experience Time Machine over a network has never been reliable. It's always like worked for a month or two and then it gives you some weird error time machine in general is not very good piece of software but - -123 -00:55:54,990 --> 00:56:01,770 -Scott Tolinski: that's why I was wondering because I was that I have a time machine on my Synology but I don't like it and I was looking to maybe do something else. - -124 -00:56:02,040 --> 00:56:35,280 -Wes Bos: Yeah, instead of that I've just been using like one of these $50 passport two terabyte drives. And that works really well for me and then the the benefit of that is when I want to if I need to restore I just put the drive into another computer and and restart it what we should do people have been asking if we can do a show on our backup strategies. And I also have been doing a whole bunch of networking equipment recently as well. So we'll we'll have to plan those for the new year. Sounds good. All right, thanks so much for tuning in. We just the last episode of there - -125 -00:56:35,280 --> 00:56:48,720 -Scott Tolinski: we got one more next one the next case or hasty will be but all right, this is the last tasty or tape that my arm getting messed up with these namings. This is last tasty of the year. So I hope it was in fact tasty - -126 -00:56:49,410 --> 00:56:50,850 -Unknown: face, please - -127 -00:56:52,740 --> 00:57:02,490 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax209.srt b/transcripts/Syntax209.srt deleted file mode 100644 index 870570450..000000000 --- a/transcripts/Syntax209.srt +++ /dev/null @@ -1,220 +0,0 @@ -1 -00:00:00,359 --> 00:00:07,590 -Unknown: Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node - -2 -00:00:07,590 --> 00:00:08,340 -module BBQ - -3 -00:00:08,340 --> 00:00:21,300 -Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott - -4 -00:00:23,610 --> 00:00:24,450 -Tolinksi ski. - -5 -00:00:27,690 --> 00:00:56,100 -Scott Tolinski: Welcome to syntax on this Monday tasty treat. We're going to be talking about Keystone dot j. s. And let me tell you something I know very little about keystone.js. But Wes has been using it for a little bit and I'm going to be asking him some questions. And hopefully I'm going to learn along with you about Keystone j. s. My name is Scott Tolinksi. I'm a developer from Denver, Colorado with me, as always is the Wes Bos. - -6 -00:00:56,150 --> 00:00:57,180 -Wes Bos: Sup, everybody? - -7 -00:00:57,180 --> 00:00:59,220 -Scott Tolinski: So how's it going? - -8 -00:00:59,549 --> 00:01:12,090 -Wes Bos: It's going good. It's the last episode of 2019, which it's currently December 10. We're recording this so not quite, but starting to look forward to Christmas holidays and getting stoked for that. Yeah, - -9 -00:01:12,090 --> 00:01:43,410 -Scott Tolinski: I'm psyched. I'm psyched for everything here getting the end of the year juice going. And this is one of those topics that I think is going to make me really excited. So Keystone j s, this episode is sponsored by one of our longtime sponsors, very fitting to end the year out with Freshbooks. And Freshbooks is going to be the service that you use to keep track of all of your invoices, payments, and all that stuff after you just built the site of your clients dreams with Keystone j s. So do you want to talk a little bit more about Freshbooks? Was - -10 -00:01:43,740 --> 00:04:23,760 -Wes Bos: Yes, Freshbooks is cloud accounting software, I'm going to be using it today actually what every now and then I have what is called the money day where I go through my Freshbooks and go through all unpaid invoices and see have they been paid because sometimes when I get a check in the mail, I don't, I don't mark it as paid or whatever. Sometimes they haven't been paid, you got to chase those people. Or you can use the Freshbooks to auto send those things. And then I also am going to be wrapping up my 2019 expenses pretty soon make sure I got all of those logged in as well. And just make sure that that is all in good shape for going forward. And it's always a very quick thing for me to do that because of Freshbooks UI is very intuitive. Any problems that have one year I inputted a bunch of expenses as or sorry, HST, I imported it as lowercase HST. And some of them I input it as uppercase HST. And for some reason, they were separate. And I was like, email Freshbooks was like, hey, like this is showing me two different types of tax. And like an hour later, they had run a script that updated I'm sure that's fixed by now. But their support is fantastic for that kind of thing. So check it out freshbooks.com forward slash syntax for a 30 day unrestricted free trial and use syntax, and how did you hear about a section that will keep them sponsoring well into 2020? Thanks so much to Freshbooks for sponsoring. Alright, Keystone. Maybe I'll just give a little bit of back story on this. So I am currently rerecording my advanced react course. And my current advanced react course uses Prisma, which is a graph qL server, you give it your schema and it will kick out this huge graph qL API and it's really good. However, Prisma is working on Prisma. Two right now, and it's not going to be ready by the time I want to record. So it's not that I don't like Prisma. It's just that it just doesn't line up right now. And I'm a big fan of Prisma and everything that they have. So I'm just going through some of the different options out there. I've tried out Hasura a lot of people are telling me to check out nest jazz. However, one of the things that I've just had my eyes on recently is this thing called Keystone j s, which is sort of maybe even a Rails for JavaScript, might I say it's a graph qL base, I'll talk about what it is but basically Keystone j s. I've been talking about it for a while. It's finally here. It's pretty stable. And it is I'm not going to say I'm re recording my advanced react course with it yet because I'm still evaluating it. - -11 -00:04:23,760 --> 00:04:26,370 -Scott Tolinski: Didn't you just say that? I think you've just said that already? - -12 -00:04:26,390 --> 00:04:58,110 -Wes Bos: Well, I am recording it. But I haven't chosen Keystone as it's it's likely going to be Keystone. But I haven't. I haven't totally chosen that just yet. Because I haven't gone through absolutely everything yet. I've been I've worked probably four days in a row now converting the app over to Keystone. And it's going very smoothly, surprisingly, very easy to move things over from Prisma. All of the all of the resolvers get moved over very smoothly. It's just basically changing words and stuff like that. So did somebody say - -13 -00:04:58,320 --> 00:05:21,890 -Scott Tolinski: yeah, no, I think that's it. where we want to go is the very first high level. I know you said it's sort of like a what it's sort of like a almost like a Rails for node and in JavaScript, I guess I want to know a little bit about like, what exactly is Keystone? Is it a build tool? Is it? Yeah, it's a framework, like, where does it fit? Like, what is it actually doing? - -14 -00:05:22,260 --> 00:07:37,620 -Wes Bos: Yeah. So I would, I would say it's in the headless CMS camp, except that you, you host it yourself. And it comes with a lot of stuff. So it's basically two things. It's a graph qL server. So the way that it works is that you boot up a keystone instance. And you create these things that are called lists, maybe you can think of them your schema as like data types. So I'm creating the users, I'm creating items, I'm creating carts, I'm creating charges, all these different types, and they're all related to each other. And what happens with Keystone is that you create all these different types, you create all the different fields in those types. I'll talk about that more in just a bit. And then that what that does is it spits out a whole graph qL API for all of your CRUD operations, create, read, update, delete, based on all that. So that's one part of it. And that's, that's what Prisma does, as well, Prisma, you gave it your schema, it kicks out an entire graph qL API. The other part of Keystone is it gives you a GUI. So you can log in, it has accounts and auth baked into it. So you don't have to write that yourself. Or it's not baked in but they ship one with it, you can build your own if you like as well. And then they give you this admin GUI, where you can log in very much like a WordPress, you can log in, and you can see all of your data types. You can add, update, delete, reorder, do relationships, all of those things like that. And that admin GUI is built in react. But that's not to say that Keystone is a react thing. Because the third part of building a website, you have your back end, you have your admin GUI. And then you also have like your actual application, your front end, right. And the front end is up to you. You can use it with absolutely anything, they have stuff out of the box for using Knox with view, you can use a static react app, or you can use next j s. I'm personally not using any of those right now. I'm just, I have my next app totally separate. There's no reason behind that other than that's how I built my last one. And I'm just running that up. And I'm just trying to convert it over at the time. So it's a graph qL server ended admin GUI with accounts and auth baked in. - -15 -00:07:37,980 --> 00:07:59,940 -Scott Tolinski: Cool. So okay, so this, you give it your schema, and it creates the operations, right, your your mutations, you create update, Billy, can you get in there? And like, let's say you wanted to customize that stuff? Is that stuff just automatically written for you? And you don't even think about it? Or do you still have to go in and write the mutations and all that yourself? - -16 -00:08:00,270 --> 00:09:13,110 -Wes Bos: Yeah. So out of the box, just like Prisma is it gives you crowd operations for every type. So you can create types, you can update types, you can read them, and you can delete them. However, there are situations where you want custom logic, when you create something you want custom logic, or when you update or delete something, you want some custom logic. So for example, when somebody checks out, I need to create an order. And that needs to first ping the stripe API with their credit card number, or the stripe token and then charge their actual token, right, like there's a lot more logic. And when you get into custom logic, there's two ways to go about it. You can either write your own resolver. And that's pretty cool. So you can, in addition to all of the API they give you, you can create your own API surface that custom resolvers for queries or mutations. Cool. Yeah. And then, in that case, you can charge the stripe API. And then they also have this other thing called hooks, which have nothing to do with react hooks. You can think of them as you know, how WordPress has these different filters where you can jump in at any point of the lifecycle? - -17 -00:09:13,380 --> 00:09:15,920 -Scott Tolinski: Yeah, it's like a it's like a lifecycle hook. Yeah, - -18 -00:09:15,959 --> 00:10:27,690 -Wes Bos: yeah. So you can before when the data is received before it's validated after it's validated, during before creation, and after creation. So you can jump in at any one of these different points. And massage the data, validate the data, change the data, do whatever it is you need to do, and then pass it along to the next step. So I am using both of those right now. And at some point, you need to do custom validation, you can jump in with a hook. And then other points, if you want to. What is the one that I'm doing right now add to cart. So I created a custom mutation that's called add to cart that you ping it with an API and that under the hood, that will then Create a cart item, and assign the user that is currently logged in. And then keep going I could probably do with hooks, I'm gonna have it reviewed by the folks that think mail, some lovely Australians, by the way, they are a company out from Australia that that does a lot of this Keystone stuff. And they built this thing. And I've just been asking them dozens of questions. And then, in the middle of the night, Australians wake up and answer my question. - -19 -00:10:29,130 --> 00:11:21,510 -Scott Tolinski: So funny. So yeah, there's two different ways to go about it, which I like, because like out of the box, it just works. And then you need to do like an extra 10% of customization. You can either write your own endpoint resolvers, or you use one of these hooks to jump in and do what you want. That's pretty sweet. Because I've always done it myself. So every graph qL API vote I've ever written, I haven't used Prisma. Myself, yep. And so when I do it, I create the query, I create the mutation, I have to go and write the query to go and write the mutation. Anytime I add a new data type, I write this schema, write the graph, it's like you'd have to do the same things over and over and over again, I feel like this is one step closer to a dare I say like the Drupal past that I actually enjoyed, like the parts of Drupal that I actually enjoyed. So it's pretty cool. Okay. - -20 -00:11:21,720 --> 00:12:31,170 -Wes Bos: Yeah, I think the reason why I really like it is because it can be a bit of a bummer with all of the overhead of Yeah, and doing it from scratch, or using a lower level solution, there's certainly there's certainly benefits to using a lower level solution like a sewer or Prisma. Because they just give you the API's. And it's up to you to build everything else on top of that, and a lot of people need that. But certainly a lot of apps are just doing the same thing. We've got a whole bunch of data, it's related to each other. And I want to perform CRUD operations on it. And I want to lock it down via authentication and different things like that. And this just seems much easier and much more quicker to get up and running. And I think that's going to be good for my course. Because it gives you that immediate, like, Oh, I'm actually building something, oh, I could see how I can apply this to something else. Whereas sometimes when there's too much setup and too much boilerplate, you see this with Redux as well, people just go, Oh, this is the wiser, so much set up. And every time I want to create a new data type you're like, whereas like this, you just create a new data type. And then it gives you all the API and everything for you immediately. - -21 -00:12:31,410 --> 00:12:57,150 -Scott Tolinski: Yeah. And that's so funny, because I look at these docs, and I think, oh, okay, look, I'll look at all this code you got to write to, to work with this thing, right? Here's this specialized code they got to write for Keystone j s. But then the more I think about it, the amount of code that it's saving you is so substantial to do the same boring stuff you got to do every time. And I'm not a huge fan of boilerplate code. As you know, I resisted Redux for a long time because of it. So yeah, no, this is pretty sweet. And - -22 -00:12:57,330 --> 00:13:35,640 -Wes Bos: one more thing I have is, I think the benefit that you're saying there is because when you define your types, you give it what's called a field type, you can give it a field type of color, or text, or a password, or relationship, or a select and, or a slug, or there's like literally 20 different field types. And then you can go make your own if you want. And those field types, determine a few things that determine what does the GUI look like on the admin? But then they also determine how does it get saved to the database? And how does it get pulled out of the database? And then they also determine, like the cloudinary, one, it just resizes it behind the scenes for you, - -23 -00:13:35,939 --> 00:13:38,190 -Scott Tolinski: indexes and that sort of stuff. - -24 -00:13:38,490 --> 00:14:13,050 -Wes Bos: Yeah, yeah, it just it does both of those things for you, which I really like because you the developer, you have to create the back end, you got to create some sort of admin, back admin UI for people to manage this data. And then you also have to create your actual application. Yeah, just the the front end. And sometimes those, the admin and the the app, sometimes those overlap in terms of that, and Keystone allows you to do that. Like, certainly when people sell things on the sick Fitz app in my course, they don't have to log into this admin UI kind of want to do it in the app itself, and you do that no sweat, - -25 -00:14:13,320 --> 00:15:20,160 -Scott Tolinski: if I would have had something like this, this is this would have been something that I could have written level up tutorials on. This is like the kind of thing that I really, really enjoy. I'm interested in seeing where this goes. Okay, so you would use this in anytime that you want to have a full on application and not have to write the connections, not have to write all those CRUD operations. That was the stuff that you I personally really loved from rails specifically, was that you create a collection and then you have access to those things. It's almost CMS, like, in a way, but it's not necessarily a CMS. So let's talk about the like hosting of this. This is something that's kind of interesting to me. Have you done any work with hosting because that's always one thing that seems to be A bit of a bugger in a lot of platforms is, okay, you got this application, it's all working your front end, your back end, whatever, it all works localhost. How do you host this thing? And then make it easy? Is there any like one click host for this thing? Because I know Yeah, I can push this kind of stuff up to Netlify. Does this work with now j. s? Is it mounted? Not now, it's just now - -26 -00:15:20,190 --> 00:16:07,590 -Wes Bos: no now hosting. Yeah. Now, now. So is the admin UI. And the back end is all bundled into one application, which is great. So you don't have to host two separate apps. And that is a node app. It's based on Express and then the database is either a, it's kind of cool, they've sort of abstracted it away from the database. So I'm obviously using MongoDB, because that's the database I always use. But you can also use it with next K and e x, which is a ORM, for SQL databases. So if you want to use it with Postgres, or MySQL, or whatever, and that's great, because all the time people are like, great, but I don't want to use Mongo, I want to use whatever and and you can just say that was the thing with Meteor. - -27 -00:16:07,590 --> 00:16:08,640 -Scott Tolinski: Yeah, - -28 -00:16:08,670 --> 00:16:35,460 -Wes Bos: yeah, you can just switch out your database layer underneath. They have support for SQL and MongoDB. right out of the box. And then I'm sure the community will start building adapters for for other types of things. So there's that you got to host your MongoDB somewhere. And I recommend I use use em lab that got bought by MongoDB. So they have this thing, they have this thing called Atlas. That's probably what I'll use. You can also run it locally. - -29 -00:16:35,640 --> 00:17:12,390 -Scott Tolinski: I like Atlas. Yeah, I know. We talked about Atlas before, but I've been on level up spin on Atlas for a little while I moved it off composed just because the feature set Yep. And between Atlas and the Mongo DB compass application, I really like working with I like it, I look at the charts, I like the graphs, I like the index alerts. And I was getting this index alert. And I had goofed up one of my indexes. And it really made a huge difference. So I just I like that they, they're constantly improving, and seemed to make it like always an improved platform. - -30 -00:17:12,800 --> 00:19:29,570 -Wes Bos: That's good. So you can host this thing anywhere you can host a node app. And one of the things you can do is you can also host your actual application through it. So there's adapters for next and knucks, like I said, So ideally, you would just ship one app to a server, and it will run the API, the admin and your actual application all in one go. And because it's one big node app, you can host it anywhere you can host so I would probably reach for Digital Ocean. Unfortunately, I asked them like, Hey, you can't host this thing on sites Now, can you because the thing about sites now is that it has to be built in serverless functions. And they don't really host node apps anymore. On on sites now, which is unfortunate. That's why you can't host my current advanced react one on on sites now right now. And I doubt you'll be able to host this thing on sites now as well, because it's it's a node application, right? That might change. I know that they're, they're looking forward to it, I'll probably get in touch with them. And see if we can somehow get this thing because I love using now to host things but they don't like you running an app. They like you building your app, like with something like next JS like you certainly could host a front end on now. But the actual back end that connects them MongoDB I don't think you'd be able to do it on Heroku for sure. linode, for sure. Any of these other things where you just host a regular now. Plus, I'm really loving the whole Digital Ocean plus pm too. And I want to show I want to make some videos to show people how to host a note app on digitalocean with pm two, what exactly is pm two? It's a pm is this it's like forever, where it will pull apps on your thing. And it will, it will run them and collect all the logs for you. And it's got a really great interface. The only thing it doesn't do is it doesn't do like Port proxying yet. So you still have to run like a nginx config to proxy like forward slash admin or forward slash something to I'm using that on my own server right now. This looks cool. And I've been a big fan of it pm too. Yeah. Yeah, I should do a little little show on it. Oh, added to the list. - -31 -00:19:29,570 --> 00:19:54,510 -Scott Tolinski: I I like this pm. That's pretty sweet. All right. Let's talk a little bit about the shortcomings of this because I think we get enough of the benefits here. It seems like it's going to save you some time. It's going to save you some code doing redundant things. It's going to save you some boilerplate. makes all that stuff a little bit easier. What are some of the things that you've experienced so far that maybe aren't your favorite aspects of the Keystone? - -32 -00:19:54,990 --> 00:20:44,640 -Wes Bos: Yeah, a couple things. There's no TypeScript, not support, but they don't Have a good TypeScript story for maybe I should back up. So with a good graph qL server like Prisma, if you're writing in TypeScript, or even if you have a VS code plugin for regular JavaScript, as you're typing your queries, it will autocomplete them and suggest fields for you. Much like when you're typing in the graphical or graph, qL playground. There's no good. There's nothing like that yet. In this, which is a bit of a bummer for because people like to have that that's the whole point of or not the whole point, but it's a big part of graph qL is that it's typed, and that you can get these really nice auto completions. And then it will tell you as you type if you type the field wrong, right. So that's a bit of a bummer. - -33 -00:20:44,840 --> 00:20:48,780 -Scott Tolinski: Yeah, that's like one of the really great things about TypeScript is those Yeah, completions. - -34 -00:20:48,780 --> 00:22:28,320 -Wes Bos: Totally. So we'll see if something around that pops up. They're certainly talking about it on if you look on GitHub, the authentication, I haven't dove into the auth all that much just yet, they allow you to lock down the auth per list, which is like a type like an item, or per field, which is like item dot name or item quantity. So if you want to lock that down based on people's permissions, you can do that, I know that they've told me they are going to simplify it a little bit. Because certainly, with off, you don't want to feel like oh, this is probably what I want. Like you don't want to accidentally give somebody permission the wrong way. So I haven't dove too much into it. But it does seem a little bit complicated. At the moment, I bet that will get better in the future. Um, other things I didn't talk about was plugins. So they have a bunch of plugins that will help you they have one called the Apollo helper. So one of the problems I have in my current course, is that if you add an item or delete an item, the pagination is all off by one. So like page two needs to be revalidated. And the only solution Apollo has told me is you have to nuke the cache, which is you didn't delete everything from the cache, which sucks because then then you have to go and re fetch it from the network. So one of the plugins that Keystone gives you is the ability to nuke just a certain type, meaning that like you add an item, you can you can nuke all of the items from the cache. And then it'll refetch them. So you have and then you're not accidentally deleting the cart or the user or any of the other information that is still good. - -35 -00:22:28,620 --> 00:22:49,410 -Scott Tolinski: I think that Apollo client, three, is that the 333 version they're doing, they just announced that they're going to be giving you a ton more control over the cache. Oh, God. Three. So I wonder if that's going to make things a little bit easier there, too. I haven't looked into it too much. But there was the graph qL summit, there was a little bit about that. - -36 -00:22:49,710 --> 00:23:14,130 -Wes Bos: Oh, good. Oh, good. That's good. Um, there's a, something I haven't looked into, which is that they have an email plugin. So if you want to write your emails in JSX, it will compile them. You can use something like mg ml or whatnot. So that's pretty cool. They also have plugins for like Google and Facebook login. So if you don't want to use username and password to login, you want to sign in with Twitter or GitHub, you can absolutely do that as well. - -37 -00:23:14,550 --> 00:23:16,500 -Unknown: Yeah. And I want to use this now. - -38 -00:23:16,530 --> 00:24:03,510 -Wes Bos: Yeah, it's very much like using it. And I'm like, this is nice, like, up and running. And it's not like so so key stony. And what I mean by that, is that, yeah, I just basically copied my Prisma types, and pasted them into this. And then I just changed the syntax. And then I took all of my mutations. And Apollo and I just had to rename them from something like capital II, it used to be lowercase items. Now it's capital items, like very, very minimal. And I was like, Oh, good. Like this is still graph. QL. At the end of the day, none of this stuff is specialized. Where it's not going to, you're going to be able to take your skills that you learn in Keystone and apply them to something else if if that's not what you end up using. Yeah. Huh. - -39 -00:24:04,200 --> 00:24:06,390 -Scott Tolinski: I hope you don't mind. I might do a course on this too. - -40 -00:24:07,320 --> 00:24:12,060 -Wes Bos: Yeah, it's it's really neat. It's really neat. Yeah. Big fan of it. Cool. Well, this - -41 -00:24:12,060 --> 00:24:28,020 -Scott Tolinski: is the Keystone j s. You'll want to check it out. Trust me, I think this is pretty cool. And definitely something worth your time. This is available at Keystone j s.com. If you want to learn more. Version five is fairly new. Right? When did this come out? - -42 -00:24:28,020 --> 00:24:37,710 -Wes Bos: Keystone five came out in the summer. Yeah for is actually I initially started building my course platform like five years six years ago on Keystone. - -43 -00:24:37,920 --> 00:24:39,540 -Scott Tolinski: Oh, so you've had an eye on this. Yeah. - -44 -00:24:39,540 --> 00:25:32,820 -Wes Bos: And I don't know I don't know why I migrated. But I really liked it at the time and it was just because like I love Express I love node. I love react like these are this is all of my things. And I just feel so productive in this thing. And certainly there's a little shortcomings but it also feels like really stable as well. The focus That built it are building client apps on it. I don't feel like it's going to change out from under me, like, the Prisma stuff is amazing. But Prisma went from graph cool to Prisma. And then they change the schema. And now Prisma two is coming out. And like they're certainly doing that because graph qL is quick moving. Yeah. And that's the industry. They're trying. They're trying to, like, figure out the best way to do graph qL but as like a tutorial creator, who Yeah, they care about, but then it's not their end game to please me and you. It just changes quick. - -45 -00:25:32,850 --> 00:25:36,540 -Scott Tolinski: Yeah. And I really liked how easy graph cool was. - -46 -00:25:36,600 --> 00:25:37,140 -Wes Bos: Yeah, - -47 -00:25:37,140 --> 00:25:40,890 -Scott Tolinski: I always sort of wishing that that was the direction but you know, - -48 -00:25:41,160 --> 00:26:13,740 -Wes Bos: yeah, I think that with graph cool. It wasn't any getting the like, enterprise or like real applications. I think a lot of people built toys on it. And then when it came to like, even like the serverless function, you had a copy, paste it into their UI, like there was no like path for writing your serverless functions locally and deploying. So it's unfortunate. But that's that's the industry, which is if you take on something super early, like graph cool was like two years ago, if you take on graph qL, two years ago, it's certainly going to change. We're still all figuring this stuff out. - -49 -00:26:14,100 --> 00:26:18,030 -Scott Tolinski: Yeah, totally. Cool. Well, I learned quite a bit about Keystone. - -50 -00:26:18,240 --> 00:26:19,560 -Wes Bos: This is getting tasty. - -51 -00:26:20,730 --> 00:26:23,190 -Scott Tolinski: Oh, it's only 28 minutes these things go to 30. - -52 -00:26:23,370 --> 00:26:24,330 -Unknown: All right, we're allowed. - -53 -00:26:24,420 --> 00:26:39,360 -Scott Tolinski: Yeah, this isn't that tasty. We're alive. We're good. Keystone j s could be the Keystone to your next project might be mine. Who knows? I'm gonna try it out. Sounds fun. All right. Yeah. Cool. All right. Well, I don't have anything else. I'm excited to dive into this. thank us. - -54 -00:26:39,569 --> 00:26:41,460 -Wes Bos: No problem. Talk to you later. - -55 -00:26:41,549 --> 00:27:11,550 -Scott Tolinski: We will catch you in 2020. We're going to be in the future. Can't wait for that. 2020 with 2020 vision. We're gonna be crushing it next year. Like I don't know, in that crack or something. But let's, let's sign off the year. Yeah. All right, please. Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax21.srt b/transcripts/Syntax21.srt deleted file mode 100644 index 5e72a110c..000000000 --- a/transcripts/Syntax21.srt +++ /dev/null @@ -1,556 +0,0 @@ -1 -00:00:05,970 --> 00:00:11,250 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:13,650 --> 00:00:15,720 -Unknown: Hello, everybody, welcome to syntax. - -3 -00:00:15,720 --> 00:01:02,940 -Wes Bos: My name is Wes, I realized we could never introduce ourselves and people are emailing me that they're brand new the podcast. My name is Wes. And this is Scott. And this is a podcast that we do about tasty treats and web development. Today, we're going to be talking all about what's new in CSS. So there's actually a lot of new stuff that's being added to the language, CSS is not standing still at all. And there's some really exciting stuff that we're sort of on the verge of being implemented in browsers or already in browsers that we can start using today. So we're just gonna rattle through a handful of the the new things and talk about what they are and when you might want to use them. This episode is sponsored by Freshbooks, as well as a company called bug replay. And we'll talk about both of those companies partway through the episode. So hello, Scott, how you doing today? - -4 -00:01:02,940 --> 00:01:25,830 -Scott Tolinski: Hey, I'm doing good. I am getting over awful flu man, it seems like I've been out like every other week, for the past few months. Yeah. But uh, I'm on the up and up here. Um, I got a little bit of a cough. So I'm gonna cough away from the microphone, I'm feeling a little bit better. And today is probably like the closest I felt to 100%. So just excited to be back and feeling normal. How about you, - -5 -00:01:25,859 --> 00:02:13,050 -Wes Bos: that's exciting. I am great. I'm just about to head off in a couple days to Paris for the.js conference, which I'm pretty excited about. It's a, it's a pretty neat conference, say they don't have any Wi Fi, which is really cool. They put it in this beautiful theater, they don't tell it's one track conference. And they don't tell you either what people are speaking on or when they will be speaking. So you pretty much just sit in this room and you have no idea who's coming next, you have no idea what they're going to talk about. And you can't be on your laptop or the Wi Fi. And the talks are only 18 minutes long, which is making me so much more nervous than it would for a 45 hour long talk because I need to get my my talk across without in that 18 minutes. But I'm pretty excited about it. It's gonna be really fun. - -6 -00:02:13,500 --> 00:02:18,210 -Scott Tolinski: Yeah, that venue looks incredible. Yeah, looks is gonna be very, very cool. - -7 -00:02:18,300 --> 00:02:37,830 -Wes Bos: As every time I go to a conference in, in Europe, they're out these like amazing, old theaters and stuff like that. And it's just like the theater is the best possible place to have a conference because it's just so comfortable. And it's so much better than just like having these chairs that you're trying to squeezed in between all the other developers. Yeah, - -8 -00:02:37,880 --> 00:02:38,910 -Scott Tolinski: yeah. - -9 -00:02:39,440 --> 00:03:10,290 -Wes Bos: So let's let's dive into it. We're going to talk about it. Maybe we should talk about the the term CSS for we get into any of this because people tend we had CSS three and CSS three was just this monolith that contain all kinds of new additions to CSS, and it was really exciting. But the next iteration is not called CSS for and I don't know, Scott, you wanna take a? It's nice to call it CSS for but yeah, you get your head bit off when you say so maybe you can explain to us what is this? - -10 -00:03:10,740 --> 00:03:54,480 -Scott Tolinski: Yeah, so the thing about CSS, the reason I like the word CSS for even though it's not accurate, is that like, it gives you something to search. Yeah, here's let me look at two CSS for and see all the stuff but when the way it is now is actually each sort of thing is getting a layer version to it now rather than like CSS as a whole. So that's going to be CSS selectors layer for, you know, here, the next iteration of CSS selectors. So different components of CSS are getting different upgrades and stuff at different times. And it's not some sort of monolithic huge upgrade from version three to version four overall of CSS or something. - -11 -00:03:54,540 --> 00:04:33,029 -Wes Bos: Exactly. And if you want a list of what all these things are, go to draft, CSS wg, that's a CSS Working Group. They're the people that sort of steer and talk about and have meetings and do all of the hard work of deciding what will be put into CSS before the browsers actually go ahead and implement it. And we have things like CSS animations, one CSS animations to CSS multi column two, and it's kind of neat to see like, what is coming scroll anchoring scoping, scroll, snaps, scroll bars, sizing templates, tables, transitions, media queries, lay level five. Wow. - -12 -00:04:33,029 --> 00:04:33,720 -Unknown: Yeah, so - -13 -00:04:33,720 --> 00:04:49,379 -Wes Bos: some pretty neat stuff. It's it's I don't know, if you have some, it's not like light reading this, this working like props to the people that that comb through these, these drafts because there's a lot of good nuggets in there, but it's very dry and very technical, to be able to comb through it. - -14 -00:04:49,759 --> 00:04:58,740 -Scott Tolinski: Yeah, I remember the first time I hit this site, you know, back in the day, and I was just like, what is this like, this doesn't tell me what I need to know. Yeah, but it's just that I didn't know how to read it. - -15 -00:04:59,250 --> 00:05:16,560 -Wes Bos: It's more fun. Like browser, like people who work on Chrome to read and write, and then they implemented into it. And then guys like Scott and I will come along and hopefully translate that into something that's a little bit easier for everyone else to digest and a blog post or video or whatever it's gonna be. - -16 -00:05:17,040 --> 00:06:04,379 -Scott Tolinski: Yeah. Yeah. So I mean, that's, that's awesome about CSS is that it's just, it's growing. And it's, it's not stopping. It's not stagnating, we're not, we're really in like a really amazing time in which, like, instead of sitting there and wondering, like, when will Porter radius is being CSS, you know, we can see these things coming in. And we can see that, that it's constantly improving, and we can actually have a hope that these things like, you know, like element query IDs or something like that are going to be usable in a legit way very soon. So, you know, I, for people who don't like CSS, I don't know, to me, this is like another thing. This is man CSS. This is great. Because it's, it's growing, it's evolving, and it's, it's becoming better and better all the time. - -17 -00:06:04,409 --> 00:08:01,620 -Wes Bos: Yeah, exactly. And also, for people who also often have gripes about CSS, it's worth getting, you're putting some time into these things and chiming in on on it before they become standards, because often you'll see like, like today, we'll talk about CSS variables, people say that looks like garbage. And it's like, well, there's things that you need to know about the the entire process and go back. So actually, let's let's start there, with the first feature. And this is probably the one that I'm most excited about in its CSS custom properties, or likely what you have referred to as CSS variables. And the way that they work is that you can declare variable very works similar to how sass works where you declare a variable. And then you can just go ahead and use that variable in your CSS. Now there's, there's a bunch of stuff that you sort of need to know about how these variables work. So first of all they are the syntax for them is it is a little bit funky. It's the way that you declare a variable is inside of any selector that you have. And we'll talk about scoping in just a second you say dash dash, the variable name, colon, and then you give it the actual value. So much like you'd have a property value like background red, you could just make a variable called background color, dash dash background color. And then you would say colon red, or colon Ba, da 55. If it was a hex code, you get the point, right, and you can put any value into a variable, whether it's a number, a string, a unit, a percentage, any piece of CSS that you want any value they want to put into the variable, you can then when you want to turn around and actually use these variables, use the CSS function var, so you say var, open parentheses, and then you put the name of the actual variable, which is dash dash, the name of the variable that you have then made up so I have actually gotten used to it initially, I was like me, come on. That's the syntax dash dash, - -18 -00:08:01,949 --> 00:08:15,329 -Scott Tolinski: especially after you know how nice and terse the sass and stylish syntax for declaring and using variables. Yeah, I mean, the transcript to go from transparent variables and stylist to this was a little bit shocking. - -19 -00:08:15,360 --> 00:08:50,880 -Wes Bos: Yeah, exactly. But that's that I've gotten used to it. And I also think that SAS is not going anywhere, I don't think I think that SAS will be adapted to use these variables. So if you rather use $1 sign variable, and just have them transpiled to native CSS variables, that's totally fine. Go ahead. Go ahead and do that. You don't have to necessarily use that syntax that you're using. On the On the flip side, like I don't know, bite and chew. It's not that bad. And you can, I've learned to like it over the last year or so of using them in little demos here. And there. - -20 -00:08:51,330 --> 00:09:46,520 -Scott Tolinski: Yeah, likewise, and definitely after you learn a little bit about some of their their superpowers. So I guess some of those powers come in with something like scoping right. So one of the ways that you define your variables is to scope them to the root of your your CSS, so you do it with a colon root brackets, and then define your variable within there, right. But then you can also scope your variables to any selector and allows you to not only override already defined ones that were defined in your route, or maybe even a parent selector, but allows you to really, you know, tune your your variables. If this variable does not exist outside of this selector tree, then then you will want to define it within that right. And if it is used throughout your document, then you can define it in the root and have these things scoped to different ways. So I really like that aspect of the CSS variables. - -21 -00:09:46,590 --> 00:10:34,320 -Wes Bos: Yeah, me too. And I think the best way to think of it is, is if you put a variable on an element, all of the data element and all of its children will have access to that variable and nothing above it, nothing below it will actually have access to it. So you can have global variables like I've been using them quite a bit for colors in my especially cuz I'm doing my CSS Grid course I don't use sass or anything like that. But the the kind of the downside to that is I always want to use nice colors. But I don't want to make people type the hex code to that nice color. So what I would do in the past this, I would find all the fun built in ones like misty rose and pale golden rod yellow and, and whatnot. But now I can just tell people to use dash dash yellow, and I'm going to use the specific yellow that I like to use, not the built in ugly yellow that comes with CSS. So pretty neat. - -22 -00:10:34,860 --> 00:12:00,330 -Scott Tolinski: Yeah, for sure. And then for more scoped variables, it would make sense to maybe use things for like, if you're doing a square, you could have the the size of the square be a variable, and then set that to the height and weight. And then that is something you're never going to use outside of that particular element. But maybe like you said, colors make more sense globally, I don't know about actual dimensions sort of stuff makes sense more locally. It's one of those things that's by per case basis, what you like to use. Another really awesome feature about CSS variables is, these aren't in sass or stylus, you write your variables. And when your form compiles, right, your your hex value or whatever is dispersed across your CSS, and it stays there. However, with CSS variables, the variable itself is stays in your CSS. And what that means is if you modify or update that CSS variable, let's say with JavaScript, right, any place that you're using that variable in your CSS is going to change automatically. Unlike with sass or stylus, you'd have to update each individual hex value, because at the end of the day, those color values or whatever you're using is just getting out put into CSS. So the CSS variables are actually dynamic. And that I think that is their most powerful feature, maybe the killer feature for CSS variables. - -23 -00:12:00,360 --> 00:14:50,070 -Wes Bos: Yeah, exactly. On my JavaScript thirty.com. As I always like to plug my own stuff, d3, we actually show you how to use CSS variables with JavaScript. So you've got this like kind of little design where we have a picture and it has like a border around it, and then it, you can also change the blur. And you can change the background color of the actual image. And those three things are inputs. And when you change those inputs, we use JavaScript to then select the either the root element or the element where you have your element scoped to. And then you can overwrite the variable in that case, and CSS will go, Oh, this has changed. Let me then rerender, the CSS that was also using that variable. So that's the killer feature for CSS variables. As Scott said, sass, nothing else can actually do this. Because it's, it's it's compiled unless you're unless you're like less, or whatever was being compiled in the browser. But in this case, the variables live in the browser, and they're not compiled at any given time. I want to talk a little bit more about these variables in the browser, because there's this article on CSS tricks the other day, I'll find it and link it in the show notes. But it was an awesome way to sort of as you author your HTML, you can pass CSS variables as you as you want to go ahead. So if you've ever wanted to do like a tooltip, or you've ever wanted to set a color on an element, as you're authoring the HTML, what you can do is, rather than use like a data dash attribute, which I've used quite a bit in the past, and then you've had to use JavaScript to pick up the data attributes, and then inject them into your CSS, or using an inline style property and overriding them. In that case, what you can do is you can just write your element like a paragraph tag, and then you write an inline style called style equals, and you can just set your variables on that element. And there'll be scoped to that element. So I could say, open paragraph tag style equals dash dash background, or dash dash padding, or it doesn't have to be anything related to CSS, I could say dash dash dog's name or dash dash tooltip or dash dash on hover show. And then in your CSS, you could then pick up those values, using var dash dash, the dog's name or dash dash tooltip value and display it via content or change the background color. Because the cool thing is you can just set the values and then you can attach PX or you can you can pass them through calc, which is pretty cool. So if you're doing a square, and the width of the square is 100 pixels, or sorry, you're doing a rectangle and you wanted it. You could pass it through calc and divide it by two and then get a a nice little rectangle based on only one value that you've you've passed in there. - -24 -00:14:50,640 --> 00:15:27,690 -Scott Tolinski: Yeah, I one of the things I love about all these new features is they're sort of taking the things that we could do with, you know, pre processors in JavaScript and thing I mean stuff you could do with CSS before, but there was always a pain. And now it's going to be all within CSS. So you end up getting these extra little features that just make your life a little bit nicer. And anytime you don't have to touch JavaScript or something like that, superduper nice, Love it. Love being able to, I don't know, just be able to interact with variables like this in a way that isn't require you to do any extra work. - -25 -00:15:27,690 --> 00:15:28,549 -Unknown: Mm hmm. - -26 -00:15:30,600 --> 00:15:32,010 -Wes Bos: Do I mean talk about the next one. - -27 -00:15:33,330 --> 00:15:36,450 -Scott Tolinski: This transforms the I'm not sure what you're okay, here. Yeah. - -28 -00:15:36,840 --> 00:17:19,410 -Wes Bos: Another huge pain point that CSS variable solves for me is what I like to call independent transforms. Meaning that currently in the browser, if you want to translate x, something and rotate y something, you have to pass those in just one single transform property, to use a transform, rotate x and translate y. And we are getting the ability to do top level like rotate value. But currently, it does not supported across all the browsers. So where that becomes a problem is let's say you have two different transforms on an element, you have rotate x and translate y. And then when you hover it, you only want to change one of them, there's no way to just update one of them, you have to rewrite the entire rule by rotating x and then finally figuring out what the Y was on the initial state and setting it back to the exact same value, so won't mess that up. So that's a bit of a problem, especially if it's dynamic, you don't know what that value is going to be. So by doing this, what you can do is you just say, rotate x, var dash dash x, and translate y var dash dash y. And then when you hover over top of it, or you add a different class, you don't have to reapply any sort of transform, you just change the value of the variable. And that will kick in your your transform, and it'll transition itself or change its actual value. So there's no reapplying any extra any extra property values in your CSS selector, the only thing that will happen in your selector on hover, is updating the variable and everything will take care of it from there. - -29 -00:17:19,799 --> 00:18:00,900 -Scott Tolinski: Yeah, that is tasty. Because how many times that you got to do that so many times were you like you said you have a hover state, you are applying some sort of transform. And you have to either remember or worst case if the one of the properties is dynamic, have to reinitialize that what happens if you want to update the initial state and have to update the initial state and the hover state? Yeah, killer feature right here. Love this. Yeah. And the same thing works with like media queries, right? I mean, this is also super tasty. So if you like set your variables, and you want to adjust them, you can just simply update the variable within the media query, rather than rewriting the CSS to overwrite. - -30 -00:18:00,990 --> 00:18:21,859 -Wes Bos: Yeah, you can, you can have, like, I know, we're not supposed to say like media query phone, because phones are dynamic. But if you have like a large a medium and a small media query, and you want to change what those values actually are, then you just change the value of your variable. And I know we've all had this in SAS before, which is pretty cool. But you could you could possibly even do that dynamically. - -31 -00:18:22,609 --> 00:18:26,400 -Scott Tolinski: Yeah, I think that's that is, that's gonna be really super nice. - -32 -00:18:27,560 --> 00:19:00,900 -Wes Bos: Yeah, one other Well, let me say one other thing is, you know, box shadow, where, you know, with with background, you always have properties like background color, background size, background attachment. And if you want to update like a piece of your background, you can always just override it with a specific property. With box shadow, you don't have the ability to say like box shadow x, right? It's just simply box shadow. So if you ever wanted to update the color of your box shadow without messing with any of the other values, then you can just put set that to a variable and simply update the actual variable. - -33 -00:19:01,230 --> 00:19:27,240 -Scott Tolinski: Yeah. So essentially, what it's doing is it's making it possible for any of these properties, like any, any time that you don't have access to each individual property, or each individual value of a specific property, right, like, like Bach shadow, it allows any of them to be dynamic. And then that sort of mind expanding right there, because you've never been able to do that. And pretty cool. Definitely pretty cool. - -34 -00:19:28,530 --> 00:19:49,020 -Wes Bos: So let's move into the the next piece. And this kind of works well with CSS variables. And it's something that I've that we've actually had for quite a while but I didn't even know we had all of these. So that's CSS filter, where you can click this link in that I don't know if you click the link in the show notes. But did you know we had filter drop shadow? - -35 -00:19:49,710 --> 00:20:56,940 -Scott Tolinski: Yeah, and I've actually used it now filter drop shadow is a little tricky. If you are applying it to something that's like a div full of other divs different browsers we'll sort of look at the different ways I had a situation where I think I forget which browser was but it was Safari or one of them. Let's say I had a div with several divs in it, right? Yeah. Whereas I believe it was Safari was applying the drop shadow individually to every single div where Firefox and Chrome, we're applying it to the container div itself. So they weren't necessarily using these in the same sort of way. The reason why I was using this shadow filter instead of like a box shadow is because the background container was sort of an abnormal shape. And I wanted the shadow obviously, to work well with that shape. Now, like I said, it was sort of like the children were getting the shadow rather than the container. And I had issues there. But I have used a lot of these properties to I mean, even way back in shoot a long time ago, I was using filter gray scale like you heavily on the level of tut's site blur - -36 -00:20:56,940 --> 00:20:58,050 -Wes Bos: quite a bit. - -37 -00:20:58,580 --> 00:21:11,880 -Scott Tolinski: Yeah, blur quite a bit. Like I said, I use drop shadow, I did have some performance issues with drop shadow. But again, it could have been the use case where you're applying it to a thing with lots of children in it rather than the thing itself. You know, - -38 -00:21:11,970 --> 00:21:54,540 -Wes Bos: yeah, there's always that like, sort of like, this thing will never change. Should I just do it in sketch or Photoshop and export it? Or should I actually calculate it every single time on page load? So you do like, these are the things that cause your application to sometimes jitter. Because they have to often repeat, especially if you have something that's moving, or you have like a hover style and a transition over top of it, they have to repaint themselves pretty rapidly. And that can cause some jank. So something to be something to be aware of. But I definitely wouldn't wouldn't shy away from them in your so what this drop shadow is, if I have like a PNG, that's like, just a transparent PNG, it will then trace the PNG with the drop shadow. Yeah. - -39 -00:21:55,440 --> 00:22:24,869 -Scott Tolinski: Yeah. Yeah. So the thing about the CSS filters is one, the support isn't great. It doesn't work in IE, it has like partial support in edge works, and pretty much everything else except for Opera Mini, but I haven't necessarily found their performance to be like, excellent, you know, yeah. Okay. But you know, that's, that's my use case, right? Who knows? And these things are probably just going to get better all the time. But yeah, these CSS filters, which I guess we haven't listed out, yeah, - -40 -00:22:24,900 --> 00:22:27,420 -Wes Bos: yeah. Why don't you rattle through them real quick? Yeah, let - -41 -00:22:27,420 --> 00:22:55,740 -Scott Tolinski: me pull this up. I mean, we have, we have blur. So you can blur something, we have contrast, which allows you to tweak it sort of the the contrast values, a lot of these things are just like, you could think of them as like Photoshop, layer styles or whatever, we have a grayscale, which will make something D saturated, we have hue rotate, which is going to like rotate the entire color wheel, sort of really tripping out your colors in - -42 -00:22:55,770 --> 00:22:57,810 -Wes Bos: different ways. With that, - -43 -00:22:58,020 --> 00:23:19,890 -Scott Tolinski: yeah, right, exactly. And then we have drop shadow, which allows you to, like I said, add a filter shadow to something which is pretty darn cool. because like you said, if you have a transparent image, it's going to trace that image and do a shadow on that image itself, rather than the square around the image, which was like never useful ever. So yeah. - -44 -00:23:20,820 --> 00:23:39,570 -Wes Bos: There's quite a few of them. And it looks like you can also create your own filters via SVG, and just link out to an SVG filter URLs, not something I have ever actually seen before. So I'd be I'm really curious to give it a shot, because SVG itself has a whole subset for for doing these things like blurs and whatnot, right? - -45 -00:23:39,899 --> 00:23:55,230 -Scott Tolinski: Yeah. Yeah. And that SVG can get a little intense too. So man, props to anyone who's out there, really cutting the edge of SVG sort of filters and transforms and stuff like that. Definitely, really cool stuff. - -46 -00:23:55,919 --> 00:24:11,490 -Wes Bos: It's always neat to like, find these little, these little corners of the web that are actually massive and have so much to them. You know, like, I just want to pop a little filter on something, it just opens up this entire new world of, of SVG and filters and whatnot. It's pretty neat. - -47 -00:24:11,879 --> 00:24:37,320 -Scott Tolinski: Yeah, I'm sorry, we were missing a couple of filters there. I think my list was incomplete. Yeah, there's also a brightness. There's a contrast filter. There is. Let's see. We said he rotate. There's an invert, which will invert the photo. There's an opacity filter, which I'm not entirely sure why you'd use over capacity itself. But there is no capacity filter, saturate, - -48 -00:24:37,679 --> 00:24:42,090 -Wes Bos: does that apply it to all? That would obviously apply it to all children as well? Right. - -49 -00:24:42,510 --> 00:24:44,640 -Unknown: Yeah, but won't opacity do that? - -50 -00:24:44,669 --> 00:25:00,330 -Wes Bos: Yeah, that's what I'll pass. It does. That's always like, that's sort of like the downside. If you want to have like something behind something that is opaque. Or I don't think that does anything different though. I think it's because when you want to mix and match these things, you can put them all in one, one big filter. Yes. - -51 -00:25:01,589 --> 00:25:05,640 -Scott Tolinski: Makes sense. And then there's the sepia filter for old timey photos. - -52 -00:25:08,130 --> 00:25:15,630 -Wes Bos: Oh, that would be a great idea to do one of those photo booths where you put on like, like a Western wear and, and have like a bottle of moonshine - -53 -00:25:15,810 --> 00:25:18,150 -Scott Tolinski: even better, it could put those things on it for you. - -54 -00:25:18,599 --> 00:25:21,119 -Wes Bos: Oh, that's a great idea, machine learning. - -55 -00:25:24,690 --> 00:27:48,720 -Scott Tolinski: Cool. So I think that might might be a great time to take a break to hear about a bug replay. Now, a bug replay is a really cool service that you know how many times you've worked in teams, and you're you're doing testing for bugs, and maybe something's come across and non technical person has found an issue. And they're saying, Well, when I go to do this thing, it doesn't work. And you're thinking, it'd be really great if I could get a bug report. And I didn't know exactly what they were doing. Because sometimes user reports aren't exactly the most, you know, they're not exactly the most clear things, I've gotten user reports that are just sort of like you were doing what and what happened, I don't understand. So a bug replay does is it basically facilitates communication between devs and non devs. In the hope of finding and solving bugs with a simple browser extension for Firefox or Chrome, it's super easy that your tester can go through your site, use use your site, record what they're doing, it's going to record a video, it's going to give you the entire you know of any sort of bugs or any sort of error notes that come up. And it's going to give you the video in real time so that you know exactly what's happening alongside of what the user was doing. You're getting all of your bug reports and everything like that integrates with slack and GitHub and JIRA. It's superduper, cool, you can create a shareable URL for the video bug report. So that you can send it off to anyone who's working on anything and say, hey, check out this. This is what happened. Here's the video. And here is the bug report. There's also with a paid account, there's also unlimited users, so they don't charge per team members. So if you have a large team that could get really super nice for you. I know I've been in just so many large team situations where again, you've had issues and the person reporting the issues is not reliable. So bug replay that bug replay.com will definitely give you all of that information and more. Like I said, it's giving you pretty much everything you need to know from environment data. What's your browser operating system, location, memories, cookies and stuff like that. So check out bug replay.com a nice way that you can solve your bugs for both tech and non tech people. - -56 -00:27:48,840 --> 00:27:58,650 -Wes Bos: That's awesome. I think anytime you have to ask the user what browser you're on, you're doing something wrong, because yeah, that information should be logged somehow. And this is a fantastic way to do that. - -57 -00:27:59,460 --> 00:28:06,540 -Scott Tolinski: Yeah, absolutely. Not only that, you get a video as well. Whoo. Yeah. Super cool. Awesome. Let's, - -58 -00:28:06,540 --> 00:28:39,630 -Wes Bos: let's keep going with some CSS, not for some next level CSS stuff. And that is, let's talk about some of the the color functions that we have. So our GGP gbba which is you're allowed to have hex values, and then you can tack on an opacity value onto the end. So if you have Ba, da 55 and you want to make it 50% opaque is that the word transparent 50% transparent. Okay, because I get yelled at all the time where - -59 -00:28:39,630 --> 00:28:42,270 -Scott Tolinski: I think you could say opaque 50% opaque, but - -60 -00:28:42,630 --> 00:30:33,240 -Wes Bos: there's one word that means that it's completely see through anyways, you get the point we want to have arameans see through opaque means that you can't see through it. Okay, that makes sense. Yeah. So the AA on the end of your hex code is the the alpha value. And if you want to pass a 50% value through it, you have to pass it through in hex, which is impossible to remember unless you're one of those people who can knows how to calculate hex values. So I have this little StackOverflow that I have bookmarked because when you're actually when you're developing a Visual Studio Code theme, which Michael ball to is they actually use RGB 100% is pound FF and zero percent is is lB 00. Right? So everywhere in between, like if you want 50%, that's clearly 80. Or if you want 85%, it's clearly D nine, right? Makes sense. That would be I'm gonna throw this request out there someone who can make a alfrid extension that will allow me to quickly view and copy these to my clipboard because I do use them fairly often. Because the colors that I use, I always remember what they are in hex, but then I have to I just love my work. Maybe this will move to the next one, which is, I just want the ability to do what I do in stylus or sass and pass something one kind of color, like RGB or hex or just a named color. And then I just want to apply an alpha to that. And we are actually getting that with, with these different color functions that are coming to CSS, you'll have the ability to have a color function, you can pass it a color, and then you can you can tell it to alpha itself up 50%, or whatever the word is for that. And that will compute that actual color with the the alpha layer. And, - -61 -00:30:34,109 --> 00:31:11,910 -Scott Tolinski: yeah, one thing on rgg VBA, I use this in a much less a much less strict version than I would typically with like 80% opacity, I'm more or less looking at this and feeling like, well, this looks like an A to me, and then I'll apply it and do it by eye. So I don't necessarily go like who knows what percentage that actually is. I personally don't go ham on the percentages there. And I just go take it into like the general ballpark. But obviously that's that's not exactly exact, you know? - -62 -00:31:11,940 --> 00:31:29,130 -Wes Bos: Yeah. Yeah, it's, it's good. It's nice in a little pinch, if you're doing a demo. And I know most people have in their production application, they will have sass, but anytime you're doing like a quick little demo, you don't have sass at hand, and you want to be able to apply. So ampacity to something this is fantastic. In this case. - -63 -00:31:29,609 --> 00:31:58,410 -Scott Tolinski: Yeah. These color functions. What's cool about these is that we started to see color functions a little bit already. Using, you know, obviously, like RGB, a and hsla, and RGB. Those are all color functions, right? And so these new ones are just an extension of that, right? These are just the next level of our color functions. In what we have alpha saturation, lightness, whiteness, blackness, yep, those all of them, I think. - -64 -00:31:58,410 --> 00:32:51,240 -Wes Bos: So those are, though none of those are currently implemented. And if you actually want to see sort of what is coming, you can go to CSS next. Because CSS next is like, it's sort of like a preprocessor for stuff in CSS that we don't have it sort of like Babel for CSS, and it will try to transpile as much as they can into whatever the current equivalent is, obviously, some of the stuff is impossible, like variables. But some of the stuff is possible, like these, these different color functions. So if you click on color function, and you click through to the spec, they will click over to the actual CSS working group. And again, these things are still in draft so they could change but it'll give you a quick little look hue saturation, lightness, whiteness, blackness, tint, shade, blend, blend de contrast. - -65 -00:32:52,710 --> 00:32:53,790 -Scott Tolinski: Blend is cross down. - -66 -00:32:54,480 --> 00:33:06,960 -Wes Bos: Is it in Oh, not on mine, oh, again, these things might be gone. Or you can you can red, green, blue, or alpha something as well, we talked about the alpha. So yeah, kind of neat to be able to get all of these in the browser. - -67 -00:33:07,140 --> 00:33:31,950 -Scott Tolinski: Yeah, I can't wait to have all of these. I mean, these are stuff I used in in sass, non stop and my style components, I have to have my own functions that do these and stuff like that. And then in styled components, you have to do like dollar sign bracket, use your function, and then whatever. And this would be so nice to avoid all of that and just simply use it in something the browser can understand. But like you said, they are not implemented yet. So good luck, I - -68 -00:33:31,950 --> 00:34:17,360 -Wes Bos: can't wait I can really see myself using these if I were like developing like a client dashboard like something like Freshbooks and Freshbooks allows you to set the color of your dashboard to be the brand color. And then based on that color, you have things like borders and drop shadows and text colors. And theoretically, you can just take a brand's color and calculate what the drop shadow and the border color and all these other secondary colors so I could see you just having one or two variable inputs on the clients dashboard and as they pick from a color picker input type equals color then you can see the entire dashboard immediately changing because you're using a variable and there the rest of these colors are all calculated via these color functions that we've been talking about. - -69 -00:34:17,669 --> 00:34:37,320 -Scott Tolinski: Yeah, and just think how much work that saving I know like building themes for like clients and stuff like that and even through PHP or your back end and stuff like that it's having to save that in a database that that color somewhere in a database and then it's having to use that color and inject into your styles pretty much everywhere recompile - -70 -00:34:38,150 --> 00:34:50,040 -Wes Bos: it or yeah running I've back in the day I before sass was the thing I had like style dot php and then PHP would recompile itself based on past in colors and yeah, - -71 -00:34:50,249 --> 00:35:06,300 -Scott Tolinski: yeah, no good. Now it's variable man one put input you can store just one color, whatever. Read it as the variable variable updates all in browser. Dang it Love it, man, it's awesome future is looking very so features looking great. Yeah. - -72 -00:35:07,110 --> 00:36:19,020 -Wes Bos: Let's take another break and talk about our sponsor. Our other sponsor here is fresh books. So I've talked about fresh books all the time absolutely love them fresh books is cloud accounting software, I use them to keep track of all my invoices, all of my expenses. And recently, actually, I've had a assistant start to help do some of my email and deal with the stickers and just a whole bunch of stuff to help me out. And let me just focus on actually building my courses. And one of the things that she does is she takes care of all of my expenses. So what I did is I just added her as a team member onto my company. And then she has the both the app on her phone, as well as the the desktop app, she can log in and add all of the expenses and add the taxes and all the input the different currency values that we have. And it's actually the first time that I've actually used this one feature of Freshbooks. And let me tell you, it's working really, really well. So I've been super happy with that. So if you want to check out Freshbooks, go to freshbooks.com forward slash syntax, you'll get one month free and make sure you enter syntax into the How did you hear about a section? That way we can tell Freshbooks that this podcast is working really well for them. And they will continue to sponsor us. Nice. Go. - -73 -00:36:19,050 --> 00:36:20,190 -Scott Tolinski: Yeah, love it. - -74 -00:36:21,060 --> 00:36:27,360 -Wes Bos: Let's talk about some new selectors that that we're getting in the browser. What do you got for me, Scott? Yeah, there's - -75 -00:36:27,360 --> 00:36:32,760 -Scott Tolinski: a lot of new selectors in the level for selectors is looking pretty cool. It's not CSS - -76 -00:36:32,760 --> 00:36:34,110 -Wes Bos: for is it's got - -77 -00:36:34,560 --> 00:36:38,850 -Scott Tolinski: SEO. It can't be CSS for if you'd like it to be CSS - -78 -00:36:38,850 --> 00:36:42,510 -Wes Bos: level four, don't say CSS for CSS level - -79 -00:36:42,510 --> 00:37:56,940 -Scott Tolinski: four selectors. Okay. If you want to Google this Google level for selectors not CSS for select, okay. Yeah, so we have a whole bunch of stuff. And some of these I could see being super useful in my my current workflow, others not so much. But uh, you know, I'm sure they're gonna be super nice use cases for all of these. So we have, let me pull up. I had a nice list up here. Okay. So, and the level for selectors, we have things like, blank, right. And match direction, whether you're like left to right, right to left, which, if you've worked on any international, you have to support right to left to left Left, Right languages and when would have been super nice. We have drop, we have any link, we have Lang, where you can determine what language it is, we have local link, we have matches, which is sort of the opposite of not read only rewrite, we have not, which is to say like it's not this selector or not this particular thing required or optional, which are great for forms, placeholder shown which is going to be super nice for form. Yeah, I - -80 -00:37:56,999 --> 00:38:14,850 -Wes Bos: use that ones are actually already in the browser, I use it all the time where I have a layer, and I don't show the label until the person starts typing, and then I pop the label up right above it. It's really nice, because you don't have to have all the labels cluttering up your UI. You only have to show them once the placeholder has been gone has been removed. - -81 -00:38:15,030 --> 00:38:37,590 -Scott Tolinski: Yeah. And I think a lot of these are actually in the browser right now. Like not I use not all the time. Yeah. But I I think some of these aren't. We also have valid invalid again, for form inputs. Has scope in range out of range. We have some for grid structural pseudo classes. So like column selector, what does this go follow? - -82 -00:38:39,390 --> 00:38:57,060 -Wes Bos: Me here, I got Robin discuss. So pseudo class selector represents any element that is a scope element. This is a potentially empty set of elements that provide a reference point for selectors to match against such as that has been specified by query selector all. What? - -83 -00:38:57,360 --> 00:38:58,710 -Scott Tolinski: I don't know if that clears it up for me. - -84 -00:38:58,730 --> 00:39:25,530 -Wes Bos: Now, if you understand what the scope selector is, in their example, they all this is for for scoped selectors. Oh, okay. Oh, I see. I see. So there's there's a scoped attribute coming to the style tag. And what you can do is you can just say, colon scope, background color red, and then that CSS is kind of like styled components, or we'll go back to the React. - -85 -00:39:25,670 --> 00:39:26,610 -Scott Tolinski: Oh, god, yes. Oh, - -86 -00:39:26,630 --> 00:39:47,400 -Wes Bos: yeah. Yeah. So if you are trying to apply some CSS to all elements that are within scope, so you could just say scope, font family, Times New Roman, or whatever it is, and then you don't have to explicitly select everything, you can simply just say any of the elements that are currently in scope will then be applied to the six. That's pretty neat. - -87 -00:39:47,690 --> 00:40:12,230 -Scott Tolinski: Yeah. And let's see what else we have. Current which is time dimensional, or currently active position in a time dimensional element like during a speech rendering of an HTML document. During the display of html5 subtitles, this one's not available in any browser yet, we have default, we have a column combination selector. - -88 -00:40:12,839 --> 00:41:55,230 -Wes Bos: So you know, one that I actually am really excited about is the is actually just an addition to nth child. And let me tell you about the the problem that we have. So like, let's say you have a rapper, and inside of that rapper, you've got 10 images, and you want to style the third image, or every third image, maybe the last one in the in each of your columns, this is a bit moot now that we have CSS Grid, but you know, you've always wanted to select the third thing on every three in an element. And then that works great until and I've done this a million times, you just go in and pop a quick header into into that wrapper. So all of a sudden, your third image is now it's still your third image, but it's the fourth element. And the problem with no child is nth child does not care about what you selected, meaning that it will simply just take what you've selected, go to the parent, which is the wrapper, and then start counting them from there. So if you have 10 images in one paragraph tag, there's no way to exclude that paragraph tag. So essentially, what we want is end of selected, and that's what this is. So we're gonna say nth child, three n, every three. And then you can say of, and then you give it another selector. So you can say nth child three end of image dot dog. And what that will do is it will select all of your dot dog images, and it will it'll only highlight every third one. And you know, it's not going to if you add in other sibling elements to that you're not going to mess up your your three end. So that one's not in any browsers yet. I'm really excited for that one to be added. Because I run into that problem all the time. Me too. - -89 -00:41:55,260 --> 00:42:00,380 -Scott Tolinski: Yeah. And it's always it's always annoying, because you never think about it. And you're just like, Oh, yeah, crap. Okay. - -90 -00:42:01,610 --> 00:42:49,230 -Wes Bos: Another one I have and is div with has pseudo selector. So if you've ever wanted to select something that has a child, you'll know that it's not possible, because you can only select the actual child. So if you have a div with an image inside of it, and then you have another, like, let's save a blog post and you want to, you want to style blog posts that have images to look alike, maybe a little bit wider than the ones that don't specifically have images in them. And right now, there's no way to do that, what you would have to do is with JavaScript, you have to select all the posts, images in a post, and then you'd have to add a class to the parent selector. And in this case, we're going to be able to just say, like, dot post, colon has image and then you're gonna, you're selecting the post div not the image itself. But based on its its what it has inside of it. - -91 -00:42:49,500 --> 00:43:21,690 -Scott Tolinski: Yeah. And this is one of those ones that this is something I feel like people have been asking about since the the stone age's in CSS like, Okay, well, I have the child selector, but how can I? How can I style the div based on what child is there? What's inside of it? And this is finally going to allow us to do that, which is something that makes me super duper excited, simply because you'll finally be an answer for all of those questions on Stack Overflow. But, again, this one's not implemented in the browser yet, but I definitely look forward to its arrival. - -92 -00:43:21,900 --> 00:43:33,000 -Wes Bos: Yeah, I really hope that it again, these things could could drop out at any time. But I think that this is one that that will stay the course because everybody has been asking about this for for many, many years. - -93 -00:43:33,420 --> 00:43:54,090 -Scott Tolinski: Someone sexually hilarious on this. CSS for hyphen selectors comm under this selector. They've responded, this is the only comment on this page. It just says I'm definitely or it says looking. And then in quotes forward to this. That's a great joke, Chris Harrison. It's a great joke. - -94 -00:43:54,870 --> 00:44:06,120 -Wes Bos: That's hilarious. I like jokes like that. That's great. What else do you have any other any other exciting ones come into CSS not necessarily selectors, but anything else new. - -95 -00:44:06,810 --> 00:45:00,870 -Scott Tolinski: This is something that's not new in a way that like you could have used this for the past few years, if you're paying attention, but I still use it all the time in my my tutorials, and people still are always like, what is that? So I feel like I should mention viewport units. Being able to use VH for the viewport height VW for the viewport width, width, and then we have V max and V min, which is going to be like, if you use V max and your browser is wider than it is tall, you're taking the width. If it's taller than it is tall, you're taking the height. Same with the men, you're taking the smaller of the two, but I use VH and VW so much and it bums me out to know that there are people out there who don't know that you can use 100% of the viewport height at any given time. You can use them in things like calc you can use them all over the place and they are excellent at units, - -96 -00:45:01,350 --> 00:45:38,760 -Wes Bos: I use this all the time on the body tag, because if you the body tag by default is only as high as its content. So especially if you're trying to vertically center something in the body, and you don't have enough content to make it go as high as the body, I almost always put a min height 100 Vh on the actual body tag, and that will make sure that it is at least as high as the browser. And if there's more content, it'll just keep going higher than that. And then if you're using Flexbox, or grid or anything like that, your justify content and your align items are going to be really easy to vertically and horizontally center your things. - -97 -00:45:39,060 --> 00:45:50,160 -Scott Tolinski: Yeah, I play so nice with with all of that new stuff. So definitely super, something you should be using by now. If you aren't, they're very highly supported at this point. So yeah, viewport units. - -98 -00:45:50,340 --> 00:46:32,370 -Wes Bos: There's also there's some really neat ones coming like, there's ch which I've used only a couple times and it's ch is the width of a zero. Meaning that if you want to know how wide a character is, the CH will will tell you that. And that's kind of cool. Because if you ever have a fixed width, font, like like so what's the word for fixed width fonts, mano, a mano spaced, then you can, you can know exactly how many characters can go on a line, because they're all exactly the same size. Now that goes out the window. Because sometimes your eye is much skinnier than your actual like W's as much wider. But it's kind of neat to be able to have that. - -99 -00:46:32,700 --> 00:46:47,430 -Scott Tolinski: Yeah, there's also apparently an X unit, which is the relative x height of the current font. In parentheses next to it. It says rarely used, I cannot personally think of a time to use that. But I would love to hear use case. And - -100 -00:46:47,460 --> 00:47:04,560 -Wes Bos: EAX. That's cool. And I also the other day, I found out that you know how we always rotate things in CSS. So you you have a rotators 20 degrees, did you know that there's a whole bunch of other values that you can use are different functions. So there's, they're turned? - -101 -00:47:04,560 --> 00:47:07,650 -Scott Tolinski: Is there like polar units are? Right? Yeah, - -102 -00:47:07,650 --> 00:47:09,420 -Wes Bos: let me pull them up real quick. - -103 -00:47:10,530 --> 00:47:11,700 -Scott Tolinski: I did not know this. - -104 -00:47:13,650 --> 00:48:03,900 -Wes Bos: It's so it's called CSS angles. So the way to represent an angle and CSS, everybody uses degrees. But you can also use it in turns, which I think makes a lot of sense at turn is how many times you want to turn it around. So you want to turn it around half, that's 180 degrees, so to 0.5 turns is 180 degrees, or one turn would be one all the way around. So if you want to spin something around when you hover, you could just say rotate one turn. And you don't have to I know most people understand how decrees works. But if you ever getting into finicky stuff, like you need to turn it around like 66%, then I always find myself opening the calculator and doing 360 times 66 and then rounding where I could just be using turns. And then there's also radiance, rad and rad. - -105 -00:48:04,170 --> 00:48:05,550 -Scott Tolinski: I feel like I would want to use rad just - -106 -00:48:05,550 --> 00:48:06,150 -Wes Bos: read - -107 -00:48:06,869 --> 00:48:14,040 -Scott Tolinski: Raspbian you read that here. Yeah, but I would just replace all of my decrees with radians. Yeah. And then gradients. Yeah, radians gradients. - -108 -00:48:14,070 --> 00:48:20,100 -Wes Bos: What is a rad represents angle in radians? One circle is two pi radians. - -109 -00:48:20,820 --> 00:48:23,970 -Scott Tolinski: Yeah. And then a gradient is - -110 -00:48:25,440 --> 00:48:26,610 -Wes Bos: 400 degrees. - -111 -00:48:26,849 --> 00:48:27,690 -Unknown: Yeah. - -112 -00:48:28,679 --> 00:48:31,470 -Wes Bos: One full circle is 400 degrees with a gradient. - -113 -00:48:32,340 --> 00:48:33,150 -Scott Tolinski: I know not. It's always - -114 -00:48:33,150 --> 00:48:37,110 -Wes Bos: funny when like us web developers bump into things that are like math. - -115 -00:48:38,010 --> 00:49:12,090 -Scott Tolinski: So this is actually kind of interesting ingredients. Right? So zero is zero. 90 degrees is 100 180. Is 202 70. Is 303 60 is 400. So 400. You could think of as like a full turn, right? Yeah. And you just go back 100 for each quarter turn. That's pretty neat. You subtract 50% for half of that, and then subtract another 25%. For another half of that. I could see how that could be super useful. You just sort of reset your brain to think starting from 400. Yeah, gradients grad. - -116 -00:49:12,300 --> 00:49:35,610 -Wes Bos: I think grad and turn are a lot easier than degrees. But because that's what we've been using for so long. I had no idea until last week that these were even in the language and it looks like they showed up with degrees. But just like somebody's tutorial, initial use decrease, I guess, or I guess you grow up learning degrees and stuff like that, but that's pretty neat. - -117 -00:49:35,910 --> 00:49:42,090 -Scott Tolinski: Yeah, definitely. There's some mathematicians out there just like nice. gradients. - -118 -00:49:42,690 --> 00:50:00,900 -Wes Bos: I'm gonna do it just so people ask what that is. Yeah. Awesome. Well, I think that's, that's all I've got. There's a whole bunch of new stuff coming to language. But I didn't want to get too too much into the stuff that that might not make it and that's some of the more applicable stuff that we'll be able to use every single day. Do you got anything Else for me, Scott. - -119 -00:50:01,650 --> 00:50:28,170 -Scott Tolinski: I don't know. This stuff is great, though. I'm excited to see the evolution of CSS taking place before our own eyes every single day. So, yeah, no, I'm just excited to use all of this stuff. I think during this talk, my mind has been a little bit blown about the use cases for CSS variables and how I could be using them a little bit more involved than I am right now. I used them, but I'm like, dang, I should be using them in a lot of places that are not so yeah, - -120 -00:50:28,170 --> 00:50:43,260 -Wes Bos: I'm pretty excited when Chris coiour tweeted that link about using inline variables. When you author your HTML, and then just picking the values up in your CSS file. My mind was like, no. Oh, that's amazing. - -121 -00:50:45,000 --> 00:50:46,980 -Scott Tolinski: The total transformation there. - -122 -00:50:47,610 --> 00:51:01,980 -Wes Bos: Exactly. Yeah. So that's CSS. If you have any new stuff that's coming into CSS that you're particularly excited about? Make sure you tweet us at syntax FM. Do you got any sick pics for me today? Scott? - -123 -00:51:03,150 --> 00:51:15,990 -Scott Tolinski: Yeah, I got a sick pick. My sick pick is going to be my Google Pixel two XL is the nicest one I've had. It's super dope. The camera is absolutely I've been seeing - -124 -00:51:15,990 --> 00:51:19,200 -Wes Bos: all your photos on Facebook. They look amazing. They're good. - -125 -00:51:19,200 --> 00:52:06,810 -Scott Tolinski: I knew they can't I mean it's it has the highest rated camera of any smartphone on the market. So like at this point, I was like yeah, that's gonna be a good camera I'm sure will be better. But what I'm particularly impressed with is low light or high contrast in light photos. Like if you take a photo of your computer screen with a dark background in the room, you would typically there see the room or the screen but not both of them. This shows everything is pretty darn amazing build quality on this thing is great. All of the nice little features are awesome. I find myself using Google Assistant like constantly now because it's really easy to access but overall like the killer feature on this thing is the camera and holy cow the photos are awesome. Really, really loving the phone overall. Definitely new favorite new favorite device here. - -126 -00:52:06,810 --> 00:53:51,390 -Wes Bos: That's pretty neat. I have got something for charging all my devices. So I'm sitting here at my desk and I've got like I have to charge an iPad I have to charge my headphones I have to charge a power bank I have to charge my phone. And I hate having to plug my phone and everything into my actual computer especially my phone because like iTunes is though in the garbage for me. And every time I plug it in and like like start opens it up and is like Hello, would you like to update or something like that and like no iTunes go back into the garbage. And same with the photos I know you can turn this stuff off but every time I update my my phone every time I plug it into my computer, it opens up all these photo apps and Dropbox tries to sync all my photos and I was like I hate plugging it in just to charge so I bought this external. I bought a What is it a five Port 40 watt USB charger where it's just five actual ports. And the important thing is that it's 40 watts so you just plug it into the wall there's no power brick, which is what I love. And then I couldn't be charging all my devices at the same time as well as just leave all the cords plugged in and grab the specific one that I want. So it's pretty neat. One cool thing about with the with the new MacBook is if you get a USB regular two USB C cord for a couple bucks off Amazon you can actually charge your your MacBook you can't charge it while you're using it because 40 watts yeah is not enough you need 87 to charge the 15 inch but you can you can charge this thing off of 40 watts no problem if it's close so I actually the other day I tried to - -127 -00:53:51,690 --> 00:54:01,410 -Scott Tolinski: close your laptop. I don't know if my What if this is a joke I'm just calling Hi. What I do is I bring - -128 -00:54:01,410 --> 00:54:51,570 -Wes Bos: it downstairs and I have it have one in my bedroom. I bought a couple of these I put one in my bedroom and then I just kind of like slide it into this magazine rack and I plug it into there and it will charge it overnight so I make sure that I have a full charge so if I'm going to a coffee shop or something like that I always hate when I open the laptop and it's at 20% so I like to have I actually tried to charge my laptop on an iPhone nub the like 1.1 amp and it worked it took nine hours to fill the entire MacBook battery from dead but this thing will charge it in I don't know an hour to two full so it's the bunker I got the five Port 40 watt and then I realized after I had bought it that they sell a 10 Port 60 watt which grazie why not it's only 34 bucks Canadian right now. Nice. Which I don't know how much American that is like $1 50 - -129 -00:54:51,870 --> 00:54:55,050 -Scott Tolinski: they make Eicher makes really great stuff. I've always liked anything. I - -130 -00:54:55,050 --> 00:55:44,100 -Wes Bos: thought they're really good. I've I've oh I should sorry. I shall say that this thing has this thing called I Charging, so it will sort of just pulse the, I don't know how electricity works, but it will sense the maximum rate at which your device can charge and then it will charge it at that. So it's kind of like how people like to use iPad chargers on their iPhone because it goes faster. That's exactly what this thing will do for you in the bunker is awesome. I had some problems with some ONC, an anchor USB hub, about a year back. And it just like crapped out on me. And they just, they just sent me all my money back and they didn't, didn't ask me to like send it and mail it or anything like that. They just gave me all my money back after about a year of using it. So even though it was a bad experience, because it broke. I still buy a lot more bunker stuff because it's it's just a really good quality. - -131 -00:55:45,630 --> 00:55:46,470 -Scott Tolinski: Super cool - -132 -00:55:46,530 --> 00:55:51,330 -Unknown: sake, pick, pick, pick. Cool, do any shameless plugs. For me, - -133 -00:55:51,900 --> 00:57:01,590 -Scott Tolinski: I am going to have a seat. But what is today, today is Monday, but this is going to be coming on Wednesday. So by the time that this release is I'm going to call it right now I'm calling my shot here. The CSS modern CSS layouts course will be live on level up tutorials for pros, as well as anyone who wants to purchase this series. It's like I'm putting the finishing touches on it. So it's just about there. I can't imagine and won't be released. I like to keep my my release dates pretty flexible. Get them out as soon as possible. But yeah, I would say by the 29th here that this will be out so don't over to level up tutorials. COMM Ford slash store, pick up this series, it's gonna be really super cool, teaches you how to basically make really interesting and different layouts with CSS Grid, I teach you all the basics of grid Flexbox and modern CSS. So it's totally applicable to this episode. And we get into actually building some really cool layouts, stuff that you may not have expected being difficult, but it's difficult from things like Instagram to Facebook to code pen, I even recreate sketch winsky, calm and CSS Grid. So a lot of cool stuff there. Awesome. - -134 -00:57:01,650 --> 00:57:35,550 -Wes Bos: I don't have any specific plug right now I just pushed pretty hard on my Black Friday sale, which was really successful little things that everyone who, who picked up a course or two during the Black Friday sale, but I'm working hard on my CSS Grid course. And then likely in the New Year sometime soon, I'll have another react course as well. And I'll also be updating my current react for beginners course as well for some some new stuff that's coming to react. So a lot of stuff coming from me in 2018. I've got a lot of plans and pretty excited about about it. - -135 -00:57:35,910 --> 00:57:45,810 -Scott Tolinski: Yeah, I can't wait for our our urine review episode where we get to talk about our our plans, because likewise, I got a lot of exciting stuff in 2018. - -136 -00:57:45,930 --> 00:57:48,540 -Wes Bos: Yeah, and yes, that's looking exciting. - -137 -00:57:49,950 --> 00:57:51,810 -Scott Tolinski: Big plans. Cool, man. - -138 -00:57:52,290 --> 00:57:56,670 -Unknown: Awesome. Well, thanks, everyone for tuning in. And we will see you next week. Have a good one. - -139 -00:57:56,970 --> 00:58:08,370 -Scott Tolinski: See you. Head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show. Until next time - diff --git a/transcripts/Syntax210.srt b/transcripts/Syntax210.srt deleted file mode 100644 index de13d20eb..000000000 --- a/transcripts/Syntax210.srt +++ /dev/null @@ -1,372 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bos. - -2 -00:00:10,559 --> 00:00:56,310 -Wes Bos: Welcome to syntax and happy new year Happy 20 This episode is going live January 1. We're recording it December 16. So the year new me love that same New Year new me. Today we got a potluck for you all kinds of awesome questions around JavaScript and CSS and hosting applications and soft skills. It's got a good one for you. So stay tuned. We are sponsored by today. Kyle Prince Lu's freelancing course which is available at study web development comm forward slash freelancing dot html and Log Rocket which is logging in session replay for your JavaScript apps. We'll talk about them partway through the episode with me as always is Mr. Scott to linsky How you doing today? Scott? - -3 -00:00:56,459 --> 00:01:19,680 -Scott Tolinski: Doing good. I'm um, you know what? To be entirely honest, I felt a little a little slow with the past couple episodes. I'm feeling a little bit more revitalized. 2020 feeling really charged. Got some caffeine in the system. And and I'm excited for this year. I'm excited for this month. I'm excited for this episode. So macro to micro I'm all ready to go. What about you? - -4 -00:01:19,949 --> 00:01:37,050 -Wes Bos: I am doing pretty good. This is last week before Christmas holidays. And my daughter's got a half day on Friday. So I've got what four and a half days to wrap up my year. I've gotten 5 million emails or apply to invoice down and think Yeah, just trying to button everything up this year. - -5 -00:01:37,109 --> 00:03:53,250 -Scott Tolinski: Yeah, I'm feeling a little stressed out and then same same way trying to get everything where it needs to be. And I just looked outside and it's suddenly a winter wonderland outside. It was like beautiful. And now it's absolutely coming down. snows coming down Colorado. Yeah, Colorado man wild wild weather here. Let me tell ya. Let's talk about the weather for a little bit longer. Now let's get into this potluck episode. The first question is from Tim Moran. And Tim asks, Tim asks really good questions. By the way, I think we've gotten several of Tim's questions. I recognize his name from a few other potlucks. But he asks, When you run an audit, like lighthouse on a website, do you run the audit on each page? Have you found an app or a hack to run the audit over the entire site or multiple pages? So yes, when you do run lighthouse, it's just running it on the one page that you're running it on. Typically, you're going to want to run those on, you know, the the main pages as far as running it on everything. Woof. I know that would be very difficult. For me personally, because levelup tutorials has a lot of pages, right? We have like, let's say 2000 plus tutorial videos, and blog posts and little pages and stuff that would require auth. So to be able to have an audit automatically run on each page automatically seems really, really kind of tough. You know what I don't know. But the things like lighthouse, these are good things to run, maybe like in the development process once or twice. You don't need to be running these things continuously and really staying counting on it. Usually it gives you a set of checklists, and you solve those issues. And a lot of times those issues are solved for the entire application. So it's something you want to be cognizant of, but maybe not something you need to be really intense about that said, we just had an episode on GitHub actions, and we had an episode. Well, I haven't had an episode on Cypress yet. But maybe that's a tool that could be baked into your continuous integration via GitHub action, something else? Or maybe it could be baked into your end to end testing with something like Cypress To be honest, I have no idea just seems like a possibility. - -6 -00:03:53,699 --> 00:04:37,110 -Wes Bos: Yeah, I think what would be really cool is if you could run lighthouse, or whatever you're using, on the pages that were changed, like you should be able to figure out what page has changed in this pull request, and then only run it on those pages. I'm just looking online here there is a NPM package called lighthouse batch will allow you to run it on multiple pages. And there's another one that will allow you to run it in parallel. But certainly if you've got, I don't know, 80 pages that would that would take quite a while I think with these tools, I'll just run it on like the home page. And then if you know, it's like a significantly different page, there's a lot of extra code or functionality on that page that I'd probably run on there. - -7 -00:04:37,499 --> 00:04:49,980 -Scott Tolinski: I found one called lighthouse action. That's a GitHub action. There you go into it, but I don't know if it does exactly that. I would need to look at this a little bit more. But definitely something interesting there. Yeah, - -8 -00:04:50,010 --> 00:05:09,660 -Wes Bos: you would need some sort of custom code that would figure out based on whatever CMS you're using, what pages have changed. Yeah, what pages have been touched, like and you could if it was like a natural app, if a component lower down the tree change, then you'd need to rerun it on the parent page. So I don't know maybe maybe somebody out there has a solution for that. I would - -9 -00:05:09,660 --> 00:05:29,820 -Scott Tolinski: almost want to do it like a custom list of pages to run like here the page because I don't need to run on every tutorial you just need to run on one tutorial page. one specific one, one listing one this one that so then you can't necessarily have it be super ATA, well, you deleted a list and have it go through it but interesting idea. Cool. - -10 -00:05:30,240 --> 00:05:44,730 -Wes Bos: Next question we have here is from potbelly font pig question, what makes a font good. I stumbled upon this website, Haley feech dot fun forward slash fonts, it's h a l e, why - -11 -00:05:44,940 --> 00:05:49,770 -Scott Tolinski: we should probably make sure this is an appropriate website before retreating it or sharing it. But - -12 -00:05:50,160 --> 00:06:37,110 -Wes Bos: I've been to it is very appropriate, um, where she says her first font was not good. But it looks perfectly usable to me. What are when you're picking fonts for web apps? How do you judge the fonts is entirely subjective? Um, I think there's there's a couple things probably to it is, how readable is it at a large in a small use case? So if you make a font very small, is it is it still readable? I know that there's some fonts that are very hard for what's the disorder that you have? Where dyslexia lexia? Yeah, for there's a lot of fonts that are hard for people with dyslexia to read. So I don't really know, what makes a good font and what doesn't, that's not really my area there. But, Scott, do you have any thoughts on this? - -13 -00:06:37,320 --> 00:07:52,590 -Scott Tolinski: Yeah, you know what I mean, I looking at this, especially when she, she says, This is her first font, it's not very good. But it holds a special place. I'm on the font website, by the way. And what's interesting about this font is it looks really good to me to know the difference between a font looking good, and the font looking good to the person who created it, it could be saying this does isn't good, because perhaps it doesn't fit with the things that they've learned about typography as they've grown as a designer, or potentially, there's little issues here or there with the kerning or the the flow of a font. But a lot of this, to me personally, would seem like it's just a matter of taste, and matter of skill in their own work rather than like I mean, you sometimes you look at your code, and the code might seem perfectly reasonable to somebody untrained eye, but somebody who's also looked at this might say, Oh, this could be better. And these ways it look at this the same way with creating fonts. To me, all of these fonts on this site look super dang good. I love all of them, especially the one singlet it looks like it was inspired by Katamari damacy, which is favorite of mine. So this looks great. I love a lot of this stuff. Check out this page, if you haven't, fringe is also good. Wow, very good. - -14 -00:07:52,620 --> 00:08:47,940 -Wes Bos: Yeah, I think also, what makes a good font is that it has upper and lowercase, has accents available. You can't just think like, the most English doesn't have accents. But pretty much every other language does. Some fonts will account for letters that come after it. So if you have an A and E, they'll give you that cool ey thing. Even like one of my favorite fonts, which is red, Nika, I use red, Nika. Next, I use that on my JavaScript beginner javascript.com course. And if you inspect the aava of JavaScript, you'll see that I just wrapped a span around it and how to really bump down the letter spacing because the the weird case where an A and A V and an A all came together, there was just these like massive gaps in between each of the letters. And like, that looks awful. So I had to, like go in and kerning in in JavaScript socks, because you just have to wrap a span around each of the letters. Yeah, um, but - -15 -00:08:49,020 --> 00:08:54,919 -Scott Tolinski: yeah, was that there's a plugin for that were wrapped automatically wrapped, was that - -16 -00:08:55,140 --> 00:08:58,260 -Wes Bos: I've written it 100 times before I call it Spartan wrap. - -17 -00:08:58,260 --> 00:08:59,130 -Scott Tolinski: Oh, nice. - -18 -00:08:59,149 --> 00:09:02,070 -Wes Bos: Where it just it's splits your letter. - -19 -00:09:02,100 --> 00:10:19,770 -Scott Tolinski: There was one that was made by I think the Sandro maybe that automatically wrapped each one and with a letter with its own class. So we used to use that all the time back in the day a jQuery plugin. Okay, cool. So let's get into this next one from Adam Kay, and it's as a solo founder, speed is essential. So Adam is speed demon. What's faster, building your own components using a theme or using a framework? Well, if you were just looking into what's the fastest, like number one the fastest, I think the fastest is using your own framework that you've written yourself. Why is that the fastest because you're, if you've written your own framework, and it encapsulates everything that a you might need to do, then you know how to use it really well because you wrote it and you probably have used it before. That's probably number one the fastest to me. Second, most being using any other framework like tailwind. Or bootstrap or something like that those are going to be very fast, especially if you have worked with them before and know it if you don't know it, not gonna be as fast. That's to me speed is like the number one most essential thing, then that's it to me. But I don't think speed is number one, the most important thing, but that yeah, that's another conversation, I think, - -20 -00:10:19,789 --> 00:11:07,950 -Wes Bos: yeah, my my course back end, I built it in foundation. Because I wanted speed, I wanted to slap this thing together and get it up really quickly. And now we regret it. Because now whenever I want to, like, modify one of my course cards, I don't have like a course card I can work on, I've got 15 different classes that I have to like, overwrite on each of them. So long term, the short term, getting it up and running, just just ship it. Absolutely, that's the fastest not writing tests for your JavaScript that's much faster than actually writing tests, long term is going to bite you in the butt for things like that, unless you do it properly. Obviously, you can approach any of these frameworks properly. But if you're just thinking like, I just need to get something up long term, and that might not matter, he might not care about long term, you might just care about getting it up and running. So - -21 -00:11:08,220 --> 00:12:00,270 -Scott Tolinski: if you do long term care about it, I would recommend writing your own anything because we recently rewrote the entirety of the CSS for level up tutorials. And we did so starting fresh from a design system perspective. And we redid the design system, and figma did it all out and then rewrote all the components. And let me tell you, right now, we could not be any faster, adding things to the site, because everything has a component at all works the exact way it should. Here's a layout, here's a card here. So whatever, it all fits together, like a perfect little system that we designed it to do. And to me, that is really essential. I don't even have to look up any sort of documentation because I wrote it along with Eric and designed it. So I'm, I'm very about writing your own thing, but in the same regard, that isn't the fastest, it's just the fastest after that framework has been written itself. - -22 -00:12:00,870 --> 00:12:28,470 -Wes Bos: All right. Next question. We have here is from Tim. Hey, guys love the show. Thank you, Tim. I've never been a tea drinker. But lately, I've been wanting to start drinking hot tea in the afternoon instead of coffee. I know Scott is the tea girl. What would your suggestion be for starting out? This is a great question because I think all of us probably drink a little bit too much coffee and Scott knows the stuff here so lay it on a Scott, how do you what would you suggest someone getting into tea, - -23 -00:12:28,559 --> 00:16:40,620 -Scott Tolinski: there's a lot of variety in tea from black teas down to white teas, right? So you go black is the strongest, most caffeine strongest flavor, white, the least amount of caffeine, the I don't want to say the least amount of flavor but then maybe the more subtle of flavor. And then you have stuff in between you have yellow teas which is a little bit more you have green teas which is more than that you have Long's which have their own characteristics. There's so much variety in teas Not to mention the amount of fruit or, or flavoring you can add to the My one suggestion would for tea would be to stay away from something like teavana, where everything is just like filled with sugar. They just add a bunch of sugar to stuff. So I wouldn't go crazy because those are those are delicious, by all means, but they're not when you miss the characteristics of the tea, but you also just don't need that much sugar in your life, especially from something like tea. I personally, my favorite teas are all Chinese green teas. Alex and Taiwanese oolongs. I like some some interesting stuff, I think you need to try teas. And don't be afraid of them. If you don't like it. Don't worry about it. start buying teas in small quantities rather than large quantities until you will really find some that you like because there's some very different characteristics. For instance, a Puerh teas are like fermented dark teas. And those can be really strong and very smoky. And they can almost have some like real earthy qualities that a lot of people don't like. So if you try one of those, and think it's going to be representative of all your T's, it's not going to be the case. Now, last year, my brother got me this cool little subscription to a place called sips be, you know when those box services type things where they send you some stuff, and I found it to be really pretty good. You give it some qualifications to say okay, these are the kind of flavors I like, this is the stuff I might be interested in. This is how much I know about tea, right? You could say I don't know anything. And what they do is they send you a box of four different teas and I found it to be pretty reasonable. The teas were all good that I got from there. They get them from several different places. It's all loose leaf tea, you drop it in. So I would suggest stick with loose leaf tea. You know, use a filter or whatever because the teaser high quality. Find some service that allows you to try or test out tiny amounts of teas. Just go to your local loose leaf tea store. We have some amazing ones here in Colorado, if you're in Ann Arbor, Michigan tea house represent, that's my favorite tea shop. They do a lot of great testing, but um, yeah, buy small quantities and try a bunch of different teas. Chinese greens are where I'm at. It's really hard because there's so many different varieties of flavors. But if you have specific flavors you want Feel free to hit me up on Twitter. And I can do my best to point you in the right direction. Next question is from Michael Reed. He He also let us know that it's read as an art Ed not read like you read a book, because it's. So thank you, Michael. Is it worth bundling JavaScript for websites that aren't using a framework, ie WordPress or CMS websites, the company I work for uses several or uses a large enterprise CMS, and our JavaScript is just a minified mash of several different j s files, most of which are several hundred lines of spaghetti code, it would be nice to break up all these files and store in a modular way, and have the added benefit of using Babel. so we can write modern j s. However, the output of bundle j s seems massive. Won't that hurt performance on page lip? Hmm, this is a tough question for me. Because I haven't worked in CMS websites enough recently to know the right answer. Like if I have, that's one of the reasons why I'm reaching for a headless situation. Because you get a lot of those benefits, right? The code splitting. But then again, you're you are adding the issues of a front end framework. - -24 -00:16:40,799 --> 00:16:46,980 -Wes Bos: The question is saying like we already minify it, right. But if we bundle it is huge. I don't get that. - -25 -00:16:47,279 --> 00:16:59,370 -Scott Tolinski: I don't get that either. Because if they're minifying it that's doing the process do it. So like in that case, why couldn't you use Babel to transform it? Before you minify it? Right? - -26 -00:16:59,610 --> 00:17:23,940 -Wes Bos: Yeah, your bundles not gonna be any bigger than the code that you write. And less and less of what's happening is that you have seen some sort of bundler, that's including every, every single polyfill under the sun. So I don't know, I don't think so. Like the absolutely you should should be bundling your code. And then that opens you up to using things like Babel, and yeah, all kinds of really neat stuff. So - -27 -00:17:24,179 --> 00:18:05,640 -Scott Tolinski: when I wrote a lot of Drupal, we always use Gulp on the back end to do the the compiling. So are you compiling your CSS? What are you doing for your CSS? Is there a build tool, grunt, gulp one of those. If you're using one of those, then you could probably throw Babel in there, too. I can imagine you have that much JavaScript, in a CMS base website that's being thrown. Now that seems like the only time I ever had that much JavaScript is when you're including a bunch of libraries or doing full front end stuff. So this is Yeah, this is a tough answer, I think. But yeah, you should probably be using a bundler. In my opinion, it shouldn't be that difficult. If you're already using something to compile your CSS. You know, - -28 -00:18:05,640 --> 00:18:35,640 -Wes Bos: it's a show I want to do in the new year, I guess it is the new year, but you listen to us is like for years, we've been saying HTTP two will stop us from bundling. And like the whole idea behind a sheep HTTP two is that requests to the server for like eight JavaScript files, and 14 CSS files will only make one request. So like, it doesn't matter if you have 1000 script tags on your page. And people have been saying that forever. And I'm kind of sitting here been like, Can we do that now? Or like, why are we still bundling? - -29 -00:18:35,790 --> 00:18:39,800 -Scott Tolinski: I heard HTTP two is gonna kill graph. QL. Two? - -30 -00:18:39,960 --> 00:18:43,020 -Wes Bos: Well, there was an article on that now HTTP three is out. - -31 -00:18:43,140 --> 00:18:49,260 -Scott Tolinski: Whoa, can we just jump to eight? What is this? What is the HTTP think it is angular? - -32 -00:18:52,380 --> 00:19:33,080 -Wes Bos: So like, and like most servers are supporting this already. So I don't know. Like, I don't know enough about this space. I'm sure somebody listening does you can tweet us or maybe we'll find someone to come on the show. And explain, is that actually true? Like, even like with the reason why people think it's going to kill graph qL is because you will be able to make multiple requests to like, let's say you've got a component that hits your API endpoint 14 times. And that will fire off 14 different requests. Apparently, that'll be fine with HTTP two. But I haven't actually heard anybody just doing that and saying it's fine. So I'd be curious to see what that looks like. - -33 -00:19:33,390 --> 00:21:17,330 -Scott Tolinski: I'm curious as well. I'm very curious. I'm also I'm also curious about becoming a better freelancer. One of our sponsors today is study web development.com. Now study web development. COMM has this really cool bundle, which is everything you need to know to master freelancing. And it has been taken by over 2000 students. It's really super cool and let me tell you, there's a ton of stuff in here, including a freelancing and beyond the E book, CSS and HTML templates, a private slack and Facebook community portfolio templates, client questionnaire, which is meaning you can give your clients before starting a project and SEO checklist to make sure that you are giving your clients everything that they possibly can need. There is a ton of stuff, including lifetime updates, like I can't even tell you exactly how many things are in this. And there's actually going to be some new additions to this bundle as well, including a legal contract. So you don't have to pay a lawyer to write a contract for you. css spice Chrome extension, which is actually pretty cool. It's a Chrome extension that helps you inspect and copy CSS from other websites, and a brand new ebook called a web design and beyond, it was just focused on equipping you to create the most effective websites to get results for your clients. So head on over to study web development.com and use the coupon code syntax for 25% off the bundle. Again, that is the coupon code syntax is study web development. id.com Thank you so much for study web development comm for sponsoring - -34 -00:21:17,520 --> 00:21:20,570 -Wes Bos: next question we have from sky dog. What's up sky dog? - -35 -00:21:21,080 --> 00:21:33,420 -Scott Tolinski: sky dog? there one cat one critique of sky dog asks a really good question here. I'm just gonna say it up front. But sky dog a missed opportunity a spelling dog, da w g - -36 -00:21:33,560 --> 00:21:36,240 -Wes Bos: da da. Oh, what is that? We just have - -37 -00:21:36,270 --> 00:21:39,480 -Scott Tolinski: wolf dog man. Like dog until - -38 -00:21:40,550 --> 00:23:38,310 -Wes Bos: we get we do get a lot of these questions that are phrased this way. Anyway, Sky dog. Hey, guys love this podcast. So flipping much. Thank you for for watching your language dog. I love how you you do your best to keep the content fresh and current as well as interesting. And let's be honest, fun. Thank you, dog. I know both of you put out a ton of content and both together individually. I'm curious to hear if you listened to any other podcasts there in the land, any other types of content that you consume, to hone in on your skills and pay the bills. Thanks. Oh, and peace. Alright, so I listened to a lot of podcasts, but very few tech podcasts. Just because I don't know, I think that's why we made this podcast. I didn't particularly enjoy a lot of these podcasts because the they're not all that exciting or interesting. And the audio is often awful on them. But the tech ones I do listen to I listen to shop talk show. Not all of them, but quite quite a few of them. Chris Carter also has a really good one called the code pen, code pen podcast, whatever the code pen podcast is called. I really enjoyed that one. And then I just listened to mostly things about getting scammed. I'm a big fan of the heist podcast that has every week they talk about different heists that they have. I used to listen to the mixergy podcast, which is a really good one for having stories from people who have sold a business or grown a business or things like that. I don't listen to it all that much anymore, because I listened to it for I don't know, like six years or something like that. And it's starting to get a little bit repetitive. For me at least like not no no shade thrown on the podcast. It's just, I'm in a different spot in life right now. So those are kind of ones I have and just like I'm been listening to the dream that's got sick the other day. Oh, season two and also I figured out they had a like an in between season that didn't do yeah, Lula row with leggings. Oh, it was so good. - -39 -00:23:38,820 --> 00:23:40,200 -Unknown: Yeah, that was great. - -40 -00:23:40,920 --> 00:23:42,060 -Wes Bos: So that's me. What about you? - -41 -00:23:42,300 --> 00:24:32,640 -Scott Tolinski: Um, I so okay. Yeah, I added ones that are tech and tech adjacent here. Because I always give my my sick. Yeah, that are podcasts that are not. And so I listened to the React pad, the React podcast, with fantastic, fantastic. He is the man tastic I suppose. He know. I really love react podcast, not just because I've been a guest there but it's really one of my favorite really just great shows great guests and always learned something indie hackers, which we featured Cortland on this show as well. Indie hackers absolutely love indie hackers. I think I learned so much from different founders. They're just yeah, about growing their businesses and you can just what they should be doing, when I listen to those also tech adjacent is akimbo by Seth Godin. And it's, - -42 -00:24:32,790 --> 00:24:33,750 -Wes Bos: yeah, that's a good one. - -43 -00:24:33,930 --> 00:25:10,500 -Scott Tolinski: Yeah, Kimbo is fascinating, because it's a marketing sort of that type of podcast, but in a little bit more of an abstract way. I found it to be very thought provoking in a way I really enjoy. I also really liked command line heroes command line heroes tells them sort of the history of different programming topics, from the creation of Linux to all sorts of stuff. I really liked command line heroes. I continue to listen to that so I don't listen to it. A ton of tech podcasts that like I said, I listened to a ton of hockey podcasts and comedy podcasts and then a bunch of podcasts about parently. scams and swindles. So - -44 -00:25:10,530 --> 00:25:13,950 -Wes Bos: yeah, that's my wheelhouse. That's it. - -45 -00:25:13,980 --> 00:26:57,330 -Scott Tolinski: Next question is from Kareem Hussain and this is, what are your thoughts on Blaze? Or blazer? Is it a good movement to be an early adopter of a framework like this? Or should you focus on ones that are already in fully released state like react or view etc. Also, I want to say that you guys are keeping me company in the car back and forth the office. Thank you for an awesome podcast. B are from Sweden. Thank you cream. Okay, thoughts on blazer? One I had to I had to Google blazer. Yeah, I've been told about blazer before, right? It's come up before on this podcast blazer for those of you who don't know is that build a client web apps with C sharp for Microsoft. Now, let me tell you, the amount of C sharp I've ever had in my entire life is a whopping zero. So I'm not reaching for blazer simply before because I don't know anything about C sharp, I literally know nothing about it. Other than that it exists as a programming language. And this thing runs through web assembly. So it looks cool. I guess, that said, it's not really that enticing to me, because of the technology. I'm not going out of my way. Because I don't use what it says here. blazer is a feature of ASP dotnet, the popular web development framework. Okay, I don't use ASP. NET, I don't I've never used dotnet, I don't use C sharp, this is not in my wheelhouse at all. And I probably wouldn't reach for it. That said it's by Microsoft. I mean, it's got some backing behind it. And if you're a C sharp person, and you are interested in in an order you work in dotnet, this seems like a great thing to use here. I just don't ever do anything like this. - -46 -00:26:57,630 --> 00:28:22,680 -Wes Bos: Yeah, I would have written this off as silly, a couple years ago. But there's a number of different things out there. What's that other language that you compiles down to JavaScript, but you write your reason you write, oh, camel, no, there's a couple different things out there like this, where you write in either a different language, or you write in this new custom language that we have. And it will compile down to JavaScript. And I think that's really cool. And I think is really neat that people are always constantly re evaluating it being like, hey, wait, is JavaScript the best for this thing. And it might not be like, we might not be writing JavaScript in or might not even be writing TypeScript in five years, you know, it would go a lot slower than five years, probably 10 years. So maybe check it out, I just did a quick scan of the website. And just from looking at it, it gives me a very corporate II feel the link off to like telric stuff, which is they always have like, they used to have that like kendo UI, which was like a super expensive UI library for jQuery, things like that. So I think this probably has a good spot in like the corporate land where you have a lot of developers that know, C sharp and love C sharp and love approaching things in the Microsoft D way. So I would give it a shot. But like, I haven't really heard all that much about it. So I would let's see on GitHub. - -47 -00:28:22,980 --> 00:28:33,120 -Scott Tolinski: We're also not like in tune with the ASP. NET crowd, though. I think we figured out that we're certain there's some communities, we're definitely not in tune with as much as we probably should be. - -48 -00:28:33,660 --> 00:28:38,910 -Wes Bos: No, I mean, it looks cool. I wish I had a little bit more information on something like this. - -49 -00:28:39,150 --> 00:28:48,930 -Scott Tolinski: I would stick with something like react, but if your ASP head, or a C sharp head. Yeah, I mean, sure. Does it try it out? Depends on what you're productive with, to be honest. - -50 -00:28:49,110 --> 00:29:07,980 -Wes Bos: Yes. All right. Um, I would like to ask how you make yearly subscriptions in a website, specifically, Scott does yearly subscription. Also, how do you give a lifetime locked yearly subscription? Yeah, that's interesting. So how does subscriptions work? You want to give us a rundown how that works in your platform? - -51 -00:29:08,040 --> 00:30:48,000 -Scott Tolinski: Yeah. So I've set up a couple subscriptions via stripe or via Braintree. But typically subscriptions work this way you have it depends on how you work by typically you're selling some sort of access, like a roll level, right? We had a whole episode on rolls and rolls can determine who has access to what right. So what you're doing is you're simply selling the toggle to make somebody a pro or a premium user, right? And then that gives them different credibility on the site or credentials credibility. So here we have a checkout form, like you typically have any other checkout form. It has a product which is a subscription in most of your different services. Whether you're using something like Braintree or stripe, or even a subscription service based SAS you have a product that's out Specifically for a subscription. And guess what all of that reoccurring billing, all of that holding on to users often in their, their? What's it called their tokenized payment form, all of that stuff is held at the payment processor, okay? So you buy a product, it tells stripe or Braintree, whoever that this person signs up, and that you are authorized to charge them at whatever interval you have made it clear. And the payment processor holds on to that token and holds on to that authorization. It's all been authorized. Okay. So because it's all been authorized, you don't need to hold anything in your own personal database. And I would strongly prefer not to, to be honest, I don't want to be responsible for credit cards or so - -52 -00:30:48,000 --> 00:30:51,450 -Wes Bos: no credit card numbers, stuff like that gets stored in your database. - -53 -00:30:51,540 --> 00:32:40,740 -Scott Tolinski: Correct? Because people always ask me, can you remove my credit card information from your database? I don't have it. Braintree just simply has an authorization to charge you. Okay. So that's what happens. It basically comes in and says, Yes, the charge was successful, the charge was successful, then you go ahead and you you apply that role, you give them access. And then from that point, everything else is basically web hooks. So your website will receive messages from the payment processor, in my case is Braintree. Braintree sends my website a message that says, this customer account number has been correctly charged, or this customer is about to be charged, or this customer charge was failed. And there's a whole ton of different messages, let me tell you, there's 40 different messages. And I don't have to respond to all of them. Because some of them don't really matter. Like I don't have trials. So I don't have to deal with any of the trial web hooks. But based on whatever web hook is coming in, then you didn't have to adjust accordingly. For instance, if the payment has failed three times and the user subscription is canceled, I'll we will I will be getting a canceled subscription web hook message. And with that message, it has a customer ID, I look up that customer ID in the database with the results of the web hook and remove their permissions accordingly. And then I update their user account with the updated information that has come via that web hook. So everything is basically it works like a product, you buy the product, it goes off into the billing land, and the web hook sends messages it's charging, you don't have to worry about the timing, you don't have to worry about storing data, any of that hard stuff, you just simply have to worry about what happens when they purchase what happens when they cancel all these specific events. - -54 -00:32:40,950 --> 00:33:35,970 -Wes Bos: So we should say real quick, a web hook is like an opposite of fetch request. So instead of you pinging stripe server, and asking for information stripe will ping your server. So the way that you set it up is you give stripe or Braintree or whatever you give them URLs. And you say when this happens, ping this URL with a payload of information. And then Scott has code on his server that will will act accordingly. I use that as well with anytime there is either suspected or or a suspected fraudulent payment, or there's actual fraud or someone has charged back something, they will immediately go and lock that person's account. So while we can sort of get that sorted out, so that's, that's a web hook, because PayPal or stripe will tell me that there's something going on. And that will hit my hidden endpoint on my API, authenticate it and then go ahead and lock down that user's account. Yeah, I - -55 -00:33:36,090 --> 00:33:53,040 -Scott Tolinski: have I should say I have a, an endpoint assert, like a specific endpoint on my server that's only used for the web hook. I have one for my stripe web hook one for my brain, pretty web hook. So you do have to create those server side routes to accept those web hooks. - -56 -00:33:53,340 --> 00:34:05,040 -Wes Bos: And when somebody subscribes on like the 14th of the month, do you just charge them? Like if it's monthly? Do you discharge them on the 14th of every month then? Yeah, so it's not like a prorated? - -57 -00:34:05,100 --> 00:35:50,310 -Scott Tolinski: Yeah, I do personally, yeah, it's not prorated. A lot of the payment processors, they give you the opportunity to do whatever you want. So you could say always charge the first of the month. And I just think it's easier to not have to do that. Right? So you have the flexibility and specifically with Braintree, like the thing I kind of hate about Braintree is that they make it very flexible, but at the same regard because it's so flexible, you have to do everything yourself. And that can be really frustrating. For instance, when you cancel a subscription, you can't just say cancel because that like cancels it out, right? So what you have to do is with Braintree you just say oh cancel this, or I mean stripe stripe, you say cancel the subscription and stripe says okay, I got you. At the end of the term. We're going to do everything you need to do to cancel this subscription with Braintree. You have to set the total amount of billing dates to be one plus whatever The current amount of billing dates is like, it's like you have to do all that stuff yourself. And if you goof it up, or if for some reason the data is incorrect, but the data is in there, there's just no safeguards in the system. They cancel. It removes all the user information, just like Gosh, Braintree, I would really love a little bit of help here. Because you would have to imagine that every single person who uses the Braintree API would have to do these same things. And so it's like, you ever ping them and you say, hey, it'd be really great to have these sort of methods in your API. And they're like, if you're new at hope implementing, and I don't need help. It's just that companies like stripe, people like them, because the developer experience is really nice. And I just don't get that from Ranger that said, for the most part, they give you the things that you need to be able to handle any of those situations. - -58 -00:35:50,730 --> 00:36:04,730 -Wes Bos: And what do you do when I'm sure this gets really complicated? where someone get uses like a coupon, but that year, and then like, the next year? How does that work? Do they get that same rate or they charge more and things like that? - -59 -00:36:04,880 --> 00:37:16,440 -Scott Tolinski: This is a hot topic for me, because I kind of learned my lesson on this one in the past I the language was very explicit in the Black Friday sales, and it would say, you get this price off of the first year of the subscription. And it was very explicit. And that's what it was. But I get so many deals said I just got a rate increase and after. And I feel bad about it, because I didn't want that to be deceptive at all. I that's just how I chose to run the sale. So if you did get charged that like a more amount for the second year, like I will refund the difference and set you up for life. Because this year, what we did for the Black Friday sale is we said this is your black Friday's price for life until you grab. So you have the option to save either. And I just so happened to make a bad choice on that two years ago. So I changed the language about it this year. And I changed the actual process because it was too confusing. I think a lot of the times you get the flexibility to do any of this stuff. You ever think about here on refunds to refunds for the most part just work through web hooks. If I do a refund or cancel on my end, it sends a web hook message saying they're canceled. I don't have to worry about the user roles or anything. - -60 -00:37:16,670 --> 00:37:19,740 -Wes Bos: What if they want to refund like four months into 12 months? - -61 -00:37:19,740 --> 00:37:42,360 -Scott Tolinski: There is a checkbox in Braintree to prorate it. Okay, and same with stripe is way better about all of that stuff you could count on if if there's something that exists stripe has done it better than Braintree. But Braintree definitely just box Pro, right? It figures all that date time stuff out for you. Thank God. - -62 -00:37:42,600 --> 00:37:49,460 -Wes Bos: Wow. Interesting. Very, very complicated. This is much easier for me. by it, you have it. - -63 -00:37:49,770 --> 00:38:03,480 -Scott Tolinski: It's very complicated. Yeah, and I'm implementing enterprise accounts right now. And that's even more complicated. Because you have to think about who owns the account, we have access to the payment method, like there's just a lot there. - -64 -00:38:03,900 --> 00:38:30,810 -Wes Bos: It's such a pain, I'm getting that as well right now. And the enterprise is really interesting, because they want lots of like functionality to like, see if their employees are taking the course and not like that. I don't have that yet. And they're asking for it. And I'm like, I don't want to build that. But also like they're buying, like thousands of licenses from me. So yeah, it's a, it's tough. You know, what is also tough figuring out why your JavaScript went - -65 -00:38:30,840 --> 00:42:14,880 -Scott Tolinski: south, and south for the winter is like geese going south in Denver right now. And the best way to determine if your code has gone south, is to use a tool like Log Rocket. Unfortunately, I guess rockets don't really fly south, they go straight up. But Log Rocket is the tool and the service that allows you to get a handle on the errors and bugs that are happening in your site in the most visual of manner. Let me tell you, I'm a visual person. So this is the kind of tool for me specifically, because I like to see what went wrong, I don't just want the error log what you do get. But what you do get as a session replay a video replay that is scrubbable along with the network requests, along with your Redux store, along with any sort of console errors, you get all of that. And anytime an error has happened on your site, you can see that now, one thing that we like to do on our own implementation of Log Rocket is attach an identity to a user. And so that way, when a bug comes in, we can see that bug happen on what specific user actually triggered that bug. And then we can see what they did to make it happen. And if you want to try out Log Rocket yourself, come on over to Log rocket.com forward slash syntax and you'll get 14 days for free. So check it out. Let me tell you this thing is super duper cool. I absolutely love this service. All right. Next question here is from B A, B I feel like other developers code is always shorter, better structured and easier to read than mine. Any tips or resources on writing good clean JavaScript code or any functional programming language. My This is referred to as the gap in design is the gap between your aesthetic. This is like sort of a loose interpretation of the gap. But it's a difference between your your tastes and what you're capable of producing, I guess is the easiest way to say it. And so I often felt this way. A lot of times I'd see, especially in the what are those sites like code kata are those ones where you'd, you'd do code challenges. And I would preusse, this behemoth that's 30 lines of code. And then you see somebody figure that out, and one liner with a dot map and reduce or something, and you just say, huh, I'm feeling really, really bad about myself. But the important thing is that we're all on a journey here to learn code. And specifically, we're always on a journey to improve if you're not looking at the code you wrote last year, and thinking, Oh, what was I thinking I could do that so much better right now, then I don't know if you're progressing enough. Because I do that all the time. I'm always feeling like, I learned so much or gotten so much better. And he refactor of my code always feels like the code is so much better. So one thing I would recommend is to read code from those kind of sites. I like those code, kata challenges. You can read those things, those, those code, tests, see other people's solutions. And don't just look at the solution and say, okay, it works, but actually look at what they're doing and why and see if those kinds of things really take the time to understand it. Because the more time you put into understanding the reasoning behind it, the better opportunity, you'll have to make those same decisions yourself in the future. Now, another thing I really love myself, is the clean code JavaScript repo on GitHub. We've referenced it several times I live by this thing, I absolutely love it. It taught me a lot about functional programming, in general. But it mostly taught me about writing good clean JavaScript code. And I absolutely love this repo. So check this thing out. I'll link to it in the show notes. - -66 -00:42:15,210 --> 00:43:45,900 -Wes Bos: Yeah, I think with this kind of thing, especially if you're just learning it sounds like you are just learning, don't sweat it, you just have to make it work. However it is that you can. Because if you're just trying to like, if you're just like stressing out over, like, Oh, I could do this in less code, or I can make it more beautiful. You just don't know how to do that yet. And you'll get better and better as you write more code. In the resources, I'm going to plug my own stuff, because I think it's legit, good. You just need to watch other people code and read other people's code. And I think go doing my JavaScript 30 course is is good for this. Because we're in the headspace of saying, Okay, we've got this array of objects. And now we need to filter them and attach, make each one into a div and then attach event listeners to the button inside. And you're okay, I'm in that headspace. These are three things that we need to do, how would I do it? And maybe try go do it yourself and then see how I would do it? Certainly mine is not the best way. Mine is not the only way I get emails all the time from people being like, why didn't you do it this way. And like, there's thousands of different ways to do things. And mine is just one way that I thought was a good way when I recorded the video. And you'll learn a lot about that. And you'll also learn not to, to really sweat about that kind of stuff as much anymore. Just watch other people code and look at other people's code, like Scott said, and you'll get better over time. And it's like Scott said, also, it's just a constant change of Oh, I would rewrite this thing over and over and over again. - -67 -00:43:46,230 --> 00:44:02,220 -Scott Tolinski: That's one of the reasons why I love refactoring so much. You know, it's like a it's a meme at this point how much I love refactoring. But I honestly, I love looking at old code and being like, you know what, this thing could really be so much more elegant with a reduced with a map, whatever. So you know, that's just me. - -68 -00:44:02,760 --> 00:45:28,680 -Wes Bos: Next question I have here is from Brian. Both of you have CMS backgrounds. Scott, what Drupal? Wes with WordPress when you're moving? When you move to freelancing? Did you build for clients using a CMS? Or did you create a custom admin interface for clients to manage their own site? You mentioned some headless WordPress in the past, but what was the norm? Thanks for the great show. Okay. Absolutely. Don't create your own thing. This This was a big thing back in the day and I have worked on tons of custom cage cake, PHP, CMS is because every everybody out there thought we could make this own custom CMS that our clients would love and we could charge them 50 bucks a month to actually use it and WordPress won out over that. And I think we're also starting to see that now with there's a whole bunch of headless CMS is and that I don't think that that has been finalized yet. In terms of like, what is the world that everybody is going to be using. So if you're doing freelance, absolutely don't build your own CMS, you're just going to be you're reinventing the wheel in terms of file uploads, and drag and drop reordering. Like just just, I'm thinking, you upload six photos to a field and drag and drop, reorder them, and then add captions to each of them. That would take you like, three years to code that yourself. Don't tell it to yourself, absolutely use something off the shelf. Yeah, - -69 -00:45:28,680 --> 00:48:21,510 -Scott Tolinski: I know, one thing I do stand for with this is not creating something custom. But and not necessarily customizing what's there, but limiting your users options. So specifically, I don't I know this is possible. And WordPress in different ways, Drupal makes this very easy. But I always would, whenever I would pass off a site to somebody, you have one person, maybe that's techie who can have access to everything right, this is the administrator. But a lot of the times, the people who would pass off a Drupal site to somebody else wouldn't realize that that person is going to get very confused if they load up dribbles back end and see 1000 different options. So I personally always took the extra time to really fine tune permissions, but also the display stuff within Drupal. If someone's a blog, post editor, and all they need to see as blog posts, then do not give them access to the other stuff, the anything, right, give them access to what they need to have and give one person the ability to have access to everything else. Because then it is a custom back end as in it's like customized to what those users are needing. But it's all built in in the same system, you don't have to worry about the whole custom code aspect. So definitely something that I highly recommend is really fine tuning those permissions before passing it off. Ain't nobody want to have a whole big list of Drupal stuff or WordPress stuff in front of them if they don't know what it is? All right. Last question. Hey, Scott. And Wes, you're obviously very successful with your course careers. Yes. Oh, thank you. Do you miss client work? If people for some reason ever stopped buying your courses, which they won't know? You're crazy? No. Would you go back to client work and this from Andre McNamara now I'm so this is a tough one for me. Because I love doing the course development. If I didn't get paid for it, I would love to create more free content. I love making courses. So it would be really tough for me. We know one thing I don't like about doing client and freelance work specifically, is I don't like having to keep track of all that stuff myself, being a manager of myself for you know, client communication, whatever. If I worked at an agency, I would be okay, I would be fine. Having somebody else as a project manager, somebody else just say here, push this code here, do this stuff here, whatever. But to be honest, I've grown so accustomed to working on my own code projects, the way I like to being able to explore and whatever, I would have a hard time going back to that life. That said, I would probably just pick up the agency work like I did before, and I would crush it just like I did - -70 -00:48:21,570 --> 00:49:21,000 -Wes Bos: last time. Yeah, the one thing I miss about client work is the ability just to start fresh, especially because the the types of things that I was working on was mostly, I would come into a company and build something, either by myself or with their team. And then we were handed off to internal team to be maintained, which is the dream because like maintaining software is not as nearly as fun as just creating it from scratch and beginning to choose all the technologies and stuff like that. So I certainly missed that aspect of it. If I were to stop selling courses, would I go back to it? Probably I probably would also try my hand at creating some sort of, of application product. Yeah, yeah, product, something like that is something I haven't really done. And it's saying it's somewhat appealing to me. There's always this like idea in the back on my head to like productize my course platform, which I'm not going to do, don't email me about it. Everybody else does. But one day, mine would be better. - -71 -00:49:21,000 --> 00:49:27,000 -Scott Tolinski: Mine would be better for that. Why? Because I don't know. Just joking. I - -72 -00:49:27,000 --> 00:49:27,780 -Unknown: don't know. Oh, - -73 -00:49:27,780 --> 00:49:36,720 -Scott Tolinski: I got nothing to back that up. Okay. I was just, I was trying to pump up my course platform was Oh, in you didn't want to go along with it. - -74 -00:49:37,110 --> 00:49:53,700 -Wes Bos: Oh, no, sorry. I wasn't I wasn't having that. I would probably like go down that route of building some productizing something like that. It would be pretty good. But yeah, I definitely do miss client work every now and then. But I think I could go back to it no problem and be pretty successful at it. - -75 -00:49:54,120 --> 00:50:43,470 -Scott Tolinski: Yeah. If I were to say Do I like working on client sites or level up tutorials more Definitely like working on my own thing more, even though I happen to refactor it all the time. But just because I have this huge sense of ownership and pride over this thing that is been my baby for so many years now that like, I will, you know, do anything for this site, I worked so hard on this site, whereas like a freelance project, if you get it, you don't always have that and you're just like, Alright, this thing is going to be out of my hair and, you know, a month anyway, so let's just get knock it out. Rather than this, like full on ownership or something. I guess if you have a long term client and an agency or something or a long term client, you can definitely get that. But it's not going to be the same as your own course, or your own platform overall. - -76 -00:50:43,860 --> 00:50:47,100 -Wes Bos: All right, let's move into some sick pics. What do you have for me today? - -77 -00:50:47,430 --> 00:51:18,510 -Scott Tolinski: Sick pics. For those of you don't know, this might be your first episode. Sick pics are the stuff that we pick that we like, it could be anything. A lot of times it's the podcast or YouTube channels or something. This is a TV show. And this is a TV show based on a series of other shows. So I'm going to call out one specifically but all of the shows in this series are fantastic. I absolutely love aerial America. And now I spelled the aerial like the font in here for some reason. Instead of aerial like above, - -78 -00:51:18,870 --> 00:51:19,710 -Wes Bos: like the fish. - -79 -00:51:19,950 --> 00:51:22,230 -Unknown: Yes, like the fish fish. - -80 -00:51:24,600 --> 00:51:27,270 -Wes Bos: mermaid Yeah, right there fish, aren't they? Yeah, I - -81 -00:51:27,270 --> 00:53:02,880 -Scott Tolinski: guess so. But how many times have you ever heard somebody be like, Oh, yeah, that fish. Let me tell you aerial America is basically just like, I don't know, if they're drones or helicopters. They're, they're above shots of every single different thing in the United States, different states. Different. There's one on just Yellowstone. I recently watched one on Alabama, I've never been to Alabama. But why I can't I've driven through Alabama, I've never hung out in Alabama, let me tell you, I learned a lot about Alabama from this thing. There's so much going on in our country of the United States is where I live, that I don't want to say our money. Either way, there's so much going on that you don't know about that is absolutely fascinating to see from an aerial perspective, from all the different little nuances of the different states. I'm a huge fan of the Michigan episode as well as the Colorado episode, as you can imagine, totally not biased in either of those declarations. But check this show out. It's on the Smithsonian channel, I get it on YouTube TV, but it should be available on a lot of different places. And if America isn't your thing, if you're like, screw America, or just a gentler version of that, there's also Arial a whole bunch of other stuff. Let me see what else is there? Oh, yeah. So if you're not into learning about the states, there's Arial, Ireland, Arial Britain, a whole bunch of these seems like they got their whole thing figured out and stuff like what works with these. But there's so many different ones, and they're fantastic. And I highly recommend this. - -82 -00:53:03,420 --> 00:54:21,840 -Wes Bos: I'm going to sic pick an iOS app that's called streamer for Chromecast. So one of the biggest downsides to having iOS is that if you want to mirror your phone, you have to do it to an Apple TV, which I don't want an Apple TV. I got Chromecast everywhere. My family has Chromecast. And often what happens when we visit my family, like this past weekend, I was at my parents place, and we're looking for somewhere to rent for March Break down in Florida. And what happens is like, I'll bring up the app. And I'll just be scrolling through listings and I want to show the four or five other people in the room, what's on my phone, and you can't mirror your phone to a Chromecast you have to mirror to an Apple TV, whoever there's this app that came out I don't know when it came out. But it's awesome. It takes advantage of the screen recording feature in iOS. So it it takes the screen record and immediately pipes it into a Chromecast so it enables just like perfect screen mirroring from an iOS device to a Chromecast device, or or even the google home with a with a screen. And this is amazing. I'm so happy. I like tweeted it out when I got 5000 Android people being like, yeah, we have that already. And it says - -83 -00:54:22,290 --> 00:54:31,410 -Scott Tolinski: in the operating system. Yeah, click away. iOS makes you download an app and click eight things to get it. Yeah, Android arose in that regard. - -84 -00:54:31,920 --> 00:54:46,380 -Wes Bos: So it wasn't even possible at all it like this is a bonafide hack in order to get it to work, but it works great. I'm so happy to actually have it up and running. So check it out. It's called screen streamer for Chromecast. - -85 -00:54:46,770 --> 00:54:47,310 -Announcer: Nice. - -86 -00:54:47,310 --> 00:54:55,440 -Scott Tolinski: Yeah, I must have I used the Android functionality for that all the time. So been missing that my my iPhone. - -87 -00:54:55,800 --> 00:55:07,620 -Wes Bos: Yeah, you should get it I got so many people tweeting me being like why would you need that error? Some guy was like, why don't you just do a video and then play the video back? That's not what it is not the same Dang. - -88 -00:55:07,709 --> 00:55:09,810 -Unknown: Yeah, I know. I know. - -89 -00:55:10,770 --> 00:55:56,550 -Wes Bos: But I love it. I'm so happy to have this. Cool. Um, shameless plugs, I'm gonna shamelessly plug my beginner JavaScript course is at beginner javascript.com. It is the fun exercise heavy approach to learning modern JavaScript from scratch, had a whole bunch of people go through already. It's a big course. So like, I had to wait a couple weeks to get like the first reviews from people, I also see people jumping around just to the things that they want, which is, which was my hope with this course you just like I need I need help with hoisting and functions. And I also want to do all of the exercises just to learn a little bit more, and you see people jumping around, which is cool. So check it out. beginner JavaScript comm Use coupon code syntax for an extra 10 bucks off, - -90 -00:55:56,609 --> 00:57:03,120 -Scott Tolinski: Bo. I'm gonna plug that level up tutorials.com forward slash Pro, this is the pro subscription for level up tutorials. And what you do is you get access to every single course that's available on level of tutorials right now, along with 12 additional courses if you sign up for the year because we release a new course, every single month, like a magazine subscription. These things are awesome. If you're a level of Pro, you also get the ability to vote on the kind of stuff you want to see. Let us know how to improve you also get access to commenting and very soon. If not, by the time that this episode releases actually, probably not. But very soon, we'll have some really nice little updates that include courses and tracks to lead you through which courses you should take when a lot of little nice little improvements coming to level up tutorials this year, especially for pros. We have some really exciting things coming down the pipeline that I cannot wait so if you sign up to become a pro for a year, you'll get access to that all year. Have a look tutorials comm forward slash Pro. That's all I got. All right, - -91 -00:57:03,180 --> 00:57:04,500 -Wes Bos: sounds good. Talk to you later. - -92 -00:57:05,730 --> 00:57:06,330 -Unknown: Bass. - -93 -00:57:08,220 --> 00:57:18,000 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax211.srt b/transcripts/Syntax211.srt deleted file mode 100644 index e8ec18395..000000000 --- a/transcripts/Syntax211.srt +++ /dev/null @@ -1,112 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Taylor. Totally at ski. - -2 -00:00:25,950 --> 00:00:26,640 -Unknown: Whoo, welcome - -3 -00:00:26,640 --> 00:00:54,090 -Scott Tolinski: to syntax. This Monday tasty treat, we're going to be talking about modules. In node, this isn't is going to become more and more relevant as time goes on here. So I figured it was a good opportunity to take the time to maybe give a little bit of an introduction to what the heck modules are a node and maybe how they're different from modules. And the browser. My name is Scott solinsky. And I'm a developer from Denver, Colorado. And with me, as always, is Wes Bos. - -4 -00:00:54,390 --> 00:00:57,210 -Wes Bos: Hey, everybody. Good to see you. - -5 -00:00:57,510 --> 00:01:39,150 -Scott Tolinski: Hey, good to see you, too, Wes. And this episode is sponsored by one of our sponsors, which is also good to see the sponsor, because we absolutely love them over here at syntax and that is Sentry at Sentry dot i O. Now, Sentry is the service that you need to solve all of your JavaScript node have anything issues, because it's not just JavaScript, let me tell you that Sentry works with just about every single thing you could possibly use. Not to mention that just about everybody uses Sentry, from Airbnb to Disney to PayPal, peloton with their cringy ads, and Microsoft and Dropbox and all of these people, - -6 -00:01:39,270 --> 00:01:49,350 -Wes Bos: I was looking through logs on my MB TV server the other day, and I was like just looking through the logs. And I saw a Sentry log there. I was like, Oh my gosh, they're everywhere, - -7 -00:01:49,350 --> 00:04:10,410 -Scott Tolinski: everywhere, everywhere. And let me tell you back end front end doesn't matter Sentry works for you. It tells you what happened when the when the bug happened. It gives you a whole trail of events, there was a click on this on this particular element. And then we'll received a 500 error. Now what was that error? What was the status of that error, you can even tell it which version control commit introduced the bug, you can attach your source maps, you can see the changes of how many bugs over time it happened in your application. You can ignore bugs, for instance, we get this slick really, it's like a an error that frequently comes from a Firefox extension that a lot of people use. And that's not a bug that I need to see. So guess what? ignore it. I don't want to see that thing anymore, because it's not a bug with my application. Right? So Sentry gives you all that abilities and more to again, work with every single thing you need to know to really dive into what's going on with your site and how to fix and solve your bugs, head on over to sentry.io and use the coupon code tasty treat all lowercase all one word, and you'll get two whole months for free. And that's more than enough time to try out because we absolutely love Sentry and you will see instantly why. Okay, so modules in Node before I want to start get too in depth with this episode, you have done quite a bit more research on modules in Node than I have. So I am going to ask you some questions. And first, I want to start off with how they were sort of done before because the one of the reasons why I don't know a whole ton about these is because within my Meteor setup, which I'm using, you just had access to the module import syntax. And now I understand that those aren't actual modules. But in the past, you may have used the import syntax on a node application. And how might you have done that? Well, really all that's happening is that it's Babel and babbles just converting your code into something that node can read rather than actually node supporting those modules. So I'm really interested in knowing what are the benefits of using these modules compared it to a Babel configuration that compiles it back down to the standard requires syntax. So let's get into it here. And let's learn a little bit about node modules. - -8 -00:04:10,920 --> 00:07:53,790 -Wes Bos: Yeah, so node modules were unflagged. They're still experimental. And they've, it's funny, I went back and found a tweet from myself from almost two years ago. And when I was about to release my node course, I said, like should I just, it was, it was still experimental, but I was like, it's probably fine. And I almost released the node course. And it's two years later, and they're still working on it, which is not not any shade on them. It's not like they're dragging their feet or anything. It's just that this is huge in the language, and if they get it wrong, then we have to live with it for the rest of our lives. So they're just spending a lot of time listening to browser developers, no developers package authors, making sure that like everything works well together, so they're no longer behind a flag when you want to use them. So if you're on node three, 14.2 or higher, you can just start to use them. However, they're still missing features. And it's still experimental. So yeah, that's that's kind of the caveat of this episode. So the way that node modules work right now is that they use this thing called common j s, meaning that you have a file, which is a module. And you can either module dot exports, like a function or an object or something. And that's the main thing. That's the one thing that's exported from that file. Or you can do exports dot exports dot name, exports age, and you can, you can export multiple things from that. So it's kind of the same thing as exporting an object. But the reason we have that is because sometimes people want to export a function from that, and you just module that exports a function and sometimes you want to export multiple functions or an object or multiple properties, and that's where you use exports dot, now, we're going to be using ESM. That stands for ECMO script modules. Now, in JavaScript, we have a spec as of ESX, to have modules in the language. And node is making it available for us to use that syntax, since we're already using that syntax in browser land. So there's been a huge effort as to like, move it over. However, it's really hard because we have this huge ecosystem of your own authored code, which is written in common jazz. And then you also have this huge, like, hundreds of thousands of modules in NPM. And almost all of those are currently written in common j s. And we need to be able to have this big in between period, while we're moving things over as our own code bases. And as our libraries get updated to ESM. So we're just gonna like, I guess, in this episode, sort of just detail like where it's at right now and how it will work. And and then we'll have some suggestions as in terms of tools you can use to make the migration easier, or whether you should just sit on your hands for another six months a year. So how do you do it, there's a couple different ways you can do it. But I'm going to be assuming that okay, I want to start, I want to rewrite my code base in or I want to move my code base over to using ESM, which is ECMO script modules. That's what we use in the browser. So the way that you can do that is you go into your package JSON, and you switch your project over by default, your project will be as in common j s. And if you want to switch your project over to using ACMA script modules, you can go into your package JSON and add a type property, and you set that type to be module and that will that will switch it over. Now if you do that, then then all of a sudden, you have to rewrite all of the other files there, I'll talk about a second, there are better ways to slowly do this. But - -9 -00:07:54,150 --> 00:07:59,670 -Scott Tolinski: I was gonna say yeah, cuz that seems like not an option for a lot of people in the migration. - -10 -00:07:59,820 --> 00:09:05,780 -Wes Bos: Yeah, he can't just flip it over. So maybe I should maybe I should say that approach first. So if you want to move over one file at a time, without breaking anything, you don't put this type of module in your package JSON, and you do it file by file. And then the way to do that is you have to use the Michael Jackson script extension, which is the dot m j s, which people sort of curl up in in horror of doing that. And at the end of the day, the node needs to know how your files should be interpreted. So you either do that carte blanche, and you put a type of module in your package JSON, or you do it file by file, and use the dot m j. s extension on your ESM ones. So my idea would be that you just start coding, every time that you refactor a file, you rename that to dot m j s until you get to a point where all of your files are now, m j ss, and then I would flip that switch and rename everything back to dot j. s. So that would that would be like one way to go. But I've got some other options as well. - -11 -00:09:06,120 --> 00:09:08,250 -Scott Tolinski: But then you got to rename all those files. - -12 -00:09:08,270 --> 00:09:12,510 -Wes Bos: Yeah, your your Git history is goofed up, or sucks. - -13 -00:09:12,750 --> 00:09:18,360 -Scott Tolinski: I was thinking like, what would be the downsides to doing some sort of like a Babel thing for your transition that's - -14 -00:09:18,360 --> 00:12:28,530 -Wes Bos: coming. Let me let me give it a sec. So the other option is, is that you can flip it to type of module in your package JSON, like we said, and then you start to use all of those imports. So you have to either go through every common jazz file you've written which has a require in it and flip that over to import, or you have to rename those files to a dot c j. s, which notes to note that it is common jazz, which is kind of a bummer as well. And I should say like this is not that they didn't think of this. There's a lot of there's a lot of like gotchas in terms of how the different Modules systems work. And Babel modules aren't following the ACMA script spec. And that's why it's so easy for Babel module. So there's a lot of like people throwing shade on it. And there's a lot of hard work that's been done here. So maybe like pump the brakes before you send a mean tweet about something like this. Because it's it is a much harder problem than it seems on the surface. I've dove into it. It all all has to do with the fact that ACMA script modules are statically evaluated, meaning that you can tell what the exports are from a common j s module just by scanning the file. Whereas a no jazz common jazz module like you can, you can import and export things as part of the code when it's run, which is like you could generate an export, when the file is read, it's parsed. And then you could generate an export, we can't do that. On the other side, at least, that's my understanding of going into it, you can read the thing yourself. And that changes quite a bit, right? Yeah, well, I think for most people, it doesn't, which is why you're able to use Babel and not have a problem at all with it. And how I actually ended up just using Babel on my project, and it just worked, right. So I think for a lot of people, it probably doesn't matter. But there are some sort of use cases here and there. Gotcha. Then it comes to importing and exporting. So if at some point, you're going to need to import things from a common j s module into a ESM module, so the way that works is that you just use import, and then node will know that you're importing it from a common j s module, but with the import syntax, and it will map that import into into just like a variable. So you can use like, import Express from Express and even though Express is a common j s module, and you're using the import sec, it will work. The downside to that is named exports don't work currently. Mm hmm. So if you are importing, use a fact. And use reducer from react. And let's assume react doesn't ship the ESM package, then that doesn't work, you have to import the whole thing as react and then use the methods off of that now, that will change because that was a huge pain point. For me, that eventually made me saying this isn't ready for me yet. - -15 -00:12:28,560 --> 00:12:31,800 -Scott Tolinski: Yeah, that would be tough. I'd have to rewrite a lot of code. - -16 -00:12:32,189 --> 00:14:01,770 -Wes Bos: In node land, you can use destructuring, you can do something like const, curly bracket use reducer equals require react. But it doesn't work yet. And apparently, there's plans to make it work. If you go to github.com forward slash no jazz forward slash module modules, you'll see a list of everything they want to implement yet, and at the top of that list is being able to use named exports from a common j s module. Because that's not something that you can change yourself, because you have to wait for every single package in NPM to be updated to ESM. Which might not ever happen. There's lots of packages out there that are just done. Yeah, they're never going to be updated. But they're still good packages. So like, my question is here, like, like, what would be the approach to move it because what I ended up doing is, I just went whole hog searched for require, and just went through every single instance, like hundreds of require statements, I replaced them. And it worked. But like that, you can't do that for most projects. Right? So the solution is what you've been asking is use this node module called ESM. It's written by john David Dalton, who wrote lodash, as well. And it allows you to just use both, and it just works. So you can you can use named exports, you can use your imports. And this code was actually forked off of Meteor, which Scott's been using for, like four years, right? Love it. Yeah. - -17 -00:14:01,800 --> 00:14:31,110 -Scott Tolinski: Yeah. And I'm excited about meteors future with now that there's a new ownership behind it. But yeah, it's one of those issues that I've always been like, every time I start a project that's not Meteor and I go import, yeah, you know, Fs for whatever I'm like, Oh, I can't do this without setting up a whole Babel config. And then I got to have a separate web back thing for my server. Don't Babel config. It's like, man, Meteor made that so easy that it was just like, it just works just works to you know, - -18 -00:14:31,170 --> 00:15:41,970 -Wes Bos: yeah. So all you have to do to get this thing working is when you run your app with like node index j s, you just have to do node dash r ESM. And that will require the ESM package first, and it'll do a little bit of magic and then run your app. And it just works. And it's great if I bet that the note implementation will work like this eventually, but until then, this is what I'm recommending that you go. Go ahead. I don't think it's all that Great, especially if you need named imports. Like I was trying to import some packages from like Keystone. And it was called like, graph QL. And I was like import graph qL from graph QL. But it was a named export. So I was like, What do I call this thing that I import and then access the method off of? It was just like a naming problem as like, I don't even like know what to call this thing if I want to import. All right, yeah, you can't destructure it as you import it. That's not part of ESM spec, which is a bit of a pain. So it's not ready yet. It's looking really, really good. I'm really happy that it's there. But if you're using the library ecosystem, I would reach for this ESM package. - -19 -00:15:42,330 --> 00:16:17,100 -Scott Tolinski: Yeah. Cool. All right. Well, that I think that clarified a lot of things. For me, this is one of those non issues that I've had for so long, just because I've never, I haven't looked at a require statement unless I really need to just just because So no, this is absolutely fascinating. I'm going to keep up a little bit better on this overall development of this with a node just to know what the differences are here, I was thinking that they would just flip a switch, and all of a sudden, everything would be peachy keen. And it would all just work correctly. But no, it looks like it's a little bit. Yeah, - -20 -00:16:17,130 --> 00:17:00,540 -Wes Bos: yeah, there's so much little fiddly stuff that they have to think about. And also things like importing JSON files, you can't just do that as part of ESM. Because it's not a JavaScript module. But in node, you can just require a JSON file, and it will load that object into your variables. So they have to sort of like Webpack, they have to build a bunch of these different loaders. And I'm really hoping that they're just built in and they just work. And I'm really hoping that you don't have to have like a node pack file that you have to config totally, but they're very much like, we don't want to have to have a whole lot of config. The only config you have to do is have a type of module, or you have to use the Michael Jackson script or the CJ s script. - -21 -00:17:00,800 --> 00:17:02,760 -Scott Tolinski: Cool. Well, thanks for clearing that up with - -22 -00:17:02,850 --> 00:17:21,750 -Wes Bos: Yeah, no problem. Hopefully you learned a thing or two, and I'm sure we'll update it. Maybe in six months or so to see where we're at with this type of thing. Go to the node j s modules GitHub repo, I'll link it up in the show notes. And you can see sort of the things that are still outstanding with this. Awesome, cool. Well, we - -23 -00:17:21,750 --> 00:17:26,330 -Scott Tolinski: will catch you on Wednesday, where we're gonna be talking about, - -24 -00:17:27,150 --> 00:17:29,010 -Unknown: Pika, Pika back, - -25 -00:17:29,010 --> 00:17:46,710 -Wes Bos: Pika. pika Chu package. I'm recording this right after this episode. And I'm glad we had this because we're both in the headspace of modules. ESM modules are the way forward and pick a package as far as I know, it's trying to solve this as well. - -26 -00:17:46,890 --> 00:17:50,910 -Scott Tolinski: Package building reimagined. Yeah, so Dan, for that one. It's gonna be really exciting. - -27 -00:17:51,320 --> 00:17:54,000 -Wes Bos: All right, talk to you later. Please. - -28 -00:17:55,800 --> 00:18:05,570 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax212.srt b/transcripts/Syntax212.srt deleted file mode 100644 index 3f0ce3b03..000000000 --- a/transcripts/Syntax212.srt +++ /dev/null @@ -1,784 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:10,530 -the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and Wes Bos. - -3 -00:00:10,530 --> 00:00:54,630 -Wes Bos: Welcome to syntax the podcast with the tastiest web development treats today we've got a really good one for you. We've got Fred shot on the podcast to talk about pika package, which I've been following for I don't know how many months now. And I'm really interested to figure out what it is and how it fits into your workflow and what it replaces and all that stuff. So we'll have him on in just a second. So we've got two awesome sponsors today. Sanity, which is a structured content CMS, they've got some new, pretty cool, they've been rolling out some features like crazy lately, we've been talking about their preview feature, and Freshbooks, which is cloud accounting software, with me as always is Mr. Scott to Lynskey. How you doing today, Scott? - -4 -00:00:54,719 --> 00:00:58,799 -Scott Tolinski: They doing good. And I don't have really a whole lot to say, but - -5 -00:00:59,339 --> 00:01:04,370 -Wes Bos: this is a third podcast we recorded today. So he's out of things to talk about. Yeah, - -6 -00:01:04,400 --> 00:01:07,890 -Scott Tolinski: the pleasantries, although we can only talk about the weather so much. - -7 -00:01:07,930 --> 00:01:16,660 -Wes Bos: Yeah, I like talking about the weather. Yeah, sometimes allowed like it. Yeah. Um, so Fred, welcome. Thank you for coming on the podcast. - -8 -00:01:17,110 --> 00:01:18,460 -Fred K. Schott: Hey, thanks for having me. - -9 -00:01:18,720 --> 00:01:40,320 -Wes Bos: So you've built this thing called pick a package. And it's, as far as I can tell, it's a whole bunch of stuff. And really why I've been paying attention is you have like, a bit of a background, both working in Node land, as well as you've worked at some large companies. So do you want to give us like sort of a rundown of who you are, and whatnot, and then we'll dive into what is pika package? - -10 -00:01:40,530 --> 00:01:45,630 -Fred K. Schott: Yeah, sure, I'd be happy to, um, if you want to ask me about the weather here, too. I'm free, as well. - -11 -00:01:45,779 --> 00:01:46,680 -Wes Bos: So where are you from? - -12 -00:01:47,250 --> 00:01:50,700 -Fred K. Schott: I'm in San Francisco. Right now. It is sunny for the first time in a while a nice, - -13 -00:01:51,750 --> 00:01:52,440 -Wes Bos: beautiful. - -14 -00:01:53,100 --> 00:02:46,380 -Fred K. Schott: Yeah, I've been working on pika for about a year. Now, this might even be like right around the time where I launched the first website, one year ago, it comes out of work I did, kind of starting at Google. So trying to take a look at the space where we have this new sort of module system for JavaScript coming in ESM IDs modules, which was kind of ratified in 2015. But took a while to get into all the browsers. And now four years later, we are essentially here where it's supported by a lot of modern browsers. So it's this kind of new chance to take a step back and take a look at all these different preconceived notions, best practices that have built up for maybe a different role, that doesn't make sense anymore. So it's really just a it started, at least as a project to experiment with different things in that area. And it's started to coalesce around a few different ideas that have taken off as experiments on their own right. - -15 -00:02:46,860 --> 00:03:31,650 -Wes Bos: Okay, cuz we just like 20 minutes ago, we just finished right doing an episode about modules in Node. Okay. And it's hard. Yeah, it's like not totally there yet. It's obviously still in development. But like, there's like no named imports from common j. s. And we have this whole, like, history of like, NPM is full of all these packages. And it would be nice if node and NPM. And everything just started today. And it was all ESM. Yeah. Not with a million other packages. Yeah, yeah, exactly. So like, what, like, what is bigger package then? Like, if someone were to ask you, what is it? I know, there's a couple different pieces to it, but want to give that a shot? - -16 -00:03:31,860 --> 00:05:42,690 -Fred K. Schott: Yeah, definitely. It definitely is a few different things right now. But I'd say what it is, conceptually, as it's asking this question of how would you do web development if you didn't need up? onblur? I'd say that's the biggest kind of thing that we've kind of latched on to as a question to ask now that we have modules that run on the web. So the question is, why do we use a bundler today? Yep, you might think we use it for production, which is nice. There are definitely some production reasons to use it. You might think, because it's a really nice development flow. There are all these things that have been built up in that world. But the big reason we all needed like that, that need to use a bundler there is no one really does much web development today without one would, and that would be Webpack or parcel, create react app that's like that bundler level tool. Yep. The reason we all use that really is because of NPM. As you said, all these old packages on NPM, millions of like a million packages are all written for common j s, which is that node syntax that was really championed by them, no champion that NPM was built for node originally. So that was kind of the lingua fresco, the standard module system. But the one downside was that it didn't run on the web natively. So a lot of let us all come into this one single JavaScript ecosystem, node web, it brought us all together, which was awesome. But the downside was that web developers had to pull a tool that had previously really only been for production, bundling, you know, you'd basically used to back in the day, concatenate all your JavaScript files into one for production reasons. Development, you'd still Yeah, that's the one thing where it's like I'm not saying we go back to like concatenating files together ourselves like the Julian that's come out of the last decade is awesome. But the downside has been that it's put a lot more strain on the development process. So bundling is now a development concern. And when you make changes locally, you have to rerun your bundler, you know that waiting for a compile step that we see on create react app and other tools. You know, on some projects I've worked on over the last few years, that's been a few seconds, it's been up to 10 seconds on one. That's every change, you're just kind of stuck there waiting. As a developer, that's, that's kind of a game. That's something that I don't like. So there's a lot that you can start to look at there. - -17 -00:05:42,750 --> 00:06:26,070 -Wes Bos: Yeah, just being able to reload like, so when I just launched a big beginner JavaScript course. And when I got to the the module section, I was like, Look, you can do almost all of this just with the like script type module, and then we are importing and exporting down the chain as far as you can go. And then we got to the part where we wanted to use some NPM package, and it got a lot Messier. And yeah, at that point, I say, this is where you need a tool, unfortunately. And I showed him some options and things like that, we ended up using partial in there. But so you're saying like this, Pika is going to solve that I'll be able to use just regular what script type equals module and then I can use pika as a registry on - -18 -00:06:26,070 --> 00:06:53,010 -Fred K. Schott: that kind of so before we get to the registry part, this is the before we ever got to that it was really just taking a look at exactly what you said, which is that it all works great. This whole new tech, this new language, it's fantastic. And then you have to talk to NPM. because no one's really doing web development. Without it today. What we started with was this project called Pico web, which we're renaming to snowpack, just to give it its own name, snow pan identity. snowpack, - -19 -00:06:53,160 --> 00:06:54,390 -Wes Bos: that's a nice name. Yeah, - -20 -00:06:54,450 --> 00:06:55,530 -Scott Tolinski: it is a good name. - -21 -00:06:55,530 --> 00:06:57,300 -Fred K. Schott: You have to you have to whisper it. - -22 -00:06:58,410 --> 00:06:59,070 -Unknown: Yeah. - -23 -00:07:00,150 --> 00:07:03,660 -Fred K. Schott: What snowpack? It lets you do is it's a simple, - -24 -00:07:03,780 --> 00:07:06,750 -Scott Tolinski: you're really good at naming things. I'm just gonna say that out of the game. - -25 -00:07:08,070 --> 00:07:58,650 -Fred K. Schott: Throw that. Right. Yeah, this is that that's a year in the making. So that was, you know, that was a group effort. People jumped into that issue. But yeah, what essentially does is it looks at that as the problem. So instead of saying you need to bundle your whole app, it really says okay, actually, you can get really far, it's just NPM you need to worry about, so why not build a bundler just for NPM. So what snow pack does is it adds install time versus at development time. And this is where the naming is, you know, you can call it what you want, you can say that it bundles your dependencies, you can say it's a post install script. But it essentially takes your dependencies and turns them into these single file ESM JavaScript modules. So react, react, any dependency you want, you can essentially just pull into a single JavaScript file that can then be imported by your project by your app. - -26 -00:07:59,490 --> 00:08:00,090 -Wes Bos: Okay. - -27 -00:08:00,570 --> 00:08:20,850 -Fred K. Schott: So you run it, once you run it, when you mess with your installs, maybe you add a new package, maybe you just run npm install for the first time. And then now you're able to do development locally, you're not running a tool, every time you make a change, you're not recompiling bundles every time you make a change. You're building your app locally without a ton of tooling. And then now all you need to do is run that bundler once with install. - -28 -00:08:20,850 --> 00:08:52,909 -Scott Tolinski: Oh, that's really, really great. I don't know, just exciting use case for this, the fact that it's not just going to replace something that you're using, but it's going to take something that every single developer who's used a modern bundling solution knows this pain point of sitting in waiting when inevitably, like he said, You shouldn't really have to unless you're installing something new. Right? So I think that right there clears up a lot of the why, for me, this is a that's a nice little nice little value add. - -29 -00:08:53,250 --> 00:09:13,649 -Wes Bos: Does this mean like, so I'm just looking at the docs here, and you import a module. And instead of importing it from an example, you have preact, instead of importing from preact, you import it from like local directory web modules, it makes a new folder called web modules, and then it puts the entire package into a single JavaScript file in that folder for you. - -30 -00:09:14,100 --> 00:09:39,510 -Fred K. Schott: Yeah, so it does what a bundler does right now for your whole app just on Yeah. pendency. So any transitive files that it would be loading, even if those are common j. s? If he has those all into one JavaScript file, that is ESM Ah, so you get one preact dot j. s file, even if react had dependencies, which I don't think it does, but it has local files, it has, you know, it's not a single file package, but it essentially installs it as one, even if it has dependencies itself. - -31 -00:09:39,870 --> 00:09:48,049 -Wes Bos: And what if something like shares peer dependencies? Yeah, like three modules has appeared dependency does this is there something for that yet? - -32 -00:09:48,330 --> 00:09:53,190 -Fred K. Schott: So I lean on roll up a lot. It's really a special roll up config column. - -33 -00:09:53,220 --> 00:09:55,380 -Wes Bos: Okay. So you didn't build your own. - -34 -00:09:55,590 --> 00:10:08,250 -Fred K. Schott: So whenever roll can do it can handle its peer dependencies, it can handle you know, it does all that pretty smartly, because it's the same problem we've been having to handle for apps, right? code splitting and chunking. And all that. Just move down a level. - -35 -00:10:08,970 --> 00:10:12,600 -Wes Bos: And does that mean I'm not gonna have a 40 gig node modules folder? Then? - -36 -00:10:14,009 --> 00:10:19,110 -Fred K. Schott: You still well, we still don't have that node modules. So we essentially create a web modules. - -37 -00:10:19,279 --> 00:10:20,070 -Unknown: Oh, - -38 -00:10:21,289 --> 00:10:23,100 -Fred K. Schott: yeah. So it really is post install, - -39 -00:10:23,130 --> 00:10:28,380 -Wes Bos: so it installs it and then pulls it out of there. Yeah. Okay. Okay. Wow. - -40 -00:10:28,399 --> 00:10:29,429 -Fred K. Schott: Yeah, exactly. - -41 -00:10:29,429 --> 00:10:33,049 -Scott Tolinski: So you should have gotten the two terabyte MacBook Pro is what you're saying? Yeah. - -42 -00:10:34,500 --> 00:10:42,390 -Fred K. Schott: It would be interesting to maybe pull from unpackage or from our CDN, but essentially, right now, it just, it's on top of node modules, it's on top of your npm install. And - -43 -00:10:42,390 --> 00:10:47,640 -Wes Bos: that that just allows you to use just regular HTML imports. That's not called HTML imports. That's - -44 -00:10:47,640 --> 00:11:45,240 -Fred K. Schott: not what it is. It's no just Yes. or JavaScript. Or it's, yeah, it's it's an interesting thing. We're now you kind of get into Okay, so now what's possible that you have this, you can technically run basically build a whole modern web app using modern NPM dependencies, without any other build tools. So you're literally a static assets server, and you make a change. And then you refresh your browser. And without any build tool in its, it's all just there are the changes there. But people like to use Babel, people like to use TypeScript. So there's this other side of it, where you can still use build tools. We're not saying okay, that's all built tools. That's all tooling at all. All we're saying is that you don't need this whole bundler. You can just use the tools you're wanting to use and TypeScript and Babel, they're still really fast at per file compilation. So you can still set up basically Babel on your source directory, you make a change, and now that will just have to recompile that one file. So you get TypeScript, watch. You get Babel watch, you get these things that are actually very good at single file changes. - -45 -00:11:45,539 --> 00:11:46,890 -Wes Bos: Okay. Wow, - -46 -00:11:46,919 --> 00:11:48,450 -Scott Tolinski: that's really interesting. Yeah, so - -47 -00:11:48,450 --> 00:12:00,270 -Fred K. Schott: no more 10 second, wait times for a bundler, you know, five second wait times you essentially, it's as fast as Babel or TypeScript can recompile a single file, which is, you know, milliseconds, or maybe hundreds of milliseconds at the worst, but certainly not seconds. - -48 -00:12:00,600 --> 00:12:23,010 -Wes Bos: Mm hmm. And I remember that with back in the day, we had like a SAS app that would take like, 32 seconds to recompile. Oh, is awful, right. Even like, I'm just thinking about how awful that used to be. I got a new MacBook. And just my note app restarts so much quicker on my new laptop. I was like, Oh, nice. That's such a improvement. - -49 -00:12:23,429 --> 00:12:51,809 -Fred K. Schott: Yeah, it's all these languages that we use, like sass and and, and using a bundler. It's like, we're writing a language that runs on the browser, like compiling and getting all these compiler benefits, that would be one thing, but we're essentially doing all this build time to still just ship the exact same language, right? Yeah, that's a shame. So hopefully, this is at least a start in that direction. It's been around for about a year, it's got some good, you know, we're hitting v1, soon, it's got some cool production things you can still do with it. It's it's a really exciting direction. - -50 -00:12:51,809 --> 00:13:40,980 -Scott Tolinski: I'm really excited that you you've clearly thought about aspects of like the barriers to entry of this, like, specifically people not wanting to ditch their already established build process. I think, to me, that was like one of the biggest unclear points of this whole thing was like, can you use this with whatever you're using right now? And how much buy in Do you have to get because a lot of times people will hit, you know, they'll have this major project, they've built it with one thing, they want to try this new thing, but it's it's too much of a hassle. So if you were having a project that already existed, could you maybe step through what the, their refactor process would look like to maybe even just attempt to add this for not the entire thing, but for maybe a small subsection? Like would the migration to this look like? - -51 -00:13:41,070 --> 00:15:22,350 -Fred K. Schott: Yeah, certainly. Yeah, that's definitely the interesting part of this is, it all depends on how far into the bumbler ecosystem you've built yourself. So the more you can consider some things that we do, like let's just call them they're like Webpack things like importing a CSS file right now, that's not really a defined thing. Webpack certainly, they just, they described it really, it's whatever plugin you're using, just defines that behavior when importing the CSS file, importing JSON importing things without a file extension. These are all sugar essentially, on top of something more complex that Webpack lets you do. So depending on how many of those Webpack specific or bundler specific things you're doing, you do need to start to rethink of Okay, what do those look like in a actual browser native way in a way that actually is defined in the spec and would run CSS is a good example of that. Or let's say you actually do lean heavily on importing CSS, as if it were a JavaScript module. So you do that import keyword, and then the string is a local path to your CSS file. That's not important JavaScript, that's important CSS that would never run in the browser. Webpack handles that for you using this magic bundling. Instead, you have to think about what that looks like either by using a specific library. So there's a few out there that exists. cs z is a really cool one, where it lets you do something very similar. Where you can either import a CSS file, essentially, it's the exact same workflow. But instead of using a ESM import that is a browser specific thing, you use this library, you say CSC. And then you put the string of the file you want to load. And then at runtime, it'll instead import that directly. Things like that. Are the are the interesting thing to tackle here? Depends how far into what pack you've gone. Interesting. - -52 -00:15:22,830 --> 00:15:25,919 -Wes Bos: CSC is the Canadian society for Zoo all - -53 -00:15:29,760 --> 00:15:31,679 -Fred K. Schott: they had amazing open source program. - -54 -00:15:34,740 --> 00:15:41,309 -Wes Bos: So CST is a runtime for CSS modules with sass, like pre processing. Interesting. Yeah. - -55 -00:15:41,309 --> 00:15:43,169 -Scott Tolinski: I've never heard of this. Yeah. - -56 -00:15:43,380 --> 00:17:06,480 -Fred K. Schott: Yeah. It's it really is this kind of whole other world you step into, um, ah, I would say works. Yeah, I would say the whole caveat to this stuff is don't take whatever you're using at your company that's working great. And feel like you have to rewrite it today or anything like that, um, this really shines as a if you're building a new app, and you haven't gone far down a path that's harder to walk back, then this is a great way to start and you know, get your feet wet. And then it just becomes Okay. How important is it maybe if you have a really painful death process that is taking 10 seconds? You know, it really depends on what is your pain? And then how hard is the solution based on what you've done? I'd say if you're especially if you're looking to like maybe eject from Webpack or sorry, from create react app, or something similar, where you've been using this fully featured environment, this fully featured dev environment that they've set up for you, you go to a jacked and all of a sudden, you're dumped with a four or 500, line Webpack config, that you have no idea what it's doing, right. Yeah, create react app is great, because it's a total mystery. Exactly. It takes care of it all for you. But you know, only to an extent, right. As soon as something breaks, you're stuck digging through that as soon as you want to customize it, unless you want to use maybe an add on tool. But anyway, that's a really good chance to take a look at this as well as, okay, if what I'm using isn't working for me anymore. If I'm feeling these pains of build time, wait time, how can I maybe take another look at a different solution. - -57 -00:17:07,050 --> 00:17:52,890 -Wes Bos: That's really cool. I also think like this is just like, awesome for beginners as well, because there's not a, there's not a huge hurdle to getting something up and running. Or even just like for me, like I've got an hour or two to work on a little idea that I have, I don't necessarily want to spend that time fighting some sort of config and whatnot. I just want it to work. And it's wanted to work in the browser. And I think we're like, I kind of feel like with this kind of stuff. And also other stuff in the industry. We're getting more back to the olden days where like, I would just, it used to be you just download a jQuery plug in and drag and drop it. He just included with the script tag. And obviously, it's a little different now that we have NPM it's much better, but I feel like it's Do you feel like it's getting easier? And obviously these tools are making easier? - -58 -00:17:53,280 --> 00:18:48,180 -Fred K. Schott: Yeah, there's definitely this like, nostalgic feel to it, where you still have all this same power that you have, you can use these NPM packages, maybe you have to import CSS differently. And whether that's a better way or a worse way, I think is up to interpretation. But yeah, I mean, you open up all these really cool and very nostalgic feeling things like View Source suddenly becomes the default again, right? If I'm deploying my whole site, as I've written it, then every file is as written. And maybe that's enough for you. So you're getting the jesup compression, and you're saying that's enough minification for me, or maybe you send you know, another minification step, maybe you add a bundler for production, like, it starts with a much simpler default case for exactly that hello world, you know, simple example you're talking about. And then if your Facebook or your some big company where you can afford a production team, you know, a web pack team. If you can afford to invest in that, then certainly you can get all the same benefits that exist today, but just with a much lower barrier to entry. - -59 -00:18:48,930 --> 00:19:45,030 -Scott Tolinski: Yeah, this we'll get into this a little bit more, I think after we do an ad reader so but this CDN thing is totally making me reminisce and of the times when you could like go to add jQuery or something and whoever would just be like, Oh, yeah, you just copy the script and place it at the top. And then next thing you know, you got, you know, 20 HTTP requests for different plugins or whatever all hosted on some mystery CDN that you've, you know, different CD ends and who knows where they're at. But I think what we want to do real quick here is take a quick break and talk about one of our sponsors today which is Sanity, and Sanity is located@sanity.io. Now Sanity is the the backend CMS to build a structured content in it is really exceedingly modern, and they are rapidly growing and adding new features. So Wes wants to talk about one new feature which is previews. - -60 -00:19:45,390 --> 00:21:24,750 -Wes Bos: So Sanity just rolled out this like really cool thing where you can iframe in your content, most likely that would be your website. And as you are typing in your editor, you can preview that as well. We'll look on your actual website. So they built this amazing thing where you can just type and you can preview it. And it looks like the code to hook it up is pretty simple. Because the way that you configure Sanity is not through like a GUI or something like that the way that you configure it is by writing these config files that are written in JavaScript. And you can just hook up a preview iframe, and it's up and running. And then the video that they launched to show this preview is pretty neat, because obviously, you can preview a website. But then they also show you can preview like social cards. So like as you are editing the metadata of a post or something or the title, you can like pipe that into like, what would it look like as show up as a Twitter card or a Facebook share interesting, or they also showed you could preview it as colorblind users, or you could just like apply colorblind filters, with I'm assuming CSS overtop of it. So it'll show you what it looks like from a color, but colorblind, you can preview as printable PDFs. I don't know, it's just such a cool way to think about previews, I would assume most people would use it to preview what it looks like on their website. But they've sort of taken a step back and allows you to control it a little bit more, however you want. So check it out, sanity.io forward slash syntax. And that's going to get you double what the free plan does. Thanks so much to Sanity for sponsoring. - -61 -00:21:25,410 --> 00:21:39,300 -Scott Tolinski: So if you had to pick a dot Dev, you'll see a search bar. And the very first link, you'll see really is the registry tab. I'm really interested in what exactly the registry is and how it relates to everything we've talked about so far. - -62 -00:21:39,990 --> 00:22:16,440 -Fred K. Schott: Yeah, definitely, that would be our next kind of big bet. So we started with all this open source tool and and now we're starting to experiment with some more city and register, you're kind of taking a look at the whole ecosystem itself. The registry is essentially looking at that problem from the other end of it. So we can keep using tooling to make development easier. But at the end of the day, what the tool is trying to solve is this fact that most of NPM isn't written for the web. It's written in common j s, or maybe it's written for ASM, but it was built, assuming a bundler would consume it. So it could still be doing these things that were never really tested or ever meant to run in the browser. - -63 -00:22:16,980 --> 00:22:37,830 -Wes Bos: Yeah, like, like react is probably written with ESM. But then they bundle it and ship it as a common j s, so that your Webpack can then eat that and then turn it back into ESM. Yeah, to use it. And then eventually, you bundle it again, and it'll ship it back out. J s, probably a bundle it up. - -64 -00:22:37,830 --> 00:24:18,660 -Fred K. Schott: It's turtles all the way down there. Yeah, right. A lot of web code is just built, assuming that there would be a bundler. Because again, that's that was the only way to use most anything on NPM. And by it was the deal that we made to have everyone joined MPM was that the language that we would all use was this common language that had already been chosen, which was common j s, you know, never meant to run in the browser. Without doing so, what the registry is, is it's a chance to start again, and start building packages that run anywhere and that run in the web natively, I would say, you know, right off the bat, again, going back to how does this play with the current ecosystem, it is essentially a Think of it as like a garden with an NPM. So every package in our registry is published to NPM. So you're not, you're not having to leave that place where all your users are today. But what it is, is, it's a way to build packages, where you can guarantee that every package in that registry in that collection is ESM. It is built for the web, it's tested on the web. And we're doing a lot of cool things in that space, where we see a bit of a fracturing of what it means to do JavaScript. So before everything was Webpack, or node, right, those are the two let's say, you know, parcel and maybe other things, but you were essentially as a package creator, targeting those two things. Today, you have Dino, you have these other registries coming up, you have GitHub package registry on the scene, you have em still, you have no DSM, you have no common jazz, as the world kind of fractures for whatever reason. That is, you see that the burden has really been being placed on package creators to create the perfect package that would somehow run in all these environments. - -65 -00:24:19,740 --> 00:24:37,380 -Scott Tolinski: But how many times do you get a GitHub issue that this doesn't work in my environment? For these reasons now is a package manager you're now having to troubleshoot some environment that you're probably not even used to using just because of different requirements via different build tools, different build processes, all that stuff? - -66 -00:24:37,680 --> 00:25:26,970 -Fred K. Schott: Yeah, exactly. Right. And and what that looks like is okay, I need to go and research what that field of the package JSON might be doing for that bundler, but I can't have it affect the bundles that are you know, right. Yeah, exactly. No one really owns it. And so you just get everyone overwriting each other. And we saw that a lot with people trying to build universal packages where essentially everyone assumed that module was there. So module was filled with In a package JSON that you could say, this is ESM. But what that would be like, Oh, great, you know, module code, I'll use that on node, I'll use that in the browser. So all of a sudden, you had this. You had this world where you actually couldn't describe what you wanted to do in a way that every tool would really follow in the way you want it. So having a target that some bumblers meant for the browser consume some bundle is meant for no to consume. Yeah, it's a bit of a mess. Not to put it lightly. - -67 -00:25:27,030 --> 00:25:30,450 -Scott Tolinski: It's a bit of a mess. I think that is like the tagline or what? - -68 -00:25:32,100 --> 00:25:33,750 -Fred K. Schott: Certainly, certainly for beaker. - -69 -00:25:35,670 --> 00:26:00,300 -Wes Bos: Yeah. So pekah is the registry it so like that? Is it its own registry? Does it sit on top of NPM? Is it both? I know that the idea is that nothing gets into the registry, unless it's ESM. Which is great. But like, like, where does it sit in relation to something like NPM? And where does it sit in relation to something like unpackage? Yeah, - -70 -00:26:00,330 --> 00:27:23,340 -Fred K. Schott: we're, we're still trying to figure that out. Okay, right. Now, it's basically in this closed beta, we have a few, if you head over to our Patreon, you can sign up for that closed beta. So it's a pretty limited set of users right now, as we try and figure this out. Okay, I did it today, it is a little bit of everything. So it's, imagine if your registry just was kind of by definition, or like unpackage, it was a thing that you could hit in any environment. So the browser can hit our registry. And just like our own package works today, it basically loads that module, you can technically do NPM, install, and then put the URL of our of our registry, and it'll install the package, Dino can import from our registry. So it's is almost just like a morphus kind of blob out in the cloud, where whatever environment you're in, you can hit it, and it will get you the package you need. And that pulls from the same CDN logic that we built out originally for NPM. Where if you're hitting it with a modern browser, and you want to load it directly on your site, so basically have the user instead of installing it as a developer and bundling in or anything like that, you can essentially send that import directly to our CDN to our registry, to your user in your built production app. If you do that, then if they're on a modern browser, they'll get the latest Yes, 2019. If they're on a legacy browser, they'll get that yes. 2017. So we do this really cool differential, sir, ah, default, where every environment gets the perfect JavaScript for them. - -71 -00:27:24,210 --> 00:27:53,190 -Wes Bos: That's really cool. I was thinking that I was like, I was just like thinking like, Man, it's so cool that just like regular JavaScript imports, no, bundler nothing you can import from a URL, right? Like you can import react from the registry dot whatever and forward slash react. But then that doesn't take care of like older browsers, right. But you're saying that it will detect the user agent and then serve up the the appropriate one? Yeah, that's it. Wow. That's neat, huh, fair. Yeah. - -72 -00:27:53,190 --> 00:28:19,620 -Fred K. Schott: And this, this applies back to what we were talking about even earlier. But every browser except for really, ie 11. And then UC Browser and China supports this. They're obviously the the minor ones that don't, but those are really the only two major browsers that don't support this. So if you're building a website that isn't targeting, you know, enterprise, ie 11, or maybe isn't targeting China today, that's certainly a pretty good option for even for production. Very interesting. - -73 -00:28:19,650 --> 00:28:20,250 -Unknown: Yeah. - -74 -00:28:20,370 --> 00:28:54,990 -Wes Bos: Oh, that's really neat. Yeah. Yeah, I really, I really like that. Like, you clearly have like, taken a step back at all of this. And like thought, like, Huh, like, there's probably something we could do here. Like, I always appreciate people like that in the community, because like, I'm just the kind of guy that I just, I just use it because that's what we use. And we keep going, right? And then there's, there's like, these visionaries that take a step back and say, like, this is weird that we do this. And it's only because of the all of the steps that led up until today. That's why we do it that way. But like, what if we were to think about it in a different way? So this is very enlightening. Yeah, it's - -75 -00:28:56,220 --> 00:29:01,050 -Fred K. Schott: react gave that original presentation where they announced it, or maybe it was one of those announcements where I was there. - -76 -00:29:01,050 --> 00:29:01,830 -Wes Bos: Yeah. - -77 -00:29:03,300 --> 00:29:07,710 -Fred K. Schott: What was the title of that? It was like rethinking best practices. Like that was - -78 -00:29:07,860 --> 00:29:30,840 -Wes Bos: no, that was, um, Ben Allman, who was like the jQuery plugin, cowboy. He, he said, We are all sending snarky tweets out the release of react. I thought it was silly. Yeah. And he said, Yeah, he said, A react rethinking best practices. And he tweeted it out. And they took that tweet and go, we are rethinking best practices. Thank you. - -79 -00:29:32,340 --> 00:29:40,710 -Scott Tolinski: I remember sitting at my desk and one of my co workers was like, they'll they just just had this awesome talk on this thing called react. I like looked over at a screen. I was like, Oh, - -80 -00:29:42,180 --> 00:30:19,410 -Fred K. Schott: yeah, this feels a lot like that, where it's like, why are you messing with this? It's like, no, that's exactly the point is like, if you never ask these questions, we'll just keep doing you know, the same thing forever, but the world has changed and what is possible is changed. And at a certain point, you know, we got to explore that at the very least. So totally a big part of this has been said You know, this isn't forcing it, I'm not putting a stick in the ground that says, you know, you have to do it. And one way, it's more about just like these things are possible now. And if you want to for the first time, you don't need to use a bundler, you don't need to do all this tooling. So if you love Webpack, by all means, keep using it. If you want to try something simpler, then this is certainly an exciting time. - -81 -00:30:19,530 --> 00:30:20,820 -Scott Tolinski: Yeah, very cool. - -82 -00:30:21,110 --> 00:30:46,500 -Wes Bos: This seems like the kind of thing that I bet like a group of passionate people will start using it. And if it catches on, if it starts to make sense for them, they will not stop talking about it's like TypeScript right now. Right? Like, yeah, everybody will not stop talking about TypeScript. It's because it solves all of the problems that they've had with JavaScript up until now. And I could certainly see this happening with something like this in the next couple years. - -83 -00:30:46,830 --> 00:31:03,630 -Fred K. Schott: Yeah, that's lovely. That would be great. That's certainly the goal. Web Components, I know that community is has been interested in this in the registry specifically, I know Do you know they're still working on their NPM compatibility story? So how did they get a set of packages that work on node? And indeed now? - -84 -00:31:04,229 --> 00:31:18,720 -Wes Bos: We need to do a show on Dino. So Dino is like no jazz, but run on TypeScript? It's written by Ryan Ryan, the guy who made node he did this awesome. Talk a couple, like probably over a year ago. - -85 -00:31:18,860 --> 00:31:22,410 -Scott Tolinski: It was really good talk. Like everything is ever Gretton. Yeah, - -86 -00:31:22,650 --> 00:31:24,660 -Wes Bos: yeah, make your credit about node. - -87 -00:31:24,690 --> 00:31:31,890 -Scott Tolinski: I've always pronounced this as demo, and I'm really happy now that I've learned that it's Dino and the logo makes so much more sense. - -88 -00:31:32,100 --> 00:31:34,800 -Fred K. Schott: Okay. I was about to say, Oh, no, no, I'm worried I've been mispronounce. - -89 -00:31:35,820 --> 00:31:39,450 -Scott Tolinski: There's a dinosaur here. I mean, yeah. Yeah, that makes way more sense. - -90 -00:31:39,540 --> 00:31:41,070 -Fred K. Schott: Maybe it's Dinah. We don't know. - -91 -00:31:41,580 --> 00:31:46,470 -Wes Bos: Yeah. No, duh, duh, no, duh. No, no, no, - -92 -00:31:47,220 --> 00:31:48,570 -Scott Tolinski: no, no. Yeah. - -93 -00:31:48,840 --> 00:31:54,900 -Wes Bos: It's probably the No. there's anything we know from this podcast is that well, I'll say it wrong. - -94 -00:31:55,680 --> 00:31:57,000 -Scott Tolinski: Yeah, likewise, yeah, - -95 -00:31:57,060 --> 00:32:05,250 -Wes Bos: that's really interesting. I had no idea that this Dino is gaining such steam. I just look it up on the GitHub. I had heard about it for a while. But - -96 -00:32:05,760 --> 00:32:06,570 -Scott Tolinski: that's a demon. - -97 -00:32:06,840 --> 00:32:08,130 -Wes Bos: Yeah. demon. - -98 -00:32:09,090 --> 00:33:11,940 -Fred K. Schott: Yeah, types. That's I mean, TypeScript is another one of those things where if you're a package creator, you're getting those issues with people saying, Oh, please, you know, where are the TypeScript types? And then as an author, it's like, okay, don't use TypeScript. Yeah, do I don't need this myself? Exactly. Yeah, that's a nice thing about and I could talk a bit about the code editor, which is a bit of the other side of this registry, where we handle that as well for you. So TypeScript types are generated and hooked up for you by default. Essentially, the registry is just a place to put your source code, and then we will create the package for you almost as just a, like, not a side effect. But as a just a effective you're doing development below. Wow, every time you push a change, it's it gets a new release. So it's using that semantic versioning semantic release process. Yeah, it's really cool. It's essentially just like, we have your source code. So we can build these really high fidelity projects, connect all the entry points in a way that you can't really do today, where instead NPM has the tarball, right, it just has this kind of processed zip file is essentially what they get as a registry. So what you can do with that, that level is really, really exciting. - -99 -00:33:12,420 --> 00:34:47,760 -Scott Tolinski: So let's, before we get into the editor, and because I think this is a really interesting subject, I think we should probably take a break to talk about one of our other sponsors, which is fresh books. After you've written your application with Pika, and you've just been so fast and easy that you are bringing in the cash left and right, they're gonna want to head over to freshbooks.com and sign up, because you're going to need to have a system to keep track of your books. Now, fresh books is one of the very first sponsors over here, it's in tax. And we really believe in making this kind of thing easier if you've ever used, I don't want to say like QuickBooks or any of these other books, software's bookkeeping software, you'll know that it couldn't be it feels like it's going backwards in time. And Freshbooks feels like it's going forwards in time or into the future. Because it really, it takes the modern approach to all of these things we know and love puts it in the cloud, and it puts the features that you actually will use in front of you. My personal favorite feature is really, honestly, it's just how easy it is to get around and explore and navigate this thing. No more questioning and being confused about what the heck everything is and where to go. I always felt like I was messing up my books. So freshbooks is definitely the cloud accounting software that you'll want to check out. If you are needing to keep track of your books. What you're gonna want to do is head on over to freshbooks.com forward slash syntax, but syntax in the How did you hear about a section and let them know that you heard about Freshbooks from syntax, you'll get a 30 day free trial. - -100 -00:34:48,359 --> 00:34:57,060 -Wes Bos: All right. So I'm the editor. I think you just launched this what like a week or two ago as of as of recording, is that true? - -101 -00:34:57,420 --> 00:34:58,560 -Fred K. Schott: Yeah, a few weeks ago, maybe - -102 -00:34:58,560 --> 00:35:02,340 -Scott Tolinski: now if I put my email In this early access, can I get early access? - -103 -00:35:03,899 --> 00:35:33,170 -Fred K. Schott: Let's let's talk about No, it's still closed to open, open invite at this point. We're hoping to get it publicly available by January. We have people using it. So you can head our Patreon and get early access to that call. Yeah. Which is essentially just a group of people beta testing and banging out the last few issues and bugs before we go to public launch. And if you support $10, you get stickers is that Oh, yeah, - -104 -00:35:33,170 --> 00:35:37,500 -Scott Tolinski: stickers. Hey, I'm into that. So that's that Patreon. - -105 -00:35:37,530 --> 00:35:43,020 -Fred K. Schott: Yeah, featuring the new snowpack sticker. Oh, limited edition, or first edition, I - -106 -00:35:43,020 --> 00:35:47,610 -Scott Tolinski: guess. Uh, oh. Too bad on tethered to my computer gonna be Oh, grab my credit card. - -107 -00:35:49,350 --> 00:36:07,050 -Wes Bos: That would be worth millions. We'll get it folks ever. No. That's cool. Um, so like, what is the what is the editor? I'm just looking at it here. It looks like you write your code in this thing? Does it replace your vim or VS code? I mean, if that, or is that just for writing packages? maybe explain that? - -108 -00:36:07,560 --> 00:37:36,420 -Fred K. Schott: Yeah, definitely. Yeah, it's funny enough, which maybe I should have anticipated. But this is probably the most controversial part of the project, where I was essentially, I was really worried that everyone be like, Oh, no new registry all that's gonna be terrible. That's everything. Everyone's like, yeah, the registry is fine. What is this editor? I'm not leaving vs. Code. No way. Oh, funny. So we'll see how far this gets us. Um, we might, we might ship a like local development tool that can run somehow locally as use your own native editor. But what this is, is it's a way to build packages. So it's a code editor, you think of it as a code editor editor for packages, instead of having to set up your project structure and your folder layouts and all that. Everything is really conceptually about the package. So instead of having Okay, well, what do I call my source directory, you just have source files? Where do I put my test? How do I do that you just have test files. But navigation is really about the package. And the different things that would be a part of it. Okay. It's powered by Monaco, which is the engine that VS code uses. So it'll feel really familiar. If you are using vs. Code. It runs in the browser. So it runs all your tests in the browser. So again, going back to most people, when they say a package is ready for the browser, really, they're just testing it through some sort of node bundler hybrid, very few packages actually have a browser testing setup. Yeah, we do all this for you automatically in the editor itself. So you make a change, it runs in the editor. We have benchmarks that run there's all I mean, I could go on for hours about the features. But - -109 -00:37:36,780 --> 00:37:47,100 -Scott Tolinski: yeah, the one thing that was really interesting to me is the preview changes live in app. And it just gives you a live URL that you can import from directly. I think that's fantastic. - -110 -00:37:47,690 --> 00:38:10,080 -Fred K. Schott: Yeah, it really brings the editor and the registry together in a kind of I don't know if anyone's done it this way. But essentially, what, what you're describing is that in the editor, there's a little button to a live preview. So whatever package you're working on, you can get a live preview URL. And you can replace your import in your app to this live preview package URL of the package as you're developing. Oh, - -111 -00:38:10,130 --> 00:38:16,610 -Scott Tolinski: instead of messing with, it would replace the need for like an NPM. Link, which is like a giant pain in the rear. - -112 -00:38:16,830 --> 00:38:44,210 -Fred K. Schott: Yeah. Which never works the way I expected. Yeah, I always just go into the node modules folder folder hack at myself, like figuring out this link right now. So this will give you like a URL that you could locally dev on? Yes. So you can develop it in the editor and then in your application, just replace the import to that URL, and then you get that you see those changes instantly. So make the changes in the editor, refresh your app, and you should just pull in those new changes. - -113 -00:38:44,579 --> 00:38:45,780 -Wes Bos: Oh, that's neat. - -114 -00:38:46,130 --> 00:38:56,310 -Fred K. Schott: Yeah, it's, again, it's just like, we're exploring what's possible now that that whole native import system works across URLs across local projects. Yeah, it's exciting idea. - -115 -00:38:56,579 --> 00:39:14,670 -Wes Bos: Yeah, I can't tell you how many times I've like not created a pull request for something. Because I didn't want to go through. I was like, oh, man, I could fix this really quickly. And then I look into it. And there's like, like, a 3000 line contributing MD file. And all these like, - -116 -00:39:15,090 --> 00:39:18,380 -Scott Tolinski: Yeah, you got to test it in your local environment somehow. And - -117 -00:39:18,380 --> 00:39:36,600 -Wes Bos: yeah, you had all the tests. And I was like, Yeah, I can't, I was like, I could just fix this and do a pull request. But then all the GitHub bots are gonna get mad at me for not doing everything right. Yeah. So yeah, that would be cool to see, like, even like how it works with, like, forking a package. And then - -118 -00:39:36,600 --> 00:40:17,550 -Fred K. Schott: so that's, that's the gift and the curse of this, which is that we enforce that you're using this editor for any contribution to the package. So yeah, what you lose is that choice. I mean, that's, you know, that's we're definitely not hiding away from that fact, which is that you're using this editor for packages on our registry. But what you gain is exactly what you described, where you're guaranteed that every user is seeing the exact same editing experience. They're getting Running per change, they're getting formatting per change. So there's no like linting errors that would ever sneak into a pull request parent. Um, yeah, like that linting error back and forth is the worst dance, the worst part of open source where it's like, yeah, here's my contribution. Oh, great. Can you change this one thing? And it's like, and maybe that person never comes back? - -119 -00:40:17,690 --> 00:40:49,710 -Wes Bos: Hmm, that's Yeah, that I at first, I was like, I don't get why this is its own editor, not like a plugin. But I also never shied away from things that tell me how to do it. Like I almost always prefer, like, it's like with Webpack. I'm like, Don't give me this thing to work on. Like, don't get me homework, just tell me how to do it. And I'll, I'll do it, right, just force it on me a set of configs. And give me a little bit of customization. But and that's what this seems like, to me where you use this editor will work. To be totally fair, I've - -120 -00:40:49,710 --> 00:41:08,690 -Fred K. Schott: done a terrible, there's just so much to explain at this point that like, yeah, I need the time to read, I guess the project needs some time to bake a bit to talk about these two post blog posts to post documentation. So we'll see, I think I love this flow. But I understand that, you know, maybe some people just really love their local development experience. And that's fine, too. - -121 -00:41:09,300 --> 00:41:55,050 -Wes Bos: Yeah. Cool. Um, so a question I have is like, there's a lot of heat around NPM right now, just because like, they're a private company that owns all the code, literally, absolutely. Everybody's application. And like, obviously, it ships like it was started as this thing, but it was it is a separate company. And this, this company controls all of the code all of your JavaScript applications. And I don't know, people seem to be getting a little bit sore from that right now. So like, What does also from like a security point of view to right, you just have this random company? Like, obviously, I trust them, but they're still there that kind of, huh. So like, what does that look like on on your end? Is this an open source thing? Is this a Is this a company thing? - -122 -00:41:55,560 --> 00:42:56,360 -Fred K. Schott: Yeah, yeah, we there's a few different things that I'm trying to think about the most. One thing that we're trying to straddle that line, where a lot of the power that we see coming from this is that it is a what's right or not close, but a kind of controlled environment where again, we say that you use this editor and you get all these benefits. It's connected to the registry. So you get all these benefits from that. That is all by connecting the open source registry to our CD ends that we just by definition operate. Yeah, but at the same time, we're not at all that's not like really, the project is all about exploring the CSM space and building that ecosystem. So it's not really about like, and we control it. Haha. Yeah. So one thing that we've been playing around with, is that, you know, again, that idea that we published anywhere demo, and thanks for demo and a place for GitHub, but also in tropic is the new package manager, we're really excited to get this posted somewhere that that can read from so that's the more distributed kind of open package registry. Oh, - -123 -00:42:56,360 --> 00:42:57,170 -Wes Bos: I've never heard of that. I - -124 -00:42:57,170 --> 00:42:58,590 -Scott Tolinski: have not heard of this either. And yeah, - -125 -00:42:58,590 --> 00:43:13,320 -Fred K. Schott: this is um, by and I'm blanking on their names, but old people from NPM split off to start working on this. It's essentially a decentralized NPM or federated it is the better word. But everyone hosts their own namespace, and then you publish packages to there. - -126 -00:43:13,709 --> 00:43:15,710 -Scott Tolinski: Oh, very interesting. Well, - -127 -00:43:15,710 --> 00:43:17,010 -Wes Bos: you should have them on here. - -128 -00:43:17,519 --> 00:43:25,730 -Fred K. Schott: Yeah, this gets this gets back to this, like the fracturing right. It's It's everyone's exploring these different parts of it now. And, and managing that is going to be the the challenge, - -129 -00:43:25,730 --> 00:43:28,800 -Scott Tolinski: I think, I think you've just given us like three new show topics. - -130 -00:43:30,750 --> 00:43:31,830 -Wes Bos: Yeah, what else do you have? - -131 -00:43:31,860 --> 00:43:32,580 -Scott Tolinski: Yeah. - -132 -00:43:33,110 --> 00:44:05,910 -Fred K. Schott: A very, you said that you like these innovative things. But really, it's just like, once you take a peek in this world, it's a rabbit hole to fall down. There's just so much exciting stuff going on. Yeah, yeah. The I also say the registry itself right now is personally as an implementation detail, but partially just because it, it's trying to solve this problem. The registry is a Git repo on GitHub right now. So you can actually go to Pico package slash registry. And essentially, we mirror the registry itself into this Git repo. I'll see how long that scales for. But - -133 -00:44:07,470 --> 00:44:10,620 -Wes Bos: you'll get a phone call from GitHub at some point. Yeah, - -134 -00:44:10,859 --> 00:44:17,730 -Fred K. Schott: we'll see how long that scales for. But, you know, get homebrew, I believe is still powered by GitHub. So if they can do that we can I'm sure get pretty close - -135 -00:44:17,730 --> 00:44:19,410 -Scott Tolinski: it really I did not know that. - -136 -00:44:19,709 --> 00:44:23,850 -Fred K. Schott: I'm there. The formulas are. So I don't think the code is hosted in the registry. - -137 -00:44:23,879 --> 00:44:28,380 -Wes Bos: No, no, the the formulas are very interesting. Wow. - -138 -00:44:28,470 --> 00:44:41,790 -Fred K. Schott: So we're, we definitely don't want to be this closed environment. And we're trying not to be at every at every chance. So anytime a decentralized solution comes up where you know, we're full, full on supporting that. Yeah, - -139 -00:44:42,180 --> 00:45:03,660 -Wes Bos: I think it's a great time to sort of rethink all of this stuff, because we are in the next couple years, or maybe in the next year, node will be moving over to imports. And as people do that, it's it's a good time to maybe rethink some of this tooling and see Is there a better way we could be doing it It's really neat to see people putting their time into it. - -140 -00:45:04,230 --> 00:45:13,200 -Fred K. Schott: Yeah, notes notes he has some support is gonna be very, I mean, I don't think they get enough credit for how gargantuan that challenge was. But yes, yeah, we just - -141 -00:45:13,200 --> 00:45:14,580 -Scott Tolinski: talked about, okay. - -142 -00:45:14,609 --> 00:45:43,950 -Fred K. Schott: Yeah. It's the plus one to whatever you guys talking, because it is so impressive that they found a way to do this at least to start the process. Hopefully it goes well, yeah, that will be very interesting with if you can run an import and by spec, you can import from URL node has never really done that before. curious if that'll work, if that's something they're excited about it, you know, you'd start to get these same flows these same import from URL interesting flows in node for the first time. - -143 -00:45:44,640 --> 00:45:53,580 -Scott Tolinski: It looked at that something did demo Dino has as one of their features. Right, or you're importing Delphi? Are they from URLs? I guess they are from URLs? Yeah. - -144 -00:45:53,669 --> 00:46:00,600 -Fred K. Schott: Yeah. I think that's they're very excited about that part of it. So I think that's very much the blessed import into dependencies. Oh, yeah. URL. - -145 -00:46:00,629 --> 00:46:01,140 -Scott Tolinski: Nice. - -146 -00:46:01,140 --> 00:46:23,340 -Wes Bos: It looks like they do plan on implementing importing from a URL, because that is that is spec right. Like that's ESM says you should be able to import whatever from HTTPS dogs calm. And as far as I know, node is trying to one to one. Support. ESM. spec. - -147 -00:46:23,970 --> 00:46:46,020 -Fred K. Schott: Yeah, so that's gonna be I mean, that's that what does that do for I know that NPM team are ex contributors on the NPM team are working on something called Tink, which is a new version of node that like basically, you don't run npm install it just like installs as you run node. Ah, I think cats are working on that. Okay, another guest another guest for you. He Hey, go, - -148 -00:46:46,020 --> 00:46:48,750 -Wes Bos: wow, this is a whole world. - -149 -00:46:48,750 --> 00:46:54,450 -Fred K. Schott: What does a world of importing by URL mean for NPM? install? Right? I don't even need npm install anymore. - -150 -00:46:54,780 --> 00:47:16,050 -Wes Bos: Yeah, I've seen some people do this where like, as you type things, it will just npm install in the background for you. Some people said that's a huge security issue because someone could like right, I could jump on the package of our EA C. And if you're like import star from our EA C, and then it quickly installs this malicious react package. - -151 -00:47:16,230 --> 00:47:20,610 -Scott Tolinski: Oh, no. Oh, my God. Any sort of typo D package? - -152 -00:47:20,670 --> 00:47:25,920 -Wes Bos: Yeah. So there's like a, there's some weirdness around that. But I don't know. Maybe it can be solved. - -153 -00:47:25,950 --> 00:48:19,980 -Fred K. Schott: Yeah. React. Not to jump around. But I you mentioned that earlier, where it's like, one nice thing that we're trying to solve as well, is the idea that the registry gets the source code, right. So instead of this idea of, Oh, no, the package has been hacked. And no one noticed because the Git repo looked fine. So the developers had no idea but the Publish tarball Yeah, was minified also just had this little base 64 encoded virus that just, you know, basically stole your Bitcoin. That's, that's the world we're living in. Now, the nice thing about having the registry be the repo on which to their credit, GitHub is explained with their package registry as well. What you get is essentially, you lose that decoupling where things can sneak in and between the cracks. There's no way that in this world, a package that was distributed doesn't match the code that was worked on by the developers. - -154 -00:48:20,550 --> 00:48:22,320 -Wes Bos: Yeah. Yeah. Wow. A - -155 -00:48:22,320 --> 00:48:29,100 -Scott Tolinski: lot of interesting problems. These are all above my paygrade problems. Very, very interesting stuff. Yeah, it's - -156 -00:48:29,100 --> 00:48:31,650 -Fred K. Schott: it's an exciting time for sure. Wow. - -157 -00:48:31,859 --> 00:48:37,080 -Wes Bos: Cool. Well, is there anything else you'd like to tell us about pika? Or is that? - -158 -00:48:37,470 --> 00:48:42,660 -Fred K. Schott: No, this this has been a great overview. So thanks for letting me come on and just spread the good word. - -159 -00:48:42,720 --> 00:48:44,340 -Wes Bos: Oh, no problem. Thank you for coming on. I - -160 -00:48:44,340 --> 00:48:45,090 -Unknown: have Thank you - -161 -00:48:45,149 --> 00:48:49,650 -Wes Bos: benefit of having the podcast is if I have questions about something, just make it into a show. - -162 -00:48:51,240 --> 00:49:25,230 -Fred K. Schott: Yeah, that's like classic if you have a question. 10 other people are wondering it, or 100 I guess. Exactly. Yeah, totally. So where can people go to get pika to support you, obviously, things like that, you can just plug all those URLs. pika dot dev is the website, so learn more there. pika package on Twitter. So that's pika. PKG, on Twitter, and on our website, and on our Twitter, there's plenty of links to the Patreon if you want to get early access to all this and plenty of links to explore. Oh, and snowpack. snowpack has its own name now, so I got it. I gotta plug that separately. Oh, yeah. snowpack - -163 -00:49:25,230 --> 00:49:27,390 -Unknown: snack pack. - -164 -00:49:27,419 --> 00:49:36,930 -Wes Bos: That's so cool. snowpack forms, layers of snow that accumulated in geographic regions and high altitudes. Do you know who knew them? It includes cold weather? - -165 -00:49:36,959 --> 00:49:45,210 -Scott Tolinski: Do you knew that? Of course. Do Colorado Come on, man. We talked about the snowpack all the time. How's the snowpack? How's it snowpack out there? - -166 -00:49:45,479 --> 00:49:46,440 -Wes Bos: Really? Well, we - -167 -00:49:46,440 --> 00:49:49,410 -Scott Tolinski: talked about it on the mountains in the context of snowboarding. Yeah. - -168 -00:49:49,769 --> 00:49:51,480 -Fred K. Schott: Should we grab the package? Yeah, - -169 -00:49:51,510 --> 00:49:52,350 -Unknown: yeah, right. Yes. - -170 -00:49:55,200 --> 00:50:11,610 -Wes Bos: Wow. All right. So we do now we do things that are called sick pics where it's Just pick an item that is sick. So sometimes it's a piece of software. Sometimes it's an app, sometimes it's a piece of hardware. I forgot to tell you ahead of time, so no sweat if you don't have anything. Oh, well - -171 -00:50:11,610 --> 00:50:12,420 -Fred K. Schott: think of something. - -172 -00:50:12,450 --> 00:50:16,920 -Scott Tolinski: Okay, every single guest we've ever had includes the statement, I forgot to tell you ahead of time. - -173 -00:50:18,750 --> 00:50:22,290 -Fred K. Schott: Just to make me feel better, but it is a trap. It is. Yeah. - -174 -00:50:23,760 --> 00:51:43,800 -Scott Tolinski: My sick pick for today is something I mentioned in our gift guide. I've been spending some time with my Thera gun, which is basically just this percussive massage device that hits you really, really hard. Like really hard in one tiny little spot just just really cranks. Yeah. And I've been using this thing on my back, my back, I've been having all sorts of muscular issues on my back and it is the best thing in the entire world. I just leave it on my back and it just just cranks into it. And it's like getting a deep tissue massage for a device that you have in your house that you can use anytime you'd like so far I found it the packaging the overall experience of this thing to be very nice, very well put together. It's very ergonomic where it's built in a way like one of the things I was worried about is like I have these spots on my back that the muscles are really just goofed up. So Will I be able to access all of those myself without having to have you know my wife come in and do it because you know, that's just adds another layer to the whole process right? And the way this thing is designed, you can hit every single spot of your your shoulders, your back, your neck, anything in there with this just based on that the way the handle is held. I absolutely love this thing. And it is serious business. It hits you hard, and I'm going to big fan. - -175 -00:51:44,520 --> 00:53:49,980 -Wes Bos: Wow. Um, I'm going to sick pick this app called mb MBY. And it's sort of a, like a Plex competitor. Except the lateral Plex is sort of going the way of like, it's got Plex is going a little corporate for me and and MB is it's a server that you run on your computer. I've got it all up and running on my my NASS my diskstation, who makes that Synology. And you can it also has a recorder built in. So you can you can hook it up to an HD homerun, which allows you to get over the air, we get tons of over the air channels where I live, which is great because we get all the buffalo ones, because they're close to the border. So you get all the American channels. I watch fox news every day. Okay, I need that. And then, and we had all the Canadian ones as well, which is cool. You if you have like an IPTV subscription, you can pipe that in, there's this GitHub repo of IPTV channels as well. And then it just gives you this interface where you can watch live TV, you can record it, you can record shows based on their name or when they play. You can put all your video files in there, and it will organize them by name and download all the artists. It's just really, really nice. And the really cool thing is that the interface for watching is built in HTML, CSS, and JavaScript. And they have a Samsung app app and an iPad app and they've got all these different apps. And as far as I can tell, it's the same codebase running on all of these things. And it feels really good. So check it out at MB dot media EMB y never heard of this thing. Yeah, it's really neat. I tried it years ago. But now I like the Samsung app wasn't in Canada for some whatever reason. And so I saw I just ditched it because I needed it on my TV. And they finally just said here, just put it on a USB stick and install it yourself. And it works great. So yeah, Fred, do you have any sick pics? - -176 -00:53:50,609 --> 00:54:03,870 -Fred K. Schott: Yeah, I know. But I've been playing a game called idle supermarket and I don't even want to recommend it because it's just a total time sink. So nobody play it. Don't download it to go like idle supermarket. Yeah. - -177 -00:54:05,520 --> 00:54:11,970 -I already regret this it's literally the only thing I've been doing lately. I see - -178 -00:54:11,970 --> 00:54:14,070 -Scott Tolinski: the word tycoon and I like it - -179 -00:54:18,030 --> 00:54:21,780 -Wes Bos: That's great. Scott loves these silly little games he's gonna you just Scott - -180 -00:54:24,900 --> 00:54:33,150 -Scott Tolinski: All right, it's all right it's all good. I got kids I got something a little baby gonna do something whilst you know Oh, mom's making dinner get a hold on - -181 -00:54:33,180 --> 00:54:38,490 -Fred K. Schott: Yeah, yeah don't don't go actual grocery shopping just play a video yeah go grocery shopping, - -182 -00:54:38,550 --> 00:54:52,650 -Scott Tolinski: which I do hate. I do hate grocery shopping. We do a lot curbside delivery thing now to save myself from that. Pain and torture. Alright, next part is shameless plugs. Would you like to shamelessly plug anything? - -183 -00:54:53,460 --> 00:55:18,810 -Fred K. Schott: I would say really like if this it sounds exciting to anyone listening. Just start like falling down the rabbit hole. There are people who are Working on these packages and these projects that are purely you know, no bundler Luke Wilson is a good name for someone who's just I think he built CST a ton of other people are exploring the space and it's really exciting. So not so much plugin pika. Although certainly check that out. And just, you know, there's a exciting times for a web developer. - -184 -00:55:19,140 --> 00:55:20,130 -Unknown: Yeah, totally. - -185 -00:55:20,760 --> 00:55:29,850 -Wes Bos: Oh, while we're talking about this, there's an awesome the podcast tools day I listened to they had an episode on tool list tools day, where you - -186 -00:55:29,850 --> 00:55:30,450 -Unknown: just don't - -187 -00:55:30,450 --> 00:55:42,240 -Wes Bos: use tools and you use imports and all that stuff. And that was a good one. It's kind of like this podcast where like, you talk about like, this stuff is is progressing and you don't necessarily need all these bundlers just yet. - -188 -00:55:42,600 --> 00:55:53,880 -Fred K. Schott: Yeah, yeah, it's it definitely feels like the start of something I'm sure yeah, there's this whole like we'll be much more mainstream so this is exciting check it out now it's it's definitely possible and and all there for you to explore cool. - -189 -00:55:54,300 --> 00:56:03,780 -Wes Bos: I applied all my courses Wes Bos comm forward slash courses just released a beginner JavaScript course that you should take because it's 2020 now and new a new year new you - -190 -00:56:04,470 --> 00:56:20,040 -Scott Tolinski: yes New Year new you and asked me to pick up a level up tutorials subscription while you're at it and get access to the course every single year, or every single month. There's a new course on level up tutorials.com Ford slash pro sign up and get 25% off the year. - -191 -00:56:20,340 --> 00:56:24,480 -Wes Bos: All right. Thanks so much to Fred for coming on. Appreciate your time. This is really exciting. - -192 -00:56:24,630 --> 00:56:27,180 -Scott Tolinski: Yeah, it's great. Check it out. Pika, everybody, - -193 -00:56:27,390 --> 00:56:31,020 -Wes Bos: and we will catch you on the next podcasts. - -194 -00:56:31,320 --> 00:56:32,010 -Fred K. Schott: Thanks for having me. - -195 -00:56:32,310 --> 00:56:33,390 -Wes Bos: Ace, please. - -196 -00:56:35,400 --> 00:56:45,150 -Scott Tolinski: Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax213.srt b/transcripts/Syntax213.srt deleted file mode 100644 index 1c0c78cf3..000000000 --- a/transcripts/Syntax213.srt +++ /dev/null @@ -1,388 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA bombs and Scott Taylor. Totally in ski. - -2 -00:00:25,950 --> 00:00:57,570 -Scott Tolinski: Oh, welcome to syntax in this Monday tasty treat, we're gonna be talking about that Firefox, the Firefox that we know and love. It's the browser that Wes and I have been using for quite some time now just to really just acclimate ourselves into the world of Firefox, and really talk about how it's changed our development workflows and everything over the course of the past month or so. My name is Scott Delinski. I'm a developer from Denver, Colorado, and with me, as always, is Wes Bos. - -3 -00:00:58,049 --> 00:01:00,360 -Wes Bos: Hey, everybody. Hey, Wes. - -4 -00:01:00,360 --> 00:02:00,120 -Scott Tolinski: This episode is sponsored by Log Rocket. Now Log Rocket is the session replay application allows you to see why your bugs are happening. And not just not just that bugs are happening, not just that they exist, and not just that your users are experiencing them. But you'll get to experience them just like your users are. And maybe that's going to be the catalyst for you to fix some of these bugs. And what Log Rocket gives you is a pixel perfect replay of exactly what your users saw, whenever they hit a bug even shows you your Redux store. It shows you their network activity, it shows you their counsel login errors, and it works just about any sort of front end platform that you could imagine. So check out Log Rocket at Log rocket.com forward slash syntax, sign up today and get 14 days for free and check out see the magic. I feel like I'm inventing taglines for these companies, but see them the magic - -5 -00:02:00,150 --> 00:02:02,730 -Wes Bos: that is not approved by Log Rocket marketing. Scott. - -6 -00:02:02,730 --> 00:02:11,100 -Scott Tolinski: Yeah. They're there. Their slogan is stop guessing why bugs happen? It's pretty good. It's pretty good. Yeah. - -7 -00:02:13,260 --> 00:02:32,060 -Wes Bos: Oh, awesome. Well, let's get into it. Um, so about, I think about a month ago, I said, I'm going to use Firefox for the rest of the year. So I used to all of December and he's actually recording this on January 6. So I've been using Firefox for almost five weeks now. And I know Scott, how long have you been - -8 -00:02:32,060 --> 00:02:38,250 -Scott Tolinski: on it as well? Pretty much same exact amount of time, because you said I'm going to do that. And I said, me too. - -9 -00:02:38,489 --> 00:03:28,920 -Wes Bos: Yeah, we get an episode out about it. So I've I should just say up front, I have a course called CSS Grid, where Firefox CSS grid.io, Firefox sponsored that for for this, they paid me to make the course. And he used Firefox in the course. And I'm very clear about that they are not paying for any of this. This is just us, as developers trying to figure out like, is the switch over to Firefox worth it? I've tried it many times over the years. And this time, I thought I'd give it like an honest shot, and try to actually do development and daily browsing on it. So that's what we're going to do. We're going to go through dev tools, we're going to go through the browser experience, we're going to go over some tips for setting it up and getting switched over. And then finally, we'll talk about some of the things we didn't like about the switchover from Chrome. And finally, will we stay with it? Like is it going to be our daily browser? - -10 -00:03:29,100 --> 00:04:07,590 -Scott Tolinski: Yeah. Yeah. Which is, you know, I have no conflicts of interest. So just FYI. Except for that course I released called Firefox. No, I'm just kidding. I did not like Firefox. So yeah, let's get into it with the I guess you want to do you want to kick it off the dev tools? You know? Or maybe I'll kick it off with the dev tools. How about that? Yeah, yeah, the dev tools in Firefox, are better than Chrome's dev tools, I don't really have a problem saying that they're, they're better and in most ways that I, I've come to use, in fact, visually, they look nicer. They feel better. - -11 -00:04:07,649 --> 00:04:08,280 -Wes Bos: Totally. - -12 -00:04:08,399 --> 00:04:51,770 -Scott Tolinski: All of the dev tools, extensions that I use and love, like react Dev Tools did the exact same. And actually with one added benefit is every time I close the Developer Tools tab, the tabs don't reorder themselves and move react to the end of the list. So that a little bit of it is nicer to me. But for the most part, I have actually really loved these dev tools. And I didn't have to change my workflow at all because everything was exactly where I expected it to be no frills, no extras, this stuff that I use every day, the debugger, the Network tab, the general Inspector, all that stuff is as good or better than the chrome version of it. In my mind. - -13 -00:04:52,230 --> 00:05:21,690 -Wes Bos: The biggest switch for me was learning how to do Command Option K to open up the console instead of command r J. So I had to move my move my finger over one. One key, I just hit escape. No, like when you're like on a website, and you're just browsing and you want to open up the, you want to open up the console directly. Are you one of these people that right clicks inspect element and then clicks over to the console? Don't tell me hear them? Well, okay, - -14 -00:05:21,750 --> 00:05:52,830 -Scott Tolinski: yes. Let's Let's, I am doing like I for some reason, I've never ever gotten the keyboard shortcut for Inspector, any of those. But I always leave Dev Tools open. I mean, I don't use dev tools a lot on sites that are my own. And since I'm only working on one site, which is usually level up tutorials on local hosts, and I basically never close that connection, I leave that open 24 seven with a dev tools open, like I never closed that ever. So Oh, man, I'm like, it's a major hindrance in my life - -15 -00:05:53,039 --> 00:06:07,560 -Wes Bos: is no way to live your life, Scott. So for everyone listening command, shift C will open up the Inspect Element, so it'll immediately open it up so that you can inspect any element on the page. And Command Option J, - -16 -00:06:07,710 --> 00:06:09,300 -Unknown: Command. Option j, - -17 -00:06:09,300 --> 00:06:17,580 -Wes Bos: sorry, man Command Option K, how am I supposed to remember that but not console? You just do it like 10 times and then it will become second nature? That's I'm gonna set on my own - -18 -00:06:17,820 --> 00:06:18,930 -Scott Tolinski: instead of that. Oh, yeah. - -19 -00:06:19,109 --> 00:07:04,380 -Wes Bos: Well, that's that's actually one downside I saw is that there's not there's no like keyboard settings in in Firefox, you have to install? Like, I was gonna say there might be add ons or something like that. Yeah. So that's the first thing I was going to do is I'm just going to remap this to be like Chrome, but I got used to it over the time. Yeah. What else? CSS Grid and Flexbox inspector miles ahead of Chrome. They're Fantastic. Fantastic. If you want to visualize what's going on with your Flexbox and grid layout, visually seeing them rather than reading some code is super important. And they are there is a grid inspector on Chrome, but it's not near, not nearly as good as, like I would go is it say it's like 27 times better in Firefox? - -20 -00:07:04,500 --> 00:07:59,820 -Scott Tolinski: 27, I would say is 27 times better as well. I definitely agree with that. I love the little checkboxes that you can say, Okay, show me the lines, show me the numbers show me the areas like those kind of things are really nice. Yeah. For the most part, I feel like the inspector and the layout tools. And all these things within Firefox are so thoughtful. And so well done, that it makes going back to Chrome to use these kind of a huge bummer, because I love being able to select. Okay, so I'm on let's say, I'm on a div here. This is like a parent div, it will tell me all of the different layouts that exist as children within this div. And I can just use these checkboxes to click one of these individual little layouts. And then I can see the grid at the box model all that stuff directly below it. And then I can hover over and see the different zones and see how they're working. And to me, it's all just so visual and elegant that I absolutely love using this for anything like this. - -21 -00:08:00,179 --> 00:08:40,230 -Wes Bos: They've got this like neat little, like if you have a web font or any font really and in your in your in the Rules tab and you hover over top of the font, it will show you a quick, quick angry Fox or whatever that thing is. That will it will show you what. Yeah, if you go to the fonts tab, it will show you what fonts are system fonts and which ones are web fonts. It will show you the line height the size, you can turn the italics on and off, man. It's just there's just so much and it's not something that you use every day. But when you do have a trouble with your fonts, being able to appear in with these these tools is great. - -22 -00:08:40,549 --> 00:09:06,360 -Scott Tolinski: Yeah, I found the animation, like the keyframe animation stuff to be not as much fun. It's a little bit more, you can see what's going on. But it doesn't. Like the chrome version is sort of like an after effects II kind of thing where you can really work with the keyframes a little bit more. This is just sort of like okay, here's the here's how the animation plays out. Oh, yeah, maybe I'm missing something there. But I don't I don't love that aspect of it comparatively. - -23 -00:09:06,360 --> 00:09:18,170 -Wes Bos: I haven't actually used that in Firefox just yet. Because I know in Chrome, you can scrub back and forth. Yeah, it looks like you can do that in Firefox. Looks like you can do that. Have you tried to do it? No, I have not. - -24 -00:09:18,990 --> 00:09:20,490 -Scott Tolinski: Mine isn't letting me do it. - -25 -00:09:20,699 --> 00:09:22,290 -Wes Bos: I've got one open right now. - -26 -00:09:22,290 --> 00:09:26,730 -Scott Tolinski: Yeah, you can. Mine doesn't play the animation though. When I scrub. - -27 -00:09:26,880 --> 00:09:29,300 -Wes Bos: Go to here. Let me let me show you. - -28 -00:09:30,090 --> 00:09:48,750 -Scott Tolinski: So it's funny West just sent me ers doing a screen share. We see the same exact interface. And he has the ability to scrub over his animations. And I do not I'm looking at the exact same thing and my playhead exists. I see the playhead I cannot grab it. I don't know why. - -29 -00:09:48,770 --> 00:09:51,270 -Wes Bos: Well, we should say are you on Firefox developer? - -30 -00:09:51,390 --> 00:09:53,640 -Scott Tolinski: I'm on Firefox developer. Do Okay, - -31 -00:09:53,640 --> 00:10:01,910 -Wes Bos: that's as am I yeah. I'm just gonna go to the the Where's the animation? It's - -32 -00:10:01,910 --> 00:10:15,770 -Scott Tolinski: like, extra extras or whatever? extras, the three little dots. three little dots, top right, top right. three little dots, more tools. More tools, or coals? - -33 -00:10:16,949 --> 00:10:23,610 -Wes Bos: Oh, yeah. Oh, they're they're very similar. In, in both of them, they even use the same colors. Yeah. - -34 -00:10:23,729 --> 00:10:37,910 -Scott Tolinski: Well, I just wish I just wish I could scrub on mine. Who knows? It's probably just a version of my Firefox. Well, that makes me feel a little bit better about these, then I was looking a little bit bummed out that I couldn't do the scrubbing scrubbing action. Well, - -35 -00:10:37,919 --> 00:10:40,650 -Wes Bos: yeah, cuz you do a lot of keyframes on your website, right? I - -36 -00:10:40,650 --> 00:10:43,020 -Scott Tolinski: do. And I really enjoy that kind of work. So - -37 -00:10:43,589 --> 00:11:20,190 -Wes Bos: that's, that's an important one for you. So what else do we have here? Um, the changes tab is pretty cool. So if you are inspecting an element, and then you change a few things, you delete a property and you change the color of something. And you go, Okay, great. Now I need to mirror that to my CSS that's in my editor. If you go to the changes tab, it will show you what you have then change from that, that actual element. And you can just copy paste it over. I didn't use that. You're actually, yeah, it's pretty cool. Like there's there's a lot of stuff you have to like dig into. It's very similar to VS code in that way, where you're like, Oh, I had no idea that wasn't actually a thing. - -38 -00:11:20,219 --> 00:11:27,480 -Scott Tolinski: Yeah, I really liked these developer tools. And I like the way they look. I like the way it feels. I'm a big fan of this. So - -39 -00:11:28,500 --> 00:13:25,050 -Wes Bos: yeah, there's a couple of things that were not great, in my experience, so I was just kind of keeping tabs over the last month as to like what it was. And there's a couple first is if you throw an error in a promise, or sorry, if there is an error thrown in a promise that is not caught. The errors are not very good at all. So I had a an example, where I had the same error in both Firefox and Chrome. And in Chrome, it told me Oh, yeah, see the stack trace. It gave me the the file that had happened in the line number it happened. The network URL and the promise response, it gave me so much information about what went wrong. And Firefox gave me uncaught exception, undefined. uncaught exception. object, like not an actual object, just the word object has always helped. And yeah, yeah, so like, I've just been tweeting all this stuff. And Harold kirshen girl, kershner Kirschner probably butchering that it's not even. So if you have any qualms with the developer tools, just tweet at Harold. He's amazing. And he had he wants to see Firefox succeed, obviously. So he he linked me to some of the bugs that they're they're actually working on this. So all of the qualms I have are currently being worked on. And it looks like it will eventually, soon be in. But that was a big one for me. Because I would say maybe five times over the month, I had to open up chrome and just make the error happened in Chrome just so I could get a little bit more context into into what was happening. And this is specifically with errors that got thrown inside of promises. The other sort of thing that bit me was cross origin. errors were silent. So in Chrome, when you have a error that is like a, what was it like a blocked cores issue? So you try to do something - -40 -00:13:25,140 --> 00:13:33,630 -Scott Tolinski: you make sure you share these screenshots with in the the Episode Notes, because these screenshots are really helpful, because I didn't have some of these issues. - -41 -00:13:34,050 --> 00:14:36,720 -Wes Bos: Yeah, totally. Here, let me I'm, yeah, that's, that's why I was like, logging them as they happen, because like even a month is not necessarily enough time to run into all these issues. But luckily, I write a lot of errors to be able to get into this, this aspect, but like, so the one issue was that I had captions file on one of my videos, and that captions file was being loaded from a domain name that didn't support cores. And when something like cores issues happens in Chrome, it will tell you in the console, this this request was blocked. And this is where the request was made. And in Firefox, it just it tells me nothing in the console. And if you go to the Network tab, it doesn't necessarily show you that it was blocked. It just says that it was has not yet returned or wasn't returned. So it was very evident in Chrome, that it was blocked both in the Network tab and the console. And I probably burned half an hour trying to figure out what silly issue that was, and very clearly it was there was no course there. So that was a big one. - -42 -00:14:37,230 --> 00:14:46,350 -Scott Tolinski: So I see I see in your console screenshot here that you don't have the x HR and requests. Filters checked. - -43 -00:14:46,590 --> 00:14:49,410 -Wes Bos: Yes. Everybody said that. Okay. - -44 -00:14:49,470 --> 00:14:51,660 -Scott Tolinski: I only say that because those I really like those. - -45 -00:14:51,990 --> 00:15:08,970 -Wes Bos: Yeah, but those are ex HR and requests. Those are logging absolutely every single request. Yeah, so every single CEO SAS image. So you load the page with those on. And your console is just filled with like 100 things. Which is way too much. - -46 -00:15:09,240 --> 00:15:14,970 -Scott Tolinski: Yeah, but you could you could change the level from next you can now you can't change the level. - -47 -00:15:15,270 --> 00:15:43,170 -Wes Bos: No, I even talked to like the devs that fire because everybody's like you're an idiot, turn those on. No, that's not what they're for and Wes and like, I don't I don't necessarily want those on because every single ping to a server from like a tracking library or every single CSS or image that's loaded, then that muddies up the console. That's too much. I just want to see requests that failed in thing and there's no way to do that. Believe me, I spent lots of time trying to look into this. - -48 -00:15:43,380 --> 00:16:18,800 -Scott Tolinski: I believe it? Well, you know, I've been doing a lot of graph qL server work right now where I'm working on a new API feature. And I've been using the I really I don't To be honest, I don't know what Chrome is like in this regard, because I haven't done the comparison. But I've been really liking how Firefox presents the requests in the console, like just the visual way that it's throwing that in there. I'm not having to go to my Network tab. But normally that just the ability to look at them in the way they have them. Do you know me fire open chrome? Does chrome do the same thing? - -49 -00:16:19,020 --> 00:16:19,710 -Wes Bos: I think so. - -50 -00:16:19,710 --> 00:16:48,720 -Scott Tolinski: I have not ever looked. And it may be doesn't I mean, it obviously doesn't do it by default. My Firefox did it by default. Okay, here it is that log HTTP requests. Okay, so it looks like it does. Yeah. Okay. That's that's a feature that was on by default for me for Firefox developer tools, and isn't on by default in Chrome. So like, the very first thing I'm doing right now is going to Chrome and checking that box, because I really like seeing those requests while I'm debugging my API. I mean, that was a big important thing for me. - -51 -00:16:49,350 --> 00:16:54,720 -Wes Bos: Is there's something to be said for like good defaults in user experience. Like people don't necessarily know. Yeah, - -52 -00:16:54,750 --> 00:16:56,280 -Scott Tolinski: you just might not know what's even there. - -53 -00:16:56,400 --> 00:17:14,640 -Wes Bos: Yeah. What other console filtering? This is one I use a lot. It doesn't seem like a lot of people use it. So yeah, you know, when you get like garbage in your console from a plugin, or like, especially if you are using like an ad blocker, you'll get like errors in your console, because you blocked it, - -54 -00:17:14,640 --> 00:17:19,230 -Scott Tolinski: right? Yeah, the YouTube API is noisy. I'm going to tell you that. - -55 -00:17:19,259 --> 00:19:07,410 -Wes Bos: So so true. And often when I'm doing a course, I get these things from like, like a browser extension, or for something that's totally unrelated. And I don't want these huge errors in my console. Because then I have to say, Oh, don't worry, if you see that error, it's actually fine. So what I what I do is you you can negate those errors by filtering them out with a minus sign in front of them. So instead of filtering your errors for ones you want to see you can filter out errors that you do not want to see. And that's based on the URL or the actual text and the error or the source of the actual error. And that is not you can't do that in Firefox. But again, I talked to the folks at Firefox and I said like, hey, like, Can you do this? And it looked like within 12 hours, they said, Now you can it's not it's not in? It's in nightly, apparently. But it's not in? What's the version that we're using Developer Edition just yet. So I'm looking forward to getting that because I use that a lot to filter out and that was something that nobody else said that they use. So maybe I'm it's just a edge case for me. Finally, one is the service worker tools are not great there is there is the ability to use service workers, but the chrome ServiceWorker dev tools are fantastic. And that's something that I need to tell people how to use a lot because people always email me they've done some other course on localhost 3000. And that course, put a ServiceWorker. And then they email me they're like, what's going on? I can't see anything that you're unlike you clearly have a cached version of the last tutorial that you did on there. So that's actually why I try to use random ports for each of my courses as well. So you don't just run into things like that. - -56 -00:19:07,800 --> 00:19:13,200 -Scott Tolinski: Interesting. Yeah. Hmm. Another one. I haven't I don't do a lot of ServiceWorker work. So yeah, - -57 -00:19:13,340 --> 00:19:20,040 -Wes Bos: No, me neither. Interesting. Oh, what else? So that's like dev tools. Um, how was the browsing experience for you? - -58 -00:19:20,280 --> 00:20:01,470 -Scott Tolinski: Great. Fantastic. I for the most part, I really enjoyed using it as my daily and I had, I think in other upper or other times when I've gone to use Firefox, I found myself going back to Chrome after some bit of time, and I didn't really feel like I needed to do that. I mean, I think one of the biggest things for me was that I have my one password, my password manager all set up. And because of that it made logging into any site trivial. So instead of having to, you know, hunt for passwords, relog into everything. I got all that autofill coming in from one password, and I really enjoyed the fact that it all just worked for me. It was an easy transition over to Firefox, it felt like the easiest transition I've ever done. gotten to a different browser? - -59 -00:20:01,980 --> 00:20:48,540 -Wes Bos: Yeah, that's, that's one of my tips here is to import your history and your bookmarks. Yep. Because that just makes that initial. It's like it doesn't have all of my comforts that I had, you can import those all into Firefox, and then you're, you're ready past that, that hurdle. I really like the privacy aspect of it. So they, when you go to Facebook, they recommend that you install this Facebook container. And they have this idea of container tabs that the browser or the website runs in a container, meaning that if you're on another website, it can't then ping facebook.com, because you're not logged in. And I'm sure they're still tracking you. But you're able to like put these bad websites in a container. And they're not able to reach outside of that, or do any cross cross domain tracking things like that, which is pretty cool. - -60 -00:20:49,070 --> 00:20:53,490 -Scott Tolinski: You don't need a Facebook container if you don't go to Facebook and don't have a Facebook account. - -61 -00:20:54,960 --> 00:21:06,690 -Wes Bos: Yeah, I know. It's like a necessary evil of God. Yeah, that's like the only way I can contact most of my friends. My family, it has like a group on there. And I don't know, it's marketplace. - -62 -00:21:07,049 --> 00:21:14,790 -Scott Tolinski: I have an account, but I don't use it. It's it exists just to be like existing. And then, you know, I - -63 -00:21:14,790 --> 00:21:15,930 -Announcer: don't really know, - -64 -00:21:15,930 --> 00:21:18,350 -Scott Tolinski: I don't go to Facebook anymore. I really don't like it. - -65 -00:21:18,690 --> 00:22:39,300 -Wes Bos: Oh, yeah. Yeah, I wish, I think Facebook's days, or at least how it is are a bit numbered. I would say almost all of my friends no longer post. The only thing is private groups are pretty popular. Yeah, unfortunately, it's everyone's like, well use WhatsApp or like, please come over and convince my entire family to move over to WhatsApp, right? Like it's frustrating anyways, um, I found it extremely stable versus Chrome Canary. So maybe like once every two or three weeks, Chrome Canary would get some weird things. And you can't complain about this, because the whole point of Canary is that you are the canary. But that said, Chrome just did random crashes and stuff like that. And I like using Canary because you got the latest version of all the API's and things like that. And I like to be a couple months ahead of things that are being rolled out. But I found that it's extremely stable. There's like a bunch of little CSS bugs that I kept running into on Chrome and none of those existed. And you'd have to update the browser just to even like, confirm if it was a browser issue, or with their code. So I was always checking, trying to update constantly. And then I found like, zero chrome only experiences. So like there was I think that that whole like, This website is best viewed on Chrome. I don't think that that's a really a thing anymore. So that's, that's nothing you really have to just sweat too much about. - -66 -00:22:39,779 --> 00:23:11,010 -Scott Tolinski: Yeah, yeah, for the most part, it was a seamless transition in the browser experience was really nice. What else Oh, something that I really liked is that the theming in Firefox was really easy. I this is just a low hanging fruit. But I installed a plugin. And I created a level up tutorials theme that was basically, you know, matched my website really nicely. And I love it. I love having my level up theme. And I love that it took me about five seconds to make, you know, I didn't have to, you know, go into any files or do anything to to create this, right? - -67 -00:23:11,460 --> 00:23:49,110 -Wes Bos: You have to code it. Yeah, I immediately went on thing. And there's like four people that have made a cobalt to Firefox theme. And I tried them out. And there's one that's pretty good, I'm pretty happy with it. And that it feels neat to be able to style the tabs and everything on your browser, a big fan of that. There's some other stuff you can turn like these are setup and switch over tips. Turn compact mode on, that will just make the tabs and stuff a little smaller. I'm always big on making the GUI of an editor or something as small as possible, and giving you more room for the content. So there's a setting called compact mode. - -68 -00:23:49,110 --> 00:23:52,140 -Scott Tolinski: Where was that? Where was that setting? located? - -69 -00:23:52,140 --> 00:24:16,320 -Wes Bos: So there's not a lot of like settings settings in Firefox, you have to go to this like weird page. That is, is that about conf Yeah, about colon config. And then you have to search for the setting. And it just it's basically like you remember in in Windows days, you would edit like your H key current user or something like that. What was that that thing where you would edit it? - -70 -00:24:16,830 --> 00:24:23,910 -Scott Tolinski: I don't know. I don't I don't really don't remember my windows days. It's pink. So Oh, there we go. - -71 -00:24:24,360 --> 00:25:13,950 -Wes Bos: Yeah, it basically it's just like a, it's just like a key value editor that you can use to set your settings in there. Another one I did is I set the tab min width to zero. That's one thing that bugged me is that if you have lots of tabs, the browser gets pretty muddy. Like if I'm recording a course and I have like eight tabs open because we've got docks, you get your back end your front end your graph, qL playground and a couple other things. Chrome does a much better job at making just showing the the icon so in order to make that work, I had to set the tab min width to zero and then I had to go a little bit further and hack the CSS. So That it would just show the fav icon, which is a bit of a bummer. So that's one thing I still like a bit better from Chrome is the UI of all the tabs was just a bit cleaner. And it handled lots of tabs and little tabs and things like that a little bit better. - -72 -00:25:14,280 --> 00:25:23,070 -Scott Tolinski: Yeah, I yeah, I would have to agree, but only so slightly, it doesn't really hasn't really didn't really come up for me, I don't think, - -73 -00:25:23,580 --> 00:26:04,620 -Wes Bos: yeah. What are the things here? new new tab, just blank is really good. So when you open a new tab, they try to like suggest new stories and silly stuff like that. And I never liked that. Because when I'm recording a course, it shows like news and websites I've been on, which is annoying. So like, I have a extension in Chrome, that just gives me a blank page when you open a new tab. And you can just customize that New Tab page on Firefox and just delete everything. And it's just white, which is great. Huh? Light theme and dev tools. So light theme in your dev tools. dark theme on your editor is my way of life. I know you. You like the dark theme that for it right? Yeah, I - -74 -00:26:04,620 --> 00:26:13,230 -Scott Tolinski: didn't I yeah. I can't even imagine being in the mind space where I'd want a light theme on my dev tools or in an editor. - -75 -00:26:13,980 --> 00:26:15,090 -Wes Bos: No lighting you - -76 -00:26:15,120 --> 00:26:15,660 -Announcer: Yeah. - -77 -00:26:15,660 --> 00:26:37,890 -Wes Bos: No, not I light the my text editor is. That's that's No, you shouldn't do that. But you should use a light theme in your in your dev tools. No, come on. No. Okay, whatever. I'm so used to light theme from Chrome that I just couldn't get into the dark theme. Which is funny, because that makes no sense. I've been - -78 -00:26:37,890 --> 00:26:50,880 -Scott Tolinski: using dark theme on Chrome forever and ever. So really, yeah. Yeah, man. Uh, okay, what else we got here? Um, get Oh, one thing that really bugged me. Was the casting the tabs. - -79 -00:26:51,360 --> 00:26:52,530 -Wes Bos: Oh, Chromecast? Yeah. - -80 -00:26:52,890 --> 00:27:31,170 -Scott Tolinski: Yeah. So for those of you who don't know, in Colorado, if a Colorado Avalanche hockey game is not on TV, then you can't like watch it because of some dispute with Comcast. Right now. It's absurd. So I find myself pirating a lot of streams of Colorado, avalanche hockey games. And I liked it. For a lot of them, they don't have cast support in the player. So you cast to the tab, cast the tab, put it on the TV, whatever. There's no cast support for tabs in here. So I have to go out and Rob chrome and then go to the link and all that stuff. I would just prefer if this was available in Firefox to be able to cast a tab, but I understand - -81 -00:27:31,200 --> 00:28:27,360 -Wes Bos: why. Oh, yeah, that's Yeah, there's there is like an extension I turned on. Thankfully, I don't do a whole lot of Chrome casting for my computer. But if you are a heavy user of that, then you'll have to probably switch. Actually, as a bit of an aside, there's this awesome Chrome extension called video stream, that lets you just cast any file straight to your Chromecast and not as like a tab cast, but actually throws the file over which is awesome. introducing something like that. Other things that I didn't like, was the URL search bar. So I'm used to, I always do like t WI, and then hit tab. And then you can search within Twitter or YouTube or hit tab. And on Firefox, you have to type at Twitter, and then search it. And then somebody told me that if you are on a website, like YouTube, you can right click on the search bar, and click Add a keyword for the search. - -82 -00:28:27,420 --> 00:28:27,960 -Scott Tolinski: Cool. - -83 -00:28:27,990 --> 00:28:46,500 -Wes Bos: So you can do like YT for YouTube. And then in your browser, you just type YT space, and then go for it. So that's it's probably about 90% of what I want. But I just want it exactly like the chrome version where I can just type out any website use that has a search, hit tab and then search within that website. - -84 -00:28:46,650 --> 00:28:50,730 -Scott Tolinski: Yeah, I feel Yeah, I don't use that a ton. But I could see that being extremely useful. - -85 -00:28:51,300 --> 00:28:57,330 -Wes Bos: There's no Firefox support for Apollo Dev Tools right now, which the reasoning is good, because - -86 -00:28:57,330 --> 00:29:00,330 -Scott Tolinski: yeah, there was support for it, though, at one point, - -87 -00:29:00,540 --> 00:29:32,400 -Wes Bos: they pulled it from you, I guess you could download it, install it yourself. But apparently, Apollo Dev Tools uses a Val, which could be a security issue. So Firefox detects that extension uses eval, and pulled it in, which makes me feel good about Firefox actually scanning the code. But it makes me feel bummed as me wanting to use the dev tools. Yeah. So it's a bit of a bummer, especially as someone who uses like, I need that in my course. And I'm gonna have to tell absolutely everybody in my course, go use Chrome for this. - -88 -00:29:32,430 --> 00:29:53,280 -Scott Tolinski: What's funny is that, you know, as much as I love Apollo, the dev tools have never worked super well for me, like they updated or, you know, I ran, especially they launched their like, local state thing, and I would run a query and just like wouldn't work, and then you have to refresh the page or something to get it to reflect those changes. So that was always a huge bummer for me. Yeah, - -89 -00:29:53,280 --> 00:30:01,290 -Wes Bos: I agree. So question is, will you stay Scott, are you gonna stay on Firefox? Are you gonna go back? - -90 -00:30:01,530 --> 00:30:58,980 -Scott Tolinski: You know what I'm gonna stay? Yeah, I'm actually really liked I liked it so much I'm gonna stay on Firefox for the considerable feature I'd really the annoyances that I have with it are so minor in comparison for the most part, I think the privacy aspects of it, the sort of security things I think are big enough pluses for me that I don't feel like I want to go to Chrome anymore at all. And I'm really happy with Firefox, you know, I really like the dev tools, I think are probably the biggest influencer for me for wanting to stay I just really have gotten used to and really like the dev tools in a way that I don't necessarily have that same joy in Chrome. One, one little minor thing, CPU usage. Sorry, we didn't really touch on this CPU and memory usage to me has been just as high as Chrome. It has not been any better. So I thought that would be better, but it's not. Are you going to stay with? Um, - -91 -00:30:59,190 --> 00:31:52,230 -Wes Bos: Yes, I think so. The one thing I didn't do is switch over to the Firefox app on iOS, I haven't sometimes annoyed me, because like, my history wasn't there. And that is obviously solved. They have a good iOS app. So I just need to do that. I was sort of I think I was just sort of waiting to figure out if I was gonna gonna go for it entirely. And I'm pretty happy. There's some qualms that I have. But obviously, Firefox is listening because they want to hear like what are your your pain points with this type of thing? And they're they're listening very clearly anytime a tweet anything not even mentioning them. They swoop in and say, yeah, this has been fixed or Okay. How would you like to, to approach this? So? Yeah, I'm pretty I feel pretty good about it. It's pretty exciting that Firefox again, is that a spot where it's a really good contender? in much better in a lot of cases much - -92 -00:31:52,230 --> 00:31:52,740 -Announcer: better? That - -93 -00:31:52,740 --> 00:32:15,840 -Wes Bos: was the case in like, what like 15 years ago when I switched over and started using Firebug It was like Oh, it's so much better right and gotta have like their their back at that spot. Yeah. So I think that's it if you if you have switched over to Firefox, I'd love to hear what your thoughts on it. The pluses the minuses tweet us at syntax FM. So I think that's it. - -94 -00:32:16,050 --> 00:32:17,520 -Scott Tolinski: Yeah. That's cool. Yeah. - -95 -00:32:17,550 --> 00:32:22,710 -Wes Bos: Cool. Absolutely. Thanks for tuning in. Catch on Wednesday. Please - -96 -00:32:24,600 --> 00:32:25,410 -Announcer: head on over to syntax.fm - -97 -00:32:25,410 --> 00:32:34,380 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax214.srt b/transcripts/Syntax214.srt deleted file mode 100644 index 001f8da68..000000000 --- a/transcripts/Syntax214.srt +++ /dev/null @@ -1,480 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,820 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:10,530 -development treats out there. strap yourself in and get ready here is got to live ski and Wes Bos. - -4 -00:00:10,559 --> 00:00:21,990 -Wes Bos: Welcome to syntax. This is the 2020 Fitness show. How many times have we done a fitness show here? Scott, maybe this is our third or fourth, number three. Number three. - -5 -00:00:22,019 --> 00:00:28,560 -Scott Tolinski: Yeah, we've done one every year. So this is our third year syntax. And this is the third fitness row. - -6 -00:00:29,099 --> 00:01:23,970 -Wes Bos: Awesome. So today we're gonna be talking about just kind of where we're at with fitness. Developer fitness in general, I think is important topic because we sit hunched over a keyboard all day. And I think there's a, I think one of the ultimate productivity hacks that you can have is being in good shape and having good energy for the work that you do. So that's kind of why we'd like to do this episode, just kind of explain where we're at. We are sponsored by two awesome companies. First one is a fitness company dev lifts. deadlifts has actually sponsored all of our fitness episodes and a bunch of them over the years. They offer a bunch of personal training plans. We'll talk about them partway through the episode. I'm currently on one. It's awesome. And the second one is Sentry which does all of your error and exception tracking front end back end native application, PHP, JavaScript, Ruby, you name it. I will talk about them partway through the episode as well. So Happy New Year, Scott, - -7 -00:01:23,970 --> 00:01:25,440 -Scott Tolinski: Happy New Year, - -8 -00:01:25,649 --> 00:01:27,330 -Wes Bos: how you're feeling this new year. - -9 -00:01:30,930 --> 00:01:31,500 -Unknown: You know, - -10 -00:01:31,590 --> 00:01:56,190 -Scott Tolinski: let me give you a little bit of an insight to how I'm feeling this new year. I when we started getting ready to do this episode here. I am kind of getting over cold so I'm a little congested. I wanted to take a look at decongestion and went to take the decongestant and I also went to put my headphones and I put my headphones in my mouth and I put the decongestant. So that is how I am feeling now um, - -11 -00:01:56,219 --> 00:01:59,250 -Wes Bos: yeah, your ears your decongested then - -12 -00:01:59,520 --> 00:02:40,970 -Scott Tolinski: my ears are decongested absolutely, you know, accordion I spent a good amount of time like really just doing that you know, spring cleaning kind of cleaned up the house, got the the you know, the kitchen table cleaned off, got rid of the Christmas tree, that sort of stuff. And the house feels so dang good that I was able to like I spent a good 20 minutes. And I say this as a B boy, those of you don't know breakdancer, I spent a good 20 minutes rolling around on the floor in my living room last night. And so the fact that we have that much room in our living room right now is pretty unheard of for all the toys and Christmas stuff that was going on. So I'm feeling nice and open and ready to go. I'm just gonna get a little bit of a jumpstart. But how are you feeling? - -13 -00:02:41,340 --> 00:03:41,940 -Wes Bos: I'm feeling great. I this is obviously the first day back at work for 2020. I spent a couple days over the holidays. Totally rejigging my office setup, because over the past, like I don't know, three years, I kept adding more and more gear, which is more and more cables. And I just got to a point where there was just too much stuff in my office. So I I built this thing called the lack rack, which is an Ikea coffee table. Yep. And then you take a second top of an Ikea coffee table and you put it underneath. And it's the exact same width as a like a rackmount server. So I put everything in there, but wheels on it, you can roll it out, and then I clean up my office when it's looking amazing. Like I can roll around in this place as well. I actually am looking at getting some kettlebells Yeah, actually not looking they're coming today for my office because I'll talk about that in just a bit. But like a feeling so good that like New Year new me, I got my office all cleaned up, my desk is looking really good. And I'm just like ready to ready to charge forward with the year. - -14 -00:03:42,300 --> 00:04:40,230 -Scott Tolinski: Cool. Well, that sounds good. Which is, uh, you know, I think this episode hopefully will be inspiring to those of you who aren't doing anything, and those of you who are doing it, something will be inspired to do more. You know, I think that's a really, I'm not necessarily the type to, you know, really think about resolutions being the thing, because honestly, you should be thinking about these things more than once a year. But I do acknowledge that that's like a huge driver for a lot of people as this new year. It's exciting to get going. And I think fitness and health related things especially, which is why there's that whole joke about, you know, January 1, the gym is you know, hyper crowded, and then, you know, February, it's not crowded anymore. So hopefully these are the type of things that you could implement in your life now if you're not doing them or work for and hopefully this just inspires you to do a little bit more. So yeah, no shame. If you're not doing anything, though. Let's, let's all just work to better ourselves in this new year. - -15 -00:04:40,580 --> 00:04:52,520 -Wes Bos: Absolutely. So let's start off with just kind of reflecting on the past year sort of where we're at health wise, we've updated a couple of times over the time. So where are you at right now Scott? Yeah, - -16 -00:04:52,530 --> 00:07:27,390 -Scott Tolinski: so if we're talking about fitness, you know, I for those of you don't know I had a tailbone injury so I have this nerve damage in my my back. Essentially that goes down my leg. And because of that, it's been not a great thing for me in terms of a lot of the fitness things I like to do in the past. I'm a B boy. breakdancer are about 1516 years now. So I like to move a lot and it's really limited my movement, I haven't been able to go snowboarding as much. So last year, I didn't get to do any snowboarding, which is really huge bummer. I went for like a week for one single trip and then paid for it for a while with how much it hurt my tailbone. So that's a huge bummer. But I really tried several different things. weightlifting wise and fitness wise, I tried different, different things. And sometimes I fell off and I didn't lift for, you know, a couple weeks here a couple weeks there, but pretty much for the entire 2019 I at least had some sort of spent time in the gym at least every month for a little bit. Even if I was going through some health issues sometimes that you know, I'm trying to do things where I have this nerve pain, and it's like, okay, maybe if I take a month off from the gym, it will help it and then Okay, didn't help. But so let's go back to the gym. You know, I'm an experimenter in those types of ways. So I've tried several different lifting platforms or lifting versions, I even got to go breaking a few times, but not as much as I would like. I did however, finally find a full body workout, which I'll get into later on in this episode that I've really come to enjoy. I've been doing it throughout the entirety of November and December. So coming into January, I'm still feeling hyped on the progress I'm making here. So I finally really found a nice little flow that I've worked on. My cardio is like non existent right now because I haven't been doing any sort of cardio things. And a good friend of mine lent me his weight belt, which I've been using to get feedback for while I do things like deadlifts or squats. And it's not like a supporting belt, but it like helps you brace your core a little bit more. Oh, really. And I found it's like really helped me understand the form a little bit better that I need. And I've been able to more safely lift heavier weights. And so that to me has been really exciting that I'm able to do that. Another thing I think that I've been really working towards is that we have a an old shed. It was like a very old shed. In fact, I'm going to do a whole before and after when I'm finished with it. It was looks amazing. By the way. Thank you. It was dank, it was so dang. released. It was like the grossest looking thing in the entire world. But - -17 -00:07:27,390 --> 00:07:28,800 -Wes Bos: not a good Dang. No, - -18 -00:07:28,830 --> 00:07:35,490 -Scott Tolinski: not a good day. No, it would look like I mean, it is the 1920s shed that people have been using as a shed for you know, 100 years. - -19 -00:07:35,550 --> 00:07:36,660 -Wes Bos: Katelyn it Yeah, - -20 -00:07:36,770 --> 00:07:58,680 -Scott Tolinski: yeah, I really wanted to make that space more enjoyable for us to use. So I just like covered the whole thing and several coats of different kinds of paint. It took maybe like seven days of just hard work on there. And it looks like an actual gym now. It's like so cool. It's got these like black padded floors. We have a squat rack I painted the walls paint the ceiling - -21 -00:07:58,710 --> 00:08:02,760 -Wes Bos: motivational quotes put up on the wall. Yeah, sure. Arnold's and we, - -22 -00:08:02,760 --> 00:08:32,250 -Scott Tolinski: we just put a giant TV in there, which is going to be fun. That's an old old TV that we had like our first Vizio from like 15 years ago. So I'm excited to have that gym going forward. But that was a huge thing for me. And I got some new equipment. I got a new bench and I got a glute ham developer, which is like my new favorite tool entire world. So that was my past year. And it was a lot of change a lot of growth and a lot of setup for 2020 to be my my best fitness year yet, man, I'm - -23 -00:08:32,250 --> 00:08:39,869 -Wes Bos: TJ and on here, we should say Scott once said he was TJ and I was like what does that mean? It means totally jealous saying. - -24 -00:08:41,249 --> 00:08:46,110 -Scott Tolinski: So in a way you don't know is that I've occasionally said I'm totally TJ and - -25 -00:08:47,070 --> 00:08:52,649 -Wes Bos: Yeah, you got it. You're totally TJ and I'm totally TJ and you're a little home gym that that looks awesome. - -26 -00:08:53,779 --> 00:08:55,279 -Scott Tolinski: Thank you It was hard work. - -27 -00:08:55,350 --> 00:09:00,510 -Wes Bos: I there's Do you have photos on your Instagram? Or you will eventually uh - -28 -00:09:00,570 --> 00:09:13,890 -Scott Tolinski: i'm gonna do eventually because it's not done and I didn't want to do the whole before and after thing when it wasn't finished but maybe either yes episodes live I'll have those photos up because I just hung hung our lights up yesterday so it's like getting - -29 -00:09:13,909 --> 00:11:27,000 -Wes Bos: there. So cool. All right, so my update here is we said on one of the last shows that 2018 was was a tough year for both of us just having kids kids not sleeping. I had like my workload is probably a little bit over committed for that and unfortunately that means that Jim and probably more nutrition for me takes a bit of a hit. Which is a bit of a bummer. So I gained about 12 pounds from where I'd like to be. So I'm working on getting that back down. And it's it's incredible the the energy difference that that you feel just not necessarily just the the the extra weight but just not going to the gym and actually going to the gym for even just like you start going for like two weeks again. The energy differences is amazing. And it's funny how I often forget that. Yeah. Because it's it's all about energy. For me, it's all about like feeling good and cranking out as much work as I can possibly get done in my eight hour day. And it's such a such a life hack, being able to be doing exercise a couple times a week in it translates so well to getting stuff done writing better code, just having that motivation to finish your stuff up. So that's kind of where I'm at right now is trying to work through that. I've been doing the dev lips plan. And so they're one of our sponsors. Today, they hooked me up with another plan. I was doing one of their plans for probably about a year and a half. And I really liked, I really liked it. And then basically, once I got back into it last November, I said, like, Hey, can you do another plan for me, here's where I'm at with. I'll talk about that in the sponsor spot. But basically, I've been doing another one with lifting, doing a lot more cardio recently, which I've been enjoying, specifically, because when we go to our cottage for the summer, I don't have anything up there that is like a gym or something like that. But what you do have is beautiful running around the lake. So I in the summers, I usually like to go for runs nice and early in the morning. So I've been trying to get my cardio up in preparation for this coming summer to do that, and been doing a lot of HIIT high intensity interval training. Is that what it stands for? - -30 -00:11:27,090 --> 00:11:28,440 -Scott Tolinski: That's it. And that's it. - -31 -00:11:28,529 --> 00:11:47,250 -Wes Bos: And that basically that what that is, is you just run like crazy for 90 seconds and then you cool it down for 30 seconds and then you go absolutely bonkers for for 30 seconds is usually that I'm that person in the gym where you like looking over? Like what's wrong with that guy, like, you're going way too fast. You know, - -32 -00:11:47,279 --> 00:12:13,020 -Scott Tolinski: I prefer what I'm doing high intensity interval training would be there's a site fitness Blender that has a whole ton of free videos. Yeah, they do. Like they'll do like burpees or something where you you get to the floor, you jump up into the air again on the floor, you jump up there you do mountain climbers, those kind of things. That to me is like maybe the preferred version of that same thing. But yeah, yeah. I've never been a fan of running for some reason. Never ever, - -33 -00:12:14,039 --> 00:12:21,510 -Wes Bos: man. Alright, so now let's let's move into, let's move into what we're doing right now. What is our current workout look like? - -34 -00:12:21,720 --> 00:15:22,740 -Scott Tolinski: Yeah, current workout for me is it's really interesting. So I've been doing a lot of workouts over time. In fact, I was doing a deadlift one for a little bit. But you know, the workout they gave me was really great geared towards the things I was doing and breaking. The problem is my joints have taken a bit of a beating. And I have been breaking as much. So I wanted to focus a little bit more on general full on strength. So I've just been doing this lifting routine. Now my lifting routine has gone through so many different revisions. But here's its current state, and I know that some people will not like this. I'm gonna just say that up front. But I've been doing this now for three months. And I haven't seen any downsides yet to it. So okay, I do a four day split, where I have four different exercises that I do. I have a chest and triceps, I have a back and biceps. I have a shoulders and I have a leg day. So those are my four days. And within all of those four days i do i alternate abs and like leg development with the glute ham developer. So my workout days are my workout schedule is seven days on zero days off. So people talk about needing a rest day and all that stuff. But let me tell you, I've been doing athletic anything for my entire life. I was a you know, sponsored rollerblader and I was a B boy for 15 years and I've been weightlifting for 10 years or something. So I've been doing a lot of stuff for a long time. And I can listen to my body and know when in fact it's a being overworked and not. So I do this four day split I spend about an hour in the gym seven days a week. Make sure Courtney gets a time as well if she wants it, but my back. Okay, let's start my chest day is incline bench press with dumbbells than a bench press than a decline bench press. And then I use the glute ham developer to do sit ups with holding a weight and then I do close grip bench press for my triceps. So I do a lot of stuff that hammers and then back day I do weighted pull ups than I do deadlifts. I do bench supported rows and then I use the glute ham developer to do glute ham raises. Then concentration curls and then reverse concentration curl. So again, my workouts are pretty pretty stacked here. Shoulders I do overhead press lateral raise a close grip bench press and setups and then let's see what's my leg day I do squats. deadlifts, calf raises glute ham raises concentration curls and reverse curls. So like I said, these are pretty loaded. And I've been doing this now for like I said three months and you would think that a would like Be a little bit overworked. But to be honest, I'm not making progress. Every single workout I'm adding 2.5 to all my lifts that I'm having like really good workout. So this is what it looks like for me. But that's it, I'm, I would say I'm fairly advanced in this stuff in terms of how long I've been doing it, and being able to understand my body and I haven't gotten injured at all, which is a big plus, for me. - -35 -00:15:22,950 --> 00:15:28,529 -Wes Bos: That's great. Are you still using that heavy set app to track if you're progressing in your weights? - -36 -00:15:28,710 --> 00:16:30,360 -Scott Tolinski: Yes, I'm using an app called heavy set for for iOS, it's not the most intuitive app, you kind of have to set some stuff up yourself. But the benefits are really outweigh that for me. Well, I posted on Instagram, I'll post on on Twitter. It's funny because this this chart looks a lot like what progress really looks like in life. It goes up and down and up and up and up and up, whatever. But the average is, is like a steady progression up. So even if one workout from the next, I'm not moving as much weight, I'm still growing every single workout. One of the things I really love about this app is it tells you your total volume. So like I can look and see that. Let's see. Yesterday for my workout. I moved a total of 21,500 pounds between all of my exercise, whether it's deadlifts, pull ups, deadlift, whatever. And so I can look at that and see, okay, I'm doing about the same amount of work, every single workout, whether it's a back day, chest day, whatever, and I can throw the volume or whatever, where I need it to, to see that progression upwards. - -37 -00:16:30,840 --> 00:16:42,870 -Wes Bos: Cool. That's, that's really neat. So I've been going on three days a week, which is just about as much as as I can handle. Being away from like, the gym is pretty close, like a 10 minute walk, which is great. - -38 -00:16:42,899 --> 00:16:46,020 -Scott Tolinski: Yeah, but I can't my gym is about a 10 second walk. - -39 -00:16:46,260 --> 00:18:31,410 -Wes Bos: Haha, TJ and, yeah, so I go three days a week, I go once at night, I sort of have a trade off with my wife, and then twice during the day. So after I record this podcast, all like Mondays for me are usually like wake up. For the two hours before we record this podcast, I do emails and sort of just like tidy up stuff that needs to be prepped for the week, then we record this podcast, then I go to the gym, and then I'll come back and do some more sort of tidying up. And then the rest of the week is sort of just like heads down doing like heavy, heavy code. So I'll try to go once on on Monday. And then I'll try to go once on Wednesday, and then again on Thursday. Sometimes we can sneak it in before a date night, which is my favorite. Because there's nothing better than like just killing out at the gym and then going and having like a nice beer and Oh yes, take it. So apparently, according to deadlift guys, apparently that is one of the best times to have a beer as well as your body is still burning stuff. So I like that. Basically, one day, his chest and back. It's got a bunch of different exercises through that. And then legs and chest on the second day and then legs and back on that I've sort of neglected back in the past, not in the last like a couple of years. But like when I was young, I was just more about chest and arms. Right? Yeah, yeah. And like just like my have my daughter on my, on my shoulders for like half an hour. The other day. We're walking home from something and like the next day I was just had hugest headache ever. And I was like, Oh man, I like I don't know if I pinch something or if I just need a stronger back. Yeah. But I was like, I need to make sure that I'm not like this old guy that has back problems. Right? So - -40 -00:18:31,410 --> 00:18:38,090 -Scott Tolinski: are you doing any sort of like pull up motion? link or maybe like a? What is the machine where you pull? Yeah, yeah, - -41 -00:18:38,130 --> 00:18:44,460 -Wes Bos: this one? Yeah, were you it's the straight bars above you and you pull down. Is that good for for that type of thing? - -42 -00:18:44,490 --> 00:19:38,940 -Scott Tolinski: Oh, yeah. Yeah, yeah. And especially if when you're doing it, you're like, focusing on feeling it in your back. They talk a lot about this is a little little like a little small thing where they talk about this mind muscle connection that when you're doing a specific exercise, specifically like one like that, you could do that exercise and feel it all in your arms and your chest, right, and you're just like pulling it like that. But that exercise your back is the muscle that should be doing that exercise. Yeah. And your body is often wanting to substitute the weaker muscle with like a stronger muscle. So if your chest and arms are stronger, it's going to try to use those more than your part of your back that's weak. So like if you really think about those back muscles and pulling those in when you're pulling it down. And that goes for any exercise. It makes us so much better for the perfect girl. So yeah, I mean, if you want back stuff that rose whatever that you're doing, I'm sure Douglas guys got you covered. - -43 -00:19:39,270 --> 00:20:02,760 -Wes Bos: Yeah, no, that's how I see it going right after court. This podcast is back day. So I'm going to to make sure like what I've been doing is like trying to go super light when I'm learning a new exercise just to make sure that I have the form and I can feel it because I certainly know you can either hurt yourself or just be wasting back day because you're like you said you're coming compensating with other ones. So that's a good, good one. - -44 -00:20:03,050 --> 00:20:47,060 -Scott Tolinski: Yeah, that that going, like not allowing your ego to step in, like, it's too easy for me to look at my app and be like, well, I did this amount last year. So I should be able to do this. Like, that's not really what it's about maybe, like, specifically yesterday, I was doing rows. And I was doing it at a, I do these like bench supported rows, because it's like less hard on your your back to hold yourself in that position. And I was doing like 125 or something, I was doing it. And like, the last one, it felt fine, but I felt like I was sacrificing my form. So I dropped 10 pounds. And I did the next one. And I just did it really concentrating on my form. And it's just as good. I mean, like, don't let that ego Yeah, and I'm not saying you are but like - -45 -00:20:47,060 --> 00:20:49,770 -Wes Bos: no, no tips for everyone listening. That's such a hard thing - -46 -00:20:49,770 --> 00:20:58,580 -Scott Tolinski: is to not let your ego jump in there and be like, walk us through us, you know, cuz it's just, it's just something that we're young innately want to do. - -47 -00:20:59,090 --> 00:21:38,760 -Wes Bos: Totally, totally. Another thing that the dethleffs guys gave me that I love, they call them cardio finishers. I call them blasters. Because they're just like, like you want to leave the gym. Just like toast you want to you want to leave the gym every day and sometimes when you are lifting weights you have like sets in between like you feel like tired but you don't feel like you know so at the at the very end after I do all my my lifting weights. They gave me like these eight different blasters. The one my favorite one is rowing, I didn't even know I enjoyed rowing. - -48 -00:21:38,790 --> 00:21:40,170 -Unknown: rowing is so good. - -49 -00:21:40,260 --> 00:22:36,150 -Wes Bos: It's so it's 500 meters row 500 meters as fast as possible. And you aim for under two minutes. And I'm just like, you get into like two minutes. I bet I could do a minute and a half and then and then once you get like close to two minutes, I'm dying. And like just like panting like crazy and like I could barely do it. And you can see on the screen like your pace and you keep going over two minutes and under two minutes. And oh, I love that because it's just two minutes at the end just do it on your way out just do a real quick and just like those little little cardio headers blasters are I really enjoy those. If you're not like the most athletic person in the world, or just anybody you can still do rowing. And let me tell you if you replace your treadmill or your What's that one thing where you get your arms gone the elliptical, you replace the treadmill or elliptical with rowing. - -50 -00:22:36,150 --> 00:23:05,670 -Scott Tolinski: Oh my gosh, like that it like watch a couple of videos on rowing form because the forums important, but once you do rowing at all, it will absolutely kill you. And it's not like like, the cool thing about rowing is that like really super advanced people can get their butts kicked by the rower and people who are basic can still get that same butt kick from the rower and you can you can grow with it so much. If there's like one piece of equipment that I would splurge on it would be a really dope rower. - -51 -00:23:05,910 --> 00:23:29,730 -Wes Bos: A buddy of mine just got a like a for 200 bucks. He said he got one from China on Black Friday. Whoa. And he said, it's like it's not great. But like it does the job. And it was like do and I'm sure you can find one like on the local classifieds as well. Yeah. If you like don't want to totally invest in something like that just to see if you like it or not. And it's surprisingly affordable. Right? And I know 200 bucks is not cheap. - -52 -00:23:29,759 --> 00:23:32,190 -Scott Tolinski: But I don't have the room for one is the problem. - -53 -00:23:32,219 --> 00:23:36,240 -Wes Bos: Yeah, they're they're big, right? And you can't just like fold them away like a treadmill either. - -54 -00:23:36,479 --> 00:23:44,100 -Scott Tolinski: Well, maybe you can't actually you can, you can follow them up. But it wouldn't fit in our gym with all the stuff we have in there right now. So that would be a huge thing. - -55 -00:23:44,100 --> 00:24:39,000 -Wes Bos: You need a second level, second level ops guys. I think that's always good. The other thing I'm trying to focus on right now is figure out like, what can I do when I'm stuck on something in my office. So I just clean up my office, I have a like a fairly large office maybe, I don't know, 25 feet by 11 feet or so. And the ceilings are decent. It's like a third floor house. So it's not like like 10 foot ceilings, but I think it's high enough to do some like, just like kettlebell workouts, some, some swings and stuff like that. So I've ordered some they should be coming any minute now. Actually, I just adore. And I'm gonna try that because sometimes when I'm stuck on a programming problem, instead of like, just like going to YouTube or whatever to just like, take my mind off of for a second. Like maybe I should try doing some sort of exercise in between. So that's kind of something I'm trying right now. - -56 -00:24:39,330 --> 00:25:40,380 -Scott Tolinski: That's a good thing. You know, a lot of people they don't know when they can fit in an exercise or whatever. Even just like going for a walk at work, right? Like if you're stuck on something, go for a walk around the block that gets your blood moving. It's way better than do whatever you're going to be doing sitting at your desk. We used to work at a pretty big office building, my boss Ben and I and we would just, we not only would we do laps outside around the building, but on good days, what we would do is we would do a lap around the first floor, and then we'd walk up the stairs and do a lap or on the second floor and then walk up the stairs and like, it wouldn't be like and we would just chat and have a conversation, it would be more like just, you know, buddies hanging out, then getting movement, but at the end of the day, you're still burning calories doing that you're moving, you're doing something that's better than just sitting in your chair. And that's like a low hanging fruit to move when you're stuck in a programming issue because we have all that we all know those those times when you just butting your head against something and you're not going to necessarily solve that issue just sitting there butting your head against it still. - -57 -00:25:40,560 --> 00:25:59,550 -Wes Bos: totally totally so I'm so excited by like this. Do you use kettlebells at all I just got into them in the last like month or so just there's this like new room at our gym and they just got a bunch of them in there. So I just like Washington YouTube videos on Yeah, how to do swings, and if they seem very versatile, so I thought 2030 bucks, might as well try it. - -58 -00:25:59,820 --> 00:26:41,940 -Scott Tolinski: They are versatile. Yeah, we have a 35 pound kettlebell that was gifted to me from level up tutorials developer Eric satorious. He's living in Denver for a little bit he bought this kettlebell and he was like flying out to go live somewhere else. He's like, How the heck am I gonna get this kettlebell anywhere? I don't have like any. Here, I'm not driving. So he just, he gave it to us for super cheap. So we got that. To do that. I do the swings, the ones where it's between your leg and you yelling it and yeah, the 35 pounder kicks, kicks my butt. I don't do a ton of stuff with it anymore. But I do fairly often. It's it's in the gym. We have it there just to whenever you're feeling like moving. The good thing about those exercises, your whole body's moving. But yeah, kick kicks your butt. - -59 -00:26:42,240 --> 00:29:42,360 -Wes Bos: I always saw people doing like the swings. And I was like, come on, like what does that do? And then I did it. And I was like, oh, it feels pretty good. And the next day, my butt hurt so much. Yeah, yeah. megabyte. And so it was, it's a good one. All right, let's take a break for one of our sponsors. This one is dev lips, which is totally related to the fitness episode. So DevOps is out there to refactor your body. So it's JC and dad, JC is a developer and obviously super into fitness, and that his actual personal trainer, and they've put together a couple different plans and things that you can sign up for to get in shape. And it's totally a targeted at developers and a lifestyle that we live and sort of the community that we like to have around that thing. So there are two things that dev lifts currently has, there is fit dot start, which is has a couple different options. Basically, what I like about deadlifts is that you you talk to them and you fill out this survey and you talk about like, like, where are you at right now? What do you want to achieve? Do you want to get lean? Do you want to remove body weight? Do you want to get strong? And then you also talk to them about eating habits? Can you go to the gym? Do you want to do it at home? Do you travel a lot, and they'll compile all that information into just a set of exercises and a nutrition plan that will will help you out. And that's really cool, because that's exactly what I want. As a developer. I don't want a personal trainer, I don't want 1000 different YouTube videos, I just want someone to take all of the aspects of my life into account and tell me what to do. And then I can follow that I can follow the instructions once I have that. So that's what deadlifts will give you. They've got fit dot start, you can you can have few options, lean bodyweight and strong. The workouts are delivered to you via email each month and you also get access to the slack community. So you can ask questions as to like like I specifically ping JCS said, Hey, ever do kettlebells like like what's this all about? And he kind of gave me some some of his thoughts and things that you can do with them some stuff that I hadn't even thought of which is cool. And then they also have their premium option, which is a custom tailored options where you get your workouts and nutrition advice. After answering the questionnaire that also check in with you each week via slack. Make sure See how it's going. If you need to tailor it a little bit different here and there. So pretty cool. I recommend it they are offering 50% off their plans. If you want fit start, you can use the coupon code syntax. And if you want the premium offering, use the coupon code tasty. And each of those will give you 50% off, go to dev lifts.io to check it out. And I'm sure they'll ask the answer any questions that you possibly have before you want to sign up. And check it out if you want to get healthy and fit and focused on on your fitness this year. Thanks so much to deathless for sponsoring. Thank you. - -60 -00:29:42,570 --> 00:30:30,630 -Scott Tolinski: Yeah, one thing I want to point out before I guess we go any further in this episode is is those of you who are maybe newer to syntax, you might be listening to this and you might be thinking okay, this is great. We're getting these stories, but I don't know a whole lot about any of this stuff. Maybe I've never done anything. We have two other fitness episodes like we mentioned at the get go on this site. We had the the fitness one, the very first fitness one. And then we did a follow up last year. So if you want to learn a little bit more about some of what we, how we feel about some of this stuff, but on the other episodes, the past two episodes, and you'll learn a little bit more about maybe some beginner things that you could do, or ways that you can get started or whatever. And it's fun. You'll also notice that deadlifts have sponsored those episodes as well. They've been a longtime supporter of syntek. So again, thank you deadlifts for supporting us for this long, and we really appreciate what you're doing. - -61 -00:30:31,020 --> 00:30:46,980 -Wes Bos: Yes. So let's get into nutrition, which I think is just as important as or maybe even more important than then working out. So what you eat, how much you eat. Yeah, those types of things really effective. So where are you at right now with your nutrition? - -62 -00:30:47,310 --> 00:31:10,440 -Scott Tolinski: Yeah, so one thing I'd like to say is that, like, a lot of people want to make it really complicated, but at the end of the day, we're talking calories in versus calories out. It's just simple physics, right? Your body's gonna, you know, if you expel a bunch of calories, and you income a bunch of calories, the end result is going to be what happens to your body. So that said, I'm not really doing anything that crazy, Courtney makes really good meals. - -63 -00:31:10,920 --> 00:31:11,610 -Wes Bos: Yeah, she, - -64 -00:31:11,610 --> 00:35:29,940 -Scott Tolinski: she makes really good food that is like, what she gets, she gets a lot of, I wish I knew this is like skinny tastes, which is like sounds like it's not going to be good. I think it's a blog, it a lot of the stuff on here is like really good recipes. And they're not like, I don't want to put these people down because I'm fully into this. But like, if they're not like vegan vegetarian stuff, like it's actually like good recipes, they're just made using nice ingredients. It's the stuff that's gonna be good for you. And so, you know, I'm lucky that she's really into making really nice food like this. And so because of that, we we eat pretty, pretty nice. Here, we pretty clean. With the addition of the new baby, it has been a little bit difficult to also make food all the time. Even we're both feeling worked, not just her Courtney's feeling worked, I'm feeling worked. Yeah, neither of us want to make anything. And then we end up ordering a pizza. So that that happens. And I think this year, it's happened more than any other time. But at the end of the day, I'm expelling so much energy via my workouts via breaking whatever, that I kind of need a lot of food, I need to eat a lot of stuff. So for the most part, I don't think too much about nutrition. I have a set of recipes that I make that are all pretty good. Courtney has a bunch of stuff that she makes, and we just sort of go through the schedule and make it so good dinners. Yeah, that's one. salads for lunch are really super easy. Here's what you do. You go to Costco, you buy a couple bags of the big salads. And then you buy a rotisserie chicken, you rip up that rotisserie chicken, you put it into a bag every single day for lunch, you have a salad with dressing crew tons and chicken, chicken. And that's five days of lunches, man, that's five days, you can have a little little extra there. But that's like really super easy, low hanging fruit. And let me tell you, I don't crave any of that stuff. I occasionally we'll go out and get Panda Express because you know, kind of had that panda. But you do regret it afterwards. Right? Yeah. Personally, I don't do a lot of fast food. And maybe that helps that I'm working at home, right? I can walk to the kitchen and get that salad rather than being like a bunch of buddies being like, oh, where do you want to go out to lunch? Totally. Oh, man. That's, that's hard. Because that was a huge thing. For me. When I worked in an office, when I worked in office, it was always me sending panda gifts to my coworker so that we could go to Panda Express. We just he would get a panda gift. And he'd be like, again, what are you doing? So it's a little bit easier for me and I recognize that. But at the end of the day, it's easy to make those salads because you just buy those big bags, buy those premade things and you don't have to really do a whole lot yourself. As far as like dessert and stuff like that. I've never been a sweets person ever, never really been a sweets person. Although we got into a routine when Brooklyn was born that Courtney and I were just so wiped at the end of the day, we were like, Oh, my ice cream. And that was like that, let's have some ice cream became an everyday let's have some ice cream. And like you eat ice cream every day. Like I'm just as good with like a couple of pieces of chocolate with peanut butter or something like peanut butter cups. I'm good with a couple of that. I don't need a whole thing of ice cream every day. And so for me it was recognizing that maybe that's a little bit of a slippery slope to just start like relying on some of that stuff after dinner. And so I do that. I also do intermittent fasting but I don't do it. I don't do it hardcore intermittent fasting for me isn't like just not eating. It's it's basically just cutting out eating before 10 o'clock, and it's cutting out eating after dinner so I don't have any snacks after dinner, dinner, I have a little dessert and then I just drink water or tea or have a beer or something instead of having like snacks. So that that's it for me. It's just like I'm not a lot of extra stuff, but it This wasn't a major life change for me to get here. This has just been like a progression. Yeah, every year changing it a little bit differently. So my advice, if you want to be eating a little bit better doing these things is to make small changes here or there, right? make a small change. Don't make a big change, make a small change and stick to it, then make another small change and stick to it and just go from there. So that's, that's really what I'm doing. For my nutrition. Again, I'm not thinking about it too much, because I'm doing so much work. But what are you doing for your nutrition? - -65 -00:35:30,270 --> 00:35:53,040 -Wes Bos: Yeah, so I'm, I, I think for me, the biggest thing with nutrition is just making sure that I don't eat more than I should. Because like you, we don't really eat bad stuff. We're lucky that both of our kids so far are great eaters. You can pretty much give them anything we don't have like I know a lot of my friends have to cook like two meals, like one for their kids and then one for themselves. - -66 -00:35:53,100 --> 00:35:54,380 -Scott Tolinski: We kind of got to do that. - -67 -00:35:54,650 --> 00:35:56,010 -Landon's not a great either. Yeah. - -68 -00:35:56,010 --> 00:36:20,960 -Wes Bos: No, that's I'm so glad that our kids like they're not amazing. Like some days, you know, I don't like that and, and stuff like that. But we never have to cook two meals or basically just give them what, what we're eating and we don't like I don't have any tips on how to make your kids not picky eaters, because I think we just got lucky. We're crossing our fingers for the third one right now because we it's been going well, - -69 -00:36:21,150 --> 00:37:06,030 -Scott Tolinski: we'll see about Brooklyn, but like Landon, it's so funny because like, it's not necessarily that he doesn't like the things I said he just doesn't want to try it. Like yesterday, I made like teriyaki noodles and all this stuff. He loves doodles and Teddy's gonna like it's teriyaki. It's kind of sugary, it's kind of whatever. And he was just like, I don't like it. And I'm just like, you didn't even try it. You like noodles? These are salty, sugary noodles. Just give you guys like, I want to try it. I'm like, come on. We. I don't know if you're familiar with Daniel Tiger, Daniel Tiger. NPO. Yeah, it's kind of like a Mr. Rogers Neighborhood sort of animated thing. And there's an episode where it's like, you got to try new foods because they might taste good. And so we sing that to him all the time. And he's just like, - -70 -00:37:07,980 --> 00:37:09,090 -Unknown: don't want to, - -71 -00:37:09,540 --> 00:38:23,850 -Wes Bos: like, yeah, just try. Oh, man. Yeah, that I think my actually my only tip I know, I said don't have tips. But I always have tips is that like, we never stress our kids out around eating, we basically put it in front of them. And we also did what's called baby led weaning where you just as soon as the kid is six months old, you start giving them just a little pieces of food and Yep, you don't like look at them, you don't tell them to sit down and eat you just kind of like put it in front of them and sometimes they don't need anything but when they're hungry though, they will actually eat and I think that mix with just being lucky is as worked out. So anyways, um, what what I do to whenever I feel like I'll probably overeating or eating too much or eating some of the wrong stuff is just like macro tracking. So usually for about a month I'll try to track every meal that I'm having and put it into an app and then I find like after a month a month and a half you sort of get in tune with like how much you can eat of each meal and and that and then and then I stopped doing that and then you're sort of in tune with with with how much you're supposed to be eating. I am still going low carb definitely makes me feel I was the first episode we did I did was doing full on keto, which I really liked. It's just a bit hard with family to do that - -72 -00:38:23,900 --> 00:38:25,190 -Scott Tolinski: low carb is the way to go. - -73 -00:38:25,230 --> 00:39:00,600 -Wes Bos: Yeah, that's great. We don't get a whole whole lot of bread and pasta and stuff like that anyways at our house. Most of our meals are high on veggies so brussel sprouts, salad chickpeas, roasted chickpeas are one of our favorite late lately. Green beans things like that big fan of that and then some sort of meat so we usually don't do like a like when I grew up it was potato or pasta and then along with the other one so we generally don't do a whole lot of pasta things like that. We've replaced a lot of stuff with cauliflower lately and yeah, - -74 -00:39:00,600 --> 00:39:21,650 -Scott Tolinski: I saw that and he did I thought I would be like no thank you like cauliflower rice, cauliflower rice or cauliflower neoci or something but I don't know if that's actually colorful or whatever but I'm surprised at some some of these substitutions that you can get at Trader Joe's or wherever that are just term really good - -75 -00:39:21,960 --> 00:41:01,610 -Wes Bos: yeah the the cauliflower is a bit hard for me to get on board but if you dress it up enough or you cook it properly then then I can get on board but like I've certainly been served cauliflower rice before and I couldn't put it down just because but that said for me it's like I absolutely love food I love cooking and things like that. And last episode I said I was getting super into like fermentation and I'm still super into fermentation crunchy, sour, spicy, those are my flavors. I don't like sweet I don't eat a lot a whole lot of sweets or, or like you said candy, things like that. I just got this jar. I went to drop my my daughter off at school and one of her friends is Korean. So naturally I'm asking her like, hey, like, do you make kimchi? And she's like, my, my mom makes the best kimchi ever. So she gave me this like, big thing of stinky kimchi. And, oh, I love kimchi I can eat. I can eat it all day long. It's still it's for those who don't know, it's it's fermented cabbage. That's also kind of a bit spicy. So it's crunchy and spicy. It's got the fermented flavor on it. It's probably one of my favorite toppings ever. What else here beer is probably my downfall. That's probably the reason why I am a couple pounds overweight right now. It's just like, nothing better than especially with having kids. Yeah, you're stressed out from a date. Nothing better than having a beer with my wife at the end of the day. But that's something I'm working to cut out over the next couple months just as I'm trying to drop it because beer especially like some of these like super heavy IPAs, things like that those things are loaded with carbs and calories. So do - -76 -00:41:01,610 --> 00:41:02,960 -Scott Tolinski: you know how I cut that out for me? - -77 -00:41:03,330 --> 00:41:03,860 -Wes Bos: How - -78 -00:41:03,960 --> 00:41:07,110 -Scott Tolinski: Niccolo light I just stopped keeping it in the house. - -79 -00:41:07,190 --> 00:41:09,030 -Wes Bos: Yeah, that's that's it for me. - -80 -00:41:09,420 --> 00:41:44,670 -Scott Tolinski: I the the problem is that we have a liquor store two blocks away, but it's still two blocks. I gotta go walk right, I could walk two blocks to go to the liquor store. But at the end of the day, if I have a beer, and I go to go to the grocery store, and I pick up a six pack and just have it in the fridge, I'm gonna drink it. I'm gonna have one I'm gonna have to maybe add in the evening. I'm gonna drink them if they're there. Yeah, and if they're not, they're not going to be like, you know what, it's seven o'clock. 738 30 whatever. I just put the kids down. Let me go walk two blocks to let go. I'm gonna be like, I'm too tired to go to the liquor store. So just not having into the house has been a big thing for me. - -81 -00:41:45,000 --> 00:42:14,730 -Wes Bos: I've switched mine over to kombucha at night instead. Whoo. Because like, I just like, I just like a bit of like a fizzy drink. And that's not a pop. And I never would buy a lot of kombucha because it's so expensive at the store for some reason. Yeah, it's like rotten tea. Why is it so expensive? But I'm just like, whatever the beer is expensive as well. I'm just gonna buy a bunch of kombucha and replace that as my like having something at night. So I'm excited to see how that pans out. Yeah, - -82 -00:42:14,760 --> 00:42:32,250 -Scott Tolinski: that's a good that we were doing that too. In fact, when Courtney was pregnant, too, you know, I didn't want to look drink to you know, make her feel left out. Although that did change at some point. You know, we would we would both drink kombucha wine glasses. You put it in a wine glass. It feels more like you're having a nightcap. Yeah, - -83 -00:42:32,550 --> 00:42:40,380 -Wes Bos: it's good stuff. Um, so speaking of tracking macros, Matt, what about tracking errors? Scott? Oh, you're - -84 -00:42:40,780 --> 00:47:09,160 -Scott Tolinski: new Wes. Wow. Big one big one right there. Yeah. Let's talk about our sponsor today, which is Sentry. Now. sentry@sentry.io is a longtime sponsor of us over here at syntaxin. It's a great way to track those bugs. And you can track those bugs all day long. You can track them with a release, you can track them with a specific user, you can do all sorts of stuff, maybe one user is having this very specific issue, you can attach that user ID to that issue. And then you can go look up and see. Alright, what's so special about this particular users data that's causing this issue or what what could possibly be the problem here? Well, that's my really my favorite thing about sentry is that allows you to understand the errors that your application is giving off and allows you to understand when and how you fix them. So you're going to want to try sentry again, Sentry.io, use the coupon code tasty treat all lowercase all one word, you're going to get two months for free. Again, this is one of those tools that I cannot see my my business even functioning without just because it is so dang important to understand what the user is seeing on your application. It's funny people messaged me all the time. They're like, I'm sure you saw this in your Sentry, but I'm experiencing this mic. I'm on it. working on it. So again, last Sentry thank you so much for sponsoring. Okay, so let's get into the supplement side of things here. This is going to be easy for me because in the past I've taken supplements I was doing like I don't want to seem like these were like no dose or something like that. These were just like divvied out caffeine so like 100 milligrams of caffeine that you could have instead of a coffee I was thinking that was better because you were saving on calories and it was cheaper and all this stuff is cheaper than having coffee. I have long since cut that out and I've since moved to coffee. I know coffee has a lot of benefits. I drink tea in the afternoon now I was drinking tea a lot. I have been brewed bring a lot of my own cold brew for the caffeine. But to be honest, I think I'm getting a little too hot and heavy a little too much with the cold brew here. It's it's a little too much so odn I'm od and on that calf which is like, you know, legitimate concern. So I've been trying to pull back a little bit I have like a one coffee a day limit now I'm gonna have a coffee in the morning and then in the afternoon, I'll have like a Green tea or white tea, something a little bit less than than caffeine. I have a really great app for iOS. Because I'm really into tracking. I'm just so into tracking and this is it. What's this app called called caffeine app. Wow, appropriately named that. The cool thing about caffeine app is that you can say, Alright, I had a large cold brew right now. Now large cold brew has a whopping 230 milligrams of caffeine in it whoof. And this app will show you the lifespan of that caffeine in your body. And a nice little chart that shows how like sort of like the half life, how the caffeine depreciates over the course of a day. So you can see that, okay, at 3pm. Today, I'll still have 110 milligrams of caffeine in my body because of that cold brew that I had at nine o'clock. Which means what the cool thing is, they have like a little bar that says Like, this is the amount of caffeine that you can have in your body and still sleep comfortably. So you can like plan your caffeine throughout the day to make sure you're below that bar. So caffeine for me is really the only supplement that I'm doing other than maybe a probiotic. I'm doing a probiotic because I have been on and there's a whole whole fiasco with me getting strep throat four times in a row. I've been biotics so much in the past two years that like my stomach is just goofed up in terms of the biology there. So I understand the pros and cons and all of the stuff about probiotics. And if they actually work, I'm taking a specific one. And I am drowning myself in probiotics to try to get my stomach. I'm also doing kefir, which I mentioned before, as well as just other fermented things to get that sort of bacteria up to where it needs to be. And then I take a few medications for my nerve damage. So because of that I've cut out all supplements other than a high quality protein for our workouts. I was taking a few supplements and you remember in the past, oh, I guess I am taking supplements. I'm acting like I'm not taking anything. I'm taking fish oil. Yeah, and I'm liking psyllium husk is like a fiber supplement. But that's it. That's it, nothing really major. - -85 -00:47:09,600 --> 00:47:54,870 -Wes Bos: Okay, I am taking a few things and experimenting with a few things as well. So the one that I always take is a multivitamin. I was taking the Vita Jim ones for a while. But I switched I listened to Kevin Rose podcast and he recommended these ones called mega food men's one a day. And they're it's basically just like a multivitamin, but they come from actual organic natural sources. So like I don't know how they get a carrot into the vitamin, but Oh, cool. They're great. So you can take them on an empty stomach, you don't get that kind of feeling. And the the actual, like the numbers on the side of the bottle are higher than most of the stuff that you find out like a CVS or something. So big fan of that one again, it's called the megafood men's one a day. I'll put link in the show notes for that. Yeah, this - -86 -00:47:54,870 --> 00:47:55,620 -Scott Tolinski: looks nice. - -87 -00:47:55,680 --> 00:48:21,810 -Wes Bos: Yeah, I've been been really enjoying that one also been taking magnesium at a different point. Don't take them together. Apparently, if you take magnesium with a multivitamin, they will cancel each other out. So I've been taking that to try to get better sleep like I sleep a lot, but I feel like I don't get great sleep sometimes. And the magnesium. I've tried a whole bunch of things. And the magnesium is the one that has actually been helping me take a fish oil every day. - -88 -00:48:21,900 --> 00:48:24,630 -Scott Tolinski: That really worked for me to magnesium. Yeah, - -89 -00:48:24,660 --> 00:48:26,700 -Wes Bos: yeah, I was a big fan of that. - -90 -00:48:26,850 --> 00:48:36,690 -Scott Tolinski: I have a question about this multivitamin before you Yeah, interrupt. Oh, is this the $78 480 tablets one that yikes? I mean, - -91 -00:48:37,320 --> 00:48:46,410 -Wes Bos: I paid 60 us okay for 72 tablets, so yeah, it's not not cheap. Okay, - -92 -00:48:46,530 --> 00:48:49,080 -Scott Tolinski: let me make sure that we're on the right one. That's a spicy meat. Yeah. - -93 -00:48:49,080 --> 00:49:22,020 -Wes Bos: 83 cents. Other vitamins? Yeah, yeah. 83 cents a day. That's fine. 60 cents American a day that's like adds up right like if your your vitamins is $50 a month that does that now shoot I didn't even look at that. No, I'm now I'm looking at it. I don't know. I think it's it's worth it for me at least just to to do it is there Yeah, I probably I think I ordered the smaller Count 72 but I think if I have reordered now I'll just get the much bigger one because cool. - -94 -00:49:22,020 --> 00:49:23,370 -Scott Tolinski: Okay, I just want to make sure - -95 -00:49:23,430 --> 00:49:50,160 -Wes Bos: yeah. What else? So after I said I was like having trouble getting good sleep. I'm on one of the podcasts a bunch of people reached out and said these work for me. So I tried Lion's Mane which is a mushroom powder. A bunch of people recommended that. Try that for a full month and nothing. Nothing didn't feel any different. So that was a waste of money. Yeah, I didn't either. I also tried a show a ganda. - -96 -00:49:50,430 --> 00:50:16,350 -Scott Tolinski: Yeah, I like that. Yeah, yeah, yeah, I'm on an SSRI, which is for my tailbone. Yeah. And that it's also like an anti depressed Since then, so what's funny is that it works really super well. ashwagandha when I take an ashwagandha it feels way different than it did when I took one look at a year ago before before I was on this for my my tailbone. Let me tell you, man, yeah, ashwagandha can really get me in the zone. - -97 -00:50:16,650 --> 00:50:31,020 -Wes Bos: Yeah, so I've only been doing it for about three weeks so far, and I haven't noticed anything, but I'm like, I'm gonna finish the bottle. Yeah, and see, see what we have. And then the other one that people recommend is she pronounces she'll - -98 -00:50:31,050 --> 00:50:33,270 -Scott Tolinski: shot? Yeah, no idea what that is. Yes. Um, - -99 -00:50:33,270 --> 00:50:38,700 -Wes Bos: it's a blackish brown powder. excluded from high mountain rocks. - -100 -00:50:38,790 --> 00:50:40,950 -Scott Tolinski: If it is excluded. I don't know if I'm taking it. - -101 -00:50:42,330 --> 00:50:47,430 -Wes Bos: I don't know. It's some black rock. Read it. I haven't excavated I haven't - -102 -00:50:49,680 --> 00:50:50,910 -Scott Tolinski: eaten Black Mountain rocks. - -103 -00:50:54,240 --> 00:51:26,970 -Wes Bos: Oh my god. That's amazing. Um, I don't I ordered it on Amazon. And it was expired when it came. So I have to send it back. So I haven't haven't haven't tried this one just yet. Plus, also, like, I don't know how much I trust buying something like this on Amazon. It seems like it already seems kind of hokey. Yeah, Amazon Wild Wild West. And like, I'm kind of scared that you would get like fake stuff on an Amazon so like, I think I need to find like a local health food store that actually knows the stuff that I can talk to them about it. - -104 -00:51:27,180 --> 00:52:17,970 -Scott Tolinski: Yeah, that's what I buy most of it at Whole Foods, or like a local place you know, at least it's it's at least like tested or quality with the place I go to because I in the past, I have experimented a lot with supplements. The place I always go to validate supplement ideas is examined calm, because what you can do is search for anything. And what they do is they tell you a little matrix here of the level of evidence, the outcome, the magnitude of effect consistency and results in some notes for each different thing that it says it's supposed to do, like is this thing supposed to reduce your blood pressure, it'll show you the level of evidence how much it reduces your blood pressure and if that study is actually legit, and then it'll give you information about the toxicology of it, and it's very assigned great. I absolutely love this website and I always check this for everything - -105 -00:52:18,359 --> 00:52:26,250 -Wes Bos: it's got a heat I just went for shield chat. Yeah, I don't know I just there's a huge page on it. It will I'm gonna read through this - -106 -00:52:26,280 --> 00:52:33,900 -Scott Tolinski: neat it looks like it has it has a verified magnitude increase in antioxidant enzyme profile so there There you go. I'm in - -107 -00:52:35,760 --> 00:52:46,560 -Wes Bos: so that's that's kind of where I'm at with with supplements and stuff I was taking the What did I call it last name blockchain amino acids? Yes. What is it actually called? - -108 -00:52:46,920 --> 00:52:53,910 -Scott Tolinski: Oh, bc I don't know. Yeah. Bc ca the Bz bit block? blockchain? That's - -109 -00:52:53,940 --> 00:53:14,640 -Wes Bos: Bitcoin. Yeah, branched chain amino acids, which apparently helps with muscle recovery. And you can get some with caffeine in it. So I did like that tasted like juice. It made you all jumped up. So I might get another scoop of that. Once I start doing the gym a little bit more heavy this this year. - -110 -00:53:14,760 --> 00:53:49,590 -Scott Tolinski: Yeah, we'll see when I when it when I'm like a little bit past where I'm at right now with my nerf stuff I was taking beta alanine was taking Oh, I'm sorry, I'm blanking on it. I was taking a few things that you would find in like a pre workout. Like there's all sorts of pre workouts that are loaded with caffeine. And I always just found a buy some of the ingredients and mixing myself. That way I could limit the amount of caffeine that I'm having in that sort of way. But yeah, I might I might be on more supplements later. But right now I'm just like hanging hanging with the basics. Alright, let's - -111 -00:53:49,590 --> 00:54:00,840 -Wes Bos: move into the last section, which is just looking forward. We sort of touched upon this, but like, what does the next year look like you've or what are your goals for going forward? Scott? - -112 -00:54:01,200 --> 00:57:48,360 -Scott Tolinski: Yeah. Goals going forward is just to increase like full body strength. Like I spent way too much of last year really doing upper body stuff. And he because of my tailbone. I was avoiding doing lower body stuff. I was avoiding squats and deadlifts. And now that I've like really gotten in the flow of of with the weight belt and perfecting my form and just feeling a little bit better here. My goal is like leg strength. So I'm going to hit my max deadlift ever was three, three sets of 300 for five. So I'm going to try to beat that this year and get up to 350. Just because, you know, it's nice to have a number of goals to look forward to. I really been into this glute ham developer, which if you don't know what that is, Google it. It's a really hard exercise. And I've been working on it now ever since I bought one on Black Friday. I've been working on it now for several weeks, and it was so hard for me and I'm just now feeling like I'm getting It so by the end of the year, I want to be like a glute ham. Master, I'm gonna have the strongest dang legs ever. So that's really like where I'm focusing this year is to get more full body. cardio needs to be a thing for me, I went to breaking practice a couple weeks ago, and I swear I thought I was going to die, my heart rate was 180. for about an hour, I was just like, not able to breathe. So I'd really like to be able to get back into that sort of shape in terms of cardio and not be panting like crazy. I've been stretching every day, I have a new app called streaks on iOS, which allows you to track a whole bunch of stuff. And you know, me I like tracking I'm now at, let's see how many days I'm now at a streak of 12 consecutive days of stretching every day. So stretching out a day is a big thing for me. Big Big fan of making sure I get some stretching time in I'm going to be trying to at least get to breaking practice. Once a week, I'm going to continue my lifting every day, I'm going to solely very get very focused fitness focus for me. I'm going to start going to yoga once a week, but I'm going to do so in like February once the New Year's crowds start to thin out a little bit here, I might do some yoga at home. In the meantime, I think all that stuff is just going to help my my body heal a little bit more. And like you can do sort of fake yoga, or even just like stretching, while you're watching TV. People are wondering like how you have time for this stuff. Man, I stretch while watching. Like, we will watch the Mandalorian or whatever, we're sitting down watching TV, you're relaxing, it's just as easy to sit on the floor and do like a little toe stretch or bend over or whatever, while you're watching TV, it's not hard, the gym remodel is going to make my life a lot better and get this last night, I put on my Apple Watch. And I did a little bit of like that activity tracking. And I don't know how accurate This is. But I had it measuring my heart rate and I played a game called super hot on my VR headset. And super hot is a it's like a matrix style game where time only moves when you move. And it's not like super violent. I mean, it's violent. But you're you're fighting these polygon people. It's not real people. But like it gives you a situation where you can punch a guy, catch his gun as it's in the air, shoot another guy. And you can do all this like you're in the matrix. And since I'm me and this VR headset I have as the Oculus quest, it's not tethered to anything. I'm me, I'm literally like, like army crawling on the ground in my living room and jumping behind barrels and rolling around, laying on my back. And doing like all this stuff. I burned 400 calories playing playing VR last night. So yeah, like just finding little ways to move around while I'm being entertained or whatever. - -113 -00:57:48,450 --> 00:57:51,210 -Wes Bos: That's like more than some people burn in the gym. - -114 -00:57:51,750 --> 00:58:13,530 -Scott Tolinski: I know a lot. If I watch out for it. I was like what the heck I was I was sweating. And I was doing all this work. And I'm sure Courtney was just like cracking up watching me doing this because I'm like, ducking behind barrels and whatever in this world, but just finding new ways to move and get moving when, you know, I would normally just sit down and eat an ice cream or something. So - -115 -00:58:13,950 --> 00:59:00,840 -Wes Bos: yeah. For me, I've said most of the things looking forward just basically focusing on being consistent with both food and gym. Because like it's, it doesn't have to be a huge part of my life. But just something that you you do it has to be part of your life. So that's kind of what I'm focusing on for this year. I'm excited to get kettlebells in the office, see how that works out? I'm sure I'll I'll update you all in like a month or two to see like where it's at, are they is it just a doorstop? Or I'm actually using them. I think that's that's about stretches is one thing there's, I know we want to do a podcast on stretches entirely. Because that's something I've always neglected. And I know you are super into stretching. So maybe we should do an entire podcast just a hasty treat on a couple stretches. Yeah, I - -116 -00:59:00,840 --> 01:00:14,670 -Scott Tolinski: have a whole bunch listed here. And since we're at the time we're at, let's just make it the very next tasty treat that we do, we can just move this stuff into there. Stretching with with Scott here and I can add a little bit more. Because I've often been known as the guy who sits on the floor and stretches in the office. Like I think my coworkers have often done like what the actual hell is this guy doing stretching on the floor in the office. And so you can do it, people will look at you funny, but you can do it. But we'll do a whole episode because let me tell you, as somebody who has all sorts of issues or whatever, through braking or through movement, or through the sheer fact that you sit down on a computer all day and work, there are stretches that can make your life significantly better, especially for web developers. We have these issues. I know I've been there sitting in a chair all day long and just come home and then sit on the couch. I mean, you're just sitting sitting sitting thing thing and I'm not talking about getting standing but there's just like little things that you can do to help your body feel better. It's gonna make your development way better as well. So that's really just it. we'll tackle this stretching stuff in another podcast. I'm super psyched for it. So let me know if you have any specific requests before this episode releases. - -117 -01:00:15,150 --> 01:02:21,780 -Wes Bos: All right, let's move on to some sick pics. The things that we pick that are sick. I've got a kind of a neat one today it's a refillable metal torch lighter. Let me explain. We light a lot of things around or I light the barbecue a couple times a week, we like candles all the time. That's actually the only thing I don't smoke cigars or anything like that. But we have all these hundreds of these like crappy little barbecue lighters that stopped working after a little bit of time or there's little Bic lighters around. And I was actually amazed at like how many we just throw out because they don't have a refill spot on them or you're not set up for it properly. So I went out and I got this. It's all metal. It's like a super high jet flame torch lighter. And basically you didn't have jet flames painted on it because that'd be a not yet. Maybe I should just basically it looks like a pen. And it has like a little clicker on it and you click it on and it just goes Oh, like just throws a flame out and lights a candle on a second. If it's windy or anything, when I'm trying to light my barbecue that's never an issue and you fill it refill it with butane so good for the environment, you're not throwing out all these plastic lighters like I probably threw out like six or seven of these like dollar store barbecue lighters. And it's kind of wasteful. So we it's like 20 bucks, you can get this nice one you have to buy it can it butane as well and you can refill it and it's funny because like I bought my mom something like this like 10 years ago to light their fireplace and their candles with and they still have it and they use it probably a couple times a week and the Zippo makes one as well. I thought it was so cool. So I finally got it. I'm kicking myself for not getting something like this earlier. Because it's just both a really good product and I think it's good for the environment. You're not throwing more plastic away. Yeah, check it out. I'm sorry. The one I got is called the tech boss cigar. I guess it's for cigars, cigar lighter, but I'm not using it for that. - -118 -01:02:22,620 --> 01:04:30,300 -Scott Tolinski: That's fun. That's way fun. I'm gonna keep it fitness related. Here I have a few few YouTube channels, stuff that I really like here. So one of which is going to be fitness blender, they have a YouTube channel or you can go to fitness blender.com. And there's just about a gazillion. gazillion is the technical term is just about a gazillion videos on different workouts. And you can give your level if you're a beginner, intermediate, advanced, whatever. And it's so dang good, the amount of stuff they give you for free. So if you're looking for just any sort of like, Oh, I want to just get moving any sort of whatever fitness blender is the way to do it. Another one I have here is Bob and Brad. It's a YouTube channel with 1.5 or 1.5 8 million subscribers. I was really surprised to find this channel the other day because I never heard of this. And it's all physical therapy stuff. It's so good, especially for me I have a lot of issues. So this is like 60 seconds to get rid of knots in your shoulders. How to crack your own back without a chiropractor but the one I was like looking for was about sciatica, like nerve pain, different different stretches. I've like learned so many stretches from this if you're looking if you have a specific ailment. this YouTube channel is two physical therapists who are really smart and they're super funny. They're like super dorky, like very dorky personalities in the best possible way. But they are just absolutely absolutely really great resource if you have any sort of pain. Next one is a weightlifting channel. I follow Jeremy Ethier ether I don't really know I don't think he says his name ever. But he does a lot of like very targeted videos that are like science based. Again, this is a big channel 1.8 million subscribers. So he does stuff like the scientific way to grow your shoulders the best for back exercises, you could do stuff like that I absolutely really love this channel. And I find between these three channels, you get your cardio, you get your weightlifting and then you get your pain management and physical therapy stuff. So this is three YouTube channels that I think you should check out if you are interested in fitness stuff. - -119 -01:04:30,720 --> 01:04:38,340 -Wes Bos: All right, is it thank you for tuning in and we will catch you on Monday. Please - -120 -01:04:40,170 --> 01:04:49,920 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax215.srt b/transcripts/Syntax215.srt deleted file mode 100644 index b6b872c96..000000000 --- a/transcripts/Syntax215.srt +++ /dev/null @@ -1,228 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah Kuda, bars and Scott Taylor. Totally in ski. - -2 -00:00:25,950 --> 00:00:26,790 -Unknown: Oh, welcome - -3 -00:00:26,790 --> 00:01:01,979 -Scott Tolinski: to syntax on this Monday. Hey, Steve turret, we're going to be talking about this neat little site that Wes Bos, my awesome co host put together. This is on it uses dot tech. So check it out. If you haven't been there uses a dot tech, we're going to be doing the entire episode talking about the stack that Wes used to make this neat little site. And what this site does is it shows you what different members in the tech community are using. My name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me, as always is Wes Bos. - -4 -00:01:02,010 --> 00:01:02,940 -Wes Bos: Hey everybody, - -5 -00:01:02,970 --> 00:01:04,200 -Scott Tolinski: how's it gone? - -6 -00:01:04,310 --> 00:01:08,340 -Wes Bos: Good. I'm excited to talk about this uses website. - -7 -00:01:08,550 --> 00:03:05,100 -Scott Tolinski: Yeah, use is. And if you have a site like uses that you want to make sure people get to and actually are able to access, you'll want to make sure that you have some sort of error and Exception Handling tracking on your application. For that we use Sentry over@Sentry.io. Over here, syntax we absolutely love Sentry Sentry is the singular place where you can keep all of your bugs, errors and exceptions for any type of project that you're using. You can categorize them, catalogue them and attach them to releases, as well as users and a whole bunch of other information. I absolutely love doing that. One of my favorite features about Sentry specifically is that you can tag an issue as being completed and then you can be alerted if there is some sort of an issue that pops up. That's the exact same issue letting you know that there's a regression in your application and that thing that you thought you fixed Well, maybe it didn't fix it, and you need to take another look. So one of my favorite features about Sentry is that, but you know me, I never have any regression. So you know, I have never, ever used that feature, even though it's so good. So let's get into this site. If you have not been there, head over to uses a dot tech, it's again, just a neat little site that Wes put together, the first thing you want to do when you hit uses dad tech is just you know, find Scotland's key on there and just buy everything that I have. So I can give you that Amazon referral cash. But now let's let's talk a little bit about this application West. We know that you had put together this we as the you know the collective internet know that you put together a repo for stuff that people have used for a long time you just sort of had this people could just add their own, you know, I added my own. No, I assume that was the you know, the Genesis the initial idea point for this and you thought maybe it'd be cooler to be able to search and stuff through this or or is there something else? - -8 -00:03:05,520 --> 00:05:40,770 -Wes Bos: Yeah, well, look, I've had like a, so like, what uses is you go to your any domain name, Wes Bos calm forward slash uses, and it will display a list of things that you use. And I initially just made it because people always ask me like, what font is that? What theme is that? What monitors that? And I was like, I don't remember any of these, these numbers. So let me just direct you to a page that has everything on it. And then I don't know, a whole bunch of other people started to use the same URL, and it became sort of a thing. So I made a repo called awesome uses that had a list of all of these different pages. And then that list got to be like, I don't know, almost 8090 people. And it was just like, not useful. Because like, Who's gonna sit there and click 100 hundred different links. So I thought like, wouldn't it be cool to be able to just collect all this information and put it on a website. So a couple people had had already taken that data and put them into different types of website, a bunch of people had the idea of people say like, I've got a bunch of domain names I could give you, I already bought them, but never never went through on it. But I actually went to one of our sponsors. And I said, Hey, uses tech was a premium tech was one of our sponsors that it's a premium one. I was like, as part of our upcoming sponsorship package, will you give me this domain name for free? And they said yes. So I got uses that tech domain name from them, which was pretty cool. So the whole idea was just to create a data file. And in our case, it's just a JavaScript array with every single person is an object. And inside of that it contains a couple pieces of information, their name, obviously the link to their users page, a couple tags, whether they use an iPhone or Android, whether they're on Windows Mac or PC, or Windows Mac or Linux, and which country which country they're from as well as their their Twitter handle. So just some light, light data on that and then We're able to filter people based on the different tags. They're on which country they're from, and whether they are Mac, Windows, Linux, iPhone or Android. And then I thought, like, How hard can this be just like, get an array of data loop over it, throw some HTML on the page and call it a day. And I thought this would be like a four hour, quick little project. And I'm not doing four full days on this thing. So my idea with this, the show is just the detail the the stack behind it, and my thoughts behind picking the different things. So first of all, the site is built on Gatsby is a pre rendered site. What do you call Gatsby sites these days? - -9 -00:05:41,100 --> 00:05:43,260 -Unknown: static, fast. - -10 -00:05:43,530 --> 00:05:50,100 -Wes Bos: It is a blazingly fast Gatsby website. And the way that it works, it is very fast, though. - -11 -00:05:50,100 --> 00:05:52,980 -Scott Tolinski: I joke about that, but it's super fast. - -12 -00:05:53,190 --> 00:08:26,190 -Wes Bos: Yeah, it's it's surprisingly, alright. It's not surprisingly, because there's Yeah, there's not a lot on it. It's mostly just tech text. And it's pre rendered text, right. So it doesn't have to go out and fetch that data. It's already rendered when the user hits the page. So when all of the data lives in data dot j, s, and I did that, because I didn't want to have to, like make some sort of like database where people could log in and update their thing. It's just a file on GitHub. And people can pull request that if they want to change their data, or remove themselves, or add themselves, and then what's the repo for that, by the way, it's on github.com Ford slash Wes Bos, Ford slash awesome. Dash uses cool. And I really like this because like, it's a simple website, but it has a lot of different parts to it. And it's a great way to learn Gatsby pulling in data templating. There's some GitHub actions in there, which is the first time I've used those, which is pretty cool filtering, react, contact. It's got everything you want, when simple, right? Like you can look at the hopefully this will be a reference for how do you do these things, and probably a larger project. So Gatsby node is a file that runs during the build, and that will populate your data in the Gatsby graph. qL API. So what happens is that it obviously pulls in all of the people and loops over each person. And then you register that piece of data as a node in Gatsby. And then that's available via the graph qL API. And then I also do some light. Data aggregation is called stats dot j s that will tell me how many people are under the tag developer and how many people are from Canada, which as of time of recording, there are seven Canadians on this website 41 Americans, only one from Japan, sadly. So that's what the Gatsby node does, it pulls it in. And then I use, I go ahead and use Gatsby use static query, which currently, I could get away with you static because there was no filtering or anything like that, I just want to pull them all, I always want to pull them all the query is always the exact same, you have to use the other type of Gatsby query if you want to do it at a page level. And you want to filter although episode we're recording after this, we'll talk about some updates to that. What's next avatars was kind of a fun thing. So I didn't want to have to have people upload a file or I didn't want to have people to put in their email address. So we could use gravatar. So I just use the clear bit API ever - -13 -00:08:26,190 --> 00:08:31,710 -Scott Tolinski: use a Scott, I have not I've only used gravatar. For this kind of thing. Clear bit - -14 -00:08:32,150 --> 00:08:50,250 -Wes Bos: clear bit is this. I don't I think they're a data mining company. Basically, they've, they have information on everybody. And you can you give someone's email, they'll give you their name. And it's kind of a bit of a bummer. But they obviously have lots of information about everybody. And one of the things they have is - -15 -00:08:50,540 --> 00:08:54,990 -Scott Tolinski: a logo API. They also have information on stripes design system. - -16 -00:08:56,580 --> 00:09:23,880 -Wes Bos: Whoa. So you can you can enter in a domain name like Airbnb, or Wes Bos calm and it will return to you a picture, either a logo or an avatar for that person. And that that worked for about 90 95% of the use cases. And people who didn't have an avatar just have to put an Open Graph meta tag on their page. Now there's a pull request in for this new service called an avatar who ever heard of this? - -17 -00:09:24,600 --> 00:09:28,980 -Scott Tolinski: I have not heard of this. You were trying to do their late night show host here. - -18 -00:09:30,240 --> 00:10:01,520 -Wes Bos: Get this. So an avatar is a free service. It's hosted on now to sh and you can pull someone's avatar based on just a username doesn't matter where you use your email or from a domain name, or specifically from GitHub, gravatar Instagram, Twitter, it's so cool. So like it covers everything for your it'll try to do it from here and if not, it'll try to get it from there. And I think this is really cool for ever and ever, - -19 -00:10:01,550 --> 00:10:04,650 -Scott Tolinski: it was like gravatar is the option like That's it? Yeah, - -20 -00:10:04,650 --> 00:11:37,920 -Wes Bos: or just uses gravatar under the hood. And if someone doesn't have a gravatar, maybe it'll try their Twitter account. And if someone doesn't have a Twitter account, it'll try. It'll actually uses clearbit underneath the hood. And it's open source, so you can host your own, which is cool. So I'm, we're gonna move to this, which is, which is cool. The one thing it doesn't do is it doesn't resize images for you. So there's another service called web serve.nl. That will resize it on the fly. I'm not sure I would trust this with any sensitive information. But for the purposes of resizing avatar seems to work just fine. Yeah, yeah, what else we are filtering. So obviously, you can click on one of the tags, and it will filter list, the way that that works is you click on the tag, and it will set the current tag or the current country or the current device. And then it will just take the array of people and filter it down with a radar filter. Yeah. And then it will just that will trigger a rerender in react and it will render on the page. So that's that's pretty simple. The kind of interesting thing about that is, if you click on like the the tag CSS, it will highlight that in the profile for each person that you're currently filtering for CSS. And that had to use react contacts, because information about what is the current tag exists in two totally unrelated sibling components. So what do you do there? You had to put it in context. And I had never used context in Gatsby before, which is pretty cool. It wasn't any different was that I - -21 -00:11:37,920 --> 00:11:41,820 -Scott Tolinski: mean, you just had to wrap the page essentially, or - -22 -00:11:41,850 --> 00:12:00,990 -Wes Bos: that that was a Yeah, that was the part that I probably could have got away with just wrapping my layout, since it's only a single page website. But sure, the proper way to do it is to put it in Gatsby browser. And then I also needed to put it into Gatsby SSR. So that it would render context on the server. Yeah, - -23 -00:12:01,020 --> 00:12:06,570 -Scott Tolinski: that's how we do it in in my course. Oh, yeah. Gatsby course. Yeah. Yeah, good stuff. - -24 -00:12:06,689 --> 00:12:20,370 -Wes Bos: One kind of cool thing about that is I use the ES modules, import and export immediately. You ever done that? That's the first time I've ever had to do that. Immediately. Yeah. So you've let me let me find the code for it real quick. No, - -25 -00:12:20,370 --> 00:12:23,340 -Scott Tolinski: I haven't done that. Oh, no, on here today. - -26 -00:12:23,490 --> 00:13:48,420 -Wes Bos: I know, there's just like, it's such a silly little website. But I learned, I learned a lot of like little things, just building this thing. So the syntax export wrap root element from Gatsby browser, what that does is because I needed to wrap this context, both in Gatsby browser and in Gatsby SSR. I didn't want to duplicate that code. So the solution to that is you import it from the one module and then you just export it from the the server side render. And there's that there's a syntax in JavaScript that will allow you to export and import something in in one go, which I thought was pretty nifty. I use this cool package called country emoji. So one of the things that is required is, you have to put your country in as an emoji, not as like a country code or something like that. But then when you hover over top of the flag, I wanted to show you as a tooltip. What country that is, right? And I found out there's no way to get a description of an emoji or have a Unicode character Hmm. in JavaScript. So I use this cool little package called country emoji, where you can give it a string of a country, a country code or an emoji, and it will return to you the name or the emoji or the country code, depending on what you want. So super handy little, little package there. - -27 -00:13:48,510 --> 00:14:13,890 -Scott Tolinski: Yeah, by the way, I should say, I'm not seeing where you had posted the syntax for the immediately export. Yeah, I have used this I use this in my, like, my index.js files that I use when I internal modules where you export asterisk from whatever, immediately, I thought you were talking about, there's some sort of immediately keyword, oh, never heard of it my entire life. I was like, Oh, really? Hmm. - -28 -00:14:14,250 --> 00:14:25,560 -Wes Bos: That makes sense that you if you've got like a folder full of things, and then you want your index of that folder to be importable, then you can just import everything into your index and immediately export. Is that what you're doing? - -29 -00:14:25,709 --> 00:14:38,400 -Scott Tolinski: Yeah. So essentially, if you want to say let me grab every single named export from a file and just have that be included in the index. Yeah, syntax is basically export asterisk from the file. Yeah. - -30 -00:14:38,730 --> 00:14:46,050 -Wes Bos: Oh, so anytime you add an export to one of those files, you don't have to open up the index JS again, - -31 -00:14:46,230 --> 00:14:51,450 -Scott Tolinski: correct. Yeah, the only modify the index is when you add a new file to be included into that. - -32 -00:14:51,720 --> 00:14:54,660 -Wes Bos: That is super handy. I had not thought - -33 -00:14:54,660 --> 00:15:05,700 -Scott Tolinski: about that before. I use that for all of my like elements for sub components. I use that in my hooks folder, I use that in my Utilities folder, my global state folder uses a lot. - -34 -00:15:06,000 --> 00:15:10,110 -Wes Bos: And that way having an index, you can just import it from the folder, right? - -35 -00:15:10,140 --> 00:15:27,090 -Scott Tolinski: Yeah. And get this with Babel, aliases or even TypeScript aliases. Yeah, you can now just say import grid from elements. And it's almost as if elements is a package, even though it's just a index on a directory. It's very fancy. - -36 -00:15:27,330 --> 00:17:16,820 -Wes Bos: Oh, yeah. We should say that. That is not part of es ACMA script that's part of web pack or parcel or something like that. Or a meteor? Yeah, yeah, it would be really cool. If that was like part of the official spec. The official spec doesn't even it doesn't even support leaving the.js. file. Yeah, no, it's all it's all Babel. Babel. Taking care of a node look up. my homie Babel. GitHub actions. One thing I used here. Actually, I just sorry, I didn't code any of these. I let me give a shout out to the user who actually did it is I am Andrew Luca helped out huge on this. Because I had just like put a little issue in there to let myself know, I'd like to dive into GitHub actions at some point and figure out one, when people submit a pull request. They were submitting like incomplete data, like nobody read the instructions. So they were like, instead of doing a country emoji, they were writing the name of their country, or instead of just you're only allowed to put iPhone or Android. And then like, people were typing like, iPhone, but sometimes I switched to Android, and it was pretty good. I put a D skin on it. And like no, this. No. So we we introduced these, like data validation, essentially. So when you have a pull request, it will block the pull request or it'll fail it if you do not meet any of the the things that we want. So we said okay, your country flag must be one of these countries, right? And your your device must either say iPhone or Android, I can't say Apple iPhone or and then it will fail. And I use this package called joy j Oh II. He ever used this, Scott? Um, no, I haven't. - -37 -00:17:16,820 --> 00:17:18,960 -Scott Tolinski: There's too many Gosh, darn packages. Yeah. What - -38 -00:17:18,960 --> 00:17:48,390 -Wes Bos: am I gonna do with all these packages? I had never heard of this before. So it's a schema description language. So essentially, we just took the person object. And I described similar to how you would write like a type in TypeScript. But you describe sort of the validation steps for every single one. And you needed to make sure that their URL had the word use or uses or orkut, we allowed GitHub just as well, in it, we needed to make sure that - -39 -00:17:49,530 --> 00:17:59,600 -Scott Tolinski: there's a couple basically, it just validated all the data that the person pull requested. This is a made for happy, right? Yeah. Joy happy. Okay. Don't say it's the only one I can find. - -40 -00:18:00,030 --> 00:18:36,300 -Wes Bos: Which is like an express alternative. Yeah. But it stands alone. So you can use it for you can use it with anything. The joy stands alone. Yeah, uh, they're also Hugo, Hugo de F on GitHub submitted a pull request to check if people actually had a page. Look, we had like 40 people submit their URL, that they didn't even have a Users page. They just added them. There like Pharrell foreing. So he wrote a script that would ping all the URLs, and then block it if if it was down and then take them take them out, right? Oh, - -41 -00:18:36,350 --> 00:18:38,600 -Scott Tolinski: geez, man, people are resourceful. - -42 -00:18:38,840 --> 00:19:24,110 -Wes Bos: I know. It's like, you think it's simple. You just get an array of people loop over it. And then there's all this, like, extra steps that have stuff that needed to be added to it? Yeah, so that was the the one GitHub action and the other GitHub action was. So this started as just a awesome list. It was just a readme with a list of people. And I wanted to maintain that list. So this new GitHub action will auto generate the readme list, every single pull request, so you don't have to manually add yourself to the readme if you want to be part of the list. Yeah, like in it. The go on this repoed and look at the code. I mean, yeah, right. Yeah. Yeah, it's, it's really simple. You can use Git, as well as no j s in it. That's pretty cool. - -43 -00:19:24,480 --> 00:19:28,890 -Scott Tolinski: So uh, one thing that I really enjoyed here was your animated favicon. - -44 -00:19:29,330 --> 00:20:23,970 -Wes Bos: Yes. So if you go to the thing, the fav icon just says forward slash uses emoji poop. And it just like every 500 milliseconds, it changes the current letter. And that I thought would be just a funny joke. Because it would be simple. It'd be fun to do and ended up taking me like four hours because the way that it works is that every 500 milliseconds, I write a letter to a canvas and then export the canvas to a base 64 image and then dump that into the head of the The document. And that turns out doing set interval, as well as having like a like a side effect. a side effect is I'm literally updating the the head of the document, right? Yeah, yeah. Turns out doing that in react hooks. Why? It's not hard, but I had never done it before. And Dan Abramov has this huge post, explaining how to do intervals when Yeah, - -45 -00:20:23,970 --> 00:20:26,570 -Scott Tolinski: is a really good post. Definitely, we - -46 -00:20:26,570 --> 00:22:08,400 -Wes Bos: should like so I read that whole thing. And I learned a lot about about that as well. I learned that you can write emojis to a canvas and then export them. Which is pretty cool. The whole thing is done in installed components, which is good. Actually, I initially just wrote it in a CSS file. And then somebody else pull requests and moving it over because it was one of my like, to do things. I'm using the ESM package we talked about for doing because the sort of a bummer about Gatsby is that the Gatsby node and the Gatsby SSR has to be done in require common j s syntax. And then the Gatsby browser stuff has to be done in an ESM syntax. And then that doesn't allow you to share right wrapped components between your browser and your server side rendered one which sucks. So I just use Gatsby ESM sorry, not Gatsby, it just ESM package. And then I'm totally using ES modules all across the board, where there's a pull request in for a golia search, I don't know people are are like we should add voting and search. And some someone's like, we should standardize it into like a like a JSON where like everyone can can like structure their data. And then you can search based on like, what monitor people have and like I'm like, Okay, this was supposed to be me looping over an array. Yeah. So I don't know people want to take it a little further. I'll I'm sort of stepping back and letting some people work on some some fun stuff, and whatnot. So maybe we'll have search on it. And then finally, it's hosted on Netlify. So this is kind of like the NASCAR. We're using all our sponsors. - -47 -00:22:08,400 --> 00:22:09,750 -Unknown: Well, I - -48 -00:22:09,750 --> 00:22:26,520 -Scott Tolinski: think that just goes to show you that like, you know, the people that we have, as sponsors on the show, are there because we use and enjoy their Yeah, their material. And and given the total freedom to pick a stack, you still picked our sponsors, you know that that says? - -49 -00:22:27,870 --> 00:22:49,680 -Wes Bos: Yeah, that's a really good point. So it's all hooked up. Every time there's a pull request, it will run the GitHub actions, it'll populate the readme, it'll deploy to Netlify. I'm using Netlify analytics on here, which is a paid feature. But there's no like Google Analytics on here. But I can see right now, there's been 20,000, unique visitors. 30,000 pageviews. - -50 -00:22:49,830 --> 00:23:12,960 -Scott Tolinski: I'm really keen on dumping Google Anik analytics entirely. Yeah, I feel like I do. It just just creates extra that I don't really need and how like, I don't really look at Google Analytics that much. I don't look at it for you know what, it's, I don't know that the extra requests, even though they're at that? No, I don't know. I just don't use it enough to have it. - -51 -00:23:12,990 --> 00:23:54,030 -Wes Bos: Yeah. Like the actual features. I only use, like, Who were the people coming from maybe countries. It doesn't look like you can get countries or browser info on Netlify analytics. It just gives you the probably the most of the stuff that you want is how many people are visiting how many unique people where are they coming from? and other sources? Yeah, yeah. Yeah. It's pretty neat. So that is the uses dot tech uses. I should make a website detailing everything I said in this, this podcast, but I don't know. It's kind of interesting. If you want to check it out. learn a few things from it or not. It's at github.com Ford slash Wes Bos for slash awesome dash uses. - -52 -00:23:54,030 --> 00:23:55,620 -Scott Tolinski: Do it. Yeah. Really great. - -53 -00:23:56,010 --> 00:23:58,410 -Wes Bos: Cool. All right. Anything else to add? there? You done? - -54 -00:23:59,130 --> 00:24:03,780 -Scott Tolinski: I'm done. I'm done with the episode about your project. - -55 -00:24:04,350 --> 00:24:10,290 -Wes Bos: Done. Beautiful. All right. Thanks for tuning in. We'll catch you on Wednesday. Please - -56 -00:24:12,210 --> 00:24:13,020 -Announcer: head on over to syntax.fm - -57 -00:24:13,020 --> 00:24:21,990 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax216.srt b/transcripts/Syntax216.srt deleted file mode 100644 index 4862d5233..000000000 --- a/transcripts/Syntax216.srt +++ /dev/null @@ -1,608 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,820 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:06,120 -development treats out there, - -4 -00:00:06,149 --> 00:00:09,000 -strap yourself in and get ready to live ski - -5 -00:00:09,000 --> 00:00:10,530 -and Wes Bos. - -6 -00:00:10,589 --> 00:00:11,190 -Welcome to - -7 -00:00:11,190 --> 00:00:32,930 -Wes Bos: syntaxes the podcast with the tastiest web development treats in the entire world. We've got a banger have an episode for you. Today we're going to talk about tech to watch in 2020. So these are things maybe you want to try out some new stuff, maybe you want to get a leg ahead instead of saying you want to get a leg ahead in in whatever tech we have, - -8 -00:00:33,059 --> 00:00:41,700 -Scott Tolinski: like moving there's like isn't done. They can't call like part of the race a leg of the race. I don't I'm not a racer. But if I was I might not a racer. - -9 -00:00:43,530 --> 00:01:05,730 -Wes Bos: Anyways, if you want to, you want to get ahead. This is the episode for you. We're gonna be talking about like things that we think you should keep an eye on. Or if there's something where you're like, Hi, I want to like focus in on something to maybe for my career pick like one or two of these things over the next year and get really good at it. With me, as always is Mr. Scott to linsky How you doing today Scott? - -10 -00:01:05,730 --> 00:02:01,230 -Scott Tolinski: Doing good doing real good. I think the kids are sleeping a little bit better. That's helping us a little bit. They're not sleeping a ton better, but they're sleeping a little bit better. We are potty training Landon and i don't i don't know what your experiences were there but like waking up in the middle of the night because he has to go has been a little bit you know tough because you're so used to him sleeping like way up at like four in the morning and BMS monitor like dad, I have to go to the potty and bit. Okay. Oh, go downstairs and get Yeah. And the other night I got them. I put them on the potty and we're on just like waiting for him. And he's like unfocused, right? He often gets unfocused, and he was just like, it doesn't work. And I was like, Oh, no, what are you what are you referring to? But he's like, it doesn't work. Dad. I was like, what doesn't work? He's like, the fireplace. Our fireplace doesn't work. Grandma and Grandpa's fireplace works. - -11 -00:02:01,310 --> 00:02:03,270 -Unknown: So we're just you pull that from and - -12 -00:02:03,270 --> 00:02:04,260 -like is like, - -13 -00:02:05,189 --> 00:02:12,530 -Scott Tolinski: why did you were you even thinking about the fireplaces? Right? Like, it was just absolutely hilarious. And that's sort of what we're dealing with. But - -14 -00:02:12,990 --> 00:02:20,660 -Wes Bos: oh, that's hilarious. No potty training was was relatively apparently it's much harder for boys and girls. I've heard from my friends. Yeah, - -15 -00:02:20,669 --> 00:03:40,979 -Scott Tolinski: that's all we've heard too. Yeah, he's been he's been good about it. But yeah, the middle of the night stuff has been tough to get used to. But it's it's cooled off a little bit. So I'm I'm I'm feeling back at it feel ready to go here. We just launched a new feature on level up, which is like course pathways, where you can like, Oh, yeah, from one course to the other. And I wrote this neat little SVG thing that like calculated the center of each of my course cards and draws a path between them dynamically. And so I'm pretty psyched about that it was in this little fun little SVG project, for me, wait, are all the cards in SVG, or just the just the path, the cards are all divs. And well, there, there are labels. And then so I get the left corner of the div, I get the Yeah, or I get the left position of the div the top position of the div, then I know the width and height of it, because I'm using what's it called with that API, you can get that information, I'm getting the box information. Either way, I'm using react measure to do it. And I'm getting the height and width of the card I'm getting it's top and left. And therefore I'm able to calculate the center of it. And if I get all this, just draw a line between the centers. But then if they're at a different position, you want it to be all right angles. So then you have to calculate a halfway position between each one. And then angle, bend the angle, it's a lot of fun. - -16 -00:03:41,400 --> 00:03:54,600 -Wes Bos: I always look at that where like, like my drip my email marketing has, has like cards. And then like, it's like, the person goes through this. And there's like always these like little squiggly lines between them. And I always think like, hmm, it'd be neat to learn how to do that at - -17 -00:03:54,600 --> 00:04:15,690 -Scott Tolinski: some point. That's cool. And I did it with react hooks. And theoretically, all I'm doing is passing in an array of dimensions, aka, like, the dimensions where the the centers are, theoretically, you could just pass in an array of dimensions, and I could give that hook to the world. And anybody could draw a path with a few more options built into it or something. - -18 -00:04:16,319 --> 00:04:52,050 -Wes Bos: That's cool. I, when I was doing the face detection stuff, it gives you where the person's eyes are. If you tilt your head, it will tell you that one high, one is higher than the other. And then it I was like, okay, but it doesn't tell you the tilt of the head. It just tells you where the eyes are. And then I wrote some trigonometry. Yeah, like cool way back. Yeah, to figure out how to figure out the tilt given like a squared b squared, and then figure out c square either. I don't even remember how I did it. But I remember feeling pretty proud of myself figuring out how to how the head is tilted based on the eyes. - -19 -00:04:52,050 --> 00:04:54,660 -Scott Tolinski: Yeah, going back, way back. - -20 -00:04:54,720 --> 00:05:04,500 -Wes Bos: All right. Well, today we are sponsored by Sanity, which is a structured content CMS Log Rocket. What's the tagline there? Scott - -21 -00:05:04,500 --> 00:05:06,200 -Unknown: see the magic. - -22 -00:05:06,240 --> 00:05:26,580 -Wes Bos: See if that's not see the magic. Log Rocket law lets you replay what users do on your website and helps you fix bugs faster. We'll talk about them partway through the episode. So we're going to start off with tech. And we'll start off with CSS, a couple things here, and then some JavaScript and related things. You want to kick it off there, Scott, - -23 -00:05:26,580 --> 00:05:48,150 -Scott Tolinski: I do. But before we're going to do one more bid on that Log Rocket thing, because see the magic if you're like, looking at bugs, and not like working code, like maybe see the magics better for like Cypress because your apps working, but if it's bugs, maybe it's see the tragic, and then you're like watching the bugs unfold. Okay, sorry. Just a little aside there. - -24 -00:05:48,300 --> 00:05:48,840 -Wes Bos: There you go. - -25 -00:05:48,870 --> 00:05:49,500 -Unknown: Oh, wait, - -26 -00:05:49,500 --> 00:05:55,500 -Wes Bos: I have to say one thing. A joke. I had a joke about certain news station. We - -27 -00:05:55,500 --> 00:05:59,370 -Scott Tolinski: need a joke. Oh, yes. Yeah. Okay. Go for it. - -28 -00:05:59,940 --> 00:06:18,810 -Wes Bos: It's not a joke. I had a joke about a certain news station a couple episodes ago. And it was not clear that it was a joke to most of you. And I got some very angry emails about it. So first of all, I'm Canadian. And second of all, it was a joke. I'm apologize for everyone that got riled up about that. Yeah. - -29 -00:06:19,080 --> 00:06:31,230 -Scott Tolinski: Yeah. Well, you, you, you might have heard me go or something when you said it. But I don't know if I realized it was a joke, even myself. So can you just, you know, work on that donation a little bit. Their - -30 -00:06:31,500 --> 00:06:36,000 -Wes Bos: story of my life is just having jokes. And sometimes people don't realize that it's a joke. - -31 -00:06:37,290 --> 00:06:57,960 -Scott Tolinski: Yeah. All right. So let's get into this first one, which is going to be CSS subgrade, which we recently talked about arriving in some of the later versions of Firefox, and now I'm not quite positive what exactly that version is. But if you have Firefox, is it in? Is it in Firefox? Two main main main right now? West? You know, - -32 -00:06:58,320 --> 00:07:09,030 -Wes Bos: it is in Firefox 71, which was released on December two. So it's been about a month, month and a half in Firefox already. And I use it the other day is awesome. - -33 -00:07:09,059 --> 00:07:37,500 -Scott Tolinski: Yeah, we I was gonna make a joke that I was going to be arriving sometime this year. Because that didn't work out. So well. And he said that last time. But yes, subgrade is one of those things that it's going to allow you to really solve some of these neat little issues that we've had forever and ever in CSS. Again, we we have whole episode on subgrade. So many of these things. We're going to be saying, hey, if you want the full on scoop, refer to that episode. What episode was that number? Let me pull that up here. - -34 -00:07:38,040 --> 00:07:42,450 -Wes Bos: 109. CSS Grid level two, aka sub grid. Yeah, - -35 -00:07:42,450 --> 00:07:44,220 -Scott Tolinski: yeah, check that episode out - -36 -00:07:44,340 --> 00:07:48,900 -Wes Bos: was January 14. Yeah, we got exactly one year ago as of recording today. - -37 -00:07:48,900 --> 00:08:09,660 -Scott Tolinski: That's crazy. So yes, that is a subgrade. Again, it allows you to have a, essentially a grid within your grid, the best way to understand it is really visual. So you'll want to go ahead and check out that episode. We have a lot of links and a lot of ways to further understand what's going on there. - -38 -00:08:10,110 --> 00:08:44,850 -Wes Bos: Next one we have here is CSS Houdini, or it's called the CSS paint API. And it will allow you to make your own CSS properties by giving you a sort of a lower level worklet. Or you can like if somebody says like, oh, display, Scott, and then any, any div that's display, Scott will just have glasses on it. Yep. Right. Like you could probably do that with CSS Houdini. And it's it's been around for a while, but still being worked on. I'm just looking at browser support right now. Nothing in Firefox, no - -39 -00:08:44,850 --> 00:08:47,399 -Scott Tolinski: iOS, Safari, no opera, mobile, - -40 -00:08:48,049 --> 00:08:49,200 -no Safari, - -41 -00:08:49,649 --> 00:09:02,820 -Wes Bos: it's pretty much just, oh, it it's behind a flag in Safari in Chrome. And I guess we're just waiting for Firefox at that point. Because there's no more browsers How sad is or how happy is that, that there's - -42 -00:09:02,820 --> 00:09:12,870 -Scott Tolinski: no more browsers and those of you who rely on IE, I am so very sorry for you. It is the year 2020. Hopefully, we can move past this as a society. - -43 -00:09:14,029 --> 00:09:34,470 -Wes Bos: Yeah, so iE 11 was released October 16 2013. Yeah, almost seven years ago. I bet. That's probably one thing to look forward to in 2020. If you haven't already dropped it, I bet a large portion of people are going to drop that. And at the same time, people are upgrading to edge, which now runs chrome under the hood. - -44 -00:09:34,500 --> 00:10:37,020 -Scott Tolinski: Yeah. And if you look at our notes, the very next thing is about dropping IE overall. But I think so yeah, the Houdini, I'm really looking forward to Houdini because right now, even with all sorts of things, right? People are sharing code. They're sharing this and that we're able to take advantage of doing some really cool stuff, but I think CSS hasn't really had its moment in that way. The way that we've had to do CSS for a long time you bring in a library, the libraries, a bunch of stuff, obfuscated, and it's a pain in the butt to change any of it. And that CSS Houdini is going to give us like power tools, essentially, we're going to be able to do all sorts of cool stuff that we've never been able to do by sharing CSS functionality in really interesting ways. And so I'm personally very, very excited for Houdini, I think it's probably going to be one of the largest changes into how we write CSS once it's supported, obviously, which is going to be some time, but I'm very excited to see what's going on there. But yeah, look, yeah, - -45 -00:10:37,549 --> 00:11:02,070 -Wes Bos: we should do an episode on it. And we've been saying this for a while, but like, maybe we both need to make something in Houdini. And I'm really curious to see how it's gonna roll out. Because, like, I imagine, this is going to be like libraries that people like, that's what it's not gonna be easy to write these things. But like Google will probably roll out like a library. And then you and me can just go ahead and use that and it will, knowing it uses a Houdini under the hood. - -46 -00:11:02,100 --> 00:11:15,149 -Scott Tolinski: That's what I'm saying. Yeah, I'm excited about that. I think there will be give us a lot of opportunity to share some really powerful code. Like you said, display, Scott, it gives it glasses, it puts it upside down, it starts rotating it. Yeah. - -47 -00:11:15,330 --> 00:11:18,210 -Wes Bos: Oh, that. Somebody please make that that is awesome. - -48 -00:11:19,679 --> 00:12:34,380 -Scott Tolinski: So okay, so this next bit of CSS is something that we sort of look forward to every year is every, every little, you know, piece of sand that falls through the hourglass really drops the browser usage percentages in the browsers that we all hate just a little bit more. And personally, I haven't had to support IE myself, but I know many of you require IE, there's a lot of features out there in the great big wide open world of CSS that so many of us just have to ignore for so long, because we just order radiant use that right? Yeah, border radius back shadow. Okay. Yeah, no. But in particular, you know, I just checked out some of these that I've sort of filed away in the back of my mind for a little bit because I know I couldn't use them like scroll snap. I didn't know scroll, snap worked on IE and up. So are a iE 11, I should say. So if you have IE and 11. And you want to use some like native scroll snapping and your CSS that is usable, right now, position sticky, still doesn't work with any sort of IE, it's never going to happen. But if you don't need to support IE in 2020, you got a position sticky. And I really liked that position sticky is one that I've used quite a bit since of, you know, finding out that I was able to use it. - -49 -00:12:34,770 --> 00:12:44,789 -Wes Bos: Big fan. Oh, another kind of cool thing is a lot of people are gonna groan about this as you can. There is now a spec for styling your scroll bars. - -50 -00:12:44,880 --> 00:12:47,640 -Scott Tolinski: There has been isn't there? Or it was just it was - -51 -00:12:47,640 --> 00:13:35,640 -Wes Bos: there's really no web kit, like a way back in the day. There was like Microsoft version of that. Yeah. And then there was WebKit. But now there's actually a spec, which only Firefox has implemented but between Firefox and, and IE it actually works. And people groan at this every time I talk about it, because they're like don't style scroll bars. They're not a bar. Yeah. But if like, especially like if you look at something like TweetDeck, if TweetDeck didn't style, their scroll bars, they would have these big gray bars all the way through the application. And like even anything with dark mode needs to style your scroll bar to be sort of the opposite colors. I used it on uses tech and I think it looks pretty good. You obviously can can do some awful stuff. And it could be an accessibility issue if it doesn't contrast enough, but it can be done well. Yeah, - -52 -00:13:35,669 --> 00:13:48,210 -Scott Tolinski: I don't think it's a I think it's definitely one of those things that could be done. Well, I mean, even look at my VS code theme has styled scroll bars, you know, I mean, any of that stuff, and I don't think people groan about that not using the - -53 -00:13:48,510 --> 00:13:57,779 -Wes Bos: Yeah, I don't think people realize that. A lot of scroll bars are styled. It's just annoying ones that you go to a website. That's like super obnoxious. - -54 -00:13:57,780 --> 00:14:04,649 -Scott Tolinski: Yeah, right. Yeah, definitely. Don't don't don't have it start playing noises when you hover over the scroll bar - -55 -00:14:04,860 --> 00:14:11,880 -Wes Bos: when they're that scroll fart library a couple years ago. Yeah. farts girl dot j. Oh, God. - -56 -00:14:11,880 --> 00:14:22,200 -Scott Tolinski: Oh, gosh. something to look forward to in 2025 scroll dot j s? Yeah. Okay. To grow up, Wes. It's 2020. Okay. - -57 -00:14:23,520 --> 00:14:31,860 -Wes Bos: All right. Let's move on you. The next thing you have here is NPM. Tink, I actually haven't looked into this before. You want to give me a rundown on what it is. Yeah, - -58 -00:14:31,860 --> 00:16:23,100 -Scott Tolinski: yeah. So check it out. I've included a link to this in the description of the episode because I feel like a lot of people might not know what this is. But here's the Blog Post published September 12 2018. So this is this idea has been around for a little bit, but you can actually try a developer version of tank right now. I don't know anything about how well it works. I have not tried it myself. So I have no idea what the status of Tink is. And they very well maybe but This into NPM. I don't know the status. But Tink is basically a concept version of NPM, you can think of is just like an experiment that they're having. But it covers a lot of the stuff that we talked about on some of our, we briefly mentioned some of this in our Pico package. So it's an installer list NPM. So basically, just by referencing a package, it would install it on runtime, and it would add it to a shared cache across all of your packages. So it accomplishes this by instead of having a like node modules folder, it would have simply just a file that tells where to look these things up at. So you would no longer have this giant node modules folder in your application, but it exists across all of your projects, right. And one of the cool things is it only downloads the parts that you need. So if you're grabbing like a sub part of a module, it's not going to grab the whole thing. It's just going to grab that part. And again, it does this all on runtime. So you would never have to install npm install whatever. And again, it is not something that Well, okay, we talked about this in a couple episodes go in the pika package about how there could be potential security implications here. There's a little bit of notes on that, but not necessarily enough, something that we can get into here. And they don't feel like it's necessarily going to be a huge problem. But who knows? - -59 -00:16:23,460 --> 00:16:42,000 -Wes Bos: Interesting. Yeah, I'm just looking at like, like, what's the status of this? Their GitHub repo hasn't been touched in? Eight months, but there was there's a issue that says, Is this dead? And it looks like it is on the roadmap for NPM? Eight? Yep. We're on NPM. Six right now. I - -60 -00:16:42,000 --> 00:16:45,510 -Scott Tolinski: think. So that's exciting. So it's, it's it's definitely future. - -61 -00:16:45,600 --> 00:16:52,799 -Wes Bos: Yeah. And also, somebody put a link to yarn to Yep. Which I'm not sure what that's gonna do. Do you know anything about that? So there's a lot of - -62 -00:16:52,799 --> 00:18:49,820 -Scott Tolinski: like movement going on in this sort of space. And in terms of like, you know, nobody wants sort of that whole left pad fiasco thing to happen. There's a lot of like, issues that we have, obviously, where there's your packages directory, it's huge. It's a lot of redundancy. There's a lot of confusion sort of around here. So it may seem like these tools just are dumb, but they're not they're actually, we're actively have been working on these. These are problems that are actively being worked on in several different ways. And another one of those is yarn p NP, I think it stands for plug and play. I should probably confirm that. Yeah, yarn, plug and play, and not and play but plug and play. Okay, just to just, yeah, just in case you wanted to get that right. There's actually on the next dot yarn package, comm slash features, I'll push that I'll put a link to this in the description. But yarn PNP is sort of like the next version of yarn. And that sort of yarns take on solving some of the same issues that Tink would be solving. And I think this is really interesting. There's hard hard links, essentially, it eliminates package duplication. So again, same problem that we're facing, where you have the redundancy in your packages, it's also going to be utilizing a shared cache across all of your projects, so that you can not have a whole bunch of stuff installed in one spot. So again, these are all a lot of class, like these are a lot of the same tools that are solving the same issues here, where it's the whole space of packages. In fact, another one of these tools that we talked about in the previous episode, or the episode before we send Pika, Pika package. Yeah, snowpack, so check out pika package. What set up a whole episode is very enlightening. And they're also trying to solve a lot of these same issues and how we get our packages into our applications. - -63 -00:18:50,430 --> 00:19:10,610 -Wes Bos: Yeah, there's also entropic so I think it's safe to say something will happen with package management this year. Yeah. Because there's every everybody's moving yarns moving NPM moving, packages moving and tropic is moving. I don't know. Exciting space. I'm sure. We'll have a couple shows on it this year. Yep. What's going on there? Yeah, - -64 -00:19:10,650 --> 00:19:24,390 -Scott Tolinski: yeah. Then we get a lot of show last show topics from this. And also adding new stuff. And funny Tony is one of our sponsors. This episode, which is a longtime sponsor, syntax is sanity. - -65 -00:19:24,990 --> 00:21:09,300 -Wes Bos: Yeah, we've so if you know what Sanity is structured content, CMS, it's the headless CMS tier, the rest of your body, which is your website. And they've just been cranking out the the features lately. So I'm gonna just kind of go over a couple of the different features that they have here. So they've introduced the environmental variable support to Sanity Studio, which is the Sanity Studio is the UI that you use to edit your, your data. And it's kind of cool because like you Sanity is a hosted solution. But the studio, the UI that you use, you can self host that yourself. And you can throw your own react components into it, which is pretty cool. So they've rolled out support for environmental variables, which is pretty cool if you need to use that in any of your stuff, a nice UI for that type of thing. They've also rolled out Google Analytics right inside of Sanity Studio. I know a lot of clients like you, the developer want like a really wicked, headless CMS. But then your client wants a really nice UI to log in and manage their website, manage their data and all of that stuff. So just like one step further to the perfect dashboard is pulling all of that data right from Google Analytics into your Sanity Studio dashboard, they've given me a list of like, I don't know 10 different new things that they rolled out in just last two months. So they are charging on ahead for 2020. If you want to try check out Sanity for your next website, go to sanity.io forward slash syntax that's going to give you double the global normal free tier. Thanks so much to Sanity for sponsoring sic. Cool. - -66 -00:21:09,320 --> 00:21:57,900 -Scott Tolinski: So next one is demo or Dino. If you know how to pronounce this one, please get at us. Because we're not good at pronouncing stuff. We all know that. But you'll want to check out Dino at Dino dot land or the dino GitHub. Man, this Dino demo done this? Yeah, the naming thing for this is kind of tripping me I don't know. That said, the best way to learn about this, I think is to watch Brian das talk on everything he learned from the creation of node j s and the things that he wish he would have changed. Because this is basically they call it a secure runtime for JavaScript and TypeScript. But it's basically like a new version of node written with TypeScript that sort of solves a lot of those issues that Yeah, from - -67 -00:21:57,900 --> 00:22:17,370 -Wes Bos: the ground up, like this is not like a thing that you add to know or you start doing node and type it like this is like a brand new. Like you've got PHP node and now you've got Dino, yep. No debt, no. Node backwards? Is it? No, no, duh, duh, no, no, no, no, - -68 -00:22:17,400 --> 00:22:24,450 -Scott Tolinski: it's not no backwards, you can read it. A node demo backwards is Odin, Ed, own Ed. - -69 -00:22:24,960 --> 00:23:07,830 -Wes Bos: No one not backwards, but it's been split on two characters and then swapped with somebody else how to pronounce this. Not backwards. But um, I think this is really cool. It's, it's gonna be probably in a number of years before you, you see it have the adoption of even like beginner adoption. So I like node, it's obviously still being worked on. But something if you want to have like a maybe like a side project, or you're interested in, in how these things work, I would definitely check it out. I feel like building a website in this, they've got their simple little TypeScript server in like eight lines of code. Example, go to Dino dot land, it'll show you some simple, simple code. And it might be a good, - -70 -00:23:07,830 --> 00:23:43,950 -Scott Tolinski: pretty good about this base to build up your dev points a little bit, right, you take a library or package with popular node land and recreate it for demo, that'd be sort of low overhead, because you know, what needs to be created already. And then it would exist for this other ecosystem. Or if you get in on the ground floor on something like this, and you become like the demo person, then companies are looking for that demo person. Maybe you're that person. So might be something really interesting to look at early. But again, I might try doing a side project like this nothing major for me right now. - -71 -00:23:44,550 --> 00:23:49,170 -Wes Bos: I'm gonna go by demo cast. COMM and start a new career. - -72 -00:23:49,529 --> 00:23:53,280 -Scott Tolinski: Yeah. Whoo. And don't cast that's good. Oh, - -73 -00:23:53,550 --> 00:23:58,710 -Wes Bos: did someone already take it in there? Oh, somebody's already got it. - -74 -00:23:58,890 --> 00:24:02,130 -Scott Tolinski: Oh, it's something Oh, Daddy on it. Somebody's gone. - -75 -00:24:02,160 --> 00:24:05,220 -Wes Bos: What kind of demo developers using GoDaddy? - -76 -00:24:05,249 --> 00:24:12,300 -Scott Tolinski: Yeah, if you if you were if you ask GoDaddy. How can I host my demo site? They'd be like, dunno, you can't we can't do it here. - -77 -00:24:13,980 --> 00:24:20,970 -Wes Bos: Let's see. Is there any Whois info on this? Who is no fun anymore? Everyone's got private who is I never pay for? - -78 -00:24:20,970 --> 00:24:24,090 -Unknown: Yeah, no, you don't. I need to - -79 -00:24:24,120 --> 00:24:53,100 -Wes Bos: know it's it's free on like any, any registrar worth their weight. It's come. So your name calm is what I'm hearing. I'm using I've moved all my domain names over to CloudFlare because CloudFlare doesn't let you register new domains. So I have to still use hover to register them. But then use then you move them over to CloudFlare and they're they give them to you at a cost like eight bucks a year for like a.com - -80 -00:24:53,130 --> 00:25:03,060 -Scott Tolinski: I need somewhere to move mine because mine are all@name.com and I love your name.com your Colorado all that good stuff, but like You have not changed in years. - -81 -00:25:03,240 --> 00:25:36,840 -Wes Bos: This point? It's no Yeah, yeah, it's not fresh. Yeah, I probably I think I did the math, I'm saving $600 a year when I moved to cloud, okay, cuz they give it to all at cost. They don't have every single domain name, but I would say probably, I don't know, 98% of the domain names I had, like, the the.af didn't move over. And there's a couple other there's a couple other ones that are custom that couldn't, couldn't move, or I don't think dot tech will move over because they're their own their own thing. But yeah, you should check it out. - -82 -00:25:37,019 --> 00:26:34,170 -Scott Tolinski: Yeah, check it out. Cool. So the next one, let's get into some react stuff. Because this is, you know, there's a lot of new react stuff coming. For instance, suspense was just sort of dropped to suspense for data fetching. And that's all great. Oh, no, I think it's out. Yeah, I think it's out out. But the thing is, is that for send suspense for data fetching, to really be legit, or to really be everywhere, libraries need to take advantage of it, right? Like, for instance, Apollo, we need to take advantage of it. And that's one thing that I would look forward to is more libraries using suspense for data fetching. But one of the big reasons why I can't use it personally is because of servers that render right suspense for server side rendering is not released yet, which you can almost I they begun work on it. I mean, they're working on it. So I would like to think it would come out this year. But again, I'm not on the React team. And I have no understanding of what their deadlines or timelines look like. So - -83 -00:26:34,380 --> 00:26:50,610 -Wes Bos: their doc say, this is an experimental feature and is not available in a stable release. And then immediately underneath that, it says react 16 six add suspense component that lets you wait. Yeah, but I think that suspense for loading, they sort of lazy - -84 -00:26:50,640 --> 00:27:03,660 -Scott Tolinski: lazy loading in my Yeah, in my opinion, the naming for this. I don't know about some of the naming, you know, suspense for data fetching. This is my I get it, but like, it is a little confusing on what's released, what's not released? - -85 -00:27:03,989 --> 00:27:06,750 -Wes Bos: Well, what's the what's stable? react? - -86 -00:27:06,779 --> 00:27:09,990 -Unknown: Let me just check that 16 point. 12. - -87 -00:27:10,620 --> 00:27:16,560 -Wes Bos: And why is the doc say it's not? And everything I've heard is that it's not available yet. One of the docs Hey, it's - -88 -00:27:16,560 --> 00:27:23,130 -Scott Tolinski: not. It might not be I could be totally wrong about this. I think it is still experimental. Yeah. - -89 -00:27:24,090 --> 00:27:45,390 -Wes Bos: Yeah, this is like I did a talk over a year ago about this. I can't wait for it to come out. They're obviously making sure they get it right. But I am more than ready. There's like for for this thing to come out. So I can start moving over some of my libraries. And I am trying to re record my advanced react course right now. And I want this thing to be in it right. Everyone asked me like, does it have suspense in it? Like it's not? That's not even a thing yet? - -90 -00:27:45,630 --> 00:27:52,290 -Scott Tolinski: Yeah, you're you're a little ahead of the game. And that's, you know, understandable. But still. Next, - -91 -00:27:52,290 --> 00:28:02,370 -Wes Bos: we have here is something Scott is super pumped about, almost like came back from a lifeline is Meteor. What's the status of Meteor? I thought it was dead? - -92 -00:28:02,400 --> 00:28:22,350 -Scott Tolinski: Yeah. So okay, so Meteor, which was purchased by a company called tiny. So tiny is a, like a firm that owns businesses, they own dribble. They own a bunch of different interesting things. But one of the things they just recently purchased was, oh, they also own designer news. But they recently purchased a meteor at - -93 -00:28:22,350 --> 00:28:24,030 -Wes Bos: a lab. They're Canadian. Yeah, - -94 -00:28:24,270 --> 00:31:05,700 -Scott Tolinski: they are Canadian. They recently purchased Meteor along with meteors hosting platform galaxy, of which I've both been using for a long time. The good news about that is he is certainly you know, full credit to Ben Newman and the meteor team. Ben has done incredible work constantly on Meteor. But it was very apparent that MDG as a whole Meteor developer group as a whole was just not interested in really evolving Meteor or putting the energy into a beyond the amazing work that people like Ben we're doing. So the problem was, is that I think it was obvious for a lot of people that they weren't interested in putting in that time into it. So therefore, a lot of people just didn't want to care about it, right? I mean, right. Me personally, I was worried about the future of Meteor, because even though I knew that it would continue to see updates from people like Ben, I just knew that the energy wasn't there behind it to get it where it needed to be. So here comes tiny and tiny purchases it and it has, I think at first everyone is a little bit, I don't want to say concerned, but everybody was a little bit like, okay, what's gonna happen to this now? And since Tony has purchased it, there has been a ton of updates, because one of the things that Meteor always got right was the updates and the growth of the application. The things that Meteor got wrong, were the community focus aspects of Meteor, for instance, I would assume that a large portion of the community doesn't even understand what modern media or even looks like today. So they weren't great about fostering this community and they weren't necessarily great about it. keeping everybody up to date and bringing people in, and all these kinds of things that they just really missed out on. And you know, there's a lot of community members that putting in a lot of work to Meteor, and I felt like MDG just sort of ignored them for a little bit. So again, Meteor seemed like it was a little bit neglected. But they've now since released a new roadmap, which is big. Since buying it a couple of versions of Meteor have popped out of which Ben was working on before, but they've released in there excellent. And largely it, the library just seems to continue to grow and grow and grow and improve. So me personally, I posted the link to the meteor roadmap. And here, they're going to be getting tree shaking, thinner Meteor, the hosting platform, seeing a ton of improvements. But I personally, I've been using this platform for a long time, and I was rewriting my application on the next js. I've gotten it basically done. And I've since decided to go back to Meteor. So I'm actually still going to maintain an continue I project within Meteor. And I'm really excited to see where that goes through the next year. - -95 -00:31:06,240 --> 00:31:13,650 -Wes Bos: Awesome. That's, that's pretty exciting. I'm glad that that has sort of, because I know you were like, kind of sad to move away from it. And you're big fan of - -96 -00:31:13,650 --> 00:31:53,970 -Scott Tolinski: it. I love Meteor. I still am. Yeah. And I think there's a lot of misconceptions, I would love to do an episode on modern Meteor, what that looks like the misconceptions are as because it largely accomplishes so many of the things that we talk about with looking for this rails of JavaScript. And you can do so in an exceedingly modern way. You know, I have code splitting and server side rendering and TypeScript. And I have Apollo and all these things. And it's absolutely effortless. You can even you don't have to use a lot of the meteor stuff. If you don't want to, as a build tool as a platform as a node server. It's all an excellent, excellent platform. So yeah, I'm excited for where that goes. - -97 -00:31:54,240 --> 00:32:10,860 -Wes Bos: We've got some non react stuff. Next. I know view three is slated to come out fairly soon. So that'll be a big, I'm not not super down on viewer on what's changing and whatnot. But obviously, it's a major release. So that will be a big shake up. And then what was the other one smell smell? - -98 -00:32:10,890 --> 00:32:50,970 -Scott Tolinski: Yeah, so it's a big stuff smell had a big year. Last year, it is felt three came out a lot of press around that I think people really took notice of how, how nice it was to write small code and just how simple it is. So if you're interested, check out speld. To be honest, I'm really excited about what the future will hold. If there's going to be more community packages, or all more interesting things installed, the stuff that's there already, like, for instance, like the animation packages that are built into spelt, compared to obviously, there's nothing built into react, the stuff that's built into spelt couldn't be any easier. So check out its Feld, check out the community. And just, I'm excited to see how that grows this year. - -99 -00:32:51,810 --> 00:33:28,410 -Wes Bos: One thing I just watched an awesome talk a couple weeks ago on Apollo three coming out. And one of the biggest features for me is ability to work with the cash a little bit more. So right now, if you want to validate all of your items in the cache, you have to blow away the entire cache, which sucks because if you've got like users or local data in the cache, then you have to blow that away as well and refetch it from the server. So Apollo three is going to give you much better control over the cache. What do you know what any of the other stuff? Totally, I'm blanking on it right now. - -100 -00:33:28,830 --> 00:33:51,270 -Scott Tolinski: Um, they the way they are organizing the packages is going to be very different, in my opinion, the way they should have had it before. So that aspect of it is going to require a little bit of a rewrite of your code, but not really functional. So to say, it's just going to be a little bit better organized when you're looking for this specific package. I think that's a little when personally, - -101 -00:33:51,720 --> 00:34:15,030 -Wes Bos: yeah, there's there's not going to be so many little packages, it'll all just be shipped in, I think one big one or several big ones, which is good because mismatching versions is annoying. And I'm sure tons of silly little bugs pop up when you have like not the right version and peer dependencies never worked properly. And then I didn't hear anything about their suspense plan yet, which I'm super keen on. - -102 -00:34:15,440 --> 00:34:18,630 -Scott Tolinski: It's it's on the word experimenting phase. - -103 -00:34:19,170 --> 00:34:43,590 -Wes Bos: Oh, okay. Well, I guess they're just like waiting for it to be officially released. So they can go ahead and make stuff but that will be big as well. Because right now I use next j s and suspense. And we have to do this whole climb the tree rigmarole every component and look for queries and then move them up to the top and wait for those and suspense will make all of that so much easier. Yeah, - -104 -00:34:43,610 --> 00:35:01,730 -Scott Tolinski: yeah, absolutely. Well, speaking of next as Next one is next j s. Now, yes, next on the list is next j s. Look I can keep going all day. This one's not going to change because the next j s is added static sites. See that? That was three different transitions into next day. - -105 -00:35:01,730 --> 00:35:02,820 -Wes Bos: Amazing. Yeah, - -106 -00:35:02,940 --> 00:35:12,210 -Scott Tolinski: do you want to talk a little bit about the static API because I haven't looked into this other than the fact that it exists. Obviously, it's probably in response to the popularity of tools like Gatsby. - -107 -00:35:12,840 --> 00:36:30,960 -Wes Bos: So they rolled out some new, you know, we have get initial props, they have a new thing called get static props, which allows you to get static props and generate sites, they actually, as part of the rollout of this, they re did the syntax website, which is built index j s, and a custom server. And they redid it as a static website that is just generated on every pull request. We haven't merged it yet. Because we need the custom server because of the way that we release episodes. We can't regenerate the website at nine o'clock on Monday. And Wednesdays, when the episodes are ready, we push them with a timestamp. And then once that time stamp has passed, that data is then available in the API, and then the next time you visit the website, it will render a new version of that. So figuring out how that works, if we if syntax should be a static website, or it should be dynamic, we're not totally sure, because there's certainly other ways to fix that. But it's kind of cool. Obviously, Gatsby is doing a lot in the static space. And it's exciting to see now, take a look at or sorry, Next, take a look at that and try to implement it. There's still so much more that Gatsby does over something like this, but it's a kind of a step in the right direction, I think, - -108 -00:36:31,110 --> 00:37:24,380 -Scott Tolinski: yeah, totally. All these tools are going to just get better and better. And this year, another thing is serverless stuff is going to continue to evolve, you already seen it evolve in a really cool way. Next, JS has done some amazing work with it. They're now hosting platform that allow you to run serverless functions directly in your next step. We did a course on an alone level up tutorials. And I really, really liked how they kind of control you're able to get over your application, it feels like it's all neatly in one little thing. But at the same time you're running your functions and a server list as a serverless container. So I think it's all going to get a little bit easier. We're seeing companies like Netlify step up with their functions next .js with now a lot of people are in this space. And they're going to, again, make it a little bit easier than what AWS just had with like their, you know, deal with it platform. - -109 -00:37:24,570 --> 00:37:27,780 -Wes Bos: Yeah, it's true that it's been difficult in the past. - -110 -00:37:27,810 --> 00:37:29,310 -Scott Tolinski: Yeah, that should have been the name of the - -111 -00:37:30,090 --> 00:38:12,440 -Wes Bos: one sort of company I'm keeping my eyes on is beggin calm, which is going to allow you to do server lists stuff. I haven't haven't checked it out yet, but I've just it's from Brian LaRue, who was one of the main devs behind phone gap, and Ryan block. I met him at a conference and he's like, Hey, I'm Ryan block. I'm like, you're the end gadget guy. Yeah, yeah. Yeah. Like I remember reading Engadget, like, like crazy when I was was really young. And now he looks like Ryan block is running a serverless company with some a lot of devs I respect that are working on it. So it's on my list of things to check out. That's coming out speaking calm. - -112 -00:38:12,480 --> 00:38:28,860 -Scott Tolinski: Cool. I'll check this out. Yeah. Another one is Gatsby. As we know, we love Gatsby over here. And Gatsby, do you have any any knowledge on what Gatsby is going to be doing this year? I know, gather is just like always pushing stuff. You know, - -113 -00:38:29,520 --> 00:39:28,500 -Wes Bos: the one thing I'm really looking forward to is a single unified query. So currently, there are page queries which allow you to have variables in them. And then they're static queries, which don't allow you to have variables in them. And you can only use page queries at a page level. And if you want to query something inside of a component that has a variable in it, you're you're kind of out of luck. Yeah. So there is there the look looks like the unifying the queries, made possible by suspense. And they're going to move towards a single use query. There's there's already some there's lots of code written lots of proofs of proof of concepts. So I would imagine that as soon as suspense drops, we'll see a single unified query and then we'll move away from the two different types of queries in Gatsby. I think that's I'm not that's, that might be wrong, but that's kind of how I see it working like that. I'm not sure what else Gatsby has planned. But I think some pretty interesting stuff, if I would bet it's a big time for Gatsby right now. - -114 -00:39:28,530 --> 00:40:59,610 -Scott Tolinski: Yeah, Gatsby does the excellent work and we've seen it time and time again with themes and all the stuff they've been pushing out. Next one is the other category, which is this stuff that doesn't really fit in anywhere. I wanted to point out quickly, the headless CMS Thunderdome, I'm calling it where we have all these thousands of headless CMS companies right now of which we we know and love a few of them that we've tried, you know, such as Sanity and content full and take shape and forestry and then Even like things like Tina and some other stuff, there is so many of these services and so many of them are very excellent. So we should see this space be continuing to be a Thunderdome specifically because there's all this competition around and competition like this usually breeds some innovation. So I'm excited to see what comes out of this headless CMS Thunderdome and which tools are going to continue to grow and evolve. And they're all coming for that big that big seed of, you know, the the WordPress seat? Yeah, that seat that's, you know, getting a little long in the tooth at this point. You know, I don't know how many times people have tried to do headless WordPress sites. But I've done a couple of courses on headless WordPress. And if I'm being entirely honest, it's not really that great of an experience. I hope I don't, you know, make any WordPress people upset. I don't love it. And I so I think this, this area is ripe for someone to come in and just do it better. So we're seeing a lot of these companies take those steps, and I'm interested in seeing that happen. - -115 -00:41:00,060 --> 00:41:01,770 -Wes Bos: What about seeing the magic Scott? - -116 -00:41:01,800 --> 00:42:19,650 -Scott Tolinski: Yeah, seeing the magic and seeing the tragic with Log Rocket. That's also something I'm excited for this year. Because you know, websites, they got books, you know, it just happens. And a lot of the times when we have our bugs, we don't really know how they're happening. We don't really know what the user did, like, how did the website end up upside down? I don't know, how did the user do that I can't even imagine how the user made the website go upside down. But maybe they did. And Log Rocket allows you to see the exact steps that the user clicked, maybe they did a little cap con cheat code in there. And you didn't know that you had that on your web, maybe it was just hidden in there, and it made your website go upside down. But you would have never been able to solve that bug without a tool that allows you to see the user's interaction with your site exactly what they were doing their network requests. They are error logs that Redux state and all that and more using something like Log Rocket. So you'll want to check out Log Rocket at Log rocket.com forward slash syntax, you're going to get 14 days for free. And you're going to see the magic I'm sorry, Log Rocket for just making up these slogans for you. But you're going to be able to really see it because the first time a user hits that bug, and you solve it by watching a video, it's going to feel like magic, again, Log rocket.com forward slash syntax. - -117 -00:42:19,919 --> 00:42:55,710 -Wes Bos: A another thing I'm really excited for is all these frameworks that are now starting to pop up. Keystone, obviously, we had a show on that lot of people replied to the Keystone with you should try strappy. So that seems like a really good option as well. Meteor Vulcan j s, all these different like headless things where it's it's sort of a step ahead of Prisma or Hasura. Where those are good options. But if you want something that's a little bit more batteries included, there's a bunch of these different frameworks sort of pushing forward right now. And I'm excited to see, - -118 -00:42:55,979 --> 00:45:53,580 -Scott Tolinski: yeah, it's sort of the next the next level, right? We have things like Gatsby and next right that largely take control of the rendering and in those application parts, but what they don't take care of is any sort of data data live database layer or anything like that. It's largely about how you render this site, right? Whether that server side statically, whatever. A lot of these like Vulcan Meteor, Vulcans built on Meteor, but Vulcan Meteor Keystone strappy, they're more interested in full picture of like, how does the data get in into the site, and how does the data exist itself, whether that's working with a database, it does feel more of that space of a CMS, but like, maybe not the full space of the CMS, it doesn't take up the entirety of that space. But it's definitely interesting tools that allow you to build some really cool stuff. Another one I have on here is Cypress. For those of you who don't know, Cypress is the end to end testing library, you can check it out, I believe@cypress.io. You can just Google it. Cypress testing, it's an end to end testing library that is really super good. It feels like nothing else I've used for testing. I absolutely love it. The biggest reason why people don't use Cypress is because there's no Firefox support. But they have been working on it or sometime and I just on Twitter, they're still working on it. And I am very hopeful that it will get Firefox support in 2020. Another one is modules, which I was hoping to get my hands on this one in September, but I think they have a lot of work to do. Modules at modules dot app, we'll have the link in the show notes is a visual editor for your code. A lot of times these things can be balked at. But this one is more like figma or sketch and then you can output a view or react component from it. Oh, and also you can input your figma document in here according to this little diagram. So it seems like it's really cool. It seems like sort of what framer was trying to be. I have my eyes on this one and last Is my design app of choice is figma. Honestly, if you're still using sketch, you know, that's cool too. But I prefer figma. I don't want to be that divisive, but figma to me is just better in every sort of way. I really love figma. And they continue. Like, the reason why I like figma from the get go is that they had a lot of the same features as sketch. But they had new features, like all of the time. And that eventually happened where sketch just didn't keep up at all. And figma is cross platform, they added plugins, and they just keep adding new, new new features. They just added an auto resizing feature. So if you create a button, and then change the text, the button just resizes there's a lot of little stuff like that. And I'm excited for where this app goes this year because they continue to Yeah, Hill it non stop. - -119 -00:45:53,790 --> 00:46:25,740 -Wes Bos: You know, one thing I learned yesterday is that you can import sketch files into figma. Yeah, that was like one of the biggest blockers for thanks for telling me you could do that from day one. Yeah, I had no idea. Yeah. Okay. Well, I think I think 2020 is the year that I move over to figma. You said it turns out one of the devs or man main guys behind figma lives like 20 minutes away. So who's that? Yeah, um, let me look here. I don't know. It's in my DMS. My DMS are gone. - -120 -00:46:25,740 --> 00:47:03,030 -Scott Tolinski: Do you know what a funny thing about figma is that I was working with figma to do some videos, like a couple years ago. And yeah, they're only they only had a handful of employees at that time. But one of the guys I worked with at this computer store at University of Michigan where I met my wife all those years ago. And so Courtney, too, and it was so funny that I was like, Wait, is this the same? You know, is this the same guy who you know, it is so fun to just, I didn't know he was in the space at all. It was just so fun to run into somebody digitally that way that you would known from college? - -121 -00:47:03,330 --> 00:47:09,210 -Wes Bos: Ah, ha, that's cool. Yeah, I need to next site. I do. I'm gonna do it in figma. Yeah, - -122 -00:47:09,270 --> 00:47:17,370 -Scott Tolinski: I'm a huge, huge fan. I use it every day. I use it for all sorts of stuff. Not even like I said, I used to create my thumbnails and stuff. Just it's just the best. - -123 -00:47:17,970 --> 00:47:32,250 -Wes Bos: Awesome All right, um, so that's what we think 2020 has in store some really interesting stuff coming up. I'm excited for the new tech that drops. So buckle up and get ready. Let's move into some sick pics. You got a sick pic for me today, Scott, you - -124 -00:47:32,250 --> 00:48:50,400 -Scott Tolinski: bet I got a sick pic. I got a couple of them trying to decide. I have a really interesting little sick pic here. That's a smart device. But it's not necessarily the smartest to smart device. Like as an it doesn't need to have is not like all super fancy. You don't need to check it out at your house. So it's a little $13 thermostat. And high grommets are basically a humidity sensor. And it's very low power. And it basically runs on a couple batteries. And it connects via Bluetooth to constantly keep track of temperature. And every time you connect, it updates your your app. Also, I really love this, I bought a couple of them one for my attic, because we don't store anything in our attic. And I wanted to really keep track of what the humidity and temperature levels were in our attic. So that I know like what we can store up there and how it's going. But also for our gym, our gym gets really cold because it's a it's a shed, you know, it's basically a shed, it's a shed garage, but we have a couple heaters out there. So what we've done now is I have one of those thermostats and I can turn on all the heaters. And then I can come inside the house. And I can just look at the app because it connects via app even though it's just Bluetooth, it connects via app and I can just look and say okay, it's 40 degrees out there. That's warm enough for me to go out. - -125 -00:48:50,400 --> 00:48:51,960 -Wes Bos: What's this call? - -126 -00:48:51,960 --> 00:49:03,570 -Scott Tolinski: It's a go v thermometer hygrometer accurate indoor temperature, humidity goby, go v. I have a link to it in the show notes. Or I did. - -127 -00:49:03,870 --> 00:49:35,850 -Wes Bos: I'll put it back in Okay, I think I need this because my wife's always like, it feels cold in the girls room. And I'm just like, I don't know, is it and like, I always wanted to put the Eco B thermostat. And eco B has these little like coin cell things you can put in each room and then it will heat it depending on what room you're in. And I was like, I'd love to just have one in every room so I can know How hot is it in each room? Do we need to turn on a space heater? But there there's like 60 bucks apart. It's just too expensive. So just something super simple. Like this is probably what we want. - -128 -00:49:36,240 --> 00:49:49,320 -Scott Tolinski: That's great. It's super simple. It's it's very easy. And like it's a it's a nice solution to a problem that I think other companies would go way overboard trying to solve so Oh yeah, - -129 -00:49:49,410 --> 00:50:12,420 -Wes Bos: this is cool because like we've got the at our house. We've got the just the like regular one where you put the thermostat outside and then you've got like a tiny little so screen that you put inside. And we love that because it actually tells you what is the weather outside my house and not not some weather station at the airport. Yeah. And it tells you but this one goes on your phone as well, which is pretty cool. - -130 -00:50:12,870 --> 00:50:14,760 -Scott Tolinski: Yeah. Yeah. - -131 -00:50:14,970 --> 00:50:44,670 -Wes Bos: Awesome. Well, I'm going to sick pick something. So I just redid my office and I built a, I talked about this where I built a rack out of IKEA thing. And one of the things that I wanted to put in my rack was like a power bar, a rack mount a power bar. And this thing is awesome, because and you're not talking like the protein bars, are you? It's called right there. Yeah, I got it. Actually, this could be like a lifting rack and getting power bars to eat. - -132 -00:50:44,700 --> 00:50:50,820 -Scott Tolinski: I do want to clarify here. Yeah, I hear a rack and power bar. And there's our gym heads. They're gonna be huh. - -133 -00:50:51,510 --> 00:51:47,760 -Wes Bos: This is computers for all the computer folk out there. So it's a 16 outlet rackmount power strip that is surge protected. And it's awesome because you can mount this thing in your server rack or in your IKEA table, which is what I did. And it will give you I don't know 10 I think 10 plugs at the back to plug in all your stuff and tidy it up. And then it gives you six plugs on the front for just like temporary stuff that you need to plug in. So so I've been testing a bunch of routers right now and I seem to plug them in and out really quickly. And I don't have to like climb under the desk and find the power bar and find space to plug this thing in. So big fan of that it is called the startac 16 outlet, horizontal rackmount power strip. There's a whole bunch of them available out there. And this one has the most plugs for your buck. Which I'm a big fan of I need to - -134 -00:51:48,780 --> 00:51:52,380 -Scott Tolinski: my rack is great. need to step up my rack a game. - -135 -00:51:52,530 --> 00:51:53,430 -Wes Bos: You got a nice rack. - -136 -00:51:53,430 --> 00:51:59,580 -Scott Tolinski: Thank you. I got Yeah, yeah, we should have a rack off. Where we post our racks. Yeah, you - -137 -00:51:59,580 --> 00:52:03,990 -Wes Bos: should build one and we'll do a little hasty treat on on how we did it all because I've got built - -138 -00:52:03,990 --> 00:52:07,740 -Scott Tolinski: one. I built one. like four months ago. - -139 -00:52:08,010 --> 00:52:13,800 -Wes Bos: What you built like a rack. Like, like, Are you joking with a lifting rack here? are you? - -140 -00:52:15,630 --> 00:52:21,300 -Scott Tolinski: I'm not joking. No, I have a what's it called a rack? Like it's just a server rack? - -141 -00:52:21,720 --> 00:52:22,380 -Wes Bos: Really? Yeah, they - -142 -00:52:22,380 --> 00:52:52,050 -Scott Tolinski: have it underneath. I did it very interestingly. So I have a wonder if my desk because I have a standing desk at one of my desk to be like a one cable on one. Oh, yes. So what I did is I bought a it's supposed to be for like an in a cabinet. But I my desk is heavy enough that I'm not really worried about it tipping over and I screwed it into the bottom of my desk. So underneath my desk, I have the rack installed to the bottom of it. And then I just have my my what's it called it in there. My my audio equipment, - -143 -00:52:52,200 --> 00:52:54,090 -Wes Bos: db x 286 s - -144 -00:52:54,300 --> 00:53:07,650 -Scott Tolinski: just nailed it. I would love maybe if I had like a four port rack. So I could have a few more things in here. Because right now I'm kind of limited on the space. I went with the two and now I got a little bit of case of the regrets ease so - -145 -00:53:07,980 --> 00:53:23,070 -Wes Bos: well. You can go get a table for what $8 at IKEA. Who wants to know know what you have is super clean. I like that a lot. I only have three rackmount stuff and then the rest of it just one went on there. But I have dreams. Do you know you can buy a rackmount Mac Pro? - -146 -00:53:23,070 --> 00:53:26,340 -Scott Tolinski: Yeah, yeah. Yeah. So cool. I know - -147 -00:53:26,400 --> 00:53:27,990 -Wes Bos: everything should be rack mountable. - -148 -00:53:28,440 --> 00:54:24,960 -Scott Tolinski: Yeah, in the future, everything will be available. Shameless plugs, I have a new course on level of tutorials. And when I say I, I don't mean me because I did not create this course. But the very talented at James quick created a course for level up tutorials on react and Firebase where he builds a quiz. And it's really neat, you create a full quiz. And since it's using Firebase, you have a whole database to, you know, to backup that data and everything. It uses the open trivia API. So again, we have like access to an open API. It's really super fun. James is an excellent teacher. If you're not familiar with his work, just go subscribe to his YouTube channel. I'll make sure I link that here. He does very good video tutorials. And we're super lucky to have him be able to do a course for a level up. So check it out. I level up tutorials.com and the courses react and Firebase or full stack react and Firebase. - -149 -00:54:25,380 --> 00:54:54,390 -Wes Bos: Beautiful. I'm going to shamelessly plug all my courses right now because they are on sale over a new year new you just go to any of my courses beginner JavaScript, calm advanced react.com learn node.com react for beginners calm, yes. six.io. And you can grab all of them. They are on sale to the end of January if you want to grab one or two or all of them. Oh and use a coupon code syntax. They had an extra 10 bucks off as well. Cool. - -150 -00:54:54,810 --> 00:54:56,850 -Scott Tolinski: Do that. Do that do do that. That that. - -151 -00:54:56,940 --> 00:55:04,080 -Wes Bos: Alright, thanks for tuning in. And we will catch You on Monday, catch you then please, please - -152 -00:55:06,120 --> 00:55:15,870 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax217.srt b/transcripts/Syntax217.srt deleted file mode 100644 index 33279ec5f..000000000 --- a/transcripts/Syntax217.srt +++ /dev/null @@ -1,216 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,989 -Unknown: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA and Scott Todd. - -2 -00:00:23,610 --> 00:00:24,480 -Total in ski. - -3 -00:00:25,980 --> 00:01:01,380 -Scott Tolinski: Oh, welcome to syntax in this Monday hasty trade, we're gonna be talking about community building on line, some of the different software techniques and things you can do to either get started with a web community or join one potentially join one of the two that you're going to be hearing about in this episode. And we are going to be talking a lot about the pluses and minuses here a little things to consider when thinking about a community on the webinar. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, and with me, as always, is Wes Bos. - -4 -00:01:01,650 --> 00:01:02,220 -Unknown: Hey, I'm - -5 -00:01:02,220 --> 00:01:21,000 -Wes Bos: excited to talk about this because I don't feel like there's any like perfect solution out there yet. And there's lots of options out there. And they all have their, as you said, pluses and minuses, but I don't think there's a silver bullet out there yet. And I'm, I'm really hoping GitHub comes out with something pretty soon. So we'll talk we'll talk about that. Ooh, - -6 -00:01:21,120 --> 00:02:35,910 -Scott Tolinski: yeah, you know what I have? personally? Well, okay, well, we'll share my opinion, I'll wait to share some of my opinions. All right guard. But this episode is sponsored by one of our favorite sponsors over here. They're all our favorite sponsors. Let's be real. And this is Sentry@sentry.io. Now, Sentry is the perfect place to track and store and log in, categorize and make sure that you've solved every single bug that's ever happened on your website. Because let's face it, you're going to solve bugs. And the last thing you want is for your community members to start harassing you about those bugs. They're your people in your community, you're going to say, hey, there's some bugs here. What are you doing, you're missing this bug, you're missing this bug, whatever. So before that happens, you're going to want to make sure that you have access to all sorts of really excellent logs and categorizing tools so that you can keep track of every single bug market as fixed before your users even notice it, which is really the goal of solving bugs. So if you want to try out Sentry@sentry.io it works with every single platform that you could possibly use. Let me tell you, you'll get two months for free if you use the coupon code. tasty treat all lowercase all one word. Thank you so much for Sentry for sponsoring. Alright, - -7 -00:02:35,940 --> 00:03:12,720 -Wes Bos: well, let's get into it. Maybe I should start real quick with where we're at right now. My community is on slack. And I've been on there for I don't know, maybe four, four and a half years now. And there's something like 30,000 people in there and I I feel the aches and pains of the slack. Yeah, because it's okay. But there's like I said, there's there's a lot of downsides to it. And I've been like looking for something better. And I was excited to hear that you've recently switched to Discord. Yeah, yeah. Tell us about Hi. Sorry, I I ruined the lead there. No, no, I - -8 -00:03:12,720 --> 00:04:52,580 -Scott Tolinski: prefer a nice little lead. And, you know, it's funny because we had a tweet come in, and it was sort of like, Hey, I'm trying to sign up for your slack room. But it's saying that you're all out of invites. And I was just like, this is so annoying. The invite process to slack Why can't they just add a form to allow anybody to sign up to your room that is good for more than just a month or something because the real answer is is because slacks not good for open communities right it's more like yeah team closed community focused and and that's really who their their audiences and so I really was feeling the pains of not using slack what it was for what it was essentially made and used for. And so I asked around and a lot of people were telling me discord discord Discord. Yeah and I heard so many glowing endorsements from a lot of people I trust honestly I would name them all but there is too many to name just about every person that I you know really look for good advice from was telling me that discord is the way to go. So I did a basically a scorched earth and I just said screw it. Let's move it must move the community. I'm tired of it. You know, I knew the the people who were using the Slack channel I did a nice little poll online and people said that they wanted to wanted to move and I took the shot. Now we're on discord and let me tell you 24 hours later, I'm really loving it. So we'll get into the plus and minuses a little bit, but I'm on discord right now. We'll have the links to both of our communities is yours open you have to purchase from your course. - -9 -00:04:52,680 --> 00:06:11,670 -Wes Bos: No mine. So mine is only it's invite only, and it's only for people who have heard Just a course and I so I have hired someone shout out to AJ, he sort of holds down the four in the Slack channel and helps people with whatever issues they have. But like, it would be like out of control. If I were to let even the free like my JavaScript 30 has over 300,000 people have signed up for that. So like, he would, it would be too much to support to give away support for that. And it would also just take away from the people who have paid for a course. So I'm currently only having but I guess like, the other side, I should say is that like, also the community helps each other a lot. Like it's not just me and AJ, it's it's primarily the community members helping each other out because everybody's at a different point. So I guess that that would help there as well. But currently just a private only in slack. We should also say that discord is kind of like Slack, but it's it was initially started with what like gaming, and it's just faster and free. Yeah. And how does it work? Do you like do you host your own server? Like I often see like a lot of YouTubers now say that, oh, I have my own Discord server. Now. - -10 -00:06:11,880 --> 00:06:28,590 -Scott Tolinski: That just means that you have a lick of room. So yeah, yeah. So unlike Slack, where you have a new account for every single team you sign up for, which honestly, is one of the worst things about Yeah, great. He's 2 billion accounts, you do the magic link thing. And it's like, here's all your different logins. Yeah, - -11 -00:06:28,740 --> 00:06:32,070 -Wes Bos: yeah, I've like 40. Yeah, every conference I've ever been to. Yeah, - -12 -00:06:32,070 --> 00:07:44,370 -Scott Tolinski: it's annoying. So this, you maintain one account, and then you can sign up for as many different channels, I guess their rooms. I don't know what they're called cert, I guess they're just called servers, right? You sign up for as many servers as you you want. So I'm in a few different servers right now. Like I'm in the official view, one and then the official spelt one. I'm in one for react people, and then one to watch hockey games. A few different ones. And yeah, so in those regards, it's a little bit different, but it feels very much like they took slack in the relic. All right, what is slack? Do well, and what does slack do badly for, you know, larger open communities rather than closed teams. Right. So I guess let's get into it with like some of the first topics here that are the first categories, right? for building communities, you largely have a few different options, right? You have at least chat options, which are largely the two big ones would be slack and discord are the really the two biggest chat ones. Obviously, there's IRC, which has been around for ages and ages, but I don't know who's really actively joining a lot of IRC rooms. Now at the moment, right, they've sort of a dozen been superseded by these new fancier chat applications. I was - -13 -00:07:44,370 --> 00:08:02,220 -Wes Bos: on IRC channels. So back in the day, and I had a run on a bouncer, which would keep you logged in, like if you want to, if you as soon as you close your laptop, you'd be logged out and you wouldn't be able to see the like, chat history from before. So yeah, IRC is is cool, but that ship has sailed. - -14 -00:08:02,610 --> 00:08:07,890 -Scott Tolinski: Yeah, what what service did you use to to use IRC? like did you use an app or? - -15 -00:08:07,950 --> 00:08:27,720 -Wes Bos: Yeah, I used an app called link Innes. Hmm. And yeah, that was it was pretty cool. And then I ran my own bouncer on like a Digital Ocean server interesting, which is fine. Like, that's I initially got into like, writing bots in JavaScript. For IRC that was really fun to do. I learned a lot of API's doing that. - -16 -00:08:28,200 --> 00:10:22,500 -Scott Tolinski: There's so many cool things about IRC. It also led into my first encounter with community members who are rude to you, when you're first learning Django. And I was like, hey, what what's up with this, uh, this donkey, I followed the official Getting Started documentation and like, step two, just flat out doesn't work. They're like, Oh, yeah, it's out of date. Like, okay, well, that's, that's good for getting started, you know? Good, good. Good point, good Nina status for that, for me trying to learn this thing. So they were not very nice to me. Let's go ahead and talk about the next one, though, which is a forum based, obviously, we're going to get into the pros and cons of these a little bit more definitely. But forum based would be more indexable, right there or fundable by Google, they're better to be searched, there may be slower communication. It's known as rapid fire chats, just sort of rapid fire real time communication. And the big option there right now is really discourse, because discourse is sort of the new take on forums. I should also say there's another big sort of big option there is spectrum. I'm not particularly a huge fan of spectrum, but obviously nothing against them. I just don't think it's right for the type of community that I'm trying to build. There's also old school type of forums like BB forum, whatever stuff, which in 2020, I don't know. And then things like Facebook groups. Okay. Let's talk about the pros and cons of slack and discord in the chat options because, as we mentioned, the forum base, they're indexable they're searchable, whatever and then chat options are faster real time but they're not indexable but in depth with slack and discord. In my mind, the pros of slack are just that it's an excellent product. It's well made, it has a lot of features, the chat features, the stuff in there is really super good the embeds all that stuff is really good. The cons would be cons would be for me something that is a pro. Yeah, threads. I hate threads. - -17 -00:10:23,190 --> 00:10:25,890 -Wes Bos: I hate threads so much. I'm glad you said that. It is a - -18 -00:10:26,970 --> 00:10:28,020 -Scott Tolinski: lack of anything, - -19 -00:10:28,040 --> 00:10:49,950 -Wes Bos: the UI is like I can if I'm in one thread, great. And I like the I guess the the flip side to not using threads also sucks because if we have two conversations going on at once, it's just jumbled, but like the UI Sox for threads and you get lost. And if there's a thread from like, two days ago, there's no way I'll see it, I realized there's a button on slack. But I never go back and check it. - -20 -00:10:50,250 --> 00:11:29,850 -Scott Tolinski: I have the hardest time finding like when I have a little number that says, Oh, you missed a message. I have the hardest time finding where that message is missing. I don't know if it's just me. I'm missing something in the interface. But either way. Yeah, threads are not a feature for me, like people say, Yeah, but discord doesn't have threads. Yeah. Good. Thank you. Thank you. And then the last you know, the other con for me is really the signup is a giant pain in the butt. It is just couldn't be any any more obtuse with the amount of logins you need to have. Yeah, how impossible it would be to have any sort of open signup? Yes, I get that there's things like slack. And you can throw that up on a site now. But yeah, that's that's largely it for me, - -21 -00:11:30,030 --> 00:12:51,780 -Wes Bos: man managing a slack. Well, I have like, what 30 35,000 people on my slack and managing that thing is hard, because like the UI freezes, cuz there's 35,000 people in it. And there's like these people that like, got the invite, but then like, never activated it. But then six months later, try to activate it, they get into this weird like, state where I can't like, like, you look for the invite, and it's not there. But then you try to invite them and it's like this person has already been invited. And like there's just like, all these bugs around managing people. And I it's I think that's just because it's that's not what it's for, right? It's meant to be for companies of hundreds of people, not not thousands. But yeah, it's it's frustrating. But the actual like community, I really like slack because it's you get that immediate immediacy people have it open. That's that's one thing is, I don't want to move to something else where people don't have the app open. The second custom thing people will like go to it when they're doing the tutorial. But then look, close it down. And if I want to be able to access people who've taken a specific course, or send a message to somebody who had a problem, and it's it two days later, or something like that, or sometimes I'll get an email and I'll say, Oh, I could I'll let me check if they're on slack. And the good thing about slack is that people are on it, and people have it open. Right, and you're able to get in there really quickly. - -22 -00:12:52,050 --> 00:15:37,890 -Scott Tolinski: Yeah, that is a one of the actually is one of the big things that I noticed when I was doing pros and cons. People would say, Well, I already have slack open for all of my team. So um, yeah, Slack, that's going to be the one that I think we should stick on. And that definitely is a thing. But to me, like, is that a good reason to stick on something that is inferior? Maybe? Sure. I don't know. I have, I think since joined enough discord communities in the past few months that I feel like I have discord open as much as slack now because I use it for enough of different different communities and different, you know, ways of chatting that to me it's become sort of that same sort of system. So I understand it's not the same for everybody. And a lot of people who haven't used discord before are going to feel really kind of weird with it. And you don't want to alienate anyone in your community. I didn't you know, it seems like I made that, that jump pretty rashly. But to be honest, it's something I've been contemplating for a really, really, really long time. So the next one, like we said, is Discord. There's open signups. You can have private rooms, that permission system is infinitely better. You can set varying different levels of roles and permissions to give people different access and whatever I found, there's some really cool stuff where you can stream within Discord. So you can stream yourself type, you know, doing vias code, live coding stuff within discord itself. That to me is all very exciting like that. We're slack on that one should a video chat, but it's not really made for broadcasting kind of stuff. There's also a lot of like just sort of general next gen slack features. It's like they took a lot of the ideas that you have in slack and up them up a little bit like your channels, right your channels are now organized into different groupings, and it seems way more organized in the per level permissions for each channel just seems a little bit more well thought out. It does seem like they took the ideas specifically ripped it off and then we're like, Alright, well can you do to make this one maybe a little bit more fun and a little bit more open? Some of the cons would be that less people have it maybe, I guess but that was something we talked about with slack but nowadays is It is becoming more and more popular, it is maybe a little bit more busy in the interface. I don't know if it really is it looks nice. One of the things that I don't like is that by default, while I simultaneously like and don't like this, by default, you're you're subscribed to all of the channels. So when I create a level up tutorials, one, you are automatically subscribed to fitness and gaming and music and sports and parenting and whatever. And it's not like you have to go hunt those out. So it's good that you don't have to go hunt and find them to know that they even exist. But it's sort of annoying if you aren't really interested in getting updates to some of those, and you're seeing them. - -23 -00:15:38,160 --> 00:16:08,790 -Wes Bos: What about pricing? So one thing with slack is that it's a they charge you based on active people. So I'm just looking at my stats. Now there's 42,000 people in mine, but only 1800 of those are active right in the last week, only 80 and 100 people have actually used the use the chatroom that those other people are just they took a course and they haven't haven't jumped back into it just for for whatever reason. So even at that, though, that's $16,000 a month if I were to pay for it. Wow. So like, what about discord? - -24 -00:16:09,000 --> 00:17:39,720 -Scott Tolinski: Yeah, so there's just really interesting. In my mind, it's like a community focused pricing. So sure you can you can pay a bunch and unlock extra features. But that's really what it is. It's just extra features for the server. So I don't know, I haven't spent enough time with this to really know how Searching far back goes. But it doesn't look like any of these extra features are really based around how many messages are saved. So I still need to figure out, like in slack is all about how many messages and back in history you have and things like that and those extra little things. But this there's like different levels to your server level one perks include an additional 15 server emojis, 120 128 kbps, audio audio quality, and the animated server icon, custom server invite background 720 60 FPS go live streams. And then there's a level two and the level three. And the cool thing is is that members of your community who are subscribing to discord already can gift your server, what are called, what are these called boosts, they can gift your server boosts, and it will boost your server adding to these features. So for instance, I had two really amazing community members give my server two boosts already in it opened up the level one perks for me. And level up tutorials hasn't paid anything for that now we are going to be boosting the server ourselves, just to open up some of these features for everybody. But it seems like a really interesting pay model. - -25 -00:17:39,750 --> 00:17:44,700 -Wes Bos: Yeah, it's hundred bucks a year and it doesn't seem like is limited by how many people are on it. Right? - -26 -00:17:44,880 --> 00:17:47,550 -Scott Tolinski: I'm not paying anything for it. Oh, you mean for level, I'm - -27 -00:17:47,550 --> 00:17:58,170 -Wes Bos: looking like if you want everything, everything the most you could spend is 100 bucks a year, sure, or 10 bucks a month. That's amazing. Like, that's great. Like, if you could do that, - -28 -00:17:58,340 --> 00:18:50,910 -Scott Tolinski: I'm still diving in. And to be entirely honest, I'm still very much of a noob of this thing. But in my time on it managing this already. I'm just really, really into it. I'm very excited about it. So cool. We have a syntax room there too. If you want to jump on and talk about syntax, there is a syntax room within the level up discord, I will share that in the show notes. Alright, let's talk about foreign based ones. Because these are really interesting options that a lot of people ask me about, why didn't you go with a foreign based solution? They're searchable. They're indexable, all that stuff that you'd want? Yeah, within maybe some things. And this is a maybe a tougher one. Because I just don't I feel like a foreign based situation is more difficult to moderate. That stuff is there people start a new thread when they don't need to chat. It's just so communicative or whatever, there's less work that I have to do to assign somebody to moderate it. - -29 -00:18:51,150 --> 00:20:10,380 -Wes Bos: Yeah, there's a lot of work in moderating a forum. And also you you don't get that immediacy, every time I'm put with a form. I'm just like, should I really post this? Or should I just wrap it, you know, like, is this worthy of posting? And that's what that's what spectrum I think was trying to solve the fact that tech forums and tech chat, both are missing something because I do get back messages on my slack. Don't ask me how I got that. But you like it sucks. It's not like Google searchable. And I would love to have those things show up in Google's results, because like, Who wouldn't want the search engine juice of 40,000? people posting? Right? Yes, right. And things like that. Right. And a spectrum was it was kind of doing that. So they're like kind of forum meets chat. And they were working really hard at that. And it looks or it doesn't look like it happened GitHub bottom. And it seems like the development has sort of stopped. And I've asked the developers behind it. I'm like, What are you doing at GitHub because I so badly need the perfect solution to my problem. And they say we can't tell you so Is that I was working on the holy grail of chat meets GitHub issues meets form software. I hope. So. - -30 -00:20:10,710 --> 00:21:11,570 -Scott Tolinski: Let me tell you, though, I really hope there's nothing against anybody who worked on spectrum because it's an excellent product for what it does. But I really do not want to have a spectrum for a community. I just don't like it like, again, nothing against anybody. It's just not for me, the notifications are a total mess. I get a good Ziad emails from spectrum no matter how many times I told them, I don't want you to send me an email, I will still get an email from spectrum. I had to put them on my spam list, because it's just like theirs. It was totally impossible to end the spam coming from spectrum. And also, I just didn't find it very navigatable. It's really hard to find. Yeah, I think there's sort of the general chat, I just found it very difficult to parse and find it, whatever. It feels too impersonal. But impersonal, impersonal, yes. feels too impersonal. While not necessarily like there's the less immediacy that you get from a forum, but at the same time, none of that. I don't know, I just don't like and I'm sorry. - -31 -00:21:11,700 --> 00:21:41,360 -Wes Bos: So here A case in point. I very heavily use next and Apollo on slack. I was in there all the time chatting people meeting people. And how many times have I posted to next Apollo since they moved to spectrum? Never? I don't know why. But it just it just something's missing there. And I'm not there. And maybe it's because they don't have the chat open? Or maybe it's because I feel like there's nobody here right now, that will actually be able to help me. So maybe I'll just post it on Twitter instead. - -32 -00:21:41,570 --> 00:22:05,730 -Scott Tolinski: It doesn't feel like a community. It feels like, Hey, this is like a crappy or GitHub issue where it's not tied to actual code. Mm hmm. Yeah, that's just my thoughts again, and nothing against is an excellent product, but it's just not for me. And there's also like the old school forums option, which, you know, all that software is probably pretty janky. At this point, you'd have to imagine it's an easy way to get hacked. There's probably like a billion people looking to exploit that. - -33 -00:22:05,940 --> 00:22:19,590 -Wes Bos: Yeah, there's some I don't know, I don't know if that's necessarily true. It's it's still actively being developed. And I'm sure and each one dirty issues. Well, like, I think probably the one that you're talking about is like, what phpbb or vbulletin? - -34 -00:22:19,740 --> 00:22:30,750 -Scott Tolinski: Yeah, phpbb is still actively being developed, because their website does not look like Oh, really? I'm so sorry. phpbb Oh, no, this look like yeah, - -35 -00:22:30,750 --> 00:22:43,260 -Wes Bos: there's there's some nice ones, and there's no DB that I'm sorry, ah, being developed. But like, again, though, the reasons why we don't want a form is because of it doesn't have that immediacy. That chat does. - -36 -00:22:43,470 --> 00:23:17,280 -Scott Tolinski: Yeah. So again, I'm I guess, they're still actively being developed. I take back what I say, I'm still not going to use it. Yeah. Next thing is the Facebook groups, which, you know, Facebook groups can get absolutely massive. There are some hugely massive Facebook groups. I'm not going to use it because there's cluesive to Facebook users. And in my experience, Facebook is becoming a bit of a ghost town. And just, there are large groups, but it is it's not inclusive enough for me, right, you got to have Facebook to get in there. And yeah, that that comes with a lot of stuff. - -37 -00:23:17,340 --> 00:23:59,400 -Wes Bos: It's Facebook, you just have to say that. I'm part of a couple, like there's really good WordPress groups on there. I'm part of a couple for LTE modems and things like that. And anytime you have a very obscure question about those very obscure modem, somebody will answer you within 20 minutes. And it's amazing because like that the media is there. And you can see like the actual people behind it, but after I don't know, after three or four replies, everything gets lost, you're interested in these tiny little replies. There's no formatting for code or anything like that. And it's not indexable on Google, which sucks. So like it's effectively gone. - -38 -00:23:59,460 --> 00:24:03,690 -Scott Tolinski: So that's the benefit. Yeah, that's Yeah, a bit of a forum. Right? Well, - -39 -00:24:03,780 --> 00:24:44,370 -Wes Bos: it's like, I don't want to put my stuff on Facebook. Like the last thing I want to do is be spending any more time on Facebook than I have to So yeah, I sort of mourn when these amazing groups, our Facebook groups, because of how much amazing information. Like if you if you think about like, if you search for something about like a car or anything like that, you'll often find posts from like a forum from 15 years ago with some photo bucket images, by the way, which got next. Yeah. And I was like, How amazing is that? This has been preserved. Oh, you think Facebook is gonna preserve the post I made last week about them? modem no way that's that's effectively thrown in the garbage and, - -40 -00:24:44,490 --> 00:24:46,470 -Scott Tolinski: and Will anybody be able to find it too? - -41 -00:24:46,500 --> 00:24:50,310 -Wes Bos: Yeah. Not even in the spirit of the internet. So yeah, Facebook group - -42 -00:24:50,310 --> 00:24:51,900 -Unknown: talk. Yeah, that is - -43 -00:24:51,900 --> 00:25:42,360 -Scott Tolinski: a bit that is the thing that you don't think about a ton is really just that those Google juice that comes from that stuff. It really, really can help Another option there is Reddit. Reddit is a good option. Because you get the forum type thing. There is really good indexing, but Reddit is can become a bit of a toxic hellhole. So yeah, that's a whole thing too. Yeah, I spent I spent a decent amount of time on Reddit, at least in certain Reddit that are moderated. Well, for instance, Sean swix, swix. Yeah, he moderates the React.js. One, and he does a great job, and therefore, because he does a great job, and because he set up that community to be so nice. It feels different than a lot of other Reddit communities can sometimes feel where everybody just blames each other until infinity. - -44 -00:25:42,450 --> 00:26:36,660 -Wes Bos: Yeah, I think if you create your own community on Reddit, you're not necessarily going to be inviting in the angry people. You can certainly just boot them. It's all about moderation. Yeah, I nabbed the RMS boss, which you should probably grab our level up tuts just in case someone were to grab it. And like kind of I've been thinking like that. I kind of like read it. Like I often find myself searching for something. And I'll just append read it on the end. Oh, likewise, yeah. What does that mean? That appending it and by appending it It means like, give me a real true people's insights. Right? Like, don't give me some like forum software where it's just a reply from the people who own it saying like, please contact us or something like that, like, real people are on Reddit, so I don't know. I'm definitely still considering do it using a Reddit, but I don't think that it is it is it though. - -45 -00:26:36,660 --> 00:26:45,840 -Scott Tolinski: So we'll see. Yeah, I in the chat on Reddit sucks. I don't know anybody who's using that. But yeah, because they exist, but it's not very good. - -46 -00:26:45,930 --> 00:27:01,020 -Wes Bos: The chat sucks. Yeah. It's funny. Like, I think like discord is the chat of Reddit. Like I think like Reddit probably missing a huge opportunity there. Yeah, we're like they could have been the read or maybe they would even buy them at some point, you know? Yeah. Right. Yeah. Right. That - -47 -00:27:01,020 --> 00:27:07,890 -Scott Tolinski: would have been the perfect I think connection there. Because that's where I've mostly heard about discord more than anywhere elses feel Reddit? - -48 -00:27:07,890 --> 00:27:08,490 -Unknown: I think. - -49 -00:27:08,549 --> 00:27:12,900 -Wes Bos: Yeah. It's, it's funny how people have to go off of Reddit to get more immediacy. - -50 -00:27:13,170 --> 00:28:05,550 -Scott Tolinski: Yeah. Right, which is like Reddit, if you you, you refresh the new incoming post, there's always something new. That's pretty immediate. But yeah, it's not quite at that level of immediacy that you get from something like this. So yeah, very interesting. I think there's some other options, too, that you could consider communities such as, like a comment systems in anything like YouTube comments, systems in YouTube could largely be seen as a community, but it's largely sort of like a one way community, somebody's like yelling at you via video. And then everybody else is just sort of chatting at the bottom and flaming each other and being awful. And that doesn't really feel like a community. To me, I think that some people would say that is, and maybe the people who are excellent at tending in video, and that kind of way could do it really well. But as somebody who's spent a lot of time on YouTube, I just don't i don't see that as necessarily being a community that seems like a dictator and a bunch of underlings or something. - -51 -00:28:05,700 --> 00:28:59,010 -Wes Bos: Yeah. One more thing I should say is that one kind of thing I'm working on right now is notes, like community source notes for each video. So like, often, sometimes there'll be like, a little mistake in the video, and someone will jump into the chat. And there'll be like, three people immediate being like, oh, the fixes this and that I have to go back and update the video. But like, like, what if the notes were immediately underneath the video that said, like, oh, if you accidentally type this, or this is wrong, or just like little things that you get tripped up in a video, there's no build immediately below it. So that's something that's almost done. I'm really excited about it. Because like, also, I'm, I often watch stuff, or like a YouTube video, and I'll hit a bump. And then I'll just go in the comments and write what the solution was, right? Like, that's the first thing you go for. So like, it would be cool to have community notes as well. And so they're like markdown based, they'll be on GitHub, so people can edit them if they want to add something themselves. So I'm excited about that. - -52 -00:28:59,279 --> 00:30:17,190 -Scott Tolinski: Yeah, and we, we added comments, to level up tutorials for pros, and BI. The thing I wrestled with whether or not that should be available to everybody, but again, that's what we largely do is have community source notes if people notice something that they ran into a bug with a version, and then we added the ability to pin the comments. I mean, it's their own comment system, largely written by Eric Sartorius on our team, and because of that, we can add any feature we want to it we want to add pinning. Okay, pinnings in there it is one you know, that's great. It gives you that sort of freedom, but again, it's a little bit more of a slog to get it going. So that said, I'm on Discord. Currently I don't, I was on slack forever and ever and ever. And so I don't intend on seeing the community move at any given point in the near future here. So don't feel like I'm going to be moving it if you want to check a chat about syntax episodes. We have all sorts of stuff on here. This is sorry, a general little advertisement for my slack community. But we have like code help CSS, JavaScript, react, Meteor, whatever. Design help design, inspiration musicians, parenting, sports, gaming, fitness, all that fun stuff. So if that sounds like you want the link in the descriptions, I just wanted to chat a little bit about these communities. My head's definitely been in this space majorly. - -53 -00:30:17,550 --> 00:30:24,900 -Wes Bos: Well. All right. I think that's it. Thanks for tuning in and we will catch you on Wednesday. He's, please - -54 -00:30:26,820 --> 00:30:36,600 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax218.srt b/transcripts/Syntax218.srt deleted file mode 100644 index 47d2dc262..000000000 --- a/transcripts/Syntax218.srt +++ /dev/null @@ -1,548 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bos. - -2 -00:00:10,589 --> 00:00:16,680 -Wes Bos: I hope you're hungry. A lot of great intro - -3 -00:00:16,710 --> 00:00:27,929 -Scott Tolinski: it is we we briefly talked about potentially having some sort of a new theme or intro for these episodes. So I'm really glad that you chose to do that, especially without telling me makes it even better. - -4 -00:00:30,030 --> 00:00:44,970 -Wes Bos: So today, we have a potluck episode, which is you submit the questions, we answer them for you. If you ever have a question you'd like us to answer on a potluck, go to syntax.fm, click the Ask a potluck question button and put your text in the box, submit it, and we'll answer them maybe. - -5 -00:00:45,240 --> 00:00:49,500 -Scott Tolinski: Yeah, we get a lot of questions. So we really try. - -6 -00:00:49,530 --> 00:00:53,729 -Wes Bos: Yeah, but a lot of them are not very good. So keep keep submitting your good ones. - -7 -00:00:53,729 --> 00:00:56,880 -Scott Tolinski: But if we don't answer your systems, I mean, yours wasn't good. Yeah, that's - -8 -00:00:56,880 --> 00:01:24,300 -Wes Bos: true. If we don't if we don't answer it, it might be because we've answered it in a previous potluck, or because we just don't want to just jokey it keeps admitting them. We love them. Today, we are sponsored by two awesome companies. First one is dot tech domains. And the second one is Netlify. Funny enough, both of the sponsors I used in my latest project uses dot tech and we will talk about both of these companies partway through the episode. - -9 -00:01:24,510 --> 00:01:30,810 -Scott Tolinski: So Mr. solinsky If you haven't listened to that music tech episode, go put that one on there was a really good episode. - -10 -00:01:30,840 --> 00:01:34,050 -Wes Bos: Yeah, yeah. How you doing today? Mr. szalinski? - -11 -00:01:34,050 --> 00:01:34,590 -Unknown: Sorry, you - -12 -00:01:34,590 --> 00:02:02,310 -Scott Tolinski: can tell by my timing things are you know, they're just how they are when you're you know, paranoid i i was uh, joking on Twitter and with with Courtney, that when we go to the coffee shop, I'm gonna ask for a just a pitcher for the table. It's give me a picture. Let's get a couple fish bowls of cold brew. And she was like, Can you just get them to bring us the cake. So you know, when this is how it is? We're just we're living. We're living. We're loving all that stuff. So yeah. - -13 -00:02:02,340 --> 00:02:12,660 -Wes Bos: When when I was in high school, the like, cool place for suburban kids to hang out was this restaurant. It's Canadian restaurant called Boston Pizza. You don't have that down there, dear. - -14 -00:02:12,930 --> 00:02:17,819 -Scott Tolinski: Um, I don't know we have Boston Market. No, no, totally different. - -15 -00:02:17,820 --> 00:02:32,780 -Wes Bos: So Boston Pizza is a Canadian pizza chain. And it's like the place to go drink when you're in high school. And they had these like fish bowls, where you just get like a big thing of Kool Aid and vodka and you drink it out of a fishbowl that reminded me of that. - -16 -00:02:32,940 --> 00:02:44,699 -Scott Tolinski: Oh, yeah, that was I mean, okay. Yeah, fish bowls were always a definitely thing. Boston Pizza though. Is pasta known for their pizza. I don't Boston people get. I don't know is Boston. No, I mean, no, no. Oh, no. - -17 -00:02:44,699 --> 00:02:47,069 -Wes Bos: It's never known. And - -18 -00:02:47,100 --> 00:02:56,580 -Scott Tolinski: there's California apparently I don't think California really is but so I'm gonna anger people from any of these cities. You get me because Detroit pizza is the best and you will know it. - -19 -00:02:58,650 --> 00:05:06,420 -Wes Bos: Boston Pizza is not the best pizza, the restaurant, and I can't speak to the actual city's pizza. But anyways, let's get into our first question. First question we have here is from watering wolf. This is actually a bit of a big question. So buckle up. He's gotten us. I'm a huge fan of the show. Thank you so much. In March 2019, I left a creative agency that I've been with for two years to pursue freelance. around October of last year, I started to get the feeling that freelance wasn't for me. So maybe six, eight months on freelance and SAS not really for me, I got pretty lonely. I really started missing collaborating with my colleagues face to face. Fast forward to early January, I was offered a lead dev job at a mid sized company and I took it, it is exactly the work I've always been wanting to do building apps in react that will end up needing to scale. The pay is really solid and the benefits are great. And I'm going to learn a ton. So so far, so good. I've only been at the job for a week and I really hate it. Oh, I consider myself to be pretty intuitive. And I feel like I just don't fit in and I see many red flags. Everyone is perfectly nice. And their back end developers are very talented, but there is no process in place regarding properly building applications or collaborating between designers and developers. There also isn't any real excitement around on what we are building and the thinking is somewhat antiquated. I'm fun positive energy person. So far everyone has been pretty blah, huh? I've been miserable this whole week and super disheartened. What should I do? Do I suck it up for a while and start looking for something else potentially taking a pay cut? That's that's the scariest thing of all is a well paying job. Ah, yeah. And moving back into doing web dev as opposed to building apps into work for another creative inch agency with people that are more my jam. Feeling a little frustrated little was a little lost. I could use some words of wisdom from El Toro logo to Lynskey and Barracuda boss People so much for being mentors. Wow. Yeah, that's a tough one. Right. So first of all, congrats, - -20 -00:05:06,480 --> 00:05:08,370 -Scott Tolinski: I've personal experience to draw from this. - -21 -00:05:08,510 --> 00:06:28,200 -Wes Bos: Yeah. Um, okay, so first of all a week, I don't think there's enough time, right? Like, I think that you probably can get vibes from people. And I've certainly done freelance jobs, where I go into a company and you get those vibes immediately from the people that you're working with. So I would push it out a little bit longer what you said, You said that you are a lead dev at a midsize company. So the fact that you are a lead dev of it sounds like you're like the lead of doing apps. Like maybe there is some space to change things right? Like not necessarily, this can't always happen. But in a lot of cases, you can be the change that that company needs to see. And it certainly you'll be, you'll be hit with some opposition, because you're the new guy that's been there for for a week. And these other people have maybe a little bit jaded or maybe a little bit just used to doing what they they've been doing for so long. But if you're the lead of it, maybe change things up, maybe put some new processes in place, new tooling, things like that. So I would definitely see that out because it's work that you like it's good pay, it's just seems that the culture is a little bit different. And I think that that could potentially be changed. And then I don't know, maybe in six months, if it's not panning out, I certainly wouldn't think that it'd be a bad idea to to keep looking and keep your your ear out for something. What do you think? Yeah, I - -22 -00:06:28,260 --> 00:10:29,270 -Scott Tolinski: mean, I think you're dead on in a lot of that because the more I've been thinking about this, I have more and more personal experience to draw from you. Yeah. You mentioned as being like a lead and being able to make that change I'll never forget I one of my first jobs was, I worked as a projectionist. Essentially it was a an audio technician or video technician or whatever. But I was a projectionist for the medical school at the University of Michigan. And there was a really interesting culture there, everyone had been there for a very, very, very long time, like 30 years, right. And they were just the way that they did things. And I came in on my very first week, and I walked into this one closet, and the closet was an absolute mess. It looked like their stuff on the farm, there was just no organization, it was just the absolute biggest nightmare you've ever seen in your entire life. And so I had nothing to do my first week. And I clean the closet. Not only did I like actually scrub it, clean it like a you know, like making a nice and clean, clean, but I organized the life out of it in the best possible way. So you could actually walk in and find things. And I did. So to respect even the non system that was in place. And what happened, I got absolutely destroyed by an older gentleman who had worked there for his whole life. And it's like, what are you doing touching my closet? I'm like, I just saved your closet. And like, my boss came in and was like, Listen, you did the right thing, like, do not like you're going to get some resistance when you're trying to improve things. So if you have the power to work on and improve things, you might want to go for it. You might alienate yourself, right? You got to be a little bit careful about that. But again, like you like Wes said, if you have that title, you might have the ability to change things. When I got my first senior role, I really changed a lot of the process in terms of adding better get workflows and things like that that weren't, you know, they were they were things we really wanted to do. But given the opportunity, now I could do it. Another little piece I have to draw on is a mentor of mine, he got a job of his dreams in Chicago, which is like four hours from where we lived, right? So it's a decent, great pizza. Right? Great beats. No, I don't I'm not a big fan of Chicago pizza, sorry. But he picked up and they were planning on moving their whole family there. They had, he was commuting on the weeks and then just staying in a place temporarily while they look for a house and he had worked at this job. And basically was ready to pick up everything and move for this better paying what he thought was like a more advanced job. And what he found was that the managers didn't understand dev as much as he thought they did. Although the work that they were putting out, looked nice and was creative. They didn't understand Deaf process. They didn't understand how to work with the developer. They were giving him a bunch of awful tasks. I mean, he's a smart, excellent developer, and he just could not do it. He ended up quitting just saying no, screw it, come back. And then Luckily, he did that before they, you know, move their whole family out there. But the whole thing is, is that if it's not right, it's not right. And you don't have to stick it out. If you can come back to whatever you're doing before. Or if you can look for another job. I don't know if I would jump off of the ship before I had another ship pulled up that you could hop on to right. So if if it's really not feeling right, even right now, if it's not feeling right, apply, just start applying for stuff just apply and if they ask you in an interview, why you'd apply for things just say this, this place really isn't right for me. I don't want to like rag on the people who work there. It's just not necessarily a good fit with the way that I like to work. And people are reasonable, though, understand, so maybe just start applying and who knows, maybe another job will come up. And who knows, you might have to take a tiny little pay bump. But also maybe you might find a really great job. So just start looking if even if you know if it's not the right field just are looking and you don't have to accept another job. If an offer comes along, and your current one gets better. There's no harm in looking there. So that's my thoughts. Really - -23 -00:10:29,539 --> 00:10:31,020 -Wes Bos: awesome. Y'all grab the next question. - -24 -00:10:31,139 --> 00:11:14,669 -Scott Tolinski: Yeah. This next question is from Nicholas Graham. And he asks, Does syntax have a discord or slack community to collaborate on topics? Graham? I'm glad you asked it. The reason why I left it and may even use this question at all is just because the episode that came out on Monday was this. So Graham had asked this question before we had done that episode. So we just wanted to give a quick shout out. There is a slack community for people who have purchased Wess courses. There's a discord community, or level up tutorials and lesson I just created a Reddit community for listeners of syntax. So you go ahead and sign up for that Reddit and we can you can chat about the episodes and or you can join my discord and chat about the episodes and the syntax chat room there. But that's that's those are the options right now. - -25 -00:11:14,939 --> 00:11:19,320 -Wes Bos: Yeah, it's a reddit.com forward slash our forward slash syntax FM, - -26 -00:11:19,499 --> 00:11:23,520 -Scott Tolinski: or syntax FM dot Reddit Comm. I don't know if you knew that. - -27 -00:11:23,639 --> 00:11:24,600 -Wes Bos: Really? No. - -28 -00:11:24,629 --> 00:11:27,419 -Scott Tolinski: Yeah. Syntax fm.reddit.com. - -29 -00:11:27,509 --> 00:11:30,270 -Wes Bos: It makes sense why they they call it a subreddit. - -30 -00:11:30,299 --> 00:11:32,669 -Scott Tolinski: Yep. Yes. Oh, - -31 -00:11:33,809 --> 00:11:40,470 -Wes Bos: wow. Okay, that's awesome. So please go ahead and post anything you want there? Well, maybe not anything. But - -32 -00:11:40,500 --> 00:11:42,419 -Scott Tolinski: yeah, don't post anything. That's not I - -33 -00:11:42,419 --> 00:11:54,299 -Wes Bos: think it'd be really cool to just see what it looks like. I know there's a lot of people that aren't on Twitter, we certainly will still use our Twitter but I just spent all this time uploading a banner and check it out. - -34 -00:11:54,720 --> 00:11:57,899 -Scott Tolinski: This time, uploading a banner. That's great. - -35 -00:11:58,200 --> 00:12:00,750 -Wes Bos: All right. Next question. From rockin rollin ski. - -36 -00:12:00,779 --> 00:12:14,700 -Scott Tolinski: I wanna I want to know, this person knows that my dad's name is actually rock. And like, a lot of his nicknames would be like involving rock and roll, like his friends would be like a rock and roll like, we just named his rock. So this is funny rock and rollin ski. Hey, - -37 -00:12:14,909 --> 00:12:28,830 -Wes Bos: what's up? So Scott, dad asked, What is one thing that really it really annoys you about JavaScript? It can be things like missing proper module imports. What does that mean missing proper module imports? Why is it missing that? - -38 -00:12:29,100 --> 00:12:40,049 -Scott Tolinski: If you are rockin rollin ski, since you didn't use your real name? I know it's not my dad, who says question. Hit us up on Twitter about what this what you're referring to here because we're we're interested? - -39 -00:12:40,169 --> 00:13:33,840 -Wes Bos: Yeah. Anyways, what really noisy about JavaScript. I thought about this like not a lot like to I'm not one of those people that's always just constantly complaining about JavaScript. But there's one thing that does annoy me every time I import a module, it's the fact that if you're typing it, you import what it's called first, and then where it's from seconds. So import render from react DOM. And I wish it was the other way around because of better auto completion. So if it was from react Dom import, and then it would autocomplete all of the exports in that thing, and there are like things out there. But the sheer fact of the way that you write it first doesn't lend itself to good auto completion. Whereas if you gave it the file name first, and then what you want to import from there, that would be much better, I think. Interesting. - -40 -00:13:34,350 --> 00:14:23,520 -Scott Tolinski: Yeah. So this was when I had my initial reaction to this question was the thing I like least about JavaScript is when you tell, like Java, or C developers that you write JavaScript, they're like, okay, because they think you're they think what you're doing is, you know, writing, you know, importing 1000, jQuery plugins, to whatever you're doing to do a lightbox or something. Like, that's not really what we're doing anymore. in JavaScript, there's so much more there. But that's not a problem with the language itself. Obviously, my answer to this for what's the thing that you would like, that you could change about the language itself, and this might I don't know if this is controversial at all, but this is this is something that I really like, I personally wish there was a an official, like required formatic What did they call that? - -41 -00:14:24,450 --> 00:14:27,750 -Wes Bos: Like a word enforce. sannidhi enforced? - -42 -00:14:27,960 --> 00:15:02,340 -Scott Tolinski: Yeah, yeah. Right. Well, you know, you could think of something like Python, right? Where if you miss the actual way that Python is typed, it breaks. And I really like that I mean, I sure prettier has come in and been like, Okay, this is how it formats it but they're still just, you know, when you open a JavaScript file that somebody else wrote, you sort of don't know what you're getting in terms of formatting regardless of whatever and they have to opt into prettier. I would really love it personally. If there was just a this is the specific way you have to write it. I understand why it's not but just Nice little thing that I would prefer personally. - -43 -00:15:02,490 --> 00:15:07,260 -Wes Bos: Yeah, yeah, they just force you to write it in a specific manner. I wouldn't mind that. Yeah. - -44 -00:15:07,830 --> 00:16:17,429 -Scott Tolinski: Next question is from Ivan the great or the terrible or any. There's lots of Ivan's shout out to be boy, Ivan, you don't see niza 90s b boy. Okay, so this question is from Have you tried fauna db fauna.com. The guys from webflow are suggesting it. So I have a neat little note here. That's our tagline says a database built for serverless featuring a native graph qL, a full featured database to your apps in minutes. Access effortlessly from the browser from mobile. Never worry about data correctness, capacity, redundancy, latency, and availability. So fauna DB apparently is going to do everything in the world for you. And it's sort of built around this whole serverless thing. So to answer Ivan's question, I have not tried fauna, I have looked at fauna I have opened their documentation page about a couple times in the past. But I haven't actually gotten any feet on the floor with this one just yet. It's an interesting looking thing. But I don't really know a ton about it. - -45 -00:16:17,490 --> 00:16:54,299 -Wes Bos: It sounds pretty cool. They actually tried to sponsor the podcast, but where are our spots? So here's your free plug. Fanta. fanta.com. Yeah, Ford slash syntax. Everybody, everybody go to font.com Ford slash syntax. And then therefore, all fours are going to spike it like what happened? Anyways, um, it looks like they it's like a database, but also has an API in graph qL, as well as another REST API. Oh, seems cool. I certainly a lot of people have been asking me about it over the last like year, or a year and a half. I don't know anybody that's running apps on it. But it certainly seems pretty nifty. - -46 -00:16:54,750 --> 00:18:06,450 -Scott Tolinski: Yeah. And so it's, it's a hosted database, right? You're not hosting it yourself? I don't know. Can you host it yourself? It seems like there's this world right now, where the lines are sort of becoming blurred between the database itself. And the management of Yeah, database, you could things like has Syrah or any of these new sort of back end CMS 's that are coming out, where instead of even thinking about database schemas, you're just thinking about data and how it's stored. In me personally, I really like that, I like that I'm not having to think about the technicals and somebody is going to worry about how the details of the performance for the database work and things like that. So I don't know I'm going to give a fun a try. It's a matter of when I'm going to find that time. But I'm definitely going to give it a try. I just think there is probably a lot of competition in the space around hosted data whether that is a database a data as a service, these services like fauna, there's what would there's there's a lot of stuff popping up with graph qL what's the Neo for? Yeah, Nico. What is that? Is that what extra is Neo for j? Uh, - -47 -00:18:06,450 --> 00:18:53,460 -Wes Bos: well, Neo for j is a graph platform, but it's not graph QL. They're, they're the ones that have have totally gone in a separate direction, right and done their own thing that graph qL, which is cool, because it's always good to see like people questioning best practices. That's how we got react. Cool like that. My only like, reservation is that like, if you ever wanted to take this thing yourself, certainly get your data out. But we all remember when parks shut down, right? But then again, like I'll use Firebase in the in a hot tip, I'll use Firebase really quickly. So I'm not against these sort of hosted cloud databases for you just have to think about like, no, are they going to be around forever? And can I get my data out? Right. So yeah, it's cool. Yeah, those - -48 -00:18:53,460 --> 00:19:12,900 -Scott Tolinski: are all big concerns. What? Who's using it? For what? And how easy? Is it for them? To get their data out? At the end of the day? You know, like, if it's, if it's being used by Google and Google would need to get their data out, then they're going to make it so you need to, you know, like, what are what are those parameters around that? Definitely things to think about? - -49 -00:19:13,469 --> 00:20:22,820 -Wes Bos: Next one is from Eric B. What are your thoughts on including tutorial projects in a portfolio? For example, putting the CIC Fitz website from West is advanced react course in the portfolio? I'm relatively new to react and have a couple of my own projects, but a bunch of projects from following the course. Yeah, this is this is a good question. So first of all, is it allowed? Absolutely do whatever you want with the projects you do in my courses? Should you pass it off as your own is another question. So I think what I see most is that people build their own thing. It's not necessarily the exact app that we build, but they say like, Alright, I'm going to take the ideas of auth and users and items and relational data and maps and I'm going to make my own thing that is sort of like that. Absolutely go for that. If you're just putting the finished product of following the tutorial in your portfolio, then I think you should probably mark that as like, not for my own, like, I don't care what you do, but just from somebody looking at your portfolio, they should know that you didn't whip up this thing from scratch. But you did. I sort of follow up tutorial along the way. I think that's where I'm at with it. What about you? - -50 -00:20:23,220 --> 00:21:11,700 -Scott Tolinski: Yeah, that's a tough one. Because, again, a lot of the challenges that we face in programming are those of how do you get around this issue that you've encountered, or this problem that you're trying to solve? And really, what things and a portfolio to me should be is, did you solve these problems that prove to me that you're capable of solving problems in the future? And if you're following along to some sort of an example, right, that's maybe paint by numbers? Are you really solving these problems yourself? Even if the tutorial creator, like you and I has left in some issues to help you understand how to solve problems? Are you still solving those problems yourself? Did it display that you had some sort of thought process behind it? Because, - -51 -00:21:11,700 --> 00:21:12,420 -Unknown: okay, - -52 -00:21:12,420 --> 00:22:27,780 -Scott Tolinski: here's the deal. If you're applying for a job, that's mostly CSS and react stuff, maybe whatever, just some basic JavaScript, or maybe you're just doing CSS, right, let's just say you're just doing CSS. And then you took a tutorial that was maybe Wes Boses react tutorial, and you flipped it by making it your own custom interface that to me solves all those problems, right? It shows that you, you thought about these custom interfaces, and you thought about how to solve those things. And you didn't just paint by the number. So it to me, it's more about how you flip it for the things that interviewer would be looking for, I'm not going to say that, like, tutorial content is toxic to do a in your portfolio, it definitely not the case, definitely usable. But it has to illustrate that you solve those problems, and that you understood why they were problems. Let's say you need to get some eyes on your project. Well, you're going to need a domain for that project, you're going to need an entranceway, sort of the the the Fourier of your project is the domain. I like to think about it that way. And you're gonna want a fancy, cool domain. And that's why we have dot tech domain sponsoring us today. With a little bit more about that tech. Yes, is the man himself, Wes Bos, - -53 -00:22:28,230 --> 00:23:57,750 -Wes Bos: the tech tech guy, you can call me Actually, I think Leo Laporte has that. So don't call me the tech guy. Anyways, so.tech.te ch is a new TLD top level domain that you can register your own, I actually went and got uses dot tech. And I have I got West dot tech, which I don't have anything up there just yet. But I got West tech and uses that uses tech, we did an episode on a couple like a week or two ago, which is really cool. And we just sort of detailed everything that we use on there. And the domain name came from dot tech, all kinds of brands, CES, Viacom, Intel have all migrated to dot tech. And it's perfect for representing your brand due to its affinity and inherent meaning. So it's pretty cool. I want you to check out uses dot tech, which is the website that I built with my dot tech domain name. And I want to encourage you to check is your name dot tech available? Whoo, if so, you should grab it and use the coupon code syntax 2020 you get 90% off one five and 10 year dot tech domain names 10 year domain name talk about locking it in. Awesome. So go to go dot tech forward slash syntax 2020 and use the coupon code syntax 2020 to grab your dot tech domain name thanks to .TECH for sponsoring. - -54 -00:23:57,750 --> 00:23:58,950 -Unknown: All right, next - -55 -00:23:58,950 --> 00:24:13,830 -Scott Tolinski: question is from cam Killa cam. He asks a site you're maintaining is hacked. It's been hacked. What's his name? Elliot? Alderson is that from Mr. Robot is that his name? Mr. Robot has come - -56 -00:24:14,040 --> 00:24:19,080 -Wes Bos: in don't do movie references with me Scott. We've went over this. That's a TV show. - -57 -00:24:19,200 --> 00:26:01,860 -Scott Tolinski: You know, Landon calls the TV shows movies, Landon's. Like I want to watch the Mickey movie you're like that's and this is Wes right here. Basically the same thing. So how do you fix if if Mr. Robot has it has jumped in there and Hector Hector box here. What do you do? Well, this is a tough one there. So I haven't necessarily been hacked in any sort of ways. But I have had a client who been like, my site's been hacked and we love it. We FTP in their server. And the first thing we noticed was a billion PHP files that we did not put there. And actually, it wasn't even something a project that we had done. So client that we had taken over, but there was billion PHP files in there. And who knows what the heck they were doing? To be honest, I have no idea. And I didn't really care to find out, here's what I did. First thing is change all of the credentials, ASAP, change all of them and make them as superduper, secure add to fa, where you can just go ham on the login security there. Then next thing, actually, no, I, well, you got to kind of do all this at once. You got to get rid of all their stuff. Because if they have a backdoor in there, yeah, to get your keys and stuff, maybe change a lot of those passwords that aren't stored in any particular file. That's actually tough. Just start deleting that stuff and changing passwords all at once. Go crazy. And then I guess, maybe try to figure out what they did. To be honest, I'm not in a security authority, I just know that I do the best I can in terms of to FA keeping my keys private, if there's ever anything compromised, change the keys immediately. And I haven't really, I don't know, I haven't really experienced too much of this. - -58 -00:26:01,980 --> 00:26:13,260 -Wes Bos: Yeah, so I'm not I'm not gonna answer this in terms of like, what happens if a user website gets hacked? Because at that point, you need to figure like what databases dumped was code where it was - -59 -00:26:13,740 --> 00:26:15,120 -Scott Tolinski: taken. There were it was - -60 -00:26:15,180 --> 00:28:41,310 -Wes Bos: sensitive information. So like, all of that is sort of a different level. I think this question is, or at least I'm going to answer it in is I've had a client WordPress website that just got script kiddies at one point, meaning that it's a WordPress website. And there's a known vulnerability in a plug in or a version of PHP or in WordPress itself. And somebody runs a script and hits all these websites and, and injects it. So what do you do at that point, so sort of the first thing you need to do is go and reset all of your passwords, both for your hosting logins, which you should be using two factor authentication. And if you are just using straight up passwords to log into a server, then reset those generate new keys if you're doing that, which would be ideal keys and password combo is ideal as well. Because then it's something you have and something you know, then then will you do a reset all of the passwords. So almost in every case, I've had a couple WordPress has hacked over the years, it's because the person's username was their password, it was just like dogs 123. And they've used that same password on every single thing. So they were so uh, yeah, yeah, at that point, you got to figure out like, okay, like, how do they get in, you've changed all the passwords there. And then I just assume that everything every file is tainted, because like there could be malicious code in there that will then you're serving it up to your users. So in the case of a WordPress theme, you just basically got to rebuild the site from scratch, and you have to code review every single file, or just grab a fresh copy from your Git repo ideally, because that will be untainted, then you go to go get a fresh copy of every single plugin that you have get a fresh copy of WordPress, because like, WordPress has like, what 40 million files? How are you going to check all of those, you're not just scrap everything on there, start rebuilding the website, what can also happen in the case of a lot of PHP CMS is is that malicious code can get into the database. So you have to sort of go through that as well. There's a lot of plugins out there that will sort of scan for these these known things out there. And then either roll back to an old version, if you can, if you're using like a Digital Ocean or something like that, it's probably better just just spin up a new thing and grow back. Oh, yeah, you could roll it back, I guess. But yeah, - -61 -00:28:41,640 --> 00:28:46,950 -Scott Tolinski: I that's I mean, that's would be my first inclination is to find where it's clean, and then roll it back. - -62 -00:28:47,010 --> 00:29:20,910 -Wes Bos: Yeah, that I guess like that will get you up and running really as quick as possible. But I would be tempted just get a brand new IP address a brand new box. And that way, you know, none of that stuff has been tainted or whatever. Because like, it's frustrating, like, certainly, I've only had it in cases where it was just a simple little WordPress. And it was just the Indonesian script kitty that got the entire thing. But it certainly could be much worse. And you have to just assume that absolutely. Everything has been tainted and everything as an open door. So you have to go and go through and keep going through all those. - -63 -00:29:21,450 --> 00:30:27,930 -Scott Tolinski: Yeah, and one little thing, if you're using any of these CMS is right, there are some preventative measures you can take because if you're going to get hit by a script, Kitty or any of that, it's largely because there's these exploits that Yeah, over the course of WordPress or Drupal or whatever, and they're just going to try every WordPress or Drupal site they can find and to see if you're out of date on any of these or if your plugins are out of date or whatever that could contain in these Roadrunner abilities. So one thing I always did when I had a Drupal site is I hid the fact that it was Drupal as much as possible. I changed the domain or the the URL of the login page. So that You know, they're if they tried WP forward like I used to see server logs on a Drupal site come in saying route not found and they were searching for WP hyphen, because they know that if it's a WordPress site, then they can potentially do something. So if you change those things to prevent the users from even attempting to get in, in those specific ways, then that could go a long way as well. This next question is for Wes Bos to read not for me to read. - -64 -00:30:27,960 --> 00:31:42,750 -Wes Bos: The next question is from Mina to leave my book work. My bookmarks are overwhelming. I just started learning web dev. And then though I start my bookmark into folder and up with so much stuff, I don't even know how to use them. Certainly I had this problem when I was still learning every single little article or or trick that you you'd stumble upon you'd bookmark it, because you probably need that at some point. In the future. What do you use for managing your bookmarks on browsers? So I honestly, I use bookmarks here and there when I'm when I'm working on something like, let's say, I'm looking to do a new intro for one of my courses, I'll bookmark like six or seven mp3 files, and maybe some art for things that I like. But every now and then same as my desktop, same as my downloads, I just blow it all away, because it does become overwhelming. And you're never actually going to go back and look at all of those things. Yeah, if I think about how many times I've went into my bookmarks, and said, Oh, where was that link from? Six months ago? I don't even remember that. I have that that link. So just delete everything you'll feel free is the same thing with people who leave tabs open. My wife is awful at that she she leaves just like tabs open for like months. She's really, um, Oh, man. - -65 -00:31:42,779 --> 00:31:50,010 -Scott Tolinski: Yeah, I'm, I bet it's something I've gotten better at. But it's not something that I am excellent at it. - -66 -00:31:50,100 --> 00:31:56,910 -Wes Bos: You can get all that stuff back, just google it or go back to the URL, you'll you'll be able to find that information. - -67 -00:31:56,969 --> 00:32:01,680 -Unknown: But I'm gonna read it. I'm gonna read it at a moment. I don't know whenever I have that moment. I'll read it. - -68 -00:32:02,730 --> 00:32:04,200 -Wes Bos: Oh, man, I never have that moment. I - -69 -00:32:04,200 --> 00:32:07,350 -Scott Tolinski: just I know that the answer is that you never have that moment. - -70 -00:32:07,470 --> 00:32:17,730 -Wes Bos: Many times throughout the day, I'll just close absolutely everything, delete everything on my desktop, delete everything in my downloads folder. And just just live your life. It's a good life, Scott. - -71 -00:32:20,820 --> 00:33:00,270 -Scott Tolinski: I know I'm so bad about people have like really good ways of cataloguing all the information they find and bookmarks and notes on everything. And I do none of that none of that. We can maybe potentially say that, like notion is good for some of those things. For instance, like Courtney and I are looking to redo our bathroom. Our vanity looks like it's from Lord of the Rings or something. We did not pick it out. So like does not fit our tastes. We've never liked it. And on top of that, it needs work. So we're like, well, we'll just get a new vanity what they're like 300 bucks, right? We're not going Restoration Hardware on this, which by the way are like six grand or something. They're ridiculous. - -72 -00:33:00,300 --> 00:33:03,060 -Wes Bos: Yeah, Restoration Hardware is the best but super expensive. - -73 -00:33:03,330 --> 00:35:47,010 -Scott Tolinski: I was looking for a man on there. And I could believe the price. I was like, Oh, this one like holy cow. I've never shopped here before. Wow. So yeah, we're looking for a vanity right? And what we did is we made like a gallery table in notion Well, why should say we I made a gallery tote table in notion with basically screenshots of all the different vanities, we're considering, you know, sort of like your own custom Pinterest board. And that for that particular project just lived in that particular thing is very organized, it necessarily wasn't like a bookmark thing. But you know, those were, those were the links that we wanted to have for this specific thing. I remember using delicious a lot. Back in the day, it was really nice to tag everything just stored in there and in whatever I've been using pocket lately, but by using pocket, I mean I have it installed. I use it. Occasionally I find myself using pocket mostly before flights, or situations when I'm going to be offline. I'll just go ahead and grab a bunch of articles I would want to read beforehand, so I'd have something on the plane to look at. But for the most part, yeah, bookmarks are kind of a crapshoot, and I don't really use them for anything. So that's pretty much pretty much it for me, I just don't use them. Next question is from Tyler Jackson. He says, Hey, Scott, unless being an avid user of react and other modern JavaScript frameworks, how would you recommend integrating these technologies into more or less static brochure style websites? Say for instance, I have a banking website. There's mostly static content, but also complicated JS pieces such as calculators, location finders, and signup forms. I currently reach for jQuery and jQuery plugins for these functionalities but react and view sound like they could also help solve these one off pieces of functionality. Most tutorials and example are about creating apps from the ground up. But what if you want to sprinkle these frameworks and only use them for whatever j s is necessary? How might the both of you solve these scenarios? PSM he turned the show and can relate to West his origin story. 100% seemed ya ever seen kid? Yeah, Mama seen kids? Okay, my answer for this one is largely that react and view and any of these things can absolutely be used in this manner. One of the first things you do in like a create react app or any of these situations is you have an HTML file, and you have a div with an ID, and you do get element by ID, and then render your react application to that ID. Guess what you can do that on any div in your entire website. And you can do it more than once. So while the tutorial certainly don't show it that way, I know actually, I believe views tutorial does a better job of this than react. And I saw Dan Abrams talking a little bit about how they could be better about showing that, but it can absolutely be used in that manner. Any of these frameworks? - -74 -00:35:47,070 --> 00:35:54,510 -Wes Bos: Yeah, like facebook.com, the new version, which is awful, but like the facebook.com that everybody knows, - -75 -00:35:54,510 --> 00:35:56,850 -Scott Tolinski: as opposed to the old version, which was not awful. - -76 -00:35:56,940 --> 00:36:13,020 -Wes Bos: The new version is like the UI is horrendous, but like the like regular white and blue facebook.com is in was a server rendered app with react sprinkled in into little pieces onto the website. So certainly, if Facebook can do it, you can as well, - -77 -00:36:13,400 --> 00:36:53,100 -Scott Tolinski: that's absolutely correct in again, it's, you know, what are you doing for jQuery? Well, you're, you're saying, hey, go find an ID of an element and do this stuff, you're doing the same thing with react. But again, you'll need some sort of probably need some sort of compilation step to build up that JavaScript, I would imagine you should be able to find some content on this. I have not looked myself and maybe that's a series that somebody should make, how to add react to an existing project. And maybe it exists. If you know of a good series, or good tutorial blog, or anything that shows react to being used in this way. Let us know, like I said, I do know that the official view tutorial has a section on this. So check that out. - -78 -00:36:53,190 --> 00:37:44,880 -Wes Bos: Yeah, if you want like a development environment where you get like hot reloading, but just on like part of it, like maybe it's like a Drupal website, but like the calculator is built in react, and then you'd have to proxy your website and things like browser sync, I think maybe parcel does it as well, where you can proxy an existing HTML and embed it in there. There's also this new framework called Alpine j. s, I listened to full stack radio with Adam wathan. And he interviewed Caleb porzio, about this new, it seems kinda like it's very lightweight, sort of a like a lightweight view for when you just need to sprinkle on a little bit of JavaScript. And it certainly seems to be targeted at that like server rendered HTML, but I do I do need a bit of customization. So maybe take a look at that as well. It seems pretty nifty. - -79 -00:37:45,150 --> 00:37:59,400 -Scott Tolinski: Yeah, Adams got good advice. He was instrumental in me picking Discord. He said that he never looked back from picking Discord. And I was like, Okay, if Adam, Adam feels that way, then like, it's definitely like a good opinion to have. So yeah, - -80 -00:37:59,730 --> 00:38:05,310 -Wes Bos: that's great. Um, next question we have here is from how do you think you're gonna say this one? I'm - -81 -00:38:05,310 --> 00:38:06,380 -Scott Tolinski: glad you got this one - -82 -00:38:06,420 --> 00:38:07,710 -Wes Bos: Bartholomew beauty - -83 -00:38:07,710 --> 00:38:20,670 -Scott Tolinski: you get to see I mean, it could be birth birth all a meal it like they do this on purpose. This looks like polish. I don't know if they're polish. There's that. That l character with the line character they have in Polish, but I don't I honestly don't know. - -84 -00:38:20,820 --> 00:38:25,290 -Wes Bos: I like that character. I half the time when I see that if there's something on my screen. - -85 -00:38:26,910 --> 00:38:36,330 -Scott Tolinski: Which is, you know, I was watching a hockey and this is funny. I was watching a hockey game on my notepad. And I swear I thought the penguin scored a goal last night, and it was just - -86 -00:38:38,940 --> 00:38:41,640 -Wes Bos: just check it out. Yeah, it's really, yeah, it - -87 -00:38:41,640 --> 00:38:43,110 -Scott Tolinski: was super annoyed. Alright, the - -88 -00:38:43,110 --> 00:39:51,210 -Wes Bos: question from Bartholomew is Hello jazz dads. I was wondering whether you could share which backpack or bag you use for carrying laptops, I'm looking for something that'd be useful to carry my 16 inch MacBook Pro, but also hold other stuff like groceries, clothes, other various things they might want to put their tech backpacks tend to be sometimes too techie, or too stiff, too rigid. And when it comes to real life, we sometimes need more flexible things are human after all we need to eat and drink. Maybe you found the ultimate backpack and are willing to share your knowledge. Thanks for the amazing work well, I have found the ultimate backpack and I've had mine for probably three years now. It's the peak design. Everyday bag, I have the 30 liter they also have a 20 liter certainly wouldn't go for the 20 liter if you want to put groceries in it as well. And it's great. It's it's got this heat these huge openings on both sides. It swings around. So you can open it while the it's still slung around one arm. There's magnets in it. There's a bunch of little clasps that will on one I don't even know what they're called, but there's - -89 -00:39:51,210 --> 00:39:54,480 -Scott Tolinski: so many clasps, clasps and magnets. I love it. Yeah, - -90 -00:39:54,540 --> 00:40:38,010 -Wes Bos: you can clip it on and I've been mad about it and it's it's almost like a meme now. Like if you were to do the web developer starter pack, that backpack would be Oh, it's funny thing is that it's it's like a photographer's backpack. It comes with all these little like, yeah. What do you call those? Like dividers? Yeah, inserts dividers, I took most of those out except for one. And then I keep one really low near the bottom, and I slide all the cords and everything under that. I put my backpack that I put the laptop in the sleeve. And then that leaves the entire backpack for life stuff. Like whatever it is that I'm working on. I just went to the cottage this weekend. How did my gloves in there had a couple beers in there. Things like that. Oh, - -91 -00:40:38,580 --> 00:41:01,920 -Scott Tolinski: yeah, I use mine as my my suitcase. Last time we went to react on and it was great. I was impressed too how much stuff I could fit in there for like a weekend travel. And that's all I traveled with? I have the same backpack, different color. And yeah, this is the same answer. It's It's so dang good. I'm so happy that I listen to you instead of going out on my own and trying to get something because this thing is, is very, very good. It's expensive. But - -92 -00:41:01,980 --> 00:41:42,000 -Wes Bos: yeah, my only complaint with it is it's a bit on the heavy side. Sometimes I find myself being like what is in my bag? And you got to hit it back day. Nothing in it. Yeah, maybe I need to do some squats in my backpack on. But like compared to like, I've got like a Herschel just a cheap Herschel backpack for the gym. And that thing is it's just cloth. Right? And, but like, I certainly wouldn't trust my laptop in that, because I think it would get dinged and certainly I even left a window open once, and it rained on my backpack. And my laptop was bone dry. So that backpack is the best. And I've had it for three years and it looks brand new. So yeah, I - -93 -00:41:42,000 --> 00:42:37,170 -Scott Tolinski: was really impressed when I saw yours. I mean, mine. I've had mine for about a year now. And it's held up fantastically. I don't have any complaints whatsoever. All right, next question is from t SOS t saw says, Do you read out vanilla fetch less than the dot fetch method in your components that need it? Or do you use a fetch wrapper? Allah? What like axios, or one of those written by yourself or someone else? What do I do I, I always write vanilla fetch. I don't use any wrappers, why I don't really need to not not like it makes sure it makes life in edge cases easier. But I don't really encounter that stuff that often. To be entirely honest, I use graph qL for my API on level up tutorials. So the amount of fetch requests I'm writing in general is just about none anyways. But I do write them in tutorials all the time. And we use straight up vanilla fetch. Do you prefer chocolate fetch or Neapolitan, - -94 -00:42:37,530 --> 00:43:38,360 -Wes Bos: raisin strawberry fetch, I mostly use vanilla Fetch as well in my project. So like, obviously, if there's something that is like, like a react project, or something like that, then I use whatever, whatever I'm using in that project. But anytime I'm doing something smaller, and they need to just like I need fetch, I'll pretty much always just use the regular fetch. Sometimes I'll write a quick little wrapper function. If it's always going to be JSON that returns to me and I like maybe want to handle the error within that function. All right, a quick little four or five liner? And then and then that's great. But then when it comes to custom headers and API keys and things like that, then I'll reach for axios. Not because you can't do that with fetch, but because it has some some nice defaults in there. So I'm kind of all over the place. But I would say probably in most cases, it's fine to just use fetch. It's kind of annoying that you have to do the double await. Yeah, - -95 -00:43:38,790 --> 00:43:45,270 -Scott Tolinski: the double await thing isn't worth it to me to like, be like, okay, now I need a wrapper for those, you know, I will double await Yeah, - -96 -00:43:45,540 --> 00:43:47,490 -Wes Bos: totally just add another line of code. - -97 -00:43:47,490 --> 00:43:48,120 -Unknown: Who cares? - -98 -00:43:48,120 --> 00:43:48,630 -Wes Bos: Yeah. - -99 -00:43:49,800 --> 00:44:43,890 -Scott Tolinski: You know, I personally, I find it just writing vanilla fetch to be fast enough for me. URLs is fast is is the process of getting your website up and hosted on nella phi. And let me tell you about Netlify. In the past, we have talked so much about how much we love Netlify that people thought it was like, almost a joke or something. But we are absolutely serious. And I'm absolutely dead serious when I say that Netlify is my favorite host on the entire planet. And when they first approached us to sponsor cindex, I was absolutely, absolutely psyched about it, because I knew that I could talk all day about how much I love Netlify. So you're gonna want to check out Netlify it's at netlify.com. They're the best place in my mind to host your front end code. But it's not just running code. They have all sorts of extra additional features like serverless functions and authentication, and they added some - -100 -00:44:43,919 --> 00:44:57,210 -Wes Bos: GitHub integration, like it'll Auto Deploy from a GitHub commit. But then if someone submits a pull request, they will like show you the staged URL, so you can check out Oh man, so many cool things. Gosh, - -101 -00:44:57,600 --> 00:45:49,260 -Scott Tolinski: a B testing comment forums. stuff, just their new analytics, which is like a DNS based local analytics rather than just like a script on your page. There's just so many cool things. And you're gonna, you're gonna head over to netlify.com Let me tell you right now, I don't know. netlify.com and you're gonna see that 600,000 at developers and businesses trust Netlify you're gonna see amongst them. Some of the giants like, you know, Nike and Verizon and a peloton. Did you give your wife a peloton bike for Christmas this year? I don't know, maybe. But if you did, their their thing was probably hosted on Netlify. So you're gonna want to head to netlify.com forward slash syntax, and you're gonna see all of the amazing things. Oh, we didn't even mention the free one click HTTPS, it's gone by automatic no fussing with SSL certificates. - -102 -00:45:49,320 --> 00:45:58,710 -Wes Bos: You don't even have to click Scott. It just comes with your it just comes with Netlify. So I set up a custom domain name. And it just it just works. Right. No cooking involved. - -103 -00:45:58,920 --> 00:46:18,210 -Scott Tolinski: Negative one clicks. Yeah, you don't gotta click. So I mean, this may sound over the top. But again, we absolutely love Netlify. And we're so psyched that they have, you know, supported syntax for as long as they have. So check it out. netlify.com forward slash syntax, sign up today and be absolutely amazed when you try it for the first time. Okay, next question is - -104 -00:46:18,240 --> 00:46:26,640 -Wes Bos: from Alex Webster. Hey, have you ever done? I don't know why I said that. So funny. But have you ever done yeah. - -105 -00:46:28,020 --> 00:46:29,340 -Unknown: Raspberry Pi. - -106 -00:46:29,340 --> 00:46:36,000 -Wes Bos: I'm trying my hand at remote access to a solar power setup at our batch. Oh, - -107 -00:46:36,000 --> 00:46:36,810 -Unknown: do you know what a batches? - -108 -00:46:36,810 --> 00:46:45,450 -Scott Tolinski: Do? I know what a batch is? Uh huh. I was gonna come up with something funny, but I do not. So - -109 -00:46:45,450 --> 00:47:01,950 -Wes Bos: batch is also called a crib in the southern half of the South Island is a small often very modest holiday home or beach house. He notes here very similar to what a cottage is in Canada. That's pretty cool. Went to the batch this weekend. - -110 -00:47:01,980 --> 00:47:03,960 -Scott Tolinski: Yeah. What nationality says that? - -111 -00:47:04,110 --> 00:48:29,310 -Wes Bos: A New Zealand? New Zealand? Yeah, I like it. All right. Oh, he This is a beach at the batch. cooked up a batch of cookies at the batch. Yeah. Anyways, I'm finding it hard to find good resources on Raspberry Pi for this outlined, and most of them get very technical really quickly. My idea is to take the RS 485 mobis data and as far as I can tell, that's just like the lower level data and send it to a database every five minutes or so. So he basically wants to take some information from his solar panel stuff with a Raspberry Pi, and then pipe that out to a database. So I find this reel I thought I added this one in because I thought it was pretty interesting. I'm like super into LTE modems. Right now as I'm trying to up my car, my batch internet pretty into LTE modems right now. I'm pretty into LTE, but like what I'm finding is that a lot of these LTE modems are used on Raspberry Pi's. And so I'm thought like, yeah, this would be really cool. So I think that I think what you need to do from here is that you need to think that it is a it's just a server, the Raspberry Pi is just a Linux server, like you would normally use on something like Digital Ocean, but you need to be able to figure out how do I get access to that lower level data? So with? Remember, I did that? That drone video at the beginning of last year where I flew a drone via react? - -112 -00:48:29,490 --> 00:48:36,270 -Scott Tolinski: I don't remember I don't remember I don't. Anyways, I did a drone, specifically not remembering that - -113 -00:48:36,570 --> 00:48:44,100 -Wes Bos: first research. Oh, yeah, I forgot about that. Oh, do you want to? You want to engage the audience on what happened there? - -114 -00:48:44,609 --> 00:48:53,760 -Scott Tolinski: They were going to send me a drone. And then they chose to send one to Wes instead. And then we're like, oh, yeah, we can't send you a drone. Sorry - -115 -00:48:55,080 --> 00:48:55,980 -Wes Bos: about it. Because we - -116 -00:48:55,980 --> 00:49:05,790 -Scott Tolinski: were in talks about it for like weeks. And I was just like, yeah, I'm gonna get a drone. That's pretty cool. And then West is like, Oh, I got my drone. And then they send me back. Oh, yeah, we don't have any more drone. Sorry. - -117 -00:49:06,390 --> 00:50:43,200 -Wes Bos: But I even further though, is like I told them, I would do it. But for money. And that. Oh, yeah. Oh, yeah. That was it took Scott's money. Oh, this drone money just by asking for it. Anyways, um, I did like a react and Node JS drone video. And I needed to access all of the data from the drone, which was sent over UDP on a Wi Fi signal. And then I needed to get that that's very low level data, and I need to get that into the browser. So how do you do that you do that with either D Graham is what I use to get access to UDP or you can use the child process dot exec in node, and that will just allow you to run shell commands. And that's probably what you want in your case, because as soon as you're on, you have access to the raw box then and you can run shell commands to get information. From there, and then you can send that out over a WebSocket or, or send it to react or or save it to a database, like you're saying. So like, that's what's helped me because like, I certainly don't understand how electronics work and how a lot of this low level Raspberry Pi stuff works. But it has helped me knowing that these are, these are all just sensors or data. And you can access that data really low level, and then you just need to, as soon as you can throw that raw data into a Node JS process, then it's like, Huh, because it's just JavaScript, and then you can start to, to sort of work with it. So I don't I don't have any resources for that kind of thing. But that's what's helped me in the past. Cool. Have you ever done Raspberry Pi? Ah, - -118 -00:50:43,200 --> 00:51:19,410 -Scott Tolinski: no, it's, I have a Raspberry Pi. I have a lot of cool little gadgets for it. I've done Audrina stuff, I have not and I would really love to but it's one of those things, you just got to find the time to really invest to get into it. I think I installed Raspbian on it. And I got my Linux up and running. And then I was like, You know what, I come up with a project for this thing. And you know what, I never did come up with a project for it. So I would really like to figure it out, or at least do something fun. And yeah, maybe it's in my future. At some point. I would love to get into that. It's got to find find the time to do so. Working with solar panels. seems cool, though. That seems very cool. - -119 -00:51:19,530 --> 00:51:32,190 -Wes Bos: That's the problem is like, being old is hard. Because like when you're young, you got all time and no money. And then when you're older, you got to like a little I got a little bit of money to spend on some solar panels. But I got no time to goof around with that. - -120 -00:51:32,370 --> 00:52:12,540 -Scott Tolinski: Yeah, I got no time to goof around with it. And I would love that time to go for the solar panels. That sounds like a blast. All right. Last question is from Charles merjan. He is to us in there. So I don't know if that was a typo or if it's actually urgent. But he says, What do Wesson Scott, think about beards? And have you ever thought about growing one? My answer is that my beard status is directly proportional to my stress levels. You can tell exactly how far along I am in any given project and how close I am to a release date by how disheveled my beard looks. And people will be like, Hey, have you grown a beard? - -121 -00:52:12,540 --> 00:52:13,770 -Unknown: I'm just - -122 -00:52:13,770 --> 00:52:32,580 -Scott Tolinski: really not taking care of myself right now. So that's something I'm trying to change trying to be better New Year new me I'm trying to shave my beard grow very good beard. I don't think Courtney likes it. So, you know, I'm sort of apathetic on it. If If Courtney's not into the beard, you know, I'm not gonna keep it. So - -123 -00:52:32,880 --> 00:53:18,840 -Wes Bos: I have never attempted to grow a beard. I certainly have. People always say like, oh, you're growing a beard. I'm like, No, I just haven't shaved in a long time. I think I have like a What's it call I just googled it trick Anatolian mania. It's where you pull your hair out. So if I'm just like, stressed out about something, and I'm trying to fix something on my code, I just sit there and just like pick away on my beard. And then before you know what I sound like a bald spot. So because of that, I just can't Oh, wow, I can't have a beard because I just like, anytime I get stressed out, I just start pulling away at it. I'm like, That's weird. And my wife's like, just stop doing that. I was like, I wish I could. But it's a thing of the Yeah. So I would love to I think they look really cool. I just I just paused can't possibly do because I just pull it out. - -124 -00:53:19,710 --> 00:53:43,350 -Scott Tolinski: You know what I there are times that I'm there. Like, I should just do it to have a beard for a bit of a time. Consider Yeah, nice. Like, I got a nice, full. Now's the time it would look good on me. Yeah. Maybe I'll just go for it and say, Sorry, are you gonna deal with it for a little bit? My apologies. You can have it for like a month and get rid of it. No biggie. reversible. Yeah. Good idea. So thank you, Charles. Cool. - -125 -00:53:43,410 --> 00:53:54,960 -Wes Bos: All right. Well, thanks for submitting all of your questions. Those are great. Make sure you keep on submitting those questions. We are going to move into some sick packs. You got a sick pick for me today, Scott. - -126 -00:53:55,770 --> 00:55:49,230 -Scott Tolinski: I do. I you know, I've been I've been racking up some sick pics lately in terms of stuff that had been really wanting to tell people about. So this is a neat little thing that I'd always been looking at for a long time. My back doesn't feel great. I have pretty bad poor back flexibility in general. Haven't really kind of neglected it in the scheme of things. And I've been working among, you know, changing some of that I've been stretching every day. I'm on a 18 day stretching the strict No, I think it's even longer than that. Let me check my stretching streak is significant. I'm on a 25 day stretching streak. So I'm all about stretching my back right now. And one of the cool things that I got was this yoga wheel. Now in the past these Instagram influencers would be like, here's the yoga wheel, and it's $100 for a piece of PVC cutting a circle. And I just thought it was a really cool idea because there's these big sort of wheels. Like these big PVC wheels. I thought it was a really cool idea. But I was never going to spend $100 on one of these things. Does that just seem stupid? So I got this new one, which is one of these Amazon knockoffs of which there's thousands of Amazon knockoffs of everything now, and this one is a $40 competitor, but it comes with two of them comes with two different ones. And it's really cool because it's a big giant wheel. And I'll just lay with my back on it, like a Swedish ball one of those, but it's so small, you can just have it around the living room rather than a giant Swedish ball that you would be really weird to have around. Let's just lay on it for a little bit. It's funny. The little one is this little miniature one. It's the perfect size for Landon and Landon loves laying on his next data when data is laying on it searching on his back lender will be like my back hurts to stretch it out. So it's super cute. I love this thing. And it was a nice, it was a nice little addition to my life here. I've been using it every day, - -127 -00:55:49,860 --> 00:56:42,390 -Wes Bos: I am going to sick pick cable ties. So I recently redid my desk I talked about on one of my last tech pics. And one of the things I got were these, like Velcro cable ties that sort of ratchet down on themselves. And I just went yet and I was on all of my cords and now all my cords have these nice cable ties on them. These ones are a Velcro which have like the hooks and the I don't know, what do you call? What is the other part of Velcro the fuzzy side and the hook side? I think there are some cable ties that doesn't matter which side they are. I would like to find those I couldn't find them when I was looking for them. So I just got 100 pack of these Velcro ones and they're awesome. And my life is so much more in order for them. So it's just something I think it's every every tech nerd needs to have on hand has these Velcro cable ties. - -128 -00:56:42,930 --> 00:56:59,130 -Scott Tolinski: Yeah, I have I have the Velcro the thread through Velcro ones and they are absolutely instrumental to the organization of all of my stuff. So any type of cable tie I think if you're interested in having one of those ID ready desks is totally necessary boys. - -129 -00:56:59,670 --> 00:57:20,310 -Yeah. You know, we're all about desk boys. I recently, um, I recently tweeted out a photo of my laptop and one of the hashtags was like, laptop with it filter for basic coding computer people. Because that's like Instagram category is just like here, let me just take a photo of my laptop all the time. - -130 -00:57:20,850 --> 00:57:48,900 -Wes Bos: I want somebody to make Instagram meme account where it just collects these pictures of people like I saw. I got one sent one today from Henry Helvetica, or this guy's like standing literally on the edge of a cliff with his laptop. That's what First of all, like you're not actually doing any code from the edge. Oh, Cliff. Second of all, you have to schlep that thing all the way up to that cliff just for your ID photo. Come on. Epic photo - -131 -00:57:48,900 --> 00:57:50,790 -Scott Tolinski: man epic photo. - -132 -00:57:50,940 --> 00:57:54,750 -Wes Bos: So if anybody wants fame, please make that. Can - -133 -00:57:54,780 --> 00:58:26,850 -Scott Tolinski: you remember Extreme Ironing? Oh, there was at some point in the earlier days of the internet, this was like this is like a meme, like planking kind of thing. But it was an extreme sport that they these people were trying to do or right on and they were extreme ironing. And it's just like people there's a guy ironing while wakeboarding? Isn't it hilarious? This was like one of the like these like Oji like this is early internet. Yeah, things. It was super funny. That's what that reminds me of - -134 -00:58:27,060 --> 00:59:08,040 -Wes Bos: extreme ironing. That's great. So somebody, somebody needs to make an Instagram account called like extreme computing. And that's extremely confusing computing, stream computing, and just repost these hilarious stage shots. With a funny caption, this is like, epic tutorial for me destroying my laptop. Oh, a shameless plugs, go to beginner javascript.com is my latest course check it out, it will still be on sale to the end of January. You can grab it and learn it's exercise heavy approach to learning modern JavaScript from scratch. - -135 -00:59:08,640 --> 01:00:06,660 -Scott Tolinski: from scratch, I'm going to plug my latest course that's going to be dropping on the 31st. So on Friday, this course is coming out and it is a doozy. It is all about graph qL servers. So a lot of times with these graph qL tutorials, we mostly focus on the client side, right Apollo client, you're pulling it data, here's an API that exists. But what I didn't find was a ton of tutorials that were completely focused on the basics of building a graph qL server. So we're not talking about database stuff. We're not talking about Express stuff. Really, what we're talking about is how do you write your schema? How do you write your your resolvers mutations? How do you do all those things, fragments, unions, all those weird little things, what the heck is an ASP type name, stuff like that. So if you want to check this out, the course is called How to make a graph qL server it's going to be available About the 31st and it is available exclusively on level up tutorials comm - -136 -01:00:07,080 --> 01:00:14,130 -Wes Bos: All right, I think that's it. Thank you so much for tuning in and we will catch you on Monday. He please - -137 -01:00:15,839 --> 01:00:25,590 -Scott Tolinski: head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax219.srt b/transcripts/Syntax219.srt deleted file mode 100644 index d1e798f86..000000000 --- a/transcripts/Syntax219.srt +++ /dev/null @@ -1,172 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,580 -Monday, open wide - -3 -00:00:02,580 --> 00:00:04,009 -dev fans - -4 -00:00:04,009 --> 00:00:06,990 -yet ready to stuff your face with JavaScript CSS - -5 -00:00:06,990 --> 00:00:07,590 -node - -6 -00:00:07,590 --> 00:00:08,820 -module, BBQ Tip - -7 -00:00:09,059 --> 00:00:10,410 -Get workflow breakdancing, - -8 -00:00:10,410 --> 00:00:11,310 -soft skill web - -9 -00:00:11,310 --> 00:00:21,660 -development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA, and Scott Taylor. - -10 -00:00:23,610 --> 00:00:24,450 -Totally at ski. - -11 -00:00:25,950 --> 00:00:59,580 -Scott Tolinski: Oh, come to syntax on this Monday, hey, it's D treat, we're going to be talking about some of those non glamorous skills that will improve your life as a developer, I'm talking about some nitty gritty things that are going to really just make your life a little bit easier. We're going to be talking about the whys, the woods, and maybe some of these skills that are good to focus on for a little bit. Whenever you get some free or downtime. My name is Scott Tolinksi. I'm a developer from Denver, Colorado, with levelup tutorials. And with me, as always, is Zoo Wes Bos. - -12 -00:00:59,819 --> 00:01:22,290 -Wes Bos: Hey, everybody, I'm excited to talk about this. I'm big about like, maybe we should get some give some context really quickly is things like time management and command line interface and folder structure, I have a whole thing called file hygiene here. And these are things that get in your way when you're trying to code. And if you can continually get better at them. It's good for your career and life. Yeah, - -13 -00:01:22,710 --> 00:01:39,090 -Scott Tolinski: it's good for all of those things. And this episode is also sponsored by a company that's good for a lot of things in your life. And that is prismic@prismic.io, check them out@prismic.io forward slash syntax, and you're going to be greeted with a really neat little landing page, - -14 -00:01:39,540 --> 00:01:40,620 -Wes Bos: where you get this awesome, yeah, - -15 -00:01:40,620 --> 00:04:34,650 -Scott Tolinski: it's fun. There's some images of Western AI and you can hover over those images to get some fun gifts. You can be Team Wes or team Scott, it's really fantastic. I highly recommend checking this out. But what is Prismic? Well, Prismic is the way to make your website editable for the whole team. Now what does that mean? Well, it's a content management system, and a tool for online editing. Basically, it makes editing your content really super nice. Now, if you love really smartly designed interfaces, I mean, just check out their their homepage or landing page. And then some other examples of this CMS back end, it's all fantastic. You can choose your framework to set up works with I mean, a lot of the stuff we're talking about on the show all the time meet, no JS react yet. Next jazz Gatsby viewed next, all that good stuff. It works with a standard RESTful API, as well as a graph qL query, it's really super cool. You can quickly and easily deploy with Zeit now Netlify Heroku, or your favorite hosting platform, whatever that may be. They also do a really nice job of getting you started with the different options, whether that's with next j s, or with Gatsby or any of these tools that we love. Now, this will be one of those brand new next gen CMS tools that we have been craving over here. It's syntax. So check it out@prismic.io forward slash syntax and give it a try. Give it a look, see and see if this is the back end CMS of your dreams. Okay, let's get going on this. I wanted to start this off with maybe why some of these skills are needed. I was thinking about this, as we started getting into the new year. And like thinking about resolutions and in the genesis for this show, in my mind came from essentially non code related things. I was going to dance practice, for those of you don't know, I've been a B boy breakdancer for 1516 years now going to dance practice. And I was sort of realizing that I've been going to this practice for 1516 years. And there's stuff that I know that I'm not good at that would make me much better at that craft, that I avoid every single practice and I avoid it because it's difficult. It's a little gritty, it maybe isn't the fun flashy stuff that I like working on. Either way. There's these things in life in general, not just in dance, not just in code, whatever there are these things that we put off, because they're not as glamorous as I was thinking to sort of in my mind are not they're not as fancy or flashy or interesting. But they're going to make your life that much better every single day. So that was really sort of the general idea. And so maybe let's get into a little bit why it's needed, as a developer, a little bit more specific to developer, why some of these skills are going to be needed to make your life easier, right? - -16 -00:04:34,650 --> 00:05:41,820 -Wes Bos: Yeah, I think I said already. So that just gets in the way of you being a better developer. So when you're in the headspace of trying to fix a bug or trying to get something done on a certain timeline, when you don't have these like non coding skills that come along with being a web developer, they are distracting. They take headspace you only have so much brainpower to different Two things. And like I'm just thinking about like folder structure. And when I was in teaching a boot camp, I would see people all the time with bad folder structures, and they had files all over the place. And they're editing the wrong file. And they're frustrated with like, it's just a mess with things like that. And that's not something that should get in your way, when when you're a developer, right? You should be focused that you should be frustrated other things like why your code isn't working. And I just think that's a it's important to spend time on these. It's not something that I just like, sit down and work on these skills. But it is something where I continually say, Okay, I'm going to spend 15 minutes figuring out how to better do this right now. - -17 -00:05:41,820 --> 00:07:23,310 -Scott Tolinski: Mm hmm. Yeah, it's some of these things are, you know, I was inspired one time when I was a junior developer. And we had been given a CSV of, like, 10,000 products for a Magento site that needed to work. And I remember looking at this data and thinking, this is gonna take me forever to do in Excel. I was a junior, very junior, and this other developer there was like, Listen, I can convert this into whatever Magento needs, because they needed a CSV is just very different organization for it. And he's like, I can convert this in about an hour if you let me write a script to modify this, this database. And I was like, what that's like magic. I didn't under you know, I'm a website builder, I don't understand tools that mess with file structure duel that, you know, converted to a CSV, that'll just seems like magic to me, he whipped it up, hit a button. And this task that I thought was going to take me a whole day took him about an hour to do and it was pretty mind blowing, as somebody who was just getting into this stuff to know that, oh, yeah, we have these programming skills that allow us to do such amazing things. And if you can flex those skills to make yourself a better programmer, or have more tools in your toolbox, then you're just going to be able to accomplish more things faster. And largely, like I said, we don't do it because they're boring, sometimes, right? Like, is working on your file structure really that exciting? I don't know, sometimes, to me, I'm really geeked up about it. Like if it gets bad enough, I'm like, Oh, yeah, gotta get these folders, right? For the most part, that's pretty boring. It's not always your focus, either, right? It's not the thing that you're excited or interested about. So for those reasons, it can definitely be hard to get going on some of these skills. - -18 -00:07:23,669 --> 00:08:07,020 -Wes Bos: Alright, let's jump into what are the skills that we think you as a developer should have. The first one we have here is just good command line skills. And this isn't being like amazing, spin up Docker and do everything from the command line. But just being able to move around the file system to rename things to delete things to just your basic commands of being comfortable in the command line is super important. That's actually why I made my command line power user comm course. Just because like I was seeing a lot of developers sort of struggle with basic stuff. It was around the time that like, gulp and stuff was getting popular. And that was very new to people. Because before that everyone had these like nice little gooeys that would do it all for you. - -19 -00:08:07,080 --> 00:09:45,410 -Scott Tolinski: Yeah, code kit, this stuff like that. Yeah, I agree. And in our next episode, we're gonna be talking about backup solutions. I found out like things like this Synology. Right. The Synology is like a server, your your NAS server, I found out yeah, it's like infinitely quicker to move and manage your files via a command line than it is to do any sort of via finder or anything where you dragging and moving files. So if you have those abilities, they're going to come in handy in ways that you might not expect in family tools in particular, renaming files, batch renaming files, those kinds of things. I use that stuff all the time, I write some command line things to delete node modules to rename my file folder structure, which is going to get into our good file hygiene stuff. But again, I just, I think command line skills will go really far if you let them. So next one would be keyboardist skills. You weren't talking about like slick keyboard skills. You know, sometimes, we have a lot of things in here where you're talking about like jumping to words, lines, end of line, beginning of line, copying lines, moving the line up, those kind of things are they're definitely very code editor specific, right. But those are at the end of the day, keyboard skills to have those because a lot of that stuff's transferable, especially in programming, right? Whether or not you're in VS code, or in vim or whatever, the you have these same functions, they might not be the exact same key bindings, but getting used to using your keyboard to do lots of things is going to take you a long way. I definitely am a mouse user at some point, but like being able to navigate move around a file really quickly and easily is definitely a huge thing for being fast. - -20 -00:09:45,630 --> 00:10:33,050 -Wes Bos: Yeah, yeah, I think like selecting and just cursor skills in general, is so key like moving lines, selecting an entire line, jumping the cursor by word instead of just like pushing And then like drink a sip of your coffee while you wait for it to go to the front of the line. Again, like when I taught a boot camp, these were just things that people would see me just flying around on it. And it's a little bit overwhelming because you're like, oh, Wes probably knows what 300 400 shortcuts. But if you just learn one a week, and get really good at that one during that week, and every time you say like, Oh, I bet I could use that shortcut here, you have to stop and figure out what that is. But it will become just part of you. And I don't know you one week, it's like 100 a year, so you'd be fine. You get to learn tons. And - -21 -00:10:33,050 --> 00:11:45,990 -Scott Tolinski: I even really like using custom keyboard shortcuts for some things. I talked about this even in my like video editing practice, because video editors specifically, right, they have 1000 different keyboard shortcuts, they can do a billion different things. And chances are I don't need to do most of those things. For instance, I really have like three keyboard shortcuts, it's like blade, it's like slice the audio video file, like roll it up to and roll it up past and if those words don't mean anything, don't, don't worry about it. Either way, those are three functions that I use. And it makes a lot of sense to me to just assign them to three keys without even a modifier. So I just assign them to Z, Z on my keyboard. And now when I videoed it, it's like I'm playing the piano, which is that that that that contract, you know, just click away, because that is really in tune with my workflow. I don't really necessarily feel too bad about doing that. I know, sometimes, people don't like to change too many of the defaults. But me personally, I think that if you're finding yourself doing a specific thing a lot, it's going to be super useful for you to have a custom keyboard binding. I was just thinking about this the other day, when I was using the change case package in my VS code. Yeah. Do you use change case? I use change case all the time. - -22 -00:11:46,110 --> 00:11:52,200 -Wes Bos: Yeah, it allows you to like obviously go upper lower camel. Yeah. kebab, things like that. Yeah. - -23 -00:11:52,260 --> 00:12:18,810 -Scott Tolinski: I just started using Karabiner elements or whatever using do cat Ah, yeah, yeah. So I was just using the the caps locks modifier to do all my change case, keyboard commands. And oh, my gosh, it saves me so much time. You're never deleting, deleting, deleting, rewriting, whatever, you're just copying and pasting changing case, it's so fast and easy. And again, this really suits my workflow more than you know, everyone's but it's something that's made my life a lot better, - -24 -00:12:19,140 --> 00:12:24,060 -Wes Bos: man. totally unrelated. I can't I can't tell you about a VS code plugin. I just got - -25 -00:12:24,150 --> 00:12:26,790 -Scott Tolinski: Oh, yeah. Oh, I got time for a VS code plugin. - -26 -00:12:26,880 --> 00:13:23,550 -Wes Bos: Okay, good. I just so excited about it. It is called react prop types generate. And just like, you know, I hate writing prop types. Oh, yeah. ponents. And I often just don't, because I just don't feel like figuring importing the the component, which is prompt dash type, naming it as capital P prop types. And then the, the component property is lowercase prop types, like, ah, I don't want to do it. And I got this little, it's not because I don't like prop types. It's that I don't like all the scaffolding around, setting them up, and I got this little plugin, that will just be you select your react component, and it will scaffold out all of the prop types, and then allow you to it'll try to detect what type it is. And then you can just go through and set them all. And I was like, oh, man, like that was such a stopper for me in writing better code just because of how annoying it was. And this little keyboard shortcut will just immediately do it for me. Yeah, - -27 -00:13:23,790 --> 00:14:03,060 -Scott Tolinski: I don't want to be too funny about this. But I don't write prop types anymore since moving to TypeScript, because I have all those fancy prop types, you know, yet. Yeah. I mean, I still want to be here. I am sipping my tea. I have my pinky in the air. Talking about I'm not talking about, you know, TypeScript. But what I did is I actually wrote like a snippet library that does some stuff for for bringing the different types I typically use and I have code jenning types. So my types are generated by a code generator. And but Gosh, my life is so much better in that regard. But yeah, I totally feel if I was still writing prop types like a Neanderthal not just joking. Yeah, no. Okay. - -28 -00:14:03,330 --> 00:14:06,720 -Wes Bos: So we get it's got you use TypeScript. Congratulations. - -29 -00:14:06,750 --> 00:14:09,120 -Scott Tolinski: See, this is see it's like I'm finally get - -30 -00:14:09,150 --> 00:14:12,030 -Wes Bos: you're becoming one of those people. Do you do CrossFit to Scott, I - -31 -00:14:12,030 --> 00:14:47,370 -Scott Tolinski: don't know, because I'm across it. But now I know I get it. It's hilarious. Because it is it's one of those people and I get it, it's insufferable. So sorry about it. Next one up is going to be communication and interpersonal skills. Now, we're not going to spend any time on this one in this show, because we did a whole show on the communication skills. So you're going to want to go ahead and check that out. Let me see what episode that is so 125 125. So go ahead and listen to that one. Next up is going to be time management skills. This is a big one for those of you who are not good at figuring or getting projects done on time. - -32 -00:14:47,850 --> 00:16:00,870 -Wes Bos: This is something I thought we had done an entire show on I don't know if we have no I don't think we have we should do an entire show on time management because it's a important thing being both like being able to Quote how long something will take, as well as the opposite, which is being able to take your time and say, Okay, this amount of time I'm going to spend on email and GitHub issues and whatever. And this amount of time I'm going to be spending on my calendar, I actually just screenshotted my calendar this weekend, I have one thing, and that's record this podcast all week. And on top of that, I can't just like squander that beautifully open week, I have to make sure that a good chunk of it is spent on things like actually focusing on my courses and recording and writing code. And the other part is getting my actual my product like my entire course platform up and running. And then another part is just like things like taxes and accountants and things like that, that I should probably follow up with and whatnot. So being able to take a big block of time and efficiently use all of that. Because you could certainly have the opposite, where you just don't have any time to do anything that you'd like to do. Or you could have just a big block of time, you're not sure how to properly use it. - -33 -00:16:01,350 --> 00:16:55,770 -Scott Tolinski: Yeah, totally. And I always like, I'll have apps open like Twitter, Reddit, whatever, they'll be totally distracting for me. And I talk all the time about using an app to block things. There's numerous extensions out there that will block sites for you, social media, whatever, as well, as apps for whatever your platform is just Google it. I know, OSS, especially iOS and Android are starting to add in things like digital wellness to block certain apps for you at certain times. So those tools I need particularly to help manage my time because my self control is not so great. So next one is going to be Wes his favorite topic, as well as one of mine, which is good file hygiene. And this is one of those that can get totally out of hand, you work on your computer for a couple weeks. And next thing you know, your documents folder has 800 files in it, your downloads folder has 800 files in it. And neither of those are necessarily good things to have. - -34 -00:16:55,770 --> 00:18:18,080 -Wes Bos: Yeah, you should have like, whenever you start something new, you should have an idea of where does this go on my my computer is that a for me, it's a full project, we'll get a numbered folder, and then the name of the project. A just like me goofing around, will get thrown into my demos folder of me just like I'm wondering how this new version of the thing works, or I'm trying to debug something, or I'm working on a hot tip, and I need to write some code to get that, that'll I'll throw that in my demos. And then I'll, I'll have like another folder that's just called Dell me. And anything that is somewhat temporary, I'll just put it in there. And then I'll blow away everything in that folder. A lot of times that's just like, somebody is having a problem with one of my courses, I'll clone the repo, fix it, and then send him an email, but how to how to fix it or push it up. And then I can just blow that away later on. So that's really important. I see a lot of people with messy desktops and downloads folders, my rule of thumb is nothing is safe on the desktop, nothing is safe in the Downloads folder, you should be able to delete those at any time, or maybe even just run a schedule to just delete all of those things and empty your trash every now and then. Just because if you have those on your desktop and your downloads folder, you're gonna be tempted to work out of there. And then before you know it, you've lost whatever it is that you were working on. So have a proper folder structure for that as important. - -35 -00:18:18,270 --> 00:20:41,790 -Scott Tolinski: Yeah, I have so many interesting folder structures on my computer that are, you know, like I have the the site's folder and inside of my sites folder, like you mentioned, it's like a goof around project, I have one that's called experiments, and I just use it for straight up experiments. Here's experiments, here's client, here's personal, here's level up tutorials. These are all my main things, right? But again, downloads should not be safe. Desktop should not be safe, totally agree with either of those pictures and pictures, movies and movies, all of those things that just happen, you know, how many times do you leave a picture or movie or something on your desktop, and it just sort of sits there? I mean, why don't you just drag it to the movies folder even better, create a sort of workflow for that. Now one thing I really like to do is I use an app called clean my Mac that goes ahead and lets me know about files that I haven't been accessed in a long time, maybe extra large files that exist on my machine that maybe just shouldn't be there or whatever. And I go through and I delete a ton of stuff all the time using clean my Mac, it also does that whole like here's where your stuff is stored. There's another app I use called Daisy disk. Daisy disk shows me just about every single size of every folder. So I can see if specific folders are getting unruly or something's not sort of to the size, you're expecting it, it's important to keep an eye on just not enough for hardware harddrive space on your computer, but necessarily the just overall weight of where these things are stored because the more things that you have in many different folders and the further and further it gets away from any kind of system, the harder it is to get back to any sort of kind of actual system. And the very last one is I like to create utilities to help me make tain proper folder structures. For instance, I have a nice little utility that I wrote that creates my level up each time I have a series A creates the folder structure. For me, for instance, I want to start a new series, I create a new series just by running this utility. And that utility gives the series name and creates this whole folder structure for me, or it stores like the place to store the raw footage, the place to store all of the assets, the place to store the completed code, the place to store the actual project, all this stuff is generated for me, because the last thing that I want to do is think about that when I'm starting a new project or getting ready. So I've taken the time to create this stuff ahead of time to just help me out. And I think that's super helpful to - -36 -00:20:41,790 --> 00:20:53,790 -Wes Bos: have. Awesome. Yeah, I think those are some good tips, things that you can work on. And I'm curious for you, you don't really you don't set aside time in your day to focus on these do your How would you say you get better at these things? - -37 -00:20:54,050 --> 00:21:48,900 -Scott Tolinski: It really depends on what it is. If it's command line, utilities, stuff, that's going to be really bad. I remember when I was first learning that stuff, I set aside like an hour every day to to learn or practice those things or get better. I knew I wasn't good at it, my coworkers were able to do stuff that I wasn't able to do. You know whether that's you know, seeing the neat little tips and tricks that have advanced things with the basic commands, even like being able to see file permissions and stuff in a way that's not just the LS or whatever, right? something beyond a little bit beyond the introductory, I did set aside some time to get better at that. But a lot of these things, it can be the process of identifying what things are you not working on, because you know that they're going to be no fun for you. And you're rather just going to do this. And there's this in this light here, your normal, everyday routine, when you could even just take 1015 minutes to vary your routine a little bit and try something new and hopefully get better. - -38 -00:21:49,170 --> 00:22:27,570 -Wes Bos: Yeah, a lot of people say like, why would you stop what you're working on to spend 10 minutes to focus on something, because it distracts you from actually getting the job done. And I'm big on that, because I know that the next time I do this, I won't have to stop and it's going to save me time and frustration and headspace in the long run. So well worth stopping what you're doing to figure it out. Sometimes it goes down a bit of a rabbit hole. And before you know it, you're trying to figure out what the difference between Python 2.7 is but at that point, you have to just rage quit and keep going with your life the old way. But hopefully in most cases you can benefit from that. - -39 -00:22:27,630 --> 00:22:40,650 -Scott Tolinski: Yeah, definitely don't put off too many things in life to get get that far. But sometimes I think it is this like cost benefit analysis of how much better is this going to make my life? And is that worth that time effort usually is so - -40 -00:22:40,890 --> 00:22:52,500 -Wes Bos: cool. All right. Thanks for tuning in. We got a banger of a show coming up on Wednesday about backups and Synology home servers. It's gonna be pretty fun just about to record that. So make sure you tune in. - -41 -00:22:52,590 --> 00:22:58,740 -Scott Tolinski: We have the most exciting show on backups. It's coming Wednesday. - -42 -00:23:00,180 --> 00:23:02,850 -Wes Bos: Alright, catch you later. Please, please - -43 -00:23:04,770 --> 00:23:14,580 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax22.srt b/transcripts/Syntax22.srt deleted file mode 100644 index 55580028c..000000000 --- a/transcripts/Syntax22.srt +++ /dev/null @@ -1,336 +0,0 @@ -1 -00:00:01,290 --> 00:00:02,790 -Announcer: You're listening to syntax - -2 -00:00:02,820 --> 00:00:05,730 -Unknown: the podcast with the tastiest web development treats out there, - -3 -00:00:05,730 --> 00:00:07,260 -strap yourself in and get - -4 -00:00:07,260 --> 00:00:09,300 -ready to live ski - -5 -00:00:09,350 --> 00:00:30,900 -Scott Tolinski: and West boss. And welcome to syntax. In this episode, we're gonna be talking all about our failures, our thoughts on failure, our thoughts on how to recover from failure and what you can grow and learn from failure, how we've all failed on our projects, basically all things, both failure and success here. - -6 -00:00:31,380 --> 00:01:30,480 -Wes Bos: This episode is brought to you by snip cart and dev lifts snip cart is Well speaking of failures, we talked about our the pain that we've gone through on our episode when we did online shopping carts and and accepting money online and the snip card is the perfect solution for when you're building a website, you don't want to have to deal with a back end. So if you're relying on our website in react, you don't necessarily have to create an entire serverless back end or any sort of Express back end to handle your checkout. This is a service that will do it all for you and it'll integrate directly into it. We'll talk a little bit more about them. Also, Dev lifts, we've talked about them on our fitness show, but if you're hearing this for the first time dev list is a they create personal training plans specifically for developers. So if you're looking to get in shape for the new year, definitely time to chat with dev listing and get that personal training plan up and running. So welcome, welcome. How you doing today, Scott? Hey, I'm doing - -7 -00:01:30,480 --> 00:02:01,290 -Scott Tolinski: great. I I ordered some tea that was supposed to be here on like Friday, and then like to separate like Friday and Saturday, it was both out for delivery and didn't arrive. And I'm just like, I really wish I had that tea right now. It's just like pawing through my cupboards for like, five minutes being like, I have to have some tea in here somewhere. And I don't have any I'm completely dry. So I'm wishing they would just get here. I mean, yeah, but how about you other than other than the tea? I'm doing all right. - -8 -00:02:01,799 --> 00:03:05,010 -Wes Bos: Oh, good. Good. I'm doing great. I just got back last night from Paris where I was@the.js conference, and it was fantastic conference really, really well done. The I mentioned last time that it's a different format. It's it's thrown by some developers who used to run TEDx conferences. So it was like 18 minutes 18 minute talk so you really didn't have a lot of time to I don't want to get into you we had enough time to get into what we're talking about. But I really had to trim the trim the fat from my talk and just just get to the things that will help people understand I did a talk on a sink await and I thought it went pretty well. And I got to go first which is always a little bit scary but overall fantastic conference I met a root bunch of really nice people. I met a bunch of really French people who who said that tasty treats my terrible accent but it was hilarious to to hear people come up to me and say hey syntax and then in try to be like I love it. tasty treat. That's Italian. Okay. - -9 -00:03:05,700 --> 00:03:08,430 -Scott Tolinski: Anyone we need more bad accents on the show? Yeah. - -10 -00:03:11,790 --> 00:03:29,970 -Wes Bos: We some like, it was really cool. So thanks, everyone who actually came up and said Hi, to me, it was it was pretty cool to actually meet some syntax listeners in the wild. Yay. Oh, not just cranking away getting ready for the holidays, and just working on some some fun stuff. So cool. - -11 -00:03:29,970 --> 00:03:31,050 -Scott Tolinski: Yeah, that's how to do it. - -12 -00:03:31,380 --> 00:04:26,940 -Wes Bos: So let's talk a little bit about or the entire show, let's talk about failure. And this is kind of interesting episode to me, because when it was first suggested, I've never been like one of those huge fans of of like, hashtag fail fast and writing huge medium posts about how we failed hard and, and, and all these things. And I always thought that was I don't know, I didn't I didn't really get it. But as I knew we were going to be recording this episode, I sort of started to think about it. And I've definitely had quite a few failures in my, in my career, it's just that I don't really look at them as like these devastating things. I look at them more as like great opportunities where I could grow as a developer and as a person and my my opinions around things and whatnot. So I think we're gonna, we're gonna spend today talking about like, when have we failed? And what our attitudes towards it? And most importantly, how do you how do you deal with failure? And and what are the benefits that can come out of that? - -13 -00:04:26,970 --> 00:06:33,329 -Scott Tolinski: Yeah. And so one of the things is, is that failure itself when you're starting a project, right, even just the the fear of failing can cause so many projects to just never exist? And that that fear of failure can like manifest itself in a whole bunch of different ways from like, excuses that that people are making to why they're not going to do something like, Oh, well, should I start this blog? Well, I don't know if anyone's going to read it. I don't know if my content is good enough. I don't know if things are No, absolutely right. I don't know if my office looks nice enough to take photos, or video in my office or something like that. So a whole bunch of like stuff that you're gonna put up as a wall to sort of prevent yourself from even having that opportunity to fail, right? Just because you're worried that it's not going to succeed. And because you're worried that it's not going to succeed, it's never ever going to start. And if it never starts, then you never learn that it didn't succeed for various reasons. But you also learn, you know, you didn't have any learning experience, it just totally falls flat. It's dead, right. And that's one of the biggest problems about, you know, having this sort of fear of failure mentality where you can't start something. And because you don't start it, it just never happens. I mean, login level up tutorials, when I started creating tutorial videos, it was like, I wasn't necessarily considering that people. I wasn't, I wasn't thinking that if people didn't watch it, it would be a huge failure, because I was just trying to help. I was just trying to bring some value onto YouTube for having tutorials, right. And so that allowed me to start it and realize that it could be, you know, successful. But if I would have been worried about, you know, are people going to like the sound of my voice or these videos going to be good enough quality or whatever, it would have never started. And I'm just think about all the learning experiences I could have lost from that entire, you know, stopping that before it starts. Yeah, - -14 -00:06:33,329 --> 00:08:02,850 -Wes Bos: I can't tell you how, how mad I am at myself for my first product, which was my sublime text book and videos. And nothing took me a year and a half to put together and I was just dragging my feet all around. Because not because I didn't know about Sublime Text, like there wasn't that like, for a lot of people. They're like, Oh, am I good enough is this is someone gonna call me out, this is gonna be totally, totally terrible. Like, I feel like and that's one thing that should not stop you either the fear of somebody calling you out, because that will likely never happen. And if somebody does have some constructive feedback for you, that's often great. Because they're willing to help you out. But it was just because I was like, Will anyone buy it? Is this any good? Will people get value from this, I feel like I'm ripping people off by charging the money for just, I'm just writing a book out of thin air and all these things. And then someone else came out with a sublime textbook at the same time. And I thought, like, oh, man, like, no one's gonna want mine ever again. And it took me a year and a half to sort of, like, build myself up to that, like, Okay, I'm just going to put it out there and see if anyone takes and it was a huge success for me. And it's really what got me started on this whole building courses and charging money for them. And, and I just kicked myself, because I really probably could have got that thing out in six months, four months, rather than than a year and a half. And I can't imagine now where I would be if I even had, yeah, an extra an extra year and a half of doing this kind of stuff. - -15 -00:08:02,880 --> 00:09:17,970 -Scott Tolinski: Yeah. And so I mean, there's, there's high stakes and low stakes stuff, right? Like, you spend all this time reading a book. And that's like high stakes, because if it fails, it's gonna feel like a big failure. And but there's also like low stakes failures, too, right? Like, maybe I'm just going to make this little package on NPM that does, you know, x thing for me. But some people might look at that and say, like, well, what if someone's critiquing my code? Or what if nobody uses it, or whatever, at the end of the day, like, that's low stakes, right, creating an NPM package and whatever, but there's still a sense of failure associated with that, or like, what if it doesn't work? And the whole thing is, it's like high stakes or low stakes, you just got to go for it and and creating something that nobody uses in the big deal. So if it's like low stakes, you got to understand that the the results of a low stakes failure, absolutely non existent, right, like it doesn't matter if you fail something low stakes, and even if you fail something high stakes, it can become a total learning experience if you treat it the right way. So do you have anything else on like, project start, like starting a project and feeling um, how to get over that just, - -16 -00:09:17,970 --> 00:10:52,200 -Wes Bos: I think you yourself, it needs to be aware of how does my procrastination or how does my feel of fear How does my fear of failure How does it manifest itself in my actual work, and that might be procrastination, that might be for a lot of people, especially in business, it manifests itself in listening to business podcasts and reading books and posting quotes on Instagram about about business and all these all these things where you're not actually doing the business thing. You're just trying to, to consume as much information and read as many blog posts and and stuff find these books as and at the end of the day, and even with even with coding this happens as well, at the end of the day, you just need to do it, which is the the whole idea behind my JavaScript 30 course as well is that like you cannot sit around and pontificate about these things for so long, that you're going to get better at it, the only way you're going to get better at it, whether it's business or whether it's web development is actually putting in the time and actually doing the work. So just be cognizant of, Oh, I'm starting to do these things, which is X, Y, or Z, and sort of try to catch yourself and don't don't be lying to yourself by don't even want to put our own podcast down. But don't be lying to yourself that listening to 14 episodes of syntax Oh, and on and is going to help you more than actually doing the doing the work. Right. Yeah. - -17 -00:10:52,320 --> 00:12:12,750 -Scott Tolinski: Yeah, at the end of the day, penned pen to paper is like really like the most important thing I remember. I'm a terrible writer, I remember like being just huge amounts of anxiety about writing papers in college, right, like, you know, long papers. And yeah, I mean, the sense of failure there is right, if you mess this paper up, then you're getting a bad grade, and you pretend to pass this class and all sorts of stuff. And for me, I like I said, I'm a terrible writer. So that was always a huge lesson that I had to learn in college was like, I don't, I don't care. Like if I fail or whatever, I just need to start writing. And if you start writing, or you start coding, or whatever, that gets the ball moving in some sort of positive direction. And even if you end up deleting everything that you just wrote, or edit it or start over in your codebase, starting is going to get your brain in a much better space, and it's going to get you working, it's going to get things flowing. And it's going to remove this sense of doubts. And at the end of the day, like you mentioned that this is just about procrastination, right? And this failure can stop you prevent you from doing anything, you just got to get started. And that that will that will carry you through and the more you get excited and started about what you're doing, the less you're going to worry about the bummers of what could happen if it doesn't work out. - -18 -00:12:13,920 --> 00:12:15,360 -Wes Bos: Exactly. Cool. So - -19 -00:12:15,360 --> 00:12:51,450 -Scott Tolinski: let's say let's say you've gotten over that hump, you started the project, and things are going fine for a while, maybe you're starting to have a sense that it could it could become a failure, or that it could blow up and mid project. At that point, when you're getting these sort of vibes, what do you what do you think you should do at that point? Like, how do you progress? Should you progress? Should you just stop, like, middle of the project? Maybe this thing's not not working out? What is your mind go? - -20 -00:12:51,990 --> 00:15:27,600 -Wes Bos: Yeah, totally. Because after you get that initial, you're often really, really excited about a project. And then as it starts to get hard, or you start to get into it for a couple weeks, and it stops getting as exciting. And it could very well be that the project is not a good idea. And you should shelve it. But I think there's just as great of chance, as you're just getting, you're becoming a little bit afraid that it might not be as good as you expected, or for whatever reason. So I want to encourage you at this point just to is first make that decision, it's likely because you got excited about it, this is likely something that you should try to finish. And I think that finishing things is the most highly underrated skill of all developers. I remember, like years and years ago, I was just like, trying to figure out how specifically Addy osmani how he does so much, because it seems like he's always cranking out amazing stuff. And he's got blog posts, and he's creating new tools. And he's doing open source work. And I'm just like, how does he do so much and, and I looked at it like a bunch of people who seem to just have this enormous amount of output. And it started to I started to figure out, it's that he just finishes stuff. He sees things through to the end, and finishes things all the way through. So if we You and I were to actually finish everything that we started, it would be likely that we would have an insane amount of actual output, right? Yeah. So I don't what do you do at this point? I think that what's important is that you get some sort of small wins. I think in life in general, small wins is really where you get your confidence from. And if you're building this monolith of whatever it is, you're building an app, you're building a product, you're you're trying to learn a new skill, you're not going to you're not going to get very far. So what are some examples of small wins? Well, when I teach to top the coding boot camp, one of the best small wins would be would be putting a code pen up, and that code pen getting picked which is putting it on the front page. I can't tell you how amazing that is for students to to get there. They're pen picked on the front page or to have somebody retweet who you really respect. Something that they've built, or just even getting a reply should like putting yourself out there saying, this is something small that I made and getting a positive feedback of somebody says, Oh, that's really neat. And how you did that I think those small wins, they just give you that little boost. And after a while, you start to get a little bit more confidence in yourself, and that will help you push that project through to the end. - -21 -00:15:27,900 --> 00:18:19,020 -Scott Tolinski: Yeah, I totally agree. And I know when I first again started level up, tuts, you know, I'd put up maybe a handful of like, maybe like 25 videos and had like, nobody watched them for a little while. And then when Chris Epstein from compass, yep. retweeted one of my videos on campus, it was just like, whoa, hey, yeah. And that was like, that was a little when that we did that. But that point, let me know that people can find this stuff. And they you know, and they will like it, if they find it, whatever. But that little small wind just really, really, you wouldn't believe how much confidence it gave me to keep going. One thing that I think that's important bellick mid stage project, you know, you're worried about if it's going to fail or not, is to is to have the ability to look at this totally honestly. Because if you're able to pull yourself out of the motional state of a project and look at it, honestly, you can determine whether or not that it is a already a true failure, right? Because I agree, absolutely. Finishing stuff is superduper. Important. But like, if the train is on fire in the heading down the train tracks or whatever, like you got to, you got to stop the train, you know, yeah. And there's that, there's that hilarious image of the guy sitting in the room full of fire, saying like, this is fine. And you know, sometimes you're that guy, and you can put that fire out and keep going and other times that that fire is going to consume you. And so I think there is a certain point in which you need to be able to have some metrics to admit like a total project failure, and and shut it down. Well, whatever those are, I guess it has to do maybe with you personally, like let's say you have a project that could succeed. But if you continue to put time and effort into it, you're going to like, lose out, you're going to be hurt financially in a major way, because of it, you're not going to be able to put food on the table for your family. Well, at that point, yeah, you probably want to maybe shelve it, or abandon it or something or do something. So there definitely is like a point, but you need to be totally honest with yourself and remove yourself from the emotionless of it. Because there could also be a situation where this feels like a failure, and you're feeling upset just because of a small loss. And that small loss isn't a major loss. And it's not like a vertical loss. And that emotional state can push you into like, screw this, I'm going home, I'm done. But like, that's not a great way to be either. So you need to take a step back and be totally honest, truthful and evaluate from like an outside perspective, whether or not this project is going to be able to continue or not. - -22 -00:18:19,920 --> 00:19:03,480 -Wes Bos: I think on that, that same note, in the business community, there's this idea of MVP, minimal viable product, meaning that rather than just guessing whether this thing is going to be a total failure or not, because like you can likely tell yourself, but if it's something that is going to be involving other people, like if you're building some sort of product, then it's you should what you should be doing is just building it and launching at the very minimal viable product that you can and seeing if this thing sort of catches on, if people get excited about it, and then if people are excited about it, if it starts to catch on, then you know, at that point, you can start to sink a little bit more time into it. And that just circles back to that that small wins thing where you're gonna start feeling a lot better about it. - -23 -00:19:03,720 --> 00:19:32,060 -Scott Tolinski: Yeah, small wins. definitely important. Definitely good for that, like brain brain bump to get you keep going to get you excited and happy about something. And actually, one thing I forgot to mention when we were talking about like, starting a project is like, I feel like people might mention things like, like planning for failure, like do you plan for failure? Like, West? Do you plan for failure? Like on any project that you start? - -24 -00:19:33,180 --> 00:21:19,610 -Wes Bos: Um, yeah, that was somebody asked me that the other day, they're like, have you ever had something that you've done that didn't do well? And I was just like, no, but then I like I thought about it a little bit more after that. And I was like, Oh, of course I have a huge I've got a huge list. Maybe we'll talk about it later of things that just totally, totally bailed and totally sucked and didn't get anything but I don't really plan for failure, but I think that I'm just fine with things. Not working out, because I know that like, I have a pretty good attitude towards this stuff. I'm not very I know a lot of people are self deprecating. And they know that they say I'm not very good at this stuff. And no one would ever like my stuff. And my wife told me once that I was unapologetically confident, just such a backhanded compliment, but it does describe my personality Well, in that if if it doesn't go well, then I'm fine with that. Because I know that I learned a lot along the way, I have a huge folder of just little, some tiny stuff from like, 20 minute code demos, to things that I'm just trying to stuff that have spent a couple days on. And then I realized that I'm going about it the wrong way. Or I have to shelve it, or even when I'm building my courses, I build the thing like four or five times in different ways. And, and I'm totally fine, because I think I'm happy with what I had learned along the way. Because I think my whole life is is more about course correction than it is big things that I try and fail from. So it's just like, oh, that didn't work, whatever. course correct. That didn't work, whatever. I learned a little bit here, learn a little bit there. And then as you go through life, it looks like a nice smooth path. But if you were to zoom in on that, it's just a bunch of little course corrections. - -25 -00:21:19,650 --> 00:21:36,000 -Scott Tolinski: Yeah, I hundred percent agree. I don't think I've ever had like an escape route. For anything that I've started. It's not like, when this project starts, here's what's gonna happen the moment it fails. And if you are unapologetically confident, I would say I am ignorantly confident. Like, - -26 -00:21:36,050 --> 00:21:36,720 -Wes Bos: exactly, yeah, - -27 -00:21:36,720 --> 00:23:05,430 -Scott Tolinski: I'm not, I'm not confident because, you know, I'm confident because I I'm not thinking that it's going to failure, or I'm not like thinking about its failures, or not purposefully, not thinking about it, or whatever. But, you know, I don't I don't believe in building those, you know, exit hatches Unless, of course, you need to like legally, right? If you have like writing contracts and stuff like that, obviously, you want to make sure you're, you're covered. You know, you can't be on the hook for anything legally, like that. But yeah, like a project that I'm starting, I'm not thinking like, well, when this code inevitably doesn't work, this is what I'm gonna do. I'm thinking, when this code is super successful, and I have a million dollars in my pocket, this is what's going to happen, you know, yeah. But yeah, so I i think that is important to not planning for failure and not not worried about the cause of failure or whatever. Yeah. And so speaking of failure points, and things like that, are planning for failure. When we were both building our shopping carts, you know, I just wrote my own. And I like, didn't plan for when it didn't work. However, like, instead of building my own, I wish I would have, like, thought about what kind of systems could I use that would have helped me build a shopping cart and a little bit less pain than having to struggle through myself. And unfortunately, I did not know about snipped cart at the time, but I wish I had maybe I wouldn't have failed so much building my own over and over again. Fantastic segue. Yeah, - -28 -00:23:05,460 --> 00:24:43,200 -Wes Bos: speaking of failures, when I launched my react course, there was a bug in my paypal library. And I was I probably lost thousands and thousands of dollars because of people couldn't give me the money. So our sponsor today is snip cart, which does online shopping cart right inside your actual applications. And SIM card is fantastic for if you want to start accepting money online, if you were to use stripe or PayPal or anything like this, at some point, you do need to have a server and you need to be able to integrate with each of those different things. So what snip cart is a full end to end shopping cart, you can still integrate it with your stripe and your PayPal and all those other payment gateways. But you can just sort of drop the cart into your actual website and this is great because you don't need a back end for it if you're using react or view or you have a website where you don't want to have to worry about maintaining the entire infrastructure of of selling on yourself or your client website. That's exactly what this is great for. So you drop it on into your website and it comes along with all the features that you would expect with any type of shopping cart so things like a reoccurring subscription so if you're trying to build somebody like Scott is if you wanted to Bill everyone monthly for access to your tutorials you totally good if you're doing physical goods and you need to do shipping and being able to calculate shipping for people it'll do that for you if you need to do I I talked about in the past when I've done entire I have built an entire coupon system and I probably put weeks of my life into building this coupon system where the coupons just work with all the - -29 -00:24:44,460 --> 00:24:46,500 -Scott Tolinski: wish Yeah, yeah, I know - -30 -00:24:46,530 --> 00:25:34,380 -Wes Bos: like multi currency is selling I don't do right now I charge everything in USD. So I don't have the ability to accept any other sort of currency which I don't know maybe that'll that would help my help my system inventory management if you're selling something like stickers. What do I have to do when I have no more stickers left, I have to redeploy my website, turn it over, right? invoicing, those European customers always asking for proper invoice, it will give you that. So all the features that you're looking for without you having to to build any of this stuff. So if you have an idea for a product or something that you want to sell, maybe it's a course people email me all the time, what do you use? Well, you can go ahead and just sign up for a sniff card and integrate that in in a matter of minutes. Rather than spending the time that you would have to build something totally custom. - -31 -00:25:34,410 --> 00:25:41,040 -Scott Tolinski: Yeah. And I love it. I love that is just HTML and JavaScript, right? Yeah, no, there's no like platform lock in or something like - -32 -00:25:41,040 --> 00:26:11,670 -Wes Bos: that. Exactly. It's all you have to be on WordPress, or you have to be on something like it, or you have to be on react, you just integrate it right into whatever it is that you're using on the front end, and the back end stuff. And they also have a whole set of API's as well. So like you can get up and running. But if you need to do something custom, you can hook into all their web hooks and all their API's and pretty nifty. So check it out at snip cart.com forward slash syntax that's going to get you your first month of production for free. Nice. Thanks so much for them to for sponsoring. - -33 -00:26:12,030 --> 00:27:03,960 -Scott Tolinski: Thank you snip cart. Cool. So okay, we talked now about pre project, we talked about mid project, and let's say, you were in that event, where that room that was on fire completely engulfed in flames. And the the project completely just failed into misery. What are some next steps, maybe like, post post mortem, like, you know, the, at the event of failure after failure, that sort of thing to actually make this experience worthwhile. I know, I know, personally, I think this is one of the the most important parts of failing anything, and maybe, like the only important part about failing anything, because this is the part where you get to learn a whole bunch. And the learning experiences are why we fail anything. - -34 -00:27:03,960 --> 00:27:04,530 -Unknown: Mm hmm. - -35 -00:27:04,590 --> 00:28:30,960 -Wes Bos: So I'm gonna give a specific example for this. And it is one of the probably most expensive failures I've had in the last couple of years. And that is with Facebook ads. So if I, the Facebook is this a lure of this money machine where you put in $1. And for every dollar you put in, you'll get $1 50, back in sales, and you just can just put in as much money as you want, and you'll double your money or get 50% return on your money. And that's not true. I think it is true. There's a lot of really good stories out there for people who have cracked the nut and have figured it out. And it's this just machine for people. However I have, I've started to get it to work now. But I think I've probably spent about 15 grand on Facebook ads just to learn what doesn't work. And just to learn that developers are very hard to market to when you're trying to use traditional things like running Facebook ads, rather than the primary ways that I market myself now. So what do I do? Well, I sit there and I look at all this money, like this significant amount of money about 15 grand that I've lost, trying different things and trying to crack the code on these just Facebook ads. So do I sit there and what most people do at this point is they they throw their hands up in the air? I've talked to so many people and they say Facebook ads don't work. And I sit there and look, I'm like they do work. Yeah, - -36 -00:28:30,960 --> 00:28:32,220 -Scott Tolinski: they clearly work. - -37 -00:28:32,250 --> 00:29:53,730 -Wes Bos: Yeah, they work very well. That's why it's one of the biggest companies in the world. Because Facebook at the end of the day is just an ad company that sells ads on your feet. So if it did not work, they would be out of business instead of being one of the largest companies in the world. So they do work. It's just that you don't know how to do it. And the cost of entry into one of these things, for me was $15,000. And I had to spend that much money until I figured out how to actually make it work properly. And even now, it's not even like working super well. I've hired people I've paid. I've paid experts to try to figure it out for me, but I just haven't like cracked that nut just yet. So I think that you need to sort of look at these failures as the price of admission, whether that's your time that you've you've spent trying to invest in it. Sometimes I've spent a couple days trying to build something and then I realized that I need to scrap it. And as frustrating as that is when you you look back at it. Don't write that entire platform off. Don't write this code off. Don't write yourself off as not a developer, especially when you're first learning to code. Don't say like, I'm not a good person, that coding is just the cost of admission. And you sort of need to put in the time or unfortunately put in the money before you can get to that point where it's working out well for you. So you need to fail in a variety of different ways. First, - -38 -00:29:53,760 --> 00:31:26,160 -Scott Tolinski: yeah. Yeah. And so I think that other like, failing on your own, it's always is easy to, it's easier to see when you fail on your own right, like, what I did wrong here, what what I could have done differently or this this price of admission, right? Like maybe I didn't do anything wrong, that's just that's just the the cost right to get started. But when you fail on a team, I don't know how much you've worked on large teams or anything like that, it's it's so much easier to skirt the button, like, I'm not responsible for this, so and so did this. And so and so did this. And that's why it failed. But I think with any failure of something that you are a part of, that you have some sort of responsibility in that failure, right. And I think it's important to be honest with yourself and accept that role that you had in that failure and take a look at it that way. Because even if like, even if the thing that you did was not the thing that caused it to fail, that didn't mean that like you couldn't have done things better to prevent it from failing. That doesn't mean you have to be hard on yourself, it means you have to learn from those experiences, and that you have to grow from those experiences. And so you have to be just again, like, like I mentioned before, you have to be honest with yourself about your failures, because that's the only way you're truly going to really grow from them. And so this is actually kind of hilarious. My wife and I decided to start watching the old seasons of Top Chef because I hadn't seen like the first like five seasons. I don't know if you watch Top Chef at all, top. - -39 -00:31:27,060 --> 00:31:28,980 -Wes Bos: A more of a master chef fan over here. - -40 -00:31:29,400 --> 00:31:39,300 -Scott Tolinski: Like master chef, do we do this? We play this game where the first episode airs, and then you pick two people for both math to Oh, nice. And then - -41 -00:31:39,330 --> 00:31:40,920 -Wes Bos: yeah, we there's like money on the line. Oh, - -42 -00:31:41,130 --> 00:31:46,170 -Scott Tolinski: we don't put money on the line. But there's a lot of pride on the line. Because we get really intense about it. - -43 -00:31:46,170 --> 00:31:48,960 -Wes Bos: And then even more expensive in the Alinsky household. Yeah, - -44 -00:31:48,960 --> 00:33:15,930 -Scott Tolinski: right. And, and if one person goes away, you get to pick another person. So your your people don't have to write out to them. Either way, if your person wins, it's big, big thing. So for buddy, we were watching Season Five of time, I don't know what season, I don't know, six Chicago season or something like that. And there's one chef halfway through the season. Like, I don't know, she forgets to turn off the burner for her rice. And then she comes back to her rice. And she's like, somebody burnt my rice. And it's like, No, you burnt your rice, like everyone and everyone on the show was just like, you obviously burn your own rice. And they're just like, no, not taking the blame. And then like later, her Rice was under cooked like two episodes later. And she was like, who moved my rose off the burner, like a totally separate incident. And like thinking like, maybe you should just keep an eye on your rice and take responsibility for your rights, because this was your failure both times. And so yeah, but it's just so funny, cuz it perfectly, you know, has to do with this, it's like, if you are making up all of these, you know, fictional scenarios to prevent yourself from accepting and realizing your failure, just because you don't want to admit it being a failure, then that's a major problem. Because you're not growing from that experience at all. Like, you need to take these situations that are your failures or your situations and grow from them. And you can't grow for them without accepting responsibility for having - -45 -00:33:15,930 --> 00:33:41,160 -Wes Bos: that that humility to say, I screwed it up, it didn't work out for me as I had thought, or I made a mistake, or I just thought it would be different at the end. And and being okay with that and being able to eat that is eat your burnt rice, then that's, that's a that's a huge character trait that that I think every developer needs. And I guess every human in the world needs to, to grow. And - -46 -00:33:41,219 --> 00:34:44,340 -Scott Tolinski: yeah, this is really honestly the most important part of failing, because you fail. And you can go from two routes from it, right? You can you can blame others, you can do whatever. And you can learn absolutely nothing from it, and then make those same mistakes over again, right? I mean, that illustrated in that same episode or two episodes of Top Chef, she made that mistake, she didn't accept responsibility for a couple episodes, she made a very similar mistake, because she didn't learn from her first one, right? So it's like, if you make a mistake, you got to learn from it. And you got to dissect it. And you got to figure out what went wrong, so that you don't make those mistakes again, and can you will you make those mistakes again, probably, but like, sometimes it takes several times to learn something, but as long as you're doing this sort of like post mortem, like what went wrong, and how can I do? Like, what can I do to fix this, right? Make sure this doesn't happen again. It'll be in your brain and your brain is going to make those connections a little bit better next time. And it's gonna prevent you from having more future failures, you know, exactly. And - -47 -00:34:44,340 --> 00:35:28,610 -Wes Bos: to go back to the business community here that's called pivoting, right? There's a lot of businesses that started doing one thing and it didn't work out. So what do they do? They they pivot, meaning that they they change the course of their actual business, they change what they are doing as it business they change whatever focus they are as doing a business and then the sometimes they work out like a Twitter started. What did Twitter start as initially? Twitter started as something weird like a, like a social network for Bird Keeper or something silly like that right? And it didn't work but they after a while they they changed it to eventually it became what it is today, which is a spot for racists to hang. - -48 -00:35:28,610 --> 00:36:03,650 -Scott Tolinski: Yeah, right. Yeah, exactly. Or like ello ello pivoted pretty hard because they were like, originally, like, they will, I think they were like, we're, we're coming for Facebook. Like, we're gonna be that the minimal social network or whatever. That's like, cool. But then, like, after nobody was using ello anymore for a little while. And it was just like maybe like the hipstery people on it. They were they were totally changed themselves into like a Pinterest for creatives. And they're like, the place to learn all this creative stuff. And now it's the place where I get like, you know, fake accounts, adding me all the time because nobody else is using it. - -49 -00:36:05,690 --> 00:36:10,170 -Wes Bos: Yeah, I get those emails all the time. I think I deleted my account. Yeah, - -50 -00:36:10,230 --> 00:36:28,500 -Scott Tolinski: I need to do that. Interesting. But yeah, so I mean, the those those pivots, yeah, it's super important. And those pivots can happen accurately without you understanding exactly went wrong. And knowing what you can go or what you can do to sort of move on from and fix things a little bit. - -51 -00:36:28,730 --> 00:38:52,020 -Wes Bos: Let's take another quick break and talk about deadlifts. So deadlift is a company that will create you a personal I shouldn't say company developed as JC and that it's it's two guys who are nuts about fitness and are on a sort of on a course for making developers extremely healthy. And what they're doing and what they did for both me and Scott is that you have a chat with them, you fill out a questionnaire and they are going to come up with a personal training and a personal nutrition plan for you to hit all of your goals. So for me, it was I wanted to lose something like 20 pounds, which I'm 17 pounds in after about two and a half months. So far, I wanted to put on some muscle, which I'm looking pretty good and and I just wanted to and I think most importantly, I wanted to sort of like hack my energy, I wanted to be a little bit more on when I'm working and be able to to get a little bit more done. So that's exactly what they did. They changed my diet, they changed how when I'm going to the gym, and they really worked with me, because I'm like, I don't have a ton of time to go to the gym, I only have like, and what they ended up doing is I'm just going four days a week for 45 minutes. So I talked a little bit about my own journey in the fitness podcast, if you want to go back back and listen to that. But they sponsored the fitness podcast, and they had over 100 of you web developers sign up using the coupon code syntax, which gives you 50 bucks off, which is amazing. So they're sponsoring again, they're coming back. And they're they're looking for people who are interested in getting healthy in the new year. So I know we're we're launching this thing on December 6, it takes them about two weeks to take your questionnaire and convert that into a personal training plan. So if you're looking at maybe the last couple weeks of of 2017, or you're looking to kick off 2018 getting healthy losing some weight, getting that more energy, I would definitely check it out. It's at dev lifts.io. And if you use the coupon syntax, you're going to get 50 bucks off of that, which is amazing. It's a really good deal well worth well worth the money. I can can vouch for it myself, as well as the the hundred other developers that have already signed up in the and they're talking all day in the chat room. - -52 -00:38:52,050 --> 00:40:03,920 -Scott Tolinski: Yeah. And one thing that I think is perfect about doing deadlifts like right now, is that you know, like January hits and I don't know how I know you're a member of a gym but like how many January's Have you ever been a member of a gym floor but January in a gym gets really crowded because everyone really wants to start the new year off, right and get them get themselves losing weight and feeling better and in gaining muscle and stuff like that. But what happens in February is that February the gym is dead. Because all those people that came in January, you know, they're just over it. But the best way to not get over it and to like really stick with it and make a big life change is to have a plan. And I think that's the the very best thing that deadlifts does is it gives you a plan so that you don't just go for a couple of weeks and you're like okay, I've lifted some weights, I'm feeling better. Now you're like, No, I have a plan that this is what I'm going to do every single week, day in day out and this is how it's going to go. And by February you're going to be feeling so so much better that you're not going to want to stop and I think that's just such a big thing as people go in there and they're just say I'm gonna go to the gym, you know, and then Yeah, a month later, they're meandering around the gym without a plan. So - -53 -00:40:04,050 --> 00:40:44,550 -Wes Bos: this is actually that's what I was doing. I was like, I was just like walking around being like, what should I workout today, but like, for me now, it's so mindless, I just have the plan on my phone, and I walk into the gym and I scroll through it. And I say, today's Monday, I'm doing shoulders, I'm gonna go do shoulders after this podcast today, I'm going to do shoulders this many times, and like I do, the reps they have, they have the number of reps, the amount of times you just do it. So you just do that many, and you lift as heavy as you can. And then you go home, it's, it's awesome. You don't have to think about what you have to do or what you should be doing. You just follow the plan. And, and for me, that's that's what the real value was, because I just needed somebody just to sit me down and tell me do this, eat this. And you'll be fine. - -54 -00:40:44,760 --> 00:40:57,690 -Scott Tolinski: Yeah, I know, you have to make any decisions. You can go put on some podcasts or some music and just like hang out and do your go down your checklist, do all your stuff. And like I said, a month or two goes by, you're going to just be feeling great. - -55 -00:40:58,800 --> 00:41:16,920 -Wes Bos: Awesome. So again, that's dev lifts.io. Use syntax for 50 bucks off there one time purchases, it's not something you're going to be you're not you're paying for a monthly you get access to the slack room and the personal training plan and the nutrition plan. So sign up for that devilish.io thanks a lot to them for sponsoring. - -56 -00:41:16,940 --> 00:43:16,320 -Scott Tolinski: Thank you. Cool. So okay, so we've talked a little bit about strategies for failing, dealing with failure, not dealing with failure at the beginning of things, ignoring failure, that sort of stuff. But let's talk about some of our own personal failures. Because we did a nice little list of both of us did a nice little list of things that we've totally failed on. Yeah, and I failed on so many things, I can't even I can't even list them all here both through code or not through code. And they've all been very, very impactful. And some have been very significantly impactful in my life, and others have been minorly impactful, but they've all had a positive influence in some way through learning things. So I think one of the things I would want to start off with is something that's that's big in my life is this breakdancing. I've been dancing for a long time, if you you've heard me talk about it. And for the first like four years of breaking, and this is like practicing maybe like four times a week going to competitions, like every other weekend, I did not win a single competition, not like the way these competitions work is their tournaments, right. So if it's a three on three, your group goes from like a top 16 and a bracket down to the finals. But I didn't win the single tournament for four years, and I entered tons of them. And it would just even even just absolutely, maybe not even getting out of the first round, just just failing, left and right. And then still this like, just keep going, just keep going, just keep going. And then the very first time I ever got to the finals, we won because it was like I'm at the finals. I'm not losing this time, you know. But those those failures, that by examining him and building off of them, you learn what to do better, the group got better because we looked at why didn't we win this, we watched the footage we built off of it. And eventually we won, then we won and we won and we won, you know, we want a whole bunch. So. So that was a big failure. For me that definitely, like taught me perseverance. You know? - -57 -00:43:17,880 --> 00:46:00,900 -Wes Bos: That's, that's pretty cool story. I like hearing that, like, stuff that's not necessarily development related, but just like life life in general. Um, for mine, I'll talk about after I launched my sublime book and videos a couple years ago, I was like, This is going great. What will I do next? And then I thought like, I'll be like the tooling guy, I'll talk a lot about like, different tooling that you can use. And so I did the thing that everybody does, and that is started weekly email newsletter and try to be Mr. Peter Cooper of JavaScript weekly. And nobody, nobody cares. Nobody wanted to sign up for that at all. And like, I got maybe like 100 hundred and 50 signups from it. And I ran like a bunch of giveaways. And that didn't really work out well. And I was like, Okay, and then and then what I started doing is I started writing this like tooling book. And I had written a whole bunch about it. And I sort of just like, couldn't get like a grasp on like, what should it include, and what Shouldn't it include, and it started to sort of get away from me and I didn't really feel good about it. And I had, I had written a lot. So then I switched over to writing just a book about gulp. And I actually still have about 15,000 words, which my sublime book has about 20,000 words. So it was almost an entire book on just how to use golf. And then I was just I this was about like two and a half three years ago just sitting on it waiting for a golf for to come out because I didn't want to release this thing. When golf three was out, well, two and a half year later, gulps four still not out and I don't know if it will ever come out. And I still use golf every now and then. But I think that the the industry is slowly changing to things like web pack and, and whatnot. So I wasted many, many, probably at least a couple months on on all of this stuff thinking that it will be my next thing and, and right now it's it's shelf, it's I just put it on the shelf, and it's collecting dust. And it was definitely a big failure for me because I just didn't know what I should do. And I didn't know, like, what people would like. And after I had the success of my first one, I still didn't like feel all that good about it. So it's kind of frustrating to see that. But after that I had just started learning. I had been doing react for about six months a year and then I, I created react for beginners, which took off really well. And that really just that changed my whole career from writing books to creating videos because I'm one thing I had learned from the Sublime Text is people like the videos a lot more than the actual book, which is pretty cool. And, and I'm glad that even though I wasted all that time, I'm so glad that it happened. - -58 -00:46:00,930 --> 00:48:05,310 -Scott Tolinski: Nice. Yeah, so a big failures for me. I mean, I've made what like maybe like 1000 I don't know how many videos 1000 plus something about on YouTube, I'd have to check my stats, it might be like 1200, or something. At this point, I made a lot of video tutorials on YouTube. And not every one of those is excellent. Like, especially a lot of them at the beginning are not excellent. And you know, when you're on YouTube, and when nobody's watching you, you don't get a lot of people reporting how bad Some things are. But when you people start to when you start to have a viewership, you get a lot of comments letting you know exactly what's wrong. So want to this is a, I've had a lot of these videos that have taught me a lot about what to do better on YouTube. And I've, instead of just ignoring a lot of the comments, I've take a take them in, and even if they make me angry, I sit on them and I don't get angry about them. And I figure out what the truth behind the comment is and how to improve. But one particular video is like my very first WordPress video, it's actually pretty old. I think it's like maybe like 2012 or something. It's an old video. But at that point, I was still sort of figuring out my format, and I was like, you know what I'm gonna start before I start this video, because I feel like people aren't getting the idea of what the series is gonna be like, before it starts, I'm gonna do an introduction to the series. And so I do this like introduction to the series, which maybe takes like two minutes, and then I start the tutorial about how to install WordPress. The video is titled How to install WordPress. And so all of the comments on the video are like, this guide takes two minutes, he's talking about all this stuff. And he's not showing me how to install WordPress, like the titles how to install and you didn't show it to two minutes in and like, oh, that that video might be my most disliked video and like the most angry comments to this day. I'll get comments on it maybe like once a month or once a week. And it's just like, well, what are you doing? Taking two minutes? Everybody jumped at two minutes and like, yeah, okay, I'm never ever going to do that again. Because, - -59 -00:48:06,660 --> 00:48:07,230 -Wes Bos: you know, - -60 -00:48:07,859 --> 00:48:23,970 -Scott Tolinski: sure enough, I could say well, okay, don't you want an introduction to this content? Okay, I guess not. So now I have the intros as a separate video with a major learning experience. And I don't have all those angry comments anymore. So it seems like a small one, but you would not believe how many comments I get about it. - -61 -00:48:24,569 --> 00:50:39,660 -Wes Bos: Yeah, absolutely. So for mine, I'm going to talk about failure of blogging, because for many, many years, back in the day, blogging was the way to get rich, and I myself had a thought, wow, all I have to do is write these blog posts and stick a bunch of YouTube or not Google AdSense on it. And I'm gonna make tons and tons of money. So back before I was even doing web development, I had I had this blog called Craig nomics, which I used to flip blackberries on Craigslist, and he used to flip bikes, and I used to, I would do all kinds of stuff. It's funny, I should look back and see if it's cached. And I just like, I'm like, this is gonna be great, because it's gonna write all these blog posts about it. And, and it didn't work at all. Nobody cared. And nobody went to the site. And the no one found it via search engines. So I ended up going and starting blogging about web development, I thought, Okay, this is it. And I just had, I was just writing these crappy posts that were like, top 10 lists or anything like that. And it never had worked from that. So I'm sitting there looking at all these failed blogging experiences. And I'm saying the thing that I hate is blogging doesn't work anymore, or things like that. And it of course, it works. It's just that you're writing crappy stuff. So slowly through that I had gotten a couple blog posts that that did really well. And then I realized that the blog posts that do well are the ones that have good content, the ones that you're actually helping people learn new things or helping people figure out specific problems that they have with with the technology stack. And that's really what set the set the wave For what I'm doing now is, don't worry so much about like, you're starting to see it. Now I get emails from people all the time where they're like, just like spend a day recording a course. And I'm doing air quotes right now. And they try to just like, blow this thing up. And because they see I post how many people have bought my courses and they see it. And then they there's like, oh, that that guy just flips on a screen recorder and sells all these courses. But at the end of the day, like, I don't care about that stuff anymore. I care about how do I help people learn a topic as best as they possibly can, is, what I've learned is if you focus on that as the end game, then it's going to start to work out for you. - -62 -00:50:39,690 --> 00:51:45,360 -Scott Tolinski: Yeah, I have something that's very similar to this is that I at different stage, you know, making apps was the key to getting rich, so I was like, I'm gonna make a whole bunch of apps, and I'm gonna throw some ads on them. And I'm gonna find some way that these these apps can, you know, be somewhat popular or whatever. And so I made an app that was simply just a club air horn, you push a button that gives you that burn, you know, because that's actually something I just wanted, like I wanted, when I wanted to learn how to make apps on Android, I also wanted to just, I wanted to have that. So I made that, and it actually got a bunch of downloads, and I made, you know, I was making like 40 bucks a month off of ads for it. And so instead of being like, this is great. Let me expand my learning, let me make better apps. Let me you know, take what I've learned there, I took that, and I was like, let me just reproduce this as much as possible. So I made a whole bunch of apps that did just just terrible functionality, they did nothing for anyone. And I was just thinking, I'm like, Okay, if I have, you know, 40 apps that are all making me $40 a month, like that will give me some money. And and - -63 -00:51:46,530 --> 00:51:56,400 -Wes Bos: I always do those calculations, like if I can write 700 blog posts in here, and they each make $2 a day. Yeah. And I'll be drinking Exactly. On the beach. Yeah. - -64 -00:51:56,400 --> 00:52:42,690 -Scott Tolinski: And the end result was is that most of the apps were terrible, they didn't service at the end, like nobody wanted them. So like, I had a couple of apps that that made me some decent cash and a couple of apps that were making me, you know, one cent a day, and it was just terrible, because I just wasn't focusing on the right things. And so, I mean, that that did teach me that, you know, quality wins out no matter what, because, yeah, you know, I'm definitely a quantity guy and make a lot of videos, but quality is is always going to win out. So yeah, it also taught me I'm not cut out to be an Android developer, because I don't have the Java background. But other than that, like, you know, if I, if I would have spent more time into making these apps more useful, then I probably would have succeeded quite a bit better. And who knows where I would be with that? - -65 -00:52:43,980 --> 00:53:24,960 -Wes Bos: Exactly, exactly. Um, I don't have a whole lot else more, I just got some some notes here on just like, explanations that have fallen flat on specific things like I teach in person quite a bit. So I've definitely had some doozies of explanations where nobody in the class understood it or conference talks that didn't necessarily go as well as I had hoped or, or anything like that. And you learn from those and you move along. And I think that it's it's totally fine to to have these failures in technical explanations, because it's really helped me figure out and sort of anticipate different issues that people may be having. - -66 -00:53:25,290 --> 00:57:18,150 -Scott Tolinski: Yeah, I had actually a major, major failure recently that I would like to talk about, before we get Yeah, I I invested maybe like a year and a half a year and a quarter of my life and a ton of hours more than I can possibly count into a startup. That seemed like it was an awesome idea. Right? The idea was really solid. The people behind it had excellent networks, right, we had one person who had a network of investors, we had another person who had a network of, you know, knows everybody in the industry, we're trying to sell to I'm not going to go into too much in depth about this, because I, you know, I don't want to call anyone out directly. But like, I was the developer, I was the only developer and although I was promised a lot of things, like, you know, further, you know, attempts at investment, and we're going to do this in this in this to market it. I worked my butt off and made something really excellent. That could have been much more excellent. If the other promises, were, you know, we're follow through what if we would have gotten some investment we were able to hire some people and but you know, a single person working on something for this long, can only make it so good. And so it's a bummer that I at the end of the day, I left the project, and I said I just have to be done with this. It's not a it's not a productive environment for me. I you know, put all of this into it. And I'm not seeing that same stuff coming back to me. And so this is a failure that, you know, I want to blame on the other people involved, right because I don't feel like it. I contributed to the project's failure, right? But at the end of the day, like, what could I have done differently? Like, I think in this situation, like, I was pressured, again to features, features, features, also the only designer on it. So instead of trying to always go with what they're saying, you know, we need these features. And these features and these features, I should have been much more directed like, this is what I need to be spending my time on, we can't do these features, we can't do this, or we can't do that. And I definitely, I don't think I was as strong with those points as I should have been. And that definitely led to the outcome of the project, which was, well, we have a project with a lot of features that needed to be much more stable and needed better design needed a whole bunch of more things, right. But overall, it was very disappointing, because I saw a successful idea, I saw what should have been, you know, a successful group of people. And it turns out that the group itself was dysfunctional, and was always going to be dysfunctional. And I should have noticed that from the start, and it's super disappointing, you know, it's super disappointing to have it now workout, but at the same time, I'm super glad that I'm not focusing on at all anymore, I'm 100% into my tutorials, and all this stuff that I'm feeling very confident and happy with. And at this point, you know, I can rely on myself to get it done, I don't have to rely on a sort of team and I can, you know, build a team of people myself, rather than having this this group here. But yeah, that was a huge disappointment, and I sunk so much time into it, the the positive outlooks for this, like, what I learned was one, you know, think really, really long and hard about who you go into business with and to, I learned a lot of excellent code techniques, it was the largest application I've ever built. It is taught me a lot about improving my own platforms in so many ways, just because of all of the things I had to learn from building such a large platform. So I learned a lot of new technologies, a lot of new skills, and I was able to apply that both within my tutorials, as well as in my own codebase. So those are the positives, even though you know, you sunk so much time into it, not a complete failure, not a complete waste. - -67 -00:57:18,930 --> 00:57:49,470 -Wes Bos: That's always cool to hear what other people's like, big failures are, because it feels like sometimes, especially in the tech community, you just see people that are winning all the time, when the reality is, is that there's a lot of people trying to do a lot of stuff. And they have some very either time or money expensive lessons that they've learned along the way, but you look back at it, and it's it seems to be worth it in whichever ways like you like the ones that you've just explained. Sure. - -68 -00:57:49,500 --> 01:00:18,600 -Scott Tolinski: Yeah. Yeah, like some, some are more expensive than others. And you you learn from it and make it make that expense worthwhile. Otherwise, it's just gonna be a big old expense. I also I also attempted to become a professional musician twice in my life, neither which times were going to work out. Actually one of them could have I was in a band for a long time. And my uncle was the editor in chief of Guitar World Magazine, which is like the biggest guitar magazine. And so we had a little bit of an end to the industry. And we recorded a really, like our band recorded a really like, professional four song album that we were selling, and we were selling like decent copies of it. And people in his office were like, liking it. It was getting passed around his office and like, people weren't sure who the band is. And he didn't tell anyone that was his nephew. So he wasn't like, I'm the boss. Like, like my nephew's band. Yeah. And we started to get some some decent calls. But then we like we're all going to college. And you know, we got to we were playing like radio shows for our local radio stations and stuff like that. And then everyone was just like, you know what, I'm gonna go to college instead. That was that was pretty much it. Nobody Nobody had the passion to keep it going. And then another time I tried to do it solo. I've released like three three albums myself, don't look them up, because I'm not good at singing. I like the music a lot. I'm just not i'm not cut out for it. It was one of those ignorantly confident moments where I'm just like, yeah, I'll just put this out here. It's pretty good and some of the stuff I listened to it I'm like yeah, I really liked this and some of it I listened to it. I'm like, What the hell was I thinking? So that was gonna happen. I did one concert as a solo artist and it was pretty sweet. It actually turned out much better than I thought it would have because I was playing this guy and then they had these rappers that went on before me and then I was not rap music, it's singing and stuff like that. And I asked the DJ if he could do some like turntable scratches over my music because I my music is like all pretty boy influenced like break beats and funk beats and then like, acoustic tired stuff like that. It's kind of interesting. Music and the DJ was like scratching over my music and it turned out so good. I was just like this. This made me so much better. I definitely appreciated that. So I tested it. It was never gonna happen. I don't I didn't I don't have I don't have the stuff but I definitely wanted it to happen. - -69 -01:00:19,230 --> 01:00:22,800 -Wes Bos: Can you can you cut a little bit of your music into the end of this podcast? - -70 -01:00:23,430 --> 01:00:32,820 -Scott Tolinski: Maybe? Yeah, I tweeted out about it there. The song I do at the beginning of every level of tut's video is like a modified version of one of my favorite songs that I've recorded. - -71 -01:00:33,090 --> 01:00:41,820 -Wes Bos: bhana wicked, by the way, people are asking what happened to the hilarious sit, strap yourself in, we get that - -72 -01:00:41,820 --> 01:00:43,260 -Scott Tolinski: back for the set? Yeah, - -73 -01:00:43,260 --> 01:00:50,820 -Wes Bos: we'll add it back in for a couple episodes. Just keep you guessing. Yeah. keep you on your toes. Awesome. Well, do we got some sick pics today, Scott? - -74 -01:00:51,600 --> 01:02:31,800 -Scott Tolinski: Yeah, so my sick pick today is cypress.io, which is something that was introduced to me at a local meetup here and is a basically a test runner for end to end testing who replace Selenium. Selenium is amazing. I never say it out loud, selenium, I think it would replace that. But what's so good about Cypress, this isn't an ad. By the way, I just really liked this. I hate writing tests. And I like this a lot. It, it runs your tests next to a video of well, not a video with like the actual browser running the tests. So as one person described in the meetup, like sometimes writing tests can be like trying to solve a problem or make sure a problem solved while being like blind and deaf. And in this point, you can actually see what's going on, you can see exactly what the browser's doing, you can jump back in time to when each test is running to see exactly what the state of the browser was at that moment that the test was running. And the syntax for writing your test is just like jQuery. So it's super easy. Does like automatic waiting for you. So if I say find this element on the page, and the elements down on the page, it will wait until the hell Oh, it has a timeout. But it waits for a couple milliseconds, see if sees if that element appears on the page. If it does, then it moves on to the next step. does whatever you have to do. But I found it to be like it's like writing jQuery and writing your tests. It's superduper. I don't know for someone who doesn't like writing tests and make me like really, really like writing end to end tests into integration tests here. So cypress.io check it out. Nice, nice, nice product right now. - -75 -01:02:33,450 --> 01:05:08,370 -Wes Bos: Cool. Well, to check that out. We've had a lot of people ask about doing a show on testing. And I think it'd be pretty interesting to do something like that and talk about these different ways of approaching so I'm gonna try cypresses while out for myself. Yeah, I like it. My second pick today is a dash cam, actually, and I've been running it for for about a maybe about a year now or maybe maybe about 10 months. And I always like talking about this kind of stuff with other developers because it's not directly related. But we're all sort of interested in this like techie stuff, especially if you have a car and you want to put some tech into it. So the dashcam that I use is called a a dome d 201. And it's actually just a dash cam that comes out of China. And what's kind of interesting about this is that right now in China there's a lot of was a lot of movement in in camera chips and sensors, which mean that cheap little cameras are getting really really good. So things like your GoPro or any any sort of like alternative GoPros in your cell phone and in this case, now a dash cam, it's getting really really affordable to to pop a really good camera that records in your car. So the dome t d 201 was I think it was about 100 bucks Canadian for me and I'm just looking at it right now. So that's probably about 75 bucks American. And it's amazing because it's super good at recording in low light, it's super good at detecting when there's like a collision so what it will do is that if I if I accidentally slam a car door too hard, it turns on and immediately starts recording because it says oh someone just bumped into you and now they're trying to run away so try to grab their plate and I've actually caught two accidents on it already I luckily haven't been involved in any of them but I just look at the hundred dollars versus the like nightmare it would be if I actually did get into an accident and the fault was disputed. Whereas it's so cheap just to pop a little dash cam into your actual into your camera so it doesn't come with the SD card so you do have to pay a little bit extra ticket one of those but they're so cheap now. I think I can I think I have like a 32 gig card I can put something like 11 hours worth of footage on it. It records at 2020 560 by 1440 which is amazing. So big, big fan of, of this dash cam. So check it out nice. I've - -76 -01:05:08,370 --> 01:05:11,430 -Unknown: always wanted to get one of those. So that's a really cool, yeah, - -77 -01:05:11,640 --> 01:06:16,890 -Wes Bos: it's pretty cool. And I also owe one of the downsides to this is that it doesn't have an integrated GPS. So it comes with a GPS and the GPS is used for telling how fast you go. So it overlays the speed on top of the video. So that's I guess that's the downside to this. But what I what I actually did is I took the headliner down on my car, and then I ran, I just put the GPS in the headliner. And then I also ran all the wires through the headliner download pillar. And then I learned, I learned how to be an electrician. And I installed a what's called a pony fuse. So basically hardwired this entire, hardwired the dash cam into it so that there's no wires draping down or anything like that. And it's plugged right into, into the fuse box. Where my thing so I was, that was kind of an also, a neat thing to do is to learn how to hardwire a dash cam nice, super cool. And yeah, as you turn the car as you turn the car on, it'll it'll turn itself on as well. Oh, neat. Any shameless plugs? Oh, - -78 -01:06:16,890 --> 01:06:42,210 -Scott Tolinski: no, I'm just, uh, I'm releasing a lot of videos on YouTube. Right now I'm doing a series on my favorite react packages. So a free series. So you'll see these videos sort of filter and I've only released one so far, but I'm just basically taking a video out to talk about a package I really like and then talk about why I like it. They're pretty quick and little bite sized videos to hopefully help you explore some new react packages. So yeah, check that out and level up tutorials on YouTube. - -79 -01:06:43,050 --> 01:07:24,810 -Wes Bos: Awesome. I'm gonna try plugging my Instagram right now. Because I'm trying to diversify myself off of just being Twitter based. And I really like Instagram as a platform. I think it's kind of cool, especially as you get to see others developers lives outside of just coding because I posted a lot of non coding stuff on my Instagram. That's just me my family things that I'm doing things that I'm cooking meat that I'm smoking trips that I'm taking and whatnot. So if you're interested in that aspect, I'd love for you to give me a follow in I'd love to also follow a bunch of other developers as well. So I'm instagram.com forward slash West boss. - -80 -01:07:25,730 --> 01:07:26,400 -Scott Tolinski: sick, - -81 -01:07:26,940 --> 01:07:28,730 -Wes Bos: sick back or sick, - -82 -01:07:28,890 --> 01:07:29,700 -Unknown: sick plug. - -83 -01:07:30,090 --> 01:07:48,480 -Wes Bos: Sick pluck. Awesome. So that's it for today. I guess we will see you next week. And we're gonna be talking about 2018 or 2017 Year in Review. So stuff that happened as well as a review of what we did in the past year as well. Nice. - -84 -01:07:48,660 --> 01:07:49,350 -Scott Tolinski: excited for that one. - diff --git a/transcripts/Syntax220.srt b/transcripts/Syntax220.srt deleted file mode 100644 index 3aba689cd..000000000 --- a/transcripts/Syntax220.srt +++ /dev/null @@ -1,548 +0,0 @@ -1 -00:00:01,319 --> 00:00:06,120 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there - -2 -00:00:06,149 --> 00:00:10,530 -strap yourself in and get ready here is got to live ski and Wes Bos. - -3 -00:00:10,559 --> 00:00:43,830 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest treats on running backups at home server today we're gonna be talking about specifically Scott and I both use a Synology are However, there's lots of different things that will do what we're we're talking about today. So basically this big box that you've put in your office or your home somewhere, and it will run backups for you, as well as you can run apps on it that are it's pretty cool. It looks some apps for home server use, which is pretty nifty with me, as always is Mr. Scott to linsky. How you doing today, Scott? - -4 -00:00:44,009 --> 00:01:24,420 -Scott Tolinski: Hey, I'm doing good. I've just I'm going to be in the editing booth all day editing the next level of tutorial series I did on ScreenFlow this time, so things are a little different for me the editing process, I'm actually doing myself this time and it is feeling a little bit occasionally difficult. But yeah, yeah, it's it's feeling a little difficult. ScreenFlow is definitely a learning curve for me. So you know, getting used to it. And I feel good about the the content though. That's the good part is that that's good my performance, so to say, or the recordings all went really super well. So like I'm not having to do a ton of editing. But when I am I'm like, Whoa, what's that keyboard shortcut? Again? What am I supposed to do here? Whatever. Yeah, yeah, definitely getting used to it. - -5 -00:01:24,749 --> 00:01:44,340 -Wes Bos: What about? Or maybe we should do an entire Hastie on this because people always ask like, should I use like a pro software more? Should I use ScreenFlow? Which is more geared towards screencap? Maybe let's let's stop this right now. And we'll have a whole because you have experienced with both? I do, we should do a little hasty on it kind of did the the benefits the pros and cons? - -6 -00:01:44,699 --> 00:01:50,370 -Scott Tolinski: Yeah, definitely. And I have some choice words to say about ScreenFlow as social media presence. - -7 -00:01:52,770 --> 00:02:38,750 -Wes Bos: I'll save for another time. All right, cool. Um, today, we're sponsored by Sanity, which is a structured content, CMS and Freshbooks, which is beautiful cloud accounting. So let's get into it. So basically, these Synology and I think Scott, I both have the exact same one, I have the Synology diskstation 918 Plus, and it's essentially just a little computer without a monitor on it. And it's got four drive bays, which you can fill with hard drives, we'll talk about that in just a second. You boot the thing up, and it runs its own proprietary Linux OS. And it does all of the backing up and and raid for you. But then there's also some kind of fun stuff you can do on it. So that's kind of what this whole show is about. It's got you the same one, right? - -8 -00:02:38,940 --> 00:03:09,990 -Scott Tolinski: I do. And I love it. I've had it for a little bit. I've had it for a while. Yeah, I had even I even though this is my first NAS This is my first trip down the NAS lane, I had the like a my cloud EAX. It was like their business, it was like Western Digital's business solution. And it was about the exact same size and the back exact same structure as the Synology. One that we have here, in fact that the disks that I'm using in this are actually from that drive before, so I even migrated the disks from my previous NAS to this current one. - -9 -00:03:10,530 --> 00:04:32,250 -Wes Bos: Awesome, we should say NAS is both a wicked artist and also network attached storage, which is that you, you plug this thing directly into your router or switch or something like that. And you have it available on your network as well as Synology does some pretty cool stuff where you can access the thing when you're not on your local network. But you don't have to do like port forwarding or dynamic DNS or any any of that stuff like membership backup, if you want to access a home server from outside of that, you usually have to first you have to port forward something. So when somebody visits your IP address for your home, then you have to forward that to this specific device. But the other thing is that most internet home internet connections will change your IP address when you reboot the router or something like that. And if that changes, then you're out of luck safe to run something called dynamic DNS, which will constantly be pinging the outside world to ask what is my IP address? What is my IP address, and when that changes, it will just change the DNS settings of your domain name. So you have like a domain name for your your your Synology Synology does that all under the hood for you, which is called I don't know they have some sort of product, which is pretty cool. Because you can just use all of the apps just work outside of the house without you having to configure them. - -10 -00:04:32,550 --> 00:05:06,810 -Scott Tolinski: Yeah, that was actually one of my favorite things about the Synology especially compared to the Western Digital version of this sort of thing where I felt like Synology does a lot for you in those aspects that I don't have to manage that stuff. I'm not I didn't get a NAS drive to become a system administrator or something like this. I got it to help me backup my data helped me Orca orchestrate some things. So overall, the Synology product side of things. I'm very sad. With in terms of the differences between all of the different nazz or network area storage options out there. - -11 -00:05:06,890 --> 00:06:06,480 -Wes Bos: So when you buy this thing, the first thing you have to do is slap it full of hard drives. And there's kind of two big hard drives that you go for in this space. Because you have to get a hard drive, you don't have to, but you get a hard drive that is made for NAS because they are almost constantly reading, writing and checking the data on the discs. So they need to be rated for a lot of use. And the two big ones out there are Western Digital read or Seagate iron Wolf, I opted for the Seagate iron Wolf, just because they were about 20 bucks cheaper a drive and I did my fair share of Reddit. And you know who else has it has good stats on Drive failure is backblaze, because they've got millions of hard drives. And they have to swap them out whenever they die. So they keep stats on how often they're different types of drives fail. And the Seagate iron wolf looked pretty good on their stats. - -12 -00:06:06,630 --> 00:06:23,130 -Scott Tolinski: That's fascinating. I wouldn't have expected that. But it makes total sense. I have the WD red drives, because like I mentioned, I previously owned a WD nazz. And it came with two and then when I bought two more, it mirrored those. So I have four four terabyte drives. - -13 -00:06:23,340 --> 00:06:29,070 -Wes Bos: Yeah, that's exactly what I did as well. So you slap them in. Just stop saying Yeah, man. Yeah, I - -14 -00:06:29,070 --> 00:06:33,960 -Scott Tolinski: don't know. How many of you slept a lot of drives in your in your lifetime here. - -15 -00:06:33,960 --> 00:07:25,020 -Wes Bos: I've definitely dropped a few and a lot. Yeah. So I got four, four terabytes as well, which I run them in raid five, which means that you get 10 and a half terabytes of actual usable space. And then if one of the drives were to die, you would not lose any data. And the idea is, you can actually even prep them beforehand. It's called a hot swap. So you prep it to ready to go. And then if one I should actually do this, maybe today, I'll order another one. Because if one dies, then you slap a new one in and it will just rebuild your file structure based on that you won't lose any data. So that's, I probably shouldn't have done raid five, because I don't need 10 and a half terabytes, I'm looking at it right now have 1.3 terabytes use and you did raid No, you use something else, right? - -16 -00:07:25,290 --> 00:07:57,090 -Scott Tolinski: I used Synology. Hybrid raid s h r. It's an automated rage management management system from Synology. Designed to make storage volume deployment quick and easy. Wow. To be honest, I watched a lot of YouTube before this, which is you know if the case of a lot of things. Yeah, and I don't, I knew the details at one point. But since then, I have sort of lost the details of why I chose this hybrid option. From my understanding is, let me see. - -17 -00:07:57,330 --> 00:08:10,920 -Wes Bos: I watched the video before and apparently the speed is a bit better on the speed and the retrieval is a bit faster on raid five. So I think that's that's kind of why I went that way. I - -18 -00:08:10,920 --> 00:08:59,779 -Scott Tolinski: think there was also another reason I've totally forgot, though, I know it's funny because their option is Synology specific. And I think that's what turned people off of this hybrid raid sh er is that it's proprietary to them. I think that is the major downside of it. But I again, have redundancy in my backups. So I again, have I have four drives, they're hot swappable, and likewise, I can switch them out in case there's any sort of issues in that direction. So I mean, I only have a terabytes of usable space. But again, it's a terabytes. I'm not using that. It's amazing how cheap this storage is. Do you remember how much you spent for a 250 gigabyte USB drive at some point, I remember buying LSC that lasted like one year and it was like 200 and some dollars for it. - -19 -00:08:59,940 --> 00:10:10,500 -Wes Bos: I remember, I was so excited. I remember like very vividly riding my bike back from the computer store because hard drives were a bucket gig. And I went out and bought like a 256 gig. Or no, they weren't even they were like 200 gig hard drive and I was so excited for all the movies I was gonna download and put on that thing, which is so funny that now they're super cheap. Like I to give you some comparison, I bought the entire Synology and slapped it full of drives 16 terabytes for I think like 1200 Canadian, which is 910 us which is like more than a computer for more. Most people I realized that some people got mad when we talked about our expensive MacBook Pros, but I'm running a business here and my entire business is built on saving video files. So I definitely need to have some sort of system where I could absolutely not lose them. By the way, one more thing I just looked at a blog post here a difference between sh R and raid SSA. ushr Synology is you can mix drives. So if you've got, oh yes, that's a two terabyte, one from your uncle and four terabyte random other one, you - -20 -00:10:10,500 --> 00:10:45,649 -Scott Tolinski: can't do that with raid, you have to write the exact size and I think type of drives if you use raid. And the reason specifically I wanted to do that was because I bought these four terabyte drives. And I thought, you know what, in the future, if I ever wanted to upgrade, I would want to get, you know, like an eight terabyte drive or something, whatever, whatever is the new hotness, one, and you just put one in, right? And then yeah, all that extra storage, or you get two of them. And now you have two, four terabytes, and when whatever either way it handles that raid for you. So yes. Oh, nice, nice find on that one. I read this page over like eight times. And I did not see that. - -21 -00:10:45,720 --> 00:11:14,970 -Wes Bos: Yeah, also, there's a couple more if a drive fails, you can still access your data while you wait for the like, let's say you have to Amazon, or you have to wait till tomorrow to drive and you still need access to your data with raid you can't. With Synology, you can still get access to your data before you do. So I think there's some huge benefits there at the downside of it's a bit slower. And you can't just pop one of those drives into another computer and access the raw files right away. Yeah, - -22 -00:11:15,000 --> 00:11:15,809 -Unknown: yeah, totally. - -23 -00:11:16,260 --> 00:11:52,110 -Wes Bos: Next thing I wanna talk about is power. This is not something I have right now. But I learned the hard way. So they're obviously just plug it into your your wall. But if you don't shut it down properly, it has to do the it has to do an entire check of your entire file system. So I accidentally unplugged the power bar when I was redoing my computer and I shut it down improperly. And it went for about four days of these things are loud it goes and like the little hard drive arm be bopping around. And I was like, This is super annoying. It really - -24 -00:11:52,110 --> 00:11:54,179 -Scott Tolinski: does that. Yeah, it does be bounced around, I - -25 -00:11:54,179 --> 00:12:40,649 -Wes Bos: mean I am. This very, very simple solution to that is there's a lot of battery backup systems that you can buy that have a USB port on them. And that USB port will tell the Synology I'm on battery power shut down either in 10 minutes or immediately. And I was just looking on Facebook marketplace and there's, this has been a thing for a long time. So for 100 bucks, 50 bucks, you can buy a battery backup solution from a PC, and it will work with your Synology over USB and it will shut itself down properly. Because it's dangerous to shut down. A hard drive mid right. So you this this is proper for you is something that you need to do. So I don't have to go through that again. Mm hmm. - -26 -00:12:41,070 --> 00:13:13,409 -Scott Tolinski: Yeah, and that is a tough one because you never know when the power is going to drop out in any sort of way. So how did they do all have those like double plugs? Right? I mean, that's a really nice feature to have bad need a battery backup. Like my friend used to always have a battery backup on his computer back when it was a PC PC. And it was just for like when he was doing audio and I always just remember thinking like, so cool. This batteries. You know, your power can be out in your house and the battery I guess that's a really nerdy thought to think that's really cool that he could use his computer when the power's out. How cool is that? - -27 -00:13:15,210 --> 00:13:16,260 -Wes Bos: Yeah, that'd be good. - -28 -00:13:16,649 --> 00:14:04,770 -Scott Tolinski: Another cool thing about these is if you have automated backups going, if you have this thing on your network, you can set up some automated backup software to have it just backup backup backup whenever you want. You can I think a lot of them you can even like schedule To be honest, I use time machine but I do through a not through the network I do through a little plugin drive. Yeah, simply just because it's faster. And you know, there is some weirdness, especially with time machine, network, sometimes the whole time machine can get invalidated the new guy just start the whole thing from scratch. Yeah. And time machines. Like I don't know what this is. And you're like, Okay, yes, you do. You backed up here all the time, like a 1015 year old product, you should know better by now you shouldn't be pooping your pants anymore. You're 15 years old, or whatever you should get it figured out. - -29 -00:14:04,980 --> 00:15:04,380 -Wes Bos: So I do the exact same thing. I've not used my Synology for time machine because I've had a bad experience with a network based time machine in the past. Yeah, where it's working fine for an entire year. And then all sudden, it's like boom, can't figure it out. And you have to start all the way from scratch, which sucks. So I've just been using these little passport, two terabyte USB drives, and just putting them in although what happened to me with that is when I was I was having trouble with my Thunderbolt three cable, it goes into my caldigit dock and it quickly mounted and unmounted my hard drives like 1000 times. And I thought I just pushed my entire time machine drive, which is not bad because I've got backup backups but somebody on Twitter was like just leave it and it will come back and I just left it for whatever however long and it was just doing the repair in the back Background and it totally came back. So a little tip if that happens to you. - -30 -00:15:05,010 --> 00:15:31,260 -Scott Tolinski: Yeah, totally. Another cool thing about these things is that you mean their little computers. And yeah, unlike Mac's, which are also little computers, you can upgrade them in various ways. So you can upgrade the RAM on it if let's say you needed to do a little bit more heavy lifting as a computer, things that would might require more RAM, you can upgrade that Ram. And that's really nice. It's really nice that you have this little computer and it is it's just like a little computer without a monitor without like a - -31 -00:15:31,289 --> 00:15:33,029 -Wes Bos: it's standard PC parts. - -32 -00:15:33,179 --> 00:15:34,470 -Scott Tolinski: Yeah, standard PC part. A lot - -33 -00:15:34,470 --> 00:15:38,399 -Wes Bos: of people put quieter fans in them. Although I haven't noticed the fan being loud at all. - -34 -00:15:38,399 --> 00:15:41,010 -Scott Tolinski: There is a modding scene for these Absolutely. - -35 -00:15:41,279 --> 00:15:50,159 -Wes Bos: water cooled. Water cool makes me scared imagine having pipes of water near your most valuable data? Yeah, - -36 -00:15:50,190 --> 00:16:36,899 -Scott Tolinski: there's phones now that are starting to come out that are water cooled. And I think really neat. Yeah, they were there. There's this really interesting new technology. I don't know how new This is. So don't don't take me up on a manufacturer or something. But there's this new interesting technology. There are these like really thin heat pipes, it looks like what it looks like, not like pipes, they call them pipes. But what it actually looks like is it looks like a tin foil pouch, or like a copper foil pouch. And the thing is filled with water, or some kind of liquid, maybe not water that evaporates and cools and runs through essentially a loop. And it cools to something like there's these I don't know who makes this new phone. There's like some phone that is ridiculously like 64 gigs of RAM or something absurd. Sorry, let me - -37 -00:16:36,929 --> 00:16:38,340 -Unknown: pull up this phone. I get this data. - -38 -00:16:38,370 --> 00:16:39,750 -Wes Bos: Yes, it's cool. Find it. - -39 -00:16:41,250 --> 00:17:11,640 -Scott Tolinski: Oh, interesting. It looks like the the gala or the note, Galaxy Note nine actually even has water cooling. So it looks like it's something that is even getting to be a little bit more mainstream. I thought it was just in some of these high powered gaming phones, as they're called that do it. But it's not just these gaming phones, it looks like it's starting to be in more mainstream devices. So I think that's a technology that whether or not it works correctly, or works at all is maybe yet to be seen. But I think they're at least adopting that in different ways. - -40 -00:17:12,000 --> 00:18:36,780 -Wes Bos: That's really cool. I haven't noticed the memory going anywhere near 100%. So they give you this really nice dashboard, you can see where your memory is at. Yeah, and I've never go close to 100%. So I don't think I need to and I'm doing a lot. We'll talk about that in just a bit. But I don't think it's necessary to upgrade it just yet. One other thing I should say is that Kent C, Dodds was saying on Twitter that he got the same one we did after we were talking about it. And then he said it was too loud for him and his wife, especially when it's checking, it's loud, it's like so he swapped them out with SSDs, which you can do, it just I priced it out to put like, I think a couple terabytes ssts was, I forget how much it was like $3,000 to fill this thing with SSDs. So that's a good solution if you have a lot of money. But if it's a bit loud for you, another option you can do is you can set it to not check itself until you're away. So I find it annoying when I'm sitting here at my desk. So you can put a schedule in there so that only at night, will it start to do this thing or only during the day. Although I am considering moving mine to a closet because all it requires is a power and ethernet cord. But I think I'm going to move it with a closet where our printer is just because it's sometimes is a little bit too loud for me. - -41 -00:18:37,100 --> 00:19:37,140 -Scott Tolinski: Yeah, and actually, this might be a good opportunity to talk about the sick pic I had a couple weeks ago or maybe even last week with those little thermostats that might be a good option for your server closet. As of now we would become because you don't want that area, especially if it's a closet. You don't want that getting too hot frying your drives. And then yeah, well, yeah, keep a little Bluetooth thermostat in there, that one that I recommended. And you'll always get to know what the temperature is in that room just to make sure it's not toasted in there. Because that is a thing. I had my buddy again, who's an audio engineer, it's like having your studio essentially be Uber quiet is of utmost importance, right, obviously. And so he always had soundproof rooms and soundproof closets that not only would his things like his backup drives living, but his his Mac Pro would actually live in there and they would come through some heavy cables coming in. So that's definitely a consideration to have that sort of room just making sure it's properly cooled and temperature controlled. Is that big improvements. - -42 -00:19:37,469 --> 00:20:31,530 -Wes Bos: Yeah, that's a great point. Um, one other thing I didn't talk about is you can set up different mounts for it so you don't have like one big folder on your Synology for everything. What I do is I sort of slice it up into different volumes. So I've got one huge volume that I put every single course that I've ever worked on. I put it on there. As a backup, as well as an archive, and then I also have another one just for like family photos and things like that. And I've got another volume for TV shows and, and movies and things like that. It's kind of nice because you can mount them and have different security preferences for each of those. And then you you don't have to worry about your Plex getting hacked and then having access to all your family photos or something like that, because they are separate, separate volumes at the end of the day, which is pretty nifty. - -43 -00:20:31,850 --> 00:20:32,790 -Scott Tolinski: Super nifty. - -44 -00:20:33,240 --> 00:20:35,010 -Wes Bos: You know what else is nifty Scott? - -45 -00:20:35,430 --> 00:20:37,610 -Unknown: Hey, I do it. - -46 -00:20:39,180 --> 00:20:40,610 -Sanity sanity.io - -47 -00:20:40,650 --> 00:20:41,430 -How did I know that? I - -48 -00:20:41,430 --> 00:20:42,420 -Scott Tolinski: don't know how I knew that. - -49 -00:20:42,860 --> 00:22:40,590 -Wes Bos: Very impressive sky. Yeah, so Sanity is the structured content CMS, you want to check it out at Sanity. sh and it y.io forward slash syntax, that's gonna actually give you double the free usage tier which is pretty cool. So. So Sanity is a structure content, CMS, it's the back end to your front end. It's a it was fits in the headless CMS space. And they're always kind of doing some some really cool stuff over at Sanity. We've talked about them a lot. One thing I want to focus in on for this ad read is squizzy. Do you know what Kahoot is? Scott Kahoot. Kahoot is like this like quizzing thing that they use in a lot of classrooms. When when you want to like or gather responses from the classroom, we had something called quiz dumb. Okay. So what Sanity did is they made squizzy, which is a serverless Kahoot clone powered by sanity.io, which is so cool, because like this is a full blown application. And then they've open sourced it so you can see all of the code behind it. And it's obviously real time because you need to see all of that data being pulled in at real time. And I think that's so cool. Like, if you want to learn how to build a real time application, take a look at squizzy and see how that's done. You can use Sanity for all the heavy lifting back end stuff. And I'm not sure what is the front end, it's hosted on sites. Now the front end, let's see what language they used. They use view beauty. That would be a fun little project to dig into to learn both view and headless CMS Sanity, more like beautiful viewtiful. So just go to their blog for link to squizzy. But make sure when you do sign up, go to sanity.io forward slash syntax to get double the free usage tier. Thanks so much to Sanity for sponsoring. Cool. - -50 -00:22:40,830 --> 00:22:50,430 -Scott Tolinski: So let's talk about willards back it up for a second here. Did that talk about backing up our backups? About backing up the backups? Can I say that anymore? - -51 -00:22:50,489 --> 00:22:51,510 -Wes Bos: Yes. Okay, this - -52 -00:22:51,510 --> 00:23:25,650 -Scott Tolinski: is an interesting topic to me. Because right now, guess what I don't do I don't do any sort of backup your backing. Backing up of my backups? Nope, I only have the raid. So all of my data lives inside of my household, which is a recipe for disaster. If there was a fire disaster of any time, you know, maybe both drives crashed at the same time. Anything that is beyond my control, I could lose every single video, except for the while I have I have all this stuff, I could lose all my project files, I have all of the everything else backed up on s3, but I don't have my drives backed up anywhere. - -53 -00:23:25,920 --> 00:24:02,880 -Wes Bos: Yeah, so there's a couple options you can have for this year, you really want a copy of your data on site and a copy of your data off site to prevent from fire and theft, things like that. And one thing I looked at was just you can get another Synology and slap a full of drives and put it at a friend's house or like maybe it's gotten I if I had decent internet, we could just say we could give each other a couple terabytes each. And this guy would back his up on mine. And I went back mine up on his and you can encrypt it. So like Scott wouldn't be able to go ahead and release my next course. So I like that, - -54 -00:24:02,910 --> 00:24:15,240 -Scott Tolinski: which I would and I would I would actually just here's what I would do. I would Photoshop in the video my face on top of yours, and then run into some vocal modifications. And then that's my next course. What do you mean your next course, - -55 -00:24:15,600 --> 00:25:04,620 -Wes Bos: I'll take yours. Hey, what's up? This is Wes Bos from level up tutorials. Oh, that would be great. So that's an option. My option that I went with is you can there's two apps on the Synology that will allow you to sync your data. I'm using one called Cloud Sync. And then there's also another one that allows you to just straight up mirror your data from one to another. So the same quote what the sync will do is if your data changes on either side, it's kind of like Dropbox, it will sync with the other side. And then the other the mirroring one will just straight up mirror it and then you can hook up these apps to anywhere that will give you disk space. They have things for all Amazon SEO Yes, Amazon glacier, which is there, I think it's tape backup - -56 -00:25:04,620 --> 00:25:05,280 -Unknown: crazy. - -57 -00:25:05,310 --> 00:25:09,540 -Wes Bos: Have you ever looked into tape, I watched a video on how tape storage works. - -58 -00:25:09,750 --> 00:25:15,720 -Scott Tolinski: I know how tape storage works just from a music sense, because a lot of stuff is backed up to tape in the audio world, but - -59 -00:25:15,750 --> 00:26:24,870 -Wes Bos: Okay, yeah, man tape is cool. But I'm not backed up to tape because glacier is like that it's slow. And I think if you want lots of data, it's very expensive to get off. So what I opted to do is to use backblaze, b two, which is some of the cheapest raw data storage that you can possibly get. And I take the volume on my Synology, that I think is just under a terabyte of videos that I have all the project files and everything. And then I just mirrored that to backblaze b two. And then the way that it works is that you pay for data transfer into backblaze. b two, I think you pay for getting it out. And then the big cost is you pay for it just sitting on their servers. So one terabyte of sitting data is five bucks a month. So it comes down to every hundred gigs that you want to put on backblaze to just have it sit there is five bucks. But the kind of cool thing about backblaze is if you ever do need to get that data, you can obviously download it from them, but they'll also send you like a hard drive, or they'll send you like a NAS if you have, like 20 terabytes. - -60 -00:26:25,110 --> 00:26:26,310 -Unknown: Yeah, I didn't know that. - -61 -00:26:26,340 --> 00:27:30,780 -Wes Bos: Yeah, it's it's pretty cool. So if you ever like, in some cases, if you've got a lot of data, the fastest way to move that data is by a truck or a plane, and they'll ship it to you. So it's pretty cool. I'm, I'm doing five bucks a month to, to backup every single thing that is important to me on the backblaze v2, it did just stop, which makes me worried. So I have to look into that. And I did have an an earlier issue where I was playing with the there's two Gigabit Ethernet ports on the back and I was trying to like bridge them on to different ISP to make faster upload. And I think I did something goofy during that it just stopped Oh, no, I just I just read it. And the whole thing. It took me like, I don't know, maybe two or three weeks to upload all the data. But once that was done, then I know that I have a copy of everything on backblaze v2, and I'm really big on backup being passive. You shouldn't have to remember to back anything up, oh, you should just be able to drop it on a drive and the processes will do their thing and back them up for you. - -62 -00:27:31,200 --> 00:28:05,850 -Scott Tolinski: Yeah, because if you are the bottleneck there, it's not going to get done. Totally. Yeah, I know myself well enough to know that like, even though I'm very cognizant of this stuff, if I don't make it a process, it's not going to get done. I actually I take an automating as many things as possible in my life approach to everything in life, whether that's personal finances, or whatever, you know, automate deposits into savings accounts, automate, obviously, all your retirement stuff, automate all your bills paid, automate any of that stuff that you possibly can, because you're gonna forget about it. - -63 -00:28:06,120 --> 00:28:54,810 -Wes Bos: One other thing I should say is a lot of people say like, why did you spend almost $1,000 on this, when you probably could have just uploaded this to backblaze, for five bucks a month, like $1,000, five bucks a month, I would have got 200 months. That's one and a half years worth, right. So I guess once you pass one and a half years, the thing pays for itself. And also, I need my stuff locally. Because if I ever need to work on something, I need it really quickly. And if I need to download, like my last course, I think was 300 gigs of video files. If I need to do that I need it on my computer as fast as possible. And I've got wired Gigabit Ethernet locally here, I can have that on my hard drive in a couple minutes versus downloading that my internet is not that fast, I wouldn't be able to download it that quickly. - -64 -00:28:55,110 --> 00:30:04,710 -Scott Tolinski: Yeah, now, having everything locally accessible is a big deal. I also like it because it's in your house. It's your it's your data, it's your stuff, it lives in your house, not on somebody else's computer. You don't have to worry about anything, if backblaze goes bankrupt tomorrow, and all of a sudden your data is gone. Or they suffer some sort of catastrophe. You have still at the end of the day, some hard drives in your living room, or wherever you keep this thing, you know, got to keep mine in my living room. But no, I really agree with that. I think these things are very important not to mention, your data is worth the cost to back it up, especially if your data is important. If you're doing the types of things that we're doing where you know, your whole business or whatever relies on these things. It's important. And I know many small businesses and most small businesses do require some sort of a network storage for collaboration amongst documents and all sorts of other things. And then we get into a second. I think these apps are a killer feature of this thing, as well, because a lot of these apps and this really replace functionality of many cloud services that you've come to use, and maybe feel a little bit irked about some of the privacy things going on with these cloud companies in 2020. - -65 -00:30:05,100 --> 00:30:51,930 -Wes Bos: Yeah, you can run your own cloud services, pretty much on all of these things. There's always a self hosted version. Now, that obviously takes a lot more work to self host it, but it certainly is an option and having a Synology. I bought it as a backup thing. And I was surprised at how happy I was at all of the apps that you could put on it, because it's fantastic. It's like having a laptop that never accidentally gets closed. Like I did run a home server on like old MacBook for a while. And it was hooked up to our TV. But every now and then the kids will kick the power cord on it, and it would die. And you have to like, open the thing again, and sometimes it needed updates and things like that. So it's so much easier running it on the Synology NAS. - -66 -00:30:52,050 --> 00:30:52,920 -Unknown: Yeah, totally. - -67 -00:30:52,920 --> 00:30:55,140 -Wes Bos: So what apps do you use? - -68 -00:30:55,470 --> 00:31:02,010 -Scott Tolinski: So I use a lot of apps. Do you want to get the first one? Or do you want me because I have the second one here that I really like that you might not know about? - -69 -00:31:02,520 --> 00:31:16,260 -Wes Bos: Okay, the two apps that I use a lot are Plex and MB. And I actually ended up going I've talked about this before I ended up going full on MB. Oh, yeah, Plex is Plex, and MB are like home. - -70 -00:31:16,610 --> 00:31:19,620 -Scott Tolinski: I don't know, how do you describe them? Home media solutions? - -71 -00:31:19,650 --> 00:33:09,720 -Wes Bos: Yeah, how many solutions. So essentially, you've got all of these movies that you've ripped from your DVD collection, and put onto your computer Plex will take all of those movies and give you a nice interface, as well as you can view them anywhere in the world, just from your home server. So like I have a whole bunch of kids shows on ours. And I can open up the Plex or the MB app on my phone, when I'm at my parents and Chromecast it to my parents TV for my kids. And that's awesome. Because frickin Netflix takes off the shows that my kids like because of some licensing thing. And then the kids are like, Well, where's the show, but if you have it on your own server, you know that data is not going anywhere, you can just play it directly from your thing, you obviously have to have a fast upload speed and unlimited bandwidth to do that, but I've got 10 megabit up, and it's never been an issue for me. Yeah, and they also transcode. So MB is like Plex, except it also does live TV. So you can pipe in either what's called the HD homerun which will take us which will take an antenna signal. Or you can pipe in what's called IPTV, which is like a digital list of live TV channels. And then you can get guides that will show you what channels are on when. And then just like TiVo or something like that you can record shows in the future and record all of a series. And then MB or plaques, both of them will automatically put those into folders and download album art and figure out the characters in the show and give you descriptions of each of the show. And it's so cool to be able to do that. And I never had a TiVo before. This is kind of the first time I've had something like this. And I'm a big fan of that. - -72 -00:33:10,110 --> 00:33:59,100 -Scott Tolinski: Yeah, I think these things are fantastic. Because again, the you're owning the information essentially on your, your storage, you're not requiring any sort of service. And again, I use Plex, myself, I like that I can dump a bunch of media in there. I'm a collector of old kung fu movies, many of which are impossible to get. So I have like a collection of a Neato 200 some kung fu movies, and wow, it's does a fantastic job of pulling in all the artwork, and sometimes it goofs up and you got to tell it whatever. I have an extensive also an extensive collection of B boy or breakdancing DVDs that I've acquired through many small competitions that I showed up, I have a whole bunch of stuff, actually, one of which I'm on. Yeah, and I want to keep all that stuff nice in a place where I can look and watch it anytime. Because who has a DVD player handy anymore? I don't even have an optical CD drive anywhere handy that I don't - -73 -00:33:59,130 --> 00:33:59,910 -Wes Bos: I don't either. - -74 -00:34:00,060 --> 00:34:14,460 -Scott Tolinski: I have one external that I can plug in if I want to rip something. But to be honest, I don't really have anything super available. One app that I've really come to really appreciate recently is this storage analyzer. Have you seen this? - -75 -00:34:14,690 --> 00:34:19,500 -Wes Bos: No. What is it was this late night TV shows host Scott. - -76 -00:34:19,710 --> 00:35:36,380 -Scott Tolinski: So storage analyzer its name suggests exactly what it is it allows you to analyze the storage of any of your volumes. And the cool thing is you generate these reports and you can generate reports on a schedule. So you can say, hey, go ahead and generate this report every single day, first thing and then save the report to a specific thing. And these reports are sort of like you could imagine like with Daisy disk or something where it's telling you really like what your files are, where your files are living, how much storage they're taking up. And one of the cooler things for me is that I know I have a whole bunch of files that I've just collected over the years on various drives, right? I've had several different computers whatever Chances are, I don't want to overshoot this number too much. But I would say maybe 30% of my files on my NAS are probably duplicate files in some sort of way, right? Maybe it's a video that's been uploaded twice or something. And that's a ton of redundant space. And if you're paying for backups and backblaze, or something that's a bunch of wasted money, so it can also analyze for duplicate files. And I find that to be super duper, duper handy. I've also ran a Linux utility before for finding duplicate files. But this was a little bit nicer. I think. They said, yeah, this is a really cool app. This is made by Plex or made by Synology. - -77 -00:35:36,749 --> 00:35:49,290 -Wes Bos: Cool. Yeah, the Synology apps that they ship are really good, which is pretty cool. You know, what else is really good? Scott backblaze makes sure all of your backups are fresh, right? It's got it does, - -78 -00:35:49,499 --> 00:37:20,580 -Scott Tolinski: we recommend that you check out the other fresh service that we love over here at syntaxin being a fresh books. Now fresh books is not a NAS and it's not a network area storage drive. But what it is, is a cloud accounting software. And if you run any sort of small business, which we know a lot of you do, whether or not your freelancers or your developer for a small business, have a few people or even you know a decent sized agency, you probably have books, you probably have invoices to send you probably have accounting to do and let's face it, who really likes doing accounting? We're developers, we're not accountants, I worked as an accountant for one year, let me tell you don't love it. So if you want to have easy accounting, you're gonna want to check out freshbooks.com because they work with everything that you could possibly utilize already. We're talking stripe, we're talking gussto. We're talking Shopify, we're talking about Google G Suite, all those things that you already use within your workflows. And not to mention, there's a whole host of amazing features that come along with Freshbooks that we talked about just about every single ad rate. So that includes time tracking, expense tracking, payments, reporting, notifications for invoices, all sorts of stuff, you're going to want to check out fresh books@freshbooks.com forward slash syntax, and then tear syntax, and how did you hear about us in the whole getting started business. So check out fresh books, we're big, big fans of this cloud accounting software over here on the podcast, - -79 -00:37:20,850 --> 00:38:10,530 -Wes Bos: beautiful, nothing you can run on your Synology NASS is Docker. So Docker is it's really nice to be able to do that. Because obviously, the NAS itself is a Linux server, where you can run anything you want. But if you want to run a couple different applications, it's probably better to put them in their own container. So that first of all, they they can't talk to each other. That's a big security thing. But also, it's really easy to blow away things or restart a certain Docker image and things like that, or assign a certain port to an image. It's really neat. And there are tons of different Docker images for all kinds of different application. In fact, I think a lot of the apps that are in the Synology App Store are just Docker images under the hood, which is pretty cool. - -80 -00:38:10,880 --> 00:38:38,130 -Scott Tolinski: Yeah. And along with that, you can run and install Node j s on here, Hey, you got a node app, you want to run, install the node app, throw it up on a port and get that thing up and running. And all of a sudden, BINGO, BINGO, you have your own locally accessible application, maybe you're building some like home utility. Maybe you have like a Raspberry Pi, and you want to build an app that talks to it. Maybe Yeah, like home automation tablets that are up around the house or something. You can have your own application running on your own server, - -81 -00:38:38,150 --> 00:38:41,760 -Wes Bos: you could put a database on there to save, like home stuff, - -82 -00:38:41,760 --> 00:38:43,560 -Scott Tolinski: you can put a database. Yeah. - -83 -00:38:44,100 --> 00:39:16,110 -Wes Bos: So there's this thing called Doku Doku, which is a Docker based clone of Heroku. And I tried getting this running on digitalocean A while ago, and I couldn't for the life of me figure out how to make it work like just nicely. But maybe I'll give it another shot. Because I would sometimes I just want to host silly little apps that aren't for the entire world but or just internally for me or for a couple friends. If that's the case, and you could this thing could be a little web server for you. Yeah, - -84 -00:39:16,130 --> 00:39:23,040 -Scott Tolinski: I think that the possibilities are so endless and I haven't done anything with that other than their apps. I'm so excited to try out some more of this stuff. - -85 -00:39:23,609 --> 00:39:49,980 -Wes Bos: One kind of cool thing I learned from you is that they have a security camera software, which is cool because you can buy any IP camera including the wise cams that we like. And you can put them in rtsp mode, which is real time streaming protocol, and any camera that supports rtsp which is almost all of them except for your like custom nest ones or twice out of the box without their - -86 -00:39:49,980 --> 00:39:51,170 -Unknown: custom firmware. - -87 -00:39:51,209 --> 00:40:18,690 -Wes Bos: Yeah, why is that a box won't do it but you can flash it with the rtsp firmware. And then you could just hook it up. I used it myself. I flashed a wise cam and set this up, and you can record unlimited. I've got like friggin how many terabytes of space you could record, like a wise camera on 32 gigs will record for an entire week. So imagine how much a terabyte you can record for. Yeah, long time you try this out as well. - -88 -00:40:19,440 --> 00:40:44,630 -Scott Tolinski: I have not tried it out, I have it installed. I have it sitting there is one of those things on my to do list. And once I got I mean, I got so far into I got the y's cam running rtsp mode, I thought this was like, I thought it was gonna be really cool and easy. And I just never did the Synology part of it. So I'm gonna have to set it up the Synology because I have the the camera running and it would be really super cool to have a neat little, you know, home security system doing that. But no, I haven't done that. - -89 -00:40:44,880 --> 00:41:21,210 -Wes Bos: Yeah, it's expensive. Yep. I think they give you one camera or two cameras for free. And then you have to pay. Let's look it up. Because this is this is kind of cool. But this is the solution to people who are scared to put cameras in their house, because you are exposing them to the internet. Yep. So if you want to have IP cameras, but only available on your local network, that's the sort of the solution is it's called surveillance station. And there's also another one that you can run on there. And it's called Blue Iris, which seems to be a lot cheaper. I have not yet tried it out yet myself though. - -90 -00:41:21,210 --> 00:41:29,010 -Scott Tolinski: Yeah, I wonder if maybe we should do a comparison. Blue Iris verse. Surveillance station. - -91 -00:41:29,630 --> 00:41:42,030 -Wes Bos: It's cool because they have like iPhone apps. Synology has iPhone apps for their surveillance cameras they have Android or for like they have a moments app that's like a Google Photos replacement. - -92 -00:41:42,060 --> 00:42:00,300 -Scott Tolinski: Yeah, can I talk about those for a bit because I don't use those. I use the moments app and the drive apps. And let me tell you, they're great, they do a good job of taking up that functionality. The moments app, I mean, by no means is it as good as Google Photos. But it's done really, really good for what you'd expect it to be. - -93 -00:42:00,440 --> 00:42:11,670 -Wes Bos: It's way better than I thought it would be. You can search, it does machine learning on your thing. So you can search for flower, snow snowboarding, and it will find it if you do face tagging. - -94 -00:42:11,880 --> 00:43:32,010 -Scott Tolinski: Yeah, and it mean they totally ripped off Google Photos. So it's not like you're having to learn some sort of interface here. But you can also have it save every photo that you take on your phone to automatically upload to your NASS automatically upload in your moments, you can do all sorts of sharing options, just like you do with Google Photos. And so if you're the type of person who's like, I don't want Google to have every single photo I take of my family and whatever and use it for their algorithms, you can set up your own moment system on this, it's going to be really nice. And likewise with that, you also have the ability to do the same thing with folders all on Google Drive. And this one ripped off Google Drive so much that they even called a drive, which is fun. And it's just as good, you can set the same sort of backup and sync functionality that you have with Google Drive on your desktop. Yeah, you can have like a Synology Drive folder on your computer that automatically backs up or is available in the cloud. I use this for sharing all my files with my video editor. As opposed to paying for that storage space on Dropbox or something. What I do is I basically just say, Hey, here's the folder, I shared with him. And I say this folder is only available via URL. You know, it's publicly accessible via this URL, but you know, only those of you who have the URL can access it. And then just like any sort of Google Drive shared link or Dropbox, shared link, they can access that stuff. And it's not living on anybody else's servers at the end of the day. It's all mine. - -95 -00:43:32,400 --> 00:43:42,480 -Wes Bos: Yeah, that's beautiful. So I'm just looking at license first Synology surveillance station is about 50 bucks a camera. Wow. So - -96 -00:43:42,510 --> 00:43:43,980 -Scott Tolinski: that is a one time payment. - -97 -00:43:44,160 --> 00:43:58,170 -Wes Bos: It looks like it's one time payment for them blue Iris seems yearly. And I think you get unlimited cameras. I can't find it on their website, which is like that's the one thing that people want to be able to use right? Mm hmm. - -98 -00:43:58,170 --> 00:44:21,450 -Scott Tolinski: I found that this home defense right it and a post called us opinion on Synology vers blue Iris and their most uploaded one it says I was definitely go with blue Iris. But then they link to a site called IP cam talk. And it says that you will find some strong opinions on that here. So that might be a good place to at least dive into a little bit more the - -99 -00:44:21,600 --> 00:45:23,640 -Wes Bos: looks like blue Iris is about 100 bucks a year and you get up to 64 cameras. So I think either way, like I think about like my ring camera. I think ring camera is three bucks a month per camera. So that's 36 bucks a year. And then the ring doesn't even allow you it doesn't constantly record. So if you want to like look back at a certain point in time, then you're poached. The wise cams are totally free and you can put an SD card in which is cool, but but then you open it up to the internet, which they did have a security issue a couple of weeks ago so it's not that expensive. If you want to run your own Show, which is pretty cool. Yeah, certainly anyway, I even look at Costco. And like Costco has these like old AV cams, and like they have this like box at the cameras go into. And those things are a couple hundred bucks as well. And I look at him like, come on, you could go buy a IP camera and run this thing on a Synology instead of like this, like random box that is proprietary. - -100 -00:45:23,789 --> 00:45:25,830 -Scott Tolinski: Totally. Yeah, yeah, I know. - -101 -00:45:26,189 --> 00:45:27,450 -Wes Bos: I like this one. It's fun. - -102 -00:45:27,809 --> 00:46:34,290 -Scott Tolinski: I'm interested, I'm really interested in this stuff, you know, especially because I feel like I have this thing. And it's so capable of doing so many things. And I feel like I'm only scratching the surface of how capable it actually is. So I think to me, this is particularly fascinating just because of those aspects. One fun thing is that the Synology, if you're getting a NAS drive, okay, so we're talking a lot about Synology. Here, the Synology, they're definitely a little bit more expensive. But if you're getting a NAS drive, and you want to be doing any sort of this kind of stuff, you're gonna want to make sure it's at least powerful enough to do it. Because not all NAS drives are created equal in that regard. For instance, I my previous NAS drive functioned very appropriately as a network area storage, I could drag files on it, I could back them up, I could do all sorts of stuff. But the moment I wanted to do anything, any kind of heavy lifting, running servers, running apps, anything like that the whole thing just came to a crashing down because it wasn't made for that. I mean, you could there is a whole marketplace where you could install Plex on it. But guess what Plex requires processing and RAM to process the transcode the video, right? If you want to Chromecast or do - -103 -00:46:34,409 --> 00:46:36,090 -Wes Bos: yeah, if you want 4k streaming, - -104 -00:46:36,269 --> 00:47:03,360 -Scott Tolinski: yeah, you want to stream you want to do anything like that the NAS it needs to be able to be powerful enough to do it. And so I had this whole library of movies that I wanted to watch. And then half of them wouldn't work because they needed to be transcoded to work. And the NAS was just sort of like, Hey, I can't do it. I'm not I'm not a powerful enough computer, I'm not a, you know, beefy enough, you know, processor to take care of that. So it's something to keep in mind when you're looking at these different products. - -105 -00:47:03,599 --> 00:49:39,810 -Wes Bos: Other one that I tried is this thing called piehole, which is a it's meant to be run on a Raspberry Pi. And it's a custom DNS server. So real quick how DNS works is that when you go to a website, like Wes bos.com, a DNS server will line up Wes Bos calm with the IP address of the server that actually runs Wes Bos calm. And that's that's what people mean when they say DNS propagation, because when you change the name servers on a domain name, they need to propagate through everybody who offers the DNS service. So Google offers one CloudFlare offers one, your ISP will offer one by default, if you don't set any custom ones. And what's cool about this is that you can run your own DNS server in front of an existing one. And you can use that to do ad blocking. So the piehole will run on a Raspberry Pi, or you could just, it's just a, it's just a Linux application. So you can just run it on a, I ran it on my Synology. And then you set your DNS of either your router, if you want your entire house to be done like this, or on the device by device. So you put it on your TV or on your phone or your computer. And then what will happen is it will first talk to piehole. And say is this an ad request, because they know they have known lists of IP addresses that are used for serving ads, and it will just block it at the DNS level. So it will never resolve in the browser and, and how that's better than an ad blocker is that if you have ads on your TV, or you have ads on your phone, or your inside of an iOS app that has like one of those annoying pop up ads, all of those will be blocked in the app itself, which is pretty cool. And then if it's not blocked, it will just pass it along to your custom DNS. So I have use CloudFlare one dot one dot one dot one, have you had any issues. So I was having issues, I think I went a little heavy handed with the block list. So you have to compile your own list of blocks. And there's these popular lists out there. And I added, I think I just used the recommended ones or something like that. And it was a little too heavy handed, where it was blocking stuff that it actually needed. So I think most people say just like go easy on it. And I just turned it off. And I just use ad blocker and my thing and it's kind of annoying when you're in apps. And certainly it's more than just blocking ads. It's privacy and tracking as well. How hard was it all to set up? - -106 -00:49:39,839 --> 00:49:41,670 -Scott Tolinski: was it was it a pain to set up? - -107 -00:49:41,819 --> 00:50:49,590 -Wes Bos: Yes. Yeah, it was like there's a Docker image for it. And that didn't work. And there are no sorry, I did use the Docker image. But there's there's like a blog post that I found. And it took me about an hour. I think if I read it more carefully, it would have been quicker, but I I sort of skim Over being like, I know what I'm doing. And then I was really frustrated with it. But I was pretty cool. I would probably try it out and stall it, I still have it running. I'm just not using it. So there's also another one that Synology offers is called custom DNS server. And that will work just as well. It just I don't think it gives you stats like piehole does, though. And piehole gives you a whole web interface where you can you can allow things and block things and set timers and things like that, which is cool. I'm very fascinated by I haven't not dove into any of this stuff. I'm gonna have to start watching some YouTube. Yeah, it's fun like some sometimes on like a Friday afternoon I'll like finish something about noon. I was like, Alright, I'm gonna do something fun this afternoon. What is it gonna be? and fun for me is installing piehole on my total. Yeah. We're gonna - -108 -00:50:49,590 --> 00:50:55,320 -Scott Tolinski: have Yeah, it's it's an piehole game. Am I trippin or is that that's cornhole? That'd be fun if pi, - -109 -00:50:55,320 --> 00:50:58,170 -Wes Bos: the cornhole close all high - -110 -00:50:58,170 --> 00:51:01,200 -Unknown: in the face. Cornel body in the face? Yeah. - -111 -00:51:01,560 --> 00:51:16,830 -Wes Bos: Yeah. piehole is just a thing that runs I was about ready to, to buy all the Raspberry Pi stuff, because you can get it done for about 30 bucks. But then I was like, Oh, this is just a Linux thing. I could just run this on my Synology. - -112 -00:51:17,160 --> 00:51:25,260 -Scott Tolinski: That's the whole thing about Synology. I saw like, there's a one click Install for discourse. You know, you could install any of the stuff that you can install on a server, - -113 -00:51:25,590 --> 00:51:27,270 -Wes Bos: you could host your own discourse, - -114 -00:51:27,360 --> 00:52:09,840 -Scott Tolinski: right host your own discourse, host your own anything, you could do that. It's really interesting and fascinating to me. I really interested to hear from our audience. Because I know a lot of a lot of you have nazz storage, Nas storage, and storage, a redundant whatever. I know a lot of you have network area storage drives. So I want to hear what you're doing with them. Some of the fascinating stuff that we haven't touched on or we're not doing. I want to get inspired here. So hit us up at us up on Twitter at syntax FM let us know what you are doing with your network area storage. And if there's any cool mods, anybody put some underglow on there, anything like that? I want to see it some spoilers, whatever your vehicles are. Yeah, I want to see it. - -115 -00:52:09,960 --> 00:52:39,240 -Wes Bos: Yeah, that I Twitter was so helpful in all of this stuff. Because I had no, aside from knowing that you had the Hatice analogy. I didn't know which one, I just asked on Twitter, like I need something to back it up. And people were so helpful with App recommendations and hardware recommendations. And I was like, This is great. And I just drove right to the store and went and bought one. Yeah. And I've been I've been I've had it for I don't three, three months so far. And I've, I've been so happy with it. - -116 -00:52:39,360 --> 00:53:11,550 -Scott Tolinski: Yeah, fantastic. And if you're on the fence of this type of thing, in my opinion, they are well worth the cost, like there is an entry fee to this kind of thing. But if you have any sort of data that you need backed up, this is such a good solution for that. And if the difference is a couple hundred bucks in my mind, it's worth saving up that extra couple hundred bucks to get the Synology verse, maybe a cheaper one as somebody who had the cheaper one, and then had to try to sell it later on and stuff like that. It was not worth it to go with the cheaper option. - -117 -00:53:11,910 --> 00:53:54,990 -Wes Bos: Oh, one more thing is they sell expansion drives that you can just hook up via one of the ports in the back which port it what's it called Ethernet. It's called a eSATA port is dead. Yeah. So you can get the like to drive one and just get up and running. Because like most people are not gonna have as much video as us. But like the two port one will be fine in almost all cases. Totally. And then that's 400 Canadian right now, which is probably like 353 25 American. And then you can if you really need to expand in the future, you can just buy the expansion thing and dad plug it in, slap it full of drive, you're good to go. Just start slapping drives in there. Yeah, - -118 -00:53:54,990 --> 00:53:57,810 -Scott Tolinski: you get the 10 drive one or whatever they have. Yeah, they - -119 -00:53:57,810 --> 00:54:01,860 -Wes Bos: have some really big ones. All right, uh, anything else to add? - -120 -00:54:02,130 --> 00:54:08,070 -Scott Tolinski: I don't think so. Yeah, no, I can. I'm just curious to see what kind of mods people are doing here. I'm fascinated by this stuff. It's all really interesting. - -121 -00:54:08,340 --> 00:54:14,820 -Wes Bos: Cool. All right. Let us know. Tweet us at syntax FM. We would love to hear your Synology and NAS tips. Oh, - -122 -00:54:15,210 --> 00:54:56,550 -Scott Tolinski: yeah. NASS tips. Cool. So now is the time in the show in which we talk about our sick pics, which are going to be things that we find to be sick, like totally sick, like superduper sick stuff that we really, really like. Now, I have something that's a little interesting today. Unfortunately, it's gender specific here. However, I will say I was never sold on the brand Lulu lemon because they have that whole controversy where the pants were too thin the materials too thin, right? And there was like some quality issues. But then I listened to the how I built this on Lulu lemon and it was like really fascinating to me. That the the way they created the company and Courtney for Christmas. - -123 -00:54:56,550 --> 00:55:00,450 -Wes Bos: They're Canadian. is a Canadian. Yeah, that's a Canadian. company. - -124 -00:55:00,690 --> 00:55:21,840 -Scott Tolinski: So Courtney got me these athletic pants. They're like jogger pants. Let me pull them up here. And they are the single best pair of pants I've ever owned. I'm gonna say that I absolutely love these things. I can't You can't get them off me. I'm just, I absolutely love these pants. They're just slim. Where are these? Whatever. Let me find these ones. - -125 -00:55:22,140 --> 00:55:29,220 -Wes Bos: While you're finding those. I'm can't wait to tell kailyn because we always rip on guys who were Lulu. Let me tell you about this. - -126 -00:55:30,030 --> 00:56:21,150 -Scott Tolinski: This is this is my first pair of blue lemon anything because Courtney's had a bunch of she's got shorts, she's got the pants and she loves it all. And the quality for her is really kept up. I don't I like that was one of the things is the stuffs expensive, and for her, but the quality really, really, really kept up for her. So, gosh, they have a lot of pants on here. Um, so she knew that at least that I would like it. So I I got these pants. They're stretchy. They look nice. I do my stretches in them. I do my workouts in them. Um, I can like I like really want to wear them to breaking practice, but I know I don't want to destroy them. So I absolutely love these things. They are my sick pic. If you did not know that they make excellent men's clothes as well. The quality is pretty darn amazing. So I'm pretty happy with them. - -127 -00:56:21,450 --> 00:56:38,070 -Wes Bos: That's cool. I so my wife went to school for fashion and Canadian fashion. So a lot of her friends went to work at Lulu lemon and there's another another one arcteryx you ever heard of arcteryx? They make like nice outdoor gear. Yeah, this is - -128 -00:56:38,100 --> 00:56:46,980 -Scott Tolinski: I know the logo. It's like a dinosaur bird thing. Yeah, yeah. Totally. died. a pterodactyl skeleton dinosaur bird. Whatever. - -129 -00:56:47,190 --> 00:56:57,750 -Wes Bos: Dinosaur bird. Yeah, that's a it's a cool company. I've never bought any Lulu for myself, though. Didn't didn't want to venture down that. I know. I know. - -130 -00:56:57,810 --> 00:57:01,950 -Scott Tolinski: I was I was really impressed. I let's just say that. I'm very impressed. I'm sold. - -131 -00:57:03,180 --> 00:57:23,820 -Wes Bos: Um, I don't have a sick pick. Why do my sick pick is the NASS station that we're talking about today. I don't have anything else. New or interesting that I thought of lately, but big fan of this this NASS station. So check it out the ds 19. Or I'll link the smaller one as well. In case you're interested just dipping your toes into NASA land, - -132 -00:57:24,120 --> 00:58:26,100 -Scott Tolinski: NASA and cool. So now is the part of the show where we do shameless plugs, we shamelessly plug some stuff, we get a little bit silly. Here, I'm gonna shamelessly plug my latest course on level up tutorials. It's called How to build a graph qL API. And a lot of the times you get these graph qL courses or, you know, you get these Apollo courses. The ones that I've done personally are ones that you see around, and they teach you the magic of graph QL. But they maybe use an existing API or something, something just already exists. And this course is designed to really focus on the server side aspects of creating a graph qL API specifically, all we do in the course, is get a graph qL API up and running with a database. And we talk about maybe creating a static API, we talk about mutations and schemas and subscriptions and all that stuff that you need to know to build the API itself, and we stay away from the front end. So it's a pretty darn cool course. It's heavily focused. And we use Apollo server really, really awesome stuff. So level up tutorials.com forward slash Pro. - -133 -00:58:26,550 --> 00:59:10,440 -Wes Bos: Beautiful is sick pick all of my courses. Wes Bos comm forward slash courses, you can grab my new beginner JavaScript course or any of the existing ones, the advanced react and graph qL is currently being recorded. I'm just waiting on a couple things like I want to record it, but Apollo client three is not out yet. And I'm hoping suspense will be released, but maybe not. There's a couple like things that are not totally finished just yet. And I can't release it until we're trying to get the Apollo dev tools to work in Firefox again. So I can use Firefox in the course. So there's a couple little things that that need to be done. But that one will be recorded listener deep pretty soon. Yeah. All right, and use coupon code syntax for 10 bucks off and that is it. - -134 -00:59:10,710 --> 00:59:11,520 -Unknown: Cool. Well, we - -135 -00:59:11,520 --> 00:59:14,400 -Scott Tolinski: will catch you on Monday. - -136 -00:59:15,149 --> 00:59:16,470 -Unknown: face, please. - -137 -00:59:18,390 --> 00:59:28,170 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax221.srt b/transcripts/Syntax221.srt deleted file mode 100644 index 2d945c083..000000000 --- a/transcripts/Syntax221.srt +++ /dev/null @@ -1,196 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott L. Totally ski. - -2 -00:00:25,950 --> 00:00:54,240 -Scott Tolinski: Oh, welcome to syntax on this Monday heastie treat. We're going to be treating you with the topic of hobbies. And we'd like to talk about hobbies. But this is going to be talking a lot about how hobbies can help you be a better developer, how they can help you in your life and how they can just make things a little bit cooler for you overall. So we're not just wrapping ourselves in code. 24 seven, my name is Scott turbo Lenski. - -3 -00:00:56,310 --> 00:00:57,720 -Wes Bos: Is that what you're going by now? - -4 -00:00:57,750 --> 00:00:58,290 -Scott Tolinski: Yeah, - -5 -00:00:58,290 --> 00:01:02,460 -Wes Bos: so I'm getting rid of El Toro loco Toro loco. Yeah. - -6 -00:01:03,120 --> 00:01:06,090 -Scott Tolinski: I'm not crazy about it. I'm sorry. We'll see. - -7 -00:01:06,560 --> 00:01:11,819 -Wes Bos: Toro loco literally means crazy, doesn't it? Crazy ball loco. Yeah, - -8 -00:01:11,819 --> 00:01:15,120 -Announcer: but I'm not. I have no local about it. Yeah, - -9 -00:01:15,150 --> 00:01:20,810 -Scott Tolinski: I'm not local about it. My name is Scott Tolinksi. And with me as always, is Wes Bos. - -10 -00:01:21,090 --> 00:01:22,170 -Wes Bos: Sup everybody? - -11 -00:01:22,200 --> 00:02:49,170 -Scott Tolinski: Sup Wes. This episode is sponsored by sentry@sentry.io. Use the coupon code tasty treat all lowercase and all one word and you will get two months for free of this fantastic service. Now what is this fantastic service I'm referring to we'll set Sentry is the air and exception a tracking tool of your dreams. I know me personally a dream quite frequently about error handling tools. And when I do Sentry is usually the first one that comes up. Why? Well, because Sentry catalogs and logs all of your different bugs attaches them to releases and branches and users. And it allows you just a total freedom and flexibility to solve the issues that you need. You even get a nice stack trace, you can attach source maps to it. And it works with every single platform that you could possibly imagine. I mean, just imagine a platform. Well, I mean, don't do that. Because I'm sure there are some things it doesn't work with. But it works with just about everything that you possibly use in your daily life. Not only that, but it has an incredible interface and is used by some of the top companies in the industry. It's fantastic. I use Sentry myself and I have long before they sponsored this podcast. So I'm very happy with Sentry for sponsoring this show. And thank you so much. Check it out@sentry.io use the coupon code tasty treat all lowercase all one more get two months for free. Let's get in to hobbies. - -12 -00:02:49,620 --> 00:03:59,040 -Wes Bos: Yes. So with that we do a show on like how important hobbies are for the mind. And for I think they make you a better developer if you're able to take some time out of your day or on your weekend or in your evening or whenever you have time for something to focus on something that is probably unrelated to code. Not that it's not necessarily bad to have a hobby that is code because certainly that's one of my hobbies but something that is unrelated, I think So real quick, we'll just go over some of our own hobbies. For me, I tend to take on a new hobby, research it like crazy do build or make something and then when I'm finished that all I'll move along to something else. So I don't really have a whole lot of like long standing hobbies. I have more very short obsessions where I learned something. So in the past I've done kombucha fermentation curing things like making bacon. This last spring I got super into bike flipping, or I bought and sold I think I bought and sold about 40 bikes in I think a two or three month span. And I mean, like like seven grand or something like that you - -13 -00:03:59,040 --> 00:04:00,660 -Scott Tolinski: weren't stealing those ladies. - -14 -00:04:02,190 --> 00:05:13,010 -Wes Bos: Let's not talk about I was buying them from like older suburban gentlemen who who's had them in there. They're like 17 racers that have been sitting there and they need work, right? So you buy them and fix them up. I did kids right on repairs. So we have three of these, you know, those like 12 volt kids, right on Jeeps, I got three of those that were in the state of disrepair, and I fixed them and sort of hack them to run on drill batteries, you can overvolt them to go faster, which is kind of fun. And most recently I got an ATV that was super broken. And I'm currently going through the process of learning how gas engines work and how brakes work and clutches and things like that. And my man game here is to get a another ATV and convert it to battery. Well take the gas engine out. So I learned about batteries on the kids ones I'm learning about brakes and clutches and stuff like that on the new one. And then I think eventually we're going to go and replace the motor of an ice one internal combustion engine. They call it two batteries. - -15 -00:05:13,050 --> 00:05:13,760 -Scott Tolinski: Wow. - -16 -00:05:14,160 --> 00:05:14,850 -Announcer: Yeah, I - -17 -00:05:14,850 --> 00:05:21,570 -Scott Tolinski: find cool. That sounds like a lot of fun. This all sounds like really handy. And like, I don't know. - -18 -00:05:22,800 --> 00:05:32,670 -Wes Bos: Yeah, I don't know why they're all very like, there's something just like working with your hands and figuring that kind of stuff out. That is interesting to me. I guess I'm not super good at it. But I'm learning. - -19 -00:05:32,700 --> 00:06:36,330 -Scott Tolinski: Yeah, I think that's a thing. We'll talk about that later in this episode. But I think that's the thing with hobbies that people really, they want to start a hobby and they want to pick something up, they'd be like, worry too much about being good at it, or the possibility of being good at it. During the day, you you just, you don't do it for those reasons. That's not why I do most of my hobbies. And so I have a lot of hobbies, too. I've been many of which for a long time, I've been dancing for 15 plus years. And I do that like twice a week or so or once a week occasionally when it gets crazy. But even even when I do only once a week, I'm still dancing sort of every day. For those of you don't know I do. Breaking breakdancing has been on my head and stuff, whatever. I've also been weightlifting in doing a lot of fitness stuff for a long time, whether that's yoga or whatever. So I find time to move around a lot as some of my hobbies to get especially to get away from screens, spend a lot of time with screens, I even take my computer to the gym, so I guess it's not too relevant there. But a lot of my hobbies are based on moving because I got a lot of energy to get out. Yeah, it's the turbo - -20 -00:06:37,380 --> 00:06:38,820 -Wes Bos: turbo Delinski. - -21 -00:06:39,960 --> 00:06:53,160 -Scott Tolinski: It's uh, I also like video game. I play a lot of video games on my my switch recently, I got an Oculus quest, which is like the standalone VR headset that I've been playing Oh, cool. I burned 600 calories with it last night. - -22 -00:06:54,660 --> 00:06:59,250 -Wes Bos: That's unreal that you can burn that many like I can I have a hard time doing that many calories at the gym. - -23 -00:06:59,280 --> 00:07:13,470 -Scott Tolinski: I play for like a couple hours. And I'm playing these like games that require you to like duck and squat and jump and move around. And they're fun. It's not like a doesn't feel good. I'm not even intentionally exercising. It's just I'm moving around so much. And I think I'm a bit of a spat. So - -24 -00:07:14,010 --> 00:07:17,640 -Wes Bos: yeah, that's a very good description for Scott unintentionally exercising. - -25 -00:07:19,950 --> 00:08:05,460 -Scott Tolinski: Yeah, that is true. I also I watch I watch hockey a lot, which doesn't seem like a hobby. But you know, it's, it's a chill out II watch thing you keep track of it. It's just not it's not necessarily mindless. I do design as a hobby. I designed the whole level up tutorials website, I don't really consider myself a designer professionally, as you granted, I professionally do design. But I do it mostly as a hobby computing, which I use my computer as a hobby, you know, I get good at my computer, I do web development as a hobby, you know, I pick up projects and do them for fun, just for no reason whatsoever. I also have been snowboarding for a really long time. And you know, some of the best mountains out here in Denver. And I watch a lot of kung fu movies, which also is a very relaxing hobby. - -26 -00:08:05,820 --> 00:08:26,610 -Wes Bos: Yeah, the watching of hockey is always interesting to me. So I always thought for the longest time, like that's a waste of time. But then you talk to people who are super into it. And they follow the stats, and they know who's good at slap shots. And it's super interesting that you can get really into the data of it, which I never really, totally understood. - -27 -00:08:26,700 --> 00:10:24,650 -Scott Tolinski: Yeah, and there's gonna be a lot of really interesting, they're going to be doing a lot of like player tracking and things next season. So you'll be able to, I don't know, what API's are, will be public. But I know there are a lot of developers out there who have hockey as a hobby. And it gets used the NHS API to build statistical models and things like that, or, or even just visualizations where, you know, heat maps and stuff. Like there's a lot of potential there with these API's, which is one of the things I wanted to get into, sort of in this next section here, which is why are hobbies Good for you, and good for you as a developer? Now, before we get into some of the, like non developer ones, I figured maybe we talk about some of the developer focused reasons first. So why are hobbies Good for you, as a web developer? Well, like I was just talking about before, there are API's out there that exist for the things that you like, or there might not be, and maybe you could build some sort of cool API around something like this. But like, maybe hockey is your passion. And you don't really know what to do for a side project to learn react, or to learn animation or to learn those realization. But you can pick up that NHL API and do something fun with it, do something interesting with it, or do something boring with it just to get your hands dirty. But at the end of the day, when you're working with data that is actually exciting to you or interesting to you, it's going to be a huge, huge difference and the amount of energy and attention you're going to be putting into what you end up getting these ideas like you You know, I'll we do a lot of like Movie Database stuff and the level of tutorials courses and then yeah, sure I watch movies but that's not like my hobby other than the kung fu movie thing. But if if I was doing a side project and I was going to do it on hockey, looking at the players names and their stats is infinitely more engaging to me than looking at some list of I don't know. I'm interested in a lot of things. I'm struggling to come up with something I'm not interested in. - -28 -00:10:26,790 --> 00:11:40,170 -Wes Bos: Totally No. For me, it's always the Pokemon API is always super uninteresting to me. foo bar Baz stuff is always very uninteresting to me. And there's so many other things that I would I would be like, like to go into like, like one example here. This is not what I'm interested in. But this one developer on Reddit posted they made this website whoo flu dot live, which is tracking and charting. All the stats about the Coronavirus that we have right now. So how many are confirmed in what countries they're confirmed in. And it was cool, because they obviously had taken the raw data from a world health organization or something like that. And they use their skill to plot it, to scrape it to update it to deploy it, to design it. And I was like, that's like, clearly this person was interested in it. And they probably learned a lot along the way making this website. I think those are the best kinds of Oh, yeah, cross of hobbies. Like I'm not to say that like Coronavirus is a hobby but like being like a news junkie and a data junkie, a journalist, a lot of journalists are like this. They just love the data, and they need to be able to visualize it. Yeah, I - -29 -00:11:40,170 --> 00:12:52,800 -Scott Tolinski: think one of my most successful side, I mean, successful from a personal standpoint, side point. side projects I've talked about this before is this B boy tools app I made for myself. And basically, as a dancer, I came up with all these pain points of things that bothered me about practice, right? I wasn't, or even competition, right, I was forgetting my moves, I was forgetting sort of the combinations, I work with these things. I was had some like really interesting tool ideas where there was like, would be like an air horn that would sound every 30 seconds to help me like judge the time. And so there's all these tool ideas I came up with, I was like, all these things would really assist me in my hobby, not just, here's just a project with my hobby data. But here are some things that could make my hobby better. Like there's so infinite possibility. If you think about any hobby that you have, just think about how could that be better? And how could you use your skills to potentially make it bigger in my my opinion, is to dream big on this. Because the possibilities of what you can build, there's really, I mean, it's totally endless, but you can do things that are much greater than what you'd expect. And if you have that seed of excitement around it, it's going to push you to to learn those skills a little bit better. - -30 -00:12:53,610 --> 00:13:40,320 -Wes Bos: So unrelated to just web development, I think like, Why are hobbies good? I think they keep your mind sharp. It's good for mental health and mood. Certainly, I had a crazy busy week last week working on my advanced react course. And I said to myself, like, I just wanted to work on this ATV because I just got it. So I said, I'm not going to touch it all week, I'm going to go hard Monday to Thursday. And if I can get I made myself a list of everything I wanted to get done, that if I can get that all done, then I'm gonna take Friday off and work on I got it all done. And it was such a motivation. And then when I did it, it was a nice way to come down from having such an overwhelming tough week of just like being in the code. And it was quite a slog. So just generally good for mood and, and whatnot. - -31 -00:13:40,380 --> 00:13:56,520 -Scott Tolinski: Yeah, my my Friday was if I could get my course released before Friday afternoon, I could go have a date lunch with my wife and have a couple of drinks. Not as a I mean, definitely something to look forward to, but not as educational, I would say. - -32 -00:13:57,660 --> 00:14:51,990 -Wes Bos: No, that's important as well. I also think it promotes creativity and critical thinking. So one little issue I had was the stress on this ATV were blown out. It's like the it's like a little gas cylinder that goes inside of a shock. And the dealership wanted like 220 bucks for them. So I just like kind of went online searching for like what else uses air struts. And I found out that there's like a truck, a Volkswagen truck rabbit from the 70s that uses air struts. And it's like pretty much the exact same part. So I bought it at the local auto parts store for like a fifth of the price, put it in works totally fine. Just like little things like that about like, you encounter that all the time as a web developer. And that sort of thing is important in other areas of life as well trying to like take a step back and say like, Okay, this part is not available to me, but like, what do I actually need to fix at the end of the day? - -33 -00:14:52,230 --> 00:16:16,380 -Scott Tolinski: I think what you'll see pretty quickly is that problem solving skills can be exercised in different ways. Just capacity is the way in, you should spend some time away from the computer screen solving these problems because I often look at mine problems in my code, and I try to visualize them or think about them or approach them. And you can learn so many different lessons from these different projects and tools, I think that's really impressive that you are able to do that with the 80, I would have no idea where to start. That seems like a crazy project to me. But a lot of these do come down to that you're really just more capable than what you give yourself credit for often times, and like I personally, I would say, I don't know if I can do that. But then again, I just did so much other like, I've done so many other things that I didn't think I could do, both being a handy, Handy guy around the house, you know, those kind of things I do so much more than I think I'm capable of doing. And I think that's really the message all the time, especially now in the age of YouTube, where you can go to YouTube and do just about anything. I mean, I replaced some waterline pump on the back of my fridge, and I had to like take apart but entire fridge. And I looked at that it was a very daunting project and I sliced open my hand because I'm dumb. But at the end of the day, I did it and it works and I'm pretty proud and you do it to be honest, every single time I get water from that fridge. I'm like, Oh, dude, then I did that little house pump there. - -34 -00:16:17,730 --> 00:16:45,210 -Wes Bos: That's the best cuz like, YouTube is the best like you can just like a week ago, I didn't even know what stret was. And a couple days later, I'm like finding alternatives to it. And it's just because you have the internet, you have YouTube showing people disassembling things and you've got measurements of different things. And you can you can look them all up. And I don't know, it's just that critical thinking, like you said, is so key. And I think that being a developer has helped that in other areas of my life. - -35 -00:16:45,240 --> 00:17:49,890 -Scott Tolinski: Yeah. One thing you do have to be cognizant of, though, is like sort of the effect it has on your mental health, whatever this particular hobby is, because some people will be like, yeah, playing video games is my hobby, and then they'll sit down in front of a computer and they'll work don't just in a year, you're getting actually really angry and frustrated. And in those cases, probably not having that desired effect on you know, maybe Sure, maybe it's increasing your response time or something like that. But it's probably raising your blood pressure not having exceptionally great mental health effects. And I've had to be cognizant of that personally, because I would play specific types of video games, and Courtney would just look at me and she'd be like, I don't think this is really relaxing you right now like it like if you're spending time away from you know, and you're stressed out, shouldn't you be doing something to help your state and not that the video games have to be, you know, stressful, but I found more time feeling better about the things that I'm doing while I'm playing video games, if I'm cognizant of if it's actually making me relaxed, or if it's stimulating me in a way that's maybe not exactly helpful. - -36 -00:17:50,250 --> 00:18:02,970 -Wes Bos: That's good to have that outlook on it. Yeah. So let's, let's talk about like, how do you find a hobby? So this is something I talk to people all the time, they're like, how do you find a hobby? Like, how do you get into these crazy things? Yeah. - -37 -00:18:03,570 --> 00:19:01,850 -Or, like I hear from people are like, I need a hobby, but I just don't know what, and like, I'm opposite. I've got a laundry list of 10,000 things I'd love to look into. I want to grow hot peppers. Well, but I think for me, at least figuring out what a hobby will be, is I always need like an end game. So for me, it's not like I want to learn about batteries. Like I do want to learn about batteries. But like that's not an end game to learn about it. So my end game is I want to build something I want to build a TV that is battery powered. And that's my end goal. And learning about that and having fun researching and going into all the different parts that you need is the hobby itself. So I always try to like kind of revert not reverse engineer, but start at the end of what you want to complete, and then work backwards. And then along the way, you might get sidetracked, you might do course correction, but it's nice for me to at least have a sort of an end game. - -38 -00:19:02,430 --> 00:19:12,120 -Scott Tolinski: I'm not really the same way. I don't know, look at there being an end game. I mean, I think that's evident from so many hobbies. Like I've been dancing for so long and whatever. There's no end game there. Yeah, - -39 -00:19:12,120 --> 00:19:21,320 -Wes Bos: I think that's probably maybe a little bit more healthy, though. I don't I do like not have to get something out of it. You know? Yeah, right. - -40 -00:19:21,320 --> 00:21:25,100 -Scott Tolinski: I'm just doing a tip for the creative output or the physical app. But for me, it's always been about like, what do I think is cool? And can I just do it? That's the whole thing is that oftentimes people look at these things. And it's like, I think breakdancing is so cool. I could never do it. That's like yeah, you can if you think it's cool enough, you could just start doing it. I started when I was older than most people who start and I you know, I got pretty dang foreign and and so it's good to just be able to look at things that you find to be cool, and figure out how you can just start doing them. You're very capable of doing just about anything picking it up, whatever I mean, but I haven't He's been inspired by my dad who, like he learned how to snowboard when he was like 40 years old. And then he picked up the drum, like he played guitar his whole life. But then he was like, You know what, I want to play the drums. So he like, wouldn't just took drum lessons. It's like a bunch of kids taking drum lessons. And then my dad in there, like taking drum lessons. But then he got really good at the drums. It's like, he was so capable of just being like, Hey, you know what, that kind of looks cool. Maybe I should just like, try it and pick it up. He started doing yoga, he started doing all sorts of stuff. So I hit that really good role model of like, if you think something is cool, just try it, you know, you may not be good at it, you may not whatever, you may really enjoy it and want to continue doing it. Or you may have this image of like, I used to watch music videos, and I'd see these breakdancers and I'd be like, this is the coolest thing on the entire world. And I whenever I started saying I was gonna learn a lot of my friends told me I was ridiculous, because I couldn't dance. I had no background in dance, no background in any of this. I didn't know anybody that could teach us this before YouTube. Everybody thought I was crazy for wanting to learn it. And I just thought it was cool. And I let that push me through into now it's just like one of the very most important things that's ever happened in my life. Because it allowed me to travel that allowed me to have some creative output and stay fit and do all these things. So don't listen to people like that and just pick up stuff and try it. - -41 -00:21:25,310 --> 00:21:57,450 -Wes Bos: Totally agree. Just kind of got to go for it. Yeah, go for it. other little things we have here is YouTube, we talked about that. Just go down a rabbit hole of YouTube videos is to find a different hobby, forums, Facebook groups, things like that meetups, volunteering, just like putting yourself in different situations will often lead. Like I've got so many friends that have gotten into rock climbing lately. Oh, yeah. Like, one person probably went rock climbing once with a friend. And then all sudden, they're like, this is amazing. And everyone's super into it. Yeah, - -42 -00:21:57,480 --> 00:22:18,480 -Scott Tolinski: I went rock climbing last year with my neighbor. And it was awesome. I had a great time. But then, you know, we have a baby. And it's hard to get out of the house as much as Yeah, like, you know, you only have someone that's like the same thing with me. Like you said before, I have so many things that I would look to put my energy into, and I just don't have the time or energy to be able to do it all so - -43 -00:22:18,630 --> 00:22:31,050 -Wes Bos: yeah, yeah. It's tough with kids. I definitely try to always have something on the go. But certainly it gets it's the first thing that gets pushed to the backburner. Oh, yeah, when life gets crazy, - -44 -00:22:31,380 --> 00:22:32,340 -Announcer: totally. Yeah, I - -45 -00:22:32,340 --> 00:22:49,290 -Scott Tolinski: and YouTube. I mean, we mentioned like YouTube being such a huge well of source, but like, you can find how tos on absolutely anything. absolutely anything. And I think that's an important thing to just start and just start watching some of that stuff. - -46 -00:22:49,650 --> 00:23:13,860 -Wes Bos: All right, we want to know what is your hobby, tweet us at syntax FM, or post it in the Reddit reddit.com forward slash our four slash syntax FM. We would love to hear what your hobby is. It's kind of cool. I've seen different people send us photos of them listening syntax when they're gardening or flying a helicopter or doing all kinds of really neat things. So I'd like to hear that. - -47 -00:23:14,160 --> 00:23:16,140 -Scott Tolinski: Yeah. Likewise, you're all amazing. - -48 -00:23:16,470 --> 00:23:21,030 -Wes Bos: Cool. All right. Thanks for tuning in. Catch you on Wednesday. Please - -49 -00:23:22,650 --> 00:23:32,430 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax222.srt b/transcripts/Syntax222.srt deleted file mode 100644 index 716e5c42a..000000000 --- a/transcripts/Syntax222.srt +++ /dev/null @@ -1,500 +0,0 @@ -1 -00:00:01,319 --> 00:00:09,000 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski - -2 -00:00:09,000 --> 00:00:10,530 -and Wes Bos. - -3 -00:00:10,559 --> 00:00:48,630 -Wes Bos: Welcome to syntax the podcast with the tastiest web development treats today, we've got a really good one for you. This is a sign that like pretty much every other question on our potluck is this is our gooeys going to replace us what what role does a GUI and we say that we mean graphical user interface. So a program where you can drag and drop or use some sort of interface to build part of or all have a website. So like, Where do they live? There's a lot of hot opinions on either side of this debate. And we're going to kind of go through it and give our own opinion as to what that looks like. - -4 -00:00:48,630 --> 00:00:49,380 -Unknown: Yeah, - -5 -00:00:49,439 --> 00:00:54,210 -Wes Bos: yeah. With me as always, Mr. Scott to linsky. How you doing today, Scott? Hey, I'm - -6 -00:00:54,210 --> 00:01:12,780 -Scott Tolinski: doing good. It's a snow storm right now. It was like an ice storm this morning. So much so that we have like this incline. And you're trying to walk up it and you were just sliding back. It was like yeah, it was a rough morning, but ready to go man right in front of the computer. Yeah, chillin. Yeah, rock ready to rock - -7 -00:01:12,839 --> 00:01:35,880 -Wes Bos: day, we're sponsored by two awesome companies. First one is Hasura, which is a graph qL API on top of a Postgres database. And the second one is Log Rocket, which is logging in session replay for JavaScript applications, talk about them partway through the episode. So, Scott, what do you think about the codeless? movement? What are one describe what is codeless? mean? - -8 -00:01:36,449 --> 00:02:09,270 -Scott Tolinski: Yeah, so codeless is, without code, it's code less. It's a creating and building things, without necessarily having to write any lines of code to make it happen, whether or not that's like for websites, or apps or prototypes, or any of that stuff. I mean, we're gonna be talking about gooeys, in general, throughout the course of this episode, but for the most part, this codeless movement is mostly about getting the things done quickly, without having the need to dive into code or this skills to dive into code. - -9 -00:02:09,659 --> 00:03:10,080 -Wes Bos: Yeah, and there's a lot of like, heated opinions on both sides of this. There's a lot of people who are building these codeless tools who think that this is the next great thing. And then there's a lot of people on the other side of things that are anti it because maybe because they think they're garbage, or maybe because they think they're going to take their jobs. So from my point of view, I don't really if it's gonna take my job, me bashing, it is not gonna help anything, right. Like, like, I have no, no way to stop this, if this is what is going to happen in our industry. So I don't necessarily, I'm not anti it, but I'm also not for it. And we'll talk about our opinions a little bit through here, but I'm just like, trying to think like, there's all kinds of jobs that are currently being replaced by computers and AI and things like that. truckers are getting replaced by self driving cars. cashiers are being replaced by those stupid annoying little boop boop things. - -10 -00:03:11,009 --> 00:03:12,960 -Unknown: where to put things? - -11 -00:03:13,919 --> 00:03:44,610 -Wes Bos: You know what I'm talking about? I use those. I do. Yeah, yeah. But I feel like I feel like you should get like a license to use them. Because like the people in front of me that like don't know how to use them or like I don't know what's going on with unrecognized item because like I think like a developer and I know that like what's happening behind the scenes, they're weighing it and whatnot. And I can get those through those things really quickly because i think i think like I'm interacting with a computer and not just like a regular human right yeah, - -12 -00:03:44,630 --> 00:04:21,930 -Scott Tolinski: I can do it because I was a trained cashier at one point really well yeah, I worked at target for when I was like 16 forever and ever at night, I got whatever the they used to like have this anxiety into I don't know if they still do but they used to have this anxiety inducing like letter grade you would get for the speed of your casual really after each transaction and so you would do the whole transaction and then the score would pop up and on the screen so I would always be like, because your managers can see those scores I was Oh yeah. And for like whatever the top score was every single time it probably at the detriment to customer service because I'm just - -13 -00:04:21,930 --> 00:04:42,690 -Wes Bos: like food food food Yeah, yeah, I used to work at Tim Hortons and we would get like time at the window would be the big one. And if you got to like the timeout the window under I think it was under like 14 seconds or like 22 seconds then you would get like tickets to the movie or something like that. So yeah, and like we were like so rude to customers and we're just like here pull up. - -14 -00:04:44,130 --> 00:04:45,830 -Scott Tolinski: Take 10 minutes and go Come - -15 -00:04:45,830 --> 00:05:07,010 -Wes Bos: along with timbits throw the coffee in the in the passenger seat and like throw the change and then get out of here. You know. Doesn't Gordon anyways, cashiers. lawn mowers are I went super into I love how lawnmowers made the list here. He's like Roomba on Mars. - -16 -00:05:07,050 --> 00:05:10,260 -Scott Tolinski: I don't like that. I think that's giving a robot - -17 -00:05:10,680 --> 00:05:12,000 -Wes Bos: blade blade - -18 -00:05:12,020 --> 00:05:19,680 -Scott Tolinski: with the intention of cutting things. I know. Thank you, sir. I will not have any robots with blades around my - -19 -00:05:19,950 --> 00:05:20,520 -Unknown: family. - -20 -00:05:20,520 --> 00:05:21,140 -Scott Tolinski: Okay, - -21 -00:05:21,450 --> 00:05:25,860 -Wes Bos: this just raised a razor blades, I guess could cut you but it's just tiny little razor blades. And - -22 -00:05:25,860 --> 00:05:28,920 -Scott Tolinski: they it starts with tiny little razor but yeah, - -23 -00:05:28,920 --> 00:05:40,260 -Wes Bos: that's true before you know it there. You've got industrial ones that are cutting down trees bushwhackers that are AI, john heads. Anyways, um, you have doctors in here? - -24 -00:05:40,650 --> 00:06:21,150 -Scott Tolinski: Yeah, doctor. So I mean, just think about it. And obviously, you know, Web MD, but like, the future of medicine, you could imagine is going to be something like idiocracy. You just like plug in, you know, plug your fingers into the thing. And it's like, you have the flu. Obviously, I'm not talking about right now. But they these kind of things are coming. That basically the point I'm trying to make with this is that no job is really safe. And I think every single year, we're just going to continue to see more and more jobs being replaced by computers. And if you have a wide enough view of everything, you could imagine a computer doing just about nearly every single job that exists in the current economy. - -25 -00:06:21,150 --> 00:06:24,660 -Wes Bos: What am I hairdresser Do you think you're gonna Roomba? With a? - -26 -00:06:25,680 --> 00:06:26,940 -Unknown: Please? Of course. - -27 -00:06:27,000 --> 00:06:30,120 -Wes Bos: Yeah. You're okay with putting blades near your head? - -28 -00:06:30,300 --> 00:06:37,620 -Scott Tolinski: Am I okay with it? Yeah, not okay. Well, no, I'm not okay with it. I I'm just saying it's the reality. - -29 -00:06:37,680 --> 00:06:42,600 -Wes Bos: Okay. You just submitting to our blade carrying robot overlords? - -30 -00:06:42,630 --> 00:06:44,310 -Scott Tolinski: I am not to mean nothing. I'm not. - -31 -00:06:45,390 --> 00:07:21,600 -Wes Bos: So yeah, that's our whole idea is like, why not web developers. And I think us web developers sort of have a chip on their shoulders think that we're all how high and mighty because we make the world turn and, and things like that. And I certainly catch myself doing it all the time. Anytime I see like a commercial for like wayfair. Or, like pretty much anything that I know somebody at that company, or I know what tech is running at that company, I got, like that.com is only running because of us. We know like we built this task that's running on that thing. And I don't know, we might be replaced at some point. - -32 -00:07:21,960 --> 00:07:47,970 -Scott Tolinski: So I thought this would be a fun little thing is that since we're largely going to be talking about web development, and Gee, why's that assist, or help in web development? A lot of this is really centered around website builders, or app builders or tools that can do a whole bunch of stuff for you just by clicking and dragging, whatever. What was your very first experience with sort of building an application or a website via a GUI? - -33 -00:07:48,270 --> 00:08:33,960 -Wes Bos: Oh, yeah, for me, it was Dreamweaver. And I remember thinking, Oh, it can't do the whole website. Like I thought, as soon as I got Dreamweaver, cuz I was using, I think notepad plus plus at the time. And then I finally got Dreamweaver, and I was so excited to not have to write code anymore. And I got into it. And I thought, like, oh, like, it's got some tools for hovering a button, and you can put buttons in spots, and it will generate the HTML, but like, it's not the whole replacement. And that was most probably 20 years ago. Yeah, that that first happened. And if you would ask me, if 20 years later, would we have that? Would we have this better? Yeah. Because geo cities was drag and drop, wasn't it? - -34 -00:08:34,230 --> 00:08:38,850 -Scott Tolinski: I used Angel as an angel fire head myself. So yeah. - -35 -00:08:38,970 --> 00:08:52,020 -Wes Bos: Oh my gosh, yeah. Okay. I think Joe said it was Drake drag and drop because I went from geo cities into Dreamweaver, and then I realize I better have to actually learn how to write this code thing. So that was my first foray into gooeys. - -36 -00:08:52,230 --> 00:09:33,169 -Scott Tolinski: Yeah, same here. And I think my first realization that they're not that good is when you were to look at it in the browser within Dreamweaver, like the injury Weaver browser, everything would be roses, and then you'd open it up and the actual browser and the whole thing would just look like a car crash. And you're just like, ah, but the gooey said, it looks fine. So why doesn't it look fine. And that was my, my understanding, when I had to start diving into the code was more like, shoot, this thing can't look this bad on actual browsers, it actually has to look good, well, what's going on here, and then you open up the code and see like, you know, 1000, different nested divs. And all of a sudden, you're, you're freaking out about this really bad looking crazy code that this tool has created for you. - -37 -00:09:33,649 --> 00:10:06,690 -Wes Bos: So of the gooeys that we have out there. There's obviously lots of little GUI tools, things like there's get clients that will allow you to use the client instead of having to write the Git commands. There's VS code, I would consider a GUI only. Now, even though we are writing code, it does take a lot of the like, what would you call that kind of work that vs. code does. It doesn't write any code for you, but it does make things A lot easier a lot of the the hinting that it gives you a lot of the automations that it gives you. I certainly welcome that type of gooey. - -38 -00:10:06,870 --> 00:10:08,419 -Unknown: Yeah, it's an assist. - -39 -00:10:08,659 --> 00:10:10,350 -Wes Bos: It's an assistant. You're right. Yeah. It's - -40 -00:10:10,350 --> 00:10:14,250 -Scott Tolinski: Sidney Crosby, Sidney Crosby passing you the buck, and you just got to tap it in. - -41 -00:10:15,919 --> 00:10:17,100 -Wes Bos: I know all about that. - -42 -00:10:17,219 --> 00:10:17,970 -Scott Tolinski: Yes, you do. - -43 -00:10:18,529 --> 00:10:47,220 -Wes Bos: And then there's entire website builders, which is, which is probably more of what people are worried about. So you've got things like Wix and Squarespace. You've got different WordPress builder plugins, where you can just click together a website, there was grid.io. For the longest time, yeah, it was gonna use AI to regenerate your website. So you'd give it some content, and it would use AI to just generate it up. And like people were seriously I remember - -44 -00:10:47,220 --> 00:11:04,799 -Scott Tolinski: people being very scared about grid die. Oh, yeah. And now it's like not even not. Yeah, I was just looking up the domain name. I remember people in the agency being visibly scared about grid.io. And they saw, do you see this, and people are gonna want to hire us anymore. And yeah, boop. - -45 -00:11:05,279 --> 00:11:59,039 -Wes Bos: It never never panned out. No. And then there's also like tools that are not meant for the end user. Like, I think like a Wix and Squarespace. They are either meant for end user who is somewhat technical to go in and click the other website, or it's meant for someone who will use that as a tool to go ahead and build a website. And certainly, like Wix even now has serverless functions. So they definitely are targeting developers. But there's things like web flow, we had a sponsor, last year, coffee cup had like a grid builder, which kicked out like decent CSS code extra really nice CSS code at the end of the day. So that's like a whole nother area where they're not targeting end users. They're saying web developers, instead of writing code, this is the tool that you will use. And I haven't used web flow myself have used God, - -46 -00:11:59,039 --> 00:13:02,159 -Scott Tolinski: I haven't. But it looks nice. I think I've had my eye on and I can see sort of like what it does and where we're coming to action. It does things like animations. But again, with any of these tools, once you hit like a snag in the way that it does it, it's going to be harder for you to gain that like full control, which, of course, is something we'll talk about. And I think even further in that same direction of like, GUI tools is slightly more in the direction of for developers is the app modules dot app. We keep talking about this, but it's not released yet. I just did another round of betas. I'm really excited to get this one. Because this does feel like it's a GUI for writing code. what it feels like is more of like a figma, or a sketch that gives you a react view of whatever code. Yeah, so the code in this becomes much more of a main feature than something like web flow, work into the it does nice code and the code is much more forefront in this. You'll be able to import code and export code and have your component system come in and out of this in a design GUI tool. - -47 -00:13:02,459 --> 00:13:28,260 -Wes Bos: Yeah, you got to think that at some point, sketch and figma. And all these companies are looking at, like At what point can we export to HTML, CSS and JavaScript? Right? Yeah, yeah. So given all of these builders, like, like, what do we think? Are they going to replace our jobs? Where do they fit in? In terms of being a web developer, we want to tackle that? - -48 -00:13:28,439 --> 00:15:01,440 -Scott Tolinski: I think with most things, it's a fit for any given situation that requires independent evaluation. Like if you're a person who is opening up a flower shop, and you need a store to sell things on, or whatever, are you necessarily going to think, Oh, right, now I gotta learn react first. And then I gotta learn this. Next, I gotta learn how to work with data, like that's not necessarily the right in the best path for you. Maybe you have some cash, and you can fire off some money to somebody who's going to do it for you. But if you don't have that money, these codeless tools, something like Wix, or Squarespace that even have e commerce things built in, That, to me seems like the perfect situation for you to be able to go ahead and take that. And so for any sort of basic operation, these things are going to work really well for you. And in my opinion, I think one of the things that that does for us, developers who are really into the code stuff, is it frees us up from having to work on those types of projects, those types of projects that I personally don't necessarily love to do. I like building fast sites. I like building nicely designed sites and brochure sites cool. I like doing all of that stuff. But I really like building applications that are useful a little bit more now. And that's really where I want to spend my energy rather than writing some HTML or working within a CMS or some other system to produce some sort of brochure site. I'll let somebody else and or a robot Do that for me gladly. - -49 -00:15:01,980 --> 00:17:15,390 -Wes Bos: Yeah, I think where are these things are going to replace jobs is the sort of like brochure where websites, the couple hundred to a couple thousand dollar WordPress website, it's much easier for a client to just sign out for themselves, especially the type of client who wants to have control and push the buttons themselves, they can just sign up for one of the services and and crank out a website, even basic e commerce website, someone's able to sign up and kind of get it in. And that's good because I don't think we need to be re doing these websites over and over and over again, there. Everybody's got the same large photo at the top with a call to action button, three columns underneath an email signup form at the bottom, we've all we've written those websites thousands of times ever, I think that these tools are freeing us up so that we can work on other stuff. And for some people that causes anxiety, because that's where their skill level stops. And they're being replaced by a robot and their skill is their skill was pushing the button, the right buttons, putting WordPress themes and plugins together. And now they have to be pushed a little bit further as to when do you call someone who does custom stuff, it's when you hit the limitations of these things. And the limitations of these tools are keep pushing themselves out. They are getting better layouts, they are getting better ecommerce, things like that. And I'm okay with that. Because that like Scott says it opens us up to being able to work on better and and harder problems. Because certainly there is no end to problems in web development space that that we need to solve totally. And I think that big just because it's like gooey, people tend to poopoo it. But like you look at something like Gatsby that comes preloaded with all of these image compression and all of the stuff and it just does it for you. And everyone loves that. And why is it that everyone loves Gatsby doing all this stuff for us? But they don't like like a Wix or Squarespace doing this stuff for us? And it's because it has a has a gooey, I guess it doesn't seem as hard? - -50 -00:17:15,390 --> 00:19:43,850 -Scott Tolinski: I don't know. Yeah, that's if you think about it, it's at the end of the day. Those are both you're not writing. I mean, you're writing code in the Gatsby sense. But you're not writing any of that image compression code. Yeah, you like you don't have to write every little tiny bit of code for everything you do. There's no, I don't want to either. And as long as you're evaluating these services, I think part of the part of the issue too, is like who owns what, right? I think about that a lot with some of these, like, who who's the owner of this, if you write the code, you've owned it right? And, you know, you're putting it on a server or whatever you're renting out that server space. But when you have too many codeless services, how much of everything Do you own? And maybe that's a an anxiety or a stressor for people? But then you can keep going far with that. It's like, how many libraries do you need? Are you going to use every library? Are you gonna write a framework from scratch? Like, how far are you willing to go to make this thing 100% Custom, because we all use tools every single day. And whether or not it's a GUI tool, or it's just a magical tool, whatever. They're all serving the same sort of purpose. And speaking of tools that really just make your life easier, but don't get in the way, I want to talk about one of our sponsors, which is hasura@hasura.io, that's h a s, u r a.io. And Hasura is this really amazing Open Source engine that allows you to connect your database and micro services and instantly gives you a production ready, graph, qL API auto scalable, you can import your applications. I recently did a big, nice little test run of Hazara from my own YouTube channel. And it was really, really cool. I was very impressed. Basically, you can host this anywhere you want, if you're not using the enterprise version. So it's free to get started free to use free for any sort of major thing because again, you're hosting this yourself. And they even have like a like a one click Get started with Heroku. Oh, yeah. So if you want to get this trying to do this one click Get started with Heroku. And really just experience it allows you to basically create your own API through their GUI, which is largely just a nice way to work on the database itself. And it builds out all of that stuff that you typically would have to write yourself for a graph qL API with is mutations, query subscriptions, all that stuff. It takes care of all of that for you - -51 -00:19:43,950 --> 00:19:51,960 -Wes Bos: then occation to yeah, oh, yeah, I installed it myself when I was like, evaluating it for my course. And it's really neat. - -52 -00:19:52,380 --> 00:20:24,720 -Scott Tolinski: Yeah, I know it is. It is very neat. So you want to check it out@hestra.io and again, get started with that. Get started quickly. And you'll have a graph qL API up. And seriously, I did my YouTube video on Hasura the other day, and I had an API up in like, less than five minutes. So it's really super cool. And again, because it's open source, and because you host it yourself, you really get a lot of that ownership feeling of this kind of thing that we were just talking about. So again, check it out. hazara.io. - -53 -00:20:25,170 --> 00:21:56,790 -Wes Bos: Alright, let's talk about GUI and codeless. A little bit more, is it always better like there tends to be either people think it's always bad, or it's always better. And I tend to think different situations is better. I've certainly been in situations where they give you a GUI for something that is clearly just talking to API's under the hood. And it's extremely frustrating, because you just end up with 400 tabs, and a bunch of checkboxes, and you can't figure it all out, when in a lot of cases, some lightweight scripting or something like that is the better interface for dealing with something like that even like, you think about what is it like x Microsoft Excel, that's a GUI for lightweight programming, I would say. But as soon as you want to get a little bit complicated, like we've got a spreadsheet for the sponsors of the show, and we've got two columns, and I want to check our I want to count the the number of times a certain one shows up in either column, and then tally them up on this like, pivot table. And I was getting into some serious stuff in Microsoft Excel when like, I was like, Oh, this would be so much. I get map filter reduce three seconds. So sometimes a GUI is not the best interface for that when you do want a little bit of control. Yeah, obviously, you have to learn how to do a little bit of programming, but anything somewhat complicated. I think the the GUI falls short on that, what do you think about that? - -54 -00:21:57,180 --> 00:23:11,820 -Scott Tolinski: I think it all falls into what you're capable of doing and how quickly and comfortable you are capable of doing it. Because there are things like in web development that I'm capable of doing right authentication, I'm very capable of doing authentication. But in my platform, Meteor just does it for me, as I think about it, and didn't have to spend that time. So I think there's more than just like a wing of like, if you can do this or not, if you should do it, whatever your deadlines are, whatever your goals are, but everybody's on a sort of a different spectrum and a different path of like, I'm capable of clicking some buttons in creating a Wix site to I'm capable of, you know, writing, you know, byte code, or whatever I'm writing in binary to to create a full stack whatever myself. So there's this huge spectrum of how quickly and capable you are with something. Verse, you know, what the simplicity is, in every single time you approach a situation or problem, I think it's worthwhile to address some of these, you know, I had this, a lot of this stuff came up when I was doing my subscription model. There's a whole lot of platforms that do subscriptions, like there's one called recurly. I don't know if you're familiar. - -55 -00:23:11,850 --> 00:23:14,250 -Wes Bos: Yeah, I've used that before many years ago. - -56 -00:23:14,610 --> 00:24:30,420 -Scott Tolinski: Yeah. And so there's a bunch of stuff. I think they're actually based out of Colorado here. But yeah, they are they they invited me to do they like it send me like a customer service thing. I was like, Hey, can I just pop over to the office and chat with you guys. But this kind of service, what it does is it handles a lot of the nitty gritty for subscriptions. And you know, the the prices, they take a little percentage off the top. Well, when I was writing my subscription things I was thinking like, Well, you know what, I'll just do it myself. That way, they don't have to take any bit off the top. A little did I know that the Braintree API really makes you write everything yourself. So my API took me a substantial amount of time to write. And I honestly, I do kind of regret not using one of these services. When I had the chance to start getting up and running. When I think about how much time I spent really writing all that custom code that could have been done much faster, much easier for me on this tool. It's not necessarily no code. But it's a tool that helps helps reduce the amount of code. It's a code reducer. That's the whole thing is we have these, this whole no code movement where people are talking about not using code for anything. But like, what about the the some code movement or the some no code moves? - -57 -00:24:30,870 --> 00:24:33,120 -Wes Bos: Yeah, yeah. A little bit of both. - -58 -00:24:33,150 --> 00:24:38,040 -Scott Tolinski: Yeah, that's maybe the sweet spot in my mind. But I'm a developer. So it's going to be? - -59 -00:24:39,750 --> 00:25:01,800 -Wes Bos: Yeah, like, honestly, I've got no horse in either race. I just want to make cool things. And if either one of these things code or no code makes that easier and better and makes for a better user experience for my user and sells more widgets at the end of the day, then I will I will totally embrace that. Totally. - -60 -00:25:02,160 --> 00:25:04,080 -Scott Tolinski: Unless it's a robot lawnmower. - -61 -00:25:04,080 --> 00:25:07,620 -Wes Bos: Unless it's a row. I'm I welcome robot lawn Morris, - -62 -00:25:07,830 --> 00:25:18,060 -Scott Tolinski: but I'm not gonna embrace it. So that's been in blades. I don't wanna hug. Yeah, it was a good joke. There's a little hug joke. My dad now again, Oh, I - -63 -00:25:18,060 --> 00:25:19,860 -Wes Bos: didn't even get that. Wow. Yeah, - -64 -00:25:20,009 --> 00:26:13,680 -Scott Tolinski: that's great. So we did talk about some of these tools and like what they are and maybe what they do for you. But I had this little levels of hell crossed out and wrote goi assistance. And builders in this is just sort of like maybe the different levels of what these tools can be. Because again, they can be anything from services that you just add. But really, for website builders, specifically, you have had the the very, I think the I don't want to say necessarily the most technical level, but the very most outer level of these builders is what we've all come to use is basically cm CMS is right. Were there people at the time when CMS started popping up talking about CMS is killing programming jobs. I maybe I don't know, I don't remember a world before CMS is honestly. But like, you have WordPress, which, at the end of the day does a lot of stuff for you that it used to be somebody's job to do. - -65 -00:26:14,130 --> 00:26:19,620 -Wes Bos: Yeah, the the CMS killed the what what do you call that web master, - -66 -00:26:19,830 --> 00:26:21,720 -Scott Tolinski: or whatever, to the webmaster, maybe? - -67 -00:26:21,720 --> 00:27:15,630 -Wes Bos: I certainly know, when I first got started, I knew a lot of people and as working as a, like a WordPress consultant, I would go into companies, and you would you would meet these people whose entire job was to just update the content and to wrap it in paragraph tags and to put span tags around things and to inline it. And it's just like poof, like, hopefully, they have like some other skills at that, because like WordPress, totally decimated that whole thing. Because now anybody can come along. And you can literally even copy paste it from Microsoft Word, and it will keep the formatting, right and paste it in. But then I guess there's a downside to that. Is that like, have you seen the garbage that the WordPress GUI kicks out when you try to like paste in pre formatted text, right, like, downside to the quality of code that comes out there? - -68 -00:27:15,870 --> 00:27:53,730 -Scott Tolinski: Sure. But in again, you got to think about it like that person who had that job as the person who is just updating HTML files to change the content, you know, the career path for them could have been learned some PHP, and then all of a sudden, you're not just updating that and you're writing custom functionality for a WordPress site. And so I think it's important to always have your eyes on where these things are going and how you can be sort of ahead of the game there. And make sure that you're not going to be replaced by a robot because you're now having these skills that these tools can't do exactly for you. - -69 -00:27:54,150 --> 00:27:58,680 -Wes Bos: Speaking of tools, that will give you a nice GUI Scott. - -70 -00:27:59,010 --> 00:29:12,600 -Scott Tolinski: Yeah, it does. This gives you a nice GUI is one of our sponsors today. And that is Log Rocket. Now Log Rocket is the super cool platform that allows you to see a session replay of when errors happen in your site. Now this thing is really super cool. Let me tell you, I heard a rumor that Log Rocket like darsie, the magic slogan that was a little a little Tweety, Tweety Bird. Yeah. So yeah, I wish we had joked around that you need to see the magic on Log Rocket, you'll want to see that magic at Log rocket.com forward slash syntax, where you'll get 14 days to try it. Now, what does this do, it gives you a session replay, it is an exception tracker, that allows you to see the errors as they happen. So when a user click this thing, and it broke your website, well, now you're going to be able to see a video of that user clicking and breaking your website. But not only that, you're going to be seeing the network blog, you're going to be seeing your Redux store, you're going to be seeing the error logs, all that cool stuff. Only that you're going to be able to see the mouse and where they clicked and how they broke your website explicitly. So it is really super cool. You're going to want to try it out at Log rocket.com forward slash syntax and see what the magic is all about. - -71 -00:29:12,810 --> 00:29:13,860 -Wes Bos: Beautiful. - -72 -00:29:14,280 --> 00:29:56,910 -Scott Tolinski: So we can continue with the next level here, which would be you have access to code, you can drag things into place, maybe it's not necessarily a CMS, but it is a little bit more for you than a CMS because you do have the access to some code, right? Like, I think like a Squarespace would be here, because I think you do have access to some code, right. But for the most part, the intended use is for you to be able to just drag and drop things into place. And you shouldn't have to worry too much about the theme or the PHP that's doing it. And then the next would be being able to drag blocks into place, but just about no access to code, right. They're not giving you maybe you can add a script here or there or whatever. But for the most part, this is just a Lego piece set. Right? - -73 -00:29:57,060 --> 00:30:45,110 -Wes Bos: Yeah, you can drag and drop your blocks. This is pretty popular in In like WordPress land, and as well as a Squarespace, things like this, you have, I don't know a whole bunch of different kinds of blocks, you have a big big photo, you have a gallery block, you've got text block, you've got an email signup block. And you can drag and drop these things into the spots that you need. And then usually what happens is they give you some sort of like custom block. So if you really need to go custom, then you can go ahead and just paste in some code. And that's for me, where it gets a little bit frustrating where then your workflow ends up being typing into this like text area. Or maybe they have some sort of like code, like a code pen thing in there. But that's frustrating for me, because I rather work and use version control and things like that, in my entire editor. Yeah, - -74 -00:30:45,150 --> 00:31:34,950 -Scott Tolinski: there's a lot of like, weird ground here, where, as developers, we're starting to lose the ways that it's efficient for us to work in these like, I don't want to use my mouse to click around this interface this whole time, when I could be doing it very differently. I think the last sort of one here in this, these levels of health for web developers would be an easy theme that's completely just generated out of the box. And the only thing it allows you to modify would be like text headings in images, sort of Dragon that sort of, in these, these are the varying levels of these robot editors. And you can see from the very bottom of hell here to the top, we lose control, like as you go down, you're losing control, you're losing the ability to take it over as a developer. And I think that makes a lot of us pretty anxious. - -75 -00:31:35,130 --> 00:31:50,790 -Wes Bos: One thing I'm wondering here is that a lot of the stuff we've gone over today are for making websites and some lightweight e commerce, but like, what about like web apps? Like what about custom functionality that you want to build? Have you seen anything that allows you to do custom functionality? - -76 -00:31:51,150 --> 00:32:26,100 -Scott Tolinski: Remember, there are some, like app builders that are sort of like Lego pieces specifically for like, native mobile, ad, none coming up with the names right up top, but they make lofty promises, like you can make a native app without touching any code. But at the end of the day, if you're working with any sort of actual API, yeah, or database, or you're working with data in any sort of way, a lot of these sites or applications that you're able to build with these can only end up being so complex, the moment you need something that is really off the beaten path at all, you're going to be totally screwed at this point. - -77 -00:32:26,100 --> 00:34:17,670 -Wes Bos: Yeah, that's I see a lot of people, namely, like marketers, they use Zapier to click together multiple services. So they're paying four bucks a month for 47 different services. And then they're all connected to each other via Zapier and web hooks, and Zapier is this tool that says like when it's kind of like If This Then That, yeah, but it's a little bit more, a little bit more in depth than if this and that you can do things like if when someone buys something on gumroad, then send them an email and push them into your email marketing software, and allow you just to click together all kinds of different services that might not necessarily talk to each other. And I've seen lots of times, like, that's great, because it allows people, mostly just to get the stuff done that they want to do. But there are things where you you do run into issues. And you you can't get done exactly what you want. And quite honestly, that's where I see a lot of marketers come to me into coding boot camps where they're like, I need like just a little bit more skill. So I can, I can code this myself, instead of having to rely on some sort of a GUI. So it that's a just another perfect example is a gooey gets by and probably 90 95% of the use cases. But as soon as you want to do something custom, and probably something that is beneficial for your business, that gives you a bit of a competitive advantage, then you don't have access to the same thing with like, people always ask me like, why are you not using like teachable or something like that for hosting your platform, because it's just this thing, you sign up, you upload your videos, and you're off and running. And it's because I want to do things like parody, purchasing power and coupon codes that are specific to specific people. And like, I do want that extra 10%. And that is hugely beneficial to my business to be able to do that. - -78 -00:34:17,820 --> 00:34:34,350 -Scott Tolinski: We didn't even talk about some of the business financial things about this. Because really all these services that you're gonna pay for that every single time you add it like a no code service to whatever you're doing, you're paying for it that's coming off the top line, the bottom line, top line, bottom line coming off the bottom bottom line, - -79 -00:34:34,670 --> 00:34:36,510 -Wes Bos: there's no top line, there's no top line, it's - -80 -00:34:36,510 --> 00:35:34,710 -Scott Tolinski: kind of at the top line, it's coming off the top or coming off the bottom line. I think those are the only two valid ways to say it. But at the end of the day, we we need to assess that and what are those costs going to be because really when I was mentioning that recurly option, it's like recurly does so much for you, but it did take some off the top and to me I not interested in that necessarily in every single case. Now there are some times where I'm definitely willing to pay for what is going to be the, you know, the tool that makes my life a lot better. But if this tool is going to affect that for the rest of time, and is going to be a percentage based on top of every single sale that I do, there are some major concerns there that you need to think about, like what is the most healthy, cheap thing because it seems like the code option if you are a developer, and you have time might be the cheapest. Now, if you don't have time, and you're hiring a developer to do it, developers are pretty expensive. So that that is again, a trade off you need to be aware of. - -81 -00:35:35,040 --> 00:35:45,570 -Wes Bos: Yeah, I'm just looking at Squarespace. And their most popular is, if you pay monthly 16 bucks a month, then it goes up to 46 bucks a month. And - -82 -00:35:45,630 --> 00:35:47,070 -Scott Tolinski: that's cheaper than a developer. - -83 -00:35:47,100 --> 00:36:52,890 -Wes Bos: Yeah, 46 bucks a month, 12 months, it's five 600 bucks a year, you certainly would spend a couple, like at least 1500 bucks to get a custom developer. So it's three years. And then you also have to pay them for updates. But then you look at adding on e commerce. And especially like I know Shopify makes a lot of bank from the apps, the add ons, if you want to do like a upsell people or circle back with email, or I'm just looking at the Shopify App Store. And a lot of these things are 678 bucks a month, which doesn't seem like much until you've got 15 of them running and all sudden this thing is costing you a whole bunch of money. But for a lot of people certainly worth it and and a lot of developers are probably certainly worth it as well. Yeah, everybody's in a different situation. And every situation is different. And I think that's what some of the people on both sides of the argument need to realize that code no code is not right. For everybody in code all the time is also not right for everybody, you kind of have to look at each situation and what your parameters are in terms of money, skill set, and whatever. - -84 -00:36:52,890 --> 00:37:02,940 -Scott Tolinski: So whose jobs are at risk from these things? And whose jobs are not at risk from these things? I have some really good ones for not at risk. Do you want to tackle these whose jobs are at risk? And - -85 -00:37:02,940 --> 00:37:11,730 -Wes Bos: whose jobs are at risk? Well, certainly, certainly not the no code coders because the whose code in the no code platform, - -86 -00:37:11,880 --> 00:37:20,670 -Scott Tolinski: right? The no code coders are not at risk. Unless they no code themselves out of a like they they code themselves the robot that codes there no code for them. - -87 -00:37:20,690 --> 00:37:28,110 -Wes Bos: Yeah, at some point, they're gonna write one line of code too many and then just start writing itself. - -88 -00:37:30,300 --> 00:37:30,920 -Unknown: Oh, no. - -89 -00:37:38,010 --> 00:37:42,210 -Scott Tolinski: Excellent. printer just started printing out pink slips everybody's toes. - -90 -00:37:44,370 --> 00:38:33,840 -Wes Bos: I think like, obviously, there's there's that that's that's what's comforting to me is that like my courses, the folks at Wix actually take my courses to learn react. And I was like, okay, like, obviously, they're not using their, their own tool to build Wix, which obviously, everybody would would think that. So that's not at risk, I think who is at risk is WordPress tinkerers, things like that, where it does become a lot easier just to use it. But then again, I've also seen a lot of people just move to like, they're still web developers, they've just moved to using like Squarespace or Wix or something like totally cuz it's an easier tool for them to use and their client like stuff data. And there's nothing wrong with that, because you're still providing the service to your customer, which is getting them online and making them visible and whatnot, and how you build the website is just part of it. - -91 -00:38:33,960 --> 00:38:38,790 -Scott Tolinski: Yeah, that's the goal. And the day is to service the people who are paying for your services. - -92 -00:38:38,900 --> 00:38:54,540 -Wes Bos: Yeah. And then we said that the webmaster jobs that are where you're just upload updating HTML on a website, I think that that ship is probably sailed, though I don't know a whole lot of people who straight up code HTML into website anymore without some sort of CMS in between. - -93 -00:38:55,610 --> 00:39:53,400 -Scott Tolinski: Yeah, and I think there's some jobs that are definitely not at risk, like typically you think of like when I worked at the University of Michigan, they had such strict guidelines about what their web properties needed to be like that I just don't think it was possible for them to get on any sort of service like a Squarespace or Wix without some sort of major contract in place. For those services to adhere to specific guidelines. Like we we had to run specific versions of PHP and all the servers had to be a specific way. And, you know, because of that we were stuck on various versions of different CMS. And granted we could use those CMS is but the University of Michigan had to basically own everything. And I think with government educational institutions like that, I think there are a lot of those companies who are always going to require some level of ownership over the code that unless they've built their own no code tool or own CMS or own whatever, that getting them into something like a Wix or a Squarespace just probably isn't going to happen. - -94 -00:39:53,820 --> 00:39:54,390 -Wes Bos: Totally. - -95 -00:39:54,390 --> 00:41:35,360 -Scott Tolinski: Let's finish it up with some of our favorite gooeys that do help us do develop What are some of yours? Everybody knows my favorite GUI is Netlify. Now, if I took all of the things that I hated about deploying a website, and they made it really super nice, like, Oh, you know, you want to have continuous integration for free like an easy, why not just do it, you want to have an SSL certificate without having to do anything? Sure. Okay. You want to just connect a repo and just have it do everything for you? Yeah, no problem. So Netlify, to me falls in line and one of these like, it's a GUI. But at the end of the day, it's a GUI that helps you develop things faster and easier and takes care of stuff that you don't want to do yourself. In other platforms like that would maybe be like Heroku Heroku, did the same sort of thing with hosting these one click applications, they made it really easy to add services in ways that are just super nice and easy. Another one is a studio three t, which honestly is my pick for the application that's stuck in a time machine, because it looks like it's from the 90s. But I don't want to have to fiddle with my database in code all the time. And maybe I don't want to necessarily have to write all these tools all the time. And this gives me a way to visualize see the database in a way that many other database gooeys are because database gooeys in my mind are just, they're a must have for doing anything. And obviously VS code for web development is a GUI. It's not, it's not a drag and drop Website Builder. You got to do all the coding yourself. But VS code itself has so many niceties that just make my notes look a little high five with the app, and it takes care of a bunch of stuff for you. - -96 -00:41:35,790 --> 00:42:40,050 -Wes Bos: Yeah, I don't want to get too heated on the like vim vs VS code thing. But like the amount of work it takes to get like sidebars and everything up and running in vim, we're all just like, I personally do this with Zed sh, if you look at half the plugins I have for is that sh or z sh for all y'all Americans. I'm just like trying to like the command line prompt and the auto completion and being able to use your arrow keys to select files from a list. All of those things are gooeys, that will make your life much easier than having to type out the code directly. So not kidding, anyone there. Every now and then I use the sketch CSS export. So if I've got like a card, and that card has a border and a couple box shadows and a specific background color on it, I'll just right click Export to CSS, and it'll give me the exact box. The box shadow is a big one, because I have to fuss around with box shadow a lot to make it look like my design when the values are already in. Oh, yeah, your design tool, might as well just export them from there right. Now, I - -97 -00:42:40,050 --> 00:43:22,380 -Scott Tolinski: don't know what sketch does, because it's been a long time for me. But in figma, you can create these design styles like I've created my all my my whole elevation system for Bach shadows in figma. Right, yeah, I've created the whole element elevation things as styles, I never have to touch values ever in figma, just I select a div and then or a square. And then I say, okay, your elevation level three, whatever. But then there's just a right click Copy CSS, it's like so nice to be able to do that, then they have to write box shadow comma, you know, like all that over and over again, where you may be prone to maybe make a mistake here or there. But this way, you have the visual representation of it, copy and paste, you can confirm it. It's not like it's just doing anything for you there. It's - -98 -00:43:22,380 --> 00:43:33,110 -Wes Bos: just helping out. Another big GUI that I like to use is big GUI. That's not like cyberduck if I want to interface - -99 -00:43:33,170 --> 00:43:40,020 -Scott Tolinski: cyberduck is like I haven't I haven't heard of cyberduck. since the days of webmasters, I use a transmission. - -100 -00:43:40,020 --> 00:43:59,940 -Wes Bos: Man, you know what it's good for. So if you want to upload files that are bigger than like half a gig to backblaze b two. Yeah. It has, like it has all of the API's for uploading to backblaze in it. So So does it transmit? Yeah, Does It Really? Yeah. Well, that was - -101 -00:44:00,720 --> 00:44:06,420 -Scott Tolinski: a one click service for v2 because I use that that's what I use for B two or s three. - -102 -00:44:06,780 --> 00:44:18,630 -Wes Bos: Oh, why? Because I use transmit for everything else. Like I'm just saying like, anytime I want to upload a big file or peruse or download a file. I don't want to have to figure out what the SCP or our sync command is. Oh, yeah. - -103 -00:44:18,840 --> 00:44:23,580 -Scott Tolinski: I only upload big zips to my v2 and I use transbond - -104 -00:44:23,910 --> 00:44:50,130 -Wes Bos: you know, well, what am I using cyberduck for then, if I may be too on because I love transmits one of those apps I've used for like 10 years and I love it. Yeah. Oh man. Well, today I learned but for those listening, if you don't want to pay for transmit, you can do it for free on cyberduck but transmit to you is so yeah, it is a good it's a G G G gooey, gooey. Good, good. Really good, gooey. - -105 -00:44:50,130 --> 00:44:52,710 -Scott Tolinski: Yeah. gooey, - -106 -00:44:52,830 --> 00:45:34,380 -Wes Bos: Digital Ocean, another gooey I would say. So if you want to set up a box with like a Docker image That can be hard. And some would say impossible. And digitalocean allows you to just click from a list of things. And you can do things like upgrade your RAM or your cert your server space or create a firewall. All of that is is just a GUI and because I'm not like a sysadmin, I love it right? And I'm sure there are hardcore sis admins who think that's lame, and you should do it on the box yourself. Yeah. But as someone and like that, that's what makes me think about this as like, people that aren't like hardcore full time web developers probably look at this stuff. They're like, yeah, - -107 -00:45:34,380 --> 00:46:11,280 -Scott Tolinski: keep doing your code thing. But yeah, I find this to be very helpful and easy. It's all a spectrum here of you know what your abilities are, because the Digital Ocean really changed the game in that regard in terms of totally being able to set up a VPS just so easily. And quickly. I remember the first time I used digitalocean, I felt like, while I finally feel like I have some understanding or superpower as to how to control and set up the servers, where I would have looked at something on AWS and just been a little confused. When I was was that easy to I never used their service like that. - -108 -00:46:11,609 --> 00:46:23,700 -Wes Bos: Yeah, I used it all. It's awful. It's so hard to do it. It's I wish that Amazon would make it easier for just regular folk to use their services. Yeah. Because it's it's difficult. Yeah, - -109 -00:46:23,819 --> 00:46:27,480 -Scott Tolinski: I think I referred to one of their services as the deal with it platform. - -110 -00:46:29,460 --> 00:46:43,560 -Wes Bos: where like, there's like now this whole crop of services, like we talked about begin calm Come on episodes ago. They're they're just a service on top of AWS. That makes it easy to do serverless functions. Right, - -111 -00:46:43,650 --> 00:46:54,960 -Scott Tolinski: right. So somebody had to code that to so that we could get to know code. Begin calm. And I don't know if I'd begin spend necessarily no code tool, but it does so much for you. It's really cool. - -112 -00:46:55,530 --> 00:47:10,890 -Wes Bos: Yeah, no, it's definitely stuff to write all your serverless functions yourself. But the setup, which is like it was Yeah, the sysadmin part of it, who has it, US web developers don't want to have to deal with. So pretty neat. They were pretty excited that we mentioned them. So shout out to begin calm. - -113 -00:47:11,700 --> 00:47:50,880 -Scott Tolinski: Yeah, right. Yeah. And I actually have my video that is going to already be out by the time you're listening. This will be on the level up tutorials YouTube channel, and it's going to be Scott tries begin calm, I believe this new thing where it's like very cash, super cash, we're just trying out a service for the first time. And usually it's funny, because I do my my video camera, you probably get to see my real expressions for when I actually click on things because I had a really funny experience where someone from take shape ad sent me a breakdancing gift via the telecom service thing because they saw that I was using the site at that that was fantastic happen live on on the video. - -114 -00:47:51,330 --> 00:47:55,770 -Wes Bos: All right, I think that's it any more thoughts are sure moved into some sick pics. - -115 -00:47:56,010 --> 00:48:22,980 -Scott Tolinski: And I think the thoughts are just be cognizant of what exists, what's out there, what its faults are, what its strengths are and how you can maybe avoid being totally replaced by a robot. But at the end of the day, I don't think anybody as long as you're continuing to work in these things, or your I don't think you're at risk of losing your job anytime soon. But it's always again, you don't want to be that the developer who still only edits HTML in 2020, you know, - -116 -00:48:23,520 --> 00:48:31,440 -Wes Bos: absolutely. I totally agree there. Let's move into some sick pics. I've got one here today that is a baby sick pic. - -117 -00:48:31,680 --> 00:48:33,690 -Scott Tolinski: I thought you were gonna say the pic was a baby, - -118 -00:48:33,870 --> 00:48:38,280 -Wes Bos: I know that it's a baby as well, we should get a baby, they're pretty sick. - -119 -00:48:39,360 --> 00:48:43,260 -Scott Tolinski: But the idea is they do get sick quite frequently do get sick. - -120 -00:48:44,220 --> 00:50:38,160 -Wes Bos: the wrong kind of sick pick on I'm gonna sick pick the outlet smart sock baby monitor. So what this thing is, is when you when you have a newborn baby. And this would be an awesome gift, if you were into spending hundreds of dollars on your friends. And what it is essentially, you know, when you go to the hospital, and they put that thing on your finger that tracks your heart rate and your oxygen levels. So it's the same thing, but it puts it on the baby's foot. It's a little sock, and then there's an app on it that will allow you to monitor their heart rate and their oxygen levels via the app. And this is not like a replacement from keeping an eye on your kid. But what it is, is that like, you know when you have a newborn baby like are they still breathing or they're trying to like picture like fine not wake them up, but you're trying to put your ear next to them to make sure they're still right. That's awful as a parent because you're like, I just want to make sure they're still okay, she's napping for like an hour longer than normal Is everything okay? Okay. And then you go in there and you wake them up and then it's awful or it's the middle of the night you wake up you're like I wonder if they're okay. So, this thing will tell you what their heart rate is and what their oxygen levels There are other ones that are camera based that you put this like dots on the child like it's like a sleepy Snuggie thing. And then the camera will track the dots and make sure that the dots are moving. Like they'll detect the breathing of the child, which is kind of cool. But we got this one years ago, probably four years ago. And we, we just pass it along to my sister, because we're done with it now. But it was such a peace of mind thing. Knowing that you can just quickly open your phone and check on the heart rate. And make sure that make sure that they are in fact still okay, and pretty cool. - -121 -00:50:38,789 --> 00:50:39,360 -Unknown: Yeah, - -122 -00:50:39,360 --> 00:50:40,110 -cool. - -123 -00:50:40,110 --> 00:51:56,190 -Scott Tolinski: I have a podcast pic today, which is going to be a podcast from wondery, which is you know, one of those, I think they did the dirty john one. And after that they just like blew up. So this is a podcast called the Baron of Botox, and it's about this famous plastic surgeon to the stars, and it goes into their life and sort of their downfall as a interesting human being and sort of the things that happen in their life. It's, it's both sad and fascinating. At the same time. I know nothing about plastic surgery, or Botox or any of that stuff. And I'm learning a lot of interesting things. And it's really fascinating about like, the history of all this stuff. And this person who created this, it's very fascinating. And this story is equal parts horrifying and interesting. So check it out. Beautiful, shamelessly plug all of my courses Wes Bos.com, forward slash courses, grab a course or to use coupon code syntax to get 10 bucks off, learn a little CSS, JavaScript, whatever you like. Yeah, my latest course is on how to build a graph qL API. It's now available for level up pros at level up tutorials.com forward slash pro sign up to become a pro save 25% for the year. So yeah, that's all I got. - -124 -00:51:56,549 --> 00:52:00,600 -Wes Bos: Alright, thanks for tuning in. Catch on Monday. booze, please. - -125 -00:52:02,430 --> 00:52:12,210 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax223.srt b/transcripts/Syntax223.srt deleted file mode 100644 index 69cb5342b..000000000 --- a/transcripts/Syntax223.srt +++ /dev/null @@ -1,228 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:03,420 -Monday, open wide dev fans - -3 -00:00:03,420 --> 00:00:07,590 -yet ready to stuff your face with JavaScript CSS node - -4 -00:00:07,590 --> 00:00:08,340 -module BBQ - -5 -00:00:08,340 --> 00:00:09,060 -Tip Get - -6 -00:00:09,060 --> 00:00:11,310 -workflow breakdancing soft skill web - -7 -00:00:11,310 --> 00:00:21,660 -development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Hill. - -8 -00:00:25,950 --> 00:00:59,820 -Scott Tolinski: Oh, welcome to syntax on this Monday tasty treat, we're going to get moving with a framer motion, we're going to be talking a little bit about this library and why it is so cool. And one of these libraries that you're going to want to check out, at least give a try and just see how it can improve your understanding of animations within your react code. My name is Scott Tolinksi. I am a developer from Denver, Colorado, and with me, as always, is d Wes Bos. - -9 -00:01:00,030 --> 00:01:00,930 -Wes Bos: Hey, everybody. - -10 -00:01:01,229 --> 00:01:05,370 -Scott Tolinski: Hey, everybody. I'm gonna start one time just by saying, Hey, everybody, - -11 -00:01:05,429 --> 00:01:06,480 -Wes Bos: Hey, everybody. - -12 -00:01:08,670 --> 00:02:02,040 -Scott Tolinski: This episode is sponsored by Log Rocket, that's ogrockt.com. And you're gonna want to check out Log Rocket, because it is the coolest service to really understand how the bugs that are happening in your code are actually happening. Their tagline is a stop guessing why bugs happen. And really that describes them so well, because what Log Rocket does is it gives you a session replay, which is a pixel perfect video replay. With that scrubbable with events to let you know exactly what happened in your code. When something went wrong. When a bug happens. While it takes a session replay of that bug happening. It gives you access to the Redux store at the time, the network activity console locks in errors and all sorts of really cool stuff to give you that visibility that you so desperately crave. When a bug happens. No more. - -13 -00:02:02,060 --> 00:02:02,610 -Wes Bos: Hey, - -14 -00:02:02,610 --> 00:02:36,090 -Scott Tolinski: what exactly did you do to cause this bug? Hey, my website turned purple. How did it happen? Well, now here, you can watch a video and see exactly what that user did to manage to turn your site purple, whatever it was, it's really super cool. You're gonna want to check it out Log rocket.com forward slash syntax. And during the 14 days for free, that's more than enough to at least have a bug happen and allow you to solve this bug with Log Rocket. So check it out Log rocket.com forward slash syntax. Thank you so much for Log Rocket for sponsoring. Alright, so - -15 -00:02:36,090 --> 00:02:50,160 -Wes Bos: you are jumping into framer motion. I know, really nothing. I know what it is. And I've checked out a few times, but just is really your wheelhouse. So what did they just release something new? Or is this something that you recently got into? - -16 -00:02:50,400 --> 00:07:35,270 -Scott Tolinski: Yeah, to preface this a little bit, I have been doing quite a bit of animation work. As we know, I released in animating react course on react spring. And I absolutely loved working in react spring for a long time. So you know, I've been planning on doing some sort of intermediate level animation course coming up here, right. And I just been hanging out and watching everything. And I decided to give framer emotion a try while I was waiting for the next version of react to spring to drop. Because last time I had actually really taken a hard look at it was when it was still pop motion pose. And so after playing with it, I was really enamored with the syntax of it all, for at least at least, especially, you know, interface, simple animations, not to say that it is a simple base library. But the ease of which it is to be able to create some very simple animations was really impressive to me. So the more I dove in it, the more and more I became impressed with it. And so I decided to do a course, on level up tutorials, which is going to be out February 29. On Leap Day, it's gonna be out on Leap Day, and it's going to be get moving, or now that's the name of this episode, it's just going to be on framer motion. Because of that, I've just been having such a fun time playing with framer emotion overall, I thought we could talk a little bit about it, and maybe lay out some of the differences a little bit of what it is doing this in react spring, maybe what brehmer motion can do for you. I think the the best way to get a good handle on framer motion without even looking at the syntax really, is even just looking at this framer.com forward slash motion. And there's just a lot of good examples directly on this front page. They do even show you the code here. And the cool thing is, is that there's these open and sandbox buttons next to them. So I love that kind of stuff where you can just pop over to code sandbox and give it a try in a real world environment and see what it actually looks like in some real code. So a little bit about framer motion, what's the what's the 411 here is really that it used to be known as pop motion pose. This was a library that largely focused on sort of scenes where you had various scenes that you would change between. And to be honest, as much as I liked pop motion pose, it was never my favorite way of doing animations, it felt like I was writing a little bit more code than I would have liked to write for really basic stuff. It was simple enough, but it was never my favorite one. And once react spring dropped their react hooks versions of like, use spring to do physics based animation. I was, you know, totally sold on that. But the new pop motion pose, which is a framer, emotion is really focused in my mind on simplicity, you're gonna see sort of simplicity, ease of use, just largely in focus here. If we're talking about designing API's that are developer friendly. This to me is the gold standard. This API is so developer friendly. I'm just looking at some of the code examples here. framer comm forward slash motion, and it's just just like sick writing, like inline CSS and react. It's basically writing a couple of props. It's everything I've ever wanted out of a animation library. You know, the worst part about Angular was, at the time, it wasn't the worst part. But looking back on it, it was the whole the way that animations were done, where everything's just gets a before and after before start after start whatever classes and you got four classes to work with. Right, all your animations. And yeah, largely what react transition group did as well. Yeah, one of the reasons why I never liked using react transition, Graham went right to, you know, something like react spring or any of the other options react motion is using render props. Although that API was really difficult to parse, react, react, React motion was a great ly great library, but not a developer friendly API, in my opinion. So this library also uses physics based animation. So there's spring based animations, as well as duration based East based animations. So it's not just one or the other. So you do get access to that sort of physics based stuff into the spring based animations are the defaults. Now, one thing I don't like about this is that their defaults are a little aggressive. For me, they're a little bouncy, so Okay, compared to react springs, defaults, I find myself changing the default a lot more often here. But you know, it's minor. So emotion was previously pop motion pose, where you had different scenes. So you'd set up like the open scene and the close scene, and then you toggle between them sort of sounds like a What's that? David k piano? state state lens? - -17 -00:07:35,790 --> 00:07:41,580 -Wes Bos: x date? Oh, yes. And sorry. Yeah, sorry that you're talking about flip animations. But yes. Oh, - -18 -00:07:42,090 --> 00:08:27,540 -Scott Tolinski: sure. Yeah. So you basically would have like two versions, and that's fine. But again, like for really simple animations, it seems like overkill. However, this like this idea still exists within pop, or frame or motion, it's just a little bit. It's not like the default, the easiest way. It's, it's just another tool that you have. And it's a very, very powerful tool once you get to use it. So what's new here, basically, you have a whatever element you're using, think of like styled components, right? You do style dot div, style dot h, one style dot, pay a paragraph, whatever, you do the same thing. But with motion, it's motion dot Dev. And if you're using styled components, you would just extend that Lino motion dot div within your style to function, right? - -19 -00:08:27,600 --> 00:08:28,350 -Wes Bos: I see. - -20 -00:08:28,470 --> 00:10:10,860 -Scott Tolinski: So it really doesn't get in the way too much. At the end of the day, all you're doing is replacing a div with a motion dot div. And that makes it really easy to implement pretty much anywhere, I didn't have any trouble implementing this, I use styled components all over the place. And the big key is that you have this animate prop. And so you have one single prop. That's called animate. And that prop allows you to set various values. And if any of the values change within animate, the thing animates. So if you have a toggle, you just change that toggle in the animate. And it's going to toggle the animation and it's automatically going to interpolate do everything within the animation. The cool thing here is that the API made it really nice inside of animate or any of their other animation things where you're not thinking about CSS properties. I'm not thinking about transform, translate, 3d, and then three variables, you're only thinking about the x coordinate, the y coordinate, scale, rotate, those kind of things. You could do scale x or something like that, too. But if you want to move something to the left, you just animate the x value to a positive value. The reason being is that because this, what this does is basically, a lot of times people don't realize that you shouldn't animate properties like left or padding or the margin, right. Those are going to lead to some janky animations, you should pretty much only animate a few things. That being you know, training forms, so translate scale, whatever. And even at that you should do those in the 3d environment. So that it utilizes your GPU, but also the opacity. - -21 -00:10:11,730 --> 00:10:17,270 -Wes Bos: I always hear that that people always say like, only transform and opacity, but like, like colors obviously fine, right? - -22 -00:10:17,400 --> 00:10:18,920 -Scott Tolinski: Yeah, yeah. Color side. - -23 -00:10:19,200 --> 00:10:21,050 -Wes Bos: What about font size? You know, - -24 -00:10:21,060 --> 00:10:23,300 -Scott Tolinski: I don't know about font size. I would probably use scale, right? - -25 -00:10:23,340 --> 00:10:30,020 -Wes Bos: Yeah, yeah, you're right. Yeah, that's sure. Like, why would you want to animate the font size? Because that that would like push everything over? Right? Yeah, - -26 -00:10:30,050 --> 00:11:42,990 -Scott Tolinski: yeah, yeah. So you have this sort of live Prop, you can think of animate, you change the values, everything's going to change. But a lot of times the animations are used with an initial state. And for that there is the initial prop where you can say, okay, initially, this thing is at zero opacity. And then the animate value is one. And then that way, whenever that component mounts, it goes from zero to one. And I made it super easy, right? Also, there's an exit Prop, but the exit prop is also for an exit state for unmounting states. And this needs for you to be able to use this you need a wrapping component around that there's a little bit around there with the syntax, you might want to look up, it's a little bit hard to express over radio. So like I said, this whole thing is all about making difficult stuff easy. And one of the things they make really easy that I like, is just your base things. So for instance, to to make something draggable, you simply add a prop, drag it that's like, it's it's super easy. You can say drag x, and then it's going to allow you to drag on the x coordinate of this thing. Or you can give it a drag a constraints, and then it's going to constrain itself to a specific div. It's really super cool. - -27 -00:11:43,080 --> 00:11:48,810 -Wes Bos: Oh, man, this drag and drop demo is so cool. It's so slow to the website and check this out. - -28 -00:11:48,960 --> 00:13:00,960 -Scott Tolinski: Yeah, there, there are so many neat little demos here that are so slick. The fact that it makes this like draggable stuff this easy. You don't have to bring in anything else, it just super nice. Another thing is, is working with gestures and events like hover and tap, those kind of things. I always had the issue with bring or react spring were here I have this animation that's taking place on Mount right, or this animations taking place. But then I also want to give that same item, a hover animation. So I would do the hover animation and CSS and you have to add a transform or a transition. But if you had a transition to that same thing, then it's going to goof up the physics based animation because all of a sudden you have a transition on it while it's doing its spring based JavaScript based animation. And the whole thing gets really messy. So what I really loved about this library is that it handles the hover events to like wild hover or on hover. And that way you can change the the CSS properties without having to worry about whether or not the animation is complete or whatever, it all interpolates correctly based on whatever you're using. So this library handles that all rather than just the animation part of it. - -29 -00:13:00,990 --> 00:13:26,430 -Wes Bos: So for things like drag and hover and scroll, are you able to hook into these? And like when something does drag, then do something is that what is it? Or is that not what it's meant for? Like, is it meant to be made for UI components that you actually, because I'm just looking at this, this this that div that you drag? And that's not accessible at all? I can't even select it or anything. But is that what it may is that was for? - -30 -00:13:26,699 --> 00:13:49,110 -Scott Tolinski: Yeah, totally. Yeah, I mean, there's all sorts of not only is there you know, events for on, hover on drag, whatever. But there's also we like hooks that like things that are fired once this has ended once it started. While it's currently doing this, this is going to run on pan on pan start on pan. And there's so many different events here that you can really tap into the whole process. - -31 -00:13:49,230 --> 00:13:56,160 -Wes Bos: Ah, on drag. Yeah. So it's like any other man, this is like jQuery UI for react. This - -32 -00:13:56,160 --> 00:15:48,270 -Scott Tolinski: is great. The API is just about as fantastic as it gets here. There are some downsides to this, this library, which I'll go over at the very end. But at the end of the day, I feel like this API is the sweet spot for me in terms of like, let me handle this stuff I want to handle but like, Don't make me write a whole bunch of extra stuff I don't care about. Yeah, it also gives you like really good control over all of the properties that like some people might look good. Some libraries like these and be like, okay, but I have very specific animation tastes. You say, Okay, well, you can change the evening, you can change the durations, you can change the type of animation, whether it's physics based or anything like that. It gives you the ability to do all of that. There's actually it's funny because you mentioned accessibility, there's a whole section on accessibility in their docs. There's like a whole section on that. So Oh, yeah, they have thought about accessibility here. It's fantastic. There's also the the idea of variance. So variance as we talked about, with pop motion pose. What it is, this is sort of like state machines where you have various states of your application. Now you can have as many of these as you want, you have various states. So let's say this thing is open or closed, right? You could have those two states, and maybe on open, you want five different things to animate. And typically in the past that would involve changing one state and then doing like a state toggle on all five of those different things. But this allows you to pass that variance object into all of your different motion components, right? Yeah, let's say a five different things, just pass in the variants to all of those different motion components. And then on the parent, you just tell the parent which variant is currently active right now. And they all just go off and do their own thing and make it happen. The variant stuff is super powerful for orchestrating a lot of designs at once, something I've been really into. - -33 -00:15:48,450 --> 00:15:53,340 -Wes Bos: Cool. Um, so this is this is just react only this framer motion. - -34 -00:15:53,640 --> 00:16:22,020 -Scott Tolinski: Yeah, and then it does do it does the animations outside of the React context. So honestly, I don't remember if pop motion posted that but that was one of the things that I really loved about react spring is that it took the animation basically out of react to them. So that react wasn't worrying about the animation on trying to control it, to make it as performant as possible. And then frame or motion as either already did that before or followed suit here. I honestly don't remember. - -35 -00:16:22,740 --> 00:16:36,660 -Wes Bos: Yeah, cuz there was a pop motion pose for view. Yep. I remember it being like, just like a low love library. And then there's adapters. But it seems like this framer motion is now only for react at the moment. Maybe they'll come out with a view in the future, though. - -36 -00:16:36,900 --> 00:17:14,400 -Scott Tolinski: Yeah. My understanding was that pose that was the library. Yeah, yeah, I think pop motion pose was the library. And it was like straight up just JavaScript. Yeah. And the creator of it. This is like, well, the API can be a lot nicer if I make this a little bit more, because there was like the pop motion pose library for react and the one for view. And then there was the other one, like the the parent one. And I think this is just like, well, how nice can the API be if everything is done straight up in react, right, you'll have a lot more control over how cool the API can be. It also works with CSS variables and SVG path, just - -37 -00:17:14,400 --> 00:17:21,960 -Wes Bos: looking at that element on all these things and expecting it to be embedded flash or something like that. And it's all CSS variables. - -38 -00:17:22,310 --> 00:18:49,100 -Scott Tolinski: It's all yeah, it's all there. There's so much cool stuff in here, the docs do a pretty good job, I have some trouble finding some things occasionally when I'm looking for them. But for the most part, that there's a lot of good examples in the docs. I do like in this like orchestration bit, when you setting up your variance and your animations, one of the cool things is you can so you can have one, one transition happened. And then you can say, all right, this transition transition should happen before the children. And then you stagger the children by point three seconds. And then this next one will happen after the children is ran, it's like, you can get really into the nitty gritty of it. And you can do some really dynamic stuff where these same variants lead these poses, they can actually be a function rather than a just a straight up object. And that function can get properties. So one of the cool examples they have for this in their example thing. Imagine in your mind's eye, a grid of 100 squares, right? Just 100 by 100. grid. Yeah, you want it to animate, starting at the middle, right square, and then in the circle out from that middle, right square. This can happen that way based on some funky math that you're doing, but you have the freedom. So one of the things that I really like about this is it's straight up focused on simplicity first, and then you can get into the crazier stuff if you want to, but it's not putting the crazy stuff front and center. It just makes everything really easy. - -39 -00:18:49,259 --> 00:18:55,070 -Wes Bos: Interesting. And what and what is framer? x again, remind us how does that in relation to this? - -40 -00:18:55,259 --> 00:18:58,610 -Scott Tolinski: Yeah, so framer x is a UI design - -41 -00:18:58,740 --> 00:19:03,690 -Wes Bos: application. Yeah, that outputs react or is built with react. - -42 -00:19:03,780 --> 00:20:32,400 -Scott Tolinski: It's built with react. And you I honestly, I have to look into it a little bit more when it launched. You could have a react components that you could import export. But they had to be react components from the start. It wasn't like you could draw a div and say, Hey, export this div as react. Yeah, that could have changed by now, but I'm not sure. I know that there animations within library or within the application, framer x are actually all done with framer motion. So the framer motion is powerful enough to power a legit desktop application like that prototyping tool. So there's so much we haven't gotten to on this. It's, it's one of those things you're going to want to check out just to get a handle on. Even if you are already like I'm good with react spring, it does the hook thing. I think that framer motion is an also an excellent tool to have in your tool belt. I'm a big fan of both of these libraries. Still, I don't want to say like, Oh, this is the promised land, or this is the promised land because I think framer, emotion is probably easier. At the end of the day, I think it's probably easier to do some stuff. I think react spring also has its strengths. It has a lot of really nice low level tools. It also is much smaller in terms of K B's, you know, this, this has got those KB toys, but it's not the full amount of K B's. Let's see, let me pull this up here. Who remembers k? Do - -43 -00:20:32,400 --> 00:20:36,750 -Wes Bos: you guys have KB toys? While I'm looking this up? KB toys? What is that? - -44 -00:20:37,140 --> 00:20:44,790 -Scott Tolinski: A was a toy store. It was primarily found in like, outlet malls? Or Oh, no, I've - -45 -00:20:44,790 --> 00:20:48,990 -Wes Bos: been to one of these in the States, though. I know what I know you're talking about. - -46 -00:20:49,340 --> 00:22:18,750 -Scott Tolinski: So yeah, shout out to KB toys. So okay, so the KB is on this thing. It's at 80 kilobytes, pre g zipped 26 kilobytes g zipped, where I found react spring to be about half of that. So I think it was about like 12 or so cavies. wreck spring g zip. So your you know, this library is twice as large just react spring. And it really shows in the API, it really does a lot more for you. But that said, you are paying for that ease of use by having a larger library. And I think to me, honestly, I think it's worth it. I actually went in while I was doing my research for this latest level of tutorials course, I rewrote all of the library or all of the animations on level up tutorials to be in framer motion. I love having to learn it as a playground, right? Yeah. So I just took all the animations. I was like, Okay, so this is going to teach me everything I know how to do in react spring, but to do it in front of emotion, just to learn it right? but not necessarily because I'm advocating for one or the other. It was more or less here. Let's let's go ahead and try this thing out. And at the end of the day, I really liked using it. I really liked diving into it. And I honestly think most of my code is probably better looking right now because of it. So yeah, for promotion, check it out this. This particular episode isn't sponsored in any sort of way. I know framer framer, did they reach out to us to sponsor at some point? I'm not sure. - -47 -00:22:18,780 --> 00:22:24,360 -Wes Bos: Ah, it sounds familiar. I mean, yeah, we'll take their money if they want. Yeah, yes. Right. - -48 -00:22:24,420 --> 00:22:29,700 -Scott Tolinski: This is not sponsored. But if you want a frame or you feel like since throwing up some cash or something, you know, yeah, kit. Yeah. - -49 -00:22:29,730 --> 00:22:32,310 -Wes Bos: Gets got a hat or something like that. Yeah. - -50 -00:22:32,610 --> 00:23:03,570 -Scott Tolinski: Yeah. Toss it. toss me a couple of things. But yeah, I know that. That's it. That's all really all I have. I really think the proof is in the pudding. For this one. As well said the proof is in the pudding. proof is in the pudding. If you have tried that pudding could be delicious. So check it out. framer.com. The API is at Ford slash API, forward slash motion, forward slash examples to see some cool little examples. And again, level up tutorials is going to be having a course on it this month to get a little bit silly at the end there. Sorry. - -51 -00:23:03,630 --> 00:23:06,240 -Wes Bos: Yeah. Yeah, get a salary as you want. - -52 -00:23:06,330 --> 00:23:06,930 -Unknown: Oh, I - -53 -00:23:06,930 --> 00:23:08,850 -Scott Tolinski: did to feel bad about it. I've been feeling - -54 -00:23:09,330 --> 00:23:13,470 -Wes Bos: bad Scott. This is our podcast we do. We want you to get as silly as you want. - -55 -00:23:14,670 --> 00:23:15,540 -Scott Tolinski: Silly season. - -56 -00:23:15,540 --> 00:23:24,060 -Wes Bos: All right. Thanks for tuning in. Thanks to Scott for schooling us on framer, and we'll catch you on Wednesday. Base. - -57 -00:23:25,950 --> 00:23:35,730 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax224.srt b/transcripts/Syntax224.srt deleted file mode 100644 index 9eb7b6892..000000000 --- a/transcripts/Syntax224.srt +++ /dev/null @@ -1,500 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,790 -Unknown: You're listening to syntax, - -2 -00:00:02,790 --> 00:00:05,760 -the podcast with the tastiest web development treats out there, - -3 -00:00:05,760 --> 00:00:10,560 -strap yourself in and get ready to live ski and Wes Bos. - -4 -00:00:10,619 --> 00:00:12,360 -Wes Bos: It's supper time, - -5 -00:00:12,659 --> 00:00:13,980 -Unknown: open up wide. - -6 -00:00:15,960 --> 00:00:31,050 -Wes Bos: We got some entrees for you today. Although we're gonna break them down into smaller pieces so much. As they say the the tasty treats we're breaking down. I'll set you up for that one. - -7 -00:00:31,230 --> 00:00:35,700 -Scott Tolinski: And here we could keep going like that. I think this is funny. This is funny. Let's play. - -8 -00:00:37,470 --> 00:01:20,190 -Wes Bos: Today we are talking about serverless and Cloud Functions, what are they? What are the providers, the different frameworks that you can use? We use with them ups and downs. Why? Why would you want to use serverless? Is there still a server? If it's serverless? We'll get that joke out of the way. Immediately. There still is a server somewhere no one knows where. But at some point, there's still a server running. So that's kind of what we're going to talk about today. Today we're sponsored by dot tech domains, which is in the name there dot tech domain names, and Freshbooks which is cloud accounting. We'll talk about them both way partway through the episode. How are you doing today Scott to Lynskey - -9 -00:01:20,310 --> 00:02:00,150 -Scott Tolinski: doing good if it sounds like I'm loopy it's because I am a little loopy. Yeah, no. Doing good man. Carney was in in Michigan did a little friends thing so Linden and I had a boy's weekend for the first time ever is the first time that it was just landed and I hanging out at the house together for a few days. You know, just we made a giant snow pyramid that's going to be there forever and ever because it's a tall snow pyramid. And yeah, we got a ton of snow was a lot of fun, you know, so it was kind of an exhausting weekend. But it was a fun exhausting weekend. Definitely one of those those good ones, you know, - -10 -00:02:00,900 --> 00:02:44,520 -Wes Bos: that's good. Yeah, we we've been starting to get some serious snow now. And although it keeps mountain it's really frustrating. But every time it comes out, we try to build a snowman or a pyramid or whatever. Or the thing that we do here in Canada is we go to like the end of the street where they plow all the snow into this like, like 15 foot, tall snowbank, and then you make these like terrifyingly scary tunnels might collapse on you at any point. I remember as a kid, we would like make these tunnels through these snow banks and teachers would be like fine with it. And I'm thinking now like, that's like 10 feet of snow collapse. But that's all part of growing up in a snowy country. Yeah, - -11 -00:02:44,729 --> 00:02:53,819 -Scott Tolinski: we were gonna build a snowman but like the snow isn't sticking enough. So we're just like, Alright, you know, this was piling into a mound and then we, you know, make it into a nice little pyramid. So that was fun. - -12 -00:02:53,910 --> 00:03:15,600 -Wes Bos: Yeah, we we went to bogging and what the kids are getting now is like, oh, man, the kids are getting our these like a foam toboggans that have a sheet of plastic on the bottom. It's almost like a crazy carpet that you can actually hold on to because you know, crazy carpet. For our listeners that live in warm climates that crazy carpet is I don't know anything about cold. - -13 -00:03:15,600 --> 00:03:20,880 -Scott Tolinski: I've never thought a crazy carpet is not outside the context of like Aladdin or something I've never heard - -14 -00:03:21,449 --> 00:03:52,289 -Wes Bos: Google's crazy carpet right now. It basically a piece of like plastic that's rolled up with two little holes in it that you hold on for dear life. And those things frickin rocket down the hill. But it's really hard to like, get on. So the kids now have like that. But on the top they have this like almost like a like a surfboard, like a really foamy surfboard? Or like the keyboard or something. Yeah. And they go fast. Man, I was so so impressed. I was ripping down the hills as my kids. - -15 -00:03:52,590 --> 00:03:53,789 -Unknown: Boogie Boogie Boogie. - -16 -00:03:55,470 --> 00:04:06,360 -Wes Bos: Alright, well, let's get into it. Um, we're going to be talking about serverless and Cloud Functions, like I said, so why don't we dive right on into it? You want to take a gander? What is serverless? Scott? - -17 -00:04:06,449 --> 00:04:16,699 -Scott Tolinski: Yeah, serverless is, is just someone else's server? Or isn't that the whole joke? Or is that the cloud? That's the cloud. The cloud is just someone else's server. I don't know. The point. - -18 -00:04:16,740 --> 00:04:21,320 -Wes Bos: Yeah, and race are much the same thing. Yeah, cloud and serverless are tightly bound. - -19 -00:04:21,380 --> 00:05:18,990 -Scott Tolinski: Yeah. So basically, the idea behind serverless is that you're really not focusing on managing your own server instance, essentially, for your application. And what you're doing is doing everything based on whatever the route or the URL that needs to access this data, whether that's a specific API route, that you're hitting to go do some sort of function. Maybe it's your web hook, maybe that's your API, maybe that does any of your given things, each of these access and individual function that will run and do all of its stuff and output based on whatever you need it to do. So it is a server side instances in the code you're writing. is a server side language node, whatever. But it's only like one specific. You could think of it as a specific endpoint that you're managing to do one specific thing. Yeah, rather than having a whole server that's doing a whole bunch of different things, and you're having to manage the entire server itself. - -20 -00:05:19,440 --> 00:08:14,460 -Wes Bos: Yeah, so I like to think of it as sort of like URL driven or functional, function based programming, because functioning right, yeah, just like sort of just a prep myself for this episode. And also, just because I've been super curious about it, I tried to convert the syntax website, which has a very small server component, there's three functions, there's one that will convert all the episodes from markdown into HTML, there's one or the two endpoints that will get all of the shows. And then there's another endpoint that will get a specific show. And then there's another endpoint, which I forget who was somebody listens to podcasts, wrote a endpoint that took all the sick pics out of the, the show notes and put them into their own page, and the regex for getting the sick pics out of there Where's like, anywhere, it says IQ IQ in an h2. Grab that, and it works great. So those, there's just like three or four little endpoints there, those are three. And for each of those, you need to create your own sort of URL, and they each are their own, sort of, you can even think of as its own server, they're not, they're not really able to talk to each other unless you, we'll talk about sharing code and in just a second, and that's different than a Digital Ocean droplet or, or a Heroku instance, or linode. And so anywhere you go and buy like an actual server, and you upload an application to it, that's different, because how that works is that you, you buy some server space, and then you run your application on it. And if your application gets really big, or if you have a lot of traffic or any number of other reasons that your server is not enough, you have to upgrade the entire server. And that server will always be running, no matter what goes on. Actually, that's not true with Heroku. Yeah, and the idea with these serverless functions is that they, they're not running at all until somebody initially hits that URL. And then it has to do what's called a cold start, it has to sort of boot up and then start responding to the people. And then once there's not any more requests to that function, it will spin down. Meaning that said, Oh, like, nobody needs me. And that's why sometimes when you go to this is the same thing with Heroku, as well, although Heroku is not server less, when sometimes when you go to Heroku, for the first time, it takes like an extra 300 milliseconds or so that's because it needs to actually boot up the application similar to if you were to run like node index j s, that process needs to happen. Because you're not with serverless, you're not paying to have the server running 24. Seven, you're paying to have it running for the 300 milliseconds or seven seconds or three minutes that you need it to run, and then you spin it down. And the benefit of that is that maybe we can get into some of the benefits. Now Scott is that - -21 -00:08:14,490 --> 00:09:21,529 -Scott Tolinski: Yeah, I was gonna say you're, you're like, unknowingly diving into some of these benefits. You've already covered is several of them here. So So I mean, what are the benefits, like you meant? Yeah. Because they're just, you know, one function or one thing happening on each of these server functions, you're not worrying about scaling up the entire server component of your application, like with my server, right now, it's hosted on Meteor galaxy, which is just like a Heroku esque type of thing where you have containers, right. But if I need to scale up my entire server side, whether it's the web hooks, the API or whatever, I'm scaling up the whole thing, I'm sailing up the entire server where with serverless, you can really benefit from modifying essentially, the app parts of your application, there may be the most hungry for that, and not have to pay for that extra extra strength or extra energy that you need from all of your application. Two parts of it are a little bit lazier than other parts. Basically, it can be cheaper, because you're not necessarily worrying about scaling up the whole thing. You're worrying about scaling up individual functions. - -22 -00:09:21,750 --> 00:10:52,039 -Wes Bos: You know, when it initially clicked for me what server lists was, is I was listening to the code pen Radio Podcast. And they had, I think it was Chris coiour, and some of the devs Behind Code pen explaining how they use serverless functions, or Cloud Functions, or lambdas. They all have different names, to do all of their pre processing. So you think like you've got sass, you've got Les, you've got Babel, you've got like all of these different things on code pen that need to be converted into JavaScript, HTML, or CSS. And they don't run like a sass server and and whatever server or whatever Because maybe for whatever reason, like autoprefixer, would would just spike. And so what they do is that they, they just have lambdas for all of these different kind of processors. And then they hit those lambdas with the code that needs to be converted, and then that lambda wakes up and does this work and then sends the result back and then shuts itself down. And the beauty of that is that that's very cheap to do versus just keeping a server hot and running. And because you're only taking a split second, and then that after that shuts down, maybe somebody from Airbnb will use that the next piece of that server, and then you're basically just sharing server compute power with the people around the world, because you only need to dip in for a quick second to do that. So I thought that was a an awesome. Ah, that's, I get it like that, I see why that would be helpful. - -23 -00:10:52,169 --> 00:12:06,929 -Scott Tolinski: Yeah, I think part of it that opened it up for me, too, was thinking about like some of the security benefits of it. Right? If you manage a virtual private server, and that server, it has basically the keys to your entire application, if that thing gets hacked for any specific way, whatever that account goes by, you could be in big trouble. Or that server is having an issue, your application could be in big trouble, where if you think about a one specific serverless function, going down or getting hacked isn't necessarily going to have the same exact, it's like containerizing things not to use the word container like a Docker container or something, but it's keeping it sort of separate, this is separate, this is separate, this is separate. Maybe this function is running on a different service than this function for whatever reason, or whatever, you don't have to worry about keeping a server potentially up and running, that you're not maintaining the security aspects of, I know a lot of us, we've gotten into things like doing digitalocean droplets. And we're not system admins, right. I myself, you know, there's probably a digitalocean droplet that I have that's maybe not up and running on the latest everything and all the security patches and whatever. But this now, we don't have to, you wouldn't have to worry about those kind of aspects from this because you're not managing the server and that sort of way. - -24 -00:12:07,200 --> 00:12:44,909 -Wes Bos: One other benefit I have here is faster deploys. So just trying it out myself. The really cool thing is that if you only change one of your functions, you only redeploy that one function, you don't need to redeploy your entire application, and do the whole build process and things like that. So sometimes that'll cut down your whole deploy process from like, like I was doing it on, we'll talk about providers, but I was doing it on one of them. And by the time I get pushed and went over to the one over the dashboard and refresh. It was like 12 seconds I was counting in the updated app was running. Yeah, that's pretty impressed by that. Yeah. - -25 -00:12:45,390 --> 00:12:52,320 -Scott Tolinski: Yeah, this little time that you just been sitting in waiting for stuff like that, or, um, it's expensive. It's expensive for a lot of reasons. - -26 -00:12:52,559 --> 00:13:39,390 -Wes Bos: Yeah. Like my deploying my entire note app is like less than 45 seconds. Like, it's quick for me. But a lot of people have like, even like the syntax website, which is not on on serverless. It's just a next jass. But the whole deployment is like six minutes or so. I was talking to Guillermo from Zeit, and he's like literally everything about v2 of their their platform is way better, including speed. So redeploying that to v2, which is or trying to get on would be so much faster than a current, like nine minutes that it takes to deploy, which, like, Are you talking about dying minutes is pretty good. If you talk to some people who have like app release days, you know, and there's like, 100 different steps. - -27 -00:13:40,049 --> 00:14:24,149 -Scott Tolinski: Yeah, totally. I mean, it can be expensive. And so another thing is, also empowers front end developers to do a lot more, you don't have to worry so much about being a system admin to, you know, do those kinds of things. And I guess that that is a like a big skill in general is that running a server is hard running your own server is hard. And that's why we do have services like Heroku, and other things like Meteor galaxy that do a lot of that stuff for you, right? But this gives you even one step further, is that front end devs as long as you can write some node code, no, you can write a function that does some stuff on the server. And now you don't have to worry about having that specific subset of knowledge of managing a server and getting all those routes in correctly. You're just worrying about an endpoint Really? - -28 -00:14:24,600 --> 00:15:47,940 -Wes Bos: Mm hmm. I thought that I just I just did like a tweet about this the other day, and I said, like, just tweet me back with your words of wisdom. Because like, I think one of the biggest resources I have in the world is Twitter followers, who are much smarter than I yeah. So I thought that this reply from Max steenbergen was awesome. He says, I don't care much about what tools people use other than professional interest, but to me serverless and the jam stack in general has been a gateway into actually building apps myself, back in always has been too much of a hurdle for me and now that hurdle is lower it isn't just lower, it's gone. I thought that was really interesting. So this fits in well to the jam stack. Because if you do need a little bit of like server side functionality with your react app or your, your view app or something like that, you don't have to, okay figure out an entire server, you literally can just write one quick function that will take in data, and then return to you the result of that or take in data, do something like send an email or something like that, right? Like there's, you literally can just code these really super small functions that do one thing. And then you've got that, and then you don't have to, like maybe you could literally change languages for the next piece of functionality of your website. And that wouldn't matter for that piece of code that you wrote last week. - -29 -00:15:48,179 --> 00:15:50,490 -Scott Tolinski: Yeah. Isn't that fantastic? That's pretty amazing. - -30 -00:15:50,789 --> 00:16:07,470 -Wes Bos: Yeah, it's pretty cool. Like I been like, like following it and playing with it for a couple years. Now. I haven't built any, like serious, big application on it. But one of our predictions for this year was that serverless is going to get easier. And by just like, kind of looking in and trying a bunch of this. I definitely think that is true. - -31 -00:16:07,590 --> 00:16:35,909 -Scott Tolinski: Yeah, I think it's already true. There's I did a Scott tries video on YouTube. Gone, Scott tries begin, which is a service that we're going to talk a little bit about later in this episode. Yeah. Not as like a sponsor or something. But as a just one of the serverless things. And I think that like between that and the current iteration of next jsapi routes, I think this stuff is getting way, way, way easier already. We're in February. So you know, it's a good start for one of our predictions. Yeah, - -32 -00:16:35,909 --> 00:16:58,230 -Wes Bos: I think that video is what got me onto it. Because we were talking about beginning and insights now on the podcast, and then you're like, I never tried begin, and then you did a video about it. And then I was like, Oh, this is cool. I watched it. And then I tried it myself. I was like, Oh, this is awesome. And hopefully a bunch of people listen to podcasts, but not now. We'll try it if you haven't already. Yeah, that's good job, Scott. Hey, - -33 -00:16:59,220 --> 00:17:04,069 -Scott Tolinski: YouTube content lately. So it's part of my part of my new my new YouTube thing. But - -34 -00:17:04,069 --> 00:17:33,450 -Wes Bos: yeah, let's talk about what can you host on serverless. So you can host like a static file. So you can host your react application on serverless. We'll talk about some limitations in just a second, you can host obviously, single functions. They can be in almost every language, the most popular by far is running them in JavaScript, but you can use Python go I think there's even PHP cert, it doesn't Taylor otwell have some sort of PHP serverless function? - -35 -00:17:33,780 --> 00:17:39,720 -Scott Tolinski: I don't know if you know, the, I haven't really spent a whole lot of time thinking about PHP. I don't know - -36 -00:17:39,720 --> 00:17:50,700 -Wes Bos: I do every day. Yes, you can run PHP on lambda, we'll talk about the services in just a second as well. So yeah, you can do it that you can run it in Rhino didn't know how to say that yet. - -37 -00:17:50,840 --> 00:17:52,500 -Scott Tolinski: Dino Dino, - -38 -00:17:52,580 --> 00:17:55,920 -Wes Bos: did we decide on what the thing is? Are we forever gonna - -39 -00:17:55,950 --> 00:18:00,510 -Scott Tolinski: know there? Were people arguing about it on Twitter? So yeah, I don't know. - -40 -00:18:01,310 --> 00:18:02,430 -Wes Bos: You didn't know. Okay, - -41 -00:18:02,460 --> 00:18:06,300 -Scott Tolinski: I don't know. Yeah, I can make that joke a fourth time. That would be good. - -42 -00:18:06,660 --> 00:19:15,690 -Wes Bos: What isn't serverless for, you can't really host an entire app in one serverless function. So you can sneak an entire Express app into a serverless function, if you want it to. And that's referred to as overloading the function. And the downside to putting an entire app inside of a function is that you get slower cold starts, meaning that if you were to start an app like node, node server, j s, and that's your entire app like mine starts in 200 300 milliseconds. And that's slow for an API request, imagine adding 300 milliseconds to a request just to start the server not to connect to a database, do the actual work and send the response. So the whole idea behind serverless is that you don't put it all into one function, you, you break it up into multiple functions. And then there's there's a 500 meg limit on most applications, which is funny, because now we have to start worrying about how big our server side dependencies are. And you can hit that pretty quickly with your node modules folder, because most of them will include everything in the node modules folder, including the readme and whatnot. - -43 -00:19:15,900 --> 00:19:43,680 -Scott Tolinski: So I'm curious on on your understanding of this, because this suggested way of having like a graph qL API with, like, specifically, next JS server side routes, right? And now they're their serverless routes, is to basically put your endpoint as one API route. That's pretty hefty amount for you know, your entire API would be basically a large part of your application running. Do you have any thoughts on that specifically? - -44 -00:19:43,820 --> 00:20:41,130 -Wes Bos: Yeah, I think as long as it's under 500. Meg's, which is a lot like Yeah, I was just the syntax website is all dependencies included. The syntax website, I think is just over 200 Meg's and then you can also do things like, like tree shake. Your your application to remove unused functions and whatnot. It doesn't seem to be included in some of these bundlers. But a few people have said they've done that. And it seems to be Yeah, that's a totally fine option. Because also like, is it? Is it that big of a deal that one request every I think it's 15 minutes or half an hour that your lambda will run? And then at a certain point, it has to shut itself down? And you have to start up another one. And that's the cold start. So like, Is it that big of a deal that one request every 30 minutes has an extra 200 milliseconds? 100 milliseconds added to it? Maybe, but probably not for the things I'm working on? Yeah. And what do you think about that? - -45 -00:20:41,190 --> 00:21:04,470 -Scott Tolinski: I don't know. I'm just I never, we never got our like, well, we did our whole conversion to next js and the server server routes, and we have that all going, but it never went to production. So I didn't get to see it in a real world situation, besides just using it myself. And as an individual using it, it was fine. But I just don't know how, you know how other people feel about that. So - -46 -00:21:04,980 --> 00:21:24,350 -Wes Bos: we should I should also mention that the reason why people love these is yes, because you can scale them, but also because it's dirt cheap, that you could run a simple little website for pennies. every single month, we Scott and I are going to do like a show on how to server pricing work. Like what's a dyno? Why? - -47 -00:21:24,420 --> 00:21:27,240 -Scott Tolinski: Why do you pay like, a dino? A dyno? You - -48 -00:21:27,240 --> 00:21:45,860 -Wes Bos: know, a dyno? No. You know, Roku has? Yeah, yeah. Whenever you're like trying to estimate costs. It's asking you like hours and things like that. You're like, ah, most of them 24. Right. So we'll do a separate show on that. Because here we go, Scott, I'm gonna set you up. This is a big show. - -49 -00:21:46,050 --> 00:22:24,810 -Scott Tolinski: Yeah, it's such a big show. We should break it into smaller functions of shows. See, I had that drugs already. And then you trusted us. I trusted you a joke. I see a good joke. I'll take it and trusted you with that joke one time. This is a funny story. One time we were working on a project. And the project did not complete on time. And the project manager says to one of our developers, I trusted you. And so that was always a huge joke. We always I trust. Yeah. So whatever. Whatever anything happens between Courtney and I, we always said I trust their CEO. - -50 -00:22:26,280 --> 00:22:28,920 -Wes Bos: That's great. Oh, Dev stories. - -51 -00:22:29,460 --> 00:22:36,630 -Scott Tolinski: If you want to have dev stories of your own, and host them on a website somewhere called dev stories dot tech, your run and check out that tech domains. - -52 -00:22:37,080 --> 00:23:37,950 -Wes Bos: So dot tech, I know a lot of you went out and bought your dot tech domains after they sponsored the first episode. dot tech is the domain name for techies, developers, tech enthusiasts, whatever it is that you are tech heads. That's I think that's what it should be. I obviously went ahead and used a dot tech for my uses dot tech website, we did a whole podcast on that. It's short, it's relevant, it perfectly encapsulates what you want to do big brands like CES, Viacom, and Intel have all used dot tech, we've got a wicked deal for you. If you want to go ahead and grab your own dot tech domain name there is 90% off a one, a five and a 10 year dot tech domain, go to go dot tech forward slash syntax 2020 and use the coupon code syntax 2020. And you are going to get 90% off one five and 10 year domain names. Thanks so much to dot tech for sponsoring. - -53 -00:23:38,310 --> 00:24:05,190 -Scott Tolinski: Thank you. So then to these raw providers now these Brava riders are basically anywhere that you can write your own lambda functions. And these aren't necessarily the hand holding services. These are sort of the real deal. Holyfield services, these are the ones that really get into maybe a little bit more a little bit more tech, heady territory in terms of the the type of skill level needed to interact with these I think, - -54 -00:24:05,280 --> 00:24:07,110 -Wes Bos: yeah, they're too hard for most people. - -55 -00:24:07,470 --> 00:24:14,340 -Scott Tolinski: Yeah. Especially people who don't have experiences with the surfaces or server side experience to a large degree. Yeah, - -56 -00:24:14,550 --> 00:25:10,380 -Wes Bos: yeah, that's part of the benefit of having a sysadmin is that they're able to understand what Amazon so the big one, we should say the big one is Amazon lambda. And they provide they've got tons and tons of servers. And if you want to just have a little sip of computing power from Amazon, you can queue up a lambda or not even queued up, you just write a lambda and it they'll give you a URL. You can ping that your own do your work in whatever language you want. Likely no j S is for those of you listening to this podcast, and it'll spit it back. So there's that one. There's one of the ones Google Cloud Azure, Microsoft Azure has them. Yeah, Red Hat. IBM Cloud Functions SAP apparently has an offering like this is You can tell this is real deal when when the corporate boys come into the room and and start doing that CloudFlare workers ever you heard of this before? Scott, - -57 -00:25:10,439 --> 00:25:17,280 -Scott Tolinski: you see this? I have not. I think you told me about CloudFlare workers in the past - -58 -00:25:17,399 --> 00:26:25,800 -Wes Bos: somebody I, I was like, Hey, where should I host my upcoming advanced react course is that it's just that's just a regular node app. And I need to host it somewhere that will run a regular node app. And I'll probably run into the limitations that we talked about earlier. So I can't put on service and they're like, put it on cloud for workers. And I was like, isn't that like, serverless? And their reply was, yeah, but you, I forget what the reply was. But anyways, it's not bad. It was something like you probably can, it's probably some of like, the overloading thing. But I did a little more digging into what CloudFlare workers are. And they're kind of like service workers. So the idea is that you can write JavaScript that will intercept an HTTP request, kind of like a what's the appropriate way to say man in the middle? It was better in the middle? No, no, it's been changed. It's a monster in the middle attack. But but it's obviously not a monster in the middle attack, because you're doing yourself but because CloudFlare is at the DNS level, you can intercept HTTP requests, much like a ServiceWorker in JavaScript, and then do things like serve up a cache or do some trance polarization, transpile ization, - -59 -00:26:26,009 --> 00:26:31,320 -Unknown: whatever that word is. transpilation, transpile, trance transpile. ization - -60 -00:26:31,320 --> 00:27:19,290 -Wes Bos: transplant spallation transpilation. You can do transpilation. Yeah. And I think I think it has all of the same features you'd expect from ServiceWorker. But you also can do it at a DNS level? No, I think that's really cool. Because like, right now I have an issue with my short domain name, West io cloudapp, like, upgraded me, and some of the features that I relied on don't work anymore. And like I can't, I was like, oh, but like, if I could like write some code that's in between my domain name and their servers that my domain name is pointing to. And I think that's what this is for, where you could just like jump in the middle and write a little bit of JavaScript, and then either either send the request forward, or send the request back yourself. - -61 -00:27:19,649 --> 00:27:21,180 -Unknown: Hmm, that's interesting. - -62 -00:27:21,359 --> 00:27:27,600 -Wes Bos: Yeah, definitely. I'm not sure if I totally understand that. Right. But from my research, that's what that's what it is. - -63 -00:27:27,629 --> 00:28:27,270 -Scott Tolinski: It's a whole new world. And yeah, no, any of us. Yeah, this is very exciting to me. And there's also Okay, so we have these, these harder, more difficult providers that, you know, they're very your your, this is going to be your cheapest option. If you're looking at like, let me save the most amount of money possible, this is going to definitely be the cheapest option, because again, you're going right to the source and a lot of these other services that we're going to talk about use these services under the hood, and many of which probably use AWS lambda primarily. So these are the easier providers. And there's a lot of different easier providers, I think maybe the first people that I saw do really easy serverless functions was probably Netlify. I think there were others that came before they were doing with the whole serverless thing. But in terms of who can make it the easiest, I think Netlify came in and was like, you know what we know you want to do server side stuff on our platform. So here, we're gonna make it pretty easy to set up some functions for you. - -64 -00:28:27,719 --> 00:29:48,720 -Wes Bos: Yeah, so the way that it works with a lot of these, we've looped these into providers and frameworks together, because some of them are so tightly bound that the provider is the framework, and some of them are somewhat different. So like Netlify is awesome, because you you just create a folder. And this is the way it works with almost all of these, you create a folder for your function, and then usually a stick like an index j s in there, and you define whether that's going to be a get or a post, or what are all the other different HTTP verb requests. And then each of those functions will generally have a its own package. json. And then you have to have this is like one kind of like a bit of a bummer thing to me, is that you have to have your own dependencies for each function. Yeah, and share code. Talk about that. Yeah, but like, like, let's say you wanted like lodash for like three of your different functions, you have to install lodash three different times for each of those. Unless you want it to share the I'll talk about it now you can share code between lambdas it's just that that code is then bundled every single time for for each of them. So the one I tried out was begin because cutted the Scott did the video on it and I was like, Oh, this is extra pretty sweet. I had met them at a conference it just never had checked it out. - -65 -00:29:48,989 --> 00:30:15,510 -Scott Tolinski: Yeah, cuz you told me about begin because I heard from you. And then I added to my list, and it just so happened that that so I'm just doing this Scott tries video where I try different web services, right? And it just so happened to be Number two on my list for no reason in particular, it wasn't because I was the most excited to try it. I just hadn't. I didn't know anything about it. And I'm really glad it was number two on my list because I'm like really into it I'm very interested in the index is begin calm, by the way. Yeah, - -66 -00:30:15,719 --> 00:31:26,400 -Wes Bos: the whole idea behind begin is that they have this like open source framework called architect. And so you do have to code your serverless functions in a in like a format that architect understands. So the way it is that you have a folder called HTTP, and then you have get dash index, and that's for your GET request to the index and get dash Scott would be any requests that go to forward slash Scott, on the domain name and post dash Wes. And then you can have like, variables like, like blog posts forward slash zero or two, like that's one thing I was doing with this syntax API is that I wanted to be able to do for slash API forward slash shows forward slash 004. And that would give you show number four, which is kind of cool. So begin is the paid hosting provider, an architect is the the open source framework behind begin, and I don't think you have to know that it's architect because you can just use all the begin docks and whatnot. But the thing about that is, if you ever wanted to go and host it yourself, and not pay begin, but you wanted to do the fear of the waters of AWS yourself, then you you could do that. - -67 -00:31:26,489 --> 00:31:47,580 -Scott Tolinski: Yeah, which is, you know, I really love what AWS does for us, but I've never really loved working in it. There's so many different options and different things, you know, to hit. There's so many different wells of knowledge, and I found the documentations kind of all over the place. So if I can use one of these things, instead, I'm gonna always pick it really, - -68 -00:31:47,940 --> 00:32:19,020 -Wes Bos: I see like Google Cloud and Azure and AWS lambda, I see these guys as just a utility. It's it's power coming in from the wall. And and if you want, if you know how that works, you can certainly wire up your own lamp. But most of us are, you can wire up your own circuits, most of us are going to go and buy something that you can just plug into the wall and not have to worry about that we want a one layer abstraction away from, from the stuff in we're willing to pay for an abstraction layer on top of these things. So - -69 -00:32:19,259 --> 00:32:21,000 -Scott Tolinski: I like that metaphor. I like that. - -70 -00:32:21,180 --> 00:32:55,740 -Wes Bos: Oh, thank you. Yeah, I that just came to me. It's just had a moment of clarity. The other big one in the spaces is sites now. And next. Yeah. So if you are making a next Yes, application, they have this thing called API routes, which is awesome. And you can very much the same, you can code up your serverless functions in there. And when you apply deploy to sites now, they will do the behind the scenes deploying to I think they use lambda and Google Cloud not sure. But the thing is, it doesn't matter. Because it works. Awesome. - -71 -00:32:56,010 --> 00:33:35,640 -Scott Tolinski: I think the whole point for us is that it doesn't matter. You know, if we're getting into these, well, I guess it does matter. But it doesn't, we shouldn't it shouldn't have to matter to us, because we're not here to know what the infrastructure behind this is. We're just thinking about here, this function, here's the thing, what it's going to do for us, and that's part of the whole productivity benefit of these things is that you don't have to worry about setting up here lambda routes and all those things. Um, there's a serverless framework serverless.com, they sort of got the name there. Yeah. And that will deploy to AWS with you. They were one of the first make it Yeah, yeah. I remember reading a - -72 -00:33:35,670 --> 00:33:52,380 -Wes Bos: lambda, Azure Functions, Google Cloud, and more. So that's a huge benefit to building on the serverless framework is that you can literally move your stuff anywhere. And it's an open source framework. So you can just move this thing to any other provider if you want. - -73 -00:33:52,650 --> 00:34:16,610 -Scott Tolinski: Yeah, there's also AWS amplify, which I haven't used myself, but I've been hearing the word amplify being thrown around a lot more something that Yeah, really interesting to check out. I haven't checked it out. I just went to their their docks at nice, AWS amplify github.io It looks pretty cool. might be something I'll give a try. doesn't look too difficult. doesn't look too config heavy. - -74 -00:34:17,040 --> 00:35:00,600 -Wes Bos: Yeah, that I think it's so funny that even even Amazon can't use Amazon. So they have to build their own tool. But that that's obviously a joke because it does serverless functions. But like a lot of these things begin does this as well. They also have things for databases and subscriptions and static files. We'll talk about those in just a second. So they're more it's more of like a toolkit for the different pieces of things. Like obviously, the server is just one part of building an app. You also need database and static files and VR, it looks like amplify does, which is pretty cool. Yeah. Interesting. Er, predictions, machine learning capabilities to your app. See, - -75 -00:35:00,630 --> 00:35:03,750 -Scott Tolinski: we're let's just throw some more words in here. What else? Can it Oh, is it? - -76 -00:35:04,710 --> 00:35:08,670 -Wes Bos: pub sub pub sub e AR and VR storage interactions? - -77 -00:35:08,670 --> 00:35:13,050 -Scott Tolinski: interactions? UX UI, deep dive? - -78 -00:35:13,560 --> 00:35:25,920 -Wes Bos: Deep Learning, deep learning. Pretty cool. So yeah, I just wish I it's literally my job to try stuff all day. And I wish I could. I wish it could be my job to try stuff. - -79 -00:35:26,670 --> 00:35:29,520 -Unknown: I know. Yeah. You know, yeah, I know, - -80 -00:35:29,610 --> 00:35:38,100 -Wes Bos: like, this is our job to try these things and to dip our toes. And that just in this one small facet of web development, which is serverless functions, there's - -81 -00:35:38,100 --> 00:36:14,850 -Scott Tolinski: literally like, what 20 different possible options that we could go into. Yeah, I know. And then that's this whole Scott rice thing, man, I'm just gonna try stuff. And the best part of how I keep plugging this video series that I'm doing, but the whole point, like a way for me to go in with his, like, little preconceived notions as possible, so that I look like a complete ass on camera, trying to figure out what the heck this thing does. And so I'm pretty excited to try a lot of these, I'm just going to go ahead and copy and paste this providers list into my to do list for that series. Try all this stuff, and it'll give me a good excuse to really do some deep dives here. - -82 -00:36:15,360 --> 00:36:25,560 -Wes Bos: Scott's mailbox is going to be full of stickers and T shirts in the next couple of months. Now, that's great. Um, what else do we have here? - -83 -00:36:25,590 --> 00:36:29,010 -Scott Tolinski: We have a lot here. We should do a two parter. - -84 -00:36:29,690 --> 00:36:32,580 -Wes Bos: Okay, yeah, we can. Oh, my gosh, there's tons. - -85 -00:36:33,110 --> 00:38:46,500 -Scott Tolinski: Yeah, we're definitely an indie split these up in smaller functions here. So we're gonna do a potluck next week, and then we'll be back with part two of our serverless function. So we want to give you the freshest data possible. And that's why we're going to take a break to talk about fresh books, which is one of our longtime sponsors over here. They're all longtime sponsors, they're all our favorites. Fresh books is the cloud accounting software of your dreams, I think they use of your dreams for way too many of our sponsors, but fresh books, is so good. Fresh books is really cool. Let's talk about this because nobody likes to talk about money. We're developers, and we like to talk about code. But we all know that billing stuff has to happen, you have to get paid for your work, you have to be able to send invoices, you have to be able to check in on those invoices. And QuickBooks is no good. I'm gonna straight up say it. And I don't mean to make this a flame advertisement. But I love Freshbooks simplicity, it really it's software that has was just absolutely right for the disruption of it. So Freshbooks does a great job at getting all of those cloud accounting features that you know and love, while making it just a fantastic web service. from up north in Toronto, they're Toronto based. Yes, they are. Yes, they are. So check it out@freshbooks.com. And you're going to want to see all of the easy invoicing, expensing time tracking, projects, payments, reporting, and all sorts of more, they even have excellent mobile experiences for you to be able to check all that stuff on the go. Because that's important. We're always on the go. That's what we're doing. So you know, it's the best for is scanning or seats before I crumple them and lose them in the wash. It's a necessity, it's a necessity to be able to do that, because of who keeps track of the receipts. I don't want to have a folder full of receipts. Nobody wants to do that. So you're gonna check it out@freshbooks.com forward slash a syntax and enter a syntax and the How did you hear about a selection? Let them know that you came from scitech. So that they say, hey, that's our favorite podcast around those syntax syntax guys over there. It's syntax.fm. So check it out. freshbooks.com forward slash syntax. - -86 -00:38:46,980 --> 00:38:59,900 -Wes Bos: Beautiful. What other providers do we have here? We talked about Netlify. Almost all earlier. It's crazy. One really cool. One is Apex up. Have you heard Hey, heard of this? You seen this gun? - -87 -00:39:00,420 --> 00:39:05,130 -Scott Tolinski: The name of this? We should just have a third show a week just called Have you seen this? Or we just - -88 -00:39:05,190 --> 00:39:05,760 -Wes Bos: have you seen? - -89 -00:39:06,960 --> 00:39:12,330 -Scott Tolinski: Because there's new web services? 24. Seven, I haven't No. This is from the robot himself. - -90 -00:39:12,810 --> 00:39:23,670 -Wes Bos: This is from Yeah, TJ Holloway, Chuck who is the inventor of everything he's done machine what he invented stylus Express. Can - -91 -00:39:23,790 --> 00:39:25,320 -Unknown: What else? Mom Yeah, - -92 -00:39:25,670 --> 00:40:34,380 -Wes Bos: yeah, the Express Connect stuff was early on was him pretty much every like foundational node package. He was extremely important in early days of node. And then he switched to being a go developer a couple years ago. And I was very sad. But now I'm looking at this Apex sh which is called up there's a they have a couple products but one is called up. And apparently the way that it works is that you just take your Express koa Django go Lang existing framework and run it through Through apex.sh, and it will magically make it serverless. and post it. It doesn't say anywhere on how it does it. But the sort of the idea is that people don't want to have to learn this new way. Like that's, that's one of my biggest hang ups with the serverless. sto yet, it is frustrating i like i like by existing Express workflow, it is very simple. I can share code really easily. And I just want some tool that will server lists it for me. And apparently that's what this will do. So I have yet to it's open source. - -93 -00:40:34,440 --> 00:40:52,170 -Scott Tolinski: Yeah. And I have that that same feeling. Because you do anytime anybody new comes out with, you know, here's our new serverless platform I instantly think of Okay, now I got to learn somebody else's folder structure management style or way to do it. And yeah, we don't have to think too much about that kind of stuff. - -94 -00:40:52,260 --> 00:41:15,750 -Wes Bos: Yeah, Yeah, me neither. So I'm going to take one of my existing Express apps and try run this through up. I think it's gonna be amazing. Because everything TJ does is amazing. So it's like zite, as well, anything they do is probably going to be amazing. So I'm excited for it. It's got kind of the same, like, minimalistic vibe as light as well. It's just kind of cool. - -95 -00:41:15,960 --> 00:41:20,150 -Scott Tolinski: Yeah, same fine. You can tell a lot about a project from their vibe. - -96 -00:41:21,540 --> 00:41:22,350 -Wes Bos: good vibe. - -97 -00:41:22,380 --> 00:41:25,050 -Scott Tolinski: Yeah, we shove a vibe level projects. - -98 -00:41:26,420 --> 00:41:26,960 -Wes Bos: On this, - -99 -00:41:26,960 --> 00:41:34,080 -Scott Tolinski: yeah, five vibes out of 10. Here, I'm not feeling this just kind of makes me feel a little bit sad. - -100 -00:41:34,260 --> 00:41:43,980 -Wes Bos: So one other one that somebody just tweeted at me was open, fast open Functions as a Service, which is a Kubernetes Kubernetes. - -101 -00:41:44,010 --> 00:41:44,730 -Unknown: You got that? - -102 -00:41:44,730 --> 00:41:45,390 -You got it? You - -103 -00:41:45,390 --> 00:41:46,610 -Scott Tolinski: got it? Yeah, - -104 -00:41:46,610 --> 00:41:59,420 -Wes Bos: I know how to say that. I'm just trying to trying to figure out how to explain what Kubernetes is. There's like Actually, this really cool. It's like container, kind of like Docker, but you can it'll orchestrate your containers. - -105 -00:41:59,460 --> 00:42:01,460 -Scott Tolinski: Nobody knows what that does it just Yeah, - -106 -00:42:01,500 --> 00:42:26,310 -Wes Bos: yeah, it scales, your containers up very high. And apparently this thing will like, because like, the difference between just taking your functions and throwing them on a Digital Ocean is that you have to manage scaling them up and down yourself. So this open Functions as a Service, apparently will just work with, some of you can just deploy this thing to, I don't know, - -107 -00:42:26,360 --> 00:42:38,150 -Scott Tolinski: it seems like a good option for those of us who need full ownership and control. I think that's a thing that we haven't really talked too much about. But again, I think this gives you a little bit more full control over that. - -108 -00:42:38,669 --> 00:43:09,210 -Wes Bos: Yeah, like, imagine you're working for a company where you have to have everything on site, like GitHub has on site offerings, because lots of companies can't let a single piece of data get outside of their own managed infrastructure, right. And they probably listened to this podcast and say, must be nice. Just be able to whip up any single service. You want Western Scott, I, it took me six years to get approval to log into Twitter on my computer at work, right? - -109 -00:43:09,210 --> 00:43:48,480 -Scott Tolinski: Well, when I worked at the University of Michigan, we couldn't even run Drupal seven, because they wouldn't let us have a certain version of PHP there was like, the PHP had to be this antiquated old version. We couldn't run Drupal seven, whatever it was, and I just remember doing my runs up think that, you know, or is Drupal eight, I'm sorry, not Drupal seven, I just remember being so frustrated by those limitations that were placed. And it's like, people work within those limitations every single day of the week. And it again, it must be so magical to not have to deal with those limitations. I I very much feel for those of you who have legal and corporate limitations like that. - -110 -00:43:48,960 --> 00:44:13,980 -Wes Bos: Yeah, I'm just I'm just reading the open fast here says avoid lock in through the use of Docker runs on any public or private cloud. So the Docker image runs on one single node, and then you can scale up, I'm assuming that's what Kubernetes does, is that it will orchestrate the scaling up and down of your servers as you need it. So I'm not sure how that works. If you need a Docker image for every function. - -111 -00:44:14,190 --> 00:44:15,990 -Scott Tolinski: I don't know enough about this stuff to - -112 -00:44:15,990 --> 00:44:36,420 -Wes Bos: I'm sure they figured it out. Yeah. So yeah, it's kind of a neat one to look into if you need some sort of self hosted one as well, if you need to go all the way down to because that's we'll talk about locking in the next episode. But at a certain point, you are locking yourself into maybe one of these providers, not all of them do, but some of them do lock in. - -113 -00:44:36,689 --> 00:47:45,150 -Scott Tolinski: Yeah, interesting. And we're going to be talking a little bit more about that a little bit more in the next. This sort of lock in a whole bunch of maybe pitfalls. We're going to be talking about moving existing applications over local development, sharing dependencies, all the stuff we didn't get to cover in not the next episode of syntax, but the one after that. So we're We had to split this one up. I mean, it was appropriate for the joke that I wanted to make that Westfall. But it was also appropriate just because of the amount of content here, there's so much here, it would have overloaded our server. So now's the time we get into some sick pics. It's the type of the part of the show where we talk about stuff that we really like stuff that we've been into. So my sick pick is a really interesting YouTube channel here. And I'm gonna say first and foremost that I have not listened to everything on this YouTube channel. As in like this, this YouTube channel has a bunch of different series, I've been watching this one series in particular, so I can only vouch for this one. And also there, you have to have a little bit of tolerance for annoying YouTube posts not to say that this guy's going to be annoying to you, but it's but he borders he borders on the annoying. And this is this Matt, Mick muscles is that really, that's got to be a fake name. That's got to be a fake name. And you're not got, yeah, I got God. This is a YouTube channel. And it's largely video game based. But that's not why I think is interesting. I think the most interesting part of this YouTube channel is this series called what happened. And he basically goes through, basically these, you could consider them, you know, cursed games, or just total flops, or some of the biggest video game disasters in history. And he talks about the entire development cycle of them. So that's where this is relevant, because I don't know very much about game development. But I have worked on a lot of teams, and a lot of projects that have built a lot of software. And this is just so appropriate for all of this stuff. Because what you what you really learn is what not to do when running any sort of major project. Because just like any other software that you're writing, whether it's an app or a video game, these stories are absolutely fascinating from what you have is like parent companies getting in the way to, you know, broken software, to bad managers to all sorts of things. And what you realize is that here you have these, you know, this output this thing, this video game, that's been bad forever, and everybody can laugh and make fun of it. But that video game wasn't bad, because there was, you know, 20 developers who else sucked at their jobs. This was bad because of potentially a host of reasons. Maybe the target would moved way too many times, or there was too many limitations placed on them, or too many people pulled off of the project. But at the end of the day, I have been going through these and I've just been so fascinated by the stories about what exactly led these projects to be so exactly terrible. And as a developer, just very, very interesting. - -114 -00:47:45,570 --> 00:48:27,870 -Wes Bos: That's really neat. I'd love those types of channels that look into like why things went a certain way. Like there's another maybe it's even the same one. That muscles, I don't think so there's another one guy who goes into like, like video game consoles, and like, why they failed and why only things were available in some regions and why. And he went through every single I went through every one of them I forget what the name is, I'll find it but like how each of the consoles got hacked, though. So how like, Xbox 360 got hacked and how the original PlayStation got hacked and how the next PlayStation and how the DRM worked. And that was I'm gonna find that let me get my sec back. - -115 -00:48:28,230 --> 00:49:09,030 -Scott Tolinski: Yeah, I was just I was just watching one last night. And they was just like, all right, these developers were like really talented. And then this one developer who spoke out against the manager for like, the manager kept changing that what they were doing and the game was already delayed 100 times and this one the one guy who was basically keeping things together and being like, no, we're not going to change this again. Just got just left he just quit he was just like, quit I can't do this. And that's really what you noticed throughout the course of this lifespan of this development of this thing is all of the good people left because they were just you they were just pulled off of it by the the personalities involved. It was just very fascinating. - -116 -00:49:09,810 --> 00:49:27,060 -Wes Bos: All right, my sick pick is modern vintage gamer on YouTube. Interesting. I had another YouTube channel is going to take pick but I'll save that one. So this one is great because it it goes into how the piracy anti piracy worked and how they were defeated. And like how the game shark worked like - -117 -00:49:27,900 --> 00:49:28,620 -Unknown: magic to - -118 -00:49:28,620 --> 00:49:47,880 -Wes Bos: me when I was a kid same here then there's all these like weird like consoles that were only released in Japan. And I just love it. It i don't i know i played games as a kid. But I don't have that much interest in video games. But just how it worked is very interesting to me. So check it out. Modern vintage gamer on YouTube. - -119 -00:49:48,990 --> 00:49:50,250 -Scott Tolinski: Subscribe to my life. - -120 -00:49:50,850 --> 00:50:14,970 -Wes Bos: All right, shameless plugs. I'm going to shamelessly plug my beginner JavaScript course be I'm not going to spell it you know how to spell beginner beginner JavaScript calm. syntax for 10 bucks off is the course to get you up and running on modern JavaScript and just get you comfortable with it. So you can go ahead and the course of your dreams. Yes, it is just a course there, you hear that? I'm gonna put Scott's face on the website, this is the course. - -121 -00:50:17,460 --> 00:51:42,720 -Scott Tolinski: You have to see the magic of this course. My slogans here, cool. I'm gonna plug my YouTube channel, because I've been doing some YouTube videos just for fun. I decided that, uh, you know, before in the past, I've always done YouTube videos where there's just like straight up tutorial content. And yeah, I'm taking a different approach to it. Right now I'm doing these Scott tries videos where I try different web services that we've talked about a couple times. But I'm also doing another series of videos on a code block where I'm getting into real code in the level of application. So the first one I released was a little bit on react motion and just talking about react spring. And so what I did is I took one component that was written in react spring, and I just converted a direct motion and talked about it while I did it. And another one that I'm that will be out by the time you're watching or listening to this podcast was really cool. I had this severe jank in my site where it was loading the stuff and the animations were really choppy. At one point I was getting down to like 10 FPS, it was not anywhere near 60 FPS, and I'm thinking what in the world is going on? And that's when I found out the real cost of data you our eyes. So I don't know if you know too much about data URLs. But apparently, they're six times slower to load than images. And when you were loading about 100 of them, your site is not happy about that. - -122 -00:51:42,959 --> 00:51:56,610 -Wes Bos: So really, yeah, that's, I was wondering about that, like, yeah, at what point? Does it not make sense to use a data URI? Because tax spends over the wire? Yeah, let's so point when some point found it, - -123 -00:51:56,610 --> 00:52:29,790 -Scott Tolinski: I found it, I definitely found it. But then built this whole new service around how I'm going to do background images differently instead of using data URLs, but it is yeah, you have a 64 bit string or whatever. And the CPU has to decode that. So when you have a whole bunch of them, the CPU has got to decode all of them and your CPU goes nuts. So this was a limitation in the site, and I fixed it. So if you want to check, check that out. learn a little bit about stuff like that, check out the level up tutorials at YouTube channel. I'll have the link in the show notes. - -124 -00:52:30,090 --> 00:52:53,010 -Wes Bos: Beauty. Well, thanks for tuning in. If you have your own thoughts on serverless make sure you tweet us at syntax FM or hit us up in the Reddit Reddit comm forward slash our forward slash syntax FM. We've got like almost 700 people in there. It's a real cool community to cool community. Cool. All right. Thanks for tuning in. Catch you on Monday. Later, please. - -125 -00:52:54,930 --> 00:53:04,680 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax225.srt b/transcripts/Syntax225.srt deleted file mode 100644 index 687e572a2..000000000 --- a/transcripts/Syntax225.srt +++ /dev/null @@ -1,180 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,580 -Monday, open wide - -3 -00:00:02,580 --> 00:00:08,820 -dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip - -4 -00:00:09,059 --> 00:00:19,980 -Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA, - -5 -00:00:19,980 --> 00:00:21,660 -Bob and Scott Taylor. - -6 -00:00:23,579 --> 00:00:24,450 -Totally at ski. - -7 -00:00:25,950 --> 00:00:51,570 -Scott Tolinski: Oh, welcome to syntax. And this Monday, dare I say, hasty treat. We're going to be talking about how to make servers. So very fast. How to make these servers. We're talking about RAMs, we're talking about CPUs, we're talking about GPUs. We're talking about SSDs and hdds, and all sorts of other things. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, and with me, as always, is the what boss. - -8 -00:00:51,900 --> 00:00:54,720 -Wes Bos: Hey, everybody, it's my birthday today. Did you know that? - -9 -00:00:54,720 --> 00:00:55,890 -Unknown: What's today? - -10 -00:00:55,890 --> 00:00:58,680 -Wes Bos: Yeah, yeah. I'm 32 today. Happy birthday. I - -11 -00:00:58,680 --> 00:01:02,580 -Scott Tolinski: can't but we just recorded a whole episode. And you didn't tell me in the other episode? - -12 -00:01:03,239 --> 00:01:10,650 -Wes Bos: that it never came up. But it's my birthday. Happy birthday. Wow. Relations. Yeah, it's I tried hard. Yeah. - -13 -00:01:12,300 --> 00:02:46,350 -Scott Tolinski: That's, that's fantastic. Well, happy birthday to Wes. If you're on Twitter, give him a shout out belated birthday. By the time you're listening to this, it's going to be fairly belated. But yeah, this episode is sponsored by Sentry, no Sentry is one of those services that you absolutely need. If you are running a website that anyone uses at all. I mean, if anybody's using this thing, it's a product, you've got a half Sentry@sentry.io and use the coupon code pasty treat all lowercase all one word to get two months for free. Now what is Sentry, it is the error and Exception Handling tool that makes it just so very easy to see exactly what's going on in your website. You can set up all sorts of alerts, you can attach issues to releases, you can attach source code to releases, and you can track things like regressions, let's say I wrote some code. There was a bug, I saw the bug on Sentry, I was able to track it down what happened to fix it, push a new release. And then that same bug pops up and it's attached to a new release. So Sentry can let me know that, hey, you just had a regression your code, you mark this as being fixed, what are you thinking it's not fixed. And then I have to go back and I got to fix that to actually fix the code. So essentially, is one of those services that make stuff like that just so incredibly easy to visualize, see all of your issues, track them and make sure that your application is bug free. You know, that's the dream right there bug free code. So check it out@sentry.io use the coupon code tasty treat to get two months for free. So acronyms, - -14 -00:02:46,800 --> 00:03:55,470 -Wes Bos: acronyms, I thought this would be kind of an interesting thing to talk about. Because in the light of I server lists, maybe this stuff doesn't matter all that much. But a lot of us still need to go ahead and buy a server at some point. And you sort of sit there and look at the server pricing. And they offer you the ability to upgrade ram CPU. Some of them allow you to have GPU, some of them say they're running on SSDs or hdds. So like, what does that mean? If you are running like a let's see as a node app, for example, if you're running a node app on a server, like what do these things matter to you? What What do they make faster if you pay more for at the end of the day, so that we break that down? Because like not all of us, that's a discount for this, like not all of us built a computer when we were 12. Right? Like not web development is becoming a much less of a computer nerd job, I think, or like you just might not care. Like you might you probably care a lot about JavaScript and, and development and expressive stuff like that. But you don't necessarily care about like the actual server part of it. So let's let's dive into what those things do. - -15 -00:03:55,800 --> 00:03:58,800 -Scott Tolinski: Sure. So you want to get started with Ram? - -16 -00:03:59,279 --> 00:05:58,500 -Wes Bos: Yeah, so like, what is Ram? What is memory stands for random access memory, those little sticks that you put into your computer. And whenever you run a JavaScript application, things like variables, functions, call stacks, application cash, like any cash, you have Redux cash, any any variable that's stored in your application that is stored in memory on your computer. And that's why everyone makes jokes about Chrome being like a memory hog says every time you open up a new browser, it sort of takes a little chunk of memory says okay, I'm going to use this and I won't get too much into how like garbage collection and things like that work because JavaScript is a language that you don't really have to worry about that the browser takes care of allocating memory and doing garbage collection, meaning that like, if there's no I'll just say what garbage collection is really quickly. If there's no longer reference to something like variable or a function, the browser will try to figure that out and then it will free up that space in memory. So what would eat up a large lot of memory? Well, I've certainly run out of memory before, when I tried to read in a million lines of like, I had a million coupon codes, and I needed to read them into memory and then dump them into a database. And 1 million coupon codes is too much to put into memory, and I crashed the entire thing. npm install takes up a lot of memory because they need to like temporarily store as they're downloading files, they need to be temporarily put into memory, your node application can be can be limited by memory, it will crash or it will wait up long, it'll wait longer for memory to be freed up or garbage collected. And garbage collection is just a process itself that can actually take up CPU, which we'll talk about in a second. If you're running a database, on your server, generally, what we recommend on the show is that you go to like, m lab or Mongo, what are some of the ones that host MongoDB. - -17 -00:05:58,740 --> 00:06:01,590 -Scott Tolinski: I use Atlas. It's fantastic. - -18 -00:06:01,680 --> 00:06:35,730 -Wes Bos: Atlas is the big one. Yeah, I like it, like go go somewhere that's like purpose built for hosting a database. But you certainly can just run a database on your computer, I run it locally, when I do my my development. And in order for those databases to be fast, they keep a lot of that data stored in memory. So that's sort of what memory does. If you find your application is a little bit slow, or is running out, it specifically is saying that it is running out of memory, you can increase that and it will likely speed up your application. Hmm. - -19 -00:06:36,000 --> 00:06:42,990 -Scott Tolinski: Okay, so I think that important thing done. Did you mention how ram itself is non persistent? - -20 -00:06:43,260 --> 00:06:47,370 -Wes Bos: No. Oh, that's a very good point. Good. Good. Say that? Sure. Yes. - -21 -00:06:47,370 --> 00:07:31,950 -Scott Tolinski: So RAM is if you're talking about memory, right? This was always the thing. I used to work at a computer store. And you dealt with a lot of people who didn't know anything about computers. And they'd be like, Well, my computer has, you know, well, at the time would have been like, my computer has 200 gigabytes of memory. And you'd be like, No, it doesn't. It has 200 gigabytes of you know, store partners. Yeah. So that they're basically your hard drive, or your SSD or your your long term storage is going to be something that persists. So when the computer is off, but memory is wiped clean, it does not store information when your computer is restarted. So nothing in memory is permanent there. It's just sort of a temporary holding space for information to be accessed quickly. - -22 -00:07:32,370 --> 00:08:46,620 -Wes Bos: Yes, that's such a good point. Like in Case in point, if you have a node application where you are storing like sessions in memory, that's the default that passport JS will do. And then every time you restart your server, you find yourself having to log in again, that's because memory is cleared when that process is torn down. So there's that there is that. Next one we have is CPU, so that's the little chip on your computer, it's the processor, it's sort of the brains of the computer. And CPU is used for tasks that need to be computed. So something as simple as one plus one or running the code inside of a handle a click handler, all of those take up CPU time. So the faster the processor, which is generally there like gigahertz, and the number of cores that it has, I'm not going to get into the differences of cores versus clock speed right now you can go watch a Linus tech tips video on that or something, the faster it will perform those tasks. So if you have a very resource intensive application, so big ones are video encoding are very heavily CPU, very heavy on the CPU or things like base 64 encoding, decoding, yes. - -23 -00:08:47,270 --> 00:08:57,210 -Scott Tolinski: Something I learned recently, is not to have 100 data URL images on a page because the CPU will go absolutely nuts because it's got a decode all that stuff. - -24 -00:08:57,390 --> 00:10:01,500 -Wes Bos: That's like a perfect example where like the the browser, I said, download this huge string, and then you have to change it from text into whatever that image actually is. And that's very taxing on on the CPU of the application. Same things with like starting up a node process, there's a lot of computation that needs to happen before the node process can start. And generally, the faster the CPU you have, the faster that startup will be. Next, we have a GPU so most servers don't come with a GPU that's for graphics. So that's not something you run into all that often. But generally GPUs are used for solving. Obviously, they're used for graphics, but they're used for solving complex tasks as well because I'm not sure why but turns out that graphics cards are better at doing complex things like Bitcoin mining, machine learning, very, very heavy, computational things are generally offloaded to a GPU and they're better At that, I guess so - -25 -00:10:01,620 --> 00:10:11,460 -Scott Tolinski: yeah, I don't know why they're better at that. But they're It's its own processor. I mean, it's its own thing and can do stuff that the CPU isn't going to be doing like everything else running your system. - -26 -00:10:11,730 --> 00:10:28,670 -Wes Bos: Yeah, like you can. That's actually when sometimes you have animations in the browser, and the CPU just animates them for you. But if it's going to be like a heavy graphics rendering, then the browser will often kick that off to the GPU. And it'll be much more buttery smooth. So - -27 -00:10:28,830 --> 00:10:50,610 -Scott Tolinski: yeah, I don't know why 3d transforms to Yeah, yeah. If you use a 3d transform, rather than a just straight up, transform, right, transform, translate x is going to use the CPU where transform translate 3d, you know, 10 pixels. 00 is going to use the GPU and is largely considered to be a better practice for animations. - -28 -00:10:51,210 --> 00:11:02,670 -Wes Bos: Yes, I always wondered, like, why do we have to do that? You know, like a question. That's, that's a great tip. But why doesn't the browser figure that out? For us? Maybe they will at some point. - -29 -00:11:02,850 --> 00:11:04,680 -Scott Tolinski: Yeah, I don't know. I don't know the answer to that. - -30 -00:11:04,860 --> 00:11:18,330 -Wes Bos: That's a hot tip, you just use the 3d version, and that'll offload it to your GPU. So if you know what, why is the GPU better tweet us at syntax FM, I would like to know why I just know that it's, that's just something I've always had in my head that GPUs are better. - -31 -00:11:18,540 --> 00:11:25,920 -Scott Tolinski: I always thought it was just because it was exclusive to processing graphics. And maybe like it didn't have any other job. And maybe that's why - -32 -00:11:25,920 --> 00:12:14,730 -Wes Bos: it's true. Because like your your CPU is responsible for allocating memory. And doing all the computation is responsible for absolutely everything on your computer, right? When the GPU, it only does computation for things like graphics and Bitcoin mining. Machine learning is another big one as well. Last thing we have here is disks. So are maybe 810 years ago, Digital Ocean came out swinging sayings, five bucks a month for SSD server. And now ssts are almost a standard in servers. Before that it was hard hdds hard disk drives where you have an actual spinning platters. And the reason the why SSDs are better is because the files need to be read from the hard drive. Scott's got platters in his hands right now. - -33 -00:12:14,820 --> 00:12:15,960 -Scott Tolinski: He's in his coasters. - -34 -00:12:17,130 --> 00:12:19,800 -Wes Bos: Oh, man, that's, that's actually really cool. Yeah, I know, - -35 -00:12:19,800 --> 00:12:31,560 -Scott Tolinski: I got tiger, I have just about 20 of them from old hard drives that I would take apart, and there'd be like, it'd be like a 200 gigabyte hard drive. And there'd be like three of these plates in there. So I have so many of them from, from old disks. - -36 -00:12:31,860 --> 00:14:10,440 -Wes Bos: That's really cool. So the hard drive speed determines how fast files can be read off the drive and how fast they can be written to the drive. So generally, an SSD is way better. Because if your web server has to read a JavaScript file, or render out a template, or whatever, for whatever reason, if it can go faster, that's better for the actual website. And like, almost everybody has an SSD. But like, you probably remember when your laptop went from a hard disk drive to SSD. And it was like nine day I remember I had like the old MacBook that had like a CD drive, and I put an SSD where the CD drive was, and I just ran my operating system on that. And that was great because it was so much faster. And then you you put your larger files on a cheaper, larger hard disk drive. They're generally much more expensive or much, much cheaper, but they're good for storing stuff that's not as time sensitive as your application code. So hopefully that is helpful. I was just kind of a primer on what these things do. I certainly had my website B, I found that like restarting my app sometimes used to take like 20 seconds. And then I cranked up the CPU on my box. And that restarted my app in like three seconds. Like, okay, a faster CPU on the server will make my note app restart much faster. Nice. Yeah. So let us know if you like that. I would also like to do at some point to talk about how servers are priced by the hour. This is - -37 -00:14:10,440 --> 00:14:13,890 -Scott Tolinski: really important with containers, all sorts of stuff. - -38 -00:14:13,920 --> 00:14:40,260 -Wes Bos: Yeah. containers, like you can understand five bucks a month for a server. But what does it mean where it's half a cent? per hour? Like what does that even like? How like I need them? 24 hours, right? So like they can obviously spin down and things like that. So we if you'd like to hear a show on that, tweet us at syntax FM and we will make it happen. Let's do it. Alright, that's it. Thanks for tuning in. Catch you on Wednesday. - -39 -00:14:40,350 --> 00:14:46,200 -Scott Tolinski: Yeah, we got a haste or no, we got a potluck. Lots of good questions. No follow to tons of good stuff. - -40 -00:14:46,320 --> 00:14:57,150 -Wes Bos: Yeah, it's like the next j s. No j s reactor react episode of potluck is a really good one. And we really went for it on the questions. It's a it's a we brought it a lot in. - -41 -00:14:57,270 --> 00:14:58,290 -Scott Tolinski: Yeah, a lot of that - -42 -00:14:59,580 --> 00:15:00,510 -Wes Bos: leftover Is that - -43 -00:15:01,620 --> 00:15:02,520 -Scott Tolinski: right? Yeah. - -44 -00:15:04,380 --> 00:15:07,980 -Wes Bos: Cool. All right. Thanks for tuning in, catch you later. Later. Please - -45 -00:15:10,500 --> 00:15:20,280 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax226.srt b/transcripts/Syntax226.srt deleted file mode 100644 index e328c9d61..000000000 --- a/transcripts/Syntax226.srt +++ /dev/null @@ -1,520 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,820 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:10,530 -development treats out there. strap yourself in and get ready to live ski and Wes Bos. - -4 -00:00:10,589 --> 00:00:39,330 -Wes Bos: I can hear your stomach grumbling. It's time for the potluck. Welcome to syntax. This is the tastiest podcast around about web development. If you're just tuning in, we are doing a potluck episode today. We've got some awesome questions around Gatsby and next in a new tab and styled components and view in jQuery and Knox, the knacks and some really good JavaScript questions coming at us today. With me as always is Mr. Scott to linsky. How you doing today, Scott? - -5 -00:00:39,330 --> 00:00:40,409 -Unknown: Hey, - -6 -00:00:40,409 --> 00:01:06,780 -Scott Tolinski: good man. I just behind the scenes here is a little behind the scenes when we do our we do a clap to sync the audio. Yeah, yeah, we do a 123 clap. And it's always off because Wes uses bluetooth headphones, and there's latency but a Clapton when I put my hands down. I did so too aggressively and it ripped both of the headphone headphones out of my ears and out of the jacks. I'm like struggling this your whole intro. I hope it was awesome. - -7 -00:01:07,010 --> 00:01:36,720 -Wes Bos: Oh, man shirt was one of my best one of my best. Today we are sponsored by two awesome companies. First one is Log Rocket, which does JavaScript session replay for your application. And second one is Kyle prinsloo. Back with his freelancing course. We'll talk about both of them partway through the episode. So lots of questions today. We just went through, we haven't done we do potluck once a month. And we went through today and there was just tons of good ones in there. So we just kept adding them and adding them. So let's get right into it. - -8 -00:01:37,529 --> 00:01:43,290 -Scott Tolinski: The first one? Sure. First one is from Salvador are getting Yeti. I hope I - -9 -00:01:43,290 --> 00:01:44,100 -Wes Bos: got that. Okay. - -10 -00:01:44,100 --> 00:01:58,050 -Scott Tolinski: I don't know. I'm sorry. So now that this may be a crazy question, but I need to build a similar system to level up tutorials where people can access content based on a monthly subscription. Okay, please subscription content. Watch - -11 -00:01:58,050 --> 00:01:59,850 -Wes Bos: out, Scott. Don't answer this. - -12 -00:01:59,910 --> 00:04:07,650 -Scott Tolinski: They're coming for me. Okay. Any recommendations on where to start with either next j. s? Or Gatsby? How do I check if the person is up to date with payments? Any or how it would be greatly greatly appreciated. Also a fan your videos rocky pay, I pay for your content? Thank you so much Salvatore. Okay, so the answer to this question is okay, this question actually goes along with another one that we're going to talk about a little bit later with the next JS verse Gatsby stuff, because a lot of that stuff still applies. Specifically, do you get the benefits of a static site? If you have user accounts? Well, we'll talk about that. Another question. But so the basics are you need a payment processor that handles reoccurring payments, or you need a service like something like recurly? That will be like a full on service to do it for you. If you use stripe or Braintree that's going to handle your payments, you need a database component to all of this, which answers some of the other parts of this question, which would be how do you check if a person is up to date? Well, chances are you have a user you have a user record in your database, and you store some sort of access roll onto that user. And what happens is when the subscription charges or fails to charge, I should say or or does anything or is successful, the service, whether that's stripe, or Braintree sends a message to a route aka a web hook to your website with a message that says OK, customer number whatever payment successful and then you can do your service to fire off an email saying Hey, your payment was successful, whatever, or they send a message saying hey, past due or they send a message saying, hey, this account has been cancelled. So really, your server and your database isn't going to be managing the timing of any of this. But the timing of when people subscribe, or gain access is all done through the payment processor itself, their reoccurring payment system, and your database is just kept up to date when their messages come in. So no need to worry about setting up timers or checking things monthly or whatever. It's all about web hooks and the message to keep your users up to date with the payment processor. - -13 -00:04:07,979 --> 00:04:52,050 -Wes Bos: Beautiful. Well, we'll talk about the next first Gatsby stuff in a future question. But thanks for sending that in. Next one was from anon, what is your favorite New Tab page? And this is this is a good one. I actually just went through this myself. My favorite New Tab page is about blank, which is just absolutely nothing. I used to have to install a Chrome extension to even get this with a beard. Yeah, because I don't even want like your recent or most visited especially because when I record tutorials, I don't want that stuff just showing up. Now, even if I use like a different profile, and I don't want any of that. So just blank new page. I know some people have like motivational quotes or their to do list or whatever. But I've found over the years that just nothing works best. - -14 -00:04:52,470 --> 00:05:15,140 -Scott Tolinski: You know what's nice is in Firefox. They do have the top sites and highlights pop up, right? Yeah, but those are both accordions And they remember your position. So I just, I just hide both of those accordions or collapse them. So now when I get a new tab, it's essentially just a blank page with a Google bar if you need to search in there, although I never seem to use that, because I just search in the URL. Yeah. So yeah, that's my favorite. - -15 -00:05:15,380 --> 00:05:41,340 -Wes Bos: Firefox does a great job. They just let you uncheck all the boxes. So they have web search top sites, recommended by pocket highlights, by the way that like recommended I hate that on everything, like my Google Home. Has that in it, like, turn that off? Yeah, yeah. Can you turn off news on google home because it just shows me like the most awful stuff that's going on in the world. And my kids just like, accidentally tap it. And like bombs are dropped on every country in the world. - -16 -00:05:41,370 --> 00:05:45,660 -Scott Tolinski: I know, I know, lightning figured out how to get YouTube going on the Google Home screen. - -17 -00:05:45,960 --> 00:05:46,560 -Wes Bos: And just like, - -18 -00:05:48,030 --> 00:05:48,630 -Scott Tolinski: please stop anyways. - -19 -00:05:48,630 --> 00:06:05,100 -Wes Bos: Yeah. So Firefox has all these different things. You just take them all off. And I highly recommend it. It's good. Just don't. Oh, it's sort of a trend. We talked about this with the bookmarks as well. Just try keep stuff as minimal as possible. At least for me, I it works well, for me, it doesn't overwhelm me. - -20 -00:06:05,490 --> 00:07:45,960 -Scott Tolinski: I have too many distractions. Already. I'm getting a bit distracting myself. I don't need Firefox to step in and be like, Hey, you know what, let's actually distract you a little bit more. You know, I had to I have to work at that. So. Alright, next question is from UVA. Russ. Gosh, man, I'm getting a hard name. Say you got a non raw virus. Yeah. And, uh, come on. Okay. So this question is CSS versa. s CSS verse styled components. When you are developing a react or next JS application, which styling method Do you use and why? which one is best practice in quotes, or the most efficient way of going about it? Okay. There's no best practice here. So you can write excellent CSS, using CSS, CSS, or style components, or emotion or any of this stuff. It's all going to allow you to write quality CSS, what matters is that you're following some sort of a system that allows you to write not necessarily the driest code of all time, but write code that is efficient does what it needs to be in is updatable, and extendable. And all those those wonderful things. So if I'm writing CSS, or s, CSS, I'm always using something like them over a system that I have established myself, that really follows sort of the same sort of principles. I like to think about things in components now. Anyways, so it's all very component based in my mind. But yeah, I my thoughts are that you can write amazing CSS with any of these, I use styled components, primarily because I just like the way it works. And I like the ease of use of everything. But you know, to each their own. - -21 -00:07:46,620 --> 00:09:51,750 -Wes Bos: Yeah, I think you nailed it is that as long as whatever you're doing, just make sure you're using some sort of system, whether that's Batman, you, you figure that out on your own, or whether that's styled components, where you create a new component for that. So my approach, I've said this before, but my approach to writing CSS, any react application would be I do my sort of global styles first. And I think like a lot of people are a little bit afraid to like, use global styles because they'll, like, go nuts, do your do your base stuff first. So fonts and sizes, and background colors, all of that sort of like base stuff, go ahead and do that, and then go go component by component. And the other thing that I do is that, like, if I've got a div, and that div has some text in it, and it has an unordered list and a list item, some people will go bananas and make a new component for the paragraph for the unordered list for the list item. And for a button inside of that thing. And then all sudden, you got like six different components. So what I do is I'll just create a component for that thing that I'm styling. And I'll sort of like eyeball it, say like, Ah, this is this is like a, this is a one thing, this is a component. And then I'll just use descendant selectors inside of that. So maybe all grab the div that wraps the entire component. And then inside of that, I'll use my paragraph Selector List item selector under this selector button selector. And then if I find myself saying, Oh, I need to take this unordered list and I want to be able to reuse this somewhere else, then I'll just refactor it out into its own component. And I won't really stress it all that much out about it. Don't go bananas on creating a new style component for absolutely everything because that that seems hard. And that seems like I don't know. I always just found myself being able to do it much easier. So no, totally. That's kind of where I go. There's there's no like real best practice or efficient way. You'll certainly hear people spout opinions and write medium blog posts on either side. But who cares at the end of the day, as long as you feel confident in the approach that you're taking? Do you use the CSS prop - -22 -00:09:51,799 --> 00:09:53,149 -Scott Tolinski: in styled components, - -23 -00:09:53,460 --> 00:09:54,210 -Unknown: um, - -24 -00:09:54,210 --> 00:09:56,539 -Wes Bos: is that when you're doing like nested stuff, - -25 -00:09:56,730 --> 00:10:02,130 -Scott Tolinski: it's when you just want to write some string CSS. As a prop on a component, - -26 -00:10:02,419 --> 00:10:04,770 -Wes Bos: oh, like just like inline you mean? - -27 -00:10:05,029 --> 00:10:08,730 -Scott Tolinski: It's like inline styles? Yeah, straight up string CSS? - -28 -00:10:08,899 --> 00:10:09,419 -Unknown: Um, - -29 -00:10:09,419 --> 00:10:17,640 -Wes Bos: I haven't. But when I do need to write inline CSS, I just use like the object syntax. So I can imagine the CSS being nice. - -30 -00:10:17,730 --> 00:10:20,820 -Scott Tolinski: Yeah. It's basically the object syntax without an object. - -31 -00:10:21,090 --> 00:10:24,210 -Wes Bos: Yeah, that's nice. Actually, I don't like writing the object syntax. - -32 -00:10:24,210 --> 00:10:43,770 -Scott Tolinski: Yeah, I do it for prototyping, especially when I'm just like, still dreaming of what the components gonna look like. I just start throwing string CSS and everything. And then because it's a string, you can just copy and paste it directly into your style component if you do want to merge or move it there anyway. So I find that to be a really handy tool within styled components. - -33 -00:10:43,980 --> 00:11:12,510 -Wes Bos: Yeah, that's great. Maybe we'll start using that. I will say the one thing I do love about these style components and emotion and all these things is that it doesn't make you think of names and classes or anything like that, like the big No, no, is don't use element selectors, meaning like don't say h2, and style all of your h2. And don't don't say paragraph tag. And but with style components, you can because it's all scope. It's scoped to that component. And you know, there's like one paragraph tag and that component, so that's totally fine. - -34 -00:11:12,689 --> 00:11:13,620 -Scott Tolinski: Yeah, I like that, too. - -35 -00:11:13,980 --> 00:12:08,250 -Wes Bos: All right. Next question is from Rob, he links to lit HTML dot polymer project.org. What do you think of lit HTML. So this leg lit HTML, somebody recommended this to me at one point, because I do a lot of vanilla JavaScript. And I do a lot of templating of vanilla JavaScript with just backticks. And there's there's a little bit missing there in terms of like sanitization. And they're not actually doing document dot create element. They're, they're just grabbing a huge string of HTML and dumping that into an element with dot inner HTML. So this lit HTML looks very similar to template tags in JavaScript, but also sort of like JSX. So what what is the difference between what is the benefit of this? Scott, I'm just looking at it right now I forget. - -36 -00:12:08,520 --> 00:12:19,710 -Scott Tolinski: This seems more like a framework where you're doing more than just a little bit of like templates, it seems like they're trying to do a little bit more react II kind of things with it. - -37 -00:12:19,890 --> 00:12:45,450 -Wes Bos: Oh, it's like, like, lot, you can put variables in the HTML string, and they will be rendered. Yeah, when that data changes very much like react will do. And that's good. Because I see that all the time with vanilla JavaScript, people are like, Hey, I put a variable into the string. And I changed the variable, and it didn't update the string. And it's like, well, yeah, once once it hits a string, it doesn't know about those variables in the future, which is pretty cool. - -38 -00:12:45,840 --> 00:13:13,710 -Scott Tolinski: Yeah, it does. It does talk specifically about how it doesn't use the virtual DOM. And it's efficient. It's expressive. It's extendable, extensible. I wonder. I don't know the difference between the word extensible and extendable. So should google that extensible. To be able to be extended? extendable? why not just use the word expendable? If you know why you would use the word extensible, vers extendable, let me know. Because it cited them as synonyms. - -39 -00:13:14,010 --> 00:14:20,220 -Wes Bos: This is cool. Like, it's a light way way to put data into HTML, the template out data, and then when that data changes, it will be re rendered. Yes, without the V DOM, we should explain what v Dom or virtual DOM is real quick. So the whole idea behind react and I think view and a lot of these places have this idea of the virtual DOM is that they, they have the real DOM, which is your your page. And then they have a virtual DOM, which is in memory, they they keep a sort of a similar tree structure to what your what the DOM looks like. And then when data changes, the virtual Dom will update itself, and then it will know which pieces of the actual Dom to update. And that's why react is so fast, versus like some like in my vanilla JavaScript course. Sometimes I say like, Hey, we just got to re render this entire to do list, because we there's nothing built into vanilla JavaScript that allows you to figure out which part of the DOM has been updated. And it looks like that this does something similar to that. So pretty cool. I would definitely reach for this. It is pretty cool. Yeah, but - -40 -00:14:20,220 --> 00:14:31,649 -Scott Tolinski: check it out. Just to just to goof around with it. I use like handlebars, or some of those templating languages. This seems like it's a little bit more. I don't know. This seems pretty cool. - -41 -00:14:31,949 --> 00:14:38,669 -Wes Bos: Yeah. What it's just backticks. Right. So it's it's everything you're used to from writing vanilla JavaScript, except it's live. - -42 -00:14:38,909 --> 00:15:03,539 -Scott Tolinski: Yeah. Huh. Laugh Yeah, no, it looks interesting. I think this is one of those ones that you want to check out a little bit. And it does work with web components. So I, yeah, polymer polymer project seems to be alive and well with a lit HTML. I have not used polymer and a little bit so this was exciting to see what actually because I had heard of what he tml but what I didn't realize is that it was part of Polymer. - -43 -00:15:03,750 --> 00:15:19,980 -Wes Bos: Oh, yeah. When people recommended it to me, I was like, Well, I'm not using Polymer, but they're like, no, it runs on its own. Yeah, just cool. Like, imagine JSX. You could just use JSX. I guess it is its own project. But I've never heard of anyone using JSX outside of react world. So it looks like this lit HTML does - -44 -00:15:19,980 --> 00:15:29,580 -Scott Tolinski: do that. You can use an interview. Yeah, you did. Right in view. Alright. Next question here comes from Daniel. Boss, man. Cool. Sick. Last - -45 -00:15:29,580 --> 00:15:31,020 -Wes Bos: name, boss, man. - -46 -00:15:31,289 --> 00:16:42,630 -Scott Tolinski: Sick. Last name, boss, man. Hi, guys. I'm relatively new to react and primarily learning the Create react app way, when you go for the Create react app approach when building an application? And when do you customize the config. It is not like react comes with so much magic compared to the others. But I'm uncertain to when it is time to escape the whole create react app approach. And also when escaping it. Which mean configurations are you grabbing. All right? In my mind, if you're really needing to get into the Babel config, you need to do some server side rendering, you're needing to just really customize beyond what's there, then that's when you go for beyond crate react app. That said, I'm probably not rooting for create react app for too many of my projects to go into production, not because create react app isn't great. But because I think that typically if I'm doing another project, like a big project, I'm gonna want things like either static generation or server side rendering of which then you're getting into all these custom configs. So I'm going to primarily reach for something like Gatsby next j. s, or in my case Meteor to do those those aspects. - -47 -00:16:42,929 --> 00:17:04,680 -Wes Bos: Yeah, I agree as well. I think in most cases, you probably won't have to eject from create react app. Yeah. Like what are the reasons you might want to eject from create react app? The one of the biggest ones was no sad. Right? Right. Yeah, I think that's, that's been added now. And I guess like another reason would be like, Oh, I want to use that new. What's the new question mark, thing and objects? So - -48 -00:17:04,680 --> 00:17:06,450 -Unknown: optional chaining, - -49 -00:17:06,959 --> 00:17:07,860 -optional chaining? So - -50 -00:17:07,979 --> 00:18:16,850 -Wes Bos: like, let's say you, you needed to add that to your Webpack. config, and you got it you you want to try that out? Although it's in Chrome now, which is really cool. But yeah, obviously, not every browser has it. So you might have to escape for that. I think I would go as far to say, Don't ever eject from create react app, that's so much homework that you have to do to babysit this thing. You get 1 million files, you can't go You can't ever get an on a jack. Well, you can on a jack, you just have to scrap the thing and copy paste in your files into your old one, or into a new crate racked out. But I wouldn't recommend it. I personally have not written any more than a couple lines of Babel or Webpack config in my thing. And in most cases, Gatsby. And next, yes, they will allow you to just extend the one. So if you need to add something specific, like server side styled components, you can just add it to your Babel config, and it will fold it into to what they have. So yeah, I would just say try not to and if you really, really, really need to, you probably will reach for one of these more batteries included frameworks that is like next Jess Gatsby, whatever is out there. - -51 -00:18:17,160 --> 00:18:18,930 -Scott Tolinski: Totally. Yeah, hundred percent agree. - -52 -00:18:19,310 --> 00:18:34,850 -Wes Bos: Next question is from john. Is there a reason that hasty treat intros are two and a half times the length of normal episodes. Now that overcast has intro skipping? It'd be nice if they were uniform. And like, I didn't know that overcast added this, but - -53 -00:18:34,890 --> 00:18:37,920 -Scott Tolinski: there's no rocket cast has it too. And it's sick. - -54 -00:18:37,920 --> 00:18:38,730 -Wes Bos: Really? - -55 -00:18:38,910 --> 00:18:40,050 -Scott Tolinski: Yeah, I use it. - -56 -00:18:40,229 --> 00:19:01,310 -Wes Bos: I would like that. Because like, I'm so good at skipping the like 14 minutes of Joe Rogan intros, talking about underwear, something like that. So yeah, there's there's obviously no reason we don't have reason behind much on this podcast. But we are talking about getting some new intros done. So it would be awesome if they were all the same - -57 -00:19:01,310 --> 00:19:06,900 -Scott Tolinski: length. Yeah, we should we should specify. They're this long. I don't know what people like - -58 -00:19:06,960 --> 00:19:08,300 -Wes Bos: six minutes. Yeah. - -59 -00:19:08,489 --> 00:19:17,760 -Scott Tolinski: six minute long intros. I feel like that's probably pretty good. Like we could we could tell a little bit of our life story in six minutes before the podcast starts every time. - -60 -00:19:18,050 --> 00:19:28,500 -Wes Bos: Oh, no, I think they're talking about like the like, the leg walk. Oh, no, they are? No, they are. Yeah, that's what they're, they're not talking about us shooting the shooter, because that's genuine content. But - -61 -00:19:28,500 --> 00:19:43,170 -Scott Tolinski: what I'm I'm talking about is like, what if our life stories were just part of that intro out of Ann Arbor, Michigan, by way out of Denver, Colorado. Here is Scott Tolinksi, who's spent most of his career doing this. Pretty sweet. Tell the whole thing. - -62 -00:19:43,170 --> 00:19:44,430 -Wes Bos: Yeah. Pretty funny. - -63 -00:19:44,489 --> 00:19:51,110 -Scott Tolinski: Yeah, you could have a dynamic service that automatically inserted with the current forecast is in Denver and in Toronto. - -64 -00:19:51,320 --> 00:20:05,570 -Wes Bos: Just get that over with. Yeah, that would be funny. Yeah. So I know. We're gonna do some new intros. We got some really funny ideas for some some new intros. Maybe we'll Try to keep them the same length. But if it's funny, then maybe we'll go longer or shorter. So - -65 -00:20:05,600 --> 00:20:11,330 -Scott Tolinski: yeah, what specify we should do? We should tell that whoever's creating it, okay, make it 30 seconds or whatever. Yeah. 20 seconds. - -66 -00:20:11,460 --> 00:20:14,400 -Wes Bos: Yeah. 15 whatever. Yeah. But thank you, john. - -67 -00:20:14,520 --> 00:22:05,970 -Scott Tolinski: Yeah, thank you. So it's dope. That overcast added that skipping feature, but you don't want to skip our ad reads, because then you wouldn't get to hear us talk about why you can save so much time with Log Rocket. Now Log Rocket is the best place to visualize the errors and bugs that are happening on your site, you want to check it out Log rocket.com forward slash syntax, you'll get 14 days for free Log Rocket gives you a session replay that allows you to see your bugs in action. While they're happening. You can click and drag if you like to click and drag and see these things happen. You can see the user click that thing and have your whole website turn into a giant tomato. I don't know how they did that. But you'll be able to find out and see the network requests, the error logs, the Redux store, all that mark. And it works with all of the platforms that you know and love react Angular, just JavaScript, Ember view Redux, and it connects to a lot of the services that you might already be using such as you know, Sentry robar, New Relic, JIRA, Zendesk, all that good stuff, the stuff that we know and love. So check it out at Log rocket.com, forward slash sin DAGs. All right. Next question is from Daniel, bro. Hello, there. I see Kyle Matthews, who created Gatsby coming out with a lot of input on how Gatsby can be used for web applications. After listening to several of your podcasts you talk about Gatsby. It doesn't seem like you agree, and would go for next j s instead. In your opinion? Is that still the same? Or is the development at Gatsby really heading in the direction where it is? s s. G and web applications? Thanks for a great show and keep the good spirit going. I'm usually walking my dog at night listening to you. And people stare because I laugh out loud. Yeah, I do that which is a SSG - -68 -00:22:05,970 --> 00:22:24,270 -Wes Bos: means server side generated? Yes. So like that's a Gatsby, by default is a server side generated, meaning that there it's all generated beforehand and generated out to HTML files, which then are rehydrated and then picked up as a react application when you visit the website? - -69 -00:22:24,300 --> 00:24:17,850 -Scott Tolinski: Yes. So okay, so this is the question that we, we refer to when we were talking about answering some of that other stuff later on in the episode, because specifically, it really depends on what your needs are. Because with a static site, or an SSG, it's really difficult. If you have user accounts, you have to imagine that you can do server side render, like a customer account page for, you know, if you have 10,000 user accounts, you can have 10,000, statically generated pages for each of those experiences, not to mention, whatever you have the header being different. There's just not a whole lot of good ways for that to happen. So then what you end up having is dynamic bits. So not to say that you cannot do it with Gatsby because you absolutely can user account based sites, all that stuff is just going to be dynamic and not statically generated, where with a next gen site, the server can render that information because it has that cookie, when it's building the site. Great. It's building the site, when the user hits the site, that cookie is there for their authentication, whatever, they are able to verify that users authenticated. And then the server responds with the fully server rendered site with that user data. So you have to imagine that some of those things when you're getting to user accounts, you have to think about what you need to be present there for the server side generated, but and what you need to be dynamic. So that's typically why we say that we're very aware if you are like a pro Gatsby user, if you're like super Gatsby person, and you don't need user pages to be server side generated, you could by all means do any of that stuff with Gatsby, it's just all about, I think may be the right fit for each platform. And me personally, I probably reach for something like next GS for only those reasons, specifically. But at the end of the day, like I said, you can certainly do dynamic things and Gatsby like user accounts. - -70 -00:24:18,210 --> 00:27:13,530 -Wes Bos: Yeah, I think you hit the nail on the head. So next Jes by default is server rendered, meaning that when you visit a web page, that thing is generated quickly on the server and then served up to whoever is visiting the website. And Gatsby by default is statically generated meaning that it's all done at build time before you push it out to the website. And then you if you want anything to be dynamic, you have to do that on the client meaning like let's say you have a lot of people are talking about using Gatsby for like online stores. But like if there's something that's dynamic like stock, how much stock is left, and you want to display how many are left for a specific size You need to load the page and then go ahead and then fetch that data and then update the page. And that's where you sometimes get the little spinner on page load because it has to load entirely. And then it goes, Oh, I got to go figure out if there's any of these left, and it goes off and comes back. So for that reason, I don't think that Gatsby is a great they do say like, of course, you can do static websites with us. But it seems like it's sort of like after the fact, which for some websites is is totally fine. But I certainly would not reach for it that way. I think next, jazz is doing a great job because they've approached it in the opposite way, where you can, by default, everything is server generated. But now they have this idea of server side generated static pages. So if there are some pages in your application that want to be statically generated, then you just specify that when you're building the application, and at build time, they will they will generate though there's a Gatsby still way ahead. And in terms of what the static site generation looks like, but the certainly like they are getting a little bit closer to each other in what they can do. So it would be cool to see some sort of Gatsby server at some point where you get all the amazing benefits of Gatsby, like sometimes I'm almost tempted just to run Gatsby dev on a surfer or something like that, you know, but I'm not sure what the the approaches, they did just roll out this like Gatsby builds, which they're saying is 20 times faster build times, I'm not sure how they are doing that. Maybe they are running multiple processes at once. Like maybe they deploy it to a multi threaded server or something like that. And then they build multiple pages at once. That would be awesome for like, I know, some people run stores on Gatsby that have hundred thousand products or something like that. I can only imagine that the builds for that would be very slow. Because there's no they're they're working on this thing that gets called incremental builds. Meaning that if you just change one page, your build will be faster. And I think Netlify does that as well, actually. But yeah, so it's I probably wouldn't reach for it now. But I bet that will change in the future as well. - -71 -00:27:13,680 --> 00:27:16,140 -Scott Tolinski: Yeah, something to keep an eye on in the very least. - -72 -00:27:16,860 --> 00:27:56,820 -Wes Bos: Next question is from Chris F. Hey, Scott. And Wes. I hopped on the view train from jQuery land and I am loving next nuxt and grid some so knucks syncretism are the next and Gatsby of view land. Wherever I'm hearing good things about Gatsby, would you say that it is worth learning Gatsby and the whole react ecosystem over that matter over grid some? This is mostly a small medium ish side projects that connect to a headless CMS. Thanks. Oh, this is tough, because I don't maybe Scott will have something to say on this. But like, I don't know, if the feature set of grid some is parody with Gatsby Gatsby is a force right now. They've got tons of people, - -73 -00:27:57,150 --> 00:28:03,060 -Scott Tolinski: I would say not anymore. But at one point, I would say it was close. Yeah, yeah, definitely. So - -74 -00:28:03,060 --> 00:28:25,080 -Wes Bos: it's tough because like normally I'd say no, like pick your pick your stack and just go ahead and use that because it's so cool. But we're in a bit of an interesting spot where it's weird that Gatsby is like the thing, and it's only built in react. I wonder if they ever will like roll out like a view Gatsby or something like that. Dude, I - -75 -00:28:25,080 --> 00:29:12,480 -Scott Tolinski: I would just think they would take over grids. Oh, because if you go to grids, website, and they got some juice, man, I mean, it's definitely pretty sweet in to be honest. Yeah, they really solved some of the issues in a better way than Gatsby, like the image stuff is better in grid, some in my mind. So I think grid zone has some really great ideas. Personally, if you're a view fan, and you're comfortable with view and grid, some I wouldn't just jump ship just for Gatsby because goodsam gives you most of that good stuff. Not to mention, it's very fast. So I don't think you'd be gaining a whole lot. And you'd spend a lot of time having to invest in learning react. Not to mention that but learning the Gatsby way of doing things on top of that. I think you're getting just enough with with goodsam. Next in view. - -76 -00:29:12,960 --> 00:29:19,380 -Wes Bos: Interesting. A lot of these like Gatsby plugins, they're just node plugins. They're just web pack load wrapper - -77 -00:29:19,920 --> 00:29:33,210 -like that. It's very little of it as actually react specific. So I would assume that it would be easy to port them over if they've not already been been moved over. So yeah, I like that. I would say no, not probably not worth it. - -78 -00:29:33,240 --> 00:29:51,110 -Scott Tolinski: Yeah, you might even be frustrated. Like I said the like the image stuff is so much but aren't good. So I'm sorry, get Yeah, I love you. But yeah, yeah, cuz you instead of you just have a G hyphen, image, you pass in the path. And then if you give it something like a width, then it just generates that you don't have to do the whole query thing. - -79 -00:29:51,450 --> 00:29:56,010 -Wes Bos: So you're saying loading an image. You shouldn't have to write out what 40 lines of right? - -80 -00:29:56,580 --> 00:30:01,980 -Scott Tolinski: Yeah, right. Yes. I am saying that and got that one right, so shout out to them. Yeah, - -81 -00:30:01,980 --> 00:30:03,270 -Wes Bos: absolutely. - -82 -00:30:03,390 --> 00:30:12,510 -Scott Tolinski: Yeah. Okay, next question. This one's from Mateus. Hey guys. Huge congrats on the show. I've been listening since Episode Two. And it's fantastic. Thank you Mateus. My questions. - -83 -00:30:12,660 --> 00:30:15,720 -Wes Bos: So one wasn't very good anyway. So good job he was, it was - -84 -00:30:15,720 --> 00:31:09,840 -Scott Tolinski: fantastic. What are your thoughts on CSS preprocessors. Now a day with the advanced GNU C news features and CSS? Do you guys really think it is worthy to use all those? Well, the thing about CSS preprocessors, that you're not shipping them. It's like a preprocessor. Right. So there's really no harm, I still reach for sass, or auto prefix or, or post CSS, I still almost always reach for one of those if I'm writing CSS and that style components myself, because I just can't live without that sweet nesting. I love that nesting. You primarily use CSS variables now. But if I was building for a site that needed to support older versions of IE, I would be very distraught without having some sort of a variable system in my CSS, other features, I don't really use functions and stuff like that. But I think they're, they're definitely there's definitely still a place in the US for them to make your life easier within writing your CSS. - -85 -00:31:10,230 --> 00:32:08,880 -Wes Bos: Yet, it's just like, I think of them not as this like diff totally different way of writing CSS, like sass was, but I think of them as just making the future CSS now as much as possible. Yeah, some things you can't polyfill or, or transpile. But a lot of it you you can see us as color functions and whatever. So I think of like, there's this really good plugin now that is sort of like the babble of CSS is called post CSS preset and, and you just tell it, what browsers you're supporting, and it will figure out which things it needs to transpile and which things that doesn't need to. And then at a certain point, maybe you won't be transpiling anything. So that's sort of how I look at it. And I don't necessarily reach for sass or stylus all that much anymore. Just because I'm much more on the web standards, train, things have been moving really well for the last couple years. - -86 -00:32:09,240 --> 00:32:10,110 -Unknown: Yeah, totally. - -87 -00:32:10,110 --> 00:32:49,740 -Wes Bos: Next question we have here is from Justin Scott, can you talk a little bit about why you decided to switch back from Meteor after putting in all the effort to convert level up tuts the next? Yes, man. This is like the next jazz show. This is great. I'm about to start new full stack. And I was considering next and until I heard you switch back PS love both you guys. You're all fantastic. Thank you. Yes, I'm curious is this so Scott's spend all this time converting his platform and a lot? Yes, a lot of and then he was like, not stoked on it. And then it turns out Meteor got bought. And it's looking like that truck is moving again. So why didn't you like next, Jess for your platform? - -88 -00:32:49,860 --> 00:35:20,070 -Scott Tolinski: Okay, so let me preface this by saying I love next js. I really like it. I've worked fairly a lot in it over the past few months. And I really like Meteor as a platform. My reasons why I was getting off Meteor in the first place is because you could see the progression over so many years of less and less work being put into it, of no fault of the meteor community themselves, just the investment being put into Meteor was, you know, not happening. So I could see the writing on the wall that maybe this framework wasn't going to be around forever and wanting to think about moving over. So what I did is I maintained a meteor branch and an X JS branch side by side, which allowed me to do a lot of really cool things. And it was really just like, easy merge from one to the other. And so I was able to run these things side by side and really see them in action next to each other. And for the most part next JS worked really nicely. I use their API routes to power my graph qL server, which it didn't feel as nice as my Meteor one, because my Meteor one is just like, here's your standard server, where with API routes, you have to think about it a little bit differently serverless functions every single time they connect being a serverless function, as we talked about in the last video, it was just a little bit different, right? So those aspects were all fine. But the big rub for me came with how next .js establishes pages, routing in those aspects. I am not a fan of the routing, where you have one route page where every single route of your entire application is listed in a routes page, I would think of that as being like how it would have done it like react router three or something. But me personally, I'm more of a fan of nesting route. So I have my route set up. And then let's say on so like forward slash, whatever my app page would have a route that would be then take me to the tutorials layout route and then inside of tutorials layout, I would add several more routes. And then inside of there I have a couple more routes and I do that throughout the site, whether it's for admin or whatever. And largely react router was built for you to be able to do that. The problem is when you get into applications like next to J s that expect you to do everything on a folder basis, it gets a little messy because what you ended up creating is a bunch of wrappers. So instead of having nesting with a nesting with the nesting, you end up having to write, here's a rapper, he's a rapper, here's a rapper, all your components are rapping, whatever. And it was just a different way of doing things. So that's it, it wasn't worse, it was just different. - -89 -00:35:20,210 --> 00:35:34,880 -Wes Bos: What do you mean by a wrapper? So let's say you have forward slash posts, yes. And then you have Ford slash posts forward slash three, yeah. And then your Ford slash posts will show you all of your posts and Ford slash posts forward slash three, it would show you post number three, - -90 -00:35:35,250 --> 00:38:07,730 -Scott Tolinski: that's not a good context, because I wouldn't use a wrapper for that. So let's think about this, like you have, let's say you have an admin layout, right? Your admin layout includes the normal stuff, but it also includes an admin navigation and a different layout container, maybe, right? So you have that admin layout. So now each of your admin pages in the way I would have done that before is you have a component, that's your admin layout. And there's several routes inside of there, including the navigation. But with next GS, what you do is you'd have an admin layout component that would have a children Prop, and then any admin page would have to be wrapped in that admin layout component. And so what happens is, the rendering gets kind of messy, where every page is getting a full rerender. No matter what sort of like Gatsby, right? When you go to a new page, every page has a full new rerender, because that's just how the layout system works within Gatsby. And next, you have this one page, that's a wrapper, right? What is it next? Yes, I think it's like the underscore app that j s or something. Yeah, so you have one page or one component, that's essentially a wrapper. And those platforms were with mine, it was much more the React router way of doing things, deeply nested routes, and it became just less fun to work in, in, in my mind, way less organized, I was having just not I don't want to say issues. But I was had to take advantage of things like a wrapping components and render props more than I wanted to. At the end of the day, I ran them side by side, and I didn't see a huge benefit to one or the other. And that's when tiny bought Meteor. And it was going to be essentially a lot less work to get us fine with a meteor and the fact that Meteor was going to see new investment and see new growth, and see new modifications and things like that, then it became, in my mind, a good idea to just stay with what we have, rather than go through the headache of doing this migration, and then having to deal with the inevitable bugs and issues that are going to occur from doing such a major migration to a different platform. So it was definitely a sunk cost thing where I was holding on to the next JS branch for a little while saying like, you know what, I spent all this time on it, maybe I should keep it. But at the end of the day, Meteor has been seeing a ton of advancements, I'm really happy with where the community is going. And I'm a big fan of the platform. So the fact that future picture has been clarified for me, I'm more than happy to stay on Meteor now. So that's really just it. Ah, interesting. - -91 -00:38:07,920 --> 00:38:15,060 -Wes Bos: Not sure I totally understand all the nested routing stuff, I'd probably have to see an example. But that's good, too. Good to hear that. - -92 -00:38:15,300 --> 00:38:37,050 -Scott Tolinski: Yeah, it's hard to express because it all just comes on comes down to how you write applications. And this is the way that our site's been designed from day one. So if I was building a new application from day one here, I might start with next j. s. But the fact that I've already had this application written this Yeah, different way makes it very difficult for me to migrate there. - -93 -00:38:37,260 --> 00:41:17,820 -Wes Bos: Awesome. All right, let's talk about our next sponsor, which is Kyle Prince losed freelancing course, it's available at study web development, comm forward slash freelancing. So this is everything you need to master freelancing College has told me he just sold his 2,000th spot in this thing. So obviously, people are enjoying it. He's got all these pretty cool reviews of people who have taken it. So if you're thinking like, Okay, I'm a web developer, I'd like to make a little bit of extra cash, or I'd like to go totally freelance myself and go out on my own. This is a course that's going to help you through that teach you the the ins and outs of things that you need to know to be a freelance web developer. So what does it come with? Well, this this bundle comes with the freelancing and beyond ebook, the web design and beyond ebook, a bunch of templates, a new thing that was added as a CSS spice Chrome extension, which is pretty cool. I'm just taking a look at it. You can get it at CSS spice calm. It's just a sort of helpful editing and debugging tool that has come out. That's pretty nifty to be added in there. That web design and beyond is a new ebook that got added as well. There's a professional legal contract has been written by a commercial lawyer. So if you just need like a good contract that's been written by an actual lawyer that comes with it, so There's all kinds of stuff in here, questionnaires, checklists, SEO stuff, you get lifetime updates, which is really cool. I appreciate when people do that. I do that with my courses as well, where you just like you bought it once you get the new stuff that was added to it. So check it out study web development, comm forward slash freelancing. And enjoy. Thanks so much, Kyle, for sponsoring. Next question is from Brandon next. Is this another question about next? Yes. Hey, Weston Scott. I recently started an internship at my favorite one of my favorite tech companies where I'm using Ember, js and Ruby on Rails. I love the team. People are so nice, but I'm not super passionate about the stack. I wrote rather be on something like react and no jazz or express in my day to day coding, do you think it's worth staying in the position? And then we got like another question. That's almost the same question. So this is from my Michelle teams. I'm thinking about doing a boot camp that teaches Ruby on Rails for the back end, I hear a lot that Ruby, Ruby is a dying language. But at the same time, I know it's used by some big timers such as Airbnb and Shopify. Yeah, man, I once saw Toby who is like the creator of Shopify. He posted their like stats for the unit testing. And like they for every line of code, I think they have two lines of unit tests, which is nuts. Like, I think that is the only way you could have confidence such a huge codebase anyways, - -94 -00:41:17,820 --> 00:41:18,420 -Unknown: real Could - -95 -00:41:18,600 --> 00:42:50,670 -Wes Bos: you please explain the relevance of Ruby and Ruby on Rails? We'll have in 2020 going forward, do you think it's worth learning? For new developers? Thank you, by the way, listen to podcasts. Good. So we see questions like this a lot where something's hot for a while. And then web developers have short attention span, so something else becomes hot. And people think that that other thing is not hot anymore, and is deprecated. And it's old. And this is not all that useful. So I think that a lot of people place too much weight on the tech stack, when the reality is this stuff will always be changing. And you as a developer, need to use the tools that you're like, the tools are obviously important. We've talked about them all this show. But these are all good tools that you're talking about. Ember, Ruby, on rails, these are some of the like, I think some of the best tools in our industry for creating web apps, and websites. So there's absolutely nothing wrong with it. The fact that we don't talk about these things on our podcast, or you don't necessarily hear about them all, that often doesn't mean that they're not very good. It's just that there's different hotness in the industry right now. It's probably not worth quitting your job, unless there's other things that that were hurting. But I don't think a tech stack is very rarely, I think, a chance to quit your job, especially something that is so modern, like Ember, and Ruby on Rails, you're not talking like, this is a 40 year old cake, PHP install that no one has wanted to update forever. And it's just a nightmare. Sounds like it's a decent stack. Yeah, - -96 -00:42:50,790 --> 00:43:13,260 -Scott Tolinski: yeah, rails, pow power, so many of the most popular sites on the internet still. And I would still consider rails to be an exceedingly modern platform overall, and a great platform. Every time I worked on rails, I had a really nice time using it. So I think you beginning a lot of good learning building sites with Ruby on Rails, I don't think you need to worry too much about that. - -97 -00:43:13,590 --> 00:43:43,560 -Wes Bos: Yeah, I was I was I'm writing a scraper for my bank the other day, just because like I, I wanted to, like I wanted to see over time and I wanted to be able to chart my daily up and monthly ups and downs of the investments that we have. Yeah, my bank didn't like have that. So I wrote a scraper that would log in for me and download a CSV of the data. And then I have that running every day. And then what I'm able to do is go back and now I have that the date or time anyways. - -98 -00:43:43,560 --> 00:43:52,860 -Scott Tolinski: Have you seen personal capital? Does that work in Canada? No, nothing works in Canada. Okay. Personal capitals, like does exactly that. That's fantastic. Oh, really? Yeah. It's so good. Yeah, - -99 -00:43:52,860 --> 00:45:02,580 -Wes Bos: very good. No, nothing works in Canada. So we don't have anything good here. It's all awful. So but it's okay. I'm a developer, I can fix my own problems. So I was just like looking through how it how it's working and trying to figure out like, what are the API endpoints to login? And what are the API endpoints to download this data. And I was like, Oh, this thing is built in Angular and Java spring. And it was like the most wicked app ever. Like, it uses JW T. And it's super fast. The interface is super responsive. And I was like, I was just like, using this app that they had built it. They just rolled out like they had like an old one for a long time. But I was like, this is where this is on to tech, two pieces of tech, Java and angular that people probably wouldn't say are hot, but this is an awesome experience using this thing. And also the fact that I was able to, like puppet it in, like be able to scrape it and download the endpoints in like a like a half an hour means that it was obviously built with single page application of mine. So just personal antidote there. Yeah. Thanks. anecdote, anecdote. - -100 -00:45:02,580 --> 00:45:50,610 -Scott Tolinski: Remember when we talked at in about missive in missive is an email client we both use and that's built on backbone in this fantastic script. Yeah. So shout out shout out to missive. All right. Next question is from a best wass best wasp asks, What's the deal with headless CMS and CMS is? I hear you there's talk about them all the time Sanity, Keystone Prisma, I'm not sure what they're good for. To me, it just seems like a UI to my database. But isn't that what my application is? It seems like it would be easier to have my front end, talk to my back end to talk to the database, rather than learning how each CMS wants to do things. Am I missing the point, okay, you are missing the point. Because what it is, is it makes all that super easy, it makes it so you don't have to write, - -101 -00:45:51,060 --> 00:45:54,090 -Wes Bos: tried to code a form that takes data, it sucks, - -102 -00:45:54,120 --> 00:46:36,210 -Scott Tolinski: I have my whole level of tutorials whole admin dashboard is that I mean, it's all custom forms and all that stuff. And every single time I create a new anything, I have to create that table, I got to create forms, I got to create all the queries and mutations, I have to do all that myself. And it would be so easy if a CMS could do that for you. Really, the benefits of using a CMS or a back end is that it just takes care of all that stuff. The admin forms the validations, the versioning, the plugins, organization, and it does it all in the spiffy interface that your clients will be able to actually understand rather than some janky form that you threw together. - -103 -00:46:36,690 --> 00:46:55,140 -Wes Bos: Yeah, not to mention the entire API layer, whether that's a REST API, or graph, qL layer or, or anything like that, like that, that takes a lot of work as well, where these things sort of just get you up and running. So headless CMS makes a lot of sense, especially in a website where you're just have data. - -104 -00:46:55,320 --> 00:47:07,560 -Scott Tolinski: Well, it's it's just like saying, it's like saying, well, what's the version? What's the deal with using react? Could I just write the framework myself? Yeah, you could? You could, but at the same time, yeah. - -105 -00:47:07,680 --> 00:48:14,280 -Wes Bos: And also like, the, the other. The other point that I have here is that like a headless CMS, sort of decouples where your data lives and where your data is being displayed. So like, for example, one of I talked to the folks at Sanity, and one of their biggest customers is Tim Hortons and Burger King. There's this company that owns the mall. And I'm not sure if I was supposed to say that or not, but whatever. I'm gonna anyways, like that data, like you think of any company that has a bunch of data. Where is that data being pulled into? Well, by the iPhone app, the Android app, pulled into the the boards, when you're ordering and you're looking at the menu, it's pulling being pulled into there, obviously, on the website, it's being pulled in, in store kiosks. Like a lot of times people have data that needs to be pulled in to seven or eight different places. And having a sort of decoupled CMS where that data lives is important. And it's not just tied to a website. And it's not just tied to as a single application, someone's using Word. A next question from JC is this RJC? - -106 -00:48:14,340 --> 00:48:19,230 -Scott Tolinski: I don't know that I was. I feel like JC JC JC would put his last name but I'm not sure. - -107 -00:48:19,260 --> 00:49:07,050 -Wes Bos: Yeah. Yeah, I feel like he would do that. What does smell need for each of you to use it instead of react in personal and feature developments? Oh, that's a good question. So I've never tried spelt. So I don't know. But I am pretty on to react because of the momentum it has in our industry, both in terms of like, what do people want for me in terms of training courses, as well as like, there's so many resources out there for using react JS like I just look at it like something like Express I always reach for Express. Why? Because expresses like the dominant one. And there's so many Reese's resources out there for it. Is there probably something better out there? Probably. But I'm pretty happy with it. Oh, by you. - -108 -00:49:07,320 --> 00:50:20,880 -Scott Tolinski: Yeah, I mean for me for to use spelled on one of my own projects. What does it have to do? Nothing. It has to do nothing different because I love spelt. I think it's fantastic. Yeah, I want to I'm gonna rewrite my own website and felt sorry, hashtag Sorry, I'm no I'm very, very excited to use Felton more things. In fact, I'm planning on doing a new spell course for level up that I'm thinking about right now with Meteor because I saw a repo like two days ago, that was an Apollo API with Meteor and spelt, and it was like maybe the most elegant, smallest codebase I've seen to do some very powerful stuff. So the amount of things you can get up and running really quickly with that stack and have it be beautiful and you know, easy to read. Nothing man I love I love spelt. It's fantastic. So I would check it out. I think It's a great thing too. I mean, like your reasons are totally valid. And I totally agree with you that the the industry momentum is certainly in reacts favor and will most likely stay that way. I can't imagine the entire community hopping on the sell train like that. But Phelps fantastic platform, and it's not going to go anywhere. So I think it's a, it'd be it'd be nice to work in. - -109 -00:50:20,910 --> 00:50:29,250 -Wes Bos: Yeah. Yeah. I always get the feeling. Sometimes people think that I don't like things because they don't use them. And there's just too much awesome in the world - -110 -00:50:29,280 --> 00:50:30,330 -Scott Tolinski: these days. Yeah, - -111 -00:50:30,360 --> 00:50:37,980 -Wes Bos: to do everything. And it's not like I don't like swell. It's just that I've not used it before. And that's all I have. Yeah. Okay. - -112 -00:50:37,980 --> 00:51:53,490 -Scott Tolinski: Next question is from Jonathan s. I freelance on the side as well as have a nine to five. The other dev I work with, mentioned that he'd helped if I ever need to work on a client project. What are your thoughts on doing freelance work with someone you work with at your job? Okay, well, is your job at agency because that is a little hairy there. If you're, you know, skimming some projects on the side with some agency members that said, I've done it myself, and I don't really think it's a huge problem. I think it's totally valid. I think, you know, that depends on how the work came about and what your role is at the agency, because some agencies are small enough that every single person is expected to be hunting for projects. And if a project comes into you, it would be ethical for you to send that project on to your managers. If that is the climate of the company. If you start skinning stuff on the side here, then that might get a little bit interesting with interpersonal relationships that your business if they find out that said, if it's a larger agency, or the expectation is that many people are doing freelance work on the side, and that you can hunt for your own projects. I see no problem with that. But it is I think it's a matter of the temperature and within your own agency and what things are like there. - -113 -00:51:53,790 --> 00:51:57,420 -Wes Bos: Yeah, just don't get sued. Make sure everything is right. It's okay. - -114 -00:51:57,450 --> 00:52:00,810 -Scott Tolinski: Yes. That's another legal aspect of it as well. - -115 -00:52:01,380 --> 00:52:29,670 -Wes Bos: Next question from Bryce boys. My team is currently in the design phase of a rewrite of our biggest product ever, we are switching from a Perl back end to node. But for some reason, are technically decided on happy for the node framework. I spent a little time with happy and it seems cool, but I'm not sure about its longevity, when compared to more established frameworks like Express, how do you feel about happy? And should I push it so happy has been around for a while I became out what maybe like six years ago, I'm - -116 -00:52:29,670 --> 00:52:31,110 -Scott Tolinski: trying to look the right now. Yeah, - -117 -00:52:31,230 --> 00:53:37,950 -Wes Bos: the thing with happy was that express was always like a server rendered framework. And then when building rest API's came around these frameworks, like happy and Cola, sort of came around and said, like, hey, it's a little easier to build rest API's with these things. And that's not that's not all they do. But Express was very much like a server rendered engine at the start. So nothing wrong, I would definitely say like, Yeah, that would be weird if they took some, like, brand new framework out there. But happy and I'm gonna loop koa in with this as well are certainly fantastic options for it. I think the only thing you might lose out on is there's not as much as many like weird, obscure middlewares for it as Express has. But if you are building like a huge product, you probably would build those middlewares yourself. So I don't think it's all that big of a deal. And I would be totally I know, I just said I would always pick Express. But if I were to let been, like thrown into a project where it uses happy, I would be very happy. - -118 -00:53:38,100 --> 00:54:27,360 -Scott Tolinski: Yeah, here's what here's the go you Okay, here's what I here's what I like about happy. Uh, I haven't used it myself personally. But just looking at their GitHub, it will the last commit was five days ago. There's 12,000 stars on it. There is nine issues and two pull requests. That is fantastic. How many big projects do you go to? That ended up having like 100 issues and you know, 20 pull requests. And that, to me is an interesting sign of, of how the the development is going. So I think happy seems to be on it. I mean, I have not used it personally. But I've heard good things. And it seems like it's really nice. So yeah, no, I would have no issue with somebody picking happy over Express. I think, from what I've read, it says Express is closer to node and less opinionated. So maybe happy does some stuff for you that express doesn't, but seems like a good choice either way. - -119 -00:54:27,720 --> 00:55:37,860 -Wes Bos: Yeah. All right. One more. Last question is from Andrew waffle. I'm a dev that recently joined an agency for the first time what hot tips do you have for living in Devon in the agency life, especially around time management time estimation and dealing with clients peace? Oh, this is this is a good one. So I did quite a bit of freelance work with agencies. And I think my tip would be you have to aggressively manage your own time because project managers the certainly lots of good ones out there. But there's, in my experience, I've encountered much more super stressed out super tight timelines, from project managers that want you to get everything done much faster and quicker. And things like phone calls and emails and whatever that will just eat up your actual time. So I would very clearly just say to a lot of my clients, like, Look, I can't, I'm not going to reply to these emails, I'm trying to get work done. And like, it's important that you communicate with them. But at the end of the day, you're the developer. And if you need to get stuff done on time, you need to aggressively rally against phone calls and meetings. - -120 -00:55:37,980 --> 00:57:15,420 -Scott Tolinski: Yeah, in you know, it depends on the agency size, it like, really, to me personally depends on the size, because if it's a smaller agency, you're going to be expected to interact with clients a lot more. We didn't have project managers at my first agency, specifically, because there was designers, developers, and like the business manager, and then the marketing person. So like, we didn't have project managers checking in. So you were your own project manager, you went to all the meetings, you sent out all the emails, you did all the contacts. And that's something you need to be on top of if that is your role, because you can always push back on that stuff if nobody else is going to be doing it. That said, if you do have project managers, and it's a little bit larger an agency, then you know, you might be expected to not interact with clients very often. And that, to me is a sweet spot for being able to get a lot of dev done. That said, you do need some of that experience, I became a much better I don't want to say salesperson because it's Sir, I wasn't doing any sales. But I became a much better speaker talking to clients and expressing why I made these choices. And here's the stack and what does that mean for you? And what are the technical aspects of these things? And what do you need to know without giving you too much? And how does this person like? Like what if I was able to interact with the client a little bit more I was able to better craft to the back end CMS for whatever I was doing for them. So it really depends on the agency side, I would recommend upping your your communication skills overall are going to be like invest time becoming a better communicator via email calendar to do lists, whatever make all of those expectations known and it will help you out greatly in the agency life. - -121 -00:57:15,780 --> 00:57:53,190 -Wes Bos: All right, let's move on to some sick pics now. I'm going to pick a blog post from Matt Stouffer. He put together this massive i think is like 1000 word blog post about how to get really good video and audio from like if you're doing live streaming or videos or even like even just want to have like a good quality webcam. And he went through like both all of the like budgets. So if you only have 100 bucks to spend or if you've got like an old SLR, this is what Scott does. You've got the L Elgato. 4k HDMI input. Yeah, - -122 -00:57:53,190 --> 00:57:56,400 -Scott Tolinski: but it's not an old SLR. Okay, it's a Sony mirrorless - -123 -00:57:56,400 --> 00:58:00,300 -Wes Bos: Yeah. Scott's got it. $2,000 webcam. - -124 -00:58:00,450 --> 00:58:03,960 -Scott Tolinski: $3,000 webcam. Thank you very much use me. Yes. - -125 -00:58:04,560 --> 00:58:52,230 -Wes Bos: Geez. So there's there's that I took my wife's old camera and hooked it up and looks freakin amazing. And it's great. He just like went over like the differences and pictures of lighting and not lighting and things like that. And it's all just in one spot. So if you ever want to know, how do I get better? Even I think even if you're just like a remote worker, I think having like a good quality audio and webcam makes such a difference. So I've been on so many awful conference calls with people where they've just got their Android earbuds in and they're sitting in like a glass box or something like that. And audio is just awful. Right? So this is cool. Check it out. It's at Matt Stouffer, ma TT s t au ff er.com. Go to his blog. It'll be there. I'll put a link in the show notes as well. Cool. - -126 -00:58:52,290 --> 01:00:40,350 -Scott Tolinski: I have a book, audio book that I'm going to pick here. And this is the book called caffeine. How caffeine created the modern world by Michael Pollan. Now this author is really super good. If you've read any of his other books. I've really enjoyed some of his work. However, this this book, I am not good with words. I'm just gonna say that I'm a you know, I can talk on the podcast, but I'm not a good writer, and I'm certainly not an elegant wordsmith. This book is crafted so dang good. It's crafted good. Yeah. No, I mean, this book is fantastic. The way he talks about the history of caffeine, the way he talks about, you know, he, he takes sort of like an idea like, Hmm, well, this caffeine, how could it you know, how has it shaped us as human beings and how are we addicted to it and it makes sort of no judgments upon you know, he really takes the stance of my opinion, like the curious person without being sort of like overbearing, or just in general judgy of people who consume a lot of Caffeine such as myself, and it really this book is not its intention isn't to make you drink less coffee or to consume less caffeine, but it is there to make you consider it. And so I had a great time listening to this book, it was two minutes. If you have an audible subscription, it's free. I breezed through this thing at two x. And I really, really enjoyed it. So if you're an audible subscriber, get this If not, I'm so sorry, maybe find it some other way. I'm not advocating for anything, but maybe I really enjoyed this book. And if you consume a lot of caffeine like I do, then it's definitely a worthwhile listen. And if you're a history person, it's a very worthwhile Listen, a lot of good history stuff in here. - -127 -01:00:40,530 --> 01:01:02,100 -Wes Bos: Sweet. shamelessly plug, my beginner JavaScript course go to beginner JavaScript calm. It's a fun exercise heavy approach to learning modern JavaScript from scratch. It's beginner friendly, if you're intermediate, it'll help you brush up fill in the holes here or there. You just go through it a lot faster than if you were a beginner, check it out. Use the coupon code syntax for 10 bucks off, beginner javascript.com - -128 -01:01:02,280 --> 01:01:47,400 -Scott Tolinski: word cool. I'm going to plug my latest course that's going to be out on Leap Day, February 29. It's going to be on framer motion, creating really awesome interfaces, animations with framer motion, we build some really great stuff. The cool thing about this course is we teach you you know, topic topic topic. And then we do a couple of projects. So we do a modal accordion topic topic topic. Then we teach you a slide and menu topic topic. And then we do something practical. So everything is all based on not only teaching you the skills, but really building practical animations that you're going to build in your application. If you want practical animations for react, check it out at level up tutorials.com forward slash pro sign up to become a levelup Pro, save 25% if you sign up for the year. - -129 -01:01:47,790 --> 01:01:51,810 -Wes Bos: All right. That's it. Thanks for tuning in. We'll catch you on Monday. - -130 -01:01:54,540 --> 01:02:04,320 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax227.srt b/transcripts/Syntax227.srt deleted file mode 100644 index c20c767e2..000000000 --- a/transcripts/Syntax227.srt +++ /dev/null @@ -1,120 +0,0 @@ -1 -00:00:00,360 --> 00:00:21,660 -Unknown: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott L. - -2 -00:00:23,580 --> 00:00:24,450 -Totally ski. - -3 -00:00:25,920 --> 00:00:27,450 -Scott Tolinski: Oh, - -4 -00:00:27,450 --> 00:00:52,980 -Wes Bos: Welcome to syntax in this Monday hasty trick, we're going to be talking about container queries, element queries. Well, we'll talk a little bit about what the heck they are and why they might be useful what the current status of them and why it's not as easy of a problem as we would like it to be. My name is Scotland's gay. I'm a developer from Denver, Colorado and with me, as always, is the Wes Bos. - -5 -00:00:53,010 --> 00:00:54,450 -Sup everybody? - -6 -00:00:54,600 --> 00:00:56,400 -Scott Tolinski: Sup? Sup? Sup? Sup? Sup, Wes. - -7 -00:00:57,150 --> 00:01:14,580 -Wes Bos: Not too much. just excited to learn about element queries. We've complained about this enough on the show, like, Where is element queries? Yeah. And then this blog post came out, sort of detailing it, it made me feel bad for complaining. Yeah, I think that happens often in web development, you don't necessarily know what's going on. - -8 -00:01:14,730 --> 00:01:31,530 -Yeah, part of the problem is we see the problem, right, this thing that we want to fix, but we like don't immediately see all the people working hard to try to fix their problem. And it's too easy to just be like, I don't want this thing. And then the people that are working on are probably super annoyed. with, like, so. - -9 -00:01:31,860 --> 00:02:03,180 -Yeah, the same thing happened with node modules. Like you've no idea like for for us, it's just like, just add node modules, just just press the button that says Add them and add them. And then like the people working on are like, You have no idea how complex this is. Behind the scenes. It's so easy, being a complainer about stuff like that. But the one thing you don't want is complainer's about your tools or projects and that's why you're gonna want to go ahead and use an iron exception train - -10 -00:02:03,900 --> 00:03:34,080 -in a high quality Scott thank you I'm literally when I got it, I got it in this I'm running a no sleep here. But to finish that sentence, it would be century a century.io, you're gonna want to sign up using the coupon code tasty treat in your bit, two months for free. Now what is century well century is the error and Exception Handling tool that basically allows you to see handle your errors with just about any platform or service that you're running in seriously, Sentry works with everything from any type of back end language that you're possibly working with to front end projects, serverless and more. All sorts of very famous companies trust Sentry with their bugs. And, you know, I don't trust a lot of people with my bugs. So if I'm going to trust anybody with bugs, it's going to be century, they earned Airbnb, Disney, PayPal, Microsoft, Dropbox, Mozilla square, can you name bigger companies than these, and they are all love it Sentry. So you want to check out sentry@sentry.io again, use the coupon code, tasty treat all lowercase all one word. And, again, if you use it, they support it. Apple, Android, GitHub. I don't know, just start naming technology. I'm just going to start technology random generator and Sentry is going to support it. So let's get let's get into this container queries or element queries. Now I've always I've always personally called them element queries. But it seems like container queries might be the more popular term. Have you always gone one way or the other with that one? - -11 -00:03:34,170 --> 00:04:25,380 -Yeah, I'm not sure what I've been saying. But I think container queries makes more sense, because you want to do something when the container is a certain size, I guess elements is the same thing, though, you want to do something when the element is a specific size. Anyways, it's kind of the same idea is that we have media queries, which is based on the viewport size, but we don't have container queries, which means that you could have a component and that component could live anywhere on your website. And depending on how wide or high or any other aspects of it, generally, its width and height, you're going to be worried about, depending on the width and height that that thing fills out, then style it a little bit differently. Mm hmm. And there's some movement in this specific even around JavaScript. We've got resize observer, so - -12 -00:04:25,500 --> 00:04:31,530 -yeah, the Oh, yeah. We'll talk about that. We are going to talk all about it. So where are we at right now with the Scott? - -13 -00:04:31,710 --> 00:09:58,170 -Yeah, so Okay, so I think the biggest thing for you to do if you are interested in more information about this beyond this particular episode is to peep this blog post by Brian Cordell. And it's really just an overview of exactly what's been happening. And we'll try to do essentially an outline of this blog post in this episode. So if you're looking for more details beyond what we're saying here, by all means, read this episode. So really, again, Like you mentioned, we have these, you know, this this issue, right, we've been promised that we will get our Lego pieces, right, our Lego pieces, the things we just plug in, and they just work. But I, for instance, let's here's that here's a good one, right? I have my grid of cards on my website, right. And when the browser is wide, that grid of cards breaks into three columns of cards, right? But those cards individually can change in size based in three columns. But then when you go down a little bit shorter, it goes into two columns. And then in mobile, it's one column. But those cards should look differently based on their own width and not the browser viewport width. Because if you do the media query and say, Okay, at this point, the card text should be this size, well, you'll have a grid of three cards up in the font size will be huge. And then when you have a two card grid, font size will be small, or whatever. So really, these container queries are going to fulfill the end of the promise of having Lego pieces that we can just drop in and have them adjust accordingly to whether or not it is a full width or a half width, or whatever it takes up. So that's really why I want them personally, there's a lot of things that I would use this for. And I do have an alternate solution in place of which we'll talk about. So that's why I want them but let's talk about sort of some of the problems that the team and the people that are working on this problem are facing, because that's really why we don't have to admit is because of all of the problems, right. So what kind of problems exist? Well, as developers, we mentioned in the very first part of this, the show that like we can just declare, we want this thing, right. And in fact, it's so easy to say, we should just have a media query. But have it be an element query. That's it. Okay. Now, it just functions based on the element rather than the viewport. And so the blog post mentions, it's like most of these discussions start off with talking about how do we write them. And that's sort of the wrong place to start for various reasons, because it totally ignores so many of these gigantic, gigantic problems with starting from that by just saying, Oh, this is how it should just work, right. But in reality, we need to look at the way CSS already works. And the way that the paint models already work before coming up with a solution that just drops in. So they were saying that many of the initial, or even just ideas that they come up with, in general, require some major fundamental changes to how browser engines work. And that's not really practical to just say, hey, all the browser's, we need to have some brand new way that you render CSS, and testing that amongst browsers. Having that going in keeping it all performant, at the end of the day is going to be way too much of a thing. To be able to just say, hey, just do it. Right. That will take several years of testing, trying and all sorts of things. So I found this really interesting quote, throughout this blog post this is this is from, like I mentioned, this whole whole blog post is Brian Cordell. So this is a quote from him. It says, Did you know for example, that there are multiple mini year long efforts with huge investments underway already aiming at unlocking many new things in CSS. There are, and I don't mean Houdini. So what he's saying is that on top of all of these other changes that are going on, and that they're they're really working to solve some huge problems in CSS. Well, tackling another one of these things, since asking a whole new aspect of the engine to be changed, is kind of a huge, monumental task on top of all of the other stuff that's being worked on within CSS. So what actually has been happening? Because it seems like the problems are just really large, right, having to write a whole new engines, sort of a lot of problems, right. So what has been happening, if you read this blog post, you will see the word lots of discussions happen. You'll see lots of discussions hundreds of times in this post. That's really what it is discussions and dead ends. Another quote here is how do we make this into more solvable problems? And how do we actually make some progress and mitigate risk, take a step and actually get something to developers? Right now, they have been doing lots of experiments, lots of trying things. And it seems like there's just these huge, big problems. So of which there are two sort of interesting paths that we have right now that aren't element queries themselves, or container queries themselves, but certainly are things that we can use in the meantime. Now one of these I don't have any experience with one of which I have quite a bit of experience with so they mentioned containment, and then resize observer. - -14 -00:09:58,320 --> 00:10:07,560 -Yeah, I saw blog posts on the containment the other day, and I thought it was pretty interesting. But I haven't dug too deep into it. I think we have that on the docket for an entire show. Yeah, I - -15 -00:10:07,560 --> 00:10:42,990 -think that's a good idea to do an episode entirely on containment and resize observer, just to talk about how we can use them. I linked in here a, a WebKit blog post about using resize observer specifically, as a way to basically write element queries. And I think that's a nice little interesting read through. And one interesting note, as they said, that resize observer was inter implemented in browsers in all browsers in about two years. That's pretty darn fast, right? Two years to get a feature like that in. - -16 -00:10:43,290 --> 00:11:17,040 -Yeah, and that's not just like functionality that you can add. It's not like adding a polyfill to new array method, which you can just pop in, like this was fundamental low level stuff, where that feature was not, you couldn't do that beforehand, unless you were to just like continually pull or, or run a set timeout. So this had to have some lower level stuff, where the I'm assuming what happened was the paint engine would then bubble up information about what changed to higher level JavaScript API's. Yeah, - -17 -00:11:17,400 --> 00:11:26,430 -it's very interesting. If you've never used resize a server, it basically it observes for when the window resizes and updates, - -18 -00:11:26,580 --> 00:12:58,860 -it's like a you listen, instead of listening for clicks, you can kind of Listen, I'm using air quotes here. Yeah, listen for not listen to observe when things change sighs and then when that happens, it triggers a callback, which gives you access to the elements that have all of them, actually, it'll tell you which ones have changed and not. And this one right now, for me is probably the most useful in terms of actually getting container and element queries working, although I did find some posts CSS plugin, which we can talk about later, that I haven't used before. So where is all this progress gone? Well, again, lots of discussions, discussions with goog, Mozilla, apple, smart people. And there's basically just a ton of discussions happening about the right ways, a lot of big ideas, some of which could go somewhere, some of which could go nowhere. And there has been no eggs, there's been nothing yet that has been implemented that anyone can use. They did host a neat little snippet here of one proposed idea. And this proposed idea uses something like a switch function that could be used, instead of what you would think of as like a normal media query, what it looks like is a switch. And then you'd have several properties of which would have a parameter saying the size it being greater than this, then have the value be this, the size, you could almost look at as like a straight up JavaScript switch statement, obviously, with slightly different syntax. What do you how do you feel about this one? - -19 -00:12:59,760 --> 00:14:44,460 -Um, it's tough, because my initial reaction to new things to CSS is always just like, oh, but like, CSS variables. Everybody saw that? Oh, that's awful. And then like, no one's complaining about that anymore. It's fine. You know, it works great. The syntax is a bit a bit funky. But they had obviously keep it backwards compatible. They couldn't just add, like $1 sign or something like that, which would have been cool. So this switch syntax looks, I think it looks kind of cool. I was assuming that it would get really big real quick, depending on what you're trying to do. But it looks fairly similar to, to media queries, I like that there. So the way that it works is that you have like basically a switch function. And then inside of each line of that switch function will be available in line size is greater than 1024, then the grid columns will be this. And then if the available in line size is greater than 400, then it's kind of like a, like a switch statement or an if statement in your JavaScript code. It also is using inline in size, instead of width and height, which remember, we did a show on that where they're switching Oh, by the way, like a little bit of a side, have you coded anything with the inline and block instead of width and height? I have not. I have not have you? I try it? Yeah, I did that uses dot tech on that. And then I switched it because of why did I switch it? I think it was just I totally forget, I think it might have been browser support and I didn't want to transpile it just didn't want to deal with it. Or it was just too hard to get my whole mindset over to like this is that so - -20 -00:14:46,650 --> 00:15:14,280 -and I had a couple of people opening issues and they didn't know same with gap. I've been starting to use gap instead of grid gap because gap will becoming a Flexbox as well. And then I get all these issues people opening it up and like you misspelled it I'm like, no. Anyways, go ahead. Yeah. So I should note that this idea it says, there's a note here that it's sprang from an idea from Google's Ian Kilpatrick. And - -21 -00:15:14,280 --> 00:16:20,310 -there's a neat little note that says, I am constantly impressed by Ian's ability to listen, pull the right threads help guide the big ship and coordinate progress on even long visions that enable us to exceed current problem limits, you probably don't hear a lot about him, but the web is probably a lot better for his effort. So shout out to Ian, if you're listening. Hear, Ian, you seem like the man. I do not know you personally. But I'd never heard of Ian's name before. And I thought that was a really interesting quote about him. But okay, so I thought this is this is another little interesting topic sort of about some of the problems here. And it says that a lot of the problems with the existing ideas, as they have to loop back through extensive phases potentially, several times making it seemingly impossible to keep the CSS rendering in the same frame. So really, a lot of the problems that we're running into are going to be perf, based right with how these things will work, or just, they want to, like, at the end of the day, if you're introducing something into the browser, right, it has to be really buttoned up, you know, - -22 -00:16:20,370 --> 00:17:42,690 -yeah, we sometimes have this problem in CSS Grid as well, where like, the problem they're referring to is that if you have, let's say, you have a div that is 500 pixels wide. And then you've got something inside of that is based on the container query, like let's say, a header. And then inside the header, you have maybe like an h2 that has a container query on it, if the outer div changes, that will then trigger a change on the thing inside of it, which then triggers another thing inside of it. But that becomes a problem when you are sizing the width of the outer div based on the insides. And you can get into this sort of non stop loop where one thing triggers another thing, which then changes its size, which then triggers another thing, which then triggers the size, and you just have this infinite loop of things triggering changes on other things. And that is an extremely hard problem to solve. Because at what point do you stop this thing? Right? Right? It happens with CSS Grid as well, if you have an image that's not loaded, and if the column of that is auto, and the image then loads, but then like the other stuff is based on free space, then that triggers a reload. Imagine how you throw container queries in there, as well, like who, what a hard thing to fix, - -23 -00:17:42,900 --> 00:18:52,020 -imagine having to solve these problems, and not just getting to wonder where they where the progress is on them. I feel it's all fantastic. To me, you know, just as like an outside observer, I love any sort of progress on this. So I, you know, whatever the solution ends up being if it ends up being media query, like syntax, or a switch statement, or one thing they mentioned here is maybe that the answer isn't necessarily that we have to throw this all in CSS, but there could be some sort of like hybrid JS solution, based on resize observer and working with resize observer to make things or, you know, explicitly geared towards element queries. So I don't know I'm interested in this. If you are interested in this as well, let us know what your thoughts on container element queries. If you're using any sort of specific plugin or package or technique for dealing with them. Right now, I want to know what you're using. I am using a specific technique myself using styled components. But I also found this container query package that is a post CSS package. Have you seen this West? Have you seen this? Yeah, I've seen this. I just just looked it up when you said it earlier. And - -24 -00:18:52,020 --> 00:18:53,430 -I'm just wondering, like, how - -25 -00:18:53,460 --> 00:19:27,900 -does it work? It's obviously needs a little bit of JavaScript to run on the page. Yeah, in the past, I've done it. It's just run a resize observer and add and remove classes or pipe in the width into a styled component, which which can then render the thing based on the width. But not this, how does this work? I don't know. I don't know how it works. I've never seen it until right now. Since I've been installed components land, I've sort of gotten off the post CSS train a little bit in terms of what exists and what's out there. Yeah, a lot of that stuff happens for you under the hood. So you don't necessarily have to worry too much about it. - -26 -00:19:28,020 --> 00:21:26,130 -Yeah, let's see, and JavaScript runtime. And it looks like this does work with some sort of CSS and j s. I have no idea because I haven't used post CSS within styled components. But this looks really interesting. It seems like there's movement on it. Last commit was January 27. Oh, 2019, not 2020. Okay, so maybe less movement on it than I was making when I initially looked at it, but it looks like it is very usable. The solution that I've gone with is actually a modified version of this styled container query plugin that I have also linked in the show notes. So this is based on styled components, and it is for use with styled components. But if you use the motion, I can't imagine it would be too hard to rewrite this package. In fact, I took a comment in the issue queue of here and rewrote my own version of this package myself to fit my own needs, right, because I have very, very specific needs with mine. And this package could have been made a little bit slimmer. And so I slimmed it down. And then I just included in my own project, and I've been thinking about maybe even open sourcing that I didn't write most of the code, I copied it and then tweak it. But you know, these packages aren't interested in changing their project up, I might post my own slimmer version of this thing. But for the most part, I found this approach to be really nice, where you have basically the app or the ampersand colon container, and the do serve the min width, max width, and you can do whatever you want. Now, I should say that I did run into some problems with this, because like a total dummy, I was adjusting the height inside of my container query. Yeah. And because I was changing the height on it, it was running into some perf issues re firing our resize observer, and when you have that, maybe about, you know, 2025 components doing that all at once. Definitely some CPU hit. So I've since wised up to modifying the height in those kinds of situations. - -27 -00:21:27,420 --> 00:22:50,700 -Oh, yeah. Yeah, see, that's the thing is like, like, I'm glad you noticed that but some people would just like CSS just needs to see and be able to use it and in most cases, it should work fine. Right. Right. And that's really the the crux of this issue is how do you get something that works with what we can do in CSS into so in a way that isn't going to work? Everybody's browsers cool is Barca legit word. I don't know is that uh, oh, yeah. Okay, for for cuz I said it the other day, actually. And my wife is like, what's bark? bark on urban dictionary is it's actually in the actual dictionary to obstruct. Really? Yeah, it's in the actual Webster dictionary. Definition of bark. The sound dogs and puppers make Nago barked a lot at the cutter. So my bark irreversibly damaged. My sound card is borked. Yeah, I've said something like that sound card is a sound card anymore. Hey, all right to remember 18 years ago sound cards? Yeah, I remember sound carriers had like that crappy little microphone on it that you could plug into the park. Yeah. 5.1 surround or whatever. I remember I got how to buy a sound card to hook up my LG. Like 5.10 the day's Cool. All right. Um, I believe that is it. Anything else to add? No, - -28 -00:22:50,730 --> 00:23:35,070 -I am fascinated on this topic. So if you have any plugins or packages that are working well for you to do element queries, go ahead and hit us up on Twitter about the we will retweet you and share that. Again. If I end up breaking my slimmed down version of this styled components one into its own package. I will also link that in the show notes. We'll see I've been going along package crazy lately, just realizing that I can open source most of the stuff in my code base. So yeah, now that shout out to Jared Palmer's Ts dx. ts dx is just about the most dead simple thing in the world to get like a TypeScript package going so now that that exists and I'm you know, into it. I'm just making a lot of packages. I'm just making packages, just making - -29 -00:23:35,070 --> 00:23:51,330 -packages. Yeah, we'll talk to you in a year when you have 10,000 open issues, no people arguing, no issues. If you open an issue, I close it, it works. There are no issues with my packages. Okay. All right. That's it. I think that's enough. Thanks for tuning in. We'll catch you on Wednesday, - -30 -00:23:54,990 --> 00:24:04,770 -Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax228.srt b/transcripts/Syntax228.srt deleted file mode 100644 index 5ed0b92e4..000000000 --- a/transcripts/Syntax228.srt +++ /dev/null @@ -1,512 +0,0 @@ -1 -00:00:01,319 --> 00:00:06,120 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there, - -2 -00:00:06,149 --> 00:00:10,500 -strap yourself in and get ready to live ski and Wes Bos. - -3 -00:00:10,559 --> 00:01:00,810 -Wes Bos: Are you ready for your second course this is the podcast with the tastiest web development treats out there. Today we've got our sort of second show, which is continuing the server list show that we did. So two episodes ago or four if you count the AC treats, we did a intro to what serverless is. And today we're going to continue on that talk about databases files secrets off. And we've also got a couple little updates since we last aired the last serverless one we've had a lot of awesome feedback from you guys who listened to it and a couple things myself. We are sponsored by Sanity and Freshbooks Sanity is a structured content CMS and Freshbooks is cloud accounting. We'll talk about them partway through the episode with me today, Mr. Scott to linsky How you doing today? Scott? - -4 -00:01:00,839 --> 00:01:16,170 -Scott Tolinski: Davey? Tired man. Brooklyn's got that kind of like sickness where she can't breathe. And you know when a little baby little baby can breed. They are up all night very upset. And we got to do that the nose Frieda Frieda. - -5 -00:01:16,199 --> 00:01:23,160 -Wes Bos: Yeah, no. Nose Frieda is the most disgusting thing in the world but disgusting so worth. I can't do it. - -6 -00:01:23,339 --> 00:01:30,750 -Scott Tolinski: I have no help her like I have to hold hold the baby. Well, well, Courtney does the nose Frieda it grosses me out that much, but I can't do it. - -7 -00:01:31,049 --> 00:02:01,530 -Wes Bos: We need to explain what the notes Frida is. So the nose Frida is like a little tube on this like, like, almost looks like a pen. And you put the pen in the kid's nose and your brains out. It really feels like you're sucking their brains. Oh, yeah. They're just like, and then because they blow their nose. Oh, they have to have this not sucked out of them. It's funny that like when I was a kid, we had just this little, like disgusting little bulb. - -8 -00:02:01,920 --> 00:02:02,910 -Unknown: Oh, yeah. Yeah, - -9 -00:02:02,910 --> 00:02:12,240 -Wes Bos: bring it. How does that thing get cleaned? The nose free does. Oh, yeah. Just throw it in the dishwasher now. And it's it's Yeah, it's helpful. So sick pick, like a sick - -10 -00:02:12,240 --> 00:02:26,780 -Scott Tolinski: pig. Yeah, girl. So gross. But uh, yeah, because of that. We are both Courtney and I are definitely the walking dead today. We are very zombie like, and that's, yeah, that's where I'm at. I don't know where I'm at. Yeah, - -11 -00:02:26,810 --> 00:05:20,510 -Wes Bos: yeah, we are lowboy kit, just pop two teeth. And the night for last two nights. So I went to the gym this morning and feel feel sorry for you, but on top of the world by having two good sleeps. So ready, ready to get into it. So a couple little updates from the last show is first I tried CloudFlare workers, I noticed I noted how it kind of what it was. And the last one, I said like Hi, I have this problem maybe could solve. So CloudFlare workers is a serverless platform, meaning that you can write little serverless scripts for it. But the way that they deploy it is they're they're kind of in an interesting situation where because CloudFlare controls your DNS, and is actually sort of someone in the middle, you can actually intercept requests, much like a ServiceWorker in JavaScript. And the idea with CloudFlare workers is that you can intercept these every single request to a server, or specific requests like dot j s or dot CSS files. And then when that request comes in, you can either return your own request, or you can just pass it through much like a like a fetch request would work in like a ServiceWorker. Like you could serve it up from the cache. So the problem I had was I use I've been using this the screenshot app cloud app for like 11 or 12 years. And I have something like, I don't know, like 20,000 screenshots on it or something like that. And I I've, I've used every single markdown file I've ever written every single thing I've ever done. I've used cloud app to host my screenshots. And then I just paste the URL and I right forward slash content dot png, or forward slash content, JPG or just for slash content. And that will serve up the raw JPEG or PNG or whatever, not the like, the silly little thing, and cloudapp just updated their entire thing. And they just like, removed that entire feature, which I did a quick search on GitHub, by 14 and a half thousand short links on GitHub. Wow. And I was like, Okay, thanks for telling me. First of all, I got like so many emails. So it's like, like, how do I fix this do i do i have to download my entire archive, and then build my own server that matches those existing URLs because it's it's my own domain name. I pay extra for that, but they control the server. So I can't just add custom functionality. So I'm like, I'm gonna have and I can't just sign up for another service. Because these URLs ours are specifically the IDs of them are generated by cloud app. So I was like, I'm gonna have to, like build my own thing. I don't feel like doing this. And like, I like it. I like cloud app, other than the fact that they just screwed me on this. - -12 -00:05:20,760 --> 00:05:30,120 -Scott Tolinski: These are the problems that we have, as developers, this is such a classic developer problem. I feel like I feel like this all the time. I'm just like, shoot, what is the answer? Yeah. - -13 -00:05:30,120 --> 00:06:31,740 -Wes Bos: What is the answer? So the answer was a CloudFlare. worker, meaning that so what I did is, I have my domain name west.io. And I have cloud app, which is my, my screenshot thing. And what you can do is you can sort of jump in the middle of that, and you can write a worker. And what I did with the worker is I just intercepted every request. And I said, if this request matches the URL of forward slash content, or forward slash content dot png, then scrape that page, find the actual raw PNG, or whatever, and serve that up. Otherwise, just pass that through to cloud up. And I was like, This is perfect, because like, I'm able to add code to a server that I don't exist. It's obviously it's not doing that. But I'm able to sort of jump in the middle. And that's huge. Because I wouldn't be able to do that with any other set. Someone told me that Akamai edge accounted as well. A con is that how you say it? - -14 -00:06:31,890 --> 00:06:48,450 -Scott Tolinski: Were a con acha commie I'm so okay. This looks like a Japanese word to me. Even though they're a Saturday you on the Massachusetts it is a Japanese word than it is, ah, my, - -15 -00:06:48,810 --> 00:08:47,370 -Wes Bos: aka my accent come I anyways, they apparently they have a server list product as well, which is called an atom I come I come I come I yeah, I am in the same idea. There's, there's a lot more to CloudFlare workers in that you can cache stuff, and serve up the cache if you want it and you can have control over that. And one more thing, somebody someone just messaged me, and I might even want to do a show on this. He said, I'm not gonna say who it is. I'm not sure he didn't give me permission to say his name. But said, hey, let's just listen to syntax episode on serverless. Not sure if it's an episode idea or not. But if you want to dive into CloudFlare service workers, it means CloudFlare workers. I'm currently leading an invisible infrastructure migration right now from a legacy WordPress setup to a new storyblocks Netlify setup. So we're using CloudFlare workers to basically stitch together the headers, the menus and footers from the old WordPress site, while we move to our new Netlify pages, but serving the page back as if it was part of a normal domain. This means we can migrate from the old to the new slowly without massively disrupting the new SEO or doing a lengthy cost rebuild. I was like, Oh my gosh, that's genius. So the idea is that you, you just pull in the entire website with a CloudFlare worker and render it out. And then piece by piece, you can on the fly replace little bits of that by I'm assuming they're running their Netlify website on another domain name. And then they just pull in the pieces from the Netlify domain, stitch it into the existing WordPress. And eventually there'll be no more parts of WordPress left. Wow. And then they could just turn it off and they can do it. Not that that is that's a genius way to to use this sort of thing. People are swear when someone makes a request, you can stitch the bits together. stitching bids, that's - -16 -00:08:47,610 --> 00:09:16,980 -Scott Tolinski: Yeah, that's man. That's really cool. Yeah, man. Yeah. I'm really interested, like this stuff is all sort of blowing my mind. So I'm, we mentioned that we need to do more on CloudFlare. So I added a card into our potential hasty treats that just as Scott asks West questions about CloudFlare because I don't I have a cloud for account. I've used it in the past, but I'm not using a currently and I have a lot of questions about it. So I think that make a good episode. - -17 -00:09:17,340 --> 00:09:29,850 -Wes Bos: Yeah. Big fan of CloudFlare over here. Yeah. I don't use any of their paid stuff. Just use all their money. Yeah, don't give him any money. But all the free stuff that they give you is awesome. - -18 -00:09:30,049 --> 00:10:57,600 -Scott Tolinski: We also got a another note, and this is a great episode too bad. Only too bad. You didn't cover stitch the server. It was platform from MongoDB. I never heard of stitch. No, it seems like everybody and everybody is coming out with a serverless platform. This one seems to be really kind of interesting. So this is comes to you from MongoDB mongodb.com forward slash cloud forward slash stitch and this is the very first time I'd ever heard of it. I popped it up and looked pretty cool. build better apps faster with MongoDB stitch services. So basically allows developers to run simple JavaScript functions in the stitch serverless platform and making it easy to implement application logic, securely integrate clouds or so it seems like it's just like MongoDB saying, Hey, if you're gonna query a MongoDB database, well, maybe you should just consider using our serverless function, so you don't have to have your own function. Now, I thought this is really interesting, too, that they highlight graph. qL empowers developers to quickly build apps with graph qL, the groundbreaking API query blah, blah, blah. And I have not really dove into this beyond a surface level. But I thought it was really fascinating considering I do use MongoDB. My database is hosted at Mongo Atlas. And I think it'd be pretty cool to potentially check out some of their pricing seems pretty neat. - -19 -00:10:57,659 --> 00:11:09,360 -Wes Bos: I see what this is. Obviously, you have your database on MongoDB. And then they will also give you serverless. functions. Yep. And they'll also give you a graph qL API. - -20 -00:11:09,360 --> 00:11:09,870 -Unknown: Yep. - -21 -00:11:09,990 --> 00:11:30,210 -Wes Bos: that sits on top, very much like Prisma or Hasura. I'm assuming I haven't tried it. And then they give you off level as well. And then the triggers that seems like web hooks, yeah, when some data changes, and you need to do something, when that data changes, send an email, somebody logged into your account or someone reset your password, you could send an email. - -22 -00:11:30,539 --> 00:11:33,000 -Scott Tolinski: Kind of cool, kind of cool. Yeah, I wonder - -23 -00:11:33,000 --> 00:11:44,130 -Wes Bos: if they actually tried to sponsor our podcast, I got an email from them last week. We're sold out. But maybe this is why because it actually looks pretty cool. To try this out. Yeah. And they have - -24 -00:11:44,130 --> 00:12:02,130 -Scott Tolinski: a in the docs, they have a tutorial section where they teach you how to build a blog, or build a to do app, you know, a classic No, do I've got to build a to do web, we got some need to do is to do. We got to build those to do apps. But I'm gonna try one of these and just see how it goes. Maybe I'll do it live. I've been doing that recently. Where? - -25 -00:12:02,730 --> 00:12:04,890 -Wes Bos: Yeah, Scott tries on YouTube. - -26 -00:12:04,980 --> 00:12:33,539 -Scott Tolinski: Yeah, that's what I'm saying. Like, if I'm going to try these things anyways, or do these things anyways, I might as well just put on the camera and talk through it. Those you don't know, I've been doing this Scott try series on YouTube, where I've been trying different services like begin in his store and stuff. And for the most part, it's really opened my mind in some of these services, specifically, like how Sarah did something a little bit different than what I thought it did. So it's definitely getting my brain in that space for what this stuff can actually be. - -27 -00:12:33,929 --> 00:13:12,179 -Wes Bos: One more thing real quick, is we mentioned FA s, which is Functions as a Service. It's like the open source version of running a serverless. And I was like, well, like, like, how would you host this yourself, but we discovered that you have to run Kubernetes. So Digital Ocean has Kubernetes, which Kubernetes will scale up and down your servers as you need them. So I'm assuming that if you wanted to host your own, you could go for digital oceans Kubernetes product, and then run this FAA s Functions as a Service on it. And that would then scale your servers up and down as you need the resources. Kubernetes scares me there is that - -28 -00:13:13,590 --> 00:13:38,130 -Scott Tolinski: word Kubernetes. You know that hold that Hitler tries whatever? Or Hitler. Yeah, Hitler's meme from the 2000s. He did one on Kubernetes. And it's, it's actually hilarious. And it somebody said, this is probably the best tutorial on Kubernetes that exists, because he'll be like, Drew, did you install this? Did you do this? Did you do that? Oh, look, if you haven't, Oh, man. - -29 -00:13:38,399 --> 00:14:43,350 -Wes Bos: All right. Uh, let's move into today's show into the entire show of just updates. That's thanks for tuning in. No, but now we're gonna actually move to choose the next one. So we have a couple different topics here. We'll start with secret management. secrets are things like passwords, API keys, things that you don't want in your code. Because generally, you should not put sensitive things like that generally, base. Yeah, generally, generally. So like a URL string to your database or something like that. And if you need to connect to a database, and you need the URL, username and the password or anything like that, that data needs to be put as secrets, which is just basically process dot E and V dot something. And there's all kinds of neat ways to go about it. Some of these frameworks we talked about earlier, have a nice UI for it. Some have a C, Li some will ingest a dot E and V file. That's how I personally How do you manage your secrets? I use a dot env file. - -30 -00:14:43,649 --> 00:15:10,169 -Scott Tolinski: Yeah, it's I use since I'm on Meteor Meteor has what's called a settings dot JSON file, which are basically just write CSV files. Yep. And so it you can have the cool thing about settings is because Meteor, you can write they're not necessarily secrets if they're on the client, but you can write your, your public variables that need to be constants or whatever. And then you can write your private ones that are only server side. And it just handles it all super nice. - -31 -00:15:10,679 --> 00:15:40,890 -Wes Bos: That's cool. Some of them have a really nice, like dev begins specifically has a dev staging production interface. So I don't really like managing secrets via the command line. I'm not sure either either put it in a dot E and V file, or just go straight into the UI of whatever hosting service you're using. And a lot of hosts will have have that for you. And then it gets a little trickier when you have multiple staging environments, you've got like a development and production and a staging environment. - -32 -00:15:41,159 --> 00:15:58,440 -Scott Tolinski: Yeah, yeah. And I, no, they frequently say not to have several dot E and V files and to just have all of your your code do that immediate, it's a little bit easier than that. Because the settings that JSON, I don't have to have separate end files. Yeah. But is that how do you handle the environments? Per? - -33 -00:15:58,549 --> 00:16:08,909 -Wes Bos: Yeah, um, usually what I like to do is just at one point, you have to log into wherever you're hosting your thing and set them Hmm. - -34 -00:16:09,210 --> 00:16:11,429 -Scott Tolinski: So you set them in the UI or that Yeah, - -35 -00:16:11,460 --> 00:18:04,200 -Wes Bos: you set them in the UI, or login to the box and paste them in. That's Yeah, that's that's generally how I do it there. And then I maintain like a local file for my local development word. Next up, we have vendor lock in. So one thing to really think about is, am I going to be able to move this away from either the hosting provider, or I guess there's two types of vendor lock in here, you can, you can be locked into a lower level provider, like AWS, or MongoDB, or something like that. Like, even like, if you think about using a database, you can just use mongoose. And now you're locked into using mongoose as the database. Or you can use a higher level SQL package that will have the ability to you could use any database you want under the hood. And the code that you write is exactly the same. That's called a ORM, which stands for object relational mapping object. I've never actually looked that up myself, I always just know that an ORM puts a layer between the databases API and the actual API code that you write. Yeah. So that's, that's like sort of one type of lock in. And then the other type of lock in this is like a more of a framework lock in meaning that if you write code to a specific framework, can I take that framework and host it anywhere I want? Or am I am I bound to a specific host? So the questions I always ask myself is, can I take my app as is, and host it on another provider? Can I refactor some config and run the code as is because I think generally in serverless, most of this is just JavaScript code at the end of the day, but you always have to ask yourself is, if I get like banned from this service, you can - -36 -00:18:04,340 --> 00:18:49,710 -Scott Tolinski: move this thing somewhere? Or if that service shuts down, or that service is down for an entire day? Can I emergency hot swap this thing over to an entirely different piece of infrastructure, and it will work or does some secret sauce run on that hosting provider that I would then need to sort of move over and refactor the code, you really have to think about that. Because again, like if we often applaud these layers that make our life easier sitting in front of these things. But if those layers end up becoming like a real tight lock into a specific platform, that is definitely a foot gun that you could avoid by choosing something that maybe gives you the option to migrate off easily or move somewhere else. Definitely something to consider there. - -37 -00:18:49,710 --> 00:19:11,430 -Wes Bos: Yeah, like, one huge lock in is just using Firebase and not necessarily bad. I love Firebase. And I would I would certainly do a project on them. You just have to think, are they going to pull the rug out from under me in terms of tripling the costs like Google Maps did or just shutting it down, like parks shut down at one point? - -38 -00:19:11,430 --> 00:19:12,030 -Scott Tolinski: Mm hmm. - -39 -00:19:12,030 --> 00:19:32,130 -Wes Bos: Whereas if you did it on like an open source framework, then you could certainly just move it somewhere else. In a lot of cases, it's, it's fine. You're like, I trust this company. If we have to move off of parse to something else, then. So be it. It will have to cross that road when we get to it. But we're moving quickly enough right now. So it's well worth it. - -40 -00:19:32,360 --> 00:19:47,010 -Scott Tolinski: Yeah. And I mean, we look at Firebase, but just keep in mind every single cert like you think Google owns Firebase? Right. So okay, is Google gonna shut it down? They're probably not going to shut it down. They're not going to shut down like their what is their Google - -41 -00:19:47,040 --> 00:19:48,420 -Wes Bos: RSS reader? Yeah, you - -42 -00:19:48,540 --> 00:19:52,200 -Scott Tolinski: have to say, Well, what is their their app? One where the Google app, Google? - -43 -00:19:52,890 --> 00:19:58,580 -Wes Bos: Google Cloud, Google? apps are? out? Yeah. Yeah, - -44 -00:19:58,610 --> 00:20:03,390 -Scott Tolinski: it sounds some Google combination of words with Google Cloud and apps or something like - -45 -00:20:03,390 --> 00:20:05,160 -Wes Bos: cloud compute service. - -46 -00:20:05,360 --> 00:20:21,540 -Scott Tolinski: Yeah. But Google is absolutely famous for shutting down their services. So there's just about the good, the graveyard of dead Google services is almost larger than their active Google services. So yeah, those are definitely things you need to consider when thinking about that. - -47 -00:20:21,900 --> 00:22:16,470 -Wes Bos: So a couple quick examples here, obviously, haven't gone into them all. So next, Jess will only run the serverless part of it on now sh, which is sites hosting platform, there is a community package being worked on right now, which will allow you to deploy your API routes, which is their serverless functions folder to AWS or something like that. So that's just something to think about is if you if you went the now route, you might not be able to to run that. But then again, sites hosting is really good. So I don't know if I would, would sweat that that much. Begin is another one I have is so beginning kind of an interesting thing, where they built this thing called architect, which is available at arc AR c codes. So arc codes is just a framework that will run on AWS, meaning that it's an open source framework, and you can deploy your app to AWS, and run serverless functions and WebSockets real time stuff, it will it'll it'll interface with s3 for you, we'll talk about that stuff in a bit. But like basically, there's a bunch of different parts, and serverless functions being part of the biggest part. And then so then, if you want to host on begin, that you have to use architect to host on begin, like, you have to code your way, and you have to code your app in a certain way to host on them, which is not true on sites now. Because Zeiss, now you just have to, they have all these different ways to host an application. And as long as it's a serverless function in some way, then then you can host it hosted with them, you don't have to really fit the structured rigid way. Whereas begin, you have to code it in the way of architect. But the upside to that is that you can then take your architect, if you didn't want to host it on begin, you could just bring it somewhere else. And the only lock in that you have there is that it only runs on AWS. - -48 -00:22:16,470 --> 00:22:21,570 -Scott Tolinski: It's nice that they took the forethought to prevent locking in those sort of ways. You know, - -49 -00:22:21,570 --> 00:22:22,200 -Unknown: Mm hmm. - -50 -00:22:22,200 --> 00:22:32,610 -Scott Tolinski: It's like here, here is this platform now that okay, well, if begin, for whatever reason is no longer there. You're not, you're not screwed? You're you can do it yourself. - -51 -00:22:32,850 --> 00:23:01,230 -Wes Bos: Yeah, I think in most of these, like, we're just mentioned this, but I don't think that this is as big of a issue that a lot of people think because they probably won't go away overnight, right. And you are still just writing JavaScript at the end of the day for all of these things. So just re architecting how its configured and how requests come in. Sometimes, I would think the majority of your library code would still move from one to another. Mm hmm, totally. - -52 -00:23:01,230 --> 00:23:16,260 -Scott Tolinski: So let's take a quick break to talk about one of our sponsors where you can host your data and query it now with graph QL. And we're talking about sanity@sanity.io. I know you've got some hot new info for us West, what's up? - -53 -00:23:16,440 --> 00:24:13,260 -Wes Bos: Yeah, they're still rolling out a whole bunch of stuff. And one thing that that just launches graph, qL API is now out of beta. So previously, the way or one of the way that you can pull your data out of Sanity is with this thing called grok. gr o q grow. And it's really cool language that allows you to query all of your data and filter it out and sort it and whatnot. And it's awesome. But some people want like just a regular graph qL API that they're they're used to. So they wrote a graph qL API with grok, which is really cool. So under the hood, the graph qL resolvers, are just written in grok. And that's just been in beta for a couple months now and is now out of beta. So you can use either grok or graph qL, to pull the data out of Sanity into your website, your app, your sandwich board into wherever you want to display, you're saying, - -54 -00:24:13,980 --> 00:24:15,030 -Unknown: Yeah, I haven't done it - -55 -00:24:15,030 --> 00:25:02,160 -Wes Bos: yet data. So kind of the cool thing that they just mentioned about this is you can deploy tagged versions of your graph qL API. So let's say you want one version with only your posts and authors available, you can deploy an API with a blog tag and get your own endpoint for that and another one with a podcast tag and get your podcasts for that, which is pretty nifty. If you want multiple graph qL endpoints for different I know that kind of defeats the purpose in some some cases. But if you do want different endpoints for different pieces of data, because you host a lot there, you can do that. So check it out. Since sanity.io. forward slash syntax is going to get you double the free usage tier, and they also have a bunch of links to stuff you should check out as a syntax. Listen Thanks so much to Sanity for sponsoring. - -56 -00:25:02,370 --> 00:25:57,300 -Scott Tolinski: Nice. Yes, Andy, always putting in the work making those improvements. Cool. Let's say you're out there, Holland, Holland, big Holland. Next, let's talk about sharing dependencies. I also experienced this pain, where basically, if you are serving just individual functions, right, you have singular functions that exist on their own. Well, if you have all these functions, what do you do about things like dependencies, tree shaking and your application? Overall, one of my solutions to this was just to have one endpoint in my next j. s. app. That was, that was one of my solutions. I'm interested because you seem to have dug a little bit more into this than I have. How do you what do you do to solve this issue of having individual package JSON files in importing and exporting amongst different serverless functions to avoid duplication? - -57 -00:25:57,660 --> 00:27:31,350 -Wes Bos: Yeah, well, I guess the whole idea behind serverless functions is that you have small functions that are contained, right. And therefore they can run quickly and only take up the resources they need, when they are running, versus a large application that the whole thing is always running. And every time you add more code, or more dependencies, that application, surface area then grows, right? So the idea with serverless functions is that you have every single time you write a function, you can and we say a function, but like a function could do multiple things, and have its own libraries and whatnot. But generally, each function that you have has its own package JSON, which you have to npm install each of your dependencies for each. And that can be a real pain, let alone almost all apps have like a Utilities folder where like, I always have a function called format money. And that takes in cents, and in formats it with the dollar sign and all of that, and more than likely need that in multiple functions, and things like off if you want to do that in multiple. So like how do you share that code? amongst other ones? So ask us on Twitter, like what is your strategy? Because there doesn't seem to be a very clear path forward? And I don't think that this is totally solved, just yet. I think there's a lot of different ways to do it. So would the answer that people gave me is first some people publish their own private module full of utils? Yeah. So you go on, like, get a private - -58 -00:27:31,350 --> 00:27:36,180 -Scott Tolinski: and you have to, yeah, that's such a pain. It's such a pain, because then you have to update the module. Yeah. - -59 -00:27:36,180 --> 00:30:19,230 -Wes Bos: Let's explain how it works. So you, you have your own, like, I don't know utils. That jass. You, you publish that sucker to like a private NPM repo which you have to pay for, and then each of your projects, then NPM installs that module. And then you can import that the development workflow for that. It's like, what if you're working on your utils library, and you need it in another one, I think that's when you have to use like NPM link or something like that, that just seems like a big pain in the butt to me. So I didn't let go down that route. Another way you can do it is you can just bundle your entire function and then tree shake, aggressively, people said that, you can just require everything you want to bundle it up into one j s file, and then tree shake will get rid of the methods and functions and things that you didn't necessarily use. Because as it stands right now, serverless functions will bundle the entire node module, all of the read me's, all of the tests, everything that comes with it, which is mostly unnecessary. In most cases, if you're just taking a sip of util from from a library, what else you can simply just some serverless function providers will like xlights. Next, Jess will do this, begin we'll do this Firebase will do this, a lot of them will do this. Or you can simply just require something from another file, sometimes you need to name it something special. And that will, they'll know. And then when you go to bundle, it will just bundle that dependency in which each of them so if I have format money in three of my functions, it will just bundle that format money module into each of my serverless functions for me. And then finally, Amazon has this AWS has this idea concept called layers, which allow you to bundle up commonly used functionality, and then it will make that available to all of your modules. So if you have things that are commonly used, you can put them in a layer, and it seems to be pretty performant that way, so interesting. It's all kind of sucks that you have to think about that because like the beauty of back end was that you didn't have to worry about the size of your node modules. Right and now you do because everything is bundled up and put into a serverless function with the when you're using serverless functions. So now you got to start thinking about that. So we'll see what that does. Luckily, a lot of my node modules like date functions will publish the entire library. But then they'll also publish like lodash does this as well, where you can, you could require like lodash for slash has or something like that. And it will just bundle that little part before you - -60 -00:30:19,380 --> 00:32:53,670 -Scott Tolinski: and you should write if that if that is the option. That is how you should, how you should pull out those dependencies totally. Another big hurdle for a lot of these things is local development, which again, it seems like, Oh, that's a problem that's been solved in the past. But now we have to worry about local development. Because, again, if you are having one of these serverless platforms, these functions just exist, you kind of need something on your own end, when you're testing developing writing code to manage and have those functions be available. So there are several of these things that do exist. I didn't have you, um, I know, we don't have this on our list. But have you used Netlify eyes version of this? I have not? No, I have it. So really, what these are, are basically, they're going to end up being different platforms that you can run locally, probably one of the biggest ones being for next j s. And now dot Dev, which basically runs the now hosting platform locally on your machine, allowing you to utilize these serverless functions just as if they were in production or something like that. That is really the the solution for any of these is really just to have your own utility or your own platform that goes ahead and does that there's a we mentioned, I briefly mentioned this as Netlify, Dev, allowing you to run basically Netlify stuff locally at they gave us a neat tour of Netlify dev like a year ago at react and on. And it really blew my mind, but I have not used it. Because to be honest, most of the stuff I'm hosting on Netlify, right now doesn't even use their their serverless functions at all, I I'm curious about a lot of this stuff I have used now, Dev and I must say I do get a little bit. I don't want to say confused personally. But we have you know, the next was that you know, next start or whatever you use the next day as the yarn start or whatever to run next .js. And a lot of times you're hosting next .js ABS on now. And then you can do.in you can do a dot E and V variables on next .js yourself bundling them into the thing, or you can use the whole now .js dot JSON stuff that they have in there now platform and when you get is you have these different branches of techniques for doing the same thing in the same platform based on where you're hosting it. And to me that gets a little bit iffy and confusing about when to use what where. But these platforms are really interesting Iran now that are now Dev and it was very, very smooth, very easy to do. And for the most part had no issues with it. - -61 -00:32:53,970 --> 00:34:04,080 -Wes Bos: Yeah, it seems that a lot of the like the local dev for these things always comes after the fact. Yeah, so now has good local dev now was the CloudFlare workers just rolled out this thing called Wrangler, which allows you to run all of it locally. Like it's a good, it's a good name. Yeah, architect, which is behind begin runs locally, it also runs in a sandbox, which is kind of cool. I didn't even realize you could do that. that'll stop any code that's running to reaching outside to other folders or things on your computer. It's kind of cool. So I basically I wouldn't take a look at anything that doesn't give you a one to one replication of how it's going to run on the server. Yeah. Because till sometimes if you say, Okay, now it's locally, and now I have to, like, do this a little bit differently. Or like, I've seen a lot of people just make like, make shifts, express servers that try to replicate that. That's a pain as well. And a lot. I think almost all of that is gone now. Which I think again, we said 2020, zero serverless it's gonna get a lot more popular this year. Because the whole UI of or not the UI, the whole dev experience locally, and everything is really good. - -62 -00:34:04,440 --> 00:34:59,960 -Scott Tolinski: Yeah, I'm, this was always one of the biggest sticking points for me when I first heard about serverless, or any of these platforms, oh, you can run these functions now. Okay, well, do I have to like go into a text editor to write them in, you know, wherever, to have to do some some not like a text or like a text area. Do I have to write my functions? Yeah. Yeah, I just remember being really frustrated by it initially. And this, you know, running them locally is obviously what needs to happen, and also what needs to happen and you need to build your clients when you do work, because you got to get that money, man. I mean, you did that work at that money. You want to check out fresh books@freshbooks.com forward slash syntax and just just tell them, let them know send them in a letter in the mail saying that you heard about it from syntax, they would love to hear that Freshbooks is Canadian just like our co host West here. Now, right? - -63 -00:35:00,570 --> 00:35:05,340 -Wes Bos: Yep, they are. They're from Toronto, which very good to me. Yeah, you - -64 -00:35:05,340 --> 00:35:11,310 -Scott Tolinski: know that, uh, you know that they're gonna be really nice to you. They might say sorry, a lot. Alright, sorry. - -65 -00:35:11,520 --> 00:35:13,230 -Wes Bos: I'm sorry about that. So sorry about that. Okay, - -66 -00:35:13,439 --> 00:35:45,150 -Scott Tolinski: so let's get into Freshbooks. Here. It's the all in one small business invoicing and counting solution. I know Wes, you used fresh books for a very long time, long before they sponsored this podcast and you have been a very happy customer for that whole time. It integrates with a lot of stuff that you know, and love like Shopify. G Suite gusto, I'm a huge fan of gusto. Shout out to gusto. They're out here in Denver, stripe, all sorts of stuff. And they have a neat app for your phone. Do you use the app? Wes? - -67 -00:35:45,440 --> 00:36:29,420 -Wes Bos: I use it quite a bit. Actually, my my assistant uses a lot more than me. So I've added her to my account. And then every couple months, I empty out my pockets and get rid of these faded crumpled receipts that are almost illegible. Yep. And she is that to take a photo of it. Because if you ever get audited, I always want it to be easy. And I just want if they'll say, hey, show me a receipt for meals and expenses for this month, this many dollars like you claim this much. Show me and having a photo attached to each of those will make it super easy to do that. So big fan of the app, myself, I use it every now and then when I'm out and I just have a receipt, snap a picture, throw them in the garbage. Don't have to worry about that. Perfect. - -68 -00:36:29,630 --> 00:37:36,110 -Scott Tolinski: Yeah, so check it out@freshbooks.com forward slash syntax, and you are going to want to sign up because trust me, this kind of stuff is never any fun and fresh books makes it totally fun. So let's get into some more stuff. We're talking about existing applications, applications that have already been built, and how do we move stuff? Or how do we make things serverless. Because if you have an application, it could be difficult to move parts of it, especially if you have a lot of different things going on. With Me personally, my my API is basically one endpoint, right? So for me, it would involve me either having to split up my graph qL API and stitch it back together, or move that whole bit. So yeah, let's talk a little bit about a thought process here and moving in an application. Do you do a piece by piece all at once? What are your What are your thoughts here? My my initial impression is that you would probably want to do it piece by piece, starting with like the smallest route that you have, making sure that works the smallest route, smallest bit of functionality, get that up and running and then piece by piece it from there. - -69 -00:37:36,540 --> 00:38:41,900 -Wes Bos: Yeah, I think what I would do is just sit would start offloading very clear standalone pieces of the of the application. So whether that's image resizing, or like reaching out to an existing API, and like maybe you reach out to GitHub and create a repo, something like that, just like look at all of the or sending an email, that's probably the easiest one you can do. Yeah, yeah. And then just like move that logic out to a serverless function, and then that will then live on another domain name. So you'll have to change your calling of that function from just running a function to making a request to the endpoint and submitting the data and getting the data back. But if you do it properly, the returned response should be the same from a function as it is from hitting an API endpoint. So that's kind of how I would probably approach these things. I haven't done a bigger one. But like I read at the top of the hour, this one of moving this WordPress one around, there's probably a lot of kind of neat tricks we're not even thinking of here. - -70 -00:38:41,960 --> 00:39:21,570 -Scott Tolinski: Yeah, I moved level up to next day, as briefly, we talked about I think, then unless a couple episodes ago, or last episode, and yeah, that was me moving my API and my back end to serverless functions, because I was doing it all via the API routes. And next j s. And I only had a few routes, because it's graph qL, you just move the endpoint, the main, the main little bit there, and then you move the web hooks. And that's pretty much it for me, I didn't really have a whole lot to move. And so if you, I guess it could be considered a benefit of graph qL there is if you only have one endpoint, you only got to worry about moving one endpoint rather than all of your different requests. - -71 -00:39:21,600 --> 00:39:22,260 -Unknown: Yeah. - -72 -00:39:22,350 --> 00:39:45,630 -Wes Bos: But like if all of your mutations have, like if your mutation for signing up and creating an account and sending an email and resizing the avatar, and all of these things, all of those in themselves are separate packages, or they don't have to be But at a certain point, you're going to hit that serverless limit. And you're going to need to split them out into multiple so I don't know how to get back together. It's - -73 -00:39:45,630 --> 00:39:50,910 -Scott Tolinski: Yeah, yeah. The What is it Apollo Federation. Is that what that's looking to solve? Oh, I - -74 -00:39:50,970 --> 00:39:52,170 -Wes Bos: don't know. I've heard of this - -75 -00:39:52,260 --> 00:40:31,770 -Scott Tolinski: Apollo Federation. Okay, let me see Apollo Federation. Let me open this up Apollo Federation implementation. single data graph across multiple services. So yeah, there you go that that would be the the solution there to split it across multiple services. I don't know what that looks like, in terms of anything performance wise splitting, like, where do you split your graph? qL API? If you do so into different services? How unnecessarily complex does that make things? Like? Is that is the benefit worth the cost to do that? I don't know. I don't know very much about Apollo Federation. But it looks interesting. - -76 -00:40:32,150 --> 00:41:14,250 -Wes Bos: Yeah, well, you could, what else I'm thinking, and we should probably have somebody on the show who's actually done this before. But yeah, but I'm also thinking is that like, your resolver for your query, or new mutation? Will you all of your graph qL API's on one function, but the actual heavy lifting of what needs to happen in the resolver, sending an email, resizing an image all that thing, then that can just be in a serverless function, and the resolver will simply just send the data that's coming in to the serverless function, and then you get the response and send it your So you started just hot potato it because with the graph, qL is just a thin layer over top of the actual logic that needs to happen on your server. So I put that as a good way, - -77 -00:41:14,400 --> 00:41:16,730 -Scott Tolinski: they should have called it the hot potato service. That's - -78 -00:41:17,900 --> 00:41:22,770 -Wes Bos: somebody wait is hot potato taken on what is the NPM drinking game, - -79 -00:41:22,770 --> 00:41:25,440 -Unknown: the way that - -80 -00:41:27,570 --> 00:41:36,090 -Wes Bos: I'm gonna go NPM j. s, package hot potato allows you to pass an HTTP connection from one cluster worker to another, - -81 -00:41:36,090 --> 00:41:43,400 -Scott Tolinski: that's exactly what we want, oh, my God, I found a domain hot potay.to. - -82 -00:41:45,810 --> 00:41:54,000 -Wes Bos: Somebody please make this hot potato is a blazing fast graph. qL API stitcher focused on serverless functions - -83 -00:41:54,030 --> 00:42:01,730 -Scott Tolinski: focusing on delaying actually doing anything and just give it to somebody else. It's like how I how I handle email. - -84 -00:42:02,190 --> 00:42:36,440 -Wes Bos: Uh, what else is interesting here began just rolled out a, they have their own server, like most of these won't allow you just to run a Express server in them like you could but be ghin just rolled out at HTTP dot Express method, which will allow you to hook up an old Express application or existing, I shouldn't say old, existing Express application. And then what you could do is you could slow it, like you could just move it all over, and then slowly move piece by piece or to take it out. So be kind of interesting as well. Yeah, - -85 -00:42:36,540 --> 00:42:58,020 -Scott Tolinski: fun. I mean, it's fun that, uh, people who clearly have experienced these problems or have experienced some of these things, like realize what the barriers to entry could possibly be. And like that and begin allowing you to migrate your application like that just shows that they know what the, yeah, developer pain points are there? Yeah, it's because - -86 -00:42:58,020 --> 00:44:13,890 -Wes Bos: like, initially, when I tried this a couple years ago, I was like, This is too hard. And they hear stuff that comes back. I'm like, I'm like, uh, so you're telling me you want me to do all of this extra work? For what? Because like, a lot of my even my own application, I spend like 35 bucks a month to host my entire application that serves up, like, I've had hundreds of thousands of people do live stream videos and watch it and sign up for accounts and things like that. And I don't necessarily need I don't feel any of the pain points that the serverless in terms of scaling necessarily means. So I just kind of look at and garlic. Hmm. That seems like a lot of work for not much return. And, and that's why like, I don't, I don't think that this is the be all and end all for everything. But it definitely is, I think also easier for front end developers just to eat a little little bit of functionality. Because whip up a quick little script like that whole cloud app thing I did. I wrote that in the browser. I didn't even get into their local workflow yet started typing into the text box. How is that it was good because they the you have the experience for that is so good. Mm hmm. Because they use they use Monaco, which Oh, yeah, my Oh, - -87 -00:44:13,890 --> 00:44:14,910 -Scott Tolinski: shout out is - -88 -00:44:14,910 --> 00:44:15,990 -Wes Bos: just VS code. - -89 -00:44:16,020 --> 00:44:21,180 -Scott Tolinski: Yep. Which you should I mean, at this point, if you have like a text editor in line, Monaco's where it's at - -90 -00:44:21,630 --> 00:44:50,340 -Wes Bos: the Monaco code sandbox or something, and then they they have like a postman thing built into it as well. And they have like a fake browser that allows you to view their response. And they have Chrome Dev Tools baked into it as well. So they took all these things and just baked it into this amazing pie editing experience. And like I never use like a code sandbox or anything like that. Just because I'm like, as doesn't it feels a bit weird. It doesn't feel like your - -91 -00:44:50,340 --> 00:44:55,110 -Scott Tolinski: edit. Yeah, the themes different the shortcuts are different. - -92 -00:44:55,230 --> 00:45:11,790 -Wes Bos: Code sandbox uses Monaco as well. Yeah, there was even a demo, the guy got via code running in the browser, my mind, just like shimmed all the back end stuff with node API's. But this was like the first time I thought, this is okay to write this code in the browser. - -93 -00:45:12,210 --> 00:45:14,490 -Scott Tolinski: Yeah, it's gonna be okay to write the code. - -94 -00:45:16,949 --> 00:45:17,580 -Unknown: Alright, we're - -95 -00:45:17,609 --> 00:45:24,150 -Wes Bos: kind of running out of time here, we got a couple of more things to talk about the not not huge ones. Next one is databases. What do you do with databases - -96 -00:45:24,150 --> 00:45:26,370 -Scott Tolinski: data, not a huge, not a huge problem. - -97 -00:45:26,729 --> 00:46:27,930 -Wes Bos: Data is never a big problem. No minor thing? Well, like, you can just use any database you want. Yeah, but there's a lot of services that are just coupling data with it as well, which is super cool. Because that's sort of where you hit that. When you're writing a serverless function, like I just need to store something, I need to source some little bit of data. And now you're telling me to go set up an external database and host this thing for five bucks a month. So dynamodb is a big one from AWS, that is baked into architect slash begin. Firebase is a perfect use case for serverless. Because they have a wicked database already wicked CloudFlare workers has their own key value storage, it's a couple other ones. And you can also just use like MongoDB, if you already have a database set up, you just have to connect to that thing. When the worker, not the worker when the serverless function starts. So there might be there's there's overhead in any of these things connecting to it. You're missing a - -98 -00:46:27,930 --> 00:46:28,860 -Scott Tolinski: Gen one. - -99 -00:46:29,609 --> 00:46:30,300 -Wes Bos: What is it? - -100 -00:46:30,359 --> 00:47:10,710 -Scott Tolinski: phono? Yeah, calm? Yeah. Find a dB, the database built for serverless. It's like, right, in their headline, it's like, this is the database for serverless featuring native graph QL. I've heard a lot of good things about phono. It's on my list for the Scott try stuff. It seems really cool. I haven't used it. A lot of people seem to really like it. But again, when some of these things pop up, it's so hard to tell like, what is this thing if it's just like some cool thing that people are hyped about for a week? Or is it actually something that's going to stick around and be interesting to me? I've heard enough about fun. And enough people talk about, you know how great it is that I think I'm interested in giving it a real shot here. - -101 -00:47:10,859 --> 00:47:47,610 -Wes Bos: Yeah, yeah. Same with me. It says it's a serverless database that gives you ubiquitous low latency access to AP data without sacrificing data, correctness and scale. The only thing that makes sense to me there is low latency because of the whole idea of your server. List function needs to connect to the database, when generally that connection to your database happens when you start your app. And that that usually happens before you switch the domain name over. But in the case of this serverless functions, when you boot up a server, this function has to connect to the database at that point, so - -102 -00:47:47,639 --> 00:47:54,060 -Scott Tolinski: yeah, Fina, well, we should do an episode on fauna. Maybe you should give it a try. I'll do a Scott tries video on it. At some point, it's on my list. - -103 -00:47:54,209 --> 00:48:00,870 -Wes Bos: Yeah, we should like make a tiny little app that includes like two or three of these things we want to try out and they just do a little show on it. - -104 -00:48:01,229 --> 00:48:06,330 -Scott Tolinski: Ooh, sounds good. Yeah, we do a live show. We could do some screen sharing code share. - -105 -00:48:06,359 --> 00:48:12,030 -Wes Bos: Yeah, that'd be kind of fun. Maybe a little YouTube. Little two bit. youtuber thing. Yeah. - -106 -00:48:12,030 --> 00:49:34,680 -Scott Tolinski: So okay, another big issue is file storage. People often are like, I get hung up around uploading images or doing those kind of things. I personally don't like to manage my own image server own image folders beyond the point of hosting them somewhere like, I'm not going to host it on my own server. Because typically, a lot of these places, they've worked out some of these things specifically for me, cloudinary, which is more than just like an image host. They're an image like transformer. And you can just say, oh, here's the path to the image. Oh, yeah, by the way, choose whatever format is best for the browser to save on cavies and stuff like that. So I always reach for cloudinary personally, but if you don't want to go that far into just a service, that's probably going to cost a little bit more than something like rolling your own, you can roll your own cloudinary like setup using Amazon and serverless functions using an s3 bucket, or I'm sure using black backblaze b two as well does also a nice store, I store a lot of my files on both s3 and backblaze b two, but all of my images on cloudinary. Typically, I'm reaching for a service like this, because it just makes it easy. And I don't want to have to manage my own stuff. Not to mention, if you have a serverless function, there's not really a server for you to store those images on anyway. So you're probably going to need a service or a bucket or something somewhere to put them in, in the cloud. - -107 -00:49:35,009 --> 00:50:39,180 -Wes Bos: Yeah, the thing to remember or to know about serverless is that it's ephemeral, meaning that there is not really any memory, it will shut as soon as it shuts down. It's just code meaning it's ephemeral. It's stateless. You can't just store stuff on a serverless function. So if you want to like upload a like with WordPress, you upload a file, it just puts it in the WP upload folder. Right and that's that's Really simple. But with the serverless function, you need to put that somewhere else that will store files backblaze B to like Scott said, so like Firebase does this. I know architect begin does this. A lot of them will just part of the framework is handling files, if you want to save files, or pull files off of these things than they will the use the associated integration for that, which is pretty cool. A buddy of mine is looking into using Firebase and serverless right now. And he does a lot of thumbnail generation. And he said that the what's the package that's used for resizing images, image magic, - -108 -00:50:39,390 --> 00:50:41,130 -Scott Tolinski: or sharp sharp is like, though, - -109 -00:50:41,670 --> 00:50:57,570 -Wes Bos: yeah, sharp and image magic are just built into Firebase, which just just works, right? Like imagine, you didn't have to worry about installing libraries and getting things working on Linux. It just just works with them. Which is so cool. A big plus for Firebase in that regard, - -110 -00:50:57,690 --> 00:51:14,220 -Scott Tolinski: baby plus? Yeah, I know. And I'm really curious, because I didn't necessarily want to when I went to cloudinary, I was a little iffy about, like, giving all of my images to cloudinary. Just because of like, I didn't, at the time, I didn't know a ton about them. But now I've obviously I've grown to absolutely love cloudinary - -111 -00:51:14,370 --> 00:51:16,440 -Wes Bos: Yeah, what it's an external service. - -112 -00:51:16,470 --> 00:51:36,210 -Scott Tolinski: Yeah, right. I really looked into what would it take to build your own cloudinary or at least, you know, cloudinary light using, you know, serverless functions, and it was really pretty awesome. Like, it didn't seem like it was that there was it seemed like there was a lot of people doing different guides on a different approaches, and totally doable. - -113 -00:51:36,210 --> 00:53:12,720 -Wes Bos: Yeah, yeah, absolutely. It's one of those things where it's a fun demo for like the quick resizing. And then you get into and you realize there's so much more under the hood that needs to happen. But for simple resizing and compression of images, you probably could kick out a serverless function. And totally even one of the cool things about cloud, there's too many cloud companies, what's the one called CloudFlare? workers? The there's so many cloud companies, the CloudFlare workers has like 20 demo scripts, and one of them is image resizing, I found those to be super helpful, just to get just to get a base going, rather than having to figure out what the docks are and string that together. Last one is off. This is not something I've done yet. So I don't take this with a grain of salt. But you would likely use I know a lot of people use JSON Web tokens for this. Because sessions and cookies don't work well. Sorry, I shouldn't say I should say, sessions, because because the JSON Web Token can go in a cookie. That's what I do in my own course. Yeah. But sessions are generally stored in memory or in a database and from one to another, you can serve from one page, and you still logged in in the next page. And that's great. And with JW T, you have to send the token along every single time, either with a header or a cookie or something like that. So if you have code that is spanning multiple computers, multiple servers, because they're all different serverless functions, then JSON Web tokens is a really good fit for something like that. Hmm. - -114 -00:53:13,290 --> 00:53:47,250 -Scott Tolinski: Yeah, I also haven't had too often seems like a lot of these platforms that do exist, like throw off into the mix is like, Oh, yeah, by the way, we also do, like, you know, hacer those off. We just talked about the MongoDB stitch does the same at everybody does. All right. So at that point, you gotta wonder to like, do you roll your own author? Or do you buy in a little bit torn up the services off? That's also a decision you have to make about potential lock in and in what is their auth package actually doing? Is it actually locking you into anything? - -115 -00:53:47,550 --> 00:54:51,090 -Wes Bos: Yeah, yeah, totally. That's lots of questions, lots of decisions to make. So that's the end of our list here and off the lot to take in about serverless. But we've been been meaning to do this for a while and Scott just kicked it off when he did his little YouTube video on begin and then I tried it out and I was like, Okay, this is this is way better than it used to be many years ago. So I'm pretty excited about all of this stuff. There's so much more we haven't covered so many more different places to host and so many different frameworks that we probably haven't even heard of yet. So we'll likely do a another one coming up and I would like to also get somebody on the show who has converted an existing like a large existing app, just to hear how did you do it? Like what were the benefits? Why did you even do it? So if you know someone who has done that not if you work for a company and you want to pitch your own serverless function thing, but if you know someone who's who's moved a large app or website over to serverless let us know cuz we'd like to have them on the show. - -116 -00:54:51,180 --> 00:54:52,800 -Scott Tolinski: Love that. Absolutely. - -117 -00:54:53,280 --> 00:54:56,100 -Wes Bos: All right. Ah, sick pics, - -118 -00:54:56,220 --> 00:54:57,810 -Unknown: sick pics. - -119 -00:54:58,350 --> 00:55:09,900 -Wes Bos: I'm gonna pick pick something thing that I got for my birthday. And that is a socket organizer. So I've had sight, you know, you know, like a socket set like a tool, right? Yeah. Yeah, - -120 -00:55:09,990 --> 00:55:13,590 -Scott Tolinski: it was. Okay. We I was thinking like power power socket. - -121 -00:55:13,860 --> 00:56:51,300 -Wes Bos: Oh, yeah. Or it could be WebSockets could be second WebSocket sockets in my life. Yeah. Anyways, I'm talking about the tool socket here. So I can Tom and I've had, I'm awful with organizing my tools. And I've had a couple different socket sets over the years when I was just like young, much better now. But they all fell into this one big bucket of sockets. And whenever I need to find the one that I want, I can't find it. And then like, when I'm at a garage sale, and I found like a coffee can have sockets for $1. This summer, it was such a good deal had and like the 10 mil is always the socket that you lose, because that's bikes and cars that are all 10 mil. Anyway, so I had this coffee, Canada sockets. And I was like, I need a better way to organize them. So I went on a hunt to find out how do you organize sockets. And what I ended up with was this sort of, it looks like a game. It's basically four tracks, and they all have the different drive sizes on quarter inch, three eighths and half inch. And you can just slot all the sockets on it. And then you can just carry this thing around wherever you go. And it's better than the stupid case that you get, because it's, it's much more sturdy. It's pretty cool. It's like 30 bucks. And I was able to take my coffee cans, sockets and fill them all up. And now whenever I need to work on something, I can just grab this thing and bring it with me, rather than having to dig through the coffee sockets. So it's just called the socket organizer. There's tons on Amazon. I'll link to the one that I have but do some YouTube research as well to see the ups and downs of them. If you're looking at one of these - -122 -00:56:51,360 --> 00:58:54,750 -Scott Tolinski: nice sockets, man, I need some jackets in my life. To be honest, my soccer game is bad. I bought that I'm the glute ham developer thing. It's like his big old giant piece of gym equipment looks like a horse. And yeah, it would there were so many. What are the socket bolt bolts? Just what is it bolts? Just a bolt? Yeah, they're just called bolts. There was just so many bolts. I was like, oh boy, I have really goofed up by not having that my socket said here I couldn't find the right ones I ended up having to use like one of those like crappy IKEA wrenches that they give you in the back of the Southern wrench in like, it took me like two hours, I probably would have been faster for me to drive to Home Depot device, I could set and then build it but I can't do that. My Sneak Peek today is going to be another ebook. This one I thought was really, really interesting. It's called the power of bad. It's right up my alley in terms of interesting books. It's uh, you know, I totally started talking to my wife about it, because she's a doctor of psychology. And she's just like, Yeah, I know all that stuff. But she's like, oh, okay, well, this is all really super fascinating. It's called how negativity affects rules, how the negativity effect rules us and how we can rule it. Now I personally am a fairly optimistic and positive dude. So I'm not like, I'm not super heavy and negativity getting into my life. But really, this is like really opened my mind to a lot of the ways that our brain works around negativity, like sort of the one of the big things in that book is sort of like, Oh, you could get 1000 comments on your YouTube videos saying that it's awesome. And then you get one comment, calling you a big dumb idiot. And you're only going to think about the one calling you a big dumb idiot and why that is the psychology behind it. And it is a bit of a fascinating book and it's really opened my mind to some of the things that negativity and you know, non positive thinking can creep into your life and I really enjoyed it. That's a fantastic book. So yeah, the power of bad - -123 -00:58:54,870 --> 00:58:56,550 -Wes Bos: cool off to check that one out. - -124 -00:58:56,820 --> 00:58:58,290 -Scott Tolinski: I got that on Amazon. - -125 -00:58:58,770 --> 00:59:12,840 -Wes Bos: Beauty. Um, shameless plugs. I'm gonna plug all my courses Wes Bos.com forward slash courses, you want to learn JavaScript, React node CSS Grid, Flexbox, you name it, check it out. Use coupon code syntax for 10 bucks off. - -126 -00:59:12,840 --> 01:00:14,670 -Scott Tolinski: Cool, man. I'm going to plug my latest course which is going to be well Forgive me the time of recording this. I haven't necessarily landed on though the release title of this but the end of the day, it's going to be animating react with framer motion. I'm a big fan of framer motion as I am react spring but framer. emotion to me is really just opened my eyes to some really cool animation stuff you can do. And it's just so incredibly simple. I just recently built my own drag and drop package based on framer. And it's just endlessly simple the syntax and what you can do with it is just immensely powerful. So if you want to learn all types of practical animations in react, check out the latest course on animating, react with framer motion on the level up tutorials.com. Sign up for the year and you can save 25% where the course is really neat. We are doing like a lot of like practical everything is practical here we're building a modal navigation or whatever all the stuff that you would actually use it for in real life. So follow along level up tutorials comm Thank you. - -127 -01:00:15,060 --> 01:00:21,030 -Wes Bos: Alright, thanks for tuning in. We will catch you on Monday later face please - -128 -01:00:23,040 --> 01:00:32,790 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax229.srt b/transcripts/Syntax229.srt deleted file mode 100644 index 2e81a78f8..000000000 --- a/transcripts/Syntax229.srt +++ /dev/null @@ -1,224 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Tolinksi ski. - -2 -00:00:26,610 --> 00:01:05,840 -Scott Tolinski: Welcome to syntax in this Monday tasty treat. We're going to be talking about CloudFlare. Specifically, I'm going to be asking Wes to describe some things in CloudFlare. Not because I don't know I know everything right? Of course not. Of course, it's not like I don't know. But I'm just interested in learning some new things from the audience perspective. So I'm going to be asking Wes a whole bunch of things about CloudFlare. And we're going to be talking about it. I should state first and foremost that we are not sponsored by CloudFlare. They have not paid us for this episode. This is just a pure curiosity and interest. So my name is Katelyn scam, a developer from Denver, Colorado, and with me, as always, is Wes Bos. - -3 -00:01:06,060 --> 00:01:07,110 -Wes Bos: Hey, everybody. - -4 -00:01:07,110 --> 00:02:55,200 -Scott Tolinski: Hey, Wes. This episode is sponsored by Log Rocket. Now Log Rocket is an amazing service to give you a session replay over what types of bugs are happening in your site, something happened? Well, it's going to be cataloged logged in Log Rocket, and you're going to be able to check it out, see it and you get this really cool thing. This is one of the services in my mind, you really want to go their website, I'm not just doing saying that because they're our sponsor. But if you do go to Log rocket.com, forward slash syntax so that way, then they know where you came from. But you're gonna want to watch this video that shows you exactly what you get with this session replay because it's a scrubbable video that shows you your network requests your console log, it shows you what the user did. And it is absolutely fascinating, you get to see all of the steps that they took before they broke your website. And it's so cool. So if you go to Log rocket.com, forward slash syntax, you'll get 14 days for free. And you're definitely gonna want to try this out. Or at least watch the video because that's enough to sell me it is so very cool. So thank you to Log Rocket for sponsoring. And I bet CloudFlare wishes they could thank us for, you know, the amount of trust we're gonna give them from this episode, even though they they don't need that CloudFlare a big big company. So CloudFlare for those of you don't know, they provide a ton of different services, so many that it kind of makes me overwhelmed when I look at it. So I see CloudFlare. And I hear everyone talking about CloudFlare. And granted, I've used it in the past for some things. But there are so many different things that exists within CloudFlare. Here, I wanted to ask you which of these services that CloudFlare has are using, which are you not using when why and maybe we can do a little bit of overview of these features, and maybe what utility they provide. - -5 -00:02:55,470 --> 00:07:43,950 -Wes Bos: Yeah, CloudFlare does so much. And it actually powers like 10% of the internet. One in 10 requests go through classified and there's a bunch of people that don't like that, because there's too much power in one spot. And that's that's a very valid concern, you definitely have to have trust in the company in order to use it. So what are they? Well, probably at the very basic, they are a DNS provider, which means that when you buy a domain name, and you set your name servers, you set your name servers to point at CloudFlare. And then you log into CloudFlare. And you're able to manage your a records, your MX records, your all of your validations all anything that you put in a domain name. So do you personally, are you hosting your domain there? Or are you pointing your DNS there and or both? Like are both of those things a possibility just to point your name servers there and let them you do the DNS stuff. Yeah, at the very basics, they are free DNS provider with a really nice interface. But you can also now transfer your domain names to them. You can't register new domains with them yet, they will probably roll that out at some point. But because they want you to use the rest of the stuff that we're talking about. They offer domain name registration at cost, which means you're not going to get them cheaper anywhere else. They don't have every single, they don't have a F. So I still have to go to Gandhi to get a F. But you can just renew them. I've moved all of my domain names over as many as I could. I personally, I buy them at hover, and then I just transfer them over to CloudFlare. Once the like two week lock is up, because I know that they'll they'll renew their at cost for those of you who've never transferred a domain is that process. So I've transferred domains, but do you want to Yeah, do you want to do a quick on that? That's a great question. Yeah, people. So like one thing you need to know about transferring a domain name is you have to pay for registration. But you don't have to wait until your domain name is about to be up for renewal. So if you've got eight months left at GoDaddy or something like that, you can move it over to CloudFlare. And then you get one year and eight months. So you have to pay the eight bucks for a.com. But you don't reset the clock, you still have that original time that you you paid at your original registrar and you can then move it over and how to do it. Well, first, you have to unlock the domain name, which is a setting in wherever you currently have your domain name. And then you have to get a transfer code. So you generate these one time transfer codes. And then you set up the, you just basically set it up on CloudFlare. And then they ask you for that code. And then anywhere between 20 minutes and a week later, that domain name will transfer over some registrar's, make you log in and approve it. Some registrar's don't like this, because it's a cash cow for them. So they want to make it very hard. Yeah, yeah. But yeah, once it's there, you have access to all of your DNS at CloudFlare. And then the one sort of the, the initial thing that they did was, they turn on what's called orange clouding. So you can either use CloudFlare, just as a DNS provider, which is great, because because they're such a big part of the internet, I feel like my stuff updates quicker on CloudFlare. I'm not sure if that's true or not. They provide caching. So if you have an image or CSS or HTML, they are a layer in between your web server and your request. So when as soon as you go orange cloud, you're essentially putting another server in between. and at that layer, they will proxy all of your requests in and they can do things like image compression, they can do caching, like, I'm just looking at my beginner JavaScript course here. So in the last two days, I've cashed a gig. So that's huge. If you're paying by the gig, that's out of 28,000 requests, 95% of the visitors are receiving a cached one to them. So that's great. If you if you're paying by the gig, this is gonna save you tons of money, and you don't have to pay for this on cloud flares. And another thing they do is DDoS protection. So if you're getting a DDoS is distributed denial of service, if somebody were to hammer your website, or if you were to DDoS yourself, which I've done many times in my life. CloudFlare will recognize bad actors like that. And they will try to prevent that based on lots of stuff, most of which is secret sauce internal to CloudFlare. Because they don't want to tell it same thing how like Google spam recognition works. They don't tell you how that works, because that's their secret sauce. Right? Totally. - -6 -00:07:44,400 --> 00:07:56,010 -Scott Tolinski: So this is all free so far. That's crazy. Yeah, yeah, that is that is totally free. Do you have to have all of your DNA? Like, do you have to have your DNS on there to take advantage of things like the DDoS? Protect? Yes, - -7 -00:07:56,039 --> 00:09:04,830 -Wes Bos: yes, yeah, you have to use their their DNS at a very low level. But even if you just use it, it's a very, it's probably one of the best UI eyes I've seen for managing your DNS. So big fan of that. They also hide your server IP. So like one, one sort of thing is like, how do you not get DDoS is don't let people know what your server's IP address is. Because as soon as somebody knows what the IP address to your boxes, or if your box is not set up, like on digitalocean, you can set up firewall rules that will reject any requests, unless it's coming from CloudFlare. And that will stop malicious actors from trying to go directly to your box. But in general, you should not let people know what the IP address of your box actually is. And if you look up the IP address of a CloudFlare domain, it will just send you a CloudFlare IP address. And there's no way to tell there's some like weird stuff around it is if you need to SSH into your own box. You have to sort of work around that. But that's well worth your time. Cool. - -8 -00:09:05,540 --> 00:09:43,040 -Scott Tolinski: Wow. So I okay, yeah, although this is getting the wheels turning. The main barrier for me is moving my DNS which I'm currently running on DNS simple. DNS was pretty cool. But I think I need to move my DNS over, and they need to start doing some of this stuff. Just to just to get I don't know, just to get a lot of these features. Right now I was on DNS simple specifically, because of their, they have these like really interesting sort of fake record. That's not like a real record. Let me see what it's called. They call it a like an alias record. I think if that's not a real thing, are you familiar with the alias record? concept? - -9 -00:09:43,500 --> 00:09:44,310 -Wes Bos: Yes, I am. - -10 -00:09:44,310 --> 00:10:29,610 -Scott Tolinski: There's there's some weirdness around if you want to alias the root domain? Yeah. Which CloudFlare does that as well. They have some special sauce around that which is not generally a thing that you can do. Right is super weird for me because I needed to do a reroute moving from HTTP to HTTPS. Yeah. It was like a lot of weird stuff. So cool. All right, well, I'm gonna have to do that this is gonna be on my list today. So okay, we have that if you also have here that there's a free HTTPS, is that something you're using? Because I've always I'm using my SSL through DNS, and Let's Encrypt. Oh, yeah, well, yeah, it is. Let's Encrypt, but it's automatically renewed and set up through DNS and Oh, so DNS simple does that for you. That's cool. Yeah, you don't even have to touch it. You just say, hey, this domains got DNS, and then it renews automatically and stuff. That's how - -11 -00:10:29,610 --> 00:11:24,150 -Wes Bos: it should work. Yeah. So CloudFlare will give you free SSL certificates, which is, was a big deal, when you had to pay for them, it's not so much of a big deal now that they are free for everything with Let's Encrypt, I still generate a Let's Encrypt SSL certificate for all of my sites, because the traffic between CloudFlare and your server, and the traffic between CloudFlare. And the user, between the user and CloudFlare is encrypted. But by default, the traffic between CloudFlare and your server is not encrypted. So I'd like to have that on Also, you can sometimes I have to just turn off CloudFlare. It's called going gray cloud, gray cloud domain name. And that turns off all the CloudFlare features, and just gives you a raw DNS. And if that's the case, then you lose SSL. So I still always do have an SSL cert. For all of my my websites - -12 -00:11:24,150 --> 00:11:31,140 -Scott Tolinski: for those two reasons. Interesting. Gray cloud, white papers and net developers have in common. That's cool. - -13 -00:11:31,410 --> 00:11:58,320 -Wes Bos: Yeah. That's great. I should say, also, like moving your DNS over CloudFlare. Does this cool scan? Well, they will take your existing DNS entries, oh, Lord them over I got again, that was like the Yeah, that was like, the hard part about moving DNS is that like, I don't want to, like it's so scary to move your email, DNS. Because if you take down email, you're, you're poached. So they do a really good job at that. Yeah, - -14 -00:11:58,320 --> 00:11:58,980 -Scott Tolinski: I gotta get that, - -15 -00:11:59,189 --> 00:12:51,510 -Wes Bos: what else they have a firewall rules. So I've got a couple firewall rules that are run on some of my course platforms just to keep malicious actors out. So I put those up there. So like, I think he got like five free firewall rules. And after that, you have to pay a lot of these, they give you a couple for free, and then you pay for the rest after that. They give you scrape shield. So if you've got email addresses or phone numbers on your website, CloudFlare is really good at detecting if the person viewing the website is a bot, or the what they do is they inject a little bit of JavaScript into your website that will they'll default, they'll hide email addresses, and then they'll use JavaScript to show them and then they can detect if it's a bot or not, and not show them which is pretty cool. Interesting. That's cool. Yeah, they've got stats, which I really like. So like survey, similar, you know, we talked about, like, Netlify stat. Yeah, - -16 -00:12:51,600 --> 00:12:55,140 -Scott Tolinski: I was gonna say it looks like they have some analytics stuff in here. That's new that I haven't seen. - -17 -00:12:55,500 --> 00:13:59,040 -Wes Bos: Yeah, some pretty cool analytics. I'm a big fan of this. And also, like, they CloudFlare knows bots, right. So I feel like I trust the CloudFlare analytics a lot, because they can filter out bots really, really well. And they're also not it's not client side stats, it's server side stats, which is pretty cool. Yeah. And what else here they, we too, had a whole show on serverless function. So they have this new thing called CloudFlare. Workers, which is pretty nifty. How we said, so CloudFlare workers to me, and makes it seem like there's some sort of connection to service workers are they're not, they're just, they're just serverless functions. That's a they're serverless functions, but they work similar to how service workers work in that you can intercept requests. Because of the unique position CloudFlare is in, you can run code in between the request and the response. And you can sort of step in, much like a service worker would be able to intercept the fetch request and serve up a cache instead of letting it go to the server. - -18 -00:13:59,370 --> 00:14:00,000 -Unknown: Interesting. - -19 -00:14:00,180 --> 00:14:31,560 -Wes Bos: Yeah, they have their own DNS, like if you go onto your, your router, do you use this? I do? Yes, I do. So they intelligently route your requests. So they're a bit faster. It's just one dot one dot one dot one. So if you go to one on one, no one, no one on your website, or you can even type in one dot one dot one dot one, like the actual words, and it will work which is pretty nifty. So they must have registered the dot TLD. Four, just dot one. - -20 -00:14:32,670 --> 00:14:35,880 -Scott Tolinski: Just so they could get that name. That's, that's kind of wild. Yeah. - -21 -00:14:36,209 --> 00:14:55,020 -Wes Bos: Yeah. And then they have CloudFlare warp, which is a How do you describe this? It's like a VPN, but not a VPN. Oh, so sometimes your ISP will. It encrypts your traffic like a VPN does, but it doesn't hide you like most VPN does. It's not going to fake your country or something. Oh, that's - -22 -00:14:55,020 --> 00:15:05,070 -Scott Tolinski: that's pretty useful, right? Because there's so many times I go to YouTube, TV and YouTube TV's like your Is there no VPN? That's it? You can't Oh, yeah, sorry, YouTube. Oh, I - -23 -00:15:05,070 --> 00:16:40,590 -Wes Bos: see. Yeah. Yeah, I didn't even think of that. Yes, because nothing in Canada is good enough to actually watch normally. But I should not lie. Actually, CBC has a pretty good app. But they have this little VPN that like, I have an at&t phone. And if you try to, it has this thing called stream saver, where it like, reduces if it tells you're streaming Netflix or YouTube or something like that, it will intentionally throttle those packets. And they shouldn't be able to do that, like data is data, right? You're paying for what you get. So CloudFlare, were warfel just encrypt that traffic. And currently, they only have it for your phone. And I'm assuming they will, at one point, roll it out. CloudFlare doesn't seem to roll out stuff very quickly. But when they do, the rollout is usually pretty good. And there's a little bit around warp who didn't work with YouTube initially. But I since went back to it after six months or so in it. It's awesome. Now, interesting. So they're bangers they don't put out a lot of stuff. But when they do, it's a hit. Yeah, well, like they do a lot. But like they don't, it doesn't seem like they rush anything out. Sure. But I can definitely trust the company in terms of the stability. And this is probably at some point, someone will take this clip of me saying I trust them and probably come back. But this happens. Anytime I talk about a company, something happens, they get hacked, or they're found like colluding with government or something, right. They're doing and it comes back to get me but that's fine. I'm I'm taking that risk. - -24 -00:16:40,650 --> 00:16:53,520 -Scott Tolinski: So okay, so there's a lot of these services here, right? There's, these are a lot of services. And there's a few that I see that you're not using, do you want to give some insight into what you're what you're not using? And maybe why? - -25 -00:16:53,910 --> 00:17:01,470 -Wes Bos: Yeah, one one thing I haven't used yet is they have a key value storage for their servers, where are serverless functions? What are they called workers. - -26 -00:17:02,070 --> 00:17:45,960 -So if you need some sort of database, they they make that available via key value storage, the only reason I haven't used it is because they don't give you any for free. So if you want to use even one little little bit, you have to pay for it, which is not how they've hooked me on the rest of their product. Like I don't give me give me 10,000 requests a month or something for free. I think that would be pretty cool. If they did that. I switched over to begin for a little project I just did I made a hit counter on service work or serverless functions. And in order to save the data, but how many hits were there? Yeah, I switched to begin because they have like a free tier of data. They also have an entire video streaming product, - -27 -00:17:46,140 --> 00:17:51,080 -Scott Tolinski: right, which I'm very interested in if we're being entirely honest here. Yeah, - -28 -00:17:51,110 --> 00:18:27,390 -Wes Bos: I actually had calls with them like a year and a half ago when I was having trouble with Vimeo. And they were just in the early stages of rolling it out. And like they don't have a player, they might have a player now, at least at the time I looked at it, they didn't have a player. It was just straight up API's for just doing raw, like it's really low level stuff, where you give them your mp4 file, they'll take care of the encoding and the transcoding. And CDN in and around the world and all that kind of stuff. Which is pretty cool, because I like them as a company. So I would definitely check that out if you are reevaluating your video right now. - -29 -00:18:27,590 --> 00:18:35,910 -Scott Tolinski: Yeah. And it's it is I mean, it is you're not hosting it there. So it's not like you're stuck there. Right? I mean, it's Yeah, yeah. Interesting. - -30 -00:18:36,420 --> 00:18:37,470 -Wes Bos: What sorry, say that, again, - -31 -00:18:37,710 --> 00:18:49,310 -Scott Tolinski: you're not hosting the video on CloudFlare. Right? you're hosting it in like an s3 bucket. Right? You are? I thought you were just pointing it to an existing storage, but maybe I'm totally wrong. Oh, does a store huh? - -32 -00:18:49,710 --> 00:19:48,900 -Wes Bos: Yeah, they I'm sure that you they slurp it up from an s3 bucket, or they can slip it up from anywhere. But they are the the store. And the interesting thing to put it out. So that's one thing like big files don't get cached. Like whenever I talk about how expensive it is to offer downloads for my videos. Everyone's like, why not just put CloudFlare in front of it? And I was like, Oh, yeah, I'm sure CloudFlare will love to cache my 100 meg video download, you know, and they they don't they don't cache zips or large files over I forget what the threshold is. It's more for images and CSS files. Interesting. Yeah. And the last thing I don't use, I don't use any of the like deep customization. So if you have like actual like really high level security threats where you need to block a lot of people get really into firewall and access control. They have tools for that. It's just not something I use all that often is the things I do use. I'm within the like five free per domain name. Hmm, cool. - -33 -00:19:48,930 --> 00:20:11,940 -Scott Tolinski: So we did get into this last little bit, so we're not going to have another heading here that says how you set it up. We've kind of talked about this, but let's say okay, so I'm on I'm on CloudFlare staff dashboard. I have entered my domain. How do you go through the physical process on here? Have you have a domain somewhere else? Where Yeah, what do you do? We can do this real quick? Um, well, I - -34 -00:20:11,940 --> 00:20:29,970 -Wes Bos: would first. Yeah, I would first just like don't worry about transferring the domain name to them. Just leave it on your current registrar while you toy around with this, you can transfer that at a different point. And that has nothing to do with almost all of this. But you just basically you you set it up, it slurps up all of your DNS records. - -35 -00:20:30,240 --> 00:20:34,980 -Scott Tolinski: Well, how do you how do you get it? Where's the slurp button? We're looking for the slurp button, - -36 -00:20:35,010 --> 00:21:21,860 -Wes Bos: you click Add site? Yes, you type in. Level Up tutorials.com. Yeah. And you click on the free plan. Yeah. click on Confirm. And then it's a scanning for existing DNS records. And now it's telling me we've got level up tutorials. We got store dot level up tutorials. Those are both pointing to the same. Yes server. Yes. Yeah. Then you've got some stuff looks like around working with galaxy. And I got a lot of records, mail, sending sending mail, and then some validations around sending transactional email as well. And then finally, inbound. postmark stuff. Yeah, you see you just have you've got like six or seven records here. It slurped them up. And I don't know I keep saying slip it out - -37 -00:21:21,870 --> 00:22:05,850 -Scott Tolinski: to you. Um, so this is a you know, as we do we're slurp. Did there's like a 711 slurp slurp song slurp song? Are you familiar with this? slurp song? No, no, it's a 711 hit called dance, the slurp. We should put this in the show notes. And I laugh about this. Because my boss, the guy who I started level up tutorials with Ben, he used to play this song because it's so ridiculous in our office. And it was like a huge, huge, like, hit in our office for a little bit. Just it's so funny. I had never heard of a 711 braided song before. But this thing is it's from the 70s it's very weird, and very worth your time. But up - -38 -00:22:06,390 --> 00:22:09,090 -Wes Bos: far. All right, I'm gonna I bookmark that, - -39 -00:22:09,120 --> 00:22:11,010 -Unknown: yeah, got a burnt out anyways. - -40 -00:22:11,130 --> 00:23:04,110 -Wes Bos: So when you add all these DNS records, you continue. And then the last sort of thing that you need to do is you need to go into wherever you have registered your domain name right now, and change your a wreck or your sorry, your name servers. So you there's generally two or four name servers CloudFlare will give you to name servers, you pop them in, and then you got to sit on your hands for anywhere from a half an hour to 48 hours, it's usually within a couple hours, they will move it over. And if everything went according to plan, nothing will have changed. That's fun. And then I would probably turn off. Sure I would probably gray cloud all your your URLs while you wait for that transition to go. And that one sure nothing breaks. And then just start turning on all of the CloudFlare you orange cloud Amal, and then just kind of visit your website and see if everything looks good. - -41 -00:23:04,140 --> 00:23:05,250 -Unknown: Cool. Wow. - -42 -00:23:05,250 --> 00:23:26,460 -Scott Tolinski: So this is pretty interesting to me. I am going to be just spending the whole day on CloudFlare right now. Not that it's so funny because I used it so much in the past, but I haven't used in a little while. And it seems like it's so much different and so much more evolved than it was before. So very into this. And again, once again. This episode is not sponsored by CloudFlare. But if they want to throw some cash for this, they can do that. Take - -43 -00:23:26,460 --> 00:23:37,590 -Wes Bos: your money. I will take it out. Yeah, send me a hat at least Yeah, no hat. Has anyone ever given you a hat? Hold on. Has anyone ever got a hat from a company? Have you? Uh, - -44 -00:23:37,620 --> 00:23:40,920 -Announcer: I got a hat? No, - -45 -00:23:40,950 --> 00:23:51,300 -Scott Tolinski: I think I did get a really bad hat from like one of those like really crappy foam trucker hats. I'm trying to remember who sent it, but I'm not sure wasn't good. I think my dog ate it. - -46 -00:23:51,660 --> 00:24:08,160 -Wes Bos: All right, well, well, actually, the CloudFlare went public. So they're like, they're a publicly traded company. Okay. And when they did their CEO had a suit and the inside of the suit was orange, like CloudFlare, which is so cool. And apparently his sister made it which was is even cooler. - -47 -00:24:08,190 --> 00:24:09,270 -Unknown: Yeah, that is cool. - -48 -00:24:09,330 --> 00:24:37,260 -Wes Bos: Yeah, kind of a cool company. So hopefully you learned a thing or two. That is why I always talk about how much I love CloudFlare. It just gives you so much for free. I think the reason why they gave you so much free is because they have major, major, major clients and like my silly website that gets a couple hundred hits a day is a drop in the bucket compared to like, yeah, they're like probably defending, like every half of half of the world e commerce on Black Friday. - -49 -00:24:38,970 --> 00:24:58,890 -Scott Tolinski: Right. Cool. Well, I hope you learned something about CloudFlare it seems like it's one of those essential tools that you should have in your tool box, your tool belt, whatever you're carrying around with you to do web stuff. So check it out. Try it try this out. Add one of your domains just play around with it. I always like to do this stuff on a test domain first or maybe like a fun little product one just see if it works. - -50 -00:24:58,920 --> 00:25:03,150 -Wes Bos: Yeah, yeah, yeah. Do a low stakes one while you get comfortable with it. - -51 -00:25:03,180 --> 00:25:08,490 -Scott Tolinski: I've just clicked the go on the moving level up tutorials over there right now so we'll see while we're recording this episode - -52 -00:25:09,450 --> 00:25:15,360 -Wes Bos: that's that's a good idea. Yeah, your your smallest project ever. Just the only thing that feeds your family? - -53 -00:25:17,010 --> 00:25:18,990 -Unknown: Yeah, that's like - -54 -00:25:19,020 --> 00:25:24,030 -Wes Bos: Alright, this is getting a bit tasty. So we'll end it here. Thanks so much for tuning in. Catch you on Wednesday. - -55 -00:25:25,230 --> 00:25:25,740 -Unknown: Please - -56 -00:25:28,260 --> 00:25:38,040 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax23.srt b/transcripts/Syntax23.srt deleted file mode 100644 index c43ce8d5c..000000000 --- a/transcripts/Syntax23.srt +++ /dev/null @@ -1,512 +0,0 @@ -1 -00:00:01,290 --> 00:00:10,529 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott Delinski and Wes Bos. - -2 -00:00:10,529 --> 00:00:36,990 -Scott Tolinski: Hey, welcome to syntax. In this episode, we're going to be doing a look back and a little bit of a look forward on our 2017 and into 2018 as we approach the end of the year here, so we're going to be doing a little bit of personal and professional look back seeing what worked for us what didn't work and what we're excited about in the future. We're also going to be talking about what happened this year with JavaScript, CSS and a web over all. - -3 -00:00:37,860 --> 00:00:40,740 -Wes Bos: Awesome. How's it going, Scott? How you doing today? - -4 -00:00:41,370 --> 00:00:53,850 -Scott Tolinski: I'm doing pretty good. All things considered not getting much sleep still. Oh, yeah. The little one but uh, yeah, all things considered. I'm feeling pretty good here. I'm ready to go. It's a beautiful sunny day here in Denver. So awesome. - -5 -00:00:53,850 --> 00:01:16,140 -Wes Bos: We're about to get slammed by a snowstorm and I hadn't got our snow tires on so i i went crawl into it's actually a good good use case for for talking about relationships, because I have a really good relationship with my mechanic and he'll always squeeze me in no matter how busy he is. So he just threw him on for me. He got some bloodaxe on there. Oh, - -6 -00:01:16,310 --> 00:01:18,000 -Scott Tolinski: nice. You're gonna be plowed through that. - -7 -00:01:19,310 --> 00:02:00,239 -Wes Bos: Looking forward to it. Cool. So let's let's jump right into it. We'll take let's start with some personal and professional look backs. Like personally, what what did we both do in 2017. And then we'll jump into some like what actually happened in the the greater industry in 2017. So other than this podcast being sponsored by blues x, we're also sponsored by Freshbooks, which is cloud accounting software and snip cart, which is the best way to implement a shopping cart with any any sort of back end on your website. So thanks so much to them for sponsoring. And we'll we'll go into them a little bit more partway through the show. So let's kick it off with some personal and professional stuff that both happened with us. How was your 2017? - -8 -00:02:01,140 --> 00:03:13,020 -Scott Tolinski: I thought it was great. 2017 is a year year for the books. I don't know, they might my my year is sort of up and down. Right? So personally, we had our first child, my son Landon was born in May. And so that's sort of totally world world changing. So on a personal basis, becoming father was just endlessly crazy and amazing. And all those things that they they tell you it's going to be without being able to actually understand. Yeah, so in that regard, you know, you know, 2017 is going down in the books, but for the for the but other than that, like my year was sort of all over the place in between, you know, the all the new parents stuff, where you're really not getting any sleep and your whole worlds completely turned upside down. I'm feeling at the tail end of 2017 to finally be feeling like things are moving forward in the best possible way. And yeah, I'm superduper excited to have that momentum going into next year. So I'm looking forward as 2017 was a like a launch pad for 2018. And all of the awesome stuff that I'm looking to get done. - -9 -00:03:13,860 --> 00:03:55,950 -Wes Bos: That's awesome. Yeah, we had. So we didn't have a kid this year. But we had our youngest in September. And still, like a good chunk of my 2017 was like when they don't sleep and you have a bad sleep, especially for me, I can't operate on very little sleep. It just rocks you and it really cuts into your productivity and just those that feeling good about where you're getting professionally, obviously, like I wouldn't trade it for the world. And I think there is a little bit of like dad juice that you get from from having kids that I didn't necessarily have before that. But it definitely definitely takes a toll on on your professional side as well when your kids aren't sleeping. Yeah, - -10 -00:03:55,980 --> 00:05:14,570 -Scott Tolinski: yeah, it's, it's been one of those things. And like, if you're doing a lot of recording, like recording tutorials and stuff like that, it's so hard to wake up and first thing in the morning and be like, yeah, let me start speaking into a microphone coherently, because it's not going to happen. You're just Yes, sound over. So I would have to like push my recordings back to later in the afternoon till I was feeling awake. And it's just been a huge adjustment. And these past maybe two months or so here coming into the end of the year have just been endlessly improved upon and improved upon. And now I'm feeling like I have this this significant flow going into next year. So other than that, you know, again, a second half of the year, I've improved in braking for like the first time in a long time, because when you get to my age, it's like kind of a big decline. But this year, I can finally say I think I'm a much better dancer than I was last year which I haven't been able to say for a little while, even though I've been practicing just because age, age injuries, that sort of stuff. Yeah, and health wise man, I've, I'm entering the beginning of 2018 better than I was at 2017 even though the middle of 2017 was a complete shit job working out for me, so I feel very good about it right now. Yeah. - -11 -00:05:15,889 --> 00:05:16,470 -Wes Bos: Awesome. - -12 -00:05:16,620 --> 00:05:18,180 -Scott Tolinski: How about you on the on those fronts? - -13 -00:05:18,259 --> 00:05:39,750 -Wes Bos: Yeah. My personal 2017 was was really, really good. We talked a lot about on the health and fitness show. I've been getting into shape. I'm turning 30 in February. So trying to get all that in gear before I I officially turn old. I guess that's when you officially turn all this 30 I think that's Yes. Are you 30? Now? Yes, - -14 -00:05:39,750 --> 00:05:48,089 -Scott Tolinski: I am. I'm 31 Yeah, what, uh, when is your birthday? February 18 18th. I'm not on March 1. So we're right around the same time. - -15 -00:05:48,149 --> 00:07:51,019 -Wes Bos: All right on. So yeah, it's I'm really happy to finally have my health taken seriously. And sort of getting that in all into gear. This was my first full year of this, I guess more on the professional side. But so my first full year of doing just being on my own for myself, for myself. So I've probably been on my own for about a year and a half now doing no client work. And this is my first full year of it. And it's funny, I was looking back on my my goals for this year, and I totally missed them, I thought I would launch a lot more content than I actually did. But if I look back in terms of like, what I actually did accomplish, and in terms of like revenue, and sales and all that stuff, I like I just kicked it out of the park. So very happy on that front, which I kind of goes back to last episode, we're talking more about course correction, then then slamming these goals. So pretty happy with with how everything went. In terms of professionally. I obviously, I made a lot of improvements to my course platform. So the reason why I didn't get as much content out as I had hoped in 2017 was I spent a lot of time on my my course platform and making sure that that could handle just absolutely everything from the the viewing experience the sales experience to marketing, I spent, like probably at least a month of my time this year, on email marketing, I still don't do a whole lot of email marketing, but I moved everything over to this company called drip. And they have they have this really crazy tagging and segmentation, and the ability to automate stuff. And it's it's really, really powerful. And I spent a lot of time making sure that every little piece of data that I have on someone who's watching a course or on someone who's visiting a website that goes into my drip, so that if I need to be able to target people appropriately. So it's pretty happy about moving over. That's a big undertaking, especially when like it doesn't show at all It shows in my sales, but it doesn't show to anyone at all. - -16 -00:07:51,750 --> 00:08:12,149 -Scott Tolinski: Yeah, that's one of those things that gives me a lot of anxiety. Like I don't like working with emails already. Like I don't I hate working in HTML emails. I don't know anyone who honestly really likes it. If you like it, shout out to you. But like, yeah, anything dealing with email management email lists, that all just gives me a lot of anxiety for some reason. - -17 -00:08:12,480 --> 00:08:49,230 -Wes Bos: Yeah, it's it's not. I think as developers we we we all hate email. And we hate getting email. And it's, it's this like, sort of weird double edged sword where it's absolutely the best thing you can do for your business. And it's absolutely something that we we generally don't like. So I've been pretty happy like with where I've been at for email in the last year in terms of like the tone of how I write them, and how often I send them and whatnot. And the response to them is always great. And it always helps my sales. So I think I'm in a really good spot with email. And that's that's been at the forefront for my 2017. - -18 -00:08:49,670 --> 00:08:52,260 -Scott Tolinski: Nice. Maybe I'll have to put that on my 2018 - -19 -00:08:52,280 --> 00:09:05,540 -Wes Bos: Yeah, I had goals, maybe we'll have a show on specifically on email, how to how to do it without feeling yucky. What else do you have on on your personal professional front? - -20 -00:09:06,210 --> 00:09:30,420 -Scott Tolinski: I got a lot of professional stuff. I for a large part of this year, I worked on that startup I mentioned in the last episode. And it took a lot for me to do this because it was the largest codebase I had built it was, you know, the project felt like a part of me. But I cut ties with the team and I cut ties with all of that code and that project. And that felt very, very, very, very freeing. - -21 -00:09:30,420 --> 00:09:32,370 -Unknown: I felt excellent, amazing. - -22 -00:09:32,580 --> 00:11:01,080 -Scott Tolinski: Yeah, so now all of that time and energy and effort that I did not get to put towards level up tuts is going to be used directly towards a level up tuts. And again, I'm just so excited for I am seeing what I was able to accomplish with it this year while I was doing this other thing. So if if I'm 100% invested 100% available for it. I'm just excited to see what I could accomplish right? Yes, your site made here. huge huge steps forward, the loading time got cut down like crazy because I started using pretty, pretty awesome code splitting, using react loadable and meteors dynamic imports. I added server side rendering, I added Redux, I added web workers and stuff like that to make it work better offline. I added local storage persistent state for my Redux store. major redesign on several pages, a new payment system, added Braintree and ripped out the whole thing. Oh, yeah. Simplified all of my offerings before was like five different ways you could buy things on level up, and it's totally been simplified. So overall, the site is is is cruising right now. And I'm really excited to see what I can do for it in 2018. But for Siri, series wise, I recorded a whole bunch of series two, I probably recorded. I don't know I probably I'd have to do some math on here. But I probably recorded like, 400 tutorial videos this year. Wow, watch? - -23 -00:11:01,470 --> 00:11:02,100 -Unknown: Yeah, - -24 -00:11:02,369 --> 00:11:30,510 -Scott Tolinski: I'll have to do some math on that one. But that would I don't know if that would be my highest year. I typically work around that range for recording. But I have recorded a lot of stuff. And I feel really good about I don't know, production values, increasing and, and editing and everything just seems a lot better. Not only that, but we started a podcast. And yeah, that's been a ton of fun. So that's, that's number one, I think, - -25 -00:11:30,540 --> 00:12:50,280 -Wes Bos: yeah, look, we've been, we were talking about launching this thing for for forever, right. And it's something that I've wanted to do forever. And podcasting has blown up like I've been listening to podcasts since like this week in tech launched like 11 years ago, or whenever it launched. And it seems like they've been it's been really, really taking off. And we'd launched it what June, late July, late June, something like that. Yeah. And now we're 23 episodes in and it's been amazing. I've been like super happy with, right out of the gate, we had some extremely solid listener numbers. And I guess that's because we both have had audiences elsewhere. So we were able to sort of launch with a with a bang. And it's really well been getting some really good feedback in terms of what people like and what they don't like. And we're talking about doing some sort of shuffling up some different formats in the new year. We're starting to get some consistent sponsors, people are finding value from actually sponsoring it, which is, which is great to me to be able to help other businesses reach our developer audience. So yeah, like super happy that everything that has gone on with a podcast and Big thanks to everyone who has has left a review or supported us or shared it with a friend because I really enjoy it. Right? - -26 -00:12:50,520 --> 00:13:05,010 -Scott Tolinski: Yeah, tremendous. I mean, I'm thinking about how much better the show's gotten in the 23 episodes, and I'm thinking like, Man and 23 more episodes, how much better is it going to get, it's just gonna keep getting better. So here's, here's looking at the features actually index, I feel like - -27 -00:13:05,010 --> 00:13:27,780 -Wes Bos: say, even myself in terms of how I can explain things, I think my tutorials are getting better. I think like, when I give conference talks, I'm a lot more confident, I'm able to just go off the cuff a lot more. A lot of that had come from my teaching in person for six years. But I think doing this every single year, every week, in week in week out has has really helped my ability to explain things. - -28 -00:13:28,020 --> 00:13:49,470 -Scott Tolinski: Yeah, yeah, I agree. I recorded seven tutorials on Friday for Redux and react. And I maybe misspoke, like three times, all seven to door I like, my video editor is not gonna have anything to do. He's gonna chop out some dead space, he's just gonna be like, wow, this is you didn't even mess this up at all. So that's amazing. Yeah, definitely improving on that friend. - -29 -00:13:50,700 --> 00:16:11,160 -Wes Bos: What else from my end, I launched my learn node course, which did extremely well, I was really happy with that. That was a huge undertaking. For me, it was a really big course, I spent a lot of time making sure that it would be very feature friendly. It was all it was all done in a sink await, which I was really happy at the time a sink away had just landed in node and like the next week I launched it, which was amazing. I updated my s6 course. My JavaScript 30 course Actually, I was just looking at it. It's been out for a year now it came out on December eight. But most of the traction and most of the sort of the winds and all the feedback and all the people that have discovered it had come in this year. So I was really happy to see all the people that have gone through that course and taking it that's by far my most successful course so far in terms of signup numbers and people taking the course. And then I've been working the last couple months on I'm sort of half done react course and half done a grid Course button boom working on both of those sort of in parallel and just pausing the mouse I have have to wait on things. So early 2018 is going to be jam packed with some big big releases. Awesome before oh and stickers that was that was one thing sticker mania sticker meanie I think I did two big runs of stickers and I finally have like a process and a fulfillment and all the stuff in place for for stickers and up until the last batch that I had done I had been just sort of breaking even trying to figure this thing out. And at the last batch actually made a little bit of money, which I was happy about because I don't know, it's it's a silly thing, but it takes a lot of time. And in order to get all of that in place and to to modify my code base to sell stickers and to automate the the printing and like it's huge. There's like literally 5000 people each time I sell stickers that are interfacing with this thing. So it was kind of a neat little challenge to to be able to move my skillset over to the physical and do the whole I've always been curious about the whole like, fulfillment and hearing them from like, I have them printed overseas, so it's kind of it's been a been fun to do that. I'll probably do them again sometime in 2018. Just not not yet. - -30 -00:16:13,320 --> 00:16:16,350 -Scott Tolinski: We'll stick it out. Yeah. Nice. - -31 -00:16:16,410 --> 00:16:17,370 -Unknown: Oh, by anymore. - -32 -00:16:17,370 --> 00:16:52,200 -Scott Tolinski: Um, let's see professional, personal, I don't know, thinks thinks of just, like I said the first half of the year. You know, it wasn't necessarily as focused son was born and then got really unfocused. And this last half of the year been really super focused. Yeah. So I think that's it pretty much it for me. I, like I said made major, major, major updates to the platform. I've released a whole bunch of tutorials Somehow, I don't even remember how I did that. But somehow, but yeah, no, that's it for me some - -33 -00:16:52,200 --> 00:17:25,070 -Wes Bos: What about your your goals for 2018? And Scott and I used to be part of a, what's it called? What do you call that? mastermind. A mastermind which is where we sit around and maniacally laugh and things like that we actually call What do we call it the yacht club, where Yeah, the yacht club, the yacht club, where we would all agree names and talk about businesses. And one day, we'll buy yachts. But the the thing with goals is that you need to make sure you make smart goals. And this is business school West coming out. But a SMART goal is simple, wet, - -34 -00:17:26,010 --> 00:17:26,520 -Scott Tolinski: miserable, - -35 -00:17:26,550 --> 00:18:05,090 -Wes Bos: simple, measurable, attainable, and hold on, let me pull this up. I don't want Business School West doesn't know how to specific, measurable, achievable, realistic, and timely. So like, having goals, you don't say like, I want to get better, I want to get in better shape, or I want to get more views on YouTube, you say, I want to lose 15 pounds, I want to get 30,000 more subscribers or something like that. So we're not going to go through our smart goals right now just because like they're a little bit more personal. And sometimes they're monetary or whatnot, but just kind of a look forward. What are you hoping to do in 2018? Yeah, - -36 -00:18:05,250 --> 00:19:39,150 -Scott Tolinski: yeah, as you say that, like all of my goals listed here, because I didn't want to get personal, but they were like better production, like Yeah, totally. Yeah. Better features, ya know, so for me 2018. Like I said, I have all this energy that I was able to put in at the second half of this year. So I'm looking forward to having a full year of putting all that energy in, I'm going to release a new series every single month for level up tuts. So if your level of pro you can subscribe and vote on what those series are going to be in shape which content I make. But so I'll be releasing a lot of premium tutorials, I plan on releasing a lot of stuff for YouTube, because of I'm going to be having a video editor do editing for me, I'll be able to record a lot more I'm looking actually to hire on a few different people to help out here in their contract wise to like, let me focus on the things that I like doing, which is recording tutorials because you know, if I can spend more time recording, I can produce more and not have to worry about all the stuff that I'm doing. I'm the type of person that likes to do everything myself. So trying to break out of that mold of doing everything myself and getting a little bit of help here and there. So yeah, better better. more tutorials, higher production values. I'm going to be building a set in my office at some point over YouTube channel. Yeah, I know I've been thinking a lot about this and I don't have a totally down yet, which is why I don't have it but I'll be building some sort of set. I'm gonna try to make it not cheesy zero cheese factor. It's not my style. Trying. Yeah, trying desperately not to make it cheesy. And then - -37 -00:19:39,800 --> 00:19:40,310 -Wes Bos: yeah, - -38 -00:19:40,340 --> 00:20:29,760 -Scott Tolinski: so better features on the site. There's a lot of stuff on the level of tutorial site that I just, I don't know needs improvement, UX wise, features wise, whatever. There's always things you're your own worst critic. I look at it. I see all of the imperfections and all the things I want to fix. So there's a billion billion billion things I want to add a level up tutorials and And most importantly, here, I think this is a big one. I want to spend less time working overtime, because right now I work constantly. I work 24 seven, and with a son and a wife, it is not a good idea to do that all the time for my mental health. Yeah. So really, I want to be able to take weekends off and evenings off and spend time with my family and stuff like that. So. So the goal is going to be able to get things into a place where I have to work less overtime, which is, which is always good. - -39 -00:20:30,050 --> 00:21:00,150 -Wes Bos: Yeah, yeah, totally. I think that in in 2017, I got really good at not caring when an email comes in, and not being like, Oh, I should just run up quickly in in reply to them, or I should quickly in like, just being able to like, whatever, I'll do it on Monday, I don't know if that comes with just do been doing it for a while or being able to just like, let it go and not have to worry about it. So I don't I don't know how that happened. But I'm really happy that it has really improved my weekends. - -40 -00:21:00,630 --> 00:21:03,720 -Scott Tolinski: Nice. Yeah, I'm looking forward to that. Cool. So - -41 -00:21:03,720 --> 00:22:47,100 -Wes Bos: my goals for 2018 are not a lot, I think 2017 was was spent a lot of time sort of prepping a lot of the foundations for a course platform and marketing and email list is really, really big now. So I have the sort of stage in 2018 is going to be just really doubling down on what is working in and releasing lots and lots of content. So I'm hoping to release four new series in 2018. I've got the advanced react one coming out. I've got the CSS Grid one coming out. I really want to do like VS code. One A lot of people have been asking for that I think that'd be a fun one to do wouldn't be too hard. And then a lot of people, the one thing that really kills me right now is they don't have anything for people who are new or new, or new ish to specific technologies, meaning that someone comes to me and they say, I can't take your courses because I'm not good at JavaScript. And because my stuff is all like beginner to more intermediate, I guess. Yeah. Like it's not the not the one on one. So I've spent a lot of time like at least two years just thinking like, what would an introduction to JavaScript course look like? That is not the same as the thousands of them that are out there already. So I really got some good ideas in terms of like how to make a JavaScript course, both for people who want to fill in the gaps. Maybe you've been doing JavaScript for a year or two, but you you still feel a little shaky. But as well as it can be, you can just like give it to somebody, you can point people to it and be like, if you are new to JavaScript, this is where you need to go. And it's not the like, same old document dot write and alert or prompt or things like that, that you've seen over and over again. - -42 -00:22:47,220 --> 00:22:54,120 -Scott Tolinski: We should we should talk off Mike about this. Because I have a I've been doing it. I have a whole page of notes about the same. Oh, really? Yeah. - -43 -00:22:54,150 --> 00:24:07,770 -Wes Bos: Yeah. Sweet. Off, Mike. Hashtag off mic. Sorry. And I also want to do that for for CSS as well, because people have been coming to me. And it's developers, all experiences being like, why don't you show us the CSS in your courses? And the answer to that is because it would be 30 hours long. Like it literally takes me weeks to design the stuff. And it but people just want to know, like, how do you do this? What's the best way to approach it? And I think that it could make a really nice CSS course where, regardless of if you're brand new to CSS, or if you just kind of shaky I know a lot of offers come either from being back end devs or just JavaScript devs. And they, they want to get like rock solid at writing CSS. So those that's my hopeful and by I go back to the if it's not a hell yes. It's a no, that's a quote from Derek Severs. There's a lot of really fun stuff coming my way in terms of conferences, and training and partnerships, and all kinds of stuff. And it's all really exciting. And I want to do it all. But I just can't. And I think I need to double down on actually just creating more content. Because that's, that's what I love to do. And that's what my business is, right? - -44 -00:24:07,950 --> 00:24:10,230 -Scott Tolinski: Yeah, on a percent. Exactly. - -45 -00:24:10,260 --> 00:25:40,200 -Wes Bos: I also want to rewrite my checkout experience, both because I want to be a little bit more flexible in terms of the different payment gateways that I can accept in the future. As well as the Mobile Checkout is a little bit wonky right now, which I know is probably losing me some money. The the design of it isn't great. I know sometimes people miss type their email address, and I know that first people are stupid, and they don't know how to type their own name and their email address. But probably more importantly, I think that's something that design can solve. If you're having people mess up when they're checking out. I think that design is is something that can can solve that issue there. And then my last one is continue to delegate and automate and so I've I've read it In the past month, I've hired on an assistant to help me with my email, which is my most hated thing in the world, which is great. So she's been, she's been doing most of my email, and all the sticker stuff and a whole bunch of all over the place different stuff for me. So that's, that's been my first foray into delegating to other people. And I really want to figure out how to continue delegating and automating I always prefer to automate things. But at a certain point, you need a human to step in and do some work. So I'm been been doing really well at the automate part. And I think the the delegate part is where I'm at now. - -46 -00:25:40,499 --> 00:25:52,560 -Scott Tolinski: Yeah, so it seems like we have pretty similar goals and a lot of ways more content. And, you know, delegate, automate, improve experiences. - -47 -00:25:52,620 --> 00:26:22,320 -Wes Bos: Exactly stuff. Yeah. And I also want to get faster at recording. I feel like it takes me a long time. I feel like you're much faster at making content than I am. And I think that that's actually one of the first things I asked you, when we you join the, the mastermind is how do you how do you record so much, and so little time? So I want to figure out a better process or I want to be able to just flip on my screen recorder when I've got half an hour, and it'll have to set aside like half a day. Otherwise, I won't be recording or something like that. - -48 -00:26:22,350 --> 00:26:29,580 -Scott Tolinski: Yeah, sure. Yeah. There. I got a lot of tips there. Some of it's just practice stuff. But yeah, I'd love stuff. Cool, - -49 -00:26:29,670 --> 00:26:30,540 -Wes Bos: tasty, treats, - -50 -00:26:30,780 --> 00:26:41,160 -Scott Tolinski: tasty treats. So talking about improving your cart experience, a nice way to improve your cart experience would be by using a snip cart. Yeah. - -51 -00:26:42,600 --> 00:29:20,490 -Wes Bos: Everyone on Twitter has been talking about Scott's amazing. What do you call that segues a segue. It segues into it. So sniff car is our sponsor. And what they do is they provide an entire end to end shopping cart experience for your website. So if you want to sell something online, like a course or like stickers, or a T shirt, or any type of or maybe have like a reoccurring billing thing, then you don't want to have to build it yourself. Because like we just went over, it can take months out of your year to actually build this stuff yourself. You can just drop snip card onto your website. And it's like sort of the the perfect thing. Because some of the some of the other solutions, they kick you off to an external website to complete the transaction. And I know myself that you're going to lose money as soon as you kick somebody off here or your website off to a separate one. So what this does is it just drops right into your website with a couple lines. It's a JavaScript library. So you just drop it into your website with a couple lines of HTML, and you'll be able to integrate the cart right into it. And then it is a service that essentially replaces your entire back end for you. So some of the features that it has reoccurring, you can do discount. So any type of coupon codes, you can handle all the payment gateways. So you still can work with stripe or PayPal, or all these different payment gateways that you have. It can deal with shipping, calculating how much a specific thing is going to cost to ship to you invoices multicurrency customer dashboard, all the stuff that you would want in in being able to to sell stuff online, it does the back end for you. And this is perfect, because we're slowly moving over to this whole like sort of like, no back end or serverless. And if you if you want to be able to charge a card, even with stripe j s, you can still drop the Buy Now button on your page with JavaScript. But at some point, you need to charge the card, or you need to charge that token on a server. And whether you're doing that on a traditional back end or a serverless function, that's still a back end. So snip cart will take all of that away it will do all of the the transaction processing for you. If you head on over to snip cart.com for slash syntax, they are going to give you three months for free which is amazing. And yeah, I don't know that's I'm pretty happy that they're sponsoring because when I had a quick call with the the developers behind it, and I was like this is like perfect overlap because people are building on this like totally so client side experiences in react or something like this. And if you need a shopping cart, you could just drop in snip cart. - -52 -00:29:20,490 --> 00:29:22,610 -Scott Tolinski: Super nice, super. - -53 -00:29:23,400 --> 00:29:28,050 -Wes Bos: Yeah, so thanks so much to them for sponsoring. Make sure you go to snip cart.com forward slash syntax. - -54 -00:29:28,350 --> 00:30:02,640 -Scott Tolinski: Nice. Cool So okay, we went over some of our our stuff in this year. Now let's get to this some some Cody, Cody stuff, some code here. Let's talk about JavaScript in 2017. Because to me, the overall message of JavaScript in 2017 is that things got easier and better to build like, like everything got easier to build stuff between next j. s and Gatsby and all that stuff that came out that Smith did create react app come out in 2017, or 16 2016. - -55 -00:30:02,640 --> 00:31:01,800 -Wes Bos: But it was I think, maybe mid 2016. I think 2015 2016 was the year of people being extremely overwhelmed. Everything sort of thrashing changes, everything was quickly 2017 was was still a year of a lot of stuff coming out. But I think a lot of the things that did come out, were like, this is going to make your life easier, and it's not going to be so bad. And we saw a lot of really kind of neat new things come out in terms. I think, for me, the biggest ones were these frameworks, the server side rendered frameworks, like, personally, I use next j. s, but it for view people, there's a knucks, j. s, Gatsby j s, which is a static site generator. And they sort of just bundle all both the like the hard web pack part as well as the how to use server side render react all and it makes it just a super simple. So I was so happy to have all of these these frameworks start to become standard in in 2017. - -56 -00:31:01,949 --> 00:31:36,810 -Scott Tolinski: Yeah, I spent less time writing configuration in 2017 than I have in 2016 2015. So all I think that's like, the overarching message to me is that things are getting better. Not that they were bad, but things are getting cooler. And so so yeah. So in JavaScript, we saw the release of these SSR frameworks, static site generators, basically, tooling just platforms on top of platforms that make things easier to build. So I'm really excited to see I mean, even what was the one that just was at parcel is the thing that just came out? Is that - -57 -00:31:37,589 --> 00:31:38,670 -Wes Bos: one parcel? - -58 -00:31:39,059 --> 00:31:46,410 -Scott Tolinski: Is that the correct name? I might be totally wrong. is a Webpack build configuration? - -59 -00:31:47,970 --> 00:32:12,540 -Wes Bos: Oh, the new one that just came out? Yeah, parcel. Is it parcel parcel .js dot org. Sorry, I tweeted about this. So yeah, it's like an alternative to to Webpack. And it's for now with the zero config, which everything starts off as zero config, and eventually the maintainers. Break and add a setting. But for now, it's a zero config bundler. That is sort of an alternative to Webpack. - -60 -00:32:14,100 --> 00:32:25,800 -Scott Tolinski: Nice. Okay. So yeah, so I think I think what we're even seeing that is the tail end here is that the tooling is going to be getting less and less of a pain in the ass. So that's a plus for me. And I've been - -61 -00:32:25,800 --> 00:32:53,700 -Wes Bos: saying this for all year, I, people have been asking me for a web pack course. And I was like, No, just wait, it will get easier. And there will be people that either build stuff on top of web pack, or there will be alternatives to web pack that are a little bit more suited to whatever use case that you're you're specifically working on. Because I don't think that it makes sense for every every Jo developer to be configuring a web pack themselves. It's just too difficult. - -62 -00:32:54,000 --> 00:33:01,440 -Scott Tolinski: Yeah, hashtag let someone else do it for you. Gonna be my motto for 2018? - -63 -00:33:02,460 --> 00:34:50,040 -Wes Bos: Another thing that happened in 2017, I think is that graph qL started to gain some serious momentum. So graph qL, if you haven't heard of it is we didn't do our episode on graph. QL. Did we know we talked about it like several times guy, tasty one coming for you feisty is a rather than having like a REST endpoint, that you you hit your REST endpoint for maybe orders. And then you use specific, maybe you want like a user. So you have to hit another endpoint for the user. And then maybe you want to list a product. So you hit another endpoint for that, instead of that you have sort of like one endpoint and you create these queries, which is essentially it looks like the data without, it's just JSON, but with only the left hand side values, and then you hit this endpoint, and then it will just populate the only the data that you want. And the benefit to that is that you both your sponsors are just as small as you could possibly get them, it only contains the data that you want, maybe you only want the orders with the order number and a description of the order and not the rest of the data, you don't have this request that. And then I guess the The other benefit to that as well as it's relational. So you can request maybe users and orders at the same time, or maybe you can ask for an order and then populate the product info from that order. And then from that product info, you could also populate related products and you can go like three or four levels deep populating the values as you want. So, it's really exciting. It's gonna take a while because it's a big shift change from graph qL from arrest to graph. qL but I think that if there's something worth learning in 2018, especially if you are looking at like getting a job and having a nice looking resume, I would definitely spend some time on on graph qL - -64 -00:34:50,279 --> 00:35:02,100 -Scott Tolinski: Yeah, yeah, man. I love how it's like sort of self documenting to with your queries. I mean, you know what the data you're getting, so you know what data is going to be available? It's super slick. I really love it. - -65 -00:35:02,250 --> 00:35:55,190 -Wes Bos: And it's it's all typed. I guess this is another trend for 2017 is Yeah, typings. Right. So big, big, big trend. Yeah, graph qL is typed in. For those who don't know, type two means that in JavaScript, we were what's called loosely typed to mean that you just create a variable called age. And you could set that to a number or a string or an object or anything that you want. And these type languages like TypeScript or flow, which is tacked on to JavaScript, or graph qL reason ml. So you have to specifically give it the type. So whether you have to tell it if it's going to be a number or a string, ahead of time. And what that does is it makes your the tooling and the autocomplete really, really nice, because as you start to type, it will try to suggest possible fields for you in the graph. qL query, which is neat. Yeah, - -66 -00:35:55,190 --> 00:36:01,190 -Scott Tolinski: I think that was something so like, TypeScript, I think had its moment once Angular two. - -67 -00:36:03,710 --> 00:36:09,110 -Wes Bos: Did you hear that? Yeah. I just got, I just got the ring doorbell. - -68 -00:36:09,330 --> 00:36:12,170 -Scott Tolinski: I have the ringer. I just got the ring doorbell to on Black Friday. - -69 -00:36:12,209 --> 00:36:21,650 -Wes Bos: Yeah, me too. And I I hooked that up, and I got the desktop app. And somebody walked up to my front door and the motion detector went. - -70 -00:36:22,290 --> 00:36:24,170 -Scott Tolinski: I see. I hear you have the wind chimes. - -71 -00:36:25,020 --> 00:36:27,570 -Wes Bos: Yeah. Now you can leave that in if you like, - -72 -00:36:27,860 --> 00:36:28,880 -Scott Tolinski: Oh, you know, it's hilarious. - -73 -00:36:29,129 --> 00:36:30,360 -Wes Bos: What were you gonna say? - -74 -00:36:30,540 --> 00:37:31,770 -Scott Tolinski: No, I say I was gonna say that, like, Oh, is it? I know, was it 2015 when Angular two was announced with being TypeScript either way TypeScript had its moment when Angular two was going to be fully in TypeScript. Right? Because now everyone is sort of by default, using TypeScript in this platform that's hugely popular. So that instantly makes it one of those things that everyone knows about. But in this year, I mean, between flow reason ml, or reason, I guess, and, and TypeScript, you definitely saw a huge trend of people really making the effort to do it in all of the platforms react and whatever, even if it's not required, like a lot of people are going to a strictly typed, or a type system here. Something that I don't think we have really seen this strong of a shift into type systems since I don't know I don't think we've ever seen it. So it's really interesting to me, I'm not using anything yet. I'm trying to see which one is the winner. Yeah, waiting for a winner right now. - -75 -00:37:32,250 --> 00:38:02,610 -Wes Bos: Just sitting on the sidelines. It's also really funny to process. I've always been a JavaScript developer. And then as we get, I've always been a JavaScript developer. And I've always been a text editor user. And as many people get excited about typings in JavaScript and autocomplete in our VS code, it really makes people who have meaning other languages that are typed for Oh, yeah. And it errantly makes them angry, but I'm sure just let us be excited, folks. And we know that this has been around forever. Yeah, I wonder - -76 -00:38:02,610 --> 00:38:14,520 -Scott Tolinski: if there is like that thought that JavaScript developers like, don't know this, like, don't know that these things have existed before. Like, yeah, I think we all know, it's just exciting to have those kind of toolings Yes, - -77 -00:38:14,580 --> 00:38:36,570 -Wes Bos: come come to the JavaScript realm. Another thing that happened in in JavaScript land or maybe in WordPress land is that WordPress has been been really rewriting their entire post editor with this thing called Gutenberg. And this is pretty exciting because they made the decision to go with react in WordPress core. I - -78 -00:38:36,570 --> 00:38:37,080 -Unknown: think - -79 -00:38:37,080 --> 00:38:39,420 -Wes Bos: it was up in the air for a while there because of the - -80 -00:38:39,440 --> 00:38:51,710 -Scott Tolinski: I wonder what happened with that, because it they announced that they were dropping react because of the the pattern stuff. Yeah. But then when react dropped the patent stuff? Did they I believe, - -81 -00:38:51,810 --> 00:39:52,920 -Wes Bos: I believe, continued react, I think they I didn't hear an announcement. But I did see some people posting screenshots of how do you write a Gutenberg add on and Gutenberg Gutenberg add on and you can write them in react, which is really, really neat. So that's pretty big, because we're again, JavaScript is infiltrating everywhere. And I think that's going to be a big shake up in. In 2018. We're gonna see a lot of the WordPress developers needing to double down on their JavaScript and even I think it was like a year ago or a year and a half ago, Matt Mullenweg said like, learn JavaScript deeply. And there's still a lot of people in WordPress land that are skirting by on not knowing a whole lot of JavaScript and time is running out I believe, because it's it's a it's everywhere. And if you're going to want to write next generation WordPress experiences, you're going to need to learn some serious JavaScript or at least some some decent JavaScript. - -82 -00:39:53,150 --> 00:40:32,580 -Scott Tolinski: Yeah, and you know, it'd be really sick would be like, a full on like perfect WordPress experience or perfect There is a Drupal experience that are would be 100% node and react based. I mean, there are people who don't who are doing the node and react CMS sort of land. Yeah. But it'd be sweet if there was like something that was as good as WordPress is for, for what it does. And who knows what that even looks like? Or if that even makes sense. Yeah, the 18 there's there are things like graph graph CMS that look like really super sweet that that are kind of taking over some of that CMS role. But also, there - -83 -00:40:32,580 --> 00:41:12,980 -Wes Bos: was another one that went there was another one that I was using for a while it was based on Express. I totally it totally, I'll put it in the show notes when I remember it. But it seems to development seems to have stalled. And I don't know I think that WordPress is going to become much more of a CMS people love the back end of WordPress, people are love to be able to put their content into it and myself, I'm just so tempted to to rewrite my website and I'm not they're not not leaving WordPress anytime soon. But I'm very tempted to rewrite the front end in next j. s and how it all like preload and really slick interface with animations and be like, it's WordPress baby, just be react react on the front end. Yeah, - -84 -00:41:12,980 --> 00:41:43,920 -Scott Tolinski: and, you know, I mean, you could do all sorts of stuff with that. Because now with with even with Gatsby, you could there's a WordPress graph qL plugin for Gatsby that makes pulling queries out of your WordPress API super easy and graph qL and have it statically generate, there's a lot of cool options. And I think we got a lot of these cool options in 2017. It's gonna be really interesting to see some of them mature and grow a bit and 2018 and, and how this all all changes for us. - -85 -00:41:44,210 --> 00:41:56,070 -Wes Bos: Exactly. And on the same note, React dropped its silly patent. So recently, yeah, React had this like patent license, which was causing a ton of people to drop react. And - -86 -00:41:58,770 --> 00:41:59,310 -Unknown: right, - -87 -00:41:59,550 --> 00:42:20,730 -Wes Bos: it was causing a ton of people to, to drop react, and I'm really excited to finally see react and all the Facebook projects have dropped that license. And yeah, can we can stop having to. But I guess as a benefit to that if you got really popular as well, because a lot of people are moving over to view and realizing how amazing view is. - -88 -00:42:21,600 --> 00:43:12,270 -Scott Tolinski: Yeah, that definitely took a like, that was one of those things where the React license was tripping some people out. And that was at that right time when view was really starting to grow. So I think view took a big advantage of that of that, like, you know, where should I go, which I do. And here's this new platform view that's really nice. It's sort of reminiscent about the things that we liked about Angular one, but you know, nicer overall than ever, you know, more modern, more component based and, yeah, views cool. I love the ideas. I'm not using it myself, because I'm so invested into react right now. But it's one of those things I keep an eye on. And I know how if I wanted to get into it, I could do it. But you know, just keep an eye on it. It's definitely definitely had its its year so far in 2017 view saw a big, big new audience. - -89 -00:43:12,900 --> 00:44:25,350 -Wes Bos: Awesome. Let's take a quick break to talk about our sponsor, which is fresh books, fresh books is the best cloud accounting software that you could possibly have for your business. So I've been using it myself for for years and years and years. And it's great for being able to invoice your clients. If you have to send off an invoice to somebody, it's, for example, Freshbooks sponsors this podcast and I have to send them an invoice to actually pay us send it off to them. One of the features that I really like about Freshbooks is I use it to track all of my expenses as well. And one thing that you can do is you can hook it directly up to your bank account. So anytime that you have an expense, you can just import all of your debits or credits from your bank in into your Freshbooks. And you can line each of those up with an with an actual expense. So you're not accidentally forgetting sometimes I lose a receipt or something like that. But I still want to get the actual expense logged. So in that case, you can just import them right from your bank. So if you are a small business or just looking to build someone, make sure you go to freshbooks.com forward slash syntax and enter syntax into the How did you hear about us section? Because that will make sure that Scott and I keep getting paid. So thanks so much to Freshbooks for sponsoring. - -90 -00:44:25,710 --> 00:44:39,600 -Scott Tolinski: Nice if see if I would have done a segue for that one. Here's this here's segway school 101 here, okay, I could have done like, let's say view is a fresh technology and you know what else is fresh? - -91 -00:44:40,380 --> 00:44:46,650 -Wes Bos: Off fresh book. Why? Yeah. Oh, that's good. Kinda amazing. I mean, it's supposed - -92 -00:44:46,650 --> 00:45:06,090 -Scott Tolinski: to be good. I am a dad now and I've been like really, really like before. I was a dad. I was trying to do dad jokes and my was just like you're not getting that. Like, I don't know that this dad joke thing is going on. Work and I've been trying to practice really hard. And I think the Segway and the dad joke thing lineup like very well, yeah, - -93 -00:45:06,090 --> 00:45:08,970 -Wes Bos: you're doing really well. I'm impressed. - -94 -00:45:10,800 --> 00:45:39,300 -Scott Tolinski: It's been it's been practice. So yeah, okay, so JavaScript huge advancements huge new things made life a lot easier. Let's talk a little bit about CSS because CSS was not without its fair share of growth and moments as well in 2017. And I think, obviously, the biggest one that you could say is probably one of the biggest changes to CSS overall, or how we write CSS is the arrival of CSS Grid and what that means for us moving forward. - -95 -00:45:39,659 --> 00:46:31,830 -Wes Bos: Yeah, the so the browsers just came out of nowhere. And they all had released CSS Grid. They are all being developed behind a flag sneakily. And then within I think about a couple months, all of the the browser's turned on support for CSS Grid. So it's here, obviously, we still have iE 11 that we have to worry about. don't tweet me I understand. But it's pretty soon in the next year or so I think 2018 will be the time that CSS Grid starts to make it into a lot of production websites, if not already. So pretty excited about that. We also saw Firefox's a really sweet CSS Grid Dev Tools launch. So if you haven't seen it puts this really nice grid over top of your grid to show you exactly where the different sections and whatnot are. Are you you've been pretty happy with CSS Grid so far, too. - -96 -00:46:32,100 --> 00:47:27,270 -Scott Tolinski: Yeah, I'm using it in production. I'm converting a bunch of my layouts over to it already. I just love the simplicity. I love how easy it is to build excellent responsive grids with it. I was when I when I did my modern CSS layouts course available on level up tutorials, comm forward slash store. When I made that series, you know, it really opened my eyes to some of the the more complex, amazing things you can do with CSS Grid, and some of the irregular grid shapes. And if you can, if you can think about it, like, I don't know, there's not too many layouts outside of that, you know, Pinterest style layout, that's still not really super existing without JavaScript that you can't do with CSS Grid. It's just one of those things. That's excellent. And I feel like it's forever changing the way that I'm approaching writing my CSS, and absolute for the best. So yeah, - -97 -00:47:27,420 --> 00:48:04,920 -Wes Bos: I've also been I had a really nice talk with Benjamin de Kock, who works at stripe he's he's been crazy about CSS Grid for for quite a while now. And I talked to him about like, like, when do you use Flexbox versus grid and he had some interesting things to say in terms of just use always use grid. So I've been trying that the last week or two of Can I write everything just in grid? And there's some there's arguments on both sides for it. But I haven't made a decision. So I won't go into it too deep just yet. But it's a it's been interesting. I'm curious to see how people's grid usage unfolds once they start to use it in production applications over 2018. - -98 -00:48:05,220 --> 00:48:44,850 -Scott Tolinski: Yeah, Yeah, me too. I'm ready for the the blog posts. And the really cool all you can do this with CSS Grid. I mean, we're already getting those. And I'm excited for more of them. Because these kind of major shifts are going to ripple and ripple and ripple until we have like a totally new way of doing all sorts of stuff. I remember like, I don't know, when people found a new way to do clear fix. And it was like, Yeah, like crazy. Over here. We've been doing clear fix this way for all these years. But this way is more performant better, whatever smaller. And we're gonna have those kind of epiphanies all year in 2018. And I'm excited for it, because that that sort of stuff gets me excited. I love CSS. - -99 -00:48:45,270 --> 00:49:34,710 -Wes Bos: Another thing that has become really popular in 2017 was the sort of the idea of component sizing your CSS. So a lot we've been writing like bem CSS for years and years. But I feel like a lot of people are really starting to see the benefits of writing your CSS in components, whether you're writing it in bam, or a lot of people more likely are writing in something like style components or scoped CSS or style JSX or whatever the scope CSS is in view, where you write your CSS for a specific component and CSS does not leak outside of that. And we we talked about that in a couple of our episodes so far. But we're starting to, we're starting to see it become really popular in in. I've been a conference this year. What about you, Scott? Yeah, - -100 -00:49:34,740 --> 00:51:30,930 -Scott Tolinski: I've been moving my system over to styled components. And one of the things that's opened my eyes to is building design system. So I made a big effort to build out my entire design system into figma, which is my which is my design application of choice. Love figma. If you don't know it's a cross platform works on Mac, Linux, Linux, Windows, And is like sketch but works on everything and is browser based and cloud saves and that sort of stuff. It's awesome. So, so I've been making an effort to really rebuild my entire design system in figma. But at the same time, I'm building this design system of styled components to match my design system and figma. And it's totally opened my eyes to how you work with things and extending them. And maybe if you have this one off thing, and that styled component lives exactly in that sort of same file as that react component. And you never have to worry about those styles colliding with anything else. You don't have to worry about class names. You don't have to worry about naming things because that's like a giant pain sometimes is coming up with these long bem names and stuff like that. I mean, obviously, you love them. It's a great thing. And it's made everyone CSS more readable. But you know, not having to come up with those class names has been really super nice. And I honestly, I've just been totally blown away by the system. I'm ready. I'm ready to start moving the entire thing over right now. And we're gonna see how that goes. I I kind of miss a lot of the features on stylists. But that said, I'm loving the the sort of way that styled components have made me rethink about my my styles overall and be fought. Yeah, again, before you tell me this, like I do know that. I don't need styled components to rethink my CSS design system. But it has definitely opened my eyes to how it could be better. Yeah, - -101 -00:51:30,960 --> 00:51:57,840 -Wes Bos: yeah. Yeah, absolutely. Another thing in CSS is, and this isn't new, but I think it's it's getting a lot of traction is is CSS variables. A lot of people are finding out about our CSS custom properties this year. So it's exciting to see all of the different use cases that you can use in CSS, and we talked about it a couple episodes ago is what's new in CSS. There's a lot of really exciting stuff that's going to be coming in 2018 as well. Yeah, I'm - -102 -00:51:57,840 --> 00:52:32,310 -Scott Tolinski: super excited to use CSS variables. In my application without any sort of felt like, I'm just dying to do that. I wish I could do it right now. I have like a 3% audience of people that would not get variables. And I guess 3% is large enough that I need to have fallbacks for those things. Yeah. And so that kind of bums me out. I don't want to have to write the color in the background, or anytime I'm using a color, I don't have to write the property twice as a fallback. But I'm so excited for CSS variables, I want to use those right now more than anything else, I think - -103 -00:52:32,490 --> 00:53:20,070 -Wes Bos: I'm really curious to see where we'll be a year from from right now, because the rate at which the browsers update, especially once we bear a bid farewell to iE 11. It's going to be it's gonna be a totally different game in terms of like, these things are new. And three months later, everybody can use them. Because I there's still, I guess, I'm old devices that might be like the new iE 11. But I don't know, I think this stuff is going to be moving a lot. And it already is, it's moving a lot faster than than it is I remember, we had to wait forever just to use some of the new CSS three very sorry. I knew we had to wait forever just to see some of the new CSS three features. And it seems like this new CSS stuff is coming quicker than then we had to wait before. - -104 -00:53:20,370 --> 00:53:45,450 -Scott Tolinski: Yeah. But CSS is the best it's ever been. And it's only getting better. And I'm excited to actually get to use a lot of this great new stuff, and excited to see all the new stuff that you're eventually going to get to you. So yeah, I think 2018 is going to be a great year for CSS. It's going to be a great year for JavaScript, it definitely it's going to be a great year for all of us developers who work in these tools. So I'm just totally optimistic and I'm pretty psyched about everything so - -105 -00:53:45,660 --> 00:54:29,790 -Wes Bos: awesome. Let's wrap it up with some just like general anything goes what happened I think one of the big ones was VS code. Got a really really big it seems like everybody moved over to to VS code Abraham but in the last year I myself moved over to it. We did a probably one of our most popular podcasts was about VS code and people switching over we heard tons and tons of people who made the switch after that podcast so VS code released tons of new features it's getting really really good. It seems like every release there's there's lots of new exciting stuff. So I'm excited to see the new What is it the the live coding the sort of pair programming that's going to be coming out in 2018 with VS code? - -106 -00:54:30,060 --> 00:54:49,080 -Scott Tolinski: Yeah, a lot of cool features. And it's the My favorite thing about VS code is just how much improves all the time. I'm on the insiders build and I like look forward to updating every single day because you never know what you're gonna get. There's always just excellent, excellent improvement and that team is doing some serious work and building a serious serious text editor. It's awesome. - -107 -00:54:50,190 --> 00:55:45,210 -Wes Bos: Um, what else do we have? Iron yard close down. So it coding boot camps are have been around for for many, many years now and I'm a big fan of coding. boot camps, I think that they're one of the best ways for someone who's trying to, to get up and running and sort of get climatized. With this crazy industry of ours, obviously, we were doing an hour long show of what changed in the last year. But one of the biggest ones, which is iron yard close down, which is a bit of a bummer, I know that they had tons of really great students, as well as tons of really good instructors that live there. So it was a, I was pretty bummed to see that happen. A lot of them had taken my courses as sort of supplemental information. But I don't know if that's has anything to do with our industry, or it was just business decisions that maybe the the company was growing too fast and running out of cash. I'm not really sure what happened there. But it was kind of kind of a bummer to see. - -108 -00:55:45,210 --> 00:55:49,410 -Scott Tolinski: I actually had not heard of the iron yard. - -109 -00:55:49,680 --> 00:55:50,460 -Wes Bos: Oh, man. They're - -110 -00:55:50,910 --> 00:55:54,570 -Scott Tolinski: super nice. It was very nice. - -111 -00:55:55,770 --> 00:56:27,300 -Wes Bos: They had how many I think they had, how many locations that they have let me go to their website here. See if it's still up. One, two. Yeah, probably about 15 locations all around the US, Atlanta, Austin, Charleston, Dallas, Charlotte Durham. So they were one of the big big players there. And they just closed their doors, which is sad to see, but props to anyone who did go through that boot camp, and now got jobs. So it's pretty neat to see. - -112 -00:56:27,960 --> 00:56:48,990 -Scott Tolinski: Yeah. Oh, yeah. I don't know about what else what else happened? Yeah, I don't really know. It seems like there's so much JavaScript and CSS stuff that happened this year, tooling got better. We got a hyper terminal, which I personally don't use, but a lot of people seem to really like, which is a terminal that's based in electron. So yeah, - -113 -00:56:48,990 --> 00:56:50,160 -Wes Bos: good luck on web - -114 -00:56:50,160 --> 00:56:52,080 -Scott Tolinski: looking forward in JavaScript. - -115 -00:56:52,380 --> 00:57:47,880 -Wes Bos: Pretty neat. I use it myself. It's not perfect yet. But it's, it's pretty good. I think that in the last maybe three months, it's got a lot better in terms of performance. But I still have some some issues here and there, but I like it enough that I've been staying in it. Twitter, switch to 280 characters, this is not development related. But as someone who uses Twitter quite a bit, I was pretty happy to do that. I know a lot of people are butthurt over the 280 characters, but I like to post Twitter tips every now and then. And it allows me to be a little bit more spacious, with my explanations of things. And the the well actually is have cut down drastically. Because I'm able to explain a little bit more in in a tweet before I actually can send it off. So I was pretty happy about that. Yeah, I like it. - -116 -00:57:47,939 --> 00:58:07,920 -Scott Tolinski: I you know, I think the the day of abuse, like where everyone was abusing it for like 24 hours. Yeah, now that that period has gone like, I think if if nothing else, it's made me less like frustrated when I'm one or two characters over. So a plus on that. Did you I guess, like progressive web apps became a bigger thing. This year? - -117 -00:58:08,010 --> 00:58:15,300 -Wes Bos: Yeah. Yeah. It's actually something I haven't haven't dabbled in a whole lot. But it's something that I heard a whole lot about. You want to explain what that is? - -118 -00:58:15,629 --> 00:59:41,550 -Scott Tolinski: Yeah, progressive web app. I don't quote me on this as being de facto, whatever. But it's a website that's going to work like more like an application. So it's going to be fast, it's going to be reliable, it's going to work offline, it's going to at least have some sort of offline experience, not like necessarily the same offline experience. So basically, these are applications that function much more like a real application. They use things like web workers to deliver this experience offline. There's a whole app checklist may actually find this. Yeah, so your site must be delivered over HTTPS pages are responsive for mobile and tablet, your URLs, load went offline metadata to add your application to a homescreen of a phone first, fast first load on 3g site works cross browser page transitions don't feel like they block the network. Each page has a URL. There's a whole lot of stuff here. And it's all things that aren't going to make your site better. So yeah, so I think progressive web apps, this is an episode we need to do prioritize early 27 or 2018. Just like our our graph qL one. So we should move this up to the top of the list because this is there's going to be a lot of stuff here. And it's going to be a lot of stuff that makes your application instantly better. And a lot of it's actually really easy to implement. So - -119 -00:59:43,380 --> 01:00:54,000 -Wes Bos: yeah, I'm excited for that one. Other than that, what is one thing in 2018 that you are either looking forward to or really, really hope that we'll drop in in web development? I can while you think about it, I'll talk about mine and I really Hoping for container queries in CSS to be specked. out and and to get that red stamp of approval. I don't know if it will happen in a year, but I'm really hoping it will. And what that is is sort of like a media query. But instead of just having the viewport size, you can, you can specifically say when the width of this container, like when the width of this component in my CSS is less than 400 pixels, then change it because sometimes you might have like a Twitter widget or a cart widget, and you might have it in two different spots on your website. And when when one of them is 600 pixels wide, or 500 pixels high, then you want to like make it look a little different than when it's really, really small. Right? So there are some ways you can do container queries right now with JavaScript, but having them natively in CSS is something that I'm really crossing my fingers for. - -120 -01:00:54,360 --> 01:02:27,690 -Scott Tolinski: Yeah. There's so many times when you could almost say that element queries or container queries are almost always going to be the right way, rather than like a media query. Because if you think about it, each of your components should respond to its given size, not the browser size. Exactly. And maybe the browser sizes, what's changing up your layout and stuff like that. But each individual component? Yeah, we we used element queries via polyfill. Very briefly, when we were doing for.com, we eventually had to abandon it due to just general issues with compatibility, right, yeah, even with the polyfill. But in that brief time that we were using them, I was totally convinced that this was the feature of how we are going to do media queries and reshuffling components overall, it's excellent. So yeah, I would just copy yours. I would say that, that I'm also I'm just looking forward to being able to use CSS variables and explore all of those exciting ways that we talked about using it not last episode, but the episode Before that, we were talking about being able to use them and media queries and stuff like that. I'm excited to get my hands dirty, and start using some of that stuff in production. And hopefully, I'll be able to do that. Because I think that's just you know, the future. Also, it would be sick if we could do better transitions with CSS Grid. I know we've mentioned that before. I have no idea if there's any plans involved in that. I don't know what it would even take but it'd be sick. I would love it. I would love it. But yeah, that's that's just me. - -121 -01:02:27,690 --> 01:02:33,720 -Wes Bos: Right on. Let's talk about some sick pics. And then we'll wrap it up. Yeah, so - -122 -01:02:33,720 --> 01:03:58,440 -Scott Tolinski: my sick pick this week is something that is an unexpected sick pig. I picked it up on a whim here on Black Friday, I got the the Google Daydream, which is a VR headset for your phone, Google phones or Daydream ready phones, they're like specific type of phones have this VR mode where it like boots into a separate version of the operating system and runs superduper nicely. This this headset was like 6070 bucks or something. And it has a remote control. And we've been going nuts with it. Courtney and I have been using it like watching 3d videos, I was watching videos on all these different, you know, civilizations and stuff like that. And you can go tour different stuff, and have these 3d videos. And as someone who doesn't have a legit VR headset, for the price and everything it works with my phone. The Google Daydream was just so unexpectedly awesome. I have my having a hard time putting it down. I want to like go watch more 3d videos, I just did one where I was like a Redbull f1 driver. And you're, you're really feeling this speed and you're looking around and you know, I sound like a noob to VR. But this this stuff is super duper cheap. It works really extremely well. The controllers, amazing everything about it. Wow, very nice. So Google Daydream really, really super cool. - -123 -01:03:58,710 --> 01:06:21,210 -Wes Bos: Wicked. I got one now, my sick pick is because I because I have an assistant now helping out with my email, which is I'm pretty excited about I needed some way to share my inbox without just giving out a password because there's a whole lot of like stuff that goes along with with sharing an inbox with somebody and being able to mark things as done and assign them to people. So I ended up switching over to this email client called missive. And it works with your existing email account. So I use Gmail and Google Apps or what is it called Google suite now for that, but what missive does is it just it's it's an app on the web. It's an app on your desktop, it's an app on your phone, and then you can add multiple people to that. And then each of them then has their own concept of an inbox. And then what you can do is they can either see all the email or like for example, my personal email, I can take things out of and give to my system. For the I have a new email address that everything all my new support stuff goes to and she sees all that and, and deals with accordingly. So if it's something that I need to be dealt with, then she signs me and I can assign her. And what's really neat is that in the threading of the emails, you can also have chat, which means that like, even like, we can chat back and forth in terms of like how to deal with an email, and then and then you can actually send an email to the client and it's all in this one really nice, slick thing. And the one thing that I didn't expect about it is that the actual client for dealing with me email is really, really slick and it's really fast. And I feel like I processed my email once I learned all the different keyboard shortcuts and once I got used to it, I feel like I'm doing my email much faster than than I was before, because I could just blow through it really nice. Okay, I've never in my life used a desktop email client. I've always used something in I've used Gmail or Google inbox in the web, but it's been super happy with with how it's going. So it's called missive and it's, it's not really it's not really for someone just who's doing their own email but if you are looking at sharing an inbox if you have a support email address where you need to have multiple people being assigned things and I definitely check that out. - -124 -01:06:21,600 --> 01:06:32,940 -Scott Tolinski: Nice Yeah, that that seems like something that's going to be super good for your goals to for this year, which were you know, automating and delegating that that fits right in to this episode perfectly. So - -125 -01:06:32,940 --> 01:06:42,210 -Wes Bos: Exactly. Nice. Other than that, and we are done this episode, or do you have any shameless plugs for me? - -126 -01:06:42,750 --> 01:07:14,340 -Scott Tolinski: I got a shameless plug. Well, he last week you plugged your Instagram account, I'll plug my Instagram. Yeah, which is s tau Lynskey, or I have one at level up tutorials, level up tutorials for code stuff, and add s to Lynskey. If you'd like to see me spinning on my head and stuff like yes, I but I honestly mostly post photos of my wife, Courtney, my child Landon or myself spinning on the ground. So if you want to see any of those things, follow me on Instagram. - -127 -01:07:14,640 --> 01:08:01,020 -Wes Bos: That's awesome. I actually got a ton of new followers on Instagram after last week's episode, so props everyone who who follow through on that if you still haven't, I'm at Wes Bos on everything, but Instagram as well. You want to follow me on that. Other than that? I am today I'm starting recording my CSS Grid series. I finalize everything I have a I do have a sponsor coming on to help out with the the paying for my time in the recording. So I was pretty happy about that. I just finalized those details on Friday. And that should be out. I know. I was hoping to get it out before Christmas, but things didn't work out. So I'll likely have it out first week of January as well. It's looking like right now. dope. Cool. Other than that, we'll see you next week. See ya. Have a good one, - -128 -01:08:01,080 --> 01:08:10,170 -Scott Tolinski: head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax230.srt b/transcripts/Syntax230.srt deleted file mode 100644 index 96d1fafd1..000000000 --- a/transcripts/Syntax230.srt +++ /dev/null @@ -1,492 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax, the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:05,760 -development treats out there, - -3 -00:00:05,760 --> 00:00:10,530 -strap yourself in and get ready here is got to live ski and Wes Bos. Welcome - -4 -00:00:10,530 --> 00:00:53,189 -Wes Bos: to syntax. This is the podcast with the tastiest web development treats out there. We've got an awesome one for you. We've actually done a lot of coding heavy shows lately. So we thought we'd switch it up and give you a soft serve. Scott came up with this idea, a soft skills episode called the soft serve. And rather than focus on one specific soft skill, we're just going to go through some a couple different topics, productivity, finishing projects, planning, communication, career and skill advancement, just to sort of touch on things that we've learned over the last couple of years and might help you out in different areas of your life. So it's kind of like a potluck in that we're going all over the place. But it's a soft serve potluck. - -5 -00:00:54,299 --> 00:00:55,830 -Scott Tolinski: And there's nobody brought anything else. - -6 -00:00:55,860 --> 00:00:57,930 -Wes Bos: It's just yeah, no one brought anything. So we brought - -7 -00:00:57,930 --> 00:01:01,080 -Scott Tolinski: ice cream maker, and we're just pulling it pulling the trigger on it. - -8 -00:01:02,909 --> 00:01:12,090 -Wes Bos: Today, we're sponsored by Sentry and fresh books. We'll talk about them partway through the episode. I've always already introduced Scott. But how are you doing today? Scott? - -9 -00:01:12,360 --> 00:01:19,140 -Scott Tolinski: I'm doing pretty good. Yeah, just just hanging out. Yesterday was my birthday. So I am 30 years old now. birthday - -10 -00:01:19,730 --> 00:01:21,360 -Wes Bos: parties are very close together. - -11 -00:01:21,540 --> 00:01:23,610 -Scott Tolinski: Yeah, no, that's weird. Yeah, - -12 -00:01:23,610 --> 00:01:24,390 -Wes Bos: I know it is. - -13 -00:01:24,390 --> 00:02:09,409 -Scott Tolinski: It is funny. I have the same birthday as my dad. So that's always a lot of fun. You know, we can do happy, same birthday. And then some some jerk decided to really test my security in my site and try 20,000 stolen credit cards, changing his IP address. So IP banning wasn't working, you know, obviously, it was banning him. And he was just changing. And then email banning not working, just changing the email. I don't know if he has a host of stolen emails, or whatever this dude's deal is, but none of that charges got through. So it's like our fraud tools are good enough to catch all this stuff and ban him. So like, what does he get out of it? I don't get it. Just trying to ruin my birthday, I guess. But yeah, that's how it is. - -14 -00:02:09,719 --> 00:02:11,490 -Wes Bos: That's a bummer. I'm sorry. That sucks. - -15 -00:02:11,940 --> 00:02:15,500 -Scott Tolinski: Yeah, it's okay. I mean, I'm getting him. I added him on LinkedIn. So that was fun. - -16 -00:02:17,520 --> 00:02:52,830 -Wes Bos: That's good. All right, well, let's dive into the first soft skills topic we have here, which is productivity. So that's probably the biggest thing you want to be as a developer is, how do you get faster? How do you get better? How do you take the amount of time that you have and have more output or use the time that you do have wisely? That's kind of like a never ending thing? I think for a lot of industries. And I feel like it's especially prevalent as a developer. So what do you do? What tools do you use? What tips do you have for being a productive developer? Yeah, - -17 -00:02:53,160 --> 00:03:47,610 -Scott Tolinski: so we often talk about time, right time being the enemy, but it's really like energy, right? Because a lot of us have the time to do all sorts of stuff, but they run out of the energy. So for me being productive is all about utilizing that energy correctly, before my energy stores are depleted, right. And so for me setting up and getting prepared for like, a nice base of knowing what I'm doing is always the most essential thing for me to be productive. So number one, the very most important thing for me to be productive in the entire world is to create a prioritized to do list at the start of the day. And go through that, and do not veer away from that, unless, of course, there's some sort of an emergency. So a to do list really relies, in my opinion on having a good system. To make that To Do List useful. I used to do is to do this. And to do is to do this to do list - -18 -00:03:47,699 --> 00:03:48,270 -Unknown: I and - -19 -00:03:50,250 --> 00:04:23,040 -Scott Tolinski: and I prioritize everything p one through p for priority one, meaning that is the most important thing and that it should only be one p one per day, it is like the thing I have to get done that day, everything else is just sort of tertiary side project to that. And then from there, follow the whole Eat That Frog methodology where you take on your most difficult or most important task of the day, and then go top down and accomplish there and then sort of refactor at the end of the day for what things need to carry over to the next day or reschedule entirely. - -20 -00:04:23,430 --> 00:05:13,130 -Wes Bos: Yeah, I'm very similar to that. We've talked before how I follow the Getting Things Done mindset, I use an app called things and I've got a bunch of different sort of areas, like different projects and things like that. So the way that I use that app is that I have the inbox and then I'll just anytime there's something in my head I need to do or need to work on or need to fix or whatever. I'll just dump that thing into my things and then I'll drag them into the related project. And then for each project that I have are not necessarily a project but it's generally just like an area of life. So whether that's a re record or my personal website or Specific might be an actual project that I'm working on. Or even just things like, I use it for my personal life as well, like things in the bathroom that need to be fixed or, like I find myself to be for you said that needs to be fixed, - -21 -00:05:13,640 --> 00:05:15,950 -Scott Tolinski: or getting to be a really interesting sentence, - -22 -00:05:15,950 --> 00:06:13,560 -Wes Bos: things in the bathroom. No. So like, I find myself with, like 20 minutes of free time every now and then. And our house is full of tiny little tasks of things that need to be fixed or reorganized or whatever. And when you have 20 minutes, it's just like crippling thinking of all the different things that you have. But if you have a list of quick little fixes, then you can go into that it's just called adult life on mine. And then I'll say that I don't use p one through p four, I just kind of sort them in order at which I think I'd like to tackle them. And I try to either sort by what I can get done. Like what I'm feeling like, or probably the better way to do it is to sort by agony. So things that I'm procrastinating things that I don't want to do, usually in my life that is around responding to important emails that need Yes, responses and booking travel. Those are the two hardest things for me. - -23 -00:06:14,009 --> 00:06:32,880 -Scott Tolinski: You and I are of the same cloth in that regard. Yes, those are my two. In fact, what's so funny is that recently, Courtney has taken over the task of scheduling all of my travel, because she's just so annoyed with me for not scheduling things. They're not she's just like, you get that done yet. I'm just gonna do it just forward me to email and I'll do it. And it's changed my life. - -24 -00:06:33,149 --> 00:06:54,030 -Wes Bos: That's key. That's super key, I need to do something like that, just because I always keep putting it off. Or like, I get all these invites to different conferences, and I can't do them all. So I need to like look at all of them and figure out which one I can go to and timing and projects and like, Oh, it's uh, getting it all into some sort of system definitely makes that much easier. - -25 -00:06:54,300 --> 00:08:22,500 -Scott Tolinski: Yeah, you know, it's funny, I had an idea for a book. And somebody took my idea for that book. Somebody took it. I knew they was it. I announced this like, two years ago, I said, you know, what would really because dropping swear words in book titles is like super hot. Oh, yeah. I was thinking, Oh, you just needed a reimagining of getting things done, but just change the title to get be done. And yeah, and guess what somebody did it. That's that's a guaranteed moneymaker I don't I just should have pulled it that there'll be another thing on this whole thing about just starting things. But yeah, I think having an actual to do list, regardless of priority or whatever is totally essential to get things done in my opinion. Next on here is that get things out of your brain, I don't know about you, but like, my brain is just an Idea Factory, it pumps out all these sort of ideas, and one will move from the next to the next to the next. And the next thing you know, you've forgotten one or you forgotten the idea. So I use tools like notion religiously, to just jot down any idea I have, get it out of my brain, put it on the paper. That way it's out of my brain, and I have no chances for getting it in there. I can come back to it later. I can elaborate on it. I can brainstorm on it, I can do all sorts of stuff. But just getting it out of my brain onto notion or wherever is is so essential to me, I always make sure like, especially with my phone, I'll have it handy to just pop up in notion quickly add something, even if I don't want to work on it at that moment, just to get it out of there. - -26 -00:08:22,769 --> 00:09:01,110 -Wes Bos: Yeah, I do that as well that the whole term is out of your head into your system, or onto something that also is helpful. If you have a racing mind when you're trying to fall asleep. I personally don't have this I can just shut off really easily which job but some people are just like, there's just like I can't fall asleep because I'm thinking of absolutely everything that's going on. And I find for if I do ever have that's very rare, I just sort of put them into my system, I have lots of ideas, I write them down. It's just a nice thing to have them out of your head into your system, you know that they're they're written down somewhere. And you can revisit it in the morning saying about writing it down or typing it down for me is, is very helpful. - -27 -00:09:01,620 --> 00:10:43,980 -Scott Tolinski: Totally. And sometimes it puts my ideas into different perspectives because I have an idea in my brain. And this idea in my brain seems like this golden shiny object, and I just oh, I need to do this thing. And then I'll write it down and I'll go to sleep. And the next morning, I'll read it. I'll be like, that's a dumb idea. Why would I ever think that was a great idea. But just seeing that the game gives you that ability to reframe it and look at it objectively. I've always often heard use the term, a second brain. I don't know if you've heard that term before. So this is another tip I have is usually to like notion as a second brain. So this is less idea based and more best, like knowledge based. I recently realized that I was looking up the same things, you know, multiple times, like, Oh, I have this question for my accountant. And it's like, I know, I sort of know the answer to this, but I don't know the answer to this and I feel like I've maybe asked them before. So what I've started doing is really creating a list of where I database of things that are I've learned essentially things that are, that I'll want to come back to. And I refer to it as my brain. So like, whether it's like fitness based stuff, okay, here's the truth that I know about cardio strength, whatever. Here are the tricks that I know about my text preparation, contractors, business management, those kind of things. And I could just go back and review those at any time, rather than going to Google and looking up a new source and having to parse a blog post or whatever, I can review, my own note that I wrote, I think, is pretty essential for me, because of course, I don't have a great memory and a great recall. But I do generate a lot of ideas. And I do research a lot. So being able to essentially use a tool like notion as the second storage for data is huge for me. - -28 -00:10:44,730 --> 00:12:18,899 -Wes Bos: Yeah, I have, I do this as well, especially when I'm talking to people that are doing things for me like real estate, law, accounting, these are not my areas, and I need to remember them. And they're expensive. Yes, they're very expensive. So I take copious notes whenever I'm on the phone with somebody. And that's one thing that I love about having like bluetooth headphones, or phoning from your computer, that you have both of your, your hands free, and you can just sort of go to town making notes I have and for probably 10 years now just kept all my notes in markdown. I've had little brief stints with Evernote, and notion and 100 different little apps. And then I find myself like annoyed even things like I have a pizza recipe that's in Evernote. And every time I want it, I have to like download the Evernote app or like, reset my pass. I'm like, oh, like this is annoying. Like, I wish that it was all just in markdown. And I found that, although it's probably not the best experience for viewing them, it is the best experience for me keeping it long term and, and whatnot. And I know there's there's actually an app that I'm working with someone right now to turn my JavaScript beginner JavaScript course into text. And they are using an app notable, they are using this app called noteable, which allows you to view and also author if you want your markdown, this is pretty cool. And you can just like point it at a folder of markdown files, which I thought was pretty nifty. So I might be looking at that. Do you know, - -29 -00:12:19,559 --> 00:12:30,990 -Scott Tolinski: we did that in my electron course on level up tutorials we built basically that app, it was like, here's a folder of markdown files. And then you Oh, yeah, visual editor for markdown files. - -30 -00:12:31,230 --> 00:12:34,230 -Wes Bos: You did open source. I remember you made that cool little icon for it. Right. - -31 -00:12:34,380 --> 00:12:38,250 -Scott Tolinski: Yeah. made it look like a competent note. composition notebook. Yeah. - -32 -00:12:38,399 --> 00:12:45,570 -Wes Bos: That's, that's great. Yeah, it's true. Like that's not that that's not that difficult to do, right? You've just got a bunch of markdown files, and you can overlay them. - -33 -00:12:45,899 --> 00:13:03,510 -Scott Tolinski: Yeah. Rather with some Yeah. If you want to do frontmatter. Or you can just have a system like the file names, are we I think we just did file names in ours. But yeah, it's super, super easy. I think markdown is a cool tool for that. Because again, you can just move it into so many places, turn it the blog post, turned into a Gatsby site in two seconds. Who cares? - -34 -00:13:03,840 --> 00:13:04,350 -Unknown: Yeah. - -35 -00:13:04,590 --> 00:13:56,789 -Scott Tolinski: So a couple more here it would be to batch related items. For instance, I've been doing this Scott tries YouTube series where I tried different web services. And I released one a week. And it may seem like Oh, hey, house, Scott, but not so many videos by batch all those together. So I record all of the Skype tries for a month in one day, and I edit them in one day, and then I publish them and schedule them on YouTube. And then I just don't think about it for a month. And so by doing that allows me to work on one thing without switching contexts, which is one of the reasons why everybody hates meetings because they you know, they're working on something they have to go to a meeting, switch their context, change their Brian, change what they're thinking about, and then come back to it. So obviously, I hate meetings for a lot of those reasons that everybody else does. But by batching, the like related projects, whether it's doing all my email at once in the morning, or anything like that is just hugely useful to me. - -36 -00:13:57,090 --> 00:15:05,549 -Wes Bos: I do this with my taxes. So one thing I have to do every year, and actually unfortunately, now every quarter is to download every single receipt for every single online service that I haven't it's thousands, or not thousands, probably hundreds of receipts. It's a lot. Yeah, and I just do it all in one day. It's like my receipt day. And it takes I don't know, maybe four hours to log into every single thing and I have to download all the seats. But being able to batch it all into one day makes it so much faster. Because you're sort of in the headspace, you can think of all these different things that's going on. And I highly recommend doing that. Next tip we have here is just recharge when you need it. So there's obviously diminishing returns. But one thing I've noticed over and over is that just exercise in general is a huge productivity hack. Like I'm here trying to get the best keyboard shortcuts that I possibly can when you realize that I just wasted 15 minutes watching a silly YouTube video, you know and like yes, probably if I had On to the gym that day, I would have been a little bit more fresh. And I would be able to - -37 -00:15:05,610 --> 00:15:08,010 -Scott Tolinski: or even watch YouTube while you're at the gym. - -38 -00:15:08,299 --> 00:15:25,950 -Wes Bos: There you go. I definitely haven't. I actually never done that. He's usually because I'm doing like, I need to do more like cardio or something like that, where I'm just like on the bike or something like that. I'm usually like doing weights or doing something where I can't hold the phone. Maybe someone should just follow me around with a - -39 -00:15:27,539 --> 00:15:37,140 -Scott Tolinski: you should build this like a hat that like yeah, like to hold the phone down from the bill. I think I just made another million dollars here. This show business ideas with Scott - -40 -00:15:37,200 --> 00:15:39,480 -Wes Bos: are just like a one of those VR things. - -41 -00:15:39,630 --> 00:15:42,360 -Scott Tolinski: Yeah, VR thing. just shove a screen right in your face. - -42 -00:15:42,419 --> 00:15:48,120 -Wes Bos: Yeah, yeah. Cuz you could just over is what Google Glass was trying to do. Hey, hey, we, - -43 -00:15:48,360 --> 00:16:01,799 -Scott Tolinski: we put a one of our old TVs in the gym. And it's been awesome, because I'll put on YouTube or hockey games or whatever. Yeah, it's like, oh, yeah, this is great. Just put on a YouTube playlist and crank through some code stuff or whatever. Jealous of that. - -44 -00:16:01,799 --> 00:16:12,840 -Wes Bos: Yeah. Cuz I find I just do podcasts for that reason. Because Yeah, it's it's beneficial. But like, there's a lot on YouTube, I'd rather be watching. When I'm working out. Good tip. - -45 -00:16:13,080 --> 00:16:32,610 -Scott Tolinski: Yeah, last one would be to have a system and stick to it. People are really good about setting up systems and then sticking to it for half a month, 15 days, just like you know that all these great ideas, and now I'm out. So stick to your system, hold yourself accountable to it, stick to it every single day, every single month. The - -46 -00:16:32,909 --> 00:18:17,090 -Wes Bos: next one we have here is about finishing projects. So this is the next category we have here. I would like to think that I'm like pretty good at finishing projects. I've put out a couple of different things already this year, not necessarily like full blown courses, but just little things like that uses tech, and I'm working on my website right now. And my tip is just to sort of go all in. So like, if I look at my personal website, I've been working on this thing for a year. And it's not ever going to come out if I keep poking around at it for a couple hours here a couple of hours there. Because I find that the like we said earlier the ramp up to for me to get into the context. And also just like in designing, I sort of get in the feel of the website. And I started to just run with it. But I find that if I like let it sit for a bit and come back and then God not really too stoked on this anymore. I just need to do it, finish it and put it out. So what's worked well for me in the past, whether it's a tiny little open source project or personal website, something like that, it's just go all in on it for a couple days. And also it doesn't have to be like absolutely perfect. I think a lot of people are afraid to release something, if it's not 100% perfect, or they're not totally happy with it. And that time will will never come and I think that goes for for client work as well. client work, you obviously have a hard end, but you just got to get it done and figure out a way to make it work. So I'm just going all in in for a couple days and making things like I'm not going to do pagination, I got lazy loading on the images. So it's not a perfect issue. Just scroll to the bottom, if you want to see them all. I'll probably do pagination at some point. But it's not I can't do it right now. No time. - -47 -00:18:17,090 --> 00:20:13,290 -Scott Tolinski: Yeah. Yeah, I know. And then that's the whole thing is just get get it out. And then I mean, that was the whole the whole premise of the, in general, just minimal viable product stuff that was very hot A few years ago, and when startups started doing that, but for me, I have the hardest time staying focused on something and I've made a commitment via level up tutorials pro to release a course every single month. And I have done that now for like what like two, two and a half years of Yeah, it's amazing course every single month. So it might come as some surprise that I've really hard time finishing things considering I finish a course every month. But I have to because I am selling that if I yeah, if I don't get that out, then that's a big problem. So holding yourself accountable. And those sort of ways to finish projects and like really stick to your guns is just endlessly important for me specifically. But I do have a hard time really finishing things and staying focused. And so for me, it's all about doing a little bit of something every single day if you are having a hard time getting focused with it. And so like I always used to think about this writing papers, I used to procrastinate writing papers. I'm a terrible writer, I tested into English as a second language for my college writing class. They thought I couldn't speak English. So they put me into English as a second language. And so I was not looking forward to my freshman level writing course. And what I realized really quickly is if I do a page every single day, and then edit, do a page, edit, do a page, whatever, it was so much better than trying to do it all at once, obviously, but if you maintain that ability to chip away at this bigger thing, this big scary thing, it becomes less of a scary thing over time. It's good point you just have to really stick to those guns to do that. I also have a hard time really keeping myself accountable for things Long, long term. I don't know if you read any of the 37 signals books, rework I've - -48 -00:20:13,500 --> 00:20:17,600 -Wes Bos: read the rework. Yes, I've read reread the new ones though. - -49 -00:20:17,840 --> 00:20:21,320 -Scott Tolinski: So if you if you don't know Jason, is it fried? - -50 -00:20:21,780 --> 00:20:22,580 -Unknown: Fried fried? - -51 -00:20:22,610 --> 00:20:25,800 -Scott Tolinski: Yeah, Friedman, not Friedman. Jason freed. - -52 -00:20:26,160 --> 00:20:27,060 -Wes Bos: Jason. - -53 -00:20:27,060 --> 00:20:28,140 -Scott Tolinski: Jason free. - -54 -00:20:28,310 --> 00:20:28,950 -Wes Bos: Look it up. - -55 -00:20:29,910 --> 00:22:07,800 -Scott Tolinski: Yes. Sorry. David Heinemeier Hansson, I never said their names out loud. So I'm so sorry. There, they have some really excellent books. But when I read recently, well, I read it like maybe like six months ago, and then two months after that I've read it several times now is it doesn't have to be crazy at work. And one thing they talk about is how they have this whole process of working on a specific feature for six months. And they have a deadline, essentially, for all of their features. And it's not to get this thing essentially done, but it's sort of like here is the end of what we're gonna do is we're gonna only work on this one thing for six months, we're gonna or six weeks sorry, now monster be ridiculous. We're gonna work on one thing for six weeks straight at the end of that, do a post mortem, whatever, reassess where we're at, and then pick the next thing. Do that one singular idea for six weeks, and the whole all hands on deck to do that. And that, to me is really changed how I plan around some things because I had such a hard time. We weren't, we weren't shipping any features. We wouldn't be like, Alright, we got quizzes we're working on we got courses we're working on, we got blog posts, oh, wait, hold on, let me let me upgrade types or let me use TypeScript now. Okay, we've got to rewrite everything in TypeScript. Oh, wait, hold on, let me do everything in hooks for Apollo. Okay, let's read like, these things would just jump in the way and it's totally my fault. So Eric sutorius, our developer who works on the site with me was just like, Listen, if you suggest anything, that is not what we're working on, I'm just going to say no. And he's been so good about that. I'll be like, Hey, I just pushed this update to this branch. It'll be like, why are you working on that feature? - -56 -00:22:07,800 --> 00:22:08,670 -Unknown: Oh, yeah, - -57 -00:22:08,670 --> 00:22:11,850 -Scott Tolinski: you're right. Okay, gotta get back. We're working on. - -58 -00:22:12,270 --> 00:22:31,410 -Wes Bos: Yeah, that's, that's always very tempting to do that, because it feels like you're being productive. And you're going off on a new tangent. But generally, you're just starting things that will never be finished, or distract from the main, the main idea of what you're trying to get across. So that's, that's a really good point, I should should maybe apply that a little bit myself as well, - -59 -00:22:31,620 --> 00:23:43,740 -Scott Tolinski: it feels like you're being productive is the best way to describe it. But if you want to actually be productive, and not just feel like you're being productive, you want to make sure you have a good here and Exception Handling tool, then I'm talking about sentry@sentry.io, you're gonna check out Sentry@sentry.io use the coupon code, tasty treat all lowercase all one word, you're gonna get two months for free or Sentry. And let me tell you, this is the perfect type of tool for those of you who do want to get things done, because it really checks all of those boxes of stuff that we're talking about in this episode. By giving you clear actionable items to work on, giving you the code the release the attacks, you can, you can basically really nail down every single issue your site or services, having, and then troubleshoot it, knock it out, market is fixed, do all that stuff. So that way you can keep track of exactly what's happening and have that crystal clear visibility into your application. So check it out@sentry.io coupon code, tasty treat all lowercase o one work. Alright, so this one's really not good for me. This next one is called planning, planning tips. I'm terrible planners, so much so that my wife has had to step in and start planning things for me because she's getting too frustrated with my planning skills. And - -60 -00:23:43,950 --> 00:25:28,680 -Wes Bos: I think this, this kind of comes back to productivity and just writing things down. So when I have a project, or I have something that seems, seems super big, and so I'm going to use my like beginner JavaScript as an example, That to me was probably the most daunting project because the project was teach newbies JavaScript. And JavaScript is huge. There's so much to teach. There's different ways that you can teach people, there's like, there's just like, just trying to distill down what is JavaScript and what should you teach them. and in what order was it was really tough. So I found that being able to write it down in a way that makes sense for the content works well. So I got this new app called mind node, node, and it's like mind mapping brainstorming. And it's really neat, because you can just create like a node like arrays, and then you can go into arrays and say, like, you can break it down into methods and then you can like go Oh, some of them are immutable. And some of them are mutable, and you can, it's, it's much better than just I found markdown, which was what I previously used for everything. Because I could only go like two or three levels deep with markdown before it just became a giant mess. And you should see the mind node. I think I tweeted at some point, maybe I should tweeted again, that just the layout of this course was like six levels deep. And every single topic that had was broken down into multiple sub topics. And that really helped me plan them. And every time now that I work on a course I use this app, it doesn't have to be my note, it just has to be some sort of mind mapping software, you could do it with. Actually, I wouldn't recommend doing it with pen and paper, because I so quickly change things right. - -61 -00:25:28,710 --> 00:25:30,570 -Scott Tolinski: Yeah, lose track of it, or Yeah, - -62 -00:25:30,600 --> 00:25:53,910 -Wes Bos: yeah, you lose track or like, like, Oh, no, you know, what array methods. Like, one thing that it did was I put all the like looping stuff in with arrays. And then I was like, you know, what, this this is, has its own section called looping and iterating that goes with the for loops and all that. So I moved it from there. And all I do is drag and drop it rather than have to cut and paste text or race stuff. So big fan of mind mapping software for planning. - -63 -00:25:54,210 --> 00:26:18,600 -Scott Tolinski: So my note is kind of blowing my my mind node right now I am all in on this. It looks like it's only even like 240 a month for their their subscription plan, which I was just using something called whimsical on a. Scott tries video for the first time and it does very similar things. But whimsical, they do like charts in addition to What's up, - -64 -00:26:18,720 --> 00:26:22,500 -Wes Bos: did my node go to, like bass? How much? - -65 -00:26:22,950 --> 00:26:30,750 -Scott Tolinski: So my note is free for a lot of it. And then there's the node plus, which is 249 a month. Oh, I - -66 -00:26:30,750 --> 00:26:39,270 -Wes Bos: bought socks. I bought it when it was like 20 bucks for the entire aloe. Yeah, no. Oh, another thing to make you bleed every month. - -67 -00:26:39,540 --> 00:26:58,440 -Scott Tolinski: Yeah, no kidding. It looks like there isn't a ton of stuff with I guess there is. So either way. I was looking at whimsical fairly recently and really impressed by it. But it looks like my note has basically most of the stuff that I would use out of whimsical and guess how much whimsical is? How much 10 bucks a month? - -68 -00:26:58,650 --> 00:26:59,670 -Wes Bos: Oh, yeah, I'm - -69 -00:26:59,670 --> 00:27:00,840 -Scott Tolinski: mapping software, - -70 -00:27:00,900 --> 00:27:07,920 -Wes Bos: that's a bit might well, it also looks like it does wireframing flowcharts. But like, I don't need that. So yeah, - -71 -00:27:08,160 --> 00:28:08,070 -Scott Tolinski: yeah, check out my notes. But yeah, this is what I need it for is my note. And they have a so I really feel for my android people. Because I always used to hate stuff like this, I would come here and they'd be like, we have an app. And they'd be like, No, it's just iOS app. And I'd be like, now, I'm feeling a little less bad about this. But I'm going to use this mind note, this looks fantastic. Like I said, I was using whimsical to do a lot of planning like this. And I really do think that mind map is such a good brainstorming tool, I just really think it's a good brainstorming tool. For me planning in general, though, I need my calendar, I need my calendar, to be up to date to be accurate to be complete. If there is anything that needs my attention whatsoever needs to go in the calendar, or else it's just not going to happen. I had to block off time I have to do all those things. If I don't, again, my wife and I we lose especially track with the kids now it's like, Oh, you were supposed to do this today. Oh, shoot, I had to do this today, whatever, just got to keep it all on the calendar and make sure everything's in there. simple but effective. - -72 -00:28:08,580 --> 00:29:13,110 -Wes Bos: Another tip we have here for planning is I've said this before write it down. So another sort of example is that it was my JavaScript 30 course I had 30 things that I wanted to make. And trying to think of what to make is one of the hardest parts about building a course. That's why everyone makes it to do apps, because it's the only thing that someone can think of that adds content and deletes it and edits it, you know, like that, that kind of thing. So what I did for it took me over a year of just casual thinking of should build something like that, or Oh, that's a cool example, on that website, I should build something similar to that, or that's a neat UI trick, we'd be able to replicate that. And if I were to sit down and try to think of 30 things, they would all suck. But if I take a year of it just being passive and writing them into my to do to do app or markdown or whatever every year, then I think that's why that course has done so well. It's just because the things that you build in it are really fun. And I I owe that all to just writing them down. And I probably had like 70 things and most of them were awful, but 30 of them were pretty good. - -73 -00:29:13,560 --> 00:32:53,640 -Scott Tolinski: Yeah, I know that like to me, it's just really, especially for project planning. Rather than like time planning. I do that with all of my courses. When I come up with an idea for a course like even just like a very broad idea for a course, the very first thing I do is make a card for it and notion that says there's this course idea. And I put it into a Kanban board of potential selected in progress completed shelved. And these are my course ideas. And right now I probably have like 40 course ideas that aren't complete. So that way whenever I'm like I need Of course I can start looking for one but when I come up with a course I typically have those ideas, like ready to go and ready like for instance, I don't want to give away some of my secret sauce but let's say I have a course. Ready here and When I initially came up with it, typically I have a vision for what it's going to look like in my head. So therefore, I'm just going to start writing notes that very first moment. And that way, all of my cards at least have some context to them. And then I can have these notes here. And that really follows back to the chip away a little bit at a time. Because then when you when you approach this thing, it doesn't feel like this daunting task. It's something that's been sort of on your brain for a while. So next section here is going to be communication skills. And these are really taking for granted by developers. What's funny, my brother was always in logistics for his whole career. He's my older brother's a couple years older than me, he's now a project manager at a creative agency, they do a lot of Drupal stuff. And so it's funny that he's now in the creative agency world, as a project manager, people I've worked with directly before, and I think he's primarily working on email campaigns and stuff. But he'll be, he'll be telling me horror stories of developers that he's had to work with in the past year, okay, this person's like this, or, you know, these developers are just so rude to the client, we can bring them into the meetings. And you know, what he is not the first project manager that I spoken with, has been a friend of mine, or somebody I've worked with them had the exact same experience, I have a friend who works at another, not an agency, but like a, they're like credit card processing. And I hear all the time, our developers make the worst excuses for not doing things and they just, they're just rude to the customers rude on email, you know, just generally, that is not good way to be good. That is not a good way to be. So communication skills for being developers, it's going to do a lot for you as a person, but it's going to do a lot in your career. Because if you're somebody that people want to work with, then they're going to want to work with you more hire, you give you promotions, all of those things. They're gonna say nice things about you when you do job interviews elsewhere. So you're gonna need to work on your communication skills. This one first one I have here, I think is a big one. For me. We as developers, I think we are often optimistic about our deadlines and timelines, right? You say, Oh, I could get that done in a couple weeks. So yeah, I could do that this as a couple, throw some divs on here, slap some CSS in there. And we're done. Right? It almost never works out the way that we expected. So I have two tips here. And one is to be honest with yourself, and upfront about deadlines. If this thing is really going to take you two months, don't say it's going to take one month, just so you can look good. Be honest about how long you think it's going to take or how long it could take. Number two, give yourself padding in this regard. If you think it's going to take some amount of time, and you have a little bit more time to give padded pad that thing. Because if you deliver early people are going to be happy. And if you deliver late, people are going to be upset, even if that delivery date is the exact same thing. - -74 -00:32:53,970 --> 00:34:57,650 -Wes Bos: My tip that I have here for communication is don't let people expect more frequent communication then they should. So yes, this goes both for clients as well as anyone really emailing you is that they shouldn't you don't don't train them to expect an immediate response. Or don't train them to expect a text message. Like I get this all the time I get people try to like they get my phone number, which I posts for phone calls, but they like text me at like, two in the morning or something like that, or what else happens? People find my Facebook and messaged me on there or, or Reddit messaged me and like they just find all these different avenues to try to get a hold of me. And I just don't reply at all. Because I'm like, there's no way I'm going to start using Okay, this is another avenue which people know they can, they can try to get a hold of me. Same thing with email from clients. Like if you reply on like a Saturday night, boom, you've just, you've just told your client that you're available, you're available on Saturday night, and now they're starting to expect that kind of thing. And then they it same thing with people that send like follow up emails, like three hours after they send it, that immediately just gets put to the bottom of my list because they're like, That's no way to treat somebody and expect to get a an email back right there. So I'm awful at responding to emails, I know that but I'm fine with it. Because it's not really my business. You're trying to make courses here and teach people to code. So that's fine. So just things like like schedule an email to send the next morning. There's lots of tools out there, like it's totally fine if you're if you're replying to an email at Saturday night because you have it in your head and you want to get it out of your head into your system. There you go. But schedule that to send out at a certain time and just work hard to train people that you are not available 24 seven, because at the end of the day, the communication is very important, but it is not your job. Unless you are a project manager to do this communication. Your job is probably making websites if you're listening to this, and that's where you should be spending a lot of your efforts and time - -75 -00:34:58,050 --> 00:35:18,440 -Scott Tolinski: totally a couple tips. I have here for communicating. All this stuff is super important to me too. I think, like you mentioned, don't make yourself available. I'm so bad at that. I'm on chats and Hangouts, I'm on this, I'm on that I'm just opening every app to chat with people on Instagram, whatever I like. Yeah, I'm awful at that I need to be Yeah, they - -76 -00:35:18,440 --> 00:35:39,000 -Wes Bos: Instagram. So worse, I get like, cuz it's like a Saturday afternoon. And then someone sends you a screenshot of their coding problem. And I'm just like, like, I can't, like how am I supposed to like code on my phone? First of all, like, like, Instagram is a phone only thing. Anyway, I'm ranting here, but do any avenues to be contacted? - -77 -00:35:39,440 --> 00:37:14,310 -Scott Tolinski: Totally. Yeah. Yeah, limit those avenues. I like a couple of things here. Typically, I like to, like when people email you, it's really hard to convey emotion feeling and immediate stuff over email. Sometimes I read some emails, and I think this person is just pissed off, they're just angry, and they might not be. And so it's hard to do this. But I think you should always assume the best intentions, when somebody is sending an email, unless they're, they're calling you names or something, I would always assume best intentions, or that maybe somebody is having a rough day, and it's not you, whatever, there's, there's a lot of different, like, reasons why this email could seem salty to you, or angry or whatever. So basically, I like to assume good intentions, and I like to respond with good intentions, for the most part, somebody's being a jerk to me, totally, I'm not gonna have any problem, either just not responding or being a jerk back. But you know, for the most part, give them the benefit of the doubt, you know, people work hard, and they can often be upset for any number of reasons. I also had Don't be a jerk to clients or co workers on here with, yeah, specifically, do not be a jerk to your co workers, because those are your people, those that that's your team, right. And even if you don't gel personally, with some of these people, you've got to have their back. They're there, your team, you're on the same team, you're all working together to accomplish these goals. So you know, if you have a client, that's being a jerk to one of your co workers, stand up for them or whatever, but in the same regard, just try not to be rude to anybody here. We're all just, you know, needing a little bit more kindness in our lives to each other, you know? - -78 -00:37:14,480 --> 00:38:16,770 -Wes Bos: Yeah, one more tip I have about assuming good intentions is trying to take cross cultural differences into account. Because I often we'll receive emails, which I'm like, wow, this this guy's a jerk. And then you realize, like, Oh, I even some one time somebody emailed me and was like, trying to like, I think that they're trying to like wrap joke around. Yes, as like as me and you do on the podcast, but they just like, they like we're dropping f bombs and saying, like, hurry up and putting emojis everywhere. And I was like, wow, like, you don't have to be such a jerk. And then he replies like, I'm so sorry, I was trying to, and it was a guy from India. And he just like I had totally lost in translation, the How to joke around with people and not be a jerk. Like there's a fine line there. And I'm certainly I get that all the time. I often have jokes, and they're just, like, totally lost on people from other countries. Because that sort of humor doesn't translate. So you always have to remember that type of thing. - -79 -00:38:17,130 --> 00:38:21,840 -Scott Tolinski: Yeah, it's funny. I just got a I just got a That's weird. - -80 -00:38:21,840 --> 00:38:22,620 -Unknown: I guess I was like, Oh, let - -81 -00:38:22,620 --> 00:39:12,360 -Scott Tolinski: me see if I can pull up my YouTube to see some comments were some good intentions are intended. And the very first one I'm gonna say this guy did not have I just got this a couple minutes ago. This guy did not have good intentions. He says, I just lost 15 minutes of my time. What is this guy not updated the repo Seriously? Oh, I'm so sorry that my free content that you had to change the import slightly really upset you Mr. Giorgio here. So you know, sometimes it's okay to just be a jerk and jerk back to these people. I've been responding to some of these lately. Like, you know, somebody was just like, just got totally shocked. And I'll respond to it. How kind of you mark you know, just like a nice little. Yeah, that's exactly right. Sometimes it's okay. - -82 -00:39:12,420 --> 00:39:45,420 -Wes Bos: I've been going crazy with the block button on Twitter lately. And oh, yeah. I've been getting a couple emails of like, Hey, I actually really love your stuff. Sorry. I was totally joking. And like, it's just like, lost on. Even on Twitter. It's lost on me. You know that someone says something. They're trying to be funny. But I'm just like, What a jerk. And I hit the block button. And then they email me like, Hey, can you block me because I actually really like your stuff. I was just being I was just joking around. So that's maybe something I need to take into account, although like there's a lot of jerks on Twitter too. And I rightfully block a lot of them. - -83 -00:39:45,860 --> 00:40:09,980 -Scott Tolinski: I've been viewed. I really love blocking people on YouTube. If somebody drops any sort of swears on my channel or an educational channel, you drop some I'm gonna block you. I'm just not gonna bother. And I hit some guy who was being a jerk, like super jerk to me, and I looked him up on LinkedIn, and I'm added on LinkedIn. He sent me a message saying, I know why you added me on LinkedIn. I'm so sorry. I'm having a bad day I deleted the comment. It was super rude of me. And I didn't have to say anything. And I got - -84 -00:40:11,130 --> 00:40:14,150 -Wes Bos: Oh, man, say a single thing. Hey, yeah, - -85 -00:40:14,190 --> 00:40:18,780 -Scott Tolinski: LinkedIn has been good for me with that. lately. That's been a fun little fun little move I picked up Oh, - -86 -00:40:18,960 --> 00:40:27,270 -Wes Bos: I need to start doing that. Because LinkedIn is has no other value to me that professional network. Yeah. Yeah, that's great. I'm gonna, I'm gonna take it out. That's great. - -87 -00:40:27,780 --> 00:41:14,100 -Scott Tolinski: So Okay, next section here is skill and career advancement, which is obviously something we've covered a lot of times on this channel. I love these kind of topics. You know, I'm all about this. So one of my favorite ones is fd D. Every time I come up with something, I give it, an acronym for driven development. And driven development is a hobby driven development, I have a whole bunch of these. But fund driven development is just when you want to learn something, find ways to make it fun, because you know, when your something is fun, it, you're going to go back to it. So whether or not it's attaching something that's already fun and attaching to it, like we've talked to before, about hobbies, or like picking things to learn that are actually fun making a video game or something that you enjoy, make it fun, and it's going to fuel your drive to learn it. - -88 -00:41:14,100 --> 00:42:32,580 -Wes Bos: Next one we have here, this is funny, Scott type this as I was typing it, and it was hilarious. It's share what you learn. And it's a bit of a cliche, but I honestly find it super helpful, both for me, because you can get tips from other people as to how to how they attack the same problem. But also just it's such a good thing to be able to share what you learned. So I wrote a script the other day that went off and scraped all of my blog posts from the WordPress API and save them to markdown and then also downloaded all the images and did the same for all my Twitter Hot Tips and expanded any short URLs. And that's a pretty specific thing to want to do. But I still shared it online, because people are just like, Huh, like, how would you download an mp4 from Twitter without getting blocked or something like that. So just being able to just just put it out there, people love to read this type of thing. They love to sort of dig into little ideas. And more often than not, it will maybe spark something in their head for what they want in there. So just sharing what you learn. That's how I have gotten my entire career to this point. Literally just Same here, I open book and sharing what I know to people, even though I'm for sure not an expert on absolutely everything. - -89 -00:42:32,850 --> 00:43:30,110 -Scott Tolinski: It's worth it. It's been my entire career, I started you'd level up tutorials to show things in Drupal in SAS or whatever, that I didn't feel like the documentation existed. But there's these things that I just learned. I was like, oh, fairness, maybe somebody looks at this the same way that I'm looking at it, share what you learn in it will take your career to places that you have never imagined every single job interview I've come up to, they will be like, Oh, you created 700 video tutorials on YouTube. And, uh, wow, okay, well, you kind of know about this stuff. Hey, I saw this video tutorial on this topic. And your thing, can you tell me a little bit more about that, like, it really changes how people view your work because they just see that you are hunting for this value. Because even if you aren't sharing it, like if you aren't sharing, you're hunting for all that knowledge and whatever. And you have to tell people you have to like legitimize your skills there. But if you have all this content out there, they're misers for a job interview or career advancement. - -90 -00:43:30,440 --> 00:43:48,210 -Wes Bos: Big Big yet. And that doesn't have to be necessarily code. Oh, it can be just tweeting out something you have writing a little blog post, whatever it is, if you learn something, put it out there in the world, because somebody else is going to stumble across it at some point. And that's what keeps the world turning. - -91 -00:43:48,540 --> 00:44:23,310 -Scott Tolinski: I just recently started doing this weekly series on code blogs. And it's like I'm writing this code for level up tutorials. Anyways, people often ask me about my site. So now every time I need to do something sort of original or unique, I just turn on my camera and record a video. Okay, here, I'm converting this component from react spring to framer motion, and we're going to talk about it. Or here I had this janky issue where my code is dropping to 10 FPS, let's talk about how I fixed it. And it doesn't have to be anything major or polished, just put it out there. And if it could help people, - -92 -00:44:23,580 --> 00:45:04,740 -Wes Bos: that's what my last like five YouTube videos have been. Because they like Same here. I'm trying to be like, I want to keep doing YouTube. But like I don't want to, I don't necessarily have time or want to create custom content for YouTube. And at the same time, this just sort of live coding is becoming much more popular. So anytime I run into an issue or an interesting way to tackle something, like I learned about CloudFlare workers the other day, and I didn't record the entire thing, but I had gotten it to a point where I was like, I would like to tell other people what these are and how they work. But a quick little video, I think that it's interesting that we both sort of landed on the same thing. As just sharing what you know, whether it's on Twitter, YouTube podcast, you get it. - -93 -00:45:05,070 --> 00:45:33,570 -Scott Tolinski: And I mean, that's both how we created our careers level up tutorials, you know, Yes, boss, your blog posts, they'll come up all the time when I google things and on this podcast, and it's just like everything that we've done really follows this, and it has really changed things for me. So if you share what you learned enough, maybe it's going to blossom into a full on business. Or maybe you're just bringing in some ad revenue. And to do that, you're gonna keep track of all that stuff in your new cloud accounting software, which is Freshbooks. - -94 -00:45:33,960 --> 00:46:39,090 -Wes Bos: Yes, I just spent, oh, not that long, maybe four or five hours in Freshbooks, which is the most I'll ever spend in it all year, I generally just hop into it and check on invoices a couple times a month, but I had to generate reports, on invoice details, how much money came in how much money went out via expenses, all the different currencies that have all the different taxes that are in Canada that I had paid out, so I can get them back. And that was awesome, because they just logged in and generated all those reports. So if you are using Freshbooks, to keep track of your expenses, and send out your invoices and track your time, when it does come time to working with and doing all of your taxes, it is actually pretty smooth, to be able to just export all those things. my accountant loves it. So check it out. freshbooks comm for slash syntax and use the syntax code in the How did you hear about a section it's going to get you a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring. - -95 -00:46:39,600 --> 00:47:19,470 -Scott Tolinski: Thank you. Alright, so Okay, continuing this career advancement, we're getting a little tasty here. So we can move this forward a little quicker. But don't those of you who suffer from imposter syndrome, don't let the progress of others get you down. People learn things at faster rates, people, some people don't even necessarily learn things at faster rates. They just like to pretend that they do or, or talk about the stuff that they're learning to a greater extent than maybe they are. And so don't let the progress or perceived progress of other people make you feel bad about your own progress. As long as you're working towards your goals. You're going to get there. Just keep grinding at it. Keep working. Yeah. And you do you and just keep doing it. - -96 -00:47:19,770 --> 00:48:14,010 -Wes Bos: You see that on Twitter a couple weeks ago, people are sharing their like salary and how long they've been voting for. And like, that was just like a flex contest for sure. I think that's helpful. Yeah, only people that were making more than like $140,000. And there's some people posting, like, Oh, just made 450 and things like that. And I for sure know that most developers are not making that much money. And I know that that I could sort of have a sort of a vibe of people being like, this is kind of a bummer. Like, I don't make that much total make that much money. And also, there's a lot of people that were like, I'm making 470. And I've been a developer for six months, and things like that, where I'm just like, oh, man, like I've been a developer for forever. And I don't know, I don't think I could ever make that much if I got went and got a job at one of these companies. And then you either see like, Who's the developer Behind Code, sandbox? - -97 -00:48:14,010 --> 00:48:15,210 -Unknown: lib. - -98 -00:48:16,500 --> 00:48:51,690 -Wes Bos: Let's see here. It's a Ives Van Horn built code sandbox. That guy's like, I don't know how old he is. But he's not been a developer for very long and just created this like, amazing code sandbox. Next level stuff gets VS code running in the browser, like it's no problem. And you I see that all the time. Now that I'm like an old guy in the industry. You see these people that just out of nowhere, start building these amazing open source projects. So don't compare yourself to others. I think for most people, you don't make as much money and it takes a lot longer than you think. - -99 -00:48:51,900 --> 00:49:58,020 -Scott Tolinski: Yeah, everybody's on their own journey. Right? And yeah, be be proud of your own journey and work for it. But don't, don't compare yourself. A big one for me is tracking my progress on things. If I'm going to want to learn something, I want to make sure that I'm staying on target and tracking my progress to make sure that I know exactly how far along I am. Or if I need to refocus or redo this or redo that. Like I want to know exactly. If I'm able to do all of the things that I want to do. So track your progress. I like to use an app for like habit tracking specifically, this is a little bit more habit tracking. But if I want to advance something or change something in my life, whether or not it's in code or specific skill, I put Yeah, I put a little thing in my tracking app, which is called streaks is the one that I use for iOS. I used a habit tracker that we talked about on the show for Android before in the past, but I say let's say I wanted to stretch every day. I then have to click stretch. Okay, I stretched every day. And this holds me accountable. I love these systems. I love the charts, where I can see that I've you know done it every single day of this month or I did that or whatever it keeps me going right - -100 -00:49:58,020 --> 00:49:58,860 -Unknown: I need - -101 -00:49:58,860 --> 00:50:19,050 -Wes Bos: a habit tracker For that, using my habit tracker every day I know every morning I get a notification it says floss or drip. And I just have started to ignore I still floss every now and then. But it's not working for me I need something. Something else I need like money on the line, I think the health of my teeth. - -102 -00:50:19,140 --> 00:50:31,800 -Scott Tolinski: I think there is an app that if you don't meet your goals that sends you like put the money in and if you don't meet the goals that duck sends it to a friend of yours or something. So you would lay need to learn how to floss. Wes, you can send me I need a buddy. - -103 -00:50:31,890 --> 00:50:32,520 -Unknown: Yeah, you - -104 -00:50:32,520 --> 00:50:35,730 -Scott Tolinski: can just send any money every time you don't floss. I'm cool with that, - -105 -00:50:35,760 --> 00:50:40,620 -Wes Bos: when like what's a reasonable amount of like money to lose for not flossing, - -106 -00:50:40,770 --> 00:50:53,790 -Scott Tolinski: I would say like 10, Grand 10 Grand 10 grand, just like your team, but we got a bathroom remodel we gotta do was 10 grand is appropriate. 10 grand, - -107 -00:50:53,850 --> 00:53:05,490 -Wes Bos: okay. I'll have to sell a few things. Just looking around my office. Yeah, right. You want to buy a paper shredder? A lot. Next thing I have here, I wasn't really sure where to put this. But I see it from a lot of people that they say like, I want to do what you do, I want to do X, Y and Z, I wish I could start a YouTube channel, you're so lucky that you get to do this. And like one thing that popped up a little while ago is that I was just asking for people who do workshops, because I get people to email me all the time asked me to do workshops for the company. And I do as many as I can. Because I love them, I just thought I can't possibly do all of them. And a lot of them are very far away. And and I could only do like one or two of those a year. So I was just asking, like, hey, like who else does training out there. And then I sort of followed that tweet up with saying like, hey, like you should get into training if you are interested in it. Because doing like workshops for corporations, like you go into their company, as well as you go to conferences, they pay super well. And if you can create course content that takes a long time. But if you can create like a react workshop, and if you workshop and a CSS workshop, then you can just go into these companies and give these workshops and they pay super well. So like a bunch of people were like, Oh, that's super interesting, me, I would love to do that. And I got like a tweet the other day from somebody and said, like, it was like four months later, they're like, Man, I'm taking my first steps actually doing this. And because a very few people actually just go ahead and do it. Even though I said this is a very clear opportunity. Supply and demand is very out space right now. And companies have major budget to do these types of workshops, if you could just go ahead and start doing that. So just one person out of the like 15 that's that I love to do that actually had started taking steps towards it. And I thought like, Huh, that just shows that you just have to like, start putting one foot in front of another. And if that's something that you want to do, then start doing it, make a website, make a make one training course and start emailing around saying, hey, I'd like to offer this course. - -108 -00:53:05,820 --> 00:53:42,150 -Scott Tolinski: Yeah, and it's cliche at this point. But that whole thing, you know, the best time to plant a tree was like 100 years ago. And the second best time is right now. Yeah, that's a great quote. And for a lot of things, because honestly, you just want to get started. And even if you just start digging a tiny little hole, at least it's getting started with something. And I do think that's an important thing to just, you, you can do so much more than you give yourself credit for it. You just got to start doing it and start trying it fail along the way and learn a whole bunch. So that's really all I have in this soft serve episode. I like this. I feel like we could do more. I have a lot more like I could go I could go for hours on this kind of stuff is what I love. - -109 -00:53:42,510 --> 00:54:03,810 -Wes Bos: Yeah, Yeah, me too. I we don't do a whole lot of these soft skills. But if you have a topic that you'd like us to sort of cover, and not necessarily that we're experts, but we certainly thought about it a lot ourselves, and we can share our own experiences. Just tweet us at syntax FM or pop it in the potluck question. We'll see them there as well. And we'll certainly do some more episodes in the future. - -110 -00:54:04,110 --> 00:55:54,270 -Scott Tolinski: Yeah, absolutely. Okay, let's get into our sick picks. These are our picks that we find to be sick. These are the things that we like we think are an interesting or exciting, I have a YouTube channel for you today. And this one, I can't necessarily say that this is going to be everyone's cup of tea or a cup of soft serve, if you will, because it's a music channel. It's not a music channel. It's a channel that's uploaded a bunch of harder to find Japanese music of a genre of city pop, which is not something I really know a whole lot. So to avoid really making a jerk of myself trying to describe this generous history or anything. I am going to post one album in particular that I have been just going nuts on. And while I'm listening to this album, so many thoughts came through my mind about what it sounded like. If you've ever played the video game, Wave Race 64 it's like sort of cheesy jetski music. That is what This album sounds like it is awesome. And so it's so funny because I come up with all these descriptions. And then I looked in the YouTube comments and just about everybody is saying the exact same things. Oh, this sounds like it could be in Mario Kart, it sounds like wave 364 somebody says that right in that weird place where the 80s meant the 90s. And it does it, it has this very specific ad aesthetic, but like totally 90s somebody says, It's like being stuck in an elevator for 46 minutes and having a great time watching The Weather Channel. And the groove is just too real. It is a very interesting genre of music. And the best part is it's sort of like, Jazzy, and instrumental. And I could code to this all day long. This is to me, it's like perfect coding music. So if you think that you would like to listen to the Wave Race 64 soundtrack for days on end, then check out this channel. If that does not appeal to you, then you probably won't be into this. - -111 -00:55:56,580 --> 00:56:06,720 -Wes Bos: That's awesome. I am going to sit pick the amplifi alien router. So this is a new router from ubiquity. They full disclosure, they - -112 -00:56:06,720 --> 00:56:11,580 -Scott Tolinski: sent me this for free, are you being paid for this advertisement list - -113 -00:56:11,610 --> 00:56:36,330 -Wes Bos: not being paid, but did definitely got a free wicked router. So what it is basically a it's a it's a wireless mesh network router, you can buy one, or you can buy eight of them and hook them all up. And they'll all operate in mesh, but it's Wi Fi six, which Wi Fi six has a whole bunch of benefits, including, like faster. I think it goes up to gigabit over Wi Fi. - -114 -00:56:36,510 --> 00:56:49,680 -Scott Tolinski: And it gets close at least because we talked about this before at least go Yeah. 600 or 700. Yeah, it gets up to no, right. Yeah, it gets up to 7007 685 megabits. So - -115 -00:56:49,920 --> 00:58:03,000 -Wes Bos: yeah. And also if you've got like tons of devices on your network, like a bunch of phones, but just security cameras, doorbells, things like that, that King I watched a video on how Wi Fi six works and and how broadcast works. And so I basically I took this amplify alien router and I installed at my parents house, because the Wi Fi coverage at their house was was not good. And my dad needed a better router. So I installed this at his house. And first of all, the thing looks really cool. It's got like this glowing green underneath it, it's got a little screen on the front, or you can see what's going on with how fast upload and download are going, which is pretty cool. And then there's a really nice application where you can manage all the different devices on your network. And you can set like I always set our TV and any other streaming device to have priority over other network traffic totally so that I'll go faster. But the coverage is good. My parents just have two wireless routers. And we didn't even put this in Masha, we only had one and it covers the entire house, which is a pretty big house. So I was pretty happy with that. It's a pretty nifty little thing. If you're looking at the next gen of routers, I would definitely check this one out. It's one of the few Wi Fi six routers available at the moment right now. - -116 -00:58:03,120 --> 00:58:09,780 -Scott Tolinski: Yeah, you should hop on the call with amplify and say, Hey, I got another place in Denver that wanting one of these - -117 -00:58:09,780 --> 00:58:38,100 -Wes Bos: come up. I've got Mr. szalinski. I want this. So I'll get right people to talk to your people. It's It's pretty cool. I so I have the amplifi HD right now we should be like a whole networking show. Because I got a bunch of gear from them. And I'm just testing it all out. And I've previously talked about the amplifi HD, which I've had for a couple years I've been really happy with that. And then they have like another like pro line, which is all their unify stuff. Interesting. Yeah, networking show, - -118 -00:58:38,130 --> 00:59:20,220 -Scott Tolinski: we'll do it. I'm gonna be into this. Because I've been I looked my Google Wi Fi, but I'm getting a little frustrated with it. Because it's you can't do the like the VPN on the whole network, you can't do a lot of that stuff that you would like to do with maybe a more advanced router. So find my network getting slower over time. And then I have to restart the entire network. And then all of a sudden, it's fast again, or I get speeds again, and it's just through the Wi Fi router. Like everything Ethernet is fine. But like let's say, after I restart my router, the signal in my gym is five stars or whatever, and it works fine. But before I do that, it's like once or like having a hard time connecting. So I've really no idea what's going on with Google Wi Fi. It's kind of making me frustrated lately. - -119 -00:59:20,640 --> 00:59:57,420 -Wes Bos: Yeah, that's one thing I want to do is put a VPN on the router itself. And this amplify won't do that. This is like a more of a home gamer system. And their unify stuff is more prosumer or actually is professional professional equipment. And on those they have a lot more control over the entire network, which is cool. Like I went to school for Telecom. So I actually love to geek out about this type of stuff. Um, it's cool. All right, a shameless plugs. I'm gonna shamelessly plug my beginner JavaScript course at beginner javascript.com Use coupon code syntax for 10 bucks off. - -120 -00:59:57,720 --> 01:00:31,230 -Scott Tolinski: I'm going to shamelessly plug my animating react with framer emotion course, which I just launched. It's so cool. This product that I made that I'm trying to sell you on is so cool. Now this is a really cool course that I did about animating react with framer motion. We do all sorts of practical things like creating models, then we get into some of the Golden animations that are really hard to do like animating height auto animating unmounting router changes and orchestrating large scale animations. It's so cool. So level up tutorials.com forward slash Pro, sign up for the year save 25% - -121 -01:00:31,620 --> 01:00:35,640 -Wes Bos: Alright, thanks for tuning in. We will catch you on Monday. - -122 -01:00:37,020 --> 01:00:37,590 -Unknown: Peace. - -123 -01:00:39,480 --> 01:00:49,230 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax231.srt b/transcripts/Syntax231.srt deleted file mode 100644 index 5553665fb..000000000 --- a/transcripts/Syntax231.srt +++ /dev/null @@ -1,156 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA and Scott Taylor. Totally ski. - -2 -00:00:25,950 --> 00:01:05,400 -Scott Tolinski: Oh, welcome to syntax on this Monday, we're gonna be talking about hiring an assistant, which is something that is, if you are working as a solo Dev and entrepreneur, you're working as anybody, it's actually shockingly more affordable than you can imagine. And it makes your life a lot easier. This is one area of my life that I am struggling with. So so much. So we're going to hear all about Wes his experience hiring an assistant talking a little bit of how they get their workflow going. And just generally how we get that productivity up. My name is Scott Alinsky. I'm a developer from Denver, Colorado and with me, as always, is Wes Bos. - -3 -00:01:05,640 --> 00:01:06,590 -Wes Bos: Hey, everybody. - -4 -00:01:06,870 --> 00:01:08,510 -Announcer: Hey, Wes. How's it gone? - -5 -00:01:08,900 --> 00:01:13,200 -Wes Bos: It's gone good, going good. I don't know what to say, cool. Well, this - -6 -00:01:13,200 --> 00:01:20,790 -Scott Tolinski: episode's gonna blast off. And we're gonna be doing so with a rocket, a rocket, what kind of record a lug around a logging - -7 -00:01:20,790 --> 00:01:22,860 -Wes Bos: rocket, a logging rocket. Now - -8 -00:01:22,860 --> 00:02:07,020 -Scott Tolinski: what is Log Rocket? Well, you're gonna want to head over to Log rocket.com Ford slash syntax. And you're gonna a little bit, learn a little bit about Log Rocket, you'll get 14 days for free. If you hit that URL Log Rocket is a service that allows you to stop guessing why bugs happen, right? Even with a text trail of a bug or an error log, it's still difficult to always understand exactly what's happening in your application. So that's why Log Rocket gives you a session replay, which is a pixel perfect replay. If you saw a you know, basketball guy, you saw Michael Jordan, he does a dunk right? You want to see that? Again, you do a rewind, you do a replay you watch that thing happen in real time where he jumped from how to jump How to do it? Well, the choice was that you could do that with your bugs? - -9 -00:02:07,020 --> 00:02:08,610 -Wes Bos: I do. Wow. - -10 -00:02:08,630 --> 00:02:34,530 -Scott Tolinski: Yes, I want to I wish I could do that with my bugs. I scrubbed through and just see the user clicked here and the entire thing turned into a velociraptor. How'd they do that? I don't know. Well, now you'll be able to find out because you could see Redux store your network activity or councils, errors, logs. And you'll get to scrub through that works with anything you know, and love. So check it out Log rocket.com forward slash syntax, big fans of this service over here. And you're gonna want to check it out and just see how easy it is to see those bugs. - -11 -00:02:34,880 --> 00:04:39,540 -Wes Bos: Alright, so let's get into it. Let's talk about hiring an assistant. This is something that I've done for probably about two years now. I know a lot of people sort of asked me questions about it. So I thought I'd detail as to how do you find someone? And what do they do? And how do you delegate tasks and whatnot, it was a big step for me because like, I'm not running a business, I know, there's probably people listening that have like seven people that work underneath them and that they delegate all that stuff, I'm very much I just want to work on what I want to work on. And I want to put my head down and just code the day out. And when the administrative side of running a business gets in the way, I find that to be a little bit frustrating. So about two years ago, I hired an assistant. And they have done an awesome job at sort of helping me out and doing the work that I don't want to do that frees me up to do this podcast and things like that. So first of all, there's sort of two different types of assistant you can get like an in person, Assistant, someone that lives locally. And then you can also get a virtual assistant, which can live anywhere, but it's pretty popular to get someone from countries where the cost of living is lower, like the Philippines and things like that Philippines is really big country. Personally, my assistant lives locally, which is very handy for some of the stuff I'll talk about in a second that needs to actually happen in person. But there definitely are benefits to having somebody that is virtual. Whether that is someone that's in the same country as you or somewhere around the world, just because like if you offset timezones with somebody that is helping you out, that can be a benefit, because then then you're being able to monitor email for 14 hours a day instead of just eight hours a day, or you wake up and there's a bunch of questions already, something like that. So that's definitely a help. Personally, my my sister lives in the same timezone. As me though, we've been thinking about getting a system as well right, Scott, - -12 -00:04:39,690 --> 00:05:23,490 -Scott Tolinski: I have about 15 to 20 applicants in my inbox for virtual assistants, I'll donate domestically, some of which are even here in Colorado, which is nice. But I struggled and fell short when it came time to do the thing that I would like an assistant to do which is go through all of them, evaluate them In your email, yeah, man, whatever, I got those like, you know, 1020 applicants, I was just sort of like, well, now what? I gotta give him a task, I gotta figure out who's reliable got to do all that stuff. And I just believe it or not, didn't have the time to do it. So I'm a victim of not having an assistant already, really need to work on that aspect of not only my business, but my life in general. Yeah, - -13 -00:05:23,550 --> 00:06:42,090 -Wes Bos: I feel that way too. Like, I don't ever want to take on something that becomes a project. For me, the reason why I want an assistant is so that you don't have to spend time on something right? And you don't have to check in with them every single day to answer all these questions like, just like, I was very clear up front. I'm like, I just it's not that I want to be left alone. I didn't say that. But like, I need to be able to do my work and have somebody take the reins on the stuff that I can't do. So what type of stuff is that? What what types of tasks Do you delegate? So I do a lot of support is delegated. So not technical support, because my system is not a coder, not a developer, right. But more things like administrative support, receipts, amendments, little refunds, too, these are the types of things that are death by 1000 cuts where it's, it's not, it takes me 42 seconds to refund somebody $10 because they forgot to type in the coupon code or switch over a course from one to another because the one that they bought was too advanced. And they need the beginner one and said all things like that are so minimal, but they they meet up by just doing them over and over again. And I just also don't like to do that type of stuff, I - -14 -00:06:42,330 --> 00:07:57,420 -Scott Tolinski: do want to how I solve some of these problems myself, not having an assistant is to see how many of these things that I can like identify these death by 1000, cuts items, right? and identify how I can write a tiny bit of code to make those things way easier in my admin platform. And this is the benefit of owning your own platform. So many people talk about, oh, I started doing this on teachable or any of these other platforms. And it's like, well, what happens if this situation comes up? Well, now you gotta, you got to have an assistant do it, you got to do it, you got to spend the time. But for me, if I have a standard situation, which is maybe somebody's asking for a refund, I built like a one click thing here in my interface, I just type in the order number, click the refund button, it processes it all deletes it all and does everything for me sends out the emails, yeah, whatever. It's like a one click solution. And that to me, frees me up so that sure enough, it is like a context switcher. I'm having to do that myself and still having to go look up the order and delete it. But it's opened up the door for an assistant or somebody to be able to do that foolproof way of solving these problems. So if you can like write a code solution to a lot of this stuff that could even open you up as like an assistant to your assistant. - -15 -00:07:57,630 --> 00:10:12,150 -Wes Bos: Totally, I think like what I did for years and what anyone should do before they go ahead and hire someone is figure out how do you automate that? Because like, not only does that is that not free, but it also takes any of the room for error. Yep, out of the equation, because it's it's automated, it's tested, it just works like that. So I felt a whole bunch of tools that are just for my assistance use. And then under the hood, it does a lot of the stuff like my assistants not going to log into PayPal and find the transaction and make sure they work up. It's just a button that they click on to, to make a refund or something like that. What else email replies, big one for me. So for the email for me, it's it's either taking a big email, people write books to me and distilling into one question that I can answer, or the opposite, which is me writing a very terse reply. And having her extrapolate that in a kinder way. And both of those are great, because I don't need to spend my entire life reading this big book. And often, often, they're, they're very emotional, too. I got fired from my job. I can't afford this thing. What's going on right now, and I love seeing those, but I can't I can't read like six or seven a day. It's just too much for me to put myself in a state like that. So I can just have the question, Wes, can I offer a refund on this course? Even though it's a year old? Yes. No? Yeah. Yes. No, yes. No, right. Or even just like, I'll talk about slps in a second question doesn't even come into me at all or email replies. I'll just write like a quick like, sorry, can't do this. And then she'll extrapolate that like, hey, thanks so much for emailing, unfortunately, not able to do this because of xy and z. But we can do these following things for you. So that cuts down my email quite a bit. I still do get more email than I ever could possibly want. But that only makes the processing of it much faster. Also, email goes through my system. At first, so any email that comes in is processed and anything that she can deal with gets dealt with before it even hits me. And then anything else that needs to go through to me goes closer to me. And - -16 -00:10:12,410 --> 00:10:55,110 -Scott Tolinski: I'm interested in hearing a little bit more about that process. If you have the time to do that right now. Yes, definitely. Because I know we both use the same app to do this, which is missive, another are there email apps that do this kind of thing. But I'm interested in hearing a little bit more about your missive workflow, because the way I have mine set up is that I have my inbox, right, which is just my standard inbox. And then I have my unassigned, which every single one, like a customer service request, or something right now goes into unassigned because I'm the only person in here will actually even corny and Eric are both in here as well. But for me, the way I was trying to get it set up is when you have something come in through your your email or whatever does automatically get assigned to your system. Is - -17 -00:10:55,110 --> 00:12:44,490 -Wes Bos: that what happens? So I've got two email addresses. And I'm not going to say what they are because people will figure out how to actually know this. I don't care. Like if you email me directly, you will get a much slower reply. Yeah. So I've got I've got my personal email, which is Wes at Wes Bos calm, and then I have my support email, which is Hey, at Wes Bos calm. So personal email comes into me first, because things like lawyers and whatnot, that's, that's private stuff that needs to come through me first. And then piece by piece, those ones I can then surface to other people. So my assistant, and then I have the support email, which is, Hey, Wes Bos, that all goes, that's where most of the support and stuff comes through. That's like the publicly listed email, all of that goes through the system first, and then stuff that can't be dealt with gets sent through to me. So basically, we each have our own inboxes. And we can each give each other things, and it works out pretty well that way. So do you do you use the assigned to thing at all? Or is that just based on? Okay, okay. Yeah, so it's entirely based on assign. So basically, I'll just blow through my email, I'll either deal with it myself or assign it to somebody, and then then it's out of my hair, and it's gone. And it will only show up if I'm tagged in it, or if it's reassigned back to me. So something like something that is complex, and we don't have a tool for it has to be done in the database, then that'll get assigned to me, I'll do the thing. I'll do the process. And then sign it like an example of that is deleting someone's account, right now I have to write a tool to totally wipe somebody out in the out of my database. So right now people email, say, Hey, I request to be removed. And then I have to wipe everything from our databases. And then I'll send it back to the system. They'll say, Hey, we got ready, you got rid of every little piece of data we have about you. Thanks for letting us know. - -18 -00:12:44,520 --> 00:12:54,870 -Scott Tolinski: Yep. Do you use the chat functionality? If you haven't used missive? There's this whole chat, which allows you to chat with your team outside of an email. Do you use any of that? Or do you do chat by either means? - -19 -00:12:55,140 --> 00:15:09,690 -Wes Bos: No, I do it. I do all inside of missive. I really like it because you can assign like to dues inside of the chat. Like just like lightweight to dues where if I give them something, I just put a list of things to do, Hey, can you log this receipt and send this mail and whatever. And then I just put them as little checkboxes and they can check them off as they finish them. So I use that I use the chat in line much more though, like if you have a customer email, you can chat in between the replies with the other people that have access to it. And that's great, because you can talk about how to reply to someone without the the person seeing. And then also, you can always go back to old emails and see what you had talked about, about that email as well. So big fan of that totally cool. Other things, I use the get the assistant to do his mailing and shipping of items, the one thing I would like to do is to get somebody totally separate to do that, that lives in the States. Because I often have to ship stuff to the States. And it's incredibly expensive. So I'm thinking about maybe finding somebody that just like lives in the states and would want to do that, just for that. invoicing and expenses is huge one for me. So I'll just do a quick little reply on an email and say, Hey, can you invoice them for XYZ in this currency and whether or not to include tax expenses is great, because I'll get an email from a company and says, we charged you 30 bucks for this service. And I'll just assign it to the assistant. They'll take a screenshot or print as a PDF and attach it into my fresh books, which is great. Research is one that I get every now and then. So like if I say like previously, I've said can you go find emails for the following coding boot camps or something like that, and then they can go out and and find all that information, blog post edits, sponsorships, all kinds of like little stuff that I don't necessarily want to do, you can just pass over to the assistant. So one big, big way that I sort of automate the stuff that can't be coded is called SOP, standard operating procedures. So behind Have a big list of things that could possibly happen. Hmm. Can you provide an example of an SLP that you've written in the show notes? - -20 -00:15:09,750 --> 00:15:11,550 -Scott Tolinski: Like, here's a sample SLP? - -21 -00:15:11,850 --> 00:15:14,520 -Wes Bos: Yeah, yeah, let me let me pull up one right now, - -22 -00:15:14,790 --> 00:15:17,070 -Scott Tolinski: just so we can get a good visual on this. - -23 -00:15:17,580 --> 00:16:17,940 -Wes Bos: All right, so I'm just looking at my recipes, and it's a document 30 pages long. And it's common questions that come up, hey, what's the difference between beginner JavaScript and JavaScript 30. Even though that information is very clearly on the website, people email me all the time asking that. So we have just like a standard reply that we have for that, or somebody has bought a 10 pack of licenses. And they say we love it, I want to buy 20, what do you do in that case? Or somebody has questions about how parody purchasing power works, things like that. Questions? Are our licenses personal and can I reuse them? This is one thing I all time, can I reuse licenses when an employee leaves the company and they took the course. And now they left? Did we get that spot back? Right? Questions like that? Where are my stickers? So you just have the answers to like, what the reply should be in here as well as like, do this, do this, do this to solve them? Or - -24 -00:16:17,940 --> 00:16:18,600 -Announcer: is that? - -25 -00:16:18,630 --> 00:17:03,150 -Wes Bos: Yeah, it's half of it is just canned replies. And then the other half of it is just like, here's how to handle a situation like that. And anything that comes up more than three or four times the same time over and over again, we say let's make up for that. Because like, I think you have to like stop and think can I fix this at like at a website level or an application level? Or can I just fix this. So they would never email me in the first place. Because it's frustrating for someone have to end up to email you. But in some cases, it's just, that's just support. That's how support works, right? At the end of the day, sometimes you do have to contact the person. So if that's the case, then we put out SLP for that. - -26 -00:17:03,570 --> 00:17:06,050 -Scott Tolinski: Cool Do you use notion for that? Or do you use for that? - -27 -00:17:06,350 --> 00:17:41,360 -Wes Bos: We use a Google Doc with a Google Docs has the ability to do like a table of contents so fun. And that's just we've got general knowledge, stickers, customer support, inquiries for requests, things like that. I feel like that's great. And I I can't pay in Iran is a big one. Yeah, people can't use credit cards in Iran. How do I get around that? I do have a credit card. My friend lives in the UK. I live in Iran. I want the Iran discount just like oh, all this stuff so that we just put that stuff into play. Cool. It seems like a really good use case for an ocean because you could have - -28 -00:17:41,520 --> 00:17:49,070 -Scott Tolinski: Yeah, sardines, you could have like a little toggle accordions and you could do table of contents in there, too. Huh? I'm gonna make one I'm gonna add a notion. - -29 -00:17:49,340 --> 00:19:13,890 -Wes Bos: I think I will move this to notion I. I made it like, oh, let me look at the day in the dark ages. But two or three years ago, I made it before notion existed. Yeah, October 12 2017. I made the made this so I probably will move it over to notion at some point. Cool. All right. Last thing, I want to talk about just tools that we use to work with an assistant. So one password is big. I need to share single passwords to something like fresh books that gets sent over if I need to change a password. It's not like I have to like, tell somebody I changed the password because it just automatically signs themselves in missive is probably the hub for everything that I do. It's an email client that allows you to assign listen to our entire show on missive and how that works. A big fan of missive custom back end tools. So I have a whole admin dashboard that's used for managing it. There's like a roll of, there's a role for someone that's an assistant that doesn't give them access to all the information but gives them enough access to information to be able to find people and modify their accounts accordingly. I use a Chromebook. So like I had to buy a computer for my Cisco Chromebook stick to 200 bucks. And it's it works great for that type of thing. Because everything we use is web based. And then Google Docs. But now that you say that I kind of do want to move it over to notion. - -30 -00:19:13,980 --> 00:19:55,340 -Scott Tolinski: Yeah, it's fun. So um, Courtney has been she wants to do like a system like things for me because she sees me struggling in various aspects. And obviously it's like, yeah, it makes no sense for a doctor to do that. Like that is not taking advantage of your qualifications, but occasionally, so she's diving more and more into like handling some of those things for me on her day off or something. So she'll be like, yeah, I booked your fight, so whatever. So I've added her to missive and we're starting to get sort of a flow going down with Mrs. notion, whatever, she can use it all in our iPad. And it's nice because practicing with her it's almost like practicing for an actual assistant. So I totally I'm getting into the flow a little bit more of it, but I really love hearing this your process here. - -31 -00:19:55,710 --> 00:20:21,590 -Wes Bos: One thing is just the vibe of the emails that you send is very important. To me, because I don't I don't like it. Sometimes you see people sending emails that are very terse. And sometimes you said, see people that send emails that are very clearly fake enthusiasm. And I don't like either of those. So I feel like I've nailed it in the middle with the way that I reply to your email you Oh, email. Thank you once more. - -32 -00:20:21,590 --> 00:20:24,780 -Scott Tolinski: Unlike sponsor emails. I'm like, Oh, I gotta take some notes here. - -33 -00:20:25,230 --> 00:21:04,530 -Wes Bos: Yeah, yeah. Yeah. Like, that's really important to me. Because like, like, right now, if somebody says, Hey, can we sponsor and we say sold out? Like, you don't say sorry, sold out? Like that's a very sorry, even though they were popular. Okay. Yeah, that's a very, like jerky thing to do. Yeah. So I had to, like, talk to my assistant about, like, how many exclamation marks to use and things like that. So it is not because she was doing it bad. But like, before we even started, I said, this is important to me. And I had to figure out how to convey my, my vibe. I'm sure other companies have that type of thing. I'm not even sure what that's called. But that that was important. Yeah. - -34 -00:21:04,580 --> 00:21:08,600 -Scott Tolinski: It's a character, culture, brain culture. - -35 -00:21:08,840 --> 00:21:18,110 -Wes Bos: Yeah. All right. I think that's it. Hopefully, that was helpful to the few of you that want to hire assistant, maybe it's interesting to everybody else. - -36 -00:21:18,420 --> 00:21:51,150 -Scott Tolinski: I think it's fascinating. I think there is a, we as developers, right, you have the ability to do so much more, right? You can create things in because you can create things, it's really easy for people to even start companies start businesses and start things like this become entrepreneurs. So I think this is such a key component to running an effective anything that if you're interested in this life, definitely might be a good way to get started thinking about what it would look like to have somebody help you out with this next, because oftentimes, it is worth it that pays for itself, - -37 -00:21:51,569 --> 00:22:50,940 -Wes Bos: I should say. So my assistant works hourly. And it's somewhat flexible in that they can work as many or as little hours as I have content for which makes it good for somebody who has a lifestyle that is a little bit more flexible. Or maybe you're an assistant for multiple people. Some days we have like when I launch a course they put in tons of hours and some days, when there's not all that much. It's just a couple hours in the morning, a couple hours in the afternoon. That's also really nice, because if somebody emails me, it's likely that they're going to get responded to fairly quickly. Because it's in the morning and at night or in the morning in the afternoon, things like that. I think that that works beneficial to both people. Like I know there's a lot of people who want to do the whole work from home thing but definitely need a flexible schedule. And I think that this is the perfect use case or something like that. Totally. Alright, that's it. Thanks for tuning in. Catch you on Wednesday. Booth. Please. - -38 -00:22:52,590 --> 00:22:53,400 -Announcer: Head on over to syntax.fm - -39 -00:22:53,400 --> 00:23:02,340 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax232.srt b/transcripts/Syntax232.srt deleted file mode 100644 index cd3429ce1..000000000 --- a/transcripts/Syntax232.srt +++ /dev/null @@ -1,492 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bos. Welcome - -2 -00:00:10,530 --> 00:00:22,079 -Wes Bos: to syntax a podcast with the tastiest web development treats out there today. We've got a one year later look for you at react hooks. So can you believe it's already been a year Scott that hooks have - -3 -00:00:22,079 --> 00:00:30,929 -Scott Tolinski: been out time just flies by my my daughter's not even a year old yet. So hooks are older than my daughter. I feel like that's crazy daughter - -4 -00:00:30,929 --> 00:00:34,890 -Wes Bos: was not even not even born into a world without hooks. Yeah, that's - -5 -00:00:34,890 --> 00:00:36,470 -Scott Tolinski: wild. Very well. - -6 -00:00:38,310 --> 00:00:44,159 -Wes Bos: Yeah, so yeah, that's struction. Neither, neither was my son. He'll never know a world without hooks. - -7 -00:00:47,159 --> 00:00:47,820 -Scott Tolinski: Over the best - -8 -00:00:47,850 --> 00:01:18,980 -Wes Bos: Yeah. So today, what we're gonna try to do is just kind of go through hooks again, we did a show on them when they first came out. But now Scott, and I have some some serious time using hooks under our belt. So we'll sort of go through them and talk about both what they do, as well as like our thoughts on them one year later, and whatnot. So buckle up for that. Today, we are sponsored by Sanity, which is a structure content, CMS and Sentry, which is going to do all of your error and exception tracking. - -9 -00:01:19,290 --> 00:01:21,200 -Unknown: Yeah. So shout out to them. - -10 -00:01:21,590 --> 00:01:27,840 -Wes Bos: So let's, let's get right into it. You want to start it off there, Scott? Sure. I thought this would be - -11 -00:01:29,100 --> 00:02:04,650 -Scott Tolinski: I thought this would be a nice way to kick it off is how do we feel about sort of what react hooks have been replacing in in functionality wise, what they've largely replaced in our code base has been render props. For me, at least most of the things that I used render props for I know, do react hooks so much. So did that. I don't know if I have too many render props left in my application at all. So I wanted to ask you, Wes, if this was a basketball game, and react hooks, were playing render props, who would be winning that game in terms of overall general satisfaction in your mind? - -12 -00:02:04,800 --> 00:02:42,240 -Wes Bos: Yeah, definitely react hooks have replaced, I would say, I'm tempted to say all but I did run into a situation a couple months ago, where I needed to like lazy evaluate something. And I needed to still use a render prop in that in that case, I forget exactly what it was. But almost everything I just redid my entire advanced react course, it's not out yet. I'm just waiting for library to be released. But I read it all of the code. And it's it's bananas, how much less code I had to write and how much more easy it is to actually view things. And so not all nested in each other. So big fan, big fan. - -13 -00:02:42,330 --> 00:04:19,050 -Scott Tolinski: Yeah, from a readability standpoint, for me, it's 100 to zero, I mean, React hooks just make your code so much more readable compared to render props, if you're sitting on that edge when you're later. And you're saying, Well, I don't know how I if I want to write some of my code this way. I don't know my code base has never been more readable. Since I've moved from render props to react hooks, especially with things like Apollo the data fetching it, just that sort of stuff to me is you just have nest within the nest or nested here. And next thing you know, you're indented, like eight layers deep when you don't need to be so I'm always of the mind to make things as simple as possible. And to me react hooks just make things more simple to read overall. So I'm a huge, huge fan of the visual aesthetic within my code base, but also the readability, the usability, all those things. And we'll get into a lot in this episode. So let's get started talking about hook number numero uno here, which is US state. Now you state is basically, in my mind, the very first hook that almost everybody picks up because it replaces some functionality that is core to using react that is state, right? We're so used to using state in our components. And here is the new defacto way essentially to use state. And that is via use state. And so this hook, well, you basically you define a couple of variables, they come out, and then array, so they're returned as the first two items from this function. Now this is made possible by the ability to return more than one thing from an array. - -14 -00:04:19,320 --> 00:04:51,720 -Wes Bos: Yeah, it returns an array. And it takes advantage of what the ESX destructuring where you can name the first item, something and the second item something and the reason they use an array there is because if it was an object, you'd have to destructure it based on its property name, but because it's an array, you just you can name it, whatever you want, based on the first and the second item. And generally it's the name of the piece of state and then the second one is the updater. And I how do you name your updaters I always say set and then whatever the name of the piece of state was - -15 -00:04:51,830 --> 00:05:09,140 -Scott Tolinski: every time Yeah, every single time I have a B set and then the you know the variable name so typically, I know this is going to upset David k piano, but I use things like is toggled and then set is toggled. That's typically how I have my, my variables named. Yeah, - -16 -00:05:09,180 --> 00:06:03,090 -Wes Bos: yeah, it makes sense. And then you stay also takes a initializer. So like if you want to initialize an empty state, you can just pass nothing. But if you want to pass like an object with default values and empty object, often I'll do because I know the shape of my state will be an object, it just doesn't have any properties. Or you can give it an object with undefined properties. If you want them to be on there, it could be a number, the only sort of gotcha vs knows a good one. The only gotcha you have with you state is that you have to update it all at once. So if your state is an object, previously, you just be able to update one property on the object and the rest of the state would remain unchanged. Now you need to fold in the existing state over top of what you have. And if that's the case, then you just spread it in with the three dots and the name of the existing state. - -17 -00:06:03,119 --> 00:06:42,960 -Scott Tolinski: Yeah, and that's largely because you're supposed to be looking at this as less of like, here's the application state and here is like this one particular things state. So like, think about it this way, instead of having this whole components state inside of a set state, you will have individual setters and getters for the individual state items within that component. So a lot of times people will look at hooks, and they'll say, Okay, I'm gonna create my my use state. And I'm going to try to put all the state for the one component on that one hook. No, I use many times several use state hooks in one component all the time. And that's largely how they're intended to be used. - -18 -00:06:43,200 --> 00:07:04,320 -Wes Bos: Yeah, that's, I was just gonna ask that, like, what's your? How do you decide whether you should have multiple pieces of state inside of a component? And how do you decide if you should just have an object and for me, if the pieces of state are clearly defined, before I build the component, then I'll use multiple use state hooks. So you got an example there? - -19 -00:07:04,679 --> 00:08:45,170 -Scott Tolinski: Well, so Okay, so I like to think about it as how just how connected they are, if if it's all of the information in the state variable is connected, and then it makes sense to put it together. But even if it's somewhat relationally, connected, but not used in a connected manner. For instance, we have like a filter in our sales thing where we have our charts, right, let's say you're setting the year and you're setting the month. Now, I have two separate state, I don't have one, one state object that contains the the year and the month inside of that object, I would have two separate use states one for the year, one for the month, if I'm updating the month, we're just simply changing the month, and that's passing it in. And to me, it's because those things aren't always changed at the same time. And largely, if you're changing the month, you want to keep the year in the same place. Not that you can't do that with any sort of an object thing to me, in my mind, it just makes more sense that these are separate values being treated separately, and they're being updated separately, so I shouldn't store them together. Obviously, you can do more. With that, you know, it's all about, I think this is maybe like a fine line, I almost always go on the edge of having separate functions. But then if I noticed that I'm calling all of our set functions, one after the next, every single time, yeah, they're probably connected and related in a way that you should be having them all in one spot. Besides, if it gets that intricate anyways, or if I'm having to deal with that kind of data, I'm always reaching for use reducer instead. So if it is one value changed, I'm pretty much always just using use state. And if it's multiple values and more complex data, I'm reaching for use reducer instead. - -20 -00:08:45,600 --> 00:09:15,090 -Wes Bos: Yeah, and the if I were to use an object, it would be if the keys of the object are unknown. Let's say you were counting the number of vowels in a sentence, right? Like you don't want to like go ahead and make a IOU immediately, where you could just kind of just add those as you you come into them. And that's a case where I would probably use an object or an array or something like that, to put them into that state - -21 -00:09:15,649 --> 00:10:43,860 -Scott Tolinski: word. So along the same lines is user reducer, which use reducer is kind of fun, because it took a lot of the ideas that you know, we learned in react from Redux. And we had this idea of, okay, you're always returning a new object, and you're being modified in this object by dispatching events, right dispatching events, and these events can have properties strung along into them. Regardless, what we're doing here is a lot more like Redux than it is like use or set state was. So typically what you're doing is you are defining a reducer, you know, it's so funny, these names exist, right? And we talk about them but to me, these names are really kind of get in the way. So Because, you know, some people will hear the word reducer, and if they've never heard it before, it might scare them off. But really all user reducer is is basically, it's, it's something that takes the previous state, and the action that you want to happen, aka, like, toggle, right? You're gonna say, toggle. And then from that you just return an entirely new object full of the new state. And because you have the previous state, you can take the previous state, you can spread it out and modify it, whatever, you can take that, and you're always returning a new object of the new state in your reducer. And typically, that's done via just a switch statement that's evaluating like a string. And a string may say the action name. Right. toggled? - -22 -00:10:43,890 --> 00:11:17,730 -Wes Bos: Yeah. increment. decrement. Yes, yeah. Yeah, totally. Um, I would go as I'm not going this far. But there are several people who have gone as far to say that they use use reducer for everything. That's not maybe that's taken a little bit far. Yeah, definitely use status is great. But use reducer I think it was a bit of a sleeper hook, I'm gonna go ahead and say like sleeper I in the last couple of months, you start seeing people being like, oh, wow, use reducer is awesome. Why didn't I I think people were kind of tough like a wrestling move. There's the reducer know, the sniper hook, - -23 -00:11:17,730 --> 00:11:19,830 -Scott Tolinski: got to get the sleeper hook. - -24 -00:11:21,960 --> 00:11:35,309 -Wes Bos: No, I think people were thinking it was a little bit more Redux II than it actually is. It's simply just that function that returns it's no different than a map, filter, reduce or whatever you're using. So definitely check it out. - -25 -00:11:35,669 --> 00:12:05,370 -Scott Tolinski: I like to think about it this way. You had to set state right set state is sort of the middle of the road, right. And then you have use state, which goes further into the side of simplicity, you're changing and updating like one value. And then use reducer goes in the other direction. It says, Okay, this is less simple, but more control. So it basically they stood on the either side of where set state was one of which is more simple, and one of which is just a little bit easier. I mean, more complex. - -26 -00:12:05,940 --> 00:12:09,179 -Wes Bos: That's, that's fantastic way to look at it. I like that a lot. - -27 -00:12:09,240 --> 00:12:10,380 -Unknown: Yeah, me too. - -28 -00:12:11,850 --> 00:14:12,600 -Wes Bos: Next one we have here is use Raph. So use ref. I actually just learned something the other day, I had no idea about this. So use ref is store is used for storing reference to something. And I initially had thought, Okay, this is only for DOM nodes like you You generally, the way that it works is that if you have a DOM node, and you need to access the raw DOM node for for whatever reason, maybe you're using an external library that needs the DOM node, or maybe you're using some like resize observer or, or one of these API's is not specific to react it is just DOM node, then you generally you stick a wrap on that and then pass that into like another hook that can then reference that DOM node on the page. So that's the way you do it in react versus doing like a query selector, document query selector to get that element. And that's what I thought it was for all the time. And I was just kind of, I was working on some resize observer stuff the other day, and I was like, I need a way just to like, store some data temporarily. And I was looking at some examples. And they were using use resin. And so I sent messages to you on on slack. I was like, man, did you know this test? Of course, yeah. Of course, God knows everything. Yeah. Let me find out what it is. Here we go. Use ref hook isn't just for DOM elements. The ref is a generic container, whose current property is mutable and can hold any value similar to an instance property on a class. So basically, if you ever want to like just have a variable of some sort of data, and you want to be able to just set that data as just as a normal variable, you would then use ref can can be used to hold that. So I was using it for, like the number of times that something had run. And now the questions are like, why would you use that versus state? And the reason is that set state or you state will trigger a rerender. And then the other question is like, what's the difference between that and just using a regular variable like a lead variable? it? - -29 -00:14:13,110 --> 00:14:18,870 -Scott Tolinski: Probably just, yeah, it's such a good question, because I almost always just use the lead or something outside. - -30 -00:14:19,169 --> 00:14:47,460 -Wes Bos: Yeah, I didn't know the answer to that I just looked it up. It says use raffle assign a reference for each component, while a variable is defined, while a variable defined outside a function will only be called once. So if you have a hook that is running on multiple running on multiple components, then a ref is better for that. I was thinking that too. It's like why not just use the variable because the situation I was using in it was just a single component. But if you do want to spin it - -31 -00:14:47,820 --> 00:14:50,760 -Scott Tolinski: is funny because I don't find myself using that that often. - -32 -00:14:51,000 --> 00:14:52,590 -Wes Bos: No, I mean, either - -33 -00:14:52,770 --> 00:15:01,260 -Scott Tolinski: needing that technique that often Yeah, I almost find myself needing to find a like a constant outside of the the function More often anyways, - -34 -00:15:01,440 --> 00:15:28,169 -Wes Bos: yeah, I was surprised. It's like we're one year in and I just ran across it two days ago, right? I think a lot of us use the fact that you state like every day, and then there's all these sort of like edge case sleeper functions that sleep. I don't even know a sleeper function is something that like weights it's actually like is Yeah, yeah, weights around. This is actually amazing. Yeah, use ref is just kind of like, Huh, neat. Yeah, my I might need that. I might not. - -35 -00:15:28,289 --> 00:16:58,830 -Scott Tolinski: Yeah, that's, that's good. Yeah, that's good. Okay. So next up is going to be use context and use context, to me is my favorite hook, we have our favorite hooks, this is my favorite hook. I love you. Because these contexts, I use context, all over the place. And really what I have is my whole darn system set up. And I'll talk a little bit about this more later on in the this episode when we talk about custom hooks. But I have this whole setup now where I just did a video on a code blog for level up tutorials showing how we do this. But let's say I want to fire off an alert, all I have to do is bring in a hook called use alert. And inside of it use alert is the setup, send alert, send error functions that I can then use and just call pass in a string and have them fire off an alert that the user then sees come in as a toast message on the top of the screen. And it's fun, because that's all made possible through use context now just do a custom hook wrapper on it. But the amount of simplicity that use context has given me in terms of modifying and using my global state for my application has just been unrivaled. It's been absolutely fantastic. I really love it. In fact, one of the things I do with this more so than anything is the application state that you could think of as the things you want to use and modify throughout the application opening and closing the shopping cart, the navigation, yeah, the login menu, those kind of things are all going to be in my global state, rather than my data, which is going to be in Apollo's cache itself. - -36 -00:16:59,190 --> 00:17:19,380 -Wes Bos: Yeah, that's exactly what I read did my shins exactly what you said shopping cart, whether the shopping cart is open or closed in my advanced react course, as well as a couple other pieces. And I moved it from Apollo's local state implementation, which was annoying because you had to write graph qL queries to pull it out of there. - -37 -00:17:19,470 --> 00:17:22,310 -Scott Tolinski: It was annoying. It was nice, but it was annoying. Yeah, - -38 -00:17:22,380 --> 00:17:46,020 -Wes Bos: yeah. I just like I'm like, I don't feel like reading a graph qL query to get a boot like I was literally a Boolean is the cart open or closed? Another function that would set it to be open or closed or toggle depending on what you want. So like, what two functions and a Boolean. And I was like, Ah, man, like, this is like 80 lines of code to do that, not 80. But it was too much. That sounds - -39 -00:17:46,020 --> 00:17:51,180 -Scott Tolinski: like these two functions and a Boolean. You could have like a three three host show. - -40 -00:17:51,800 --> 00:18:20,880 -Wes Bos: That's great between two functions and a Boolean, yeah, Scott to Lynskey. Anyways, big fan of it, it makes being able to access that global state really, really simple. You can stick state and updaters in your context, which is was which is what Scott was saying. One question I have is for you, how do you decide whether to use multiple use contexts? Or how do you decide to just stick it multiple things in one kind of similar to the the state discussion we had? - -41 -00:18:20,970 --> 00:19:52,980 -Scott Tolinski: You know, I did that. It's funny because I was going to be my answer is kind of similar to the state discussion, because the answer is really the same thing. For me. It's like, how related are these? Let me just look at my different. I have several different contexts within level of tutorials. I have 123456, no. Yes, six. Okay, so six different state contexts. So I have one for alerts, right. They're their own thing. I have one for anything related to the checkout experience. So it's not just whether or not the checkouts open, it's whether or not what you have in the cart, what the coupon value is, whether or not the checkout is open, how to open the checkout, how to close the checkout. So there's those are all one thing, right. And so even though there's several different use states use reducers. inside of this one context, they're all very related. My loading state, I have one for global loading. Now the global loading one is interesting, because all it does is a full screen loading takeover. I have one for my login. Is login open. I have one for our search. So searches are really interesting thing for us. And again, it's just is that search open? Is it close? What's the value of the search? What's the value of the filter, like those kind of things all just exist within their own context, because they're all very tightly related. And I like to keep those all in the same location. That really keeps me sane and another service that keeps me sane is Sanity. So with more about Sanity, it's an idiot I Oh, is West balls. - -42 -00:19:53,330 --> 00:21:57,210 -Wes Bos: Yes, we've had Sanity sponsored tons you know by now that it is a structured content CMS, it's a headless CMS. to whatever app or website that you're building, and they've been going bananas with the the features, and they recently released what's called custom workflows, which I thought was, was really interesting. So you have a piece of content in your Sanity, CMS. And generally the the way Sanity works is that you'll have your clients using Sanity Studio, which is like the, the interface to managing your data. And they just released this thing called custom workflows, which allows you to have control over what happens when somebody clicks, publish, right, like normally on a on a CMS, you just click publish, and that data is live. But with custom workflows, you can do things like notify in slack that something needs to be reviewed, you can put it in our review, in like a review queue. So somebody who needs access to that can go ahead and review it. So basically, you have control over what happens when the piece of data is published, or I'm just saying published here, because it might not go out to your website before the right people have access to it. So you have access to custom badges inside of Sanity studio with this, you get custom document actions. So you can just write your own JavaScript that says, when this thing is published, go ahead and hook into that and notify the right people send off data to the right people keep going ahead, actually, they're using studio react hooks. Yeah, is really cool. Because that's the cool thing about San Diego studios. It's built in react, and you can customize the UI with your own react components. So there's just a hook for that, which is pretty nifty. So check it out@sanity.io forward slash syntax, do a quick Google for Sanity, custom workflows. If you want to see some more examples of what they've got going on there. You're gonna get double the free usage tier if you go to sanity.io forward slash syntax. Thanks so much to Sanity for sponsoring. - -43 -00:21:57,480 --> 00:23:33,750 -Scott Tolinski: Cool. Yeah, thank you, Cindy. So let's get into one of the I don't know, this one is maybe one of the more mysterious hooks, even though it's like one of the most common ones. In my mind. This is, by the way, we're referring to use effect, in my mind use effect is the most difficult one for people to really wrap their head around and get used to in terms of a general usage category, because it's taking some functionality that we were so used to with our lifecycle hooks, and it's flipping it on its head and kind of a substantial way that takes a little bit of a mental shift and how you think of it. And for a long time, it was always, for me a translation back to the different lifecycle hooks and thinking about life cycle. But at the end of the day, you're not thinking about life cycle, you're thinking about variables, dependencies, and those kind of things. So okay, what is use effect? Well use effect is basically a function that is run on a certain set of parameters. So to say, like this thing is run, when you tell it to under very certain specific set of rules. Now, those rules are defined as dependencies. And those rules are really just whether or not this value has changed or not. So you, you have a function essentially, inside of your use effect that is run, whenever these things inside of an array have changed. If the array is empty, it's only going to run on a mount, right? So you have an array of something, let's say you have an ID inside of that array, if that Id changes, then that use effect is going to run, - -44 -00:23:34,170 --> 00:25:03,420 -Wes Bos: yeah, you get access to all the all the lifecycle methods they used to have. So when it'll run when it mounts, yep, it will run when it updates. And the kind of cool thing about use effect is the second argument of use effect is an array of things to watch. So you can pass it, some several pieces of state, another function and whenever those things change, then the use effect will know to run again. So it's not like use effect will, will run every single time that some data inside that hook updates, it will only run when its dependencies, the array of things that you pass it change. And then the third thing is that from your use effect hook, you can return another function. And that function will be run by react whenever that component is unmounted from the page. So if you ever need to do any sort of cleanup, unfortunately, that one is often just looked over. And that's generally where you run into memory issues in react. Because if you like adding event listeners or listening to database or subscribing to real time or anything that happens in in that effect, then you also need to unloosen for those things when you clean up otherwise, you're just attaching more and more event listeners. And that's going to lead to memory leaks or like weird issues with things running more than once and you're like what's going on every time I go Click this button that runs two more times than last time. - -45 -00:25:05,640 --> 00:26:11,130 -Scott Tolinski: Yeah, yeah, totally. And I think that is like such a mental hurdle for people to get to get over, which is just that we're taking the functionality that existed within however many things before, right? When you looked at lifecycle hooks, it was like five, or six, or I don't even know how many lifecycle hooks existed off the top of my head. At one point, there was a whole lot like eight or nine, I feel like, but we're taking all of the functionality that you typically had to duplicate and use within there. And we're boiling it down into one sort of superhero function that allows you to do so much more in the the biggest plus out of all of that is the amount of duplication within your code that you get from this, because you have this one thing that has the job of all these several different things, Mount update, you know, all these different things that existed before within lifecycle hooks, you know, don't need to have an unbound and anon update, you can do all of that within one function. And that gives you so much more control in one spot, rather than, you know, splitting that same duplicate code up into two separate multiple separate spots. I'm just - -46 -00:26:11,130 --> 00:26:17,010 -Wes Bos: looking at the code for Dan Abramoff wrote this use interval, hook. Oh, yeah, that's - -47 -00:26:17,219 --> 00:26:18,600 -Scott Tolinski: a great blog post. Yeah. - -48 -00:26:18,870 --> 00:26:43,350 -Wes Bos: Yeah, it was it was awesome. I'm just looking at it. And he used use ref to save reference to the callback function of the interval. So that's another another interesting use case for using use ref. Hmm, fantastic. Yeah. There's also use layered effect. So what's the difference between use effect and use layer effect? I know something to do with server side rendering, no, nothing. In fact, - -49 -00:26:43,950 --> 00:26:56,280 -Scott Tolinski: nothing. In fact, use layout effect is actually difficult to use an SSR. I have my own custom. I have one called use ISO layout effect for when I want to use layout effect within server side rendering. Use layout affected basically. - -50 -00:26:56,430 --> 00:27:09,210 -Wes Bos: Oh, you know, sorry, you know, what it was, is that there was a trick that if you don't want something to run server side, then just stick it in use layout effect? That's because because it won't run server side. Sorry. Go ahead. - -51 -00:27:09,300 --> 00:28:23,610 -Scott Tolinski: Yeah, because what so really, what it comes down to is that this waits for the content amount within the DOM, and then it fires. So giving you the ability, let's say you had like, think about this back in the day when we add jQuery plugins. And you'd say, here's a div with an ID on it, right? Well, let's go ahead and find element by ID and attaches jQuery plugin into this DOM element. And so that's actually where sort of that sort of world is where use layout effect comes into play. And for a lot of times, so the way I'm using use layout effect is more or less when I'm working with a library that exists outside of react. And I need to use this library within react in this library is asking for a DOM context or something like that. That's typically where or let's say, I need to modify the DOM element itself outside of react. And that's not something that you want to do too, too much. But there's definitely use cases where use layout effect comes into play. In fact, we use use layout effect, specifically in like a scroll freeze. So like, if you want to put a scroll freeze on something. So we want to trigger trigger, scroll freeze, whenever this hooks a - -52 -00:28:23,610 --> 00:28:26,640 -Wes Bos: scroll freeze, like it stops the patron scrolling, - -53 -00:28:26,820 --> 00:28:53,070 -Scott Tolinski: like, what it does is basically just an overflow hidden on the body, which stops the page from scrolling. So I have a use layout effect, custom hook that basically allows us to get the window, computed style and all that stuff without having to worry about whether the DOM has been completely mounted or not. So this is saying the DOM is mounted. Let's go ahead and do this action now. Ah, - -54 -00:28:53,219 --> 00:29:15,000 -Wes Bos: I'm just reading a blog post on Kent C. Dodds website. He says it runs synchronously. And then the other sentence I think is important is your code runs immediately after the DOM has been updated. But before the browser has had a chance to paint those changes, that makes sense that it's for layout based stuff, the user doesn't actually see the updates until after the browser has been repainted. - -55 -00:29:15,150 --> 00:29:32,610 -Scott Tolinski: Yes, we use it in coordination also to do that, like line, SVG line drawing on our courses page. And we're waiting for all of those nodes to exist, then we're measuring their position in the DOM with use layout effect, then requestAnimationFrame, and a bunch of other stuff. - -56 -00:29:33,029 --> 00:29:34,410 -Wes Bos: Oh, yeah. Yeah, it makes sense. - -57 -00:29:34,770 --> 00:32:47,220 -Scott Tolinski: And so in addition to all of this, we have the ability to I mean, obviously there we're not talking about other hooks just because there's a whole bunch of other hooks. But in addition to all of this, we have the ability to wrap up anything within a custom functionality as custom hooks. And that's really led to being able to share use custom hooks, right, you can bundle them up, you can share them, you can download them, and a lot of times you could just copy and paste them from another application. We have our huge own folder of our own custom hooks, which I'm going to talk about in this, how do we use them section. Here's how I like to think about custom hooks, custom hooks, in my mind, whether or not this is, you know, an actual perfect description for them. To me a custom hook, you could think of it as like a react component with no UI, you can use the stuff that you use within normal react components, whether or not that's used a user reducer, use context, any of those other hooks use effect, refs, whatever, you can use all of that within a custom hook. But instead of returning UI, it's returning data. So in our case, it's typically going to whether or not it accepts different parameters, it's going to return an object with parameters, or it's going to return a single value, or it's going to return this or that. Either way, it's not returning JSX is not returning UI code. And then you can encapsulate a bunch of functionality, stuff that you do elsewhere, encapsulated all into one little bit. So that way, you can drop into your components with a simple use this hook. So to me, these custom hooks are the area that I've been the most excited about. I have a whole folder of custom hooks, which I'll talk about in a little bit. But just stuff I love to I love to write these. And I love to find little situations where my code can be swept under the rug a little bit to be, you know, make my components cleaner. Yeah, I find that it, it forces me to decouple functionality from UI, whereas with react, I would just stick it in the lifecycle methods. And then if you needed to use that functionality somewhere else, then you have to use like a higher order component or render prop or something like that. And with these custom hooks, it just forces you to put them in its own, maybe in its own file or its own thing. And then you can just go ahead and use them. It's very hard. Like that's maybe another thing about reactor because it's very hard to write something that is not reusable, although it's react hooks, because it's it's hard to make it tightly bound to the actual, the component that it's being used in. Yeah, and we're not I mean, we use so to give an example of a custom hook we use, I'll talk more about a lot of them. But here's a very common one would be like a use click on outside, where let's say you have a modal, and you want to say if you click anywhere else other than within this modal to fire some sort of event. And that to us is a perfect example of functionality that you typically write within the component. Okay, here I have this modal, when I click outside this modal, I want it to close. But wait, there's a lot of other situations where we could use that like a drop down menus or this or that. Yeah, no, well, why don't you just extrapolate that out into its own thing, use click on outside, you pass it in a ref, and you say, hey, if you click outside of this ref, fire this event, boom, BINGO, BINGO, it's so easy. And so awesome. I absolutely love that. - -58 -00:32:47,520 --> 00:33:51,450 -Wes Bos: One other thing I mentioned, this is probably known to a lot of people, but like, you can return anything from a hook. So whether that's data, that's most likely what you're gonna be doing, you're gonna be calculating some sort of state internally in your hook, and then you return that data. And then you can just go ahead and use these live variables anywhere inside of your, your application that has or anywhere inside of your component, I should say, I guess you can, you can pass them down to anything though, you can return state updaters. So you can return functions that Yep, handle it. So whether that is returning the the setter that comes from you state directly, I've done that before, or whether it's passing, returning like a custom function that internally will use the the state updaters. And then another thing you can do is you can return reps from custom hooks. So there's two ways to start I'm talking about DOM node ref series, you can pass in a ref Hindi or Huck, or you can just create the ref inside of your hook and then return it. And then you can set that ref on any element inside of your component that you like to. - -59 -00:33:51,900 --> 00:35:33,170 -Scott Tolinski: Yeah, and those are all fantastic use cases for these things. Basically, the end of the day, you're writing your your own custom hook, you know, even if you just had a function that all it had inside of it was the use of state and set state and the state and return the set state in the state. That is a custom hook. And that's really like the most bare bones example that you can just take it from there and make them more complex. And once you really see it from that perspective, it's like getting eyes into the matrix you're seeing through the lines of the code. And all of a sudden you're like, Oh, yeah, I can, I can make my code so much drier this way, and only so much drier. But if you're writing these kind of functions, and utilities and custom hooks to reuse throughout your site, what you're also doing is you're reducing the amount of variability throughout your team of writing these functionality. So you have this functionality that you can share. No longer are you approaching a problem from a way that each person might address that differently. You have one source of truth for this problem. Everybody can contribute to it. Everybody can just use it. And then it's it's really probably going to make your code much easier to test right? Because you're not having a whole bunch of money. implementations of the same kind of thing. It's just allow us to share functionality and those kinds of ways. So, I want to talk a little bit about how we use hooks personally, really quick, I can just go into mine zoom thread here. The way I like to use hooks is I have a folder within my UI called hooks. in that folder I have each hook has its own. Each custom hook, I should say, has its own file, and then I have an index.ts that basically imports and exports all of them. In addition to this, I used a Babel alias. Are you familiar with Babel aliases? - -60 -00:35:33,300 --> 00:35:34,730 -Wes Bos: No, what's what's that? - -61 -00:35:34,860 --> 00:36:22,350 -Scott Tolinski: So Babel alias, I used it as a module resolver within Babel, also within TypeScript. And what that does is allows me to set an alias to a given directory. So my dot forward slash UI forward slash hooks folder, which actually points to the index file has been essentially renamed as just hooks. And it almost exists as a package within my application. Now, some people only know like this from a clarity sake, because it looks like a node module called hooks or something. But yeah, you could always assign some sort of a, you know, a signature to it to indicate that it is a local package or a local alias, rather than, you know, some people use the at sign to do that. - -62 -00:36:22,460 --> 00:36:32,160 -Wes Bos: Also, this is the Babel plugin module resolver correct. So that you don't have to do the whole song and dance of like, how many levels deep in my right now, - -63 -00:36:32,160 --> 00:37:36,380 -Scott Tolinski: how many levels do I need to go up in order to get to it. And I use that all the time. And so I use that all the time for all sorts of different things. I absolutely love it in some people who would approach our code base. Without knowing that again, it might not be the most crystal clear thing, but once you once you're used to love it, I absolutely have. So all of my hooks are imported from an index file. So all of my hooks are available application wide for me to be able to say import this hook from hooks, any hook I want. And the hooks I have I have used click on outside use, of course path withdraws the SVG path, use dimensions, which pulls the dimensions of an object based on offset scroll border box, I have a use ISO layout effect for server side rendering layer effects I have used is a store, which just tells us if the URL is a forward slash store URL, and that like allows me to just get a simple Boolean, right? I can drop that hook anywhere on the page, use a store, and then it just returns Is it a Boolean? Is it the store? True or false? Yeah, okay, we're on the store. - -64 -00:37:36,750 --> 00:37:46,350 -Wes Bos: might seem silly. But inside of that hook is likely, like a use context that pulls the URL down. Is that how it works? Or do you just pull the window location? - -65 -00:37:46,530 --> 00:37:49,110 -Scott Tolinski: It's just the React router, use location or whatever? - -66 -00:37:49,130 --> 00:37:50,340 -Wes Bos: Oh, yeah, yep. Okay. - -67 -00:37:50,360 --> 00:39:20,280 -Scott Tolinski: Yeah, simple. That's super simple. In addition, I also have the two two hooks that people aren't going to like, I have a use unmount and use mount. And I'll tell you why I have used unmount and use mount. Those are the simplest one. And people say, Hey, I don't want you to think about user effect. As you know, lifecycle hooks, well use mount unmount are so perfect for when you have code that you want to quickly convert over to react hooks. And you don't want to have to take time to really reevaluate. You just want to get into hooks, and then maybe later, once it's working, you can reevaluate it. So I use this largely as helpers more than anything, I have a use referral cookie, which just checks for cookies, somebody a referral. Let's see I have used scroll, freeze use theme, which grabs the the user's theme property and then sets a class to the body based on whether or not they have a specific theme. That's actually one of the ways we power our theme system on level up tutorials. We also have some really some some ones that you see from other place like us, why did you update that allows us to get the Why did you update thing going on? If you don't know, why did you update is a great way to get some visibility into your react components. And now you have one called use window width that just returns the window width. So just like I said, little tiny bits of functionality that I just went through on my application. Sometimes I want the window width, sometimes I want to know if it's the store. And then I want to have to do the bring in location truck, the location string on every single one. I just want to have it in one spot. - -68 -00:39:20,760 --> 00:39:24,960 -Wes Bos: Beauty. I think you just converted me on this bail plugin module resolver. - -69 -00:39:24,980 --> 00:39:25,800 -Announcer: It's so cool. - -70 -00:39:25,830 --> 00:39:26,430 -Wes Bos: Yeah, - -71 -00:39:26,430 --> 00:40:01,670 -Scott Tolinski: let me let me blow your mind on this one a little bit. Because here's what I use this for. I use this for several things. I use it for my UI folder. So if I want to pull anything out of a UI, any react component is just UI forward slash tutorials, whatever. If I want to have something in state, I have all of my context as an alias state. So I just bring in my use alert from state. I also have it for hooks like we mentioned before, and I also have it for elements if I have my styled components elements bring in card from elements that That's it. Oh my gosh, love it, - -72 -00:40:01,980 --> 00:40:07,110 -Wes Bos: man. For some reason I always thought you had to do this in Webpack. So I was I always just thought, - -73 -00:40:07,350 --> 00:40:13,980 -Scott Tolinski: nope. Yeah, we do and TypeScript and in Babel, and Meteor doesn't care. It's the same. Just babble. - -74 -00:40:13,980 --> 00:40:27,060 -Wes Bos: That's great. Yeah, I'm definitely gonna take this, it's there is a little bit of weirdness where people might not understand that it's local, can't beat the cleanliness. Maybe maybe even like, could you just start it with like a forward slash, like, just to - -75 -00:40:27,060 --> 00:40:32,820 -Scott Tolinski: show people started with an add an add sign, but you could do you could start it with anything. And I think - -76 -00:40:32,940 --> 00:40:41,580 -Wes Bos: add notes to me that is just the namespace package on NPM. Maybe like a, like a Unicode? What you can't use? You can pick anything. Yeah, - -77 -00:40:41,580 --> 00:40:43,050 -Scott Tolinski: pick up pick an emoji. - -78 -00:40:43,500 --> 00:43:04,670 -Wes Bos: emoji. Yeah, I don't think you can use emojis I tried. Remember, when fragments. I tried to alias react fragments to ghost emoji? Maybe, maybe it could do it now? That'd be good. Cool. Um, what do I have here? I don't have nearly as many as you. But I certainly been using them. I wrote some custom use form hooks. I know Formic has hooks and things like that. But so often, I don't necessarily need an entire library for managing my forms. Yeah, because I just need to set some state then then render that state out to the value prop of an input. So I have used form where at a forum level, you declare your, your input names. And then you can put those values into any of your child inputs, as well as have a handler for updating them as well as have a handler for submitting that entire form. So I've been been really happy with how hooks and forms work together. I've done a bunch of stuff with resize observer. So I was working on my own website, and I wrote a hook that would, what did I call it, use grid row or something. It's, it's similar to resize observer. And there's definitely a hook out there. For resize observer, I just wanted to write it myself just so I can get comfortable with how it all works. And I basically wrote this hook that will tell you which row, a wrapped flex element or grid element is on, that's something I can't do in grid is tell what row something is on. And I needed to style things differently that were on row two. Yeah, it worked out really well, big fan of it, although I did run into some render loops. Because if you change the size of something, when it's on row two, then it gets small enough to fit back onto row one, which makes sense, bigger, which makes it wrap which puts it on row two, which makes it smaller, which makes it fit on row one. So in that case, I had to write some code that would only let it render twice, based on the width. And then I said, if the width has not, if the width has not changed, stop, like you're you're out of control. And that's where I used to wrap I was counting the number of renders - -79 -00:43:04,730 --> 00:43:07,130 -Scott Tolinski: your cut off, you get gotta you gotta stop. - -80 -00:43:07,170 --> 00:44:23,250 -Wes Bos: Yeah, I was like you you're out of control, you've got two renders. And the reason I did two is because I was running into an issue where it would render once and not wrapped perfectly. So I was like, Alright, after two renders, this thing is in the right spot, stop here. And then whenever the width of the window change, then I would, I would cause that thing to reset, and it could start to render itself, which is pretty cool. I did a little video on my YouTube if you want to check out how that works. Use wicked fav icon. If you go to the uses dot tech, in your website, you notice that the fav icon is just streaming letters onto the fav icon. And that's all done via canvas. So I just basically take each letter of uses and write it to a canvas and then export from Canvas and stick that into a fav icon base 64 encoded. And if you want to use Dom API's that's considered a saw a side effect. And the entire canvas library is a DOM API. So I stuck all of that into a use effect hook and wrote my own little thing for that, which is pretty fun. So if you want to check that out, I'll link it up in the show notes. It's silly, but it shows how to use intervals and whatnot. Cool. - -81 -00:44:23,250 --> 00:45:14,160 -Scott Tolinski: I have one more that I want to talk about briefly. I know we're running out of time here. But so I just recently did a code blog video on this. So if you want urge that learning a little bit more, check out the level of tutorials YouTube, but I mentioned very briefly that I started writing custom hooks for my context updaters. And so to me, what this has done is it's taken typically when you write context with the use context, you bring in the context, you import the context and you say, well, you import use context as well as the context itself. Then you say use context and wrap that around your context and you can get the variables out of here. And I had This like tiny little epiphany that is like, wait, why can you just throw them into a custom hook? And then all of a sudden, you don't have to import the individual context in this stuff. And you don't need to import use context, you just need to import the one single custom hook. - -82 -00:45:14,370 --> 00:45:17,820 -Wes Bos: Just stick the context in the custom hook. Right? Correct. - -83 -00:45:17,820 --> 00:45:36,060 -Scott Tolinski: So now that too, it's so good. It's so good. So now I just have, instead of alert context, use context, whatever, I just have one single custom hook that is a use alert, and use alert, spits out set, alert, send alert, whatever. So just a minor aside there, one of my new favorite functionalities for custom hooks there. - -84 -00:45:36,510 --> 00:45:56,550 -Wes Bos: I did that too. And I think it was used as text I and I remember thinking like, Oh, I have to pull in the context and then pass the context to a hook. And then I go, oh, but you can use hooks in hooks in your own custom hooks. Right. And that was that was a big aha moment for me, too. I'm glad you mentioned that. That's awesome. Yeah. What about hooks that you don't use? hooks that I don't use? - -85 -00:45:56,550 --> 00:46:09,030 -Scott Tolinski: I do not use? Like, I don't think I don't think there's any use case for me within level of tutorials of use imperative handler? Or do you use use a parent imperative handler for anything less? - -86 -00:46:09,030 --> 00:46:19,950 -Wes Bos: Yeah, like, I don't even know what the hooks that I don't use r? Because I haven't run into that situation. Like I've read the docs. But that's all thing with this stuff. Yeah. No, I've - -87 -00:46:19,950 --> 00:46:44,790 -Scott Tolinski: what is use imperative handler do use imperative handler customizes. The instance value that is exposed to parent components when using ref. As always imperative code, using refs should be avoided in most cases, use imperative handle should be used with forward refs. So I don't know if that clears it up. For me, I haven't hit the use case where I need to use that. - -88 -00:46:46,500 --> 00:47:15,510 -Wes Bos: It's showing an example of focusing and input. I don't know. No, I haven't haven't run into that. And like, I think the thing is that whenever I run into a situation where I can't solve something like like, I was talking about that RAF's example, the other day I was like, then then you run into a guy. Okay, that that's what that's for. It's, it's obviously there for a use case. There's also use callback and use debug value. I've never used either of those. What does use debug value do? - -89 -00:47:15,510 --> 00:47:50,940 -Scott Tolinski: Use debug value basically makes it more obvious when debugging, like what the custom hook name is, because they're great. Now, if you use a custom hook, I think it comes in his state. And use debug value displays a custom label within react dev tools. So I almost never use this because the context of the data itself tells me enough, but if my data is not contextual enough, within my custom, oh, and I say use debug value to get a little bit more even just within set state or whatever, I know it exists by never needed. I don't like - -90 -00:47:51,060 --> 00:48:07,110 -Wes Bos: that's cool, because I think if you've got like a lot of Boolean 's that are just true or false. Yeah, right. It just says true or false, or like, what does that even mean? So if you want to say like online or offline or cart open or closed instead of true or false, that's what that's for. Totally try use that. That's pretty nifty. - -91 -00:48:07,380 --> 00:48:12,780 -Scott Tolinski: It's nifty. But they don't want you to leave in your code. So it's just for just for checking things that, oh, yeah, - -92 -00:48:12,810 --> 00:48:17,820 -Wes Bos: I've never left that debug line in my code ever. So that wouldn't be a problem for me, never, - -93 -00:48:17,820 --> 00:48:19,560 -Scott Tolinski: ever debuggers. And - -94 -00:48:22,260 --> 00:48:52,980 -Wes Bos: so the question here is, are hooks like a year later, our hooks harder to learn? I'm gonna say classes or what, but then classes and render props and things like that. I definitely think they are harder to learn, because you have to sort of understand about closures and memorization. But I think once you get over that initial, ah, this is how that works. I think it's much better to go. So I think there's definitely a little bit more of a hurdle, but definitely worth the the hurdle. Yeah, - -95 -00:48:52,980 --> 00:49:49,200 -Scott Tolinski: I think initially, and conceptually, hooks are more difficult, especially with use effect. It's much easier to think about lifecycle methods, especially coming from most other frameworks and things that have used life cycle type methods for so long. I mean, we've been using life cycle anything for just about, I don't know, forever and ever. So for me, initially, in conceptually, it was a little bit harder to pick up the whole use effect thing and you're just thinking about the render cycle itself, not life cycles. And I think that once you once you pick up those, those broad concepts, once you pick up the concepts, I think it's much easier to use, it's easier to use in practice, once you understand the concepts. And I think it gives you less foot guns in my mind, because you're no longer having to duplicate code for lifecycle methods. You're following some very specific patterns. I think there's less ways that you can get yourself into trouble with hooks, but that's just my own perspective on it. - -96 -00:49:49,620 --> 00:50:28,230 -Wes Bos: Yeah, I agree as well. Like shout out to the React team who even thought of this concept, right? I'm certainly not a good enough job. The script developer, like if you were to like, tell me, okay, Wes, I'm gonna sit you down and you think of a better way to handle everything in react, I definitely wouldn't have come up with it. So it's really cool to see the React team thinking on these concepts for so long. And that's why I'm so excited about suspense as well, when it ever comes out. It will be a game changer because of the amount of time that they've put into thinking about all this. Yeah, totally. - -97 -00:50:28,800 --> 00:51:57,240 -Scott Tolinski: Last question here is our classes going away? It is, which is everybody's favorite question? Are classes going away? Am I really gonna have to do I have to convert all of my components? The famous line is no, you don't have to convert your components. And no, they don't expect you to convert all of your components. I always take the the line of things is like when something comes into alpha, I got to rewrite all No, just kidding, I have to look at this as in, I really like hooks. And if I'm going to take the time to rewrite something, it's going to be for an exercise to learn something here I have a bit of code a bit of functionality that I understand really well. And by converting that to hooks, I'm not doing it because I want this to be in the new fancy thing. It's because maybe I'm taking a bit of something that I already understand. And I'm finding a way to express that in hooks teaching me quite a bit about hooks. pessoais. So if I'm rewriting code is that reason specifically, for the most part, I write everything in hooks. I don't even think I have any class components left in my site. I'm sorry, because I did do that. But I think classes are going away. I don't see any need for them. They're overly verbose at this point, that duplication and life cycle, which we talked about a bunch of times. I just think there's no reason to use them. There are some things you still can't do within react hooks, but I don't use any of that stuff. I almost dropped the swear word, but I don't use any of that. So - -98 -00:51:58,290 --> 00:52:15,900 -Wes Bos: yeah, there's get derive state from error gets down. Before update don't use. The component did catch is the handy one this error boundaries. You know, use it. That's probably the biggest one that error boundaries are dope. But yeah, you just don't don't use an error boundaries. Yeah. - -99 -00:52:15,960 --> 00:52:19,740 -Scott Tolinski: Oh, if I don't make errors, Wes, I don't write in here. - -100 -00:52:19,740 --> 00:52:22,110 -Wes Bos: Oh, okay. There you go. Error boundary - -101 -00:52:22,110 --> 00:52:23,340 -Scott Tolinski: is my brain. - -102 -00:52:23,550 --> 00:52:28,920 -Wes Bos: Yeah, it you don't need air brat. There's that that meme don't need air boundaries. If you don't write errors, - -103 -00:52:28,950 --> 00:52:55,890 -Scott Tolinski: but there's no invalid. There's no opportunities for like invalid state or for data to come in. Because I'm using TypeScript. And I'm using all of these systems. My API is all typed. Everything knows whether or not it's going to be defined or not. There's never going to be a situation where a component is erroring. out. And I say never. But yeah, that's not really. Oh, yeah, TypeScript, man. Let me just talk, do you have five minutes for me to tell you about TypeScript? Oh, my gosh, - -104 -00:52:56,280 --> 00:53:06,900 -Wes Bos: unsubscribe, please. We have to do that we have to do the types of screws show though I've been I've been using a lot more TypeScript lately. And I think it'd be fun to do a show on that. - -105 -00:53:07,019 --> 00:53:08,430 -Scott Tolinski: I don't like it, I love it. - -106 -00:53:08,519 --> 00:53:40,860 -Wes Bos: They love it big fan, I'd say classes are going away, I would not rush out and rewrite all of your class base code solely because some people have like many hundreds of thousands of components, or maybe just thousands of components. And that's not a good use of your time to rewrite already well tested components, right. But I definitely have not written a class new class based component in the last probably a year since they've come out. So big fan, big fan. - -107 -00:53:41,280 --> 00:55:03,750 -Scott Tolinski: Big, big fan. Cool. So if you want to write code without bugs, just like me, you're gonna want to go ahead and use this Sentry at Sentry dot i O. And you're gonna want to use the coupon code tasty treat all lowercase all one word, you're gonna get two months for free. Now, Sentry is the error and Exception Handling service that? Well, when you write those error boundaries, and that error pops up in your code, you might want to know about it, right. And so maybe you can fire off a message to Sentry with that error and say, Hey, this happened. Here's the source maps, here's the release, maybe here's the user that has happened to this pourcel. And you can track all of that in one interface that is beautiful, by the way. And Sentry, just catalogs and catalogs, all that stuff so that you can see it exactly how it happened, what happened, and then you can go ahead and solve that bug, you click that little play button, and then it's gone forever. You've you solved it and gone because that when you fix bugs, they never come back, that's for sure. So so you're gonna want to go ahead and use a service like sentry@sentry.io coupon code, tasty treat all lowercase all one word, get two months for free. Try it out throwing your codes on your error boundaries, and behold, all of the mistakes that you've made and solve those problems. So check it out. Thank you so much for Sentry for sponsoring. Now as part of the show we get into our sick mix, the stuff that we pick that as sick the stuff that we love. Could be anything. Could be could be nothing. I don't know. What do you got? Wes. - -108 -00:55:04,170 --> 00:55:19,860 -Wes Bos: I have got some kids headphones. We recently updated our I think it was eight year old iPad. We've had the same like 30 pin connector iPad from well before I even had kids that like giant wide one. Yeah, yeah, - -109 -00:55:19,860 --> 00:55:22,140 -Scott Tolinski: I came in the doorway. It's so wide. - -110 -00:55:22,560 --> 00:55:36,030 -Wes Bos: It was it was hilarious because like it, it's kind of sad because it still worked great. It's just that we kept like losing all of our chargers, like the old 30 pin connectors. And every time we'd find a new one at a thrift store, we'd be like, Oh, - -111 -00:55:36,180 --> 00:55:41,370 -Unknown: I got another one. Got another one that has FireWire on it if you want 100 - -112 -00:55:41,370 --> 00:55:53,160 -Wes Bos: the original iPod You bet. Had a FireWire 230 pin connector. That's where it came from. Yeah, really. Um, I - -113 -00:55:53,160 --> 00:56:00,480 -Scott Tolinski: have I have the iPad still I have the the white one before they was all motion based. And really touch base and then click. - -114 -00:56:00,630 --> 00:56:48,780 -Wes Bos: I wish I kept that. I still have I had the first iPhone too. And I sold it. kind of wish I had kept onto Oh, yeah. And like that the battery on our old iPad was just like, it would take like a day and a half to charge. And then if you were watching a video while it was plugged in, it would still drain to zero. So we've got some car trips coming up. And we bought this pack of headphones for kids that are internally limited, so they don't go too high in the volumes. And it comes with a splitter and everything. So it's pretty cool. They're m POW kids headphone, they limit them to 91 db, which is pretty cool. They look they look really nice and they stretch like crazy because my kids are so destructive with their their things and they are ready - -115 -00:56:49,590 --> 00:57:57,630 -Scott Tolinski: to attack. Yeah, kids, man, they are destructive. They just did everything. What can you find it they're gonna like it was so funny, like land that we were, you know, we had a really sunny day yesterday. So we were going outside gonna run about to pick up some some dog stuff that was in the yard. McClendon just stay over here and he's like what stomped through the yard. I'm just like, Oh, come on, man. And he gets poop all over shoes. It's like, if we can find something that kids are gonna break it, they're gonna step in it, they're gonna do whatever. That's just how it goes, man. So my sick pig is going to be I'm gonna want to apologize for a stick pic I had a couple weeks ago, which was that muscles YouTube channel. I really initially I watched like five or six of those videos and I really loved them. And then the more I got into them, I was like, wait, he's just like reading a Wikipedia page. And he's like, there's a very definitive formula and I want to apologize for that because the host of that show. He's I don't know him personally, I found that like, just so formulaic, and definitely kind of annoying and overly dramatic. So I'm very sorry, if you watch that and were annoyed by it because I got through like - -116 -00:57:57,660 --> 00:57:58,170 -Wes Bos: he just got - -117 -00:57:58,200 --> 00:59:55,500 -Scott Tolinski: unpicked, I unpicked I got through like five of them. I was like, This is pretty great. And then I got through 10 of them. I was like, a kind of regretting this one. So I am going to do a follow up pick, which is a better version of a similar type of thing. And this is what it's called war stories from Ars Technica. If you don't know, Ars Technica, it's a blog. It's been around forever. And these are like, you know, 20 minute 30 minute long explorations from some of the smartest developers on the planet, talking about problems that they had in the development of some essential works. And then talking about how they overcame those problems. For instance, there's a really good one, if you ever played the game missed back in the 90s. This was how missed almost couldn't run on a CD ROM. And they were talking about not only the history of Myst itself, but how these rendered rendered designs, they needed to find a way to essentially game the system on a CD to make it actually work. And so they are talking about the technology behind how c reads data and what were the some of the situations they went in. These are just extremely smart people with extremely really clever solutions. There was the this Crash Bandicoot episode and I never played Crash Bandicoot I'm not I'm not super I mean, I'm familiar ash, but I'm not super familiar. But he's talking about this, these ideas they had that are like really brilliant. And he's coming up with them. There's just like, oh, so Well, we've found these limitations with the the libraries that PlayStation gave us. So we just like wrote our own, or just started hacking away of the PlayStation official libraries that they gave us. And nobody else was doing that. Because those are the official libraries. People just assume that they were all performative. And like our performance, performance, we just assume their performance. So we just started realizing and looking into them and seeing is, wow, these could be more performant if we wrote them entirely. So the history of the hacking away like this system libraries. - -118 -00:59:56,100 --> 01:00:14,520 -It's really fascinating in that really in depth stories. They're all just a single developer talking no drama whatsoever. No over the top nonsense, no sound effects. I love this stuff. So check this YouTube channel out. More specifically check out this playlist, the war stories. There's 21 videos. Well worth your time. - -119 -01:00:14,910 --> 01:00:36,750 -Wes Bos: Awesome. Well, thank you for tuning in. Hopefully you enjoyed that. We'd love to hear what you think about reacts one year later. Make sure you tweet us at syntax FM or post up on the Reddit reddit.com for slash our forward slash syntax FM. And there's been some memes posted there lately. So these are some Mimi's mimic. Well, in Canada we call the mimic, mimic - -120 -01:00:38,400 --> 01:00:39,180 -Unknown: most - -121 -01:00:41,880 --> 01:00:45,900 -Wes Bos: Oh, all right. That's it for today. Thanks for tuning in. Catch you on Monday. - -122 -01:00:47,130 --> 01:00:47,580 -Unknown: Please - -123 -01:00:49,530 --> 01:00:59,280 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax233.srt b/transcripts/Syntax233.srt deleted file mode 100644 index 8aee35f01..000000000 --- a/transcripts/Syntax233.srt +++ /dev/null @@ -1,108 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA and Scott Taylor. Totally at ski. - -2 -00:00:25,950 --> 00:01:04,530 -Scott Tolinski: Oh, welcome to syntax in this Monday, we're gonna be talking about something really interesting, a feature that Wes has added to his own store. And because of that, I get 1000 requests a day to edit to my own store. That is purchasing power parity. The thought and idea that you know, not every country is purchasing with the same amount of money per each cost. So charging everybody the exact same price isn't exactly the most fair way to go about it. So my name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me, as always is Wes Bos. - -3 -00:01:04,590 --> 00:01:06,180 -Wes Bos: Hey, everybody, what's up? - -4 -00:01:06,270 --> 00:01:09,330 -Scott Tolinski: Hey, Wes, the pee pee pee man himself. - -5 -00:01:10,890 --> 00:02:27,180 -Wes Bos: That's great. Speaking of Pease Today we are sponsored by Prismic. Prismic is a headless CMS with a graph qL API on top of it. So the way that it works is you sign up for Prismic. You create your content types, you can relate them to each other. And that will spit out an API as either a REST API or a graph qL API. And then you can pull that data into wherever you want you the listener probably want to build a view or react or Angular or something, some sort of single page app like that. So we want you to check out Prismic try it on your next project, go to prismic.io forward slash syntax. And even if you're not interested in it, go to this website and check out the prismic.io for syntax because they've made this hilarious landing page like this seriously put some effort into it. This website has got Scott versus me they've pitted us as view versus react. They've got a bunch of different features in there. And they have a bunch of different starters for react and for view with a call Team Wes and team Scott really hilarious little website here and definitely you should check it out. prismic.io for syntax Thanks so much to Prismic for sponsoring - -6 -00:02:27,360 --> 00:02:30,780 -Scott Tolinski: nice by the way that was a Loki awesome head transition with the fourth pa - -7 -00:02:30,780 --> 00:04:48,810 -Wes Bos: Yeah, I aspire to be like us, God. Alright, so let's get into it. Um, purchasing power parity, parity, purchasing power, power, purchasing, parity, whatever you call it, I'm sure there's a proper way for it. This is something that I've implemented probably three years ago on my platform already. And it was done out of people emailing me non stop saying, Can I have a coupon? I am from this country? And then I would have to go and say, Okay, what is that country? Okay, how much do developers make in that country? Gentlemen? Okay, well, email them back, what would be a fair price for you, okay, and now to make a custom coupon and send it back to them. And that was just such a time suck from me. And I was realizing like, first, it's a really cool thing to be able to make your content available to absolutely everyone around the world. Like there's, there's something to be said for. Yes, I'm running a business. But I'm also It feels good to be empowering people to, to up their job, no matter where they live in the world. So that's the like touchy feely part of it. And then the like business west part of it is you can make more money by charging less in other countries. So this whole idea of people emailing from it primarily was India that got me started. Because there, there's a lot of people in India, a lot of developers out there that take my content, and they just don't earn as much as they do as like a North American or a European developer might make. So how do you like accommodate for that? Where it's weird, because it's the same product? It's generally the same price, although it is a little bit more expensive to actually it's funny, the most expensive place to stream video to is India. Yeah, yeah. Yeah, it is funny. And it's one of the cheapest countries to buy it from. So I just thought like, like, how can I automate this this type of thing, right? So over like, probably two years, I've just been collecting data from people as to like, how much they make what is like, what is the developer making your country and just information about what is fair and things like that. And then I built this thing called parity purchasing power. It's an economics term. And I implemented it. - -8 -00:04:48,870 --> 00:04:52,380 -Scott Tolinski: I was gonna say, did you come up with this concept? yourself? - -9 -00:04:52,409 --> 00:05:23,510 -Wes Bos: No, this is a an economist type of term. I sort of just put it into my own thing and said, I support it. So I did that. And then it's sort of like over the last couple of years, it's just blown up in terms of course creators are just pointing at me and other developers who now have implemented it and sort of like everybody or not everybody, but a lot of people have implemented it in their product, to a point where people who don't do it send me emails being like that, like, everybody is saying, why don't you do a West is doing my - -10 -00:05:23,510 --> 00:05:36,690 -Scott Tolinski: so many people messaged me about that. And I'll even in that later in this episode. I don't know if you want to get into like, why it's more difficult for me to do that than it is for you. Yeah. Do you want me to do to talk about that now? Or do you want to talk a little bit more about yours? - -11 -00:05:36,900 --> 00:10:39,800 -Wes Bos: Yeah, let's talk about, like how you calculate it. And then we'll we'll talk about like the implementation details. Cool. So the last thing I really wanted to become as sort of like the person on this thing, because I'm not an economist. And I also don't want to be put in the middle of what is fair and what is not fair. Yeah. So that is the reason why I do not make my rates public. I do not share them. Because that would be an endless hole of people emailing me about what is fair, and what I already got enough of that. And like I try my hardest to make sure it's fair across the world. So like, where do the rates come from? Well, personally, I have gotten rates just from asking developers from different countries, I see the traffic that comes to my website, I went into all of those countries found somebody if they had not already emailed me and said, like, what do you make, I want a glass door. And I researched what developers make in those. And I sort of just came up with a percentage discount that everybody would get based on which country they are coming from. There are many other ways to calculate this. So there is the somebody came out with an entire package that just does it. And it's called just purchasing power parity, I think you could just npm install purchasing power parity, and it will do all of that for you. I'm not sure where the rates come from. I'm not Yeah, I'm not sure where the rates come from there. You can also generate it based on the Big Mac index, which is how many hamburgers do you get for $50? Us? So that's the other thing I should say is I base my rates, even though I'm Canadian, I base everything on the US dollar. And then rates can they don't go up from there, but they go down from there. And they say like based on that, like how many how many burgers? Can you honey, Big Macs, can you buy with your money in that country? Right? Because that's all around the world. I'm not sure how, how much water that holds because of like supply chain as well, like how much just beef costs in different countries. But it's certainly a sort of highly regarded way to figure out purchasing power parity. There's lots of other things you can dip into. But what I found what works well, both from being fair, as well as trying to sell as many courses as they possibly can, the rates that I've come up with work pretty well. And I'm constantly adjusting them things like Argentina's economy tanked and I have to adjust the rate based on that. But it's it's pretty much just a dumb thing for me at this moment. Cool. Wow. So uh, implementation details, how do you do it? Once you have these rates? Like, how do you do it? Obviously, everyone's like, I can't do that, because people will cheat it right. So first of all, how do you determine what country someone is visiting from is the most often question I get in that question, or, and that comes from CloudFlare. header. So because I run CloudFlare, on all my websites, one of the headers on every request that comes in is the, the country that they're visiting from, you can actually, if you pay for CloudFlare, that also gives you the city and postal code as well, which is pretty cool. But I just need the country, that's good enough for me. So I pull that off of the CloudFlare header. And then I look that up in my database, and then I'll put a banner on the website based on which country they're visiting from, which is pretty cool. Then I just offer them up a discount code. So I say if you need this, here's the code because there are lots of situations where developers say like, hey, like, I actually make good money, I'm fine with paying full price on this thing I want to support you, which is really cool of them. So I don't make it an automatic thing. It's an opt in thing, or people can put in the coupon code. Because I have my own platform, the coupon code then checks if the user who is buying it comes from that country, I'm not going to tell you how I do that, because I don't want more people to cheat it. But that just Actually, I'll just tell you, there's two ways you can do it. You can you can match the CloudFlare head or header of what country they're coming from. And then you can also match that up with the billing address of the card or account that they are paying from so you can make both sure both of those. The next thing everyone says is like what about VPNs? So generally, people are really cool about this. I'm doing a thing I'm putting myself out there. I'm here on a podcast telling you that Yeah, my courses are cheaper in other countries and I haven't wanted to do this public For a long time, because I know now I'm gonna have to spend some of my time, fending this off with people cheating the system. So generally, most VPN CloudFlare is good at figuring out VPN, I'm not sure, like I tried it with a couple of VPNs. And only about half of them actually worked. Even then you have to still have your your billing address match up with the actual country. So that's a bit harder to actually fake. If you want to do that, and then I still do have people do it, but like I see the data coming in. And if somebody is clearly cheating it, I'll either email them and say, Hey, what's up, or I'll just revoke the account and wait for them to email me and be like, Hey, sorry, I was seeing if I could cheat it. - -12 -00:10:41,250 --> 00:12:22,170 -But generally, this is almost a non issue for me. Certainly people do cheat it. But the amount of goodwill and additional sales that it does bring in is well worth the headache of people abusing it and whatnot. Interesting. Yeah, doesn't work with sales. So I one thing I see that people do with purchasing power parity is that they don't apply it to sales. So if they're having like a Black Friday sale, they like take the purchasing power off, which is kind of like a middle finger. So if I'm having a Black Friday sale, you still can get an additional whatever percentage off based on your country, because like sales happen in every country, right, you should still be able to, to get that you can't stack them. So it is a coupon code. And I don't have the ability to do multiple coupon codes. So there is some weirdness there were people are students and want to do the purchasing power coupon code, you can only pick one, I just say pick whatever is better. And that's kind of where you have other challenges is people who buy from Iran, I talked about on the last one, don't have credit cards, or they started, they do have credit cards, but they don't have credit cards you can use outside of Iran. So if that's the case, they usually get a friend who lives in another country to buy it for them. But they still want the Iran coupon code discount. So I had to write a little bit of workarounds there for so people could still use the coupon code when they're not technically in Iran. But it's a whole nother issues by itself. It's complex. Yeah, it is. It is complex. I'm glad I put it in it definitely has helped sales. And that definitely has helped goodwill. And that's pretty much that's pretty much it. Cool. Well, that's a - -13 -00:12:22,380 --> 00:12:39,930 -Scott Tolinski: so that's really, I don't know, it's so fascinating for me to hear about this, especially because I've floated around the idea of doing this for so long. In fact, it's been on our to dues forever. And for those of you who are wondering, Well, why the heck don't you just implement this, it's a little bit more difficult when you're dealing with subscriptions. Anytime you're dealing with everything - -14 -00:12:39,930 --> 00:12:41,880 -Wes Bos: is more difficult with subscriptions, right? - -15 -00:12:41,880 --> 00:12:49,890 -Scott Tolinski: Everything is sort of multiplied, right? Because you have one variable, which is a stripe, credit card charges, right? It's stripe and - -16 -00:12:49,890 --> 00:12:50,790 -Wes Bos: PayPal. But yeah, - -17 -00:12:50,790 --> 00:14:13,200 -Scott Tolinski: well, you you do PayPal separately, but either way you're still sending the coupon is is rooted in your own thing, right? It's not? Yeah, often stripe system or whatever. No, it's not cracked. So I have PayPal, and credit card through charges and through subscriptions. And it's altered Braintree and they like really want you to do coupons in their system and add ons and all those things in their system. So it gets really, really complex really quickly, when you're doing discounts and add ons, you probably have a few hundred add ons and discounts that exist within Braintree zone system. Oh, yeah, because I can't, especially with subscriptions, I can't just send a longer price to them, I have to send the subscription that has a designated price and then with a coupon, and then that coupon has to already exist in their system, or I have to create it in the process of the creation of the subscription. So it's a really complex problem. And definitely not one that I can just stop everything and work on especially when we have so many things that they'll still work on. But yeah, if you if you do need some help, I'm you know, more than willing to give out the educational discount for those of you who are in a situation like that, because the educational price is a set price. It's not designated by country or by purchasing power, but at least it is it is cheaper, you know? - -18 -00:14:13,590 --> 00:14:38,250 -Wes Bos: Awesome. Yeah, it's much more difficult when you get into and then you got to think about like, renewals. And then you also got to think about people who have bought it already and then want to go back and yeah, Want it for like the only first four months of the 12 that they paid already. And who Yes, that can't be can't be easy to do. So it's certainly something at some point, I would probably recommend you do but I don't envy you having to - -19 -00:14:38,280 --> 00:14:59,160 -Scott Tolinski: Yeah, to do all of that. In the in, I would like to we have a lot of work to do on our subscription service anyways, in various regards in terms of like editing team and enterprise accounts, which is going to require a lot of upgrading, rewriting a lot of things and maybe it's something we can take a look at when we're heading into that code a little bit more, maybe bring on a specialist or somebody who's totally Pro with that. - -20 -00:14:59,550 --> 00:15:32,820 -Wes Bos: Totally And this is just another perfect example of why we code our own systems. Because this is just a crazy idea I had three years ago. And it went ahead and implemented it. And it's awesome. Like, if you were to go with an existing solution for streaming courses, there's no way that they would have this, maybe some of them do now, because it's become such a thing. But like, I wouldn't be able to write my own resolver code that validates a coupon code based on the request that's coming in, and all this other sort of information. There's so - -21 -00:15:32,820 --> 00:15:45,800 -Scott Tolinski: many times where I really feel like having my own platform is the greatest thing. Possibly, because you do get that those choices in control, you can add those nice little things that set you apart makes you totally different from their people. - -22 -00:15:46,050 --> 00:17:07,680 -Wes Bos: Yeah, absolutely. I big fan of that, it definitely gives you a bit of a competitive advantage to be able to implement, like, I implemented this thing in probably a day or so. And it's paid itself back many, many times over, based on just people from around the world. Mm hmm. So I think that is it. Uh, one last thing is people ask me all the time, they say like, how do you do that? If you have a Gatsby website, like it's client side only right that the CloudFlare header wouldn't necessarily work in that case that if that was the case, then you would need to load the page, and then ping some sort of API that gets a country and then comes back with the country and then display some sort of banner on it. And that would cause a little bit a page jank. If you're bumping down the page to show the banner off of there, but certainly doable as well. I also use this package called country emoji, which will allow you to pass in a country code and it returns the emoji of that country, which is pretty fun. So people, I found love to see their their country's flag on the banner. That's like a huge point of pride for them to see like, thank you so much for considering our country. Like I feel. There's some countries out there I had never heard of before today, which is really cool that to see that there's developers all around the world being able to build stuff. - -23 -00:17:07,920 --> 00:17:09,080 -Scott Tolinski: Yeah, totally. Wow. - -24 -00:17:09,239 --> 00:17:22,680 -Wes Bos: All right. Well, hopefully you enjoyed that. This is gonna be my go to thing that I point people at because I get asked all the time how I did it, and there's like tweet threads here and there about how I've done it. But I've never just gone out and totally said how it all works. So - -25 -00:17:22,800 --> 00:17:29,550 -Scott Tolinski: yeah. And if you want to email me about why haven't I done this yet? You can I can point you to this episode as well. - -26 -00:17:30,270 --> 00:17:36,560 -Wes Bos: Please go ahead. Right. Awesome. All right. Well, thanks for tuning in. Catch you on Wednesday. Please - -27 -00:17:39,570 --> 00:17:49,310 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax234.srt b/transcripts/Syntax234.srt deleted file mode 100644 index efd084c75..000000000 --- a/transcripts/Syntax234.srt +++ /dev/null @@ -1,520 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,820 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:10,530 -development treats out there. strap yourself in and get ready to live ski and Wes Bos. - -4 -00:00:10,559 --> 00:00:47,790 -Wes Bos: Welcome to syntax today we've got me and Scott pulling up to the table, and we're ready to feast on some potluck questions. potluck is if you've never listened to a potluck before the potluck is where we answer your questions, you can submit your own questions@syntax.fm. In the top right hand corner, there is a button. Click it it says ask a potluck question. That brings you to a very generic ugly Google forum where you can type in your question. And let me say like, last potluck, we had some banger questions, this one really good questions. A few of your questions, I've been getting really really good. Don't use got - -5 -00:00:47,790 --> 00:00:50,520 -Scott Tolinski: super good. loving them, loving them. - -6 -00:00:50,609 --> 00:01:10,230 -Wes Bos: That's great. So today, we are sponsored by two awesome companies first one dot tech domains, which is going to get you literally a dot tech domain. And the other one is Log Rocket, which is all your client side session replay that you need. We'll talk about them partway through the episode. How you doing today, Mr. szalinski, - -7 -00:01:10,439 --> 00:01:45,450 -Scott Tolinski: boo boo, I'm doing good. I am. I'm working on some stuff. I'm trying to move some of my video streaming over to cloud flares video streaming platform. And it's pretty darn neat. I've built this neat little system for importing it sort of like what I have with my YouTube one. It's like a one click importer to import all the videos in a specific series. It's becoming a lot of fun, and I'm gonna maybe livestream a little bit today. So obviously, you're not listening to this while we're talking. So you can't tune in. But you may be watching after the fact if you're interested in some of this CloudFlare streaming stuff I'm working on - -8 -00:01:45,689 --> 00:01:49,830 -Wes Bos: that some of my favorite coding is scripting things, - -9 -00:01:49,919 --> 00:01:50,490 -Unknown: scripting, where - -10 -00:01:50,490 --> 00:02:10,740 -Wes Bos: you automate, like I just recently have been importing all of my Hot Tips from Twitter, and all of my blog posts into MDX on for my blog. And I had to write these gnarly, huge scripts to do it. And I have a lot of fun doing it. I don't know what it is about writing all this code to automate all the steps to that. But some of my favorite, - -11 -00:02:11,189 --> 00:02:33,870 -Scott Tolinski: there's something just very gratifying about being able to take things like that into your own hands and just do it. You know, it's like, here's a system that works in a specific way would be really cool if I could manipulate it this way. And then one, one, click this going in this going in this going in the next thing you know, you've got yourself some really fancy stuff working. I'm a huge fan of this kind of coating to it makes you feel very productive. - -12 -00:02:34,160 --> 00:02:55,830 -Wes Bos: Yeah, yeah. And very, very powerful as well. Because certainly you see people in other jobs that say, Oh, I spent my entire day moving from one CMS to another or copy pasting this or searching them like, Hmm, I probably could have scripted that in the same amount of time. But yeah, I would have did it, it would have been way more fun than copy pasting. Yeah, you - -13 -00:02:55,830 --> 00:02:57,120 -Scott Tolinski: could learn something, too. - -14 -00:02:57,479 --> 00:03:02,639 -Wes Bos: Let's jump into the first question. You want to grab it there? Yeah. - -15 -00:03:02,669 --> 00:03:33,330 -Scott Tolinski: So this question is from Eric. And this question is, hey, Scott, you talk a lot about your workflow with figma. As the designer going to programming, it sounds like the workflow is natural for you. As a programmer, I tried to move into design, I have no idea how to get started. Could you explain your workflow in starting a new project in figma, and starting an implementation of VS code? That's been a long time. I appreciate the positivity this show. And the it's our show, we'll do what we want attitude. It is our show. We do what we want here. - -16 -00:03:33,359 --> 00:03:34,410 -Unknown: It's what we want. - -17 -00:03:34,529 --> 00:03:41,630 -Scott Tolinski: Yeah. If we want to make some cringy comments about tasty treats and stuffing your mouth and whatever, then we're gonna do it. - -18 -00:03:42,059 --> 00:03:45,270 -Wes Bos: If we want to have a 45 minute hasty treat on Monday, we'll - -19 -00:03:45,270 --> 00:03:47,430 -Unknown: do it. We'll do it. Who cares? - -20 -00:03:47,519 --> 00:03:48,930 -Wes Bos: Very hasty bio cares. - -21 -00:03:48,930 --> 00:03:50,400 -Unknown: No tasty tasty. Okay, - -22 -00:03:50,400 --> 00:05:34,590 -Scott Tolinski: so this, uh, this this question is interesting, because I wouldn't necessarily say I'm adept at this, or I'm great at this or anything, but I did recently redesigned the entirety of level up tutorials, and I did so starting from scratch scratch. So if you're not starting from scratch, scratch, I would recommend grabbing a starter kit. Now there's starter kits all over the internet, depending on which application you're using. If you're using let's say figma, or sketch, or framer or whatever, you could just google blank, starter kit, and you'll find things and oftentimes, you'll see those as like kitchen sink sort of systems, or ones where they have basically every component. And those are nice to start off on but me personally, I prefer to start with a blank slate. And typically when you know, when you're building an application, you know the stuff that you're going to need, you're going to need text inputs, you're going to need cards, maybe headers, or any paragraphs, and I just start making a frame full of each of the groupings, a frame for buttons, a frame for form components, a frame for links, a frame for type systems, and then just grinding it out turning those into components and then in my actual designs, Using those components as sort of Lego pieces to assemble the designs, and doing so just a component first basis, right? Everything's all about those component components. And so if you start to look at design, while you're designing has not only HTML elements, right, the stuff that you need, but also react components, here's a card, what can a card entail? What can it have? What can it do, if you have the programming background already, just start thinking of it the exact same way you would assembling a react component, and that should help you start to assemble those things within your design system. - -23 -00:05:34,950 --> 00:05:44,160 -Wes Bos: Awesome. Next question we have here is from Burnham I think that's it. Baron from Stockholm, - -24 -00:05:44,910 --> 00:05:47,580 -Scott Tolinski: Bhutan, Rehan. He's got an online - -25 -00:05:47,640 --> 00:05:52,650 -Wes Bos: the dreaded monitor question. Flat, or curved? - -26 -00:05:52,650 --> 00:05:53,280 -Unknown: Oh, - -27 -00:05:53,280 --> 00:05:56,820 -Wes Bos: I'll let you you start with this one's got flat or curved. - -28 -00:05:57,150 --> 00:06:22,560 -Scott Tolinski: I got a curve 30 inches all day, man. This, like, man, it expands across your whole view. And the curved is amazing. It's amazing for a lot of things. And to be honest, like some people will say like, I want a flat monitor because I don't want the curve affecting how I view things. I don't think that really matters as your periphery view goes. If this thing's in front of me, the curve helps so much. It's a very slight curve. But it's a it's a decent curve. And it's fantastic. - -29 -00:06:22,830 --> 00:07:17,270 -Wes Bos: The curve sounds amazing. I have two four K's 132 inch and 128 inch, which I run on sideways. And the only reason I don't go curved, because I definitely think curved is is better is just because I want more of the vertical resolution. Yeah. And I want 4k, like high density pixel versus just regular 1080. So they are working on them. They have a couple out so far. But there's like more than my house costs. Yeah, but what's there is a 38 inch 4k monitor that goes more than 1440 pixels high. That seems to be the limit. Right now on the height of the resolution. I'll be all over it just like I am quite honestly, it's it's almost too much too wide for me right now, with all the different monitors that I have right now. - -30 -00:07:17,610 --> 00:07:23,670 -Scott Tolinski: It's so good for video editing, like, have that whole timeline span that holding so much visibility. - -31 -00:07:23,970 --> 00:07:50,550 -Wes Bos: Yeah. Oh, yeah. And for when render props are a thing. You could view all of your code at once. were highly nested CSS. That's a good one. Yes. Yeah, you can, you can do all of your sass. I once had a student at a boot camp. And this is not making fun of them just thought it was it was a little bit funny because we taught them like nesting and CSS. So they nested everything. They started with body and went all the way down. - -32 -00:07:51,020 --> 00:07:54,300 -Scott Tolinski: I think everybody has an over nested at some point in there. - -33 -00:07:54,390 --> 00:07:55,980 -Wes Bos: Yeah, yeah, we've all been there. - -34 -00:07:56,010 --> 00:07:58,830 -Scott Tolinski: Maybe not to that degree. But to some degree. - -35 -00:07:59,550 --> 00:08:13,110 -Wes Bos: There's like some sort of, like curve of like when you start CSS and you learn about nesting, it goes right up. And then you get better at CSS and you realize, Oh, what is the rule? never more than two? Or it's never more than three? No, no, I - -36 -00:08:13,110 --> 00:08:18,630 -Scott Tolinski: never even think about it. No, cuz I just think about scoping and containment, rather than like, how deep I am nested. - -37 -00:08:19,050 --> 00:08:30,330 -Wes Bos: Yeah, this scoping gets rid of a lot of the nesting anyway. Tony, Oh, I love talking about monitors. I'm on this 32 inch, which I think is the developer monitor right now. But - -38 -00:08:30,540 --> 00:08:42,240 -Scott Tolinski: that might change. Yeah, yeah. Big fan of the widescreen. Alright, this next question. They actually but they wanted you to try to butcher their name. So I'm going to give you the chance to do that. Before I read the question. - -39 -00:08:42,690 --> 00:08:50,130 -Wes Bos: All right. Okay. So it's spelled t s i o L i s? I think it's CLS. - -40 -00:08:50,419 --> 00:08:52,409 -Scott Tolinski: CLS sounds fine to me. - -41 -00:08:52,409 --> 00:08:53,520 -Wes Bos: I didn't butcher it. - -42 -00:08:53,520 --> 00:08:55,590 -Scott Tolinski: So I think you did a pretty good job. - -43 -00:08:55,590 --> 00:09:00,630 -Wes Bos: All right, this question is can I butcher it? Just to salgados to sylius? - -44 -00:09:01,470 --> 00:10:08,460 -Scott Tolinski: e soleus. Okay, so this question says it's for me, but I think you have a good perspective on this as well. It says, question for Scott. I'm relatively new to web development and have learned HTML, CSS node and Mongo. I'm planning on taking your as my Gatsby e commerce course. However, I've no experience in react. Should I learn react first. So the basics of this question, if you boil it down, is I want to learn Gatsby specifically gets being an e commerce. I'm actually wearing a Gatsby t shirt right now. Should you learn react first or react with Gatsby. Now I would say learn react first and learn it. You don't want to learn it decently? Well, you could pick up Gatsby and you could build a basic site, just with your HTML JavaScript skills. But the moment you need to do anything, you're probably going to start making bad choices right away because you don't understand the foundation. So I would say spend some decent amount of time learning react foundations. You don't got to be react Master Man or anything like that. But spend some decent time just really hammering out the basics. - -45 -00:10:08,820 --> 00:11:06,510 -Wes Bos: Yeah, I think I've had this question before because I have a Gatsby workshop and people email me and say, Hey, like, like, how much of react Do I need to know? And my answer to that is very little, because you need to know templating, and components and props. But if I think about even my own website that I'm working on, the amount of custom react hooks that I have in there is very minimal. And for for e commerce is probably different. Because you do need to listen for clicks and, and fire off things and show loading states and whatnot. But for a lot of Gatsby websites that are just websites that don't do anything, they just display content, you can get away If anything, I look at my own personal website and building on Gatsby, it's way more custom node work than it is actual graph. QL. Yeah, yeah, it's graph QL. It's node, it's node API's. It's writing to file system disk, all that stuff. - -46 -00:11:06,510 --> 00:11:07,080 -Unknown: Mm hmm. - -47 -00:11:07,439 --> 00:11:35,100 -Wes Bos: So yeah, I think you should know a little bit enough to template out. And then as soon as you get into that, like situation, you need to fetch some data on the client side, or I need to listen for a click, or I need to take this data from the nav of like, what page we're on and bring that much lower somewhere else. And I need to put that in context, then you need to get into react, but not a whole lot. And I think Gatsby can also be a bit of a gateway drug to react. - -48 -00:11:35,399 --> 00:12:31,230 -Scott Tolinski: Yeah, I agree. And I mean, I still think you should probably learn those wreck foundations and fundamentals. But I mean, I totally agree that without knowing them, you can accomplish an insane amount within Gatsby. And I think that's a testament to just how excellent, not only react is but like the power of Gatsby, some people will say like, why would you ever use react for a static site? Or why would you go, why is that overkill? But if you actually look at the code, the HTML that you're writing, or the JSX, you should say, with the react and Gatsby code, it's really simple. And it's really just basically HTML anyways, so if it's spitting out a static site, and you have some HTML, and you're not doing anything crazy, why wouldn't you use something like Gatsby, which isn't really going to give you that much overhead into your site? Anyway, so I'm a huge fan of of just using Gatsby in general, but yeah, yeah, there are there are definitely react specific things in Gatsby specific things that you may hit along the way. - -49 -00:12:31,710 --> 00:12:53,580 -Wes Bos: Thank you to snowless. That was a great question. Next question we have here. Sure. Mark Foster. Hello, Mark foster allows me alien, should I be using it? So amp is Google's proprietary. Now, there's a lot of like, here around what is a lot - -50 -00:12:53,580 --> 00:12:56,159 -Scott Tolinski: of heat. I know, I see. I could see you dancing around that heat. - -51 -00:12:57,539 --> 00:13:59,429 -Wes Bos: Was the basically what it is, is Google rolled out this thing called amp. And you can make amp versions of your website that are very stripped down. They've compressed images, they've got just HTML, not a lot of custom JavaScript is running on it. And the upside to that is that they load very fast. Google caches them on their own server, and they often will preload them. So by the time you tap the link, it's just immediately you're seeing the website, which is good. As a user of amp websites, I often say, Hey, this is better than having the 5000 injecting ads autoplaying video guard, like especially now like I don't I don't read a lot of news, but with this Coronavirus going along I've been like going at random websites that people have been posting on Twitter and I'm just like, this is awful to experience all these cookie pop ups and slide downs and email, signups. I'm like this, this is awful that we've done this to the web, and they don't even give you real cookies, that - -52 -00:14:01,740 --> 00:14:04,649 -Scott Tolinski: you're gonna get a pop up, you gotta get some cookies out of it, man. - -53 -00:14:04,890 --> 00:14:45,570 -Wes Bos: There you go. That's, that's pretty good. So why don't why shouldn't you be using App? Well, Google invented it. And there's some ideas that they give those websites precedence in search results over others, whether that's true or not, is still out to be seen. And it's also it's not very, like standards friendly, because like, doesn't HTML already do this? We just sort of goofed it up by putting in so much extra JavaScript and images and, and tracking and things like that. So personally, I have never gone down the app world, but I know people who work for big publications probably couldn't live without it in terms of traffic. What do you think? Yeah, - -54 -00:14:45,600 --> 00:15:30,510 -Scott Tolinski: it is such a slippery road because there are just fiery fiery opinions on this one. And I it depends on on what the audience is, who your audience is, and if they require it if your bosses saying we need amp, because you know, it's faster and every other news company has a thing. Yeah, implementing it. But again, the whole proprietary pneus of it in the sort of weird and it's a, it's a turn off for me in terms of using and implementing it myself. I'm not I'm not rushing to implement it in my platform, so to say, but of course, my platform is not the New York Times or something, you know. So it's, it's, it's, um, industry specific in my mind in terms of what you're trying to support and who you need to support and what your competitors are doing and all those things. But it's a it's a tough, tough road to - -55 -00:15:30,539 --> 00:15:53,299 -Wes Bos: and also Facebook has its own version called Facebook Instant Articles not doing that. And you're actually technically you don't get the users on your website, either you they're on like the URL. And like I see it all the time. We're like people that are not technical share the URL. And it's like Google amp content.whatever.com. And I'm just like, a, like, You're, you're breaking the internet here. - -56 -00:15:53,549 --> 00:17:09,080 -Scott Tolinski: Right? And I hate that I hate it so much that I just don't want to like it. You want to rebel against that kind of thing and say, I'm not gonna do that. But at the end of the day, you don't always get to make those decisions. At least idea. So yeah. So next question is from a Christian Christian asks, What are the advantages and disadvantages of building a web app using a framework such as Blitz, Blitz dot j. s. Now, we get a lot of these questions that are like, what do you think about this framework? And then all the time we're like, I've never heard of that framework. What was that? I feel like there was one fairly recently that I had never heard of. So this one I have not heard of Blitz until this question came in. So thank you, Christian, I know are aware of Blitz it says it's a framework for building monolithic, full stack serverless. Wait, monolithic, serverless feel like those are conflicting ideas. monolithic full stack probably tongue in cheek that it probably can do both of those serverless react apps with zero data fetching and zero client side state management Waitwhat zero data fetching and zero client side state management. So what - -57 -00:17:09,080 --> 00:17:09,750 -Unknown: is this? - -58 -00:17:10,820 --> 00:17:13,290 -Scott Tolinski: Is this real I I'm adding a letter - -59 -00:17:13,340 --> 00:17:48,080 -Wes Bos: Yeah, I'm so I'm just looking at it here. I went to the author's Twitter page, who by the way, has the most cool Twitter photo ever. So go to his thing. twitter.com forward slash fly bear. He's got a dually truck, and this massive RV, with the triple axle RV with the American flag and an eagle pulling it. That's the most bad, cool thing I've ever seen. I'm not gonna say a ss, because there's kids that listen to this, but it's the most cool thing I've ever seen. You need to see this, Scott. - -60 -00:17:48,080 --> 00:17:50,220 -Unknown: Oh, my gosh, I'm not - -61 -00:17:50,220 --> 00:17:52,820 -Wes Bos: even American. And I feel patriotic seeing that. - -62 -00:17:53,160 --> 00:19:16,200 -Scott Tolinski: So this is all just okay. So it's it's basically, what I'm gathering here is zero client side data fetching or state management, all data reads and writes happens server side. So it looks like rail style routing, right, Kyle? repple. Rest graph qL API optional, but not required both a C. Okay. So this is absolutely real. I was just, I don't know why I was like reading. This thing is it's so funny because their their Twitter announcement about it. Tell us more about what it is and what it does, then the website does. So it'd be cool if the website maybe had some of that information on it. Hmm, No, I've never heard of this. Would I? advantages and disadvantages, I don't know if I can necessarily say, it seems like this is wanting to be some sort of like a full stack rails thing. I personally use a framework called Meteor, which you know, is a full stack sort of thing, where I get access to the database, and node and all those things directly in my application. So I'm by no means against a full stack framework, by no means against it. In fact, I really like using full stack frameworks whenever I can, as long as they're good and work. Well. This one looks interesting. At first glance, I wasn't quite sure about it. But now, a little bit more work. I don't know. I think they need more examples. I mean, I think I think I need to see more more about this. - -63 -00:19:16,310 --> 00:19:30,540 -Wes Bos: Yeah. It's a hard thing when you come out with this, a new framework to clearly communicate what it is and why someone might need that. So definitely, you need to take a little bit more longer. Look at this blitzed Yes, but definitely pretty cool. - -64 -00:19:30,540 --> 00:19:56,400 -Scott Tolinski: I love seeing people put out new frameworks. If you've used Blitz j s, which it looks like this tweet is just from February 17. So this is very fresh. If you've used this or tried this or anything my now please let us know. I'm interested to hear what your experiences around Blitz j s RS or if you are just overwhelmed that there's another option which you shouldn't be. Then just don't tell us at all because I don't - -65 -00:19:56,790 --> 00:20:26,790 -Wes Bos: know why. I wonder if this I'm just looking at so An example code that's posted. And if there's like database queries, like write your react component, I think how this works is that it probably obviously renders at all server side. But since it's react, it probably just streams, the changes to the DOM. So you're not actually running react on the client side. But it's just streaming the DOM depths to the to the client. - -66 -00:20:27,050 --> 00:20:33,150 -Scott Tolinski: This is the Netflix do something like that, like Netflix doesn't use any client side reactor and my tripping, - -67 -00:20:33,240 --> 00:21:13,650 -Wes Bos: there was a demo with what is it called? What's the new thing coming out in react? That will never come out suspense. So there was a demo in Korea suspense, where it was just running react client side, and then it was just using a WebSocket to stream the changes to the client side, which is pretty nifty. So then on the client side, you just have like, a couple lines of JavaScript that just dumped the HTML into the correlated div. And you're off and running. So I bet that's what something like this does. And that, if that's the case, where it's all server side, you don't have to worry about like auth or anything like that. on the client side, which is pretty nifty. Yeah, - -68 -00:21:13,650 --> 00:21:28,020 -Scott Tolinski: this is actually fascinating that it's a full stack monolith. So you're writing everything in one spot, but what it deploys serverless functions. We're gonna have to take a more Look at this. I did not hear about this, but I'm going to take a little dive into this after the show. So - -69 -00:21:28,229 --> 00:22:23,910 -Wes Bos: Oh, wow, I love I love seeing new new frameworks like this coming up. Because these these are the types of things where it might not take off it might just have its own little thing. But that that's also have you started right and then Oh, it was totally shook up the whole industry. So big fan of so and stuff like that happens. Cool. Next question we have here is from Christopher talk, Would you ever consider moving from mongoose Mongo, slash mongoose? So I'm assuming he means like the database that we use, both of us use MongoDB on our apps, both of us use mongoose, which is a node package for interfacing with MongoDB would I ever consider moving from it? In a new project? Absolutely. Every new project that I have, I reconsider what database I should be using. I use Dynamo DB in a little toy project the other day, which is really fun, dynamic, dynamic. That's like that Amazon Web Services. - -70 -00:22:23,940 --> 00:22:25,500 -Scott Tolinski: I know isn't it? Dynamo. - -71 -00:22:25,890 --> 00:22:47,580 -Wes Bos: Dynamo Dynamo die? Yeah, you're right. Dynamo. Dynamo. By demo. I don't know. Yeah, Malmo. I'm just you know, here. I don't know why. You know why it is is because in Canada, we have this little treat called a nymo bar. In the nymo bar, - -72 -00:22:47,610 --> 00:22:50,580 -Unknown: I haven't. I have not have a nine nymo. - -73 -00:22:50,610 --> 00:23:16,950 -Wes Bos: I was thinking it was like, the nammo bar. So I would whatever, move my own platform over No way. I don't have zero problems with MongoDB. There's no way I want to rewrite all of my code for zero benefit. Big fan of how MongoDB works. So no, not on my own application. But other applications. I'm constantly looking at different databases. - -74 -00:23:17,370 --> 00:23:45,330 -Scott Tolinski: I feel the same way. I have no need to I have no need to change mine over I'm very satisfied with how Mongo works for us. And just like you on each project, I would assess something different. In fact, the database I'm maybe most likely these right now might even be well, it's not a database, because it's Postgres. But Hasura and Postgres together seems like a nice little treat for me, but I'm not, I'm not going to move my database, not a chance, in a way not gonna happen. I think - -75 -00:23:45,330 --> 00:24:36,840 -Wes Bos: that's probably the next step of the database that everyone uses is it's gonna be something that comes with another layer. Yeah, that gives you a graph qL API on top of it. Hasura Prisma. MongoDB is rolling out their own version of this, we're starting to see that become a little bit more popular because I think people are pretty happy with the solutions of databases out there. Unless you're like running Twitter, or trying to like I know like someone like drip, lift the log, millions of actions per second of just things people clicked on and hovered over and, and things like that. If that's the case, and obviously, yes, look into that. But if it's the case of me and Scott, we're, we're just saving records for people. That's a very low bar, almost any database would be able to handle that. - -76 -00:24:37,110 --> 00:25:11,670 -Scott Tolinski: Yeah, I feel like sometimes people they do maybe not understand exactly what our requirements are versus other other people's requirements because our at the end of the day, our requirements are really not that intense. Right. We're we're serving a fair amount, but we're not serving like streaming data, Tom, we're not doing a ton of crazy stuff. And at the end of the day, and uncle's great, I don't I know there's a lot of hate around Mongo occasionally. But I'm a huge fan. So yeah. And if you are starting a new project, you're going to want to evaluate your database. And you're also going to want to host it on a dot tech domain with more about dot tech domains is wis - -77 -00:25:11,880 --> 00:26:46,290 -Wes Bos: Yes. So I don't even need to explain what dot tech domains are because it's literally in the name. It's a domain name that ends with dot tech. So I teamed up with TAC are teamed up by they gave me a domain name for my uses dot tech. So I was like, I wanted to build this website where it compiles everybody's uses pages, which is just go to uses that tech, you could figure out what it is. And I needed like a short, snappy little domain name for it that clearly said what it was right? shows the technology that we use. So I reached out to .TECH as a Hey, like, you're sponsoring the podcast? Wouldn't it be cool if our ad reads were just me talking about using .TECH instead of having to go through all the regular ad reads that you have? And they said absolutely. So they hooked it up. And I thought it was just like the perfect domain name. For the type of website that I have. I love short little domain names like that. All kinds of other people use it Viacom CES, Intel, they all use tack for their technology focused domain names. If you want to check it out and grab your own tech domain, go to go dot tech, forward slash syntax 2020 and use the coupon code syntax 2020, all one word, and you are going to get 90% off one, five, or get this 10 years. If you want to register a domain name 90% off for 10 years into the future. Absolutely. You can go to go to go dot tech forward slash syntax 2020. Thanks so much to tech for sponsoring. Cool. - -78 -00:26:46,830 --> 00:27:55,230 -Scott Tolinski: All right, next question is from our Wheeler. Now this question says Hey guys, first of all, I really appreciate it podcast. Thank you are Wheeler, lots of great information and digging your humor. So I am very new to the dev world. I went to college for 15 years for computer science but dropped out halfway through and became an electrician long story. But I'm a wanting to change my career. And I'm very interested in software development. I've heard about modern labor's a boot camp, and I'm intrigued. I'd like to know what your take is on their program. In the last few weeks, I've listened to half your rear shows. And in the end, you say and don't forget to subscribe in your favorite podcast player. I say that. I feel like you're referring to the audience's players. And it cracks me up every time that is kind of a player. Don't forget to subscribe player. So okay, so this boot camp, this boot camp is called modern labor. Have you heard of this specific boot camp? Because there's a lot of boot camps? Yeah, being floated around? I have not heard of modern labor. There's a site called course report. And I don't know if you're familiar with course report. - -79 -00:27:55,440 --> 00:28:01,410 -Wes Bos: Yes. Yeah. Cuz I used to teach at boot camp. So I'm very familiar with all of these these websites. Okay. - -80 -00:28:01,710 --> 00:28:15,390 -Scott Tolinski: Yeah. And there's not a lot of information on this one. So, yeah, I have not heard about modern labor. And just like many other boot camps there, there seems to be just a ton of them. I have not heard about this one specifically. So I'm interested to know what you have to say about this one. - -81 -00:28:15,780 --> 00:28:42,960 -Wes Bos: Yeah. So if I think this, this advice I'll give applies to any any boot camp that is out there. So first of all, being an electrician. I'm not sure if modern labor is targeted at people who were in the skilled trades and are trying to now get into tech. I don't think that you need a special boot camp that is targeted at you. Like I I taught at a boot camp, and we had a guy who was at glacier. Do you know what that is? Got? - -82 -00:28:43,140 --> 00:28:44,970 -Scott Tolinski: He moved early, slowly. - -83 -00:28:45,210 --> 00:31:40,500 -Wes Bos: No, he is a glacier. I didn't know this is someone who works with custom glass. Know that now, you know, interested in hey, yeah. So we had lots of people coming from construction, electrician, plumber, things like that. And it's funny. We also see the opposite people leaving web dev and getting into skilled trades, because that's certainly a good industry to get into. So I don't think that you'd necessarily need that. Now. What should you do when you're evaluating a bootcamp? First of all, I think you need to go on Reddit, and and see what people are saying, because real people, yeah, if you go on any boot camps website, they're gonna have lots of nice shiny stories and things like that. But you need to find the actual people that actually took it and are willing to share with you firsthand experience as to how it works now, but that said, you're gonna you're gonna get people on either side. Even on Reddit, like you, you're gonna find people on Reddit that are like, awful teachers were garbage, things like that. And that's just because there's, the reality is that in every boot camp, there's a couple people that just, it's just not for them. They can't kick it or just whatever was going on in their life at that time. It didn't work out. And then at same time, you're also going to have boot camp people who are told by their boot camp. Hey, can you go talk on Reddit about About Us, something like that. So he's got to like, take in as much as you possibly can about it, it doesn't seem like there's very much information about this boot camp online. So for that reason, I would probably steer clear of it. Because these boot camps, they need yours to make really, really good content. And if you are, I actually taught the very first boot camp of the one I went to. And it was really hard to put it to make the content. And I know that like, the content that you are taught in the boot camp is probably one of the most important things along with the instructors and making sure that you enjoy the instructors and how they talk, how they explain things and whatnot to you. So there's that. Also, you need to note now know that a lot of boot camps are doing ICS, which is called income share, or ICA, income share agreement, we're generally it works in the fact that they either give you a discount to the boot camp, they give the boot camp to you for free, or they'll even pay you to go to the boot camp. And then in return for that, they will take a certain cut of your salary over the next however long and most people's initial reaction to this is that's robbery. Why would you do that? But I've talked to enough people that have gone through this. And if it's done well, definitely think that this is kind of a cool way. Because like certainly some of the good ones that do this can help you negotiate a much higher salary, because it's in their best interest to make sure you get paid well. And there's a limit of how much money they will actually take from you over the next five years and whatnot. So I don't know kind of interesting. - -84 -00:31:40,530 --> 00:32:09,840 -Scott Tolinski: Yeah, boot camps are fascinating. They're, they're fascinating, because it is tough to know what any of this stuff, especially if you're not going through it, you just don't know. And again, I'd like to do that, like you said, just to add Reddit to the end of things. Like if I'm searching for something and I want to get opinions, I'll be like, best blank Reddit and then they'll you'll see a common thread of a bunch of people talking about it. I think it's important. I think that that stuff does help quite a bit, at least understand real world perspectives. But who know, it could be I mean, you know, well, - -85 -00:32:10,140 --> 00:32:39,230 -Wes Bos: that's a Reddit is very good at filtering out. A lot of the skeezy people, it certainly still does happen. Like sometimes there's a subreddit called Hale corporate. Yeah, which is just people calling out people from like corporations trying to pose on Reddit, but it's one of the few places that haven't been tainted by sponsor money like Scott and I have, by the way, make sure you go to dot tech domain names and Log rocket.com forward slash index.com - -86 -00:32:39,230 --> 00:32:44,430 -Scott Tolinski: forward slash pro while you're at it, and what's possible courses and just, ya - -87 -00:32:44,430 --> 00:32:44,940 -Unknown: know, - -88 -00:32:44,940 --> 00:32:45,780 -just by me, let - -89 -00:32:45,960 --> 00:33:09,210 -Wes Bos: me just get a Pepsi consume. Yeah, yeah. Alright, so hopefully that answers your question. Just by doing some preliminary search, I would probably look for a different boot camp. There's so many out there that have been around for much longer than this one. And I wouldn't want to be a guinea pig in a boot camps. cage. What what are you a guinea pig in program now? Yeah. - -90 -00:33:10,650 --> 00:34:16,730 -Scott Tolinski: You started the guinea pig thing? I didn't. I didn't. Yeah. Okay. Next question is from bat bred gear P. He says it rhymes with therapy. And that's cool. But braids. braids is a super cool guy. And he's a he's been a longtime member on the level up tuts community and slack room. He says sup dudes loved your recent episode on serverless functions. I've implemented a few myself. But I always come back to the same question. How exactly do I secure these endpoints because you are charged for compute time. And those endpoints are publicly available? Couldn't do just have anybody send requests to them and up your bill. Okay, as bonus, talk a bit about how authentication works and serverless functions, cookies, JW, T's whatever. I know, you've been doing quite a bit of work with this sort of stuff. So I let you handle the heavy lifting. But I think one thing that you should think about here is that, you know, protecting yourself from these kind of things that shouldn't be a ton different necessarily than protecting yourself from any other DD. Oh, s DDoS. DDoS did depart denial, the - -91 -00:34:17,250 --> 00:34:18,360 -Wes Bos: distributed denial of service - -92 -00:34:18,360 --> 00:34:46,130 -Scott Tolinski: distributed denial of services, where people can fire off requests against your website or your server regardless if it's a singular serverless function. And although you like you said you're you're paid by the usage here rather than just paying for a service. But yeah, DDoS protection during something like CloudFlare in front of it. I don't I don't have any experience here is securing these serverless functions. Wes, I'm interested to hear what you would have to say about this. - -93 -00:34:46,319 --> 00:36:18,810 -Wes Bos: Yeah, it's no different than securing like a REST endpoint on your, your existing application. So how that works with with mine is that I generally have a middleware to all of my endpoints that are secured. And that middleware will then make sure that the person is logged in. And the way that you do that is you either there's a, there's a session ID in the cookie, or there's a JSON Web Token that's coming in, in a cookie or in a header or something like that. And in a serverless function, it's no different than that. The fact is that you just need to make sure that that user is logged in. So what that means is that you'll likely have to do a database call in front of all of your secured endpoints. There are also just lambda authorizers, this is one thing I've not looked into myself just yet, but you can even peel it back a layer before that and make sure that they you they do indeed have the correct authorization headers in the request that you have there. But honestly, if I was just doing it today, and I wasn't doing an entire website, in it, I was just doing a couple little things here or there, I would probably just take in the JW T, either via header that sent manually or via a cookie cookie that gets set when the user logs into your application. And then you just check for that JW T, you look it up in your database, and if it is good, then you allow them to go ahead and do what they want. And if it's not, then you send a response that tells users that they're authorized to do so. Hmm. Yeah, - -94 -00:36:18,960 --> 00:36:26,940 -Scott Tolinski: that sounds about right. I mean, at the end of the day, these are just endpoints just like you're securing anything else, regardless of if there's a one singular one or not, right? - -95 -00:36:27,330 --> 00:36:52,730 -Wes Bos: Yeah, I think one thing people think that is bad is looking up the user in the database on every single request. But if especially if you're using, I know Mongo DB will store stuff that you look up often in memory. So it's nice and fast. That's what Redis does, as well, where you can store things in memory. So like the the overhead of looking this up in a database is very low. And it's totally fine to do that. Cool. - -96 -00:36:52,730 --> 00:37:34,920 -Scott Tolinski: So next question is from Ryan Ryan. So I've decided to make a career out of coding and programming, and I'm an absolute beginner starting on HTML and CSS. It might be a weird question, but how many? Or what percentage of elements a declaratives? Do I need to memorize? It's not that the info is necessarily difficult to parse. It's the amount of tags that I'm bombarding my brain and muddying my progress. I'm more of a theory driven learner. So it's not the biggest obstacle in the world. And I'm starting to see the breadth of this endeavor. I'm not sure how to focus and my mental acuity. Thanks, guys. Brian, you got a nice a vocabulary there loved a lot of these words bombarding? us he got - -97 -00:37:35,040 --> 00:37:41,420 -Wes Bos: Scott can't even think of the word vocabulary, and Ryan's over here using brand new endeavor. Okay, please, - -98 -00:37:41,420 --> 00:39:54,000 -Scott Tolinski: I have a fantastic vocabulary and whatever. So okay, this is the tough one, because you have so many properties. And those of us who've been doing this a long time will take this for granted, because I've been writing HTML since I was, you know, in middle school or something. And, and, and because of that, I've had a long time, okay, I don't even have to think about any of the tags or any of the properties that exist on those tags, because I've just been doing it for so long. And same with CSS. For me CSS was never that difficult, because the properties just seemed to make sense, right? But there is so many properties. And when you're learning this stuff, even if you've come from anything else, you might have a different idea about what this thing should be named right. The one that always gets me is this is so stupid, because it's when you use all the time anyways, but linear gradient on top of a background image, like, Yeah, why? Like, there's that one's one of the ones that always, you know, copy and paste from somewhere else, just because I don't want to mess up the syntax. And there's so many little things like that. So how much of this stuff do you need to memorize? I would say as far as HTML, CSS goes, you're gonna want to memorize at least the stuff that you're using every day, the semantic tags, the headers, the divs, the the mains, the footer, the article, the sections, those big major tags, obviously, you don't need to memorize some of the tertiary tags, like, what is it like superscript. And those ones, you don't need to memorize those because they add tag? You don't use them that often. Right? So my mind is, goes towards write HTML code, write CSS code, and you're going to pick up on some patterns pretty quickly, in terms of like, the stuff that's used a lot the stuff that you're having to look up. And I think any sort of memorization of these tags, elements, CSS properties will happen naturally, as long as you're looking up how to do things like I want to build this layout. I want to do this color, how do I write a linear gradient? Okay, this is how I do it. I want to do this font color, how do I do it? Okay, this is how I do it. And then sure enough, over time, all those things will just fall into place. Did I ever sit down with flashcards memorizing any of this stuff? Absolutely not. And I don't know if you need to, maybe it could help if you're that type of person, but I would say don't worry about memorizing it. Just start coding, coding, more interfaces, and it will come to you. - -99 -00:39:54,440 --> 00:40:19,830 -Wes Bos: Yeah, honestly, I never sat down and memorize anything. If anything. The VS code article. felician makes that home way easier than it used to be. And then just use cheat sheets. So Google CSS cheat sheet printed out, put it on your wall or whatever HTML cheat sheet Flexbox cheat sheet put all these on there, like Flexbox is one that I, I looked up for probably two years before I stopped counting to reference careers, betting for - -100 -00:40:21,330 --> 00:40:25,290 -Scott Tolinski: CSS tricks. One, I referenced that forever and ever the - -101 -00:40:25,290 --> 00:40:36,810 -Wes Bos: whole Yeah, it takes forever. So just just print out cheat sheets, and look up stuff as you need it. And eventually, you'll just do that less and less. I don't think there's a certain amount that you have to memorize, and certainly never did that either. - -102 -00:40:37,290 --> 00:40:38,520 -Unknown: Yeah, totally. - -103 -00:40:39,090 --> 00:41:23,730 -Wes Bos: Next question we have here is from Luke, do you have a standard folder structure for placing utility functions, utility function j. s files, is there an industry standard, I've been using utils, utilities inside source. But curious if there is a more common way, I usually make a folder called utils. And then inside of that, I will just put, if it's a small project, I'll just have an index j s, and put them all in there. And if it is a larger project, I will do a new file for every utility function. And then I'll just export them out of there and then import them into the index j s. And that allows you just to import them directly from the utils folder. And it works really good. - -104 -00:41:24,000 --> 00:42:42,480 -Scott Tolinski: Yeah, I do utilities, I spell it out for some reason. And I do so I have a server side utilities and a client side. Utilities utilities, for me are always just those function single functions that have a single purpose that do one thing, and do so in many parts of the site. If it's like a specific utility function, like something related to the shopping cart, only, I'm not going to put it in my Utilities folder, that's going to go in some things more specific to the shopping cart, like maybe shopping, cart utilities within that feature folder, because if it's not being accessed outside of that section of the site, I don't really want it to be available throughout the entire site. And for no reason other than organization, I do mine, like we frequently talk about on here with an index file, an index file that imports and exports all of the things from the folder. So that way, instead of importing blank from whatever, I'm importing everything straight up from utilities. I also, as we mentioned in the last episode, I think this was one of the one of the previous episodes, I do so with a babble module of resolvers plugin so that my Utilities folder is just available under the name utilities as a module resolver. But yeah, I don't think there's any sort of industry standard. I think, you know, utilities in general, is one of those, like, just toss it in there sort of things, you know, like, everyone's is different. - -105 -00:42:42,570 --> 00:43:07,080 -Wes Bos: Yeah, I always, I always wish that there was a standard because when I was first starting, I was like, What do I put this? Like, what is this even? Is this a lib? Or is this u tilde? You know, and I always see people using that. And then there's a source director like, what, like, what is this? And then I realized that everyone's just making it up. And it doesn't really matter. At the end of the day, there's no there's no, like, upside or downside to that. - -106 -00:43:07,350 --> 00:46:48,750 -Scott Tolinski: That does matter, though. When your code is, has bugs in it. That's what matters, right? Hey, there's bugs in it. So you want to you want to fix those bugs, you can fix those bugs way easier with something like Log Rocket than without it. Now what is Log Rocket? Well, you're going to do Log rocket.com, forward slash syntax. And you're get 14 days for free of this service. Now, this is a service that does some really amazing things. It gives you a session replay of what exactly happened when the user committed a bug. So let's say I click on something it breaks. And typically you just are left to either a error log or anything to tell you what exactly happened. But now you can see visually what happened that caused this thing to break. You get a session replay scrubbable video with the Redux store console, log errors, network activity, and even more than that, it works with everything you know, and love already. GitHub, Trello, JIRA, Salesforce, Zendesk drift, intercom Sentry bugs, yeah, just endless amount of things that works with so check it out at Log rocket.com forward slash syntax, and watch your bugs happen. All right, next question is from Andrew. Andrew says is figuring out new tech module plugins, whatever really as easy as reading the docs for most people, a common response. So what's a good way to learn is to seem Well, the docs are good. And then I opened the docs and I'm absolutely clueless. Are these people giving bad advice? Or do the ducks actually give most people enough to go on, for example, I tried to implement a user login with passport using their ducks. A lot seems to be left out, implying that you're supposed to just already know this stuff. It's a bit demoralizing to feel like I can't figure out anything on my own. I've been doing web dev for a few years now. All by now professionally. I have done some big projects and that are used regularly. So anyway, just wondering what's your take on common advice and your experience being able to figure out You're things on your own without needing an hour long tutorial and so on. I know you're both tutorial makers, but I don't get the impression that you to take have to take a course to understand something new. Okay, so this one's interesting because one of the reasons why I even created level up tutorials in the first place was that there were so many things within the Drupal community, it's like just install this Drupal module. And you're like, Okay, I've installed the module. Now what, and sure enough, you know, you need to click here and whatever. But Drupal people were never honestly the shout out to Drupal people. But he, they were a lot of people were never the best at coming up with these amazing user experiences to just know what to do. And so I agree with you here, Andrew, a lot of times, I'll hit projects, too. And I'll think, wow, these Doc's are leaving so many things out, even like leaving out the things that they just assume people know, right. And that is a really difficult situation for a lot of people to learn it. Now some people are, we have a lot of different types of learners, right, some people are going to hit up the docks, they're gonna read the docs, they're going to have an idea of what to do already. They're just going to get it done. Other people go straight to the source, they're going to look at the source, they're going to read the source, they're going to understand what exists, what the application does, and other people like myself are going to maybe go towards more exploration, you know, what I do, I just start throwing stuff, the code in and get the errors, try to solve the errors, try to figure out why it's not working. And I do so that more than reading the docs. In fact, a lot of times before I even really heavily read the docs, I just start tossing code in. And then if it breaks, then I'll go to the docks, other people, video tutorials, blog posts, whatever, there's a huge range of what really sparks people's, you know, brain correctly working to understand what these libraries and applications are doing. So don't get down on yourself about that one. - -107 -00:46:49,020 --> 00:48:00,450 -Wes Bos: Yeah, I agree with Andrew, most of the times, the docs are very hard for me to learn on IO much rather go into the examples directory and see how it's actually done. Or watch a tutorial from someone to see how they have implemented it themselves. So don't feel bad that the docs are, I find that the people that say, the docs are good, are very, are usually advanced developers who are good enough to just totally be able to look at it and say, Oh, I understand like, I have all of this back understanding of how this ecosystem works. So I see how I can implement it that quickly. And and that's generally what the benefit of it is. And that's also the dachser place for you to reference different options in different methods and things like that, where How do I actually implement it myself is something that a lot of Doc's will leave out, react, and Gatsby Doc's are really good at showing you how to use this. But still, a lot of people just want an entire project to be able to do it. So don't feel bad about that. I'm certainly only at the spot in my career where I can read the docs. And then there's this another level where people look at the source to figure out what's going on, you know, - -108 -00:48:00,810 --> 00:48:36,270 -Scott Tolinski: I occasionally will pick the source over the docks, because the docks assume you It really depends on what the source is, like, because sometimes sources really difficult to parse. And it's, it's littered, and I don't want to say littered because a lot of the stuff is important, but it's littered with a ton of like really long comments explaining things. And to me that like gets in the way of just like seeing what the code is. If it's a react component. Oh, yeah, source all day. I want to see what I writing. I want to dive right in. If it's a, you know, a 3d modeling library. No, I don't care. I don't I don't want to see Oh, really? Yeah, no, just just hide it away for me. But yeah, it really depends. I think - -109 -00:48:36,480 --> 00:49:37,020 -Wes Bos: that's true. I actually had a right before recording this, I had a syntax error. And it was, like cannot get from whatever. I see you. There you go. Yeah. And it was funny because I couldn't find the error anywhere online. So I finally just searched that syntax in the thing and I found the actual code in the I found the code in the source and is able to actually figure it out. So maybe I do sometimes see that as well but not not like some people I see who just immediately crack it open and say like, this is how it works. Sometimes people even send me this like chunks of the source and be like, this is how it works. I'm like what, huh? Oh, squeeze me. Yep, one. Squeeze me. Ah, next. Next up we have AJ, do you have any tips for getting over coach shyness or imposter syndrome? I find myself struggling with this from time to time and was curious to know your suggestions for dealing with it. PS I love the show and learn a ton from you guys over the last year. I think we did an entire show on imposter syndrome didn't know him. - -110 -00:49:37,379 --> 00:49:41,220 -Scott Tolinski: If we haven't we should. I think we did about it a few times. Okay, - -111 -00:49:41,399 --> 00:49:50,670 -Wes Bos: Episode 58 and Episode 15. So we haven't done one in almost two years now. Maybe it's time to do another one. - -112 -00:49:50,970 --> 00:49:57,390 -Scott Tolinski: It's always been like, not like the focus. It's always been just like a pinpoint in another like larger topic. - -113 -00:49:57,540 --> 00:50:58,710 -Wes Bos: Yeah, I think just being okay with not knowing everything, and just being able to put your code out there for the world to see, you certainly are going to get run over a few times by somebody who thinks they're trying to help us. It happens to me almost every single day when I post a screenshot of the code I'm working on. But the reality is, is that almost everybody else is in the same situation where they're, they're afraid. It's the same thing with like, when someone launches a project or a personal website, they always pre face it with it's not done yet, or I only had time to do with this or it's not perfect, I still need to redo this. And then just like kind of pre face it, like don't kill me, please. And I think that's, that's something to say to the community is when somebody is sharing something, when someone is putting their work out to the world to see, like, be nice. And try to provide providing feedback is good, but provide it in a positive manner. We have an entire show on providing feedback as well. So - -114 -00:50:58,889 --> 00:51:07,230 -Scott Tolinski: can we just say that as a general note, just be nice. Just be nice. Just be nice to people. Right? What's nice and having empathy? There's no harm, just do it. Yeah. - -115 -00:51:07,259 --> 00:51:42,960 -Wes Bos: Yeah. Everyone struggles with it. I certainly do myself, especially when I dive into different areas, like I'm doing react one day and node one day and Gatsby when I'm like, in all kinds of different areas, CSS, and certainly whenever I dive into those, the experts of those areas come out of the woodwork. And sometimes it's very intimidating, because it's like, sometimes Brendan Eich will read will tweet back at you. And he literally created JavaScript, right? Like, sometimes those people are, are very kind, sometimes they're not, but you just got to be like, you know what, I'm trying to build websites here. Who cares? Let me put my work out to the world. - -116 -00:51:43,259 --> 00:53:52,950 -Scott Tolinski: Totally. Totally, totally, totally. Yeah. I mean, I personally, you know, I'll have days where I'm really struggling with this, especially putting out this content just being like, Oh, I'm just like, you know, I wish this was better in these sorts of ways. And I think a lot of times, those of us who feel this way about our work, right, we don't realize is that it's important part of becoming a better developer, it's an important part of the whole process. Because if you are feeling like things should be better, or that you need to learn more, or that you need to get better in these sort of ways, or your code isn't as good, it's a driver to improve. And what you can't let it do is you can't let it put you down. And you can't let it stress you out in ways that negatively affect your life. But if you can take a step back and look at is like, Alright, I am not satisfied, or I'm nervous about my code for these reasons, you could take a step back and say, okay, that's an indication that I really value the quality of these things. And I really want it to be as best as possible. I know, my wife, Courtney, she, she's a doctor of psychology, and she tests a lot of children for different learning disabilities, and they do these big long tests. And then she does this giant write up, it's like, you know, in, I don't know, it's like, 12 page, write up these long write ups about like, the test results. And every single time she's like, I just wish it I just hope it's, it's gonna be good. I don't think the parents are gonna like it. And then every single time she gets back glowing results, I'll tell you, the reason why she gets glowing results is not because she's anxious about how it comes across or whatever. But because she has that insight to say like, I just want this to be so good. I want this to be so good. And I you know, that that like drive to like want to make things that much better, is really what turns you into a good developer. So don't don't let it consume you don't let it Don't let it rip you apart that way. But really just try to see exactly how it makes you better. Last question is from Tim Smith, if I rename my GitHub repo, will all the links that are in the wild still work, for instance, github.com, forward slash something, and I map it to github.com? forward slash new something? Wes, your answer, you googled it? - -117 -00:53:53,789 --> 00:54:18,090 -Wes Bos: I was actually always wondering this as well. So I finally Google that after thinking about it for years, and yes, you can rename your repo and you can rename your username, and GitHub will redirect those to other people, although there is the option that someone could register your username, if you change it on GitHub, and then make the same repo so you don't have to worry about that. But yes, you can do it. It will it will go - -118 -00:54:18,899 --> 00:54:23,250 -Scott Tolinski: cool. Okay, nice. Well, I think that does it for the - -119 -00:54:23,309 --> 00:54:25,560 -Wes Bos: Alright, let's sick pics. Yeah, let's - -120 -00:54:25,560 --> 00:54:34,980 -Scott Tolinski: get into some sick pics here. These are things that we pick that we find to be sick. Do you have one off the top of your dome? Or do okay, let's get it. I think - -121 -00:54:34,980 --> 00:55:33,900 -Wes Bos: this is something you've used for a long, long time. I have recently just got it and it's the I stats menu for OSX. Fantastic. Yeah, it's so good. So what it is is a little menu bar application where you can put your I initially got into it because I noticed my GPU was just pegged all the time. And it will tell you what is using up your GPU processes and your CPU processes and then also I use it for I constantly have my up and down bandwidth. Because I live in a country where there is no bandwidth available to me. And sometimes when I'm talking to Scott, our video will start glitching. And it's because I've got something running in the background that's hogging the bandwidth. So the question is what is hogging my bandwidth is very quickly, you can very quickly see what is hogging the bandwidth with icesat menu and there's also like weather and RAM and all that stuff. I don't care about that. It's just GPU CPU and up down bandwidth. - -122 -00:55:34,290 --> 00:55:42,420 -Scott Tolinski: You My favorite part about ice dam and uses that you can use the color to be whatever you want. You can you can get really in depth theming it's like - -123 -00:55:42,420 --> 00:55:48,450 -Wes Bos: 11 bucks, too. And it does so much. I can't believe I live with this out live without this for so long. Yeah, - -124 -00:55:48,660 --> 00:56:39,390 -Scott Tolinski: I'm a huge, huge fan. A big big fan. Love it. Absolutely love it. Cool. Well, my sick pick is going to be a podcast that I've been really enjoying. And it's not like a I want to be story driven podcast that I make before. But it's a fitness based podcast. I like fitness stuff. This one is a new one that I started listening to. It's called stronger by science. And it is definitely weightlifting focused, more so than anything else. But they do such a good job of really going in depth and these episodes are long. They're like hour and a half, two and a half, three hour long episodes. So if you don't have the time for this kind of podcast, I'm slowly going through it obviously because they're long, but I've found is two dudes talking about science based stuff about around lifting. So if you're an intermediate advanced weightlifter, you're starting a new podcast stronger by science isn't really nice. I've been liking it. - -125 -00:56:39,660 --> 00:56:44,100 -Wes Bos: Awesome. That's pretty cool. I've way too many podcasts now that you keep recommending them. But - -126 -00:56:44,129 --> 00:56:47,250 -Unknown: yes, I tell him sorry. I have my podcast. I love podcasts. - -127 -00:56:47,280 --> 00:57:06,660 -Wes Bos: Yeah. Big fan of podcasts. We run our own shout out to podcasts, especially in a syntax. Yeah, yep. All right, I'm going to shamelessly plug all of my courses at Wes Bos comm forward slash courses, you can check out a list of all the different JavaScript and CSS based courses that I have used syntax for 10 bucks off. - -128 -00:57:06,660 --> 00:57:26,370 -Scott Tolinski: Cool. I'm gonna plug my latest course which is animating react with framer motion, we build all sorts of really practical application interfaces with framer motion, it's really super cool. Check it out, level up tutorials.com forward slash pro sign up for the year save 25% - -129 -00:57:26,640 --> 00:57:34,440 -Wes Bos: All right, I think that is it. Thank you so much for tuning in and we will catch you on Monday. These Ace - -130 -00:57:36,060 --> 00:57:45,810 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax235.srt b/transcripts/Syntax235.srt deleted file mode 100644 index 09ec803b6..000000000 --- a/transcripts/Syntax235.srt +++ /dev/null @@ -1,296 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,219 --> 00:00:19,980 -open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, - -4 -00:00:19,980 --> 00:00:21,660 -Bob, and Scott Taylor. - -5 -00:00:23,610 --> 00:00:24,480 -Totally at ski. - -6 -00:00:25,920 --> 00:00:59,490 -Scott Tolinski: Oh, welcome to syntax in this very secure episode of syntax, we're going to be talking about password management, how to lock those passwords up. Because you don't want to make sure anything that you have gets stolen or used or access to without your knowledge. And this is vitally important for every service or anything that you do on line. It's extremely important. My name is Scott Tolin ski. And with me, as always, is Wes Bos. - -7 -00:00:59,520 --> 00:01:26,940 -Wes Bos: Hey, everybody. I'm actually really excited for this episode, because this is a question that I get from my friends and family as well as web developers alike. So I'm hoping that this show can be a show that you send to like literally anybody, you don't have to be a web developer to listen to this one, it's just gonna be like, how do you get good at passwords? Because I think for us web developers, one of the biggest pain points is our friends and family who have sloppy password management hygiene. - -8 -00:01:27,270 --> 00:04:07,590 -Scott Tolinski: Yeah, totally. And speaking of hygiene urinal, make sure your application has proper hygiene from bugs. And we don't want to bugs in our application. And that's why we use a service like Sentry@Sentry.io. Now you're gonna want to sign up, use the coupon code, tasty treat all lowercase all one word, and you're going to get two months for free of this fantastic service. Now essentially, is the bug in error handling exception tool that really just makes everything so so easy. Surgery is adding new features all the time. Now, I'm currently looking at the Discover tag, which has a loan new sign because it's letting you know that hey, this is a new, and it's looking for searching events, users tags and everything else, allowing you to see new bugs that have popped up. For instance, I'm seeing this interesting bug popping up here. And it looks like it's coming in on our API cannot read property ID of null, which means I can tell you exactly why that is coming up, because that's a very standard bug. But this allows me to see every time that this bug or this error is happening when it's happening on my server, if it's on my API, my front end, wherever it is, I can track this thing. I can take a look at it, I can fix it, find it marked as resolved. And then no more bug. I mean, that's really really the the end result of this all looks like this. This is a bug that just popped up. And it just popped up with the latest release. Not only that, but I can actually I can, I can write a test for this bug to make sure it never comes back and that we don't have any regressions. Which of course you could track on Sentry as well. So check it out@sentry.io coupon code tasty treat all lowercase all one word, you absolutely will not regret adding this to your application is essential service in my mind. So password management, getting good at passwords. I think this is a special place in my heart because not because I've been hacked or anything I have not. But I am acutely aware of the consequences of this. And to be honest, I don't know if you've ever been to have I been poned which will link in the description for those of you who are sitting available with the computer right now. Which I imagine most of you are because a lot of people are at home right now. Yeah. Or in the office or not driving? I would say head to have I been poned in the show description. Enter your email in the Have I been poned search bar, hit enter and then just be kind of horrified. Because I'm horrified at all of these things. What it is is the listing of every time your email has shown up in a password breach. - -9 -00:04:07,590 --> 00:04:12,210 -Wes Bos: How many does your show up for a lot? Mine's 23 - -10 -00:04:12,570 --> 00:04:19,130 -Scott Tolinski: doesn't say a number 916 breaches. I'm in Bitly which I'm sure you are as well. - -11 -00:04:19,440 --> 00:04:20,570 -Wes Bos: Yeah Bitly - -12 -00:04:20,630 --> 00:04:24,480 -Scott Tolinski: discuss discusses a commenting service - -13 -00:04:24,660 --> 00:04:32,490 -Wes Bos: 500 pixels Adobe Dropbox imager, Kickstarter lead myfitnesspal path and - -14 -00:04:32,490 --> 00:04:56,430 -Scott Tolinski: as I say on Patreon Yeah, Patreon. This is one of the reasons when Patreon got hacked. I actually emailed them and said hey, can you delete my account from your service considering you're not securing your database or whatever? And they were like, No, we can't do that. I was like, What? Don't we don't delete accounts? Okay, they said they can't do it for tax reasons. I think that was a BS answer. Oh, - -15 -00:04:56,550 --> 00:06:13,320 -Wes Bos: yeah. Yeah, they have to like tie the purchase to a actual person because, yeah, whatever we should say like when a website gets hacked, usually what happens is that, like a database dump is taken or something like that, and they get access to your username. And usually in best case, your password is hashed, meaning that it's not if your password is dogs, it's not sitting in the database as dogs, although that does happen that's being called clear text. So anytime, email service will email you your password or like I know Bluehost does this, they ask for the last four characters of your password, which it's possible that they save that and but that's still not a good good process to do anyways, but they are hashed meaning that is very hard to unhashed them, or to generate a hash of words and match them. That is definitely possible, especially with probably the biggest hashing algorithm out there is MD five that's used, very popular in PHP world, specifically WordPress uses it. And if you use a common password, the MD five hash of a common word will always be the exact same hash. So you people are still able to reverse engineer those. - -16 -00:06:13,440 --> 00:06:47,970 -Scott Tolinski: What's really fascinating about Have I been poned is that it gives you quite a bit of information about the hacks that took place for each one. So you can get a good amount of information, whether or not it has been a hashed password, and what it was hashed with. All right, was it Bitly they gained access to 9.3 million email addresses, usernames and hash passwords using SSH, a one and a small number using B crypt. Did you ever use a service Apollo? It's not Apollo graph. QL. Because I saw Apollo on here. I was like holy cow did Apollo graph qL get hacked for some reason? And it's not? - -17 -00:06:48,270 --> 00:06:52,260 -Wes Bos: I never used it. But mine's in here as well. So what's up with that? - -18 -00:06:52,260 --> 00:07:07,260 -Scott Tolinski: Yeah, cuz mine is in here. And it says Apollo left a database containing billions of data points publicly exposed without a password. Okay, Apollo, who are you? And what were you thinking? - -19 -00:07:07,350 --> 00:09:18,360 -Wes Bos: This is that sales tool or process? So what they do is they basically, they basically scrape data and buy databases from people, like anytime I subscribe for a magazine, I put a funny middle name on there, and they see where that data trickles through and who's bought it spark? And that's, that's kind of what they do is they sell your data, which is these are awful companies. What's the security researcher here? Yes. So let's talk about let's talk about, like, how do you actually set a good password? And what tools should you be using? So regardless of what you do, you absolutely must have a unique password for every single website. And this is probably the one that gets absolutely everybody. If you reuse the same password on multiple websites, as soon as that password is found out on any of these websites, then that immediately bots will try those passwords on other popular websites. So yeah, Case in point, this happened to me, I was getting a little sloppy for my McDonald's password. And I had reuse the same password on McDonald's as I had used on some app that I had used years ago and don't know which one but obviously, it was breached at some point. And then what happened is someone went and bought $8 worth of McDonald's. And then about 10 minutes later, they went and bought $120 worth. And it was such a pain to get those charges reverted because it wasn't like credit card fraud. I couldn't call my credit card company saying like someone stole my card, because they hadn't, they had just got access to my McDonald's account, right. And they just went up and ran the ran the thing. So that's Case in point a place where you should never reuse it. It's not that your password is not guessable. It's not someone's not just trying to sit there guess it's that when it does get out, it's only an amount of time before your McDonald's and your Uber and your PayPal, all of those things are like people will test if these passwords work and then all sudden you're you're out of luck. Like it's it's such a huge pain to have to try to revert all of that so never reuse a password. - -20 -00:09:18,360 --> 00:10:22,790 -Scott Tolinski: And this isn't just like some nerds in his basement drawing one password at a time these are either complicated a robot robot yeah button that's doing it or farms if human beings trying various things. So I you know, I this is absolutely number one super big concern doing anything online. So again, generating a new password, how do you generate a password and I keep using the word generate a password here because you're most likely not going to want to just invent a password yourself. Because if you can remember that easily, chances are it's not a great password. Now, there's some exceptions to that. The whole sentence based password thing that's a good way we'll talk a little bit about that. in a second, but for the most part, I think it's the easiest to rely on a password generator, regardless of what it is right? If it's through the browser through a service of which we'll talk more about, but having a generated password, something that's not logical, not a sentence, not a dictionary word, not a dictionary word with some, you know, threes swapped - -21 -00:10:22,790 --> 00:10:27,150 -Wes Bos: out for Oh, exclamation mark in a one to the end. Oh, - -22 -00:10:27,390 --> 00:10:45,450 -Scott Tolinski: it doesn't do anything, right. Yeah, because they're there. If their service can check for, you know, password, they're going to be able to check with password with an ampersand or a add sign as an A. So that's not really a thing. I always reach for a generator that generates a nonsense password myself. - -23 -00:10:45,770 --> 00:12:57,750 -Wes Bos: Yeah, I do that as well. I'm going to talk about this little generation method I do. However, I don't use this method anymore. Since the password management, integration in iOS has gotten so good. So for for years and years, he had to like quit the app, go to the app, copy the password, come back, open the app, paste it in. And that was just like a bad workflow that I didn't like. So I use this new or not, I for years, I use this approach, which was, first thing you do is you make a sentence. So make a sentence, I love to eat pizza. That's the sentence, right? So that's your base password, then you go ahead and decide on casing of that. So do you want a camel case it Do you want to lowercase I love to eat and then uppercase pizza, just decide on that for how you're going to spell it. And then what you do is to in order to make that password unique, because you can't just use I love to eat pizza on every website, you have to make an algorithm for how you generate your password based on I use the domain name of the website. So one example is you could take the third letter of the domain name, or sorry, you could take the third letter of love to eat pizza and replace it with the fourth letter of the domain name. And then you could count the number of letters in the domain name and add that to the end. And that way you are every single website like it seems complicated, but say, Yeah, I have a system I love to eat pizza is my base password. And then I always know that the third letter is replaced with the fourth letter of the domain I'm trying to sign into. And then the number of characters in the domain name is just added on to the end or to the start or in the middle, or whatever it is. And then you can say, okay, knowing these two rules, you always have to remember those two rules, you can generate a unique password and remember unique password for for any single one. So I that worked forever. For me, it worked really, really well. I still use it on some things like Netflix that you have to share with family and whatnot. But I've pretty much entirely moved over to just jet random generated strings, which is I probably would say this is what everybody should be using these days. - -24 -00:12:57,960 --> 00:13:03,030 -Scott Tolinski: Yeah, totally great. Do you wonder I liked Android so much androids always had good integration with that kind of stuff. Especially - -25 -00:13:03,030 --> 00:13:05,490 -Wes Bos: It was awful on iOS for years. - -26 -00:13:05,580 --> 00:13:25,110 -Scott Tolinski: Yeah. And I always I still I really dislike the iOS keyboard. And like the Android keyboard, if you didn't like something like that, that was like sort of keyboard integration, somebody would just come out with a better keyboard, and then everyone would use that. So like the competition over like the iOS keyboards or just like skin versions of the iOS one. It's like not - -27 -00:13:25,170 --> 00:13:28,620 -Wes Bos: No, they're not. No, they're, they're totally so bad. - -28 -00:13:28,980 --> 00:13:32,820 -Scott Tolinski: Why are they also bad? Because the custom ones on Android are great. - -29 -00:13:33,150 --> 00:14:48,780 -Wes Bos: Oh, that's, that's a good question. They're not just skin versions, they are there. And you can tell that they're their own thing because they are not that good. Well, the one of the bunch, it's the worst one of the bunch. Okay, so I like the iOS. Anyways, rant, we do ranty iOS rant on another episode. So using a password manager, you go ahead and you sign up for this, you install it in your browser, you install it on your phone, and then every time that you sign into a website, or every time you sign up for a website, it'll try to add that password to your list of passwords. And then you have a master password that you can use to sign in to your whatever. So I personally use one password. I was on LastPass for years, and we talked about how awful the user experience is on LastPass. I would recommend to nobody, no matter how much money they spend on sponsoring youtubers don't use LastPass. It's awful. And I'm not saying that because like I don't like the company. I'm saying that because I've tried to get family members on last pass. And they say screw this. This is too hard. Doesn't work. Yeah, it doesn't work all the time. It's a common password. It's annoying. And the user experiences is so important when you're trying to get family members on board for this type of thing. - -30 -00:14:49,020 --> 00:15:37,590 -Scott Tolinski: Yeah, absolutely. Because it's already invasive enough right? To ask somebody to use something like this and in place of their you know, handwritten notes password or using the same password on every day. It's all right. Be invasive to their workflow. They're adding a step into whatever they're doing. So you got to make it as smooth and as easy as possible. And I again, likewise, I, Carney and I both used LastPass for a little while, and she always hated it. She never wanted to use it because of it. I hated it. And I knew I needed to use it. So I still did anyways. But once we move to one password, it definitely it's just so much nicer at the interface. Everything is just way easier to use. But there, there are certainly other good versions and other good applications as well. I just don't have the experience with some of these like dashed line. I haven't used it before. So I don't know, but people seem to really like it. - -31 -00:15:37,890 --> 00:16:30,600 -Wes Bos: Yeah, there's daschle MC is pretty popular and bit orden is a open source version of it. So if you want to host the the password database yourself, which I argue that's a very good way to do it. Because then you're not giving some random company your all your passwords. I should also say like one password is not like they don't just have a database full of all of your passwords in the second half, then you're screwed that what they do is they encrypt it based on your path, your master password. So if one password, it gets hacked, the person just gets encrypted passwords. They they don't get access. And that's the reason why if you forget your master password, nobody in all of land can help you. Because all of your passwords on their server are encrypted. And even one password can't unencrypt them. Unless they have some sort of like, triple lock door with a secret key. They might have that but who - -32 -00:16:30,600 --> 00:16:42,600 -Scott Tolinski: knows. For the I have a little note here it says For the love of God do not forget your master password. Because a Courtney has forgotten her master master password twice now on a lesson two very frustrating, - -33 -00:16:42,990 --> 00:16:44,130 -Unknown: because he's like, no, - -34 -00:16:44,460 --> 00:16:55,620 -Scott Tolinski: that's I shared all these passwords with she'll be like, what's the Amazon password? I'm like, I'm not reading this, this line of no generated text to you. So where's your one password? Yeah, I - -35 -00:16:56,340 --> 00:16:59,730 -Wes Bos: did that too. She lost it. And then she just stopped using one password altogether. - -36 -00:17:01,110 --> 00:17:01,950 -Unknown: Yeah. - -37 -00:17:03,180 --> 00:18:34,290 -Wes Bos: And like it's on us as developers to make this stuff as easy as possible. Because, you know, like, like, what do you do with your master password? Well, like, first of all, you can recover it, if you have a family member on the same account, like you can assign family members that will allow a reset, which is good. And then you can also like, I LastPass, I forgot mine once in a but luckily, I had the Chrome extension installed and it like verified it based on that, which is good as well. So just write it down, put it somewhere super safe. So you won't accidentally lose that. Because Yeah, it's it's not the end of the world, you can go through the process of resetting every single password that you have. Like, is not the end of the world. But it's just a pain. It's a pain. Yeah, totally. Other tips here. So one huge tip I have for people's turn off Chrome or Firefox built in password, remember, which is hard happens is Yeah, it's hard to do because it like gets in the way it like drops down in front of the one password. But also I see a lot of people relying on that. And then then then that's not like doesn't work on their phone. So like their passwords aren't remembered from that. And then like when they change your password, it updates in one of them, but not both of them. And then it's out of sync. And that's where a lot of this frustration with these password managers. If you have one single source of truth on all of your devices, turn on everything else off key chain all of this stuff, turn it all off, except for whatever Password Manager you're using. And life will be so much better. I guarantee it. - -38 -00:18:34,290 --> 00:18:54,750 -Scott Tolinski: Yeah, totally. And you know, okay, I should offer up a tip here. Let me pop up in Chrome, because it is a chrome like really, really wants you to use their their solution. Chrome's like, can you please use our password manager? Like, you know, so me pop up in my extension here real quick for one password. - -39 -00:18:55,140 --> 00:18:58,820 -Wes Bos: Yeah, I was gonna use like Google password because they have like their own - -40 -00:18:58,850 --> 00:19:00,660 -Scott Tolinski: thing. They have their own generator. Yeah, - -41 -00:19:01,100 --> 00:19:18,660 -Wes Bos: they don't have it. Like it doesn't work on Firefox. And it doesn't I don't think they have an app as far as I could see. So like it's just like not there. And also they don't have notes like Password Manager notes for me. Things that I want, like confidential, things like passport numbers, and expiry dates, all that stuff, credit cards, - -42 -00:19:18,660 --> 00:19:20,880 -Scott Tolinski: credit card numbers, - -43 -00:19:21,050 --> 00:19:24,900 -Wes Bos: anything anything sensitive, should you know adored in your password manager. - -44 -00:19:25,100 --> 00:19:53,130 -Scott Tolinski: And also you can group them you can organize them like we have ours grouped by entertainment, so that I can share the entire entertainment folder with Courtney rather than like having to share each one individually or whatever. Here's all of our, you know, YouTube, whatever logins, here's all of our shopping logins, here's all of our personal finance logins. And then I have my like level up tutorials, logins that I can share with the team members, people who are using this thing that aren't me, you know, I find it very, very valuable in those sort of ways. - -45 -00:19:53,400 --> 00:19:57,390 -Wes Bos: Absolutely. It's a little bit of work to get up and running. But while we're this - -46 -00:19:57,900 --> 00:20:11,130 -Scott Tolinski: an additional here's another little hot tip, if you will are using one password to take advantage of their watch our feature. This one might go sort of, you know, above the radar if you're not looking for it, or below the radar, I don't know, I'm not a radar technician - -47 -00:20:11,160 --> 00:20:11,970 -Wes Bos: under the radar - -48 -00:20:12,030 --> 00:20:48,860 -Scott Tolinski: under the radar. The watch tower feature is a feature that tells you which of your passwords have been included within a data breaches. It also tells you which of your passwords are reused on multiple sites. So it can take a look and it can say, Hey, dude, you're using the same password on these two sites. And you should probably do that you should probably change that. It's also a good tells you which ones are weak, which ones have been hacked, which ones are unsecured, which ones aren't using two FA that should be using to FA we're going to be talking a little bit more about to FA in just a second. So use the Watchtower, it's really really useful feature. - -49 -00:20:49,290 --> 00:21:30,000 -Wes Bos: Next up is turn on biometrics. So likely your phone or an or your computer has face ID Touch ID some sort of sensor blood, Id turn those on because typing your master password, your master password should be strong and typing it every single time you want to open that sucker up sucks. So if you can turn on fingerprint or face ID to get access to your passwords, that's just another like it has never been better for just regular people to use a password manager because of because of these things you very rarely ever have to actually type your password because of biometrics. - -50 -00:21:30,210 --> 00:22:04,860 -Scott Tolinski: Totally. Yeah, and again, any anything that gives that opportunity to do it because it's so much faster. So let's talk about two fa, which stands for two factor authentication, which means that you need it two factors to authenticate you into the site as in, you need more than just a password to get in, you need a password plus something that is a little bit more secure, right? And there's a whole bunch of different ways to do two fa, very of which have been this like six digit code that is a two FA code that sort of it changes however, was it every 30 seconds every, - -51 -00:22:04,920 --> 00:22:20,010 -Wes Bos: every 30 seconds, you get a new six digit code, which like I remember being like, seven years old, my dad had this little thing on this key chain, to VPN into his work. And I'm just like, oh, man, all these years later, I finally understand what that's for. Yeah, - -52 -00:22:20,010 --> 00:23:42,030 -Scott Tolinski: so the two FA is just such a really interesting thing. It makes you feel like a secret agent because you're getting this special code. So what happens is you'll go to log into a service, and it's gonna say, okay, that's cool, you are authenticated. But before we can let you in, before we know it's actually you, we need this six digit code that you need to enter. There's several services authy is probably the biggest one. Google Authenticator is also really big, I would recommend using something called authenticator, or plus, for various reasons. authenticator plus allows you to host everything locally, and back it up in your like Google Drive, or whatever. And oh, cool. Yeah, the reason why that's great is because if you lose access to your authenticator, it is a giant pain in the butt to get this reset this thing that is generating all of these codes. So authenticator plus is my pick, there's an android version, there's an iOS version. So both of you are covered. And you know, the coolest thing about f indicator plus for me, besides the fact that I can import and export and take these with me to various devices or backup somewhere is that they have I watch or whatever the Apple Watch is called, they have the Apple Watch app, so that I can get the codes on my on my watch. And I can just look on my, my wrist, hit it and then type it in, which is way better than looking at your phone or some other service. - -53 -00:23:42,450 --> 00:24:52,590 -Wes Bos: Yeah, so we should say like, the whole idea behind two factor authentication is that even if someone does get your password, when you log in, they will still ask you for this code. And generally, the codes live on your phone. And if they don't have physical access to your phone, then they they still can't log in, which is great. So I forever had been using I use authy, initially, and then over to Google Authenticator, because I think there's just some services that wouldn't do it. And then I actually, I dropped my phone in the lake, and it started acting up so I brought it into apple and they replaced it for me. And I was just driving home. Oh, no, later. I thought so all of my gods. So the process of getting back into your account when you have don't have the codes, it's very hard because you have to like submit your driver's license or some some sort of proof every every single one has a different way to get back in and it probably took me two weeks to get back into to every single one. It takes time. authy authy is like a like a like an actual one and a half week waiting period. They - -54 -00:24:52,590 --> 00:24:54,120 -Scott Tolinski: they really make it - -55 -00:24:54,150 --> 00:26:55,230 -Wes Bos: Yeah, it's intentional because they don't want somebody just jacking it from you or like that. So I actually recently probably in the last month, I switched over from Google Authenticator over to using one password for two factor authentication. And for the longest time, I'm like, that doesn't make sense. Because the whole idea behind two factor authentication is something you know your password and something you have. It's Yep, your like your phone, right? And you have a code on there. And if you put them in the same place, isn't that kind of defeating the purpose, like, if somebody gets into your, your one password, then they'll have both things that they need to get into your account. So for the longest time, I was like, that's dumb. That's the silliest thing ever. And then I finally like looked into it, I was like, why didn't Why are people doing this. And then I realized that you can't set up a, you can't log into one password, you can't set it up on a phone, you can't log into it with an app without having an additional sign in code. So and that sign in code is generated from another app that has one password on it that is logged in, or from somebody in your family who can also get that secure signing code. So one, password itself is two factor, meaning you need your master password, and you need a code to set it up on a device. So meaning that if even if somebody got my one password password, they wouldn't be able to log in on a device unless they had that secondary code to login. So with that, under thing, I said, Okay, I'm gonna start moving over to using one password for this because you don't have to whip out your phone or look at your watch every single time that you want to code, you can just open one password, and it will give you the code, you can copy and paste, or in most cases, it auto fills the code for you from thing, which is amazing. So I had resisted this forever. I was wrong. And it's the best workflow I've found so far for this type of thing. I wonder - -56 -00:26:55,230 --> 00:26:59,010 -Scott Tolinski: if I can easily migrate? I don't know. Seems Uh, - -57 -00:26:59,160 --> 00:27:18,720 -Wes Bos: yeah, I don't think so unless you have backed up your initial QR code. So if that's the case, then you have to turn off two factor. This is what you have to turn off on every service. So what I'm doing is every time I log into a website, I move it over and then delete it from Google Authenticator. - -58 -00:27:18,840 --> 00:27:37,320 -Scott Tolinski: Yeah, yeah, that's cool. Yeah, I like authenticator. Plus, maybe keep some of these things in separate little islands. But I totally see where you're coming from. That sounds like a really nice little workflow. And especially again, if you're trying to make security easy, that is the goal, right, then keeping everything within one password is definitely the easiest way to go here. - -59 -00:27:37,860 --> 00:28:21,330 -Wes Bos: Um, what else is when you set up two factor authentication, you'll almost always get backup codes. And it's anywhere from five to 20 different codes, which are one time sort of like one time use passwords. So if you don't have your phone on, you already can't get access to it, or you totally lost it. Your backup codes are what is gonna save you. And you can print those out. I don't know if it's a good idea to put the backup codes in your one password. I think it would be okay, because of the reasons we just talked about. Yeah. And you just print them out, put them somewhere safe. And if something ever happens, then you have to go and reach it for those backup codes. And I've had to use mine once or twice before. To get it get back into my accounts. - -60 -00:28:21,780 --> 00:28:22,410 -Unknown: Interesting. - -61 -00:28:22,800 --> 00:28:50,700 -Wes Bos: Other people say is that you can just back up the QR code. So the QR code that you scan to set up two factor authentication, that code has a number in it, which will allow you to generate these things. And if that if you save that QR code, or you save the number that's in the QR code, you can always re add these two other things. So if you were to lose everything, but you still have that QR code printed on paper, you could just open another authenticator app at it, and it would give you the code that you need. Hmm. - -62 -00:28:51,180 --> 00:29:27,510 -Scott Tolinski: Yes, man. I don't know if I've taken proper precautions for if my things go by, but I has done a pretty good job. I guess the fact that I can export my What's it called? It has, like all you only have to remember our master password. Because when you export it, it gives you like a, an encryption password. And then when you import, you have to type in that encryption password. As long as you have that encryption password. You're good with authenticator plus. But yeah, I should have done a better job of remembering these backup codes. Maybe I'm going to start turning it off on some services, and then moving everything over to one password. I think you've convinced me, - -63 -00:29:27,780 --> 00:29:42,240 -Wes Bos: it's like kind of scary. And that's the reason why a lot of people don't do it. Because they say like, well, I don't want to I don't want to be locked out of my account. But let me tell you please turn on two factor authentication for every service that offers it. - -64 -00:29:42,330 --> 00:29:54,480 -Scott Tolinski: Yeah, definitely. Yeah, if it offers it, and some places will even give you a discount. MailChimp gives you a discount for using it. So that's actually a good reason that great yourself. Yeah, right. It's not a big discount. But - -65 -00:29:54,720 --> 00:32:22,680 -Wes Bos: you can also do text message two factor authentication. So you sign in and it will text you a code recommend not doing this. Because some places, you only can do that. Yeah, a lot of places will only allow you to do it, which I don't like. I think the reason they do that is because of the support overhead. When that happens when someone forgets their password, then you have to like assign someone to spend 20 minutes working with this person to get back into their account. Like I have a slack, like my slack room, like a couple times a week, people are lost my two factor authenticator for slack and you reset it, and like is the slack admin need to go in and turn it off for their account? And I'm like, Oh, this is such a pain, right? Like, imagine this being on a larger scale. So some text messages will do the reason why I say don't do it is because there's this thing called sim jacking, which somebody and this happened to my sister a couple months ago, somebody will go to your your cell phone provider and say, Hey, I am moving from what are the att and virgin those are in the States, I'll use those. So I'm moving from at&t to virgin, and you have to port my number. So they sign up and they pretend to be you. And then they just port your number. And now all sudden, some some malicious actor has a new phone with your phone number. And then they can just request like a password reset token or a two factor authenticator token. And it just texts it to them. And then they have access to your entire account, my sister had it, they drain her entire paypal account. And then they they wouldn't give her her phone number back for like seven days because they like trust nobody. In this case, she had, like PayPal was trying to tell her Tough luck. They took like three or $4,000 out of her PayPal. She is a nightmare overall. And I hear these stories all the time. So because your phone provider is a weak point, I'd recommend not using the text message codes where possible. And another step you can take is at least with my own provider, which is Fido in Canada, you can lock transfer, meaning that I had a call them I said lock transfer. So if I ever, if I ever want to move to another provider, I have to call them up. They took a recording of my voice which Jeez, I guess they use voice recognition. And then I have to I think it takes like a week to unlock it or something like that. What did you always you're saying was - -66 -00:32:22,680 --> 00:32:24,060 -Scott Tolinski: that Hey, everyone. - -67 -00:32:24,300 --> 00:33:04,380 -Wes Bos: Yeah, everybody. Yeah. Let me allow me just to say what I said. Right? That No, they they just asked me they just asked me a bunch of questions about like what I had for lunch. And I think that it someone could probably take words from this podcast and string together, I would like to change my cell phone provider, or just seeing them that I'm smoking meats, smoking meat, smoking meats, barbecue sauce. Anyways, just call your provider and ask them like, what can I do to stop getting some jacked? Because these providers know that this is a problem and they are starting to implement stuff, at least in Canada, they are - -68 -00:33:04,830 --> 00:33:17,790 -Scott Tolinski: totally cool. And if you're interested in a little bit of extra listening on this type of thing, please I implore you to listen to this episode of the shop talk show. I don't know if you've listened to this one West, but it's from 2014. - -69 -00:33:18,110 --> 00:33:21,180 -Wes Bos: This is where Chris coiour got his passport forged. Yes, - -70 -00:33:21,180 --> 00:33:38,250 -Scott Tolinski: Chris Carter got hacked. And then he interviewed the hacker on the show. It is one of the most interesting podcast episodes I've ever listened to. I you know, it's still it since 2014. It is set with me. So go ahead and listen to that, because it is very, very fascinating. - -71 -00:33:38,820 --> 00:33:55,260 -Wes Bos: Awesome. So please send this podcast to family members, anyone that needs to get better password hygiene. Please figure this out. Now before you get hacked before your PayPal gets drained, because it's a nightmare. Trying to get this stuff back. So take precautions now. Wash your hands. - -72 -00:33:55,500 --> 00:34:18,510 -Scott Tolinski: Yeah, yes. All right. I think a good way to get them to wake up to some of this is to just have them enter their email and have I been poned. So and then this website, say enter your email here. Yeah. And see if you've been hacked because that can be a real eye opener for a lot of people to see that and then just see Holy cow. People have access to these things of mine. So just a just a heads up. They're - -73 -00:34:19,110 --> 00:34:23,340 -Wes Bos: awesome. All right. Thanks for tuning in. We'll catch you on Wednesday. Please - -74 -00:34:26,190 --> 00:34:35,940 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax236.srt b/transcripts/Syntax236.srt deleted file mode 100644 index 0fa9762c1..000000000 --- a/transcripts/Syntax236.srt +++ /dev/null @@ -1,520 +0,0 @@ -1 -00:00:01,319 --> 00:00:06,120 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there. - -2 -00:00:06,149 --> 00:00:11,400 -strap yourself in and get ready to live ski and Wes Bos. Oh, welcome - -3 -00:00:11,400 --> 00:00:53,729 -Wes Bos: to syntaxes to the podcast with the tastiest web development treats out there. today. We've got a guest, someone that knows a lot more than us. We have Dr. Courtney kolinsky. On the show. She's gonna be talking to us about mental health and web development. Just kind of a interesting time right now with the Coronavirus going around. And I think a lot of people are hurting. So I thought we it's a great idea. Scott said like, Hey, what do you think about having Courtney on the show? I was like, perfect timing. I think this is absolutely perfect. So today we're sponsored by Sanity. And Freshbooks. Sanity is a structure content, CMS freshbooks is cloud accounting. We'll talk about them partway through the episode. But welcome, folks. - -4 -00:00:53,939 --> 00:00:55,560 -Dr. Courtney Tolinski: Hi, I'm happy to be here. - -5 -00:00:55,829 --> 00:00:56,369 -Unknown: Yeah, - -6 -00:00:56,399 --> 00:01:02,369 -Scott Tolinski: happy to have you here. We're, we're also a cooped up in the house. This is the perfect opportunity. - -7 -00:01:03,119 --> 00:01:04,200 -Dr. Courtney Tolinski: Right? Yeah. - -8 -00:01:04,230 --> 00:01:14,790 -Wes Bos: Can I just say what I'm experiencing right now is Scott and Courtney are sharing this like set of like Android earbuds that they got from a gumball machine? And then like I say, - -9 -00:01:17,670 --> 00:01:27,240 -Scott Tolinski: it's like we're doing a duet. Yeah. Yeah, we're both speaking in the same mic. This is this is a budget budget, a budget program we got going on. That's what's going on. - -10 -00:01:29,610 --> 00:01:33,750 -Wes Bos: So I'll let you can sort of kick it off there, Scott and get going. - -11 -00:01:34,050 --> 00:01:46,710 -Scott Tolinski: So with us on the show today is my lovely wife, Dr. Courtney kolinsky. She is a doctor of educational psychology. I don't know Do you want to give a little brief introduction about who you are and what you do? - -12 -00:01:47,310 --> 00:02:19,050 -Dr. Courtney Tolinski: Sure. So I am a doctor of educational and clinical psychology. I work primarily with children and adolescents. But I love to work with adults as well. Currently, I am the director of a learning Evaluation Center here in Colorado. And I do a lot of diagnostic evaluations for things like ADHD, autism, learning disabilities and mood disorders. I've also done a lot of therapy as well with children and adults. So thank you so much for having me. Awesome. - -13 -00:02:19,080 --> 00:03:07,080 -Scott Tolinski: Well, let's get started. So I asked a question on the the Twitter a couple of weeks ago, just about what sort of questions people might have for Courtney. And I, what I did is I broke these up into several different sections. And I figured we could talk about each of these just sort of generally, and then, you know, address some things directly. We have, we're going to be talking a little bit about depression, anxiety, focus on job performance, motivation, remote work stress, and we'll just have a conversation, it's going to be pretty relaxed. And, and honestly, I know Courtney probably would want this disclaimer, and I don't want to speak for her. But despite the fact that she is a doctor of psychology, if you have anything directly with yourself, you should probably reach out to someone rather than take advice directly from this podcast. Is that a fair to say, Courtney? - -14 -00:03:07,350 --> 00:03:19,590 -Dr. Courtney Tolinski: Yeah, it's important to always, of course, Speak to your doctor, or therapist if you're having serious issues. But hopefully, this general advice that I'm able to give will be helpful to a lot of people. - -15 -00:03:19,620 --> 00:04:25,880 -Scott Tolinski: Yeah, totally. So the first little bit, we wanted to talk about depression. So I wanted to read some some messages anonymously that people had sent me, just so we can get like, you know, hopefully, if you're feeling this way that you can have a little bit of, I don't know, what's the word I'm looking for? togetherness with other people who are potentially going through the same thing. So some people say, honestly, just explaining depression would be great too many times I've heard but you don't look sad. And that is really something that depressed people hear all the time. You don't look sad, you know, you aren't like, why don't you just feel better kind of thing. Another one would be as someone who struggles with depression, what are some things that I can do to rekindle the things that I enjoy, like developing and hobbies, this would be a great benefit for me for learning more dev related things to doing outside work. Another my depression is due to some things in my personal life, and I'm two years into it. Coding has brought me a little life back and the only thing I have to do. So do you want to talk a little bit about the basics of depression and maybe what it is and how people experience it? - -16 -00:04:26,390 --> 00:06:36,180 -Dr. Courtney Tolinski: Yeah, so I mean, depression is more than just feeling sad, right? It's, it's certainly a sad aspect. But it's this sense of hopelessness, that things will not get better, things are awful, and they're not going to get better. And on top of that, there's a loss of interest in the things that you like to do. Right. So if you enjoy coding, or you're a golfer, whatever that hobby is, you all of a sudden find yourself having a really hard time getting out of bed, just kind of taking care of yourself and getting out to do those things that you used to enjoy There's a host of different other like symptoms as we refer to them that go along with it. So sometimes just being extremely irritable, can be like gaining a lot of weight or losing a lot of weight, just a general sense of fatigue and tiredness. So there's a lot of different factors that can look into depression. But it's not always just feeling sad, right? It's feeling sad, and then it affecting your life to the point where you're not able to function, whether that's going to work, or going out socially with your friends, or just, you know, engaging in your relationships in general. So that's, that's kind of a good overview of depression. And just like anything, it's it's a spectrum, right? So sometimes people who are depressed, can be outwardly, the, like happiest people you've ever met. Like, I've had some clients that just like radiate sunshine, you know, from the outside. And internally, they're like, you know, in a sense, dying inside, right, but they don't show that to other people. Because a lot of times they've heard the message of Oh, you you need to be happy, right? Or it's not okay to feel sad. So instead, they internalize that they don't express it, and the depression kind of eats away at them. And then there are other people who do outwardly look really sad and look really tired. And those people are, you know, easier to treat from my perspective, but, but it can look different. And it's, I think, important to not assume that just because somebody looks happy, they're not. Oh, yes, yeah. - -17 -00:06:36,839 --> 00:06:58,200 -Scott Tolinski: So do you have any recommendations specifically for people who are having a hard time enjoying the things that they are like that they used to love to do specifically coding? Or, or even outside of coding hobbies? Do you have any general advice for people who depression is getting in the way of the things they enjoy in life? - -18 -00:06:58,799 --> 00:08:46,890 -Dr. Courtney Tolinski: Yeah, I, the biggest thing that I always encourage, like my clients to do would be self care, right. And so a lot of times, they'll have them make a list of all the different things that they enjoy doing to take care of themselves, just to help get them out of bed, if if they're that depressed, right, it's a range, of course. So some people are like, functionally depressed, where they're able to go to work, able to engage in, you know, their normal day to day life, but internally, they're not getting the, like, pleasure that they used to out of it. But self care is really important. Taking care of yourself, making sure you're getting dressed, keeping up on those haircuts, right shaving or, you know, whatever it is for, for dudes, for girls, that could be like putting on makeup or you know, whatever it is that makes you feel your best. doing those things are really important. You know, and then I think just encouraging other people to help reach out to you, you know, asking your friends, letting them know and being vulnerable and saying, Hey, you know, I'm having a difficult time, it would be really helpful, if you like, checked in on me once in a while, if it's that extreme, or, you know, if you're able to, like functionally interact in your day to day then scheduling, so making, putting in the calendar as like, like an event or an appointment that you would need to make. So things like if you enjoy golfing, right putting that in the calendar every Sunday, I'm going to go golfing at 11. Right and and keeping that appointment as if it were a doctor's appointment, really treating that very seriously, just to help keep them with those hobbies. And you know, you can scale back if it's too much to do your normal, five, six hobbies, whatever you do, scale back to two or three, but figuring out what's important to you, and then scheduling it and prioritizing those things. - -19 -00:08:47,069 --> 00:09:50,250 -Scott Tolinski: Yeah, yeah, I don't know, I don't think we've ever gotten to this on the show. But I've been on and off antidepressants and spiked concussion. And I've tried several different ones. And, you know, over the course of time, it's funny that you mentioned the you know, weight gain, weight loss, but some of the antidepressants made me gain like a lot of weight. Not to mention inside that concussion, I couldn't work out I gained like, like 1520 pounds. And that almost fueled everything more because you just feel worse about yourself. And I think that tip about doing your self care things is really super important for me, especially, I know, I'm not very good at it. But when I am feeling those feelings are you know, that sort of flow of life, just getting up and doing my hair shaving whatever, goes a tremendous distance that like you don't want to do it and you don't feel like it's going to make a difference. It sounds dumb. It seems like oh, this isn't gonna do anything. And it worked so well for me. You just you feel a little bit better about yourself and just taking care of yourself in those ways makes it a big deal. So I think the next one we wanted to talk about - -20 -00:09:50,399 --> 00:10:15,020 -Wes Bos: Wait, hold on. I have one quick question. Yeah, well, the doctor is in. So like, let's say I've got a friend who is suffering from depression you say like Go out and talk to them like that. What do you say to somebody that that has depression, right? Like, that sucks or woof? Like, that's obviously not that way you should say, but like, I always find it a little bit weird. Like, I'm like, oh, like, what should I say? How should I dance around it? Should I come on? - -21 -00:10:15,049 --> 00:10:24,870 -Dr. Courtney Tolinski: Yeah. Oh, do you run that you like know which of your friends has depression? Or is it just like a general sense that maybe there's something going on? - -22 -00:10:24,870 --> 00:10:36,120 -Wes Bos: I would say that there's a couple of friends who have come out and told me, but I would assume that there's probably more of my friends that don't even don't even tell me. - -23 -00:10:36,480 --> 00:11:15,929 -Dr. Courtney Tolinski: Yeah, yeah. So I think just generally checking in and not putting any assumptions on like, hey, how's that depression going? Right? Like, nobody wants to be reminded of it necessarily, but checking in and saying, like, Hey, man, how's it going? You know, have you been just having like, a general question, you know, and seeing how they respond, if they're like, Oh, you know, things are great things are good, then, you know, don't assume anything, just take them at what they're saying. and invite them, you know, make it a point to reach out to them more, check in with them and invite them to things and not assume that they will take you up on it necessarily. - -24 -00:11:16,230 --> 00:11:35,789 -Wes Bos: So good point. Yeah, my one buddy of mine that said, like, Hey, you just want to go for a run, or you want to go down the stairs, like in our city, this is massive stairs that go up the mountain. And like, that's just okay. Just Just trying to like, think of like, how do you proactively invite somebody out to do something? And like, also, I know, exercises is helpful as well. - -25 -00:11:36,360 --> 00:12:22,020 -Dr. Courtney Tolinski: Right? Yeah. And yeah, that, of course, goes without saying a great diet, exercise, sleep. I mean, those things are so valuable in terms of taking care of yourself just on a day to day but especially for somebody who's depressed. But yeah, checking in with your friends, if you feel like something's going on, or something's not right, just having like that general leading question of, Hey, how's it going? I think can you know, speak volumes, a lot of people, they're, they're afraid to reach out. They don't want to burden people with their, their sadness, right? Or their depression. Yeah. But if you extend that interest in genuinely show that you care, then I think that that goes a long way. And people will feel like they can trust you, and that they can be more vulnerable with you. - -26 -00:12:22,649 --> 00:13:43,320 -Scott Tolinski: Totally. So let's get into the anxiety side of things, because that's a big part of this as well. And especially right now, when everybody is sort of on edge and anxious, in general with the current state of the world. So I will talk a little bit about some of that stuff directly. But I think a lot of the concerns people have with anxiety follows around the idea of maybe like inadequacy or imposter syndrome, or those kind of things. So when I asked this question, I got the question about talking about imposter syndrome just about 1000 times. So I wrote imposter syndrome times 1000 here, because that's how many responses I got about it. And it's funny, because no matter how many times you talk about imposter syndrome, it seems like that's such a big topic. I know. I myself and many other people, you know, often deal with these issues. People often are asking, How do I deal with increased anxiety during the current situation? How do I avoid anxiety and feel useless when working on products that don't appeal to you? I wanted to ask the doctor, why do I feel that I have to work on 1000 projects that seem to never finish? It's anxiety inducing. I'm under depression medication. Sometimes I feel scared that I am so slow. It doesn't feel accomplished enough. Like people working at thing. Do you know what Fang is? - -27 -00:13:43,440 --> 00:13:49,470 -Wes Bos: Yeah, Facebook, apple, Netflix and Google go. Okay, - -28 -00:13:49,470 --> 00:14:12,450 -Scott Tolinski: etc. and being an S ee software engineer. Yeah, how to deal with assists, how to deal with anxiety caused by today's event. So it seems like the overarching message is that one people have imposter syndrome. They feel inadequate. They feel anxious about the amount of workload they have, and they're anxious about the current situation. I don't know. Do you want to give some generalized stuff? And then maybe we can talk about some advice for those topics? - -29 -00:14:12,870 --> 00:14:19,230 -Dr. Courtney Tolinski: Yeah, well, I mean, I guess first Have either of you experienced imposter syndrome in your career? - -30 -00:14:19,770 --> 00:14:20,669 -Scott Tolinski: Absolutely. - -31 -00:14:20,820 --> 00:14:21,870 -Unknown: Yeah. - -32 -00:14:21,870 --> 00:14:23,909 -Dr. Courtney Tolinski: So tell us about it. What is that like for you? - -33 -00:14:24,419 --> 00:15:42,049 -Scott Tolinski: So for me, you know, I remember getting my first dev job. My my manager and boss at the time Ben shaft. He hired me when I really didn't know what I was doing. Like I was hacking together WordPress templates and stuff. And so then all of a sudden, I got hired for my first dev job. And it was building Drupal sites. I'd never seen Drupal. I'd never really written any PHP, considering I was just like modifying CSS and HTML within WordPress templates. And all of a sudden, I'm handed a client. Not to mention he was actually at a conference the first week of my job. So I was like, oh, here's your client. They're Drupal six site or whatever, and you don't know what you're doing. You don't know any of the tools. Your boss isn't there. You know, like, what do you do? And I just remember feeling like, I am going to get fired from this job. I don't I'm not I do not know what I'm doing here. And sure enough, you know, the men was amazing. He was a great teacher, a great mentor. He didn't expect me to know those things. He taught me so much. And I grew into the role and eventually ended up after he left getting that senior position that he had, and then moving on from there. But there's just about every single new job I took, except for maybe one or two, I felt like the job was way above my skill level. And it was scary. - -34 -00:15:42,090 --> 00:15:51,929 -Dr. Courtney Tolinski: Yeah. Yeah. Well, so in that time, when he wasn't there, and you were kind of holding the reins yourself, what did you do to talk yourself through it? - -35 -00:15:52,500 --> 00:16:25,110 -Scott Tolinski: Uh, yeah, I just did what was asked of me, and tried to do my best and ask questions wherever possible, you know, via email, or chat, or whatever. I had never met him at that point besides on phone. So we didn't have like, you know, the kind of rapport we do now as friends. So I just, I just didn't, I did my best to complete my assignments to the best of my ability and, like, not mess things up. But I guess they asked a lot of questions would have been the thing I did. First and foremost, yes. - -36 -00:16:25,110 --> 00:16:35,850 -Dr. Courtney Tolinski: Ask a lot of questions and, and really try your best and hold that confidence in yourself. Yeah, yeah. Okay. Okay. Yeah, yeah. What about us? Have you ever gone through that? - -37 -00:16:35,970 --> 00:17:57,830 -Wes Bos: Yeah, um, not a whole lot. I've certainly been nervous in lots of situations where I feel out of my, out of where I should be. I'm specifically the big one was when I like, eight years ago, when I went to interview at Google. And I, even just when they email me, they're like, Hey, you want to work at Google is like me? Yeah. I, I started, like, I was certainly nervous. But I don't think I had imposter syndrome, because I knew, like, if I'm not a good fit, if I'm not good enough, they'll say no. And they did. And, and that was fine. And my wife always tells me I'm unapologetically confident. Meaning that like, my confidence levels, probably in a lot of things, basically, I'm just like, I don't know, we'll figure it out. or right. These are just regular people walking around. These are regular people working these jobs, certainly they've learned over time, and I could probably do that as well. So it just knowing that like, the worst that could happen is that you won't get the job. Or you'll get can, I guess, if you do get a job in a place where you feel out of your bounds, that that can be a big, sort of a scary thing for people. Right. But if that's the case, I know that like just surround yourself with people that are a bit of a support network, right? Certainly friends and communities that that can help you out in those situations that you know, you eventually will hit. - -38 -00:17:58,469 --> 00:19:42,560 -Dr. Courtney Tolinski: Yeah, yeah. Well, and I'm wondering, I think there's a big difference between imposter syndrome and just maybe like low self confidence. I wanted to get your thoughts on that, especially in your field. Because so imposter syndrome is the idea, right? That you you have the skills, you're highly qualified for this job. But you feel that you didn't deserve it for some reason. And you externalize, like your success to outside factors. So it was luck. I just got lucky, right, that I got this job, or I fooled them somehow. Right. I tricked them into thinking that I could handle this job, right. And they'll find out eventually, that I'm a fraud. Right. So that's like the crux of what imposter syndrome is. And the reason that it's so powerful is because people can't talk about it. Right? They feel like, Oh, well, I can't tell people because then they're gonna find out that I'm a fraud. Yeah, jig is up, right? So they're holding it in. Yeah, exactly. Right, the jig is up. They're holding it in and it eats away at them, because they're not able to talk about it to anyone, and find out that other people feel the same way. Right. So there's that sort of imposter syndrome. But I also think that there's just like, maybe a social comparison or like a low self esteem and feeling like, I am really good. Like you're saying with Google, right? I'm a great developer, but maybe I'm just not the right fit for them. Right. But But you could take that the other way and say, oh, like, why didn't I get that job? You know, everyone's just so much better than me. I'm not as good as everybody else. Right. And that's different than imposter syndrome. I think that's just like a low self confidence or low self esteem. - -39 -00:19:42,779 --> 00:20:38,490 -Wes Bos: Yeah, I think I, I definitely see that. Yeah, teaching a bootcamp for many years. I see that a lot. And I think people chalk that up to imposter syndrome, because it has a cool name. Yeah, but it definitely is. I think in a lot of cases. It is just low confidence in your skill set. In whatever it is because you see that imposter syndrome just disappear. Once they're in it for a couple weeks ago, this is not as scary as I thought it would be and right, just anxiety or or being a little bit afraid that you're not as confident to go into situations is probably so I don't know what to tell people how to get around that, like I have that with my my kids as well, just when we encounter situations where they're, they're scared, or they they don't think they can do something like Alex is trying to learn how to play hockey right now. And she gets frustrated, really easy. And yeah, we just have sort of talk her through and the you know what, you can get better you get really good at this, - -40 -00:20:38,520 --> 00:20:39,120 -Unknown: right? - -41 -00:20:39,120 --> 00:20:44,330 -Wes Bos: I don't I don't know how, like, how would you tell that to a developer? Who doesn't think they're good enough? - -42 -00:20:44,810 --> 00:21:10,580 -Dr. Courtney Tolinski: Right? Well, we I mean, I'm, I didn't really get to speak about my background at all. I'm a child and adolescent psychologist, right. So that's predominantly my field is educational and clinical psychology. I've worked with a lot of adults, but I really enjoy working with children. And that's my expertise. And so one of the things that we do with kids, and it's kind of like this new movement in education, just to talk about growth mindset. Are you familiar with that? - -43 -00:21:10,650 --> 00:21:11,250 -Wes Bos: No? - -44 -00:21:11,250 --> 00:21:11,850 -Dr. Courtney Tolinski: No? Okay - -45 -00:21:11,850 --> 00:21:12,540 -Unknown: about it. - -46 -00:21:12,660 --> 00:22:44,490 -Dr. Courtney Tolinski: Yeah, it's the idea, right, that our brain is a muscle, right? Is it? It's actually a muscle? Well, that's the term that we use, I don't know if it's an organ or muscle brain in Oregon. Okay, well, we refer to it as a muscle, right? In the sense that you can develop your brain, right, your brain is constantly changing. And we talk about neuroplasticity, and how our brain is not like set in stone, as we once thought it was right that we can constantly change and evolve. And that those like synaptic connections that are forming in our brain are able to develop even into like our our late adulthood. And so there's the idea of growth mindset where, you know, maybe you're not able to do something right now. But we use the term like, I haven't done it yet. Right? So that's with little kids, right? So I haven't done this yet, or I haven't figured this out quite yet. And that that word yet is really powerful, especially with kids. But I think that adults, that could be really powerful for as well, just the idea of it's not like this finite black and white thing. Well, they're really great. And I'm not right, there's there's a lot of gray in there. And when you get into that mindset, that's called a cognitive distortion. Right? Well, we're, you're assuming something. And there's there's a whole slew of cognitive distortions, I don't need to go through them necessarily. But it's the idea of just being flexible with yourself and knowing that I have a lot of these foundational skills. And it's okay, if I don't know everything, right. There's always room for practice and room for development within my skill set. - -47 -00:22:44,880 --> 00:23:23,160 -Wes Bos: I see that a lot with people, developers who are coming from HTML and CSS, and moving more into complicated logic in JavaScript. Yeah, we see that a lot. Because people bring this, I'm not good at math from being a kid, a lie that they sort of project that out onto their entire career. Like, I could never learn that because that's kind of like math. That's right and complicated for someone like me. And like, honestly, I wasn't good at math. But I figured it all out through over the years. And I think that's awesome. Like, you're not good at JavaScript yet. But you certainly can get better. - -48 -00:23:23,550 --> 00:24:14,640 -Dr. Courtney Tolinski: Yeah, exactly. And I mean, we all bring different skills to the table, right. So if you're struggling with imposter syndrome, I think one of the things that's helpful is just writing down a list of your accomplishments and the things that you're really proud of what you bring to the table uniquely, that maybe other people don't, right are the things that you've accomplished, that you can refer back to, because it's really easy to forget all those things in the moment and to focus on the thing that you maybe aren't as good at as somebody else. But when you go back and look at your accomplishments, it puts it into perspective to say like, Oh, I really am skilled at so many other things. But maybe this one thing is something that, you know, I need more development on, you know, that I'm not quite good at. So I think that that's really helpful having that that list of strengths. What would you say? What are some of your tips for imposter syndrome? Ah, - -49 -00:24:14,640 --> 00:25:46,830 -Scott Tolinski: I think as a developer, it's easy to feel inadequate because of just how many people seem to be like superstar, like excellent developers. But there's so many things in there's just an endless amount of things to learn in this industry, right? You're never going to learn it all. And you're never going to have every specialty and if it looks like somebody has every specialty and every skill out there, they know everything. No, every single person has a weakness in their dev game. Every single developer. Nobody knows Ruby, Python, JavaScript, wasm everything right and there'll be knows all of the different slang words. So if you feel like you don't know enough, chances are, you know, just as much as a huge percentage of other developers who are doing very excellent work every single day. Not only that, but you are very ahead of the game, if you're listening to this podcast, or if you're watching YouTube tutorials, or you're even cognizant of the fact that you don't know things, then you are ahead of the game, you are just a better developer than you give yourself credit for. So I guess that's my recommendation. And that's what I reach to is that if I'm feeling inadequate in my skills, I just think about all the cool stuff I can build. Even if it's just getting, you know, the color green on the screen, just a green background or something, it's still cool that you're able to produce a website at all right? I think that's just like, I don't know, that's a big message to me. Is this the stuff that we do? We're producing things, we're creating things that even if it's basic, whatever, it's still awesome that we can do it. - -50 -00:25:47,370 --> 00:26:42,090 -Dr. Courtney Tolinski: Right? Well, and that's the reason why I asked you to if you have struggled with imposter syndrome, because it's important to realize that you're not alone. Right? If you feel that way. And again, circling back to what we were saying, imposter syndrome is that idea of I can't talk about it, because then other people will find out where the reveal will be, will be there. So hearing that you too, have struggled with it. No, you can assume that a lot of really great developers are struggling with this same sense of anxiety and feeling like, you know, I'm not good enough, right. So it's important to understand that that everybody feels that way. And what it shows is that there's a strong sense of like high achievement there, right. And that's something that that you should really be proud of, because people who are not high achievers are not going to feel that way necessarily. And that says a lot about yourself as a as an individual and a developer. - -51 -00:26:42,900 --> 00:27:05,610 -Scott Tolinski: So let's take a quick break to talk about one of our sponsors, for this episode is sanity@sanity.io. And we did not line this up first, and they need to be on the mental health, podcast on purpose or anything. So don't think we're doing that. But with more about Sanity images, which is a neat feature from Sanity as well as - -52 -00:27:05,880 --> 00:29:09,630 -Wes Bos: Yeah, so we talk about Sanity, their headless CMS structure content, CMS it before. And one thing I want to spotlight right now is everything around handling images inside of Sanity. So you know that if you are using images on your website, you probably need to resize them, do some transformation to them, put them on a CDN so that they are fast all over the world, because that's probably one of the largest pieces of data download on your website. So Sanity has an entire pipeline for working with your images. And it's pretty cool, because you can take an image, put a hotspot on it. So maybe a hotspot might be someone's face or product. And then depending on how you crop your image, whether it's rectangle, or square, or trap a zoid, or whatever, Sanity, we'll keep that hotspot sort of in focus, so that as you create different sizes of your images, it's not always going to be cut off. And that's super important. Another kind of cool thing is that they have a package that you can npm install called Sanity image URL. And you can flip and resize and invert images right on the fly. So you might import like a large image for like a person or an avatar or something like that. But then you need to resize it and compress it and whatnot. And the JavaScript library, you can just sort of like the example they have is just Image Source equals and then in react, you can pass the the the original URL to this library and then call that with that URL dot flip dot invert. It's pretty cool. So not only is Sanity really good at just being a headless CMS, but they've got that whole second thing, which is like what do you do about images in this case done for you. So check it out sanity.io forward slash syntax that's going to get you double the free tier. Thanks so much to Sanity for sponsoring. - -53 -00:29:10,590 --> 00:29:53,970 -Scott Tolinski: Thank you. So the next spa we wanted to talk about would be a focus on job performance. We did get a lot of questions on this as well and here's one it says how do I keep motivation and focus I find myself enjoying work but I have a hard time focusing on it. All of the distraction free apps don't work because I can turn them off and they literally have no power over me. I do have a small note about these distraction free apps. Most of them have like or at least the good ones have like a hardcore mode. So look for hardcore mode where you literally can't shut it off. I know focus app for Mac has that where there is no way to shut it off. So like if you if you have a hard time shooting those off. These find the hardcore modes and turn them on it's difficult to get - -54 -00:29:53,970 --> 00:30:07,530 -Wes Bos: I just say that I figured out how to get around it. I won't tell you how but the hard dollar in me is like When a hardcore focus mode to do some work, and then the hacker in my mind is like, I wonder how that works. I have control over this computer, - -55 -00:30:07,740 --> 00:30:11,400 -Scott Tolinski: that it's in, like system processes or something or Yeah, I'm - -56 -00:30:11,400 --> 00:30:15,390 -Wes Bos: not gonna say but it's possible. Hilarious. Okay. - -57 -00:30:15,480 --> 00:30:27,330 -Scott Tolinski: So, Courtney, what kind of message do you have for people who are having a hard time focusing? I know that I have some focus issues in general, and you give me a lot of good tips on focusing. So I know you have some good information here. - -58 -00:30:27,930 --> 00:30:34,770 -Dr. Courtney Tolinski: Yeah, well, first of all, if you've got, like, 20 tabs open as you have currently, like that's, that's not ideal, right? - -59 -00:30:35,970 --> 00:30:39,990 -Scott Tolinski: This isn't even all of the tabs card. This is just some of the tabs. Yeah. - -60 -00:30:40,230 --> 00:30:58,020 -Dr. Courtney Tolinski: Yeah. I don't know what the optimum tab to focus ratio is. I don't know if there's such a thing. Seven, seven. Okay, so keep it to seven or less. Yeah, that's a big one. Um, I really like Brian Tracy's book. Do you know what that books called? Scott? Eat That Frog. - -61 -00:30:58,020 --> 00:30:59,460 -Scott Tolinski: Is that Brian Tracy? He definitely. Yeah, - -62 -00:30:59,460 --> 00:31:00,450 -Dr. Courtney Tolinski: I think - -63 -00:31:00,630 --> 00:31:03,990 -Scott Tolinski: we talked about Eat That Frog quite a bit on this show. Right? - -64 -00:31:04,020 --> 00:31:06,110 -Wes Bos: Yeah, it is. It is Brian Tracy. - -65 -00:31:06,180 --> 00:31:54,810 -Dr. Courtney Tolinski: Yeah. So his idea is to have a couple of frogs that you want to accomplish in the day. And those are the things that you want to tackle. First, they're the most important. And they're your big frogs, right. So you want to tackle those things first. And then below that, having a list of all the other little things that you want to do, right. But I think coming up with a list every day, sitting down first thing in the morning, these are the things that I want to accomplish. And prioritizing that list is really important. Beyond that, in terms of focus, I think knowing yourself and being really honest with yourself about your your habits is really important. Right? So if you notice that you're constantly on Twitter, having that hardcore mode on Twitter, you know, is is the smart way to do that. - -66 -00:31:55,019 --> 00:32:12,510 -Wes Bos: I think even just logging out of these services is key. Yeah, because it stops that like, I just find myself min mindlessly typing in TweetDeck, 100 times a day, and I log out then then I go, oh, what am I doing? Like, oh, I was sleepwalking going to this social network? - -67 -00:32:12,749 --> 00:32:30,660 -Dr. Courtney Tolinski: Right? Yeah, I did that with Instagram, I have a huge problem of just like looking at Instagram, just in the evening instead of being present. Right. And so I just uninstalled it on my phone. And then I have to physically type it in on my phone and the what would you call it the format? I don't know, the website? - -68 -00:32:30,779 --> 00:32:31,830 -Scott Tolinski: The URL? - -69 -00:32:32,279 --> 00:32:39,750 -Dr. Courtney Tolinski: Right? Well, just the the website isn't as good as the app. I see. Yeah. So then I get frustrated. And I close out of it. - -70 -00:32:40,380 --> 00:32:45,210 -Wes Bos: It's always a bummer for us web developers when the the advice is just use the web app because you won't be - -71 -00:32:48,690 --> 00:33:31,200 -Scott Tolinski: just use the thing that we do that we do. That's not as good, right? Yeah. No, totally in. And I think that's a big thing. Because that barrier to entry, you just had a little bit of a barrier to entry there. I know that it is for me, I'm the type will do command w close the Twitter tab and then Command T type Tw in the bealach way. What am I doing? I was just that, yeah, like do that over and over again. And to me those focus apps in particular block that really well. But I think the best advice you you've given me is that having the to do list. Yeah, is like so paramount. Yeah. And really having that to do list in in sticking to it and eating those frogs. And making that the key to there is a big one for me. - -72 -00:33:31,440 --> 00:35:08,480 -Dr. Courtney Tolinski: Yeah, and I don't know if this is part of those focus apps that you use. But one of the things that I recommend is called the Pomodoro. app. That's what I recommend for kids doing homework, right? So I think the same idea applies to adults as well. But it's really the idea of working for a period of time and working strategically. So like 25 minutes of solid work, right? And then you take a short break, like three to five minutes. And thinking about in that break. What can I use that time for? Is it to go to the bathroom? Is it to get a drink is it to browse Twitter, right? So using that time for the break, and then going back and working again for 25 minutes, right? So I recommend 25 minutes of work three to five minute break. And you do that for a period of like three times. And then after the third work period, then you take a longer break like 15 minutes. And you can use that time to like, go outside, if you can go for a walk, just get up and walk around the office or or browse Twitter, whatever that is. But having like the designated work and break time, I think really helps to structure it especially for people who, you know, have issues with focusing. So I recommend that a lot for my ADHD clients. But I think that applies to anybody because a lot of us are kind of feeling ADHD lately, just with all the distractions right and just everything that's around All the time, there's so much to distract us. So having like that structured work time, I think really helps along with the designated plan every morning. - -73 -00:35:09,270 --> 00:36:11,210 -Scott Tolinski: Yeah, absolutely. I think the next thing we want to talk about is, I combined these two because a lot of people were asking about similar things here. And this is motivation and remote work specifically. So I accidentally messages this term that I never heard of bore out, have you heard of bore out, I've heard of no burnout. They said, I want to deal with burnout or bore out. And I thought Bora was a really interesting idea, the idea that you're just bored everything and you can't work on things because you're bored. And that to me, sounds slightly depressive, like depressive symptom kind of thing to me. But, you know, the bore out the burnout. How do you deal with? How do you deal with the loss of focus and happiness in web development, especially in Remote Jobs? Then somebody says, working for yourself at home, you don't get the chance to bounce ideas of encouragement of other people? What are some good ways to compensate to ensure you have a positive mindset? So how do you stay motivated? How do you stay sane? How do you keep that level of motivation up? especially well, working from home, like so many of us are doing currently? - -74 -00:36:11,880 --> 00:36:34,320 -Dr. Courtney Tolinski: Well, I think these are more appropriate questions for you to than me. I know, in my job, I'm doing something different every day. And so I don't quite always know what to expect. And that keeps the bore out, I guess, low? Certainly there's a mental burnout. Who is that? But what do you what do you to do? I think I think you could better answer that question. - -75 -00:36:34,710 --> 00:37:13,020 -Wes Bos: Yeah. Honestly, this happens to me all the time. And it's, it's just the fact that I can't do something for a long time. And if I don't like what I'm working on, I need to work on something else. And I've just realized that about myself is that, like, fortunately, I have a job where I can do that. Yeah, but I can't work on something for for too long. And I've certainly had client projects where I'm just like, this will never end. And I hate it. And in my case, I just would need to work on a side project. I need to do sign fun and need to do a tutorial, something like that, to just totally switch away. And then I realized I'm excited about the stuff. It's fun. Again, I'm building something from scratch. I'm using these new technologies. - -76 -00:37:13,530 --> 00:39:47,420 -Scott Tolinski: Yeah, that was the thing about me for agency life. That's why I liked working in an agency so much. I even like working more on well, even when I worked for board, we were building prototypes. So it's something new, yeah, 24 seven. And so like agencies, a lot of the times your work is the work comes in, you build it, you ship it, you work on something else, and you don't support it for too long or there isn't support because chances are it's just like a brochure or something or site that, you know, you gave them a CMS and chances are, they'll never even log into it. So these things just sort of sit there. So for me, that was always a big driver is the fact that you're always working on something new. And that's one of the reasons why I love web web development so much. But I could see if you're working on a product, or like an application that is the application, then it could get really boring, although I've worked on level up tutorials, comm myself for so long. But the fact that I'm the boss, and I can make the calls here, if I want to learn framer motion, well, I can just rip out all of my animations and rewrite them in framer motion just for the fun of it just to learn it right. And that is a that's sort of one of the reasons why I love doing what I'm doing right now. Because I do get that freedom, and the ability to change all those things. So I don't know, what I would advise is maybe find some ways to switch it up in your job. I know you don't always have the ability to be the decision maker. But switch it up. Even if it is as simple this is gonna sound dumb, but even if it's as simple as changing your theme in VS code, switch it up, switch it up, tried something different. Get some new new flows going on and try some new extensions, maybe some new new plugins that make it so you can type your code differently. Just try something new is really it. I know that that's sort of the message that we've been saying, because we both like to try new things. But if you get bored, try something new. If you need motivation, think about the motivating factors. What are the motivating factors in this work is often learning new things, driving yourself or pushing yourself in different ways. So if you're doing client work, or whatever, and you can't figure out how to drive yourself forward, really see what kind of variables you can affect yourself, like, Hey, can I try this new framework out on this project? Sure. Just do it. Ask your boss, ask for that time to maybe work on side projects or learn new things. And that will help maybe push you forward, keep it fresh, and it's just like one of our sponsors, we're gonna want to keep it fresh, and that's fresh books. Oh, it's just the cloud accounting software that Wes loves and uses every single day. And I don't know about you guys, but our tax time got pushed back so get more time to work in fresh books before taxes are due. Hi. - -77 -00:39:47,850 --> 00:40:36,980 -Wes Bos: It did. Unfortunately. My Freshbooks work was only a few hours this year, and I export it everything so my taxes got delayed, but I don't need it because Freshbooks made it so easy to do my taxes this year. Basically, I use fresh books to keep track of all of our invoices. So if we invoice someone for a sponsor, it gets sent out via fresh books, and expenses. So go buy a coffee or something like that on a meeting, I can expense half of that I put it into fresh books. At the end of the year, I export those two things. They also have all kinds of really good reports. So you can see where you're at, in terms of money coming in money going out who owes you money, who Shakedown, things like that. So check it out. freshbooks.com forward slash syntax, and use syntax in the How did you hear about a section? Thanks so much to Freshbooks for sponsoring, - -78 -00:40:37,320 --> 00:41:01,050 -Scott Tolinski: thank you for spokes. Alright, the last topic we want to dive into, uh, you know what, honestly, court I think this has been so so good. And so illuminating, we should have you on again to do more stuff. Because, you know, your your specialty is, in fact, educational. So like, maybe we could talk parenting stuff talk, dealing with adolescent problems or things like that. But I think there's so many topics here that we didn't even get to cover. - -79 -00:41:01,320 --> 00:41:04,050 -Wes Bos: Yeah, let us know what you want to see. - -80 -00:41:04,530 --> 00:42:02,630 -Scott Tolinski: Yeah, absolutely. If you have more questions for coordinator or anything like that, we can have her back on again and do a round two of this. Because, you know, there's just so much here, this last section is going to be on stress, we get a couple questions on stress, which is, how can I correctly identify the source of negative stress and not lashing out on closer ones? One under stress? Sorry, sometimes these these questions come in, and we got to interpret them a little bit. So how do you identify the source of negative stress? And how do you deal with not lashing out? being aggressive? And also how do you avoid eating to cope with stress? So, like positive coping strategies for stress and just stress in general, I know a lot of us are under some really tight deadlines. So managers, you've you've experienced me firsthand being under some extreme stress from really demanding and honestly abusive managers and bosses over the time. So I don't know what kind of advice you can give there. - -81 -00:42:03,090 --> 00:42:09,960 -Dr. Courtney Tolinski: Yeah, um, well, have you have you talked about the Coronavirus situation at all? on the podcast? - -82 -00:42:10,590 --> 00:42:15,300 -Wes Bos: A little bit, but not really, because we haven't recorded in two weeks and the world? - -83 -00:42:17,550 --> 00:42:57,510 -Dr. Courtney Tolinski: I know. Yeah. Okay. Um, yeah. So, I mean, obviously, we're all under an insane amount of stress right now. It's Paramount, and everybody. So this is a really, I think, pertinent topic right now, in terms of identifying the source of stress. How I encourage my clients to do it is to really think about how we experienced stress in our body. Right? And it's interesting, we think about like these basic emotions, like anger, sadness, happiness, whatever, we all experienced them, but we experienced them differently. Like, have you ever thought about that West? How you experience stress in your body? Like where you feel it? - -84 -00:42:57,650 --> 00:43:10,650 -Wes Bos: Yeah, I get, I get headaches. If I have a stressful couple days, I wake up or just get a wicked headache that like no Tylenol or anything can can get away with. It's just like the worst headache that I can get. - -85 -00:43:11,039 --> 00:44:20,400 -Dr. Courtney Tolinski: Okay, yeah. And for me, it's just like a sense of tightness, like muscle tightness on throughout my body. And a lot of times, I have like, perseverative thoughts where I'm thinking about the same thing kind of over and over, I like hyper focus on what it is that I'm stressed about, you know, so it's different in everybody. And so it's really important to think about and pay attention to when you feel stressful, and think about where you're experiencing it. So pay attention to your heartbeat, right? Is it beating really fast? Are your muscles tight? Are you clenching your muscles? Do you have a headache? You know, is your face flushed? Right? So think about those things. Because they're important cues to let you know that you're feeling that emotion. And I mean, that seems really obvious. Like, we all know what stress is, but a lot of times we don't identify it quickly. And when you can pay attention to it in your body, which you know, is part of mindfulness and what that's so effective and so helpful. But when you can identify it in your body, then you can put a label to it and say, Oh, I'm feeling stressed out, right, and then think about it more rationally, instead of feeling it like, immodestly right emotionally in your body? - -86 -00:44:20,729 --> 00:44:22,590 -Wes Bos: Yeah, call it out. That's a really good point. - -87 -00:44:22,709 --> 00:44:42,720 -Dr. Courtney Tolinski: Yeah. So this this the first step, and then once you're feeling stressed, thinking about it, like I said, rationally, so thinking about what what specifically is making me stressed. And a lot of times, it's helpful to write it down. So if you're at work, thinking about what are the things that might make you stressed? So what's an example of something that you might be stressed about? - -88 -00:44:42,990 --> 00:44:44,310 -Wes Bos: The world falling apart? - -89 -00:44:46,500 --> 00:46:06,030 -Scott Tolinski: Yes, yes, that one? Yes. In a developer sense, maybe a boss saying, get this done right now or you're you're in big trouble? I don't know. Yeah, there's a lot of it for me was always around. deadlines, you know, sometimes having to pull all nighters to work on stuff because coders wasn't working. We know as developers very specifically, there's that like joke. It's like, this is not working. I have no idea why this is working. I have no idea why, where, where sometimes things just don't work. And it's so beyond you why this thing isn't working. I think I had a, I had a bug last night. And it was so dumb, I was editing the wrong file, of course, it's like, why is this error still here. And it was editing the user transactions file rather than the user transaction file, which just happened to look very, very similar in terms of layout of the React that component. And here I've edited this variable, and I'm like, I'm still getting the errors. My code not compiling, I stopped and started I checked the debugger. I'm like, why isn't this data coming in? And now you know, all this stuff? And sure enough, it's just something so stupid, because sometimes when it builds up and builds up and builds up your your default systems for checking the things that are basic shut off, you know, right, yeah. And that can get kind of tough. - -90 -00:46:06,750 --> 00:46:39,180 -Dr. Courtney Tolinski: Yeah, yeah. So if it's an error like that, then I think, again, just paying attention to how you're feeling. And if it's something that you can't control at that moment, then you could do a couple of things, right, you can just take a break, go for a walk, I think that you find a lot of your solutions got when you take a walk. That's one of the things that I'm always recommending to him, but instead, he kind of like digs in. And we'll just try and solve itself itself. And his brain is not thinking necessarily rationally thinking that, yeah, out of that frustration and stress, - -91 -00:46:39,210 --> 00:48:16,710 -Scott Tolinski: I've got better though I used to, I used to have a problem. When we when my office was carpeted, I used to flip my chair over, I used to just stand up and knock my chair over. Because it was like, Alright, this isn't gonna break the chair. It's carpet. It's not that loud. It's not like I'm damaging anything. I was never, I was never the type to get really that angry about it. But just flipping the chair over, always, like, relieved a little bit of that aggression for me. And like, yeah, I haven't done that in like, eight years or something. I haven't done that in a very long time. But that was like, I remember Courtney having a chat with me just being like, you need to stop doing that. That's not, that's not a good to do. So. That was that was one of the things that was always my release of aggression. And now I don't I just don't have that much aggression anymore. I don't know what it is to just found out how to chill out a little bit more. But I know that that people are saying how do you do avoid lashing out? And to be honest, it's, we're developers, right? When you're developing code. It's easy to be in this like straight up logical mindset where your brain is, like, no emotion, it's logic, logic, logic, logic, no emotion. And so when we're solving problems, it's really easy to stay in that mindset. But you need to be able to keep yourself grounded in the real world and realize that like, you know, there's, there's things going on outside and that you need to not, I don't know, you need to be cognizant of everything rather than just like hyper focused on what you're working on. And those techniques that you've listed, like going for a walk just endlessly endlessly effective for me. - -92 -00:48:17,129 --> 00:48:27,600 -Dr. Courtney Tolinski: Yeah, the one that is really getting a lot of attention right now the coping technique is the four I think it's 4478 breathing, can you check that? - -93 -00:48:28,169 --> 00:48:34,410 -Scott Tolinski: So we pulled up in our call here on Healthline comm Have you ever been to helpline West's websites really nice actually - -94 -00:48:34,439 --> 00:48:36,030 -Wes Bos: not been on that line before? - -95 -00:48:36,149 --> 00:49:11,580 -Scott Tolinski: Yeah, I don't know when this came about, but help line calm. I've been really loving this web website lately. I have no idea. It just started popping up and they have like really good advice all the time. So they they described this as first but your lips part, make a whooshing sound, exhaling completely three. Everyone sit back and close your eyes and do next, close your lips. Inhaling silently through your nose and count to four in your head. The dog barks. Then for seven seconds, hold your breath. - -96 -00:49:16,800 --> 00:49:21,690 -Then make another whooshing sound and exhale from your mouth for eight seconds. - -97 -00:49:27,750 --> 00:49:50,910 -My ASMR people loving this. So that is that's it really it's it's basically exhale, whooshing exhale, breathe in through your nose silently for four seconds, hold for seven seconds, then whoosh out for eight seconds. So silent, silent and for four, hold for seven, whoosh out for eight. - -98 -00:49:51,930 --> 00:50:45,030 -Dr. Courtney Tolinski: Yeah, you can also do belly breathing too. And the idea is to like expand your belly as you inhale. A lot of us breathe in correctly. There's a lot of research on how to breathe correctly. So when you inhale, you want to expand your belly like a balloon blowing up. And then when you exhale, the air should be, you should be like sucking in. Right, so drawing your ribcage up, which is like alternative to how we usually breathe way right where we inhale in second, and then exhale and suck out. So the idea is to breathe the opposite. So when you inhale, blow up the balloon. And then exhale, bring up the ribcage, but the 478 breathing actually, there's a lot of research in how it I don't know the specific research, this is like the mom brain sleep deprived. My brain right now, - -99 -00:50:45,059 --> 00:50:45,900 -Scott Tolinski: no one is judging you. - -100 -00:50:47,550 --> 00:53:32,730 -Dr. Courtney Tolinski: But there's a lot of actual like neuro research on how the 478 breathing is really helpful with it's called the vagus nerve. It's actually really interesting if you Google that the vagus nerve like Las Vegas. But yeah, so that type of breathing is really helpful, I think, obviously, like taking a break, and realizing what's in your control. I think right now, the issue of control is really pertinent. Just the lack of control that we all are feeling. Yeah, with everything. And understanding like, here are the things that I can control, right? If you can't solve that bug currently, then that's out of your control right now, you know, what's in your control is that you can take steps in to work through and figure out a solution. But currently, what's out of your control is solving that bug, right? So there are other things that you can do to help yourself rather than dig in your heels. But the 478 breathing, understanding what's in your control, taking walks, taking breaks, things like that. And then just kind of broader things to help with stress. Of course, again, exercise, diet, sleep, all those things that we've already talked about are just so important. Yeah. And then other good coping skills. I think exercise is huge. And it's something that we totally underutilized. taking walks even can be a really solid exercise if you're doing nothing at all if you're totally sedentary, trying to make it a vigorous pocket. Buchanan's ideal. But yeah, all those things are really important. As far as this distress eating, I know that's a tough one. I think a lot of us can be like, not mindful in terms of our eating and just kind of like cramming and snacks. I know Scott is kind of guilty of that sometimes. Like, I just I stocked up at the grocery store. I bought like six box of crap boxes of crackers. And I bought them for us to last like the entire month, and already was like for the boxes are gone. It hadn't even been a whole week and he eat crackers. I really stress under a lot of stress, like the rest of us, but I was so angry. He has his crackers, but he gets into this habit of just kind of like mindlessly eating. Yeah, working. Yeah, yeah, exactly. And some of us are more guilty of that than others. But I think that idea of mindfulness. If distress eating is an issue then portioning out your snacks and having like, a certain amount of crackers on your plate and then putting the box away, right not having the box in front of you so that you can just continue to eat, Miss just thinking about those things. I think being mindful is probably the lesson on the day, right? just paying attention and noticing and then taking steps to correct the things that you are struggling with. - -101 -00:53:33,000 --> 00:53:43,200 -Scott Tolinski: What about like replacing crackers with a baby carrots are something then then if you're mindlessly snacking near at least getting some fiber and beta carotene and all that stuff. - -102 -00:53:43,320 --> 00:53:50,100 -Wes Bos: yet. That's actually really good because it makes your mouth taste awful. Anyone? Okay, I love caramel. - -103 -00:53:51,180 --> 00:54:35,730 -Scott Tolinski: Yeah, I can chomp on some baby carrots. Although Carney's gonna laugh because she buys me baby carrots and I don't eat them. But I don't eat them not because I don't like them because they're in the drawer and I don't think about them. And if I don't think about them, then I don't do anything about them. I got it. It has to be visual. I got to open the fridge and see the carrots and be like, oh, carrots. She goes carrots. So I think that's it for now. Courtney as a as a guest on this show. We're going to be doing sick pics, and I don't know if you have anything prepared. But I invite you to give us a sick pick if you'd like this is for those of you who this is your first episode sick pics are the things that we think are sick. Courtney, do you want some time to think about a sick pick? Or would you just like to have a sick pick? - -104 -00:54:35,790 --> 00:54:37,260 -Dr. Courtney Tolinski: Well, have you done Animal Crossing yet? - -105 -00:54:37,530 --> 00:54:38,100 -Scott Tolinski: We haven't. - -106 -00:54:38,249 --> 00:56:03,000 -Dr. Courtney Tolinski: Okay, so I have been to sick picks, I guess. My first would be Animal Crossing. We just purchased it for the switch. I don't know if it's available for other things to switch. Okay. But there's a way that you can play as a two player mode which we just figured out. I don't know. Is there a term for that? Co Op Co Op? Okay, but it's really fun. You get to have like your own little island. And you create you like forage for things you fish, you create like a little tent and you have like your stuff in the tent, and you can travel to other friends islands. It's been a really neat and kind of meditative game. And I'm not somebody who's like, really into gaming, I like Mario Kart, and Mario type games. But I really liked this one, especially I think, because we had a couple trips planned, and we aren't able to go on any of those trips. So it sort of makes me feel like we're on an island, we're taking our vacation, even though we're in our living room on the little cars and things, toddler toys. But it's been a really fun game. And I highly recommend it, especially if you're looking for kind of an escape during these times. So that's my sixth pick. And then I know you had a couple of people asking for parenting recommendations or books. So some of the books that I really like if you're interested in parenting books, how to talk so kids will listen and listen. So kids will talk. - -107 -00:56:03,090 --> 00:56:04,620 -Wes Bos: Oh, my wife's reading that right now. - -108 -00:56:04,620 --> 00:56:05,910 -Dr. Courtney Tolinski: It's so good. - -109 -00:56:05,940 --> 00:56:06,480 -Wes Bos: Yeah, - -110 -00:56:06,480 --> 00:56:25,800 -Dr. Courtney Tolinski: it's a really great book. I think it's, even if you don't have kids, it's a really great way to understand how to communicate effectively. And to not like put labels on things and just allow for empathetic communication. I think a lot of us don't do that, because we're uncomfortable with it. And that's a whole nother story. But anyway, - -111 -00:56:25,830 --> 00:56:33,180 -Scott Tolinski: we should I'm sorry to interrupt here. Somebody, one of us should write a book, how to talk to developers, developers. - -112 -00:56:34,440 --> 00:56:36,030 -Wes Bos: developers will listen Yeah. - -113 -00:56:37,170 --> 00:56:38,190 -Dr. Courtney Tolinski: Yeah, this year, maybe. Yeah. - -114 -00:56:38,190 --> 00:56:38,760 -Unknown: Right. - -115 -00:56:38,760 --> 00:56:43,050 -Wes Bos: You should write that developers are not great at communication. No. - -116 -00:56:43,500 --> 00:56:59,910 -Dr. Courtney Tolinski: Kidding, right. Yeah. So we all should read that book, Ben. But no, it's it's a great book. And there's there's so many like little nuggets in there. So if you're looking for a parenting book, I like that one. And then the whole brainchild by Dan Siegel. Those are two really great books if you're just looking for parenting advice. - -117 -00:57:00,420 --> 00:57:09,450 -Scott Tolinski: Thank you. That was a you came up with a sick pigs wave faster than we do. Yeah. Congratulations. That was good. So let's do you have a sick pick for us. - -118 -00:57:09,480 --> 00:58:39,300 -Wes Bos: Yeah, um, I'm going to sick pick an iPad game developer for kids called toca. Boca, Boca, Boca Toka mocha. So like, we got our kids an iPad. And we went down this rabbit hole a couple years ago, realizing almost every iPad game is awful, whether it's the content, whether it's the like links for ads that they put under the kids fingers, and then they touch them, or whether it like like our kids would get these apps that they like, try to like make you buy something and then the kids touch it. And they're like, why isn't it working? And they're like, Can we buy this and let's just a dumpster fire Kids Games. So I found this one iPad developer called Toca Boca, and they have a bunch of different apps where it's good for like really young kids as well, where they they can do hairstyling on people and cut their hair and change the color. And there's Toka Toka kitchen, which allow you to like you can cook stuff and like there's there's no like end game. There's no points or anything. It's just, it's just doing stuff. It's just styling the person's hair cooking a dinner, and it's just like the kids. It's so calming. I like playing it myself. It's really, really cool. So if you're looking for iPad apps for your kids while they're home right now, because you need to slam an iPad in their face for 45 minutes so dad can get some work done, Uncle Mickey. Mickey. Chef Mike, we've been calling our microwave chef Mike lately. - -119 -00:58:42,000 --> 00:58:43,050 -That's so good. - -120 -00:58:45,300 --> 00:58:54,870 -Chef Mike and Uncle Mickey taking the taking the lead on this Coronavirus having the kids. Anyways, Toca Boca check it out. Toka kitchen two is probably my favorite. That's cool. - -121 -00:58:54,870 --> 01:00:23,910 -Scott Tolinski: My sick pick is going to be a YouTube channel that I was actually watching the other day I've been I've been subscribed to this channel for a while. But I think some people saw me watching it on an Instagram story. And we're asking about it. This channel is the engineering mindset. It's a YouTube channel that teaches basic electrical and otherwise engineering concepts. And it does so in really, really good diagrams. So even like the initial the electrical engineering basics starts off with the how electricity works and it gives you a nice little thing about circuits and batteries. And they do whole videos that aren't that long. They're like 10 minutes long. Here's how a capacitor works. here's here's what current is, here's what voltage is. And it does so in such a great way that you can get the full basics of everything and then once you get beyond the basics, it can teach you all sorts of things about condensers chillers, evaporators, h vac systems, all this stuff that I don't know anything about, but it breaks these topics down are so relatable to what we're doing in terms of like logic and engineering in general that I love this, this channel and it does a great job of of showing you via diagrams and animations and everything. So if you're interested in learning a little bit about engineering in general, this channel is very popular 760,000 subscribers, so very good YouTube channel. They're someone that a lot of the videos have like 2 million views and stuff. So good stuff there. - -122 -01:00:24,300 --> 01:00:32,220 -Wes Bos: I should I should also say these these iPad apps I recommend it looks like they are available on Android and Kindle as well. - -123 -01:00:32,480 --> 01:00:38,790 -Scott Tolinski: Oh, nice. Cool. Well, that's it. Do you have any shameless plugs, anything to plug here? - -124 -01:00:39,060 --> 01:01:11,820 -Wes Bos: I'm shamelessly plug all of my courses. So I just put all of my courses on 50% off until when I don't know when does Coronavirus. And I know a lot of you're at home, a lot of people are being laid off and need to keep their skills sharp. A lot of people are just looking for something to learn in this time that they're they're stuck in their house. So Wes bos.com forward slash courses, everything is 50% off. I imagine it will be that way for at least a few more weeks. So yeah, check it out. Use coupon code syntax for extra 10 bucks off. That should still Oh, - -125 -01:01:11,940 --> 01:01:44,640 -Scott Tolinski: yeah, yeah, we're going to be doing the same thing on level up tutorials. So level up tutorials.com, we're going to be doing 50% off the yearly subscription if you want to sign up for the year as well as just about everything on the store. So again, we don't have the sale up as of the second that we're recording this but it will be up by the time this podcast is out. So also, if you've purchased a monthly or yearly subscription recently just get at me and I'll discount you down to that half off rate depending on like if it was if you purchased it like two months ago then I don't know. But if you're like yeah, that's not the - -126 -01:01:44,700 --> 01:01:55,170 -Wes Bos: issue. Here. It's just say like, if you bought in the last couple weeks or whatever, and you feel like you got burned, then let me know. Yeah, you should. We're pretty good about it. So it's cool. It's like it's kind of like Black Friday, except the world is falling apart. - -127 -01:01:55,260 --> 01:02:09,270 -Scott Tolinski: Yeah, right. It's actual Black Friday. It's black 2020. Well, thank you so much. And thank you so much to Courtney, for coming on the show, Dr. Courtney kolinsky here and we hope to have you on again someday soon. - -128 -01:02:09,570 --> 01:02:11,760 -Dr. Courtney Tolinski: Yeah, happy to be here. Thanks for listening. - -129 -01:02:12,060 --> 01:02:12,840 -Wes Bos: Yeah, thanks a lot. - -130 -01:02:14,670 --> 01:02:24,450 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax237.srt b/transcripts/Syntax237.srt deleted file mode 100644 index 1722dc58e..000000000 --- a/transcripts/Syntax237.srt +++ /dev/null @@ -1,100 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,219 --> 00:00:08,820 -open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip - -4 -00:00:09,059 --> 00:00:19,980 -Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA, - -5 -00:00:20,009 --> 00:00:21,660 -Bob, and Scott Taylor. - -6 -00:00:23,610 --> 00:00:24,480 -Totally at ski. - -7 -00:00:25,890 --> 00:01:38,490 -Scott Tolinski: Whoo, welcome to syntax and this Monday tasty treat. We're going to be talking all about abstraction. And if you don't know what abstraction is, so the good introduction to what it is, we're going to be talking about it in the context of both react as well as just general JavaScript programming. In general, talking about how to make things more simple for ourself. This episode is sponsored by Log Rocket, which is the perfect place to see how errors are happening on your website. And when I mean, see, I don't mean see an error log, I mean, see visually What the heck the user did to cause your site to break. Because Log Rocket gives you a session replay, which is a scrubbable video that gives you a network request Redux store. It gives you console logs, it gives you everything you could possibly see even like mouse tracking what the user did to click to break the thing. So you get all that and more with Log Rocket. So head on over to Log rocket.com forward slash syntax, sign up and get 14 days for free. And just or be able to reproduce your bugs and live in a video without having to ask your users What the heck they did to break the thing. Okay, my name is Scott Delinski. I'm a developer from Denver, Colorado with me, as always is the Wes Bos. - -8 -00:01:38,819 --> 00:01:40,319 -Wes Bos: Hey, everybody. Hey, - -9 -00:01:40,319 --> 00:01:41,550 -Unknown: Wes. How's it going? - -10 -00:01:41,550 --> 00:01:44,340 -Wes Bos: I'm doing good excited to talk about abstractions, - -11 -00:01:44,340 --> 00:03:57,930 -Scott Tolinski: abstractions. You know, abstraction is one of those words, it's one of those terms that gets thrown around, we get so many terms and lingo and stuff. And new programmers will look at this stuff and just say, Oh, this seems scary. Just because it's a some syntax, right? It's some, some word that that we don't know about. But what is abstract in the most basic terms, so abstraction, in its most basic form, is basically hiding complexity, basically, by taking something in abstracting it and using the word and its own definition. And on to something else, that's much easier to understand, right? Because in programming, we often write these big old functions that do this thing. And maybe you've seen it before, where you have like, 100 line function does this and this and this and this and this, well, maybe it's worth it to take some of those steps and abstract them into smaller steps, things that make maybe a little bit more sense, right. So basically, what abstraction is, is taking complex things and encapsulating that into smaller ideas or smaller functions or smaller use cases. And we've largely seen this as component developers. By little Think about it, right? We talked about this all the time with react, and view and spelt and whatever, you have a component this components gotten to be like 200 lines or whatever, it's obviously a massive component, maybe this component should be broken down into something smaller, maybe we should abstract this into little tiny components and capsulated, I used to have this programming language, it was a visual programming language called max MSP for audio creation, I talk about it all the time is one of the first introductions to programming on here. And you create these little boxes, and you connect them via patch cables. One of my favorite things about max MSP is because it was all visual, you know, these little patch cables and boxes, you could click and drag and select and then click encapsulate. And it just took all of that complexity, and just shrunk it down into one little box. So instead of having 20 boxes, you now have one little box, and it has the goods and outputs, whatever. So that's really at its core, what abstraction is for taking something that's big and complex, and smashing it down into something that is a little bit more usable, pushable, whatever. And we can think about this all the time in our components. - -12 -00:03:58,110 --> 00:04:40,440 -Wes Bos: Yeah, like reusability is a huge benefit of, of abstraction, because, like, certainly, I have written code before where I find myself doing something like formatting money, or making a fetch request that we're only like one little one little pieces different, I say, ha, I'm doing this kind of similar in a couple pieces of my application, on on I abstract this out into its own function into its own library. Then when I want to do this piece of functionality, I can just call this one one nice, clean line. Not to mention, you probably can test that thing really nicely. Oh yeah. in isolation, without having to bring in the rest of the application into it. - -13 -00:04:40,640 --> 00:07:20,130 -Scott Tolinski: Totally. Those are all like key key points here. And, you know, I think the the main concepts here, it's like when do you know to abstract something right? When does something become its own thing rather than this big honkin thing and this is all comes down to in my mind personal preference so often see people Like don't do this do this take okay components should be this like. And sometimes people even give like these like arbitrary line limits saying no function should be greater than eight lines. And then you just end up with splitting everything where not doesn't, doesn't necessarily make sense. But it's it's more or less like based on some arbitrary rule. For me, I often think about this as again, like you mentioned, smaller, smaller things that are easier to test. Because it's much easier to test a function that checks the the currency, or changes the currency or whatever, it's much easier to test that than to test the entire order order thing at once, you know, processing the order, whatever. So if you have all these smaller little bits, you can test those little bits in isolation, make sure they work. And to me that that makes the whole thing easier to test. It often has this like feeling of, when you look at a component, it's too heavy, it's too much, it's too complex. And reading this thing, maybe I don't understand exactly what it's doing. And to me code should be readable. It should definitely you should have a good understanding of what it does. And one of the things recently that got me thinking about abstraction in these kind of ways was I was thinking about some animation stuff I was doing. And I've been getting into framer motion a lot lately, you know, I've done a course on it. And I had a animated routes, I built animated routes, and to do animated routes, you have an animated animate presence component, then you have your react, router, switch, then you have your route component, then you have your motion div to do the animation. That's four components. And what I did is I wrote two abstractions, one of which combines the animate presence and the switch, and one of which combines the route and the diff. And they still accept the same props. And it has really smart defaults. So by by default, it automatically doesn't opacity change. And what you get is you get a much cleaner API, you can see that I have an animated route, or an animate animated router, and then an animated route. And that's it. If you don't need to pass any props in there other than the the route path, then the whole thing just works. And not only that, it's just so much easier to read. So, to me, it comes down to is this thing difficult to parse, is it difficult to test is it difficult to read, and should I think about breaking it into smaller pieces, - -14 -00:07:20,519 --> 00:07:24,120 -Wes Bos: that's beautiful. I like that, that way of approaching it. Yeah, - -15 -00:07:24,120 --> 00:08:03,060 -Scott Tolinski: I am a big fan of this, I sometimes go a little bit overboard with it, I would definitely veer on the side of abstracting too much. But then, you know, the downsides are, if you abstract too much, you could see that there's very minimal savings, right? Like maybe you're you're saving one line of code, and having to write a whole bunch of extra files and extra things. And they have this call this call this call this call this whatever. And you get sort of a Redux II kind of mess where it's just you don't know where the source of anything is, because it's too far abstracted. So sometimes, you have to be cognizant if the savings are worth it, is the juice worth the squeeze there? - -16 -00:08:04,410 --> 00:08:35,539 -Wes Bos: I agree. Like I I go on the other side of things where I don't abstract until I absolutely need to, sometimes ahead of time, you can think about like, Oh, yeah, of course, I'm gonna need a another function or reusable function to do this. But I must rather serve to just write it be able to see everything, see how it all works, and then quickly abstracted out into its own package, or its own function or its own file or something like that. Once I see the the need for something like that, to - -17 -00:08:35,539 --> 00:10:41,420 -Scott Tolinski: me, it all comes down to usability, you know it, it all comes down to like whether or not this thing needs to exist. And I was thinking about it specifically with my animated routes thing. It's like, Oh, I have this animated routes I'm using on this one section. But if I abstracted into this component, I don't have to do any work to get animated routes throughout the rest of the entire site. Even if it's just a basic fate, I don't have to do any work, I just got to change a component here or there. I just I'm just changing the import and the name of the component. And the whole thing just works. So to me, it's like what is the benefit versus what's the cost. And you have to sort of look at that. And that comes with experience. And that comes with experimenting. So don't feel like you shouldn't abstract and don't feel like you should abstract when you're just learning just play around with it feel free. I've gotten really into much smaller single use functions lately, just in terms of like, that's like really functional programming a function should do one thing and it spits out something and that's how you were right. Yeah. So for me personally, I've been thinking a lot about that and breaking things up into smaller things. And, and sometimes abstraction is just a pointless layer. But sometimes it's really helpful. And I think there's also a difference between your personal code verse consumable libraries, right? Because if you think about it, a library that you're releasing off into the world is something that other people are using needs to really fit so many more use cases than your own right for me with my animated routes. All you have to do is pass them The routes prop and then it works. But some people will be like, Well, how do you get the route the fly in from the right? Well, with my particular abstraction, you can't. But if I was publishing this as a package, that would be a huge downside of the package that you couldn't do all that stuff. So what you end up having is when you when you have packages that are publicly and don't have these, like really strong opinions, they have a whole ton of inputs. And the more inputs you add to something, the more complex and difficult it is to understand. So I think there's a little bit of a trade off there in terms of like, who's using this thing, what it needs to do, and how that all works? Have you seen the chakra UI? Is chakra hyphen? ui.com? - -18 -00:10:41,730 --> 00:10:43,020 -Wes Bos: Ah, let me check it out. I - -19 -00:10:43,020 --> 00:11:41,430 -Scott Tolinski: heard of it. It's one of these component libraries. I think it's built. Yes, yes, I've seen that emotion. And it's really nice. There's a ton of components, and they all look great. In my mind, these things are fantastic. But I would much rather write my own version of this if I have the opportunity. Because what this has to do is it has to accept so many different use cases. And so many different configurations, that you end up having like a set of five or six props on something to change the way something looks where I would personally write my own or even take this and abstract it into my own components that have like these smart defaults. Because when you start adding inputs, you start adding props, it can get out of hand really quick in terms of usability, readability. And I don't know, the less choice you give developers, when doing design system, stuff like this, probably the better because the more cohesive, the whole thing's going to be, you don't want, you don't want people to be able to goof it up. - -20 -00:11:41,700 --> 00:11:42,540 -Wes Bos: Absolutely. - -21 -00:11:42,960 --> 00:13:29,040 -Scott Tolinski: So if you are writing components for your team, and your use cases that aren't going to be made publicly available, or even if they are going to be publicly available, like don't worry about accommodating every particular use case, people ask us about our design system all the time, and how we do things. And let me look at my some of my components. Here, I have some layout components. And I have a couple of layout components. And they're very opinionated. And, for instance, my layout, a component itself is a singular styled div. And it only accepts one prop in that prop is a string, which is either tight or wide. That's it, those are the only options to use a layout. I also have a columns, one columns, component name calls, and calls accepts one component. And that's whether or not it's reversed in our calls component gives us two evenly spaced columns, one that's like 30%, or 65%. And one's a fraction of that using CSS Grid. It's whether or not the big one is on the right, or the big ones on the left. That's the only prop it takes in. Because we have these like secure solid defaults, we just know that you can drop these things in and you don't need to configure them and you don't need to anything else. Again, our container prop one or container component, one Prop, our flex component, we have a flex component, anytime we want to use like a Flexbox container. The only thing that we accept in this is a prop for our justify content. And we do that as a prop rather than a style thing just to keep it all in. But that's the only thing and otherwise, it's just flex, right? You want to flex them, it just works. And same with our grid component, our grid component just takes an array of how many columns you want, how many equal columns. So it's just very simple. And keeping your I'm glad - -22 -00:13:29,040 --> 00:14:15,930 -Wes Bos: that you say that because like a lot of my components are very similar in that like, I think sometimes people ask me to open source parts of my code base. I'm like, Oh, that's specific, yeah, to what I'm doing. And it's, it only does what I need, like I don't, I'm not writing this thing, where it's gonna, every single person in the world that ever wants to use it will have have the ability to do so it's just for my use case. And if I need if I need to be able to add three columns, then I'll, I'll modify that component and add it in. I think that, especially for people who maybe haven't worked in code bases like that, they may be thinking that that's how they how people approach it. But honestly, it's just adds more complexity to the the function or the component to do more than you need it to do. - -23 -00:14:16,290 --> 00:16:19,170 -Scott Tolinski: And that's 100%. The reason why don't use frameworks because if you have a framework, there's just too many options and too many variables and too much learning and too many things to distract. That's like a very specific learning to like it's it's 2020 how many people are still using that bootstrap knowledge that they they spent all that time and to figure out specifically how bootstrap works well, you're gonna have a negative margin, you got to have a container like that stuff. I don't I don't even think about this stuff anymore. And that's like, almost wasted time learning that when I have my own component system that just works. And since I wrote it, you know, I didn't have to learn it. So for me that I guess it's an argument and writing your own things for your own use cases, and it's all dependent on time but to me, this saves a lot of time because I don't have to learn In these things, it took two seconds to write a flex component. So, for me, it's all about knowing when things need to be a buttoned up and pulled into to their own thing. And when to maybe look at this as being it's too complex. And a funny, funny example, I've been doing a lot of custom hooks. And so one of the things I've been doing is moving some of my graph qL calls into their own custom hooks, which is actually really kind of interesting, because I haven't done this before. But I was thinking about it, I use this particular user query to grab the user all the time. And so I have to import the user query from the graph qL file, or even worse, copy and paste the user query into each file. Depending on how you do that, then you have to do the, the whole Apollo client use query, pass, query, whatever, do all the exact same things every time. Whereas if I were to abstract that into a custom hook, that's just use user, that all happens behind the scenes, I only do one import, there's only one source of what it's grabbing, whatever, I don't have to import all those things. I just import use user, pop it in there, and I got the user. So for me react hooks is specifically custom react hooks is really changed my viewpoint on when to abstract things and how simple some things can get. And I just love it. Love it. Love it. Love it. - -24 -00:16:19,890 --> 00:16:35,850 -Wes Bos: All right, I think that's a good way to end it. Thanks, Scott for leading this one off on abstraction. It's a funny topic we've never covered before I saw it. I was like, we must have covered that, but certainly we haven't. So that was a good one. Thanks for tuning in. And we will catch you on Wednesday - -25 -00:16:36,330 --> 00:16:49,740 -Scott Tolinski: bass bass. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax238.srt b/transcripts/Syntax238.srt deleted file mode 100644 index e4171cea2..000000000 --- a/transcripts/Syntax238.srt +++ /dev/null @@ -1,560 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax, the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:10,530 -development treats out there, strap yourself in and get ready to live ski and Wes Bos. - -3 -00:00:10,559 --> 00:01:19,950 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats. We have got a banger show for you today about working from home. And don't turn it off just jack because I know everybody's given tips on how to work from home. But we're going to attempt to give you our tips as to like how do you make the most of what's going on right now, a lot of people are working from home, a lot of people are working from home with their significant other, they're in a different space, you're not as productive. There's a whole lot going on in the world are a little bit distracted. You may be you have kids, maybe you have lots of kids at home that needs to be taken care of but and you and your significant other both have jobs to do at the same time. So it's just this like really weird area. And we're just going to try to give our thoughts and we reached out to the twittersphere for their own thoughts as well. So like how do you navigate this troublesome time? And do your best i think that's that's really a what we can do right now is do your best. today. We're sponsored by dot tech domain names and Prismic will talk about them partway through the episode with me as always is Mr. Work From Home, Scott to lidsky. How you doing today? Scott? - -4 -00:01:20,069 --> 00:02:00,060 -Scott Tolinski: Hey, yeah, do good. Doing good? Well, I mean, you know, given the current situation and doing good, and, you know, I think it's, uh, I don't I don't want to bump people too much out about any of this stuff, because everybody's already bummed out enough about it. So yeah, you know, I think we'll, we'll try to cover this to the extent where it's going to be helpful without trying to bring you down or something like that, because that's really what's important. Here, you're getting enough bummer news from elsewhere. So we'll try to keep it all productive, positive and all that stuff. And yeah, so in that regard, I'm doing good. I'm sipping on a tea. I'm working on some code. I have 14 failed just tests this morning. So you know, and that's, that's where I'm going to be at. - -5 -00:02:01,740 --> 00:03:27,840 -Wes Bos: That's good. That's good. All right. So let's get into it. We've got some a bunch of different topics here, but your space, your routine, your focus, your your self care, and then we've got a big, big section on like, how do you even possibly slice up your day if you have a partner? And kids Yeah, where like, you just you just can't possibly both or be working at the exact same time because kids need to be watched and yelled at and all that sort of thing. So let's start off with sort of the the easiest, I think the easiest wins you can have when you when you're working from home is like what does your space look like? How can you make the space that you are sitting in are standing in or whatever, as productive as possible, so that like you sort of set yourself up for success because like I know myself if I tried to do a bunch of work just sitting on the couch or something like that, I'm not nearly as in the zone as I could possibly be is if I'm sitting at my desk and even when I'm gone for like a trip or something and I come back and I just plug in my laptop Toma monitors and everything I just get the sense of like, Ha like this is where I meant to be and everything is much easier because I'm properly set up for that. So like what are the things you need to properly set up a sort of a makeshift This is not your Instagram desk boy wanting thousand dollar setup. This is you've got a table and a rickety chair. How do you make the best of it? - -6 -00:03:28,169 --> 00:03:45,210 -Scott Tolinski: So here's what you need less you need. You need some cool pictures hung up on the wall behind you. Maybe some of those sound foams. Sound observing foams RGB some decent lighting, you need some RGB, you need a keyboard that looks like an alien mothership. Yeah, no - -7 -00:03:45,210 --> 00:03:46,130 -Wes Bos: sponsored, - -8 -00:03:46,169 --> 00:04:50,220 -Scott Tolinski: hashtag sponsored. Yeah, no, what you really need is, I mean, I like that you said set yourself up for success. Because what you really need is a space that does set you up for success. And in that regards, it's a space that can be yours feel comfortable and feel like a workspace like what is your workspace at your office feel like? I know some Open Open Office workspace plans are not the most conducive. And maybe that's what you're like at work. But what does your your zone feel like? Where do you feel like you're in the zone working and maybe that's a good idea to start with for your your desk space. To me personally, it all starts with being able to shut the door. And if you don't have a door or an office to shut, put on some really good noise cancelling headphones, getting yourself in that sort of on oral not oral but oral with the a space is really important for me personally, to just have this sort of inner focus zone time where I'm not being influenced by the dog barking or Mickey Mouse on TV or whatever. - -9 -00:04:50,220 --> 00:05:43,260 -Wes Bos: Yeah, and I honestly quite think so we're just to give you some some idea here. We're recording this on March 24. And I'll probably be released two weeks. From now, so the world might have changed a lot in the next two weeks. But as I'm looking at it right now, it looks like people are going to be working from home for at least, I would say probably three or four more months. So in some cases, your your employer will allow you to spend a little bit of money on investing on some stuff. Even if it's just you, I would probably spend a little bit of money and look for some sort of room dividers, I know, you can either get just like, even just the old twin mattress or something like that, where you can just put this thing up and give you a little bit of spaces. I know a lot of people don't have a dedicated room that we can go to especially I'm thinking of like friends that live in like bachelor apartments in New York, my wife, she doesn't have her own office. - -10 -00:05:43,260 --> 00:05:51,660 -Scott Tolinski: I mean, I have an office at our house because I work here 24 seven, but she's working from home right now she doesn't have an office. So, you know, what does that space look like? - -11 -00:05:51,960 --> 00:06:39,150 -Wes Bos: Yeah, so some sort of room divider, you can get these phone ones, or you can even just like those acoustic panels that they put up on the on the side of a gym, it's sort of hard to buy secondhand stuff right now, because people on like, my immediate thought would be like, just go on Facebook marketplace, find someone who got a bunch of OLED panels from a 70s office and, and throw that out just for the time being but like even then that's that's a little bit dry, you're gonna have to find something, some sort of thing online or in the cottage, what I've done is I've just, we have these really heavy wool blankets, I've just hung a couple of those up around me. And that just dampens all of the sound and not all of it, but it gives it dampens enough that you're in a little bit of a different mindset. - -12 -00:06:39,450 --> 00:07:10,740 -Scott Tolinski: And they make like sound deadening blankets for that as well. If you're like looking to shell out cash, which I know, most people probably aren't. But if you have like extra money, or your company is giving you money, I know I've heard about that some companies are giving their employees some money to outfit their work from home setup so that they're more productive. And maybe that's something to look into is sound deadening blankets or dividers or some sort of thing to give your your space a defined feeling. So it is your focus of space when you step in there. - -13 -00:07:11,040 --> 00:07:24,570 -Wes Bos: Yeah, other just like actual tips I have there is things that work well to hold up blankets are if you go to Home Depot, whatever they have these just like clamps like hand clamps that are spring loaded. - -14 -00:07:24,690 --> 00:07:27,060 -Scott Tolinski: No Yeah, I never thought about doing that. And heavy - -15 -00:07:27,060 --> 00:07:44,820 -Wes Bos: duty may heavy duty magnets I've bought off of Amazon before just like we in our cottage we have like spaces where there's no blinds, and we just have because if a kid needs to sleep in there, then we just throw up a tea towel or something and then we just use magnets to to keep it up over there. - -16 -00:07:45,150 --> 00:07:47,700 -Scott Tolinski: How do you attach the magnets to the wall and to the blanket, - -17 -00:07:48,020 --> 00:08:36,529 -Wes Bos: you have there's a couple different options. So if there is something metal, then the magnets are a good use case. You can also buy ferrous plates. So what does that mean? It means a piece of steel that is magnetic. Unfortunately, washers aren't ferrous, so you can't just buy some washers and stick them to the wall with to a tape or something like that. So you'd have to find something that is magnetic enough. Otherwise, if you've got even just like a piece of trim around a window or something like that, those clamps work pretty well in my use case because he kind of want to go something semi permanent. I wouldn't even be all that scared of just drilling into the ceiling or the wall. Yeah, to do something. Because if we're gonna be at this for a couple months, and it's not a big, big deal to patch a wall when things get back to normal. - -18 -00:08:36,799 --> 00:08:51,649 -Scott Tolinski: Yeah, and I agree and that's that's sort of where I'm looking at it. But then again, my space is definitely more of a permanent space. I am interested in these magnets and clamps maybe you could throw a link in the show notes to let people know exactly what you're talking about that might be might be super useful. - -19 -00:08:51,799 --> 00:09:17,029 -Wes Bos: Yeah, they're just called super strong neo dimmitt neo denee dmem they're called fishing magnets. Which is kind of fun because there's this whole genre of YouTubers that tie a very powerful magnet to a string and throw it off of a bridge or something like that. I found a murder weapon or shares like a Ford Pinto that come up - -20 -00:09:17,100 --> 00:09:23,029 -Scott Tolinski: these damage your computer or something? I'm sure they could but to what did like I guess they're they're not that - -21 -00:09:23,029 --> 00:09:38,460 -Wes Bos: well it like don't get the like, like the thousand pound one that like will pull a car. Just get these. I'm just looking at the ones that I bought. So I got a six pack of 40 kilogram that's 85 pounds. Okay, I - -22 -00:09:38,460 --> 00:09:41,190 -Scott Tolinski: was gonna say you got to get that freedom muted there. They're - -23 -00:09:41,190 --> 00:09:43,279 -Wes Bos: about the size of a loony which - -24 -00:09:44,419 --> 00:09:58,950 -Scott Tolinski: I have in my in my drawer here so yes, I'm really do yeah, I spent some time in Canada being being a Michigander for most of my life. It was a common practice for us to head up to Windsor or someplace around there. So - -25 -00:09:59,029 --> 00:10:03,960 -Wes Bos: just getting a little late. Any game when they had they had to needs to when you went there, right? Oh, yeah. - -26 -00:10:04,159 --> 00:10:12,390 -Scott Tolinski: Tunis? Yeah, yeah, Looney Tunes. And like I learned at the bar you got to ask for like a blue not like a Labatt blue. Like, can I get a blue? - -27 -00:10:12,480 --> 00:10:13,260 -Wes Bos: Oh really? - -28 -00:10:13,440 --> 00:10:20,299 -Scott Tolinski: Yeah, they like there. I was like, and they were like, What are you talking about? It was in Grand bend. - -29 -00:10:20,610 --> 00:10:29,340 -Wes Bos: Oh, yeah. Oh yeah, I know about that. Yeah, that seems like an area of Canada. That would drink a lot of blue. Yeah, yeah. Did you get the blue flu forever? No, I - -30 -00:10:29,340 --> 00:10:29,880 -Unknown: did not get - -31 -00:10:31,230 --> 00:10:36,840 -Wes Bos: a flu is in university and like, Don't drink too much blue. You're gonna get the blue flu. - -32 -00:10:36,870 --> 00:10:38,899 -Scott Tolinski: See? Yeah, that's hilarious. Yeah. - -33 -00:10:41,820 --> 00:10:58,140 -Wes Bos: Anyways, what else do you need for your space? keyboard monitor. Just some sort of external keyboard? I am. I hate hunching over my laptop. I know Scott you full time drive on your laptop. Is that true? Nope. Oh, you know you've got an external keyboard. Yeah, you sick pick that one. - -34 -00:10:58,320 --> 00:12:28,649 -Scott Tolinski: I got an external keyboard and I prefer the giant Mac trackpad is my go to for a mouse. I don't like mice. Really? I don't know why. And a lot of people really like their their mice there. But you can have the trackpad for me. It's always been the golden because I love all my gestures. I love. Gotta have my gestures. Man. I'm so used to it. So even when I get a desktop computer, I always opt for the external trackpad. Oh, yeah. I have the MX Master two, which I hilariously bought. Because it was on sale and did not realize it was on sale, because they're releasing the three. Oh, I'm just looking like that. The frustrating thing about everybody working with a home is everything is sold out like the Elgato cam link is totally sold out everywhere. Really. A lot of like audio cables are all sold out right now. The MX Master three sold out looks like the two is still available, which is good. For those of you don't know the Elgato cam link is this neat little thing that has a USB on one end and an HDMI in the other. And as long as your DSLR or mirrorless, or high end camera supports a no output, HDMI output like a no display output as in, there's no crap on the display, then you can use your DSLR, mirrorless, whatever, as a webcam. So if you ever see anybody with a super high resolution webcam, that's what we're doing. I record all of my videos through the Elgato cam link. It's a really cool device if you have a nice camera like that. - -35 -00:12:29,010 --> 00:13:26,549 -Wes Bos: Yeah, it's it's I just got one recently and it is super cool. Yeah, it's such a step up like like, I'm not saying go out and buy this. But if you have it, you can't even buy it now. But if you do have a nice SLR like there's something about meeting with someone who has good video and audio that just makes you feel like you're in the room like Scott and I are recording this podcast, a lot of people don't even know that we're do this over zoom. So yeah, that's Sunday. Like it's the worst. When you talk to people it's like echoey, and their audio is awful. And their their video is awful. There's just like small thing like maybe like what are some good things that you can do to make good audio and video as you're talking to people from home. But one of the the biggest cheats I have is just put a T shirt underneath your keyboard. So it doesn't sound like your bow bow bow bow bow bow bow bow, when you're, you're talking over the thing, because you always had to tell people to mute themselves. So that's an easy one, you probably have a T shirt. - -36 -00:13:26,880 --> 00:13:29,159 -Scott Tolinski: I Yeah, that's a good idea. I don't do that. So - -37 -00:13:29,580 --> 00:13:49,890 -Wes Bos: I did it. When I, when I initially started doing video recording, I only I only had like a tiny little tripod to record myself and every vibration from my typing would follow its way back up back up into the microphone. Hmm. And just simply putting a T shirt underneath the keyboard absorbed all of those sounds interesting. So - -38 -00:13:49,890 --> 00:14:37,350 -Scott Tolinski: my keyboard, by the way, is the key kran k one. It's a wireless keyboard, it's semi it's a mechanical keyboard. But this got these really low profile mechanical switches and it feels much more like typing on the Mac laptop than it does a mechanical keyboard. I really really disliked this keyboard when I first bought it because it triggered key presses when you just rested your fingers on it. And they've since come out with like a third iteration of this one. And it is awesome now so I'm a huge fan of this keyboard now so if you're looking for something like that, that feels a little bit more like the Mac keyboard, check it out. It's the the key Chrono k one and it has a fancy le DS that change all the time. So you can look like Instagram, desk person, - -39 -00:14:37,890 --> 00:14:44,610 -Wes Bos: desk boy. Um, what else we have your external monitors, obviously super helpful as well. - -40 -00:14:44,610 --> 00:14:46,140 -Scott Tolinski: super helpful. - -41 -00:14:46,200 --> 00:15:11,130 -Wes Bos: You've got one you can throw together and just raising up your laptop on even just a set of books, something like that. So it's just at a bit of a higher level that's going to prevent any fatigue that you have in may seem silly but if you're going to be spending 468 hours a day on this thing, make sure that you have good ergonomics is you don't want to come out of this with a RSI injury or something like that. - -42 -00:15:11,399 --> 00:15:12,870 -Scott Tolinski: What is RSI stands for - -43 -00:15:13,020 --> 00:15:17,760 -Wes Bos: repetitive stress injury RSI injury, that's like ATM machine. - -44 -00:15:18,029 --> 00:15:51,539 -Scott Tolinski: Yeah, ATM machine, right, I got carpal tunnel from breaking. Like, there's so much repeated stress on your wrist, I got carpal tunnel, and I had to wear those like 90s rollerblading wrist guards for a little while, while my wrist healed. And it was a really huge bummer because the trackpad really aggravated. And I really loved using my trackpad, so I had to go to believe it or not a Wakeham tablet, or wake up however, you like to say it was the most ergonomic for me, when I had carpal tunnel, it worked really well. But uh, luckily, those kind of injuries can heal themselves if you if you let them. So - -45 -00:15:52,169 --> 00:16:19,740 -Wes Bos: a lasting tip we have here for space is don't work from your bed in your couch. It's very tempting, especially if it's like, oh, I'm working from home. But there's nothing, especially for me nothing less motivating than sitting on your bed. You're also mixing up spaces. Yes, which is not, we're all trapped inside right now. So if your bed is where you work, but it's also where you sleep at night, and you're just you're just mixing up all the spaces. And that's not good for your health overall. - -46 -00:16:19,860 --> 00:17:48,150 -Scott Tolinski: Yeah, it's not good specifically for your sleep, if you start working in your bed, because it trains your brain to say, this is the place for work. And then when you go to lay down for sleep, your brains still thinking that it's in. Well, this is a workspace. So you know, yeah, definitely something to think about. So, next section here we have is on our routines, which are also very important because you know, you have a routine when you go to work, you wake up you do this, you do that you get ready, you go to work, and then you come home you Do you know your normal stuff. But now that we're we're working from home, it's really easy to say, hey, screw this routine. I'm working from home, I'm gonna sleep in, I'm gonna do this, do that whatever. Well, I don't want to say that our routine hasn't changed, because it's certainly changed. And we have been waking up later. But luckily, that's because Landon has been sleeping in super light for some reason. So if you can get it, yeah, well, we can get it as a new parent. So we're definitely pushing it a little bit there in terms of our normal wake up time. We're not waking up at, you know, six, 630, whatever. And so I think the most important thing is to at least have some sort of a semblance of a routine, specifically for yourself care. And it's funny that we talked about this in the previous episode with Courtney, where you say like, you know, really, fixing yourself up shaving can do wonders. And as I say this, I had to put on a hat because my hair looked crazy. I have the worst scraggly beard ever right now. I am not following this. I - -47 -00:17:48,150 --> 00:17:53,910 -Wes Bos: shaved after Courtney told us to shave on the last episode. I'm nicely shaving. Yeah, - -48 -00:17:53,969 --> 00:18:15,830 -Scott Tolinski: I think she would prefer if I would, too. So, you know, I need to step up in that regard. For me, it has been difficult. And certainly with my sort of situation, as things go and things get a little bit more overwhelming. That's one of the first things to go for me. And it really makes a negative impact in my life. So I do need to add this to my routine. And - -49 -00:18:16,070 --> 00:18:46,100 -Wes Bos: by the way, speaking of this is somewhat unrelated. But somebody on Twitter heard that I was having trouble flossing, he sent me this big message about how the mouth is the gateway to disease and all this stuff. Oh, and it worked. I'm shook. So I'm shook Scared Straight. And he's like, he's like, honestly, he's like, he's like the I think he said the apps never worked for him. But like, knowing why you should floss is what worked for him. And I was like, Oh, that makes a lot of sense. And I've been been on my game. - -50 -00:18:46,340 --> 00:18:56,760 -Scott Tolinski: Yeah, I think Courtney told me something about like, in it, like extending your life by like, 10 years or something. And I was just like, Oh, I want to die. So yeah, that's when I started flossing. - -51 -00:18:57,800 --> 00:19:42,390 -Wes Bos: I'm gonna have a great smile and be 120. Yeah. All right. Yeah. Next up, we have here is clear start and stop times, we'll talk about this a little bit more, because start and stop means they'll stuff a little bit differently right now for a lot of people. But even if that's you're working five to 10, or five 5am to 11, or you're working three hours in the morning and three hours in the evening, just to get your time in just being clear with those times where you can look, I asked on Twitter, like what are your tips for making this happen and a bunch of people just sent me a photo of their whiteboard at their house where they clearly had every hour nice and planned out. And that way, work doesn't bleed into family life and vice versa. - -52 -00:19:42,860 --> 00:20:31,310 -Scott Tolinski: Yeah, that is important to keep those boundaries. And lastly, we have taking breaks it's just so important to take breaks, take breaks, go for a walk. I know that some places are in like stay at home mode, but I'm pretty sure all of those stay at home modes allow you to take over Walk around your neighborhood. Unfortunately, everybody since everybody is at home, in our neighborhood, I don't know what it's like where everybody else lives. But in our neighborhood, everybody has say, Oh, I can't go anywhere. So I guess I'm going to take my dog for a walk and and what you see is you end up getting this experience where you see somebody on the next block, and then you got to make a try. All right, I'm turning here. And so our walks are no longer linear down one line down another line. We're just, yeah, it's totally walk Pac Man. We're just avoiding - -53 -00:20:31,310 --> 00:21:03,390 -Wes Bos: people at all costs. Oh, that's great. We should also say like, we understand the the privilege that we have from having a job, and being able to work from home, like I asked for tips on Twitter, I got a couple angry people being like you're looking at a job. And also like, yes, we understand that. But we also understand that there are a lot of people who will likely get to keep their jobs through this and are trying to navigate through working from home. And that's what this is. That's what this episode is for. - -54 -00:21:03,720 --> 00:21:41,700 -Scott Tolinski: Absolutely. And if you are working from home, right now, it might be a good time to pick up a little side project or build something that could help your your resume out help your your skills, grow any of those things, now is a good time to sharpen those skills. And if you're going to sharpen those skills, you got to have someplace to host your domains, any projects that you're working on, and what better way to host them than on a dot tech domain to let everybody know that your domain is well, tech related. I know, West recently used the uses what was the the URL uses dot tech - -55 -00:21:41,760 --> 00:21:42,480 -Wes Bos: uses dot - -56 -00:21:42,480 --> 00:22:54,150 -Scott Tolinski: tech, such a good domain. West recently did this uses dot tech website which shows us links to what all sorts of web developers are using and are seen. And this is like the perfect use case for this kind of domain. And honestly, if I were to see this site, let's say I'm a hiring manager, right? And somebody says I'm looking for a developer to do a react gig and somebody sent me uses that tech and says, Hey, I made this as a fun little side project, you just did this goofing around, I would say, holy cow, you're good. Let me hire you. Let's talk about this. Because this looks great. It feels great. It functions great. And not to mention, it's on a dot tech domain. So if you need a dot tech domain, you're going to want to head to go dot .TECH forward slash syntax 2020. If you want to click that link, we'll have the link in the show notes. The description of this episode, you can use the coupon code is syntax 2020 and get 90. That's right. 90% off of a one five or 10 year domain get 90% off a 10 year domain. That's crazy. So head to go dot tech forward slash syntax 2020. Check it out. - -57 -00:22:54,150 --> 00:23:21,000 -Wes Bos: Yes, I'm actually kind of excited to see what projects come out of this. Yeah, certainly, it's hard to work from home. But there's also like a lot of after work is done. You might have a bunch of extra time on your hands, depending on your situation. And it's no better time to to do that side project you've always been thinking about. So grab a dot tech domain name for it. Let us know what you've been working on Twitter syntax FM as well. - -58 -00:23:21,180 --> 00:23:32,400 -Scott Tolinski: Yeah, we'll share it out. By the way, Wes, I'm looking at this piece of tech. One thing I'm just noticing on this now that I didn't notice before is your very subtle, non blurry drop shadows on these little boxes. - -59 -00:23:32,700 --> 00:23:39,060 -Wes Bos: Ah, thank you. Yeah, very, very subtle. You have to have a very expensive monitor to be able to see it. - -60 -00:23:39,570 --> 00:23:41,940 -Scott Tolinski: Yeah, right. No, not passing contrast thing. So - -61 -00:23:42,330 --> 00:23:53,820 -Wes Bos: yeah, you know what, that that site? There's so many people on it now that the try filter for someone that is like JavaScript or developer? Like try filter first, something that has a lot of people in it? 266 - -62 -00:23:53,850 --> 00:24:03,000 -Scott Tolinski: Yeah, JavaScript. Yeah. Feel the lag? Oh, it didn't like me. No, it must be that 32 gigs of memory. I'm rockin my CPU. - -63 -00:24:03,480 --> 00:24:05,790 -Wes Bos: There's some sort of issue I'm getting No, - -64 -00:24:06,000 --> 00:24:08,910 -Scott Tolinski: man, I'm clicking around, oh, I can click and click and no lag. - -65 -00:24:08,970 --> 00:24:34,410 -Wes Bos: I like I was running rack dev tools on it. And I was getting like 200 milliseconds of lag for painting it. And I think it's because of how many people are on the website. So I thought that would make a good video or something like that, figuring out what's wrong and how we can fix it like maybe virtual scrolling or something like that. Yeah, virtualization is probably going to be your key. Yeah, that's kind - -66 -00:24:34,410 --> 00:24:57,690 -Scott Tolinski: of cool. Like like obviously wasn't a problem when we first did it. But now there's what 335 people on the website and it's it's too many right? So you need to look at solutions for fixing that so yeah, maybe maybe you'll find a neat little thing like I found out what the data you are I when I was letting you know a couple hundred series with data you our eyes and that was that was running my my CPU. Give me some jam. Wonder. - -67 -00:24:57,690 --> 00:25:23,400 -Wes Bos: Yeah, that that I'm sure I'll find something Weird cuz I like I put like 20 minutes into it and it just couldn't figure, like I knew that it was only happening on large paints. So it might just be the fact that it needs to paint 335 people to the writing, but I still haven't haven't dug into it that much. So that's a good, my I'm not sure if we're using data your eyes anywhere. But yeah, it's probably something weird like that, you know, it's probably something weird. Yeah. Cool. - -68 -00:25:23,430 --> 00:26:15,150 -Scott Tolinski: So let's get back into it, which is going to be the next aspect, which is focus, which we talk a lot about, we talked a little bit about in the previous episode. And we've largely have the same advice here. When you're working from home, it is really key to focus, it's key to really know what you're going to be able to do for the day. Because there are we'll talk about things with your, your partner your family, if you have other people working at your house or living at your house or your workspace permit, whatever. But it's important to know what you should and can accomplish in a day by making a detailed to do list of everything, right. And that way you can check things off, you can feel productive, you can know that you're getting work done. And you can just really have that good visualization of all of the things that you need to do. So you're not like off drifting thinking about playing video games or hanging out with your family or whatever. - -69 -00:26:15,600 --> 00:27:10,200 -Wes Bos: Yeah, I'm a big fan of making to do lists. We've talked about this a million times over. But honestly, you need those small little wins, especially during this time where you might not feel all that motivated to do your work because of what's going on. And I find myself like I found myself sitting down yesterday, which was Monday, I had a whole week off with our kids to figure out what was going on. And I sat down on Monday and I just like paralyzed with what do I do first, right? Mm hmm. So I just went into my app, and I just did a brain dump of all the things that I'd like to get done in the day, or maybe the next couple days, and then reorder them. And then I just started checking it off and say, Okay, I'm getting back into the back into the rhythm. And at the end of the day, I looked at my list, I said, I did everything on that list, I feel a lot better about what I've got done in this day. So to do list, we've we say it all the time, it seems silly, but but absolutely get yourself set up. - -70 -00:27:11,280 --> 00:29:05,760 -Scott Tolinski: The next one, here is another thing we talked about that we talked about focus on many times, it's almost so redundant at this point. But eating that frog, really headed setting like a high value thing that you want to get done for the day will definitely make you feel accomplished. And you want to feel accomplished in these times. You don't want to feel like you're just wasting away. Because you know what, if we're being entirely honest here, one of the biggest things that I've used to distract myself from the current situation is my work. You know, it's really just pouring myself into the code pouring myself into the videos and the editing and whatever. And it, it makes everything just a little bit easier because you're not thinking about, you know, the current situation. Some other tips I have are to don't watch or check the news during work hours. If you have apps that send you notifications for news, turn that stuff off, turn off any notifications, remove the news app from your home screen, whatever put it somewhere that's not accessible. So you're not like mindlessly pulling up the news that do not have the TV news odd, nothing is going to change in one minute that is going to be that important, and it's going to distract you, it's going to make you anxious, and it's going to largely make you less productive, which honestly, this isn't all about being productive. But if we're talking about getting work done, don't let that stuff creep into your life. In fact, I've added a ton of filters to my apps lately on Reddit and Twitter and whatever I'm adding all of the filters for any keyword of any of our current situation or political climate, because you know what, if I want to seek that news out, I will seek that news out and I will do so on my own time. I don't need Twitter or social media blabbing just constant, just terror Abby, because it's going to make me anxious and it's going to make me feel bad. So I block all those terms. And if I want to seek that stuff out, which I do, I will seek it out on my own time. - -71 -00:29:06,150 --> 00:29:48,600 -Wes Bos: Yeah, I heard a really good turn the other day. It's called Doom scrolling. where like, I catch myself doing it as well. Like, after you put the kids to bed, you can open your phone and just start scrolling through the news or through Reddit Coronavirus or whatever and then it's almost like I'm just like looking for more bad news or looking for how I'll and then I'm like catch myself like what am I doing? Like this doesn't make me feel good. It's affecting my sleep, all that stuff. It's important to stay up to date with what's going on. But the fact that I was just using it as like entertainment almost, or just like a sign to fill me up. I don't don't I think that that's just distracting. Just try catch yourself if that's happening. - -72 -00:29:48,990 --> 00:31:23,430 -Scott Tolinski: Yeah, it's it's so easy to it's so easy. And I know it's like it's funny because Courtney's news app like sent her a notification and it says Hi Mark. The world's ending and like that, like no matter what she's doing, if she gets that notification, it's gonna freak her out. So like, turn that stuff off. And I guess that's leads into the next section, which is self care, which is really important in these times we're all stressed out, we're all feeling the burn. We're all feeling you know, really bad overall, to use the, the biggest word ever. But in meat, my personal viewpoint, we've been taking great steps to sort of, especially recently to make ourselves feel better. We've been playing a game Animal Crossing, which Courtney talked about in the last episode, which seriously is just so relaxing and meditative. My brother asked about this game. He's like, I don't know anything about this game. What do you do? I'm like, Well, yeah, you fish and you catch bugs, and you walk around the forest. And you pull up weeds. And it's just, it's, it's sort of boring, but it's so cute and relaxing. And it feels so good. So if I find things like that, don't you know, it's funny, we put on a Netflix show that I really like I really like altered carbon, which is like a cyberpunk futuristic show. We watch like five minutes of it, and it was just like super violence, you know, and typically, I'd be really into that. And I just felt too too heavy for me. I said, we got to shut this off. We got to put on something a little bit more mindless, a little bit more relaxing. So we put on love is blind and that was a lot of fun. So - -73 -00:31:24,300 --> 00:31:26,640 -Wes Bos: is that that new Netflix show that everyone's talking about? - -74 -00:31:26,730 --> 00:31:45,390 -Scott Tolinski: Yeah, yeah, it's a train wreck. It's one of those you know, romance shows where they put people in a they put people in different pods and then they like ask them to married people ask each other to marry each other without ever seeing them. It's just It's It's wild. It's a little bit of a train wreck but it's it's good mindless TV. - -75 -00:31:47,730 --> 00:31:50,550 -Wes Bos: I'll allow just in these times, right? - -76 -00:31:51,840 --> 00:31:53,130 -Scott Tolinski: Things like that. You know, - -77 -00:31:54,390 --> 00:32:12,240 -Wes Bos: exercise obviously is another important one. Our gym gyms are obviously closed right now. So one thing my wife and I did immediately is we went out and bought an exercise bike because peloton no we're not not much of rich a whole - -78 -00:32:12,270 --> 00:32:17,670 -Scott Tolinski: I know Yeah. peloton owners but yeah, that is no - -79 -00:32:17,670 --> 00:32:31,440 -Wes Bos: I'm I it seems really cool. And I told my wife if she can do like two years of this then we can get a peloton but like, like we got like one of the fast Schwinn ones and it was it was still like, like a fourth of the cost. - -80 -00:32:31,469 --> 00:32:32,280 -Scott Tolinski: Yeah, of - -81 -00:32:32,610 --> 00:32:41,850 -Wes Bos: of what a peloton would cost? Maybe at some point. Yeah, like what's the subscription? Like 30 bucks a month? Yeah, let's let's look it up. - -82 -00:32:42,180 --> 00:32:52,440 -Scott Tolinski: You could join the peloton in the corner of a room meme where everybody like puts their peloton, like overlooking a giant window and some ritzy apartment. - -83 -00:32:52,890 --> 00:32:54,930 -Wes Bos: It seems pretty sweet. Yeah, I - -84 -00:32:54,930 --> 00:32:58,590 -Scott Tolinski: know. I say this is somebody who would gladly take one you know, - -85 -00:32:58,860 --> 00:33:00,270 -Unknown: oh key. - -86 -00:33:01,560 --> 00:33:03,930 -Scott Tolinski: I'm gonna get I'm gonna guess that means this expensive West is 49 - -87 -00:33:03,930 --> 00:33:10,170 -Wes Bos: bucks a month. That's more than I pay for my gym membership, like three times over. - -88 -00:33:11,220 --> 00:33:16,020 -Scott Tolinski: We spend 100 bucks a month for our gym membership in Michigan. It was a really dope gym. - -89 -00:33:16,020 --> 00:33:25,680 -Wes Bos: Oh, yeah, we I used to pay like 60 a person and then like another one open up down the road. That was like nicer and 20 bucks a month. I couldn't believe it. - -90 -00:33:26,730 --> 00:34:59,730 -Scott Tolinski: If you are looking to get out of this with not spending a ton of money though. There is this podcast I recommended as a sick pick the other day. And do want to clarify this. These guys are very sarcastic. They like made some comments. Like immediately after I suggested this podcast they like made some comment about hating marijuana and being super religious. And like hating everything. Like it was like very weird, but they were being super sarcastic. And if you didn't know them, and you just listen to it, you'd be like, Oh, these guys are like, very intense. Like the joke was way overboard. And like I just like, Oh crap, I just suggested this thing, and people aren't gonna get the jokes. But this podcast is really good. And it's all science based. But this episode most recently talked about what you can do for workouts both cheaply and expensively working from home with like minimal to no equipment. And it's fantastic because they basically go through every single muscle group and say, Alright, this is what you can do if you have no equipment. This is what you can do with a little bit of equipment. And I think that's really great. I personally have a set of what we have a home gym, right? But if I if you don't have a home gym, a squat rack and whatever the easiest cheapest thing you can do is buy a set of adjustable dumbbells. We have the power blocks and really like them. They go from 2.5 pounds all the way up to 70 pounds at a point or 2.5 pound increments. So you can do just about everything. Like you could do a full body workout with those things, no problem and it's one piece of equipment. - -91 -00:35:00,179 --> 00:35:12,090 -Wes Bos: I saw a set of those on marketplace the other day, and it had been posted for like 20 minutes. I was like them, they wonder like 20 bucks have gone. Oh, but they're, they're not cheap at all. There are hundreds, hundreds of so it's not the cheapest thing you can do. - -92 -00:35:12,149 --> 00:35:24,110 -Scott Tolinski: It's not the cheapest thing you can do. But it's like one piece of equipment in their lives. It's a tiny piece of equipment, it lives somewhere, and you will use it forever. We've had ours like for years, and they they feel brand new. So - -93 -00:35:24,110 --> 00:35:33,780 -Wes Bos: a set of five to 50 is 600 bucks, but honestly know that what? Yeah, look them up. That's not their normal pricing that - -94 -00:35:33,780 --> 00:35:41,940 -Scott Tolinski: must be inflated like crazy. MSRP $800. No, that's not right. That's nice. - -95 -00:35:41,960 --> 00:36:07,860 -Wes Bos: I've been looking at them ever since you you suggested them. And I always see them as being like, silly, because I saw sometimes I see them for like used like one for 150 bucks. That's not but like, the thing about these power blocks is that they hold their value. I've seen a set of like 10 year old ones go for hundreds of dollars. So you'd be able to sell them again. No problem. Yeah, these are. - -96 -00:36:07,860 --> 00:36:11,940 -Scott Tolinski: These are crazy. These are these prices are crazy. We did not pay that much. These must be - -97 -00:36:11,940 --> 00:36:15,810 -Wes Bos: no you got yours used right? No bottom. No. Oh, - -98 -00:36:16,190 --> 00:36:28,050 -Scott Tolinski: yeah. There's several different brands too. I know. Bowflex has won. A bunch of different people make when either way adjustable dumbbells, however you can get them really will go a long way for for working out. The Bowflex - -99 -00:36:28,050 --> 00:36:33,360 -Wes Bos: five to 52 pound a status for 20 Nice. - -100 -00:36:33,360 --> 00:36:38,400 -Scott Tolinski: Those got an ad edited. That's got to be maybe that maybe the Canadian? You guys are getting hosed. - -101 -00:36:38,879 --> 00:36:48,690 -Wes Bos: Bunch of hoses. That's 300 bucks us. Yeah, we're getting. Do you know that the term hoser comes from whoever lost the hockey game had to hose down the rink? - -102 -00:36:48,710 --> 00:37:22,380 -Scott Tolinski: No, I didn't. I will call it a hose or your hose. You ever said that Bob and Doug McKenzie movie, whatever that was? Ah, Doug McKenzie. That was like the best movie ever. Strange brew? No, I haven't. Oh, my God, you gotta see this strange brew, Bob and Doug McKenzie, a pair of fictional Canadian brothers. It's Rick maraniss and Dave Thomas. It's so good. The movie is fantastic. They're formed out of a TV either way. It's strange. bruco. Watch it very Canadian. Awesome. And obviously, there's hockey involved in the Canadian movie. So - -103 -00:37:24,660 --> 00:38:04,560 -Wes Bos: we have I've seen a lot of people doing like zoom happy hours because like one thing you do miss working from home is that you don't have that social. Like just chit chatting with people. And it's funny. Like I've even seen people go as far to say we're having a zoom meeting for half an hour. And you may not talk about work. Yeah, seems silly. But honestly, I think that like a lot of people need that just the the little chitchat back and forth talking about what's going on in your life because you do do that in a workplace. As someone who works from home I love missing out on the chitchat because I don't like the chit chat. But a lot of people need it. Oh, - -104 -00:38:04,590 --> 00:38:19,530 -Scott Tolinski: I like that to chat up. Honestly. I really miss being able to go to my coworkers and say, hey, I've got to do this with my code. Is this a bad idea? And they can be like, Yeah, what what are you thinking? Why would you do that? And I like oh, yeah, that is done. Wait, - -105 -00:38:19,610 --> 00:38:21,480 -Wes Bos: I could talk you off a ledge. Yeah, I'm - -106 -00:38:21,480 --> 00:39:23,250 -Scott Tolinski: having a bad idea. Or, you know, Hey, man, can you I've been working on this bug for two hours. Oh, I fixed it. Okay, you know, yeah, that kind of thing. I really missed that. Next one is don't over rely on substances. I know it's tough right now but a couple glasses of wine or whatever every night that's cool, whatever. Whatever fits your fancy but like I don't know a note about addiction or overly abusing substances I suppose. I don't want to be preachy but like, man, if you have too much alcohol or you just pounding it, that's not helping the situation or are too much of anything too much relying on substances I know it's so funny because like my anxiety makes me want to say like oh don't don't do anything because I don't want my immune system to be compromised to the point where I haven't been drinking at all just because I don't want my immune system messed up. But in the same regard, they just announced yesterday that in what we're recording this they announced yesterday in Colorado that liquor stores and marijuana shops are not essential services and then within like - -107 -00:39:23,250 --> 00:39:24,170 -Wes Bos: they're not - -108 -00:39:24,300 --> 00:39:46,860 -Scott Tolinski: they are not in they needed to close and so within like moments of announcing that there were our long lines like wrapping around every liquor store and dispensary in this in the city, really I mean, it was craziness you can find pictures of it. And like I don't know within within an hour they they were like okay, sorry. Well, we'll pull that back. You can have your you can have your alcohol. - -109 -00:39:47,400 --> 00:39:48,030 -Unknown: Yeah, and now - -110 -00:39:48,030 --> 00:39:57,300 -Scott Tolinski: they all have a you know, curbside pickup so you can go pick up those edibles on the curbside or something. So it's a interesting situation. Nonetheless, - -111 -00:39:57,540 --> 00:40:05,790 -Wes Bos: that is because they just announced what is Isn't essential here in Ontario and cannabis and alcohol is essential. It is now - -112 -00:40:05,880 --> 00:40:06,840 -Unknown: open. Yeah. However, if - -113 -00:40:06,840 --> 00:40:27,840 -Wes Bos: you order online, they will no longer bring it to your door. And they have to check if you're 19. So you they have you have to drive to the post office and show the person their ID and then drive home, which seems a little counterproductive when you're trying to keep people away, but right, that's how they made their decision there. - -114 -00:40:28,770 --> 00:42:13,860 -Scott Tolinski: I have a couple more here. One of them is an inside joke between me and Courtney which is your vd we always called vitamin D v. d. And like, will be on a walk. It's Holly I don't know, like people are who are not in tune to our lingo. Probably you're like what the hell because we'll be on our walk and we'll be like, getting some vd and we crack up about it. But get that vitamin D get some sun in your backyard. Let that son come in if you if you if you can get it. If not, I take a small vitamin D supplement. Don't go crazy overboard with it. But vitamin D can help your immune system right now can also help a lot of things. So just try to get some sun try to be outside a little bit get that vitamin D. Or that vd as we say, and also don't stress yourself out at night. We want to optimize and maximize our sleep here. And it was even like last night, I think it was like last night I I saw a cornice phone like the light was on when we were like trying to go to bed. I was just thank you. She better not be googling Coronavirus stuff. Sure nothing like was and it was stressing the both of us out. And last night. I even talked about it when we were in bed. And it was like, Why? Why am I doing that. So I think it's important. Something we're certainly gonna try to do more of but like set a boundary and say like after nine o'clock, no more CV talk, nothing COVID did not doesn't exist after this time. We don't want to stress ourselves out before sleep. I didn't get good sleep last night. And that's not helping anything. So I think we want to optimize and maximize our ability to shut our brain off before before bedtime. And if you want to optimize and maximize your data, you're going to check out prismic.io, which is a super easy way to make your website editable for the entire team wants to want to talk a little bit about Prismic. - -115 -00:42:14,280 --> 00:43:37,590 -Wes Bos: Yes, Christmas is a headless CMS, it's got a REST API. It's got a graph qL API, the whole idea is you sign in you create your data types, you relate them to each other. And that spits out a graph, qL API and the other end, and then you pull that data into your react app, your view app, or your iPhone app, whatever you're using, you can pull that data on into your app. So it works with next Jess Knox Gatsby, they've got all kinds of really good starters. If you want to try it out for a project that maybe with your dot tech domain name, hey, How awesome would it be if you use both of our sponsors? In a single project? Yeah, right. Now you want to head over to prismic.io forward slash syntax. They've got a nice little layout of the different features that they have their previews that they have the image optimization that they have, they have two different starters, one for react and one for view. They sort of pitted us Scott versus Wes view versus react. It's a hilarious little landing page. Check it out. prismic.io forward slash syntax. Thanks so much to Prismic for sponsoring. Cool. Yeah, let's get into this last part, which quite honestly, I don't have a whole lot of answers here. Just yet. I think a lot of people are trying to figure it out is there's a lot of us who have kids, that their childcare is cancelled. So the kids are at home with them. And then there's two parents or our childcare wasn't - -116 -00:43:37,590 --> 00:43:42,510 -Scott Tolinski: even canceled. We just didn't want to have them in childcare right now. Because Oh, yeah, it's - -117 -00:43:42,510 --> 00:43:44,250 -Wes Bos: still it's still on in Colorado. - -118 -00:43:44,280 --> 00:43:49,110 -Scott Tolinski: Well, as of yesterday, maybe not. But up until yesterday. Yes. Who was Oh, yeah. - -119 -00:43:49,410 --> 00:44:26,700 -Wes Bos: Or like, maybe you're single single parent with now all sudden, your kid is at home because you don't have childcare? Like there's a lot of people in situations where it's just not possible for both parents to work as well as have their kids at home. So I reached out on Twitter and said like, like, okay, like, how are you? How are you even doing this? Because it's certainly not possible for both of you to put in a solid eight hours a day when when the kids are at home. So like, like, first of all props to you for for doing this. This is not hard. Especially like, like I know. I mean, it's not easy. It's Yeah, it's not what I say. It's not hard. Yeah. - -120 -00:44:28,920 --> 00:44:29,820 -Unknown: Do you got Yes, not - -121 -00:44:29,820 --> 00:44:38,340 -Wes Bos: hard. This hard. This meme the other day is And just like that, no one ever asked to stay at home mom what they do all day. Hey, all - -122 -00:44:38,340 --> 00:44:42,900 -Scott Tolinski: right. Yes, I know. So many props to stay at home moms. Oh my god. - -123 -00:44:43,170 --> 00:46:21,780 -Wes Bos: It's really hard to be at home with your kids all day. Like some people are really good at it. But certainly people who are used to working a full day are not used to it and you're sort of thrown into this. Yes. So these tips can vary greatly depending on your job, your significant others job, how many kids you have how old your kids are Whether they have like online school or not, but we're just going to rattle through some of the tips that we have here. So what's been, I think what's been working so far for myself, as well as a bunch of other people is just slicing your day up so that each person gets a set and a number of hours. So whether that's each person, like some people said, I'm been working, waking up at 5am. And working until 11, hmm. And then my significant other takes the next five or six hours from there, some of them do two hours on two hours off two hours on two hours off, just sort of trading back and forth. Some people say like, I get a couple hours done in the morning, and then I get a couple hours done in the afternoon, I think really just trying to like, look at it and say, This is gonna be hard. But how can we slice up our time so that we can both get the amount of time that we needed even if your significant other doesn't even have a job, being home with the kids all day is is incredibly tough. So like, what I've been doing with my wife is just like, just jumping in once or twice a day and giving her a 30 minute break? Totally. So she could just go do whatever, she can do some work, or go do a workout, or would just be away from everybody else for a little little bit of time. So you can maintain your sanity? - -124 -00:46:22,169 --> 00:47:26,490 -Scott Tolinski: Yeah, totally. And communication is so key in that point where Courtney's work is a little bit different than mine in regards that, you know, she largely requires to be at work testing kids, and now that's not going to happen. So she, it's not that she doesn't have a ton of stuff to do, she has a lot of reports to write and all those things, but it's very different. And so the way we do it is the beginning of the day, she'll say I need three hours, four hours to write today. And you can have any of that other time to work. Because, you know, she knows that my business is sort of a priority right now, because we don't even know what the status of her jobs going to be. So we're splitting it up in those ways. And sometimes, this is an appropriate thing to give yourselves both a little break and, and sometimes uncle Mickey needs to come over for a visit. And Landon gets to watch the Mickey Mouse for a little bit while we clean or get stuff done that we couldn't otherwise do. If we were all just watching or playing with the kids. 24 seven. So yeah, don't don't let your field self feel bad if uncle Mickey comes comes to visit. And - -125 -00:47:27,299 --> 00:48:10,470 -Wes Bos: other people said that they are sort of having like focused time where that's where you can schedule all of your calls, all of your deep work needs to happen. And then you can sort of have like, half focus time where if you need to have your laptop out and do a couple emails are fix a couple things. Well, you're you're watching over the kids and then that's a good way to do it as well. So because like it's, it's not like you can't just slap the kids in front of the TV for an hour as well. That's certainly a fine thing to do at this point in time. It's just that you're not going to get that like deep work. I'm not gonna record a video tutorial, while my kids are watching Dora the Explorer in the background, you know, but I certainly could reply to some emails or do a few tweets or something like that. - -126 -00:48:10,889 --> 00:48:23,280 -Scott Tolinski: Yeah, totally. Yeah. And it's all just a balance. You got to I don't know, we're all just doing our best at this point. You know, so don't let yourself get beat up over maybe not winning the parent of the Year award right now. - -127 -00:48:23,819 --> 00:48:26,250 -Wes Bos: I'm gonna Mickey is gonna win the parent of the Year award. - -128 -00:48:26,309 --> 00:48:54,330 -Scott Tolinski: He is Yeah, we were recording that last episode with Courtney and, and myself here. And since we were doing that Brooklyn was taking a nap. And Landon was watching Mickey Mouse. But he when the episode changed, like the episode was over, he was like freaking he was upset. He was like, oh, episode Vicki rose. back and then we can finish the episode. Episode. Yeah, it's it's rough. - -129 -00:48:54,810 --> 00:49:18,690 -Wes Bos: Other tips you have here is just in terms of coworkers have empathy for your co workers because you might not understand what's going on in their house if they can't get back to you as quick as they want or they miss a call or whatever. So just know that everybody's in a really a bit of a weird situation right now and think about that check in on on people as well if you're not hearing from them as much worth making sure that everybody's okay as well. - -130 -00:49:18,810 --> 00:49:41,430 -Scott Tolinski: Yeah, and don't check in like don't make it loaded. Like, hey, why aren't you at work be just like, Hey, how you doing? Is everything cool? Like, check in with them mentally. We talked about that in the last episode too. But a lot of it is just we are all people. We're all struggling right now in all sorts of ways. So everybody needs to just be great to each other help each other out. And you know, just be awesome people. - -131 -00:49:42,030 --> 00:51:28,290 -Wes Bos: I like it. Alright, let's move into some sick pics. I actually got a very sick pic for you today. And this is probably only for people who have young children. But my wife recently bought this thing called this slumber pod which was because we were supposed to go on vacation before the world fell apart but we still are using it because it's super, super helpful. And what it is, is it's essentially a blackout tent that you put over top of a play yard or pack and play or crib or whatever, whatever those things are called, you know, those like little Yeah, those things you put your kids in. And it's this, this tent that goes over top of it and makes it completely dark in them. And that's always a problem we have when we're traveling. It's like, okay, the kids going for a nap. Yeah, or even at my parents house. Alright, let's go for a nap at my parents house. And they have like, like a coffee filter over the the window. And it's like the Brightest Day in there, even with the blinds closed. So we bought this thing, and you just pop it over top of their crib, or whatever. And it's just super black in there. And it works amazing. Like our kid is having the best sleep she's ever had. It's nice and quiet, there's a little window, you can put the camera in those little fat holes that you can open if you're concerned about that. And I couldn't it was expensive as like 200 bucks or something like that. And I was like, This is silly. Why are we buying a tent? For 200 bucks, we can go to the store and buy a tent for less than that. And we got it on there. And he slept like a baby. And this thing is amazing. So like, even if you are in a situation right now where you need to take over one of your kids rooms and they can't have their nap. Because you're working in there. This would be a good thing to slap over top of a pack and play while they're in the laundry room or something like that. And it becomes super dark. - -132 -00:51:28,500 --> 00:51:35,370 -Scott Tolinski: That's funny. It's it's basically like when you put up a tent over a bird cage and the birds like it's nighttime. - -133 -00:51:35,430 --> 00:51:37,920 -Wes Bos: Yes, that's exactly what it is. - -134 -00:51:37,950 --> 00:51:44,760 -Scott Tolinski: Yes. That's my area. So you're treating your children like birds congratulate? Yes. Thank you. whatever we - -135 -00:51:44,760 --> 00:51:46,020 -Wes Bos: can do to get through this. - -136 -00:51:46,050 --> 00:53:45,000 -Scott Tolinski: Yeah, right, exactly. That's how I'm I'm running. My stick bake is a an escape from reality. So to say into virtual reality by sick pick is something I've picked before. But I've been spending a lot of time with this. In the evening, right after we put the kids down, I get like a, maybe an hour or so to play some virtual reality. And I have the Oculus quest, which is standalone, meaning there's no wires or anything. And it uses this really cool room scale thing. So you draw a line on the floor of your boundaries. And when you get close to that boundary, when you're walking, it brings in like a grid, so you can see you're approaching that boundary. So we have a decent amount of space in our living room that I just drew out and be honest, actually drew out the entire first floor of our house. So I can walk through the first floor of our house in VR without running into anything. That makes it insanely cool because you get so much space. And there's this app I've been playing lately, which is this brand new VR ping pong, table tennis. I have never played table tennis I am largely terrible at it. I've probably lost like 300 games at this point. Because I've been playing a nightlight and the physics are so stinking good. When you hit the ball, you get a haptic feedback that really feels like a balls hitting the paddle. You're holding the paddle you serve. It has rules. You play online with people. So I'm playing a lot online with people all over the world. And you have voice chat and whatever and the physics are just dead on it really feels like you're playing table tennis. So I was playing with this guy from Utah the other night and it was just so much fun to be like Hey, man, how you doing? Oh, dude, good. Oh, where are you at home in Colorado and Utah. Okay, how's things going? Oh, Nino, whatever. We're playing table tennis and talking about the current situation and just vibing out and having fun, and I'm losing every game and it is just so dang cool. So I'm just really into the Oculus quest right now. So check it out. If you have if you have money to drop. It's not cheap. I bought it a little while ago when it first came out. And it just gets a ton of use right now. So I'm a big fan. - -137 -00:53:45,150 --> 00:54:01,590 -Wes Bos: Awesome. Shameless plug. I'm shamelessly plugging all of my courses Wes Bos comm forward slash courses, they're likely still half off to give you something to do when you're at home. But check it out. I'd recommend my beginner JavaScript course, which is beginner JavaScript, calm, cool. - -138 -00:54:02,010 --> 00:54:15,960 -Scott Tolinski: And all of my courses in my subscription are 50% off. So if you are looking for some learning material on level up tutorials, check it out, level up tutorials.com. You can sign up and get 50% off. All right. - -139 -00:54:16,200 --> 00:54:23,010 -Wes Bos: Thanks for tuning in. Hopefully you are keeping well and we'll catch you on Monday. He's please - -140 -00:54:24,720 --> 00:54:34,440 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax239.srt b/transcripts/Syntax239.srt deleted file mode 100644 index 137970276..000000000 --- a/transcripts/Syntax239.srt +++ /dev/null @@ -1,176 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally at ski. - -2 -00:00:25,920 --> 00:00:47,549 -Scott Tolinski: Oh, come to syntax on this Monday. Hey c treat we are going to be talking about five things that could be potentially making your site slow. And this is going to be a series we have a whole bunch of these things. So we'll hit them in different hastiness along the way here. My name is Scott Tillis, gimme developer from Denver, Colorado and with me, as always, is Wes Bos. - -3 -00:00:47,700 --> 00:00:56,790 -Wes Bos: Hey, everybody, I'm coming at you live from a shed cottage, which is very cold in here right now. But it's the quietest place. - -4 -00:00:57,030 --> 00:01:08,010 -Scott Tolinski: We couldn't be any different right now. You have to con and giant puffy jacket and I'm wearing shorts and a T shirt. So apologize that I'm feeling very comfy here. - -5 -00:01:08,039 --> 00:01:10,080 -Wes Bos: Didn't you just have like snow like a week ago? - -6 -00:01:10,230 --> 00:01:16,260 -Scott Tolinski: Yeah, but we also had like 75 degree weather made before and like probably the day after, - -7 -00:01:16,260 --> 00:01:17,160 -Wes Bos: you know, Colorado weird - -8 -00:01:17,160 --> 00:01:19,500 -Scott Tolinski: like that. So. So we do it. - -9 -00:01:19,760 --> 00:01:31,890 -Wes Bos: I think that we anytime we say any sort of temperature, we need to convert it to the other one. So 75 American, okay, is 23.8 Celsius. - -10 -00:01:31,980 --> 00:01:40,440 -Scott Tolinski: Oh, I thought you were just gonna guess because I thought that would Oh, fun. I think that's about I think that's about 10 degrees, Alec, I don't know Celsius at all. So that'd be fun. - -11 -00:01:40,860 --> 00:01:43,350 -Wes Bos: Okay, let's next time that comes up. Well guess - -12 -00:01:43,440 --> 00:03:09,360 -Scott Tolinski: Yes, right. This episode is sponsored by Log Rocket. Now Log Rocket is the perfect place to stop guessing why your bugs happen. And by this, I mean that it's not like other bug tools. Because what it gives you is a pixel perfect session replay, which is a scrubbable video with network requests, console logs and errors, network activity, Redux store, just about everything and including even mouse events or where your user is clicking, so that you can see exactly where and why these bugs and errors happen logs all of this stuff. So you can just pop on here, watch a little video. And it's amazing because you can solve these issues without them having to contact you without them having to say, Alright, I was on this browser, I clicked on this, I did this. And then this. And you know, nobody wants to do that if they just had an issue on their website. So head on over to Log rocket.com forward slash syntax and sign up today, you will get 14 days for free. And honestly, it's more than enough, drop it in your site, check it out. And then be amazed when you can solve these bugs visually, which is really the dream. So let's get into it, we're going to be talking about five things that can be making your site slow. And I think the very first one we wanted to talk about was slow at TT f of b ttfb is time to first banana. - -13 -00:03:11,310 --> 00:05:57,870 -Wes Bos: That's great. Yeah, it stands for a time to first byte. And this is definitely one of those things that make your site feel really slow. Because usually what happens is when you visit a website, it's just a white. While you're waiting for it to load, or you're on the previous page, you click the link and you're waiting for that next page to show up. And that time to first byte is basically what it means is that when you request sign from the server, the server gets that request, it gets the stuff that you need, it makes templates and HTML, all that good stuff. And then it sends it back to the browser. So the time from clicking the link to the browser getting like its first line of HTML is called the time to first byte. And that's pretty important. So like what makes a time to first byte slow. So there's kind of three steps here. The first is that when you click it, your browser will do a DNS lookup, which translates the domain name into an IP address. Generally, there's not a whole lot you can do on that end, if you're using any sort of like popular service, or server or something like that, because these things are pretty well tuned. But I think where a lot of the slowness comes from is a, you have a server that is too far away from the actual user. So one of your customers is in Australia, your server lives in New York, it has to get on a boat and ship across the ocean in order to get there. That's why people put servers all over the world so that your Australian and your Chinese users get faster response times. lower latency is often what you'll hear. The other thing you can get here is like slow server processing. So what needs to happen on your server? Well, let's take WordPress for an example because a lot of the web is WordPress when the request happens WordPress gets it, it needs to figure out, Okay, this is the URL they wanted. What does that translate onto my end, and then maybe it needs to make six or seven database calls to get posts and information about the website and information about the currently logged in user. And then once the database is done, it gets all that data back. And then it says, Okay, now I've got the data. Now, let me template it out. And it's in PHP, PHP scripts needs to run and it needs to be converted into HTML, that's your sort of templating step. And then finally, you ship that out of the server back to the browser, so that processing on the server, the faster that can happen, obviously, the the faster your website will load. And then once you've sent that response back, it's out of your servers hands, and it's on to the network speed of the actual user. So there are some things you can control there, like the server processing and where your server is. And there's some things you can't control, which is, how fast is your users internet connection? - -14 -00:05:58,170 --> 00:08:46,550 -Scott Tolinski: Yeah, totally. It's funny, because ttfb can often be like a really slow thing in your year, when you check your network requests, you check your app building, and you see ttfb. And then how do I how do I work on that it's almost like a black box. But I think this was a really good explanation of everything that's happening there. And maybe where you could to look to start to speed up some of those processes. So the next step is going to be you have either too many requests, or too large of requests, or potentially your waterfall on your requests. What do I mean by any of this? Well, what happens after that ttfb is the server or the browser starts to request items, such as your scripts, right? Or your images, it says, Hey, give me that image from from this URL, or give me that script from this other URL. And these things are just like any other file on your computer, they take kilobytes, cavies, and sometimes, unfortunately, even megabytes, which shouldn't really happen, right, unless it's like a video, I guess. So we have these requests for various assets, and they need to come in and just like your computer, when you share files, it takes a file from one place and moves it to the next, you have to be very cognizant about the size, and overall quality of these images, or, or various scripts, for instance, we'll talk later on about some of these assets being too large, it a little bit more in depth in the next step. But right now, if you have too many requests, that's a big deal. Let's say you are not bundling up your JavaScript, or not bundling up your CSS, as in, you're not taking all of your files and squishing them into one file. They could be potentially loading, you know, five or six different JavaScript files. One of the it I do a lot of WordPress consultancy for friends, just like friends will be like, Hey, I have this WordPress site. It's very slow, I can't figure it out. And then I went to their site, the first thing I always do is check the network or the network panel, because sometimes these people like they're just adding things left and right. And I saw that this guy's site was loading for count of four different versions of jQuery. And they were all being loaded as a unique request. So it's like I came in there, I cleaned up some of his plugins cleaned up some of the requests, but just how many things you are requesting is such a big, big deal. So just make sure that you are as mushing with a build process down into everything. If you have WordPress, or Drupal or anything. There's often at different plugins or extensions that just add that stuff for you. But a lot of the stuff we're working on nowadays is built with Webpack, or Gulp, or one of these things that just smush everything down into one file of its various type. - -15 -00:08:47,250 --> 00:09:41,940 -Wes Bos: Yeah, one more point on the waterfall is that the the Network tab in your Firefox or Chrome dev tools are going to be super helpful to visualize what waterfowling is because central Yeah, sometimes what happens is that like, like, let's say you load some CSS, and then that CSS has an import statement in it, and then that goes and load some more CSS. And then that CSS, maybe that has another import statement. And what happens is you load one thing, which then figures out it needs to load another thing, which then figures out it needs to load a third thing, that already kind of happens because you download your HTML, and then your HTML starts to parse. And then you realize you have like scripts and style tags and stuff like that in there, and you have to download those. And if they then go download other things themselves, then you start to really slow things down where I will talk about tools you can use to make sure that all of this is loaded in as few requests as possible. - -16 -00:09:42,209 --> 00:11:27,390 -Scott Tolinski: Yeah, totally. Definitely. So the next one we want to talk about here are assets that are too large. So we mentioned that there's too many requests or a problem, but assets that are too large when they're requested is also a problem because again, with moving of these files, the larger more megabytes more gigabytes. Yeah, that's not happening, these files are the slower the whole thing is going to be to take to load. So images are often the best place to look for savings like people want to talk about. Okay, my site slow. What can I do this? What can I do here number one, number one first thing to do check those dang images. Yeah, sometimes those images are giant it. And there's a lot of different fixes. for stuff like this, I I'd like to hear about some of your tips. But mine are compressing, optimize your images via your build tool or something like image opt in. If you don't have a build tool, or it's a pain in the butt to modify with your images, or your images live elsewhere or something, you can take your images and run them just drop them into this application, it's going to crunch them out, remove all that extra metadata, any of that extra stuff, and it's not going to have any degradation to quality. You'll also want to use like I use a service called cloudinary, that does all this for me, it makes them as small as possible and serve the optimized version. Another one is make them smaller, sometimes you're sending like a giant image that really doesn't need to be giant, and it's only being displayed 400 pixels wide. But the image you're loading is 800 pixels wide. Turn that thing up, make it 400 make it exact, get that exactly how you want it to be. And if you're thinking, well, these images, will they need to be a certain size on mobile on a certain size and desktop? How can I accommodate for that? There's also a picture fill, which is also a great technique for using various image sizes. Wes, do you want to talk a little bit about what picture fill is? - -17 -00:11:27,780 --> 00:11:36,750 -Wes Bos: Yeah, picture fill is just the polyfill for the picture element, which I don't even know. Let's look it up. What is the browser support for picture right now? - -18 -00:11:37,080 --> 00:11:44,700 -Scott Tolinski: Oh, that's funny, because I've always used picture filled. It's so fun. I like I know it has the picture element. But I just say, Oh, it's picture fill. - -19 -00:11:45,510 --> 00:11:53,550 -Wes Bos: Yeah, because for the longest time, it was a thing that you couldn't use. It seems like every browser except iE 11 currently supports it, which is fantastic. Hey, - -20 -00:11:53,670 --> 00:12:00,180 -Scott Tolinski: I don't support iE 11. So that means I can drop picture, Phil. Yeah, there we go. Hey, cool. See you later picture, Phil. - -21 -00:12:00,180 --> 00:12:28,680 -Wes Bos: The idea is that you can you can pass multiple sources along with media queries, and show and hide different sizes based on most likely the width of your device. And that's great. Because if you have a very large screen, then maybe you can load a larger image that doesn't necessarily correlate with like the speed like I'm talking to you right now I'm looking at a third I'm on a 34 inch 4k monitor, and two megabit down LTE connection at my cottage, right, so - -22 -00:12:28,680 --> 00:12:31,140 -Scott Tolinski: I'm gonna serve you the biggest image possible for that. - -23 -00:12:32,460 --> 00:13:10,650 -Wes Bos: But generally, I would say like, yeah, you're you don't need to load the those huge images if you're on a smaller a mobile device. So that's a big one. And this stuff is great to talk about. But quite honestly, this is not something that I'm going to do without a tool that does it for me, because it's just too hard. Like, I'm not going to sit there and resize all my images, you generally need something like Gatsby image, or cloudinary or something like that, that will automatically regenerate and give you multiple versions of that image. And I think that's why this stuff is becoming much more popular because it's becoming almost effortless in a lot of these tools that we use now. - -24 -00:13:10,860 --> 00:13:27,240 -Scott Tolinski: Yeah, I think firing up Gatsby and seeing that like SVG or that blurry image fade in, like for free. I think seeing that was was very instrumental in me really loving the Gatsby platform just because I was like, Oh, I don't have to do this myself. How amazing is that? - -25 -00:13:27,330 --> 00:14:45,570 -Wes Bos: WordPress does this automatically for you as well right now. So if you're using WordPress, you just have to do nothing. It just comes for free in all of your websites, you have to intentionally turn it off, which I think was a really cool, yeah, think of them best by default. What else I use this, somebody sent a pull request to my own personal website for to add image bot. And I've never heard of this before. And it's just a little GitHub add on that you can add to your Git repo. And every time that you add images to your repo, it will try to optimize them. And at first I close a pull request. I'm like, No, I don't want to like, yeah, compress my images in the repo. That's the source. That's my source images. I want them to be full rez, and then I'll use something like Gatsby image to compress them and resize them. But then he said no, this, this is lossless, which means that there's lossy and lossless compression with images and lossless will compress them without actually pixelating them or making them without throwing anything out the door and lossy will, depending on how aggressive you want to be. It will degrade the quality of the image. So it's free for open source projects, which is cool. So if your Git repo is public, you can just add this thing on and I was surprised. I think it like 30 35% of my images got smaller. - -26 -00:14:45,840 --> 00:16:10,680 -Scott Tolinski: Wow. Nice. Cool. That's a good tip. So the next one we want to talk about is lazy loading, and I chopped off the word images off of the headline here because there's a lot of stuff that you can lazy load especially in reactor opponent land, you can lazy load entire components. But, uh, you want to talk about specifically about lazy loading images. And what exactly lazy loading images as well. lazy loading is basically the idea here that if there say an image being loaded at the bottom of your screen, so to say this is an example, if there's an image being loaded on the bottom of your screen off Canvas out of the viewport, and you can't even see it, does it need to be downloaded at the same time as everything else that your site is needing to be to load? If you click refresh on your site, you look at the narrowed panel, you could be seeing this, like the footer image being loaded, before the user could even interact with the site. And now does that footer image need to be loaded, then if they're not even seeing it? No, not at all. So that's where income lazy loading which lazy loading basically looks for a user scroll, and at a certain offset, or at a certain of like, if a user is scrolling and they hit the image, or they hit a margin above the image called an offset, then that's going to trigger a loading of that image. So that image is then loaded, once the network is quite a bit more open and free with not a whole bunch of other stuff coming in. - -27 -00:16:11,010 --> 00:18:00,960 -Wes Bos: Yeah, lazy loading is it can be done natively in a lot of the browsers now. So if you have an image, you just put lazy equals true attribute on the image. And it will only be downloaded once it's about to be in the viewport supported on latest edge Firefox and Chrome, not in Safari, or iOS, Safari, but it's more progressive enhancement. In that case, because it's an attribute you add, and not like in the other case, you have to use like a library or something that will use intersection observer under the hood. Yeah. And generally how that works is that you set an image tag with like a data dash source, or like, you make up some attribute, that's not actually the source attribute. And because the browser doesn't know what that attribute is, it will just not download the image, and then what you can, you can watch that element to come in on screen. And then when that element comes in on screen, you simply use JavaScript to set the source attribute of your image to whatever was stored in the data dash source attribute. So that's almost doesn't need to happen anymore. Now that we have lazy equals true on images. But that's just sort of how it works. Another thing you can do is just like, pre load things, like ahead of time, so like one downside to lazy loading images is that they won't like if you have a slider and you want to lazy load the images, you generally want to lazy load the slider image, like two slides ahead. Because like if somebody clicks on it, then then it starts to trigger to download. That's kind of annoying, right? So if that's the case, then you want to look two slides ahead and two slides back. And then make sure you set those images to download them. And every time you change a slide, you go ahead and figure out what are the the two ahead and two to behind images - -28 -00:18:01,100 --> 00:18:19,710 -Scott Tolinski: word. Cool. So last on the list here is using a CDN or not using a CDN. Now, what is a CDN? And once you've actually covered this in in very intelligent terms before Would you like to just give a quick one liner is what a CDN is, - -29 -00:18:19,850 --> 00:19:23,280 -Wes Bos: I did I I don't remember intelligently covering this. But a CDN stands for content delivery network, essentially, what that means is that when you have an asset, that asset will be put onto servers all over the world. And then when somebody requests dog dot jpg, your CDN will be smart enough to route that user to the low the the closest server that contains that asset. So things like cloud front. So like Amazon s3 is a good place to store images. However, you have to choose where you want to put your images on Amazon s3, they have locations all over the world. However, if you put CloudFront in front of it, or just use an existing CDN, they will automatically take your asset of a dog dot jpg, and then distribute that all around the world on all of their different servers. And then when somebody requests it, they're smart enough to route that to the closest server that has it. And that sort of comes back to the time to first byte that will be much faster to download it. - -30 -00:19:23,550 --> 00:20:31,580 -Scott Tolinski: Nice. Yeah, CDN is definitely one of those things you got to have me I mean, you got to have it. I use Cloud front for a long time, but no, no on CloudFlare for everything. Good News Netlify. Folks, this is not an ad. They are not sponsoring this episode. But if you use Netlify to host your site, you automatically get a free CDN. You don't have to do anything to set it up. It just it's just there. And I think that's really like a lot of these things that we've talked about here. That's the way it's going. Right? They're doing it fast. By default. They're giving you the CDN by default. They're making it secure by default, giving you the SSL right we see these things over and over again. And me if I'm looking Looking for platforms to host or places to move my site. Those are definitely features that I'm going to be looking for. Because I don't really need or want to spend the time setting up the CDN if my host or whoever is going to do it for me. So I would imagine that you're going to be seeing this out of a ton of different hosts right now, just for CDN, automatic CDN, just make it happen by default, because this is really something that, like, should we have to think about this as developers? I guess, maybe, but I don't want to have to think about it, even though I already do. - -31 -00:20:32,160 --> 00:21:02,790 -Wes Bos: Yeah, yeah, I don't think we should either. I the stuff will not be adopted by the masses until the tools do most of the heavy lifting for us. Yeah. Because it's all good and stuff to talk about lazy loading images. And actually, that's one that you can do your yourself pretty easily. But like a CDN, like all sudden, you you move from like a HTML CSS JS dev into like this, like networking specialist. That's not something you're gonna do. So tools are, I think, the way forward with a lot of these speed things. - -32 -00:21:03,320 --> 00:22:14,580 -Scott Tolinski: Yeah, definitely. I, I keep thinking about this. It's funny, because the the genesis of this, the show ideas came from me thinking about this YouTube video I have, it's my most disliked YouTube video, my most disliked YouTube video, which is probably just ratioed in the hall, or whatever I get, like, mostly, you know, like 98% 99% thumbs ups, one of my videos is just like in the gutter. And that is how to make or like website performance tips. And the tip is to reduce the amount of HTTP requests. And apparently, every single person who watched that video feels like there should be a one click button to fix the problem. They say, well, you explained what the problem is, but you didn't say how to fix it. I mean, I did say how to fix it. I just can't tell you for every individual platform, right? But it really opened my eyes to the fact that if there isn't a one click fix problem. So many people are just dead in the water in terms of wanting to start to solve that problem. They just either can't do it, don't know how to do it or don't want to do it. So I love to see these fast by default things coming into various platforms. - -33 -00:22:14,940 --> 00:22:18,060 -Wes Bos: I'm so curious what my most disliked video is now. - -34 -00:22:18,360 --> 00:22:26,130 -Scott Tolinski: Yeah, you can't sort I get like, the meanest comments on this video all the time. So that's the one reason I know about it. Oh, - -35 -00:22:27,540 --> 00:23:12,300 -Wes Bos: I found it. It is how to set up VS code, and prettier and es lint it has. Let me see here. This is a video I did a long time ago before I put together my own es lint. And it has 90% like ratio, meaning that 1100 people liked it. And 125 disliked it. Interesting. And that's just because how frustrating this stuff is. And I actually superseded that video with a with another one. Word superseded it with my own setup, where it just it just tucked away all the complexity into its own tool, which is exactly what we're talking about today. - -36 -00:23:12,540 --> 00:23:18,090 -Scott Tolinski: Yeah, mine. Mine has a he has 30 34% likes. So it's - -37 -00:23:18,090 --> 00:23:20,130 -Wes Bos: uh oh, wow. - -38 -00:23:20,850 --> 00:23:29,400 -Scott Tolinski: It's posted. Yeah, it's in the gutter. It's so funny because my average is so very high. That one my average down tremendously. - -39 -00:23:29,940 --> 00:24:01,080 -Wes Bos: Man, that's that's really interesting. All right. I think that's our first five. We've got probably another five if not more things you can do on your website. There's just like so many things. He knew client side on the server caching, caching on the server caching on the client. different tools that you can use? let's not give them all away here. Yeah. Okay. Well, make sure you tune into the next one. It won't be the next show. But in the coming weeks, we'll do another show here with five more things you can do to make your website fast. Yeah, let's - -40 -00:24:01,080 --> 00:24:01,770 -Scott Tolinski: do it. - -41 -00:24:01,950 --> 00:24:07,350 -Wes Bos: All right. Thanks for tuning in. We'll catch you on Wednesday. Later, please. - -42 -00:24:09,270 --> 00:24:11,460 -Scott Tolinski: Head on over to syntax.fm for - -43 -00:24:11,460 --> 00:24:12,330 -Announcer: a full archive - -44 -00:24:12,330 --> 00:24:19,020 -Scott Tolinski: of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax24.srt b/transcripts/Syntax24.srt deleted file mode 100644 index 42fe5bfa7..000000000 --- a/transcripts/Syntax24.srt +++ /dev/null @@ -1,188 +0,0 @@ -1 -00:00:01,290 --> 00:00:02,790 -Announcer: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:04,560 -Unknown: the podcast with the tastiest - -3 -00:00:04,560 --> 00:00:09,300 -web development treats out there, strap yourself in and get ready. Here's got to Lynskey - -4 -00:00:09,350 --> 00:00:10,590 -and Wes Bos. - -5 -00:00:10,680 --> 00:00:43,740 -Scott Tolinski: Welcome to syntax. And in this episode, we're going to be doing something a little bit different than normal. We're going to be doing a mini episode. Now, over the course of the next three weeks, we're going to be having two more mini episodes here, as we sort of wrap up the year. So this is something we're going to try out. And maybe we'll continue later to this idea of like a mini episode where it's a quick topic that maybe we can't devote a full 60 minutes to, or maybe it just wouldn't make a good episode to devote a whole 60 minutes it will bore - -6 -00:00:43,740 --> 00:00:45,810 -Wes Bos: you. Yeah, yeah. - -7 -00:00:46,380 --> 00:00:51,420 -Scott Tolinski: So with with me, as always is, uh, Wes Bos. How are you doing today? Wes, - -8 -00:00:51,450 --> 00:01:08,189 -Wes Bos: I'm doing great. I just finished like 20 minutes and for this episode, I finished the recording my CSS Grid series, and I'm super stoked about that. It went really well. And I'm just about to head off on holidays after we record a couple of these. And - -9 -00:01:08,189 --> 00:01:10,950 -Unknown: yeah, are you headed anywhere? Like No, - -10 -00:01:11,060 --> 00:01:19,560 -Wes Bos: just sitting on the couch? and looking forward to it? Yeah, I just said my family's mostly local. So just visiting them around town. - -11 -00:01:19,829 --> 00:01:20,969 -Scott Tolinski: Nice. Super cool. - -12 -00:01:21,000 --> 00:01:21,599 -Wes Bos: What about you? - -13 -00:01:22,140 --> 00:01:36,390 -Scott Tolinski: Oh, we're heading to Michigan. First day like three in the morning like right I with the baby? It's gonna be Oh, good luck. Yeah. So yeah, we're gonna headed to Michigan until next Wednesday, so we're gonna be there for a week for Christmas and stuff like that head - -14 -00:01:36,390 --> 00:01:45,870 -Wes Bos: back here for New Year's and that's pretty much it. Awesome. do lots of Michigan things what do you do Michigan drink? Yeah, go to Meijer. - -15 -00:01:48,480 --> 00:01:49,500 -Scott Tolinski: Hey, you know Bye Bye. - -16 -00:01:49,980 --> 00:02:04,590 -Wes Bos: Oh, Meijer. People people think that they like Walmart Supercenter Walmart Supercenter sucks. And compared to Meijer Meyer is like the best thing that's ever happened to groceries and retail and Lacroix in general. Yeah, we - -17 -00:02:04,590 --> 00:02:09,560 -Scott Tolinski: don't have we don't have anything as good as mine are out here. Although no one in the world - -18 -00:02:09,560 --> 00:02:10,910 -Wes Bos: has anything as good as Meijer. - -19 -00:02:11,880 --> 00:02:37,500 -Scott Tolinski: We used to. We used to live in a city called Dexter, which is just outside of Ann Arbor, Michigan. Yeah. And there's a Meijer there. It is seriously, like the worst place in the entire world. It made me rethink my entire thoughts on Meijer overall, but it's more or less the location words that you'd get the absolute, like craziest characters there. I mean, it's great people watching kind of place but not not the best Meijer on the planet. Oh, man. - -20 -00:02:37,530 --> 00:03:03,120 -Wes Bos: So for those who don't know, Meyer is like this. Like, I don't know how to describe it. It's like a grocery store. Absolutely everything but also it has. It's like an entire Walmart in there as well. And I don't know it's just a magical place. grocery stores in the states are magical places as well. because food is so cheap, as at least in Michigan food is extremely cheap. So look, guys, Lacroix goes along that stuff down. Anyways, let's - -21 -00:03:03,120 --> 00:03:03,630 -Scott Tolinski: let's, - -22 -00:03:04,860 --> 00:04:18,059 -Wes Bos: let's get into it. In this episode, we are going to be talking about what is CSS bem? And we're gonna we're gonna talk about like, what is it? Why would you want to use it and answers so to explain the concepts behind it. I remember when I first heard about them, I just like didn't understand it. And it took me a while to wrap my head around it. Now I look at him like this is extremely simple. And it was so we're gonna hope to convey that in in 1015 minutes for you. This episode is sponsored by somebody who's got the coolest name ever been klinken beard? What a sweet name. So Ben, Ben has a he's like he's super into d3, which is the sort of like the, I don't know, what do you call that visualization JavaScript library that you can use to build charts and data visualization and all kinds of stuff. Yeah. So what is he's what he's doing is he has this, learn d3, dot js and five days, it's a free email course that you get sort of one piece every day. So we are gonna we'll go talk a little bit more about that partway through the show. But it's a d3 and five days comm forward slash syntax. And the three and the five are numbers not spelled out. Nice. All right. So - -23 -00:04:18,059 --> 00:04:23,509 -Scott Tolinski: well, on the topic of d3. Have you ever tried to learn d3? - -24 -00:04:23,699 --> 00:04:44,970 -Wes Bos: I have many times it's so hard it is this what Ben was saying is that it's got this like this massive surface area. But he said there's like there's like a couple different concepts that if you just nail these couple different concepts over a couple days in this email course, it's going to make learning the rest of library like a lot easier. So I'm actually gonna take this email course myself. - -25 -00:04:45,060 --> 00:04:50,310 -Scott Tolinski: Yeah, me too. I got it because I've tried to learn it so many times. So pretty psyched on that. - -26 -00:04:50,940 --> 00:04:53,790 -Wes Bos: Cool. So what is CSS? Bam, Scott. - -27 -00:04:54,060 --> 00:05:48,480 -Scott Tolinski: Yeah, so CSS bem is really just a naming or organizational system for your classes. And CSS because, you know, as your projects grow, they go from what should be, you know, easy to name, this and this and this to these giant monolithic CSS files with a ton of different classes that are potentially intersecting and overriding. And well can turn into cascade held pretty quickly, where, you know, you don't know what's overriding what or what the actual naming system, and perhaps you're switching things around. So what CSS bem does, is it basically allows you to have a system for naming everything in CSS with your classes, so that you can be confident whenever you're writing your CSS, and it's going to be totally structured and organized. So bem itself is an acronym. So A stands for - -28 -00:05:48,509 --> 00:08:05,190 -Wes Bos: block element modifier. So you should I give a stab at explaining what each of those are. Or maybe we should move to talk about like, what problem does this solve. And remember, when we talked about CSS and JavaScript, we talked about how, sometimes when you add CSS to your page, and it breaks something else on your page, then you've got a bit of a scoping issue. And one of the things about CSS is that it's entirely global, meaning that if you write some CSS, there's no way to scope that to your specific to your specific component. And as we start to write more componentized stuff, rather than just general styles, we want to be able to sort of scope our CSS to specific elements. So if I think about I'm writing a blog post, and I want I have different pieces inside of that blog post, the block in that case would be a post. So the whole div around the post or the article tag, that would be a post and I would give that a class of post. And then inside of that we have elements in so you might have a post heading, you might have a post content, you might have a post footer, you might have a post author, you have all these different pieces, while they themselves are their own items. They are just elements of that specific component. So the idea is that your your block is post and your elements inside of that is post heading post footer post author. And what you do the sort of the naming convention is that you use the block, which is post, and then you do underscore underscore the element name. So post, underscore, underscore heading post, underscore, underscore, footer post underscore, underscore content. And then there's the M, which is the modifier, which is the Okay, I have this post heading. But then I like I want like kind of like a variation on that post heading. I want it just to be a little bit bigger. How do you how do you deal with that. And the idea is that you have a modifier, which is post underscore, underscore heading, dash dash large. So it's like it still is a post heading. But it's a little bit different. And I just want to take what I had on post heading, and maybe jack the font size up. And that's the that's the whole idea behind modifier and that's, that's it right? - -29 -00:08:05,220 --> 00:08:44,250 -Scott Tolinski: Yeah. Yeah. And I think I think when people first hear about CSS bem, they think it's this big system, right? That they have to learn. But once you nail down those three little concepts, it's extremely easy to get going. I think some of the criticisms of bem would just be that sometimes the classes get a little verbose, right? having long name, hyphen, hyphen, state, or long name, underscore, underscore another long name, hyphen, hyphen, state, it could be kind of long, right for your CSS classes, especially if you're used to not using a system and just sort of willy nilly like naming stuff, adding classes to everything. Yeah, - -30 -00:08:44,300 --> 00:09:53,700 -Wes Bos: yeah, that was that way too. And I was like, so romantic about having clean HTML and having my everything look beautiful. And then like, just I don't know, put that aside, and, like, give it up to the fact that you're going to have extremely long class names. And when you have that, then you're going to have something like, I don't like you'll have link and link, underscore, oh, it lasts about example. You might have like a post underscore link, and then I post underscore, underscore link dash dash active so whatever is the the currently active one or in the navigation or something like that. And you will have extremely long class names. But the upside to that is, is it's extremely easy to write new components and to style new components inside of your CSS. And then also if you're using something like sass or stylus or less, you can you don't have to rewrite out the entire class name every single time you can use the ampersand selector inside of it to say ampersand, underscore underscore heading and then inside of that ampersand, dash dash large and it will just compute those those class names for you. - -31 -00:09:53,760 --> 00:11:10,350 -Scott Tolinski: Yeah. So I mean, in addition to like, preventing you from having you know, collision issues and stuff like that. It organizes your CSS files really nicely. And and even if I mean, if you're using encapsulation and in sass or whatever, and you always know where to find stuff, because everything is nice and neat. And then when you add new things, you obviously want to add it to whatever the baseline is basically it, it has a bunch of like little minor benefits that are, you know, something that, I don't know, you can keep your sass files or CSS files organized without them. But having them definitely makes having a system and having that all more organized quite a bit better. So yeah, I'm a, I'm a big fan of systems like this especially, I mean, having any some sort of system for your CSS naming is definitely the way to go. And initially, like I said, I was kind of turned off by the the verbosity, verbosity, I don't know if that's even a word. But I was kind of turned off by how verbose it was. So it was like, you know, it's one of those things you want to try, you want to use it and you want to see the benefits for yourself, because when you do use it, you will see those benefits. And you're going to be like, aha, I get it. I get why everybody likes this, you know? - -32 -00:11:10,920 --> 00:12:15,990 -Wes Bos: Yeah, exactly. Like give it on a show. I think that's like the, the anthem of my career is just give it an honest shot. And people lately have been saying, like, Oh, don't use bem anymore, because we now have CSS modules. And the benefit to having like CSS modules where a CSS in JavaScript, something like styled components, or any of the other hundred libraries is that you don't even need this naming convention anymore. Because the style components is going to take care of scoping for you. So if that was the case, then you just need to select a paragraph tag or h2 tag or a div with the class of post or something like that. And it's very simple. And then style components will take care of scoping for you. But that said, like, it's it's easy to like live in this twittersphere, where everybody is using styled components. The reality is, is a lot of us are still working on applications that are CMS based, maybe we've been working on it for five years. And this is something that you can just immediately put into place without having to have any additional tooling or change any sort of setup that you have. - -33 -00:12:16,170 --> 00:12:42,450 -Scott Tolinski: Yeah, and you can incrementally add it, which is like I'm a big fan of being able to incrementally add anything, right. So like any new classes you're writing, use them. And then when you have some free time, whenever that is you can go back in and start writing some of your old classes. And actually added benefit of having to rewrite some stuff that isn't in them is that you'll get a new fresh look on your entire project outlook CSS wise to maybe be able to write things a little bit more efficiently here and there. - -34 -00:12:42,990 --> 00:12:58,830 -Wes Bos: Exactly. So hopefully, that that clarifies what them is and definitely give it a shot in your projects. I'm a huge fan of it after, after resisting it for many years, and I just kicking myself for not for not switching over to it to it sooner. - -35 -00:12:58,920 --> 00:13:09,300 -Scott Tolinski: Yeah, I had the same mentality of like, I don't want I don't need this, like, I'm writing good CSS. And then when I started using it, I realized I could be reading much better CSS. Yeah, - -36 -00:13:09,330 --> 00:15:17,190 -Wes Bos: I specifically had a lot of projects that got bigger than I thought they would be. And then I look back at a point where I was running out of things to names to call things. And we I would change one thing on one page, and it would change something on the other page. And it just starts to get out of control. And you also don't know when you can delete CSS or anything like that. So big fan of bem definitely check it out. Let's let's talk a little bit more about our sponsor, which is learn d3 in five days. Again, this is an email course delivered straight to your inbox in five days. And d3 is awesome because you can create these amazing data visualizations, if you've got some data that you need to be able to put in if you want to make a graph or you want to make an array. I just sometimes I just love going to the the d3 website. And looking at all the different things that people have made. It's called data driven documents. And it's just a great way to visualize any data that you have. The The only trouble is that the surface area of the API for d3 is is huge. It's it's like if you had to learn an entire another library, people's like job. Like if you look on job listings, you will often see d3. And it's just like this is part of especially like I have a lot of friends who were working in journalism. And then they got into web development. So just because they wanted to be able to tell their story in a data rich way. And d3 is the tool tool for that. So if you sign up for this course, a d3 in five days.com for slash syntax, the three and the five are numbers. You're going to get a five emails that will sort of like ease you into it every single day. If you just take a little bit of time to read through the email and learn the basics. You're going to feel a lot more comfortable. And then I think you get to that spot where you understand the core concepts, and you'll be able to take it in whichever direction that you, you want to build your stuff. So, thanks so much to Ben for sponsoring, again, that's d3 in five days forward slash syntax. - -37 -00:15:17,460 --> 00:15:17,970 -Scott Tolinski: Nice. - -38 -00:15:18,300 --> 00:17:00,450 -Wes Bos: So we're a we're going to, or we're just trying this whole, like minisode thing out. And we thought that we would try to answer some listener questions in a minisode, as well. So Alright, so we're the question that we have today is, do you use Dropbox, if you're a developer, if you have a project, should you put it in Dropbox, if you have get, should you also put it in Dropbox or keep it outside of either the fan seems to spin up and this is, this is a hot topic that every hour every six months or so comes up, and it always gets me It gets me heated, because it's so frustrating. So Dropbox is one of my favorite pieces of software out there. Because it does what I call passive backup, meaning that you shouldn't have to remember to ever backup your data. Because it's not a it's not an if something goes wrong, it's a when does something go wrong. So I love that because they're automatically back things up. Dropbox allows you to fall back to data. But the downside to Dropbox is that if you're a web developer, you will often have a a dot Git folder, which contains your entire history of your project. And that thing can get pretty big. And, and to it, how often you have a node modules folder, which we all know is the biggest folder on the face of the planet. And that contains often 400,000 files inside of that. And what that will do is it will cause your MacBook to, to spin up and to get really hot and whatnot. So I'm gonna see what Scott, what is your opinion on Dropbox and web development? - -39 -00:17:01,050 --> 00:17:38,430 -Scott Tolinski: I don't use it, specifically because of the sinking of the files, like just billions of sinking of files, and it's a huge mess to me. Yeah, my computer doesn't like it. I don't like it. I would like to be able to do it. But yeah, I just think the sinking of all of those files is just too too much. I have other passive backup systems like time machine that's going up to a NAS cloud drive. So like, Yeah, I don't know, I don't use it. Personally, I just can't i can't get with all of the the sinking of the files. - -40 -00:17:38,570 --> 00:21:28,980 -Wes Bos: Yeah, yeah. So I do use it. And I'll tell you why. Because people bite my head off every single time. That is the first one is that you shouldn't put get in Dropbox. And Git is version control. So why don't you just use Git? And my answer to that is many times I've accidentally nuked a file in between commits. Yeah, and not been able to roll it back. Unless except for the fact that I had it in Dropbox and Dropbox will incrementally save those changes for me. And that that is good. People often tell me Well, there is this thing called selective sync in Dropbox where you can turn off sinking of specific folders. And that is not exactly what you want. Most people do quick google and send me a link to that. And that's not it. Because what that does is it deletes it from your computer, and then it syncs it to Dropbox, which you want the opposite. And then also, you have to do that for every single project that you have. And I have hundreds of projects on my computer that I don't want to have to manually go into every single one. So what my my solution is, is first I just bought an expensive ass computer that is very powerful. I don't, I don't notice the the CPU spiking anymore, since I got my new computer. So so that's good. And second, like also, if for me, I don't have multiple computers, meaning that I'm not actually synching my Git folder to multiple computers, because a lot of people, if you have two computers, what can happen is that your Git folder can get out of sync. Because of all these quick rapid change, especially when you like change branches really quickly. Dropbox will get really confused, and then all of a sudden, your gift should be your single source of truth and not Dropbox, right. But because I don't use I don't use it. I've actually never had that issue before. So I've been pretty happy about that. So and then other people say use something else. Like there are tools out there that will allow you to ignore node modules and get based on like a, like, what I really want is like a Dropbox ignore file and being able to Dropbox to ignore specific folders and not have them sync. So that would be my ideal. But I don't think that I think that Dropbox used to be all about like the techies and the power user. And I don't think that they really care about about power users or developers or techie tech users a more they're more about the like, like, I don't know, like kind of Google Docs competitor these days and whatnot, they don't want you to actually have files, they want you to have everything in the cloud and whatnot. So ungrateful I, I don't like Dropbox anymore. But I'm still using it just because it saved my bacon, so many times in between commits. And I also do run a time machine. And I also do run backblaze. So I have sort of three at that place. Yeah, three ways to and backblaze is essentially like Dropbox for your entire computer. And I do believe there's a way to ignore node modules, I just don't do it. And something they've done is they they're never spiking my CPU or anything like that. So I don't know, I I still recommend that you do it. And also, as a teacher, I recommend that my students still do that just because I've so many times I've seen people accidentally delete something, especially when they're that using the command line or using gold or something you're trying to delete files, you accidentally delete the wrong stuff. I've seen so many horror stories where if you don't have a rock solid backups in place, then then you definitely need to use something super easy like Dropbox. Word. So that's my answer to that. I know that a lot of people do not agree with me, and I'm not happy with it either. But it's working for me, and it saves my bacon word. - -41 -00:21:29,130 --> 00:21:32,840 -Scott Tolinski: I probably still won't use it. But I appreciate your points. - -42 -00:21:32,880 --> 00:21:46,020 -Wes Bos: Yeah, totally. All right. Well, that is our Minnesota. What what are we running up here? We're almost out 20 minutes now. So we'll wrap it up. And we'll see in the next episode. Cool. Yeah, - -43 -00:21:46,229 --> 00:21:53,070 -Scott Tolinski: let us know what you thought of this format, just up on Twitter. So you let us know if we should continue doing mini episodes here and there. - -44 -00:21:53,100 --> 00:22:18,420 -Wes Bos: Yeah. So we've got this huge list of topics. And so we're considering doing like a normal episode that we get into it. And then we have all these like other topics that can't devote an entire day to and I think I rather split it up into these smaller ones, then do a bunch in one big episode. Because I guess stuff happens. And you might not necessarily get to the end of the episode, and you'll miss some of some of the good stuff. - -45 -00:22:18,929 --> 00:22:25,950 -Scott Tolinski: Yeah, yeah. And I think this would be typically in addition to our standard episodes. Exactly. Yeah. - -46 -00:22:26,459 --> 00:22:45,420 -Wes Bos: So and a lot of people have been asking, a lot of people have been asking for more syntaxes because on your commute, you can make five days a week and we only release once once a week. So if you want want to hear more of Scott and I let us know on Twitter. Hey. Awesome. All right. Well, we'll see you in the next minisode See ya. - -47 -00:22:45,689 --> 00:22:56,250 -Scott Tolinski: Bye bye. Head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax240.srt b/transcripts/Syntax240.srt deleted file mode 100644 index 969769da0..000000000 --- a/transcripts/Syntax240.srt +++ /dev/null @@ -1,104 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,530 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and Wes Bos. - -2 -00:00:10,590 --> 00:01:46,950 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there. Today, we got a good one for you. We're gonna be talking about like emergency UI when building a website. And this is sort of like come up in the last little while. And I like to call this snow day UI is when something happens to a business or a school or organization. And they need to quickly get information across to their website visitors via a pop up or a banner or a special page on their website is your website set up for something like that. And this is sort of bugging me, because I've been going to all of these websites for schools and businesses and whatnot. And they all have these just awful. Like, clearly just threw in a div and type some content or they like have one editable little block. And they do massive Times New Roman font with the like green background. Because like when there's an emergency, we don't necessarily have time to wait for the web developer to build something. And I think that there is something to talk about here in terms of like, what should you do for your websites to be prepared for putting across UI and being able to communicate effectively for anyone that that visits the websites and needs to get that information? Interesting, let alone like I'm saying snow day here because like we're all stressed out here. And that's sort of the basic thing if a school is closed, because there's too much snow, you need to get that information across to to everybody. But what obviously we're talking about what else is going on in the world right now? - -3 -00:01:47,160 --> 00:01:59,610 -Scott Tolinski: Yeah, I felt like you're just like you're coining a term here with the snow day UI. Like that's, that's a pretty cool idea. You could get like a book apart book about snow day UI snow day UI. Yeah. I think that's interesting. - -4 -00:01:59,760 --> 00:02:02,340 -Wes Bos: What do they have in the south where they don't have snow days? - -5 -00:02:03,840 --> 00:02:11,370 -Scott Tolinski: Well, I suppose if there is this, like if the snow hits the ground, everybody screeches to a halt over there. So you can still call it a snow day. - -6 -00:02:11,580 --> 00:02:25,560 -Wes Bos: That's true. Yeah, Atlanta gets like one centimeter. And it's just out of order. Yeah. All right. Today, we're sponsored by two awesome comp companies Sanity and Sentry. We'll talk about them partway through the episode. - -7 -00:02:26,130 --> 00:02:34,890 -Scott Tolinski: Cool. So my name is Scott Tolinksi. I don't know if Wes you introduced me or not? No, No, you didn't. You didn't introduce your co host. - -8 -00:02:35,070 --> 00:02:35,940 -Wes Bos: Sorry about that. - -9 -00:02:36,360 --> 00:04:44,610 -Scott Tolinski: We're all out of sorts here. I can't even see Wes, because of the bandwidth. So we're like, the first time ever, we don't have headphone latency. But we're still talking over each other because we can see when we're about to talk. So it's, it's a super fun. We're switching it up. It's getting getting kind of wild. I did the the most interesting thing on Saturday night that I kind of wanted to share on this that would be some fun little quarantine thing. So you know, all the the kids are using zoom. Nowadays, all the kids, all the kids are in zoom. Kids are in zoom. Well, my parents are my dad's using zoom for his work. My brother is using zoom for his work. We set up I don't know if you've ever played these games. They're called the jackbox party pack. No, they're games that you play either on the computer or on a Nintendo Switch or whatever. But everybody uses their phone as a controller. And you hit a you website, you enter a four digit code, and then your phone becomes the controller where you insert the questions or you draw the things or you do that it's a fascinating I and we maybe we should talk about it and look into it, like what their execution of it is because it's web tech meets video game tech meets, you know, all the stuff we're doing here. It's so cool. But guess what we did, because there's no online play or anything like that. We used my cam link that I use. It's the little USB thing that is HDMI for my camera. Yeah, I plugged my nintendo switch into the cam link via HDMI, and then plug that into my computer. Then using zoom, I shared the screen with everybody. So we played jackbox party pack with my entire family via zoom on my own personal Nintendo Switch. It was the coolest thing ever. That's amazing. I felt like a wizard of this tech because everybody's using your own phone. It's all just hitting the web. You know that the latency was like non existent. It was so cool, because you could answer the questions in real time or whatever. And everybody's worked it like without a hitch. There was like no issues with it whatsoever. Wow. Yeah, this is really cool. That's next level. I like that a lot. - -10 -00:04:44,700 --> 00:09:42,750 -Wes Bos: Yeah, yeah. I thought that that was a lot of fun. Oh, man. All right. So let's jump on into it. So it's a snow day or it's a global pandemic or whatever and your client needs to relay information to its website visitor as quickly and as efficient as possible, how do they do that? What do you need in place on your website. So, first of all, at the very least, the customer should be able to easily update their website. And to reflect this info, not to mention all of the stuff we're going to talk about today, they shouldn't have to contact you, as a web developer to add something to the website. So I've previously done this, where it's just a banner at the top of the website. And in the back end, you can there's a little checkbox show the snow day banner, turn it on, or turn it off. And then you can type something into there, like a link or, or an image or something like that. So let's just go through what are the the sort of pieces that you need on this at the very basic, you need some sort of banner or a pop up that shows when when the user visits your the homepage? So this is something it may seem super simple, but you start to think about Okay, well, does that banner interfere with anything else that is currently on the page? Is it fixed? Or is it a static? Does it scroll with the website? Is it fixed on desktop? Is it not on on mobile, you sort of have to, to think about all of those things, something that I saw quite a bit was pop ups on websites that were not properly styled for mobile. So whether the images were stretched, somebody threw an image in there where the developer was not, not thinking that they would put an image in there, horizontally scrolled, things like that. So just at the very basic, and this probably will take you an extra hour to code into every website that you now make. But the ability to have a banner and or a pop up on the homepage that will obviously show to the user when there is an emergency situation. So I'm curious about this, because we have some of these in our site, and I'm interested to hear some of your thoughts on this. So if these things, whether it's a pop up, or I mean, if it's a pop up, it's obviously dismissible. But a banner can also be dismissible, too, with like an X just to get it out of there. Yeah. How do you personally store that information as to whether or not that user has clicked that banner? Do you throw it in a cookie? Yeah, that's a really good question. Because like, you want to be able to dismiss it. And for it not to come back every single time that the user visits a website, especially a pop up, that's super annoying. Yeah, that would be really, and I've certainly seen some of those in the situation that we're in right now. So I either use a cookie or local storage, I was going to recommend local storage. And basically, you just have like a setting either in the cookie or in local storage. And it can just be a totally client side cookie, that doesn't need to be a like a secure cookie or server side cookie. And you just say like, has it been opened? Or has it been closed? And you can set that thing to true? And then before you show that thing, you you go ahead and check if that thing has been set, and I was gonna say local storage, but you sent me this thing other day that local storage now only sticks around for seven days. Yeah. So this is one of the part of the reason why I'm asking this question because I keep things like that in local storage. Personally, I like all sorts of little user settings and local storage, including like whether or not they clicked on a pop up. But it got me thinking about like, should I like if the user has a user object? Should I store some of those in the DB? Or should I store some of those in cookies, because there is some like, we'll link to this in the show notes. There was this post about local storage being removed after seven days, but there was a lot of caveats to that. And it's only in Safari, by the way, which of course, Safari Come on. And their their idea is that it's like going to prevent trackers and things like that, which I get and it's very important. But the caveats around it are that I think you have to be coming from or the request has to be coming from a known tracker, like Facebook or something like that. And as well, you have to not visit the site. If you're visiting the site that like seven days, changes, seven days regardless seems like too little to me. But I don't know, there was a lot of discussion and caveats about this. There's a I'll see if I can find it. There was a really great, really great Hacker News comments section, or people who really dove into the specifics about it. We're talking about the specifics. And obviously, it's something you want to familiarize yourself with a little bit. Yeah, so does it have to come from from unknown tracker? Because like, I'm thinking myself, I store volume and playback rate and a few other user settings, the right likewise, I store that in local storage. - -11 -00:09:42,919 --> 00:14:17,610 -So I wasn't able to correctly identify exactly like all of the caveats here. Somebody was saying that that was the case. And then they're like, well, what if, like, what what's the step there like this Google like if your site includes Google Analytics, does that put you on a target of known tracks? You know, yeah, how do you make sure that you're clear from whatever's going on here? And I do think it I don't know, maybe the team behind this has thought about this more than I have. But it does seem a little over the top. Yeah, it's frustrating when we all this happens often, where we get these new API's that are amazing. And then the marketers find a way to abuse it to track you. And then then we sort of have to claw back, like a battery status API that happened to that. There's a couple other it's all just called fingerprinting. These API's can be used to track you across the web, and we sort of have to take them back, which sucks. But I think for a pop up once every seven days, if you haven't visited the website, that's not the end of the world, I would probably do it in local storage, just because the API for setting and getting stuff in local storage is much nicer than the cookie API. So yeah, I would I would probably do that. Or if you use react hooks, just drop one of those use local storage or use cookie hooks. And I have one of those for each where I can just do set get cookie or set get local storage for my Oh, yeah. Just with the use local storage. Yeah, it's very nice. Basically, the use state API. And one other thing I was going to say about this, like dismissing things is that how do you know to show it again, because like things are changing very quickly right now. And that information may be updated several times a week. So I was thinking like, what I would probably do is like, you can't just dismiss it for like four days, because like what if they dismiss it right before new information needs to be shown? So thinking like, you need some sort of like, unique identifier, based on the content that is in that thing. So yeah, I was thinking maybe maybe you could instead like you your dismiss cookie, or dismiss local storage could be based on a hash of the content in the alert. Or maybe you could just use the length, like the number of characters that are in there. Like that's not totally unique, but it's likely that if you update that pop up, then the length of the the alert will change. And then then then that's then it will then it will show again, because it has changed since then, there's a whole bunch as long as it is unique, and you can then re show it when that information has changed. Yeah, that's a problem I have not had to think about. Because now Me neither Yeah, none of my alerts or pop ups for those kind of things, or anything that would stick around more than, like, here's an event that happened, or my my banner isn't dismissible? Yeah. So there's a lot of little problems here that you don't really think about until you really start to dive into it. And I guess that's a nice little microcosm of our entire industry is everything is a much larger problem, when you really start to dive into the specifics of, alright, how does this thing need to work? I mean, I mean, we've all experienced that where your boss is like just throwing an alert on the site. And then when you start yapping about it, you're like, Huh, okay, well, what are the parameters here that this needs to abide by? Yeah, I've done it actually, once years ago, on my own website, where I was like, showing random pop ups for different products are not pop ups, banners. And then if someone dismissed a certain product, and they came in visited again, it would make sure that that product wouldn't be shown again, but like maybe another product would would be shown. So in that case, I had to use the product code in the dismiss cookie, because there was multiple banners showing. And he had to dismiss each of them, depending on when it showed up. Did you get feedback on that? Because I feel like that's the kind of thing people might get angry at? Uh, no, it was, I had a lot more logic in it in terms of like, when it showed up. And it also wasn't like a super obnoxious one. I think it was a little banner at the bottom of a blog post or something like that. I'm very aware that this stuff is very obnoxious to developers, especially when you're using it for marketing and not for, like emergency information. Oh, totally. Yeah, right. Yeah. There were there is like nothing that will make me want to leave a site faster than like, Oh, I just want to read this article, and then pop up with a newsletter. And then like, shame. Yeah. They'd be like, No, I don't want 10 great tips on how to, you know, clean a marker. Wash your hands. - -12 -00:14:17,639 --> 00:14:18,419 -Unknown: Yeah, right. - -13 -00:14:20,010 --> 00:16:26,010 -Wes Bos: That's a really good point. Other things you should be aware of is good styling. This can go a long way. When you give your your user a like a wiziwig. To add in text. Most people just give them the wiziwig. And they can go nuts on it. And what happens is that they get the default colors that come in the palette. And then they get like a default sand, Sarah and Sarah font, which is really frustrating for your users to see. And I've seen this over and over again. So go a little bit further and figure out how do you customize that wiziwig and give them the fonts and the colors that they need or just take them out entirely and use your CSS to start All those things, because when people are panicking, they're not thinking about brand. But some company, you're looking at everything right now the brand of the company really shows through in terms of how do they present themselves when they're getting across emergency information. And it's not just like, it doesn't look like a Microsoft Word, Doc. Yeah. And let's be entirely honest here, you should be not giving the marketers or the content editors the ability to produce something that looks bad on the site. Absolutely. I always really thought about that when I was doing sites for customers, clients, whatever, not only limiting the tools that they see, like in Drupal and WordPress, or whatever, hide the things that they shouldn't be touching, you know, in that aspect. But also just don't give them the opportunity to have a look bad if you just throw a basic paragraph and a div or whatever, whatever, you know, through the wiziwig. It should look like the rest of your site, it should fit the design system. So don't get too specific with everything everything all the time, or at least provide some sort of really good default style, so they can't mess it up. They can't get this in a way that is going to look bad for the for the brand overall. Speaking of not messing it up, Scott. Oh, yeah. What should you use to not mess up your bug reporting? Your bug reporting? Oh, sorry, not. - -14 -00:16:28,020 --> 00:16:28,529 -Unknown: today. - -15 -00:16:29,279 --> 00:20:48,110 -Wes Bos: Yeah. So Sanity, Scott, not Sentry? Yes. Let's try that. Again. See, I'm not messing it up. If you want it to like maybe give your user some input fields for a title and a little wiziwig. editor? How would you use that? Scott? How would I use that? Or why would you you Okay, this is awful. Can you please transition us to sanity? Sponsor? Yes, yes, yes. You know, so along that same lines is we really want to give our content editors a perfect place to just enter something not mess it up have exactly what they need there. And that's actually one of the places where Sanity shines. And I'm talking about sanity.io. Now, Sanity is the backend CMS that your your front end data needs. And one of the coolest things about Sanity is they allow you to customize their admin interface, and it's all built with react, it's really fantastic. Which means that you can do what I'm talking about here, you can exactly your content editors edit the source in a way that gives them no opportunities to mess it up, you give them exactly what they need, they can visualize it, they can see it, it's all react, it's all customizable, you can get started in just minutes. It's unbelievable. So you're gonna check out sanity@sanity.io. And there's so much more here, there is so much more, there's this awesome graph qL aspect of the whole thing. But basically, all you got to know before you head over to sanity.io right away, is that it's an awesome place to host your back end data, we get questions about these kinds of services all the time, and Sanity is a fantastic option. So you're gonna want to head to sanity.io forward slash syntax. And you will get an awesome supercharged free developer plan, which is a double usage. So check it out. sanity.io, forward slash cindex. All right. Next little thing we've got here is what I like to call page alerts. So you know, you visit a website and you get that little bubble of information, your contact was updated successfully, or there was an error doing X, Y, and Z, yep, or a warning, whatever. Generally, when I'm building a website, I will it whether it's like a toaster that pops up from the bottom right hand corner, or whether it's just a little alert that goes on top of an existing page. This is different than like a site wide bar, or banner, because generally, sometimes pages on your website need the ability to just have a little like, hey, heads up, this is still a valid page. But please take into consideration xy and z. So giving your user the ability to insert and what do you even call that like an alert, not like a pop up alert? We call it an alert on level up. Our component is an alert component component. But the common way that I hear it is a toast message. Yeah, in the in the Android specifically and only Android development. They call those a toast in the official SDK. But I'm not exactly positive what their official official name is, but I fact it's funny because I've had people correct me when I've called mine on alert and meant like it's a toast message. And so yeah, you know what it is? What is it their flash messages which I like that all flash was like when you did everything server side? Yeah. You could just, you could flash something and then on the next load of a page, then the user would see general you code something green, yellow and red for the different situations. So also, just like giving the user the ability to insert a div, with the class of what I'm just looking bootstrap calls them alerts. So that's fine. Yeah, it's fine. Yeah, it's such a common UI paradigm that everybody has just how to give your user the ability to insert those in, because like, maybe, maybe someone's viewing the Hours of operation. And you might have a little pop up, say, hey, heads up. These hours are currently modified, please call ahead to the store to make sure we're open. And that's just a good thing to have in general, for things like holidays and whatnot, as well. - -16 -00:20:48,390 --> 00:25:39,540 -Yeah, totally. We have those for all sorts of things. And I keep talking about like custom hooks in our react set up, right, I would recommend making these super easy to use, like we just have a single function, whether this is Redux, or whatever this just send alert, send air or whatever you pass in a string, make it nice and easy. Next is going to be creating new pages. I know a lot of people right now I have a lot of information to share. Specifically, I know our daycare sound like a tome of stuff, here's what you need to know, here's what we're doing, here's what you like, anything that's pertinent. And it was gigantic. It was it was just like an basically like a, one of those pop up messages. And it should have been a page really, they should have just sent you to a blog post. And so just like you should, with any website, you do like across the board, you should never put out a product that doesn't have the opportunity to have a single page with text information on it. Because your clients are going to want that just about at any given point or anything at any time. And if they go to create a new page in let's say, WordPress, or Drupal, and it looks like total garbage, well, that's not a great look for you. So you want any sort of generic page to be a single page, nice text, nice defaults, you need to think about that. And often times that these things, they're just sent out via like an alert, like, click here to read more or whatever. But you need to think about, well, if if this is some sort of long time important thing, how do they link it? How do they add it to the nav? What do they do with this page? What did they do with this content? So you need to have a single pages ready to go, you need to have nice slugs. A slug is a English sort of way of having the URL. So it's not just whatever.com forward slash an ID, you want to have it be the page name, kebab case, store something pertinent, something relevant. So what do you do? You got to have these things? Again, nice defaults. Nice work. So they can just add it easy peasy. Because you mentioned very specifically that people aren't going to be thinking about the brand or whatever, at this point. They're just going to how can we get this information up as fast as possible? Totally. Business owners have enough and I say business, but I mean, like, it could be a school could be a local organization, these people have enough on their plate. They're trying to figure out what's going on right now. The least of their worries is does this look good for our users, and I would say that's on you, as a web developer to make sure that whatever it is that they put out there looks good to the user as well as things like like Scott said, the slug, because he like you might have like a radio announcement, make sure you go to whatever comm forward slash note a for all the updates on on what's going on right now. Or you might post that out to Facebook, it's just a link. What about Google to you Google, you know, level up toward tutorials, COVID-19, or whatever, just to see what their status or whatever is, and you want it to be able to be found easily? Totally, totally, you're right. Speaking of Google, one thing I was wondering is, how do you tell Google that the hours of operations have changed? Because you go to Google Maps or Google Places or something like that, and they show the hours, and sometimes they will even show you the hours on holidays? Which I love? Totally, you don't have to call them to see if they're open or not. And I was like, how does Google know that? And I've dug into it and there is a meta tags for specifying hours of operation for your business, which is pretty cool. Do you know about this? I didn't. But it's funny because I would imagine most of the people who use those in some capacity might not even know about them, either. Maybe they're just like adding a plugin that's like hours of operation plugin. And let me add them here. You know, I think Google does a pretty good job at scraping just markup. And if you use like a ul or something like that, it's it's, I think, like good is just cleaned markup better is using the time tag. With date time in it I use. I've been using the time tag a lot on my own website that I've been working on recently because I Want to show Google when things have been updated and when things were written. And then like I think best is just stick that data right into a meta tag. And we've linked here just to the spec for the meta tag. And you can you can list all the days you're open all the times that you open, what times you've clothes, things like that, which is pretty nifty. And I'm assuming Google will slip those up. And I'm not sure how quickly they will change them on your business profile. I'd be interested to see how that works. Yeah, that's a nice little good, better best coupon together. Thank you. Yeah, it's just yeah, looking man, just tearing things out all day long. - -17 -00:25:41,940 --> 00:28:00,270 -So the next is going to be how can we do this with things that we've already like, you already have a hook into your audience that somehow right, for instance, you have their email address, or they have an account on your site, we actually have the little user dashboard on level up tutorials. And I do like little alert pop ups there for things like the newsletter or things like that, or the latest series. And that could be a good way because they already have an account, they've already said that they want to hear from you in some sort of way. And along the same lines is probably the way that I've received most of the alerts so far from different companies, and that be via email newsletters. I've gotten just about a COVID-19 or snow day email, I'll say snow day from now on, I got a snow day email from just about every single company I ever signed up from a newsletter for letting me know what their plans and thoughts on it were, you know, the ones I appreciated were the ones that I actually cared about it and the ones that I didn't appreciate, were the ones that were just like, Hey, we're just thinking about it. It's like, okay, but there's no important information. I'm already learning about this thing from everywhere else. Like, I don't need you to tell me what it is. Yeah. Like my bank sent me out. We're here for you. Yeah, right. Okay. Yeah, you are sure you'll be here for me? Yeah, we bought a custom door for our bathroom like six years ago, from a company. And they emailed us like they've never emailed us before. And they're like, we're here for you like, your door is here for me. Out here, you're not here for me. Yeah, don't do that. Honestly, I, I'm just looking at all of the stuff that's going on right now. And I'm like, man, I see people scrambling to get a website up scrambling to get more of a online ordering setup. I see people scrambling and posting out to Facebook, because that's the only way they can possibly reach their audience. And I think like, man, like, this thing is going to cause people to sort of reevaluate and say like, how do we, when things go awry, especially our business that could be potentially closing down if we don't get enough sales? How do we access our audience much more easily? And I think email newsletter is probably number one for that, that type of thing. Don't lean on your, your Facebook page in order to get information out, especially when it's super important. - -18 -00:28:00,719 --> 00:28:01,800 -Unknown: Yeah, totally. - -19 -00:28:01,800 --> 00:33:00,030 -Wes Bos: Um, what else my dad, some of my relatives own a, what's it called a huge greenhouse. And my dad does a website for them, and they had to close. And they have the thousands of dollars worth of flowers that are just sitting there. And they were allowed to do a online pickup where you can schedule, like a time. And he just reached out for some real quick, like scheduling software for meetings, people were able to book themselves in for a spot and note what they wanted, and then they got to show up. So that's probably not something that you need to code ahead of time. But just know that that is a possibility. And you could probably reach for some off the shelf scheduling software if you need to do it. Yeah, this was, I don't know what things have been like for you. We talked about this before. But before we started recording, but in the snow day over here, they they started said okay, anybody who, you know, you can now do delivery, for alcohol via bars and stuff, or I know some of the liquor stores around here, were really scrambling to get their online pickup or ordering online process going. And I think it's important to maybe at least if you are in the type of business or anything where you're shipping or dealing with actual goods or creating a site like that might be a good idea for you, as a developer, to have some idea about the general landscape of things like that, because they could email you and say, we need online ordering right now, what are you going to do? And you're not going to have a lot of time to think about that. I was just, I was thinking about this, specifically because the one that we ordered from has some software and I had never heard of it before. And I'm trying to find it right now. But it was basically just like an iframe that popped in from the left and everything I framed in you added your catalog in there, and they took care of everything and it was able to be dropped into an already existing website. And it honestly just looked like they took any of their given pages and dropped an iframe into the main Section. And then the cart was sort of like a iframe and over on the side, and it worked really super well. I know there's like snip cart does this, there's a bunch of little solutions for this. But there's some that are way more managed. And it would be a good idea for you to at least have the idea of some sort of the landscape of different services that could augment your service in the time of emergency. Yeah, absolutely. I had this with my church, they said, obviously, all all churches closed down. And they said, We need to live stream. We've never done this before. Right, I build the website, OBS. And I was just like, oh, like I'm, I'm the tech guy. So I figured this out now. And I was like, like OBS you had that like that. Like, also, I couldn't like derive it from my cottage. Because, yeah, it's awful. I can't run OBS from my cottage, and upload all this, like 4k, whatever. And so like, we got zoom piping into YouTube. But then YouTube needed 24 hours before you could live stream. So I wait for that. And then like, you can't embed a live stream unless you have 1000. No mic, drivers and a link ads. And I was like, oh man like this took us like probably like a week and a half. Just to get all this stuff set up properly. You think like, Oh, yeah, just go whip up a YouTube account. And you're good to go. But because of like measures against people abusing the system, some of this stuff takes days or weeks before you're allowed to fully use all of the things, all of the features. So even if you want to create a YouTube and Vimeo account and have them empty, or just upload a couple small things, just having an account that has some age to it will probably help you in the future. So like letting a client know you're building a website for them. Hey, I know that you don't might not necessarily need this. But should you need to do something really quickly. It's worth having this thing set up properly. I saw that also with restaurants as well. They're scrambling to get their Uber Eats up and running. They never had Uber Eats but now they need it. So it took them at least a week to get online with Ober eats when they probably lost a whole week's worth of takeout. Yeah, totally. I mean, that's a whole big bushel of work right there, the personal word. But I I think this is an important key piece that you touched on is really that, like, when you're creating a project for something, it might be worthwhile to create all the accounts around that YouTube, Twitter, you know, all of those things, not only just so they're locked up, and you have them, but you have them in case you need them. They just exist. You don't have to use it just because it exists. So I think it is important to at least own the accounts that you might need, not just the accounts that you do need. Yeah, absolutely. And let's talk about a service that you absolutely do need. And that is sentry@sentry.io. Hey, I usually do the Sentry AD West, do you want to take a shot at it? Since I did the Sanity ad? I do. - -20 -00:33:02,040 --> 00:37:30,090 -Yeah, Sentry is all the error and exception tracking that you need for your project. So the way that works, you install this little snippet on your website, and then it will log any errors that happen. You can put them all in one place. So you have your back end, you have your front end. It's kind of cool. They the one of the examples they have is serverless. I specifically was looking at what is it CloudFlare workers about like, like, how did they don't have logs? So if something goes wrong on your CloudFlare worker, like how do you know what happened? And their solution is I'm not kidding, just use Sentry so you can integrate your Sentry into your serverless functions. So whatever goes wrong in serverless function, you'd be able to get some more context as to what happened. It's not necessarily a user went to the website, and something happened, it could be there wasn't there was a 404 error when you're expecting JSON to come back. And in order to get some more information about what happened there. Sentry will log all of that even in your serverless functions, which is pretty cool. Tons and tons of different features they have here you can assign it different people. You can look at the breadcrumbs as to what happened leading up to that specific error. And you can integrate it with pretty much any language imaginable. Go check it out. Sentry.io use the coupon code. tasty treat for two months free again, that's tasty treat all lowercase. All one word. Thanks so much to Sentry for sponsoring. Nice. We did a little ad swap today. That was fine. Yeah. switching it up. Yeah. So lastly is a deployment which is a big thing. Because if you are running a site that is 100% front end code, maybe you know you built a Gatsby site and there's no back end and everything's modified through this or that or whatever. Your clients are not going to know how to head to GitHub to edit the posts. They're not going to know how to read up lay the thing. They're not going to know how to update anything. So you have to make sure that if there is a process in case your users, your clients that need to add or update the site in any sort of way, without your help, you need to make sure that's in place, whether that is a CMS based solution, which is obviously the easiest one of those. And even if it's, I don't know, what like, what kind of tips do you have for redeploying or having your clients deploy things that needed to be added? I think that the the kind of the scary thing is, is that sometimes you build a website, and you just don't touch it for three or four years, because it's working fine. Especially with something like WordPress, the updates happen on the server, and the clients continuing to update content on it. But if you need to quick panic, add a banner or something like that, then like, you have to remember, okay, how do I deploy this thing? Where is it locally on my machine? How do I recompile all my CSS? So make good notes as to like, how, what's the deploy process for this? What are the credentials, all that good stuff, because like, when people are panicking, that they need to update the website, that's not the time to figure out that you're This is actually this probably is the time that you'll figure it out is that your CSS doesn't compile anymore, because it's not like I specifically I've got a gulp three website, and it doesn't, it just doesn't work with anything past node 12, or no 10, something like that. And every time I need to work on it, I have to revert back to an old version of node in order to make it work. And it's frustrating when you want to just get something up really quickly. So maybe just making sure that you still know how to compile and deploy that thing nice and smoothly. And maybe you have someplace where you have some sort of encrypted record of law. I mean, I guess, like a good option for that would be like one password, right? Like we talked about in our password security things. One password allows you to store more than just like passwords, they allow to store notes and things like that. So maybe need to add DB credentials, db locations, different things that you need to access quickly, like, let's say you pop up into my sequel, and all of a sudden, you're like, shoot, I have no idea what the username and password for this specific database was. And then you have to go try to figure it out, whatever, make sure you have all that stuff. I used to keep it in an encrypted table. But I think one password might be a better place if I needed to store any of that data long term. Yeah, yeah, I agree. Just having that because that's a bad day, if you forget how to how to deploy that thing that day. - -21 -00:37:30,300 --> 00:42:25,730 -Yeah. Other things you need to know about do any caches need needs to be cleared. So if you are using something like a CloudFlare, and you you deploy a new banner on a website, you might have to log into CloudFlare and clear the cache, because that information needs to be seen immediately. And not in three hours when that cache clear. So just knowing how to clear the cache, any CSS that needs to be cached busted as well. So if you if you deploy a bunch of new CSS, and that's why all of this information, all of the stuff we're talking about today, it's way better to think ahead for it. Because when it does happen, you don't have to worry about busting your cache and CSS or any of that, busting your ass to bust your cache. You could just do you can just deploy the thing or you don't even have to deploy it, you just have to type in the box in your in your editor in that content will show up. So obviously do this stuff way ahead of time, if you can. I think that everything that's gone down now, it will make us start to think about how do we add this stuff to our website, even if it costs your client a little bit of extra money, you can very clearly explained to them like, Look, if something goes down, we need to be ready. And we can't, you can't just call me up on the phone. And we'll deploy it right away. Right, because we've sort of talked about the availability of companies and people scrambling. But if every other company is scrambling to get these things up at this point, the developers who worked on these projects might be totally swamped as well, again, giving you an argument for why you should be worrying about this now rather than you know, well, actually, right now when we have a snow day. Yes, absolutely. Yeah. So that's all I got here. What do you anything additional? No, I think that's good. It's a probably one of our shorter episodes, but pretty important stuff. I would say. Yeah, maybe once all this blows over. Go ahead and start talking to your clients about like, how do we integrate the stuff into the website, so we're a little bit better prepared for the next day? Yeah, totally. So next section of the show is the part where we talk about things that we like sick, fix things that are sick pics that we have of things that we like, do you have any sick pics Ready to go? I do actually. Um, this is more of a sick tip or something like that. Oh, sick tip. So when we realized that our vacation was canceled, this is by the time you're listening, it's probably a month ago. We said oh shoot. We are headed up to our cottage and we don't have like a TV or anything up here. And we're going to be spending some serious time we want to be able to watch him TV. So I jumped on marketplace and figured out that like five, six year old projectors are very, very affordable. For 100 bucks. We grabbed this like five year old, two Hd 1080 p projector. And it looks awesome. It just projects onto our wall. And I thought like wow, that that was that was a way better call then then going and buying like a cheap TV or something like that. We had to buy a little set of computer speakers for it and whatnot as well. But what about the bulbs? Did you buy a fresh ball? But what's the bulb life on it? Yeah, that was that's the kind of the scary thing is that like a bulb can last about 2500 hours or 2000 hours. So I asked the seller, can you look up how many hours are on the on the ball? And so he did and he said 500 500 hours, which leaves me with tons of time on this one. So I think like if you want if you're looking for a little project or something like that, maybe go look on the US classifieds. Once all of this blows over don't go Now don't be meeting random people in parking lots. Yeah, don't do that. Because I was I was so surprised that like the the value you get for your money. I remember projectors were thousands of dollars when I was a kid or even just when I was doing teaching in person like 510 years ago, they were pretty expensive. But they've come down quite a bit. My first job was a projection. Oh, yeah, sure. Yeah. So we used to have to replace the bulbs all the time because they were used like eight hours a day, you know? Yeah. So we were always replacing the bulbs and these projectors, I went to a projector conference. I went to a conference in in Las Vegas for projectors. And I learned a lot about projectors. It was probably the lamest conference I've attended. Not because projectors aren't cool, but because I really had no one to be there. My boss was like, you need to produce one blog post a day, and you need to do video blogging back before that was really even a thing. So I don't it was it was fun. It's kind of unknown world to me. I dipped into a real quick I just like went online to see how much is a bulb in case it does burn out and it's about 150 bucks. So more than the projector cost itself if you have to replace the bulb, which can be a bit of a bummer. The bulbs are expensive. - -22 -00:42:26,150 --> 00:42:32,130 -And you have to be very careful when you install them. FYI. Oh, he can't get the oils on your hands or - -23 -00:42:32,130 --> 00:42:37,920 -Unknown: why? Yeah, you can't get handles on the ball because the ball gets super hot and then that will destroy the bulb. So yeah, - -24 -00:42:38,040 --> 00:45:34,740 -Wes Bos: pro tip. Ah, that's like those old halogen work lights just like that. Yeah, you can't touch them otherwise they explode. Exactly right. You know what that so my sick pick is going to be a another YouTube channel full of music for these snow day times. We've been putting this on the TV and these things are just amazing. Not always the most essentially. I don't know, there's never any like I don't want to say nudity or anything because it's definitely not but there's definitely a lot of like, you know, shirtless dudes surfing on the beach, or you know, people getting a, you know, tan or something. But these things are basically like, they're basically like a screensaver that changes this. This guy has a YouTube channel here, mellow groovy sounds where he mixes together various funk, soul and mellow music mixes from the 80s and 90s and 70s. And let me tell you, you've probably heard none of this music before because even the artists that they do feature that you've heard of are fairly deep cuts. And they are overlaid on essentially GIF length HD video of various beach scenes for a couple hours. Some of these are two and a half hours long. And they have various different ones even like some Japanese city pop ones, but we've been listening very specifically to the mellow groove a or West Coast mix number three. And all the time we put this thing on now and it's gotten to the point where we recognize and know the songs and the songs are sort of goofy, but it really transforms you into another place. You see these beach scenes, you see these whatever and it's so good. Like they're they're just some of them when I like I had a hard time shutting this off the other night because Oh man, I was like, I was about to shut it off. And then midnight rondae food came on and I was like, Oh no, it's midnight rendezvous. I can't shut this off. So it's so good. They're goofy but we've just been living on it and we had to cancel our beach vacation. So when you get this like beach scene going on in the background or something like that, it really does help a little bit transform you move you to another place and ah been relying on it so much and absolutely really love it. So check this YouTube channel out. We've been again living on this Awesome, shameless plugs, go to Wes Bos comm forward slash courses to see a list of all of my JavaScript CSS courses you want to learn react or something like that, check it out. Use the code syntax for 10 bucks off. Yeah, cool. Head over to level up tutorials.com and if you are not already a subscriber, you can sign up to become a pro for 50% off also everything in the store right now is 50% off as well. Beautiful. Alright, thanks so much for tuning in. And we will catch you on Monday. These is - -25 -00:45:36,540 --> 00:45:37,350 -Unknown: head on over to syntax.fm - -26 -00:45:37,350 --> 00:45:46,290 -for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax241.srt b/transcripts/Syntax241.srt deleted file mode 100644 index dd2d89c0d..000000000 --- a/transcripts/Syntax241.srt +++ /dev/null @@ -1,156 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Taylor. Totally in ski. - -2 -00:00:25,950 --> 00:00:58,110 -Scott Tolinski: Oh, welcome to syntax. In this episode of syntax, we're going to be talking about five more things you should know about performance to make your applications much faster, very much faster. We have so many things, so many tips, so many little things that you can do here. So this is part two of a series that who knows how many parts are going to be because there's just a lot of perf tips. We have an endless stream of them here. My name is Scotland ski. I am a full stack developer from Denver, Colorado and with me, as always is Wes Bos. - -3 -00:00:58,170 --> 00:00:59,190 -Wes Bos: Hey everybody. - -4 -00:00:59,190 --> 00:01:02,150 -Scott Tolinski: Wes Bos coming at you from the boss house. - -5 -00:01:02,159 --> 00:01:09,930 -Wes Bos: Boss. I've been asking people what I'm building a little shed office and trying to figure out what to call it. - -6 -00:01:09,930 --> 00:01:11,970 -Scott Tolinski: Bosaso is my submission. - -7 -00:01:12,120 --> 00:01:15,450 -Wes Bos: Boss hos cm. So people accept called the bike shed, which - -8 -00:01:15,450 --> 00:03:01,290 -Scott Tolinski: is bike shed fantast. Yes, right. And that's where West is, home base is going to be well, he shipped some code. And while he shipping code, he's gonna want to make sure that there are no bugs in that code. Even if he is working out of a shed, if we don't want bugs, no bugs in the shed. I actually had a dream last night with a bunch of creepy crawlies. And I'm not into bugs right now. So if I want to keep track off, yeah, I want to keep track of my bugs, I'm going to do so with Sentry, it's actually funny, my dream involved a brown recluse spider, and we were like sleeping in somebody's basement and sleeping bags, and we lost the like, oh, there's a brown recluse spider, we got to take care of that. And then we couldn't take care of it, and we lost it. And then we're in sleeping bags, that's the place you want to be with the brown recluse spider on the loose is in a sleeping bag. So you're gonna have to keep track of your bugs. And you're gonna do that with sentry@sentry.io is the perfect error tracking solution, because it gives you all the information you need to know while keeping track of your bugs. What release it happened in. Well, if you have a source map set up, it can show you exact line where this bug happened, what browser what user committed this air, all within an amazing, fantastic interface to keep track of all of your exceptions. You can mark them as complete, finished, whatever. And again, attach them to GitHub issues. It's so good. I it's an essential service for my business. And I know it will be for you. So head on over to sentry.io use the coupon code tasty treats all lowercase all one word, and you're going to get two months for free. Yeah, that's a lot of left a lot of free. So check it out@sentry.io. All right. perf tips, five more performance tips. Wes, do you want to hit up the first one? - -9 -00:03:01,890 --> 00:04:33,240 -Wes Bos: Yes. The first tip we have here is shipping too much JavaScript. This is something that happens. I think this happens because a lot of applications, especially ones that have been around for more than no more than five years or so they're built on the fact that your JavaScript depends on other JavaScript. And that depends on other JavaScript. And it's very brittle. You can't just take part of the JavaScript out and expect everything to work, because they haven't been written properly with modules or things like that. It's all sort of just jammed into the the global space. And it's pretty common. Like I look at a lot of like online stores and things like that. And you can tell that they are shipping tons of JavaScript, because it's just way too complex to figure out how do I only load part of it? Or how do I load it on the pages that is needed. So thankfully, that has gotten a lot easier with tools like parcel or Webpack. And react, lazy loading code as you need. Webpack has a bundle analyzer that will tell you, if there's unused code code, what's it called treat code shaking, tree shaking is when it will figure out if if parts of the library are unused, and it will drop those from the final build. So there's really a lot you can do in terms of slimming up your JavaScript. And the tools that we have right now for being able to look at what is large. And and what is. What can be code split make that a lot easier these days. - -10 -00:04:33,690 --> 00:05:33,030 -Scott Tolinski: Yeah, it does. And that's really the key takeaway from this one is that, yes, you have some responsibility here. You can't load up bootstrap and material UI in one project and have your bundles stay small, right? You have to keep be cognizant of what you're adding to your project at all times. And it's We're so lucky that we do have these tools for us right now that we can have a bundle analyzer No Meteor has a bundle and bundle analyzer as well. Anything you can do to visually see your application, I bet personal might as well, we should check into that. But either way, these kind of tools are extremely, extremely helpful to find out where the bloat is coming from, you might not even realize that one particular module you're adding might have another module that it uses, which is another module, which all of a sudden, you look at this thing and say, holy cow, I did not know that this react toggle was taking up, you know, 200 kilobytes of JavaScript, - -11 -00:05:33,510 --> 00:06:15,570 -Wes Bos: or, like a package was meant to be used server side, but you just included a client side. I've done that with a Yeah, slug library. The slug library included a description of every Unicode character ever. So like, like a Unicode heart, it means hearts. A crying emoji means laughing and crying. And like, surprisingly, if you ship a description of every single emoji to your browser, that will add, I think it was like two Meg's or something like that. It was huge. And I was like, what is causing this? Yeah, it's just silly things like that, where you npm install, some think it's gonna be fine. Like Scott says, You have no idea what that is requiring, under the hood until you use some of these tools. - -12 -00:06:15,719 --> 00:08:01,710 -Scott Tolinski: Yeah. And I like what we've talked about these bundle, and Allah is just a couple of times now. But like, you definitely should get some sort of visual on it like what is because it's so powerful. When you see these giant pizza pie slices taking up a big chunk. I am like almost obsessively eliminating some of that stuff like how can I get this smaller? How can I get this smaller? Okay, next one is going to be not bundling your code, which is a big problem that you probably don't want to have. And this is a problem that's becoming less and less prominent as bundlers and Webpack, and parcel and all these things become way more commonplace, but for a very, very long time. And still, in a lot of places, it was sort of weird to have a build system, I remember the first time we instituted a gulp process in our workflows. And a lot of developers had a really hard time getting up and running with it, because it was so foreign and different than what they were used to doing. And same with grunt. And when any of these things came out, at first, it was like, Oh, I have to run this thing. Every time I save a file. Now, it was just definitely like a process and maybe CSS preprocessors were the lead into that. But bundling your code together is an essential thing about releasing something because what it does is it it takes all of your your things that you needed to do it minify them. And what it does is it removes the whitespace it makes the characters less redundant. And it just gets your project ready to go so that you're serving one file, one main file, or maybe potentially lazy loading some files, but you're serving one main file rather than one giant giant file or several giant files, right? - -13 -00:08:02,070 --> 00:08:36,169 -Wes Bos: Yeah. Because at the end of the day, we talked about this in the last episode is that more requests, cause that waterflow water sorry, waterfall requests. There's only so many I forget what the thing is. But there's only so many requests that your browser can make at one time. And then once you get past that, it'll start to waterfall them for you. So bundle it up, and then sort of goes with bundling is compressed them. So what's the one that we use in in JavaScript land is a uglify? I don't even know what they are on dad anymore. There was a Babel one. - -14 -00:08:36,289 --> 00:09:30,170 -Scott Tolinski: There's even some new ones that are coming out that are I don't want to say that they're like brand brand new or something. But they're like things that are much better developed by Google. I'm totally blanking on the names of them right now. In fact, the new react router uses that in it like they got a ton of performance for react. router, six. Oh, so react router six is using the new Well, not the new, but it's using the Google Closure Compiler. I don't know if you've heard of this compiler. But it's really super, really super good. And it got their bundle size from 28 K, that's minified to 88.5 k minified. And that's only 2.9 k g zipped as opposed to 9.4. g zip. So Wow, big savings there. - -15 -00:09:30,530 --> 00:11:00,600 -Wes Bos: Yeah, I remember this from a long time ago. Yeah. And everyone said like, it's good. But like you have to write your code in a certain way in order for it to work. It's a Java application, which is really funny. Yeah, closure compiler is a Java application for minifying JavaScript, which is pretty interesting. So I don't know what they're doing under the hood. But I guess there's huge benefits if you write your application in a certain way, that it can then be minified What else we have here? g zipping. So generally GG g zipping is something you just turn on in your server. And then when your server serves up a JavaScript file, it will do things like if you have a variable called Scott 47 times in your JavaScript, it will realize that I'm not going to send the word Scott 47 times, I'm going to send this the word Scott once, and then I'm going to all those other spots, I'm just going to point to the original Scott. And then that will, that's what Jesus thing is it makes it makes redundant words and letters and characters only be sent one a once over the wire. And browsers are able to unpack that. So it's not like g zipping is Ossining. You have to turn on in your browser. It's something you turn on your server, and then your browser will know how to unpack g zip code. So that's generally turned on by default, but it's certainly worth checking, because it's an easy win for all servers. - -16 -00:11:00,990 --> 00:11:25,530 -Scott Tolinski: It's an easy win. Do you remember there used to be like a PHP module? What was that called the Google one that you just added. And all of a sudden, your site got a whole bunch of compression benefits from it. I totally blanking that was like Google PageSpeed or something. But it was like some module mod that you could add on to PHP. And I remember the first time we did an a Drupal site, we were just like, blown away. It was in nginx, that we did it but there - -17 -00:11:25,560 --> 00:11:30,990 -Wes Bos: Oh, yeah. Yeah, that's an Apache and nginx. module called it's called Google PageSpeed. Google PageSpeed. - -18 -00:11:31,020 --> 00:11:54,600 -Scott Tolinski: Yeah, stuff like that is just endlessly important when serving your code. And often we don't think about it. But if you do have control over your own server, it's one of those things that you do want to make sure that you are utilizing to its full capacity. Next one is going to be loading JavaScript synchronously. That was I always want to say like synchronicity synchronously. So this is basically - -19 -00:11:54,630 --> 00:11:57,120 -Wes Bos: Oh, sorry, that's supposed to be a synchronously. - -20 -00:11:57,180 --> 00:13:00,480 -Scott Tolinski: Yeah, I was gonna figure this out. I was like, why would that? Yeah, I was, as I was reading this, I was like, Wait a second. So this is often you'll often see this in libraries, when they tell you like here, copy and paste the script at the bottom of your code. And it will be a little property in the script tag that says async, or I'll say, defer. One of those things that's async. This attribute means that it's executed as soon as it's downloaded without blocking, right? So blocking is when something loads, everything else waits for it, right? What this async means is that, hey, the rest of this stuff can load, right? But this thing's gonna download just sort of on its own. Now, the defer tag, it also does not block, right, so it's not going to sit, it's not going to block any of your loading. But unlike async, defer is only executed after the entire document has finished loaded. So if your package like isn't needed, right now, now, now, you can always defer it and at least use a sink here. - -21 -00:13:00,780 --> 00:15:25,890 -Wes Bos: Yeah, I found this really nice. Stack Overflow, that explains what happens. Because back in the day, we used to just put all of our script tags in the head of our doc Yeah, right. And the reason the reason we did that is because we wanted to make sure that the JavaScript was on the page first, and then the HTML, and then we move to putting the script tag, like before the closing body tag. And what that did is it made sure that the tags were on the page before the JavaScript. So this like, was really cool, because it tells you how the browser works. So when you fetch the page, like index HTML, then the browser goes and starts parsing the HTML. So it downloads all of the text. And then it says, alright, I'm going to turn this text into HTML elements. And that's, that's the parsing step. But when the parser runs into a script tag, referencing an external JavaScript file, so script source equals bundle dot j, s, the browser goes off and requested that script file Meanwhile, the parser blocks and stops parsing the other HTML elements on the page. So if you have like an h1 tag, and a paragraph tag that says thanks for visiting my website, that will not show up until the JavaScript in the head has been totally downloaded. So that's number five, after some of after some time, the script downloaded in sub is subsequently executed. So it runs all of the JavaScript in that file as well. And then finally, the parser continues with the rest of HTML document. And that's why we always told you put the script tags near the closing body tag, because you at least should show your user something on the page while you're downloading this JavaScript, because likely, they're not going to click the buy button and the second, the page loads, and that just gives a faster perceived value. But now with the sync and defer tags, as Scott was talking about, it doesn't matter where you put your script tags as long as you know that Using those properly, in my tutorials, I still put them right before the closing body tag, because it's a bit of a foot gun, if you don't hundred percent understand how they are on the page, and then also putting them near the closing body tag as you never have to deal with waiting for the document to be loaded. And like that's when in jQuery days, we would pop everything in dollar, right dollar sign, - -22 -00:15:25,890 --> 00:15:31,170 -Scott Tolinski: whatever the way for the browser. Yeah. Yeah, document ready. And by doing all of that, my gosh, - -23 -00:15:31,200 --> 00:15:40,920 -Wes Bos: yeah, you don't you don't need that if your code is loaded after the HTML elements, because you know that it's on the page already. Because it came before. - -24 -00:15:41,300 --> 00:15:45,270 -Scott Tolinski: It's funny how many problems like react solves here? Like I don't think about this stuff. - -25 -00:15:45,330 --> 00:15:47,520 -Wes Bos: Yeah, you don't think about any of that. It's amazing. - -26 -00:15:47,520 --> 00:16:11,430 -Scott Tolinski: I have a hook that I used to load scripts that I wrote, it's like a script loader. Yep. And it's like, is the script loaded or not? It just spits out a Boolean, you pass in the script, or whatever. And then you only load external scripts when you need them. Like, I don't love that the checkout stuff unless somebody clicks on the checkout. So yeah, it's so funny, how many of these problems are taken care of, you just don't have to worry about them as much. - -27 -00:16:11,910 --> 00:16:39,330 -Wes Bos: That's like, ideal world for me is that like, most developers shouldn't have to know how this stuff works. Because they're either not going to care, they're not going to have enough time to actually implement it, or get out there stuff to worry about. Yeah, they got other stuff to worry about. So like, just let the let the tools and the frameworks do that heavy lifting for you. It's the same thing with Gatsby and image compression. Let something else do it for you. Because it's too hard for most most of us. Yeah, - -28 -00:16:39,360 --> 00:18:15,900 -Scott Tolinski: yeah, I'm into that. Alright. Last one is going to be this is going to be a DB side of things. And sometimes when you're working with a database, and you are not a database person, that you might neglect certain things. And one of the things that gets neglected often is defining indexes on your database. Now, it's different for every single platform, depending on how you do it in Mongo. It's just like a one liner, you're saying, hey, this field is an index. Now, what is an index? Well, an index is basically, you can think of it as sort of like a tape. So Table of Contents is basically an easy way to look up things that are commonly used. So if you have an ID field, or maybe let's say, here's a better example, because an ID is almost always automatically indexed. But let's talk about what is a slug, right? a slug is something you'll often look up a page by, right, the slug comes in, you send that slug onto your server, that slug then is in your database query. And what you need to do is make sure that you have an index on that slug, because what it's going to do is it's going to build what's called an index, and it makes the lookup infinitely faster. So it's definitely something that's highly required. Anytime you're doing any sort of lookups is you want to make sure that you have your indexes on your DB fields. Now, a lot of platforms like I said, take care of this different in different ways. Some do a little bit more automatically than others. But with Mongo, it's it's just typically a one liner, just look it up. How do I Place an index sticker on I have an index on anything you do a find on anything, you do a sort on anything you do a filter on, or an ordering on any of that any of those fields? Yeah, I - -29 -00:18:15,900 --> 00:19:28,710 -Wes Bos: always do it immediately on slugs, emails, IDs It comes with, and then any other like anything, where you're comparing values greater than less than dates, things like that, that will make sure that those things are nice and fast. I also my M lab, which is my database hosts just which is now MongoDB, Atlas, they send you an email, I think, weekly and tell you what you should pay indexes on because it says like, Hey, you ran this query 100 times last week, and it took on average this long, throw an index on it, you can't index everything, because then you run out of space, because I think it puts them in memory or thing. I'm not sure where to put some pie somewhere. Basically, every time you put an index on something, it has to loop over all of your data and store that info. So like if you have a very large database that certainly could take hours, if not days to build indexes for your existing data. But in most cases, at least in my data, it's very small only, I don't know, four or 500,000 entries in certain tables. It's it's not it's pretty quick to do something like that. - -30 -00:19:29,060 --> 00:19:38,060 -Scott Tolinski: I absolutely love the Atlas side of things where it tells you what indexes are there. Have you used the compass app that they give you with that? - -31 -00:19:38,130 --> 00:19:43,410 -Wes Bos: Yeah, we use it in. I think three of my courses we use. Yeah, I'm good to be compass. - -32 -00:19:43,550 --> 00:20:21,210 -Scott Tolinski: This is great. And it tells you where you need indexes and it lets you know all that stuff. So you need indexes in your database. I wish I knew more about them within other databases. Like I don't really know what the index situation is on other databases. I just know that it's I think you need it's funny that I think the question everybody asks, When it comes to indexes, it's just sort of like, well, if the if the black box is is, you know, so solid, why don't they make the whole plane out of the black box, you know that all the indexes were Why don't you just index the whole thing? And it's a funny I'm so glad you touched on that because it is it's the question that everybody asks, like the moment they learn about indexes. - -33 -00:20:21,560 --> 00:20:29,940 -Wes Bos: Yeah, Joe, this thing makes it faster. Slap that on everything, right? Yeah. That's fine. That's it. All right. We'll stop there. - -34 -00:20:30,000 --> 00:20:30,690 -Announcer: No more. - -35 -00:20:30,720 --> 00:20:32,360 -Scott Tolinski: No more perf tips for you today. - -36 -00:20:32,600 --> 00:20:38,300 -Wes Bos: Thank you so much for tuning in. We've got some more coming up. So get ready. - -37 -00:20:38,789 --> 00:20:44,600 -Scott Tolinski: Get ready, strap yourself in and get ready. We got five more coming out. Yes, some other time in the future. - -38 -00:20:45,080 --> 00:20:49,850 -Wes Bos: Beautiful. All right. Thanks, everyone. Catch you on Wednesday. Please - -39 -00:20:51,690 --> 00:21:01,470 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax242.srt b/transcripts/Syntax242.srt deleted file mode 100644 index ec54b564c..000000000 --- a/transcripts/Syntax242.srt +++ /dev/null @@ -1,388 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,820 --> 00:00:06,120 -the podcast with the tastiest web development treats out there. - -3 -00:00:06,149 --> 00:00:10,950 -strap yourself in and get ready to live ski and Wes Bos. Ooh, welcome - -4 -00:00:10,950 --> 00:00:46,020 -Wes Bos: to syntaxes to the podcast with the tastiest web development treats out there. today. We've got a awesome podcast and a potluck lined up for you. And potluck is an episode where we take in your questions. And Scott and I attempt to answer them. If you have any other questions that you'd like us to answer on a potluck, make sure you go to syntax, FM and click the button that says ask a potluck question. Those keep us going. today. We are sponsored by two awesome companies. First one is Log Rocket and second is Freshbooks. We'll talk about them partway through the episode. How are you doing today, Scott? - -5 -00:00:46,439 --> 00:01:15,560 -Scott Tolinski: I'm dealing you know, everybody. Yeah, just making it happen. Like last night I just like took a deep, deep exhale and was like holy cow. I am tight. I'm just tense, man. I'm just yeah, it's just it's non stop. But you know, it's all good. I sliced off the tip of my finger the other day. That was pretty early With what? You don't want to know. mandolin. No, a like actual shaving razor. It was just I was just moving it. And - -6 -00:01:15,620 --> 00:01:18,260 -Wes Bos: oh, my nightmare, dude. It's - -7 -00:01:18,329 --> 00:01:26,130 -Scott Tolinski: It's seriously. It's gnarly. So it's been covered and yeah, I'm not too happy about it. - -8 -00:01:26,159 --> 00:01:29,610 -Wes Bos: You're not going to the hospital for that door. Yeah. No. - -9 -00:01:30,479 --> 00:01:40,260 -Scott Tolinski: I don't want to get into any of the gruesome details but it's fine. There's a lot of people who do not want to hear what exactly happened to this. Oh, yeah. - -10 -00:01:40,260 --> 00:01:58,860 -Wes Bos: No, I get I'm like almost passing out this you're telling me that I get so queasy. I get what's called I thought this was a common thing. But I call it the melts. Where if you start talking about blood and, and veins and stuff like that, I just get like, whew, yeah, like, I can't rip anything. - -11 -00:02:00,270 --> 00:02:20,280 -Scott Tolinski: You're just you're you're actually passing out is what it is. You know, it's funny. I, I had a, like a sister removed from my arm at some point a couple years ago. And they were like, do you want to watch because it's obviously here you can watch. And they're like, obviously, you don't want to do this if you're on the passing out. And I was like, I've never I mean, I passed out once from something else. But like, - -12 -00:02:20,580 --> 00:02:23,310 -Wes Bos: I know I never heard that story on the podcast. But - -13 -00:02:23,340 --> 00:02:43,220 -Scott Tolinski: yeah, that's right. I've done I've ever passed out. I know watch this and then then I'm watching them do it. I passed out and they're like, Oh, you should have you should have not watched like why did you say you were actually mad at me for choosing to watch. I've never passed out before. It's weird thing you get like a cold sweat. And yeah, it stinks. - -14 -00:02:45,750 --> 00:03:44,220 -Wes Bos: Oh, man. All right, let's uh, let's get into the potluck questions. First one we have here is from Simon, Vollmer Iser, hey, Weston Scott, thanks for the badass podcast humor and knowledge always, as always was wondering on your take on mobile first design and implementation, dethrone desktop styles or the mobile styles into media queries, any opinions about that by switching a lot between project to do it differently. And it really makes my head melt. Keep up the good work. So this is a question that we get all the time is, is when you are building a website? Do you start with the mobile website? And then use media queries to desktop defy it? Or do you build the desktop website and then go smaller, smaller, smaller and mobile of phi it? And a couple years ago, there was a big push for the sort of mobile first. And now I don't know like like, what are your thoughts on this? Scott? Like what do you do? What is level up? tut's is a mobile first or is it desktop first? - -15 -00:03:44,400 --> 00:04:59,250 -Scott Tolinski: Yeah, this is a good question. Because I think you could really do it either way, if we're being entirely honest. And I have probably not done a good job of doing mobile first, specifically, because our users are primarily using the a level of tutorial site on their desktop computers or their iPads. So we're inherently going to favor a little bit wider of a viewport. Yeah, that said, The design was certainly coded in a way where it's going to do the most it can to scale up as in, I don't want to have to change a ton of stuff between mobile and desktop. And I'll definitely do my breakpoints as being the mobile first style breakpoints where you only use breakpoints to style things add increasingly larger displays as an, you know, the default styles are all for mobile. But so many of our styles are set up to a way that you don't even have to think about it too much, too much, too much. Yeah, it's almost like the media queries are used as patches to fix the stuff that's not working when you make it wider rather than really thinking about the two designs as being that separate. - -16 -00:04:59,490 --> 00:06:25,440 -Wes Bos: Yeah, you Yeah, totally. I'm the same way as well. I've always done desktop first and then gone smaller. I think the benefit to mobile first is that I think a lot of times people build these really complex websites, and then they find themselves trying to figure out, how do I cram this thing down into something that is acceptable on mobile web. Mobile First is like you think about the experience. First on mobile, which a lot of websites are probably majority of it is consumed on mobile. And then you can make it more complex with media queries as you go on up. Quite honestly, I've never had a problem going either way. So I don't think that it's too much of an issue. I know that when this first came out, there was a whole like, this tends to happen with like everything like this new idea comes out. And then the other thing is immediately garbage or an awful way to approach it. And I don't think that's true. I've never had real issues, especially with Flexbox and grid and thinking in terms of components, and how big that component will be like, I think component queries or element queries will make this the thing of the past as well, because like, I don't necessarily think in terms of website, I think in terms of like, player and Right, exactly, like listing of videos, or pricing grid or whatever is on the website. So if it's making your head hurt, do then just go back to the other way. I think it's totally fine. - -17 -00:06:25,710 --> 00:07:09,720 -Scott Tolinski: Yeah, it's totally fine. And honestly, I have some thoughts on why I think that it's seen as sort of a or it was seen as sort of a bad practice for a little bit to do dusty at first. I think it's because a lot of mobile sites were very neglected at that time. Yeah, right. At that time, media, media queries had just come out, people didn't really know about them that much. I mean, responsive design, just become a thing. So all of a sudden, there was a push to get people to actually make mobile looking websites a priority, rather than just an afterthought. So to me, mobile first was a shift into thinking about mobile websites has been something more important than they were before. - -18 -00:07:10,050 --> 00:07:37,830 -Wes Bos: Yeah, cuz also, like, what was popular, and unfortunately, still is, is that people would just start to hide stuff. Yes. It's the mobile website. They don't need all the features. And that's so frustrating to me to, to get a website that just hide stuff on mobile. Yes. When the reality is you should start all of the functionality and all of the content on mobile, and then, and then figure it out. So that I think there's some some good ideas behind that. And as long as you can keep those in mind, you're, you're gonna be in good shape. - -19 -00:07:38,250 --> 00:07:59,220 -Scott Tolinski: Yeah. And the only time that's really acceptable is if you have duplicate, like, for instance, we have a navigation that just straight up does not work structurally between mobile and desktop. So we have a mobile nav and a desktop nav. That's the only actually instance where we have a mobile component or desktop component. Oh, yeah. As long as it's like duplicate content, rather than - -20 -00:07:59,250 --> 00:08:13,200 -Wes Bos: I often find myself going way overboard on like clever CSS hacks and stuff go Yeah, get work on both. And then I just kind of like sit, sit in my chair and go like, what am I doing with my life? Like, just make Yeah, just make two naps and hide one or the other? - -21 -00:08:13,440 --> 00:10:08,190 -Scott Tolinski: We probably had like four or five iterations of our nav that would work our base CSS wise, because this is like, this is too much. What do we do? Next question is from Christian Anderson says, Hi, Scott in West love the show. Here's my question. What is the difference between the ES six arrow function and a normal function? When would you use a normal function instead of an arrow function? Or the other way around? Stay tasty? Christian. That, yeah, stay tasty. Yeah. So the big part of this is really how it deals with this and variables. Everything else is sort of, I guess, lesser function of this where you could use an arrow function for readability and those aspects of it. For me, I personally prefer the What do you want to call this, this, this simplification of how it handles this, there used to be this, I'm trying to find a good way to explain this without there used to be this technique where if you needed to access this, inside of a normal function, but you didn't want to access that functions, this, you don't want to parent scope, you wanted the parent scope, that's a perfect way. That's the exact word you wanted the parent scope. You had to do this whole this equals that or this equals parent or whatever beforehand in the variable and pass that in. And it was such a giant pain in the butt because each function had its own scope, where with a arrow function, it doesn't have its own scope. So this would refer to its parent scope. So that's largely the reason why I use it to me it's more predictable. I don't have to do this whole this that Dance to access the parent. And largely to me, it looks cool. No, I don't know that that's that's low on the totem pole. But I do think it looks cool. - -22 -00:10:08,220 --> 00:13:10,679 -Wes Bos: Yeah, it definitely does. So arrow functions do have their own scope, they just don't rebind the value of this, to that that function instance. So it will be inherited from the parent. And if there's no parent this, then they will go for the parent of that. And then eventually, this will just be the window, if nothing is bound to this, but if you create variables inside of an arrow function, you still will, those will still be scoped to that function. So what else do they do they allow for implicit return. So if you're doing like a map, filter, reduce is probably the use case where I use an arrow function most often, where you just need to take in an argument and then immediately return something like divided or looked up in an object or multiplied by a certain number or filtered out return true or false. Those quick little things can be done on one line with an arrow function. And that is that is huge. Implicit return is not doesn't have to be, you can still return and use curly brackets on an arrow function, as well. It's just kind of a shorter, concise syntax. The other thing about arrow functions that they must be passed in as reference or stored as a variable. So a function declaration where you actually write the word function space, say hi, that is that's called the function declaration. But because JavaScript works in a way, where you can put functions in variables, that that's why you can do something like const, say hi equals function as well, the arrow function is can only be passed in as reference, meaning passed in as an argument to like a map, filter, reduce or has to be stored in a variable. So they're technically anonymous functions. But that doesn't really matter all that much. Because if you have like a stack trace, or something went wrong, it will usually take the name of the function from the variable that it was stored in, instead. So yeah, it's it's kind of interesting. When they came out arrow functions, people were like, I'm gonna use arrow functions for everything. And like, I would get a lot of people being like, Why are using a normal function? Like, why don't you upgrade that? And like, I certainly do use both of them. I don't use this keyword a whole lot in much of my programming anymore, just because that's more object oriented, functional allows you to sort of just take in arguments and whatnot. So like, what do I use, I use both of them. For react components, I've actually switched away from arrow functions, and over just two regular functions, partly because of hooks, partly because of the implicit return was such a pain in the butt to rebug. Yeah, and so I just switched to just regular function. So that's the difference. They're both very useful. Use an arrow function if you need this to not be scoped, or you need the concise syntax. - -23 -00:13:11,039 --> 00:13:50,070 -Scott Tolinski: The reason why I use the arrow function, like all the time, and I just do I force explicit returns Well, for the most part, there's there's some use cases where I don't do implicit returns. But there are like for a react component, always explicit return every single time because you will need to refactor that. And I To be honest, arrow functions all the way I'm pretty much only do arrow functions. And it's really just for consistency in both syntax, the visual of it all, just to have things be possible. But also just so that we always know how things are functioning in that dimension. We just about never use the keyword this. So I don't I just don't have to think about it too much. - -24 -00:13:50,279 --> 00:13:53,130 -Wes Bos: That's not a big, a big issue for you. - -25 -00:13:53,130 --> 00:13:53,760 -Unknown: Yeah. - -26 -00:13:54,120 --> 00:14:26,100 -Wes Bos: Next question we have here is from Max Dayton, hey, it's gotten less, what are your opinions or experiences on developing for 360 slash VR experiences on the web? There are a few frameworks out there, like a frame and react 360. I was wondering if you had any experiences building with these things? And do you think this could become a big thing for the web development in the future? So I know I'm gonna pass this over to Scott because I've never done anything in VR. I've put a headset on once and it was pretty cool. But that's, that's where it stops with me. - -27 -00:14:26,279 --> 00:17:15,240 -Scott Tolinski: Yeah. So this is really funny. I've been it since the, the snow break thing, this snow snow day. Now their current situation. I've been playing a ton of VR, for like an hour each day, I would say maybe it's been really interesting for me, because it's like we put the kids to bed and there's like a little period before Courtney and I are like really hanging out where I'll just sort of floating around and I have been playing VR table tennis which is not something that I've ever played really, and I feel like I could be decent. Table Tennis Now, because of all the time I put into it in the physics are so good. And I absolutely love it. So I'm becoming a huge VR fan in that regard. The one thing I hate about VR is being like tethered to a computer. So my unit is the Oculus quest, which is no cables or anything. So as long as you're not tethered to a computer, I think VR has a lot of possibilities. I think as long as you are tethered to a computer, I don't think it's going to get that sort of mass adoption. So what are my thoughts on Web VR? I think it's fantastic. I think it's interesting. I think it's so cool. I've never heard of a frame, I have used react 360, briefly, nothing any major, to create anything major, it's one of those things that if I had any free time to do a goof around project, I would definitely spend it on one of these things not because I necessarily think that one of these things is going to be you know, the end LBL way to do VR probably won't, but I think it's sort of very fascinating. And the more I find myself using my own VR headset, the more I get ideas about what kind of cool interfaces you can build in it. So I think it's very interesting, I would love to do rather than like a game or anything like that, I would love to build some sort of interactive video experience where you watch a tutorial and some sort of way that makes it more interesting. Either way, I would keep an eye on both of these platforms, I would try them out, if you have the capability of trying them out. They look so stinking cool. And to be able to do VR using react components definitely is a plus for me not to mention, since my headset is made by Facebook, I would have to imagine that at some point, maybe react 360 becomes some sort of an official way of building types of apps maybe. So we'll see who knows, maybe you can take those skills and, and really flourish on a medium that is still very young, right, we have to consider that this VR medium is very, very young. And there's just an endless amount of opportunity to have a killer app in some sort of variety, where you can get in on the ground floor now, before these experiences blow up, and everybody's got a headset on. And we're all floating around on moveable chairs like Wally. - -28 -00:17:16,679 --> 00:17:50,490 -Wes Bos: Yeah, I am more interested in the AR, which is augmented reality. And I imagine you could probably do something similar with these frameworks as well, where you're overlaying useful information on top of whatever it is that your cameras seeing. So maybe that would be a fun project to do as well. Maybe just do like a simple little, like detection. Grab people's faces. Yeah, maybe pop up. information. I always take the Instagram. Have you seen those like the couple's questions on Instagram lately? - -29 -00:17:50,759 --> 00:17:55,440 -Scott Tolinski: I I've seen a bunch of like the quizzes and challenges. Yeah, I haven't seen the couple's questions. - -30 -00:17:55,680 --> 00:18:06,390 -Wes Bos: Oh, it's like, it's kind of like, when you get married, you played the shoe game or like, yeah, Who's most likely to cook dinner and you put the shoot? It's like that. But it's that you you tilt your head left or right, which is pretty - -31 -00:18:07,850 --> 00:18:09,780 -Scott Tolinski: fun. We should? Yeah, yeah. - -32 -00:18:10,050 --> 00:18:43,740 -Wes Bos: That would be a fun little thing to recreate. Yeah. I think like, I'm trying to think like, how would you do that? Well, like you would like track people's faces, which you can do? Yeah, you do object tracking? Yeah, you can do that in Chrome already. Yeah. And then you just like you track where their heads were and then over like, like, I don't know, one second. And if both heads move to the left, or to the right, or whatever, then you could, you could say, okay, they were here, and now they move there. It really doesn't seem that difficult when you think about it's just tracking - -33 -00:18:43,820 --> 00:18:45,480 -Scott Tolinski: a value a box. - -34 -00:18:45,660 --> 00:19:00,540 -Wes Bos: Yeah. If the value goes left or right, somebody make this with the I've got the face detection code on my beginner JavaScript repos on GitHub, you can grab that as a starter, and then take it and run with it. - -35 -00:19:01,050 --> 00:21:35,010 -Scott Tolinski: Yeah, do it. Alright, next question is turbo go Ran? How would you define a senior developer? What's the difference between an intermediate and a senior developer, as somebody who has had the senior developer role in their title before I can tell you it's largely just a job title. Now, in every single organization, these are going to this is going to mean something different, which is one of the reasons why I think it's kind of a vanity thing. Sometimes when you are applying for a job, the senior developer position all it means to the employer is that you've been in a role where you're doing a bit more management and you've had a little bit more on your shoulders a little bit more pressure, a little bit more ownership. I mean, personally, when I became a senior developer, I had a lot of different roles that I didn't have before I was supposed to go to more meetings, more management meetings, more meetings where I had to be the spokesman for all of the developers right? The advocate for the developers. This is a small company, right? It depends on the size of the company, I was in charge of coming up with the workflows that we would maintain as a team, the Git workflows, those types of things. I was in charge of directly managing the developers, their timelines, their projects. And I was also in charge of picking our stack choices, and even giving maybe some other developers more freedom to choose their own stacks based on what their comfort was. But again, this is largely something that's going to be different in every single organization. And simply having the job title of senior developer is largely just going to mean that you've been in a position of sort of management or heavier load and responsibility as a developer. And if you want to make sure your website's capable of handling some sort of heavy load, you'll want to make sure that you have some sort of error and Exception Handling service, one of which, where you can see how the errors are happening. Now, the sponsor, of course, is Log Rocket. Now Log Rocket is the error handling tool that allows you to see how your bugs happen. You get a session replay video, that is so cool, you could scrub it, you could see the network requests, the error logs, the Redux store, anything you got in there, and it works with all of your frameworks that you know and love. You can even see where the user clicked to turn your website into a frog. How did they do that? I don't know. But you can find out with Log Rocket. So if you want to check it out, head on over to Log rocket.com forward slash syntax, and you will get 14 days for free. Check it out. - -36 -00:21:35,970 --> 00:23:09,720 -Wes Bos: Beautiful. Next question is from Jason. Hey, I was curious about knowing your opinions regarding JSON colon API, and its consumption in react. Is it still a good pick going with JSON colon API, or paired to graph qL? Or just a normal rest JSON API? So I was like reading this, like, What? What is JSON colon API API? I thought like, that's just the regular REST API. And I looked it up and I said, Oh, okay, so this is a specification for building API's in JSON. So one of the downsides to just getting an object JSON string of finding it and sending that sucker down the line is that there is no standard for how you should interact with it for how to structure your data, how to do pagination, all that stuff. There's no specification for it. So everybody sort of just invented their own way of doing JSON API's. And every time that you needed to work with an API, he basically had to kind of sit down and and figure out how that thing worked. And that's still somewhat true with graph QL. Because you still have to know what the functions are called and what they are. But we we do have a standards in graph qL for pagination, and edges and ownership and things like that. So it looks like this JSON API is just like a spec for for building API's. And it's been around for since 2013 been last updated. - -37 -00:23:09,870 --> 00:23:12,120 -Scott Tolinski: I've never heard of this. And I don't know why I've never - -38 -00:23:12,180 --> 00:23:49,590 -Wes Bos: heard of this. No, maybe there. But yeah. So honestly, all of the Jade JSON API's I've built in the past, I've never had a whole lot of problems with it that I needed a rigid spec for this. But I could definitely see someone who was building a much larger API could look for something like this. That said, if you are building an API from scratch right now, I probably wouldn't go for this just because I think graph qL is probably a better choice. If you are going to build such a rigid API, and not just a standard, like JSON string of Fiat, give it an endpoint and call it a day. - -39 -00:23:50,010 --> 00:24:52,080 -Scott Tolinski: Yeah, I do think that having some sort of a structure or some sort of a spec is a is a good idea for any sort of major organization, it it's funny that the API's that we largely write are consumed by only a few people. And I think that's a big difference between needing something with some sort of a rigid spec and being able to come up with a little bit more creative spec of your own or something. To me, personally, I am using graph QL. So I haven't really thought too much about it. There is sort of like this counter push back to graph qL going on right now. And I don't know if you've seen it, where people will be like, you probably don't need graph qL it's probably just as good to do this and this and this. It's like okay, cool, but I like graph qL still, like that doesn't mean I don't like it because I do like what it what it gives me Have you seen this whole the GQ LS thing? It is called GQ, LESS Gq, l e s s dot dev is the site - -40 -00:24:52,229 --> 00:24:57,930 -Wes Bos: a graph qL client without queries, it's so cool. It's pretty cool. What does it do? So basically, - -41 -00:24:57,930 --> 00:26:14,280 -Scott Tolinski: here's the gist. So for those of you who don't know, with graph qL will only write an object, like a pseudo JavaScript object and graph qL, your API gives you back everything you asked for, right? Well, what this library does is it takes it one step further, and it says, Hey, we know that your component is using graph QL. And so you can just start using properties within your, your react component, or whatever, you just start using properties. And what this library is able to do is sort of pull out the object structure from what you're requesting and build a query for you. So you don't have to write so much at all, it makes so much sense. And then therefore, you're never gonna have to worry about stuff. There's like this often this disconnect, where maybe you forgot to query something, and you just thought it was available to you. So you used it, and then it wasn't there. And then that can cause a bug. So this is a really interesting new library. And by new, I mean, I think this thing is brand new. And I haven't had a chance to use it. But I've seen people talk about it. And it's been up for a little bit here. And it already has 2.3 thousand stars and a bunch of forks. And it looks like it's well under way to becoming really super cool. - -42 -00:26:14,760 --> 00:26:38,340 -Wes Bos: Yeah, because like, also, if your graph qL or not, if your graph qL API is tight, right. So you can just start coding and it will know all the all of the properties and whatever and you get really nice autocomplete in your template. So you just you just like use the data in your templates, and it will figure out how to query that for you, which is pretty nifty. That makes so much sense. - -43 -00:26:38,610 --> 00:26:54,300 -Scott Tolinski: Yeah, I'm, I'm interested, I definitely am interested. And it makes a ton of sense. I'm very excited for trying this out at some point. I wish I had like a little tiny Roderick to try this out on this would be a pain to try out and level up. But definitely looks cool. Something to keep your eyes on. - -44 -00:26:54,720 --> 00:27:28,230 -Wes Bos: One more thing about this JSON API is they have I'm just on their website here. They've a recommendations page about how to how to camelcase things. Your API should start with a character. Here's the URL structure you should use. Here's a URL structure for a single piece of item. Here's how you get comments that are relationship to something. I like that a lot. That's very much like when I learned idiomatic JavaScript where like, just give me a page of things I shouldn't shouldn't do. And I'll follow that. Nice. Yeah, - -45 -00:27:28,230 --> 00:29:06,270 -Scott Tolinski: I like that. All right. Next question is from actually Jason, not JSON. But Jason. And Jason asked two questions here. I thought they were very related. So I decided to answer both of them here. What's your take on Blitz j. s? would you use a framework like this to build large and scalable web apps? And then also, what's your take on Redwood j. s? would you use a framework like this build large is the same question with a couple of words replace. So for those who you don't know or feel fatigued by all this stuff, you're probably rolling your eyes that there's another new node.js thing. We have Blitz, j s, and we have Redwood, j, s. Now, both of these are layers on top of the things that we're using currently, like react, graph, qL, whatever. They're sitting on top, and they do specific jobs. Now I have an eye on both of these projects, because I think they're both interesting. They're both fascinating. And they both fall in to this category of things that we've continued to predict on this show that are going to become more of the future of this platform that we're working on. So it's funny that we we've predicted multiple times that these things are going to come out and here they are. Here's a couple of them. Yeah, we know, we know, right? Yeah, exactly. So the first one Blitz is more like a Rails competitor, right? Well, not a Rails competitor, but a Rails analogous. The whole thing about Blitz is that it's a monolithic platform is in your writing your entire code base in one code base. But it uses serverless functions. So when you deploy, it's all serverless. But I don't think you have to worry about that aspect of it too much. - -46 -00:29:06,480 --> 00:29:10,590 -Wes Bos: Isn't this the the same framework we talked about a couple episodes ago? - -47 -00:29:10,680 --> 00:29:13,800 -Scott Tolinski: It is but things have been moving along here. - -48 -00:29:13,800 --> 00:29:15,930 -Wes Bos: I think it's clearer what it is now, - -49 -00:29:15,990 --> 00:30:25,350 -Scott Tolinski: definitely more clear. So Blitz, in short as trying to be the rails for j s. Now Redwood is also taking this, but it's taking more control over the data side of things. And it uses react graph, qL and Prisma for the data. So with this one, you're not having to think about a database or your schema, and it's trying to encompass all those aspects, and then just giving you react, so I have my eye on both of these. I think they're both cool options. I think my Meteor stack does a lot of this stuff really well, in the same regard. Like I have server side rendering, code splitting, graph qL all those same stuff, right. So I think that I'm gonna throw my modern media into the mix is a nice option here too, but maybe a little bit less handhold. The, I don't know, we'll we'll see about these things. They're brand new. And largely, they're saying, Would you build anything in this right now, I'm not going to build anything major in either of these right now, because they're, I don't even think either of these are done yet. So just keep your eye on them and see, maybe that could be a cool opportunity to learn something new here. - -50 -00:30:25,500 --> 00:31:45,330 -Wes Bos: Yeah, I would definitely use this for a weekend project, but nothing too serious just yet. And I would definitely keep my eye on them. Because these are two things that have the potential to become really popular. And if you can be on the sort of front of that blog posts or YouTube videos or whatever, then that's a huge because like, I certainly do think something big is coming in the next. Hopefully this year, right. And one of these two might be it word. Next question we have from Andre McNamara does that right? Yes. I just butchered it like three times for what do you think of Dino j? s reaching version? 1.0? Is it really going to be a node successor? Or is that just marketing hype? So Dino, we've talked about it a bunch of episodes before, but basically what it is, is it's a runtime in JavaScript and TypeScript that's built on the same engine, that node is built on, which is called v eight. V eight is also the it's, it's the engine in Chrome. And that's, that's the reason why we're able to have no jazz in the first place is because you can take an engine and and run it in different places. So the idea behind Dino is that you can run the whole thing in TypeScript. What are some of the other benefits of it? We talked about so many times it just - -51 -00:31:45,930 --> 00:31:55,860 -Scott Tolinski: there's a lot of things where you like where you declare your import as being from a repost specifically, rather than via package dot JSON file? - -52 -00:31:56,340 --> 00:33:36,930 -Wes Bos: Oh, yeah. Yeah. So that seems pretty, pretty interesting as well. Is it going to replace node certainly not anytime soon. But from the folks behind it, as well as the fact that they it's like a first class TypeScript support. I definitely think it will be a huge thing in the next couple of years, especially if we can get I'm not sure like, what does it look like for using an existing node module in Dino, because like, there definitely have to be some sort of transition there. Because it takes years to build up all the resources that we have in Node land. But I'm pretty excited about it. I still haven't built anything serious in it. Just a couple little Hello worlds here and there. But like, begin, we've talked about them before they support Dino right out of the box, which is cool. So there's already like a good hosting. Like that was that was like a hurtful thing, when node first came around was like, how do I even run this thing on the server? But that whole story looks a lot nicer right now. So definitely not marketing hype. I would say, Dino has anything but marketing. They're not like there's not a company behind them. There's not a whole bunch of like, VC or anything, I don't think there is at least, it just seems to be a bunch of really smart people trying to solve something. I mean, I think like a couple episodes ago, or maybe a couple of months ago, we said it was built in TypeScript. Or we mentioned that and it got put back a couple people got mad. It's not built in TypeScript, in rust. But you you build your apps in TypeScript, you don't build the apps in rust. So what the thing is built in under the hood, we as developers don't necessarily care all that much. Right. - -53 -00:33:36,960 --> 00:37:52,400 -Scott Tolinski: Yeah. You know, so it's funny that I, I don't know, I'm interested in Dino, but at the same regard, I think I'm interested in it the same way I was in TypeScript about like two years ago, right? Like, yeah, I am keeping an eye on it. I'm thinking about it. It's in my brain space, but I'm not going to like really dive in or really do anything unless it like really picks up for me. Like there was some point when TypeScript became the obvious champion, right? Reason, naff was the other one flow. Yeah, I don't think people like flow very much. And so TypeScript, like very clearly became the dominant of the type systems for JavaScript at that point, I was like, Alright, I have to invest the time because this is becoming an industry standard to know this stuff. So until that happens, I probably will just keep a cursory glance at Dino just to have it in my brain space. Next question is from Dan, the man. Hey, guys love the show. My question is if you are looking to refactor code, you have a process that you'd like to follow. I've been polishing up a project from a boot camp I attended, and I'm putting on the finishing touches, and I'm getting frustrated, how inefficient, hard to read, and junk some of my code is, I want to go and restructure a lot of things eventually, but I'm wondering the best practices I should be aware of, or just maybe a way to tame this beast. All right, so I have a couple of strategies for refactoring. And it really depends on what the thing is, I'm refactoring I have, number one, always make a branch. Start number one, make sure you commit all of your code currently, and make a branch. Because if you start tweaking stuff, and all of a sudden it breaks and they are in your main branch and you have some code changes you didn't commit beforehand, you're gonna be frustrated that you are now having this project that's not working. Also, you want something that you can just go back to if you goof it up. So I have a couple of strategies, it depends on if I'm, if I'm refactoring a beast of a file, I'm going to branch I'm going to duplicate that beast of a file, and then I'm just going to go hard deleting stuff completely rewriting it right. And then just largely, that one is going to be probably a deep investment before you see anything working. Again, the other way to take this would be to change in small parts surgically. And this one works best if you have tests, if you have good tests that say, this is how this thing works. And you don't want to have to rewrite your test, you just want to say, Okay, this thing should function the exact same way it did before. If you're using react testing library with data IDs, that shouldn't be too much of a problem. If you have that sort of setup, going, then just surgically change out those things, rewrite them, move them, whatever, being careful not to break your tests. The last way I have is to migrate the things that are easy to migrate before rewriting a bunch of code, let's say your refactor is you're taking this thing from a class component, and you're moving it to a function based component. Now I know the React team says don't do this, but I have components that would be so much more elegant in a hook space setup. And I have hooks to help me. So maybe I think, Okay, well, this would be better with my own custom hooks, they'd be better with my setup, they'd be better as a function component. Let's go ahead and rewrite this thing. If I'm using component did mount component will mount though, if I'm using those lifecycle hooks, what I'm going to do is I'm going to use actual react hooks that mimic that functionality. First and foremost. Why? Well, because it's important to get this thing up and running as a function component. If you're doing that sort of transition, it's important to get it up and running. And then think about how you can restructure it. Because if you are refactoring your component, maybe you swap out all right, I did the class for a function component. Now I can take a look at these maybe non optimal hooks, like a non mount hook or something that you have, I can take a look at that. And then think about how this could be written with the use effect properly. Rather than doing it all at once. Do it one step at a time. So there's some different approaches. But the main thing is have tests branch and commit often and don't be afraid to really go radical with some things. - -54 -00:37:53,070 --> 00:39:00,480 -Wes Bos: Yeah, my tip for like, if you have like an ugly piece of code that just does too much is take a look at it. Obviously, if you have tests, great, maybe that's not always the case. But just go and take that huge stick that thing that bugs you the most and make sure it's working. And then just go through piece by piece and say like, what can I make into a smaller function? How can I chop this out into two other pieces? Can I put them in their own file or something like that, and just by sort of like going file by file, trying to clean it up and type, tidy it up often, then you'll start to see, ah, I'm doing the same thing over a few times. Like I just wrote for the footer of my own website, I wrote this thing that would fetch my latest Instagrams. And then I wrote another thing that fetch my Instagram stories, and then I wrote another one that would fetch my Twitter feed. And I was like, Man, this is mostly the same, mostly just going to an API, fetching data and returning it back. And that's the point where I'm sitting now and I say, Okay, I could probably refactor this out into a smaller reusable hook or whatever it is that I'm using. - -55 -00:39:00,980 --> 00:39:15,480 -Scott Tolinski: You know what, you're not going to like this. And that. Yeah. But the thing that gives me the most amount of confidence when refactoring my components right now, yeah, is TypeScript. And the reason I say - -56 -00:39:15,480 --> 00:39:16,800 -Wes Bos: what I not like that - -57 -00:39:16,830 --> 00:39:21,150 -Scott Tolinski: because TypeScript people are lying, TypeScript, TypeScript, TypeScript all the time. - -58 -00:39:21,300 --> 00:39:37,560 -Wes Bos: Oh, okay. I need to let's, let's make this clear. I'm not anti types right? Now, but people on Twitter keep saying like, Why do you hate TypeScript? I use TypeScript. I just don't have a huge project in it right now. So like, don't pay me as the anti TypeScript guy. - -59 -00:39:37,670 --> 00:40:11,040 -Scott Tolinski: I'm not trying to opinions but okay. The reason I say that is only because it's like TypeScript. People often say that, like TypeScript is the solution, just like every single problem. Oh, yeah. And that can get really annoying really quickly. So not to say that you specifically don't like TypeScript. But just to not I don't want to be that guy. Because now that I've like two months ago, when I didn't have my entire episode. Written in TypeScript, I was in your same boat, I've used it on projects, I was just, you know, whatever it exists, and it's cool. And now I'm like, slowly turning into one of those annoying TypeScript, - -60 -00:40:11,900 --> 00:40:29,670 -Wes Bos: boons of it the refactoring even like renaming a function across multiple files, that that refactor is such a snap in TypeScript versus the VS code does okay job at it, but like so much easier in TypeScript. If you have all of that stuff properly set up. - -61 -00:40:29,820 --> 00:40:56,520 -Scott Tolinski: I like it just for my components, complaining now. It's like, Oh, I don't have the props that I should have, or I am being passed something that I shouldn't have. And it's like me really made all my stuff more organized. Okay, off the soapbox. And while I get off my soapbox, maybe I'm going to sell this soapbox bozo on Etsy right now this person silent gun, and then if I do that, I'm I need to drag on Freshbooks. Right? That's pretty good. - -62 -00:40:56,960 --> 00:40:59,630 -Wes Bos: Yes, that was okay. It was - -63 -00:41:00,030 --> 00:41:00,540 -Scott Tolinski: Yes. - -64 -00:41:01,170 --> 00:41:33,780 -Wes Bos: Freshbooks is the small business accounting software that makes your billing painless. So if you are running an Etsy shop selling soap, or if you are a web developer, trying to keep track of your expenses, and money coming in, see who's paid you whatnot, sign up for fresh books and get all that cloud accounting in one spot. Go to freshbooks.com forward slash syntax and use syntax in the How did you hear about a section that is going to give you a 30 day unrestricted free trial? Thanks so much to Freshbooks for sponsoring. Awesome. - -65 -00:41:34,130 --> 00:44:00,180 -Scott Tolinski: So next question from creso. Which technology stack would you choose for 2020 e commerce and why? Okay, ecommerce 2020. A Yeah, yeah. So okay, it really depends on who your client is, right? If your client is somebody who's non technical, Shopify all the way best experience, most templates, biggest community, there's 1000 Shopify developers. So if they need work done, they'll be able to find somebody really quickly. So I think Shopify is sort of the winner for the easiest overall, if you're just building in their platform, if you want to get something a little bit more, I don't know developer a little bit more hipster, you can use Shopify as a back end for a Gatsby site or even a next JSA. And the Shopify API, it takes some getting used to but all in all, is pretty dang good. And they have some iframe cart stuff. So you don't have to like build your own shopping cart, you can just drop in there iframe cart. And then you can have your whole Gatsby site the way it is. So it's pretty cool. But it doesn't really give you a ton of ton of options in terms of like, giving the client those pages that they might be used to to see their orders and things, you're going to have to dive in a little bit more. If you want to go for a really cool little option here. There's a platform called snip cart. It's funny because they sponsored us a little while ago. So I don't this is they sponsored us a long time ago. This is not a paid promotion in any sort of way. But snip cart is sort of what I was talking about, like when you have the framing in with the Shopify and Gatsby thing. What it does is it basically is a ecommerce platform built for jamstack specifically, and its intention is to be a seamless experience on top of your site. And I believe it's all iframed in I'm not entirely positive. It looks really, really nice. I have not used on any projects. But it looks really super interesting. And I'm keeping an eye on as something that I would use if I was going to be building an e commerce site but Shopify snip cart, I would probably stay away from Magento, but only because of my own personal experiences in Magento. One, which Yeah, it's so funny. I one of them. I have like 70 tutorials on Magento one on YouTube. And people are always like, why don't you do Magento tutorials still, it's just like, haha, and I really didn't like it before it. I don't like it. Now I just did it because I was working on Magento every single day. So I knew it pretty well at the time. - -66 -00:44:00,450 --> 00:44:02,340 -Wes Bos: Adobe bought Magento - -67 -00:44:02,370 --> 00:44:48,780 -Scott Tolinski: Yeah, a few years. Oh, yeah. Right after Magento two came out. And Magento two was sort of this, in my mind botched a launch. I have no idea what the status of Magento two is right now. But it seemed like when they first launched Magento two it was I don't know. So like my, my experience in Magento is I have this like really weird relationship with Magento where it was the very first platform I ever built a site with a database, a MySQL database and a like PHP. So like most people cut their teeth on WordPress in that regard. But like Magento was it for me, like my first experience with PHP and databases was Magento. So I have this like very tight fondness for it and at the same regard I absolutely despise it. So it's, it's a tough balance. - -68 -00:44:48,810 --> 00:45:14,130 -Wes Bos: That's a funny thing that happens is that i think i think this is partly why WordPress gets a bad rap as well. It's because it is the first thing that people did, and they wrote some awful code. All things and weren't totally sure what was going on. And that's not to say that WordPress doesn't have its own faults. But it's funny when you look back at your The first thing that you ever did most people don't look back at it fondly. - -69 -00:45:14,160 --> 00:45:28,800 -Scott Tolinski: Yeah. And so if you're a Magento developer, and I'm totally wrong about this, don't be Don't be too mad. I haven't really looked at this in too long. It could be just fine. I see that they have a graph qL API and whatever. But I've just never been, I've never been a big fan. So - -70 -00:45:29,070 --> 00:46:30,780 -Wes Bos: yeah, I just made you know, those triangles. Were you allowed to pick two? Yeah, yes. Yeah. So I think online, e commerce has a triangle where you have easy control and cheap, you got to pick two, you got to pick two. So yeah, you know, it can be easy and cheap. But you don't get full control over over everything you want. It can be easy, and you can have control. And I think that's that's what Shopify is. It's easy. And you can have a lot of control. But you're going to pay through the nose, on add ons and things like that. And then if you want control and cheap, that's a building it yourself. And that's not going to be easy. You can certainly do it. Like I run my own. And I just have digital products with no shipping and no inventory. And it's hard enough e commerce and I can't even imagine doing like a real what a real store that has products and shipping and order tracking and different skews, different sizes, things like that, it certainly would have to go off the shelf or something like that. - -71 -00:46:30,810 --> 00:46:31,860 -Unknown: Yeah, totally. - -72 -00:46:32,370 --> 00:48:34,800 -Wes Bos: Uh, next question we have here is from Luke, I'm confused about developing a website for a client. I feel like most if not all clients want to take administrative control at the end of the product, and be able to handle things themselves. Does this mean i the only option for client projects is WordPress. I got really excited about making client site and Gatsby. But they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here? Well, where's our sanity sponsorship today? Right, the thing that you're missing is, is that WordPress is a CMS. And the thing that people like about WordPress is the fact that it has a really nice back end that clients like. And they've got lots of control, lots of plugins and things like that. And then the other end of it is is where the data comes out. And then that's where you, the developer, go in and go in and start to pull the content and display it on a website. So the thing you're missing here is that Gatsby is more just the theme or it is just the theme. It's it's how you the developer, pull in the data and templated out where the data lives and how that data is controlled, is up to your CMS. So whether that's WordPress, and you can use the the headless part of WordPress for that with Gatsby if you'd like or whether that's Sanity, or any one of these other headless CMS is that you can go and listen to the entire headless CMS podcast that we did. And we listed out about 10 of the different ones out there. So that I think that's the part that you're missing. Being able to control what the site looks like, like generally Sorry, I should let me back that up. Generally, you're not coding content directly into a Gatsby page, unless you are actually a developer like I am. And I say that because my Gatsby website has paragraph tags coded right into the pages, where in most cases, you're going to stick that in some sort of CMS. - -73 -00:48:35,399 --> 00:49:18,030 -Scott Tolinski: I like how you said that get like the Gatsby said it's just the thing. Yeah, I think too often we forget that it is basically just like a theme template. And why would you use that over a WordPress theme template? Well, you get easy react, you get that prefetching, you get that image transition, you get some really insane speeds overall, I mean, just Gatsby sites are fantastic experiences. So that's why you would use it. But at the end of the day, like he said, it is just the theme, you need a back end, you typically are going to be connecting data to it in some sort of way. Unless, of course you are developer editing those templates yourself. So if a client needs to use it, yeah, you need to have some sort of a back in there. And don't make that backup back in GitHub. Your clients don't want GitHub, - -74 -00:49:18,510 --> 00:49:42,750 -Wes Bos: I have to continually tell people that. I know. People are like, Oh, why did why are you using GitHub? Why are you using MDX and whatever? Like, that's not real. And I was like, I know it's not like don't ever give your client a markdown file and GitHub. Yeah, they don't want to be it is because I'm a developer, and I want to be able to put my stuff on GitHub, but for most people, No, you shouldn't do that. - -75 -00:49:43,470 --> 00:51:45,450 -Scott Tolinski: Right. I know in Yeah. It's not about babying your clients or whatever it's about providing them with a good experience and being a good developer. Alright, next question is for Dan the context now. I'm assuming this is the same Dan the man as the other Dan the man but Dan asked some good questions here. How do Why use prop types and type check a component when getting the props from context instead of passing them down? So how do I use prop types to check? The big thing here is that your provider is still a component, right? In fact, I always make a provider component where it's like a function that has the whatever context provider in there, I would have my prop types in his those aren't coming in as props, though. You know what, this is an interesting question. And one that I haven't had to think about beyond the fact that if you use TypeScript, it actually is much better. Because when you have props coming into component, you have to type them in every single time and it gets totally redone with all of the types you have to write where with context, you can write your TypeScript types within that context. And it's going to just pass those into the component as their type, rather than having you to redefine the type as what it's like coming in on every single time. So I guess the problem with this question is, as I initially read it as how do you type check, and I'm thinking TypeScript makes it super easy. And now that I'm thinking about it, how do you use prop types in this way? I'm not quite sure. And I think that is maybe part of the problem with prop types, overall prop types to me, never felt as secure of a solution as TypeScript types. And I did use prop types extensively. So I don't know if I have a great answer for this. If you do have a good answer, what's the best way to type context with prop types? Here? Let me know. We'll retweet you on the show notes, I think is an interesting question. One that is solved by TypeScript. Awesome. Yeah, - -76 -00:51:45,450 --> 00:52:06,870 -Wes Bos: I don't totally understand this question. So I will pass on it. Next question we have here is from David, should I use the MongoDB or mongoose node module in my project? What are the differences? I don't know. I've only ever used mongoose myself. That's the way I learned it. That's the way I like it. I'll tell you. What is it Scott. - -77 -00:52:07,230 --> 00:52:58,260 -Scott Tolinski: The difference is, is that Mongo doesn't include any of the validation or schema stuff. So you use, you would have to bring in a third party package, like we used to use on level up tutorials, we used to use Mongo. And we did it with a schema package called Simple schema, which was great for a long time. But we eventually moved to mongoose because it offered more features essentially. So which should you use, whichever you like, if you want something that includes validation, then use mongoose. If you want to write your own validations and you want to write your own stuff there, you want a little bit more flexibility and a little bit more freedom, then choose Mongo mongoose is a very widely used package and highly supported. So I don't think it's going to be at risk of going away anytime soon. No, thanks. So I personally use mongoose. Now, yeah, - -78 -00:52:58,350 --> 00:53:38,790 -Wes Bos: I saw a Reddit thread unpopular web dev opinions. And the most popular one was MongoDB. And mongoose is not used in the real world. And it's just a tutorial language. And everybody's like, Yeah, thank you. And I was like, Oh, what? A No, no, yeah, the successful business over here, on mongoose and MongoDB. And I think that it gets a bit of a, I think the same thing happens with Firebase, because it's so easy to get up and running. It's pretty popular to be used in tutorials, and then people think of it as a toy, and not a real world thing. But certainly there are like MongoDB is a publicly traded company, are they not? - -79 -00:53:39,030 --> 00:53:42,090 -Scott Tolinski: They are a very profitable company. - -80 -00:53:42,390 --> 00:54:12,540 -Wes Bos: They have m MDB. So they're a publicly traded company. In my mind MongoDB the company is very much like red hat or IBM, or Oracle or like a big company like that, because they are a company that has open source software, but also, like is a publicly traded company making money off of that. So generally, publicly traded companies don't just they're not made from tutorial companies, except Pluralsight. Is 12 of the traded though. - -81 -00:54:13,380 --> 00:54:14,790 -Unknown: Yeah, right. Oh, - -82 -00:54:14,940 --> 00:54:28,650 -Wes Bos: but yeah, so it that wasn't really the question, but I don't think it's just a toy toy. There. It certainly does have downsides compared to other languages or other databases, but it is a good database. - -83 -00:54:28,650 --> 00:54:29,730 -Unknown: It's a good damn - -84 -00:54:30,060 --> 00:54:36,270 -Wes Bos: database. It's a good pop is. What's that mean? Yeah, they're good. They're good. Dogs Can't - -85 -00:54:36,690 --> 00:54:39,660 -Scott Tolinski: I don't know that. But it sounds cool. Good. I like dogs. - -86 -00:54:40,110 --> 00:54:45,210 -Wes Bos: They're good dogs. Brent. It's a good database. You don't know that meme? It's - -87 -00:54:45,210 --> 00:54:53,640 -Scott Tolinski: good database. A good I don't know that mean, I would consider I would I'm pretty beamed up to I mean, I know the means I'm with the names. Alright, let's - -88 -00:54:53,640 --> 00:55:30,600 -Wes Bos: do a little meme explainer right here. So yeah, so there's this Twitter account. called dog underscore rates. And he always rates them like 11 out of 10. Great dog, like everything is amazing. And there's no bad dogs. And some guy named Brant says your rating system sucks. You just changed your name to cute dogs. He replies, you give every dog elevens and twelves. It doesn't make any sense. So he replies at branch, the good dogs, Brent. Databases. - -89 -00:55:31,050 --> 00:57:23,100 -Scott Tolinski: This is good database. That's all good. That makes sense. Yeah, no, I mean, all this stuff is whatever you're proficient in, you know, can be effective. And certainly you can scale to have a very profitable business with MongoDB. So next question here is from Adrian, this is the last question here, we have a hefty hefty potluck for you here today. So last question from Adrian, he says, Is it bad practice if I mix up react bootstrap and material UI in one react projects? Yes, it's a bad practice. And let me tell you why it's a bad practice, besides the fact that both of those libraries have very specific, you know, UI ways of doing things that are very specific to their design system. So if you mix one with the other, what you're going to get is a Frankenstein looking thing, you're going to have, you know, an arm sticking out of your website and the leg sticking out over here, you're gonna have some bolts in the neck of it, and it's going to probably stand up and move around fine, but it's going to be Frankenstein together. You don't want to do that. Number two, part two, here's the here's the big, big meat of this. Here's the big meat. The big meat is one big old kielbasa. It is too, too large, in size, right? You're adding so much additional bloat via CSS, JavaScript to whatever, especially if these are react bootstrap react material UI, you are adding major k B's major KB toys to your site here. And we don't want to do that wherever you can. In fact, this is one of the reasons why I don't use frameworks at all, because honestly, they usually add a little bit of extra bulk to your project that it might not need. So if you were using one of them, stick with one of them, you can do every single thing you could possibly need to do in one of them by using it or extending it. There is absolutely no reason to use both of them. - -90 -00:57:23,430 --> 00:57:38,130 -Wes Bos: All right, I have nothing to add to it. Scott nailed that there. Let's move on. To some sick pics. I am going to sick pick a new Netflix series that everybody has been watching called Tiger King. Have you have you seen this yet? Scott? - -91 -00:57:38,460 --> 00:58:26,340 -Scott Tolinski: Yeah, it's funny. I listened to a podcast that covered Joe exotic before wonder he did a podcast before this whole thing went down before any of this stuff happened. They were like covering him as being like, Alright, this crazy guy did something crazy again. And so I had him I knew about him. And then I listened to the wondery podcast. So by the time that the tiger King came out, I knew the whole story. I already didn't know any of it. And we watched, I think the first like all of the episodes, but one and Courtney was like, I can't watch this anymore. And I can allow the animal abuse. So we have not finished it. But we watched it and I mean, I thought it was I knew the story. So like the story wasn't riveting. Oh, yeah, production was certainly great. And seeing some things like Carol Baskins husband wearing the tiger collar at their wedding thing like that was pretty shocking. - -92 -00:58:27,510 --> 00:59:14,400 -Wes Bos: Unfortunately, now, shotgun biting and the entire thing up, what I'm gonna say is, I think the backchannels is just as interesting as the actual thing itself. Like this podcast you talked about, I'm gonna go listen to that. David Spade has a YouTube channel where he interviews every single person he's like the Oprah of Tiger King ease, and I didn't know that's super interesting to hear. Like people's like they're able to finally like talk after it's all come out and they're able to give their own thoughts as to what happened and very interesting. So check it out Tiger King as well as backchannels I'm sure there will be a lot more I'm sure there will be an entire podcast that just dedicated to this Netflix series. - -93 -00:59:14,790 --> 01:01:02,370 -Scott Tolinski: Yeah, well the Wonder one does a good job because it's I think it's a little bit longer and it's wondery they're willing to dirty john and all those so they they're like very tuned at this style of podcasts. They're like, you know, it's funny because like podcasts are this this whole medium and there's this like type of podcast that is seen as maybe almost like the HBO of podcasts right? Where it's like always going to be high quality stuff. Yeah, no one they put it out but it might not be for you. And it's so funny that I've like gone back and listened to some of these like must listen to podcasts like up and vanished and some of these other ones that are like essential podcasts in the genre. And I like walk away always been like, yeah, that was really good. Like they did a good job on that. And you know, I put off a lot of stuff like that. So Wonder one check it out. It's really good. My sick pick is going to be murder. Murder party two on the jackbox six jackbox party pack. This is one of those things that you can now buy online and play over zoom we've been doing that I mentioned in the last show because we own it on switch. So I used my cam link to hook up the switch and stream my switch over zoom. Which is pretty sweet. I never now I feel like I could be a game streamer. Here's me playing Animal Crossing as I'm currently speaking. Yeah, I'm doing I'm doing that right now. I'm building a large fenced in private beach. And none of my residents can use the beach but me. So no, I'm gonna start I'm going to start doing them either. Right? Okay, getting off topic here. jackbox party pack. You can play it online. Now. If you buy it over steam. It's really super cool. It's a game you play with your phones. I specifically am recommending the murder party to it is just a quiz game a bunch of fun questions. My whole family has been drinking gratuitously and playing it online. That's - -94 -01:01:03,510 --> 01:01:21,420 -Wes Bos: awesome. Shameless plugs, I'm gonna shamelessly plug my beginner JavaScript course at beginner JavaScript comm if you want to brush up or slam dunk the fundamentals, or you're brand new to JavaScript, this is of course to take Use coupon code syntax for 10 bucks off, beginner JavaScript calm, - -95 -01:01:21,840 --> 01:02:22,500 -Scott Tolinski: cool, I am going to plug my latest course, which is called custom react hooks. And custom react hooks is a really cool course because what we do is we talk a little bit about the process of writing your own custom hooks throughout the course we're constantly writing custom hooks, so we don't know how many it is we may be right, you know, 15 different custom react hooks over the course of the video. But we talk a little bit about when where why how, what you do to write them why you would use certain techniques when to use certain other techniques, commonly used patterns that you'll see in other people's custom hooks. It's really stinking cool, and it's actually on sale for 50% off right now that's not something I typically do but with the current situation, it is 50% off and if you use the coupon code syntax, you'll get an additional 10% off so it's basically free. So head on over to level up tutorials COMM And I'll have the link in the description you can either sign up to become a pro subscriber and get access to all that and more or buy this course outright. Allah cart. - -96 -01:02:22,979 --> 01:02:31,020 -Wes Bos: Beautiful. Alright, thanks for tuning into the potluck and we will catch you on Monday. later peace face. - -97 -01:02:32,850 --> 01:02:42,570 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax243.srt b/transcripts/Syntax243.srt deleted file mode 100644 index bcccd0034..000000000 --- a/transcripts/Syntax243.srt +++ /dev/null @@ -1,124 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,989 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill, web development hasty, as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos, and Scott L. Todd. - -2 -00:00:25,890 --> 00:01:14,610 -Scott Tolinski: Welcome to syntax in this Monday, Hey, Steve treat, we're going to be talking all about how to get the buy in for a tool from your team. There's all sorts of things that we present to our team. And we say, I'm so excited about this new thing, this thing going to be great. And then you get these looks from your team. And they say, I don't want to do that. So this is going to be talking about how to sell developers on tools that you should be using in your tool chain, where everybody can get a ton of benefit out of them. And the the one that we're gonna be talking specifically about in this is prettier, but I think this advice will apply to a lot of things. So my name is Scott kolinsky. And as always, I'm joined by my awesome co host, Wes Bos. - -3 -00:01:14,670 --> 00:01:17,700 -Wes Bos: Oh, very kind of you. Thank you, Scott, you're awesome co host. - -4 -00:01:18,030 --> 00:02:53,190 -Scott Tolinski: Thank you. I appreciate that. This episode is sponsored by an awesome sponsor, and that's Log Rocket. Now Log Rocket is the error and Exception Handling service that allows you to see how your errors happen. And what I mean by that is they give you a session replay video, that is scrollable, with the Network tab and error logs and all those things that we like to use when we're actually debugging ourselves. It's really cool. It's so fantastic, because it's the tools that we use to debug, but it's actually a replay of somebody else causing the problem. It's unbelievable one of those things you're going to have to see, to believe. And that's at Log rocket.com. And it looks like there's some interesting new developments at Log rocket.com. They have this new Log Rocket on premise, which is run Log Rocket in AWS, Azure, or your own environment, or Log Rocket Cloud, use our hosted solution, which is the version that we've been, you know, advertising here and syntax for a little while now. So they now have a look looks like an on premise hosted version where you can host it yourself. Or you can continue to use the one that is hosted with them. So you're going to want to head on over to Log rocket.com forward slash syntax and get 14 days for free to see the magic of Log Rocket. So Wes, I know this question came in to you from an email and it was a good enough email that you said hold the phone, we got to make this into our in our next hasty treat here. So I'm interested in it. Maybe you giving me a little bit more background on this, and then we can dive into this subject? - -5 -00:02:53,519 --> 00:04:30,450 -Wes Bos: Yes. So the question came out an email and I thought like this is this is a great question. So it was I wrote a long message to our architect asking if I can sell prettier into our component generator for new projects moving forward in the response I got was don't auto format, not all devs want that in prettier doesn't always format the way I like it. I don't want to enforce that on other devs. So prettier is a tool that will take your code and format it based on what it thinks is best. And the reason why we say that it's because prettier doesn't have a ton of options. There are some minor options, like you can use a single or double quotes or there's a couple other ones, I forget what they are. But generally prettier just just works for you. And it's awesome. Because you as a developer, you don't need to worry about properly formatting or indenting. Or remembering the style of how your team codes or any of that stuff. You just kind of you should see me I'm just a mess when I code now. And then I just hit save. And it just formats at all. All nicely. So the question goes on to say this sucks, because I know our code base could benefit from it so much right now I visit the project and the code is not spaced out. And that makes it hard to read quickly for me. Lots of the rack code is bunched up with no spacing. It is a mess. That's one thing in react world prettier will automatically indent and put quotes around the things that that need it even with like spaces if there's a space that you need there. React will automatically do the stupid react space, which is curly brackets quote space. Yeah, right. I - -6 -00:04:30,450 --> 00:04:32,310 -Unknown: hate that. I hate it. - -7 -00:04:32,450 --> 00:06:34,050 -Wes Bos: We do. I hate it. It is a mess for me, especially because I'm very organized. If this was your situation and you know of a new tool or standard, something that can help a lot. And it is shot down. Do you just give up? I don't know how to respond to this because I'm only deaf, whoever proposed this at my company. And I just started here. So Oh, we hear this a lot. I'm a new dev at a company and they're not using X, Y or Z, which is clearly way better. What do I do? In that case, so there's a lot to unpack here. First of all, I don't think that any senior devs, like junior developers, especially new to the company, developers coming in and starting to say, like, why aren't using this thing? It's not as good. Like, I think everybody has a little bit anxiety about becoming out of date, especially in JavaScript land. And if some whippersnappers comes in and starts asking, What are these, this package called prettier? Probably what would happen is I would open up the website and look at it and go know that right, like, what what are you doing? And also, I think senior developers know better to then to slap a new tool into their codebase. Because every time you add something new, especially something that changes your code, then how do you know that's not going to break something down the line in one little use case. And that's probably what the developer here is afraid of? Is that getting a call on a Sunday morning that something's broken? And it's because I weird format, or came in and did that? So I'm betting that the situation here is that the senior developer here doesn't necessarily know what prettier is, or doesn't think that the formatting that prettier gives is how they like to write code, I certainly have that as well. I went into prettier and I said, Oh, I don't like this. And prettier intentionally doesn't have very many options, because it's opinionated about it. And I found personally, if you just sort of give up and let prettier format it how it wants, and just be okay with that, then life gets a lot better. What do you think, Scott? - -8 -00:06:34,469 --> 00:08:20,100 -Scott Tolinski: I largely feel the same way. I think I tweaked it on some things like a little settings. Yeah, semi colons. I don't like any more. I like have a hard time admitting that out loud. I don't use semicolons anymore, I had to turn it off. And that's something that would definitely urge a senior dev who'd be like what your semi-colons in our project. So I mean, I mean, I think largely you, you hit the nail on the head for most of this. There's tools that that can help us in everyday life that you might not necessarily see the benefit on. Or you might not be awoken to the benefit on until you either use it for yourself or you you get it the light bulb pops on, and you're say this is why. And a lot of that has to do with the value proposition there the what is the value of this to the codebase? versus what is the cost of adding it right? Is the cost that it's going to create bugs? Or is the cost that it's going to modify things in a way that I'm not comfortable with? And what's the benefit. So there's this whole cost benefit analysis that needs to be done. And that's definitely what the senior developers are thinking. He I think you nailed it on the headwind, senior developers really know, not to willy nilly add stuff to things. But in the same regard, I think prettier is one of those tools that will just make about any codebase better, in so many different ways, from sussing out stylistic bugs to making everybody's code look the same. There's so many things that are in the positive value comment like column here, that it's a lot about, how can we illuminate those values in a way that's coming across as helpful rather than like, no at all a and like needing to take in this like I need to take over this project was by new fancy tools? - -9 -00:08:20,520 --> 00:08:46,590 -Wes Bos: Yeah. So we've got a list of a list of suggestions of what can you do here. The first suggestion is like you asked for their thoughts on a tool instead of suggesting it. So come to them saying like, hey, I need your opinion on this, rather than Why are we not using X, Y, or Z. And it sounds like you've already done this. But just for anyone who is looking at a new approach to something like this, that's probably a good way to go about it. - -10 -00:08:46,740 --> 00:09:00,020 -Scott Tolinski: That to me, before you move on to the next one. I think an important thing to note there is that our developers, we developers, we love our code bases. My code base is my child, it's not actually my child, I you know, I love my children more than my code base. But like, - -11 -00:09:00,090 --> 00:09:00,600 -Wes Bos: yeah, - -12 -00:09:00,600 --> 00:09:15,630 -Scott Tolinski: I really, really, really have put a lot of time and sweat and effort into my code. And I really connect with it very on a deep level. And if somebody were to come into my project didn't be like, you know, your formatting sucks, - -13 -00:09:15,630 --> 00:09:16,800 -Unknown: why not? Yeah, - -14 -00:09:16,800 --> 00:10:32,780 -Scott Tolinski: I would be like, you suck. You know? Like, that's the natural response when when it's almost like an insult, right? It's like an insult to the word totally based. That's happened. So I think largely, that's a great suggestion. Because if you're asking for their advice, you're not insulting their codebase you're not insulting their ego, you're not getting in that sort of mental space. And it's more like looking at it as an objective person rather than in relation to something that they hold dearly. And the next one is show with the Dev, that even though it looks weird, it's better for readability and it is, it looks weird or different, maybe different might be even a better word. It looks different than than what they are used to looking at. But We have a project. And sometimes somebody writes code one way somebody writes another code another way. And it's important to see, hey, this is this is a better for readability because we're all going to be looking at the same thing every single time. And we know what we're going to be looking at rather than having to teach things like I don't have to teach my developers anything about my own formatting because prettier teaches it to them, right? prettier takes care of that aspect. Therefore, we don't have to do that aspect of training. And this is how we write code here, you know. - -15 -00:10:33,599 --> 00:11:38,370 -Wes Bos: Next one we have here is look at the existing guidelines. So this is one question. I don't know about this specific use cases, like, Are there an existing coding guidelines that you are following like a formatting guidelines, like, we always put array methods on their on their new line, or always explicit return? When it's an object or something like that, right, like different rules. And if that's the case, then you really are asking the person to change their coding guidelines. So try to see if you can match it as close as possible. For this reason, I wish prettier, did have more options, and you slowly do see them adding more and more options, but try to like, take what the existing guidelines are, and match it as close as possible for that. Because my other question was, is like if there are no existing coding guidelines, like what's to stop you from just using it personally, right, on on the new code that you write, and then just checking it in? Right, but it sounds like maybe there are some existing standards in place. - -16 -00:11:38,879 --> 00:11:39,480 -Unknown: Yeah, - -17 -00:11:39,599 --> 00:12:49,500 -Scott Tolinski: I think that getting a close like, between es lint together with prettier, you need to have some sort of standards, where it is whether it is just as lint, or whether it is pretty, or whatever, you need to have some sort of formatting standards, and asking the developers to enforce those formatting standards by hand, I do not think is a good strategy for having those formatting standards. So if the standards already exist, maybe even before you give it to them, say hey, check out this cool tool that will enforce our standards, but enforce it in a way that just does it for us automatically, right? There's that value proposition, here's the value, it's going to allow us to enforce our guidelines that are either already exist or a closed version of our guidelines and those aspects. Another good tip would be to put together a solid argument for it and really write down the pros and cons. And, you know, here's I thought about these things, I thought about the impact that's going to have on our codebase here's how it's going to make our codebase. Better, here's how it's going to make us more productive. Here's why I think we should probably use this for our application. Like we said, Keep in mind, you want to be respectful of the codebase. - -18 -00:12:49,769 --> 00:13:29,070 -Wes Bos: Totally, I also would try to use it in a smaller project. Because I think that a lot of people are against tools like this, especially ones that are so aggressive and opinionated. But honestly, have you ever seen someone use prettier? It's usually like, I Oh, that's nice. Like, oh, you get even, especially like, I use prettier on Save in my editor every single time you save it just formats it some people only like to do it on as a git commit or something like that. That's crazy. Yeah, I think that is a tool that you should use on safe. Yeah, exactly. But just let them use it. It that'll help a whole lot. - -19 -00:13:29,519 --> 00:13:30,060 -Announcer: Totally. - -20 -00:13:30,599 --> 00:14:15,960 -Scott Tolinski: And lastly, you can always just use the prettier format or yourself. And you know, this is this is one's a little interesting, because if your code base has an existing guideline to it, if it has an existing guideline, then you use prettier when you're typing and and whatever. And then you will have to readjust to the guideline. That's not a lot of fun, but it certainly scratches that itch. I remember this being a thing when like sass first came out, like some people didn't want to use sass. And then other people were like, well, I'm just going to use sass myself, and then just only send the CSS down the line or something, or it's definitely not an ideal situation. This is sort of like a last ditch effort. And I personally might not even do this one myself. - -21 -00:14:16,379 --> 00:14:48,800 -Wes Bos: Yeah, yeah. I think as well, you should also maybe check out j s beautify. I think this one comes with VS code by default. And there are, I think more options in this one versus prettier. I'm sure there's a reason why prettier is better. That's why everyone uses it. But if you find that you can't match yours prettier with what your existing coding style is, then maybe check out j s beautify. It's on GitHub, cause I'll link it I'm not gonna say the www - -22 -00:14:49,079 --> 00:14:56,460 -Scott Tolinski: w w dot. What? HTTP Yeah, they're the days of writing out URLs. - -23 -00:14:57,690 --> 00:14:58,260 -Unknown: All right. - -24 -00:14:58,260 --> 00:15:11,700 -Wes Bos: So hopefully that helps you I emailed this person back, as I asked for, like more details, because I'm very curious to see like how this goes. And like, I would certainly be really bummed to have to do a project without prettier on it right now. So - -25 -00:15:11,700 --> 00:15:12,720 -Unknown: totally - -26 -00:15:12,720 --> 00:15:23,010 -Wes Bos: let us know how you got your boss or other team on board with tools like prettier, yes, lint, whatever, tweet us at syntax FM, and we'd like to hear that. - -27 -00:15:23,490 --> 00:16:59,940 -Scott Tolinski: Yeah, I would like to hear that too. And I think a lot of this advice applies, like we mentioned at the onset of the show is, I think it all applies or selling anything to your team. And, and maybe not just prettier, whatever. But remember, at the end of the day, there is a sort of cost benefit analysis that managers are always looking to do. And if you have a senior developer there, they are most likely manager minded and they have an idea of like, what is the cost? What is what is it going to take to do this? What is the it was funny, I before we wrap the show up, I have a job interview once and they didn't use any ESX features at all. And the reason was, is because they didn't want to have to deal with it. And I was like, What do you mean deal with it, you guys already have a build tool, they already had a build tool, and they weren't using year six. And this is this is like, break it. Like, what? Like, you can use this and that I if I would have gotten the job, I would have been like, Listen, we need to talk about this ESX thing, because it was for a senior role, whatever. But you know, I think that is definitely there. There's all sorts of these little things that can pop up that you need to be able to sell the team on in various ways, all all sorts of time. I remember one of our devs when we worked at four trying to sell us on react, and it was before I understood react. And I was just like, no, like, that's ugly. That's that's ugly. I don't get it. And then once he sold me on it, he built like a pixel create, like a pixel art editor. And he's like, Look, I built this pixel art editor in absolutely no code whatsoever. And it was super easy. Let me run you through this code. And I was just like, Oh, this is dope. Okay. And let me let me look into this react thing a little bit more. - -28 -00:17:00,000 --> 00:17:05,300 -Wes Bos: Yeah. That's, that's a great sorry. Yeah. All right. I think that's it for today. Anything else out there, Scott? - -29 -00:17:05,489 --> 00:17:06,960 -Scott Tolinski: I don't have anything. No, no. - -30 -00:17:07,530 --> 00:17:12,660 -Wes Bos: All right. Well, we will catch you on Wednesday. As please - -31 -00:17:14,640 --> 00:17:24,420 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax244.srt b/transcripts/Syntax244.srt deleted file mode 100644 index 4f0110f29..000000000 --- a/transcripts/Syntax244.srt +++ /dev/null @@ -1,452 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,820 --> 00:00:06,120 -the podcast with the tastiest web development treats out there. - -3 -00:00:06,149 --> 00:00:10,530 -strap yourself in and get ready to live ski and Wes Bos. - -4 -00:00:11,069 --> 00:00:38,720 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there today we have a another potluck for you, which is we should do one potluck per, per week or know what one potluck per month. But we've got a lot going on our lives right now we're a little bit a little bit slammed. So with that, let's just do another potluck plus, like, these Pollock's are probably my favorite to do and they get the most listens. So with that we we treat you with an extra one. They Yeah, - -5 -00:00:38,729 --> 00:00:42,180 -Scott Tolinski: they're also very, very helpful. I think they're very helpful. - -6 -00:00:42,449 --> 00:01:03,689 -Wes Bos: Oh, yeah, I think you get a you get a lot out of these potlucks, because there's so many different topics that we can talk about. Today's sponsors our Sentry, which does all of your air and exception tracking and Freshbooks, which is does all of your invoices and expenses tracking. We'll talk about that partway through the episode with me as always is Mr. Scott to litski. How you doing today? Scott? - -7 -00:01:04,289 --> 00:01:49,770 -Scott Tolinski: I could be doing better? No, you know, it's things are just crazy. I mean, they're crazy for everybody. But if my audio sounds any sort of different than normal, it's because I barely leaned in, came into my office and then just just annihilated my setup. It's so I've been spending all morning trying to get it back to where it was. Because I hadn't I you know, I tuned perfectly and he, you know, I asked him, I said Landon, did you touch any of these knobs or buttons? And he says, haha, he says, I just counted them. And I said, Oh, so that to me is like a big red flag. Because when he counts stuff, he's just pushing and whatever. Like he's not just - -8 -00:01:51,180 --> 00:01:57,780 -Wes Bos: I just counted them. Yeah. Did you have a picture of your knobs to go back to here? Did you have to do it by ear? Oh, cuz - -9 -00:01:58,050 --> 00:02:15,030 -Scott Tolinski: I have tweaked it over time. And I had to do it by ear. And I have this. I have a cloud lifter preamp in here. And for those of you who don't know, the whole setup, basically what we have is a rack mount. Which unit which has like, I don't know, 10 knobs on it, which control sort of - -10 -00:02:15,240 --> 00:02:16,280 -Wes Bos: land and he knows how many - -11 -00:02:16,940 --> 00:03:07,410 -Scott Tolinski: knows he's been counting them. Although he doesn't count. He counts, he counts. He knows this numbers, and he counts very well. But he just like, he'll like ignore it. He'll just like, he'll get to the number. He'll be like, Alright, there's five and then it'll just keep counting, even though he'll hold like, he knows that's the end. He just likes to count continuously. Either way, there's a compressor, there's a gate, there's a whole bunch of stuff. And for my microphone to sound nice. It is very specific. very specific. And yeah, um, so hopefully it doesn't sound too bad for you today. I'm gonna do my best to monitor it as we go. And if I notice anything else we can hear in an hour. But yeah, that's pretty much how not only today, but this whole whole month is gone for me. So yeah, my whole month is a set of mismanaged knobs here. - -12 -00:03:08,880 --> 00:03:47,190 -Wes Bos: I don't even have my DB X on right now which is the the compressor and everything you're talking about. Because I brought it up to the cottages, we actually have another one up here. And I realized it didn't have the cord for it. And some lucky soul I like for those who don't know, my cottage is in like a super small town in northern Ontario. Some nice audio engineer drove 20 minutes to meet me halfway and he just gave me the correct cable. Which because like there's no way I could get anyone any other way, because Amazon's not mailing stuff out and I needed it quick. So I just got it yesterday. I haven't hooked it up yet though. - -13 -00:03:47,610 --> 00:03:53,190 -Scott Tolinski: Yeah. That's cool. Well, props to that guy for Yeah, - -14 -00:03:53,370 --> 00:04:10,020 -Wes Bos: super nice guy. He said he had a garage full. He's an audio engineer. So I have every cable. Nice. He looked me up. Alright, let's get into the questions here. First one is from Dan Chenery. Chenery looks on the - -15 -00:04:10,020 --> 00:04:12,960 -Scott Tolinski: air. Yeah, Tony. Yeah. Yeah, sounds good to be. - -16 -00:04:13,620 --> 00:06:25,590 -Wes Bos: Do you have a quick overview how to effectively use a platform like cloudinary. I have a Gatsby site, which has a lot of images and want to use something like cloudinary for optimization, but the docks aren't completely clear how to get the most out of their service. Okay, so cloudinary is a service that you can upload images to or just feed images to, and then it will return, resized compressed, different formats, sepia tone, all of that. cloudinary is one they've their Buddhist sponsor. There's another one image x IMG ix. I haven't used that one before myself, but they do sort of the same thing. So the idea is that you just like you You pass it an image and it returns multiple sizes to you if you want. I really like cloud Neri because it allows you to do it on demand. And you can just put it in the URL structure and it will return that resize version. versus something like Gatsby image, you have to know ahead of time what size you want the image to be. So how do you use it with something like Gatsby? Well, there are different plugins for cloudinary. I'm assuming there is a Gatsby cloudinary plugin. I don't use Gatsby and cloudinary together because Gatsby image does all of that already for you. And it will just resize them I even learned the other day, you can add like filters like blur and contrast with Gatsby image. So all most of I think all of the stuff that cloudinary does, Gatsby image will do as well. The only downside to it is that you have to process them all on your computer versus cloudinary server. And for me, at least that was that was giving me like 2022 minute build times with just, I don't know, I think I had maybe 400 images with three or four different versions each. So I'll talk about I've, I'm redoing my website right now, I'll talk about how I solve that in the future. But that's just kind of how you will use them together. I have used some Gatsby in clownery together. - -17 -00:06:26,130 --> 00:06:47,730 -Scott Tolinski: I haven't because like you mentioned the Gatsby image stuff is really good, especially just because you host your images locally. And and I should put a caveat to what you were saying if you have the images and your your computer or your servers having to crunch those. It's only a problem if you have a lot of images, right? Like you have a lot of images, is that correct? - -18 -00:06:47,970 --> 00:07:47,190 -Wes Bos: I wouldn't even say I have a lot like I was surprised at how I hit it like so I have a website, I have about 40 blog posts, or maybe maybe. Yeah, I think I have 40 blog posts, and 250 Hot Tips. And every blog post and hot tip had one, maybe two images. So about 400 images. That's a lot of images. No, it's no, it's not a big website. Think about, like any website out there. I don't think that that's all that big like you think about an e commerce website. If you have 10 products, you have 10 and each have 10 images for each product. That's 100 images already, right. So that's, that's 100 images. And then you think about like a couple different sizes each, you have like a thumbnail version and a medium version, a large version. And then if you're if you're doing responsive, it gets out of control real quick. And Gatsby and Netlify are both working to fix this right now. Because they realize how dog slow this can be, - -19 -00:07:47,730 --> 00:08:13,020 -Scott Tolinski: you know, so Okay, so I do use Cloud Neri on my site. And so I think if you're looking to use Cloud Neri in not use Gatsby images, for whatever reason, I guess maybe the way I use cloudinary can either be of two ways I have an image that already exists. And I'm using their upload URL to Is it the upload or they fetch URL? I guess I'm confused by those. Let me say, - -20 -00:08:13,230 --> 00:08:19,740 -Wes Bos: You mean like the URL that you put in front of your path? Yeah. slurps Yeah, I call that the upload or the Slurpee or - -21 -00:08:20,040 --> 00:09:15,360 -Scott Tolinski: URL, because I had images that were coming in from YouTube's API and I wanted get I wanted cloudinary just slurp those up. So cloudinary would just slip those up. Sometimes though, what I do is I actually go to cloudberries interface, I upload the image via their click button, drag and drop. And then I just it like, I'm not gonna do that for batting images. But if I have a one off here for like the syntax logo on the level of tutorials website, I just upload that by hand. And then I have the URL in here. And then as far as like the parameters in cloudinary, these parameters, I think, as far as getting the most out of their service goes, one of the things that I've really loved is the F underscore auto parameter, which gives you the the format auto based on whatever browser, so therefore, a Google their Chrome, they're gonna send you a web p, to give you it's web p right now, web m, web M is movies. - -22 -00:09:15,799 --> 00:09:17,149 -Wes Bos: Yeah, web M is for me. - -23 -00:09:17,149 --> 00:09:50,149 -Scott Tolinski: Yeah. So they're gonna send you a web p, which is going to be a smaller file size than a ping, ping, PNG, whatever. And you don't have to do anything in the browsers that are going to not accept a web m like crappy Safari. They're not they're not going to get it. So they're going to get the actual image. So I personally prefer to good Yeah, I use the Q auto, which is quality auto. And I use f underscore auto for format auto so that way, I get the quality auto and the format auto and it just sort of takes care of itself. - -24 -00:09:50,149 --> 00:10:55,320 -Wes Bos: You know what one other thing I'm going to use cloudinary for on my website, is I am pulling in my Instagram photos yeah via the API. into the footer. And there's two problems with that, like, first, I don't want to use Gatsby image because they don't want to rebuild my website every time I post an Instagram I so I pull it in client side. But the problem with that is the images are much larger than they need to be for the thumbnails they are in and the lighthouse complains about that. And second, is like Firefox blocks, Instagram and Facebook. Yeah, I think I have some sort of thing on so like, the images don't work. And also, I don't want to, I'm trying very hard not to have any Twitter, Facebook, anything on my website. I don't want any tracking on my website. So like, I'm not going to give Instagram a free ride by embedding an Instagram URL into my website and letting them. So if I just popped the cloudinary URL in front of it that solves both problems. It can resize them, and it strips the actual Instagram, Facebook from being embedded on my website. Nice. - -25 -00:10:55,350 --> 00:12:34,679 -Scott Tolinski: Yeah, that's a good idea. Yeah. Okay. So next question here is from Andrew Andrew says, what kind of CSS pre or post processors do you use? What are the pros and cons for a preprocessor, sass, SCSS less, and the post processor as opposed to CSS. So these things, these tools that are largely tools to modify how you write CSS, if you've never used the CSS preprocessor, what it basically does is it gives you some additional features that you didn't have within CSS, such as nesting variables, functions, mix ins, and a whole bunch more, all that fun stuff. Post processes are interesting, because what they can do is really just they augment the way you write CSS, so it can give you like super powers into CSS even as far as like changing property names and things like that. They're all really interesting. Now, what do I use? I personally, if I were to say, what's my favorite CSS preprocessor. We've discussed this before, it's stylists, but stylist isn't used to hold on anymore, or at least a ton of people aren't using stylists right now. So I'm currently running sass on level up tutorials right now, believe it or not, it just sort of dropped it in there a couple months ago, just for fun. Because I was having issues with the global styles in styled components. And so I decided to do my global styles in sass rather than installed components, just because so what are the different preprocessors? Those are the different preprocessors sass itself. s a s s is sort of a weird syntax that not a lot of people used, it was sort of Ruby inspired there wasn't it was like a very, what do they call that when it's form? It's like format based, when you have like tabs and stuff like that, rather than the brackets? - -26 -00:12:34,770 --> 00:12:37,740 -Wes Bos: Oh, yeah. It's like based on indentation? Yeah, you - -27 -00:12:37,740 --> 00:12:53,159 -Scott Tolinski: don't see it used a whole lot. I would just probably ignore that for now. SCSS is basically this CSS syntax with some additional features. Less is basically sass with less features. That's my understanding of of less, it's basically sass with less features. - -28 -00:12:53,159 --> 00:13:17,190 -Wes Bos: It's totally caught up by now i don't think that there are any features that less is lacking, but immunity to ln and E for Yeah, it is. That's that's what it is, is that for the longest time, SAS was more, had more features. And that's why everybody sort of gravitated towards SAS, except for there's always like a weird, like, I feel like all the all the Laravel developers all went for less for some reason, - -29 -00:13:17,490 --> 00:13:40,260 -Scott Tolinski: the designer crowd went into less because bootstrap initially started using less. Ah, yeah, they it was really easy to get up and going with less, because you could just drop in a script, and it would do it live rather, rather than pre processing it actually. Like rather than compiling it, and that compile step, I think through a lot of people who weren't good at command line off or have build processes. - -30 -00:13:40,350 --> 00:14:46,710 -Wes Bos: Yeah, that was a weird thing. That was like the first time we ever had a build step in our website was Yeah, and for people to have to, like, do that. It was a it was an odd thing. I remember like people would edit the CSS and I'd be like, no, don't don't edit the source. It's gonna get overwritten. I had a client once. This is a funny story. I had a client once where I used I actually used lesson PHP world in my WordPress, because there was like a WordPress, sorry, there was a PHP library for compiling less, so I just did it. I said, if in the header, I said, if if you're if the admin is logged in, then just regenerate the thing as I'm loading this page. And it worked great. And except that like I like deployed a client site. And they were like, I just keep changing the CSS. And I refresh the page and my edits are gone. And they just like I wasted three hours on this. I could not figure it out. I'm like, oh, what's happening is that we're compiling this on the fly. I obviously changed to more of like a gulp workflow after that, but I thought that was pretty funny. It is funny. Okay, so which, - -31 -00:14:46,740 --> 00:15:23,100 -Scott Tolinski: what, what are the pros and cons? Well, honestly, I think there's a general blanket rule if you're using a preprocessor SCSS. Those probably the one you're going to want to use in 2020. Just because of the community just because of the resources just because the amount of Have people using it? As far as post CSS goes, I do love post CSS. And that's probably what I would pick. If I was picking one of these even though I did pick sass, I guess, both CSS is really great. There's just a lot of cool stuff going on with it. Personally, I'm using aisled components for all of that stuff. Anyway, so I'm not really using any of these. But as a general rule, if I'm picking anything, I'm gonna just pick SCSS. - -32 -00:15:23,370 --> 00:17:05,220 -Wes Bos: Yeah, I reach for post CSS, my own my own web, my own like course platform is in stylus, which I love. I'm sort of sad that it's, it's going away. But I'm not that sad. Because like, I like all of these things. And people are really opinionated about it. But like, it's not a big deal for me to switch from from one to another. Even from project to project, I would reach for post CSS myself, because I'm trying to think like, what are the things that I still want to use, that aren't in just regular CSS, and that's nesting that's coming. Advanced calculations. We do have calc function. And color functions are going to be a big one once we get those, and those are all things that will be coming to CSS one day. So I just like to keep it as close to regular and feature CSS as possible. That's why I read your post VSS. Yeah, post CSS. All right. Wow, those are those are just just two questions in those are some good ones. I like that a lot. Next one is from Graham, what are the most effective ways to share a project on the internet and get feedback? I'm in a phase right now where I'm building loads of new web things in react in JavaScript, but the only place I can share them is my Twitter. We're only like three people see them. Graham, buddy. Oh, so it's sad. Well, that that's a good question. I think the best place right now to post them is on Reddit. Like there's Reddit, our web dev, Reddit learn JavaScript, Reddit, what are those a couple other subreddits that are dedicated to that? And then also, I find and I get tagged in these all day long? It's the hashtag 100 days of code. Yeah, - -33 -00:17:05,250 --> 00:17:06,830 -Scott Tolinski: those get those get shared? Yeah, - -34 -00:17:06,899 --> 00:17:55,100 -Wes Bos: yeah. Or at code newbies. I get tagged in them, like probably six or seven times a day because people are taking my course as part of it. And I'm always surprised at how much interaction I got a Twitter account that was made six months ago and has 20 followers, how much traction that gets because people are following the hashtag. And they're following code newbies on Twitter, or doing the code newbies QA once a week, they have a q&a. And I think those are just three great ways to to find a community of people who can give you feedback. And especially like, I find it super valuable feedback, because often these people are just like six months a year ahead of you. And I find that feedback to be just as valuable as some 15 year old, our 15 year veteran of web development. - -35 -00:17:55,100 --> 00:17:55,890 -Unknown: 13 year old - -36 -00:17:56,840 --> 00:17:59,040 -Wes Bos: 15 year old veteran, a web development. - -37 -00:18:00,630 --> 00:20:02,790 -Scott Tolinski: That's good. Yeah, I think the key word that you're going to be looking for with any of this stuff is community find a community to share this stuff with Yeah, like you mentioned, those hashtags are great. We have a level up tutorials discord, the link is in the footer of level up tutorials, COMM And people share stuff there all the time, get feedback, share tips, and talk about stuff like that. So find a community of like minded developers who are working on stuff and just share with them in like you said, I think Reddit is a great place for that specifically because of those things. So Okay, next question is from Ted Lee. What are your thoughts on classes in JavaScript? Do we still need them in 2020? Or has functional programming paradigm made them largely unnecessary? Does the answer change? based on the size of the project or the team? I'm okay. Do we still need them? need is an interesting work. No, you don't need them. Some people like them, some people prefer them. Some people prefer the Opie object oriented programming method of things. I personally prefer functional programming myself. And since moving to react hooks for my entire application, I have not touched classes. classes were the thing that I used in react. And that was pretty much the time that I use them. Now, not to say that I'm not doing a whole lot of JavaScript work outside of react view, or svelte, but I don't know, I don't, you don't need anything and I don't want to get too hung up on that need. You don't need anything. You can do everything with fun. Yeah, whatever. Some people just like it. And some people like the object oriented programming side of things. Not to mention classes are pretty brand new in the scheme of things. And even though they are just syntactical sugar over how things work already in JavaScript, I don't know I mean, I I don't have any strong feelings on this one way or another. I think classes are fine. I had no problem working in classes, but I probably prefer functional programming overall? - -38 -00:20:02,970 --> 00:21:05,970 -Wes Bos: Yeah, I, I've told the story before but I once ran a poll on my Twitter, I says, Do you use classes in JavaScript and there was a sign like 5000 people answered, and it was literally half and half. So don't let any but this is such a divisive topic yet. anybody tell you either ways, I think you probably will make that decision based on your team. Especially like there's developers that come from other languages that are just classes to the grave, and come into JavaScript, although classes don't necessarily work the same way as they do in like a Java or something like that. It's just, they just write better code, because that's the way they think. And there's absolutely nothing wrong about that. You probably in our little circles of communities, you'll probably hear a little bit more now you don't need classes. Because the whole react JavaScript world right now it's very hot on like Scott said, like functional programming instead. So that's why so I'll try him out if you like them go for him. But it's it's not necessarily something you need. I don't think - -39 -00:21:06,320 --> 00:21:07,740 -Unknown: Yeah. Cool. - -40 -00:21:07,740 --> 00:21:13,260 -Wes Bos: Is there something you would need for your JavaScript though? Scott, anything you can think of? The Yeah. - -41 -00:21:13,260 --> 00:21:19,850 -Scott Tolinski: Hi. I mean, I'd be i'd need what do I need? I need comments. I need - -42 -00:21:20,880 --> 00:21:24,990 -Wes Bos: all sorts of comments. That's another I need console, ah, divisive topic I need. - -43 -00:21:25,950 --> 00:23:03,750 -Scott Tolinski: I need decorators. I need Oh, no, I actually need Sentry to keep track of my bugs. And when I say I need it, I literally need it because Sentry lets me know of all of my errors and exceptions that I can track, tie them to releases and catalog them now Sentry, which you're gonna want to check out@sentry.io coupon code, tasty treat all lowercase all one word, you're gonna want to try out Sentry because let me tell you a Sentry has been around the block for a little bit. And they know exactly what people want to see. In fact, I just deployed a new version of my site on Friday, which you know, you're not supposed to do but if you're doing it on Friday, you better have some error and Exception Handling tools. And guess what, I see that I fixed a bug in my API. But I'm also seeing that I have seen an increased amount of front end errors. Unfortunately, these errors are happening to users on the site. And they're not big things. We have a resizer observer loop that I got to take care of. And this looks like some small stuff here and there, but it allows me I mean, I'm pulling this up, right now I can look at my own error log, I can click on one of these errors. And I can say, Oh, yeah, this thing, this thing right here. Don't worry about this thing. This error, this is just a customer got a credit card declined. That's not an actual error. Let me go ahead and click ignore, and now no longer gonna see that message. So Sentry is a great way to keep track of all of the things that are happening on your site and what users are seeing or feeling while they're using your application. So head on over to Sentry Sentry.io. Use the coupon code tasty treat all lowercase, all one word, get two months for free. - -44 -00:23:04,320 --> 00:23:51,150 -Wes Bos: Man, I've got it before we end the Sentry AD thing, I got a story I did my nightmare, which is I broke my check out the other day. I deployed some some new features to the checkout. And something happened where the compile step didn't properly didn't work properly. And I deployed the thing. And I was freaking out because I was getting all these like, like obtuse emails from people being like, Hey, I'm trying to pay you money. It's not working. And it was like, I need this info quick. I can't like email them and tell them to give me their console. So I just hopped into my Sentry, and I found the error that was happening. And I was able to fix it nice and quickly and get everything working. So I was like, Oh, thank goodness, I had that collecting the errors instead of waiting for emails to come in. Seriously, what went wrong? - -45 -00:23:51,239 --> 00:24:32,310 -Scott Tolinski: Yeah, yeah, thank goodness. And that's really where it really excels. Okay, so the next question is from Jonathan Biel. Jonathan had a note that saying his last name was impossible to mispronounce and I challenged him on that. So Jonathan Beal, aka Jonathan Bell here, he says, Does he s 2020 have var question mark? Also is the ies 2020 a real spec or just a term that people are using? Okay, so the ies 2020 thing based on ies whatever. This is all changed from how it used to be. You'll you'll all remember that when ies was at ESX or ies, five at this point, man, it's been so long. I'm like tripping ESX right. - -46 -00:24:32,549 --> 00:24:35,580 -Wes Bos: Yes. When Glen God scam Yeah, that was Yes. Yeah. - -47 -00:24:35,610 --> 00:24:58,020 -Scott Tolinski: Yeah, six came out. And it was like a big deal that it was like, Oh, this is V sex. This is the sixth version of ECMO script. And since then, what happened was because there hadn't been any sort of major updates until ESX had happened. It was like the biggest update since 2011. That was like years. Yeah, it was years, right. So because it's - -48 -00:24:58,020 --> 00:25:01,560 -Wes Bos: like five years before something new came to JavaScript before that, - -49 -00:25:01,650 --> 00:25:45,210 -Scott Tolinski: right? So people were sort of like, Okay, this is the JSX. But then the very next year, yes, seven. And so like the what the way is changed is now is that there's a new version of ACMA script every single year. So es seven was es 2016. Es eight was 2017. But the whole idea is that they wanted to prevent it from you know, eventually being s 24. And they just decided to say, Alright, it's officially going by the year now. So there's going to be a new edition of JavaScript based on each year, in fact, ies 2019, you know, broad things like flat map. And some other things. I'm looking at the Wikipedia right here, I forget every year. - -50 -00:25:45,240 --> 00:25:56,130 -Wes Bos: Yeah, there's there's always just like a handful, or three, right? things. It's it's not a six, it's like oh my gosh, make a course about it. You know, now it's just like, Oh, those are a handful of handy little things, right? - -51 -00:25:56,130 --> 00:26:14,340 -Scott Tolinski: So a lot of little things popped up here and there and ies 2020 is just the next iteration. Right. It's the next yearly iteration. And does it have var? Yeah, of course it has far. They're not removing things from the language. So yeah, far, let const they're they're still the gang's all still here. - -52 -00:26:14,640 --> 00:27:18,420 -Wes Bos: This is a question I get a lot about what my ESX course is that. These are not like separate versions of JavaScript, like you were to run PHP, six, and then all sudden, you have these these new versions of JavaScript. So JavaScript just continually adds new features, and it doesn't take away. I don't think No, it doesn't take away older features. The only exception to that is when we got used strict use strict was a way for you to know that your document was written in such a way. And in that case, it did take away some features, which is pretty, pretty nifty that they did that. So do we still have it? Absolutely. Is it still is it? Is it a thing? Absolutely. We have like probably a couple shows that say is var dead in the title. Bar is just another way to declare a variable. And like classes, there's going to be opinions all over the place. Although I heard a awesome thing on Twitter the other day from my buddy Connor, who I think works at slack. And they say he said on his team, they say constantly you can't. - -53 -00:27:20,640 --> 00:27:21,570 -Unknown: I like that. Yeah, - -54 -00:27:21,780 --> 00:27:52,980 -Wes Bos: yeah. But that that's just our opinions, right? Some people use lead by default, or always use lead, because const is not really immutable. So pick whatever you like, and go ahead and use it. Don't let anyone tell you otherwise. Yeah. Ah, next question is from Jacob. See? Have you tried GQ, LS s IGQL. Ss dev graph qL client alternative to something like Apollo client. Very interesting idea for clean and maintainable code. And we talked about this in the last podcast, - -55 -00:27:53,100 --> 00:28:00,270 -Scott Tolinski: we've talked about it. I mentioned it to you, you looked at it for the first time. So this question is asking, have we tried it? Did - -56 -00:28:00,450 --> 00:28:01,290 -Wes Bos: you try it yet? - -57 -00:28:01,290 --> 00:28:47,250 -Scott Tolinski: I have not tried it. And I'm gonna tell you why I haven't tried it because it doesn't support all of the functions and features that I would need it to right now, it's just queries. And you need a, I think my understanding of it is that you need a web pack setup. So I have not tried it. I have not used it. But I am very keen on trying it eventually, especially once they get at least mutations. And I don't need subscriptions. But I can't think of a project that I'm using that just straight queries with no mutations right now. So I'm gonna need those mutations, at least some way, I don't know how they do it. And I don't really want to run this side by side with Apollo or something. So I'm just gonna keep an eye on and wait until it's a little bit more full featured. But it's one of these projects that I really have my eye on because to me is fantastic looking. - -58 -00:28:47,610 --> 00:29:13,530 -Wes Bos: I'm looking at the docs for the cash right now. Because that's that's a huge feature of Apollo is the cash. And the dogs for the cash, say, the inbuilt cache automatically caches everything for you. Yes. It says updating the cache to do so obviously, it's it's early days for this type of thing. I would probably sit on your hands for six months or so while they figure this out, but definitely a contender for the future. - -59 -00:29:13,920 --> 00:32:46,770 -Scott Tolinski: Cool. So next question is from Papa herb. Papa hub asks, What are the main differences between working in a software agency and a software product company? pros and cons of each now, I have not worked as a software product company. But I have worked at a software agency. Now an agency is typically going to be an independent company that has that many different clients or sometimes even just like one big client, but it's independent from the essentially the product that's being created. You're creating the these works for other people essentially. And so typically, the way it works in an agency is that there's like a project available. Let's say, here's an example. You have a client I'm just going to use Ford Ford right Ford dot com. Nice I did. I don't I don't have personal experience with this one at all or anything. But let's say there's a client like this, and they have a job that needs to get done. And they say, okay, we need a website, we need this. And typically there's like some sort of a bidding process and companies will bid for those projects, you'll get the project, you'll complete it by a certain timeline, you'll push it out. And you'll either maintain it for a little while with some sort of a contract to maintain or you'll never see it again, where with a product based company, you are working on the product, and you are constantly working essentially on the same thing, right one piece of product or software. Now, the pros and cons are, oh, there's a lot of pros and cons here. It's very interesting, because with a product company, you're working in the same code base all the time, which can either be exciting can be great, if you love ownership of things like that, or it can be monotonous and boring. If you hate the codebase, there could be a lot of different things there. If around the code itself, where with an agency, if you hate the code base, guess what you get a new one next month, or you know, you might have to see it very often. So there's definitely a little bit of me personally, I liked working at an agency because I liked, you know, having something new to try every single month because it gave me an excuse to try out some new technologies that said is the owner of a business I guess I know, I said, I don't work at a software company. But that's actually not true. I own a software company. So I have been working on level up tutorials, comm for like, a billion years now since 2012. And I have had ownership of that project. And I haven't gotten bored of it. But I am the decision maker, I can make all the decisions. And that's probably a different space than somebody who is a junior or somebody who is you may be a senior developer, not like a CTO or something. Now, there's also some financial stuff here that I think needs to be thought of, because I've worked at an agency that was struggling for cash at some point, you know, you there's like this, like delicate dance of projects coming in, and you want to have your schedule filled, but you don't want to have it overfilled, or else you're going to be screaming like cramming for overtime, and you don't want to have it under a filter, or else you're not gonna have any money coming in the door, there was a time where we were at there was like a recession. And we were going through a major crunch. And we all did take 25% pay cuts just to keep the doors open of the studio. And it was really rough, demoralized people and made you not want to do anything, you'd come to work and you wouldn't have any projects to work on. So there is definitely like pros and cons here and there. The financial side of the product company is that if your code sucks, then you could potentially lose money that way. So there's, there's a lot of pros and cons to think about here in terms of both how you like working on code, as well as job stability and financial. So it really depends. - -60 -00:32:47,190 --> 00:33:51,000 -Wes Bos: I think the only thing I'll add, because what Scott said is bang on is that I can always tell when I am talking with somebody, whether it's on Twitter or at a conference who only works on one product, because they often find it very hard to understand why you might do something that specific way or what this tool would be useful for because they have their product and they have their own set of problems. And that's their, their entire world, especially you see this, like bootcamp students who've been at a company for two years, it's like, they only know this one product. Whereas like, Scott, and I were spinning up new projects, trying new stuff, you're working on an agency, you're starting new projects every couple months, if you're you're building apps for clients, you're tackling it in different ways. And that's not great for like, like code livability, like how long something lives, but you certainly are tackling things in all kinds of different ways. And I think that makes you a bit of a bit of a more well rounded developer. Totally. Yeah. - -61 -00:33:51,000 --> 00:33:51,750 -Unknown: Ah, - -62 -00:33:51,750 --> 00:34:52,730 -Wes Bos: next question. runs on from Discord. Is this from your discord? Scott? Yes. All right. I'll read it as a as if I'm asking you. Advice for having a static blog with minimal moving parts. Hey, I'm building a static blog with minimal moving parts right now. I used to have a static blog and I eventually got sick of it sick of touching it, because instead of writing content, I often got stuck keeping up with all the dependencies involved. Absolutely feel you there, brother. It's like, take a break on from building my website on the weekend. And you started it up on Monday and it's like, oh, 400 security warnings. So as long as you keep it under 100 security warnings here. Good. So keep going. That's question. My old stack consisted of jigsaw, server side generated Laravel, Vue js and a bunch of plugins balma CSS Netlify CMS. As you can see, the decisions are definitely not to blame. By the way, in the middle of this question. I'm going to cut it in again. Do you see Gatsby is making a CMS say - -63 -00:34:52,730 --> 00:34:53,430 -Unknown: well, I - -64 -00:34:53,430 --> 00:35:04,080 -Wes Bos: called it they put out like, they put together a GitHub issue. It's in very early planning days. But they are making it I think they're calling Gatsby admin. And told Jay, - -65 -00:35:04,080 --> 00:35:08,900 -Scott Tolinski: I called it is it like array as it are an RFC, an RFC? - -66 -00:35:09,060 --> 00:36:18,690 -Wes Bos: Yeah. Request for comments. Is that what that means? It is. Okay. So pretty cool. Well, we'll talk about that when it comes. Anyways, back to the question again, the obvious step would be one to drop Netlify CMS because I'm good with markdown anyway. And to not rely on a CSS framework. I'm considering switching to a j. s server site generator framework to avoid needing code in the extra language. Any suggestions? notes, not interested in Gatsby? I'm just not a react guy. Makes sense. I'm hobby coder is to play with Laravel. But not anymore. So going full j. s would be ideal. Interesting, I think, yes, you should drop it depends a few. If you need all of these CSS frameworks, you likely don't go ahead and drop that drop as many dependencies as you can. because like you said, you're going to spend your whole day updating the content. If you're if you're a developer. Yeah, absolutely moved to markdown. We've talked about that a number of times on this podcast, how it's good for developers websites. And sounds like you are the perfect use case for view. Because like, what's the what's the view static site generator? - -67 -00:36:19,050 --> 00:36:20,100 -Unknown: grid, some - -68 -00:36:20,480 --> 00:36:31,800 -Wes Bos: grid, some checkout grid some because it seems like people who love Laravel also love view, it's sort of in the same vein. So check that out. I think you have a pretty good answer here already. - -69 -00:36:31,860 --> 00:37:06,230 -Scott Tolinski: Yeah, there is a ton of static site generators. So I'm gonna post a link in the show notes here for what about 11 D, right? for static jen.com. And this gives you a giant and I'm talking giant list of static site generators, that tells you what it's built with. So okay, it's built with JavaScript, a uses view or use a spelt that uses react, whatever. And how many GitHub stars that has how many issues that has open how many pull requests? It's really cool. Love, love, love this site. This site? Was this put together by nella phi, - -70 -00:37:06,270 --> 00:37:09,090 -Wes Bos: I feel like this was it's been around forever. - -71 -00:37:09,330 --> 00:37:36,480 -Scott Tolinski: Yes, site Gen is, is hosted and maintained by Netlify. So this is a really cool place to find out about new static site generators, things that you can use, and maybe some that you haven't heard about some that you have, maybe find the perfect one for you. We could have like a static site generator dating service where you give us all your needs and wants and then we return to you the perfect static site generator for you. But no header.com - -72 -00:37:36,810 --> 00:37:53,790 -Wes Bos: also, one thing that people will not stop suggesting to me is Hugo, yep, yeah, he goes big. Anytime I start to say the good of Gatsby, there's somebody like knocks on my door, and they're like, Hello. Have you ever heard of Hugo? Yep. So maybe check that one out as well. - -73 -00:37:53,820 --> 00:38:40,880 -Scott Tolinski: We'll check it out. So Gatsby has 43,000 stars on GitHub 43 517. And Hugo has 4301 48. So just ever so slightly less stars, just ever so slightly, but both of them seem to be very popular. So not bad choices? Either way. Okay. Next question is from jigs. Hey, jigs, you don't know if you know anything about breaking. But there is a famous B boy ball not really that famous named jigs who's good. So Google cigs B boy, he's pretty good. So the question is, micro front ends Is this the solution to rewriting legacy components. And let me tell you, micro front ends is very interesting to me. And I don't want - -74 -00:38:41,040 --> 00:38:41,960 -Wes Bos: that micro front end - -75 -00:38:42,000 --> 00:40:06,110 -Scott Tolinski: micro front end is breaking up your front end into different front end libraries. So you could use a little bit of your site in react a little bit to say, your view, a little bit of your seitens felt, or maybe they're just different little components of the application, and in different versions of react. So it's basically breaking up your front end into smaller micro chunks, you can think of it as like the serverless of front end, they took the idea of like, Alright, you break up your your thing into different things. And now, you can make decisions on one part of your application that don't push through to the entire application. So yeah, I am not sold on my career. And I don't understand the benefit. I understand that they could be useful in this situation where you have maybe like some of your site is in backbone, you want to move over part of it to react or something or part of it to speld microphone ends up. It's an interesting concept to me, but what I haven't seen is I haven't seen the killer example. I haven't seen somebody say okay, this is the easy, awesome, my girlfriend and setup. This is how it just works. It all seems very sort of taped together to me as the best way I can describe it. Do you have thoughts on that? Like I said, I can't imagine doing this for any any reason other Then writing legacy stuff. But yeah, that seems like a sh t show to me - -76 -00:40:06,380 --> 00:40:35,580 -Wes Bos: go back to the episode where we talked about CloudFlare workers, where somebody sent me a DM, how they were migrating their legacy website over to react. And they were doing it component by component. And they were using CloudFlare worker to basically stitch the old, they would just take the old website, and then they would just start popping in the new pieces as they were finished. And then eventually, you've popped every piece, and there's no more legacy pieces. - -77 -00:40:37,800 --> 00:40:40,110 -Scott Tolinski: Thanks. About poppin pieces - -78 -00:40:40,350 --> 00:41:15,690 -Wes Bos: really start popping pieces. I think that that was probably a good way I don't know, like, You send us your tweets. How do you do big rewrites like this? Maybe we should even have somebody on the show who went through a large rewrite like that. Because like I think about like, even like the government of Canada's website, like how would they ever switch over when you've got you've got URLs to maintain? You've got hundreds of thousands of pages of important information? And like, how do you how do you switch over from playing like that? That's a question I have. - -79 -00:41:16,080 --> 00:41:19,050 -Scott Tolinski: Yeah, it seems like not a lot of fun. - -80 -00:41:19,560 --> 00:41:20,420 -Unknown: I'll just say that. - -81 -00:41:20,850 --> 00:41:32,820 -Scott Tolinski: But what does seem like well also does not seem like a lot of fun, but could be fun. If you use the right product is keeping track of your books and invoices said. So that's why we recommend fresh books because it makes it not not fun. - -82 -00:41:33,570 --> 00:42:15,030 -Wes Bos: No accounting, keeping expenses, tracking your hours. That's one thing I hate doing. All of that stuff is not fun. And fresh books makes it as quick and as painless as possible. So you can get back to doing fun stuff. So you're trying to track your hours you pop into Freshbooks you can use a timer on there on the app if you want. If you have an expense snap a photo of the receipt input how much it has. In Canada, I put how much HST was included on that. It's just a great way to manage all of finances around your small business. Check it out. freshbooks comm forward slash syntax, make sure you syntax in the How did you hear about a section? Thanks so much to Freshbooks for sponsoring. - -83 -00:42:15,030 --> 00:42:15,900 -Unknown: Cool. - -84 -00:42:15,980 --> 00:43:33,480 -Wes Bos: Next question we have from Oh, this is gonna be a tough one you got you got a next question is from Bay TGF beta can't noun psidium. Beta can can't noun sing them. I feel like I'm being tricked. It's like as if I'm saying like that, you know that? Like Will you marry me? Yeah, sure. Yeah, they're wearing like headbands. Anyways, thank you, beta. Hi, I'm relatively new to web development. And I feel like it's very difficult to catch up with JavaScript and stop you right there. It is very hard. We all feel like that. Next question. It seems like whenever I try to contribute an open source, I can't figure out the code because they're using newer and presumably better ways of doing things. How can I get up to date with everything that's going on in the JavaScript world? Also, at what point? Should I start learning a front end framework? I love your podcast and have listened to almost the entire backlog. And I found you three weeks ago. Oh, wow. Wait, so three weeks ago, and there's this is Episode 244. So if half of those are an hour long, that's, like 70 hours of content they listen to good job. - -85 -00:43:33,480 --> 00:43:34,650 -Unknown: Yeah. - -86 -00:43:34,770 --> 00:45:11,130 -Wes Bos: So how do you how do you keep up to date? That's quite honestly, one of the the hopes of this podcast is that you don't necessarily have to keep up with absolutely everything. Because it's, it's impossible. And what you need to do is you need to first It sounds like you're learning the fundamentals, which is exactly what you should do. And then you need to latch on to your small area of something and get really, really good at it and become an expert in that one area. So whether that is like a front end framework sounds like you're in a good spot for picking up a front end framework, whether that's spelt or react or view, you can likely make your decision because he's listened to every podcast here. And just just focus on that just focus on getting really good. I'll use react and react. And then and then you can start to expand your horizons. And once you're comfortable with that, either add on to that maybe look into a little bit of serverless function, maybe look into a styling framework, something like that, or switch to another framework and see how he liked that thing. So really, that and copious amounts of time being being at this for I don't know like how long have you been a web developer Scott like 1015 years longer, longer a long time. We've been at this for a long time. And Scott and I are only really confident in a slim of the JavaScript world. And then we also know that we have good, good fundamental JavaScript skills. And we know that we'll be able to pick up other frameworks should we want to or need to. - -87 -00:45:11,580 --> 00:46:33,630 -Scott Tolinski: Yeah. And that's really the key is that you can't, so don't don't feel bad about that. You can't. There's so many times I open up both open source projects. And I'm like, Well, why are they doing this this way? I don't even know I'm gonna leave. Because I'm uncomfortable. But no, I think there's just too many things here, whether it's new techniques, or whatever. But sometimes I think it depends on what your state of mind is, right? Now, if you look at an open source project, and you don't have the time to really dive in, you could say, Alright, see you later. But if you are in a curious mood, I found that open source code is some of the best ways to learn new techniques, new skills, and dive into how other people do things. Other people do things, it's not always better, sometimes just different. I was wanting to take a project that existed, and I was gonna adapt most the code to my own functionality. And they were using like, so Okay, let to be less vague about this, there was a reactive video player that exists, that's open source, and I needed a video player. But I didn't want to write mine from scratch entirely, or at least I wasn't quite sure exactly everything I needed. So I started diving into this one. And I found it was really neat. But they were using Redux for a video player. This is like, why do you need an action to be called to do this to do that, to do that, just to do play on a video player? So I oh my gosh, - -88 -00:46:33,630 --> 00:46:34,320 -Wes Bos: yeah, - -89 -00:46:34,350 --> 00:47:00,930 -Scott Tolinski: I just think you'd like, Am I missing something? Or why is this so over engineered? And it just just did a different approach? Honestly, I would say is it worse or broke? But it's a different approach? It's totally valid as long as it works. So, you know, don't always feel like everybody's approach is better, but it could be an interesting way to learn something sometimes. Okay, next question is from page neigbouring. House. nail the thank you page for the - -90 -00:47:01,290 --> 00:47:03,900 -Wes Bos: no or no, she phonetic? Yeah, - -91 -00:47:04,050 --> 00:49:29,550 -Scott Tolinski: I didn't think I was any. No, she did. I got pulled that out. I am good reader. No. Okay. Okay. So hey, Wes. And Scott, I can have your podcast, keep up the great work. Thank You page, I had a question about custom hooks in react, my team and I are starting to write pretty complicated custom hooks, gathering data from a number of different endpoints and pulling the certain endpoints on a continuous interval timer, before returning it to the component that needs the data. Since this is the case, some hooks have gotten fairly large, with multiple functions inside of them getting called to get manipulate all of the data, multiple hooks using the same functions to get slightly different data. Is it the best practice to keep all the hooks together in one file? Or should we break the hooks into separate files and move the helper functions into another file, just to have one hook per file? Whoo. So I just did a course on custom hooks. I'm not by all means the authority on the subject. But I have done quite a bit of work in custom hooks in the way I see it is I create custom hooks. And then if I notice that it's getting difficult to parse difficult to understand, I might break some of that functionality into another custom hook and use that custom hook within a custom hook custom exception. You know, I've used a custom hook within a custom hook within a custom hook before, or context within a custom hook in whatever. And I found that keeping things organized is occasionally difficult. But if you can break things out into, you know what makes sense into their chunks, they're they're usable chunks, then that's fine. And just like react components, I find, I find custom hooks to be very analogous to react components. But just for functionality, right, you could have a giant, giant custom hook. But it makes more sense for all that stuff to be together based on its functionality, just like you could have a giant react component that makes sense for it all to be together. Or you can make many smaller ones that all work in coordination. And both of those approaches are valid, it all just depends on the use case. And some of it is going to come down to your personal experience. So there's no hard and fast rules that say, Okay, this is going to need to be a custom hook here. And this another one here. But I have used a custom hook within a custom hook within a custom hook. And sometimes that's perfect. And other times I have a giant custom hook. So again, it's all about experience. And just like just like you get the feel for when you should break a new react component, you will get the feel for when you need more custom hooks. - -92 -00:49:29,940 --> 00:50:37,950 -Wes Bos: Yeah, I'll speak to like, should they go in their own files, I'll just tell you what I do. So when I write a custom hook, it's generally I'm working on a component and I go, Oh, I need to do something. So I'm what I do is I just go above that component and I write the hook. Yep. Then I will often find myself needing that hook in another component. And if that's the case, I move it out of that components file into its own file. I do the same thing for styles. I'll often write the styles in the same file, as component and then as I need to reuse that, I will throw it into its own file, because it's now used by multiple different files. And then the third thing is you said you have a lot of utils that are used inside the hooks, absolutely put those into their own file that makes testing those utilities very easy because they're nice clean export functions from that file. And it's not if it's not something that is entirely related to that hook. And it's used again, in multiple functions, then put it in its own file, so on an as needed basis, but absolutely don't feel afraid to put them in their their own files. Yeah, - -93 -00:50:37,980 --> 00:51:09,270 -Scott Tolinski: I have a whole folder with all of my custom hooks if they're used globally throughout the site. And it is like one hook per file. And if I do need a custom hook, that's like, just for a specific section of my website, I'll throw it in that feature folder just as like, here's the like, let's say I have the checkout. And I have a custom hook that's used checkout that use checkout hook is only being used for the checkout, that things go on right in that checkout feature folder rather than my general hooks folder. It's just going to be used checkout.ts Oh, yeah, that's largely how I think about it. - -94 -00:51:09,840 --> 00:51:48,150 -Wes Bos: Next question we have here from Jared any tips for navigating projects with bad project managers, working with a non technical agency project managers is really difficult to plan and allocate time to ensure all the projects are done on time on budget. And well, it's important to me to maintain an optimistic attitude in the organization. But sometimes I'd love to just hit him with the old peace out and go smoke, smoke some pork, but let me tell you as someone who quite quite frequently pieces out and goes to smoke support, but let me tell you, that is a good a good way of life. Wonder if you have any good experience, sometimes - -95 -00:51:48,150 --> 00:51:53,400 -Scott Tolinski: you gotta go on smokes import. But But that means something different here in Colorado. - -96 -00:51:54,690 --> 00:53:38,910 -Wes Bos: Everything in Colorado soon means something a little different. Wondering if you guys have any good experience managing these types of projects. Yes, these these types of projects are so draining, because not only are you trying to technically solve the problems, you are playing the role of trying to budget time and maybe even money in that case. And if you don't really know if it's unclear as to what needs to be done, or if the project is messy, or all is the person like I've talked to like working with project managers in the past where they send you emails at all hours, they love meetings, love having calls, things like that. And that just just drains you mentally and pulls you away from from doing the work that you're supposed to be doing. So how do you do it is you really have to train the project manager? Yeah, if you hit them on the nose and say, No, no, you You got it, you got to train them that you are not like, it's very clear to you that you know how to how to gauge how much time it is if they supply you with the right thing. So just letting them know upfront. If you don't have all the information, if things are messy, if you don't get stuff on time, if we have too many meetings, things like that, then then things need to get pushed. So you almost have to be a bit aggressive, I would say is the word that you use for this type of thing, because everyone wants to be nice. And like you said, you want to be optimistic about these things. But in order for you to make it look like you did a good job, you need to be very aggressive with the type of person who you might be dealing with there. - -97 -00:53:39,390 --> 00:57:38,820 -Scott Tolinski: Yeah, it's all a tough balance. It's funny, I'm gonna send this to my brother, he's he's recently gotten a job as a project manager now. So he needs to learn some of the stuff about working with developers, because it's so funny. He now talks about like developers, it's like he's never worked with developers before. He used to be logistics for truckers. So he's used to talking to truckers, and now he's talking to developers, he's talking to, I can't trust this developer in a meeting, I can't do this at this. It's so funny to get the opposite side of the coin, because I've worked with so many project managers, and the best project managers were the ones who really understood the timelines, let me do my thing. And knew when I was capable of meeting with the client, myself or whatever, there are some, there are some project managers who are just super aloof, and there's not a whole lot of things you can do because they are at some agencies, they are the barrier between you and the client. And if the client is unhappy with the timeline, and you have all of your stuff done, that's not going to look bad on you, that's going to look bad on the project manager. I had one project manager. This project had been going on for several months. And they were just like, so what's the status of this project? And I said, I finished it two months ago, and I hit told you and I said the email and you asked me about it two weeks later, and I send you the email saying it's finished. Here it is, and then they're like, oh, We'll set up the training now. And that's like, some project managers just don't get it. Sometimes Sometimes they're just not good at their job. And you as long as you have the email chains, and you have the the receipts to show that you're doing your job effectively, you know, just sometimes it's out of your hands. It depends on how much control you have over the situation, and how much you're able to actually manipulate the timelines and the budgets and things like that. It's sometimes the project managers are just not going to be there for you. So you just do your work, do it. Well make sure you have the receipts communicate effectively, and sometimes it's out of your hands after that. So again, those are the those are the big keys, communicate, have receipts, do you work? Alright, last question is from this Steve Polito. Steve says I'm committing often and early. But this means I end up writing the same vague commit messages over and over again. I know the solution to the problem is to just be more verbose, but as the difficult habit to break any advice, okay, I have a simple way that I like to think about a commit messages. For those of you who don't know, if you don't use Git, what Git is a version tracking system that keeps track of all your files, you can think of it like something that saves your your bacon in case you know, the machine crashes or something, you have different versions, it also allows you to branch off different things, try new things and, and not worry about breaking code. So commit messages are a way to describe it to everyone else, including yourself, your future self, what exactly this code contains. So if your commits are vague, then that's telling me that you're not doing any code changes, like what is the commit message supposed to do? Again, it's supposed to tell you what the changes are. And so bug fixes is not a good commit message, because it doesn't tell you what the code changes are. If you have a GitHub issue, include that issue number as Hey, this fixes issue number blah, blah, blah, fixes issue were blank, I like to describe these as this like a starts with a verb in like a so fixes issue where user profile picture was upside down, adds a new image format to this blank does this do this, but it should never ever be something like bug fixes or updates, updates, dependencies, whatever, none of those things are good commit messages, because they don't tell you what the actual code changes, the most important things is describe what changed your future self, your other developers, everybody else will thank you for it. - -98 -00:57:39,360 --> 00:58:55,830 -Wes Bos: My tip here is to squash your commits before you send a pull request to master or merge into master. So when I work on a team, my flow would be just commit, I don't know, like a couple, six, six or so times a day or a couple times a day. And and be as good as you can, like you said, but it's a problem to think about good commit messages every single time, especially when you're just doing the same thing on three or four different commits. So what I would do is I would commit for the day. And then once I'm done a feature, I would squash those commits, which is just just Google whatever the command is for squash, and that will open up a list of all of your commits. And you can cherry pick which ones you want to be squashed into the other one. And then you can write a new commit message for all of that. That's very descriptive include issue numbers or ticket numbers, things like that. And then that's all done on your own branch. And then when you send your pro request that goes through to as a nice single tidy commit. Yes, just don't squash commits after you've pushed a master because then then you get into rebase. How it's awful. I've been there. - -99 -00:58:56,640 --> 00:58:59,250 -Scott Tolinski: Yeah, get Hell is one of the worst kind of health to be in. - -100 -00:58:59,729 --> 00:59:06,090 -Wes Bos: Totally. Let's move on to some sick picks. You have a sick pick Scott. Oh, - -101 -00:59:06,090 --> 00:59:28,830 -Scott Tolinski: I am stumped for a sick pack this week. I do not know. So what I am going to sick pick is a YouTube channel that I have picked before in the past. And I think I've even maybe picked this really recently but I still love this YouTube channel. I watch it all the time. So this is the gels marble runs for those of us who are needing some - -102 -00:59:28,859 --> 00:59:30,990 -Wes Bos: Oh, is it back? It's back? Yes. - -103 -00:59:30,990 --> 01:00:41,190 -Scott Tolinski: So last time. Last time I picked this this YouTube channel conveniently got like he accidentally deleted all of his videos or something like the day I think he goofed it up himself. I think he was he accidentally delete your entire you he was trying to do something and YouTube had to step in and I don't know if he had to recreate it or whatever. Either way gels marble runs is a YouTube channel where my marbles he races marbles, but he does it in a way that he pretends that they're like skating. sports teams, and there's actual teams with, he names them all. It's very cute. It's very fun. And it's very addicting. If you have if you're needing like sports in your life right now, which you know, I like sports, I'm a sports fan. I put these out. And they're also very, they're very, very kid friendly. They're very innocent in a lot of ways. So they're fantastic. They're a lot of fun to watch. And you know what, you end up becoming a fan of various Bramble teams, and then you end up hating other Marvel teams for no reason, just like you do in real sports. And so it's it's a, it's a blast, I highly recommend watching some of this. And if it sounds ridiculous to you put on one of these videos. And who knows, maybe you'll just find yourself rooting for one of these marble teams. - -104 -01:00:43,140 --> 01:01:29,850 -Wes Bos: I'm going to sic pick a tool, Scott. We pick pick tools for our weekend projects every now and then. And I'm just getting done with installing a bunch of pine paneling in in a shed that I'm turning into an office. And in order to install this stuff you need like a nail gun and a compressor. And that stuff's kind of expensive, especially because like I'm not, I'm not going to be using this all that often. Although I know a couple times a year I have to go go borrow my dad's nail gun. So now I have one and I bought this little kit that was dirt cheap. And I'm going to tell you how to make it better. So this is hilariously who makes his hudon Hyundai high end by the car company Hyundai. Hyundai Hyundai. They had a commercial always soon. They had a commercial that was - -105 -01:01:29,879 --> 01:01:31,800 -Scott Tolinski: a Hyundai like Sunday. - -106 -01:01:32,190 --> 01:01:34,890 -Wes Bos: Hyundai Oh yeah, I always say hi. And I - -107 -01:01:34,920 --> 01:01:39,060 -Scott Tolinski: yeah, they had a commercial. That's how you say it here in the States. So Hyundai, Hyundai, - -108 -01:01:39,510 --> 01:02:45,630 -Wes Bos: Hyundai, okay. So they, I guess make tools as well. And I bought this like dirt cheap, little two gallon air compressor and it comes with a nail gun. It's also a staple gun, and it has a bunch of fittings. And it was like 114 bucks Canadian, which is, I don't know, like a ham sandwich in American right now. And I got it. And I turned it on, it started leaking. And I went to the reviews. And I'm like, Oh, this is why people don't like this thing. So it just like took apart all the fittings and I put the Teflon tape on it, which is what you're supposed to use on threads that have air or water. I think water Yeah. on them. So I took apart all the fittings, Teflon taped it, put it put it back together thing worked amazingly well. I shot like 5000 nails through it. And I only jammed out once. So I thought for the price. It's obviously not a professional tool. But for the price. You can't even get a air compressor for how much I paid for this entire kit. Well, so I was I was pretty impressed with it's the Hon di, h, h, C to G and K. - -109 -01:02:46,530 --> 01:02:47,130 -Unknown: Wow. - -110 -01:02:47,520 --> 01:03:05,160 -Wes Bos: Yeah. All right, shamelessly plug all of my courses Wes Bos.com forward slash courses, Use coupon code syntax for 10 bucks off, learn you some JavaScript or some CSS or whatever it is you'd like to learn during this downtime. If you have downtime, I don't have downtime. So - -111 -01:03:07,170 --> 01:03:47,910 -Scott Tolinski: yeah, I'm gonna shamelessly plug level up tutorials.com. And check it out. It's a lot of tutorials there a lot of tutorials. So I make a new tutorial series every single month. It's like a video subscription or it's like a magazine subscription, a new tutorial series every single month. And the latest one is on custom react hooks. So if you're interested in learning all about custom react hooks, head on over to level up tutorials comm forward slash pro sign up for the year and save 50% right now. So thank you so much for watching. And thank you so much for watching. That's what I say at the end of my YouTube videos. I just like went into total Program Mode there. Oh boy. That's all I got. - -112 -01:03:48,480 --> 01:03:54,780 -Wes Bos: Alright, thanks so much for listening. We will catch you on Monday. Peace, peace. - -113 -01:03:56,640 --> 01:04:06,420 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax245.srt b/transcripts/Syntax245.srt deleted file mode 100644 index e775b5968..000000000 --- a/transcripts/Syntax245.srt +++ /dev/null @@ -1,100 +0,0 @@ -1 -00:00:00,359 --> 00:00:02,160 -Unknown: Monday, Monday, Monday, - -2 -00:00:02,219 --> 00:00:07,590 -open wide dev fans yet ready to stuff your face with JavaScript CSS node - -3 -00:00:07,590 --> 00:00:08,820 -module, BBQ Tip - -4 -00:00:09,059 --> 00:00:19,980 -Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA, - -5 -00:00:19,980 --> 00:00:21,660 -Bob, and Scott Taylor. - -6 -00:00:23,610 --> 00:00:24,480 -Totally in ski. - -7 -00:00:25,980 --> 00:00:27,030 -Oh, welcome - -8 -00:00:27,030 --> 00:00:50,040 -Scott Tolinski: to cindex. On this Monday hasty treat, we're going to be talking about JavaScript events, which is definitely a topic that can trip up a ton of people for various reasons. And so hopefully, this is going to be an extremely useful topic for you if you write JavaScript at all. My name is Scott Cohen, schema developer from Denver, Colorado, and with me, as always, is the Wes Bos. - -9 -00:00:50,280 --> 00:05:39,270 -Wes Bos: Hey, everybody, today we are sponsored by Prismic, which is a headless CMS. It has a graph qL API and a REST API. So but the next project that you take on, if you need some sort of back end service for it, check out prismic@prismic.io, you can go in, you create all your content types, you can relate them to each other. And then out on the other end, they'll give you this nice interface for working with your data. And then on the other end, you'll be able to pull that data out with either a REST API or graph qL API, pretty nifty. Check out prismic.io forward slash syntax, they've got a bunch of different starters there, one for view, one for react, they've done this hilarious little landing page that specifically for syntax, so even if you're not interested, and you want to laugh, check out prismic.io for its syntax, they say, so it looks like podcasting. podcast advertising works. Yeah, that's the headline. Love it. Cool. So let's get into it. Um, these are just like sort of a handful of things about JavaScript events that I find are useful to understand how they work. And from my JavaScript 30 course, my beginner JavaScript course, these are things that people say, ah, like, I never totally understood how that worked, or why that worked that way until I until I took it. So I've taken some of my favorite things from that in Oregon, distill it into, I don't know, five or six things you should know about JavaScript events. I love it. So let's get into it. First one we have here is bubbling event bubbling, that's something you hear all the time, it's actually kind of nice, nice thing. It bubbles. So what is event bubbling? Well, when you have an event in JavaScript, so most common would be a click event. When you click on something, that event will bubble up. Meaning that if you have like, let's say, you've got a strong tag, inside of a button inside of a card inside of a nav inside of a web browser inside of the universe in what happens is solidly the multiverse, the gun, when you click on that button, you are inadvertently also clicking on things that are inside that button, as well as things that contain that button. So when you click on something like a strong tag, the event happens on that strong tag. But then what happens is that the event, if nothing happens with that event, it bubbles up to the next level, which is a button. And then if nothing was like listening for that specific event, then it will bubble up to a higher level and keep bubbling up basically saying like, hey, somebody clicked to me, I thought it was the button, but nothing happened. So I'm going to level higher. And if anyone's interested in the fact that I got clicked, I'm sort of doing around right now. Who cares? And that's what that's what event bubbling is meaning that most events in JavaScript clicks, mouse moves, hovers, things like that, they'll happen on a specific element, but they also will happen on on parent elements. Now, conversely, conversely, is that a word on the flip side to that inversely, inversely, you haven't been capturing. So the easiest way I can explain what capturing is, is that events that capture down and bubble up. And what that means is that when an event happens, generally they start at the very lowest element and bubble themselves out playing. We talked about that. But the process of figuring out what got clicked on the way down to that is called capturing. So the way that the browser actually does it is you click on that span, the browser says Oh, they clicked on the window, but they also clicked on HTML. They also clicked on body and they also clicked on four or five divs on the way there and they also clicked on the button. They also clicked on the span inside of that button, so that going from the top down is called capturing When you add an event listener to something, you can specify that you want the event listener to trigger, either on the capture phase, which is top down, or on the bubble phase, which is down up. And almost always, I would say 99.99% of the time you want bubbling. And that's the default. Yeah. If for some reason you wanted to stop the event at a higher level, then you can listen for the event on the capture phase, which is when it comes down, instead of on the way up. So there's just a little option that you can pass your add event listeners that will allow you to hear - -10 -00:05:39,270 --> 00:05:42,360 -Scott Tolinski: is I'm wondering what they use use cases there for that. - -11 -00:05:42,600 --> 00:06:30,390 -Wes Bos: Yeah. So like, if you have like, an event listener on two different things, like let's say, you have a button inside of a, like a widget that is draggable and droppable. Hmm, you might want to listen for like a drag event on the card itself, and stop that from happening before the person actually accidentally click something that is inside of that card. Right? So if that was the case, then you would listen on capture down and then stop that event from happening, which is called prevent default again, and that next huh? And then what happens is that event never gets all the way down to the lower elements in that that causes you from stops you from accidentally clicking something inside of that widget. Interesting. - -12 -00:06:30,390 --> 00:07:07,710 -Scott Tolinski: So do you want to move on to prevent default? Yeah. So I think prevent default might be one of these things that people are familiar with the moment that they start using react, or any front end framework, and they're working with a form, specifically, right? I mean, there's there's all sorts of ways where prevent default comes in handy. But let's say you're working with a form you do on submit, the whole page refreshes. And then you say, Oh, my page refreshed when I submit the form, you Google that? And then people say, Oh, well, you need to take the event and do event dot prevent default, preventing, of course, the default behavior. But do you want to talk a little bit more about prevent default? - -13 -00:07:08,099 --> 00:08:00,770 -Wes Bos: Yeah, well, I think that's pretty much it is that some HTML elements have defaults. When links are clicked, they change the page, when forms are submitted, they get that data to the whatever URL, it has the action on that form. And those are all defaults. That's just functionality that's built into the browser. But if you want it to stop that, for whatever reason, maybe you're putting your own custom functionality into a form submit, like most of us do. And if that's the case, then you just stop the default with event dot prevent default, and that will stop the default from happening. And then it's your job as the developer to step in and, and do the work and make sure that that works like that. Totally. Um, what else we have here the difference between target and current target, you know, the, do you know the difference here, Scott, I always forget it. - -14 -00:08:00,990 --> 00:08:06,240 -Scott Tolinski: I do not, I've only I only use target. Like I never, I've never used current target. - -15 -00:08:06,689 --> 00:10:48,450 -Wes Bos: Yeah, so the difference between target and current target is, current target is what actually got clicked. And target is what you listened for a click on. So the difference there being that if you, let's use a button with like a strong tag inside of that, if you click on a button, you you listen for a click on a button, and then you run a callback, when that got clicked, target would be the button, that's probably what you wanted, right? And then current target is the actual element that got clicked, before that clip bubbled up to the parent element, and then trigger to click on that. So sometimes you need to know did the user click something that was inside of this thing, and then that thing bubbled up, or sometimes you just want to know did they click the button. So most common thing I use current target and target for is event delegation. So sometimes, if you attach an event listener to, let's say, you have a div that's full of seven or eight buttons, and those buttons are being added and removed, as you do things on the page. If you are using target there, then you have to like keep track of the event listeners on every single button that's added and removed, where what you can do is you could just listen for a click on the div that contains all of those buttons. And then every time that div is clicked, you can check if the current target was a button, meaning that you have one event listener on the entire div. And then the target there would be a div. But you can check if the thing that they actually clicked was indeed a button and race and you have one event listener for the entire thing. And that's what's referred to as event delegation, which is pretty nifty. Interesting. Yeah, I use that one a lot because specifically in vanilla JavaScript, You have to like take care of adding and removing event listeners yourself, which is such a pain in the butt. That's why frameworks like react are so nice because you don't have to worry about any of this. But if you're using vanilla JavaScript, you have to add the event listeners and remove them when the element gets removed and such a pain. So actually, React uses this. In react, they actually have one, one event listener on the I think it's the HTML tag. And when a click or any event happens on the HTML tag, it actually delegates it under the hood. That's why react events are called synthetic events, right? Yeah. Because under the hood there, they're using event delegation as well. Apparently, it's it's more performant just have one event listener, and then delegate it out with current target. - -16 -00:10:48,720 --> 00:10:54,240 -Scott Tolinski: Yeah, I know, that's something that's been a bit of a not recently, but in general, a bit of a topic in react land. - -17 -00:10:54,720 --> 00:12:11,520 -Wes Bos: Yeah, yeah. What else do we have here? event is trusted. This is something that I've done before, because we built a whack a mole game in my JavaScript 30. And we also learn how to fake clicks, and fake triggering events in JavaScript. So if you ever want to know if an event was actually fired by a user action, and not a custom dispatched event, then you can check if the is trusted Boolean is set to true or false. So that will tell you does somebody actually click this button? Or did somebody fake a click? Huh, that made it it happened. Interesting. Yeah. And then finally, we have the out of add event listener once of true. So this is an option, you can pass the event listener, where it will unbind itself, it will, it'll remove the event listener after it's called once. So for, I don't have a bunch of ideas off the top of my head. But a lot of times use like when someone clicks a button, do this thing the first time, like fade in this thing, or do an animation and then after that, don't do that every single time that thing does. So you have to remove the event listener. So adding once of true, this is something we had in jQuery for years, it was great. It would just remove itself. And there's there's no cleanup needed there. - -18 -00:12:12,180 --> 00:12:29,010 -Scott Tolinski: These are all things that like I feel like you come across them, when you start working in a lot of vanilla. And the moment Yeah, you're outside of vanilla, you might not hit a lot of these issues or instances. So it's really fascinating, especially as somebody who works primarily in frameworks to learn a little bit more about events. - -19 -00:12:29,580 --> 00:12:53,400 -Wes Bos: Yeah, it's it's good to know like the stuff like under the hood, that's kind of why I wanted to do this, this thing, you might not use it every single day. But it's good to know how it actually is happening. Because certainly react is using this stuff under the hood. But it's, I would say with the exception of the targets and the bubbling. I don't run into a whole lot of these things when you using a framework because they sort of simplify that all for you. - -20 -00:12:53,730 --> 00:12:56,460 -Scott Tolinski: Yeah, cool. Well, do you have anything else on events here? - -21 -00:12:56,460 --> 00:13:07,440 -Wes Bos: And that's all I've got, um, I don't know, if you have other stuff. Make sure you tweet us at syntax FM. And we'd like to hear your little gotchas and neat things that you know about offense. - -22 -00:13:07,500 --> 00:13:11,100 -Scott Tolinski: Yeah, that'd be great. We'll, we'll hit you up with a retweet. - -23 -00:13:11,640 --> 00:13:15,270 -Wes Bos: All right. Thanks for tuning in. Catch you on Wednesday. - -24 -00:13:15,660 --> 00:13:16,110 -Unknown: Please - -25 -00:13:19,110 --> 00:13:28,890 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax246.srt b/transcripts/Syntax246.srt deleted file mode 100644 index bdc57d015..000000000 --- a/transcripts/Syntax246.srt +++ /dev/null @@ -1,428 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:10,560 -development treats out there. strap yourself in and get ready. Here is Scott, ski and Wes Bos. Welcome - -4 -00:00:10,560 --> 00:00:42,960 -Wes Bos: to syntax. This is a podcast with the tastiest web development treats out there. Today we've got a real good one for you. We've got Heather Payne, who I'll talk about in just a second, but runs a very popular boot camp and here to talk about boot camps as well as getting a job especially in the current climate that we're in. today. We are sponsored by two awesome companies Sanity, which is a structure content, CMS, and Sentry which is error and exception tracking. So welcome, Heather Payne, thanks so much for coming on. - -5 -00:00:43,259 --> 00:00:46,110 -Heather Payne: Cool. Thanks for having me. It's great to see you both. - -6 -00:00:46,349 --> 00:00:49,860 -Wes Bos: I'm also Scott Song. Yes. Hey. - -7 -00:00:53,460 --> 00:00:54,119 -Scott Tolinski: I'm here as well. - -8 -00:00:54,119 --> 00:00:55,409 -Wes Bos: How you doing today? Scott? - -9 -00:00:55,409 --> 00:00:59,250 -Scott Tolinski: Do good. Do real good. Just hanging out? Yeah, good. Yeah. - -10 -00:00:59,310 --> 00:01:55,680 -Wes Bos: So I guess I'll start it off here with I'm just gonna introduce Heather as to how I know her and then I'll let her have a second to explain kind of what she does. So I've known Heather for, I don't know, maybe probably eight or nine years now. And we go way back to like I owe Heather a lot for how getting into teaching and stuff like that, because she was initially behind ladies learning code, which I did some weekend stuff with. And then she brought me on when she started hacker you both for boot camp as well as part time classes, which is really cool. And it just got me into into teaching and doing everything that I'm doing right now, which is pretty cool. So Heather is running a boot camp, which is now called Juno, if you hear me talk about hacker you on the podcast, that boot camp is now called Juno. They have a bunch of other stuff as well past the bootcamp. So I'll just give you a second to sort of introduce yourself and anything else you want to say. Sure, - -11 -00:01:55,680 --> 00:03:54,150 -Heather Payne: thanks. It's funny, because like you say that, Wes, but I actually owe you a ton as well. Because I would not have Juno today if it wasn't for like our early partnership working together on that. So like, thank you as well. Awesome. Yeah, so my name is Heather Payne, and I'm the founder and CEO of Juno College of Technology, which as Westside used to be called hacker U. We were founded in 2011. Sorry, we were founded in 2012. So it's Coming up on eight years, which is pretty wild. About, and we are essentially programming bootcamp. So we help people go from being relative beginners to coding to job ready, over a nine week period. And we have a bunch of continuing education courses as well. Other things that we do. I have a team of about 3030 to 35, full time, folks who work at Juno full time, man, yeah, so we've grown a lot. And, you know, we've done some really cool stuff, we have a 12,000 square foot campus in downtown Toronto, which we were just putting the finishing touches on a half a million dollar renovation there, which we're super excited about. And last summer, I was part of Y Combinator. So I flew down to California and participate in Y Combinator for the company. And that was a really interesting experience, too. So over my, you know, eight years, I've gone from, you know, complete startup, we started up with no outside capital at all, and then built it up to 33 employees. And now I've also had the experience of, you know, going to Silicon Valley and talking to investors and that kind of thing. So it's been really interesting. And there's been a lot of really cool experiences. And of course, the latest nivola latest crisis with COVID is just another, you know, really interesting experience to have to figure out how it all works. And I'm excited to chat about that today. Because, you know, what is the role of a boot camp in the COVID-19 crisis? And during a recession? I think that's a really interesting topic that's on a lot of people's minds. - -12 -00:03:54,240 --> 00:03:55,410 -Scott Tolinski: Yeah, absolutely. - -13 -00:03:55,410 --> 00:04:15,030 -Wes Bos: Let's actually just like get into that initially, just like, I'm curious. It seems like you pivoted into online learning really quickly, and maybe easily from the outside, it seems like you're doing a smooth job at it. So like, like, what did you do when you realize, oh, shoot, we need to shut this thing down, at least in person. Mm hmm. - -14 -00:04:15,150 --> 00:07:19,800 -Heather Payne: Yeah. So luckily, there was someone on my team who in early February was like, we got to watch out for this. This is coming for us. And it's going to be very serious. So we had started making sort of contingency plans in early February, and it was always our plan to follow the local school board. So we decided in our plan that like when the school board decides that they're closing their doors, we too will close our doors, and it gave us a really, like clear yes or no to follow, which was helpful because in times like this, it's like hard to know what the right thing to do is, but that rule sort of helped us to see like, Okay, it's time to make a decision because this factor has happened. And so we had a few weeks to prepare for moving everything to online. Prior to this. We were hardcore in person boot camp. You know us because you came there with us, always in person to, it was always about the in person experience. If you ask people on my team, you know, would we ever move our programs online? The resounding answer would have been no, even though, you know, we saw coding boot camps, like lambda school popping up over the last couple years and doing things exclusively online, we really believed in the in person experience. And so it really challenged our identity, I think, to have two things online, but in a sense, like, we didn't even have a chance to think about it and reflect on that too much. Because it was sort of like, okay, we have, you know, a short period of time to make this happen. The bulk of the work really did happen in about a week. And so we you know, decided what stack we're going to use to teach our courses remotely figured out scheduling and all that stuff. And, yeah, the we got the news that the school board was closing on a Thursday, Friday was our last day in the office classes started remote on Saturday. So the whole thing kind of transformed in just a matter of a couple of days. But I've been super, super happy. Like, we will always do live online classes. Now. This is for sure. Part of our Yeah. And I could say that for sure. It's just the opportunity to help people who live outside of just the downtown Toronto area where we're located is so massive, and we really think that we're, you know, the Best Bootcamp in existence. And so to make that available to more people than just people who can afford to live or to choose to live in downtown Toronto, it seems very important. And I think the other thing that's helped us a lot was knowing that, you know, we know what a great bootcamp experience looks like, because we've been doing them for years and years and years. And so for us, it was about replicating that in person experience online as much as we can. And I think that's one thing that made it so great, we know what it needs to be like to be great. And we were able to use that as our kind of metric. And then my team has just been so amazing. The involvement that I've had in moving the bootcamp online has actually been extremely minimal, which, you know, is very exciting for me as a CEO, there's a lot of things to figure out in a in a time of crisis like this. And the fact that, like, my programs team and my curriculum team, are just, they just totally handled it and moved everything online. It's been super inspiring to see how my team has has reacted to all of this. Hmm, - -15 -00:07:19,950 --> 00:07:51,020 -Wes Bos: that's really interesting. I always tell people that part of the reason why I think people like the way that I teach is because I did it in person for so long. And I'm able to take that stuff that I've learned in person and and move that online. That's cool to hear you kind of say the same thing as like, you've obviously had, like eight years of sitting beside somebody with their laptop, trying to figure a bug out and you sort of the instructors learn what to say online as well, I guess. Totally. - -16 -00:07:51,060 --> 00:07:51,900 -Heather Payne: That's exactly it. - -17 -00:07:51,900 --> 00:08:18,210 -Wes Bos: Let's talk about boot camp. I want to know what you're teaching right now. Because like when I was when we started it up, we did. WordPress, SAS, jQuery. And yeah, just JavaScript. And I think that has changed quite a bit since then, like, what is the current bootcamp? What do you learn in and how long is it? Is it still nine weeks? Yeah, - -18 -00:08:18,360 --> 00:09:07,549 -Heather Payne: so we've stuck with nine weeks, we are finding that it is taking a bit longer to get through lessons now that they're online versus when they were in person. So haven't made any official decisions about that yet, but it's something that I've just heard a little bit about more monitoring that closely. But as yet, still a nine week program we have shortened to the HTML CSS portion of it. So it used to be three weeks when we were first working together, Wes, and now it's like a week and a half, two weeks. Yeah, I would say and then we're largely a JavaScript program. So we cover JavaScript and jQuery. And then we also get into react at the end. And they still work with API's. And we still do some tooling stuff. So it's evolved quite a bit. I think we've been doing react now for about I think it's two years that we've been doing react. So that's been part of the stack for a while. - -19 -00:09:07,710 --> 00:09:09,169 -Unknown: super interesting. Awesome. - -20 -00:09:09,169 --> 00:09:35,779 -Scott Tolinski: Yeah. So I'm really interested in in how you validate the the like the topics. So obviously, a lot of this stuff like react in the tooling there. There are things that are very, I don't know, prominent in our industry right now. But what's the process of taking a technology and knowing that it's, like appropriate to be teaching now in this boot camp as like a core concept? Hmm. How do you how do you decide like, okay, now's the time to add react. - -21 -00:09:35,880 --> 00:09:39,690 -Wes Bos: Yeah. Is that like, based on like hiring after the fact or? Yeah, so - -22 -00:09:39,690 --> 00:12:57,120 -Heather Payne: first of all, when Wes and I were first making the boot camp, we just guessed. And there was a lot of room for that. Back in 2014, because boot camps are very new. And so there was a lot of room just to put it out there and see what works. And then you know, the cool thing, I think one of the coolest things about running a boot camp is the chance that you get to do so. So much iteration, you know, the program is only nine weeks long. And so every time we run a boot camp, we're always changing something not too much, because you don't want to, like, you know, ruin the whole thing or whatever. But you can definitely do a couple experiments every single time. And then you see what works and what doesn't work. And then you keep building on top of those experiments. So we have a real like iteration vibe or real experimentation vibe in the company. And I would say, people largely are like down to try something new. And then we just compare that to how things went in the past and see how it how it works. So like the biggest change happened a few years ago, when we switched from WordPress to react. And this was partially because our grads, you know, when we started the boot camp, we didn't know that people would actually be able to get jobs out of the boot camp that was like, that sounded really cool. But it was 2014. And boot camps were new, and we just didn't know that that would be possible. And so we were preparing people for freelance jobs, we really pitched it as like, get a job as a freelancer come learn from Wes. And people came for that for a long time. But then we started noticing that people were getting jobs. And by like cohort two, or three or four that was like, yeah, pretty reliable, that you could get a job out of the program. And so, you know, we stuck with WordPress for a bit. But then once we made the call that we actually did not want people to become freelancers, we decided at some point a couple years ago that this is a job Transformation Program. And so if your goal isn't to get a job, as a developer, we don't think that this is the right program for you. We liked it because it just makes us more accountable. Like if someone becomes a freelancer, is that success, you know, as a freelancer, you can struggle along making 20 grand a year, or you can, you know, obviously do way, way better than that. But it felt a little bit like gray zone for us, for us to know if we did our job or not. Yeah, versus if someone gets a full time job. As a developer, you're like, Okay, we did our job. So the switch to react kind of went along with that, because WordPress is not the right thing to learn if you're looking to get a job as a developer, in a company, in most cases. And then now in terms of how we make those decisions, I mean, we track our placement rates obsessively. We have an outcomes team, which I actually run in the company, and we have really talented Career Services Manager and crew Support Specialist on that team. And like every single like we're in touch with every single student every single week, we're doing one on ones, we're doing mock interviews, we're doing resume reviews. And so we know if a cohort is getting jobs slower than a recent cohort, or getting in faster than a recent cohort, and we can use that data to make decisions around is a change needed. We'll also talk to people who interview or grads and find out why did you not hire them? And if it's a technical reason, like we want to know that and we pass that over to the curriculum team. Yeah. And then ultimately, it's the curriculum team's job to make sure that they're speaking with employers and taking that information from the outcomes team and making decisions from there on like, what to add what to remove, but it's a really iterative process, every single cohort, there's something that's been changed, so you're never going to have the exact same experience as a student who came before you. Cool. - -23 -00:12:57,149 --> 00:13:17,130 -Scott Tolinski: Yeah, I think that's important. Especially, I mean, we all know that everything changes so frequently, that being able to be so agile, not to use the word agile in the way that you know, it's used in this industry, but to be so able to quickly change like how how things are working, I think that's such a huge strength to be able to do that within a boot camp, - -24 -00:13:17,250 --> 00:13:40,890 -Heather Payne: totally. And such a difference between us and the college system, right? Or the university system. Because in a university system, your program is four years long, if you make a change in your one, you don't find out until four years later, when those students graduate, if you actually change their outcomes or not. Versus for us, we can find all of that out within a period of four, four months, you know, or less. So it's, it's pretty cool to be able to move that fast. - -25 -00:13:41,220 --> 00:13:42,210 -Scott Tolinski: Yeah, that's amazing. - -26 -00:13:42,240 --> 00:13:43,649 -Wes Bos: Yeah, no, no kidding. - -27 -00:13:43,710 --> 00:14:24,570 -Scott Tolinski: Yeah, it's funny. I'm a, I'm a board member of the with the technical advisory board for the University of Florida's program. And when they were like talking about their web development program, I just was thinking, well, it's amazing that they're getting people to talk about these things to change them. Because when I was in school at the University of Michigan, the web dev program was just basically the most archaic, awful thing in the entire planet. And I, you know, I took so many classes that I just felt like I learned more in my high school computer web development program than I did it within this college program. So it's just a, such a huge strength to be able to ebb and flow with the the industry as it is. - -28 -00:14:24,899 --> 00:14:54,750 -Wes Bos: I'm curious about like, like, what makes a good bootcamp student because I know you don't just let anybody into into the program, you screen them, you meet with them have a coffee, and you've seen probably what five 600 students go through this and try to get jobs after it. So you know, probably a lot about personality and skills and just the person in general. So like, like, what do you see as someone who's a good fit for a boot camp and someone who will likely get a job when they come out of this thing? Mm hmm. - -29 -00:14:54,779 --> 00:17:12,350 -Heather Payne: Yeah. So I think we have like approximately 1000 boot camp alumni. No. So Quite a bit, a big number. And many of those have, you know, were handpicked for the program by me. Last year, our acceptance rate was 20%. So it is like quite selective in order to get in and not every boot camp, you know, maybe is lucky enough to run things this way. But the way that we've always seen things is, you know, we want to make decisions on admissions, that's going to make sure that we're still around in 10 years, or 20 years, or 30 years down the road. And it's easy for us to make those decisions, because we don't have a VC backing us or anything like that. I mean, I did go to Y Combinator, and I did raise a bit of money from friends and family afterwards. But for the most part, this is my business that, you know, I'm the only director, I'm the only shareholder. So I'm making decisions that are going to make sure that this business is around for the long term. And it's meant that we can decide to grow as fast as we think we should grow. And then some years, like, it's not a lot, and in some years, it's a lot. So adulthood kind of depends on our capability. But what it meant is that, you know, for the past six years, essentially, we would run four cohorts a year. And when we first started, they were 25 students each, and we've grown that number over the years to cohorts of 40. But we've been pretty consistent with the size because we wanted to have the highest quality students joining us. And so that's sort of where that admission percentage comes from. But in terms of like what we've seen, so I mean, one thing that's really cool about you know, is that our student body is about 50%, female identifying and 50% male identifying, and actually have a lot of non binary students as well. So I shouldn't even say that those exact numbers. It's a really cool and diverse student body, which I love. And we bring people from all walks of life, which is really cool. The industries that people tend to come to us the most from, I would say, retail restaurant, we have a lot of musicians, a lot of artists, we've had quite a few flight attendants. There was a time when we had a ton of journalists, which is cool, because those journalists are now actually working in the in media companies, but in the developer side of things across Canada, which is really, really awesome. - -30 -00:17:12,389 --> 00:17:14,280 -Wes Bos: Yeah, love seeing that. - -31 -00:17:14,300 --> 00:19:15,390 -Heather Payne: Yeah, it's super cool. So those are some of the really popular ones. And what's really interesting about this industry is that I just shared is that those are some of the industries being hardest hit by the COVID-19 crisis. You know, restaurant and retail are being obliterated right now. musicians are having a really hard time flight attendants, hospitality workers are all being Well, yeah, you're right. We've always served people coming from those industries, which is why I feel that our role in the COVID-19 pandemic is to continue to serve those those people from those industries, they are going to need to switch into new jobs soon. And probably they want to, because they, they want to move on to something new. And so we'll still be here for those folks. But what we see I mean, typical age range tends to be you know, 25 to 40, I would say, typically, people would be making, and there's of course exceptions to everything that I'm about to say. But this is just some some generalizations, people typically would be making less than 50 k in their job prior to coming to Juneau. And our average salary starting out after Juno's is around 56,000 on average or so. So, you know, you're probably coming to Juneau, if you're making less than that right now. And that's when it kind of makes sense for you. And then we just find like people who come to Juneau, a common thread is that they just don't want to settle for whatever job they were in before. So you know, people who worked in restaurants through your retail industry, they oftentimes almost everyone that comes to Juneau did do some post secondary education, whether they went to college or university, whether they finished it or not, they they usually did some. And then they just didn't, it didn't get them the job that they wanted, they didn't get to where they needed to be, instead of settling and just accepting that they decided to, you know, apply to Juneau and come and go through this really tough nine weeks experience and go through a tough job find and come out the other end as a developer. So there's a real thread there of people, like not being willing to settle. And I think that's what makes our alumni community so cool and magical is that they all have this like thirst for more like deep within them. - -32 -00:19:15,719 --> 00:19:16,410 -Wes Bos: Yeah. - -33 -00:19:16,709 --> 00:19:37,950 -Scott Tolinski: So that's super cool. And it turns out, if Bootcamp, developers are needing some place to host their data, which we automate simplest data, yeah, sure. You'll probably want to check out one of our sponsors, and that is sanity@sanity.io, which is the structured content CMS for your new headless front end. So do you want to talk a little bit about Sanity? Wes? - -34 -00:19:38,219 --> 00:20:39,510 -Wes Bos: Yeah, if you are building an app, or a website or anything that needs data, and you need a real time back end, with either a graph qL API or they have a really cool syntax language called grok. bra and you need to pull in data into your into whatever app you're working on. Check out Sanity. It's pretty cool. The way that it works is because it's not Not just like login and use their interface, use this thing called sanity studio, that you can host yourself, which means that you've like it comes with like a back end. But you can push a little bit further and code it yourself because it's it's your code that's that's running. So they give you this really nice and it's kind of like WordPress in that in that regard in that like, it's a prebuilt admin tool, but you can drop in your own react components, do your own validation, things like that. It's pretty nifty. Check it out@sanity.io forward slash syntax that's going to get you double the free usage tier. Thanks so much just entity for sponsoring. Cool. - -35 -00:20:39,540 --> 00:21:21,030 -Scott Tolinski: So let's talk about like the post grad experience, right? Is that where you wanted to go next? Wes? Yeah, the post grad is is all about finding that job. And I know there's a lot of, I don't know, with small small colleges, private colleges, all sorts of things with trying to find job rates, like we get, you know, 90% of our boot camp, users finding jobs. And oftentimes, I personally find those to be a little disingenuous, but do you have any sort of metrics or tracking? Or is there any sort of process that you go through with Juneau to really help increase those numbers of people to have success in post boot camp life? - -36 -00:21:21,180 --> 00:21:22,380 -Unknown: Mm hmm. Yeah. So - -37 -00:21:22,380 --> 00:24:19,410 -Heather Payne: yeah, there is a big problem in the industry in terms of being able to compare apples to apples. Because what if our definition at Juno of what employed means is slightly different than a different boot camps definition of it, some boot camps would count a part time job coding as an outcome and some wouldn't. And so first of all, for a long time, we didn't even keep stats we just focused on. And this was my job. Actually, up until March of last year, it was my job to make sure that everybody who graduated from junos boot camp got a job as a developer. And we actually didn't even keep stats, it was just about like working one on one with those students and making sure that they were really happy. And that's how you know grew was just people spreading the word about us through word of mouth. Then like a couple years ago, it started becoming more important that we like had outcomes reports that we could use to show what our data is. And so we did started creating them. But then I think last year, the year before this organization emerged out of the US called sir, the website is cr.org. And it is the council for integrity in results reporting. Essentially, it's like a nonprofit body that creates a framework for boot camps to use to report on their results. So that you can actually compare apples to apples, when you are deciding which bootcamp you'd like, Oh, yeah, it's really cool. And it really provided the framework that we needed to help us also kind of solidify what we count as, you know, success or what we can as an outcome. So we joined, I think, you know, a year and a half or two years ago, and we've submitted two reports, so far, and we'll continue to keep submitting the reports whenever they're due. And it's just really cool. It's really cool to have a way of saying like, you know, we're doing the right thing, we're being really transparent. Not every single report is up into the right, necessarily, you know, our outcomes do go up and down. And we think that's an important component of being transparent with students is to say, like, you know, this cohort was this, and this one was a bit less, and here's why it was less. And here's what we fixed. And, and, you know, here's what the future looks like, so that you can trust us more. But, you know, internally, we pre COVID, our target was 70% employed by three months, which we have hid and hover around, typically. And then 90% employment by six months after graduation, and our most recent cohort that hit that six month mark before COVID hit, I think they their six month mark was on March 25, we hit 89% 87 or 89%, for that. So those are like realistic numbers for a boot camp. And we we hit those numbers. And, you know, we're not totally sure what the impact of covid is going to be on our placement rates, and they're obviously going to go down, we're going to try and make them go down as little as possible and make them go down less than every other boot camp in the industry just to kind of keep our place as you know, market leading placement rate. But then when we come out of the crisis we'll get we'll get ourselves back up to that 70 to 90% placement rate. - -38 -00:24:19,530 --> 00:24:20,640 -Wes Bos: This is so cool. - -39 -00:24:20,670 --> 00:24:40,140 -Scott Tolinski: I think that goes a long way for trust within the company. Because it is it is there's so many these boot camps that exist and how do you know if you can trust them, and some of them definitely make inflated claims. So it's amazing to have some sort of external body or some sort of transparency policy in mind to really gain that trust. - -40 -00:24:40,470 --> 00:24:55,740 -Wes Bos: You're also showing salaries in here too, which is like 79 people graduated and 1.6% as making over 90 k 52% is in between 50 and 60 k are these in Canadian or are they adjusted? - -41 -00:24:55,770 --> 00:24:57,420 -Heather Payne: I think ours is in Canadian Yeah. - -42 -00:24:57,600 --> 00:25:19,650 -Wes Bos: Okay. Yeah. Wow. That's so cool. This is like a standard. Yeah, I had no idea. You can just look at the data and see like, how many people actually get jobs. I've always been telling people, like, talk to a couple people and read the reviews and stuff like that. But like, this is just hard data. Yeah. as to if you can get in what do you expect for your odds of getting the job? - -43 -00:25:19,710 --> 00:25:20,460 -Unknown: Yeah, right. - -44 -00:25:20,790 --> 00:26:09,240 -Heather Payne: Yeah. And I like the format as well, because it shows what was the graduation rate? You know, so that way, if you're a student, and you're thinking, yeah, there you go, it's like, you can look at the report, you can see, like, I think in our case, depending on what report you're looking at, it's like, either 100% graduation rate, or like 98% graduation rate, or whatever. So you can see like, okay, there's a 98% chance that I'm going to graduate, and then there's a X percent chance that I'm gonna have a job within, you know, three months or six months, or whatever it is, and you can just make a proper ROI decision based on that. Although I still think your point is, is good, you know, when people are asking me for other ways that they should make a decision about which boot camp to join, I always say like, go on LinkedIn, look up the boot camp that you're interested in, and reach out to a few random alumni, you know, not the ones that the school gives you. Yeah, too. But like, Look, look up your own - -45 -00:26:09,270 --> 00:26:12,000 -Wes Bos: toes. That's what I said, like a couple podcasts ago. - -46 -00:26:12,030 --> 00:26:45,120 -Heather Payne: Yeah, you're also and then reach out to them. And I've found in general that like boot camp grads are really happy to share their experience, whether they are happy to share it, because it was awesome, or whether they are happy to share it, because they have some strong criticisms of the program, I think people are really open about sharing that kind of stuff. So you know, this is a big decision, it's a lot of money to go to a boot camp, our program is $12,000. Canadian. And that's, I think, on the cheaper side, in some cases, when you look at boot camps, especially in the US. So it's a big financial decision. And it makes sense that you would take some time to really investigate it properly. - -47 -00:26:45,450 --> 00:27:18,180 -Wes Bos: That's awesome. Let's talk about actually like interviewing for a job. So you guys obviously do a lot on the back end, make sure making sure people get their jobs. How do you prepare somebody for an interview? That's, I get questions about this all the time. Like, do I need to whiteboard and the reality is is like I only ever had like one interview my entire thing. And I think when I talked to you about doing hacker you we just went out for beers like that was like, that was the extent of it right? Like, like, tell us, I have no clue. How do you how do you prepare for an interview as a web developer? Yeah, totally. - -48 -00:27:18,180 --> 00:31:35,640 -Heather Payne: So you know, our approach with the job searching piece of the bootcamp has always been kind of like teach people how to fish rather than like giving them a fish, you know, that whole thing. So we've always been about like supporting a grad with their own job search. Rather than delivering them a job kind of on a silver platter, it's a lot more scalable. And something that I've heard from our grads over the years is that the skills that they learned from us around how to find a job and how to organize their job search are like lifelong skills that they will have forever. So I'll give you some like highlights of our sort of job search process that we that we follow, and some of our like, kind of tips that we have. So first of all, we need everyone to track their job search progress in a spreadsheet. And we've actually recently started exploring like some software solutions for this instead. But ultimately, what it comes down to is like job searches, really frantic. There's like new postings on all kinds of different places. And if you're just sending emails, and not tracking, where you're sending those emails, there's no way that you're going to like, be able to pursue each opportunity properly. And so we create a spreadsheet and our Career Services team shares access to it with them. So we can actually see every single day what jobs the students, the grads are applying to, we've always given like activity targets to our grads. So it's like a certain number of jobs to apply to every single day. And, you know, we find that our most successful grads are able to hit those activity targets. And, you know, in a pre COVID world, it wasn't a big number. It's like, we're asking you to apply to, you know, between two and four job applications per day. And then spend the rest of your time coding, like, that's kind of our recipe for job search success. And those numbers are really important. Because if you're applying to, you know, four job applications a day, that's 20 per week, and we find that, you know, a normal job search, you'll usually hear back from about one in every 10 companies that you apply to, you'll get like a positive response in a phone interview or something like that. And so if you're doing 20 applications a week, that means you're getting two phone interviews every single week. And then that actually is really important for like helping to keep the momentum going. So if every week you have two phone interviews, you're like, Okay, you like bring a little bit of swagger into your like phone interview, because you're like, I know, I have another one tomorrow. And it just kind of like, it really becomes this like upward spiral of like, confidence and success and like, you know, never feeling like everything's on one single opportunity. What happens when people don't apply to enough jobs is like, say you do one application a day. That's five per week. It's going to take you two weeks to hear back one positive thing because that's how long it takes you to do 10 applications. So it's gonna take you two weeks to hear back and then you're like, Like, oh my god, this is a really important interview because I only get one every two weeks and the pressure is on and maybe you don't, you're not yourself because of that. So we really find the like, you know, more important than the interview itself, to me is like nailing the numbers game of, you know, applying to jobs. And then the value that you get from joining a boot camp, is their approach is the same as ours, is like you get someone who's keeping you accountable to that job search, you know, every single week, we're checking in with you, you know, okay, you only did 15 job applications this week, what was the reason is there something blocking you that we can help you with, which actually just helps people achieve those numbers, which makes their job search more successful. And then, in terms of interviews, we've actually been like, quite hands off, typically, back when I was doing like, supporting all the grads, myself, I just said, you know, if you do three interviews, and you don't get it, like three interviews at three different companies, and you don't get a job offer, come see me because we're going to do some interview, like mock interview practice. And I didn't usually have to do much. So we usually found that like, by the time someone does like three interviews, they're usually you know, a lot of the time they they end up getting a job. Now we are doing a practice mock interview with like every single student just to make sure that, you know, in that first interview that they have, they do nail it. But my tips for interviews are largely bring a lot of energy. And I think this applies even more. So now that a lot of interviews are happening remotely, you can both see like, because you can see me and we're on video, you can see how much like animation that I'm bringing to our conversation. And it just makes it more enjoyable experience for the other person. And so, so that's really important. - -49 -00:31:35,640 --> 00:31:36,900 -Wes Bos: I'm enjoying it. Yeah, - -50 -00:31:36,900 --> 00:32:24,450 -Heather Payne: that's really important. I tip that I've always shared with our grads for their interviews is bring like a printed out piece of paper with questions on it, you know that at the end of the interview, they're gonna say, So do you have any questions for us, and there's something that's so professional about like, reaching into your, you know, probably your backpack realistically, and pulling out this like piece of paper that, yeah, you took the time at home to prepare and write and print, it just shows that you're the kind of person who is very thoughtful. So we have a lot of like tips like that, that we share with our grads, as they're going through the job search just to give them like a little edge on the other people who might be searching for a job, that if you're not having someone kind of guide you through your job search process, you're going to miss out on a lot of those kind of tips. So that's part of the value add that you get when you when you join a boot camp. - -51 -00:32:24,720 --> 00:33:03,450 -Scott Tolinski: Yeah, as someone who's been on both sides of the table in the interview process, I can tell you, those little things are such a big difference when somebody comes across your table, especially when you're interviewing, you know, 1020 people, the ones who stand out are the ones who do those little professional things, they write the cover letters, they show up, you know, 15 minutes, or they do all of the the perfect things that you need them to do. And it really makes a big difference. It stands out in a very positive way. So it's really exciting to hear that you guys are emphasizing that those kind of interview techniques in your program. Yeah, and - -52 -00:33:03,450 --> 00:35:19,590 -Heather Payne: here's the thing, like, it's not really fair, you know, like, it actually sucks that we have to encourage our grads to do this kind of stuff. Because if it was like just about skills, then they would get the job without, you know, they get jobs that they're qualified for without having to do all this stuff. But unfortunately, like, that's not how it works. And you're right, like, it does stand out to us. You know, to me, too, when I have an interview and someone does something that goes a little bit above and beyond, I'm like, wow, that, you know, we use that as a signal that they're going to go above and beyond as an employee as well, which is probably true. Like it does probably make sense. But yeah, no, totally thing that we encourage our grads to do. And this is like a slightly controversial one. I've also received quite a bit of feedback over the years of employers not liking this, but we really drill home that are and this is probably more true in COVID-19 era than ever before. We really drill drill home that our grads need to follow up on their job applications. So it is not enough. And maybe this is obvious now. But you know, when we first started, this was not obvious at all, like it is not enough to just submit your application into indeed are through LinkedIn or whatever and like hope that you're going to get magically picked out of a pile, you're probably not going to get magically picked out of a pile of applications. Like it just isn't. And I don't like to rely on luck in my life, you know, and I try and encourage our grads, to not rely on luck, either, like, let's take control of our destinies, you know, in a sense and so, you know, by doing a follow up, you know, three days later, hey, just checking in to see if you, you know, received my application. I'm really excited about the role. You know, it's not a follow up where you're like, Hey, did you check it yet? It's like a it's an opportunity for you to, again, sell yourself on why you're such a great fit for the role and why you'd be so awesome there. So we actually every week are checking in with our grads, you know, did you do your follow ups, the follow ups are key part of the job application process. And again, I wish we didn't have to do it. I wish magically the right person for the job would just magically get picked out of the pile. But that's not realistic. It's not the world we live in. And in a COVID era, there's there's fewer people doing more work. You know, some people that HR has been an area that I've seen a lot of layoffs in. And so there's gonna be less people looking through the same number of job applications looking through more job application. So this stuff just becomes even more important. - -53 -00:35:19,730 --> 00:35:20,460 -Unknown: Ah, - -54 -00:35:20,610 --> 00:35:27,030 -Scott Tolinski: yeah, anything you can do to make us stand out in those positive ways is is a plus in my mind. Absolutely. - -55 -00:35:27,420 --> 00:36:18,330 -Wes Bos: So let's talk about COVID right now. So we're starting to see the effects of much of the economy being closed trickle through two web developer jobs, like event bright, just laid off a couple hundred people, because there's not events going on right now. Right? In North Florida. It's easy to think like, oh, we're web developers, we can work from home. So our jobs are fine. But we're starting to see like, obviously, our job as web developers is to support the world coming online. And if that part of the business is no longer there, then then our jobs start to get in trouble, which is, sucks. So now that web developers are losing their job, there's less jobs out there. What do you say to someone who's coming out of a boot camp when there's this fresh crop of experienced devs? Maybe fending for the same job? Mm hmm. - -56 -00:36:18,360 --> 00:41:21,090 -Heather Payne: Totally. So yeah, we have like a few things that we're keeping in mind for this. First of all, just today in Canada, they announced some support for students and graduates, it's called the Canada emergency student subsidy, I think or something like that. And it means that anyone who graduated school in Canada after December 2019, or anyone who's going to school in the fall, can get 1250 a month, from May through August. So we expect that our grads will be eligible for this. And so and you know, all bootcamp grads in Canada would be eligible for this. And so that's great just to, like ease the pressure a little bit on needing a job right away, it will take longer to find a job. So we are no longer in the, you know, 90%, within six months world, we don't know how long it's going to take to get a job, it's going to take longer, for sure. But this will help a little bit. So I'm feeling really excited about that. And the other thing that we're doing, I mean, we're doing a few things. One, just like more student support, they just need more from us in terms of like even emotional support right now. And so we're like here for that, and we're ready to talk about that kind of stuff. There's also a lot of wage subsidies that are available to employers, some of them already existed before COVID. And some now are being added because of the COVID-19 crisis. And so I actually expect that there will be a lot of wage subsidies to help recent grads, you know, from colleges and universities, but also from boot camps, to land their first jobs in the coming months. Employers love to save money, and especially in this world, you know, where revenues are being cut, because there's not as much consumer demand, the opportunity to use a wage subsidy to hire a recent grad and end up only paying, you know, $10 an hour to that person instead of 20, or 30, or 40, or whatever, that will be really appealing to employers, because senior developers are still going to cost a lot. So you know, for those who are budget constrained, that will be really helpful to them. And then something else that we're looking at is how can we support our grads in like a more broad sense when it comes to employment. So, you know, in the past, we've moved toward, like, we want you to get a full time job, we actually make our grads sign, like a document with before they join, telling us that they will put full time effort when they graduate into finding a full time job, because it was that important to us that everyone kind of have that expectation in mind. But we're now exploring relaxing that a little bit. For the time being, it may make sense for our grads to take on a shorter contract that they might not normally be interested in. But now that would be a good idea for them. Some of them may be interested in taking on freelance projects. And we think that could be a good idea for them in the short term, until more full time opportunities open up. So we're just being a little bit more kind of open minded about it, if you can get to 20 our jobs, that's, you know, the same thing as having a full time job. And so can we pursue things like that, and so we're actually reaching out to employers and pitching them on on that kind of thing. And for companies who have decided to lay off a developer, you know, they're still going to have some dev work to do. And so, you know, maybe we can be there to have them hire one of our grads and have them do it in 20 hours a week or something like that. And it's sort of a win win in that case. But I think ultimately, there's going to be a little bit more, it's going to take longer to get into a job. And so we're focused on how can we make sure that our grads are getting experience of any kind as quickly as possible? And how can we make sure that they're still learning and still improving their skills. And I really see that once. You know, once the economy is opened up, again, no matter how long that takes, and I've no idea how long it's going to be. But once that does start to happen, there's going to be a lot of demand for businesses to bring their businesses online more effectively, because they're going to want to be more more retail. Yeah. So anybody who you know, doesn't currently have a Shopify store, they're scrambling to make one, they're doing it really fast and quick. And at some point, they're gonna want to invest in that and maybe doing it a little bit more properly or doing something a bit more custom. And that's just like one example. So I really think that in the coming years, there's going to be a boom for developers. And it's just this short term period, that's really painful. And so that's why I think it's still a great time to learn and a great time to go back to school. And like I say, you know, those retail workers and restaurant workers, like we want those people to come to us now. And, and yes, it'll still be, you know, it'll take longer for you to get your job. But then once you're in, and we see this all the time, like, once you graduate from Juneau, and you get your first developer job, like, you're pretty set, like, it's pretty great. And like, just to drive that point home, we were keeping track of our grads who have been laid off, because we want to provide support to them. And so we have a list. And, you know, it sucks to have people who have been laid off, we have 20, who we know of that have been laid off. But that's out of almost 1000 people that are grads of our program. So you know, we're helping those people, we're supporting them, two of them have already gotten jobs again, which is super exciting. And you know, the reality is, like, less than 2.5% of our grads have been laid off. As far as we know, once you're in, you're quite resilient. And you know, of course, there's some luck at play. But for the most part, we still think it's a really great idea to become a web developer. - -57 -00:41:21,230 --> 00:42:04,460 -Wes Bos: Yeah, I was just, I was just saying that to somebody the other day how every business needs to go online, like my dad built websites, and he's friends with like, a lot of Dutch people who run greenhouses, and every single one of them is scrambling to get some sort of online pick up inventory system going. And I'm just like, this is a term I hate bricks and clicks. But the bricks and clicks play after this is going to be huge for people who need to bring, like, in the states is pretty good. But in Canada, the whole like, order and the pickup in person. It's kind of there, but it's not nearly as good as, as it is in the States. And I think that that's gonna get really good. Once once we get back there, right? - -58 -00:42:04,500 --> 00:42:28,050 -Scott Tolinski: Yeah, yeah. And even here, I mean, it really kicked up a notch, as everyone's probably seen. Yeah, like, it's like, oh, you want to order some alcohol, you just leave your ID in the window, they drop it on the front part. It's like everything's like really evolved in those directions really, really quickly. So again, once everybody has a chance to breathe, it's going to be Yeah, it's gonna be a rush to really solidify a lot of those systems. - -59 -00:42:28,230 --> 00:43:19,190 -Heather Payne: Yeah. And there's also going to be some major changes to human behavior after all of this, like you can't go through absolutely something like that and not have big changes happen. And when changes happen, new businesses get started. And all of those businesses are going to have an online component, like it's impossible to believe that they will. So I think there's going to be this whole, like, set of new types of businesses that get founded that are all going to need support as well. I forget what podcast I was listening to. But they made the point that like, after world war one came the roaring 20s. And after world war two came the 50s, which was also a really big boom time in history. And so there's some thoughts that like, that's what we're in for once this all gets resolved is like a really big boom time. And, you know, that might not happen. And it's best to prepare for all scenarios. But you know, I think it's, I think there's a pretty good chance that we're going to be in for a really, like, really interesting decade to come once we get past this. - -60 -00:43:19,440 --> 00:43:21,780 -Wes Bos: No, I'm gonna name it the bricks and clicks boom. - -61 -00:43:22,590 --> 00:43:25,610 -Scott Tolinski: Here we go. Yeah. - -62 -00:43:27,660 --> 00:43:33,650 -Wes Bos: Um, what else I want to talk about, are you you still doing income share agreements, right? You just launched that, like - -63 -00:43:33,690 --> 00:46:11,550 -Heather Payne: six months? A year? We it's the one year anniversary last night? Wow. Yeah, so income share agreements are a payment method that started to gain some popularity in like 2018, I first heard about them in December of 2018. Essentially, what it is, is it allows you to not pay up front for your education. And this could be at a college or university or a boot camp, or maybe something else. So you don't pay upfront. But then once you graduate, and you make a certain amount of money, in a salary, you know, or a certain amount of money, whatever, you pay back a percentage of your income for a certain number of months. So just to illustrate how ours work, our upfront tuition is $12,000. But you could take an income share agreement, which means you just pay $1 upfront, and we have to charge $1 because it we need to like have a legally binding contract. And money has to change hands. It's like a government rule because we are like regulated by the government. So you pay $1. And then once you graduate, you pay nothing until you're making 50 K a year or more in a job. And at that point, you pay a 17% of your gross monthly income. And there's a payment cap of 1.5 times our upfront tuition amount. So the most you'd ever pay is 18,000. And the cool thing about this, especially in like COVID time is that if your pay ever drops below 50,000 you stopped paying for that period of time until it goes back. So I did have a grad who took a pay cut at work and their pay dropped below 50,000 and they stopped their payments, so they don't have to Paying right now, which is really cool. And also, if you end up losing your job, or you have to stay home to take care of loved ones, and you don't have any income, your payments pause as well. So it's really, really flexible. The goal is that they will make 24 payments in a five year period. So we have sort of five years to collect these monthly payments. And after five years, no more payments are due. So it's not like debt, where you're kind of stuck with it forever, either. You know, five years is kind of the max that you'll be with something. And even if you haven't finished paying it off, you just don't pay anymore. So it's it's been pretty popular. Cool. You know, when we launched them, we're the first school in Canada to launch income share agreements, I believe, to date, we're still the only one it's been a year, there's a few schools that have sort of called them income share agreements, but they're really more like payment plans then than true income share agreements. And so you know, it was a bit of a slow start in our first cohort where they were available, we had five students who took income share agreements, but the next cohort had 12. So that was really cool. And now we get like way, way more applications than we can afford to fund. We fund them out of our own profits. And we also in the past, have gotten a loan to be able to fund ISS as well. So, you know, for us, there is like a maximum budget that we can put into this, but essentially, we spend all of our profit. - -64 -00:46:11,640 --> 00:46:27,270 -Wes Bos: Oh, yeah, cuz you have to pay your instructors. Yeah. And pay for rent you have to pay for I didn't even think about that. Yeah, you have to like, like, front end all of the stuff, and then also hope that they get a job. Yeah. The fact right, yeah, totally kind of on you. So there's a vested - -65 -00:46:27,270 --> 00:46:28,860 -Scott Tolinski: interest there. Right. - -66 -00:46:28,890 --> 00:48:22,050 -Heather Payne: Yeah, it's very, it's very fun and interesting thing to manage. But essentially, we just give out the number of viruses that we can afford to so you know, for now, we haven't capped at about 10 per cohort. And that allows us to still leave 40 students per cohort. So it allows us to still cover like all of our costs, and then you know, and then we get the money later when they get a job. So, of course, there's a little bit of risk here. Because if people are taking longer to get a job, it's going to take them longer to pay us back. But, you know, because we like just fund this ourselves, that of our own profits doesn't really matter if it takes longer. So that's kind of cool. And then, so the innovation that I wanted to mention, is actually relating to income share agreements. So we're launching this on, okay, April 28, it'll be launched. So by the time everyone hears this, it'll be live already. It's the world's first pay what you can income share agreement. So the idea here is that, you know, previously, you either pay the full $12,000 upfront with cash, or you pay $1, and take a $12,000 iisa. But what we're launching now is the chance to choose so if somebody wants to just pay $3,000, upfront, they can and it means that their payment cap that they end up paying instead of being 18,000 would be end up being less than that. So it's like a really, okay, and what it does for us too, is extend our is a budget. So, you know, you can imagine in the past, I had 10 Isay spots $12,000 each, so I had a budget of $120,000. And I assays that can go a lot farther, if I'm giving out I assays of $6,000, I can help more students, you know, by giving them a bit of a lower ice each. So we're pretty excited about it, we think it's really like innovative and cool and student friendly. So it's launching on the 28th. And you know, if you're listening to this, it's already live. So you know, if you want to go check out, you know, college COMM And then I'm sure on the homepage, somewhere, you'll be able to see something about ISIS, just click on that. And there's a calculator and stuff that you can use to calculate your total investment. - -67 -00:48:22,380 --> 00:49:16,050 -Wes Bos: That's really cool. I, when I first talked to you about the income share agreement, I'm like, Man, that that makes a lot of sense, it seems very fair. And you talk to a lot of people who are sort of outside of it, and their initial reaction is like, you're gonna take part of my salary. And you can like, sort of, like, I'm glad that you can sort of like explain it on the on the podcast as to like how it works is it is a little bit complicated. But I think it's such a cool, especially now that like you can pay whatever you are, whatever, you're able to pay it up front. And then like because because there's a lot of people who I think everybody who goes through the bootcamp, they're like, life has changed, right? Like you change the trajectory of your life, because you've totally moved into this. Like right now. It's an excellent industry to be in. So it's cool that that is not now limited to just people who have the 12 grand up front to pay that. - -68 -00:49:16,410 --> 00:50:22,140 -Heather Payne: Yeah, like 12 grand is a lot to like have in your bank account. And what if you're not lucky enough to be able to borrow it from like friends or family or something like that, like bringing, bringing tech to more people and getting more people into tech is like the whole theme of my life. Like the whole theme of my career. You know, the reason that I started ladies learning code was to bring more women into technology and coding and give them like great early experiences so that they are not turned off from it and that they actually want to pursue it. And like over the past eight years at Juno, you know, the biggest, like, the biggest thing I think we hadn't been able to figure out is like, how to make it so that we have more like socio economic diversity in our programs and we're not there yet. There's still like a long ways to go and you know, even the fact that we We, you know, we require people to have their own laptop, it's like, there's still things that that make it hard. I mean, you know, we have a loaner program and like we, you know, we do everything that we can do as a as a private company, but there's always more. And so this is sort of our, like, latest innovation over the past year of just like bringing more people into this world that we think really deserved to be in this world and should benefit from being in this world. - -69 -00:50:22,620 --> 00:50:24,810 -Scott Tolinski: I think that's a great cap off. - -70 -00:50:25,230 --> 00:50:33,150 -Wes Bos: Yeah. Is there anything else you wanted to say or plug or anything else you want to mention to the audience? Um, - -71 -00:50:33,150 --> 00:51:30,480 -Heather Payne: I guess like one thing that that I'd love to mention, you know, now that our program is live online, we're actually able to serve, like I said, a much broader audience. So if the idea of a coding boot camp has kind of been in your mind, but you haven't been sure, like, which one is right for you, and maybe the ones in your city or not, you're not so excited about them. You can now come to Juneau, which is pretty cool. So if you want to check it out, and see what Juno's like we offer tons of free like three hour, kind of like web dev coding workshops, they're totally free, and gives you a chance to see what our instructors are like and what the classroom format is like, and what live online feels like. So if you go to the homepage, which is Juno college.com, just on the top right corner, you'll see a free online workshops button, you can click on that and sign up. And we'd love to have some more people from across the world. We've had people signing up from different countries already. And I'm just really excited to see what the next few months look like, as we sort of have more people joining us from from anywhere. - -72 -00:51:30,810 --> 00:52:06,840 -Wes Bos: Awesome. Yeah, I get people all the time asking me like, Hey, I don't want to just do your course I need something more structured, I need something more involved and like, what should I take? And I'm like, I don't really know, like, if you're in Toronto, or you want to come to Toronto, then go to Juneau. But other than that, I don't totally know. It's awesome that I can point people to because I think another big thing about boot camps that we didn't talk about is that like, the how good it is, is very much dependent on the curriculum, and the people that are teaching it to you. Those are probably by far the two most important things. And I know that both of those things are very good at you know, - -73 -00:52:06,930 --> 00:52:50,970 -Heather Payne: yeah. And I think like to that point, to me, it's like, so different when you go to a boot camp that's like owner operated, you know, like, I founded this company, and I work in this business all day, every single day, like this is my life's work. And that's really different than when you join a boot camp that, you know, was backed by VCs and has already been sold. And it's been bought by like a private equity company, like, I don't know, I think it's important to look up like who is the owner? And who's really behind the company that you're going to buy from and, and who do you want to support? You know, and what alumni community Do you want to be part of, I think that stuff really matters. And there's a lot of coding boot camps that are not owned or operated anymore. And I just think being operated is the best. So I always look out for that. - -74 -00:52:51,210 --> 00:52:52,170 -Wes Bos: Absolutely. Yeah, you - -75 -00:52:52,170 --> 00:52:57,330 -Scott Tolinski: want there to be a vested interest you want there to be you know, something at stake. Yeah, for you to succeed. Exactly. - -76 -00:52:57,390 --> 00:53:03,330 -Wes Bos: And this is totally unrelated. But this website is so slick. It's Gatsby, right? - -77 -00:53:03,330 --> 00:53:04,410 -Unknown: Um, - -78 -00:53:04,530 --> 00:53:05,430 -Wes Bos: I mean, look at it. - -79 -00:53:05,460 --> 00:53:06,810 -Heather Payne: I don't think it is. - -80 -00:53:07,050 --> 00:53:08,040 -Wes Bos: I figure it out more, - -81 -00:53:08,250 --> 00:53:10,170 -Heather Payne: isn't it? It is it is Oh, great. - -82 -00:53:10,320 --> 00:53:22,110 -Wes Bos: Well, at least the page I'm on anyways, you want to check out a fast, slick website with a nice design, check out gentle college calm is really nice. I just outed myself. So you guys obviously built this in? Yeah, we did - -83 -00:53:22,110 --> 00:53:38,790 -Heather Payne: build it in house. But I just added myself in terms of my knowledge of coding, which is extremely minimal. And people always find that real. Here. And it's like, one of the questions I get asked by students all the time, they're like, so like, when did you learn to code? And like, what was your most recent project you worked on? - -84 -00:53:38,790 --> 00:53:39,540 -Unknown: And, - -85 -00:53:39,570 --> 00:54:04,380 -Heather Payne: you know, I always share that, like, you know, I was learning how to code my my story is that I started learning how to code in, like, 2009 2010. But as soon as I started ladies learning code, there was so much interest in it that I just switched into the mode of helping other people learn to code. And that's where I've been ever since. So you know, I have some, I have some knowledge, I can be dangerous or whatever. But But mostly, you're gonna want to talk to our instructors, if you want to talk about coding stuff. - -86 -00:54:06,270 --> 00:54:14,250 -Wes Bos: Yeah, I think the very first hacker you website, we had like some HTML fields or something like that. And remember, you could get in there and do it. No problem. - -87 -00:54:14,280 --> 00:54:18,120 -Heather Payne: Yeah, I can do some stuff, but definitely not the best. - -88 -00:54:18,150 --> 00:54:22,140 -Wes Bos: That's funny how to find a job though. You know how to know how to find a job. That's - -89 -00:54:22,140 --> 00:54:24,000 -Unknown: my special expertise. - -90 -00:54:24,360 --> 00:55:39,810 -Scott Tolinski: Now, going through a boot camp is such a great way to make sure that your code gets better and better with professional training. Now, another way that we make sure our code gets better and better is by using a tool to track and log the errors and bugs that happen inevitably within our code. I mean, of course, I don't write code that has bugs but everybody else does. So what you're going to want to do is you're going to head to sentry@sentry.io. That's s E n t r y dot i O, use the coupon code tastytrade. You're gonna To get two months for free, and you're gonna want to see why this error and Exception Handling tool is just so fantastic. It really allows us to see everything that's going on in our application at a glance, fix it, make sure it's fixed and attach it to releases. There's a ton of features for everybody. There's features for the whole team. It's almost like, hey, there's something for the whole family. There's features for the whole team, there's the marketer features, there's the GitHub manager features, and there is all of the developer features the junior developers who's got to go push some quick code fixes for the growth of the team. So check it out, Sentry dot i O. Alright, so - -91 -00:55:39,810 --> 00:56:11,430 -Wes Bos: we're gonna wrap up. The two things we do at the end is one we do this thing called sick pics, where we pick literally anything could be a mug could be anything in your life that you find helpful, whether it's software or physical, good, I should have told you about earlier, you don't have to say anything if you can't think of anything. And then at the end, we do shameless plugs, which is just if you want to plug anything, you can link it off to that. Alright, uh, Heather, do you have a sick pic for us today. - -92 -00:56:12,270 --> 00:56:50,460 -Heather Payne: Um, my sick pick is whereby.com WHER ebay.com. It is the collaboration tool that our team has been using to work remotely together. And it basically gives everyone their own virtual office that is just kind of like available all the time and makes it really easy to pop into other people's offices. And when you're in a meeting with somebody, you can collaborate in a Google Doc together, which is a really, really nice feature. You can see people's faces and you can collaborate at the same time. So an alternative to zoom. It's been really helpful. I don't think we would have been as successful with remote working without this tool. - -93 -00:56:50,670 --> 00:57:01,410 -Wes Bos: That's really cool. I like this a lot. I'm gonna have to try this. I never heard of it. So what are you using for the actual online classes? Are you still using zoom for that? - -94 -00:57:01,650 --> 00:57:03,570 -Heather Payne: Yeah. Zoom is for the classes. Yeah. - -95 -00:57:03,750 --> 00:57:10,740 -Wes Bos: Oh, yeah. And this is just for like working. stand ups, things like that. Sweet. Cool. - -96 -00:57:11,100 --> 00:58:21,060 -Scott Tolinski: So my sick pack is related to a cippic that I've done before, which was my Oh, the size of this was like, like a quart, maybe of cold brew maker was like a giant mason jar with a filter. Well, I have the upgraded two things. This is ridiculous. But I've upgraded to a one gallon cold beer maker, and it has a tap. So it has a tap. It's a giant one gallon glass mason jar with a tap and a filter. you grind up grind up your beans, you put your beans in the water, and then you got to tap you've got your CB all D and this thing's really cool. So this is my sick pack. I really like my cold brew coffee apparently. So check it out. If that sounds like something you'd be interested. It's actually funny when I corny got the message that it was shipped before I told her that I bought it. And she's like, you did not buy this gallon cold brew maker. And I was like I did it's on the way she says, but the ad says it's for parties. We're not hosting any parties. I'm like, this isn't for parties. This is for daily consumption. This is not gonna drink a gallon a day. But oh, man, - -97 -00:58:21,060 --> 00:59:06,210 -Wes Bos: you need to post a photo on your Instagram. I need to see that. Okay, we'll do Oh, and I'm gonna pick something that Scott we were just talking about this earlier. It's I start menu for for the Mac. And it basically puts all the CPU I use it for CPU GPU and upload download, especially because I'm on such a strained network connection here. Up at the cottage, I always need to see like what is using my bandwidth and am I talking it out with whatever's going on right now. So I start menu, it does tons of stuff, but I use it for seeing my upload download really quickly in my in my menu bar. And Scott told me he's been using it for like, what, like nine years and I just got it a couple weeks ago. I've been using it since like 2012 - -98 -00:59:06,230 --> 00:59:08,190 -Scott Tolinski: Yeah. So like, almost 10 years now. - -99 -00:59:08,220 --> 00:59:32,340 -Wes Bos: Yeah, it's crazy. That's great. All right, um, shameless plugs. I'm going to shamelessly plug my new website actually, it went live couple days ago, Wes Bos calm. It's a Gatsby website as well, really happy with with how it looks and how it came out. And if you can see a list of all the different courses that have on on there as well, but take a look. And it's all open source as well, so you can see it on GitHub. - -100 -00:59:32,670 --> 01:00:22,590 -Scott Tolinski: Cool. I'm going to shamelessly plug my latest course, which is on design systems in figma, where we talk about all of the really interesting features that exist, many of which only exists in figma to create these elements that become reusable, expandable components, text sizes, whatever to build a really robust design system. This course is specifically for anybody who might not feel like they have the skills to design something and maybe even develop Who if you get a system in place, then you know you can create something. So this is all about learning how to create those systems rather than like oh, add this border radius here. Add this here to make it look nice, giving you the tools to essentially make yourself a good designer. So head on over to level up tutorials. COMM Ford slash pro sign up for the year save 50% right now. Yeah. - -101 -01:00:22,950 --> 01:00:26,190 -Wes Bos: Awesome. Heather, do you have anything else to shamelessly plug? - -102 -01:00:26,190 --> 01:00:27,030 -Unknown: Yeah, I'm - -103 -01:00:27,030 --> 01:00:58,860 -Heather Payne: gonna shamelessly plug. The fact that we're we're not just a bootcamp, Gino has a whole bunch of continuing education courses, which are all now available live online as well. So you could take them from anywhere in the world. But we've got you know, web development, JavaScript full stack. UX data science is one of our newest ones. So if you're interested in learning something kind of like twice a week in the evening or once a week on the weekend. Check those out, because they're really cool. So junior college COMM And you'll see in there like a bunch of different courses you could take. Awesome. - -104 -01:00:59,040 --> 01:01:09,870 -Wes Bos: Sweet, thank you so much for coming on. That was really fun. We get questions about boot camps and finding jobs all the time. And it's fun to have you on and to talk about it. So thank you so much. Well, thanks - -105 -01:01:09,870 --> 01:01:14,730 -Heather Payne: for having me. This was really fun. Great to see you after so long with us and really nice to meet you too, Scott. - -106 -01:01:14,730 --> 01:01:20,130 -Wes Bos: Yeah. Likewise. Alright, thanks, everybody. Thank you. - -107 -01:01:22,890 --> 01:01:32,640 -Scott Tolinski: Head on over to syntax.fm for your full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax247.srt b/transcripts/Syntax247.srt deleted file mode 100644 index 0cba45b56..000000000 --- a/transcripts/Syntax247.srt +++ /dev/null @@ -1,208 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Unknown: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. - -2 -00:00:23,579 --> 00:00:24,480 -Totally in ski. - -3 -00:00:26,910 --> 00:01:52,680 -Scott Tolinski: Welcome to syntax in this Monday tasty treat, we're all going to be talking about Wess brand new website. The last time this websites are refresh was sometime in 2014. So we're going to dive into all of the ideas and interesting things that Wes did with his new website. And we're going to be exploring some of the choices that he made, and why he chose to do things his way. My name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me, as always is the US boss. Hey, everybody. Hey, Wes. This episode is sponsored by Sentry. Now sentry@sentry.io is the amazing error handling and exception tracking tool that you really need in your project. In fact, you're gonna want to head over to sentry.io use the coupon code, tasty treats all lowercase all one word, you're going to get two months for free. Let me tell you, it's really easy to just drop in Sentry in your project and see it up and running in no time at track those errors and exceptions I've been using Sentry personally, for a long time, and m are really, really into it. I just absolutely love this platform. And I wouldn't have it any other way for browsing and keeping track of the errors and bugs that are in my site. So thank you so much for Sentry for sponsoring now, Wes, this new website is at Wes bos.com. Didn't you used to have another different URL? Or am I tripping here? - -4 -00:01:53,100 --> 00:01:54,630 -Wes Bos: No, I've never had it - -5 -00:01:54,660 --> 00:01:57,660 -Scott Tolinski: once you get like boss dot F boss dot F. - -6 -00:01:58,020 --> 00:02:00,660 -Wes Bos: Boss that f is where I sell stickers. - -7 -00:02:00,810 --> 00:02:03,300 -Scott Tolinski: Oh, yes. - -8 -00:02:03,600 --> 00:05:53,520 -Wes Bos: Yeah, yeah, no, I've been on Wes Bos calm since March of 2004. I remember asking for a domain name for my birthday. My birthday was in February, late February. So I've been I've been on there for 16 years, it's I've been on what's common. It's obviously seen many iterations of personal website over the years probably, I don't know, five or six different website designs. And my last one was built on WordPress, for actually my last couple that were built on WordPress, I probably was WordPress for about 10 years. And I had a setup with WordPress, I had lots of advanced custom fields, I use less for styling. And there wasn't a whole lot of custom JavaScript. But for a lot of that I did have jQuery on that. So that was the existing stack, the the website was getting kind of slow. One huge pain point I had was anytime I would link to it in an email, I'm hosted on Bluehost, which we all know is my favorite hosting company ever. And they auto scale their servers, which is great, but there's like a five minute delay when traffic spikes to when it auto scales. So I would email out to 300,000 people, hey, here's here's a link to my website, and it will crash my server. And then it will come back up after five minutes because they would scale the server which is great. But the in that five minutes, how many thousands of emails do I get your website is down, which was frustrating. And obviously that was my own fault. Like I should get a better server. But I just didn't feel like moving it on over. I thought about keeping it on WordPress because I like the admin for all of my blog posts and everything. But what I ended up doing is saying I want to move all my content to GitHub and have it editable by the community at large, like already have had the site live for less than a day. And I've already received nine or 10 different pull requests of spelling mistakes, corrections, updating things. There was like somebody was reading like a two year old blog post and there was a little there was a mistake in there and they just they fix it themselves. And it's really cool to be able to have that open to the world. So my stack that I chose was Gatsby j s I'll talk about that a little bit more in just a sec style components, and react and MDX. I'll talk about all these in just a sec. But that's the stack I chose. And I've been working over over the last year or so kind of just poking away at it here or there. I sort of settled on the design about six months ago and that's where I was like Alright, next time I have some, I don't know about a week of time, I'm going to really double down and finish this thing on up. So what I thought I would do is just kind of go through the different parts of the stack why I chose it and and why I didn't I did also write a blog post similar to this So go to Wes Bos comm click on the blog, and you'll see it up there. So the stack Gatsby, it's static site generated, meaning that it generates the HTML beforehand. But it's also made a made in react so that after the initial page loads, just HTML and CSS, the React framework loads, and then it picks it up from there, meaning it sort of hydrates it. And then it's a full blown react application. I didn't go for next j. s, that's probably the most common question I get. Because when I started it Next, Jess was more for like applications. They've since changed that they now have a bunch of lifecycle methods for working with statically generated, which I think is the best way to do it. Because you can opt into statically generating page by page instead of like, Gatsby is your all in on everything is statically generated, - -9 -00:05:53,909 --> 00:06:07,200 -Scott Tolinski: right? Or it's dynamic. There wouldn't be like a server side rendered version, because there's no node instance in Gatsby, at least, right? Yeah. But there there could be dynamic content, you're not necessarily locked into static. - -10 -00:06:07,650 --> 00:06:54,090 -Wes Bos: No, you can have dynamic content. But if that's the case, then you have to totally go outside of the Gatsby graph qL API and then post your own API somewhere or in a serverless function. That's what I did for. I'll talk about that. It was some of the serverless functions, although it just was tweeting with Kyle from Gatsby and he said, we're getting hosted graph qL, which means that hopefully, your Gatsby site will be able to refresh its data from the graph qL API, so it's no longer just going to be static like that. Is that a scoop that you got there? Well, he tweeted it. So I'm gonna say it's a scoop. Okay, cuz I had never heard of. I've never heard anyone talk about it before, but he just tweeted it to me out in the open. So it's not secret or anything. - -11 -00:06:54,480 --> 00:06:57,510 -Scott Tolinski: I didn't know you were into privy to some inside information. - -12 -00:06:57,570 --> 00:09:16,710 -Wes Bos: Oh, no, no, no, that's, I'm not that privileged. Just the guy cider, sweet and read and stuff. Yeah. The other thing is that Gatsby has a huge plugin ecosystem for things like Sitemaps. And I don't know, all kinds of images and whatnot. And next, yes, it's not that it doesn't have those. It's just that that's not the way that next js is set up, you'd have to do that yourself and reach for existing react plugins. So it would be kind of cool one day to see how hard it would be to switch over to next. Not because I want to just because I think it'd be interesting to see the the pros and cons side by side for an actual full blown website. All the the blog posts, so I've have, I forget how many. Let me let me look at my blog. 120 blog posts. Probably about 70% of those are still valid, and then the rest are just outdated content. But I feel weird, like taking it down because it's the web right? So I just kept all the blog posts there. It's the history. Yeah, yeah, exactly. And I had to move those over to markdown, most of them were already written in markdown, which was great. But the whole process of moving it to MDX is really tough, because like HTML is so forgiving, you goof up a tag or something like that. It just keeps going, right. But jazz, sax is super unforgiving. You got one incorrect tag somewhere, or you don't auto close, an image tag, all of those things. So I wrote this massive script that just find him replaced all of those little gotchas. And then I finally after a couple hours as they built the auto import every single blog post from my WordPress API, that's how I did it. And as I just pinged in the WordPress API, I also took all my Twitter Hot Tips from Twitter, and made those into pieces of content, which is great, because like, I personally can't even find my own Hot Tips when I want to find them. And it's like, the Hot Tips is the huge piece of content for me. And the fact that I don't own those is weird to me off is just a silly thing on Twitter. But like, it's a big reason why I have so many Twitter followers, and people absolutely love them. So like, why am I not owning this content? - -13 -00:09:17,220 --> 00:09:50,220 -Scott Tolinski: What's funny that we should talk? I mean, that's like a definitely like a topic of conversation. Maybe we could even elaborate on another hasty treat sometimes owning your content. And when we we talked about Yeah, for in the blog things when we were saying like, okay, you could do a medium blog, and that's going to get you maybe find stability initially because people will stumble upon it. But you're not owning that content, and you don't have full control over it. And I agree with you that that's like something you need to own and I'm, I'm psyched to see that you found this this way to pull that all in to your site. - -14 -00:09:50,640 --> 00:11:35,400 -Wes Bos: Yeah, yeah, absolutely. The styling the design, I did the design all myself. I went for some of this like grunge texture. So there's two grungy PNGs that get loaded onto the website. And I twist and turn them and angle them and offset them enough that it looks like the grunge is fairly random. But I didn't want to have to load in grunge absolutely like like five or six different grunge PNGs because that would make the the page load too heavy. So as it's kind of fun to be able to do that a lot of people say like wire, my logo itself is a PNG, I designed it all in vector, except the grunge has to be raster. And a lot of people say like, Oh, yeah, just use a SVG and SVG. grunge is not the same as a raster based grunge. And I actually converted it to SVG. And the file size was like 10 x what a PNG was because of there was thousands of little paths for every little dust spectral. I'm using operator moto and red, Nika next as my fonts, whole flare and co gave me free license of operator moto for the web, which is really cool. Because I've been like, saying, I use operator moto forever. And a lot of people had bought it after me. And it was on sale a couple months ago. And I tweeted out, hey, it's on sale. And then a couple days after I got an email from them, saying like, hey, do you want a free font for your website? And I was like, Yes, please. Because it's it's expensive. Yeah. I looked at the the price. I think it was like 1600. dollars to get unlimited usage license. He thought so. Yeah, yeah, that's expensive. - -15 -00:11:35,400 --> 00:11:37,470 -Scott Tolinski: Can we talk mono fonts for a minute? - -16 -00:11:37,500 --> 00:11:38,070 -Wes Bos: Yeah, - -17 -00:11:38,070 --> 00:11:49,470 -Scott Tolinski: I'm a big fan of these mono fonts as display fonts. Like, my entire website is one font right now. And it's mono. Lisa, and man have really liked going to mono font for this. - -18 -00:11:49,800 --> 00:12:08,490 -Wes Bos: Yeah, it's I did to the operator, the whole fair gave me a copy of operator, something sans there's there's one that's not monospace. And I tried that and it just didn't didn't feel good. I feel like it's pretty readable. I only have one person give me a angry tweet about it, - -19 -00:12:08,880 --> 00:12:13,830 -Scott Tolinski: as a developer to it gives that like vibe that like I'm a developer? Totally, totally. - -20 -00:12:13,860 --> 00:12:15,240 -Wes Bos: Yeah, I think so. - -21 -00:12:15,450 --> 00:12:18,840 -Scott Tolinski: Do not I? We're obviously not talking about my site right now. But - -22 -00:12:18,870 --> 00:12:20,160 -Wes Bos: no, let's talk about it. - -23 -00:12:20,550 --> 00:12:30,600 -Scott Tolinski: I used like id style ligatures in my design as the back arrows. So my back arrows are just a bracket and a line. And then as lit turn ligatures on, - -24 -00:12:30,840 --> 00:13:26,280 -Wes Bos: that was really nice. That's beautiful. Oh, while we're talking about the fonts, so all of the headings h1 through h6, all of the headings are actually pretty complex, because it's, it's an h3. And then inside of that there's a before and after pseudo element that adds the black and white texture over top of the text. And one really cool trick is that like I had overlaid this black texture on or sorry, I overlaid the white texture over top of the tax because it's white on black text. And what happens is when you overlay elements on top of taxes that it makes it unselectable. And I thought like, shoot, and obviously I just put on pointer events, none on that grunge and then the clicks go right through it and still allow you to select it. So that that was a kind of a cool trick that I really liked. Yeah, - -25 -00:13:26,340 --> 00:13:30,150 -Scott Tolinski: I like this. I think the grunge is super interesting here how you chose to do that? - -26 -00:13:30,450 --> 00:13:51,300 -Wes Bos: Yeah, yeah, my favorite part about it is if you select the text, the grunge is still on top of the highlighted text, which is pretty cool. Because I've always wondered like, I wish you could do like background texture on the Select. Hmm. But you can't, but you can if you overlay something on top of that, and then pointer events, none. - -27 -00:13:51,450 --> 00:13:52,680 -Scott Tolinski: Yeah, neat, neat trick. - -28 -00:13:52,950 --> 00:14:28,020 -Wes Bos: There's also a little yellow square in the top left hand corner, just kind of as a design detail. And one cool thing I did there is that the size of that square is done in EMS. And the benefit of doing it in EMS is that the size of the square goes up and down with the font size. So it's it's related to the font size of the heading tag. And that was a perfect use case for using AMS over rems, because it's based on the the font size of the thing. And it didn't have to size one for every H tag. - -29 -00:14:28,050 --> 00:14:33,810 -Scott Tolinski: Yeah, yeah, that's like, that's free right there. That's That's the dream of Yes. - -30 -00:14:33,960 --> 00:15:20,490 -Wes Bos: Yeah, that's like I always find it hard to find good use cases for AMS over RAMs, but there's one right there. Yeah, love it. CSS has done install components. I'd have a big global styles and then every component, I just use a component for that. And then I put like, sub selectors in there. So I still heavily use classes and tag selectors. inside of it. So I don't go crazy with style components and do a new style component for every little thing I just every general area, every general component as opposed to heading a meta, that's its own component. And then inside of that, I use just like regular CSS selectors. And I'm pretty happy with that sort of bounce there. Cool. - -31 -00:15:20,610 --> 00:15:25,500 -Scott Tolinski: Did you say I mean, you're using like, bam, or anything like that for your actual selectors? - -32 -00:15:25,620 --> 00:15:50,580 -Wes Bos: No, no, just, I don't think it's necessary to use something like that when you are using scoped CSS. Because, yeah, I would just give something a class of like, meta, or a class of big, and I don't have to worry about those classes in other places, because I know that I'm always writing scoped CSS. And that's good. I don't have to follow some strict thing there. - -33 -00:15:50,700 --> 00:16:37,740 -Scott Tolinski: Yeah. So in my site, I'm doing like scoped by default, right? That's just the way it is installed scope by default. And then you choose when you want to be global. And I really love I mean, I typically used to writing style components. But I really do love that scope by default, because then you still get to turn the cascade on whenever you want it. And if you know what you're doing with CSS, it's like, Alright, here's where I want the cascade. Here's where I want my Global's, here's why I want the the baseline stuff, and then here's where I want things scoped. It makes it such a nice experience. I think some people will look at scoped CSS as being like a, you know, for people who aren't good at CSS. And in my mind, it takes a lot of skill to execute with a scope CSS and make it you know, super dry and just nice to use. So yeah, I love it a big fan of that. - -34 -00:16:37,770 --> 00:18:31,020 -Wes Bos: Me too. It's just been really nice. And by default, like you said, scope, by default, you write your styles are scoped to that component. And then if you want something to be global, like a lot of the fonts and variables and whatnot, then you can throw that in your global CSS love it. One kind of cool thing that MDX gives you is a couple things. MDX allows you to embed react components right inside of your markdown. So YouTube player embed component, if you want to put a graph, you want to put anything inside of your markdown, you can just embed a react thing and you can import an export values from your MDX files. But another kind of cool thing that MDX does is you can replace the components. So all of the headings, and all of the code blocks and all of that anytime there was like an h2 tag, instead of rendering out an h2 tag, it would pass it off. And I could supply my own custom component for an h2 tag. And that's how I got these like, really complex headings without having to write the code every single time in my MDX file, night. Yeah, a serverless functions. So there's a couple things on the site that need to be on this on server side. Most common is the the Oji images. So if you share a URL out to Facebook, or something like that, it will show you like a thumbnail. And the way I did that is there's a page on my website, just called thumbnail, and then via the params, you pass the title, the URL, the image, the slug all of that information about it. And then it just I just laid out these thumbnails in HTML and CSS. And then I'm using a serverless function with puppeteer, which is headless Chrome, to just take a take a screenshot of that, and then serve that up to the user, when they're asking for the Open Graph image. - -35 -00:18:31,200 --> 00:18:33,630 -Scott Tolinski: puppeteer, hey, they're getting fancy. - -36 -00:18:33,900 --> 00:18:51,900 -Wes Bos: Yeah, it was really neat. Because like, otherwise, you'd have to use like a different program to make images. And I was like, I want I just want HTML and CSS. And then I want to take a screenshot of it. I don't want to have to, like, learn this other node package. That's not as powerful as CSS to lay things out. - -37 -00:18:52,050 --> 00:19:06,480 -Scott Tolinski: Yeah. You know, I've been thinking a lot about images in like, what's your strategy? I mean, it was so nice to have like, in the CMS, like a drop zone, drop the image in? Are you just coding all the paths? I guess it's Gatsby. So you're doing the Gatsby image queries? - -38 -00:19:06,690 --> 00:19:26,490 -Wes Bos: Yeah. So in almost everything, it's in markdown, which does Gatsby image queries for you under the hood. And then I just put the images in the folder of the blog post, or I have a folder that has like pictures of me and there's a picture of Scott on the on the about page, so go check it out. I saw that hey, - -39 -00:19:27,660 --> 00:19:33,030 -Scott Tolinski: including me on your site. That's very nice view. Oh, yeah, I have your name and your wink, but I don't have any photos on my side. - -40 -00:19:33,110 --> 00:24:11,550 -Wes Bos: My wife was a little bit cheesed that you came before. Oh, no. Oh. So I use Gatsby image to compress and resize and everything like that I'll talk about that was a bit of a pain in the butt in just a second serverless functions. Also, I'm pulling in tweets and Instagram posts and Instagram stories and all three of those needs to be done server side then of course API's so I use service serverless functions for that, which is pretty cool. I'm using them through Netlify. Because they have like a nice local thing called Netlify. Dev, but they are just AWS lambda. So they could they could really be hosted pretty much anywhere. It's just a node file. Hmm. I'm pulling in my Instagram Stories via sort of like a fake login. So I'm hitting their graph qL API that's undocumented, and then passing my session cookie along with it. And that gives me my stories, because there's no API for Instagram stories. If you are not a business or something like that, like even you're not a brand that is in with Facebook. So it's not something you can do. Yeah. And those the tweets, Instagrams, and the podcast, the latest syntax podcast gets pulled into the footer as well, all of those are done client side, because you can't if I were to do them at build time, then they would be out of sale by the Yeah, they'd be out of date. So that's like one thing. I was like, I was like, looking like how do I do it on build time and refresh it in the client? And the answer was, like, use the code. Two totally separate things. Which sucks. So I think that's what the the Gatsby hosted graph qL API will fix. I bet there will be like a tag that says refresh, refresh on client true. And then it will just ping this server for any updated content. It's hosted on Netlify. That worked really well. I actually, initially it didn't build on Netlify, or render, or I tried it on a bunch of them. And one of the biggest pain points I had was that apparently had too many images, I bought 350 images. And it would just fail and timeout on every service that I tried. And it was just way too big. I guess. Like, I don't know what people who have larger websites than 300 pages are doing because I know there's there's e commerce websites out there. Yeah. So I talked to Jason friend of the show, Jason lengstorf. He used to work at Gatsby works at Netlify. Now, so who better to know everything about this stack. He hooked me up with this experimental thing called Gatsby parallel build, which throws your images out to Google Cloud, or Google. Yeah, Google Cloud Hosting. So it's sort of like serverless functions, I guess it is a serverless function. And then Google Cloud will just spin up 300 instances or something like that, resize each image individually, and then send it back. And that took my meal time from about 25 minutes to about five minutes, which is pretty good. And then there's still another like, five, six minutes of deploying, after the build is done on Netlify, then as to deploy, so it's about 12 minutes to get something from a git push to being live on your website, which is okay, I kind of wish it was faster than that, like I had, like a bug on the website when I launched it. And in 12 minutes, like lots of people messaged the bug. Yeah, yeah. So I kind of wish that it was a bit faster. I used I tried Gatsby cloud, which is using this thing called Gatsby incremental builds, which I hope is will be a thing for everybody at some point. And it was great because it took my entire build. And then I changed like a word on a page, and then it rebuilt it in a minute. Mm hmm. And that is Gatsby is smart enough to know not to rebuild the entire website, but just to rebuild the one page. Yeah, I think that Gatsby cloud also does similar parallel image processing. I just ran out of time to investigate all of that. So I'm just gonna sit on my hands. And I bet that this will get better at some point because like, um, it's not a big website. I don't think it's a medium size website. And I think that a lot of other people probably have this pain as well. Sure. You can view source on it, which is really fun. It's all formatted nicely. I use a plugin from James Vickery. It's called Gatsby plugin prettier build. He actually just built it after I was asking on Twitter, like, Hey, are - -41 -00:24:11,550 --> 00:26:27,210 -you able to format the outputted, HTML from Gatsby? And the answer is no, because react Dom does that for you. And it just puts it out. But he built this on post build. That's a hook in Gatsby. Once the build is done, you can run some code. And then he built this thing that would concurrently run the HTML files through prettier and format them nicely. Oh, nice. And the view sources is very readable now, which I was really happy about. What else do we have here? There's a lot of stuff that went into it, which is pretty cool. I think that's about it pretty happy with with the site right now. It's a big driver for me. I had to maintain all of my old links, because blog posts and Google Search juices, but a big part of my business. Lots of people find my blog posts by searching on Google read a couple and then buy a course after that. So I needed to make sure that that all and I will see in a week or two what my stats look like, once they've leveled off, did they get better? Did they go down versus WordPress, something like that. So I had to like make sure that the slugs got moved over from the old version as well. But overall, very happy. It's very fast, like I didn't do much to make it fast. It just is fast out of the gate. And I felt like I didn't really have to give up too much or really anything in order to get that. So nice. I think the one thing I gave up was the build the build times because of the Gatsby images. All Yeah, the other thing is that everybody is gonna say, why don't you just use cloudinary like Scott, and I love cloud, Neri and cloudinary will do the image resizing on demand for you, which is cool. And like I love cloudinary I use it for my course platform. I just didn't want the build of this blog to be dependent on like a paid company. Like I wanted it to just work even if you're offline. I just wanted this whole thing to build and not have to like reach out for any external services. So that's why I although obviously, gas will parallel build uses Google Cloud, it will still build just fine with a regular Gatsby build. And that's what I wanted to maintain. And once it's built, it's built. What do you mean by that? - -42 -00:26:27,420 --> 00:26:31,080 -Scott Tolinski: Like, once it's built, it exists as an HTML JavaScript and like, it's not like - -43 -00:26:31,080 --> 00:26:56,250 -Wes Bos: yeah, you're right. Yes. So it exists. You're not relying on it. Although I guess you probably could use Yeah, cloudinary to just resize it and then save it locally. Jason link serve has a cloudinary Gatsby image plugin that I think does something similar to that. So that certainly is an option. It's just that my traffic level, it would get real expensive. Real quick, for something like that. - -44 -00:26:56,400 --> 00:27:01,500 -Scott Tolinski: Yeah. You know, it's really easy to not have to worry about images when you don't have any. - -45 -00:27:02,070 --> 00:27:21,210 -Wes Bos: That's that was my say you don't have a note. I just don't I just don't want to deal with it. Yeah, that's great. Like, I'll say I couldn't do that. But I think it's because you are incrementally building your site. Because that's probably a YouTube video for you working on adding my site. Here are the options I have. Here's why. - -46 -00:27:21,450 --> 00:27:22,590 -Scott Tolinski: I don't have images. - -47 -00:27:24,150 --> 00:27:37,710 -Wes Bos: Don't have images don't have problems. Right. Yeah. All right. So I think that's it. I'm pretty happy with it. Check it out. It's on GitHub. It's all open source so you can learn a thing or two from it. It's at github.com Ford slash Wes Bos Ford slash Wes Bos. - -48 -00:27:38,190 --> 00:27:45,390 -Scott Tolinski: Nice. Cool. I hope this was awesome. I really enjoyed hearing about your site, especially because he did so many fancy neat things that men love it. - -49 -00:27:46,259 --> 00:27:49,350 -Wes Bos: Fancy guy. Fancy guy fancies my middle name. - -50 -00:27:49,350 --> 00:27:50,400 -Scott Tolinski: Yeah. All right. I - -51 -00:27:50,400 --> 00:27:55,350 -Wes Bos: think that's it though. Thanks for tuning in. And we'll catch you on Wednesday. - -52 -00:27:59,340 --> 00:28:09,120 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax248.srt b/transcripts/Syntax248.srt deleted file mode 100644 index 0fa4f0c94..000000000 --- a/transcripts/Syntax248.srt +++ /dev/null @@ -1,100 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:10,530 -the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and Wes Bos. - -3 -00:00:10,979 --> 00:02:53,910 -Wes Bos: Welcome to syntax. This is a podcast with the treats that are pretty tasty. Today we are going to be talking about what is new in JavaScript is a whole bunch of new API's that are coming to the browser to node to ACMA script, which is just the JavaScript language in general. We've got some really interesting stuff that is in proposal stage right now, knowledge coalescing, what does that even mean? Some words really, really lots of nuggets. These are things that you're like, be able to use now or within I bet the next six months or so. So let's get on into it. today. We are sponsored by Log Rocket, which is online session, replay network activity, all kinds of interesting stuff that will show you what is going wrong with your website as well as fresh books, which is online invoicing and accounting and expenses. All that good stuff. We'll talk about them partway through the episode with me as always is Mr. Scott to Lynskey. How you doing today, Scott? Hey, yo, yo, yo, I'm doing good. Just hanging out, you know, everything in life right now is sort of breaking my you know, the handle broke off my microwave, the my dishwashers not working, the icemaker is not working. Our dishwasher broke the other day, too. What happened to your dishwasher? It's just not cleaning. We've we've done quite a bit to check out why, you know, there's no clogs, we've run a lot of cleaning cycles, we've run run it with, you know, vinegar, we've done all sorts of things. And it's just not working very well. All of the appliances were purchased, like two owners ago in this house. So we know Yeah, they might be hitting that age where they're going to have some problems. And I'm gonna have to start taking some things apart and figuring it out. Or who knows, I don't know, I don't want to buy a new one. But yeah, might have to happen. They're old, we had ours flood, we didn't clean out the I don't know somebody in our house is thinking that you can just put a plate full of corn directly in the dishwasher. And that clog the like the drain and then it overflows and there's a sensor in the bottom, that's just two pins. And when that pins hit the water, it can tell that there's been a leak. And we just like left it for like two two days. And we're like put a heater on it. We're like it'll dry out. And it just didn't want to go no back. So I finally pulled it out and just tipped it over and drained it out. And it went back to being fine. But hey, clients repair is very frustrating. Given the how like, it's, it's definitely possible to fix these things. Like we've talked about that before. Yes, parts are often really expensive. And they require us reading - -4 -00:02:53,939 --> 00:06:55,380 -a lot of like, like, you know, getting your hands in there. I mean, we had to fix this array to like change the seal on our dryer or washer one of the two. And yes, so impossible. It was like oh, the seals only $20. But the tool that they use to apply the tension band around the seal is like $90. And it's like, well, I'm not gonna buy the tool for this one time use. So I saw a video that showed you how to do it with screwdrivers, and I have several screwdrivers, and I'm like pulling them and trying to get the tension right on this thing. And oh my god, I think it was one of the only times where I've had to like, set everything down. Just step away and like take 10 minutes to cool myself off because I was getting so angry. It was so great. But yeah, that's how things are going over here, man. We're just chillin working on some co working on some fun svelte stuff, maybe we'll we'll have to do an episode on. But let's get into some of this JavaScript because there is a lot of cool stuff. They came in 2019 S, S 2019, and ies 20. And maybe some things beyond we're going to be talking about some of these basic features, but some more advanced stuff and some really interesting things. So I'm gonna kick it off with flat map. Flat map is basically map, but it allows you to return an array rather than a single value. And typically, if you use map and you return an array, it's going to have an array within an array. You could think of it as like, okay, we're mapping over this thing, we return an array, and then you end up having array inception, right, because it's returning an array. Well, with flat map with the cool thing is, is that it flattens that array just like it would sort of when you're returning an array from a function. And now in this example, let's say we had an array with four numbers in it right? And you returned an array with a number and a number times two. Instead of being array array array array inside of an array, you get, let's say it's like 1234, you would get one and then one One times two, and then two, and then two times two, and then three, and then three times two, and then four, and then four times two, all within one flattened array, rather than nested arrays. Pretty cool. Oh, yeah. So that's just kind of a little convenience method around just first mapping, and then taking your array of arrays and then running with the next one that we have here, which is just dot flat on the end. So there's a bunch of new methods are like object dot entries, object dot values, object keys, all of these new methods will return to an array of arrays. And if you want to get that into just a nice, clean array, so you can work with it, you need to flatten it. So the new dot flat method exists on all the arrays. And this is another reason why you don't have to load in a lodash or something like that utility library, because it just built in, there seems to be a pattern with this modern JavaScript stuff, even like all the way back to es six and onwards, like, we've just been seeing a lot of the features that have been in lodash being implemented in native JavaScript, it's funny, there's probably going to be like a, you don't need lodash at some point, because it is it's like the most used utility library in JavaScript. So at this point, probably no surprise that a lot of these things are being added to JavaScript itself. Did you see this infinity keyword? Have you seen this infinity keyword and anything else before? I'll talk about it in a minute here, but I have not seen this in anything else. Personally, if you do an array dot flat, and then you pass in the keyword capital I infinity, it does it every single nested layer deep, because if you just do dot flat, and you have multiple nested arrays, it only flattens the first level. So if you use the Infinity keyword, it flattens all of them. I didn't realize you could pass it infinity. - -5 -00:06:55,410 --> 00:06:55,920 -Unknown: Yeah. - -6 -00:06:55,980 --> 00:10:48,690 -Wes Bos: Isn't that weird? You can obviously pass it as many levels deep as you want. infinity is has been a keyword in JavaScript forever. There's also negative infinity. I've never used it interesting. Yeah, no, neither by I don't know what other why you would need. Like, if you need like the upper bound and the lower bound of something, they are true numbers. So you can say like 10 is greater than infinity, then it will be obviously false. So I guess if you if you want it to check if something was great, or I don't know, yeah, right. Yeah, a lots of good use cases for it. It just can't think of an interesting one right. Now, this will be the use case where I finally use it. So props. Good. Next one we have here is array dot from entries. And this is super interesting to me. I've used this one three times already, it came out. And it only came out just a little while ago. I'll link up some tweets where I have some code examples. And this is object from entries. And what this allows you to do is you take an array of values, and it will turn them into an object. So object keys, object values, and object entries, these will always return to you an array of values. And almost always when I'm trying to change something about an object, I'll quickly pop it into an array, loop over it and do what I need to do. And then I need to convert it back into an object. And object from entries is this most helpful one, I've got a bunch of links in the notes to some examples that we have here. But even even something as simple as, if you have a string with like, a comma and that you want to split that comma, and then you need to loop over it and turn it back into an object object from entries is coming in clutch. Previously, you've had to use reduce for something like that. And that's sort of another thing that I'm seeing with a lot of these new methods is that every time we come up with a new one of these methods, flat Flat map, from entries, they sort of the array dot reduce use cases that we we saw always go for, we don't go for them as often because like array dot reduce has always been this. Like, it's kind of alluded. It's a tool that we reach for Yeah, it's it's, it's convoluted, it's super helpful. And it's what we reach for when we need to do really anything and there's not that built into JavaScript, right? And now we have these custom built methods for it. And I much prefer those because the array dot reduce tricks and kick flips that we do are hard to read. It's hard to parse. Yeah, yeah, it is. It's hard to parse and, and I never like look like when I see reduce in my code, like I have to leave good comments on it cuz I come back to it. I'm like, Okay, what is this doing? Exactly. Okay, my next one is going to be this is fairly, I don't want to say benign, but this seems like pretty useful, which is trim start and trim end for strings. So you can never Run a method at trim start or trim end on strings and what that's going to do for you, it's going to remove the whitespace, either in front of the string or the end of the string, a nice little thing there, you're not going to have to remove it via, you know, whatever, find this, find the empty space and replace it with nothing kind of tricks that we've done in the past. Yeah, cuz we have had trim in JavaScript forever. It's just that if you only want to trim one side of it, for whatever reason, maybe you are looping over some stuff. And you need to include the space at the end of a word, but you want to trim any spaces that are at the front of a word, then there you go. It's not like that. That's really it's not that exciting, but I'm so stoked about trim. And let me - -7 -00:10:50,909 --> 00:10:58,260 -Unknown: go to full YouTube mode. Hey, guys, today, we're gonna be talking about trim. And let's talk about this thing right here. Yeah, no. Okay. - -8 -00:10:58,740 --> 00:13:26,279 -Wes Bos: blasting it out it Yeah. Unreal. So useful. You want to trim from the start trim from the end, you want to do both? You can do it together. Yeah, you could do it. No, make sure if you if you like that this kind of content, go ahead and just destroy that like button, just push it so far. Destroy it. Yeah. unction to string function to string. I don't know what this does. Does it just make your function a string? It does, just as it sounds. So if you have a function, and you would like to turn it into a string to do something with that string, maybe display it or something, I don't know why what the use cases for this, maybe it is displaying code, right, you want to show off some code, here's a function. Well, now you can take your function run it.to string, and it's going to give you a formatted string of your function exactly as it sounds, is it just the function name, or all the code inside of it, the code inside of it, the whole thing. Next one we have here and this is not new at all. But this is something I've said many times in the past, and many people have told me is that objects and their keys have no order. So if you've ever added items to an object, you'll look at them and they say, Oh, that looks like they're going in order, which I put them in. And then somebody comes around says objects cannot guarantee order. And I've said that many times probably on this podcast, and I learned that that is untrue. Object keys do have order and here is the order that they go in. First, they go based on ascending integers. So if you have a key on an object that is a number, which is weird, but you can do it in JavaScript, then they will go in whatever order from a sent ascending order. So 12345, then string keys, this is most likely what you're using. So anytime you add a new key, that is just a word. Or we can say property, if you add a property to your object, they will be guaranteed in insertion order, meaning that in the order that which you add the properties to an object, their order will always be maintained. And that is guaranteed as of Yes, sex, which is kind of interesting. And then symbols got at the end. So object order kinda is guaranteed, which is nifty. Maybe you can abuse it and stop using arrays. Yeah, - -9 -00:13:26,429 --> 00:13:31,770 -Unknown: I never use arrays for very much. I mean, other than, like, collections, and whatever. No, I never used I - -10 -00:13:32,820 --> 00:15:01,919 -Wes Bos: never used an array ever. No, of course not. So with all these features, you're gonna be able to blast off and write some really fancy code. And just like one of our sponsors today is Log Rocket also blasts off whenever your code is bad. And what I mean by that is what Log Rocket does is it captures video of your users making mistakes. Now it doesn't turn on their webcam and in show them, you know, freaking out about your website. But what it does is it gives you this session replay they call it the session replay is so cool, because it shows you in a scribble timeline, the user committing a bug, they click on something the site breaks, it turns purple, it turns upside down, it turns into a tomato, whatever happens. Well, Log Rocket is going to capture that in a scribble video with a network requests and all those console logs and errors and Redux store stuff that you don't get anywhere else. So if you want to stop guessing why your bugs happen, head on over to Log rocket.com forward slash syntax, and what you're gonna get is 14 days for free. So check it out. It's super easy to set up, just drop in some code. And next thing you know you're going to be seeing and watching in horror as users commit atrocities on your website. So let's get into ies 2020 Yes, 2020 and I think it started off with a big one and buy a big one. I mean, big and big. It was my rap name and university. That's pretty good. Good, Robbie, take it. - -11 -00:15:05,549 --> 00:15:06,929 -Unknown: Good. Yeah. - -12 -00:15:09,840 --> 00:19:17,430 -Wes Bos: Um, what is begin? Well, okay, so let me tell you, let me tell you about big end. Because this is not something I've ever really had a huge problem with. But I know people who deal with large numbers have been asking for big int for a long time. Now, typically, in JavaScript, the upper limit for a number is, what is it? It's something funny, it's, let me find it, let me find it. Thousands, it's in thousands. So the default number only goes up to two to the 53rd power minus one, which is a big old number. But sometimes people need to work with big old numbers. And I don't need to personally but maybe there's a time where I need a big old number. And so the two if you would need a numbers larger than that, which is a crazy large number, then you're going to get to go ahead and use the big int. Now big int is a function, or it's an object that allows you to represent very large numbers. So those of you who are working with big numbers, maybe you've hit that limit, and you've been like, wow, why, why? Why is this math not working? You're gonna want to go ahead and check out big int, because all it does is basically allows you to use numbers that are larger than that upper limit in JavaScript. You know, what I ran into the other day, I thought this was really funny as that I was using Twitter's API, and Twitter, he gives an ID to every single tweet. Like the first tweet was probably one, a second tweet was probably two. And for the longest time, that was fine. And at some point, the number of tweets exceeded the amount that this number that you were talking about. And Twitter's API sends you the ID of the tweet. And then if you try to take that number and display it as a string, it's wrong. It's not the right one. So Twitter's API solve that by just sending the ID as an A secondary property called ID underscore str. They send it as a string, as well. And that's what you need to use. If you want to link to a specific tweet. Cool. Yeah, I thought that was kind of that we had the same problem with syntax. I so so stupid numbers, a podcast that's like podcast 001. Like I thought it was like so cool. numbering our podcasts starting with double zero. And at a certain point, if you want to parse int, you want to parse like a string 001 into number one, then that's fine. But I think once we hit like, Episode 130, or 98, or something like that, like it's stopped, he has been based base 10, or something like that. I remember going through a down a rabbit hole, and I had to redo every single. All right, in real numbers. So don't use leading zeros or big numbers, if you know, you're gonna go over that. Interesting. Those are some lessons from the trenches here. Next, we have here is knowledge coalescing, which is a very interesting name, I thought this is pretty cool says, I like this, you can start to use. So if you want to use the or trick in JavaScript to fall back to a value. So let's say you want to store a variable called score. And you say the score is equal to the user dot score value, or 10. Like that's the default value. And what that will do is it will check if the user has a score value. And if they don't have a score value, it will fall back to 10. That's why we always use the the pipe like pipe pipe is the OR operator in JavaScript. The downside to that is that the pipe operator doesn't check for null or undefined values, it checks for falsy values, which the false values are Scott put you on the spot. What are all the false values? No. undefined? Zero, empty string. False. I think that's it. Wow, yours very cool about that I would have panicked. - -13 -00:19:18,810 --> 00:23:33,990 -So those are all those values equate to false in JavaScript there. That's why we call them false see, they're good enough to be false. But if the user's score was zero, that would actually equate to being a falsie value and then it would just default the score to 10 which is not what you want, right right. Or if somebody is last name was nothing like share it my dad, of course, we use teller from Penn and Teller, yes, and share. We use that to define the difference between null and undefined because tellers last name is null because he explicitly got rid of his last name, and shares last name is undefined didn't have a last name. She's just there's just no, it's never been set she was born here. So if you want to check if something is either null or undefined, and not an empty string, not false and not zero, then you can use this new operator, which is question mark, question mark. And we can say, so the score is equal to the user dot score, question mark, question mark 10, or 10. So if the user score is no or the user score is undefined, then fall back to 10. And I think you should probably start using this in everything as I've certainly hit this bug before where Yeah, anywhere where you're not using numbers or whatever. Yeah, yeah. Yeah. So cool. Pretty cool. That is really cool. And it's funny, it's got a scary name, I think it throws people off. But we got some really nice question marks and new syntax in 2020. And another excellent question mark. syntax is optional chaining, which is something that I've been using for quite a bit through Babel and through whatever. And thankfully, TypeScript added it, because optional chaining is one of the greatest features for me, because typically, what it does is, is if you have a an object with objects inside of it, right, and maybe you're unsure of the data that's coming in. So let's say you have a user who has an address, who has a street name, and maybe that street name, you're not sure if that street name is or you're not sure if the address itself is even there. So if you were to write, user dot address that street name, and address did not exist, the whole thing would break, because you cannot use property of undefined. We've all seen that error, cannot find Street, or cannot use access street of undefined, whatever, we get that error all the time. And so typically, a solution to this would be like, if user and user dot address, then check that user does address that street, right? Whereas with optional chaining, you can just use a question mark here before the.so. It now is user question mark dot address, question mark.st or whatever. And you will no longer have those errors. Because if at any point, any of those properties does not exist, the whole thing is going to short circuit and return an undefined for you, therefore allowing you to do some really nice if statement checking to say like if this question mark dot this question mark dot that exists, then do this thing. And you don't have to worry about your code breaking. I use this constantly, especially with data that you're not sure if it's going to be existing or not. So this is this is a big one. For me. I love the optional chaining unreal, it's like this is probably like the best thing in this entire episode. Yes, this optional chaining, it makes so many places where I've had this, you check for the first property. And if that's there, then you check for the second property. And if that's there, you check for the third property. It's such a pain. And this is already added to Babel preset DNV, which is what Gatsby uses is what next Jes uses. It's what most things use. So you can already start to use this without having to do custom Babel. configs ended in in TypeScript to some Ts people. That's so good. I'm big fan of this. It's so good. What did you do before optional chaining? Because I used primarily lodash has, I don't know if you Yeah, - -14 -00:23:34,230 --> 00:28:18,540 -I would use lodash has or I would just kind of bite and chew and write out the entire and and and and yeah, usually I would just do the secondary because I didn't feel like installing lodash I want to kill the build and install it and restart it. So it just kind of did it. And I'm so happy that this isn't the one thing that I want to save for this as it also works with arrays. And the syntax is a little bit funky. So if you want to check if something is in an array, like you want to check for the second item of an array, you do the array question mark dot square bracket and then the index of it which is weird because you usually don't have to put a dot before you you reference something in an array. But in this case you use both the dot and the square brackets to reference the array value. Yeah, that's interesting. You gave me a great idea by saying kill build I'm going to now write a new alias or something came up Kill Bill did that just just that just deletes the bill kill build a that's pretty down. Kill build should kill it. delete your package lock, delete your node modules, delete your yarn lock. Yeah, re npm install and then started again done. I'm gonna add that to my my code base. That sounds great. Next, we have promised all settled. We talked about this one. We did it entire episode on the new promise methods, there's a couple of new ones. This one is part of ies 2020. This will resolve when all of them are either resolved or rejected, which is different than promised all because promise dot all will resolve. If one of them is canceled or one of them was rejected, then the whole thing is over. If you want to like wait for everything to finish, then you can use promise that all settled. Yeah, that sounds fun. Just another option there for our promises. Next one is going to be dynamic import. Now dynamic import is something that is going to be super useful to a lot of people. What it does is it basically allows you to import a module and return a promise. So instead of importing the module at the top, we're able to do is to import this thing, and then wait for it to load. And then when it loads. All right, this is super useful. And things like code splitting, you can use dynamic imports to say, Alright, I'm going to import this section of my website, but only when it's needed. So when it's needed, then the import happens. Like let's say you have a, I'm gonna use this in a react content. So let's say you have a homepage, and then you have maybe a forward slash tutorials page. And on that forward slash tutorials page, there's a whole bunch of code here, you don't want all that stuff to import and load and whatever at that time. So you can dynamically import it that way, when they click the route, then it then imports that code. It's basically just a perfect improvement. And it can be used for things like tree shaking, and all sorts of nice stuff. So I use this in level up tutorials myself, I don't know if you use dynamic imports at all us. Yeah, I do, especially for like, even just something as simple as like loading in some data, like a list of countries, no need to put that list of countries in your build, just require it with the dynamic import syntax before you go ahead and render out a list of countries in that drop down. And then the second time you render it out that dynamic import, it's promised base, so it will just resolve immediately, because it's been cached and downloaded already. Yeah. Ah, Next up, we have string dot match all and there's another one where I don't see it in here, but it was string dot replace all it's right below it. What's odd. Is that replace all is still in stage three. Oh, is it? Yeah, I've I've already been using it in? Yeah, I actually I had to put a polyfill in node, just to get it. But I love it. Yeah, replace all this stage three, but natural is in. So I don't know why. But yeah. Related replace will replace multiple instances if you use a regex. And that's kind of annoying. Because Yeah, right. If you have like a variable that you want to replace, then you have to write an external regex and pass it in via reference, replace all will allow you just to pass a string of what you want to replace. And then the second value is what you want to replace it with. And then there's no getting into regex. And one last regex that I have to write is very welcomed by me. I know I was doing some regex and this weekend, and I always regret when I have to do it I use I always like almost every single time I don't know if you're familiar with regex 101, I - -15 -00:28:18,540 --> 00:33:10,290 -believe is the site reg x 101 dot com. Let me check that out. Make sure that's the website I'm thinking of Yes, reg x 101 dot com, I always have to go to this site, I paste in my my test strings. And then I write my regular regular my regular my regular in here. Now the cool thing about this site shout out to this site is that they give you a quick little reference here. So if you need to, like look up and search for like, okay, I want to reverse this, or I want to do this or whatever it gives you all that nice little reference there. And of course, great JavaScript Python go Lang. Whatever. So this site is fantastic. I'm a big fan. I use red X or eg x r, it looks like exactly the same thing. It's from grant Skinner who was big in the flash world order script. Yeah, Skinner. But they're so helpful because you can look at like commonly used regex is, oh, this is cool. Yeah. And you can save your own. Because like it's like find everything but numbers or find phone numbers or match URLs, things like that. I like this. I like this. Cool. So next one is going to be a big one. And this is global. This now global this I know there was like a lot of talk around the naming of whatever they should name with global this. This was one that I kind of ignored, even though I shouldn't have ignored because I have so many perfect use cases for this. So global this comes in handy when you're working on code that's going to run in many different places. You could think of it as like, Alright in the browser, you know, the Global's are put on the window, right, but what about node, right? And if you're writing code needs to run on the browser and the window, or I mean, the sorry, the browser and the server, then all of a sudden, you have to do this whole business where you're checking to see if it's the window, or if it's the global or whatever. Now we have access to global this, which basically is a standard way of accessing the global object itself across environments. No more worrying about whether or not the window exists or whatever, you can just use global this rather than window or global or whatever you need to use based on your environment. Fantastic. I'm a, I'm super into this one. Yeah, you're super into this one. I like it. Oh, I'm super into global this one. Next one we have here is module namespace exports. So we've had the syntax, import star as whatever, from a specific utility, but we've never had the similarly named export value. So if you want to import and export something immediately, but you want to do that as like a sub object, you can use this new syntax, which is export star as utils. So basically, sorry, let me read the whole thing, first export star as utils, from utils dot j. s. So what that will do is you import everything from a module, and then you want to export it immediately. We've had that, but the AZ utils part is new, meaning that you can import everything from a module, and then export it out, but as a single named value, which is in this case, utils. Yeah, I don't know. I at first glance, I didn't know if I would use this, but I do use export asterisk from blank a lot. So maybe I would use this as well to sort of bundle up some of these into like, an object, right? Yeah. Interesting. Yeah. Like, I guess, if you want to, like put them in their own? Well, I will see, I will see in like six months if I've ever used it. I don't think I would, but it's there. There's a chance I'm gonna use it. There's there's a there is a definitive chance. All right. Next, we want to talk about something that there is a chance of you using as well. And that's not I'm talking about Freshbooks here is the freshest. Yeah, so it was more on Freshbooks is West Freshbooks is the small business accounting software that makes billing painless. If you want to spend less time on the books, this is a pretty common thing that I hear from people who are running their own business or running their own show for a while. And they say like, I got a job because I'm sick of doing the, like the business side of it. I just want to be a developer. And totally I hear you on that. And the one tool that makes me able to do that is fresh books, cloud accounting, all of your invoices, all of your expenses, all of your time tracking, everything that you need reports of how you're doing Profit and Loss tax summaries, how much do you owe on whatever local tax is in your area? You want to check it out? freshbooks.com for slash syntax 30 day unrestricted free trial, make sure you use syntax in the How did you hear about a section? Thanks so much to Freshbooks for sponsoring. - -16 -00:33:10,290 --> 00:35:46,440 -Awesome. So now we're getting into some browser stuff. I am interested in some of these because I am a little bit less up on the browser things that I am on the JavaScript features. So this first one you have is share, dot share navigation dot share. Now what is what is this about? So like, all of the apps on your phone, they all have like that little arrow where you can share it, you can airdrop it, you can text message it, you can save it to your photos. And that for a specific piece of content is sometimes hard to do in a specific webpage. So navigator dot share is going to be a new API that will allow you to share different pieces of content. It's still experimental, it's still not totally implemented in all the browsers, which is a bit of a bummer. It looks like Safari and Chrome for Android. and iOS are the only ones that support it. And then there's another API, which is navigator can share, which is just a returns a Boolean, whether you can or cannot share it. So did these use the default browser or like that, like the mobile default share menu? Like Is that what it is? It's like popping up the Mobile Share menu? Yeah, like that's, that's the whole thing about navigators, navigators, how you tap into the environment that your website is running on. So navigator, dot get user media gives you access to the camera of your device. navigator. geolocation gives you access to the GPS of the device. So if you want to be able to access the devices, share features. That's what this API is for, and I'm gung ho on these because it means less apps and more fully featured websites that aren't as they're like. Not as good as the app, you know, we see that a lot. So let me another step towards that. I wonder what it does on desktop, I don't do much like desktop, click sharing things, especially in Windows Mac, I have no idea what that looks like To be honest, I actually use it quite a bit to send stuff air, I use airdrop a lot or send something to. There's also like, in sketch, you can share to cloud app. So it'll like automatically upload it and then you don't have to do the whole, like export it and then upload it. So like just basically, it's an open standard of sharing data between two things. And if that works, then though everything sort of just like weaved in a little bit more simply, yeah, so I use it in sketch quite a bit. It's built into OSX. So built in this way. - -17 -00:35:46,440 --> 00:35:51,600 -Unknown: You know, you wouldn't have to do that if you use figma. Because it's all in the cloud by default. So - -18 -00:35:51,600 --> 00:40:44,150 -Wes Bos: there you go, yes, I need to I need to get myself some figma do you got to check out doing a course on forgiveness month. So I'm like super into it right now. They have these like auto layout things where when you type in a button, the button automatically resizes it's all that's so cool. And they just added links into figma documents. So now you can link from one thing to another. So when you click on it links you somewhere else. So you could make links, and then that's going to be great, because it's like you can it's perfect for the design system stuff that I'm doing right now. So yeah, yeah, I've been saying next big design project I have. I'm doing it in figma. You're gonna love it, man. You're gonna love it. It's fantastic. Yeah, I can't wait. This next one is a node API. It's called a sink hooks. And it's it's just, it's an experimental API. So it might not even get anywhere. But as far as I can see, and understand what it is. It's sort of like event listeners for different points in a callbacks life. And so the example that they have is, if you use create server and node or use Fs dot open, that's to open a file these things, they start, they run, and they they close. And if you want to be able to listen for different points in that API's lifecycle, much like react has mount and unmount. And update, you'll be able to hook into those things. So when something connects you can do as far as from reading the docs, that's what I can understand it is. It's likely This is more of a library author thing, but I thought it was kind of interesting to mention as well, totally. And I can keep going with these. I'm interested. I don't know, I don't know any of these. Oh, that's fine. Oh, this is a really cool one is the pipeline operator. Oh, yeah, been around for a long time. So you've got three functions that all do something like you've got a capitalise function, you've got a yell function, and you've got a personalised function or something like that. And if you want to run all of those functions with a piece of content, you have to wrap them around each other. We've all done this before. So if you want to like add, then multiply, mm hmm, then format into into money, then you find yourself wrapping format, money in multiply in AD, right. And if you want to figure out what happens, you have to sort of start in the middle and work your way out to understand what order is happening. So the pipeline operator will allow you just to take a value and pipe that into this is very much like Gulp, remember, gulp piped everything that was the best Yeah, pipe, pipe pipe. So you just take a value, you pipe it into a function, and then you can just chain your piping values one after another. And the syntax for that is pipe, close angle bracket, which is pretty, pretty cool. I hope that this comes in. I don't use it all the time. But I think there's a lot of people that would Yeah, I guess with like map filter, reduce, we already sort of get this piping layout, but that's just because each of them return an array. And then we're able to do that because the prototype has the method on it. But as soon as you get into the situation where you have your own method that's not on the array prototype, then you have to like save it in a variable and then throw it into your own function. So this will allow you to have that nice chaining, map, filter, reduce and then also throw in your own functions, which would be pretty nifty to net D. I want to see where is that? It's stay. I don't know if it is even stages in stage. One proposal. Yeah, I think this has been around for a while. Yeah, two years ago. So I don't know if it'll ever make it but it'd be pretty cool to get it. Yeah, it could just be in limbo like decorators forever and ever. Never is top level await which I think a lot of people are awaiting Top Level await? Oh, yeah, I know, I know. I know, I know. Now, typically, so like, if we want to use a sink await right, then we would have to do so in a function, we have to create an asynchronous function. But like, let's say you have some code that's just running in a module. And you're like, Oh, well, I need this code to be a synchronous, you'd have to use promises you'd have to use. I know, async. Using promises under the hood, you'd have to use callbacks, whatever, it's a little bit different. But now we be able to use await in a file without having it be wrapped in a function simply by declaring. How do you actually declare? Is it just, you just do it? Yeah, you could just use it. And you can use at the top of or anywhere in a - -19 -00:40:44,150 --> 00:42:08,150 -module? Yeah, it's just any like, anywhere, anywhere. I thought you had to declare something to make this happen this way. But it looks like no, it looks like it just does it. Which you could Yes, for things like imports, you could just await an import at the top of file. That's pretty cool. Yeah, that people always said for a long time, like isn't that a foot gun, something you can can hurt yourself for. And their response to this is that top level away, will doesn't block sibling files. So if you are awaiting something inside of a module, other modules that are running are not blocked by that. So you're not actually blocking anything, you're just awaiting that that specific module. Hmm. And there's a couple other things, I will link to the blog post here, I don't think it's totally our wheelhouse to totally explain it all. But check it out. There's a really good post on va dot Dev, that explains why we now have access to even just something like Like I said, like a list of countries, if you need a list of countries before that module runs previously, you'd have to like, export a function that says get countries and then you'd have to await that inside of your loading functions. Now, you can just await it at the top of your module. And obviously, that will take a little bit longer, the first time your module loads, but for a lot of people, that's totally fine to do. - -20 -00:42:08,630 --> 00:42:10,440 -Unknown: Yeah, cool. Hey, - -21 -00:42:10,440 --> 00:43:14,730 -Wes Bos: I like this. So I don't have anything else do you have? Do you have any more? last one I have here is that Safari has finally introduced resize observer. And that's a big one, like I had to pull in a polyfill the other day for Safari. But now that so far, as resize observer, everyone has resize observer. And that's huge for all the cool stuff that we want to do with resize observer. And then also, we talked about this before, but edge now runs on chromium. So that is good for JavaScript, we think, did you see Do you see somebody from Microsoft close, like a super old chromium bug that's like existed for some time? So no, I think ago, everybody was rejoicing about that. I didn't actually know what the bug was. But like, yeah, hey, if that makes everything better than that's, I'm cool with that. Yeah. At least for like me as like the JavaScript developer who wants to use new things. That's good. Yeah. Whether that's good or not for the diversity of the browser landscape, that's a whole nother whole nother thing, but I'm pretty, pretty stoked on it. - -22 -00:43:15,000 --> 00:43:16,190 -Unknown: Yeah, absolutely. - -23 -00:43:16,670 --> 00:47:49,560 -Wes Bos: Should we get into some sick pics, let's get into so sick picks. Do you have any sick picks for us today with I'm gonna pick pick I said pick this a couple years ago. But I often like coming back to things after having them for however long and seeing how they go. And this is the wall oscillating multi tool, otherwise known as a tool that I talked to my wife, I'm like, we need to get the room in here. Yeah, and this is a little tool, you slap a battery in it. And you put like these little blades on the end. And it's the perfect tool for cutting out little pieces of wood or trim or cutting off a nail or flush cutting something. My friend referred to it as the get out of jail free tool mean that when you can't get a tool in a specific place or you need to cut something in a weird angle or I just trimmed a bunch of Spray Foam Insulation in my office. That's fun. And like it was so so handy. For this the little tool that it is you can buy it like hundreds of different kinds of little blades for it on Amazon. I bought like a little blade kit and some of they have like sanding ones and they have metal cutting ones and they have really thin ones for cutting just little pieces of trim off. So check it out. It's called the that you don't have to get the DeWalt one that's just like you buy whatever color batteries you have. All brands have this multi tool, and they all take the same size of blades, which is really good. Oh, that is good. Yeah. All right. I'm going to pick something fun here. It's going to be a code project. That's fun, right? Usually we do all sorts of like actual things, but this is going to be a Code project and that's sapper. I'm sick picking separ. Because I've been using it to do my new website, which is like it's just slapdash just thrown together. By the time you see this, there might even be a little bit better. But I just figured, you know, my previous site was from like, 2013 or something, it still said, I worked in Dearborn, Michigan, it was very out of date. So I was like, You know what, screw this, I'm gonna, I'm just gonna do something new here. I'm just gonna start throwing things together and not care if it really runs, you know, or it looks great or whatever. And sure enough, I decided to pick sapper because I thought it was interesting to try now sapper is sort of the next .js analogous for spelt. And it is really super cool my, my entire site, let's see what my entire site is because, like, you could load this as a note app, or you can do static generation for these things. So my entire site is, let's see, 60 kB total transferred, it loaded in 100 milliseconds. So it's pretty dang quick, pretty small. There's like no framework, the thing functions really nicely. And you get all of the awesome stuff from spelt. Like I'm using the built in spelled animation library to do these really neat transitions on on my pages, which let me tell you, it's such a breath of fresh air do have the animation library baked in, because it's opinionated, it does everything correctly. You don't have to struggle with a whole bunch of different knowledge or interface. everything just works really well. So I'm going to shout out to sapper statically generated me a gorgeous site. And it was a lot of fun to work in. So check it out. If you are interested in building something fast, you need to be fast, and you need to be easy. sappers pretty cool. Awesome. We're going to shamelessly plug our courses now mine are available at Wes bos.com forward slash courses, which hopefully by the time you listen to this, I should have my my new website live. And that's my new course page as well. So check it out. Use coupon code syntax for 10 bucks off any of my courses and they were likely also still be on sale due to the current pandemic situation. Holler Yes. And my courses are at level up tutorials.com forward slash pro sign up to become a pro today and you'll get access to well, just a ton of premium content that I've been releasing over the years. And what I do is I release a new video series every single month, the video series that's coming this month is on design systems within figma. So if you're interested in learning about design systems, if you're a developer and you want to pick up some design knowledge, or check it out, it's going to be really cool. A lot of fun. All right, thanks so much for tuning in and we will catch you on Monday. Please - -24 -00:47:52,560 --> 00:47:53,340 -Unknown: head on over to syntax.fm - -25 -00:47:53,340 --> 00:48:02,280 -for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax249.srt b/transcripts/Syntax249.srt deleted file mode 100644 index 4874e4c98..000000000 --- a/transcripts/Syntax249.srt +++ /dev/null @@ -1,40 +0,0 @@ -1 -00:00:00,360 --> 00:00:23,550 -Unknown: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Baracuda Bosand Scott El Toro Loco Tolinski - -2 -00:00:23,610 --> 00:00:24,480 -Totally at ski. - -3 -00:00:25,920 --> 00:00:49,680 -Scott Tolinski: Oh, welcome to syntax and this Monday tasty treat. We're gonna be talking about my new website. I got new website, and I tell you all about it. Other than the previous episode, we talked all about what's his new website. My name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me, as always, is the aforementioned Wes Bos. Everybody. Hey, dude. How's it done? - -4 -00:00:50,160 --> 00:01:00,900 -Wes Bos: Good. I'm excited to hear about your new website stack. Yeah, yeah. Let's talk about this look. And spelt. Oh, hey there, look at you. Yeah, yep. - -5 -00:01:00,930 --> 00:14:21,000 -Scott Tolinski: You know, what else is looking spelt is Sentry our sponsor today, Sentry and Sentry.io is the error and Exception Handling tool that is going to really give you the visibility into what's going on your project that you might need, like what is actually happening? What are your users hitting, in fact, I see a little graph qL error popping up in mine right now that says photo ID is required. But a string was not provided letting me know that somewhere in my site, even though it's only occurred, let's see twice here in the past 24 hours. Something happened here where somebody is expecting a photo ID and a graph qL query and it's not hitting them. So now it's up to me to select that error. Hey, I can see that this was introduced in the latest release, I can see exactly when that was being hit. And I can dive into why exactly this bug is happening. Once I have completed this bug, I can say it's fixed in the next release, I can push it up and I can check for regressions, if this thing comes back, you know, I'm gonna get an alert, we're getting an email sent to me that says, hey, you know this thing you thought you fixed? Well, maybe done, you didn't fix it. So Sentry is one of these tools I absolutely know and love myself, we use it all the time both of us do here at syntax. So you're gonna want to check them out, use the coupon code at tasty treat all lowercase all one word, and you were going to get two months for free of Sentry. So check it out. So I think it's so funny that we I don't know when the last time you created a website was for yourself. But the last time I created 2014, we Yes, mine was 2015. So 2014 and 2015. We did not coordinate this. You've been working on yours for a long time. I had been working on mine for about a day or two. And we just so happened to launch them within 24 hours of each other somewhat, or 48 hours of each other within that coordinating that. And we took very different approaches. So we heard all about your approach in the last episode. So this episode, we're going to be talking about the approach that I took to build my site. my brand new website, my previous website, let me tell you was originally written in blaze with Meteor for no reason in particular, other than I was just using Meteor at the time, I didn't even need a database. In fact, it was so so much not needing a database that in 2017 I rewrote it with Gatsby to just get rid of the database. Gatsby version one knows pretty much it. It's like I don't need a database, the hosting is going to be like free to cheap, whatever wanted to use from style components. I did a nice little visual refresh at that time, too. And yeah, I mean, I've largely used my own personal website as a playground of sorts. But what happened was it just sort of sat there and sat there and sat there as these things do. And I didn't want to touch it because it was Gatsby version one, I didn't feel like being a playground because I didn't want to like learn anything with it. So it just sort of just stagnated. And so instead of taking the approach of like, well, I need to carve out some time to make a bigger website, I decided to do our f d relaxed fit development, where I just sort of toss some code at the screen and then push it up whenever I feel like and if it's okay, it's okay. And if it's not, who cares? Because that's the only way I'm going to get this site done. Best way. Yeah, right. Yeah, honestly, just get it up there who cares about it being perfect or whatever, just get it up. It's better than having a website from 2014 or 2015. And that's it. That's largely like my outlook on it. I'm never going to do it if I need to sit down for a couple hours and like really grind on this thing. So I just thought, hey, it would be a good opportunity for me to do this. I obviously want it to be some sort of a static site generator at this point, because there's no database, there's no need for that kind of thing. If I'm doing blog posts, they're probably going to be something like markdown. So I started to look at different projects. I could have done it and all sorts of stuff. I could have just done it in Gatsby, but since I wanted to do something fun with it. I chose sapper, which if you are not familiar with sapper, it's sort of the next .js equivalent of word nuxt equivalent of the spelt world. And it has built in static generation out of the box, super easy static generation. It does the folder route thing that next JS does in many of these other platforms where your folders are sort of determined the whole routing system, the site, it does a lot of stuff for you. Let me tell you, spelt does so many little things for you that it just makes developing in it and a breeze like I haven't had to go hunt for any extensions, any extensions to spelled itself because spelt does the animation portions of things. Like for instance, I have all these different page transitions. And these are all built into spelt itself. I didn't have to go hunt for a specific animation library. I didn't have to hunt for anything. I'm not using anything like styled components, really just CSS. I'm not even using sass on this. It's just straight up CSS. We're using just markdown files for all of the individual blog posts, which is kind of wild that I'm even doing a blog because I've never done a blog before really. In fact, the only reason I'm doing a blog for this site is not so that I maintain some sort of a blog of constant posts, but so I can use it as a digital garden. Are you familiar with this concept of a digital garden? Is that like the CSS Zen garden where you can restyle the thing? It's not, it's not like that? No, what is it? Okay, so I first heard about this from Joel hooks. And then I've also heard about it from Sean swix. And so I've been hearing this this topic, a lot of just around about a digital garden and like what this whole thing is. So I don't know if you are familiar with Maggie Ableton, she does all those really neat illustrations for a cat and a bunch of other people. But so she did this really amazing Twitter thread her her Twitter is at Maple tons. She did a really amazing Twitter thread a few days ago about digital gardens. And it was like a multi step one where she showed off a bunch of different people's digital gardens. And it's you could think of it as like a personal notion like a personal brain dump, of if you're reading a blog post, or you're watching a video, you pulling out the key concepts like taking notes like you would in school, but like your bullet points, and then just throwing them on a page. And like, it doesn't matter if it's a well formatted blog post, it doesn't matter if the English is good, which are all big pluses for me, and considering I'm not a good writer, so I just throw a bunch of stuff on a thing. And it's like our own personal blog space that is SEO friendly. But it also, you know, access a place I can go back to for information anytime I want it. So I built this with the idea that it could be a digital garden for me, easy to update, easy to add posts, easy to do those things. It is no API, no database, it is hosted on Netlify. So that's really nice and easy. You know, we have that continuous integration stuff that they have their CDN all their stuff that you don't want to set up. So I'm a big fan of Netlify, as we know. And of course, if I'm going to host a site like this perfect place for it. Okay, so let's talk a little bit about the site. I used to have a dB. Did you ever have a I guess you did. Because your previous I was on WordPress, I dropped that DB DB life in 2017. And have never looked back. Because that's like DPLA. Yeah, I don't need a database for my personal site. It was just, you know, my personal site was like, three or four additions of my personal site. So I used to redo it all the time on Drupal. And I just remember thinking like, what a heavy handed approach to that. Yeah, you think you get like all those neat things with the image compression and whatever. But like, dang, that's a heavy handed way to do that. I don't need to CMS. Yeah, that's a lot to maintain. It is. And since I'm a dev and I want to just throw a markdown file and just throw a markdown file. So I'm largely just using this as the playground for sort of wild animations that I don't normally do that I'm like too afraid to do on actual things. So I have this like really neat animation that's sort of ghostie it, like stretches, and does all this neat stuff here and fades away and blurs and this is all done with spelt default animation library out of the box. It's really nice and easy. You can do really custom animations with it. How does it stretch it? Because it's, I guess, just with the Transform, hey, so I'm doing a blur and doing a very slight translate. I'm doing a a scale y. And I change the origin to be the top middle so that it starts at the top and pulls it down. And then I'm doing a slight skew as well. But and then maybe not so much. And then an opacity change. So just like random stuff. I was trying to get it. You won't be familiar, but you might be familiar with this. If you've ever played the video game doom. Yes. Oh, yeah. Actually a long, long time ago. Obviously. It's a super old game. Yeah, there was like some transition and do Where does that like stretches out look kind of neat. There's this like desert and stuff. So obviously it's not going to look the same as mine. But that was definitely the inspiration for this. I was definitely going as furred terms of visual design, which is certainly not complete yet. I was going for brutalist. I wasn't going for like, ugly, but I'm definitely going for more brutalist, it's clearly like a black backdrop I text large text, I'm using the CSS color blue, which no one does when they're doing brutalist design nowadays, there's something just blue, yes to blue. And that's pretty much it. The whole thing is just meant to be just sort of a place for me to goof around, which is, you know, something I'm into. And let me tell you, one of the coolest things about working in spelt here, let me pull this up. I'm going to pull up the homepage. Let me refresh this homepage, this whole thing. Let's see, it took 150 milliseconds to load. And it looks like 60 k bees total. So really pretty small site here. I'm trying to even see where those 60 k bees I bet all of those 60 k bees get to guess what? So my site is 60 k bees to load, right? Guess how many of those cavies are from a font? How many 40? Wow. So two thirds of the download time of my website is spent downloading a font. And so the actual site is tiny. And that's really part of the benefit of using spelt, the whole thing compiles away, and you never have to ship the framework. It just ships code ships JavaScript running anywhere you want. And I'm a huge fan of this platform overall. You know what I might even it seems wild considering I just push this thing up. But Sean swix is done some sort of spelt SSG thing himself. Yeah. Might take a look at what he's doing because he describes sappers approaches a bit heavy handed. And I think this is maybe just extrude up SSG. We're sappers trying to be, you know, server side platform if you need it. That's it. I haven't done Oh, yes, he has a YouTube video giving a talk on it. And I know it's still pretty early days for his project here. But yeah, might give this a try. I know I think his website itself is doing that. I know his website is on its felt. So yeah, pretty cool stuff. Man. I'm a big fan of this, I think there's a large opportunity for me to improve it based on mobile styles and whatever. But you know what, like I said, relaxed fit development, it's going to just be here, it's going to be easy for me to add my talks, my appearances and all those things on here and just drop them in whenever I want. That sweet continuous integration from Netlify. Totally, I think 2020 is the year of the personal website. Right? You know, there was, um, tilbake you ever hear of tilde a club? A No. So tilt a club. It was like an exclusive social network, which is basically like trying to be like a web ring, where they had limited spaces in here. And it's funny because I actually got a tilde a club, or the whole thing of a tilde a club is like only runs HTML and CSS. And the goal of a tilde a club was to take us back to the web of yesteryear. Oh, the website is tilde a dot club. And my tilbake club that I had, when I had it, I don't know if it's still even exists. Let's see if I can find it as 20. I don't even know what it is under. But my today club was much more like this current iteration of my website than my actual website was like, I had this tour de club several years ago. And it was to do all of the things I was to, like, I don't want to say scared because I wasn't literally scared. But I didn't have the guts to do on my actual personal website. You know, I thought my personal website had to be this pristine thing that had to just exist and be, you know, perfect to attract customers. And guess what? I don't care about attracting customers. I don't care about that stuff. I just want to have some like neat place online. Just like I did back in the days of MySpace. Awesome. Yeah. Oh, that's pretty cool. Check it out. What is it? He didn't I don't think he even said the URL Scott to lynskey.com. Scott to lynskey.com. The link is, is everywhere. I have it in the show notes if you don't want to figure out how to type my entire last name. - -6 -00:14:22,620 --> 00:14:26,940 -Wes Bos: Awesome. Well, thanks for sharing that out. I'm excited to see what else you add to this thing. - -7 -00:14:27,210 --> 00:14:31,050 -Scott Tolinski: Oh, yeah. It's gonna be fun. The whole thing is for it to be fun. That's the goal. - -8 -00:14:31,590 --> 00:14:32,280 -Wes Bos: Beautiful. - -9 -00:14:32,460 --> 00:14:36,120 -All right. Thanks for tuning in and we'll catch you on the next one. Please. - -10 -00:14:39,210 --> 00:14:48,960 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax25.srt b/transcripts/Syntax25.srt deleted file mode 100644 index 9673ac5d0..000000000 --- a/transcripts/Syntax25.srt +++ /dev/null @@ -1,224 +0,0 @@ -1 -00:00:01,290 --> 00:00:10,619 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to Lynskey and West boss. - -2 -00:00:11,250 --> 00:01:09,980 -Wes Bos: Hello, everybody, welcome to syntax today, we got another minisode for you. And we're gonna be talking about how to deal with email, how to deal with email overwhelm, everyone's got way too much email. And I don't know, I think I hit a bit of a breaking point in 2017 with my email because it was just something that was taking too much of my time, something that I hated doing. It just was, it's it was just a big problem for me. And I've, I think I've solved it. And I sort of took all of my ideas into solving it and put it into a system. My whole my whole mantra to life is called make it a thing. And so I took all of my lessons learned from from solving my email woes, and put it into this thing called the breakout email management system. So what we're gonna do today is we're going to go through the main points of the breakout email system, and I'll sort of explain how what they are and how they might help you. So house How you doing today, Scott? Doing good, I look how you, - -3 -00:01:10,310 --> 00:01:14,730 -Scott Tolinski: you gave that minisode a little bit of a character there was that minisode? - -4 -00:01:15,299 --> 00:01:24,959 -Wes Bos: So I, we haven't decided on if it's a minisode or not, like if this is a word that we want to use, but I kind of like it. - -5 -00:01:24,989 --> 00:01:27,930 -Scott Tolinski: Yeah, I got to just sort of organically popped up or maybe - -6 -00:01:27,930 --> 00:02:01,829 -Wes Bos: like a snack episode, you know, tasty. snack is okay, if you please vote, tweet us, if you like snack episode, or minisode better. This episode is sponsored by fresh books, fresh books is the easy to use Cloud accounting software, that I've been using myself for many, many years. So if you are running any sort of small business, or you need to build somebody, go to freshbooks comm for slash syntax. And you sign up for a one month free. We'll talk a little bit more about them partway through the show. - -7 -00:02:02,939 --> 00:02:04,860 -Unknown: Nice. So So yeah, just - -8 -00:02:05,310 --> 00:02:06,209 -Wes Bos: get into it. - -9 -00:02:06,390 --> 00:02:14,690 -Scott Tolinski: Yeah, let's get into it. And maybe as before, we could talk a little bit about you know, your inbox in anxiety. - -10 -00:02:15,630 --> 00:02:16,250 -Wes Bos: Yes, - -11 -00:02:16,260 --> 00:02:25,620 -Scott Tolinski: right. Like, I don't know, it actually gives me anxiety to see other people's inboxes have like 1000 unread emails and stuff like that. So - -12 -00:02:26,160 --> 00:02:41,880 -Wes Bos: yeah, that is absolutely no way to live your life. It's just like, remembering that like you talk about like cognitive load for load. And the people, what they do is they remember how many they had. And then if it goes up by three, they know they have three new ones. Like, that's, that's a terrible way to live your life. It's terrible. And it's got - -13 -00:02:41,880 --> 00:03:13,710 -Scott Tolinski: to feel like, you know, like hoarders when they're their house just feels like it's the walls are closing in on them or something like that, you know, you're the guy that has to feel like very, very restricting. And I know personally, because there was points in my life, maybe it was college or wherever, where my inbox was totally out of control. And so I practice trying to get zero inbox every day. But I'm really interested to hear about this this system, because I don't know the details of your your breakout system. - -14 -00:03:14,070 --> 00:05:24,380 -Wes Bos: Yeah, cool. Well, let's let's get into I actually don't, don't do inbox zero. And I think a big chunk of this big breakout email system is just not carrying all that much about your email, because it will always keep coming in there will always be too much. But that said, like, there's probably people listening to be like, this guy's talking about how good he is an email. Yeah, he doesn't. He hasn't emailed me back in, in a month. And the the answer to that is I know, there's a lot of emails, I haven't. And I'll probably eventually get to it. Or maybe I won't, but I know that at the end of the day, my people that have pressing issues, they've been fixed. And I am not spending more time on my email because I've got better stuff to do. Email is busy work for me. And I need to be recording courses and actually running my business rather than being busy in the process that is email. So let's start off with the the first point of this email system is to decide I have here the core of breakout is that you likely don't have an email problem, you likely have a decision problem. So it's human nature to avoid having to make decisions to defer to a better time to to leave that email to not open it to leave it sealed, because you saw the first line you're like, Oh, I don't want to deal with that right now. And and that's really like if we like hit home as to like, what is my email problem? It's that I hate to make some sort of decisions. Specifically, the big one for me right now is is replying to people about conferences that are a year away and they're like, hey, do you want to come? And I'm like, I don't know. Maybe yes, the kind of I don't want to make the decision right now. So what I did is, is I stopped doing that I'm going to deal with that later. And I just forced myself to actually make a decision. And if it's something that I'm sort of not feeling great about, I know that I can just just turn it down or just tell them I'm just I don't have time to reply to this right now. And that alleviate alleviated a lot of the stress of email for me, because, again, it wasn't the fact that I just opened up my email. And - -15 -00:05:24,660 --> 00:05:26,940 -Unknown: sorry, did you hear that? The wind chimes? - -16 -00:05:29,610 --> 00:07:07,290 -Wes Bos: doorbell. Okay. What was I saying? Oh, yeah, it wasn't that it was this decision paralysis, where I just had too many decisions to make in a day, and I just didn't have the mental energy to do that. So being able to sit down and go through it is had really, really helped me out. So how do you how do you deal with that? Let's go to the next one. The first one is kill it at the source. So whenever an email inbox comes to me now I just say like, how do I stop this from coming into my email inbox? Like if people the one of them for me was that people would always email me and request amendments to the receipts being like, especially in Europe, there's weird tax laws there. And they say, can you add this to the receipt? Can you do this, and for me that it was causing a lot of extra busy work. And I thought, like it shouldn't ever actually hit my, my email address, or people would sign up with people like 11 different email accounts. And then they're like, I signed up with 42 different email accounts, and you merge them all for me. So what I did is I just built tooling to allow the person to merge them themselves or I built I what I did is they just stuck a content editable on the receipt. And then if something's not right on your seat, change it yourself, and just print it from there. I don't care what you put on your receipt to make your company happy. I'll trust you on that. So finding out like, what is the source of these problems? And how do I stop them from getting into my inbox in the first place? And as a flipside, that also made my customers much more happy? Because they didn't have to email me and wait for me to actually reply. - -17 -00:07:08,370 --> 00:07:37,139 -Scott Tolinski: Yeah, I like this. There's a lot of this stuff that I deal with where my contact form gets hit a lot with tech questions like, how do I do this, or I'm trying to do this or that and whatever. And this is, this is a non a non technical solution to that. But I just put up a text. It's saying, like, if you email me with technical questions, I will not answer them. Like, I will not answer your email and that cut down, it doesn't completely eliminate it, - -18 -00:07:37,139 --> 00:08:54,990 -Wes Bos: I still maybe get one or two a day, but a cut down significantly amount of just the tech questions I get in my inbox. And then once I do get my inbox, I don't answer anyway. So you know, I think that that kind of system is much needed to recognize these patterns. Exactly, exactly. Next one is the your inbox is not the world's to do list. So we talked earlier about our productivity show about getting things done, and being able to have a to do list and to focus on that. Whereas a lot of people treat their email inbox as a to do list that anybody in the world has right access to, and anyone in the world can add stuff to. So as stuff comes into your inbox, you need to deal with it. And if it is a to do item, you need to process that and put it into the appropriate thing. So in my case, if there's something in my email inbox that I need to deal with, but I can't deal with it at the that given time, I don't leave it in my inbox, I put it into a to do list, assign it an area, put a due date on it if if needed, and then archive that email. Because it's it's not something you should as when you open it, you should deal with it right then and there and have a process and a system for following up with that piece of email if it's needed. - -19 -00:08:55,710 --> 00:09:10,380 -Scott Tolinski: Yeah, I agree with this. And it's a great way to, again, clear out that that inbox clutter. Exactly the inbox. I mean, it's the name is the inbox, it's not the place where email lives forever. Decide what yeah, that - -20 -00:09:10,400 --> 00:10:56,520 -Wes Bos: that's the whole idea behind the you would have an inbox and you would use to have an outbox, right. And you would, you would just process it, you wouldn't just leave it all in your inbox, you would put it in your your outbox. Next one I have is filtering. So I've spent a lot of time like, Gmail has these, I use Gmail. And they have these tabs that filter for social promotions, updates and forms, which is great because I'll often just select all and delete it, because I don't necessarily care but they're not perfect. And what I like to do is just create I have these massive, these rules in Gmail or anything that comes from Basecamp or slack or GitHub or Trello or PayPal or Asana or anything like that, it will automatically apply a tag to it and then I can just go through those times. And I know that anything that is in that I can just safely delete and that will just blow it away. And that'll that'll really bring the the number of emails in my inbox down similarily automatic reply, I get hundreds of these because my email list is fairly large. And all of Germany is always on vacation. So if I send out an email, I get hundreds of Germans auto reply with automatic dished antwort. And I built this massive rule of every single language of out of reply, I tweeted it out. And people people made this really big rule that said, anytime that has a response automatic or auto reply or out of office or in every language, and then it'll just automatically archive those because I do not care if you're out of the office and just automatically throw those into the trash for me, which is great. Nice. So yeah, spending some time on filters is well worth your time. - -21 -00:10:56,550 --> 00:11:21,720 -Scott Tolinski: Yeah, yeah. And I filter, anything that comes from any sort of like, sales email, or anything like that, or newsletter, I'll unsubscribe. But I'll also put a filter on it just in case, you know, some of those emails come back. And they're like, Hey, you know, even though you unsubscribe, we're still sending you email, because I don't know if that happens to you. But that happens to me all the time. - -22 -00:11:22,770 --> 00:14:58,020 -Wes Bos: Yeah, absolutely. Let's talk a little bit about our sponsor, which is fresh books, you know that I absolutely love to use fresh books for keeping track of my expenses, doing my invoices, and all this stuff. And one of my favorite features of fresh books is that you can allow it to automatically follow up with people who have not yet paid. So if you have a client, and you send them an invoice for 1000 bucks, and you say it's due at a certain point, first of all, you can see when they've seen the invoice so there's none of that like back and forth, like, Oh, I never saw it. Like, I can see that you opened it up, and you saw it. And second of all, it will automatically follow up with them if they have not yet paid. And it's nice because the robot is doing that not actually you. So if you are a small business owner, and you need invoicing system, cloud accounting software, being able to keep track of your expenses, and all that good stuff, check out freshbooks.com forward slash syntax and enter in syntax into the How did you hear about a section, automate and expand is the next tip. So tech support goes to slack, obscure programming questions, I send them to StackOverflow questions of all my text editor or anything that like what font Do you use goes to Wes Bos calm for such uses. I get a lot of people who who want advice, they say, this is my very specific situation, what should I do. And the reality is, is that you most of those people just need a little bit of motivation, they just want you to be like, hey, like, keep going keep going at it. And you'll do great, because your situation is not unique, you just need to put in a lot of time and build a lot of stuff. And you'll get good at programming. So I just sort of like D is stuff that like like that needs to be redirected elsewhere because it doesn't belong in my inbox. So those redirects can seem sort of rash and cold. Like I don't like that I have to do this to people, but I need a fast way to redirect people out of it. So what I use is text expander for these common emails where I have like, I type colon brief, and it just doesn't say like, hey, thanks so much for the email. I apologize if this email is brief, I do get a lot of it. I really wish I could spend more time on it. But I am short on time right now. And then I will then I will type exactly what I want. And that little little bit of like humaneness before I do. The redirect really helps in it, it gives people like a little bit of a better feeling because we've all gotten like short emails and tone is often lost on online. And I don't want to leave people with sort of like a sour taste in their mouth. What else do we have here? So that's another reason is that often emails that need like, empathetic response, often emails that need a little bit of time, those are the ones that you put off, because you need to figure out okay, how do I reply to this properly, I need to reach deep and have a little bit of empathy in this one. And those are the ones that you're like, ah, I'll do this later. I don't have time. I can't can't be bothered with it right now and say you should not be it should not be putting away so things like that text expander I have lots of little snippets often what I'll do is if I copy their name Optech Spanner automatically input it into the response. So if you if you say the person's name, it looks a little bit more human which is ironic because it's not because it's a automated response. But it allows me to have the level of humaneness that I want with the sheer amount that I actually get. So I've been pretty happy with with the TextExpander automation that I've been been using. - -23 -00:14:58,050 --> 00:15:04,260 -Scott Tolinski: Nice yeah I really need to get set up with text expander in a much greater way. - -24 -00:15:05,190 --> 00:16:21,330 -Wes Bos: Yeah is also you can check out a text, which is like a $5 replacement at Tech spender recently switched over to like the monthly, which is brutal. I haven't haven't upgraded to the new one yet, they just didn't add any features and then started charging you monthly for instead of just a one time purchase. So a tax is a nice little alternative there. Um, next one is dictation. So OSX has a really good dictation built into it, where if you turn it on and you download this like two gig file, it will be really good at being able to take your text and make it into speech. So I'll just hit function function, and then it will just take whatever it is that you're saying and put it into an email. So I often will do that because it's both quicker and also comes off a little bit more human than typed text because it's just me typing into or me talking into a microphone. And doing that so huge fan of dictation. It's come a long, long way. And it's pretty good. You still have to go over really quickly. Or I'll just put like a quick like, Hey, sorry if there's like weird. I have had some like really weird ones where I didn't catch mistakes. But often Yes. But like, Hey, I dictated this. So apologies for any weird. Any weird issues that that got my way? Yeah, yeah, this - -25 -00:16:21,330 --> 00:16:53,100 -Scott Tolinski: actually that's something that I would have been interested in a lot more in general anyways, is dictation for me. Because obviously, I'm decent enough at recording audio, like I talk into a microphone for the videos in this podcast, right? Yeah, I'm a terrible writer. And so maybe the solution for me writing blog posts isn't, isn't to write a blog post more, it's to just talk it out and then edit it later. So in not in the context of email, obviously, but dictation is definitely something that I'm super interested in right now. - -26 -00:16:53,670 --> 00:17:21,350 -Wes Bos: Exactly. I had my my entire ESX course I had it captioned. And then I took those captions to a technical writer, and the technical writer turned them into blog posts. So it was me speaking into a microphone. And eventually they ended up as beautiful blog posts that are helpful for everybody. And also gives me a really nice Google boost, because I've got 60 blog posts on JavaScript that will show up when you search for something - -27 -00:17:21,560 --> 00:17:22,170 -Unknown: nice. - -28 -00:17:23,760 --> 00:20:59,760 -Wes Bos: video responses, I don't use this a whole lot. But often, especially like people are doing like a school project, or they want to have an interview or something like that. And then they send me a list of like, 47 questions that I have to then reply to, and they're gonna publish it on their blog. And sometimes I don't do these because it's a bit of a tactic to write a blog posts, email, everybody who has more than 80,000 Twitter followers for their opinion. And then and then email them back once it's published and ask for a share. So that's a bit of a, I don't know, I'm not really stoked on that tactic. But often people will have like, legitimate questions for me, and they want to put it into a blog post. Whereas like, I just like, I don't want to type this because it's gonna take me forever. So I'll just flip on my email, I'll flip on my video recorder on cloud app, or, or just do an audio one. And I'll just talk through all the questions as fast as I can. And then I say, I'll just give it to them and be like, here, good luck, like transcribe it, if you like anything that I've said, nice otherwise, nothing that I have there. Um, should you defer. So deferring email should be a last resort, if you need to reply to email, but you're waiting on another party, you can defer it. So whether using a Google has like a snooze feature, where you can just get out of your inbox and snooze it until the next day. And I'm a big fan of that for things that you actually are waiting on somebody else, and you can't archive it, but you just want it off your plate. So you stop thinking about it. And deferring is really good for that. Next one, batch processing is I often will do an email just once or twice a day, I'll have it open all day, just in case something like a fire comes up. But usually I will just like not touch my email. And then once a day, I'll just go through it as fast as I can, I'll blow through it. And even now I've since I've written this, I have an assistant as well, that takes care of a good chunk of the email and she uses the same tactics that I do. And it's just that you go through it a couple times a day, blow through it, all the questions are, mostly have answers that can be solved within a minute or two. And then anything else is where I'll go through it once at once or twice a day. And and add my own little touch to that. Nice, I'm a big fan of using send an archive and or auto advance in Gmail because what that will do is as you send one it will automatically bring another one up, and then it doesn't give you a chance to sort of escape When can because if it's marked as red, then you have to, then you got to deal with it, you can't just like keep leaving it in your inbox. So there's a it's it's in Gmail labs where you can turn it on, where when you archive an email, it will automatically put another one on your plate and it won't bring you back to your inbox. It'll just give you the next one, which is great. And finally, my last tip is stop emailing yourself. There are lots of different good places that you can store information rather than emailing it to yourself. People always just send themselves attachments or reminders or something like that. your email inbox is not a to do list. So get a proper to do list. If you have information, put it in Evernote, put it in Pinterest, put it in Dropbox, put it in Google Drive, airdrop it to somebody. There's not a whole lot of use case for emailing stuff to yourself. Yeah, any more. Yeah, and that just again, that just clutters up your inbox, it's not not necessary. - -29 -00:21:00,239 --> 00:21:09,510 -Scott Tolinski: Yeah, I've never been a huge fan of emailing myself, because you're right. I mean, there's a billion other things that would do that better for you anyway, so yeah, love these tips. - -30 -00:21:09,780 --> 00:21:34,580 -Wes Bos: Cool. So that's that's it. For me. Those things have really helped me a lot this year. I've been really happy with all this different process. And it's it's not perfect. I like I sit right here right now I have 44 new emails I've come in the last 20 hours. But I know that when I do do it, I'll probably be able to deal with it in less than half an hour. Yeah. And then I'll be happy about it. One - -31 -00:21:34,800 --> 00:22:04,260 -Scott Tolinski: couple things I might want to add. Obviously, these aren't part of your system. But I know this is cliche at this point, but make time to focus on your email and then like close it for the rest of the day, like yeah, from nine to 10 is usually when I work on email, or take care of all my email every single day. And then I never ever open it again for the rest of the day. turn off notifications on your phone that stuff will drive you nuts. Because notification every time sends you an email nothing is that urgent. - -32 -00:22:04,860 --> 00:22:21,000 -Wes Bos: Especially on the weekend that can wreck your wreck your weekend when you accidentally see something that will like whether it's a bad review or somebody Yeah, like someone emails you in the say they're disappointed in the content that will really ruin your day. So yeah, - -33 -00:22:21,000 --> 00:23:36,390 -Scott Tolinski: and you're not gonna take care of it on a Sunday anyways. Exactly. Also, what unsubscribed from email us obviously ones that aren't not mine, West scissor or mine. Yeah. But if if target is sending you emails, they're like, do you need emails from Target? Like, do you need emails from Costco or IKEA Niemeyer? I don't Yeah, I don't need emails from those people. But occasionally you get signed up for those things. And you just sort of let those emails come in and ignored and stuff like that. Obviously, if it's high value content, like Wess and mine, you want to keep those emails but for for, like low value content that comes all the time. Like for instance, there's a really awesome savory spice shop in Denver, Colorado. And we we'd love to savory spice shop, and we just kept using my mother's account so that she would get all the bonus points every time we bought anything there. And then yeah, a couple weeks ago, I signed up for an account myself, and they send me three to four emails a day, and no way. Yeah, yeah, I told, told Courtney, I was just like, I just got another email from savory spice shop. I need to end this right now. It's it became just like, I love you guys. But cut it out. - -34 -00:23:36,419 --> 00:25:21,750 -Wes Bos: Yeah, yeah, seriously. And I especially like when they ask for your email at the cash register. I'm just like, No, No, No way. No way I unsubscribe from absolutely everything. The only like, the only sort of like things that I don't unsubscribe to is people that are also in my industry. Because often what I want to do is I want to go back and look at what are people in, in our industry, or people that are sort of like selling stuff in a in a different industry, but kind of the same way, I'll often like to go back and see how they're doing it. But I will definitely auto archive all of those things. So you're it's not not taking up space in your head nice. And in your inbox and in your inbox. Cool. So uh, if you have any tips, make sure you tweet them at syntax FM, we're going to move on to the listener question. And we're gonna we're trying this out. We're going to every episode we're going to just try to answer a little question that has come our way if you have any make sure you just sent no send us a send us an email, send us a Tweet, whatever it is that you want to do. So today's question is about prettier, which is the the JavaScript format or that has just exploded in last last year or so. And if you haven't heard of it, what it will do is you just write your JavaScript in a will automatically format it to whatever settings that you you sort of have turned on and on I really like this because you don't have to spend any time making sure you've properly indented or, or put the put arguments on single lines or any of these rules, it will just do it for you. And you don't have to worry about it at all. So I get a lot of questions about like, how do you actually set up prettier? And it'd be interesting to see just Scott and I are real quick. How do we have prettier setup for our own dev? - -35 -00:25:22,050 --> 00:25:44,100 -Scott Tolinski: Yeah, so I personally have the ES lint plugin for prettier and in my es lint.or.ts lint RC file, I simply just have it listed in the plugins prettier. And that's it takes care of everything for me, and then I zero configuration on top of it and just let it do its thing. - -36 -00:25:44,970 --> 00:25:55,470 -Wes Bos: Oh, wow. Awesome. I also use the ES lint. So es lint is I know it's already hard to explain what Yes, lint is and people are getting a bit butthurt lately about - -37 -00:25:57,450 --> 00:26:05,610 -Unknown: improperly explaining what Yes, lint, it just finds issues or configure it or it finds issues or syntax wise or - -38 -00:26:06,480 --> 00:26:15,240 -Scott Tolinski: Yeah, structure wise or any of that in your JavaScript code and fixes it based on a set of parameters that you've either set or brought in with patches, plugins, whatever. - -39 -00:26:15,660 --> 00:26:46,500 -Wes Bos: Exactly, exactly. And prettier is is focused on syntax and like code best practices format. And yeah, format and es lint is more focused on improper coding where if you forgot to improperly scope something or you have forgotten? I don't know. What are some of the other I should open up my slides here. I have hundreds of settings in it. Yes. Oh yeah, you - -40 -00:26:46,500 --> 00:26:59,970 -Scott Tolinski: open it up. Find it even just fixes my tabbing it fixes my usage of semi colons it automatically alert me if maybe I'm missing prop types or default props and react. It does - -41 -00:26:59,970 --> 00:27:45,690 -Wes Bos: a lot a lot of stuff for me comma Dame dangle calm making sure you always have a function name or not, I have that one turned on moving whitespace like unnecessary space for parenthese. Those, there's a whole bunch of ones for for react and whatnot. So I have that all in my es lint. And then when I have my my prettier, I will just install the the prettier plugin and then it will auto fix all of the stuff in prettier started off as a zero config. But they have bent a little bit and added a couple different settings for it. Specifically, I have the ability to I have trailing comma set to s5 I don't even know what that is. Like trailing comma is after? - -42 -00:27:46,500 --> 00:27:48,630 -Scott Tolinski: Yeah, do you I use a trailing comma. - -43 -00:27:48,900 --> 00:28:06,000 -Wes Bos: And lady. Because the because of the the get change. I really like the fact that you don't have to mess with the previous line with it. Yeah, I've changed it to single quotes instead of double. And then I've set my column width to 120 instead of the default 80. Just because yeah, - -44 -00:28:06,000 --> 00:28:10,680 -Scott Tolinski: cuz Yeah, I got who can do 80 like that, who I don't know. That's why apparently - -45 -00:28:10,680 --> 00:28:23,040 -Wes Bos: everybody and they have like multiple columns open at once. But I got a big monitor. And I'm happy with that. It's kind of the nice thing about being a dev on your own is you don't have to conform to a team standard. You can just have your own settings. Yeah. - -46 -00:28:23,040 --> 00:28:39,960 -Scott Tolinski: And I have actually had mine set to 160 I didn't realize I had that. Whoa, No, I know. I do like short lines. But I think then I keep my my, my type size pretty small. Like kind of squinting Deaf to see it smell. So I just - -47 -00:28:39,960 --> 00:28:47,610 -Wes Bos: like them. And then here's a question. Do you have it? In VS code? Do you have it? format on Save? - -48 -00:28:47,669 --> 00:29:03,390 -Scott Tolinski: I have it format on Save? Yeah, yeah, cuz I love that I love not having to worry about space after and tabs and they add stuff hitting Command S and just seeing everything sort of getting the line. I love that I don't want to say Hey, man, fix yourself up. I just wanted to, - -49 -00:29:03,660 --> 00:29:41,370 -Wes Bos: it's funny I used to, when I taught i would i would give feedback to students. And I would always tell them, like, make sure you watch your indentation and, and make sure that you're like you're properly indenting because this this code is a bit hard to read. Whereas I look back at it now. And I was like prettier is the ultimate beginner's tool, because you don't have to worry about the proper formatting indentation and where everything goes it will just fix it for you. And it will make your code extremely readable. So prettier also works on HTML and CSS and a bunch of different It started off just JavaScript but works on a bunch of different languages as well. Yeah, - -50 -00:29:41,370 --> 00:29:56,760 -Scott Tolinski: I would say my code is pretty terribly red. If I'm not using es lint like I've just I've been in it so much to fix on Save that. If I don't use it, I've just like my muscle memory is completely gone for making sure it's formatted correctly. - -51 -00:29:56,790 --> 00:30:09,600 -Wes Bos: There's also a i a format on paste in VS code as well. So if you're pasting in code from somebody else's code or from online it will automatically format it as you paste in which is pretty neat. - -52 -00:30:10,200 --> 00:30:11,360 -Unknown: super neat. So - -53 -00:30:11,580 --> 00:30:17,340 -Wes Bos: big fan of prettier. Check it out. You got anything else for me, Scott or should we wrap this puppy up? - -54 -00:30:17,340 --> 00:30:21,900 -Scott Tolinski: Let's wrap it up. Let's wrap this snack up. That's an episode. - -55 -00:30:22,350 --> 00:30:29,160 -Wes Bos: Thanks for snacking with us. See you in the next one. Bye. Bye, - -56 -00:30:29,190 --> 00:30:38,460 -Scott Tolinski: see, don't overdo syntex.fm for a full archive of all our shows, don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax250.srt b/transcripts/Syntax250.srt deleted file mode 100644 index e2e2936fa..000000000 --- a/transcripts/Syntax250.srt +++ /dev/null @@ -1,204 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,830 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bis - -2 -00:00:10,830 --> 00:00:20,790 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there. My name is Wes Bos and with me as always is Mr. Scott Tolinksi. How you doing today, Scott? - -3 -00:00:21,180 --> 00:03:00,030 -Scott Tolinski: Hey, yeah, I'm doing good, you know, living that life that we're all in right now. And just doing the best we can. That's the slogan. But yeah, how are you doing? I'm doing pretty good. A little frustrated at my internet right now. It's being very slow. We've got actually, I think a an update to the Rural Internet, rural rural rule, how they say that Rural Internet, which usually I get about 12 megabits down, which is more than enough for nice and fast internet. But right now it's it's choke out about like, yeah, I'm getting three right now, which is okay for for recording this podcast, and I can see your video, but latency is too bad. And if my kids start watching a show or something like that, then the whole thing just comes crashing down. So I'm doing a little bit of research on the Can I just get a secondary setup of what I currently have just like my own my own line? Yeah, I know. See, now is not the time for me to brag about my internet, but I'm like wired via Ethernet? No, man. It's like, My office is the main connection here. And everybody else can get the slower internet in the house. Cool. Yeah, I'm actually going to set up like some sort of policy or something that says Like, my computer, gets it for, like, prioritization. And then the iPad is good static IP setup. I don't know, I don't, I was gonna say, cuz that'd be really easy to do. If you did, I don't know what that entails personally, because I've never done that. It's in the, somewhere in the ubiquity UI of the thing that I can log into. I did it with my amplifier at home, which I gave priority to my own computer and the TV, which is just very simple. And now with the ubiquity setup that I have up here, I've got to figure out how to do that just yet. Nice. But anyways, let's uh, let's talk about our sponsors, which is Sanity and Stackbit Have you noticed all of our sponsors start with s? I kind of have noticed that Sanity Sentry Stackbit Yes, it is. It is interesting. Yeah. Netlify you got to change Netlify has got to change their their company name to Sarah Ravel. vair was doing a play on verso. So today we are talking about spelt and sapper, which I know nothing about. So this is gonna be another Scott teaches West episode, where Scott lays down the info about spelt and sapper. And I'm gonna be asking him questions and sort of saying, Hmm, that's really neat. That's really cool. And things like that. Yeah, - -4 -00:03:00,330 --> 00:04:13,050 -I think we might be getting a boatload of those in these in this episode. Because there's a lot of cool stuff in spelt, that like directly takes care of a lot of pain points that you experience in other frameworks. So let's dive into it. For those of you who don't know what spelt is. It's a JavaScript framework, Allah react Angular view, it takes care of the view layer for you. And the value proposition of spelt, which is really opens the door to all the unique things that spelt can do is really the fact that it compiles away. So the compiler, when it builds the site, it entirely removes the framework from your code, basically allowing you to have much smaller bundle sizes, it takes it down to just JavaScript, and therefore you're not shipping the entire framework, you get to ship this version of the framework that's been compiled into your code. So it's really fantastic. Which means they get to include a ton of things into the base framework that other frameworks can have due to fear of bloat without having to worry about bloat because you're not shipping any of it. So it compiles the way I've always - -5 -00:04:13,050 --> 00:04:44,280 -Wes Bos: wondered about that, like how it like compiles away. So like, are the features just not needed in the browser? Or, like, how does that work? If you need to do any of this in the browser, or is it is it just static and you you can't do any of that stuff? Obviously, it's not just static, because it's a it's a JavaScript framework, right? It just turns it into straight up JavaScript. But isn't that what like react is under the hood? Like react? If you just view source on react? It's it's just JavaScript as well, right? So like, what's the difference there? - -6 -00:04:44,580 --> 00:05:24,330 -Scott Tolinski: Yeah, but think about it. You have to think about when you minify or compress things. You have your react code, which is already minified, compressed, whatever it exists as its thing. Your code exists as its thing when it wants something it calls something else that does some other stuff. It does some other stuff. With this, it allows the the framework to be baked into your code in those aspects and minimize it all together. Somebody just recently did me pull this up, web dev dot Reddit, I just saw this the other day where they did a comparison between Angular and spelt of this exact same project. And it was like, Yeah, 1% of the size. - -7 -00:05:24,450 --> 00:06:22,980 -It's tiny. Like, the bundle of your website is, like 23 K, which is, like, miniscule, that's, that's smaller than you could ever hope to get an image. And I'm just like, wondering, like, how does it actually under Yeah, like, like, let's look at the bundle of my own website, which probably be a little bit different, obviously, like minds, how did they compile it away when you still need the features in the browser, like from like navigating from page to page or doing an animation or doing virtual Dom? Because it compiles down to vanilla, essentially, like, the code that you're working no longer needs to require a framework where like, however big react is, oh, like, it doesn't need the React API? It just will just use that vanilla API under the hood? Correct? Yeah. Oh, yeah. So liens on the stuff that's already in the browser versus leaning on an existing library that's assumed to be loaded on the page. - -8 -00:06:23,310 --> 00:09:19,710 -That's my understanding. And I'll link to that post here. How does the spelt compiler actually work that we can link here as well. So that way, people who want to do a little bit deeper dive there can. So that's the basic selling point, but it allows it to do some really cool stuff, of which we'll get into its component and prop base to just like view, and react. So you have components that our function largely the exact same way as react, you have props that function very similarly, there are some differences, but they're positive differences in my mind, gives you easy reactivity. So you don't need to create state to set state and worry about the state versions of things, you have a variable, whether that's like lead count, and then if you do count is equal to count plus one, then that just updates in the UI. So reactivity is built in, because we mentioned the whole thing compiles away, there's a lot of built in tools like animations that are built in, as well as things like easy binding dimensions to things. There's a lot of really cool stuff we'll talk about later. And the whole thing, the whole view layer is template based. So unlike JSX, which is how they try to say it JSX isn't template based. But this is pretty much template based, where you're accessing variables and that sort of standard way that we've seen before. In older version. Well, I don't know about current Angular, to be honest, current Angular is like, I don't know, it's a mystery to me right now, because I haven't looked into it lately. But you access your variables, basically, based on bracket variable name within your template file. Yeah. So all of your templates are dot spelt files. And each of these template files can include script tags, right? So you guys script at the top, where you do all of your JavaScript, you have your style tag, which is just straight up CSS, which is scoped by default. And everything else below that is just straight up HTML and your template language. And so this makes it really easy to just write a component if you've used view, which I know you have just done. So in a minor capacity view is the same way. So people coming from view are going to feel very comfortable with this. Yeah, I really like that aspect of view. That's the funny thing about it spelt is that, again, just like view did, it takes a lot of lessons from a lot of different things, and really just does the best version of them, I think. So one cool thing is the template tag, the way that it accesses values is just a bracket the value right for you the variable. Yeah, but unlike JSX, you can do some really neat things. Because it's compiled, you can just say image bracket, SRC, and you don't have to do SRC is equal to bracket SRC, which is like totally redundant and unnecessary. Oh, I hate that. Yeah. Because this isn't trying to be an extension of HTML. It's just trying to be a template language. It's trying to make your life a little bit easier. And as far as components go, you just import them and use them just like anything else. Wow. - -9 -00:09:19,800 --> 00:10:07,110 -So before you keep going, I just took a look at your website. Yes. Which your main bundle there is 23. k. Yes. And my website, which my I've got two main bundles, one is a framework bundle, which includes the react and all the Gatsby and the routing and stuff like that, that is hundred 25 K, MB, and then I have my application bundle, which that includes probably all my custom functionality, and that's 214. So mine is probably 10 times obviously my site is much more complex than yours. So right should be much bigger, but still like the Wow, that's quite a big difference for how small even just like baseline like basically Line framework for me is 123. And yours was 23. Right? Like, you can just see there's 100 k difference there. - -10 -00:10:07,380 --> 00:10:25,440 -And I think that's the big value proposition, besides the fact that it's just plain easier to work in. And so I think it's just exciting. It's exciting to see that because it is it's, it's free, free perf you don't have to worry about anything and all of a sudden you get some of that sweet reduction in K B's. You know, we're about that. So - -11 -00:10:25,470 --> 00:10:45,060 -free real estate. It is free real estate you man, you nailed it. meme steady here. Hi, Decker coming in. I think we've had a meme in every show. For the last like two weeks, we spent a minute meaning we've been meaning. Man, the means have reached us. older folks. So we're starting to lamb noun and syntax. - -12 -00:10:45,120 --> 00:11:50,190 -Oh, yes. geezers over here. Yeah. Okay. Styles, you'll be excited to know that all CSS is scoped by default. And you basically put a wrapper around something to say it's global. That's it. Makes sense. So easy. Sounds so easy. I found it like a Dell components type of flow really simple. It's really interesting. You can pass a variable as a class name, and then instantly accept, like, you can basically use class names as sort of like props on variables that have a style components like sort of setup, it's pretty neat. So basically, you just have to tell the config that you're using a preprocessor. And then anytime you want to use a sass, you have to in the style tag, say type is equal to text forward slash CSS. But for the most part, I don't even find myself using sass. And if I do, it's like only for the nesting. But because everything is scoped by default, and you're within a component, it's almost like I don't find myself needing that ever. So as much as like, I would typically reach for sass in this I don't I don't reach forward at all. - -13 -00:11:50,700 --> 00:12:20,250 -One of the biggest benefits of using nesting is the fact that you get that scoping baked in. Exactly. I certainly still do scoping in my style components, but you needed a lot less, which is kind of neat that you know, and like that should be coming to CSS pretty soon anyways, hopefully. And once we have like scoping, and nesting, and variables in CSS, like we're gonna be in good shape. - -14 -00:12:20,610 --> 00:12:21,480 -Yeah. All right. - -15 -00:12:22,200 --> 00:13:42,240 -So let's talk about reactivity. reactivity is is baked in, right? Obviously, we mentioned that, if you change a variable, the basic example is, let's say, in your script, in your template tag, you say, let count is equal to zero. And then later on, you either do some sort of a function or you call count is equal to count plus one, it automatically updates in the template without you having to tell anything to update without you having to do a set state without you having to do a use effect without having to do anything, right. Yeah, just updates. And that's actually funny. It's like same sort of data binding that we're, well, it's not data binding, but it's the same sort of reactivity that made aspects of Angular one so popular, that everybody knows and loves. Yeah. And what's interesting too, is they also have a reactive variable. Now reactive variable is basically you can define it just with $1 sign colon, and like, a reactive variable automatically will update anytime the variable that's used within it changes. So in this particular instance, if you have a reactive variable that you say is like double the count, and it's dollar sign, colon, double Yeah, and that's equal to count plus two, anytime count changes, it just fires, again, no use effect, no dependencies, none of that stuff. And same thing with statements, which is where it gets really interesting. - -16 -00:13:42,750 --> 00:14:22,200 -It's funny, because when I teach JavaScript to beginners, this is how they think how script works. You put a variable in a span, change the variable, the span should update, no, like, That's right, that that makes so much sense. And then and then you get into like, no, and then you get into react, they say, you can't update a variable directly. That's a mutation, you should never do that. And they're sitting there like, Well, wait, but why not? Yeah, like, if you want to update your variable, you must do it this very weird way. Like, I understand that mutations are bad, but like, why can't I just increment a variable and have it be okay, right? Like, that's seems to be what - -17 -00:14:22,200 --> 00:16:46,770 -this is. Exactly. And then even when you get into the like, the reactive definitions where you're like, Okay, well, now I got to do a use effect, I got to wrap the whole thing, I got to set the stage and the use effect. And then I got to watch the dependency to see if the dependency change like this is like, oh, they're just it's all transparent. It's all right there. And the same thing goes for statements, which is such a huge thing. Because you can now do like the the basic example they have is just $1 sign colon console dot log count. And console dot log count will only run when count has changed, not when the component refreshes, or re renders or whatever it runs wouldn't count changed. And what's cool about this is this Same thing works for if statements and any sort of expression. So that's really neat, it opens up the possibilities for a lot of stuff that you would typically use use effect for. Right within react, it's just dollar sign colon is their shorthand for it. In addition, data binding also as easy as Angular one made it where you have an input in in your input, regardless of the type of input. Regardless, if it's just a div with content editable, you just say bind, colon value equals and then the variable name, and then that propagates through to the variable every single time without you having to do anything without you having to write a specific set state function, you know, do update a variable in a form forms that are obviously I mentioned this frequently, in my least favorite thing in react. And this just makes work working with forms very, very different. Very easy. Very nice. So that's reactivity. It's fantastic. Very nice. Next talk about props, props, basically, the the same way that we know and love props from react, exist in spelt, where you can pass a prop from one thing to another thing with some interesting additions to how props work, to use a prop in a component, you need to export it. And this is like one of the weirdest things in spelt in my mind. And it's not even that weird. So to use a prop within a component in the side of the script, you need to export it first. And the idea there is is that the prop is a variable being defined within your component. And by exploiting it, you're allowing the parent component to assign a value to it, if that makes sense. It's one of those things that when you first see it, you're like, Okay, this is weird, but you just do it and become second nature. And all of a sudden, it's no big deal. - -18 -00:16:47,100 --> 00:17:04,530 -Wait. So say that, again, I just want to totally understand that in order to use a variable in were in the child component. Okay, you have to export it From now on, instead of passing it down, will you do pass it down still? Oh, but you still have to explicitly export it, - -19 -00:17:04,800 --> 00:18:33,030 -you still have to explicitly export it, let me add something to the Okay, the show notes here, where you say, basically, within a parent component, you would import the child like normal, then you use the child just like you would in react where you have a component, and then you have a prop is equal to a value, right? Well, then in that child component, you have to do export, let the prop name and then it actually lets you define a default there. Because the way spelt thinks about it is the the profit center essentially is defined in the child as like a variable and it's almost being passed up, which is very counterintuitive to how we think about these things. But you're essentially have a value, and you're allowing it to be used within the parent component and assign a value to a reactive variable that's within the parent component. So it sounds much more complicated than it is. It's basically exactly how react props work. Except for instead of needing to D structure a prop from a prop object coming in from a function, you just export it from the that that says, Ah, yes, it makes sense. Yeah, it makes sense. And it's one of those things when you see it in practice, you're a little bit like, Huh, so a little different. But the moment user for any given time, it's not a big deal. In fact, the syntax is a little bit cleaner than destructuring. Something from props in my mind. Yeah, yeah, that's true, because it can just be its own line. If all of your code is laid out so explicitly like that, it's a great way to keep you sane, like our sponsor, which is sanity@sanity.io. - -20 -00:18:34,440 --> 00:20:06,360 -So I funnily enough, just spent the entire morning working with Sanity, because I'm testing it out as a headless CMS that I'll use an upcoming course. And I'm just kind of gonna go in and make my content types and like, like, I've used it a couple times before, but this is I'm doing it all from scratch this time, and it was pretty cool. So one thing I really liked about it is when you do the sanity in it, you can choose from a couple of different options. And then when you have those options, you can also choose if you want to fill them with a bunch of data, they got like a movie example and a blog example. And then you can run that puppy locally. Or you can deploy it and you can deploy your back end up to sin. It's called Sanity Studio. So it's kind of interesting take at doing a headless CMS because I would say Sanity is a service. But the actual admin UI for working with it is a react application that you can either host yourself or hosted on Sanity dot studio, which is pretty nifty. And then of course, they've got integrations for react and Vue and everything you'd expect probably spelt actually be kind of an interesting use cases. If you're trying to learn spelt and sapper and maybe pick Sanity for your back end. Check it out@sanity.io forward slash syntax, that's gonna get you double the free usage tier. Thanks so much just entity for sponsoring you. - -21 -00:20:06,360 --> 00:20:25,110 -Thank you. Okay, so let's get into it. We got template logic next, which is one of those things that, you know has always been sort of a sour point in react as well, it's not the most clear thing, because you have to do the ampersand ampersand, basically conditionals to do everything and as you can, it's just JavaScript. So at the end of the day, it is clear enough, but - -22 -00:20:25,380 --> 00:20:36,780 -no, I don't like it. I don't like it either. But, you know, I'm just here. Just give me an if statement. Yeah. Right. No, no, there we can be sore about it. Why is there no if statements and JSX? - -23 -00:20:36,900 --> 00:22:20,910 -Yeah, if we're being entirely honest, JSX really needs a JSX to that's like a template totally like that is much more template II, because I think there is some of the things that are trying to be just too much straight up JavaScript. And once you're like, well, it needs to be 100% straight up JavaScript. So therefore, we can't do a lot of these things. I think some of that needs to get thrown out. But yeah, you know, that's an educated perspective on the matter. So template logic is the standard bracket, pound, if that you've seen in other things, maybe a lot handlebars or something, pound if user ID and then to exit, you do forward slash if to end something rather than like an endif or something. Each statements are the same way. So doing loops is much better than your dot map stuff where you do pound each cat as kittens. And then you get the access to each cat as a kitten, or each cat as a cat. Depending on however you want to say this, here's a template tag that I think is going to blow your noggin a little bit. And this is the promise template tags, which allow you to await a promise within the template. So you can say, oh, lb await and then you have the promise itself. And then you have a colon then where you didn't get access to the value, and then you have a colon catch. So therefore you can have essentially your states of a promise for a year waiting, oh, the value is blank. And then oh, there's a problem, you can have all of those directly in your template without having to do if error or whatever coming in from an async await statement. So you can access the promise directly in the template, which is just very nice. - -24 -00:22:21,360 --> 00:22:22,020 -Unknown: That's cool. - -25 -00:22:22,110 --> 00:22:57,840 -Scott Tolinski: Sometimes you're in the middle, I have a template. And you say, Okay, well, I need to this is now a synchronous code. So I have to go to the top of that template and pop a promise in there and then get the result or something like that. And then oh, I have to have a loading state. So then you have to give yourself a new hook and things like that. So that is pretty nifty. Because Yeah, there's there's nothing in react template tags that allows you to show something if a promise has fired off, but it's not yet resolved. If that's the case, then you have to like set state, - -26 -00:22:57,930 --> 00:24:58,140 -what ends up happening is you have to abstract it all into another function coming in Yeah, like a hook or whatever. And this is just how you get access to the promise itself. And it's that easy. So really nice. Next year is events, which events are a big thing, right? So events, we have button is in the use the word directive like you're used to with Angular or view, and you use the on directive. So you do on colon click, and then your function gets passed in there. I found this sassy little note within the spelt tutorial that I wanted to share with you because I thought this was some strength. This is in the official speld documentation. It says in some frameworks, you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to spelt, the compiler always will always do the right thing, whichever you choose, which is it's so nice that they're like it's somewhat it, I would say that it's very targeted and somewhat aggressive. Because people really get on that about reactive micro performance optimizations where they're like won the alpha function, you shouldn't happen here, you should do this, you should do that. Like, who cares? This is just literally who cares, you do the function, whatever, you don't worry about it. In addition to these directives, I thought this was a really neat thing. There's also directive modifiers, especially for the unclick business here. I thought these directive modifiers were really neat. For instance, if we have a click event, right, and we want it to prevent default, or maybe it's a form submit, and you want it to prevent default, you do on colon, click, and then you do a vertical pipe, and then prevent a default and it just automatically prevents default. And there's a whole bunch of these event modifiers this isn't the only one. There's other ones like once that it's only going to run once. Let me see if I can find these other ones really quick here. The other event modifiers - -27 -00:24:58,410 --> 00:25:39,300 -Yeah. So let me tell you what I use that all the time is I'll often have a function that goes off and does something. And then I'll either need to modify that function to do the prevent default, even though like the handling of the event is not really part of the business logic of the function, or you have to do like an inline function or create a separate function that just prevents default, and then passes along the piece of information over to the the handler of the function that you're running. So if that's the only thing you need to do, then you're often find yourself modifying or creating a secondary function for it. And this just does it for you, which is pretty nifty, - -28 -00:25:39,570 --> 00:27:49,410 -right? So you can put all these things in line, and then you have the the modifiers, right. So like, the modifiers that are available to you are prevent default stop propagation, passive capture once and self. And so I think these are amazing, they can even be changed. So you can do once and prevent default. It's so cool. It's nice. I would love to use some of that stuff. Sometimes. I just think about it, how much nicer some aspects of the things that I'm doing to work around the platform if they didn't exist, right, totally. So let's talk about the baked in goodies like spelt baked you a cake, right, and then they were like, you know what we when you cut open this cake, there's gonna be some melted sprinkles in there, we made you a birthday cake like this is what is I funfetti we made your funfetti cake. So there's all sorts of goodies that have been baked in. And by that, I mean there's like animation. So the animation stuff within svelte that's baked in is as good as animation libraries and other platforms. They've thought about everything here because within spelt motion, you can get tween or spring animations out of the box by default built into spelled tween two or spring animations, you can get transitions that are super duper easy, where you can just define it in or out. So in addition to being able to write your own, obviously, they've built a ton of baked in transitions, if you want to do crossfade, you want to do a fade a fly a slide a scale a draw, you just want to drop something like that in there, it's as easy as importing it and assigning it onto a component by saying, in out or transition, colon fade. So if you were to say in colon fade, it's just going to fade when the component comes in, and it does so based on you know, default, rate and modify. And that works even with mounting and unmounting with inside of a template. So if you have like an if statement, and you wrap that around a div transition, the colon fade, that divs gonna fade in and out. No ifs, ands, or buts That to me is the slickest version of any sort of animation library on any of these platforms. There's even a flip animation version where you can do flip animations built in to smelt. so dope. It's so cool. I love it. - -29 -00:27:49,620 --> 00:28:08,010 -This is the jQuery of new generation of frameworks, because jQuery just had fade in fade out. Exactly. It's the jQuery with no bloat. And here is my favorite part about this animation stuff. Guess what comes in? By default, animating height, zero to height auto comes in no problem. - -30 -00:28:08,070 --> 00:28:09,540 -Unknown: Oh, ah, - -31 -00:28:09,900 --> 00:28:42,210 -Scott Tolinski: yeah, I'm doing that that's level upside, or I mean, on the Scott Tolinksi site, right now I'm animating hideout, I wouldn't. It's like, whoo, this is okay, cool. So also baked in and you can bind quickly and easily, you can bind dimensions. So if you wanted to get a divs dimensions, you can just do bind a colon at client width, equals a value, bind colon client height, or any of those things given to you from the dimensions. And that will spit back out into a variable of what you can do lots of cool stuff with it, including using it throughout elsewhere in your component - -32 -00:28:43,530 --> 00:29:41,970 -reactivity in showing your or showing or hiding your components based on browser width or something like that. There's a lot there. So this is really cool, because it's really cool. This is a no, it's like a prop on on a component or on an element and it gives you a variable of the width and the height. So if this was react, we would need to create a custom hook inside that hook, you would need to create state that would hold the value. And then you'd also need a use effect, which inside would listen for a resize which resize observer, you'd probably have to go polyfill that so for Safari, you'd have to use a ref as well. Yeah. And then when it changes, you'd have to set state. Oh yeah, you need a ref to track the actual thing. And then finally, return it from your custom hook and then that your custom hook will give you a variable and then you can go ahead and display it. So, so much easier in swetland it is - -33 -00:29:41,970 --> 00:31:41,940 -something that you would like want to do you know if it was that easy. Sometimes I look look at this stuff. And I'm like, Oh, I don't want to implement my own use measure hook, whatever, which I do have but like, be nice if you just bind the value of the dimensions to a variable at one point in the like a one liner. That sounds pretty dope right? Yeah. There's Also lifecycle methods if you need on disk, I don't know that all of them off the top of my head, but it's the this, you know the what, what you could be expected on Mount those kind of things. Okay, here are the lifecycle methods unmount, before update after update on destroy, and then there's a one called tick, which is kind of interesting tick returns a promise that resolves, once any pending state changes have been applied. So it's like really granular control. If you want to use tick, I have not used tick personally, but I'd be interested to see some more advanced use cases they use it. So either way those lifecycle stuff exists within speltz, nice and easy, same sort of this stuff you'd apply or expected for them to exist. There's also advanced state, because if you think about it, local states all being done via reactive variables. But global state can be done via what's called stores, which are also built into spelt. And again, you don't ship them if you don't use them. So man, so cool. So advanced state with stores. Basically, a store is an object with a subscribe method that allows you to basically update or write to it. And there's even some fancy subscribe stuff going on too. But either way to create a global store, you just import writable from spelt store, then you export the variable as export const count is equal to writable, and then the default value and then anytime you need to update it, just like you kind of would with set state, you do count dot update, and then the new value and then throughout your entire application. It's now update. So congratulations. It's pretty dope. That's great. No more pontificating about, you know which abstraction of which state library is going to do it for you. - -34 -00:31:43,230 --> 00:33:20,460 -And if you want to stop pontificating about the best way to do your jam stack, well, then you're just gonna head over to stackbit.com. All right, we are sponsored today by Stackbit. They sponsored a whole bunch last year. And I know a lot of you tried it out, and they got some new things coming down the pipe for you to try out. So Stackbit offers developer tools that enable things like inline and live editing, live previews, content changing, sharing real time previews of your jamstack website, which is pretty nifty. So you sign in, you select your static site generator, whether that's a Hugo or Gatsby, whatever you select your CMS whether that's Sanity. Hi, there's our other sponsor for today. contentful, forestry, things like that dado, CMS. And this will give you the ability to do things like live previews, sharing real time content editing with somebody else, things like that. Pretty nifty, you want to try and check it out, head on over to stackbit.com and try it out with your current stack or select one of their little starters that they have just to try it out yourself. Again, that's stackbit.com Thanks so much to Stackbit for sponsoring. One more note we have here is last time, when Stackbit sponsored, we talked about their, their site builder that they had, where it'll allow you to connect everything up yourself, that is definitely still there. And they've got some really neat stuff rolling out with both Gatsby and next shass in the next couple months. So stay tuned for that. Thanks so much to Stackbit for sponsoring. - -35 -00:33:20,850 --> 00:36:01,980 -Cool. So let's keep this moving here. moving and grooving. So we talked about these baked in goodies, in addition to that stuff we had the stores the lifecycle, whatever. There's also the concept of slots. Now I don't know, React doesn't really have slots, it kind of does with the way they do children. But slots are a concept of like, basically, here's some content. It's basically a placeholder for a component or another template to come in is the best way I can describe this. It's used both within view as well as svelte. So if you are used to view you'll be happy that a slot exists. Let me see. The concept does exist in react. So I don't want to it's just different. The So basically, here's how the spelt documentation describes it. components can have child content that the same way elements can the content is exposed to the child component using the slot element. So instead of using children, it's basically slot right. Now the cool thing about slot is that you can give them names. So there's multiple slots, right? You could have a slot, that's a footer, or slot, that's a header and then you could pass in custom headers or footers based on the name. And so slots are an interesting thing. I don't use them a ton. I use them when I have to, but it's one of those ones since I'm not used to them specifically because I haven't been doing a lot of you that I don't probably utilize them the same way they could. It also includes the concept of like adding things to your like the dumb context essentially via ways that you might expect within Like we needed to do so within react helmet before, right? To add a title to a web page, the easiest way to do it would be the use react helmet. To add a title in spelt, you just wrap a title in spelt colon head. And then inside of there, you can add HTML. So basically all of the functionality that you want, that you're used to with the React helmet is available to you within just core spelt, you also have the options to you know, do things on the window or the body. So you could do spells colon, body, or spell to colon window, and even throw on event handlers and stuff on there. Or you can bind properties, you can do all sorts of stuff. So if you wanted to get the window, scroll Y variable, you could do spelt colon window, bind colon scroll, y is equal to the value of y and then all the sudden y is automatically binding the value the scroll value to a variable that you can use to do whatever you want with global state. Yeah, okay. There's all sorts of cool stuff. - -36 -00:36:02,310 --> 00:36:33,000 -I'm just looking at the example of svelte slots just to sort of understand what it is. And like, I think probably the simplest example you can have is if you have a layout, yeah, and that layout then needs children, then you can pass them in, but you can, you could pass them in via name. So that's not that all that different than just like children dot footer, or children dot whatever. Or you can pass them in via props. So that's pretty nifty. I like how slot is the actual component itself, though, instead of just curly bracket children. Yeah, - -37 -00:36:33,150 --> 00:40:40,050 -it again, those of you who have used view, that's gonna feel very, very normal to you. So let's talk about sapper for the time left that we have what is sapper separ sort of their app platform, it's their next JS equivalent where you get server side rendering out of the box, you get routing based on folders. So it has the same folder based route system, I found sappers to be a little bit more elegant in the execution of it. They do have like really nice basic server side routing that like, here's a here's a good example, you have your index dot speld file that would be inside of a route folder, right? Like index j. s. Yeah. And then if you wanted to do a server side code for that, it's just instead of a dot svelte file, it's a dot j s file, that's it. And then all of a sudden, you have an export function, export function, get under, you know, raise whatever it allows you to access the route Express like routes, just basically via having a JavaScript file of the same name in that folder. So that makes it like really super easy, you don't have to think too much about it. For instance, I have an index.json.js file that typically just goes and grabs all of the markdown files from a folder, and then publishes them as a JSON file. And then in my index dot svelte file, what I do is I read that data just by doing a basic fetch command for that JSON file that now exists at that route. And it just exists so then you can access it really easily. This code might be a little bit more visual, if you look at the Scott Toland ski repo for the my website, I think it's like Scott's 2020 or something, I will link this in the show notes. But it is a really simple, super simple code to get like basic server side routing pulled from a folder or whatever, even abstracted out into a couple of folders. One is used data and one's like published data or something. And they're just too abstracted functions that make it so I don't have to do anything and just pointed to a folder and then all sudden it goes off and gets all the markdown files. Beautiful. That's really neat. Yeah. In addition, sapper also gives you static export, aka static site generation for free. And that's what I'm using on Scotland ski comm basically, we we have a sapper site that's being hosted on Netlify. And I just tell Netlify to export the site on build that builds it, you get all the pre loading goodies, stuff that you get within other platforms, you don't get the fancy image stuff that you get with Gatsby, but that's really it. You get so much good stuff in terms of server side or static things if you need it. It's basically a full on next JS platform and those sort of ways. So much to the point that one of the first things in their site is comparisons to next j s they do note the differences in and there's a there's a healthy healthy dose of snark and sass within these documentations in a way that I kind of like this is a really funny in the comparisons with next day a section of sappers documentation. The very first bullet point in the comparison is sappers powered by spelt. So it's faster and your apps are smaller. That's great. I'm in right out and saying it so pretty neat. And for the most Oh, here's the thing I really like about sapper that I really hate about next. Yes. I'm going to tell you that right now, one of my least favorite features about next js is that they decided to handle links differently than not only HTML, or everything else in react, they were just like, well, we're gonna throw in a link. But you got to put an anchor inside of there. Why? I don't know, we just wanted to make your life different than every other routing platform, right? With sapper to do routing, you only use anchor tags, it's just straight up HTML, you just use an anchor tag. And since the everything's compiled away via the the platform, it just takes care of it. You don't even have to you don't have to bring in a link. You don't have to think about that link special syntax, you just use an anchor tag, just HTML. Really cool. - -38 -00:40:40,410 --> 00:40:42,390 -Unknown: Wow. That's pretty neat. I'm - -39 -00:40:42,390 --> 00:40:48,120 -Scott Tolinski: glad that we did this episode, because it really gives a rundown of how simple and clean it is. - -40 -00:40:48,330 --> 00:41:28,320 -It is. I think the more people use it, the more they'll be blown away by all these things that a lot of times people say, well, it's not good for big projects, or what I don't necessarily think that's the case, I haven't found anything that would let me not do something installed that I could do in react. For the most part things just seem easier, less boilerplate II, and a lot of these sort of debates. Yeah, things that we we sort of argue over in the React community are the best way to get, you know, data from your API, render props, and mix ins, all those just go away all of those conversations in that sort of shuffling of the cards of your code, it just goes away. And I like that, - -41 -00:41:28,710 --> 00:42:04,290 -I would like to see like a large website built in essence, I'm sure there are some that are out there already. I just like to see what they are and what the pain points are. Because like, like I see that as well was like, sometimes even we talk about these things. And then like Gatsby, and then you actually go ahead and build it a larger site in it and you start to feel the creeks of it, or you're not necessarily creeks, but just like trade offs in certain parts of the thing. So I'd love to hear if anyone out there has built something and and run into an issue here or there. Whether that's times or, or something like that. - -42 -00:42:04,590 --> 00:43:43,140 -Yeah. And I know swix to a really great post about He's like, sort of I think he's augmenting sapper to write his own static generation platform for separ. I think I'm not entirely positive of that, if he's still working on that, or whatever. But from what I understood, it was a it was just saying, oh, he found a way that he could improve Zephyrs build times by doing a little bit differently if you are only focusing on static generation. But yeah, there's a lot of cool stuff out there. And I think it's just, it's getting cooler. I'm actually, I think I'm gonna be doing a free course on a meteor and spelt because Meteor is the king of backend reactivity, right? It's so easy to do back end reactivity, and RDB, who I'm sorry, RDB, I do not know your name, because it's listed as literally RDB everywhere. His art, his website is our DB dot name. His GitHub is our dB, his Meteor thing is our dB. So either way, he did a package on spelt Meteor data that allows you to connect meteors reactivity to speltz reactivity and like, really no time at all, is pretty really super cool. And you can use like Meteor subscribe statements within the templates using the promise template tags. So you could do a wait, subscribe for this data and then loading and then when that data is complete, it just comes in immediately. And since it's subscribed, it's always going to be reactive from the database and user accounts and stuff. Oh my gosh, I'm really excited about this. So I'll probably be doing a free series on that just because I'm excited about it and want to share share some of that beautiful - -43 -00:43:43,950 --> 00:45:57,900 -Should we move into some sick pics or anything else to share? But strappy and sapper? No That's it. This has been this felt and sapper show brought to you by Sanity and Stackbit. Better s and the sleepy. Super sleepy Scott solinsky is so sick pigs do have a sick pick. I do I am going to sick pick a feature of Firefox. And this is the containers feature in Firefox. And this has, I didn't really totally understand it. And I've been using it a lot lately and it's way better than Chrome's profiles. So Chrome profile allow you to open up a couple instances of Chrome you can be logged into. Like you can have like all of your settings for one domain name and all of your settings for another domain name seem like that. And Firefox container takes it a little bit further and allows you to create kind of different you can create a work you can create a banking you can create I have a Facebook container. And what it does is allows you to be logged into that website in that container and then your visit when you're visiting other websites that have don't have access to you being logged in. to Facebook because you're not logged in on the same that it's, it's done in a container, right. And like that's great for privacy that's great for banking and all that stuff. But what I find it super helpful is just being logged into two different things at one time. So I have my own personal YouTube account. And then I was doing some work on like my wife's YouTube account or a couple other ones. And if I just have a container for that one, I can have all the cookies and everything's logged into that and I don't have to log out and login or, or use Google's awful account switcher, which never seems to work properly for me. And it's just been, it's just been real good for both privacy as well as having it's not like a separate browser, it's just a tab. And the tab is just colored in whatever when you're in. So Facebook, I turned to blue. And anytime I'm on Instagram or Facebook, it's its own little container and you can't reach outside of it sick. - -44 -00:45:58,140 --> 00:48:11,640 -It's a sick Peck sick bag sec, my sick pick is going to be something kind of unique and interesting here. I recently purchased this solar fountain pump, it gives you a solar panel and a water pump and a little fountain and you put it in what could be like maybe a birdbath or something and it's always just gonna shoot water up in the air. Let me tell you, it shoots water like two and a half feet in the air. So the pump is actually surprisingly powerful. And here's what I'm doing. I found this neat little community of hackers. They maybe consider them to be hackers within the customer images and reviews of this product, talking about the various creative ways that they've used this miniature found because it is basically a lot of little pieces, you get essentially a solar powered water pump out of it in the water pump granted is not super powerful, it's not going to be the pump that powers your entire backyard, but it is solar powered. So you can put it literally anywhere if you want some trickle water. So what I've gone ahead is I've ordered some just standard straight up clear tubing to attach to the end of this pump. And then I'm going to get some landscaping rocks and I'm going to build a full custom fountain out of the $60 solar pump. And it's for the cost and for the ease of use it seems pretty darn amazing to me because like if you wouldn't have to do any sort of fountain in the past you've got to plug it into something or you gonna buy a premade solar powered one but I have this like little custom idea for a little pool and whatever and this pump is going to make it so easy and just to look at some of the stuff people have made with this is pretty impressive. The solar panel is great just plugging in it holds a charge with batteries. So yeah, we'll see what I did is I took one of my dishes on a large dishes and I filled it up with water and then I just put it in the yard and I've been testing solar positions just to test out positions to where the the panels going to get a good amount of light and everything. And so far it's been running for like yeah, four days now non stop found hasn't stopped so needless to say I'm pretty impressed with it. We'll see what happens when I get my tubing and get some landscape rocks eventually and build out a little mountain for this thing. - -45 -00:48:12,030 --> 00:49:02,070 -There's so much cool little like you have tons of it and I got these little solar lights are so much cool little solar stuff on Amazon. We've got these little like step lights, I've talked about them before at our cottage because when you're coming up from the fire, there's in there you forgot to turn the light on. It just eliminates where the steps are. And one of them was starting to get flaky and I opened it up and I was surprised that like there's a little rechargeable battery in there which is replaceable It was supposed to be for outdoor and it started to get rusty so I'm not sure how good it was but it was just it was pretty it was sitting in a snowbank for six months so that's probably has something to do with it it not draining or whatever but I just got a little tin foil and some vinegar and scratched off the leads and it's working again and I was I opened it up and I was like I fully expected this to be a lot more low tech than - -46 -00:49:02,070 --> 00:49:05,160 -Wes Bos: it actually was inside for for the price I paid yeah - -47 -00:49:05,160 --> 00:49:06,600 -Scott Tolinski: the price is really killer - -48 -00:49:06,630 --> 00:49:10,080 -Wes Bos: so big fan of this all of your solar sick picks - -49 -00:49:10,230 --> 00:49:39,990 -Scott Tolinski: Yeah, I know I recently got some like those little like lanterns they look like little lanterns for the backyard. This is insane it's like 24 bucks for four of them or something you just plop them down throughout the yard and oh wow this is like pro landscaping I'm turning into pro landscaper man over here just wait till my phone comes in. Oh man, let me recommend to you right now go down the rabbit hole of lawn care YouTube channel dude. Oh, dude, what a satisfying well past that is to definitely - -50 -00:49:40,020 --> 00:49:40,560 -yes. - -51 -00:49:43,050 --> 00:50:52,650 -My grass looks adult. Oh man. It's still the snow still mountain though up here. So a couple more months before we have green grass. Yeah, we got long green grass over here. I've been taking care of it fertilized and all that stuff. So you know me Awesome. All right, well, shameless plugs. I'm going to shamelessly plug my new website again. Wes Bos comm check it out. It's a super fast new brand new website built in Gatsby, you can click over to the courses button and see all of the different courses that I have paid in free. Cool. I'm going to sic pick up my YouTube channel, which is level up tutorials on YouTube. I'm gonna be doing a free course on svelte and Meteor. So it's gonna be fun, it's gonna be free. It's gonna be fancy. And yeah, just check it out. Alright, thanks for tuning in and we will catch you on Wednesday at eight. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax251.srt b/transcripts/Syntax251.srt deleted file mode 100644 index 0baac8979..000000000 --- a/transcripts/Syntax251.srt +++ /dev/null @@ -1,112 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,149 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Tolinksi - -2 -00:00:27,239 --> 00:00:52,320 -Scott Tolinski: Welcome to syntax in this Monday hasty treat, we're gonna be talking about everybody's favorite subject in the entire world, which is Internet Explorer. 11. Oh, yeah. Love me some Internet Explorer. 11 is something neat? We'll never hear anybody say ever. My name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me as always, is the West balls. - -3 -00:00:52,560 --> 00:00:53,760 -Wes Bos: Hey, everybody. - -4 -00:00:54,120 --> 00:00:58,710 -Scott Tolinski: Hey, everybody. So how's it going in that full stack shack over there? Wes - -5 -00:00:58,950 --> 00:01:07,800 -Wes Bos: going good. I talked about last episode. My internet is not great right now. But it was hopefully will get better. I'm I'm holding out for it. - -6 -00:01:07,890 --> 00:02:17,400 -Scott Tolinski: Yeah, I'm hopeful to this episode is sponsored by a company that's going to make it so you don't have to be hopeful that your website is working all the time. And that is Sentry@Sentry.io you're gonna want to head over there. Use the coupon code tasty treat all lowercase all one word, you're gonna get two months for free. Now what is Sentry? Well, Sentry is the open source error tracking solution that helps you monitor and fix crashes in real time, cut down the time on error resolution from five hours to just five minutes. That's an official copy. We don't often read a ton of official copy here. But I felt like I would for once. Now Sentry at Sentry diode is a service that we both use and love over here. And it's a great way to see all of your bugs happening in your application, be able to mark them as fixed in a watch in horror as they have resurfaced again, and you have to go and fix them for real this time. So check it out. Sentry.io coupon code, tasty treat all lowercase all one word, check it out. All right, inter net explore, it is a thing. Internet Explorer definitely is the thing. It's definitely a browser that people use. And that's really my thoughts on Internet Explorer. That's it. - -7 -00:02:17,610 --> 00:03:23,280 -Wes Bos: It just exists. Yeah, I saw I launched my website the other day, and I was talking about how awesome it is that I didn't spend a whole lot of time doing cross browser testing. And I was just saying like, the web is pretty good right now. Pretty good. And of course, people don't like that when you say something good about the web. And I got a lot of pies for like, what about iE 11? And and I said like, I'm not supporting iE 11. And then I got just blasted with all kinds of unsolicited opinions of whether you should or shouldn't support iE 11. So I thought, well, let's just record a quick podcast about should you support iE 11. Because the like, I don't know, as developers, we love to sit around and say, Oh, he sucks, like who uses IE. But at the end of the day, there are lots of metrics in ways you can decide if you should fully or partially support iE 11. And we'll also talk about like, what are the features you can start using if you don't need to support iE 11. So some of you might already be on that train where you can drop by 11. So I 11 was made. Let's see, when was it - -8 -00:03:23,520 --> 00:03:24,660 -Unknown: 1800? - -9 -00:03:25,380 --> 00:06:33,030 -Wes Bos: October 17 2013. So almost seven years ago, I 11 was made. And that is a long, long time ago. There's a lot has happened in the web since then, which is kind of frustrating. It will be deprecated at some point. Let's see when iE 11 comes with Windows 10. And the end of life for Windows 10 is October 14 2025. Hmm. Which is kind of interesting. Let me make sure that is correct. I can't find a specific date, there seems to be stuff all over the place. But the reality is, is that support for I 11. And people actually using ai 11 is waning. And that's really exciting for us developers, because there's a lot of things that we can start to use. And there's a lot I think that once we finally drop iE 11 we're going to be moving a whole lot faster. So currently, as of Can I use com It says that iE 11 is 1.44% Global usage. But I think you should probably never use those numbers as whether you should or shouldn't support it. Because you should be looking at your own numbers of as to whether you should or shouldn't. So let's talk about that real quick. Like how do you make a decision whether you should or shouldn't support iE 11 I think you need to go into two big analytics and that is how many people are visiting your website currently that are in I 11. And be probably more importantly how many people are giving Your company money in IE 11? Because at the end of the day, if, right, let's say you get a 2% drop in sales because you stopped supporting iE 11 in almost no world will you get a approval for that, because if the money is coming in, who cares what browser they're using at the at the end of the day, um, I personally had to make sure that my course platform, not absolutely everything, but the buying and the distributing of the courses had to work in IE 11. But for my most recent website, Wes Bos calm, I just don't support 11. I opened it up, and I love it. And it's awful. Like, the thing doesn't work because I don't have polyfills for this stuff. And none of the layout works, because I'm using Flexbox, and grid. And I'm okay with that. Because it's like 0.06%, ie 11 usage that comes to my website. And I've made the decision that people aren't giving me money to this type of thing. And it's not worth my time. Even like, there's probably people screaming at me right now being like, well just just give a a lesser website, which we'll talk about in a second. But that is not worth my time, either. I've totally dropped it. Now. We're no Yeah, for me, I've decided not to, but you, as a developer should put aside any snarky comments you have, and thought and hatred towards IE, and just take a raw look at sales money coming in, or just raw usage statistics that are coming to your website. - -10 -00:06:33,750 --> 00:09:00,600 -Scott Tolinski: I do too much just tickling I was doing a tutorial of I kept trying to say this word. And every time I said this word, I did this hand thing and knocked on my microphone. I was like, Oh, God, I gotta stop doing that. Okay. So yeah, I think it's essential. It's funny because I run a business right as well. And I made the decision to not support iE 11 from day one, specifically, because you know, the people who are using our application are inherently not going to be iE 11 users, those of you who are looking at making modern web applications, what we're not really appealing to level up tutorials, certainly not appealing to the person who's never touched code in their entire life. Like we have tons of free youtube channels for YouTube videos available for that kind of thing. But our platform is largely for people who have experienced with code and are looking to learn new things. So those people are very unlikely to use iE 11. And the only people who open my application up on iE 11 are people who aren't my customers, which is the you know, it's important. It's funny, I was at the bank, and the account associate who is helping me with my account, and I was like, Oh, let me see your website. And she popped it open, and it looked like total garbage. And I was just like, I swear, I'm legitimate. I just don't you aren't my customer. So like, if you if you were to open this on your phone, this would look fantastic, you know, but I, I've made all those decisions based on actual data that I have, well, had I no longer do Google Analytics at all. But I, when I used to do Google Analytics, I used to look at it and just say, why would I spend the time to do this? What's it getting me and the cost value proposition for me just wasn't there. And so that is to get it, it was an educated decision. It wasn't just a decision based out of Hawaii sucks, which it does. But you know, I don't want to make decisions that way. And then for the most part, I think that's largely the like, if you aren't the decision maker in your organization, and you're looking to convince people who are the decision makers, then you need to hit them up with raw data other than IE sucks, because they're just gonna look at you like, you're lazy. If that's your platform, if your platform is I just don't want to deal with this, then they're gonna say tough stuff, you got to deal with it. But if you say, Listen, this is going to be a zero percent cut to our bottom line, we have nobody using the site actively on it this way it spends, I spend this much amount of money. So we're technically like a net negative in this situation, then you can look at your stakeholders and show them exactly what the weight of that decision really is. - -11 -00:09:00,990 --> 00:09:51,240 -Wes Bos: Let's talk about like, once you do drop iE 11. What features can you start using without having to go back and code a secondary version? And probably the biggest ones for me are modern Flexbox. So there is a somewhat supported version of Flexbox in IE 11 that you can just use, or does it autoprefixer to kick out, and it doesn't have all the features, but it's good enough, in most cases, CSS Grid zero support and CSS Grid doesn't. You can't polyfill or anything like that. There's no libraries out there that will will do that. So you just can't use CSS Grid until you drop iE 11. And then things like CSS variables, you could certainly run a autoprefixer through that and just have static variables and then have the CSS variable after - -12 -00:09:51,330 --> 00:09:55,470 -Scott Tolinski: dx. They're really not great. The fallbacks for variables. - -13 -00:09:55,590 --> 00:11:14,250 -Wes Bos: They're not Oh, but like, I'm thinking like you have like black And just use something that would output color black and then output again after that color var dash dash black. Sure. And then that will give you live variables in browsers that support it. And I think that's what you should be doing in most of these things where you can make it work kind of, or make it work good enough in these browsers, sometimes you can just ship a little bit of extra code to do that, huh? What else you can partially support iE 11. So it's like major features can like I could actually, they already work. So you can already read the blog posts in IE 11 is just the nav and the footer and some of the image loading stuff doesn't totally work, which is okay. You can use progressive enhancement, where only modern browsers get the progressive enhancement is this idea. So you have a baseline, and then you add the fancy stuff in newer browsers or graceful degradation where you have your application, and then maybe you just have like a one column layout that you you feed to 11. And then there's simple things just like polyfills, where if a array method doesn't exist in IE, 11, then you can just polyfill it, and we'll add that to the array prototype. So it will work in in in IE 11. - -14 -00:11:14,610 --> 00:11:28,290 -Scott Tolinski: Mm. Oh, yeah. What about testing? Let's talk about this situation, you are a one person or a couple people shop, you only have Mac computers, what's your strategy for testing, ie 11, or making sure that it works? - -15 -00:11:28,620 --> 00:12:16,650 -Wes Bos: Yeah, I use VirtualBox. And if you go to modern.ie, you can download a seven gig image of a Windows machine and it comes pre loaded both with Microsoft Edge and the version of Microsoft Edge that is not yet chromium. So that's kind of important for some people. And then it also comes with iE 11. And it's free. There's certainly browser stack and lots of services out there that will allow you to login. But VirtualBox is free, as long as you got like 15 gigs of free space on your computer. I've used that more often, just for random stuff that only works on Windows, just fire up that I also have a Surface Book that has iE 11 loaded on it as well. So sometimes I'll just open that up and double check a couple things. - -16 -00:12:16,800 --> 00:13:09,090 -Scott Tolinski: Yeah, those are all peak strategies are you just remember back when I worked in an agency, and we still had to test for IE seven, believe it or not, when I first started working? Yeah, we had this like CRT Windows computer that you had to turn on every single time you had to. It's like, Alright, I'm gonna have to test windows today at some point. So I'm just gonna start turning this computer on right now. And then I'll come back to it in like an hour, and they'll be ready to go. It's like such a process. I just remember that. so vividly of like, this is the AI machine. And we test all the browsers on this, and we have them all loaded, and it was just such a giant pain in the butt. So things have changed, definitely this virtual box, it's amazing that they just give you those, you know, here have these We know, we know that you need to test for it. So we'll we'll make it as easy as we can on Yeah, at least. And I would do that before paying for a service myself. But you know, time is money and those kind of things as well. So - -17 -00:13:09,120 --> 00:13:42,210 -Wes Bos: yeah, download it now. Because like when you need it, your internet is going to be slow and downloading a seven gig image takes a while, they used to even have versions of like all the way back to iecex. I don't see that they offer those anymore, I'm sure you could pick them up. Another little tip of the VirtualBox is when you have it open. Make sure you take a snapshot of the first day because it's only good for 30 days. And then you have to redownload or reinstall the image. But if you take a snapshot of the clean image, then you can always revert back to that snapshot every 30 days if - -18 -00:13:42,210 --> 00:13:48,750 -Scott Tolinski: you need to. Yeah, VirtualBox makes that pretty easy. VirtualBox is pretty rad that it exists at all, to be honest. - -19 -00:13:48,900 --> 00:14:04,020 -Wes Bos: Yeah, it's unreal that they can do the people are even running, like OSX on Windows, like a hackintosh. But instead of installing it, they're running in a VM. And apparently you only give up one CPU core to do that. Ah, yeah, - -20 -00:14:04,080 --> 00:14:06,180 -Scott Tolinski: I wonder how that Yeah, I wonder how that goes. Yeah. - -21 -00:14:06,360 --> 00:14:18,930 -Wes Bos: And you can use like an AMD processor for it. Mm hmm. nifty. So that's it. Should you support iE 11 Well, do your homework. Stop complaining on the internet? And, and make a wise informed decision? - -22 -00:14:19,950 --> 00:14:21,330 -Unknown: That's such a good Yes. Uh, - -23 -00:14:21,330 --> 00:14:32,400 -Scott Tolinski: can you we just end every episode with do your homework, stop complaining on the internet and make a wise informed decision. That to me just is like every single decision you need to make about any of this stuff. - -24 -00:14:32,400 --> 00:14:33,390 -Unknown: Should I tweet that - -25 -00:14:33,390 --> 00:14:41,130 -Scott Tolinski: react is bad because some react developer hurt my feelings at some point? No, maybe you should just not do that. And you should learn a little bit about it. - -26 -00:14:41,220 --> 00:14:43,620 -Unknown: Haha. Oh, that's - -27 -00:14:43,620 --> 00:14:52,080 -Wes Bos: good. That's good. All right. That's it for today. Thanks so much for tuning in and we will catch you on Wednesday. Please, please. - -28 -00:14:54,030 --> 00:15:03,800 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe. In your podcast player or drop a review if you like this show - diff --git a/transcripts/Syntax252.srt b/transcripts/Syntax252.srt deleted file mode 100644 index c12c28f2e..000000000 --- a/transcripts/Syntax252.srt +++ /dev/null @@ -1,484 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,790 -Unknown: You're listening to syntax, - -2 -00:00:02,819 --> 00:00:06,120 -the podcast with the tastiest web development treats out there, - -3 -00:00:06,149 --> 00:00:10,530 -strap yourself in and get ready to live ski and Wes Bos. - -4 -00:00:10,589 --> 00:00:13,650 -Wes Bos: Welcome to syntax nice. - -5 -00:00:13,650 --> 00:00:14,400 -Scott Tolinski: I was on - -6 -00:00:14,549 --> 00:00:29,130 -Wes Bos: Oh, really, if Scott and I just clapped to start the show. And I've got high latency over here. So I try to offset my clap knowing that we'll have latency. And I just impressed Scott with my clap. So that was good. - -7 -00:00:29,159 --> 00:00:31,500 -Scott Tolinski: Yeah, it was great. It was probably the one of the best has been - -8 -00:00:31,559 --> 00:01:09,200 -Wes Bos: Oh, well, thank you. I can count to 300 milliseconds in my head. Anyways, this is the syntax podcast where we talk about web development every single week. Today, we've got a potluck show for you. And a potluck shows where we take your listener questions. And if you've got a question you'd like us to answer, go to syntax.fm. And in the top right hand corner, there's a button that says, Ask a potluck question, go ahead and put your question in there. These questions are awesome, and we really enjoy getting them. And I really enjoy doing these shows. Because there's something for everybody in the show. So with me, as always is Mr. Scott to Lynskey. How you doing today, Scott? - -9 -00:01:09,719 --> 00:02:18,000 -Scott Tolinski: Hey, I'm doing good. We should notice we have tons of submissions in the potluck. So if your question has not been asked, and it's been a little while, maybe ask it again. If you thought it was a killer question, if you thought it was just Okay, go ahead and save us the trouble. But if you think you had a killer question that we've missed, go ahead and submit that thing. Again. We just looked at the list. And I was like counting how many I closed it now. But when I was counting how many I was brilliant impressed with just how many amazing questions. For those of you a little behind the scenes look, what we do is we have this giant spreadsheet that they come in on and we mark whether or not the question is going to be appearing in the next episode, or in the next potluck that we're going to be doing. Yeah. And Wes and I are so much on the same page. It's ridiculous because I picked a question. And Western market is being on the show. So then I like started to get into the question. I was typing it in here. And I was like, Oh, no, wait, what's already picked this one? It's already been. So it's like, out of the thousands of questions that are in here. We somehow pick the exact same question just out of the blue. And it just happened to be what the only one that didn't get marked as being coming. So either way. I think these episodes are so much fun, man. I love doing these things. So - -10 -00:02:18,149 --> 00:02:19,979 -Wes Bos: yeah, yeah, that's it. I'm - -11 -00:02:19,979 --> 00:02:39,750 -Scott Tolinski: on a 13 inch MacBook Pro from a long time ago. My current one is going by I am currently awaiting the arrival of my new Linux PC. laptop. It's on a PC laptop, Linux laptop. And yeah, man. So hopefully this episode goes okay, but I'm ready. Wow, that's - -12 -00:02:39,750 --> 00:03:08,280 -Wes Bos: exciting. So today, we are sponsored by two awesome companies. First one is Log Rocket, which is you're logging in session replay for your JavaScript applications, and Prismic, which is a headless CMS with the rest and graph qL API. I actually played around with Prismic quite a bit over the last week or so. And I've got some kind of cool stuff that to tell you about it. We'll talk about those partway through the episode. But let's get on into it. You want to grab the first question there? Yes, I - -13 -00:03:08,280 --> 00:03:56,580 -Scott Tolinski: do. Okay, first question is from mirissa. Do you think selenium, selenium? I don't I've never really said that out loud to selenium, selenium could get replaced by Cyprus in the future. All right. Selenium is a platform for end to end testing as well as Cyprus. So do you think Selenium will be replaced by? Yeah, I guess it depends on who is using it. But in my personal experience, Cyprus has a much better developer experience than Selenium. And as far as being like, not even in the same universe, better developer experience. You know, there's always going to be tools like lower level, like the newbie, there's like puppeteer, that could be considered like another thing you can use for this, but I think even Cypress probably just uses puppeteer itself. - -14 -00:03:56,939 --> 00:03:58,560 -Wes Bos: Yeah, I would assume they would. - -15 -00:03:58,919 --> 00:04:50,510 -Scott Tolinski: Yeah, I think they do. And I think that's why it took them a long time to get Cypress working on Firefox, which it does. Now, if that was a reason why you weren't using Cypress, it does work with edge and Firefox now. So it can test all that stuff. But either way, I really, really love Cypress. It's this visual interface. You get to code your tests. In a very jQuery likes fashion, hey, find this thing, click this thing, do this thing. And then when you save it, you can watch your test run visually in a visual browser and see all the outputs and step back through each step of the tests. I really like Cypress, there's definitely some annoying things occasionally with it, where tests pass one time and don't pass another time or, you know, you got to kind of definitely learn the Cypress way of doing things a little bit. But at the end of the day, I think Cypress is the best end to end testing suite by far. - -16 -00:04:50,849 --> 00:06:10,050 -Wes Bos: Yeah, we should also say like both of these products are sort of just ways to automate browsers so you you instead of like running like Like a jest test or something like that, where you expect a function to output, sick, like three plus three is equal to six or something like that, or even like a snapshot, or you expect a span to have the certain characters inside of it. These are much more where it literally fires up an actual browser. And using the JavaScript environment, you can click on things and sort of just like puppeteer, whatever the user is doing to interact with it. So these are pretty cool. They're becoming really popular because a lot of people rather test your application as close to the user. Plus, like all the stuff Scott just said about being able to like visually see what's happening in each of your tests. So it's pretty cool. I've only used Selenium like, maybe four years ago. And at that time, it was slow. And the API was clunky to work with. It was really frustrating to run the tests because it had to boot it up. And now that we have headless Chrome, and tools like Cypress assuming built on top of that, it's getting much easier to work with. So I think it probably will. But I haven't haven't touched Selenium in a couple of years to I don't know where it's at right now. Yeah, - -17 -00:06:10,050 --> 00:06:14,490 -Scott Tolinski: that's where I'm at right now. And Cypress is just so good. I have no reason to pick up anything else. - -18 -00:06:14,970 --> 00:08:44,700 -Wes Bos: All right. Next question we have here is from Leo. When blogging about code, you need a way to display snippets of code in your blog post, what are good ways to do that embedding something like a GitHub Gist, or setting something specific up for your blog? That's a great question. So I just did this myself. And I had previously used a bevy of random WordPress plugins to sort of do it. So when I was building my site, I switched over, and I sort of looked at what the possible options are out there. One option is just put it in a GitHub just but I think, if that's the case, you have to use an iframe to embed it. And I didn't wanted all of the code to be editable on my own blog, because like, already, I've gotten tons of tiny little pull requests that clarify and fix code snippets that are on my blog. And if that's a GitHub Gist, then you can't do that, right. So I wanted that was kind of out the window. And then I went for prism, which I was using on my WordPress blog for a couple years. And I actually ported cobalt to prism, and it looked Okay, it works well. It's pretty lightweight. But it never gave me the syntax highlighting that was like the same as vs. code. So I thought, okay, that'll be okay. And then I went over to this thing called Shiki, which, you know, polar code, there's the VS code extension that will create PNG. Anytime you see somebody tweet a code snippet of like some code, and it's like in a PNG, and it looks kind of cool. Sometimes that's generated often that's generated by a VS code plugin called polar code. And the developer behind that has another project called Shiki, which takes VS code, highlighting files and will take your VS code theme. And that will just output it right into HTML and CSS, which in it works amazingly well, like it looks exactly like VS code. So that is pretty awesome. So I tried to get that going. And there is a Gatsby plugin for that. But I just couldn't get it working. And then someone said, like, why don't you just use there's a plugin called Gatsby remark vs. Code. Hmm. And I just like put my VS code theme from my VS code like cobalt to, I just put it in there. And then it just worked amazingly well. Wow. And I have operator mano, which is my font are already on the website. So I couldn't believe how nice this looked. I didn't have to do anything for special like JavaScript or anything like that. And it just worked. right out of the box. - -19 -00:08:44,730 --> 00:08:46,770 -Scott Tolinski: Does this use like Monaco or something? - -20 -00:08:47,029 --> 00:08:50,730 -Wes Bos: No. I'm trying to wonder what does it use? Yeah, I'm - -21 -00:08:50,730 --> 00:09:04,669 -Scott Tolinski: gonna pop this open under the hood. Gatsby site is not low. Yeah, me right. Now. Let's pop this open. Let's check this out. I'm interested in this because I am currently using prism and I still love it. You know, it's, it's okay. But I don't love it. - -22 -00:09:05,149 --> 00:09:20,730 -Wes Bos: There was highlight j. s and prism for a long time. And that was amazing that you could do that. But now that these editors are built in HTML and CSS, there's no reason why we can't have the same highlighting that we have in VS code in the browser, because they're literally built on browser technologies. - -23 -00:09:20,880 --> 00:09:34,710 -Scott Tolinski: Right? It's fun I do on whenever I do conference talks, and I need code within them. I use just code sandbox. Obviously, I don't want to rely on that. I think you know, like for the same reasons you had with the, the Just let me see what this uses. - -24 -00:09:34,980 --> 00:10:30,840 -Wes Bos: I'm looking at the dependencies under the hood here. And like so what happens is I use markdown, which uses remark under the hood. And I think that those parse it into the classes and everything. So I think that that does a good job already of wrapping spans around every single character like semicolons and quotes and stuff like that. That's how these these syntax has His work is that they, they parse the text and then wrap everything in a span and give it a class of variable or definition or function or method or something like that. And then your syntax highlighter will say like functions are red and brackets are blue and things like that. So I think what this plugin does, it parses your VS code theme, and then translates that into CSS classes that can then be applied. I think I didn't even look into it too deep, but it worked super well. Interesting. It's - -25 -00:10:30,840 --> 00:10:38,640 -Scott Tolinski: all very interesting. I am not using Gatsby on my site. So I'll be interested in tearing this apart a little bit and see what they're doing here. - -26 -00:10:39,149 --> 00:10:57,840 -Wes Bos: Oh, here we go. It's using VS code dash textmate under the hood, which is a library that helps tokenized text using textmate grammars. Okay, so I was wrong there. vias code. textmate is the one that takes in a string, and then outputs textmate grammars, which is spans and everything like that. - -27 -00:10:58,020 --> 00:12:34,950 -Scott Tolinski: Ah, fascinating. Cool, I gotta dive into this. I've always find this to be a giant pain in the rear To be honest, dealing with code in the US the spans and all the classes and you know, the classes and the things. I just don't like that much. Okay, so next question here from code finity. Do my students need need need is all capitalized here to understand recursion to be effective j. s. devs? Do students need to understand recursion to be effective? j s. devs. In my opinion, I just about never use recursion in my day to day work. Not to say that I never do. But I just about never do. There are certainly times where I've been coding on maybe something even look server side to do some sort of operation. I think you know what? Surprisingly, recursion seems like the best option here. And let me do this. And then I get it working and whatever. So do your students need to understand recursion? Yes, absolutely. I think they need to understand recursion. Do you need to be a master of recursion? I don't think so. I I don't use it that much. And it depends on what you're doing, obviously. But in most like real world application, especially if you're a front end Dev, I don't use it in front end Dev. It's usually back end def when I'm using it, it doesn't. I don't think that really matters. But at the end of the day, I think you should have your students learn what recursion is learn how to use it, and learn when it makes sense to use. But I don't think they need to be, you know, recursion sensei at the end of this. - -28 -00:12:35,340 --> 00:13:06,210 -Wes Bos: No, I have recursion in both of my beginner JavaScript, JavaScript 30. And I intentionally didn't just create a video that makes you sit down and learn what recursion is because it doesn't make a whole lot of sense as to like why you might want to do that. And I intentionally waited for a few different situations where a problem popped up. And the solution was recursion. And then we said, okay, because, like for me, I remember like, it's a scary word you sort of look at it like, and I - -29 -00:13:06,360 --> 00:13:09,899 -Scott Tolinski: do want to give a quick one on one, like a very quick 101. - -30 -00:13:10,529 --> 00:14:12,000 -Wes Bos: Yeah, I always say recursion is a snake eating its own tail. Meaning that it's a function that calls itself indefinitely until you have what's called an exit condition. Meaning that like, you might have a function that looks to check if a letter is a specific letter. And if that's not it, then it would just run again on the next letter, and then you so basically, the function calls itself from within it, but then you pass it maybe the next letter in a string, or you can use it with anything, really. So I think your students should know about recursion and maybe the problems that it would solve. And then when they hit an issue where recursion does get introduced, or recursion, is it they're going to go? Oh, yeah. And that's why they've been talking about recursion. This is the problem that it solves. So absolutely. They're in some cases, like Scott said, like, people don't use recursion all that often. They rather just use a, like a while loop or something, right? Just runs until you have an exit condition. - -31 -00:14:12,210 --> 00:14:46,590 -Scott Tolinski: Yeah, there's so many instances where it's like, there's multiple solutions to this problem. And you could do some sort of a loop or you could do some sort of recursion. And most of the time, I think a loop is going to be easier for a lot of devs to parse, or recursion might be a Yeah, well, I don't want to say simpler, but a smaller solution, code wise or something. So definitely something to think about. And definitely something to practice, but maybe not something to really, really concern yourself with, like really beating yourself up over not knowing the most optimal way of doing things every time. - -32 -00:14:46,830 --> 00:17:30,030 -Wes Bos: Yeah, another classic. I just thought of another good example, if you're doing like a rock, paper, scissors, sometimes what will happen is that you'll need to run the game. So you might have a function called play game and at the very bottom of that function, You'll want to like, let's say you're doing a best of three. And if that's the case, then you got to check does somebody have or maybe best five, and in order for someone to win, they must have three wins, right? So at the very bottom of that play game function, you'll say, if somebody doesn't have at least three wins, then play game. So that's the play game function is calling itself. And then it just starts over again. And then it runs again and again. And again. Eventually, your if statement at the bottom of that function, will say somebody did win. And if that's the case, that's called your exit condition, and then that function will no longer run. Yeah, work. Cool. Um, what do we got next here? Question from Renan. Hello, guys. What do you think about developing just using an iPad, plus keyboard plus external monitor to try this? I just moved my environment to a VM on a cloud, and configured code server VS code accessible by the web? Oh, that's cool. It works pretty well. The only problem is now is that I have an iPad as bad resolution for external monitor. When I'm using the browser, this is a really cool question, because it's kind of one thing that I see happening a lot, both in, like, kids growing up right now, but also just in my friends in general, that are not tech savvy, like me is that nobody's using a actual computer anymore? Hmm. And what does that mean for us? like dinosaurs that are still sitting down and building the things that are on computers? Like, is that gap becoming larger now where someone can't learn to code just because they don't have like a proper computer that they can sit down to? They should be able to just like code on an iPad, right? So the solution is, yeah, like, you can't run Gulp, or Webpack, or whatever, on an iPad, but you can run it on a server, which then is piped into your iPad, which is kind of cool. So I think that it would work pretty well. I've never done it myself. My only frustration with an iPad is the like, multitasking. I know it's getting better. And Apple's that kind of rolling out these things where it's like, it's your only computer. But like, I still get really frustrated trying to do stuff really quickly on an iPad, where I think like, oh, man, I could just fly if I was doing this on my computer. And it's to a point where if I have to do anything half serious, even what if I have to buy something online? I just put it down and I go get my computer? Because I feel like I'm so much more productive on that. But do you think - -33 -00:17:30,510 --> 00:20:21,350 -Scott Tolinski: this question is near and dear to my heart? Because I've been thinking about this a lot, specifically, because I was looking for some sort of backup solution, right? For those of you who've been listening to this show for any bit of time. No, apparently my hardware breaks all the time. And it might just be because ports. Yeah, I don't even know like the issues that I'm having to send my computer in right now for our issues that it came with, like the left speaker has been buzzing since I bought the computer. And it's had light leak on the monitor since I bought the computer day one turned on this $5,000 computer and had light leak on it. So I've been needing a backup machine for this. And I've decided that to really prevent this machine from breaking any further, I'm just basically going to leave it on my desk all the time and use it as a you know, production machine only exclusively right. And so I wanted to get a backup somewhere I could code, coffee shops and things and I started looking into what it would take for that to be an iPad Pro. Because I like the new keyboard. Courtney's has an iPad Pro, and it's really, really nice. I really like it. And I was just thinking, hey, maybe that's a possibility to get an iPad Pro could take this with me, it could be like a travel or around the house coding machine. And then I began to look into it and adjust. Honestly, it seemed like too much work. It seemed like there was too many things that I would have to jump through too many hoops to get it to be super effective. And I ended up getting a Linux laptop instead from system 76. which apparently this thing has a 21 hour battery life. So I'm pretty psyched about that. But at the end of the day, I found this to be something that is not super great right now, but could be good. I think this code server thing is a good idea for a way to run a development environment. I think it's an interesting idea. I really don't know if I want to have all my stuff running on the cloud all the time. I would really prefer to have it all running locally. You know, if you're an environment with bad internet, like you know, coffee shops, typically my local coffee shop, terrible internet some of the worst ever. So I don't know if I would really love to rely on that unless I had like a 5g connection everywhere or like a guaranteed internet connection. I think those are my biggest concerns about that is the fact that you're not able to code if you don't have a connection to the Internet somewhere. So just things to consider here. I don't know if I would do it but if you've got cash to spend Maybe try it and see if it works, you know? Or, or maybe if you have one sitting around like I have an iPad sitting around. And maybe I could get this set up and working and have some sort of a cloud environment on it, just get a little Bluetooth keyboard board or something and see if that works before making an investment into something more substantial. - -34 -00:20:21,800 --> 00:20:53,880 -Wes Bos: Yeah, I bet that in the next three years that this will be much different. Totally, yeah. Because like, so you look at something like code sandbox or code server, and it is doable via the browser. The cool thing about this code server is that you can own it like you can actually host it yourself. And that would be huge for companies, because they don't seriously don't want to put their code base through maybe code sandbox where you have to store your code on somebody else's server, that's certainly a good option. I just don't know if it's totally there yet. I know - -35 -00:20:53,880 --> 00:21:05,010 -Scott Tolinski: as much as I love code, sandbox two, I have run into issues where my tests were failing on code sandbox, because of code sandbox, and not because of my test, you know, in like, how much do you want to deal with that? - -36 -00:21:05,360 --> 00:21:36,690 -Wes Bos: Yeah, I, we should, like revisit this in one year, because I bet this will change. And I will totally just because I want this coding to be available to anyone. And it would be really cool. I've gotten messages from people and asked if they can take my courses on an iPad, and you can with something that code pen or especially like, even like my JavaScript 30, you can do all of that in a code pen. No problem, you got your library refresher, but right below you, it's awesome. But as soon as you get into like more like serious work, I would think it gets a little bit harder. - -37 -00:21:36,830 --> 00:23:20,910 -Scott Tolinski: It does. I'm a huge fan of code sandbox. I think it's fantastic. I use it all the time. But I don't know if I would love to work on it. 24 seven, at the moment that is, but if you are working on a project 24 seven, and you want to make sure that there are no bugs in it, you're going to want to use a service like Log Rocket, and Log Rocket will blast you off into the galaxy, or at least the solar system, local solar system, you know, further into the galaxy might be a little bit more difficult. But you'll want to head to Log rocket.com forward slash syntax, check this out, you're gonna get 14 days for free. Now, what is Log Rocket? Well, Log Rocket is the perfect way to visually see why your errors are happening. Did your user somehow spawn a Tyrannosaurus Rex just walking across your How did they do that? Well, you can find out how they did that. Without having to guess because you're going to get a pixel replay video of what happened that scrubbable you're going to get the network requests, you're going to get the error logs, you're going to get your Redux store, and you're going to be able to visually see what happened. So check it out at Log rocket.com forward slash index. All right, next question from El local Toro boss. Hey, that's a good name you got there. El Toro El Loco Toro boss. Hi, guys, a react workflow question. I often find myself refactoring sub components out of a component once it gets too big. This, however, is very tedious work, especially if the sub component is tightly coupled with the component and thus needs to take a lot of props. Do you have any suggestions? Do you just let the component grow? No, I do not. I am a big proponent of really taking things out when you start to feel that feeling. - -38 -00:23:21,180 --> 00:23:22,740 -Wes Bos: You're a component proponent? - -39 -00:23:23,130 --> 00:24:17,610 -Scott Tolinski: Yes. Yes, I'm a component proponent. You are absolutely correct. But I think this a listener like perfectly encapsulated that feeling that you get when you're coding and you're like, Huh, this thing is starting to feel like this should be its own thing. And the moment I get that feeling, make it its own thing, because it's only gonna get harder. Do it. Do it, do it. You know what? There's some VS code tools and extensions. I'm on my 13 inch, so I can't check out exactly what they are right now. I don't have them installed. Do you use any of these extra things west to refactor react components within vs. code? I know, there are some extensions that are built to do exactly this. I know some people have showed me something where you select your HTML, your JSX. Yeah. And then you would essentially right click it and say, I know VS code has like a, there's something in VS code where you can, you know, move it to its own file or something immediately. Oh, that's cool. Yeah. - -40 -00:24:18,090 --> 00:24:25,470 -Wes Bos: I only use one for generating prop types automatically. And even then I don't I don't use that all that often. Hmm, I know, - -41 -00:24:25,470 --> 00:25:10,620 -Scott Tolinski: it's built into VS code to move to its own file. There's an extension called j s refactor. And if you have this installed, you can do extract to function, extract to function convert to whatever, but you can extract things to their own function. It's not perfect. Oh, cool. I think there has to be a react version of something like this. I'm sorry, I don't have my my real setup here. So it's a little tricky for me to to explain this properly, but there has to be something that's like select this and then turn into a JSX component or functional component. If you have An extension like this that you use for refactoring, please let me know. But my suggestion for this a local Torah boss is to just do it, do it early and just bite the bullet make it happen. - -42 -00:25:10,920 --> 00:26:27,990 -Wes Bos: Yeah, early is the key there, because you said it's very tedious work moving out. And that's probably a sign that you did it too late. Because the whole idea behind these components is that it should be nice and snappy and things like that. And if you find, like, oh, there's so much to move over, that thing probably got too big in the first place, taking lots and lots of props. So like, if you find like, I have to pass down seven or eight things to this component. If that's the case, you can spread an object full of props. So if you've got like an ID, Prop, and a person prop and an age Prop, and you've got like six or seven different things, you can stick all those props into one object, or each of the props is a property on that object, and just spread the entire object, which it looks like you open angle bracket, you type the name of your component, curly brackets, and then you do dot, dot, dot and the object that you'd like to spread in and that will take every property of that object and pass it in as its individual prop. Yeah. Next question from Pat Clark insert hoser related greeting here a fellow hoser among us must be a Canadian, or at least for Michigan has a hockey fan. I don't want to actually don't want to love Pat's spot. I know where Pat lips but - -43 -00:26:28,020 --> 00:26:40,110 -Scott Tolinski: not like, I don't know where his house is. But I know his his general awareness. Oh, yeah. Sorry, Pat. I don't actually know where you live. He's a member of the chat room. But he's a hockey fan. He's got a hockey podcast. Pat's a cool guy. - -44 -00:26:40,440 --> 00:26:43,110 -Wes Bos: Is he a Canadian? American? That's a great question. - -45 -00:26:43,290 --> 00:26:55,170 -Scott Tolinski: I don't know his origins. I don't know why he lives. Yeah, but I don't know his origins. Okay. I don't know where Pat come from. I you know, he is a hockey fan. So you know, maybe just to Canadian by proxy, I - -46 -00:26:55,170 --> 00:29:59,250 -Wes Bos: don't know. Makes sense. Anyways, he's a fellow hoser during quarantine have tried to come up with an outline for creating a goofy Pokemon app with my boys, age eight, and five. They're obsessed with Pokemon right now. I figured this will be a fun little group activity. I see they are struggling with focusing on the online instruction. So that that's like a kind of a big thing right now, is this online teaching that everyone is doing? Oh, yeah, starting to crack at the seams with all these kids that are a couple months in even even my own kids. I know. And they're a bit fatigued with learning right now we've tried doing a bit of scratch scratch, Jr, which is sort of a GUI based programming environment. But there was I figured a fun theme project will help them stay engaged learning, but I'm struggling of where to start. How would you go about creating course slash activities like West's JavaScript 30 core specifically designed for primary slash elementary age kids? I think this is such a cool question. Because it would be so neat to make some sort, of course or something out there, where you actually are building something that helps these kids learn to code. So my answer to this is similar to my thoughts of teaching adults, and it sounds like you're on on the right track, you have to have small wins with these exercises. So don't go out to make this massive Pokemon application. Because that's way too large, it might not ever get finished. And if the kids don't see any successes really quickly, then they will get fatigued and be sick of it. And that's the reason why am I JavaScript 30 course, the very first exercise is a drum kit, because you start the course and within like 10 minutes or so you've built this thing where you can hit the keys and it starts playing a drum based on what key you hit. And people send me videos all the time of their kids just immediately come over and go, Oh, what are you doing over there, or I want to build something like that. So these like small wins, small projects were things that are both, they're fun to do. But you're also learning it at the same time is key. And then also like open ended as well, if there's one thing I've learned with my kids, if you give them like something to start with, so we have just big bin of wood at our house, and my kids always take the wood out and start playing with it. And I gave my kid just a couple screws and the screwdriver. And surprisingly, they're able to crank them into the woods. Yeah, nice. And you just leave them for however long they need. And if you leave it open ended or you give them something to start with, like a simple drum kit, then people's mind starts going like, Oh, I bet I could change this into X, Y or Z like people that send me screenshots of what they've built in my courses. It never looks like what I've built and it never does what I've done, and it's because they did the thing, let's say cool whilst I did what you did. But here's what I'm really excited about. And I changed it to being a guitar or piano or something else like that. So being able to give them enough that it will spark some idea in their head and they'll be able to take it and run with it from there. I think those are key. - -47 -00:29:59,430 --> 00:32:11,610 -Scott Tolinski: I think those are Totally key in. One thing I would want to add on because I thought you killed this question here. But you did a great job on this one. I know that there's the graph qL Pokemon polka dex thing? And no, I don't know how much pat you work with graph QL. But it's really fun to quickly fire up that graphical and see that you can like search for anything. And maybe that might be like, I mean, I really don't know, the capacity here. But that might be, you know, at some place interesting to look specifically Pokemon related. There's an Open Graph qL polka decks API that people use for teaching graph QL. So if you are interested in checking out that that might be something to look at as well there. But I don't have a ton of good advice here. I think Wes killed this one. My my kids are still too young to concentrate on any of this stuff. So it's hard for me to have any plan around here just yet. So next question is from Cheyenne. How much should someone who wants to work as a web developer starting as a junior position should know about data structures and algorithms? Should I practice algorithms? So basically, this question is this person is looking to become a junior web developer? Okay. Web Developer? No, no, mention a front end or back end. But how much should they worry about data structure and algorithms? Well, it really depends on what kind of work you want to do. If you're building front end interfaces, you're doing CSS and JavaScript and building clicky. things that make things happen when you click them. I would not focus a ton of time on this, because that's going to be wasted time. I don't use the that stuff in my day to day, absolutely not. However, if you are interested in becoming a better programmer, overall, yeah, you should maybe learn this stuff, and maybe even learning it as a hobby as the way to go. Or maybe learning it a little bit less like rigorously, with little bit less intention behind it. But as a front end developer, you probably won't use algorithms in the way that they're used in actually computer science. But I don't know, it's probably good to have an awareness of them. But as a front end developer, I just don't use them, you know, very often and in like, any sort of scientific sense. - -48 -00:32:11,880 --> 00:32:43,800 -Wes Bos: Yeah. I'm so glad you said that. Because like, I probably like a couple times a week, I get an email from someone saying, hey, Wes, do you have a course on data structures and algorithms? And I'm like, not really no, like, actually not at all. And honestly, I've been a developer for like, 12 years. And the only time I've had to learn those things is when I was trying to go in for an interview at Google. And other than that, I never ever use those things. The joke I use is no just npm install it. But even then, like, I'm not doing tree sorts, or - -49 -00:32:43,800 --> 00:32:44,640 -Unknown: link - -50 -00:32:44,640 --> 00:33:33,960 -Wes Bos: Yes, or stack pops or any of this stuff in web development. And I don't think it's I think that their people are asking this question, because they see it in job postings, because like, oh, why else would they would they be asking? They're sort of just looking at job postings, and the job posting probably says, knowledge of data structures and algorithms. And I think that maybe that's just taken from some like stock web developer job posting. Because like, I don't know, I've been on the inside for a long time. And I've never come across the actual need to know these things. Certainly, you need to know how to maybe efficiently work with large sets of data and how to search through things quickly, and how under the hood, all of these things probably work. But quite honestly, if you're trying to build a web app or something like that, you don't need these things. - -51 -00:33:34,230 --> 00:33:53,070 -Scott Tolinski: Yeah, that's where I'm at. It depends on your career trajectory in where you see yourself. And if that career trajectory requires these things, otherwise, I don't know. Yeah, maybe it's not worth your time. And you're better off spending more time hacking together some front end stuff. It really depends on what your career trajectory is looking like. - -52 -00:33:53,520 --> 00:34:09,510 -Wes Bos: Next question we have here from Zack killer podcast, guys. I'm working with a friend to set up a YouTube channel and are getting into podcasts too. Not tech related. So no competition. No worries. Good. Scott, I actually take anybody out if they try to start a tech podcast. Yeah. Well, we - -53 -00:34:09,510 --> 00:34:16,050 -Scott Tolinski: don't talk about that. Wes. We don't talk about that. Okay. Oh, sorry. Yeah, that's probably after the show. That's the after show. - -54 -00:34:16,830 --> 00:34:36,750 -Wes Bos: Yeah, who is if anyone's trying to start anything like that we? We've got our ways. Don't worry about that. Don't worry about Anyways, I'm thinking about trying to host my own RSS feed. For podcasts to save some big bucks. Am I crazy? Thanks. This is a great question. I think so. Yes. - -55 -00:34:38,850 --> 00:34:41,210 -Scott Tolinski: Especially after being involved in this Yeah. - -56 -00:34:41,670 --> 00:36:13,920 -Wes Bos: Yeah. Like the RSS feed is so key to your podcast going out and I've seen lots of people who host their own and little stuff, your server goes down or something breaks and then the whole thing is broken. What you should do is when you start your and we did this for syntax, that Fully, when you start your podcast, make sure the RSS feed that you submit is on your own domain. So even though we use a service to host our podcast, the RSS feed is on V dot syntax calm and that way we own the domain name. And if we ever want to switch to another service are hosted ourselves, we absolutely can. I think this is like akin to, you know, people who use their email addresses at their ISP provider. Yes. You know, like, you talk to somebody that's super old, and they're like, Hi, please email me at like, around here. It's like that dotnet? No, no, not Hotmail. It's like, oh, Comcast. Yeah, it's like Comcast or spectrum. When you sign up, you get an email address, and they use that like, you're screwed, then like, if you ever stop paying that ISP for internet, then your email address has gone to that doesn't make a whole lot of crazy. Yeah. So that's my suggestion there. If you do want to host yourself maybe look for like a WordPress plugin. I think people use like blueberry or Blackberry, something like that. But it's not that expensive. And there's there's all kinds of podcast startups out there right now. I'm sure a lot of them have free plans, which would be more than enough for a podcast starting up. - -57 -00:36:14,420 --> 00:36:19,230 -Scott Tolinski: Yeah, I agree. 100%. With your answer here, I would not do that. - -58 -00:36:19,530 --> 00:36:23,100 -Wes Bos: I always say do it yourself on everything. Except for things like this. - -59 -00:36:23,130 --> 00:37:57,110 -Scott Tolinski: Yeah, there are definitely some things where you don't want to DIY it. Alright, next question is from Luke, Luke says, Do you guys name your colors in terms of the color, or the use of the color, for example, you say you styled all your links to be purple, would you name that color purple, or link? Here's what I do. I name one color purple, which is the purple. And then I named link, after the purple color, especially I use CSS custom properties. But I would do this with sass to where people like there was like a time where people are like, do not name your colors, use the action of the color, what the color doing is the primary whatever, like, there was such strong feelings about that. But in my mind, it makes more sense to name your colors like this is the site's purple, this is the site's black, this is the site's yellow, this is the site's blue, whatever. And then after that, take those colors and then reuse them to say this is the accent color. This is the card background. This is the header color, this is the text color. And then you can have that system and you have the best of both worlds. There's no reason not to do that. I do that myself personally. And it actually works really well with our seeming theming system within CSS custom properties. Because when I wanted to make our Wave Race 64 theme, I did not change the card background color. But I changed the blue color or I changed the purple color to be something else right? I changed the actual purple or whatever, to whatever the purple that was on the cover of wavery 64. So that is my suggestion there best of both worlds. - -60 -00:37:57,420 --> 00:38:17,900 -Wes Bos: Yeah, I agree with Scott, I do exactly the same thing. I'm usually just start with color names. And then things that are common enough. Like link, like, I'm not going to do like border color if I'm only using it once. But if I use that, like link six or seven different places, then I'll make its own variable. And yes, CSS custom properties make the stuff so simple. - -61 -00:38:18,380 --> 00:38:21,150 -Unknown: Also, I have a tip for making things simple, - -62 -00:38:21,210 --> 00:38:38,340 -Wes Bos: sort of along the same thing. People ask me why I do this all the time. But I always set gray on my route. And then I set gray with an A to B the other gray. Guys Canada. Canada smells it one way and I don't know which way it is. I always forget. - -63 -00:38:38,360 --> 00:38:51,240 -Scott Tolinski: I don't know either. In my latest course, I wrote gr e y. And then I had to like call out the fact I'm like, Listen, I don't know, which is the correct one. So you can name it with an A or an E it's 100%. Up to you. You know, it's so funny. - -64 -00:38:51,240 --> 00:39:02,610 -Wes Bos: I've no idea is popular in the US. I just looked at it. Okay, EG Why is reigned supreme in the UK, Ireland, Australia, and other places that use British English, which includes Canada. - -65 -00:39:02,610 --> 00:39:04,860 -Unknown: Fun. Ah, - -66 -00:39:04,920 --> 00:39:07,590 -Wes Bos: the states gives everything up inches. - -67 -00:39:07,650 --> 00:39:14,250 -Scott Tolinski: I'm sorry. Yeah, I'm gonna apologize on behalf of the founding fathers for not using metric. - -68 -00:39:15,630 --> 00:40:53,580 -Wes Bos: metric gray. All right, let's talk about one of our sponsors. And that is Prismic. Prismic is a headless CMS with a graph qL and a REST API in it. I actually went ahead and built a little app in it the other day, just to try it out into to get a feel for it. And it's really neat. There's a couple things that I really like about it that I'm going to point out is first there's no code needed to get this API up and running. So you literally sign in, use the entire interface for creating all of your content types. You can create repeaters, which in turn will have sub content types inside of it. So like if you have like a store content type and then inside that store, you might have like images that would be repeater because you want to have an image and maybe some text that goes along with each of those. And you can relate things to each other, which is pretty nifty. They've got like 10 or 15 different types of input fields that have different UI, and then use hook that thing up to whatever front end you're using. They've got a really nice Gatsby plugin that you can just pop in, it grabs all your content on, you can make pages you can query this stuff as you need, which is pretty nifty. And the other thing I wanted to talk about is that they have image x, I am GIX built right into their images. So if you want to do things, we've talked about cloudinary, a lot very similar to that if you want to crop something, or resize something, or change the format, something like that, that comes with all of your Prismic image uploads, which is pretty nifty. So check it out. prismic.io forward slash syntax. Thanks so much to Prismic for sponsoring, - -69 -00:40:54,360 --> 00:40:56,250 -Scott Tolinski: nifty, super nifty, - -70 -00:40:56,250 --> 00:40:57,480 -Wes Bos: very nifty, super - -71 -00:40:57,480 --> 00:42:35,310 -Scott Tolinski: duper nifty. Next question is from Jean Henson, here? Hey, guys, I'm listening to you for about a month and I really dig it. I'm working on an app that will require a couple of different databases, I need a database for user information. And the larger database for application data. The app does some analytic stuff. So data is critical. I'm getting lost in the world of hosted database options and lab digitalocean, etc. Big cloud providers, AWS, Google, etc. Could you guys talk a little bit about how you choose database hosting? bonus question. Have you ever used auth 00 Cotta for user authentication? I have used auth. Zero. It's nice. I have not used ocata. I have not heard of Okada. Sounds like a cool name. Well, yeah. Cool name. Yeah. Whoo. This is a difficult question. Because I'm not a database, bro. And I don't want to give bad advice here for working with a database. If you are concerned about data, critical uptime, I think AWS in there. Likewise, their services, you know, the AWS services, the ATM machines, they are probably one of the better routes you can go considering who's hosting on there and what they're hosting on and how many people are using it? How much content tutorials are on there. I'm curious about like the authentication and the data stuff. I keep all of that in the same database myself. I don't know it. I'm sure you do, too, Wes. But I don't know what your thoughts on Yeah, that they're I don't necessarily want to give you bad advice gene. So I would probably if I were you go to AWS. But that's not like maybe the most informed opinion, I think. - -72 -00:42:35,420 --> 00:44:22,320 -Wes Bos: Yeah, so the difference between these things is like m lab. What's the other one? Atlas? Yeah, MongoDB, Atlas, digitalocean. All of these things. digitalocean probably doesn't fit into this thing. But the way that it works is that they are services that provide you generally a layer of accessibility and ease and migration and backups. And they provide a whole bunch of like handy things on top of it. And sometimes when you use these services, they literally ask you, where do you want to host the database? Right? So I think my database is actually hosted on Amazon minus as well. Yeah. But I don't care about that, because I'm just using em lab or Atlas. So there's, do you want service plus actual raw infrastructure? Or are you smart enough to just do it yourself? And then go ahead and host it. It's the same thing with with hosting a website, like, do you want to go with Netlify? Or sites? Or what they called virtue? vertue bare cell virtues now vs owl? Or do you want to go with one of these things where they're certainly more expensive, but they're way easier? Or are you just going to go host the thing yourself, and scale the servers yourself and be able to do all of those things yourself. So in my case, I would say just go with M lab or MongoDB, Atlas, or whatever, go with, like a setup for you solution, until it starts getting too expensive, that you're scaling so huge, that it's costing literally hundreds, maybe thousands of dollars a month to host this database. And then when that's the case, they say, okay, what's it gonna take for us to move this over to another provider? That's more raw infrastructure? AWS, Google, things like that. And if that's the case, that's kind of where I would go, unless you love doing the stuff yourself. - -73 -00:44:22,740 --> 00:44:23,310 -Unknown: Agreed. - -74 -00:44:23,400 --> 00:44:28,860 -Wes Bos: Have I ever used off o or o Cotta? I've used I always say auto. It's off to zero. I - -75 -00:44:28,860 --> 00:44:30,270 -Scott Tolinski: see. I see. Zero. Yeah, - -76 -00:44:30,960 --> 00:45:07,620 -Wes Bos: I say everything wrong. So just whatever I say it's probably wrong. Yeah, I've used up zero a couple times. It's pretty cool. But in in all of my courses, I have just coded the off ourselves except for the Firebase Auth. One that we didn't react for beginners, just because like, I still found it a little bit confusing, especially the new rules around cross domain cookies is really annoying. And then the whole signup flow or it kicks you off. The website you got to come back is kind of frustrating when if you could just leave the user on the same page, I find that a little bit nicer - -77 -00:45:07,950 --> 00:45:08,490 -Unknown: word. - -78 -00:45:09,270 --> 00:46:57,270 -Wes Bos: Next question we have here is from Beatrix gloria de, Hi, I'm confused about using GitHub, what happens to the files that are ignored. So in your in your Git repo, you can have a git ignore file. And that will allow you to list folders and files that you do not wish to be part of your Git repo. So what happens is the files that are ignored, but are required for development, what's the best practice to backup both I've used in V files, but not sure how it works, if it's in a dot Git ignore, and the site is deployed via GitHub or Netlify. Right now, I have a backup folder on my hard drive. And I backup both the dev in the live versions with the timestamp and whenever I do a new release. And then there's another question here. I'll leave that for just a second. This is a good question. Because there are certain files that you should not commit to your Git repo, most likely they're going to be in V files. And DMV is just a way to put secret information, things like API tokens and passwords and login usernames, things that shouldn't be part of your Git repo. But they do have to be on the server. So the process for that is generally you have to log into your production server, or log into, like I know, Netlify has a UI where you can input these environmental variables just into the UI, they give you a text boxes for that. So that's the process but backing them up. That's a good question as well. I don't think that I back them up, except for the fact that I use like a time machine to backup my entire computer and they'll be on there. So I don't have anything else past that. Because I know that these things if I really did totally, absolutely lose them, which has never happened to me. You can just log in and reset your API tokens and just get new ones. Yeah, I'm - -79 -00:46:57,270 --> 00:47:13,050 -Scott Tolinski: with ya. It sounds like Beatrix, has it figured out in terms of like, back II know, having a backup folder with versions and a timestamp. That's way more than I do. And that's probably a better solution than what I would suggest anyway. So I think you got to figure it out, Patrick. - -80 -00:47:13,050 --> 00:47:14,130 -Wes Bos: So thanks for teaching us - -81 -00:47:14,160 --> 00:47:17,370 -Scott Tolinski: Yeah, right, exactly. I'm about to go make a timestamp thing. - -82 -00:47:18,480 --> 00:47:32,280 -Wes Bos: That's good. We had one more little addition to this thing. You spoke about jetpack. I'll look into that. But I'd be curious about what is the best and how to do this with a cron job. For example, what is jetpack? And no, not the WordPress plugin? - -83 -00:47:32,280 --> 00:47:37,740 -Scott Tolinski: Yeah, I've heard jetpack used in different contexts, including WordPress. Oh, - -84 -00:47:37,800 --> 00:48:43,200 -Wes Bos: I think I know what they're talking about. So I use jetpack to like backup my wife's WordPress website. Oh, gotcha. And that's great. Because you can always you can log into jetpack and rollback an entire version of your website, which is really cool. It could take like 10 backups a day. So I don't think that WordPress is a little bit different, because almost always, a WordPress plugin will store your tokens and keys in the MySQL database instead of an environmental variable. So if it's an environmental variable, jetpack won't grab that either. How would you do it for a cron job you could this is actually maybe not a bad idea is you can code up a little JavaScript file or a bash file or something that simply copies those files and timestamps them and then dumps them into the folder that you're talking about. And then set that up to be a get pre commit hook. And a get pre commit hook will just run whenever you make a commit or whenever a pre push hook. And before you push it will take a copy and put them in your folder like that. And that will be automatic. I like that. That's a good idea. - -85 -00:48:43,410 --> 00:48:57,870 -Scott Tolinski: Beatrix, you got the ideas. Love it. Yeah, these are all great ideas. I'm gonna try to implement something like this. Alright, next question is from Sam and Sam gets this a little Pronunciation Guide. He says it rhymes with ham. So thank you, Sam, I would not have figured that out. It wasn't for you. - -86 -00:48:58,230 --> 00:49:16,020 -Wes Bos: Actually, in Canada, in the West Coast, or in the mid coast, I guess was the schedule and they say, in Alberta, they say som and they say hom o sound if you have some job on your beigel. So yeah, I don't know Psalms. Um, hey, Sam. - -87 -00:49:16,020 --> 00:51:44,820 -Scott Tolinski: I was laid off early in April because of COVID. I'm sorry to hear that. And I'm sorry that we just have your name after reading this. I have been trying to file for unemployment since then. The state unemployment office said that they were launching an update website for filing claims. On a specific date, they ran a banner saying that demand has been so high. It's affecting the process despite rigorous testing. Why is it so hard to scale? And the answer to this question is because people don't really care about scaling until they need to is this is the real answer to this. And it's not because that's the right thing. It's because that's the real thing, right? Everybody has deadlines and whatever. And if you tell your boss Hey, I need months to work on this. To make sure that it works when 10,000 people are doing this at the same time or whatever, they're probably not going to grant you that time. If the project doesn't allow it, that's really just the cold, hard reality of it. And me personally, if all the sudden level up tutorials became an international phenomenon, I think I wouldn't be screwed, because I don't think it will. But it is not something that I'm preparing for. And I probably should now there are different ways to scale in different ways to test this. So what you are looking for, in one of these things is stress testing and stress testing is difficult to do. It's not exactly easily accomplished, but you need to be able to figure out a way to essentially hit your website, your server, your database, any of these vectors that exist, right, you need to hit them repeatedly. And often. And I you know, I think we, we've both learned a little bit about some of the stress testing that can happen in terms of like, security wise, in terms of things like, yeah, app shows, and whatever. And, you know, CloudFlare has some really great DDoS protection for those types of things. But this isn't even like, this isn't a DDoS it's, like sort of an unintentional DDoS. Yeah, it's just lots of people using it. Right. Their system wasn't built to accommodate that. I think that a lot of it really comes down to a lack of planning on the development side of things that people didn't plan for this particular situation, right, which, obviously, I think this global pandemic is going to change people's viewpoints on a lot of things and how they plan for various things. I think just the fact that entire world can shut down for you know, certain amounts of time should make people open their eyes a little bit to some things that they need to take better stock of. - -88 -00:51:45,120 --> 00:51:49,500 -Wes Bos: Yeah, even in Canada, we have this like, weird store called Canadian Tire. - -89 -00:51:49,620 --> 00:51:50,880 -Scott Tolinski: I know Canadian Tire. Yeah, - -90 -00:51:50,940 --> 00:51:59,130 -Wes Bos: yeah, they were down for, like, their website literally said, please come after 5pm when it's less busy. And I'm just like, - -91 -00:51:59,400 --> 00:52:00,540 -Scott Tolinski: this is a website. First of all, it - -92 -00:52:00,540 --> 00:55:11,280 -Wes Bos: sucks to be yes. Sucks to be the the developers behind that trying to fix that, because they're getting slimani slammed right now. But also, like, I'm just thinking the same thing, like, what's the problem here, and like, I kind of know what the problem is, is that like, these are websites that have been built on for 10, maybe even longer, like, I know, the unemployment in New Jersey was built on COBOL. And these are not websites that you can just quickly spin up another box, and everything will work just well, because they're much more brittle than that. So there's two ways you can sort of scale up a website. The first one is, you can increase the resources on your server. So more RAM, more CPU space, more harddrive space, and there's a limit to how much RAM you can stick in the server until you get diminishing returns, or just you could literally can't put any more sticks of RAM in it. The other way to scale up is to load balance that meaning that you have multiple servers and every single request that comes in, gets a load balancer takes in that request and decides which line in the grocery store that that request gets to go to. And in order to load balance an application. There's things that need to be shared amongst all of the applications like I can load balance my application, no problem, because let me tell you the things that need to happen, your application needs to share data from server to server. So generally, you need things you need your database to talk to, obviously, both of those database has to be connected to both servers. And if there's data that like needs to go from one server to another, then that has to be saved in the database. And a lot of applications will store things like login sessions, temporary variables, file uploads, things like that will often be stored in memory. And things that are stored in memory don't get shared from server to server. So that needs to be thrown into a database. Something like Redis is really popular in that regard. So if you build it's very popular in the last couple years to build stateless applications, that's why serverless functions are really popular because the serverless function spins up, it does its work, and then it closes down and there's no like, there's no state that is maintained in that serverless function. And if you build your application, that way, it is much easier to scale it up. But still, it's not an easy thing to do, especially if you need to, like take something down. In order to test this, you can't do that as well, you have to put it on a separate domain name, something like that. And then there's the other side of it, which is your database needs to be able to scale. And that's an entire area I have no clue about but I know they're scary things like sharding where you can distribute your database amongst multiple databases, multiple servers, things like that. That's that's a very complicated thing to do as well. And for me, and you, it's probably easy just to go reach for a service that can scale itself up. But a lot of these companies especially the government, they hosted All in house. And it's not as easy as just going getting another AWS server, it means, like a one year procurement process of actual rack mounted server hardware hardware. - -93 -00:55:11,430 --> 00:56:04,230 -Scott Tolinski: Right, exactly right. I know for us, it's just click that up arrow, and call it a day at some point. Until, but again, we're not getting slammed away. These unemployment offices are getting slammed right now. It's really, really difficult problem to solve, I think. But yeah, I don't know, I don't have a ton of great advice other than what we just said, you know, again, it's it's all about proper preparation for situations like this. And I think a lot of times these companies just don't have the resources to do it, don't have the time to do it, and maybe don't have the manpower to do it. And it just doesn't get done and global pandemic hits, and all of a sudden, everybody is shorting rather than shorting. Yeah, that's a good one that was off the dome here was playing. Wow. So next question, that last question I should say is from Eric Zorn. That's a pretty dope last name. Eric. Zarin You sound like a James Bond villain. - -94 -00:56:04,440 --> 00:56:07,560 -Wes Bos: I think the Dutch name actually. Oh, yeah. Dutch. - -95 -00:56:07,710 --> 00:56:24,720 -Scott Tolinski: Hey, guys, what's your take on these rails like server side, rendered react and graph qL frameworks. Here's another one built by Michael Jackson and Ryan, Florence. And some others called remix. He has a link to remix. We've talked a little bit about remix, maybe not on the show. But Wes and I have chatted about it. - -96 -00:56:24,900 --> 00:56:33,180 -Wes Bos: They're gonna come on the podcast, they are going to come on the podcast, I don't know when. But they have confirmed they're gonna come on the podcast and talk to us about REMAX sounds pretty cool. - -97 -00:56:33,180 --> 00:57:12,540 -Scott Tolinski: I'm pumped about that I'm very pumped about that. I've never met Ryan, or Michael in person. So we Nice to meet them. So this, of course, is in addition to Redwood and Blitz, which are two frameworks that we've talked a little bit about on here. Thanks for the great content, as always, so what's our take on these sort of frameworks? We have been largely saying that these are the frameworks of the future, right? This is the stuff that does the stuff that you don't want it to do. And for those of you who don't know, I'm not love Meteor into this two, people have been saying that, you know, this needs to exist in Meteor does a lot of this stuff that a lot of these frameworks are trying to do. And I actually just found out that Blitz is basically just a wrapper on top of next j. s. Did - -98 -00:57:12,540 --> 00:57:13,920 -Wes Bos: you know that? No, I - -99 -00:57:13,920 --> 00:58:21,060 -Scott Tolinski: didn't. Yeah, I was looking at it. I don't know exactly what it's doing specifically. But it is basically a wrapper on top of next j. s, where Redwood I don't think is I think is its own thing. I think remix sounds fantastic. I don't know a ton about it. It's interesting that they're not going the free model that every other framework is. So I don't know, the last time I paid for a product like that would have been a CMS, and that would have been expressionengine. And that's fine. But we didn't reach for expressionengine on every project, because we felt like Drupal could do the same things, and for free. And if you're good enough at Drupal, you could deal with some of Drupal, Drupal II things. So what do I think about them? I think remix sounds cool. I can't wait to learn more about it. I'd be interested to see what the pricing ends up being pricing models, of course, yeah. And we're still early days and all of these. And I'm excited to to look at all of these more. And I encourage you to look at Meteor a little bit more. I'm actually doing some free videos right now on Meteor and spelt. And it's really sick. It's really sick. It's really, really seamless. You get small sites, you get real time you get all this stuff for free. It's pretty cool. - -100 -00:58:21,210 --> 00:59:11,610 -Wes Bos: I'm the same as Scott optimistic waiting for these very curious to talk to if you don't know Michael Jackson and Ryan Florence are the devs behind react router one through 114. Yep. Just joking me Everyone always gives them a hard time for releasing new react router for making it better. Yes. And so they are tackling this, which I think that they have some really cool ideas. Plus, I'm very curious to hear about their pricing model, because I don't know open source is not super sustainable for a lot of people. And if anybody knows it, like I think Ryan tweeted the other day, this COVID-19 has just decimated his training business. And he's sitting there looking at millions of people using react router, right, and his business is suffering. That's a very weird spot to be in internet props, points, - -101 -00:59:11,610 --> 00:59:18,180 -Scott Tolinski: those GitHub stars. Good. Where can I catch those GitHub stars? For some dollars, my GitHub bugs? - -102 -00:59:19,230 --> 00:59:31,650 -Wes Bos: Oh, so yeah, I'm very, very curious, watching all of these things sort of work on and I would lump next jass in the stew they're certainly looking at. We need to do another update show on next year, because a lot has happened in the last six months or so. - -103 -00:59:31,800 --> 00:59:35,520 -Scott Tolinski: Big changes to hair all around. Big changes to Gatsby next - -104 -00:59:35,610 --> 00:59:37,140 -Wes Bos: change. Oh, yeah, - -105 -00:59:37,410 --> 00:59:41,820 -Scott Tolinski: I would have gone with Tupac. But yeah, you could do that one to those Bowie. - -106 -00:59:41,850 --> 00:59:42,600 -Wes Bos: Yes. Yeah. - -107 -00:59:42,600 --> 00:59:44,460 -Scott Tolinski: We could do a Bowie Tupac mashup - -108 -00:59:44,480 --> 01:00:00,570 -Wes Bos: that changes makes me so reminiscent because when I was, I don't know nine years old. We had Encarta on window incarnate and there was a little changes video clip on Encarta. Mind - -109 -01:00:00,690 --> 01:00:09,570 -Scott Tolinski: Do you know what the best part about Encarta was? Was that video game that like the dungeon crawling game where you had to like look up facts to answer questions that was the best part about Encarta. I love that. Yes, - -110 -01:00:09,570 --> 01:00:10,410 -Unknown: I - -111 -01:00:10,410 --> 01:00:19,710 -Scott Tolinski: played easy when I was a kid. I wonder if you can play in carta online. You can play in carta. Play the encyclopedia. Yeah. - -112 -01:00:19,890 --> 01:00:30,330 -Wes Bos: Or like use it I remember like thinking how is it possible that they have everything in the world on this one CD this one epic I wonder now like how many things were on in carta? - -113 -01:00:30,390 --> 01:00:35,010 -Scott Tolinski: Yeah, right. Well with the Wikipedia verse in carta here Yeah, - -114 -01:00:35,820 --> 01:02:09,360 -Wes Bos: probably similar. Oh, you can win world pc.com is an online museum dedicated. Oh, you can download Encarta image I wonder if I can get this running. Mm hmm. Fun would that be sick fix today, I'm going to sick pick up a notebook laptop stand. So in my new shed office that I'm in here right now, the desk that I'm on is a big Maple thick slab and it's not that it's too thick that I can't put any arms on it. No monitor arms, all these things won't clamp to it because it's too thick. So I ended up like wall mounting all of my stuff. And instead of getting a laptop stand like the roost stand or the the rain em drop stand I got a just a regular monitor arm and then Amazon sells this notebook tray that clamps are you can screw it on to any vase amount arm so any I had like an arm that I got at a garage sale and I just took that and screwed this laptop tray to it, man, it's awesome because I can keep everything off my desk away from coffee spills and whatnot. But it still is at a level that's much higher and and my stand at home is kind of annoying because sometimes my mouse hits the bottom of it and I can't put stuff underneath it really. So if you've got an old monitor arm kicking around, can be desk mount or can be wall mounted, then you can just buy one of these and attach it to it. And it comes with like rubber holders and everything. That's pretty neat. - -115 -01:02:09,720 --> 01:02:22,230 -Scott Tolinski: That is neat and never heard of that. My pick is going to be something that I've been using quite a bit because it's springtime here in Denver and we got the sun we got my grass poppin I got some fertilizer down we got that green green grass. You know, - -116 -01:02:22,320 --> 01:02:24,540 -Wes Bos: your grass is looking great brother. - -117 -01:02:24,629 --> 01:03:48,600 -Scott Tolinski: Hey, thank you, man. Yeah, I you know, I grew it out a little bit and trimmed it out and take it out and taking care with my lawn right now. But I'm doing that via these all battery powered tools. So I have the I went all in on this system because I got the weed whacker and edger of ego. I think they sell them at Home Depot. They're based out of Michigan, but I think they're built in or they're a Chinese company but they're built in Michigan, it's weird, but they're all battery powered in they're extremely powerful high quality batteries last forever and did the best yard equipment I have ever bought. And I was using like a 1980s Honda lawnmower that died. And it was you know, fantastic. But things puffing out gas It smells terrible. And like I'm mowing the lawn in like near silence with essentially like it's like quieter than our vacuum cleaner. And you can smell the fresh cut grass, you know, the smell of the grasses wafting into your nose rather than gasoline and whatever. And I you know I wear headphones and I can actually hear my podcast while I mow the lawn. So I got the lawnmower, the leaf blower and the edger of E go eg Oh, and they're all amazing. And I make an all swap batteries in the leaf blower is so powerful. It's unbelievable. It's the best thing I've ever bought for yard work. So huge fan of the stuff I've been using it on the daily big fan. - -118 -01:03:48,899 --> 01:04:02,460 -Wes Bos: Beautiful. I'm going to shamelessly plug all of my courses Wes Bos calm for slash courses that you can check him on if you want to learn JavaScript, CSS, anything like that. Use the code syntax for 10 bucks off. - -119 -01:04:02,760 --> 01:04:42,840 -Scott Tolinski: Cool. I'm gonna shamelessly plug level up tutorials.com this month series is going to be on sapper. sapper, for those of you who don't know is the sort of next .js equivalent for spelt. And it's what my site's built on right now my site is tiny, and it's fast because of sapper. And spelt has all these built in goodies like animations and stuff. So we're gonna teach you how to build an animated fully server side rendered super duper duper fast site and also statically generated generated if you want and again it does it all with sapper on level up tutorials.com. You're gonna be blown away by how clean and small your code is. - -120 -01:04:43,230 --> 01:04:49,140 -Wes Bos: Awesome. Thank you so much for tuning in and we will catch you on Monday. Peace. - -121 -01:04:51,030 --> 01:05:00,780 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like. This show - diff --git a/transcripts/Syntax253.srt b/transcripts/Syntax253.srt deleted file mode 100644 index 05cc76080..000000000 --- a/transcripts/Syntax253.srt +++ /dev/null @@ -1,128 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,219 --> 00:00:21,989 -open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot. Here is Wes Baracuda Bos, and Scott. Hello, Todd. - -4 -00:00:26,790 --> 00:00:59,970 -Scott Tolinski: Welcome to syntax in this Monday tasty treat, we're going to be talking all about developing for slow or spotty internet connections. Because we all know that the web isn't always the high powered gigabit speeds that sometimes we get to develop uninor fancy offices. And a lot of times people are using with slower, worse internet connection. So we're going to be talking about some of this stuff, how we can combat this and just some general ideas. My name is Scott to Lynskey. I'm a full stack developer from Denver, Colorado, and with me, as always, is Wes Bos. - -5 -00:01:01,170 --> 00:01:01,890 -Wes Bos: Hey, everybody. - -6 -00:01:02,370 --> 00:01:06,030 -Scott Tolinski: Hey, everybody. Yeah, wait for that. Hey, everybody, Wes. Hey, everybody, - -7 -00:01:06,030 --> 00:01:39,510 -Wes Bos: I'm excited to talk about this. because ever since that pandemic hit, we went and bugged out our cottage. And we have several sources of internet up here. And they were all awful. Like, they're okay, I'm happy to have it. But there's a lot of learned about developing for slow connections just from using the internet on a slow connection for the last two months, there's sort of a lot that has made me think about this. So we're going to go through some things that you as developers should think about, because especially like I see this, as well as when people are developing locally, everything loads instantly when it's local. So you don't even think about this. - -8 -00:01:39,750 --> 00:02:35,430 -Scott Tolinski: Exactly, right. So many of these things we don't think about. Now, this episode is sponsored by a company that's going to help you fix the things that you didn't think about when you didn't think about them. And they broke and I'm talking about Log Rocket at Log rocket.com. For slash syntax, you're going to get 14 days of this service, which what it does is gives you a screen recording of what the user did to break your site, you get to see mouse movements, you get to see clicks, you get to see network requests, and error logs, and all of those things that you're used to having when you encounter a bug in your own local environment. But now, you get to have them in your production environment with actual users using your site. It's a really amazing service. And one of the best ways to really understand why these things are happening on your site. So thank you so much Log Rocket for sponsoring Now, let's get into it slow connections. And it's funny West Uranus slow connection right now. In fact, the last few episodes, it's been really hard to talk because Internet's been cut. - -9 -00:02:36,329 --> 00:03:28,110 -Wes Bos: Yeah, there's a couple different types of slow connections, there's slow upload speed, which generally isn't a huge issue, unless you are trying to do a zoom call or something with somebody or trying to upload a large file. They're slow download, which is probably the one that most people complain about. And this is not just like, you have a slow download pipe. But it could be lots of people using the same connection your kids or watching a show your partners on a zoom call, things like that, it quickly gobbles that up. And it's easy for us developers who usually have very fast connections to forget about these types of things. Especially like I know, Scott, you have what gigabit connection at your office right now? Oh, you bet I do. So that's what 1028 megabits per second, and I'm over here on 0.6 megabits up. - -10 -00:03:28,110 --> 00:03:51,960 -Scott Tolinski: I never get 1000 though, I usually get like, if I'm wired Ethernet, I'll go like 700, you know, SentryLink there it Yeah, only 700. And I had to call SentryLink. And I was like, Listen, I'm not getting the speeds I paid for or I'm paying for me only getting 700. They're just like, okay. So that's great. But it's still better than rather than good for Comcast for the same price. So you know, there's only so much - -11 -00:03:51,960 --> 00:05:00,830 -Wes Bos: man, lucky. There's also high latency, which is when the time it takes for your requests to go from one place to another. And even if you're sending the character are from me to Scott, there still will be a however many millisecond delay in between each of them. And latency can be introduced by any number of things. So latency is one and then intermittent connection. So this is something that even if you live in a large city, you may run into because like maybe you're ducking into the subway really quickly, maybe you are in between two buildings, maybe you're in a building with a metal roof over top of it. There's all kinds of things that can cause your connection to go in and out, especially on mobile. And designing interfaces that account for all of these different types of connections is pretty important. And I like I said to this already, I don't think a lot of us think about it and even I tweeted it out like what are some things you need to think about for slow connections? And I got like one reply, and it just goes show that most of us aren't there. I'm guilty of this as well. We're not thinking about what happens when this the internet pipe is not as fat as We think it is. - -12 -00:05:01,200 --> 00:05:43,800 -Scott Tolinski: Yeah, you got to have that pipe to get this stuff going really well here. You know, it's funny I, the other day I was thinking about this because my internet connection, what happened? It went out my internet connection wasn't connected. And I was working locally and my site was still loading actual site like the one on the internet was still loading, not the local environment. And I was thinking like, Wait, is my internet out? Or did I just write this site correctly so that it works when the internet's out? I was just sapper and the ServiceWorker. You just worked. I was just like, Huh, it's really nice when you have to think about it in this stuff. And it just does it. But I hadn't thought about it. And that made me think made me feel really bad for not thinking about it. So it was a really nice experience when the site still worked offline. - -13 -00:05:43,980 --> 00:06:23,250 -Wes Bos: Yeah, absolutely. That's maybe that's the first one is install a ServiceWorker that will cache your site so that when your user is is offline, they're still able to see it. So I think about things like maps or an address lookup, if you trying to go somewhere or I think another thing we don't think about is people who have limited data plans on their phone. Mm hmm. If the person has run out of data, and they've got six months till the that resets, then what do you do? And if somebody is trying to look up an address, and then go to that place, having that data cached offline and still viewable, even if they don't have data on their phone is key. - -14 -00:06:23,310 --> 00:06:40,560 -Scott Tolinski: Yeah, it's only like, so helpful for level up tutorials. Because at the end of the day, we rely on video, you can't have that video served offline unless the user previously downloaded it. Yeah. So like, there are some situations where it's just not a great solution for offline other than making the vital information available. Right, - -15 -00:06:40,620 --> 00:06:44,610 -Wes Bos: I actually took the ServiceWorker off Wes Bos calm because, - -16 -00:06:44,610 --> 00:06:45,330 -Unknown: a, - -17 -00:06:45,330 --> 00:07:38,790 -Wes Bos: it's scary to launch with the ServiceWorker. Because yes, you can get into this place where you goof something up. And that goof up is cached. And then the person has to load the page again, and then look at the cached version, and then they have to reload it again. You could code something in there to hard refresh it, and whatnot, but the user will still get it. And then I've seen plenty of people get into a situation where they can unregister their ServiceWorker, for whatever reason, intentionally turn it off, and they didn't want to launch with it. And now that the launch is done, I'm probably going to turn it back on just so like if someone wants to read a blog post. I don't have a ServiceWorker on my own course website, just for the same reason, Scott says, but it would be kind of cool. Like, I always wonder that like, what's the limit to caching stuff in the browser? Like, could I cache a couple videos, so that someone could watch them from the course platform? But when they're on the subway? Yeah, - -18 -00:07:38,850 --> 00:08:40,110 -Scott Tolinski: I don't know. It's, it's interesting. That's why I make all my videos available for download. For people who do internet connections, now, it's gonna be great. So do want to talk about this loading UI section of this, yeah, where there's a lot of things around loading UI. And if your data is taking longer than an X amount of time to load, then of course, you're going to want to show some sort of loading UI. Now there's a lot of different ideas and opinions on the loading UI and perceived speed of loading. I know, skeleton screens, which is sort of just like a version of the actual layout. But they're typically like gray or dimmed out or not the actual content, but it's in the layout, that the actual content in skeleton screens are super useful for getting that perceived loading time up. But in the same regard, if the loading time is faster than a certain threshold, then those are going to actually make the perceived loading time slower. What are your thoughts on skeleton screens, verse, a loading spinner verse, you know, just thinking or whatever, blank screens, - -19 -00:08:40,380 --> 00:09:34,590 -Wes Bos: the skeleton screen is probably my favorite just from being on slow connections. Because Yeah, otherwise, your face was just a white page, and you don't know if it's broken, or if you need to refresh it to try again, at least for something like YouTube, or just shows the skeleton screen. And also like when those finally do load in, then the whole page doesn't read jerk itself over and move content up and down, which is really frustrating. So big fan of that. Also, it's good to not show those loaders or skeleton screens right away, because like for a lot of connections, you're gonna just be showing them for half a second. And then that's frustrating for the user to see that. And like Scott said, it shows faster proceed. So that's why react suspense. If it ever launches is going to do, it's going to allow you to control how long to suspend a component before it then shows a loading component. And that's going to be pretty cool. - -20 -00:09:34,710 --> 00:09:49,590 -Scott Tolinski: Like if you're dynamically loading a react component or tree of components via dynamic imports using react loadable or loadable. components, you can always have that threshold as well to say, like, show this loading component while these ones are being pulled in from the network. - -21 -00:09:49,890 --> 00:11:16,680 -Wes Bos: Next we have just showing a UI when something is happening. I've noticed that there's a lot of websites that don't show loading UI for things They assume will always happen. So the biggest one for me is when you're filling out a form, and the form will automatically show United States and all of the states and I wait to switch it to Canada. And generally, the way that I I get to Canada is that I tab over to the country form and I hit c three times because it goes, Cambodia, something else and then Canada. And every time you hit each one of those, it tries to find the version of states or provinces in that country. And a lot of those are loaded in on demand. What I've noticed is that there's a lot of websites that don't show any loading UI. So like I click Canada, is it doing something? Or is it not, I sort of sit there for a couple seconds waiting. And then sometimes it's broken, because I hit c three times, it fired off three x HR requests, and now they're coming back at different intervals, which we'll talk about that next, but just showing some sort of UI. And what I found really frustrating as a lot of checkout fields, just throw an entire spinner over top of the entire form and disable the entire thing. But it's just so frustrating, because like, while that's loading, I can fill up other fields if I want to, and just sort of like disabling the entire thing. really sucks. So that was a really bad experience that I got a few times in the last couple weeks, huh? - -22 -00:11:16,920 --> 00:11:21,540 -Scott Tolinski: Yeah, that's interesting. I don't it's not something I've ever dealt with being here in the States. That's Yeah, no, - -23 -00:11:21,540 --> 00:11:55,500 -Wes Bos: that's the thing is like you've never dealt with that switching country bug ever. Because forms just default to the US. And you can just go ahead and select your state. But little frustrating things to the rest of the world. Yeah, sometimes go unnoticed. Same thing with often places will ask you for your state, and then your country, because that's the way that is written on a piece of mail. But for for everyone outside of the states, they have to tab down to the country, change it, and then tap back up to change their province or state. And - -24 -00:11:55,770 --> 00:11:56,490 -Scott Tolinski: that's annoying. - -25 -00:11:58,080 --> 00:14:20,520 -Wes Bos: We have a count for x HR failures. So one frustrating thing with fetch is that we haven't for longest time had a way to cancel fetch requests, that we now have a board controller, which is great, but a lot of devs, myself included don't account for x HR requests being cancelled. Because like, like I said, if you hit the C key, it starts fetching the provinces for Columbia. Mm hmm. And then I hit it again, it starts fetching now the second request is going in, you should kill that first request. And that's almost never an issue for developers working on the website, because it's either local, or they're on a fast connection. The other thing is, sometimes your ex API request will break, you fire off a request, and then your connection dies, and you think it's still going. But if you open up dev tools, you'll see that that thing had then failed. So it's important, and this is why state machines are so good. Because you should never get into a situation where it's just like, you're assuming that it will either come back with an error, or you're assuming it will come back successfully. But if you in that catch of your ex HR requests or of your await, then you should catch that and then set the state to there was an error or retry it or something like that. So it's important to think about those worst case situations, even though you think like this will probably never happen. It does happen. Yeah. And then finally, the last one I have here, for today, we're going to split this into two different hayseeds. Because it's getting a little tasty, it's getting a little tasty. The still working. So if you are doing like a large upload, this is another thing is, if I want to upload a six or seven Meg image, it might take 15 minutes for me. And you don't know if it's stuck. And if it's broken, or if it's just still going. And sometimes these loader bars are so small that you have no idea. Or like in a lot of cases, Twitter, Instagram, these upload bars, they're so fake, like they go to 90%. And then if it's not uploaded by that time, then it actually just waits there. So it doesn't actually give you any sort of feedback as to whether the file is still uploading. So just giving the user some sort of, if it's just a percentage that it's uploaded, or some sort of like, Hey, we're still uploading it, don't worry, just leave me open or whatever, come back in 10 minutes, and it should be upload. So some sort of timeout that after three or four minutes, you can give the user some sort of feedback. - -26 -00:14:20,940 --> 00:14:52,440 -Scott Tolinski: Yeah, because that is that is the absolute worst. I was just waiting for my time machine backup to finish. And it was like, Oh, dude, the progress bar is completely full. But you know, it still says it's backing up and the gigabytes is still increasing. So why why are you not letting me know, you know, what the actual percentage or if this thing is actually doing something I need to be concerned about or whatever, I had to go and run a terminal command to see what the machine was even doing. I did see that it was actually moving the files. I was like, okay, you Why don't you let me know about that, right? - -27 -00:14:52,650 --> 00:15:33,750 -Wes Bos: It's true. Like I shouldn't be able to have access to that granular information like backblaze. When I use that it tells me literally how many files are left Even if it's like 400,000 files because I NPM installed something, it tells me exactly how many files are left. And that's such good information because I can just look at it for three seconds and see that number change, like, okay, it's just being slow. Yeah. So let's wrap it up here in the next Casey will do talking about images, scripts and CSS video, how to test for slow connections, what to do with connections that go in and out, like, what do you show on your app? There's some event listeners, you can add there. And then a couple little tricks for CSS and font loading as well. - -28 -00:15:34,109 --> 00:15:38,010 -Scott Tolinski: Cool. So I'm excited for that one. That's going to be another tasty tasty. - -29 -00:15:38,489 --> 00:15:46,440 -Wes Bos: Yeah. All right. That's it for today. Thanks so much for tuning in. And we'll catch you on Wednesday, but also Monday to finish this one up. - -30 -00:15:46,499 --> 00:15:50,910 -Scott Tolinski: And then also Wednesday after that, and then also Monday after that. And then also - -31 -00:15:50,939 --> 00:15:56,550 -Wes Bos: everyone Monday, Wednesday, and we'll see you there. Yeah. Peace. Please. - -32 -00:15:58,410 --> 00:16:08,190 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax254.srt b/transcripts/Syntax254.srt deleted file mode 100644 index 40e3ed0ce..000000000 --- a/transcripts/Syntax254.srt +++ /dev/null @@ -1,348 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,530 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott Tolinski and Wes Bos - -2 -00:00:10,560 --> 00:01:28,830 -Scott Tolinski: Welcome to syntax the podcast with the tastiest headless CMS treats today we've got a breakdown of both like why you might want to use a headless CMS, what are things that you should take into account? We get this question all the time, like, Hey, what's the Scott what headless CMS should I use? And the answer unfortunately, is it depends. There's so much that you need to think about in terms of data and hosting and pricing and self hosted backups, images, things like that. So we're gonna go through a whole bunch of things to think about for headless CMS as well as we're gonna rattle through a huge list of hosted self hosted in, bring your own UI. CMS is for you. We're gonna get into it today who here are sponsored and intentionally did not look at who was sponsoring today's episode. We booked this like six months ago, I told Scott before we added the sponsors, I said whoever sponsoring today, because obviously we've have several headless CMS sponsors on this podcast is that whoever sponsors today, we're not gonna we can't change it. We booked it six months ago. So one of the sponsors is a headless CMS Sanity, and the other sponsor is Freshbooks, which is cloud accounting. We'll talk about both of them partway through the episode. We'll talk about Sanity actually, in this episode as well. Hey, how you doing today, Scott? - -3 -00:01:29,340 --> 00:01:41,610 -I'm doing good. I was I was considering because I had written the word roundup in this episode title is considering doing like a get along little doggies kind of thing. Like a you know, Wild Wild West thing. Jim was Desperado. You know, - -4 -00:01:41,760 --> 00:01:47,550 -Wes Bos: I don't I don't know what that is Roundup. Like around up. Isn't that where you like? lasso all the bowls and stuff. - -5 -00:01:47,820 --> 00:01:52,020 -Unknown: Oh, did you guys have that commercial for Arby's? roundup? - -6 -00:01:52,350 --> 00:02:01,170 -Scott Tolinski: Yeah, that's, that's the exact same concept. It's just that Arby's was using that as a roundup. You know, Roundup, right. - -7 -00:02:01,800 --> 00:02:08,669 -Unknown: $5 for five meat sandwiches, Roundup. I remember like looking at that and be like, Oh, that's disgusting. - -8 -00:02:08,850 --> 00:02:17,040 -Scott Tolinski: Yeah, I used to I used to dig Arby's. I'm not gonna lie. I'm not gonna I'm not gonna pretend like I didn't. But no, I haven't done fast food like that in a little while. But I used to - -9 -00:02:17,100 --> 00:02:18,510 -Wes Bos: is Arby's still a company? - -10 -00:02:18,810 --> 00:02:30,000 -Scott Tolinski: I would have to imagine. Did you know that R stands for R, the letter R and the letter B was spells out roast beef, roast beef, oh, are the Arby's that's next level? - -11 -00:02:30,000 --> 00:03:47,009 -I just blow your mind? That's awesome. Yeah. All right. Well, we've got a massive show today. So let's get on into it. Let's start, I guess just with talking about like, what is a headless CMS? And why might you want to use one. So a headless CMS is a content management system that you actually Scott and I are sort of like putting things on the list here talking about like, what is even a CMS. So I think a headless CMS is a piece of software that runs on the server, you can log into it, and manage your data, you can create new data types, you can create new pages, you can create new people. And then you can attribute different pieces of data to that, and the part that makes it headless. Because that's what a lot of CMS is do is that the data that comes out of that CMS is not coming out in terms of HTML, or it's not rendered out in a theme or anything like that. The data just comes right out of it raw. And the format that that generally takes is either comes out as a REST API that returns JSON, or a graph qL API that returns JSON, there's a couple other ones that are out there. But generally, it's either a REST API or graph qL API that will return to you the raw data, and then it's up to you to go ahead and take that data and do what you please with it. - -12 -00:03:47,339 --> 00:04:14,460 -Yeah, we were having this discussion. We were adding things to this list. And it was just sort of like, Well, no, that's not a CMS. And I'm like, yeah, is the CMS and then we realized that there is such a wide spectrum of like, how much it does for you versus how little it does for you that are like what point yeah, that threshold that it's no longer considered a CMS, I wrote down like, is a hot dog a sandwich? Because that's like the same discussion. At what point does it stop being a sandwich, - -13 -00:04:14,519 --> 00:04:55,620 -Scott was talking about a Sora, which is a like a graph qL API. I was like, that's not really a headless CMS. And he's like, well, they have an interface they haven't. That's kind of just like PHP myadmin, right. Like, you can edit the text box, but it isn't. But you can add data with it. There's the data fields. So it kind of is it a headless CMS, that's what I'm saying. It's funny, you say that, but like, also, there's, there's parts of my website that I don't have a UI for. And if I want to edit that piece of my website, I just go into the database tool, and write some queries and edit it. So I guess it kind of is a headless CMS in that regard. And it's obviously doesn't have the nice UI that most of them will have, but I think it is, - -14 -00:04:55,620 --> 00:05:41,580 -I think it's definitely a conversation. I don't know, at what point because you made a really good point because you pretty much posted is PHP myadmin. Associate CMS. And obviously the answer is no. It's a big No, but like Hazara is just a nicer version of what's going on there look a much nicer version, but it's still a nicer version of like a database interface. Totally granted, you can add an edit data, but it is a big conversation. Like what point I guess it doesn't really matter. Like, none of this really matters because it's all a threshold of whether or not it's user friendly. And I actually have a great idea, we could make a site that is just all of the headless CMS is and then rated as to like, who could use them? Could my dad use it? My dad could not use hesser. My dad could use WordPress, definitely. - -15 -00:05:42,450 --> 00:05:54,330 -Yes. It's like anyone who, like somebody who's non non web development, can they use this thing to figure it out? Right? They're used to posting on social media, right? Could a Facebook user use this? - -16 -00:05:54,600 --> 00:07:21,990 -Yeah, so I'm building a Gatsby course right now. And I went down the road of trying out a whole bunch of different CMS is to see what would be best for this. And I ended up going with Sanity. And what I learned is that there's this huge threshold between usability and nice UI. And on the other end of things, there is total control over your your CMS. And then there's a lot of stuff sort of in between. and with most of them, you have to sort of pick and choose which end of the spectrum you want. And we'll talk about that a little bit more. A lot of people like assume that like, Oh, yeah, use a headless CMS with Gatsby. And that's why you would need it. But a headless CMS, the whole point of it being headless is that your front end is not dictated by the CMS itself, you don't have to have a static website. So it's pretty popular to use Gatsby or any of these static site generators with a headless CMS, just because they don't have a back end for you to log into. You can use them with anything. So the whole idea is that you have your data and you can pull it into your iOS app, your mobile website, your Android app, your static website, you can pull it into, like a widget on it and menu UI or anything like that the data is free for you to pull in at any time, whether that's on build out a static site generator, or whether that's every single time a user loads a page, or whether that's every half an hour, you refresh the data in the cache, that's maybe server side. - -17 -00:07:22,590 --> 00:07:42,840 -It's such a good point. That is the conversation. It's like, why would you need a headless CMS? Well, that's it right there. I mean, it's the same reasons why you need an API verse, why you just connect to a database, right? Yeah, exactly. You want to sort of normalize the access layer, so that whoever or whatever needs to access that data is able to do so. - -18 -00:07:43,320 --> 00:08:50,419 -Cool. So let's get into the next section, which is we're going to talk about things to think about when choosing a CMS, right? These are the sort of the feature set of various CMS and some do the each of these features better than others. And I wouldn't necessarily say there's any perfect one. So that's a something to keep in mind here. It's really which of these fit your needs the best. So let's talk about some of these needs. And one of the big ones is authentication, like who needs to authenticate, right? Do do other users need to authenticate? Or is it just admins, right? Because you can't really have a CMS without sort of admin CMS stuff, right? So obviously, the admin is going to need to log in. But what about users? How many users are going to need to log in? Is it going to be a nasty use thing? Is there going to be a permissions and roles based thing? What does that look like? Right? Can users post to this site? That's a big deal, too, right? If users can log in, but they can just save things or whatever. That's a very different story than users logging in and posting things. I know, I just think about the giant matrix of checkboxes. That is the Drupal permissions. But it is totally needed, because you can tweak every little permission there. And that is a big, big feature set. - -19 -00:08:50,820 --> 00:09:03,750 -Yeah, some of these CMS does have just a user, someone can log in and do anything they want. And, and some of them go super nitty gritty where someone can create content, but not post it live, someone can see something, but not edit it, - -20 -00:09:03,840 --> 00:10:48,450 -edit it, but now publish it. There's just no rules at all. So it's important to look at what do you need before you get into it? Otherwise, you could be a month into a project and realize, oh, there's nothing to do that. And some of these things. They assume that you'll be writing your own off strategy, if you need that low level, and fine grained control totally. The next one we have here is how easy is it to create your own data types. So if you want to go ahead and create a listing of stores, and every single store has a name and address, and then each of those stores has employees, that's like a relational, another data type, which is a user right? And you can connect those those people. How easy is it to go ahead and create a new data types. So some of them, you can just log in and create your new data types just with the UI in there. So I'm thinking of advanced custom fields and custom post type UI in WordPress. Prismic is like this as well there's, there's no like code story to it, you can export it to JSON and put that in your Git. But you generally you just log in and use the UI to create it where On the flip side, there is a lot of CMS is that are entirely based on schemas and JSON documents, importing types and setting all the all the settings rather than checkboxes in the UI. Everything is done in code. So that's something to think about, as well as who is the user that is going to be setting this all up? Is it a developer, if that's the case, then you can do it in code, or someone who just prefers to do it in the UI? Because sometimes I look at these things, and I go, oh, too much config. To get this thing up and running. I just rather use a nice GUI. - -21 -00:10:48,480 --> 00:11:07,440 -So you know if there was ever this conversation back in the day of Drupal verse WordPress, the reason why I prefer Drupal myself, because it was so easy to create new data types where WordPress you always had to install a plugin or get into the code to do it. So to me, it was always like that, that was just such an easy feature of Drupal. It felt like it was you know, the, the easy part of it. - -22 -00:11:07,830 --> 00:11:58,380 -Yeah, that's one thing I I never understood about WordPress. I like to have the the most powerful things in WordPress, which is creating custom content types, creating custom taxonomies and creating UI for custom fields, that without a plugin, those things are absolutely useless in in WordPress, now, you can do it in your functions, which is crazy, because it's so easy in Drupal. Yeah, that is that is silly. And obviously there's a huge market and almost everybody automatically installs those plugins into WordPress anytime you want to go but it's funny that they've never taken that on themselves. Totally. Yeah, cuz those you eyes aren't even very good for those No offense to those developers. I think those guys could be much better. Oh, man, I'm gonna say I love advanced custom fields. Sorry, you I can I can look at you I you can say I don't Well, - -23 -00:11:58,380 --> 00:12:17,669 -yes. So I don't know if you've ever used Drupal. But even like Drupal seven, or Drupal six, like even those versions, people were like that, that tells you what an interface for creating custom content types could be like, and it's just so much better. It's way better. So like, after you've used that if used ACF, you're just like, oh, what is this? - -24 -00:12:17,730 --> 00:13:50,940 -No, hold on, I want to talk about this. Because like, a huge portion of our audience uses WordPress. And like, for me advanced custom fields is you create your your group, you drag and drop your your things, you set your settings. And then you add your rules where you want these fields to show up and you click on Save. I'm like wondering, like, how can that get better? Like, what what does Drupal do, it's the actual UI, the functionality is large. So you know, there's, you know, it's basically like a table of fields, or you can group them together, whatever. But it's basically a table of fields. And then you can say, Alright, I want a new field, what kind of field is this? Oh, it's a reference to another content, or it's a image upload or whatever you just, it's like creating a like a database table, you just say, here's the field, here's what it is. Here's the field, here's what it is. Here's the field, but it's in a big table. And there's none of these, like groups by default, right? The group's by default thing is weird to me. And it gives you 1000 options when you don't need 1000 options, both times, you only need like one or two options, what the field is what it does. And then you can you elaborate with more options if you need them. But Drupal is all that stuff. So it's not just this cluster of information. I think you're talking about the custom post types, not advanced custom fields, custom post types, that does give you 5 million options, which is frustrating. Yeah, no advanced custom fields is where you. So the custom post types is where you create your types. But the UI for adding custom fields is actually really, really good. Oh, yeah. But yeah, I totally agree with you there. It is very confusing. - -25 -00:13:50,970 --> 00:14:21,720 -Yeah. All right. Next one is can you create one off content types? Ie, can you take a look at single page? And that page has very specific requirements, right, some specific fields? Like, is it an FAQ page? Maybe it needs like a question and answer field? Or is it just like a giant text box? But can you create these one off content types that are used for one thing does has one purpose, and that just exists? So that that's definitely a thing, whether or not I mean, that goes along right along with the content types anyways, like a one off is like a very specific thing like a page or something - -26 -00:14:21,990 --> 00:15:10,529 -like an options page settings, homepage, UI, something like that. I find myself needing to do that in almost every project that I do. Where next one we have here is custom workflows do have control over what the process to publishing looks like. When somebody publishes something, does it need to ping somebody can you hook into these specific things. So a lot of the UI only ones don't have this, but a lot of the code ones do allow you to hook in at these different steps in the content creation types. And you can do things like run it through a spell checker and come back or ping Email somebody or save a revision. Another thing is like drafts, revisions rollbacks. That's another really powerful feature that a lot of these CMS will have - -27 -00:15:10,649 --> 00:15:38,970 -this version control. I mean, it's version controls. Yeah, it is right. Next is going to be our images handled. This is always a big thing do when you upload an image, how easy is that some of these services require a little bit to get images up and going. Some of them give you a ton of tools out of the box, and others just make it pretty standard. Right. So what does it look like? How much options do you have over the cropping, the output, the can the control of images, that's, that's such a big, big one. - -28 -00:15:39,570 --> 00:18:36,000 -Yeah, a lot of them don't have anything. And you'll have to go and reach for cloudinary cloudinary, Image, Image x image IX, whatever it's called. And go ahead and do that. Because especially if you're using Gatsby image, a lot of these services will give you all of the pieces you need for Gatsby image without having to resize all the images locally, which is kind of cool, as well as like a UI for uploading images. So if you want to create like a gallery of images, I found very fragile interfaces where you have to create a repeater. And then that has an image and a caption. And then if you want to reorder them, it's a little bit of pain. And then I found like, Oh, this is a very common thing that you need to do a gallery field would be really nice to be able to do that. You can drag and drop six images, reorder them, add alt tags in that interface. So that's pretty common to do on a website. And I felt like a good chunk of the ones I looked at were lacking good gallery fields. The next one we have here is field UI. So the hosted ones generally don't allow you to create custom UI for the upload fields. They give you a list of 10 or 15. Possible upload fields, like a gallery field, like I just talked about. So what what is the predetermine UI out there? And the UI is huge in terms of does the person who's going to be using this thing at the end of the day? Do they enjoy it or not? Is it frustrating to create things like I even a couple of them that I tried is that my internet was slow. And I wanted to create like, seven different toppings for my pizza. So I just like I wanted to right click open the new topping form, because I had a pizza and then I had a topping type. And the topping type was related to the pizza. And in order for me to just quickly add seven toppings, it wasn't like WordPress, where I could just add seven categories or taxonomies to something, I had to first go to the toppings, create all seven of those, and then go back to my pizza and select them from the list that I had made. And then I was like, Okay, this is kind of a pain. And I tried to like right click open new topping in seven different tabs. So I can at least get the UI open nice and quickly. And then it was a button and I couldn't open a new tab. And I was like, Ah, this is too hard. And it's just like little things like that you don't think about when you're you're looking at it. But once you get into it, you're two days into it. You go Oh, yeah, this flow sucks. I want I want the like WordPress, add a tag UI, which is very easy. Yeah, totally. I totally feel you on that one. But sorry, the last thing I just want to say here is two way relationships. Oh, yeah. Does the data up date on both ends? So if you have, like a movie that has actors, and then you have actors that have movies, if you delete a movie from an actor, does the actors movie also updating? That's super important? Otherwise, your data gets out of control really quick? Yeah, totally. - -29 -00:18:36,180 --> 00:19:12,540 -It's all about relational. The ones that do relational data really well do a really good job there. I think that that's a key feature in CMS. Next one is going to be data validation. How much control do you have over individual fields? Again, this even goes along with permissions, but like validating individual fields to not only who can do it, but like, what can they type in this field? This is a number field image field, like what kind of what kind of data validation Can you have? And how does that output in the API that itself, and so giving full control over those fields, how those fields work is a key feature and how you validate those, - -30 -00:19:13,230 --> 00:22:25,110 -the one thing I had was pizza prices, I wanted to make sure pizza was at least $10. And not more than $35. So obviously, simple validation is that a number but I also wanted to make sure that it was within that within that range. I wanted to make sure there was no decimals in it. And then when, when that validation goes wrong, or it's not validated, can you provide custom error messages to to that person? And that's where the code base ones one over over the just simply UI ones? Because you essentially can just have a validation function and run the code yourself throw errors if you want. Next one we have here is hosting. Is it hosted for you or do you need to host it yourself? How much is that going to cost? The other next point we have here is pricing. How much does it cost? If you need to add 15 people like it's pretty popular right now, for services to charge based on how many people are in there. And what I see happening all the time I've done this myself is, instead of just adding more people is you just share the password with everybody on your team, right? Because it's getting it can get expensive real quickly. Don't do that. So don't think about Yes, don't do that. Next one is going to be content movability. So like, a lot of these, you know, the classic CMS types, they give you access to just the database. But it would be really difficult to move your site from a WordPress using straight up the database. But luckily, for situations like that, there's all sorts of data exporting plugins to make that easy enough. But that's something you need to think about. Because this CMS might not be available forever. Who knows? What if you're still on Joomla? Like, what are you gonna do? I'm gonna, well, I'm gonna have to figure out how to get my data to Joomla. Now, I don't know what the story is there. I'm sure they there's very exportable data. But once we had a client who had their data in a custom ColdFusion CMS that there was exists, and it was like impossible to get the data out. Because that wasn't built into the CMS there was no sort of exporting the community was dead here was this, once used CMS know that we had the site that was so many years removed. And what did I have to do, I had to have one of our PHP engineers write a script to parse all the data out into a CMS and CSV values to get us all the data correctly so that we could import it somewhere else. And it's like, Alright, that would have been really great. If you could have just done that in the UI, or one click to get your data into a CSV or something. Totally, almost all of these will allow you to view data because that's that's literally what they do. Yeah, their API, see your data out. But like I'm talking about like other things like schemas, users, revisions, custom field types, all of that information about how your UI is built. Can you also get that information out of it or not? Sure. Yeah, totally. What else we have here? Is there a course or real time API? Do you need that? So can you use this API from the browser directly? Do you need API key for that? Or is it meant to be used proxied through some sort of server? Is there a UI that allows you to specify domains that are cores friendly or not? Is there a real time API deserve real time graph qL API can subscribe to things, or do you need to do polling? It's good things to think about as well? Yeah, totally. - -31 -00:22:25,110 --> 00:22:44,130 -Next is going to be the API like what does this API actually look like? Is it only for querying? Or is it for querying and mutating or modifying? Is it for like a graph qL API? Is it a, is it a REST API? What does this give you? Like? What is the issue that what are the options? - -32 -00:22:44,130 --> 00:22:45,270 -Unknown: Can you choose? If - -33 -00:22:45,270 --> 00:22:59,340 -Scott Tolinski: you want an XML output rather than a JSON output? Not that anybody would. But could you choose like a JSON REST API over a graph qL API if you wanted? Or is it just straight up a graph qL API or just straight up a REST API? - -34 -00:22:59,730 --> 00:23:11,100 -Also, importing data how, how easy is it to import data, I was specifically using the Sanity import one. And the really cool thing that they allow you to do is import file pay - -35 -00:23:11,100 --> 00:23:56,490 -for this sponsorship, they didn't pay, you're gonna pay for a part of this bug as well. Now this part, you can import, like you can also import data, but you can import images as well, you just give it a path to an image on your local computer. And as part of the import process, it will also upload the file and then link that file to it, which is pretty nifty, because a lot of times the data in the CMS is just stored as like a JPEG path. And then you'd have to provide that yourself. But that sort of came along as well. So there's a lot to a lot of things to think about when you are picking my map. That's why we have this massive list. And this is why we can't answer the question as to like, which one is the best? What should you go ahead and use because there is as a whole lot of give and take in this sort of world right now. - -36 -00:23:56,850 --> 00:24:08,790 -So when you're starting a fresh new project, you're probably going to need to look for one of these CMS and maybe you're making some money off this thing and then you're going to need a fresh, fresh, fresh books to do all your cloud accounting software. - -37 -00:24:08,850 --> 00:26:22,350 -Yes, fresh books is the cloud accounting software for your small business it is painful to send out invoices track who's paid you do your taxes, see see what local taxes you owe different currencies all that hard stuff freshbooks makes that easy. Want you to check it out. freshbooks comm forward slash syntax and make sure you syntax in the How did you hear about a section that's going to get you a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring, yeah, cool. So let's get into this Roundup. We're gonna start with the hosted CMS, these are probably the quickest way to get up and running. So the first one we have unless here is Sanity. Center, just kind of kind of interesting because it is hosted but both ends of the story here. The back end, let's call it the admin UI, the admin UI can be hosted either on Sanity, like you can deploy it, or you can host it yourself. Their admin UI is called Sanity Studio. And it's a react application. And obviously, the headless the front end of your website is also hosted by yourself. So like, how does that make Sanity hosted? Well, they give you Sanity Studio, which is a full blown admin UI that you can use to talk to Sanity API. But you can also because it is just code and because it is react, you have full control over creating custom content types, creating custom validations, over how it's displayed in the sidebar, colors ever and pretty much anything, right? It's just just JavaScript at the end of the day. So you do have control over that, which is pretty nifty. And that's actually the one that I ended up going with for my upcoming course. I intentionally like didn't look at it, like I asked on Twitter, like, what should What should I use? I intentionally didn't like say, I was checking out Sanity, because I knew that they obviously were a sponsor of the podcast, I didn't want to like taint that in any way. And the response was very heavily weighted in WordPress, Sanity, strappy. And there was quite a few Drupal there as well. So it's good to see that a lot of the community was there as well. - -38 -00:26:22,470 --> 00:27:19,200 -Yeah. So next up is prismic@prismic.io. And outside of what we've experienced via Prismic, from the sponsorship, again, my opinions here are not paid for, I have not had a ton of actual real world experience with Prismic. It looks really great. And I think there's a lot of really interesting features about it. One thing I really like is that they really emphasize the content editing portion of things, it just looks nice, right? Like the the editor, it looks nice. And I think that's such a one of these features in a headless CMS that's totally overlooked a lot of time is what is what is the actual content editing experience, like, and they have, you know, drag and drop and everything looks really nice. There's a lot of like, really nice design touches on here. So I, I don't have the experience with it, where I can say like, oh, it does this, and this, and this, and this and this. But I really love the attention to detail that they have done in the design of everything. Yeah, - -39 -00:27:19,230 --> 00:28:48,180 -I also did check this out for my course. And it was really cool, because I just I talked to the folks behind it, after I decided not to go with it for my course. And it was actually really good. Because there is no, there's no code setup, you don't npm install anything to get going. You just create an account, you log in, you click the plus button to create your types. You create all your fields, you relate them to each other, you can create repeatable things and all that that was awesome. It also comes with image x. So for all of your images under the hood, the reason I went with Sanity over Prismic was because of the control over custom inputs. So they give you 15 or so inputs, rich text editing, basic text, image upload, I don't know there's like every every type of input you could you could think of but as soon as you want to make a custom UI for yourself, which is not in every every case, but sometimes you do want to do that, then you don't have control over that. So sort of as a trade off for the ease of getting up and running. Like I signed up and had data in my Gatsby thing in like five minutes, which is that the trade off for that is you don't have full control over the UI. But the UI is pretty slick. Next up, we have here is contentful also have been the sponsor of this podcast. I've not used them also known as content folding. Is it content? I don't know. I don't know. I think people just say it both ways. That's why it was the joke. Probably can't content. I don't know, - -40 -00:28:48,210 --> 00:29:06,930 -I don't know what it is. I mean content full content. I mean, this thing makes me content. I guess that could be a so they've been around for a while. Have you used them? No, we used them in a level up tutorials course. Yes. So contentful or contentful is, again, a really easy to get up and running. I like that they - -41 -00:29:06,930 --> 00:29:56,310 -have a lot of like features like the web hook experience is really nice. The content editing experience, for the most part is very, very nice. That makes your data like a first class citizen. It's all about your data, right? Here's your data. There's tables of data, easy access, easy to edit, everything works really well. In fact, it reminded me of like, what I occasionally wished WordPress would be like in a headless situation. And so I really like those aspects of it. Now granted, I have heard from people I have not used it in this much of a capacity. I have heard from others, that it gets expensive. And actually just looking at it the developer plan. There do nine bucks a month for the developer plan. That's one yeah. One roll 24 content types. 5000 Records 40 bucks a month. That's expensive. So you're paying for that. - -42 -00:29:56,520 --> 00:31:11,400 -Yeah, maybe we should say what the prices are for these other services. Well, cuz anyone who's driving right now can get an idea of like where it starts Sanity, the free plan is obviously zero dollars. And then it goes up to 200 bucks a month that includes 20 users, and that's 10 bucks per user past then 90 day history retention. So that's kind of that's what Sanity is at. And then Prismic is sort of on the way, it's funny that we've had both of them sponsor and they're very much on in different spaces, because Prismic is seven bucks a month for three users. So like, if you want to just get a quick website up and running, certainly Prismic is a really good use case for that. And it won't get too expensive on your real quick. And I think that's important to know, because like, for a big company that's using this to power their thing, the difference between $7 and $200 a month is is nothing right? Like they have payroll that is $300,000 a month. So they don't really care about a couple hundred bucks here or there. But then for some someone who's just building a website for a client, maybe you're freelance or something like that, then then the prices do matter. Because all sudden, something might be pretty, pretty expensive if it goes up. So pricing is saying you should definitely think of - -43 -00:31:11,700 --> 00:31:51,150 -Yes, you should always think about pricing before you spend the money. I think we should maybe do like a Yelp dollar sign thing for this. Now another way. Yes. Honestly, like, this needs to be a thing. There's all these static site generator websites that compare everything, there needs to be a website that compares all of these different headless CMS as well. Cool. So the next one is going to be datto. cms. So do you have you looked at datto It looks nice site looks nice. I have not used the most beautiful, gorgeous, however, I have not used it myself. It's very use style. Without grunge. Yes, putting blocks of color behind text is my signature move. - -44 -00:31:51,180 --> 00:32:15,600 -We need grunge we need grunge on this thing. They have a video encoding and streaming built into it, which is pretty cool. So that's it looks like they use mocks by must Yeah, just really, really cool. Like a lot of these CMS is are not going to roll their own image service or video service. So they just leverage using other services behind the scenes. That is pretty cool. Data CMS, - -45 -00:32:15,600 --> 00:32:51,030 -I'm going to need some help here with the pricing. It seems like because it's in euros, right? This is the Euro symbol. I don't know, if you're on the site. It looks like it's free for the developer account, which is a single collaborator hard limits on quota community based support. But it looks like they're the next plan up is 99 euros a month, and then 1500 euros a month. So it seems like the pricing is quite a steep little jump up. So it seems like the for the developer small project with low traffic, it's zero. But eventually it's going to get into like a $4 sign territory. - -46 -00:32:51,420 --> 00:33:15,840 -That's 107 US dollars to start. One thing I'm looking at the docs for data right now. And they have it looks like they have very fine grained control over roles and permissions. So you can add different rules about who can create read, update, publish, unpublish, edit, and delete as well as create other people. Which is pretty nifty. So looks like they've nailed their permission story here. - -47 -00:33:15,860 --> 00:34:40,320 -Yeah, cool. Next one story block. I use this for a Scott tries video, the things I liked about storyblocks is that they thought about the front end a lot. If you needed a front end, right? It made that they tried to do a lot with like editor interface stuff where you could visualize your stuff as it's being typed. But I found a lot of the drag and drop tools to be a little confusing, didn't know where to go here there. But they do make it nice and easy for you to get started with a boilerplate in terms of like, Oh, you want to do a Gatsby boilerplate then yeah, here, just click Gatsby, you want to do a, you know, view, whatever. What is the view x or any of those? Go ahead next. Yeah, next is the one I was thinking of not the Redux thing. But no, if you want to do grid, some are aware of all or whatever, they make it really nice and easy to do that I really appreciated that for pricing for this one starts for free forever with one user. The basic plan is seven bucks per user per month. So it's a seat based pricing 12 bucks per user for the advanced 21 for premium. It looks like the more features that it gets. If you need like custom workflows, scheduling, content, staging, custom roles, Import Export s3 backups, you're going to be paying more for that I would say this is like a, this is a good a $1 sign. I guess it's per user per seat, though that it's a $1 per seat. So each time you add a seat, it adds another dollar to the yield score. - -48 -00:34:40,920 --> 00:34:47,550 -That's great. Next one we have here is eight base. I've not tried this myself looks like dammit graph qL API. - -49 -00:34:47,670 --> 00:38:02,130 -A base was really confusing for me. It was nice. Yeah, I did a Scott tries video and ate bass and just read their marketing copy because I had no idea what they did for a very long time. I was just like, Okay, well what does this do? I don't under But then I think they it looks like they actually changed it. Hell this funny, they might have changed it. Their whole thing was like very marketing speak. And I was like, What is this thing and now it just said build faster and better or something is like keep going faster. And I was like, What does that even mean? But now it looks like the very first thing it says backend as a service professional grade software, boom, nice job, a base for updating that shout out. Ah, so their pricing is I hate when companies do this, I get why they do it. But they do it based on like database rows and requests and how many one gigabyte an hour. So it looks like they have serverless built in, which is pretty nifty. I always look at these companies that charge based on requests and by the hour. And I'm like, I'm a developer. I don't know. Yeah, I have no clue how many I'm going to use. And that's why I like it when companies can sort of take a gamble and say, based on the number of people using it or something like that. But it's 25 bucks for a million database rows, a million graph qL subscriptions and a million graph qL API calls a month, which seems like a lot probably. Yeah. gotten I are gonna get so many email. Yeah, yes, I know. Every single company we mentioned. The next one is Canadian based agility cmms. They have tried to get me to do a course on them for a long time, but I've not checked it out just yet. It looks like they are targeting more of a corporate world based on the website seems to do a lot of requests a demo register for a webinar, their website doesn't do a great job at actually showing the UI of the headless CMS, which is why I think they're probably trying to sell managers rather than developers or editors on the end of the day. But from what I've heard, lots of people have been recommending us to myself, you can you can plug it right into Gatsby or next or next or anything like that. Seems to be a pretty popular plus a Canadian out. Yeah, well, alright, let's move real quickly into self hosted versions. So probably the most popular self hosted one that you can do. And this is what a lot of people are opting for is headless WordPress. Why? Because likely, you already have years and years worth of content already inputted into WordPress. And WordPress has a REST API that you can pull your data out of. There's also WP graph qL, which we had Jason who builds WP graph QL. He's got hired by Gatsby. Now, that's a good option as well, advanced custom fields, custom post type UI, custom plugins, things like that in WordPress, generally, all of these custom plugins are saving their data as custom post types, custom taxonomies and custom fields in WordPress. So if you have some sort of like something that sells tickets, or a custom contact form, or something like that, most of these plugins save their content as custom post types. And that means that you can then pull your data out of the API with that. - -50 -00:38:02,340 --> 00:38:44,400 -Next up is Drupal, which has been around forever and ever and ever shoots out an API, the admin interface is less friendly than WordPress is in some regards, because it just gives you a ton of stuff. But once you tweak permissions and all those things, and make it really nice and friendly, and install a new admin interface, it is really a nice setup that I think a lot of people just don't reach for, for whatever reason, maybe they never had an experience with it. But I always really liked working in Drupal in CMS world. So I would recommend checking out Drupal. It's pretty cool. I haven't used it in a long time. Mostly because I haven't done client work like this in a long time, but I've not reached for Drupal. Again, myself if I was reaching for a PHP based back end for free, - -51 -00:38:44,820 --> 00:39:19,980 -WordPress and Drupal obviously free except for if you have to buy plugins. You don't buy plugins in Drupal, and it's all free all open source. Is it really? Yeah, Drupal sounds awesome. Like the community seems like it just does not. They just kind of keep on chugging over, over the time making awesome things. Someone linked me to this content scms. It's that can contentious cms.org contenta is an API first Drupal distribution. So it looks like it's a whole done for you headless CMS UI. And then it spits out an API on out on the other end, which Cool, cool. So - -52 -00:39:20,280 --> 00:40:16,350 -next up is craft CMS, which is a popular one, but it's a paid self hosted solution. And the pricing for this one is your solo building a site for a friend free forever. Okay, so you can get started and learn craft for free. And then once you get into a pro, it's per project basis rather than like a seats, right? You just pay for the license that hey, craft CMS, does this have any relation to expression engine? Oh, crap. We transition from expression engine to craft CMS. What are the differences between expression engine and craft CMS? Most of what pixel and tonic used to offer baked into the CMS. It seems like they're they are related. I'm not alone. Not quite sure. This was one of those things. We used to use expression engine all the time, and it was a paid CMS. And you'd pay just for the project because it was it was nice. It was a nice experience that uses us that PHP Code Igniter, which is like sort of, like the precursor to like, sort of a layer file sort of system. - -53 -00:40:16,400 --> 00:40:50,730 -Yeah. Laravel. Yeah, it's not the same codebase but like, it was the PHP framework to use for a long, long time until Laravel came around. And I haven't heard a lot of people using code ignitor in a while, but I know it is still an active project. Next, we have ghost, Ghost came out, when node became popular just blocks and it was like a Yeah, yeah, it was like a blog. And now it seems like it's a full blown headless CMS built in Node. I have not tried it in probably six years. But it seems like the people that say same was crap. CMS seems like the people that use it. Absolutely love it. - -54 -00:40:50,879 --> 00:41:15,870 -Let me tell you about something. I just went to the like what's new and goes three. And they offer like subscription and membership based accounts for like in the in the CMS turn your views into an engaged audience with the member signups in like paid seats. That sounds like a really killer feature for this kind of thing. It looks like it's integrated directly, and almost looks like Braintree or something. But it looks like Oh, no look with stripe payments. Cool. - -55 -00:41:15,870 --> 00:41:16,560 -Unknown: Wow. - -56 -00:41:16,590 --> 00:41:33,960 -Scott Tolinski: So that sounds like this is open source. But why it's paid but also open source. So what's the might be the same as WordPress, right? Where you can have one on there, or you can host it yourself? Maybe I'm wrong. I like that approach quite a bit. This is nice. I think I might reach for this. I want to try it. Yeah, me too. It - -57 -00:41:33,960 --> 00:42:14,190 -looks to me a Scott tries video on this place. One coming right up there. Next is strappy and Keystone. Tons of people tell me to use strappy. It's a open source headless CMS on node j s, which is pretty nifty. Keystone is very similar to that a graph qL API, you can create your schemas, it creates your UI for you and spits out an API. On the other end, you can also create your own custom input fields. With Keystone it is totally self hosted, which is pretty nifty as well. I bet we'll see a lot of strappy in the next in the next year or so seems to be gaining some really good momentum right now. - -58 -00:42:14,630 --> 00:42:23,340 -I have a last one here is a Joomla. And then I wrote JK cuz I don't, I haven't thought about Joomla. In a long time, I was just thinking this would be a funny option. Have you? - -59 -00:42:23,550 --> 00:42:48,150 -Did you ever use Joomla? I did. Initially I used to do Drupal, WordPress and Joomla all at the same time. And then I remember like just making a quick break. And I said, I'm only gonna do WordPress. So I dropped both Drupal and Joomla. And luckily, it was like the right decision for the right decision. Yeah. So impressive. They're still going like obviously, there's there's probably like millions of websites still built on Joomla. Like will never, never - -60 -00:42:48,600 --> 00:43:19,830 -make it really easy to install via cPanel. It was just one of those icons install Joomla go. Next up is going to be an ad read and a totally non related ad read to the rest of this episode. This ad read does not pertain to any of our opinions on any of this stuff. And it does not influence our decision to say nice things about them. However, this is the time where we do get to say nice things about them. And that I'm talking about sanity@sanity.io like Wes mentioned, they booked this episode, like last year. So we didn't know that this episode is gonna be so - -61 -00:43:20,010 --> 00:44:32,220 -the nice things we're saying here are very clearly paid. The nice things we said earlier are not paid. Yes, exactly. Honestly, like I did try out tons of CMS is before my next course. And I ended up going with Sanity just because it strikes the right balance between control because it is code that you run on your computer at the end of the day. And it just works. And it's done for you. The support is awesome. Like I don't you, if you if you sneeze and say Sanity on Twitter, they'll be there in two seconds chiming in. So it's an awesome CMS, I'd recommend that you check it out for your next project. they've they've got some pretty big customers that are running it, you can count on their servers to be up because it is a hosted version. They scale. They do all the image compression and CDN stuff for you at the end of the day. But then you also do get the control of being able to control what does the editing interface and workflow and validation and all that stuff look like for me. So check it out sanity.io forward slash syntax that's going to get you double the free usage tier. You can check out some some examples that you got there. Thanks so much Sanity for sponsoring. Thank you for that conflict of interest. - -62 -00:44:32,220 --> 00:45:03,030 -So next up is going to be the API here. And these are these are going to be CMS is that they get into the conversation of is this a CMS and some of these are maybe a little bit more or less than others like Hazara to me, we had this conversation already. Yes, it is a like a database editing interface. But yes, you can also edit your content on it, and it spits you out a nice graph qL API, and you get accounts and subscriptions and all sorts of cool stuff. West just wrote Firebase. No, no. What are you doing? That's - -63 -00:45:03,030 --> 00:46:01,080 -a lot. This is this is getting way too far away from a CMS. Fire. Well, Firebase has a editing interface. I don't know. I don't use Firebase. I'm sorry. Yeah. Oh, well, I did. I don't know. Let me let me let me just did let's do a whole episode on Firebase without me using it, I can just teach you know, it very similar to Hasura. Prisma, as far as I know, does not have no sorry. They do. Prisma has a UI view. And this is not Prismic. Prisma has a UI that is very similar to a database editing UI where you can edit your things. You can link relational documents. It's pretty, pretty nifty. Actually, I had used so I missed graph. Cool. I wish graph cool would have done like, like stayed on that track. You know, who did who picked that range? Yeah, those reins up. And we actually forgot this one on F to add it to the list, which is graph CMS. Have you ever used graph CMS? Have you seen that no graph CMS - -64 -00:46:01,080 --> 00:46:01,980 -Unknown: CMS? - -65 -00:46:02,010 --> 00:46:22,020 -Scott Tolinski: Yes. Graph CMS actually is different course A while ago on an older version, and it was still pretty fresh. But it's been a while since I used it. And it's a really cool. The thing I love about graph CMS specifically, is that it is sort of what graph cool was it where everything is just done very for you in the interface, and it spits out a graph qL API. - -66 -00:46:22,020 --> 00:46:35,670 -And at the time, there was like some relational data features missing. But it looks like it looks like they have like really stepped up the game here. They even have like e commerce examples, content hub marketing apps travel, - -67 -00:46:35,670 --> 00:46:53,100 -why graph CMS this thing looks really slick now. Not that it didn't look slick. The design was always slick. But it was like features that were missing. But it looks like custom roles and permissions mutation API Management API playground. That's just a graph. qL playground, interactive schema editor. It has - -68 -00:46:53,100 --> 00:47:15,900 -locales. This is one thing we forgot to talk about which localization? Yeah, what if your website has multiple languages? Like you have a piece of content? Like what does that story look like? And somebody in the tweets said, it's important to think about that, and it looks at graph CMS 450 bucks a month per projects gives you four locale. So pretty busy. - -69 -00:47:16,560 --> 00:47:36,600 -The essential Price Is 40 bucks a month, 39 a month, so and that's yet doesn't get you a ton of stuff. So this one is definitely a like a contentful competitor, where you're you're getting into the heavier dollar signs. But there's a free developer plan if you want to, like try it out. So you can sign up and you don't have to pay to get used to it first hits free. - -70 -00:47:36,690 --> 00:48:00,990 -Next up, we have Git based CMS is so there's two I know of in this area, and that's Netlify CMS and forest street IO, I believe both of these work in the way that they give you a UI. But the actual data is not stored in a database, it's stored in a markdown file. So the data gets parsed. And committed to a markdown file, which is pretty it's really cool. - -71 -00:48:00,990 --> 00:49:02,280 -I actually use Believe it or not, I was doing all of my on Scott Tolinksi calm I was doing just markdown editing. And then all of a sudden I was like, you know what this is all just markdown, these are all just basic fields. I wonder how easy it would be for me to drop in Netlify CMS to this, I just dropped in Netlify CMS keep in mind my site is sapper. So it's you know, just it's it's just markdown, right. So it doesn't matter what the platform is whether it's Gatsby sapper, or goodsam. Any of those, right? I just dropped it in. And now I have an admin interface to edit my markdown files, if I so choose without having to get into my editor. The thing that makes it nice for me is that the only other way to do this would be to add a markdown file on GitHub and have it whatever. So your site pushes a new version if you're doing the statically generated site. But since this is editing the Git file, you don't have to do a, you don't edit your file locally, then have to push out via git, you can just edit it in this interface, and it takes care of the good stuff. And if you're hosting something with a continuous deployment, like Netlify, then it's just gonna rebuild for you. And it's almost like working in a real CMS. - -72 -00:49:02,700 --> 00:49:21,510 -We said many times on this website, don't give your client markdown file. Like maybe this is the actual option is, especially if you need a very simple, very simple UI. Great. I think that that's a pretty good option. So what let's talk about pricing on these free 399 - -73 -00:49:21,930 --> 00:50:01,380 -Yeah, cuz it's just, it's just again, it's just files, you're just dropping files in your app. And they're, they're running because again, there's no database, there's no servers, nothing everything's hosted in your thing. It's just giving it permissions to, to make those pull requests via your own GitHub. So I logged in with my own GitHub. It's really slick system, but it's got, I'm gonna tell you this, it's got just about zero features. I mean, I don't want to I don't want to be mean about that. But it doesn't have a ton of features. It's just a nice admin interface for editing your stuff. I really even wish they had themes because this bright white theme really hurts my eyes. I wanted to make it like dark. And then I was like, Well, I'm gonna just install some custom CSS. I don't want to get into this. - -74 -00:50:01,620 --> 00:50:28,230 -Oh, yeah, it looks like forestry is free for three people per month, it syncs with get instant previews, you can host the UI on your own website if you want. And then if you want five users per website, as well as a couple other support, our access control, that's kind of interesting you access control with a markdown file that goes to 29 bucks a month, which is pretty affordable, I think. - -75 -00:50:28,320 --> 00:51:00,090 -Yeah, cool. Next up is going to be other these are all the others, right? These are just ones that didn't fit in anything else. And it's funny, a lot of people suggested some like spreadsheet based stuff. So some, you know, you can apparently have an API with Google Sheets, which I haven't done. There's also the option to use something like air table, which is sort of like a more high powered table based software, which is sort of like a Google Sheets type of thing. It's like a relational data table, but they have an API too, that you can tap into. And you can use air table as a CMS. - -76 -00:51:00,330 --> 00:52:17,880 -There's a couple out there, there's one called Sheedy, which hooks up to Google Docs and just gives you like a JSON API, you laugh, but it actually kind of makes sense. I didn't laugh anytime that you want to, like, I just built a spreadsheet last night, full of every single thing that needs an oil change, and an oil filter, and a air filter and what type of oil it needs. And like the first thing I do is not install something like that. The first thing I do is I just go and make a spreadsheet. And the spreadsheet is the like the most low bar CMS that you can get and you you give yourself titles above it. So like maybe the spreadsheet is not a bad idea at the end of the day as well. Let's uh, let's look into the pricing. I'm clicking on the pricing link on Shi t.com. And it's not doing nothing, not doing anything. Looks like they just launched a new website because this is different than what I remember pricing. The pricing button doesn't work. No, well, maybe it's free then they're at you type in Ford slash pricing. I get a white screen. So shout out shout out pricey if you're listening. I'm getting a white screen on your pricing. right he probably Sheedy, that is a little shady. But they'll probably fix this by the time this episode releases. Tina, - -77 -00:52:18,180 --> 00:54:51,750 -Tina, Tina, CMS, not a CMS. So Tina is built by the folks behind forestry. The idea is that it's the real time UI for editing on your website. So you can stick this into your website and open up an editor right on the website. Or you can just type directly into a content box on your website. And you can see how it looks in real time. And then the idea is that when you hit save, where that data goes, is is up to a plugin. So whether it goes to markdown files, or whether it's saved in a MySQL database, or whether that's saved in any other headless CMS that you need to looks like, I didn't totally understand this when I first saw it, but now I definitely do. They have a button that says edit the site. And you can log into GitHub and edit Tina cms.org. A little bit of Yoda Moria there. Next up, we have just straight up markdown, don't I don't know, it depends on if clients are using that don't just have straight up markdown. Next is going to be it's funny I you have this listed here. I did not write this you wrote notion, which is an interesting kind, I wrote it for you. I know I felt like you did. So notion does not have an API yet, although they've been saying they're going to get one for a long time. So we'll see if the notion API ever arrives. But you could always use notion as a really nice blogging platform, I found this really interesting project from split B, which is an analytics company I just found out about. It is like a unofficial notion API where they like scrape your notion page that's public. And it gives you like the API data and it gives you all the data of the blocks, the all this sort of stuff. And somebody had written a really great wall split B did not somebody, somebody at split B wrote a really great renderer for react for a notion template because the API is kind of interesting. And so I wrote one first belt, because hey, I wanted to see if I could do it. And now on the site on Scott tolinksi.com, forward slash notion. That's a page that is being written and edited within a notion itself. And I wrote support for a bunch of the blocks, like code blocks and lists and whatever, I'm still working on it. But it's, it's a fun little project is just a little like to see if I could do this kind of thing. Like you just pass in a notion ID page or the ID for the notion page and it just spits out the page. It's not totally viable because you can't really work with pretty URLs. But it's an interesting idea. You could at least write something custom with it. - -78 -00:54:51,990 --> 00:55:57,810 -notion is probably the one of the best wizzy wigs you can get. And I say that because gotten I just had like a three minute thing or couldn't figure out how to unindexed. Yeah, heading. It was exactly how that went, yes, it was very Microsoft Word. And we both tried dragging it sideways. And then it did the whole, like Microsoft Word were like made a table. And we're like, oh my gosh, what's going on anyways? Besides that, I think notion is an awesome wiziwig has all of the like user management and everything built in already. So I wonder if that's maybe even something they have coming down the pipe. They said they have a CMS coming out. But they've been saying that for a long time. So who knows? Who is that it is that everything that has to do with this headless CMS? Dude, the moment that we press publish, you're gonna say, What about this one? What's gonna happen? Well, I put out a tweet asking for them. And it had 400 and 42nd replies, and I scan all it was your opportunity to make sure we weren't forgetting Well, yeah, that was your opportunity to tell us one that we missed. All right, let's - -79 -00:55:57,810 --> 00:57:48,570 -move into some sick pics. Sick pics. You know what, I have a sick pic. I'm building a fun thing right now, which is it's not that fun. It's like a rack for my weights in my gym. And because I wanted to fit our squat rack onto like a smaller spot. But it has these like giant pegs coming out of the sides for where you put the weights. And it makes it really inconvenient. So I'm just gonna build my own out of some scrap wood. So Landon and I, yesterday, we just went to town building this, this rack together. It was fun. I got to teach him about a circular saw and you know, power tool safety. He's two years old. It's three years old. But you know, he got to watch it. He thought it was fun. So it was really you know, I got to teach him how to use use some of this. Not obviously the circular saw, but I got to teach him how some of this stuff goes. And one thing I got to show him was this orbital sander. And so I have this DeWalt orbital sander, and it's so dang awesome. I mean, nobody like sanding stuff. So if you have like wood projects, it's awful. Yeah, I just I plug this thing in, I pop up like a Velcro sanding thing on the bottom. It collects the dust for you. And my gosh, it can make the the most rough edge of something the smoothest darn like I even it's almost like getting into like territory. I'm like rounding full on rounding corners of the like a two by four off with this thing. It's so effective. I actually really love it. It's like, what is the sander here? It's 60 bucks for this thing, man. Oh my gosh, it's really good. I've had it for a few years but I was just yesterday I was like man, this is probably my favorite tool because it really adds a level of fit and finish to projects that you can often ignore and just have them looking kind of janky so a big fan of this. I need this. So I'm working on building some shelves for my office right - -80 -00:57:48,570 --> 00:57:49,140 -Unknown: now. - -81 -00:57:49,140 --> 00:58:08,760 -Scott Tolinski: I've got like a palm sander which is not an orbital sander and oh Rosanna spins and a palm sander just goes back and forth. And it doesn't Michael like I've got all the grits of sandpaper and everything but it's suck. What it doesn't do is it doesn't go in a circle. I mean, like it goes in a circle and then back like you're driving a steering wheel by mouth. - -82 -00:58:09,210 --> 00:59:38,190 -Oh yeah, man I need I need to get one of these because I'm sanding stuff right now and I'm so sick of it. I have all the grits of sandpaper so I'm actually I'm gonna pick another wood roofing. So I'm building I'm building these shelves right now. I just went to like a local dude and bought some cherry like a live edge cherry cherry and I went on Amazon and found these awesome shelf brackets that are like just really modern looking. They're just black square tube. Can you hit me up with those shelf brackets because I need to build some shelves. I was like just running the I was running the prices on just like going out and buying like a nice shelf versus you can just buy a piece of wood like I'm not a woodworker here. I'm just a guy I bought a piece of wood you cut it you rip it to size with a circular saw and then you can go to town with Scotts orbital sander and sand this thing nice and smooth and then some nice fella on Twitter told me to put polycrylic on top of it to sort of seal it up and give it a nice satin finish and this this look I'm impressed with myself because like I don't have finesse in woodworking and this these types I don't either. Yeah, and these things are looking real good in this cheap shelf brackets off Amazon, a hunk of wood sand it down Put some poly acrylic on it so that's my safe pick today's these shelf brackets that allow pretty much anybody to make a nice looking shelf. Cool. Feel like a - -83 -00:59:38,220 --> 01:00:08,910 -regular old dad over here because he was making shelves. Yeah, building weight racks and all that stuff. Well, I think it's just like a sign of the times he can't like you literally can't go out and buy something or go out to a store and look at possible options. And you got lots of time so it just seems like he might as well just try build it myself. I'm not even Getting wood I'm using scrap wood beautiful that's that I don't know what am I say? That's the dream beautiful that's that's the scrap - -84 -01:00:09,960 --> 01:00:55,290 -so now's a better show we're talking about shameless plug so we just plug stuff we get silly on yeah time to sell some stuff. So level up tutorials.com so by the time you're listening to this episode, the latest level up tutorials course will be released and that is on sapper now we're going to be talking about static site generation with sapper, we're going to be talking about server side stuff with sapper it's basically the next j s version of spelt. And if you want to talk about no code to do some really good stuff, man, this is where it's at. You get animations baked into the library. So we got paid routes and all this stuff. If you want to learn about sapper head on over to level up tutorials.com forward slash pro sign up for one year today and save some cash. - -85 -01:00:55,530 --> 01:01:24,840 -I going to shamelessly plug my youtube channel just go to YouTube search Wes Bos and subscribe. I finally pass and we've been talking about this for like a year and a half I finally passed the hundred thousand subscribers mark and got my plaque. So I started like shifted my YouTube strategy from tutorial there are little Yeah, like they're like they're not full blown tutorials. They're just kind of me figuring things out and explaining how things work. And I've really enjoyed that. So check it out. youtube.com forward slash Wes Bos. - -86 -01:01:25,050 --> 01:01:26,250 -Cool. All right, well, that's it. - -87 -01:01:28,200 --> 01:01:43,080 -Have a good one lazy face. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax255.srt b/transcripts/Syntax255.srt deleted file mode 100644 index f02002af4..000000000 --- a/transcripts/Syntax255.srt +++ /dev/null @@ -1,168 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,160 --> 00:00:04,009 -open wide dev fans - -4 -00:00:04,009 --> 00:00:07,590 -yet ready to stuff your face with JavaScript CSS node - -5 -00:00:07,590 --> 00:00:08,820 -modules, barbecue tip, - -6 -00:00:09,030 --> 00:00:11,609 -workflow breakdancing, soft skill web development - -7 -00:00:11,609 --> 00:00:21,300 -hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott - -8 -00:00:23,610 --> 00:00:24,149 -Tolinksi. - -9 -00:00:27,300 --> 00:00:49,260 -Scott Tolinski: Welcome to syntax on this Monday hasty treat, we're going to be talking about slow connections. And this is gonna be part two of these tasty treats that we're doing. Who knows how many we're gonna do? Because it seems like there's so many of these tips, these tasty, tasty tips here we got for you. My name is Scott to Lynskey. I'm a developer from Denver, Colorado, and with me, as always is les balls. How you doing? - -10 -00:00:49,350 --> 00:00:59,430 -Wes Bos: Hey, everybody, I'm excited to talk to you on my slow connection about slow connections, more stuff about how to account for slow internet connections. - -11 -00:00:59,489 --> 00:01:00,210 -Unknown: Cool. Well, this episode - -12 -00:01:00,210 --> 00:01:07,140 -Scott Tolinski: is sponsored by how Prince Luce study web development comm it was a little bit more about that is Wes. - -13 -00:01:07,470 --> 00:02:50,430 -Wes Bos: Yes, Kyle prinsloo has his course, which is everything you need to master freelancing. Man, he's got over 2500 people have already taken this course, which is pretty impressive. And what this is, is a course you go ahead and buy it and you get all kinds of stuff in this course, there's an E book for freelancing there's an E book for web design. There's a bunch of HTML CSS templates. There's a CSS spice Chrome extension, mon. Yeah, CSS spice, calm spice. Okay, inspector extension. Yeah, show you different properties and whatnot. If you select an element, it'll show you what styling on that there's a slack community Facebook community. This is really important when you're trying to be a freelancer prospective client questionnaire, because you need to know what are the questions you ask your client before you build something, a proposal template SEO checklist, I'm not going to go through absolutely everything on here, because there's tons that you get with the bundle. But check it out at study web development, comm forward slash freelancing. And you can see everything that you get in the bundle in order to become a freelancer. So I think this is probably very, a very good time to maybe brush up on freelancing skills because of the the shaky job market right now, I know that a lot of people will be in between jobs over the next couple of months, which is unfortunate. But if there's any way to make a little bit of money while you're in between jobs, and as well as keep on top of your web development skills, I definitely think freelancing is that. So we got a coupon code here it is syntax that's gonna get you 25% off the entire course. Thanks so much to Kyle prinsloo. And study web development comm for slash freelancing for sponsoring. How are you doing? You're - -14 -00:02:50,430 --> 00:02:58,050 -Scott Tolinski: doing good, you're doing good. I actually got my MacBook computer back in three days, some of my my fancy new computer again, once again, - -15 -00:02:58,350 --> 00:03:06,210 -Wes Bos: I'm impressed how quickly you got that back. You have to lock with computers. So the worst that you can actually get it back. Yeah, I - -16 -00:03:06,210 --> 00:04:56,970 -Scott Tolinski: bought a backup computer, which is kind of a crazy thing. But I bought a backup computer, which is going to be a Linux machine. It's a system 76 machine. So we're going to do a whole episode on that in the future. So I know this is the hasty tree. We don't normally do banter at the beginning. But you know, I just don't want Yeah, we do what we want. We make the rules here. Yeah. So let's get going. Let's first talk about images. Now images are one of the most killer things for any websites download time, because there's just nothing you can do about images, there are going to be hefty, hefty hefty, just about all the time with some small exceptions. And there is a lot of different techniques you can use and utilize to make your usage of images just a little bit better. When you think about it, we have like a JavaScript bundle. And the solution to making your JavaScript bundle is to use less JavaScript, right. But as an image, there's only there's only so much data you can remove for an image right before the compression gets to be bad. That's where you'll see a lot of companies right now they're doing a lot of research, you have a lot of new image formats coming out whether that's web peas, or various things like that. But what are some strategies that we can have to reduce the load of our images? Now one, here's here's the, here's the beginner tip number one do not serve an image larger than you need. I remember back in Dreamweaver days, there used to be a button that was like optimize image that all it did was make the image the actual width of the way it was displayed. And that was like when I was first but my very first website I had some person be like your images are huge. And this is when high school does it means like your images are huge. You just click that optimize Image button. I was like, oh, wow, okay, yeah, I can make my site lit a lot faster. It should be like the very first step. don't serve an image larger than what you need first step. - -17 -00:04:57,450 --> 00:06:21,870 -Wes Bos: Next one we have here is resize your images on Client before uploading, which is sign a lot of people don't think about they always think about like loading download fast. But if you have an application that where the user has to upload stuff, a photo off your iPhone is three or four Meg's they're massive that takes forever to upload on some of these things. And not to mention, someone needs to upload six or seven images, you're just killing their data plan with that. And it is so easy to resize the images in the browser, you just pop it into a canvas element, resize a canvas element, pop it out of the canvas element, and you've got the the resize image, you can just convert that thing to binary string and post it over to the server. So always think about that. Next one we have here is width and height content on placeholder images. So not a lot of people do this anymore. Because of responsive design. It's frustrating to set the width and height attributes on an image, but also make them responsive. But you can always overwrite within high attributes at smaller values. But it's really frustrating to go to a website and start reading something and then have the content shift down or the button shift down. Because the image has been loaded in the browser knows how big it is. And then it has to shift everything around. So within height is key for not having page jank, as the slow side is loading. - -18 -00:06:22,200 --> 00:07:27,990 -Scott Tolinski: Another tip we have here is to crunch your images to compress them with lossless compression, there's a lot of different ways you can do this, a lot of build tools do it nowadays. There's also, if you're working on a little bit less of a build tool, heavy process, which I don't know a lot of people probably aren't nowadays. But there's an app called image optim. Or there's a lot of image compression software on the web that you just drop your images to. And it removes all of the metadata beneath the extra color data that doesn't need to be there all while keeping your images looking the exact same. And I've seen like huge reduction in image sizes, doing this, this is something I would never not do. There's obviously ways to do this within your build tool as well. And maybe even some stuff with you could have like a continuous integration sort of workflow with like a GitHub action or something that could go cruncher images on commit or something like that. I know, you've experienced quite a bit of crunching things on commits with your Gatsby site, and just how long image processing can take. But it really depends on your setup. It can be one of those things that it's very nice to have. Totally, - -19 -00:07:28,020 --> 00:07:52,770 -Wes Bos: there's we've talked about hundred times or services, there's good hooks, there's local apps, all kinds of stuff, just find some way to compress your images. Next up, we have use SVG where possible. So a lot of times the the logo of the website, a lot of these things can be used as SVG, SVG, s are significantly smaller and can be infinitely scaled up. Because they are vector based. - -20 -00:07:52,950 --> 00:08:07,710 -Scott Tolinski: Yeah, definitely. And they can even be straight up server side rendered in line. So the next one is going to be lazy load images, where possible, that's actually become increasingly easy, given the fact that you can now just drop up is the tag just lazy, right? - -21 -00:08:08,010 --> 00:08:11,250 -Wes Bos: Yeah, lazy attribute on your image tag. - -22 -00:08:11,270 --> 00:08:29,580 -Scott Tolinski: So there's browsers that support the lazy attribute will take care of it. Other ones that won't Well, hey, they won't just yet but at least that some progressive enhancement for you, I use the React lazy load plugin that works really well, for lazy loading images. I think that's something that it should definitely be done, especially for things that are out of the V port. - -23 -00:08:30,000 --> 00:10:07,260 -Wes Bos: Yeah, that's easy one to add. Next, we have scripts and CSS assets. So we are not going to talk about this again. But make sure that you're appropriately loading your your CSS and your scripts. We did a whole series of hasty treats on things that cause your website to be slow, go back and listen to those ones. Next is video. This is one thing I didn't do initially, when I launched my course platform as I just had one type of video and users on slow connections would not be able to smoothly watch the video because it just was too large. So some sort of player that does variable video processing, whether it will drop down to a lower resolution or something like that. Absolutely key. Next up, we want to talk about connections that go in and out. So you might have a fast connection. But if you are going into the subway, or you walk under a bridge or something like that, and your connection goes out for a minute or even 10 seconds, it's important to show some sort of UI to the user that they are offline. And it's very easy to do this in your applications. You just have an add event listener for the offline and online events. You listen on the window, and then at that function, you can go ahead and set state online true or online false. You could probably make a react hook called use online that returns true or false, very easy to do. Same thing with like, if you have data that needs to be saved, but it's not pushed up to the cloud yet telling the user are going to We try to upload this or we try to save this in 10 seconds. I think slack does a probably the best job I've seen. I'm doing this. - -24 -00:10:07,380 --> 00:10:48,390 -Scott Tolinski: Yeah, discord has a really nice one too. I think that is an important capability, especially if it's like a real time thing. If it's a website, obviously you don't need to alert people. But if it's anything more people are inputting content and viewing content in real time, then potentially, I think that's a an important aspect. So next one is going to be service workers. Now I'm interested in maybe getting, we should get like a service worker expert on here. Service Workers are a bit of a mystery to me in terms of writing, like, I could not write my own ServiceWorker from scratch, but I haven't ever tried and I've never really looked too in depth at it. Do you know the internals of what a ServiceWorker does exactly how it does it? - -25 -00:10:49,280 --> 00:12:03,810 -Wes Bos: Yeah, yeah, it I've talked about a little bit on the CloudFlare workers API, because it's very similar is that the service worker sits at the network level, and intercepts requests. That's that's one thing it does is it sits at the network level and allows you to both save values to your cache, as well as intercept requests and serve up cached HTML, CSS, images, things like that. serviceworkers can also be used for other things as well. But that's probably the most popular one is, is showing an offline version of the website, they are a little bit tricky. I'm always a little bit scared to put them on because you can accidentally get into a spot where you cache the website, and then someone visits it. Luckily, you can always a service worker will always try to check for a new version of itself on every page load. So you can always clear that cache. But I agree that they're much harder than I think they have to be. They are Yeah, Google is working on something. It's like worker workbox by Google is a nice little library that will allow you to do things like progressive web apps very easily, without having to know all the nitty gritty service worker stuff. Interesting. Yeah, - -26 -00:12:03,810 --> 00:12:04,530 -Scott Tolinski: I've never heard of that. Yeah, - -27 -00:12:04,530 --> 00:13:23,610 -Wes Bos: cool. So the next one we have here is font loading. So one, one trouble with fonts in the browser is that if you use a custom web font, then your browser will show you nothing, until that font has been being loaded, which is frustrating to the users because they don't care about your custom font when their internet is slow. They just want to rewrite the actual content of it. So you can use the font display property of your font, when you define the app font face, and you can set it to fall back, you can set it to swap swap is most likely what you want, where it will take like 100 milliseconds or 200 milliseconds. And if it hasn't downloaded or sorry, that's fallback, not swap, fallback will try to download the font. And if it's taking too long, then it'll just show the fallback font face, which is which is what you want. And I think that's also the default and a lot of browsers now. And your browser will also determine how long it should try to download the font before then falls back. But definitely check out your font display, especially if the developer have that font installed locally on your computer. And it just shows up immediately when you visit. That's why I always like to name my fonts something different than what they are on my computer. Oh, nice that smart, you can still get the feeling of what does it like for regular - -28 -00:13:24,000 --> 00:13:38,190 -Scott Tolinski: visitors in the very like the case where performance is absolutely essential in these things. And you can using a system font is going to be totally the fastest every single time there's going to be no fun download requirement, you know, - -29 -00:13:38,190 --> 00:14:30,270 -Wes Bos: there's this little snippet, I'll put it in the show notes here. It's font family, Apple system, blink Mac system, font, segue go UI Roboto, oxygen, Ubuntu, Open Sans Helvetica new, it's this like massive font stack that will give you a really nice font, regardless of what you're on. And that's kind of my default. And then I'll go for a custom font, usually on headings and things like that word. Next one we have here is just some CSS tricks. Like the like the website, if you have text overtop of an image, make sure that your background color matches that Yeah, as well as possible. Because if you have like a white background and a black image, and you've got white text, you're not gonna be able to see that text until the background image load. So make sure you set your background image, show your background color to be something similar to that image. - -30 -00:14:30,630 --> 00:15:49,980 -Scott Tolinski: Yeah, that's actually a really good point. I don't think about that a whole ton, but that is that is definitely. Right. So let's talk briefly about like testing these things. I don't know There seems like there's a billion services to test these things into really experienced them. I use, obviously the audits tab within Google Developer or Chrome Developer Tools to really run an audit to see where the potential slowdowns could be, but like you have it listed here. The ability to mimic a slogan goes a really long ways. Now Wes, does it need to mimic a slow connection right now, but I have a really fast connection. And I often forget a little bit about just how fast my connection is. So if you head into Chrome Developer Tools, you head to the Network tab, you'll see that they have the ability, there's a drop down, and typically by default is online, which just means you're online. Now you can test to see your site in offline here already. But you can also test to see if it's any fast 3g, network 3g, yeah, fast 3g or slow 3g? Or there's some custom ones where you can actually get down into the nitty gritty of throttling it. So you can make a custom profile and choose the actual amount of cavies download upload latency, all that stuff. You know what I'm surprised they haven't updated this to have like four GB the option because like honestly, 3g who's using 3g still give me an edge network Next, - -31 -00:15:49,980 --> 00:15:57,660 -Wes Bos: check your privilege out the doors got a lot of people are still on 3g. Are they myself included? Are you yeah, oh, yeah, man, I'm - -32 -00:15:57,660 --> 00:16:02,730 -Scott Tolinski: now with that I will come up with like five G's the thing now, so I just figured 4g was ubiquitous. - -33 -00:16:02,850 --> 00:17:05,570 -Wes Bos: My phone regularly dips into 3g. But I take that back, I'm sorry, depending on how far I am from the plus, like, also, we're thinking about just like all around the world, and a lot of developing countries don't have 4g absolutely everywhere because like the faster these connections get, the more towers that are needed. So 5g needs towers every couple blocks, whereas 3g needs towers, every 10 1520 kilometers. So there's a lot of places I guess it's different in Canada, because Canada is a massive country with like a 10th of the population of the US. And there is a lot of spots in Canada that still don't have have LTE connections, or the LT connections are heavily throttled like I do get lt up here. But they're heavily throttle just because there's 2000 cottagers on the one tower. And one tower can only do like 100 megabits I read, and Scott's here sitting with 10 times that on one internet connection for his office, right? It's not the thing. - -34 -00:17:06,479 --> 00:17:36,080 -Scott Tolinski: It is it is and in I i understand that is not common. In fact, for a very long time, I just really wanted fiber internet forever and ever and ever, I would have watched the the updates of when it's gonna roll out to Google and whatever. And then one day, I just got a little letter in the mail it says SentryLink has fiber. Now granted, SentryLink does not deliver the speeds that I'm paying for. But it's it's like am I going to really complain that hard getting 700 up and down or something when I like, am paying for a gig, I don't I'm probably not going to complain about that. - -35 -00:17:36,630 --> 00:18:07,580 -Wes Bos: It's important, I guess if you're doing video and stuff like that, but I would absolutely love to get that I can't wait for the day like I bet in the next couple years, we'll get that where I live in Hamilton. It's important to know all of his even just even if you have like 15 megabits down, that's fast enough to load most websites in a second or so. But it's when you get down to just like one to three megabits down. That's when a lot of these things that I'm talking about here, start to show their cracks. Come - -36 -00:18:07,580 --> 00:18:11,040 -Scott Tolinski: to a crawl. Yeah. Especially today's JavaScript framework world. - -37 -00:18:11,310 --> 00:18:13,890 -Wes Bos: Am I right? There you go. - -38 -00:18:13,890 --> 00:18:15,270 -Scott Tolinski: Let's start the flame or - -39 -00:18:16,020 --> 00:18:42,450 -Wes Bos: Alright, that's it for today. That's all the things that have Oh, I should also say you can throttle your connection in Firefox as well. You have to use the mobile emulator and there is a drop down that says the different types of throttling and that 4g LTE is an option. Cool. Thanks so much for tuning in. If you have any tips of your own, make sure you tweet us at syntax FM and we will catch you on Wednesday. Please - -40 -00:18:44,730 --> 00:18:47,810 -Scott Tolinski: head on over to syntax.fm for a full - -41 -00:18:47,810 --> 00:18:48,390 -Unknown: archive of all - -42 -00:18:48,390 --> 00:18:54,510 -Scott Tolinski: of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax256.srt b/transcripts/Syntax256.srt deleted file mode 100644 index 08333cd27..000000000 --- a/transcripts/Syntax256.srt +++ /dev/null @@ -1,532 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:10,530 -the podcast with the tastiest web development treats out there. strap yourself in and get ready here is Scott solinsky. And Wes Bos. - -3 -00:00:10,530 --> 00:00:47,280 -Wes Bos: Welcome to syntax is the podcast with the tastiest web development treats out there. Today we've got a guest on the podcast who made this really cool app called zip call. And we just spent 10 minutes trying to get zoom working. And then this guy just built sort of a clone of it in the browser with just JavaScript and it's peer to peer and we'll talk all about it's really, really cool. But today we are sponsored by two awesome companies. First one is Sentry. Second one is Stackbit. We'll talk about them partway through the episode. But let's let's say welcome. Welcome in how you doing? - -4 -00:00:47,879 --> 00:00:53,850 -Ian Ramzy: I'm not too bad. Not too bad school starting to ramp back up again. But for him now doing good. - -5 -00:00:54,209 --> 00:00:57,540 -Wes Bos: Oh, that's good. So where are you from? and What school do you go to? - -6 -00:00:58,079 --> 00:01:10,830 -Ian Ramzy: So right now I'm living in Waterloo, which is Canada. I'm studying computer science there. And I'm 19 I grew up in the us live in Kingston for a little bit. But now I'm based in Watertown. That's awesome. So - -7 -00:01:10,830 --> 00:01:35,130 -Wes Bos: Waterloo is pretty prestigious comp size school in Canada. That's where all the brains tend to go. I went to a school in Toronto, and everyone's like, oh, not going to Waterloo. I was like I wasn't wasn't quite smart enough. That's where Google is. That's where famously rim like the BlackBerry kind of came out of and stuff like that. Like your classmates are people who would like go work at like Google and things like that. Is that right? - -8 -00:01:36,240 --> 00:01:46,950 -Ian Ramzy: Yeah, I got a lot of friends that work at Google and Amazon, a couple of Facebook. What a lot of very, very big brain people there. Were very smart people man makes me feel bad. - -9 -00:01:48,150 --> 00:01:51,330 -Wes Bos: I bet I bet. How you doing today, Scott? Hey, I'm - -10 -00:01:51,330 --> 00:02:05,970 -Scott Tolinski: doing good. Just getting going. You know, doing that. The life where everybody's home all the time. And Landon just turned three yesterday. So we had a big old party. And that was a lot of fun. Just Yeah, trying to trying to get normal life back working. - -11 -00:02:06,300 --> 00:02:15,300 -Wes Bos: Oh, that's awesome. So I'm very curious about this comp. sigh background. I see a few more questions about that. What year are you in in comps I at Waterloo right now. - -12 -00:02:15,660 --> 00:02:18,810 -Ian Ramzy: So right now I'm in my second year. I'm just finishing off second year. - -13 -00:02:18,840 --> 00:02:24,660 -Wes Bos: Okay. Right on what kind of languages What do you even learning in comps i a second year right now. - -14 -00:02:24,900 --> 00:03:21,960 -Ian Ramzy: So this year, I'm taking courses where we're doing some low level stuffs, we're doing a couple of things with hardware and logic gates, still doing some stuff with myths that's kind of like baby compilers. And we're doing a little bit of c++, I believe for some algorithm stuff. But that's it. Prior to that, it's you don't go to Waterloo for what they teach you in like as far as useful programming language like no one's teaching you like JavaScript or react. In our first term, we learned something called Doctor Racket, which is based on scheme. It's functional programming. If you know what that is. It's not exactly super relevant these days, in my opinion, so much time doing Doctor Racket is pretty hellish. I don't think a lot of people liked it. But yeah, we did Dr. racket. And second term we did see in third term. So our second year we did c++, but there's really not a lot of coding outwater like I spend a very small amount of time coding most of it's just doing that really just kind of disappointing. But yeah, it's very theoretical. That's, - -15 -00:03:21,960 --> 00:03:30,539 -Wes Bos: that's really interesting. So the the coding skills that you do have is that just picked up in your spare time. So hacking on stuff like the SIP call project we're going to talk about, - -16 -00:03:30,960 --> 00:03:49,470 -Ian Ramzy: yeah, a lot of it's from I'd say, going to hackathons work with friends on stuff. What's also really nice, though, is that they have a very strong Co Op program, so they help you land internships at companies. Unfortunately, when you work there for four months, you tend to pick up a lot just from working with all these people. So I've had to calm down. That's been really great. That's why I learned a lot of my skills. Oh, yeah. - -17 -00:03:49,680 --> 00:03:56,970 -Scott Tolinski: Yeah. It seems like you have a lot of relevant experience when I was looking at your site. Some interesting companies and work experience there. - -18 -00:03:57,000 --> 00:04:27,120 -Ian Ramzy: Yeah, yeah, I've been lucky I, I work. I first worked at Deloitte for one of these club program. That was awesome. I got to work on a super cool team got to build some machine learning models, a lot of data scraping a little bit react. Pretty, pretty nice tech stock just finished up for once at Accenture where we did a lot of work with blockchain, which I have my opinions about blockchain. But I mean, like a decentralized health platform without so it's pretty neat. I'm very lucky that I haven't had to work with like dotnet, or like PHP or something like that. Yeah. - -19 -00:04:27,600 --> 00:04:46,230 -Wes Bos: It's funny. I'm like, like 10 years out of Co Op right now. So I went to another school in Canada, and we had co ops as well. But the Waterloo kids always got the really good co ops at Accenture and Deloitte and Google and Facebook. We were the ones that took the dotnet. - -20 -00:04:48,080 --> 00:04:57,200 -Ian Ramzy: everything like that. I mean, you'd be surprised most of my friends at Facebook are doing PHP, so it's not all ugly. Oh, yeah. That's true. Well, What school did you do? Did you study - -21 -00:04:57,540 --> 00:05:29,580 -Wes Bos: I went to Ryerson in Toronto, and I do I did a I did the information technology management course, which is now called Business Technology Management. It's a business degree focused on tech. And I majored in forget, I did a lot of Telecom, which is why I when I saw this thing that you built, I immediately was like, Damn, this is cool, because I went to school for this stuff. And it's super complicated. And then I looked at the source code of it. And I was like, this is really not all that out there anymore. It's pretty simple with with webtech. - -22 -00:05:29,880 --> 00:05:31,470 -Ian Ramzy: Oh, yeah, it's extracted with you. - -23 -00:05:32,220 --> 00:05:52,500 -Wes Bos: Alright, so let's get into talking about this. So the website that you built is called zip called.io. Essentially, what it is, is, it's a peer to peer video calling application that uses web tech and allows you to do things like a zoom call, there's a whole bunch of features in it, do you want to like give us a quick rundown of what it is and why you built it? For sure. So - -24 -00:05:52,500 --> 00:08:35,369 -Ian Ramzy: I guess I can kind of start with the why first. And that goes back to when I started doing a lot of this work from home. So I was at Accenture, my last month there and they're like, Alright, you know, I'll come to the office. Everything's starting to shut down from COVID. And I wanted to talk to my friends, I want to call them I was like, Okay, how do I do this? So one of them was like, I you need to download Skype need to sign in as a guide, download Skype, everything on Microsoft account. They're like a phone number. I'm like, Are you kidding me? Like a Sox? Or like, Whatever I do it, I try and call my other friend. He's like, Alright, let's use Discord. It's like, what the heck is like, why do I download all these different platforms, like I just want something that works in the web, that's like, literally just meets my needs. That was the original quote, or something that I can use with my friends. And that's really simple and will will just work. I couldn't find it. So I just started walking around the apartment. I just was like, complaining. My roommate was like, if so annoyed with this, like, why don't you just build it that's like that script maybe? Well, so we kind of had this bet that I he didn't think I could build video calling because I know it's pretty daunting from the surface because a lot of problems need to tackle to make it even just usable. Like you know, Echo reduction, auto scaling video quality stuff. That's not really trivial. Yeah. Well, clearly I want that that so. But yeah, I mean, it really just used for myself, but I wanted something that was browser base. That was number one requirement. Because I grew up my grandmother. And I kind of coined this term I want to call the grandma test. She's 80 years old, doesn't know how to use computer. No way I could get her to download zoom, change the audio input? And oh, wait, I have three, certainly, it's too much. Sounds like what's the simplest thing I could kind of go for. And that would be sending an email, having your click one link that is automatically joins automatically selects the right input automatically skills video does everything that, you know, a sensible video chat should. And that was kind of how it started. And then from there, I think the second kind of important part of it is the peer to peer aspect of things, how there's not this kind of central server that's relaying video between everyone. So if you look at a traditional solution from zoom, or Facebook Messenger, or Google Hangouts, they all have something I'll either use an SF view or an MCU, which is, as a fuse is selected 14 units to get the MCU stands for but essentially, it just acts as a central source where all the data flows into and flows out of. But those are really expensive. If you wanted to build an actual really great solution, you'd have a global cluster of these, they're all very local to users computers, then you can very fast and need to be able to be very performant because they're streaming, you know, high bandwidth video. It's not cheap. And if I built my own version of that, with, you know, the number of users that sip calls getting today, my poor little college budget would have been blown A long time ago, credit card companies would been knocking at my door AWS been like, hello. - -25 -00:08:35,779 --> 00:09:15,649 -Wes Bos: Yeah, because like, like, that's what zoom uses right now. Um, there's some benefits to that, because like I'm recording in the cloud right now, although I, we will talk about that. But the video has to go from my computer, which I'm in the woods in Canada right now, over to zoom, and then zoom needs to relay that over to Scott and to you and things like that. And that gets really, really expensive at the end of the day, if you need to run servers that are sort of in the middle. So the tech behind this is using web RTC, which allows you to connect directly to the person on the call from your computer to their computer, and then there's a direct line from you to them. That's right, right. - -26 -00:09:15,690 --> 00:09:46,620 -Ian Ramzy: Yeah, that's right on. So I use WebRTC. And I tend to people to go through a process that's called an ice candidate exchange, and then majority of the time it will succeed. So the process kind of looks like there's my IP address. There's your IP address. In between us, there's firewalls, there's different internet service providers, there's whatever country restrictions and to get people connected, you have to go through a process that's called NAT traversal. Yeah, that doesn't always succeed, but majority the time it does, and that's essentially how you create a really great peer to peer connection. - -27 -00:09:47,130 --> 00:10:27,390 -Wes Bos: I'm very curious about it because when get user media and WebRTC came out, this was probably seven years ago. I went whole hog on it and I thought this is so cool that you can finally access the webcam like you You were probably like 11 years old when I was trying to do this in Flash. And it was really cool. And then they finally came to the browser where you could access the user's webcam and WebRTC rolled out at the same time. And I tried to build an app, but I hit these roadblocks, which is trying to understand what, like network traversal stun TURN servers, like, do you? Do you know what those are? What are STUN and TURN servers? Like what are they for? - -28 -00:10:27,919 --> 00:10:34,350 -Ian Ramzy: So I'm not gonna claim to be a networking expert. I'm sure you have a lot of those that listen, so I have to be careful with my words. - -29 -00:10:34,470 --> 00:10:38,539 -Wes Bos: I would like go over networking. I don't understand it. So I'm sure very few people do. - -30 -00:10:40,159 --> 00:11:27,960 -Ian Ramzy: Okay, okay. So maybe that's how I see ya net of all this gibberish. But the key players, as you mentioned, are STUN and TURN. So stun is for a process that's called NAT traversal. That's getting people connected pastor firewalls. The problem is that that doesn't always succeed. Like, for instance, I was my friend is working at IBM. And I was at Accenture, two companies that both have like ridiculous security policies, yet, not traversal will never succeed that just because they have like peer to peer connections or strip blocked, at least on company intranet, when that fails need to have some type of backup. And in that case, that's when you use what's called a TURN server. And that's just a very lightweight server that acts as a relay between two candidates. So for that, I use a service, I pay for service with Twilio, it's like 40 cents a gigabyte, I think it's pretty expensive. But Twilio was the fastest one that I could find. And that's kind of why I chose is also very simple. - -31 -00:11:27,990 --> 00:11:45,210 -Wes Bos: So the video, if both of you are behind a firewall where you can't traverse the network and connect these two things, then the TURN server acts as as an in between sort of takes in the video and hot potatoes that over to the other people on the call. Is that right? Yeah, exactly. - -32 -00:11:45,210 --> 00:11:47,039 -Ian Ramzy: It just acts as a simple relay. - -33 -00:11:47,429 --> 00:11:47,970 -Unknown: Oh, that's cool. - -34 -00:11:47,970 --> 00:11:51,990 -Ian Ramzy: It's almost like another person in the call - -35 -00:11:52,020 --> 00:11:52,529 -Wes Bos: yet, - -36 -00:11:52,529 --> 00:11:55,559 -Ian Ramzy: but it never actually decrypt anything, it just kind of passes it along. - -37 -00:11:55,770 --> 00:11:57,090 -Wes Bos: And then what is ice. - -38 -00:11:57,659 --> 00:12:06,330 -Ian Ramzy: So ice gets a little bit more complicated. And I'm by no means an expert on it, I'm just going to give my my kind of chimp level understanding of it. - -39 -00:12:06,390 --> 00:12:09,870 -Scott Tolinski: I think chip level understandings work very well, on this show. - -40 -00:12:09,899 --> 00:12:11,309 -Wes Bos: That's kind of what we aim for, - -41 -00:12:11,399 --> 00:12:54,299 -Ian Ramzy: you know, you roll back the clock enough for all chips, right, some of us know how to click the clock on a keyboard. But the entire internet connectivity establishment, and you have to trade these, they're called ice candidates back and forth. And ice can essentially kind of like a path between two users, the thing is, you have to try it a couple of times to find a path that actually works. And this entire process is pretty complicated, at least when you're first getting started. To do this, you need something that's called a signaling server. Before you can actually establish the call, you both need to connect to some centralized server. For me, it's just some node server that I have deployed on Heroku. And it pretty much just shoots these ice candidates back and forth using the STUN server, and is trying to find a path between the two people. So that's what - -42 -00:12:54,360 --> 00:13:15,539 -Wes Bos: the role of ISIS, ah, that makes a lot of sense, man that you explained it a lot better, because I read, I don't know, 50 articles about it when this first came out. And then in preparation for this podcast, I went back into it. And I still was like, I can't kind of get it. But then there's lots of diagrams with arrows and my eyes start to glaze over. It's, - -43 -00:13:15,570 --> 00:13:50,309 -Ian Ramzy: I think that there's an incredible opportunity for making the whole signaling process of exchanging ice candidates and you know, stun and knock traversal. And all that stuff, I think could be done so much better. Like right now. It's like, eight steps back and forth to start a web RTC call. It's so many steps that I actually use a web socket, to go through that process. Because a web socket in my mind, which is quicker than just constantly sending like, you know, standard, like HTTP requests, when really it should just be like, you know, one and done, I think so it's almost make a service that abstracts that away even better than it is now, at the big fan. Who knows, maybe I'll make it one of these days. Yeah. - -44 -00:13:51,179 --> 00:13:54,450 -Scott Tolinski: Yeah, it's always good to have those ideas sitting in your back pocket. Yeah. So - -45 -00:13:54,450 --> 00:14:46,020 -Wes Bos: another reason why I wanted to have you on on the call was, I went and looked at it, and it's awesome. And it's open source. And I just was kind of just clicking through the code. And I was like, there's no real bundler. Here. It's almost entirely done in vanilla JavaScript. It looks like there's a little bit of jQuery in there, regrettably. And yeah. And then it leans on, unlike browser API's. So it was incredibly easy for I think, pretty much anyone who's listening to this podcast can go ahead and clone this repo and sort of read through the code in, I don't know, four hours or so and see how it works. Because there's not a whole lot of like magic being hidden in NPM, install dependencies at all. It's just I think, probably the biggest one you have is you've got an express server and WebSockets that do the talking between the two people on the call. Is that right? - -46 -00:14:46,350 --> 00:16:08,460 -Ian Ramzy: Yeah, it's I'm very proud of how simple it is. It's a little bit messy now, because a lot of the UI got mixed in with the kind of actual chat logic. Yeah, so I think the actual main JavaScript file commented Run under prettier, which is a file format are things like 900 lines, which is pretty baby, the entire application. Yeah, totally entire back end is like, hundred and 10 lines. So it's, it's small, right? Like you could understand an afternoon, my roommate and figure it out in like an hour or two. And he's by no means a web developer. So if you want to look at it, it's all commented decently well, he'll give me some thoughts, but it's pretty simple understand. And that's kind of when I code. I'm very much a person who likes simple things. Because I think the more complex and convoluted things get, the harder to maintain. People don't understand them. It's harder to parse, it's slower to update. So there's the people that like to do things correctly. And you know, make sure everything is you know, super maintainable, and perfect and beautiful with all these large classes and everything. I'm not that person. I'm not saying I write garbage, but I very much value to get things done as little lines as possible, which has its trade offs. But it's pretty crazy, like the entire pack. And is that is like, like 100 lines. Yeah, and lines. And like 40 of that is just serving static files, which I probably shouldn't be doing. I probably should use like an s3 bucket for that. But yeah, you did - -47 -00:16:08,460 --> 00:16:40,169 -Wes Bos: it. Like that's why I wanted to have you like I saw this like, this is wicked like, like the guy just made this thing and and just did it and like Never mind best practices. And the best way to approach things and all this stuff. Like you literally just made a chat j s started coding scripts source that sucker in. And it works, right. Like there's not a whole lot of Yeah, complicated stuff. And I think for anyone trying to learn or, or see how other people code, I think that's a pretty awesome way to do it. - -48 -00:16:40,260 --> 00:17:07,850 -Ian Ramzy: Yeah, my one regret was that I didn't make the application react, I use jQuery, which I guess is good, because it makes things like making a draggable video element like it's really easy to have. Like, it's great for prototyping and just, we just need a two line fix. It just works. But you kind of have some issues as far as like managing state that get kind of gross. But maybe I'll redo it and react one of these days. But jQuery is great for getting stuff done quickly. - -49 -00:17:08,429 --> 00:17:38,460 -Wes Bos: Like once you've got this done TURN server connections and everything like how do you literally send the data from from one to another. And a lot of my courses we use, get user media, the API for accessing webcam or audio. And then WebRTC is the API for sending data from point to point. It's just an RTC peer connection that allows you to send it and then and then it's simply just setting a video source to a stream object. That's right. - -50 -00:17:38,910 --> 00:18:45,900 -Ian Ramzy: Yeah, it's pretty crazy, you get once you get connected, you create a new pure object, and then you just send that puppy over, and the other person just has to set like some HTML video tag to be that source. It's not bad at all. Just getting just getting that web rtcpeerconnection set up is a little bit annoying. But once it's there, you can just attach whatever you want. Like, right now, it's a call there's a peer connection was one peer connection. But inside that there's a data channel. For the actual video, there's on the data channel for just sending miscellaneous commands, like when use the text chat, send over a channel, or when you turn on captions, you have to tell the other person information about that. And you no longer have a central server to relay messages through, you have to send it via peer to peer that's also done through that channel. It's it's a decently elegant, so you can have multiple data channels between a single connection. Yeah, like right now I'm working on creating another data channel not working, it's done. I'm just kind of refining a couple of things. So you can send files between two people really quickly over peer to peer. And it's the exact same concept just instead of sending a video or like text information nice and binary. Wow, - -51 -00:18:45,990 --> 00:18:58,170 -Wes Bos: that's like one thing that blew my mind. Because I for years, I thought WebRTC is for video, but it's for literally anything, right? Like any data that's converted to a stream can be sent over web RT to see, - -52 -00:18:58,740 --> 00:19:06,750 -Ian Ramzy: to my understanding, yeah, like you can send you can send files over it. So I don't see why you couldn't send anything. The big advantage is the real time aspect of it. It's really great. - -53 -00:19:06,780 --> 00:19:55,020 -Wes Bos: I one app that I use for totally legitimate reasons is web torrent. And web torrent is a JavaScript based torrent client that allows you to stream video as it's being downloaded. And this is awesome, because you could also like I've looked into it once before where I've a video course platform, I pay through the nose for bandwidth for streaming my videos. And a lot of people have said, like you can utilize the people that are watching the video to also upload that to other people who are trying to watch it. And that's how torrents work is torrents. There's no central service where the data lives. It's just between different peers visiting the website. I never did that because I don't think that I want to use my users bandwidth for it. But right now, it blew my mind that you could - -54 -00:19:55,550 --> 00:19:57,990 -Ian Ramzy: do this online video course you think 100 megabits - -55 -00:20:00,659 --> 00:21:40,650 -Wes Bos: Yeah, exactly. Today's sponsor is Stackbit. It's a pretty cool tool to work with your jam stack website, they've coined the term the best way to jam stack. So the sort of a couple interesting things it does with the jam stack is it does inline editing. So Stackbit integrates with your CMS to enable on page editing, no more wasted time searching for the headline within the CMS. And that's actually a big frustration with a lot of CMS is is that like, you see the page? And then you see the CMS but you don't know like, Where do I edit that? And and like, how does it work. So what Stackbit will do is it'll hook up with your existing CMS contentful, Sanity, dado Netlify, forestry, and it'll give you a UI where you can just edit it as if you were on or if you're right on the website, which is pretty cool. They also allow you to do things like preview and share changes before they go live. You can test on different devices and works with Gatsby. So Stackbit was a really cool tool. It works with your existing CMS, it works with your existing jamstack website, which is pretty nifty. We want you to go on over to stackbit.com. Check it out, they've got a whole bunch of different examples that are available to you, this might just be the tool that you need for your next jam stack website. Thanks so much to Stackbit for sponsoring. So I love seeing different things. So web torrent is the client. And then there's a library underneath. And it's implemented in JavaScript where you can just do peer to peer connections really simply, maybe it's not even a library. Maybe it's just art, this RTC connection, - -56 -00:21:40,980 --> 00:22:04,110 -Ian Ramzy: it could be good appears ridiculously powerful. I don't think a lot of people realize that. They can do a lot of really interesting stuff. For instance, like I think zip calls had well over 100,000 users at this point. Really? Yeah, it's pretty nuts blows my mind, a little luck with timing and all that. But in all this is running on a $7 a month Roku server that's less powerful in your iPhone, it is operating at like 20% capacity. - -57 -00:22:04,860 --> 00:22:07,590 -Wes Bos: Man, like how did those hundred thousand people find you? - -58 -00:22:07,860 --> 00:24:30,720 -Ian Ramzy: So I think I started the first place I went to was I went to Reddit and I just kind of blitzed Reddit, I just kind of was like, Alright, whatever. What's the easiest way for me to get this out? I don't have a lot of time, I'm still working full time says that I have to pick the top 20 subreddits. I think this will do well. And I posted it. Half of them got downloaded to nothing because like, stop like self promotion or whatever. Yeah, it wasn't even fully self promo. I just was like, Hey, I mean, this really cool thing to video chat with my friends, check it out, if you want those kind of prints, right said like, I mean, the front of our slash JavaScript. I mean, the front of our slash entrepreneur, made it to the front of art slash WebRTC or slash Roku, like a couple million people. As far as like people who are subscribed to different subreddit saw it for a long time. That was kind of a big first key was I gained maybe 20,000 users in two days from Reddit. Wow. But because I linked on the actual zip code website to GitHub was great is that a lot of people were then converted to go to GitHub and start like, right, nothing has 2000 stars on GitHub. It's pretty crazy. Because most of my friends don't have anything more than five. You know, five is like, oh, wow, you build something awesome. With like five of those, like three of those people, it started with just your friends. Do thousands. It's a good bit more than that. So that allowed me to do from there is I didn't skyrocket into the front page of GitHub. I was the number one. I don't know if you know this, but there's actually a trending page on GitHub that a lot of people check. Yeah. Oh, yeah. Apparently, it also shows up in kind of like that sidebar, when you log in, like, oh, like explore these repositories. That was the number one repo for I think, three days, definitely two days, and I was on the front page for like four or five days. So I got a lot of people that just kind of saw us on GitHub. But I think kind of the important lesson from that is to get to the front of these trending pages. It's not really about velocity, like it's not how quickly you're gaining users, or sorry, it's not how many users you have. Its acceleration. So if you go from 20,000, stars to 40,000 stars, that probably won't get you to the front page of GitHub, or even Reddit, right. But when you go from having three stars to 600 stars, that's a couple order of magnitude increase. And all these search algorithms like Hey, there must be something interesting going on. So this positive feedback loop starts to occur where because you got this quick influx of users, you can push the front page and you get even more users. And then Google works the exact same way, as far as it measures acceleration and change the number of hits, not necessarily just the total number of volume on - -59 -00:24:31,140 --> 00:24:46,950 -Scott Tolinski: your server deal with this immediate influx. Now granted, I would imagine it's not doing a crazy amount of stuff. But did you notice any sort of issues with the influx of users that sudden jump did you have to scale up or anything or was it mostly okay? - -60 -00:24:47,520 --> 00:26:18,900 -Ian Ramzy: So the first day I launched it, which I told my friend was to get 1000 people to use it. If I get 1000 people, I'm a static of doing like, 20,000 in two days, so I beat that by a good bit. I think in one hour, I did like five thousand five or 6000 people, which is, that's a lot for HD video calls. So the server series really two main functions. The first is serving static files, like your CSS, your JavaScript, all that good stuff. Then the other half is that once you have two people sitting in a room, waiting for the call, it acts as a signaling server. So you open up a WebSocket connection from each caller to the Heroku server. And you just pretty much just send data back and forth through about three or four seconds, saying, like, Hey, this is my IP address. Here's some ice candidates, try these out, let me know if they work. That person goes, Hmm, okay, these ice candidates didn't work. You know, here's my web RTC settings, let's try these ones and just go back and forth a couple of times till it works. That's really all the signaling server does that process is pretty quick. And once and this is something I think actually helped out a lot, is once two callers are connected, they disconnect from the server, like completely. So the server doesn't have a notion that these people are on a video call right now. Which is something that really helps if you have 6000 people on the call having 6000, open WebSocket connections, it starts to take a toll. Sure, if you have a large ABS instance, that has a lot of bandwidth to compute, no problem. But yeah, college budget, people are running this on the cheapest Heroku that I could find Roku, for those of you who don't know, is it's just a web hosting platform like AWS, but cheaper and more user friendly. - -61 -00:26:19,020 --> 00:26:20,970 -Scott Tolinski: Yeah, check it out. Definitely more user friendly. - -62 -00:26:21,540 --> 00:27:06,930 -Ian Ramzy: And the big thing that I got lucky with, I'm primarily Python, I would say I prefer Python slightly over JavaScript. But I decided to do the back end and node and express, which ended up being a godsend because of you know, it's event driven architecture, right. Yeah. And it's non blocking IO stuff. If I did this in Python, if all it was was a simple static file server, no way, there was through response times would have been through the roof, it would have been terrible. But because it didn't know, with all that async magic, it actually managed to scale pretty well. I don't think it ever hit more than 70% usage of response time was always under a second. Yeah, pretty crazy, is there's one thing I learned was note is very powerful when it comes to things like this very powerful. - -63 -00:27:07,620 --> 00:27:14,550 -Scott Tolinski: Well, so that's a that's a pretty, pretty sweet lesson. So do you want to talk about some of the features now, Wes, specifically, - -64 -00:27:14,610 --> 00:27:34,320 -Wes Bos: I'm just curious about like the browser bakes and things like echo cancellation. So if you don't have headphones on, and you have a call on the sort of the echo cancellation and that sort of infinite feedback, all of that stuff that's done by the browser. But you also said you have like auto scaling video, does the browser do that as well? - -65 -00:27:34,500 --> 00:27:38,910 -Ian Ramzy: They do that through web RTC. So not quite the browser. But yes, it's through web RTC. - -66 -00:27:39,180 --> 00:27:44,190 -Wes Bos: And how does that work? Like, because web RTC doesn't know about video streams, does it? - -67 -00:27:44,550 --> 00:28:46,980 -Ian Ramzy: Yeah, it does. It's it's ridiculously easy. Like just packet passing a JSON object that's like, auto scale equals true. There's like more more parameters that you can tune. And I spent a lot of time experimenting with them as far as copying max frame rates, copying max bit rate, audio, sampling frequency, all that type of stuff. Yeah. But they picked really sensible defaults. And even I spent like a week experimenting with it, trying to change stuff. They were a lot of things, right? It's kind of funny, I made this entire thing. And I didn't even realize I had echo cancellation or noise background illumination or anything like that. It wasn't until I started learning that as soon as automatically it started turning things off. I was like, oh, wow, like you really need this. Yeah, like, if you don't have echo cancellation, it's totally unusable. And if you don't get rid of that kind of background fuzz, just for people's microphones, where they get it gets introduced the network for whatever call quality sucks. But yeah, it's super accessible. They do a really great job at it. I would say it rivals like a zoom or FaceTime or anything like that, as far as audio quality. - -68 -00:28:47,010 --> 00:29:11,580 -Wes Bos: Yeah, like I remember when this came out, like Skype had spent, like years getting current audio cancellation and all this stuff implemented. And then they just rolled it out in the browser for free. And that's when things like slack and whatever just started adding video calling to their apps like it was no big deal, because they can lean on on using WebRTC abstraction is a beautiful thing. - -69 -00:29:13,980 --> 00:29:42,750 -Ian Ramzy: Think if there's one thing that I hope people can take away from this is I'm some I'm some 19 year old kid who just had an idea. Yeah. And two weeks later, with some googling, and a lot of copying, pasting, made something made decent video chat with 100,000 users. I don't claim to be a genius. I don't claim to be incredible developer. I do think I'm clever, though, as far as my ability to Google. But I think that's all anyone really needs to know. That's just, I don't know, kind of the power of all these libraries, how sophisticated all these things are. - -70 -00:29:42,810 --> 00:29:44,670 -Wes Bos: How long have you been coding then? - -71 -00:29:45,150 --> 00:31:44,490 -Ian Ramzy: So I started in high school. I was first introduced to it in grade 10. Funny story. I took this introductory programming class, we were doing Python, which was a good choice. But I took it because there was this girl that I liked. I thought she was taking the class. Alright, here's the plan, we're gonna sign this class, because if I tried this whole mastermind, classic first day, she's not there. Well, it was not the entire classes guys, like, what the hell I debated, but at this point, it's like, Alright, whatever is gonna stick it out. I start gonna start going through this class. I was lucky for whatever reason, I was did really well in high school, I knew how to check the right boxes. So I was used to, you know, getting like 9798. All those ridiculously inflated numbers at high schools give out these days. That's just really terrible in this class. Like, my first assignment, I think I got a 50 I don't think I saw anything under a 90 before. So I was just like, appalled. I was like, What the heck, I was like, what's a for loop? Like? How do you print something, I couldn't understand this idea of stepping through code instructions. And I don't really know what changed. But I kind of went from getting like 50s all these assignments and doing really terribly just like for loops and printing and like, you know, iterate through, like, like, iterate through anything just for loops, and if statements and just did not click, but I think one day, I just was working on it. It just made sense. Plasma teacher was like, Hey, can I redo all my assignments? He's like, sure, man. better use all my assignments, and actually winning the award for that class, which was pretty interesting. I don't say that to sit to clean up some genius programmer, I claim to say, I say that because it was not all you know, rainbows and sunshine. It was really frustrating for me at the beginning. Totally. Doesn't have to be it's pretty easy to pick up. Sounds great. 10 little Python? Great. 11 a course and we did flash ActionScript, which is you check out all the games I made on my website. It's just Ian ramsey.com. We made a bunch of little stupid flash games. Flash is deprecated. Don't learn flash guy. - -72 -00:31:44,640 --> 00:31:47,070 -Scott Tolinski: Yeah, pretty useless. Do not know right now. - -73 -00:31:48,360 --> 00:32:17,700 -Ian Ramzy: I'll just finish the timeline. Real quick. Great. Follow up to Java went to Waterloo for computer science. First year, we did some racket, a little bit of c++ didn't really learn how to code that much, but learned a lot about like memory and recursion, a lot of fundamentals. Did my first work term did four months at Deloitte, a lot of Python, little machine learnings AWS react JavaScript, went back to school four months, honestly learn nothing new. And in four months, at Accenture, we did some JavaScript blockchain. That's the timeline. Wow. - -74 -00:32:17,729 --> 00:32:59,400 -Scott Tolinski: Yeah. I think that's an definitely useful for our audience to know. Because it is it's, I don't know, like Wes. And I have both interesting trajectories into this stuff as well, I think. And, in general, it's always good to hear how people advance through their careers like this. And your career is still very early, considering you're still a student. So it's amazing to hear. I have a question about the screen sharing aspect of this. So it doesn't seem like it's all that complex is is just basically swapping the media. I mean, is there a whole lot to it other than that is like what what is the process for getting screen sharing, working, because that, to me seems like something that would have been somewhat complex. Considering the ramifications of sharing screens and all that thing. - -75 -00:32:59,760 --> 00:34:48,980 -Ian Ramzy: I am always shocked at how much you can do in the browser, like the fact that I could do picture in picture to me, so you could literally change to a different desktop, and still have like a UI element that floats on top of the flute and video, I couldn't believe I had that much control as a JavaScript developer. And same thing as screen sharing. It's not bad, you just call one line, you save it to an object and then you just have to swap it in with a new video feed swapping it with the new video feed. Took me a little bit of googling to figure out how to do that properly. But no, it's pretty damn easy. hardest part about it, I would say other than the swapping streams kind of dynamically in the chat. Because before when I would do this was a really naive approach is that essentially end of the pier connection, so and the comb, then create a new call. With that screen sharing video with I learned how to fix that. The hardest problem about all this is just cross browser compatibility. Some stuff works in one browser doesn't work in another when you using all these experimental things like web RTC. It's not super well supported. Yeah. You know, getting screen sharing all this stuff. They use a library called adopter dot j. s. Beautiful library. I have no clue what it does. I just know that it works. And it just makes web RTC work like 50% better. We just slap that bad boy in there. It will make your calls. Like literally get display media, it'll I think it will override them with whatever the browser specific version is. It'll do things like that. Because before when I made zip call, it was not working on safari whatsoever. I had no clue how to get working on safari, I spent like days trying to, you know, read the console logs. Like why is this failing? That's failing yet. And I couldn't figure it out, because it's the exact same code that worked perfectly on Chrome. And this is when you know, there wasn't all these fancy features. So it just was the most basic video chat, like two or 300 lines and chat.js the client JavaScript, but I just included adapter j s one day, I was like, Oh, sweet. We got iOS support. Now we got we got Safari support on desktop. - -76 -00:34:48,980 --> 00:34:50,690 -Wes Bos: So it does work on mobile now. - -77 -00:34:51,330 --> 00:35:07,320 -Ian Ramzy: Oh, yeah. Pretty well fully supported on Android as long as you like your browsers like up to date. So if it was Chrome, no problems if use iOS only caveat is you have to use Safari, because Apple will block web RTC that isn't in the native iOS browser. - -78 -00:35:08,280 --> 00:35:08,850 -Wes Bos: Oh, yeah. - -79 -00:35:08,880 --> 00:35:21,380 -Ian Ramzy: Yeah. But those are pretty reasonable restrictions for most users. Most people on iPhone, I have the statistics to back it up. Use Safari, Chrome, most people are starting to Android most people use Chrome. So support is pretty good. I - -80 -00:35:21,380 --> 00:35:43,130 -Wes Bos: wonder if the reason why they do that is because they don't want people making like apps in JavaScript to like sort of rival FaceTime. That's sort of why I thought they never they didn't do it for the longest time is that they wanted to get a hold on FaceTime first before they let everybody go willy nilly make their own web RTC zip call. - -81 -00:35:43,670 --> 00:36:09,030 -Ian Ramzy: Yeah, I think you're right. I think that's exactly their play. There's also other things like you can't have more than one or two videos. autoplaying I believe. Like, it's it's a real pain, pain in the bum to get that. Yeah. So you have to have your own video facing yourself. You're the person that's like play buttons and stuff that you have to hide. They do not make it easy, as opposed to on Android. It just worked flawlessly. Whatever worked on Chrome desktop worked on Chrome. - -82 -00:36:10,020 --> 00:36:13,830 -Wes Bos: Yeah, I think all of that is intentional on their end. - -83 -00:36:14,610 --> 00:36:55,050 -Ian Ramzy: I think there's also an argument for there's some security issues with web RTC. At least there used to be, I'm not a security researcher. But if you use it nefariously, you can figure out people's IP address. And I think Apple's a very privacy. Yeah, company. So maybe that's another kind of angle, but I don't know, you have captions. How does that work? captions are probably my favorite, most useless feature, the other person. So let's say I'm going to call with my friend, Joe. If I want to see captions of what Joe is saying, Joe has to be running Chrome, which is seems a little bit weird and convoluted. Explain why I said I did it like this. So I use the built in browser text speech. It's - -84 -00:36:55,440 --> 00:36:57,440 -Wes Bos: speech synthesis. I used it the other day. - -85 -00:36:58,190 --> 00:37:01,610 -Ian Ramzy: Yeah. Built into Chrome. I don't think it's built into other browsers. - -86 -00:37:02,100 --> 00:37:02,850 -Wes Bos: Firefox now. - -87 -00:37:02,850 --> 00:37:04,590 -Ian Ramzy: I was in Firefox. Oh, - -88 -00:37:04,650 --> 00:37:07,880 -Wes Bos: I don't know that. Yeah, I used it the other day in Firefox. I was surprised it was in there. - -89 -00:37:08,630 --> 00:38:07,080 -Ian Ramzy: Okay, well, maybe we'll have to make that work on Firefox. Right now I blocked in I just say that a person needs to use Chrome. But do some really nice stuff. But pretty much I run that on the person who's calling, and I send it over the data connection via that peer to peer data channel has talked about earlier, where you send your text chats through, I also send captions through that. The reason why I do that is because if you run text to speech on the input, as you're receiving it, text to speech adds a delay of half a second to to one second, right. So by the time those captions appear in your reading along, it's too slow, it's too delayed, it's really hard to keep up. But if you run that speech recognition on the other person's computer, and then you send it over as text out of the text, it will send much quicker than the video data will, the captions will actually arrive pretty much in real time as compared to the audio source. In fact, sometimes the captions will be the video and audio. So it's, it's quite a nice experience. I think that was the right way to do things. Yeah, captions are. They're pretty freaky. - -90 -00:38:07,130 --> 00:38:08,610 -Wes Bos: That's cool. It's pretty cool. - -91 -00:38:08,670 --> 00:38:12,960 -Ian Ramzy: I also made real time translation for that to like, auto detect language. - -92 -00:38:15,170 --> 00:38:15,690 -Unknown: If you want, - -93 -00:38:15,860 --> 00:38:29,550 -Scott Tolinski: it's amazing how much was crammed into this thing, considering how simple Yeah, how, how easy to parse all of this. This code is I mean, it's like you mentioned, Wes, it's not a lot of code here. And it's amazing how many features exist in this totally. - -94 -00:38:29,820 --> 00:38:40,980 -Wes Bos: One thing I should correct myself. It's not in Firefox, speech synthesis, which is text to speech is but the other way around, which is speech to tax is not in Firefox yet. - -95 -00:38:41,630 --> 00:38:46,290 -Ian Ramzy: I think it's called the web Speech API. That's what I use in Chrome. - -96 -00:38:46,560 --> 00:38:52,530 -Wes Bos: It's really simple to use as well. It's just new speech recognition. If you're looking for the API in your console. - -97 -00:38:54,210 --> 00:39:06,710 -Ian Ramzy: You gotta love JavaScript. User media dot get display. Yeah. New speech recognition. It's beautiful. Yeah. Or is it like, you know, trying to add two strings together and see how good luck with that? Yes, - -98 -00:39:06,710 --> 00:39:15,380 -Scott Tolinski: I have a fun question here. The loading animation that you have when you're waiting for people to connect. It's really nice. Did you is that did you make that? Or was that like, - -99 -00:39:15,650 --> 00:39:26,760 -Ian Ramzy: I found a GIF on the internet because people were telling me they weren't sure what's going on? The applications are like I need a loader. loader just and then I just spent like 10 minutes in Photoshop, removing the background. Awesome. - -100 -00:39:26,790 --> 00:39:27,360 -Unknown: Yeah. No, that - -101 -00:39:27,360 --> 00:39:35,690 -Scott Tolinski: was really nice touch. I thought it was a I don't know. It almost had like a lot of personality to it. So Bravo for picking something interesting there. - -102 -00:39:36,710 --> 00:39:39,540 -Wes Bos: Did you think Did you design this thing? It looks awesome. - -103 -00:39:39,980 --> 00:40:03,570 -Ian Ramzy: So this is something I got a little bit of criticism on Reddit, because I probably should have made this more open. But the actual landing pages I've been designed myself I use I forget the the artists name but they make really great templates. But yeah, the landing page didn't really I didn't make myself. I use premade components. Yeah, but the actual UI for the chat I made from scratch. You can look at all the Nasty CSS and jQuery. It's all there. That's cool. - -104 -00:40:03,900 --> 00:41:31,800 -Scott Tolinski: This episode is sponsored by our good friends over at Sentry, and I'm talking sentry.io. Now, Sentry is the perfect place to see all of the errors and exceptions that your application faces all at once in a nice, cataloged way for you to be able to tackle these issues. Now one of the coolest things that I like about Sentry is the fact that I can create a GitHub issue directly from my application on Sentry, I just click a link to GitHub issue and I can create an issue it links directly to Sentry, everybody can go ahead and see exactly what the error is you can link directly to the Sentry error itself, you can choose the assignee directly from there, if I want to give it to you, an employee or another developer and say, Hey, this is right up your alley, I can assign it directly from Sentry, I don't have to pop back and forth between GitHub and Sentry whenever I encounter an issue. And then once that issue is complete, I can go ahead and click resolved within Sentry. And if that error pops back up again, you know what it's going to do, it's going to tell me that there was a regression and that I need to fix it. So I love tools like this, it really helps me understand exactly what's happening within my application. And if you want to try out Sentry yourself, head over to sentry.io use the coupon code tasty treat all lowercase all one word, and you're going to get two whole months for free. So check it out. That's more than enough time to experience just how cool Sentry is and just how nice it is for your application. There is a reason why so many important popular companies trust their errors and exceptions with Sentry - -105 -00:41:32,100 --> 00:41:41,310 -Wes Bos: recording. Have you looked into any of the recording API's that exists out there? I've only done it with audio before. But is it possible to do that with video as well? - -106 -00:41:41,820 --> 00:42:09,110 -Ian Ramzy: Yeah, I saw libraries called record RTC. Yeah, I haven't experimented with it. I'd love to build it in. But to be entirely honest, I really don't have the time these days. Yeah. As far as school is kind of kicking my ass right now I have to find my next internship. That's another requirement of kind of my school program. I don't have as much time as I'd like to spend on devcon, that's for sure. But it's totally doable. If someone wants to like, make a button and make a PR for that. I'll prove that like so fast. - -107 -00:42:09,710 --> 00:42:47,420 -Wes Bos: That would be it'd be really cool. I'm just looking at this record RTC, and it does screen recording and everything but Safari, which is unreal if you think about it, because now you can like Scott and I are both professional screen recorders in our jobs. We make tutorials. So like, imagine you could make a browser based screen recorder, much like figma is a browser based design app. I think parts of Da Vinci. No, I don't know if that's true. DaVinci Resolve is available on Windows, Mac and Linux. And I was thinking like, maybe they're using web tech behind there to make that work. - -108 -00:42:47,420 --> 00:43:18,210 -Ian Ramzy: Well, applications are getting, they're getting very sophisticated. I remember there used to be a point in my life where I would look for a desktop app. When I was younger. I was like, I wish there's a Google Drive app. Yeah, cuz to me, it'd be faster. And it would like there's something faster opening an app or like, I used to use the Spotify app on my MacBook, or the notion app like, okay, now, I do everything in the browser. I live there, except for like my ID in Terminal, I have very few desktop applications. Web is really the future. - -109 -00:43:18,480 --> 00:43:35,730 -Wes Bos: It's funny, you say that Id in Terminal, both my ID in Terminal, our desktop apps, air quotes here, but they're both built in web tech, which is just something about having something in your dock, making it feel like a real app. But like you said, it's all it's all web tech on underneath, which is cool. - -110 -00:43:36,210 --> 00:45:22,800 -Ian Ramzy: It's so fast to develop, even with how quickly you know, the chrome V engine has progressed, the application themselves are also very performant now sky's the limit. I get these emails every day. And I know you you teach a lot of people how to code which I think is so awesome. That's something I think I'll probably do later in life. Yes, I get all these emails like, wow, you're 19 you've worked all these places. How did you learn to code? Oh my god, you go to Waterloo. How'd you do this? How did you that? Yeah. You don't need any of that. I'll tell you what you need. The first thing is just need to Google right? Yeah, that's like level one. Level Two is find yourself just a nice online video course. Could be a great one from Wes. It could be something you didn't mean by go it yourself a good web developer course. Or whatever course you want to do just pick a project something you want to make for me it was video call I want to make video calling. And then just build it. Make sure you ship because once you make something and you build something, it is so addictive and it is so energizing like wow, I made this and you showed off to your friends like it the first time I showed said call someone in the call actually connected. I was talking to my friend in the US I was like, No way as like as it I just couldn't stop laughing. So you got to get that aha moment really quickly. I am not special. I'm not some genius. I just can't do well. And I hope that you hear this story as far as the success of zip call. And you can do it maybe there's nothing I want to say. And again, I really don't mean this, to flex but Last month, I've probably had people offer me over a million dollars in seed capital investments. So literally, I was having venture firms every day calling me reaching out in San Francisco and New York being like, Hey, we want to give you $300,000 think this commercial product, hey, drop out of school, come come live here and come do this. This was just the most ridiculous thing ever. Because I was like, it's just a side project - -111 -00:45:22,890 --> 00:45:28,770 -Wes Bos: 3000 lines of JavaScript that you threw together and just people offering you hand over fist money. - -112 -00:45:28,800 --> 00:46:00,270 -Ian Ramzy: Oh, there's like acquisition talks and stuff like this. It really made me realize a lot of these, you know, crazy Silicon Valley founders. They're no smarter than us. Hmm. They got lucky. I got lucky in the sense that Sure, yeah. I mean, a great product had a great UI, it served its the core functionalities, it did a really great job at, but also had really great product market fit. People were fed up with zoom security issues. Were there. Yeah, people want something in the browser, everyone was desperately for video calling. And I just launched it the perfect time, I gained a lot of users really quickly. - -113 -00:46:01,500 --> 00:46:53,790 -Wes Bos: There's a lot of luck in that. You know, totally, I love that. Like, if anything, it's a lot like my my story where one of the first things that I did was when WebRTC came out and get using media is I figured out how to detect the face on it, which is trivial now. But back in the day, it was much harder using a library, and I overlaid glasses on it. And the people are like, wow, how did you figure that out? That your must be so smart, like, no, I literally am just hacking stuff together. And then from that, I got conference talks and like to my website, and people loved it. And it's just like, I literally just had this idea and went out and did it. It wasn't beautiful. The code was awful. But I just went out and did it. And I think that that's such a good thing to tell people who are in the code. And here's just another perfect example. - -114 -00:46:54,060 --> 00:47:30,720 -Ian Ramzy: Yeah, there's there's something just so mysterious about software engineering, computer science program, what do you I sit there and I write ones and zeros all day, and in a dark room. That's not at all happens. You know what I do? My friends at Facebook and Google do something doesn't work. The copy paste doesn't work into Google, we figured out fix it. People say why the code we wrote wasn't good change a little more, and they push it and get paid a lot of money to do it. It's not the most complex thing in the world. And there's a little bit of a learning curve, but it's very accessible these days, with all my learning, like, I wish more people would get in software engineering, I think that would be a net benefit for the world. - -115 -00:47:31,110 --> 00:47:59,520 -Wes Bos: I totally agree with you there. We see it a lot. Like I used to teach at a boot camp and you see people being like, wow, like, you must be really good at math. We must be really special and like no literally just kept chugging at it. And then you see these people five, six years later, and you look at them like Wow, you really grown and it's honestly just putting in the work for sure. Let's move over to some sick pics. Sick pics is the section of the show where we pick things that are sick. Do you have anything you'd like to sick pick? Yeah, - -116 -00:47:59,550 --> 00:48:43,500 -Ian Ramzy: so I'm going to talk about notion notion. So a lot of people have heard of it, they recently raised a new round of capital, I think they're valued at $2 billion. But there are a Silicon Valley startup and they're building really, really great notetaking slash organizational app. It's kind of like a markdown editor, if any of you have written markdown before, like a GitHub README or something like that, but it's like abstracted away and it's really really elegant. Like you can just type notes even like slash h3 and I'll put in an h3 heavier slash h1 and it's all in the cloud and it's just designed so beautifully. You can embed stuff you can embed PDFs it's it's what I use for pretty much all my notes these days. I don't have a notes off of my phone anymore. Yeah notion I think it's pretty awesome. - -117 -00:48:44,550 --> 00:49:08,190 -Wes Bos: We use notion to do this podcast some I'm looking at it right now with all of our notes things that we want to talk about to you and we we do all of our sponsors in notion we all of our calendars, all of our sick pics. Everything is is in motion. It's just awesome. And awesome. Happy. Yeah, yeah, it's it's really cool. Plus, it's it's all in web tech, right under the hood. It's just HTML, CSS and JavaScript. - -118 -00:49:08,879 --> 00:49:12,090 -Ian Ramzy: Yeah, tried to get a job at notion but apparently don't hire interns. - -119 -00:49:12,090 --> 00:49:22,800 -Wes Bos: Oh, really? Well, if maybe somebody that's there's a quite a few people listen to this podcast. So maybe somebody will want you to be an intern after hearing this. - -120 -00:49:23,430 --> 00:49:24,390 -Unknown: You know, obviously, - -121 -00:49:26,070 --> 00:50:51,930 -Wes Bos: I'm going to sick pick some hardware stuff. So we did Scott and I did a show on a smart home and things like this. And we talked about these sawn off switches where it's it's a really cheap like a $5 Wi Fi switch, and you have to code in your own you have to put in your own cord and everything like that. And I love it. And I was recently looking for something to cheaply, make my garage door smart. And my dad I was just talking my dad and he did it as well. And and there's These really cheap Wi Fi modules that will open and close or inch. Interesting. It's electronics. It's not really my wheelhouse, but I know enough to be dangerous. So you can go on Amazon you can find for 15 2025 bucks, you can find these little modules that you can power by USB or you can power it by the one I got either does seven to 32 volts AC or DC, which is amazing. So so many different situations, you can plug this thing in. And I'm going to hook up my garage doors to it and open and close it. So my dad did it. And it worked really easy. The app is called the IUI. Link, ew e li nk, some random Chinese app, which is probably great to pump pipe all of your information through but I specifically hook it up to Google Home and it works great. - -122 -00:50:52,530 --> 00:50:59,760 -Ian Ramzy: It's cool. A lot of integration stuff. I can just imagine, like installing that in your garage. And are you married? - -123 -00:50:59,790 --> 00:51:01,650 -Wes Bos: Yeah. Yeah, married three kids. - -124 -00:51:02,100 --> 00:51:06,270 -Ian Ramzy: Okay, just opening and closing the garage without them knowing they'll be freaking out like, - -125 -00:51:06,450 --> 00:51:09,990 -Unknown: oh my god. There's like What's wrong? Honey, I'm in vacation I'm in. - -126 -00:51:09,990 --> 00:51:16,290 -Ian Ramzy: I'm in the Caribbean, the Chrome store will start opening closed. There's a lot of nefarious things - -127 -00:51:16,320 --> 00:51:29,160 -Wes Bos: I do we actually do that with my kids, I tell them to say Abracadabra. And then when they say it, I push the button on my phone and it turns the light on and it just blows their mind as to how that works. They think it's really cool. - -128 -00:51:30,810 --> 00:53:23,610 -Scott Tolinski: Yeah, so I'll link it. I know, I didn't say what the name of it is, because it's just this random circuit board with Wi Fi chips on it. But I'll link it up in the show notes. I have a sick pick for you today. And this is going to be a YouTube channel which I have a lot of YouTube channel picks and a lot of podcast picks, which I'll have more. But I have a YouTube channel pic for a huge channel that I've been watching a lot of they don't put out a ton of ton of content because their videos are quite a bit involved. And it's not a topic that I've ever been interested in. Let me tell you this I I do play video games. But I'm not a gamer. You know, I play video games. But I'm not a gamer. And this channel is summoning a salt. Now summoning salt is a channel that documents the history of speedrunning in various video games. And what's so fascinating about this specifically is that it's not about the person. I mean, sometimes it is yes about the person who is the best at the video game. But in some situations like Mario Brothers, there's all these interesting glitches that are programming glitches within the application. And like if you land on a certain sub pixel between here and there, something goes wrong with the math and you can glitch through one walls shaving off, you know, point one milliseconds off your time, therefore giving you a new world record. It's an absolutely fascinating look. And these videos are not short. For instance, the latest one they just released was on Ninja Gaiden. And it was 44 minutes long. And it was good. It was very good. And he does these all in a very excellent documentary format. There's the one about punch out that I found to be excellent as well. And just so many of these are absolutely fascinating. I've been watching this YouTube channel for a little bit. And like I said, I've never been into speed running before. And I find these to be just so entertaining and so interesting, especially from a web developer or developer perspective. So check it out summoning salt on YouTube. - -129 -00:53:24,270 --> 00:53:28,470 -Wes Bos: Shameless plugs, do you have anything you'd like to shamelessly plug to the audience? - -130 -00:53:29,100 --> 00:54:02,250 -Ian Ramzy: I mean, obviously, zip code.io if you want free, decentralized browsing, it doesn't track you. It's fast and just works in the browser. Check it out, open up a GitHub issue. If you don't like something. Let me know what you think. And if you want to see more stuff for me, if you want to see all my crappy coding projects, you know, I'm really not that smart. Ian ramsey.com is my personal portfolio. I N ra zy.com. Have some interesting stuff there. And they don't talk to me shoot me an email, got some ideas, always down chat. - -131 -00:54:02,730 --> 00:54:11,220 -Wes Bos: Well, thank you so much for coming on the show that was very enjoyable to dig into it. Hopefully the audience will enjoy it as well. And that's it. Thanks again. - -132 -00:54:11,520 --> 00:54:12,570 -Ian Ramzy: First. Thanks for having me on. - -133 -00:54:14,700 --> 00:54:24,480 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax257.srt b/transcripts/Syntax257.srt deleted file mode 100644 index 9ea6c24df..000000000 --- a/transcripts/Syntax257.srt +++ /dev/null @@ -1,200 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Taylor. Totally in ski. - -2 -00:00:25,950 --> 00:00:53,159 -Scott Tolinski: Oh, welcome to syntax. In this Monday hasty treat, we're gonna be talking about Linux. Now, I recently have acquired a Linux laptop as a coding machine. And we're going to be giving you a rundown of what it is why I did it and a little bit of information about some of the pros and cons of running Linux in these types of environments. Now, my name is Scott Tolinksi. I'm a developer from Denver, Colorado, and with me, as always, is the Wes Bos, how you doing? - -3 -00:00:53,610 --> 00:00:55,710 -Wes Bos: I'm doing pretty good. How about you - -4 -00:00:55,979 --> 00:01:53,400 -Scott Tolinski: doing good. This episode is sponsored by Log Rocket. Now Log Rocket is the place where you can see your errors happen and watching a horror as your entire website gets flipped upside down. And you can actually figure out how to solve them. Because Log Rocket gives you a session replay, which is a scrubbable video that includes an error log a network requests tab, it gives you your Redux store. And it works with just about every single platform you could possibly imagine. It's very cool. And one of those things you're going to want to see to believe. So head over to Log rocket.com forward slash syntax, and you will get 14 days for free. So thank you to Log Rocket for sponsoring. So let's get into it. What's up with the Linux what's up with my laptop? Why did I get it what is going on here? If you've been listening to the show, for any given amount of time, you will have known my laptop seems to have a lot of issues. I've had a MacBook Pro 15 inch before they - -5 -00:01:53,460 --> 00:01:54,990 -Wes Bos: have had some bad luck, - -6 -00:01:54,990 --> 00:02:43,890 -Scott Tolinski: bad luck. For instance, when I took it into the Apple Store, the apple tech who is like after it gotten shipped off, it broke my screen, apparently. And then in an attempt to hide their folly, just like put my computer on a shelf somewhere or something like seriously, that's actually what happened. And because of that they had a laptop for like two and a half, three weeks, which eventually led to me getting a couple of pairs of EarPods for free because Apple felt very bad about it. So they hooked us up. Then, when I finally got my computer back, there was like another issue. I took my computer and I mentioned that I was apprehensive about shipping it off because of what happened last time. They said don't worry, everything's gonna be fine. I get my computer back and then like kernel panics immediately, only to find out that they installed the wrong logic board onto my machine. - -7 -00:02:43,890 --> 00:02:46,200 -Wes Bos: No way at that point. I - -8 -00:02:46,200 --> 00:04:03,420 -Scott Tolinski: said, because they were just like, Okay, well, we'll ship it out. Again, I said no, give me a new computer. They they gave me a new computer, which was nice, because it was a newer model. But I eventually upgraded to the 16 inch and gave that 15 inch to my dad. So I have a 16 inch. And from day one, it had light leak coming in from the bottom left, the left speaker was buzzing from day one. And then eventually my keyboard stopped working. So at that point, I was like, Okay, well, you know, I'll get it shipped back. And I'll get those things taken care of. Yeah, luckily, this time they took care of in three days, it was very nice. I got my computer back in three days. So I was just thinking, you know what, maybe I'm a little too hard on my computers. Like I'm taking this thing everywhere people see it precariously placed on a piece of exercise machine in my gym or something. I make people really nervous. So, you know, I don't know if there was like sand or dust got under the keyboard or something, you know, that happens because we're kind of in like, pavers create a lot of dust, I noticed a lot of doeskin on the computer when I'm outside. So who knows, maybe I'm just taking this thing and I'm being a little too rough on it. But you know, the end of the day, it should be able to handle it. So I just decided, you know, I can't I can't have my entire business be on this machine, and then not be able to take it places or do things on it or code, right? - -9 -00:04:03,450 --> 00:04:04,320 -Wes Bos: Yeah, I like - -10 -00:04:04,320 --> 00:05:10,820 -Scott Tolinski: to code in all sorts of places. Like I was coding on the floor, and my dad was just like, why is your computer on the floor? You have kids? I was just like long. I'm sitting on the floor encoding like what am I supposed to do here? So I've decided that this expensive computer needs to say on the desk and I purchased a system 76 laptop after numerous recommendations from people I trust about system 76 if you have never heard of them, they're a company out of Denver, Colorado. So that made me feel good to be able to purchase something locally. They make a lot of really interesting machines. Now I don't believe they design or create the shell of the laptop themselves. But they do assemble it they do you know do a lot of really interesting things with their computer including having their own OS which is a version of Ubuntu called pop OS. So I'm running pop os 20.04 and I purchased the lemur pro which is an ultra portable so It's a bit smaller. It's a 14 inch screen. And it weighs just about nothing like it's MacBook Air territory but maybe even lighter because it's the materials are not as heavy overall, - -11 -00:05:10,860 --> 00:05:14,510 -Wes Bos: is it like plastic or what? Like a polycarbonate? - -12 -00:05:14,730 --> 00:05:32,130 -Scott Tolinski: Yeah, I don't know if it is a plastic because it feels part of it do feel like mental? Let me see. It says it's at 2.2 pounds. So it weighs just about nothing. I don't know what exactly what it's made out of. But it does feel not like plastic, it doesn't feel cheap plastic, it feels definitely like, - -13 -00:05:32,790 --> 00:05:35,910 -Wes Bos: it's probably like a really sturdy polycarbonate. - -14 -00:05:36,180 --> 00:05:57,090 -Scott Tolinski: Yeah, probably something like that I should, I should definitely look that up. So this thing is, is pretty neat. One of the cool things is that the screen actually folds all the way down instead of stopping in a whatever angle that Apple determines that you would like to have that because, you know I like to have the hinge at 180 degrees sometimes. And it actually has been very nice to be able to have that hinge I missed that feature. When I open up my MacBook Pro. - -15 -00:05:57,780 --> 00:05:58,920 -Wes Bos: That seems really cool. - -16 -00:05:59,340 --> 00:06:17,490 -Scott Tolinski: It is, like I said it's a 14 inch the screen is matte, which is nice for coding outside, it has HDMI, USB three USB C, another USB three port, micro SD card, or headphone, it has all the parts that Apple doesn't want to give you. And for the most part, - -17 -00:06:17,520 --> 00:06:18,840 -Wes Bos: how much was this thing, - -18 -00:06:19,050 --> 00:07:23,700 -Scott Tolinski: after I loaded it up, it was probably like just about under two grand, it could have been like based back, it's like starts at like 900 bucks, maybe, okay, it started pretty cheap. You know, I'm using this as my code code machine, you know, wasn't gonna be like a backup computer, it's not just gonna sit on the shelf. In fact, I i've been primarily coding on this thing for a little bit now. I've wanted to get used to it, I want to you know, get the feel for it. So I definitely been been working full time on it. I think I upgraded the CPU. So it's got a 4.9 gigahertz I seven processor with a, you know, four cores, I only went 16 gigs of RAM, which is might have been a bad decision. But unlike an apple computer, you could actually upgrade the RAM yourself. Which is beautiful. Yeah, I got a faster, right hard drive on it. So I definitely upped it a little bit to get some of the higher up specs. And I also purchased the three year warranty. So it could have been it could have been much cheaper than I made it. But you know what, it's a code machine, I'm gonna be working hard on it. So it's definitely worth it for me to have something like this. - -19 -00:07:23,730 --> 00:07:30,120 -Wes Bos: Yeah, if we know anything about scotton laptops, you probably will have six of these things by the time that three year warranty is up. - -20 -00:07:30,390 --> 00:07:57,420 -Scott Tolinski: And it's crazy, because it's not like I am not doing anything explicitly hard on the computer. Like I'm not I'm not tossing it around. I'm very kind to my hardware, but I do take it places, you know, I it moves around with me and I move around a lot. So in that respect, I guess it does get jostled and whatever if I'm working at a coffee shop or something like that, but I'm not I'm not explicit. I'm not. I'm not spilling I'm not dropping in. I'm not doing those kinds of things. So who knows? - -21 -00:07:57,870 --> 00:08:08,670 -Wes Bos: Did you look at just buying like a really high end DELL LAPTOP and throwing Linux on that? Or did you hear such nice things about these system 76 ones that you just went for that - -22 -00:08:09,020 --> 00:11:36,090 -Scott Tolinski: I heard a lot of nice things. And again, it's local, I have some people that I trust a lot of who's just been saying really nice things that they're just like a boutique, smaller shop, you know, they they really put a lot of effort into it. And not only that, but they're like distro with pop OS is a little bit more geared towards my sensibilities. Now, granted, obviously, you can put a distro on any DELL LAPTOP. But no, I just wanted to support this company. I thought they're really they do really nice stuff. And for the most part, these computers are really nicely made. So yeah, I've just heard nothing but good things. And they they do a lot of they have a whole bunch of different computers for different sensibilities. So I picked the smallest cheapest one and went from there. So Linux pop OS. Now pop OS is his new boon to based distribution. I, to be honest, I've been watching all sorts of videos on YouTube about Linux distributions, because people like you know, talk about the distros. And what does this base you know, and I don't really know that much. I've ran mint before, which is another boon to based one that's also a little bit nicer. I like this pop OS specifically, you have the option to get was just straight up a boon to because it gives you a bunch of sensible defaults that make the Linux life a little bit easier. It's funny, because sometimes people talk about like, Oh, yeah, you know, like anybody could run Linux. But let me tell you after having this thing for a couple of weeks now, no, no, there's just so many things I have to do on the command line still, that if I didn't know how to use the command line, like I would be dead in the water with this machine. I'll tell you that right now. Specifically, just because Linux is just not a polished experience the way that Mac OS and Linux people might not agree with that. But it's missing a lot of things in you know, needing to run command line man is technical as Courtney is, man. If she had this computer she'd be she'd be toast. I'll tell you that. So Linux is still definitely not the same, but I was very Happy to see them just about everything I use in my daily life I could use on this thing. For instance, I run figma in figma works perfect down here. In fact, what I did is I logged into figma via the web, and then I saved it to the dock. Because I have a Mac OS style dock on here. I saved it to the dock as a progressive web app, pop it open, and it feels and looks exactly like the desktop version of figma on my MacBook Pro, so that's been really nice. It's amazing. Same thing with vs. Code. VS code feels amazing on here. DaVinci Resolve for video editing, zoom, brave, I use brave Firefox that all feels like exactly normal. Unfortunately, can't run ScreenFlow which, if I'm being entirely honest, hardly runs on my MacBook Pro because it crashes every day. take it seriously, that app crashes more than any other application I've ever used, and never crashes for me. Which dude, it seems like you always have such a dude hard up time with these apps. No. Okay, so like ScreenFlow is like the only app on my computer that crashes. And just about every single time I open it, it's like we recovered your project. And like, Okay, thanks. And I don't know if it's because I'm recording like multiple video streams at once and doing a little bit more intense stuff. But like, we can do this experiment after the show. But I have a guaranteed method to make ScreenFlow crash every time. If you have the timeline running. And while the timeline is running, you click More than once along a different spot in the playhead. It will crash guaranteed every time and I promise you yours will too. - -23 -00:11:36,600 --> 00:11:49,410 -Wes Bos: I definitely have my gripes about ScreenFlow like if I have my 4k video and a video coming up my webcam and then I'm trying to play that back at two X. It like gets out of sync Oh yeah. - -24 -00:11:49,470 --> 00:11:50,100 -Scott Tolinski: It's just like - -25 -00:11:50,100 --> 00:12:04,530 -Wes Bos: lags behind. And then if you're like six minutes in, it's like a full three or four seconds behind, which is really frustrating. I really hope someone makes something better than ScreenFlow. I know there's tons of other options out there. I've definitely looked at them don't no need to tell me what they are. - -26 -00:12:04,530 --> 00:12:05,400 -Unknown: Right now. - -27 -00:12:05,400 --> 00:12:24,210 -Wes Bos: It doesn't seem that like ScreenFlow the company behind it really cares all that much. It seems like they're more catering if you look at a lot of their training material. It seems like they're more catering towards like newbies, and like people who are making slideshows and things like that rather than actual screen casters. - -28 -00:12:25,230 --> 00:13:03,270 -Scott Tolinski: Totally, in fact, like, I wouldn't even run ScreenFlow but it is probably the fastest video editing platform in terms of like, Alright, you record multiple streams, you can set up these actions to animate between states. And it is very easy for doing some like really advanced stuff that would be definitely a pain in the butt in DaVinci, or something like that. But Da Vinci is a better editing experience, but not necessarily as turnkey and is easy to edit fast. So a lot of the apps I'm able to run, somebody asked me if I was bummed out about not being able to run sketch. And the answer is no, I don't care about memory in this sketch because I use figma now and big fan. - -29 -00:13:03,510 --> 00:13:21,120 -Wes Bos: That's the dream that it's built on web technologies. So that you like that's, that's a silly thing about sketches that you can't even use it on Windows, let alone Linux, right. Yeah, totally. And it's amazing that you can just you can use a lot of these apps cross platform and the experience is still the same. - -30 -00:13:21,540 --> 00:13:32,670 -Scott Tolinski: It's crazy is that they haven't even I mean, it's however many years later and they still haven't like budged on that. As far as I know. They haven't moved into like, Okay, well, no, we'll did they're just like now. Now we're cool. No, I - -31 -00:13:32,670 --> 00:13:33,630 -Wes Bos: don't think they care. - -32 -00:13:33,720 --> 00:15:25,080 -Scott Tolinski: Yeah. Which is okay, you do you but I think framer and figma are going to eat their lunch. So Oh, yeah. Well, we'll see where they're at in a couple years. So how has Linux been really for me? Well, I'm missing a couple things. I'm missing trackpad gestures, man. I love my big trackpad. So much so that I have the Magic Trackpad. I love that big trackpad being able to do multi finger gestures and stuff. So I'm definitely missing that on Linux. The trackpad is nice on this thing and not to say that it's a nice the two finger scrolling all that stuff works very well. I don't get any of the gestures that I have. Somebody linked me to a package that allows you to do stuff but I have a hard time believing it's going to be as good as the Mac iteration of it. In addition, I you know, there there is some instability things with some weird UI stuff. Like for instance, I went to open up the fonts panel in the fonts panel, just like wouldn't open up and I was just like, Okay, well, I guess I'm not working with my fonts today. So you know, at the end of the day, it's it's still not as polished of experience, but coding wise, okay, I got up and running. I got my stuff installed. I got my VS code going. And I did a little settings sync between VS code Mac and VS code Linux and I tweak some of the keyboard shortcuts and after some time to set it up, I could pop open one computer pop up in the other computer, go back and forth between Linux and Macs. Yes, Linux and Mac and just really like and really feel comfortable even with the keyboard shortcuts and everything. going from one to the other, and everything feels very nice. So in that aspect of things coating wise, it's a fantastic machine. And I've been really happy with it. Now the battery of this thing is killer, too. I've gotten up to like 20 hours of battery and as few as like eight hours, but it's really amazing to see that your battery's at 50%. And click that little battery icon. It says you saw the eight hours of battery? Oh, oh, okay, cool. - -33 -00:15:25,530 --> 00:15:46,530 -Wes Bos: Have you tried running like node processes and seeing what the battery is because like, my Mac, my MacBook will run for like seven days, if I'm not actually doing any work. And then as soon as I spin up a node process, it's the file watchers is what really drains it, then I've got like an hour, an hour and a half, pretty much, almost nothing. - -34 -00:15:47,010 --> 00:17:34,340 -Scott Tolinski: So yes, I have for the most part found it to be much longer of a battery life great running the same things. But I think it's just because of the system itself, or the battery itself. I'm not exactly sure. But no, I am I'm running. I'm running a node process. Meteor on it right now. Same thing, I run on my other one, and it worked. The battery's still really good. So some really nice things about this, we're okay. With command line experience, I've been able to get a doc that looks the exact same as the Mac Doc, I've been able to get essentially Alfred, which is exactly Alfred to navigate through my system, same keyboard shortcut. So I have a doc, I have Alfred, I have my code, and I have my browsers. So between all of that, once your keyboard shortcuts are there, which trust me is a bit of an adjustment period. I hate using control for everything. So also, like Chrome doesn't let you change keyboard shortcuts for some reason, like come on. Firefox has an extension, they'll let you do it. And I'm just sort of gonna set up like a system wide one to make the Alt key basically control on Linux, because that way, it's in the same place as the Command key and whatever. Yeah, that's been the biggest thing is the keyboard shortcuts, for me have not been a lot of fun to use. But for the most part, once things are set up with, like I said, the doc and Alfred and getting a feel for customizing things, having a nice little clipboard manager. It's all been very nice in terms of like having a shared experience between the two. I know some people said that they just bought a MacBook or a MacBook Air for the same purpose because they can't handle the context switching. Now I get that but like, once everything's all set up, the context switching is pretty minimal. And again, I'm only using this thing for code. So I don't have to worry about too many of the other multimedia things on here. - -35 -00:17:34,890 --> 00:17:44,250 -Wes Bos: What about like synching your VS code plugins and everything? That's something I've never looked into. So I only have one machine? Yeah. Does VS code do that? Or do you have something? - -36 -00:17:44,640 --> 00:18:42,630 -Scott Tolinski: So VS code just launched, I don't know if it's in the normal version, but it's in the nightly they launched a settings sync. And the settings sync is built into VS code now. And that works really well. But what I started using is a dozen sync extensions, which is like obviously, the one of the big things you'd want it to write. So I set up a extension package. It's a set of use a sink, which has 1.6 million downloads. And what it does is that, oh, wow, you log into GitHub, and it creates a gist of your settings, your extensions, and then on the other machine, you just pull from that, like a you just Well, I mean, you just run a command palette thing to say, all right, seeing my settings, and then it brings it all in, you can say like pull down or push up or whatever. And so if I install a plugin on my Mac, and I wanted on my Linux, all I have to say is push up, then pull down, and it's all synced. So it wasn't too bad. The only thing I don't want to think is keyboard shortcuts, because the keys are different on this thing. Oh, yeah. - -37 -00:18:42,660 --> 00:19:01,230 -Wes Bos: Yeah, that's, that's the really frustrating thing is the keyboard switching, I find that like, I was on Windows for a while. And I finally just switch them to be like what I'm used to. Yeah, it's a silly thing. But if you have to stop and think about copy, paste, oh, yeah. Every time Yeah, that's enough to make someone stop. - -38 -00:19:01,500 --> 00:19:24,750 -Scott Tolinski: There was a big thing for me was being able to get the keyboard shortcuts to be the same. Once the keyboard shortcuts were the same. I started feeling way more comfortable on this thing. The only one, like I said, that isn't the same as Chrome, which is killing me that I have to use Ctrl the copy on brave, but I guess it's you know, chromium based? Like, why can you change the keyboard shortcuts on that now? Like, why not wait, - -39 -00:19:24,779 --> 00:19:29,090 -Wes Bos: Chrome has their own keyboard shortcuts? Like it's not a system wide thing? - -40 -00:19:29,130 --> 00:19:38,090 -Scott Tolinski: I think they use the system wide ones. But like in every other app, like in VS code, you can change, copy and paste in VS - -41 -00:19:38,100 --> 00:19:42,110 -Wes Bos: code. Oh, but you can't change it like at a OS level. - -42 -00:19:42,540 --> 00:20:57,080 -Scott Tolinski: I think there's like a keyboard remapper that you can do here and I have changed it at a OS level. But I think Chrome is like overriding it or something. I don't know. I started looking reading. And somebody said well, you have to use this keyboard, remember, okay, gotta use a keyboard. remapper Okay, you know not excited about that. But that's just how it is. I think there there are definitely some things and it's, it's not a polished as a polished of experience. But I think Papa Wes is the most polished version of Linux that I've used. There's this pop Oasis store, which is sort of like the Mac App Store where everything's free. You click to install things. It's a nicer experience than than most things like VS code, you install it through the pop store, or whatever. And it just works. So it's very nice to click a button and click Install. It's not all done through the command line, the way you have to do that apt get whatever, you know, I'm not a not command line newbie here. I'm great at the command line. And I think if if I wasn't, I would be dead in the water. I can't say that enough. But for the most part, the laptop is nice. The OS is nice. And I've had a great experience with it. So I'm a big fan. I'm going to continue to use this as a code machine. happy with the purchase happy that I have this thing to take to the gym and precariously set my glute ham developer and continue to do that. - -43 -00:20:57,450 --> 00:21:03,630 -Wes Bos: Awesome. You need to get one of those two Shiba toughbooks. Which, yes, like the cops have in their cars. - -44 -00:21:03,660 --> 00:21:09,210 -Scott Tolinski: Yes, right. Yeah, the things that weigh 1000 pounds in there. Yeah. lined with Kevlar and whatever. I think - -45 -00:21:09,210 --> 00:21:26,790 -Wes Bos: this one looks really nice for exactly what you're talking about. It's it's super light, it seems really durable. You can bring it wherever you want. It's a nice, powerful machine. That's pretty cool. I think if I ever came across a laptop like that, I'd throw Linux on it just to see what it's like if you've got me interested now. - -46 -00:21:27,080 --> 00:21:44,600 -Scott Tolinski: It's nice to run Linux two in the way that you know, all your servers run Linux, you're used to it. It's good to get experience with Linux. It makes me feel like a lead hacker. You know, they people say that. Yeah. For the most part. Yeah, I know. It's been cool. It's been fun. It's been a nice little nerdy tech experience for me, so I'm feeling good about it. - -47 -00:21:44,910 --> 00:21:55,590 -Wes Bos: Awesome. Well, thanks for sharing that. If you've got any tips of your own. Make sure you tweet us at syntax FM. We'd love to hear what if you use Linux full time and what machine you ended up going north. - -48 -00:21:55,800 --> 00:22:01,590 -Scott Tolinski: Again, if I said something stupid, please let us know. We'll retweet you and let our audience know that I said something stupid. - -49 -00:22:01,830 --> 00:22:05,790 -Wes Bos: Thanks for tuning in and we will catch you on Wednesday. Please take - -50 -00:22:07,770 --> 00:22:17,550 -Scott Tolinski: care head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax258.srt b/transcripts/Syntax258.srt deleted file mode 100644 index b7108b0f5..000000000 --- a/transcripts/Syntax258.srt +++ /dev/null @@ -1,248 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,530 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and Wes Bos - -2 -00:00:10,590 --> 00:00:49,350 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there today we've got a fundamentals episode for you. So in the past, we've done episodes on JavaScript fundamentals, server side fundamentals, CSS, HTML and CSS fundamentals. And then Today, we're gonna be covering sort of the rest of the stuff the leftovers, things like bash and terminal fundamentals, text editor fundamentals, regex, OS basics, googling, navigating GitHub, these are just things you should know, as a developer, you're sort of base skills when you're learning in this sort of getting into web development now with me as always, this Mr. Scott Tolinksi. How you doing today, Scott? - -3 -00:00:49,560 --> 00:02:20,280 -Scott Tolinski: Oh, you know, I'm doing okay, I routed it. My phone. Oh, man, we're my jailbroken. So to say my, yeah, my iOS device, you and I had had discussions about this about maybe potentially not being worth it being a big hassle about me soft breaking just about every android phone I've ever owned. When the jailbreak came out for 13.5, I went for it. And it was very easy, very easy, went nice and quick. And now I have a bunch of Android features that I missed. It's very nice. Like one of the cool little things I did with it is I fixed the face on luck, because on Android face on lock works. Where that if you hold the face up, it automatically does the swipe up thing for you and just takes you right to your homescreen Oh, do you use an iOS device? You know, it's one extra swipe. And it always annoyed me so much. Because the the Pixel phone just did a little bit nicer. And it was so fast and easy. And so that's one of the little little tweaks I added. It just takes me right to the homescreen. Now I need to go do that extra swipe up motion. Why don't you do that? So I've been working on my phone a lot. And when did this come out? Oh, very recently. And dude, it is. Oh, I'm excited about that. Yeah, I installed some plugin into Apple Mail. I clicked a button, I clicked another button, I installed an app. And next thing you know, I have access to hundreds of tweaks and I get a whole new icon set and it looks entirely different device and you know me, I'm missing my Android. So like, being able to add some of those features back really has improved the experience. For me, it seems a little ridiculous, but I've been limited. That's great. I'm gonna - -4 -00:02:20,310 --> 00:02:37,050 -Wes Bos: do that as well. I have an old iPhone here that I run jailbreak on and it's not my daily driver. But just a couple little things. I've played around with it for a while and there hadn't been a jailbreak for a while, as far as I can tell. This is one of the jailbreaks where if you reboot it, you have to do it again. - -5 -00:02:37,470 --> 00:02:59,850 -Scott Tolinski: No, no, I've rebooted it's been fine. It's been rock solid, man, I haven't had any issues whatsoever. So not to say I won't considering I just did this. But you know, it's so good that Fingers crossed, everything's been fine. And again, it's on the latest OS. So I didn't lose any cloud functionality or any of my backup stuff, or everything's worked fine. I haven't had a single app. Tell me It can't work. - -6 -00:03:00,060 --> 00:03:16,860 -Wes Bos: That's great. Awesome. Well, today, we are sponsored by two awesome companies. First one is Sanity, which is your structured content, CMS, and Sentry, which is your error and exception tracking. We'll talk about them partway through this episode. Let's get on into it. You want to grab the first fundamental there? - -7 -00:03:17,250 --> 00:04:58,500 -Scott Tolinski: Yeah, so the first fundamental is to simply get better at typing. Believe it or not, we work in an industry where typing is a very important skill. And it's funny that some people never take the time to improve their typing skills. I remember one of the very first things that Courtney and I did when we first started beating mind that no my wife and I met each other at work. We took a like a programming test against each other for some meta programming. She's going to program our typing test against each other just for fun, and I absolutely thought I was going to crush her because I'm like I do programming stuff on the computer all day. I'm gonna type like crazy man, she's good at typing that is for sure. Never underestimate just how good your typing skills can be. I would like to know if there's any I mean, if you just Google typing online, there's like a ton of different sites that will will teach you typing I learned from Mario teaches typing, which is a fantastic that was in the late 90s or early 90s sorry, not late 90s where Mario did not complete the level unless you typed correctly. I've pasted in one called key br.com which looks like it's pretty good at least to telling you where to keep your hands how to get basic skills typing and learning skills trust me they're they're well worth investing in that time. I'm very curious now if I'm a fast typer or not, should we pause and take a one minute typing test to see how many words per minute we are we should do that. Okay, so go to typing test Comm. Are we doing text or sentences? Or words? Let's just do one minute text one minute text. Okay, ready? Go. Oh, no. Ah. - -8 -00:04:59,340 --> 00:05:01,110 -Oh man. That was brutal. - -9 -00:05:03,330 --> 00:05:24,900 -That was hard. That was hard. Let's see how many words per minute did you do? I don't know if I did very good. I'm on my key cron K, K one. I'm blaming it on the keyboard. It's the classic. My controller came unplugged argument here. My typing speed was 52 wpm with three errors and an adjusted speed of 49. WP. - -10 -00:05:24,930 --> 00:05:35,610 -Wes Bos: Oh, so I did 60 Wow. But you killed me. 16 errors Dino 45. Oh, man, look at me a little bit more accurate. - -11 -00:05:35,730 --> 00:05:48,810 -Unknown: I was just flying thinking like it was more about the getting the words done. But I didn't realize. I don't know. Like, honestly, I feel like I'm faster when I'm typing what I'm thinking but kind of interesting. I don't I don't know if that's very good or not, - -12 -00:05:48,870 --> 00:06:02,040 -Scott Tolinski: I have no idea. And sure enough, that test probably says, who knows about your programming skills. Because part of the reason why I'm faster programming is I can do letter letter, tap letter letter, tap letter letter, tap, you know, whatever to get my Yeah, completion going - -13 -00:06:02,460 --> 00:06:25,950 -Wes Bos: in, like you think, Oh, it's funny. But even like, I've taught boot camps and a lot in the past. And one of the big things we see is like, do people have keyboard skills because you just can't keep up. And I think that goes for a lot of kids too, who don't necessarily spend time on keyboards anymore, because they're spending all their time on iPads. Like, we don't know what the future of programming will look like. But I certainly think it's a good skill to have. It's - -14 -00:06:25,950 --> 00:07:08,100 -Scott Tolinski: one of these that we play this game on the jackbox with AI parents, I've talked about this before we play it like during quarantine here. We've been doing playing this game and one of the games, there's like a typing game. But since you're all on your mobile devices, yeah, doing basically a typing test on mobile devices. And one of the things that I've learned is that when you type with the autocorrection, at least for me, like I use a swipe keyboard, yeah, yeah, me too. But I use a different keyboard. Yeah. And it remembers your work. So I'm almost like just tapping the auto suggestions over and over and over again. Rather than that, that's how I type fast on the iPhone. Okay, so let's get into the the next one, which is bash and terminal skills, because these are skills will really, really go a long ways. - -15 -00:07:08,429 --> 00:07:52,860 -Unknown: Absolutely. You don't need to be a like a terminal master like those hacker movies. But there's a couple like sort of basic things you should do is, is where am I in the terminal. So you know that your computer has a directory structure. And you can move among that directory structure with simple commands. And we're not going to list them all here. But just being able to create folders, move into folders, rename folders, delete folders, I would say there's probably like 10, or 15 different commands, those are all the ones that you need to know in order to sort of move around whatever terminal you're using, whether that's on on OSX, using the built in terminal on Windows was really popular now is Ws L which is Windows subsystem Linux, - -16 -00:07:52,860 --> 00:08:17,850 -Wes Bos: I would go as far to say like people who are learning terminal on Windows don't even go and don't even learn bash, which is the terminal on Windows, because windows now gives you a Linux like terminal on Windows. And that will match anyone who's on OSX that will match anyone who's on Linux that will match you SSH into a server, - -17 -00:08:17,850 --> 00:09:20,279 -Scott Tolinski: you'll be able to do your very basics there. And likewise, I have the message here that we should probably learn how to SSH. SSH is one of those skills that I found myself using all the time whether it's SSH into my NAS drive or SSH into a digitalocean server, or whatever SSH thing allows you to basically jump into the terminal of a another computer somewhere else and other server somewhere else and utilize your command line skills in an entirely different server that way, you don't have to always be relying on visual interfaces to get things done. I had to do that the other day, I was trying to adjust something on my router and there was no UI for it. The solution is you just SSH into it. With the Linux box. At the end of the day. You find the setting you want I tweaked it rebooted the thing right from the terminal and you get out and I was like man, what a great skill to have as in if you don't know x. I guess Scott just said SSH allows you to log into another computer via the command line. Yeah. And I just you know, - -18 -00:09:20,279 --> 00:09:41,730 -here's a little pro tip for those of you who have a have a NAS drive. If you're moving things around, like let's say you're moving files around within your NASS drive, SSH into your drive and using the MV to move things is way endlessly faster than using something like find really it's like it's like 10 times faster. It is endlessly faster. - -19 -00:09:41,730 --> 00:10:02,010 -Wow, that's a hot tip right there. I saw you tweet about that. Did you end up using our sink to move files or what I ended up doing was just connecting directly via Ethernet and then making sure that connection was specifically the Ethernet established connection and that went Ended up being faster than arcing. - -20 -00:10:02,010 --> 00:11:05,370 -Wes Bos: Oh awesome. Other things you should know is very basic vim skills. Because if you're on a server, you SSH into a server, you need to edit a file, there's sort of like two ways to do it, you can either go and grab a GUI program like cyberduck, or transmit or file Zilla, and that will allow you to visually traverse directory structures. And then you could find your file right click open in. And what that does is it actually downloads a local copy and then re uploads that every single time they make a change. That's great. In a lot of use cases, I do that when I need to, like use my editor like VS code, but I want to edit the file live on the server. But often you're in there, you just need to like change a dot end file, like you need to configure an environmental variable. And if that's the case, you have to use the built in editors, which is usually vi vim, or what's the other one nano is on your server, and you don't need to know how to use a whole lot, just enough to edit a file, move around, paste, save the file and quit. - -21 -00:11:05,580 --> 00:11:18,120 -Scott Tolinski: Yeah, right. Exactly. Because there's so many times where that's the fastest method like, oh, you're in this server or whatever, you have to change this thing. Well, how do I do it? Well, okay, just pop into vim V, whatever, change it get out. - -22 -00:11:18,450 --> 00:11:46,470 -Wes Bos: Exactly. And it's, it's pretty simple. Just it just understanding that there are different modes, there's insert mode, and Is that what it's called? vim has six modes, normal visual insert, command, line, select, and execute, or EAX. So I only know normal insert mode, and how to get in and out of those two different ones I did years ago, I use vim for a few months, I knew a lot more, but I've since forgotten at all. - -23 -00:11:46,799 --> 00:12:36,990 -Scott Tolinski: The next one will be knowing about z, sh, and or fish or using something like oh, my z, sh with your z, sh. Now, these are some tools that you're going to see a lot of people on maybe YouTube or coding videos that you're watching, you're going to maybe look at their command line and say, hey, why is their command line look all fancy, maybe has some interesting colors or emoticons or additional information about GitHub repositories. And these types of tools, I personally have been using Omi csh, I was using fish before but I moved back to Omi csh. With z sh, these types of tools can really enhance your experience, just by giving you more information. There's all sorts of amazing plugins to either add auto completion or all kinds of things to your command line to just make you feel a little bit more supercharged. - -24 -00:12:37,260 --> 00:14:19,020 -Wes Bos: This is not something that you should wait on doing. It may seem like it's only for advanced users to pimp out their shell. But I always tell my beginners to do it. Because the command line is very confusing. Often the colors are are weird, the fonts are small, you don't know where you are. And if you can just make it look a little bit nicer. And get that nice prompt telling you where you are and what the status of your Git repo is, then it makes the terminal a lot less scary. And I have a free course command line power user calm, which is basically my answer to how do you get that cool terminal? And what are you doing to move around so quickly? Yeah, all right. Next up, we have text editors, there's an endless amount of sort of tricks and things you can do in a text editor. But the very basics, you should get comfortable with the command palette. So most text editors will have a keyboard shortcut that you can hit. And that will bring down a list of different commands. And not every command in your editor will be available via right click or via the context menus. So what you have to do is you have to look for that. And also it's much faster. So pop down the Command palette and sort of search for the thing that you want. And also, while you're doing that, the most text editors will also tell you what the keyboard shortcut is for that. So take a moment to like, look up this keyboard shortcut for that people always ask me like, Hey, what's like, how do you know them? Remember these keyboard shortcuts? Or how do you know what they are? And um, it literally says in the command palette beside the thing that you want to do and just like look it up. And there's a time you'll remember. Yeah, there's it's true, - -25 -00:14:19,470 --> 00:16:05,970 -Scott Tolinski: right? There's search, use that search, find the thing you want to learn, pick it and just make sure you stick to it. And don't be afraid to change them either. Sometimes people like totally well, they'll get to a keyboard shortcut, and they'll be like, I'm never gonna remember that. Eight keys I have to press to do this thing. Well, if it's a thing you need to do often I remap all kinds of keyboard shortcuts whether or not for me, I even hooked up the like fast console log plugin to use Command L. What is command l? I actually don't even remember what command l was originally. But for me, command l now does a console log with a label on it. Hey, that's nice. If I want to do removing the line, it's Command Shift l okay. Moving line Command Shift L. Again, I don't even remember what these basic ones were. But these are things that I do all the time and your brain is going to work differently than the author of the software's brain or maybe the whatever popular vim keyboard shortcuts packages, right. But at the end of the day, these are your keyboard shortcuts. And it doesn't really matter if you set them up the way you want them, it sounds like you can't take that stuff with you. So I really configure mine pretty heavily. Another really cool thing is I use this click through to source UI, we use so many imported files nowadays in JavaScript, right? Whether it's a react plugin, or you know, a file that references another file that imports another file, if you hold down on Mac, if you hold down the command key, and you hover your mouse over a given variable or value, it tells you where that variable value is defined by just simply clicking on it. And if it's in another file, it will even open up that other file and take you right to the definition. I use this all the time. There's also a go to definition command. But I honestly for some reason, my mouse habits die hard for me. So - -26 -00:16:06,330 --> 00:17:22,470 -Wes Bos: yeah, the click through to me is is much more used than that go to command or go to selector go to symbol, they call it clutch. I think that is a huge one. Because like one of the hardest things when you're first learning to program, it's like, How do I know where to edit this thing? Or how do I know where to look what this function does. And of course, you can search it, but sometimes you search it and you find every instance of where it's used. So like clicking through, it will then just bring up the definition right for you. That's a good one. Yeah, very true. Multiple cursors is a huge time saver. Just being able to hold down whatever key it is and click through the multiple cursors how to assign multiple cursors via the keyboard. On VS code. Its command Ll Actually, it's funny that you said command l because command l selects the line, I think, unless I had remapped that, and then Command Shift, l will put a cursor on each line. And one little hot tip I have with that is if you have things in your clipboard like if you have seven things in your clipboard, and then you have seven cursors on your editor and you paste them it's not going to paste the seven things seven times. It's going to paste the first thing on the first cursor The second thing on the second cursor and that that superpower People always ask me about that one. Yes, - -27 -00:17:22,470 --> 00:17:28,100 -Unknown: multiple cursors. One of my favorite was a textmate. Was that the old one? Yeah, that was the first one that - -28 -00:17:28,100 --> 00:18:37,070 -Scott Tolinski: text me Devon, one of my favorite things about moving to textmate. When I finally did that, I was like, oh, wow, what have I been? What have I been doing, there's also being able to do the Find and Replace effectively, in addition to finding replacing across files, it both of these are skills in they might seem very basic on the surface, right, find replace, but there's all sorts of additional things that you can add, whether it's matching the case, whether it's replacing the case, or preserving the case, as in, if you every time you see the word dolphin, you want to replace it with parakeet, whether that's capital P, or lowercase p or whatever, you want to be able to make sure that you can find all lowercase versions, all uppercase versions, all ones that are either just a single word or part of another word. And being able to use those skills effectively is very important. And not to mention, this will go along with another one. But there's some regex patterns that you can use to that will make you a really good Find and Replace master. But that's that's kind of getting a little bit maybe into a little bit pro pro skill territory for finding replace, but just being able to really navigate whether a whole word part of word, those type of things in Find and Replace will make you a much better navigator throughout your programs. - -29 -00:18:37,229 --> 00:19:19,100 -Wes Bos: Speaking of regex, you don't need to be a regex master no to know fundamentals, but you should know what they are and how to find the one that you need. So a large portion of my career was basically just asking people, how do I match this specific thing? How do I match an email address? How do I match your phone number? How do I match the character or d dash and then any number of characters and numbers between four and six long? So just things like that being able to know that when you need to match something that is not exactly there in JavaScript, meaning you don't have the tools available to you then regex is often a good use case for that. - -30 -00:19:19,140 --> 00:19:24,480 -Unknown: Yeah, right. And I like this site regex one Were you the one who recommended this before - -31 -00:19:24,480 --> 00:22:24,450 -Scott Tolinski: I recommended the regex expert Okay, and I recommended a regex one to one. In the time between we said that now I found this regex one.com in regex one has a really good interactive tutorial that honestly gives you just enough, right it doesn't I don't think its goal is to make you into a regex master. But in my opinion, I went through this little tutorial just for fun to see what it did. And it was pretty great the basic skills that you want, you know how to how to select specific tech strings and all the things that will make you a more effective regex or I swear regex is the one technology that is very difficult for me to learn every single time I have regex book and I swear, I can't tell you what page 12 says, because I fall asleep at page number 11, every single time I try to read, it just cannot keep my attention when learning regex. So any interactive tutorials make it much nicer. So if you're learning regex, this is a sponsored transition. By the way, if you're learning regex, you're probably gonna write some code that breaks while you're learning it. And you're gonna want to make sure you keep track of all of those errors and exceptions. And to do that, you're probably going to be using one of our sponsors, and that is sentry@sentry.io. Now Sentry is the error and Exception Handling tool. That is really, it's our tool that we use over here at syntax, I personally have been using Sentry myself for a long time highly recommend it, it's definitely a service that keeps my business up and running, because it allows to do some really great things. Besides just keeping track of all of your bugs, you can set up alerts, you can attach those bugs to specific releases to track regressions easily, I have my API and my friend on two separate deploys here so I can keep them separate. And if an issue pops up with either of them. For instance, I'm looking at one right now, here's the issue that has popped up a couple of times here. And I can see very clearly, it's attached to my source map. And I can see that this is an error specifically on one of my mutations files. And it is it looks like it's a bug that we introduced somewhere recently here. So what I can do is I can click this link GitHub issue, I can have it create an issue for us in GitHub directly. And then I can go attach it to myself, to let everybody know that, hey, I'm going to be fixing this problem. Now that I have a little bit more idea of what's going on here. So this is some of the key ways that I use sentry.io. In my own personal business, you're gonna head to sentry.io, use the coupon code at tastytrade, all lowercase, all one word, and you are going to get to two months for free@sentry.io. tasty treat. Okay, let's keep it rolling. Here, we have so many of these things. Next step is going to be the operating system of basics, because hey, we spend a lot of our time in these operating systems. And it's funny just how many people aren't comfortable doing a lot of intermediate things within their operating system, things that maybe, you know, General users will never need to do. So what are what are some of these key skills that you think you need to have within your operating system was, - -32 -00:22:24,450 --> 00:23:19,200 -Wes Bos: I think switching windows switching through multiple instance of a window, if you have one app, you want to switch to your browser, if you have multiple tabs open, if you have multiple versions of that window, just being able to quickly cycle and switch through those via the keyboard, the amount of times I see people who drag the window out of the way to find the window that is underneath, and then drag it back over, it drives me crazy. Seeing that because it's it's so inefficient. And you think like, Ah, it's not a big deal. But like, if you spend five seconds moving a window, you do that every, every couple of minutes, that adds up really, really quickly. So just knowing what the keyboard shortcuts are just switch between apps to switch between multiple windows of a single app. So if you've got two windows of Chrome open, and then also, if you've got five or six different tabs open, how do you switch to the third tab without having to click it or cycle through them. - -33 -00:23:19,440 --> 00:24:23,130 -Scott Tolinski: If you use Mac OS, you're missing a key feature that I think makes it really easy to navigate through some of your windows that both Linux and Windows have, which is the ability to quickly and easily snap windows to various positions, whether that's full screen or top or left or right. You know, I have a lot of there's like a ton of the utilities. To do this, I use one called spectacle I believe, and I have some keyboard shortcut setup. If I'm in a window, and I want it to snap to the half of the screen on the left, I just hold option and hit the left arrow. And likewise, if I wanted to snap to the other side, I hit option and go to the right. If I want it to be in a perfect 16 by nine ratio for recording, I hit option r for recording. You know it's like little things like this that can make your life so much easier hands never leave the keyboard, your windows just snap exactly where you want them to be. It looks like there's a couple of new tools out here for this. I haven't used either of these, but one is called tiles. One's called magnet, they look like they're pretty neat. And they're all trying to emulate sort of the behavior that exists in Windows, this needed to get baked in the Mac OS like five years ago, - -34 -00:24:23,280 --> 00:25:12,540 -Wes Bos: totally I'm I'm so surprised that it doesn't exist yet. I use a combination of Karabiner which remaps my Caps Lock key to be a hyper key, which is I should just do that. The hyper key presses shift control option and command at once because like you have four modifier keys, shift control option command, and then you can make modifiers based on any combos of those but there's unlikely any keyboard shortcuts that are pressing all four of those plus R or something. So hyper key will remap capslock to that and then you can like things like hyper R or so I have hyper all the arrows will snap my windows up and down and Karabiner remaps it and then I use better touch tool to snap them and move them from monitor to monitor. That's what - -35 -00:25:12,540 --> 00:25:36,420 -Scott Tolinski: used is better, better touch tool. Maybe four or five years ago, I tried them all. And this was like the best one at the time. And I still like it. And it's just, I don't want to like switch. It works just fine for me. I'm sure there's other good ones out there. Yeah. But that's just kind of what I settled on then. And it's working. So don't mess with it. I think the reason why I like mine so much is because I can get the snap to 16 by nine really quickly. - -36 -00:25:36,420 --> 00:25:36,930 -Unknown: Yeah, - -37 -00:25:36,930 --> 00:26:36,180 -Wes Bos: any of them else that have that then yeah, I'm not exactly super thrilled with mine. I'm not sure if bettertouchtool has that. I think we should get that guy who made better touch tool on the podcast, because he's just like that just always it's he just built this MAC app, and has millions of features. And like, I'm always curious, like, first of all, how do you keep building this thing and not get burnt out? And second of all, how do you like it works with the Magic Mouse, the touch bar and the trackpad, and keyboard shortcuts and Siri remote and gestures? Like there's so many features in here. And like, whenever a new OS comes out, like how do you test it all? Gosh, there's just so much to edit. I'm so many questions I have, it gives my major anxiety totally, totally like, this thing is it's so low level too. And also, like, if there's an issue with like, the trackpad driver, like you don't you can't just tweet out is anyone having trouble with the trackpad driver cuz like, Yeah, really one of the very few people in the world that makes this. - -38 -00:26:38,010 --> 00:26:43,440 -Unknown: So it kind of interesting. Those are well worth your time to learn. - -39 -00:26:43,710 --> 00:26:44,370 -Definitely. - -40 -00:26:46,440 --> 00:26:53,520 -unzipping files, it's one thing we see a lot on Windows is that when you, I don't know if this is still true or not. But - -41 -00:26:53,520 --> 00:27:29,100 -Wes Bos: if you have like a folder, and you unzip it, it like makes a double folder, like if you have like a zip file called Wes. And then inside that you have a folder called West, then it gives you two folders. And that was a huge source of confusion when I was teaching, because you'd have double folder levels, and then the files wouldn't be where people would expect them. File organization. We've talked about this on the podcast before. So I won't talk about that. But just being like having good file hygiene, I talk about a lot, being able to know where the files are on your computer where you should put them a place for everything and everything in its place. Yeah, - -42 -00:27:29,789 --> 00:27:30,300 -Scott Tolinski: totally. - -43 -00:27:30,539 --> 00:27:57,090 -You know, what I should add on here is using like the like Alfred type tools, I know there's one that exists for Linux, I don't know what exists like this for Windows. But Alfred is is an essential tool for me for at least Mac OS to be able to quickly open Yeah, applications and set up workflows and do all sorts of things. It's definitely a key component of my workflow, especially because it it does so many things like allowing you just take your hands off of the mouse and use the keyboard specifically - -44 -00:27:57,630 --> 00:28:31,740 -Wes Bos: searching for files. One thing that I hate on OSX is the Finder. If you want to search for a file rough, it never works. Like I remember being able to search for like Star dot txt on Windows and that little dog would wag his tail and look for it. And that was like probably like 15 years ago, and it still is not as good on OSX. And there are a couple of tricks you can do in the search where you can add multiple modifiers and search by type or search in files. But it's not apparent how that works. So spending some time figuring that out as well worth - -45 -00:28:32,009 --> 00:28:47,010 -Scott Tolinski: it. Yeah, I have like some saved filter searches. Like I have one that just gives me all of the most all of the ScreenFlow files on my computer, and then sorts them by newest to oldest. So that way if I'm ever looking for a ScreenFlow file specifically, I don't have to go pawing through everything. - -46 -00:28:47,039 --> 00:29:12,090 -Wes Bos: Oh, that's a great idea. Yeah, it's it's been nuts. Let's switch to the next one, which is googling how to Google? Well, it seems like a funny thing to do. But often my wife will ask me like, Can you just Google this? Because I can't find what I'm looking for. And then I'll start googling and she was laughs she's like, you're so good at googling. There are some some things you can do to become a better Googler? Like, what are some of your tricks? - -47 -00:29:12,660 --> 00:30:58,350 -Scott Tolinski: It's a skill that is a practice skill in my mind, but just knowing simply what is an ineffective search? Like if I wanted to search for something on Gatsby, right? You wanted to say like Gatsby this is happening or whatever like error with Gatsby, what I would do is I would start with the error, copy and paste the error remove any sort of like your own file system stuff, just paste the basics of the error and see what comes up. Then if nothing comes up, start and say maybe like the behavior, but another thing people tend to tend to do is maybe not realized just how many terms there are with the same word like oh, Gatsby. Okay, there's The Great Gatsby. There's Gatsby, this or Gatsby that that's totally unrelated to our industry. Gatsby JavaScript. This like Get beat react blank, you know, just adding some of those additional qualifiers in can help. If I'm searching for something, and I'm getting a lot of bad results, the results that I don't want to see, I think was the one I was asking a question. The other day, on my end, it was about Apex domains. And I wanted to know something specifically about Apex domains and see names. And every single result that came up on the first page, he was talking about load balancing, I don't, I'm not worrying about load balancing right now, um, Tom want to know about DNS. So I used one of the Google operators, which is the minus and I did the minus load balance, and it removed all of those load balancing things, I can add DNS in there, and it just reduces the clutter. So it's a lot of practice in terms of like, knowing what's effective, and knowing what's not effective, seeing what's effective. And then getting some of those skills like the operators and skills of actual technical things that exists in Google, I feel like you're the type who is like explicit Google tips, - -48 -00:30:58,500 --> 00:31:31,770 -Wes Bos: I like to use date searching a lot. So if you search for something on Google, you don't have to know any keywords or anything. But there's a tools drop down, you click on Tools, and that will allow you to filter for a specific date range. So more often than not, like, let's say, I'm looking for an issue with Apollo, and Apollo three just came out, and I'm googling for the issue. Well, there's like four or five years worth of Apollo before then that I need to then filter out because that is not the library that I'm working with. So you know, okay, well, Apollo just came out, - -49 -00:31:32,130 --> 00:32:00,930 -Unknown: let's say two months ago, it's not even out at time recording, but let's just say came out two months ago, then I can filter my listings for things that were posted. In the last two months, I remember, I found a blog post about something xy and z, and it was about a year ago. So then you want to search in 2019, you can limit it to 2019. That's not going to show any new stuff that would have come up. And I find that to be super helpful to gauge when stuff was posted. Oh, yeah. - -50 -00:32:00,960 --> 00:32:41,550 -Scott Tolinski: Can you imagine getting like a bug with your react hook, and then you Google something about react, and all of the errors that pop up on Google or from you know, like, 20 2017, you're just like, Oh, well, that's not, that's not going to be accurate. Another one I like to use it, if I'm looking for opinions is I'll just add the word Reddit onto there. Now, you got to be careful with Reddit because definitely people, they definitely have good opinions occasionally. But what you want is you want a wide variety of opinions, you want a lot of people with personal experience. And that's often a good place to see people talking about their personal experience and opinions with thing. But that said, there is this sort of like hive mentality over there. And if you're not paying attention, you can definitely get bad information just as much as you're getting good information there. - -51 -00:32:41,970 --> 00:33:04,950 -Wes Bos: Absolutely read is the best ticket with a grain of salt, because you could be getting bad information. But in my experience, especially once you get into much more niche subreddits, you will find a lot more really helpful information, I find some of the bigger ones, web dev and whatnot, a lot of good people in there. But there's a lot of bad opinions and angry people in there as well. So take that with a grain of salt. - -52 -00:33:04,980 --> 00:35:26,340 -Scott Tolinski: Yeah, exactly. next section is going to be talking about GitHub, we as developers spend a lot of time around GitHub, specifically, because that's where so much code lives in hosts issues and all those things. So some of your skills are going to be simply just learning how to navigate to GitHub itself. GitHub is a really fantastic skill and a really fantastic place. But it is very intimidating. For those of you who may not have a lot of good skills. I remember when GitHub was first blowing up, and I didn't necessarily understand, get it was confusing to me. I mean, use the terminal and that sort of way. Or just even the process of it, you know, the downloading things. You click download, and it gives you open and desktop or download zip or here's an HTTPS string like, Oh, I remember feeling very overwhelmed and just not super confident when navigating GitHub. So it's important to do understand and spend the time and figure out where things are. The explore tab is there for finding interesting projects. The marketplace is there for finding things like GitHub actions, which are really great. I've been I've been working a lot with GitHub actions. for newer developers, you'll just want to spend time navigating around repos and seeing how issues work, realizing what it takes to make a successful issue, right, just letting someone know that their stuff doesn't work isn't exactly very helpful. That's like a whole school on its own is writing a good issue in one of which that I'm trying to get better at understanding what pull requests are, how the whole thing works on yourself a good GitHub tutorial that explains everything where things are at and how to click through it. I also have a number of GitHub extensions that I'll recommend for those of you using Chrome. Many of these have analogous versions to Firefox as well. I like to use octo linker, which gives you that click through to source thing that we were talking about within VS code gives you that quickly their source on GitHub. So let's say you're browsing a file on GitHub, and you want to see the file that it's referencing, you can just click on it as a link and it takes you right to it without you having to go Back in the file directory, and then forward to that file or in case it's in a whole nother file directory. Another one that I really love is octo tree, which gives you a sidebar of a folder structure, sort of like what you have within your text editor where you can click and open folders. And then that way, you can click and go directly to a specific file, or you can even filter and search, I would go west, if you're not using octo treat, man, you got to get on it. It's fantastic. - -53 -00:35:26,360 --> 00:36:11,250 -Wes Bos: That's pretty cool. I find, especially if my my beginner JavaScript and my JavaScript 30 course, people aren't totally comfortable with the concepts of a repo, a fork of that repo, and then a branch on either of the the repo or the fork and I get a lot of oops, I accidentally pull requests to do all of my work by accident because people are trying to push their own work to their own branch or something like that. To find a repo MC with a friend or something like that, and practice forking each other's repos and pull requesting, just so you can get get comfortable. Like I'm not mad at that. It's just that like, it can be a little bit confusing as silica, I don't want to accidentally overwrite something, or I don't want to accidentally do the wrong thing. Yeah, - -54 -00:36:11,250 --> 00:37:39,690 -Scott Tolinski: right, exactly. Sometimes you push up a DS store file, and you're just like, oh, how do I delete? How do I delete file from GitHub. And that's always fun. I think one of the most important things about not only meant like navigating through GitHub is navigating through file structures in general and viewing source. And so this is like a whole nother skill, because it might not necessarily be GitHub, it might just be some source, maybe you've downloaded it from somewhere, maybe it's on GitHub, and you're just pawing through the folder structures, maybe it's on Git lab or somewhere else entirely. And so reading source is a skill all unto itself, you want to first figure out how to find where a project starts, like what's the entry point. And usually you can find that if it's a JavaScript based package or JavaScript based project, you can use the package dot JSON. And the package dot JSON usually gives you an entry in saying where this thing starts, like, Where's the initial start file? Yes, that's a good tip. If you start at the initial start file, you can see what loads what loads, what, what loads, what, and oftentimes, maybe that start file is just loading another file or loading something else. And that can seem sort of pointless. But it really gives you a handle on the layout and structure of this project in a way that just simply looking at the files can't give you. So just spend a lot of time reading source because reading source is a skill onto its own, just being able to to look at somebody else's code, read the comments and pick apart things as to how they go. The last one we're going to be talking about here is knowing when to pick the right dev tool for the job. The dev tools, pain is overwhelming to new people. So do you want to talk a little bit about that West? - -55 -00:37:39,690 --> 00:38:46,880 -Wes Bos: Yeah, just being able to know where to edit something at a very basic No. Is this CSS based? Or is this in the elements tab, those two are very helpful being able to toggle styles on and off to see if that's your issue. Knowing does this happen when something is clicked, then maybe you need to head on over to the event listeners tab and see what's going on in there, going into your console and understanding what the errors are in there, sometimes, especially lately, like Chrome and Firefox, but all kinds of garbage in your console. That means nothing to you as a developer, or like maybe you're developing something but you have an iframe, and you have some stuff being dumped in there. So peruse through the console know what's important and what's not. And honestly, we don't have any rules for that here. That's just takes time but getting comfortable with it. And then probably a couple years into your your dev journey, you'll start to look at the rest of the tabs, which is things like the Network tab, the memory tab, Performance tab, storage tab cookies, things like that, - -56 -00:38:47,129 --> 00:39:45,630 -Scott Tolinski: I often see people go right for the console log, sometimes I myself and definitely a victim of using console log way too many times when it's not appropriate. And just knowing again, which tab to look at whether that is of course, the more maybe you're going to get more information about that from the Network tab than you get from doing a console log or maybe your console logging eight things. And it would just make more sense to throw a debugger in there and see the entire stack context of everything that you're looking at in one fell swoop. Or maybe it's just like understanding what tools you can use to modify the CSS or HTML the correct way. A lot of these things again, it's just it's part of this is experience. But again, find yourself a good Developer Tools course or blog post or just spend the time looking at them. because let me tell you, there's not that many tabs for no reason. They all have very specific use cases. And yeah, some of them definitely are used more than others, but they they all have very excellent use cases for your skills. - -57 -00:39:45,959 --> 00:40:28,260 -Wes Bos: All right, so that is the leftovers of the fundamentals we have for you hopefully learned a few things here. There are things that maybe you should focus on. Obviously, there's a lot here, but maybe take one or two things and say I'm gonna get better at the command palette or I'm gonna Learn five new terminal commands in the next month or two. But that's probably well worth your time. Totally. Let's move into some sick pics. I have a really good sick pic today. And this is something that I got from my grandma. So my grandma is in a nursing home and she's not able to have visitors. And she didn't have the internet or email or anything like that. She actually had email like, maybe like 15 years ago, I - -58 -00:40:28,260 --> 00:41:10,110 -remember emailing her when I was like, just had a hotmail address, but she hasn't had email in probably 1012 years or something like that. So we all have the cousins and everything, got her an iPad, and set her up with internet at her at the nursing home. And the one problem she has is that her like arthritic fingers, she can't move them fast enough. And she always triggers things that are too quick like she she makes the icons jiggle, because she held down like she pressed on on some of the icons and it's a little bit frustrating to her to do it. So what we ended up doing is I bought her this thing called the Cosmo not wide grip stylus. - -59 -00:41:10,400 --> 00:41:27,780 -Scott Tolinski: Oh, yeah, no, that I got that from my dad for different reasons. I just thought it was cool. Oh, awesome. So it gets just It's very nice. It's a big marker. It's like gripping a sharpie or something like that. Instead of her sort of shaky hands. She's able to have a little bit more control on that. And so your dad tried. He thought it was pretty cool. Yeah, - -60 -00:41:27,980 --> 00:41:50,690 -it is awaited. It feels really nice. Like it feels good. And yeah, I got a firm A number of years ago for his like first iPad. And just because I thought he wanted to stay Listen, I thought it was really neat. It's a very good product. Very nice. It's like one of these Kickstarter things, grab it on studio, neat, calm, I'll put a link in the show notes as well. Big fan. Cool. - -61 -00:41:51,000 --> 00:43:58,830 -I'm going to sick peg a, it was a initially a TVs that I want to call it like a limited series what it would be like a like a four parter limited series. This was a nova maybe in 2011. And granted, some of the information has since been not updated. But like, like, for instance, they talk about the Higgs boson particle, which has since been discovered, like a fit like actually observed, right. And so this is called the Fabric of the Cosmos. And Courtney was watching the rocket launch and asking me some questions about how satellites work and how you know, gravity works. And this stuff is mind blowing. It's so mind blowing. And I said, Listen, like I can explain to you how this all works with fabric and bowling balls and whatever. But like, let me just put on this like four part series for you, which is a little bit of an investment in, let's just watch this together and blow your mind. Because it's it's based on the book by Brian green does this he's fantastic. It's based on a book by the same name by Brian Greene. I've also read the book because I found this video series to be so fantastic. I've been a huge Brian Greene fan Ever Ever since this, but it's so good. It talks a lot about theoretical physics, it talks about actual observed physics. And it talks about space time and how things are connected and warped via all sorts of things with black holes and the theoretical physics of things like time travel, or how time is connected to space in a way where, you know, just simply changing your speed actually affects time, right? We don't often think about these things. And we watched the first one that I've seen all of these like 100 times but we watched the very first one on just space itself like empty space. And not like outer space but like empty empty space space and what that actually is, and when we got done watching it corny was just saying, Man, I feel like everyone should watch this stuff because you would realize just how insignificant a lot of the things we worry about are. It was just fantastic. So I'm going to be watching the other three of these with her over the next few days. It's my favorite video series. I love it a lot. It's from 2011 but it's still very, very fantastic. Very much holds up today. - -62 -00:43:59,340 --> 00:44:40,710 -Awesome. That's good. shamelessly plug my courses Wes Bos comm forward slash courses if you want to learn something new with JavaScript, HTML CSS, check it out. Wes Bos calm for slash courses, Use coupon code syntax for 10 bucks off. Yep. I'm gonna shop My Courses level up. tutorials.com you can sign up for the entire year right now and save 50% off, level up tutorials.com forward slash Pro. Vinnie, thank you so much for tuning in and we will catch you on Monday. Peace. Please. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax259.srt b/transcripts/Syntax259.srt deleted file mode 100644 index 492f451b7..000000000 --- a/transcripts/Syntax259.srt +++ /dev/null @@ -1,128 +0,0 @@ -1 -00:00:00,360 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Taylor. Totally in ski. - -2 -00:00:25,980 --> 00:00:27,240 -Scott Tolinski: Oh, welcome - -3 -00:00:27,240 --> 00:03:30,990 -Wes Bos: to syntax on this Monday hasty treat, we're gonna be talking about CSS functions. Now, some of these are gonna be ones that you may have heard, some of them may be ones that you have not have heard of. But they're all going to be pretty cool. And we're going to discuss the what's wise and housing, where's that you have with some specific CSS functions. Now there are a ton of these things. So obviously, this is going to be a subset. My name is Scott Lynskey. I'm a developer from Denver, Colorado, and with me, as always, is the Wes Bos. Hey, everybody. Hey, Wes. This episode is sponsored by Log Rocket. Now, CSS is such a visual medium, and it will make sense that your air and exception and handling should be visual as well. And that's very possible using Log Rocket. Now you're going to want to check out Log Rocket Log rocket.com forward slash syntax, where you'll get 14 days for free. Now, what is Log Rocket? Well, it is the visual error and Exception Handling service that allows you to see a session replay. Really pretty cool you can it's a draggable interface that shows you a video of what happened when the bug happened where the user clicked, it gives you your network log, it gives you error logs, it gives you just about everything you'd come to expect from the Chrome Dev Tools being right there, in addition to your Redux store, and all that fun stuff as well. So check out Log Rocket at Log rocket.com, forward slash syntax, thank you Log Rocket for sponsoring. Let's get into some CSS functions, just trying to CSS function here. And I'm pretty into some CSS functions myself, this is an area that's always expanding within CSS. And sometimes we just have our head down in the codes. And we might not even notice all of the changes and improvements that have come to making CSS functions really more useful. So Wes, do you want to get into it and talk about some CSS functions? Yeah, the first one is actually been around for quite a while, but it has pretty good browser support. And that's the ATR function. And this function will allow you to access your attributes from an element. Most commonly you're going to use this with like a data dash attribute. So if you have like a div and you want to apply some additional info to that thing that needs to be available in CSS, then what you can do is you can say like data dash, last name is equal to boss, and then you could access that thing in CSS, most likely, this is going to be using a before or after pseudo element in which you can use content, content, property, and CSS will allow you to put text into an element. And then you can access the data attribute. So a really neat one I saw on Twitter the other day was, if you have like a code tag as a data, dash language of JavaScript, or CSS or whatever, and you're using those as code blocks, you can use the before to add the language of the content in CSS. And that's helpful often when you're working with some generated output that you can't control. But you still need to be able to display something sometimes you can get away with just using them before or after with ATR. Cool, yeah, - -4 -00:03:31,020 --> 00:03:43,530 -Scott Tolinski: you know it. I don't use attr a ton. Remember, somebody was saying like, oh, why wouldn't you just like, what about using ATTR instead of like, classes? Remember, there was like a, I think there was a potluck question that came in a while ago about that? - -5 -00:03:43,920 --> 00:03:45,720 -Wes Bos: Yeah, that was for selectors, though. - -6 -00:03:45,990 --> 00:03:47,880 -Unknown: Yeah. Oh, you're right. Hmm. - -7 -00:03:47,910 --> 00:04:06,180 -Wes Bos: Not for accessing them in CSS. Your another thing I've seen them is with tooltips is if you want that was perfect, perfect, perfect use case. There's like not a lot of control over like whether tooltip should go above down left or right. And then also, I'm not sure if it's totally accessible or not. So that's - -8 -00:04:06,359 --> 00:05:30,870 -something you kind of have to think about. Yeah, at least it's something you could you could use as a jumping off point. But I think that that is pretty commonly used. Next is going to be hell canal calc is sort of everyone's new favorite CSS property. Because I think once you discover calc, once you discover it, you you really get into it. And it's especially powerful when paired with things like CSS variables, it allows you to calculate two values, ie specifically units of length, right? And you can calculate things like 100% minus three M's, so you can mix and match. That's like one of the coolest thing the hugest use case. Yeah, especially like if you have a fixed header size, and you have like the viewport height, you can calculate the body height by doing you know, 100 Vh minus your fixed header height, especially if that's stored in a variable or something like that. Then you get access to the rest of the content. That is the rest of the browser window. I mean that that, to me is worth the price of entry. Because it's like, well, there's no price of injury, but it's worth the any sort of learning this thing, because, too, oftentimes, we've wanted to be like, give me 100%, of where we currently are. And while Okay, that's not super helpful. So like it doesn't CSS doesn't work in the way that you'd expect it to there. But being able to calculate the browser height with a property minus this, or that is just so incredibly powerful. I love calc, I use it all the time. - -9 -00:05:30,960 --> 00:06:03,540 -Yeah, another really good use case for this is with margin, if you're setting a width of something, and you know how big your margin or your your gaps as well, if you've got grid gaps, or now Flexbox has gaps as well, you can calculate this and have a fixed size margin. So you could say like 100% minus 40, px and Lex guys said you can you can mix and match those things. And this is really helpful for when, like, you scale up something and you you still always want the width of the margin to stay the same and not scale up along with it. - -10 -00:06:03,810 --> 00:06:16,740 -Yeah, fantastic. Next one we have here is the is function. This one's actually pretty cool. It used to be named matches, but now they've renamed it to is and what this will allow you to do is to select - -11 -00:06:16,920 --> 00:07:17,130 -multiple parent elements and then a single child within it. And what that means is like, how many times have you ever written the code header h1 comma dot header h2, like you want to select all of the h1 h2 h3 h4 h5 through h6, that is inside of a specific element. And if you want to do that, then you you would have to write like the header h1 comma, the header h2 comma or nest with this you can say exactly dot header space colon matches h1, h2 all the way through. And what that will do is it'll say, within this selector, find me all of the following elements and this works for the other way around. You could say if it is the header or the footer, or the sidebar, and then there's a link inside of that. If that's the case, you don't have to say like dot header space, a sidebar space, you can say, header, footer sidebar space a and it's pretty cool to be able to select multiple combinations at any level of your selector. - -12 -00:07:17,130 --> 00:07:17,670 -Scott Tolinski: Hmm, - -13 -00:07:17,670 --> 00:08:13,830 -Wes Bos: very interesting. I hadn't seen that before. Next up is going to be some trigonometry. Yeah, how many people love trigonometry, I used to actually like trigonometry in school. I don't know, it's been a long time since I've done any sort of trig. But there's trig functions, and CSS, which can be super useful for those of you doing really interesting things such as sine, cosine, tan, all of the things that you would expect to be from your graphing calculator. Those of you who've used trig in the last few years, anything that is there now one of the ones that I thought are a little bit more maybe useful to me personally, considering not doing any sort of trick, but like, pow, for the power of as well as square root sq. RT to get the square root of something. Again, I'm not going to be using these a ton. But I think they're interesting to know that they even exist, because I guess I didn't know that like sign existed, but not to the point where I would I would think to use it at any given point. - -14 -00:08:13,980 --> 00:08:29,400 -Yeah, I think suncoast 10 can be used in a lot of animations and CSS. Yeah. Especially to get like looping things. Yeah, I've never used any of these in CSS. And the only I've only used one, I think it was 10 or a 10. in JavaScript. I - -15 -00:08:29,400 --> 00:08:45,240 -think I use sign before that was when I was doing face detection. And I needed to figure out if the eyes were at different levels, I wanted to figure out the tilt of the head. Hmm. Oh, yeah. given two points. What is the angle of the third or something? Yeah, - -16 -00:08:45,240 --> 00:08:50,660 -Unknown: look at that. Yeah, that's a that's an actual good use case for something like this. That's cool. - -17 -00:08:51,390 --> 00:09:02,400 -Wes Bos: Next one is, is one I've heard quite a lot about, but I've never used it myself. And that's the clamp. I know that it allows you to do specify the min and the max of something. But do you know a little bit more about this Scott. - -18 -00:09:02,490 --> 00:10:44,420 -So clamp is interesting in I have been like getting into clamp functions quite a bit due to like animation courses, like I use clamp, not the CSS function clamp, but I use clamp all the time in doing animations when you want to clamp a number. What exactly is clamping? Well clamping is basically when you want an upper and a lower bound of a number, right? You could think of it as like when you have a minimum and a maximum value, and you want it to stay within those bounds. So it can be useful in terms of when you want to scale with the viewport up to a certain spot and down to a certain spot. And then there's also a preferred value, which is the sort of the center value. Okay, so let's take a font size example here. So like, let's say you want the font size to clamp to the lowest possibility of being one rim and the highest possibility of being too random. Right, so you want the font to always stay within that range of one to two reps. And you want the font to prefer to be at a specific size. Now, people often use viewport units for this. So the way you would see this written would be fine size clamp, the first argument would be one RAM, the second argument would be something like 2.5, a vertical width, so 2.5 times the viewport width, maximum being two Rams. So something like this would be useful if you want your font to scale to the size of the viewport, but always sort of remain that same relative size. This stuff so visual, you could think of this, remember, when we were in the past, we would use like fit text? - -19 -00:10:44,730 --> 00:10:50,880 -Yeah, yeah, were you like scale the size of a piece of text across the width of the parent? - -20 -00:10:51,000 --> 00:11:28,500 -Correct. And this could be definitely useful for things like that, as well. Because as the element grows in size, you're going to have the font size, essentially change to be upper and lower bounds of this thing. So it's basically like a fit text use case when you want your text to fit to something. But you can clamp it to the lower bounds and the upper bounds. And this while this example is we're talking about just text right here, clamp is useful in a lot of situations, anytime you want to clamp down a value to a minimum case and a maximum case and you just shrink it down into there. - -21 -00:11:28,920 --> 00:11:40,500 -That's great. Because like you have min width and max width, if you ever need that for text, or if you ever needed for any other CSS properties, there's not min and max values for that, right seems like clamp we can use for that. - -22 -00:11:40,500 --> 00:12:10,200 -Yeah, clamp. To me the like the most flashy thing that you can use it for is fluid typographic right. Like, type. Yeah, that scales. But I would guess there's probably like a ton of other use cases for it that are probably very interesting as well. I haven't used like, I'm typically using clamp within JavaScript myself. So seeing that clamp exists in CSS is going to be one of those things that I think is going to take a little bit of time for me to really explore the should I say upper bounds of where this thing can go. - -23 -00:12:10,890 --> 00:13:57,930 -There you go. Wow, that's great. Next one we have here is min max. And this is part of CSS Grid, when you want a column or a row or a track, as we call them in CSS Grid to kind of like clamp as well, to add a minimum be this big and at a maximum be this big, you can pass it to different values for your lower end. And your higher end, where this ends up actually becoming much more useful is when you want to have a set of equal columns in in grid. And people will often say Oh, three columns, one fr one fr one fr and that will give you three equal columns. And that actually works in some cases, but because the way that fr works in grid, I like to think of fr units as free space, meaning that after each grid column has had it space used, there's a bunch of extra space. And if there's not much in each of your columns, then you have 100% of equal space. And given them each one fr one fr one fr that means that they'll each take up equal columns. But if one of your columns has something that's making it wider, like an image, a video, some text that doesn't wrap, the CSS Grid will first lay it out based on the width of that text or that image that doesn't wrap, and then it will say, Okay, now I fit this thing, there's a bunch of extra space free space, and then it will divide that evenly up between the people that have one fr each. So it doesn't actually make equal columns. So all that to say, if you use minmax, 01 fr, what that will do is it will at a minimum, make them zero, obviously, and at a maximum make them one fr but what that will do is it will make them all exactly the same, regardless of free space that is left out until they all wrap on to one line. - -24 -00:13:58,740 --> 00:15:24,540 -It's interesting. I haven't used this a whole lot. But I'm interested in a lot of these things. Because sometimes we get wrapped up into the way that we've just done CSS for so long that you don't even think about like, oh, there's this really new, elegant way to do things in grid is one of those ones that's like when it first came out, it was like Alright, here's the way that you do things in grid, but I'm learning that there's just so many advancements to this stuff that I haven't even thought about a whole lot like this one. Next one is the fit content function. And fit content is really interesting. It's for grid specifically, we were talking about this as sort of like a max width for grid, like a grid template columns, sort of like a max width, but it's not limited to the width dimension. It can be used for columns or for heights. So you could think of it as like a max for a grid row. And you could say that fit to content is going to be a maximum width. Keep in mind that this can be when I say width, it can be their width or height. So if you pass in, let's say 100 pixels to fit content, the grid template column will shrink to the content, but it will max out at the value specified in here. So if you say 100, if you have like two characters in your grid template column is going to shrink to those two characters. But if you have, you know, paragraph, the maximum it's going to be is going to be 100 pixels wide. So this is sort of like a, it will, it will fit the content to this specific parameter. - -25 -00:15:24,540 --> 00:16:37,470 -Beautiful explanation of that that's it's always very hard to explain these such visual things over a podcast. But hopefully, we gave you the gist of it, and you can go check it out yourself. Last one we have here is filter. Now filter is a CSS property. And it comes with a whole bunch of different functions, there's blur, blur is really cool because you can, if you have something that's semi transparent, and you put a blur on it, then you can still overlay tax on top of that and not have that blur. And you can get this kind of cool, blurred background effect that used to not be possible. I remember designers always giving me mock ups. Where go Yeah, the thing would be blurred. And they're like, Huh, sorry, can't really do that in in there, this grayscale, sepia opacity contrast, saturate. Yeah, you can just and stack them together as well where you can apply a bunch of contrast and then add CPOE or vice versa. And it actually does do them in order. I've used this quite a bit on like my generated slide decks, where I just have images in the background of each slide, if you like grayscale it and then crank up the contrast and then have a bunch of opacity. It looks like a really nice background image when it's really just a JPEG that's being - -26 -00:16:37,620 --> 00:17:02,820 -crunched by CSS. Oh, that's fun. Yeah, I think blurring is super interesting. We we used saturate forever and ever and ever. I'm on level up tutorials calm. I'm like the very first version that we had all the logos be saturated, and you hover and then they saturate. I mean, that kind of UI function is is really sort of nice. There's also the URL function within filter. Have you ever used URL filter where you can use an SVG filter? - -27 -00:17:03,300 --> 00:17:21,780 -I didn't know about that until we had Sarah swated. Oh, yeah. Cast, she told me about that episode I wasn't on. Yeah, that's the one episode we did without Scott because you were like sick or something. And we already had her queued up. I'm using it, the URL function in my if you go to my beginner JavaScript comm course I've got these - -28 -00:17:21,780 --> 00:18:11,460 -drips, where the Oh yeah, the pattern above it, the blue pattern drips down onto the div below it. And that's a clip path, I think, no mask, there's a difference between a mask and a clip pass. Yeah, that would be a mask, and then the mask sort of punches it out. And on that you give it a URL of in this case is an SVG. inside of it. There's like the data for how the mask will look and how it will punch it out. So isn't that just an SVG? Maybe it's art. Maybe you're right, I'm referring to where Sarah was telling us how you can attach different filters in SVG. And then you can access those filters in CSS with the URL. I'm thinking what you're what this is using, is it using specifically an SVG as a mask? Yes, - -29 -00:18:11,460 --> 00:18:27,480 -sorry. That's what it's doing. And masks are super common in like video and photo editing, right? You like create a mask of a thing to get that transparency layer going. So obviously, if you've used Photoshop to I think masks are extremely common in Photoshop, so - -30 -00:18:27,509 --> 00:18:44,940 -yeah, yeah. Yeah, it's pretty cool. It's not not what I was thinking about initially. So it has nothing to do with the URL function that you just talked about. But you can store filters in SVG, and then access them via CSS. Oh, it's a good episode. Go back and listen to it. - -31 -00:18:47,310 --> 00:19:18,150 -So that is it for these cool CSS functions. And there's a lot of really amazing CSS functions. I want to hear what your most interesting, and just exciting use cases for CSS functions are that maybe we didn't even cover the function at all. Or maybe we covered the function and you have a really cool example of how you can utilize some of this stuff. Again, these are all very visual. So let's get some visual examples. If you follow us on Twitter, we will retweet you some of your cool CSS function examples. I want to see some. - -32 -00:19:18,350 --> 00:19:35,090 -All right, thanks so much for tuning in. We will catch you on Wednesday. Ace be head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax26.srt b/transcripts/Syntax26.srt deleted file mode 100644 index 2eedc8852..000000000 --- a/transcripts/Syntax26.srt +++ /dev/null @@ -1,160 +0,0 @@ -1 -00:00:01,290 --> 00:00:02,790 -Announcer: You're listening to syntax, - -2 -00:00:02,790 --> 00:00:10,619 -Unknown: the podcast with the tastiest web development treats out there, strap yourself in and get ready. Here's got to Lansky and Wes Bos. - -3 -00:00:10,919 --> 00:00:11,430 -Hey, - -4 -00:00:11,430 --> 00:01:14,939 -Scott Tolinski: welcome to syntax. This is Scott litski. And as always, Wes Bos is here. And today we are going to be talking about Redux. In this mini Sodor. Snack episode, we haven't decided the title. So we need someone to settle this debate for us. This episode is sponsored by dev lifts. And if you've been listening to syntax, you've heard us rave about deadlifts. And it's a plan to help you get into shape and it's focused for developers. So JC in bad the guys behind devilish will give you an interview here and learn a little bit about your, your, you know, your current state of working out or any of that stuff. And they'll develop a plan for you so that you can actually make a actual effort to get into shape and be more healthy and all sorts of great stuff. So we'll talk a little bit more about them later in the show. But dev lifts is definitely a super cool platform for actually getting in shape with, you know, people who understand developers and developer lifestyles. - -5 -00:01:15,000 --> 00:01:47,489 -Wes Bos: Exactly. Big fan. So well, we'll have lots to say about them partway through. So today, we're talking about Redux. What is it? How does it work? And hopefully, you're coming into this. And you've probably heard of Redux yet, not necessarily know exactly what it is or why you might need it. And then we're, we're gonna we're gonna attempt to explain it. So Scott and I both have have built apps with Redux. And I've actually touched it in about a year now. But I'm a I'm a big fan of Redux. And Scott, you recently just put out a course with Redux, right? - -6 -00:01:48,030 --> 00:02:17,000 -Scott Tolinski: Yeah, well, it's actually in the editing right now. It's gonna be out this this month, for the level of pros, or for purchases. It's focused on react and Redux. So it's react and Redux for everyone. And it's basically teaching you Redux, as if you don't know what the heck Redux is, and what it can do for you. And it shows you in the context of building a real app, we hit API's, we do all sorts of cool stuff. So look out for that. It's going to be up pretty soon, hopefully, by the end, well, definitely by the end of the month. So yeah, as soon as possible. - -7 -00:02:17,060 --> 00:02:31,560 -Wes Bos: So Redux is a state management a way to basically just like take care of your data. And I don't want to take a stab at like, like, why do we need something to deal with state when react has its own state built in? - -8 -00:02:32,130 --> 00:03:48,780 -Scott Tolinski: Yeah, so there's, you know, some, several different reasons. But for the most part is how many times have you worked with local state and then wondered, well, how do I access or modify this state from another component, and then you have to get into this pattern of having a parent that contains the state management for both of those two instances. But maybe you have a login window or something like that, that lives somewhere else in your HTML, and then you have an action that needs to open the login window from the header? And then you start to have these issues of where does this live? That toggles everything right? How does this actually manage the application state from outside of this in particular component. And that can even be like reusing that, that toggle all sorts of places maybe you want, or when the user logs in, you want that toggle to fire in the menu to close. And basically, having something in place like Redux allows you to have a state for your application that can be accessed or modified from anywhere rather than just that particular component. And that seems like it could get out of hand. But Redux does it in a way where things are just very, very organized. And that's really one of the benefits to using something like Redux. - -9 -00:03:49,470 --> 00:03:50,010 -Unknown: So a lot - -10 -00:03:50,010 --> 00:04:51,199 -Scott Tolinski: of the things that people like to talk about in Redux. Such as it's, such as how Redux doesn't modify the state, it returns a new object each time and stuff like that is great. But it's not necessarily super important to understanding what Redux does. And at the end of the day, it's a big object full of the current version of all of your data for your application. Like, for instance, on level up tutorials, you'd have the state of the navigation, the state of the, the login window, you'd also have all of the tutorials on the tutorials page, or the particular active tutorial, all of this stuff is living within this giant global state that you can pull out at any given time. But the way that Redux does it by having things broken up, and is basically just a nice way to organize your your code state and the Redux Dev Tools allows you to see that state at any given point. So you can monitor and see the changes and updates made to it. Exactly. - -11 -00:04:51,259 --> 00:05:09,120 -Wes Bos: And Redux calls it a they call it a store, but there is Yeah, the whole idea is that it's just one object full of your application state and you can inject that at Level deep. You don't have to do the whole song and dance of passing, like hot potato, your your data down 14 levels deep to get it to where you want it. Right? - -12 -00:05:09,480 --> 00:06:14,670 -Scott Tolinski: Yeah. And and there is definitely like, do I need Redux? Well, I mean, the answer to if you need Redux is whether or not you need to do stuff like that Do you need to be able to access your state modified over the course of your application. And some people might think that you always want to use Redux for everything just because it makes things nice and organized. But I honestly don't think you do need it for everything. But applications with state or, or anything like that, it could come in very, very handy to get yourself organized in this way. So I mentioned before that some of the concepts in Redux can trip people up because, well, that there's a lot of new jargony things kind of thrown at you, there's a lot of just just overload a little bit when you're learning about Redux. And one of those things is that the object itself, your state is not modified. And so that's like a big point. But it doesn't necessarily have a lot to do with how you how you actually interact with your store, right? Every time you make a modification to your store, instead of modifying that object, it's creating a new object and returning that new object. And that new object is now your data store for your entire application. - -13 -00:06:14,670 --> 00:06:39,600 -Wes Bos: That's the whole idea behind immutable, right, like, if you go back to the buzzwords episode that we did, we talked a lot about mutations and immutability. And that's the whole idea is that you do not access the store directly, you just create an entire new state. And you you change the one piece ease or take a copy of state and change the piece that you want, and then re implement it into into that store. Right? - -14 -00:06:39,990 --> 00:09:15,000 -Scott Tolinski: Yeah, and this allows for some of Redux is cooler features, like the time traveling with the dev tools, where you can go back into any particular moment of your application and reload that state from that particular moment. And so because a new new state object is generated each time so let's talk a little bit about some of the the jargony words in Redux, we have things like actions, action creators, we have things like reducers, and I kind of hate all of these words, I'm sorry. It's nothing personal or anything. I just don't like, to me action sounds like it's a function. But in Redux in action is an object. And that object just describes the action going on, essentially. And so you have to dispatch an action. So instead of just running a function, what you have to do is dispatch an object, which is an action. And that action then will match up with a reducer. And that reducer sort of takes the old state and takes the new state and merges them together. So you know, and then you have words like action creator, which an action creator is just in my mind, it's a, it's a function that dispatches your action somewhere else, right? It's basically, an action creator is a way to organize your actions and another file and use them instead of having to use your action directly in your code. And, again, this creates more boilerplate, I understand the actual, the need for action creators is I don't know if I would write Redux without an action creator. To me, if you're looking at it, it makes a lot more sense to run a function called load tutorials than to dispatch an object with a constant string named load tutorials or something like that. Yeah. So. So you know, in Redux, what we're doing here is we have this store that can change, you have actions that go and either fetch data or make modifications, and then they merge it with the old store in a reducer, and then it returns that new store. And that's your entire new state of your application. That's pretty much Redux, right there. I think a lot of the time people get mixed up is with all of these jargony words and the reducers and the immutability of it all does add for some complexity that well, that maybe you don't understand why you have to dispatch an object that just runs another function that returns a modified object state lay - -15 -00:09:15,050 --> 00:10:06,510 -Wes Bos: exactly, I mean, if you wanted to increment a number by one, you would have to dispatch an action called increment. And then you would have a reducer that would take in the current state, which would be one and it would take in the action which would be increment and then based on the current state and based on what happened like increment or decrement or add a comment, remove a comment like a like a tweet, than you would change you take a copy of your existing state, modify it, and then return the entire new state from it and it seems like a like a really crazy way to go about it. Like why can't I just do store dot likes plus plus right? But that is the the pathway to a lot of hurt in your application where if you modify if you mutate state you modify it directly. That can, that can lead to a lot of issues down the road. - -16 -00:10:07,350 --> 00:11:51,930 -Scott Tolinski: Yeah, yeah. So that's one of the reasons why my course I taught it in the context of Redux because like, if you look at that increment example, like to me, like that example is used a lot to teach Redux incrementing, or something like that. But it seems like so much code for something that you could just do with a simple function and set state or something, right? Like, that example to me is, so I don't know it out of the context of a real world application, it's difficult to see why Redux makes your life easier for doing something like that. So that's why in this series that I did, we do a lot of real world stuff, hitting API's grabbing data, or toggling on and off a, you know, navigation element or something like that. But I think that's an important part for learning Redux is, is, is sticking with it past those sort of examples that make you be like, Why the heck am I writing so much code to do so little? Once you get into the more complex stuff, and once you actually start to use it in a real world application, the benefits are gonna definitely pop up. And you're definitely going to just totally get it there will be aha moments along the way. But if you're looking at it from purely a increment this value in a single JavaScript file, it's going to be like code overload for what you have to do. And I guess that's the biggest critique of Redux is the amount of boilerplate code. And honestly, I am a fan of a little bit more magic. And that's kind of maybe a controversial opinion. And I might like something with a little bit more magic than then than Redux. But for what it does, it gets the job done in it, it makes your code nice and organized and makes your state nice and organized and saves you a ton of headaches down the line. - -17 -00:11:52,410 --> 00:13:10,410 -Wes Bos: Yeah, absolutely. I'm a fan of it. I don't, I think I'm more citing and we'll talk about this in the future. I'm more citing towards a library like Apollo, which will do a lot of the that for you. And there's not as much boilerplate code, you don't have to create three new files every time you want to add a new piece of state. But that said, it's Redux is very explicit. And once you do grasp the concepts and the sort of this new way, I think, I think the other thing is like react and Redux, it's the first time for a lot of people that they have to structure their application in such a way, a lot of the people are coming just from slinging jQuery and data attributes all day long. And then you're, you're thrown into this, like, much more structured way. And it's just a different way to learn how to do applications. And I also then people, people that are building smaller applications might not necessarily have run into the issues than not having good code is and you just don't understand like, Why Why do I have to do it this way? I didn't have problems with my other way. When it's kind of like the BAM what we talked about is like you kind of have to feel that hurt a little bit before you understand why people go about it in such a roundabout way. - -18 -00:13:11,070 --> 00:14:05,100 -Scott Tolinski: Yeah, definitely. Yeah. And it's one of those things you might not even necessarily know you're having the problems you're having until you make that change or make that modification, then all of a sudden, you're like, Oh, this is way easier for a lot of reasons. And it's saving me this kind of hassle that I didn't know I had. So yeah, Redux is great. Another thing I like about Redux is their documents. I don't know if it's redux.org, or something. The document page for Redux is just, if I had to put it in the document, like Doc's Hall of Fame, yeah, Redux would get there because they have complex examples, simple examples. They answer all of your questions they have paid for best practices, it's not necessarily a great resource to start learning from. But when you've gotten your hands dirty a little bit, it's the best place to really solidify concepts and stuff like that. I'm with you on the Apollo tip. I've recently, definitely, definitely been hit by the Apollo, - -19 -00:14:05,730 --> 00:14:07,080 -Wes Bos: get bitten by the bug, - -20 -00:14:07,260 --> 00:14:11,460 -Scott Tolinski: get bitten by the bug here. And I'm just head over heels for Apollo right now. - -21 -00:14:11,610 --> 00:14:57,300 -Wes Bos: That's a neat. So what else do we have to talk about Redux? I have a series myself on Redux is learn Redux, calm, I built it but a year and a half ago. So it is built with create class and some of the older react stuff, it's a bit of a problem with react is that it moves so quickly. But that said, I still hear from people every day who who took it, who take it and they say like, like Never mind, the fact that it's a bit of an older react API. Redux hasn't changed at all. And the it's more the ideas. It's a very short tutorial. And it's more the ideas and the behind how Redux works that you have to get down pat, because past that you can write the JavaScript code. It's not very hard JavaScript code. It's just like those those fundamentals right? - -22 -00:14:57,990 --> 00:14:59,010 -Scott Tolinski: Yeah, definitely. - -23 -00:14:59,700 --> 00:18:28,500 -Wes Bos: Um, Should we just sponsor? Yeah. So our sponsor today is deadlifts. And deadlifts is on a mission to to get you healthy as a developer and I myself have went through this, we had a whole episode on fitness if you want to go back and listen to how that worked. But essentially how it works is that you, you talk to deadlifts, and you fill out a questionnaire about where you're at what your goals are, what you want to do, if you want to get healthy, if you want to put on some muscle, you want to lose a little bit of weight, and you just sort of like, give them all this information. And what they will then give you is, will come back to you with a personal training plan that tells you based on your current situation, how much time you have what you want to do, the plan that will will get you to where you want to be. So for my case, I wanted to lose 20 pounds, and I wanted to put on some muscle and I wanted to do it in about four days a week, because I don't have a whole lot of time. So based on that they recommended a workout routine, they recommended a nutrition plan, you get access to the slack, you get a talk with a whole bunch of other developers who are also sort of in in a similar spot where they're trying to put on some muscle or trying to lose some weight or whatever, you're getting more flexible, whatever it is that you're trying to do. And I've been a huge fan of this, because like, I don't really need a personal trainer, like I can go to the gym, I can watch YouTube videos and figure out how to do it, I just don't know what to do. And so what you do is you you pay the right now it is 250 bucks. And if you use the code syntax, you're gonna get 50 off. So it's gonna be, it's gonna be 199 for you right now. And for that you get this really customized personal training plan. And you also get that they will follow up with you every single week and see how you're doing if you need any tweaks to your plan. And then you have this plan and you just might not always says like have your plan, work your plan, right? Like you get you get the plan and then just go and do it. So for me, it's I go to the gym four times a week for 45 minutes. I lift the weights this many times I lift this heavy away every single time. And it's works. It's amazing if you just like stick with a plan and work through it. And amazing. Yeah, that works. Yeah. It's really funny how, how simple it is. It's, that's the thing people say like getting in shape is is easy, or it's simple, but it's not easy. And having a very clean cut plan like this is it makes it a lot easier for you. So this episode is I think it's coming out on January three, which is probably everyone's trying to get into the new year's resolution. And let me tell you, we went back to the fitness episode. getting in shape is massive for being a developer just because of the mental clarity and amount of energy that you're going to get from from being in shape. It's like the ultimate hack, like forget text, expander and keyboard shortcuts, the ultimate hack is getting in shape and being able to put in an extra or not necessarily put in an extra hour, but get more out of the limited time that you do have on there. So no big fan. Yeah, yeah, that sounds dev lips.io. Let them know that syntax has sent you. It's I frankly, they're amazed at how many syntax listeners have already joined up and then signed up for these plans. So it's it's kind of neat. The the chat room is almost entirely syntax listeners. And it's kind of cool to see everybody getting in shape together. - -24 -00:18:28,890 --> 00:18:30,780 -Scott Tolinski: Yeah, love it. I absolutely love it. - -25 -00:18:31,650 --> 00:18:36,390 -Wes Bos: Let's move on to a listener question. We need a funny name for the listener question. - -26 -00:18:36,800 --> 00:18:39,270 -Scott Tolinski: I don't know if it's a funny name, but we've just called the mailbag. The mailbag - -27 -00:18:39,270 --> 00:18:42,990 -Wes Bos: snack bag, though. Yeah. - -28 -00:18:43,170 --> 00:18:47,220 -Scott Tolinski: What do you what do you keep snacks, or treats in the pantry? - -29 -00:18:47,330 --> 00:23:39,510 -Wes Bos: Where it's where someone asks you for something like a bottle? We'll think of something stupid. Don't Don't worry, folks. What What is our our question today, Scott? Oh, it was actually I got it. I remember it now is what is the difference between using cookies and using j WT, which is JSON Web tokens. And I'll attempt to take a stab at what the differences so in the past most if you have application you and you log in, what happens is that your your application will create a session, which sort of like temporarily remembers who you are. If for however long like if you if you click a button that says Remember me for two weeks, what the server does is it creates a session that is good for two weeks, and then after that it will, it'll be thrown out. Now what happens is that you every time you visit a website, every request like if I go to Wes bos.com, and my server will get a request from the browser. And along with that request comes all of the cookies that are currently in your browser for that specific website and one of those cookies is a session And that session ID is a way for the server to remember who you are because servers are dumb, and they don't remember you from page to page. So in order to go from page to page to page to page, it uses that session token to remember who you are. And that's why you're not logged out when you go from one page to another. And every single request, whether it's an AJAX request, or whether it's a visiting a page that is administrative only, it will then check who you are at first. And that's, that's that's one way to do authentication in the web. Now, recently, we've been getting another way to to do this. And this is JSON Web tokens, where when you sign into a website, you get this token back about the user. And first of all, it's like, sort of like a hash, I forget what the encryption value is. But it's it includes information about the specific user. So if you were to decode this JSON web token, it will likely have things like your username, maybe your profile photo, and some other little pieces of information about you. And that's great, because this tokens sort of does double duty, it allows you to authenticate yourself. And then it also contains information about the currently logged in user. Now, these tokens, they can go into places they can go in the cookies, which is sort of like the old session ID version, or I shouldn't say old but this JSON web token that is much newer, or and most likely This is where they go is people put them in local storage in your browser. Now, the thing about local storage is that it doesn't get sent along the way, it doesn't get sent along. And every single request, it doesn't go for the ride whenever you want. So rather than having the server remembering you with sessions, you just have this JSON web token. And every single time that you make a request, you have to send this JSON Web Token along for the ride. And it's sort of like an API key or a secret code that will tell the server, hey, I'm this person, I've been authenticated here is my specific code. And there's upsides and downsides to using both of them. The I guess the one thing with JSON Web tokens is that you need to make sure that you grab that token from local storage on every single request. And if you're using any sort of library, like axios, or Apollo, you can create some sort of like middleware. So every time you make a request, it will then grab the token for you. So you don't have to do it yourself on every single, every single request. And then it'll go along for the ride. So those are sort of two different ways. A general rule of thumb is if you're doing a traditional server rendered application, you still use cookies, because you need to make sure that they they implicitly go along with every single request. However, if you're using if you're doing an entire spa, single page application, like you're doing the entire app and react, it likely makes sense to to go with JSON Web tokens and, and you can take that along for the ride every single time. Because then you don't have to do any page refreshes. When you load in, you don't have to deal with cookies or anything. And there's this whole like, back and forth with like, if you have a secure cookie, you can access a JavaScript, but the browser still sends it along. So there's there's upsides and downsides. And there's also tons of blog posts on either side saying how JSON Web tokens is the most insecure thing in the world. And then there's other blog posts saying it's the best thing in the world. So do your own research on it. But likely, if you're doing a single page app in view, or react or sign you will be using j WT. - -30 -00:23:40,170 --> 00:23:51,060 -Scott Tolinski: Nice. Does that make sense? makes total sense. JW T's are sort of like an improved proved upon version of cookies Really? Right. Yeah. Yeah. - -31 -00:23:51,510 --> 00:24:00,900 -Wes Bos: Yeah. Because, like, you get the added benefit of it. Like actually contains information about your user in the JSON web token, which is is pretty nifty. - -32 -00:24:01,469 --> 00:24:03,360 -Scott Tolinski: Yeah. Cookies 2.0. - -33 -00:24:04,650 --> 00:24:26,340 -Wes Bos: I know there's there's a lot more to JSON Web tokens, and you should definitely do some some reading in terms of how it all works. But that's the that's the tasty treat version of the difference between the two. So thanks to whoever sent that in. I don't know. I'll try to remember the names of people ask these questions. You got anything else for me today? Scott? - -34 -00:24:26,729 --> 00:24:36,210 -Scott Tolinski: I got nothing. But uh, yeah, I think so. This is it for our mini episodes and then we're gonna be back or we're gonna be back in 2018. Is that when our next full as - -35 -00:24:36,210 --> 00:25:02,130 -Wes Bos: well this one should err on January three. So Happy New Year, everybody. We will be back. We're recording this in December because we need some time off. We've we've been worked overworked this year. We will be back on January 10. Back with a full episode and I think we're gonna be doing one on what are we Doing a graph qL maybe - -36 -00:25:04,170 --> 00:25:07,290 -Scott Tolinski: Yeah, I think we're I think we got graph qL a sink away. - -37 -00:25:07,290 --> 00:25:08,130 -Unknown: Oh yeah, I think we - -38 -00:25:08,850 --> 00:25:30,150 -Scott Tolinski: get some really good topic conversations coming up. Also I just realized I mentioned that in this episode that I said the series was coming out this month. I meant it's coming out in December so at the time Yeah, it will be out. So look forward start at level up tutorials forward slash tutorials. I don't know sir. That level up tutorials. - -39 -00:25:30,660 --> 00:25:41,220 -Wes Bos: backslash till the till they Yeah, so don't ski. Yep. Awesome. Well, thanks for tuning in. And we'll see in the next one. See it by - -40 -00:25:42,360 --> 00:25:51,480 -Scott Tolinski: head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax260.srt b/transcripts/Syntax260.srt deleted file mode 100644 index 4fd4092a6..000000000 --- a/transcripts/Syntax260.srt +++ /dev/null @@ -1,392 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:06,480 -development treats out there. strap yourself - -3 -00:00:06,480 --> 00:00:09,000 -in and get ready to live ski - -4 -00:00:09,000 --> 00:00:10,530 -and Wes Bos. - -5 -00:00:10,530 --> 00:00:47,189 -Wes Bos: Welcome to syntax today we've got a potluck for you talking about libraries vs. frameworks, are we still using Firefox? Who would win in a thumb war show? use jQuery or react isn't worth time learning design patterns, all kinds of really good questions. We are going to answer them for you today. If you have any of your own potluck questions, go to syntax.fm. And there's a button in the top right hand corner that allows you to submit it, keep sending them we love doing them. You love listen to them. Today, we are sponsored by two awesome companies Prismic, which is a headless CMS, and Freshbooks which is cloud accounting. How you doing today, Scott? - -6 -00:00:47,789 --> 00:01:03,119 -Scott Tolinski: I'm doing good. doing real good. I'm working on some fun stuff with video. I'm working on some new course stuff. I'm just feeling good about my coding, getting a little bit more sleep now. So I'm just I feel like a better headspace overall, I think how about you? - -7 -00:01:03,569 --> 00:01:22,380 -Wes Bos: Yeah, yeah, I'm doing really good. I've been I'm building a Gatsby course. And I'm just flying right along it. It really enjoying it. And we're up here still at my cottage, and everything is blooming. We're seeing all kinds of animals. There's a crow that has a blue jay as a buddy and they hang out together all day. It's really awesome. That's cool. - -8 -00:01:22,529 --> 00:01:23,910 -Scott Tolinski: Yeah, very cool. - -9 -00:01:24,119 --> 00:01:30,750 -Wes Bos: It's funny how like everybody over 30 turned into bird people. During the Coronavirus. Yeah, it - -10 -00:01:30,750 --> 00:02:40,440 -Scott Tolinski: turned into like a lawn. I mean, I've always kind of been a lawn person, but I'm definitely like spending a lot of time in my yard. Alright, first question from code finity. Why does react bill itself as a library instead of a framework? So the real answer here is the fact that if you've used other frameworks, especially things like Angular, or that would go as far as view definitely spelt, because spelt does a lot of this stuff for you. It really depends on how much the thing does for you, right? And react doesn't do a fair amount of things. And it wants you to have the community step in and provide it. So really, the main reason is that react, likes to think of itself as this this view layer for your application. It's the view layer, but it's not necessarily, at least currently, it's not the data layer. It's not necessarily providing a whole lot of things like routing and animations and image support. And yeah, like I mentioned, loading of data is a big one. I mean, think about a lot of frameworks provide a specific way to load data into them. And react doesn't do that. So it likes to think of itself as a view layer library that provides sort of the base level for things to be built on. - -11 -00:02:41,030 --> 00:02:44,130 -Wes Bos: Yeah, it doesn't even do templating. Like that's JSX which, - -12 -00:02:44,130 --> 00:02:44,789 -Unknown: right, - -13 -00:02:44,789 --> 00:02:56,789 -Wes Bos: it kind of is react, I would say, I don't think most anybody actually uses people do react without any sort of JSX. Or like, there's other libraries, but two people just use it straight up like react create element. - -14 -00:02:57,419 --> 00:03:10,770 -Scott Tolinski: Yeah, yeah. It's funny, because there's always like somebody on like Hacker News being like, I don't know why you would even use JSX. You just use the functions. It's like, come on that Yeah. Look less like fairly great looking experience. - -15 -00:03:10,829 --> 00:04:04,590 -Wes Bos: No, that would be tough. People do it. Next question we have here is from Amnon, are you all still using Firefox now that it has been six months, I can believe that it was actually six months. I still am using Firefox. I absolutely love it. The dev tools have been fantastic. To me. There's a couple little annoyances I have. But I've logged those all as issues and they are getting fixed. And there's other things like that breaking off a tab in Firefox is a little bit weird. Like it's so nice to smooth in Chrome. And the same thing with the Firefox iPhone app is not as good and it's annoying that it's the Chrome is way better on iOS. And it's annoying that your history doesn't sync between Chrome and Firefox. So that would be kind of cool. Maybe once or twice a week the Firefox iPhone app. I've just like forced quit it because it will stop rendering out websites. Those - -16 -00:04:04,590 --> 00:04:27,450 -Scott Tolinski: are some things that Apple makes intentionally difficult for developers like browsers. Yeah, keyboards? Oh, yeah. Firefox on Android in my experience was very good. I have not used Firefox very much on my iPhone, but I have installed and for the most part, it functions fine. But I definitely think that it's more likely a case of like Apple goofing it up or anything else. Right. - -17 -00:04:27,630 --> 00:04:47,550 -Wes Bos: Oh, yeah. I bet like a lot of the chrome iOS app is them just working around little bugs that Apple intentionally loads in so yeah, but desktop. I love it. I've been super happy with it. And they we also just got Apollo Dev Tools back after like two years. So now that's even one nicer thing for me. What about you, Scott? Are you still on? Are you trying other things? - -18 -00:04:47,850 --> 00:04:50,510 -Scott Tolinski: I've been on brave for a while now is - -19 -00:04:51,120 --> 00:04:52,050 -Wes Bos: three months I bet - -20 -00:04:52,070 --> 00:05:28,860 -Scott Tolinski: Yeah, probably at least. And I really like brave. There are some situations, which leads us let's say I'm not using Firefox anymore. But Only because I was seeing some monster monster CPU usage with it. And now I have no idea. If that's probably because I had 10,000 tabs open, it's most likely my fault. But I had I was seeing monster CPU usage. And so I wanted to try out another one specifically try out brave because I was missing some things in Chrome. And by things I just think I just mean, the general like, where things are even not used is mostly the same. I think I was missing like some of my extensions that I had come to rely on, used over over time. But - -21 -00:05:29,070 --> 00:05:48,930 -Wes Bos: let me say something every Chrome extension will work on Firefox, the whole that's what most extensions, I really like the Apollo dev tools. It's just a Chrome extension. And it just works on Firefox. The only reason it was gone was because of the head use Val and in Firefox pulled it out because of possible security issue. Yeah, back in there. No, I - -22 -00:05:48,930 --> 00:06:17,820 -Scott Tolinski: think about it, the more I'm trying to think of the reasons why went back I think I'm not quite sure why went back. I think it was mostly just the CPU and little things here and there like little annoyances here and there. Yeah, but it's mostly just the CPU and little annoyances. So I went back to brave, I wish I would have like, overtime, kept a diary of what I thought about this, because I don't remember over the course of time, what why I went back, but I remember it being not entirely grounded on, you know, facts in logic alone, you know what I'm saying? - -23 -00:06:18,270 --> 00:06:27,180 -Wes Bos: Yeah, sometimes it's just like, I don't know why it just feels different, or I just wanted it and I just like it, I can't put my finger on it. But something about it is enjoyable. - -24 -00:06:27,390 --> 00:08:23,910 -Scott Tolinski: So that ties in really well to the next question, which is also from an anonymous person, I doubt These are from the same person, they could be says, Hey, guys, is it possible to do a hasty treat regarding the brave browser, I would love to hear your opinions on the tech views approach, why we need another browser in 2020, I use brave exclusively because by default, they block all cross site trackers. And they do all connections are possible through HTTPS blocks, scripts, IP blocks, fingerprinting stuff, and one of the things I love about it is this little like line in the in the URL bar, that is their logo that tells you how many items are on a particular page in what they are and why they blocked them. So it like does a good job of being transparent in terms of like, Alright, this site, we blocked these many things because of this. Now there are some I found brave to be a little less fluid of inexperienced in some other browsers, even though it is basically chrome with more privacy protections, specifically, because those privacy protections, I couldn't even create an Azure account on brave like, even with all the shields turned off, turn the shields off. Look, try to create an Azure account every single time it gave me a fail. I opened up Chrome, same version, Chrome, whatever chromium, I open up chrome worked first time. Now, that probably says more about Azure than it does about brave. But to say that every single website is going to be a fluid, seamless, perfect experience on brave is definitely not the case. I don't know if I would tell everybody to use brave because you will hit situations like that. And some people just might not know how to get past that. Right? Like, oh, this site isn't working, the site must be broken. Well, I had to use a different browser. And no matter what I did in brave, it didn't work. So there are going to be situations like that brave people have, in my experience, no offense been a little sufferable. - -25 -00:08:23,910 --> 00:08:24,600 -Wes Bos: Yeah. - -26 -00:08:24,600 --> 00:08:38,899 -Scott Tolinski: With some of their suggesting of brave, so to say, we're really brave, like, Okay, I get it. It's good. I use it. But like, it is not a perfect experience on every single website out there. Regardless of what people try to make you think - -27 -00:08:38,999 --> 00:09:26,940 -Wes Bos: One really cool thing about Braves that I like is that they're trying to figure out like, what's the replacement for ads? Because obviously, they're blocking ads. And like, what are content creators going to do if you don't have ads on your, your blog or your video or something like that. So what they're doing is they're turning out the single bat basic attention token. And depending on who watches your video, or reads your blog, or something like that. Brave has a bunch of money that they'll then pay out like it basically is trying to figure out like, what are people actually enjoying the content and then from that content, they then pay out. I know, people that have brave, they put like 10 bucks into it a month or something like that. So it's kind of cool to see that they're trying to not also just block ads, but trying to fix How do you get creators, right? - -28 -00:09:26,940 --> 00:09:33,149 -Scott Tolinski: And there's this neat little like, send a tip directly built into where you can send a tip. I haven't used any of that stuff, though. - -29 -00:09:33,630 --> 00:09:41,070 -Wes Bos: Next question from not sure who would win in a thumb war. Wes or Scott for sure. Scott. I feel like Scott has some hand strength. - -30 -00:09:41,220 --> 00:09:59,760 -Scott Tolinski: Like I feel like you'd probably give a mean handshake I do give me that is for sure. Because my grandpa, you know and classic Polish Grandpa, even when we were like very little, like when he gave us a handshake. He would do knuckle roll where he would grab and roll your knuckles. Oh yeah. And the whole thing was like - -31 -00:09:59,779 --> 00:10:02,490 -Wes Bos: great But did that Oh, it hurts just thinking of it. - -32 -00:10:02,610 --> 00:10:29,070 -Scott Tolinski: You had to roll his knuckles before he did it to you before he'd be like, oh, okay, so like as like a trial that was always a shortcut there. So I definitely did handshake. Yeah, that's on point. And I do a lot of grip strength stuff. I do a lot of hanging from stuff that said, I have these little stubby thumbs, no calls my thumbs toes because they look like they're just short, little thumbs. I don't know if I have to do it. Like, if we're talking like, - -33 -00:10:29,100 --> 00:10:30,840 -Unknown: Oh, you don't get the tail of the tape here. - -34 -00:10:30,870 --> 00:10:48,450 -Scott Tolinski: Yeah, you've got the reach advantage. Most likely, yeah, maybe you have a power advantage. But you definitely have a reach advantage which can come in handy. I've never been particularly good at the Moore's I was going to say you specifically is my stubby little though. Maybe I can get a little data. Like if I get you. I'm not letting you go. But I don't know if I can get you. - -35 -00:10:48,480 --> 00:10:54,120 -Wes Bos: You're like a crocodile? Yes. Yes, exactly. All right. Well, next time we meet up in person, we'll have to - -36 -00:10:54,149 --> 00:14:04,559 -Scott Tolinski: we'll do a thumbs up for surely fun. Next question is from Andrew Peterson. What are your thoughts on exit state and state machines for managing state and applications? I've been super interested to try it. I'm interested to hear what you both think. also wondering if any recommendations on how to use it with Apollo, whether to use x dates internal context to Store app state, or use the Apollo cache, I have the same questions because you don't the one thing that's missing for me in x state is more examples of real world use cases because I can I can see a stoplight example, in state 1000 times, but I'm never building a stoplight in the web. So what I would love to see an x date if those of you who are using x date or state machines in general, a little bit more real world examples with like actual data coming in. And specifically even with Apollo or working with API's, because right now a lot of the stuff is very, like machine based, this is on this is off, this is waiting, whatever. And for those of you who don't know, the idea behind x state and state machines is basically that you have these different states that your application can be in. And the state is more than just like the actual state of this thing, the state determines where can go next, ie, if a state has to like a light switch, it has on off right, an on switch can only ever be coming off, and then off can only ever be coming on. And just like that the example that people use is the stoplight, right? a stoplight can go from green to yellow, but it can't go from green to red. And so the state says more about the intention of where it can go than just like the actual data itself. So I looked quite a bit at x state recently, because I'm building this new video upload system, which believe it or not, has quite a bit of state involved in building a video upload system. And so I looked at x data next state react considerably. And I thought, you know what, there's already enough complex things going on here that I don't want to learn a new state way of doing my state just to do this. But that's the only reason I didn't pick x state was because I didn't want to have to learn x state. In addition to all of the other new things I was doing, I ended up just doing like a react context in use reducer business. So I don't use state machines, but I've been very interested in them. And I've been watching a lot of YouTube around it both X state and state machines, as well as how the syntax can look within react and these neat little graph tools that they give you within x state, there's a lot of really cool things about x state. That said, I'm not using it currently. That doesn't mean I wouldn't use it, I find the idea of state machines to be both fascinating and a nice little computer science topic. It's used in video game development, it's used in in application development and all over the world. And understanding state machines is not a skill that is going to be specific to web dev. So for me, I find it to be a very useful skill to learn for overall computer programming stuff. I have not really taken the time I need to I would love to see an example repo of somebody using x date with Apollo in a real world situation and how that all works myself. If you have that. Go ahead and tweet us out about that. - -37 -00:14:04,980 --> 00:14:23,429 -Wes Bos: Ever since we had david on episode 206. Talk about state machines. I've been hoping for a little example a project that I could do it, but I haven't done it myself the question about Should I store my local state in Apollo or x state? I definitely wouldn't put it in Apollo. It's just too hard. either put it in context or something else don't - -38 -00:14:23,429 --> 00:14:36,960 -Scott Tolinski: i don't think that putting your local state in the Apollo cache as well as is probably the best bet. I think Apollo local state was a cool idea. And in practice, it always ended up being more work than I was hoping. Yeah, - -39 -00:14:37,110 --> 00:15:42,270 -Wes Bos: I think it might be changing a little bit for Apollo three coming out. But I remember reviewing it like three or four months ago and been like, still not as good as just using context plus, in terms of my course people just want to see context. Is this a popular thing don't want to learn. Next question we have here from Richard benign. Yeah, should I start a new project with jQuery or react? Baseball emoji? That's a great question. I probably would say this question should be more should I use vanilla or jQuery versus react? Because like, if you're gonna go ahead and build an app with a whole bunch of stuff in it, then then yeah, React is probably a good use case for that. But if you just need a couple lines here or there, you don't need to do the entire app and react. He just want to add some functionality. That's where you should probably reach for more of a DOM based library like vanilla or jQuery, I probably would just say, just go use vanilla. We're at a point now we have been for a few years where there's no benefit that I see in using jQuery over vanilla JavaScript, - -40 -00:15:42,330 --> 00:15:44,940 -Scott Tolinski: there's one benefit animating height auto. - -41 -00:15:45,929 --> 00:15:47,700 -Wes Bos: There you go. query. Still, I - -42 -00:15:47,700 --> 00:16:16,470 -Scott Tolinski: mean, okay, so let me let me preface this by saying both svelte and framer motion in react have the modern, beautiful version of animating height auto. But in vanilla j. s, I can't imagine that's any fun to do. Because you're gonna have to measure the thing, you're gonna have to turn on and off overflow hidden. I mean, there's a lot of stuff that I don't want to do that it's going to do for you. But still one of the things I was like jQuery, why can't anything else do this to the degree that jQuery cut? And now I can't I basically, but yeah, so good. - -43 -00:16:16,500 --> 00:16:31,230 -Wes Bos: There was so good slide toggle, and everything was so slide toggle. We don't need a lot of those UI things now that they're all in CSS, but CSS will never be able to animate Hayato. I don't think I know, it's unfortunate. You know, it's fortunate, - -44 -00:16:31,289 --> 00:16:33,029 -Unknown: what is that? Oh, look at you. - -45 -00:16:33,270 --> 00:17:20,160 -Wes Bos: So you want to check out Prismic Prismic is a headless graph qL CMS or REST API CMS, it's really cool. Because you sign up, you get in, make your data types, you make repeater fields, you can relate them to each other in great tags and tag them, the entire UI is done without writing any code. So if you want to be able to set up a back end, for a project that you're working on, and click it all together, you can do that probably I bet within 12 and a half minutes, you could have a couple data types up and running. And that's pretty nifty. It's called Prismic. It's at prismic.io. four slash syntax, you want to check out this website as well, because they've got a really cool Scott Vs. West, they've got a bunch of examples with view and react. Check it out for your next project. prismic.io for such syntax, - -46 -00:17:20,300 --> 00:20:03,690 -Scott Tolinski: cool, cool. Cool. All right. Next question. This is from var levy. Hey, guys. So a somewhat different question today. Oh, I'm basically a young teen, so less than 16 year old, with a passion for all things web development, awesome. However, without being able to legally have a job, I'm unable to make money and therefore running on a $50 Raspberry Pi and a 10 plus year old monitor. As much as I love my PI, just running npm install can make can be agonizing, I can only imagine. That seems like it's no fun. Not to mention the amount of space in node modules takes up on the device with 16 gigs of storage. So basically, any pointers on getting income and practice in the web development field when you are under 16. And just in general, what advice do I have to be a young team learning code? Yes, you know, you've got something going when a teenage boy would rather listen to your podcast, and watch Star Wars or Marvel this friend. So thank you so much, Bartleby. That is awesome. I wish I was listening to web dev podcasts, I wish podcasts existed when I was 16, or less than 16. That would have been pretty sweet. So let me give you a little tip here. If you don't want to install things locally, with your Raspberry Pi, hop on something like code sandbox, then you're not going to be taken up your own storage, you can build full applications on code sandbox. Granted, it's not the same as having your own personal environment. But there's there's options out there for cloud providers in terms of hosting your entire plot projects on the cloud without having to even have them grace your local machine, which would make things like installing node modules a ton faster, and not have to worry about storage or anything. So I would look into that. And a lot of these services like code sandbox, they can be free, so don't worry about the cost that it takes there. So that's one quick tip. Another tip and how to make money. I mean, man, when I was your age, I was like mowing lawns for for cash. Yeah, you can quote unquote, mow lawns, for cash with web dev projects. If you can get people who are willing to pay you to do them. That's going to be the hard part. Especially when you are your age, getting people to trust you to do stuff like that might be the time to reach out to your family and friends network to see if anybody needs anything like Oh, hey, I'll bill to this quick thing for this kind of money on and collect some cash. There are other options, but a lot of them would involve fudging some terms of service like getting your mom to accept the you know, Terms of Service on an advertiser or something and connect their bank account to it so you could maybe create something with ads on it to bring income in. Do you have any ideas here? Wes, this is a really fascinating to me because I had a job since I was 13 But it was a job job. It wasn't like a freelance job. And - -47 -00:20:03,690 --> 00:20:09,900 -Wes Bos: I was a just a hustler when I was a kid. And I just like read this question. I thought like, oh, man, this, this was me, - -48 -00:20:10,070 --> 00:20:10,820 -Scott Tolinski: I could imagine that - -49 -00:20:10,820 --> 00:22:07,230 -Wes Bos: when I was a kid, I was always just like, standing on the side of the road selling pairs. That's the paper route. And I had my own lawn mowing business. And like the fact that you're, you're under 16. Like, if you're over, like 10 years old, I bet there's something you can do. And this doesn't even have to be go and build a website for a local company, that'd be amazing. But like, maybe you just need to go, mow couple lawns, shovel a few driveways and save up a couple hundred bucks in order to buy your first laptop, there's a lot to say in terms of what I call like, paperclip mentality where I don't know, try, go mow a few lawns, buy a cheap laptop, and then use that cheap laptop to start getting really good at web development, then maybe build a few websites and buy a mark spensive laptop and you sort of just trade up and trade up, there was a guy in Canada that traded a paperclip up and up to a house just by doing a trade by trade. And I think that's kind of one of the really exciting things about becoming a kid is learning how to make money and learning how to trade up and I don't think you need that much money in order to go buy like a Chromebook or something like that. And then like Scott said, like run the stuff in the cloud. This is especially true if you have slow internet NPM installs can take forever. But if you're running that in the cloud, you're using, we talked about a couple episodes ago, it was like VS code, like hosted, what was that called? code server. So you can like run VS code in the cloud and access it via a browser. Yeah. So you can have your files as well as your editor right in the browser. And then you can just go get like a Chromebook or something like that, or code sandbox does all of the stuff. Code pen. What's the other one glitch does all the server side stuff if you'd like to, and there's huge free tears on a lot of these serverless ones? So I think if you were to just go and do something, try find a way to make three 400 bucks, you can buy a Linux Chromebook, maybe a cheap Windows computer if you want. - -50 -00:22:07,290 --> 00:22:11,220 -Scott Tolinski: Yeah, right. Exactly. Yeah. Yeah, I think those are all good suggestions. - -51 -00:22:11,700 --> 00:23:19,830 -Wes Bos: The next question is from sore vermeiden. Is it worth my time to learn design patterns in JavaScript? That's a great question. So JavaScript has a lot of different design patterns. And what we mean by that is ways that you can structure your code or your functions or structure multiple modules. In order to make your application easy to reuse parts of your code. Those are design patterns. So is it worth learning them? I think so. But I did a lot of design patterns stuff before I really knew how to do a lot in JavaScript. And it went right over my head. And I don't think that I was helpful at all to spend time on that. I just started poking away and hacking things. And then you find yourself being like, weird, I'm copy pasting the same HTML, or the same JavaScript code from one function to another. And there's only these four bits that are different in each of the functions. And you go, Okay, that's probably what design patterns are. And then you start looking into them. You go, Oh, I kind of had that problem before. And that's how I could have solved it. So yes, learn them, but not the very first thing before you know what problems they solve. - -52 -00:23:19,860 --> 00:23:27,540 -Scott Tolinski: Yeah. What's a good example of a design pattern? Would that be state machine to state machines? The design pattern? There you go, Yeah, - -53 -00:23:27,540 --> 00:23:39,120 -Wes Bos: I would say don't go out and learn state machines. First thing, because you don't know what pain it's solving. Yeah. Our state machines design problem or design pattern? Oh, absolutely. Okay. - -54 -00:23:39,300 --> 00:24:09,750 -Scott Tolinski: I like know so little about design patterns that I don't know, even what constitutes a design pattern. You know, have you ever been to source making a.com they have a book called source, making calm design underscore patterns. And I've always really loved the look of this site and their work. So maybe I'll pick this up and read this through 406. Well, structured jargon free pages, that is my con 228. illustrations, understanding a dive into design patterns, - -55 -00:24:10,469 --> 00:24:14,670 -Wes Bos: examples in Java, c++, PHP, Python, and Delphi. - -56 -00:24:14,729 --> 00:24:23,730 -Scott Tolinski: It's not exactly a JavaScript book. That's it's explicitly not a JavaScript book. But a lot of this stuff is just straight up comp size stuff. - -57 -00:24:23,940 --> 00:24:27,870 -Wes Bos: Cool. Yeah, check this out source making calm. Cool. - -58 -00:24:27,900 --> 00:25:48,480 -Scott Tolinski: So next question is from Kartik says, I have a question regarding figma design to HTML conversion. For those of you who don't know figma has some interesting features, one of which is like a panel that just gives you the CSS of anything, you click on it. So you click on it gives you the CSS, or you can just do copy CSS directly from copy and paste really neat. I wanted to ask about the process. When transitioning from designing to code. Do you keep the font size padding height of images as same as defined in the design or do you take something different for let's Suppose the navbar is 115 pixels, I'm guessing the scenes tall? Do you make it the same as well or something else? Well, it really depends on your design. Because as we all know, designs are not exactly static, they can be fluid. So it really depends on the aspect of your design, there are some things I do take specifically from figma, I typically won't take width or height things unless they are like a max height or a max width, I guess maybe is a little bit different in terms of like a top bar, a top bar, I usually defined explicitly. I don't know us, but I usually define the top bar as being like two times the vertical rhythm height. So okay, let's break this down. Do you do know a whole lot about vertical rhythm? West? Yeah, - -59 -00:25:48,480 --> 00:25:48,990 -Unknown: yeah, we've - -60 -00:25:48,990 --> 00:25:50,790 -Wes Bos: talked about a few times on the episode. - -61 -00:25:50,850 --> 00:26:58,530 -Scott Tolinski: So vertical rhythm, for those of you who don't know, is basically like, when you have a line height of let's say, 1.5, and you have a body font size of 16 pixels, then you do 1.5 times 16, which I believe is 24, I could be wrong on that, then that would be the height of each individual line. So I would typically set my nav height to be like twice that 24 or 48. So then locate my top navbar is going to be 48 pixels tall. And I'll usually do that explicitly. And it's going to come from experience in terms of how much CSS practice you have. But you'll you'll get a feel for when things need to be explicit. And when things seem to be not. For the most part, what I would do if I were you would just be copied the st. css out of there. If you're copying the CSS at all, copy it straight out of there, and then just modify that remove things, tweak it whatever to be how you need it, because that data existed can save you some time writing that CSS. I personally just use the design guidelines as a guideline in hand code all the CSS myself, but the CSS exists there. And if you take that conversion, I would not keep things that explicit. - -62 -00:26:59,190 --> 00:27:12,630 -Wes Bos: I just look at it and eyeball it into place. Sometimes I'll do a little bit of measurements in terms of how things look, but pretty much just eyeball it, and then only use the copy CSS functionality for things like - -63 -00:27:12,660 --> 00:27:16,110 -Scott Tolinski: gradients, things that are annoying to type like box shadow, right? Yeah. - -64 -00:27:16,290 --> 00:27:40,920 -Wes Bos: Yeah. Yeah, absolutely. inbox shadows, very hard to eyeball as well. So if you've got it nailed in your design program, then you can just export that directly, which is pretty nifty. We need to do an entire show on figma, though, because I used it for my last project halfway. And I really, really liked it. I had some troubles with the internet, which is not figmas problem, really - -65 -00:27:41,040 --> 00:27:45,810 -Scott Tolinski: figma figma has some really cool stuff in it like the auto did you get into auto layout? - -66 -00:27:46,050 --> 00:28:12,300 -Wes Bos: No, no, I didn't get very far in but like I did the like whole, like layout my thing and I felt like comfortable in it. You know, you get into like a new editor for a video or something. And you're just like, oh, like how do i do the most basic stuff like this is frustrating. I felt very at home in in figma. So I think we should do a whole episode where I asked you questions about some of that more advanced stuff. - -67 -00:28:12,420 --> 00:28:22,110 -Scott Tolinski: I'll leave you with this tasty morsel an auto layout is basically a way to get a button that automatically resizes to the tech. Yes, that's in it. That's very nice. I mean, that's a basic use case for but yes, - -68 -00:28:22,110 --> 00:28:30,600 -Wes Bos: actually one question before I have no design programs allow me to do border top and border bottom. It's always got to be a complete square border. - -69 -00:28:30,750 --> 00:28:53,670 -Scott Tolinski: So framer web does that now. Only one I saw. It's funny. I saw Steve Stroger tweet about this thing. Oh, it's so cool. I wish Figment did this. And then the figma people were like, wait, what is this that's different, and then led to a big thing. So there is a lot of hope that it could come in figma at some point, because I think there was a lot of people saying I really want this do so - -70 -00:28:53,700 --> 00:29:00,810 -Wes Bos: it's like the only thing that we've had in CSS forever that has not made its way into a design program and not vice versa. - -71 -00:29:01,110 --> 00:29:03,000 -Scott Tolinski: Yeah, right. I know. I want it. - -72 -00:29:03,300 --> 00:29:12,720 -Wes Bos: Next question we have here is from Ahmed, you are both great at technical communication. How do we get better at technically me? - -73 -00:29:15,060 --> 00:29:21,480 -Scott Tolinski: Is that the most ironic love Yeah, that we've ever had here you flubbing the talking about being a an expert communicator expert - -74 -00:29:21,480 --> 00:30:30,060 -Wes Bos: technical communicator can't even read a sentence here how to get better at technical communication when self learning. Thank you. Yeah, I think this is something that Scott and I are both very good at is taking a technical concept and breaking it down so it is easy to understand or make sense or conveys all of the bits of the tackle. So what it does, how do you get good at that? I think there's there's two parts like one part is just getting comfortable talking and being able to get your thoughts out without being like, oh, oh, no, let me start again or no that was that was awful and I'm flustered and or being speaking in front of people or or creating something that you're going to put out on YouTube and being like, Oh, my voice sounds weird things like that. That's half of it, it's just being comfortable spewing words out. And then the other half is just thinking at it in terms of, like, I think this is just something I'm good is being able to, like, look at something, understand how it clicks in my head, and then spit that out into words. And hopefully, you find your subset of people that like the way that you explain things. - -75 -00:30:30,090 --> 00:34:08,820 -Scott Tolinski: Yeah, a key point to there is that like, different people are going to learn in different ways, and you're not going to be everybody's cup of tea. So don't like don't try to appeal to everybody with your explanations and really explain things the way that you know how to understand them. And think you'll find your your audience of people who understand things the same way you do. That said, there are some tools that I like to use specifically, these aren't things that I've created, like, intentionally, but like, I've noticed, one thing that we both do, is that we both use things like metaphor, or attaching to, like experience that a lot of people might have in their life to explain certain topics, or some people really lean on the jargon and technical depth of programming stuff. And some people Yes, we'll definitely understand and learn better through the technical jargon. There's just some people that are wired. But there's also a lot of people who are going to more quickly relate to a metaphor about mowing the lawn, or opening a package or something like usage of metaphor. And that way, that those kind of things are very crucial for people to understand, because that's how your brain works, right? You have these connections. And if you are able to say, Alright, these two connections exist like this. And now therefore, I have this prior base of knowledge. It's really easy to understand this concept. If you connect this abstract metaphor here. That is a something that people will use a lot in their normal day to day life. So I think that's a key aspect. Or both of us that use the metaphor whether or not it's planned or not, like you said, just getting comfortable talking is a big thing. And how do you get comfortable talking? In my mind, I had to do it through reps. If you watch a lot of early levelup tutorials, videos, I'm really awkward, especially when I'm on camera. When I started putting myself on camera, I was all like rando here and it just got better. Just got better through to sheer reps, talk things out rubber, duck it, discuss your code with yourself and your room, say like, Okay, so what is this code doing here? Well, it's it's toggling this, it's doing this well, and don't just talk about like, Alright, the x function is connected to the Y function is connected to the B function. It's more like the root of this thing. Describe your code, right? good comments, all kinds of things are going to help you understand the actual programming in a way that you could explain it to other people. I also use my wife as a rubber duck a lot whether or not she likes it, I discuss the problems I'm having with x y&z video encoders. And why they're bugging me, and she can listen if she wants to. or she can just pretend that she is listening and thinking about something in something else entirely. So a lot of it just comes down to practice. Next question is from Mike creevey. And he lets us know that it's just like gravy. What tools or other methods do y'all use to manage a spinning up new projects with all the assorted directory structures, tools and configs you prefer? For example, when I start a new project these days, I like Ts prettier es lint. And I want those things to play nicely together, I find myself constantly copying files from one project to another. And I haven't found a good abstraction allows me to set up a new project with the associated files, bonus points for a solution that can keep shared configs and dependencies up to date, I'm gonna go ahead and say, I'm not going to get any points little on bonus points here, because my solution to this is to copy and paste, that is my solution, I would love to know have a great solution to this that is better than what I'm doing. Because this feels like an area of optimization for me. Although I typically work on one or two projects, I do fire up a new project all the time to create a new tutorial with an often found myself wishing or missing I had various configs in there. - -76 -00:34:09,230 --> 00:34:35,040 -Wes Bos: My solution to this is I install all of these things globally on my computer. So anytime that I spin up a tiny little project, it just uses my global configs because there's nothing installed locally. So anytime I have any job, I've got a j s file in my downloads folder, it'll still apply prettier to it, which Oh, I really like so people always give me crap for installing it globally. Like it causes issues and things like that. - -77 -00:34:35,100 --> 00:34:39,570 -Scott Tolinski: What about your like configuration files? Where did those the you're installing it globally, - -78 -00:34:39,629 --> 00:35:22,230 -Wes Bos: they live in your your home directory? Hmm. Till the end, it's great because everything has it and then and then for like projects that as we're spending more than half a day on then I will go ahead and install everything locally for that project. And in that case, it's usually just my ESL and prettier For that I have my own config, that I just npm install. And then the ES lint config is simply just extends Wes Bos. And then I don't have to copy paste anything. It's just install that. And then there's also an NP x command on the repo for that, that will install all of the, like 19 dev dependencies that are needed peer dependencies sorry for too. I - -79 -00:35:22,230 --> 00:35:32,880 -Scott Tolinski: have a package to do that as well for prettier. You'd be great if it was just like, here is the level up tutorials settings for like everything. Be nice. - -80 -00:35:32,910 --> 00:35:35,850 -Wes Bos: Yeah, you should publish it. It's crazy. If people started using mine. - -81 -00:35:36,150 --> 00:35:48,650 -Scott Tolinski: Well, I have the prettier one is published for level up. It's just not I just don't advertise it. It's on the GitHub, if you want to look at it, you can. Yeah, but I'm gonna warn you if those of you who like semi colons are not going to be happy when you see it. - -82 -00:35:48,920 --> 00:37:43,590 -Wes Bos: That's the thing about mine is that people would be like, Oh, I just forked Wess and change this one setting. And I'm very clearly saying no, the whole point of prettier is and yes, Linda is that you just overwrite settings that you don't like. So take Scots. And then if you don't like one of the Settings, then just overwrite those few things. Yeah. Next question is Tom from the UK. Hi, guys, I'm 26 years old and working a full time job, I'm currently looking at the possibility between work and spending time with my partner, as I get maybe an hour a week to focus on learning JavaScript feels like it's going to take me literally forever to get anywhere, when I do want to learn something, there's always a better way of doing it. And when I get sit down, I have no direction your podcast is giving me small boost and motivation. But at 26 is that too all to make it into web development? Haha, no, you're you're a baby in web development, the web has only been around for, I don't know, 2025 years going to be around for much, much longer than that. So absolutely not too old. I don't think it's ever too old to get into something like that. And advice here, you have to spend time with your partner or, or learn JavaScript, um, I think at certain times in your life, if you're looking to make a really big change, or something like that, a understanding with your partner that this is a going to be a busy time, or that you really want to do this, this kind of thing, obviously, don't ignore your family or partner or whatever. But I think it's fine for there to be certain periods in your life where you really want something. So there's going to be a little bit of give on on both of your ends, in order to make that thing work, what to do small projects. That's why I made a lot of my courses, because small projects where you get something done are small wins. And that gives you the motivation to keep going. - -83 -00:37:43,940 --> 00:41:57,650 -Scott Tolinski: Yeah, definitely agreed on all accounts there. You know, I was lucky enough that Courtney was getting hired doctor. So like she was busy every single night, like any time, right, so we could hang out on the couch and both study together. And that's our search serve regards. So like you said it will take some buying on your partner. But that's always a solution to like, what if your partner wants to watch a specific TV show, and maybe it's not a show that you are interested in watching, but you can still put on your headphones and code on the couch next to them while they watch that TV show or whatever they're watching in still way to like spend some time together while you're learning something new. I mean, those are certainly options there. It's not always have to be like, Alright, I'm either studying working or whatever, or we're hanging out, you can do both at the same time. Another thing you can do at the same time, is run a business and keep track of your bookkeeping, because well, one of those will require substantially less amount of effort if you are using our sponsor fresh books. Now fresh books is the cloud accounting software that we know and love, which allows us to do all sorts of really cool stuff like sending invoices and little nudge reminders to say, hey, why'd you pay that thing allows you to do time tracking, keep track of projects reporting, there's even a great little mobile experience for you as well. I found so many things like this don't have a good mobile experience. So we're always out and about on our phones, these kids are on their phones these days, got to be able to keep track of our books from our phones using fresh books using their mobile app. So you'll want to head on over to freshbooks comm forward slash syntax for a 30 day free trial of fresh books put in syntax in the How did you hear about a section because they love hearing about that they love hearing that they heard about fresh books from syntax? Trust me, we are all interested in making money off of our side projects and having them support us in various ways, especially now that we're needing to be a little bit more creative. So check it out@freshbooks.com Next question is from Ui Ui says hi, Weston Scott, how do you set up a web development project for an enterprise level? There are so many simple tutorials and quick wins all over the internet. Oh, shots fired West. But how do you get more knowledge about a bigger enterprise ready, level technical stuff, how to organize a view app with greater than 60 pages. My project is an application on the shop floor of producing firms, mostly inputs and static charts, less than 50 concurrent people working within the application, how to organize the RESTful API? How do we resolve dependencies between an API endpoint one an API endpoint to how to share information between components and view state management? So there's a lot of questions here, basically, the end of the day, Lee is saying, Hey, where's all the tutorials on hard stuff, right, where's all the tutorials on the real world big stuff. And the problem is that the more deep you get into this, whether it's, you know, enterprise level, whatever your needs become very much more specifically your needs, and not the needs of enough people to make creating a tutorial on those things worthwhile. So what you're going to find is largely, maybe a little bit more bite sized things, so you won't find or even abstract things. So to say, you're not going to find a ton of tutorials that are like, here's how to organize a view app with 60 components, because that doesn't fit the needs of a lot of people, you're best off looking at things like application like front end application, structure layout, you're going to have to get more general to get the answers you're looking for at this stage. Because when you get too specific as you will, when it gets to that level, things will get more and more specific, and therefore harder to I think, reach an audience with teaching. So where is the content for this? I think that's where it is, I think you're gonna have a hard time finding it. Unless, of course, it's very specific to as it is, in terms of how do you learn this stuff? I would take each of these as bite sized problems and look at them as bite sized problems, right? How do you structure an application with a lot of components? Well, feature folders, I think it's a good idea. A lot of people seem to be doing it. But you might not exactly find that under the heading of, you know, a view app with 60 components how to structure that, you know, - -84 -00:41:57,690 --> 00:44:19,500 -Wes Bos: yeah, I think it's got nailed that there with the bite sized pieces. That's what you have to do. There's, there's not going to be a tutorial out there that covers absolutely everything. And you have to sort of learn these things, maybe independently, maybe a few things here or there, you pick and choose your technologies. And then it's on you as the developer, when you get to the level of building these larger apps to be able to decipher all of these things and put it into one big thing. So like Scott says, just break it down into smaller problems. And figure out often when you get into one of these topics, folder structures, REST API endpoints, sharing dependencies, there's often five or six different methodologies in each of those things. And it's up for you to sort of go and research and read the articles and whatnot as to how you should approach it. Totally. Next question is from UI print. He gave us a nice pronounciation for this one, Davey. Oh, yeah, I've done Wes is next jazz course, where he used to styled components instead of next own style JSX? What are your opinions on style? JSX? And why do you do or do not use so style JSX is basically you just put a style tag inside of your component. And then you give JSX backticks. And then you type your CSS inside of that. And then you're expected to use JavaScript for just regular JavaScript, regular state and everything for all that. I prefer styled components over that just because like j style JSX is very, very simple. It's very lightweight, it gives you a scoping built in, which is really cool. And for a lot of people that's that's quite honestly, for a lot of what I do, that's all I want is just to be able to do scoping and things like that. But there's a couple nice little things that are installed components, the way you structure them, quite honestly, a lot of my choices around JavaScript in our CSS in react applications are just based on how it looks, which is like not necessarily performance or whatever. But some of the like back in the day, they were always like based on objects. And the fact that you couldn't use dashes was just like, a no from me, because like, I want to make it feel like as I'm writing CSS as close to possible not to say that style JSX isn't that because you literally just write CSS inside of the style tag. But I don't really have a super convincing answer to that other than there's just a couple things I like on subcomponents a bit better. - -85 -00:44:19,500 --> 00:45:45,480 -Scott Tolinski: You're also really locked into I mean, that's there's more a greater degree of lock in with it than there is with styled components because they'll Manas you can take with you to any react other place. I don't know if you can spell JSX I haven't looked into it. But my understanding I like to keep pretty like if I'm going to lock into something it's going to be into, like you could just say okay, React style components locks you into react, okay, but I'm not going to most likely change out of react because that's going to be a big enough project of its own. So like, I think it was brave of you to say that you care about how it looks because I care about how it looks in like I feel like Sue oftentimes that that view Point is minimized in the discussion of things like, I can look at some code and say this is ugly, I just don't like this. And people say, Who cares if it's ugly, it's the best way that it works. And, well, I got to, I have to look and iterate upon this code, I have to understand it, I have to parse it, I have to be able to ship it. And sometimes how it looks is very important in terms of for me, like, how the code functions. And so I don't know I really prefer style components, because I can copy and paste from CSS and just drop it right in there. Like you said, you can do that with this. But I don't know there's there's not a whole lot of fancy special stuff within stuff components that I utilize anymore, because I use CSS variables to do all that stuff. And I just basically use it as scoping wrappers for my stuff. And you can take it with you to wherever you want. - -86 -00:45:45,840 --> 00:45:53,970 -Wes Bos: That's something I've been thinking about a lot lately, Mike, I'm really not using any of the style components, the interpolation stuff. And the - -87 -00:45:54,000 --> 00:45:56,580 -Scott Tolinski: file system reframes stuff like - -88 -00:45:56,580 --> 00:46:20,490 -Wes Bos: that, yeah, I don't or the providers or any of that. I'm like, maybe I do need to take a second look at something that just gives me scoping. Maybe at some point, I'll do another round of these. I just remember like to you three years ago when I first got into style JSX. I was like, I don't really like this as much as I think also the another big one was at the time, it didn't work in it. And if my tooling wasn't there, I was just like, - -89 -00:46:21,060 --> 00:46:46,980 -Scott Tolinski: Oh, yeah, the tooling is not there. Count me out. Sure. It works. Now there used to be the main reason why I didn't want to leave Sublime Text was because there was high yakou which was an Emmet like thing, but it was a little bit smarter. And I missed so much. I still miss hierarchy so much. I missed it all the time. But I got over that, but it because it's not that bad. But again, you're you're totally dead on if the tooling is not there. Things are going to work in that regard. Count me out. Out big out. - -90 -00:46:47,430 --> 00:46:52,020 -Wes Bos: Let's move on to some sick pics. Do you got any sick pics for me today? Scott? - -91 -00:46:52,320 --> 00:48:24,660 -Scott Tolinski: I do. I have a podcast. I listen to a lot of new podcasts lately. So I might have a few suggestions here these there may be some different ones, then there's some types that I haven't been into before. But this podcast, let me tell you is really fantastic. There's two of them here. One is called myths and legends and one's called fictional. And what this post does is he breaks down myths and legends like the Odyssey and you know, the King Arthur and stuff like that. And he breaks them into more digestible chunks. So you're getting the gist of the story, you're getting the overarching themes of the story, you're getting the characters, you're getting what happens without spending, you know, hours upon hours learning about this stuff, because I don't know a ton about a lot of these things. Like, I guess I know a little bit about mythology, in some sort of ways are in whatever, but I just found these to be fascinating. And he also has one called fictional where he basically gives you the recap of famous books, he'll talk about the time machine, and he'll tell you the story of the book of the time machine in two episodes. And maybe that's like an hour and a half worth of your time. He modernizes it to a point where it's occasionally annoying. So he'll be like, oh, and then so and so texted so and so and I'm this kind of roll my eyes a little bit, but 99% of the time, it's non non cringe inducing, and occasionally it's cringe inducing. So if you can get over that one percentage of cringe inducing things I really appreciate and enjoy this podcast. I've been listening to it a lot. - -92 -00:48:25,050 --> 00:48:38,490 -Wes Bos: I mean, a sick pick something I sick picked a couple years ago and I just react on it and wanted to tell you how much I love it. And that is ready to get ready for it. pre cut parchment. Oh, yeah, it's for your baking Show of hands. - -93 -00:48:38,670 --> 00:48:52,080 -Scott Tolinski: Yeah, cuz I tweeted at you. And I was like, Whoa, and you were like I sick pick this. And the moment you said that I remembered that you say picked it. But I was I totally forgotten that you had because we say pick a lot of things over the past 260 episodes. That's true, - -94 -00:48:52,080 --> 00:50:26,940 -Wes Bos: very hundreds of things. So it's essentially what it is, is just partially on paper that is pre cut perfectly to fit a half sheet pan. Honestly, it's the biggest life changer ever. Because parchment paper, I cook on everything. And I know there's these reusable mats and things like that. But I do it a lot on the barbecue. And I also just love just throwing out if I roasted veggies, you just throw out the thing. I know that it's not environmentally friendly or whatever. But it's so good for cleaning up and just cleaning up at the end of the day and making everything nice and fast. And I did the math the other day, because I buy a 500 sheets at a time, which is enough for I don't know, like a year or two. It's enough for 500 and I did the math. That's 500 There you go. That's, that's a good way to count it. I paid 32 bucks or 500 sheets and then I went to the store and looked at how much it was and it was half the price to buy it pre cut. You don't have to worry about the stupid little razor blade on the side of the box. Not working and kind of getting by and yeah, yeah, exactly. So just one of those life changing things that you can you can do in your life. That is just a couple bucks. So pre cut parchment paper cool. Very cool shamelessly plug, I'll shamelessly plug my beginner JavaScript course go to beginner JavaScript calm is a course that will help you with all of the ins and outs from scratch all the way up to working with the DOM and design patterns, things like that. It's a really good course beginner javascript.com Use coupon code syntax for an extra 10 bucks off that's even if it's on sale, you can still use that. - -95 -00:50:27,390 --> 00:51:07,080 -Scott Tolinski: Cool, I'm going to shamelessly plug my latest course which is on sapper who teach you how to build a really insanely fast site with sapper we teach you all the ins and outs if you don't know sapper is the sort of next JS analogous framework for spelt, where you get either a statically generated site or you get a full server side rendered site with server side API's and things like that all of the same server stuff you'd come to know and love. You also get client side folder based routing, full stack folder based routing even up and down your API routes. It's really cool. My website is built in sapper I'm a huge fan of it. So if you want to learn sapper, head on over to level up tutorials, comm forward slash pro sign up right now and you will save 50% off the year. - -96 -00:51:07,530 --> 00:51:08,040 -Unknown: All right. That's - -97 -00:51:08,040 --> 00:51:13,620 -Wes Bos: it for today. Thank you so much for tuning in and we will catch you on Monday. Eighth, - -98 -00:51:13,740 --> 00:51:25,860 -Scott Tolinski: please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax261.srt b/transcripts/Syntax261.srt deleted file mode 100644 index 891212430..000000000 --- a/transcripts/Syntax261.srt +++ /dev/null @@ -1,152 +0,0 @@ -1 -00:00:00,359 --> 00:00:00,870 -Unknown: Monday, - -2 -00:00:00,899 --> 00:00:02,580 -Monday Monday, open wide - -3 -00:00:02,580 --> 00:00:07,590 -Announcer: dev fans yet ready to stuff your face with JavaScript CSS node - -4 -00:00:07,590 --> 00:00:09,060 -module BBQ Tip Get - -5 -00:00:09,060 --> 00:00:19,980 -workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, - -6 -00:00:19,980 --> 00:00:21,660 -Bob and Scott Taylor. - -7 -00:00:23,610 --> 00:00:24,480 -Unknown: Totally in ski. - -8 -00:00:25,950 --> 00:00:26,730 -Oh, welcome - -9 -00:00:26,730 --> 00:02:41,100 -Scott Tolinski: to syntax in this Monday tasty treat, we're gonna be talking about rural and mobile internet revisited. We're going to be talking all about some of Wess trials and tribulations to get his mobile internet up and running. I guess you can't really call mobile, but your internet I should say up and running in the Chateau de boss. So my name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado. And with me, as always, from the full stack shack is Wes Bos. I like that I actually hung up the sign behind me can't see me. So I got my video off right now. But because you're now says, Yes, because the internet is slow. I made this like cool sign with a router. It says the full stack shack. Nice. So this episode is sponsored by one of our super cool sponsors, and that is Log Rocket. Now Log Rocket is the service that allows you to see how and why bugs are happening on your site is very, very cool. It's one of those things you're running on checkout to actually see just how cool it is. Because what they do is they give you a full video scrubbable replay of what's going on in your application, when the user click the thing and how the thing happened that led to a bug, which means that you get to actually see what happened. It's like you suddenly become it'd be like a detective with the brain power to see in the past and see how somebody committed the crime so that you could solve it very easily, right? I mean, that's exactly what Log Rocket is doing. It's giving you that superpower to be able to see back in time and see what happened when the user click that thing. And the thing broke. And it integrates with all the tools you know, and love, such as just about any framework. I mean, it doesn't really matter. But it also connects to your Redux store, in case you're using Redux. And it connects to a lot of other tools, like some of our other sponsors, or other tools that you use. It's a very, very, very cool platform. And you can now host it in the cloud, or you can host it on your own servers. So a lot of cool stuff going on with Log Rocket, check it out with Log rocket.com forward slash syntax. Let's get into it. So a quick primer. For those who didn't listen to the last one. About a year ago, we did a show on getting Rural Internet and I - -10 -00:02:41,100 --> 00:04:51,950 -Wes Bos: realized man, Well, not exactly a year ago, probably like 10 months ago. But yeah, it was it was a long time ago. So I've been playing with this stuff for probably a year and a half. And just because like my wife and I about a year ago, we bought a cottage in Northern Ontario. And there's not a whole lot of options for internet yet. And I've done all the research and played with all the things I've spent a bunch of money on different antennas and modems and routers, and different ways to go about it. And I get questions all the time of like, how do I do this, because like, one of the cool things about being web developers, you probably can work from anywhere. And especially now that we have this pandemic going on, people are like just being able to go wherever they want and be able to work from that as long as you have a good solid internet connection. So I think that's pretty cool. I really think that having like fast internet is a bit of a human right. It's obviously not like food and water. But certainly I see people out here that are locals struggle with getting fast internet. And it certainly gets in their way, especially now that we're trying to do school from from being online. So what I'm going to do in this episode is sort of break down the different options, and then go into my setup as to how I've made it work out here. So I'll go through the options real quick. You've got Satellite Internet, you've got wisps, and you've got sale cellular LTE for different options for getting internet. So there are no phone lines that reach out or I am as well as many rural places. They have phone lines, but they don't have DSL. So most people say oh, just get DSL. But you can't do that. Because the way that DSL works is that they run a fiber line and they have a box somewhere in your neighborhood and then they they run the last leg of the internet over the phone lines. And if you don't have a box anywhere near your house, then there's no way you can get any any speeds past dial up over your phone lines. There's also no cable connections out in most rural places. So you can't that's a hard word to say rural. - -11 -00:04:52,200 --> 00:05:00,720 -Unknown: It is it's really hard for me to say rural, rural, rural. Yeah, so that can be an option there right there. Because that's trying to They roll - -12 -00:05:00,830 --> 00:06:12,510 -Wes Bos: someone out to the soundboard. So satellite has been an option for a long time in Canada, we have one called explore net in the States, the big one is Hughes nets, these companies have one or two satellites up in up in the air. And they have very high latency like over a second latency, which is really bad. Like, if Scott were to run a speed test right now, go go run a speed test and tell me what your your ping is. If you open up your terminal and just type ping google.com, or ping Wes Bos calm, the amount of time it takes to send a small amount of bytes, or the amount of time it takes for my voice to reach Scott is what is called latency because obviously there is it takes a while for data to travel over the wire. But if you were to send a very small amount of data and just like a pulse to someone, you have some sort of latency that's generally measured in milliseconds. So at home, I have like a 20 millisecond. And that's on a fast cable connection. I'm tethered to my phone right now. And that's a 60 millisecond latency. And then once you get on to satellite, they often get into hundreds if not a seconds of latency. What do you have? - -13 -00:06:12,750 --> 00:06:27,450 -Unknown: I'm on my Wi Fi connection, and I have four millisecond. Yeah. That's like nothing. I bet if you were wired, you'd get you'd get even less than that. Yeah, because I mean, I'm getting a quarter of my speeds right now. - -14 -00:06:27,750 --> 00:07:55,380 -Wes Bos: Wow. Yeah, yeah, I've seen people with fiber post one millisecond. And I'm getting 60 on an LTE connection right now. And that just goes up from there. So satellite was not really an option for me just because of the high latency as well as the congestion. And then the speeds as well. The upload speeds or download and upload speeds are pretty awful for that. We are I've been watching a lot lately is starlink, which is Elon Musk's SpaceX company, they are they have been launching low orbit satellites. There's also another company called one Webb that's working on this as well. And they are launching satellites that are much lower than hughesnet and explore net. And they're saying that you'll be able to get 400 megabits down and about 30 milliseconds latency, which is still not fiber. But that's extremely fast for people who are in a lot of rural location. So that's what they're they're aiming for. It looks like at the time recording, we're recording on June 1. And they're about two months out from private beta testing, and four months out from public beta testing. Hopefully, in I don't know, six, eight months from now, this entire podcast will be obsolete, because especially in in all of Canada and northern us, there is going to be a satellite internet via starlink. So that's what they're saying. Obviously, proof is in the pudding, whether they can actually deliver it or not. But I'm very much excited to to get that out here. - -15 -00:07:55,710 --> 00:08:24,300 -Unknown: That's all fascinating to me, because it is it does seem like something's going to change very quickly. But it's kind of seen that way for a while. The whole satellite internet thing is sort of been teased, or whether that's internet via balloons, or all sorts of these different strategies for bringing internet to underserved areas, whether that is rural areas, or just in the middle of Africa or something, right. So it's such an interesting topic that I wonder what the actual timeline looks like, you know, - -16 -00:08:24,840 --> 00:09:33,900 -Wes Bos: yeah, I've been watching it like crazy. And they're obviously going going quick, but like they still have to test it. Once all that like all the satellites are not even up they still have at the time recording, they've still 15 more rocket ship launches before they can for the end of the year before they can get all these satellites in the air. So looking forward to that. The next one we have here. I won't spend too long on these because these are not the options that I went with. The next one is a Wisp stands for wireless internet service provider. What happens is that somebody in the community and these are generally very small internet service providers, not like a Comcast or something but I'm part of a Facebook group and sort of just watching and it's generally somebody that has a little bit of land or a place to put a tower they'll throw up a tower, they'll pay to get fiber run from the local city or they'll be made in from the local city if they can have line of sight and then they will broadcast on generally they broadcast them on unlicensed spectrum so your cell phone will often run on a 700 megahertz or like five G is going to be running at 30 3030 megahertz. Whoa, hold on let me look at Did you know what is that five - -17 -00:09:33,900 --> 00:09:43,380 -Unknown: G's? It runs at the exact megahertz that will scramble your brain according to some people. Did you see that? That whole scam there was like some five USB dongle. - -18 -00:09:44,189 --> 00:10:23,940 -Yeah, the USB dongles. So for those of you who don't know, there was like a town hall meeting. I think it was in England. Basically these people saying Well, we've used this item to block the five g that harmful five g rays that are penetrating our brains, as well Coronavirus. came from. Yeah, that is where Coronavirus came from and it's been very effective using this dongle. And then somebody found out it was just like a 512 megabyte USB dongle with the sticker on it. And they were charging an insane amount of money for it oh my gosh, makes me feel bad for a lot of people because they make me feel bad about the education system for people that fall for that kind of stuff. - -19 -00:10:24,359 --> 00:12:07,200 -Wes Bos: So 5g is 25 to 39 gigahertz that is pretty high in the spectrum, obviously depends on your local government and who sells the spectrum, generally us and in Canada are, are the same as well, we're getting 5g as well, there are places in the spectrum that are unlicensed, meaning anybody can run them. And that's why if you buy a walkie talkie or a baby monitor or something like that, you're allowed to just broadcast the signal over that. Whereas if you want to run a ham radio, you're not allowed to do that without a license because different megahertz and gigahertz of the spectrum are license. So generally, the way that these widths work is that I didn't even know this until there was rumors of a Wisp going up in our location. They run basically a massive Wi Fi router, they put up a tower that's about they try to stay under 100 feet in Canada, because then you don't need a license to put up a tower or a permit or anything. And then they just rebroadcast the internet signal on 2.45 and five gigahertz, which is the same frequency that your your Wi Fi router runs on. And because those are unlicensed, it seems pretty cowboy. But it definitely is the way that a lot of smaller communities work. And there's been rumors, I've been talking to the local ISP that they're putting up a tower on our Lake, but every time I ask them about it, they're like, yeah, hopefully soon, maybe next week, and it's been like a couple of months of that. So unsure if that will actually ever happen. But with seem to be like that's what I would look for if you live in a rural place. There's generally someone that invests 10 $15,000 into a tower and trenching fiber all the way there. - -20 -00:12:07,529 --> 00:12:08,250 -Unknown: That's wild. - -21 -00:12:08,669 --> 00:14:26,340 -Wes Bos: And then the final one, which is what I've gone with is just using the cellular networks in your area. So if you have good cell phone signal, which often lot of rural areas will have a good cell phone signal or good enough to reach their area, you can try to use that to get your internet and I'll talk about the plans in just a second. But that certainly is a good option. Some of the wisps do use LTE as well. But it's not like a cell phone provider LTE, it's just a localized, so they'll throw up one tower with LTE signals that broadcast out of it. That's sort of another option versus the five and 2.5 gigahertz. So let's talk about routers and modems. If you want to use cellular LTE, you need to go off and get a router that will support that as well as a modem card that will support that. So popular routers that are out there, they you can pretty much run any router that will run this OS that's called golden orb or router it's called. What that is, is it's a version of open WRT so open WRT is like a custom modem firmware that you can throw on. I don't know there's a list of like 100 different routers that you can go buy for hundred bucks and they all run on that as long as your router has enough like RAM and has the different chipsets in it, then it will be able to run in the difference between open WRT and golden orb or router or the one I've used is called why fix they're all based on the same thing. They have added code in order to communicate and configure LTE modems because generally your router doesn't care about being a modem. your router just takes in a like an ethernet cable from whatever your cable or DSL or fiber connection is this custom I'll just call it router will run on you can go and buy like a Netgear modem and hack it to run that on the pretty popular one out there is called the W e 826 dash T two and you can just google this it's something like 40 bucks on eBay it's nice and small it runs on 12 volt which is important because that means you can plug it into your car as well or you can just go ahead and buy it comes with - -22 -00:14:26,909 --> 00:14:38,430 -Unknown: a 12 volt plug like the DC the the cigarette jack yeah right yeah, cuz exactly USBs are only five volts as far as I'm aware, right? Or maybe they're more now but I think in the past they've only been five. - -23 -00:14:38,699 --> 00:15:35,670 -Wes Bos: Generally it's dependent on the little nub. So the knob that you plug into your car or the knob that you plug into your wall will either take DC to DC stepped down so your car voltage is DC and that will take 12 volt and step it down into generally five or 2.1 or your the wall one will take one to one In North America and step it down into what you want and they certainly can go much higher though and that's why you get these bigger blocks when you buy an iPad or even bigger when you buy the one that comes with your MacBook now so it's definitely depend on that as well as like the spec, there's a limit to how many volts can go over a USB cable. So that's like a super popular one. That is just a router. They generally don't come with modems installed. I'll talk about that in just a second. And then other option good options are and very popular right now is the Nighthawk m one. - -24 -00:15:35,939 --> 00:15:37,620 -Unknown: Oh, yeah, that looks cool. - -25 -00:15:37,860 --> 00:21:15,990 -Wes Bos: Yeah, it looks very cool. DMR 1100. Ever since the pandemic came out, they went from I bought mine for about 200 bucks. It's great. It's got a little screen on it. that'll tell you what's going on has a nice battery on it that lasts quite a long time. So it's it's pretty portable, you can throw it in your, in your bag, something like that. So that's, that's a really nice option. It comes with a comes with a modem inside of it, it will do up to like 10 different devices or something like that. And then it also has an Ethernet out that you can plug into your your regular home networking setup, which is pretty cool. The only downside to that is it's not super hackable, because like they don't give you full control over absolutely all your IP tables and everything like that, like you would with open WRT or router, but it's pretty popular, and I really like it as well. In the last podcast we did, I said I'm using the Zed te mf 288. And that is a good very good router. But it doesn't it's not the khamba custom firmware on it, you can't put your own modems in it. So if that works for what you're using, that works great. There's a local carrier bell that uses those. So we have a plan with them and I threw that SIM card in there. So those are sort of the the three big routers that are out there. There's certainly lots of other options. But if you want something that's easy go with probably the 826 T two or the Nighthawk m one. We'll talk about modems. So modems are the things that take an actual SIM card and convert that into a data connection. And there's two types of modems, you have a host modem, which is like if you've ever seen like these little plug in USB things that you plug into your laptop and it has a SIM card in it, that's a host modem. And there are more popular the PCIe cards, or they're actually mini PCIe. Or they're this other thing called an m two card. And generally these modems are tiny little cards that you can generally slap into your laptop or into one of these modems. And then it will read the SIM card data from either an adapter or from your your modem. The Wi Fi 26 comes with a SIM card slot in it that it will read that data from popular modems out there. The most popular ones are from Sierra wireless, which is owned by Netgear. So if you buy the Nighthawk, it comes with Sierra wireless, or you can just go buy these cards, there is a popular modem that is on Amazon. That is you can look up these things if you're really into it, I won't bore you with the the details of it. But there's a popular one that were pulled out of old Dell laptops that can be flashed as a very popular shear wireless card. So those are probably the best I went through a whole bunch. There's also another company quiz out qu EC L, they made popular ones, but in in my experience, they don't work as well. And they're not as configurable as the Sierra wireless ones. Once you have a modem, you can start playing with it by by communicating to the modem via what are called app commands. So you generally telnet into your router, or the router will have an interface to send these commands to your router. And you can do things like what's very popular is called band locking. So if you turn your phone on your iPhone, it'll just connect to whatever band it thinks and bands are the different different megahertz and gigahertz spectrums. And there's like band two and band four and band 10. And different carriers are on different bands. And it will try to connect to the best one. But what people have found is that if you lock it to a certain band, especially some of these new, higher frequency bands, if you're nice and close to a tower, then you can get faster speeds. Or if you're further away from a tower, you can lock it to a lower band and make sure that it always stays on that. So I did a bunch of testing on the cell towers in my area and I realized that band 10 is where I get the fastest speeds. So I locked it to that band. And then you can also enable carrier aggregate aggregation so your iPhone will do this by default, but it will lock to multiple bands at once. It'll say like, I'm gonna use band 10 and band two and put those together and that will allow me to get like 150 megabits down and 150 megabits up by sort of aggregating them together. Unfortunately, it doesn't work in my area just because the towers don't support carrier aggregation. But I found in when I'm in Hamilton, the towers do support that. So that's another thing you can kind of go with. Mm hmm. What else by issuing commands to these modems, you get detailed values on power. So one thing I had to do is point an antenna around my property to find where I was getting the best reception. And by issuing commands to these modems, you can get the raw data instead of like two bars, because like what is two bars mean? And under the hood, you can get actual raw data on different values, rssi signal signal to noise ratio, it's a little bit geeky, but you can do a little bit of research into it and figure out what values should you be looking at getting higher or lower. And then finally, you can get cell tower IDs. So it's important to know which South cell tower you're locked into. And each tower has an ID on it. And those ideas are not readily available it either in Canada or in the US. So you sort of have to find them yourself or use an app I'll talk about in just a second. - -26 -00:21:16,290 --> 00:21:31,650 -Unknown: Geez, what would you do if you weren't a computer person? Like this is interesting. But like, I can't imagine any normal human being No offense, Wes, I can't imagine Yeah, normal people going through any of this hassle just to get internet. - -27 -00:21:31,890 --> 00:22:27,600 -Wes Bos: I'm hoping what happens is that and we're starting to see this is that cell carriers start to roll out, like just a box, you can buy in a SIM card, you can put it and it will just work. But if you are very remote, or if the sort of thing of like using this cell, a cell card in an LTE modem is sort of frowned upon by the cell carriers are not supported or anything like that, then you do have to get a little bit hacky. So it's sort of interesting, because it feels like very early days, there's huge communities of people doing this on Facebook and in the forums and things like that. And it is too bad because like I get people messaged me all the time. And say like, hey, like, I would love to do this, like, what what do I buy? And I'm just like, well, first of all, do you have putty installed on your Windows computer? And like, can you because like, I've totally broke them like a $200 modem before? - -28 -00:22:27,600 --> 00:22:48,810 -Unknown: How good are you at soldering? Yeah, exactly. Like, that's literally something you have to do is if you brick a modem, you have to solder USB connections to some of the pads on the modem in order to reflash some of these devices, right? Yeah, that's funny, cuz that was a joke. And I didn't even realize how accurate it was. - -29 -00:22:49,080 --> 00:23:12,960 -Wes Bos: Yeah, yeah, it's, uh, it is too bad. And honestly, I think it will get better in the coming years, especially as like, even in Canada, there's, the government has said in by 2030, which is way too long, 10 years, that every person in Canada should be able to get, I think 50 down and 20 up in 10 years, which is a joke because like, yeah, that's right now. - -30 -00:23:12,960 --> 00:23:14,940 -Scott Tolinski: Yeah, - -31 -00:23:15,000 --> 00:25:21,210 -Wes Bos: next up antennas, where I live, the service that I'm using only operate on Rogers, and I we don't have Rogers reception where we are. So in order to get reception, we have put antennas up in the air. And there's kind of two different types of antennas, you get omnidirectional antennas, but you just throw in the air and you don't have to point them. And those are good in most cases that you get like an okay signal, but you want better. And then if you have, if you really want to get a good signal, and you know what you're doing, you can get these things called the Yagi antennas. And they are pointed, and you have to run two of them each at a 45 degree angle. And then you got to point them directly at the cell tower and get them as high as you possibly can. We had them on top of our house and they were working last last year. And we came back this year and they just just stopped working entirely I don't know if it has some corrosion in the connections or, or something happened. So we just and I'm not about to climb on a roof we paid in painting, I got my brother in law to climb on the roof who's crazy, but I'm not about to climb on the roof and take them down. So I just bought more. And I put them on a 20 foot piece of wood. And then we went to the very highest porch spot at our cottage. So it's probably 40 feet in the air, and I'm devising a plan to get even higher, but that was good enough to get me back online man. So now you gotta you gotta solder. You gotta climb. You gotta hack. I literally climbed it. I climbed a tree. And I was just like, I just coded a thing in the browser that would speak the signal strength to me every five seconds and then I climbed a tree and I was just pointing it around and I was getting some weird reception because I The signal was bouncing off like we're in a very hilly area. So the signal is bouncing off of the hill and back at us. So when if I turned it around as working better and just the like, you have to, like be somewhat curious to do this because, like who's gonna climb a tree and start soldering things? Right? Like it's not for everybody, but - -32 -00:25:21,450 --> 00:25:45,900 -Scott Tolinski: certainly, it's the hacker mentality though. It's definitely the hacker mentality. And if you needed me to climb trees West, I would climb lots of trees for you, because I'm definitely a tree climber. You know, that's, that's definitely Atlanta. Landon started early. He's already climbing our peach tree and Courtney's really excited about it. Oh, yeah. All right, well, I'm gonna come down when the borders reopen, you come down and get get that one off of our house. All right, - -33 -00:25:45,930 --> 00:25:46,470 -I'm down. - -34 -00:25:46,620 --> 00:31:26,130 -Wes Bos: What else boosters. So there's also cell boosters, where you can throw an antenna up in the air, and then it will rebroadcast LTE signal inside the house. And those are good for metal buildings and things like that. But they do add a lot of noise. So in my case, a booster was not a good use case. Let's talk about plans. So like, how do you get a cell phone plan that does this, so a lot of plans are phone only. So they will either detect, if you take a SIM card and throw in an iPhone, it works great. And then if you put it in an LTE modem, it will stop working. And they detect that by either by the IMEI number, which is a like a unique number to your phone or to your modem, or they detect it by what's called a TTL value. I mean, TTL value is how many routers like basically, if you send a request to Scott, every time that piece of data goes through another router, the TTL value is decremented by one. And that's to stop requests from bouncing around the internet forever. And if it ever hits zero TTL then the thing will just die and never make it. I've heard and this is not in Canada, but T Mobile uses a TTL to detect people hotspotting so if you hotspot your TTL will be one less than if you make the request directly from your phone. So people have found out that if you just increase your TTL by one, it detects it as hotspot even though it's not. Alright, sorry, it detects it not as hotspot. I've never done that, because that's not available in Canada. But I've heard that that's a way to sort of get around that. Some in the States. It's pretty popular to use something called the calyx ca l y x. There's a lot of third party resellers that will sell SIM cards that work for data purposes and have unlimited so there's calyx Institute, it's very expensive. I think you have to pay $500 up front to get access to it. And then I think it's like, I don't know 50 100 bucks a month to get unlimited which is which is amazing. In Canada we have Bell which we live in a rural area so we qualify for their special pricing, which is you get 100 gigs for 80 bucks, and then after that it's $4 a gig. So our bill was $300 and I called them up I was like your criminal like my kid is trying to I'm working from home my kid is trying to do school. Yeah, you're charging four bucks a gig. So there's that it's a it's a huge rip off we have that one as sort of a backup. Because we do get good Bell we get great Bell signal out here and we just plug it in and it works but we try not to use that one because it's so expensive. Tell us in Western Canada has like a terabyte for 70 bucks a month which is awesome. And then again it's locked by tower so you have to apply for it based on your billing address or your where you live and they'll lock that modem to only work on a specific tower in your area. So like it we are seeing some change but you look at other things like I did the math on the other carriers in Canada and it would have been like 1200 dollars a month. So currently I am actually I'm not gonna say what I'm using. I'm using an American plan that is on roaming. I don't I don't want to get taken down so it's a better deal to go to the states and buy a SIM card and then bring it to Canada and use it on roaming full time which I think the company that I'm using knows that they are like doing better but I won't say too much more about that because it's a bit of a gray area. speeds depends on tower congestion. I was getting like 150 megabits down in at home up here. I'm lucky to get 15 down and one up and that is what the tower that is with it perfectly pointed I did drive around the lake and sat right next to the tower and I got 25 down and about five up so a lot of times a tower will simply just limit your speed because there's other people in the area that need to use it as well and also depends on if you're prepaid postpaid, or some people are like that ambulance drivers or cops on the forum, and they get these things called first responder accounts called FirstNet. And they are top of the line in terms of priority, which is pretty cool. But obviously regular people can't get access to those as well. Let's wrap it up here, some tools have to use, there's an app in the states called cell mapper, people put it on their Android phones, and they try to map out where the cell towers are in the States, because you need to know like, Where's the cell tower and what, who owns that cell tower and what carrier they broadcasting in Canada, they must legally tell you where the cell towers are. So there's lots of maps, or you can just look up the different cell towers, they won't tell you the cell ID of that tower. But you can just, you can just drive to it and check what the idea is on your phone, you can you can open your iPhone and hit Star 12345 pound 3001 pound star and that will open up field diagnostic mode in your iPhone. And that will give you the raw data as to what tower you're connected to and what carrier and things like that. It's pretty neat. Facebook group LTE hacks, Facebook group is awesome group of people who are trying to do this for themselves as well. And the LTE fix.com is a great website as well, that has a bunch of gear. So if you're in the states and you want to order gear LTE fix seems to be the place to get it. That's it. - -35 -00:31:27,480 --> 00:32:38,610 -That's everything I've learned about LTE internet, it's not perfect. Like I'm not even recording this with Scott right now, just because the upload is so bad. And latency is still like 150 200, sometimes 500 milliseconds, I'm still getting a latency on my LTE modem is fine for uploading a YouTube video takes a couple hours, that's okay, it's fine for downloading doing Instagram, uploading photos. But when it comes to doing video calls, it's still too slow. And that's why I have to save my 10 gigs of cellphone data a month for talking to Scott. That's crazy. I'm sorry. No, that's okay. That's like, like, like, it's hard to feel sorry for me. Because like, we're sort of on vacation here. Obviously, we're still working. But like we chose to come out here. What makes me frustrated is that the government and a lot of these companies don't care about the people that live out here and need access to these things like even simply just like being able to visit a doctor online, which is something you can do in our province now. or attend school, all of that stuff is really important for local people. And it's frustrating to see a lot of the rural residents left out - -36 -00:32:38,610 --> 00:33:25,140 -Scott Tolinski: of that. Well. I mean, I've lived in places that haven't had access to the best internet, but I've never had to deal with anything quite like what you're experiencing. Yeah, it's crazy to me. And it does, it does give you a bit of perspective in terms of like really just what people deal with all over the not only both of our countries, but I can't even imagine in other countries what it's like so it definitely it definitely opens your mind. And it is fascinating to hear what you go through to get get a good signal. You say other countries, Europe, every time I complain about it, you get a screenshot from someone. They're like, Oh, I live in I live somewhere in Europe and I pay five euro a month for like a gigabit down and like, it's just like not a thing at all. - -37 -00:33:25,140 --> 00:33:59,100 -Wes Bos: South Korea or Japan where Yeah, yeah. It's amazing. And obviously there's there's other countries as well, where it's just like, I get emails all the time from people that ask like, hey, I want to buy your course. But how big is it like they want to know the size of the download before they even buy it? Because that's a they don't know if they can take it or not because they're gonna have to spend a couple days downloading this thing before they can even take the course. Yeah, wild. All right, this is getting a little tasty. So we'll end it here. Thanks for tuning in and we'll catch you on Wednesday, please - -38 -00:34:01,260 --> 00:34:11,040 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax262.srt b/transcripts/Syntax262.srt deleted file mode 100644 index 18cecf175..000000000 --- a/transcripts/Syntax262.srt +++ /dev/null @@ -1,356 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to whiskey and Wes Bos. - -2 -00:00:10,589 --> 00:00:47,430 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats. Today we're going to be talking about our react wish list. These are we've sort of been keeping tabs on like things that I wish that react had or JSX had or generally the community in general, I put out a tweet as well, we got some really good insights on that. Today, we are sponsored by two awesome company. First one is dev lifts, which is going to get you the developer fit their entry level plan is now free, which is amazing. We'll talk about that partway through and fresh books, which is cloud accounting. As always, my name is Wes Bos, and with me as always, is Mr. Scott to Lynskey. How you doing today, Scott? - -3 -00:00:47,579 --> 00:00:49,049 -Scott Tolinski: Hey, doing good, - -4 -00:00:49,049 --> 00:00:49,560 -Unknown: you know, - -5 -00:00:49,560 --> 00:02:39,210 -Scott Tolinski: hanging out, do my thing about to launch the new level up tutorials video player, which has been a Sonic, thank you. Yeah, it's using player j. s, it's using mocks for video hosting. It's a very nice and modern solution that I've been looking for for a long time. And we have an episode coming up that I've been planning for a little bit about video on the web, and all of the ins and outs of video on the web. because let me tell you, I was looking to move our encoding to a different platform, move our video hosting to a different platform, you know, wanted to just get everything a little bit better. And it is a an interesting world that we may not tend to dive into too often, especially when platforms like YouTube make it seem so easy, right? Yeah. So that would be a nice little topic for future ones talking a little bit about not only mcse and why I chose mcse. And maybe we could have some of the mcse folks on here. Yeah, so let's get into it here. I do maybe want to preface this episode, just to let anybody know, because I'm sure there's going to be a substantial amount of people who disagree with various aspects here. And specifically, React team members, if you disagree with us, that's cool. I would assume that most of these things we are aware of are probably not practical. Some of them definitely are practical. But I'm sure there's a certain percentage of these things that will make some people's eyes roll whether or not you are a contributor to react or whatever. But just know that everybody has different opinions on this stuff. And these are just sort of our opinions and things that we've gotten from the community. So try to keep it up in mind with some of these, especially as we we talked about them. I think it's gonna be real fun. And I think the premise of this episode is intended for this to be a fun exercise and not a not a contentious one. Do you know what I mean? Totally. - -6 -00:02:39,210 --> 00:03:14,039 -Wes Bos: I think in the past, like, if you made me make react, I would have screwed it up by now. Yeah, right? Exactly. A lot of the times, the solutions that RAC comes out with is because they know better than I do for my own for my own Great. So this is like, like Scott said, no shade podcast. But these are just things as a developer that we would love to see, either in react or, like a lot of the things that we're gonna say people are saying, like, just use this plugin, but a lot of them are gonna be like, well, we would love to have some sort of first class support for these types of things. So we don't need to bring in a plug in or something like that. - -7 -00:03:14,369 --> 00:04:51,900 -Scott Tolinski: Yeah, right, exactly. I think the number one is, I think we both can acknowledge that react, a lot of the decisions that it makes are from the standpoint of it wanting to remain flexible, right? It's always had the the sort of idea of flexibility as a strength, right, the fact that the community can come in and do 100 different state options is a strength. And at the same time, that string can also be a weakness, because what it leads to is it leads to some situations that either have 1000 different solutions or might not have a clear solution. So I think that maybe isn't an initial preface as well. Another we're done with the endless amount of preferences. Let's get into the first one, which is going to be one of the features that I've been wanting forever and ever and ever is the ability to delay the unmounting of a component easily. Because yes, there are ways that you can do it right easily. For specifically for things like animations, like how great would it be? Where did you just say, hey, this component, you you take the, you know, whatever, one millisecond here to unmount. And while that's happening, maybe I can process some quick and easy animation stuff. Because right now the solutions end up being like duplicating the component, or having both components mounted at once and then fading out well, one fades in and the other one fades in and trying to time it all it usually is up to the animation library author to solve that problem that I think should probably be a react self problem. But I am very aware through conversations that I've seen on this one that it is it is a deceptively difficult problem with how react works. And it's not just as easy as saying, Alright, here's your delay field right here, - -8 -00:04:51,900 --> 00:05:37,020 -Wes Bos: right? react doesn't give you any animation so early on, they had like an animation package. I think that they It's no longer the official one, they sort of gave it off to somebody else. And there's certainly no end of animation things, I animation packages out there. But if you take a look at Felton view animations, like all first class in those frameworks, so I know that they're sort of just saying, like, maybe it's not for us to do, but I certainly would love to see at least some very basic animation things added right into it. And that also like you think back to jQuery, people love jQuery because of that, because it just comes baked right in, you don't need to go reach for another huge animation thing and have providers and whatnot, just just let it work sort of out of the box. - -9 -00:05:37,349 --> 00:06:19,200 -Scott Tolinski: Yeah, it's funny, because I wasn't even necessarily getting into animations overall, as a whole. But it would be nice to have that baked in support, as long as it was nice and elegant. Because there was something really special about it, not to bring up my course, because I don't want to sound like I'm marketing here. But in my latest separate course, we did like an animation unmount per route, or even like a component that flies and unmount. And it was as simple as just adding a, it was like a literal transition colon fade on the component. That's it, you didn't have to write any CSS, you didn't have to write any JavaScript, you didn't have to you just put that one little line around there. And it handles mountain handles on mountain handles, anything you want. Next one we - -10 -00:06:19,200 --> 00:06:51,720 -Wes Bos: have here is that just react suspense in general to release so there's a there's a big update to react that has been coming for, like probably a year and a half, two years now. And it's going to handle being able to suspend components while you are doing something. So most likely, that's going to be data fetching. And you can stop the whole thing from rendering for a certain amount of time. And then if that goes over, you can show a loading screen. We have a show on it. We did well over a year ago on what react suspense is. And I just don't I have no clue where it's at. Oh, I - -11 -00:06:51,720 --> 00:06:57,090 -Scott Tolinski: think they might be getting I think they might not ever be releasing it. Did you see that tweet from Dan about it? - -12 -00:06:57,509 --> 00:07:00,240 -Wes Bos: No, what? Okay, so Spence in general, - -13 -00:07:00,269 --> 00:07:02,190 -Scott Tolinski: yes. Let me see if I can find this. - -14 -00:07:02,279 --> 00:07:27,020 -Wes Bos: Alright, so Scott and I, we just pause for like, five minutes, tried to decipher these tweets from Dan a roff. And we're not sure what they mean, obviously, they're, they're second guessing whether suspend should be a thing, that talking a lot about how server, the server side rendering needs to be first class citizen. So maybe they are looking at getting more into the server space and sending diffs. On over? - -15 -00:07:27,479 --> 00:09:23,970 -Scott Tolinski: It seems like, the reason why there are these delays is because maybe there's a reimagining or envisioning of how things are going to work or maybe some bigger thinking going on, then just say, All right, we're just going to finish this and roll it out, right? Because once something's rolled out, it's, you know, it's you got to support it, you have to maintain it. It's a big decision, especially with a platform like react. So obviously, with a feature and something as big as is the implications of this is that they should take their time, right? Absolutely. It is one of those things that we would like to be solved. I know me personally, I work quite a bit with server side rendering and react. And it is not the most fun process, having to rehydrate. And then whenever you hit issues and rehydration, it's difficult to solve. Like, sometimes I have issues where, let's say, one div, like doesn't close correctly, or something or like CSS all of a sudden isn't applied to the section correctly. And if you look at the HTML, it's malformed. And you say, Ah, I wonder why this is, but it's coming in from a server fine. It's a hydration issue. And sure enough, the hydration issues are definitely going to be you know, user caused errors. But it's not always clear why these errors are happening, or how they're happening or how to fix them. And then there's that old good old friend that is the element div was expected to be in div or element div was expected to be a div but was found to be a header element, an error that you get during rehydration, where the rehydrating elements are not matching with on the server side. And that was extremely frustrating, you know, things made it better. It doesn't necessarily always let you know why it's happening. It lets you know that it is happening, but it tells you very little about why it's happening. So server side rendering in general on react definitely seems like it exists. It works. But it definitely isn't as seamless, smooth and easy as it could potentially be, as we've seen from platforms like maybe next JS or even not in the React ecosystem sapper or something like that. - -16 -00:09:24,239 --> 00:09:57,450 -Wes Bos: Next one we have here is file based components. A lot of stuff we're saying is that swell and view have done a really good job at it. So being able to put your components, throw in a style tag into a single file. Right now, React is very opinionated about how you should lay things out and components, you can put multiple components in a single file. They have no opinions on how you should use CSS, other than you can pass a style prop to any component. But with a file based component, you'd be able to have things like scope style tags, - -17 -00:09:57,479 --> 00:11:49,049 -Scott Tolinski: so when you have like one component versus Like per file, sort of like file based component, it does kind of inherently keep things a little bit more organized, because you can't all of a sudden have a bunch of components in one file. It's sort of like automatic stuff. It also makes some of the naming of things automatic. It doesn't make as much sense in the React cons context as it does others because Okay, you have a function that functions the name of the component, that function has a return statement, everything happens within that function. But what what would happen if you were all of a sudden, in Keep in mind, this is far fetched, eliminate that function and just have the script stuff happen as in the file, and then you would have the VA JSX be automatically returned. Granted, I don't think any of this necessarily works in the React context, as is, if you were to just say, Alright, let's do view single file component templates in react, obviously, there would be a lot of reimagining that would have to happen for that to work. But I think there are some some things that it would be low level stuff, if you just kept react as is and just had, all right, you put a style tag at the bottom of your file, and all of a sudden, we have scoped CSS rather than anything else. And I think those are, are like maybe the more of the realistic changes, you could see here coming from something like this. And to me, it's not like a big, big deal or a big thing. But it would be kind of nice to have that kind of support, rather than right now we have like 800 different approaches to this, whether it is creating a style component, and then wrapping your files in a component or using whatever Versailles solution was, or using importing style JSX or empu, or importing CSS or whatever. Yeah, just being able to say, Alright, this CSS file is associated with this component, specifically, it will load on this component and it is going to be scoped to this component in a single file would be really nice. - -18 -00:11:49,590 --> 00:12:45,870 -Wes Bos: Next, we have prevent default shortcuts. So very often you have a function, we talked about this a couple episodes ago, you have a function, and when somebody clicks on a button, or submits a form or something that has a default, on it, you'll have to both run that function as well as prevent default on that element event, you can do this a number of different ways, you could just pass the event to your function and do it inside of that. Or you could do like a little inline arrow function right outside the onClick handler. Or you could have two different separate functions, the first one that does the prevent default, and the second one that calls the actual function. So those are all kind of like math. And it would be awesome to have, just like on click, and like I know, swell has a cool syntax that allows you just to prevent the default and then run the function because that's such a common thing to do. I think it should, it'd be awesome if it was built right into react. Yeah, how - -19 -00:12:45,870 --> 00:13:54,779 -Scott Tolinski: many times have you had to write prevent default when dealing with the form and react, just about every time, we'll talk a little bit about more forms stuff in a minute here, because forms in react in general are just really not elegant. They're just bulky. Next one, I wanted to just this, this is a quick little bug here. Again, this goes along with server side rendering, when you use server side rendering, turns out, use layout effect, just flat out doesn't work, right, because well, there's no dumb to worry about. However, it just breaks. So what you end up having to do every single time, every time you want to use a use layout effect. In a server side rendered react app, you have to use your own custom component called the well, the most common one is use ISO layout is the most common naming of this, but it's like, either that should be built in or the use layout effect should have a case for that, where it should just work with server side rendering, because having it just like not work isn't really super ideal for anyone trying to pick this up. So let's take a quick break to talk about one of our sponsors today, which is def lifts. Now you may recognize deadlifts as being one of the very first sponsors that we ever had on syntax. So Wes, do you want to talk a little bit about the def lifts plans they have going on right now? - -20 -00:13:54,960 --> 00:15:49,740 -Wes Bos: Yeah, so you've you've heard them sponsor on the podcast before their developers who are out there to refactor your body and know that developers probably aren't the healthiest community out there. And they in the past have had a bunch of really cool plans. And we're here today to announce that they have gone First they have the fit start plans, which are three different types of plans, you have lean bodyweight, or strong. And what they're gonna do is they're gonna deliver you workouts in a spreadsheet format, emailed every four weeks. So basically, you start, you can get them in your email, you know exactly what to do. You go to the gym, you open the spreadsheet, and you just do what it says in the spreadsheet. And they are making those free, which is awesome. And you can get those at dev lifts.io. And then they have brought back their premium plans, which are a one time purchase. This is actually what I went through myself. So it's an eight week plan that's tailored to what you want. So it's 199 bucks, you get 50% off for being a syntax listener with the code syntax, and when you pay that you sort of fill out a form, tell them what you're hoping to do, are you looking to get stronger? Are you looking to lose some weight, something like that. And you tell them where where you're at, like, I told them, I was going to a gym, and I have access to all of the equipment and other people say, I don't have access to a gym, I can only do it at home. And right now, almost nobody has access to a gym, at least in Canada. So you can sort of tell them like where you're at and what you want to do. And they will give you a tailored plan for what you want. You also get what you should be eating and sort of diet and nutrition that you should be going on as well. So check it out all of the plans, you get slack access, as well. So you can get a really cool community of other developers who are looking to get in shape as well go to dev lifts.io. And use a coupon code syntax for 50% off. Thanks so much devilish for sponsoring. Cool. So - -21 -00:15:49,740 --> 00:17:07,500 -Scott Tolinski: let's keep this moving here. This is one that sort of gets in into some, just higher ideas about react is really just that, again, that flexibility and freedom over maybe sort of rigidness and some of this, to me comes down to the lack of like recommendations coming directly from the React team. Because they don't want to officially support something, right? They don't want to say this is the official way, because everything's coming in from the community. But you know, what I'd really love if there was like a react recommended hooks package, you know, like here are the recommended or even just a repo of recommended hooks. Because sometimes you do see a lot of like spicy threads on the internet's saying like, why are all these react people doing these things? This really crappy way? Well, it's like, Well, you know what I mean, maybe if there was a little bit more, more like, these are the specific ways to do this. Right? These are the official unofficial react hooks, right? And I think about this all the time with like, how many thousands of use fetch hooks out there? Are there? Like, would it really be that hard for there to be an official use fetch hook that does all this thing? And if you need like a more complex one for yourself to use it? I don't know. To me, it just seems like there's an opportunity there for more guidance, essentially, on some of these practices. - -22 -00:17:07,949 --> 00:17:47,160 -Wes Bos: Yeah, I agree. And I realized that it's, you can tell me just npm install it and get it going. But it would be nice not to have to make a decision as to which one you would want to use or even have to stop and break your build and install it and get going just for the super common things like fetch, set, timeout, set interval, those are those those things are part of JavaScript. And if there's no like way to use them without writing a super custom hook in react, I think that they should at least come with, especially now like, they should come with it. Because like now that we have tree shaking or whatnot, if you're not using them, then they're not going to be added to the build at the end of the day. - -23 -00:17:47,570 --> 00:18:22,290 -Scott Tolinski: Yeah, an important point that you made there was just not having to make that decision. I mean, we know as developers that decision fatigue is real, like, it is very real. There's times when I get done working. And Courtney asked me a question about like dinner, I'm like, I cannot make one more decision today. I've made so many decisions about so many different things that I'm just my brain is fried for making decisions. And so while this freedom and flexibility is great, it also can wreak havoc when you're you're having to like research 10 different state libraries just to pick how to do global state, - -24 -00:18:22,310 --> 00:19:12,110 -Wes Bos: right? Yeah. Next one we have here is a good forum strategy to bind inputs to state directly, I know that there's there's libraries like format, but even then you have to set the value, you got to set the change handler, you got to do all this stuff. And then in order to get an input tied or bound to a piece of state, and I find that always to be not an issue, but like I find myself just going like, uh, I have to now write this like, I don't know, 10 or 15 line hook in order to bind this data to, to state i would love if it just bound it directly to stay or if there was like some sort of Prop where you could specify a handler, and then it would map that to state I realized that reacts a little bit more explicit. But something around making forms easier to deal with would be awesome. - -25 -00:19:12,590 --> 00:20:53,940 -Scott Tolinski: Yeah, it is difficult to use a platform like view Angular, or svelte and then go back to react for forms. Because I instantly want to just shut the project down when I start having to write like a couple of view states or use reducer when like, it would be really great just to have this auto bind does variable to this, this thing when this input changes and get to like, essentially feature parity with actual HTML inputs, to have the, you know, the input value bind. Now I grant I understand, you know, forms in react, but to me, again, most of these form libraries that come out, they don't make the API really that much simpler. And at the end of the day, a form shouldn't really be that, that difficult to write. And I think that it can hang a lot of people up right when they first start typing in input in react and nothing comes out because you haven't updated the state or, oh, these little new things that are just make learning react difficult for people, I think forms is definitely one of them. That can just be painful. And it also just isn't. I don't know, I sometimes my views on like terse and beautiful code, quote unquote, beautiful code, in my mind, my personal opinion of aesthetic beauty within code, get in the way of making things actually real world usable and robust. I sometimes look at an API and I think, why can't this API be way simpler? Not like really considering all of the edge cases that many the people who are developing these things actually think about? So I realized that so next one here is going to be one that's probably not going to happen. But it's sort of the promise of React Native web, which is sort of like jersey, the movie Street Fighter. - -26 -00:20:53,940 --> 00:20:55,320 -Wes Bos: No, no, I - -27 -00:20:55,320 --> 00:22:27,030 -Scott Tolinski: haven't seen any movies that will I figured as much, but You surprised me sometimes. So there's the video game, Street Fighter the game. And then there's the movie Street Fighter, the movie based off of video game. And then there was a game Street Fighter, the movie The game, which was a game based off of the movie, and, and so it wasn't actually based off of the game. It was a game based off of the movie, which is initially based off of a game. They just did this on, How did this get played podcast, so it's fresh in my mind. But that's what it reminds me of React Native web. It's like React Native web is the web, which is based off of native, which is based off the web for rigged. Would it be really cool as if like, knowing what I know about React Native, I've done a couple of courses on it. This is not possible. But it'd be really cool. If you could write once deploy everywhere, hey, that'd be cool. I know there's things like native script that that make them nice and easy to or easier compared to maybe React Native because React Native is not trying to solve that problem. React Native is trying to let you learn the concepts of react and use those skills to write native apps. It's not trying to be a write once deploy everywhere solution. But React Native web is trying to be a write once deploy everywhere solution. And it'd be kind of cool if React Native web just sort of worked with divs, and whatever. And, yeah, I have no practical means of actually expressing how this would work in the real world. I say this as a fantasy of mine, it would be fantastic. If you would just write your app and divs and stuff. And then React Native would say, oh, let me turn them into views and whatever you need. - -28 -00:22:27,330 --> 00:23:26,400 -Wes Bos: Next one we have here is compile time directives. Someone I have never, I never thought of this or seen this before. But it's pretty cool. So someone linked up this directive x package, which gives you directives, which is a fancy way of saying like an attribute or a prop on a component for doing things like repeating, they have the SEC extra Pete, we know that react doesn't have looping and it doesn't have if statements in it. And extra peat will attempt to fix that for us. So it will give us looping and give us if statements, which is kind of cool. So like if something is logged in, then go ahead and render out the username. And I'm assuming what happens is, this is a Babel plugin. And then Yeah, it is. And then we're under the hood, I listened to one of our podcasts, I said under the hood, like 100 times, I have to - -29 -00:23:26,940 --> 00:23:27,900 -Unknown: stop saying. - -30 -00:23:28,860 --> 00:23:51,090 -Wes Bos: So behind the scenes, what happened? Yeah, is that it just compiles it down to whatever the equivalent is in react also, they have repeating if statements binding, oh, it binds it, it does the this dot bind to this, you know, I will automatically bind that that's not so much of a issue anymore. Now that we have hooks, - -31 -00:23:51,270 --> 00:24:22,200 -Scott Tolinski: because this will this library we talked about before the recording the show, it hasn't been updated since 2018. So I don't know what this library if it works in a in a react hooks world or what it would even like, but I thought this was really interesting. I kind of wish this was an active project. And people were doing some kind of things with the accent is very, like, very template syntax II, which we'll talk a little bit more about when I hit the JSX section of this. I thought this was fascinating. - -32 -00:24:22,440 --> 00:24:32,370 -Wes Bos: I think this is really cool. But I would not use it until it's like a standard thing in react because like someone's gonna come into this project and be like, Oh, yeah, we use this weird. Oh, yeah. Like, what - -33 -00:24:32,370 --> 00:24:33,150 -Scott Tolinski: is this? - -34 -00:24:33,540 --> 00:24:47,760 -Wes Bos: Yeah, it's that's the unfortunate thing is like, I don't want to use the same thing with like, in JavaScript, if something is not at least what stage three or something. I don't want to use it just because it's not really officially supported just yet. - -35 -00:24:47,940 --> 00:26:13,260 -Scott Tolinski: Yeah, I learned my lesson with decorators. I think a lot of people really great flow going with decorators for like Apollo queries, and like, it was just so nice and fantastic. Yeah, no, I think rip them all out, I started hitting Babel issues and later versions of Babel. And as the day went back a stage or whatever, I was just like, Alright, okay, I'm not gonna put my future on decorators here. Another thing I would really like to see would be, we got a couple of people mentioned this in the Twitter thread. And this is something again, that comes out of the land of view in spelt, which is the idea of a slot. And now slot kind of takes the place of children. Now, the reason why a slot is maybe a little bit different than a children situation would be that you can have named slots. So instead of just being children, or, you know, children, the second item in an array of children kind of thing that you might have to do right now with when you have multiple items as children, you would actually be able to pass things in into specific, quote unquote, slots, and then that would pass them through and then in the next template, you would define the slot and then potentially the name of what the slot is. And then that way, it just makes things a little bit easier to read and explicit in your JSX, or whatever would be in the current version sits in your, you know, view, templating language, or wherever the concept of slots to me is a little bit more readable than the children function as is. - -36 -00:26:13,470 --> 00:26:19,980 -Wes Bos: Yeah, that seems pretty interesting as well. Tony has a lot of stuff here, and people are gonna be like, why don't you just use our or view, - -37 -00:26:19,980 --> 00:26:43,080 -Scott Tolinski: then I think the answers to a lot of these, like, if you're listening to this episode, and your first inclination is to say, Hey, why don't you just do blank? It's because we know, we know that you can already do workarounds, or have, you know, easier versions or some of these solutions. We're very aware. I think this is sort of like a, you know, like a fun. It's a fun. It's a fun little exercise. Yeah, - -38 -00:26:43,200 --> 00:27:17,550 -Wes Bos: totally. All right, let's move on to JSX, then so JSX is technically not part of react, but almost everybody uses JSX and react together. So what is our wishes for JSX. So the big one is remove the attributes that don't line up with regular HTML, the two big ones are HTML four, and class name, as well as the camel casing of attributes. I think it has to be camelcase to react, whereas it doesn't matter an HTML basically just line it up perfectly. Apparently, the class name thing is fixed. Somebody - -39 -00:27:17,550 --> 00:27:48,810 -Scott Tolinski: was tweeting us that Paul Henschel. Paul is a really, really excellent developer. He worked on Paranoid Android for those of you who ever rooted your Android phones back in the day, that was one of the bills I used to run all the time on my Android devices. And then he went up, and he wrote react spring, which is one of my favorite libraries to he does a lot of 3d stuff. Now with react three fiber, he just works on some really amazing projects. So follow Paul Henschel, if you don't already, will maybe link to his Twitter in here. - -40 -00:27:49,020 --> 00:28:15,060 -Wes Bos: That's awesome. So he said that you can just use class, because for the longest time, we had to use class name on an attribute, and now prettier corrects it, which is great. But it looks like we will just be able to use it in react as of react 17. Not sure about HTML four and the other ones, but that's certainly high up on. And there's certainly reasons why they did that. But I don't care. I just want it to be the same as HTML. - -41 -00:28:15,360 --> 00:29:31,560 -Scott Tolinski: Yeah, I think for me, too, it's a lot of these things end up being like, again, here's the solutions for them, I don't care. Here are the reasons why they have I don't care, I would just like JSX, to be a bit more of a templating language and less of like trying to be too close to JavaScript or too close to react. Again, that's some of its its strengths. But there are so many nice little things that could happen if it were just to embrace the templating language aspect of things and maybe make the code a little bit Regier more readable occasionally. And again, aligning it dead on with HTML would be my my number one on the wish list just because I have had most of my experience in my career writing HTML, and maybe PHP before that, but HTML specifically, that like now that I'm having to make all these changes to how I write HTML, it feels very weird to me. And maybe that's just a dinosaur brain talking, but definitely feels weird to me. One of the thing that I would really like, is to not have to bring in react if you are just writing a JSX or TSX component. I already do this with a Babel plugin called react require, which is what next GS uses, I believe, but react require will basically say, hey, if this is a TSX, or JSX file, don't worry about importing react. We got you. - -42 -00:29:31,920 --> 00:30:18,720 -Wes Bos: Yeah, so this is coming. So the thing that transforms JSX into JavaScript is called it's a Babel plugin called transform, React JSX. And the is already been merged. So the functionality is there that if it detects JSX, it will just import react for you because that was always an that's one nice thing about next js is that you can just start typing JSX and of course I need react in in this component. It's an entire react project. Why do I have to import it. And that is no longer going to be a thing, which I'm going to see if I can sneak this into my next course. Because How awesome would that be if I don't want to spend the first like 10 seconds of every file importing it or you know i mean it's it's it's a bummer - -43 -00:30:19,080 --> 00:31:46,610 -Scott Tolinski: yeah I use this react require plugin to great success. I also kind of take liberal use of another Babel plugin which is not super related here but tangentially related to what we're talking about. I use one called import Global's for things that like, let's say, in a, okay, for instance, there isn't going to be a bundle of my code that ships without a GQ l because we use data just about everywhere, right? So Well, why not just make GQ l available without having imported ever so I have this import Global's Babel extension allows me just say, hey, automatically important g qL, as well as a styled in every single file, as well as link because I don't want to import react all over the place. So I actually make somewhat liberal use of this specifically for plugins, and it's import Global's in the plugins. Again, these are these are ones that are going to these are dependencies that will show up in every single bundle that I use a Babel plugin, import Global's Ah, and again, I use it for GQ. Well, I use it for styled from styled components, I use it for it link. It's funny, I also used it to import FC, which is from react for my TypeScript stuff, because I don't want to do react up FC. And just because I'm lazy, I can type FC if I want to have a type for functional component. So there's a lot of little little things here I use that for, especially if the code is going to be in every bundle. Anyways, - -44 -00:31:46,650 --> 00:31:51,330 -Wes Bos: this is not a very popular plugin. This is a hot tip you're dropping here, Scott, - -45 -00:31:51,450 --> 00:32:56,640 -Scott Tolinski: I, you know what, I come from the world of liking a little bit of magic. And some people really shudder at the fact that, oh, you could use styled without importing it, why don't care, I'm never gonna have a variable name styled because I use styled components just about throughout my entire site. So I'm never going to have to think about that. So Sure. It's not something you want to do in every project or whatever. But for me, I really, really appreciate not having to import something. And I know the first comment is going to be well, you can set up auto import. Yeah, I have auto import setup. I still don't want to do it. I don't care. Okay. I like this yesterday. Another one that we often talk about on here is better conditional syntax, because it's not always super readable to do variable, ampersand, ampersand, whatever. And there's definitely some some caveats here. Whether it is using ternary operators or using the ampersand or whatever, it would be nice to have some explicit if statements sometimes it's just visually nicer to see the word if else whatever in your code rather than ampersand and question marks and whatever. - -46 -00:32:57,059 --> 00:33:44,640 -Wes Bos: Yeah, I agree as well. The if statements and the the looping, we'll talk about the looping in just a second. It's I their dearly needed in, in react. Other things. I would love fragments by default. So you have oh my gosh, if you have two siblings, like if you have a component that returns like two div siblings, and you try to run it, React will say you cannot return two siblings, and it knows what you did. But it won't fix it for you. So I would love a love for it to just wrap it in a fragment and the fragment will allow you to return just to sibling it's a ghost element. So like, why not? If you know what the problem is react, why not fix it for me just go the extra mile. And do that. For me. - -47 -00:33:44,760 --> 00:33:50,430 -Scott Tolinski: That was a really good one when you said it knows what the problem is? Yeah, okay, well, yeah, you account for the problem, then infect it. - -48 -00:33:52,200 --> 00:34:21,900 -Wes Bos: Same with automatic keys all the time I forget to put a key, I'm looping over something. And every time you loop over an element, you have to give that element and a unique key. So react can track where it is. And very often I'm looping over a list of people or pizzas or something, and they all have an ID. So it would be cool if react could infer the key from the data, because it's labeled common things like key, Id underscore ID, things like that. - -49 -00:34:22,190 --> 00:35:42,030 -Scott Tolinski: Yeah. And I certainly understand the importance of explicit keys. But hey, why not have something automatic as well, right, where it's automatic and explicit, whereas explicit, I guess the concern there is might that be too confusing to have that and just have one way of doing it, but still, I don't know. I like the automatic where I can get it. You know, I also really like the syntax that was in the end. This is another spell thing. I really like this syntax and spell. There's a template tag for awaiting promises, where you just have a pound await, and then the expression and then a colon then and then a colon catch. It's like all right. inside of the the the template tag is essentially the ability to accept or reject or whatever the promise not accept or reject. But output the result of the promise or output the error state without having to do the if error, blah, blah, blah, JavaScript. And you could actually throw it right there in the template, it could make things a little bit simpler than we have in react. Because right now in react, you would have to do all that before the JSX starts right? or do some sort of a wrapper, right? Where would make it a little bit more sense to have some of that stuff in line sometimes where you can have the outer shell of the component render first, and then the interior shell of the component be conditional? It can get a little confusing when you have that multiple wrapping elements sort of going on there. - -50 -00:35:42,030 --> 00:35:44,360 -Wes Bos: Totally agree that would be fresh if we had though, - -51 -00:35:44,360 --> 00:35:46,110 -Scott Tolinski: yeah. Okay. What do you get refresh? - -52 -00:35:46,170 --> 00:35:47,480 -Wes Bos: You know, what else is fresh? - -53 -00:35:47,480 --> 00:37:02,460 -Scott Tolinski: What else? Fresh books and a fresh books is a longtime sponsor over here at syntaxin? What is Freshbooks? Well, they're the cloud accounting software that we know and love over here. That gives you some really great features, such as little helpful nudges to get people to pay the bills on time, say I did this work. And I didn't do it just for exposure here. So how about we just nudge it along here, and maybe you're a little bit overdue, send me a little reminder, and it's a little bit less aggressive, aggressive than sending them an actual reminder. So check it out@freshbooks.com forward slash syntax and let them know that you heard about them from syntax in the section that asks. And if you sign up today, using freshbooks.com, forward slash syntax, you'll get a 30 day unrestricted free trial. So do that right now. Okay, so let's keep moving along here. Let's talk about some more JSX. stuff. We we talked about this one already, but simple scoped CSS, like scoping CSS baked into JSX be very easy. Sorry. There just needs to be a standard way of scoping CSS in react without us having to resort to using 800 different CSS libraries. - -54 -00:37:03,000 --> 00:38:17,190 -Wes Bos: Yeah, I feel like that is either going to come to CSS or react soon, because I feel like now that we are using CSS variables, maybe nesting is coming to CSS, you don't even need a whole lot of nesting if you're using scoped CSS. So like, I think a lot of people are going to be moving away from these CSS frameworks. Because we have it all in ncss, or most of it at least, totally. Next one, we have a shorthand for props all the time, if I have a component, and I've got a bunch of variables, and I have like a price and I want to pass the price variable down as a price Prop, you have to say price equals curly brackets price variable, if you have two or three of those, it gets kind of weird, because you're just passing it down. So like a shorthand for passing down a variable as the same name of the variable as a prop would be pretty cool to do that, I know that you can create an object and spread those in. But still, that that spreading, I think it's confusing to a lot of people because it's got three dots and curly brackets and whatnot, or even just putting a variable in the attribute, and it would just, it would just pick up that at the variable in scope and pass it down would be really, really nifty. - -55 -00:38:17,250 --> 00:39:15,810 -Scott Tolinski: It would be really nifty. And I really hate having to do prop equals prop. I just really don't like it. Smell just lets you do it. Pass it in. It seems like there could be some sort of a shorthand to indicate this is a prop, you know, like, what if it was just like $1 sign bracket prop in there? I mean, obviously, that's not like a real JavaScript seems like an emoji or some. It's just anything, right? Yeah, give me a ghost emoji and then whatever passed along it just anything, right? It's just extraneous. And again, it's just almost extraneous for the sake of being extraneous. I guess you could say it's to keep in mind of JavaScript, right? It's trying to make things more JavaScript D. But just like that, I think there would be also like, it would be nice to be able to see use back ticks. I you wrote here prop interpolation without backticks. And you just had a string dollar sign first dollar sign last is like a prop. And I thought that was really interesting. And I thought that was maybe a little too radical. So I was like, Well, how about even this? - -56 -00:39:15,900 --> 00:39:17,340 -Wes Bos: Oh, just just backticks - -57 -00:39:17,360 --> 00:39:32,420 -Scott Tolinski: less radical version of just do a backtick Yeah, equals backticks dollar sign, curly bracket, first dollar sign bracket, and then it's a little bit more like JavaScript. But right now we have to do your right letter bracket back to dollar sign bracket, like, comma, - -58 -00:39:32,420 --> 00:40:11,150 -Wes Bos: I like that a lot better. That's it's keeping true to JavaScript as as is sort of how react likes to do it. Let's move on to the last section real quick here is just as tooling tooling around react. So a story for easy prettier Babel, TypeScript. This, this came in on Twitter, because I thought like, like I know, React has react scripts and they have their own Babel config. But if you have to change That's kind of weird. And apparently there are some more issues around trying to use that in development as well as production. So I know that that is currently being worked on as well. - -59 -00:40:11,550 --> 00:41:18,810 -Scott Tolinski: One of these things I thought would be really interesting and I pulled this from a smelt sapper perspective, is that because in sapper, obviously, it's sort of like a next JS equivalent everything so baked in, you can just do to do routing, you can just do a ref, like you would an HTML and it automatically turns that into client side routing, which opposed to the ability to have a link from react router, having to bring that into the link tag link to is a special syntax. It's not HTML. And then even worse with next Yes, you have to do link and then an anchor tag inside of there, which is just madness to me. And sure enough, when I suggested this on Twitter, I got a lot of cool, why don't you just import link a globally I do that, why don't you just have a link available or reassigned to a capital A, I do that. But those things don't really make up for just how nice it is to write an HTML a href, with like, absolutely no special syntax or nothing in there and just have it automatically client side route. It is a fantastic experience in what I wish I could replicate in react land, - -60 -00:41:19,350 --> 00:41:48,380 -Wes Bos: especially for Scott and I were we're teaching this stuff and we can't to put too much magic, that is not standard magic into our stuff, because people are going to be going into projects where it doesn't have this exact same setup. And if you stray too far from that people get frustrated because you taught them something that was a little bit different. So that's why it's gotten I always like to sort of keep it as close to what's in the box as as possible. - -61 -00:41:48,780 --> 00:41:51,810 -Scott Tolinski: Yeah, especially in our content. Yeah. - -62 -00:41:51,840 --> 00:42:25,800 -Wes Bos: Last one we have here is just scaffolding component generation. I know tons of different frameworks have this sort of thing where you can scaffold out a basic file, it wouldn't be all that much for react. But it just like sort of some basic setups. And I think a lot of these things that we talked about, as well as why people love to use next jass because they've taken the base of react, and they've added a lot of the stuff that we're we're talking about on top of it, which is like I haven't used react scripts, or like that's react scripts, right, or you object. I haven't used that. And well over a year, I've used crate react app, - -63 -00:42:25,800 --> 00:42:34,130 -Scott Tolinski: because I want server side rendering, I want route I want route baked in routing, I want server side rendering, I want that stuff. And I won't have to think about it. - -64 -00:42:34,170 --> 00:43:00,860 -Wes Bos: I'm gonna call it here. I think react is gonna announce some stuff for SSR in the next six months. So I think by the end of the year, React will will roll out some special SSR stuff where you can do partial hydration from the server, you don't have to ship as much stuff to the client, because a lot of it's happening on the server. I bet that's what's going to happen. And I bet that's why they are dragging their feet on rolling out of suspense. - -65 -00:43:00,960 --> 00:43:24,000 -Scott Tolinski: I think that's a pretty reasonable prediction. Yeah, that seems about right to me. I, if you were to predict how many of these things that we suggested in this episode, were to actually come true. What would you predict? What do you think? What do you think our average rating? Do you think one of them, which would be the one that we already know is coming? Or do you think any of these things likely come three or - -66 -00:43:24,000 --> 00:43:31,670 -Wes Bos: three or four we'll probably make because maybe some new some new common hooks will see the class and class name thing we'll see. I - -67 -00:43:31,670 --> 00:43:33,330 -Scott Tolinski: bet unmounting for animation. - -68 -00:43:33,570 --> 00:43:56,850 -Wes Bos: Yeah, so I animation stuff will definitely. And then the rest is just you you lean on the community for that because it's just not reax job. They've always been like that. And along the way they've just said, No, you choose your own package for whatever it is you want to do, then that's cool, too. Totally, totally. Well, thank you so much for tuning in. Let's move into some sick pics. You have a sick pick for me today. - -69 -00:43:57,300 --> 00:44:07,770 -Scott Tolinski: I do you know what I've been? You know me. I get into some new podcast territory, Alex and podcasts and podcasts and up. So let me suggest a podcast here. I'm gonna sneeze. - -70 -00:44:09,630 --> 00:44:10,140 -Unknown: Whoo. - -71 -00:44:10,440 --> 00:44:19,050 -Scott Tolinski: Yeah, my dad really makes these really elaborate sneezes, and it's decided I wasn't sneezing elaborately enough, so I decided to step it up. - -72 -00:44:19,290 --> 00:45:04,590 -Wes Bos: I'm a scream sneezer. We're like were you Ciao? Yeah, no. And my wife recently noted that our children are all three of them do it. Oh, they all scream sneeze and I saw I tweeted like, Oh, no, my my my kids have the scream sneeze. Like, I can't sneeze quietly like, I feel like I'm gonna like blow my back out or something like that. So I just it's just it's a it's a production. And my kids have done it. And somebody on Twitter said my favorite bit of trivia. Morgan see underscore Smith on Twitter says time to break out one of my favorite facts, making noises while sneezing is a learned response. And we know this because deaf people obviously Mostly don't make a noise when they sneeze. So does learn from watching. - -73 -00:45:05,430 --> 00:47:01,290 -Scott Tolinski: Yeah, right. Yeah, that makes so much sense. There's a deeper story here because I used to not be able to. I used to say I couldn't sneeze. It's not that I couldn't sneeze. But when I went to sneeze, I tighten up and hold it in and then like, yes, a pop or something or hit have the hardest time. And the only way I learned how to appropriately sneeze was to start really gone. Like, like these big, big sneeze noises that my dad my dad was always like, you know, my dad would do it. My mom would roll her eyes or something because it was over the top and ridiculous. So yeah, that's, that's my sneezing story. No, my podcast here today is going to be a podcast that I've been really enjoying. I don't listen to very many tech podcasts, there's a there's a few. But this one I just, I've been I've been listening to it every day. And so far, I feel like it has made me smarter. So I'm gonna suggest it to you, which is if you're not listening to software engineering daily, please do. It's very fantastic. And it's it's, it's not like a fun syntax experience, so to say, but it is definitely a very educational experience. And maybe half the time, it's a little bit not in my wheelhouse. And I'll just skip those episodes. But for instance, we mentioned mux. Earlier in the episode, there was an episode on May 29 2020, Kubernetes vs. serverless with Matt Ward, boom, that is an episode that really blew my mind and a lot of ways. So it was really fascinating to hear people having these big problems that I'm not necessarily having myself, how they're solving them, and maybe some of this technical stuff that can be occasionally over your head at points, but also at the same time give you a little bit of base knowledge for various aspects of even maybe server infrastructure or stuff that you've never really cared to think too much about before. You might not have to. But it does give you that nice little ability to understand the concepts a little bit better. I think the host is great. He has really good questions they get into it. And not every episode is super relevant to my interest but for the most part I found them all to be very good so far. All right, - -74 -00:47:01,500 --> 00:49:11,370 -Wes Bos: I'm going to sec pick another two I've been on a tool kick lately just because we're just doing a bunch of work at our place. And a while ago I sick pick my sick pick was a pic quick. So there's the screwdrivers, yeah, you you can't lose the bits too, because in order to get the bits out of the handle, you have to push the old one in. It's It's It's genius, because you can't ever just like leave a bit lying around. Because if you lose one, you're screwed. And you can't take them out without pushing the old one through. It's awesome. And I picked it a while ago and I have the the sick pack the sick pack. It's just all the screwdrivers you would ever need. And I also have the stubby one just thrown in there. Yes, it's a tiny little it's literally called the stubby. That's good. They also have the teensy Turner for for things like tech gadgets and whatnot. But the one I'm going to pick today is I called it last time the junk drawer screwdriver. It's just a smaller version of the six pack with slightly smaller bits. And it's perfect for around the house stuff like it's you can still do your Philips you can pull a drywall screw out of it. But if you need to, like take a battery cover off because the kids need a battery swapped out on their annoying toys or I was working on my garage door and I needed the tiny little screwdriver to clamp down on some leads. And I was like this screwdriver is awesome because it's not like a tiny little set of jeweler's screwdrivers, but it's also not the big one. And it's the perfect junk drawer screwdriver. It's the perfect screwdriver ever having around the house and we keep it in the house and it's awesome. The one that I have is called the hex key pick quick, which it says it's for machinists and mechanics, which I don't I don't know that should I guess so. But it's the perfect they should call it the junk drawer screwdriver because it's great. I don't know if you can can you go on Amazon and see if you can you can see these because it's a Canadian company. Pick quick p IC qu IC e pick quick sick pick. - -75 -00:49:11,370 --> 00:49:18,300 -Scott Tolinski: little screwdriver family. I'm getting in here in a variety of colors to which color did you go with? - -76 -00:49:18,540 --> 00:49:30,690 -Wes Bos: We're all wondering. I think that they're colored based on what they do. But so the red one is what I have. That's the six the six pack and then the junk drawer. One that I'm talking about is the yellow one. - -77 -00:49:30,840 --> 00:49:38,070 -Scott Tolinski: No I do I see. I see the three multi driver family available in orange, blue, red, green, all of the same thing. - -78 -00:49:38,310 --> 00:49:42,000 -Wes Bos: Oh, okay. Maybe. Yeah, maybe I'm wrong about the colors then. - -79 -00:49:42,000 --> 00:49:43,620 -Scott Tolinski: Maybe you're wrong about the colors. - -80 -00:49:43,620 --> 00:49:53,370 -Wes Bos: Ah, yeah. I've never been so passionate about a screwdriver, but I was just using it the other day and I was like This thing is awesome. And my wife is like that's the best screwdriver we've ever had. - -81 -00:49:53,970 --> 00:50:09,450 -Scott Tolinski: Yeah, I bought a screwdriver set off of Amazon for like phone projects. Again, very passionate about that screwdriver. That whole set has been very good. Fantastic. I believe I understand being passionate about a screwdriver. A good one really, really definitely comes in handy. - -82 -00:50:09,540 --> 00:50:14,040 -Wes Bos: Yeah, I just looked on on Amazon us 12 bucks for the one I'm talking about. Cool. - -83 -00:50:14,280 --> 00:50:49,500 -Scott Tolinski: All right, well, let's get into the shameless plugs part of the episode where we talk about things that we have created ourselves. Now I have created a course on sapper that came out last month and it's sapper for everyone we teach you about how you can build full stack server side rendered or statically generated apps using spelt and sapper so a lot of the features that we mentioned in this episode, things being pipe dreams to come to acts on kind of interesting to you. Maybe you want to check out in a fully server side rendered platform check out the sapper course because my site's built in sapper, I'm a big fan. I like it a lot. - -84 -00:50:49,740 --> 00:51:29,400 -Wes Bos: I'm gonna shamelessly plug upcoming course of mine should be out in I don't know, maybe a month or so it's a Gatsby course I don't have a name for it just yet. But it's going to teach you to build websites with Gatsby talks about sourcing data from a headless API, as well as from a REST API as well as how do you do live data and Gatsby and you don't have to rebuild it, like when the page loads how to fetch that data. So pretty happy with with how this course is going. It should be out in a little bit after you listen to this. So just go to Wes Bos comm Ford slash courses. The rest of my courses are there as well and you can grab them for 10 bucks off with the coupon code syntax. - -85 -00:51:29,760 --> 00:51:35,160 -Scott Tolinski: As always, we will catch you next Monday where we're going to be talking about what less forms and inputs Yes, - -86 -00:51:35,160 --> 00:51:36,180 -Wes Bos: we are ready to record - -87 -00:51:37,860 --> 00:51:38,700 -Scott Tolinski: their pace. - -88 -00:51:40,530 --> 00:51:41,310 -Unknown: Head on over to syntax.fm - -89 -00:51:41,310 --> 00:51:50,250 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax263.srt b/transcripts/Syntax263.srt deleted file mode 100644 index fb6fe0fee..000000000 --- a/transcripts/Syntax263.srt +++ /dev/null @@ -1,144 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott, Todd. Totally in ski. - -2 -00:00:25,950 --> 00:00:48,210 -Scott Tolinski: Oh, welcome to syntax. In this Monday tasty treat, we're going to be talking about forms captures honeypots. And dealing with malicious users. That's right, we're talking about contact forms and forms overall within HTML, JavaScript and the web. My name is Scott Dylan scammy, developer from Denver, Colorado, and with me, as always, is the Wes Bos, how you doing? - -3 -00:00:48,599 --> 00:01:00,930 -Wes Bos: I'm doing great. I am back in Hamilton for a couple of weeks. So we came home from the cottage and my internet here is fast, I can see you. There's no, there's no latency. It's a it's a good life. - -4 -00:01:01,500 --> 00:02:08,550 -Scott Tolinski: It feels weird that there's no latency that we're actually on. webcam. Now. That's wild to me, was also wild is one of our sponsors, which allows you to not only like right now I can see Wes but our sponsor today allows us to see your errors and exceptions happening right there. on your website, I'm talking about Log Rocket Log Rocket is the error and Exception Handling service that allows you to actually visually see how your error is happening with a scrubbable Video Timeline of the errors, what it was collecting all of the the things that led up to the eventual issue, this is one of those amazing services that you really have to try out. So you're gonna want to head to Log rocket.com, forward slash syntax, and you're going to get a 14 days for free. Again, check it out Log rocket.com Ford slash syntax, see your errors and exceptions happening in real time with a scrubbable video with Log Rocket. So let's get into it. Let's talk about forms we all know and love forms, I deal quite a bit of forms myself, where do you want to start here? - -5 -00:02:08,579 --> 00:04:27,930 -Wes Bos: Yeah, I just want to talk about sort of like where this episode came from. So I'm working on my Gatsby course Actually, it's done, I'm about to start recording. And I have part of the course is that we have like an order form, that is just a contact form. And then it sends an email. And like that was like one of like the first things that you learn when you're like learning PHP to send it, send an email, and you're done. And I'm just kind of sitting there being like, I can't like, I can't release this and tell people, it's this easy to submit a contact form, because you create your form, it sends an email, you can't just release that to the wild because of bots and malicious users. So if you have a contact form that does, obviously contact mix, sell something has an email newsletter, sign up a bug report, signing up for an account, resetting a password, all of these types of things are just forms that the user will then submit. However, if you just have those on your website, somebody is going to either there's going to be just like a generic bot that finds that form, and submits it just because it's trying to inject spam and trying to send emails to you. Or you're going to have somebody that writes a script that will maliciously submit it a million times. And that can be really big trouble. If something like a password reset is sending an email off to a user, like, imagine a user could request a password reset for someone's account that's not theirs, and they could send, I don't know, 1000 a minute or something like that, then what's gonna happen is like, first, your users gonna be pissed. And second, you're gonna get locked out of your transactional email thing like that. So it's sort of the unfortunate, The unfortunate thing was web development. Is that like, the first 90% of it seems all easy. And then you have to get into this little weird area go Yeah, but we need to account for these types of bots. So we're gonna go through I think I've got four different sort of approaches that you could go through here to solve these are sort of defend against these types of things. And then you can sort of choose one or or multiple ones of these to get into it. So what can you do the first thing and I asked on Twitter, like, like, what do you do? What do you do about this? Because the probably the we'll talk about this in a second. The clear one is put a cap on it. But CAPTCHA suck, I hate them so much the most effective - -6 -00:04:27,930 --> 00:04:53,390 -Scott Tolinski: like, yeah, overall most effective, but also the, if we're, if we're doing the Yelp dollar sign thing, that's the the highest amount of dollar signs there because it's the you know, requires the largest amount of discomfort and disruption for your users. I think I don't know about you, but I've actually had to resort to captures in some situations where I prefer not to, but the end of the day it sometimes it is just required. Yeah. - -7 -00:04:53,430 --> 00:05:55,620 -Wes Bos: So the first one is called a honeypot. And honeypot is essentially a field on your input that right other users will not fill out, but bots will try and fill it out. So it might be an input that says do not fill this out. Sometimes people hide inputs, so they have an input. And then they hide it either via CSS or by the hidden attribute. People said that works really well, which I have a hard time believing because like what bot is not smart enough just to check if an element is visible or not. Right. But apparently, it works pretty well. The downside to this honeypot is that you have to really make sure that it's accessible. So if you have an input that should not be filled out, you need to make sure that the accessibility use case for that works as well. And then also, I've seen people, like change the names on things, and then that screws up the autofill. So you got to make sure that you put the proper autofill attribute on those inputs as well. - -8 -00:05:55,980 --> 00:06:17,190 -Scott Tolinski: I found the honeypot to not be that effective in 2020. Just knowing for my personal use case, when I've used it. It hasn't done a lot for me to prevent spam. But maybe I wasn't seeing the full amount of spam I was going to be getting. But it seemed to me that if there was spam, or spammy enough, they were found ways to get around the honeypot or identify it for what it is. - -9 -00:06:17,340 --> 00:06:48,690 -Wes Bos: Yeah, I asked on Twitter about this. And I would say like 80% of people said honeypot is enough for most of my use cases. Just because the spammer knows if there's these are just automated bots, in most cases, it's not somebody going to the website and trying to figure it out. And they know that okay, if they have a honeypot in place, then I'm just gonna get a move ahead, because there's certainly much more, there's a hundreds of other contact forms on the web that they can put there. I don't know like, what are things that are like gold buy gold online? Or - -10 -00:06:48,810 --> 00:06:56,610 -Scott Tolinski: Wouldn't it be fairly simple for a bot to find the honeypot as a honeypot just based on maybe checking CSS rules or something? So - -11 -00:06:56,610 --> 00:07:27,210 -Wes Bos: I thought that's what I thought as well. But apparently, it works pretty well. I was super skeptical of it at first, but maybe the people that are saying it works are also not the ones that are getting nailed, because certainly I have contact forums I have had online for years. And they have no sort of none of the stuff we're talking about today. And they've never got a single single piece of spam in them. It's maybe it's more for like common form inputs, things like WordPress, they specifically look for them. Interesting. - -12 -00:07:27,539 --> 00:07:35,580 -Scott Tolinski: Yeah, I really don't know, I wish maybe there were some like research, it'd be really great to see some research on the status of a honeypot. - -13 -00:07:35,580 --> 00:07:36,330 -Unknown: Mm hmm. - -14 -00:07:36,330 --> 00:08:31,920 -Scott Tolinski: Next is going to be IP throttling. And this one can be exceedingly simple if you use a service like CloudFlare. And like, this isn't obviously a sponsor spot. But CloudFlare makes IP throttling just absolutely super simple in their firewall settings, you just say, hey, I want to rate limit this person if they're hitting this same thing beyond this time, or you can just identify who that IP is and block their IP. And sometimes you need a little bit more custom work with this one, specifically, if it is like submitting a contact form five or six times and then stopping, or potentially, like I had an issue with a scammer that was clearly doing some VPN stuff to change their IP every once in a while. So one IP, if it were to get blocked, they would just go ahead and change their IP start going off again, change your IP, so on and so forth. But this one can be effective if you have a non sophisticated spam attacker. - -15 -00:08:32,150 --> 00:09:40,500 -Wes Bos: Yeah, yes, things like only allowing somebody to sign like try to sign up twice within a 10 minute window. And then there's also algorithms that you can use that every single time that they do, it's like the Have you have you ever had your kid get your iPad or iPhone, he come back and it's like, please wait six hours to unlock, because every time that they do, like try to brute force it, it adds a little bit more time. And that's enough just to either frustrate them or slow them down enough that they're not going to do enough damage. Because the difference between sending, like submitting it 10 times over an hour and submitting it 10,000 times over an hour is huge, right? Yeah, totally. Also, so the reason why the IP throttle doesn't work. So well. And also I've I have IP throttling on a lot of my stuff. And I often get in trouble with classes who are taking my courses, because they're all the same IP address and then all sudden, 40 people try to sign up land and then my my IP throttling kicks in. But it says hey, you can't do that because it seems like you're a spammer. So like yet also have to think about that where multiple people could be on legitimately on the same IP as well. - -16 -00:09:40,890 --> 00:09:46,320 -Scott Tolinski: That doesn't seem like super common, though. But yeah, definitely something that I would never thought of. - -17 -00:09:46,470 --> 00:11:43,650 -Wes Bos: Yeah, yeah. Next we have blocking known ASN. So one thing that a lot of malicious users and bots will do is that they they don't use the same IP address they every single time they make a request, they run it through different VPN, usually what will happen is they sign up for either VPN service or just like raw boxes on like a, like a server like Digital Ocean or something like that. And then they send the request through that that box. And every single ISP, including every single person, like Digital Ocean, and every single person that hosts something they have this number that's called an ASN. And it's a specific number to that host, and ASN for legitimate msps are good. But you can also get lists of commonly abused IP addresses, especially because there's a lot of hosting companies that do not abide by DMCA. And those are very popular amongst people who want to run bots. So you can add a CloudFlare level, you can get a list of as ns, or just look at the ASN for people who are submitting these spam, and just block those and that or you can, you can, you can throw in a CAPTCHA at that point. Because the bots are automated and if you throw a CAPTCHA and so what I've done in the past is because there's also legitimate reasons for people using like a digitalocean, as a VPN, and you can't you then you're blocking good traffic as well. So you can just throw a CAPTCHA in there if they're coming from one of these known CD SPS, as somebody who uses the VPN for just like all the time traffic anyways, I am frequently frustrated by IPS being blocked, because he's just going to Google Google will be a lock off, we got to do this CAPTCHA. And then I have to select, you know, 800 photos of the sidewalk before Google looks at me through and I just end up going to DuckDuckGo instead, because they let me use their search engine and I don't get as - -18 -00:11:43,650 --> 00:12:05,340 -Scott Tolinski: good of search results. So it is definitely frustrating when you're on a VPN. And those IPS like that's the one most like that's the one reason why I would never have Courtney on a VPN all the time, because I just feel like she would not have the patience to deal with that. And I almost don't have the patience to deal with it either. But it definitely is, is a huge bummer. The scammers gonna ruin everything for everybody. Hmm, - -19 -00:12:05,640 --> 00:12:35,520 -Wes Bos: totally. And that's why if you pay for like a popular VPN, and try to use Netflix from another country, it almost never works it that's because Netflix has a list of all the popular VPNs ASN numbers. And if they see that your traffic is being piped through one of these, they won't allow it. So if you want to use a VPN, and you want to get American Netflix, you have to host your own VPN software on a service that ideally is not not known by netflix - -20 -00:12:35,790 --> 00:13:37,590 -Scott Tolinski: word. All right. Last on this list, and we're going to wrap this up is talking about everyone's favorite and least favorite, which is CAPTCHA CAPTCHA is a most effective in my mind, because what you have to do with a CAPTCHA is it usually asks you to submit something sometimes it just based on your threat level asks you to submit a checkbox that proves you are not a robot. Other ones are getting a little bit more complicated. I don't know if you've seen any videos more than we have to drag the puzzle piece into a puzzle or something like that. That to me is way better than the eventual grid of photos that you have to suggest to help Google's learning algorithm. Either way, it's presenting the user with a challenge, right? And that challenge will verify whether or not it's an a legitimate user, and not just a robot. We've all seen these we all use these captures they are annoying, or they can be annoying, I should say. So you you have a nice little descriptor for each of these the soft capture knowing capture good, you want to talk a little bit about some of these different ones you have here. Yeah, - -21 -00:13:37,590 --> 00:15:11,730 -Wes Bos: I don't know if this is considered I just call this a soft CAPTCHA but it just like what is one plus one, you can just automatically generate like a list like an array of questions, and then pop them in there. Think simple things. What is one plus one? What is five plus eight? And then submit the question ID and the answer. And then on the server side, you check if the answer is the same. So that's at the very basic, that's probably enough to stop a lot of people. But then there's also like years ago, we had these super annoying, you still see them all around these like, like metal band cryptic letter trying to type what you see in it. Those are almost a thing of the past because Google's working really well. The downside to using Google's captures that you have to embed Google on your website. So just like putting a Facebook or Instagram link on your website, then they're able to sort of track you around the web. But their capture works super well. By default, they're hidden capture will use their internal algorithms to figure out if you're a bot or not. We don't know what that is, but I'm sure it's things like have you signed into your email on the same IP address and cookies and things like that. And then if it detects that you are a maybe a threat, then it then it will throw up the little train or self driving cars select the sidewalk and the bus and the bridge and I feel like they've I don't know about you, but I feel like I've had to fill out like two or three of them recently before I'm able to get past the captcha, I don't know if that's just me or it's getting like getting worse - -22 -00:15:11,939 --> 00:15:33,960 -Scott Tolinski: when you're on a VPN. That is maybe the IP has been suggested, or you know, concerned that it's spam they make you fill out like eight. And I'm just so annoyed by it sometimes especially, or even like when it'll say, you know, select the stoplight in they'll be just a tiny sliver of a stoplight in one photo and you're like, do I select that tiny sliver or not, and then you select it, and then it doesn't work. And you're - -23 -00:15:34,019 --> 00:15:36,120 -Announcer: like, Oh, - -24 -00:15:36,570 --> 00:15:47,220 -Scott Tolinski: I honestly get really fired up over over these captures. And in fact, I'm so I get so angry at them. It might be the most angry that I get is when I am like eight or nine round on a CAPTCHA. - -25 -00:15:47,820 --> 00:16:36,780 -Wes Bos: The last one we have here is if you don't want to use Google, because I know like a lot of people straight up block all Google stuff on their network, which is understandable. There is another one called h CAPTCHA. I thought this was certain CloudFlare. But it doesn't look like it. It seems like it's trademark registered of intuition machines, Inc. It seems like it's like a privacy focused CAPTCHA, which is cool. Maybe I'll go to this as well. The only problem is that I use this on one of my sites. And every now and then I get people complaining that the captcha doesn't load because they use an ad blocker, which is frustrating. And you just have to be like, you got to turn it off. I'm sorry. Like, it's it's so annoying that like good paying users get blocked by this stuff. But at the end of the day, you sort of have to, otherwise you wouldn't be able to run your website. - -26 -00:16:37,260 --> 00:17:30,240 -Scott Tolinski: This intuition machines company seems kind of interesting. It is basically just the SA software company who specializes in machine learning and AI. So seems like uniquely suited for an upgraded capture. But more recently, I have been seeing h capture around. Specifically, I'm trying to remember what sites I've been seeing. But there are some sites that I see it on now. And I actually really like it because for the most part, it's so much more reliable than than Google's in terms of like actually understanding your selections. And it does seem to be a little bit less annoying. And in my, in my mind when using it also added benefit of not adding someone like Google keeping a little bit more privacy focused aspect to your site is very positive. Again, we don't use anything like Google Analytics. So having a capture on the site is the first time we've invited Google onto the site. And it's not a great feeling. - -27 -00:17:30,630 --> 00:18:01,610 -Wes Bos: Oh, man there integration if you're using google recaptcha, version two, which is what most people are using, there's a version three, which is not like a successor to it, I spent like maybe three hours reading the differences. And I started to throw my hands off. I'm like, I don't understand what the difference is between these two. But it looks like if you want to use h CAPTCHA, you just swap out a couple pieces of HTML, and it will just work, which is super cool. So you could probably swap this out in like 20 minutes, I bet. - -28 -00:18:02,360 --> 00:18:04,440 -Scott Tolinski: Maybe a nice little project for today, then, - -29 -00:18:04,980 --> 00:19:00,080 -Wes Bos: I think that's the other difference with google recaptcha. version three is it gives you a threat score. So if you not just when you want to submit a form, but like when the page loads, if you want to like given the IP address, and cookies and things like that of the person visiting, you can also get a threat level where you can sort of like make the choice yourself based on the data that you've been given. Cool. Pretty nifty. So those are things you should know about. I'm glad we did this just because Oh, sorry. The other option is just use the service. And that's Unfortunately, the solution for a lot of things lately. And I don't necessarily love it because people are like, just use a service like me know, I kind of want to teach people how to like, make an actual form and submit it and email it, rather than just pop in this thing. That's five bucks a month to send an email. So although services have that stuff solved, - -30 -00:19:00,420 --> 00:19:08,640 -Scott Tolinski: also, like eight or nine services later, and you are looking at a hefty bill coming your way, right? - -31 -00:19:08,670 --> 00:19:21,350 -Wes Bos: Yeah, I don't know if that's part of my, my ethos. Certainly I love using services. But and even like, for my own website, people are like, just use, what's the cloud for the images? - -32 -00:19:21,840 --> 00:19:22,650 -Scott Tolinski: Oh, cloudinary - -33 -00:19:22,800 --> 00:19:48,180 -Wes Bos: cloudinary. I love cloud nine. I use it on my course website. But he specifically didn't want to use it, even though they offered to give it to me for free. And but I was like, No, I like I want to build this thing. So somebody who doesn't have $99 a month to run this thing. Yeah, we'll be able to do it. So like I want to like, I don't know, there's something about like the early days of HTML where everything runs, everything runs by yourself. That's certainly an option as well. Yeah, I - -34 -00:19:48,180 --> 00:20:09,590 -Scott Tolinski: really tried to stay away from services when I do the tutorials for those reasons, or not, like lock yourself into something that's going to ultimately cause the user money. I mean, it ends up becoming death by 1000 cuts here where you just have So many different services you sign up it all seems cheap at the time and next thing you know it's expensive and you could probably save that that money by just doing it yourself. - -35 -00:20:10,050 --> 00:20:17,880 -Wes Bos: Totally. Alright, that's it for today. Thank you so much for tuning in and we will catch you on Wednesday, bees face. - -36 -00:20:19,650 --> 00:20:29,430 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax264.srt b/transcripts/Syntax264.srt deleted file mode 100644 index 0e354cabd..000000000 --- a/transcripts/Syntax264.srt +++ /dev/null @@ -1,404 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Tasty Announcer: You're listening to syntax - -2 -00:00:02,849 --> 00:00:10,530 -the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and Wes Bos. - -3 -00:00:10,559 --> 00:00:49,470 -Wes Bos: Welcome to syntax This is the podcast with the tastiest web development treats out there today we've got a very special guest we've got Jerome Hardaway on which was just like making a list of bullet points of everything that Jerome has done and is involved in right now. So we'll save that for the introduction, but all kinds of really interesting stuff. Today, we are sponsored by two awesome companies. First one is dot tech domain names, which is literally in the name. It's not technically. And that's one his Sentry he does all your error and exception tracking in your front end your back end apps with me as always is Mr. Scott to linsky. How you doing today, Scott? - -4 -00:00:49,920 --> 00:01:14,640 -Scott Tolinski: Hey, I'm doing okay, I started a new physical therapy like first thing in the morning. And it means I have to like wake up earlier than everybody for the first time and who knows how long and it is difficult to barely. But yeah, it's nice to get that out of the way and you know, get home and Uncle Nikki is hanging out with Landon right now while we record this and yeah, that's gonna be the rest of my day is just hanging with Linden in Brooklyn. - -5 -00:01:14,840 --> 00:01:30,030 -Wes Bos: That's good. Yeah, if you hear Scott, stop talking, like I was listening to the last podcast, and there was like a section where Scott just stopped talking for a while, because he had to run out. So if you hear Scott duck out for a bit, that's because he's got to turn uncle Mickey back on or something like that. - -6 -00:01:30,240 --> 00:01:47,670 -Scott Tolinski: Yeah, Courtney went back to work. So we're now splitting time. 5050. Where before when she wasn't at work, because the school shut down. It was like, Oh, all right. Well, you can have all the time you want to work. And now I do not get that time, which is very reasonable. Yes. It's a hard transition. - -7 -00:01:47,879 --> 00:01:58,410 -Wes Bos: Awesome. Well, let's get into it. So Jerome Hardaway at Jerome Hardaway on Twitter, basically, I think you referred to yourself as the Captain America of .TECH. Is that right? - -8 -00:01:58,439 --> 00:02:24,630 -Jerome Hardaway: No, I was referred to first but that's the Captain America web, by Kyle shevlin. And then a bunch of guys that Tula tulia, they started describing me as the sergeant of arms or get arms. So that's who code and. And I was like, two years ago, and it just stuck that people started calling me you know, and he's, he's like the web's Captain America. - -9 -00:02:24,660 --> 00:02:29,720 -Scott Tolinski: So that's a better nickname than either we have. We don't have nicknames that are that cool. - -10 -00:02:29,750 --> 00:03:24,780 -Wes Bos: No, no, we don't we need a cooler name like that. I think it's very fitting. So drum, you're an avid Tweeter, you have an Air Force background, you've obviously learned to code yourself, we'll talk about that you run a thing called vet to code. And then like most recently, given the all of the Black Lives Matter, protests, the awful police brutality, you've been like an incredible voice in the web development community. And you've just been like, so generous with your time and helping people figure out like how to like, what do we even talk about how to be an ally with all these voices, and not? So we thought we just have you on just to talk to you about everything and your backgrounds. Very interesting, as well as, because you met with Scott and I, and you sort of, like helped us figure out what do we do as two white dudes in tech, with a large platform? And how do we handle that? So we appreciate that. So you want to like give yourself a little bit of introduction? Did I sort of cover everything there? - -11 -00:03:24,780 --> 00:05:26,670 -Jerome Hardaway: Oh, yeah. You know, the high level overview. Like you said, my name is Ron Hardaway, I'm the geeky arms or Executive Director, I guess I'm old enough now to be called executive director of ETSU code. I started with the code was like 2728. And I just didn't feel right with that title. It was like, everybody's like, everybody was old. So I was like, I'm not like these like, ancient dudes. So I'm just gonna have a title for myself. Basically, what we do is that we teach veterans that a program is a JavaScript focus, and we do this hundred percent free no GI Bill, no government funding, nothing. But the sole focus of just you know, teaching people JavaScript. And right now we had a 97% success rate 252 veterans and 37 state jobs, very happy about that we're growing every day in services because we try to run it like a tech company that you can mess up at and I get fired. And just you know, it's the joy of my life because I was a veteran coming from security forces and allow these programs didn't exist at all when I was out and only thing they were told me I could do was be a copy, go back overseas and go back didn't shot it. And I was like, I don't like any one of those things. So I started to learn how to code and got my first opportunity with department Homeland Security with database analyst and I never looked back and when I was trying to help other veterans out I was like this, you know, this is the way like getting like veterans, early stages or any special and teaching them how to utilize their critical thinking skills they pick up in the military and apply that to programming. That's just what I thought of when I'm not doing that. I was a funding engineer at Comic Book. I love those guys. That's like, you know, it's also I kind of fit into the whole Captain America stick like Sam Hughes kept the Captain America fan Marvel fan. Yeah. You know, that was a front end engineer. Sorry, I'm guessing my dogs growling. - -12 -00:05:27,380 --> 00:05:32,250 -Scott Tolinski: Alright, you gave very well, we all we all have annoying dogs that bark and get in the way. - -13 -00:05:32,250 --> 00:06:48,270 -Jerome Hardaway: My dog said that they're not having that they're being very unfriendly with each other right now. So I was a friend engineer coming book, loved it. But I recently moved on to be a dev advocate and take evangelists for Quicken Loans, and pretty strong love that to them already excited. My bosses, like they're very aware of things that are going on. And they're very supportive. And it's just, especially as minority, it's just super cool to be in type environment like that, where you get 100% of yourself to work. Because that's, you know, code switching and everything like that, that's a very big thing in our community. So that freedom to be able to be all of you. So that way you can be you can perform at the highest level that you have and not have to worry about tiptoeing around people's like ideals, or their mind, or the microaggressions, or the thought processes that they have already preconceived in their brains about minorities. So you don't, you know, fit that you have, you know, and that's what happens in a lot of workplaces where people are, you know, they're trying to dodge that stuff. So they can't, you know, they can't bring their A game and can't be your full self. Yeah, yeah, that's, that's, that's me, a quickenloans dev advocate by day, Executive Director of etsuko by night, essentially Batman without the money out of gadgets. So - -14 -00:06:49,200 --> 00:06:52,770 -Scott Tolinski: you spend any time in Detroit at all, because of Quicken. - -15 -00:06:53,249 --> 00:07:40,530 -Jerome Hardaway: They're gonna be having me fly out there every once in a while. So I'm gonna be up there, but I'm in Nashville. Yeah, Nashville is coming from Memphis and coming from a community like the tech community. It wasn't really all from Nashville. It's been like a complete 180 degrees actually, by they're taking the jobs who community is amazing here. I don't know, you know, any of you guys here like Cowell shit like Eventbrite or anything like that. These guys, they really are forward thinking, especially in the south, but really forward thinking about, like, how to make communities inclusive. So I'm very like, appreciative of this community. But also like, you know, I like to travel. And I'm lazy. I don't like leaving home. So I'm the same way I like, Yeah, - -16 -00:07:40,530 --> 00:08:26,850 -Scott Tolinski: I just asked, because I know, I'm from Southeast Michigan and Quicken Loans. I know, they've done a lot for the city of Detroit. I know a ton of developers who have either worked there at some point in their career, or they were definitely one of the companies that was in our scene quite a bit, given our proximity. So you, you mentioned basically wanting to have a different path after after, like, coming back, right? What was your introduction into programming concepts that made you want to say, Alright, this is something that I really want to devote myself full into, but also like, I want to show everybody else, like, what was your introduction that made you just say, this is, this is what I want to do this. - -17 -00:08:26,850 --> 00:10:18,799 -Jerome Hardaway: Alright, so I saw a commercial online, and they were just talking about coding at a college or something. And I was like, What is that, and that did more research. And he was like, Oh, you can learn how to do stuff on your own. So I picked up SQL book. And that's how I got into, you know, SQL and, you know, Postgres and learning that stuff, and I've been dealing with, what am I thinking department security, but what really, like hit helped me, like, you know, get that book of like, wanting to dive in was like, I wanted to be entrepreneur, I saw business is the way for upward mobility at the fastest moment. And like, the thing that I kept running into was like, all of the ideas I had, they require programming and programmers cost the most amount of money when it comes to building a project. And I was like, Yeah, dude, like, if I can learn this stuff on my own, that will, like save up a lot of the costs of, you know, building projects and stuff like that. So that's what had me dive into it. And I just really, like, man, the front end, but just really bit me, especially comes to user experience, because I have security forces. And I put front end developers like as the elite gate guards, like the web, right? So because in the end users, especially your user focused developer users really don't care about the back end, as much as it doesn't work, right like it. They want it to be fast, be pretty and work right in that order. So that's where I was like the front end, guys, they kind of, you know, stole the show for me. And then that's what I wanted to focus on. I never, I never forget my first front end framework and never forget the first time I played with a different like, front end CSS framework, like animate dot CSS, that was the first. - -18 -00:10:20,159 --> 00:10:23,970 -Wes Bos: Oh, that blew my mind. That's one of my most watched YouTube videos actually - -19 -00:10:24,020 --> 00:11:05,549 -Jerome Hardaway: slick slider that was my favorite. Like, that's it. That's actually how I met Ken Wheeler years ago, he was the first big name person, like when I was learning how to code who actually spent like, 30 minutes, we'll be talking to me about something over online. I think he remembers it. That's like, yeah, just being able to like, you know, like, that's what another thing that attracted me to JavaScript by how just down to earth everybody was, it was the working man's language. It wasn't a bunch of, you know, people telling me about computer science and, you know, LIFO, FIFO, big O notation and all that other stuff. I was like, Oh, these are people, I can actually, you know, drink and play video games with and, you know, go for, - -20 -00:11:06,330 --> 00:11:33,450 -Scott Tolinski: Damn, it's all about like producing stuff, right? I mean, that is such a key. Key Point. It's like, once you once you realize that your limits are like sort of boundless in what you can create with these technologies. If you're that, like the right type of person, you just sort of move into that holy cow, I can build anything. And then that that is like so so I don't know, it's so superpower superpower, right? Exactly, - -21 -00:11:33,510 --> 00:11:47,279 -Jerome Hardaway: is freeing and crushing at the same time to do everything, but there's not enough time to do everything. Right, you know, time becomes the enemy to creativity. Hmm. Yeah, - -22 -00:11:47,310 --> 00:11:58,799 -Scott Tolinski: yeah, that's a perfect way to describe it. Because I know I have so many side projects that are just said on worked on, because I have too much other stuff to work on too many other cool things to build that I'll - -23 -00:11:58,799 --> 00:12:32,520 -Jerome Hardaway: tell people. No, I just should just start random Twitter where I just throw out like the first idea that came to me in that morning, and I just have some less than one habit. I can't even actually, ironically, I kind of did that I started a thing down here. And I just let other people take it over because I just didn't have the bandwidth, like between betson code and helping the veterans and teaching and writing. Okay, you guys can have this. And they've been running with it. And I'm very proud of them. Yeah. Cool. That's awesome. So - -24 -00:12:32,970 --> 00:13:05,279 -Scott Tolinski: and that's hard to do to give give your projects over to someone else. You know, I like think about, you know, Paul Henschel, he created react spring for animations. And then it's just like, oh, he started working on other things, but instead of just, you know, not releasing updates or whatever, he just gave it away to somebody else and let them work on it. And he'll still be there and maintain code or add code or whatever. But it's like, Alright, well, I made this thing. But it I can't imagine giving away that kind of project that you you've put so much time and energy into it at all. Like that's got to be a weird feeling, right? - -25 -00:13:05,309 --> 00:14:35,640 -Jerome Hardaway: No, not at all. Like, that's what I think that's part of being successful. Right? If, like, one of the things that I tell my veterans is a part of it, who codes job is to be is to signal books. Every accomplishment I make, you have to make it in half the time like this. I tell them why if I'm my first big company Corporation job took me four years and guess what you have to do it into? And like, I'm here to tell them that like, and they're like, holy crap, I have a few veterans that they've done that before. Or be the one Andrew who's it. Verizon, I have Jeff, who's at Microsoft, and Schuster, who's Amazon, and they, you know, they fly Holy crap, he's, like, really scared the crap out me. But that's how, you know, I, you know, when we hit when we come up with NIF different channels in different projects, I'll start the project, but then I'll quickly give it to someone else. Because my I feel like my part of my mission is to use the work in the foundation that I've done to, you know, make other stars, right. Mohammed Ali said it best, you know, charities like the rent, we paid for Vienna art. So that's my thing. Like, alright, I have to I've done this. It's time for me to make sure that other people can use what I've done and use my skill sets or use the thing of whatever I've done to make it easier for them. Because if I make it to the top, it's cool, but I like that I get a bigger Hi, I'm making light helping other people. So that's a military thing for me like - -26 -00:14:36,960 --> 00:15:00,990 -Wes Bos: you're that guy. I have another name for you that I've been watching the the Michael Jordan documentary and they were saying that the reason why Scottie Pippen I think it was Scottie Pippen was so good, was because he didn't have to have the ball like and he would just give it to the he would just like set it up and give it to somebody to score like he didn't have to be the star of the show. But he saw it as his like place to sort of set other people up. I think that's really cool that it You're doing that as well. I - -27 -00:15:00,990 --> 00:15:03,149 -Jerome Hardaway: don't know anything about basketball. I - -28 -00:15:05,220 --> 00:15:08,279 -Wes Bos: mean, either, except that I watched the documentary like last night. - -29 -00:15:08,279 --> 00:15:24,510 -Scott Tolinski: Yes, we watched it too. And I am I'm so hopeless at basketball, especially like, I actually like I can't enjoy watching basketball because of how terrible I am at it. I just know that it's like, this is just a reminder, not not good for me, - -30 -00:15:24,659 --> 00:15:30,270 -Jerome Hardaway: literally a famous basketball player and know nothing about it. Like I'm related to me. - -31 -00:15:31,380 --> 00:16:04,950 -Wes Bos: That's awesome. If basketball was my, my sport growing up only because I was tall, and then at certain point, everybody else caught up to me. And I was no longer good at it head to head didn't have that, that advantage. So you tie yourself to code database. And then you got started getting into teaching yourself JavaScript and things like that, like At what point like, how many years in? Did you start that to code and start to like, then teach other people? Because like, honestly, I don't know if you think that's but I think teaching other people is a great way to improve your own skill set. - -32 -00:16:05,220 --> 00:19:21,750 -Jerome Hardaway: You're absolutely right. So this is how it worked out. 2014 It's the summer 2014 was a really big year with the Department of Veteran Affairs and people in general, working on veterans in general, sorry. So I'm working that nonprofit where they have me as the digital marketing admin, but really, I'm the programmer, my first day at work, they were like, hey, you're young. Can you fix our site, and it was the most awful thing I've ever seen in my life. took me three months learning LAMP stack, which made me hate LAMP stack afterwards. But now I'm learning to love LAMP stack again. Now to do this, and during that summer, we had an army veteran in my hometown, in a losing his life, getting shot by wrongful bola Department of Veteran Affairs. And because of who was involved, the government was involved. They were like, it's not really our fault. And the most we can do is give you like a couple hundred dollars to pay for the hit style. And like, you know, yeah, so this family was just, you know, he had a daughter and everything. And I was like, That's not right. That's horrible. But none of the nonprofit's are going to stand up to the VA because VA is big brother. And most of them get their money through grants from the VA. So they were gonna do that. So I'm at home chillin, and I get a phone call from a person and another nonprofits like, yo, you have to help these people. And like if the VA said, No, no nonprofits gonna help me, right? I'm not asking for profit, I'm asking you, because I know you're the only person pull off. It's like, don't get me in trouble. And of course, I did get in trouble for this. But I use my digital skills. I build a website, use the things I learned while about digital marketing. And I was able to get a generate enough buzz during this whole crazy thing of past summer was and raise $10,000 in 27 hours. And why able to, like give money to the family were able to put money aside for the little girl, everything. And that's when I was like, okay, you know, I've done my good deed forever. I'm never going to hell, I want to see you guys later peace out. And then people were like, No, you can't do that. Like, what else are you gonna do? Like you've done something you have that capacity? Let's do something. I'm like, Okay, well, what helped me do this is learn how to code. And because I'm in Memphis, and all the people who are at VSOs are Oh, people. They're like, Say what? Now? What is this? Do you think people last year was asked at one point in time? Do you think that Mr. Troops note can learn how to code and here I am being an unlisted troop? Who are another code. And I was like that is while well afterwards, like General Assembly, they see things I've done and they hit me up and they're like, Hey, would you like to come up here? In order to like, level up your skills and stuff? We'll give you a scholarship, yada, yada, yada. Like, yeah, sure. Let's see what happens. I go up there six weeks into their course I end up getting my first job offer back home. So I just posted the rest of the course because I think the only thing I really learned was like command y. So - -33 -00:19:23,970 --> 00:19:27,540 -Wes Bos: at General Assembly is at boot camp in New York. Is that right? Yeah, - -34 -00:19:27,540 --> 00:22:12,480 -Jerome Hardaway: I was like but like it was it was weird. Yeah, it was a whole weird experience. So I get back home and the whole time I'm teaching veterans remotely and things like that, like this is before especially the like the nonprofit game was like, very antiquated. We were the first remote nonprofit like we were the first people there were like, you know, you don't need big buildings. Like you know, they're all for me. I when I was looking like I got this idea from being a general assembly and working in nonprofits and a lot of stuff is like bloat. make people feel good. But it's not really as effective and you can do more with less money. And that's the thing that I like really kind of focused on was like, How can I be efficient and you know, actually accomplish the mission like I want I remember being in Iraq remember, like how you know we were and how well we got the job done. And I was like, that's what you want. That's what you need when you're training you know, laser focus or minimal distractions, not making you feel like you're a developer, but focusing on becoming the thing that you want to be right and basic, john, yeah, yeah. And basic training, everything like I understand my people don't like, that's why the whole boot camp co boot camp thing is weird. It's like it's not like a boot camp like they treat you nice a feature all the time. It's all happy, smells good. There's no one yelling that you know, what made you get up at four o'clock in the morning. Summer Camp, that's what it really is like, it's not boot camp. Like if you actually went through a boot camp for coding by you, this would not be these are not be sustainable businesses. Because people be like, I'm not doing that is real, like somebody made you the new data structure and array data structures and algorithms the way like you would go into like a military boot camp, people would quit, like in New York minute. So yeah, I was teaching the whole time and it helped level up my skills or move up my skills fast. And to this day, like I try to teach all like at least one section of our cohort. And it's just like, even from when I look at how bad I was, then how good I am now. And probably in five years, I'm looking at this like, yo, you idiot, back then. Now, just everything has changed. Like we were the first nonprofit, we were the first organization completely JavaScript, we just nuked our Ruby back end, and we were like, we're gonna go, we're gonna focus on JavaScript, then we went straight, we were forced to go serverless. And we were like, we're just gonna focus on jamstack serverless. Focus, and like, is heavy on the language as possible, like, I'm a firm believer in making it hurt. And that's why I chose JavaScript, because JavaScript does not care about your feelings. - -35 -00:22:13,080 --> 00:22:13,770 -Wes Bos: No. - -36 -00:22:14,820 --> 00:22:32,160 -Jerome Hardaway: So I was true words. Yeah. So I was like, Okay, so we're going to focus on pushing JavaScript to its limits for our veterans, so that we didn't get jobs and it's been working. And I am very happy for that. Because like, is the light joy in my lifetime helping people and helping fellow veterans? - -37 -00:22:32,670 --> 00:22:41,160 -Wes Bos: That's unreal. I love hearing that. That's, that's so cool that you did that. I want to know about the tack. You'd you said gem stack and whatnot. But like, like, where before? We - -38 -00:22:41,160 --> 00:22:44,490 -Scott Tolinski: want to know about the tech, maybe we should know about the dot tech domains? - -39 -00:22:44,550 --> 00:24:09,540 -Wes Bos: Oh, god, it's got your thoughts. Yes, let's talk about the dot tech domains. So if you want to know about tech, and you're building a website, you're building a project, you've got a side project you've working on or, or you've you've got a business, you'd like to start up and you need a new domain, you want to check out dot tech domains. They are the there's used by all kinds of people, I even use them myself, go to users dot tech, I use that domain to create a Gatsby website, totally open source, you can check it out. And it lists all of the people who have a Ford slash Users page that details things like their text editor, their monitor their mouse, that kind of toilet paper, they like to use all the stuff about the people that are on there. So if you sort of want to align yourself with the tech industry, and you need a new domain name, check out dot tech, you need to go to go dot tech, forward slash syntax 2020 and use the coupon code syntax 2020. And you're gonna get get ready 90% off one, five and 10 year domain names. Just go ahead, buy the 10 year domain name at 90% off and then set yourself a calendar reminder in 10 years to renew that thing. Thanks so much to tech for sponsoring, tweet us your tech domain names at syntax FM, we'd love to see what you're building. Thanks so much not tech for sponsoring. - -40 -00:24:09,900 --> 00:24:12,810 -Scott Tolinski: Cool. So let's get into the tech now. - -41 -00:24:12,810 --> 00:26:00,000 -Jerome Hardaway: The Jam stack take for ritsuko. Like because that's my favorite stack right now. Because I'm just very happy how it all turned out. Right now the stack is jam stack is serverless gets me on the front end we're using bootstrap is the CSS framework, while also still using like flex and grid of course, because we have to make sure the troops know flex and grid and Amazon Web Services as part of the for some our database of some our API and the way Netlify and contentful. Those are that's everything they were using for the website. And the code stack like the code is just we we redid all the code to make sure that It was as friendly as possible for beginners, like it was like that was the most important part, we were like, it has to be beginner friendly, it can like this whole site has to operate in a manner where people will have lesson were anywhere from three to six months of experience can come in and find something to do and not be intimidated. And I that's like my favorite like, you know, it's a simple stack. But that's what makes it so beautiful like it, you know, we use simplicity and ease and try to, like, make people feel good versus, you know, coding with our egos and things. And that's like, one thing that I'm a very big fan of is egoless coding. I have a saying that I tell my veterans, I was like, No, we, we build products for the user. But we write code for each other. So you have to think about the person live, right? Have you in person come behind you when you write code? And so when we're looking at when we're doing our code reviews and things of that nature, that's always since vs. piping, why did you write this code for you? Or did you write this code for someone else? - -42 -00:26:00,360 --> 00:26:44,910 -Scott Tolinski: Yeah, sometimes people they do they don't they, they let their cleverness get in the way of writing code that generally makes sense to most people, rather than making sense to one person or the person who wrote it. I think that's like, I don't know, I love to hear you talk about that. And the joys of picking a stack that just like works for you. Because I get those like, same feelings with a lot of stacks myself when I'm coding. And I think about like, there is such a importance to really enjoying working in the codebase and making it a joy to work in rather than just making it impressive to work in or something like that, you know? So I really, I really think that's a nice message for people is that like, code for the person that's behind you? I know, that is a really cool way to say that. - -43 -00:26:45,210 --> 00:27:57,030 -Jerome Hardaway: Yeah, well, we also tell them clever code kills projects, right? Like when you're because you know, you, you might look smart, but the person is coming after you. It's going to struggle with this. And so you know, everything will be easier. People just thought about the most vulnerable people, their population versus themselves making themselves look good. So I guess what I think about why when I write something like lit a person, I always use that three month or the six month rule, I would a person with three to six months of experience, understand this will be able to explain this to them. They did a little bit of research and a little bit of elbow grease. Why would they you know, they get this so they would go on StackOverflow and or the MDN. You know, I never want someone looking at something I wrote and just freaking out over it. Because they can't figure it out. And I've had programmers I've worked with that are complete opposite me. They you know, they want to make their stuff as complex as possible. Because, you know, that's where they get their ego. But I'm like, Yeah, I kind of like a scary I'm for an am nine to work every day. So I'm kind of cool in the ego stuff. Like, I don't get my I get my rocks off from like coding alley I help people with go. So - -44 -00:27:57,030 --> 00:28:27,000 -Scott Tolinski: I think that's important too, in like even in API design, we talk a lot about like smart defaults and those aspects of your application that should just work, right, they should just work without having to need 1000 different configuration elements in there. It's such a huge thing that I think many of us because we really live in complexity all the time that you it's hard, you have a hard time of like thinking and simplicity. And that's such a key thing when you're creating things that other people are both going to code in and as well as consume. And that's like - -45 -00:28:27,000 --> 00:29:02,310 -Jerome Hardaway: the beauty of like thinking like a junior developer, even at a senior level, because you have this high level thinking. But if you always go back to the fundamentals, like you're able to see that hey, oh, there's a new way to do this and new thought processes of doing this in simple ways. I never forget have one of my troops, Carla, when we taught her like the Audi's Fitch and she used it in a coach challenged at her job that she is currently working to show header when they're like getting data from API. Oh, we've never seen a number of a used fetch, like Yo, this is brand new. So she was teaching them as it is. This is how it should be, like done. - -46 -00:29:02,310 --> 00:29:46,320 -Scott Tolinski: So that that's like such a good thing. I got a job once. Maybe not specifically because but like, in my interview, I they were asking about what kind of grid do we want to use for a project like this? What kind of grid would you choose to use? And I was like, Well, I would use Susy, which is a SAS library and they're like, wait, why would you what is Suzy? Why would you use that we're using this I was like, Okay, let me let me let me sketch out why I would use it and you hear why here's why it's better and simpler than what you're using. And I think they were just like, Ah, so if you can like teach your your interviewers something that they didn't know that's like a surefire way to as long as you can do it in a way that's tactful. That's a surefire way to look really good. And in a job interview. Oh, - -47 -00:29:46,320 --> 00:29:53,790 -Jerome Hardaway: yeah, you can teach a interview the interviewer something you're probably like, 80% later getting that job. Why? Yeah. - -48 -00:29:55,200 --> 00:29:56,460 -Scott Tolinski: Yeah, that's a big help - -49 -00:29:56,670 --> 00:30:02,610 -Wes Bos: you help your vets get jobs as well. Do you do any interview prep? For them If so, like, like, what do you even do to prep? Some? Oh, yes. - -50 -00:30:02,610 --> 00:32:26,430 -Jerome Hardaway: Well, here's my, here's my secret to interview prepping. Firstly, the interview prep begins well before the interview, right? Well, boy interview prep stars, the first line of code like we call it, I learned from Scott hanselman. We call it front loading, right? Where the goal is to answer as many questions with your projects as possible, prior to getting like the code challenge, right? So you're like, for instance, if you're a front end engineer, right, the things people want to know is do you write semantic HTML? How do you write clean CSS? Do you understand design systems? Like, are you working with like a friendly architecture like style, like BIM or smacks? Or you have strong CSS? You understand how to use API's? And do you have experienced the front end framework? Right? So I am like thinking in that aspect of building a project, making sure that this portfolio has grid and flex components, understanding the module like you know, you have scalable modular components that you can use flex with, but then when the main layout you're using grid, then, like the first landing page, make sure it's just HTML and CSS, JavaScript, right? All that just pure HTML, CSS, JavaScript, then I have a secondary project like Marvel API, since I'm a comic book fan, right? So I'm having Marvel API I'm use for yet to make a search database page where you can search and find everything that you know, is whatever Marvel superhero that you type in. So that way, it'll lay out everything that you need, then like, and make sure that's mobile first, as well. So that's the first thing I want to make sure I answer, like, when like, make sure it's pretty, make sure it's about me, make sure as I catch and try to tell people portfolios, stop using blacking portfolios, portfolios, or your business car portfolios life, if you're going on the first day, you want to dress like a slob on your first day. So don't do your portfolio like this, like his dating life. until he gets my attention like john given make some bad decisions. Let's go. So that's the first thing. I'm making sure you're looking at the UX components of it. Like there's a really good website laws of UX. He actually has a book now, john, you're blocky, I think his last name, but he laws a UX is just is amazing. You're trying to get the basics of UX fast, like do you use that book? Just as - -51 -00:32:26,430 --> 00:32:27,510 -Unknown: cool? Yeah, this - -52 -00:32:27,510 --> 00:32:29,340 -Scott Tolinski: is really cool. I've never seen this before. - -53 -00:32:29,730 --> 00:32:31,260 -Wes Bos: I'll link it in the show notes. - -54 -00:32:31,800 --> 00:33:21,600 -Jerome Hardaway: Yeah, it's amazing. So I have veterans go through that I'm teaching that then. Alright. So now they're there. And we're like, okay, now you've done all this heavy lifting with this portfolio that answers all the questions. Now you can work on smaller components or projects to continue improving or GitHub and pruning your skills or your a code pen. And like improving your skills, you can work on smaller things, more tactful things to ensure up like that, like code challenges, things like that. So we have a code challenge channel where they would assign in every day and they can do code challenges that we pick that like we write literally based upon their skill set and the cohort. So then after that, I'll say we're doing the interview prep. I personally look over every resume, like if you want me to do a resume, I'm there I'm looking at it, I helping you rewrite it and help you retool it, - -55 -00:33:21,690 --> 00:33:24,930 -Wes Bos: what types of things are you looking for there? If you look at someone's resume? - -56 -00:33:25,050 --> 00:36:28,170 -Jerome Hardaway: Alright, so when I'm thinking of being a programmer, or getting a programming job, I'm with the first of the three users right for you, is what I call it. So first user is the robot, right? So like you're on LinkedIn, a lot of people don't know this, but a lot of resumes and stuff gets screened for like by bots, right? So I'm looking for keywords, I'm looking for JavaScript, I'm looking for react, I'm looking for semantic HTML, looking for CSS, I'm looking for you talk about smacks and B, I'm looking for all that stuff that the robot would like, also look for the bot would like pick up. So I'm looking for that for that stuff, implementing that and adding that stuff in there. Then after that, I'm looking for a nice descriptive elevator pitch style overview before people get down on the bottom, then I am pruning all the military jargon out last The first thing and it's so and it's such a hard thing for our veterans, because the things that we do in the military is really, really hard. And you know, really, really cool on a lot of things. Well, they were like, Yo, I understand that. But for a person who is like looking at you for a software position, this isn't going to matter to them because while we're less than 1% under the civilian population, the population United States of America, two, they are on average nine to 11 people removed from any one military and United States. So yeah, no one's gonna understand how you were a part of a process that protected $52 billion worth of assets like an asteroid You know, they have that, first they have a knee jerk the light. But this is a part especially the guys have been in like more than like 10 years, had a knee jerk reaction with this is a part of my life and who I am what yo I understand that however we have to set the world is what it is and not what we want it to be. And we had to focus like we had to play offense and be counter offensive. When I start talking to them in more of a tactical point of view, they start understanding things like and that's a big part of my strength is that I live the life that they live. So I can look at it from a tactical point of view and focus on let's you know, accomplish this mission. Now that we've I've done that I've cleaned up all the military jargon I've made sure they when they're talking about their projects and the things they've done, that they've carved career, what I call the TPC or a total person concept, and showcasing like how much of a self starter they are how much like you know, they are into learning this craft becoming better. And also making sure they're doing volunteer work within the nonprofit that continues to grow their skills. We start doing interview prep and start doing mock interviews. So we've had two veterans who like when he went through a big boy jobs, we did four hour interviews. So these guys because we were like, you know, you have to do this nightmare, like when they get when they get the interview position where all right his position. So we had to prep for this is what we're gonna do. We actually have a fame prep channel for those who end up getting famed interview jobs - -57 -00:36:28,380 --> 00:36:33,710 -Wes Bos: for our audience. That's Facebook, apple, Amazon, Google, Netflix and Google. - -58 -00:36:33,750 --> 00:36:35,340 -Scott Tolinski: Netflix looks at Netflix and Google. Yeah, - -59 -00:36:35,340 --> 00:36:42,920 -Jerome Hardaway: like that's the wireframe. That's the worst travel movie yet why you don't want to be like this thing. interviews are the words interviews, right? - -60 -00:36:42,960 --> 00:36:51,960 -Scott Tolinski: Yeah, Wes and I both interviewed at Google, and we both did not get the job. So we vote at first hand experience to is like, yeah, it's up. - -61 -00:36:52,380 --> 00:36:59,610 -Wes Bos: We should have somebody on who has got a job there and talk about what the interview process is like. Yeah, where we went wrong? - -62 -00:36:59,790 --> 00:37:52,800 -Jerome Hardaway: Yeah. So like, that's the channel that we like, we run you through the gauntlet on that channel. But if it's a normal interview, which is we focus on a phone screen, then we focus on a technical conversation, then a code challenge, because that's usually the typical interview right? Three things on screen to make sure you're not crazy, technical interview to make sure that you actually know how to talk tech to a another technical person, then a coach is to make sure that you actually can write code, right. That's the typical interview, right, three phase process of taking a view. Whereas, you know, Fang interviews, it's like four different interviews. And there's like, one is like four hour long, hour, four hours long, you got to get interviewed by the team. All this stuff, like, average thing, interview last, like that process last like two, three weeks. So like, that's how we do it. Like, if you look at PwC. - -63 -00:37:53,130 --> 00:38:05,730 -Wes Bos: That's super helpful. It's questions we get all the time people ask me how to prep for interviews. And quite honestly, I've never aside from good that one Google interview I talk about all the time, I've never really had a job or gone through an interview either. So - -64 -00:38:06,440 --> 00:38:28,020 -Jerome Hardaway: I've been on both sides. Yeah, both sides of the table there. But see you front load a while you build so much. And you do so many things like people already know your skills, like one of your first project one, the first time I heard a list, I was there was a project with like keyboards, where you just press a button and it was showing you the yakko dot - -65 -00:38:28,020 --> 00:38:28,770 -Wes Bos: info. - -66 -00:38:28,800 --> 00:38:56,820 -Jerome Hardaway: Yeah. So like I was looking at, I was doing work with accessibility on comic books, and I was looking at key codes. I can look it up, because I just saw that. So I can easily keto by for users that have less mobility in their hands. So that's what you're you do you consistently and continuously build projects that add value and the more projects you'd be able to add value, more things you build add value, the less questions people have. - -67 -00:38:57,030 --> 00:39:52,710 -Scott Tolinski: proof is in the pudding. Speaking of proving in the pudding, this is actually real. Yeah, I know, this is a rough transition. But this is a real tale from distress land, where you push a repo live and Sentry saves your butt. So the sponsor that I'm gonna be talking about right now is sentry@sentry.io. Now, I just pushed out a tremendous update to level up tutorials.com yesterday at the time of recording, this will be months old, but it's using a new video player and all this sort of stuff, right? So this is this is a personal experience I had yesterday, I pushed this thing live. And then maybe about a fraction of a second after pushing this live, I got my first little Sentry email came in saying, hey, there's a string of DD is not defined or whatever, blah, blah, blah. But the end that the end result was is that date FNS had changed part of their format API and you had to use little DS instead of large ones. - -68 -00:39:52,920 --> 00:39:54,810 -Wes Bos: So I got bit by that too. You got - -69 -00:39:54,810 --> 00:41:31,500 -Scott Tolinski: bit by that too. And I I thought I had gotten them all and it turns out I missed one but Guess who did not miss one it was Sentry. And that made it so that I was able to push out a fix for that, within seconds of pushing out the live application. I mean, my desk did not find it, nothing found it, but Sentry found it and let me know. And I was able to solve that bug within seconds, really reducing the time of any sort of user inconvenience. So firsthand account of Sentry being amazing no Sentry it had sentry.io is the error and Exception Handling tool that is just really fantastic. They're going to be adding performance testing. I don't know if you've seen me this performance testing tools West, but I opted in for the beta recently. And it basically is giving you the performance stats of all of the URLs basically on your site, you could think of it almost as like Google Analytics for performance. And I'm getting some really seriously good data here. Right now I'm seeing that page that I had typically, which is forward slash tutorials was pretty slow. Well, the past 94 users on that page have had an average load time of 500 milliseconds, which for me, pretty good. I like that, I like that that's in the milliseconds, we didn't hit a second even from a load time. And that was one of the slowest loads on my entire site. So I'm getting a ton of use out of these performance tools already. I've only had them up for 24 hours. Sentry@sentry.io, one of my absolute favorite tools for all those reasons and more, use the coupon code at tasty treat all lowercase all one word, and you're going to get two months for free. So thank you for Sentry for sponsoring. - -70 -00:41:32,400 --> 00:41:58,710 -Wes Bos: There's obviously a lot going on right now in every community and the web development community is sort of responding to police brutality and all the protests and whatnot. And Scott Nye, I hopped on a call Mike Scott, we need to do something. We're all ready to go and then drum hop these like, hey, Wes, like, let me know what you're gonna do. And so we jumped on a call and very, very appreciative for your time and whatnot, - -71 -00:41:58,730 --> 00:44:20,310 -Jerome Hardaway: we had a conversation, your initial things like Alright, let's do one on one time two with a people of color black people and women and see nihilists go through their things to go through mentorship, and it's like, that's okay. But when you really are missing the mark on say, you guys have a voice that you can both provide ally ship amplification to people who already have the talent, what we've already learned is that there's no such thing as a lack of black talent, what there is, is a lack of employers willing to drop their pattern matching practices and you know, invest and take chances on minorities on people are color on Latinx on trans people like these, that is the problem that we're having in the tech community. It's not the others No, no black people, I there's a whole website called the Black talent, tech talent pipeline, that they're talking about it. And so the black COEs, their user group in Nashville when they're building that talent up as well. So these things, they're they're there they exist for what needs to happen is that people like you guys who have that forum, this platform. Oh, yeah, it goes off to these five things. You I find people that you even are amazing. If you have any tips for them, make those tips have introductions, Manos productions, let people know these people exist. Because and amplify the idea of you know, make a make the hire make the wire, right? Do the wire right like because that's the issue that we have. It's not that people, these latest talent doesn't exist, it's that people are not willing to take a chance. And if you guys aren't taking that chance of being more open to taking that chance, because that's just how the world works. So is you know, that's how that Sukkot started. That's how the whole learn how to code as a veteran kind of started while I was telling people you should learn how to code people like cool, but when I wasn't the person who paid the code, no one was listening. Then when I was making the money, I were coding I wasn't having a fun lifestyle. You were like, yo, how do I learn how to do that? So somebody has to make the first move and amplify and be like a real like legit ally. But guess like I said, I'm I'm doing positive things on Twitter. I'm trying to just mitigate people's emotions because I yes, - -72 -00:44:20,400 --> 00:44:21,930 -Wes Bos: do an excellent job at it. - -73 -00:44:23,040 --> 00:45:40,440 -Jerome Hardaway: I I've been in firefights I've been in mortars I know how hard like in how emotional things can be in good I know that, you know, this is a marathon not a sprint. So and stress is like the number one killer of things like when we're dealing with things like this. So you have to be able to think in a manner to where you're solely focused on solving the problem. But you're not letting the you know naturally human things like affect your like process of start of solving it because like, you are completely just fighting your anger. You are completely justifying your stress and you're worrying things like that, like, you know, but boys and I am like terrified, like the idea of driving my wife's car like she has, like, I have a little light Honda Sonata because I, why I picked that car just because like no one really that's suspicious. I mean, my wife has a Mercedes and I can have my 17 year old, like, drive that thing like casa, pull them over. I am terrified of what might happen. Like I you know, I had to explain that to a friend who, you know, it's cool that you see all the things that I've gotten, but at the same time, you know, cops don't ask me for my dd 214 cops, I'm still five times four, one. What's - -74 -00:45:40,440 --> 00:45:45,180 -Wes Bos: that? Sorry? What's that? dd 214 the Canadian? Oh, sorry. - -75 -00:45:46,650 --> 00:49:49,350 -Jerome Hardaway: They're like, there is the form that the military gives you. Once you're once you get out. Like, you know, even as the executive director of Mexico, I have to constantly remind people that yes, I am a veteran. And then they think the Whoa, you bleed green. So, you know, colors matter. Like no pause, I'm black, too. I was like, I, I was born black, I earned the right to be called a veteran like that. They're not, they don't like they're not separate, they're the same thing. I'm a black veteran, like, that's how I'm described. So that whole, like, I'm trying to help people stay home because I'm like, you know, this stuff is hard. It's not gonna be over anytime soon. So to do this work, you got to take care of yourself, like, you know, piano play, you know, drinking water eating, right? You're learning how to deal with your stress like that, you know, take care of your mental health, all this stuff to get this mission done. You know, you're gonna have to a lot of self care and a lot of prep and a lot of planning a lot of strategic thinking, because now one mistake, people are gonna try to exploit it or, you know, make up money. You know, we're in this new weird thing where the, you know, anti fog bleakie man is what caused everything. And I'm like, like, and it's just, it's a weird thing. And particularly because I, I'm a veteran, so people assume that I have a heavy conservative leaning. And I'm like, no further supplementary veterans. And just like most people are just like, everything else, is just the most vocal people tend to usually be on the extreme side of one side or the other. But we're, you know, a healthy mix of everything else. And I've been reading reports and articles all week of like, people who have felt who are upset and mad and like General, from generals, to National Guard, they were in DC, and they were like, We should have been there. That was wrong thing. And that's kind of what made me like, say something I was looking around. I was around my constituents who are executive directors, like, they weren't saying anything. Why are these 50 year old dudes like not saying a damn thing? And I'm like, okay, so you're like, Okay, I guess I'll be the first person to say something. And I was like, I and I was like, No, I want for a limp every day for because for boop for putting boot das on my country, and I'll be damned. If I'm watching. You're like, Dude, this type of like, this is insane. And I'm sorry for swearing like, but that's where I got like the most this, like, it made me visibly angry. And I had to say something. But then I also knew that Yo, while you're angry, you have to mitigate that and control it actually think strategically. So I'm like, yo, do the work. No, allies, like people are like, Oh, you know, some people, they're getting tired of talking to people about LS Show. I'm like, Yes, it's hard. But you still have to do it. Because, you know, being an ally is hard. Why? We're asking I tell people all the time, why you're asking somebody to give up something that in the animal kingdom, like no one asked that Tiger to get to the level of the deer, right? Like it's while I say, oh, let's get rid of the things that are the systems that are in place to make us more equal. So that way to make us equal. So you don't have these predisposed advantages on me in our society. That is hard for someone to come up and say like, Yes, I am aware that there is a systemic racist system in place that keeps me from getting ahead of you that keeps you from getting hit in the same manner. I do. I understand that because the system you have to work twice as hard for the same thing. I understand that even though we might have accomplishments, there are things that are in the way that are in it for it for you that are in the way for me. I understand that. How do I help be a part of the solution, and not the problem? That's freaking hard. Right? So I'm like, no, it's difficult as it is, like playing a book. I am still honored when people ask me because I'm like, yo, well, yeah, let's have this conversation because a lot Yeah, I know. That's difficult. Like Yes, especially like you like people are asking me during that timeframe. like everybody's emotions are kind of shot. So you know, come up to a black person asked him why how did you help make you you know, a better person and you're like little nervous. The last - -76 -00:49:49,350 --> 00:49:50,610 -Wes Bos: thing we want it to do. - -77 -00:49:53,430 --> 00:52:53,580 -Jerome Hardaway: I get it like okay, yeah, thanks a while while you're you know, Cuz, like, well, like, it's like, everybody has to control themselves on that, because like, the only way we win is as a unit, right? We can't, can't be singular for emotion has to be a unified set. Like, you know, this is how you solve it. And it's not about getting political about, you know, you know, as everybody against racism, it's not, you know, just democrats or conservatives or republicans or libertarians, it's everybody against racism that we like, it's a global issue. If you're if you're in a country where it's like black people, but it is some, it's another culture, we're against that too, right? Is everyone that's like, my message was because to me, it was a horrible thing. But the ingenuity that came from people being common and stuff was just amazing. Like how their Kpop like stands. Like, bizarre Yeah, yeah, it was like, you know, it was like Avengers, endgame. People came out of the woodwork. We had the Amish, we had Kpop we had witches, like, yeah, like, yeah, this is like, this is, this is legit, like Avengers end game, when at the end, I was like, yeah. So I, like this is what it is about everybody working together to in a systemic issue, because we're all getting, you know, you saw the New York Times bestsellers list. Every book was about why, you know, being able to like see the systemic racism in yourself and being able to be a better ally. That is, why these are the steps that people are wanting, like to keep are one and it sounds like they're just like veterans, like if there's a veteran is willing to do the work, I'm gonna be there for them. There's a person allied is willing to do the work, I'm going to be there for that. Why? That's like what we're supposed to be for. We're supposed to help each other. Right? Like, you know, and I know, I tell people all the time, like my wife, she gets on my nerves about it. Because like, She's like, you're super selfless and you don't take you don't take any time for yourself. And like, that's a point like military taught me, you know, service for self service, excellence and pride my service was so basically what we do, that's what we're supposed to be doing. So that is like an integrity first. So being honest, doing the right thing, no one's looking and taking care of people by putting yourself like, you know, to be selfless, like that is a act of leadership. servant leadership is where is that? So that's where I'm like, I have to help people. I can't just sit that way. I can. Yeah, like, especially like, you know, I'm one of the hot more more visible veteran leadership, and I'm the only black one under like, 40 and I'm like, I don't say anything. Then who the hell will so why? What am I supposed to do and then you get the big six just chillin. So I was like, Okay, I gotta do something. Totally. - -78 -00:52:53,609 --> 00:53:15,750 -Wes Bos: I that's a blog post I think I want to see you write is I've had a few notes here throughout the entire podcast. It's just like skills the military has taught you to critical thinking levelheadedness stressful situations, helping others. Like I would love to just see like, it's super hot right now. I don't know. But it's that it's not allowed. I know all the navy seals are writing books right now. Right? - -79 -00:53:15,780 --> 00:55:17,340 -Jerome Hardaway: Oh, yeah. I guess uh, wow. Like they're not supposed to whether they, you know, the government will like charge them like a million dollars and like, they make like 10 so it's okay. But yeah, you can tell we talk about that stuff all the time. That's one of the things I always tell people I think people especially enlisted troops folks think the year out they're just following orders. It's like no like we're the ones where and I constant feedback loop like combine is used out in the field. Why you know, doing small tasks Yeah, why do a small test things like that? Like stand ups we like it's not just like all stand up like we don't call it stand up but like we literally have like protocols random we're doing we're off patrol. We circle up life was more than a minute we're on a knee is one of the five minutes to go prone we have checking who's read. If you're if you're read for ammo, or green fam, have you read for water green for water? If you read for food, memories, all that stuff, like how was your battery life so that we do these systemic checks all the time. Like, it's just a knowledge transfer of how to operate with that, like, That's all it is. And we teach my favorite part of it. Sukkot is teaching people combat because you when the when they see how combat is and you put that knowledge transfer how it works then, like rapid deployed forces, and they see that, oh, they're using this so they like alleviates like some of the stress of them because like, you know, I kind of already know how to do this. It's just a different way. And I guess the part of being able that's part of a community and being able to be in like, the community is like, okay, I was a veteran. I know how this lifestyle is. I'm a programmer. I know how this lifestyle is. Now I know where they like or the interest intersection of them like and that's where I try to focus on when I teach my this is, you remember when you did this, this is how it works on this side, right? Same thing like that's what it's about knowledge transfer, helping people pushing forward get the one unified mission across - -80 -00:55:17,370 --> 00:55:25,230 -Wes Bos: beautiful. Is there anything else that like, specifically you wanted to get across to our audience? Or we didn't talk about that you'd like to talk about? Oh, no, - -81 -00:55:25,230 --> 00:55:42,000 -Jerome Hardaway: I mean, this is a blast. I'm and I mean, you know, take care of each other. Support veterans black lives matter why just be the change. He wants to be the superhero that you wish you had when you were a kid. So why that's, that's one rule that I follow. - -82 -00:55:42,630 --> 00:56:59,220 -Wes Bos: Amazing. Amazing. All right, let's, let's get into some sick pics. This is the part of the podcast where we pick things that are sick. I'll start with mine, just because I have it right here. And it's a YouTube channel. So over the last, I don't know, eight, eight or so months, I've been doing a whole bunch of research and trying to learn about I want to convert either an ATV or a go kart to electric. So I'm gonna buy like a gas, one that the engine has exploded and converted over to electric. And I've watched a bunch of stuff on how batteries work. And I feel like I've got it down. I've talked about that in the past. But now I'm trying to understand motors, gearing, torque, how come a horsepower, electric horsepower versus gas horsepower, all that works. And I've just been ingesting for probably the last six months or so all of Jeremy feelings, YouTube videos, and he has got all kinds of videos on different types of motors what motors are good, like if you pull a motor from a treadmill versus a microwave, like what's better, even though they go at the same speed. Actually, I don't think a microwave goes the same speed as a treadmill. But it's just like awesome. He is a self taught engineer. So there's no background in this stuff. Just all self taught. And it just just makes so much sense to me. So check it out. Jeremy fielding on YouTube. Wow, - -83 -00:56:59,220 --> 00:58:46,110 -Scott Tolinski: that was pretty good. I never heard of that. I am going to sick pick a show on Netflix. I feel like Netflix is so persistent around everybody. Right now everybody has Netflix. Right? So hopefully, I'm not leaving too many people out here. But I don't have you ever seen this show explained. I believe it was created by Vox. But it's been around for a couple seasons now. And I got my parents into this because we watched one on tattoos. My my dad got into tattoos. And it was sort of like the history of this but explained it is basically these deep dives into explaining various things right, like, so one of them would be like tattoos and why it was taboo and the history of it. Another one would be like cricket, like I don't know anything about cricket, but explains the whole history of the video game or the video game, the game, the sport, cricket. And there's so many these amazing ones Kpop. One, I didn't really know too much about Kpop. And this gave me the the whole background, there was one really important episode in relation to some of what we talked about here. But there was one called the racial wealth gap explained and it was talking about how loans were issued in specific neighborhoods and directed black families and specific ones and how some of these things that underlying sort of how we got here and how sort of the the quote unquote American dream was not available to everybody. So if you watch this season, really put on the racial wealth gap, it was one of the most important things that I've watched on in this but just about every single one of these is fantastic. There's a couple seasons of it, and corny and I just binge through all of these. They're all pretty quick, like 20 minutes long. And in really, really just well done. Well produced. Oh, there's one encoding. I don't know if I've seen the one encoding. Hey, interesting. - -84 -00:58:46,440 --> 00:58:49,410 -Wes Bos: I'm in drone DMS any sick pic today. - -85 -00:58:49,410 --> 00:58:59,850 -Jerome Hardaway: Oh yeah, I have to do is a show. Where show HBO they have the watchmen. I don't know. He hasn't watched it yet. But he's seen - -86 -00:58:59,850 --> 00:59:00,540 -Scott Tolinski: the show. - -87 -00:59:00,600 --> 00:59:29,670 -Jerome Hardaway: Yeah, the that series is amazing. It's really well written and ironically, or some of the things that people have learned, I think, especially in my circle, because I'm a big comic nerd. People have kind of started like it was the first show that woke them up because it covers black Wall Street and the Tulsa Oklahoma massacre and things of that nature. And I never forget and so I was like why would they make this such a horrible thing up and I was like that's that's real. And she was like what? Like, yeah, let's - -88 -00:59:30,690 --> 00:59:32,820 -Scott Tolinski: just stop there. We're not taught in school. Yes, I - -89 -00:59:32,820 --> 00:59:59,970 -Jerome Hardaway: know. Yeah. town school. I bet she's like I like lived in Oklahoma my whole life. I never thought about this like, yikes. The technical vidrio is like the thing that I am like on fire about right now. It's a holographic. Basically the screen mirrors your video. So you can do tutorials and things of that nature and walk through the tutorials and people can see you in the background versus you like being you know, a little square here. What's it called? - -90 -00:59:59,970 --> 01:00:00,840 -Unknown: Adriel - -91 -01:00:00,840 --> 01:00:13,710 -Jerome Hardaway: vidrio is vi D ri. Oh, absolutely on fire about it. I love it like cuz the idea of like not having to be this little itty bitty square. Oh, it's fun. There's something. - -92 -01:00:14,759 --> 01:00:15,810 -Scott Tolinski: I never heard of this. Yeah, - -93 -01:00:15,869 --> 01:00:19,470 -Jerome Hardaway: I just learned about it like last week and I have been playing with it every day. - -94 -01:00:20,820 --> 01:00:27,750 -Wes Bos: Yeah, you got to see this. To understand what it is cool. I'll put the link in the show notes as well. Sick pick Jerome. - -95 -01:00:32,850 --> 01:00:41,220 -Alright, shameless plugs. I'm gonna shamelessly plug all my courses. Wes bos.com forward slash courses, check it out coupon code syntax for 10 bucks off? - -96 -01:00:42,060 --> 01:00:57,360 -Scott Tolinski: Yep, I'm gonna shamelessly plug my courses as well. The course we're doing for this month because we do a monthly course over our level of tutorials is on design systems with CSS and CSS variables. We're using modern CSS stuff to do creating design systems. - -97 -01:00:57,690 --> 01:02:10,050 -Jerome Hardaway: For me, of course, I'm shamelessly plugging everything PwC we just started some of the veterans to start a podcast where they're interviewing grass and talking about all things take from point of view of like a transition to veterans. So definitely check that out. We just got our GitHub sponsors for our org please like if you want to sponsor our tech, so that way we can continue to like build new things. our end goal is to take that website and have it to the point where we have videos where you can abuse and replicate along with the videos and have it you know, be able to plug in, sign in with your GitHub, your Stack Overflow, like our in game like, which these big shout out to Atlassian and JIRA for hooking us up with all their JIRA products because our endgame for the website, or the next year to two years is insane, like their platform is like it's going to be able to help us ramp up to going from maybe 4050 veterans a year or two hopefully like 500 veterans a year. Wow. Sounds like I'm so excited. Yeah, and just donate donate and listen to our stories follow things that we're doing by our Twitter page of Twitter is at vesco at Jerome Hardaway, I'm always I'm just trying to be positive and help as many people as I can. - -98 -01:02:10,730 --> 01:02:16,350 -Scott Tolinski: We definitely appreciate you. You're doing amazing things and thank you so much for coming on the show. - -99 -01:02:16,500 --> 01:02:19,080 -Jerome Hardaway: Roger, that thing just reminded me. Of course, - -100 -01:02:19,140 --> 01:02:23,070 -Wes Bos: I'll come Alright, talk to you later. Ace, please. - -101 -01:02:25,020 --> 01:02:34,730 -Scott Tolinski: Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax265.srt b/transcripts/Syntax265.srt deleted file mode 100644 index 16b6bbcc1..000000000 --- a/transcripts/Syntax265.srt +++ /dev/null @@ -1,228 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,540 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott El Toro ski. - -2 -00:00:25,890 --> 00:03:42,030 -Scott Tolinski: Who Welcome to syntax. In this Monday hasty trick, we're going to be playing the top level domain game where we It's been a while since we've done this. So if you haven't heard a top level domain game episode, what we do basically is we pick a top level domain from a list and the other person needs to guess it will give you a better rundown on the rules right before we start, but let's get into it. My name is Scott Tolinksi. I'm a developer from Denver, Colorado, and with me, as always, is Wes Bos. Hey, everybody. Hey, Wes. It's been a hectic morning for both of us. So this one is guaranteed to be a mess. And I'm excited about that. But you know, it won't be a mess as your website because you have a one of our sponsors, which is Log Rocket, and Log Rocket is going to be the service that allows you to visually see that mess so you can fix it. Now what is Log Rocket? Well, it is a visual tool that gives you a scrollable timeline of anytime an error, or an exception happened on your website, allowing you to have a pixel perfect replay trying to investigate some of these problems. Sometimes you become an investigator, but you can't see the problem. How do you how do you fix this? Well, this actually allows you to see the problem and see it happening in real time with the network request activity with the console log an error is no more emailing your clients saying, Hey, can you tell me what you did? When you click on this thing and what browser you're using, you'll get all of that with Log Rocket. So I don't over to Log rocket.com forward slash syntax, sign up, and you will get 14 days for free. All right, thank you Log Rocket. Now, if only Log Rocket could have saved me from last time, we played the TLD game, I really got worked. I think I had a bit of a comeback. But I think I ultimately lost out to the West was the the I'm trying to come up with a cool nickname for you. But I guess it just was better domain name master. Yeah, let's talk about how the points are. So we're gonna pick a TLD. A TLD is top level domain that means.com or whatever. And Scott has four, I have four. And the other person has to guess. Is it for a country? Or is it like a business or marketing domain name? So we'll pick one that we did before.af? Is that for a country? Or is that for a business that that can register that? The second one is what type of country business is it for? So you have to guess the country? Or you have to guess what sort of like what it's targeted at. The third thing is how much per year does it cost to register? And you may also say unregistered because there are some domain names out there that have been claimed by companies that cannot be registered by you. Like we just talked about this earlier. There's a dot Home Depot and a.tj Maxx and you can't just go register those those leaders are saved by the companies. And then finally, the last one is is Scott dot whatever and Scott, Aaron West dot whatever available so we're going to give you points for each of those. Whoever wins wins. Cool. So do you want to rock paper scissors for the first one? Whoever wins goes first. - -3 -00:03:42,030 --> 00:03:42,570 -Okay. - -4 -00:03:42,570 --> 00:04:19,860 -Do you do rock paper scissors throw? Rock Paper Scissors shoot although throw is way more Canadian Of course we do a shoot in America here of course. Yeah. Rock Paper Scissors throw. Okay. He I when I go deeper? Yeah. All right, my first domain that you have to guess is dot s d? Is that a country or a business? That SD? It is a country? Correct? What country or business is s? d? - -5 -00:04:21,769 --> 00:04:23,820 -Ah - -6 -00:04:24,950 --> 00:04:58,170 -El Salvador? No, it is Sudan. S. D is for Sudan. And I know, ss is for South Sudan. I just learned I made zero points. Now. Next one. How much does it cost to register a domain name? So I just typed in Scott, s d. So you have to tell me how much does it cost per year? Do we have to hand first got that SD to determine that or? Yeah, that's what I'm basing it off. Okay. Do we just always use Scott? Yeah, Keystone here. I'm gonna say it's 49 - -7 -00:04:58,260 --> 00:05:09,690 -Wes Bos: incorrect is 100 Didn't $75 So come on. So you are this 175 minus 49. You are negative 126 points, man this point - -8 -00:05:09,690 --> 00:05:53,340 -Scott Tolinski: thing really gets me. All right is got DOD SD available? I'm gonna say, no, it is available, but all right, man. Yeah, man, I'm getting worked already. All right. I will say Wes that SD is also available. Oh good. It is available. Yay I finally did not lose points. So I I come out at the end of that round. Fantastic round for me I come out at negative 126. So that's great. Love it. All right, hit me with what you got. Okay. So my first one for you. This one's good. dot o n g - -9 -00:05:54,600 --> 00:05:57,270 -Wes Bos: o n g. - -10 -00:05:57,810 --> 00:06:40,050 -Scott Tolinski: Yeah. I must say Business is business plus five. So what type of business is it for? I am going to say it is a unregistered bubble. Um, so I'm going to head here but I'm gonna say the type of business is some some sort of like something something group. And this is going to be some sort of business that is unregistered. So I'm gonna say what type is business before? It's for a large corporation? It's for a large corporation. No, you're wrong. If it says private registration, does that mean it's unregistered trouble? I think so. Yes. Hmm. Because it doesn't have a price. I shouldn't have said this before. Oh, - -11 -00:06:40,050 --> 00:06:46,860 -Unknown: it does have a price. Okay, hold on. Yeah, maybe not. Well, like to try to go ahead and get it. So hold on. Let's let's go back to okay. - -12 -00:06:47,729 --> 00:06:57,120 -Scott Tolinski: It's available. Yes. Okay. Okay. What type of corporation is a for it is for a non government organization? Whoa, - -13 -00:06:57,150 --> 00:07:04,890 -Unknown: really? o n g? What does that mean? operation non government? organization? Non government? Maybe? - -14 -00:07:04,890 --> 00:07:05,430 -Scott Tolinski: Yeah, - -15 -00:07:05,430 --> 00:07:51,330 -that seems like oh, RG but yeah, interesting. Never heard of that one. How much does it cost to register for a year? I'm gonna say $19 $19. Rooney's? It is $49. Oh, no, that don't don't don't act like that's a big hit. That's not the last 30 points. So you're at negative 30 points here. And is Scott and Wes available? I'm gonna go ahead and say yes to both. And both are available. So you get 20 points, which means you come out negative 10. So the total at the end of round one is looking very similar to last time. I didn't watch 26 to negative 10. I'm really bad at these prices. That's definitely going to be my Achilles heel here. - -16 -00:07:51,690 --> 00:07:58,650 -Unknown: I've got an excellent for you. It is dot k OEL n. And - -17 -00:07:59,100 --> 00:09:59,970 -Scott Tolinski: that is going to be from a business. Yes. Oh, Cray. So what type of business is Colin? I saw this one. And I was like, What could that possibly be? It's actually not pronounce colon. It's going to be for coconut trees. Close, but not at all cologne. So it is a TLP friends made for businesses of the Cologne community as well as residents of the city itself. So cologne is a city in Germany. And I guess that's how they spell it in German. That was a good one. It was rough. That was a Hi, are you FF I got even rougher one coming. No. Okay, so pricing here pricing on this one. Um, I'm gonna go with $49. Again. That was pretty close. 29 Okay, okay. Okay, so I can do some math here. 4929, obviously, minus 20 points. So I'm at currently at negative 46 points. Well, I'm gonna say Western Scott are available. Both of them. They are deeming. I have survived this round, with no change in points. So I'm still at negative 126. That's fantastic. I'm very happy about that. Okay, well, I have a fun one for you. How about this one? Good. luck.co.ke Koch. Okay. I'm going to say this is a country. This is a country. You're trying to throw me that it's coke. It's not. It's I'm gonna say it's Kenya. Whoo. Whoo. Whoo. Yes, it's Kenya. Yes. Ah, dang, gotcha. How do you know this was Kenya. Because Kenya is like one of the only countries that starts with ke and I know there's a lot of countries that don't have a dot whatever. They have a.co dot there. The name like tokota jP. - -18 -00:09:59,970 --> 00:10:09,120 -Unknown: He's Japan. Hmm. Oh, he is salty folks. salty. How much is a cost to register a CEO? I'm gonna go with - -19 -00:10:10,590 --> 00:11:24,570 -Scott Tolinski: 39 bucks. 54 Oh, that's pretty close. That's not bad. Yeah, that's a win in my books. That's the closest we've been that's that's only negative 15 points for you. Is Scott in West available? I'm gonna say Scott is not and Wes is a you're gonna even out there big old whopping zero on those because oh, they're both available. So I'll have lost five points this round, which means not a lot of Kenyans name sky. Yes, apparently. Yeah. So the current point total is negative 126 to negative 15. West, you're basically hanging tight treading water. And I am plundering here although last round was was decently okay for me. Okay, so let's get into the next one. All right. What do you got for me.tr? Tr is going to be a country. Yep. So that's five five points from me. Now I got to keep these five points. That's tr. Man. My memory this morning is just not going really great. I'm scanning the globe in my brain and my visual brain space. I'm seeing the countries and projecting the map and onto a sphere instead of onto a plane. Is it for Trinidad? No. Turkey. - -20 -00:11:24,570 --> 00:11:25,590 -Wow. - -21 -00:11:26,110 --> 00:11:27,820 -That Trinidad was an okay guess. - -22 -00:11:28,000 --> 00:11:32,740 -Wes Bos: What is their TLD? TT I think Trinidad and Tobago? Yeah, it's not TT - -23 -00:11:32,740 --> 00:11:35,590 -Scott Tolinski: I had I had a concern that Tobago part of this. - -24 -00:11:35,650 --> 00:11:40,240 -Wes Bos: uh how much does it cost to read? Sure. - -25 -00:11:40,480 --> 00:11:43,780 -Scott Tolinski: They go with my, my Good old friend $49. - -26 -00:11:44,260 --> 00:11:45,700 -Wes Bos: Now that is it. - -27 -00:11:45,700 --> 00:11:47,350 -Scott Tolinski: Really? Yeah. - -28 -00:11:47,500 --> 00:11:48,130 -Cool. - -29 -00:11:48,250 --> 00:11:50,230 -Hey, zero album. That's the first one. - -30 -00:11:50,920 --> 00:11:56,440 -Unknown: Yeah, yeah. Now they should be bonus points. If you get it like exactly Next time, we'll do that. - -31 -00:11:56,470 --> 00:12:40,420 -Scott Tolinski: We should just wipe out my negative 126. That's what we got that tr available. Scott, that and when? I would say Scott is not available. Wes is available. Even though they're both not available? Both not available? Michael? Yeah. Okay, so I have ended this round with a big old zeros on the board. Negative six. That was a good round for me to not lose any more points. Okay. Wes. I have for you.is TIST eu. International Space travel. Maybe? I'm gonna say it's a business. Not a country. - -32 -00:12:41,470 --> 00:12:41,680 -Wes Bos: Woah! - -33 -00:12:42,280 --> 00:12:46,690 -Scott Tolinski: it's a country. Assemble. It is this damn bowl? - -34 -00:12:46,750 --> 00:12:46,930 -Wes Bos: Woah! - -35 -00:12:48,820 --> 00:13:06,430 -Scott Tolinski: actually city. Right? Yes, Kimball? Yeah. So that was interesting, because that's a new one. Like, that's not been around for a while, but it is a geographical one. That cologne could be either there because it was made for business purposes, but it also is geographical. Oh, - -36 -00:13:06,940 --> 00:13:17,620 -Unknown: but I you you you got points for that. I'll give it to you. All right. How much does it cost? So Richard is t? I'm going to go with Tony. nine bucks. - -37 -00:13:18,040 --> 00:13:19,300 -Scott Tolinski: 19. - -38 -00:13:19,330 --> 00:13:20,680 -Wes Bos: Oh, - -39 -00:13:21,220 --> 00:13:22,930 -Scott Tolinski: so negative 10. There? - -40 -00:13:23,350 --> 00:13:33,100 -Unknown: Is Scott just available? I'm gonna say Scott is not. And Wes is because it's kind of cool. iist? Yeah, that is kind of a cool. Yeah. Scott asked. - -41 -00:13:33,250 --> 00:13:57,760 -Scott Tolinski: They are both available. Wow, Scott is getting right. Okay, so that you have rounded out that round with a negative 10. So you were if we play this game for like 20 plus rounds, I might actually come out on top, the current score is negative 126 to negative 25. So doing pretty good West. I have got a good one for you. Oh no, - -42 -00:13:57,940 --> 00:14:11,890 -Unknown: this might be a little bit out of bounds, but I'm going for it. There's no rules against that. Out of bounds dot x n dash dash for five q one one c? x n dash dash - -43 -00:14:12,010 --> 00:15:08,500 -Scott Tolinski: for five q one, one c? It is a business. Correct? Okay. Is it like a debugging type of a top level domain like an actual technical use for this top level domain? No, it's not nothing technical about it. Nothing technical about it? No. exists. company's domain. Okay. I can pronounce it for you if you want. Yeah. dot Bagua seems like it's Chinese thing. Yeah. Okay. I'll give you that. Okay. Well, you mean like to get points for it? Give me give them five points for known it's Chinese donate name. Okay. Cuz I like I think we both know right now it's a that's the ASCII representation of a Chinese character domain name, though. Okay, so that's really interesting. ASCII characters. Okay, so Bhagwat What's it? What's it for though? - -44 -00:15:08,680 --> 00:15:12,250 -Wes Bos: So Bhagwat converts to gossip in Chinese - -45 -00:15:12,280 --> 00:17:00,700 -Scott Tolinski: Oh, man, there's no way I would ever know back. I watched a lot of Chinese films and they don't ever talk about gossip that much. So. Okay, so next question is how much does it cost? Is it? It's for gossip, and also money, then? I'm gonna say it's 29 bucks. It's like 100,324 90 324. is Scott Bagwell available? Yes. And what about Wes? Yes, they're both available. So if you got 700 bucks, congratulations to me. I got I got I got 20 points minus 20 plus points minus 100 295 points. So a negative scoring of this makes no sense. Because if you screw up one price, you're shot. You're totally shot. We talked about fixing this at the end of last time. And of course, the benefactor of this all did not want to listen to that. So let's see how many points I actually have right now. It is 20 minus 295. Minus 126. I'll come on I did so well. Negative 401. points. So congratulations to me. All right. Well try nail me a lot on I'm gonna be backwards here. Okay. It's not gonna happen. It is. dot r. e. i, t. o real estate investment trust. That's a business that's dedicated to real estate. And it's going to cost you Okay, well, you didn't even wait for me to say yeah, - -46 -00:17:00,750 --> 00:17:03,870 -Wes Bos: okay. I know. Okay, go ahead. Tell me if I'm right. - -47 -00:17:04,140 --> 00:17:30,050 -Scott Tolinski: You are. You are right, sir. Okay, how much does it cost to get a receipt? I'm gonna say 39 bucks. For Scott that rate. Is that true? I got it. No. Oh, Scott. That read cost 1499. No way, you know, negative 1460 here. Getting down to Bagwell level here. - -48 -00:17:30,080 --> 00:17:31,770 -Wes Bos: Wow. - -49 -00:17:31,770 --> 00:17:39,900 -Unknown: I was so cocky because I knew it. Mm. box and West reice is available. Yes. Give me my 10 points there. - -50 -00:17:39,900 --> 00:17:43,230 -Scott Tolinski: So it's got that read. So yes, they're both available. - -51 -00:17:43,529 --> 00:17:44,280 -Wes Bos: Oh, - -52 -00:17:44,280 --> 00:18:08,490 -Scott Tolinski: you rounded up that round? Because you finish that round at negative 1440 plus negative 126 is Oh no, you don't have negative 126 That's me. 25 So you've finished that round with negative 1465. Oh, bro, big retro. I lost the game. - -53 -00:18:08,490 --> 00:18:09,180 -Oh, it - -54 -00:18:09,180 --> 00:18:14,970 -looks like that. That the scoreboard? Yes. Unfortunately. What's you've lost the game on the very last round of the game. - -55 -00:18:15,240 --> 00:18:16,140 -Wes Bos: Ah, - -56 -00:18:17,550 --> 00:18:31,470 -Unknown: man, that was that was like, like overtime shootout where everyone thought it was fine. I had a huge lead. Even halfway through. I knew what it was and the price Are you sure $1,000 type it in? - -57 -00:18:31,550 --> 00:19:28,410 -Scott Tolinski: Do a verification check. 1500 bucks. Wow. So sorry. So sorry about that one. I was I was feeling charitable. I had a one all nice one lined up for you. And then you went back while on me. So I had to go bust out my, my bad. I thought for sure Bagwell would would come and kill it. Yep. All right. Well, most part did. That was good. So if you like that, let us know. Shoot us a tweet at syntax FM. Hopefully you learned a few new tlds today. Anything else to add? No, that was a lot of fun. And definitely I think we both had a rough morning. This was a nice little nice little kickoff to the day. So thanks. Thanks, Wes. I have a lot of fun. Beautiful. All right. I'll catch you later. Later. Peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax266.srt b/transcripts/Syntax266.srt deleted file mode 100644 index 36dd48664..000000000 --- a/transcripts/Syntax266.srt +++ /dev/null @@ -1,348 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,790 -Unknown: You're listening to syntax, - -2 -00:00:02,819 --> 00:00:06,120 -the podcast with the tastiest web development treats out there, - -3 -00:00:06,149 --> 00:00:10,560 -strap yourself in and get ready to live ski and Wes Bos. Welcome - -4 -00:00:10,560 --> 00:01:07,980 -Wes Bos: to syntaxes to the podcast with the tastiest web development treats out there. Today, we've got a podcast on video for the web 2020 and beyond. So I think like flashplayer was just died the other day, I think it was like laid to rest after all these years. And we've had html5 video for maybe five or six years. And anyone couldn't put an mp4 in a video tag. But there's so much more to it specifically around transcoding and encoding and live streaming and all that good stuff. So we're gonna attempt to break it down. Scott has gone through sort of all of this in the last couple months. And he's just been collecting little tidbits of what he's learned along the way. So today we are sponsored by Sanity, which is a structured content CMS for your projects and fresh books, which is cloud accounting. I'm a Wes Bos with me as always is Scott Tolinksi. How you doing today? Scott to linskey? - -5 -00:01:08,369 --> 00:01:27,210 -Scott Tolinski: Hey, I'm doing good. I went to physical therapy this morning, got some electrified needles in my back, got them moving around here and pretty good. feeling much better than I was before. So also, we just got some hey.com email addresses. Yes. Scott with three T's - -6 -00:01:28,079 --> 00:01:55,860 -Wes Bos: got was three C's that I got. I got Wes bos@pay.com? Because Wes i hate.com. Web 300 USA. Yeah. So for those who don't know, it seems like from the tweets, no, not a lot of people know Basecamp is sick of email, and they're attempting to roll out their own email where you can screen people whether they let them in, and it's just it just seems like a different approach. Tackling email. I don't totally understand it, sort - -7 -00:01:55,860 --> 00:01:57,540 -Scott Tolinski: of like what inbox was doing. - -8 -00:01:57,749 --> 00:02:28,650 -Wes Bos: Yeah, yeah. It's it's not just an app. It's like a whole ethos around handling email. I don't think it's gonna work for me because I have an assistant who does a lot of my email and my email problems don't resolve around like, marketers getting I guess I do get I do get quite a few marketers in my inbox trying to sell me stuff, but I'll give it a shot. But I certainly don't think I'll use the ad hey.com email address so Wow, maybe I don't know if the custom emails yet or not. - -9 -00:02:28,970 --> 00:02:39,560 -Scott Tolinski: I think there's like forwarding, but I don't know about custom emails. I don't know. It's interesting. Nonetheless. I just wanted to hold on to that that address, maybe squat on that for a little bit and see how it goes. - -10 -00:02:39,569 --> 00:02:45,030 -Wes Bos: Yeah, I had a grab Wes Bos before some Joker grabbed it before me. That's why I was trying to get on it. - -11 -00:02:45,030 --> 00:02:49,919 -Scott Tolinski: Luckily, no one's going to try to grab Scott's to Lynskey. So I think safe on that. Well, - -12 -00:02:49,919 --> 00:03:01,319 -Wes Bos: you don't know someone, someone snag the syntax FM, Instagram when we announce podcasts. So Oh, people are jerks, just because they like to be jerks. So you have to think about this stuff when new stuff comes out. - -13 -00:03:01,679 --> 00:05:30,690 -Scott Tolinski: Sure. That's banking on that, that could even spell my name correctly. All right, uh, let's get into a video here video for the web. For those of you who don't know, own stock, maybe a little bit about the catalyst for why I wanted to do this episode first and foremost. But the reason I I've been thinking a lot about video on the web is because I've run a video streaming service. I don't sodas West. With both of our platforms, we create video tutorials, right? So I began having these thoughts of like, hey, my entire business is video, I should probably be better about my video solution. My current video solution was hosting everything on YouTube, and keeping it all private, and then using some fancy API work to import it all into the site and then have them embedded. And that is fine. But it's not the most legitimate thing in the entire world. Not only that, I do get some complaints that people feel like the YouTube videos cheapens the experience. Right? Yeah. Even though the YouTube players great, the YouTube videos are great, still pops in. It's obviously YouTube pops in with the related videos and stuff. And it doesn't feel like a premium service, despite the fact that the streaming is pretty nice, right? So I began to think, Okay, I need a new video host. And believe it or not, switching off of YouTube has been a priority of level up tutorials for maybe a year now. It's been a year in the making, of evaluating different streaming services, different options. And there is a huge range from fully hosted fully managed CMS style video hosts all the way to 100% API driven technical based things and we're going to talk about a lot of those options in this video, or in this this podcast, but there's a huge range of basically how much you have to do as a parent. versus your abilities to drag and drop things. And I ended up trying out a whole bunch briefly landed on CloudFlare as a solution and have since moved to mux, mbu x.com. And once we go through everything, I'll talk a little bit about why I made that decision and what my stack is looking like these days. And since we have launched the new video player already with one premium series, I'd say, so far, it's been a success. And I'm very, very happy with it. - -14 -00:05:31,409 --> 00:07:04,920 -Wes Bos: That's awesome. Let me give a quick rundown of my setup as well. So I started on Wistia, way back many, many years ago. And that got expensive really quickly. Because Wistia is a, it's more of like a marketing video platform. So it's more like a drip or ConvertKit for video where the tools are used to capture email addresses and upsell people. So I moved off of that, because I was getting way too expensive. And then I moved to Vimeo, which was like their very free plan, or they're, like 200 bucks a month, or a year, sorry, 200 bucks a year, and it was unlimited. And it was working well, for a long, long time. And I think about a year ago, they started to crack down on tutorial creators, because there's something in their terms of service that says if you make everything private, and you don't make your videos available on vimeo.com, which is what I was doing, then you have to do a custom plan. So I have to pay six or $7,000 a year to host my video, I could actually bring that down quite a bit because my free tutorials are a majority of that. And I could have my free tutorials on a regular Vimeo plan and make them publicly available and then I'd be allowed to embed them. And then my paid ones, I would have to pay by the bandwidth for them. But I opted just to pay the bill and keep going because they sort of sprung this on me and said hey, you have like four days, which was kind of not a cool move. - -15 -00:07:05,220 --> 00:07:12,660 -Scott Tolinski: Let's uh, let let you redo your entire platform in four days. Yeah, something was like weird abortion. It's like a shakedown. - -16 -00:07:12,930 --> 00:07:44,970 -Wes Bos: Yeah, no kidding. So they said, like, Hey, you got to pay for it. So I ended up just paying for it because I have bigger fish to fry. And it works pretty well. You can customize it all you all you want. But in the process of doing this, I did go through quite a few of the these possible options as well. And I most of them, I just kind of looked at the end of them at a high level and said, That's too much work for me right now. Mm hmm. And I'm going to wait until I'm going to do what Scott is doing. And I'm glad that Scott did at first because now I get to learn from him. - -17 -00:07:45,360 --> 00:10:11,940 -Scott Tolinski: I can give you all of my notes. Yes, because there is a lot of notes here and I went through I really went through the ringer of trying several of these different ones and and really got my hands dirty. So we're going to be doing in this episode, I'll give you just a slight background on some of my history with video because I think that might be important, some terminology. And then we're going to talk about some of the format's and then we're going to do a roundup of players as well as services, a service Roundup, I even have a little horse emoji in here. And then we're gonna talk about the stacks. So first and foremost, my my background is I started video editing and in middle school that was like before coding before anything, we were making skate videos, I got an iMac just so I could use iMovie and edit skate videos. I work professionally as a video editor and a production assistant for Guitar World and feature music magazine. So I have work, motion graphics and video editing professionally. For one of my jobs. I created a specialty flash player that kept two videos in sync for use of slides and video feed of professors giving lectures. And we sold that as a service. And I've been hosting and recording video content ever since the start of my web career. So that's my brief background into what I've done in video. It's mostly on the production side of things rather than on the encoding and technical side of things and not having to learn a little bit more here. So some terms that we might talk about, besides the format's here transcoding, you'll hear the word transcoding. And that's really just a digital to digital conversion of one format to a another. Let's say you have a video that is produced that like an mp4 file. And then you upload it to one of the services that becomes one of these fancier formats like dash or or HLS or web M or whatever. That's going to be a transcoding operation. There's also the word ingest. If you're looking at any of these services, they frequently they all just use the word ingest everywhere and ingest apparently comes from my understanding of the history of the word. It's like when people were to bring the media from one location to another like all let me bring these canisters of film over and like the process of accepting them. is an ingest process. So they typically say like the ingest process is, is basically uploading the video file or data to a server so that it can be then transcoded and then streamed. - -18 -00:10:12,390 --> 00:10:15,770 -Wes Bos: So we've called that slurping up it previously, - -19 -00:10:16,440 --> 00:12:42,750 -Scott Tolinski: I believe we have used the technical terms slurp to describe the ingest process. And maybe we should petition to get that change because I do like search. And so you'll hear these two terms a lot, especially when you're doing the research and just know that that's sort of the process, right, the videos have to exist somewhere or they have to be ingested somewhere, then they have to be transcoded or encoded to become another file. And then they have to be served and distributed. So there's a whole lot that goes into beyond just video file on server hit play. Right. So that brings us to the next topic, which is streaming versus downloading. We've talked a lot about this in other contexts, but it should be pretty straightforward. If you think about it, right? When you stream things, you're basically sending chunks of it along down the line at a time as the user needs it, right? Where with downloading, you download the entire file the files downloaded, and then you're able to play it. That brings us to formats. And the format's here largely are about downloading verse streaming, because many times people say, Alright, I want to have a video playing on my site. It's just an mp4, whatever. Is that good enough? Well, it depends on what your goal is. If you're doing like a video tutorial streaming site or something like that, you're going to want to go with streaming. Now, if you've ever been to Scott Tolinksi, calm in the past, I had this video of me dancing B boying breaking in the background of that, and that was perfectly fine as a video file or a web m. because it's just like an asset, right? It's being used as like an image. And in those cases, sure downloaded, it's a small video. But if you're going to be doing any sort of video streaming, or you know, video hosting, to the point where people are going to be watching these videos, you're definitely going to want to stay away from like, download an mp4 or download an M web m as a process. So an mp4 is a wild format that's been around for a while now. And includes both, I believe, video as well as audio, it is a complex thing that you don't really need to know too much about other than mp4 is a video container format. It's like one of the most standard used formats, essentially, in the world. - -20 -00:12:43,230 --> 00:13:13,590 -Wes Bos: I watched a really good conference, talk about how mp4 works and how the compression works. It was unreal to hear and he talked about like, you know, sometimes you're watching a video and part of the screen goes green for a second. And it's usually where someone had moved. And he explained like how the why that happened and what was missing. And I'll see if I can find the link to because there's super, like, I'll never care really all that much about compressing it and befores it via code, but he explained it really well. - -21 -00:13:14,010 --> 00:15:13,320 -Scott Tolinski: Interesting. Yeah, I would love to have that. mp4 is again, just basically the most standard video format that exists. And if you just reference an mp4, instead of a video tag, it's just going to download and play that video, right. And likewise, there's a web M, which is a newer format. Now web m, is an open source, royalty free format. So of course, you know, Apple is not going to be on board, because that's how Apple does things. So web M is not as widely supported, but gives you much smaller file sizes. And there's probably like a good alternative to using an mp4 in certain situations. That said, again, the iOS bit of it, and not working on iOS is probably a big problem. And so that's largely why when you see videos, they're offered in multiple formats, sort of like how cloudinary does it. And in fact, cloudinary can do this where they can give you like a an mp4 on like iOS, and then a web em on Android or anything else that supports it. So those are this two sort of base formats I want to say. But we get into these these, like more adaptive streaming formats, and they're a lot more interesting, in my opinion. And we have two of them that are competing against each other one is called dash, and it's the newer format, and then there's HLS, which is Apple's own format. Now Apple owns HLS and it has been around for longer and has a much wider support. So from what I'm reading, and I'll link to this blog post in the show notes because I don't know Know how much bias is in this because they say basically, that dashes the better format. But HLS has been around longer has wider support, therefore, well, you'll see HLS in more places and dash in less places. - -22 -00:15:13,549 --> 00:15:57,179 -Wes Bos: If you've ever seen, like you've right clicked a video in Chrome or whatever, and the source of that video is like blob. And it says blob colon slash slash, I always wondered like, what what that was. And I was on a call with the guys from mcse, a couple months ago. And I said, like, what is blob? Like? Like, do you do that, and he said, it because a lot of browsers don't support HLS. But if the feed is being served up in HLS, what needs to happen is in the browser, you need the hot potato transcode, that from HLS into the the blob format, which then can would then can be played back in a video player, which is kind of kind of interesting. - -23 -00:15:57,510 --> 00:17:25,260 -Scott Tolinski: There's a lot of weird intricacies within all of these various formats, and how they all relate to each other, and what's supported and what's not supported, which is one of the reasons why Towards this end of this episode, you'll hear me recommend not rolling your entire own from scratch. There's some complications there. But yeah, so here's a little paragraph that I'm saying. HLS is the only streaming currently supported on iOS and is supported natively within Safari, as of 2016. Okay, so that may be not relevant edge could play HLS natively. So I wonder if edge still can play HLS natively. Now that it's on Chrome, let me check Can I use, by the way HLS stands for HTTP live streaming in case you wanted to know what that stood for. So it looks like HLS does not have some native support on Chrome, Firefox, edge Internet Explorer, opera, opera, mini or Firefox for Android. But it does work on safari, iOS, Safari, Android browser, and a whole bunch of others. That said, HLS is still the preferred method. Because if you look at Can I use and then type in dash, it's all red. So So obviously, neither of these are going to be the most widely supported things. The might say, Well, okay, if they're not widely supported, then how can we use them? Well, you can use them again, through essentially the use of JavaScript, just because that's not natively used doesn't mean it's not possible. - -24 -00:17:25,469 --> 00:17:51,050 -Wes Bos: Yeah, that that's what that hot potato thing is what I just said, right, I'm just looking at exactly what is actually doing that. And it looks like HLS j. s is the library. And, and it seems like most players like video, j, s, and flowplayer, things like that, just use this under the hood, I always say under the hood, I gotta stop saying under the hood, they just use this library to convert it in the browser. So you can play it in any browser, which is kind of cool. - -25 -00:17:51,509 --> 00:19:29,700 -Scott Tolinski: And there's this whole dot three u eight, file extension, which is essentially basically just giving you rules of it being like a playlist, like here's a playlist of 100 clips of a file, right. And so the way these things largely work is that they're like, with a normal download file, right, you download the file, you play it. With these streaming services, what they do is they're downloading it as it's needed. But because they're downloading as it's needed, what they can do is change the actual video file segment. So you could think of it like this, let's say we had like five video segments, one, that's a 1081. That's a 720. And this is the resolution one that's like a 400, whatever one that's like 4k. Let's say you're streaming it, you're watching it, you're at the 10, EDP and all of a sudden, the next chunk is coming up, and you're getting really good download speeds, what this can do is bump up to the next one, or the download speeds are not so good for this next one. So maybe it bumps down. Basically, you could think of it as like a series of chunks, maybe it's like a train track, right? The trains cruising on the 10 ADP, and then all sudden the there's less resistance so it can go up to 4k. And now the sudden there's more resistance in the network so it can go down and switch the track again. So it's basically these various tracks that you can jump between in a series of sequences. And that basically, it's always going to pick the highest bitrate possible in the downloaded time so so while it's downloading, it's always going to pick the best format that it can or the best resolution. - -26 -00:19:29,700 --> 00:19:43,020 -Wes Bos: Yeah, if you ever um, have used YouTube DL, which is a little command line thing to download youtube dl is awesome like pretty much any website that stream shows will live download them for offline - -27 -00:19:43,380 --> 00:19:44,880 -Scott Tolinski: YouTube dl so amazing. Yeah, specifically, - -28 -00:19:44,880 --> 00:20:13,550 -Wes Bos: I use HGTV me and my wife love watching, renovation, whatever House Hunters and we download them so that they don't have to like stream or buffer throw ads and things like that and I use YouTube dl and you just pointed to the Euro And it downloads that M three you. Yeah, downloads m three, eight, you opens it up and inside of there, there's hundreds of pieces, and then it downloads each of those pieces for you and then put them back together. - -29 -00:20:14,010 --> 00:20:49,410 -Scott Tolinski: Yeah, yeah, it's wild, right? It's very complex. And when you think about like, trying to do all of this yourself, you think, oh, boy, especially when you get into having to create those things yourself, create those manifests, create those playlists, create all those videos, all of that transcoding? What does that look like? Yeah, so we'll get into that a little bit. Before we get into players, we're going to do a quick ad break to talk about one of our sponsors that actually, believe it or not, has a video plugin that uses the service that I've mentioned mux. So with more on the sanity.io is Wes - -30 -00:20:49,650 --> 00:21:33,660 -Wes Bos: Yes. So we had our huge show on headless CMS a couple a couple of weeks ago, and people loved it. It's actually one of our best viewed shows lately, people loved hearing all the ins and outs of how everything works and but one thing I didn't say and didn't know about Sanity is that they have pay as you go as well as in addition to the plan. So if you're looking at you say I just want to pay for for my usage, rather than getting a specific plan, you can do that. So if you are building a project and you need a back end for it, check it out@sanity.io forward slash syntax that's gonna get you double the free usage tier. Thanks so much for Saturday for sponsoring. Cool, - -31 -00:21:33,780 --> 00:21:52,020 -Scott Tolinski: let's get into the players section of this. There's a lot of players on the web. So if I'm missing any, please let us know there are just so many here. Have you ever heard of Shaka player? That was when I had never heard of until I Shaka hunt? Shaka sh aka - -32 -00:21:52,020 --> 00:21:53,040 -Wes Bos: from Google? - -33 -00:21:53,220 --> 00:23:01,020 -Scott Tolinski: Yes, exactly. I was gonna say you'll notice a certain company has created Shaka player Shaka player is the dash and HLS client made by Google. It's a JavaScript based player. It has a really dope hang 10 logo, which is like the Google thing but in like, hang 10 hand, which is kind of fun, or I guess is Do people call that the Shaka hand? I guess they do. I've always just known as hang 10 paint and yeah, yeah, that's, it's pretty dope. It seems to work on just about everything. I have not used this. But I did. I saw it in a video talking about the video format that we're going to use Shaka player is like the heck of Shaka player. So this seems like a pretty cool option here. It supports just about everything you could imagine. It's boring, and it looks pretty cool. So I have a new Shaka player, but it does seem like a great option for those of you looking. There's also HLS j s HLS. J s, what I saw was maybe created by dailymotion, I saw dailymotion had a fork of it, if I'm wrong on that. There's a very well, there's a chance that this exists before that, but I did see dailymotion had some sort of a fork of this HLS. - -34 -00:23:01,050 --> 00:23:17,220 -Wes Bos: It looks like dailymotion made it and then they put it in their own GitHub repo, because it's, it seems like the entire industry is using HLS j. s, which I don't think that this is a player, it's just a library to stream into a video element. - -35 -00:23:17,580 --> 00:23:23,070 -Scott Tolinski: Yeah. Right, because they even used mcse as one of their examples here, well, MK CD player. - -36 -00:23:23,310 --> 00:23:33,660 -Wes Bos: But here's a question from the perspective of audience, why do you need a player? Like why can't you just use a video tag and then style it and add your buttons as you want? - -37 -00:23:33,900 --> 00:23:51,000 -Scott Tolinski: Because specifically, like when we were talking about those formats, the HLS and dash, they're not going to be supported in just the HTML image format. And then you're going to be stuck, essentially just downloading the video, and not getting the streaming stuff that we want to stream. - -38 -00:23:52,110 --> 00:24:30,330 -Wes Bos: And then things like Chromecast, and Apple play DRM, there's there's several different DRM things like if you watch Netflix, that's just the html5 video element. I almost said under the hood, I didn't it's the html5 video element under there, but they do use DRM. So you can't just save the Netflix video from there. So your player has to know how to how to work with that. So I think in in most cases, same with like, like bandwidth as well, the html5 video element won't ask for a lower quality bandwidth if the internet is being slow. That's something a custom player will do. - -39 -00:24:30,570 --> 00:25:59,850 -Scott Tolinski: Right. So that's really that all comes down to the formats, right? I mean, that can happen without an HLS or a dash format coming in. Yeah, the player itself under the hood is really like you mentioned a video element. Okay. So there is a video element in there. If what you do is you open the driver's side door, you reach in by the foot well and you pull the little handle in the hood kind of pops up a little bit and then you walk over to the front of the car and get your hand in there and lift the lever and then lift it up. So once you're under that hood, that's when you're going to see very specifically that there is a video element in there. So that that works, how you'd expect it. In fact, actually that video element is one of the the reasons why I had to move off of CloudFlare. We'll talk a little bit about more of that later. But some other players just to briefly these are dash dot j s, which is the dash industry forum dash dot j s. There's also video A j s, which is the one I went to video dot j s is a very mature video player that's been around for a long time has a big community, tons of plugins, tons of themes, those kind of things. Definitely a bit of a piia though to get set up as an It was a pain in the rear end it did not it was not exactly the easiest thing. There's also JW Player which has been around forever and ever and ever. And if you haven't been to JW Player lately, Wes go to JW Player comm and kind of be like, well this is different. - -40 -00:26:00,450 --> 00:26:06,360 -Wes Bos: Yeah, I remember JW Player being rounded corners and gradients like when that was that was really - -41 -00:26:06,540 --> 00:26:11,250 -Scott Tolinski: just like a player though. And now it's now there's solutions and products. - -42 -00:26:11,280 --> 00:26:13,350 -Wes Bos: Oh, they went corporate on a very - -43 -00:26:13,350 --> 00:27:01,740 -Scott Tolinski: corporate but that is pretty dang nice. In fact, JW Player, believe it or not, is one of the streaming services that we're gonna be talking about because it used to just be player tech. Now. It's a whole streaming service. They, they monetized. It looks pretty cool. Actually not one that I really checked out too much. But it definitely looks pretty, pretty cool. There's also a bit moving player Have you heard of bit move in play? I have pretty sweet and a bit moving is a big, big encoding company. They do a lot of big stuff. We'll talk about them in this services. They have a player, you have to pay for it. There's a monthly fee to use their player. It looks pretty nice though. There's also ooyala, which I didn't realize yellow is bright coves player. I don't know why great code. Here. Ooh, look. Ooh, I want to say Ooh, la la. But it's Ooh, Yala. - -44 -00:27:02,520 --> 00:27:04,230 -Wes Bos: ooyala. I like it. - -45 -00:27:04,500 --> 00:29:19,080 -Scott Tolinski: Yeah, yeah. It's a fun name. I wish I could say it better. It's not great for dyslexic folks. But yeah, ooyala is this even? Yeah, because ooyala.com redirects to bright code. So maybe it was formerly ooyala. And they made renamed to bright Cove, because I don't know, I'm speculating here. Either way, ooyala is a player, there's also a player called Theo player at eo player.com. This is not one that I had seen before, either, but looks like it's very widely used. And they make the bold claim as the number one video player worldwide, because it's used for BT Sport, and BC, CNN Vodafone, all these things. So that is the players. Now let's get into sort of the meat and potatoes of some of these services here, for cooking up a stew, we got the meat and potatoes here. And that is going to be the services round up. I feel like we need some round up sound effects that whenever we see because this is now the second round up and a little bit. And maybe we can have a little roundup thing round up. And then like, you know, you could have some horses stamping stamping around and stuff. Okay, and get off course. So, services, I have ordered these in the listing of I have technical difficulties as the header, but I've also thought about naming this user misery because I got that term from stripes, new stripe has these new performance metrics. And they, they they have like your routes, each of your routes has a user misery rating. And I think that's hilarious. It's like, Alright, if X, Y and Z number of users are having issues, then that this is a high user misery route. So rating these in terms of the easiest to get set up to the hardest to get set up. And with some caveats here. And obviously, there's a lot of these services. So we may forget some number one, you do free. Congratulations. It's free, free 99. It costs nothing to get set up. It's the least professional. It's the easiest to do. They have all the tools you could possibly need. But you're also supporting the giant behemoth that is YouTube. So yeah. - -46 -00:29:19,410 --> 00:29:47,040 -Wes Bos: Next one is I'll do Vimeo because I know that the cost is even like, like straight up. I know I'm paying a lot but I did all of the math. I talked to some guy on Twitter dm to me, and he works for like a massive porn site, he said, and he gave me like this like spreadsheet of all of the research that they've done. And like he looked into every single player and there was there's hundreds of players I hadn't even heard of before - -47 -00:29:47,040 --> 00:29:57,840 -Scott Tolinski: an academic paper. Yeah, like I found this one. I was just googling I was googling around and there were some academic paper about the cost of all these streaming services and it was a really helpful table. - -48 -00:29:59,700 --> 00:30:33,210 -Wes Bos: So The Vimeo still came out cheaper than the raw bandwidth from a lot of these, these companies. And that's why I ended up not doing it because even looking at something like mcse there's obviously other upsides to, to using mocks. But for me, I was just looking at the raw bandwidth cost, and then having to code my own player. And it was still cheaper to just use Vimeo, which comes with player and transcoding and everything, as well. So very affordable, especially if you are making them publicly available. And you can get in on the $200 a year plan. - -49 -00:30:33,269 --> 00:30:43,560 -Scott Tolinski: Yeah, that is the $1 sign option, right? Just the $1 sent option, where it's like a fixed cost, you're paying the cost. And then in that's just what it's - -50 -00:30:43,560 --> 00:30:46,770 -Wes Bos: not a fixed cost. For me. It's so I paid by the - -51 -00:30:46,919 --> 00:30:47,760 -Scott Tolinski: hour, right? Okay. - -52 -00:30:47,999 --> 00:30:59,340 -Wes Bos: Yeah, but most people unless you're doing private video streaming like a course like I am, you have, you have to pay for that. But if you're if you're just like uploading videos, or whatever, yeah, then it's a fixed cost. - -53 -00:30:59,459 --> 00:31:27,390 -Scott Tolinski: So next up is I have this as a $2. sign these things that let me tell you are kind of hard to really quantify in terms of pricing. So this is probably going to be a more expensive for you version, but most of the services will fall into this category in my my experience, and this is mcse mux is used by vair sell v s co do you call that Cisco v this V Cisco, - -54 -00:31:27,390 --> 00:31:28,050 -Wes Bos: you - -55 -00:31:28,050 --> 00:33:34,290 -Scott Tolinski: know, two people actually say that Robin Hood and level up tutorials. mcse is a pretty sweet service, you could think of it as sort of like, you could think of it as like video on demand where you ask for something, and it transcode that on demand for you. So that way, you're not like hosting a bunch of video that people are watching, right, you're not creating 1000 streams and having to pay to host those. Let's see what the pricing is. It's basically Okay, this is tough to calculate here, the pricing is five cents a minute for each video watched, or for I'm sorry for that. That's for encoding, not for watching five cents a minute for encoding, point, three cents, so point two, three cents a minute for storage per month. And then point one three cents per minute for streaming. And they have this interesting little calculator on their pricing page, where you can say how long is my average video k my videos 10 minutes long. I upload like 25 videos a month, monthly video view count, I don't know. Either way, it's calculating to end up being under the $500 range. Somewhere in between that, but this is a professional service, I probably I have not gotten a bill yet. But I'm probably not going to be paying a ton as this is I'm I'm slowly adding my library there instead of just like tossing all 2000 of my videos there at once. So we'll definitely see as the cost grow. But it's definitely a good solution. Because I think for the most part, the costs are going to be pretty close to what I'd be paying at other services to get the same sort of stuff that mcse gets me The mcse is a developer forward sort of experience that said, I did have to write my own uploader function. There's no like UI to upload a video where some of these do have a UI to upload a video. So because of that I did give this to user misery or technical difficulties used to be you have to be two crying faces. Technical to want to use this. That's not bad. But you still have to write your own uploader. Right. - -56 -00:33:34,500 --> 00:33:59,130 -Wes Bos: Yeah. Next one we have here is Wistia, which they have plans. The kind of person that's using Wistia is gonna be like, like a real estate agent or, like a SAS software where they have like one of those like, welcome to our stupid product. Like the end, they end The end of the animate people on the screen and things like that. Not say I don't like Wistia I think it's a it's actually an excellent Yeah, - -57 -00:33:59,130 --> 00:34:00,180 -Scott Tolinski: excellent product. - -58 -00:34:00,210 --> 00:34:18,090 -Wes Bos: Yeah. It's just very expensive. So I'm just looking at the once you go over the 200 gigs, which I will go over in a couple hours. It's 33 cents a gig were on I think Vimeo and paying six. So it's almost six times more expensive than then Vimeo is on Wistia. So, - -59 -00:34:18,090 --> 00:34:18,960 -Unknown: Mm hmm. - -60 -00:34:19,320 --> 00:34:32,360 -Wes Bos: And like I've had calls with them, and they can bring that down if you're doing them out that I'm doing but nowhere near what Wistia does, but it's great for if you're trying to collect email addresses and sign up I think even egghead uses Wistia I'm - -61 -00:34:32,360 --> 00:34:34,710 -Scott Tolinski: not sure if that's still true or not is bitmovin - -62 -00:34:34,980 --> 00:34:54,690 -Wes Bos: their news? Okay, they moved over to Tippit moving. I think if you use teachable, they use Wistia and they they foot the bill they since they tried to get me to move over there. And they said we'll put the bandwidth bill but both love Yeah, I'm not moving off of my own platform. I know. That's a pretty good option. Just expensive. Yeah. Lots of control. - -63 -00:34:54,710 --> 00:36:37,320 -Scott Tolinski: Yeah, totally. The players really nice to go see a lot of customizations there. Yeah, I really like to stay when I did the demo of it. But yeah, the pricing is just not possible for what we're doing. Next step is CloudFlare CloudFlare actually launched a video product, I'm not sure when. And I briefly was going to be all in on the cloud for product, because the pricing was pretty good. The technical difficulty aspect of it was pretty good. In fact, to upload your things, I actually, I actually thought the interface for uploading a bulk uploading videos was better than YouTube's. It was very fast, very simple. And you could just drag a whole bunch, there's a UI, you just drag and drop, upload, change the names, whatever. I hit the API, import the videos, and I was so close to launching with it, because all of that, and then I started to get second thoughts, because here's why CloudFlare requires you to use their stream element, which is not a real HTML element that CloudFlare has just created themselves, for some unknown reason, instead of using video elements. So you use the stream element. And guess what that means that if you want a custom player, which you do, okay, you do want a custom player because if you just use the browser's built in one, you don't get access to a Chromecast, which is number one feature I wanted or airplay, right? You don't get access to those things. So what do you have to do? Well, you have to write your own player. Why? Because they use a stream element, it makes it so it doesn't work with any of these other player options, what is the stream element, just their own thing that they made up and therefore your linter gets angry, everything gets angry, and you cannot use video JS or you cannot use these things. Because looking for the video tag, - -64 -00:36:37,590 --> 00:36:42,360 -Wes Bos: they got to be sent in something that can be understood by the browser made, they - -65 -00:36:42,360 --> 00:37:11,760 -Scott Tolinski: just don't they don't surface it, they don't. So that looks for the video streaming element. And then their JavaScript does all over the bits to turn it change. Either way, doesn't play nice with anything. So I was like coding my own player with framer motion and I spent way too long on it. I got really far. And then I just like okay, now I got a Chromecast I got to add this. And then it's getting bug reports. But now working right on some browsers. And I was thinking, What am I getting myself into? Is this something I really want to do? - -66 -00:37:11,790 --> 00:37:14,340 -Wes Bos: Yeah, coding your own video player is tough. I know. - -67 -00:37:14,820 --> 00:38:15,920 -Scott Tolinski: And I just at the end of the day is like, you know what, this is not something this is making my life more difficult. So I dropped it with mcse. So I could use player jazz and some of those. Okay, next one is going to be JW Player, which we talked a little bit about JW Player, I have no experience with them. In fact, I thought they were just a player until I started compiling this notes. And then I found out they do all of this other stuff. Now JW Player apparently has a streaming video delivery service, live streaming, hosting and management video monetization. Looks like they have like add solutions. This thing looks like pretty crazy. It seems like they have a lot of different services. But to get started for 150 gigabytes of hosting and 500 gigabytes of streaming, suddenly 10 bucks a month. And you even get password protected. Sharing to I don't know how that works with embeds or something if that's just like their own URL. This is a pretty sweet deal. I don't know enough about this to like really dive in here. But maybe you want to check it out at least jw player.com - -68 -00:38:15,920 --> 00:38:35,630 -Wes Bos: looks like they do they do stats as well, like that's something we're not talking about either is that a lot of these services will give you really good stats about Oh, yeah, countries and plays and where people drop off on a video and things like that. And then others solutions are just raw, raw bandwidth at the end of the day. So that's pretty cool. one layer, - -69 -00:38:35,940 --> 00:39:34,800 -Scott Tolinski: you'll have to like opt in to those data services. MCC says Oh, yeah, really good video data as well. It's mcse data is pretty, pretty slick. Okay, so next up is cloudinary, which I had quite a bit of difficulties getting cloudinary videos to ingest. They would or if I didn't just them, I would specifically ask for a version of the video and it would just not work. I'd be like, No, we don't have it. And so I had a lot of issues, getting the cloud in Aries video uploading to work the way I wanted it to. And there were some restrictions. It was so funny because we had found a bug I forget what it was we found a bug with our video player using cloudinary. And our developer Eric, he reached out to cloudinary to say, Hey, what's the matter with this? Why won't this reformat? Why won't this change? And they're like, well, there's some videos, like, over a certain size can only be modified in these ways. If they're uploaded via these manners. It's like Well, - -70 -00:39:34,800 --> 00:39:37,940 -Wes Bos: well, the documentation is don't like - -71 -00:39:37,940 --> 00:39:46,500 -Scott Tolinski: tell you that kind of stuff. And, and like if I get a video into cloudinary it should just work with all of the features like I shouldn't have to do things a special way to get it to work. But - -72 -00:39:46,590 --> 00:40:10,610 -Wes Bos: yeah, that always bums me out when like companies make something so simple. And then like like the cloudinary images just slam dunk homerun slap shot, and they killed it and then it sounds Like the video stuff is not as easy. always like, ah, like, I want you to be what you are for your other thing for the everything else in my life. It's not necessarily always the case, - -73 -00:40:10,650 --> 00:40:38,130 -Scott Tolinski: I looked at so many of these services only to find like some of them were just like a couple of ticks in the user friendliness side over and they would have been a home runs when Grand Slam slapshot. I mean, they would have been, there's so many of these that that like come so close to greatness in terms of like, getting the UI dead, right, or the user experience dead on. Yeah, but in this almost a touchdown, almost a touchdown, almost a double touchdown in - -74 -00:40:38,360 --> 00:40:39,750 -Wes Bos: the setup. Now, - -75 -00:40:39,840 --> 00:45:19,950 -Scott Tolinski: don't want to double that one time, I was at a UVM football game, and we're losing the Minnesota, which is crazy, considering like Michigan versus Minnesota should never be that close. Tell me, you're losing by like 40 points or something. And my my buddy, who I was with was like, not into football at all. And he was like, Whoa, we could really use a double touchdown right now. He's like, Oh, you just did one touchdown, but they give you 14 points instead. So like, so many of them, I'd be nice to contact the customer service. I'd be like, how do you do this? They're like, you don't you got a code? You're like, Okay, why don't you just go that extra step? You know, why don't you go go the extra step. Okay, we got more to go through, which is one of them is break code break code, we use that Ford, so I'm used to using them a little bit. But again, that's probably not one you're gonna want to use for anything, like what we're doing. But if you're the type of person who is looking for like a video streaming service, you could imagine like how it's being used on forbes.com, show clips of the cars go verm, then that is going to be the right kind of solution for you also expensive, but definitely a little bit more handhold II, there's also things like I have these next three, which are a little bit more technical, which is Azure bit moving in AWS. So as your is Microsoft's cloud platform, I got as far as setting up my workflow, I had the encoding processes set up. And then like their players, garbage, sure, they're trying to get you to use the Azure player, which just is trash. For the most part I had, like, I didn't want to get into the dev docs for it. But the the interface stuff was just okay. Not very good. Bit moving is very technical. So if you look at bit move in, and you say, okay, bit moving, this seems like a great, great idea. Just know that you have to basically write all of the ingest stuff yourself. Or like, for instance, if you want to connect to an s3 bucket, which is what you have to do the videos have to live somewhere like an s3 bucket, then you got to connect that to bitmovin. You got to write your own serverless function to do all of that. It's like okay, well, what maybe you could like handle this to just say, let me login. Let me give you some access keys and then select the bucket and click Go. Now I can't do it that way. So you have to do quite a bit of your your own stuff. But if you want to save money on pricing, you're a bit more technical, you're a bit more developer minded, someone like bitmovin is a really good one that they have a lot of really awesome encoding stuff, their encoding tools are really great. The that's the analytics are really great. That said it was a little bit less handhold Lee than I wanted, not that mcse was hand holding, but it was definitely easier to get up and running with and moving. Lastly, I have AWS is a whopping five crying faces on the technical difficulties side of things. And I used this VOD on demand workflow, which never ended up working. Just to give you an idea of what this video on demand workflow actually does. Because with Amazon, it's never like here, let me do this one thing, let me do this. One thing that does another thing that does another thing. So the VOD on demand, basically set you up with a s3 bucket, a elemental media convert, AWS lambda functions, notification service and a cloud watch as well as a database with Dynamo dB. And what this does is it you create a folder within s3 a bucket. So to say you put your videos in there, you have a watch service that looks for that bucket looks for anything added to that bucket if anything's been added to that bucket. It then runs through this transcoding process and spits out all of the files into their format into a another bucket with their various formats. And those formats and that manifest and metadata is all collected in a database. And then it's all served through CloudFront their CDN. I had major issues with this process. It didn't work. They made it seem like it was like a one click get up and running with professional VOD. No, and for the most part, I talked to a lot of people who had the same experience. There were definitely permissions keys issues, there's a lot of things. There's a lot of things that uh, talk to one another. So unless you're an AWS person, like if you're an AWS certified whatever, you have a lot of AWS experience, you're very comfortable. And AWS, this is probably the best one for you to use, because it's probably going to be probably the cheapest, because it's the closest to what do they call it that's closest to the doing it all individually raw chunks yourself to the metal closest to them. Yeah, that is what I want. - -76 -00:45:20,310 --> 00:45:28,770 -Wes Bos: I wouldn't be surprised if a lot of the services that we're we're talking about today actually just use Amazon under the hood. Yeah, it's like as a utility company. Yeah, - -77 -00:45:28,770 --> 00:46:04,440 -Scott Tolinski: I would imagine a lot of them do, or Azure, or Google Cloud, because I know mcse has their data stored in the gluco, Google, the Google in the Google Cloud. But their transcoding is done. I don't know by themselves or something, I'm not sure. So don't quote me on that. Either way. That's a rundown of all of these services, who there's a lot of services. Before we we get done with this. This bit, let me just talk briefly about why I chose the stack I chose. And before I let you know exactly what I chose, and why, let's talk about one of our sponsors, and that is Freshbooks. Today - -78 -00:46:04,769 --> 00:47:03,600 -Wes Bos: freshbooks.com. forward slash syntax is the URL that you need. If you are a small business, you're a freelancer, you're just billing someone and need to make a quick invoice, send it over and keep track of it. Don't go into Microsoft Word or whatever to make your own. And you'll never be able to keep track of that you need to sign up for fresh books, and use that to send out your invoices, it looks super professional, you can log all of your expenses in there, you can do your billable hours, you can you can input expenses, and then convert them in just immediately turn them around and build them for clients. I've done that with flights before. So like I paid for the flight myself, I put it in as an expense. And then I turn around immediately and then build the person running the conference for that thing. So pretty, pretty cool. Check it out@freshbooks.com Ford slash syntax use syntax in the How did you hear about us? That's gonna give you a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring, let's hear about why and what did you end up doing? What is your staff? - -79 -00:47:03,959 --> 00:49:29,070 -Scott Tolinski: Yeah, so through the course of this, I signed up with accounts at Vimeo, mcse, Wistia, CloudFlare, cloudinary, bitmovin, and AWS and Azure. So I've really tried all of these with the exception of Brightcove and JW. Player, I ended up going with mcse. For my host, its developer forward, it was easy it worked first try I created a video uploader with help of MCC with the help of up chunk, which is their own chunking uploader that the mocs folks created and the code was not too crazy. Basically, I just got my key from the server I was able to with with that key on the client side, basically hit mux. With up trunk I just pasted in essentially a URL with a chunk. Here's the video file went through it did its thing. And then I wrote some polling to hit the marks API to say, Alright, is the data ready yet? No. is the data ready yet? No. is the data ready yet? Yes. Okay, it is okay. Let me get that data. And that's really what I did there. You can also do it via web hooks. But the polling worked fine for me. And that, you know, it's easy, a little bit easier to troubleshoot I think because sometimes I get nervous with web hooks. For some reason, even if code hasn't stopped working like it's still have access to our cake. I don't know it's not as transparent. I also went with video j s for my player, mostly just because there's a lot of people using video j s, there's a lot of plugins, it was fairly easy to get Chromecast up and running on this thing, and includes all the goodies and all the things you'd come to expect Not to mention there is theming a lot of the CSS I found to be very, very difficult to work around. But once I figured it out, I was able to create my own theme, my own theme which by the way is actually even connected to our theming system. So it works. They'd like changes colors in dark mode and OLED mode and whatever it's actually like themed with the site. So it's pretty cool I got my own custom player looks nice all the functionality I want video dot j s and that's really it. That's all I did here mcse video j s where I went and so far so good. I launched one series with this and have not had any complaints so far. Nothing popping up in my Sentry. So I feel like it's been a success so far. - -80 -00:49:29,580 --> 00:49:52,530 -Wes Bos: Cool. Well, we'll have to do like a like a six month update hasty on on how it's going and, and whatnot because I think there's a lot of people that asked these questions especially like, like you can start up a video streaming thing and use a service but then as you want more control and costs alone and it's worth looking into one of these so thanks for showing us all that what about some sick pics today - -81 -00:49:52,800 --> 00:51:02,730 -Scott Tolinski: sick backs. I have a sick pic. It's a podcast that I've been listening to and this is going to be not a podcasts for everyone. I'll tell you that right off the bat. But this is the podcast I really like. And it was only on Spotify before. And they have since moved to everything so I can finally recommend it. This is for those of you who are into fitness, if you're into fitness and you're into mobility, stretching flexibility, this is going to be for you. It's called flexibility focus. And it is a science based flexibility podcast. I love my science based fitness podcast. And this one is basically this very smart guy who does a lot of stretching stuff. And that is the best way I can explain them to technically distractions. This guy, he's very, very smart to basically talking about medical journals, evidence based stretching things, and it's a little dry, and it's long, and it's very technical. But if you're into flexibility, stretching, whatever I just this is one of my new favorite podcasts for those reasons specifically, he just really he has really opened my mind to some things within flexibility, which is something that I am particularly interested in. - -82 -00:51:03,090 --> 00:51:48,270 -Wes Bos: I'm in a sick pick a another YouTube channel. This one is mostly focused on motors, like not electric motors, but like gas motors and engines, things like that. And he does a lot of these like he'll find that go weed whacker on the side of the road and then he'll he'll break it apart and show how to fix it or like he found like this really nice fan on the side of the road the other day. And like the fan, it does like one of those where like the fan doesn't spin unless you flick the blade and then it gets going. A sure how to fix that. And like just lots of life skills to learn in there that the it's called the musty one is almost half a million subscribers I've been watching for a few years. Very enjoyable. Check it out. youtube.com forward slash must be one I think musti - -83 -00:51:48,270 --> 00:51:49,140 -Scott Tolinski: musti - -84 -00:51:49,320 --> 00:52:06,540 -Wes Bos: musti musti. Last see shameless plugs, Wes bos.com, forward slash courses. Check it out. If you want to learn JavaScript, CSS, node, react, you name it, check it out. Use syntax for 10 bucks off any of my courses. - -85 -00:52:06,750 --> 00:52:51,030 -Scott Tolinski: Also head on over to level up tutorials.com and you can sign up for a year save some money and the course this month is on a CSS variables and creating a design system using just CSS. We talk a lot about a CSS core concepts like things like how to properly utilize and access the cascade as well as CSS specificity all along with CSS variables, getting you up into the ability to write a really really slick classless framework as well as components and elements for your entire application. So check it out, level up tutorials comm Ford slash Pro. Alright, thank - -86 -00:52:51,030 --> 00:52:57,030 -Wes Bos: you so much for tuning in. We will catch you on Monday face to face. - -87 -00:52:58,800 --> 00:53:08,550 -Scott Tolinski: Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax267.srt b/transcripts/Syntax267.srt deleted file mode 100644 index 149bc314f..000000000 --- a/transcripts/Syntax267.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Tolinksi ski. - -2 -00:00:25,950 --> 00:00:54,930 -Scott Tolinski: Oh, welcome to syntax. And this Monday tasty treat. We're gonna be talking all about durable links. It's turbo dime. Oh, that was a terrible URL. I usually do. I'm pretty good at that. It's turbo time, we're gonna be talking about turbo links and server generated HTML, plus some juice sprinkles in there. I love that you wrote jam sprinkles In this episode, title less. My name is Scott to Lynskey. I'm a full stack developer from Denver, Colorado, and with me as always this deep Wes Bos. - -3 -00:00:54,989 --> 00:00:56,900 -Wes Bos: Hey, everybody. Hey, - -4 -00:00:56,940 --> 00:01:40,410 -Scott Tolinski: Wes. Yeah, so this episode, we're gonna be talking all about turbolinks. At the time, we recorded this episode, the hate app comm has sort of just launched and it made a big splash with their usage of primarily server rendered HTML and usages of things like turbo links to really make sure that the experience feels fast and modern. So we're going to be talking all about turbo links, what they are, who uses them, what just a little bit about the ins and outs there. This episode is sponsored by Prismic, which is a really, really cool content management system that we talked about in our CMS roundup episode, as well as they have sponsored quite a bit of syntax. So Wes, with a little bit more about Prismic, you want to dive in? - -5 -00:01:40,530 --> 00:05:58,620 -Wes Bos: Yeah. So if you want a super quick up and running back end that allows you to create all of your different kinds of inputs that you want. Prismic is for you. So the way it works, you create a project, then you go ahead and create your data types. And then for each data type, maybe like a person, maybe a store, maybe a pizza. For each of those pieces of data, you can say, Well, what fields Do you like for each and there's all kinds of different fields, they have a really nice wiziwig field number input fields, plain text, input fields, image, upload fields, all of the all of the good ones, and you can sort of click together an entire back end, then, once you have all of your data, you can bring that in via the REST API or their graph qL API hooked up to Gatsby effortlessly. Like I bet you could get a Gatsby site up and running with Prismic in under half an hour. Or if you just clone their demo, it will be much less than that. But from scratch, I bet you could do it under half an hour. So if you have a project, check it out. prismic.io forward slash syntax. They also have a really funny landing page. So you want to check that out. Thanks so much to Prismic for sponsoring. Alright, let's talk about turbolinks. Like, what is it? So essentially, if you think about like how popular apps are made right now, a lot of them are built where you go to the page, that page will request a bunch of data via an API, whether it's a REST API, whether that's a graph, qL API, and then you'll use something like react or any other framework to render out all of that in the client, or you render it on the server, and then you pick it up on the front end, you render everything in your JavaScript library. So the idea with turbo links is that all of the HTML is generated on the server. And then when you need an entire page or a part of the page to be re rendered. You You still ping an API with JavaScript. But instead of it returning you JSON, which you then go ahead and template out. What it does is it just returns to you HTML from that API directly. And then you take the HTML and you dump it into the page. So a really good example of this is github.com is primarily built in turbolinks. So if you want to go from one page to another on GitHub, you'll often see you get that little bar over the top that sort of animates its way across as you're going from one page to another. And what is generally happening there is that it says, okay, someone wants to go to this page, let me first request that HTML, it comes back and then we replace the entire pages HTML. So rather than doing a full page reload, it just swaps out the HTML of the page, sort of behind the scenes, which is kind of cool. You can also use it just for parts of the website. So if you wanted to re render a comment on GitHub or something like that, you could ping the API, and it will bring back a list of that comment or all of the comments. And it won't return you an array of comments or return you the actual HTML, which you can just then stick directly into into the DOM with your JavaScript. So it's pretty cool and There's sort of like two pieces of JavaScript that are needed for it to to work. And then we'll talk about like, what about if you need to still need some JavaScript like this is not. This is not just websites that have no interaction in them and their full page reloads. But sometimes you still need like a widget or a gooey or something like that to pop up. So how do you do that? So the way that it works is that you you run this turbo links JavaScript, on your website, and then you have just regular anchor links from page to page. And then when instead of actually reloading the page, every time you click on a regular anchor link, it will prevent default, and then it behind the scenes, it will go ahead and fetch the HTML from that page, come back and swap it out right in place for you. And that gives you It gives you that same like fast refresh field that you get with a react application, but the benefit of it being rendered entirely on the server. - -6 -00:05:59,130 --> 00:06:05,010 -Scott Tolinski: It's funny, when I hear some of this, I think about p Jax, do you remember p Jax? Did you ever use that - -7 -00:06:05,010 --> 00:06:07,320 -Wes Bos: exact same thing? Yeah. - -8 -00:06:07,409 --> 00:06:18,810 -Scott Tolinski: So P Jax. I don't remember the technical ways of doing this. But I used it even inside of Drupal, even though PG x i think was a Ruby thing. First and foremost, wasn't it? So it was this? - -9 -00:06:18,810 --> 00:06:19,500 -Wes Bos: I think so. - -10 -00:06:19,530 --> 00:07:01,770 -Scott Tolinski: Yeah, I believe PG x came out of rails. I'm not positive about that. But it basically allowed you to get the client side style routing, where a section of your site was reloading without the let's say, navigation of the site. So like part of your site would stay where it is. And the other parts would be swapped out via JavaScript. But it was very easy to do and very much so that you just like basically included some links and had some specific nav be the PG x links, and it just worked. That's all I remember, specifically, it was jQuery based. I think he was jQuery based. I'm not positive about that. So it's funny, I'm working off a memory here, because this was 2011. That I was using p jack. So it was quite a bit A while ago. - -11 -00:07:01,770 --> 00:08:02,040 -Wes Bos: Yeah, it's kind of interesting. Like if you go to, like Basecamp was the sort of the people that made this popular, and they are the developers behind turbolinks, the JavaScript library. And then you obviously have to still have like a server side portion of that as well. It's, it's there's adapters, for node and for most likely for rails, because that's what base camp uses. But if you just go in the dev tools and click a page, you'll see that request and then in you can look in the response tab of that request. And instead of seeing raw JSON, you see HTML, which is kind of cool. So the question is like, Okay, first of all, maybe like, like, what's the benefit to that? I guess the benefit to that is that you don't ship as much JavaScript to the client. And also, there's no rendering delay, or you fetch the data and then render it out on the thing. And that's not really been an issue of mine in the past. But certainly, it has been for a lot of people, because there's a reason this is a thing, right? - -12 -00:08:02,250 --> 00:08:14,400 -Scott Tolinski: Yeah, you and I are working with much different amounts and types of data, then quite a bit of other people who are working with either larger amounts of data, or a larger amounts of people utilizing that data that that could Yeah, that's a little bit different. - -13 -00:08:14,610 --> 00:08:45,750 -Wes Bos: Yeah. Like, I'm just looking@hey.com. And if you want to, if you want to archive and an email or reply later, or PIN, something, all of that still happens in the browser, like each of these actions is not an entire different page. So like, that's JavaScript, right? And if that's the case, then you have a couple options there because I don't think you can use that's a good question. Actually, I don't know if you can use like a react for something like this where you just want parts of it to be dynamic. Yeah, - -14 -00:08:45,770 --> 00:09:08,580 -Scott Tolinski: you can. Absolutely, yeah. Yeah. It's funny, because when view teaches view, they say like, oh, here just use view for this little tiny bit. But when react teaches react, or like, you gotta use create react app. And I know that's not like how they're intending it to be, like taught but like, definitely you can you just basically you just pick a div, and you say, hey, render my react components into this div, - -15 -00:09:08,880 --> 00:10:19,520 -Wes Bos: and, you know, multiple react routes on a single page. Yeah, you can have as many as you want. Now, yeah. Okay, this all makes sense. But more popular for this is, there's sort of two big ones in the space, there's stimulus. And another big one is called Alpine j. s, where they refer to them as JavaScript sprinkles, where you can just add some very light JavaScript at it very much like we did with jQuery, you would just render the whole thing in WordPress or whatever. And then you'd add a little bit of JavaScript on top when that page is loaded. And I refer to those as JavaScript sprinkles and a lot of other people do as well. So stimulus was sort of the first one Alpine j. s is gaining a lot of popular seems pretty cool and have very much I view Angular one approach, where you just write your HTML in a certain way. Way and the JavaScript library will just pick it up from there and allow you to do things like looping in handling clicks, and showing and hiding and those sort of basic stuff that you might want to do in the browser. But it's all done in your HTML templating language, which is pretty nifty. - -16 -00:10:19,830 --> 00:10:29,900 -Scott Tolinski: Yeah, very nifty. Man. I love the term sprinkles here, thinking about how can bake some sprinkles into my cake and get a funfetti cake of web dev? - -17 -00:10:30,240 --> 00:11:43,770 -Wes Bos: Yeah, this is not something I've I've used myself. But if that we just do like a little show explainer on what it is, because you're gonna hear it thrown around quite a bit. I've seen back when react suspense was supposed to come out. Sorry, not when it's supposed to come out when they first demoed it, showing a demo where react was not running on the client, it was just running on the server. And then there was just a thin layer of JavaScript running on the client, and it would fetch back to the server, the different pieces that needed to be re rendered. And I'm wondering, because react is not, I have no inside information. But I wonder if react is looking at this as as an option because they haven't released suspense. They're looking at making the React server like a first class citizen server side render. And I wonder if they're looking at like, can we build something like this? Where instead of doing all of the rendering and hard stuff on the client, can we just fetch HTML diffs and then dump them into their corresponding pieces on the website or the entire page? That's why I wanted to do this, because I think that it's something that might become more popular in the next couple years. - -18 -00:11:43,770 --> 00:13:33,150 -Scott Tolinski: Totally. I wonder about this, too. I mean, I'm do I've been doing server side rendering with react for a very long time now? Then initial experience isn't really isn't really, I don't want to say it's not terrible, because it it's not terrible. I know. But that sounds like bad to say, I don't think it is terrible. Yeah. It creates the HTML, it creates it with all of my data, and it just spits it out on the page. And then initial page is, in fact, like, fully server side rendered, hey, that's possible. The next step becomes like, how can we bridge the gap between none the next client side bit when you click a link or you do something? What's that next bit look like in terms of how does react react to those changes? Yeah, very fascinating. To me, it's a fascinating world to explore. I'm gonna check out some of the stuff in it's funny, we didn't mention in this episode, that turbolinks is not new. It's been around for since 2015. That's it, I know, it's probably gone through several additions. In it, actually, they made it really easy to add to a Rails project. Because I used to do rails work myself. And I remember, when turbo links were, like, just coming out, it's like a thing. So it's a fascinating world. And I think we're, we're bound to see a big shake up this this next generation of frameworks whether or not react changes significantly or doesn't change at all, or goes in some of these directions, I think it's going to be a very, very interesting time for us as developers, and I'm sure there will be, you know, I don't think front end framework, people are just going to sit around and watch the the web go to, you know, primarily server rendered web and do nothing, we're gonna see evolutions, we're gonna see growth, we're gonna see advancement, I mean, heck, I just think about spelt, and all of the cool things that spelt does in some of these regards. And, wow, I'm excited for the future of web dev. So mammoth, and that's my attitude about this. - -19 -00:13:33,150 --> 00:14:20,970 -Wes Bos: No, it's another kind of cool thing about this. And next yas is kind of doing this already. And I wonder if they're, they're looking towards this as well, where they have like these ecstatically generated on demand pages. So it's all it's generated on the server and and then it's static, and then it will serve it up the next time as static. Yeah. But what's cool about that is you could like put raw SQL queries in a react hook, and then just ship HTML to the thing. And I realized we're kind of reinventing the wheel because that's what what Bill has been for all these years. But right, then you might not even need to worry about like having a publicly facing graph qL API, because yeah, you don't need to query it from the client. It's just done on the same server. - -20 -00:14:21,000 --> 00:14:36,270 -Scott Tolinski: And we only query from our API on the client on page change. I mean, on that initial page render, that they just come in, represent user data, whatever, that's all come in server side rendered. So the only time we're making those changes in that client side update. So yeah, so there's - -21 -00:14:36,270 --> 00:14:48,510 -Wes Bos: some here. No, we don't totally know what it is. But I thought we would do the show just to sort of keep you on it. Knowing that this is maybe something that will become popular in the next little bit are already as popular. That's about it. - -22 -00:14:48,540 --> 00:15:04,290 -Scott Tolinski: Yeah. Cool. Well, I had a great time pontificating some of this stuff with you. I'm really interested to hear and maybe check out more and again, see where all this goes didn't and I know it seems like the React team is on it. Or at least there's something brewing there. So, who knows extended for the future here. - -23 -00:15:04,920 --> 00:15:08,850 -Wes Bos: Beautiful. Alright, thanks for tuning in. We'll catch you on Wednesday at eight. - -24 -00:15:10,740 --> 00:15:20,490 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax268.srt b/transcripts/Syntax268.srt deleted file mode 100644 index 1fe2bac2c..000000000 --- a/transcripts/Syntax268.srt +++ /dev/null @@ -1,364 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,320 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bos. - -2 -00:00:10,320 --> 00:00:10,500 -Wes Bos: Welcome - -3 -00:00:10,560 --> 00:00:57,570 -to syntax. This is the podcast with the tastiest web development treats out there today we got a potluck for you. potluck is episode where you submit the questions, Scott and I will bring the answers. If you have a question you'd like to bring to the Pollak please submit it. Go to syntax FM, there's a button in the top right hand corner you can submit any question or show suggestion or anything that you want in there. And that helps us out and I love doing these episodes. Today we are sponsored by two awesome companies. First one is Log Rocket, which is all of your logging and session replay for your JavaScript applications. And the next one is Sentry which does your error and exception tracking for all of your applications? front end and back end. We'll talk about them partway through the episode with me as always is Mr. Scott to Lynskey. How you doing today, Scott? - -4 -00:00:57,899 --> 00:01:07,260 -Scott Tolinski: Hey there. Hey there. Hey, they're doing good. It's funny. I just listened to the episode where I was talking about jailbreaking my phone. I and jailbroke my phone last night, - -5 -00:01:07,289 --> 00:01:08,340 -Unknown: so Oh, - -6 -00:01:08,399 --> 00:01:16,260 -Scott Tolinski: how come? There was just the apple developer conference. And I really wanted those widgets. I got to have those widgets, man, I got to have phones. - -7 -00:01:16,289 --> 00:01:17,310 -Wes Bos: iOS 14. - -8 -00:01:17,310 --> 00:01:21,120 -Scott Tolinski: I was 14. Yeah, man. So the developers preview baby - -9 -00:01:21,539 --> 00:01:29,220 -Wes Bos: looks really cool. I'm excited to finally have which it's so funny. Like all of this stuff they announced was like, Android had that for like all of it. Here's - -10 -00:01:29,220 --> 00:01:44,640 -Scott Tolinski: all of the all of the features, the global search, and I bet like just about all the features were but I'm so here for it. I'm very happy to have them. And especially I just found Was it inputs.com is that the site input mag.com. They just did a thing. - -11 -00:01:44,909 --> 00:01:46,080 -I've never seen this site. By the way, this - -12 -00:01:46,080 --> 00:01:55,290 -is a really beautiful site. If you've never seen input, mag com, this is a really good iteration of brutalist design variable width - -13 -00:01:55,290 --> 00:01:56,400 -Wes Bos: fonts here. - -14 -00:01:56,459 --> 00:02:24,030 -Scott Tolinski: Yeah, they do a lot of cool stuff. They they revealed that there was a really interesting new feature buried in the accessibility settings to do like, you could assign the different tap sequences to do different things. So you could do like tap tap swipe, or something to initiate a Google Assistant query or something. There's like a whole bunch of interesting things about it, but they're under accessibility, and nobody else was talking about them yet. So Oh, I guess I'm going on. Oh, that's - -15 -00:02:24,030 --> 00:02:31,410 -Wes Bos: cool. Yeah. Awesome. Well, let's jump into the potluck. Now. You want to grab the first - -16 -00:02:31,410 --> 00:02:42,060 -Scott Tolinski: question. Yes. First question is from anonymous. Hi there. Love the show. I can honestly say the show has helped me become a better and more knowledgeable developer. So thank you. Thank you. - -17 -00:02:42,120 --> 00:02:42,870 -Wes Bos: You're welcome. Hi, I'm - -18 -00:02:42,870 --> 00:03:10,500 -Scott Tolinski: a junior Dev. Coming up on two years. At my current agency. I have been primarily on the front end using Angular and a templating. With handlebars and HTML and CSS. I even asked if I would be interested in moving more out to the back end to focus on node j. s. I would love to become a full stack so I'm all for it. So I'm wondering outside of creating API's, what else should I learn to do and back end? West? I think you got this one mister. No, j s. Yeah. - -19 -00:03:10,650 --> 00:03:12,720 -Wes Bos: Mr. back. Yeah. And they call me but - -20 -00:03:13,050 --> 00:03:14,130 -Unknown: they do call you that. - -21 -00:03:14,130 --> 00:03:17,490 -Scott Tolinski: I think I have Mr. Back Ed, I would have started that's a good nickname to add to the list. - -22 -00:03:17,520 --> 00:03:30,449 -Wes Bos: That's a joke that I have with my wife is anytime there's like something funny. I say that's what that was my nickname in high school. Like, anytime, anytime. Hilarious. I say that. It's it's a it's a sure laugh for my wife anyway. - -23 -00:03:30,449 --> 00:03:32,100 -Scott Tolinski: Good laugh? That's a good laugh. - -24 -00:03:32,130 --> 00:05:26,880 -Wes Bos: Yeah, that's what they call me in high school. Try that. Try that on your significant other and see what they think. So question is like, I want to become full stack. But like other than creating API's, what else should I learn on back end. So like, creating API's is certainly a large portion of it. And under under all of that creating an API, I think there's a lot more you can learn like authentication, doing JW, t, o auth. All of that. That's a whole can of worms right there. And database calls. And data aggregation is another big one. So if you want to be able to, like, even in my no jazz course, it was half complicated to get the average review of all of the reviews of a specific store like that's, that's not trivial. Because if you have 100,000 reviews on a store, you can't just query them all. And then for loop over over them and add them up, you have to do that as an aggregation on your database. So it's nice and fast. server side templating is something to learn. So I know a lot of people think that like server side, templating is dead, but we've got a hasty treat coming up. Or maybe it was the last one, depending on the order that we're recording this just about, like server side rendering is back. And it's more popular than ever. And there's some really cool apps that have been built lately that are fast as heck, email templating. That's a whole whole thing. sending email. Sending transactional email is very important. I say almost every application has Sort of sending email, cron jobs, sending stuff every x hours doing something when something happens web hooks, that's another one. Oh, yeah, well, there's a huge list, I just just rattle off that came off the top of my head. And I think that all of those are things that you could you could practice and get better at being a back end developer or like all of this stuff also applies if you're a serverless developer, which I would still consider a back end developer. Yeah, - -25 -00:05:26,880 --> 00:06:06,390 -Scott Tolinski: the only thing I would add onto here, because I think you did a great job with this list was just thinking about like, security and not like, not like securing your server. But like, when a query comes in, on the client side, we know not to trust anything, right? We know not to trust anything coming from the client, right? We should never just blindly trust that information coming from the client. So learning how to properly identify that the person who is intending to do the operation has the access and ability to do that operation. Because again, that that's sort of your last line of defense before either inserting things into the database or running code on the server. So that's the only thing I would add to it. - -26 -00:06:07,230 --> 00:06:21,090 -Wes Bos: Awesome. Next question we have here is from Cletus Diaz. Hi, guys. I love the podcast. I work as a webmaster and would like to be a front end developer someday. That's a good question like what's a webmaster? Scott, what do you think? What do you think a webmaster is? - -27 -00:06:21,420 --> 00:06:47,820 -Scott Tolinski: Currently? I'm somebody who potentially is just like watching over a site for a business. Like we have a business we have a company. Here's our site, I'm the one who makes sure the site stays online. I'm the one who makes sure the site is updated, or whatever when it needs to be maybe you're not working. Yeah, multiple projects. It's like you have a project that you're just managing is that is that that's what comes to mind for me. I would - -28 -00:06:47,820 --> 00:06:58,170 -Wes Bos: think that to like like content, new pages, contact forms, managing a CMS, things like that, like maybe not necessarily building the thing from scratch. But - -29 -00:06:58,560 --> 00:07:12,210 -Scott Tolinski: yeah, kind of just hurting it throughout the day. Even if it's like a just like a straight up codebase system like HTML pages, right? Oh, we need to have a new page, right? You got to go in, you got to copy a new HTML page, you got to change the in the code, those kind of things? Yeah, - -30 -00:07:12,600 --> 00:08:21,600 -Wes Bos: I think that's probably a lot more common than we think. So that's kind of interesting. Next is question I currently I'm working on a myrn stack app. So myrn is MongoDB. Express react. And what's the end node? node? Obviously, there you go, stack app in order to enhance my own skills. But I have problem focusing, I tend to procrastinate a lot. How do you tackle distractions to get things done, I would appreciate some tips. So Oh, man, at least for me, in my life, if I'm procrastinating on on something like that, it's usually because I'm anxious that I don't know how, how to do something, how to tackle something, if I look at anything in my life, whether it's just like, projects that I haven't finished, or whatever, it's because I haven't, I'm a little bit anxious that I don't entirely know what to do as my next step. And for me, the way sort of around that is to break things up into smaller tasks. And by breaking it up into smaller task, it's a little bit easier to sort of take a bite of it, and research what you need to do to get that one thing done. So that's what I would say to do there. - -31 -00:08:21,630 --> 00:12:38,880 -Scott Tolinski: Yeah, I would agree. I so one of the things that I like to do is to find the source of your distractions, and then just absolutely remove them. I don't know if I have the self control to really look. Okay, I got I got a computer screen, I got a big old monitor, I got a phone, you know, all these gadgets and gizmos and widgets and all these things, right? I just I just want to look at it. Right? Got it. I got a Twitter on the eighth device today. So for me, it's really important to assist myself in ways that I'm unable to do it myself by with the use of software, I use an app literally called focus for Mac. There's a bunch of apps and tools, I don't know exactly which on what all the different platforms at this point, but what you're looking for is something that blocks certain sites for you. And oftentimes, like, yes, there are ways around these applications. But if I pop open a tab that like I start typing t w, and then I hit enter and then it takes me to Twitter and then it greets me with a like a quote message saying you should be doing work and then I Oh, okay. And it what it does is it makes me acutely aware of just how compulsive checking Twitter can be for me or checking Reddit, or even going to certain forums or, or different things. It reveals to me more than anything, just how compulsive the behavior is. And not only I'm doing it compulsively because I like you said, I'm trying to be distracted. I'm not trying to focus. So once you put all those blockers in, I highly recommend that app focus for Mac. I don't know what the other app People always ask me about different apps, but there's a ton of apps in this in this category that you can probably look into and install. You know, I think that's the way to go from me if you can't do it yourself, if you have a hard time focusing, let the robots to help you focus for you because you know, that will help a lot. Also, it really helps to put yourself in a position where you're capable of focusing You know, it, I know, it's it's not necessarily great advice right now, considering the current, you know, global pandemic and stuff like that. But for me always going to a coffee shop or someplace like that was always like, a really good solution for when I had trouble really getting in, in the zone because you just feel bad if you're at a coffee shop and you're you're browsing the internet or something. So what use all these tools granted coffee shop, not a great one right now, maybe you can go to a park or something and tether your phone or I don't know, either way, put yourself in a position to focus, get your everything in order, but you're focusing apps on and then just go to town. Good. I like it. Yeah. Next question here is from Jonathan Jonathan, this is going to be a fun question roll up or Webpack Webpack. Five still doesn't have es six module output. Oh, it doesn't, as described by Philip Walton here, here's an article he links to a blog post. So instead of upgrading to Webpack, five, this might be a good time to think about switching to roll up or parcel. So my thoughts here is that at the end of the day, use the tool that you're most effective with. But let me tell you, I have not modified a Webpack config in a very long time. I think the only times that I've used Webpack recently are with a Gatsby site or a next j s site. Everything else my own personal site is on the meteor my side projects also in Meteor. So I use meteors build tool, which replaces all of that stuff. In terms of using parcel or roll up, I have been using roll up for a lot of stuff lately, not because of any specific features, but mostly because roll up is in fact, you know, the main build tool in sort of this felt community. And that's largely because rich Harris, who created felt seems like he created a roll up as well. And so you'll see roll up being used quite a bit I also have been using I forget what it is I've been using some sort of a package library to create other packages and that uses roll up as well. Oh, ts dx t s dx by Jared Palmer is this TypeScript zero config. It's like a starter for creating packages. Specifically, I use it for creating react packages that uses roll up as well. So I'm just I'm just very used to roll up at this point. I don't know what it is. I haven't seen a web pack in a little while. - -32 -00:12:39,090 --> 00:12:51,390 -Wes Bos: Yeah, me neither. It's been well over a year since I wrote my own web pack. I always reach for parcel. It's so easy to get up and running. parcel two has been cooking for a while now. And I bet it'll be out in the next six months or so. - -33 -00:12:51,419 --> 00:12:52,380 -Scott Tolinski: Yeah, just hot beta. - -34 -00:12:52,560 --> 00:13:43,289 -Wes Bos: Oh, did you awesome. That's that's really good. I love the ease of use and parcel. Just up and running. You can kind of just has like a dev server built in as well and handles all of your images. It's it's pretty, pretty nifty. I use it in a couple of my courses. It's kind of interesting. You say like that. Webpack doesn't support ESX module output. That's kind of cool. Because like, I never thought about that. Like, I'm not shipping ESX modules to any browser. Yeah, I'm still always kicking it out to just regular JavaScript bundles and whatnot. But yeah, not to say like, throw any shade on web pack. Web pack is super. Yeah, yeah. Football is just that everything that uses web pack for me. Like I think Gatsby, I think next. They're just under the hood, and people much smarter than I are able to do nothing for me. And then I just use the simple tool on top of it. - -35 -00:13:43,470 --> 00:13:44,610 -Scott Tolinski: Yeah, exactly. - -36 -00:13:44,909 --> 00:14:46,500 -Wes Bos: Next question we have here is from Chico, I have been learning web development, HTML, CSS, and JavaScript. And I'm at a place where I can build simple websites for small businesses. But I feel like I'm a beginner. And I'm wondering if you have any recommendations on courses to get a more immediate, intermediate or advanced level? Yeah, I obviously, as someone who sells courses, I'm here to tell you, you can go grab my beginner JavaScript course that will bring you up to intermediate level. Any of the courses I have any of the courses God have as well. But at a certain point, you got to stop looking for that golden blog post, or course or YouTube video or person to follow on Instagram. And you just need to keep grinding the way you get from beginner to intermediate to advanced is not buy a course it's by literally just putting in the work and building stuff. So just start building 100,000 projects. And over the course of building those things, you will become intermediate and advance. - -37 -00:14:46,830 --> 00:16:16,890 -Scott Tolinski: Yeah, get those reps in. Another tip I might have is to find like, find things that are interesting to you. I'm not talking about like hobbies or sypro. I'm talking about like things in code, find aspects of code that are very interesting to you, ie if you want to take a little short detour to look at like, like Canvas stuff, maybe you're interested in Canvas, or maybe you're interested in web animations, or maybe you're interested, and something really mundane like regex, right, but take that detour time to really deep dive into something, and just let your curiosity drive you because oftentimes, when we're really motivated to really dive into something, we learn a lot better. So if you're feeling like this beginner and you want to get more intermediate, find a topic that it seems interesting on the surface, and when you could just dive into maybe you want to learn how webcam works or something like that neat. What is the web? For some reason? I'm blanking on the web technology, I can only think of like web RTC, a user medium. Yeah, good. Get user media. exactly what I was thinking of cool. Yeah. So just like your your curiosity pull you in different directions. And that's going to lead you to create different projects, and those different projects will lead you to learn more things. Like he said, Get those reps in. Oh my god, this is the funniest thing ever. Whenever Wes wants to do a transition, he always typed in all caps in the notion thing. And he just wrote speaking of projects, how about replaying your session? I don't know if that sounds better in your head west. It doesn't sound great. I love Oh, - -38 -00:16:16,890 --> 00:16:19,980 -Wes Bos: how am I so bad at transitions to ads? And you're - -39 -00:16:20,250 --> 00:20:55,380 -Scott Tolinski: so good? I don't know. So okay, we were talking about like, let your your you know, your curiosity drive you and you may hit some snags along the way. But when you hit those snags, you're going to have a tool, like Log Rocket to replay those sessions for you and allow you to see what exactly is happening when your users are on your site. I don't know if that necessarily works. But it could work. Let's talk about Log Rocket here. Log Rocket is the service that allows you to see what happens when something goes wrong on your site. Let me tell you, it plays nicely with another one of our sponsors that we're going to be talking about later on in this episode, in this really, really cool service. What it does is it basically you just drop, I think it's just a simple JavaScript file in your site. And all of a sudden, you connect with a config, you get this really neat session replay. If this video log of what happened when somebody clicked something or did something in your site broke, their headline is stop guessing why bugs happen. And that's really the best way to describe this service. Because it's no longer looking at error logs. Granted, they do give you error logs, it's no longer just looking at these big, you know, exceptions. What you're actually watching is a video of the the crime happened and action so you can go in and solve it. Like the good little Yes, it is it is a crime. Oftentimes, when the user somehow managed to click on the only thing that they weren't supposed to click on, and it broke everything because that's just how users are right? So what you're gonna want to do is head to Log rocket.com, forward slash syntax, and you're going to get 14 days for free. So give it a try and check out Log Rocket at Log rocket.com. forward slash cindex. Thank you so much to Log Rocket for sponsoring. Alright, next question is from Jonathan. Why would you choose a style components over other ways of writing CSS? Okay, I'm working on a CSS course right now. So I have my my brains definitely in the CSS territory, right? I'm thinking a lot about CSS and what things are most efficient and whatever. And I use CSS custom properties are also known as CSS variables. for just about everything nowadays. I'm just very into them, right? They do so much for me. And I began thinking like, Alright, what is styled components giving me here that I cannot get with CSS variables, what one is like, what's the difference between having it and not and then become acutely aware of this, because I have a project started that's on Meteor and spelt, and a level of tutorials, which is on Meteor and react. And obviously, spell doesn't have styled components. Granted, you can do CSS and js, but I thought this would be a nice opportunity to see just how much I didn't need styled components, or just how much I needed it. And I ran into a couple of use cases where I found styled components to really help me along, for those of you don't know style components is basically creating a like almost like a custom element that is just CSS really, right, instead of having a div, you would have a card element in that card element would have CSS applied to it. And instead of there being a class of card on a div, you could just have a card, right? The cool thing about styled components, though, is that because they're a component, you can pass the data into it. And it makes it so that you can have that CSS work dynamically based on JavaScript and a much easier way than having to write all that JavaScript by hand yourself. It's almost like you're just passing in some values and it just takes care of it. So the things that I found to be very difficult it a system that wasn't based in a CSS and j s, put it in something like a grid component that has like dynamic grid columns. My grid component in level up tutorials, accepts an array of numbers, and it's how many columns that grid should have at each breakpoint. So this is like really interesting. So if my grid component has a columns property of an array with one, two, and three, at the smallest breakpoint, it will be one column at the medium breakpoint, there'll be two columns. And at the large breakpoint, it will be three columns. That kind of thing is difficult to do in a dynamic way in without something like styled components, because there's no way to, to dynamically run a loop, right? That's the big things that I'm missing still in CSS beyond like things like nesting and whatever, there's no way to do things like a loop. And in that really comes in handy in styled components, especially when the loop is generated dynamically. So that's why I like styled components. Again. In addition, I just kind of like how, how I'm looking at a card and not a div with a class of card. Despite how minor of an addition that is, - -40 -00:20:55,680 --> 00:22:15,150 -Wes Bos: you know, it's one thing I ran into just a couple days ago, I was working on my Gatsby course. And we also had a grid component where the grid component had like a default of two columns, and a default gap of 20 pX and a couple other defaults. So I had a grid on the homepage, where I had like two things, I had like a list of pizzas and a list of people. And I wanted to put those side by side. And I had changed the columns. And the I passed in some variable CSS variables, not not style components, but I passed in just regular CSS variables. And then inside of each of those lists of pizzas and a list of people that also was a grid component. So I had nested grid components. And I was running into this issue where the lower level one and I wanted the defaults to kick in. But the higher one I wanted to pass in my own. And I was like, What is going on? I was like, oh, even though I'm passing in the CSS variable at a high level, it's not scoped just to that grid, though. And any other any other child element that uses the same CSS variable will then inherit that, and then I got into this weird situation, or I couldn't, I couldn't really do it. Because I couldn't really use the defaults. I had to explicitly pass them in each time because they're, they're not scoped to that component. They go all the way down. - -41 -00:22:15,180 --> 00:22:54,630 -Scott Tolinski: Yeah, the scoping. I'm working on a course that all it is right now for this month. Well, by the time you're hearing it, so we'll already be out. It's on using CSS variables to do design systems. Like that's pretty much the scope of the course. And we spent a long time like two whole videos on specificity as well as scoping for variables. Because it is, it's it's one of those things that when you first start to get into it, you don't necessarily understand all the caveats here and there of using them. So they're definitely a powerful tool. And definitely just another another way that you can foot gun yourself with specificity and CSS with the cascade and all that stuff. - -42 -00:22:55,260 --> 00:23:58,740 -Wes Bos: Next question we have here is from Mandy, what are your thoughts on companies that make senior developer roles require leadership responsibility? A great technical person does not always make a great leader or vice versa? that's a that's a great question. I think if you are going to be a senior leadership, I think that's kind of in the in the name that you will likely have people under you that have to report to you and have to ask you questions and things like that. And certainly, I'm sure a lot of people on this podcast can say, yeah, I've run into my fair share of senior developers who are hard to talk to and are, are brash, and all that stuff. So I definitely think that that is is key, just because anywhere in your web development career, having good interpersonal communication, people skills is super key. So I think having them as a senior developer is definitely important. So it sucks if you just want to be a senior developer Dev and just hack away all day, but unfortunately, that's how teams work. - -43 -00:23:59,130 --> 00:24:00,150 -Unknown: Yeah, I think - -44 -00:24:00,150 --> 00:27:21,870 -Scott Tolinski: about this, like, there's difference to me between like a tech manager and a senior developer, a senior developer, to me is somebody who's making like, project based code. They're making like a lot of like, I okay, this is what the project should be. This is what are, this is what the team should be. And those to me are all like very leadership, ask roles. Like to me, being a senior developer is not just about being good at code. Because like, yes, you can be good at code, but that that to me would just like put you into like a territory of being like a just a straight up developer. You're not like junior year, you're, you know, like you're a developer, web developer at web applications developer or whatever. But like that whole, that whole level of senior developer or anything like that, to me, says that you should probably have some leadership skills and believe it or not, I don't know if people know this, but leadership skills are not just they don't just exist, you know, for some people, sure, some people Born leaders, that's a thing. But I wouldn't necessarily say that too many people here are born leaders in this world. And a largely the people who do good at these roles and the people who become better. Senior developers are the ones who take the time to learn about motivation are the ones who take the time to learn about picking the right tech for projects based on team's qualities rather than just your own. Those those are the qualities that make a senior developer good is the the additional qualities beyond just being a excellent Dev, right? Because, you know, a lot of times senior developers are the ones who get put in meetings, and you get to talk talk about these code changes and talk about these things. And so a lot of times, that's a thing, too. I mean, there's a whole host of developers that I worked with in my life that if I was their boss, which I wasn't, I wouldn't, I would not hire them to be senior developers. Because I don't want I don't want some of these people in meetings, I can tell you very straight up, there are developers that I've worked with before, who I would just not anywhere, I would want nowhere near those people near our client, not because they're not a good developer, because they can't talk about their code. They can't be civil to clients in the right way. They're better as developers. And to me, that doesn't, that's not necessarily what makes a good senior developer. But who knows, every every, these are all just job titles. And job titles, as we know, are largely meaningless and different between organizations. So I would personally say that you should learn these skills if you get put in that position. Or if you want to be in that position, or Yeah, just be aware of that. That's a thing, right? That's an actual thing. All right. Next question is from David comma, London. And I'm not sure if David's name is David London, or if David is living in London, or if he's visiting London and decided to split the cup, but it's David London. Hey, David. David says, I'm often knocked out at planning out code from the start, I find it easier to start coding if a few lines, run it and see where I'm at and carry on. This technique doesn't work when I need to wait for deploy to finish so I can view the real results, increases death time. Do you have any advice on what I can do better is I tried doing TypeScript once and I was a horrible experience. Because I tried, instead of debugging my code to try to get it working. I spent most of my time trying to fix TypeScript. I think that's a common common thing that people run into. I think this may have to do with my poor code planning. No. - -45 -00:27:21,870 --> 00:27:22,530 -Okay. - -46 -00:27:22,530 --> 00:30:07,740 -Let me tell you this. I run TypeScript myself. I am a good code planner. But I'm not always I'm not always choosing to develop like that. Sometimes I choose to develop, like, wherever the wind may takes me, you know, I'm a leaf in the wind just did that. That's how I develop sometimes. And TypeScript. I don't think it's in the way of that the problem is, is that TypeScript does you you do run into a problem occasionally of just trying to get things working. And then by the time you do, you're all exhausted, or maybe you never do and you'd never get there. So it might be better to pick up TypeScript on a project that's working from the start and start with it with TypeScript. Just so you can, you know, start at a baseline. But okay, let's get into the actual question, which is, basically, what can David do to improve the time that he has planning his code out? Now, here's what I like to do. Your code is largely going to be if you think about it, it's you know, it's a procedure, it's a thing that does a thing, right. And we we often think about our code, in terms of the code itself. It's a function it's, it's a react component. And now what I want you to do, is I want you to get your comment hands out, and do you know, the command forward slash new a comment and write what the component does? All right, this component plays a video. Okay, well, okay, so that's step one. Now let's break that down a little bit more with some more comments, we would say, Alright, well, this component, it needs a video element that the video comes in from this prop. And this does this, when I click the play button, it needs to do this. When I click the Stop button, it needs to do this. When it's paused. Maybe it needs to do this when the video is over. It needs to do this, maybe it goes to the next video, if it's an autoplay thing. Write out everything this needs to do. But do so in a like a tree an outline, right? Have you ever written a paper for school or something like that, you write the outline, and you fill it in, and then you fill it in, and then you write your paragraphs. That's how I write code when I really, really, really want to make sure it's organized. I write a layout for the code in comments saying explicitly in English, what it needs to do needs to do this needs to do this needs to do this. And I'm not thinking about like it's a react component. I'm thinking like, on and these two load, next video, okay, right there. That's just grabbing basically one function, and that's describing the higher levels of this and you can use this structure that you're writing in comments, to then write your code within the comments. And guess what, if you do that, your code will be commented without you having to write comments after the fact. A double whammy here. I use this technique all the time. So I write out my whole organization, my whole structure, everything the code needs to do in comments. And then I fill in the code afterwards to get it to work. - -47 -00:30:08,070 --> 00:31:39,480 -Wes Bos: Yeah, I do the same. It's called I call it pseudo code, or I just do it in almost all of my tutorials as well. We write down what needs to happen, and comments, and then fill in the blanks from there. I think also, a problem that is coming from this question is, this technique doesn't work when I need to deploy wait for a deployment. Or I can view the result. So like, that means that he probably has a not like, there's no local developer experience. It certainly I've worked on projects like this in the past where you, you make a change, you have to deploy the thing and sit on your hands for three minutes, and then check if it worked. And then if it doesn't work, you have to do it again. And that feedback cycle is so frustrating, because he basically, he went from three seconds to just refresh and see if it worked down up to three minutes, 10 minutes, sometimes even 20 minutes, and you can't get any work done that way. So it sounds like you need to figure out how to replicate your production environment locally, so that when you test something, you can just see the results almost immediately. And there might be some roadblocks, there might be some really long compile times. And there's a lot of people out there that are still using, like Ruby, SAS, or you make a change to some CSS and you have to wait like 15 seconds to see if it changed. And that's that's extremely frustrating. So try to find out where is that time happening? And how can I make it quicker as well as local? And that will free you up to have a much faster feedback cycle. - -48 -00:31:39,510 --> 00:31:41,970 -Scott Tolinski: Yeah, fast feedback cycle. Very important. - -49 -00:31:42,450 --> 00:34:13,680 -Wes Bos: Next question we have here is from john, he's gotten less big fan, longtime listener, I have a very random question. For context. I'm a Mac user and a Linux OS user myself. However, recently, while building our application, I noticed that Windows does extremely weird things with the font size, as we have a pretty decent Windows user base. This is something my partner and I wanted to solve whoever I'm unsure about the best way to handle it, it seems entirely different from user to user on Windows. Example, a company employee on an older desktop font size is set by default 250%. Well, at different employees, newer 4k display is set to 200%. seems weird. How in the world? Do we as developers account for something that seems so inconsistent? We have tried a vertical media queries that are much more or less of a kick to them for tablet mode? That's kind of annoying. Obviously, this is less optimal? So this is a great question. Because you kind of have to think about not only screen size, but like resolution, because somebody who has a 32 inch 1080 p monitor will have things much bigger than someone who has a 32 inch 4k monitor. And then even then some people who run these monitors run the fonts totally small and some of them run a much bigger. Unfortunately, that is I don't think that this is a problem with your code. I think that this is a problem with your users having their their font scaled up and down. Yes, I don't, I don't think that this is actually an issue with your code. Because this is you, if you use specific font sizes for specific things, they should be all that size in relation to the rest of the website. So I did run into this as a like, when I did client work, you would get the you get people being like, Hey, can you make this bigger or smaller, because their specific computer screen was big or small. But it's up to you to do sort of a good baseline that is visible to everybody. And if the user is finding that the font size is too small or too big, then hopefully the rest of the internet for them is is too big or too small. And they need to account for that on their end. And if it's not, you're probably doing things too big or too small to start with. So I know that's not much of a good answer, but it's probably not you but it's the user. Yeah. - -50 -00:34:13,680 --> 00:35:03,170 -Scott Tolinski: And I'm glad you caught that. Because when I edit this question, that's exactly where my mind when when I read this question was, this sounds to me, like somebody has their browser configured a certain way. And that's why there's this huge discrepancy. And you know, what you adjust and account for that kind of stuff. That's the beauty of working on the web is that there's just too many variables and little things that are going to just exist like that, that there's only so much you can do there. So you can just provide the best experience possible to as most people as possible and if somebody wants to size their font up and is angry about it, tell them to size their font down. And you know, obviously, you can't do that to all of your users. But that is certainly a thing. That's exactly Where my mind went when I read this. So I'm glad you caught on to that - -51 -00:35:03,210 --> 00:35:16,170 -Wes Bos: if you want to, you can detect the zoom level on your application. So if it is an issue where your application is being weird at a different zoom level, you can detect that. But I would almost say like, - -52 -00:35:16,710 --> 00:35:19,110 -Scott Tolinski: don't do that. Because I would say don't do it. Yeah, - -53 -00:35:19,400 --> 00:35:42,170 -Wes Bos: yeah. Because like, obviously, your users zoomed in for whatever reason, maybe they have a hard time seeing the tax, specifically, also myself, I, I run my monitor at very, very high resolution. And then I will often just bump up the font size on my browser or in my text editor, just because I want the text to be vague, but I don't want like my tabs to take up all the space and things like that. - -54 -00:35:42,230 --> 00:36:22,500 -Scott Tolinski: Yeah. And also like accessibility, you know, there could be very real reasons. And me personally, I used to not feel this way. Because I didn't understand this as well. I don't know what I'm saying used to mean, like back before I understood what accessibility stuff was in general. But like, I used to just, you know, outline, zero or outline none. And then once I realized just how terrible of a of an idea that was, I've just largely always erred on the side of not messing with anything that the browser does for accessibility, if the browser's doing it for accessibility, you're probably not going to be doing it any better. And you're probably going to be hurting some of your users that are using it for those reasons. So - -55 -00:36:23,210 --> 00:36:43,290 -Wes Bos: there's two things that people always say on zoom level one, one person says don't use percentages for things like font size, or margins or whatever. Because when you when you bump up your font size on your they won't actually increase it. And that has not been true for a long, long time. So stop saying that every time I tweet anything out, I get one person that says that it's - -56 -00:36:43,530 --> 00:36:44,820 -Scott Tolinski: always talked about that. Yeah, that - -57 -00:36:44,820 --> 00:36:48,230 -Wes Bos: hasn't been true for like, like six years or seven years now. - -58 -00:36:48,540 --> 00:36:58,130 -Scott Tolinski: Yeah, because what the browser does when you zoom, when used to hit command plus in the past, it used to bump up the font size. Now what it does is it increases the browser's zoom level. - -59 -00:36:58,440 --> 00:37:42,480 -Wes Bos: Yeah, that's that's a really good point. And yeah, it got rid of a whole bunch of issues that came along with that. The other thing is that if you're doing font size based on like a VW like, viewport width, or viewport height, fonts that are set based on viewport height or width, when you scale them scale up the browser, the fonts actually don't adjust themselves, because they're still a percentage of the height or width of the viewport so they don't bump up. And to get around that you can use a calc. So you can say like calc 10 vw plus 10 pX, and that will convert it to a pixel value and it will go up and down as the browser zooms in and out. That's one I didn't know about it. Someone just on Twitter, maybe like a month ago said it. I was like, ah, interesting. That's good to know. - -60 -00:37:42,630 --> 00:37:44,580 -Scott Tolinski: And yeah, Twitter's great for that stuff. - -61 -00:37:44,900 --> 00:37:47,580 -Wes Bos: Twitter is a good place. Usually sometimes it's awful. - -62 -00:37:47,880 --> 00:38:10,590 -Scott Tolinski: Yes, exactly. Sometimes. So next question is from dirty puncher dirty says, Here are side projects, common among developers, I recently mentioned to my boss that I have a few side projects and nothing serious just for learning mostly. And he said he would rather that I didn't, and instead focus on my work. - -63 -00:38:10,670 --> 00:38:11,960 -Wes Bos: Oh, my gosh, he said - -64 -00:38:11,960 --> 00:38:20,280 -Scott Tolinski: he hadn't really heard of developers doing side projects. And that if I wanted to work on things that aren't our work, that I have things that he has things that I can do. - -65 -00:38:20,550 --> 00:38:21,270 -Wes Bos: Oh my gosh. - -66 -00:38:22,800 --> 00:38:42,090 -Scott Tolinski: Okay, so yeah, so this one stuff, because, okay, if your boss has things that you can do, and there's work that's not being done yet, don't do side projects, if there's literal work to be done, and you aren't doing it, because you're working on your side project, that to me is a valid reason for a boss to say that, right? That that that's totally valid. - -67 -00:38:42,110 --> 00:38:43,440 -Wes Bos: Yeah, if you're on the clock, - -68 -00:38:43,530 --> 00:38:53,700 -Scott Tolinski: right? only work on side projects on the clock if you have the blessing of your boss, or if they won't find out. So like, I don't just be like, Hey, I'm - -69 -00:38:53,700 --> 00:38:54,330 -working on this - -70 -00:38:54,330 --> 00:39:58,530 -project boss. Me personally, every time I did work on a side project, my boss either knew about it or would not know about it, because I was so ahead of my work. And he was so checked out that they would never have figured it out or something like that. I would recommend if you are doing this kind of thing to talk to your boss and let them know that you would like to spend time learning and working on side projects, because they will make you a better developer, give them the whole program pros and cons for doing it. But don't just do it and then talk about it as if you know, they might be mad about it or something. To me, it seems like there is valid reasons for a manager or boss to be bad about this. But again, the boss's attitude here is also kind of weird, like cognero no developers work on that's how you learn stuff. What are you talking about? That's how you learn? Yeah, you learn by writing code and you write code, not always in your projects. You can't write experimental code and all of the work that you're doing so how are you expected to learn? There's a lot of red flags here to me but also just make sure you aren't making your boss mad by not getting the work done. If there is work to be done. - -71 -00:39:58,880 --> 00:40:50,900 -Wes Bos: I have heard many times People work on side projects on the clock. And they they will own that code because that's probably part of your contract. So if you like stumble upon some like million dollar idea, they will own it. So I know a lot of people strictly will not even touch a line of code while they're at work. But they're all there. Also his people that have contracts that say, like anything they do at any time is any line of code on that machine on the work machine, or Yeah, not sure how legal that is or not, but definitely check it out. It sounds like your boss just doesn't understand. I would just tell them, Hey, I'm making mistakes here. So I'm not doing it in our own codebase. I'm learning, stumbling through things and also like, it's fun. Like you can get real burnt out at work real quickly, if you're working on the same codebase Oh, yeah. And being able to have another side project that you're you're TINKERING AWAY on will sometimes bring that love back. - -72 -00:40:51,420 --> 00:42:10,830 -Scott Tolinski: Can I also say here? And I've already said a lot about this one, like that side projects are you working on at work that to me, the sweet spot for a side project that I worked on at work was always involving something that if my boss asked me what I was working on, he would be psyched about it and like upset about it. For instance, when I wanted to learn Angular at one of my jobs, if he were to walk by and I'm like, What are you doing, I would said, I'm making a pre launch checklist for all of our projects. And he would have been a while that's a really cool thing. And then I'm not like, Oh, it's just some side cut I'm working on, you know, this is like this is a learning experience. This is a project into something that's going to make our team better in some sort of way. And that still checks all the boxes of being a side project, a side project doesn't have to be like a Pokemon thing. I'm not saying that yours is, I'm just saying like, it should be probably something related to your work. And you can you can, your boss will love that if you're if you're thinking about those kind of things. So for all these side projects that you are working on on your own time, because maybe the sidebar, trigger and turn into a business, maybe you got users on these things that I'm talking about side projects that are off the clock, you might want to go ahead and throw on some error and Exception Handling tools. And I mentioned that this one plays really nice with our previous sponsor in early on in this episode Log Rocket and I'm talking about sentry@sentry.io. - -73 -00:42:11,130 --> 00:43:42,570 -Wes Bos: Yeah, Sentry, they just got a new tagline on their website, software errors are inevitable chaos is not that's, that's, that's a great thing. Because a couple weeks ago, I I said this earlier, I deployed a new Checkout, not a new Checkout, but a couple of new, like major changes to it, and something broke. And that could have been chaos, because I could start losing money. People are emailing saying, hey, it's not working. But I was able to jump into my century, see the errors that were happening, kind of see the stack traces the browsers that it was happening on and, and really quickly pinpoint where the error was happening and what code was was making it happen. And I was able to jump in. And actually, in my case, it was that there was a cache of the old version. So it was showing me the error. And I said, I can see that that's not the right code, because I had written new code, and I'm not seeing that in my century. So I was able to quickly jump in and invalidate that cache. And that would have been very hard for me to debug because I had, I had cleared the cache from my browser, and I wouldn't be able to replicate that in my own browser. So having that sort of insight into how these things happen is key. And that's why you need Sentry, for your project@sentry.io and use the coupon code. tasty treat all one word, and that's gonna get you two months for free. Thanks so much for sponsoring. Let's get into some sick pics. Do you have a sick pick today? - -74 -00:43:42,990 --> 00:44:54,240 -Scott Tolinski: Sick bag? Yeah, sick pick, I got a sick pick today, you know, I think pick a lot of podcasts. And some are a little bit more like a wider reach than others in terms of who's going to be interested into what. But there's a really neat podcast that I've been listening to along the same lines as darknet diaries for a little while now. And it's a malicious life. And it's it's a little bit less of a drama podcast then. Then darknet diaries and a little bit more of like explaining situations. For instance, he spent three episode which totals about an hour and a half on the Stuxnet virus and he talks a lot about these different things. He talks about a lot of different worms, and he runs down different situations and then really, like just dives into it. The shows very good. I've been listening to it now for quite a while here. Yeah, it's just one of my favorite cyber security podcasts because it really just opens your mind to some of the stuff that's going on. And like I mentioned, it's a little bit less of like a narrative dramatic form, then darknet diaries a little bit more like straight up, and it pairs really nicely. I think even jack resetter from darknet diaries was like a guest on one of the episodes. So yeah, - -75 -00:44:54,240 --> 00:44:55,530 -Wes Bos: they've done a couple swaps. Yeah, - -76 -00:44:55,680 --> 00:45:14,280 -Scott Tolinski: they've done a couple swaps. maliciously. I know this. This is so funny because apparently I'm about to rob a bank and I'm about to scam people because a lot of swindlers and scams and in hacking. Those are definitely my favorite podcasts. So that fits right along in that same same world there. - -77 -00:45:14,280 --> 00:45:26,610 -Wes Bos: Yeah, I have been listening to that one for a while. The only thing I don't like about it is the the host intonation as he speaks is like the duck, the duck, the duck the duck, and it's - -78 -00:45:27,030 --> 00:45:31,050 -Scott Tolinski: just yeah, to me. Sometimes I wonder if it's just his accent or what - -79 -00:45:31,590 --> 00:45:48,690 -Wes Bos: I think it sees. I think it's ESL, like, he probably speaks German and whatever. And he takes the intonation from the his language and brings it to English. And as a native English speaker, I'm like, Ah, that's a little bit off. I know. It's not something I should be worrying about. But sometimes it gets to me. - -80 -00:45:48,810 --> 00:46:00,480 -Scott Tolinski: Yeah, it doesn't bother me. It's not something that I've ever but I can understand why would be make listening to it a little bit more difficult because it's not like as seamless or something. But no, I you know, I I totally get where you're coming from. - -81 -00:46:00,930 --> 00:46:40,230 -Wes Bos: The content is worth it though. It's it's like super well researched. And it's it's very technical to like, like, they don't dumb it down for for anyone. So I really appreciate that. I'm going to sic pick my new hard drive. So I have had these Western Digital passport drives for a while we've got i don't know i got like three or four of them just for I got one for kids shows. I got one for time machine. I got another one for my wife's Time Machine. We have a handful of them. And I recently accidentally just dropped kicked one off my desk. I had a cable hanging and I kicked it and the whole hard drive went flying while it was spinning and I killed it. - -82 -00:46:40,290 --> 00:47:01,830 -Scott Tolinski: Can I say something really quickly, before you jump into this time machine? You you and your wife time machines. It's just funny that that's a sentence that you can say in like, in English, and like everyone's just like, Oh, yeah, hard time machines. And we all know it's not literal time machines. It's just like a fun thing to say no. So if my wife and my we use these, these hard drives for our time machines, - -83 -00:47:03,180 --> 00:47:40,800 -Wes Bos: the secret No, obviously the backup of your computer. And I have people always ask like, why don't you use? What's the thing the Synology for that it doesn't work well, time machine doesn't work well over over the network. It really does. Um, and I much rather just have like a physical USB for my time machine anyways. So I kicked one it broke. And I thought I said maybe I should try a different one. Because I think maybe that's the second one that that went on me over the last like seven or eight years. So I went for the let's see rugged one where you've probably seen this Oh, yeah, right. Orange neoprene neoprene jacket or rubber jacket or - -84 -00:47:41,070 --> 00:47:42,540 -Scott Tolinski: light jacket. Yeah. - -85 -00:47:42,600 --> 00:48:53,520 -Wes Bos: And what I really like about it is that it's just USB C and it's besides my iPhone, it's the first thing I've bought, that comes with a USBC cable out of the box. And you don't have to have some stupid connector for it. It came with both USB actually, which is really cool. And I was like man, after what five years of having a this MacBook This is the first thing I bought that I can plug in to it. It was good. It looks like it will survive a kick, unlike the other ones. So I'm pretty happy with it. And it's also fast as heck. I think it backed up much faster than the other one did. And the other the the Western Digital my passports they come with this like weird USB C or USB three. Plug that's exactly two prongs in one. I'm not sure what the name is, is of it, but you know what I'm talking about. And like if you lose that cable or you forget that cable cuz like we have it for our kids show. And I often will bring that kids show harddrive with us wherever we go. So I can plug it in a laptop. And if that's if I lose that cable, I'm poached. But if all you need here is just a USBC cable. Although USBC cables are a piece of their own. - -86 -00:48:53,910 --> 00:48:55,770 -Scott Tolinski: Yes. Cool. - -87 -00:48:55,800 --> 00:49:00,150 -Wes Bos: Yes. Let's do some shameless plugs. What do you got for me today, Scott? Yeah, I - -88 -00:49:00,150 --> 00:49:57,300 -Scott Tolinski: got a new course on CSS design systems using the CSS variables is really cool. In fact, we spend the entire like first bit of the course. And I mean, like, like legit first bit of the course it's quite a bit of the first bit of the course, doing only classlist CSS. And I'm not talking about like this, this CSS isn't isn't pulling up at 711 with flip flops on and no shirt. I'm not talking that type of class list I'm talking. It's not using CSS classes. So we're just styling everything in like a full on design system, using CSS properties in straight up elements for CSS to build our own sort of baseline CSS, and then we go from there to build out a full on system and talk about strategies for dealing with elements and reusability and media queries and all sorts of fun stuff. You can get that at level up tutorials.com does the guide tell you where you can get it level up tutorials.com forward slash pro sign up to for the year and save some cash. Thank you. - -89 -00:49:57,720 --> 00:50:22,890 -Wes Bos: I'm going to shamelessly plug Beginner's Guide javascript.com It's a fun exercise heavy approach to learning modern JavaScript from scratch. So it's for it's beginner friendly, but it goes all the way up to intermediate concepts and whatnot gets you really good at JavaScript. Check it out beginner JavaScript calm, you can use a coupon code syntax for an extra 10 bucks off sick. That's it for today. Thank you so much for tuning in and we will catch you on Monday. - -90 -00:50:23,130 --> 00:50:24,420 -Scott Tolinski: Later, please. - -91 -00:50:26,130 --> 00:50:35,910 -Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax269.srt b/transcripts/Syntax269.srt deleted file mode 100644 index 87c027710..000000000 --- a/transcripts/Syntax269.srt +++ /dev/null @@ -1,84 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing soft skill web development not hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA. And Scott Tolinksi ski. - -2 -00:00:25,950 --> 00:00:41,159 -Scott Tolinski: Oh, welcome to syntax. Yes, yes, yes, it is the syntax podcast. My name is Scott Tolinksi. I'm a developer from Denver, Colorado, and with me, as always, is the Wes Bos. - -3 -00:00:41,370 --> 00:00:42,780 -Unknown: Oh, - -4 -00:00:43,019 --> 00:03:13,230 -Scott Tolinski: hey, yo, hey, yo, hey, Yo, this episode is Monday hasty treat, and we're gonna be talking about nuber. And no refer also known as no opener. And no refer when I see those two words, they just turn into jelly in my brain, and I don't even read the whole word, new their new printer. And we're gonna be talking about security. What's the issue with that if you've worked in any front end framework, you probably know with that you can't just link off to the sites with a blank without using one of these tags. We're going to talk about what they are, why it is what the whole reasoning behind that is. And maybe just a little bit of the depth there, it's just going to be a fun one. This episode is sponsored by Sentry. Now, unfortunately, this is not a bug that will show up in your Sentry logs. But if it did, it would pop in there, it would show up, you'd be able to track it, he'd be able to attach a GitHub issue with one click back. That's probably my favorite thing in Sentry. I have so many favorite features to Sentry, because I use it every darn day. It's one of those apps I almost never close. But let's say I just pop open Sentry right now. I have an error that's coming up. And it says no series found. What I can do is I can say, Okay, this is happening on this URL in particular. And I want people to take a look at this error. So what I do is I end my Sentry. And I just click the box that literally says Create issue. And all it does is create a GitHub issue. And I don't even have to leave Sentry, all I have to do is click the plus I can even assign it to somebody directly. I can add all those things that you know and love from GitHub, and it will create a link directly to this issue so that anybody who is attempting to solve this issue, can find it directly in your Sentry, get the error logs, get what happened, the breadcrumbs and all that stuff, fix that issue, solve it, and then we can mark it as resolved. It's so fun and easy. So if you want to try out Sentry, head on over to sentry.io, use the coupon code at tasty treats all lowercase all one word, and you are going to get two months for free. So thank you so much for Sentry for sponsoring this episode. Wes, I know you got curious about this, which is a funny thing, though. And somebody says, you know, do something, instead of just saying, Yes. You said, I need to understand this. Which to me, yeah, that's a that's a great skill to have. Sometimes I just read things people say do this. And I say, Okay, I'll do it. Yeah. Other times, you really want to know the details. And I'm really impressed that you you took this deep dive here. - -5 -00:03:13,589 --> 00:06:24,660 -Wes Bos: Oh, good. Yeah, I saw a tweet from Adam argall. And he just like it posted this CSS trick that you can put two exclamation marks in front of any link that doesn't have these attributes. And I thought like, okay, but like, why, like, that's kind of annoying that we have to do this, like, why is this a thing? And why hasn't the browser fix it. So if you haven't heard of this before, if you have a link that has a target of underscore blank that meaning it will open in a new tab or window. If you do that the website that you link to whether it's your own website, or it's a another domain website will have access to the window of the opener website. So if we have Scott calm, and Scott links to West calm, and Scott says a href equals West comm target equals blank, and I pop that open now west.com will have access to the entire window of Scott Comm. And that's a huge security vulnerability because then someone could any like any website you literally link to could maliciously then reach back into the other website and scrape data change the page, you name it, right? So this popped up, I don't know maybe a year or two ago and since then, we've been getting an es lint rules pop in anytime on GitHub. If you sneeze a underscore blank, somebody will come with a pull request adding these two attributes of REL no opener and REL no referrer. And what these do is first REL no opener will ensure that the website that you've linked to normally you can just access the opener website Scott comm links to West calm on West calm, I'd be able to access Scott comm via window dot opener. So I could say like window dot opener dot document. And that will give me the document of the opened website. So just adding a relative no opener, we'll make that note. And then a relative no refer, we'll go one step further and strip any referring headers. And we'll talk about the ups and downs of that. So that's, that's what you have to do right now with underscore blank things otherwise other websites could do it. And I thought like, okay, like, like, why is this is obviously security issue in the browser? Why don't browsers just fix it? And I asked on Twitter, like, what are any valid use cases for this thing? Because the reason they're probably not fixing it is because it will probably break a whole bunch of websites out there, because you can't just change how JavaScript and how JavaScript works. And I was like, thinking like, what websites do use this and the only one that I could think about? First of all, there's plenty of like pirated websites where you try to download something, you click it, and it changes the page on you and then opens up something else in a new tab. Mm hmm. And like the only like one that is legitimate that I could think of would be a retail me not here use retail me not to get like a coupon code or something. - -6 -00:06:24,690 --> 00:06:49,950 -Scott Tolinski: Yeah, it were like retail me that was like a funny because it was one of those things that I felt like, worked until companies found out about it, because like the moment companies found out about it, they're just like, let me publish embedded marketing into the site. Yeah, like, Oh, you can only get this coupon gotta be set up for our mailing list. Now, all of a sudden, like I really liked you tell me now when it was just like, oh, here's the coupon. Got it? Yeah, underground. - -7 -00:06:50,760 --> 00:07:40,680 -Wes Bos: So what they do is, if there's a coupon code, you have to click to reveal it. And by clicking it, it sends you to the website. So if I'm trying to buy something from the gap, what it does is it opens the coupon code in a new tab and then changes the current tab to gap Comm. And that gives them the buffer, so that they can get any affiliate dollars from that. And I was like, okay, that's kind of a okay use case for it. But they're, they're sort of leaning on that. And then I think everything else I've seen, maybe like, This used to be really popular when you click a link, and it would open up a pop up window. And then what you did in that pop up window, you still want to control what's happening on the main tab of the website. Mm hmm. I only really only see this in like banking websites that are very old. And I don't think this is so much of an issue anymore. - -8 -00:07:41,270 --> 00:08:32,900 -Scott Tolinski: I think it's a relic of the pre framework days, because now you can just, you know, not refresh the whole page when you do page. Yeah, conditions and things like that. And I remember that was like a huge thing. When we we were like, this is like sort of related, when we were working on our agency website. And we had this like fun little feature that was like the agency do a jukebox where everybody could put like a song of the month on and you know, you could hear music from the agency workers, right? There's only 12 of us there. So it's really like curated and cool. The old way they did it was that pop up window, right? Yep. And I remember when we went to do the new site, we did it in Angular, I believe I might have been Angular one. And when we did this in Angular one, it was so fancy to be able to have the jukebox just be a part of the site and live on the site and not be refreshed per page. We didn't have to bump it onto its own window. That was like the perfect use case for that. - -9 -00:08:33,449 --> 00:10:12,330 -Wes Bos: I forgot about that. Yeah, you can use just run the player in the pop up. So there's a really good example, if you go to the show notes. Mateus by Nance has a really good example about how it works on the same origin as well as cross origin. So it's interesting because course, even if you have course set up on your website, course does not apply here, which means you could potentially leak your entire document. So my question is, is okay, so every time we have a target equals underscore blank, we have to now add these two rails, which I never remember what they are, why doesn't the browser just fix that? And it looks like they actually are fixing it. So I did a couple tests Safari has for about a year or so, by default, any underscore blank link will also infer the no opener and I believe the No, no, I think just no opener, and you know, I'm not sure if it's the newer or not, so it will do that by default. And I believe Firefox now does this too, because I was trying to make it work on Firefox and I couldn't. And by putting no opener on a link, it just sets the window dot refer to null and you're not access to not able to access anything on it. It does currently still work. This is what June 26 we're recording does currently still exist in Chrome and I would expect the same thing in brave and IE Because they are both based on that. So I bet in a couple years, we'll have to stop using these annoying things. Whenever we want a target equals new underscore blank, fascinated, - -10 -00:10:12,770 --> 00:10:46,260 -Scott Tolinski: there's so many times we hit these problems in web dev, and like, so many people just deal with these little minor inconveniences, right of having to do this stuff, or add these little caveats. But we often forget about like, the load it all it all comes down to our brains, right? It's like, you have to remember, now all of a sudden, it's just one additional thing you have to learn. And one more additional thing that is a something that occupies space in your brain. But like, why, why why do we have to why do we have to deal with this? And I think not enough people ask, like, why can't this just be done for us? Enough? You know? - -11 -00:10:46,319 --> 00:10:55,200 -Wes Bos: Yeah, yeah, that's exactly it also, like, people are just adding a blind, I'm like, well, doesn't that like break some stuff? Like, is that bad for SEO? Or analytics? - -12 -00:10:55,229 --> 00:10:56,940 -Scott Tolinski: And why does it even exist? Yeah, - -13 -00:10:56,969 --> 00:12:09,510 -Wes Bos: yeah. And so no, refer does hurt your analytics. Because if you put No, no refer on a link, when somebody visits that website, it's not going to tell you which website referred you to them. And it's just going to, there's like a header that you can pull. And it will just tell you straight up that someone went directly to your website. So if you're looking at your analytics, you say, Wow, all these people are just typing in this long ass blog post URL, that's weird. And it's likely know that the links to that page are being stripped of the referrer. So in some cases, you probably do, it certainly could be a security issue by having referred leaking, what URL links to whatever. But if you need that information, especially if you're doing something like referrals, like I have, specifically I have a referral program myself. And if people were to pop this attribute on my referral links, I wouldn't be able, oh, sorry, no, I would, I still wouldn't be able to track it. Because the URLs with my referral program have specific data in them as to who is referring those you see if you ever look at our first link, you'll see that the person's name and the link. And that's how it's tracked. So it's not based on people linking it from URL for header, - -14 -00:12:09,629 --> 00:12:11,580 -Scott Tolinski: you do yours as a query string, right? - -15 -00:12:11,969 --> 00:12:34,470 -Wes Bos: Yeah, it's not not a query string. But it's just like a params. An Express brand. You're on like a brand matching. Yeah. But that's what I've learned about this. So if you do have a target equals underscore blank, you probably still do want to add REL no new opener and new refer to that in about a year, we'll we'll be able to stop doing that. - -16 -00:12:34,890 --> 00:12:41,010 -Scott Tolinski: Well, I look forward to the day that I didn't have to go there and make that modification on my code now - -17 -00:12:41,070 --> 00:12:44,550 -Wes Bos: beautiful, such a small thing. But it's bugged me for a while I thought, hmm, - -18 -00:12:44,880 --> 00:13:03,000 -Scott Tolinski: there's so many times a little things like that popped into my brain where I get curious about something and then it just be it's a perfect opportunity to learn out loud and to say, hey, other people might be interested in this too. I think it's the power of learning in public. So awesome. I'm so I'm so glad you did this, because it taught me a whole lot about this as well. I've always just been like, yep, - -19 -00:13:03,000 --> 00:13:37,500 -Wes Bos: we'll add. Yeah, we have something in my family where we just say it can't be known or like somebody asks, like a really simple question. Like, why does drinking water upside down, get rid of hiccups? And we all sit around and go can't be known. Like if only there were some sort of resource out there that we could look this information up but can't be known. Some giant catalog of information to type in and or ASCII and with your voice? It's Encarta. That's what we're talking about. In carta. Thank you so much for tuning in. And we'll catch you on Wednesday. Peace, peace. - -20 -00:13:39,540 --> 00:13:40,350 -Announcer: Head on over to syntax.fm - -21 -00:13:40,350 --> 00:13:49,320 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax27.srt b/transcripts/Syntax27.srt deleted file mode 100644 index 0a98af0a4..000000000 --- a/transcripts/Syntax27.srt +++ /dev/null @@ -1,480 +0,0 @@ -1 -00:00:01,290 --> 00:00:09,599 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott solinsky and - -2 -00:00:09,599 --> 00:00:23,460 -Scott Tolinski: Wes Bos, and welcome to syntax and today we are talking all about graph QL. I'm Scotland ski and with me as always is West boss Say hello. Hello, everybody. - -3 -00:00:23,460 --> 00:00:32,720 -Wes Bos: Good to be back. I guess you didn't really miss us. But we we took about three weeks off to her for Christmas. So happy to be back a little bit rusty though. - -4 -00:00:32,880 --> 00:00:52,230 -Scott Tolinski: Yeah, apologize for any sort of rust ahead of time. I think. So. Yeah. This episode is sponsored by snip cart and fresh books. So we'll be talking a little bit more about snip cart and fresh books through the course of this episode. So thank you so much for both snip card and fresh books for sponsoring. - -5 -00:00:52,800 --> 00:00:54,720 -Wes Bos: Awesome How was your holiday Scott? - -6 -00:00:55,350 --> 00:01:24,120 -Scott Tolinski: It was great. Yeah, we we flew with baby to Michigan. So baby's first flight and everything like that. He did great. He was a little fussy on the way back, but you know, it's cool. It was as good as it could have gone. It was one of those things I was stressing out about, like, you know, the airport sucks enough. So yeah, having it with a child. You've never done it before. So yeah, it all was good. And the trip was great. Got to see family got to hang out Michigan. Have some Lacroix. Oh man the biz. - -7 -00:01:24,329 --> 00:01:30,030 -Wes Bos: Did you see someone on Twitter? Tried Lacroix for the first time after hearing this podcast. - -8 -00:01:30,180 --> 00:01:45,000 -Scott Tolinski: I love that because Lacroix liked that tweet and I was instantly like that's the most validated I think that's like an internet celebrity liking one of your tweets like I think that Lacroix liking some of our tweets there might have been like, high up for me. - -9 -00:01:45,060 --> 00:01:54,390 -Wes Bos: Yeah, let's shut it down after that, unless we're gonna try to get Lacroix is a sponsor. So if anyone has a hookup, please put us in touch because we would love to be sponsored by Lacroix. - -10 -00:01:54,659 --> 00:01:56,370 -Scott Tolinski: I would love that. Yeah, absolutely. - -11 -00:01:58,590 --> 00:02:41,610 -Wes Bos: All right, well, let's let's get into it. We're gonna talk about graph QL. Today, and what is it, it's it's sort of been like a bit of a buzz lately in that you hear everybody talking about it. Every time someone dips or toes into it, they're seeing the praises of it. There was some licensing stuff A while back with the that had the same licensing issues as as react had. But those are all a thing of the past now. So I'm pretty excited about graph QL. And I know Scott is as well. So this is going to be a fairly biased episode. But hopefully we can just like explain what it is and why we are so excited about it. So why don't you kick it off and talk about what is graph qL? Scott? - -12 -00:02:42,119 --> 00:03:59,630 -Scott Tolinski: Yeah, so graph qL itself is correct me if I'm wrong with anything I say here. But it's really just a specification for this sort of query language, right? It's a replacement for how your API works. So instead of hitting an endpoint with, you know, you hit a, an API URL with fetch or whatever, and then you accept whatever data they just decide to give you from that API endpoint, you grab all that data, and you just use whatever you want. A graph qL is is writing queries on the client side that allow you to specify a particular type of data and shape that you want it in. And so when you create your API, you create an a way as such that instead of having to hit and fetch a URL to return data, you basically say, Hey, give me let's say, the post with the post author, the post comments. Oh, and by the way, inside of the post comments, give me each post comment author in each post comment body. And it makes these awesome, awesome queries that are one just a joy to work with, and a joy to look at, and a relational and all sorts of amazing stuff. I guess that is the best I can do. - -13 -00:04:00,240 --> 00:06:27,870 -Wes Bos: Awesome, I like that I'll give my my stab at as well maybe fill in any holes. So it's not a framework or anything like that graph. qL is just a spec, very similar to how I guess rest isn't really a spec. But JSON is a spec where there's not actually one implementation of it. It's just this idea that someone has made in this case, Facebook has come up with it. And then every single language has to then go implement the spec. So whether you're working in JavaScript, or Python, or any language, you're going to have a library that will allow you to interface with a graph qL library. So it does require buying from both the server side as well as the client side, your server side will serve up a graph qL feed, and then your client side will talk to your graph qL server and specifically asked for the things that you want. So how is that different than than rest? Well, you first, you ask only for the data that you specifically want. So there's only one API endpoint. You don't have. Like, you don't have an endpoint for like blog posts, and then an endpoint for authors and then an endpoint for like pages on a website, you can specifically say, give me the latest three blog posts, and the specific pages or give me a list of cars. And for each car, give me their engines. And I only want, I don't know anything about engines is a stupid example. But I only want how many pistons come in each engine, I don't care about the rest of the data that comes along with that. And that's really neat. Because you don't have to make multiple requests, you only ever have to make one request to the API and ask for exactly the data that you need in that situation. And then if the data is relational at all, you can nest these queries infinitely and then just populate the related data without having to like how many times if you had a REST endpoint where you had to create like a new API, where you have like, give me top five authors. And then like, maybe give me top five authors with their friends. And then you have, by the end of the day, you have all these different endpoints, or all of these different options that you can pass to your endpoint. And in this case, the best way I ever heard of it as a graph, qL query is an object where you only provide it the properties that you want. So it's just like an object with only the left hand side, and then you give it to the graph qL server, and then it just gives it back to you with the data populated on the right hand side. - -14 -00:06:28,110 --> 00:07:41,910 -Scott Tolinski: Yeah, yeah, I think one of the important concepts is with like a standard sort of REST API. There's numerous connections to be made, right? Every single time you need some data, you make a connection to a specific endpoint, right, or with graph qL, there's just one connection endpoint, it connects you to the server. And then you can use these queries to get the data that you want, rather than having to make an individual connection and every single time, and like all that prevents, again, how many like repeat trips to, like particular API's, like some API's give you, they'll give you an array of IDs, and then you'll have to loop over those IDs and hit the API again, to get more information. And with a graph qL query, like Wes mentioned with the relational stuff, you can just say, Hey, give me all of the properties within that array. And well, the server side code is going to figure it out and serve up the stuff that you know, you actually care about as a end user on the client side, right? It's giving you the data you care about without having to worry about this API, then get this information, then hit the API potentially, again, for other reasons to get more information, you know, - -15 -00:07:42,060 --> 00:08:26,430 -Wes Bos: yeah, yeah, exactly. Like, how many times have you have you gotten a list of like, I see this all time, like maybe a list of movies. And then that API doesn't give you the like, maybe the movie description is, then you have to make a secondary call. So you end up making like, you want 10 movies, and each of them you wanted a description. So that is that 11 round trips to the server 11 different Ajax calls. And that's, that's brutal to have to do. Right. So this really is going to make your apps faster, because you don't have to worry about doing any of any of that round trips to the server or, or making extra calls or doing one of those things where you you have to like, I don't know, you still probably will have to paginate but not as much. - -16 -00:08:26,670 --> 00:09:17,340 -Scott Tolinski: Yeah, yeah, one of the things I really love about the graph qL queries, too, is that they're self documenting is just by looking at the query, you know exactly what data is going to be available. It's it's not like hitting an endpoint, and you're sort of like, Okay, well, I would assume this data is going to be available, or this is the data that I think is going to be available, or let me even check to see what's here. But with a graph, qL query, you're specifying very directly, it needs the title, the name, the description, you know, that the data coming in is not going to be anything other than the name, title and description if that data actually exists, right. So to me that like self documenting aspect of the queries is super nice. You sort of always know what you're getting, again, that relational stuff is is definitely a wow, inducing moment when you can just write this really simple query and get back all kinds of information. - -17 -00:09:17,880 --> 00:10:27,150 -Wes Bos: Yeah, exactly. And I think another important point is that this is not necessarily something that you have to start from scratch or replace your REST API. So one of the cool things about building if we're talking about the server side right now, building a graph qL API is that you, that will be your central point of getting data. And then behind the scenes, you can specify different types of queries. So if you want the latest six blog posts, you may query your WordPress database. But then if you want your latest GitHub projects that might then query your GitHub API. And then another one might actually query a MongoDB API. So this thing can sit in front of multiple sources of information, which, if you're building something from scratch, you maybe don't have that. But if you have any sort of legacy system where you have multiple pieces of information, you just have to code what's called a resolver. And a resolver essentially says, How do I get this data that the user has requested? and bring it back to bring it back to the graph? qL endpoint and just return that? That raw data, right? - -18 -00:10:27,290 --> 00:11:17,820 -Scott Tolinski: Yeah. And, and to expand on on that even with Apollo link state is a new package for Apollo, we'll get into what Apollo and relay is and that stuff for a second. But that actually allows you to not only query several different API's, from one query from one graph, qL query, but with Apollo link state, you can actually query local state as well. So in your graph, qL query, you could potentially be hitting multiple API's and your local state, all within one query, get all of that information directly into your components or your code. And that to me is just super cool. Because it's like, I don't have to worry about getting the data from the database from the local storage from the API. It's like there's one data source. And that's where you're grabbing your data from. - -19 -00:11:18,030 --> 00:12:08,610 -Wes Bos: Yeah, yeah, that's, that's super nice. Well, we talk about Apollo and Oh, we've talked about it on pod Pat, past podcast before, but maybe let's talk about the front end. So assuming that you have some sort of back end, that is a graph qL API, and we'll talk about what your options are in that in that case. So the options are limitless. You could build a graph qL API in anything or, or use one of these out of the box solutions as well. But let's talk about the front end, you're building an app in react or view or just plain old JavaScript? How do you talk to a graph qL API? Because you can't just use fetch? Because you have to specifically format these queries in in a specific way, be it right, it's not just JavaScript, you actually have to code these graph qL queries, which are in JavaScript, they're just strings. Right? - -20 -00:12:08,730 --> 00:13:01,680 -Scott Tolinski: Yeah, I think that is a little confusing aspect is that graph. qL code there is like a very, there's like graph qL syntax, which is, it is not JavaScript, it's very similar. I mean, there's objects and whatever, but these objects are missing commas, and there's a little things here and there. But to use graph qL you pretty much need a graph qL client and of which there's two major ones, which is relay and Apollo relay made by Facebook Apollo made by the meteor development group, the guys behind Meteor super amazing developers there. There's also a couple others, of which I have no experience with I don't know if you've checked out any of these graph qL request which is made by graph cool. loca which is made by khedira. And nano graph QL. Made by Yoshiko why it's I don't know how to say your last name. I'm so sorry. - -21 -00:13:03,270 --> 00:14:58,860 -Wes Bos: I haven't checked out any of those I have. So I'm actually been building a graph qL course for for a couple months now. And I when I initially looked at it, I looked at just the two big ones, which was what was Apollo? And was the other one I forget relay relay. Okay, I was I was once a reason. And Apollo, for me is the perfect library for dealing with dealing with graph QL. Because it does we I've said this before, it does a little bit of magic, where it takes care of the a lot of the harder stuff for you in terms of caching data. So if you have a query for something, and then you have that query again, in the future, it's not going to just you don't have to think about Oh, is this data already in my cache that I like, try to check if I have a state of first, you just simply shoot the query off? And you let Apollo do the hard work of figuring out? Do I need? Do I need to ask for all of this? Or do I need to even ask for any of it? Or is some of this stuff local? And then I can just give it to you immediately, instead of having to make a round trip to the actual server? So I have I don't I don't really want to speak to too much about using relay. But what I have found is that if you have very specific use cases, or you have a very big app, and you need, I guess performance, although Apollo is not, not performant, you can you can get a little bit more custom with relay. But in my case, I like using Apollo, because it does a little bit more for you. And the setup was is amazingly fast. Like you remember, like my, my Redux series was like, I think like six videos just to like do the first hello world. You got to do all this like a boilerplate setup. Whereas with Apollo, you're up and running immediately and you get that kind of like, Ooh, this is nice. - -22 -00:14:58,920 --> 00:16:16,650 -Scott Tolinski: Yeah. And then It's I mean, I had the same experience with Redux and, and actually the same experience overall with choosing Apollo over relay as well, I, you know, heard, I heard a little bit about relay, I looked at their documentation, and everything just didn't scream, as easy as Apollo looked. And, you know, I'm pretty like a low friction kind of guy. So if it's a low friction setup, and get going, then I'm gonna, I'm gonna go that direction. And in that regard, I really loved Apollo. And one thing I really liked about it, as well was being able to this isn't speaking on Apollo verse relay verse, any of them, by the way, but being able to incrementally add it. So I started with like, once I just added Apollo, I started with one collection, I started with one schema and all that stuff, and slowly migrated over. But made it easy to do that you don't have to go all in, you can just add Apollo, try it out in your app, or try out Apollo in some sort of demo environment and see it in action. Because it's really definitely exciting to to get going and some of your real data and see how quickly it is to get up and running with something like that and have it be so performant. And the caching and all sorts of stuff just - -23 -00:16:16,680 --> 00:16:28,110 -Wes Bos: does like for each nation is built in re fetching of data. Like if you just need to refresh the data, there's these little methods just called refetch. And it will go to the server and refresh that data. - -24 -00:16:28,140 --> 00:16:37,170 -Scott Tolinski: Yeah, or if you're using mutations that automatically out of automatically refreshed fetches it, so you don't even have to hit refetch if you're also in on the mutation side of things. - -25 -00:16:37,530 --> 00:18:28,070 -Wes Bos: Yeah, let's actually talk about about that little book, the core concepts behind behind using graph QL. But first let's let's hear about our sponsor, and our sponsor today is snip cart. SIM card is a entirely client side, shopping cart. So it's sort of like a software as a service where you sign up. And if you want to have the ability to sell things on your application, that's entirely client side, you don't want to worry about doing any of the back end stuff, you don't want to have to worry about accepting credit cards or any of this stuff. However, you also don't want to do the thing where you have to kick your user off to a separate page. That's like kind of branded the same way as your website, because I know myself that if you kick some money off your website, to a separate page to do the credit card transaction, like how many times have you been like, nevermind, I don't really feel like you know, like, but if remind, when you buy one of my courses, it just pops it up right there. And you don't even have to like leave the page, there's no separate URLs or anything like that. So snip cart is awesome, you can get it integrated into your website in just a number of minutes. It's super fast, it's just a JavaScript library, you can still use it with your existing PayPal and stripe and all that stuff. And what I really like about it is it has all of the different features that you would need, if you are selling goods, you're selling maybe a course you're selling a digital good. Everything from handling coupon codes to doing shipping to doing digital delivery, you name it. So check it out. It's at snip cart.com. But we want you to go to snip cart.com forward slash syntax. And that's going to get you three months free, which is pretty awesome. So check them out on screen, snip guard.com forward slash syntax. - -26 -00:18:28,229 --> 00:18:30,780 -Scott Tolinski: Nice. Nice. Yeah. So - -27 -00:18:30,780 --> 00:18:40,410 -Wes Bos: there's graph qL? I don't know. You want to say it's it's simple. But it's it's not because you are learning a new language, right? - -28 -00:18:40,410 --> 00:18:50,970 -Scott Tolinski: Like it's different. I've heard it described as like a paradigm shift and thinking about your data. And I mean, that's how I feel about it. It's totally different. It's something brand new. - -29 -00:18:51,540 --> 00:19:45,050 -Wes Bos: Exactly. So there's, there's a couple ideas that you need to nail down before you get into it. And I think that the two biggest ones are the ideas of queries and mutations. If you're on the you're on the client side, and you want to get data, that's a query. And you can pass arguments to that query. There's no specific set of queries that you that graph, qL outlines, that's up to your back end to implement those those different arguments as well as things like filtering and sorting. That's not part of graph QL. And I was a little bit bummed initially to learn that because I was like, well, it's not really a query language if you can't sort your eye. But I guess like you have to be at the pass all that data to, you can specifically tell your API to sort and filter and you get the point right, you But - -30 -00:19:45,050 --> 00:20:13,500 -Scott Tolinski: yeah, I was also initially one of those things that was like confusing to me. And then after I figured out, oh, the you know, a limit or a sword is just an argument that you're passing on through to the API and the API is going to deal with it. Then it made a little bit more sense to me that like, yeah, graph qL doesn't really care it, it's just accepting those as arguments. The API is what needs to know how to handle those arguments. Because graph qL isn't doing the Linux actually hurting themselves. - -31 -00:20:13,530 --> 00:21:03,480 -Wes Bos: And this is not a like I, you often read these StackOverflow, at least I ran into a couple of them where people are like, MySQL has been able to do that for years, or like Postgres does better. And that's not what this is at all. You still use your your mongoose, or your MySQL, or Postgres, or any database that you have, and you still use whatever language you're using to interact with that database. But the the way that your your graph qL works is that you just define a schema, which is, the different fields that you might have the different types of data, it's all typed, meaning that you have to know ahead of time, if it's going to be a string, or an array or something like that. And then your your Python and your MySQL, or your node and your mongoose will work to get that data to graph. QL. resolver. Right. Cool. - -32 -00:21:03,510 --> 00:21:11,190 -Scott Tolinski: Yeah. Yeah. quick aside, do you say, schema or schema? Like, schema in there? And I never know. Yeah, - -33 -00:21:11,220 --> 00:21:15,080 -Wes Bos: I say it, but I get a lot of emails, people being like, why do you say schema? - -34 -00:21:16,580 --> 00:21:25,550 -Scott Tolinski: schema? Look, I'm going skiing. And I might even like, call that out on one of my videos. Like, I don't know if I'm saying this word correctly. I never have any idea. - -35 -00:21:25,610 --> 00:21:31,500 -Wes Bos: I know. A lot of people tell me I say it wrong. I say most things wrong. So I would probably side with Scott on this one. - -36 -00:21:31,580 --> 00:22:43,110 -Scott Tolinski: Yeah. Okay. Well, let's, let's see about that. But yeah, so yeah, so the concept of resolvers. Right, a resolver is essentially where you talk to your database. And inside of a resolver is, whether that's that update code, if you're using like mongoose like a find or an update, or delete, or remove or whatever. The inside of these resolvers is where you're talking to your database. So resolver, that's changing or deleting the database, or data or something like that is called a mutation, it's mutating is changing the data, right, where resolver that's fetching the data is called a query. It's where you query your stuff from. But there's also resolvers that are custom named, that will like attach to your schema. So if you have a products resolver a products resolver can have its own properties that will grab data and allow you to create these relational connections. So a resolver is essentially just the place where your graph qL is talking to the server, I guess is the best way to describe Yeah, - -37 -00:22:43,140 --> 00:23:16,380 -Wes Bos: yeah, exactly. And then mutation, what we talked about what a query was, that's how you get data. And you can pass it arguments to to be able to filter and ask for specific things. But I mutation is when you want to push data to because it's just like a REST API where you can get you can get data, or you can put or post data to the server. And that's not a put or a post that is just called a mutation. And what those things do is update data in your back end, and your resolvers going to be able to specifically handle that data. - -38 -00:23:16,590 --> 00:23:50,010 -Scott Tolinski: Yeah. And like I mentioned before, with Apollo, I don't like I don't know if this is true of the relay or not. But with Apollo, when you do a mutation mutation, you automatically get a refetch of that data from the client. So but yeah, so that makes working with an API really nice if what you, you hit you change your data, and you automatically get all of the new data in there directly from your API? So yeah, graph qL mutations for me replaced any sort of time I'm talking to the database to change data. And that's just flat out it. - -39 -00:23:50,040 --> 00:24:37,200 -Wes Bos: Yeah. One other cool thing that Apollo says, while we're on that sort of refetch, is you have the ability to modify the cache being meaning that, like, let's say you were creating an item, for example, um, I'm building an online store. And when you create an item that is for sale, I want to immediately show that item when you hit add an item. And then I wanted to do the round trip to the server, because that could take a second, right, and you don't want that leg. So Apollo allows you to immediately inject that thing into the, the cache. And then and then it will also sync with the back end and then update any things like database IDs or whatever other things that were created on the server that need to then be pulled into the client side. - -40 -00:24:37,320 --> 00:24:52,980 -Scott Tolinski: Yeah, again, it's just taking stuff that you don't want to have to do manually and doing it for you is like the reason why Well, I mean, it's a reason why you would use something like Apollo, but you have to obviously use some sort of graph qL client, whether it's Apollo or relay or whatever. - -41 -00:24:54,450 --> 00:25:11,160 -Wes Bos: Yeah, we should also say that Apollo can be used with anything. There are a double actors, obviously Scott and I use it with Apollo react, to use with react, but you can use it with any programming or any JavaScript library out there, because there's adapters for, for all kinds of stuff. - -42 -00:25:11,280 --> 00:25:18,990 -Scott Tolinski: Yeah. Which, which is great. I mean, because then nobody is, it's not stuck in, in react land or anything like that. So. - -43 -00:25:20,460 --> 00:25:21,720 -Wes Bos: Exactly. Yeah. So - -44 -00:25:21,720 --> 00:26:56,730 -Scott Tolinski: I mean, we did mention, you know, the resolver part. But let's talk a little bit about like the server component of graph qL overall, or in my, my experience Apollo. So what graph qL essentially does on the the server is it collects your your schemas, right? Your schema defines all of your data, the shapes of your data, as well as all of the queries, what parameters all of your queries, except all of your mutations, what your mutations are named and what they accept. And that sort of outlines, your entire API is within the schemas. And then you have your resolvers, right. So you have your schemas, you have your resolvers, which include your mutations, your queries and that kind of stuff. And it collects all this stuff. And what Apollo does is you essentially just put these into a create server and it creates the server, then you just simply need to have some bit of code on your client side that's connecting to the Apollo server. So the Apollo server, basically just collects your stuff creates a server and has that data available, then you can connect to that server via the client side, and then blammo, all your stuff is available. Any of the queries, any of the mutations is all available on the client side. So there's really like only one hookup I mentioned this before, instead of having hitting a specific URL here or there, whatever there's, there's like one hookup into Apollo or graph QL. Here, and then from then on, you have access to your data as it's available. - -45 -00:26:57,689 --> 00:27:11,670 -Wes Bos: Yeah, exactly. And we should also say that we actually, I haven't used this Apollo server before, but it just creates a a proper graph qL server, and you don't necessarily have to be using Apollo on the front end. Is that right? - -46 -00:27:12,810 --> 00:27:21,270 -Scott Tolinski: That's actually a good question. I've only used them together. But it says it says it's an open source server, it seems to me that it would make it available. - -47 -00:27:21,330 --> 00:28:51,690 -Wes Bos: Yeah, because that's the beauty of graph. qL is like, even if you're using Apollo on the front end, you're not doing anything different than any other graph QL. So like, for example, GitHub has a graph qL API, and you could use Apollo just to hook up directly to GitHub API, and you don't have, they don't have to have anything special implemented to use Apollo. So that is pretty nifty. I should also say that one thing that I did when I was getting started is I was like, This is weird, because I just created my schema schema, for my MongoDB. And now I'm like recreating almost the exact right schema for my graph. QL. And there is a little bit of duplication that needs to happen there, because you don't necessarily want to one to one mirror your database to your actual public facing API, which could be terrible, you don't want to necessarily expose all of that data to it. So you will have to, there are like some packages out there that will will take your MongoDB schema, or whatever schema that you have in whatever database and automatically generate a schema for graph qL for like the equivalent, like you have a string in MongoDB. And I can also have a string and graph QL. But they're not all the exact same types. So you have to sort of mirror what what the equivalent is in graph qL, and to what it is in your existing database schema? - -48 -00:28:51,929 --> 00:30:41,640 -Scott Tolinski: Yeah, one of the things I like most about this is that it was confusing to me as well to say like, Oh, no, I have to define two schemas. Should I just be like copying and pasting this whole thing? No, you shouldn't yet that your public facing API is different. But one of the things I love about the Apollo and graph qL system for having this API is not thinking of my data as well, the data comes out of the database, it goes into the schema, and then it comes to me, you shouldn't think of it like that you shouldn't you should think of it as what data do I actually need. And because of that, you can write these like custom resolvers on types that can do things for you essentially, on the back end of your, your your server call that you don't have to do on the client side. So for instance, let's say I have a user right and you want to check to see on a client side for various client things, right? If this person bought let's say in my case with the tutorial, you want to see if they bought a tutorial and this is just for clients, I'm not providing them any sort of data, I'm just providing them changes to their view, right. So it's not a security issue. But let's say I wanted to know if they bought, I can do all of that computation on the server with a custom resolver and custom type. And when I hit my query, I can say, give me the user, give me their email, and tell me if they bought this course. And that's in my query. And so instead of having to do that, did they buy it on the client side? Or do it on the server side? I don't care about any of that. I just have to say, hey, API, did they buy it, and that that boolean value for if they bought, it isn't stored in my database, it's computed by the server itself, when that query is hit? - -49 -00:30:42,180 --> 00:31:49,320 -Wes Bos: Exactly, I'm a big fan of not storing data that you can necessarily compute on the fly. Although that has definitely been me in the past when things like tax rates change. But it's definitely huge there. Because you do not care at the client site, you just get a straight up Boolean, and that is all calculated on the back end. That's not necessarily something that's mirrored in your database. So that's why I initially thought like, Oh, so silly that I have to do this twice. But then someone explained to me, yeah, but you can compute things on the fly. Or if you need to grab data from two or three different data sources, like, for example, maybe the coupons, in my case, my coupons are stored in a j s file or a JSON file, whereas some of my customer data is stored in my MongoDB. Whereas some other data might be stored in GitHub. And it doesn't matter because you can reach into all of those things, whether it's memory and external API or my database, and just tidy it up into a nice, single payload that you get on the client side, you don't have to worry about fetching all of those different pieces on the client. - -50 -00:31:49,560 --> 00:33:02,940 -Scott Tolinski: Yeah, and here's a, here's a little real world example, where this kind of thing makes a big impact. And I guess it's, I guess, a small impact in a I don't know, whatever, it's, it's a super convenience factor here. But in Meteor, when you have a new account, it stores the email under an array of emails. So inside of that array of emails is an object of address or an object with the property of address and whether it's verified or whatever. But let's say I only care about the user's email. And I'm don't plan on storing multiple emails. Instead of having to query get the user, the user, look inside of that array inside of that array is an object and get that property of address. And for the having to do all of that I can have the API just return the first item from the emails array, the property address, and then when I hit the query, I could say, Hey, give me the user and their email. And it's going to give me a user and an email instead of an array full of objects with a property that I have to look into right, which is just one more way that adds complexity to your UI or your code on the front end, right because now I'm not caring about a user dot email, I'm caring about a user dot emails dot first item in a right whatever it just makes for much cleaner code. - -51 -00:33:03,090 --> 00:35:11,010 -Wes Bos: Let's take a quick break to talk about our sponsor and that is fresh books, fresh books is cloud accounting software, which it's it's the new year for me and I'm starting to pull all my tax information together and I really used to dread all of this tax time because it was it meant that I had to go off and find all the different invoices that I have and remember all these things that I kept in my head but now it comes to tax time and all I have to do is go into my Freshbooks generate a couple different Excel files where it will give me all the different invoices that I had all the different currencies that I've charged in. Most importantly all the expenses that I've had so as I go through the year and as I have expenses what I do is if it's a receipt I'll snap a picture with it on my iPhone or on my assistant take all of my PDFs and log all of those things as expenses and and then when it comes to tax time it's super simple. All of the PDFs and everything are attached into Freshbooks I just run a quick little report it tells me exactly how much in Canada we get HST back as a as a business or how much money I'm getting back in terms of collecting my taxes and how much I owe and all these things it's it's amazing how simple it is and it's it's amazing how like good I feel about the state and how clean my books are everyone always talks about the scary getting audited and quite honestly I don't think I would care that much because everything is so nice and clean for me that if I were if they were to ask like hey, can you show me a couple of receipts for your you're claiming a lot in terms of computer hardware, could you show me a couple of receipts of what you actually bought? No problem I would just query it up in Freshbooks and and be able to show it so knowing that it's safe and sound and nice and crisp in there is why I absolutely love fresh books. So if you're interested in you are a small business or sole proprietor or freelance or anything like that you need To get your books in order for 2018 go to freshbooks comm forward slash syntax and enter syntax into the How did you hear about a section? Thanks so much to fresh books for sponsoring. - -52 -00:35:11,210 --> 00:35:17,340 -Scott Tolinski: Thank you. Cool Yeah, it's getting close to that text time it's not quite here yet but it's a - -53 -00:35:17,360 --> 00:35:22,460 -Wes Bos: no what's the end of tax time for y'all Americans? - -54 -00:35:23,010 --> 00:35:25,940 -Scott Tolinski: April something I don't know. I always get it done pretty early. - -55 -00:35:25,940 --> 00:35:27,270 -Wes Bos: So yeah, me too. I always - -56 -00:35:28,260 --> 00:35:34,130 -Scott Tolinski: I hate the lead to success or in life is to not have that hanging over your head all the time. - -57 -00:35:34,260 --> 00:35:54,300 -Wes Bos: Yeah, I'm always waiting for a charitable receipts because those are the last that come in. Yeah. And they usually come in like February March. And then once they come in, I just send it all off to the accountant with all my Freshbooks exports, and just super nice, it's, it's not a pain in the in the butt anymore. Almost sad ass. - -58 -00:35:54,480 --> 00:35:55,920 -Scott Tolinski: Oh, my. - -59 -00:35:56,420 --> 00:35:59,520 -Wes Bos: Alright, we'll keep talking about graph qL here. - -60 -00:36:00,960 --> 00:36:01,730 -Unknown: All right, we're gonna, - -61 -00:36:01,980 --> 00:37:18,300 -Scott Tolinski: yeah, let's talk about some interesting new things a graph qL sort of brings that maybe we've seen in some ways, with some services, like maybe like content folder, stuff like this, where you don't have to worry about the server side of your your application in a component. And all you have to worry about is your your graph qL front end. So some of these really cool new projects or things like, well, these aren't the same, but like Gatsby is a static site generator, which basically allows you to write all of your graph qL queries that will then run and build a static site. And you can, there's plugins for all sorts of platforms. So it makes working with a WordPress API really easy or content for, like I mentioned, or even bringing in data from markdown files, which is how I do it in my Gatsby tutorial series, where like, you query a markdown file with graph qL and generates a static site for you. So that's just like one of these new sort of exciting things that I mean, static site generators existed and stuff like that. But being able to work with API so nice and smoothly inside of a static site generator is like pretty pretty darn sweet in my opinion. - -62 -00:37:19,460 --> 00:38:52,530 -Wes Bos: Yeah, another one that I'm I'm pretty excited about I'm people know, I'm a big fan of WordPress. And I often hear people are not a big fan of WordPress. And I often hear that clients and people that use WordPress are made because it's such an amazing interface, unable to, to edit your files and upload images and all this stuff. So WordPress does have a pretty good API. And there's this project called WP graph qL, which seems to be like fairly actively developed. And it seems to be pretty serious over the last, I don't know, I've been watching it for about a year now. And it's pretty neat, because you're going to be able to just use WordPress as like a headless CMS, it's the back end. And then you can use the graph qL API to just pull in the specific data that you need from your thing. And it works with advanced custom fields, and all of your different custom post types and your attachments and all this amazing stuff. So it's, I have played with it a little bit here and there. And it's kind of high on my list for when I want to redevelop my own website, I still want to stay on WordPress, just because I've got lots of content in there. Years and years of blog posts and speaking engagements and all kinds of stuff in there. But I would like also to like have a really slick single page website that has animations and everything like that. So yeah, I'm pretty excited about the the opportunities that this is bringing over. To us - -63 -00:38:52,610 --> 00:39:33,150 -Scott Tolinski: this I haven't actually seen this. And this seems like the sweet spot where and we talked about it before we're like there's so many sites that are built on WordPress that would really benefit from a whole new front end and connecting to that API. And connecting that API works right now. But like there's, there's so many I don't know, like different ways to do it. This seems like such a brilliant thing to be able to hit WordPress with a graph qL and and get your data that way. And then a fact that it works with the custom fields and everything cached this this seems like really a great way to sort of modernize some of these WordPress sites and build some, you know, front end framework. - -64 -00:39:33,270 --> 00:39:34,050 -Unknown: Yeah, exactly. - -65 -00:39:34,080 --> 00:39:34,590 -Scott Tolinski: Yes. - -66 -00:39:34,590 --> 00:40:04,880 -Wes Bos: There's there's a lot of like, kind of happy websites that are being be rebuilt right now. And the question is, like, do we build it in something like react or Gatsby or whatever or do we go the the older theme route and I don't know like it. Obviously there's still a huge use case for regular WordPress themes. But I think if you've got an existing site on WordPress and you want to build you want To build into something that's a little bit more interactive than this is going to be really good for you. - -67 -00:40:05,150 --> 00:40:58,290 -Scott Tolinski: Yeah, super cool. Another thing on that same sort of line of, you know, clients liking, pretty interfaces and stuff like that to be able to work with their data and things like that. There's a really cool new service called graph CMS, which aims to be a modern CMS back end. So basically, the the CMS part would live on their servers. And it's really super slick. The interface is really, really slick, adding fields and all that stuff. And then it exposes a graph qL API that you can then use to actually build out the front end of your site. So if you don't want to have to deal with the server side of stuff, graph, CMS looks like a really pretty sweet option there. The interface again, it's like pretty darn, pretty darn hot. - -68 -00:40:58,530 --> 00:41:36,480 -Wes Bos: Yeah, I really like these these, like, sort of back end as a service for you. And we'll talk about graph cool in just a second as well. But it's kind of neat, cuz even our sponsor today was, if you It seems to be a lot of people are just building front ends of websites. And when you need a back end of some case, you can do a traditional server, you could do serverless, which still requires you to code and interface with database. But sometimes you just want to save some frickin content to a database, and you're not reinventing the wheel. Right? And it's pretty exciting to see that all these different services are popping up. - -69 -00:41:36,600 --> 00:41:37,940 -Scott Tolinski: Yeah, absolutely. - -70 -00:41:38,010 --> 00:41:40,860 -Wes Bos: So graph CMS is not open source. Is that right? - -71 -00:41:41,630 --> 00:42:03,210 -Scott Tolinski: Uh, I don't think it is. But there might be there might be an open source version of it. I'm actually I'm not quite sure. I feel like there was something about that at some point, but I'm not I'm not sure if it is. Yeah, I would say there there is a did definitely a software as a service. Let me see, here's graph QL. CMS repo. - -72 -00:42:03,600 --> 00:45:54,570 -Wes Bos: I don't think that it is I'm looking at their, their GitHub. it very well may be that they're moving really quickly right now. And they're developing under the hood, before they open source it. Because this this is what happened with prettier as well as prettier was developed almost entirely under wraps. And then was open sourced. And the author of it said that allowed him to work so much faster, without all the like noise, hot drama and all that like I like we all know how exhausting it can be to manage, especially for a popular project can be to manage your your thing. So it might come open source at one point. Speaking of being open sourced, there's another huge one in in the space. It's called graph. Cool. That's that graph cool. Which I find hilarious for a database name. And what it is, is, it's a service where you sign in and you have you make your schema via their back end interface, you can either do it via the command line and like the settings file, or you can just use their amazing GUI on the back end to be like, I want to create an item. And my item will have a name a description, a price, that's a number and an array of strings, which has tags. And then I also want it to have a category, but category is another item and a category will have a title and a description. And then I can link those two as relationships. And then when I want to query the latest 10 items, I can also populate their category in their the category description as well. And it's pretty neat because now if you want to build something, whether it's just a quick app or something even bigger, you can just use graph cool as your entire back end to hold all of your data, they expose the all of the different all of the different methods that allow you to pull data from it, they expose all of different things that you can use to sort your data. They expose all the mutations where you can update or create an update. It's I've been a been a huge fan of it. I initially, when I was initially looking at my graph qL course that's going to be coming out in a couple months. I was looking at a couple options, including building your own. And I got like a couple hours into building your own. I was like this is way too complex for for something like this. And then I looked at I was been chatting with the graph cool people. And I'm like this is exactly what I want. But I don't really want to be recommending something that isn't open source. Which is a bit hypocritical of me because my other react series is built on Firebase. But what happened after I released my Firebase is that parse went under and like what happens if your database provider you built an app on top of this proprietary database thing, what happens if they go away? Especially because graph cool as a startup? What happens if they run out of money? And they say, like, yeah, like we're committed to your data, but like, there's always the hit by a bus, or it just goes away, right? And then everybody's going to be out of luck, or having to do a whole bunch of work to switch it over to a non proprietary system. So what they did tell me many months ago, what I wasn't allowed to say it is that they will would be open sourcing it. And it is now open source, meaning that you can run your own instance of graph cool without using their service at all, which is great. I don't would never want to do that myself. But the just knowing that if they ever go away, there's a GitHub with the actual code that's running graph cool behind the scenes. So I was pretty happy about that. - -73 -00:45:54,600 --> 00:46:16,140 -Scott Tolinski: Yeah, I guess my big question is, for both the graph, cool hosted service, as well as the self hosted version of this, what what's the database connection? Because you're, you're building a schema and API, but what like, what is the database itself? Like, what type of database? And how? Like, do you have to manage in control and make those connections yourself, - -74 -00:46:16,140 --> 00:46:44,970 -Wes Bos: it's, you do not have to make those connections yourself, it is the database for you. So it is both a database as well as a graph qL schema that sits on top of it and exposes the entire API with a whole bunch of mutations and the ability to query and sort and all that, and what is the actual tech behind the scenes? I did ask that I believe it's like made it's something like Haskell. Let me Let's pause a second. Let me Google it. - -75 -00:46:45,030 --> 00:47:15,900 -Scott Tolinski: Okay, so from their FAQ, what database is graph cool. Using graph cool is based on sequel, The hosted version of graph cool, uses an instance of AWS Aurora under the hood. And when running the self hosted version of graph cool, you can use my sequel. So it seems like my sequel for your self hosted version. And then something a little bit more fancy for the the hosted version. - -76 -00:47:16,620 --> 00:49:52,170 -Wes Bos: Pretty neat. I'm also just reading their FAQ here. It's been maybe a month or so since I've been in it. And I say wait a minute isn't graph qL back end as a service. So another cool thing that graph cool does it's it is the Database as a Service, and it does run both on your own server or you can use their their hosted one. But they they now call it a graph. qL graph cool framework. And what they also do is have the ability to just run your code as well. So if you are running an app, you can obviously store data. But what happens when you need to resize an image or send an email or charge a stripe transaction, that song where you're going to be doing my course as well? Like, what do you do, right? Do you have to like run a separate server just to run that code and then talk to us. And then their solution to that in a lot of solutions out is you you sort of run them in the separate functions, people call them serverless function or Cloud Functions or AWS lambda, you just basically write a node function that takes in the request. And you can trigger these these functions to run specifically on data creation. So in the case of mine, what we do is we create a charge that charge saves to the database. And then my function will then run and pick up that charge, go to stripe API and charge it and then come back with the the result, which is either the charge failed, and you delete it, or it was successful, and you store all the tokens and everything that you need to in your your graph, cool database, which is pretty neat. So it's kind of a one stop shop for an entire back end. Where if you need to do anything, it's likely either just storing data or running a separate Cloud Function that comes along with it. And they are slowly are now opening up the ability to just have all of this stuff running on your local computer, meaning that you don't have to like create your schema via their UI. Their UI is really, really nice. Because it's just like you just can like drag and drop relationships and add new fields without without any trouble. The downside to that is that it it's not in your version control. And you can't just like Well, what do you do with Dev and staging and all these things, right? So they are adding the ability to just have all of these things, including your Cloud Functions and your database and your authentication rules, like who can update and read and do the whole CRUD operations on your different pieces of data? All of that can be in a, a folder in your actual project, right? - -77 -00:49:52,350 --> 00:50:30,480 -Scott Tolinski: Yeah, love. So this is pretty cool. Yeah. I mean, these are sort of like, new classes of things and all this stuff's a little bit different. Like I mentioned, you know, like static site generators, yeah, they've existed. But the way that Gatsby does, it's really interesting and fun and cool. Like, same with graph CMS, it's, it's sort of like content flow where it's thinking like an API as a service. But it does. So in a really nice way. I mean, this graph, cool, all this stuff is just really exciting and different. And it blows my mind. But it's also really exciting. I love graph cools, Doc's, some of the nicest Doc's out there. - -78 -00:50:30,660 --> 00:50:36,750 -Wes Bos: Yeah, their documentation is extremely well done. And they have a tons and tons of examples. - -79 -00:50:37,290 --> 00:50:38,730 -Unknown: A great YouTube channel, too. - -80 -00:50:38,820 --> 00:51:24,030 -Wes Bos: Yeah. And their slack is extremely responsive. So same with the Apollo, I recommend if you're getting into this stuff, at least I had, like 4000 questions when I was first, this, and a lot of them were fundamental understandings of how does graph qL work? Or how does Apollo work? Or how does graph cool? Because that's the other thing is you have to understand, like, do I need to search for something that's graph cool? Or Apollo? Or, or just graph? qL? In general, right? Because it could be the spec or the implementation or the actual database that you have. So I would recommend jumping into the slack. Because their their help is really good. The community around the stuff seems seems like everyone is pretty excited. And, and pretty motivated for for making graph qL pretty big. - -81 -00:51:24,120 --> 00:53:31,470 -Scott Tolinski: Yeah. And honestly, if you want to get excited about graph qL, overall, just try it. Because that was one of the things for me, it was like, I sort of got why it could be cool. I thought it looked interesting. And then I used it and was like, not only do I have to use more of this, I have to convert my entire site to be using this right now. Because it's that awesome. It just you just leave it on you. I Oh, yeah, it's like, right before I write right, when I got back from Michigan trip, I decided to convert one little query over to graph qL on like a side branch using Apollo for my site. It's like, I'm just gonna move over. I think it was something really little like the Oh is the voting for if you're voting on future series, it's a really small commitment, very small object. And I was like, Okay, I'll just, I'll just check this out. And then, man, it was instantaneous, that like, the things like the relational database stuff, the mutations and all sorts of stuff like that just instantly made my life instantly better. And I was like, I have to drop everything I'm doing. And I just grinded it out and converted by entire data layer over to Apollo, I'm using link states, I'm using local state via Apollo link state I'm using connecting it to meteors account system. Man, it is so so good. It is so good. My current API is just, I feel like the amount of stuff I'm going to be able to get done quickly now that I have this in place is just I it was it was any little bit of, you know, strain or overworking myself I did to get this done. It was absolutely worth it. And I'm superduper psyched about the data layer going forward. - -82 -00:53:31,799 --> 00:53:41,130 -Wes Bos: So that's pretty exciting. I want to ask you a question about the the local data because one cool thing about using Apollo is you can use these or they call adapters. - -83 -00:53:44,400 --> 00:53:54,810 -Scott Tolinski: I don't know why it's called Apollo link state. That's what it's called. Right. Apollo link state is for local state. So Apollo link is sort of their their elayna. - -84 -00:53:54,840 --> 00:53:56,550 -Wes Bos: That's not aware. - -85 -00:53:56,790 --> 00:53:57,390 -Scott Tolinski: Yeah. - -86 -00:53:58,680 --> 00:54:53,280 -Wes Bos: Yeah, so it's the middleware. And it will allow you to obviously you can store your your graph qL data in it. But if you have other data that is part of your application, like UI states, you want to do someone have the shopping cart currently open, or Yeah, what was the last viewed item is stuff that doesn't need to be saved in the database. You can also store that in Apollo and still use graph qL for that, even though it's some data's in your database, and some data is just local data that's stored in memory or in local storage or anything like that. And that is pretty exciting to me, because you don't have to think about where does this data go. And then you also you don't need to use Redux or anything like that. This is an entire replacement used to be built on top of Redux. And you can still feed it an existing Redux store. But this is an entire replacement for using something like Redux. And I'm really excited about it because I think it's much easier to get up and running then than redex is - -87 -00:54:53,339 --> 00:55:29,490 -Scott Tolinski: Yeah, and you don't have to worry about things like invalidating your store. You don't have to worry about re fetching from your store. Again, if you Using this local state instead of Redux, here, you're querying with the rest of your data. Anytime that data is changing with a mutation, your pallo is going to refetch for you. So for me, like, yeah, I throw my local state in there. And I incrementally moved it over where I would do one thing at a time. So it's not like you had to rip out Redux and start from fresh immediately. I have both running for a long time here while I got this going. But I - -88 -00:55:29,490 --> 00:55:30,810 -Unknown: think most part I - -89 -00:55:30,810 --> 00:56:04,890 -Scott Tolinski: love is just being able to write those query like only having one query for all of your information, whether it's local state, or database stuff, or whatever. And just having that one single query and being will say, also, is the nav open? Is there an alert is there whatever in this sort of local state as well. And there's, there's some other links stuff like persistent caching. And I know the the Apollo link thing is pretty young, it came out with Apollo version two, which is fairly young as well. So I think the what's coming as far as like, what you can link into Apollo is, is just going to keep getting better and better. - -90 -00:56:06,960 --> 00:56:15,900 -Wes Bos: So I think that's it for our graph. qL, you have anything else to mention? Yeah, I don't think so. Again, I - -91 -00:56:15,900 --> 00:57:36,540 -Scott Tolinski: think just get out and try it. Oh, we didn't mention I'm sorry. Yeah, there's there are some things we didn't mention, actually. some really cool, small things that we don't need to take up a ton of time on. graphical, we didn't mention galipeau, which is like it. He's the best. Yeah. So graphical is this interface that allows you to build queries, graph qL queries. And if you're running a graph, qL server, like with Apollo, that automatically exposes another URL, which is graphical. And graphical is an interface allows you to build out these queries and test them out. There's, it makes your mixes so well, one, it gives you code hinting. So like, if you start typing in PR, it's going to say or do you mean is the query looking for products, and you can enter, you put your brackets and you say what you want, but it's like a documenting your API allows you to see what fields are available, allows you to test out everything and see that data that's coming back you you hit like a play button, and it spits out the data that's coming back. So you write your query, hit the play button, here's all your data that's, that's fresh right here. And that way, I can test out all your queries ahead of time to know exactly what you're getting into me that the graphical thing is one of the things that just completely swayed me towards graph QL. It was like a brilliant first experience with that. - -92 -00:57:36,780 --> 00:58:16,050 -Wes Bos: So good. If you've ever used like postman, or you've ever struggled, struggled with postman, or any of these other REST API apps where you have to craft these things. Graph qL is soft, self documenting, because it is typed, meaning that your the graphic qL will know about all of the mutations, all of the queries all of the fields. So as you start typing, or I think if we hit control space, it'll just pop down a list of possible fields that you can query from, and you never have spelling mistakes, and you know what all of your functions are, you don't ever have to go looking in documentation for them, because it will start to suggest them for you. And that was super exciting for me when I found that as well. - -93 -00:58:16,140 --> 00:58:33,330 -Scott Tolinski: Another low key awesome feature is that I don't know if this is Apollo or graph qL is doing but like, I would I think is probably I don't know, either way, if you type in a query and you misspell it, it occasionally finds the right one for you. Like if I add products, it'd be like, Did you mean products? Did like? Yes, I - -94 -00:58:33,330 --> 00:58:33,840 -Unknown: did. Thank - -95 -00:58:33,840 --> 00:58:35,580 -Scott Tolinski: you so much for finding that. - -96 -00:58:35,729 --> 00:59:05,370 -Wes Bos: Yeah, it's very easy. Once you get past that initial learning the new concepts behind graph QL. It's very friendly and very developer friendly. Whereas rest is sort of wild west where there is like best practices and rest, but no one really follows them. So you have to like figure out how every single individual API works. Whereas with this, it's all a standard, it's all implemented standard graph, QL. It's gonna be I think it's gonna save you a lot of debugging time. - -97 -00:59:05,399 --> 00:59:47,910 -Scott Tolinski: super friendly. Yeah. Also, one more. One more quick, quick thing is Apollo engine, which is basically a service that you connect to Paulo via a unique key. And then it tracks all your queries, and gives you insights into how your API is performing, allowing you to write a more performant better API. So it basically gives you like query times and helps you figure out how you can write faster queries and maybe potentially make your application perform much better. So giving you like, key key insight into how things are going and so that's, that's a killer feature for me. I love stuff like that, because it's easy, and it makes your life a lot better. Yeah, - -98 -00:59:47,939 --> 01:00:14,220 -Wes Bos: so Apollo engine is that they're, they have a fully managed one, which is how like, you might be asking, like, how is Apollo doing so much and they are a company it's it's the meteor folks They will they have the ability to give you this thing called engine that will sit on top of your existing graph qL like Scott said, and you can pay for that. Is it open source as well? Or is it just school - -99 -01:00:14,220 --> 01:00:17,880 -Scott Tolinski: managed? I'm not quite sure. - -100 -01:00:18,930 --> 01:00:28,140 -Wes Bos: So check it out. But that's how the the company Apollo is able to sort of fund the development all this amazing stuff, which is pretty neat. - -101 -01:00:28,290 --> 01:00:54,540 -Scott Tolinski: Yeah, yeah. So definitely super cool there. Yeah, I think that's it for for graph QL. It's a big topic. I'm sorry. if we missed anything. It's one of those things that's like, so we did different in in changing I hear we had like a page full of notes of stuff I wanted to talk to, and we still somehow missed graphical until the last minute. So that's just how it is. It's a big fun, cool thing. Yeah. Do you have any sick pics for this week? - -102 -01:00:54,569 --> 01:02:13,440 -Wes Bos: I do. And it's a podcast, which is this one. This you should listen to this podcast and you should go subscribe a friend. No, it's a it's a podcast called oh my gosh, I'm forgetting the name of it one sec. podcast called the indicator. So one of my favorite podcasts out there is from planet money in which it's like a economics podcast. But it always like goes into very interesting things like how the price of oil changes, or they one year they made a T shirt and they followed it around the world. Or they they once explained the concept of commodities trading to me and how orange juice and futures are traded. And it's just, it's just one of my favorite podcasts ever. That just explains how it works. And they started a second one called the indicator and it's just a short daily podcast where they break down some some news. So often, you'll hear some news about economics, and you'll understand what it is. And what they do is they make it very accessible. And they explain what is it what are the repercussions, what might happen, etc, etc. It's just a short little podcasts. I love listening to it. So my walk into the store sign, quick five minutes. So check it out the indicator from planet money. - -103 -01:02:13,680 --> 01:02:28,170 -Scott Tolinski: Nice like that. I have to subscribe to that. I like stuff like that, because it gives you a little bit insight into all sorts of things, but big picture stuff and just sort of makes you a little bit more. I don't know, well connected overall. - -104 -01:02:28,200 --> 01:02:33,230 -Wes Bos: Yeah, well rounded. You're kind of being an adult and understanding how the world works. - -105 -01:02:33,270 --> 01:02:34,560 -Scott Tolinski: Yeah, right, exactly. - -106 -01:02:34,770 --> 01:02:36,210 -Wes Bos: What do you got for me a sec pick? - -107 -01:02:36,230 --> 01:03:47,970 -Scott Tolinski: Yes, it's something that you know, I've read a while ago, when they first came out, I think I was like an original Kickstarter backer on these books. The you don't know, j s book series. There's a whole bunch of books on various topics in JavaScript such as this and object prototypes, scopes and closures. Yes, six, and beyond async, and performance types in grammar. And these are all from Kyle Simpson. These books are, in my opinion, some of the best JavaScript books that exist because they really make learning these concepts very approachable, but get really super in depth. Like, I don't know how many times I've cracked open books like this, that are going to go in depth on a topic and your eyes just start to roll back and you start to get asleep like this. These books were very engaging for me. And I felt like they went very, very deeper than most and really helped me understand concepts in JavaScript that were maybe not so obvious. First time. First time around when you're learning everything. So love this book series. It's excellent. I check back I reread them all the time just for fun. They're they're just really good. - -108 -01:03:49,560 --> 01:04:13,800 -Wes Bos: Awesome. That's a sick pic. I know. I know, some people got butthurt by the title you don't know. .js but they did. Yeah. billion butthurt over everything. Yes. means like, like, you don't you probably know JavaScript, but you don't know all the intricate details and the whys in the house and all the little gotchas here and there and that that's what these types of books that really really get into - -109 -01:04:13,860 --> 01:04:17,250 -Scott Tolinski: it's probably a play on the you don't know jack to I think - -110 -01:04:17,250 --> 01:04:27,840 -Wes Bos: that's what I was as well. Yeah. But people it gets lost in translation. Cool. Well, that about sums it up for today. Thanks so much for tuning in. - -111 -01:04:27,840 --> 01:04:30,540 -Unknown: I wait. Hold on, hold on. I'm - -112 -01:04:30,540 --> 01:04:31,980 -Scott Tolinski: plugging, plugging. - -113 -01:04:33,390 --> 01:04:39,090 -Wes Bos: Yeah, let me plug here for a second. Shameless plugs. I forgot how to podcast after over the holidays. Oh, no. So - -114 -01:04:39,090 --> 01:05:31,560 -Scott Tolinski: what this is, is, uh, the other day, was it Monday of last week, I was sort of sitting around like, Well, what do I do? What's the, you know, fresh start to the New Year like, Yeah, I was like, You know what, I'm gonna extra record a whole bunch of graph qL tutorials because I've been just, you know, plowing through graph qL for the past couple of weeks. So I made a pretty tutorial series on level up tutorials COMM And it's it's going to be continued today's Monday that we're recording it. So by the time you listen to this, there's going to be new videos up. And it's full stack graph QL. Now it is using Meteor. So if you're not interested in Meteor, don't worry, I'm going to be having some graph qL content without that. But it's like, Hey, here's how easy it is to get up and running. Graph qL full stack with Apollo Meteor react. And so it's all free videos, the code is going to be all available, check it out, we're going to be building something cool. - -115 -01:05:32,159 --> 01:06:06,090 -Wes Bos: Awesome. Looking forward to that. We'll put a big link to that in the show notes. Make sure you go click it. I'll plug my upcoming CSS Grid course. It loads will not be out by the time you hear this. But it's coming out probably in about a week, maybe a little bit less. I'm pretty much done it just wrapping up a couple little things having some people go through it make sure the contents all safe and sound but really proud of it really excited to get this thing launched. It's gonna teach you all about CSS Grid. That's gonna be at CSS grid.io. Awesome. - -116 -01:06:06,539 --> 01:06:07,710 -Scott Tolinski: Cool. Looking forward to it. - -117 -01:06:07,710 --> 01:06:09,660 -Wes Bos: Awesome. Can I end it now, Scott, - -118 -01:06:09,660 --> 01:06:11,070 -Scott Tolinski: you may we - -119 -01:06:12,690 --> 01:06:19,950 -Wes Bos: thanks so much for tuning in. Someone said we didn't say pace again. So let's do that. Alright, please. - -120 -01:06:23,310 --> 01:06:32,340 -Scott Tolinski: Head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax270.srt b/transcripts/Syntax270.srt deleted file mode 100644 index e04eebcde..000000000 --- a/transcripts/Syntax270.srt +++ /dev/null @@ -1,408 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,820 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:05,760 -development treats out there, - -4 -00:00:06,140 --> 00:00:10,550 -strap yourself in and get ready to live ski and Wes Bos. - -5 -00:00:10,550 --> 00:00:10,970 - Welcome - -6 -00:00:10,970 --> 00:00:50,060 -Wes Bos: to syntax. This is the podcast with the tastiest web development treats out there today we've got a banger of a show for you. We are talking with Filipe Névola probably butchered that. But he's here to talk to us about Meteor and specifically like what's happened with Meteor in the last? I don't know, six months or so. Some pretty exciting stuff coming up. We all know Scott is number one Meteor fanboy. So we've got some really good stuff for you today. We are sponsored by Log Rocket, which does your client side session replay and Sentry he does all of your error and exception tracking. So Scott, welcome and how you doing today? - -7 -00:00:50,339 --> 00:01:33,450 -Scott Tolinski: Hey, doing good on highly caffeinated and ready to go. Amber's talking about Meteor. I love to talk about Meteor. So I'm really super excited for this one and excited overall. Yeah, just generally excited, you know, which is a good feeling in these in these current times, you know. So with us, as the West mentioned is Philippe nivola. And I'm so sorry for this butchering, you said it's Portuguese. So the Portuguese is not a language of mine that I'm comfortable with. So, uh, welcome to the show. Philippe, do you want to give a little bit of a heads up about background, who you are, what you're doing currently, maybe what you've done in the past, or what sort of stuff you'd like to work on. Just a quick little overview of view in your work. Okay, great, - -8 -00:01:33,479 --> 00:02:14,520 -Filipe Névola: and what your pronunciation was very good, then I am Filipina, Hola, it's different, but almost there. I'm a developer for like, 15 years. I start with C c++, like code challenge and in diversity, and so on. I even create a simulator with Fortran in the past what's crazy, and it's really hard to code with Fortran. And then I was like, a Java developer for many years, more than 10 years. And in the past years, like five years, I'm mostly using JavaScript, professionally. And also like I, I really love to code that I'm coding all the time, my side projects, and also in my companies. - -9 -00:02:14,609 --> 00:02:19,250 -Scott Tolinski: Cool. Right now, currently, you are what is your role officially with Meteor? - -10 -00:02:19,439 --> 00:02:42,410 -Filipe Névola: Officially, I am a meteor evangelist. But then when I died tiny, like they asked me to help with this role. That's the mature evangelist, but me actually helping with my stuff internally. And it has been great so far, like me working for tiny with mature in the past, I believe, almost nine months, and has been a very good experience. - -11 -00:02:43,079 --> 00:03:37,979 -Scott Tolinski: Cool. So for those of you who haven't been paying attention, Meteor was owned and created by the meteor developer group. And I don't know the timeline for this, I don't know if you can fill in some of this stuff. If you know the history, the end of 2011. I picked it up around 2011. Around dish then when it was when it was in its conception, really liked it. I've been using it ever since level up tutorials has been built on Meteor since 2000. And Dang, I don't even know 2013 or 2014. It's been on it for a long time. So I've been in the community for for quite a bit of time, however. So it was created by the meteor developer group who currently owns and runs Apollo. However they last year, sometime mid last year was acquired by a company tiny, tiny owns dribble and a whole bunch of other stuff. It's a it's a company based out of Canada, so West up in your your territory, and they they own a whole bunch of stuff. - -12 -00:03:38,039 --> 00:03:39,449 -Wes Bos: Yeah, proud Canadian. - -13 -00:03:39,479 --> 00:03:46,410 -Scott Tolinski: Yeah. So briefly, you sleep and you want to give like an overview of what exactly meteorite is, yeah, - -14 -00:03:46,410 --> 00:05:12,750 -Filipe Névola: before we jump into this, I just want to also mention, like, my experience with nature, then I'm using meterpreter, since like 2012, or 13, I'm not sure because it's so long ago. They're like, I'm using nature for all these years. And I'm using like, in my daily basis, and I'm building like real projects with these putting projects in production, then it has been a very great experience. And because of that now I'm here as an evangelist, because sometimes when you see an evangelist, you think the opposite, right? Okay, somebody hired this guy to talk good things about the technology or about whatever. But that's not the case. I was already pretty happy with meter. I was already working with meter. And then I sent an email to tiny just a quick background story. Say, okay, you acquire Meacher, how can I help? And then we start to exchange some emails and indane. I'm here, like, but but that's the story. I was a user good lesson. Yes. And I feel depends, like, I know the pains of being in the other side of an open source project that has a company behind it. And I think that's also good, but I but what I always asked for the community like keeping, giving me your honest feedback, because maybe with time, I can lose a little bit This side of the bank. And then I want to know what's working right now. Like, how can I improve meter experience? Now that I'm in the other side, but I missed you using meter, then I mean, both sides. Awesome. - -15 -00:05:12,770 --> 00:05:52,830 -Scott Tolinski: Yeah. I mean, you were an evangelist before now you're getting paid for it. So that's like a fantastic little transition, right? But it's also a good lesson to say like, hey, when we see these changes happen, like somebody acquire somebody or whatever, man, shoot your shot, reach out, I know, we talked about stuff like that all the time on the show, whatever you mentioned, West, like, oh, Dino Dino exists, oh, that might be a good opportunity to, you know, Stake Your Claim into some being the dino expert, you know. So let's give our background for our users who might not know anything about Meteor, let's say you know that it exists. And maybe you have some wrong ideas about what exactly it is. But do you want to give like a quick overview of what that Meteor is and why you might want to use it. And - -16 -00:05:53,220 --> 00:08:22,710 -Filipe Névola: meter for me is a platform to develop into deploy JavaScript apps of outsides. And I can try to break this a little bit. Like develop it. What I mean, we've developed with mature nature is like is composed by two parts, we have the first part that are the packages that you can use to write your app, then you can take advantage of code that others are read, have wrote in the past, then you can use this code. And then nature provides a lot of good batches. And part of dispatches, they are like the core of nature, then you get get this for free. And they're like your web app, like you can think about express or your WebSocket connection, if you want to use real time, then jmeter is this platform that provides this packages for you. And also mature provides the abuser, then you don't need to use Webpack, because Meteor has its own bundler and compiles everything for you. And it works in a very, very nice way, then you have this to to develop your applications. But in the end, Meacher in the runtime, it's just another application. That's also something that maybe some people are confused, because they see meter, and they see node, it they don't know like, Oh, they are the same. They're not the same. But nature is just node gold running also in the server. And when meter is running the client, it's just JavaScript code running in the client, then it's not like a new language or a new, like runtime for JavaScript. It's just a bunch of code reading to help you to create node apps. That's the whole idea. And what I said that is applied the furniture developing house to deploy Javascript app, because the meter as a company, we also have a product that's called galax, where you can publish your code there, then, of course, because the same company was behind these two products, there will be service, that's the meter and the the core platform where you can deploy your code, everything was thinking was done thinking about meter, then we have like painters and dashboards with your connections, thinking about WebSockets, you have approximator with WebSockets in mind as well, then that's the whole package. That's why we call it like jmeter is a platform where you can develop apps, and not only web apps. jmeter is also integrated with Cordova. And then you can also deliver native apps in the stores using just meter in on JavaScript in that report. Ah, - -17 -00:08:22,890 --> 00:08:37,980 -Wes Bos: just to confirm for like our listeners that haven't haven't used it before, like it's obviously a like a full batteries included framework that includes everything from database and API all the way to user accounts and often login, right? - -18 -00:08:38,519 --> 00:08:43,039 -Filipe Névola: Yes, but you can also remove the batteries. If you don't, you don't want to use - -19 -00:08:43,039 --> 00:08:44,820 -Wes Bos: it. Any way to put it. - -20 -00:08:45,720 --> 00:08:50,640 -Filipe Névola: Or you can replace the batteries like you can use mature with whatever you prefer. - -21 -00:08:51,409 --> 00:10:20,940 -Scott Tolinski: Yeah, we actually use mongoose as our database connection layer right now on level up, which is like funny because it's like, a meteor has their own Mongo thing. And we're choosing to not use it if we don't want to, you know, and that's what I've always really liked about it. Yeah, I was one thing I really liked about Meteor that I'd like to maybe highlight here in this whole thing was you mentioned, it's a build build tool, right? So it builds your built builds your code for you. I've never found a build tool that really is as simple as Meteor even parcel isn't as simple as Meteor build tool, because like let's say I want to use SAS code and my code, Meteor add the SAS package, SCSS package, boom, it's in there. And then I don't have to, I don't have to even type anything. I don't have to manually go in and and then added in a plugins config, I don't have to do anything. I just add the package and Meteor is smart enough to know that I'm now using sass, I can just start writing files. It's even cool enough that like on top of that it did. There's like some eager eager loading of certain directories which we can talk about a little bit more. But like let's say I wanted to just start prototyping some stuff out. I add the sass package, I have a client folder, all I have to do is add a CSS file and start typing in Automatically picks it up like I don't have to import it anywhere, I don't have to load the file anywhere, it just picks it up. So there's a lot of like features around the build tool that just make it a really like simple experience, especially to get up and running quickly. It's one of my, my favorite aspects about it. Okay, so we got a little brief overview. It's a node node platform, Philippe, you want to add a little bit more on to that. - -22 -00:10:21,049 --> 00:11:26,309 -Filipe Névola: One thing that I'd like to to add is an analogy, like how to think about meter like, because right now, I know a lot of people that are listening to this, they are used to create react app concept, and also view create concept. Then, for me, Richard is like the Create at react app, or the view client for any framework for any like, library that you choose with JavaScript, because you can run, literally, Meteor creates dash dash react, or dash dash boo, or a dash dash, or Angular or dash dash, whatever, because you have a bunch of dash dash options that are in Demeter create command, and then you have your project already running. And without any configuration, you can just type start typing the code in this really, really powerful. And I'm not talking just about the front end, I'm talking about backing from Jane. And both are connected already. And I know that's a pain when you're using other platforms that you need to think about two different piece. But in nature, they are the same piece. And I think later in this talk here, we are going to explain like how this can benefit you as a developer. - -23 -00:11:27,090 --> 00:12:40,140 -Scott Tolinski: Totally Yeah, I've always liked that too. In fact, when I start a new new project and other platforms, and you have to think about, you know, the back end and the front end being a separate it's like only now with some things like these API routes with like, next j s or I know sapper has their own thing like that, too. Like only Now are we starting to see other platforms that like really do the same kind of thing that or not like rails itself, you know, or Django or one of those. But for me, it's like been so long, where Meteor was like the only only show in town that wrapped up all that functionality. So I've always been a big fan. There's a handful of misconceptions for people who have used Meteor in the past, or maybe were around when media first launched. Because when media first launched, it didn't have a lot of it wasn't necessarily full featured and wanted to do a lot of things. The Meteor way didn't have NPM installs, which was kind of crazy to think about. And so now it's it's much more of a normal, like node platform, just with a whole bunch of extra stuff. Do you want to talk about maybe some misconceptions that people might have around? What working in modern Meteor is like, I know, we briefly talked about this, - -24 -00:12:40,350 --> 00:14:54,240 -Filipe Névola: I believe this is the first misconception like, usually people ask, like, Can I use these which feature? And if you can use a leaf node, or you can use it in the browser? Basically, the answer will be yes, almost all the time. Of course, if you have something very specific that's integrated with Webpack, or another beauty to maybe need to create a plugin, but otherwise, they sort of be always Yes, you can use with nature, if it's not, or if it's JavaScript, because mature is just these two together as well. Another misconception that's very common is like mature, you can only use MongoDB. And, and that's not true at all nowadays, because if you think about the background started that Scott told us, like, the company behind Apollo was the same company behind meter. And like they are creating Apollo in Meteor Development Group nowadays, they still have mature apps in they are using Apollo with nature. And of course, if you know, graph qL, when you know, Apollo, you know, you can connect any database with Apollo with graph QL. Because it's just like a query language connecting your server in your client, then you can connect with graph qL, working connect with rest, whatever data pattern that you want, for mongoose, or yet, then that's another misconception that's, that's very popular, but it's not true. But in the beginning, it was like this, because the nature whole idea was about real time, then we could have a data in your Mongo. And you could have the same data in your browser in Meteor has a library that's called minimum that runs inside your browser. And it's really powerful. And it's really cool. Because you can just write data in in one side and seeing the other side. It's very magical. And but you don't need to use it. Like if you don't want to use it. You don't need to use mini Mongo, it's you can think about mini Mongo as Apollo cache, or any client side cache. But minimum was very simple to publish data, because it's just like, like a mirror of your database in the server. And you can query this database in the same way. That was the whole magic of Meteor in the past. But right now, we still have a lot of companies, a lot of users using this way. But we also have a lot of companies just using a graphical or using as a resting point, then it's it's not tied to MongoDB anymore. - -25 -00:14:55,020 --> 00:15:49,409 -Scott Tolinski: Yeah, anupriya you know, so level up tutorials for a long time was built using the pub sub in Mini Mongo, and I really loved it. And it's so funny because like, now I am on Apollo because I wanted to get things a little bit more, I don't know, like typesafe, or I like the graph qL way of doing things. But I recently started this new tutorial series on spelt in Meteor. And I'm like, I'm really falling in love with the whole mini Mongo flow of doing things where it's like, Oh, this is so nice to, to publish the data to, to then just run essentially, like a DB call on the client side. And it's such a nice way of doing things that I do I miss, I miss doing it that way. And I'm really specifically within spelt, I'm really excited to just see how simple and powerful the code is. So very big fan of that. I think there's also some misconceptions about performance in Meteor, do you want to talk a little bit about that? - -26 -00:15:49,549 --> 00:17:43,800 -Filipe Névola: Yeah. And it's also good to remember what I said in the beginning about Node JS, like mature is just a Node JS layer. And then if you if you think about performance, you should try to think about Node JS, like Meteor will have the same performance because it's just node code running the server. But of course, you can choose features. Like if you want to have a subscription, as Scott was saying, like, I want to have the same data in the server in the same data in the client. And I want this data to be synced automatically, in jmeter does that extremely well. But of course, you need to pay the price, right? Because you want to keep this data in the server. So every time something changes in your database, you interesting grenades, then this has a cost like but but if you want to implement this in your code, you're probably going to spend more memory and more CPU than meter because meter has been doing this for like, nine years. And of course, the code has improved a lot. And besides that, then that's a it's a scaling issue, if you don't take a few precautions, but also right now, we have a lot of optimizations in the community that a lot of companies are using, like reds upload, you can connect reds, just by adding a backyard, and everything will be better. It's it's not like be scalable as hell because of course, you have other limitations, but it will be a lot better. Because red dot blog can provide you a lot of benefits in a way to not find nature that that are new change. And then the way the nature, we reach this change and publish to the clients, it's like it's not true, like mutual gain scale. And we have many companies on galaxy, we run a few thousands of apps on galax running nature in they have a lot of people using it, then it's not true. But of course, if you have, if you want to have very powerful features, sometimes these features will have a cost in the server side. Sometimes these features will have a cost in the client side. It's just about trade offs and not about limitations. Totally. - -27 -00:17:43,820 --> 00:18:20,060 -Scott Tolinski: Yeah, I think that's important. One of the things that like really bugs me, I see this, maybe more than anybody and maybe not as much as maybe you Philippe but I see this maybe more than anybody because every time I publish like a new Meteor tutorial, people will be on like YouTube and say, like, oh, Meteor, oh, that's a word I haven't heard in a very long time. And I'm just like, Oh, shut up. Like, it makes me so annoyed. What do you have to say like for those kind of people who think that Meteor has just not existed for, you know, five years here or something, and how they launched and then it failed? Because it's been, it's been around, there's been an active community, right? - -28 -00:18:20,130 --> 00:20:29,550 -Filipe Névola: Like, for me, it's funny, because every time I also post a video or something people ask, like, is meter dead? Like, of course not. Yes. We do. We talk about meter here. Like we have a community. Like we have half a meter of developers that use meter like it's a lot like you have a lot of audience like people are following meter and using the tools, then of course, meter is not there. But what I have for these people like I'm not angry, like I just think it's funny to listen discretion. But like meter right now, like, today, the day that we are recording, we are very up to date with Node JS, we are using the latest node j. s, we are up to date, if you want to use the Mongo part with MongoDB, then you can use all the features of MongoDB. We are also up to date with Cordova they like Meteor is a very live project. And you can use Meacher with TypeScript. You can use Meteor with react with view which svelte with Elm with Angular, like we can use a meter with any tool that you like, in your, in your from chain environment or your Node JS environment. And also, as Scott said, like the community of nature, I think that's the biggest feature, like the community is huge, and it's very good, because sometimes the community can be huge, but the community's not helping or the community is not engaged enough but with your community. These guys are amazing. Like what they are doing like I have a guy that I would like to highlight here. That's the his nickname is Southern. Like he's doing a lot of rape work for a beauty farmers. Awesome. Yeah, even I have a few Spiner here. I spoil it about hot model replacement. I just test a few brains from And pod mod replacement is coming. And then like we had this from the community. And this is amazing, then, like, if you haven't seen nature for a long time, you should check, check it out our Git repository, we have a roadmap there, then you can see our vision for the future. Also the prs in the code issues, we are replying as fast as possible. We are measuring prs, like, almost every week, we have released almost every month, then it's, that's what I can say, like meter is, is pretty alive. - -29 -00:20:29,880 --> 00:21:29,840 -Scott Tolinski: So I yeah, I think that's really important. I think that was one of the reasons why people felt like Meteor was dead for so long as because even though there was development, it's like Meteor was constantly adding new features and new updates. And the very fantastic Ben Newman was like doing so much amazing work on Meteor over the course of the past few years. But MDG, and the powers that be that owned Meteor just did not care to talk about it, they didn't share it, they didn't have a roadmap, they occasionally released blog posts here and there. But they did absolutely nothing to really like push it forward, in the, you know, the worldview of people who who saw it, so it largely felt like it was stagnant or not changing. Meanwhile, there's a ton of new additions being added to it and ton of new features constantly being, you know, being poured into Meteor, but I don't know, there's no like vocal promotion of it in any sort of way. And that was like really frustrating as a fan of it, because you see all this new new stuff coming in. And, you know, there is no visibility, or the outside community of like, what's going on here. - -30 -00:21:30,660 --> 00:22:06,450 -Wes Bos: I'm interested in like, how to actually use this thing. Having never used Meteor myself, and you saying, like, Oh, yeah, you can use an Angular or view or reactor or whatever it is that you want. So the client side aspect of Meteor? Is it simply just a JavaScript library that you then subscribe to data? And then when that data changes, it gets piped in? Is it necessary to have like adapters for different different frameworks? Or how does that work? Maybe, maybe focus on react or or, or view since that's what our, our audience is probably most familiar with? - -31 -00:22:06,570 --> 00:23:26,640 -Filipe Névola: Great question. And actually, you don't need to think about mature at all, like you, the only part that you need to think about mature is the entry point, like mature, we have two ways to have an entry point for the client side, you can defining our package JSON, in a few that's called meet your main module in the new case, okay, my main module four declined is this file, and you just put the path there, that's one way, the other way, you can just create a client folder, a folder that's named client. And then you can just put some files there and return results. So we start to load from this folder, then, and that's it, like you can put inside this folder or inside this entry point. And he called that you want even if you just want to, to use jQuery, and then you can just try to write to your DOM, that's fine. That's going to work. And in react works exactly like this, you just put the react, render first function there, and you provide the first component that you want your huge component. And that's it. Besides that, you just need to put also an email there, if you want to put something there, Heather, or if you want to put something the body, like you put your HTML file in the same 80 points that I mentioned. And that's it, then you're ready to go. You can use any framework. Of course, if you're a framer to have a think Blake's library, and you need a special compiler for distinct print library, maybe need to write a plugin. But usually, you don't need to do anything. - -32 -00:23:27,120 --> 00:23:34,050 -Wes Bos: Okay, but how does the data get from Meteor into your react application? - -33 -00:23:34,320 --> 00:25:40,020 -Filipe Névola: Okay, then we are going to the data layer, like then you can choose again, whatever you want. And maybe that's a weakness of meter, because it's so open, then maybe it's harder if you're just starting to make this decisions, because you can do whatever you want. But if you create, if you like, give this example, you type meter, create dash dash react, and you choose your name like my app, then you have a red setup for you two pieces, the client side, as I said, you very simple just react code there. And you also have the server side set up for you using Mongo using collections. That's the name of the backing meter, then you can publish it this data, then you can use the metered publish function, and you just return a Mongo cursor, like activity dot find, and that's going to return activities for the mini Mongo, then in the client, as you're used to nowadays in react, you can just use a hook that's called use tractor, tractors there is this idea of real time data, and also reactivity, then you can have updates all the time, for free, basically, then this hook, you can write, again, the same function, you can even use the same code to find the activities because the activities will pop up in your minimum in your client in the activity to be there. Because you publish these activities. Then that's it, you can list activities and if you type right now, if you stopped This, this audio and you go to your terminal and you start Meacher and you run this comment, this is exactly what's going to happen. And this part is the magic that you just publish all the data from the server to the client. And if you don't want to do that, and usually you don't want to want to choose whatever you want to publish from the server to the client, you can call the function subscribe. dysfunctional subscribe, you can ask specific data, you can pass like some parameters to filter in the server. And then you can publish specific data. But basically, you can you just need to use a hook. And then you need to publish the data. But he's that react hook as any other react hook that you have available? Yeah, - -34 -00:25:40,020 --> 00:25:50,550 -Wes Bos: that's I like that a light doesn't like shoehorn you into a specific way of coding. But there's lots of options. And you could pretty easily add this to an existing application as well, it seems like, - -35 -00:25:50,880 --> 00:26:05,040 -Filipe Névola: yep. And you could also hit place at this hook with use query from Apollo or using mutation from Apollo, the code would be the same, but you just use a different hook, then you get the data in a different way. And you interact with the data in a different way. - -36 -00:26:05,790 --> 00:28:11,550 -Scott Tolinski: Yeah, and I posted a like a little code snippet of use tracker in the show notes, if you want to check that out. It will be there it is, it is as simple as really just a US tracker, and then inside of there subscribing to the data, running that mini Mongo query, and then returning that data like that's it. And in fact, in spelt, it's even easier because spelt has a really neat pub sub kind of thing on the front themselves in terms of like subscribing to, I guess it's not upset, but like in terms of like subscribing to data, but you don't even need like this whole use tracker business, you just do like dollar sign the thing equals and then a Mongo query, essentially, it's so cool that it like it works very, very simple. It's like a one line of code to get some data in your your spelt site. And as we mentioned, Meteor works with anything, including both of our sponsors. Today, one of our sponsors is Log Rocket, I used Log Rocket myself with Meteor on the front end. And it's fantastic. It shows you all of those hard to find bugs, all of that difficult stuff where man, your user, your user, it turned the website in to a crocodile. I don't know how they did that. But you can find out how with Log Rocket at Log rocket.com forward slash syntax, sign up today and stop guessing why bugs happen. If you use that URL, you're going to get 14 days for free. And what you get is a scrubbable video replay of the error happening along with the Redux store, the network activity that console logs and errors, any of that stuff that you need to actually solve the bug. I mean, let me tell you, there's so many times that you just you just wish you could see the network request of any errors that users have. And you can with Log Rocket, so check it out Log rocket.com forward slash syntax. I think we've we've largely touched on some of this stuff already. But I think it might be worth reiterating here. What do you feel like the ideal use case for Meteor is like, let's say like, I'm a developer, I have some react skills, or I have some few skills. Why would I like what's the situation that I would say, Okay, now, now, maybe I shouldn't think about using Meteor, - -37 -00:28:12,060 --> 00:30:40,530 -Filipe Névola: let's rephrase your question a different way. Like, what are the keys that you should not use Meteor, because you're so flexible, that maybe it's easier to respond this way? Like, I personally, I would not use meter for simple is that websites, like, I think we have amazing tools right there, out there nowadays that you can use, like get to be a next GSE, or you name it, you have great tools, I think there is one more that's very popular that I'm missing right now. But I would not use Meacher to create just a static website, because one of the power of powerful features of jmeter is that you have your server and your client side together, they are not together because they are not deploying the same place. But you can use them together in a nice way. And if you just want to like a simple static page, you don't need that, then I don't think is a good use of meter. But even though some people really like each other a lot in the greater project that's called meter client bundle that can really create this for you base it on a major project. But I don't think it's the best choice I think you have better choice for, for popular for like simple websites. But in the other case, like complex applications, or social applications, or whatever you need real time, like Meteor is a great choice. Like you are going to write just a few lines of code. And you can have subscriptions and you can have a lot of a lot of options. If you have like more needs like for relationships, very hard to do data fetching a lot of John's or this does kind of work I would also use meter but I use meter in combination with Apollo or other graph qL library because graph qL is a very nice way to define your data, your models, and one one use case that I really love about Demeter in arid beauty. I hope just using this When you have like simple needs, maybe a simple app that you want to create, I just go with blank metered methods, which are methods is a way that you call basically a function using a string as a name. And the data comes from the server, then you can just ask like, go get my list of activities again. And then you just pass a string, any the server, you just return yourself activites. And meter is going to serialize to do all the hard work for you keep that type skip the, the complex types that you can have your MongoDB. And that just works, then it's it's very cool for simple apps for complex apps. But I don't think it's the best choice for simple static web pages. - -38 -00:30:40,950 --> 00:31:38,360 -Scott Tolinski: Yeah, I would agree. If you're doing anything real time in your you plan on using like a node thing. That's really where it like super shines. Like, it's superduper fantastic, easy for that. I I'm not a fan of doing real time with anything else. But it's not like limited to real time. You know, I think that was like maybe a misconception too, is that if you're doing Meteor you are doing real time, like we don't do real time anything on level up. And it's perfectly good for us. So, okay, now let's let's turn it into like, maybe a little bit less positive territory. And like, let's talk a little bit about why Meteor, I don't want to say a failed, but like, why the hype was so hot when it first dropped? And then like dissipated pretty quickly? Like, do you have like a good understanding of why exactly Meteor did not continue to maintain its hype cycle? Or why why was really hyped up and then less hyped up almost immediately afterwards? - -39 -00:31:38,670 --> 00:33:23,360 -Filipe Névola: Yeah, I believe Mitchell was ahead of its time. And that was really shocking when people saw liking 2011 2012 a way to publish data that easily. And that was the reason for this hype. And if it was just fired, like it was a very good technology. And it's true, a very good technology. But as you said, like I was not in this side in the past, then it's, I'm kind of in a weird spot, because everything that I say, yeah, I'm not saying about myself, then it's hard to, to say bad things about others. But I think it was just a matter of focus, like because the people behind meter development group, they are really, really smart people in very good people, like everybody knows that. But they're focusing a different layer like meter is a solution for the front chain for the back end. And even for the data layer in, they choose to just work in the data layer, that's the Apollo, and then they start to change the company direction. And that, of course, effect meter. Like it's like if you have a company, and you have one project, and then you decide to create the second product, of course, you're going to focus more in one product, or most of the companies, of course, companies like Google, they have multiple products. But most of the companies, they focus on just one product, and then we start to lose traction. And also we have this misconception of meters is is good for prototypes. And I think that's that's really wrong. Because we have a lot of business and you can check out our website, our showcase. There are a lot of real companies doing real business with nature. But that was because nature is so is that maybe some people are afraid to take that series like oh, but that's so is that is must be something wrong with this. I think that's all was also something at this time. Totally. - -40 -00:33:23,790 --> 00:34:54,420 -Scott Tolinski: Yeah, in from my perspective, too. When people jumped into Meteor for the first time, back when it first came out, people were concerned and maybe a little unhappy that it didn't have one like proper NPM support for packages when it like hit version one, I think it didn't, it didn't. And two, it didn't have like, so you had to use a meteor wrapper for every single node package, which obviously is not a good way to do things. And it's been long since dropped, right? but to also, I noticed that people were really upset that everything at version one was eagerly loaded, everything was eagerly compiled and loaded in a way that there were no imports, and almost everything was like sort of global. And while that was like a really fantastic experience in a way because you didn't have to worry about any imports, it was still not scalable, is that normal, like if you're trying to build a large website, having not having imports really sort of limits the amount of control you have over things. So I think those two things really threw people off, but Meteor added those pretty quickly afterwards. And I think if they would have dropped version one with NPM support and with proper, like import module system, people would have been probably a lot happier with Meteor overall and maybe less inclined to dismiss it as being like a prototyping tool. That's to me is like maybe one of the problems is that Meteor might have launched too early with version one. Maybe it wasn't baked enough. But I - -41 -00:34:54,420 --> 00:35:37,770 -Filipe Névola: think we need to understand you hear about timing because it's kind of easy to say right now because you know that NPM is yes standard way to do modules with JavaScript. But at that time, it was not the case like NPM, I think was released in 2010. Then it was pretty early on. Like, it was a lot of discussion like, what's the best way to use node to use modules in general? in JavaScript, they mature, come up with its own solution that Oh, it's called metered packages, that's very similar to NPM, and maybe even inspired NPM in some ways. And then it's it's this weird spot where now it is to say, like, Oh, that was a bad call, we should wait a little bit and integrate with NPM. But at the time, maybe would have done the same? I'm not sure. - -42 -00:35:38,250 --> 00:37:20,670 -Scott Tolinski: Totally. And I was immature enough as a developer, in this sense to personally like not understand those criticisms, like, I could understand the NPM one, because obviously, it was a pain in the butt. But like, the eager loading and the imports thing I remember being like, why would you want to write all this extra code to make it more difficult for yourself when everything's global, and easy? And then like, obviously, now that my application is scaled and things overall have changed, right, I'm seeing a little bit different of a tune where I love my imports. I definitely understand what you're saying, though, because it was very true. Like, how many applications were people writing that were like using that style of imports? And even if there was no create react app, there was no, no such thing as personal Webpack was like, I don't think Webpack existed. It might have been in its infancy. I don't really know the history of Webpack. But it certainly wasn't popular to the degree it was people were I came from Gulp and grunt to Meteor directly with No Steps in between. And I think that's where a lot of people were in terms of the style applications. We've talked a little bit about meteors past few years present, do we want to talk a little bit about meteors future? So Meteor has some new owners, which is tiny at tiny capital.com you can see their portfolio of sites is designer news. Dribble, ride home West, you were right home, you might remember right home right then they sponsor an episode of syntax. A couple years. Yeah, you're back. Yep. Tech meme ride home. Yeah, so these guys are tiny capital now owns Meteor that happened sometime last year, do you want to talk a little bit about maybe that transition, why it happened, what happened and what's tiny doing in the future of Meteor looking like - -43 -00:37:21,330 --> 00:41:31,650 -Filipe Névola: dionisio is Andrew and an angel. I think he saw an opportunity, like MDG was changing the focus to Apollo. And then Adrian took advantage of this change. And he basically bought metered, and metered includes the open set aside, and also the galaxy. That's the hosting platform that meter has. And then like From now on, I think it was like August last year, and then later in November, I joined and then we we start to build this new era of meter. And then we start to update a lot of the components in what I see for the future. And what I can talk about tiny is like tiny is really like interested in health meter, because tiny is a group of companies. And I only have like good influence from tiny, like tiny is really concerned about keeping mature ecosystem healthy. And that mature, it can grow and get have resources to grow in the both sides like in the open source side, and in the in the Gallic side. And that's also very important for me, because I don't want a company that is not hoping for the best of the open source or not hope for the best for the other side. And that's even a little bit crazy to think about. Because if you buy a product, you want to make this product great to improve this product, because you are putting a lot of money that then that's an important aspect that some people when they're coming to her I was asking, like oh, tiny wants to grow meter tiny, one meter to be better, of course, they have to do a lot of money that nobody buys something to kill, then it's not the idea in Chinese is doing this. We have also injured Domo, that's another angel, we have changes. That's the CEO of meter software. That's the new company behind meter. The meter development group is not the company name anymore. The company now is named meter software. And this company has an SEO that's carranger demo. And we also have a magic guy who also have engineered. And by the way we are hiring in this moment, we have another engineer position opening. And that's pretty cool because we are growing our team. And what I see for the future of Witcher is that tiny and mature software company is going to invest more money on nature, we are going to keep resources on nature. And we are going to keep growing galaxy because galaxy in the last three, four months to release a lot of new features. A lot of great, great features like out scaling, you can just deploy your app. And if you start to have a lot of scale, a lot of connections, your app can start another container and it can also scale down automatically later. And as you charge by hour. That's great because if you're a business you just have busy hours At night, you can pay like a minimum fee just to have your app running. And then in the night, you can scale up. And that's pretty cool. And in the future, I see more features and even more advanced features like this. And also in the open source side, what I see is like, better tree shaking that code elimination, right model replacement, as I said, it just does today, a PR and it's working really well already. And we also want to improve the build times and keep delivering whatever the community of Mitchell is asking for, because that's the is the whole idea of time to, to be there for the mature community to provide feedback. And to improve what you have right now, in we are a very stable platform. That's also important because right now with JavaScript in disgrace word that we have, like every day, something new is, is coming up. But meter, if you have a project from like eight years ago, it's very likely that just wait like 10 or 20 minutes, you can run it again, in the latest meter, because we don't have almost any breaking change in this eight years. And we of course, you need to update also your NPM dependencies, maybe you need to, to do some tweaks in your code because of the nodes improvements. But in general, your code is going to work exactly the same. And that's very rare. Like we have even new software new libraries that from each month, it's you need to rewrite your code to keep running it, then that's not the point with Meacher want to have a stable platform for the next years. - -44 -00:41:32,010 --> 00:42:56,670 -Scott Tolinski: Yeah, I've been a big fan of that non breaking changes aspect of it for a long time. Like you mentioned, the meteor has never been the problem. If there's been a problem. It's been, you know, one of my packages needing to be meeting me the right things. Well, there. I don't want to call out react router, because that's the joke. One that like everyone talks about react router updating all the time, but it's usually something like that, that that's the that's the problem. So Oh, yeah, I should I should do as a little side note here. Meteor galaxy, if it wasn't clear is is a hosting platform owned by Meteor to host node apps. But it is not the only option for hosting Meteor, you can host Meteor anywhere that you can host a node app, there are like community run efforts to make hosting easier or more efficient via other platforms, whether or not it's a build pack for Heroku. Or is it Meteor up, also known as mop mop is a community package lead to get easy to appointments going. And those are all really great efforts that have been evolving over time. MCC was one of those packages that like, was a little frustrated. It's like Actually, I don't want to call out MCC because it was the reason why I moved to galaxy because it was like MCC was so iffy at the time. But that was years and years and years ago. And it is a it's got a fancy new website, it's had a lot of work into it. And it looks fantastic now. So I think Mike has gone through a great evolution as well. For those of you who have ever used it before, you might want to check it out again. - -45 -00:42:56,690 --> 00:43:45,240 -Filipe Névola: And that's also very important for Meteor because you need to remember, like we have the business aspect of nature, that's galax. And that's also important, because that's where the money is coming from, then if you have more clients, you can support more mature development. But also, nobody wants to use a platform that you can just run in a single provider right, then that's not the case with metered totally because in the end, when you run meter Butte, you just have a node project, like don't have your meter project in gain, like the final artifact is just a node project that you as Scott said, you can run whatever you want to run a node project. And that that's the beauty of it. Like you can support meter as well. Running on galax is also good because we have great features. But if you don't want that that's not a problem. You can use Meteor in the same way for free and you can deploy whatever you want your code - -46 -00:43:45,600 --> 00:44:05,310 -Scott Tolinski: does awesome. Also awesome is one of our sponsors. That's bad transition, but I did it and one of the sponsors is a Sentry our this Sentry actually works very nicely with with our other sponsor Log Rocket. And do you want to talk about Sentry less? I know that I usually do the Sentry. But do you want to give it a whirl? Yeah, - -47 -00:44:05,310 --> 00:44:06,090 -Unknown: I've - -48 -00:44:06,090 --> 00:45:49,380 -Wes Bos: been using Sentry on my both on my note application as well as in the client side JavaScript for my application as well just to collect all the information about what went wrong stack traces, browsers, cross project issues, all things like that. It's really cool. It hooks up to your your GitHub. So basically, you just install this thing into your application. And then it will start to listen for specific errors, which is really cool, because there's not a whole lot of like, setup that you need to get Sentry up and running. You just install it. And anytime an error is thrown in your application, it will collect all the data that's needed. You can go a little bit further and attach things like user IDs to specific sessions so that if there is a user, if something goes wrong, you can actually track it down to the specific user that happened which is pretty cool. It works as the The different languages JavaScript, Python, Ruby, node, go Android a whole bunch more, as well as all the frameworks. React Django, Meteor, I bet rails, it doesn't have to, it doesn't matter which which framework it is because it works with all of the different languages. And it just just works from there on out. So check it out. sentry.io use a coupon code tasty treat for two free months. Thanks so much to Sentry for sponsoring. Cool. Yeah, one question I have is around serverless. So does like serverless becomes more popular becomes a really neat way to both host your entire application, as well as maybe just specific parts of your application can be thrown into a serverless function. Is there any plans or ideas around integrating that into Meteor? - -49 -00:45:49,890 --> 00:46:52,350 -Filipe Névola: And not? Not at the moment? Because it's, it's quite simple to create a new Meteor app in a few companies are using Meteor not in a serverless way. But you can deploy like your server side code. And in multiple instances, maybe you can split your app like nah, nah, micro service abroad, because it's very easy to start up a new project. And you don't need to configure anything, basically, almost major projects, then, but it's not like a serverless approach. In as I said, like, usually mature, the benefits use both together. But of course, you can just use the client side, and you have support for that. But I don't see right now, like, how are you going to benefit from from this, like the idea of serverless I think nature is more a good fit, if you want to have everything connected now very, very easy way. And maybe later if you need to extract some functions to a separate function that what I do, like if you need your lambda to process a s3 file, but usually I like the idea to have a real back end application. - -50 -00:46:53,100 --> 00:47:09,330 -Scott Tolinski: Yeah. Do you want to talk about any like little known features that people might not know that Meteor can do or meteors build tool? Can Do I have one in mind if you don't hit it, but is there any any specific things that you think that might Wow, people that they don't know about? - -51 -00:47:09,540 --> 00:48:11,280 -Filipe Névola: And that is one that I think it's very important for when you need to run your app needs low low device, like for cell phones that are very cheap. And that's called nesting part. messtechnik part was a proposal for ACMA script, I don't know exactly what's the stage of this proposal right now. But nature supports this already. And it's pretty cool. Because basically what you can do, you don't need to evaluate your code before you need your code, then you can think about imports as variable where you try to reduce the scope as much as possible in which that you can improve a lot the startup time of your application, because if you have a lot of JavaScript code, when you run the unit is loaded by a slow device, it's going to take a few seconds, maybe to load. But if you're not really parsing the code, you're just loading the code, that's going to be much faster, then it's a it's a very nice feature. That's the compiler and not in the runtime system. But that I really like about Meteor, and that helped me to create native apps that have better performance better boot time in. It's pretty cool. - -52 -00:48:11,970 --> 00:48:34,050 -Scott Tolinski: Yeah, it is, it is pretty cool. And it was like one of the first platforms to really have it. I remember when react loadable came out, like Meteor supported that day one. And that was like a really nice experience to have like react loadable and dynamic imports, sort of like I felt like almost before anybody else had them, it was very nice feeling. There's a lot of things like that, that I felt like we got really early like a sink await and whatever. But - -53 -00:48:34,170 --> 00:49:16,650 -Filipe Névola: you know that that's a different feature that you're a major Scott but they are good together. Oh, really, like that's the thing part is just you can put in part anywhere on your meter code anywhere inside a function. And it's not going to not deliver this piece of code, which will also support that in that's called dynamic import. But nasty imports is not to avoid delivering code, the client is to avoid the evaluation of this code. And that can really improve like you have a function. And maybe you have an if condition they're in this if condition you need to load a huge library. Like you don't need to even evaluate this library until you reach this if condition. That's really powerful. I don't think I Wow, - -54 -00:49:16,740 --> 00:49:32,460 -Scott Tolinski: I don't think I've seen this. Come on. I've never used this. So this is nested imports. I think you guys got to make a bigger deal about this in the in the meteor guide. I don't even see this I see this in the migrating 1.4 something's got to add something about that there. Yeah, as I didn't even know there was a third like - -55 -00:49:32,460 --> 00:49:50,040 -Filipe Névola: to to post pretty soon like a suitcase about how I how you can optimize apps using as the new part. It's most important for native apps. Because when you are running computers today, like the computers are pretty fast. But when you're running a native device sometimes like they're mobile, they are limited. - -56 -00:49:50,100 --> 00:50:06,810 -Scott Tolinski: Yeah. Interesting. Cool. So I guess the one thing I was thinking about was like the ability to serve different like bundles to different browsers. That was a big one for me that I think Meteor did way, way first, and nobody talked about it. So do you want to talk about that? - -57 -00:50:07,200 --> 00:51:07,260 -Filipe Névola: We call this evergreen, that is a great post by the great Bang numo explaining all the details about it. But the idea is that in any browser that your client wants us, it's going to work because as meter has both sides, as I said, we are going to say explain about this, like, we know the server side and you know, the client side, then when a request comes from a meter, client side meters know how to understand this request, in he can respond with the appropriate bundle, like if it's a modern browser meter is going to deliver some like ECMAScript five features, if not mature, is going to deliver legacy browser with a lot of polyfuse bundle, then it's pretty cool because you don't need to use polyfills all the time in modern browsers, that usually what you need to do. But as we have the control in the both sides, it can choose whatever is the best bundle for each specific client. And this is really great for your clients because they can use old browsers. And you don't need to worry about these two bundles, because Mitchard does that automatically for you. - -58 -00:51:07,680 --> 00:51:16,650 -Scott Tolinski: Yeah, so basically, you get you get smaller code for the browsers that support newer features. And I think that's like it's effortless. Do I didn't have to do anything to do that. You know, I - -59 -00:51:16,650 --> 00:51:59,010 -Filipe Névola: mean, the same talk like Meteor also produced a different bundle for Cordova. And I don't know if you know, Cordova, but Cordova is a nice way to embed your web application in a native app in Cordova provide reads that you can call the major code as well in Cordova is updated with iOS and Android platforms. And then you can just with one command, you can run your app in a simulator or in an actual device in just with retribute. as any other new tribute, you can also build the native apps. And we are preparing a lot of tutorials and a lot of guides for you to do this very easy. Then if you're planning to release a native app or a web app, but you want to also have the app natively in the stores. You should check it out. - -60 -00:51:59,400 --> 00:52:13,350 -Scott Tolinski: So yeah, we I haven't actually done any Cordova myself. But we had atn on the show to talk about missive, and his app was built in backbone. And he used Cordova right to publish his native apps. That was the case was - -61 -00:52:13,380 --> 00:52:18,810 -Wes Bos: Yeah, it was it pretty cool. The whole app is built in a single codebase. And it felt so slick. - -62 -00:52:19,050 --> 00:52:49,440 -Scott Tolinski: It blows my mind because I use missive every day, and I could have never told you that was a web app. I thought it was a native app. So that got my wheels turning to say like, like cuz I always thought Cordova was a little bit of like a toy, right? It's a toy. It's a WebView whatever. But no, it's not it's it's very full, powerful. And after after using mysid for so long, and knowing that is in finding out as Cordova I was like, wow, Cordova is powerful is much more powerful than I gave it credit for. And I definitely want to take a look at that. Now that I know I can just build a Cordova the web - -63 -00:52:49,440 --> 00:52:52,170 -Wes Bos: is powerful, I guess you mean to say yeah, - -64 -00:52:52,200 --> 00:53:22,650 -Scott Tolinski: unless you know what, okay, don't don't put words in my mouth. You have the web is powerful. Okay, web is very powerful. I'm very a big fan of the web. Trust me. Yeah, I don't know, I want to I want to get those tools. I've actually, one of the things that I had to concern was that level of tutorials like the mobile experience that for me didn't feel like a mobile app. So I didn't want to publish it feeling like a website. So I've been recently pushing out a lot of like a tab bar at the bottom and tweaking those things to make it feel more native. I definitely plan on checking out some of those Cordova features as and also - -65 -00:53:22,650 --> 00:53:51,120 -Filipe Névola: you could have like a pw a native V app in the same codebase just using meter. And that's, that's pretty cool. And you have apps that are doing this, like I have my own apps doing this. I have an e commerce website in Brazil that does that. And also you can check out a showcase you're never going to see there. There is a company that's called bathabile that's doing like incredible event apps just using nature and they can create beautiful hv apps for different conference and it's it's really really great. - -66 -00:53:51,630 --> 00:53:52,230 -Wes Bos: Cool Yeah, - -67 -00:53:52,230 --> 00:55:39,480 -Scott Tolinski: I thought this was really great. I if it seems like I'm you know, advertising for Meteor here or something, it's just that I've been using Meteor for so long and I really have loved it for so long. I've been dying to talk about it on the show. And so I'm so glad that we get we're able to have Philippe on to talk about the current status of Meteor and I'm so excited for meteors growth in future and just I'm just I'm pumped to talk about it so it's not the caffeine talking it is my genuine excitement talking here. So now it's part of the show where we talk about sick pics. These are pics that we have found that they're just something that we think is sick it could be literally anything. I just ate a peach Bobo bar. Bobo's are from Boulder Colorado, I would sit pick this if I could if I knew that most of you could get these things because they're fantastic. But my sick pick today is going to be the amplifi alien and full disclosure. They sent me one of these things, man this is a Wi Fi six router that that looks like I don't even know how to describe this thing looks like it's got an underglow on it. It's a tube Oh says yeah, hot screen. It's it's very sick looking. In fact, when I took a picture of it on Instagram, most people were like, what is that? Like? What even is that? Like, it doesn't look like any Wi Fi router you've seen and has a touchscreen that's constantly telling me my network speeds. It is very, very fast. And I have I have gigabit internet in my house. So am I able to push out Wi Fi six speeds, which are crazy fast up to 7000 to 600 megabits per second. Yeah, I've got one of these things set up and I am loving it. It is the coolest router I've ever owned. And I'm so excited to have it. The app is very fantastic as well. Wes, I know you've had quite a bit of experience with ubiquity yourself, but this is my first product of theirs and man I am impressed. I'm very impressed. It's fantastic. - -68 -00:55:39,780 --> 00:56:19,500 -Wes Bos: Yeah, it's it's like next level I've had the just the regular amplifier at my house for a long time and I've got the unify stuff here at my cottage and I also got the the alien. I install it at my dad's house and man we'd like through two of his old Linksys routers out that barely covered the whole house and just this one thing and it's beautiful like he put it on the bookshelf he kind of little he cut a little like a hole in the back of the bookshelf so you could just like have no wires just hanging out and they just updated it so that the screen on the front will give you all kinds of information about up della download clients and things like that that - -69 -00:56:19,500 --> 00:56:21,060 -Scott Tolinski: how many devices are - -70 -00:56:21,780 --> 00:56:29,640 -Wes Bos: gushing we I got one I got mine free as well like full disclosure, but like the ubiquity gear is top notch. - -71 -00:56:30,240 --> 00:56:52,560 -Scott Tolinski: Yeah, sorry, if this is coming off as an advertisement again, it's like if I would have paid full price for this thing, I would have been feeling the same. I'm gonna show my my speeds right here to the camera. I'm currently getting 600 up and 700 or 700. Up and 600 down. So just a Yeah, just to give you an idea. Why am I here? Scott? I'm so sorry, Wes. - -72 -00:56:53,490 --> 00:56:59,130 -Wes Bos: Oh, that is so that's unreal that you can get that on your phone over Wi Fi. - -73 -00:56:59,640 --> 00:57:01,500 -Scott Tolinski: Yeah, yeah, it is. It's crazy. - -74 -00:57:01,560 --> 00:58:48,230 -Wes Bos: The future is good. I'm gonna sick pick an app that I've sick picked before and just got a bit of an update. It's called parcel app. And this is not the JavaScript bundler. This is a app for your desktop. And for your I think iPhone and Android, and it does all of your tracking. So you throw a tracking number in there for a package and it will detect usually the shipper. And then it will give you updates as to where it's at. And you could filter for delivered and you never have to like go and find the email or bookmark the app. And it will just show you all the updates as to where your stuff is. And one cool thing is that like I have Amazon and a bunch of other places I order from frequently I have a Gmail rule set up and to automatically forward the emails, like whatever has shipped, and then it will automatically add it to to your and I've been doing that for years now. And recently Amazon stopped putting the name of the product that is being shipped in the in the shipped emails, because apparently Google and other companies are scraping people's email to figure out like what was selling what and who's buying what. So Amazon stopped putting that info in the email. And then this, this trick that I've used is not working as good. And they recently are they're in beta testing right now. And I'm a beta tester of licking Amazon integration. So you sign in to Amazon via an iframe in the app, and then it will pull the information about what has actually shipped. Otherwise, you just like product 749 has shipped. Yeah, I don't know what that is. Big fan of this app. I've been using it for years. And anytime there's a bump like this, like something happens. The developer works hard on it. So personal app dotnet. - -75 -00:58:48,450 --> 00:58:54,570 -Scott Tolinski: Cool. Yeah, I just I never heard of this. I just downloaded it. So they got one. What do you got? - -76 -00:58:54,980 --> 01:00:15,120 -Filipe Névola: My sick big should be galaxy. Because I'm using galaxies for many years. On all my major apps, you can save a ton of money with galaxy because we will not spend time with DevOps as we have one command deploy. The only configuration that you need is your Mongo URL. If you're using Mongo, we also have all descaling that it can save money again, because we just need to run many containers if you have many people in your app. And this is done by galax triggers for you. We have integrated APM you have zero downtime, updates, notifications, proxy layer, just customize it for meter WebSockets. And you can use for free for 30 days, up to four gigabytes. That means that you can run eight containers or four containers depend on the size or two containers. You that's your choice. Anyway, galaxies great but my sneak peak will be a little bit unusual. I believe. My sneak peak will be today. I don't know if you have heard this word before. But there is a drink. It's actually from Paraguay but Brazil is closed Paraguay then I I have this. I use I drink Today like everyday all the time, I mean, how do you spell this? It's t e r e r e Delta. And it's, it's pretty great. It's like a cocci. It's like a green tea. And I think you can order on Amazon because you can buy - -77 -01:00:15,180 --> 01:00:17,430 -Scott Tolinski: anything. It's yerba latte. - -78 -01:00:17,460 --> 01:00:19,020 -Filipe Névola: Yeah. Is the code one. - -79 -01:00:19,080 --> 01:00:23,340 -Scott Tolinski: I used to drink a lot of high here but my tape but this is cool. I gotta get into the - -80 -01:00:23,580 --> 01:00:27,840 -Filipe Névola: station. I think I'm at best better developer because of their - -81 -01:00:28,260 --> 01:00:29,250 -Unknown: Yeah. - -82 -01:00:29,250 --> 01:00:34,050 -Wes Bos: How did how do you make this it's ice so you just brew it like a tea? - -83 -01:00:34,890 --> 01:00:48,450 -Filipe Névola: Yeah, no, you like there is just fresh. Not not fresh. It's dry but you just put there in the cup. And you have this especially strong. Let's go Come bom bom BIA Bambi it's called bomba mo Yeah, okay, - -84 -01:00:48,450 --> 01:00:49,260 -Scott Tolinski: go Yeah, what - -85 -01:00:49,410 --> 01:01:05,220 -Filipe Névola: a bomb is the same word for a bomb. Then I don't want to throw like bombi here. Maybe you'll get banned this episode. But it just puts there and you just put a cold water very cold water because in Brazil usually is very hot. And then you drink it. It's cool. Yes, Ed, you - -86 -01:01:05,220 --> 01:01:22,830 -Scott Tolinski: can do yeah, you can do cold brew. Yeah, I'm a huge fan of that. I mean, I big fan of your romantic for a long time. I never made my own cold one. I only ever bought that from like Whole Foods. But I'm into this. I'm gonna have to get some. Do you put anything in it? Or is it just your do you put any like lemon or any, - -87 -01:01:23,480 --> 01:01:32,400 -Filipe Névola: like a guide. But usually people like to put lamb or pineapple or whatever. But I drink literally every day all the time. Then if I put - -88 -01:01:32,400 --> 01:01:34,530 -Scott Tolinski: anything nearly caffeinated for our audience Yeah. - -89 -01:01:34,530 --> 01:01:36,600 -Filipe Névola: It's pretty cool. - -90 -01:01:36,840 --> 01:01:40,110 -Scott Tolinski: Yeah, for those of you don't know. It'll get you going. - -91 -01:01:42,000 --> 01:01:44,310 -Filipe Névola: It has no effect on me because I drink all the time. - -92 -01:01:44,760 --> 01:01:47,280 -Scott Tolinski: Yeah, that's me cold brew right now. - -93 -01:01:47,790 --> 01:02:03,120 -Wes Bos: Amazon autocorrects bomba straw to boba straw, which is for bubble tea. Oh, you have to tell it. No, I don't want a bubble tea straw. I wanna, I don't want it looks like a spoon. With with tiny little holes and then a straw on it. So - -94 -01:02:03,120 --> 01:02:06,090 -Scott Tolinski: it doesn't suck up the herbs in that in your mouth. - -95 -01:02:06,630 --> 01:02:10,020 -Filipe Névola: Don't try wait for a regular straw. Otherwise, you're going to eat there. - -96 -01:02:12,570 --> 01:02:17,550 -Scott Tolinski: You're gonna be pulling it out of your teeth. I actually am a gourd and one of these straws already. - -97 -01:02:17,850 --> 01:02:18,420 -Unknown: I'm into this - -98 -01:02:18,420 --> 01:02:26,070 -Scott Tolinski: into this too. Yeah. I'm gonna head to Whole Foods and pick up some yerba sack. Yeah, - -99 -01:02:27,150 --> 01:02:42,000 -Wes Bos: that's probably a sick word scanner here to study. That was a sick sick back. Yeah, we'll do shameless plugs now. Wes Bos comm forward slash courses, you can check out all the courses that I have you syntax for 10 bucks off, learn a new thing or two? - -100 -01:02:43,530 --> 01:03:20,610 -Scott Tolinski: Yeah, I'm gonna shamelessly plug level up tutorials comm it's my site where you can learn all sorts of cool stuff. We have courses on smelt sapper, there's actually a lot of courses on Meteor. And we have a new course a free course that's on YouTube right now for Meteor and spelt. So if you're looking to get full stack apps have in like the least amount of code in the entire world, I built a package for Meteor accounts with spelt. And it's two lines of code and you get the whole login system. For free. It's so easy and simple. It's amazing. So check it out, level up tutorials.com. - -101 -01:03:21,180 --> 01:03:45,630 -Filipe Névola: So my shameless plug is my Twitter, just follow me on Twitter, Phillip novela. And I am about to release a website that's called How to create an app dot Dev, where I'm going to teach how everything that I learned about app development in the last years, of course, I'm going to be using jmeter not because I'm an evangelist, but because I love it. And everyday, use it every day. And and that's it, follow me on Twitter. - -102 -01:03:46,019 --> 01:04:33,600 -Scott Tolinski: If you are interested in Meteor, join the slack community have a link in the show notes for us. And there's also a forum to forums.meteor.com you'll see yours truly hanging out there all the time, as well as the Slack channel. I'm in there all the time. And we also have a media room and the level up tutorials. discord channel too, if you want to talk me here with level up tutorials as well. So thank you so much for Philippe for coming on. This is awesome. I'm so excited to get this episode out and for people to really care about Meteor as it actually is. So that's I'm so excited. Thank you so much once again, and we usually end the show with a peace we just say peace peace pace, please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax271.srt b/transcripts/Syntax271.srt deleted file mode 100644 index 5e01a08f9..000000000 --- a/transcripts/Syntax271.srt +++ /dev/null @@ -1,108 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos, and Scott Taylor. Totally in ski. - -2 -00:00:25,950 --> 00:01:05,040 -Scott Tolinski: Oh, come to syntax in Episode 271. This Monday haec treat, we're going to be talking about how we upgraded our syntax.fm site to use next j. s is latest versions for everything, including now, v two, we have the site's gone through some evolution. And there's been some big changes to it with the help of the next team. And I think there's a lot of lessons to be learned here. This is a true Tales from developer lanes. So my name is Scott Tolinksi. And I'm a developer from Denver, Colorado. And that little lap you just heard with me as always is the Wes Bos, how you doing? What's up, everybody? - -3 -00:01:05,610 --> 00:02:11,660 -What's up, sup sup Sup? Sup. And this is gonna be a good one for those of you who work in next jazz for those of you who are curious. This episode is sponsored by one of our sponsors here we love over here it's syntax. And that's Log Rocket to know Log Rocket is the perfect place for you to get a session replay of any errors or bugs happen. Now typically what happens is user creates a bug somehow you use just creates a bug, right? You didn't you didn't code the bug the user made it made the bug. And in that in the site breaks, and you don't know what happened, you just maybe get an error log, or maybe you get a notification saying that something broke. But with Log Rocket, you get a video, it's like being a detective and actually being able to see the crime happen. You can scrub through it, get your network activity, get the console logs and errors. It's like not only get the video that you also get wiretaps and all that stuff, look at this, I'm really stretching this metaphor, and I think it works really well. So you're gonna want to head over to Log rocket.com forward slash syntax, and you're going to get 14 days for FREE when you sign up. And there's an on premise or a cloud version of Log Rocket so that everybody's needs seem to be taken care of here. So check it out at Log rocket.com forward slash syntax. - -4 -00:02:11,910 --> 00:02:23,430 -Wes Bos: All right, let's get into it. So the syntax website says some history of the syntax website was built, I don't know probably three, three and a half years ago, whenever we started this podcast, I Wes, - -5 -00:02:23,490 --> 00:02:29,550 -Scott Tolinski: I minimally contributed I'm really sorry for that. But you just like pulled it up in one day, you're like, oh, by the way, I'm working on the site. It's done. - -6 -00:02:30,269 --> 00:07:08,550 -Wes Bos: Yeah, it's just built a quick little website in next jass. And it was hosted on Zeit now, which is now called, it's now it's just called the oversoul, which is, so when we refer to ver, Sal, we mean both the company as well as the hosting of it. And at the time, it was a custom node server, that would take in the request, and then pass it along to next jass itself. And we'll talk about why we needed a custom node server in just a second. But that that was what it was. And the site now version 1.0 has been gone for like a year and a half. And we just, I just left it running on that, because I didn't feel like updating anything. So the other day, we woke up, it had stopped deploying, because I ignored all of the emails that it was going to stop deploying, and it sort of just dropped in our lap that we we could no longer redeploy the website, and there was an error on the website. So luckily, huge thanks to Tim and Lewis, who work on the oversell and narrow next jazz core team, they both work on ourselves, well, they've seen this coming for like a year and had updated our site to use the latest next jazz, which has no need for a custom server and would also be able to deploy to now to So actually, this is a question I get a lot, a lot of people are like, why can't you host node apps on now, too, which is now called versal. They don't allow you to run like long or constantly running node processes. They only run serverless processes, which spin up when a person visits a website and spin down. So if you want to host like a node server that is always running, then you can't do that on on forsale anymore. And that's why a lot of my my courses don't work on on wsl anymore. So like our options, were either just move it to a like a digitalocean or Heroku or something like that, or just just update the website. Why did we have a custom node server for the website when it seems so simple? Like why not just do that. And we'll also talk about like, why not Gatsby or SAP or something like that for the site near the end. So there was three things that we we use the custom server for. The first one was there's an API behind the syntax website and the reason why that's there is one because Use it in some of my tutorials. If you want to pull in a list of something and render it out, it's nice to have something that's not your same old like static data as well as, like I've used API's in the past, and then they change and then the tutorials at a date. So like, it's great to have an API that you can use that you actually have control over. So there's that. And then I also pull in the latest syntax podcasts into my own website. And that's done via the API. The second, we need on demand page builds. So you might say like, Well, why not just get to be because we need to be able to release the new podcast episode at 9am on Monday and Wednesdays. So when somebody visits the website, every single time that someone visits a website, it pulls a list of podcasts that should be available at that given millisecond, and then renders mountain chips into the browser, just like any server rendered website would do any PHP or whatever website would do normally. And then the third reason we had a custom server was because of custom routing. So previously, next, yes, the only way to do dynamic URLs was to pass the dynamic bit as a query parameter. So if that was the case, you'd go to syntax FM, forward slash show, question mark, episode equals 203. And title equals and then it would be the, the URL encoded version of the title. And that just looks ugly. We wanted like nice custom URLs, which is Ford slash show forward slash 261, Ford slash tasty treat, whatever, whatever. So those three things are now a thing in next jazz, so we are able to upgrade. I'll go over them. So the first one was the API. Now we use API routes. That's something built into next js, which is really cool, because you can just go into your pages directory and create a folder called API. And then those endpoints will be deployed server lessly. But you can also use all of the packages and helper functions and everything like me, have you used API routes? And next Yes, for Scott, - -7 -00:07:08,580 --> 00:07:34,800 -Scott Tolinski: I have a course on it. Yeah. Oh, beautiful. Yeah. So definitely. Yeah. So I mean, it really, and And not only that, but I've the sapper version is like basically the same thing. So I've had a lot of experience both of them how next does it as well as announced Abra? Does it naturally just basically giving you access to a server side route? And you can do anything on that route? Really? Yeah. Whether or not uploading an Apollo API or whatever? Yeah. - -8 -00:07:35,700 --> 00:08:11,700 -Wes Bos: Yeah, it's great. And you don't have to like provision any servers or API keys, or like a lot of these serverless things they make you have your own package. json file. Yeah. And then if you want to share like a, like a helper function between two server serverless functions, then you have to, like publish that as a package. And next Yes, just bundles that off for you. It doesn't matter where you put your stuff, it will figure it out and bundle it up for you, which is the best is probably the the best server lists. kind of experience I've had so far after trying a whole bunch of them. Just wait until you try sapper. - -9 -00:08:13,890 --> 00:08:30,570 -Scott Tolinski: Wes is so annoyed at me. I mean, I did this in the last episode. And I did this on Twitter when we were talking about it. I was just joking, but I think they handle it just a tiny little bit better. I think there are improvements that could be could be made. I don't know. It's good. At least you're - -10 -00:08:30,570 --> 00:08:33,750 -Wes Bos: not talking about TypeScript all day long. It's nice to have a bit of a change. Yeah, - -11 -00:08:33,750 --> 00:08:38,070 -Scott Tolinski: no, no, no, no, no, those people I know. Yes. Sorry about this, whatever. - -12 -00:08:38,100 --> 00:09:46,980 -Wes Bos: So next one was on demand page built. So when a new episode comes out, then the page has to be refreshed. And you will see the new episode, right. So if this was Gatsby, or any other static statically generated site, you'd have to regenerate the entire website, like at nine o'clock, and then it would be like 910 by the time it hits your website, or you do it, like maybe try to do it before but it's kind of annoying. So that is something that initially wasn't possible because Tim who refactored the site, refactor it to use next Jess is new static site generation, which is really cool. So next, yes, now has the ability to statically generate pages and you can opt in to that on a page by page basis, which is like I think, the best of both worlds you can have server rendered when you need it, and then static generated when you need it. And he opted to make the entire site static generated which is great. Except for the the one part that we need to be dynamic, which is we need the whole thing to be regenerated when there's a new episode out, right? And then you have to like set a cron job up and that's kind of annoying, you know, and if we release one at different time, - -13 -00:09:47,010 --> 00:10:09,240 -Scott Tolinski: what we really need is a lib sans sapper version. No, no, I'm not. This is the first time I'm not gonna say is ever. What we really need is a libsyn like a hook something that just fires Then we could just say, hey, just fire off a message when this is published on Lipson and like, come on, that would be the best way to solve any of these problems and - -14 -00:10:09,240 --> 00:11:15,480 -Wes Bos: might even exist. I didn't even look into that. So that might exist. But I think the way that they did it is pretty cool. So it's still statically generated, meaning that you go to syntax FM, that is like blazing fast because there's a static HTML page. But there's a flag that they added, and it's called unstable region. were added, this is not part of next. Yes, yeah. But we're, I guess we're kind of beta testing it. So the way that it works is that when somebody visits the website, you can set how many seconds you want it to region after and they just set it to one meaning that every single time someone visits a website, in the background, it's going to regenerate the next version. So at the very least, somebody visits our website at nine o'clock, and they don't see the new episode, but then the person that comes in visits it after them, see it, because it regions after every single time, which is kind of cool, because it's still statically generated. But it's also it's also we don't have to redeploy the entire build, because it does it for you. - -15 -00:11:15,869 --> 00:11:18,390 -Scott Tolinski: Yeah, that seems like a best of both worlds kind of situation. Yeah. - -16 -00:11:18,390 --> 00:12:29,610 -Wes Bos: Yeah, I so far, it's it's been good. There's a couple little bumps, but we figured them all out. And then finally, the third thing, custom routing, that is now a thing. And next Yeah, so you can do sort of like URL matching with this square brackets in the thing. So it's awesome. It's, it's nice and fast, it's super fast to load, super fast to build, like the whole versal build and deploy was done in like three minutes or something like that, which is much faster than my Gatsby website. And I guess I have more images on my Gatsby website. So that's not really a fair comparison. But it is pretty nice and fast. And the deploy is nice and fast as well. One, like little pain point I have is that versal seems to have a lockdown on the API routes, meaning that like, if you want to use next JS API routes, you can't just deploy that thing, anywhere because they've got some secret sauce on their own hosting platform. And if that was the case, then you'd have to not really sure what you'd have to you'd have to like remap API folder to your own server. There's some people that are well, yeah, solution. Yeah. But that's kind of like a like, I get it. That's their business. - -17 -00:12:29,730 --> 00:12:30,810 -Scott Tolinski: You got to have something. - -18 -00:12:31,170 --> 00:12:43,020 -Wes Bos: Yeah. If we, if we wanted to play this thing to, like Digital Ocean. I don't know if that would just work. Because there's some secret sauce and versatile to make the API API routes work. - -19 -00:12:43,709 --> 00:12:58,020 -Scott Tolinski: Yeah, I just think it's interesting. And it's funny, because our our site has always been a perfect use case for static generation. But there are those challenges involved. So I think this all seems like a nice little, nice little fix. And it's really amazing of the next team to come in and help us out like this. - -20 -00:12:58,890 --> 00:14:00,810 -Wes Bos: Yeah, yeah, very much appreciate that. Because they didn't have to like, it's also like, it's not very, it's less complicated than it was before. Because they took out all of the custom logic on the server, and just replaced it with pages, right? Just pages and a lib folder. And they took all the functions that we had written before. And they all just work, which is pretty nifty. Yeah. So big fan. So the the other questions is like, why not use Gatsby? We've mentioned this before, but we'll we'll address it. Gatsby was not as popular when I built the website. So that's probably why. But then we also have the additional challenge of having to regenerate it at nine o'clock to release the episode. Whereas this just happens automatically. And we can deploy it whenever we want, as well as the API routes, where we could totally do the API routes with like a Netlify functions. But that is not something that's built into Gatsby. So you again, you have to think about where am I hosting this thing in order to make the serverless function part work? - -21 -00:14:01,140 --> 00:14:35,100 -Scott Tolinski: Yeah. And then the last one you yours is why not sapper. And it's so funny, because when I made that little tweet, I wasn't honestly seeing that we should rewrite the site in sapper because that would have rewrite all the components will deploy air. Yeah, right. All the CSS you had no, I'm just joking. You know, I don't mean to be that like sort of why don't you just completely rewrite the whole thing from the ground up? I we both have businesses to run we both have way better things to do than that's by all means. There was intended to be as a joke I do like sapper, though. I will say that. Yeah. - -22 -00:14:35,100 --> 00:14:40,590 -Wes Bos: So what my question is would sapper be able to do all of these things? I think the answer is yes. - -23 -00:14:40,590 --> 00:15:04,890 -Scott Tolinski: Everything except for maybe not the on demand page built SSG. I'm not sure what the answer to that is. I haven't looked into that kind of thing before. But yeah sapper does static generation it does server side it does page server side routes, like next j s does. So it does all that stuff very well. So it basically does everything. Next year does except for this. So yeah, yeah, I think it could do it fine. Cool. - -24 -00:15:04,890 --> 00:15:55,860 -Wes Bos: Somebody also tweeted me the other day, they just like ported the entire website to Gatsby and they redesigned it. It was really slick looking. And I was on my phone. And I can't find the tweet. Like it was one of those things like if sometimes I don't reply, it's because I like see it when I'm like, yeah, be too right. Oh, my head that I should be paying attention to my kids, and then I just never, and then it's gone. And I don't know where that is. So if you are the person that ported the entire website to Gatsby, send us the link again, because that A is really cool. And be the design was really sick because the design of the syntax website is okay. But now that we have 261 episodes, it could it could use like a maybe a rethink as to how to scroll the episodes a little bit nicer. We're using position sticky a lot. But as the data changes, maybe the design needs to change to - -25 -00:15:55,860 --> 00:17:01,260 -Scott Tolinski: you don't have been thinking about I mean, we haven't really announced anything like this, because there's nothing really to announce. But this is Episode 271. And we're recording this bout a month back maybe maybe a month and a half back. Right? Well, so we're we're actually banking, a couple of episodes. We're doing a lot of recording right now. And Wes, and I will be taking a tiny little bit of a break, but you will not experience a break because we're recording so many episodes ahead of time, right? So on September 2, two, were effectively starting Season Two of syntax, you could call it that. There's not going to be a ton of changes or anything, so don't be worried about that. But maybe that's it. I saw time for maybe a tiny little visual update or visual refresh the site. Maybe we can take some of that time off to brainstorm some things and write some code. I don't know. I'm excited. Maybe we can get some new new bumpers, some new audio stuff. bumpers, yeah. Gotta have some bumpers. I do want to get a bumper with turbo instead of El Toro loco as much as I love El Toro loco can't help but feeling it's a tad bit insensitive. I don't know. That's just my thoughts on it. - -26 -00:17:02,250 --> 00:17:09,660 -Wes Bos: Cool. All right. I think that's it for today. Thank you so much for tuning in and we'll catch you on Wednesday. Please, please. - -27 -00:17:11,550 --> 00:17:21,320 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax272.srt b/transcripts/Syntax272.srt deleted file mode 100644 index 38d9ab47b..000000000 --- a/transcripts/Syntax272.srt +++ /dev/null @@ -1,456 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,530 -Announcer: You're listening to syntax,the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and Wes Bos. - -2 -00:00:10,589 --> 00:00:11,190 -Unknown: Whoo. Welcome - -3 -00:00:11,190 --> 00:00:19,710 -Wes Bos: to syntax. This podcast is the tastiest web development treat podcast in the world. Wow. Yeah, just switching it up a little - -4 -00:00:19,710 --> 00:00:20,670 -Unknown: but didn't know. - -5 -00:00:20,699 --> 00:00:58,259 -Wes Bos: Yeah. Today we're talking about react state, we're gonna do a round up. So Scott and I both have a big bag of Arby's that we're challenged down on right now we're gonna do a roundup of all of the different not all of them, but a handful of different react state libraries. Would you use them? Why would you need to use them? What's the pros? What's the cons? I think it's gonna be a good one. We are sponsored today by Sanity, which is a structured content, CMS and centuries error and exception tracking. I'll talk about them partway through the episode. My name is Wes Bos. I'm a developer from Canada. And with me as always, it's Mr. Scott Tolinksi. How you doing? Hey, Scott. Hey, I'm - -6 -00:00:58,259 --> 00:01:20,150 -Scott Tolinski: doing good. I got a dog barking in the background. That's how you know it's uh, it's gonna be a great episode, right? No, I am doing good. You know, I'm I'm, I'm jazzed up and ready for the week, I got a course coming out this week. So I'm in that mode. I gotta edit a whole ton of videos tonight. And I'm really excited about getting this course out. Because I'm really into it. So - -7 -00:01:20,190 --> 00:01:27,420 -Wes Bos: yeah. Awesome. That's great. Well, let's just get on into it. You, you want to kick it off there with the first library? - -8 -00:01:27,630 --> 00:02:40,220 -Scott Tolinski: Yeah, let's get it going here. First library is not a library, but it's part of react. And that's context. Now, I figured we would do this like this, we would first start off with like a little bit of have we each used it and what our experiences are with it said technology and then maybe get into pros and cons. So I should state first and foremost that I absolutely have used react context. In fact, that's currently how we do all of our like application state, not like the data state. But all the application state in our level of tutorials is done via react context, using the fabulous use context hooks as well as several contexts. I think we have like five or six different contexts that we have. And they're all maybe split up in terms of like what their use cases. So we have a context for the checkout, we have a context for you know, the navigation is the nav open that kind of thing we have a context for. Okay, I have one for the login window, if the application is currently loading, I have one for alerts, I have one for user information, I have one for the search context for the checkout experience. So you've broken those up into a whole bunch of different react context. And that's what reason - -9 -00:02:40,910 --> 00:03:42,600 -Wes Bos: awesome that I use react context myself in we should say that, like react context is not actually a state does not actually hold any data context is simply just a way to get something that is higher up in your application to a and inject it into wherever it is that you need a generally a lower place. And it's sort of an alternative to using props, where you'd have to pass the data down every single time. So the actual like state, part of react context is just plain old react state, or really, you could put it anywhere, but likely you put your state in react state, and then you also have your updater functions and any other logic functions that that need to come along with that. And then you can export those things and sort of ship them off via contacts, or you put them in context. And then wherever it is that you need them, you can you can access them with a use context hook, which is pretty nifty. - -10 -00:03:43,020 --> 00:04:46,230 -Scott Tolinski: Or or check this out. Here's what we do. This is fantastic. I'm gonna blow some minds here of people who haven't done this before, maybe yourself included was what we do. And by we, I mean, I myself, because I made this, what we do is that we take for all of our contexts, we basically just export a function that returns the use context of the context itself. So here's the line of code, the x, like for my alert context, I export a function called use alert, which is really just a function that returns us context with the alert context in it. So therefore, we now have a use alert. So I never need to import use context itself. When I'm using anything, all I do is import use alert and then can pull out the things. So what it saves you is it saves you from having to import the context and import use context and allows you just to import one thing, ie one thing, and it's it's a little bit more explicit, it's more readable. And to me, it's just a nice nice little shortcut. Yeah, - -11 -00:04:46,230 --> 00:05:42,900 -Wes Bos: we we do that in my upcoming events react pre recorded. So we have like a use cart. And it's great because you can you don't even have to understand that it's context after you're done building that hook and you can simply just say like const cart items equals use cart. Yeah. And it will return to you the data and then you can use that you can go ahead and just use that data, it almost seems like magic. So yeah, big fan of that. I'm glad you said that, because you can tuck it away nicely like that. Yeah. So pros to that that's built into react, it can be as simple or as complex as you want. There's no like sort of best practices around this. There's a couple libraries out there that sort of teach you to do that. I've never used a library for it. Because I've not seen the use case, I've just stuck my state in context, which is cool. And then the cons to that it takes effort to optimize. And as Scott wrote that you want to explain what does that mean, and why it takes effort to optimize? - -12 -00:05:43,350 --> 00:06:15,600 -Scott Tolinski: Yeah, if you just go ham with context, and throw everything into one context, or you just start keeping everything sort of willy nilly into a context that could be re rendered, when any of its values change, you got to keep in mind that those are basically, you know, a react component that is going to again, rerender, when anything, triggers a rerender that so if you if you're keeping too much state or unrelated state into various providers, you can trigger a rerender is when you are unintended, too. - -13 -00:06:16,020 --> 00:06:32,310 -Wes Bos: So it's it's sort of a best practice, then you would say don't put too much stuff. That's why why you you say I have like three or four states in my application, instead of just putting it all into one global context, you have multiple and that avoids those unnecessary re renders because you're only using it where you need - -14 -00:06:32,310 --> 00:06:56,790 -Scott Tolinski: it. As far as I understand. Yes, I there. There seems to be a lot of like, posts around optimizing context. And some of them talk about using use memo and whatever. But I personally haven't had a need to do anything beyond splitting up my content. Yes into like things that would, you know, actually make sense. And being together as in like, the alert context only cares about the alert stuff. And can checkout only cares about the checkout? Yeah, - -15 -00:06:56,790 --> 00:07:18,210 -Wes Bos: that seems like one of those like, those things that I wish react would just take care of for me. Yeah. Because it's just such a simple, beautiful API. You stick your stuff in, in a context, he access it via hook or you make your own. And it just works and like and then and then you get people come and be like, well, you should wrap us memo on that sometimes. And here's why. And I'm like, Well, - -16 -00:07:20,250 --> 00:07:31,110 -Scott Tolinski: people don't like, yeah, this is exactly why people. It's funny because like, if you look at spell, I hate I hate doing this. Because this is like now that I've learned spelt, I'm gonna just keep our - -17 -00:07:32,700 --> 00:07:33,540 -Wes Bos: bone over here. I - -18 -00:07:33,540 --> 00:08:00,000 -Scott Tolinski: person. So I know. I really hate this. And I hate that it's a noxious that I'm even doing this. But if you look at how they manage state it is it's like its own thing. You don't have to worry about providers, you don't have to worry about wrapping stuff. You just get something you said something, yep, date something or whatever. And it still is. And it can still be as robust as you want it to, but they don't like, I don't know, they don't make you think about these optimizations. They don't make you think about this kind of stuff. - -19 -00:08:00,390 --> 00:08:15,390 -Wes Bos: Yeah, I like that as well. I wish react would do a little bit more than that. But then again, like I don't run into that issue, all that often or ever really, I've never run into performance issues or re rendering issues with context. So maybe I'm properly. - -20 -00:08:16,170 --> 00:09:01,830 -Scott Tolinski: Yeah, right. I know, I have run into issues myself personally, where it was like, doing things that I wasn't intending it to do, because of that loading order, or whether or not there were like, for instance, I threw my checkout stuff into a context. And then all of a sudden, it was loading my API keys, you know, on every page load, not on every page load, but on the initial page load even when somebody wasn't accessing the checkout. Oh, yeah. So then you have to put in like a US lazy query into Apollo to to get the right query happening and stuff like that. So I mean, there's definitely foot guns possible. flipkens. So next step is Redux. Now Redux is, you know, King of the Hill, it's been around for well, forever at this point in terms of in web developer years. It's been around for a very long time. We have both used it correct? Yeah. Yeah. I - -21 -00:09:01,830 --> 00:09:06,330 -Wes Bos: did a whole course on on unredacts. Myself, and they did a couple little on it. - -22 -00:09:06,770 --> 00:10:35,130 -Scott Tolinski: Yeah, we both did courses on Redux. That's why jokingly mentioned that we used it. So we got we both got experienced with Redux. It has a huge user base. It has a huge legacy of growth and improvements and changing with the times it's not like one of those stagnant libraries that was just created. And who knows when it was last updated. Redux has evolved. It, you know, has a hooks interface and those kinds of things. So it does have a modern API. I used to have level up tutorials on Redux. Before we moved to straight up context. Actually, we might have moved to Apollo state at some point, you got to realize that I use a lot of these libraries as like testing grounds for learning them. So when I say level up tutorials was on Apollo state, yes, sure. Our entire application was on Apollo state. And then when it was on, or is on Redux before, yes, it was on these things. But I'm rewriting this application because it's code I really know. And if I get to try Try this library in the context of code, I really know it really helps me understand it. So I'm not just like that crazy about switching libraries, I just like to use my own code is like a playground for learning new things. So the level of tutorials at one point was in Redux. And the things I like most about the Redux, were the dev tool. So it was fantastic to be able to see everything yeah, that was great, what they call that that with the time time travel time travel, where you can see every single state that sort of ever existed in your application, and you can go back and forth between them love that. - -23 -00:10:35,399 --> 00:11:51,929 -Wes Bos: Yeah, it was, it was really cool. And you can also like, turn ones off. So if you did, if you did five changes to state, you could go and turn the third one off, and your application would rerender as if that one piece of updated state never happened, which like that, you don't need that every single day. But it is kind of interesting. If you're debugging something, you know, sometimes where you get into these issues where it only happens when, like right now I'm, we have a trouble with the suspension on our car, it only happens when you leave the car for 24 hours and you go to it and you turn it off, you turn it on, and then off and then come back and turn it on within 10 minutes. And then I'm like, this is such a weird sequence of events that it needs to that it happens. And if I had Redux dev tools for that, I could just like look at the like, turn it on, wait 10 minutes, turn it back off. I could like look at all of that. And then just turn things on and off and be able to see which of these things contributed to the actual bug that was happening. Yeah, I always really like that. Yeah, it's it's pretty cool. I am. What Another thing I really like about Redux. And this is also something I don't like about it. But so when you have Redux, you have to have I forget the what are the names of all of them, you have your reducer, you have your action, - -24 -00:11:52,320 --> 00:12:10,020 -Scott Tolinski: your actions, reducer action. It's been a while like, my, my biggest pet peeves about using Redux is dispatch, your dispatch, it had all those terms and lingo you had to learn. And I think that just made it tough to learn. - -25 -00:12:10,020 --> 00:12:54,480 -Wes Bos: There's all those things, which is frustrating to learn. And often you find yourself like with three or four different files in order, just update one simple little thing. But a lot of people really like that, because there was a very clear way on how to do this. And that's something you don't often get with in the React world is like, oh, here's a couple different ways you can possibly do it. This is just like you make a reducer, you have an action, it has a payload, you dispatch that action, your reducer will take in some data and return it. And that's like a very clear, crisp way forward. Which is pretty cool. For a lot of people who want like a just a recipe. That's what I'm looking for you I just want a recipe on how to add data to my application, how to update that data. - -26 -00:12:54,990 --> 00:13:24,390 -Scott Tolinski: Yeah, I always left that. It was like the thing that calls the thing that calls. Yeah, you know. And I think for users are like beginners coming to Redux specifically, they don't understand why am I doing this? Like, what, like, why is this? Why is this needed? When it seems like it would be so easy to just update a variable or run use state but then you have the whole situation of actions and dis you know, dispatch and all that stuff that just very confusing - -27 -00:13:24,390 --> 00:13:47,760 -Wes Bos: immutability thrown in there. It's usually their first run in with the this concept of immutability and not overriding things, and they have to spread the object into it or no, I also think like that was people's first introduction three or four years ago, a lot of this immutable functional programming. So you threw that in as well. And it probably confused more people than it actually helped. - -28 -00:13:48,149 --> 00:14:14,279 -Scott Tolinski: Yeah, a lot of new concepts, a lot of language, a lot of syntax in seven, that stuff, to me feels like it could have just been swept under the rug made a little bit easier. That's type of the API's that I like is when things get swept under the rug just a little bit. But of course, you know, different strokes for different folks. I think there was also a bit of confusion around like, what additional packages you need, because when people talk about using Redux, they're always like I use Redux with Redux ducks and Redux Ranga, Tang and - -29 -00:14:14,340 --> 00:14:15,659 -Wes Bos: router bagage, - -30 -00:14:15,659 --> 00:14:16,980 -Scott Tolinski: Redux tree thing - -31 -00:14:16,980 --> 00:14:19,980 -Wes Bos: and achieved data was like a whole nother thing. - -32 -00:14:20,340 --> 00:14:55,020 -Scott Tolinski: Redux snake plant. And I use them all together to do you know, just very simple. So it's like very like weird to me to know when to use, you know, whether it is saga or and I can't even remember all of the different Redux additions or Redux modifications or something, right. But it is very confusing for new people. Oh, yes. Oh, yeah. Come on. Like when you get into Redux, you're like, Oh, I have this problem with Redux. This is annoying. Then you Google the problem and somebody like us bunk and then you use them, right? But then you're like, Wait, what? Why isn't this part of it? Or why is this just - -33 -00:14:55,020 --> 00:15:07,440 -Wes Bos: like, that's weird that there is no like data fetching story built into Redux, and I can Got that that's not what it's for. But yeah, anybody that was using it was fetching data from a server and throwing it into to Redux. - -34 -00:15:08,159 --> 00:15:30,570 -Scott Tolinski: Yeah, so Redux has a lot of positives. And at the same time, there are a fair amount of negatives too. But it's a it's a fantastic choice. If you're looking to build your application on Redux, there's really no reason not to. Especially if you're good with Redux. It is a fantastic library. Even in 2020. There's, there's really not a ton of reasons other than it is confusing and hard to learn. Those are pretty much the big ones. - -35 -00:15:30,899 --> 00:16:20,460 -Wes Bos: Well, it's sort of fallen out of love in the last year or so. And I think the reasoning behind that is like when Redux came out, it seemed to be like, people thought, like, I remember people saying, like, React state is dead, like don't put anything in state. Everything goes in Redux, weird and it was like a weird time. And and then I think over the over the years, a lot of people were sort of looking at it and going like, Oh, you know, we don't we don't actually need this for our application. There's certainly lots of applications that do need a very robust state management library like this, but we can get away with just using state, especially once context came out. That was available to absolutely everybody. That was huge, because then you like, I think a lot of people were just using Redux just for the ability to inject state at whatever level that they need it. - -36 -00:16:20,909 --> 00:16:24,480 -Scott Tolinski: Yeah. Which to me, seems crazy. But that's just the way it is, you know, - -37 -00:16:24,510 --> 00:16:30,450 -Wes Bos: yeah, there wasn't any other way to do that in react before Redux, or sorry, before context came along. - -38 -00:16:30,990 --> 00:16:43,649 -Scott Tolinski: I did it via Meteor Meteor stuff, which is funny. We'll talk about a little bit later on in this. So it's like I had maybe a solution to that before the rest of the React world did just because I was using a larger framework, or I thought - -39 -00:16:43,649 --> 00:16:45,990 -Wes Bos: Meteor was dead, Scott? Yeah, it is. - -40 -00:16:45,990 --> 00:16:46,890 -Unknown: It's totally dead. - -41 -00:16:46,890 --> 00:16:48,360 -Scott Tolinski: I mean, I - -42 -00:16:49,830 --> 00:16:51,779 -Wes Bos: don't tweeted that it was a joke. - -43 -00:16:52,260 --> 00:17:12,590 -Scott Tolinski: It's not a joke. Anytime you tweet anything about Meteor people, it's like it actually makes me Nothing will get the fists clench faster. And I like turn into a motorcycle engine. So okay, let's keep it moving here. Next up is x state x state. Wes, - -44 -00:17:12,750 --> 00:17:28,100 -Wes Bos: have you used x i have not, I feel like I've got a pretty good grasp on the the whys in the house and the sort of the ideas behind it, which are important, because because we had David on the podcast, but still looking for that project where I'm gonna gonna use it. - -45 -00:17:28,500 --> 00:18:37,170 -Scott Tolinski: I know, I thought I had found mine, because I have used it. But I have not used it in any real capacity. I've used it in like toy capacities. You know, I've built the built the some demos in it. So the thing about state is a enforces really solid design patterns, right? To use x state, you must know and understand the state machines, right. And to know and understand state machines, it inherently is going to make you follow a pattern that is going to be a little bit more strict than some of these other ones, which is I mean, that's a pro of Redux, too, right. It's more strict in how you use it. This is how you use it, it creates a very state safe state, you could say as an by not using Boolean variables to manage your UI, essentially, you are able to then have state that is a little bit more reliable in terms of not potentially producing UI bugs or errors. And it also includes some really awesome tooling. I don't know if you've ever seen the x state. Is it like a it's like a visualizer? Yeah, - -46 -00:18:37,170 --> 00:18:37,890 -Wes Bos: that's - -47 -00:18:38,010 --> 00:20:06,450 -Scott Tolinski: actually actually called the V lights. Okay, cool. I was just pulling that word out. So it is called the x state visualizer. If you haven't seen this before, just I'll put it in the show notes, the X state.js.org. forward slash vis again, I'll put that link in the show notes. It's a fantastic really, really cool, big, big fan. cons for x date or event. It includes some knowledge overhead, where like you have to know and understand what state machines are a do and why why you would need them or want them because the code is going to be a little bit more complex. The syntax is definitely a little bit more complex to parse. If you haven't worked with state machines before, you might not understand it. And to me personally, just looking at the next state code, I don't necessarily know what's going on off the bat until I really dive in to the x state itself, right? Like when I first looked at maybe even like a basic one. I'm like, Okay, I see this on fetch or whatever, like, Okay, how does this all work? So there's a little bit of mystery for for new people here. So x, it's a really interesting one. For those of you who want to learn a little bit more about x date we did an episode let's find that episode 206206 Episode 206 state machines, CSS animations with David Kay piano a good one to listen to. Also, I did a fairly decent explanation about statements In the last potluck, I think so check that out. If you want to learn a little bit more about x state, - -48 -00:20:06,660 --> 00:20:08,220 -Wes Bos: what else should we check out? Scott? - -49 -00:20:08,550 --> 00:20:34,980 -Scott Tolinski: Well, you will. Okay. So that's a good transition. But I would have gone with something like if, if your state is getting out of hand. Maybe you should bring it next day to give it a little bit more sanity or something. Oh, I like that. That's, that's maybe where I would have gone. And I'm talking about sanity@sanity.io, which is the structured content CMS that is very fantastic. Do you want to talk a little bit about Sanity West? - -50 -00:20:35,010 --> 00:21:47,330 -Wes Bos: I do. I do. So this is our sponsor for today, one of our sponsors, and they are they call themselves a structure content, CMS. And what that means is that it's a, it's essentially a headless CMS, where you, you start up a sanity project, you create all of your different data types, you can relate them to each other, you've created all the fields on each of those data types. And then you can fire this thing up. And one option, which I think a lot most people probably use is they also have this thing called Sanity Studio, which is a react application. It's really cool. It's like, they host it for you. But you can also hack on it. So you can like deploy Sanity Studio, either to your own or to their own hosting, which is cool. And then you can create all of your own custom inputs if you need need it. So I'm working on my Gatsby course right now. And we're using Sanity in there. And one, one input that they didn't have was a price input. They have a number of input, but not a price input. And I store all of my prices in cents. And sometimes that's this confusing for really smart. Yeah, it's because then you don't have to do decimal math. It's great. - -51 -00:21:47,400 --> 00:22:09,990 -Scott Tolinski: Why I store mine in strings, like a string of a price. You really know what I mean? And then I can and then I convert it. Yeah. Which I don't know if that was the right call. But it's a call I made a long time ago, when I was first starting this it was like a is a call I made several several years ago. And it was just like, okay, whatever. So I have to convert it in that that's just like the pain. Yeah, with that four cents. I wouldn't. Yeah, - -52 -00:22:10,230 --> 00:22:33,960 -Wes Bos: yeah, I did early on, I didn't use cents. And there's a problem where if you have decimals and decimals in JavaScript aren't easy anyways. So I personally have this in my own my own back end for my own course where the cents I like if my if my system wants to give a refund, just to mention how many cents she wants to refund. And that's confusing because like, like what's $27 and 82 cents in cents, I - -53 -00:22:33,960 --> 00:22:34,980 -Unknown: guess you just have no clue. It's like - -54 -00:22:34,980 --> 00:23:25,920 -Wes Bos: the decimal but I don't I just scary when refunding someone because you don't know if you're gonna accidentally pop an extra zero on there. So I just put like a little thing above it as you type, it will just replay it in formatted with the dollar sign and commas and things like that. And so I built that same input for Sanity. And I was like, this is great, like Sanity has like 98% of the things I want. But they didn't have this one specific input that I wanted. So I just built it myself. And I deployed it to my own Sage here. And then I pull it all in, they have a graph qL API, they have a this really cool syntax language called grok, you can pull it into your next jazz site, your Gatsby site, you name it. So check it out on your next project sanity.io forward slash syntax, that's gonna get you double the free usage tier. Thanks so much to Sanity for sponsoring. Awesome. - -55 -00:23:26,190 --> 00:25:08,550 -Scott Tolinski: So let's keep moving here into the next one. Now, Wes, I don't know if you've heard of this library. But I had really taken some time to evaluate this library in terms of maybe the next react State Library I should look at, not for obviously, moving my project. But the next one I should look at as being like a serious contender here. And this one is zustand. Do stand is really cool. I don't know if you've seen zustand before, but it's a small, fast, scalable, scalable, bare bones state management solutions with a comfy API based on hooks. It's not boilerplate II at all or opinionated. So it's very cool. I really like this syntax for this in terms of like, if we were to give a syntax dollar signs, you know, I would say this is like a one $1 sign syntax because like, it is very, like it's very simple. Very, okay. It's not going to take up a ton of ton of space in your code here. I'm not saying it's not it's not fancy, because it's fancy. It's It's very, it's very powerful. But it's not complex, right? It's not expensive. So to me, I like zustand. It's basically a simpler version of like, kind of what you do in Redux. It almost feels to me like a more of a, like a use state or use a reducer kind of way of just doing your entire global state. It has a fairly growing community of 2.6 thousand GitHub stars. I don't know how many how many usages it has. It's a small library and when it's m zipped it It's only 647 bytes. Yeah. Wow. So that's not exactly adding a ton of code to your application. Yeah, so - -56 -00:25:08,550 --> 00:25:24,150 -Wes Bos: that's uncovering that not a lot about 7000 8000 weekly downloads, which is not a ton. So maybe you're uncovering a really cool. It's from the folks at react spring. So there's some good dabs behind it. This is pretty silly. Like the API is funny. - -57 -00:25:24,150 --> 00:25:56,070 -Scott Tolinski: I have a little call out here. And this is a Scott's underground hot pick or underdog, hot pick, underdog or undergrad, whichever one you want. And I like this, one of the things that I really like about this more than any other of these options, you don't have any providers, you don't have to wrap your code in a provider. You know, I don't know about you, but my code looks like provider provider provider provider provider, you know, it's like a giant pyramid of providers, and then the actual application. So for that alone, I kind of like this. - -58 -00:25:56,100 --> 00:25:58,770 -Wes Bos: So how does it How does it surface? - -59 -00:25:59,370 --> 00:26:02,430 -Scott Tolinski: The just hooks, it's all hook? Oh, - -60 -00:26:02,430 --> 00:26:09,810 -Wes Bos: it's there? Probably? I forget. What's the pattern for this where the first time it runs? - -61 -00:26:10,410 --> 00:26:11,430 -Scott Tolinski: memorize? Yeah, - -62 -00:26:11,460 --> 00:26:18,450 -Wes Bos: yes. There you go. They're probably memorize under the hood. Oh, and they they use react Redux dev tools. - -63 -00:26:18,750 --> 00:26:20,550 -Scott Tolinski: Does it say that? Because I don't know if that's Yeah, - -64 -00:26:20,550 --> 00:26:33,870 -Wes Bos: at the very bottom Dev Tools take the store function as its first argument. and optionally, Oh, that's cool. So you can use the Redux dev tools with this? That's fine. Oh, this is a sick so got - -65 -00:26:34,110 --> 00:26:42,000 -Scott Tolinski: zustand. Yeah, check it out into kind of cute little bear logo. It's a bear playing a guitar. Same to stand. I don't know what that word means. But - -66 -00:26:44,580 --> 00:26:48,900 -Wes Bos: okay. I only only know that because I googled zustand in it. translated it for me. - -67 -00:26:49,770 --> 00:27:03,870 -Scott Tolinski: Oh, that's fun. Yeah. And there's a neat little demo. So yeah, check it out. It seems like a cool option. And to me like this is this is what hooks are all about. I think it's a really neat evolution of how we view state in react. Beautiful. - -68 -00:27:03,900 --> 00:29:24,270 -Wes Bos: Next one we have here is Apollo. So Apollo is the, we should probably say Apollo client here. So Apollo is like the graph qL company. And they have Apollo server, and they have a bunch of monitoring products. But probably when we say Apollo, a lot of you are thinking of the Apollo client, which allows you to fetch data via queries, as well as send out data mutations via queries as well, they have a really nice react API. That's all hook space use for interacting with both the queries and your mutations and variables and things like that. I've used Apollo quite a bit myself, in my advanced react course, as well as a couple other side projects. I'm a big fan of how it works, they have a really nice cache that is built in and Apollo three, which is not released yet, but will be fairly soon, has even more fine grained control over the cache. So sometimes you get into this like very aggressively cash situation, especially with pagination. And now there is a really slick API that will allow you to clear out the cache as well as reuse items in your cache throughout multiple queries. And let me explain that really quickly is, if you have previously in an Apollo is if you have a query that has something like page three in the query, and then you you query page four, and those are two separate queries. And even if the item, the items that are returned, have some overlap between those two queries. Previously, Apollo would think that those are two separate items, because they're different queries. But now they allow you to ignore specific parts of the query, and then just sort of meld them all into one. And they have this really cool API that will allow you to read and merge the items as they come in. So big fan of how Apollo works, and the lazy query to Yeah, yeah, the lazy query is great, because you don't need to use that, you know, sometimes you don't want to fire off a query on page load. You just want to fire it off when somebody clicks a button, or I specifically use my search. I don't want to fire off a query when the search loads, I want to fire it off when somebody starts typing. So you can use lazy query for that. - -69 -00:29:24,930 --> 00:29:30,090 -Scott Tolinski: I know I always used mutations and now it's like, oh, okay, now you can actually use what makes sense, right? - -70 -00:29:30,540 --> 00:29:44,640 -Wes Bos: Yeah, yeah, exactly. I what I had done in the past is like, I like queried it and then like, had like a global or not global variable, but a scoped variable that was accessible and then you store access to the client once it comes back. And it was a mess. So this is way better. - -71 -00:29:44,670 --> 00:29:50,070 -Scott Tolinski: Yeah, mess. And we should also mention, Paulo State, let the client state state - -72 -00:29:50,100 --> 00:29:51,090 -Wes Bos: Yes. Oh, yeah. - -73 -00:29:51,090 --> 00:30:21,300 -Scott Tolinski: So in addition to you know, with your data, because a lot of these libraries they they just you know, Apollo client is more for like pulling in your data, right? But in addition, there's also like actual, like application state features in here and the client state. And it's really nice to be able to include that with your Apollo queries. But I found in practice, it was a bit heavy handed in terms of the syntax, and it just didn't feel right to me after living with it for quite a bit of time. - -74 -00:30:21,720 --> 00:30:39,630 -Wes Bos: Yeah, I was the same way as well. It's just like, it was way too, too hard. And ideally, I would love to have like my like, my fetch data and my local state in the same thing. It just was, it was too much for me, and I think it's since been updated. But it still wasn't as simple as just using context for me, - -75 -00:30:39,960 --> 00:31:32,910 -Scott Tolinski: totally. So pros and cons works well with your graph, qL API, and they have dev tools. So those are pros for me. But the cons, it's complex for like state application, like if you're trying to just change the is the navigation open right? To do something like that is ends up being way too complex for what it is right, we're just swapping a Boolean. Also, the dev tools for me are also going under a con because half the time for me they do not work correctly. And specifically with local state. Like if I'm querying local state, you have to have the load from cache checkbox checked, or I don't know, by the time I dropped this Apollo client for my application state, my local state, it was never working correctly for me with the dev tool. So dev tools for me are always a bit hit or miss. And yeah, that's really my my negatives for Apollo. - -76 -00:31:33,570 --> 00:32:20,760 -Wes Bos: Awesome. Next one we have is RX js. And this is not something I've ever used myself. So I'll not do a great job at explaining it. But it is, according to the docs, a library for composing a synchronous and event based programs using the observable sequences. So an observable is not exactly but kind of similar to like an event listener where you like, say, when this thing happens, go ahead and do this. And you can do that with data as well, where you're waiting for data to come in. And when it does come in, you can go ahead and react to it. So I don't have a whole lot. I don't even know if it fits perfectly into this. But as far as I can understand from the docs, it is a state management library as well. - -77 -00:32:21,210 --> 00:32:33,510 -Scott Tolinski: Yeah, it's funny, because when you you asked about this, I was like, Can people use that first date? I mean, that's, that's where I'm at with RX js. I don't even know what people use it for. Which is kind of weird that I would even say that considering how popular it is. Yeah, - -78 -00:32:33,510 --> 00:32:34,590 -Wes Bos: it's super popular. - -79 -00:32:34,610 --> 00:33:05,520 -Scott Tolinski: It is popular. And I like how they say Think of it as the lodash for events. Okay, so to me, I just I don't know what the exact way of using this is in any sort of way that I would use it. But a lot of people seem to do. And it seems to be very popular for for various use cases. So maybe that's a large gap in my real got gaps in ArcGIS is a gap in my understanding of things. Next up is react query. Have you seen react query last? No, I - -80 -00:33:05,520 --> 00:33:07,530 -Wes Bos: haven't. What is it? Oh, come - -81 -00:33:07,530 --> 00:35:19,080 -Scott Tolinski: on. Come on, Wes, what's going on over there? No, it's a react query. Actually, if if we want to talk about guests, Tanner Lindsey, if you're listening to this, or if you're interested in coming on the show, we got to have Tanner on the show. Because this library is fantastic. And it's a huge growing community of 8.6 thousand stars on GitHub. And it works with a whole bunch of stuff. It's really cool. I've really thought about using react query, you can even use read query to do things like fetch from your graph qL API. So react query is basically its hooks for fetching caching and updating asynchronous data in react. So they basically you remember the library s wr from versaille. So it's similar to similar to that. What I've really found about this is that it takes a lot of stuff that you know, there's some of the API's might not be that crazy for us using Apollo, right, considering you just do use mutation pass in the whatever. But they have like a use mutation hook that you can have yourself outside of Apollo. So they have like us query use mutation, those types of things, and it passes back the status, the data, the air, just like Apollo would, in those kind of ways. But for working without outside of graph qL API's or working with whatever you want, rather than just specifically Apollo, in the cache tools are really nice, too. There's a whole bunch of stuff here, including some really, really, really fantastic dev tools. I've heard nothing but fantastic things about react query from those of those who have used it. I know that people who use it are definitely very intuitive Tanner's a pretty pretty smart dude from all of this stuff that I've seen his talks and stuff. So I'm really into learning more about react query right now. I want to give it a try. I know he's doing some rewrites of it. But the examples and everything that looks really nice. And one of the things I love about react query is their documentation is like very comprehensive. So it's very, very, very comprehensive. It gives you a ton of control over the cache. And it seems like it's a very smart cache for your data. - -82 -00:35:19,440 --> 00:35:30,030 -Wes Bos: Cool. I'm at that, check that out for my next little project seems neat I that the site stvr stuff is starting to become more tempting for me to try out as well. - -83 -00:35:30,150 --> 00:35:34,530 -Scott Tolinski: I would look at rec query first. Yeah, I'm being entirely honest. Yeah, it's pretty good. - -84 -00:35:34,610 --> 00:35:50,150 -Wes Bos: I'm gonna check it out. Next one we have is I think the rest of the episode is just things that I'm gonna say No, I've never tried it. So I'm not gonna say it looks cool. I'll try it out. But the next one we have is recoil. What is this Scott? - -85 -00:35:50,550 --> 00:38:02,130 -Scott Tolinski: recoil is a new state library from Facebook, it is not necessarily, you know, when people say something, Facebook, it's not like it's the same team that did react or something like that. So this is like a separate team that is solving a problem. And the problem that they were solving was that two corners of their application that were not in the same application tree needed to share some bit of state. And that was a very complex problem, right. So their idea ends up essentially pulling the state outside of the tree entirely, allowing you to keep track of state and have it update two entirely separate parts of your query tree, or your your react tree without having to do unnecessary renders, it's very performant. In those sort of ways. It's nice, I used it, I gave it a try. So I gave it the good old try here. And for the most part, I found that while it was nice, it worked well, the API was pretty good, it was a little bit more complex than I would want for doing anything sort of basic. And to me the use case for this in terms of, you know, application development, the the the like, the use case that they presented in the video announcing it was sort of like you could imagine like a, like figma or something, right? Like figma has a column where one column has the information about, you know, a square, and then you have the square that has the information about the square, and then maybe some other things that have some information about that square. And that though, all of those things need to know the information about the square, but the rest of the application doesn't, right. And that, to me is a very application based use case. I would never use this in a website. I'm going to say that straight up, I probably would not reach for recoil in the website creation business. You know, for me, I'm going to stick to something more basic this to me, screams application use. So to me, I didn't mind the API. I thought it was fine. I did think it was overkill, compared to a lot of the other options on this list. So it's very good for complex, splintered state. It seems overly complex for most normal use cases. - -86 -00:38:02,130 --> 00:38:15,840 -Wes Bos: Yeah, interesting. I'm just looking at the website right now. And if if you are shaking your head at Scott just said boxes that point to other boxes, just go to recoil j s. org, and they have a little diagram on the homepage that sort of explains - -87 -00:38:16,190 --> 00:38:39,570 -Scott Tolinski: that a little bit. visually. The talk to the video, the recoil state management for today. I thought the talk was really interesting. Again, I I watched the talk. I watched a couple talks I I gave it a tried. Yeah, it's pretty cool. But I don't think I'm reaching for it, I think. All right, next up is mob x. Have you used this less? - -88 -00:38:39,600 --> 00:38:40,230 -Wes Bos: No, - -89 -00:38:40,350 --> 00:40:03,170 -Scott Tolinski: I haven't used this either. So I know mob x is a huge community. And to prevent it, the mob of mob x is coming at me. I'm going to do my best not to say anything dumb about mob x. I have not used it. There's a big community, people seem to really like it. And in fact, when recoil was announced, a lot of people were like, isn't this just my backs, but I don't I honestly don't know, the nuances of that conversation. It's not just for react as and you can use mob x with just about anything. There's react versions of mob x. It's powerful. It's like Redux, powerful it uses. So this is one thing I wasn't quite sure because the docs say it has observable capabilities, but I wasn't sure if it actually used observables or if it just had observable capabilities. Maybe somebody can clarify that for us and we can retweet you. Cons here is it does seem complicated. It seems complicated. It seems like there's a lot of overhead in terms of understanding what's going on also a ton of the documentation, as well as examples and blog posts use decorators, and I got burned by decorators. So I'm not using them anymore. And I, I, I know you you can't you can use this without decorators. But like when so many of the examples are in decorators that kind of like Ooh, I'm gonna have to translate all of that. Examples now to my own use case, I'm not sure. You - -90 -00:40:03,170 --> 00:40:05,790 -Wes Bos: know, totally, I don't I'm sorry, I don't know what I - -91 -00:40:06,920 --> 00:40:26,280 -Scott Tolinski: know, I know. Yeah, my back seems like a good choice based on how many people are using it. But if I were to say any more than that, I would come off as being very ignorant, cuz I just really don't know, I've never, it's too complex for me to spend a ton of time into without making like a substantial like, you know, stamp in the ground. It's like, I'm learning mob x today. So it's not like something you could pick apart in a day, - -92 -00:40:26,340 --> 00:40:54,090 -Wes Bos: along with needing to do a project in x day, I also need to do one in one of these observable based state libraries. Because I think the reason a lot of people don't pick it up initially is because it looks nothing like that what we're used to. But the certainly is benefits to it, there's because if you take a look at how many people are using, as well as like, like large applications, like stuff, way bigger than, than I work on, tend to go for these types of things. So there's clearly something to it. - -93 -00:40:55,080 --> 00:43:14,130 -Scott Tolinski: Yeah, it's, it's funny, because like, I'll use that as like a barometer. Because like, I don't necessarily trust myself in some of those regards. So I'll be like, I don't get Redux, it seems very hard to me. But maybe I am just done. So therefore, let's see, there's a huge community of people using it, perhaps I'm just wrong about it. You know, and I like to use this community side, how many people are using it? How many people say nice things about it as a barometer? Obviously, I shouldn't, you know, should always trust yourself. But the end of the day, it seems like a good option for those of you who, who who find the syntax to be nice. Working with a management is tough, bound to create lots of bugs, lots of bugs, right? I mean, we all work with this stuff, we all know it could happen. And that's why you're gonna need a tool like sentry@sentry.io. Sentry is one of our sponsors today. And let me tell you, they do some cool, cool stuff. Sentry is always doing cool stuff. In fact, one of my favorite things is whenever Sentry pushes out something new, I get to try it. For instance, I'm currently using their performance tools right now to track performance all over my application, it's really good. In fact, it's so good that I can really find out which routes have the best speed, least amount of failure rate, for instance, I have some routes on my site that have zero percent failure rate, which is where all of them should be, you know, and when they don't have a zero percent failure rate that in Sentry is gonna really pick up the pace there. They also give you a little bit of a user misery score, too, which tells you when a user has waited more than an X amount of time, which I love, because it gives me like a little progress bar to see if people are upset on various routes. And sometimes it's like, Okay, this particular route was accessed by only a few people. And sure, it took a long time for those people. But that's not indicative of the rest of the community where you can see that a ton of users have access this particular route, and it's fast for them. So it's very cool. I love these tools, and they're brand new, I think you have to turn them on by beta flag right now. Yes, they're in beta, I definitely recommend checking them out. If you have a Sentry account. If you don't, you're gonna want to head over to Sentry dot i o and use the coupon code tasty treat, it's all lowercase all one word, and you will get access to two months for free, which is more than enough time to really see everything that Sentry has to offer. And you'll really realize why it's such an industry staple at this point. - -94 -00:43:14,130 --> 00:43:15,090 -Unknown: Okay, let's - -95 -00:43:15,090 --> 00:43:22,350 -Scott Tolinski: keep this moving here. We don't have a ton of time, but we only have two more options left. And then we're going to give our final thoughts on - -96 -00:43:22,800 --> 00:43:31,800 -Wes Bos: this. This next one easy peasy is called vegetarian friendly state for react. Oh, that's fine. I wonder what makes one vegetarian. But that's good to know. - -97 -00:43:31,800 --> 00:43:38,150 -Scott Tolinski: Maybe they're just fans, probably. That's great. But I'm not a vegetarian. But I'm a fan of vegetarianism. - -98 -00:43:38,160 --> 00:44:33,570 -Wes Bos: So. There you go. So yeah, this one, I've not used it myself. But it taking a look at it, it looks similar to not actually not I wouldn't say similar to Redux, but not entirely, the way that it works is you create a store. And in that story, every data types, and in that data type, you have the actual pieces of data, which are items. And then you have methods that are used to update it. So you can define what your different actions are to add, remove, update, etc, etc. On your different types of data looks nice, because it's all packed into one. Whereas it looks easy. It's called Easy peasy. So it does look easy. I like these ones where like the updaters. And the actual data live in the same place where other versus sex like Redux where they're all over a whole bunch of different files or functions. - -99 -00:44:34,320 --> 00:46:20,370 -Scott Tolinski: Yeah, I think ecpc was really, really built to be like, Hey, we get react Redux, we like Redux. But like, let's reduce some of that boilerplate. Let's reduce some of that config. Let's make it a little bit more modern. This came out right after like hooks came out. So I think this was like one of the very first like, new style of, you know, state libraries that came out of the whole hooks revolution. I guess you could call it a revolution but hooks addition to the application. Next up is one that it's funny, Wes mentioned this, I didn't even think to put this in here. Wes mentioned this, but this is a very legitimate option for those of you using Meteor. Meteor has this really neat stuff called reactive dict for reactive dictionary and reactive var for reactive variable. And it's very simple. It works basically just like react, wait, what does it work like set state did where you basically just pass in a key and then a value, and it just takes care of everything. And guess what it's reactive. And then when you use it, you just use a use tracker hook from Meteor, you just wrap everything in a use tracker, and you just say, Hey, give me the value from this dictionary. Alright, that's it. So the syntax is very simple. It's basically just getting set, which is fantastic. I'm in, I'm in there for that. It's reactive without any work, you don't have to do anything to make it reactive. The cons, however, are that you have a lock into Meteor, which of course is a con because you know, our front end code, it shouldn't necessarily be too locked in. But again, locking is one of those funny things. If you're not planning on moving off the platform ever, like do you really need to care about locking? I don't know, I go back and forth of this all the time. So I've been thinking about simplifying my state and maybe using something like this is a better idea. But who knows. Final Thoughts? on state? - -100 -00:46:20,370 --> 00:46:21,000 -Unknown: West, you - -101 -00:46:21,000 --> 00:46:27,300 -Scott Tolinski: have final thoughts on state? What do you think people should use? What do you use? What do you like? What it? What are your thoughts here? - -102 -00:46:27,420 --> 00:47:24,690 -Wes Bos: Yeah, I tend to go for the simpler and sort of easier to get up and running solutions. So that would be context using I'm really like this easy peasy one that seems like if I can look at an example, and go, Ah, okay, I get it. Like that makes a lot of sense to me, then that's those are the ones that I like to look at. And of course, you can get more complicated, and they have the ability to get more complex. But if I can look at the initial like basic, if I'm just setting a Boolean to true and false, if I can just write it in a couple lines. That's what I go for. So contacts, if you're doing data that's being pulled in, via an API still probably reach for context or something like Apollo as well. And that's, that's where I reach for just because I don't I don't work on applications that are, are massive, or have a team on that need to. So I'd like to hear what you think. Yeah, I - -103 -00:47:24,690 --> 00:48:46,920 -Scott Tolinski: think that maybe I think one that you should probably think about storing your application state separately from like, the application data as in like a is the nav open is to me, like a different set of problems than like, is the tutorials in from the database. So I keep that so separate for me. And I don't know, that's just my thoughts on that. If If you think differently, obviously, that's, that's totally valid. I also think that for state applications, to mean times people go with the flow in terms of what other people are using, right? They look at Redux and say, oh, everybody's using Redux. I gotta use Redux, or everybody's using this or that. There's so many options. And it's really a pro and con of reactors that there is so many options. But there are so many options that you can find an API for you. There is many API's in the sea, and you can find one that really fits your needs and wants, just based on you know, sometimes people like syntax, sometimes people don't like syntax, some people like not the podcast, of course, everybody likes podcasts, but like, in terms of like, robustness, or, or sort of large amounts of code to do very little, some people really like that. And that's valid, and some people don't like that. And that's totally valid too. So find that API for you. You can find it out there. I'm sure it's in one of these if it's not one of these and if it's in another state library that just exists to does that will read will give you a big ol retweet. They're - -104 -00:48:46,920 --> 00:49:04,140 -Wes Bos: beautiful. I think we should we should also have somebody on the podcast at some point that explains why you might want to use one of these other libraries that we don't have a whole lot of information about because I would love we don't run into all of these problems that we that need solving and certainly - -105 -00:49:04,140 --> 00:49:09,720 -Scott Tolinski: other people do. I want an RX JS explainer episode. Yes. I don't have to do any work learning it myself. - -106 -00:49:09,930 --> 00:49:22,470 -Wes Bos: Alright, if somebody that's listening knows who should have on for RX JS episode, tweet us and we will have them on. Alright, that's all for today. Should we move into some sick pics? - -107 -00:49:22,620 --> 00:49:25,080 -Scott Tolinski: We should? Yeah, let me get my dogs to stop barking real quick. - -108 -00:49:26,070 --> 00:51:34,050 -Wes Bos: Hello, what are you doing? Ah, I've got a real sick pic for you right now. And is a set of pliers I didn't know I needed until I I watched some like YouTube video. And a lot of these these guys that are super into tools always talk about these knipex Cobra pliers where instead of the flyers being like straight in your hand, they sort of go to the left or to the right. It's kind of hard just google knipex Cobra while you're listening to this, and the problem is that they are silly expensive. They're like these beautifully German made tools that are you buy at once you have it for your entire life, but like I just can't convince my wife to let me spend $70 on a set of pliers. So I've always been a fan of the Irwin vise grip tools, which is weird because Irwin and vise grip were two different companies in a while, but now they're just they're one. And it looks like they've knocked them off. And I saw him in Canadian Tire the other day and I was like, ah 30 is 30 bucks for a set of two. And it's really cool because they're they're a set of pliers, they're kinda like channel locks, and that you can make the gripping the radius bigger or smaller, except that they have a button that will lock them into whatever width that you want. So if you've ever used this set of channel locks, you'll know that they like they can slip and things like that. And also channel locks put all the pressure on, not on a tip like pliers, wood, but on the entire length of the jaw. So these things are awesome. And I'm never going to use another set of pliers. Again, because these ones are there, it just grips super well the locking in like if you have to put the tool down and pick it up again, it has the same width of the jaw that you set it on before because there's a button that will allow you to lock in. So check it out. It's called the Irwin groove lock clamshell pliers. I don't know what that is just go and go to your home improvement store and take a look at them. They're pretty nifty, huh? - -109 -00:51:34,050 --> 00:53:11,730 -Scott Tolinski: I'm gonna Can you drop your referral link in the show notes so I can get some of those. Yeah, that's a huge problem for me with vise grips specifically, you know them changing, changing widths and all that stuff. So wait, that sounds good. I'm gonna sit pick a movie that's currently streaming on. Let's see where is this currently streaming I'm using real good to tell. It's currently streaming on Hulu. So I watch this on Hulu. If you have Hulu, go ahead and watch this. Otherwise, just put it on your list to find it some other time. This is a movie called a becoming bond. It's a documentary about the stranger than fiction the true story of George Lazenby. Now, I have always been a big James Bond fan. Since I was a little kid I used to watch all the movies. And of course, George Lazenby if you know anything about him as a person, you'll know that he became James Bond and then basically just quit after one movie because he essentially be he's kind of a hippie. It's it's really, really wild life if you want to, if you want to really, really get a feel for how insane human lives can be. Becoming bond is the perfect documentary because this guy's life is absolutely nuts. He was like a car mechanic. And he, you know, is just basically doing everything super impulsively. And he's not necessarily like a great guy, but he just makes these random impulsive decisions. And he lies his way all the way into becoming James Bond. It's a wild it's a very, very wild movie. And I think Courtney and I were just watching it the whole time out the gate just being like what the heck, it's wild. He if you want to see how far confidence can get you, that's how far confidence can get. Yes. So very, very cool movie. - -110 -00:53:12,090 --> 00:53:12,600 -Unknown: All right, - -111 -00:53:12,600 --> 00:53:38,760 -Wes Bos: I shamelessly plug I'm going to shamelessly plug all of my courses Wes Bos comm forward slash courses where you can pick up beginner JavaScript or ESX for everyone JavaScript 30 they're free, they're paid. Check it out. If you want to learn a thing or two, use the coupon code syntax for 10 bucks off thanks so much. No, I not this is not a sponsored read. Thanks so much to myself for making these courses. - -112 -00:53:40,830 --> 00:54:17,370 -Scott Tolinski: Thanks guys. Oh verse for sponsoring this episode. I would also like to shamelessly plug my own things which is going to be my latest course is modern CSS design systems where we use CSS variables to build a design system starting at classless CSS, just really just writing your CSS, just without classes, first and foremost, to get a nice little base in there writing a ton of CSS variables and how you can use CSS variables to really make some really super slick CSS stuff happen. So check it out at level up tutorials.com forward slash pro sign up for the year and save some cash. - -113 -00:54:17,850 --> 00:54:22,380 -Wes Bos: Awesome. Thanks so much for tuning in and we'll catch you on Monday these face. - -114 -00:54:24,240 --> 00:54:33,960 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax273.srt b/transcripts/Syntax273.srt deleted file mode 100644 index 167afbe79..000000000 --- a/transcripts/Syntax273.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,160 --> 00:00:08,340 -open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ - -4 -00:00:08,340 --> 00:00:09,060 -Tip Get - -5 -00:00:09,060 --> 00:00:24,000 -workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Taylor. Totally. - -6 -00:00:26,520 --> 00:01:01,049 -Scott Tolinski: Welcome to syntax in this Monday tasty treat, we're gonna be talking about refining processes and how we come up with the ability to make ourselves consistently better in our systems and our processes by evaluating and making them better. Because chances are when you said something, I'm the first second third iteration of it might not be the best. We've learned this from code. This is like refactoring lessons straight out of code into productivity hacks. So my name is Scott to linsky. I'm a developer from Denver, Colorado, and with me, as always, is the Wes Bos. - -7 -00:01:01,110 --> 00:01:02,400 -Wes Bos: What's up everybody? - -8 -00:01:03,299 --> 00:01:04,590 -Scott Tolinski: What's up, Wes? - -9 -00:01:05,099 --> 00:01:10,760 -Wes Bos: Oh, you know, just hanging out in the woods, enjoying the nice warm weather out here in Canada? - -10 -00:01:11,040 --> 00:01:16,680 -Scott Tolinski: Hey, that's cool. Um, yeah, that sounds great. That sounds lovely. That sounds super lovely. - -11 -00:01:17,010 --> 00:01:17,760 -Wes Bos: It is lovely. - -12 -00:01:18,060 --> 00:04:43,010 -Scott Tolinski: What else is lovely. One of our sponsors today, that's sentry.io, essentially, is the error and Exception Handling service that is a such a good bug tracker, you want to track those bugs. And I'm not talking as creepy crawlies. Although they might be essentially that I owe it allows you to keep track of all of your bugs in a really, really great way everything's there. You can mark things as resolved. There's all sorts of interesting tools in it. There's a tool that I haven't used that I'm interested in maybe checking out but I am, I am very interested in this. It's the user feedback tool allows you to have a basically reported dialogue where people can submit feedback on your site, especially when there's an error that happens like a little pop up that says, looks like we're having a bug. Do you want to do you want to tell us a little bit about what happened? Have you used a software that crashes? I mean, I'm me I use what software to use crashes all the time. ScreenFlow crashes all the time. And I'm like always having to type in that box saying, Here's why ScreenFlow low crashed. And this is kind of that same thing, but it's all baked into your error and Exception Handling service. So if you want to check that out, head on over to Sentry dot i o use the coupon code tasty treat all lowercase one word, you're gonna get two months for free. So thank you so much for Sentry for sponsoring this podcast and being a great sponsor to us for so long. So I think the genesis of this episode to me came about when I was thinking about some processes that I've had and how, you know, I set things up, and I just do things for a little while, and maybe they become messy, or maybe they become less effective. Or maybe I stray away from the actual process itself. And building systems in your life is one of those things that's going to take you to the next level of productivity, right, you have to make less decision, things just happen. And things happen the same way every single time. And I begin thinking a little bit about functional programming, right? When you do functional programming, you run a function that gives you the same thing back every single time. There's no like side effects, there's no decisions to be made. It's just this thing that does the thing. It's done. Okay. So like To me, it got me thinking about refactoring my processes, refactoring my productivity, things to become more productive, to become a better communicator, to add all sorts of personal processes in we all have been experiencing a time crunch with the current situation. I have two kids and my wife is at home. So she needs to work, we both need to work sometimes it's impossible to find 40 hour work weeks for both of us. So what do we have to do? Well, we have to have systems in place to allow us to be as productive as possible in that time that you do get. So let's talk a little bit about refactoring our processes in terms of productivity. So okay, first, I think you need to identify slow processes just like your your computers, your task manager, you have to identify what exactly is the slowest worst thing that you could possibly have on your plate right now? I know for me emails a really bad one sometimes. It's even just like making appointments or things like that. What what are what are some things that are slow in your processes nowadays? - -13 -00:04:43,799 --> 00:05:28,650 -Wes Bos: Oh, yeah, definitely. Email, processing my inbox getting through it. More comes in than I can handle and I'm not very, like I do have processes for support but the emails that are related that need me to reply, Definitely, definitely an issue on my end. cleaning my desk is another pain point of mine right now, or I just put things on it. And then it builds up in for you know what, there's tools and wires and cups and stuff all over. And that's not really web development related, but it is related to how I am productive. And it's just a process that, obviously there could be a process where I cleaned it up and whatever, but I just don't have that in place right now. And it's the issue that I've been sort of looking at, - -14 -00:05:28,890 --> 00:08:22,800 -Scott Tolinski: Yeah, me too, you know, there was one, I take like a ton of medication by just take medication. And there was like things that was like, I'd spend this like cognitive little bit every single day trying to remember if I took X, Y, and Z or not. So I got one of those, those grandparents milk containers, I buy that thing. And every single Sunday, I fill it up, I set up that process, that was like something that was like a minor inconvenience in my life. And I've turned it into something that's not even a inconvenience whatsoever. I can definitely relate to the desk. I think it progressively as the month goes on as we get closer and closer to each of my deadlines, because I have a deadline every single month. As we get closer to the deadline, my desk gets progressively worse looking. And I think you could probably take a photo of my desk and have it be like a progress bar based on like, you could tell like how far along my courses based on how awful my desk is. And so I think a good thing is just identifying what are the processes in your life that are not good? Well, what could be using the tune up, then you want to set some clear goals like for me, I would like to start each week with a clean desk. Okay, not too bad. I think that's a pretty good goal, right? That's a clear goal that you can can identify. And maybe you can give yourself a little like, check if you did or not, sometimes I like to use an app called streaks to do make sure I do things when I do them. So that way I can look back and have a good understanding of it. So you're gonna want to be able to set a goal that you can track. So whether or not this is a clean desk, or to clean inbox or something, you want to say like, Oh, I want to have no, no more than 10 emails in my inbox, whatever, you set up this clear goal. And then you get to work on refining and refactoring that process. Now, sometimes the solution is a tool that you're not using other times, it's a very clear thing, right? So for instance, the desk, if if I were to take that time, and maybe spend, I don't know, how long would it take me to clear off my desk, 15 minutes max, if I were to take 15 minutes on a Sunday to clean up my desk every single week, I think that would that would just about do it. So I would go ahead and schedule that time in my calendar or something like that, and give it a try. Like that. So for me, if I'm going to start these things, this is productivity hacks, sort of stuff, territory, I'm gonna give it a try. As long as the investment isn't too high, sometimes you have to sign up to a new service and move all your emails over and do whatever like that. To me, that's a too much of an investment to just try. But if it's something like cleaning my desk off every Sunday, I'll try it for a month and see if I can stick to it, then maybe I'll look back on it and see, hey, did this thing does go as well as I was hoping it would. And it's important at the end of just giving it a try for a week or try for a month or whatever to take a look back and evaluate whether or not that actually made your life more productive, better, whatever. Because if it's not, then that value, then you know, is it worth the 15 minutes that you're giving it. I like that - -15 -00:08:22,830 --> 00:09:06,800 -Wes Bos: I like that a lot. Because like you could do anything for 30 days, I remember was Matt Cutts. He worked for Google. And this is probably 556 years ago, but he did like a 30 day challenge. Or every every month, he would, he would take on a new thing, whether that's trying to write a blog post for 20 minutes every single day, or not eating meat for the entire month, or whether like you just like or whether it's not using your car and biking everywhere that you need to go for 30 days, like you can impose these challenges on yourself and say, I'm just gonna try it for 30 days. And you take a look back at it after 30 days and say, Okay, what did I learn from that? about myself? as well as like, Can I keep doing it? Or is it worth doing it? Or is it not? - -16 -00:09:07,350 --> 00:12:28,080 -Scott Tolinski: Yeah, and that reflection period, it's definitely like an important part of the process. Because if you don't reflect on it, chances are, it either means that you forgot about it, you didn't do it, or it like fizzled out or whatever. And sometimes, like I think that's like the easiest mode for us is to like, try this new thing. And you know, you're excited about it for a week or two and then you forget the third week and then the fourth week, you just don't even bother. And then at that point, you're like, Alright, just back to life as normal. Yeah. But if at the end of that fourth week, you did okay, let's do a little breakdown and talk about what worked about then what didn't stick to creating these kind of systems in place. Now, one thing I like to utilize is to like ask around people that I trust and know, just like what kind of tools they're using for various things, right? It's like time blocking or, or batching or eating a frog or even In like, actual tool like applications, whether it's to do list or I mentioned foam in the next coming sit next episode, I think code planning for with GitHub or using notion or whatever, whether or not it's like a strategy, or it's a actual physical application, I like to ask around to see what people are using. Because chances are everyone's on their own sort of systems journey and people that you are know that are really into this stuff. They they do a lot of research and people come up with some really great things. That's how I heard about foam. I heard it from I don't with JavaScript, Joe, on Twitter, is this name rusty? Who's rusty Joe? For a little bit? I don't know use TypeScript Joe for a little bit. I'm not quite sure what he What are you currently is, let me see. If he's back to .js. Oh, he's back to .js. Joe, that's why I heard a phone broke in just ask around what people are using, get one of these things to try. Whether it's batching, time blocking frog eating, setting a whole list of priorities, doing those kinds of systems and then evaluating. So I personally have found that there are several systems in place that work really well for me one to do list works really well for my calendar works really well for me, but I have a hard time sticking to them. So now what I need is to refine these processes to figure out how exactly I can stick to them better. Okay, how can I give less overhead to myself, I less spend, spend less time thinking about email, spend less time thinking about my to dues, and more time just actually, you know, getting things done? So to say? I don't know, it's a deep topic. There's a lot here. So what are these people using and why? So I mentioned time blocking batching in eating frogs. Now, these are definitely things that can make you more productive, right? They can solve a bunch of your calendar issues, they can solve your to do list issues, and whatever. But not all of our productivity issues are around calendars in whatever I think about like, especially in like code territory, like project management. And obviously, that kind of thing, like really grows based on your team. But if you're an individual, and you're doing some project management, do you do anything to keep track of like ideas beyond talking about like, beyond bugs, like beyond fixing bugs? Do you keep like how do you keep track of the things you would like to add to your platform? Or maybe ideas or like feature requests, those kind of things? How far yeah, things are - -17 -00:12:28,110 --> 00:13:08,040 -Wes Bos: like platform feature requests, things, those go as GitHub issues. So even if they're not a bug, I still stick them in there. But more ideas, about course ideas, things like ideas that I want to add to the platform or just like dreaming in general, I'll often do that sit in the hammock or something like that, and sort of just kind of think of all kinds of really interesting stuff, or just let my mind go wild. And for that, I'll usually pop it into a markdown. I don't have somebody asked, after the show. We talked about markdown notes. Like what's the process for editing on your phone? Yeah, I don't have a I don't have a good solution for that. Yeah, I would like to figure that out. Do you? - -18 -00:13:08,160 --> 00:14:31,980 -Scott Tolinski: What do you use? man ever since I moved through this apple thing I found out so hard about grapes with the Apple phone is that things aren't as easy to do as they are on the Android phone. Right? The apples, because I'm on Yes, the Apple phone. I'm on Google Drive for all my stuff. Once I signed up for the iCloud, the iCloud once I signed up for the iCloud. And I had like files thinking between my desktop, it was way nicer. So I use iCloud to sync my markdown folder of notes to my phone. And then I use an app on my phone that allows you to set a folder of markdown files, and it's all markdown. So as long as you find a markdown editor for the phone and sync that file, I interchangeably write and create notes on my phone or within obsidian or foam or whatever. And it just works. Now granted, not all the features of foam or Rome or any of those are going to work on your phone. But just simply having that ability to edit a markdown file itself is really all you need. I use an application called one writer, I've turned into the the person that I always hate. And I do not know if this exists for Android or iOS. But I can guarantee you that there is a markdown editing app for Android and as long as you just keep those files synced, easy peasy. Easy peasy. - -19 -00:14:32,219 --> 00:15:32,190 -Wes Bos: I need to try that out. I don't I don't want to pay for iCloud. I don't know what I have against Apple's services. But I don't like I just don't like them. I know. So I think it's just I don't want to add another thing that I have to pay for. But I'm sure I could like use Dropbox or something like that. I actually been using this app and I'm working on converting my entire beginner JavaScript course to text and I'm working with somebody to do this. And they told me about this app called notable. And it is markdown. It's got a little bit of a funky syntax for adding attachments. But it's all in a Git repo. But we use notable to edit it all, which is really cool. So maybe I'll see if they have what's called notable. And let's see if they have an iPhone version. So I bet I could use Dropbox for that. Although I want to get away from Dropbox to just get away from notable I, they have an iPhone app. So I could probably use that. - -20 -00:15:32,730 --> 00:16:33,150 -Scott Tolinski: Yeah, so Okay, so you know, there's a lot of stuff in this episode. And this was really just me pontificating a little bit on the, you know, the processes that we need to refine what takes a lot of time. And the end result isn't necessarily that there's going to be one solution to all of your problems, right, the notion isn't going to solve all of your problems or whatever it's going to solve some of your problems used correctly. So as long as you're willing to take a look at what is lagging behind in your processes and life, and how you can improve them. And this isn't, you'll be able to squeeze more out of that that toothpaste roll that is your date of hours. So just a thought, take a look at what is slow right now for you and figure out how you can make it faster, or talk to your friends about what they do for better email or whatever. And hopefully, it's not, hey, sign up for a new email, because that would be a huge bummer. I'm not gonna I'm not gonna do that, you know? - -21 -00:16:34,500 --> 00:17:00,840 -Wes Bos: Yeah. So I love hearing how people have attacked these things. And sometimes it's not like more complicated processes, but it's simply just like very simple rules, hey, I don't I don't do this, or I do this or only reply to requests that come in through this email address, and you just don't do anything else. And I would love to hear what other people have for planning features and things like that. Make sure you tweet us ATS index FM. And let us in on that. - -22 -00:17:01,080 --> 00:17:38,070 -Scott Tolinski: Yeah, because at the end of the day, we're developers here. And so many of these skills that we know whether or not it is functional programming or whether or not it is creating interfaces, a lot of these skills that we're picking up. And those same sort of skills can be applied to all sorts of areas in your life, including productivity and time tracking, all those sort of things. We know I don't mean physically coding up something I'm saying like the stuff that you learned from making websites about dry code and making things efficient and whatever. Hey, try to see if you can utilize some of those skills in your day to day life as well. All right, thank - -23 -00:17:38,070 --> 00:17:43,800 -Wes Bos: you so much for tuning in. And we will catch you on Wednesday. Peace, peace. - -24 -00:17:45,660 --> 00:17:55,440 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax274.srt b/transcripts/Syntax274.srt deleted file mode 100644 index a15b57780..000000000 --- a/transcripts/Syntax274.srt +++ /dev/null @@ -1,880 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,530 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes bos. - -2 -00:00:10,949 --> 00:00:53,790 -Wes Bos: Welcome to syntax. Today we have a you know, it's the podcast with Theseus, well, development truth, I don't need to say that today we have Adam Argyle on the show to talk to us about how does stuff get added to CSS, he said, you know, I'd be sitting there and you may be saying CSS needs a zebra stripe property, how would you go about getting getting that added to CSS? So Adam is here today to explain all of that. We'll talk about him and introduce him in just a second. But first, we are sponsored by Log Rocket, which is browser session replay. And Freshbooks, which is a cloud accounting with me, as always is Mr. Scott hilinski. How you doing today? - -3 -00:00:53,999 --> 00:01:04,470 -Scott Tolinski: Scott? They don't good. doing very good. Just hanging out. You know, drinking some coffee, the reg. I got, of course coming out today. So you know, I'm on my normal gogogo mode. - -4 -00:01:04,859 --> 00:01:09,930 -Wes Bos: Oh, yeah. Good. Congrats. So welcome, Adam. How you doing today? - -5 -00:01:10,139 --> 00:01:16,170 -Adam Argyle: I'm happy. stoked to be here. It's weird seeing your mouth. Let's move with the sound because normally All I hear is. - -6 -00:01:17,700 --> 00:01:26,040 -Wes Bos: Yeah, we only once if we ever put out that video of us recording because it's not that interesting. But maybe maybe - -7 -00:01:26,579 --> 00:01:29,010 -Scott Tolinski: people ask for it all the time, though. It's not like Yeah, - -8 -00:01:29,040 --> 00:01:34,590 -Adam Argyle: yeah. It's like a curiosity that I have to I have to scratch the itch. I'm just like, what do they look like? You know? - -9 -00:01:35,880 --> 00:01:45,540 -Wes Bos: Yes, not very good. So why don't you introduce yourself, who you are, where you work, what you do things like that? - -10 -00:01:45,780 --> 00:02:11,970 -Adam Argyle: Sure. My name is Adam Argyle. I'm a 34 year old dude from Seattle. I've been writing code and apps for professionally over 10 years. I currently work at Google. I'm on the Chrome team. And I love CSS with like this crazy fiery passion. I really just love making like good, smooth, tangible, gorgeous, buttery, silky interfaces. But you know, I do that at Google. And I and I teach and I talk about it. That's kind of mean a nutshell. I guess. - -11 -00:02:12,330 --> 00:02:15,530 -Scott Tolinski: Man, I'm into gorgeous, buttery, smooth interfaces. I'll tell you that. - -12 -00:02:15,560 --> 00:02:22,800 -Adam Argyle: Yeah, you are. Yeah, you do a great job with that. Hey, thank you. UX engineers we got to sweat those details right? Yeah, yep. - -13 -00:02:22,830 --> 00:02:24,500 -Scott Tolinski: Yeah, yep. details - -14 -00:02:25,110 --> 00:02:46,199 -Wes Bos: we shouted out your your Twitter account. I don't know a couple months ago, just because like you've been pumping out really good CSS content and like you see a lot of JavaScript content on Twitter but some of the like nitty gritty what's new and CSS things like that it doesn't always get surface so I think your Twitter account is one to follow for that type of stuff. Thanks. - -15 -00:02:46,199 --> 00:02:56,850 -Adam Argyle: I really hope to be a hub for old and new sort of info, but I can't I love the new stuff. There's something new and shiny. I'm there I'm trying it out and I'll tell you what's good about it. Yeah, - -16 -00:02:57,569 --> 00:03:08,250 -Wes Bos: that Twitter account so you can follow as Argyll Inc a RG while he e i n k? And is the ink because your wife is a tattoo artist? Are because he loved tattoos? - -17 -00:03:08,280 --> 00:03:38,819 -Adam Argyle: No, it's actually really old. Man. I think I made it in 2002 or something like it's almost as old as like your aim handle. You know. Argyle ink was I think I just thought it sounded cool. It sounded like a business name like Argyle ink I NC. And so now all I have to do is correct everyone. It's okay. I just thought it was creative. Like if you ever seen Archival Ink, what would it look like? If you could paint with it? If you could paint with argon equal it would leave a pattern behind you know, like, Is it a mask into a pattern like anyway, so I just like to is provocative. - -18 -00:03:39,359 --> 00:03:44,759 -Scott Tolinski: There was a video game Mario Paint, where you could paint with our girl patterns. So that was a - -19 -00:03:45,509 --> 00:03:53,100 -Adam Argyle: that might need to be my new website video that plays is Mario or me maybe all show up and paint Argyle paint on the screen? That sounds awesome. - -20 -00:03:53,220 --> 00:04:01,410 -Scott Tolinski: That would actually be a pretty cool project if you think about it, because you could just like do it like with a mask and have some art beneath it. And when you have the Yeah, to be a good background for my - -21 -00:04:01,410 --> 00:04:11,039 -Adam Argyle: painting. Totally this Okay, Challenge accepted. You could even do it with pixels, so that it had like a soft edge to it and was like, Oh, yeah, like real paintbrush, - -22 -00:04:11,069 --> 00:04:27,450 -Wes Bos: and yeah. Let's talk about CSS for the entire episode. So if there's something that should be added to CSS, one might think that the process of getting something added to CSS is go on Twitter and complain about it. - -23 -00:04:27,480 --> 00:04:28,470 -Adam Argyle: holler at your boy, - -24 -00:04:28,499 --> 00:05:15,060 -Wes Bos: right? Yeah, holler at your boy. Hopefully, the browser vendors see it and then implement it. But there's there's obviously there's an entire standards body behind CSS and there's proposals, things that people think should be added. There's like years and years like Flexbox and grid went through, I don't know something like six or eight years of development before we finally got it. So there's this whole process of back work that happens before it actually hits the browser and before we can actually start using it. So that's what I want to sort of understand today is like, how does Something like CSS variables or color functions or border radius even get added to it. So I asked him to come on. And he made the entire outline for the show, which is awesome. So do you want to sort of take it from here and start with start with what you got? - -25 -00:05:15,120 --> 00:06:08,910 -Adam Argyle: Yeah, I just want to, like introduce it to like, in that design systems are a really hot topic right now. And you could almost think about the web and CSS as a part of the design system of the platform of the web, right. And it's been around 1520 years now has a governance model. And there's folks representing pieces of it, just like your design system. And so it kind of makes sense to think of it that way. Because the scale of what we're about to go over is kind of large, like, some things go kind of quickly through the process. And some things take ages, right, because they're huge, and they're big risk factors. And they have all these implications. So I just thought that maybe hopefully sets up the scale of what we're talking about as being reasonable. Right? It got here slowly, there was even at one point, CSS itself was a proposal. And that's just kind of really about Yeah, there were there was competition. One of them was jSs, EI, JavaScript style. Oh, yeah. - -26 -00:06:08,910 --> 00:06:10,170 -Scott Tolinski: Okay. - -27 -00:06:10,290 --> 00:06:35,850 -Adam Argyle: And it was a proposal, I think it was very similar to JavaScript style sheets, where you'd have something a little bit more imperative and less declarative, and blah, blah, blah. So there were proposals and folks met to, to hash out which one was going to be right and why. So anyway, we could follow a couple of things through the process. Or we could just go over the process. Do you guys mind? Or do you want to follow something along or, or just go through the process, you have a preference? - -28 -00:06:36,270 --> 00:06:41,490 -Wes Bos: Let's go through the process and like, give like maybe a couple examples of things here or there? That makes sense? - -29 -00:06:41,550 --> 00:07:19,200 -Adam Argyle: Sure. Okay. So like, I have a couple of proposals out that can help set up things to think about in terms of proposals. And yeah, step one, is, is essentially Yeah, you have to say what it is you want, right? And kind of the easiest place to go say that right now isn't a GitHub issue. So if you have a cool idea, which people do all the time, just go to GitHub, and articulate the problem. And your use case, and maybe a solution, you don't even have to have a solution for proposal, you can basically be like, this is a really common thing I build on the web. And man, there's nothing easy to help me out. If this one little thing was here. I cut out this whole chunk of code. - -30 -00:07:19,830 --> 00:07:23,550 -Scott Tolinski: What's the repo? That you know, is - -31 -00:07:24,000 --> 00:08:12,660 -Adam Argyle: CSS Working Group drafts? Let me Yeah, W three Cs slash CSS Working Group drafts. And yeah, it is it's as raw as open up a new issue and start typing, they'll help you guide it into getting proper tags. And just like if you were in some major repository, trying to contribute to a framework or something, right, they're going to have sort of processes that they'll help guide you into and stuff like that. But I like that the process starts with this like innocent conjuring of a concept. And you don't really know if it's good or bad until people start talking about it on that. So that's how you can start to gauge your proposal or your ideas, success, or whatever's how many people started to comment on it the first day, because sometimes a proposal will go out and it sounds awesome. Like I have one for motion blur. I was like, yeah, motion blur, who doesn't want motion blur on the web? Right, Scott? Scott, wink, wink, God, - -32 -00:08:12,720 --> 00:08:13,590 -Scott Tolinski: I'm in, I'm in - -33 -00:08:15,750 --> 00:08:42,899 -Adam Argyle: it, so I like I'm like, I'm dropping fire on the proposal, and then like, it gets some love. But then you have other things to get proposed. And all of a sudden, the comments are hot, and they could be hot in a bad way, or a good way. They could be hot in a bad good way. Right? anyway. So that's like a good gauge of interest from the community or interest in the spec authors themself is like, how provocative is it? Well, how much does it have to offer? How much is it anyway, so it's kind of a fun thing. - -34 -00:08:43,399 --> 00:09:04,110 -Scott Tolinski: It's it's amazing that it's so I don't know, you think of this is CSS as being this this nun, an unchangeable thing that grows over time, but this thing that you have no control over. And it's amazing that, that it's that easy to just pop in there and throw in an issue if you have an idea or read through other issues or express your opinion on them. And it's just amazing that it's in 2028. So this open, you know, - -35 -00:09:04,980 --> 00:09:15,570 -Adam Argyle: I agree, and GitHub has been an awesome spot for that conversation to be facilitated out in the open and yeah, open sources. It's sick, right? I mean, we're in a really, really fun time for all this. - -36 -00:09:16,080 --> 00:09:47,429 -Wes Bos: I'm just looking up something that I asked, I don't know, maybe four years ago, I asked Rachel Andrew, she had the like, CSS, she had like an entire repo of just asked me questions about CSS Grid, because she was one of the few people that are that understood the entire thing. And I said, like, how do you select rows in CSS Grid? Or can you select rows and CSS Grid like I want us like every other row on wrapped elements. And that's not possible in Flexbox, or grid right now. And I'm just looking that up. It's 28 days ago, - -37 -00:09:47,429 --> 00:11:15,450 -Adam Argyle: somebody proposed pseudo selectors for selecting elements based on which row they are in, which is kind of cool. That would be sick. Absolutely. And yeah, sometimes things can sit dormant for a while. Right, you can have like a real rad idea just chillin. And it's like incubating and it sometimes they're waiting for timing. Okay, timing is a huge one, I think we Okay, step two in this outline that I've put on the document was time. So we had a GitHub issue. And just really quick the bullets I had in here as you share your use cases, make sure the problem that you've had is really succinct. You can strongman a solution be like, wouldn't it be sweet if I could do this. And so if you go to like my motion blur, one, you can see me like, trying out fun motion blur syntax, I'm just being creative and trying to think about something that fits within the spec and is reasonable. And you can even make a JavaScript demo. So if you really want to go far with a proposal you'd like, here's the CSS I want to write, here's JavaScript, showing you the interactions that are the result that I want to get, but I prefer to do this declaratively. So you can kind of go polyfill yourself, just super rad. And then step two, so after there's a proposal, and it kind of gets into this, like public facing document, it Time, Time needs to happen. And this is where you might have someone else make a proposal against her proposal, like counter proposal, or they could fork and contribute to your proposal. Comments are going to happen, people are either gonna like it or dislike it, they're going to tell you where it's broken. And there's gonna be a lot of back and forth and maybe even some bike shedding. Hmm. Do you think any bike shedding happens? - -38 -00:11:15,899 --> 00:11:18,570 -Scott Tolinski: Never. Ever - -39 -00:11:18,600 --> 00:11:31,140 -Wes Bos: now, for our audience bike shedding is when people talk about what color they should paint the shed instead of actually building the shed. Is that a fair? That's literally Yeah, it's - -40 -00:11:31,140 --> 00:11:53,820 -Adam Argyle: like the sheds not even done yet. And you guys are over bickering with your beers over What color? It should be. You know, it's Yeah. It's sometimes bike shedding is good, right? Like, look, look, the color of your shed and the color of your house. This is important, but maybe we should have the house done. So anyway, bike shedding happens. And at that point, it can be kind of nice or bad. Because it can hold something back. Like we have logical properties. Y'all did an episode on logical props, right? - -41 -00:11:54,120 --> 00:11:56,039 -Scott Tolinski: Yes. Or we talked about that. - -42 -00:11:56,070 --> 00:12:41,970 -Adam Argyle: Yeah, you talked to Okay, I remember you represented him really good. I was like, real proud. I was like, Wow, nice job. But like logic properties have a shorthand that currently is being it's had so much bike shedding, it can't move anywhere yet. So when you have logical properties, you can say margin block and do just the top and bottom margins and a shorthand, you can say margin in line and do just to left and right. But you can't say margin, and then do all of the sides with logical properties, you get all the sides in the physical instead of the logical. So they're bike shedding over how to do that, like people are gonna want to use logical properties on all sides in one shorthand, what's the word? And so there's like lm margin, or margin, colon, whatever. And then you put not logical at the end, and there's all the spikes shouting about like, how would someone say they want to use margin shorthand, but get logical properties out of it? - -43 -00:12:42,000 --> 00:12:42,690 -Scott Tolinski: Oh, yeah. - -44 -00:12:43,110 --> 00:13:00,510 -I actually used logical properties in a course lately. And when people were taking the course, they were like, this is the first time I'd ever seen this. Why can I do that? Like, specifically that use case that you outline? And it was just like, Oh, yeah, you're right. Yeah. It Yeah. It's funny that you you mentioned that exactly. - -45 -00:13:01,049 --> 00:14:08,520 -Adam Argyle: That one particularly haunts me, because I want it so bad. Like I'm so in love with, like, logical properties right now. And then I'm like, oh, but oh, that's weird. I'm like, I'm, there's just one side of this. I can't do yet. Yeah, right. Yeah. So I went into that proposal just the other day, because right, it's in this moment of time, it's churning in time. It's not an editor's draft yet. So I went and I bumped it. I went and I just went to the proposal and like, this is meaningful. Let me go. Here was I actually tried to say something that I thought would be provocative, because I was like, let's spin people up. So anyway, you can go in there. I didn't even like shouted so much. I'm like, let's bike shed it this way. It'll be fine. Because I think I mentioned like leaky scopes, or something. And I was like, ooh, people love talking about scope leakage. Anyway, right. Our industry is fun. I love our terms. Okay. So anyway, things happen with time, right, multiple proposals back and forth. And if something kind of gets hardened, and it gets enough of a proposal that kind of feels solid, it can move into an editor's draft. So okay, let's pause for a quick question time. And then we'll bounce between this like asynchronous and synchronous stuff that starts to happen in this time zone. So no, any questions while we're over here? - -46 -00:14:09,330 --> 00:14:35,070 -Wes Bos: What do you propose? Like what do you think about what you should do for logical properties? If you want to do them all in one go so that I guess we should explain to the audience The problem is that you can do block which is top and bottom, but if you're in Japanese, then it's left and right. But if you just do just margin, it's always top right, bottom left, and it doesn't switch if you are switching your, your document orientation. - -47 -00:14:35,159 --> 00:15:32,909 -Adam Argyle: Yep. So my preference is I've kind of gone back and forth. And I and I think I like this syntax, it's margin colon, you know, one REM space, one REM space, one REM space, two REM or whatever is space, logical. And so you just sort of flag it a little bit like and here's the reasons I like it is because it is contextual to just that one instance of declaration. So just that much shorthand that I wrote, is articulated as wanting the logical property orientation. versus some of the other proposals have been like, well, I want to go into my style sheet just like at page flow relative or flow logical. And then you set the whole document, pretty much exclusively use logical properties and physical properties become the one you have to opt into. And so yeah, I like the one where it's sort of like, only have me modify the little pieces that I need to modify it one time, instead of doing something sweepingly, that might cover the whole page. But oh, yeah, - -48 -00:15:32,940 --> 00:15:47,640 -Wes Bos: yeah, that's, that's kind of like, um, background size cover. I like once in my career have remembered the syntax to use background size cover on the background shorthand, there's like a slash in front of it, or something weird like that. Yeah, - -49 -00:15:47,640 --> 00:15:54,960 -Adam Argyle: there's a lot of fun slash shorthands. In CSS, I like tweeting those two because they're, they're like, tricky, fun little separators. - -50 -00:15:56,309 --> 00:16:04,830 -Wes Bos: Was that slash added, because they, they had to modify shorthand in after, after it had already been created. - -51 -00:16:05,490 --> 00:16:37,529 -Adam Argyle: The slash is like a, I don't know, when the first one showed up, I feel like it's five or 10 years ago. But it's a separator in a special way, where it's like a space as a type of separator. And we have parentheses as containers for parameters. And the slash is, it's some sort of like explicit separator, I can't remember why. But the CSS Working Group has a very, very explicit reason that they like to use those. And you see, it showed up in the new color syntax, too. So instead of hsla, it's HSL. value, value value, slash opacity. - -52 -00:16:37,529 --> 00:16:39,510 -Wes Bos: Oh, you're right. Yeah, - -53 -00:16:39,510 --> 00:16:46,200 -Adam Argyle: there's there's new functional color notation is what it's called. So you think I've even heard of that? Oh, it's awesome. - -54 -00:16:46,549 --> 00:16:54,149 -Wes Bos: An entire episode of these little nuggets like 20 things that are maybe are coming to CSS or something like that. Yeah. - -55 -00:16:54,149 --> 00:17:12,320 -Adam Argyle: So I do think there's, there's so much to just little tweaks to they're constantly revising this in a really, really healthy way. I just, the more I get into the working group, and I hear these calls, and and I'd see these meetings, these folks are really, really considerate. It's the type of people you would want managing your design system type of thing when - -56 -00:17:12,350 --> 00:17:45,750 -Wes Bos: you trust them. I'm just like searching all over this repo. Now. I know mind things that I want. Because like another thing I want to go vote Yeah, dead dead small opacity added to a hex color. Like right now, if you want to do like, Oh, yeah, you want to do like 50%? Yeah, yeah, it could be like a, like Fr. A. And you have to remember what the hex values are for like zero through 100% opacity. Yeah. And I would love to be able to do just hex for slash 0.5 or something like that would even be better. It'd - -57 -00:17:45,750 --> 00:17:50,190 -Scott Tolinski: be like a transparency function. Right? You could just call it functions of trend. Why - -58 -00:17:50,190 --> 00:17:52,950 -Adam Argyle: don't you pull those in the CSS Working Group drafts? - -59 -00:17:53,160 --> 00:17:54,630 -Scott Tolinski: Right? Yes. - -60 -00:17:55,710 --> 00:17:58,170 -Wes Bos: Is that Do you know where that's at right now? Because, - -61 -00:17:58,380 --> 00:18:08,250 -Adam Argyle: yeah, I'm writing. Um, that is the first thing I'm an editor on. So I wasn't going to boast or anything, but that you brought it up. So it wasn't me. Yeah, I - -62 -00:18:08,250 --> 00:18:13,710 -Scott Tolinski: want that. I want that. I also want to be able to use CSS variables in media queries. - -63 -00:18:14,040 --> 00:18:39,590 -Adam Argyle: Ah, dude, that one hurts. I want that really bad, too. That post CSS will do it for you. It is a build step. But yeah, sometimes that's not good enough, right? You want it like in there for real? It's got to have it. Yeah, we're almost at it. I mean, we're sidetracking a little bit here, right? But we're, like our build tools are gone, right? It's just like, Ah, you're like, I use Babel, just for like that one thing. And then it's like, I use post CSS just for that one thing. Like, how long until they're gone? I don't know. Is he interesting? - -64 -00:18:39,660 --> 00:18:48,660 -Scott Tolinski: Oh, in West as a Canadian, don't you feel upset that you can't use the correct spelling of color? By your? Yeah. So you had you have to use post CSS for that - -65 -00:18:48,690 --> 00:19:02,330 -Wes Bos: we have both Gray's you have those grades, or something in my brain totally clicks. And I never spell it the wrong way. But I always put a unit when I'm typing it, and I never put a unit when I'm not - -66 -00:19:03,000 --> 00:22:07,200 -Adam Argyle: nice, nice skills. Oh, though, I was gonna say that the color functions. One of them has an implementer Oh, snap that actually rolls that's really nice into the kind of the next settings here. So let's follow cold color functions a little bit. Okay, so what we said we have an issue. time has gone on, people have talked about it. Now let's talk about two two ways that time is being impacted. There's by community like Scott and West who are visiting these issues, and they're uploading them. And they're commenting. And they're saying yes, I have use cases for that. And the working group goes, look, we have interested users of a feature that's important to them to know that people want to use it. The other side of that is implementers. And then another role is people who are authors. So these are the ones bothering the spec itself. So you need interested users, like developers, you need interested implementers These are people that work on the browser, and then you need a spec person in the middle to sort of articulate and write up something that can meld these two folks together into a harmonious feature in CSS. So we have the editors draft right now for color functions, it's really it's color level five. So color level four. Anyway, there you can go look at what came in color level four, and what will be coming, that's still there not everything's out from color level four, Carlos color level five builds upon color level four, it's so much it brings in these color functions, one of the color functions has an implementer. So that's essentially the exciting thing I was going to get to as someone at Microsoft working on chromium now, right, we have two different big companies working on the same engine, fair, collaborative, they picked up color functions, they pick a color function so that they could fulfill a use case that they had. But ultimately, these things are, they're moving. And I think it's really exciting that if we could have that in our CSS, it would make make theming, and all these sorts of things. For design systems, right, you get to articulate your brand values in one spot, and then just build off of that strong foundational route a whole system into your app. So that's coming, where it's just gonna be all managed in CSS, no build steps, super optimized, editable in dev tools, the whole nine. So we have the editors draft, it's being written right now by just people. So that's right now it's me, you know, Leah, and Chris. And we're each writing different parts of this editors draft, we communicate and contribute together on GitHub. It's very public in the open. So this spec it's getting written is for developers and for implementers. And we're trying to do it in a space where everyone can talk about it and contribute with us. And what you need after a draft is to get implementer interest. So you need to convince a browser developer to start prototyping with it. And At which point, they begin prototyping with it, you'll start to see tweets that go out like intent to prototype it up, you'll see these and that means a browser is putting a new feature behind a flag, and you can open up Canary and turn on and try a new CSS or a new JavaScript feature, because there's an implementer. That's implementing something against a draft spec. So this is why it's declared as intent to prototype and not intend to ship intend to ship comes later in this process once there's been some hardening. So I'm going to take a little pause and breather, and we'll reconvene? I don't know. - -67 -00:22:07,770 --> 00:22:32,880 -Wes Bos: That's why they have they got rid of vendor prefixes, right is that people were vendor prefixes were initially meant for testing this stuff and sort of putting it out there. But then everyone just started to go ahead and use it. As soon as it snuck its way into one browser. And then we'd be like, I totally am chrome every other browser socks. And that's why vendor prefixes are pretty much not a thing anymore. - -68 -00:22:32,910 --> 00:23:30,600 -Adam Argyle: Is that correct? That is correct, they're gone. They also just didn't encourage, like, we want people to use things unprefixed because then you're not sort of championing one browser over another. So we're, then you're not playing any favorites. And so it's kind of nice to get rid of them. And then do you guys know origin trials, it's like the next more hardcore version of experiments. So I see we have prefixes, that's like the old school really easy way to get started with an experiment. We have experiments, which you can go into Chrome settings and turn these on about flags. So Chrome, colon slash slash flags, and you can go turn on a bunch of fun experiments. And then there's origin trials. And this is something where you can work with Chrome itself and enable your domain. That's why it's called an origin trial, like your website would get special treatment from Chrome. And it would automatically turn on a bunch of cool flags for every visitor, cool, your visitors will attend your site and get a flag that you want. And so that you can prototype with this. It's like a canary sort of like scenario. Kind of cool. - -69 -00:23:31,080 --> 00:24:36,780 -Scott Tolinski: Yeah, very cool. Awesome for experimenting. And if you want to experiment with your site, make sure that you use an N service to make sure that your users can give you good feedback about whether or not your site is actually working. And I'm talking about Log Rocket. Now, the cool thing about Log Rocket is that your users don't have to explicitly give you that feedback, you just get it because Log Rocket takes a session replay of your site whenever anything goes wrong. So let's say you heard us talk about something fancy CSS wise, you just throw it into your site without even thinking and well, that thing doesn't work just doesn't flat out exist. So your site's broken and ugly. Maybe you threw in some bad JavaScript in there, too. And the user clicked on something and you actually get to see visually that not only does your thing not work, but it's also broken and ugly. So you can see this all with session replay via Log rocket.com. You also get access to your Redux store, network activity, console logs and errors all that more. And it even works with everything that you know and love. So check it out Log rocket.com forward slash syntax, and you will get 14 days for free. So check it out. - -70 -00:24:37,440 --> 00:24:41,190 -Wes Bos: So what's next after the implementer? - -71 -00:24:41,580 --> 00:25:56,100 -Adam Argyle: Okay, so we've got the editors draft. And the next phase is called the Working Draft. And the Working Draft essentially means it's not a draft anymore. It's hardened. It's been reviewed enough times it's gone through. So here, let's even talk about the conference calls and face to faces that happens sort of as everybody's in GitHub and doing all this typing and all this commenting. We have conference calls there once a week. And there's usually about 10 items to be talked about on there. And those will be issues and proposals from GitHub that we talked about as a group. And so that can be, well, sometimes it's emergency items, like things get injected to the top of the list. And sometimes things get kicked to the next. So like, there's some really, you know, niche edges of the web that don't always get the attention of the group. And then there's also face to face. So four times a year, well, it was four times a year, I don't know what we're doing anymore, while we're doing virtual face to faces. But this is where we would meet face to face and talk about these things, people will present their proposals, they'll present items of their draft, and get consensus and feedback immediately. And so the goal there is like, crush issues, that close issues. And so the conference calls in the face to faces are all about resolution, now synchronous resolution, and then we go back to the asynchronous sort of time workflow where things happen and GitHub. Okay, - -72 -00:25:56,100 --> 00:26:05,910 -Wes Bos: what like, where did those happen? Is it like, in different like, you guys go to Hawaii or something on on big CSS box or something like that? Right. - -73 -00:26:09,540 --> 00:26:36,810 -Adam Argyle: I mean, I'm lucky I'm on Google's book, but yeah, they are around the world. The one that was in the middle of COVID was supposed to be in Ireland. I was supposed to go to Ireland. I wanted I still want to go to Ireland, Ireland. Can I go to you still? A little sad. But yeah, they are around the world. They try to move the time zones to be courteous and considerate of all the members who are international. And we, you know, sometimes it's a really big bummer for my timeline. But other times, it's great for my timezone. So - -74 -00:26:37,440 --> 00:26:58,650 -Wes Bos: that's cool. And is there any like, I remember once I was at like a j Cray conference, and we were in an elevator with like, half the core team, and someone's like, this should this should not be happening is if something goes this elevator were to plummet, like, half of the juice behind jQuery would be gone. So is there like some rules where you can't all eat the same food or - -75 -00:26:58,650 --> 00:27:08,190 -Adam Argyle: something like that? Nope. In fact, not only think about it, there was a time we were all on a roof. And yeah, that could have been catastrophic. It's just one gust of wind. Do we all fly? - -76 -00:27:08,790 --> 00:27:09,540 -Scott Tolinski: on a roof? - -77 -00:27:10,710 --> 00:27:12,330 -Wes Bos: It's kind of morbid. Apologize. - -78 -00:27:12,360 --> 00:27:14,460 -Scott Tolinski: Yeah, yeah, you're taking this? - -79 -00:27:15,420 --> 00:27:18,840 -Adam Argyle: What about this this show? If you guys were gone, this show would be a bummer. - -80 -00:27:22,080 --> 00:27:24,180 -Scott Tolinski: Let's keep this conversation going. Thank you. - -81 -00:27:24,450 --> 00:28:30,780 -Adam Argyle: All right, back to CSS. Well, here, here's a fun thing to think about. We've thought about these proposals. And then we've talked about an editor's draft, we have a working draft of the next stage as a candidate recommendation. And then the fourth thing is becomes a standard. And I want to just briefly talk about how those are kind of aligned two stages, like we have in JavaScript, I find the stages in JavaScript really meaningful and helpful. So this is things like stage zero, stage one, stage two, stage three, stage four, these are in Babel, where you're sort of articulating how risky of a cool feature Do you want to play with. And those can be kind of similar to what you see here in CSS as an editor's draft is like stage zero or stage one. I mean, it's pretty risky for you to go work and and assume that that CSS as it is in that spec is going to live in the standard. But you can go play with it anyway. So like post CSS has a lot of that stuff for you. Then there's stage two, which is more equivalent to a Working Draft. And a Working Draft essentially becomes a Working Draft when the working group decides it. So they say, Hey, we want to promote this. We think it's hard enough. We've gone through all these things. It also starts to get tests written. Did you guys know there's unit tests for the web? Now? - -82 -00:28:30,930 --> 00:28:33,930 -Wes Bos: Yeah, there is that that smiley thing is? The smiley - -83 -00:28:33,930 --> 00:28:36,330 -Adam Argyle: thing is called an acid test. - -84 -00:28:37,830 --> 00:28:48,270 -Wes Bos: You Yes. And like basically it just like it says, like, border, right? One PX green, and then it checks that that actually renders out like one PX green, right? - -85 -00:28:48,300 --> 00:29:45,600 -Adam Argyle: It's the same as visual regression testing. Yeah, where you're, you're comparing a golden screenshot with something else. And so the way that you do that in HTML, so they're called web platform tests, WP T's and you do you go write a little HTML file that makes an assertion, it draws something, and you have a control and an experiment. And they get rendered automatically through ci, CD and GitHub, I think they're all actions now. And you can know if you broke the web and in one of your features, and it's a good way to get what you want done is to go write those, like FOR FLEX gap, for example, I pushed for flex gap for so long, and everyone's like, go away. And then I was like, okay, you know, what I'm gonna do, I'm gonna, I'm gonna go write the web platform tests. So that read starts to show up on all those developers console. And you know what a developer hates tests. They don't want to see he'll read. And so I felt like it was like a subliminal way that I was trying to encourage a feature was to just go just inject some read another console and annoy them. I don't know if it worked, it seems, seems good. - -86 -00:29:46,710 --> 00:29:48,150 -Scott Tolinski: Amazing, very amazing. What - -87 -00:29:48,150 --> 00:29:49,800 -Wes Bos: what the acid test then - -88 -00:29:50,010 --> 00:30:21,480 -Adam Argyle: acid test was like, that was some early browser days where you would have it was like a cork exposure. You were intentionally building like this little DOM node thing that you knew was going to render differently. And all the different browsers or at least it wasn't supposed to. And then it became a joke that it did. It's somewhere along those lines, like it had good intentions at the beginning. And then just slowly sort of turned into because it was a face, right? So you'd be like, hey, browser under this face, and you'd go to like Netscape. And it just looked like this distorted Picasso. And you're like, Yeah, I don't think to CSS is rendering. Very good. - -89 -00:30:22,610 --> 00:30:28,230 -Wes Bos: That's funny. I never knew that. Wow, you're like a CSS historian. Yeah. Who would have thought? - -90 -00:30:29,490 --> 00:31:07,650 -Adam Argyle: Okay, wait. So we got web platform tests, which are totally like unit test. I think they're really cool too, because they're very bite size. And all the browser's run those against their own browser. So you can go see how Safari and Firefox and chromium are comparing in their web platform tests. This is very much internally, the way that the browser implementers know how well they're doing. So right. So there, we had those roles. We had like implementers, the ones building it in the browser, us who is just like the community. And then we have the community working group that sort of sits in the middle. And it's nice to know that those web platform tests ensure that this feature goes out and will be hardened for the future. I went and wrote a bunch for flex gap. And I found bugs in Firefox. And they were happy. They were like, thank you. - -91 -00:31:07,950 --> 00:31:09,120 -Unknown: Yeah, that's amazing. - -92 -00:31:09,120 --> 00:31:22,290 -Scott Tolinski: That's a, I don't know, the whole process is so fascinating for me, especially because I'm coming in, like I know, like, very high level of how things happen. And now I'm getting to see how the sausage is made a little bit. And I'm excited about it. - -93 -00:31:22,950 --> 00:31:24,210 -Adam Argyle: I'm glad this is interesting. - -94 -00:31:25,470 --> 00:31:33,570 -Wes Bos: So what about if something gets to stay age three, that's when the browser's start to implement it right. - -95 -00:31:34,260 --> 00:32:33,690 -Adam Argyle: Sometimes, too, sometimes editors drafts, so that color function we're following that's in an editor's draft state, I can send you a link to it. And there's an interested implementer. Now, it's only one interested implementer. Let's talk about what you need in order for something to graduate as a as a proposal as you need to implementers This is crucial to the life of the web. And this is why if we lost our third primary engine, it would be very detrimental, but kind of right now, we're in an interesting majority scenario. Does it make sense what I just said right there, because I'm like comparing engines, chromium WebKit, and Firefox, right. And so, you know, like chromium can't just go make standards, chromium can't deploy a new feature, release it in the browser, not behind a flag and call that anything of a standard that it has to be in to implement implemented in two browsers that both passed the tests for it to become the basic start of a standard, it really needs to be implemented at all of them before it gets to Super official stamp. But yeah, - -96 -00:32:34,560 --> 00:32:45,750 -Wes Bos: yeah, that's what I was gonna ask is like, what happens when Safari just says no, because like, we've seen that happen yesterday, or they they drag their heels? What happened? What happened yesterday? - -97 -00:32:45,810 --> 00:33:41,850 -Adam Argyle: Oh, no, you haven't seen this big one. Okay. So, and I'll explain it in the perspective of them, because they're coming from a meaningful place. But they literally just said, they're not going to build like 10 things. So anyway, the reality is, what they won't do is due to fingerprinting. So what they've identified is that by tracking something like your preferences on your phone, let's say it's a Data Saver preference, or it's a prefers reduced motion preference, or it's some sort of preference, right? This is a thing that you have identified and is unique kind of to you. And what they'll do is they'll take all of those, and they'll track them around the web, and they have these scripts in these different examples that show how from JavaScript or from wherever people, you know, even on a server, just sniffing your headers and what they can get from you, and how they can start to track you. And so Apple has said, here's a huge list of features that are suspect that we won't do until they figure out how to fix the security issues on them. Hmm. - -98 -00:33:43,230 --> 00:33:49,500 -Scott Tolinski: Yeah, so one of them was like, mini mini stuff that would, that's the one thing that caught my eye, but I didn't see the entire list. - -99 -00:33:49,530 --> 00:33:51,330 -Adam Argyle: Yeah, there's a, that's a bummer. But - -100 -00:33:51,360 --> 00:34:46,650 -Wes Bos: I remember, like, the first one of those that came out was, you cannot get the color of visited link in JavaScript. Because that's the issue. Like somebody put out this website where they just styled all visited links block, and all unvisited link, display none. And then they just came up with a list of websites you had been to. And then they pulled that list via JavaScript, they were able to just basically scrape your browser history on that. And that was a huge security issue. So I could see where they're coming from, like, then the browser ended up fixing that by just saying, like, you cannot use get computed style in JavaScript to get the color of a link, when it's based on its visited property, or I think I think you can only get the color property, not anything else about it. Yep, that's literally the exact set, same scenario type of thing that they're going for. And so it's amicable, I - -101 -00:34:46,650 --> 00:36:49,290 -Adam Argyle: think, I mean, it's, I think we want that we want privacy on the web. So the interesting thing is not like it's not like chromium has these features, and they're unsecure. I think it's just they want more security. So just kind of enjoy But yeah, so we went through the stages, we went through web platform tests, we went through the kind of ways that you can get to these features, whether they're behind a flag, we talked about intent to prototype, and then we can talk about intent to ship. So you'll see eye to s, there's even like a Twitter account, you can go follow. And that's where they say that's where a browser has to, okay, so, as a implementer, even to do an initial implementation, you have to create this intent to prototype. This is a public facing declaration where you say, here's the spec, here's an explainer of what I'm going to do. And you kind of package up this intent to prototype and then you, you share it to the world. And so this is all the different working groups and the different w three teams can see that you, as a browser are officially prototyping this spec that's in draft mode, or it's in this mode. And then after your draft, after your intent to prototype has gotten really well. And maybe it's in another browser, you can then file for an intent to ship. So this is again, like you filing with the the government that you want to become a bigger, better business or whatever. And you have to show proof. And if that goes well, you're intend to ship as well. And it lands in a major browser. So flex gap had its intent to ship like last month, it's in Chrome stable 85, I think. And it's all done, it's pretty much good to go. So that one had to go through the same thing and tend to prototype prototyped behind a flag, then had an attempt to ship at which point everything stabilized all the web platform tests were passing, this is very sound should sound really similar to like, when you make a PR to a repo, are your unit test passing or your integration test passing? Have you filed the SLA, right? There's like a process and you have to follow it because it is meaningful. And that's where the CSS has like the same thing. So you'll make all these same declarations and things move through. And now I'm just rambling. So, - -102 -00:36:50,249 --> 00:37:04,590 -Scott Tolinski: no, I think that it, no, it's very interesting. Especially because Western I just say, Hey, we want to flex gap, gimme flex gap. And that's pretty much all we do. So yeah, just come on, just just push the button and get get us the the flex gap, please. - -103 -00:37:05,360 --> 00:37:22,230 -Adam Argyle: I'm happy to receive all those requests, who by the way, in anyone, listeners, listeners, follow me if anything, yeah, just holler at me, I'll do the formalizing of the proposal or whatever. And I'll let you know, you know, very nicely whether or not it's going to be something I know. Yeah, I'd love to help you guys out. So ping me. - -104 -00:37:23,580 --> 00:37:57,210 -Wes Bos: Yeah, I think that that's that's what like you're, you're in Developer Relations. Is that right? Yeah. Yeah, that's, that's what a developer is and should should do, right? Like, you should be able to like to talk to somebody who can actually make a difference in this rather than like, I'm, I'm probably not going to go through all of these steps or something like that. But I will voice to people like, hey, would be really cool. If we could style specific rows, or have have the same have flex gap on it or standardized gap, things like that. Did it end up being just the gap property? Or is it flex dash gap? - -105 -00:37:57,330 --> 00:39:28,830 -Adam Argyle: It's just a gap. Yeah. So depending on your display type? Yeah, you may get gap or may not. I want to share to real quickly a success story to sort of encourage folks who think that it sounds long and grueling, because it, it is. So I mean, that's not like it's not the reality, it is a big process. So it is kind of daunting, but there are like superpower moments where things can move through really quick. And so I don't know if you guys follow h. j. Chen on Twitter, just phenomenal individual to follow at CSS. And they went on to the GitHub issues and proposed, hey, you know, there's this data saver mode that I really like to browse the internet with. JavaScript has access to it in the headers, and you know, through client hints and these other things, how come I can't do that. And CSS can CSS has a way to know what my preferences about datas data preferences and maybe load SVG instead of a big, you know, JPEG or maybe a PNG instead of a JPEG, like how many megabytes, I could probably save a lot of megabytes in my CSS. If I had a media query that let me know. And this came way after prefers reduce motion and prefers, you know, color scheme and some of these other like OSL preferences. And so it was almost like everyone went and looked at the proposal, like, oh, duh, why don't why don't we have this, this seems like an easy shoo in. And all of a sudden, this thing went from proposal into a draft into the candidate recommendation. And like this really fast time, so just like joined its friends, and has this really fast path. So it can happen, things get missed, you know, we need your input, it can be really, really valuable. - -106 -00:39:29,100 --> 00:39:45,030 -Scott Tolinski: Yeah. It's amazing to hear it. And it's probably a testament to just how the system how well the system works, if you're able to, you know, sort of rush the system in a way that is not rushed, and it's secure and whatever. That just says that the system itself is working right? - -107 -00:39:45,650 --> 00:39:50,820 -Adam Argyle: I think so. Yep. And that particular one showed up with the rest with the privacy issues on safari, but - -108 -00:39:51,570 --> 00:39:53,250 -Scott Tolinski: yeah. Oh, interesting. - -109 -00:39:53,690 --> 00:40:02,850 -Wes Bos: Is there any example of something that maybe went too fast or didn't get thought over and you saw Oh, that that's a mistake in CSS, and now we have to live with it. - -110 -00:40:02,850 --> 00:40:04,230 -Adam Argyle: Oh, yeah, they - -111 -00:40:04,230 --> 00:40:06,690 -Wes Bos: have a document for that. Really? - -112 -00:40:06,710 --> 00:40:12,840 -Adam Argyle: Let me see if I can find it. Yeah, I tweeted it at one point, because it's really fun to go read every once in a while, but it's like CSS mistakes. - -113 -00:40:12,900 --> 00:40:13,470 -Unknown: Yeah. Yeah. You - -114 -00:40:13,470 --> 00:40:21,810 -Adam Argyle: know how that really sweet JavaScript was the node cat did a video on 10 reasons or 10 things I'd change about node. Have you seen that video? - -115 -00:40:21,900 --> 00:40:23,690 -Wes Bos: Yeah. Ryan Dahl, Ryan DAWs. - -116 -00:40:23,690 --> 00:40:29,730 -Adam Argyle: It's a great video, right. dcss had a blog post just like that before his they did a first CSS to the person. You heard it. - -117 -00:40:31,410 --> 00:40:31,940 -Wes Bos: on there. - -118 -00:40:32,480 --> 00:41:24,330 -Adam Argyle: Yeah. Okay. So it's a wiki dot CSS wg.org slash ideas slash mistakes. I retweet this right now. I'll just shoot that back up to the timeline. And yeah, there's a lot of really good stuff in there. It's very honest, and there's still backtracking some of it. So some of it can't be backtracked. But some of it can like, let's think about color functional notation. Like we have new syntax for HSL and hsla. Like why? Well, it's because we made a lot of mistakes with hsla. There's too many commas. And it's kind of annoying that you can't put percentage in there. You have to use like a decimal value or whatever. There were like these weird edge cases. And they were like, so the CSS Working Group has a couple of wars right now. One of them is a war on commas. And I like wars on things like semicolons, and commas. So yeah, they want to they want to get rid of them. They're like less commas. - -119 -00:41:24,360 --> 00:41:31,860 -Wes Bos: There's I call it that other thing. Box sizing should be border box by default. That's a simple one. Yeah, bang. Important. But - -120 -00:41:31,860 --> 00:41:37,080 -Scott Tolinski: wouldn't that break the entire? Like, wouldn't that break a lot of CSS? Like, yeah, - -121 -00:41:37,110 --> 00:41:56,070 -Wes Bos: yeah, that will never be able to be changed. But other things like current color should be current dash color, because it's, I think that's like the only thing and yeah, mole case. That's funny. Yeah. Important. Should important has a bang in front of it, which to most developers reads as not important. Not important. Yeah. - -122 -00:41:56,070 --> 00:41:59,280 -Adam Argyle: I love It's like a charm to CSS at this point, though, right? - -123 -00:41:59,850 --> 00:42:00,980 -Scott Tolinski: Yeah, right. Yeah. - -124 -00:42:01,350 --> 00:42:06,210 -Wes Bos: Like sometimes pseudo selectors have to cop to colons. They have one yeah, - -125 -00:42:06,210 --> 00:42:16,350 -Adam Argyle: this little sentence between a pseudo class and a pseudo element. It used it kind of got beginning and they backtracked and said that a pseudo class is one and a pseudo element is two I think, - -126 -00:42:16,350 --> 00:42:18,090 -Wes Bos: I don't think I've ever used to - -127 -00:42:18,440 --> 00:42:25,670 -Adam Argyle: so now that that's just visual delineation. I think you can't screwed up. The selectors were always land but yeah, - -128 -00:42:25,730 --> 00:42:26,340 -Wes Bos: okay. - -129 -00:42:26,690 --> 00:42:38,850 -Scott Tolinski: Yeah, it was funny for a while. It was like, Okay, well, the pseudo elements exist, but Oh, yeah, nobody, there's support for them doesn't work on, you know, older versions of IE. So just use the one anyways. And it was almost like a meaningless change. - -130 -00:42:39,930 --> 00:42:43,290 -Adam Argyle: Yeah, I could definitely see that. What are some other good snippets in their West? - -131 -00:42:43,320 --> 00:42:51,170 -Wes Bos: This is cool, man. That there's a whole there's a whole show in here. I think Skyler can do a hasty on little CSS mistakes. These are really interesting. - -132 -00:42:51,359 --> 00:42:52,350 -Adam Argyle: That's a good idea. - -133 -00:42:52,460 --> 00:42:54,840 -Wes Bos: z, z index should be z order. - -134 -00:42:54,860 --> 00:42:57,780 -Adam Argyle: So true. You need your son to do the Add transition. - -135 -00:42:58,050 --> 00:43:00,210 -Scott Tolinski: Yeah, Landon. You wanna say hi. Hello. - -136 -00:43:00,420 --> 00:43:02,520 -You've never been on an episode Say hello. - -137 -00:43:03,750 --> 00:43:07,380 -Adam Argyle: Now, that's what my son does, too. He clams up. He freezes. He's like, - -138 -00:43:10,320 --> 00:43:15,170 -Scott Tolinski: your favorite but? Nothing? No. Okay. - -139 -00:43:15,960 --> 00:43:17,630 -Adam Argyle: Still a good transition? Yeah. - -140 -00:43:18,420 --> 00:43:21,860 -Scott Tolinski: It was a good transition taken in daddy's footsteps here. - -141 -00:43:22,650 --> 00:43:23,900 -Adam Argyle: treating me Oh, no, no. - -142 -00:43:25,530 --> 00:44:15,420 -Wes Bos: Yeah. Freshbooks feel the magic of cloud accounting? Oh, yeah. So fresh books is a cloud accounting for your small business. If you are a freelancer, or you have a couple employees, or you just doing a couple of side jobs, or moonlighting and do I need to keep track of a couple expenses or tons of expenses. freshbooks is what you need. So I use it myself to do all of my invoicing, all of my expenses, all of my tax reports. It's awesome, because I know that it's all in fresh books. And at the end of the year, I can just export all this stuff, it sends up late payment reminders for you. So you don't have to be the big the bad guy sending emails be like, Hey, can I get paid? It's awesome. Check it out. freshbooks.com for slash syntax and use syntax in the How did you hear about a section and that'll get you a 30 day unrestricted free trial. Thanks so much to fresh books for sponsoring sick - -143 -00:44:16,050 --> 00:44:16,710 -Scott Tolinski: sick - -144 -00:44:19,140 --> 00:44:26,910 -Adam Argyle: sick Oh, there's like the only thing we didn't get to is roles. And I'm not talking about the roles the eat talking about the roles you beat. - -145 -00:44:27,330 --> 00:44:28,080 -Scott Tolinski: Oh, yeah. - -146 -00:44:28,710 --> 00:45:19,590 -Adam Argyle: It's so yeah, we have spec author. So these are folks that they're nominated. And they so to become a spec author, you need to be officially labeled as one so the whole working group you know, kind of knights you with a sword and they say yes, you shall edit to spec. So that that was just my dream I had when it happened. That's cool, though. Give me a community member. So in the working group, you can be a specialist or a generalist, which is pretty normal and some of the specialists it's really nice to have them in the group right? They are specializing in print. And they're making sure that the web and everything that we add to it can always be printed onto paper, which I think is a fantastic power of the web. I go. So side note does revisit people and they print out web pages and put them in drawers now. Last time I did that was when I printed MapQuest, Adam. - -147 -00:45:20,400 --> 00:45:21,930 -Scott Tolinski: Yes, yes, MapQuest. - -148 -00:45:22,860 --> 00:46:31,080 -Adam Argyle: decad did you have like community members who specialized in color internationalization, box models, accessibility JavaScript API is like there's people in the CSS Working Group making sure that the things that JavaScript is getting, or the things CSS is getting, have a jsapi. So we can assess it imperatively renderer, specialist layout specialist, and you have implementers. And these are the folks that go write the code in the browser. And that's sort of it. So the spec, author, community member implementers, and those that trifecta, and the way that they work together, happens asynchronously in GitHub, and then works synchronously in the calls until we roll this thing over and over and over until it turns into a pearl. And we get our feature at the end of thing. So I think that recaps everything pretty well, we went through the kind of mock stages. So CSS doesn't have official stages. But you can simulate them, if you think about editors, drafts and working drafts and kind of being in along that same line. And then just like Babel can enable, you know, you to use latest syntax, but output something usable in older browsers, you can do that with post CSS, preset E and V. So I wanted to pitch that really quick as a way to use these features today. And it's really slick. And I love it. And I'm a big fan. - -149 -00:46:31,440 --> 00:46:46,470 -Wes Bos: That's great. I got a question about the implementers. So let's say we want to implement border radius, or a new box shadow or CSS color functions like, like, What language is that written? And that's like, dependent on the browser. Is that right? - -150 -00:46:46,770 --> 00:47:36,870 -Adam Argyle: That's dependent on browser and chromium. It is. I think it's C sharp. Oh, c++. Okay. See, Oh, I should have known that it's not C sharp. I'm not a dotnet. Okay. which honestly, isn't that crazy, kind of fun little side note, I am an implementer. Also, I actually didn't realize it until I was preparing for this episode, that I'm a member and an implementer. And I'm not sure what the rules are around them. And the thing I implemented was I implemented the prefers reduced data and media query, I had help. Obviously, it's not like I'm a chromium engineer. But I got chromium building on my machines. I edited source code, and I made a CL that got merged into chromium. I have coated chromium, and it's behind flag, you can so cool, play around with the prefers reduce data media query. And yeah, I'm kind of hungry for more like what else can I - -151 -00:47:38,040 --> 00:47:38,610 -Unknown: cool? - -152 -00:47:39,900 --> 00:47:48,480 -Wes Bos: Do you ever tell people that are just like your, like regular friends that aren't developers? Like they're like using an app on their phone? But, you know, I wrote part of that app? - -153 -00:47:50,640 --> 00:47:59,700 -Adam Argyle: I do. It's hard to tell them what to do sometimes, right? It's like, Hey, I got code in chromium. And they're like, what's chromium? Like? Oh, man, who cares? - -154 -00:48:01,110 --> 00:48:14,070 -Scott Tolinski: Yeah, I know. It's funny. It's weird, cuz I always say like, I teach web development, like, and they're like, oh, what's web development back? Okay. Well, you know, like, Netflix. It's kind of like Netflix. But computer programming. That's what I do. Okay. - -155 -00:48:14,400 --> 00:48:18,540 -Adam Argyle: Yes. deverill is funny to death row. What is dev REL - -156 -00:48:18,570 --> 00:48:19,980 -Scott Tolinski: dev dev REL? Yeah. - -157 -00:48:20,070 --> 00:48:23,130 -Adam Argyle: I talked to the developers. I'm a people person. Yeah. - -158 -00:48:24,690 --> 00:48:33,630 -Scott Tolinski: I don't know if Wes will get that. That reference. References. Yeah, he doesn't like Ramiz office space. Space. Oh, I've - -159 -00:48:33,630 --> 00:48:39,240 -Wes Bos: seen that. 100 times. So yeah. People. - -160 -00:48:39,629 --> 00:48:42,060 -Adam Argyle: Yeah. What would you say you do here at? - -161 -00:48:44,100 --> 00:48:57,810 -Wes Bos: work with the people? Man, I forgot that. That is great. I also want to ask about Houdini. This is, yeah, I'm taking advantage of you here. What's the status on that? And like, are we gonna get it? Is it thank you? - -162 -00:48:59,070 --> 00:49:27,810 -Adam Argyle: Yes, yes. Yes. And yes. And I had it in here as as like a side note. Because Yeah, it's part of the CSS Working Group, face to face happens all the time about Houdini where they'll be like a little side SWAT team that goes and talks about Houdini. And yeah, just to recap on a previous episode, you said if anyone wanted to really like establish a moment in their career to stab it and grab the reins on something, who DD is still a very good thing to do that so that was a hot tip. That I'm just gonna retweet for on your podcast here. Can you verbally reach out? - -163 -00:49:27,899 --> 00:49:29,790 -Scott Tolinski: Yeah, yeah. - -164 -00:49:30,030 --> 00:50:59,430 -Adam Argyle: So Houdini Okay, so where's Houdini? You can go to the website is Houdini ready yet. And there's some good news is that the paint API, for example, has really great support and new Safari is leaning into Houdini, which means Oh, we are progressing forward. every browser is interested every browser has an implementer things are active. Now chromium has more to play with. We have the animation worklet and the paint worklet can both be played with it. I think the layout worklet can also be played with but it is. Here's the interesting part about the layout worklet. We did two massive refactorings in the chromium code base of about layout, because if you remember, as another history moment, I guess is chromium is a fork of WebKit. So it's almost like Chrome is a child of safaris browser. So that comes with, you know, the apple doesn't fall far from the tree. And so, as we've grown, we have deviated more and more, and parts of that old tree became hard for us to manage. And so we did these big huge refactoring on layout specifically, which is like the touchies code and all the code base. And with that refactor, it was basically with the intent of maximum empowerment of Houdini. And so that layout was not only performance boosting for international languages, it was an enablement for the API. So Houdini needs to give y'all the true power to really grab the reins and make like a masonry layout that's animated off the main thread type of stuff like so. He's still alive, kicking butt. - -165 -00:50:59,460 --> 00:51:11,220 -Scott Tolinski: Well, this Houdini website is really kind of blowing my mind just how many things have already shipped with for you need that I didn't realize any of it has shipped. So this is this is this is very exciting. For me specifically, - -166 -00:51:11,280 --> 00:51:23,280 -Wes Bos: I didn't realize there was so many parts to Houdini, there's the layout API, the pain API, the parser API, the property value API, the animation worklet, the typed om not sure what that dilemmas sick. - -167 -00:51:23,280 --> 00:53:03,900 -Adam Argyle: Let's make sure we cover that before we're done. It's so good. All right, what does it talk to him? Okay, so when you work with CSS and JavaScript, and you're like, Okay, JavaScript, go transform that by 50%. The way that you tell that node to do that, and is with a string, and it is a bummer, you're sort of just like building this string and assigning it as a style. And then if you want to get that style back, it comes back as a string. And this is annoying, because you're exploding and joining arrays over and over again, or, you know, using template literals and trying to get the job done. But ultimately, what's really hard is to get a unitless value off of an element like what is your transform, what is your margin, right? And with the type of M, you can ask for those values, and you get it back in a rich object that's split out for you. It says, here's the unit type, and here's the value. And so it can be this really, really powerful way for you to use JavaScript to interact with elements because you're getting an API that's not string based. It's object based, oh, title. And that's it. That's important. So it's a typed object model, what they're doing is they're typing all the values. So you're not just getting 15 pX as a string, you're getting 15 as a number, and PX is a string. And that type to them comes with the ability to convert it comes with the ability to manipulate values, just like you do in CSS and have it do the conversion, you can calc. So it's a it's a typed interface into the CSS object model. It's really handy. And that unlocks Houdini to be passed a rich object of values so that it can do a calculation and return it. So now Houdini isn't, you know, string defying and unstring and fine. But in its worklet it's doing less work, because you're getting rave reviews. Man - -168 -00:53:03,900 --> 00:53:14,220 -Scott Tolinski: we got to do with you and I both have to sit down and do some serious homework on Houdini and come back and do an all timer explainer episode. Because this stuff is so deep. And I'm so into it. - -169 -00:53:14,280 --> 00:53:16,230 -Wes Bos: So cool. It's cool. - -170 -00:53:16,230 --> 00:53:34,290 -Adam Argyle: So just a couple of warnings is you know, Dev Tools. So you'll animate something with the the animation worklet. And then you go to inspect your animation. And it's visible. And it's because well, how is dev Dev Tools isn't ready to show you the interaction screen. So there are some rough edges, but it's fun to be on the edge. Right. You - -171 -00:53:34,290 --> 00:53:36,600 -Scott Tolinski: get to Yeah, you know, yeah. - -172 -00:53:36,600 --> 00:53:38,430 -Wes Bos: That's where I live my life. - -173 -00:53:38,520 --> 00:53:45,840 -Scott Tolinski: Yeah. That's good. into the edge and back. Kita Yeah, yeah. Oh, man. Well, - -174 -00:53:45,840 --> 00:53:57,960 -Wes Bos: that is there anything else that we didn't cover today? There's like so much information here. It's amazing. There's so much stuff I didn't know. And I thought I had a pretty good grasp on how this stuff happens. But clearly, it didn't. - -175 -00:53:58,530 --> 00:54:34,020 -Adam Argyle: There's definitely shows on Well, honestly, a web platform tests show would be super sick. That is one of the best ways for you to contribute back to the platform. If you love this platform, and you're like, Oh, I wonder how I can contribute or whatever. And I'm sure that's not how you sound. That's just how I make myself sound in my brain. A web platform test is a really good way to do it. And just making one is really valuable. And so I don't know, that could be a cool show. But there's definitely shows on nested moments that happen in the Working Draft here or even just like following a certain spec and seeing where it's at and looking at its history, but I don't know maybe that stuff's not as fun as your other topics, huh? - -176 -00:54:36,270 --> 00:54:45,600 -Wes Bos: Always fun. Always fun. All right. Well, let's Let's end it there. And we'll probably have you back at some point to talk about some more stuff because there's clearly a lot love here. - -177 -00:54:45,690 --> 00:54:46,710 -Scott Tolinski: Yeah, that'd be sick. - -178 -00:54:46,830 --> 00:54:55,410 -Wes Bos: Let's move into some sick pics. Now. I know that you came prepared with the sick pick. This is like the first time we didn't have to spring it on all of our guests. Yeah, normally. - -179 -00:54:55,470 --> 00:54:58,800 -Scott Tolinski: What do you normally we're just like, by the way, you have to come up with something right now. - -180 -00:55:00,000 --> 00:55:47,100 -Adam Argyle: on my desk what's on my desk? Well, I got this cool arty boy here. This is a sick pic. Oh yeah. Oh, boy in the palm of your hand. That was not my sick pic but that would be my friend check back I would take it my sick pic is a walk. And I know that Wes is a barbecue or griller and man my walk I seriously I'll go in the back I got this hot, open flame. I feel like this super rad chef that's in this heat. And in five minutes, I get to sizzle these raw vegetables with a tablespoon of oil and a tablespoon of sauce. And it's the bomb just seriously the most amazing vegetables repeatedly ever. And it just blows me my wife's mind will eat a pile the biggest bowl of vegetables you'll ever see in your life. And it's just because that walk it's magic. So that's my second pick. I'm - -181 -00:55:47,100 --> 00:55:58,200 -Scott Tolinski: into this I we recently retired our walk and then just bought, you know basic, basic, basic walk from Costco, and I need new I need some better walk life. You know, - -182 -00:55:58,230 --> 00:56:04,770 -Adam Argyle: oh man, I seasoned mine. And it is gorgeous. It's this black iron. Oh, it's so cool. - -183 -00:56:04,830 --> 00:56:20,370 -Wes Bos: He has that's like the proper one or you properly season. It's like a cast iron pan where I'm like, Yeah, I've been thinking about getting one because like, I've got the Big Green Egg. Yeah, and that thing gets hot as hell. You can get it up to 800 900 degrees. And I've seen videos of people just - -184 -00:56:25,110 --> 00:56:27,000 -Adam Argyle: stressful, but it's also really fun. Yeah, - -185 -00:56:27,240 --> 00:56:35,340 -Wes Bos: yeah, there's a Tasha for the Big Green Egg that you can put it on. And it just gives you this little ring and then you can kind of go to test. Sick dude. Do it. Yeah, - -186 -00:56:35,400 --> 00:56:37,590 -Scott Tolinski: yeah. Ready to walk out of that? Oh, good. - -187 -00:56:37,710 --> 00:56:43,500 -Adam Argyle: Yeah, the intensity is part of why it's fun. It's like this thrilling. So you know, I don't know. Love it. - -188 -00:56:43,500 --> 00:56:46,290 -Scott Tolinski: So So what is your walk? Well, what is the walk? - -189 -00:56:46,680 --> 00:56:53,370 -Adam Argyle: Oh, right. You guys need a link. I could give you a link to my Amazon while it was like a $35 walk. And it was just all about how I said I think - -190 -00:56:53,430 --> 00:56:56,100 -Scott Tolinski: yeah, that's what I got to get that got to get that - -191 -00:56:56,130 --> 00:57:25,290 -Adam Argyle: and I did I did eventually get the outdoor propane scenario. So like I was cooking inside. So here's my tip is don't season your walk indoors, it stinks. And it's really smoky. And so I bought a propane propane burner for outside. And that way I can really crank the heat up. And that's super nice. So and seasoning it that way to only took like 45 minutes or so or when I season to my first one inside. It took a long time. So yeah, let me get a link to that. Just put in the show notes. - -192 -00:57:25,800 --> 00:57:35,070 -Wes Bos: The propane burners key too, because you can you can do deep frying outside. Sorry about deep frying indoors always scares me. Yeah, - -193 -00:57:35,250 --> 00:57:39,330 -Adam Argyle: we've got the airfryer we've been we've been air frying inside, that was almost my other sick pet. - -194 -00:57:40,170 --> 00:58:26,970 -Wes Bos: Haha, there you let it sneak out. That's great. I'm going to sick pick something that I think all devs that are hackers should have. And that is a set of security bits. So if you like or like me, and you like taking taking stuff apart, there's nothing worse than running into a screw or bolt on something that you can't undo because there's a security bit in it. And I recently just bought 100 piece set of security bits just to have on hand so that when you run into not even just like the the standard torques and Pentalobe that you find on Apple stuff, but there's some really weird ones that that come on. Like there's like torcs bits that have a circle in them. If you want to be able to open that. - -195 -00:58:26,970 --> 00:58:28,950 -Adam Argyle: Oh, yeah, those are annoying. Yeah. - -196 -00:58:29,370 --> 00:58:48,510 -Wes Bos: And it's like, I don't know, 1015 bucks for like 100 set of security bits. Like this is one of those tools that you want to just like buy and have on hand. Because when you're trying to fix something, you don't have the two days to wait for it to come deliver it. So doesn't matter which one you get, but just some sort of nice security bits that I'll link up in the show notes that I got - -197 -00:58:49,020 --> 00:58:50,700 -Scott Tolinski: nice security bits cool. - -198 -00:58:50,700 --> 00:58:51,870 -Wes Bos: What am I use got, - -199 -00:58:52,320 --> 00:59:42,450 -Scott Tolinski: I am going to take pics kind of funny. I do a lot of you know stretching and stuff. I'm big in big stretching person. And I've always like done a lot of like lunge stretches my knees on the ground. And in fact, actually I lower my standing desk down to the point where I can like kneel or do like a lunge while I'm coding as low as it goes. So I can do some stretching while I code and my knees have really taken a beating. So I ordered one of these giant thick foam pads that you see it like the PTS office. It's fantastic. It's this giant, thick piece of foam that will save your knees if you're doing any sort of mobility stretching or anything like that. So it's turtles coming off the board pic but it's something that I am getting a lot of use out of and it's saving my butt so I'm really into this balance in a balance pad. I guess they're calling it even though it's like a foam pad. - -200 -00:59:42,900 --> 00:59:46,290 -Adam Argyle: rad I got bad knees so I'm down with that tip was good. - -201 -00:59:47,010 --> 00:59:48,030 -Scott Tolinski: Yeah, balance pad. - -202 -00:59:48,030 --> 00:59:56,640 -Wes Bos: That's cool. Hey, it totally unrelated but there's a Roque, a guy that works for rogue that listens to the podcast and - -203 -00:59:56,670 --> 00:59:57,480 -Scott Tolinski: no way. - -204 -00:59:57,630 --> 01:00:14,190 -Wes Bos: Yeah, he he DM me on Instagram. He was like during the Coronavirus. He was like just like working in the warehouse because like everybody wanted equipment. So they're like all hands on deck. Working in the warehouse was all Jack's everything I thought that was so cool. - -205 -01:00:14,219 --> 01:00:32,700 -Scott Tolinski: Well shout out shout out to rogue fitness. Unfortunately, I buy a lot of rec fitness things which is like their direct competitor. But they are local, local to Denver and they have a warehouse so I get like super warehouse deals by going to be able to pick it up, you know, drive by and oh, yeah, nothing personal broke. I mean, I'm in I'm into your products. - -206 -01:00:34,170 --> 01:00:43,890 -Wes Bos: Cool. Um, shameless plugs. I'm gonna shamelessly plug all my courses. Wes Bos comm forward slash courses, grab yourself, of course, Use coupon code syntax for 10 bucks off, - -207 -01:00:43,980 --> 01:01:12,630 -Scott Tolinski: hey, I'm gonna shamelessly plug all of my courses. I actually have a course on CSS design systems using CSS variables. That's coming out today, as we're recording now. Yeah, it's really, really super cool. We talk about writing absolutely minimal CSS to create some really amazing full themes with like, just the The goal of the course is to write as little CSS as possible, while having like as full featured of a system as you can. So it's very, very cool. Check it out, level up. tutorials.com. - -208 -01:01:13,290 --> 01:01:23,340 -Adam Argyle: And you were speaking my language there, right as little as possible. That's my whole mantra. I was like, I love code. But I love you so much. I want to not write as much of you I want to write as little as possible. Yeah, - -209 -01:01:23,400 --> 01:01:46,320 -Scott Tolinski: yeah, I know. We, we like rewrote the and like, we had levelup tutorials that's existed for a while right with its current react setup. And we actually just stripped the CSS entirely while keeping all of the JavaScript in layouts and just rewrote the CSS from scratch the last year and it was like the best exercise and like really pruning things up and figuring out what can be systematized and all that stuff. - -210 -01:01:46,470 --> 01:02:05,790 -Adam Argyle: I love refactoring. I'm just gonna say that right now. It's like, sometimes people code with this intent to never refactor. They're like, Nah, I will code once now. And it will live until the end of time. I'm like, that's hard to do. I just assumed my code is gonna break somewhere and someone write as little as possible. That's how I prevent bugs. I try to just not write code. - -211 -01:02:06,090 --> 01:02:07,560 -Scott Tolinski: Yeah, right. Yeah, exactly. - -212 -01:02:08,910 --> 01:02:39,750 -Adam Argyle: Those a great tip. My shameless plug is I have a podcast also with Yuna. Yes. It's called the CSS podcast. And we go over in about 15 minutes or less. Sometimes it goes over pretty intense CSS topics. And we talk about them like they're kind of computer science, because it is computer science. And I would put us into the base CS podcast, but we are about CSS, and it's computer science and abilities, as opposed to JavaScript and crafts and stuff. So check it out the CSS podcasts, do it. - -213 -01:02:40,170 --> 01:02:53,010 -Wes Bos: I like it. Wow. If you Google the CSS podcast, it gives you a list of podcasts that have CSS in them. And then Yours is the first one. So it is that's cool. Um, yeah. Good job. - -214 -01:02:53,010 --> 01:02:54,000 -All right. - -215 -01:02:54,000 --> 01:02:56,970 -I think that's it for today. Thank you so much for coming on. That - -216 -01:02:56,970 --> 01:03:02,100 -Scott Tolinski: was excellent. And also thank you for clearing up that your last name is Argyle, and that article, - -217 -01:03:02,129 --> 01:03:04,710 -Wes Bos: I'm still gonna call you are gonna pronounce things right. - -218 -01:03:04,730 --> 01:03:09,870 -Adam Argyle: Our goal is what it's like, Hey, is Mr. or Mrs. Our goal there? Sorry. There's no one here by that name. I'll see you later. Yep. - -219 -01:03:11,610 --> 01:03:16,470 -Wes Bos: Awesome. Cool. Well, thanks again and we will catch you on Monday. Please. - -220 -01:03:19,080 --> 01:03:28,860 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax275.srt b/transcripts/Syntax275.srt deleted file mode 100644 index da8911f9a..000000000 --- a/transcripts/Syntax275.srt +++ /dev/null @@ -1,108 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,160 --> 00:00:21,660 -open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing soft skill web development. Not hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Taylor. - -4 -00:00:23,610 --> 00:00:24,480 -Totally at ski. - -5 -00:00:25,950 --> 00:00:52,890 -Scott Tolinski: Oh, welcome to syntax and this Monday tasty treat. We're gonna be talking about Gatsby. And I'm excited. I love Gatsby. In fact, I had one of the first courses on Gatsby in the entire YouTube. So I've been on the Gatsby train for a long time. A big, big, big fan. I know Wes is a huge fan to just built his site in Gatsby. My name is Scott kolinsky. I'm a developer from Denver, Colorado, and with me, as always, is the Wes Bos. - -6 -00:00:52,950 --> 00:00:55,229 -Wes Bos: Hey, everybody. Hey, Wes. - -7 -00:00:55,440 --> 00:01:54,750 -Scott Tolinski: This episode is sponsored by one of our longtime sponsors over here. And as Log Rocket now I'm talking about Log rocket.com. Now, you're gonna want to check out Log rocket.com forward slash syntax, get 14 days for free of Log Rocket. Now, what is Log Rocket? Well, it's the service that allows you to see your bugs and errors happening, as they happened in a video session or replay. It's very, very cool. It's one of those services that you would have wished you would have had in any project you are doing because anytime anything goes wrong, you often ask, maybe you look in your bug tracker to see maybe what browser or what what some of the code was that hit it. But this actually gives you a video of the event happening. Imagine being a detective and having a video of the murder take place. That is really what this is doing. So head over to Log rocket.com forward slash syntax and get 14 days for free and check it out. Very, very cool service. So Wes, gets me tips. - -8 -00:01:55,050 --> 00:03:48,000 -Wes Bos: So these are just going to be things that after building a couple Gatsby websites or little tips as the title set. So the first one we have here is to make a reuse reusable SEO component that sets all of your defaults. So what I found myself doing was on each of my pages, I would use react helmet to set all the head metadata and you in there, you'd have your Open Graph, meta tags, Twitter specific meta tags, you'd have SEO meta tags, and like I find myself using the same strings and images, maybe two or three times Oh, for it. And then I also found for pages that I didn't specifically have anything special for that other than the title of the page, then I would find myself in like, I'm not sure what the setup. So what I do is create an SEO component that in turn uses react helmet, and then set all of your defaults in there. So your default title, React helmet will also allow you this design I didn't know correct helmet will allow you to set up a title template. So if all of your pages are like about dash Wes Bos uses dash Wes Bos, like everything is dash, Wes Bos, Rackham, it will allow you to set a template for that. So you only have to pass in about and uses or the name of the blog post or the name of the page. And then it will render that out for you. So set a whole bunch of defaults, and pass in titles and images and thumbnails and stuff into your SEO component. And then finally, allow yourself to pass just additional meta tags that are spread into the SEO components. So meaning that you can also pass additional tags like you would to react helmet and then those will just be put later on in your SEO component. And those will overwrite anything that you want to overwrite. - -9 -00:03:48,660 --> 00:05:00,990 -Scott Tolinski: Yeah, I think that's important thing is that that the React element will overwrite. It's not like you can only have one of them. So my general strategy personally for Rick toman is to have one at the sort of app level that is just like a blanket covers every page, right? And then as we go, I make them more specific based on different trees of the application, whether or not it's like this layout, or this layout or whatever. But as these trees go down, you can make your react helmet as specific as you want. Fantastic. That's a, like a low key, super duper, duper constantly useful, like every project kind of component that is react helmet. So next one is going to be when in doubt, stop the build and restart too many times. I think people had issues where maybe a plugins not being recognized, or maybe they goof something up in the config. Either that or Gatsby is just behaving oddly, not what they're expecting to have happen. Now, because Gatsby sometimes needs a restart here where you have to cold stop the build so that the node processes actually rerun. Now that's what you got to do. So for me, when in doubt, to stop the build and restart and it looks like you have a little additional tier two. - -10 -00:05:01,320 --> 00:06:41,610 -Wes Bos: Yeah, just sometimes Gatsby gets into a weird space. And you just gotta start over cash involved. And the reason why Gatsby build is so insidious because there's a massive cache. And sometimes it gets a little bit weird. So you got to just clean it out. So just run Gatsby clean. I use sometimes cause far too just to nuke your node modules folder, delete your package, lock file, re NPM, install and restart. And even though that sometimes takes a couple minutes that will often fix some of these weird issues that comes along. Next one we have here is to use ES modules everywhere. So one like weird thing about Gatsby is that Gatsby node and Gatsby, what is it? It's Gatsby node, Gatsby config, and Gatsby SSR. Those are all done in common j s, because they're, they're node files, right. And then it's annoying if you want to share those with Gatsby browser or anything like that. And also, like you're writing ES modules in react, but then you have to write common j s in the config files. And what I've been doing for almost a year now is using ESM. And ESM will allow you to mix and match common j s and s modules. So I've just been writing as modules everywhere in every file and sharing them amongst the files. And it's great. There's even look at my Wes Bos repo on GitHub comm Ford slash Wes Bos Ford slash Wes Bos for an example of how that works. I won't say the code here. But until node is done with ES modules, and Gatsby will allow us to use the ES modules, this is a really good solution. - -11 -00:06:42,060 --> 00:08:04,950 -Scott Tolinski: Cool. And mine actually kind of goes along with this, which is to run the build locally to troubleshoot production issues. Because this the reason why this goes along with this in some regard is that I think there's sometimes when people first start writing this stuff, they might not have even written in the Node JS code specifically, or maybe they're just thinking about react, right, this is a front end thing, this is a front end result. And what you don't often think about is, Hey, there is no things that are happening and taking place. And at the end of the day, your entire application needs to compile in node j s, right? Because it's, it's running your that's how it generates the static build is that it runs the site and node and didn't create actual HTML files from that. So my tip here is Do not forget to run the build, and then serve the build locally as a production build before deploying, because sometimes people, they get all done with their project, and they just say, Okay, I'm going to get command brought up to Netlify. And then, whoo, it's not working on Netlify. And now now, I think it's a problem with Netlify. Little Lou, I know that I wrote some code that's maybe I used to like a window.or something, and I broke the whole thing. These are way easier to solve ahead of time on your local machine, without having to worry about whether it's being hosted or whatever. So just make sure you run that build before you push it up. - -12 -00:08:05,370 --> 00:08:56,610 -Wes Bos: Next I have is sort of like two options. So Gatsby doesn't have any specific layout. Any ways to do a layout, you just have to create your own layout component and wrap your components in it. So my first tip and my second tip are going to contradict each other. So first one is wrap your layout automatically in and Gatsby SSR. And Gatsby dash browser, those two file files will allow you to hook into a wrap page element and wrap root element. I think what i've i've read is wrapped page element is inside of your providers and wrap root element is outside of your providers. So if you're doing layout, you would want to put them in wrap page element. And that will every single page that you have will be wrapped in this specific layout. And there's no need to manually wrap every single page in that. - -13 -00:08:57,290 --> 00:09:38,190 -Scott Tolinski: So the the whole rap page element and wrapper element things are definitely topics that that seems scarier than they are at first. In fact, all of the additional sort of little API things in Gatsby are scarier than they are than they actually are. So learn that stuff. You know, it gets B has a page was that just like the in their documentation. Let me see if I can find the exact page. If you add to Gatsby site, and then you click on Doc's. And then you click on a Gatsby API, learn all that stuff. There's a lot of really useful in there, it's going to come in handy. So even if you're just building something basic, you want to get better at Gatsby asking how to get better. That's how you get better. You learn this stuff. - -14 -00:09:38,300 --> 00:11:03,600 -Wes Bos: Yeah, just read all of it. And then that gives you a headspace of what are the possible lifecycle methods that you can hook into. And they will definitely come in handy when you need it. So my other tip is the flip side of that is consider just manually adding the layout component to each page if you want that. So if you don't want everything single page to have a layout like I ran it situation where, like if I want Wes Bos calm forward slash, like a micro site or a custom custom URL that's still within my Gatsby site. And I don't want it to include the entire nav and footer and everything that is in my layout. If that's the case, then there's nothing wrong with just manually wrapping a layout component on every single page where you need it, and then just not doing it in the rest. I'm just thinking about that, you know, one like really cool thing I like about that is, I once accidentally wrapped my website twice in a layout component. I did both of the ones I talked about, and it worked. Like I just had the whole layout twice. And I was like, I would never have worked in WordPress land. Because the WordPress land is like the the logic of setting up headers and all of that and the template are so tightly bound. And in Gatsby, it's just what it looks like. And I could wrap it six times if I wanted and have six navigation, obviously don't want to do that. But I just did that by accident. Haha. That's really cool. - -15 -00:11:03,960 --> 00:11:15,150 -Scott Tolinski: Some people would see that as a fault, because they're saying, well, you're using this incorrectly it should break. I don't know if I'm of that mindset. But I definitely think that is this is like a positive in mind. Yeah, - -16 -00:11:15,150 --> 00:11:20,220 -Wes Bos: you can put your nav wherever you want, if you want it to put your flexibility. Yeah, it's pretty cool. - -17 -00:11:20,670 --> 00:12:56,580 -Scott Tolinski: Yeah. Another one here is long the lines of layouts. Now. layouts and as they pertain to animations in in Gatsby are kind of difficult. We all know, I like a good animation. I like to make animations. But Gatsby the way Gatsby and next JS do things with their their routing based is, unfortunately, it requires like basically most of your your page to mount and unmount on page change, right, which is one of the reasons why they have the whole v one, the layout plugin or whatever from the old Gatsby version layout, because people like that way of doing things. But now we have to use this whole wrapper element in rap page or rap page element. And those are the types of features that you're going to want to use if you're getting into interface animations and transitions. So just throwing an animation or an interface transition into your page or component is not a recipe for success, you kind of need to orchestrate it a little bit with Gatsby considering that there's going to be time to unmount and things like that. So if you want to have any interior pages or elements animate themselves, you kind of have to orchestrate it from the root element or page element layout wrapper that you've created is something that is not going to get unmounted or mounted on everything. That way, you can maybe throw in a little delay here while the internals animate out in some sort of custom way. Or you're throwing on maybe like a frame or motion animated routes kind of situation that is taking place on the container itself. - -18 -00:12:57,150 --> 00:13:49,200 -Wes Bos: good tip. My next one is one of these hooks that Scott was just talking about his use the on Create Page to pass context to the layout. So on Create Page is a hook in Gatsby and when your site is building, it will call that allows you to step in, and you can do whatever you want. And in my case, I wanted to pass some additional context to my layout.js component. And what I did there is I took the pages path, you have access to the whole page and all the data and everything like that, and I just checked if the path matched in my case, it was thumbnail. And if it was a thumbnail page, then you can just say page context dot whatever. And that allows you to you ever need to need to send some additional data over to your page, you can do that via the onCreate page hook. - -19 -00:13:49,620 --> 00:14:17,790 -Scott Tolinski: I think those hooks are largely underutilized, you know, under under utilized as in like, there's a lot more advanced functionality, you can accomplish fairly easily with them as long as you just land them. So yeah, good. One. Last one for me here is that you don't have to query for everything. You know, it's funny, I think is is that the example that shows that you're querying for metadata, I'm like getting it confused with the others content or grid, some and whatever. - -20 -00:14:18,000 --> 00:14:41,880 -Wes Bos: Like, that's what they show you as like the first introduction to writing queries is type this text into this file, then query that exact same text from the thing. And I get that they're showing you a very simple intro to sourcing data. But it seems kind of silly not to, to have to just type text into a file and then it goes into the API and then and then you got to quit. - -21 -00:14:42,840 --> 00:15:31,800 -Scott Tolinski: And I think sometimes people get the false impression that's like, the you got to do that stuff. But to be honest, if something is output only a couple of times or it's not going to change the name of your website, or it's hard coded text, or maybe it doesn't need to come in from an API, a lot of these sites that we're building with Gatsby They don't have a CMS back end, it's just a site write code that stuff, there's no reason not to. If your site doesn't need a person that modifying and updating the content, I would not reach for a CMS back end, right, I'm not going to reach for contentful, or, or WordPress, or any of these things, because it gives you not only like a ton of overhead, and all sorts of ways, it just makes the entire process that much more complex. So if you don't need that content editing, keep it in code, it's going to be way easier for you. - -22 -00:15:32,130 --> 00:16:08,760 -Wes Bos: last tip I have here I've said this before, use if you've got lots of images, and you're finding your build times are very slow. You can use Gatsby parallel runner, and that will offload the image generation to Google Cloud. And that will make it much faster. And that's why you saw my own site. And there's also like cloudinary, sanities, image all of those work with the Gatsby images as well. So that's that's an option as well. And if that's the case, you don't have to generate any images on build time. You just, they're just done on demand, which is pretty nifty. nifty. Yeah. - -23 -00:16:08,760 --> 00:16:09,330 -Unknown: I love this. This - -24 -00:16:09,330 --> 00:17:06,830 -Scott Tolinski: is a lot of great tips on one of my favorite platforms, Gatsby. And if you don't know Gatsby, give it a give it a real hard look. If you're just a react novice or any of those things, don't worry, because then you don't have to know a ton of react to get a very fast site out of Gatsby. It is I always have these funny conversations with people where they're like, I just don't understand why you would use a JavaScript framework to build a site. And when you could do it with an HTML and JavaScript like, Well, you see, have you seen how vast these these Gatsby sites are? And honestly, you get so many extra features. Beyond that HTML doesn't have right you get this ability to change page routes. Without having a full refresh. Imagine that right? So Gatsby just makes some of these things so incredibly easy. I think I could probably spin up a Gatsby site faster and quicker than I could most anything else. So big, big fan of Gatsby love these tips. Maybe we should do another one of these sometime. - -25 -00:17:07,530 --> 00:17:14,730 -Wes Bos: Yeah, yeah. Let us know what your tips are. Tweet us at syntax FM. I think that's it for today and we will catch you on Wednesday. - -26 -00:17:15,080 --> 00:17:15,590 -Unknown: Please - -27 -00:17:17,400 --> 00:17:27,150 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax276.srt b/transcripts/Syntax276.srt deleted file mode 100644 index 91e8559dc..000000000 --- a/transcripts/Syntax276.srt +++ /dev/null @@ -1,324 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,849 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:10,560 -development treats out there. strap yourself in and get ready. Here is Scott solinsky and Wes Bos. Welcome - -4 -00:00:10,560 --> 00:00:53,310 -Wes Bos: to syntax. This is a podcast with the tastiest web development treats out there today we've got a potluck for you some really good questions, some stuff that I'm really excited about in node modules, custom loaders, in ES modules in node, which is going to be really cool. Talking about salaries, get l Fs, a bunch of really neat stuff. So stay tuned for some tasty treats today, we're sponsored by two awesome companies. First one is Sentry that does all of your error and exception tracking. And the second one is Stackbit which is the best way to jam stack. We'll talk about both of them partway through the episode. How you did today, Scott, - -5 -00:00:53,639 --> 00:01:09,090 -Scott Tolinski: the good I'm watching you know, doing as good as I could be doing. Just Just get grinding down working on my stuff as always and yeah, I don't know doing all right, guys. It's scatterbrained nonetheless. Yeah, - -6 -00:01:09,120 --> 00:01:11,840 -Wes Bos: yeah, getting a little sick of the lockdown a - -7 -00:01:12,330 --> 00:01:42,300 -Scott Tolinski: little is just, yeah, it's difficult to make it all work. I know, we know, we both have those experiences. But man I've been I've been doing a lot of work to refine sort of how I think about being productive and what you know what needs to fall into place the systems I have in place for making myself productive. And yeah, oh, man really like having a an off day in those regards. really hurts a lot more. hurts a lot more. Now. - -8 -00:01:42,330 --> 00:01:57,660 -Wes Bos: Yeah. You only have so much time and you have a bad day. Like, the other day I had, like something went wrong. And my whole plans for the day went out the window and I had to spend time fixing something. And it's just a bummer to waste that time. Especially just I mean, right now, - -9 -00:01:57,690 --> 00:02:10,800 -Scott Tolinski: there's just there's just so many things to do 24 seven, you know, so yeah, when you when you have one off one or a couple off ones, it really really hurts. So yeah, ready to ready to get into this a potluck? - -10 -00:02:11,190 --> 00:03:53,400 -Wes Bos: First question we got here is from Mark Haslam. What are subscriptions in react or programming in general, the React docs mentioned that setting up a subscription in an example is a side effect. But what exactly is a subscription? And when do you set one up? So this idea here is not a react specific thing. And it's it's more of just a programming thing. So in react, we know that sometimes we have to go off and listen for events, or get some data from a database, or in this case, it's talking about a subscription, which is generally what's gonna happen is you're going to add like an event listener to something some sort of data being streamed in, or most likely, you're going to have like a database that is sending live data in over a WebSocket. So because that is going outside of the React component, and setting up event listeners, that is what is referred to as a side effect in a react component, because it doesn't just take in data and return some some JSX and whatnot, it actually goes outside of it and makes a connection with the database or makes a connection with something else on the website. So that is what they mean by a subscription. And how do you set one up with depends on on what it is, it might be as simple as doing an add event listener on the window resize method, that would be a subscription to that event. Or it might be setting up like a WebSocket connection event, or you're listening for specific messages and then piping them into state. So it's it's one of those world words where you see it, and you go, is that actually a thing? Or is that just a general programming idea? And that's, it's, it's the second of those, - -11 -00:03:53,430 --> 00:04:56,820 -Scott Tolinski: right? Yeah. And there's oftentimes to the whole idea of you might hear it referred to as pub sub. And there's the idea of publishing and subscribing to information, whether that is being passed over a WebSocket, whatever, where anytime information gets updated, that publish happens of whatever the data and since you're subscribed to it, the new data will come in. What's funny is that the entirety of like Meteor, my platform that I work on, not one that I've created, obviously, but Meteor is all pub sub, basically out of the box. It doesn't have to be but it makes it super easy. So I've been working in subscriptions with react and otherwise for a long time, I think. And it made some things very easy when you everything's a subscription and made other things very difficult. So sometimes I think that obviously his subscriptions aren't for everything, right? You can subscribe to specific types of data and it can work really well. Other times. It's just going to get in the way. You know what I mean? - -12 -00:04:57,360 --> 00:05:17,910 -Wes Bos: Yeah, I just googled pub sub on Google. images just to get at one of those visuals as to what it is as we were talking about it, and it suggests Publix, so it's like Publix is like the grocery store in like, Florida. I don't think we have those. So I clicked on it and there's like these amazing subs that you can get at Publix. So I want that kind of pub sub. - -13 -00:05:18,000 --> 00:05:26,970 -Scott Tolinski: Yeah. Or like, what about like, it'd be like a really good bar like a you go to go to the pub and get a sub at the bar to get a sub? - -14 -00:05:27,000 --> 00:05:32,400 -Wes Bos: Yeah, nice pub sub. Yeah, sure. Like a real man. Ricky's pub has the best subs. - -15 -00:05:33,150 --> 00:05:36,000 -Scott Tolinski: Is that a real thing? I couldn't tell you me out. brickies pub. - -16 -00:05:36,060 --> 00:05:40,770 -Wes Bos: Oh, no, no, Rick is is not a real thing. Oh, that sounds like I'm sure it is. Yeah, sure. - -17 -00:05:41,970 --> 00:06:43,380 -Scott Tolinski: Okay, next question here is from jack. The question is using the latest node ESM imports? Is it possible to use aliases using the old require syntax, I use the NPM package module alias. But I cannot seem to find a solution for node v 14 imports, and a deeply nested file, I find that the import dot dot forward slash forward slash forward slash blah, blah, blah, really awful compared to at some folder with a an alias. And actually, I'm jack, I'm gonna say, I absolutely agree with you, I really, really cannot stand relative imports in that sort of sense. And I will go to great lengths to avoid that kind of thing, just because again, that that is so hard for me to parse to see that dot dot forward like into try to have some sort of understanding of what nested structure I'm actually and so I'm right there with you. Once you actually have a solution for this here that you found, I have not used this myself, considering I just do everything through Babel. So - -18 -00:06:43,710 --> 00:08:38,700 -Wes Bos: yeah, so I've played with the ES modules in Node quite a bit, because I'm really excited for them to be added. There's a couple like things that aren't there yet. And when I was looking into if they're coming, they mentioned these things called loaders. And I dug a little bit more into loaders. And it turns out that node is implementing the ability to add custom loaders similar to like a web pack plug in that will, or a Babel plugin that would handle specific files, or specific loading a requires in a certain way, or I even think it's kind of like a ServiceWorker or it jumps, it jumps in before the actual module is loaded. And you can write some custom logic in there. So I was just looking into that and like, Oh, yeah, I know, they're, they're working on loaders for node. I wonder if you can write your own in it, it turns out, you can write your own. And they have an example on the node docks, I'll put a link in the show notes for a transpiler loader. So that if you wanted to require TypeScript, or CoffeeScript, or sass files, if you wanted to import them into your node, you could write a loader that sits in between intercepts those requests, and then returns the actual formatted and in parse JavaScript. So in your case, I'm betting I don't know if this is true or not. But I'm betting what you can do is you can you can write a loader and then intercept all of those and say, if it starts with like a, what is that the at? The alias module uses it uses that then replace that with the relative path, which sometimes this dot dot forward slash dot dot forward slash dot.so. Kind of cool. I probably wouldn't use that just yet. I would probably just run your code through Babel, and then use the Babel plugin for that. That's probably what I'd recommend if you're using if you're using ES modules in general right now, because they're, they're not ready and no, just yet. - -19 -00:08:38,940 --> 00:09:17,190 -Scott Tolinski: Yeah, I think that's sometimes a key thing is that if something's feeling like, maybe the tooling isn't the same place, or isn't there quite yet, maybe you don't have to start using it. Especially, I mean, not even just the tooling, but in this case, the actual thing. And I mean, I see this with like, demo, or Dino, sorry, Dino, I'm so used to saying demo, where people will be like, I want to use Dino, and then they they go to the right. And they'll be like, what's the expressive Dino? Well, I mean, it's, it's, it's people are still working on stuff, you know, the the landscape and everything is going to change. It's gonna grow, it's going to evolve. So with anything new, I'm sure there'll be a solution here. - -20 -00:09:17,580 --> 00:10:52,470 -Wes Bos: Absolutely. Next question we have here is from Laura. I've been a full time developer for 10 years, and my company has a fairly flat hierarchy. I want to take on more responsibility and salary. But my company doesn't have anything like a lead developer position. Any ideas on how to move up without switching companies. I know my boss would be receptive if I came to him with a pitch, but we work full stack so it feels like I'm already doing it all. So this is cool. It sounds like you're pretty happy and you're happy in your job. You just want to move up a little bit more and thus make more money without having to switch jobs, which I think is really cool. So it sounds like your boss is pretty receptive to this type of thing. So if that was me, I would at a certain point, I think you sort of reach the top with being a developer. And in order to maybe make more money, you have to take on more responsibility. And if this was me, I would talk to the boss about how does the business actually make money. And then that goes from just being a dev, and building the things that needs to be built and taking care of all of the code to how can we push this business a little bit forward. And I'm going to come to the table with technology as my special weapon. So I don't know what that looks like in your specific company, but taking on some sort of special project where maybe we can make this process more efficient. Or maybe we can bring in more customers by by building something that would would do that a customer machine or something like that. - -21 -00:10:52,649 --> 00:13:12,720 -Scott Tolinski: Yeah, you know, I mean, I think you hit some really good points here, especially because I worked at a small agency before and at some point, the only way to insert you know, make more money or move up was to get more ownership in the company. So I think that's really definitely a place that you could look at, if that's where you want to go, maybe even more responsibility, more ownership. But again, like Wes mentioned, technologies, you're going to be your superpower here, even if it's something simple, like understanding the internet requirements, and maybe you can save $100 a month on internet services, you know, just like little things like that you have an expertise in this, that other people just aren't going to have by the nature of your background and training. And maybe you can find some cheaper, or maybe some more interesting or more productive solutions for the company. And, you know, companies value, that kind of thing. And they'll most likely be not only willing to renegotiate a new job, title, new kind of thing. But you're probably not going to make a ton more money as a developer developer, just building, you know, widgets and websites. Without, I don't know, without, without moving into a different location. Like, I don't mean, like physically moving moving into a different like physical skill set, where you're using your skills to maybe a little bit more like a big picture bigger picture stuff with this business. How is like you said, How is this business making money? How can you assist in that? And what does that look like for you, to me, if you are looking to remain writing code, and I mean, writing code full time not writing code at all, like if you want to write code full time via a full time Dev and make more money, who probably opening your own agency or, you know, working for a bigger employer is your ticket to making more money. But in terms of getting more responsibility outside of that space, maybe you can use some your code skills to request a higher rate. Next question here is from Rami. He says in Wess website episode, he mentioned using a Gatsby parallels for images, not l Fs. West, do you want to talk a little bit about your decision here? - -22 -00:13:13,079 --> 00:15:06,029 -Wes Bos: Yeah, for those who didn't listen to that one, the problem was that I have, I don't know, maybe four or five 400 images on my website. And each of those images needs to be resized and compressed and put into several different sizes, making it a couple thousand images. And that was initially very slow. So I use this thing called Gatsby parallel runner, which uses Google Cloud to resize and do all of that all in parallel. So it runs them all at the same time. And that made it much faster. So the question was, why not deal get l Fs, so get l Fs is large file system, it's an add on ticket will allow you to put lots of large images or videos or things like that in your Git repo without like making it too big. Like you can put images in a in a Git repo. And I actually have all the images from my website, but I don't keep all of the compressed and resize versions in the Git repo, because that would make it way too big. So the question is, why not that and the reason to that is that the the output of Gatsby is done into a build directory, and you're generally your build output is not included in your Git repo, just your source files are along with instructions on how to build that specific thing. Because if you included your entire build your entire build directory, and yet every single time you've built a website, you'd have like 1000, change deaths, that and that would both make your your Git repo huge, but also it's it's unnecessary, and it gets messy. So that's not what Git lfls is for. It's not for the output of the build. And I bet like if I ever got into a position where the images and videos on my website were too large for just a regular Git repo that actually would be good solution for holding the original images and the uncompressed versions of that - -23 -00:15:07,350 --> 00:15:43,380 -Scott Tolinski: have a small little aside. Yeah. Do you ever have git commit issues? I mean, conflicts, not issues. But do you ever have conflicts with your package lock file? I seem to have them all the time. And I'm not quite sure if this is like a mean problem. Am I updating things too much, I end up getting these, you know, where one person installs a package, and then somebody else updates a package. And then when you do the, the merge, the yarn lock always complains, then we have to dump that yarn lock. And it's like, Why you? What is this even doing for me? If I'm dumping it all the time, you know? - -24 -00:15:44,159 --> 00:16:38,299 -Wes Bos: Yeah, it's, it's because the lock file contains the version of the package that you're using, not just the, like, 15 dependencies that you have for your, your project, but it has the, like, 20,000 dependencies that those dependencies have, and those dependencies, and those tells you every single one all the way down. And like those change so quickly, that like if you run an npm install, you're not technically changing anything about your codebase. But because those things have changed since you've done it, that does come in. So I do run into those not as frequently because I don't have as many people working on my codebase. But I even run like depend a bot on GitHub always changes that. And then yours is out of date. And I to do that, like I either just take whatever was coming in from GitHub, or just nuke the entire thing and, and start again, because it is frustrating. - -25 -00:16:38,299 --> 00:17:01,500 -Scott Tolinski: Yeah, I almost always nuke the yarn lock file whenever it gets a conflict, because I'm like, I don't want to pursue this and try to figure it out. It's just uh, yeah, yeah, I wasn't sure if that was a pain point. That was I was, you know, experiencing just me. That's really interesting about Gatsby, you know, it's funny because I, I don't do a ton of static, like big projects with images in static sites, - -26 -00:17:02,130 --> 00:17:49,650 -you know. So it's definitely a, there's so many. It's so funny, you get these new approaches, and they're always so easy at the small level. But at the once once you get into any sort of large level, or more complex, anything, there's always going to be pain points. It's just fascinating to me, what your pain points are with the images and how you solve that sort of stuff. It's It's really cool. All right, next question here is from Nate Norberg. This is another question for Wes. It's any Big Green Egg tips. For here for beginners. I ordered a command a tomato. Is that a lot? Oh, yeah. Come on. Oh, style grill. And I'd appreciate any tasty tips you forgot. I would too. We don't have a green egg or anything. But look, I get some barbecue tips about time. - -27 -00:17:50,520 --> 00:18:31,680 -Wes Bos: Yeah, so a kamado grill is just a ceramic grill that is shaped like an egg. And there's all kinds of benefits to heat retention. And it's kind of like an oven and whatnot. I love mine. So I have two big green eggs. Tomato Joe is another really popular really nice one. And then there's lots of like, hardware store versions that are a little bit cheaper but still pretty good. I love using mine. I have three of them. That's awesome. My tips are chicken thighs that's like yes and easiest thing to cook on there. They don't dry out you can't it's hard to overcook a chicken thigh and it just tastes so good. Chicken brass is so overrated do chicken thigh is the best - -28 -00:18:31,710 --> 00:18:53,360 -Scott Tolinski: we moved recently to like just about all chicken die instead of pressed for like everything like and let me tell you every meal that we make is better like I make beat them up with chicken and better I make crispy chicken ramen. It's better so much better every everything It's so good - -29 -00:18:53,940 --> 00:18:58,380 -Wes Bos: to and it's usually cheaper to be and it's so much better I don't understand like - -30 -00:18:58,380 --> 00:19:01,580 -Scott Tolinski: what is it just because it's less meat is that why people - -31 -00:19:01,610 --> 00:19:31,950 -Wes Bos: think less desirable as like people think like oh it has fat in it. So it's like not as good for you but it's it's super good for you. It's a good food it is good for so I chicken thighs. You can't goof it up. My favorite one is a little bit of sesame oil, a little bit of fish sauce, a little bit of salt. Toss it in a bowl, grill that sucker over charcoal. My chef's kiss. My other tips are I just learned this one like a month ago and it blew my mind so do you know what spatchcocking Chicken is? - -32 -00:19:32,600 --> 00:19:38,600 -Scott Tolinski: I have heard the term I think I've had it described at least once before but it's not something that sticks in my brain. - -33 -00:19:39,000 --> 00:20:37,610 -Wes Bos: Yeah, so if you like by like an entire chicken. My favorite way to cook it is you cut the backbone out on so on either side of the the backbone. You cut it out and you have this strip you throw that in a pot you make soup out of it later. And then you flip it over and then crack the breastbone and then it lays flat. We know it cooks both faster as well as Better. And then I just learned like a month ago that you can cut it horizontally. So like it vertically is where the the backbone is you can also cut it horizontally so that the thighs and drumsticks and all of that is is separated from the breasts and the wings. And then you can cook the breast and all of that at a different rate than the lower half like the dark and the white meat because they cook differently so you can pull the you can pull them when they're ready. And I thought that was genius. I had never done that myself. Yeah, that's just like another way to have it dialed in. - -34 -00:20:38,010 --> 00:20:59,570 -Scott Tolinski: Yeah, that is a very cool. I've seen Gordon Ramsay do that on top or not on Top Chef on Master Chef before where they hit the hammer. They punch it, they punch the bird. Right. And then the spine. Yeah, I've seen that before. But no, I've never heard of this horizontal splitting. technique was we need like a Cooking Corner with was. That'd be? - -35 -00:21:01,020 --> 00:21:13,680 -Wes Bos: That would be a good one. I got lots. I won't bore everybody here. I've got a Yeah, we'll do an entire cooking show at one point what little tips that we have. So we'll move on to the next one. But yeah, thanks for sending that one in. - -36 -00:21:13,800 --> 00:21:14,360 -Unknown: Yeah, - -37 -00:21:14,400 --> 00:24:45,540 -Scott Tolinski: well, moving on from cooking tips to bug finding tips and bug finding tips on talking about our sponsor today, which is sentry.io. And the sick tip I have for you with sentry.io is to use it, guys. You know, there was a time when I had a Sentry and it was all set up. And I just, oh, I saw some issues coming in there and just say, you know, that close injury? I just don't see the issues, right. But no, no, I use Sentry to my fullest capabilities. Nowadays. He like we talked briefly about this when we were first starting, but really needing to make the most of your time and Sentry allows me to do that by finding an issue. Right? How many users is this affecting? How important is this issue? Is this a one off kind of thing? Okay, maybe this is caused by some of these extensions. If it's a problem, if it's something that we have to fix just based on seeing it, I can quickly and easily create a GitHub issue, I can tag Eric who's working on level up tutorials, and he can take a look or I can tag myself and I can get there and and fix the problem. So for me Sentry is the quintessential tool for things like this that I like it keeps everything of one specific classification in one spot, ie every single error and exception that you have keeps them all in one spot and allows you a really awesome interface for finding fixing, and really keeping track of those bugs. So check it out@sentry.io use the coupon code tasty treat all lowercase all one word, and you'll get two months for free. All right, next question here from Matt. Matt asks, inline code is considered harmful because of Xs s attacks. But for those of you at home, it's cross site scripting attacks. lighthouse recommends inlining critical CSS to improve page speed. What do you think of this trade off? I don't necessarily know too much about this, I was doing some reading. And it's like some browsers could allow some JavaScript to be executed inside of a URL inside of an inline CSS. I don't know I don't I mean, obviously, just simply having inline CSS on your website is not going to, it's not going to open you up for cross site scripting attacks. Because just just about thousands and thousands of websites, more than that would be exposed to that because for a long time, people just man, people used inline styles for all sorts of stuff just because of maybe ignorance in the past. But nowadays, inline styles are seen as something that can be added on were needed in a way that the browser can utilize those inline styles. So there's two, two sides of this. Sometimes, people will refer to inline CSS as CSS that's actually on the elements themselves. And other times, writing CSS inside of a style tag in an HTML document. So either of those could be considered inline code. I, personally have not thought too much about cross site scripting here. I've written CSS a long time. And I just kind of let the tools handle it for me right now styled components sort of creates generates classes for me, but we do have that bad CSS, the critical server side rendered CSS coming in from the server, about cross site scripting attacks request, you know anything specifically about this, because I've seen that it was possible, but the article that I was reading was like very old and it was talking about opera. So I don't know anything about if this is an actual issue. - -38 -00:24:46,170 --> 00:25:02,700 -Wes Bos: I feel like this is one of those. Like, I heard it once and I just believe it until until I'm dead. Like I have no idea. I might be wrong here but I have no idea. Like why would inline code be a potential Xs s attack i saw i don't understand - -39 -00:25:02,760 --> 00:25:31,050 -Scott Tolinski: is that anytime that there is a URL in the CSS that led to some JavaScript could be executed there. But again, the only thing I saw in relation to that was about like an old like opera version one, you know, I mean, it was it was in the it was back when you know, I eat it. So I don't really know if this is a current problem. I can't imagine it is just because of how many things use inline CSS? I've never Yeah, I can't imagine it's an issue. - -40 -00:25:32,070 --> 00:26:27,480 -Wes Bos: No, I don't think that is an issue either like, No, there's nothing wrong with using either a script tag and then JavaScript inside of that go to facebook.com and view source, you'll see that they use that pretty much every website will have a script tag on it. And there's nothing wrong with using style tags in CSS to put it on. So I don't think that that is actually issue I'd probably whenever you hear like a rule like that, push back and ask why it's probably a very valid rule, you definitely need to ask, like, why is that actual thing and understand what the the idea is behind it? Because it might not apply to you rather than you just like sort of blocking it entirely. inlining CSS to improve PageSpeed? Absolutely. Like, that's kind of a hard thing to do. And that's why we love Gatsby so much, because they they do that for you. But absolutely you should you should be doing that if your setup allows you to do it. - -41 -00:26:27,750 --> 00:26:28,590 -Scott Tolinski: Yeah, totally. - -42 -00:26:28,980 --> 00:26:57,270 -Wes Bos: Next question we have here is from Mark Haslam. What advice would both of you have for being a first time father? And how can I best prepare, my wife is pregnant, and we are both very excited to congratulations. I want to do the best I can at being a good father a baby is due in January. Both of you are fathers multiple times. I would love your thoughts. Oh, yeah, that's that's a good question. I made sure prep some of this. Why don't you go ahead and I'll think of some of my points. - -43 -00:26:57,390 --> 00:26:58,200 -Unknown: And - -44 -00:26:59,940 --> 00:29:14,580 -Scott Tolinski: my my points are get a partner who is the child psychologist and just refer to them for everything because that's, that is what I do. Know, I say something in the cornea says, Oh, you need to reread that book. And we're referring to like the other talks a little kids will listen, she's like, you clearly don't remember the book. So I, I honestly, I differ a lot. And maybe it's just because like, I think I had a good good model, like my dad was, you know, he was really great. And I don't know, I just I, for me, I'm grennan instincts here, I have no real training here. I don't know what I'm doing. Just about never know what I'm doing. And for a long time, I was actually pretty uncomfortable as a as a father, if I you know, can say that correctly. And for a long time, I was feeling kind of, you know, uncomfortable as a father, because when they're first born, they want my mom for everything. And if you hold the baby, the baby cries and you know, you can run through the checklist of things that could be wrong, and the baby could still cry at the end of the day, just because you aren't mom. And so it was a little while before. I was feeling competent and comfortable as a father because, again, it feels like for a little while, like no matter what you're doing isn't working. So it released that that could be the case, right? So for me, it wasn't until Landon started being able to play more and not not like a little boy play. But like even just like very simple stuff. We're like Brooklyn's just getting to that age right now. Right? She's just over a year old. So we can do a little bit more involved games. She showed me thing she's climbing the stairs, we're playing outside where we're doing those kind of things, she responds better to things like tickle, or just those little things like that, that make it a little bit easier for me to to really feel comfortable as a father because you get to play more once it got into play territory, like I can play all day, I can do that. That's fun. So that that, for me was a bit of a learning experience. And I felt pretty useless for a little bit. Just make yourself available early on in those early days. - -45 -00:29:14,940 --> 00:29:32,250 -Wes Bos: Oh, that's good advice. I just jotted down a few things here. That is important. I think like one of the best ways you can be a good father is supporting your partner. So I learned very early on early on, that my sister actually told us this is nobody wins the who's more tire game. - -46 -00:29:32,729 --> 00:29:34,200 -Scott Tolinski: You're broken. You're both mark. - -47 -00:29:34,229 --> 00:31:17,760 -Wes Bos: Yes. When you're both up all night and you're miserable and kids aren't sleeping and everything is awful. Nobody's going to win the I'm more tired game. So that's that's what I try to support your partner and think about them as much as possible. Take time for the kids. So like I take a lot of time off in both in the summer as well as I could pretty easily we'll just ditch work and go home. With my kids, as hard as that is for me, because I would just love to sit on my ass for a couple more hours and hack away on things, and there's always more projects. Um, you can you can tell, like my, my daughter gave me a, like a card the other day that says, I love when we go fishing. Man, I'm so glad that we we ditched work and went fishing with you the other day. And I was thinking I didn't want it. But I did write like, yeah, time for the kids. And it's cliche everyone says that, but like, no one, sort of, like, own that. And then also, I think, like, try, like one thing I'm thinking a lot about now is just like, how do you be a role model to your kids? And how are you treat other people. So just like, whether that's people in your family, or just people on the street, or people that you run into? And I'm starting to see that through my kids, they just talk to people, the stores all the time. And that's something I always do I always whenever at the, at the grocery store, I always asked like, what's the most expensive bill you've ever seen? And I love hearing that. And like, I'm super curious, like, like, what happened? Or like, if somebody you know, sometimes you have to grocery store and there's somebody checking out with like, 40 pineapples in a cart. You're like, What's going on there? What do you do? - -48 -00:31:17,760 --> 00:31:18,480 -Unknown: What do you do? - -49 -00:31:21,480 --> 00:31:33,420 -Wes Bos: Like my kids are starting to, like, take that on and like just talk to cashiers and stuff like that. And I think that's, I think that's probably the best way instead of just telling them treat people nicely that you have to show them that. That's how you do that. - -50 -00:31:33,600 --> 00:32:15,860 -Scott Tolinski: Yeah, when did it I really learned I mean, you hear it but you hear that kid soak up everything. But man, kids soak up everything Landon says the funniest stuff, like he don't even you don't even not know that he's paying attention, right? He's he's doing something else. And all of a sudden, he'll be like, Hmm, I really need to go to my office to work on my work. What am I doing? I need to go well, my work and he's like saying the same stuff that you're you're saying or doing or whatever. He's just like, mimicking you and those sort of ways. And it'll just make you think, oh, man, I gotta be 100% careful all the time about exactly what I'm modeling because then that modeling aspect is so key. - -51 -00:32:16,470 --> 00:32:18,900 -Wes Bos: Oh, absolutely. Whenever it gets dropped a swear word the other day. - -52 -00:32:23,130 --> 00:32:47,100 -Scott Tolinski: Yeah, that's funny. I cannot imagine we've, it's funny because in everyday life, I'm dropping them way more than Courtney. But Courtney definitely has the skill to drop them in front of the kids way more comparatively. It's like I'm pretty good at setting up that filter from the good. Yeah, there's Courtney's are a little bit more emotive words. Like, I cannot stop this from coming out. - -53 -00:32:47,999 --> 00:32:53,730 -Wes Bos: Oh, man, that's so funny. All right. I just added that to the the Pollak title as father ship. - -54 -00:32:54,180 --> 00:32:55,260 -Unknown: Yeah, yes. - -55 -00:32:56,760 --> 00:33:38,580 -Scott Tolinski: Next question is from talaq Mati, our present web developers merely crud bastards for corporate culture, if not what entrepreneurial opportunities are open with JavaScript and hooking up react with back end node layer volt, and reading Google Maps, Docs. Of course, the list isn't exhaustive. But you get my point. Right? Note, I'm not interested in selling courses or creating frameworks there. Okay. This is a weird question. It's basically saying in the correct me if I'm wrong here, but it's basically saying like, what are their what are the interesting career possibilities with this stuff? Right? Is these skills - -56 -00:33:38,580 --> 00:33:47,360 -Wes Bos: right? Am I just gonna be updating text boxes for the rest of my life? Or is there something a little bit more interesting? And also, no, I'm not going to create a course. - -57 -00:33:47,400 --> 00:35:14,960 -Scott Tolinski: So they're looking for job advice, or job information, like what are the types of jobs but there seems, you know, the cool thing about this this platform, the web, specifically is that the browser can do so many different things. So if you're really interested in doing it different, more exciting things. There's a lot of opportunities out there, if you can think about it, just think about how many different things right? So if you want to work on some more challenging problems are some more interesting problems. We have what we have web graphics, we have 3d on the web, we have video for web, we have torrent for web, we have a ton of very difficult problems, where you could do all sorts of cool stuff. Maybe you just like building animations and interfaces. Or maybe you like creating portraits with CSS. So I would not describe it. Any of the work as being like just inherently just crud. I think crud makes up a very small percentage of my development time. A lot of my development time is building interesting interfaces, and getting around really complex interaction problems and understanding how people are using things in a little bit more way than that. Writing just like database updates or or that sort of stuff. But if you're on the the server side of things, I don't know, maybe a little bit more difficult, because that's not my specialty. But there is there's a lot of really interesting stuff going on. That's not just crud in my mind. - -58 -00:35:15,570 --> 00:36:36,330 -Wes Bos: Yeah, I agree. Um, I think, oh, if you have that sort of base set of skills, then then those are the type of jobs you're going to find. And if you want to steer clear of that, and there's certainly nothing wrong with that, like, I built a lot of, I build a lot of crud apps in my day to day and there's always new and interesting stuff that comes up and building you eyes around them, and the data validation, all that. But if that's the case, what you need to do is you need to like find whatever corner of the internet, like Scott was just saying, whether it's animation, or video, or building desktop ABS or anything like that, and you need to find out what that thing is, and dive deep into that and start writing blog posts and making YouTube videos and because like the jobs that are doing that really, really niche and interesting things, the people that get those jobs are usually the people that are diving deep into them, and they're, they're sort of known for it. I don't think anyone's just gonna hire you off the street and saying, like, yeah, we need to start like 3d modeling this DNA samples. Do you think you could do that? I know that you're really good at like mapping state to props. You know, I think like, you probably can get some really cool jobs. But you need to start showing that you have those skills first. - -59 -00:36:36,359 --> 00:37:04,860 -Scott Tolinski: Yeah, I think that's the I've been such a key thing is that you can get good at anything and probably get a job. I mean, if on the web right now, unless it's like, well, I've mastered Netscape, you know, if you get really good at anything in 2020, on the web, there's going to be job opportunities out there, somebody's gonna need those crazy video manipulation skills you can do somebody's going to need those crazy animation skills. And if you're showing it off, and you're doing the work, then people are going to come to you first, right? - -60 -00:37:05,399 --> 00:39:08,520 -Wes Bos: Yes. Next question we have here from code finity. Have you used any of the ESX generators and the yield keyword? It seems like their mechanism for a sink await under the hood. Thank you. So using a sink await is probably sufficient? I like this question. Because when I did my ESX, we didn't have a sink await. And I taught generators inside of that. And since then, I've not actually found a use case for them in my day to day work. So a sink away, will will compile down to generators, if if that works out with the browser support. But they're, they're not the exact same same thing I kind of a cool thing about generators is that they can sort of be like long running, they don't just have to be a waiting inside of a function. So like, the example that I had in my course was, I think it was like a barber shop, or at the start of the day, you have an empty array. And you can take your iterator and call next on it, and you get the next customer. But as people are, as people come in the shop, they get added to the end of that array. So you just keep you just keep calling next. And oh, it was it wasn't a barbershop it was the deli counter at the you know, le Yeah, Marcel, you know, you get the little ticket at the deli counter, and then they're like, next number is 47. Right and get your return. Exactly. And if there's like nobody in line any more than they stop changing the number. But if there's lots of people, then you just push next after after the next customer. So that was like my one example. A very good example. Yeah, it was it was I was proud of it. But who and honestly, I have not found a good use case for for using January's in the wild. I think that a sink await does meet most of my use cases not to say that it's not a good part of JavaScript. It's just not my I have not run it into into it myself. So just tweet us if you have a good use case for generators. I'd love to see that same. - -61 -00:39:09,230 --> 00:40:56,520 -Scott Tolinski: Cool. Next question is from Anthony, with a legacy project that has all the builds dependencies, how do you decide when to retool and when to fix all of the NPM audit issues? Now? This is a question that, huh? So it really depends on the project at hand, and what the life cycle of this project is going to be and what these audit issues actually are. Me personally, if this is a project, that's going to be yes, it is a legacy project, but it doesn't have like a, it's not going to go away anytime soon. I'm going to invest that time. I'm going to rip it out. I'm going to start you know refactoring things. I'm going to update dependencies and I'm going to do it one at a time until it's all done. And that's just the type of person I am but I'm also going to make sure that we have tests in place so that things don't break, I'm going to not worry about doing it all and fell in one fell swoop just doing a little bit at a time. Of course, there's some things that you can do that with, Eat That Frog take care of some of the big ones and then refactor down that way. As long as you have those tests, and you have the time, I would go for it. If you if you don't have the time, or this project is like not going to survive for too long, then maybe that that changes the discussion a little bit. So how do you decide when to retool and fix all the NPM? audit issues? For me, it's like, really, what is the lifespan of this project? Am I going to be the one maintaining and working on it forever, because if I am, then I'm going to fix it. If it's somebody else, I would probably recommend that that person does all those updating, because I don't want to update a bunch of stuff I'm not gonna fix essentially, - -62 -00:40:57,060 --> 00:43:07,530 -Wes Bos: I've some somewhat of a similar approach to this type of thing. first thing I'll do is, I'll look at the actual security issues that pop up and see if they're actually security issues for my application. So you run it and it says you have 300 security issues. Usually what the case is, there's like one or two or three dependencies in there that are being triggered over and over again. So take a look into like, what is the actual security issue. And usually what will happen is they will show you how how the security issue will arise. And then you can reference that with your code to say, am I using it in that way? Or do I have to really worry about that? And almost always, it's like, if you use this thing, but you also have a regex, that interpolates a variable, there's a slim chance that somebody might do something like that, and you're like, oh, okay, well, I'm not doing that at all. So that's, that's not really an issue for me, it'll be fine. My next thing I'll do is, sometimes I'll just try what I call a YOLO. Update, or I just, I run ncu, which is NPM, check updates, and then dash, you will just update the package JSON. So I'll just go blown away, update the entire thing and try start the app, and then run any tests that have it and see, like, Can I can I work through any issues that are popping up in the next half an hour an hour? In most cases, it's just a matter of, Okay, I'm running into these ever running into these errors. Let me just Google those errors. Oh, here's a GitHub issue. Or somebody else hit that error when upgrading, and here's what to do to to fix it. But if honestly, if it seems like too much work, roll that sucker back and just live with the versions you have. There's there's nothing wrong with or if there's no security issues, then just just keep running the thing that you have, I have apps that run on like node eight right now. And until my hosting platform will no longer run node eight, until there's a major security issues with node eight, then I'm not going to spend the time updating this thing just yet. Because in some cases, it's just not worth your time. And the potential things breaking and whatnot. - -63 -00:43:08,070 --> 00:43:37,770 -Scott Tolinski: Yeah, make sure you commit back up all that stuff before running a yellow update or so it's easy to jump back in time and fix everything up. In case it's not working. I do that too. I use yarn upgrade interactive. And I want to more than one read dependency at a time. If it's a read dependency, I'll give it a try sometimes and read it like a full version bump. Correct. The full version bump of five to six. That was actually an intro five to six. Was that the original name of Babel? - -64 -00:43:38,010 --> 00:43:41,130 -Wes Bos: Yeah. 665 6250. Yeah, - -65 -00:43:41,130 --> 00:44:38,760 -Scott Tolinski: that makes more sense. So yeah, no, I will do that YOLO update as well. But again, not just doing it willy nilly. Sometimes when they do a major version of it, absolutely nothing. There's no breaking changes. And if you see that in the documentation, that's the perfect use case for this thing. Go ahead and do do it. Run all your tests, make sure everything's still working, visually confirm it yourself. And then then pat yourself on the back for fixing some sort of an update there. So yeah, I update very frequently. In fact, I, I know this is about legacy projects. But sometimes people ask me, you know about keeping things up to date. And if there's like a non breaking change in a package, I'm updating all the time. I mean, we have our test in place for a reason. And I don't want to get too far behind me to get too far behind, everything gets a little bit more difficult. So I'm trying my update stuff at least once a week, which sounds crazy. But man, every single time I run it, there's a ton of new updates, that's for sure. And I'm addicted to updates. It's - -66 -00:44:38,760 --> 00:45:31,410 -Wes Bos: like a dopamine hit for me even though I'm not getting anything. My main apps I'll run it once a week, no problem. Just because it's so much more manageable. You can usually read the change log of the new app thing that updated. If it's just a point release, like 1.0 point one to 1.0 point two I'll just I'll just update that because that's bug fixes a 1.1 To like a 1.0 to a 1.1 is usually not breaking changes as well might be but they're usually just adding features and fixing bugs and then a full version button and that's when you got to really read the read the changelog. But like some good like especially mongoose does this is the though the wait like two years, if they remove a method, the wait like two years and just throw warnings in your console for two years, but while you fix it, and then finally deprecate it, which is really cool of them, - -67 -00:45:31,710 --> 00:45:54,180 -Scott Tolinski: right, give you that time before and the biller you in the console, like react does that says hey, don't use this unsafe method or whatever. Those things are definitely helpful. Is it just the NPM version, whatever the npu? Is that what it is or and, and see you does ncu not color code? Because one of the things I love is a it does, or does not? - -68 -00:45:54,600 --> 00:45:56,340 -Wes Bos: It does color coat? Okay. Yeah, yeah, - -69 -00:45:56,550 --> 00:46:06,540 -Scott Tolinski: cuz that's why I really like about that yarn upgrade interactive. Is that like red for major version, yellow for minor version? Green for patch? I mean, really easy to see at a glance what's good and what's not? - -70 -00:46:06,810 --> 00:48:45,270 -Wes Bos: Yeah, that's key. Next question we have here is from Muhammad Taleb, in what instances Do you prefer to use ram versus them versus pixels for size? I usually like to think of it. So if I'm okay with n elements, font size being based on the parent, and then I'll use m, if not, I'll use a REM almost never use pixels anymore, except for on the HTML element. I'm assuming that's the set the base font size, but even then I usually use a percentage. If you set the HTML element, this is me jumping in. If you say HTML into what 260 2.5% that gives it a base of 10. In practice, I yeah, I mean, I just said 10 px. In practice, I found it a bit hard to gauge what to expect FM's have because of nesting issues. So I've been leaning towards using ram though, I thought, understanding the Rams can be less modular Can you might make some decision on that. So we've talked about this a lot and on the podcast, but we can we can do it again. So sizing things, what I usually do is I'll set a base font size on my HTML element, usually just a 10 px. And then I set most of my other stuff to be rems. And that's going to be based off of 10. And that way, if you ever need to scale up the entire website or down the entire website, then you can simply just set the change the base font size off of that. So at the end of the day, I'm still calculating in my head, how many pixels things should be because at the end of the day, our screens still are in in pixels, right? For AMS, a very rarely use AMS but their use case is for exactly what you said, when you have when you want to size something based on its parent font size, then you use an M. So in my latest course, we did the logo entirely in CSS, and everything, the border size, the padding, the font size, the amount of tilt on each of the things, all of those things were based on how big it was. And if I want to scale up or down the logo accordingly, all you have to do is change the font size of the logo root. And then everything else will will scale exactly the same amount up and down, which is cool. You could you could do that with calc calc as well. But it's pretty easy to do with AMS. And same with my, if you go to Wes Bos comm and go to one of my blog posts. There's like a little yellow square in the top right hand corner of all of my h1 through h6 elements. Those are M's because I said make this like two M by two M and then regardless of how big the font sizes, it's always scaled up proportionally. - -71 -00:48:45,900 --> 00:50:13,560 -Scott Tolinski: Yeah, for me, okay, so for me with font sizes, I think everything things that made me a better CSS developer when I was learning CSS, font sizes, I just about never declare a font size on a container ever, I am trying to think of a situation where I would do that. And that's made it working with M's way easier. Now granted, if you're not declaring a font size on the container, and they're just relative to the body, you might as well use ram anyways. So there's not really too much of a benefit there but maybe leaves the opportunity open. I think they the key distinction is that you know when and why? But like, you know, what I'm not doing is I'm not saying you know, my, my header, font size is 16 pixels when I really mean the nav is, you know, if I if I have a nav item, that styling is going to be attached to essentially that element itself, whether it is the list item or whatever. And then that way you don't have to worry about those weird issues that you encounter when you're first learning M's, or rems, where this thing is not the correct size that you're expecting into I'll because of the route is not what you're expecting it to be whatever it's relative to. So I don't define any font sizes on containers. I basically set up my new Higher typography system as font sizes on elements. And then I also also set all of those font sizes as custom properties. So I have like an h4 customer via CSS variable, - -72 -00:50:13,560 --> 00:50:14,280 -Unknown: sorry, - -73 -00:50:14,280 --> 00:51:10,110 -Scott Tolinski: I think they're actually like legit called CSS variables now custom properties anymore, either, right? Because I've been calling them custom properties to try to stay like legit. And then I think they're in Can I use as CSS variables. Now, either way, I set up like an email have an h2, as that's my CSS variable, just in case I need to reset an h3 to be the size of an h2 or somewhere in the code, right. But again, I'm only ever updating the font size on the thing itself, and not the container to avoid any sort of weird root issues. But in your use case, that is where you have like the squares being relative to the parent, that is such a good use case. But unfortunately, that that type of thing, like doesn't pop up that much. So me personally, I use EMS, but for no good reason. Really. I functionally use them the same as it as rems, and most likely use them interchangeably just because of my practices and CSS. - -74 -00:51:10,560 --> 00:51:14,730 -Wes Bos: Speaking of fonts, which have stacks, font stacks, - -75 -00:51:15,720 --> 00:51:19,470 -Scott Tolinski: that's the right word. But no, no. That was a good transition. Yeah, - -76 -00:51:19,530 --> 00:55:31,590 -Wes Bos: yeah, no fonts, which have font stacks. Another type of stack that we should take about is one of our sponsors, which is stack bit. So Stackbit offers developer tools that enable things like inline content, editing, live previewing of content changes, and collaboration features on your jamstack website. So if you've got a jamstack website already, so whether that's a Gatsby website, or next jass or nuxt, and you've already hooked it up with whatever CMS you're using, on the back end, they they support all kinds of different CMS is like Sanity, contentful, dado, CMS Netlify, CMS forestry. So you use still use both of those things. But you as the developer can take jamstack to allow you to do things like real time editing, real time previews, all kinds of tools, it's really cool. It gives you that extra, like I think, like, if you're building a website, a lot of marketers are really going to appreciate this, this features to add it onto your jam stack website, because it it fixes a lot of the little downsides that we have with the gem stack. So check it out@stackbit.com it's the best way to jam stack. Thanks so much, Stackbit for sponsoring. Let's grab one more question here. And we will pick it up from from there. Actually, this is this is a perfect question from talking about jam stack and things like that. headless CMS is. Hello, chaps. Hey, hey, Billy. Thanks so much for the show, I learned an awful lot listening through. I've been dabbling in development for some time now. And I've taken on a project for an express site, which aside from a few past static pages will include a shop with a number of small items, a customer dashboard for order tracking, submitting supplementary info, and image center journal blog section. I've listened and re listened to your CMS Roundup, which is great. But having worked through Wess node course, I'm kind of thinking, why would I spend time integrating a CMS when I can just build an add post page for admin users, save the posts in MongoDB, upload the images to my server and use CloudFlare. Free CDN tier. Please explain to me why this or this isn't a bad idea, or more generally, share your wisdom on what scms is actually necessary pace. I think this is a really interesting question. Because like, that's the answer is like, why would I use a x external package or a service, when I can just build that myself, like Wes, his course showed me how we can make an admin area, we can edit the thing, we can create a forum, we can update the update it and you're up and running. So like, first of all, good on you for doing that. Because I think in a world of slap all these services together, and all sudden your website costs for the hundred dollars a month, being able to just do it all yourself is key. But why would you want to use a CMS over just building it all yourself? Because reinventing the wheel? Quite honestly, there's a lot of finesse that like last 10% of building a UI, hitting all the different edge cases of being able to do something like your clients gonna come in and say, Alright, I have these two lists of content. How do I reorder them? And then also, I have one in the wrong list. I want to drag it out of that list into the other list. How do I move How do I do that? You go like, Oh, well, you can't like I didn't build this like amazing drag and drop UI, where you can cross data paths and relate content and things like that. I just gave you a text box where you can type it in and that's where it's at. messes really tend to shine because that like example I just gave like that would might take a developer two weeks to build that thing, when it's just like a small percentage of the little UI that you get for free. In a CMS plus things like an API data validation, maybe a graph qL API comes already with it. There's a lot to gain in terms of speed, and not having to reinvent the wheel when you reach for CMS. But then there's also a lot of control that you can have when you do go ahead and build the whole thing yourself. - -77 -00:55:32,190 --> 00:57:22,830 -Scott Tolinski: Yeah, I think I experienced this firsthand myself just about all the time, because I, you know, cut in my own back end entirely for level up tutorials. And we had to do just about every single basic, basic CMS feature that you can imagine in my platform, right? Anytime I need it, I got to build it, drag and drop to reorder whatever, I got to build it. And it's both a strength and a weakness because at the same time, some of the things I'm most proud of in the level of tutorials, codebase are some of the Admin Tools, as in my like, tutorial builder, the Course Builder, the the series, importer, all those things are really cool that I've made, and I really spent the time to make them cool. But imagine how many hours I spent building that stuff that I could have been spending doing other things, you know, adding more functionality, recording more, just all sorts of things. And now granted, I really like building Admin Tools. It's a lot of fun, that like basic CMS sort of stuff is fun for me to work on. But at the end of the day, sometimes is just like hedging, like, how much do you need to do yourself verse? What is the actual cost of making these decisions in time? Right? I don't know it's a tough because at the time that I made level up tutorials, there probably wasn't any good option to do all this stuff. Now there's like things like reaction, commerce, or ghost or some of these other platforms that could have done all this stuff for me in ways that are probably a little bit better, because there's more manpower working on it. So there's definitely trade offs to think about there. And custom tools are really sweet, but they are definitely a big, heavy chunk of your time. That's for sure. All right, great - -78 -00:57:22,830 --> 00:57:27,930 -Wes Bos: question. Thanks so much for asking that. Let's move into some sick pics. - -79 -00:57:28,290 --> 00:57:33,960 -Scott Tolinski: So this is kind of interesting. Have you ever heard of foam? Wes? - -80 -00:57:34,980 --> 00:57:38,550 -Wes Bos: I've heard of foam. foam, what's foam, foam - -81 -00:57:38,550 --> 01:00:52,230 -Scott Tolinski: bubble.github.io forward slash bump. That's not the best URL. This is totally unrelated. I was listening to a podcast just for fun to to hear what kind of other tech podcasts are out there, you know, just to give a listen. And this person's like, I'll have it in the show notes. They didn't. So it wasn't in the show notes. For a link for this thing I really wanted to check up on and then they were like, or you can just visit blank blank for slash blank forward slash blank, blank blank. And I was just like, Oh, just like the longest URL. It was like not even related to anything. I was just like, come on, I'm not gonna type this in correctly. Okay. So fall. So foam is really interesting. foam is a personal management sharing solution, inspired by Roma research built on Visual Studio code and GitHub. Now, if those if any of those words sounded familiar to you, you might even that give yourself a pat on the back. Some of the stuff is really cool. I don't use Rome myself. I use something called obsidian. obsidian is an application for taking connected notes, where you can easily link between things and I found it to be a better fit for my notes than something like notion. I use notional for databases and tracking and all sorts of stuff. But I don't use it for my notes. Because obsidian is a really nice with this whole math, there's a method, it starts with the Z. It's a long word, I'm sorry, I'm blanking on this method, methods name. Oh, the zettelkasten Oh my gosh, zettelkasten. That is not a word that I'm going to be able to say correctly without hearing somebody else say it. But it's the whole building a second brain thing where you can do this sort of really neat little linking syntax and have all of your documents be linked in this giant graph of connected information. And it's fantastic. So I've been using obsidian to do this because it writes to markdown files. And then these these cool people created foam, which is basically a Visual Studio Code version of this exact same thing where you can work in markdown apps, you get the graph view, you can link between things, it's all markdown. It's all connected. So instead of having to have some third party app that is like essentially mimicking Visual Studio Code You just got it all in Visual Studio code. And it's really cool. It's very, very cool. So check it out here, it's still early days. So a lot of the install stuff is, is a little rough, I found, there was like some interesting things where it's like oh t To get started, just clone this GitHub template, and then you clone the template. And the problem is, is the template has like a bunch of like, like custom VS code, extensions and configuration. But for some reason, it's like they felt the need to define a theme and define a font and stuff like that. It's like, I don't want you to change my font or theme I want, I want to use my theme font. So just little things like that. But it's still early days, it's very cool. If you're looking for a free notetaking open source application that uses sort of like the Rome research ideas, then you're gonna want to check out foam, it's very cool. I'm very into it, beauty, - diff --git a/transcripts/Syntax277.srt b/transcripts/Syntax277.srt deleted file mode 100644 index f695bf156..000000000 --- a/transcripts/Syntax277.srt +++ /dev/null @@ -1,140 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Unknown: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Taylor. - -2 -00:00:23,580 --> 00:00:24,450 -Totally at ski. - -3 -00:00:25,890 --> 00:00:49,500 -Whoo, welcome to syntax and this Monday, we're gonna be playing a game of stumped. Now this is a game that we probably haven't played in like a year. So maybe it was a game that Wes and I made up to try to stump each other with internet question. Yeah, it's been a long time. It has been a long time. It's been too long. And too long since I've been embarrassed. - -4 -00:00:50,610 --> 00:04:18,810 -On a popular podcast, so let's go. I forgot about it. Somebody somebody like said, Hey, you should do a stumped and I was like, Oh, yeah, I forgot about doing stumped. Oh, yeah, that exists. Yeah, we should do that. So my name is Scott, TELUS gamma developer from Denver, Colorado. And with me, as always, is the Wes Bos. How you doing? Wes? I'm doing okay. It's like 38 degrees here, which is 100.4 Fahrenheit, which Americans get much hotter. I know. But it's hot for a Canadian here. I'm used to snow. Yeah, yeah, it's been in the hundreds up here to well, down here. I'm way far down compared to you. But yeah, so this episode sponsor is a Log Rocket. Now, if you've never used Log Rocket, you're gonna check it out at Log rocket.com forward slash syntax. And you're going to be blown away by some of the cool stuff it does. Basically, it gives you a session replay of a bug error exception happening as it happened. So that means you can scroll scrub through the video, you can get your network request as they happen. You can get the console log as it happens, the Redux store, or any of those cool things that you have never seen from an error and Exception Handling tool. This is not just like some breadcrumbs to try to find the problem. This is literally how the problem happened, giving you an unprecedented access to solve this problem. So check it out at Log rocket.com forward slash syntax and try it out today, you're going to get 14 days for free with that Log Rocket URL. So check it out. stumped. Yeah. So that we are using this 30 seconds of interviews.org, which has a whole bunch of like, like little, little like, quick little gotcha questions, and not necessarily gotcha questions, but just interesting things. And they vary from easy all the way up to hard they are, what are the categories HTML, CSS, JavaScript, react, node and security. And we just wrote a little snippet that we paste into the console that will randomly grab one of the 300 questions on here, and the other person has to attempt to answer it, we'll make fools of ourselves, fool. So that's it. Do you want to rock paper scissors? For whoever wins gets asked the first question, I win a paper to his rock so hard with the latency, what happens? each end up going slower each consecutive time because we're both trying to account for the latency. Okay. My brain skills are really firing on all cylinders today, as you can tell. All right, my question here is an intermediate one, it says what is the difference between HTML and react event handling? And I went into the answer just to get a little bit more clarity on this. But the mean, what is the difference between inline event handlers on a button and inline event handlers in react? JSX. So on, click on Submit things like that, what's the difference? Well, name a couple differences between the two. Aren't they not the same? Like aren't the React ones just their own things, synthetic events that are like, their own event system that like mirrors the DOM one, is that correct? That is correct. It's not that's not on here. But you're right about that. But that's that's not what it says here. There are there are some actual physical, yeah, let me go and we keep going here. Because who - -5 -00:04:19,950 --> 00:05:00,000 -I'm gonna get I'm gonna give you a fail on that. And a, that's okay. Because like, like, how often do you write inline event handlers on age like a button, right? Very, probably never, never know, before that I use jQuery. There you go. One difference is that react camel cases, its event handlers. So it would be on click with a capital C and react and on HTML, it's all lowercase. The other difference is that HTML uses double quotes on the attribute, or you can also use single quotes as well. And then also react, you pass it reference - -6 -00:05:00,000 --> 00:05:54,270 -To the function without parentheses and in HTML, you actually, inside the quotes, you put the parentheses on the end. That's a sort of a gotcha that that people have. Yeah, otherwise it runs in the JSX. Yeah. Yeah. I think that's true. Any function though, not just a inline event handler 30 seconds of interviews.com or.org. So, okay, but But no, that's not true in HTML elements. Like, if you put a handle click parentheses, in an attribute in HTML, it's not going to run until the event handler Oh, no, I know. I'm saying like, I'm sorry, what I what I meant is that react, no matter what, what way you put a function on anything, it's Oh, yeah, that's true. Regardless and react. Yeah. Okay. So that's big, big F for me, Wes, Ma, got to get you one here, popping it open. - -7 -00:05:55,320 --> 00:06:03,780 -This is an intermediate one. But this doesn't seem, this seems like an easy one. What are JavaScript data types? - -8 -00:06:05,580 --> 00:06:09,030 -Not like what are they? But like? What, like, what is the data type? - -9 -00:06:10,500 --> 00:06:40,890 -What is the data type? Because it doesn't say what are the although, sorry, like, is asking what the what the types are in JavaScript, D. It's F, it just is what our JavaScript data types. But it looks like it's looking for what seven data types are. Oh, okay. All right. This is I always like doing this one. I always screwed up. Number, string. object. undefined. No, go to more symbol. - -10 -00:06:42,000 --> 00:06:42,990 -And - -11 -00:06:44,370 --> 00:06:55,110 -Boolean? Aha, that was not as hard not as, um, I've asked you that on the podcast and you rattle them off. No problem. I had to really think about that. Hmm. - -12 -00:06:57,450 --> 00:07:03,780 -All right. Next question. For Scott, in which states can a promise be? - -13 -00:07:04,830 --> 00:09:17,160 -So I'm trying to think if there's like, any hidden gotchas with this. What states can I promise be can be resolved? rejected? can be? I don't know. It's like, if you throw does that just that just rejects it? Yeah. They're resolved rejected. initialized? I don't know the language here. Yeah. Is I'll give it to you. Yeah. So that's, it's it's pending, which it says initial state. So that's initialized, it's, like, fulfilled, which is resolved and rejected, which is rejected, nailed it. I'll give you a 10 out of 10. Even though I got the words wrong, let's go ahead and do it. That's fine. Okay, we have an intermediate question for us. And this is the topic of HTML that discuss the differences between an HTML specification and a browser's implementation thereof. Oh, difference between the HTML specification and a browser's implementation thereof? Mm hmm. I think you I think this one might be easier than you're putting on your brain. So this, the spec is just what the standards body and the people from the browsers have come together and proposed and very much like the CSS, so we haven't and it's all been approved as to how it should work. And then the browser implementation is actually how they've implemented it. And those are supposed to line up, but sometimes they don't. And there's cross browser in consistencies. Is that good? Yes. I think that's perfect. I don't know. I mean, I mean, there's the buyer, and then how it's the spec, and then how its implemented? I don't know. It's not really too deep of a Yeah. No, that was I thought that was gonna be like, much harder. I guess this does have some things that say, like, define the roles that must adhere to an honor be valid. According to this specification, it's like, a lot of words to basically say the same thing. Come on, that's a silly question. It's a silly question. Come on, who is it? Who's asking that in an interview, you know, like, Oh, do you really know HTML? Because you know, this weird thing? Oh, this is a easy react question. What is a stateless component, - -14 -00:09:18,330 --> 00:09:41,190 -a component that does not have state in the past, a stateless functional component would have just been on a function component, but now with hooks, they have a state. So a stateless component is literally just a component that has no state. And it's a function without a hook, say, a dog without a collar. It's, uh, you know, so mason jar without some cold brew in it. - -15 -00:09:43,440 --> 00:10:00,000 -I, um, I'll give you that. Um, I think the one of the keys there if you're getting as an interview question is, it's a function that takes in props and returns the same outfit, hundred percent of the time guaranteed regardless of anything else. - -16 -00:10:00,000 --> 00:10:21,540 -So given that it's it's a pure function, right? Yeah, given that it takes in data, it always returns. Exactly. Yeah, I'm gonna give you that correct. There's no side effects. Okay, this is a good one to go along with this. I don't think this one's particularly difficult even though it's listed, it's hard. But it's a good good one to go along with the last one, we just add in, what is a pure function? - -17 -00:10:22,650 --> 00:11:26,880 -Oh, there you go. A pure function is a function that given its inputs, will hundred percent of the time always return the exact same output and that function does not have any side effects, which mean that it goes outside of the function to update stuff or to fetch data or anything like that, it simply just depends on what's handed to it, and always returns the same thing. Yep, always returns the same thing. That's it, nailed it. So this is an intermediate one, it's gonna be a bit a little bit of mouth coding, but you just have to tell me what the output of it is. So you've got three variables, A, B, and C. The first variable a is is an array, where the items are 123. The second, B is also an array, same one items are 123. So so far, you have two variables, both of them are their own arrays with one, two and three items in it. And then you have C variable c, where it is a string of one comma two comma three. - -18 -00:11:27,960 --> 00:12:00,270 -So you've got an array of 123, another array of 123. And then the third string of one comma two comma three. Got it? Got it. Now, the question is here, there's it's a two parter. What is the output of a equals equals c? And what is the output of a equals equals b? So do you want me to know I got it? I think they're both false. I think they're both false. So your final answer? I, you know, I don't. - -19 -00:12:01,620 --> 00:12:03,330 -So, yeah, - -20 -00:12:04,620 --> 00:12:10,890 -I would, I would think that they are both false just offhand. In my brain space. When I tried to visualize this. - -21 -00:12:12,030 --> 00:12:22,440 -Obviously, the way that this is all presented is lining up for the the first one to be true. And the second one to be false for some reason, but I'm going to go with false false, because that's what my heart's telling me. - -22 -00:12:23,550 --> 00:12:38,280 -All right. Incorrect. The first one is true, false is true. So it is true false, and I get bonus points for at least guessing that that would be the downfall you should have. You should have answered it that way. - -23 -00:12:40,080 --> 00:12:47,880 -Why it was double equals, and double equals only performs, doubling the values and not - -24 -00:12:48,900 --> 00:13:16,800 -there you go. Who knows type, so it converts the array to a string before it before comparison, n double equals, and it'll get the second one is false, because two arrays, even though the values are the same, it doesn't do a deep check. It just checks for reference of objects. Yeah, they weren't you go in you're learning double equals that Oh, gotcha. And you may just be on a podcast doing a game show. And that's when it gets - -25 -00:13:18,330 --> 00:13:51,300 -it. Gotcha. But that this is, I think the reason you got that wrong is because you probably don't use double equals. And so you don't even know the inconsistencies of using double equals, because you just don't ever use it ever. Yeah, no. Yeah, this is a good one. Although, man, a lot of these hard ones. They just don't feel hard enough for us. I'm trying to stump you. And I know you're not going to get stumped by this. So here's one. What is Nemo ization? Oh, that's where a function remembers the values. - -26 -00:13:52,380 --> 00:13:59,100 -So that when it runs the second time, it doesn't have to re compute those values. Yeah. What's a good word for that? That? - -27 -00:14:00,540 --> 00:14:57,330 -I would like to it's in the good to hear sections. Something that's good. Good for me to hear to make sure you understand this concept. Yeah. So like, maybe we should give an example for people listening. If you've got like, I want to hear a word. There's a specific word I'm looking for. So word, like if you had like a function that does some sort of heavy process of doing some math, or even like, I've done it in the past, where you have like a, like a fetch request. And if somebody does a fetch request for product ABC, and then someone does another fetch request for product, e fg, and then the third person comes along and ask for ABC again, if you know oh, I already have that. I memorized it. I remember it. And you can like store that in like a map or an object or something like that. You are just dancing around this word. You're, it's like it's like the word what's the word is on the floor and you're just like leaping over it every single time. It's directly in front of the caching. - -28 -00:14:58,620 --> 00:15:00,000 -caching Yeah, Yes, you will. - -29 -00:15:00,000 --> 00:15:02,909 -You're on point. Yes. Your answer, describe define. - -30 -00:15:04,200 --> 00:15:28,980 -But they wanted to hear that word caching. And I know Wes I just did in New York. But no, you got it. You got it. Right. So Alright, next question for Mr. To Lynskey react question, how do you pass an argument to an event handler in react? So you have like a click handler and you want to pass an argument to a method, you have to kind of comes back to the Yeah. - -31 -00:15:30,630 --> 00:16:46,830 -But if you just have params, at the end of your function it runs. So you've got a, there's several ways you can, the way that I'm doing it is I'm writing an inline arrow function, inline anonymous arrow arrow functions to just simply call because that will only run when clicked. Beautiful. Do you know another way? That is very not so popular anymore? bind to that now that Yeah, I got a hard HTML question for you. And that is, what is html5 web storage? Explain local storage and session storage. So what is they're looking for the differences between local storage and session storage? Oh, I've looked this up once. I've never used session storage. I remember like finding it in the dev tools. I was like, Oh, what's that? I'm gonna guess that the difference between local storage and session stories, they're both key value stores. However, local storage will stay with the browser. But session storage will be cleared on, like, on like a restart of the browser or something like that. You're just about there. But I'm going to need some clarification on when exactly a session storage - -32 -00:16:47,880 --> 00:18:17,190 -is clearly or is it when the browser is closed? When the tab is closed? I'm going to say, so when the tab is closed, now when the browser is closed, no, when new window when the entire browser is closed, like when you quit the you quit the browser. you reboot your computer, you do something like let's say you're smiling, let's say you have a chrome rendering bug preventing you from looking at the screen. No, the answer is, well, man, yeah, when the tab is closed, you're very close. Not when the browser is closed, although that will do it. It's just not the, you know, the main one No, no, but like if you so if you close the browser, you go close the website and go back that session storage will be will no longer be there just when the just when the tab itself is closed. And that's probably also handy. I wonder if you have two different tabs of a website open. If that would be separate session started. Great question. Very well, maybe that I bet we shouldn't. Oh, cool. Well, I learned something. I got stumped, though. stumped. dumped. All right. Is that it? That's it. All right. That was fun. We should we should do that again. No, we should do this. Maybe we should actually do this again. That'd be fun. Yeah. I feel like we need some more like real hard ones. Yeah, we need to find a new pool. Because just about all of these. I was like, Oh, he can answer this. I've heard him talk about this before. So yeah, we need some like expert level, like intentionally malicious questions. So. - -33 -00:18:19,560 --> 00:19:05,700 -Yeah. So in Douglas Crockford, uh, you know, JavaScript, he or eloquent JavaScript on page 34. He says, What stones eloquent job wasn't that story. And Stephen? Oh, look, well. Well, yeah. Crockford did, what did he do? JavaScript. I O. eloquent JavaScript is Martin paperback. I didn't know that. What book did stoyan stefanov JavaScript design patterns? That was it? You know what, it's funny when I was saying that I was like, JavaScript the good parts was coming out of my mouth and I was like, no way that's not JavaScript. The good parts eloquent. Yes, I corrected myself into that not the first time you second guess yourself today, Scott, I trusted my heart twice in my heart has led me astray. - -34 -00:19:08,250 --> 00:19:15,210 -Alright, let's wrap it up here. Thanks so much for tuning in. And we'll catch you on Wednesday. He's face - -35 -00:19:17,040 --> 00:19:26,820 -head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax278.srt b/transcripts/Syntax278.srt deleted file mode 100644 index 9e428c4b6..000000000 --- a/transcripts/Syntax278.srt +++ /dev/null @@ -1,408 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,849 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:10,530 -development treats out there. strap yourself in and get ready. Here is Scott solinsky and Wes Bos. - -4 -00:00:10,559 --> 00:01:12,750 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats today we got for you another potluck. We are just wrapping up the summer Scott and I are just recording like crazy sort of going ahead so we can take the summer off of recording. And we're like, wow, we've got a lot of potluck questions that we have yet to answer. So we thought we'd throw another potluck in some really good questions to talk about MDX today, ordering CSS? Do you ever use the second property of our second parameter JSON stringify some really neat ones today. So stay tuned for that. We are sponsored today by Oh, this is funny to companies that I am using in my next course. But totally unrelated to being a sponsor. First one Sanity, they are a structured content CMS. Second one is Netlify. They are the hosting for your jam stack and serverless functions and all that good stuff. We'll talk about them partway through this episode. How are you doing today, Mr. szalinski? Hey, I'm - -5 -00:01:12,750 --> 00:01:48,720 -Scott Tolinski: doing good. Getting getting some dev work done, get my next course planned out. And for the first time in a long time, I like eight or nine course options that I wanted to do, which sounds ridiculous, but I keep a long road map of all the courses I want to do and then it's like yeah, okay, if I ever need a rainy day that I have this list of courses to pick from or whatever if there's not one I'm super excited about. But the problem for me right now is that there's just five or six I know I said more than that a second ago, but things that I really want to do. So I'm like having a tough time picking which one not because I don't have options because I got too many good options. - -6 -00:01:48,809 --> 00:01:51,480 -Wes Bos: What are the options you can use? Can you share the secret? - -7 -00:01:51,480 --> 00:02:04,590 -Scott Tolinski: It's a secret? Unfortunately I don't want well i would i don't want I don't want too many good good course ideas here. Wes if you need some if you need some good course ideas. We can talk after the show. - -8 -00:02:05,039 --> 00:02:09,240 -Wes Bos: Oh yeah, I've got thousands but I'd love to hear what you what you think. - -9 -00:02:09,529 --> 00:02:12,470 -Scott Tolinski: Yeah, no, that was that was simply just a joke because I know you have. - -10 -00:02:15,410 --> 00:03:53,759 -Wes Bos: Alright, let's dive into the questions here. First one is from Vinny Howdy, I'm curious to know what you guys think of MDX, MDX, jazz calm, I'd love to learn more about the pros and cons if you guys have had a chance to use it. So MDX is marked down. And jazz sax sort of put together. So what it allows you to do is, if you have a website and you want to write content, you can write your content in markdown. But then you can also just use regular react components right inside of your markdown file. So if you wanted to embed a YouTube video or you wanted to throw in a react component, or you want it to it sky's the limit, right? Like I like a graph is probably a really good example where if you wanted to put a graph in the middle of a blog post or something like that, you could do that with with MDX and I personally used it for my own website. And it's awesome. It's very easy to work with huge plugin ecosystem available for MDX. So, if you want to do what's the underlying layer for it, there's there's like a, there's like a package underneath MDX that allows you to use all of these different markdown plugins for it, which is really cool. It's one of those things where in order to get it working, you need like 15 different packages, which could be a downside, but because of all the packages that surround the ecosystem, you can get it to do literally anything that you want layouts for your website, things like that. So big, big fan of MDX myself have used it, Scott. Yeah. Hey, - -11 -00:03:53,759 --> 00:04:42,930 -Scott Tolinski: I don't know if you notice I was there when they announced it at zite day as Oh, yeah. I wonder if it's gonna be versaille day now. But it's a zite day, I was speaking at Site day. And they had a really great initial like, was the keynote, they had like a really great keynote, where Guillermo and all sorts of Tim and all sorts of the people from the next team, we're all sort of launching a whole bunch of cool stuff. So it was it was a really cool thing. I was almost instantly excited about MDX because, when you first hear about it, you think, Okay, well, is that really that special? But then you think, Wow, actually, the possibilities for working with us are very, very large. I don't know if you have ever written slides in code. Do you write your slides in code you do you write your slides in slide software? Okay, - -12 -00:04:43,170 --> 00:04:47,910 -Wes Bos: I've written every slide deck I've ever done has been in encode as well. - -13 -00:04:47,940 --> 00:04:51,060 -Scott Tolinski: What do you use typically for that, because I typically use spectacle. - -14 -00:04:51,300 --> 00:05:37,410 -Wes Bos: Oh, cool. Yeah. I like for four years. I've used just html5 slides. jass, which came out like I think like it came out of Google. It In like 2012, or something like that, and I've just been building off of that forever. And I've tried using a couple different like frameworks and plugins. And I always get like, an hour into trying to like make it work and to get it to work properly. And I don't know what I'm always get frustrated with it. And I just scrap it and say, Look, I also just want my old thing back. Because I have like this thing where I write the the slides in, in Jade, I have a markdown plugin in there. If I want to, if I want to write markdown, it will convert it for me, but maybe I should revisit that at some point. - -15 -00:05:37,470 --> 00:07:46,350 -Scott Tolinski: Yeah, the reason why I bring it up at all is because one of my favorite projects using MDX is MDX deck, which is basically creating a slide deck in MDX. And this was one of the first projects that made me say, Oh, this is so good. Because you do you have the ability to quickly and easily delineate a new slide just by like three, what is it m dashes or three dashes by three dashes? It creates a new sign Oh, cool. Yeah. And create some your entire slide deck just like absolutely nothing. And sometimes when people think about writing code and didn't make a slide deck, they get like, Oh, I don't want to do that. But, man, this is simpler to me than writing it in an actual spy program, because all of your data sort of lives separate from the, the visual presentation of it. So you can look very plainly at all of the words and see if the words are what you want them to be. So I really like MDX deck. I've been using this for a little bit. And one of the things I really like about MDX overall, is that it seems to have like caught on conceptually, where it's not just a react thing anymore. So there is a smelt MDX, called m d specs. And it's every bit as cool as you'd expect it to be. It's fantastic. There's also from what I saw, there was Vue JS versions, but I have not used Eve, I have not used Vue JS with MDX before. But I think that's like the perfect use case for these new classes, static site generators, where you're writing everything in markdown, and it's like your whole blog post, and then Oh, crap, I need a chart. Whoo, this gets really tough when I need a chart in this page, right? Oh, now you can just drop in your chart react component directly in your MD file. So no, I'm a huge fan of MDX and typically use it whenever I can. In fact, when I first created the new Scott Tolinksi comm at this MV specs was not in its current state. So I couldn't necessarily just use it. And I was really bummed out because I wanted to use MDX in my blog. So big fan big. Yeah. - -16 -00:07:46,680 --> 00:08:47,070 -Wes Bos: But one of the thing I really like about MDX is you can pass it your own components. So as markdown renders out code blocks, and h1, through h6, and pre tags, and block quotes and all that stuff. In most markdown parsers, they'll just give you like a class of code or something on that. And with this, it allows you to step in and say, when somebody renders out a paragraph tag or a code block or a blockquote, let me step in and use this component instead of it. And then you can, the component will give you all the props of that component, it will give you the actual content of the component. And then it's just a react component from there and you can return whatever HTML and CSS you want from that specific thing. And I use that a lot in my own website, because I don't have to, like, add classes when I'm offering something, or I don't have to I don't have to add extra markup when I'm trying to author something. It just it just gets swapped out on the render. - -17 -00:08:47,490 --> 00:08:57,529 -Scott Tolinski: Yeah. Cool. So next question is from Johan Shaka. Hello, Mr. Wes Bos and Mr. Scott Tolinksi. Hello, Mr. yohann. - -18 -00:08:57,960 --> 00:08:59,029 -Unknown: Great podcast, - -19 -00:08:59,039 --> 00:10:35,539 -Scott Tolinski: I learned so much from it. Where would you go to put the business logic in Vue js, middle or large scale applications. I try to put business logic in a store, but it makes it hard to maintain such a store even with spinning actions, getters, mutations and files, I end up using vanilla JavaScript files where each file is a class Singleton. I was wondering if this is a good solution, or do you have a better alternative? Now, Wes, I know you don't do a ton of view work. But I included this question specifically because the answer is there Durston. There's nothing really different here from the React world comparatively, right? You still have components, you still have business logic and you still have like state and all those things. So that said, Johan I usually when I think about this stuff, I'm not creating that many abstractions. I guess I am occasionally but I cannot. I look at class single 10 just to manage business logic for things I don't know to depart from the whole componentized universe that we're living in now allows you to sort of write your business logic right there near the template, especially with this latest class of frameworks, whether it's view or react, right? You write your business logic sort of right there in the component, and then you can reuse that component wherever you want. So granted, that's a very simplistic look at it once you start to think about things like, like we have Redux, right, Redux has a calls an action, that action, what - -20 -00:10:35,539 --> 00:10:36,059 -Unknown: is it called - -21 -00:10:36,059 --> 00:12:02,279 -Scott Tolinski: a dispatch, dispatch an action? Sorry, you don't run an action, you dispatch an action, then, and then that performs another operation, which in turn will return a new set of data? I mean, it's like this is abstraction, abstract universe kind of thing. Right? So the answer here is like, where do you put this kind of business logic? The answer is to follow community guidelines in terms of how people are doing it in view. And so what I said what I mean by this is, because this sounds like a cop out answer, what I mean is, is there it just look at the React world has 1000 different state libraries, there's 1000 different places to put your application state manager state and your business logic. And one of the main ones is view x view x, exactly as it sounds, view, x view j s.org. And view x is sort of like their their Redux style, state management, right view action state. So what I would do is I would follow something like this, and not really try to invent the wheel yourself here, by creating class Singleton's or whatever, I wouldn't try to reinvent any sort of wheel here and just go ahead and use some of the large examples of large scale Vue JS apps that exist out there, or at least those sort of guidelines in terms of how to build that. - -22 -00:12:02,760 --> 00:13:54,600 -Wes Bos: Beautiful, I have nothing out there, I think you nailed it. Next question we have here from amber Williams, I commonly find myself engineering complex programs and left flabbergasted on how to express these ideas to other people when the need arises, I need to explain to them and remember why I did it in a specific way. How can I get better at conceptualizing intricate design patterns or functions? as well as have a better recall for these abstractions? That's, that's, that's a great question. Because sometimes, like you come back to codebase, like, a year and a half later, and you're like, Wait, where? Where was this, like, when you you're following around functions for 20 minutes, just to sort of understand what's going on. And honestly, there, I think the important thing, and Scott Scott has it here is just write lots of comments. There seems to be this, like, anti comment wave going around lately, where people say like, your code should speak for itself. And I get this like on Instagram. I've gotten this question from newbies, like many times in the last couple of months, and just say, like, no, like, comments are absolutely fine. It's, it's important to be able to write down how these things work. And if it if it is even even larger than that, like you have this idea of where you have, you have one function that generates a bunch of stuff and the business logic in that act gets passed into it, that will should probably live inside of a wiki, especially when your head is in it, just because it might make sense to you right now. But if you come back to it a year later, or even more, somebody else has to come back to it a year later. It's important to have that documented. So stick it in a comment or an or and or stick it in a GitHub wiki or notion or something like that, that will explain how it all works. - -23 -00:13:55,110 --> 00:16:05,970 -Scott Tolinski: Yeah. And sometimes those comments, they seem unnecessary at the time, like specifically comments around maybe failed attempts to solve a problem. I don't know about us. But have you ever had a situation where you're you chose not to do one thing one way specifically because you realized it was a bad idea at some point, right? You chose not so Okay, I'm gonna do this a different way. And then you leave the code or you come back to it and you say, Oh, hey, this other abstraction of this idea seems like it would make a lot more sense. Why don't I just do it that way? Then you start to do it that way, refactoring or whatever, and then run into the exact same use case that you had already solved before. You're like, Oh, yeah, this is why I couldn't do it this way. This is why and sometimes I leave comments like that into my into my code. This is like, by the way, a future you might try to do this. This is why you don't want to do this. I understand this code looks weird. But until you know full rewrite is in order. It needs to be done this way. Specifically, you know So, don't don't be like, I'm pretty busy with my comments. Like I write very, like very direct and explicit comments. This is what this thing does, whatever. But sometimes you can be a little fun with it too. And in fact, one of my favorite VS code extensions, which is better comments, allows you to have comments that have different coloring, right? Yeah. And so the cool thing about that is if you do like double forward slash, and then maybe I think one of them says a question mark for questions, or an asterisk turns green. So I'll use things like the asterisks to be like, notes to user, this is why this does this way. Or, you know, there's an exclamation point for danger to dues, but I only used to do for actual to dues in code. So I would recommend using just better comments, but writing more comments, better comments overall. And don't be, don't be afraid to write notes to yourself in the code. That's not just, oh, this is you know, the this component goes and fetches the data, whatever explaining what the code Yeah, maybe explain a little bit more conceptually, to - -24 -00:16:06,869 --> 00:16:59,850 -Wes Bos: even like, this is not something I've done. But maybe even just a quick little, little video, grab the, there's a free app called cap, k AP. And as just record your microphone and your screen really quickly, throw that up to Dropbox or even, I'm not sure where else you would host it somewhere, you can host videos, YouTube private video, when your head is in it record a quick little video. And that will probably be super helpful. I do that for a lot of like my clients that build websites for I would just throw a screen recorder on and go through the entire website showing how to do something. Because I might forget specifically how to update us content type or something like that. And it's so much easier just to throw them a video Two years later, then have to like, get on a call and screen share with them and all that annoying ness. Yeah, - -25 -00:17:00,149 --> 00:20:08,040 -Scott Tolinski: yeah, I did this for a little while. And I still do this on your level of tutorials, code or blogs, or I do like a video just explaining one small section of the code base and why we're doing things a certain way, or why it's cooler and awful, or whatever. But it does make it really easy. And I've started to lean on this a little bit more heavily knowing that I like have the ability to quickly and easily record screencasts. So it's like, oh, man, that's like a core competency of mine. Why don't I just record a screencast of something that I am having a hard time with or want to really explain if I want to explain some code to somebody else. Like it makes more sense for me to screen, record that video and share that video with them. Like let's say, Eric wants to work on a new feature in this one part of the code base that he hasn't touched before, hey, it might make more sense for me to record the like a walkthrough of the code and what's important and what's not important because that that will save people a ton of time getting up and running with it. Yeah, definitely. Something cool thought there was. So next question is from Rafael Davis Hernandez. And he asks, Can I get some recommendations for a junior dev who has mid experience, but has not managed to complete projects and desperately needs a portfolio? What are five projects that you would recommend to build that would significantly help getting a job as a front end developer and why? Okay, so the actual end result of the project whether or not this is like a video, movie catalog, the database or a store, whatever the actual end result, what is the theme of this thing does not matter if somebody does like a Reddit clone or something like that, I don't care. I don't care about like what the actual site is. But what I care to look at is like the core skills involved in the application. So something that hits an API, something that does basic CRUD operations, something that needs to look nice on mobile, something that has UI refinement, whether or not these are animations, or good looking CSS, or like a pixel perfect implementation of a design. Those are all the skills you're going to be using day to day, right. Especially I know this, it seems like kind of ridiculous, but pixel perfect refinement of a design that somebody else created. Hey, I've worked with so many devs who will spit out a code and I'll look at the Photoshop you look at their their their version, the web version, just say do these look the same to you? Like I don't don't mean to be rude. But these do not look the same to me like what this you know, this line this pixels like four, four pixels here where it's three in this one, like sometimes I wonder if people just take a look at the P PSD and or the sketch file and just like guess when that information is all right, they're in those files. So I would care less about whether or not this app is a calculator or something like that, but I would care more to really just show those foundations. In API, basic crud, nice on mobile, UI refinement, doesn't run like total dog. Sh it. That's it. - -26 -00:20:08,190 --> 00:20:43,890 -Wes Bos: I love it. That's super key. I think those are great suggestions. Just the most important one is just finish something, take on something small, and make it polished and done. And then that's, that's way better than the 40, the graveyard of 40 projects you started but had to quit. Because for whatever reason, it got too hard. You, you ran out of motivation, because like, I know, sometimes I look at at people, and they just finish all of their projects. It seems like they're super productive, but it's just that they're able to push through that last 10% and actually finish the whole thing. - -27 -00:20:44,300 --> 00:21:08,880 -Scott Tolinski: Yeah, it's actually, it is funny to think about that, because I'm like, historically, not a project finisher. Like I get to that 90%. I'm like, Okay, let's get on to something more exciting. But that's like one of the things that like level up tutorials has allowed me to do, it's allowed me to get that feeling while maintain actually shipping stuff because I have to ship something new each month. So it's like, Okay, well, if I get through this little bit, I get the reward of getting to do something new next month. - -28 -00:21:11,160 --> 00:21:19,380 -Wes Bos: Next question we have here from Andrew, thank you for a phenomenal podcast, you're adding an incredible value to the community day in and day out. Wow. Thank you. - -29 -00:21:19,410 --> 00:21:21,350 -Scott Tolinski: Thank you for an incredible question, Andrew. - -30 -00:21:21,560 --> 00:21:38,220 -Wes Bos: Yeah, I am now working on building a Minesweeper game with react. You know how on the computer, you right click a flag to disable the cell. I'm just thinking about that. Like, I don't actually think I know how Minesweeper works. I played it a whole lot when I was a kid. But do you want to click stuff? - -31 -00:21:38,330 --> 00:22:12,990 -Scott Tolinski: Yes, tell me. So the whole goal of Minesweeper is to find the mines to find these bombs that are hidden, right? So you click one square, and that tells you like a number that number whatever, I'd say it's one, that means that that square is touching one bomb. Touching another bomb, it like gives you a whole bunch of more squares depressed for free until one of them is touching the bomb. So you have to use these sort of logic and deduction to sift find, where are all the bombs based on these like sort of numeric rules, you're given up the landscape? - -32 -00:22:13,770 --> 00:24:22,230 -Wes Bos: bomb explanation? So the question is, you know how you hold a computer, you right click a flag to disable a cell. I am thinking about doing a press and hold on mobile instead. This is I'm really glad that like you're building or thinking about mobile as well, because sometimes like you build saying, like, yeah, it doesn't work on mobile. But you could probably get it working. I'm not sure how to do either right click logic, or press and hold, how can you listen for these events in react and need some help and guidance? Well, the present hold is is pretty simple in JavaScript. So the way that it works is you create like a, a flag Boolean, where it's called like is pressed. And and you set that to false. And then when somebody does a mouse down event, so not not just listening for a click, but listen for mouse down event, when that happens, you turn that flag Boolean to true, then you set a timeout, where like, maybe 400 milliseconds, and then you say after 400 milliseconds, if that flag Boolean is still true, then that means that they're still holding their finger down, because the flip side of that is you listen for a mouse up event as well. And when somebody does a mouse up event or a touch end event, I guess in your case, you would set that flag Boolean to, to false. So when somebody touchstart, set it to true, set a timer, after 400 milliseconds a second check if that is still true, then if that is true, then then the user is obviously still holding their finger down. And then you can go ahead and fire off like I would probably just fire off a custom event called long press or something like that. I'm sure there's a JavaScript polyfill that you can you can add in and you can just listen for the long press event. But that's that's kind of how it will work. The other flip side is how do you listen for a right click that is an event called context menu. So instead of listening for click listen for the map called context menu, and that will give you a right click event. Hmm, - -33 -00:24:22,950 --> 00:25:10,800 -Scott Tolinski: yeah, I think like mouse and pointer events in terms of like, clicking or touching or whatever. Those things are underrated skills in the moment, you need to pick them up. I think they're, they're exclusively done in modern frameworks, right? I think that's one of the better things that you can do is write custom stuff, especially specifically I think about like using react spring or something to do like dragging animations or those types of things. Are you in frame or motion, right? And I think that like having those type of interaction skills are definitely something that you'll get a lot more use of as you Get into more and more interesting developer problems. So very cool. I highly recommend you, you checking that out man that Minesweeper sounds a lot of fun, share it with us when it's done. - -34 -00:25:11,340 --> 00:26:00,840 -Wes Bos: kind of want to build it. Now, one more thing about that I just remembered is use pointer events instead of mouse and touch events. Point events are the new speck in JavaScript that cover both touch, and mouse and we controller and all of that things. And then one more thing is one, like little gotcha you have with that is if you press down, and then drag your finger off of the the thing and lift up. Oh, yeah, yeah, it won't trigger a pointer up event on that element. So you often have to listen for a pointer out event. And that is when the the pointer the finger, or the mouse has been moved out of the box. So if that's the case, then you also set the is pressing to false because they've essentially move their finger off of it. So they're no longer pressing - -35 -00:26:00,840 --> 00:26:05,310 -Scott Tolinski: it. Or you could have like a pointer up on the container, right? Yeah, - -36 -00:26:05,340 --> 00:26:09,420 -Wes Bos: yeah, as long as the container goes all the way to the edge of the screen, - -37 -00:26:09,450 --> 00:26:12,900 -Scott Tolinski: right, or the body, if you want, if you want to have that on the body. - -38 -00:26:13,350 --> 00:26:27,330 -Wes Bos: If you were to like click down in Canvas, and then drag your mouse out of the out of the even out of the browser, and then click up, then you come back and the browser still thinks that you're looking down because you know, you never fired that. pointer up event. - -39 -00:26:27,510 --> 00:26:56,850 -Scott Tolinski: Yeah, there is. It's funny, I actually just hit this same same thing when I was building my own gesture based stuff in spelt. because there wasn't like a, I don't know if there's like a felt gestures library, because you can do so much just straight up stuff is felt. So either way, I was just doing like, the gesture stuff with it. And it was building one of those like, swipers, where you not like, not like the Tinder swiper. But like, more or less, like when you want to delete kind of swiper that kind of swiper Oh, yeah. Oh, that's - -40 -00:26:56,850 --> 00:26:59,160 -Wes Bos: one I like, Yeah, I know, - -41 -00:26:59,160 --> 00:27:41,640 -Scott Tolinski: those projects are needed way easier than you would expect them to be. Given that, you know, it's a complex functionality, but it's really pretty easy, you just trigger that, that press down, animate the value, and then determine how far you've moved it and use that value to trigger an event. Very simple. Okay, so building these kind of complex things. It's just, it's, it's a lot of fun. And what can you imagine a service request? Can you imagine a service that is gives you the ability to create custom content types, and custom forms? using your own cool react stuff? Like maybe gestures, or any of those things? Can you think of a service like that? - -42 -00:27:42,210 --> 00:28:53,760 -Wes Bos: I can, I can think that you would use Sanity for that. So if you want to build a headless CMS, you can go ahead and grab Sanity. And the cool thing about Sanity is that Sanity Studio is their, the the CMS that you'd expect to interact with and change your data types and update and delete and things like that. But it's a react application that you have access to. So if you want to be able to make your own custom, swipe and delete on specific elements, because that doesn't exist in in the cmms. And you can go ahead and make your own custom inputs, which is really cool. I just recorded the video yesterday for my upcoming Gatsby core. So us creating our own custom input. It's really cool because they give you all the handlers and the helper functions and the the input values. And you just have to handle binding the input due to these methods yourself. So check it out your next project. If you need a headless CMS for your project, check it out@sanity.io forward slash syntax. And that's going to get you double the free usage tier. Thanks so much to Sanity for sponsoring. Cool, - -43 -00:28:53,790 --> 00:29:06,570 -Scott Tolinski: yeah, I want to build my own interface for Sanity, where if I do like a two finger swipe on a component, then it will just delete all the collections that I have a be cool. - -44 -00:29:08,340 --> 00:29:26,880 -Wes Bos: Yeah, that you could totally do that. I could use pointer events. I think pointer events tells you how many What do they call it? Like not fingers? Because you could use your toes? How many appendages digits are on the digits? That sound like four digits, man - -45 -00:29:26,880 --> 00:29:48,860 -Scott Tolinski: digits, hey, well, I wouldn't when I was in biology. In high school, I had to do a report on extra and missing digits. So digits, sometimes sometimes you have more digits than five. And maybe that that should be something to think about. Okay. Don't implement it. Like a - -46 -00:29:49,710 --> 00:29:53,040 -Wes Bos: secret trick, like a little easter egg in your application, a six - -47 -00:29:53,040 --> 00:31:11,340 -Scott Tolinski: finger swipe where you have to actually use your toe if you don't have an extra digit. Cool. So next time question here comes from Matt divaris says, what are your thoughts on sales j s as a Rails equivalent framework in JavaScript? I recently they recently released a version 1.0. And I'm wondering if I should start using it in projects are wait to see if it pans out. So the reason why I picked this project, this question in particular is that sales has been around since like, the start of note, pretty much. So when I read this, I was like, Wait a second, I just had version one and ensure Nova did I have not really had sales on the radar for a very long time, because it was like sort of along with happy and express and sales were like, different versions of the the like node, quote unquote, framework that you could use, despite the fact that Express is just like routing, right? So I personally, am very surprised to hear that this just hit 1.0. And I have not looked at it in several years, because I just figured it was its own thing. its own little community of people using it. And I was surprised to see that the progress is still been going on, but that it was only at version one. What do you think was? Yeah, I - -48 -00:31:11,340 --> 00:31:19,260 -Wes Bos: think it's it's probably fairly stable. I don't think that it's going to change on you anytime. anytime soon, which is good. - -49 -00:31:20,220 --> 00:31:29,400 -Scott Tolinski: So got 21,000 stars on GitHub. So it's certainly not a Oh, yeah, it's a it's not a no young young pup here. - -50 -00:31:29,610 --> 00:31:37,230 -Wes Bos: So it, this doesn't do like, this is not like a front end focus framework. This is the node framework, right? - -51 -00:31:37,860 --> 00:31:44,850 -Scott Tolinski: It is the rails of JavaScript, hence the name. Oh, yeah. sales. So it does do a front end. - -52 -00:31:45,540 --> 00:32:05,400 -Wes Bos: But it's not like it doesn't have like a specific like front end like in react or anything like that. It'll just spit out a it does the back end logic, your REST API, your database interactions, your controllers, MVC, pattern, all that, but it doesn't do it doesn't care what you use on the front end in terms of your, your react application. Is that right? - -53 -00:32:05,430 --> 00:32:10,440 -Scott Tolinski: My understanding is that you can use anything with it that could be wrong. Because IDC - -54 -00:32:11,430 --> 00:32:13,200 -Wes Bos: exam from an agnostic? - -55 -00:32:13,230 --> 00:32:48,240 -Scott Tolinski: Yeah, so they don't care what you use. I would use sales. It is mature. It has existed for a long time. There's a large community that that I don't know, I know surprisingly little about this, despite the fact that I've probably tried it at some point in my life, maybe, you know, four or five years ago, whatever. I probably tried it at some point. So would I use it? Sure, I would absolutely use it. There are other options available for this type of thing. In case you're wondering, what is it? What's the new one right would is that the new one or Blitz? Which is next? Jesse's an extra - -56 -00:32:48,360 --> 00:32:55,470 -Wes Bos: sticker in the mail the other day from them who got wrecked put stickers? Yeah. Well, they're just had like a form on their website. And I filled it out. And they came. - -57 -00:32:55,950 --> 00:33:01,500 -Scott Tolinski: Oh, man. So what is it? Like? Little pine cone? Is that what it is? You got? Yeah, - -58 -00:33:01,770 --> 00:33:05,460 -Wes Bos: it was a I thought it was a hop, hop. - -59 -00:33:05,520 --> 00:33:13,610 -Scott Tolinski: Well, that doesn't make any sense with the redwood. jL it's not hopping. It's not it's not hop t j. s. That sounds pretty dope, though. - -60 -00:33:14,190 --> 00:33:32,820 -Wes Bos: It's check. Yeah, you're right. That's cool. Um, the only thing I would say about the sales is that it doesn't look like it has a graph qL API. So you don't absolutely need that for your application. But if you are going full hipster, you're gonna need a graph qL API for that. - -61 -00:33:34,140 --> 00:33:54,780 -Scott Tolinski: Excuse me, this project is okay. But you're gonna need a full graph. qL API and graph QL. All the way. By the way, if somebody wants to take hop d.js it's available valable project namespace II hop D you've never had hop d? No. hlp ta that seems like something that would be right up your alley, Mr. Buddha. - -62 -00:33:55,080 --> 00:33:59,670 -Wes Bos: Like I feel like craft beer brewed like tea. Ooh. So it's, - -63 -00:33:59,759 --> 00:34:21,330 -Scott Tolinski: well, it's Yeah, it's not an alcoholic, or at least not really 00. Like it basically is tea but it tastes like hoppy. So it's kind of like tea. If you can think about it. I've had a, I don't know, I've had a couple of brands here that they sell it at one of our favorite poker places. So I'm not saying I'm into this, this - -64 -00:34:21,330 --> 00:34:24,690 -Wes Bos: looks like it will cost $11 for a can and I would love it, - -65 -00:34:24,779 --> 00:34:31,190 -Scott Tolinski: you know, walk over to Whole Foods, you're gonna go to that small little refrigerator. You're gonna pick yourself up that? Happy. - -66 -00:34:32,360 --> 00:35:12,980 -Wes Bos: Happy. Alright, I'm in. Next question we have here is from Kenneth lyerly. Thank you for the pronounciation there again, how do you go about creating reusable react components reusable from project to project? Do you create packages and publish them to NPM? Or do you have another method for storing code or components that you will likely need to use again, so if it's a reusable component that I need in multiple cases, projects, I will either just copy paste it. Or if it's like, I'm like, Okay, this needs to be properly done across all the projects, then I'll go ahead and just bundle it up and publish that to NPM. - -67 -00:35:13,560 --> 00:39:37,880 -Scott Tolinski: Hmm, that's a, that's a little simple for me Why? So I got to do it. And what you need here is you need to learn a mana repo. And then you need Yeah, actually, so I've been down this road so many times, because I have such a hard time with this. And I still haven't found the best solution. I know saying this people will have their best solutions. I've tried a lot of different solutions. Because somewhere along the line, I realized I make really, really helpful modules for myself that can be reused across projects. And I've started doing that, for instance, we open sourced instead of like, open sourcing level up tutorials, comm we started to open sourcing aspects of it. So we open sourced our forums library called fresh, and so people can use fresh and then we open sourced our dragon dropper, which called dropping, I have one called animated elements. That is that actually, animated elements is a package of mine that I really should make a little bit more robust. But you know, it's timing here. And everything is difficult to do these kind of projects to move this up, especially when it's such a pain in the butt to do exactly what you're talking about. Here. I've found this to be such a tremendous pain to work on a project locally, use that version, in your application, whatever the up to date, modern version is, and still keep everything separate GitHub repos, those kind of things. I do it right now through separate repos using NPM link, or in my case, the yarn link. And it's just not good. I like occasionally run into some issues where the linking gets all messed up. And it's like, not transparent. There's nothing in your package. json, you have no idea but it's being linked or not. And it can just get really, really super annoying. So then I tried the whole learning thing, and man learning is not fun. I'll tell you that right now. Props to the learner people. People out there working on mono repos, man, this stuff is tough, tough, tough. It at least in terms of like getting everything the way you want it. Specifically, I have a bunch of like custom Babel config stuff that I, I really want to hold on to that it makes some of that a little bit difficult. So what's the best way right now the best way for me is unfortunately, using yarn link. Another thing I've started to do recently is in Meteor, you can have local packages just by creating a package director and writing a package dot j. s file not package JSON, it's like a meteor thing. And then you can publish them separately, I've been doing those as a git sub module where you just don't commit anything in the packages folder. And then you keep an entirely separate Git tree as a sub tree of your other one, it is just, it's also not a lot of fun. But they're both requires a bunch of a bunch of, you know, running Git commands until everything works. And then you can be on your way I'm interested in whatever people have for their best workflows around creating local packages. I typically use TST X to create my local react packages are my, my react packages, but I'm interested in seeing what people do beyond the the sort of yarn link or NPM link. And don't just learn a nap because it's not good, but because I've already been down that route. Alright, next question is from trick PR. What are your thoughts on the Shadow DOM custom elements? would you use them in your own projects, I'm getting more likely to use them in my own projects as time goes on here. But that said, you know, React is still more useful, spelt is still more useful. And probably what I find at the end of the day, is that I would prefer to build something in spelt compared to Web Components right now. And, you know, remember, do you remember like, way back? When you first started learning react, when there was like, sort of, Oh, and by the time web components are ready, maybe this can even output to Web Components? You know? Yeah, that was like going on, because polymer was was growing at that point. And Angular had the same sort of idea. But it never really happened, because Web Components just never got to the level of usefulness that reacted, or any of these things, and not that the React team was ever planning on doing that. But that was always sort of this idea that loomed in people's heads. It's like, Oh, well, we write our things in components. Maybe we can just convert these to web components one day. - -68 -00:39:38,210 --> 00:40:03,380 -Wes Bos: Yeah, that was kind of a bummer that I'm not necessarily a bummer. But I think like the people have spoken. The fact that we're not all using web components, and we're all using some sort of framework is that the framework figured it out and how to do it better. And as someone who loves vanilla JavaScript and the standard of the web that that hurts me, but I'm not also using it myself. So yeah, cool, but I just rather use react. Do - -69 -00:40:03,380 --> 00:40:46,530 -Scott Tolinski: you know what I would use if I wanted to use web components? I would use lit HTML, which is part of just polymer lit is basically a templating syntax that allows for, like, individual updates. And it outputs to because it's polymer outputs to web components. You have to use polymer with it. But Hmm, it's just not. It's just not like, great, great for me, I don't know why it just, it's just not there to the level of ease of use. And in whatever maybe it will be, maybe they'll be this like, perfect framework, polymer kinda does a little bit of these things. It's just a polyfill. But maybe, maybe this lit HTML, which seems to be picking up steam will actually have, you know, some some energy behind it and those sort of ways. - -70 -00:40:46,859 --> 00:41:52,710 -Wes Bos: Next question from Mark volkman. Seems like a lot of questions come from Mark volkman. Very good ones. Um, yeah, I feel like we've said that name a couple times. So yeah. Good On your mark volkman. Next question from Mark volkman. is how do you organize CSS properties within a rule? And why random alphabetical, logical grouping, etc? we've answered this a couple times, but I thought we'd answer it one more time. I don't have any sort of system. I'd like to keep my CSS Grid stuff together. I like to keep my positioning, trouble, top right, bottom left together, like to keep my margin and padding together, and pass that that that's it. I've seen people who do it all alphabetical, or it doesn't make a whole lot of sense to me, I've never had a like a, like, they always say like, oh, there's cognitive overload, where you look at something and you have to figure out where it is in the selector. I'm like, No, I just look at the selector and I add it to beside the property that makes sense. So I don't really have a system other than just try to keep like things together. And everything we're usually works out. - -71 -00:41:52,859 --> 00:42:03,030 -Scott Tolinski: Yeah. I use. I don't know, is this built? You tell me Wes? Because I'm can't remember if this is an extension, or if this is built into vs. Code, the sort ascending? - -72 -00:42:03,650 --> 00:42:13,860 -Wes Bos: Yeah, it that is built into vs. Code. If you select the lines, yeah, it will do it. But I'm sure there's like a prettier plugin that will automatically do that for you as well. Yeah, that's - -73 -00:42:14,069 --> 00:44:57,360 -Scott Tolinski: a good point. I wonder if there is because that's something that ever so often, I'll not like have a kick of but look, if I'm in a component, and I'm like, buttoning it up, and I'm straightening its tie, and I'm, you know, tucking in its shirt, coattails. When I'm doing those kind of things, I will find a big list of things, whether it's CSS, or maybe it's like props being destructured, or something like that. And I will select those lines, and I will do what is a command? Or what Sorry, it's a, you know, command P and then do sort and or Command Shift P and then sort lines descending, in fact, a no joke, Wes, if I just do Command Shift p, the very first recently used command is sort ascending, because I just use it all the time. So when I'm like going through my code, go through use this sort of sending, and it probably makes absolutely no difference at all, but it makes me feel good. So that's why I do it. No one else makes you feel good as far as my website and Netlify. Because it's so easy. Let me tell you. I'm an original Netlify fanboy over here. And it absolutely shows we talk about Netlify all the time on this show. And I'm so glad to be talking about Netlify. Again, I host everything on Netlify. So if you want to host any of your front end code or code with serverless functions or anything like that, you want to check out netlify.com forward slash syntax and sign up. And people often tell us that like Dang, I had no idea Netlify was so easy it is so very easy. Whether or not you need to get a GitHub project just up and running in no time you got a sapper statically generated site or Gatsby site, any of that stuff, maybe just have a straight up HTML file. You know what I put on Netlify I put my my slides my MDX deck, I put that on Netlify just to have it available, right, you know, don't have to host it somewhere else or whatever, just throw it up on Netlify. It's so fantastically easy and free to get going that you won't want to throw up everything on Netlify that you have yourself just to just to experience it just to have it up someplace just to test it in production. And check it out. I mean, they work with just about anything. Not to mention, they have some very fantastic tools that I had to make some really more complex applications whether or not that's like super, super simple serverless functions, DNS based analytics, or a split testing, forms, media. It's just endless, the kind of stuff they're adding there. They're one of these companies that is constantly innovating on the web. And it shows because everyone who tries Netlify doesn't stop talking about it. So check it out. netlify.com forward slash syntax. - -74 -00:44:58,350 --> 00:45:44,460 -Wes Bos: Just a quick note on the left Last thing that we had prettier does not order your CSS properties, either logically or alphabetically. Because there's a whole, like, lot of little edge cases where nested or Yeah, or if you like, re if you have a mixin, or you have like flex flow and flex direction. And then, like the order of your CSS properties often matters, especially like if you've got like, like, you have your regular margin, and then you want to override just one of them the margin dash, right, and like, what if they, they've reversed and there's a lot of little cases like that. So not under the scope of prettier to do and like I would do it if a tool did it for me properly. But I'm not gonna spend any time doing that. - -75 -00:45:44,580 --> 00:45:48,810 -Scott Tolinski: So tool makers out there make Wes a tool that does it automatically? - -76 -00:45:49,320 --> 00:47:22,440 -Wes Bos: Yeah, I don't know that. There's I think there's like, a probably be really easy to make a proof of concept. And then the like, it would be death by edge cases, death by edge cases. Right. Yeah, totally. Next question from code finity. Also, another big submitter of questions. Have you ever used a second parameter of JSON string of five for anything useful, so I had to look it up. I was like, Oh, no, I the JSON stringify has the first pram is obviously the object that you wish to stringify. The second premise is called the replacer. I'll talk about that in a second. Then the third parameter is a string or a number for what you want when you want to use to indent. So you generally you could pass a space or a tab or you could you could do an arrow or pupilage if you want. And that's that that will neatly format your JSON based on indentations and what you pass it. The second argument of JSON string of phi is a sort of like a map function where it takes in the object value in the property value. And then you can return whatever you want for that. And quite honestly, I've never used it myself. And I was just like, looking at what would you use that for? And what it seems to be is if you want to filter values out before you string a file, and send it over the wire, so if for whatever reason, before you string a FIDE something, you needed to clean up an object, you could do it that way. And then also like Remember, we're looking at like, there's now function to string where you can convert a functions actual code to a string. - -77 -00:47:22,740 --> 00:47:24,930 -Scott Tolinski: Yes, yeah. Yeah. - -78 -00:47:25,200 --> 00:47:41,040 -Wes Bos: So like, I'm thinking like, Okay, well, like JSON stringify. Doesn't, doesn't parse methods. It just removes them. But I was like, well, maybe you could use a replacer function to add in the code of a method now, so maybe, - -79 -00:47:42,300 --> 00:47:47,100 -Scott Tolinski: yeah, I've not used this for anything useful. I didn't even know it existed. Yeah, I - -80 -00:47:47,100 --> 00:47:49,860 -Wes Bos: didn't know what it was until 20 minutes ago. - -81 -00:47:49,890 --> 00:50:36,450 -Scott Tolinski: Yeah. So no, I have not used it for anything useful. But it seems like it is possibly useful. I'm interested in hearing if anybody else has actually used this for anything in their day to day. Last question is from Nate Spillman here. He says, Hey, Scott, and Wes, my getting my first web dev job at an actual software company a year ago opened my eyes to the vast difference between educational repos and the absolute jungle, that can be enterprise basis. You see, Nate's dead on here, so Safari out there. So if I've also learned the importance of writing code that can be readable, later, ensuring any hacky workaround is replaced with a pattern seen elsewhere in the codebase, etc. My question is, are the resources, these sorts of topics for folks trying to break into the industry, a lot of tech topics are revolve around how to get your code to run, which feels like half the battle, where can juniors find more resources on robustness? And okay, so I think the reason why you're not going to see a ton of this, Nate is because it's, I want to say, a bigger problem than the JavaScript, right? These are conceptual issues, these are our planning things. So you, you most likely won't find this, this information around, like here, like take this JavaScript course. And all of a sudden, you're gonna learn how to write dry code, or correctly abstract code, whatever even that means. My my suggestions to you is to one get good at commenting to get good at functional programming. Three, read a bunch of books on programming. So there's, there's even one a repo that I always suggest called clean code, JavaScript, this is going to teach you a lot about writing, like maintainable code in terms of like, Hey, you know, these patterns, follow these patterns. Oh, naming things follow this kind of naming pattern in I don't want to like toot my own horn here. But I made a course called better JavaScript that really focused on a lot of these principles. It's like how do we name things in JavaScript to make them readable? Right. How do we, how do we name things? What do we do here? Where do we go? Where do we write things? What are the best ways to declare a function to make it readable? Last of all expendable, workable? I'm going to add a bunch more bowls here, but like, where do we go for this stuff? And I think that clean code reading some of those those classic programming books like the pragmatic programmer, those types of things will get you a long way. And don't just look in your bubble of web stuff, because a lot of the good information has already been solved by computer scientists who have been doing this stuff in a lot larger context for a long time. - -82 -00:50:36,690 --> 00:50:57,360 -Wes Bos: Yeah, I think you nailed it there. Not much else to say there. Let's move into some sick pics. I've got a really sick pic for you today. And it's a pool noodle. So like, these are pool noodles, like a thing like are in Europe, like always Euro - -83 -00:50:58,530 --> 00:51:02,400 -Scott Tolinski: in it. Yeah, I don't I do not know. No idea. I'm sure they've been around for - -84 -00:51:02,400 --> 00:51:45,630 -Wes Bos: a long time float. Like in Paris, they're swimming in the river. They're under the Eiffel Tower. They probably have a pool noodle. Anyways, pool noodle for I'm not sure if everybody around the oral nose. It's just usually what it is, is this big piece of foam that you throw in the water and you can you can float on it and play with it. And they often have holes in the middle. And they are awful because they they rip they get waterlogged. And we had a couple just like a couple years ago and we had just throw them out and I was like this is kind of a waste that we're buying new pool noodles every year. And we're at Costco, like three or four. But you're enjoying this - -85 -00:51:45,660 --> 00:51:54,540 -Scott Tolinski: I am I've just like dying that you're like it's kind of a waste that we're buying new pool noodles every year who's buying new pool? I can't even say that word pool noodle pool noodle - -86 -00:51:55,379 --> 00:53:06,060 -Wes Bos: so if you like we have got it so every day we go swimming and they're just always in the water things like that. So like I don't know maybe maybe three or four years ago we bought these these massive super heavy duty pool noodles and they are I'm not sure what's inside I would like that YouTube channel to cut one open and see what's inside but it's just like, like plastic dipped pool noodle and they're super super comfy. It's called the just Google fluid pool noodle and you can see what it is and we've had them for three or four years now and they are still perfect. They like support your weight like I can I can float on one as an adult and have my kids on my back and still be supported and I don't know it's just like the best pool noodle ever and we are won't be throwing them out every every single year. So seems like a really silly silly sick pic but I was like looking at them yesterday and I was like these things are awesome. And if you look them up online, they're like silly expensive. They were like I see them online for like 80 bucks and noodle which is silly but I thought we got all of ours at Costco for like 30 bucks which is still a lot but - -87 -00:53:06,180 --> 00:53:07,860 -Scott Tolinski: did you say in noodle - -88 -00:53:07,950 --> 00:53:13,950 -Wes Bos: fluid pool noodle or they're also called wow wow watersports dipped noodle. - -89 -00:53:14,010 --> 00:53:19,140 -Scott Tolinski: No, I'm sorry. You said I'm like looking them up in and then said a word that sounded like noodle. - -90 -00:53:19,980 --> 00:53:24,030 -Wes Bos: Oh, no. Okay, so yeah, cool. - -91 -00:53:24,060 --> 00:53:50,220 -Scott Tolinski: Well, that is a sick. I've never heard of these at all. Never heard of them. Um, we have a you know, in this little tiny kiddie pools like little kiddie pool that has like this giant whale, whale tail and the whale tail, you hook the hose up to it. And it sprays water out of it. And Landon has been loving it. Maybe he needs a giant pool noodle that's larger than the pool itself. But that's as much like action as we're getting this year. That's for sure. - -92 -00:53:50,820 --> 00:53:51,390 -Unknown: Alright, - -93 -00:53:51,390 --> 00:54:10,800 -Scott Tolinski: my sick pick here. Is there going to be a VS code extension? I'm going there. I'm going there. And it is easy snippet. I love snippets. I create snippet libraries for myself all the time whenever I do things. And I don't know why I never took the time to say, - -94 -00:54:10,800 --> 00:54:11,580 -Unknown: Hmm, - -95 -00:54:11,580 --> 00:55:58,230 -Scott Tolinski: this could be an extension. So it was just yesterday, I was like writing out some very specific comments. And I was like, I'd like to have this common be used on the page in various ways and different pages to have the same sort of comment sort of denoting locations of things. Only I don't want it to type every time. So I made an extension. And well, I made a snippet board, because why not? Right? Why not make a snippet. So what this extension allows you to do is just highlight, select a bunch of code and then do the command shift P and then type in great snippet or just snippet? Oh, that's great. You do create snippet. It just asked you to give it a name. And you hit type in the name and hit enter. BINGO, BINGO. It's there. And since it already knows what type of file you're in, it knows what type of file to use this in and therefore making the entire process extremely easy. You never even have to touch a config. You never even have to Leave your file, and then all of a sudden you have a snippet for it. So I've been using this for the past week here and and really like it, I have been making a whole ton of snippets, probably more than I'm even going to remember later. And that's why, let me tell you part two of this is the little toolbar that it gives you. So it gives you a toolbar of all of your snippets telling you split up based on file type. So if you pop up into your react JavaScript, or JSX, or TypeScript react, you can see, see I have a UI, ts react component, It even gives them your names, you can click on them, and when you click on them, it takes you right to the snippet so you can see exactly what the snippet is. So if you if you're not good at naming things, you can always see what they're named. So I think this is fantastic, easy snippet. I've been using it a lot and a big fan of this when in fact this this sick pic was so sick that it overrode the SEC that I was going to do so I'm a big fan. And I wanted to shout this one out. - -96 -00:55:58,800 --> 00:56:00,870 -Wes Bos: Ah, that's awesome. That's a sick pic. - -97 -00:56:01,440 --> 00:56:12,390 -Scott Tolinski: And it's not a hugely it's only 21 21,000 installs. So get in get it on the ground floor here. It's a sleeper. It's a sleeper pick here. The sleeper - -98 -00:56:13,980 --> 00:56:28,680 -Wes Bos: shameless plugs, I'm going to shamelessly plug all my courses Wes Bos comm forward slash courses check it out. And by the time you're listening, my guest of course might be out we'll see. And it will be listed on that page you syntax for 10 bucks off cool, - -99 -00:56:28,710 --> 00:57:05,370 -Scott Tolinski: I release new courses every single month. I have not selected this most courses you've heard me talk about already. But by the time you're listening to us this course that I have not selected yet will be already out so whatever that course may be. I'm excited I'm excited to be in the time machine here and see ended up what I what I went with and created a course around so level up tutorials comm forward slash pro we have a new course every single month. The most recent one was on modern CSS design systems using CSS variables to create really, really, really small design system. So it's fantastic level of tutorials.com - -100 -00:57:06,150 --> 00:57:10,710 -Wes Bos: beautiful. Thank you so much for tuning in. We'll catch you on Monday, base pace. - -101 -00:57:12,540 --> 00:57:13,320 -Unknown: Head on over to syntax.fm - -102 -00:57:13,320 --> 00:57:22,290 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax279.srt b/transcripts/Syntax279.srt deleted file mode 100644 index 60a140d65..000000000 --- a/transcripts/Syntax279.srt +++ /dev/null @@ -1,200 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,000 -Unknown: Monday, Monday Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally. - -2 -00:00:25,890 --> 00:00:47,610 -Scott Tolinski: Welcome to syntax. In this Monday hasty treat, we are going to be wrapping up Season One of syntax and this is episode 279. This is the last episode of season one. I think this is hilarious. So my name is Scott Tolinksi. And I'm a full stack developer from Denver, Colorado and with me, as always is v Wes Bos. Hey, everybody, - -3 -00:00:47,610 --> 00:01:01,650 -Wes Bos: I think Don't Don't be afraid, everybody we back on Wednesday. What is that right now? It's June July eight, and we've recorded up to September right now. So we're a little had taken some time to swim. - -4 -00:01:02,070 --> 00:01:52,530 -Scott Tolinski: Yes, we're taking some time to swim in the nuts I'm gonna be doing in the kiddie pool in the backyard underneath the peach tree, that's gonna be a lot of fun. End of the season wrap up, that's what we're talking about. We're going to be starting Season Two of syntax, which is going to bring some tremendous changes. That's right. Huge, huge changes, such as maybe, maybe adding one segment and getting a bumpers. I don't think we're exactly changing a whole lot. But I do want to talk a little bit about maybe some of the plans here for the fall. So bumpers, this also commonly known as bumpers in the industry are the audio bits in the show. Now, Wes, I don't know what your thoughts are. Because we haven't really talked too too much about this, but I would love to get some bumpers from the different segments like shameless plugs in sickbay as long as they're fast. I don't need like a song for each one. But just like - -5 -00:01:53,790 --> 00:01:55,920 -Wes Bos: the shameless plugs. - -6 -00:01:56,190 --> 00:02:11,100 -Scott Tolinski: Yeah, I here's my here's my request, though. Only one of them can be grunge. Because, like we don't want to like Okay, we got the grunch and by grunge, I mean like, like screamo or something. - -7 -00:02:11,430 --> 00:02:24,960 -Wes Bos: Oh, yeah. Yeah, I don't think that would know do well. That's a good. a downside to liking, like hardcore music is that you can never, ever play it around your friends or family or anything like that. Nobody else understands. - -8 -00:02:25,380 --> 00:02:25,970 -Unknown: And it's like, - -9 -00:02:26,030 --> 00:02:47,730 -Wes Bos: Yeah, when you see people like blasting their music, and you're just like, ah, like, I'm not impressed by you, you know? Yeah. Doesn't do for me. So we're gonna get some new intros for the podcast as well. We'll be getting rid of the two intros that we have because Scott is transitioning from El Toro loco to turbo to linsky turbo to Lenski, - -10 -00:02:47,730 --> 00:03:25,830 -Scott Tolinski: it's about time because like, El Toro loco is somebody else's nickname. Okay, it's a it's a monster truck. And I really I don't want to compete with a monster truck granted me the monster truck we share some. We share some some some some tight bonds. Courtney actually got Landon a remote controlled El Toro loco for his birthday, which is pretty sweet. It's huge. It's a big remote control car. So I think turbo is the right way to go. There's alliteration there it's faster. It is not shared with anybody else. I like it but it's a it's up so here's the question. - -11 -00:03:25,920 --> 00:03:33,720 -Wes Bos: Yes, Wes Barracuda boss needs to be renamed to should I should I do some introspection on maybe a new a new handle? - -12 -00:03:34,260 --> 00:03:51,840 -Scott Tolinski: I mean it depends if you want a new handle that could be part of season two new new new season new us for season two as syntax we could add some really fun stuff I don't know yeah, maybe what would some other good be words West the boss with two s's boss? - -13 -00:03:53,070 --> 00:03:54,780 -Wes Bos: Yeah, sounds like that. - -14 -00:03:55,290 --> 00:04:00,570 -Scott Tolinski: What about the West the boss baby? You're not really a bad baby but there's the movie boss baby. - -15 -00:04:02,460 --> 00:04:07,880 -Wes Bos: So talking about intros I had this amazing idea. Scott doesn't like it - -16 -00:04:07,920 --> 00:04:14,040 -Scott Tolinski: well it's gonna get banned I don't want to get banned if let's say oh, let's say look no West here you hear me out here - -17 -00:04:14,070 --> 00:04:15,930 -Wes Bos: banned from what this is the internet. - -18 -00:04:16,380 --> 00:04:31,170 -Scott Tolinski: If that if Okay, let's let's paint a picture for you here you're sitting at home all of a sudden you get a knock on the door. You open that door Who is it? It's Tom DeLonge bada phi and they got a pickle wheel feral wheelbarrow full of money for you. And they say welfare - -19 -00:04:31,170 --> 00:04:32,730 -Wes Bos: awful a meal - -20 -00:04:32,790 --> 00:04:52,500 -Scott Tolinski: wheelbarrow full of money for you. And they say hey, Wes, this is Joe Rogan money you want that Joe Rogan money? Well, let's uh let's sign a contract with Spotify. Oh, wait, your theme song is a is a blatant copyright abuse of a blink 182 song. We will not give you the wheelbarrow full of cash. - -21 -00:04:52,740 --> 00:05:34,800 -Wes Bos: Can I at least say what the lyrics were because I felt like this was just gold. It goes to the tune of blink 182 What's my age again? It says took out my phone. It was a Monday morning, I scroll alone to find that podcast link. And that's about the time that I turned on my PC. Nobody likes you when you j query LS TDD this bug makes me want to rage. And then I just this is just partial. I'm not done yet. Sure, my friend say I should know I don't that's not the part. And that's about the time that I drank coffee. Nobody likes that. Wes Lee, are you sure? Do you love your Freshbooks now and that damn Santa do my Sentry says I should give up? And that's as far as - -22 -00:05:36,690 --> 00:06:34,710 -Scott Tolinski: Oh my God, I found a guy. What? I have not. Oh my gosh, no, we're gonna get banned. They're gonna be two Live Crew, USA for that, that's for sure. Okay, so we're gonna get new bumpers, some new songs, maybe a new intros for all the episodes and maybe new outros? Who knows, we have time to think about this. While we take our slight summer break, we're also gonna be adding a sweet new segment, which at the start of this new segment was hilarious. So the new segments called the syntax highlight, we're going to highlight people in our community who are doing really great work, who, who do not have a platform are not being elevated or not being, you know, shown off as being this really cool project. So we're gonna elevate people doing awesome work. And I think it's a great way to really help the community learn about really interesting developers projects, and hopefully even get get some eyes on their work if that's a thing that needs to happen, right. - -23 -00:06:34,710 --> 00:06:35,910 -Wes Bos: Totally, totally. - -24 -00:06:36,210 --> 00:06:56,520 -Scott Tolinski: So we came up with this a while ago, and we asked on Twitter, what would be a good name for this not realizing that it was just staring us in the face that syntax highlight was like the best best name ever for it was like the biggest dull moment in the world for me, like, how could we not think of that we're so clever, and we thought about these other things, but not syntax highlight. - -25 -00:06:56,909 --> 00:07:15,780 -Wes Bos: So awesome. Let's move on to we'll talk about our favorite hay season tacs of the year so far, because we're kind of halfway through the year. And then we'll end it off with the top episodes of this year so far, just to give you an idea of what people are loving. So what was your favorite hasty and tasty there, Scott? - -26 -00:07:15,900 --> 00:07:51,150 -Scott Tolinski: Ooh, yeah. So my favorite, hasty, I really think that my favorite hasty was, man, we did this like series where we did like, vs. Code tips, there was like multiple tasties I don't know if that's, that's cheating, because it's technically the length of a tasty, but I really like those VS code episodes. 123. I think we probably even had one more a little bit later. But those were an August one t 19. So just about as far away as we can from right now. But are we talking about season one entirely, which is all 270 episodes. Just here. - -27 -00:07:51,330 --> 00:07:53,130 -Wes Bos: Just 2020 so far? - -28 -00:07:53,310 --> 00:07:58,110 -Scott Tolinski: Oh, just 2020 Oh, I went to 2019 because it was still calendar year. - -29 -00:07:58,470 --> 00:08:59,640 -Wes Bos: My hasty is sort of a tie between the server list episode, which I thought was like we've been working on that one for a long time. And that was a really good explainer episode. I really liked doing the explainer episodes, they take a lot of research, but it's it's an enjoyable to put out a nice valuable piece of content like that. And the web RTC one with Ian Ramsey, where he talked about his IP called IO. And it was just like a is awesome chat with him because he just like, just kind of hacked the thing together. And it really took off. And he had a really good like approach to just doing it which, which I really liked. So a lot of people also really enjoyed that they found it kind of motivational. They go, oh, that guy just kind of made stuff work and it panned out or you don't have to like do everything absolutely perfect. So that was my favorite tasty here at hasty was maybe the modules in node one that was another good explainer as to what's going on because there's a lot of misinformation as to what's going on with it. So that was a good one. - -30 -00:09:00,150 --> 00:10:20,490 -Scott Tolinski: I think my favorite hasty was the CRA I'm going to series for some reason. I like the series, but it's the the ones that are like, reasons why your website is slow. I think there's three yeah. Oh, yeah. Yeah, yeah. And those were all really good, helpful, helpful tips. And it's something that I really spend a lot of time on myself. It's also something that I have a bit of a sore spot with, with people on YouTube who continue to leave me comments on my video that expresses good information. Like I have a video on how to reduce HTTP requests and people get angry at it. So I think I think that this low website hasty treats are fantastic. I have I'm gonna break the rules here and do two favorite tasties, one of which is the episode where my lovely wife came on the show mental health and death featuring Dr. Courtney kolinsky. She talked about depression anxiety, imposter syndrome answered a bunch of questions from people and sort of anonymous ways and we just talked through some mental health stuff. It was really great to have her on the show because I get to live with her and pick her brain 24 seven about this kind of stuff. So it's really great for her to come on and share some of that knowledge that she's gained. My other favorite one is the one where I taught Wes felt because I get to talk about spelt the whole episode. So I like that. - -31 -00:10:21,530 --> 00:10:53,540 -Wes Bos: Awesome. And then let's let's wrap it up here, we'll just talk about the top 10 episodes of 2020. So far, these are ranked by download. So we'll stop at the start of the 10th most popular episodes away, we got six, we've had six months in, we do eight episodes, we've had 48 episodes so far. So this is the top 10 out of 48. And number 10 was 2020 fitness, which is a little update as to where we're at with our fitness goals. And just the benefits of fitness in general as being a web developer. - -32 -00:10:53,579 --> 00:11:13,140 -Scott Tolinski: Yeah, number nine, here is more on serverless, where we talked a lot about databases, secrets, often more all sorts of serverless stuff here, which is, it's not super surprising to me that this one is popular. But again, it just goes to show you I mean, there's there's hype around serverless in general. - -33 -00:11:13,589 --> 00:11:46,740 -Wes Bos: Next number eight was, I'm really glad to see this one up there as the Synology show. So this has nothing to do with web development and 100% of just Scott and I geeking out about tech hardware and backup solutions and local home servers. And that was that was a really big show long show. And we just talked about all kinds of stuff that it can do. And that's I'm really glad to see that that was one of our most popular episodes, because that was a fun one to do. So we should do more of those just like I want to do like a networking show, maybe like a home video show thing like that. Yeah. - -34 -00:11:46,740 --> 00:12:17,400 -Scott Tolinski: Next one is going to be our web dev G, who is going to replace us all about the sort of Nope, not necessarily the no code movement, but the movement to be able to build things without code. So the age old question is, is Dreamweaver going to make my job obsolete? And obviously we talk about the whys and what's in just all of the somewhat controversial topics around that. And surrounding that. That'd be point six, the - -35 -00:12:17,400 --> 00:12:31,890 -Wes Bos: most popular one was a potluck where we talked about fonts, frameworks, tease coding, subscriptions, client work, and more. It's funny, I'm looking at the top ones, a lot of them are potlucks. I'm glad to see that everybody loves the potlucks. - -36 -00:12:31,979 --> 00:12:48,840 -Scott Tolinski: Yeah, this potlucks are great. There's some of my favorite episodes to record. Number five is pika package, which was the really great episode was Is this the only one with a guest on that we had in this in this top view? - -37 -00:12:48,870 --> 00:12:50,520 -Wes Bos: Yeah, yeah, you're right. - -38 -00:12:50,550 --> 00:13:20,520 -Scott Tolinski: Yeah. So this episode was really, really cool. Because we learned all about this, this new thing, Fred, Fred shot came on and talked about pika package. And it was really cool. Basically, this this new type of package registry, really fast bundle rebel, we talked about some of his projects that has since gained not only quite a bit of growth in their theme, but they've also evolved quite a bit, we have snow pack v2, we talked about a bunch of that stuff in this episode. And that was the first time I'd ever heard about the snowpack project. So really - -39 -00:13:20,520 --> 00:13:43,920 -Wes Bos: cool stuff. Number four is serverless and Cloud Functions. So both of our serverless shows are up here. And they're just within a couple thousand downloads each in the top 10. So again, that was my favorite. I didn't even look at this before. But my favorite episodes were in the top one. So we talked about serverless and Cloud Functions and all the different providers and sort of the ideas behind it all that was a good one. - -40 -00:13:44,099 --> 00:14:08,970 -Scott Tolinski: Next up, we have a potluck, which is the one where we talked about it's Episode 218, where we talk about developer culture, we talk about slack communities, we talk about backpacks, which we are want to do, also vanilla j s and some other stuff these pod liquid you know this, these are great. We cover a lot of ground in these episodes, and I think it like really gives us an opportunity to to share a lot of what we've picked up in our time in this industry. - -41 -00:14:09,510 --> 00:14:24,330 -Wes Bos: Absolutely. The number one episode and this is I guarantee this is clickbait headline. Next versus Gatsby headless CMS Vue. js is Ruby on Rails still good and more. So that was our most popular episode - -42 -00:14:25,020 --> 00:15:09,360 -Scott Tolinski: to blow your mind here. But when you copied and pasted this list, it added to the true number one to the heading of the columns and not actually in the one you just listed off was actually number two, not even number one, which I'm sorry, I thought that one would have been number one, so I told you I was saving a banger to blow your mind and I was the number one covered and uncovered right the number one episode of the past 2020 so far is tech to watch in 2020, which was our episode released on January 8, And it has almost 10,000 more downloads than the previous the next one in line. So by far our most popular episode. - -43 -00:15:10,050 --> 00:15:10,740 -Wes Bos: Wow, - -44 -00:15:10,890 --> 00:15:12,900 -Scott Tolinski: very good one very good episode two. - -45 -00:15:13,200 --> 00:15:19,710 -Wes Bos: The other ones were like hundreds apart. And then the number one episode was like 10,000 apart. Yeah, right. Yeah. - -46 -00:15:20,190 --> 00:15:47,820 -Scott Tolinski: So that's the end of season one of syntax. Oh, we will join you next season for syntax where we dive into topics like web development, barbecue tips, breakdancing soft skills when I'm trying to remember all of them but we're not changing the content, the content is going to remain the same and we're going to continue to bring you education 24 seven, or at least Mondays and Wednesdays for an hour and a - -47 -00:15:48,840 --> 00:15:57,210 -Wes Bos: beautiful Alright, thanks so much for tuning in. And we are off for a couple months but you will not miss us because we'll be back on Wednesday. - -48 -00:15:57,240 --> 00:15:58,980 -Scott Tolinski: We will catch you next season. - -49 -00:16:00,090 --> 00:16:00,720 -Unknown: Please - -50 -00:16:02,610 --> 00:16:12,390 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax28.srt b/transcripts/Syntax28.srt deleted file mode 100644 index 68723f145..000000000 --- a/transcripts/Syntax28.srt +++ /dev/null @@ -1,444 +0,0 @@ -1 -00:00:01,290 --> 00:00:04,560 -Unknown: You're listening to syntax the podcast with the tastiest - -2 -00:00:04,560 --> 00:00:31,680 -Wes Bos: web development treats out there. strap yourself in and get ready to Lynskey and West boss. Hello, everybody. Welcome to shop talk show. Wait, nope, nope, that's not i'm not Chris. Okay. Hello, everyone. Welcome to syntax. Actually, what's funny about that as the amount of times people tweet me and get me or you can confuse with Chris or Dave, I guess two white dudes on a podcast talking tech. - -3 -00:00:34,020 --> 00:00:34,710 -Unknown: Nice. - -4 -00:00:35,489 --> 00:00:37,920 -Wes Bos: Welcome, everyone. How are you doing today, Scott? - -5 -00:00:38,040 --> 00:00:51,840 -Scott Tolinski: Hey, I'm doing cold. I'm sure a large part of you know, North America is cold right now so very cold Yeah, I woke up today and like the the furnace like couldn't hang so it's like really chilly in our house right now. - -6 -00:00:51,870 --> 00:00:54,600 -Wes Bos: Oh, like your furnace is like just totally dead dead. No, it's - -7 -00:00:54,600 --> 00:01:11,549 -Scott Tolinski: it's we we have an old house. Yeah. Yeah. And the the windows are probably the the culprit of all of our insulation issues. But like because of that our house does not stay super warm. And the furnace is just like, it's too cold for me right - -8 -00:01:11,549 --> 00:01:12,060 -Unknown: now. I'm - -9 -00:01:12,060 --> 00:01:13,439 -having a hard time keeping - -10 -00:01:13,439 --> 00:01:39,299 -Wes Bos: your hands up. Yeah. Oh, boy. We just got new doors. Yeah, we have a super old house as well. And we have new windows, but we just got new doors and like the matter how nice and warm it is. And then I also spend an entire day going around with a can of spray foam and dice. I don't know it's it's so silly. How these old houses are built with like no insulation at all. Yeah, it's very expensive to heat a house like this. Yeah, for sure. - -11 -00:01:39,360 --> 00:01:48,150 -Scott Tolinski: Yeah, I'm dying to be able to be in a place financially where we could get our windows replaced. Because that would Yeah, a huge improvement. What a What a - -12 -00:01:48,150 --> 00:02:02,159 -Wes Bos: bummer. How expensive like, let's let's talk old man talk right now. What a bummer. How expensive windows and doors are like, I can't believe it. Yeah, such like you could buy a brand new car or get windows in your house. - -13 -00:02:02,219 --> 00:02:09,990 -Scott Tolinski: I just I haven't even I haven't even gotten a quote just because I know it's gonna make me upset. It's gonna, just gonna like be like, Oh, okay. - -14 -00:02:11,370 --> 00:04:42,769 -Wes Bos: Oh, boy. All right. Well, today we are talking about a sink, await and flow control. We know we've dabbled in a sink away in lots of our previous podcast, we're gonna dedicate the entire show to explaining what a sink await is, how we use it, how we use it with promises some best practices. And probably my my favorite topic is error handling, because a lot of the examples just show a try catch. So I actually just did a talk, which I've you might have seen I've been pumping it on Twitter quite a bit at .js. Back in December in Paris, I did a 15 minute talk on a sink await. And I kind of go through it and explain all that. So if you're still looking for more after this podcast, I'll link that up in the show notes as well. But, um, so let's just let's kick it off and talk about flow control in general and flow control. What does that mean? That means when you have to do a couple things, one after another, it's kind of hard in JavaScript. And that's because JavaScript by nature is entirely a synchronous, meaning that it won't sort of freeze up the the entire programming won't stop your entire program. Whenever it needs to do work it what it does is it kicks off a process. And it will move along to the next line of code. So if you're coming from like, let's let's think of like PHP or something like this. If you have code that needs to run top to bottom, and you let's say you need to fetch some data. By default, if you're not using threads or anything like that in PHP, it's going to just stop the code from running for a split second while it goes and grabs that data and then moves on to the next line. Whereas in JavaScript, it's going to kick off that fetch or kick off that David database request. And then the next line of code underneath that is going to immediately run rather than wait for that line to be done. So that's why flow control in JavaScript is like a synchronous. The the whole reason we have no j. s, if you go back into Ryan dolls, initial talks about why he chose JavaScript to create this new server side programming language. And he did it because JavaScript is almost entirely a synchronous. And it's fantastic. Because it's very hard to write any bad code that can lock up your entire application or block the thread or, or block the process, as they say, which is great. It's just kind of hard to write code that looks good. And in the past, the solutions to that were, what were what were some of the solutions out there. If you had callbacks, - -15 -00:04:42,930 --> 00:05:49,949 -Scott Tolinski: the big one. So I mean, callbacks was the the solution for forever. If you can think about it for a long, long time. We just used callbacks and, and a callback is essentially a function that gets passed into the second or the last argument of a function and that that function then runs upon the completion of, you know, whatever your action is. So if you go to hit an API, you hit your API. And the result is returned as the arguments in that function that are that is then run. Now, that actually was a nice little solution for maybe a couple of seconds until you have to do multiple calls and multiple different services and stuff like that. And then you arrive at what's commonly known as callback hell, where you have a callback within a callback within a callback in your code is indented, like 10 lines deep, and it's super confusing to track down and you have to start using, like, let's say you want to access those variables outside of that callback, you're gonna have to start doing some form of variable, this equals whatever Some are that Yeah, - -16 -00:05:50,040 --> 00:06:05,250 -Wes Bos: especially before we didn't have the concept of an arrow function. Yeah, var that equals this, or you declare empty variables up top and just set them six levels deep and then reach outside that function to grab the variable. It's a couple. It's just just not a good time. - -17 -00:06:05,280 --> 00:07:18,600 -Scott Tolinski: Yeah, I actually remember specifically, having code that only used like one callback here or there. And people who talk about callback hell, and I would just sit there be like, I don't understand what's so bad about this. This looks this looks nice to me. I mean, this works fine. And then like the first time you have to deal with that, the the actual callback hell, you're just like app, I get it. Okay, yeah, I'm ready for something better. And then so be because of that. I forget when when the sort of started coming out, but there was, I guess, around No, no time, there was some various libraries for promises. I think there was one called queue and Bluebird, and there were several different libraries for what's called a promise, which a promise instead of having this, this function that gets called afterwards, a promise is sort of the state of the result that gets returned. So you run a function, and then using a dot then or catch for an error or something like that, you would then be able to say, Okay, here's the first step, then here's the next step, then here's the next step, then here's the next step. And it's all sort of in one line instead of step within a step within a step within a step like callbacks. Where, - -18 -00:07:18,959 --> 00:08:14,160 -Wes Bos: yeah, exactly, I always like to say like promises are sort of an IOU for some data that will come back eventually. So rather than the function, the function running and giving you the data back immediately, it gives you the sort of IOU that you can listen to. And I like the sort of think of it's kind of like an event listener, you say, like, when someone clicks do this thing with promises, you say, when the data comes back, then then run this code or when something bad happens, like an error, then catch, and then that's way how you can have it. And that that largely solved a lot of our flow control issues. Because our code stopped, stopped looking like nessa callback hell and started to just go into then then then then and you can chain these promises as long as you want. And you can sort of like it's a lot more readable. For your ability to, to read it top to bottom. - -19 -00:08:14,459 --> 00:08:41,490 -Scott Tolinski: Yeah. Yeah. And that was I think that was a nice shift for a long time. And, you know, promises definitely, I don't know, they solved the problem in a much more elegant way than then callbacks did. But now we have async await. And async await is basically, in my opinion, it's its promises with a better syntax. - -20 -00:08:41,969 --> 00:09:10,320 -Wes Bos: Exactly. It is promises like let's be clear about that, right? a sink await is simply just seeing syntax on top of existing promises. So all of your code is still written in promises, because the flip side to, to listening to promises, you can write a function that will immediately return a promise. And then at some point in the future, it will either resolve meaning it worked and will give you data or it will reject, meaning that there was an error and it will cancel or not cancel, but it will error out. - -21 -00:09:10,710 --> 00:09:27,920 -Scott Tolinski: Yeah. So that's where how we've arrived at today, where we have well, tons of options, but we have native options. We have package options and all sorts of stuff to help you control your flow. And probably is the best it's ever been inside of node ecosystem. - -22 -00:09:29,730 --> 00:10:55,770 -Wes Bos: Yeah, absolutely. So let's let's dive into how a sink away actually works. So rather than having a dot then what you simply do is you put in front of your function that returns a promise. So let's say we have a function called Get the weather and get the weather will return a promise which at some point will either return you the weather or it will error out cuz something bad happened. And what we used to have to do is we would say go get the weather parentheses, Toronto, Hamilton Denver. Whatever. And then you tack a dot, then on to the end of that, where, when that promise is resolved, then code will run. And that's great because you can chain them like we talked about. But it's still kind of callback key because you still have to put your subsequent code inside of the dot dot then. So a sink await allows us to just put the word await in front of the promise. And it will temporarily pause that function from running or temporarily freeze that line of code, until that promise is either resolved or rejected, and then the line underneath it will continue to run. Now, the only the catch here is that you can only await a promise function and it has to be inside of a another function, which is marked as a sink. And that's as simple as just putting the word a sink, before you define your function. - -23 -00:10:55,890 --> 00:12:00,120 -Scott Tolinski: Yeah. And I love I love this syntax, because like you mentioned, it's not pulling you out of sort of the normal flow of your code. It's simply just essentially pausing your code to say, Hey, wait a second, wait for this stuff to come back. Alright, we're Wait, here it is. Okay. And to mean, just even though the word await, like, is sitting there, right there, and it makes it immediately obvious that your code is waiting on this, this to come back. And so I absolutely love the the syntax for this, I think it solves all of the sort of the issue that I've had with promises just that it's too much extra code to sort of do something that should be simple. It makes it nice and simple, right? Just like I mean, it mentioned coming into JavaScript the first time and saying, oh, man, I want to write this code that runs in sequence. Well, I need a promises, you need to understand the concept of promises, you need to get the whole then and catch this, this sort of stuff. And then with await, it sort of takes away all of that. And you just simply saying, hey, wait on this stuff. Wait for this. Exactly, yeah. - -24 -00:12:00,180 --> 00:13:35,820 -Wes Bos: And the another cool thing is you can put a variable in front of an await. And the eventual data that comes back from the promise will be put into your variable. So you can do something like const, weather equals await, go get the weather. And whenever the function go get the weather resolves. Whenever that promise resolves, then the resolved data, like sunny and 20 degrees will be put into your actual variable that's on your, your left hand side. So there's no callbacks or any like weird syntax here. It's just simply reads top to bottom. Which is great, because often when we start learning programming, oh, like, what are the what are like the three things that everybody teaches? When you first learn JavaScript, it's alert, prompt and confirm. And all those three things are entirely synchronous, because they pause the flow of JavaScript from running. And it's great because you don't have to get into the concept of callbacks or anything like this. But the downside to that is that people think, Oh, well, if I just need to go get some data now, it'll just pause, right? And then you're like, Oh, actually, no, there's this whole concept of being a synchronous and callbacks. And, and now all you have to do is just be like, we'll just wait on this data to come back. It's kind of a kind of wish that alert prompt and confirm would go a synchronous, showing that and then we could just show somebody that if you try to prompt someone for some data, the line of code underneath it will run won't wait unless you put the word await in front of it. So I kind of wish that that that would go and I'm sure I could could build my own as well. - -25 -00:13:35,850 --> 00:14:01,080 -Scott Tolinski: Yeah, right. Yeah. I and it's funny, because I never thought about it like that. But you are sort of teaching the wrong concept right off the bat. Yeah. It's t it's like just an instantly saying like, Oh, you know, this first thing you learned? Well, it's kind of a lie. You know, I mean, it works in these situations, but it's a lie for the rest of your time in JavaScript. So yeah, I think it would be easier to to go that way. But yeah, good luck. Good luck with that one. - -26 -00:14:01,590 --> 00:17:42,630 -Wes Bos: Exactly. Ah, let's take a break. Talk about our sponsor, and our sponsor today is a fresh books. Fresh books is cloud accounting software. And it's I think it's the best cloud accounting software out there. It's the eye if you run any sort of business, whether it's a you're a freelancer, whether you're just someone doing some side projects, or whether you're just a small business in general, what you want to do is sign up for Freshbooks and you're going to get the best invoicing software out there it's going to they're saying that you can get paid faster because there's you can get paid online I have my stripe and my paypal hooked up right to it so we don't have to do that silly dance where like the checks in the mail wink wink where it's not really you can just get paid online immediately. You can put all of your invoices in it you can set up all these automations were or mind your clients to get paid. Fantastic. Small Business software in general. I'm really really happy with it. So go to freshbooks comm forward slash syntax, enter in syntax into the How did you hear about a section? Thanks so much to Freshbooks for sponsoring, alright, so one of the is, like we talked about being a synchronous is great because it's hard to write code that will will be unperformed. But with a way that it is possible to write bad code, and that is like, let's say, for example, I want to fetch two pieces of data, I want to fetch the weather, and I want to fetch a list of restaurants for my city, those two things have nothing to do with each other. So it doesn't make sense for me to get the weather and wait for that to come back. And then when the weather is back, then go fetch a list of restaurants and then come back and then deal with it. Because that's, that can be slow, right? Like, what if the weather takes two seconds, and then your stores take one second. So what ideally you would do is you would fire both of those off at the exact same time. And then when, when they're both done, then you can finally move on to the third step, which is displaying that data to the user. So the nice thing about this is that you can take your your weather promise, and you can take your your stores promise, maybe it's like the Yelp API or something, put those two things in variables. And those are just promised variables. And then you wrap them in a what's called a promise dot all and what promise dot all will it'll sort of make a mega promise. I was just telling Scott like, hey, Scott, let's talk about mega promises. And he's like, yeah, that's hilarious. Because we do have these things on our topic list sometimes. And I'm looking at it and I'll Google it, because I don't recognize it and nothing comes up. And I'll just be like, Alright, is this like a special? Yeah, a mega promise. And a mega promise is a promise that is made up of littler promises, or other many promises. And the beauty of this promise dot all is itself will return a promise, where it will only resolve itself, after all of them have been successfully resolved. So once both pieces of data have been been resolved, so that's pretty neat. And then you can simply just await promise dot all and then those two pieces of data is going to be returned as an array. And what I like to do is immediately destructure those into like, const, square bracket, whether comma, stores, you know, I don't know if we should be coding with the voices here. But you know, you're right, where then we have our two variables, and we can move on to the next line, that's going to be as performant as we possibly can. So be aware of not going willy nilly and unnecessarily awaiting things. If there's two things that can run at the exact same time, then stick those in a promise that all for a mega promise. - -27 -00:17:42,660 --> 00:18:45,000 -Scott Tolinski: And I think this illustrates something that we didn't, we haven't really touched on with a sink await. And maybe a misconception about it is that well, it's not necessarily a full on replacement for promises, it is promises, and they can be used with promises. So in this instance, like you said, we're using a sequence or not a sequence of promises, but you were using promises that were going off at the same time. And then we are awaiting that. So this is a sink await being used with promises to do that, because the sink await itself doesn't necessarily have these features where you can run them at the same time and stuff like that. And since again, a sink await is just using promises. And underneath it all. It makes it so that there are really like killer team more so than an evolution of right you could think of a sink await is like a feature on top of or with promises rather than a replacement for promises. Exactly, exactly. - -28 -00:18:45,000 --> 00:19:57,560 -Wes Bos: It's just syntactic sugar, as we like to say, just Knights nice syntax built on top of the existing promise API. And that's why we're only talking about using it in terms of a sink away. And we're not talking about like, how do you make an async function because there's there's no way to, to make a function that you will wait with a sink await you just use, you just use a regular function that returns a regular promise. Or let's, let's talk about like some people say like, Okay, that's good, but I like the I like the bluebird API better. And I like the the syntax of this other library that I've been using for so long. And while that very well may be true, I am urging everyone to just drop those and start using native promises. And that's because you don't have to have specific buy in from a framework. These are just built into the browsers. And many of the new browser API's being built right now are all built on top of native promises. So let's go through a couple browser API's. Do you know of any browser API's that are built in native promises there, Scott? Yeah. - -29 -00:19:57,560 --> 00:20:23,760 -Scott Tolinski: So you know, I mean, even so, Fetch, which is the hot way of getting data from an API is built with promises. And so because of that, you can no await fetch, you can await fetch, rather than having to use some sort of, again, an additional library or doing anything like that. You can use just normal promises with the the hot new API for hitting API's - -30 -00:20:23,810 --> 00:21:10,680 -Wes Bos: that so fetch. One really, really funny thing about the fetch API is that it's actually like a double promises because you, you fetch some data from your API. And then as a second step, you need to convert that data into whatever it is that you're expecting, it's likely you're expecting JSON to come back. So then you have to call the response dot JSON, which in turn returns another promise. And that's what you have. So you sort of see these these funny little things where people either await fetch dot then, and then they do like data data dot JSON, or you can await await the fetch and just put parentheses in between the first and second or await What is this? I don't know, I seen that the double await Okay, I - -31 -00:21:10,680 --> 00:21:18,030 -Scott Tolinski: don't know if I've seen example that I always just use the wait, that to get JSON from it. The second one rather than Okay, I'm - -32 -00:21:18,030 --> 00:21:19,800 -Wes Bos: gonna I'm gonna send you a - -33 -00:21:21,080 --> 00:21:21,860 -Scott Tolinski: little snippet. - -34 -00:21:22,439 --> 00:21:28,980 -Wes Bos: Yeah. I put it in slack. A little, a little example. - -35 -00:21:29,160 --> 00:21:42,420 -Scott Tolinski: Yeah, I haven't seen this. And I actually really liked that I went away. I feel like some people might not like this, but I like it. It's, uh, it is essentially what you described, it's a total weight wrapping around a fetch command. I - -36 -00:21:42,420 --> 00:22:24,150 -Wes Bos: love it. Yeah. I thought that was pretty funny when I saw that, because I was always like doing this like weird dot then data, data, JSON. Yeah. And I was like, I wonder how you could do double away here. And it's just the regular bracket, and whatnot. So some other API's, it's pretty good. Some other API's that are promise based. So instead of using fetch, I like to use a library called axios, a x iOS, and that's all based on promises. So you can simply just await it and they have some JSON default, so you don't need the way to wait. But the payment request API that's coming. So if you want to be able to sort of autofill your customers credit card data, and billing information and shipping information and all this stuff, there's some really neat spec, - -37 -00:22:24,209 --> 00:22:38,760 -Scott Tolinski: it is gonna add a bunch of security essentially, to your to your payment, you don't have to worry about the super secure forms or coding a form yourself, right? I mean, the browser will handle the the form, so you don't have to worry about that. Uh, - -38 -00:22:39,060 --> 00:25:13,110 -Wes Bos: some cases that will release the Chrome, right? in Chrome, it depends. It's okay, the mid let's talk about this, we got time. So the payment request API is at the very basic, a glorified autofill. Meaning that if you call the payment request API, it's gonna open up this little drop down in Chrome or in on Android, it's going to open it up or on Apple, it might open Apple Pay, and then it you request certain things like a credit card number and expiration date and a billing address. And then the browser will give you that data back. And you can just put that into your own input field. So it's kind of just like a standard way to autofill your credit card data, rather than using like a last pass or the trying to guess, with the existing autofill. So that's at the very, very basic and how use the single way with that is, you can simply like say const credit card details equals await new payment request, and then that will pop up and the user will have as much time as they need to interface with that dialog. And then when they press OK, that will resolve the data for you, or when they press cancel, it will reject that payment requests. And then you have to catch that error and ask them for it again, or just tell them that sign was wrong. That's a very basic, but then there's also like this other side to it, where things like Google pay, it's not called Android Pay anymore called Google pay, or Apple Pay. Or it works very similar to how stripe works where you can use them as the processor or you can use them sorry, they're not the processor. Still stripe is your processor, but you can interface with them. And what you do is instead of getting the credit card number and all the details back, you just get a token. And then you can then take that token to Google pay or Apple Pay or whatever. And then you can sort of charge that token on your server side without ever having to touch a credit card detail. So there's a lot to it. I spent some time reading into it because obviously I accept credit cards on the internet. But it's going to be pretty exciting. I like the ladder where you don't have to touch credit card details at all. Even though like I never do credit card details on my server at all because I Send it right destroy. And then your tone. We talked about this. If you're interested in this whole process, listen to the episode we did on accepting money online. But it still will work in terms of like getting the raw credit card data as well. - -39 -00:25:15,000 --> 00:25:34,050 -Scott Tolinski: Yeah, I that's the thing, I need to dive into more, I was just reading about a little bit about it on Braintree had some new update for Google pay or the browser API. And I just glanced at it. But I need to definitely spend some more time on that. And it's annoying, I just rewrote my entire shopping cart. - -40 -00:25:35,580 --> 00:25:56,940 -Wes Bos: Well, I think I think what is is going to be nice is that you likely won't have to do that if you're using like stripe Checkout, is that the folks at stripe and they have already done this is they will check for the payment request API. And then if it's there, they'll try to use that. Because that will obviously lead to to higher conversions and more payments online word. - -41 -00:25:57,600 --> 00:26:01,890 -Scott Tolinski: Cool. Well, what other other any other browser API's that you can think of? Yeah, - -42 -00:26:01,919 --> 00:26:10,440 -Wes Bos: the get user media. So if you want to use someone's webcam, he actually used to be based on a callback, right? So there was there was two callbacks success callback when someone - -43 -00:26:10,440 --> 00:26:14,460 -Scott Tolinski: gives you access. That's the only way I've used it. To be honest, I didn't I didn't know it was promised. But yeah, - -44 -00:26:14,460 --> 00:26:52,530 -Wes Bos: that's that's actually deprecated. And now the new get user media will return a promise. And then once someone allows you access to their webcam or to their microphone, then that will resolve what's called a stream. And then you can take that stream and pipe it into a video thing or something like that. So that's pretty exciting. And the web animation API, so the the JavaScript web animation API is largely built on promises, which is absolutely what you want for doing sequential animation. So like fade out, then when the fading out is done, then then grow the size. And then when that's done, turn it green. You get the point, right? - -45 -00:26:52,560 --> 00:27:05,880 -Scott Tolinski: Yeah, and then that I feel like that could if not a, what are we calling them that's snack episodes or snack packs or hasty tray stew treats? I like tasty treats a lot. We should actually do some sort of a poll on what Yeah, - -46 -00:27:06,150 --> 00:27:15,510 -Wes Bos: wait, let's talk about this year. So our shorter episodes are going to be called either snack episodes. tasty treats. What else? - -47 -00:27:18,360 --> 00:27:23,400 -Scott Tolinski: Dang, how am I forgetting this way? I just said it two seconds ago. I don't know. Rewind and listen to - -48 -00:27:25,980 --> 00:27:33,120 -Wes Bos: snack pack. Snack packs. Yeah, yeah. Let us know on Twitter, what you what you think the little ones should be called? I think Casey treat is pretty good. - -49 -00:27:33,150 --> 00:27:56,760 -Scott Tolinski: Yeah, I like tastytrade. A lot. So I think maybe if not a full episode, we could have a hasty treat on the web animations API, because that's something that's pretty darn new. And if you weren't paying attention, it might have flown under the radar a little bit for you. And definitely something that I love animations on the web. So me personally, something I'm super excited about. - -50 -00:27:57,180 --> 00:28:07,860 -Wes Bos: Yeah, exactly. Especially if you're feeling like a little bit limited by CSS animations, you want to you want a little bit more control, you want to orchestrate it a little bit more. The web animation API is exactly where you want to be. - -51 -00:28:07,920 --> 00:28:10,980 -Scott Tolinski: Yeah. Cool. - -52 -00:28:10,980 --> 00:29:07,650 -Wes Bos: So what else do we got here? We talked about mega promises, different libraries that are using promises, you can obviously make your own library. So often, what I'll do is I'll take a callback based function that I have. And you can update that function to instead of accept a callback, or In addition, you can make your your function either run a callback, and sorry, you can make it both accept a callback or return a promise, which is cool. So you could use either or. And then there's also these these bunch of different utilities out there. So node just shipped one on the util package called promise a phi, where you can take a callback based API and turn it into something that returns a promise. Or you can in a hug like that, that sounds great. Because how many times I don't know how many times but there's been times where you go to use someone's API and find out that they don't even return a promise from it. And you're just like, great. - -53 -00:29:07,650 --> 00:29:16,890 -Scott Tolinski: Like, I've just got so invested in all this, you know, async, await promises stuff. And here, I have to go use a callback. Again, it's kind of a bummer. Exactly. - -54 -00:29:17,340 --> 00:29:37,140 -Wes Bos: So in my node course, we use everything as a sink away in my node course. And a lot of the packages we use don't didn't have promise based things yet. So we had to like convert a couple of them over to being a sink await. So we could not have to mix and match callback and in promises - -55 -00:29:37,169 --> 00:29:37,830 -Scott Tolinski: nice, - -56 -00:29:39,060 --> 00:29:43,500 -Wes Bos: pretty, pretty sweet. Let's talk about error handling strategies. - -57 -00:29:43,610 --> 00:30:43,110 -Scott Tolinski: I'm just gonna, and I'm really interested to hear your thoughts on this. I know you said you did a talk on it. And like, I personally have just been using the try catch, which, if you don't know is something that's been in JavaScript for a long time, which is a try followed by curly brackets, and then a catch for By curly brackets, so in a synchronous function, you would have your try. And you put all of your code inside of the try. And then inside of your catch, you would have the error available and do something in the case of an error, right. So you're essentially saying, hey, just try this, see if it works. If it fails, then go to the catch statement and the catch statements where you get to alert or throw an error on the server or something like that. So, so try catch has been around in JavaScript for a long time, and now, actually, is, in my opinion, become much more useful by having it be the sort of main way of error catching inside of async await. - -58 -00:30:44,340 --> 00:33:29,940 -Wes Bos: Yeah, exactly. I think that's what everybody's been seeing in all the examples. And that is, that's great if you want to handle the error inside of the actual function itself. So your functions called display data, and you try to fetch some data and you know, in that function, you also want to handle how the error happens, you just wrap all your code in a try. And then and then you have this catch, where if anything goes wrong, there's a 404, on one of your GET requests, or you have a syntax error, or you try to call a method, like on on the return data, that the method isn't there, then then it's going to all fall back to a catch. And that's sort of how promises have worked in the past is that you can just put one catch at the end of all your, then then then then then, at any time, one of those promises, trips up, then it'll fall back to the very end, catch. So that's good. It's just like, a little bit ugly in terms of writing your code, because we talked about this beautiful sink away. And now you're just like kind of juggling it up again, with this try catch. So a couple other options that you have here. And and I'm not going to go too deep into them, just because it's very visual. With is with what's called a high order function. And this is, again, this is kind of in the functional programming world, but what you can do is you can just make your a sync function without any error handling in at all, you just assume it works fine. And then you create a another function, that will simply just take in that function as an argument, and chain a dot catch on to the end, and this is totally something you're going to need to look at the code for six or seven times. And that will then sort of that high order function will just return a new function, that's sort of like the safety FIDE version of that function where it has just tacked on a catch onto the the end of that. And then inside of that catch you you deal with it, whichever way that you want. And that's that's exactly how we use that in my node course. Because in my node course, anytime in most of my routes, I'm doing things like querying the database, and resizing images and checking for permissions. And if any of those things go wrong person, the query goes wrong, they don't have the correct permissions. You can somebody just throw an error or the error will be thrown for you, because you you did some bad code. And then what will happen is you wrap all of your routes in this higher order function. And then you can handle all of the errors for all of your routes by simply just passing that error to a 404 page or a 500. Page and displaying exactly what had gone wrong. In that case, yeah, - -59 -00:33:29,970 --> 00:33:34,110 -Scott Tolinski: that sounds a lot better to me, or at least a lot more familiar, you know, - -60 -00:33:34,590 --> 00:35:32,520 -Wes Bos: exactly. And that's really good for when you want to handle all of the errors in the exact same way. Without having to specifically every single time you write a new route, or every time you have a new new controller function, you don't have to, you don't have to deal with like, making sure that you had handled that error in the correct way, you know that it's just right, because you've wrapped it in this higher order function. Um, what else? What are the other ones that you can handle the error when you call it. So if you have in a sync function, you could like let's say we have in a sync function called load data, what you can do is you can just call load data without any error handling inside of that function, and then just chain a dot catch on to the end. Because you can load data function is a promise. So you can just chain a catch on to the end. So you say like, I'm going to run this function and I'm going to deal with it right after I did with like a proper catch, there's no need to wrap it in a try catch, you can just chain the promise based catch on to the end of it. And then finally, in node, so pretty soon node is going to quit the process if you have an unhandled promise. So that means like some people just like assume all of their sink await it's gonna work out just fine and if something goes wrong Notice going to quit the process mean that if you're running like a server, your entire server is gonna fall over, and your website will go down. So what you can do to sort of like, catch yourself there is you can listen for an event called unhandled rejection. So it's processed that on unhandled rejection. And then in that case, you can do something, log it, send it off to, like, I use Sentry, and I'll send that data off to century. And then I don't know whatever else you want to want to do with it, or just eat the error and pretend it didn't happen. - -61 -00:35:33,000 --> 00:35:39,780 -Scott Tolinski: sweep it under the rug. There's nothing wrong here. Everything's perfect. Exactly. So - -62 -00:35:39,810 --> 00:35:53,130 -Wes Bos: those are just a couple different error, error handling, I need to write a blog post or something like this, because I need to get the code out in the open. But the talk I did do has a has all the examples as well. I'll link to some screenshots of it as well. - -63 -00:35:53,190 --> 00:35:54,420 -Scott Tolinski: Yeah, blog post 10. - -64 -00:35:54,900 --> 00:36:12,600 -Wes Bos: Blog it. Oh, yeah. So let's let's handle it. Stop it with browser support. Obviously, async await is not in every single browser. It's in most of the most recent browsers. But like, what do you do if you have to support iE 10? Or iE 11? Where it's not in? Yeah. What do you do with that? Scott? - -65 -00:36:12,900 --> 00:37:29,280 -Scott Tolinski: I mean, the answer is the same thing as the answers for everything at this point is Yep, run your code through a compiler Babel in this case. So yeah, Babel is going to make sure that your async code or your async await code is going to be compliant with whatever browsers you tell it now. Now, with the new way of telling Babel to almost like an autoprefixer type, you know what browsers to support, you can just write your code and say, hey, I want to support these browsers or whatever. And Babel is going to know if that needs to actually transform that async await or not. So I mean, I'm sorry, hit my mic. So I mean, that's the answer for everything nowadays, right? Which is way better than it used to be. Because the way it used to be was like there's some new fancy CSS, there's some new fancy JavaScript, and guess what, you can't use it. You can use it in five years. And now the answer is, hey, you can use it, you just have to either configure your build tool properly, or you, you just you have to know what polyfill to use or something like that. So that's the answer is that you'll want to use something like Babel in your build process to make your JavaScript compatible. And you probably already are anyway, so it's true. - -66 -00:37:29,310 --> 00:38:55,190 -Wes Bos: Yeah, you're in good shape, then. So it's definitely something that you can start using today. One other thing I forgot that we didn't talk about, and this is probably one of the biggest criticisms of using promises is that there is no way to abort, or there's no way to cancel a promise. So let me give you an example. If you have a, like a website, and you're searching for products, and somebody types in like someone's searching for a shirt, and they type sh IR, and then they scratch their nose. And you would you would probably say, Oh, the user has stopped typing, let's do a quick fetch to the back end, and search the back end for things that are sh IR. And then you come back with the data. What could possibly happen though, is they could keep typing, and they put a T on that. And then you send off another request. And now all of a sudden you have to fetch requests going off to your back end. And there is a possibility that they will come back out of order. And your your shirt will come back first and then your sh IR will come back after that. And then you overwrite with old data. So what you need to do in that case, you need to cancel that first request, because you're now searching for the SH IRT. And one of the big, big things with promises that you couldn't cancel it, which is a game stopper, a game stopper. What a showstopper shows - -67 -00:38:55,860 --> 00:39:00,170 -Scott Tolinski: shoppers like positive like show stuff. Yes, like, whoo, that's cool. - -68 -00:39:00,210 --> 00:39:30,000 -Wes Bos: Yeah, show Safra wood. Okay, this is a game stopper. And the answer to that is now we have this thing called a board controller. It's kind of cool. It's like its own thing. And it can be used for more than just promises. But that will allow you to abort fetches. And Jake Archibald has a really good article on the Chrome Developers website. I'll link to it in the show notes about how to do a portable fetch. So that's not something you really have to worry about anymore. - -69 -00:39:30,090 --> 00:39:38,010 -Scott Tolinski: Nice. Yeah. Yeah, all these things, man. There's just gets better and better all the time. Every every single day It feels like - -70 -00:39:38,400 --> 00:40:21,090 -Wes Bos: Exactly. And also, if you are using a different language, whenever we talk about this stuff, people get a little upset though. My language just had this for a long time. Like, let's just take a second to congratulate everybody else that has a different language. Like Good Good for you. Right? Like we're we're really excited that it's coming to you. Yeah. We're really excited that this is coming to JavaScript because the this has been a huge pain point for for JavaScript developers in the last like, five years or so. So it's super excited that async await is becoming mature. My mom, let's talk you got anything else about it? Or should we move into some some sick pics and plugs? - -71 -00:40:21,110 --> 00:41:01,320 -Scott Tolinski: I think I think we said everything there there is to say about a sink await. Other than, hey, just use it, get out there and use it because I guarantee it'll ask you this all the time. But I guarantee if you get out there and just start writing the code, you're gonna be like, Oh, this is awesome. This has made my life a lot better, especially if you're like, imagine if you're making the jump from callbacks to async await and just skipping promises, which I I mean, you should still learn promises, but like, imagine making that jump and all of a sudden you're just returning a value from a function rather than having to reframe a callback like you use a sink away. It is awesome. It makes your life super easy. So yeah, use it. - -72 -00:41:02,129 --> 00:41:05,250 -Wes Bos: Awesome. You got a sick pick for me today. - -73 -00:41:05,550 --> 00:42:15,540 -Scott Tolinski: Yeah, I got a sick pic. And it's a it's a sick pic that we are, are both both pretty high on right now which is the ring doorbell I got this thing on Black Friday. And I got the cheap last year's model. So I know you had some issues with your last year's model. I did not have any issues with my last year's model. So if you're looking for maybe like a cheaper solution, you can get that one and try it out. The new one I don't know too much about it other than its little sleeker West you might have some some more knowledge there. But like I i this thing has kind of changed how I deal with stuff at my front door, which is kind of ridiculous to hear. But like I now instantly know if there's a package outside I instantly know if somebody's soliciting at my door. Yeah, you know, everything is become a lot nicer with how you interact with who's at your door and whatever. Sure. The security features and stuff like that are great. I actually I like this primarily so that I know when my packages arrive I get a little buzz This is someone's at my door. Well I'm not expecting an email right now must be a package. I'm gonna be out there and get it like - -74 -00:42:15,570 --> 00:43:26,150 -Wes Bos: that. Me too. That's exactly what I use it for is I think I've had a couple packages swiped off my front porch. Yeah, or the incompetent delivery. There's in Canada that they're using this new like kind of Uber for package delivery. So anybody with a 98 camera ink and start delivering packages and like it's called intelecom it's brutal they're just awesome. They're tossing or just not showing up or is marked as delivered and it shows up like for I got so much stuff for free over the past couple of months because like it says delivered and I'm like hey Amazon it's not delivered and then like a week and a half later it actually shows up because the guy found it underneath his spare tire or something like that. Anyways, ring It's amazing. I've got the the older one as well I've had some trouble because of the way that my house is angled out the road. So anytime a snowplow drives by with its big flashy lights, it triggers motion. And ring is amazing. They sent me these like wedges that you like put underneath so it'll angle the doorbell doorbell down a little bit and hopefully it won't trigger him. So I'm gonna try that it's just been freezing. - -75 -00:43:26,610 --> 00:43:35,420 -Scott Tolinski: So a installation that was super easy right I mean, I didn't even have to wire mine up it's all wireless. loved all of that stuff. - -76 -00:43:35,480 --> 00:43:36,150 -Wes Bos: Are you just on battery - -77 -00:43:36,150 --> 00:44:34,260 -Scott Tolinski: Are you hard wired I'm on I'm on battery because we have this Our house is kind of weird. We have a standard Denver square and it's it's like a house layout you see all over the place but our porch has been totally screened off into some kind of like, I don't know if you'd call like a Florida room or something like that. It's totally totally windowed off. And our doorbell like broke a while ago and our our doorbells on essentially a door that's not our main front door really, it's a door. And so like I went to replace the doorbell and I took it off expecting it to be all wired up. And sure enough, it's a wired doorbell or a wireless doorbell. And I've like like how am I supposed to replace this now I have to replace like the entire system. So the ring was like a perfect fit for that. So yeah, I just I'm running it on battery. I just screwed it into the place. And then uh yeah, I actually I also love getting the ring. Oh, yeah, you're holding the ring screw right I - -78 -00:44:34,260 --> 00:44:38,220 -Wes Bos: got the little ring screwdriver with the torques hat on it. Yeah, - -79 -00:44:38,700 --> 00:44:47,820 -Scott Tolinski: but I love getting the messages on your the notifications on your phone too. Rather than just hearing the doorbell my dogs don't go absolutely nuts. Now anytime anyone rings the doorbell? - -80 -00:44:47,820 --> 00:44:52,470 -Wes Bos: Sure do use the little chime thing when someone kind of walks up it chimes - -81 -00:44:53,010 --> 00:44:55,500 -Unknown: or when they push it. Oh yeah, - -82 -00:44:55,530 --> 00:44:56,430 -Wes Bos: we actually - -83 -00:44:56,520 --> 00:44:58,770 -Unknown: we don't have time on my phone when they win mode. So - -84 -00:44:58,770 --> 00:45:01,650 -Wes Bos: it's only on your phone. Right, you don't have an internal chime. - -85 -00:45:01,710 --> 00:45:06,900 -Scott Tolinski: I don't I didn't buy the external, like plugged into the wall one, but it's only set to trigger when you - -86 -00:45:06,930 --> 00:46:17,130 -Wes Bos: push it. Okay, yeah, we, we bought the external one because we didn't have a doorbell at all, ever. So it was just old school knocking. And I would always miss packages. So I hated that now it's awesome to be able to get the notifications, we bought the external chime. And then because it's so frickin cold here, the battery just gets zapped, like they tell you it goes six months, which is not bad, you unscrew it twice a year and charge it up. But after two weeks, it was at like 30%. And every time I got really cold, it would tell you like cannot charge. Or it's like it's like your doorbells going to die because it's too cold. So I am luckily we got new doors and so I I just ran a low voltage wire through the the casement of the door before they sealed it up. And then you can buy this little transformer that takes your 120 down to like 20 volts or something like that. And then you can you can hook that up to the doorbell doorbell no problem. So it was extra pretty painless. You just bought it at like Home Depot for 10 bucks screwed it right into a light socket that was in my basement and he's up and running. Cool. - -87 -00:46:17,160 --> 00:46:23,760 -Scott Tolinski: Yeah, maybe when uh, when I get those windows redone we'll redo that entire Florida room area. And yeah. - -88 -00:46:25,440 --> 00:46:36,960 -Wes Bos: We we want to do if you're interested, let us know, we want to do an episode just on home automation in general, because I've been by I've been pretty excited about this whole home automation thing, and I've bought a whole bunch of stuff lately. - -89 -00:46:37,080 --> 00:46:45,390 -Scott Tolinski: Yeah, I'm super interested in it too. Although, being the owner of an old house is a little bit more difficult. - -90 -00:46:45,840 --> 00:49:22,980 -Wes Bos: Yeah. Oh, definitely. It's it's kind of painful trying to retrofit 140 year old house with all this old stuff. Well, yeah, what's your sin my, my sick, I had a sick pick today, but I wasn't super sick about it. So actually, I'm going to give you a sick tip, which is breaking the rules, but whatever we can, we can do it. And it's something I just learned about this morning and in the latest Chrome Canary. So this is coming to Chrome in six weeks or whatever. The autoplay is going to change in Chrome. So we've all been to websites where autoplay will. It'll autoplay, like annoying video about something you're like, where is it, and you have to find the pause button, like I hate this website, and you close the tab. So Chrome has changed it now. Where if you have a video on autoplay, and it is not muted, it will not play unless a user explicitly click something very similar to how pop up blockers have worked for 15 years where you can't pop up a window unless someone actually explicitly clicks something and you how you attach that with an action. So that's cool, but like what about things like YouTube, Netflix or my own course platform where you want to autoplay the next video, I was getting these errors, and it would say like, Here, let me read you the error. Dom exception play can only be initiated by user gesture. So my users have to keep pressing play to play the next video. And that sucks if you're just trying to like sit there and watch a whole bunch of videos. So I dug into it. And I found out that there's this new thing called a media engagement index, where you if your user consumes visits your website more than five times consumes the media with both audio and video. For more than seven seconds, the tab has to be active, and the size of the video must be greater than 200 by 140. If they do all of these things, which it sounds like a lot, but it's it was pretty easy for for me to trigger it, then chrome gives your website a height greater than 0.3 media engagement score, and then you are allowed to call play programmatically without having the user clicks. So definitely was the head scratcher for a while because all of the searching it just turned up stuff from like Android and iOS because like you haven't been able to autoplay on those things for a long time. But now it's coming to the desktop. So if you have any sort of auto playing video on your website, either make sure it's muted or get ready to try get a high media engagement score. - -91 -00:49:23,190 --> 00:49:45,240 -Scott Tolinski: Nice. I actually wonder this my autoplay broken the latest Chrome Canary but I'm using YouTube YouTube embeds in my my autoplay is no longer allowing like the option to autoplay this video on the YouTube embed is like just totally stopped working and that I'm not getting any sort of browser error. I'm wondering if this has anything to do with this. That's likely - -92 -00:49:45,240 --> 00:50:19,830 -Wes Bos: it because like nobody is exempt from this YouTube themselves. So you can visit this URL Chrome, colon slash slash media dash engagement and it will tell you the media engagement do right now while I'm talking about this, I'll send you the link on slack From media engagement, and that will tell you what your score is for that specific website. And then I haven't read too deep into it. But there's this Google Doc that talks about how embeds work. So maybe I don't know if the score is related to your own website or to youtube.com? likely your own right. Yeah, - -93 -00:50:19,830 --> 00:50:26,760 -Scott Tolinski: that's a great question. And on top of that, like, is this for a page specifically? Or is this for the entire site, - -94 -00:50:27,719 --> 00:51:13,800 -Wes Bos: this is for the entire its domain base, like all the other all other security stuff. So that's, that's pretty interesting. And for, I think, for most people, that won't matter, because someone will come to your website, hit play, it'll hit all those, the five visits kind of worries me because if someone's trying to view my course, they have to come visit five times. Not sure how that will work. But I ran into a big problem because I was trying to fix something. So I just kept playing like, two seconds of video and then toggling over to my editor. And that was not a focused tab. So I got a really low score for my own domain. And I had to sit there and watch my own videos for 10 minutes to bump up my my score enough that I could get the autoplay working again. Yeah, I'm getting a score of zero. - -95 -00:51:14,880 --> 00:51:24,030 -Scott Tolinski: For tutorials, calm on the media engagement. But my local host has a score of point. 03 so I - -96 -00:51:24,030 --> 00:51:29,610 -Wes Bos: don't know. 03. See, that's Yeah, point 03 or 0.30. Point or point? - -97 -00:51:29,610 --> 00:51:31,650 -Unknown: 03. Yeah, see, that's - -98 -00:51:31,650 --> 00:51:32,460 -Wes Bos: not high enough. That's - -99 -00:51:32,460 --> 00:51:39,000 -Scott Tolinski: just problems in watch my stuff. Although YouTube has a big old engagement score, so who knows here? - -100 -00:51:39,689 --> 00:52:07,590 -Wes Bos: Yeah, I think it's domain based, especially with the iframe honor author read into it after this. Yeah. Interesting. to something that popped up. Hopefully, it saves a few people some headaches as to why these things like the whole thing about web development is it's supposed to be code it once and it works forever. But like stuff like this causes your your websites to just rot. And it's good to know that there's nothing you can do about sick tip. - -101 -00:52:08,520 --> 00:52:12,840 -Sick tip. You got any shameless plugs for me. - -102 -00:52:13,049 --> 00:53:09,270 -Scott Tolinski: Um, though, I did add some videos, though, to my full stack graph QL Series. So there's now I believe, 17 videos for free in that series. So head on over to YouTube and check out the series is called full stack graph qL with Meteor react, and Apollo teaches you all sorts about stuff. We're we just added on the latest videos, we added user accounts. So now you can log in, is actually built like the world's worst login form because I did it in like six minutes. It's great. But yeah, you now have user accounts. And you can use those user accounts in the context of your queries and return some secure data and stuff like that, instead of returning all of the data, you get just the users data automatically and stuff like that. So if you want to learn graph qL, and you want to do so with react in Meteor and Apollo, that's a great place to do it. Videos are free. They're 17. There's new ones added every week. - -103 -00:53:10,260 --> 00:53:18,510 -Wes Bos: Awesome. People really like the graph qL episode last week. So that was really cool to hear that. People were enlightened by it. - -104 -00:53:18,540 --> 00:53:24,960 -Scott Tolinski: Yeah, I love it. I'm a big fan. I'm a I'm a I don't know, I'm total convert at this point. I'm super into it. - -105 -00:53:25,560 --> 00:53:58,260 -Wes Bos: Me too. My, what is it called a shameless plug is my CSS Grid course will be out on Thursday. I'm saying it here. It's been done for like two weeks. But I have a sponsor, which is amazing. And they are just getting some dotting their eyes crossing the T's. Anytime you work with a larger company, there's always some slowness with their legal department to make sure everything is on the up and up. So looking like Thursday, it's going to launch and I'm super excited about that. It's going to be at CSS grid.io. And it possibly is already out. But if you're listening to this nice. - -106 -00:53:59,190 --> 00:53:59,880 -Scott Tolinski: Alright, and - -107 -00:54:00,390 --> 00:54:06,120 -Wes Bos: so for that one. Good. Good. We'll see you. Next week. - -108 -00:54:06,210 --> 00:54:07,140 -Unknown: Next week. - -109 -00:54:07,140 --> 00:54:08,580 -Have a good one. Yeah. - -110 -00:54:09,030 --> 00:54:10,380 -Later, please. - -111 -00:54:12,660 --> 00:54:21,720 -Scott Tolinski: Head on over to syntax dad FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax280.srt b/transcripts/Syntax280.srt deleted file mode 100644 index bc81937b0..000000000 --- a/transcripts/Syntax280.srt +++ /dev/null @@ -1,420 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax - -2 -00:00:02,849 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:07,980 -development treats out there. strap yourself in and get ready - -4 -00:00:08,009 --> 00:00:49,590 -Wes Bos: here is got to live ski and Wes Bos. Welcome to syntax. This is the podcast with the tastiest web development treats. Today, we have got another potluck for you. This is actually we're kind of like in between seasons right now the last episode you listen to was Scott and I saying the next episode will be a new season. But then we also realized we forgot to record an extra episode or two. So we're in between seasons right now. And we've got another potluck for you because we took like what like a month off and the the Pollak questions have just been coming in. So we'll get to it just a sec. today. We are sponsored by Sentry and Freshbooks will talk about them partway through the episode. How you doing today, Scott? - -5 -00:00:49,949 --> 00:01:14,870 -Scott Tolinski: e I'm doing good in betweens in between seasons here. Season 1.5 whatever you want to call it. Yeah, I'm doing I'm doing good. I'm gonna it's gonna take a little bit to get back into the podcasting. But I've been doing a lot of recording. So it's not like I haven't haven't been talking into a microphone. I'm excited to get into some of these pilot questions. It seemed like there was a lot of great stuff in here. So yeah. Do you want to kick it off with number one? - -6 -00:01:15,119 --> 00:02:47,520 -Wes Bos: Yes, a question. And this is something I've got a lot of questions about from Loki is what are your guys thoughts on the Mozilla layoffs and how it will affect developer. So if you didn't hear Mozilla, because they said because of Coronavirus, their, their income has dramatically dropped. And they had to lay off what like 25% of their workforce, which was something like 250 devs, it looked like all of the people that were laid off, they worked in dev tools, they worked on the browser, like the entire team that works on Firefox Dev Tools was just laid off. And all the folks that work on MDN, the docs were laid off. A lot of the developer advocates, the people that work in CSS working group and and all that they were all laid off, which is a huge blow to I think just a web development in general. And I just kind of have this like sick to my stomach feeling about it. So thoughts about that. I think that's a major bummer. That sort of the one company that we always sort of relied on to to keep it real, and like sort of keep that flame alive. Because there's really the only company against Google, I guess, like Apple has their own browser as well. So maybe that's that's not entirely true. But I was kind of bummed to see that especially because like the entire Dev Tools team was laid off. And I've been a Firefox user for maybe nine months. And I've been loving the dev tools. But like, I like At what point is just going to start to decay and that I'm going to have to switch back right? - -7 -00:02:47,639 --> 00:03:33,600 -Scott Tolinski: Well, yeah, no, I mean, I don't think Firefox is going away. I don't know, the whole thing is just very hard to hard to tell what's like what the long term effects of this are going to be considering that it is such a big hit to the web. Overall, as we know it, especially the web, as many of us would like to know, it's, you know, without being consistently tracked by, you know, Mark Zuckerberg and whoever, right? So I don't know, the whole the whole business is not good. I don't I don't know what to say other than man, whoo, we'll just have to, I don't know be tracking the repercussions of this for a long time, the amount of talent they let go. I don't know what you you know, about rust West, you know, a whole lot about rust. Um, - -8 -00:03:33,629 --> 00:03:38,160 -Wes Bos: not a whole lot. Now. I know that like Firefox was built in that, but that's about it. - -9 -00:03:38,729 --> 00:04:52,760 -Scott Tolinski: I think parts of Firefox are built in it rust. It's like a language a systems language. That is I've been using it for a little bit now just to learn a new language. And it's, it has enough stuff in line with TypeScript to feel at home. But in the same regard, it is a much more difficult language than anything I've written before. In the past either way, rust is largely developed out of Mozilla. So there was obviously a big concern over that considering the wasm stuff. There's like a lot of very web, essentially dire consequences of potentially removing some of these people. However, it does seem like the majority of the core team of rust is still there. So that that at least is good, but man, you can't feel like like, I don't know, there's just so many facets of the web overall that this touches, whether it is the web stuff, or it is the documentation, the MD and sort of the dev tools themselves, which are always getting better, man, I don't know what to tell you. I've been using brave for a little bit here. So I haven't exactly been on the Firefox train super hard. But man, do love those dev tools. And hopefully they figure something out to regain some of that talent. - -10 -00:04:53,069 --> 00:05:54,720 -Wes Bos: Yeah, we should say that like like MDN is not going anywhere. MDM for a long time has been a joint partnership. between Google and a couple other companies as well, they've even put out a blog post saying like, Don't worry, we're not going anywhere. But like Mozilla did employ people just to work on the docks full time. So certainly the the effort of those people probably won't be full time anymore, unless a sort of another company can scoop them up. I did see I'm not sure if this was related or not to what we're talking about. But I did see Jen Simmons who part of CSS Working Group, huge advocate for all of the new layout stuff. And she works a lot on all of the new layout stuff that we get Flexbox grid, I think container queries, a lot of stuff like that. She's working at Safari now, which that made me feel so good. I'm like, oh, Safari cares, like they hired. They hired her. And she's asking all kinds of stuff on Twitter about like, what you want to see in Safari, and maybe Safari will now get a sort of catch up to where the other browsers are. - -11 -00:05:54,960 --> 00:07:17,250 -Scott Tolinski: Yeah, I've been actually using Safari a bit more than usual. Because since I got the iPhone, you know, the good thing about the Apple phone is that like, if you use all of Apple's software, then like, then the phone works very, very well. And if you start trying to use the other people's software, it doesn't work as well, because of Apple's gardens that they put in a software, right? Whether it is the browser, things where it's like not true chrome that you're running on the iPhone, compared to the Android, like, I've been using Safari, and it's not terrible. There are a lot of things I like it. In fact, in the latest level of tutorials course that I'm recording, right now, I'm using Safari as the browser nice, but for no reason. Because the dev tools aren't as good. But I'm using I'm using Safari specifically, just because the tab bar is smaller at the top and it takes up less. But I've been I've been sprinkling it in here and there. And it's it's good. I'm glad that the safari team is open to growing the browser and the sort of ways the same regard, I wish it wasn't so hard to publish an extension on the safari web extension store, if you have to pay money and good Apple developers account and have it all those things. So I don't know, we'll see Safari is still good. But there's a lot of like, critical, like, I don't know, deficiencies with it. Like the fact that it doesn't update outside of a actual operating system update those, like - -12 -00:07:17,250 --> 00:07:30,990 -Wes Bos: remind me tomorrow, that's, that's really frustrating. Because like, what we're talking about is that, you know, if you have a Mac, you get this pop up every single day that says there's updates, and every single person presses remind me tomorrow, right for the eternity, - -13 -00:07:31,020 --> 00:07:34,890 -Scott Tolinski: because it's never, never the right time. It's not the right time, I got stuff to do. - -14 -00:07:35,429 --> 00:07:45,150 -Wes Bos: And if you want to update your browser, that's the only way you can update your browser. And that's exactly like, when did that ever happen before? Remember, ie six? - -15 -00:07:46,020 --> 00:08:07,890 -Scott Tolinski: You know, do you remember we had a, I don't know if you were involved. I had a thing on Twitter, I was tweeting about this thing that didn't work in Safari. And they were like, somebody from the safari team was just like, make sure your browsers on this version, and you have to update your iOS. I update my iOS and it worked. It's like, I never I never thought like that. You know, until Yeah, no. Well, I guess I did in the past, but not recently. - -16 -00:08:08,340 --> 00:08:16,380 -Wes Bos: Yeah. And that's not to say, I hate when people say Safari is the new IE because there there are lots of good people working on it that are genuinely concerned with this - -17 -00:08:16,380 --> 00:11:01,950 -Scott Tolinski: stuff. But I say that so i don't i don't mean to put anybody down. And I actually I feel like the browser is very good. There's just like, there whenever I have a bug, it's always because of Safari, not because of Mozilla or chrome, a you know, whatever it again, it's not the new IE by any means. But I get where you're coming from. That was a long answer to low keys. A banger of a first question. The next question is from Brian M. He asks, first of all, love listening to your show. Thank you, Brian. It has definitely motivated to get my career started. Right now. I'm a math teacher. I've married with two kids. And so finding time to code is difficult. Our kids are the same age. So yes, it is difficult. My current situation includes waking up at 4:30am on time, and before the kids wake up, do you either if you have any tips about finding the balance between raising kids getting stuff done around the house having a full time job and trying to teach yourself web development to transition into a different career? Yeah, so I don't know what your wife's schedule is like, because my wife is home. She's currently working, we're both working full time. And even though I get to code for a living, there is a lot of stuff, maybe after hours that I would like to do as well, the coding wise, or even just hobbies or projects or those kind of things time to learn something. And I found it's been very difficult to find that time. Now. I do not have the dedication to wake up at 4:30am to do that, and that's awesome. But really that is the answer. The answer is find some time. Just find some time when you are have any inkling of energy and there is no one to distract you to build in that time. I really don't know my wife and I have gotten Really, really hardcore with our schedules lately. And it's definitely helped make sure everybody knows what's going on when and where and how. But to be honest, unless it's before the kids wake up or after the kids go to bed, unless your partner has the ability to step in and hang out with the kids for, you know, a couple hours here and there on some sort of agreement, and you, you pick up the tab at a later time, man, I don't know that that is a tough time to raise or to like, find that time. One thing I might suggest is if you can listen to you know, whether it's video tutorials, or have something on the TV or, or podcasts like syntax, like listen to this stuff in the time that you're doing your day to day job. So maybe you can double dip a little bit in terms of like learning if you are able to learn while you're all your math teacher. I don't know if you're like grading papers, and you can do that on a robot mode or something like that. I really honestly don't know, I'm not a teacher. But if you can find some time to at least get a little bit of double dipping in I guess that's the only other solution. It's a tough one, Brian. - -18 -00:11:02,580 --> 00:12:49,500 -Wes Bos: Yeah, that's I think you're on the right track is you got it, Something's got to give at some point. And we've talked about this before, but I think it's fine for there to be times in your life where like, you'd probably sit down with your significant other and say, like, Look, like I'm trying to make a career change here, this is gonna be tough for the next year or two, or however long, you think that it's going to take you before you can make that jump to either doing freelance projects, or to getting an entry level job in that type of thing. And really, it's just, it's just about being on the same page with your significant other and being like, I need, like right now. My because of COVID, all of our kids are home. And my wife is still trying to work her job, but she just has to like take care of them Monday to Friday. So like, like, what do we have to do in that case? Well, I'm taking them every single morning, while she goes and works out. And then I give her half an hour an hour every single day where I jump in, and she goes, does a little bit of work here there. And then she tries to squeeze some in when one of the kids is sleeping, and you throw the iPads in front of the kid. And then every single Saturday, I take the kids of myself and I just like take them out of the house somewhere. So she has quiet and is able to do some filming. So like it's by, it's not even close to like the best possible situation or it compared to what we used to have when kids will go to school and things like that. But we're sort of just making it work. And that's not the most fun thing, because obviously we'd like to hang out a little bit more. But these are the times and she's trying to keep her thing going. Because while while these kids are home, so you just got to like eat away little chunks of time here and there and have understanding what their significant other. - -19 -00:12:49,830 --> 00:13:13,860 -Scott Tolinski: Yeah, that's really what's important. And in Courtney, and I've been like I said, we've been really scheduling stuff lately. And I think it's it's helped quite a bit. So just so everybody's on the same page, we're utilizing the calendar more. These are your times because now that she's fully back at work, it's like, oh, we both have like 40 hours a week to put in plus, so it's trying to find those times is especially difficult right now. - -20 -00:13:14,370 --> 00:13:19,169 -Wes Bos: Yeah, I can't wait till these kids back to school, or hopefully school zone calls again. - -21 -00:13:19,440 --> 00:13:21,570 -Scott Tolinski: Yeah, right. Good luck, Brian, you can do it. - -22 -00:13:21,720 --> 00:13:35,429 -Wes Bos: Yes. Good job. Next question we have here is from Diana Garcia, if you have used a drag and drop framework using react to which one would you choose? I have never used this dude. Nor do I know of any actually. Scott, have you done this? - -23 -00:13:35,820 --> 00:15:48,630 -Scott Tolinski: Yeah, I have. There's a whole bunch of I've used a whole bunch of them because, you know, they like to try out stuff like this. What's the biggest one the most popular one is react D and D not react Dungeons and Dragons. This is react D and D is probably the most popular one. And this is a very, very good book full full service solution here. It has let's see 14,000 stars on GitHub. So it's got a big community lots of people using it. I don't know how small this thing is the fact that they're not advertising it size means it's probably a little bit heftier. Then there's also reactive beautiful DND from lecien at Atlassian. Is that how you pronounce that company's name? Yeah, okay. And I have to say it out loud. And this one's nice. It's definitely like they try to say hey, this is very electro like this is got this stuff, the kind of experiences that you'd want. And again, they are not offering the size. super easily here. They're not showing exactly how big in most of these libraries seem like they are a little hefty. So so this is my recommendation. If you need a lot of drag and drop stuff, like a lot of flexibility, a lot of drag and drop stuff, go with the React beautiful DND or react DND either one of those is going to be just fine. That said if you are potentially Using animations there at your site, and maybe you just need a draggable list, then I would take a look at just using something like framer motion or react spring. Because either one of those framer emotion or react spring allows you to do some really nice beautiful drag and drop stuff fairly easily itself without having to introduce another library just to do drag and drop. So that's what we do on level of tutorials, all of our drag and drop is done through framer motion. And it's not too too bad. In fact, we'll be doing that video tutorial that I'm working on this month. But that's beyond the point. I think if you have an animation solution already in place, use an animation solution. If you don't use a dedicated library, I wouldn't I wouldn't code your own from scratch without either of those two things, I think - -24 -00:15:49,140 --> 00:16:06,240 -Wes Bos: next question is from alley end to end testing versus visual regression testing. Which web app development cycle should you implement each of these the best tools versus open source? So I'm gonna pass this one off to Scott, because I know you have a lot of opinions on this as well. - -25 -00:16:06,799 --> 00:19:22,550 -Scott Tolinski: Yeah, so eavers visual regression testing. ETP stands for end to end at testing. First visual regression testing. Typically, in end to end testing situations, what you're doing is loading up the application as it is. And as it's being used by the users. Some frameworks for this would be like Cypress, and with Cypress, it physically shows you a browser window of an actual Chrome browser or Mozilla Firefox browser using the application. And then you use any sort of jQuery or whatever the like syntax is, for actually manipulating the site, okay, you find this element, make sure it exists. Okay, now you find this element, you click on it, and now it should take you to this page. So end to end testing is largely making sure that the application works and shows up as expected, as it is like rendered in a real browser, where visual regression testing is, as the name might suggest, is straight up visual testing. Like let's say you have thousands of pages, you take a screenshot of those pages and say, this is how these pages should look, then maybe you change the CSS and another page, and you update that visual test. But that CSS change had unexpected consequences. on another page, what visual regression testing is going to do is let you know that hey, something that you didn't expect to change visually changed visually by a change that you made. So well end to end testing is largely focused on like the actual user interactions and the functionality of this site. Visual regression testing is the straight up like visual testing, or like the testing of visual elements on your site. The thing is, is that I think you can do visual regression testing in Cypress as well, I really done so there are I saw, I went to was the conference, it was developed Denver, Denver develop a couple years ago when I was speaking at it, and there was a really neat talk on like, Cyprus superpowers or something like that. And it was like a paid extension. So I didn't get to try it, because you had to sign up for some sort of service. But yeah, they were they were doing straight up visual regression testing. And it seemed very cool. I was super into the with general way that they were doing it. But obviously, it was a little bit overkill for something like me, at which stage in app development cycle, do you implement them, I implement, etc. as, as we let go as we complete a feature. I'm not doing test driven development with end to end testing. But when, when a feature is done, one thing that we we do is we have like an E t test that all it does is just hit every single view on the site, like every single page or type of page. That way we can see if there's just like any generic loading bugs on an individual page. So like the moment I create a page or a route or something will always add it to the IE testing. And so I add tests as you go, we do not do any visual regression testing, I can imagine if you would, you would probably do that at the very end of a production application. Because man, things are gonna change visual a lot when you're working on it, that's for sure. So I wouldn't do that until the very end of like, or only a production. I - -26 -00:19:22,550 --> 00:20:35,250 -Wes Bos: do the Cypress as I finish a piece of functionality. And I haven't done visual regression testing and probably five years. And when I did use it, it was awesome, because it would literally show you the depths of the pages that changed. But it was at the time it was like sometimes it wouldn't work or sometimes the font one load in time. And sometimes it was a little bit different. And it was annoying enough that you'd be like, Ah, it failed. It's probably just another thing and you have to go force it through and be like it's fine, but I bet it's better now because it's like we've had major leaps and bounds In in headless Chrome, which can to just take screenshots for you, there's, there's this thing called Percy IO. I've never tried it, but I've heard a lot about it. I want to try it out at some point, because that's usually like, that's not necessarily a huge problem that I have. But it's nice to know that if you're adding a little bit of CSS, you're not accidentally nuking something else on the website, or even even with with JavaScript, if you were to, if you're writing a server rendered react application, and you goof up some JavaScript, then, of course, you're gonna see something different spit out on the page. So that's key as well. - -27 -00:20:35,300 --> 00:22:28,860 -Scott Tolinski: Yeah, totally. Next question is from Rob Dominguez. He says, I teach a high school course in web development, for a group of students who have a solid knowledge of HTML and CSS and a decent understanding of JavaScript would spelt be a good framework entering into component based development for the first time. Love the show. Thanks for the tips. Thank you, Rob. So my thoughts on this are Yes, I think so would be a good option for that. Because it's not too lot. Like when you're learning react, there's so many little react gotchas, right. There's so many little react things, even though there is like the quote, unquote, just JavaScript aspect of react, you do get better at JavaScript from react. I think there are a lot of little things that are gonna throw people off, especially if you have an HTML and CSS background. When I when I like to think about spelt, yes, spelt is different than HTML and CSS. But it reminds me a lot of in Angular one, how it was really easy to say, Oh, you know, here is some HTML. And guess what we just, we just sprinkle in some like interesting little additional attributes on this. And all of a sudden, it's a loop. That is probably a little bit easier to to learn. First and foremost, I remember really finding it easy to learn Angular one, specifically, when it wasn't all about having to work around to the angular or the framework or directives knows all about, all right, you just throw something on scope. And now you get a loop and whatever, and you get to really understand in a way that is a little easier. To me, it seems like spelt is even like a nice little stepping stone into working in dynamic HTML and JavaScript overall. But so yeah, I would think spelt is a great option for that, especially just because again, it is it is mirroring the HTML so nicely, and it makes the interactivity parts of it fairly simple, comparatively to react. - -28 -00:22:29,250 --> 00:23:28,530 -Wes Bos: I was gonna say all of those things. So ditto, because a question from Eric is, what is a good good let Google Analytics alternative in 2020, I have a site on Netlify. But the nine bucks a month seems a bit steep for what the site is. So just a quick, rundown Netlify tracks analytics based on server side data. So there's no JavaScript library that gets that gets put in. And that's really cool, because the analytics are better than client side, because almost all developers are blocking most of these analytic tools anyway. And it's just very basic analytics, probably enough that you need, but you have to pay the nine bucks. And for some websites, that's a lot to pay over $100 a year just to add analytics to something. So it's flipping through the flipping the domain through CloudFlare, just for the analytics seems crazy, but is it worth it? I'm gonna go ahead and say yes, it's our Sorry, no, it's not crazy. - -29 -00:23:28,740 --> 00:23:30,000 -Scott Tolinski: Yes, it is worth it. - -30 -00:23:30,030 --> 00:24:30,570 -Wes Bos: Yes, it totally is worth it. By putting CloudFlare you put your DNS on CloudFlare, all your traffic goes through CloudFlare. And they actually give you really good analytics for free. So that is not crazy. That is totally worth it. Alternatives to be awesome. I'd love to get off the Google overlord. So we see we're starting to see this a lot more is that like, all of these cool tools from Google are cool. But a lot of people don't like the fact that they're injecting Google's little tentacles into every single website that we build. And we're starting to see that. What was the other one h capture? Yeah, normally talked about that one that was like an alternative to reCAPTCHA. Quite honestly, I still use Google Analytics. I just don't trust it that much, because of the fact that everyone blocks those Google scripts on all of it. So I usually will go for my cloud for analytics, because regardless of the type of site that I have, that is giving me the best stats that I have there. You have some other ones here. - -31 -00:24:31,140 --> 00:25:26,580 -Scott Tolinski: Yeah, I have two, two side options, one for a little bit more basic security, focused analytics, and then one for a little bit more hefty analytics. Now the heftier one in terms of like being able to track way more things is heap heap that i o allows you to track a whole ton of stuff without having Google's grubby fingers on it. You get all sorts of cool stuff from this, you get a lot of great UI out of this application. You can Track user flows. To me, this is like a little bit more, it's a little bit more interesting than Google Analytics overall anyways, so I think keeps a great choice. That said, if you were concerned about the pricing, let's say heap is free for limited session volume, three months of data history and one user license on one product. And then let's see, the very next platform is contact us. So I don't think it's cheap. So if you want to try get started for free, - -32 -00:25:26,640 --> 00:25:30,210 -Wes Bos: I have used it before contact us is always the most expensive - -33 -00:25:30,210 --> 00:26:27,120 -Scott Tolinski: option. It is either what we used to design or not design a developer site for the first agency I worked at. And it was for these trainers. And the trainers, they weren't really that expensive, like they were expensive. But it compared to other exercise equipment, they weren't that expensive. And in no part in the store, did they allow us to put the price of the thing anywhere, they just had like a contact us for all of the prices. It's like, we built this whole ecommerce store, it had no buy buttons, just contact us. And we were just like, come on, put the price on. And then they did a survey about like, you know, what do you like about the site? What do you don't like what, you know, that kind of thing. They had a third party company, not even as do a survey for them. And there was like, 90% of the responses were like, why can't I just get the price. And their whole reasoning was because they wanted to keep their whole sales team that been used to like cold calling people, but they let Yeah, be used. And I was just like, come on your shoulder. Brian hates it. - -34 -00:26:29,250 --> 00:26:43,290 -Wes Bos: On SpaceX, his website, they give you the price to buy a rocket ship. And everyone's like, oh, if they can give you a price on their website to buy a rocket ship, you can tell us how much your SAS is gonna cost me. All right, - -35 -00:26:43,320 --> 00:27:19,710 -Scott Tolinski: please. Yeah, please contact us. Okay, yeah, the next option is an analytics service that I actually use called fathom used fathom. It's pretty neat. It looks nice. It is a very simple, like in terms of UI interface. It's not intense at all. This is a paid product, though, as well. However, it's 14 bucks a month for the lowest tier. So it's not exactly cheap. We were paying for the year. So if you're not looking for that $9 one either way. They're like a very privacy focused analytics company. And I feel good about supporting a small business like this. So - -36 -00:27:20,070 --> 00:27:35,670 -Wes Bos: is this some Paul Jarvis's company? It is? Yeah. Oh, yeah. Yeah. Paul Jarvis is the the guy behind company of one. I think that's a pretty good book, if you want to run the company have one? So yes, cool. I like this, I should check this out. - -37 -00:27:35,910 --> 00:29:56,910 -Scott Tolinski: Yeah, I've been using it now for several months, maybe four or five months. And I like it. I like the UI. I like that. It's simple, looks nice, overall, big fan. And I'm also a big fan of another service that I use every single month, and that is sentry@sentry.io. Sentry is the best place to track all of your errors and exceptions in one easy to use interface. And let me tell you, I've been talking about some of their features, one of their features that I absolutely love that I've mentioned before, and here is the performance metrics, because hey, why new, isn't it? Yeah, it's brand new. And I've been loving it, the interface is really nice. It basically just shows you a table of all of your your routes that people had, since Sentry is already sort of tracking these errors and exceptions, they can also track the speed at which a took a given route to load. And that even gives you a user misery score. And the cool thing is, is you could say, Okay, I want to look at which page of mine has the highest failure rate. And okay, I click that. And now I see a page that has a high failure rate. In fact, this page, I've never seen this because this just came in. But this page has a 100% failure rate, which means that I have a page somewhere that's being linked, that is a page that no longer exists, it's a good opportunity for me to write a redirect to prevent somebody from hitting a 404. Either way, this thing is awesome. I absolutely love it. I'm on here all the time looking at these various routes and seeing which are the slowest routes on my page for real users. So if you want to try this out, head on over to Sentry a Sentry.io use the coupon code at tasty treat all lowercase all one word and you will get two months for free Oh Sentry today. So thank you very much for Sentry for sponsoring. All right, next question is from a non. I have noticed about a dozen to 100 unique clones of my Git repos after each push. It doesn't matter if the repo is initialized. The picture is added or updated. The repos are still cloned. That traffic section shows the views to my repos at one sometimes two. Is this how interested employers keep tabs on you? Are there some malicious get users What is happening? Wes, do you want to take a stab at this one? I hope this was curious. - -38 -00:29:57,150 --> 00:30:05,250 -Wes Bos: Yeah. Oh, so it's so the guy Makes a Git repo and then all sudden there's 100 clones of that Git repo immediately. - -39 -00:30:05,640 --> 00:30:11,850 -Scott Tolinski: Yeah, that's, that's what I'm getting out of it. How did he find that out? Is there like a like, if you click on a repo, let's click on one of mine. Yeah, - -40 -00:30:11,850 --> 00:30:22,890 -Wes Bos: you can see how who's cloned that repo? Because if you go to a repo, it says in the top right hand corner, how many forks of it? Yeah. Which I assume that's what he means. - -41 -00:30:23,070 --> 00:30:39,990 -Scott Tolinski: So at my moat, what like, you know, my site level, Scott Tolinksi, calm, has had eight forks of it. So I have not seen 100 forks of of anything that I've done that I wouldn't have expected out of? I don't know, this seems very odd to me. - -42 -00:30:40,410 --> 00:31:28,770 -Wes Bos: Yeah, I wish that they gave an example of the revokes, I'd love to dig into the type of people that are, are doing it. And I would think that the reason people are doing this is that like, first of all, it's free to clone a repo. And then you also keep the history of something. So if, if you accidentally push like, like AWS credential, so something a lot of bots will do on GitHub is those scan for anytime somebody accidentally publishes credentials to AWS or Google Cloud or something like that? And then they'll go wild and start mining Bitcoin or sending spam or something like that? Do you think that this is like basically a new version of remember when you used to be able to search code on GitHub and people just search for API keys via the search functionality? - -43 -00:31:28,770 --> 00:31:32,250 -Scott Tolinski: Do you think this is just like the more advanced version of that? - -44 -00:31:32,670 --> 00:32:25,200 -Wes Bos: Yeah, well, I'm wondering if, if that's what's happening, or like, even, I'm just trying to think of like, how nefarious Could you be is like somebody is trying to use Git repos as a way to store spam websites or something like that. And Google's maybe GitHub is flagging them if they all sudden create hundreds of, of new Git repos. But if you like, if you fork somebody else's Git repo, and then just blow out whatever they had, and put your own stuff in an option, because I've noticed a lot lately in, in my GitHub searches, I search on GitHub a lot. Anytime I have a problem with me to how to use an API or anything like that, I'll just search it on GitHub and see other people have implemented it. And I've been finding a lot of like spam in there of people being like, just trying to do SEOs stuff with GitHub Pages. So I bet there's something shady going on around here, or you just extremely popular developer. - -45 -00:32:26,070 --> 00:32:29,340 -Scott Tolinski: Yeah, those are the two options. It's either shady or you're cool. - -46 -00:32:30,000 --> 00:33:04,170 -Wes Bos: All right. Next question we have here is from Mark prime. I really like this question. with Apple like marks name, Mark. Fine. That's like, yeah, that's, that's pretty, pretty sick, with Apple switching to their own processors. So if you didn't hear Apple announced that they are no longer going to be building on Intel, or over, I think it's over the next like three or four, four years. And they are going to be releasing their own Apple silicon, which at the end of the day, it's ARM processors and arm ARM processors are what are in phones, is - -47 -00:33:04,170 --> 00:33:09,660 -Scott Tolinski: that right? It's within Apple phones. Is that what's in Android phones, no, - -48 -00:33:09,690 --> 00:35:38,070 -Wes Bos: no, no, I will mix their own. I will mix their own chips for the iPhones. So when they came out, I researched it. And they are indeed just arm based processors and, and those are the processes that are often found in Chromebooks or things like that. And the downside to that is that it doesn't run all of your software, because the apps need to be specifically compiled and built for those types of processors. But the upside to it is that they are cheaper, they're faster, they don't use as much heat, things like that, like I know a lot of the super computers out there. Now instead of using super expensive Xeon processors, they're just using 400 ARM processors, and distributing the load amongst each other. So that's kind of interesting that they're switching over to that. And I bet that means that we're going to get a mac book with wicked battery life. Because they've they've sort of pinched and squeezed everything they can to get better battery life out of these things. But at a certain point, you need to address the thing that it's all of your battery, and that's your, your processor. So is it silly for anyone to buy a Mac that is released? Before that they release those to do development? Do you guys have experienced with windows in which you would still prefer which would you still prefer today if you need to violin so I don't think that you need to wait for these things to come out. Because when they do initially come out, not all of the apps that we know and love are going to immediately work on the new ARM processors or sorry, Apple silicone, let's call it Apple silicone. So, okay, I'm gonna call Apple silicone. So it's gonna be I bet it will be a good five years or so before everybody has totally transitioned over and there's going to be a lot of bridge time where you'll have to check if your apps are working on it. At a certain point, you're not going to get updates for older apps, because they'll only work on the on the new arm. But I was thinking about that as like, I'm like, Okay, well, let's just look at the apps that we developers use. We've got a terminal, we have our text editor, like vs. code, you have some sort of design software, you have a browser. Like what are also the apps that we're using next screen recorder is a big one for me. And everything terminal that will work on ARM processor, no problem and editor that's vs. Code is built on on Chrome. So that's no sweat there. That's that's gonna work. Nope, no problem, because these these browsers already work on on ARM processors. So I bet - -49 -00:35:38,070 --> 00:35:47,520 -Scott Tolinski: that well, they mentioned that they had somebody to port electron already really electron stuff. So Apple, like did it themselves. As far as I know, - -50 -00:35:47,520 --> 00:36:02,520 -Wes Bos: that's good. That means like, a lot of a lot. All the apps that I use are based on electron, so I will or that will work already, if especially if the browser's over design software. So if you start using figma, I bet I bet that will work because you can use it in the browser, right? - -51 -00:36:03,330 --> 00:36:26,690 -Scott Tolinski: Yeah, I think figma is maybe built on rust. Either way. It's It's It's done through B, it's not well, is it done through electron? I believe it is. Yeah, at least they have the desktop app is. But yeah, I think as long as, as long as it runs in the browser, that stuff should work fine. I think that's the some of the joys of writing browser based applications for us, you know? - -52 -00:36:27,090 --> 00:37:07,940 -Wes Bos: Yeah, it's, it's gonna be good. I don't think you should wait or stress out about something coming out or not just because most of you are just sitting at your desk with this thing plugged into a power source. Anyway. So at some point, you will probably get one of these if you decide to go stay with the Mac. But but don't sweat about it. I think this is a long term. sort of move. I might be wrong about this. I'm seeing in Windows, would you? Do you have experienced this windows? Yes. You go with it? No, it's just, it feels weird. And that's partly because I've I've been on Mac for so long. And partly because every single time we talk about Windows, there's an equivalent of whatever, but it's not as good. - -53 -00:37:08,210 --> 00:37:36,570 -Scott Tolinski: Yeah, None. None of it is as good Yes, it's it's cheaper. You have more options for the hardware, whatever. The OS is still just, you know, cobbled together in like patch on patch on patch. It feels very weird to us. In fact, like they're like beautification aspects of it, like really worked. But it's like they seems like they only like worked on, like the Start screen. And like the first couple of screens, the moment you get into any, like menus in Windows at all looks like Windows 95 still looks terrible. - -54 -00:37:36,600 --> 00:37:59,210 -Wes Bos: Yeah, yeah, it's it's funny, because we just got finished saying, well, all this stuff is browser based. So it shouldn't matter. But there is a certain aspect. And I know there's a lot of windows, people screaming at us right now. I mean, like, you're dumb, but that's just how I feel about every time every time I'm on it, and I've given it like good like a couple of weeks on Windows just trying to make it work and just just can't make it work. - -55 -00:37:59,360 --> 00:39:05,940 -Scott Tolinski: Yeah, I have a Windows partition on this desk or on this laptop. I've had a Windows machine for a long time I've used it enough to know exactly how I feel about it. In terms of like, should you wait, in my opinion, I think at least if you're looking to get a MacBook Pro if you're spending that kind of dinero on a machine I would wait for the next MacBook Pro. Why? Because I don't think it's that far away. And I think that given the option to be on the apple silicon or not, I would take it if you don't need me need it right now. But if you do need it right now, I think everything that we said is going to be fine. I think it would be absolutely more than fine if you were to buy it right now. But let's see the 16 inch MacBook Pro according to macrumors.com is listed as do not buy because it is past or around their average day since release and I'm pretty sure the next one that's released is going to have the apple silikon so even if it's if it's a matter of waiting you know 50 days man I would wait if it's if it's not Oh - -56 -00:39:06,110 --> 00:39:15,690 -Wes Bos: yeah, I didn't realize that they said late 2020 they're coming man maybe I'm wrong about this I thought there would be a lot more a lot more time oh that's pretty - -57 -00:39:15,980 --> 00:39:19,020 -Scott Tolinski: cool. Time has been an odd thing lately. - -58 -00:39:19,080 --> 00:39:24,980 -Wes Bos: Yeah, it's just been like the this whole 2020 has just been a fever dream where we wake up with arm base Max, - -59 -00:39:25,080 --> 00:39:25,770 -Scott Tolinski: you bet - -60 -00:39:27,710 --> 00:39:30,110 -Wes Bos: you know it hasn't been a fever dreams. - -61 -00:39:30,110 --> 00:39:48,480 -Scott Tolinski: No, no, no, no, that's you You missed the perfect you missed the perfect condition. Show me away you got a perfect transition. You say well maybe you just want to wait till these Mac books are refreshed and you will be certainly refresh. The services that we've ever advertised here on set text and that's fresh books. - -62 -00:39:48,959 --> 00:40:03,710 -Wes Bos: Yes, fresh books is your cloud accounting that you need for your independent freelance small business big messes whatever it is, if you need to keep track of it. invoices, expenses, time tracking all of that good stuff. - -63 -00:40:03,780 --> 00:40:05,010 -Scott Tolinski: Maybe you bought a laptop, - -64 -00:40:05,280 --> 00:40:27,710 -Wes Bos: maybe you bought a laptop and need to put that thing in? Or maybe you need to, what's it called depreciate it over four years, because it was a large expense. You can do that with fresh books. So check it out@freshbooks.com forward slash syntax. I'll get you 30 day unrestricted free trial. Make sure you use syntax and how did you hear about us box? And thanks so much to Freshbooks for sponsoring. Nice. - -65 -00:40:27,840 --> 00:41:18,660 -Scott Tolinski: All right. Next question is from Paige neutering house, she says hi, hey, Wes. And Scott, big fan of the podcast. Thank You page. My question is, have you ever been approached by or heard of get ads? the.io. They're trying to pay developers to put ads under popular open source libraries on GitHub. They approached me recently, I wasn't sure what to think about them. It just seems fishy. And I thought there was a little chatter about it on Twitter. What do you think I know the sponsorship ads help pay the bills, but I don't know if it conflicts with GitHub Terms of Service, or how developers would react not react as since typically, we're more suspicious of things that seem sponsored or disingenuous. Thanks for any thoughts or advice you have page. Yes, I have not heard of this company that seems kind of iffy to me. - -66 -00:41:18,660 --> 00:41:19,590 -Unknown: Um, - -67 -00:41:19,590 --> 00:41:56,280 -Scott Tolinski: you know, what I, personally, if we're talking about personally, and somebody wants to throw in a one liner, will you know, if if you want to help support this repo, here's like, watch this ad. Like I honestly, for the amount of software that I use that other people have written, I can overlook that in my GitHub blogs, or my NPM installs. I really do not care personally, if people want to do this kind of thing. But I don't know a company approaching you independently and being like, Hey, yo, can we throw some ads on your stuff? Like that, to me? Seems kind of rough? I don't know. It seems shady to me. - -68 -00:41:56,480 --> 00:43:32,630 -Wes Bos: Yeah, I actually have a lot of experience with this. Just because, like back when I first did my affiliate thing, there was another like startup, I forget who it was, I'm just searching my emails, it was probably four or five years ago. And they did this exact same thing where they implemented an SVG file, and then that SVG file would dynamically change on their server and serve up just text. It that would be an ad. And they approached me and said, Hey, do you want to buy a bunch of inventory? I said, No, but we can try. We can try it with like affiliate. And he put me in a bunch of his unused inventory. And none really nothing came of it. So it didn't really work that well. And then I also had sinned a sore house as I say it. He's the Yeah, behind. Yeah, it that behind like millions, all these awesome lists a lot of tons of different plugins and JavaScript things and whatnot, and just did a horizontal rule. And then did a little ad it says improve your JavaScript skills with the CSS course from Wes Bos try is free JavaScript quarters, JavaScript 30 course for a taste of what to expect, you might also like is react and sublime courses, and then another horizontal rule, and that did super well for him. I paid out a couple thousand dollars to him, just from those little clean little ads that he's put in the readme of his repo. And every couple of months, somebody would screenshot and be like, hey, what the hell is this? And then and then we would reply, be like, Oh, the guy's given his entire life open source. - -69 -00:43:33,440 --> 00:43:47,070 -Scott Tolinski: Sorry, you read all this free stuff in somebody's one line or something that's not free. And we lose? Yeah, I had a lot of variance with that on YouTube. I, you know, I did 2000 free videos, and I asked people to pay for one. And they were like, What? What's the deal here? - -70 -00:43:47,100 --> 00:44:18,210 -Wes Bos: Yeah. So and then that way, when it when we said that a lot of people sort of came to him be like, Wow, that's really cool that you're able to, like I'm able to teach people, he's able to get a little extra money from the stuff that he's been building. And that allows that like, sort of funds him to keep working on on this stuff. So it was a pretty good arrangement. I did hear that that first one I talked about was against GitHub terms, and they got shut down for that. I've never had any, any issues with mine. So I think as long as it's like, - -71 -00:44:18,300 --> 00:44:21,120 -Scott Tolinski: like, organic, you doing yourself? - -72 -00:44:21,150 --> 00:45:03,000 -Wes Bos: Yeah. As long as it feels cool. It is kind of weird when a company comes in and starts trying to drop ads into to read me's and things like that. But there's probably some sort of, there's a problem here. And that is that open source authors need to make money somehow. And I think people are trying to figure out, how does that work right now. And this is just one of those things. So you probably won't make a whole lot of money off of it unless you have like, like Syndra has. He's probably one of the most popular developers on all of GitHub. And it's not like unreal how much money he's made. But if you just have like a couple of popular repos, you probably won't Make a whole lot of money for it. I would say it's probably not worth it. - -73 -00:45:03,090 --> 00:45:15,570 -Scott Tolinski: Yeah, right. Yeah, that's a tough call. I've not heard of this company, though. I don't know, I would prefer if it was me to do it on like, a more personal basis, then like three totally, that's gonna throw some stuff on there. - -74 -00:45:16,080 --> 00:46:06,240 -Wes Bos: Next question from Colby. Ah, I just listened to your TLD game. And it made me wonder what are your opinions on personal site? domains? Should you always try to be your name dot dev? What about.me or other domain names this is this is really interesting. So like, like, what are the popular ones? For for developers, we have.io dot Dev, which is pretty new. It only came on what like six months ago.me. There's dot tech, which is a sponsor of our podcast. He is a popular one calm. So what she always got to know you don't have to get a dot Dev. Everyone used to always try to go for the IO. Those are mostly taken up now. And then also anytime you mention it, somebody comes at you and talks about how awful IO czar. Apparently they're sinking the ocean or not. What was the problem with IO? - -75 -00:46:06,510 --> 00:46:13,710 -Scott Tolinski: I thought it was foreign country. that accurate? I thought it was there was like some weirdness around SEO or something. No, it's - -76 -00:46:13,710 --> 00:46:46,920 -Wes Bos: not because like it those country level domains. Google has a list of these are country level domains, but we don't treat them as country level domains. like.tv is for Tuvalu, but they don't treat as like, Oh, this website must be originating in Tuvalu. Somebody is abusing the country. I think I we can look into Oh, maybe we'll put a link in the show notes. If I find it. I don't forget what it is offhand. Dev is cool. They seem to be very expensive, especially if you want to short one.me I've never liked.me what do you think about me's don't like it? No image of Apple for some reason, - -77 -00:46:47,580 --> 00:47:01,020 -Scott Tolinski: does it? Yeah, yeah. It reminds me of like, I think there was like some service that was like your homepage. It was like around, you know, trying to be fancy. This is your landing page. This is your business card for the web. And that's what it reminds me of for some reason. - -78 -00:47:01,800 --> 00:47:05,160 -Wes Bos: Oh, yeah. and.sh is pretty cool.com - -79 -00:47:05,310 --> 00:47:06,960 -Scott Tolinski: i use.com. Yeah, - -80 -00:47:06,990 --> 00:47:21,600 -Wes Bos: yeah, I think my favorite is if you don't have if you can't get the.com because your name is like Joe Smith. I would try go for the.sh or try to make some like really cool domain name off of it. Otherwise, nothing wrong with with the dot dev or something like that. - -81 -00:47:21,990 --> 00:50:21,240 -Scott Tolinski: Yeah, I use.com I've just had Scott Tolinksi calm forever. Although I do have s Tolan ski dot Dev, which isn't as like, you know, fun as God. Calm but it is like, I don't know, my Twitter handle. All my handles are stilinski everywhere. So maybe s hilinski. dot dev should be my main URL just to fall in line with everything else. I have never thought about that too much. But yeah, I would go Comtech dev before i o me or sh but that's just me. Last question here is from cam cam says what's the best way to introduce new technology or process to a team. I have a lot of ideas about this. But that said, I think these are going to be it's going to be different based on how big your team is big, big, big, big teams. It's a little bit more interesting or difficult. small teams, these get a little bit more intimate and one on one, you can do a lunch and learn where everybody brings their lunch. One person is presenting everybody eats their lunch because they're in the same room and everybody has lunch the same time you eat your lunch, and one person gives a little presentation about a specific topic. That's one, two, in an internal mini conference. That'd be fun. You take a day and every single person on your Deaf team prepares a miniature talk about something that they found interesting. That way it gets people really used to sharing things that they know and love. So a little mini conference or a miniature meetup is the same as a lunch learn except for it's an all day and everybody would take take a turn Demo Day. And I don't mean like a full day. But maybe you've prepared a code demo. And you could pass along this demo and say, hey, look at this thing. Maybe it's a problem that your team has typically or whatever I'm looking at elegantly, I solved it using this technology, maybe we should look into using this technology for things. That way people can really get a first hand view of just what this what problem this thing is solving and how eloquently it's solving it. Another one would be to get everybody in the room and watch the talk on YouTube. I think this is fun. I know I know, people who have done Wess courses like this, that where they're all sit, and they'll do like a lunch and learn with are all put on what this course is together in the conference. The thing, well, maybe you're not good at speaking and you don't care about speaking but somebody else has already done a really awesome talk or tutorial or whatever. Well, you could say, Hey, everybody, I have this really great lunch and learn idea. Let's go ahead and do this. Now. I think all of these approaches require buy in from the whole team. And I think this is the type of thing where you would really want to have your boss the blessings of your boss to say like, yes, this is what we're going to do. And we're maybe going to make it a regular thing. That way people can get used to constantly sharing what they're learning and passing along information and that sort of way. And that way you'll have a stronger development team. In my experience teams that work more like this, they're more communicative. They're more like, let's, let's, let's learn from each other. Like, that's our biggest strength is that we have all these brains. So we might as well use these brains to help the other brains, you know. So for me, these kind of things really would be a good, good solution for something like this. - -82 -00:50:21,690 --> 00:51:12,240 -Wes Bos: Yeah, I agree. I love seeing teams, or I've even seen just friends like a couple times. Now I've seen people get together with people in their city, and they rent a conference room or go in somebody's work has a conference room. And they all do like three or four, or five parts of one of my courses, JavaScript 30, or something like that. And they do it all together. And it's really cool, because you can pause and talk through it together and say, like, Oh, this is how we might approach that on our team instead. And sometimes you have a more senior developer who already knows what they're doing, and they can talk to the junior one. So just like, not everyone has time to create mini talks and things like that. Those are awesome. But if you don't have time to do that, like Scott said, just grab some pre made content, even just grabbing a conference talk that's on YouTube, and watching it together while you're lunch is an awesome way to go forward with that. - -83 -00:51:12,360 --> 00:51:21,090 -Scott Tolinski: Cool well that's it for this potluck. Now we're gonna get into the part of the show called sick pics where we pick something that we think is sick, man, I - -84 -00:51:21,090 --> 00:51:32,100 -Wes Bos: got the best sick pic of my I'm gonna say this is the best sick pic of my life. pre cut parchment paper. Oh, I don't even know is this borders on pre cut parchment paper - -85 -00:51:32,160 --> 00:51:38,880 -Scott Tolinski: is thick that you're going to have or I'm going to ask you like six months later, like, Hey, where'd you buy that? You're like, it was a sick pick man. - -86 -00:51:39,870 --> 00:51:46,080 -Wes Bos: All the time. But you can't i can't expect you to remember every pick that is sick. - -87 -00:51:46,200 --> 00:51:47,040 -Scott Tolinski: I got a bad memory. - -88 -00:51:47,070 --> 00:53:21,270 -Wes Bos: But here it is. It is rollerblade wheels for your office chair. Boom. Okay, so I did not know about this until about two months ago somebody on Twitter was like this picture of my office and they said Hey, watch that laminate with your with your your Herman Miller Aeron chair. It'll cut that up. Yeah. And I was like, Oh, he's like, he's a go getter. Like, I'm like, I don't want those stupid little mats that you have to put underneath. He said, Get rollerblade wheels. So I was like what, so you can get these like really nice wheels with like a back 40s in them, they think these things are fast. And you turn your chair over, you pull your old wheels out, you slot slap these things in, it's like 30 bucks or 20 bucks American. For a set, they have 11 millimeters fit almost every chair and then 10 millimeter, one will fit IKEA chairs. And it makes your chair like so much smoother to glide around on. And I feel like the chair is just more comfortable in general because like sometimes he can't get your chair over like just an inch if you just need to, like just shift your weight around. And this just rolls everywhere with you. And that sounds like a bad thing. But this is like a life changer. I tweeted it out. And like it had like 1200 retweets and I had like hundreds of people being like, like a couple weeks later being like, this is the best thing ever. So major upgrade, I always talk to people like what's the best upgrade you can get in your life for under 100 bucks. And this is up there with with one of the best upgrades so rollerblade wheels, you can get them on Amazon, and they fit pretty much any chair. - -89 -00:53:21,600 --> 00:54:58,110 -Scott Tolinski: Yeah, that is very sick I I have like a remarkable rug underneath my desk, I'm constantly hitting the edge of that is a very sick pick, that is one that I will be purchasing. So thank you very much for that. I have a I have a wealth of sick pics that I've been collecting here and let me pick a really sick one. Now this one is going to be sick for any of you who have the 16 inch MacBook Air. So I'm sorry, that is going to be a small segment of this audience. But this is sick enough that I will I will make an exception here. This isn't my greatest trick of all time. But this is one for 16 inch MacBook Pro people that you will find useful. So this is called disable turbo boost. This is an application for the Mac. And so with these new Macs, I don't know if you've noticed this Wes, but the fans come on way sooner, the fans come on very soon. And that's because of turbo boost. Now turbo boost has a whole bunch of different effects. And if you're sitting there, you know with your computer plugged in and whatever recording the last thing you want is your microphone to pick up some of that that noise coming off of your fans. You don't want your fans to be going nuts. So either way there is a neat little app that allows you to one click to disable turbo boost until you want to turn it back on. And I found this to be just a really really nice application to have on my computer. I'll put a link in the show notes. But again, if you have a turbo boost Mac This allows you to control your fans a little bit better in a way that just as is the way it probably should have been working but I think Apple's doing it the fans on very early for specific reasons. - -90 -00:54:58,260 --> 00:55:13,500 -Wes Bos: Does this stop that Your processor from working too hard or does this just turn the fans off? Because I always people are always like use this app to turn your fans off. I'm like, well, they're on for a reason, aren't they? Like it needs to be cooled? Like, I don't want to like fry this thing. - -91 -00:55:13,800 --> 00:55:43,680 -Scott Tolinski: So, okay, so it did all it does is disable the turbo boost your fans will stay on. It doesn't just shut off your fans. It's basically let's see, the MacBook runs noticeably cooler and gains 25% in battery life. So this person says it's running cooler and against more battery life. I don't necessarily understand it. All I know is that I click button and buy fans a little bit I click button button says okay, fans cool down and my recordings sound better. - -92 -00:55:44,010 --> 00:55:58,830 -Wes Bos: Beautiful. Yeah, that's that's interesting. I never ever and always asked me Hey, do you is your fans on a lot? And I'm like, I don't know. Because I have my noise cancelling headphones on all day. Let me hold on. Let me see. Oh, yeah, mine's like a rocket ship right now. - -93 -00:55:58,859 --> 00:56:08,880 -Scott Tolinski: Yeah, that gets picked up in the recording for me at least so Oh, like when I started to talk in the gates down. I don't know if it's maybe my my microphones too close to the computer comparatively. I - -94 -00:56:08,880 --> 00:56:19,860 -Wes Bos: think I've had it before where it was. And I just when I put it on, like I have mine off to the side beside my monitor. So that might be the difference of how far it is from the mic. - -95 -00:56:20,160 --> 00:56:20,670 -Unknown: Yeah. - -96 -00:56:20,670 --> 00:56:27,780 -Wes Bos: I'm gonna get that though. Cuz Yeah, sometimes mine is mine. Yeah, stop. This is so obnoxious, - -97 -00:56:27,870 --> 00:56:31,710 -Scott Tolinski: very obnoxious. And I was happy to find out that I could turn it off. Well, - -98 -00:56:31,740 --> 00:56:36,600 -Wes Bos: maybe those new Mac books will not be so hot. That'd be good. I'm kind of excited about them. Now. - -99 -00:56:36,810 --> 00:56:40,200 -Scott Tolinski: I know. Right? Who wants a 16 inch MacBook Pro that I just bought? - -100 -00:56:42,030 --> 00:56:56,340 -Wes Bos: We didn't we do that? We did an entire episode on the new math books. And I said, you probably should have this thing for three or four years. Yes. To make it worth it. Yeah, no, I gotta sit and wait. sidaway Alright, shameless plugs. What do you got? For me? - -101 -00:56:56,340 --> 00:58:08,040 -Scott Tolinski: Shameless plug. is so long since we recorded one of these. I have two courses. I did a course on 3d in react, we should maybe do an episode on 3d and react. It's It's very cool. Yeah, you can work with real 3d stuff. I don't know if you've noticed. But 3d has been popping up all over the place. Even the new stripe website has 3d. So if you want to learn how they did that, and you will learn all about how to use 3d on the web specifically with react. We did this course on react three fiber, which is an incredible library using three js. And the course for this month is going to be advanced animating with framer motion. So, man, a lot of like, really, really cool courses that I've been working on. That's going to be out is August. Does August have 31 days in it? If so, August 31. If not, whatever the last date. August is nice. A little conditional there. August pop? Yes. August pop. Yes. So negative one. It's the last item in August. And so those I don't know how to level up tutorials.com. And check it out. If you sign up for level up Pro, you get all of those courses, plus many, many more 10 for the year save 25% Thank you so much. - -102 -00:58:08,040 --> 00:58:55,050 -Wes Bos: I'm going to shamelessly plug my upcoming Gatsby course it probably won't be up by the time you listen to it. Maybe it's going to be at master Gatsby calm. I'm really excited about it. Because it's the first course I've done where we also write all the CSS. People always ask me like, can you please include the CSS and for a lot of my stuff? It's just been like, well, no that that would that would add an extra 30 hours to the to the course. But for this one, it was actually possible. And then I made it skippable. For those who don't care about the CSS. You can skip it. That's really cool. We're using Sanity as a headless CMS. We're using Gatsby obviously, for the entire website. There's a lot of custom react hooks that we thrown in there. serverless functions, all that good stuff. So get ready for that it's gonna be available at master Gatsby calm. And that's it. - -103 -00:58:55,710 --> 00:58:56,370 -Unknown: Sweet. - -104 -00:58:56,790 --> 00:58:59,880 -Wes Bos: All right. Thanks for tuning in. Catch you on - -105 -00:59:00,120 --> 00:59:15,030 -Scott Tolinski: Monday, Monday, Monday, Monday, Monday, peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax281.srt b/transcripts/Syntax281.srt deleted file mode 100644 index 4f9fb05b1..000000000 --- a/transcripts/Syntax281.srt +++ /dev/null @@ -1,156 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott Taylor. Totally at ski. - -2 -00:00:25,950 --> 00:01:04,890 -Scott Tolinski: Oh, come to syntax in this Monday hasty Street, we are kicking off season 1.5. Here, we're not quite in season two yet, we are going to be talking all about home offices, and building an office in your backyard. Now I've seen quite a people do this. Lately, there's been a lot of cool home offices popping up ever since this whole pandemic started. You've seen all sorts of neat stuff. Now we have a nice little shed in our backyard that could be turned into one. But it is a complicated and complex situation. So as somebody who's built their own home office in their backyard, we have on the show, our very own Wes Bos, how's it going west? - -3 -00:01:05,040 --> 00:02:14,910 -Wes Bos: Hey, good, good. Yeah, this is kind of something cool. Because I set off at the about six months ago, at the beginning of this pandemic, we went up to our cottage and I didn't have a good spot to work. And I had always thought about turning one of these sheds into an office. And I did that, and I'm gonna talk about that today. And then I also just by posting stuff on Twitter, I've got, I don't know, probably seven or eight different people send me photos of their own setups of what they've been working on. If you have like photos of your backyard office, tweet us at syntax FM. So I'd love to share photos of other people's setups. I have one link right here to Brad Westfall on Twitter, he just built the most beautiful one in his backyard as a palm tree over it. So we're just gonna, just gonna kind of go through, like the steps and what you need to know about and think about before you go ahead and build one of these because like, it looks like a lot of people are going to go be going remote full time. And if that's the case, and you need some sort of good setup, if you don't actually aren't as lucky to have a room in your house for that, then this is a good option. If you have something in your backyard or you have some space you can build. - -4 -00:02:15,060 --> 00:03:21,480 -Scott Tolinski: Yeah. So just like we want to see your home setups, I want to see all of my errors and exceptions handling in real time with the video, scribble replay, and my Redux store. And yeah, let's see what else my error tab, my Network tab and all that. And that's why I like to use Log Rocket. Now Log Rocket is a error and exception handling and finding bug finding service, I guess you could call it that allows you to see the bugs and errors happen in a real time. scrubbable video, as I just mentioned, it is really something cool. And for those of you who have just been piling your way through text errors and you know, log messages and whatever, just to find out what happened when somebody did something or how the heck did that user do this thing? Well, now you can see exactly how this user did that thing by seeing it in a scribble video replay. So head on over to Log rocket.com forward slash syntax and he will hit 14 days for free. It's one of those services that you need to see to believe. Alright, let's get into this. Wes, let's get into the the whole shed office shed chic shake. Yes. - -5 -00:03:21,480 --> 00:05:17,220 -Wes Bos: You know, I just thought of another one is Brad frost converted a shed in his backyard to like the ultimate jam space workspace really cool. If you go to his blog, or just Google Brad frost office. It's really awesome. So let's talk about structure first. So you if you want to build something in your backyard, you need something to put your office in. And for a lot of people there is probably some sort of existing shed or you put in the wheelbarrow in and that's what I did is we had this shed in our backyard which is 10 by 12. That's a feat for for all y'all. That's not in meters. And that would be a very big office, it was in meters. And we weren't really using it for much just storing fakes and stuff in here. So decided to to go ahead with that and convert it over things you sort of need to look at is like is it sound, so it's not worth putting a bunch of money into something that was will fall over or maybe rotten or is is sort of sitting in the dirt you got to make sure it's like not going to be sitting in the dirt otherwise that will go wrong. Other people said that they're getting quotes to just build something by themselves sort of the hard part about that is if you want to erect some sort of shed or some sort of building on your property, there's likely some bylaws in your area that will allow not allow you to do that because if you have something existing that's usually grandfathered in, but if it's if you don't have something that's existing, usually the rules are like has to be five feet from all fences, which is really hard for most people's backyards or can't go above a certain height, which is not a whole thing or putting bringing electricals to that is really tough. So before you get too excited about it, definitely look up any building code that is in your area to make sure that you can do that - -6 -00:05:17,250 --> 00:05:54,870 -Scott Tolinski: we quite a bit looked into some additional school we have like a one car garage that we're using as a gym in our backyard. And we've looked into what that would take to convert it into an existing structure. And Dang, every contractor we reached out to said like, Hey, can we make this bigger? Can we turn this into this? They just say, we can't, we can't even we can't even touch it in those ways. You know, you could drywall it, whatever you can't add on to it. You can't do anything with that. Otherwise, it's against zoning. So we unfortunately, we had plans to turn that what is now the gym into my office and it just could not work out because of zoning man zoning, zoning kill Yeah, - -7 -00:05:55,260 --> 00:09:28,550 -Wes Bos: yeah, I have a bunch of friends that are in Toronto and Toronto, super expensive. So a lot of people don't have room for for a bigger house. And a lot of people are doing this in the backyard. And I've talked to a few people, that guy, I think they're called variances. I don't know a whole lot about this. But you can apply for sort of like, oh, but can I be the exception. And that is sometimes approved. So that is an option in some cases, but then you have to like, I think you had a post one of those big billboards and have a meeting or your neighbors can come and things like that I don't think it's super noisy. Yeah. Also popular are just these like drop in offices. So almost like a tiny little shipping container. There's lots of companies out there that will drop these like matte black really sleek, little boxes in your backyard that have like a big door glass door built into them, you just pop those in, which is pretty cool. And then the last thing I think is probably like the most affordable depending on where you live is that at Costco, they have these like huge Rubbermaid sheds, that you can just put together yourself, if you were to like, like, pour a little concrete pad and slap one of those on that, that would actually make for a pretty affordable structure to start off of, because I think they're only like 1000 bucks or something like that to get up and running. And there there were pretty big when I saw them at Costco, once you have your structure I got think about electrical, so that's something I had to do is likely there is no electrical being run to your, your office. So you have to get, I had to get permits for that. And then you also have to pay an electrician to run electrical and that can greatly vary depending on how far you need to go. For me in order to get electrical run. It had to be buried, and then brought in and all the outlets and everything like that. I think it was about two grand for me to get it all wired up, which is much more than I was expecting. But I I don't really know much about how much plugs cost. So after electrical, you think about insulation, so these little office was luckily it was already watertight. And it was just reroofed a couple years ago. So I didn't have to worry about any of that. But I did have to worry about insulation because where I am it gets very, very cold and very, very hot. And I've been here for both. And a way to sort of combat both of those is to insulate it so I ended up getting the entire thing spray foamed which is just someone comes apparently in Europe they don't have this people have been at were asking me like what is that it's just somebody comes with a gun and sprays this foam on all of the joists and and all of the beams and everything like that. And then it expands and sort of seals up the entire the entire thing. By doing that I didn't have to have any sort of external venting, because it was 100% sealed. If you use that like batting insulation, then you do need to have some sort of venting otherwise, you can have issues with moisture and mold and things like that. Yeah. Um, what else heating. So how to heat it was it was a big one. So I started I got a 1500 watt little oil heater. And there's all kinds of different heaters out there. But at the end of the day, they're all exactly the same. In terms of efficiency. There's a really good article on or not really good YouTube video from technology connections on space heaters, and how they all work exactly the same because they're all taking electricity and converting them to heat at - -8 -00:09:28,550 --> 00:09:31,110 -Scott Tolinski: the end of the day was so good. It was so good. - -9 -00:09:31,160 --> 00:09:35,970 -Wes Bos: There's no tricks, and there's no efficiencies to be gained and doing that, which I thought was really cool. - -10 -00:09:36,020 --> 00:09:51,050 -Scott Tolinski: That video was so good. And we watched another technology connections video last night while we were eating dinner, and Courtney hasn't seen she's seen him before but hasn't enthused, it's like what does this guy do for a living? I was like, Oh, this is this is what he does. He makes these really - -11 -00:09:51,050 --> 00:09:54,270 -Wes Bos: awesome videos. The color brown watch shows like the - -12 -00:09:54,270 --> 00:10:09,800 -Scott Tolinski: color brown in LA. And it was so good. It was so fascinating. I mean I absolutely love this channel anyways, but Like, man, yeah, that is some some seriously good content the one on space heaters and on the one on portable AC units, both fantastic episodes, especially in the context of this - -13 -00:10:10,040 --> 00:10:27,630 -Wes Bos: and the one on how those tape deck to auxilary things worldliness is so fascinating tape deck to accelerate. Oh man, how do you remember when you got your first car and you wanted to? You wanted to plug in or Yeah. You had to get that like tape deck with - -14 -00:10:27,630 --> 00:10:38,730 -Scott Tolinski: the cord is like a fake fake tape. I always felt bad for the tape player. And I put that thing in. I'm like, you know, this is fake. We all know this is fake. But get my music out of here. Oh, that was good. Yeah, - -15 -00:10:38,730 --> 00:12:15,780 -Wes Bos: anyways, that's an awesome one. So some sort of space heater, that one was more than enough for my space. It did take a couple hours to actually heat up. But it did. So what I ended up doing is I put it on a Wi Fi plug and turned it on, at like 5am. And by the time I started working or 6am. And by time I started working at 9am it was like super toasty and I could almost I would turn it off at about 1230. And this was like when it was snowing. And it would stay warm the entire the entire rest of the day. So the insulation was doing its job and retaining that heat that I was used. A lot of people gave me hack for putting it on a Wi Fi plug but it was a 1500 watt heater and they're rated at 1.8 watts. I think those plugs so I did my homework Dory. What else cooling? So then in like Canada, if people are like what you're just weren't you just heating that thing like two weeks ago, now you're looking into air conditioners. So when I want it to get air conditioner, it was the pandemic and everybody was buying air conditioners. So I got one of the last air like portable ACS that I could find. And that was like a 1300 bt EU. Portable, higher. And it works great. It cools it down super fast. But there's a problem with it. And that it's super loud. And I can't record and when it's on I also had a ceiling fan put in as well. And I can't record what the ceiling fan on either because it the air buffets against the mic in it. You can hear it. So even right now I'm just like, super hot because I can't turn any of those on. - -16 -00:12:15,870 --> 00:12:17,340 -Scott Tolinski: Yeah, that is wrong with recording. - -17 -00:12:18,000 --> 00:14:55,770 -Wes Bos: Yeah, it's frustrating. So luckily, one thing happened with air conditioning is it showed up with a tiny little clip that holds the air intake hose on, and that clip is broken. So I contacted them and I said, Hey, can you send me another clip? I'll fix it. And they're like, Okay, let me check. And they're like, no, there's no parts available for this. So we're just going to give you your money back, huh? And I was like, uh, okay, and I can't keep it. They're like, yeah, we don't like we don't want you to ship it back. It's broken. I was like, Well, okay, like, I guess so. And I like I bet. If I opened it up, I find the broken clip, and I could just glue it back on. So they let me keep it and it was 600 bucks. So I thought, Okay, well, I'm gonna, I'm gonna go a step further and may get one of these things called a mini split. And a mini split is where you put the compressor unit outside, like a tiny little air conditioner. And then there's a hose. And then there's an indoor unit that goes above like a door. It's like, like one foot high by like three feet wide. It's great. And I installed our I haven't used the house a while, but I installed it in the office. And then I had unfortunately the only one that was available was a 240 unit, which in North America, we run on, like 115 110 or 120. So I didn't I couldn't power it. And I was a dummy because I just paid an electrician to wire this whole thing up. And I didn't have the foresight to the to run 240 feet beefy power, we could run it but we had to install an extra circuit breaker. And then we also and then like all the walls were already finished and everything like that. So I couldn't I we had to run it outside and then dig again, which which kind of sucked but he came in and did that. And then I was about to hook it up myself. But it turns out you need a special vacuum pump to release the gases into the unit. And I don't have that and I couldn't find anybody to do it. And I ended up just saying you know what, I'll wait till next year I still got this broken one and even further. The first one showed up broken again. It had like a dead big dent in the side. And one of the like the valves rehook it up was dented. And I took a picture and sent it to wayfair and said hey, this is broken. Can I return it? And they said sure we'll send you another one. And then don't return. So now I have three air conditioners that I paid for one. And I I don't know if if the one that is dented is broken or not. I'm gonna have to test it. You're not allowed to sell it because they make you sign something but it's kind of funny that I follow these air conditionings now - -18 -00:14:55,800 --> 00:14:59,160 -Scott Tolinski: that is that is very lucky in a awesome way. - -19 -00:15:01,380 --> 00:15:07,650 -Wes Bos: That's all kind of stuff always happens to me so my wife is like of course that have you while you buy one air conditioner? Well, my my caldigit - -20 -00:15:07,650 --> 00:15:15,660 -Scott Tolinski: just died and they're just like, yeah, you have to pay us to get a new one. Yeah, really ship it back. Yeah. No. - -21 -00:15:15,750 --> 00:15:16,920 -Announcer: Oh, - -22 -00:15:17,550 --> 00:15:33,570 -Scott Tolinski: I tried to sweet talk and I liked I like was trying to try to do a little talking to see if I could at least get them to cover the cost to ship it and and if our if our standard error process does not work for you I'm just going to cancel the RMA. I'm canceling it. - -23 -00:15:33,990 --> 00:15:35,280 -Wes Bos: Just like me like - -24 -00:15:36,180 --> 00:15:41,010 -Scott Tolinski: wait like he made me like apologize essentially for asking for them to pay. - -25 -00:15:42,000 --> 00:15:47,820 -Wes Bos: Oh, Cal Digi I have such a high. High thought I know me too. That's a bummer, too. I - -26 -00:15:47,820 --> 00:15:49,260 -Scott Tolinski: was really I was really upset. I - -27 -00:15:49,980 --> 00:15:59,220 -definitely upset about it. I'm looking for alternatives now just because it's like do I wanna? Yeah, sure. I'll have them fixed the one dish ship it back. But like, I don't know, he goes somebody else. - -28 -00:16:01,710 --> 00:16:19,740 -Wes Bos: Inside I ended up paneling the whole thing with pine wood, which gives a very rustic cottagey feel. Yes. Nice. And then I put a lot of people told me to do this luxury vinyl plank, which is just a fancy word for vinyl that's got spins on when he does this break. But - -29 -00:16:20,880 --> 00:16:28,950 -Scott Tolinski: I went to Home Depot and I said give me a giant roll of linoleum. And yeah, that's my, my linoleum looks like a floor. Yeah. - -30 -00:16:30,240 --> 00:18:20,520 -Wes Bos: So this came in, like in planks that you install, like hard. But it's awesome. It's like really floppy. So it all sits down really nice. And it's been been super nice. And then what else Wi Fi I ended up people told me to like trench for running like Ethernet or running fiber. But I didn't feel like doing that. It was so much work, especially how rocky it is here. So I just used a ubiquity outdoor access point. And mounted that somewhere between the house and here. And that gives us actually really good Wi Fi in the entire property, which is which is awesome. And I believe that is it. So all in people always ask me like how much is something like that cost? Given that we had the most expensive part, which was the shed, it was about 4000 bucks to get it wired up, do all the flooring, all the paneling, an air conditioner, oh, that mini split also heats I should tell you what the heat pump, which does the opposite of air conditioning, but it just sprays the hot air into the room instead of outside the room. I can get rid of my little space heater now because the the mini split will also heat it in the winter, which is pretty cool. So about four grand Canadian, which is that's three grand us and how many in euros, 2.56 euro, so 20 2500 euros to do something like that. So like not cheap. But definitely if that's if you're going to be like working from home full time. Especially I know some some companies give like a couple thousand dollars to their employees for something like a chair or whatever. So definitely have enjoyed building this thing and having my own space in my backyard. And I wish that my place at home, I could build a backyard office as well. - -31 -00:18:20,700 --> 00:18:29,520 -Scott Tolinski: You know it also if you own a business, the business can pay for a portion of that. So about the construction and you know, tax whatever. So just keep that in Luckily, - -32 -00:18:29,520 --> 00:18:34,310 -Wes Bos: our unfortunately for me, I can't because it's not our primary residence. - -33 -00:18:34,530 --> 00:18:36,270 -Scott Tolinski: So primary residence would interesting. - -34 -00:18:36,720 --> 00:19:10,980 -Wes Bos: Yeah, like even before we bought this place, I was asking my accountants like, could I build something on the property and hundred percent expense it? He said he's like, not really you can make the argument that you're going to be there three months a year. And so you could you could expense one third of it, or sorry, not three months or one fourth of it. But it's it's kind of hard to do something especially when you are increasing the value of your something that you personally own with business funds. It gets a little bit murky, but if it was your primary residence, I think that you probably could definitely check with an account. Yeah, - -35 -00:19:10,980 --> 00:19:15,210 -Scott Tolinski: yeah. As with anything, check with the accountant or your lawyer. Yeah. - -36 -00:19:17,700 --> 00:19:37,820 -Wes Bos: So that is it. If you have your own little backyard office, I'd love to see what you've built. such cool little cozy places. And they're different all around the world. The Brad Westfall is one he's in I think, Arizona, so he's got like a pool outside a little palm tree. That looks unreal now. Yeah, yeah. - -37 -00:19:37,890 --> 00:19:42,210 -Scott Tolinski: Yeah. TJ and on that way and hard TJ over here. - -38 -00:19:43,920 --> 00:19:50,130 -Wes Bos: Cool. Alright, that's it. Thanks so much for tuning in. And we'll catch you on Wednesday. Peace, peace bass. - -39 -00:19:51,930 --> 00:20:01,709 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or Dropbox. View If you liked this show - diff --git a/transcripts/Syntax282.srt b/transcripts/Syntax282.srt deleted file mode 100644 index d71284136..000000000 --- a/transcripts/Syntax282.srt +++ /dev/null @@ -1,364 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:10,560 -development treats out there. strap yourself in and get ready. Here is Scott, ski and Wes Bos. - -4 -00:00:10,589 --> 00:00:38,040 -Wes Bos: Welcome to syntax. This is a podcast with the tastiest web development treats. Today we are going down memory lane. Just talk about Tales from web dev past. So we're going to talk about all of the hot tech in web development that we had to use. And that is like totally obsoleted or killed off or not as popular anymore. Because Scott and I have been developers for what, like 15 years, - -5 -00:00:38,279 --> 00:00:42,540 -Scott Tolinski: something like that very long time. Probably longer than that at this point. - -6 -00:00:43,019 --> 00:00:55,650 -Wes Bos: Actually, I have Wes bos.com forward slash about I have been a wiki websites for 20 years. Yeah, exit and then I have the number of milliseconds I've been making making websites for and its accounting. - -7 -00:00:55,679 --> 00:00:58,979 -Scott Tolinski: Have you been making websites as well? Is that Is that a thing? - -8 -00:00:59,009 --> 00:01:32,310 -Wes Bos: not been meeting websites? Now? That's not when I asked on Twitter, like what were the things from a long, long time, like what were the things from like 1015 years ago, and then I realized that some of this this stuff is way older than 10 years old. 10 years ago was 2010. I feel like that was just yesterday. Anyways, we are sponsored by Sanity, which is a structured content, CMS, and Sentry, which does all of your error and exception tracking in your application. We'll talk about them partway through the episode. How you doing today, Scott? - -9 -00:01:32,760 --> 00:02:04,680 -Scott Tolinski: I'm doing good. Just you know, just hanging out doing the same thing as normal. Going a little bit crazy. I have a code release today. I'm pushing a new version of level up up. So that's inherently stressful. Series released today. So that's also stressful. And we're recording a couple episodes of syntax. So my I got a full plate. I got a big old heaping plate. Wes Bos just did some barbecue. He he said how much you want. I said, Give me at all give me everything he got here. So I got a big plate of barbecue chicken here. But yeah, no. - -10 -00:02:04,680 --> 00:02:05,610 -Wes Bos: All right. I'm - -11 -00:02:05,610 --> 00:02:06,870 -Scott Tolinski: feeling pretty good. How about you? - -12 -00:02:07,770 --> 00:02:36,300 -Wes Bos: I'm doing pretty good. I'm finally back from a cottage which we were up there for pretty much six months came back once or twice to pick some stuff up. But we're back in downtown Hamilton, which is the exact Office of being in a woods and very happy to have amenities. Again, there was not not a lot of stores up there. And I hadn't had like sushi or kimchi or anything delicious in six months, which is funny. - -13 -00:02:36,330 --> 00:03:13,979 -Scott Tolinski: Yeah, that is funny. Like some of our favorite places are starting to be the ones that have like really died down are starting to come back to the point where you can go get curbside or whatever. So you know, just the other day Voodoo Doughnuts. Finally, we got like a food who doughnuts but walking distance from our house. And oh, it was, you know, only open for like a month before COVID head and then they closed it down just because they didn't need the operating costs. And they just opened it and it was like the first day it was open. We're like, Alright, I know they're over there overhyped, and whatever, but they are very delicious. So we've been gorging on 10 Voodoo Doughnuts now that they're open. Again, - -14 -00:03:14,400 --> 00:03:18,900 -Wes Bos: a bunch of restaurants around here are starting up what are called ghost kitchens, if you're heard of that, - -15 -00:03:19,139 --> 00:03:19,919 -Scott Tolinski: no. - -16 -00:03:20,160 --> 00:03:59,370 -Wes Bos: So like, instead of just like being like a bar, or like a pretty popular sit down restaurant that, like never did take out and their takeout was kind of hurting, because it's not really that but they a lot of them just opened up like secondary businesses that were only on Uber Eats and skim the dishes and all these like delivery apps. But they would just say create an entirely new like, pizza place or fried chicken place and like it would still be made in the kitchen of the restaurant. But they would just focus on like doing one thing and being like, kind of this specialty fried chicken place. And apparently it's doing pretty well for them, hopefully keep them afloat until they can open up again. - -17 -00:03:59,490 --> 00:04:05,280 -Scott Tolinski: Oh, totally. Right. That's the that's the goal. Everybody's got to find some way to make it happen. And hopefully, yeah, - -18 -00:04:05,310 --> 00:04:20,100 -Wes Bos: that was kind of interesting. I think we'll see a lot more of that where there's these like, there's no storefronts to these these businesses that you order from on Uber Eats it's just a some commercial kitchen somewhere that's has nice branding. - -19 -00:04:20,130 --> 00:04:22,320 -Scott Tolinski: Yeah, yeah. walkover pop it in. - -20 -00:04:22,320 --> 00:04:23,040 -Unknown: Alright, - -21 -00:04:23,040 --> 00:04:56,700 -Scott Tolinski: let's get into this episode here. We're talking about Tales from web dev past. Now, the first and maybe one of the most biggest things that was involved in code we wrote every single day all day every day was doing first layouts and tables, and then layouts with floats, and tables. Yes, table layouts were older than float based layouts. Remember, when used to throw everything in a table, that was the whole thing, tables upon tables upon tables. If you look at HTML email today, that's sort of what all the layouts were like. - -22 -00:04:56,820 --> 00:05:03,890 -Wes Bos: Yeah, just lots of nested tables inside of each other and it's extremely frustrating if you were to ever forget a closing, - -23 -00:05:04,260 --> 00:05:05,430 -Scott Tolinski: Miss A call span - -24 -00:05:05,570 --> 00:05:12,180 -Wes Bos: table markup themselves is already confusing by itself and nesting them six or seven levels. Steep is a world of hurt. - -25 -00:05:12,180 --> 00:05:41,580 -Scott Tolinski: It's a world of hurt. Now, if you've ever done HTML emails, you probably know what that pain feels like. It's not great. But then came along float based layouts and float based layouts were primarily using something like the float property. So I don't know if it was exclusively intended for just floating images was that Do you know if that was the exclusive intention of floats in general was to float an image to either side and let text wrap around it? - -26 -00:05:42,180 --> 00:06:01,650 -Wes Bos: Not just images, but like it was meant to take inline block elements and have text wrap around it. So whether that's a div with like, a little Did you know tip or something like that off to the right or to the left? Or whether that's most likely an image where you have text sort of wrapped around it? That was the original use case for it? - -27 -00:06:01,890 --> 00:07:02,910 -Scott Tolinski: Yeah. So that was really the whole thing. And all sudden, somebody said, Hey, you know what, if we just take a div and we put a float on it, well, then you can accomplish this kind of layout, where you have the modern two column layout where you had a sidebar, that was like 27% of the total width, or 33% of the total width or whatever, the golden ratio, somebody wanted to make up to say that would work out perfectly, you'd have the sidebar of the specific, there's definitely stuff like maybe your blog archive would in the sidebar. And that's still a very common layout today, don't get me wrong. But the way to accomplish it or anything, was with floats. I mean, just think about how crazy it is that we used to do like your header, the logo float to the left, the navigation float to the right, you know, those kinds of things inside of a container. And then, because of this, you had to implement what is one of the next things on our list, which is clear fix, did you want to talk about what clear fix is and why we needed it? - -28 -00:07:03,330 --> 00:08:25,380 -Wes Bos: Yeah, just because when you have a container, and all of the elements inside that container are floated, the container doesn't know about its its height, because there are no actual non floated elements inside of it. And because of that, that that entire container will just collapse. So if you've got like a wrapper, and you've got a sidebar, and you got your content, and those two things are 20% 80%, both floated left, so that they go snug up right beside each other, let alone, this is actually not even on our list. But remember, when we had to add up percentages, and then you also could you, you would have to use margin and padding, and you have to add that up to the entire width of it would add up perfectly. That was before box sizing border box. So we would have these two things and but if you float them both left, the wrapper would collapse on itself. And then the content that came after the wrapper, like the footer would just go like underneath all of your content. So what you had to do is to put like, an element that was not floated at the very end of it. And we it was commonly done by just saying dot clearfix, you would add a classic clearfix onto your elements. And what that would do is it would usually use as a CSS pseudo after element. And that would just add a block element at the end. And it would make sure it snaps down to its its rightful height. - -29 -00:08:25,470 --> 00:09:43,440 -Scott Tolinski: Yeah. And there was also people found that woman and find out its intended use was that you could use overflow hidden on a container to clean up fixes as well, there was a whole lot of different several different clear fix until like the clear fix, which was what you're talking about the just class of clear fix. That was like the eventual, like the de facto way of doing it. But for a long time, a decent portion of your web development time within CSS was figuring out where the flow issues were with your floats what was a flowing out of document what was actually a part of the document. Remember that being a very difficult concept to teach, I would have to do a lot of background if coloring. This was killed by Flexbox, first and foremost. And then later on it double killed by the addition of CSS Grid, giving us tools that are actually meant to build complex layouts and make it way, way better and easier than floats. And we don't have to deal with things like a clear fix to clear the floats. All right. Next one is going to be loading screens, hey, you remember loading screens. I know we used to have a loading screen specifically on our flash website when I did a band and it was like, you know, yeah, it had a percentage and everything, progress bar and all that stuff. - -30 -00:09:43,980 --> 00:10:17,070 -Wes Bos: Click to enter. What was really popular was having like like a buttons you can like enter the flash site or enter the like low bandwidth site or the HTML site like you would you would purposely have two websites, depending on your users. If they were on like a or like a dial up site, I think they called it at some point because it was like you couldn't handle it with a download. Yeah, something like that. Click to enter. So funny. And then someone figured out that you could Oh, you could just enter. Well, they didn't have to click enter. - -31 -00:10:17,250 --> 00:11:00,450 -Scott Tolinski: They were called splash screens, which are very common in mobile app development. Now, well, things are loading. It's just like a loading screen or whatever. And you still see them on top. But there was like a, for people who don't know there was a literal trend for a while where it was to say, like a solid fullscreen page, and you'd be like, welcome desktop site, collect, enter, and Yoda click and then it took you to the Index page, which is really kind of ridiculous. I don't know why it really came about in the free like, I don't know if it was like video games or what the influence there was. But I remember for a little while splash screens were the thing. You had to have a splash screen until somebody said, Wait a second. Why are we making our users click? I think there was maybe some data that came out around like people leaving your site when they get to a splash screen or something. Yeah, yeah. - -32 -00:11:00,450 --> 00:11:16,710 -Wes Bos: I remember record labels and bands would have like seven or eight. clicked enters. Yeah, they would like want to like slam you with all this, like new stuff that came out? Yeah. It's just hilarious. I never see a click to enter anymore. Except for beer and cannabis websites in Canada. - -33 -00:11:16,710 --> 00:11:52,140 -Scott Tolinski: Yes. Are you 19? Are you idea? Yes. Obviously, hit counters. This was a big one. And you largely saw these in, let's just say sometimes they were on fire, or sometimes they look like an odometer. But they would let you know, just how many people had been to this web page be that way. If you stumbled upon somebody page in a web ring, and it been like visited by like, 20 people, you were like, Well, no, that's fine. I don't know if this information is any good or not. But then if you had some that had thousands, you'd be like, all right, this this one's poppin. Right? Like mad x dot x mission or one of those be problematics - -34 -00:11:52,140 --> 00:12:03,720 -Wes Bos: forgot about that. I actually coded it counter. And I did it with serverless functions. And what what's the Amazon database then deny mo Dinamo, dynamic Dynamo - -35 -00:12:03,750 --> 00:12:04,860 -Scott Tolinski: Dynamo Dynamo, what - -36 -00:12:04,860 --> 00:12:36,059 -Wes Bos: I always say wrong. I nammo. Yeah, and we, I coded one up, you can go to Wes Bos or sorry, get up comm Ford slash Wes Bos Ford slash hit das counter. And you can see the oldest part of the web, which has hit counters and the newest part of the web, which is serverless functions come together Collision Course. Yes, we also along the same line had guest books. Yes, books were really fun. Super fun. We I think we should add that back. That was really fun. - -37 -00:12:36,120 --> 00:13:24,000 -Scott Tolinski: I would like to describe what they were with. With guest books, I think people might be a little bit more malicious now than they were in the past. Like in the past. I don't remember getting that much. I mean, there was maybe some spam, but I don't remember getting that much like spam or things you would moderate. Like, oh, you today if you put up a guestbook it would be filled with people, you know, posting racist things or, you know, being jerks to everybody else. Nowadays, it would not work that but I remember our band had a guestbook on our band's website. And that was like the message board for our high school people like actually, like they were using our guestbook to chat to each other instead of like a pre chat. I mean, I CQ existed at that time, but like, it was so funny that like people would actually utilize that to, you know, communicate. - -38 -00:13:26,100 --> 00:13:45,840 -Wes Bos: So true. Next up, we have just generals just flash websites where we're super popular back in the day. I never really coded a bunch of flash websites myself, I changed a few here or there, and I definitely had it and I was more of a iframes. Guy. Were you into flash? Yeah, - -39 -00:13:45,840 --> 00:16:28,289 -Scott Tolinski: I was into flash. I did a lot of flash arbenz website, because I mean, we didn't just have our stuff on MySpace. And to do audio on the web at that given point in time. It was like flash or bust. So like, you had to do flash audio. So we were like, oh, man, I'm very cool of the song started playing right when you load to the side. Yeah, that's what I do. And players. Oh, well, we did it more of like the entire site was built in Flash. Where? Yeah, now as in, we wanted to do animations. We wanted to do some interesting things. I had like a video game like select screen where you could like pick the band member to click to go to their page. And it was really cool. We did a lot of flash stuff like that. And I honestly I did flash all the way up until 2011 when I even applied for a flash job in Tokyo that I luckily did not get. But my my portfolio was all done in Flash. I did quite a bit of full flash site work. And this was largely killed off by a couple of things. Flash sites were the way to give me these really dynamic, interesting experiences that you couldn't get on the web even for a long time after flash sites died, but at some point Steve Jobs said hey, flash flash, you know, it opens up some security holes. It's maybe not necessarily the best experience at all time. And you know what, we don't want those on our apple phones. So Steve Jobs put lay down the ban hammer on flash on the Apple phone and what that basically killed flash, which is unfortunate in some ways I don't want to I don't want to be too fond about flash because it certainly was a nightmare in some regards, especially performance and security issues. Their flash definitely had its pitfalls, but I will say that I owned Android phones for for many years that ran flash video players, no problem. And it was always a blessing, especially when you're trying to watch maybe live sports or something like that you're trying to watch something in a flash player. And that always was nice. When there was a video player on your phone in the browser. you clicked it and it just worked. And I always hated that about the iPod or the iPhone at the time. This flash video player doesn't work. Why doesn't it work? Well, what's the better option and maybe nothing right now. But yeah, eventually html5 video came along and made that work. I remember even like YouTube was in Flash for a long time, you know, the video player itself, not YouTube itself. But the YouTube video player was in Flash, and it worked fine on my Android phone, I could go to YouTube's website and watch a video. And I remember that being a big reason why I chose Android initially over iOS is that and copy and paste those those are the two things that Android had that I really wanted. But for the most part, flashes is gone. And I don't really miss it at all. So now that we have html5 video and better ways of doing all this stuff, flash it, - -40 -00:16:28,620 --> 00:17:29,060 -Wes Bos: it took a long time we got like html5 audio and video and it it probably took like a good three years or four years for it to like, totally be replaced. I remember like tons of websites were just dragging their feet on replacing their players with whatever and it just wouldn't work or like Oh, it was really popular at the time. It's like a restaurant menus were all in Flash. Yeah. And you couldn't Couldn't you couldn't look it up on your phone. You couldn't, which was really fun. No, I couldn't. I had actually I had I had an Android phone way back then. But like maybe we should just say like flash was never maybe for people who don't know this a flash was never part of the web, it was always just like a third party app that ran on your computer, it was just embedded into your embedded into a website. So every time that you ran flash, it was actually running an app on your computer. And that's why it had to be like installed on your computer every single time and half the time it didn't work. Silverlight was the same - -41 -00:17:29,070 --> 00:17:31,310 -Scott Tolinski: thing. So you remember Silverlight, oh, then - -42 -00:17:32,700 --> 00:17:34,170 -Wes Bos: Silverlight forever. It was - -43 -00:17:34,170 --> 00:17:43,170 -Scott Tolinski: like he's like, you know, this thing that Apple's trying to kill off. Let's just make another one of them. And that like everyone's gonna roll their eyes every time they see, you must use Silverlight. - -44 -00:17:43,680 --> 00:17:54,210 -Wes Bos: I just remember sitting down, like every Friday night for dinner and walk trying to watch Netflix with my wife. And then it would be like Silverlight needs to be out good. And we're like, damn it, and it was - -45 -00:17:54,660 --> 00:18:02,190 -Scott Tolinski: even let you play it. That was the only one that used it. It's actually amazing that Netflix survived after their usage of silver light. - -46 -00:18:02,969 --> 00:18:08,160 -Wes Bos: Yeah, it is because they we didn't have DRM in html5. Yeah, - -47 -00:18:08,160 --> 00:19:50,520 -Scott Tolinski: absolutely. And then finally they added it, which was most people didn't want that. But you kind of have to have it otherwise people aren't going to use it. Especially for media. Anybody who's worked in any sort of licensing or media space knows that that stuff is expensive. I mean, wow. Licensing media or if any regards, especially once you get into actual major motion pictures is banana. So yes, they are going to protect it with DRM even if you believe the web should be open and free. Which you know, yes, you do sir component. But like yes, the movie producers are not going to sign on to any web technology that does not allow them protect their their property. No kidding. Okay. So next one is going to be how we did fonts free everything. So you youngsters have it easy nowadays, you get your font face. And at the very least, your biggest trouble is trying to figure out if the local which font the if the actual add on faces loaded or if the local font added or what. And now we have dev tools that even solve that for us for a long time. That was the biggest or I mean, nowadays, that's the biggest pain before we jump through a lot of hoops to do some fonts. No, I did not use a two of these. I don't know if you did. So I'll let you speak on those. But I used primarily, this is gonna sound crazy to some people, I just use PNGs. Anytime I wanted a custom font, I used a PNG with an alt tag a PNG, throw some box shadow on there, then I get access to all the fonts you've never had. He's like you open up Photoshop, you design the thing in PNG, export it with a little bit of transparency, just slap it on their nerves and image and I actually cringe when I think about how happy those sites were. I didn't even think about it just because it was like oh, I want this font loaded up loaded up as an image Ping. Wow, there it is. - -48 -00:19:50,910 --> 00:20:22,500 -Wes Bos: Yeah, I did that a lot. And I don't ever remember once hearing and people cry about accessibility. And now you tweet people just ignorant. To descendants of text as a screenshot, you 400 people saying it's not accessible. So accessibility is one thing that has come a long way come in that but the ones that I use was coupon and suffer. And what these would be is they were actually flash replacements. Was that flash replacements? One of them was was flash and I think - -49 -00:20:22,500 --> 00:20:28,410 -Scott Tolinski: one of them I thought coupon coupon was flash, but I don't know I'm not positive because I didn't use any of them. - -50 -00:20:28,950 --> 00:21:19,350 -Wes Bos: Yeah, it's it's I'm just looking at they have a stats of a hit its peak partway through 2011 was when it was pretty popular. Basically, what it was, is that you would take your, your, your font face, and it would convert that to I believe it was to a Flash file, and then it would go through all of your page and anywhere that you used an image or anywhere that use like an h1 or h2 or whatever it is that you're selecting, would go out and replace those with the Flash version of that. And it actually worked really, really well. And that was huge. Because you are not able to use anything past websites, fonts, for years for the entire web, but forever and then all sudden you're like, how is somebody just using this font that's custom. And it's not an image? It was it was so cool, dude. So web safe fonts. - -51 -00:21:19,350 --> 00:21:25,530 -Scott Tolinski: Let's see. I have them pulled up here. Can you list eight web safe fonts? - -52 -00:21:26,010 --> 00:21:37,850 -Wes Bos: Verdana. Arial, too? Yeah. courier? Three. I don't know. That's, that's only three I know. Yeah. And Arial and courier. - -53 -00:21:37,890 --> 00:22:24,570 -Scott Tolinski: So it's funny because my go to was always Georgia. So Georgia was? Yeah, I really leaned hard on Georgia. Arial. Obviously, you couldn't even use Helvetica Really? Helvetica was only in a fallback because only Mac users had it. I don't even know if there are Yeah, there's probably only let's see 1-234-567-8910 11 there's less than 20 website fonts. So you were really pretty limited at that time in choosing your fonts. It was like, okay, which of these three Sans Serif fonts are you gonna go with? I'll go with this one. I don't know. It was actually so funny. When I worked at the University of Michigan, they actually had Georgia and part of their official branding in the hospital. So I was like, Yeah, I can use a lot. That's actually the real to their branding. - -54 -00:22:25,230 --> 00:22:28,350 -Wes Bos: Was it was Comic Sans. I think Comic Sans was not web - -55 -00:22:28,350 --> 00:22:36,510 -Scott Tolinski: safe. But it was installed on every according to those computer. W three schools. Comic Sans was one of the websites. Oh, - -56 -00:22:36,510 --> 00:22:42,960 -Wes Bos: no, that was a good old time. Good. I'll say fonts. There was also web safe colors at some point. - -57 -00:22:42,990 --> 00:22:47,790 -Scott Tolinski: Yeah, that I don't remember when that was, but I don't remember having to do too much. - -58 -00:22:48,150 --> 00:24:12,570 -Wes Bos: But one thing that somebody I asked on Twitter, like, what were the things and one of the things that were super hot, 1015 years ago, were custom CMS is, you know, everybody made their own PHP, MySQL CMS? Oh, yeah. Today Oh, yeah, that is not much of a thing anymore. Obviously, people still can make a custom CMS. But one of them. This is me transitioning to an ad, one of the popular CMS is that you can use is called sanity@sanity.io. Sanity, io is a structured content, CMS, it's really cool. Because you can npm install the CMS, you can go ahead and use it, you can create your own back end, they give you this thing called Sanity Studio, which is the actual CMS itself. And it communicates with Sanity via their API's. But if you want to create your own custom react components for the CMS, you can still use Sanity. But you can you can create your own custom react components, and even still hosted on Sanity Studio, which is pretty nifty. So you have control over the back end of your CMS control over your front end, but you're still using this awesome service that comes along with everything you'd know and expect from CMS. So if you want to check it out for your next project, go to sanity.io forward slash syntax, that's gonna get you double the free usage tier that gives you more assets, more API requests more bandwidth. pretty sick. Check it out, send it yeah, i - -59 -00:24:12,570 --> 00:24:38,340 -Scott Tolinski: o. d sick. Cool. So let's get into the next one. Which is, this is kind of a joke because it wasn't an official topic. Like this wasn't an official thing. But the what I called it was folder based version control, where you share folders at like old with the like public dash old published dash dash old old publish dash, February 2010, - -60 -00:24:38,580 --> 00:24:40,920 -Wes Bos: you know, public final 10 public, - -61 -00:24:41,430 --> 00:25:00,330 -Scott Tolinski: what am I? What am I go to techniques, which I'm sure you've done before, as well, it says that like on your FTP, you're about to upload a new version of the public folder. What do you do before you do that? Well, you duplicate the old one and then overwrite the one that was there. So you duplicate it, you rename it and then you overwrite the one that was there. And that's how you deploy to a website. Ladies and gentlemen. That was - -62 -00:25:00,330 --> 00:25:09,960 -Wes Bos: that was like the original seamless cutover was the Rename of the full effect the Rename it to do is just rename the folder and everything would work. - -63 -00:25:09,990 --> 00:25:24,030 -Scott Tolinski: That is something that we did you know, in professional work. That's just not how it worked. That's what that's what people did. I mean, sure enough the big guns still had whether it was SP anything SPN that the Yep, yes vn - -64 -00:25:24,030 --> 00:25:28,200 -Wes Bos: that's the one that WordPress uses that one subversion it's called Yeah, - -65 -00:25:28,260 --> 00:26:57,870 -Scott Tolinski: and get really wasn't a thing and when Git came out real software people were like, finally, this thing exists in a way for the web that people are going to use it. And those of us who were normal web developers and webmasters were like, I don't understand this. Like, I don't get why, like, remember Chris, Chris coyier had that whole series it's like me learning get in that that was like, the way I first saw him get where he was just like, I don't know, get so I'm gonna just like have some videos or lessons that it's like me struggling to learn, get or whatever. And and that was like, blew it open. To me. It's like, Oh, yeah, the people who are actually using this stuff are pros. You know, the people who you consider pros were they're having to learn at the same time. But this was killed. I love this folder based version controls killed by actual version control, and Git and GitHub, and all those wonderful things that we use today, along with this next one, which was also killed by Git as well as many other things, which would be FTP, which granted FTP is the technology is not it's not gone anywhere, but FTP as a means of deploying your websites. And the total is the primary way, was this ever a thing that you did? Because we did this? Was it sublime, even text me had this, where you rig up your your code to be connected directly via FTP or SFTP. And then you edit and save a file, and then the text editor would automatically just upload that file to FTP. Therefore, if you broke anything, you'd get all sorts of stuff. Yeah, - -66 -00:26:58,170 --> 00:28:05,010 -Wes Bos: I did a good probably a couple years of that. I can't even believe that I did that, like nobody had local development setup, especially for WordPress, they would just login. And this is what this is why people could not move off of coda forever, because they were so dependent on the Save and upload process. Imagine how slow that was you edit a CSS file, you save it in the uploads to and then you have to go back and refresh. And now we have like hot reloading and you just instantly see it. But that was, surprisingly, a very popular way to work, where it would just upload it. And if you accidentally deleted some code, then you would as you better hope you have a backup dash one folder, otherwise you were poached from working off the live version of it. And then when people I I at least for me, I saw a lot of people move away from it when they move to Sublime Text. Yes, there certainly was plugins for it, but it didn't come out of the box. And it wasn't so married to it. And then people said, Okay, well, how are other people? I think they're working locally. Yeah, it was called sublime. SFTP. FTP. So yeah, - -67 -00:28:05,010 --> 00:31:02,040 -Scott Tolinski: that was it. Yeah. Yep. No, no, you're very right. I think local development. I remember when people were like, there, they would call it like cowboy coding or something. arrows, are editing files live on the server. Why don't you work on this locally. And I remember at the time, it was even after I had my first dev job, just being like, that seems like it would be so much harder to maintain two versions of the files, maintaining two versions of the same files. Good. Like, that's hilarious think of now. But I was like, I gotta have a local and production. And that seems kind of weird. But now it's just it's so ridiculous to think of that was even the thing. Totally. Next one we have this has been of a throwback, a CSS Zen Garden, the idea of CSS Zen garden was they would give you a bunch of HTML and be the same HTML for everybody. And then you would code the CSS for that specific HTML. And you would have all kinds of different websites, they would look different. They have different backgrounds, different fonts. And it was just a perfect showcase for the power of CSS. And this whole idea of separation of concerns where you have valid HTML markup, and on one hand, and then you have CSS that lays it out and designs the thing, based on on however you want. And unfortunately, what a lot of people would do is they would absolute position everything. Because the one thing you couldn't do in CSS at the time was reorder content. And you can do that now with with grid and Flexbox. But I thought that was pretty funny. He had the coolest thing about CSS and garden for me was being able to see like the amount of things people could do with it. Because before I really got, I actually had a book, I'm trying to think of what the name was, but I got it like clearance somewhere. And it really like all I was was different CSS and gardens explained like that. That was the entire book. It's like here's, here's all these different, really cool CSS Zen garden. And here is how they did it. How are they able to accomplish some of this stuff because before CSS Zen Garden, really for me, I had done things in a very ugly way. It looked very, like very early web, like very early web until CSS and garden to me CSS Zen garden was what took my websites away from being early web to being like, actually look, none not good design wise, but like, actually look somewhat more interesting than just were really, really archaic stuff. And CSS Zen garden was awesome. And it was most likely killed just by CSS getting easier, because like, when CSS got easier, and you got access to doing more interesting things, while all of the sudden, completely transforming this HTML doesn't seem like that crazy of a thing anymore, because it didn't require interesting or useful techniques, it required techniques that were just based baked into CSS itself. So I think that's probably why it doesn't exist anymore. You still see things that are, like similar to it, but not really. - -68 -00:31:02,850 --> 00:31:18,180 -Wes Bos: It does still exist. And a lot of stuff is absolutely positioned. Yeah. And it's got all those web font classes on the HTML, which was from was the Adobe font display, or what was that called? Oh, they're still a thing. I'm - -69 -00:31:18,180 --> 00:31:27,420 -Scott Tolinski: still a thing. That was a really font replacement. That was the first one type, type, type that type deck type note, type cat type. Good. - -70 -00:31:27,749 --> 00:31:32,360 -Wes Bos: That was the one yeah, that was big, where you could pay for fonts. And just like load them. It - -71 -00:31:32,360 --> 00:32:01,800 -Scott Tolinski: didn't used to be owned by Adobe, either. When it first came out, it was a known thing. Yeah, I remember that's when I learned the one pixel highlight trick where if you had a button, and you put like a one pixel line of CSS, like a border top of whatever that background color is just slightly lighter than it looked like a gave it this embossing and then maybe throw a little gradient on there. And then all about that really embossed buttons. I was all about that, too. And typekit was a really excellent CSS. I remember diving into that CSS and being like, yes, this is my jam. - -72 -00:32:02,310 --> 00:32:30,390 -Wes Bos: Next, we have just like, text editors in general. So textmate was the big one. At the time. That's like I think like, at least for me, a lot of people started in Dreamweaver. And then they switched over to textmate. Along with text me there was coda, which is still has a very loyal fan following. They were working on coda to notepad plus plus, I think they still have a pretty loyal fan following, but it's not nearly what it is. First, I need like a sublime text. And - -73 -00:32:30,390 --> 00:34:10,290 -Scott Tolinski: now what is vs. code? Yeah, and even in a different category, you mentioned Dreamweaver, back when it was Macromedia Dreamweaver is when I first started using it. And then there was also Adobe had their own called go live. And then there was Microsoft front page. And those were the three sort of visual editors that were were working in Kota really sort of straddled the line between a true visual editor like front page and in Dreamweaver, and still gave you a bunch of the tech stuff, but like some hand holding stuff, or like neat look, instead of having to write CSS hexes that gave you you know, the ability to quickly pick a color or something like that. I did go Dreamweaver to textmate. I skipped over Kota, and then went from textmate, to sublime and then to VS code. So this was largely killed by editors getting a lot better. And front page got killed by Adobe buying Macromedia Adobe about Macromedia. They're not front page go live. Go Live was Adobe's version of essentially Dreamweaver, before Dreamweaver, it like tried to simplify a lot of things. Either way, Adobe bought Macromedia and then Dreamweaver became their product. And they kept them both side by side for a little while. And it's really unfortunate that my child, my college curriculum, web development course was like, basically, here's how to use Adobe go live. That's what the course was. It wasn't about HTML, it wasn't about anything else was like, here's how to use Adobe go live, which, of course, became obsolete, like one year later. So this is definitely something that's been killed off by modern tooling. Now, the next one is going to be sliding doors now. I don't actually is sliding doors. I'm gonna take a guess on this is that where you had a horizontal layout where they were sort of like sideways accordions that opened is that sliding doors Oh, - -74 -00:34:10,319 --> 00:35:15,330 -Wes Bos: okay. Oh, that's, that was good gas. But sliding doors was a technique for buttons, where if you had like, imagine a button with rounded corners on either end and a gradient in the background, you couldn't do border radius, you couldn't do gradients, you couldn't do any sort of custom buttons with CSS. So what you would do is you would take your button design, he was slice it into two pieces, and the left hand side would be your rounded corners, your gradient and it would be like 2000 pixels long, and then you would have a right image that would you would just overlap and then absolute position, a couple of pixels over top of it. And the idea is is that you could have dynamically sized buttons that had cool backgrounds and borders and all that stuff without having to make any custom size button for every single thing. And it would just the idea is that the left is super long. And the right is just the end cap and the end cap would just overlap the edge of it. So it looks like dynamically size button, just Google says sliding doors, CSS to visually see it. - -75 -00:35:15,480 --> 00:36:40,610 -Scott Tolinski: We did that all the time. That was definitely a because if you want to fancy buttons, there's no other way to do it. I mean, there were like a lot of techniques there around around those types of things. All right. Next one would be the PNG fix. Now the PNG fix, I don't know technically how it worked. But back in the days of I believe IE six Western, I kind of chatted about this before, you couldn't use transparency and images. That's a funny thing is that even in Dreamweaver, so Dreamweaver is internal browser, whatever it may have been, allowed you to do transparency and images. And the browser that I was using at home, whether it was Firefox or whatever, at the time, allows you to see transparency and images. But I was working on some sites. And I had people saying, hey, why does this look so weird? in my browser, these images look very odd. And I say, ah, aren't thinking about that. It looks fine. For me. That was my probably the first instance of it looks fine for me in my entire web development career was finding out that Internet Explorer six did not have transparency and images, because all of a sudden, people were like, these images look like crap. And I should be like, it doesn't it looks fine. This looks fine to be so on safari, whatever, it looks fine. And it took a little while before I figured it out. So you could not do image transparency to do transparent images, you need it to have a one pixel by one pixel transparent GIF. Do you know how this actually worked in practice was, - -76 -00:36:40,920 --> 00:37:44,310 -Wes Bos: I'm just I just looked it up. Because I was like now that I actually understand web development, I bet I could figure it out. So it was a HTC file, which was some sort of like special, ie specific proposal. Well, that never went through, but I implemented it anyway. Classic eight. Yeah, it looks like it's just a JavaScript file that loops all over the image and creates an element and sets it to be the color of the background of the thing that is it is on. And I don't really know how that worked. But I guess just by Oh, it was a VML. There's some VML thing in IE would make it transparent and make it show through whatever was behind it. So it looks like it's just 200 lines of JavaScript, which I totally understand. Now, I could probably sit down and totally get how this works. But at the time, it was just magic, or you just throw this hdc in there and your images would be transparent. - -77 -00:37:44,730 --> 00:37:52,050 -Scott Tolinski: It felt like magic. All I knew is that like the first time I figured it out, it was it was pretty awesome. So big fan of that technique in the time. - -78 -00:37:52,050 --> 00:39:05,940 -Wes Bos: This one is kind of like the sliding doors technique is called the nine panel layout. So if you had a div where you wanted to put a custom border around it, or really anything like, like a pretty popular thing, on band websites would put a B to put a grunge border around the entire, like an entire thing of text. And if you wanted that you don't necessarily know the width or the height of that thing, you probably knew the width of it because everything was fixed width, but the height of it would be depending on how much content was written. And the thing that you would do is you do, you would make a nine panel square. So if you think of a square, the center is most of your content. And then top right bottom left is your corners. And then top right bottom left is the the filled out pieces. And then the piece in the middle is where your actual content would go. And you'd have repeating backgrounds on all of those, except for the top right bottom left corners, those would be your actual border corners. And that was very, very hard to do. Because you would also combine that with a table and repeating background images and luckily that thing is not we just have CSS now we don't have to worry about any of that. - -79 -00:39:06,269 --> 00:40:52,080 -Scott Tolinski: Yeah, and the Android It was called a nine patch and actual Android development cuz I remember I had to do quite a bit of that to do rounded borders and stuff in Android development when I did some level of tutorials videos on that. Next up is going to be CSS three please CSS three please was this really awesome site that came out at the time when CSS three was just starting to take off and this was a Paul Irish joint right yeah, yeah, so this was done by oh it's dude that is it this is actually freaky I said the Paul Irish joint just like you know going like a spike lee thing and then I I kid you not I meant CSS three please calm and it says Copyright 2012 A Paul Irish and Jonathan Neil join. They use the things that I've ever said that before and I just said it. So this thing is so cool, because, man we had all these vendor presets. It's right when CSS three came out, it was like you couldn't just do a box shadow, you had to do a hyphen, WebKit, box shadow, whatever, you have to do all these things. And each time you wanted to do it, you had to have all the prefixes. Well, there's no autoprefixer to just add them for you. There was there was no, there was like, no real good way of doing this. Especially if you weren't using things like sass at the time. So right at this time, mad, here's what here's what you would do, you would say, I want a box shadow, you would go to CSS three, please calm, you would edit the line of snippet they have for box shadow, then you'd copy and paste all of the Chrome extensions with comments letting your other developers know which browsers those comment or those things are supporting. And then you paste it into your site. Wow, I cannot imagine working like this. But I did. I did it every day, man that just seems like so extraneous. Yeah. So a Paul Irish Jonathan Neil, for that. - -80 -00:40:52,130 --> 00:41:12,110 -Wes Bos: It was it was it was only 10 years ago that this was the thing. Yeah. The modern web as we know, it has just been built in 10 years. 12 years. It's pretty incredible. Yeah, see that? That was a I guess that is a long time. But there's probably people listening to this podcast, who were like five years old. - -81 -00:41:13,190 --> 00:41:15,360 -Scott Tolinski: Right? Get off my lawn episode. - -82 -00:41:15,540 --> 00:41:41,310 -Wes Bos: Yeah, absolutely. All right. So Scott, and I are just looking at the list here. And there's probably 20 more things that we have. So we're going to pause it here and pick it up on the next show. And we've got a whole bunch of interesting things from from times past as to how we used to do things. And hopefully you're finding even if you are at Warren, a developer, back then you're probably finding this interesting about how we did in the olden days. I think - -83 -00:41:41,310 --> 00:41:58,380 -Scott Tolinski: it also provides some context to you know, some context to where these solutions are and why people are so happy to have the solutions we have nowadays. Most people know that hey, well, we we couldn't be building these really complex things because you just even just simply getting a border radius on something was a complex endeavor. So - -84 -00:41:59,420 --> 00:42:04,230 -Wes Bos: so true, was was very tough. No, it also was tough. Scott, - -85 -00:42:04,590 --> 00:43:21,710 -Scott Tolinski: trying to find out where your errors and bugs are happening in came from. So our sponsor, our sponsor, our sponsor, this week is Sentry. It's great West is wearing a Sentry t shirt today. I'm so hyped about that, because it's really nice shirt. So Sentry, it's Sentry.io is the place to track all of your errors and exceptions. Let me tell you Sentry has a lot of these really great features from being able to tag each of your releases. So let's say hey, I fixed this bug. I can say, You know what? I fixed this bug. I know I fixed this bug. I'm really good at coding. I typed the right words, the words to fix the bug, and then I deployed it, and then you could click Yes, I fixed that. And then all of a sudden, you get an email from Sentry saying hey, yeah, this bug that you marked as being fixed in version 10.5 Well, it's still there in 10.6. So you need to get back to work so so that is what Sentry does for me and I absolutely love it Sentry is like a pal that is always got your back then you know, whenever you made some mistakes in your code and you weren't there to see it. It's fantastic that head over to sentry.io use the coupon code tasty treat all lowercase all one word to get two months for free. It's a tool that you are going to want to use because I want to use it and I've been using it for years and I still want to use it so that's the sign of a good tool. So thank you so much for Sentry or sponsoring - -86 -00:43:22,260 --> 00:45:37,920 -Wes Bos: awesome let's get into some sick pics. I got a good sick pick for you today. What I like this summer I became a small engines mechanic I noticed worked on all kinds of Yeah, I worked on all kinds of really fun stuff I got an old CD that I've been fixing up and I think I worked on like four or five and one thing that I noticed is that there is a lot of Allen bolts on these things hmm and the frustrating thing about allen keys is that they are very slow to write and also usually people don't have both metric and imperial allen keys so they use the closest one and then they end up stripping out the inside of the allen key because a lot allen key stuff is like aluminum So I did that myself and I was finally like I have I have all the proper allen keys but it's really slow. So I finally got allen key bits for my drill impact driver and you can certainly destroy furniture with these because he shouldn't like if you put together IKEA furniture and you can you can certainly racket but if you know what you're doing and you're careful having all the sizes of proper allen keys for your drill is key and I was just like why did I not have this before it was like 15 bucks for a set of every single one ever. And now I can can move much quicker. So I've been I've been on like a serious tool kick for the last couple years just finding like the proper tools for for doing the job. And this is definitely one of them that I, I wish I had got it earlier. So I'll put a link to the one I got, specifically. And I think that it doesn't matter all that much. They say they're super hard. But the thing I got them on Amazon, the thing you have to worry about sometimes Amazon tools is that they're very soft metal, and they'll just wreck easily. But for the case of this is that you kind of want your bolts and your your things to be the same hardness, otherwise, you're going to strip them out if you go too quick. So with that sort of caveat, be careful. definitely pick yourself upset. Cool, - -87 -00:45:37,920 --> 00:48:21,420 -Scott Tolinski: I am going to sic pick something for those of us who have been working from home and maybe want to step up your lighting game for your just your your home studio. In general, a lot of people are getting into these types of things where it's like actually being on camera or twitch streaming or whatever. And one of the things that can really take your setup to be a little bit less amateurish is a good lighting setup. Yeah, sure you want a better webcam, but a better webcam and crappy light is still not going to look great. So I am going to sic pick these LED lights that I got it's 130 bucks for a two lights set, which is really, really reasonable for studio lamps. Especially considering these studio lamps will blow your face off. They're so bright if you want them to be. So I love these little amps there. It's just a panel of LEDs. It's very cool. It gives you gels to change the color, you just plug them in, there's big tall stands, I set them up on the side of my desk. And let me tell you, even on the lowest brightness, brightness settings, these things still totally fill my space. And imagine if I were to use them elsewhere that they would be just totally as effective. It's funny, we use these for family pictures and stuff, let's say where we're going to be doing a family portrait in the living room. I'm not just bringing my camera, my tripod, I'm hustling these lights, and I'm gonna get a nice full light LED lighting setup. So these are really fantastic lights. I am the type of person who had originally bought these giant light boxes in the past. So I've had like several iterations of like lighting setups, and nothing has been cheaper, easier, better, faster than LED lights. And these LED lights are definitely at the point where like the technology has gotten there. I think the only only place they could go from here is to be cheaper. But these ones have barn doors. They're really nice. They don't get hot. You might not have been in this world, but I used to have to do lighting setups. And it'd be for different rock musicians, right X, Y and Z guitarist would come into the studio, I would have to do the entire setup eyesores for this magazine Guitar World. So let's say Trey Anastasio, the guitarist of fish he comes in right he's a big rock star, he's sitting down. And then like while I'm setting up the audio, I'm setting up the backdrop I'm setting up the camera I also have to set up the lighting and you had these like super powerful lamps that had these things called barn doors, these big metal barn doors which although I have in the barn doors would get so hot it would burn your entire finger off if you were to touch it so you had to use like a broom handle and like whack it to kind of get in the right spot. Just like tap it a little bit so that used to be a thing thing of the past now these things stay super cool. So big fan of these lights. Check it out if you are into needing any sort of lighting setup. These are been my go twos of choice. Shameless plugs, Wes, you have anything to plug. - -88 -00:48:21,870 --> 00:48:43,710 -Wes Bos: I'm going to shamelessly plug my upcoming course it probably won't be out by the time you listen to this but might be Master gatsby.com. It's going to be my course on mastering Gatsby we use Sanity as CMS on the back end. Lots of CSS little tricks we're gonna learn along the way custom reactor is going to be a good one. So get ready for that - -89 -00:48:43,890 --> 00:49:23,610 -Scott Tolinski: cool I am going to plug my latest two courses I just did a course on react 3d easing Rick three fiber in JavaScript talk all about things like the new stripe website maybe transmits website things like that, that are utilizing 3d on the web. This is something that you're going to see happening more and more often. So you want to check out my course on level up tutorials comm forward slash pro and also out this month is animating, react with framer motion to it's the follow up to the critically acclaimed previous animation course with Kramer motion. So it's very cool. We do all sorts of practical examples. It is non stop practicality in that course. So check those out at level up tutorials.com - -90 -00:49:23,790 --> 00:49:29,520 -Wes Bos: Awesome. Thanks so much for tuning in and we will catch you on Monday. Peace, peace. - -91 -00:49:31,320 --> 00:49:41,100 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax283.srt b/transcripts/Syntax283.srt deleted file mode 100644 index dcb972aba..000000000 --- a/transcripts/Syntax283.srt +++ /dev/null @@ -1,72 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott L. Totally ski. - -2 -00:00:25,950 --> 00:00:51,420 -Scott Tolinski: Oh, welcome to syntax and this Monday hasty treat. We're gonna be talking all about time block planning, what it is, how it can help you and how it's helped. Well, at least myself, and I don't know if Wes has been doing it. But we're gonna be talking all about the opportunities there that you can get some sweet productivity gains while keeping yourself sane. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, and with me, as always, is the Wes Bos. - -3 -00:00:51,659 --> 00:01:00,150 -Wes Bos: Hey, everybody, I'm excited to hear about this. I don't think I've done time block planning before. But when you kind of mentioned what it was, I said, Yes, I would like to learn about that. - -4 -00:01:00,540 --> 00:02:36,720 -Scott Tolinski: Yeah, it's tough to learn about in Cal newports books. He's a big, big proponent of it. So this episode is sponsored by Sentry and Sentry allows you to see your errors in blocks, though, you can throw your errors onto your time block planning schedule, and try to approach them in a more structured way. Now the cool thing about this is that you could just click a button directly from that issue and have it scoot on over to your GitHub issue, even assign it to a specific user directly from Sentry. That way you can make sure all of your issues are accounted for, head on over to sentry.io and sign up using the coupon code at tasty treat all lowercase all one word and get two months for free. Thank you so much for centuries for sponsoring this episode. So, Wes, let's talk about time block planning. Now specifically, let's talk about maybe some of the situations where this thing could come into handy. We'll talk a little bit about what it is how to how to utilize it effectively how to what are some warning signs that you're not utilizing it correctly. So for me personally, I don't know about you. But things have gotten tougher lately, with with planning our time, Courtney has gone back to work full time, I'm kind of working full time. And what that means is that neither of us are actually getting a 40 Hour Workweek, even though we both require it. So it's been kind of a struggle situation for us to figure out how to make the most of whatever these 20 hours that we end up kind of getting our if you guys been seeing a similar sort of struggle. I know we've talked a little bit about this before. - -5 -00:02:36,810 --> 00:03:11,370 -Wes Bos: Yeah, I'm still getting, I would say probably 32 hours in a week, certainly not my full, full 40. So not not nearly as bad as you have it. But we are seeing a bit of a pinch because like my wife is still trying to work. She's squeezing in Saturday mornings before. Well, taking breaks. I talked about this a couple episodes ago, but certainly being able to say, Okay, I've got this three hours, and what can I get done in it or whatever? Like, how do you make that three hours, the most productive three hours as possible. So I'm kind of interested to hear about this. - -6 -00:03:11,519 --> 00:08:29,310 -Scott Tolinski: Yeah, and this is one of those things where we've really, really like run into this situation as being a solution. Because it has been a difficult road for us. You know, we've constantly been sort of butting our heads up against each other schedule since trying to work together from home and and have to manage the kids on top of this, it's been a very difficult situation for us. And so after really struggling through a whole bunch of different attempts and non attempts of different things, I had been aware of time block planning, I read all of Cal newports books I listened to his podcast is one of my favorite productivity people. And because of that I just had never really fully dove into this time block planning specifically, in the past, what I've always done is just a to do list, right? Here's the to do list, here's your most important things. Let's get them done. But what happens is that you you see that certain items, when you come time to do it, you maybe put it off for the next week, and then the next week and the next week or whatever. Or maybe you don't give yourself enough time, or maybe you're not noticing you're actually accomplishing things. So time block planning largely is all about blocking off that time for specific goals and specific tasks rather than like global tasks. And it really starts with really removing the time on your calendar that is not open. So the very first thing that we did is we had added to our calendar, I use Google Calendar. So just Courtney, we both have our own schedules, but we can both can see each other's schedules. And we both start just adding our stuff. For instance, I added all of the time, typically with the exception of Mondays, I am on dad duty until noon. So every morning until noon. I'm on dad duty and every day Afternoon, I'm on work duty. So by just sort of blocking off all of that time to say, Alright, this is the time of Monday of duty, it's, you know, 812. I don't even think about that time, I don't schedule that time. I know it's the same every week. And you think, Well, why even put it in your calendar, because it's so visual. And who knows down the line, maybe you'll schedule something here or there. But either way, you're blocking off this time individual for very specific things. Okay. So first and foremost, you want to block out all those regular appointments, you want to block out all of the stuff that you got to do every day. So me personally, I throw dinner around there, here's the time from like, 430, to, you know, 630, it's like, Alright, we're either I'm either going to be making dinner, or I'm going to be watching the kids while Courtney makes dinner. And then after that, it's, you know, hang out with the kids and then bathtime. So I make sure I have all that time blocked off. So I can see exactly what my open blocks of time are. Mm hmm. And then you can start scheduling things. So I like to do this on a Sunday evening, where I kind of sit down with my to do list, and I used to do list, but it's basically just a big old to do list, I sit down to my to do list and I just start adding stuff, anything that pops into my head that I have to do for the week. Alright, got to release a course, got to push it update, got a send this person in email, got to connect with this person, whatever I I put it all into my just inbox of to do list. And then I can sort of see everything in a glance, I can see how much time I have available over the course of the week. And I put each individual task into a real time slot. So instead of just saying, alright, I'm going to work from noon to four, right? Yeah, I'm going to work it so up in the air, or even still up in there. I'm going to code from 12 to four. What am I going to code? What's the end result going to be? How far Am I going to get? What am I going to try to do? Those things are not answered by just throwing just some generic thing. And and if you say hey, Oh, I like to do lists. Yeah, I'll just I'll just approach my to do list. But sometimes, it really ends up happening where you have this to do list, you have these things that you want to do you have coding time, but then something else nudges you away. Within that coding time, your your calendar says it's coding time, and I was supposed to be working on, I'm supposed to be working on this aspect of the checkout flow. But instead, I've decided to refactor this little thing, because well, it's still coding time, it fits under the description. And what you find is, is that if you block out specific amounts of time for specific tasks, ie, I am going to work explicitly on the checkout flow for this thing, right now, then it makes it so much easier for your brain to just say, this is what I'm doing period. This is I'm not doing this else, I'm not doing this other thing, this is what I'm doing. I'm doing this checkout flow. And it really helped me one of the things that in the past I would do is that I would go to record for my tutorial series. And for the most part, you know, I'm prepared or whatever I have my material there, I've got my notes ready to go and I start recording but then I kind of Lottie dot because you know, I have all this time blocked off, I have eight hours blocked out for recording and I got to get like yeah, videos done or something like that, then you just kind of make it fill in at the time. But now what I'm doing is it's like, Alright, I'm gonna spend this hour specifically to read over my materials before I record that I'm going to spend these two hours explicitly to record and only these two hours to record, I'm going to take a break, I'm going to do something else. It allows you to schedule in breaks allows you to schedule and very specific everything, and it prevents things falling from the wayside. Also, if you do it weekly, you definitely get a good handle on, - -7 -00:08:29,310 --> 00:08:29,910 -Wes Bos: like, what - -8 -00:08:29,910 --> 00:08:45,870 -Scott Tolinski: are the key things that I need to accomplish this week? It's not just about today. It's not just about tomorrow. It's this whole whole week. And when you get that stuff out of your brain, like I know I do, I'm not sure if you do I have so many floaties in my brain of - -9 -00:08:46,040 --> 00:08:46,860 -Wes Bos: Yeah, yeah. - -10 -00:08:46,860 --> 00:09:24,720 -Scott Tolinski: What What did you What did you say pick a couple of shows that go the water noodles. I have so many water noodles floating around the side of my brain? Just ideas. And I just want. Like, it's so easy to feel like you have a handle on all that stuff. Like, Oh, I got a handle on this. I got a handle on that. Yeah, yeah. And then all of a sudden, you work on something else, you work on something else. You're like, oh, shoot, I forgot about this thing. Here it is in my deadlines, whatever. So by time blocking planning, as long as you throw everything into your to do list and then you give it a specific time and a specific duration, and everything like that it really has made both of our corneas working life so much smoother. - -11 -00:09:24,959 --> 00:10:59,070 -Wes Bos: Yeah. I think the key thing you said there is that like the task will just expand to the amount of time that you give it Yes. And that is so true. Sometimes like I hate time blocking and stuff like that. And I just like to like sit down with literally nothing on my calendar and just work but I know that I probably would be more productive if I were to give myself an amount of time like this morning. I had two hours before I had to my wife had to run an errand so I think the kids I had six videos or something like that that I wanted to edit and I got them all done, but it was because I knew I had a hard out at 1110. And I had it had to like be done that and I didn't want to like I hate when I'm like halfway through editing a video and I have to pick it up the next day, because I'm not in the like headspace or whatever like that. So being able to block it off with those time blocks seems like a really good idea because it definitely does work. I definitely do that for stuff that is not related to stuff that I enjoy. So whether that's phone calls, or taxes, or big stack of mail that I have to go through or like all of that, like annoying stuff, email, stuff like that I'll definitely block off time for but when it comes to my like creative work, when I'm coding, creating courses recording, I often will just sort of give myself, I think, just unlimited time. And I think the the problem with that is like I don't I'm not good at estimating how long something will take. So like, how do you deal with that? If you're like, Oh, well, I have two hours to do this. And you're like, Oh, I didn't get anywhere near what I wanted. - -12 -00:10:59,489 --> 00:13:17,400 -Scott Tolinski: For me what I've done. It depends on what the deadline of said thing is, if the deadline is not today, and whatever, I found myself getting ahead of things a little bit more with this time block planning, for instance, like I've been, I've been scheduling in time to work on next month's series in the current month that I'm working on one series, I never had done that before. And you might think, well, that's crazy to start working on the next month series when the current month series isn't even done. And maybe you see the timeline, you know, getting closer and closer to being finished. And because maybe the time that you've prepared for the time that you've spent for this month series isn't being totally utilized, or isn't being finished on time. I don't know project estimation overall has been very difficult. Yeah, I think as long as you give yourself enough outs, maybe potentially, like some flex time to say, All right, here's Monday, I'm gonna work on this, you know, from nine to nine to 11, right, I'm gonna work on this one thing till nine to 11. And then maybe didn't get done. So then you could have a flex time later in the week, or maybe even later in the day to say, Alright, whatever's going in here is going to be something that I couldn't finish before. But still scheduling that, that flex time. And I think for me, the biggest thing has been scheduling, scheduling, scheduling, utilizing the calendar, like my calendar, and my productivity has been at its highest, my stress level has been at its lowest with my calendar is absolutely full. It's absolutely full of non meetings, found things and whatever. One of the biggest, small aspects of this, one of the biggest small aspects is really that Courtney can look at my schedule, and not have to ask me anything like sometimes, like just coordinating our schedules was the most, most difficult aspect of this whole thing is to say, like look at our calendars and say, Oh, can I schedule this for this or whatever, whatever. And now we know if it's like the next week coming up, and my calendar is filled out that she can schedule things in the time that she has available that I whatever that just works without having to have that additional layer of meaningless communication, right? Like because I would rather spend the time talking to Courtney about things that aren't like calendar and schedule and whatever. Yeah. Fun stuff. - -13 -00:13:17,400 --> 00:13:35,250 -Wes Bos: My wife will often be like, oh, like, Can? Can you do this during this time? And I'm like, just check my calendar. Like it's not a conversation I need to have over and over again, I don't want to have to think about it. I don't want to have to like, like it's unnecessary overhead, when you've got so much else floating around in your brain. - -14 -00:13:35,399 --> 00:15:54,050 -Scott Tolinski: Yeah. And it's it causes decision fatigue, it's asking, it's pulling you out of context to make a decision on something that you hadn't thought about. And that was such a huge, that was a huge problem for us, too. Because either Courtney would be in the middle of some work. And I would interrupt her to ask her a question, or I'd be in the middle of some work. And she'd interrupt me to ask me a question that was like, couldn't be answered by looking at the calendar. But we weren't using the calendar effectively. So now that everything that we're both doing is going to be in in the calendar, like, it's been like crystal clear Pepsi, for us just like really having a good time with it. So I think it's been a huge upgrade. For me, the biggest difficult component to it is, as you alluded to, not giving yourself enough time to do the right tasks or specific tasks or get the task done in time. But being able to work around that and to be personally I think that's coming with a little bit of experience feeling a little bit better about Alright, this is how much I need for this. But we all know as software developers, bugs don't happen like that. I mean, you could work on a bug that you might think is, you know, a five minute bug and the next thing you know, four hours later, you've stumbled into the gates of hell, and you don't know what's going on, and you don't know what you're doing. And those things can be rough. But the way I really solved that problem is by giving myself some flex time, you know, later on in the week, and actually putting a pin in it and saying, you know what, this is this difficult problem. The deadline isn't today. Let me go ahead and just say like, I'm gonna sit on this problem until tomorrow. Mm hmm. And that's a hard thing. We all know that right? When you get into like, the actual mess of something is like the moment when you want to keep going and sometimes it's worth it and other times you just end up wasting a whole bunch of time. So I didn't know it's still something that I'm learning quite a bit about the Cal Newport books are good. His podcast, I think it's called like, deep work with Cal Newport or something is, is very good. He talks a lot about time block planning. So if you want a greater greater depth of time block planning, his book, deep work is really good. And then his podcast is deep questions, Cal Newport. Both of those resources are fantastic for learning a little bit more about this, but I found both Courtney and I stress levels have been definitely made quite a bit less intense from doing this, especially during quarantine here. - -15 -00:15:54,480 --> 00:16:08,040 -Wes Bos: Beautiful. Wow, thank you for sharing that. definitely gonna have to give that a shot. I've read deep work a lot, but I don't think that I took away the time block planning of that type of thing. So I'm gonna have to give that a shot. Yeah, definitely - -16 -00:16:08,040 --> 00:16:24,120 -Scott Tolinski: do. It's very worth it. And me personally, I've just been getting very into it, putting everything, everything, everything on the calendar. So my calendar is becoming the source of truth. And it reflects that it looks very good. Beautiful. - -17 -00:16:24,180 --> 00:16:30,450 -Wes Bos: All right. Well, thank you so much for tuning in. And we'll catch you on Wednesday. Peace, peace. - -18 -00:16:32,310 --> 00:16:42,090 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax284.srt b/transcripts/Syntax284.srt deleted file mode 100644 index 12fbba707..000000000 --- a/transcripts/Syntax284.srt +++ /dev/null @@ -1,464 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:09,000 -the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski - -3 -00:00:09,000 --> 00:00:10,560 -and Wes Bos. - -4 -00:00:10,619 --> 00:01:07,230 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats. Today we've got a banger of a show for you. We're gonna call it good CSS. And we're just going to go through we did I don't know maybe two years ago, we did a sort of like a roundup of frameworks, tools, scoping, CSS, writing, maintainable, CSS, all these different tools and things that you can use to write good CSS. And we did like two years ago. And we're just like, we should do an update on that show, because so much has changed in tooling and frameworks and things like that. So buckle up for that. Today, we are sponsored by Log Rocket, which is JavaScript session replay, and Netlify, which is a platform for automating the build and hosting of your websites, the new analytics, they can host your react application. pretty wicked. I'm using them in my upcoming course. So we'll talk about them partway through the episode. With me today is Mr. Scott Delinski. How you doing today, Scott? - -5 -00:01:07,469 --> 00:01:16,920 -Scott Tolinski: Hey, I'm doing good. Doing good. Good. Good, good. Good. We're at the combination wildfire and winter snowstorm is going on in Colorado right now. Yeah, we have snow. - -6 -00:01:18,560 --> 00:01:41,580 -So I was like yesterday, is outside mowing the lawn, it was up 100 degrees out and get a winter alert. A WINTER STORM alert notification. Honestly, I do not know if there was any snow last night, definitely moisture and flurries this morning. It's just kind of rain. But we're like we went from 100 to you, this isn't gonna mean anything to you with your fancy units. But - -7 -00:01:41,730 --> 00:01:45,840 -Wes Bos: 100 Fahrenheit is 38 Celsius, which is hot. - -8 -00:01:45,930 --> 00:02:09,469 -Scott Tolinski: So we went from that to 32 degrees Fahrenheit, which is zero Celsius. Yes, that's freezing in just about, I don't know, 12 hours or so. So it was pretty nuts. Although this morning, definitely not as wild winter weather as they expect it to be. But let's get out of the weather talk for a little bit and get into some CSS talk, which is a quite a bit more fun and a little bit more interesting. So - -9 -00:02:09,630 --> 00:03:15,060 -Wes Bos: yeah, let's talk about frameworks first. And then we'll get into some of these new tools. Because I think some of these tools are helpful with frameworks. So let's just talk about the different types of frameworks. And then as we go into each category, we'll mention some of the popular ones that are in the area. Probably since we recorded this, the most popular sort of area that's that's come up is utility frameworks. and myself included, I think that people initially saw these utility frameworks. And the way that they work is that you add classes to your HTML. And those clauses are for everything for like, m be 40. And that's that's a class for margin bottom 40 pX, and you just go ahead and start adding them and people say like, Oh, it's ugly. It's awful. It's what about separations of concerns, but they're becoming super popular and the the types of people that are working on them? tail winds is probably the biggest ones. There's take ons, Boma, I don't think that it's just a trend. I definitely see people try it out and go, Oh, this is actually awesome. So utility frameworks are becoming super popular lately. What do you think about that, Scott? - -10 -00:03:15,539 --> 00:04:21,510 -Scott Tolinski: Yeah, used to be like a thing to write your own, like tons of utility classes in basically end up building your own utility framework. And now what we're seeing is just the explosion of these different types of ones. And I personally, I don't love it for a few reasons. I think they're they're really good for writing really organized, actual design, not not actual CSS, because you're not really writing CSS in that regard. You're writing these classes, but like, the design that it produces is very organized in the sense that it follows a specific system. Yeah. And that system can be very powerful, which is one of the reasons why people find them to be so handy is that you start adding these classes, and it just looks good without a ton of effort, right? I don't love it. Because it's almost like learning a language on top of CSS, right? You have to memorize all of those little utility classes. What exactly there are sure there's a system but you still have to register that in your brain space? Where if you were just learning CSS and maybe doing your own, yes, you're doing your own? I don't know, I'm what I'm turning into one of those people that you know, those like JavaScript people that are just like, I'm not we're gonna use a framework. I'll just write write my own job. - -11 -00:04:21,540 --> 00:04:24,080 -Wes Bos: Yeah, you have to know what's going on under the hood. - -12 -00:04:24,140 --> 00:04:41,370 -Scott Tolinski: Right, exactly. The more I listen to my arguments on this, the more I'm rolling my eyes at myself. So I think these things are awesome. I think they're, they're fantastic for writing really great CSS, or really great styles in a way, but at the same regard. I don't know if I'll find myself using them anytime soon, because I just don't love the approach approach. - -13 -00:04:41,999 --> 00:06:02,220 -Wes Bos: Yeah, I think I need to redesign my the back end of my course viewer and I actually built that on Foundation, maybe four or five years ago. And the course viewers, I think, a perfect use case for something like this because you've got cards, you've got aligned text, you've got your colors. scheme that you're working with. And being able to just quickly bam, bam, bam, put these classes on your HTML and have it sort of snap together. I think that's a perfect use case for that. But if I think about like maybe one of my like, course websites where I've got tons of gradients and animations and things overlapping each other and whatnot, I don't think maybe I'm wrong about this, I don't think that would be a good use case for that. But when I redo my, like the admin, like, if I was billing admin dashboard, I would probably reach for something like this, because it seems like it's very efficient. And also, it seems like if you're not good at design, this gives you a really good base for for cranking out something that looks really good. And then also like, I haven't, I don't have that same like, Oh, this is another tailwind or balma CSS site, where I did with with bootstrap, bootstrap, like, this is another bootstrap site site. So they're obviously doing something right there where not everything looks like the same site over and over again. - -14 -00:06:02,880 --> 00:06:51,240 -Scott Tolinski: Yeah. And I think you nailed it there. It does, it makes writing like code or design that looks nice, really insanely easy. And again, it is a little bit more personalized, are a little bit more unique. There's that telltale sign of the was the bootstrap a button with the hero section. That right there was like you could spot up from a mile away. And so that brings us kind of into the next framework type, which would be the foundation or bootstrap type, which is a little bit more heavy handed in terms of what what the classes are doing. It's not like these micro utility classes, but more or less like classes that are bringing on a lot more intent, like a hero or something like that. Now, these are still very popular, but I haven't used. I haven't used either of them in a long, long time. But I'm curious about like Foundation, specifically, where it's at nowadays. - -15 -00:06:51,720 --> 00:09:22,669 -Wes Bos: Yeah, so it looks like foundation six is out and still looks like it's it's being actively developed. I just haven't heard of a ton of people using it as of late, I think it's more one of those things where, like, if you make the decision to build on Foundation, you are probably in that for seven years or so until you decide to do an entire entire site redesign, right, and certainly was a very good choice. And it still is. So it's not like, if you chose that a couple of years ago, you need to rip it out. Because I think regardless of which framework or approach that you choose, it's important that you do choose some way to approach writing your CSS and your HTML. Otherwise, it's just going to be a mash of whatever is hot at the time. And certainly I've had websites like that as well, where I go from using dashes to camel case. So yeah, some of it is scoped CSS and react and, and it's just like, oh, wow, I just sort of followed the trends for all these things. And it's much more important to pick one thing and go with it. bootstrap is also still pretty popular, but probably not as popular as I as it used to be. What's the latest version of bootstrap 4.5, they have full NPM in support, which is kind of cool. And we should say, for people who haven't used either of these, they generally come with a bunch of different components for things like, you get cards, you get a slider, you get grids, and that's probably the reason for the falling out of the the popularity of these things, is because we got Flexbox and grid, because yeah, I would say like 90% of the people that were using it, myself included, were using it for a really good base styles and be the layout because layout before we had grid, and Flexbox was super tough, and nesting layouts inside of each other and trying to work with all the margins, padding, and things wouldn't line up perfectly. And you had to use negative margin to boot things over. Like I don't think that you need a layout framework anymore. Now that we have CSS Grid and Flexbox like when when Flexbox first came out, there was this like this massive race for building a Flexbox framework. Yeah, yeah. And like they never really like caught on because most people go like, Oh, I don't actually need that. I just need it like a couple properties and you're up and running. - -16 -00:09:22,890 --> 00:09:36,510 -Scott Tolinski: So what was your go to like if you if you were tasked with like a grid based design, and somebody was saying all right. Oh, hi, my Glen. My daughter saying hi to Wes. - -17 -00:09:38,190 --> 00:09:52,110 -Wes Bos: My go to was foundation for sure. I did use bootstrap quite a bit. I actually I think I initially got into bootstrap because it had the slider and the buttons and everything that you wanted, but I had a couple - -18 -00:09:52,110 --> 00:12:24,120 -Scott Tolinski: major projects at the time of their popularity and all of them went foundation and that that wasn't just My choice that was more of a team choice. So that's kind of where my expertise lies. So for me, I think once like sass, grid frameworks really took off. I remembered like, Foundation was the first one of them to really do not in Foundation, as in itself, but like foundation when sass before bootstrap when sass, but I was always using Yeah, maybe that was it. So it was really interesting for me, the first grid framework I really, really, really loved Besides, I think I use, like compass and stuff for doing layout before. But my favorite favorite layout framework for SAS at the time was called Suzy. And it was so good I, you always used to say like, I forget the syntax, exactly. But it was just like, calls. And then like a function, and you pass it in like two divided by 12, or whatever. And it just like took care of everything. It was just like such a zero nonsense anything, you didn't have to write extraneous classes to do anything, you just got to drop in a little function or whatever from SAS directly into your code. And it just worked work work. And it was so good. So the next one of these types of frameworks here would be this is like a, it's so funny that people are referring to this as like a new thing. But it's like classlist CSS frameworks. And classless CSS frameworks is basically just like different restarts, or resets, where you can make a nice looking CSS theme by out of the box without adding any classes. So no, like fancy components, essentially. But really just like a different reset, if they're they're meant to be not used as is but meant to be used as a starting point. For a nice design Overall, we actually taught when we taught our we taught our design systems course we talked a lot about classless CSS and how you should write as essentially as much of your CSS in base CSS as possible. That way, everything just looks nice, right? You're ready to table, it just looks nice. You don't have to do any weird classes on it, whatever, no 800 classes to do one thing or something. But like, you just do your classes as is or do your CSS as is styling all of the elements, then you have a nice little base. And then you can build on top of that with your classes, or your components or whatever your system is. And I found that to be really, really nice, because then you can just type things without having to worry about if it's going to look nice, it just does look nice. As long as you're using any of these HTML elements in context. Yeah, - -19 -00:12:24,120 --> 00:13:20,429 -Wes Bos: I would do that on I used to have this like theme that it would start every single WordPress project. And I called it my, like, 10 hour Head Start. And part of that was that I had the base CSS or hit the ground running dot CSS. And it did it selected all of my articles, it selected all my common classes like wrapper, and I guess that was sort of utility based as well, it would center it, it would put the base font size. And that was really cool. Because then you would just like start with like a really good base. And also, like, what would happen before I did that is you would style like your demo content. But then like a client would throw like a blockquote in there or a table and you're like, Oh, totally didn't think that you would use a blockquote. And then it looks like right. So at the time there was this like, HTML, kitchen sink, where they would give you like one of everything. And you would just dump that into it. And that honestly, that's like some good practice still today. - -20 -00:13:20,490 --> 00:13:22,649 -Scott Tolinski: We talk about that in our design systems course. Yeah. - -21 -00:13:22,649 --> 00:13:24,899 -Wes Bos: Just make sure you've got a good base covered. - -22 -00:13:24,899 --> 00:13:35,820 -Scott Tolinski: Yeah, kitchen sinks a big I think that's a really killer technique still, that people don't utilize enough is like, what can I do before I get into adding any specific classwork there. - -23 -00:13:36,480 --> 00:14:11,820 -Wes Bos: Alright, so pre processors, they are something where you write your CSS and you go through a compile step. And generally a preprocessor will give you the ability to use things like functions or mix ins or variables or generate CSS doing for loops, things like that. And that can be very helpful to generate CSS rather than having to do it by hand. Often, I see people on Twitter anytime I'm talking about like a new CSS feature. People are like, Yeah, but I still like sass. I'm like, well, that's they're not like, like, what - -24 -00:14:11,820 --> 00:14:12,330 -Unknown: was I talked - -25 -00:14:12,360 --> 00:14:56,640 -Wes Bos: about the other day, CSS clamp. I said, Oh, yeah, clamp, you can, you can set your min and your max. And you can set your ideal size in between, and it will scale up or down. And a couple people were like, Yeah, but I still like sass better. And I said, like, well, that's not that's not what the replacement is sass was just meant for things that need to be computed before the build time. And then a lot of this news, CSS stuff that we're talking about that like variables and whatnot, that actually happens in the browser. So you can still use both of those together if you like. So what are the popular ones? sass, or SCSS are probably the two most popular ones out there. They allow you to do probably like, like, what would you say are the most popular features of sass like variables? nesting, nesting? - -26 -00:14:56,669 --> 00:14:57,419 -Unknown: Yeah. - -27 -00:14:57,419 --> 00:15:48,899 -Wes Bos: Those are the two that a lot of people Use it for quite honestly, I had a couple of projects that used, used it a little too much. And I always got exhausted when I had to change something because I didn't realize where I had to change it. And it's really frustrating to do that. So there sass stylist is another really good one. It does pretty much all the exact same things, except it was indentation based. The curly brackets and semicolons and colons were optional. Variables could be overwritten, which is one thing I really liked. So like, if you have the word yellow, you can just set the word yellow to the be your specific yellow. I still write styles on my own website just because like, that's what my site is built in. And I'm not going to rewrite it for no apparent reason, because I'm very good at writing styles. And I can jump in no problem. So - -28 -00:15:49,320 --> 00:15:50,010 -Unknown: yeah, well, it's - -29 -00:15:50,010 --> 00:16:19,590 -Scott Tolinski: funny that you mentioned that thing in SAS, where people will use that as a fire off to say like, well, I still like using sass, I get that all the time. I just had somebody in my Instagram, Instagram about places, I'd like posted something about CSS variables, and they're like, I still like sass variables. It's like, yo, that's a different feature. And it's like a different type of feature. Sure, there are variables, but like, they're not the same thing. You can't just say I like this instead, because it's not the same thing. Right? - -30 -00:16:19,860 --> 00:16:38,279 -Wes Bos: Yeah. And because, like we should clarify, like CSS variables are dynamic, meaning they can be accessed and updated in the browser. So if you change a variable, like via JavaScript, then everything else on the page will update whereas variables disappear in SAS world, right? - -31 -00:16:38,820 --> 00:18:00,270 -Scott Tolinski: Yes, yeah, totally. In as far as using like, sass, or whatever it goes, I actually personally use sass for our global CSS instead of CSS, just because it's very easy to add to a project in 2020. You know, and 2020. For me, especially even in Meteor, because I just do Meteor add CSS package or whatever. And it just works. But like I know it, the same thing will go probably in like parcel or any of these other do compilers, it's trivial to add sass. So you get the the nesting and whatever. And within that just for essentially, free free of cost for to you. So I personally always reach for something like sass or stylus when I'm starting you right, there is less which gained popularity because it could be added at client side client time rather than compile time. And so like adding a build step, for a lot of developers was a huge challenge at first, right, there was this big movement to adding a build step, and I'll send people didn't understand what that even meant with their web code. And sure enough, les was just like, I'll just drop the script on your page. And let's just work. So that attracted a lot of people first and foremost. But as things went on, less kind of saw much less features than sass and did not exactly really continue to evolve in the same way we want like stylist I always felt like had the most amount of features, but the smallest maybe community size, maybe it was because it was so radical without needing the brackets and all that stuff. - -32 -00:18:00,540 --> 00:18:38,970 -Wes Bos: Yeah, I always wondered that myself as well. I was like, This is awesome. But But I think also, one of the reasons SAS was so popular is because it sort of came up at the same time as Ruby on Rails. And the compile step was initially done in Ruby, meaning that your entire application could be done in, in Ruby, and most people had had no JavaScript build step at all. That was before Gulp and all that came along. And then when Gulp came along, and no jazz started becoming more popular, then a lot of the tooling moved over to being done in JavaScript. And then a lot of the websites also started to be to be built in JavaScript. - -33 -00:18:39,320 --> 00:18:41,360 -Scott Tolinski: Yeah, even grunt, do you remember grunt? - -34 -00:18:41,820 --> 00:19:40,650 -Wes Bos: Oh, yeah. grunt was way before. We're a before called. Yeah. I just have here, just regular CSS. So certainly, one of the options that people are choosing now is not to use any sort of preprocessor. And just going with with regular CSS, and I don't think it's at a point now where you could you can just write regular CSS if you want, but I don't think like the one thing we're we're really missing right now is nesting, as well as scoping, I guess. So what a lot of people do is they will just write, I'm using air quotes here, regular CSS, and then they'll use the next thing we're going to talk about, which is post CSS. And then you sort of pick and choose your features that you want to add to it. So instead of just saying like sass, it just works. It has all the features. You grab post CSS, and then you start adding in. I want the plugin for nesting. I want the plugin for color functions. I want the plugin for variable fallbacks, things like that. - -35 -00:19:41,300 --> 00:20:48,720 -Scott Tolinski: Yeah. And I've always loved post CSS. And in fact, that's one of my biggest downsides of styled components, which is a react component based CSS and j s framework that I use on level up tutorials. My biggest bummer about styled components is that you can't use post CSS with it very easily or at all because They have their own own thing, which I forget what it's called off the top of my head. But it doesn't really much matter because, well, post CSS has such a large community with all of these plugins, that man, I would really love to take advantage of some of these. And what I think is cropped up is this really interesting, different class of CSS and JS frameworks where you have, essentially, the exact same foot not necessarily like KB footprint, the exact same code footprint, essentially, as styled components, you import, you know, styled from this other framework rather than styled components. The only difference is that they do support things like autoprefixer. And well, not just autoprefixer post CSS. Have you seen any of these other ones? I had a little roundup here in the hasty episodes. Have you seen some of these other ones? Wes? - -36 -00:20:49,020 --> 00:20:50,220 -Wes Bos: I don't think I have no, - -37 -00:20:50,250 --> 00:21:25,500 -Scott Tolinski: there's one called linaria. Although just going to their website, which worked a couple days ago now says this deployment is no longer available, because it was on now version 1.0. Man that now thing killem call that sucks. Yeah, let's see linaria CSS and j. s, it is very small. And it allows you to use things like post CSS, there's another one called astroturf, there's a whole bunch coming out that are just sort of basically stealth components, smaller bundle size, and allows you to use post CSS, and I'm pretty interested in this little community of new CSS ones. I think - -38 -00:21:25,500 --> 00:22:31,080 -Wes Bos: we said this on the show before, but like, I think we'll start seeing people saying, Oh, I don't actually need a full blown framework for this, I just essentially need, like template strings, so I can use my JavaScript inside of it. Yes, and, and, and a few other little things like that. So I think that's, that's one of the benefits of post CSS is that because the whole community is built up into tiny little plugins very much like Babel is, right now. You can have people just grab little pieces and build their own thing, rather than it being a sometimes to me, that's often very frustrating, because I'm like, I don't want to build this thing myself. And we'll talk about solution to that in a second. But you see a lot of people just going out and making they're making new packages and testing out ideas and pushing the boundaries, which I really love. I love a good boundary push a big fan. And if you are pushing boundaries, you are likely to break your code. So if you would like to push your boundaries, but not intentionally, your error boundaries, let's say you just want to push the data. - -39 -00:22:32,400 --> 00:22:54,270 -Scott Tolinski: Yeah, there we go. Then you're gonna want to need a tool like Log Rocket just to be there in case you do accidentally push your error boundaries. What Log Rocket does is it allows you to see your errors and exceptions happening in a video scrubbable instant replay, could think of it as like a video to watch a crime happen, and be able to solve that crime a lot easier if you could see exactly how the crime was perpetrated - -40 -00:22:54,390 --> 00:22:55,860 -Wes Bos: in the worst TV show ever. - -41 -00:22:57,150 --> 00:23:21,120 -Scott Tolinski: So if you want to try all of this out and more head on over to Log rocket.com forward slash syntax where you're going to get 14 days for free. And you're going to be able to see an instant video replay of all of your errors and exceptions happening along with the Network tab, the error console, and all sorts of anything that would you would ever possibly need to use to solve a front end bug. So check it out at Log rocket.com forward slash syntax. Cool. So let's get into it. - -42 -00:23:21,690 --> 00:24:59,220 -Wes Bos: Yeah, so post CSS, kind of let that last section bleed into it. That's kind of like Babel for CSS. And it has a whole bunch of plugins, probably the most popular plugin that people will know is autoprefixer. So the idea is that post CSS will take in your CSS, and then it will break it down into all of its little bits. And then the plugins will allow you to transform the CSS from what you've wrote into what you have. And the simplest version is autoprefixer. So if you write something like what is actually there's very few things actually have a prefix anymore. What's something that does have a prefix Flexbox. If you want Flexbox, to work in IE 11, you have to use like the iE 11 version of Flexbox, which is not totally the finished version. But like it's good enough. And in most cases, if you if you shipped the dash ns dash fluxbox prefixes on it, it will, it'll look pretty good. So just use feed your code through autoprefixer. And then I'll kick it back to you. And most of those vendor prefixes are a thing of the past. But like another another good use case is if you're using CSS Grid, and you are using like a grid gap, or if you're sorry, the other way around if you're using gap, which is the new property in both Flexbox and grid in order to specify gap. Some of the older browsers and even some of the current don't know about gap yet it's grid dash gap. So what will happen is that it will convert your gap into grid gap. And then and then it will work in all the older of the browser. So it just takes what you wrote converts it into what it should be. - -43 -00:25:00,000 --> 00:25:11,190 -Scott Tolinski: Yep, yeah, that's a that's a perfect use case right there. You can use tomorrow, CSS today or in some cases today, CSS today, because yesterday's browser did not support today's CSS. - -44 -00:25:12,330 --> 00:25:37,830 -Wes Bos: There's also like place content in CSS Grid, which is shorthand for align content and justify content. So if you want to shorthand on both axes, you can with place content. And again, that was added after most of the browser's implemented initial Flexbox. So not all of them support it, right. So you can just you can still write future CSS, and then it will, it'll bring it back to what it was. How do - -45 -00:25:37,830 --> 00:26:24,360 -Scott Tolinski: you feel about like, non real future syntax, and like accurate, like, some interesting syntax, for instance, let's say a little shorthand I like to have, I used to write in stylist with their, like transparent mix ins that you can't really do a whole lot of ways without writing a post CSS plugin would be something like, instead of like the property would be fixed, and then the values would be their position. So you could say fixed, you know, 00 for top left, or put fixed, left, and then it would automatically add position fixed top zero, left, zero. That's something that I really like. But I don't know how it fits in here. Because it is so personalized, it almost feels like the kind of thing that your team would hate. Because nobody would be on the same page with it. Except for you. And it's not like a standard. I don't know how you feel about those things. - -46 -00:26:24,390 --> 00:27:15,180 -Wes Bos: It's funny because like, if that was a mixin, nobody would complain, right? If you did fixed parentheses and pass your values, everybody be like, Oh, yeah. Oh, cool. That's great. If you were to write your own thing, but like, we are going to be able to write our own with Houdini Houdini. Yeah. So I don't know how I feel about that. I've not come across some CSS where I had to dig into it. So I don't know how angry I would have been. But like, again, then again, like if you're on a team, and you build this like framework, you say, like, Look, we do this a lot, or this makes it really easy to make consistent branded pop ups, or consistently branded cards. And it's this like, weird, whole bunch of CSS that we need to add to every single one, then yeah, maybe maybe stick it in a mixin. or stick it in its own custom CSS property in and see how you feel about that. - -47 -00:27:15,570 --> 00:28:06,840 -Scott Tolinski: Yeah, totally. I love stuff like that. But in the same regard, now that I'm working more with other people, I'm getting more and more concerned that my love of things like that is going to have to come to an end. Because Yeah, it's so easy when you're doing yourself to do all those things. And of course, I was the type of developer who like wacky class names back when I was first starting, you know, it's all these like dumb things that you, you learn at some point, or like a really bad idea. But like, sometimes, sometimes whatever can keep you interested is really what's up. I don't use any post CSS plugins anymore. But I really did love a lot of this stuff. When I was in post CSS lint, I really did like having the ability to use the Babel type of thing where you get to write tomorrow's syntax and just not have to worry about it. I mean, that was such a revelation for any of us who whoever wrote prefixes by hand before because it was just such a giant pain in the butt. And so now it's a fantastic non pain in the butt that we never think about. - -48 -00:28:07,200 --> 00:28:15,780 -Wes Bos: Another popular one is post CSS clamp. So we've talked on the podcast about clamp before, although I think we need to do like a dedicated show to clamp because - -49 -00:28:15,810 --> 00:28:17,460 -Unknown: Glenn Yeah, everybody, every - -50 -00:28:17,460 --> 00:29:04,380 -Wes Bos: time I tweet it, everyone's like, wait, what. And one thing about clamp is that it doesn't work on all the browsers. But min max functions are very well supported on all the browsers. So if instead of using clamp, your men your flex value and your max value, you can just use this weird combo with Max and you pass it your min, and then you pass a min, it's I super confusing to me to read it. That's why they came up with a clamp function. But that is well supported min and max function. So you can essentially make clamp work with min and max functions. So instead of having to figure out what the syntax is, in the min max equivalent, just write a clamp function. And the post CSS clamp will convert it to the equivalent and min max - -51 -00:29:04,860 --> 00:29:11,940 -Scott Tolinski: clamp is one of those things that I have not used in any real capacity, but would absolutely love to given the right situation. - -52 -00:29:12,000 --> 00:29:59,070 -Wes Bos: Yeah, I used it on my latest Gatsby course. And then like one of the very final videos was we're just like making it responsive. And we ran into a weird Firefox bug. It was working on safari, which it wasn't like the start of the course. But it wasn't working in Firefox. It's supportive. But there was like a weird like thing where you resized it, and it didn't trigger reflow. So we had to end up taking it out. But I think it's gonna be a bit before we can use it in like, our actual client websites and not real real developer only websites. Yeah, that's something people ask me all the time there. Anytime I tweet something that's neat. They're like, Oh, but like, what do you do about older browsers? I'm like, well, hundred percent of my audience is people on the latest browser so I can use it. And you get to use it in like two years. - -53 -00:29:59,460 --> 00:30:00,630 -Scott Tolinski: Yeah, right. Exactly, - -54 -00:30:00,990 --> 00:30:27,420 -Wes Bos: we'll put a list of all the different plugins for post CSS in there. Because it's kind of fun just to look at them. There's post CSS simple variables. So you can just use the dollar sign variable like you're used to in sass, and it will swap them out with regular CSS variables, which is pretty nifty. I'm kind of used to CSS variables now. But I would like to go back at some point to just using the dollar sign variables and CSS. What about you? - -55 -00:30:27,900 --> 00:30:42,780 -Scott Tolinski: For me? As long as they get output to a CSS variable that functions the same way? Then I'm in if they don't? I don't know. I don't see it in their documentation. I don't see this outputting to var anywhere, - -56 -00:30:42,810 --> 00:30:46,560 -Wes Bos: do you? Oh, is it just it just outputs to text? - -57 -00:30:46,650 --> 00:30:52,380 -Scott Tolinski: I think it just outputs the text, which would be a huge bummer. Because I've gotten so used to the dynamic ability. - -58 -00:30:52,860 --> 00:31:15,930 -Wes Bos: There's another plugin called post CSS custom properties. But that just that just takes regular post CSS, or sorry, that takes regular CSS custom properties, and converts them to whatever their color was, or it'll fall back to so you could say like color var dash red, and then it will both give you the dynamic variable, but also provide you a fallback to read. - -59 -00:31:16,200 --> 00:32:00,030 -Scott Tolinski: That's nice. I think I would, I would like that. I was thinking that there could be some situations you have to be careful about. But to be honest, I think as long as it provides that fallback, because the way CSS variables work, if you don't know, if you have a CSS variable defined, and then you have essentially the fall back behind it, whatever bar the same exact thing, just duplicating the property, the way the browser reads that if it hits that CSS variable, it doesn't understand the CSS variable. So it just moves up. And the next one is going to be the next definition anyways. So you can do any kind of CSS variable sort of on ramping that way. And it's usually a giant pain in the butt because that means you'd have to type anytime you did a color property, you'd have to type out the CSS line twice. Oh, Brooklyn, how much trouble - -60 -00:32:02,280 --> 00:32:02,940 -Unknown: huh? - -61 -00:32:03,240 --> 00:32:21,240 -Wes Bos: next one we have here is called sugar SS sugar SS is a plugin that allows you to write CSS as if it were indentation based. So if you just for whatever reason, if you can't leave your stylist Levin ways behind. You can use sugar as S. - -62 -00:32:21,630 --> 00:32:22,470 -Scott Tolinski: Oh, that's fun. - -63 -00:32:22,470 --> 00:32:33,930 -Wes Bos: Yeah, it's kind of cool, because you can still use all the other post CSS stuff with it. But then you can still use your indentation based CSS so I wonder if it's like parody with with stylists. Like I wonder - -64 -00:32:33,930 --> 00:32:40,380 -Scott Tolinski: if I could feed my recreate stylist with post CSS? That sounds like a fun, fun project. - -65 -00:32:40,410 --> 00:32:42,480 -Wes Bos: That sounds like edge case nightmare. - -66 -00:32:43,380 --> 00:32:44,790 -Scott Tolinski: edge cases case nightmare. - -67 -00:32:45,270 --> 00:32:47,400 -Wes Bos: That's a good name for a bad actually. Yeah, - -68 -00:32:47,400 --> 00:32:48,480 -Scott Tolinski: that is a great name for a - -69 -00:32:51,780 --> 00:33:44,100 -Wes Bos: last one, we have years post CSS preset envy. So you might know if you're using Babel, you don't need to go figure out what plugins you need. And Babel, you just use one plugin. It's called preset envy. And you tell it, what environments you're supporting. So if you're supporting node, or if you're supporting IE six, or you're only supporting the latest two browsers, there is the same thing for CSS. It's called post CSS preset envy. So at a certain point, you'll tell it, I'm supporting these browsers, and it will say, okay, those all support custom variables, so we don't need to transform them or follow them back. Because we're you, we know that your all of your browsers are supported and will no longer use that. So it will look up via Can I use, what things are supported? And then it will load the plugins that it needs dynamically, which is great. Cool. Yeah, - -70 -00:33:44,360 --> 00:34:16,460 -Scott Tolinski: I have it man. I've been so out of this this world, because I've just been in the styled components land. Now I really want to move to one of these frameworks. I don't know which of them will actually have a community that lasts or grows because they're so yeah, so many little ones. But I'm if it was, like, if it was as simple as replacing the import styled from blank and having, you know, server side rendered CSS and everything, but you also get autoprefixer. will maybe I should look into if that is actually a thing or if that's just me, swapping out the deck chairs again to waste a little bit of time. Yeah. - -71 -00:34:18,090 --> 00:34:18,780 -Wes Bos: That's good. - -72 -00:34:19,080 --> 00:36:18,510 -Scott Tolinski: Yeah. So another tool along these maybe not necessarily these lines, but that you may have heard of, or maybe not have heard of, in some capacity is called style lint. There's actually two different style lint. One is it for stylists in one is St YL e lint.io. And the other one is like, you know, staat stty lint, you know, so this is style Lind s style lint. And what it is is basically a linter for CSS but it's capable of doing a lot of really interesting things. And I haven't used this before, but I was just talking with a friend who works on a large team and they were saying that they do some really interesting things with stylelint. For instance, if you will Adding CSS to a specific group of files and you are not using a CSS variable to do a color definition as in you, you've defined a hex value or an RGBA value somewhere, it will actually not allow your code to be merged. Because it says, Hey, you didn't follow our coding guidelines within CSS. And they were telling me about a whole bunch of really interesting little rules they had set up. And they were a fairly complex rules to be able to say, Alright, you can do this, but you can't do this within your CSS, you could add this to your continuous integration pipeline, you could probably add this to your editor fairly well. I'm gonna start checking it out in a bit more of a way, because it seems like it's really interesting. There's a handful of plugins and everything, it seems to work really well. There's formatters, plugins, processors, system tests. So hey, stylelint sounds very fantastic. A lot of like, really interesting people working on it. And there is a big community. And it seems like yeah, look at his downloads per month, 7.9 million downloads per month. That's a lot. So a lot of people are using this thing. And I'm not not using it right now. And I've never used it, but I've heard of it before. So I'm gonna have my eye on it, just to check it out to see what kind of like cool stuff you can do out of the box without having to get into the weeds of writing your own. Just because, you know, I don't have the time to do that. But I want to, I want to check it out regardless, because it seems really fantastic. - -73 -00:36:18,660 --> 00:36:33,110 -Wes Bos: Yeah, I like that. It's little things like that, like I first I never liked using es lint, because it was I felt it was too picky. But over using it over the years, it's made me become a much better JavaScript developer. So I bet that they will do the same thing for my CSS, - -74 -00:36:33,300 --> 00:36:35,690 -Scott Tolinski: and it can work with styled components. So - -75 -00:36:36,150 --> 00:37:50,190 -Wes Bos: I'm in next one we have here is just like removing unwanted CSS and the one that seems to be super popular, and the one to go with is called purge CSS. I've previously recommended purify CSS. But one of the things about using a a framework whether it's bootstrap or foundation or something, a utility framework like tailwind is that generally, Tillman's would ship all every single possible CSS thing, every single CSS selector and properties along with it. And you might only be using like five or 10% of the things that are in that library. So what you do is you feed, you use something like purge CSS, you feed it your, your HTML, and then it looks at your CSS, it looks at your HTML, and it will remove all of the unused selectors from that. So that might be a little bit to get up and running. If you have lots of dynamic pages. I've not used it myself. But I know that it's pretty popular in those worlds, because you certainly can't ship. I don't know how big these libraries are. But you can't ship 300 k of CSS down the pipe for what you need. - -76 -00:37:50,460 --> 00:38:03,510 -Scott Tolinski: I wonder how that works with like a scoped CSS and J's land with like code splitting. Like, for instance, we have CSS code that is shipped with specific code split bundles. So like how can it determine if that code is used or not? - -77 -00:38:03,780 --> 00:38:33,600 -Wes Bos: Yeah, that's a good question. I don't I don't know the answer to that. I would imagine that would be kind of tough. But you could probably also, actually, I probably I bet. The way that it works is that you don't give it your like output at HTML, you give it your your templates, and it can figure out what the classes are in your templates. And then probably anywhere where you're dynamically generating a template that will probably get a little bit hairy like sorry, anywhere, you're dynamically generating a class name. I bet that is where it gets hairy. - -78 -00:38:33,600 --> 00:38:34,190 -Unknown: Mm hmm. - -79 -00:38:34,530 --> 00:38:47,670 -Wes Bos: But in most cases, you're just slapping regular class names on it. So if it sees mb 40, it knows Oh, I should keep the margin bottom 40 selector and get rid of the other 100? Because they're not using it. - -80 -00:38:48,210 --> 00:39:38,100 -Scott Tolinski: Yeah, that seems to me, like it would not work with my setup. But it's another one of these things I would love to use. And you know, getting that getting those feelings of who is this the right thing that I'm on? You know, really bad feelings dab. So you're typically wanting to not only just add these things to your, your process, but also your build process and a tool that makes deploying via your build process, really simple. As well as hosting your code anywhere really simple. This is not not my that's not my best work. But I'm talking about Netlify Netlify is the modern hosting platform that allows you to very easily quickly get up and running with your code on the web in no time at all. And on top of that makes working on all of your projects. Fan tastic. So a little bit more about what Netlify is doing. Here's Wes. - -81 -00:39:38,480 --> 00:40:55,730 -Wes Bos: Yes. So Netlify is the jam stack hosting platform. And I guess like over time, even since they've started sponsoring this podcast, what they offer has continued to grow. So obviously you can host your your jam stack based website on them. So if you've got a Gatsby or a neck site or react or something like that, you can host that up. On Netlify, they have this really cool edge network where they make it super fast on everything that you have there, but they also do the builds of your website. So in my upcoming Gatsby course, they didn't sponsor my Gatsby course, this is just, I just, it was the best use case for hosting the thing. We just hook it up to our GitHub Git repo. And it finds the Gatsby website, it can go ahead and build the sucker for you. It does all of our serverless functions. So a bunch of the parts of the the course that I'm working on there is like, we need to send email and things like that. And if you need that, you need to dip into serverless functions because there is no real back end. And they make that really easy both locally and on the server. So check it out for your next jamstack base website. netlify.com It's net LIFFE I somebody was saying that's Scott says nullify, but I've never heard you say that. - -82 -00:40:56,009 --> 00:41:05,070 -Scott Tolinski: Never once Netlify Netlify maybe you're listening to me at turbo speed and under the No no, no, no, no, no, no, then Yeah, no - -83 -00:41:05,070 --> 00:41:07,460 -Wes Bos: problem yet. Turbo Delinski slow. - -84 -00:41:07,460 --> 00:41:11,670 -Scott Tolinski: slow me down a little bit slow me down. Here is a net LIFFE? I - -85 -00:41:11,690 --> 00:41:16,230 -Wes Bos: yeah, there's no race. Cool. Thanks so much to Netlify for sponsoring. - -86 -00:41:16,730 --> 00:42:59,010 -Scott Tolinski: So last part of here is talking all about writing, maintainable and scoping CSS. So a lot of the history of writing good CSS has been about how do you how do you write things in a way that's going to allow you to scope them when you want to be scoped and not scoped when you don't want them to be scoped is really just the the crux of every major CSS argument besides various syntax things. But in terms of like writing and organizing your CSS, there are several different ways that people have really solved this solution to writing maintainable CSS. And more recently, there's been a component based CSS solutions that are all sort of geared towards people using front end frameworks. And specifically, we use something called styled components, which is basically just a, you create a styled component, which is essentially just a container for classes, and it automatically generates a class name for you that way, there's going to be no collisions, you get scoping where you need it. And then you can use normal classes in debase CSS where you don't. So you get that that scoping where you need it based where you don't. And that's why I really liked this approach. But any time I'm getting into this, I feel like more and more my brain goes towards just any sort of ability to turn on scoping or turn it off is really the solution that I want, I want to be able to say when did this is when is this scoped and when it's not, in fact, spelt approaches this in a very different way where everything is scoped by default, as it's written in the component. And if you want to make it global, you just there's this little global wrapper that you put around it. So there's definitely a lot of different approaches in here. I don't know exactly what's popular in the angular world of things. But there is CSS modules Do you want to give a little bit of talk about those? - -87 -00:42:59,340 --> 00:44:42,750 -Wes Bos: Yeah, CSS modules are a little bit different. So you have just your regular dot CSS files, and I'd imagine you can use all of your post CSS stuff in it. And then at the end of the day, you have like classes like dot card, and then you can say, dot card, space, h2, and things like that. And what you do is that will then be fed through a unique a fire, and then it will give you a class like card for nine, h seven, four, and you take that unique class. And in general, if you're using a JavaScript framework, you just import it directly from your CSS file. And then you apply that class name to your div or whatever it is that you want. And that will give you a unique class on your wrapper. And then it will also target all of your child selectors that are inside of that. So that's how I found that out to be a little bit clunky, I much prefer just to use the stock component approach, or the the spelt approach where you just write the CSS in the same file. And it just works rather than having to figure out what the class names are going to be for everything. But one thing I really like about writing something like style components is that you can just say like, h2, or you can give things classes or you can just grab an image, you don't have to like think of a class for absolutely everything. Right? It just selects it. And this is sort of the no no have before, which was don't just select elements and style them becomes the Oh, this is easy. I just have to grab the h2 off of something. And there's no other h2 in this component. So it will style it upgraded. - -88 -00:44:42,930 --> 00:44:44,640 -Scott Tolinski: its scope. I love it. - -89 -00:44:47,220 --> 00:45:55,950 -Wes Bos: We also have been very popular for a long time before we got a lot of these tools. And this is still a really good approach. It's just use a naming convention to do your scoping of CSS. So Bem is a pretty popular one, it stands for block element modifier. So your block would be your card, your element would be your card header. And a modifier would be like card header, big or card header read, or something like that is like oh, yeah, I already have this element, but I want it to be a little bit different. And I want to, I want to bump up the font size or card header underlined. So I still really like them. I use it in a couple websites that have been going on for a couple years. And every time I jump back into our MCI this was this was nice and simple. Generally people pair that with CSS files, where you you write your CSS for, like each block and in its own file, and then you use some sort of post CSS or some sort of Gulp tool to build it all together. smax is another popular one. I never use Mac's if you - -90 -00:45:56,250 --> 00:46:03,210 -Scott Tolinski: I haven't? Well, I don't want to say never. Because I feel like I've dis max website has been around since I started developing pretty much. So like I feel - -91 -00:46:03,210 --> 00:46:04,710 -Wes Bos: like Jonathan snuck. - -92 -00:46:05,040 --> 00:47:25,530 -Scott Tolinski: Yeah, I feel like I have used it at some point. But I pretty much read for Ben, because Ben is the one that you see. Oh, because Ben is the one that you see more often. And I do I do like them. But I've never really liked the flow of the hyphens and underscores, I don't know what it is, to me, these some of these newer tools solve scoping in a way that's a little bit nicer for me. So I do reach for it when I'm writing straight up CSS, but I almost never, never do any more anyways, one of the things that I've been really relying on for running, maintainable CSS that's outside of like naming and properties, attaching styles, selectors, those types of things, for me has been the use of CSS variables. To do a lot of things. For instance, like, you could define a variable at the root of a particular element, let's say you would say this thing has a width of, or you maybe give this element a size, right, you're making a circle, you could say size is equal to 25. And then you could say height is equal to 25. width is equal to or height is equal to size, width is equal to size and the border radius is equal to, you know, the size divided by two or something like that, if you want to Yeah, I love that. Brooklyn is she's got a truck to train and she just slam it into the ground over here. - -93 -00:47:25,950 --> 00:47:27,690 -Wes Bos: So in our life, Leon or life - -94 -00:47:28,320 --> 00:47:36,690 -Scott Tolinski: Yellin Yeah, so I've been using CSS variables a lot for writing, like a maintainable CSS, you hear a lot about the concept of design tokens. - -95 -00:47:37,260 --> 00:47:38,910 -Wes Bos: No, what is that. - -96 -00:47:39,330 --> 00:48:47,370 -Scott Tolinski: So I don't want to miss represented here, because people have very specific ideas about what design tokens are and how they can be used. So forgive me if this is not the perfect thing to say here. But you could think of design tokens as basically tokens that you would set the properties of to style everything on a particular aspect of your site or the entire thing. So if you're writing like a framework, you could imagine, you could have a single variable to say, Alright, this is the large one, the small one, whatever, instead of having to deal with pixel sizes, or those types of things. So I rely on a lot of design token, like things within my application, so that you can write essentially tokens to style things. This is this color, this is this size, I do that specifically with my elevations, z index, box, Shadow, those types of things. Again, there is definitely like a larger component to this, like the CSS variables, does not equal design tokens. They're they're not necessarily the same thing. But you can use them to do a design token like thing. So design tokens is definitely more of a, like a strategy and a thought process. And it's not like a technology specifically - -97 -00:48:47,400 --> 00:49:07,830 -Wes Bos: Oh, it's like, I'm just looking at this thing from Amazon called style dictionary. There's an article on CSS tricks. And they're just they're just declaring things like small, medium, large font sides, gray, different gray colors, primary secondary colors, like you said, to me, that just sounds like variables. - -98 -00:49:08,400 --> 00:49:12,570 -Scott Tolinski: There is a dislike using it as people get angry when you say that they're just variables. Cool. - -99 -00:49:12,600 --> 00:49:16,110 -Wes Bos: I'll take a look a little bit more into that. Yeah, - -100 -00:49:16,110 --> 00:49:59,520 -Scott Tolinski: it's an interesting concept. And it's something that I really like, because I've always been a fan of like, smart defaults, you know, smart defaults, things that just work. And then instead of having to fish around with syntax, and whatever, to just dive in and say, Alright, this is the color or whatever. And I get utility classes in a way to bring us all the way back around to the front of the episode. I think utility classes in a way are almost like micro design tokens in this sort of way. I don't know that that's like a educated outlook on this. But if you think about it, you're just adding these little tiny tokens to style the whole thing. I don't know if either camp would be happy with me saying that so I'll leave that as just like a pontificating thing and not like a actual hardpoint. One day. - -101 -00:49:59,609 --> 00:50:04,620 -Wes Bos: We will have Have a syntax where Scott and I love utilities frameworks love it. - -102 -00:50:04,890 --> 00:50:09,660 -Scott Tolinski: It's gonna be the one that I write. That's that's the whole thing. Oh, I love this thing. I wrote it. I know what it does. - -103 -00:50:10,889 --> 00:50:22,620 -Wes Bos: Scott, you're doing talking about how you didn't like that for the longest time. It's anytime we mentioned that stuff people like, why don't you like it? It's not that I don't like it. It's that it? I don't have a super good use case. - -104 -00:50:22,620 --> 00:50:34,710 -Scott Tolinski: It's not for me now that it's not good, or I think it's fantastic. And I think it's good for a lot of people. It's just not for me, I don't know, I want to reach for other tools, whether or not I could be more productive with it or not. That's not a great argument. But - -105 -00:50:35,519 --> 00:52:27,990 -Wes Bos: Alright, we're getting into a new section of syntax called the syntax highlight. This is where we excited? Yeah, we need a bumper for it. Yes, it got sick. We sorry. This is where we highlight somebody who is in the community doing really cool stuff that you should know about. And our first ever syntax highlight is Denise getjar. I've known Denise for, I don't know, probably four years or so. And he's the type of guy who has always been very supportive of the community so supportive of my courses of Scotts courses. He is one of one of the very few good devs on Instagram developer Instagram is very bizarre, because it's a lot of people holding laptops and odd locations where you would never write code. And he has a thing called build up devs where he essentially does that builds up devs he's always shouting out other developers on both on Twitter and Instagram. So just just a good vibe to the community from from Dinesh so big fan of him. You can check him out. I would probably check him out on on his Instagram first. It's d h a NISHGAJJR. We'll link it up in the show notes. You can hit that up. He also posts lots of like really nice desk photos. He lives in Lisbon, and has like beautiful photos of the water often, so shout out to Denise. And if you guys have other devs Do you think we should do a syntax highlight on? Shout us out on Twitter at syntax FM? Because we're gonna be doing one of these every single week. All right, let's move into some sick pics. You got a sick pick for me today? Maybe rollerblade worthy? - -106 -00:52:28,079 --> 00:54:19,020 -Scott Tolinski: Yeah, I did buy those rollerblade wheels from I would say that would be gratuitous to sick pick something you did in the very last episode. Go for it. No, no, no. I've been learning rust lately. It's a programming languages systems programming language. I decided that I don't know enough programming languages like for real to have like a different. I didn't and I feel like I had like enough context in programming. And a lot of people recommend to learn new languages frequently to understand just sort of how things are done in different worlds. So I felt like hey, you know, it'd be a good opportunity for me to learn something new. So I picked up rust and I want to shout out to rust willings. Now rustlings is it's an interactive tutorial. So it's not a video, it's not whatever it it's just in code, you clone the repo, you run the command, and it says, All right, error is found on this particular file, you go to the file, you know, it starts very easy. You don't have to know any rest and they're all like attached to sections in essentially rust documentation. So if you want to go and research these things, you can go and research them. They have hints, wonderful things. But again, if you are used to, you know, video tutorials or whatever tutorials give, Wrestling's a try if you are interested in learning rust as a supplement to other learnings, because I found this thing to just be absolutely fantastic in terms of getting me engaged, you complete the tasks that that you know, pass the tests and whatever. It tells you which line like okay, solve this, but don't change this line at all, whatever. And so I've been so into it because it really gives me a good sense of drive to say what gotta get this next one. I'm one more just one more mom. I'm gonna be there soon. One second. You know, that kind of thing. So I love I love rustlings. I've been a big fan of this. So check it out. I'll have the sentence in the official rustling repo. I'll have this link in the description of this podcast. - -107 -00:54:19,259 --> 00:54:24,330 -Wes Bos: I'm in a sick pay a documentary called class action Park. Oh, yes. It's so good. - -108 -00:54:24,330 --> 00:54:26,580 -Scott Tolinski: Have you watched it? Oh, yeah, you bought - -109 -00:54:27,029 --> 00:54:31,920 -Wes Bos: it. So it's a documentary on about this Amusement Park in New Jersey. I - -110 -00:54:32,009 --> 00:54:41,460 -Scott Tolinski: believe that that park is is pretty well known at this point in the States. Oh, really? Action Park. Yeah. Because there Johnny Knoxville even made a movie about it. Oh, man, - -111 -00:54:41,460 --> 00:55:09,150 -Wes Bos: I had never heard of it. But basically, it was this amusement park with these waterslides and things like that, that were like, not built by engineers, but just by some wealthy guy who had fake liability insurance. And like people would get like super hurt on all these rides and it's just unreal. story. So it's from HBO max. So I'm not sure how you get that, but check it out class action Park. - -112 -00:55:09,540 --> 00:55:19,110 -Scott Tolinski: Yeah, very good. Very interesting. And I had already seen like little features on this park and I was like very into it. So I thought this was super cool. Somebody who's not from that area. - -113 -00:55:19,800 --> 00:55:40,680 -Wes Bos: Super cool. Shameless plugs, I will shamelessly plug my upcoming Gatsby course it's going to have serverless functions and CSS and of course Gatsby custom hooks, all of that. It's just like building a well rounded website. And it's going to be available at Master gatsby.com. Use coupon code syntax for 10 bucks off - -114 -00:55:40,950 --> 00:56:24,360 -Scott Tolinski: sick sick sick, I am going to shamelessly plug my latest course on advanced animating react with framer motion. We do a lot of gestural stuff as well as dive into the new layout prop quite a bit. The gestural stuff is really fantastic because we build the types of interfaces used to on mobile, where you have like a swipe up drawer that you can swipe down or you can scroll within or you could you know, have like a little bit of a feedback in terms of like, Oh, did I swipe down hard enough, but it's not just like a trigger event time swipe. It's like full on gesture support the type of stuff that you see all over the place on native applications. And now it's available to you superduper easily within framer motion and react. So check it out at level up tutorials.com. All right, thank - -115 -00:56:24,360 --> 00:56:28,680 -Wes Bos: you so much for tuning in. We'll catch you on Monday. Please - -116 -00:56:30,960 --> 00:56:40,710 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax285.srt b/transcripts/Syntax285.srt deleted file mode 100644 index fadd07ce4..000000000 --- a/transcripts/Syntax285.srt +++ /dev/null @@ -1,172 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,160 --> 00:00:21,660 -open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA and Scott Taylor. - -4 -00:00:23,610 --> 00:00:24,450 -Totally at ski. - -5 -00:00:25,920 --> 00:02:20,160 -Scott Tolinski: Oh, come to syntax and this Monday hasty treat, we're going to be talking about the first buck we made from web development, amongst other things just sort of little first steps into the world of both entrepreneurial ism as well as web development professionally for both Western AI. So we're going to be talking all about the first buck made from web dev. And this episode is sponsored by one of those software's that you're going to want to have in your tool belt anytime you're working with client facing code, because a tool like sentry@sentry.io allows you to see all of your errors and bugs in a trackable interface so that you can quickly and easily attach them to GitHub issues. You can check performance, you can attach them to specific resources, or let's say, Jim, sorry, for all you gems out there. Let's say Jim introduced a bug in version 10. And well, always Jim. It's always Jim, he just made he just goofed it up, he did some really dumb stuff. And sure enough, there's a bug. And so what we now have is, we now have the ability to say, hey, this bug was introduced by Jim in release 10.4. And we can make a little GitHub issue for it. And just to rub Jim's face, his nose and a little bit, we can make Jim fix it himself. So this is all possible with Sentry at Sentry dot i o is one of our favorite tools that we use all the time over here at syntax. And if use the coupon code, a tasty treat all lowercase all one word, you will get two months for free. So thank you so much for Sentry for sponsoring. So first buck made from web dev. Now this is hard for me to quantify in a lot of the things I was doing a lot of like, rework for friends and times here and I may have gotten paid for it may have not gotten paid for some of it. So for me personally, I'm gonna be talking about some of my projects that I definitively did get paid for early on in my dev career. Your first check, Wes, for doing this just this is just straight up client work. Right? What is your first check look like from client work? - -6 -00:02:20,490 --> 00:03:03,390 -Wes Bos: Yeah, I very clearly remember this one. Because it was it was before even MySpace got super popular. myspace was certainly there. But it was for a local band called The district. And I built them a website. And I remember it was iframe, we sliced it up, and you did the whole thing where you export it via imageready. And they got me 300 bucks for that, which I thought was I think also included a couple of T shirt designs as well. Nice. And I remember the check came in from like the drummer's mom, which is hilarious. Yeah. And I had to like go to the bank and, and deposit it. I think that was really funny. Nice. - -7 -00:03:03,450 --> 00:03:58,560 -Scott Tolinski: Yeah, believe it or not, my first dev check would have come from my parents, because my parents were opening up a T store blooming t.com, they were opening up a T store and did not know what to do. And I said, Well, I think I could do that. So I put together a Magento website for them, which was really a little bit beat on my, beyond my skill level. To be honest, I wasn't necessarily knowing what I was doing in PHP and everything. At that point, I was just sort of struggling through it. But it worked. And they were able to accept payment via credit cards and stuff. So that was really it because it was like, you know, my parents tea store or whatever, it was a nice first introduction. I didn't have to be a good good entrepreneur or good business owner in that regard. I didn't have to, to hunt them for money. I didn't have to like it was all just like a nice and relaxed experience to get my feet wet and what would be an actual client facing real world thing that people would use. - -8 -00:03:58,800 --> 00:04:36,540 -Wes Bos: I was just thinking about that. And I also did a website for a pool company and I don't know if this was before the the band one, but that was my first like, client outside of just friends doing music, you know, like that. It was some It was a drummers dad actually had a pool company and I went ahead and built a website for them. And that was like, I remember that because like they literally paid me for it and we got it online for them. And that was like my first time being like, oh, wow, like this. There's like there's businesses out there that are past bands that don't have any money and I can make some money off of them. - -9 -00:04:36,630 --> 00:06:55,680 -Scott Tolinski: Yeah, my first one for that was a client I got off of whiteboard. Craigslist. Yeah, classic. Just hunting for clients on Craigslist. I just responded somebody posted an ad saying that they needed development for a store that they were doing at some design stuff, and I really fancied myself as being an all around all around her at that point, even though I definitely wasn't but I came up with this logo, believe it or not, I actually got paid to do a logo was one of my first things that I did. And it actually was on a building in downtown Ann Arbor for many, many years. So it was very cool. I got to drive by and see my logo up there and say, Hey, I did that logo. And then I built a website in a little actually wonder how much you can find out about this tech right today. But this tech is called Magento. Go I believe in it was like, What would we what would happen if you know Magento, which was definitely not a lot of fun to work in was like, very, very easy. Like we didn't we hide, we hit all the code stuff for you, it was sort of just like a very early version of the, like e commerce as a service type of thing. And honestly, I think if they would have kept with it and kept evolving it, it would have succeeded in today's world. But like, at the time, it was just sort of like, oh, Magento is hard, hey, we'll make it not hard. But the problem is, is that they really limited you from working on any sort of CSS in like, they limited you to get access to the code. So you could only do CSS. This is actually great. You could only do CSS through upgrades in in like a single like text field. So what I would do is I had my CSS, I would do all of the CSS in the dev tools to sort of update it that basically copy and paste my CSS from that and then paste it into the text box and click Save and then see if it worked. And then refresh. It was just like an absolute nightmare to do anything in in terms of like custom aesthetic, and I somehow was able to, like really, really themed some of these sites with even image backgrounds and all sorts of interesting stuff. But it was such a giant pain in the butt to theme outside of one of their themes that it was ultimately probably not worth it. But I did a ecommerce store, and I did a logo that appeared on a building and that's not too bad for your first client. And I didn't know them at all when they were no Woody's dad. Okay, there were nobodies relations. - -10 -00:06:57,870 --> 00:07:55,860 -Wes Bos: That's great. There's no drummers dad there. Alright, let's talk about I'm not sure if you have this or not, but first AdSense income. So yes, I know maybe 1515 years ago, it was like the thing to create a blog and put ads on it and just like rake in all the all the money and I remember being part of this website called young go getter. years ago, it was like a forum of people who were sort of trying to do this type of thing. And the one person I actually remember from that was derrius monster who he created this website called color lovers, and then went on to create creative market. Oh, wow, it didn't Wow, it didn't click to like a couple years later, I'm like, Oh, that was the guy from the forum. Wow. He's like, like multi millionaire. I think he had this big deal anyways, so I was really excited about that. And at the same time, I was flipping blackberries. So I would buy blackberries, that's - -11 -00:07:55,860 --> 00:07:58,740 -Scott Tolinski: honestly legal. Whatever you're doing, it sounds like it could have. - -12 -00:07:59,790 --> 00:08:48,020 -Wes Bos: No, I was I was buying like, like cell phones off of Craigslist, and then reselling them. And what I would do is I would unlock them and I would buy a cheap case and a SD card. And I would just like put it up for 150 bucks more, because often there were people that had like at&t blackberries in Toronto, they moved from the States and they couldn't use them. So I would buy them and unlock them and flip them. And so I made this website called Craig nomics, where it was like a blog about flipping stuff. And I wrote like four posts, and it never panned out, because I didn't immediately read from it. Yes, right. Yeah. But I did make, like $17 or something. I remember getting a check from Google. And it had like, 17 bucks on it. And I thought that was so cool that you can make money on the internet. Like that. - -13 -00:08:48,270 --> 00:09:40,650 -Scott Tolinski: Yeah, that is so cool. My first AdSense income was my first AdSense income was something very similar. I heard tell of similar tales of being able to make a lot of money on doing AdSense. And of course, I published a blog and I, one of the first things I did is I wrote a post on I could even tell you from memory, this is just straight up for memory because this don't have access to this anymore. But the the name of the blog post was six sites to get your music heard. Now, how is that for a cookie cutter blog post, and it actually I posted on Reddit and did not get murdered at the time. So that was like, and that was a long, long, long, long time ago. That would have been like 2000. And oh, man, I would have probably posted that on Digg too. That's how long ago that was. - -14 -00:09:40,740 --> 00:09:43,320 -Wes Bos: Oh, yeah. So yeah, that Doug - -15 -00:09:43,350 --> 00:09:55,890 -Scott Tolinski: site got dug right in it. Actually. It made me like it like he said, like 10 bucks or something. I was like, Huh. And then I never had another blog post. Rival it at all. So I eventually got tired with that just like you did. - -16 -00:09:58,670 --> 00:11:11,220 -Wes Bos: What about first YouTube video. So like that you made money off of. And I just went back on my YouTube channel and looked for my very first programming video. And that was nine years ago. So 20 in 2010. And that was a programming video about I had a couple of videos before them. But the first one that got really popular was how to import a large SQL database with big dump. So at the time, were pressed databases, sometimes they got pretty big because some of these websites had a WordPress with thousands of posts, thousands of comments, and they would get pretty big and the like servers would only allow you to upload like six Meg's at a time or something like that. So there was this tool called Big dump. And what it would do is jump up, upload your database in, in like smaller bits, I think. And I made a little video on how to do that. And that just looked as almost 60,000 views on it. And I remember that was before YouTube had any, like, minimums in order to get paid. So like I had ads on all my videos. And I remember getting a check or direct deposit from them. I thought that was pretty cool to make some money off of a YouTube video. - -17 -00:11:11,250 --> 00:12:45,390 -Scott Tolinski: Yeah, my first ever YouTube video you can find on YouTube right now. I am very surprised that this thing is still published. It's from February 7 2012. Okay, so this is February 7 2012 premiere tutorials number one starting a project how to start a project in Adobe Premiere. It has three, three comments and one person wrote first video lol. It has four thumbs up, one of which is my own. And I know this because it's blue on my end. And that means thumbs up on it like in 2012. So this is very funny that this thing still exists. It only has 986 views on it. That's it. And in my very first video tutorial, the first one that made me money, because I had some decent traction. Maybe not super quick, but my first video video video was from February 9 2012 SAS tutorials number one how to install so Wow, that video has 235,000 views. And really a 97.6 thumbs up ratio might I add? That's good people really liked it. And that was my first one it got shared by some of the folks behind SAS and Chris Epstein of compass. So it like really it blew up my channel pretty early in a way that like allowed me to to make a couple bucks off it to say Oh hey, maybe I could maybe I could do this too. which then led lit into compass tutorials and then eventually Drupal tutorials. And yeah, - -18 -00:12:45,390 --> 00:12:59,970 -Wes Bos: I just watched your first premiere tutorial. Yeah, and you started with Hey, what's up this is level two tourists like like how did you have that all so down pat, right out of the gate like my first four years of tutorials and even now we're just kind of like Hey - -19 -00:12:59,970 --> 00:13:58,080 -Scott Tolinski: guys, was that? I used to watch a lot of video tutorials both paid and free. And oh yeah, it was just very I don't know what it was about it. Like to be honest. I don't know if I've ever watched this. I don't know if I've ever watched it even after I recorded it maybe like once I edited it. I don't know like what this thing looks like to me. So I'm going to give this a go to and see how many of my my carryovers have stayed from this very first one but it's very funny to hear you say that because I don't think I knew what I was doing and it just sort of easily became a flow that I fell into Not to mention that I only did like a handful maybe like two or three of these premiere tutorials anyways before quitting Adobe Premiere because I just like most things in my career, I looked at this I was like, why am I doing this premiere tutorial like web development, what I'm interested in and like better at whatever. I think I started with premiere tutorials because there was 1000 of them on YouTube already and I knew that there wouldn't be a lot of traffic I released them and they were bad. - -20 -00:13:58,080 --> 00:13:58,740 -Wes Bos: Oh yeah. - -21 -00:13:59,010 --> 00:14:05,010 -Scott Tolinski: Oh, but yeah, so SAS definitely was the first one that made me money but it was only like my fourth tutorial or something so that's pretty sick. - -22 -00:14:05,490 --> 00:14:40,290 -Wes Bos: Let's go on to the next one which is a first online product or first like dollar made from creating a training something. Oh, yeah. So mine was my sublime text book was the first thing that I ever put out. I was paid. And I remember Ryan Christiani who was teaching with me at hacker you he bought it immediately. Oh, that was really cool. sound cool. If I look if I sort customers by like oldest to newest. It just shows Ryan's name as the very first person who ever gave me $1 for learning something which is really cool. - -23 -00:14:40,949 --> 00:15:39,990 -Scott Tolinski: My first one it's funny because Ed must have bookmarked this stuff because I started to google it to see if I could find it anywhere. I have the the actual files for this, but this was from tuts plus.com marketplace that tut's plus calm I sold a series called sass mastery that actually did fairly decent For me, basically, this is a little a little secret here. I basically took the free course I had on YouTube and rerecorded it not exactly the same. I definitely got rid of a lot of the ohms and ahhs and I made it like a more pro thing right I just redid it yeah and like a better way sold it on marketplace dot tut's plus.com. And it felt pretty decent for me to the point where I was able to include it as like a add on to people subscribing to level up pro later on to say, oh, here's this extra course you may not have seen. That was like a more premium course that I had done. So I actually kept that one around. And I used to sell a couple things. I sold some like audio loops on audio jungle to Oh, I - -24 -00:15:39,990 --> 00:15:47,250 -Wes Bos: remember trying I made a couple themes. For like that. That was another thing that is funny. It was in the back at all the dreams to get rich. Yes, - -25 -00:15:47,250 --> 00:15:48,900 -Scott Tolinski: themes were definitely one of those - -26 -00:15:48,930 --> 00:16:25,020 -Wes Bos: the themed everybody was making a theme marketplace because like there was a couple people out there that were cleaning up. I remember there was like, cap cosy KUZ why he was like the number one theme dev on themeforest at the time, and he had like 15 themes, and they all sold hundreds of thousands or something like that. Yeah. And I don't remember, if anyone knows who I'm talking about. I would love to get him on the podcast to talk about that. Because that was another thing. I tried and failed that before I stumbled. Finally, upon being able to sell my courses we do. I developed - -27 -00:16:25,020 --> 00:16:41,760 -Scott Tolinski: like two or three themes. Unfortunately, I never got a single one on the market because I kept pivoting from the I'm going to do a Magento theme now I'm gonna do a WordPress theme. Oh, you know, so for me, that was always a big thing, too. I always wanted to make a big theme, but I don't think I was a good enough designer to make it happen for being entirely honest. - -28 -00:16:41,760 --> 00:16:44,400 -Wes Bos: Mine just got rejected because - -29 -00:16:46,770 --> 00:16:59,760 -Scott Tolinski: yeah, I think one of my audio loops got rejected because it just didn't sound nice, even though like I'm just into dissonant music. So to me, it was like, What do you mean? Of course, it doesn't sound nice. It's not supposed to sound nice. And the people who buy it aren't gonna buy it because it sounds nice. You know? - -30 -00:17:00,090 --> 00:17:32,300 -Wes Bos: Yeah, yeah. I last one I have here is just like, first in person teaching money made. And for me, that was I got a gift card at ladies learning code after I did like three or four of them, which I thought was really cool. And then after you, which I've talked about on this podcast before, which is a boot camp, part time, Career College, I taught there, which was seven or eight years ago, and I got paid for that as well, which is was really cool. - -31 -00:17:32,880 --> 00:18:45,560 -Scott Tolinski: This goal, I don't have this same sort of category. I've never done any real teaching still to this day. I probably could. I mean, I think I've done workshops and stuff, but nothing really major. My first what I've decided to supplement this with is my first project at an ad agency and my first agency project, which was what's the word for this? It's a like a recumbent cross chain trainer. It's like a trainer for people who have joint problems with disabilities, or maybe just, you know, unable to do certain exercises. So it's like a, like a lay down sort of move thing that moves your arms and your legs that where you use it. They used to run the show The Biggest Loser for a long time. And so that was my first client and the codebase was one of those ones that had been authored by like 20 different developers over the course of 20 different years and is like just filled with patches over patches over patches. So it's like anytime you make a new file. Well, you just duplicate another HTML file. And then well you just write a custom CSS file specifically for that, just because like to avoid overrides, and it was one of those things where it's just like, give the new guy that the worst project. That's what I did. Yeah, for a little while. And it was a it was fine. It was my first agency project got my feet wet. And - -32 -00:18:45,930 --> 00:19:22,680 -Wes Bos: that's a good one. I'm gonna do mine as well. My first agency project was with this company called jet Cooper, which is they got bought by Shopify. And I was working with vernons at Tisch. And they had me do some word custom WordPress, Dev for them. And it was for like a pillow company, I think, oh, and I remember thinking that was so cool that they had this like wicked office. We went out for lunch. And that was like, really opened my eyes to like, how cool working in web development can be versus like my other experience, which is working at a bank. - -33 -00:19:23,190 --> 00:19:48,930 -Scott Tolinski: Yeah, well, mine Mine was more along the lines of your bank experience, because it was just sort of like well, we get the new guide the crappy code base and the the the crappy looking site that's super old. And because the company won't pay for a redesign when they need it, you know? So that was my, my experience different, just a little bit there. But it took me how many similar experiences we had, especially around stealing stuff in those markets and trying to do to get kids like that. fascinated by that. - -34 -00:19:49,170 --> 00:20:23,970 -Wes Bos: Yeah, it's kind of fun to look back at it. Because like, if you were to ask me, I'm like, Oh, yeah, I was always making courses, but like, now that I think about them. No, no, I did a lot of different stuff. Until I stumbled upon what worked for me and I also asked us on Twitter, like what was your first buck made? And I'll link up the tweet thread in the show notes because there's some really, some really interesting ones of people saying, like, I got Steve sugar, who was a designer behind tailwinds. $400 for designing and coding a site for a miniature horse farm. Yeah. Cool. Hopefully, those are the real horses, - -35 -00:20:23,970 --> 00:20:29,970 -Scott Tolinski: you know, like, like plastic miniature horses? Do you know what I mean? Oh, yeah, cuz that'd be pretty cool to - -36 -00:20:31,020 --> 00:20:46,170 -Wes Bos: me, we need to do some sort of, like call in show where people tell us they're like, I we need to figure some way for people to like call in. Because like, I would love to hear a little clips of people and their stories about how things went and whatnot. - -37 -00:20:46,200 --> 00:20:55,650 -Scott Tolinski: I think that's a great idea. It would be a lot of fun to do. I think I think we should definitely do that. I have a quick question for you. Oh, what is the first buck you made on a course for somebody else? - -38 -00:20:56,090 --> 00:20:57,990 -Wes Bos: a course for something. What do you mean by that? You - -39 -00:20:57,990 --> 00:21:10,530 -Scott Tolinski: get paid to do a course or a company or not even a course maybe even just tutorial video. Does that ever happen to you? Oh, because I know you've done at least one. Have I? Didn't you do one for Mozilla? - -40 -00:21:10,980 --> 00:21:50,640 -Wes Bos: Oh, ah, well, no, I Mozilla paid me to do my own course. That was the CSS Grid, they sponsored it. I have been approached a couple times by companies to make internal trading videos. So like, I would like learn they're like, just so they have good videos to give their own staff members. And either didn't do them. And some of them I was like, yeah, I'll do it. And it never panned out. But no, I've actually never, I've certainly written for like smashing mag and CSS tricks and a couple of those other blogs I've written for them, and you get paid for that as well. So maybe that don't get a good enough answer there. That counts. - -41 -00:21:50,670 --> 00:22:25,980 -Scott Tolinski: Cool. I think my first one was, I did a course for packt Publishing on Magento. Back when I was doing a lot of Magento did Oh yeah. Not necessarily worth the time. But you know, that's how publishing goes. So that is it. A lot of fresh books being made. Let us know what your first book was outside or in that if you want to get it linked up in that Wes Bos tweet, link it up in that Wes Bos tree. We reply to that, let's maybe start that thing up again, or you can just share it with us on twitter yourselves. So as always, this is Scott to Lynskey and Wes Bos Wes Bos signing - -42 -00:22:26,400 --> 00:22:28,440 -Wes Bos: off be head - -43 -00:22:30,330 --> 00:22:39,600 -Scott Tolinski: on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax286.srt b/transcripts/Syntax286.srt deleted file mode 100644 index 1e80c82f1..000000000 --- a/transcripts/Syntax286.srt +++ /dev/null @@ -1,376 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bos. - -2 -00:00:12,059 --> 00:00:56,670 -Wes Bos: To syntax Scott just tried to start the show there. I start the tasty Scott starts to hastiness. This is a show we're gonna do another fundamentals episode and I can't believe this is not one that we thought about Scott just messaged music. Hey, we've never really done like a good episode on. What are the fundamentals really just doing an explainer episode. So that's what we got for you. today. We are sponsored by two awesome companies. First one is Sentry, which is gonna do all of your error and exception tracking and fresh books, which is cloud accounting. My name is Wes Bos. I'm a developer from the hammer. And Scott is with me How you doing? Hey, Scott. Hey, - -3 -00:00:57,360 --> 00:01:05,090 -Scott Tolinski: I am doing good. I was trying to think of a cool nickname for a while Hi, yeah. - -4 -00:01:05,189 --> 00:01:06,060 -Wes Bos: Oh, really? Yeah, that's - -5 -00:01:06,060 --> 00:01:59,790 -Scott Tolinski: what they called Denver, because it's a mile high in elevation. Yeah, our football stadium was the mile high for a long time. And now it's something else. But yes, I am here. And I'm with Weston the hammer, ready, ready to talk about get because if there's something that any beginner web developer knows is, there's nothing more likely to make you want to run and grab your hammer from the garage and smash your computer, then some good old fashioned confusion within Git. Because this is a topic that trips up a lot of people, especially when they've never used any kind of version control in the past. So I'm really excited to talk about Git fundamentals. And I'm also excited to chat with you about it, Wes, because I don't know. We don't talk about good stuff that much, even when we're just chit chatting. So chatting. Yeah, Chad. Yeah, this will be some good chat. And I'm excited to just get a little bit of Wes Bos get action, whatever you're doing here and you know, do the same. - -6 -00:02:00,300 --> 00:02:11,880 -Wes Bos: So I just googled the highest cities in North America, and Denver is the second highest city in Northern metallization. element in more than one way, actually. Well, - -7 -00:02:11,880 --> 00:03:03,419 -Scott Tolinski: yes, in many ways. That's unreal. So does water take longer to boil up there? Absolutely. In fact, my mother in law, whenever she comes here, she's always like having to adjust all of her recipes, things baked at different different lengths. Wow. There's all sorts of stuff. In fact, when you get here, one of the first things that happens to some people is they get really bad headaches, because they're getting tired really quickly. For the first like, month we lived here, you would have a beer, and you'd be like, you'd be drunk. Just because you get drunk faster. There's all sorts of like weird little things. Oh, wow. Yeah, that's why actually, the Olympic Training Center is here and everything the athletes train in elevation, so that you can perform better. at normal elevations, the babies are even born with a different amount of like, like the blood count is different within the babies, there's like a whole thing about that, - -8 -00:03:03,539 --> 00:04:15,180 -Wes Bos: wow. Alright, so you probably have used get if you're, if you're listening to this, but we're gonna start from the fundamental. So bear with us, a Git is a version control system. And what that means is that you set up what's called the Git repository. And as you write your code in a git repository, you're able to track changes for like, let's say you're working on a new feature, you write the code for that feature. And then generally, when we maybe can talk about this a little bit later is like, when do you commit something, but generally, like when you're done that feature, you'll go ahead and commit that feature. And then if something breaks, or you need to go back to and reference what you had in the past, you don't have to make another folder of that you're able to roll it back, you're able to view previous commits, it's sort of like little snapshots in time. And that's very important because of accidentally deleting code or whatnot. But also, just the code bases do get fairly large. And if you were just to copy paste the entire folder, every single time, it would be way too large. And there is no way for you to track who what and when changed at a certain point in time. - -9 -00:04:15,600 --> 00:06:48,900 -Scott Tolinski: Yeah, the who, what, when what has changed that is really the core concepts here is that this is a thing that allows you to in an organized fashion, keep versions of your, your code, and that's pretty much it right? It is here to allow you to have various versions and different pathways for your code to exist in the world. And this is important for two major reasons for working by yourself the history of your code, having your code stay organized in a way that if you goof up, you can go back to write maybe perhaps you installed a version of a package that is no longer compatible with your system and you want to go back. Well, this is an easy way to go exactly back to where you were before, right It's like a save state in a video game, you can just start over right? Another cool thing about it is the ease of which it makes working within teams. Because a lot of times when we're working in teams, we all know the word that the workflows that can happen with if some people are in the same file, and you're saving over a file. I mean, I know that when we were doing occasional cowboy coding, where you're editing files live on FTP, you know, like, 20 years ago, there would be a situation where somebody would save a file and somebody else had a different local copy of that file, they saved it, they both upload it, one of them is good, one of them is not good. And you just blew away all of the work that somebody else just did. I remember that happening. And what this allows you to do more than just that, though, it allows you to understand exactly how the code was written, and by who, and when, and where and what. And there's all sorts of extensions, and whatever in your code editor. In fact, I can hover in a hover over any line in my code, and it's going to tell me who wrote that line when they wrote it. So for me, that is like a very, very crucial skill. And anytime you have teams of people, even like two or more people working on code, these features really start to be important. So it's funny, because those things are all important for individuals. But I think Git enters like a whole nother realm, the moment you start working in teams, because there's so many cool, different flows and ways that people can commit code and share code and add code to repo open source or closed source wise, I thought we would maybe breeze through this UI verse command line thing, maybe talk about why Git can be a little bit scary here. And then we'll come back to the Git UI thing a little bit later in the episode. So we wanted to first and foremost say, Well, I guess for first and foremost, do you use a git client, - -10 -00:06:49,140 --> 00:07:16,620 -Wes Bos: I don't, the closest thing that I come to using a git client and I have used a couple in the past, but I've always come back to just using the command line. But the closest thing I used to gooey is, when I have merges that need to happen, I will jump into VS code and, and yours use their GUI for that, although I have used better, I've had to have better experiences in other applications. We'll talk about that. But I'm primarily I'd say 98% in the command line. - -11 -00:07:16,980 --> 00:08:25,320 -Scott Tolinski: Yeah, I would say I am just about the exact same VS code specifically is really the only GUI that I use for Git. And I do have a handful of extensions installed, whether it's get lens to see, you know, who committed what, or there's some good history ones where you can get that neat little subway graph looking type thing of your code. So you can see where exactly, you know, branches happen and things like that. So I do have a lot of extensions there. But when it comes to committing, staging, and all those things, which will define later in this episode, I'm pretty much doing it all through the command line. The version control tab in VS code is very good, though. If you ever are interested in using it, there are some things they can't do. But I do occasionally come to the the what's changed panel in VS code to sort of see which files have been recently changed, or, Hey, I just did this thing. And I didn't intend for a to hit this file. But there it is. It's in the files that's been changed. Right? And git commit messages. Sometimes I do use this because it's, it's easy, but I almost always just default back to the terminal because of straight up muscle memory. - -12 -00:08:25,800 --> 00:08:34,909 -Wes Bos: Yeah, I was thinking the other day, probably about like a week ago, like I would love somebody asked me like, Hey, can you do a git course. And I was like, like, what I do in a git course. Because like, - -13 -00:08:35,340 --> 00:08:35,999 -Scott Tolinski: I thought about that - -14 -00:08:36,119 --> 00:08:52,320 -Wes Bos: almost all of my my good stuff is like the stuff we're going to talk about today. And then when it comes to complicated rebasing and squashes and enrolling back things, I usually have to do a little bit of googling here there to find out what I'm actually doing. - -15 -00:08:52,669 --> 00:09:19,789 -Scott Tolinski: Yeah, there's a lot of, like, complex get that scares me still, because I don't need it yet. I haven't found the times where I'm, like, really needing it. Cool. So let's get into get 101. Actually, before we even get to this is get oh one. I don't think that's a thing. But I'm talking about like installing git, do you have to install Git? What do you do to get get up and running? How do you get running? - -16 -00:09:20,070 --> 00:09:21,690 -Wes Bos: Man? That's a good question. - -17 -00:09:22,020 --> 00:09:27,090 -Scott Tolinski: Because it feels like a whole other lifetime ago that I lasted dealt with this. - -18 -00:09:27,149 --> 00:09:37,740 -Wes Bos: I've probably installed git, like twice over my entire last 10 years. And that's because that's when you get a new laptop. You have to install it. It doesn't come with Xcode, I don't even know on a Mac. See, - -19 -00:09:37,740 --> 00:09:57,690 -Scott Tolinski: that's a great question. You need Xcode. If you're on a Mac, you need the Xcode command line tools, but I don't believe it does come with it. I believe you do need to install it from Git hyphen SCM Comm. All the link in the show notes. It's like a click installer. It's, if you're on Mac or Windows. I remember this. It's just been so - -20 -00:09:57,690 --> 00:10:06,020 -Wes Bos: long The first time you use it, it says I need Xcode developer tools. And you have to download a 90 gig file from Apple. - -21 -00:10:07,500 --> 00:10:16,020 -Scott Tolinski: It takes an entire day. So just like if you're like sitting down to play video game, make sure you turn the Council on early so that I can install the latest updates. - -22 -00:10:16,380 --> 00:10:35,130 -Wes Bos: Just like that. I believe it probably does come with most Linux distros. Just because that is something that you do in Linux is you live in the command line to get it and Windows definitely doesn't come with it. But again, it's just a click through installer, I believe that processes pretty simple on Windows as well. - -23 -00:10:35,610 --> 00:11:12,929 -Scott Tolinski: Yeah, yeah. So the first thing we need to do if we are going to be starting a repo or as Wes, Wes mentioned, it's a repository right, you often heard that hear them referred to as repos, just because it's easier to say. So to initialize a repo, let's say you have a folder full of your code, and you want this code to be tracked by this version control system, you would have to be in that directory. And you would type in your command line, once gets installed, get space in it for get initialize, do you know what get in, it actually does what's - -24 -00:11:13,350 --> 00:12:24,960 -Wes Bos: in the folder that you're working in. Generally, it's the root of your actual project, when you type that it will create a hidden folder, that's called dot get. And usually you don't see that folder because most editors as well as most by default, your finder and Windows Explorer will hide hidden folders from you. And if you enable your I recommend turning it on if you're a new developer, so you can see them, but it'll still make it sort of grayed out. So you know that it's a hidden folder. And inside of that dot Git folder, it contains information about your repository, so that that tracks things like where are you currently in your thing? So like, Have you made any commits? Have you made any changes have there been new files added since since you've, you've done the last commit, it also keeps all of the changes that you've done in a very small fashion. So it tracks all of the changes that went through. And then also tracks origins, which is, we'll talk about that. But generally, if you want to push your your Git repo to somebody else you want to you want to get it from your computer to another computer, most likely, that's like GitHub, then you it will keep track of different spots where you can you can put that in those are called origins. - -25 -00:12:25,439 --> 00:13:10,799 -Scott Tolinski: Yeah, cool. So we have our folder. And if your code is not living anywhere else, as in, you haven't pushed it to a remote location, like GitHub or Bitbucket, or whatever. If you delete that dot Git folder, there goes your whole history, that thing, that's all if you're only keeping it in one location, whatever, all of the information, your your entire application needs to have that version controls in that Git folder. So if you don't have it remotely saved anywhere, that history is going to be all gone. The moment you you delete that, which might be helpful if you're trying to declare bankruptcy. And yet, maybe you've like, goofed it up enough, where you're just like, you know, what, screw it starting over. Because that's the only thing I feel like that can happen at the end. You know, the beginning - -26 -00:13:10,860 --> 00:13:12,000 -Wes Bos: lots of times. Yeah, - -27 -00:13:12,480 --> 00:14:13,320 -Scott Tolinski: yeah, definitely. Especially when you're learning I think people, people often forget just, if you've never worked in a version control system, how different or weird it can feel at first, when you're first learning, especially if you've worked in different ways prior to that, if you're coming brand new to programming, maybe gets just embedded as something you've done, because if your bootcamp taught you or something, but for a lot of us we had done many other means of working in files are even version control before this. So now we have the next major command, which you're going to need to know is add. So we would like to say git, add. Now git add has a whole bunch of options. And the funniest thing about Git adds options are as I feel like everybody kind of tells you to use different ones in different tutorials, which is funny people just be like, Alright, we're gonna do git, add space, then dot, and then today's and also we're gonna git add space hyphen, a. Now what do you do specifically Wes with your git add in and then maybe you can talk about what does git add do? - -28 -00:14:13,380 --> 00:14:30,059 -Wes Bos: So what I'll do is if I want to add absolutely everything that is in the current folder, I do git add space a and that will add absolutely everything. When I've made changes after commit. We'll talk about what that is in a second. I use git add dash p - -29 -00:14:30,209 --> 00:14:33,990 -Unknown: Have you ever used that? That's not to use oh boy - -30 -00:14:34,020 --> 00:16:27,539 -Wes Bos: the best so that I don't know what the P stands for progressive maybe. par Sharky mine, porcupine. It basically what it does is it takes every single change that you've done, since you last did a commit. And it will allow you too Yes, no, each of those changes. So it shows you the deaf writing your command line and you put your fingers on the y and the N keys. And you just go through every single change that you've done. Cool. It will just show you because sometimes, like I've done this many times is you just blindly add everything that has changed. And then maybe you accidentally made a change or put a console log in somewhere that you shouldn't have. And this allows you to have a quick little review of all the changes you've made before you go and send that off to a team members, something like that. Cool. So by default, when you do a get in it, none of your files are being tracked. And if you want to track changes to those files, you have to first add them to the repo. And then you also when they've changed, you have to add them as well. A really important part to remember before you do your first git add is make sure you create a dot Git ignore file. And in that, in that file, you list all of the folders and files that you do not wish to be part of your Git repo because you don't want everything to be part of a Git repo, like what are some ideas, some things that shouldn't be part of repo like passwords, environmental variables, aisles, DS stores, one that always pops up on a Mac, for some reason, large files, like videos, sometimes, even if you've got lots of images, that's not necessarily a good spot for putting them in a Git repo, because it gets it gets really, really big. So generally, you want to ignore all of those those things, and they will still live on your computer, but they will not be part of your Git repo, and they will not be pushed to other people who use that Git repo. And then, also, if you lose those files, you're kind of out of luck as well, because they're not, they're not backed up in any way. - -31 -00:16:28,200 --> 00:16:40,980 -Scott Tolinski: Yeah, cool. So I actually pretty much always do git add and then period, which, to my understanding just adds everything that has been changed. It's just like a blanket add, - -32 -00:16:41,010 --> 00:17:07,890 -Wes Bos: yeah, the difference between dash capital A and dash period is that if you are in a sub folder, add dash a will add everything that is tracked by the repo, and the period will add everything that is in that current folder, so that my home is usually not a difference. But actually, it might be something that you want you But yeah, I only want to add the changes to this controllers folder, not not the package JSON or whatever I did to to upgrade that. - -33 -00:17:08,669 --> 00:18:12,780 -Scott Tolinski: Yeah, well, here's a good little tip. What I would do if I were you is, is probably do what Wes is doing with the hyphen, a flag the git add hyphen, a, and then just alias that in your your bash to like git add or just add or something so that you never have to think about it again. Because it's not one of those things. You I mean, there are features in here, like such as the the patch prompt that Wes is saying, but like, I don't ever, you know, day to day, I don't need to look, if I needed these, I would look them up. So I almost always alias might get add to something else. So like Wes mentioned, anytime you add a file to your project, or anytime a file has been changed, you need to add it as like saying, hey, these changes have happened. Once those changes have happened, you need to commit those changes. Now that commit is where you're basically solidifying those changes as something that has happened, where the ad, it's not putting it, it's not writing it into history, yet, it's just sort of thing. All right, these are these files have been added, but two rights to history to the Grand docs, to the Library of Alexandria, - -34 -00:18:12,989 --> 00:18:14,300 -Wes Bos: you have a great way to put it, - -35 -00:18:14,330 --> 00:19:22,230 -Scott Tolinski: yes, you have to get commit. Now you do that by typing git commit. And if you just type git commit get is going to yell at you. Because all commits need what is called a commit message. Now a commit message is a simple sentence that defines what has happened in this commit. This way, when you're reading over your past commits, you don't see a list of all k 10 files change to whatever you see those nicest simple sentences. Now the upside to this is that you can write really nice commit messages and commit messages can even be used to generate change logs and things like that. Or you could just write, get commit messages that are helpful, such as adds new protections to this feature, blah, blah, blah. And it doesn't have to be a in depth or whatever. But it should be descriptive about what the code contains. So that way, when you're looking at back on it later, you can say, Alright, this is the one I want to go to, this is the specific commit I want to go to. So you do that with git commit hyphen, M, and then you have the string or the text of your commit message. - -36 -00:19:22,500 --> 00:19:53,640 -Wes Bos: Yeah, and generally those those commit message will be something like, add support for iecex or fixes. Often what will happen is you you have like a bug tracker, whether that's GitHub or like a JIRA or something like that. And sometimes in that commit message, you'll put a reference to an issue number. And that way, if you want more information about what this thing was adding or fixing or removing, you can always look that up and reference it in your your project management software. - -37 -00:19:54,350 --> 00:20:04,410 -Scott Tolinski: Yeah, yeah, there there is like do's and don'ts with commit messages and sometimes you'll see people that don't That'll post a commit message just just like, fix it bug. - -38 -00:20:04,620 --> 00:20:06,720 -Wes Bos: Well, that's my commit messages. - -39 -00:20:07,020 --> 00:20:09,000 -Scott Tolinski: No, I hate that. - -40 -00:20:09,830 --> 00:21:18,690 -Wes Bos: Match the keyboard. Yeah, no, I like important stuff, I will. But sometimes it's just like I'm building a course. And I just need to make sure that what is up and I'll just match the keyboard or whatever, I know, that's not the best. But like when it's when it's professional stuff, I will do a good message, I should add this, sometimes I'll be working. And maybe I'll upgrade my NPM package JSON. And then I'll also fix something on the homepage. And then I'll also change a price right there kind of just did three different things that are totally unrelated. So if that's the case, what you can do is you can get add, package, JSON package lock, and then git commit updated dependencies, okay, those two are done, then git add index dot HTML, get commit, change the homepage, and then get add prices, dot j. s, commit, change the prices and that way, if you ever looking back at like what happened, you know, like, it's not just like, I did these three things, and I loop a bunch of them all up into one, you're able to pick them and not case you don't get add dash a you just get add the files that have changed. - -41 -00:21:18,900 --> 00:23:05,670 -Scott Tolinski: Yeah, word next to so we have we've created the repository, we've added things to the repository, we've written them into stone with commit, now we're ready to go put those up somewhere else. Because if code is living just on your computer, then it is basically at any any given point subject to the ticking time bomb that, you know, hardware tech is if you dump your computer, or your daughter spill something on it, or whatever your son decides to, I don't know, pick it up and slam it down, you are then lost it and all that work you just did was lost. So what we then have next is going to be pushing the code. Now you can push a code to any remote location, it has to be specified as an origin. So what we first want to do is to get remote add origin and then paste in the long string, that either GitHub or any of these other clients may give you these on the web cloud hosting services, right? They GitHub is really just a service to host your code on the cloud. That's all it is just like some of its competitors. So we do Git remote add origin, then the long string. And that sets the origin of our code to be living elsewhere out in get land. And then we do git push origin, and then the branch name where there is git push origin main push the main branch, then it all goes up to your origin. And it will live there where you can then have other people pull it down, or you can pull it down from another computer or whatever it is then basically out there living on the cloud. - -42 -00:23:06,330 --> 00:25:25,710 -Wes Bos: The origins are just other Git repos somewhere else. So the whole idea with Git repos is that they're decentralized, meaning that, of course, you have your your repo on your computer. But that's not the main repo out there. That's not the end all repo, you could have another repo on another computer. And if those are origins, and if they have the same Git history, you're able to push code from your repo to another. And generally you're not pushing, you theoretically could push code from your laptop to your coworkers laptop. But generally, that doesn't happen because the items are not network accessible. Like there's firewalls and stuff in the way but things like GitHub are our network accessible. So you can, you can push it up. So there's people that like, always get like bent out of shape when we talk about this whole, like, commit, and then push to GitHub, because that's where it lives. But that is pretty much how most of us use it at the end of the day. So you it's no problem thinking about it in that regard. Yeah, totally. Let's talk about the next one, which is pulling you you wrote your code, you push it up to GitHub, and then you have a co worker, or maybe you you went home and your laptop is not same as your work laptop, but you want to work on the same project, because you are overworked and you have to do evening work as well. So what are you doing that in that case, it will now the you got to think about Okay, like where's the most recent version of my code? Well, you hopefully Remember to push to GitHub, but at the end of the day, and then you can go on your laptop and if you have the same repo on your computer, if you don't, you can just clone it. We'll talk about that in a second. But you just get pull, and then you specify where you'd like to pull it from. And it will bring down all of the changes and that's key because it's not like downloading the entire repo again and that can get very, very large. Especially if you've got Like, look, your Git repo has a list of every single change that has ever happened. So if you've got six years worth of it, and if some guy and marketing accidentally get committed 500 meg video at one point in time, that's going to be in your Git repo. And it's going to be in your Git history. But by Git pulling, it will only pull down the very small actual changes that happened to your computer - -43 -00:25:26,009 --> 00:28:26,220 -Scott Tolinski: word. Let's say you pulled some code in, you fire up that, that that project and all of a sudden, things start breaking in production. This is perhaps you want to, yes, perhaps you want to be able to pinpoint the exact commit, hey, there's that word commit, perhaps you want to pinpoint that exact commit where things went so wrong. And so you could do that with one of our sponsors today, which is Sentry now Sentry@sentry.io is a perfect place to keep track of all your errors and exceptions. And all of those errors and exceptions is very one of these cool, cool services that I've been personally using for a long time and couldn't get along without, basically what this thing allows you to do is see every error that your users hitting on your site, allows you to categorize them, see how many times in the past, given amount of time span, this thing is even happened, right is the thing happened once in the past, you know, 100 days, maybe it's not something you need to worry about as much. Maybe it was just somebody extension going wrong. Either way, we have the ability to see categorize track, log all of our errors and exceptions and see how they're doing. And it's even connected to GitHub or any of your favorite version control managers. So I can create an issue in GitHub from Sentry, then a, somebody else can come in and fix it, push that code up to GitHub, fix it, we can mark it as change and say, Hey, it was fixed in this particular commit. That way, when it breaks, again, we know who blame so head on over to Sentry at.io, use the coupon code tasty treat all lowercase all one word, and you will get two months for free, highly recommend. So let's say you had and by the way, this is no longer the Add transition. So let's say that you do longer, or let's say you wanted to work on some code that already exists in GitHub, and you were wondering, or Git lab or any of these ordering, and you say, Hmm, I want to like, play around with this, I want to try it out, or I have some some improvements to help them out with it. What do I do? Well, this is where the next one comes in, which is clone. Now people who are new to GitHub may head to a specific repositories page, they may see the download button and say, ooh, download, let me click download, they click the Download button and presents them with a modal that shows clone with HTTPS along with open and GitHub, and then download zip, you're like, Okay, well, I'll do the download zip. But before you do that, this is the better way, which is to clone the repo. And we can clone the repo using this string, which is basically the URL to the repo, and you run a git clone, you copy and paste the string and you paste it in there, which is the address to the repo. And what does it do? It fetches the entire history as well as the entire repo. So that way, you can make modifications to it, add them, commit them, and push them back up. And then then we get to do some of the cool fun stuff that we're going to be talking about next. - -44 -00:28:26,819 --> 00:29:13,290 -Wes Bos: So next, we have branches. branches are key for working on features. Or if you want to like right now I'm working on my master Gatsby website. And I'm at the same time I'm also upgrading a couple of the back end components I'm I'm doing a little bit to the the bundlers and the whole site is sort of in development right now. However, I need to keep like a working copy of the website, because sometimes what happens is I'm in the middle of building a feature. And then I have to jump back to the main website and fix something really quickly. So if I was right now, the current branch that you get by default in Git is called master. But they are talking about changing it to main, - -45 -00:29:13,410 --> 00:29:15,150 -Scott Tolinski: I think they're you did, did they? - -46 -00:29:15,719 --> 00:29:16,410 -Wes Bos: I haven't seen it - -47 -00:29:16,410 --> 00:29:22,170 -Scott Tolinski: yet. Maybe they haven't. But I had my mineral, well, at least my current reposer I mean, Oh, cool. - -48 -00:29:22,229 --> 00:30:35,880 -Wes Bos: Yeah, it was just there's a github.com for slash GitHub for slash renaming, just showing some some stuff about some tips on how to actually change to your main repo instead of master. Okay, cool. So if I have everything in my main branch, and I want to work on this feature, I will switch branches and that will allow me to edit all the files and whatnot and in by switching to a new branch, it basically it doesn't take a copy but it gives you your entire website. You can make changes to it. You can add you can commit you can even push to your branch on GitHub, wherever if you need to go back to What the website was at any time and work on that you can it's called checking out. So you can check out your your master branch again, and then you do a quick fix. And you can jump back to the feature that you're working on, you can check out that branch, and you can go back and forth. And then the whole idea is that at a certain point, that feature will be done. And you will merge, which we haven't talked about yet. But you basically you'll take those changes, and sort of feather them in on top of your your main branch that you have. Does that make sense? I think so. Yeah, to me, that - -49 -00:30:35,880 --> 00:32:47,670 -Scott Tolinski: definitely makes a lot of sense. So you way you can think about it is like they often illustrate this in train tracks or whatever, maybe you're going in one specific direction, you want to branch out, you go slightly different direction, right. So you're now on a whole other train track. And then you can bring that other previous train track, or any sort of changes that's happened to your code, you can bring that into the current one, or you can bring the current one into the other one. There's some fancier stuff with rebase, or whatever. But I think for good fundamentals, we should stay away from rebase. So this is really the standard flow that you'll see a lot of people working with is merging of code and checking out branches. Okay. Actually, I aliased my checkout to be branch, and I aliased git checkout hyphen, B to be new branch, and I've never used them. I made these aliases thinking they'd be like, Oh, yeah, this makes so much more sense. Unfortunately, I just never remember. So always just do get checkout be whatever. So we have the ability to check out create new branches, we have the ability to then merge code with Git merge. Now, sometimes, you end up having what are called merge conflicts, that's when the two lines of code or perhaps many more than that, they're butting heads in terms of maybe these two things were changed at a similar time, and they're not compatible. And whatever it is, is that the code, the computer cannot understand the correct way to merge this code together and have it work or make sense, right? It just doesn't understand. Yes, thing is the most recent version, in terms of like, correct everything, it's not a perfect system. So it's not always going to magically understand exactly what you want to merge. And you will have these things where you have to go essentially line by line to determine or group by group, which code you would like to use. And sometimes you want to use both. So you end up doing a little bit of merge both or let's, let's merge both of the lines or whatever, and then modify it by hand. It's not always a perfect system and merge conflicts can be the bane of one's existence when working in git, especially for those who are brand new to this. - -50 -00:32:48,180 --> 00:34:16,830 -Wes Bos: Yeah, we should say like, I don't know if this is obvious or not to people that are new to get but get literally tracks every single character that has changed inside of files, not just what files change. And if you like, let's say you crack open a 30, line CSS file, and right in the middle of that CSS file, you add a new selector with some new properties and values get a smart enough to know Oh, you added this, let me just slip that in. If you were to merge it, it's that's all Yeah, I'm, you're just gonna slip this in, whoever if you had like, like, let's go back to the example I was just talking about with branches where I'm working on a feature, I changed the background of the homepage to red. And then, well, while I was doing that somebody else or even myself went to the master branch or the main branch, and change the background to be blue. And then I tried to merge that branch into my main branch, then it's going to say, okay, there's two changes here. You want read? It's currently blue, but it was green initially. What do you want to? Do you want to keep making up your mind? Oh, yeah. Or do you want to keep it and if that's the case, then you have to manually jump in there or open up those Diff Files in your text editor. And you have to select which ones you want. Or, in my case, usually just open it up in VS code, and you just delete the parts that you don't want and you keep the parts you do want. And then you you committed again, saying I fixed the merge conflict and then that will then go away? - -51 -00:34:16,940 --> 00:34:34,860 -Scott Tolinski: Yeah, definitely a very common flow things that you you hit. Okay, so next we have is Git fetch. Now when might you use a git fetch? Well, git fetch is usually used to it just gets all all everything, right. That's what it does. - -52 -00:34:35,040 --> 00:34:58,980 -Wes Bos: Git fetch is kind of like get Paul, except when you do a git pull, you're pulling the changes into whatever you're currently working on whatever branch you're on, with a with a git fetch, it will stage it will pull all of the things from that origin, but it won't switch your branch. It won't make any change. They'll just, it sort of puts them in a staging area. So if you want them Yeah, good. - -53 -00:34:58,980 --> 00:35:34,460 -Scott Tolinski: A good use case for this might be, let's say you have a coworker who's working on a specific branch, they might push that branch to origin, and then maybe you want to modify that branch yourself with them, you could then get fetch, then you would then have access to that branch on your then local. So then at that point, you could then get check out that branch name and have access to that code and push to that origin. And then from there, you'll have access to that branch itself. So that is Git fetch. It's not something I use a ton. I do use it occasionally. But I think the larger your team gets, the more likely you might have to use this. - -54 -00:35:34,830 --> 00:36:26,480 -Wes Bos: Yeah, that's it's almost like, you can also use to just cherry pick things that you want. So maybe, like, sometimes what happens is you're working on a feature, and you run into a bug. So somebody else will go and fix that feature. And then they say, Okay, can you test this with whatever it is you're working on. So now you're in a weird spot where your main or master branch is not up to date as the bug, the code you're working on, your branch doesn't have the bug. And you don't want to merge, you don't want your coworker doesn't want to merge it until you test it. So if that was the case, then you'd go ahead and fetch their branch and either merge it into what you're working on, or make another branch where you're just playing around with it. And then you run it and test it. And sometimes that's the case, you can just merge one or two of those files that are needed. Or you can you can merge the entire thing. - -55 -00:36:26,520 --> 00:37:26,480 -Scott Tolinski: But I think that's that's a pretty advanced use case, totally. Next is going to be Git stash, which is basically commonly used with people, I, it's funny, I have not used Git stash in a very long time. Because it's the kind of thing that I felt like I used a lot more when I was first learning git, and you're just like getting made some modifications to some code. And then you wanted to pull in some other code. And it's like, Wait a second, you have files that have been modified, but they have not been added. And they've not been committed. What What do you want us to do with these files? Because if you pull this in, or whatever, there's a chance that this these files are going to be deleted, you're gonna lose your changes, what do you want to do with them? And sometimes you just want to say, I don't I don't really care about these changes I made maybe these changes I made were superfluous. Maybe they're just like, not necessary. So I could do Git stash. And get stash does exactly like what it sounds like. And it pulls up the corner, the rug, grabs your little dust bucket sweeps rug, - -56 -00:37:26,790 --> 00:38:43,260 -Wes Bos: I like to think of Marvis putting on the shelf for a quick second. And then, if you want, so what I use this a lot for is sometimes you, you clone a repo, somebody says Oh, can you take a look at this, okay, you fork or clone the repo under your thing, you open it up and you start working on it in the go, Oh, I just added some more code. I just pushed it up and go. Okay, so now I need to pull their most recent version down. But you can't pull when you have what I refer to as dirty changes, which is code that has changed on your computer, but has not yet been added or committed in any way. So if that's the case, then you just get stash. And that will take all of your changes that you did and bring it right back to the step where you had it before you typed a single character, then you can do a git pull and get their latest changes. And then you do Git stash, apply, and then that will take it back off the shelf and try to put it back on top of whatever you were doing. And in some cases, that that makes a merge conflict. But in many cases, it just is great. So you, you sort of just like rewind a second, bring it up to date, and then go Okay, good. Now Now let's bring in those changes that I was working on. - -57 -00:38:43,320 --> 00:38:47,760 -Scott Tolinski: Yeah, that's a try. I have not used it that way. But that that makes a lot of sense. - -58 -00:38:48,030 --> 00:40:21,380 -Wes Bos: Alright, the last one we have here is Git fork. This is actually not part of Git. So if you just type Git fork, it won't do anything. But the whole idea is that with GitHub, somebody has like a repo like for example, I I submitted a change to Gatsby the other day, so that it would fix something that was breaking something on Windows. So what I had to do is I needed my own copy of Gatsby. And if I wanted to to work on it, I could certainly just get clone it. But then if I wanted to push my changes back up to GitHub, I don't have I'm not part of the Gatsby team. I'm not allowed to push changes to Gatsby. So I need my own version of the of that Git repo. So that's called Wes Bos Ford slash Gatsby. So I made all my changes. I get out of them, I get committed them, I get pushed them, but when I get pushed them, they go up to my own Gatsby repo. And then I guess the last thing we have here is that I can now take my fork. And the difference between a fork and a branch is that a fork is its is an entire repository that can have many branches, or as a branch is just one branch and from fork, you can make a pull request onto the main In my case, it was the main Gatsby repo saying, okay, here are my changes in my repo, here is your repo, I'm suggesting that we take my master branch and apply these changes onto your master branch. Or you can obviously change which what the brains are. - -59 -00:40:21,630 --> 00:43:09,270 -Scott Tolinski: Cool. That's a I think that's important piece to cover here, you're often hear people talking about forking. And another thing you're also going to hear people talking about is pull requests. This is not an add transition, even though it sounded like it was. And so we have two different types of ways of getting code from one branch into another branch, or even one fork into another fork. And that is going to be the merge or pull request. Now a merge is what happens when you run the Git merge command on two different branches of code. And it tries to merge them. What Git pull request does Git pull requests, there's no command Git pull requests. What pull request does is it basically allows you to request code to be added. And is this the same? Do they use pull request in Git lab as well? Is this like universal? Because I'm assuming Yes, I haven't used Git lab in a while. But when I did, it was the same process. So basically, what it's doing is it's creating an issue in the repository that says, hey, I have some code here. And I would like it to be added, and whatever your Git client is, whether it's GitHub, Bitbucket, whatever they give you tools to be able to look at the code and see what the files have changed, maybe do a little review, GitHub has some really neat stuff where you can do a line by line code review, and someone can look at it and say, I like this, but I hate this now change this, because this is no good. You could do all this and then request for changes to be made. People can make those changes, they can submit it again to be pulled. And then with the click of a button, you can say yes, please merge this code into this particular branch. So a pull request is a bit more formalized version, a bit more of a way to have proper authorization and proper eyes on the code before it is brought into the actual code base, you'll often see pull requests as being the primary way in which people merge code in large or team based code bases. We use the words Git and GitHub. And oftentimes, I think beginners may conflate this as being the exact same thing, right? Git is just the, the interface for working with GitHub. And no, GitHub is a service online for your code to live, it can do a lot of fancy stuff, of which we don't have the time to get into too much here. But there are lots of other ones of these such as Git lab, and Bitbucket are the two biggest ones. Git lab is an open source project a bit bucket is from Atlassian. I never say their name correctly. And so there's alternatives here. And they function very similarly to GitHub, and they have very similar features. So if you aren't down with a GitHub, and they're Microsoft ownership or whatever, feel free to use any of these other ones. I have used all three. Personally, I think I'm the only reason I drop bitlis Bitbucket in general is because they don't have labels for their issues. What's up with that? - -60 -00:43:09,860 --> 00:43:51,840 -Wes Bos: Oh, man, yes, I use Git lab for almost everything that I do, just because my stuff lab or GitHub, sorry, GitHub, for everything I do, just because like that's where the community is. And that's where most open source is, whoever I believe Git lab allows you to have on site. Yes, they do. Because that's, that's huge for a lot of these companies don't want to push their entire business, and all of the code behind it on to a server owned by Microsoft, they want to own all of their code in house. So if that's the case, they have to Yeah, they have to host their own version of the Git GitHub type thing. - -61 -00:43:52,350 --> 00:44:01,140 -Scott Tolinski: In house on their own, it's relatively easy. In fact, I think I'm not positive at this. I'm pretty sure digitalocean is like a one click Install there. So definitely something you can do. - -62 -00:44:01,530 --> 00:44:18,600 -Wes Bos: GitHub does it too. It's called GitHub enterprises. Often your real here the big bucks talking about as on prem, which means on premises, that's like, just like, I want to use GitHub, but I want to use that on my own servers, I got racks of servers that we can - -63 -00:44:18,600 --> 00:45:09,660 -Scott Tolinski: racks of servers and racks of cash. Let's go ahead and get that enterprise going. Let's talk about common issues. Really quick stuff that people hit, we talked about merge conflicts already, they can be confusing, sometimes a GUI is a nice thing to step in there and help you understand what's changed Exactly. Again, we talked about it a little bit about the VS code interface for that. Not great, not always the easiest to parse exactly what what changed. Another one is going to be files tracked unintentionally. And this goes all the way back to the beginning of the episode where we talked about using a git ignore file. Too often, you create a repo you do get in it, whatever and you're all just like jazz done creating the project. And next thing you know, you got DS stores and who knows what in your repo and unfortunately, those are Hard to get rid of. Once you once you track them, they're not great to get rid of. So Wes, Next comes, the next question is how do I delete this particular file from GitHub? - -64 -00:45:09,780 --> 00:45:11,910 -Unknown: Yeah, I have to google it - -65 -00:45:12,120 --> 00:46:27,840 -Wes Bos: every time for like five years, yeah, I have a little alias in my sh file called g ri, which means get removed. Just because sometimes I'll commit and then go, oh, it didn't get into my Git ignore. And that can also be a security issue, if you accidentally, because even if you delete it, from your Git repo, it's still your history. And anyone that has access to that can see it especially like, like, let's say, three years ago, you accidentally committed a password to your environmental variable. And then three years later, you hire a contractor and give them access to your your Git repo. Well, that contractor can go back into your Git ID history and and see that type of thing. So you need to be very sure. And how do you do that? It's use Git RM dash R. And I have a little little thing g ri, it does get LS files, dash dash, ignore dash dash exclude standards, pipe x Rs. It's this massive thing, I'll paste it in, it doesn't work all the time. But in a lot of cases, I just had to run Jri. And it will remove the files from the repo and all history without removing them from your local file system. - -66 -00:46:27,960 --> 00:47:45,750 -Scott Tolinski: That sounds great. Another question people often ask is about like maybe along the lines of WordPress, or Drupal or like or you have these CMS base sites, where people are they they're used to working in a different flow, they get into git, and they say, Well, wait a second, there's so much information in my database, how the heck do I how do I get that into my Git repo? You don't? You don't? That is not the place for get there are? Well, unless, of course, there are certain solutions baked into WordPress, or Drupal and Drupal has one called, I believe, is called features where you can basically take all of your database stuff and throw them into a written code modules of which then you can commit, push out and then pull down in your your production version of your site and have that just work. So you don't store database and get, you probably could try it. I don't think it's a good idea in any regard. So I would never do that. So that that's a those are common questions that people often hit when they're first running into this stuff. Because you want to make sure that your database the data is always the freshest. That's why you have to find some better way to track it or export it or whatever. And this is an ad transitioning to fresh books. I'm talking about fresh books, cloud accounting software West Do you want to talk more about fresh money? - -67 -00:47:47,070 --> 00:49:07,860 -Wes Bos: Yes, fresh books is the small business accounting software that makes billing painless. It's funny actually, I have a call with my accountant next week, because taxes in Canada got pushed Hmm, yeah, but they got pushed because of Coronavirus. And so I've I've, I've put off making my payments because I owe a bunch of taxes and I'd rather it sit in my account, it's like didn't trust then then there. So I have a call next week with my accountant and I don't know, in February or January, I already gave him all of my invoices, all of my revenue, all of my expenses, all of my different taxes all of the different currencies that I built in because that's like another thing is I have to say, Okay, I made this much in us I made this much in Canadian I made this much in pounds. And then he has to report those as as income to the government in Canadian dollars using some posted rates and whatnot. So it's just just a lot going on running a business. It's very complicated and like the one thing you don't want us to be in trouble with your taxes. So having nice clean books is key. So check out fresh books comm forward slash syntax, make sure you syntax in the How did you hear about a section for the next time that you need to send an invoice or track your time or any expense that you have. - -68 -00:49:07,919 --> 00:50:04,860 -Scott Tolinski: So maybe you need to track one of these expenses to buy get get client because a lot of these you have to buy because they're nice software. Now get client or get UI is going to be a software that could help you with all of these things, whether it is seeing your project better in terms of what's committed and not or just simply giving you really neat little graphics into the path and branches and all those things that happen within your code, the history of it. Now there is a massive amount of Git clients. I've included a link from gits own website sharing some of these and some of them are prettier than others. Some of them are intentionally not like pretty pretty pretty. But if I'm going to go away from the command line get declined. I want a pretty I want a pretty app and for me, I think the the prettiest one is going to be the get cracking although I see you have under get clients you also have c li so you're you're thinking that A good client is also a CLA, I am pretty sure you're accurate on that I'm not. - -69 -00:50:05,310 --> 00:50:59,070 -Wes Bos: Yeah, any client is something that adds additional ease of use or features on top of what the Git command line already already has. So there was a popular one called hub for the longest time, but get a probably about a year ago, released their own COI. It's called gh or GitHub, and you can brew install, or I don't know, windows, CD ROM or something like that Windows and install it. And it allows you to do the stuff that's not part of get like board requests and issues and repos. And all that stuff. It allows you to do all of that via your command line. I've actually installed it and never used it, because they just Yes, use the website. But like, some of the stuff is old habits die hard. And I should probably be checking it out. Same with me. In fact, as we're doing this episode, and not as like, right, right now now, - -70 -00:50:59,070 --> 00:51:01,830 -Scott Tolinski: I just downloaded get cracking because, - -71 -00:51:01,830 --> 00:51:03,000 -Unknown: hey, whoa, - -72 -00:51:03,000 --> 00:51:03,600 -whoa, - -73 -00:51:03,600 --> 00:51:06,720 -Scott Tolinski: did you ever realize that that name, like let's get cracking Oh, - -74 -00:51:06,720 --> 00:51:08,130 -Wes Bos: I didn't realize that. Yeah, - -75 -00:51:08,130 --> 00:51:26,580 -Scott Tolinski: cuz it's spelled cracking with a K, just like the, the Seattle hockey team, which I'm wearing their hat of currently, currently wearing the Seattle racquet head, wow, this is a lot of layers deep here. So I, I'm gonna give cracking a try, because it is the prettiest of the bunch. And there's a whole bunch of these Man, these things go all out. - -76 -00:51:26,850 --> 00:51:51,840 -Wes Bos: GitHub desktop is super good. I use that for a while. And we also use that when we're we're teaching. Because it's super easy for beginners to just visualize what's going on. There's a sync button as long as if I could remember. Because like, pull and push and all that it's kind of hard. But if you just press a single, it'll ask you for a general to the internet. Yeah, check that one out as well. - -77 -00:51:52,050 --> 00:52:23,100 -Scott Tolinski: These are all cool. I'm gonna I'm going to try to give some of these a try. And if you type in get into vs codes, extensions, there's just about a gazillion of them. So there is a lot of options out there. For people who are visual workers. I personally would say hey, if you are the type of person who really likes a good at GE why still try to try the command line because the command line is where it's at. For this stuff. I really think that you'll want to deal you'll want to spend the time to learn the command line stuff. - -78 -00:52:23,370 --> 00:52:40,620 -Wes Bos: Oh, the one command I forgot is git status that if you want to like know, where am I at any given time, git status that will tell you like, what's changed and whatnot? I always just use the goi in VS code for that personally Oh, cuz it'll tell you what has changed and well yeah, - -79 -00:52:40,620 --> 00:52:56,820 -Scott Tolinski: cool, but I think that's a good one because that that is crucial to understanding what exactly has happened here. Cool, so that is it for get Do you have any additional anything or should we hop into sick pics? - -80 -00:52:56,850 --> 00:52:59,190 -Wes Bos: Let's hop into some sick pics. - -81 -00:52:59,310 --> 00:53:10,080 -Scott Tolinski: Cool sick big swell sick pics are the section of this show where we get to talk about things that we find to be sick. Do you have any sick pics that you are just dying to talk about? - -82 -00:53:10,230 --> 00:53:39,420 -Wes Bos: I do and I sick pick this this is another one of my sick follow ups. I don't know maybe like two years ago, I sick pick my Yeti Rambler or whatever it's called. It's like a it's a mug a coffee mug with a nice handle made by Yeti and whenever anyone buys anything Yeti people always roll our eyes because it's super expensive and it seems unnecessary given that the alternatives are often a third of the price. - -83 -00:53:39,660 --> 00:53:41,640 -Scott Tolinski: The culture is kind of bro a to them right yeah, - -84 -00:53:41,940 --> 00:54:57,600 -Wes Bos: yeah, the there's quite a bit there's actually there's this the Instagram called I won't say it because there's kids listening but sh i ti and it's like get the SEC badge that you can get for your crappy Coleman cooler and slap it on it looks like a Yeti. No, that's fine. Their cups are like double wall stainless and they keep your drink hot for for absolutely ever. And that's not like you can go to Target and this is 100 of these things like sucking air out of two stainless steel things is not new. But I was just looking at our entire cupboard of these cups. And every single one the Ozark Trail ones the ones that I got out of conference, the whatever like the knockoff ones that you get, all of them are peeling and faded and the paint on them just doesn't hold up at all. And I put them all in the dishwasher because I don't have time to hand wash it. And the Yeti one is the only one that looks almost brand new aside for a couple scrapes that I've had just from dropping it and whatnot. So I'm going to go out on a limb and the coolers might not be worth your money versus the knockoffs but the the drink word absolutely is. - -85 -00:54:57,600 --> 00:54:59,250 -Scott Tolinski: That's pretty sick. - -86 -00:54:59,370 --> 00:55:01,470 -Wes Bos: Yeah Yeah, cool. - -87 -00:55:01,470 --> 00:56:59,400 -Scott Tolinski: My sick pick is going to be a podcast. I love me some podcasts. I'm a big, big fan. This is a podcast for music fans. And I'm gonna have a lot of podcasts picks here. So if you're not a music fan, don't worry. I'll catch you next week. So this podcast is I've been I've been discovering a lot is called what had happened was, and it is featuring the legendary Prince Paul, along with open Mike Eagle. And if you're into music of any kind, this is a really, really fascinating podcast, because if you've never heard of Prince Paul, he's a famous rap producer. But he's been around for a long time and been a part of some very, very, very influential projects. And even is like crossed over not necessarily crossed over. But he like really, or he really took that like the sample based music to a place that it hasn't been. He's extremely influential from all of the de la solo albums, he won some Grammys doing the Chris Rock albums. And he's done so many so many great thing handsome boy modeling school was like a really huge project with a bunch of mainstream rock artists and a whole bunch of cool stuff. But this podcast is called what it had, what had happened was and it's each one is like sort of an hour or so on different moments in music history of some of the biggest, most influential albums that existed in Prince Paul is just like the most humble down to earth guy, the personalities really make this podcast because he can talk about these events. And he just seems so grounded and normal and humble and whatever, into the point where it's like, it's absolutely fascinating to hear somebody who who has like, originated so many different things. Just be like, Oh, yeah, that was just sort of my style. So I was just doing like this and do like this. And these, these do, we did this and we just wouldn't tried this. It was just it's very fascinating look into the music industry. He has a lot of thoughts on so I had what what had happened was my new favorite podcast, and it's like a limited one kind of thing. So I think there's only gonna be 10 episodes. so shameless plugs, what do you have for me, - -88 -00:56:59,669 --> 00:57:25,860 -Wes Bos: I'm going to shamelessly plug either my current or upcoming course. There. gatsby.com is going to be my next course which is learning react Gatsby, we do all the CSS in it, which a lot of people have been asking for for a while. serverless functions, lots of custom react hooks, things like that. It's a really fun one. I'm really excited about it. I'm pretty proud. So check it out, Master gatsby.com. Cool, - -89 -00:57:25,860 --> 00:58:02,130 -Scott Tolinski: I'm gonna shamelessly plug my latest course which is going to be react 101 essentially, it's going to be react for everybody but it's going to be brand new from the ground up for 2020 and beyond. For as far beyond as possible. We're going to be doing a hooks first approach. We're going to be teaching react to brand new people. So if you are interested in learning react from me, this will be like my fifth time doing a react basics course. I'm very excited. I have a lot of material and a lot to say about the basics of react head on over to level up tutorials.com forward slash pro sign up for the year save 25% - -90 -00:58:02,369 --> 00:58:05,700 -Wes Bos: beautiful I still appreciate you not calling it rack for beginners. - -91 -00:58:06,509 --> 00:58:16,830 -Scott Tolinski: Yes, yes, that is yes. That is the story of how Wes and I met react react for everybody. That's my brand. Now when anybody stamps on the everybody brand, I'm gonna be like grumble about it. - -92 -00:58:18,510 --> 00:58:24,630 -Wes Bos: Awesome. All right. I think that's it. Thanks so much for tuning in and we'll catch you on Monday. Please - -93 -00:58:26,490 --> 00:58:27,300 -Unknown: head on over to syntax.fm - -94 -00:58:27,300 --> 00:58:36,270 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax287.srt b/transcripts/Syntax287.srt deleted file mode 100644 index 507e9aa18..000000000 --- a/transcripts/Syntax287.srt +++ /dev/null @@ -1,152 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos, and Scott Taylor. Totally in ski, - -2 -00:00:25,950 --> 00:01:00,000 -Scott Tolinski: oh, come to syntax in this Monday hasty, we're going to be talking all about records and tuples in JavaScript, and what they are, why you might need to know about them and what their status is because they're coming. And they're going to be really, really cool allow us to do some stuff that we've wanted to do in JavaScript for a long time, and really will help some of those situations where you want data to be the same thing all the time. So my name is Scott solinsky. I'm a full stack developer from Denver, Colorado, and with me, as always, is D. Wes Bos. - -3 -00:01:00,060 --> 00:01:00,720 -Wes Bos: Hey, everybody. - -4 -00:01:00,750 --> 00:01:33,750 -Scott Tolinski: Hey, Wes. And this episode is sponsored by log rocket to know you're gonna want to check out log rocket, because it's one of those services that is just totally cool. And it's totally different than what you're used to. And you can head over to log rocket.com forward slash syntax to check it out. Now, what is this? Well, lock rocket is an error and Exception Handling service that lets you see the errors and bugs happen in real time. It's so fantastic. You know what I would love log rocket for I would love log rocket to keep track of the knobs and dials on my audio compressor, because my kids always come in here and change it. - -5 -00:01:34,140 --> 00:01:35,280 -Wes Bos: They always change it. - -6 -00:01:35,540 --> 00:02:15,950 -Scott Tolinski: And what I what would I kill to have a scrubbable replay video to show me exactly what's happening as those kids are turning those knobs. And that's what you get with a log rocket. It's a video replay of the errors and bugs happening including the network store, the Redux store, works with all of your stuff you know, and love. And it is just one of these fantastic tools that will really eliminate bugs for you. So check it out log record.com forward slash index. All right, records in tuples, or records. Now let's start with the first and foremost thing about this topic, which is a big big thing, which is immutability, which is a big scary word. Do you want to talk about immutability? - -7 -00:02:16,160 --> 00:02:20,330 -Wes Bos: Yeah, all of these words are scary things records tuple. - -8 -00:02:20,330 --> 00:02:27,710 -Scott Tolinski: Yes, he's just that these sound like programming topic. might as well throw mon ads. And yeah, Scott, this is a scary angle. It's sick. - -9 -00:02:27,980 --> 00:04:40,880 -Wes Bos: It's, it's funny, like even sometimes I see these like tuples. I'm like, Oh, what's that? And then I didn't even know what it was when Scott made it. And I just did a quick little reading. I was like, This is awesome. It's just objects in arrays. So don't turn us off because it's gonna be good. So Scott said, let's start off with immutability. immutability means when you have some data, whether that's an array or an object, or a variable that is a Boolean, or any of the different types that we have, it means that you cannot change them. Meaning that you can, if you have an array that is immutable, you can't just add an item to an array. And generally the way around that is that you just create a new version of that. So if you ever do need the original piece, you're not accidentally just adding and removing things. And that can mutability is the opposite of that the ability to mutate data can sometimes get you into hot water, where you accidentally remove something when you didn't think it was like probably the most popular one is I think, is it pop is pop mutable. Yeah. Like if you pop an item off the end of an array, you're just sometimes people use that because they just want to get the last item of the array really quickly. And rather than doing the whole array dot length minus one to reference it, they just pop it. And what you might not have known is that you actually took that out of the original array, and then that can lead to confusion down the road. So that's my short and sweet of what immutability is and why it's important. It is people always talk, you hear a lot of developers talk about immutability, and you might not get it. But once you start having your like data, assume that it doesn't change, and you then have to then create something new anytime you're making any modifications for it. That was just a huge breakthrough for me in code in general, it made me write better JavaScript. So I once I embraced immutability, I really, really loved it. Now the bummer about immutability, as we've talked about before, or at least in JavaScript currently, is okay, you could define a const string, write a const string of text, and then you go to change that string doesn't let you do it. Now let's say we have an object and it's a constant object. And you go to add something to that object. Unless you do it. It will Yeah. - -10 -00:04:41,940 --> 00:06:18,990 -Scott Tolinski: And there's like this weird sort of thing where objects are essentially they're tied to their identity of this thing, right? It's this this object, right? But not their data. The data inside of an object doesn't necessarily determine whether or not it's the same thing. There's there's some weird stuff right? Round two objects there. And so records and tuples are going to help us relieve some of that pain in all sorts of ways. So let's first talk about records and then go into tuples. And then we're going to talk about all of the things that they do because they're very similar. And the only real difference is that a tuple is an array. So a record is you could think of a record as a immutable object, right? Hey, we have object now we have an immutable odd Well, not yet. But we have, we could have an immutable object. And the syntax as proposed is just a pound, and then the normal object syntax, and that point to the object is a record. And all of the things you know and love, like object dot property, whatever you have in your object are going to work the exact same. So by all means, this is extremely similar to just defining an object, you just put a pound sign in front of the brackets. Now, likewise, tuples are the same thing. But for arrays, and immutable array is going to be a tuple. And the syntax for that is the exact same, where you just put a pound sign in front of the normal array brackets. So these things are really simple to get up and running with if you're already using arrays or objects. The only difference is, is that they are immutable. - -11 -00:06:19,650 --> 00:07:04,470 -Wes Bos: One question I had immediately when I when you start talking about something like how is that different than object dot freeze, because right now object freeze, if you wrap an object in that, I think it will return a new immutable version of that object. And that's kind of the same idea as this, right? But the object dot freeze does not go deep. Same with like copying an object, it does not do a deep copy, it just does the first level. So if you have an object within an object, the nested object will not be copied, it will, it will only be a reference to the original one. Same with freezing, it will, it will still you'll still be able to modify the nested object, which kind of defeats the whole purpose, immutability. Yeah, right. - -12 -00:07:04,680 --> 00:07:05,220 -Yeah, that's, - -13 -00:07:05,220 --> 00:07:06,570 -it looks like this is doing it properly. - -14 -00:07:06,570 --> 00:07:55,440 -Scott Tolinski: That's the whole thing with the current Java, that's like some people's complaints about the const variables that it's not totally constant. Yeah, okay. Well, this will help alleviate some of that pain is something that you said there was really important, it's not just immutable, it's deeply immutable. It's deeply in all these things. So basically, they're calling this a compound primitive. And it can only contain other primitives. It cannot contain objects. So what are other primitives? Well, string number, those types of things, right. And it can also since these records in tuples, are compound permitted, if it can contain other records and tuples. So you can have records and tuples nested with inside of each other, just by specifying that with the pound sign. - -15 -00:07:55,560 --> 00:07:56,310 -Wes Bos: Wait, hold on, let - -16 -00:07:56,310 --> 00:08:15,750 -me let me go through that. Again, you just said it can't be nested, but it can be nested. So can you only primitives can be nested? So an object cannot be nested, but a tuple? Or a record? Because a tuple? No record are a type of thing they're calling a compound primitive, not a object. - -17 -00:08:16,169 --> 00:08:29,940 -Okay. Okay. Makes sense. So our records in tuple is going to be a new type, like number, or are they just going to be just something that we have, because like when we got symbol, that was a new type, but when we got maps - -18 -00:08:29,940 --> 00:09:01,230 -Scott Tolinski: and sets that was not a new, so they are defining this as a new type. Okay, so here's the thing values, which will act. So I'm reading from the proposal itself, values, which act like other JavaScript primitives that are composed of other constituent values. This document proposes the first two compound primitive types, which are record in tuple. Alongside the simple primitive types of string number, Boolean, undefined, no symbol and big hint, notice how object is not there. Does that make sense? - -19 -00:09:01,470 --> 00:09:11,070 -Wes Bos: Yes, absolutely. This is this is so cool. I'm so excited about this. It's one of those things like, I feel like I've got a pretty good ear to the ground with what's going on with JavaScript. I had no idea that this was - -20 -00:09:11,250 --> 00:11:03,270 -Scott Tolinski: proposed. Yeah, this is my favorite proposal currently, because I would love to use some of this stuff. And he Okay, if none of these features so far sound like a killer feature to you or anything like that. You might be thinking, Okay, this is fine, whatever. Let me blow your mind with what could be the killer feature of these things is that they are comparable deeply. They're deeply comparable. Right? Now, if you create two separate objects, the object just simply has a name name property is equal to Wes. And then the other one named property is equal to Wes. Those are the same exact data structures within those objects. And you say, is object A equals object B? No, they're not. Because in typical objects, what it's doing is it's comparing them by their identity, not by the contents of them with records and tuples. You will be able to use the The triple equals two simply compare them deeply. That is, if you had a record that was an A record record, that was just one property of name, Wes, and then another record that was defined separately with a property of name West and you compare them, the result would be true. That is so dang cool for people who have been wanting to do this for a long time. So even the coolest part is it works for the tuples as well. So if you have an array with the exact same contents in it as another array with the exact same constants, if they are both tuples, they will compare to be equal to true, if they are raised, they will compare it to be equal to false. So this is so exciting to me, I think this is a killer use cases, this is got like the stuff that we would love to do written all over it. I think we had a pilot question on this, where we talked about different solutions for this. And I think that the solution was to use lodash. And essentially, essentially, like recursively go through the tree to compare the values of everything, I forget what it was because converting it out to a JSON string wouldn't work. - -21 -00:11:03,540 --> 00:11:30,870 -Wes Bos: Yeah, there's not a good solution other than bringing in additional library. And even then, if it's 40 levels deep of an object, then that gets really expensive to do that. That's cool that this is gonna be doable. I was just looking at the GitHub, it looks like they have a little playground where you can actually try some of this code out. Because there's already a polyfill. I know this is a new syntax. So yeah, can't be polyfilled. It's more of a transpile. Right, like something like Babel? - -22 -00:11:30,870 --> 00:11:35,970 -Scott Tolinski: It's a great question. Yeah, I would imagine you would think, yeah, you'd have to transpile it - -23 -00:11:36,000 --> 00:11:48,840 -Wes Bos: that's in maps could be polyfilled. Because it's a it's not syntax, it's just new capital S SCT. But this is literally new syntax where you put a pound in front of your objects and arrays to make them a record or a tuple. - -24 -00:11:48,870 --> 00:12:43,620 -Scott Tolinski: Yeah. And so some other little things here are that they're saying that there's some potential for optimizations in terms of how the browser's do equality checks, manipulating data structures, all these things should be able to be done faster because of how these things are kept track of, again, these are potential optimizations, that assured optimizations. Next is going to work really well with TypeScript, or any of your type systems, it also is going to work better than with your debugger than using an external library. So if you're using an external library to do this, like him or something like that, this is going to play much nicer with the debugger. And lastly, again, as I mentioned, the coolest thing is that they're basically functioning just like objects with slightly different functionality. So that that way, you don't have to learn Mr. Richie. Yeah, you don't have to learn any weird new techniques or whatever, API's or anything, just put a pound in front of it. Yeah. And then you do object dot property. And it works. - -25 -00:12:43,740 --> 00:13:36,630 -Wes Bos: Yet, it's funny that there is no API because you literally cannot do anything with them. Yeah, right. Add stuff, you can't take stuff out, you just reference either the properties like an object or you reference the indexes, like with the square bracket notation, the only new API that I did see on this proposal is convert a object or an array to a record or a tuple, with the record in tuple dot from methods. And then there's also a new method on JSON, which will allow you to parse so if you've got JSON coming in, and you want to parse it into a record or a tuple, instead of a, an object or an array there is there's a proposal for JSON parse immutable, which is interesting, because maps and sets don't have any support for JSON right now. So but it's interesting that they are going I guess this is much more closer to arrays and objects, then. - -26 -00:13:37,080 --> 00:13:57,840 -Scott Tolinski: Yeah. So this is at currently in the proposal stage, it is that of the TC 39 process. It is currently at stage two. Now there are five stages, stages zero, which is like nothing really, I don't even know why this thing says, Have you ever even heard of stage there? I have not? - -27 -00:13:58,140 --> 00:14:04,800 -Wes Bos: Yes, stage zeroes in that's just somebody throwing their hat into the ring, we need to do a show on how to stuff get added to JavaScript. Yes, - -28 -00:14:04,800 --> 00:15:07,860 -Scott Tolinski: we did it for CSS, and I was super good. I don't know very much about it. So this is in stage two, which is the draft stage, which is basically where they're going to precisely define the syntax and semantics used for the formal spec saying like, Alright, let's we got this little strawberry. Now let's do a little chocolate suit on that strawberry. Let's dress it up. Let's make it ready to go to the ball here, getting us ready to go. And it basically everybody starts weighing in on it, where people start developing the actual things that make its way into the standard. And then after that, it will move into a stage three as a candidate or implementation and then a finished once it's in the browsers. So stage two, it doesn't look like it's going to be in browser browser world super soon, but I like to if something's that stage three, that means it's like really moving along. And at that point, stage three, I feel comfortable adding it to my programs with a Babel plugin or something like that. How do you feel about the different stages and when you can start to use something, - -29 -00:15:08,340 --> 00:16:15,900 -Wes Bos: I'll usually wait for it to be a little further along just because I've been burned in the past. But for something like the nested equality, I just like sometimes you just look at a proposal and then you say, there's no way that's not going to be added. Because that is so needed. And even though there all the caveats of this might change, definitely some of those I'll throw in earlier just to, to get them so optional chaining. Yeah, yeah, probably wait for it to gain a little bit more momentum. And also, like, when these things become more popular, then you start to see a lot of like, really neat use cases for them little tips and tricks you can use them for, and then they become a lot more like, Okay, this is starting to become that's like, um, what was it backticks like, when when backticks first came out, obviously, you can interpolate data, but the tagged template literals. When that first came out, everyone's like, cool, but like, no one could think of a good idea. I remember like going high and low looking for ideas. And now today, there's probably five or six really good use cases of it. So you gotta wait. Let people sort of chew on it for a bit. Yeah, - -30 -00:16:15,900 --> 00:16:16,920 -Announcer: yeah, - -31 -00:16:16,920 --> 00:16:19,680 -Scott Tolinski: we all need some time to masticate here. - -32 -00:16:22,800 --> 00:16:24,780 -Wes Bos: All right. Anything else to add to this? - -33 -00:16:24,800 --> 00:16:26,130 -Scott Tolinski: Ah, no, I - -34 -00:16:26,130 --> 00:16:30,720 -don't I don't have nothing else. This is very exciting. I'm into it. And I hope it moves along. - -35 -00:16:30,959 --> 00:16:52,980 -Wes Bos: Awesome. I'm glad you brought this up. It's funny, we, I had thought of a show on doing talking about what enums are. I thought that was Scott's idea. And I just started doing the show notes and Scott's like, Oh, no, this is not what I was thinking of. So we just got this whole entire show out of out of that. So I think next Monday, we'll do another show on what enums are in graph. qL, TypeScript and maybe JavaScript. - -36 -00:16:53,130 --> 00:16:53,760 -Scott Tolinski: Yeah, - -37 -00:16:54,150 --> 00:16:59,070 -Wes Bos: let's do it. Beautiful. All right. Thanks for tuning in. Catch you on Wednesday, Bs, eight. - -38 -00:17:00,900 --> 00:17:10,650 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax288.srt b/transcripts/Syntax288.srt deleted file mode 100644 index 6852df640..000000000 --- a/transcripts/Syntax288.srt +++ /dev/null @@ -1,528 +0,0 @@ -1 -00:00:01,319 --> 00:00:06,120 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. - -2 -00:00:06,149 --> 00:00:10,530 -strap yourself in and get ready. Here is Scott Lansky and Wes Bos. - -3 -00:00:10,559 --> 00:00:50,040 -Wes Bos: Welcome to syntax. This is the podcast that has the development treats that are the tastiest, we measured them all every podcasts out there, and we have the tastiest web development treats. Thank you for tuning in. Today, we've got a part two of our Tales from web dev pass people love the last one that we did, basically just talking about tack that was so hot 1015 years ago, and why we had it and what we had to do and what we have now and instead of it and sort of why I got killed off or died or, or became less popular with me as always is Mr. Scott to linsky. How you doing today, Scott? - -4 -00:00:50,489 --> 00:01:21,120 -Scott Tolinski: Hey, yo, I'm doing good. Just just hanging out. Trying to record my next course i'm recording my react beginners course, which was just, I mean, the course was in was an old but it was, you know, built to be classes first and all this stuff. And there's been so many changes in react. So I'm recording it to be hooks first. But I'm also really looking at like the types of things and teaching in the order and everything like that. And I'm awesome. I'm very into it. Yeah, just having a good time having a good time recording, which is way we want to be you know, - -5 -00:01:21,389 --> 00:02:20,580 -Wes Bos: that's funny, I'm looking at, I'm redoing my react for beginners course right now as well or not now, but it's coming up. It's on the slate to be recorded. And I'm like, I don't want to, obviously is going to be hooks and classes first. But I also need to keep a lot of that class stuff in not a lot of it, but enough that you can teach people classes because right, I went into an app that was next jass. And it was version two. And I think the most recent version is eight. And I could not for the life of me figure find any docs on for 2.0. And I had no idea how to use the things I had an entire thing. And I was like oh man like this is probably what people run into all the time, where the thing has been sitting for a year and a half and all sudden, none of the docs none of the tutorials cover any of the stuff and you don't really know what these lifecycle methods are. So that stuff's kind of important, especially in real world where stuff's not updated every three minutes. And - -6 -00:02:20,969 --> 00:02:35,490 -Scott Tolinski: the good news for me is that like, because my course platform allows for it, I can just keep the old one. So the old one is classes first. And what I can say is, hey, if you want to learn classes, just go watch this other run. It's the same stuff, just with classes. Beautiful. - -7 -00:02:35,549 --> 00:02:56,789 -Wes Bos: So today, we are sponsored by two awesome companies. First one is Sanity, which is a structured content, CMS and second one is Prismic. Which a headless CMS kind of in the same space, we will note that certainly I want to check them both out. I will talk about them partway through the episode. Cool when did past. - -8 -00:02:56,789 --> 00:03:36,930 -Scott Tolinski: These are a lot of fun things is in effect this first one which is iframes iframe still exist, obviously. And we still use them to embed things. But if you weren't around at this time, you really don't know just how everywhere iframes were an iframe being your own stuff in your own site was just so common. It was like the technique, especially for add headers, and sidebars, you'd have a sidebar navigation. That was an iframe or a top that was iframe, and it was your navigation or your web ring or something like that. I use this technique 24 seven, like absolutely 24 I love this technique. - -9 -00:03:37,259 --> 00:04:40,800 -Wes Bos: Yeah, if you've never built an entire website and iframes the way that it worked is that you had like like Scott said, you had a header dot html, you had a sidebar dot html. And then every single page that you had didn't include a header or sidebar, it just included the actual content for that, and you would just iframe it in. And then when you click together, your website's very funny. It's very much like components today, you give a name to your like content, then when you click on a link, you give it a target so that when you click on the link that target you know, like Target equals underscore blank or whatever people think that's the only thing you can set a target to be any any name of any iframe, and it will not open in the current iframe, it will open in another iframe on the page that matches that name, which was, which is unbelievable. And I still remember learning PHP for the first time. And somebody showed me the like, include header dot html, and I was blown away. That could include it because what we did before then is if you didn't use iframes, you just copy pasted the HTML over and over again, that was the whole thing. You had like six - -10 -00:04:40,800 --> 00:04:50,370 -Scott Tolinski: pages. You had a header, you made a change to the header, you selected the header you copied and pasted in all the other pages, and then sometimes you forgot, and then the header was wrong on one page, or, - -11 -00:04:50,969 --> 00:05:08,550 -Wes Bos: you know, the bummer of that is that there was no like URLs. Well, you I guess you could have have URLs but the way that most people used it as they just have Look at.com. And they just dynamically switched out the content of the content iframe, which is funny because it was like the original no reload. - -12 -00:05:10,170 --> 00:05:41,550 -Scott Tolinski: But you know what people didn't think about at the time nobody thought of, and nobody needed to think about was SEO, because Google wasn't around. So there wasn't this algorithm, and everybody relied on keywords for your search. And even then, I don't like beyond, like, in the personal personal capacity, I don't know how much like thought was ever put into, oh, people gotta find this thing. These people didn't find these things through Google, they found them through web rings, or related links, or whatever. So it was a it was a different world with iframes. - -13 -00:05:42,179 --> 00:07:11,940 -Wes Bos: Next up, we have here is JavaScript image hovers. So before, we had CSS, hover states, and I guess even I don't even know when we got CSS hover states, but when you had Dreamweaver, you'd have this mm underscore image hover, where you would hover over like a link, and that link would not be taxed, it would be like a about dot GIF. And then you would hover over top of it. And it would literally replace the source of that image with like, underscore have GIF. Yeah. And that would be like, like you some people do this manually. But mostly what would happen is you would design it in Photoshop, you would use I think it was image ready? Was that what it was image ready, would x export all of the hover styles for you. So it would happen automatically, where you'd have a slice, like you'd slice up your website, you pop an iframe into where you wanted the text to go. And then all of your entire navigation was and I actually did, if you just go to my YouTube channel, I did, I found a website that was still generated from image from Dreamweaver, like 20 years ago. And I like, and now that I know JavaScript, I took the whole thing apart and looked at the code behind how the image hover worked. And it was kind of fun, because it's like looking at this nostalgic JavaScript. That was magic to me. And now I actually know JavaScript. And I was like, Oh, it's just replacing the source. And it was like caching them in an object. So it's pretty neat. Yeah, I - -14 -00:07:11,940 --> 00:08:24,000 -Scott Tolinski: have all of my old work. So I like really what I should go through some of that stuff, I'm sure it's amazing in terms of like, what it's doing and how bad the code is, and whatever, but I gotta get on, I gotta get on that and check some of that out. And along the same lines, I know you talked a little bit about this, but that the one of the main techniques for designing and building websites was to design the entire thing in Photoshop, right, you design the entire thing, drop shadows, sidebars, effects, whatever in Photoshop, then you'd use the slice tool, which shout out to anyone still using using the slice tool, because everything is so vector based right now. But you'd use the slice tool to segment up your website into different sections, then you'd export all of the images, you'd put them in a folder, and you fire up the background image on all of those images, so that your website actually looked cool, rather than just being basic shapes and colors, because that was the only way to get drop shadows or textures or any of that stuff. So you would just slice like crazy. And I remember throwing, like just hundreds of images, just laced up background images, whatever. And that was just the technique. That's just what people did. - -15 -00:08:24,420 --> 00:09:13,380 -Wes Bos: Next one we have here is CSS pie. This, we talked about this with the transparent one in the last episodes very similar to that where it was iecex didn't have transparent GIFs. And CSS py sort of took CSS three features border radius, box shadow linear gradients. And that's it. And it used this like weird, Internet Explorer specific language called HTC files very similar to JavaScript. And it would literally like kind of just polyfill them in. ie was like way ahead of its time. It was not standard or anything like that. But it allowed us to do things that were part of CSS three and backport them to iE 6789, which was key when some of the CSS three stuff was starting to come out. - -16 -00:09:13,890 --> 00:09:21,840 -Scott Tolinski: I use this pipe into admission of buying and we used it. I remember the site, I looked at it. I don't remember, I don't think - -17 -00:09:22,740 --> 00:09:41,610 -Wes Bos: there was like a CSS gradient website that would gender wise. Yeah, the gradient tax. It would also give you the like, ie specific alpha, whatever. So you probably used it and around about way, but CSS pie, sort of just put it all into one little library. Yeah, one little thing. - -18 -00:09:41,820 --> 00:09:51,750 -Scott Tolinski: Next one is, this is funny because you have another one here, but I'm gonna skip skip for his animated GIFs of people in construction. - -19 -00:09:51,750 --> 00:09:53,039 -Wes Bos: What was that site - -20 -00:09:53,039 --> 00:10:44,520 -Scott Tolinski: that had all of the animated GIFs there was one site that had thousands and thousands and thousands of animated GIFs And I used to love that there would be like the little 3d people that were just like poorly 3d animated, and they'd be chopping away or with a jackhammer construction made, you just put it all over it, it says, like under construction. And it's funny I, one of my libraries that I was writing the fresh forms library wrote a forms library for react. And it's definitely usable. But when it was like super experimental, still in the early sign, I couldn't find any of those gifts. So I just on the GitHub page wrote construction dot GIF in there, because it's like, that's just like what you did anytime anything was under development whatsoever. You put a little construction guy on there, and yeah, this really great 3d. I wish I could remember what that site was. But - -21 -00:10:44,539 --> 00:10:52,549 -Wes Bos: there was sharkey.com, I think was one. That was Yep. But yeah, there was tons of them at the time. - -22 -00:10:52,909 --> 00:11:19,799 -Scott Tolinski: Yeah, there was when I was in high school, I took a web development class, which is funny to think about, that was my wasn't my introduction to HTML. But it was like, here's the HTML basics. And that's what they taught you how to make an HTML page and link and whatever. And so I, I like, filled my site with animated GIFs from that site, because I think they even I think they even taught us how to use that site in, in the class, - -23 -00:11:20,309 --> 00:12:21,240 -Wes Bos: I'm gonna loop the next two in as the same thing, just because they're both related to old IE, Oh, God, the first one is the zoom property, where you just have zoom one on a lot of your stuff, you have no idea what that was for, I didn't even know what it was for, until I looked into it now. And it's when you have floats and layouts. Sometimes I would just choke and the whole layout would be all goofed up. So by putting zoom one on that stuff, it would just magically fix it in IE, yes. And then along with that, just fix it targeting, ie, in IE six in CSS. If you put a star in front of your like, in the one in front of your properties, like color, or anything, it would target IE six and IE seven, or have you put an underscore in front of one of your properties, it would only target iecex I use that a lot because I would do the whole website and then crack it open and iecex. And then you just go around adding additional properties just for iecex. With the underscore in front of it. - -24 -00:12:22,049 --> 00:13:19,020 -Scott Tolinski: I was so unaware of browser compatibility stuff at that era. Like when I first started, I designed and built things for hilariously enough like IE seven oblivious that it would look terrible in IE six, and then somebody was like, Yo, I opened up your website looks really bad. He talking about and it looks great. Only that's like my first experience with understanding that there is IE problems there. Another thing is funny that around the same regard, like image sizes, like I was not aware of image sizes being a thing. And so I used to load up these huge image sizes. And I had a friend of my brother, my brother's a couple years older than me and a friend of my brother, who had a little bit understanding about this. He's like, yo, here's what you got to do. You go to Dreamweaver, you click on the image, and then you click optimize. Do you remember that button? Yeah, yeah, hey, like it re it just remade the image so that it was the actual size we're using, rather than the thousands of pixel version that you are loading up unknowingly? - -25 -00:13:19,320 --> 00:13:54,419 -Wes Bos: Yeah, that that was the best and when we could do that, because before then, like, a lot of people didn't even have like image editing software, or batch workflow yet. 5060 images. Luckily, like my digital camera at the time, I would put what pictures of my friends on my website, the images are so small coming off the digital camera that it It never mattered. What else we have here, just layout Gen trends in general, like, do you remember websites? You we used to be like 800 by 600? Like you would specify the height of your image or your website, and then you would just add a scroll to the content area? - -26 -00:13:54,419 --> 00:13:55,649 -Unknown: I don't know why. - -27 -00:13:57,960 --> 00:13:59,340 -Wes Bos: Didn't scroll before then - -28 -00:13:59,610 --> 00:14:00,480 -Scott Tolinski: iframes. Man, I - -29 -00:14:00,480 --> 00:14:02,700 -Unknown: just, we just threw everything at iframe. - -30 -00:14:04,200 --> 00:14:57,179 -Scott Tolinski: I remember like when grid systems got hot. Yeah, 960 gs was the one that was probably in some of those like a list apart articles about like, I remember the golden grid, I 960. Gs, the 12 called grids. There was so many and then it went crazy. And there was like 24 call grids. Shout out to this theme back in the day for Drupal called omega. This is built primarily on the grid system. And it was really nice to us in that in that kind of CMS environment. So shout out to omega that was one of my favorite themes back in the Drupal days. But this 960 grid, this was such a thing, even to the point where one of my first money making ideas was like, here's here's my money making idea. I'm gonna make a notepad paper. That's just the 960 grid, but like sure enough, like that already existed. Like I like game over that I was like, Oh, this is gonna be so good, because then you can sketch a site on the 960 grid. - -31 -00:14:57,630 --> 00:15:04,529 -Wes Bos: Yeah, that was the thing with nine six See it came with a PDF, I think yes, that's what you printed out. - -32 -00:15:04,770 --> 00:15:17,640 -Scott Tolinski: I thought I made that up. And I did not. The 960 grid was 960 pixels wide. And it was what like eight columns 12 with 12 columns with some grid with some gap and btn 20 pX - -33 -00:15:17,640 --> 00:15:50,760 -Wes Bos: in between each one. And there was some like magic math where you could do combos of every single con like 333 columns, no, that would be 9243 columns, or three, four columns, and everything added up, and there was this bookmarklet that you clicked, and it would overlay these red bars on top of your website. And you would just look at these websites. And there would be no text or images or anything that would be outside of in the gutters of these things. You're just like, Oh, I remember that. That was so good. - -34 -00:15:51,539 --> 00:16:25,110 -Scott Tolinski: Yeah, that was very good. I really like that. And I remember like our designers, like when they when they got a hold of the 960 grid, we're just like, throw it all on the grid and never think about it. And this was before responsive. So it didn't it wasn't responsive, it didn't have and once these things turned to responsive, that was like the big, big deal. I remember the very first responsive site our agency did, it was for a local restaurant. And their menu was responsive. And I remember just like being in awe of the work that my my coworker did just been like, dang, this is Yeah, this is really cool. - -35 -00:16:25,620 --> 00:17:08,760 -Wes Bos: Next, we have sprite maps. Yes, you're popular. So if you've had like a bunch of buttons or something like that, and those buttons like like the big one was you'd have like a Twitter button. Even I am icon. That's what I'm looking for Twitter icon, Facebook icon, buy it now custom button that couldn't be done in CSS, what you would do is you would export all of those two individual PNGs and Jake Archibald made this website called sprite cow. And he would just drag and drop all of your images up to sprite cow, and it would kick out which is crazy to me like the thing like all of the work that went into sprite cow all those years ago, like that was cutting edge tech. - -36 -00:17:09,630 --> 00:17:10,920 -Scott Tolinski: Like it was so good. - -37 -00:17:11,189 --> 00:17:36,750 -Wes Bos: And then it would give you all the CSS classes. And the idea was that you would put a background position on each of your icons and it would perfectly line up with where the icon was on the thing that was sort of killed. That was high res displays, because you couldn't take an icon and double it up or have it and it would just be pixelated on these high rez his iPhone I think was the first one that did that. - -38 -00:17:37,140 --> 00:17:44,810 -Scott Tolinski: You know what actually killed it first, but Well, well that killed it. But the technique that we used was icon fonts. - -39 -00:17:44,910 --> 00:17:46,820 -Wes Bos: Oh, yeah, like Font Awesome. I forgot about that. - -40 -00:17:46,820 --> 00:18:55,170 -Scott Tolinski: Yeah, Font Awesome showed up and all of a sudden is like you can just use a font and get access to tons of icons. And then you have to deal with images. You don't have to deal with sprite cow which by all means love sprite cow. But you didn't have to deal with any of that stuff. And you just got an icon font and, and I remember specifically it was working at one job in the designer gave me this design and it was these crappy as pixelated icons. And I was just thinking like, you have got to be kidding me. Like there are icon fonts and these are going to look terrible. So I replaced all the icons and then he got mad at me and I had to go in and be like listen, like you don't know what this is lucky you have your your checked out. You're just tossing in generic work every day. So like, yeah, you gotta you gotta get with it. And yeah, icon fonts, killed it. And then SVG icons killed icon fun. So here we are with SVG icons, and I'm all about it. Next up is Firebug and Firebug. Lite. So Firebug and Firebug. lite, were the old g dev tools. These were extensions, you could call them extensions. They were sort of weird, because I don't understand why they were they installed as normal extensions, because I don't remember that browser extensions, even though - -41 -00:18:55,290 --> 00:19:22,740 -Wes Bos: I don't I don't even know. No, it was a bookmarklet, which a bookmarklet was some JavaScript that you dragged into your your bar. And when you click it, the browser thought it was a URL, and it would just run some arbitrary JavaScript, which is a huge security issue. And what that arbitrary JavaScript would do is it would inject all of the JavaScript needed for having Dev Tools Firebug into your website, and that would just run. - -42 -00:19:23,190 --> 00:19:45,930 -Scott Tolinski: Well, I don't know why not. It was like the way of debugging. I mean, it was the way of debugging at the time, you didn't have the normal dev tools that you were used to. And now I remember like people talking about Firebug and I'm just being like, well, I can just, you know, save a file refresh and see if it worked. So that's good enough for me. Yeah, that was like really the alternative. Yeah. - -43 -00:19:46,680 --> 00:20:06,560 -Wes Bos: Yeah, there are no, we had no console log and we had no like Inspect Element before that. And then Firebug eventually got integrated into Firefox. Chrome Dev Tools came out with their own version. And then eventually Firefox came out with their own dev tools and Firebug was arrest. Yeah, - -44 -00:20:07,070 --> 00:20:12,750 -Scott Tolinski: yeah, but we Oh, we Oh Firebug I still remember that icon, I can see it. In my mind. So - -45 -00:20:12,750 --> 00:20:41,060 -Wes Bos: good. Next up we have here is image maps. Actually, I'm gonna, I'm gonna loop two things together image maps, and like background gradients. So image maps, or like just an actual image that you would give the pixel values of where links were. So if you wanted a circle link, you couldn't do that. Unless you were to use an image map, you'd overlay it on top of it, and you specify links to it. I might have even covered that one in the last episode. - -46 -00:20:41,330 --> 00:20:43,500 -Scott Tolinski: Yeah, we might have missed the Space Jam website. - -47 -00:20:43,550 --> 00:20:46,200 -Wes Bos: Yes, yes. Very, almost for the Unreal. So and - -48 -00:20:47,040 --> 00:20:48,750 -Scott Tolinski: two unrelated, I think, Okay, well, - -49 -00:20:48,750 --> 00:21:24,720 -Wes Bos: we'll talk about the other one, which was just like, repeating gradients. So if you wanted a background image on anything, you would have to do like a one pixel wide gradient by like, 2000 pixels high. And you just hoped that no one would ever make a div higher than 2000 pixels. Yes. Otherwise, it would it would start to repeat, or you would you would see it because we didn't have I don't think we had like background position. No, no text or contain. What else? really much later. Yeah, no. Cover. I - -50 -00:21:24,720 --> 00:21:26,280 -Scott Tolinski: remember when containing cover drop. - -51 -00:21:26,300 --> 00:21:29,550 -Wes Bos: Yeah. Like, for now six years ago? - -52 -00:21:29,910 --> 00:22:39,960 -Scott Tolinski: Yeah, yeah. And I mean, this was super useful technique. Because, you know, you make one pixel, whatever. And I was always really impressed to make a one pixel or even like, like you said, a one pixel wide, and whatever. 200 tall, there's also the opposite of that, where you do one pixel tall and a billion wide, and then repeat that up and down. And then you can get gradients that way, too. But there's also the the idea of having background images being such a huge thing, because there's no real way to to get a lot of separation of or interesting design without background images. So people did a lot of background, a lot of background position fixed because that that definitely existed containing covered did not but fixed did, you could have a fixed background, I remember the first time that there was like that I use personally an image that you could repeat x and y, you could repeat X and Y or just repeat one or the other. But when it actually made it seamless, rather than like for a long time, people were just using these textures that had like no seamless transitions. And then when they would repeat, you would see the actual horizontal and vertical line or segment. So it was like these like square repeated squares repeatedly in the background of the image that was like people started getting creative with their techniques. Yeah, - -53 -00:22:39,960 --> 00:23:02,520 -Wes Bos: squid fingers was the website that had those repeating patterns. Yeah, that was my like my go to and then this has been around for a long time. Subtle patterns, calm, subtle patterns. Yeah, still around. Like I tweeted it out the other day, and the original creator of it said like, oh, maybe it's it was bought by top towel, but they're still adding new patterns. - -54 -00:23:02,610 --> 00:23:07,470 -Scott Tolinski: Subtle patterns is still in my bookmarks. I just typed in s and it was like little patterns. - -55 -00:23:09,330 --> 00:23:16,860 -Wes Bos: It's still awesome resource. It's most of them are still let me see the most of them are still PNGs which bums me out. Let me open it up. - -56 -00:23:16,890 --> 00:23:19,230 -Scott Tolinski: I really relied on that site. That's for me. - -57 -00:23:19,320 --> 00:23:39,720 -Wes Bos: I just downloaded the latest one. Yes. Is there still PNGs which drives you crazy because clearly whoever made these pattern, built it in like a vector, and then they don't ship the SVG file. That's why I like Steve sugars, Hero patterns, because he gives you the SVG and you can go and modify the colors of that pattern. - -58 -00:23:40,110 --> 00:23:42,180 -Scott Tolinski: And a lot of them could be CSS today, you know? - -59 -00:23:42,450 --> 00:23:54,750 -Wes Bos: Yeah, you're right, actually, because laya voru came came out swinging with the CSS patterns website. Oh, yeah. Oh, yeah. Unreal, that you can make patterns with gradients. You know, what else is unreal, Scott? - -60 -00:23:54,750 --> 00:23:55,830 -Unknown: Oh, but - -61 -00:24:02,400 --> 00:24:03,990 -Wes Bos: you got a good transition. Okay. - -62 -00:24:04,830 --> 00:24:20,640 -Scott Tolinski: Okay, we're talking about geometric patterns in the sponsor. Which use that like prisms, and there's like, such a good connection there. I don't have a good transition ready, but I feel like it was sitting it was sitting right there. Like it was sitting there. You went with unreal. - -63 -00:24:22,650 --> 00:24:26,070 -Wes Bos: That's my only transition is you know, what else is blank? Yeah, - -64 -00:24:26,070 --> 00:24:27,570 -Scott Tolinski: that is Yeah. - -65 -00:24:28,620 --> 00:25:41,550 -Wes Bos: It's okay. So let's talk about our sponsor today, which is Prismic available@prismic.io. It's a headless CMS that basically the way that it works is you log in, you create your entire back end, you don't have to write any code. To get it up and running. You just create your types. You create your fields, you create relationships between them. It handles images and image resizing all for you talked about earlier, we're talking about resizing images, it works seamlessly inside of Prismic. And then you can have your your users or clients yourself, login out all of your content. And then on the other end you the developer gets an API REST API or a graph qL API most likely, or Gatsby plug in that will consume all of that data and throw it into your Gatsby graph. qL API. It's awesome. So next time, you need to build a website, and you need some sort of headless CMS, check out prismic.io forward slash, you're gonna want to go to this website forward slash syntax. And they have a hilarious landing page. That explains it, it gives you a bunch of starters. And then it also sort of pits Scott and me against each other as team view versus team react. - -66 -00:25:41,880 --> 00:25:42,930 -Unknown: It's great. It's - -67 -00:25:43,590 --> 00:25:47,760 -Wes Bos: prismic.io, four slash syntax. Thanks so much to Prismic for sponsoring this point, maybe - -68 -00:25:47,760 --> 00:25:48,990 -Scott Tolinski: I should be team spelt. - -69 -00:25:51,090 --> 00:25:53,430 -Wes Bos: Well, if the update that, okay, - -70 -00:25:53,460 --> 00:26:37,290 -Scott Tolinski: let's talk about web rings, so web rings, despite their name is not any sort of like a circular ring. Although it is kind of in theory, or concept. Web rings essentially, are your links that you would have two sites that you would want to connect to each other. So you would say web ring, these are like basically, my suggested sites that you visit, or a web ring itself is like sort of a grouping of sites that are all banded together in a ring to share each other's content in a way that's like, Oh, you want to learn more about web development? Well, here's the ultimate web development web ring, where you can click through several different sites that will teach you all these different things about about web development, all owned by different people, sort of the original MySpace, top eight, if you think about it, - -71 -00:26:37,470 --> 00:27:21,090 -Wes Bos: yeah, I, I always think about web rings. Because I think that would be such an easy like, talk about using a headless CMS, I think it'd be such a fun project, where you use one of these headless CMS to just input a bunch of URLs, or you can even you can even use a GitHub repo. And then you write like some sort of serverless function that would consume all of those. And then whenever somebody hits, hits a point, like hits a URL, like the web ring, cool dotnet. what it would do is it would take the like, refer and just refer you to the next person in the list or like pick a random website and refer you to them. So I think web brings need to have a comeback. - -72 -00:27:21,450 --> 00:28:08,760 -Scott Tolinski: I really liked web ranks I, I remember, like, my memory of web rings is like all about like gaming sites, right? You go to gaming sites, and you'd be like, Oh, I need the ogre battles. 64 walkthroughs. And you click on it, and you click on another one and learn more about it. It's like one of my favorite things. Another one would be glossy buttons definitely had their day and they still do you still see glossy buttons, there's a new skeuomorphism buttons coming around that are very glossy, and the glossy buttons were primarily like a thing, even before bootstrap came out with their gradient buttons, glossy buttons were straight up image buttons, gradient, glossy doubt, you got little light sheen on there. They look like they were slick, like glossy buttons. I definitely use those. - -73 -00:28:08,999 --> 00:28:37,020 -Wes Bos: Another design trend was flaming tax. So the website flaming texts calm was the place where you go to get all of your headlines and everything, which I still don't know, like, like, how did they do that all that that time ago? Like if you were to ask me to make server generated images. I did it like once with the server list hit counter example that I did, with some some NPM package, but like, how did they dynamically make flaming tax on demand? - -74 -00:28:37,380 --> 00:28:50,220 -Scott Tolinski: Lv, great, deep dive because that sounds like that would be a real difficult challenge. To do. So back then. I mean, even now, I don't even know what I'd reach for now. I mean, there's a lot of image processing stuff, but I don't know what I would reach for first. - -75 -00:28:50,820 --> 00:29:10,050 -Wes Bos: Yeah, yeah. Because you would like what would you do now is you probably just do it in CSS, or maybe Canvas generated on the fly, but like, what were they doing? Like, if anyone knows, maybe someone can like deep dive who made flaming text? And how do we get them on the podcast? Oh, that would be really cool. - -76 -00:29:10,110 --> 00:29:17,760 -Scott Tolinski: Oh, yeah. Very into that. need all those construction gifts who made this mistake? Right? Like - -77 -00:29:17,760 --> 00:29:25,650 -Wes Bos: we all about it, but like that, I couldn't do that today. And like the tools 25 years ago were or totally different. - -78 -00:29:25,979 --> 00:30:34,500 -Scott Tolinski: I experimented heavily with animated GIFs when I was a teen I you know, AOL remember Instant Messenger, how you get those little animated little like, they can only be like 20 frames or something a little animated GIF of the little AOL guy doing something. I used to make those and share them on one of those AOL gift shot sites that where people could download them. And they'd be like, I had one. There's somebody jumping off a diving board. And that was like the whole thing. The little AOL logo. I used to love experimenting with that stuff. But you drew each frame frame by frame and it was very difficult. So yeah, it was it was a Not a lot of fun. Next one is a classic. And this is like sort of like if there is a web dev, classic tag Hall of Fame, marquee tag, really, really, really just the marquee tag for those of you don't know, it basically made text goes along the horizontal line, like a marquee. And, man, this is a classic tag everybody uses thing. It was not a joke back in the day as people laugh about it now, it was the type of thing that you would see literally everywhere. It was like attention. There are some stuff here along with the blink blink tag. - -79 -00:30:35,190 --> 00:31:23,580 -Wes Bos: Yeah, it was, it was pretty cool that you could control it, how fast it went, how big it went. They removed it from Chrome, or something like that. But I'm just looking at an example right now. And it works just fine. Yeah, so I think I remember some, they removed it from the browser, and then somebody like re implemented it entirely in, in JavaScript, because it was it was such an old feature. And I'm just looking at it on Firefox and on Chrome, and it's so smooth on Chrome. And so it's the same like jerky like six frames per second that you get used to get on marquee. So that's actually kind of interesting. Look up marquee tag on Chrome and, and Firefox and see how readable it is on Chrome. - -80 -00:31:24,180 --> 00:31:36,780 -Scott Tolinski: Man, I missed the mark. The next one is going to be spacer gifts. Now I didn't Oh, are you talking about like horas horizontal or like little look horizontal rules that were like better styled that what you're talking about here? - -81 -00:31:36,780 --> 00:31:53,610 -Wes Bos: I'm talking about before we even had CSS, we had just a one pixel by one pixel GIF, that you would, it was transparent. And you would just stretch it with the width and height attribute to give yourself the space that you needed. So - -82 -00:31:53,880 --> 00:31:57,210 -Scott Tolinski: before your dad invented CSS? Yeah, before my dad and - -83 -00:31:58,260 --> 00:32:13,500 -Wes Bos: the funny story for those that don't know, Scott, my dad invented CSS. CSS is like Bert boss. A joke that that was my dad. For like, six months. - -84 -00:32:13,500 --> 00:32:25,530 -Scott Tolinski: I brought it up. Yeah, I legit thought that was your dad. I thought that was your dad. And it was thinking like, Oh, yeah, you got what is that called? Were you nepotism? I was like, Oh, this is like web dev nepotism. Barabbas. Bringing. - -85 -00:32:31,980 --> 00:32:42,690 -Wes Bos: My dad did not make daddy awesome. If he did. No, I don't have any imagine, like, Oh, this guy's selling a CSS course. Because his dad made Yes. Oh, my God. That's it. - -86 -00:32:43,080 --> 00:32:46,680 -Scott Tolinski: I mean, yes. That is very funny. And it is very funny that I thought that. - -87 -00:32:47,640 --> 00:33:24,860 -Wes Bos: Oh, maybe we should try get Bert boss on. He's only 56 years old. He's younger than my dad. Were even baser gifts. Um, they were just spaced. And the only reason I think people know about spacer gifts, unless you've been a web developer for 20 plus years is that HTML email has always lagged behind browsers. So if you wanted a space, in an email for the longest time, you had to add a spacer GIF in there, especially when you did table layout in emails. - -88 -00:33:25,229 --> 00:33:27,210 -Scott Tolinski: Yeah, HTML emails, man. That is a - -89 -00:33:28,620 --> 00:33:29,310 -Unknown: not my favorite. That's - -90 -00:33:29,310 --> 00:33:40,740 -Wes Bos: that's another I think we did a podcast on HTML emails, but like, maybe we should get somebody on who does emails. I wouldn't. Personally now like the word. Yeah, well, yeah. - -91 -00:33:40,770 --> 00:33:50,310 -Scott Tolinski: What's the responsive? What's the thing? Like, I just let MailChimp do it all for me. So I'm really interested in in what the status of that is. That's a great idea for a guest. - -92 -00:33:50,910 --> 00:34:00,000 -Wes Bos: Yeah, so shout us out if you know somebody. Yeah. Who can can come on and give us like the people that run? What's that testing? Email testing. So - -93 -00:34:00,000 --> 00:34:03,570 -Scott Tolinski: money warm the email on acid is one of them. super - -94 -00:34:03,570 --> 00:34:09,600 -Wes Bos: expensive. Litmus. Litmus is like the email. It's like the browser testing. But for email, see, I - -95 -00:34:09,600 --> 00:34:23,940 -Scott Tolinski: use email on acid or I used to, which is a crazy name for a company, but they would run your emails through hundreds of different providers and then tell you what issues Yeah, that's the one I used. Oh, man. check that one out. - -96 -00:34:23,940 --> 00:34:33,210 -Wes Bos: It's been probably three or four years since I've written a custom email layout. I did. Like I still use the same one I wrote three or four years ago. - -97 -00:34:33,230 --> 00:35:19,560 -Scott Tolinski: Yeah, I just dive in lately, and it was just deleting things. I was like, why do I need this? Get rid of it, get rid of it. Okay, next step is Angel fire or geo cities, which is the way that you hosted a website for free online. It basically was just like, click a button, sign up for the service, get a website. It was so cool. I personally used Angel fire. I did not use geo cities and I believe that I had a bit of like a Angel fire is the best It used to be sucks kind of attitude for no reason. Like I had no reason to say that because I think they were probably very similar. But they offered like really neat functionality like click one click copy and paste. And you could get the matrix code on your site, or ladybugs, you want ladybugs crawling on your site. Just copy and paste this JavaScript now you got bugs on your site. - -98 -00:35:21,780 --> 00:35:29,880 -Wes Bos: Oh, man, I remember that. I remember putting snow on my website. And I like I think back to them. I think they were Java applets. They might have been - -99 -00:35:29,880 --> 00:35:33,650 -Scott Tolinski: applets. Yeah, I thought it was Java. But it might have been Java applets. Yeah, - -100 -00:35:33,959 --> 00:35:52,980 -Wes Bos: I think it was Java applet. Because I remember it like taking a second look. I had also had a clock that ticked. And it was like I like actual face clock. And I'm thinking about that. Now. I'm like, Well, I actually have that in one of my courses. But that was an easy, yeah. And it probably would have been easy for us. We just copy it, - -101 -00:35:53,399 --> 00:36:15,570 -Scott Tolinski: put it in there. These were free servers to host your stuff on and it was just so cool and so easy and very, like this is where web brings lived. They lived on Angel fire geo cities. Forget creating a an accountant spinning up your own server or whatever that didn't exist. There was there was no cloud. This was the cloud. Next step is Zenga in live journal. Did you use either of these because I had both of them. - -102 -00:36:16,439 --> 00:36:53,960 -Wes Bos: Um, I remember my sister's friends had a lot. Everybody had a live journal. And I went with some random like, I had a geo city's website, but I went with the free servers, I think to create like a tax free create the website. And then I remember learning HTML and I hosted it myself. And use the.tk domain name. It was like a it was like Wes bos.tk. And I am really bummed that it was not. I don't know where that website went. And the.tk was never, it was just iframed in so none of them wherever cash. But that was my very first like, hand coded website. Man. - -103 -00:36:54,380 --> 00:38:37,050 -Scott Tolinski: I would love to find my old Zynga and my old live journal, because I'm sure they're so embarrassing. I'm sure they are super embarrassing. I would like man, I fear for the kid to have Facebook today and all that stuff, because I put probably like the most emo stuff on there all the time. Oh, yeah, probably very embarrassing. And I wish that kind of stuff existed. I wish I would have like found some sort of a lug to keep that. But yeah, I had a lot of journalists. And those were those were both very popular. I had lots of friends on there, who were friends from high school, whatever, and people post on each other stuff. Same with AOL Instant Messenger, that was such a world. Next is above the fold, which drives me crazy Oh, good, because you occasionally a get the designer who's just coming out of the cave and 2020 in like organic carpet content above the fold. Where is the fold anymore? So X hundred px. So the fold for those of you don't know is a concept that comes from a newspaper. When you fold a newspaper, there is a fold and everything on top of the fold is the stuff that people see first. So the concept above the fold came from newspapers. And so they were thinking everything on the site before you scroll is called above the scroll or above the fold. So you gotta shove as much important stuff in there as possible. Yeah, the fold. If you got one line of text or a button that's peeking below the fold, your users will never know it's there, they're not gonna find it. It's gone slots. Nobody knows that all of a sudden, somebody is like, Wait a second. Everybody knows to scroll websites and to everybody's fold is different. So this is the dumbest concept in 20, whatever. So yeah, above the fold with the way of the dodo. For most people, hopefully, - -104 -00:38:37,130 --> 00:39:32,210 -Wes Bos: the above the fold was tough for me, because about 10 years ago, people started rallying against the whole idea of the fold, because at that time, everybody had he probably 15 or 17, or a 19 inch monitor. And a lot of the times they were all the same resolution. So it didn't even matter at the end of the day. And the fold was generally you would code it to your clients computer, because you want it to look good on their computer. And you'd have to tell them like, Look, not everybody has the same monitor. And we're starting to get these mobile devices as well. And you don't have to really worry about Blackberry. Yeah, there was some really good websites, and blog posts. And it's above the fold that FYI has a list of all of them. And they're basically just a really good resource that you could link people to and be like, Look, don't Don't worry. Don't have this. The above the fold thing is not not a thing anymore. Yeah. - -105 -00:39:32,340 --> 00:40:11,040 -Scott Tolinski: Mm hmm. Totally. Yep. Yep. Yep. Lastly, this is the last one on our list here. This is homestar runner, which at I personally was late to homestar runner, my brother was on it like my friends are on it, and I like didn't get it. But then I saw the truck door thing. homestar runner was flash based, right. It was flash animations. And you could click on it, you could interact with them. It was very, very cool. They were funny they did they had all this stuff and everything. But uh, you knew at one point was quoting a truck door thing. And the all of them the homestar runner thing. So some people got very into it, I was never superduper into it, but that's definitely into it. - -106 -00:40:11,550 --> 00:40:29,010 -Wes Bos: I had a computer teacher in high school that we would he would play one every single class. And we would just say like, burn and a ting all the people. And like, I know what, 20 years later, I still know probably know all the words to that song verse you drawn us, then you draw another s. - -107 -00:40:30,030 --> 00:40:32,210 -Scott Tolinski: Like I have more different s, - -108 -00:40:32,280 --> 00:40:57,150 -Wes Bos: it didn't have that much to do with web development. And then I had a lot to do with internet culture. And I think homestar runner played a huge part in me wanting to make stuff on the internet, because it was one of the first times that you saw like, ah, like, there's like entertainment on the internet. And it's it's almost like a movie and like it was super high quality. So that was that was big in my past. Yeah, - -109 -00:40:57,170 --> 00:41:35,150 -Scott Tolinski: definitely add me to it, because I got it pretty heavy into flash stuff. So like, for me, I saw that flash. And I was like, I gotta learn how to do this. It's animation is very cool. And I was working in Flash. So I was always in awe of the technical aspect of it. It definitely made me go crazy. Unlike one of our sponsors, which doesn't make me go crazy. It brings me Sanity. And I'm talking about Sanity. io is super cool. b y O, see, I was thinking you'd bring your own content to the Content Manager. But you want to talk about today, we usually switch off on the head, but you just did a big course using Sanity. So you're you're like in it? - -110 -00:41:35,360 --> 00:42:53,460 -Wes Bos: Yeah, I've been in it for last couple of months. So it just lot actually launched it like three hours ago, my master Gatsby course. And in it, we use the Sanity, CMS to be our headless CMS. And what that means is that we go into Sanity, we create all of our content types. In our case, it's slice masters, which is people content type, we got pizzas, we've got toppings, and then pizzas have many toppings. And then we pull all that data into your front end. And we do it two two ways. Actually, we do once we pull it all into mostly pull it all into Gatsby. But then also we want like data to be real time. Which in terms of Gatsby, you have to rebuild the site every single time you want the data to change. So what we did is we just went straight to the Sanity graph qL API and pulled the data in client side, it was really good, really enjoyable to work with. I always say it's like the perfect mix of like, easy to get up and running. But also like it's got the it's got what you need for when you're you're two years into a project and you need something really custom. It's not just this very simple CMS it gets pretty deep so check it out sanity.io forward slash syntax you're gonna get double the free usage tier if you check it out there thanks so much to Sanity for sponsoring. - -111 -00:42:54,230 --> 00:44:13,530 -Scott Tolinski: Cool so well that is the episode and take you for taking this a walk down memory lane with us I think this was like I'm and I love this you could tell I absolutely love this stuff. Now we're getting into a section of stuff that we do love to which is sick pics. This is the the part where we pick the sickest things that we like and I am going to come at you with another podcast I got lots of podcasts. But this podcast is for those of you who are interested in learning a little bit about the rust programming language now This podcast is not currently running, but there are cool 103 episodes. It's called New rust station. And it's been going on for a long time. It's not currently running but I started at the very beginning and I thought it was very fantastic. You can breathe breeze through these if you're learning rust. So if you're the type of person who wants to learn a language like rust, check out new rust station. Again, it's not currently active, it's finished the podcast is complete. But what it is, is it's somebody who comes from other programming languages learning rust and then writing an episode about the basic fundamentals of it as they learn it. So you can like really get those wheels turning moments in your in your brain and if you're learning along and thinking about the things that this person's thinking with, I just think it's a fantastic podcast. So numerous station is a great pick if you are looking to learn a new language something like rest, - -112 -00:44:13,530 --> 00:44:44,040 -Wes Bos: I'm going to sick pic slash sick review a chair so I got this for free full disclosure, and it's the autonomous AI Ergo chair too. So it's a desk chair. That is extremely comfortable. So you probably know I have both at my cottage in here. I've got Herman Miller Aaron and that's like, in my opinion, probably the best chair you can get but yeah, which one do you have? Again? - -113 -00:44:44,040 --> 00:45:06,150 -Scott Tolinski: I have the Aaron um, I have since my tailbone injury. This the Aaron has been like listen, I like since the tailbone. I fractured my tailbone if you don't know, since the tailbone injury. I can tell you which seats are very comfortable because I sit on one seat. I can tell you when If it's if it's good or not, and this thing kills my tailbone way more than anything else. - -114 -00:45:06,150 --> 00:45:07,110 -Wes Bos: Oh man, so - -115 -00:45:07,110 --> 00:45:09,300 -Scott Tolinski: maybe I should get one of these autonomous ones. - -116 -00:45:09,450 --> 00:46:34,470 -Wes Bos: Yeah, I'll tell you what I like about it is super solid because like, like they said, Okay, we're gonna send you a chair. I'm like, Alright, is it gonna be like just like a staples chair that's like super rickety. It's like made out of aluminum. And most of the places it's super solid, you could probably throw that rollerblade wheels on it, if you want to as well. It's nice mesh has a headrest on it. The support and everything super comfy really like it the things I don't like about it is only two things as one I'm used to the air on having mesh on my butt, as well as the back. And this has a big big cushion, which you might like Scott actually. Yeah, and I find it to the cushion gets a little hot compared to the actual mesh of the air on. The other thing I don't like is the the actual chair base where everything screws into his plywood, which I don't know if that will will last like 20 years or whatever. But I've never heard of anyone's anyone's extra breaking and I asked on Twitter as well. So it's like, much cheaper probably a third or fourth of the cost of an Aeron. And it seems to be like a pretty decent chair. I sat in it for a month or so just to give it the give it all of the the tests and whatnot. I am back to my Aaron, just because I love it. And it's my favorite chair ever. But if you are looking for a decent chair, check it out. It's called the Ergo chair to cool. - -117 -00:46:34,560 --> 00:46:35,640 -Scott Tolinski: Maybe I'll check that out. - -118 -00:46:35,640 --> 00:46:37,230 -Unknown: Shameless plugs - -119 -00:46:37,230 --> 00:46:38,550 -I am. - -120 -00:46:38,550 --> 00:47:04,500 -Scott Tolinski: I got a course on react animation with framer motion that just came out and it is very cool. We talk a lot about gesture based style for doing draggable drawers very like native feeling things. And because it's very rare emotion, it's all pretty slick. We talked about abstracting your animations into reusable animation components, even just dropping a fade component and it just hashtag just works. So check it out at level up tutorials a.com forward slash Pro. - -121 -00:47:04,859 --> 00:47:27,000 -Wes Bos: I'm going to shamelessly plug my master Gatsby course. Which is out a lot. Morning a couple hours ago. Super stoked. Thank you. It's available at master Gatsby calm. It's to learn to build and style websites with Gatsby react. You learn basically it's like a sort of a tip to tail. What do you say that? saying? Yeah, I - -122 -00:47:27,000 --> 00:47:27,840 -Scott Tolinski: think that's the thing. - -123 -00:47:27,870 --> 00:47:29,610 -Wes Bos: It's like a hog like Yeah, yeah. - -124 -00:47:29,640 --> 00:47:31,050 -Scott Tolinski: Yeah. nose to tail. - -125 -00:47:31,080 --> 00:47:32,460 -Wes Bos: No, sit down. That's what I want. Yeah, - -126 -00:47:32,460 --> 00:47:33,450 -Scott Tolinski: nose to tail. - -127 -00:47:33,450 --> 00:47:35,100 -Wes Bos: Yeah. nose to tail. - -128 -00:47:35,250 --> 00:47:36,030 -Scott Tolinski: It makes more sense - -129 -00:47:36,210 --> 00:48:29,790 -Wes Bos: explanation of building a modern website. So he uses Gatsby react graph. qL headless CMS, which is Sanity, progressive images, scoped CSS, serverless functions, all of that stuff includes all of the CSS because a lot of people are like, hey, Wes, we want you want, we want to see how you actually style it too. And a lot of my other courses, they don't include that because it would take forever. But in this course I made room for and I made the design like simple enough that we could do it in the course but not simple enough that it's just really basic. So check it out. Master gatsby.com. A lot of people already signed up for it. I'm hearing some I had a bunch of people go through it last week or so just to make sure all the rough edges were more edited out and whatnot. So they're really enjoying it Use coupon code syntax for 10 bucks off, and by the time you hear this a will still be on the launch price. So combine those together for master savings. - -130 -00:48:32,190 --> 00:48:33,990 -Scott Tolinski: Love it, love it. Love it. Love it. - -131 -00:48:34,110 --> 00:48:40,260 -Wes Bos: That's it for today. Thanks so much for tuning in and we will catch you on Monday. Peace, peace. - -132 -00:48:43,800 --> 00:48:53,580 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax289.srt b/transcripts/Syntax289.srt deleted file mode 100644 index cb051ec8c..000000000 --- a/transcripts/Syntax289.srt +++ /dev/null @@ -1,128 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA bombs and Scott Taylor. Totally in ski. - -2 -00:00:25,980 --> 00:00:57,900 -Scott Tolinski: Oh, welcome to syntax in this Monday tasty treat, we're going to be talking about enums. in JavaScript, this might be a word that you've seen before and don't know, or maybe it's a word that you don't know, and have no idea or maybe you are up on enums. But we're going to be talking all about itams what they are, how you can use them and a little bit about what their situation is in JavaScript. I personally use them in TypeScript. So my name is Scott Tolinksi. I'm a developer from Denver, Colorado, and with me, as always, is the one and only Wes Bos. - -3 -00:00:58,019 --> 00:00:59,100 -Wes Bos: Hey, everybody. - -4 -00:00:59,190 --> 00:02:33,750 -Scott Tolinski: Hey, Wes. This episode is sponsored by Log Rocket. Now Log Rocket is the air an exception handling tool that will allow you to see the errors and exceptions and anything that happens on your site happen in real time. It's very cool. What it does is it records a, what they call a session replay of the error happening in real time, your user clicked on that button, and the thing didn't work. And you know what, maybe they just left, they're gonna say, I'm gonna, I'm gonna buy Johnson special sauce, I'm gonna buy it, I click the button, it doesn't work. And I say, you know what, I don't need John's special sauce, I don't need it. So I'm gonna see you later. And you might not know about that error, because they didn't contact you. There was nothing popping up in your emails, let you know. But what Log Rocket does is allows you to see them click on the button and actually see the error. The Network tab, it allows you to see the console allows you to see everything that you would expect to see me the Redux store, it works with all of these tools that you know and love, it is so very cool. You're gonna want to head over to Log rocket.com forward slash syntax, sign up, and you'll get 14 days for free. Again, this is one of those services that is very, very cool, super, super into it. So check it out Log rocket.com forward slash syntax enums. So you crafted this episode, and it's funny. You're putting this episode together. And the whole time I thought you're you're making an episode on the addition of tuples and records in JavaScript. And so like when we came to the table, we went to record it. We're like, wait, there's two episodes here. Yeah, these are obviously not the same thing. And we both had a different idea about so Wes, put this episode together. So do you want to kick it off? - -5 -00:02:33,989 --> 00:02:51,060 -Wes Bos: Yeah, I thought we do this episode just because this is a word that gets thrown around. It's probably a word that will get asked in an interview. And it really isn't all that it sounds scary, but it's just a list of possible options. You can turn it off. Thanks for coming. - -6 -00:02:52,140 --> 00:03:02,760 -Scott Tolinski: Do you know what the core of the word enum is? enumeration? Yes. enumeration, the definition of an enumeration is the action of mentioning a number of things one by one. - -7 -00:03:03,090 --> 00:03:07,770 -Wes Bos: Ah, interesting. A complete enumeration of all possible genetic states - -8 -00:03:07,920 --> 00:03:09,360 -Scott Tolinski: give you some context there. - -9 -00:03:09,690 --> 00:04:51,450 -Wes Bos: Let's get into it. So itams are a type. And we're going to talk about enums in graph qL, TypeScript and JavaScript to just sort of I will go through each one. But we'll talk about them in general, because they're pretty much not every programming language, but a lot of programming languages have enums in them. So they are a type where only possible options are from a set of predefined options. So that makes it easier to document all possible options and make sure that you don't run into weird edge cases. So misspelling, for example, I'll give you an example out of my own life, I was working on a course platform. And when I add a new course, I created like a product code with my master Gatsby courses ga t get. And when somebody sign up for the course it for whatever reason, because I hadn't filled out all that with the right things, they signed up for it and the product code was wrong. But it still sent them an email still signed them up. And then when they went to watch the course, the course platform broke. So if I would have had the list of possible courses in an email them, that type would have that would have failed that check there and said, hey, that's that's not an actual, like, a really good example. undefined is not a possible option. Out of this enough of courses. So a couple other examples. We have here, directions Up, down, left, right, those are the only possible options, a roll, I've used a rolling up under my courses where we have admin, editor, author and viewer. Those are the only four possible roles that someone can have day of the week, there's only seven days in a week, you can't make up your own name. And if somebody tries to set it to son instead of Sunday, then that will throw up an error and say hey, that's not one of the possible options. - -10 -00:04:51,540 --> 00:05:05,910 -Scott Tolinski: Everybody gets your roll on. Everybody get yours. I you know what the thing that helps me visualize the best just about every single Time I have an enum the way it manifests itself on the front end of the site is in a select list, right? - -11 -00:05:06,180 --> 00:05:46,980 -Wes Bos: Yeah, you're right, that's, that's a perfect way to to visualize it. So enums can be in graph qL, the way that you do that is just enough roll. So if you're creating a type, in graph, qL, you create a type called role. And you say, it's an enum type, and then the possible options are admin, editor, author, viewer. And then when you go and define your data type, like a user, you can just say the role is not an object or a string of of the role, the role is actually a type of roll. And then then then when you go ahead and set it, it will yell at you if if something goes wrong. That's sort of the beauty of of having a type system in general, though, isn't it? Totally. - -12 -00:05:47,340 --> 00:06:45,360 -Scott Tolinski: Yeah, right. Once you get into type system, like at first, you're like on guard. But once you get into type systems overall, you you, you finally understand what real developers have been talking about all this time about types being very, very, very good. Now my whole system is typed very TypeScript on the back end TypeScript on the front end, we got graph qL, typed our queries, and you know what it is so fantastic. When the thing yells at you, when the when you didn't do the right thing, instead of it just ignoring the fact that you didn't do the right thing. So for me, types up and down the systems and enums are one of those things that I really, really do love in my graph, qL and my TypeScript system, because they they are suddenly the same thing. The only problem I have here is like, when you get into JavaScript, and you you have to look for something as like a string of any num, do you know what I mean? It's like you use the all uppercase, and then all of a sudden, it's a string. So to me that, like always feels very weird. - -13 -00:06:45,870 --> 00:07:06,750 -Wes Bos: Yeah, totally, I have run into situations like that, or I've done it in JavaScript before where you have to import the thing from a package, and then compare it against like, if it is this thing that you've imported from a package, then then it is true, you can't just use a string, in order to check in that's I don't think that is true in TypeScript is it, - -14 -00:07:07,080 --> 00:07:45,870 -Scott Tolinski: you can do them a couple of different ways where you can do like an enum, like you said, Direction is Up, down, left, right, whatever, all caps, but then you can also do an enum. This is a string em, which is how I do them. Because to me, it makes more sense, but I don't know. So you do enough direction. And it's like, up is equal to all uppercase string of Up, down is equal to all uppercase string and you you write it like that instead of the enum object thing. And that's how you type that. So that's typically how I'm doing it. Or you can do some like weirder ones where like, no is equal to zero, yes, is equal to one that kind of thing or something. Oh, yeah, - -15 -00:07:45,900 --> 00:07:57,420 -Wes Bos: yeah, that's more like a like a dictionary where you set it to this like heart value. And then if you want, like the user displayable value, or if you want to be able to look that up in an object or a map, or something like that, you can - -16 -00:07:57,450 --> 00:08:21,660 -Scott Tolinski: and I wonder, like, how does this fit in with the new additions that we're getting with records and tuples? Were like a record? For those of you who remember the last week's episode, a record is an array where the things are always the same thing, right? So like, part of my brain says, like, Is this enough? The same thing as a record? I mean, I don't think so. No, is it the same as I don't know, - -17 -00:08:21,660 --> 00:08:22,350 -Unknown: I don't, I don't - -18 -00:08:22,350 --> 00:08:36,289 -Scott Tolinski: know, maybe? Can you use a tuple as an enum? I don't really know, I guess I need to get some of that programming, like really dive into languages that have some of this stuff a little bit better. Like I said, I've been learning rust in there, there's like 1000 different data types. So - -19 -00:08:36,799 --> 00:09:31,790 -Wes Bos: yeah, the I guess the like declaration of the e&m could be done in a tuple or record, and then the, the lookup of the possible values is still that needs to be checked, right? Like so we should say JavaScript, it's not in JavaScript, yet, there are ways you can do it, you can use a case switch, that's probably the most popular way to do it now where case switch will go through all that or even just an FL statement will go through all the possible options. And then if it if it's not in one of those options, then either have a default or a throw an error or something like that. There are proposals in stage one, so very early days, for adding enums to JavaScript, which is kind of interesting. We'll link that up in the show notes, as well as there's a Babel plugin, which I probably would not throw into your $51,000 a week. So it's a pretty popular Babel plugin. So people are using these already in their JavaScript. - -20 -00:09:32,100 --> 00:10:10,350 -Scott Tolinski: Yeah, it's interesting. Like as somebody who's been writing TypeScript for the past a little bit, it's, it's we're sort of in this weird world where, like, so many people are using TypeScript right now. And like TypeScript has, you know, like, so is JavaScript going to adopt, like everything that TypeScript adopts? Does that lag behind? Is it like, what does that connection look like in the future between TypeScript and JavaScript as TypeScript evolves, and continue To like improve or change or whatever, like, what happens to JavaScript, like, how much of it does it adopt? And how much of it does it? You know, let it be a TypeScript thing. - -21 -00:10:10,380 --> 00:10:31,230 -Wes Bos: Yeah, I hope that it does adopt some just like, like, vanilla JavaScript adopted, almost everything good out of jQuery. Probably will say, All right, we've had this TypeScript thing for three or four years, people love the way that you use enums, or whatever in in TypeScript. So how do we add that then to to regular JavaScript, - -22 -00:10:31,280 --> 00:10:55,200 -Scott Tolinski: and I went from somebody who largely ignored TypeScript, mostly because I wanted to see who the quote unquote winner was between flow TypeScript and reason and whatever. And it's clear, TypeScript has gotten the market share, right? So like, now TypeScript is the quote, unquote, winner. So now that I'm so interested in TypeScript, I've gone from somebody who doesn't necessarily care too much about it to somebody who's like, TypeScript should just be JavaScript, you know, like, it - -23 -00:10:55,200 --> 00:10:57,420 -Wes Bos: should just build it into the browser. JavaScript - -24 -00:10:57,420 --> 00:11:11,340 -Scott Tolinski: should get tights and it should get nubs. And it should get all this stuff. And what What a weird transition that's been for me to not be like that, because it's funny to look back. I'm sure I would cringe pretty hard on some things. I said, in all their syntax episodes. Oh, yeah, - -25 -00:11:11,340 --> 00:11:15,000 -Wes Bos: we all do. Yeah, that's like just that things you said no. - -26 -00:11:16,440 --> 00:11:31,320 -Scott Tolinski: To laugh about that specific point that we said, we were like, well, maybe we should do an episode about things we were wrong about in West is like, I'm not wrong about anything. So then the episode has been sitting in our episode list of potential episodes to do is just titled stuff Scott was wrong about - -27 -00:11:32,850 --> 00:12:05,910 -Wes Bos: thinking about me is I'm never, I'm never super opinionated about things. Like I obviously have my opinions. But like, if somebody wants to do something else, then I say, yeah, that must make sense for you go for it. You know, like, Am I not one of these people that goes on these, like, I remember when observables came out, there were some super strong opinions on either end, and people are fighting about it. And I was just like, like reading these tweets being like, wow, wow. Imagine, like I care about it. But imagine being that angry when somebody else doesn't care about it. - -28 -00:12:06,090 --> 00:12:24,810 -Scott Tolinski: Yeah, I know. It is weird, the fever in which people will defend some of these things. And it's like, You're insulting their children or something. Like, I mean, the only thing that I'm gonna be getting that fired up about is these black widows I got in my backyard, they were threatening my kids right now. Like, that is what I'm fired up about - -29 -00:12:24,840 --> 00:12:26,070 -Wes Bos: something that's gonna be a sponsor transition - -30 -00:12:26,070 --> 00:12:27,750 -Scott Tolinski: or something it could have been. - -31 -00:12:28,830 --> 00:12:42,450 -Wes Bos: Alright, so that is enough in JavaScript. Hopefully that helps you with a thing or two in your next interview or whatnot. And we will catch you on Wednesday. Peace, peace. - -32 -00:12:44,400 --> 00:12:54,180 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax29.srt b/transcripts/Syntax29.srt deleted file mode 100644 index 6142d52c4..000000000 --- a/transcripts/Syntax29.srt +++ /dev/null @@ -1,332 +0,0 @@ -1 -00:00:01,290 --> 00:00:10,560 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to Lynskey and Wes Bos - -2 -00:00:10,590 --> 00:00:29,190 -Scott Tolinski: Hill Welcome to syntax. In this episode, we're going to be talking all about hosting, which is something that if you work on the web, you got to do no matter what. Because while you can't just make stuff and have it sit on your computer, you got to put it somewhere that other people can actually look at. So you need to go and see - -3 -00:00:29,190 --> 00:00:31,530 -Wes Bos: drive is not available to the web. - -4 -00:00:32,310 --> 00:01:02,070 -Scott Tolinski: I well, it shouldn't be. Doesn't mean it isn't. But yeah, I mean, so in this episode we're going to be doing is basically going over from the most basic hosting types to the more complex and technical hosting types and talking a little bit about why and what and what differentiates them and why they sort of fit into these different sort of classes of, of hosting types, which I don't think are official things. I think we might just be sort of pulling these out of the air ourselves. But yeah, with me, as always, is Wes Bos. - -5 -00:01:02,520 --> 00:01:07,079 -Wes Bos: Hello, everybody. How's it going? Scott doing well, today are tired. - -6 -00:01:07,700 --> 00:01:22,560 -Scott Tolinski: I'm tired. Yeah, we got a tea there going on. We got some teeth popping in. So I'm not getting much sleep going on right now. But so yeah, if you notice some delirium, speech, it's gonna, it's gonna be at How you doing? - -7 -00:01:22,860 --> 00:02:03,900 -Wes Bos: I'm doing great. I just launched my CSS Grid course, which I'm super, super excited about. I know I plugged it last week's episode. And by the time this is launched, we'll be out for just under a week or so I've been super happy about how well it's going the feedback. Sign up so far, just under 30,000 people have signed up for it, which is mind blowing to me. So been super happy about it. And I also got to announce that Firefox came along and sponsored the course as well, which is, which is really cool. So basically, what they did is they just sort of like paid my wage in order to create this thing. And they will give it away for free. So if you're interested, check it out at CSS grid.io. Awesome. - -8 -00:02:03,930 --> 00:02:07,769 -Scott Tolinski: And that's really awesome of Mozilla for doing that. Super cool. - -9 -00:02:07,799 --> 00:02:45,990 -Wes Bos: Yeah, it is they like sort of like approached me a couple months ago. And were just like, hey, like, could we do something together? Like, like, just kind of open invite. And then we talked about it. And it just so happened that I had this CSS Grid course coming up. And their dev tools are amazing for CSS Grid. They're by far the best. And CSS Grid is like a really tricky thing. Because like rows and columns, and implicit and explicit, all these things are, they're not elements, right? Like you can't just like right click inspect element. So there needs to be some sort of tool that helps you visualize these sort of invisible pieces, and they do a great job at that. - -10 -00:02:46,770 --> 00:02:55,470 -Scott Tolinski: Yeah, I know. And I was just, I was just showing off the other day, and people like, what is that? Man, you got to get on this? It's awesome. Love it. - -11 -00:02:56,100 --> 00:03:13,080 -Wes Bos: Wicked. Today, we are sponsored by xojo, which helps you create cross platform apps. We'll talk a little bit more about what they are partway through the show, but check them out@xojo.com forward slash syntax and use the code syntax to get 20% off a xojo. License. - -12 -00:03:13,560 --> 00:03:14,430 -Scott Tolinski: Sick. - -13 -00:03:15,180 --> 00:03:43,200 -Wes Bos: All right, well, let's get into it hosting, basically getting your stuff up on the internet, there are so many different ways. They are all kind of confusing. Some of them require different deployment practices. Some of them require a little bit of work in terms of getting SSL up and running. So yeah, like Scott said, we're hope or hopefully just going to distill what these things are, and how when you might want to use them. What are the benefits and the downsides to the different ways of using them? So do you want to kick it off for us, Scott? Yeah, - -14 -00:03:43,470 --> 00:04:11,670 -Scott Tolinski: yeah, so I thought we'd start off with the most like absolute basic type of hosting, which is the type of hosting that doesn't require you to do any sort of actual work hosting it. Maybe not even any work building your site really such as services like Wix or Squarespace or even things like medium. You could call that a host, if you're building a blog, or I think it was like WordPress is a wordpress.org is the one that allows you to just sign up - -15 -00:04:11,700 --> 00:04:22,069 -Wes Bos: wordpress.com is the self hosted version and.org is the the sorry.com is the the hosted version for you. and.org is the self hosted version. - -16 -00:04:22,880 --> 00:05:09,690 -Scott Tolinski: Okay, so yeah. so.com wordpress.com. So the point of these these systems are is that, well, you don't have to worry about even the fact that a host exists at all like the very most work you're going to have to do is to point your domain to wherever it tells you to point it to so that your domain overrides their domain, but the the process for these is typically for people who have no technical background, right, maybe you're a designer, maybe you don't even have a designer and you just want a site up online and you want it the easiest possible way. Now you will pay a little bit for convenience with these. You're paying a monthly fee, whether it's X amount of month to get the total, the total package themes or whatever. But these things that largely exist for non developers. - -17 -00:05:09,930 --> 00:06:10,769 -Wes Bos: Yeah. And do you want to hear my my idea? Do you get a lot of like wicks and Squarespace ads on your YouTube? Because I sure do you need a website? Why not do it yourself? Right? Like every, every developer has that, like burned into their brain? Yeah. And I think that the reason why Wix is targeting, like actual developers, everyone always like makes jokes about why are you getting a Wix ad when you're like building like a custom node back end? And I think my idea is that because first they they are targeting people that throw their hands up in the air and say, This is too hard to learn how to code and I just need a quick website up. And second, I think that the main audience is, somebody in your family or extended friend network will come to you and say, How do I build a website? And the first thing that should pop into your mind is Wix, Squarespace get a WordPress blog by a theme or something like that. And it's an easy way to like, tell them like just use this. Don't bug me if you have trouble. Give them a call. Don't call me. Yeah, - -18 -00:06:10,860 --> 00:06:42,509 -Scott Tolinski: yeah, that I totally agree. I mean, my first thought was, they're going after the rage quit audience like, yeah, screw this, I'm done. I'm flipping my chair over and I am ready to just have somebody do it for me. But that no, that makes perfect sense to just drill it into your brain. And I do think about that all the time. If somebody comes up to me, and they want something like that, and I know I don't Well, when they don't have the budget for my time, or, you know, I don't I don't have the time for for their project. Yeah, I'm gonna think about Squarespace or Wix. Pretty much right off the bat. Yeah, - -19 -00:06:42,509 --> 00:07:01,740 -Wes Bos: they're kind of like the best buy of web development world when that like when I was like a kid and building computers, I used to tell people like, why would you? Why would you pay the Geek Squad to build a computer for you or install a hard drive? And now I look back at it. And like, I'm glad those places exist, so that I can easily point people over to it, and they're not gonna bug me for tech support. - -20 -00:07:02,310 --> 00:07:04,980 -Unknown: Yeah, right. Exactly. Yeah. So deal with it after that. - -21 -00:07:05,430 --> 00:08:27,180 -Wes Bos: That's a site service hosting. Obviously, most of you listening, this podcast probably won't be using that. Although I do know that like some developers do, use Squarespace because you can get in there and actually customize it sort of similar to WordPress, how if you just want to skin the thing, and have it run for you, then that's totally fine. And then sort of the next step up is your your basic hosting that likely a lot of you have and you're paying five bucks a month for like GoDaddy or Hostgator, or Bluehost, or there's like 20,000 other companies. And the funny thing is that, like Bluehost, and Hostgator, and all these different companies, they're all mostly owned, with the exception of GoDaddy, they're mostly owned by this one company that has bought up all the web development companies, it's kind of kind of interesting to hear. And they've sort of bid this type of hosting to the bottom, you generally get like an Apache box with PHP and pre installed on it, you get a cPanel. And it comes along with like these sort of like basic tools for installing WordPress and being able to just drag and drop a site via FTP or SFTP onto your, your server. And when you refresh, you get some changes. So that's the very basic there is extremely easy to use. It's really, really cheap to have up and running is able just, you can just throw up a quick website on there no problem. And there isn't a whole lot of fuss involved in getting a hosting like this. - -22 -00:08:27,839 --> 00:10:02,850 -Scott Tolinski: Yeah. And, you know, some of the cons of these services are they usually throw you on like a shared instance, I remember one time specifically when I was first getting into web development might have been like the second highest site I ever hosted. Yeah, I was on a basic cPanel it, I forget who it was, it was some host that maybe doesn't even exist today, or brought up and whatever. But I had a Magento site running on the service, which they had a one click Install for Magento. So you think that you know, their, their shared service would support it. But Magento is like super processor has, I mean, it's like it can just like completely kill your your box. So like, I was just I don't know, if I tried to tweak the PHP and didn't know what I was doing at the time. This is way, way back in the day. And I caused like an infinite loop and brought down the entire server. And like, think about it, like everyone who hosted a shut site on that shared server, their site went down because there's some dumb thing that I did. And likewise, my site would go down all the time because of issues with memory management or whatever and, and those services I mean, they do fit their place but they're they're not like totally free of pain, right? Yeah, you can you can run into those situations. And then other things too, like once you get to the point where you want to do things more of a technical way you're sort of stuck doing most everything through a G y which I like g wise myself, but I never found cPanel to be particularly like I don't know, intuitive in a number of ways - -23 -00:10:03,239 --> 00:11:52,770 -Wes Bos: cPanel sucks, like you're always scrolling around. And every host implements their own version of cPanel. And you can't find half the stuff or you're looking for it. So I too have had my fair share of pains with these types of hosts. The biggest one, most recently is I used to recommend Bluehost to a lot of people and what had to do? Oh, yeah, like they have. It sort of pains me to like, not refer Bluehost because they have a very good affiliate program, you can make like 65 100 bucks per referral, because like when someone signs up for Bluehost, they're there forever. But what happened is that like Bluehost, does, like mostly WordPress hosting. And they realize that almost no one's using a caching plugin on WordPress. So what they did is they they said, Oh, we could probably save like, a third of our budget just by enforcing all of our users to cash their WordPress is because they don't need to have such a fresh thing. So what they did very sneakily, is they went into every single WordPress install on all of their customers. And they install this extremely aggressive caching plugin without anyone's permission, and mine included. And then I wasted like three hours doing that, like, Why is this not working? it's working fine on my local one, I deploy it. And it's not working at all. And then finally, I fell found that they had turned on this really aggressive caching plugin, and there was no way to disable it with via the UI, rather than just deleting the actual plugin from I have, like 30. wordpress installs, and had to go through and delete all of them. So that was, that's pretty sketchy. I realized what they're doing is they're trying to squeeze a little bit asked her out of their boxes, but that that's sort of like lost. I lost faith in Bluehost. After that. - -24 -00:11:53,730 --> 00:11:58,500 -Scott Tolinski: Yeah. Weak, weak, weak stuff, weak sauce, update my affiliate links. - -25 -00:12:00,240 --> 00:12:06,780 -Wes Bos: Yeah, so there's all kinds of other other good ones out there. I'm not gonna go through them. But those are sort of the big ones that you see there. - -26 -00:12:07,680 --> 00:12:16,020 -Scott Tolinski: Yeah. And like we mentioned, they're largely very similar if they have a cPanel. It's mostly just like a skin version of the exact same software. - -27 -00:12:16,050 --> 00:12:48,120 -Wes Bos: Yeah, exactly. And there's some like I will recommend, because I used to teach WordPress and I used to teach like hundreds of people. And what started to surface is a lot of students were recommending to me called siteground. And siteground would will backup your WordPress for you automatically on their server. And they had internal tools for for rolling it back. And their service seem really good. It seemed to be really fast and snappy. They have a phone number that you can call. So see people seem to be pretty happy with with using siteground. Is this cool? Let me double check that. - -28 -00:12:48,780 --> 00:12:50,760 -Scott Tolinski: Yeah, I have not used siteground. - -29 -00:12:52,110 --> 00:12:53,970 -Wes Bos: Yeah, as siteground. Cool. - -30 -00:12:54,000 --> 00:14:00,060 -Scott Tolinski: Yeah. So okay, so that's our sort of our basic host, right. So we got our non managed non site, techie sort of site service hosting, we had our basic hosting. And then we're starting to get into the more technical levels of things. And this is primarily where nowadays, a lot of people are going to be spending their time, which is funny, because so many of these, like weren't necessarily a thing, you know, a while ago, and and so what we have here is we have two or three different classifications of some more technical hosting. And one I like to call like the service based hosting is more of your platforms that are you're not going to be using these if you aren't a developer, as in, they do take a required level of knowledge to be able to use with web technologies, but they offer a lot of services for you at a cost. So these things might be Heroku. I host my my Meteor site on galaxy, which is similar to a Heroku type thing. We have things like zite, or what else what else you got? It's got? Well, it's - -31 -00:14:00,060 --> 00:14:18,750 -Wes Bos: a Z, I think it's a zite. Now, that's the one that we're using to host the syntax one. What other ones are there that basically they're just these services that know how to host a Ruby application or know how to host a node app or a single page app or something like that, right? - -32 -00:14:19,350 --> 00:15:09,210 -Scott Tolinski: Yeah, and really the big the biggest dog here is Heroku, which has really made a name for itself. When Ruby on Rails got really popular, it was sort of the way to host Ruby on Rails apps. And eventually, when node became popular, it was like a great way to get up and running with node, they had this thing where you could have like five free site hosts where basically it's it's not like a good hosting it powers down the server when you're not using it. So like initial load times are extreme, but it's free. So if you wanted to mess around with Node JS for a weekend and actually see something online, you could do that really super easily with Heroku. And I think that's how they definitely locked in a bunch of people. And got them being like, wow, this service is really nice. Not to mention they have like, top of the line design, like their designs always been excellent. I've always been a huge fan, - -33 -00:15:09,570 --> 00:15:30,870 -Wes Bos: maybe maybe we can explain that whole like spin up because I didn't get that for the longest time in terms of like Heroku would spin down and spin up and and I got a win, what happens is that I think zetes now does this as well. Does does. meteors galaxy do this as well, where they they spin the server down when they're not using it. - -34 -00:15:31,590 --> 00:15:36,900 -Scott Tolinski: They don't because they don't have any free free or they don't have to pay for all your tears. Yeah, so what - -35 -00:15:36,900 --> 00:16:17,640 -Wes Bos: might happen is you might have an app that you don't necessarily you just posted online, and you might not get any hits for an entire day or a couple hours. So what will happen is they'll sort of shut down that process. And then when somebody requests a URL, it will spin up your application started again. And then that first hit is going to take a couple seconds while your application starts again, people have gotten around this by just building little bots that will ping their website every 30 minutes and make sure that it's up. But that's how they're able to offer these things for free is because you're not actually using it unless people are actually visiting your website. There's no idle processes running just in case someone, someone visits your site. - -36 -00:16:18,240 --> 00:17:10,410 -Scott Tolinski: Yeah. And the idea is that, once your site is actually has traffic, that you're going to be upgrading past that free tier anyways, and onto a paid program. And obviously, they make that super easy. So they could have charged a little premium for that because of the ease of all of that stuff. And then that leads to like one of the cooler things about these technologies is they allow for really easily scaling your application as your CPU not handling it, you know, you can just click the up arrow and either increase your container size or increase the amount of containers you have running your app to based on what your needs are there and give you all sorts of fancy performance metrics. So you can know. Or you can check some sort of box to have an auto scale. And that way, when your website gets the Reddit hug of death, your bill is going to be astronomical, awesome, because that sealed it up really quick. - -37 -00:17:11,040 --> 00:19:21,930 -Wes Bos: Yeah, I think we should also explain that these services, you do not get access to the server, you you don't get like a raw box where you can SSH into it and, and npm install stuff, these services are sort of like tidy little containers, where when you deploy your application to these services, and I believe Heroku does that via Git. So the way that you do it is you just you push your Git repo to a specific branch on Heroku. And that will sync it to Heroku. And then Heroku knows it will auto detect that or you tell it it says oh, this is a node app, or this is a Ruby app, or I don't sure what other kinds of stuff that they they they do, and then it will auto npm install all of it, it will switch the version of node. So there's no like making sure that your box is on the most recent version of node or has some of the security patches installed or SSL certificates, we'll talk about that in a second, that's a bit of a pain to make sure it will, it knows how to do all of that. And it will just scale it up. And for a lot of people, that's what you need. Because you don't have to spend your time worrying about being a sysadmin. Like understanding like I remember I have a Digital Ocean box and I had to install swap memory, which is there wasn't enough memory on my box to to do an npm install because I was on like a really like a 512 the lowest tier, I think the lowest tier is now a gig actually, which is great. But I needed more memory than 512. But I didn't want to pay for it so that you can do this thing called swap memory where it will use some of the hard drive as like sort of memory, it's a little bit slower. But it will work for MPM install thing. And I was like, Oh, this is this is kind of a pain that I have to learn first what swap memory is like I shouldn't have to care what this is. And second, like I had to like run all these commands, and you have bash tasks and all this stuff. And like I'm a web developer, I don't necessarily want to be a sysadmin. And, and really geek out over this stuff. And at the same time, my application really isn't all that unique or large that I need to need to be posting it on my own. So that's why I really like these services. - -38 -00:19:22,550 --> 00:21:17,190 -Scott Tolinski: Yeah, and the services are also I mean, that goes to show you to look once you are at a certain level, you can pay to have a sysadmin. And you can pay to have someone who that's their specialty, handle that and manage your own server. So in the meantime, maybe you pay a little bit more out of pocket to have a service, do all that work for you to maybe give you a little bit of buffer from potential issues that come up. And again, like you mentioned, they make some things really super easy. One of the things I really like about these services, if you have multiple containers for your app, when you push a deployment, it deploys it to one of your containers and then swaps the containers so that there's zero downtime. You never really have any sort of issues when you're deploying an update to your application with even microseconds of downtime, right? So, you know, I found that that aspect of them to be really nice. Again, the interfaces are great. You mentioned SSL certificates. For me, like, there's nothing in the world I hate more than dealing with SSL certificates. I don't, it's one of those things that's like, you got to have an SSL certificate if you're doing anything really nowadays. Yeah, there's, there's really no excuse and now that you can get them for free through Let's Encrypt. Again, there's, there's no excuse there. So one of the things I always loved about on the Galaxy platform, is just an upload box. So you, if you go to my encrypt, or whatever, your services and you get your key, you just click upload and upload it through an interface. And all of a sudden, you don't ever have to think about your SSL again until it expires, or you can even set up jobs to do all that for you. But the whole business is here, it really makes a lot of those processes that are definitely a pain in the ass. If you're having to edit your nginx config files and stuff to get working. It makes those just way less of a guessing game and way less of a thing if you're not a system admin who's doing this all the time. - -39 -00:21:17,330 --> 00:23:07,230 -Wes Bos: Yeah, so one, one thing I'm doing right now is I'm looking at moving over my, my my boss monster platform, if you want to hear about our stack, go back in and listen to the our stacks explained episode. But I have when I want to reboot my app. So I deploy my application to digitalocean. And when I want to reboot it, I SSH into our server and I run a command called forever restart. And what that will do is it will restart my node process. And it takes about like less than a second to reboot the entire app. But every now and then I get somebody who hit the website just at that amount moment, or I'm always worried that like Like, for example, when I launched my CSS Grid course, there was a typo on the page. And of course, I got 40,000 emails about this typo. And I. So I fixed the typo, and I had to reboot the server. But there was like 2000 people on the page at that time. And I was like, for sure there's going to be somebody who submitted a payment request or, or something during that one second of downtime. And that really bugs me because I have proper error handling on the client side. And I just have to click up, click, try again. But it bums me out that that and with now sh and all these things they, they just make sure that both servers are running it specifically now is what I have zetes now is what I have experience with they call it immutable hosting, meaning that you cannot go back and change one of your past deployments, you just deploy a brand new version of it. And it's going to cut over your domain name from one to another. It will always deploy it on this like sort of temporary domain name. And then once things are ready, you just run now alias and it will cut it over to the new version of your site. And then it will spin down that old server. And that's that is really, really cool. I like that a - -40 -00:23:07,230 --> 00:25:02,640 -Scott Tolinski: lot. Nice. Yeah, I like a lot of these login, like I hosted on I mentioned galaxy, which is similar to Heroku in the sense that it's like really pretty, you don't have to worry about it. I just run a deploy command. It goes up. And there's there's all sorts of like excellent features like built in pre render, so I don't have to worry about pre render, one click version rollbacks. Like if I push up and all of a sudden, some somebody messages me about something funky. And I knew that that didn't exist on the previous build, I can just click redeploy a previous version and it fires it up and absolutely no time at all. So things like that are just are just super nice. I didn't have to worry about actually going in and rolling back any sort of commit that I did on the server itself. I don't have to, it's all it's all managed there for you. And a lot of times they manage things like backups, you can easily with Heroku. You can throw on add ons, which we haven't even talked about yet which add ons can do all sorts of stuff for your application services that you could configure through code yourself. But many times, if you wanted to add on like a paper trail or something or whatever, you can just click add on and you'd be billed all through your Heroku account instead of through all of these hundreds of different accounts. So attaches it to your bill. Yeah, and and there's definitely some really cool stuff, some some caching and whatever, there's a ton of different add ons. And maybe you want a database service, you can just add on the database service and login directly through your Heroku account. So there's a lot of really cool things. Again, you're paying a premium for all of this. And people who aren't really experienced on hosting their own servers. They're going to roll their eyes pretty hard at most of this stuff because they don't need to do it. But for the people who don't want to spend that time doing it, your time is valuable. It definitely is an option. That's Yeah, super good. - -41 -00:25:02,730 --> 00:25:53,940 -Wes Bos: Like it can get really expensive really quickly, like you could the difference between, like for for my own app, I would say, the difference between using like a host for hosted version versus running my own server is probably, I don't know, 700 bucks a year even like my own database, I don't host my own MongoDB because that kind of scares me. And I pay, I pay hundreds of dollars a year. And you could really I could, I could probably get away with like, a couple dollars a year on Amazon, AWS, but spooks me out too much rather pay someone else to deal with it. I've had some issues in the past with that were my own issues with database drivers and the folks over at Mongo m lab. They they figured it out for me and it just that kind of like help in that kind of like, it's somebody else's problem if it goes down? That's kind of what I like. - -42 -00:25:55,020 --> 00:26:41,220 -Scott Tolinski: Yeah, so you're on em lab for your your database, I host my database on a compose who we used to be, I think, oh, they used to be something else Mongo Yeah. Or whatever it was, it was Mongo something. And now they're they're composer on by IBM, they have a great little interface. Nice, nice hosting for databases. And that's the thing we're I don't know if we're even. We don't even have hosting databases in our notes. But a lot of this stuff now is breaking up like that. We're like, instead of hosting your database on your own server, whatever, you're hosting it elsewhere. For four reasons like this, it's it's like their platform is going to maintain security, maintain versions, and just give you a nice little way, just basic way to connect to the database. And that's it, you know? - -43 -00:26:42,000 --> 00:27:50,070 -Wes Bos: Yeah, exactly. So let's take a quick break and talk about our sponsor. Our sponsor is xojo xojo, spelled XOJ. io is a cross platform development tool for creating native apps for desktop, mobile web and Raspberry Pi. With sojo, you can write just one version of your app, say on a Mac, you can click a button and have it completely compiled over to a native Windows version. sojo lets you abstract from specific platform details. So you can focus on what makes your app unique. All Apps have completely native controls, even if they were developed on that platform, just use it drag and drop to create your user interface, and one language to program the functionality. Users including fortune 500 companies, citizen developers, professional developers, it hobbyists, and students, anyone who wants to build apps faster. So listeners of syntax are going to get 20% off with the coupon syntax, you can get that over@xojo.com forward slash syntax is xojo.com, forward slash syntax, and you can try it out for free over there as well. So thanks so much to xojo for sponsoring, - -44 -00:27:50,220 --> 00:27:52,290 -Scott Tolinski: that's a great word to say to Joe, Joe, - -45 -00:27:52,290 --> 00:27:59,610 -Wes Bos: Joe, I really like that. Maybe, maybe I can name my next child xojo. - -46 -00:27:59,640 --> 00:28:07,350 -Scott Tolinski: That's not a bad name. I mean, if we were like living in like sweet 2030, the year 2030. Like, I feel like xojo is just gonna be a name you see around. - -47 -00:28:08,460 --> 00:29:47,970 -Wes Bos: Exactly. I love that a lot. All right, let's talk about the big one, which is running your own server. And this is currently what I'm doing on my own. It's, it's definitely by far the cheapest option. And by far the most configurable option. And And third, it's probably the hardest option, which is running your own server. So you can do the very basics where you just go to one of these services that provide you space, like your name, rattle off a few Digital Ocean is a big one, I use them myself, I really like digitalocean Amazon Web Services. If you love drowning in complexity, that's a good one. Yes. So AWS is is probably by far the cheapest, and you just pay for by usage. And they give you almost nothing except a lot of configuration. And then they just give you the raw server and in order to up and running. There's Rackspace, there's linode, which is another really, really good one as well. And they will give you just raw server space. And then a lot of them will also give you the ability to sort of start off a hit the ground running with these different images. So that's that's specifically what I use myself. And in my learn node course, we look at how to deploy to Heroku and ziet. And also we do Digital Ocean, where you can start with like one of these, like, has node already installed. And it will have like, some of them will even have like a react app or an Angular app already pre configured and it'll have a database installed. And you can just click those buttons and then that will that'll start to get you 90% of the way there in order to to run your service. - -48 -00:29:48,240 --> 00:30:51,860 -Scott Tolinski: Yeah, or you can start with absolutely nothing and then run through their documentation to install everything or you can do it if you already know the process. One of the things I loved about digitalocean It taught me a lot about managing a server because like, before they had these pre configured droplets, they did just have like, splink droplets, and I would spin one up, and then I would just pop it through there. Excellent. Excellent. Like, seriously, top of the line documentation. Yeah, just like, just go through it and read. Okay, now I need to install this and change my SSH port. Why? Why do I do that? Okay, now I need to do this and do that. And sure enough, I learned a ton about this stuff. And maybe I didn't necessarily need to know or really want to know, but I learned way more from their documentation, then. So many other different learning resources over the course of the year. So like, being able to have that complete control over your stuff and know what you're doing. And why is a super really cool thing that digitalocean offers just through their documentation alone. - -49 -00:30:52,950 --> 00:32:25,470 -Wes Bos: Yeah, yeah. And you can, you can also spin up your your digitalocean for so for example, when I released my last batch of stickers, I totally crashed my my own site, and I couldn't figure out what it what was happening. And it turned out that just I was running on the like, cheapest, digitalocean droplet for four years. So it just spun down, I turned off my my server, and I resized it to a much bigger one with more more RAM on it, and then I spun it back up again and started my app again. And I think it was down for about like eight minutes or something like that. And, and it was working really well. And now digitalocean, I know people are probably screaming at me being like, you don't even need that eight minutes of downtime, because digitalocean has this idea of floating IPS, where you can you set up all your domain names with like this floating IP address, and then you have all your different boxes. And you can basically have two different boxes at once. And if one box, where you could just scale up another box while the first one is running, and then just cut over your floating IP to the to the second box and then and then spin down the other one. And that's really nice, because that would again, that would have given me zero downtime as well. The only downside to that is that it didn't have the correct the correct server. Because when you also run this stuff, you also have to you have to manage your own nginx or your own Apache. And I do want to take a stab at what what is nginx? And what is Apache for those who don't know, - -50 -00:32:25,590 --> 00:33:27,270 -Scott Tolinski: yeah, so that mean it's a it's a HTTP server. So it's basically here's how the process when you're hitting these things, what you hit a domain, that domain hits your DNS that DNS tells you where to look, that DNS is typically going to tell you like what IP address to go to that IP addresses that which your sites hosted. And so that IP address is getting this request coming in. And your HTTP server is going to look at that and be able to determine where to sort of send send that request, right what what files to load, how to load them. Exact maybe like if it needs an SSL certificate to load the SSL and you just said exactly. And I saw a little bit smile there, I feel like is because we both got a drink. Someone on Twitter mentioned that every single time West says exactly, you have to drink. And I've already noticed this episode. So I think people might be feeling a little toasty if they're playing along. - -51 -00:33:27,420 --> 00:33:33,210 -Wes Bos: Exactly. What does God say? That's sweet. I say that sweet. What do you say? - -52 -00:33:33,300 --> 00:33:39,720 -Scott Tolinski: I don't know. I don't know. I say a lot of things on repeat. And I just catch myself been like, you did that when again. - -53 -00:33:39,720 --> 00:33:42,060 -Wes Bos: You said I kept on. - -54 -00:33:42,540 --> 00:34:15,650 -Scott Tolinski: So sorry, a little minor aside here. I did a little talk at galvanize about my career on on Friday. And I just got to like, oh, a shout out to everyone at galvanize. By the way, it was really fun getting in there. And I just got to do a little overview of like, maybe like, a web development career path. But I kept saying sayings that I've never said before, or like I was just like, Oh, yeah, it was bad. 100. And then I was like, wait, I don't even know anything about baseball. I don't know if that's the right term. I just kept on saying stuff like that in my head. I'm just like, oh, like, is that right? Is that right? Is that a thing? - -55 -00:34:15,689 --> 00:35:42,630 -Wes Bos: I do that when I teach to just say these stupid things? You're like, Where did that come from? I guess it's just that the nerves of being in front of dozens of people talking about technical stuff. Exactly. That's exactly anyways, uh, yeah, you got to run your own nginx Apache on these on these servers, which is, is okay. I'm glad that I do it because you can eat I learned a lot about how nginx and whatnot works. And you also have to run your own SSL certificates. So yeah, I specifically use Let's Encrypt. And what that will do is it will just generate a I think it's like a three month SSL certificate for you and it will validate it No problem for you, a lot of these nginx servers will automatically work with Let's Encrypt, so you don't have to do any custom config. And then you have an SSL can certificate for three months. The one thing you need to do, which I did set up properly, which is you have to set them to auto renew those this thing called cert bot that you can you can set up a cron job that will run every three months and, and renew your, your SSL certificate for you. But then I forgot to set up a cron job to reboot my nginx server. So I woke up one Sunday morning to all of my sites having broken SSL, and I was like, Oh, this is gonna be a fun Sunday. And then all I had to do is type nginx. Reload, and it was back up and running. super nice. - -56 -00:35:42,630 --> 00:36:30,570 -Scott Tolinski: Yeah, one, one thing I want to touch on before we get off the nginx config and Apache config files, these config files, if you haven't worked in them, it will if you have worked in them great. Like if you're experiencing you know what you're doing them than a okay. But if you don't know what you're doing, and you're learning, be prepared for a lot of headaches. Because if you make a mistake, you restart your server, your server is not going to restart or it's not going to load, you could crash all your stuff, none of your stuff could be working. And it could be a very minor syntax error in your Apache config file. But at the end of the day, if you haven't worked in these things, you might want to spend some time learning the basics, maybe learn a little bit Well, why you're typing and why instead of just trying to copy and paste a lot of stuff because it is super duper easy to crash your shit. - -57 -00:36:32,160 --> 00:37:22,460 -Wes Bos: Exactly. That's it that wasn't even on purpose. Take a drink. And that is that is no fun trying to get nginx and Apache configs to work as well, there is a sort of a third server, there's all kinds of servers out there. But there's another one that started gaining traction. It's called caddy server, and what caddy server has SSL baked in. So you don't even have to worry about generating an SSL certificate if the server itself has all that baked in with Let's Encrypt, and it will renew itself and do all the smart things for it. So that's something I expect to see a lot. Yeah, it's, it seems pretty neat. Like I haven't moved over to it yet, just because like, I don't have a pain that big. Like, yeah, SSL certificates are hard. Yeah, to do. But I also it's not big enough pain for me to switch my entire server out. - -58 -00:37:22,880 --> 00:38:27,750 -Scott Tolinski: Yeah, a lot of this stuff is something that you would change over at the beginning of a new project, maybe when you're like putting together your stack or whatever. But if everything's working, like I mean, don't, don't touch it, like why unless it's like you need maybe a performance issue or something like that. I also want to stress that these these private are these virtual private servers are these managed boxes, or whatever they come like blank, essentially, a lot of times like other than if they have, you're doing a pre configured version, and you're pretty much just selecting your version of Linux, like, here's what version of Linux I'm going to be running. And then you have to actually install everything, you have to keep Linux up to date, just like as if it was a computer that you were running yourself, right. So if you aren't interested in that, you're going to want to do one of those maybe pre configured droplets, I think droplet is really just a that's a digitalocean term, right? Yeah, like that. They came up with droplet because their whole their whole branding. So I guess when I say droplet, I guess I just mean any sort of server that you're spinning up on any of these cases, only an image that you started. - -59 -00:38:28,400 --> 00:40:11,480 -Wes Bos: Yeah, like if you were working in an IT department, and they give you a laptop already with Photoshop on it already. That's, that's a pre configured image, that's a droplet that they would just stick on to that server. Because it's so common, everybody use these things, you don't have to go through the whole rigmarole of trying to install different versions of node and compiling binaries and whatnot. There is another sort of option to do this. And that is using Docker and Docker is not something I have a whole lot of experience with. But the idea behind this is that like, currently, when I develop my my apps, I have my local config. And then I also have my server config. And then I just pray that it works the same on my local config as it does on the server, right? And we've all had this thing like well, weird, it works on my machine, but not when I deploy it, right. So Docker is the idea of you just have these containers that run run your code. And the exact same image that runs locally will also be deployed to your your production website. So you know that if it works, you don't have to worry about like, oh, weird, it works on Windows, but not on a Mac. It just it's just a sealed up image that runs on I think it's virtual box, which is sort of like a virtual machine that you can, you can run these things on and it's really nice to be able to get it to not have to worry about things not working on specific places. forms because you just have this sort of tiny little like Tupperware container of of your code that you can just like, you can put it anywhere. And you can also deploy Docker images to, to zetes. Now as well, - -60 -00:40:11,520 --> 00:40:48,420 -Scott Tolinski: yeah. And that's one of those things that like, the more closely your dev environment mirrors your production environment, the less you're gonna have to worry about there being any sort of confusion or difference there. Can you imagine? Like, I mean, even like, right now, granted, it's Unix and Linux, but like, my development environment is a completely different operating system than my production environment. And, and that, well, that's fine. But like, just little changes like that might have a different effect. And then you can sometimes be prepared for. So yeah. So that that's pretty much do anything, anything else on these types of hosts, - -61 -00:40:49,110 --> 00:42:24,090 -Wes Bos: I got one more, which is spa hosting single page app hosting. And that is when you have an application that has no back end. It's entirely client side and less likely a react or an Angular or view application. And you're just interfacing with API's? Like, what do you do with that, right, and there's a couple different options, you can go back to our second option, which is just throw it on a PHP server, because at the end of the day, your app is just an index dot HTML file, and a whole bunch of JavaScript. And you don't need anything special to in order to run those things. So the only gotcha that you need to know about when you're running a single page app is, is routing, because in your react app or your Angular app, it uses push state to change the URL bar. So if you go if you're on the home page, and you go to forward slash about, it will automatically just change that without having to reload the page. That's what's called a single page app. But if someone were to go directly to forward slash about, your server needs to be smart enough to know, okay, there's no folder called forward slash about, I just need to regardless of what the URL is, I always just need to serve up one file, and that is index dot HTML. And you can do that really, really simply with a ht access file on an Apache server or whatever the equivalent is, on the the engine x file. I have little, little a couple little examples that I have on my computer for whenever I need to just throw something up real quick. - -62 -00:42:24,110 --> 00:42:33,030 -Scott Tolinski: Yeah, yeah, I know, I keep a keep a handful of stuff like that around to just save your butt here and there. Exactly. And - -63 -00:42:33,030 --> 00:42:50,280 -Wes Bos: there's also I think, I feel like I should mention Netlify as well, sharing sure if I'm saying that right or not. But there are now services that are, are sorted out, they're just targeted towards these single page apps. And hey, let me pull up the website for Netlify. Real quick. - -64 -00:42:50,310 --> 00:42:52,260 -Scott Tolinski: Yeah, I've never said that word out loud before. - -65 -00:42:52,920 --> 00:43:48,840 -Wes Bos: Netlify. Within Netlify? Yeah, like you put it on the net, you fi it Netlify. I think that's it. So okay, um, it does all of the hard stuff for you. So you can just deploy your single page app. But it will do caching for you, you can have a whole deploy thing built into it. It will, it looks like it does a CDN. So that's really nice. If you got a whole bunch of images, you don't necessarily have to use an external CDN, it will just pick up your images and just distribute them throughout the world. So let us fast for absolutely everything. continuous deployment, I'm sure you can do like some Git integration here for for all that good stuff. So now five seems pretty good. I've only seen people say really good things about it. I've never tried it myself. But I've heard people just just going crazy over it. So I would definitely check that out if you're trying to like deploy a react app. Yeah. And it seems like they have a free tier without a credit card as well, which is - -66 -00:43:48,840 --> 00:44:15,630 -Scott Tolinski: great. Yeah. It seems like it would be a great place to host a get Gatsby site. I know they do. Like they have some neat tools and stuff for that a lot of good tutorials. So yeah, yeah. Netlify. And that seems really cool. Again, I haven't used it. It's been on my radar for a little while. It's one of those things I've been wanting to dive into, but like just gotta find the time. But it looks looks super cool. They got a cute little website and nice looking documentation. - -67 -00:44:17,130 --> 00:44:42,000 -Wes Bos: That's pretty neat. One thing we didn't touch on and I think we'll save this for another show itself is serverless. So like, what about serverless functions? How do you deploy those where do those go? And that's sort of a that's a whole nother bag of tricks. So we'll we'll save that for another show. If you're wondering where that is in the show. word word All right, let's uh, let's do some sick pics. You got any sick pics for me Scott? - -68 -00:44:42,000 --> 00:44:42,720 -Unknown: Ooh. - -69 -00:44:44,190 --> 00:44:46,080 -Scott Tolinski: I do not let me think - -70 -00:44:46,110 --> 00:46:43,350 -Wes Bos: I got one here. I'll I'll do mine first. Well, it may be you. You think to look around your office for something cool to say. This is more of like a sick trial. So I always see is Facebook and Instagram. For these, unlike these Kickstarters for these magnetic iPhone, micro USB USB C cables, so you know like the old MacBooks had the magsafe on it and that was like the best thing ever. Somebody came up with the idea of like, Why don't USB cables have this so I always see ads for them. And I always kind of look at it and go Yeah, right like it's a that's a crowdfunding thing. It's never gonna show up. But I started noticing them on Amazon for I think I got so I got one. It's called, I'll show Scott on the thing here. It's got a magnet on the end. And then it comes with three tips. Lightning cable for your iPhone, it comes with a USBC for your Android and then a micro USB for your older Android or everything else in the world. And then it's just got like a magnet on the end. And it's so cool. Because first of all, it totally works. The one I specifically got has a really good magnet on it. And I'm not using it on my iPhone because I've got cords all over my house and I have to take the little end out and that's annoying, but I'm using it or what I am using it for is my my wireless Bose headphones. Because every time you have to charge them which is once every two days, you have to like find the micro USB cable and then plug it in and micro USB is hard to plug in. So what I just did is I put the little nub in the end of the headphones, it barely sticks out. You can't even notice it when you're wearing it or looking at it. And then I just hear I'll show Scott and my thing. You just kind of put the magnet near it and it just like it's like a snake looking for what a snakes eat mice like a snake trying to get a good amount of mongoose - -71 -00:46:43,350 --> 00:46:47,280 -Scott Tolinski: that they're not eating mongoose only battle. - -72 -00:46:50,400 --> 00:47:55,800 -Wes Bos: Let's get we'll link up a snake vs mongoose YouTube video. But it's so cool because it for me to charge my headphones. Now if I'm just gonna run downstairs and grab a coffee, I just will click that in real quick and it will just automatically charge. So I really, really liked that. And then somebody else on Twitter told me that you can also get them for the MacBook now. It's a different it's a USBC cable, but it also it's a special one because it's USBC is a bit of a mess. There's all kinds of different types of USBC cables, and the one I needed needed to be able to support 87 watts to charge the MacBook Pro. And I only got it yesterday so I'm not gonna sick pick it just yet, but I'm sick trying it. It's kind of cool because there's this little knob that goes in the side and it brings magsafe back to the brings me say magsafe back to the MacBook Pro. Which is really, really exciting. And it's not as big like Belkin had one out, but it was like this massive thing that would go in the side of your laptop. And this one is much smaller. But I don't know how well that's gonna hold up. So I'll wait a month or two and I'll have a sick follow up. - -73 -00:47:56,130 --> 00:48:25,590 -Scott Tolinski: Yeah, that was always one of my like, what were they thinking moments when Apple removed the magsafe The magsafe was like one of the single most useful inventions on their computer and like my plug in already my like new plug is already bent for my MacBook Pro just because I got a dog and a couple dogs and you know, who knows, like something knocks the computer off the table. It's like now I have a problem I have to worry about like again after not worrying about it for most of my life. Well, yeah, me too. I - -74 -00:48:25,590 --> 00:48:54,330 -Wes Bos: anytime I teach. I'm plugged into a projector and I usually have to like trail my cable to some obscure outlet across the room. And always myself because I'm very emphatic when I'm teaching I always kick the thing. And so I'm happy to have this. If not, I'm not going to put it on my desk because I have this thing like you that doesn't my Oh, my monitor is in charge at the same time. But I'm going to do it for sort of for travel. - -75 -00:48:54,750 --> 00:48:56,040 -Scott Tolinski: Nice. I like - -76 -00:48:56,490 --> 00:49:06,420 -Wes Bos: fix my check it out, check out the show notes. Check out the show notes for the link but if you like are skeptical and maybe wait like a couple months before, I'll tell you if it's worth it or not - -77 -00:49:06,750 --> 00:50:41,670 -Scott Tolinski: sick. I'm gonna be I'm gonna go a different direction here. I'm gonna do something maybe a fitness related. We talked and the fitness episode about some of our supplements that we get and one of the things that I really like is this this company called bulk supplements.com. I actually asked where you get your sleeping bag of caffeine for a race. It's so I buy all my my supplements from bulk supplement, or at least the ones that I can can do in powder form like creatine and whatever. But like I buy them from Amazon and they come in this giant as bag and they're super duper cheap. And the quality's unbelievable, everybody gets five stars and everything. Prices are just so so good compared to other supplement companies. And you can tell it's like no nonsense because there isn't a bunch of like shitty marketing all over the package. It's not like bunch of crazy colors and ridiculous names of things. Yeah, right Yeah, exactly. There's so many of those it's like Dr. Jekyll and Mr. Hyde like transform your palm so brutal it is it's totally brutal So these things are like in a white bag with like a their logo on it it's like totally non described and the but yeah the the bulksupplements again I have nothing but super high quality for me and the prices again are just super nice. So if you're into mixing your own supplements or working out or any of that stuff definitely check out bulk supplements before you you buy your next can have whatever because it might be able to save you some bucks. - -78 -00:50:43,320 --> 00:50:44,520 -Wes Bos: Sick pick - -79 -00:50:44,550 --> 00:50:50,700 -Scott Tolinski: sick suit. I mean, we need to make that soundboard I just want to push a button took sick, - -80 -00:50:51,270 --> 00:50:58,800 -Wes Bos: sick. I will do that. That's that needs to happen. Awesome. Any shameless plugs? - -81 -00:50:58,830 --> 00:52:00,870 -Scott Tolinski: Yeah, I'm gonna plug at the level of tutorials pro subscription service, I've been doing a new premium tutorial series every single month for a level of pro subscribers. And this stuff is really, really, really dope. I've been working really hard to make every series exactly what the subscribers want, you can vote on the up and coming series. So for instance, the most recent series that was voted on was react and Redux for everyone, which came out last month is 21 videos on learning react and Redux. And the most basic possible way I've heard from a lot of people like some of the the feedback I've gotten was like this is the easiest way to learn Redux for me, because I tried a lot of other things. And that was really my goal. Before that I did a CSS modern CSS layouts, which touches on some CSS Grid and Flexbox stuff. But again, a new series every single month. And I'm really excited to just continue and keep growing and every single month producing major major content. So check it out, level up tutorials.com forward slash Pro, - -82 -00:52:02,190 --> 00:52:24,480 -Wes Bos: Pro, awesome. I'm gonna plug again, my CSS Grid course just came out. I'm really stoked on it. So CSS grid.io it's totally free. And then you can sign up for it and take it I'm currently working on some some other stuff. I just sent an email out about it. So check your email inbox, check it. Awesome. Thanks so much for for coming out. And we'll see you next week. - -83 -00:52:25,020 --> 00:52:37,200 -Scott Tolinski: He's exactly, head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax290.srt b/transcripts/Syntax290.srt deleted file mode 100644 index 7ca16c56e..000000000 --- a/transcripts/Syntax290.srt +++ /dev/null @@ -1,244 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,560 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and Wes Bos. - -2 -00:00:10,590 --> 00:00:23,910 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there. My name is Wes Bos. I'm a full stack developer from Canada and with me as always is Mr. Scott to linsky. How you doing today, Scott? - -3 -00:00:23,940 --> 00:01:16,050 -Scott Tolinski: Hey, I'm doing good. Just taking out just hanging out. Landon had his first trip to the urgent care he slipped and fell and sliced open his chin and we were Oh yeah, it was super bad at where I was very convinced he was going to need stitches. And then they did surgical glue. But man, he's a little champion. He did not even like he didn't even bat an eye. They were you know, pulling open his cut and whatever is fantastic. Oh, you're off? Yeah, that was the ER look look like right now? Well, it was well, we went to an urgent care, which isn't technically not the same thing. It's sort of just like a little shack. It was chill. There was nobody there. They had us all in there, our own little section. And Landon wore his incredible hulk mask. And we all just sort of hung out. It was fun. I mean, definitely, like not not bad at all. I was a little concerned going in, but it was it was all good. - -4 -00:01:16,370 --> 00:03:47,220 -That's good. All right. Today we are sponsored by two awesome companies. First one is Sanity, which is a structure content, CMS and Sentry, which does all of your error and exception tracking. We'll talk about them partway through the episode. So today, today, we've got a potluck going which we I was looking at the thing that we used to do potluck once a month, and it's been five weeks since we've done a potluck. So long, long overdue. And these are just questions that you submit, and we will answer them for you. If you have a question you'd like to get on the show, go to syntax.fm. In the top right hand corner, there is a button that says ask a follow up question. Go ahead and pop it in the box. And we will probably answer it on the show. So let's grab the first one. The first one is from Ryan Hayes syntax, boys, you've talked a couple times in the past about security concerns around target equals underscore blank. Just a quick reference Episode 269, we dove deep into why target underscore blank could be a possible security issue. But mostly isn't anymore because the browser's have sort of fixed that but it says you mentioned how adding REL no opener and or REL no refer can secure this functionality. But what's to stop a savvy person from going into dev tools and deleting these attributes or for clicking a link? Does this defeat the entire purpose? Or for what surely browsers have thought of this? And it's not so easy to hack? So the question is okay, like putting no open or no refer on a link fixes the security hole? Like what if somebody takes it off? That's what's referred to as a self access self cross site scripting, meaning that the user has to intentionally go and disable it like, like, what if you take your parachute off when you jump out of a plane? Right? Like these are things that the user would have to intentionally do themselves? And then there's also like, you have to be very technical. So like, like, why would a technical user even even do that? The reason why I picked this question is because the whole idea of self access can happen. Like if you go to facebook.com, and open up the dev tools, you you're greeted with this immediate, huge stop. This is a browser feature intended for developers, if someone told you to copy paste something here to enable a Facebook feature or hack into someone's account, it is a scam and will give them access to your Facebook account. So it's the same thing as using dev tools. You're in a privileged environment. And if you intentionally shoot yourself in the foot, then yes, pretty shoot, but I don't I don't think that's actually a issue. Yeah. - -5 -00:03:47,630 --> 00:03:55,259 -Next up is going to be a question from falck. He asks, first, thanks for the amazing podcast. I've learned a lot and gave me lots of smiles. Thank - -6 -00:03:55,259 --> 00:06:40,890 -you for the question. Why did you not mention stencil stencil .js dot com When talking about web components on your last potluck, and I presume you had not heard of it. So I'm going to stop you right there. I hadn't heard of Central but for some reason, it just popped in my head when we were doing this. In fact, I have taken a decent look at it. The cool thing. For those of you who don't know stencil is a neat library stencil j s calm which allows you to do web components, stencils like sort of their whole it's by ionic but their whole deal is that they're they're advertising is like you can use stencil components within react within view within spelt. And it plays nice with all of them. To me, that's a pretty big selling point. Because if you're looking to ever build a tool that allows people to do the same thing as something else, but you want them to use yours, then having like a clear migration path is definitely like a good, good thing to have built in. In fact, I think that's probably a reason why it's so hard for new JavaScript frameworks to take off in some ways because well, people are already using you know, I'm already using react. So why would I ever think about putting something else in my codebase, because you know that that transition, or maybe the interplay would be a little bit difficult. So I pasted some code here in the show notes. That is what a stencil component looks like. And it's really pretty neat. It uses decorators, and it looks a lot like a, it looks like a lot like a react component. Now, one of the neat things about stencil is that it uses JSX. So those of you coming from a react should feel pretty at home with it. Again, it's a decent little framework here. And definitely something to keep your eye on especially as web components become more and more of a use thing. I think things like stencil will be more common to see in the wild. Either way, I think stencil is awesome. And it definitely was on my radar. But when preparing these shows, it's it's not always easy to remember everything all the time, especially when you're when you're someone like me with a memory that is not perfect. So that that's the scoop on stencil, I highly recommend if those sound like things that you're interested in, and you're interested in web components, checking it out. I'm gonna let you grab the next question cuz I've just laughing Yeah, looking at it. This next question I added here is HTTPS code, whatever forward slash forward slash www.syntax.fm supposed to now work, I get an error message for four not found? Yes, we intentionally built the website to not work. And if you arrived on it, and it was not working, then that was to be expected. In fact, you have actually hit the real website, which is supposed to be designed to be a 404 page and not have any useful information. Definitely, yes. We built it that way. That's why - -7 -00:06:41,010 --> 00:07:22,740 -it's not supposed to work. That's That's funny. Someone on Twitter yesterday, I was talking about my wife cam. And and someone was like, Oh, they care more about Google Analytics, then taking our money. Oh, yeah. Oh, yes. I really care more about Yeah. Like there was like a, like an error. And they couldn't pop up in the BI modal because something new with Google Analytics broke it. And like, they don't care more about who Linux it's selling you the thing? It's, it's a bug and the thing broke, obviously happened. Bugs happen. So don't be snarky when when things like that happen. Yes, I know. Both sound complete, could not work and you can't see anything or click on it. Is that supposed to be that way? - -8 -00:07:23,070 --> 00:09:32,610 -Oh, no. There's some dev sweating at the same time that you're you're trying to get it to work. So just remember, there's, there's people behind these things. So next question we have here from Gabe. Hey guys wondering what advice you have for self taught switching from a totally non tech industry, nonprofit arts. In my case, where I work in a tech role, I've hustled and built a portfolio of projects. And I've learned a ton from both of your courses. But I feel in my experience is seen as less value because they don't work in traditional software slash web development environment, any tips for getting over the final hurdle and getting jobless kind of interesting. So works in a non tech industry, but in attack role, not a typical software development role. I don't think that this is that big of a deal. One thing I was thinking about the other day, how it's so cool, like Scott Scott's wearing a go cracking hat right now from the the NHL, yes, because someone who listens to the podcast saw that Scott was tweeting about it, and then they sent him a hot. And I was like, it is so cool that we always have techies inside of every single company, regardless of what type it is. So it sounds like in this case, you're like in a tech role, but probably not specifically building software and building websites. So I don't think that is not as valuable, it certainly would be your first web development role. So that's always the sort of hardest thing to do. And it sounds like you know, what you've done is you've built a portfolio of projects and, and put yourself out there and really, I think at the end of the day, you just need to keep doing that keep building stuff, keep putting projects out, keep writing blog posts, keep doing whatever it is that you feel like is a good use case of your time. And then eventually, you're gonna get someone's gonna take a chance on you and bring you on for their first web development job. So honestly, I think companies are often looking for these types of people because they're hidden gems, right? Yeah, they're the people that aren't web developers yet, but are probably could be easily skilled up and trained, especially because they have like a whole host of different types of professional experience that come in handy. I - -9 -00:09:32,610 --> 00:10:18,919 -mean, working in a professional role in any regard, requires a lot of different skills that are not just Can you type key and get code to work. You know, being a professional in any regard requires you to have those experiences. So I think like you said, These people can be totally hidden gems, and this might be a good opportunity for you to explain some of these things in a cover letter. Like typically when you're applying for jobs, it might be a good opportunity. If you say all right here is what could be a perceived weakness, but just like mmm and a model, you can come out and get in front of it. You say, Yeah, that's right. I haven't done a web developer development specific role anymore. Here's why. That's great. Unless I assume you haven't seen that movie because I thought that was a funny joke. And you're not - -10 -00:10:18,919 --> 00:10:20,399 -Unknown: know what movie is? - -11 -00:10:21,270 --> 00:11:06,630 -Scott Tolinski: Eight Mile a mile? I don't think so. No, that's the one with m&m right. That's the water that bit of Yes. Yeah, no, I need I need to put that on. my list is growing. Your list you don't need to know. Someone, please make me a list of like, 10 movies that I need to see, to just get me into the fold of Scott's jokes. One time we had a friend that was this is unrelated, but somewhat related. We had a friend who like had a heart to heart with another friend and was like, 100% serious. They're like, I feel like you're not laughing at my jokes. We've always been like cracking up. So anytime, like I say something that I think's funny and Courtney's like not laughing and to be like, Courtney, I feel like you're not laughing at my - -12 -00:11:06,630 --> 00:13:04,049 -jokes. I cannot. Okay, next question is from Adam. Adam says what makes a software engineer senior. So typically, what makes someone a senior engineer by role is specifically that they've been given the opportunity to be promoted into that role. That I mean, that's really what makes someone senior. But if you're asking, what are the things that somebody as a senior developer does, that's different, I would say these people have a greater handle on what it takes to manage a team, they have a greater handle on what it takes to pick software responsibly. Some people pick software, when they're when they're creating a project, or they're deciding things. And they'll just pick it based on whatever's hot, whatever's new, whatever is cool, whatever, without understanding what the implications for that would be for the entire team, the future of the project, yada, yada, yada, the bottom line, right. So what makes a senior software engineer will typically they're pretty responsible in terms of making responsible decisions for their team. They know how to manage and work with a team, they know how to talk to management, and they typically are able to express in layman's terms or non tech terms to people who are stakeholders to let why these things are important or what needs to happen, at least in my perspective, in my experience, that's what senior software engineers have done. Yeah, I also think like, another big one of a senior engineer is being able to look at an entire project and break it down into the pieces that are needed. And maybe different projects may be different servers, maybe you need a standalone back end, and then you need react app for for the web. And then maybe you can build something else for the for the iPhone app. But just being able to sort of take a step back and say like, this is how we're going to architect everything, rather than the nitty gritty of should we use hooks or something else, right? - -13 -00:13:04,470 --> 00:13:05,190 -Yes, right, exactly. - -14 -00:13:06,330 --> 00:13:49,409 -Next question we have here is from Sam. Hi, guys, longtime listener, first time caller looking for advice. I have a Gatsby j. s and an Netlify client project about to launch? What's the best approach on handing over to a non technical client? Do I keep my GitHub account? And just give the client Netlify CMS login? Or do I create the client their own GitHub account? So I can that I can access for any maintenance? What do other devs do? So I think have you used us Netlify? CMS before Scott, I have is there multiple roles? Is there like multiple roles in that? Because at the end of the day now by CMS just as markdown, right, it's a GUI that sits on top of markdown. Right? - -15 -00:13:49,439 --> 00:17:06,900 -Yeah, it's a it's a markdown GUI to say that in the just swap the words around? Yeah, so nullify CMS? It does. It's an Netlify GUI. And typically, it's a pretty lightweight CMS, I had night considered using Netlify. CMS for an application that a user will touch like a non technical person will touch. Because typically I think of that is still just being like, slightly one step in front of somebody editing markdown files, right? Like the interface is nice. And it does get you a GUI and like proper little widgets for whatever you want. And those I guess that is a big jump in front of markdown file editing. But in the same regard. I don't know if I've ever considered using this for a project for non technical people. We actually actually have a netlify CMS set up for Scott tolinksi.com just in case I ever feel like it didn't do a GUI but what do other devs Do you know what this one I'm not entirely positive what other people would do because I just don't I've never necessarily considered this as being a practical option for client based projects. That said, what I would do is I would give them a login though, make sure they have their own login. I would did absolutely not have them create a GitHub account because normal people do not know that GitHub isn't? sure if I was the normal person, it would scare the life out of me seeing all that code and those green boxes, I mean, what's up with all this stuff. So I would not give them a GitHub account, I would make them have their own account, it give them training on it. So here's a low key aspect of passing off a project to a client that a lot of people tend to forget, when passing off a project to a client, you need to train your ear, dear maintainers, the people who are going to be maintaining this content and writing it, you need to train them. So if you set up a an account for them, here's what you do, you get them on a zoom call, you record the zoom call, if you're on a Mac, QuickTime has a nice little screen recorder. And you just talk them through exactly what you do. And then at the end of it, you spit them out a video file and say, oh, by the way, I recorded this talk for you. Anytime you need to go see how to update post, open video update post, there you go. So killing two birds with one stone, you give them a reference, and you get to train them at the same time. So that's what I would do, I would make sure they are trained, especially if it requires some technical aspects to it. I would assume that multiple maintainers could access the Netlify CMS but it's not something I've experienced with I know they can but I don't know what the role systems like I think like maybe this should have been like this is intentionally why I didn't use markdown in my latest course, even though we're all developers taking the course and they could all edit the markdown, the target of the courses is people that are going to be handing off these projects to non technical users. And they need you need a you need a CMS, you can log into and edit and drag and drop things and whatnot. So that's something to really think about. But for you Yeah, I would just, I would make some a secondary, I think that you do need a GitHub account to actually edit it. Because at the end of the day, when you hit Save in the Netlify CMS, it makes it get commit to the actual underlying markdown. So you probably will, even though we said don't, you probably will have to make them a GitHub account, just so they can use that as a login. - -16 -00:17:06,929 --> 00:17:13,550 -I think you could do different accounts. Oh, I don't I don't see why you would need like a secondary account for yourself or like a whatnot. No, - -17 -00:17:13,550 --> 00:17:35,040 -I mean, what I'm referring to is not like a GitHub login. I'm like double checking this right now. But I'm pretty sure you can use other types of logins. Because I know they they support different OAuth clients. As I was thinking maybe you could be like, oh, let's have a Facebook login. Right. But I clicked on their site. And there are other options are like GitHub and get lab and Bitbucket just like Yeah, - -18 -00:17:35,090 --> 00:17:54,180 -because it's Oh, yeah, it's so tightly attached to version control limits, is right. That's where there's no database or anything It is, it is version control at the end of the day, so you do need to give them that credit. Yeah, I guess that totally makes sense. No, I think about it. But off the top of my head, I was thinking, Oh, yeah, they could have a Facebook. No, that that doesn't make any sense. All right, - -19 -00:17:54,180 --> 00:20:15,690 -next question. We have from guide, I recently blocked all cookies on my mobile browser, Google Chrome, I noticed something weird on a couple of websites that I know for a fact has been built using next j s and is not working as expected. They would load as usual after a second or so the content on the page disappeared with the error message sorry, and unexpected error has occurred. In some cases, it was printed in the site's font and with the same background color on the body. Why does blocking cookies do this to next JS website. So I actually get this sometimes on my, my own course platform, where people it's not the whole website doesn't break. But the the Vimeo embeds don't work because people turn off cookies entirely. And in order for Vimeo to embed my videos on my domain name and not have them publicly available cookies are needed for for whatever reason. So what's happening here is it's a rerender, or rehydration bug, mean that next jass will always serve up a either a server rendered on demand or a statically rendered version. And then when the browser loads, it will try to rehydrate it and rerender it on the client. And most the case you don't see anything happened because it's picking it up from HTML and moving it over to like a react application. And what's probably happening is they're trying to fetch some data from somewhere. I'm not sure exactly why cookies do this. But what happens is they're trying to fetch something, fetch some data. And because cookies are blocked, something Something has broken, likely some sort of authentication or session variable that is stored in the next day. It's probably not related to next Yes, intentionally. But it's just that the requests that it was made needs those cookies. So why does that happen? Because of that, should it still work? I say no, like cookies are part of the web. And if you turn off part of the web, then, like, I understand that there's privacy issues there and that those certain certainly should be blocked but cookies are still A major building block behind how a lot of the web works, so you can't just take them out and expect it to all work. We saw this a long time ago with people said, like, I should be able to turn off JavaScript and the whole thing should work. And like, yeah, also, yeah, no, yeah, - -20 -00:20:15,899 --> 00:23:27,690 -I know, I was gonna say the exact same thing. That's the first thing I thought of when they when I saw this. It's like people say, Cookie bad. I don't want cookie. So I turned cookie off. And it sure yeah, okay, you can turn cookies off. But whatever you can expect the experiences to necessarily be the same, or everything to work the same way that you'd expect them to with all of the features turned on anybody's worked in server side rendering for react knows just how much fun rehydration issues can be. Yes, things are tough to troubleshoot and troff tough to develop. But I would say most likely, like you said, it's not an X JS specific thing. And I would probably reach out to the creators of that content and just say, hey, just so you know, if you turn cookies off, this thing breaks. And maybe it is a simple instance of like what you mentioned, it's like the server components coming back fine. But with cookies turned off, part of the code is breaking. Maybe there's like a variable that's expected to be there. I don't know if you check the console or something. But rehydration errors can happen there. They're not often a lot of fun to debug. But yeah, most likely not a next JS specific thing. Next question is from Scott D. Scotty, what's up Scott d? How often do you make commits, I always hear commit often, but I'm hesitant, because I feel like I may change my code later. Before I make a pull request. I really like your episode on Git fundamentals. I would love a tutorial deep dive of Git workflows, when to commit, how often should I commit, even though what I'm working on isn't complete, or I need to refactor it? What is the code review etiquette? Okay, what I would do is commit often. So really, even if you're going to change your code later, committing code is really just basically saying here is like a landmark here is a landmark of like this specific time in, in the code development. So I still commit even if the code is going to change. And with a detailed commit message, it will tell a lot about what why the file is changing and how it's changing. Now, here's a little feature. I'm not sure if this is related. But I think this could possibly be related. Because you mentioned something about code reviews. Here's a little tip. So if you're in GitHub pull requests, and you have a pull request open, you will notice that there is a little button or link underneath the reviewers. And it says still in progress question mark converted to draft. And what that does is it converts your pull request ID to a draft so that everybody knows that this thing is, is still being updated and being worked on. So that way any commits or anything that comes into this poll request in the meantime, will not be asked to be reviewed, it's just going to be listed as a commit or the changes that have happened. So if you convert your pull requests to draft it specifically not going to ask for review on that code. Yeah, I recently just found this out. And because we were having GitHub actions, issues where one of our developers was pushing stuff to a pull request, and every time he did stuff, even though he didn't want it to be pulled yet, it was a GitHub actions. And so we were getting all these all these notifications. And we were like, how do we turn this off? That's when we found the draft button. - -21 -00:23:29,010 --> 00:27:13,200 -That's awesome. So what I did with mine is that I commit often just as Scott said, as well, after every single minor feature after every time I do something, because like I use also use Git for my own use cases where if I like if I change something about a function, I'll just commit it Why? So I can if I change it in a feature, or if I need to roll it back, I absolutely can. It just when you go to make that pull request into the master branch, often what people will do is what's called a rebase. So like, if I'm working on a feature, where I make a one thing I'm working on right now is being able to resize the list of videos beside the player. So you can make it smaller or bigger if you want to. So like that feature, if I might have 15 different commits on that, just because as I'm working through it, especially at the end of the day, it's like my, my nightmare would be my laptop gets stolen, or like I spill something or for whatever reason you lose a day or two worth of work that's worth, that's worth a lot to me. So I'll commit it and push it to my own branch, then do a rebase. So the way that it works is like let's say you have 10 commits, you just type Git rebase dash is the dash I stands for interactive, meaning that you can go in and interactively decide what gets included in what not, and the type head Tilda 10. And what that says is take the last 10 commits, and allow me to pick and choose what I want to do with them and part of that rebase you can do a whole bunch of stuff, you can remove commits and whatnot. Most likely what you're going to do is You're either going to pee, pick them, or s squash them, you can pick one commit, or you can also like rename commits that way as well. But you can, you can pick one, and then squash the rest into that commit. And then when you make your pull request, it's all nice and tidy into a single big commit. And then that makes any history or like, you go back in a year, like, oh, who's working on this feature? It's just a nice tidy commit where everything's in one, some people don't like that. They say, just leave your history as you wrote it, right? Like you you intentionally committed at that time, then just leave those 10 commits in and that's fine. Other people say, No, always make one commit per poll request. That's interesting. I've always just been like, you know, I don't necessarily care if the commit log is that tidy. Yeah, as long as it explains what's actually taking place within the changes of the code. So that's, that's a interesting perspective. To hear like that there is like a, a world where people need the tiniest, tiniest commits in everything interesting. So if you committed some code to your site, and it broke your site, then you want to use Sentry now, I'm talking about Sentry etc.io Sentry is the perfect error and Exception Handling service that tells you all sorts of great information about the errors that are happening on your code. And let me tell you, it's very, very nice. In fact, it related to this, if we wanted to potentially have an issue that was brought in in the specific commit, we actually have access to see what commit brought in that error, writing your Sentry dashboard, right in your Sentry dashboard. And then you can write directly from there, click another button and get it to great and open an issue where you can tag the relevant parties to whatever may have committed that error. So you're gonna want to check out Sentry Sentry.io, and use the coupon code tasty treat all lowercase all one word, and you will get two months for free. So check it out. Sentry.io. All right. Next question is from Fernando Saavedra. Hey, folks, I'm a big fan of syntax. I listened to new episodes as soon as they're Thank you, Fernando. I have a question for Wes. Oh, okay. What am I What am I Fernando here? Okay. - -22 -00:27:13,620 --> 00:27:27,540 -You can answer this too, I think how do you handle captioning and transcripts for your courses? Do you use some tool or service for that? Are you do you do it by hand in the West? though? I'm gonna I'm going to make you answer this one because I was not addressed in the question. - -23 -00:27:28,530 --> 00:29:48,660 -I have used several different captioning services in the past, and I have landed on rev r e v.com. To be the one so the way that it works is that integrates right into my Vimeo, you log into rev you select all the Vimeo videos, oh, wow, you you order them, it's a buck 25 US per minute. So it's not cheap. It costs usually thousands of dollars to caption each of my courses. But I pretty sure that that pays off entirely based on Deaf users taking my courses, like I get a lot of actual deaf people taking my courses, which is which is awesome to see. And they also like, keep me like, it's not just like some generated transcripts and whatnot and stuff like that, like like it like it's actual people that are going in there. And the way I think that it works, because it's getting faster and faster. It used to take about a week to get my transcripts back. And now it takes me usually 24 hours, I have the transcripts back and I think that's because the machine learning transcripts along with you give it a dictionary of words that you often say. So all I'll give it a dictionary of how to how to like NPM, lowercase react dot j, s spelt capital R. And I'll give it just a huge list of like technical words that I'm saying that are not English words. And that will take it into account, add them to the dictionary as they're generated. And I think what happens is that they, they get it 90 95% of the way there with computers, and then they have an actual person, go through it, and transcribe it and make sure that everything looks good. And I'm super impressed at the quality of it. And even even things like a capitals on component names are almost always correct. I do have them up on GitHub. And people do submit little fixes here and there because it's not 100% perfect, but it is very, very, very good. That's how I do it. They they publish them right to Vimeo. And then if there is an edit to one of my videos, I can either try to update that file myself if it's simply as I got a caption done for a couple of videos and I forgot to put the five second bumper on the front of each of them. So I use this VS code extension and it just bumps all the captions five seconds, which is amazing. Wow, - -24 -00:29:48,660 --> 00:30:14,850 -that's it. I was wondering how you do that with the time stamps. Yeah, yeah, it's it's great and they have a whole editor and rev as well. If I make more than like a minute or two worth of it, even if I if I attend second thing In the middle of it, I just reorder the captions for it because it's too, too much work to try to push them over and whatnot. Yeah, interesting. Yeah, they're their websites really nice too, has a neat little school of striped design kind of deal. - -25 -00:30:15,060 --> 00:31:07,140 -That looks very nice. Luckily, like I can afford to do it for my courses, because I don't I don't put out a course every week or whatever, and have enough people but buying it. But it's definitely something I would like to see on even on this podcast. Like I'm curious. Every now every couple of months, I come back to the computer generated transcripts. And I think they're probably almost at a point now, where we can probably just computer generate this syntax transcripts. We've never done captions and stuff for the podcast, just because it would be expensive. And also it would be it's a lot of overhead to our workflow in our process, especially when it was taking a week to get the captions done. When sometimes we only have like 12 hours between when the podcast is edited and when it when it's live. But I'm wondering if we can like work that in somehow into like a publish cycle, where the computer just generates all the transcripts for us. - -26 -00:31:07,200 --> 00:31:22,560 -I think that's a really interesting idea. And I think it's something we should probably get on. Next question is from Mike. Hey, Scott, and Wes, your show totally roles. Oh, I'm a recent graduate of By the way, we only pick questions that compliment us in the first sentence of they all day they all - -27 -00:31:22,800 --> 00:33:16,890 -start with I love a big fan. Right, this lesson unintentional, I assure you, it was not intentional. I am a recent graduate of a code school that focused on Ruby on Rails, the company I work at currently uses Angular for part of their react and rails. Oh, I'm so used to saying Ruby and Rails, I saw R and R and I, my brain autocompleted to Ruby and Rails, well focused on react and rails. And the company that I currently work for uses Angular as part of their stack, I would eventually like to move into a dev spot, but I'm finding Angular feels a bit stuffy. And I'm not as excited about it as I am react view spelt etc. I am afraid that if I dive into Angular, I will become less relevant down the road. And I want to learn everything. But I only have so much time and I don't want to stop my growth as a developer. Any thoughts on this would be sick. Cheers. Okay, so check it out. Angular, super relevant, super used throughout the entire industry. So by using Angular, learning Angular being good at Angular, you will not be losing any relevancy, you can definitely learn quite a bit about modern front end development as you use Angular, because a lot of these systems are all very, very similar in the way they handle things, such as just being generally components, Lego pieces that you plug in whatever. Wes and I are not an Angular developer. So you're not going to hear us go on and on about Angular, I have used Angular in the past version 1.3. But I know they're on a very high version now. And 60, or Angular version 60. But the people that use Angular tend to like it. I don't think using Angular is like a boon to your career, in any sort of way. I think. If your team uses Angular dive in become Angular, I really think it's, it's totally not only is it totally fine, but Angular, you know, it's a totally good world to be in. - -28 -00:33:17,490 --> 00:33:39,390 -Yeah, we get this question all the time. And with a lot of tech, and I think we need to make it very clear. Just because we don't use it doesn't mean we don't like it, it's because we don't use it. Scott, and I have our stacks and we like to use those stacks. And of course, we try different stuff every now and then. But at the end of the day, maybe Scott Canva I'm not switching stacks every single day. - -29 -00:33:40,410 --> 00:34:11,130 -stacks don't I mean, okay, so I do with probably have a bit of a reputation as a switcher of stacks and stacks which are but let's be clear, the level of tutorial site has been built in react from almost day one. So like I you know, I'm as much as I talk about spelt, and I like spelt, whatever, moving our entire code base to smelt or anything else, for that matter would be absolutely no fun. And certainly not something I'm interested in doing. So it's not worth it. It's not worth it. At the end of the day, I am practical enough to realize when you shouldn't Yeah. - -30 -00:34:11,670 --> 00:35:01,400 -And at the end of the day, you're a JavaScript developer, you should be able to jump from thing to thing, obviously, you're not going to immediately go from three years in Angular to react, but like a guarantee, all of the money in the world that someone who is amazing at Angular would be able to go through the React docs, and in like, four, four and a half days, take half day off on Friday can get really good at at Angular, right? Like, why because that person is probably a very good JavaScript developer, and the fact that they use different types of templates and different hooks and stuff. At the end of the day, this stuff is just JavaScript in the browser. So you need to remember that Angular gets such a bad rap, I think. I hope we don't contribute to that because I don't intentionally contribute to that. - -31 -00:35:01,880 --> 00:36:16,020 -I hope I don't write. Right like, like, sometimes we make English jokes and stuff like that. But like, again, it doesn't doesn't really matter, especially like, it sounds like you're at a job that already has an opening for you to transition into a web development role. That sounds amazing. You don't have to switch jobs. They already have a stack. Go for it. Yeah. Also, one more thing, one more thing. I missed that. Yeah, one more thing to play with see this all the time, in the bootcamp where we would learn at the time it was we would learn HTML, CSS, and people would just type their HTML straightaway and then know a little bit of JavaScript. And then we'd introduce them, WordPress. And then they would be frustrated because they couldn't just edit the HTML directly. And they would say, I hate WordPress and was like, You have been a web developer for three weeks. You don't hate WordPress, you have you have no ability to to go into this like you can. You can, like make this amazing revelation about tacking coding and stuff like that. You just don't like it because it's different. And it's not what you know. And of course, you might not like it at the end of the day, because you get into it. But you're not at a point right now where you can you can make that sweeping generalization about web tech. - -32 -00:36:16,020 --> 00:36:16,980 -Yeah. Well, and - -33 -00:36:16,980 --> 00:39:11,400 -let me just say this to the only way I'm going to be like, Listen, I am feeling that relevant is if the the place came with a stack that was like we're using mootools. And whatever. Like, at that point, I might say, okay, maybe I want to learn Yeah, I'm a little bit more modern here. Modern. Yeah. But Angular. Yeah. No sweat there. Okay. Next question is from Joel, how do you handle svgs. In react, I know SVG are exists. I do not know that exists personally. But I'd like to avoid adding another dependency. If it's something I can roll on my own. In the past, I've created functions that take parameters like fill or stroke or control color, return a string of the SVG code with the arguments interpolated in, then I place that string into a component using dangerously set inner HTML. I haven't seen this method before used anywhere else, not because it's bad. And probably because it's not the best practice. But it also works. So maybe I am fine. Okay, here's what I do. Listen, SVG is in react in terms of like, inline, SVG is there not a lot of fun. There's several different ways you can there's definitely a, I don't know about SVG or i'm not i'm not sure what that is. But like, there are definitely ones where you can import a SVG path, and then your build tool will then actually inline it or a react component that will inline it, you can reference it like an image and have it inline it No problem. But I personally, here's what we do, we have a react component that is a standard react component that all it is is a switch statement. And the switch statement takes a string of a name. And that name is the icon name. Now you don't need to have an spgb, dangerously set inner HTML, and you don't have to have it be a string. svg is just a valid valid react code. So you can just have a straight up SVG returned from a react component with no modifications to it, beyond the changing of view, ifunbox to view camel case box and things like that, for whatever reason, React doesn't like our normal data attributes. So I do that. And then I have things like accent, or color as props. And I just have a anytime I need to add an icon, I just add it to the switch statement with a string. We audit it from time to time, but it gives me full control over how the icons are I also have a size property that determines the size of the icon. If I need to do that style prop in case I just want to pass any CSS to it. So like I said, it's basically just a switch statement that takes in a name for a string and outputs, the SVG as an SVG, this gives us full control over everything. And it's pretty maintainable. Just like I said, add a new, add a new icon, you just paste into the switch statement, you need to replace one you just paste over the one that's there and whatever. And for us, it's worked very well, I've always done it this way. And it has never really led me astray. So this is this is the way that I approach. - -34 -00:39:11,730 --> 00:39:45,810 -In the past. I've used SVG R, which Scott mentioned, you can use it as a web pack plugin, meaning that anytime you import an SVG, straight from your react component, it will do all of that all those hoops and whatnot to get from SVG into a into a proper react component. And then also, there's just like a little thing online where if you just got one or two svgs just paste it into this little box and it will kick out the React equivalent code, copy, paste, put it in a component, Bob's your uncle, copy, paste put - -35 -00:39:45,810 --> 00:40:43,080 -in the component that sounds like like a nursery rhyme to the kids like alright, question is from Jordan white. What social media platforms do you use as a dev and what is cool to have what ones are Are there and what are their benefits? Social media burn at all? No, I, I say this is somebody who you is like, completely obsessed with using Instagram and Reddit for the most part. So your mileage will vary. I personally don't learn anything off of social media, unless it's a news aggregate like Reddit, like Reddit, or maybe Hacker News occasionally. But for me personally, as a dev, I don't think any of these things are required beyond like being the de facto user experiences that many people are, are running into. And you know, me, potentially the things that I'm learning from social media are like how, how an app that is used by millions of people should look and function and work. - -36 -00:40:43,080 --> 00:43:08,040 -So yeah, I'm gonna I'm very rarely disagree with you. I'm gonna say social media is pretty, it's not required, but it's pretty important. Yeah, well, I guess what I'm saying is, is that like, it depends on what you're trying to do here. Like, are you trying to grow a personality? Are you trying to grow? Like a, your reputation? Are you trying to have like a foot in the sand? Like, I don't know. Yeah, no, like, not not for like somebody like me, or obviously, I need to market my courses and whatnot. Like, if just a regular dev who wants to be a good web developer and work at a company? Do you need social media for that? Probably not. But that's how I stay up to date. That's how I stay in tune with what's going on is that you follow all of these different people in the word vomit has this sort of like awful side, benefit to it or not? Not? Awful. It's not a benefit. This awful side part where like, often people are very rude. on social media, there's a lot of toxic, you get a lot of like awful politics get mixed in with the web development stuff. So there's that and it's distracting and can take away from your job. But there still is, at least my opinion is still has a lot of upside to that type of them. So can I jump in here real quick? I embarrassingly enough forgot that Twitter is included in social media. Because you're right, I learned a mammoth ton from Twitter and the people I follow on Twitter. And as we say this, one of the few tabs that I don't close is my Tweet Deck. So like, you could ignore everything that I've said about this that because I just didn't think about Twitter. Yeah, maybe people just associate I was just thinking Facebook, social media with the awful ones. Yeah, tick tock, Facebook for developers. Let's go through them really quickly. Facebook for developers. I have a Facebook page. And I find that the people that comment on it are much more of an international audience. So I'm not sure if that's the thing or not, but I certainly do not enjoy Facebook. Except for marketplace. I love Facebook marketplace need to sell my car. Maybe I should dive into marketplace. Do you get people are flaky and marketplace? And yeah, oh my gosh, I've been trying to give away a piece of drywall. Yeah. Which is like, like it for free. Yeah. And I've had like 30 people be like, Hey, is this still available? And I immediately say yes. And then then you never hear from them ever again. So - -37 -00:43:08,100 --> 00:43:32,190 -either that or they're like, they're they asked the dumbest question. Like Courtney was trying to sell this like IKEA desk that she bought for like, you know, maybe 100 bucks. We're trying to sell it for 20. Yes, huge mark down because nobody's taking it. So we're just like, here. Here is this desk, please take this desk. Yeah, here's the model number. Here's 800 photos of it, whatever. And then the questions come in. They're like, Excuse me, could you tell me the exact depth of the desk? And oh, my gosh, - -38 -00:43:33,480 --> 00:43:35,630 -Unknown: how could you possibly not look that up? - -39 -00:43:35,960 --> 00:43:41,010 -Scott Tolinski: just Google it. And then she'll look it up. She'll tell them and then never hear from them again. - -40 -00:43:41,040 --> 00:44:49,770 -I know people are I'm such a good Facebook marketplace. Because I always tell people Hey, I'm gonna go check. I'll get back to you. But there's some awful awful people on on Facebook marketplace. That's I think it's something Facebook is trying to fix. Because if you don't reply to somebody, they'll follow up with a Hey, are you still interested in it? But it's hard to fix just humanity being awful. Anyways, Facebook Yeah, developer i don't i don't think so. I don't think that's a good spot. Reddit is a can be a good place for it. It's not somewhere that I hang out a ton. I subscribe to a couple of web devs. And I see that stuff. Come through every now and then. I think our JavaScript, our web dev, our learn programming, our learn JavaScript, those are all good ones to sort of get into there's platforms like what is the dev platform called? dev.to dev.to Yeah, dev.co that's that seems to be a pretty pretty good community. Lots of articles very very dev focused. So that one seems like a good one Free Code Camp has forums seems to be a good place to spend your time discord discord? Yeah. Oh, that - -41 -00:44:49,770 --> 00:45:08,970 -sounds good. Sure. Never. Yeah, level up tutorials. discord is kickin with people helping each other and sharing stuff all the time. Yeah, that discord is a really good one. I don't think it's developer Instagram is odd. I think it can be can be a good place. If you're looking for like, motivation, like thoughts, I - -42 -00:45:08,970 --> 00:45:42,330 -guess. Yeah, yeah, there's, there's a lot of like, really like, copy and pasted. Like, you know, 10 get tips there. Like I saw one the other day it was like, it was like 100 node packages you need to know, it's like, what, what, like, I'm not gonna go through 100 like your list of 100 node packages, and that will just be like, like, date FNS. But then moment j like it's like, as soon as they clearly like looked at the list that was like 100 most downloaded ones and turned it into an image. There's there's some stuff like that you got to wade through some some serious copy and paste garbage, I think. - -43 -00:45:42,510 --> 00:46:50,640 -And on the flip side, there's a lot of like, Instagram developers who, like I don't know if they code or not, but they post lots of photos. of like, the lifestyle that's associated with with coding, which like, like, I'm all about, like, I love a beautiful monitor and sipping a coffee with my code screen open as much as everybody else. But it's funny that there's like, there's there's people that have hundreds of thousands of followers, and never post anything about actual coding. Like they never talk about what a closure. Yeah. 10 closures to know. Yeah, yeah. But I don't know, it just I think it's just the the nature of the platform is very visual, and much more about the lifestyle and whatnot. So yeah, I think those are some things to think about social media. If you are a developer, yes, sorry, super derailed. And social media is a place where you can really lose your sanity if you you know, you know, prune your garden enough. So with more about our sponsor, this, this, this episode is us talking about Sanity. - -44 -00:46:50,940 --> 00:48:17,010 -Alright, so Sanity, you know, by now structure content, CMS, it spits out a API, you get this really cool CMS where you can log in and create your content types. And then you also can edit and add all the content, you know about that. But there's some new features to Sanity that we're gonna cover right now. First one is called presence. And this is really cool, because like we talked earlier about, like the client, having access to the CMS and Sanity is an awesome CMS for giving to your client, they just introducing this thing called presence, which will show you when somebody else is currently editing one of the fields or one of your data types. So it's like, almost like you know, Google Docs, you can see where, who's editing what and whatnot. This will put a little picture of who's editing that field above the field. So pretty, pretty cool. Also, I want to shout out another thing that they did is sanity.io forward slash create. And they have a whole bunch of different starters for things like Gatsby with Netlify, next jass with Netlify. I know they're gonna roll out a bunch of ones with versal and next .js as well, pretty soon, so make sure you stay glued to Sanity dial forward slash create. So if you want to check out Sanity, go to sanity.io forward slash syntax that's going to get you double the free usage tier. Thanks so much to Sanity for sponsoring. Thank you. Next question is from a chick Harith. - -45 -00:48:17,010 --> 00:48:17,550 -Ah Hey, guys. - -46 -00:48:17,550 --> 00:48:49,770 -Thanks for an amazing podcast. Another shirt question. Have you tried an ultra wide monitor for coding such as a 34 or 38 inches, I feel the extra width would be great for a single monitor setup but haven't been able to see one live where I live. Let me tell you, I have a 38 inches monitor. That is fantastic. And I absolutely love it. And let me tell you, it is very impressive to look at this. So if you haven't seen one live, don't worry when you plug it in and you turn it on for the first time. - -47 -00:48:49,800 --> 00:48:51,030 -You will not regret it. - -48 -00:48:51,000 --> 00:49:24,870 -Yeah, 34 or 38 inches, it is a sight to behold I mean, I I remember getting my first 24 inches monitor and thinking this is the largest thing I've ever seen in my entire life. Let me tell you, these 38 ultra wide monitors are very, very good. And the cool thing about it is like being able to have you know multiple code tabs and your website and developer tools open all the same time on one monitor is just nothing can be that I'm the type that struggles with like once I get everything on my 15 inch turn to get it all in the place where like I'm not just tabbing constantly between 100 different windows. - -49 -00:49:25,380 --> 00:51:17,310 -Wes Bos: Yeah, there's nothing better than being able to see it. I just like I almost bought an ultra wide the other day because I have a I have a 32 inch 4k and I left it at the cottage in my office there and I came home I was like I need a new monitor for home now. And I almost went with the 38 inch but I ended up just for resolution reasons going with another 4k display but like the minute there's an affordable, ultra wide that has a higher than 1440 resolution. I'm all over it because I'm so jealous and Scott's like being able to have it because I have two monitors. But like there's a huge bezel in between them, and you have to angle them at the right thing. But having a nice curved display is my dream. Yeah, curved, ultra wide. Definitely recommend. Cool. So this is the part of the show where we talk about sick pics things that we have found to be sick. The reason why I decided to, like pick these things, and the fact that I was doing the dishes last night, and I was thinking, Man, I wonder if other people know about these tools that they have for doing their dishes that I love so much. So I have three tools, or doing the dishes that I am. I'll have links to in the show notes, so you can imagine them or seeing them. But Wes, I'm gonna be interested to know if you have any of these products, okay, they're all really super cheap one is a knife cleaner, which is so I don't know how you wash your knives. But I've always like took in a scrub daddy and I got to do the edges and the other edges. And then knowing me I'm such a spaz that at one point, I'm sure I'm gonna slice my hand open at some point. So I got this neat little thing that is a knife cleaner, which is basically like a C shape that has scrubbies on both sides. And you can just sort of slide your hand up and down the knife to clean it and it scrubs it really well without any any possibility of you cutting yourself. So this is number one. - -50 -00:51:17,370 --> 00:52:12,330 -Scott Tolinski: Is this knife cleaner? Wes, what do you use for cleaning knives? Oh, man, I I love this question because it's gonna trigger some people. So I have very nice knives and I've very nice sharpening equipment. And I put them in the dishwasher because I don't have time to clean them. This is so much faster. This is faster than is it but I just throw them right in the dishwasher which you're not supposed to do with nice knives because apparently surprised ruins them. Yeah, but I don't care. I just throw them in. I sharpen them really well all time and they work amazingly. That's Yeah, I guess for you because you do obsessively sharpen them where I don't necessarily. I don't necessarily do that. I mean, I sharpen them, but probably not as much as you are nice. Oh yeah. I don't know if the dishwasher makes them less sharp. It is supposed to dull them. Yeah, it is. Really I don't have the like the steel ones. The accurate rust minor still stainless at the end of the day, but still, I don't I just Yeah, I just sharpen them. - -51 -00:52:13,110 --> 00:52:40,860 -Okay, so that's number one. Number Number two is this really neat scraper like a plate scraper. And it's like a plastic plate scraper that really just is a piece of plastic on one end to allow you to scrape things off of plates like food, whatever Geez, so you don't get it all cut out your scrub daddy got one of these. And then the other corner of it is like, it looks like teeth were grooves in between like a skillet plate or a skillet pan so - -52 -00:52:40,860 --> 00:53:34,410 -you could scrub that pan as well. And then the last one that I'm going to be sick pick so three kitchen things is a chain. It's like a chainmail scrubber for your cast iron pans. Oh yeah, that's that's key as well because you shouldn't be using soap on those types of things. And so yeah, and cast iron can sometimes get grimy gastheren can get grimy and maybe you got some stuff stuck on there. And so this is basically looks like a little chainmail It looks like a chainmail towel. Again, obdlink style this stuff looks like a little chainmail towel that way here. And get any of that that hard to get stuff off there without rooting for a sponge or anything like that. Yeah, those those little scrapers are so handy. Even very bright. So looking and things like that. Yeah, being able to pull something off. It's sort of on the same I'm gonna post pick you right now and plastic razor blade scraper. Yes. - -53 -00:53:34,440 --> 00:53:52,230 -Yeah. So I have one that is half of it. One end is a plastic razor blade and the other half is an actual razor blade. So you can use the blade on the stovetop if you have a stovetop or the the granite or something like that. You can use the plus yeah or sticker you get like a sticker on something you need to scrape it off. Oh, yeah, - -54 -00:53:52,290 --> 00:54:15,330 -I used that for gas. Like I had to take an old gasket off of exhaust intake or off a carb on my thing. And I was like oh plastic because you can't like mar the surface. So I love those those. These are the my favorite sick pics because they're just like $5 thing. Yeah, Scots are so handy. That's cheap cleaning utensils. I'll have a whole little list of them here in the show notes. - -55 -00:54:16,590 --> 00:56:09,360 -Awesome. I'm going to sick pick an iPhone app called scriptable app. So iOS 14 came out like a week ago. And they announced widgets. And I was like awesome love widgets. I want to make my own. And I was like, can you like is there like some sort of iframe I could make where I could just like iframe a website in and upload my widget in JavaScript. And you can't, but I found this app called scriptable app. And they allow you to do JavaScript automations. And one of the features that just rolled out is the ability to make widgets in JavaScript. So you can't use CSS or HTML, but you can use their own API that I'm assume converts to native and it was great because I If I wrote a little widget that fetched my like my sales numbers for the day and really mean and displayed them right on it, so I don't have to, the way I would check my sales previously is they have like a little shortcut. And it would go and refresh the page and show me them. But now, I just have to look at my homescreen. And it fetches them. I'm not sure how often, but every time I look at it, it's been fetched within the last couple of minutes. And it was really easy, it probably took me about half an hour to write this little widget and get up and running. That sounds fantastic. That sounds like something I got to do. The workflow for it was a little bit weird, because you can't you have to code it on the phone. So what I did, I ended up just like coding it on my computer, copying it and then I use Shared Clipboard, so it would be in the clipboard on the phone. And then I just paste it in. And other people said you can put the file, the scriptable file in your iCloud. And then if you edit it on your computer, it will sync it with the one on your phone. It's not the best workflow and there's no there's no development workflow. So every time you want to test something, you got to save it and whatnot, but it's it's really slick. I was really happy to find it. - -56 -00:56:09,750 --> 00:56:48,330 -Interesting. Yeah, I've seen this around the internet on the social media, believe it or not. But yeah, that looks really cool. Got it. I gotta check this out. All right, a shameless plugs. I'm gonna shamelessly plug my master gatsby.com course this is the course that will teach you the JavaScript and the CSS and everything that you need to learn to build a modern web site with Gatsby react graph. qL headless CMS hannity actually one of our sponsors today, progressive images, scoping, your CSS serverless, functions, all of that good stuff, check it out, Master Gatsby calm and use coupon code syntax for 10 bucks off sick, - -57 -00:56:48,330 --> 00:57:20,670 -I'm going to shamelessly plug my latest course, which is going to be react j s. for everyone. What I did is I took some of all of the things that I've learned about react over the years. And we've had this is like now my fourth version of doing a react for beginners course. And instead of updating like, let's do a whole new course, because so much has changed. And while we have the old course that teaches the class components and all that stuff is still valid. We're going to be releasing a brand new course that is react with hooks from the very beginning in terms of like, you want to learn react. - -58 -00:57:20,670 --> 00:57:50,250 -Here's step one, let's write a function component. Right, let's, let's talk about these things as they are now not as they were whatever. So level up tutorials.com forward slash Pro. If you have been holding off learning react, this is the best time to do it. And this course will teach you everything you need to know to get up and running. Alright, thanks so much for tuning in. Hopefully you enjoyed that one. Make sure you submit your questions at syntax RFM and we will catch you on Monday. Yes, and be sure to tell us how much you enjoyed it at the beginning of each question - -59 -00:57:51,390 --> 00:57:52,020 -Unknown: your question - -60 -00:57:54,510 --> 00:57:55,230 -space. - -61 -00:57:57,090 --> 00:58:06,810 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax291.srt b/transcripts/Syntax291.srt deleted file mode 100644 index 2dee4c4ba..000000000 --- a/transcripts/Syntax291.srt +++ /dev/null @@ -1,104 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Unknown: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos, and Scott Tolinksi ski. - -2 -00:00:26,010 --> 00:01:51,000 -Scott Tolinski: Oh, welcome to syntax and this Monday tasty treats, we're going to be talking about updating applications or web apps that have been running for any bit of time. This is definitely a concern that many people are having as we move more and more into the world of web applications that have persistent data and all sorts of neat things that you might expect a modern web app to have. Now, this episode is sponsored by a service that you're going to have to have if you have any of these types of applications that I'm talking about Log Rocket at Log rocket.com, forward slash syntax. What is Log Rocket? Well, Log Rocket is the service that allows you to see your bugs happen as they happen, as in a user goes on your phone to click a thing and the thing breaks. And then you might be left to try to figure it out or piece together what happened through error logs, which is, as we know, not that much fun. What Log Rocket does is it gives you a scrubbable video replay of the user actually clicking the thing along with the Network tab, the console, or any of those things that you're typically used to when solving the bugs in your local environment. It's very, very cool. And something that you're going to need to see to believe. So head on over to Log rocket.com forward slash syntax and get 14 days for free. I gotta introduce my co host, who am I? As always, my name is Scott Phillips. Okay, let's just get that out of the way first, now with me, as always, is the Wes Bos. - -3 -00:01:51,030 --> 00:03:21,870 -Wes Bos: Hey, everybody. Hey, what's up? All right. So this is a sign that just popped up the other day for me, I don't have anything like this in place. And I'll tell you like what happened to make me start talking about this as I rolled out a new version of my course player. And it fix some bugs like I was in my my Sentry, and I had a couple bugs in there, I fix them all, and mark them as resolved. And then I started getting emails about the same bugs coming back. And I was like, That's weird. I just fix this. And I was like, Oh, it's because people are still on the old version of the app. Because like, they're, they're sitting there, they're watching their course, they're not going to refresh the page. They'll pause it, come back to it in three days and keep going. So they're running the code. And luckily, it wasn't like a breaking error is just a little warning that kept popping up. And I was like, oh, like, well, I guess I gotta wait for all these people to refresh the page, so that they can get the new version of of the the course viewer. But until then I just kind of have to sit on my hands and know that these things will roll in for probably a couple of weeks. Because people I don't know people, some people are tab monsters and keep those tabs open forever. So I started I went on Twitter, I was like, like, what do you do when you release a new version of this app? And you want people to to get that new code and stop running the old code. So I don't have anything for this. I thought I'd asked you, Scott, like do you do anything of us before we go into the solution? - -4 -00:03:21,870 --> 00:03:47,730 -Scott Tolinski: I do. In fact, let me tell you what I do for this, I use a platform that has a baked in, which is Meteor. Meteor basically when you do a new deploy. If you're using all of Meteor zone data stuff, and you're using Meteor, it just pushes everything live. In fact, it's so interesting, if I were to make a code change, people in the past have been like using the site and they'll be like, hey, the background changed. It just pushes it really pushes it via WebSockets. - -5 -00:03:47,730 --> 00:03:48,630 -Wes Bos: Hot reloads. It - -6 -00:03:48,630 --> 00:03:55,500 -Scott Tolinski: Hot reloads. It's amazing, right into the users thing, and it's done it since day one, and people don't talk about it. But it's fantastic. - -7 -00:03:55,530 --> 00:04:04,170 -Wes Bos: No kidding. That's amazing. Wow. So this is not a problem Scott has ever had, nope, because he had this like next level thing for many years. Although you - -8 -00:04:04,170 --> 00:04:49,620 -Scott Tolinski: could consider it to be a problem if the users code is just changing in front of them. But if it's like minor things or whatever, just pop it in here. They're like, yeah, that's I think that's, that's fine. You probably wouldn't want some like substantial update to like, come in. And with that. And also like if you have platforms like you think about like notion notion is a platform that we use for note taking and planning it with like a database. Yeah, like whenever they have a pop up to tell you to reload the app, it actually, it gives them an opportunity to introduce new features, which I find to be really neat, because they're always like, oh, click the Refresh. But also here's what's new. So that way, actually, I'm trying to refresh where for me I wouldn't I don't know what the solution would that be for me, but that it wouldn't be something that would be super easy for me to accomplish? - -9 -00:04:49,680 --> 00:05:06,000 -Wes Bos: Can we at least appreciate that? releasing a new application on the web is refreshing and not downloading, updating rebooting your computer like how good Do we have as developers that the problem we are facing right now is how do you get users to refresh the page? Right? - -10 -00:05:06,000 --> 00:05:21,510 -Scott Tolinski: I know, I know. It's funny that we say that because it's like, what was it? We were we have like an issue with Safari not supporting something in clamp or something. And like a safari dev was like, update your computer? And like, yeah. Oh, so I have to reboot my computer. - -11 -00:05:23,330 --> 00:06:25,530 -Wes Bos: Yeah, so it's, it's a good life. So what we're going to do now is just go through some of the solutions that people I asked on Twitter, what are the solutions that you have? So the first solution which I have taken is do nothing and hope the history refreshes. Second one we have here and this is seems to be a lot of what people do is they have a list of assets, or like commit hashes. So every time that you build a version of your website, you'll often get like a hash. This is pretty popular in like a web pack build or something like that, you can pull the server because you could have like an assets JSON file, and you could just pull the server periodically or have a web socket that would push Hey, new version available. And your your code will know when there's a new version available. And you could do a couple things. Probably the easiest is just throw up a toaster. a toaster is that could bottom right hand corner, a little pop up that says new version available, refreshed update, I think they're just called toast. Toast toast message. Toast messages. Yeah, the toaster would be the thing that pushes the message up the toast would be the actual message itself, right? - -12 -00:06:25,739 --> 00:06:34,800 -Scott Tolinski: I have never heard of the word toaster being used in this. That sounds like pretty sweet, though, like pushes it up. I like that. If that is real, then I always imagined - -13 -00:06:34,800 --> 00:06:41,190 -Wes Bos: that if I were to monkey with the CSS, there would be a toaster. Just below where those messages come up, I - -14 -00:06:41,190 --> 00:06:48,120 -Scott Tolinski: guess you're right, I'm seeing I'm seeing the thing in dojo, elite, remember, dojo, dojo calls, there's a toaster. Okay. - -15 -00:06:48,479 --> 00:07:42,450 -Wes Bos: So you could prompt the user to refresh, you could just manually refresh the user. So that's probably not the best idea. But you could if especially if you're using some sort of state management library, if the user is partway through some sort of action, where they've typed some, some video ox Yeah, watching video, you save all that state to local storage, refresh the page, and then try to apply that state back into your thing. So it'll just put them back to where they are, that would probably be a good idea where to count and wait for some period of inactivity. So like, if the user hasn't done anything in 10 minutes, they're probably not on that tab or, or you could even listen for the focus state of the window, knowing that the user is no longer on that. And then once the focus state is lost, start a timer and wait for like a minute or something like that. And then, and then go ahead and refresh the user. - -16 -00:07:42,599 --> 00:07:58,290 -Scott Tolinski: I would say that that's probably not a great solution for people who are on the video site, or have a video site. Because refreshing in the middle of a video like that would that would make some people upset. I know, I would be upset if I was watching a video and all of a sudden, I stopped talking and it refreshed. - -17 -00:07:58,620 --> 00:09:38,900 -Wes Bos: Yeah, yeah, you'd probably have to make sure that no media play in a playing state or Siam anyways, it's probably not a good idea. Because the next one, which a couple of people said, and this is genius is so all of your links on your application, if you're using a react or view or or Angular, your links are probably pushed date, meaning that you click on a link, it changes the URL bar, and it loads in the new video or whatever. But you're not actually doing a full page reload that's just happening in the browser. And a few people said, Kota custom link component that checks if there's an update. And if there is an update, just make it a regular link, and just have the page to a form, reload, and otherwise return the regular react router or next Yes, link. And I thought that was genius, because like, What a way to update a website is just turn your links into regular links. How do you pull that off, though, technically, like you would make a new component that imports like let's use react router imports the link from react router, and then inside of that component, you could have something that periodically will pull the back end for a new version, or maybe even just run a timer that says Like, when has this application last been reloaded, if it's more than 24 hours or something like that, then you can dynamically either render out react router link, or render out just a anchor link. They render out to the same thing at the end of the day, just one of them has pushed it and one of them doesn't. And because it's it's all dynamic, it will just render, you can change out a react router link to a regular anchor link and the user will have no no idea that that happens. There will be nothing that visually changes. Neat. - -18 -00:09:39,390 --> 00:09:40,620 -Scott Tolinski: That's pretty slick. Yeah, - -19 -00:09:40,650 --> 00:09:49,080 -Wes Bos: yeah. Yeah. I thought that one was there was somebody like that posted that I haven't they're like, I haven't tried this, but this is what I'm thinking. And everyone's like, Oh my gosh, yes. Like, - -20 -00:09:49,110 --> 00:09:51,120 -Scott Tolinski: yes. The link lid open. Yeah, - -21 -00:09:51,150 --> 00:10:58,860 -Wes Bos: yeah. Because like the user will continue to interact with your application. And the next interaction they have that changes the world. Which is a lot of interactions will load the new app for you. Neat, very neat. Next one is just use a service worker. So service workers have this built in the way that a service worker works is that you register your scripts that j s. And then the next time somebody comes to that website, it will, it'll say, Oh, I have a cached version of scripts. Yes. So load that script j s in. But part of what ServiceWorker will do is, while it loads up the cached version, it will also check in the background, if there's a new version of that scripts that j s available to you. And then there will be there's an event that's fired when there's a new version of that, that scripts available to you. That's a perfect use case, you don't have to write any custom code, because service workers already do the checking and alerting that happens. And then you just have to do one of the things that we talked about earlier, swap out a regular anchor link, provide a toaster do a hard refresh, whatever it is you choose to do for your app. - -22 -00:10:58,860 --> 00:10:59,820 -Unknown: Hmm, - -23 -00:11:00,119 --> 00:11:26,820 -Wes Bos: what else? It's just hot reloading baked in. So I jokingly said just run development in production. And hot reloading will work. But I didn't even realize that Meteor has that already. And it looks like view press also has that where it will, it'll do a hot reload of your application right in front of the user. And that won't work for every use case. But I would wager to say that will work in a lot of cases. - -24 -00:11:27,119 --> 00:11:49,650 -Scott Tolinski: Yeah. And the cool news about the the meteor version of it if you're using Meteor zone pub sub system is it sends data along the way. And that works. Like that's one of my favorite things about Meteor, since it's all data subscriptions. When you're pushing new code in and make changes to the database. Man you get you get basically that free user refresh with nothing with absolutely no skill involved. Really. - -25 -00:11:49,859 --> 00:12:39,270 -Wes Bos: That's pretty sweet. And finally, someone said, I know it's not an app, but I like how chrome handles it with an ever present icon that gets more ominously covered colored, the further you are behind. Yeah, at a certain point, people will start ignoring them. I do that on OSX. All the time pop songs currently, reboot. Yeah, it just turns a different color. At a certain point, the user will have to refresh the page to get the new version of your app. Sick. Yeah, that was cool. I'm happy I started go down that hole because I learned a whole lot about how to do something like that. Hopefully you learned a thing or two as well. If you have your own thing that we didn't cover today, make sure you tweet us at syntax FM, and we'll retweet your solutions as well. Alright, that's it. Thanks for tuning in and catch you on Wednesday. He's, please - -26 -00:12:41,100 --> 00:12:50,850 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax292.srt b/transcripts/Syntax292.srt deleted file mode 100644 index 2b98a5f40..000000000 --- a/transcripts/Syntax292.srt +++ /dev/null @@ -1,336 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,560 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready. Here is Scott, ski and Wes Bos. - -2 -00:00:10,560 --> 00:00:56,310 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there today we've got a freelancing show for you. We haven't done a show on freelancing and I don't know, maybe six months or so. So we're gonna talk about how to make freelancing easier because, like, honestly, I've seen a lot of developers go into freelancing. And then six months later, they're they throw their hands up and say, yeah, screw it. It's too much for me, there's too much going on and, and that's fine. But I see a lot of people quit for the reasons of, it's too hard to like run the business. And so we're gonna we're gonna talk today about some tips and tricks that you can do to make actually freelancing easier both in terms of like coding as well as the business part of it. With me as always is Mr. Scott Delinski. How you doing today, Scott? - -3 -00:00:56,729 --> 00:01:31,020 -Scott Tolinski: He I'm doing good. Just hanging out here just got back from trip we went into Grand Lake, Colorado, which is like, the biggest natural lake in Colorado. So big, big lake with mountains all around it and hikes. And we were able to take the dog ease, which was a lot of fun, because there's not a ton of vacations where you get to take the dogs and go on hikes and stuff. So yeah, it was it was a nice, nice little getaway, although there were wildfires. And we were sort of hacking in some smoky air. Sometimes it was a lot of fun. And feeling refreshed, ready to get back to back to work here. - -4 -00:01:31,049 --> 00:01:35,070 -Wes Bos: So awesome. It looks beautiful. Can't believe Colorado's got some views, man. - -5 -00:01:35,369 --> 00:01:57,060 -Scott Tolinski: Yeah, it has some views just about everywhere you get. And the cool thing is, is that there's like maybe about 100 more of these little little nooks and crannies in Colorado that we've never been to obviously not being native from here. So there's just so much to do. And there's so many more places to see there's some great sand dunes in the middle of the mountains. We're trying to get to two that just look like you're in the middle of the desert in the middle of mountains. It - -6 -00:01:57,060 --> 00:02:24,500 -Wes Bos: looks pretty sick. Awesome. Wow. That's interesting. Yeah. So today, we are sponsored by two awesome companies. First one is Sentry and second one is Netlify. We'll talk about both of those companies partway through the show. All right, so let's let's kick it off. We're going to start with code because like if you're being a freelance developer, or freelance designer, that's actually the thing that you need to do at the end of the day. So we'll start off with tips on nylon kick it off, Scott. - -7 -00:02:24,659 --> 00:03:15,990 -Scott Tolinski: Yeah, let's let's tip it off here. The first one is going to be to assemble a basically a set of reusable starters, resets component libraries, things that you're used to using and things that you know and like using, because there's nothing better than dropping in your your custom grid component or your grid class that you created, that you know exactly how it works. And you use it 100 times and you're very familiar with it. So really, as you're working as a freelancer compile code, snippets, starters, resets anything that you might have to make your code time a little bit easier. So you're not having to have the cognitive load of all right now, which grid framework should I use for this one? Which one would I shoot at? What should I use for this one? What browsers Do I have to support now assemble your tools, have them ready and know exactly what they do. - -8 -00:03:16,589 --> 00:05:02,040 -Wes Bos: The next one we have here is, I often see a lot of stress around getting things done in time for what you've quoted the client. So a lot of times, people will bill, we'll talk about billing hourly versus project. But essentially, sometimes you have in your head, this thing should take me five hours, and you're three and a half hours into it. And you're almost ready to scrap all of it. And there's a lot of stress that comes from that. And I think it's fine. To go completely over your budget at time, you obviously can't build a client for that extra time. But it's fine to go over that time knowing that you know what I'm just learning as I go, I'm getting really I'm getting much faster at it. So if you go into a shop for your car with a mechanic, mechanic, always, I would say almost every mechanic does what's called book time. So I had what did I have the airbag struts replaced on our car. And they they look it up in the manual and say this is a two hour job to replace it. The so what they do is they charge you for two hours worth of your time. And it could take the guy like 26 minutes. Why? Because he's done 100 of them in the past. And he's super good. He knows exactly what to do. He's got all the right tools, and just bing bang, boom, he's not gonna charge you last for that. By the same means if it's his first time doing a specific project, replacing a head gasket or something like that. It might take them an extra five hours over what the book time is on something like that. And that's okay, because you're you're learning you don't charge the client more. And I think that that also applies to web development as well because there's going to be times where you're super efficient and there's going to be times where you just need to take a bit longer to learn something like that and don't stress Either way, yeah, - -9 -00:05:02,249 --> 00:05:21,240 -Scott Tolinski: that's definitely a big thing. Because I mean, in addition to, like you mentioned being so proficient at some things that you can get them done really quickly. This is this is sort of on the topic of audible automobile repair, rather than on web development. But there's a really good Reddit, which is just rolled into Oh, - -10 -00:05:21,240 --> 00:05:24,380 -Wes Bos: I love it. I was hoping you're gonna say that. Yeah. - -11 -00:05:24,419 --> 00:06:23,580 -Scott Tolinski: Which is, totally reminds me of this. Because you might, you might also think that you you can, you know, just slam dunk this one, you, you got it all lined up. And you might not know that when you open the car door, that there's just going to be, you know, 10 fish in the, in the front seat, how those 10 fish get there, I don't know. But now you get to deal with it. That's just how things work sometimes, right? So even if you can slam dunk something you never know exactly if that time is going to be there. So giving yourself that bumper time is is a big thing. I never heard it called book time. Kind of an interesting concept. So definitely an important thing. Another one is going to be unless you're planning on having extra time, right? If you're if your schedule is tight, tight, tight, don't pick something that you've never built in before. Because if you've never built something in something before, it's really difficult to gauge time, and I am, I've been described as quixotic. I believe that's the pronunciation of that word, you know, quixotic? - -12 -00:06:23,729 --> 00:06:24,360 -Wes Bos: No, - -13 -00:06:24,899 --> 00:06:36,150 -Scott Tolinski: quixotic means exceedingly idealistic, unrealistic, and impractical. So it's like, it's basically idealistic to default. And I definitely am the type to be like, - -14 -00:06:36,209 --> 00:06:37,020 -Wes Bos: Well, yeah, not - -15 -00:06:37,020 --> 00:07:08,730 -Scott Tolinski: that I'm minutes, let me just use this brand new nasm thing that I've never touched before. That's not a great recipe for success. When you're running a business. Keep in mind as a freelancer, you are running a business and part of running a successful business is knowing when to be practical, and when to be adventurous. So don't build on something that you don't know, if you don't have the time to do it. For the most part, WordPress is good enough for just about most projects that you're going to encounter that are basic websites write No need to get fancy, fancy, - -16 -00:07:09,029 --> 00:08:08,310 -Wes Bos: it totally. And it's probably super tempting to always go for whatever is the latest and greatest. But honestly, being like a year behind hot tack, or two years behind tack when you're doing client facing projects is super key, because all the bugs have been ironed out. There's thousands of Stack Overflow questions and blog posts and YouTube videos and, and things like that. And you're not the person running into the issue is like all the time, when I'm making courses, I'll always take the beta version of whatever it is, they're working, like, example, Apollo three, I was working at it in beta. And I hit all kinds of roadblocks, as I was one of the first dozen people to actually use that feature. And like, that's why it's in beta, so people could test it out and report bugs. And that's frustrating, because like, if you need to get something done at a certain amount of time, it's hard to go back to the client be like, hey, like, waiting for this open source pull request to be merged, in order to support this feature that you want. - -17 -00:08:08,669 --> 00:08:50,220 -Scott Tolinski: It's such a good point. And that's not necessarily even something that I thought about. But like, if you do think about it, again, this project is for your client at the end of the day. And it's bad enough that when you might overestimate your abilities to get things done faster. But like you mentioned, you have no ability or capacity to understand if there is like a bug in something new and fresh and open source or whatever, that I wonder like, how many aggressive GitHub issues or whatever could be avoided if people people just use what was appropriate for their project? Because I'm sure that people are under stress for times and deadlines. And then they go to the issue. And they're like, Well, are you an open source? - -18 -00:08:50,580 --> 00:09:41,610 -Wes Bos: Yeah, I, I had that with my my personal website. So my personal website has been up for six months, and I went to go fix something the other day, and the darn thing, I could not get it running. And I reinstall x code, reboot the computer a couple times, and npm install and switch my node versions. And I'm just like, oh, like, this was a WordPress website running for 10 years. Yeah. Never never had a problem. And now I'm like six months into this, like new node react Gatsby stack. And this stuff changes so quickly. It's such hot new technology that like it's it's frustrating that it just obviously got orky again, but I was just like sitting there thinking about, man, there's something to be said for tack that you know, just works. - -19 -00:09:41,760 --> 00:09:50,419 -Scott Tolinski: Yeah, absolutely. And in tech that you're going to be able to predict is going to work under a deadline when you totally work tight, tight, tight. Yeah, totally. - -20 -00:09:51,120 --> 00:10:47,730 -Wes Bos: Another tip we have here for code is just for using code. So this obviously has to go into a contract. Meaning that like, if you've write code. I've talked about this on the podcast before, but like, what I would do previously is things like a store locator, I would write the code once. And then like five or six different clients would want that implemented on their website, and you can reuse, like at least 80% of that base code from project to project. That's key, because you can go really, really fast if you're billing them 20 hours for that thing, and it only takes you five to implement it. That's totally okay. As long as you're doing value based billing, I would feel a little bit weird about that, if you just like, yeah, it took me 20 hours, and then the next person took me 20 hours. But that's why we really like like value based billing on this thing, because you're like, Alright, this is worth 2000 bucks to you. And then the next guy, it's still worth 2000 bucks, even if it takes you a quarter of the time to implement it, - -21 -00:10:48,240 --> 00:11:54,539 -Scott Tolinski: right? Because in those two scenarios, right, that you laid out where you know, you're billing 20 hours for something that took you five hours, or you're building based on one of those is ethical, and one of those is not ethical. That's where project based billing can save your butt and help you out a little bit. Leslie we have here is target similar types of clients, if you become the dude who's building everybody's interactive, restaurant menus or something like that, or the dude or dudette, sorry, if you are implementing specific types of websites over and over again, you're going to get really good at those websites, you're going to understand what the pitfalls are, you're going to be able to speak from a place of authority on those websites, or those types of things where you're saying, Hey, I have encountered so many different aspects of these things that you may not have thought about. In fact, one of your competitors revealed to us that they had these issues not not not sharing trade secrets here, but one of our one of our competitors had these issues, perhaps you might have these issues, too. Let's go ahead and build this in ahead of time. So that way you don't run into these issues down the line, it makes your work that much more bulletproof. - -22 -00:11:54,870 --> 00:12:44,610 -Wes Bos: Yeah, that's so key if you can just like target a specific little niche of clients like, like one aspect that I heard a lot about him, since a pandemic hit is green houses needed the ability to sell direct to consumer, my dad makes websites and he got hammered by all these people that own greenhouses in the area, because, like literally no one was set up with a website. And then he figured out all of the sort of nuances of how to use specific software for their specific use case. Because like, you can take some like yoga booking software and try to apply that to a greenhouse. But it's not exactly the same, right? So I always think that's really interesting. When people are like, Yeah, I did a website for like this one time type of client. And now I'm down a rabbit hole, and I just work in this one single industry. - -23 -00:12:45,240 --> 00:14:40,200 -Scott Tolinski: Yeah, I think that's really important. We, when I used to work in agency, we we did a lot of conference websites. And that was the same thing. It's like, we know what kind of things you're going to hit. When you're building a site for a conference. We know all of the the tools and plugins to use, we know the ins and outs, and we can get you set up for that in absolutely no time. And it's going to be custom. Right. So again, lots to say there. Next up is a big, big, big piece of this pie, which it's it's one of the harder things for developers, typically, US developers, we're good at code, right? We're good at the logical stuff, but we're not necessarily as good at with the communication base things. And I'm personally had been on teams that struggled with communication and I myself have struggled with communication on numerous times. I know if you've emailed me, you probably know that I am not super great at getting back to you that fast. But in more addition to communication might have been the most difficult aspect of freelancing for me personally. And what I needed to do for myself to make it easier would be to really make sure that I'm communicating often, clearly and frequently, often and frequent being the exact same thing here. I read it twice, people aren't going to be mad at being too informed, but just know when to leave all of the technical crap out that they don't care about, right. They don't care about whether or not you built it on wide angle lens dot j s or cloudlifter. j, I'm just looking at stuff around my office. But whether or not you build it on various tech, they don't care about that. They just care about the blazing speeds. Talk to your clients often maybe set up like a schedule to talk to them. I've heard that like, you know, maybe saying like, okay, Friday morning is update day, and I'm just gonna send you a little update, put it in your calendar, put it in your time block planning, whatever, make it happen, and update them every week, even if it's just Hey, no progress this week. Just wanted to give you a shout out hope everything's all right. A key component is making sure everyone's on the same page right about things. - -24 -00:14:40,799 --> 00:16:13,200 -Wes Bos: But another tip I have here is kind of the flip side is like also don't overwhelm them. Like kind of what Scott was saying, like don't tell them about every little technical change that you're making. They just care about, like their website coming to fruition and building it. And like I was just thinking about an example with the guy who handles our retirement. investments and whatnot. And I was getting like, four or five different emails from him and these pin codes to login and all this stuff. And I basically just shut down and stopped emailing him back because I was just not that I was like, oh, screw this guy, but I was just like, Okay, this seems like a lot I'm gonna, I'm gonna do with do this later, because I had to sit down and get a coffee and figure it all out. And this is now a big thing. Whereas it used to just used to be an email. And I can tell that he noticed that because I just, I just stopped emailing back. And now when he emails me, it's very clearly bullet points, things that are black are action items that I actually need to get back to them other things, there's just information that I can reference. And I was like, Oh, good, like, what a good skill set on his end, because I'm sure he has clients who love the constant communication. But for me, it was too much. He was able to to adjust how he communicates with me so that he can get replies from me as well. Because that's, that's the other thing is sometimes you're you're a freelancer and you've got deadlines, and you tell him, you're gonna launch by specific time, and you email them and say, Hey, can I get approval, and you don't hear from them for a week? And that's frustrating for us developer? Because you got lots of stuff to work on. Right? - -25 -00:16:13,649 --> 00:16:18,149 -Scott Tolinski: I think the goal should be to reduce the cognitive overhead. - -26 -00:16:18,179 --> 00:16:19,409 -Wes Bos: Yes, that's key. - -27 -00:16:19,409 --> 00:17:07,920 -Scott Tolinski: The one thing that I really hate in emails is when like, there's a huge long paragraph, and then like one tiny little simple question at the end when the email could have just been the question. So like, for me, it would be really hard to parse and find that there's even a question in that email. So like, keep your emails to the point. Like if you don't need to ask a question and don't ask a question. Like if you can figure it out, like Oh, do you think good this blue is better than this slightly other blue? No, you make it you're the expert. And don't increase your clients amount of decisions they have to make I don't know if how much decision fatigue you get West, but I have to make so many decisions. Totally a, like Courtney will ask me like, hey, should I leave this door open or close it like I don't care? Do whatever you want. I do not care here. I have so many other things to worry about this. - -28 -00:17:08,159 --> 00:17:24,030 -Wes Bos: Totally. If you want to go back to Episode 117 of syntax Pacey treat how to email busy people. We talked a lot about how to write a good email. It's funny because I often get emails from people. And it's very clear that they listened to that podcast, and - -29 -00:17:24,080 --> 00:17:25,740 -Scott Tolinski: oh, yeah, I love it. - -30 -00:17:26,219 --> 00:17:35,840 -Wes Bos: And I'm just like, Oh, thank you, I feel kind of bad. Because I'm like, Don't email me unless you listen to this podcast. But they get replies because they do a good job. - -31 -00:17:36,390 --> 00:19:39,510 -Scott Tolinski: What am I say? And it along the lines of that same thing is one of my favorite email types that I get is when somebody emails me and they just say, Hey, I know you're busy. So just respond with a number one, two or three. One I'm interested and would like to talk more to I'm not interested in three, like, you know, go to hell or something. So I I really appreciate that as long as that makes it so easy. And you know, what else makes your life easy? What Netlify it makes shipping and deploying your code extremely easy. And Netlify was one of our first sponsors. And before they were a sponsor, they were a company that I admired very much for the ease of use. In fact, you've probably heard me talking just about how easy Netlify is to use before on the show. So what is Netlify? Well, Netlify is a host, or your front end at jamstack code, they say it's the fastest way to build the fastest sites. And that's such a great tagline. Because if your site's on git, GitHub, whatever, oh my gosh, you just select the repo, you click go and it usually just builds it or you type in the build command. And then you get all sorts of awesome stuff like automatic deployment. And let me tell you that since we started working with Netlify, they have just grown and grown and grown, they now have a ton of additional features like the ability to log in via their identify platform, dealing with large media in certain easier ways. split testing, have you used the split testing stuff, because that's been one of the a&b testing than something that I've been interested in checking out where you can serve up two different versions of your site to different people, new DNS based analytics, serverless functions and more. So check it out@netlify.com forward slash syntax and sign up today. It's free to get started free, free, free, free, free to play your site and see it going. I know anytime I have a site like, you know, my personal site is hosted on Netlify. Anytime I don't need a server side, server database, whatever, I'm just jumping right for now if I immediately - -32 -00:19:40,049 --> 00:21:17,730 -Wes Bos: Yeah, they're they're really working on all of the like, sort of gotchas with a static site or you don't have a server side. They have I think they have an answer to almost everything. The analytics, split testing, media, contact forms, serverless, functions, plugins, all kinds of stuff. It's pretty good. I got My own website on Netlify. So definitely recommend it. Alright, um, one more thing about just that communication is training your clients that you aren't available 24 seven. So sometimes if you're trying to please your client, email them back immediately, or send them back an email four or five times a day, because some clients are like that, where they just are, they're super involved in the project, and then doesn't really leave you as much time to actually do the development. So just like sort of training them that I'm not replying emails outside of working hours, or I'll send you one email a day, so don't email me, like I use that I, I've told the story before, but I had a client who had like a Blackberry. And every single thought they had, they would just type into the subject line of an email and fire it off. So I'd have like, 20 emails of just like, don't forget about this, and what about this, and I'm just like, you need to put this or like, when it came to site review, where I'm just like, okay, like, here's the website, give me your feedback, it all needs to come at once. And you need to, like, we need to go over it together before we go and fix these things. Not every single time, something flies into your head or your significant other doesn't like the color and he sent an email about it at 4am. That's no way to live your life. So you have to train them that they can't do that. - -33 -00:21:17,990 --> 00:21:59,060 -Scott Tolinski: Yeah, that is it is a big thing. And I had, I had a client one time who was like, he did this similar thing. It wasn't as bad as what you're describing, but it was definitely similar. And then I would send him an email like once every two or three days, like, I didn't ever come out and say like, Hi, I'm doing X, Y and Z. Like, I'm blocked, like, whatever. And then he sent me one email. I just remember, oh, I see why you're not emailing me. Constantly back. You're doing time blocking or something like a realization, he sent me emails like I see you're doing batching? Yeah, yes. stay productive. What do you do all day? Do you just email all day? Is that all you do? There's some - -34 -00:21:59,060 --> 00:22:17,240 -Wes Bos: people that do that, like project managers, or realtors and people like that their job is to be in contact with people and to always be sending stuff off. And our job as developers is to spend as little time as possible. Not doing banging on a thing and writing code. - -35 -00:22:17,630 --> 00:23:11,600 -Yeah, right. All right, let's get in the next one, which is time management. This is super key. Similarly, related to communication, because like, honestly, this pretty much goes for anything in life. But if you are a good communicator, you can get what you say you're gonna do done on time, you will be incredibly wealthy. Because like, honestly, like you think about like, a web developer designer, or even just like somebody working on your house, it's so hard to find reputable people that give you a good communication, and get it done. When they say or close at least close to when they're going to get it done. Or if they're not going to get it done on time, then there's the communication about something like that happening. It's so frustrating in life, because people are just flaky and don't do what they say they're going to do. So honestly, those are the two, the two keys to freelancing. - -36 -00:23:11,760 --> 00:24:07,020 -Scott Tolinski: Yes, the two keys, besides actually getting a website that works is time management tip that we had for time management would be to set up alerts for yourself and your own calendar. Like if you have specific dates, a specific times that were discussed, if you establish some sort of calendar, add it to your actual calendar, put alerts on there, put put day alerts the day before week before whatever, give yourself that time, and those internal tools, fire alarms, whatever to make sure that you know exactly what the deadlines are 24 seven, because if you say you're gonna deliver it on Friday, and you deliver it next Monday, it's a small change, but it's still a hit to your reputation, your ability to get things done on time, and overall, their likeliness to refer to you to someone else, which is really what this is all about. Right? You do the good work so that you can get more good work, right? - -37 -00:24:07,290 --> 00:25:25,020 -Wes Bos: Yeah, sometimes I have. My Captain says, Hey, I'm gonna, I'm gonna send you the numbers by 5pm. And then like, they don't come and are to email me like, Hey, where's the numbers? I'm like, Don't make me manage you. That's so frustrating to me. Because like, I want to do my thing, which is coding. I'm hiring you to do it. If you're gonna be off fine to at least Just tell me like what's going on and when to expect it and things like that. So yeah, don't make the person your client have to like micromanage you. I remember just this is totally unrelated, but I once had a meeting with a client and it was at a brewery like up the street for me maybe like a 15 minute walk or something like that. And I was just sitting at my computer and I get a text like, hey, are we still good? And I was like, Oh man, I totally totally spaced on it. So I just like Gundam like I ran to The brewery and it was Iran there and like seven minutes and I just like came in huffing and puffing. I just owned up to it because like, what else are you gonna say coming in like panting like, I totally forgot. But here I am. I'm ready to God. I was like 15 minutes late, but like checking your calendar often is key, because so often I've done that with calls where I'm was totally unprepared because I forgot the 10 minutes beforehand is never enough time. - -38 -00:25:25,470 --> 00:26:21,570 -Scott Tolinski: Yeah, it is. This is something that I have like really, really learned in, it's like taken me 30 years to learn this. My calendar is the best tool in the world. For me, I have a bad memory, I have clinically a bad memory. In fact, my memory is so bad. It invalidates my IQ test. That is real. And so my memory is so bad that I like if I don't put it in the calendar, I'm not gonna I'm not going to be on it. I'm not going to remember it. Despite my best intentions. Again, remember quixotic? I'm always thinking like, Oh, yeah, it's gonna be totally cool. I'll remember and then I never, ever do. In fact, one time, Courtney and I had dinner at the same place two nights in a row, because the first night we showed up, and we're like, hey, our guests ever going to get here. And then I looked at my phone, and it was supposed to be the next night, and I just put in my calendar. So yeah, that stuff just happens, right? It just happens. - -39 -00:26:21,900 --> 00:27:02,790 -Wes Bos: Next one we have here, it's just block off large amounts of time for Dev, you're not going to get any meaningful work done in one hour slots. And I see this all the time where devs will screenshot their day. And they've got like 16 different meetings that they need to come in. Even if you're not a freelancer, that this happens all the time, which is sucks. So literally just go into your calendar, block off five hours of your afternoon and don't allow anyone to book you in that time. I always schedule my meetings for like 9am. And that is awesome. Because if I do like 930, or 945, or 10am, I find that like hour beforehand, I'm kind of like, I'm not gonna get too deep into anything, because I know got something else coming up. - -40 -00:27:03,330 --> 00:28:54,660 -Scott Tolinski: That's a good one I i've been recently I made my calendar public, not like public public, but for the people like on my team, like so it's not just coordinate, who can look at my calendar, but it's everybody who I'm working with. So that way, it forces me to keep my calendar up to date. And people will be able to see what time is available, what time is not available. If they messaged me, they can see that I'm doing something specifically and they'll they'll know to wait an hour or two or whatever, until I'm actually going to reply just to make it as transparent as possible. So you can always have a specific calendar that your client can see that's like blocked off time or whatever, like open available communication time or whatever, just just to free it up a little bit. So they know exactly what the expectations are half of every all of this is just managing expectations. Okay, so next is going to be contracts and quoting, this is a big one, because a lot of times we hit a new project, and we're like, oh, gotta go fire up. contract and quoting template, what you should have is you should really have boiler plates for all of this stuff. Just have these things ready that you can do an easy Find and Replace to replace all of the things that you know and love one time, you know, what I actually did for myself was is as a fun project for myself, just as a side project, I built a contract generator using rust because I wanted to learn rust. And it's like, oh, okay, I can read a file, I can write a file, I can replace some values. It's all basic techniques, right? But it's it's neat, because you just deleted the command line and I say, oh, give me contract and says who contract for I say contract for Wes. And this is how much I paid. Okay, Wes, get paid Enter. And then it spits out a PDF of the contract. It's perfectly okay to think about it. Right? So this is a big thing. Do you have any tools or anything you recommend for writing contracts or having those boiler plates? - -41 -00:28:55,050 --> 00:29:57,000 -Wes Bos: Yeah, had a website that had a bunch of like free ones. But what most of my freelancing friends recommend is just go and get like a lawyer, like get like a boilerplate one they find online, bring it to a lawyer and have them look over it. And then that's a good, that's a good like sort of place to start from. And then like I just had one in the Google Doc every time I wanted a new both for quoting as well as for like a contract is just like, just type what you're going to deliver when you hope to deliver it, what it includes what it doesn't include, and have them sign off on it. I didn't have this huge 40 page legalese type of thing. It's just that this is what I'm giving you for how much and this is also what it does not include in the things that is not included usually is like inputting content or designing images that go into it or things like that is pretty simple, but definitely helps me speed up that process because again, you don't want to be spending a whole lot of time on that. - -42 -00:29:57,450 --> 00:30:21,810 -Scott Tolinski: I'm also going to double your Call to have a lawyer look at it. I'm lucky that my neighbor is a lawyer. So I could just like shoot him an email saying, Hey, I, you know, take you out for a beer and whatever, and you look over something. So I have a little bit of a nice, nice connection there. But again, if you know anybody that's a lawyer, pay them for their time, just get them to look at it's a one time expense, BINGO, BINGO, you've got the contract, good to go. - -43 -00:30:22,440 --> 00:32:11,640 -Wes Bos: Next thing we'll touch upon is just like value based billing. So what this is, if you're if you're new to it is that instead of charging somebody 10 hours for a website, you you look at the website and say, all right, like, what's this worth to them? Or I also, like, would look at that. But I also would like to look at approximately how much work is this going to take me at the end of the day, and then you give your client a quote for three grand for a website, and they approve it, and then you just go off and build the website. And that's really great for projects that are very cut and dry. Meaning that this is what you get this is when it's going to be delivered. And all that I did do hourly billing, when it was more, another technical team would bring me on as just like another hired gun. But the value based billing was, was really great. Because a, you can make a lot of money that way. Because you can get very fast, you can use all of the stuff we talked up until right now, in making your skills as fast as possible. You still get the same amount of money at the end of the day. And also the clients loved it because they knew what they were getting and that they don't like, like if you tell them like yeah, it's gonna take me 20 hours to build this thing there. There'll be like, is that? Is that good? I have no concept for it. They don't how long? Right? Like that shouldn't be something that they have to really think about. So there's a book from Freshbooks called breaking the time barrier. And it's all it's all about this tiny little quick read, you can download it as a PDF online. It just puts you in that mindset of how you should be approaching selling your skills and not just trading. I always call it acid seat time, right? Like, you ideally don't want to just be trading your time for money, because then you'll never be able to stop that. Yeah, - -44 -00:32:11,910 --> 00:34:03,240 -Scott Tolinski: yes. Yeah, right. Exactly. Yeah. And then this episode is not sponsored by Freshbooks. But we will not mention them again at another point. However, if we want to talk value, let's talk value. And I'm talking about one of our sponsors, that gives you so much value for your money. And that is Sentry. This is a tool that I've used for a very long time myself, and I'm constantly getting value out of it. For instance, one of the newer things they added was performance metrics, that gives you a user misery score that tells you which of your routes are the slowest and giving you the the average times so that you can investigate if there's one particular route that it looks like it's making your user upset, because it's taking too long to load. And then you can discover what the performance issues are. Now there's a lot of really neat stuff here in Sentry Sentry is the error and Exception Handling tool that allows you to keep track of all of the bugs, errors and exceptions on your site, tag them to releases, commits, users, specifically, you get all the information about their browser information, what they did the breadcrumbs when it happened, and you can attach it directly to issues in your Git project management, for instance, I've issue I want to track it, I click the issue, I click Add to GitHub, I fill in the information, I click Go. And all of a sudden, the issue is not only tracked and GitHub but GitHub, the GitHub issue contains a backlink into Sentry so we can investigate for more issues. So if you want to check out Sentry check it out at Sentry dot i o use the coupon code, tasty treats all lowercase and all one word and you will get two months for free talking about values or two good months, you're going to get out of that. Let's get into billing. And I have something to say about billing. First and foremost is that too often times, especially new freelancers, a real good sign of a new Freelancer is somebody who's afraid to talk about money. They'll get into the meeting, they'll be like, so what's it gonna cost me? They'll say, well, - -45 -00:34:04,860 --> 00:34:07,560 -it's maybe not just them thinking they just don't want to say, - -46 -00:34:07,610 --> 00:34:08,150 -Wes Bos: yeah, - -47 -00:34:08,630 --> 00:35:15,690 -Scott Tolinski: the best book I ever read on this topic was Mike Ontario's design is a job. That's the book. That was such a good book. Yeah, if you're if you're interested more in this billing and billing stuff, read design is a job. It's so very, very good. And so one of his big things was just that like, and this is this may even be too aggressive. But if you're not getting a no on your first quote, like if you say I'm gonna, I'm gonna bill you 10 grand for this, they're like Not a chance. If you're not getting to know on that first one, then you went too low, because that means that they that they were getting too much value out of what you are giving them. It not to say you want to be screwing your clients out of money because that's absolutely not the point here. The point is, is that you should value your services that you do good services, the value in what your services bring costs, money and your clients. No one understand that they're running a business right? They see Numbers, you as a freelancer need to see those numbers as well and understand. It's all just a business. And these are business conversations and people talk about money all the time. So talk about money. Don't be shy about it. Get it out in the open, clear the air, make sure everybody's on the same page. - -48 -00:35:15,860 --> 00:36:10,730 -Wes Bos: Yeah, it's funny, because a lot of times I see like freelancers who maybe aren't like they weren't raised talking about money, things like that. And they see their skill as a bit of an art. Yes, but you also have to charge money for it, because you need to be able to live and I see a lot of people undervaluing themselves or just saying like, I don't know, like, what how much would you like to pay? And yes, exactly, right. Yeah, unfortunately, you have to be a little bit aggressive. And, and the only way to get better at that is just doing it and you probably will have some some awkward conversations. At some point where people go, Whoa, I was totally not expecting that. But in my experience, in most cases, it was just okay, I can see that. Or could you explain like, why it's going to cost that much like not that I'm saying it's too much I just like would like to understand as to, to where that comes from and whatnot. So yeah, it like Scott said, don't be shy, - -49 -00:36:11,210 --> 00:36:25,710 -Scott Tolinski: it's your job to tell them why it's costing so much. It is your job to bring home the bait to deliver, right, it's your job to get that little parcel, that ribbon now repetative ribbon and deliver it right, make the work happen. - -50 -00:36:26,280 --> 00:37:50,250 -Wes Bos: Exactly. Also, once you do get paid, you obviously have to hold on to the town, maybe this is not obvious, that's actually something I've seen in the past is that when you get paid, the government does not come and take the taxes out of that money. So you need to hold withhold a certain amount. And this depends on which country you live in, and what type of if you're a corporation, or if you're just a sole proprietor, but generally, you'll have some sort of tax rate, that you need to withhold a certain amount, let's say 20%, you need to withhold 20% of that bill and put it away for taxes. And on top of that, if you're charging local taxes, so in Ontario, here, we have HST, and if I'm billing somebody else from Ontario, I have to tack an extra 13% on there. And I got to hold on to that. And then at the end of the year, I have to give it back to the government or give it to the government say, Hey, I collected this for you. And also, here's your chunk of my own hard earned money that you use to build rows and things like that. And I see a lot of people just like, eat all the money that comes in, and then eat it. Yeah. And then when it comes time for taxes, they are in the hole, which is always funny, because at tax time All my friends are going out for beers and buying buying clothes, because they get a rebate, right? They get the tax rebate back and then it's just me I'm here I am sitting right - -51 -00:37:51,300 --> 00:38:37,800 -Scott Tolinski: here. $50,000. Yeah, that's not such a position to ever want to be in I think I got some good advice early on. That was like when you're taking money as a freelancer without tax being withheld. What you should do is, besides one have well, to make it easy on yourself and taxes in general, you should have a business bank account, the bank account specifically for the freelance business, all the funds come into there, and then you can filter it into your own personal accounts, but to have a business savings account, and every single time that money comes in, automatically put that 15 20% into the savings account when the money comes in. And it just never take anything out of the savings account until tax time. Because that money is there for taxes. It's not yours. It's just there to live there. - -52 -00:38:38,210 --> 00:40:00,920 -Wes Bos: Totally. That's that's so key because I saw a bunch of my Freelancer friends when Coronavirus hit, government rolled out this plan for small businesses. And it was a pretty good deal. Like they would give small businesses 40 grand and 25% of that was forgivable. So you can get 10 grand for free, but you had to have your own business account. And a lot of the sole proprietors were like was just putting the checks into my personal bank account and like that was my money. And then if that was the case that you weren't able you wouldn't you didn't qualify it there was other programs but this is a pretty sweet program. And it's too bad because like the another thing you're mixing your finances and if you're married to somebody, then like there's like money coming in and like you want to buy a piece of equipment you want to buy a new monitor for your business. But like that's coming out of personal funds like that's it gets kind of weird being like, should I spent $1,000 on this like our car needs new tires on it and then now you're like, Okay, like you're you're not really running a business there because you're you're weighing business purchases with personal purchases and having a separate bank account makes things so much easier. It's so nice to cut and dry. You pay yourself from the business, even if you're a sole proprietor where none of that matters, Ellis still do it. Like Scott said, - -53 -00:40:01,320 --> 00:40:45,440 -Scott Tolinski: Yeah, and also it makes accounting really easy at the end of the year, because a lot of these tools that we're going to mention in a second here, whether any of your accounting software, in modern times, you can link your checking account here, whatever account your credit card account, you can link all of those directly to these accounting services. And if you do all business transactions through these, these individual accounts, and credit cards, then your books in accounting simply just become essentially, the statements on your credit card or bank account, it makes it all very, very easy. There's also this whole concept of piercing the corporate veil, which I you know, involves if you're getting sued, they can't go after your personal stuff. But if you're using your personal accounts, they can go after your personal stuff. I don't know too much about that. I am not a lawyer, do not hold me to that. - -54 -00:40:45,710 --> 00:41:14,100 -Wes Bos: Yeah, that's that's a question I get a lot is like do I need if you get if you register a corporation, then money that's in the corporation, like if somebody Sue's your company, they can't come and take your house because you personally own your house, and you as a corporation would own the business. So that's something to think about as well. Like, I've never really necessarily heard of that happening. like no one's no one's slipping and falling on a website. Yes, it probably can happen. - -55 -00:41:14,210 --> 00:42:03,360 -Scott Tolinski: Didn't Domino's get sued for accessibility? So yeah, yeah, you're right. Maybe that's something that we'll see happen more and more. Totally, I mentioned some of these tools I should go into a little bit more in depth, we you know, are one of our sponsors is fresh books is great cloud accounting software that will make your life easier, again, not an ad transition, that's just generally what they are. But if you're looking for a couple of free options I've used in the past both wave apps and zero, wave ABS is much prettier. Zero, is what my current accountant uses. I that's why I'm not using fresh books currently is because I have an accountant in my accountant uses zero, so I have to spend quite a bit of time just pawing through zero if I want to whether I know generating invoices or something. But so wave app sins are actually known as zeros free, I think it is. But I know wave apps is definitively free for their free use, which is pretty darn good. Alright, - -56 -00:42:03,380 --> 00:43:18,710 -Wes Bos: let's move on to the final topic here is just like marketing, like getting known. That's another downside I hear of a lot of people who can't kick it freelancing is they just don't have enough clients coming in for what they want. And generally, the way that I see it happen is, if somebody is good at what they do, like we talked about, if you're if you have good communication, you get things done. After a couple of years, those people are booked up rock solid, and they've got lots of lots of work. It's that initial 510 clients that you need to get. And because of that, you need to be good at marketing. Like you don't have to be amazing running Facebook ads and things like this, but you just need to let people know what you do. And when I, I used to teach freelancing at Packer, you and I would always just tell people, like if you were to go up to like literally anyone on your Facebook list or go up to an uncle at a Christmas party and say like, What do I do? And if he's not able to say like you're making websites, right, like you're doing something on a computer. If they're not able to say that, then you're probably not doing a good enough job letting people know what you need to do. Because almost all of this good stuff comes from just word of mouth, people going from recommending one person to another. No, you have some more points on that. - -57 -00:43:19,110 --> 00:45:19,890 -Scott Tolinski: Yeah, it's very fun. I have a realtor. Let me tell you this, if anyone is in Colorado, looking for a house, get at me because this guy is so good that I want to be on a podcast and tell everybody how good he is. Every single time I get any friends asking me In fact, this is a actual story, a friend of mine, let me know that he's actually moving to Colorado. And he didn't even say anything about a realtor. And I was just like, That's amazing. If you're looking to buy a house, get me first I have the best realtor. He didn't have to say anything. And the first thing that popped into my head was I knew a guy who can help you. Because this realtor was so good for us. And he did so many awesome things for us. And at the end of the day, he asked for referrals. He says, By the way, he I think he like sent us a card like right after we move in and it was just like, the best thing you can possibly do for me as a friend is send referrals my way because that's how my business stays afloat. And then sure enough, we sent him a referral and he sent us $100 gift card to the fanciest steak restaurant in Amarillo. And then so we said Oh, that was pretty, pretty sweet. Let's uh, let's send him another referral. We did got another gift card and every single time we get to go to the nicest restaurant in in in Denver here and get some fancy steaks, right? So it's like, Okay, I think I like this relationship. But not only that his work was really good. We've never had anybody disappointed with him. And I suggest him all the time not because he's giving me the steak with gift cards. But because he does such amazing things. And every once in a while we get this weird letter in the mail from him that just be like just thinking about you guys. And here's like a Starbucks gift card for 15 bucks. We're just like, do you sleep man? What do you like? Like it like he must have all of these things like set up on timers? Yeah, check in with all of his friends. Whatever but he's also the type of guy who's who's like, hey, how's your family doing? Let's just go out for drinks and we just got drinks for chitchat, you know, whatever. It's not like, it's not like always a reciprocal relationship there. But like, be that person like that. To me it was such an eye opening experience because like I you know, that's the type of Freelancer you could be. - -58 -00:45:20,370 --> 00:45:50,490 -Wes Bos: Yeah, that's. So behind the scenes, he's he's running some sort of software called a CRM software. So Salesforce, probably the biggest one, there's tons of them out there. And they'll just let you know when to follow up. Or if you haven't had an email from somebody in so long, then send them send them a gift card, or whatever it is, and systems like that can can really pan out because like, especially for selling a house, like what does a realtor get? Like $40 million for selling - -59 -00:45:50,490 --> 00:45:53,520 -Scott Tolinski: a house? And currently in Denver, you get that bit? Yeah, - -60 -00:45:53,520 --> 00:45:58,800 -Wes Bos: take a couple of photos. Throw it online. Yeah. So like, it's worth it for them to send that out - -61 -00:45:59,010 --> 00:46:02,280 -Scott Tolinski: with a CRM and any of these things. It has to be personal. - -62 -00:46:03,540 --> 00:46:04,380 -Wes Bos: so cheesy, - -63 -00:46:04,440 --> 00:46:13,350 -Scott Tolinski: he writes the cards by hand when they're sent. It's like, it's it's not just like some some generated email that I know, he just set up on a timer or something. - -64 -00:46:13,410 --> 00:46:34,020 -Wes Bos: You know, when I got life insurance, like a couple years ago, or 10 years ago, the guy who sold it to me had this, like the hardest follow up after he sold it to me. He says, who are three people you can recommend to me right now? And I was like, first of all, yikes. And second of all, I also read that book and I - -65 -00:46:35,550 --> 00:46:36,420 -Scott Tolinski: transparent - -66 -00:46:36,450 --> 00:46:57,330 -Wes Bos: Yeah, like I also listened to the audiobook or, like, I see this all the time with an emails as well, where like, sometimes you can tell people are using a technique, but they're genuinely good. And then other times you can tell people are using a technique and you're just like, oh, like you literally copy pasted that out of the book, like, come on, have a little finesse. Yeah, - -67 -00:46:57,359 --> 00:47:42,990 -Scott Tolinski: right. Yes. And that is the right word there. For those of you don't know, I'm a B boy. breakdance. For a long time, when we judge competitions, I've been a judge for maybe, you know, 3040 competitions. When you judge for competition, I remember, I used to lose. And I always wonder why I lose that man, I did the coolest stuff. And then when I became a judge, I understand that it's all about finesse. It's not that this person did something harder, it's that they made it look, the NES right, FNS is such a difficult thing to tack down exactly what it means. But at the end of the day, finesse is really what makes it smooth, what makes it look good, what makes it work, essentially. And that's what my realtor, Chris has his finance, right. He finesses the way he does all of that. - -68 -00:47:43,650 --> 00:48:18,510 -Wes Bos: On the last point I have here is just show people that you're excited about what it is that you're working on. That's really how I got a lot of my early dev work as well as that. I was going to conferences and doing YouTube videos and writing blog posts. And I was like, legitimately excited about the tech that I was working with. And and that just shows very clearly to to other people. And they say wow, like, we need to hire you to do that for us. Because you clearly know what you're talking about. And also you love this stuff so much that you spend your free time writing a blog post about it. - -69 -00:48:18,720 --> 00:49:34,560 -Scott Tolinski: Yeah. Cool. So that is tips on how to make freelancing easier. My final thoughts here are, don't be upset. If freelancing isn't for you, there's two aspects to this one, everybody is not great at everything, the first time they do it, chances are your first time working with a client may not be the most amazing thing ever, that doesn't necessarily mean that you're going to be bad at it forever. You can learn all of these skills, you can practice them, you can hone them, you can be the sharpest knife in the drawer, you can be Wes Bos of freelancing if you want, you just have to work at it. On the other hand, if you don't like it, and you've done it several times, and it's not working out for you, there is no shame in that game and saying, hey, this just isn't for me, I can say very specifically, I worked my butt off as a freelancer. And I was probably way happier one working in an office or to owning my own business, which I am now that's not doing client work. So despite the fact that I was capable of freelancing, it was not my favorite thing in the whole world. And just because I was making more money doing it didn't mean I had to do it. I found ways to make myself much happier doing different types of work. So again, you don't have to be good at freelancing. You don't have to love freelancing. You don't have to do it. You can always work for a company and there is no shame in that game. - -70 -00:49:34,590 --> 00:50:58,590 -Wes Bos: Yeah, I would go as far to say most people probably aren't going to be good freelancers, most people rather be on a team that can learn from more senior devs. They don't have to worry about billing, they can just sit down and do their work. And like honestly, when we we saw people coming out of the boot camp early on, we thought like oh, a lot of people are going to be freelancers. And it turned out that almost none of them were going to be freelancers and everybody much preferred to to Go and get just a regular job. So my last thoughts, I guess just like a like a little tip is that like freelancing can also be a filler or a stepping stone. So if you are in between jobs, or if you've, sometimes if you got a little bit of a chaotic time going on in your life, or you, you can't hold down a regular nine to five, because of whatever's going on in your life, then freelancing is good for that. Or if you're just saying, like, Look, I'm trying to launch a business for me, it was I'm trying to move over to entirely selling web development courses. And freelancing was was great, because then I could spend more and more time on making my courses as they made more money and less and less time on client work. And then eventually, I was able to hop off that boat onto the dock, as we like to say on this podcast. So it's it's just sometimes it's a great a great stop gap. And hopefully, some of the tips we had for you today will make that go a bit smoother. - -71 -00:50:59,190 --> 00:53:12,960 -Scott Tolinski: Sick. Do you have any sick pics? I have one that is for those of you who are programming fans and who it's a YouTube channel, Wes, you're going to like this, if you haven't heard of this, because this is right up your alley. It's It's It's almost like the technology connections in a less produced way for I don't want to say video game development, but it is things video game development. So for instance, there's a 10 minute video on the aspect ratio changes of Super Nintendo talking about the various ways that it outputs, the graphics and why why these things existed. What was my favorite? It's called a displaced gamers, I don't know. And I don't necessarily understand the title, but they're all man, they are also fantastic. So for instance, they he does this series called behind the code. And I just watched the video last night that came out two days ago is Zelda two behind the code. And they talk about like the differences between the CD version and the Nintendo version of Zelda two, and why they couldn't do tiling this and how the background repeater actually works well, okay, well, we only have in the very coolest thing that this guy does was is he steps into the RAM. So since these games are just, you know, there's so little data involved in whatever compared to modern games, and whatever everything is done on like a, like hex value in RAM a situation. And so he'll be like, this is where this is stored in this particular Bank of RAM, you can see that value to 00. Then watch us the screen updates like so he has like a ram editor with the game thing open. And he's like, watch how Zelda tries to exit the screen here. And this is why this very particular glitch works because the code does this and these values are stored in RAM. And oh my gosh, is some of the stuff he does with manipulating RAM is just so interesting. I've never seen anything like it to that degree. And I absolutely love it. There's a whole video on dithering of PlayStation and stuff that is just fantastic. I really, really have been into this channel specifically just because of like the ram stuff they talks about is just so very, very good. I know you didn't play a ton of games. Do you have any of the systems growing up? - -72 -00:53:12,990 --> 00:53:15,150 -Wes Bos: Yeah, I had a Nintendo. - -73 -00:53:15,330 --> 00:53:18,210 -Scott Tolinski: Oh, did you have a Game Genie for your Nintendo? - -74 -00:53:18,570 --> 00:53:23,670 -Wes Bos: Ah, my neighbor did. That was the thing like you put the game into before I went through? - -75 -00:53:24,060 --> 00:53:57,720 -Scott Tolinski: Yeah. And then you put in a code and then like gave Mario super jumping ability or something? Yeah, get this because he goes into Game Genie in this series. And it's so good. All that Game Genie is doing is overriding ram values, or it's overriding ram value. So I use Mario's jump velocity is stored in this bank of RAM. Let me just overwrite to that ram value. And when you have the Game Genie is you would enter codes like FA for whatever you were actually just adding hexadecimal overrides to the RAM, which caused to happen is so cool. - -76 -00:53:57,900 --> 00:54:21,390 -Wes Bos: Yeah, my my neighbor had the game shark. Where Ooh, yeah, we will play GoldenEye on n 64. And he had the game shark that it pop on top of it. And man that was like I love like actually being technical, like older now because I understand, like what is actually happening. And it's fun to go back to these these types of channels and actually understand how it all works. - -77 -00:54:21,870 --> 00:54:28,740 -Scott Tolinski: Yeah, so check this channel out is very, like the explanations are fantastic. And I really, really enjoy it. - -78 -00:54:29,370 --> 00:56:16,650 -Wes Bos: I'm going to sic pick some tool battery hacks. So Oh, I've got DeWalt tools where you forget that these 20 volt batteries. They're great because I've got all these these batteries and I've used many times before I've used the batteries in little projects, whether it's firing up my kids Power Wheels, and juicing it to go a little bit higher, things like that. And those kinds of projects are really, really fun. But sort of a downside to it is that you have to have you still have to have something to create The battery into you got to be able to slot it in and press the button. And on eBay, they sell these things. They're just these ones aren't 3d printed, but you can make your own if you have a 3d printer, but they're pretty cheap on eBay, it's called the D 20. V, that's for the wall, they sell them for all the different types of batteries. So I just ordered a couple of them and they basically your battery just clicks into this thing. And then it gives you a positive and a negative lead. And you can just attach them to whatever I'm thinking about building my own little floodlight where the battery can go into. And with the with the DeWalt batteries, at least the the circuitry for what are you laughing, this is the West This is so West, I love I love love hacking my own stuff. The great thing about the DeWalt batteries is the there's like over and undercharged protection on the battery itself. So you don't have to worry about running the battery too low and actually damaging the lithium cells aside because with Milwaukee tools, the the chips to do that are in the tool itself. So it's kind of harder to use those batteries in anything, you can still do it. But with the DeWalt ones it's a little easier. So check it out. It's called just go on eBay search for D 20. v. Buy a couple of them because you never know when you'll need them. - -79 -00:56:16,650 --> 00:56:17,820 -Unknown: Sick. - -80 -00:56:18,000 --> 00:56:57,570 -Scott Tolinski: Alright shameless plugs, I'm going to shamelessly plug our latest course which is react for everyone. If you're interested in learning react one on one and I'm talking one on one here. This is definitely a beginner's guide to react, you are not going to become a react pro from this course. But you will understand react and understand what's going on and understand why you do things specific ways. And it's all hooks based. It's brand new, it is 100%. Ready for react 17. And this is available at level up tutorials a.com forward slash pro and if you sign up for the year you save 25% - -81 -00:56:57,990 --> 00:57:33,870 -Wes Bos: beautiful I am going to shamelessly plug my master Gatsby courses a premium JavaScript and CSS training courses. My latest one, we cover all the different parts about making a modern website. So pre loading your JavaScript. Obviously Gatsby does that all for you writing the scope CSS graph QL. We use Sanity as a headless CMS inside of it. We do a little bit of customization there we write serverless functions to send an email, all kinds of really neat stuff, check it out Master gatsby.com. You can use the coupon code syntax for an extra 10 bucks off sick. - -82 -00:57:34,110 --> 00:57:51,870 -Scott Tolinski: I think that's great, you know, theoretically somebody could not know react whatsoever. They could take my course and learn what the heck react is. And then they could take your course and build some blazingly fast awesome sites. Or they could take your react for beginners course as well. Or my guest because as well. Beautiful. - -83 -00:57:52,350 --> 00:58:12,780 -Wes Bos: Take them all folks support us. Come home. Yeah, take a mom there actually. It's funny. There is a lot of people that listen this podcast that will take anything either of us or both of us put out which is really cool to see that support from everybody. That's amazing. Thank you. Alright, that's it. Thanks for tuning in. Catch you on Monday. Please. - -84 -00:58:14,640 --> 00:58:24,390 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax293.srt b/transcripts/Syntax293.srt deleted file mode 100644 index 808921e47..000000000 --- a/transcripts/Syntax293.srt +++ /dev/null @@ -1,112 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Unknown: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor, - -2 -00:00:26,040 --> 00:00:52,650 -Scott Tolinski: who come to syntax in this Monday hasty treat, we're gonna be talking about your body and stretching. And I'm talking about how to feel better, because as developers, there are a host of issues that can happen from staring at your computer, and most likely sitting in a chair all day long. So my name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, and with me, as always, is the Wes Bos. Hey, I'm - -3 -00:00:52,650 --> 00:01:03,030 -Wes Bos: excited for this one, because I'm not very flexible at all. And whenever I do do some little bit of stretching, I feel amazing. And I think that I need to do more of it. - -4 -00:01:03,240 --> 00:01:17,640 -Scott Tolinski: Yeah, well, let me just say, first and foremost, off the jump, I am not a physical therapist, I have no training. In this regard. I have been seeing a physical therapist for quite a bit of time. But I've also been a stretching enthusiast for a very, very long time catching a disease. - -5 -00:01:18,200 --> 00:01:47,190 -Seriously, dude, I have read so many books, I even sic picked in one of our first episodes how to become a supple leopard, which is like a physical therapists favorite book. And so I've been very into this scene for a very long time. And as a developer, and also somebody who has a lot of tight muscle issues, I can tell you, I've done a lot of research. So if you disagree, or your physical therapist disagrees that that's cool, too. This is going to be just general guidelines for most people. This episode is sponsored by Log Rocket, - -6 -00:01:47,190 --> 00:01:47,910 -Unknown: pay West, do - -7 -00:01:47,910 --> 00:01:50,250 -Scott Tolinski: you want to try the Log Rocket ad read this time? - -8 -00:01:50,280 --> 00:03:05,070 -Wes Bos: Yeah, Log Rocket, I think their tagline puts it best Stop guessing why bugs happen. So you install Log Rocket into your JavaScript application. And it gives you sort of this thing called session replay. So when a bug happens on your website, it's going to show you exactly what happened. So they give you pixel perfect replay of what the user saw for that bug to actually happen. You get all the network activity for something like that. And I imagine that'd be super helpful to see like, this network request failed, for whatever reason. And we didn't show the user or we didn't try again, or it didn't show the user any sort of UI, and the thing just broke that happens to me all the time where I'm on a website, and like it's not showing the right thing, are you clicking a button that doesn't do something right, like they should have handled that failed request a little bit better, you get to see the user's console, all the errors that happen and like I'm guilty of this myself is if something happens on my website, ask the user, okay, can you send me a screenshot of your console, right, and you shouldn't have to go back and forth with with your user. So check it out. If you want it for your JavaScript application. Pretty nifty. Check it out at Log rocket.com forward slash syntax, you can try out the free demo on there. Thanks so much to Log Rocket for sponsoring. - -9 -00:03:05,400 --> 00:03:57,540 -Scott Tolinski: Cool, so I shouldn't say first and foremost, some of these will be pretty visual, I will do my best. If I am unable to make a video I will link videos showing you how to do these things. I've considered making a bunch of little just short giftable videos of me doing some of these exercises. I think that might be nice. So first and foremost, what are the issues that developers primarily face? Well, we we sit in our chairs we type, we look at screens, I don't know about you, but I like to get my face right up in that screen. I just shove it right in there really jutting my head forward. I don't know about us, but I'm pretty addicted to my phone. I know a lot of developers spend a lot of time on their technology and their devices specifically because we work on these things. You're on your phone a lot. And when you're on your phone another thing that happens is this new like they're calling it like a like a pigeon neck phenomenon. We got jet your chin out forward, you can imagine you're trying to chin somebody could you see - -10 -00:03:57,540 --> 00:04:03,180 -Wes Bos: the videos got trying to show me what he's talking about right now. It's hilarious. He looks like a chicken. - -11 -00:04:06,270 --> 00:07:18,540 -Scott Tolinski: And so what you end up happening is you end up having your shoulders forward, your neck forward, and all of that stuff just pulling on your back. I know me personally, I've been having a conversation with my brother about this. He's not a developer, but he works on a computer all day long. And he's saying, I need to actively focus on pulling my head back and my shoulders back or else I have back pain all day long. And if you are a you know, a young and you're not not in the 30s and upper category, you might not even notice some of these things until you're our age and when you do, it sucks. I'm definitely in muscular pain all the time. Now another thing that can happen in generally from sitting too much is anterior pelvic tilt, which is something I suffered from before even using a computer too much where you end up having a comparatively a weak underactive core, an overactive lower back, and so your lower back hurts all the time and simultaneously, it's pulling on that muscle and it also can cause some issues with what your glutes and your quads are not working in the correct way as well, your glutes become weak from sitting all day long. And even if you have, you know, abs in the leg, maybe that ABS a nice, but that does not mean that they are working correctly. Right. So let's talk about one more thing too, which is carpal tunnel, which is something that I've personally suffered from, because I thought it too. Yeah, I love to use the trackpad, trackpad, not great for carpal tunnel, you doing all these little micro movements with your fingers. And what a carpal tunnel really is, sorry, medical people, if you is, you know, explaining correctly, but I'm pretty sure that carpal tunnel is, is those individual tendons, they're being inflamed because of the way that they're rubbing in these sort of patterns in ways that the tendons themselves become inflamed. And that inflammation can damage all sorts of things in your your hand long term. So let's talk about before we get into the actual stretches and the actual fixes for a lot of these things. Let's talk about misconceptions about stretching, people think, wrongly. So I don't know if your high school or middle school or elementary school gym class was like this, but I know mine was everybody, let's send a circle in Houston, you bend over and touch your toes kind of stretches where you're just holding a static stretch for a given amount of 10 seconds, I can still tell you the sequence in which my gym teacher counted in elementary school, which is one drew by Bob 6789 and 10. And then we did the neck stretch. I mean, it was just every day, right. And so that was like how a lot of people learned how to stretch was like, Alright, let's just hold these stretches. Let's just hold this, that whatever, and then I'm going to be more flexible. And then when I started. Now, unfortunately, your muscles don't really work like that. And first and foremost, the structures that is going to help the most for any of us that have a tight back, tight wrist, carpal tunnel, the exercises and structures that are going to help the most are going to be more dynamic. And I don't mean like rapid, I don't mean hard, I mean slow, controlled movements. So you could think of like a solution that they talk about for carpal tunnel is like wrist rolls, right, you're just rolling your wrist, or you're you're doing like shoulder rolls, shoulder surgery, - -12 -00:07:18,540 --> 00:07:21,120 -Wes Bos: like I need to do this as I'm listening to you - -13 -00:07:21,210 --> 00:09:04,980 -Scott Tolinski: forwards and backwards shoulder rolls. And you might not even think of those as being stretches. But those are the most important stretches you've got. And you shouldn't do static holds like touch your toes and don't move for 10 seconds, you shouldn't do that without being warm, have muscles. Not only that, but those those things aren't going to give you the type of bang for your buck that some of these things are. So when I'm talking about these stretches and stretching to help your back and only these things, a lot of these are going to be straight up dynamic movements. Okay, so the first one dynamic movement that can help you the most, and this one is through your lower back entirely. You put your arms up at like shoulder level, you can make fists, you can have your elbows like a 90 degree angle, I have my arms and like almost like a T pose with bent elbows, my fists facing forward, and then you just rotate left and right, you just do a twist. And these are just like trunk twists or you're twisting your core, your back everything left and right back and forth. And the goal for these should not be to like really slam it or do it hard. It's just like slow and low, right? Like you're doing some barbecue fully controlled all the way through, twisting and twisting back and forth and back and forth. This one helps me so much. I do it every morning. Dynamic twists are a great one to get your back muscles warmed up. I've been having just a tremendous amount of back issues lately. So just being able to warm all those muscles up is just really, really important. It also gets your core nice and engaged and you wanted to do it nice and slow. Now the next one that's probably going to get you the most bang for your buck. Is cat cow. Are you familiar with cat cow oS? - -14 -00:09:05,030 --> 00:09:10,400 -Wes Bos: No, I would go as far to say as I'm not familiar with any of these. Tell me about cat Cow. - -15 -00:09:10,790 --> 00:09:43,440 -Scott Tolinski: Cow. I cannot tell you cat cow because you what you do is you on your hands and your knees. You're in like a tabletop position hands and knees on the ground. And what you do is you do a fully rounded spine and then a fully arch spine. So like I think about it in your back and you got to be on the hands and knees and you're doing it a cap position where your your butts up in your Oh yeah. And then a cow position where your chest is in and you have a rounded back the other way and it's important to know your what's that - -16 -00:09:43,620 --> 00:09:45,900 -Wes Bos: to make sounds when you do these? - -17 -00:09:45,900 --> 00:11:59,430 -Scott Tolinski: I bet you this. We recently started watching a child yoga videos with linen I bet if we started doing cat cow noises while we did this, the kids would get involved a lot more. So I might start doing that. Yeah case you wanted an example of cat and cow noises. So this one is important for your neck to do the same thing. So if you're doing like that the cat position with your you know, your your butt up whatever is that you tilt your head back was well, you want to complete the the concave and convex shapes. And likewise, when you do the cow position, you're going to want to move all your head in. So you want to convex and concave. And the most important things about these positions isn't until like hold any of them for particular amount of time, it's to, to go slow and controlled through each of them back and forth. Because what that does is it's warming up your muscles, it's actually making long term changes to those fibers. And it's going to help you build the antagonist muscles for those positions. Because what a lot of people don't think about is like what stretching, it's not just lengthening, even if that had been a be like a scientifically accurate term. But it's not just lengthening the muscles that you're trying to stretch, also increasing the strength of the antagonist muscle, the muscle that's on the opposite side. Because if you increase the strength of the antagonist muscle, then it is going to do much more work for you long, long term. Another one here is that we do we sit a lot, right. And one of the things that can happen with sitting is you get this like real compressed feeling in your back your spine, everything feels compressed, right? It just feels like you're you're been squished. And so for me, in addition, a lot of people love. My dad at one point had rented an infill, and I rented borrowed an inversion table from one of his friends, it's one of those things where you hang upside down, I was supposed to Yeah, it's supposed to pull you apart? Well, it turns out, you can, you can do the exact same thing just hanging from a pull up bar or hanging from literally anything. And this is me when I'm having a rough back day, one of the best things I can possibly do is go into the backyard, grab onto something overhead, hands kind of closest and just - -18 -00:11:59,579 --> 00:12:00,420 -Wes Bos: hang - -19 -00:12:00,449 --> 00:16:38,880 -Scott Tolinski: like your whole body decompress and just do a straight up hang. You don't have to do it for super long. But it really will really help you pulling apart so that hanging is definitely like a great thing to help relieve some of that compression that happens. Another one is going to be this flat down, curl up spine. This is like sort of like straight up yoga, essentially, what you're doing is you keep your back as flat as possible, while you hinge at the hips and try to touch your toes, right, you go as far down as you possibly can with the flattest of back, you cannot lay your back curb. And then on the way up, you do it vertebrae by vertebrae, and then unwind yourself and round your back all the way up. This is going to get the two effects of having both a flat back as also the curled up spine that by vertebrae thing that you do in yoga is just so fantastic. Because again, it hits all of those vertebrae and hits your back in so many different ways. I know none of that a lot of these things that we're talking about is back related, that is going to be like the primary hitter for a lot of these people is both lower back, upper back mid back. So a lot of these things is going to really, really help you there. carpal tunnel, we talked about doing wrist rolls. Another thing I like to do specifically for carpal tunnel, I'll often make a video for this, you can get any sort of like weighted anything, what I use is a dumbbell with a weight on the end, low weight, but you could use any stick that has any bit of weight to it. And you do these three exercises, one of which, which is just a rope, like if you're hold your hand in a fist straight out in front of you. And you were to go back and up and down with your wrist without moving the rest of your arm. So up and down with the wrist and then holding on to a pole that it maybe has some weight, there's another one where you do the opposite where you hold on and you do like ski poles with it. So it's like your ski pulling back at these are going to be hard without visuals off to do a visual for these. And then the other one would be windshield wipers where you hold both your wrists like this. And you do so without moving your hands. And you rotate them in it looks like when you first once you're holding on. Yeah, try not to rotate your arms as much just wrist action as much as you're gonna rotate your forearms. But those things will help I used to it's funny, I played the drums a lot, which is also a carpal tunnel thing, right, you know, for playing drums, and on a flight. My family is going somewhere. I don't remember why. But I got stuck being the one person who had to sit next to some random person was the youngest person in the family. I don't know why that worked. They were just like, Oh yeah, we'll put Scott next to the random person, I guess as seniority got screwed. But the guy ended up being a semi famous drummer. He was like a drummer in this jazz group that traveled the world. And he found out I played the drums. So besides giving me sticks, he also taught me all these like wrist warmups, where you make a fist and you do the loop, they do the other loop. If you do your hand out, you do the other hand out. And so there's all these like rituals and all of these things will help you so much, make your wrist feel a little bit better. Another one which is really fun. This is for a lot of things. Your back, but also legs is horses stance. Now horse stance is something that comes from martial arts. And what horse stance is if you stand, you pivot your feet out, once you pivot your feet out, again, you pivot. And your, your feet end up being a little bit wider than shoulder width apart. So you're standing there with your feet a little bit wider than shoulder width apart. And then you bend at the hips and the knees, and you try to keep your shin bones perpendicular to that. Yeah, so you like some areas really deep, like you're riding a horse, right? So you're just, you're standing like you're riding a horse, you're standing like you're riding a horse. And at first, this would like really atrophy me after a little bit. And like I started doing core stance, when I was working at my standing desk, rather than standing, I can stand in horse stands for a long time. And the cool thing about it is, is like the more you do it, it takes him that pressure off your lower back, it brings it into your glutes, which are neglected from sitting into a chair, it definitely helps with your core muscles, which are neglected from sitting in a chair. And it overall is a great strength builder that you can do. And it might be a little bit harder at first, but it's a great strength and a great stretch that you can do while you're working. And one of them which is going to be shoulder circles. Again, this really follows along with the dynamic things that we were talking about before. There's a lot of different ways you can do shoulder circles, you can have your arms just down by your side, and just do shoulder circles. The important thing to do shoulder circles is do a one way, then do them the other way. And you can do it with your arms out like you're like yeah, like a bird and Jim Carr, that - -20 -00:16:38,880 --> 00:16:40,260 -Wes Bos: one from school. Yeah, - -21 -00:16:40,350 --> 00:18:12,780 -Scott Tolinski: you big circles, a little circles, all of those things, let me tell you, if you're sitting at a desk in your back hurts, you do the twist, you do some cat cow, you do some shoulder circles, you're going to be feeling a lot better afterwards. Another one is going to be doorway stretches to open up your shoulders more. Anytime you have a doorway, you can grab the doorway, with a straight arm, or whatever, yeah, and you use the door as leverage, and you push against it to pull your arms back in open. And this works for open like this, it works like this. It works down here, here, here. And even above if you grab the top of a door handle or the top of the doorframe and push your head through. And what the key component is, to all of these is to not let your back arch. You don't want an arch to lower back, but you want is your pelvis tucked under you want a tight core, and you want to push it through that way you're not stretching your lower back or whatever you're stretching the actual shoulder. Yeah, so all of those are really good when I'm gymnastics tip that I had for these is to make three different letters. So you do the a position where your arms are down at your sides wider than hips, and you're pulling in the door like that in a position. So your, your body makes an A, then you make a t that is the standard t pose where your arms are out to the side, right, and you're doing the same thing. And then the last one is the y. So you do a t and y and between all three of those arm shapes, you really hit all of the muscles in your shoulder, and it helps a lot. - -22 -00:18:12,900 --> 00:18:13,550 -Unknown: Ah, - -23 -00:18:14,550 --> 00:18:31,680 -Scott Tolinski: so that has been stretching with Scott, I am going to try to make some videos of all of these, I realized is a very visual thing. These are things that I do all the time almost every day to help myself feel better work better and not be in pain when I'm working. Or after I'm working for that matter. - -24 -00:18:31,920 --> 00:18:45,450 -Wes Bos: Yeah, I like it. I'm gonna try to do these every day for the rest of October just to see Dude, what does doing a month of have this dude cuz like, yeah, I've got I'm getting old. I got I got pains. I got aches, love to see what this does for me. - -25 -00:18:45,660 --> 00:19:31,290 -Scott Tolinski: And just like the gain of like how bad it feels over time. For instance, like doesn't feel bad overnight. It feels bad after years of abuse, right? Yeah, yeah, the same thing will happen with fixing it fixing it doesn't happen overnight. Yeah, and I have so many different tight, tight areas that I need to work on all the time to make them better. So yeah, this has been stretching with Scott, I hope I hope y'all got something fun out of this. I think this is a good one. This is one that we've been wanting to do for a long time I've been thinking about it. I've been standing in horse stance, constantly thinking about this. So we might do another one of these I have so much stretching as so many different stretches, so many different stretching tips for various things. And maybe next time we can get to some more leg stuff. This one's definitely back shoulder heavy. - -26 -00:19:31,770 --> 00:19:36,690 -Wes Bos: Alright, thanks so much for tuning in. We'll catch you on Wednesday, please - -27 -00:19:38,550 --> 00:19:41,600 -Unknown: head on over to syntax.fm for a full - -28 -00:19:41,600 --> 00:19:48,300 -Scott Tolinski: archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax294.srt b/transcripts/Syntax294.srt deleted file mode 100644 index ba2dedd6a..000000000 --- a/transcripts/Syntax294.srt +++ /dev/null @@ -1,432 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bos. - -2 -00:00:11,399 --> 00:00:12,720 -Wes Bos: Calm dude. - -3 -00:00:15,750 --> 00:00:18,510 -Scott Tolinski: I'm very glad you did hint that you were going to do that. - -4 -00:00:21,090 --> 00:00:42,960 -Wes Bos: We started. Welcome to syntax today we have the spookiest syntax. We will tell you stories from web developers, where it all went wrong. With me today is spooky Delinski? - -5 -00:00:43,559 --> 00:00:44,850 -Scott Tolinski: Whoo, whoo. - -6 -00:00:46,290 --> 00:01:06,900 -Welcome to the DAX everyone. We're doing spooky web dev stories. I am very happy because I think the closest Wes has ever come to quitting the podcast was when I did a spooky voices for half of the podcast. And he asked me to stop. So this has made me very happy was I'm very you've totally made my day. Thank you so much for doing a spooky voice here. - -7 -00:01:06,950 --> 00:01:07,530 -Wes Bos: Okay, - -8 -00:01:07,530 --> 00:01:28,350 -Scott Tolinski: this is our spooky web dev stories episode, where we are going to be reading to you stories sent into an sent into us anonymously about various a spooky web dev situations that have taken place in the depths of the that is our career choice sometimes. - -9 -00:01:28,380 --> 00:01:35,310 -Wes Bos: So today, what we have to spooky sponsor, Scott. Okay, who - -10 -00:01:35,310 --> 00:01:39,210 -Scott Tolinski: are spooky sponsors? Who was boo boss? - -11 -00:01:39,390 --> 00:02:00,900 -Wes Bos: Well, if you if you have a headless CMS, a CMS without a heart It was cut off. Where might you host your jam stack? Not only at Netlify. So like a grandma now. I know. I love your voice because it's - -12 -00:02:01,890 --> 00:02:05,220 -Scott Tolinski: just like it's like, yeah, it's like which voice is that? choice. - -13 -00:02:05,670 --> 00:03:00,270 -Wes Bos: And the other spooky thing could be bugs. Imagine having bugs in your application, or rebuild track those with century. We'll talk about them partway through the episode. All right, I'm back to normal voice now. All right. So these are stories that we asked you, the general public to submit. And man, we got a ton of them. So these are just stories where people are working in web development and you accidentally delete a database or send out an email that you shouldn't have or just like these, like stories that you hear in web development where something went wrong, and you just want to stick your head in the sand or, or say Ooh, ooh, that was that was rough. So it's funny. Unfortunately, a lot of these stories could have been avoided with a lot of testing or proper, proper staging environments. Maybe this is both spooky as well as like, cautionary tale of what to do with production. - -14 -00:03:00,840 --> 00:03:07,319 -Scott Tolinski: Yes, a cautionary tale. All right. Do we want to get into the first one? Do you want to do it? Are you would you like - -15 -00:03:07,319 --> 00:03:11,190 -Wes Bos: me to do it? Because this, the second one is one of my favorites. And I want to read that one. - -16 -00:03:11,280 --> 00:06:13,050 -Scott Tolinski: Okay, so this one was titled The most expensive Boolean ever, I might have some alternate titles for these as well. Early in my career, I was working at an online casino company. As with all paid services, it was crucial to make it easy for our customers to pay us. Yes. Many payment providers, however, such as PayPal chose not to work with the companies in the gambling industry. So as a big part of our job was to implement more niche payment providers for customers and various countries that we served. Yeah, this all seems like one of those issues so far that you hit you're like, Oh, great. Nobody wants to support gambling. Okay. Yeah. So while I was still new at the company, our CTO integrated one such payment provider, everything went smoothly for a couple of weeks until one tiny but also important error surface. You see, most providers offer some sort of way of testing their integration service without having to make any real money transaction. Here each transaction will be initiated with among all the usual payment information such as credit card number, a Boolean flag called the test right. So a money deposit with this flag set to true would act like any other transaction except for a small details that the card would not actually be charged, right. This is very common, or they might have test cards or things like that to to run the payment. At deploy time our CTO forgot about this flag and its value remained hard coded as true. This one bit of information enabled customers customers to make free deposits than withdraw actual money. As we discovered the error, a big salvaging operation began our operational staff deducted credits from affected customers who still had them and halted withdrawal requests. West's, but with most times, it was simply too late. With no reasonable way of asking individual customers deposit money that they owed us, we had to accept a massive loss. our CTO handled the situation by letting the dev team know what happened and humbly took blame without attempts to minimize his role, a gesture that turned out to be valuable for me as soon thereafter assumed responsibility for our payment provider integrations and good sleep easier knowing that mistakes happen to everyone. I'm happy to report I made it through without collecting one of these stories for myself. So this is a non self issue. This is this person. Luckily, the CTO did it because that would be a spicy meatball for any individual small employee to make at a company like that. Wow. So basically, if you didn't get it from what happened is they went live with their test payment processor, but this payment processor, it didn't use fake credit cards for their test surface, it uses real information for their test surface, allowing them to make deposits for free and pull out real money is the big, big one. That is an expensive, expensive bug, holy cow. That might be the most if we're doing this in dollar signs, like elbow signs, that's like a $5 sign bailed - -17 -00:06:13,560 --> 00:09:17,010 -Wes Bos: out early. He didn't say how many but like, sounds like it was was quite a bit. Yeah. Next one we have here is I've titled it an actual logging issue. One thing we should say is that we are have made all of these anonymous, most people requested, obviously, please keep me anonymous, but just keeping absolutely everybody anonymous for this. So thank you, if you did submit one, but we don't want anyone to get fired. Yes, I work for a logistic company in Johannesburg. And about a month ago, we were rolling out a new system for clients who deal in timber, like trees and pieces of wood and stuff like that. Our system was simple on paper track timber logs using QR codes as they move around the world. Each time a QR code was scan, you could see one logs entire journey on our app, as well as the entire containers details, kind of like tracking for logs, right? We had spent a year working on system with just about all done all we had to do is generate production QR codes and ship them off to our men, men on the ground in Durban, I was given that task my duty was to write up a script and generate the QR codes, print them onto an a4 file and eventually they'd be printed and laminate each QR code was basically what we call a log ID. That when you wrote data to it would update the database with whatever details you put in. how it would work was the QR code was generated. The log ID was written to a database as well as the QR code. That way we would know how many logs were scanned and could keep track of all the other information like dimensions and so on. So I wrote the script overnight fixing some bugs and seeing if it was populating in the database which I clearly remember it was important part note. As the daylight sailed in, I ran one last test and the QR codes were generated. I ran a quick print and voila, there they were. I pushed the code went home Three days later, the team were on the ground celebrating the 2000 logs scanned into the system. The first, the first batch was ready to go to China. But deep in the tech department, there was a secret. And somehow, I had commented out the code that was supposed to write the log IDs to the database, meaning only one log was actually ever saved to our database. Because of an issue with the QR code that log was discarded, which brings us down to 00. Needless to say, the client eventually spotted the issue. And we had to fly down to the depot before the logs were packed and replace every QR code with a new one. It was hot and humid. The average temperature was 41 degrees Celsius. It took us two full days of working nonstop to fix the issue. And we delayed departure by a full week. The only saving grace was we had a good time. Their band was has some really beautiful beaches and some awesome spots. So if you didn't catch it, this guy commented out a line of code and resulted in him flying around the world and stapling pieces of paper - -18 -00:09:20,520 --> 00:10:25,980 -Scott Tolinski: flying around the world because of a little messed up bug. Oh take a big trip that is rough. That is definitely some some real world results from just a tiny little mistake. Oh, interesting. Oh, man. Oh, man. All right, this next one it says here's my worst coding story. I was working in Adobe Experience manager, a pm and it was getting to the end of my nerves. I was adding some comments so I could quickly get back to the next day. The comment was if this code ever ships and I am not around, tell my wife that I love her. And that tell my son snitches get stitches. He was on the site for six months before I got an email asking about it. the plus side of that was I had to learn at get hooks to make sure this would not happen again. So with this content This made it to the actual like live site I you know, is a, like a CMS. Like that's a lot of things so so this content made it to the site that is amazing. - -19 -00:10:27,480 --> 00:10:35,970 -Wes Bos: What I wonder is like, what what type of good hook did you have to add that like if the word snitches ever gets in, just remove all - -20 -00:10:36,000 --> 00:10:38,370 -Scott Tolinski: Yeah, right. That's hilarious. Oh, that is - -21 -00:10:38,370 --> 00:11:29,159 -Wes Bos: funny. All right, next one is the spooky office skeleton. This one made me laugh super hard. At a previous job, I was just laughing. At a previous job, I was working on a scheduled email task that went to a mailing list of a given organization. Now when I was running my integration test, our staging database only had test data how I was wrong. We had pulled in production into staging very early into the company's history, and had emailed several of our longest standing most loyal customers and a quote Hello, I'm redacted name of the oldest man in the office. Let's call him Phil. Hello, Phil. The spooky office skeleton. Animated GIF of a skeleton play Trump. - -22 -00:11:29,970 --> 00:11:33,419 -Scott Tolinski: Oh my god. That's a trumpet. trumpet. - -23 -00:11:33,870 --> 00:11:50,549 -Wes Bos: Yeah. So I own up to the failure with the one on one emails to each of these customers who thought they are we in fact not great. Not only did he like goof it up with his customers, but he also like called out the oldest guy in the in the eye which - -24 -00:11:50,549 --> 00:13:12,149 -Scott Tolinski: is that that might be the funniest part to me is that like, and then the the gift is fantastic. It's very spooky very skeleton and is right at home on the web. That is great. Oh my gosh. Next one is prevent the default of making money. I have one horror story. Three years ago, I was starting my new job. A few weeks into it, I was asked to create an ROI return on investment calculator for the company website. I had a simple onClick function for a button. It all worked. And I published it. One week later, my CEO and marketing team were panicking because there were no inbound form submissions from any of the forms, newsletter or website, I quickly checked everything and realize that I had grabbed the elements using input and then the attribute selector type submit without any specific class. So it ended up on all forms. And since the function had prevented default, one of the forms worked for one whole week. This is a specificity issue with vectors. That's great. Oh, so basically, they just prevented all of the forms from on their entire site from working. And that could have been a very costly mistake. I know there's a lot of industries really, really heavily rely on their forms for intake and customer acquisition. - -25 -00:13:12,149 --> 00:13:12,840 -Wes Bos: Oh kidding. - -26 -00:13:12,870 --> 00:13:22,890 -Scott Tolinski: Don't matter what we're learning. A lot of the A lot of people have made some very expensive mistakes. I've made mistakes in my career, but I don't get paid in a way expensive mistakes like this holy cow. - -27 -00:13:23,279 --> 00:13:24,120 -Wes Bos: Oh, man, he - -28 -00:13:24,120 --> 00:13:33,480 -imagined stick my head like I would. I would just like stick my head in the sand and be like, this is not even me. And I can hardly read this. - -29 -00:13:33,510 --> 00:13:49,230 -Scott Tolinski: I know. Yeah, I know. It's funny, because non non devs. You know, people might not cringe that hard. But knowing that like what goes into these things, and how they end up being pushed live and who the stakeholders are, like, well, I cannot I cannot imagine experiencing the shame of - -30 -00:13:49,529 --> 00:14:27,120 -Wes Bos: some of these. Alright, next one. This is one that we got computer magic trick way early on, I set up an endpoint in PHP that took an argument to delete a directory, so like, probably URL forward slash remove Dir. And then as a parameter says dirname equals whatever. I want to hit it with no argument and the computer disappeared. entire computer because it's probably running in like root. And then if you run RM, whatever, and it just deletes the entire computer. - -31 -00:14:27,360 --> 00:14:34,710 -Scott Tolinski: Oh my gosh. Oh, man. Yeah, that is a lesson in API design. Definitely less than an API design. - -32 -00:14:34,860 --> 00:14:38,789 -Wes Bos: sane defaults are checking for required arguments. - -33 -00:14:38,789 --> 00:15:22,049 -Scott Tolinski: Base base cases. Yeah. This next one is updated user set score equals new score where I forgot where Id so this is a database operation here where the person updated the user's score without specifying a user ID, which I don't I'm not an SQL person myself, this SQL code doesn't mean a whole lot to me. But the root result here is, every time I was updating the score for one user, I overridden for everyone else's score as well. So basically, that's great. Imagine doing any sort of database operation, instead of performing it on one user, you're performing it on all users, every user, - -34 -00:15:22,049 --> 00:15:22,830 -Wes Bos: how do - -35 -00:15:22,830 --> 00:15:30,630 -Scott Tolinski: you recover from that? Well, hopefully, you keep in backups and you roll back the database, because yeah, there's not a whole lot of hope from fixing that one. Otherwise, - -36 -00:15:30,720 --> 00:15:48,299 -Wes Bos: we got that story probably five times from people I'm not we're not going to read every single one. But pretty much people forgot the where clause in SQL. And I guess that that seems like a design flaw in the line in SQL in general, where if you don't provide a where it just assumes all of - -37 -00:15:48,299 --> 00:15:52,380 -Scott Tolinski: them? Is that Yeah, is that I don't know, SQL enough to - -38 -00:15:52,549 --> 00:18:04,200 -Wes Bos: it? Is it? That's how it works? Yeah. Hi. sling some SQL myself, and I never know. All right. Next one is called change reaction. It was the second year of me working at a company full time doing PHP, we managed to get a big project, which is way over our heads, we still managed to get most of it right. I don't know how we did it, fake it till you make it. One part of the system that we did was a newsletter, there was first a newsletter software, which we use through an API, there was the new website that we built, there was the client IT infrastructure, where we had an old and crappy API. And there was a middleware which communicated between the new website the old and the old client IT infrastructure. As a result, those systems were all connected, and a change on the website needed to trigger a change on the client data side, etc. Long story short, when I was testing a new feature, and triggered a new newsletter was which was sent to all 30,000 production users of my clutch. But it didn't end here. Because of the bug, half of those users received this email every minute for about an hour, an hour because I was at a conference. And I needed to drive back to the office to find a way to fix this horror loop, which I was responsible for. Because of some hooks, one change triggered another and resulted in an endless horror loop. Also, since it was just some emails I accidentally sent, but I felt like people were dying because of me, what I learned is so much or else I could have prevented it somehow being better at what I do, but being careful. But in the end, this stuff happens to everyone. This is true. I, the other day sent a black friday email. Oh, and this is during November, or no, sorry, this was in September, and I sent out a black friday email, which is. And the worst part about it, is that you can't stop it because it goes out to everybody. And then you start getting phone calls and emails from everybody being like, Hey, did you know yeah, I knew I know what happens. So Oh, my gosh, - -39 -00:18:04,200 --> 00:19:28,770 -Scott Tolinski: before we get into this next one, I do I want to I wanted to bring in a personal one. Yeah, this isn't a mistake I had made. But one one time we had worked for this conference, and we were is a major conference. It was at the anime convention, a big, big, big conference, I'm not going to reveal the name of said conference. But we were tasked with building a scheduler app, we built it. However, there was like the whole real time scheduler thing. And somebody we didn't even know like the time to do it. So we contracted it out to like a third party. And this is somebody that we knew. And he built basically like, it was really not a whole lot of stuff. But it was just JavaScript for like infinite loading when you scrolled on the calendar. And we did not check his code well enough. Because if we would have we would have seen that he had a an infinite loop in there. And just about every single person that hit if you basically you're imagine this you're at a conference, you're like, let me go check schedule, you open up the scheduler, every single person that logs onto that thing is just hammering our server, yourself. DDoS ourselves took down the conference scheduler for an entire day during everybody had to use the pamphlet once we were in crap pants mode. Needless to say, unfortunately, it was not my project. Well, fortunately, it was not my project. So all I had to do was just sort of stand there and watch and Horace everybody else had to freak out about it. - -40 -00:19:28,800 --> 00:19:30,960 -Wes Bos: That's hilarious. All right, next one is personal - -41 -00:19:30,960 --> 00:20:11,760 -Scott Tolinski: MongoDB I once left. Oh, man, this is so good. I read this one already bought a company. then a month later went into my MongoDB Atlas account and cleared up some old cluster. So Well, it turns out at some point, I used a personal cluster for a work project that previous company he had even gotten to use in production. Needless to say, I got a call from my old boss. So basically, this is the exact type of thing that I would do being like I am a big fan of deleting things and getting rid of things that I no longer want or use. And sometimes I'm just like, Oh, right. I actually did need that like, oh, oh, - -42 -00:20:11,789 --> 00:20:12,390 -great. - -43 -00:20:12,449 --> 00:20:22,440 -This is like basically you come in, you start nuking clearing out old stuff, only to find out that one of them was used in production by a client application. Ruff - -44 -00:20:22,469 --> 00:21:06,180 -Wes Bos: ruff nightmare. Next one is called Hello, Rob. While working on the BBC I player well, rubber duck debugging to a colleague that's just sort of talking to a colleague about what's broken and how you're fixing it. I stuck a log message into the site wide all text helper. Hello, Rob. And I forgot to take it out and made it into production. And every single image on the website had an alt text of Hello Rob. That reminds me of remember last year there was the someone that crashed their server by writing a 10 gig file of success. Oh, that's good. That's very good. - -45 -00:21:06,180 --> 00:22:53,100 -Scott Tolinski: You know what else is good Wes. What's good? The move is the word who solve all of your spooky bugs. You're creepy crawly bugs on your side. I'm talking about sentry@sentry.io century is the perfect place to keep track of log and really just manage any errors and exceptions that happen in your application. You got creepy collies, you got ghouls you got what else got skeletons in there, they're marching in with their pitchforks. Well, we can assign those skeletons and say, well, that skeleton really only showed up once I started committing the line of code about awakening the dead so maybe I should create an issue that says please remove code that awakens the dead and then that will allow us to track that as we then vanquish the undead from our site. So head on over to sentry@sentry.io use the coupon code tasty treat all lowercase all one word and you will get two spooky months for free on Sentry dot i O. Okay, next one is SSN regex, I was writing a regex function to validate a social security number before being hashed into a DB or see you want to tell me a spooky story you start with I was writing regex because that's me. However, before doing validation, I forgot to unhashed the SSN numbers and ended up deleting close to 10,000 patient SSN numbers from our production dB. I spent the next two days recovering and re inserting 10,000 patients social security numbers yikes because they look what are you think if you don't have backups or whatever you end up just being like he please reenter your social security number into this. Like Yeah, we'd lost your socialist - -46 -00:22:53,130 --> 00:23:36,420 -Wes Bos: that's one of the most interesting thing about all these stories is how people had to get the data back Well, once your emails or logs or because in a lot of these cases people don't have proper backups running. Next one is called WordPress plugins. I deleted the WordPress plugins directory on the server not tracked and get before going on vacation for two weeks. Sounds like a good idea. Yeah, I fixed the white screen of death and then left. I couldn't push updates to the site until I reinitialize the repo and tracked plugins especially odd because of how what WP Engine did get at the time so it sounds like a website was down like even if you throw them in you have to login and set them up and stuff like that. - -47 -00:23:36,420 --> 00:24:04,830 -Scott Tolinski: So for two weeks, no thanks. No thanks. Taking the website down right before you go on vacation. always the best thing promo? Yeah, it's a part one it's a promo to it's the best way to have a super relaxing vacation. Alright, locking you in that yet effin dummy. I had this is quote logging you in your fn dummy. And I don't know if this was actually fn or the full word here. Once it was - -48 -00:24:04,830 --> 00:24:06,600 -Wes Bos: the word I amended it, - -49 -00:24:06,989 --> 00:24:56,730 -Scott Tolinski: Wes amended it we are a PG podcast I had I had locking in your fn dummy. Once go to prod he was the test auth stuff I was working on and I never got rid of it until the client side. Yeah, so dropping f bombs in your site, right? Yeah, probably not something you want to do. I actually I used to be like very, very liberal with my use of not not like f bombs, but like just slang or funny things or a little little blips and blurbs in the code that that like would not be considered to be professional. And you definitely learn your lesson when this happens to everybody. You You don't do that. Just keep it pro KEEP IT Pro and then if you make a mistake, at least the mistake is Pro. - -50 -00:24:57,120 --> 00:25:07,710 -Wes Bos: Next one is called a hostile coding environment. launched a site a day before I went on a two month backpacking trip in 2009. So yeah, - -51 -00:25:07,740 --> 00:25:10,980 -Scott Tolinski: good idea is another useful theme here to pick up on. - -52 -00:25:11,160 --> 00:25:38,280 -Wes Bos: Yeah, well in a hostel on the first night I checked my email only to find out there was a major bug. I spent the next five hours writing PHP in a non mobile friendly editor on safari on my first gen iPod Touch fixed it was a long time ago, like I guess I had a laptop at the time, but doesn't sound like he took it along. Writing PHP and a non mobile friendly editor on iPod Touch. Amazing. - -53 -00:25:38,310 --> 00:25:45,150 -Scott Tolinski: Yeah, iPod Touch, it'd be imagine what if you did it and like a click wheel? I brought this app back up and the click wheel iPod, - -54 -00:25:45,210 --> 00:25:45,900 -Wes Bos: it would Tina? - -55 -00:25:45,510 --> 00:25:46,110 -Scott Tolinski: T9, - -56 -00:25:49,410 --> 00:26:32,970 -I used to be fast at night. I was very quickly. I mean, I remember when it broke when it went to the full size keyboards, I was like, definitely got slower. All right, a graceful exit. I took up the master PSD template for a monthly email blast and destroyed it while building out assets back when slicing was commonplace. Yeah, the good background, this is what you did, because we had largely largely raster based sites, right? So you would do the site in Photoshop, you'd slice it all up. And then the process of that, oh, I don't know about us. But I would like do what this user is saying. And I would I would actually destructively manipulate this thing to get at like a rat getting at the cheese. I'm scratching and claw until I get all of the graphics I need to the site. - -57 -00:26:33,029 --> 00:26:37,110 -Wes Bos: Yeah, cuz you sometimes you had to, like rearrange people's like folders and stuff like that. - -58 -00:26:37,259 --> 00:27:05,010 -Scott Tolinski: Yeah, you had to get to that content. And it wasn't as easy as getting the CSS to just do it. So this this user, they basically destroyed the master email PSD template, no biggie until I hit save on the master quietly close the file and hopes no one figured out it was me. I left the company a few weeks later, so they basically destroyed the master PSD template and was just like, Alright, I'm out. - -59 -00:27:06,120 --> 00:27:12,810 -Wes Bos: This was like big back then like back. A lot of companies just use Dropbox or like a local file server to sync files and there was - -60 -00:27:12,810 --> 00:27:14,460 -Scott Tolinski: no Wildstar Yeah, - -61 -00:27:14,489 --> 00:27:18,390 -Wes Bos: there was no backup or version control. And if you goof something up, - -62 -00:27:18,479 --> 00:27:25,620 -Scott Tolinski: it was gone. Backup and version control is final, final master PSD underscore final to you know, - -63 -00:27:25,710 --> 00:28:03,540 -Wes Bos: so good. Next one is a fav icon DDoS DDoS, our own website when I forgot to include a fav icon back in 2010. This in turn gave a fully fledged 404 page on every fav icon request increasing bandwidth needed to serve the site in an order of gigabits per second. So this one, this one puzzled me a little because I don't remember having this issue. But like when a favicon is not there, it obviously serves up your 404 page. If your 404 page had significant resources on it that then requested more resources, you could DDoS yourself Ruff, - -64 -00:28:04,110 --> 00:28:41,640 -Scott Tolinski: ruff ruff at self DDoS not so good. All right, next one common sense. I didn't use it since it's a store how much a client should be charged accounting was trying to figure out why we're only getting a 10% of what we were owed for months. So this is what do they call this like a shifting decimal error or something like that, where like, in fact, this was the plot point of the movie office space when they were trying to steal pennies, or fractions of a penny. And they accidentally shifted a mundane detail like a decimal point a couple of places, yeah, resulting in a much different figure than that was accounted for. - -65 -00:28:41,640 --> 00:30:53,550 -Wes Bos: Or they stored it with like a, like you're using like a sword as a string. And you're trying to parse that into a number and the base is not 10, but eight. And whenever there's a lot, a lot of bad things that can happen when you don't serve, you don't store how much things cost in a non decimal value. Next one is I got permission. This one's for all the Canadians out there got permission to say which company this was, because I'll tell you why it was hilarious in just a second because of people and get it I will know who this is. So indigo.ca, which is indigo.ca is the biggest bookstore in Canada. They've got bookstores everywhere and online. They're there. They're huge for that indigo.ca once went down because the CloudFlare CDN j s had a bug that served a random piece of content instead of whatever you're requesting. So before we had like bundlers and stuff, it was popular to load in your libraries in via a CDN URL. And the reason behind that is because if somebody loaded jQuery from the same URL that your website then they would already have it in their cache and it would go quicker. So people use the CDN JS website for a long time. In our case, we were requesting require j s since this request was valid. In HTTP 200, there was no easy way to know if it was failing aside from checking the contents of the of the module that worked. The entire site failed to load white page. So like, the whole thing just didn't work at all. And Heather, yes, that Heather, so this is only funny to Canadians. But if you go into indigo, there'll be a sticker on the books, right? When you come in, there's a there's a, there's books, like right there, and this has Heather's pic. And it's this big gold sticker. I have one of my laptop because I think it's hilarious. It says Heather's Heather. Yes, that Heather wanted to know which vendor was responsible for taking down her site. Oh, only imagine the CTO and VPS at that time trying to explain open source CDN to her. Needless to say, we change this to a local copy and check this contents after that, - -66 -00:30:53,640 --> 00:31:00,300 -Scott Tolinski: oh, that's the thing that people say you could get burned by, but I'd never actually heard somebody getting burned by this. So that's great. - -67 -00:31:00,570 --> 00:31:12,000 -Wes Bos: Yeah, although I'm just gonna say out there for one of our sponsors today, if they had century, they wouldn't be able to see the actual syntax error that happened when they tried to load required jazz - -68 -00:31:12,000 --> 00:31:40,170 -Scott Tolinski: to bring in our sponsor background. Yeah. Well, if we want to maybe maybe do another Mukesh bounty producer on one of our sponsors, today, we'll give you some very spooky behavior, when you push to your Git repo from your site did automatically build it without having just added up. And I'm talking about netlify@netlify.com. Netlify is the host for all of your front end content. And more. Wes, do you want to talk about Netlify? - -69 -00:31:40,440 --> 00:33:02,100 -Wes Bos: Yeah, so Netlify is the host for your jamstack website. And what's kind of cool is that Netlify also has a whole host of other features that it gives you alongside the building and deploying and caching and all that good stuff that we probably know about, but they do things like contact forms. So like that's, that's a tricky thing. If you're doing a jamstack website, how do you do a contact form, right? So they offer that they've got plugins for amp algolia, if you want to, if you want to implement search in a jam sec website, you can use golia. They've got plugins for all of that stuff. They've got all kinds of really neat analytics stuff built in. So it's kind of cool. Like, because whenever you mentioned the amazingness, of jam stack, inevitably, that comes along, people say what about contact form serverless functions, search all of these things, login, CMS, all of that. And nella phi gives you offers all of that as well, which is pretty cool. So check it out. netlify.com forward slash syntax, you can sign up and check it out right on there, whether you're using a Gatsby or a next or it's kind of cool, they have Sanity, stripe 11 D, which is a really cool static site generator. So check it out. netlify.com forward slash syntax. - -70 -00:33:02,360 --> 00:33:13,290 -Scott Tolinski: Sick. All right, next one is don't leave the country. Hey, Wes. I'm going to put in Scott in here because he didn't say and Scott and uh, oh, yeah, no, this - -71 -00:33:13,470 --> 00:33:17,670 -Wes Bos: one, specifically a friend of mine, which I was so surprised to hear the story. - -72 -00:33:17,910 --> 00:34:25,190 -Scott Tolinski: That's great. They should also say, hey, Scott, it'd be nice to stop. Here we go. Hey, Wes. I saw your post about horror stories. Oh, yeah. was just added Scott with an exclamation point. And I appreciate that. Hey, listen, Scott, I saw your post about horror stories. A few years ago, my clients husband was arrested for embezzling. He was a high up at a Canadian telecom company. And the feds called me in to and told me the website I built were being paid with illegal money. So my business was under investigation for wandering. I had to hire a criminal lawyer and was told not to leave the country or I could face unrest. Needless to say they were additional clauses that I added to my contracts after that, if we want to have like a tear of you know, how big of an eff up or I guess this isn't on the user's part or whatever you want it like yeah, consequences for a building our websites and stuff. This is all very high up there on the very extreme consequences being investigated by the feds. Oh, yeah, that is a scary situation. - -73 -00:34:25,650 --> 00:34:54,420 -Wes Bos: I ended up following up with my contact with the story and I said, Oh, like like, what did you add to your contracts to say like, Don't involve me in your embezzlement. And they said, I added that if the client does anything that requires me to pay any professionals like legal fees, they will be charged back to them. And they said ultimately, it was okay because I had all of my books in order could prove my sources of income from two years prior. Who lesson learned books in order. - -74 -00:34:54,569 --> 00:34:56,040 -Scott Tolinski: Oh, my gosh, - -75 -00:34:56,339 --> 00:35:03,570 -Wes Bos: that's a good story for Freshbooks ad transition. Are you involved in investment. Well, - -76 -00:35:04,290 --> 00:35:05,360 -finances around. - -77 -00:35:07,680 --> 00:35:23,610 -Oh, that's good. All right, next one we have here is called the apostrophe catastrophe. I ran a contest for a radio show created a form for users to submit answers to a weekly question. One week answer included an apostrophe. No entries are recorded that - -78 -00:35:23,610 --> 00:35:25,440 -Scott Tolinski: week. Oh, no. - -79 -00:35:27,420 --> 00:35:35,960 -Wes Bos: Oh, that's something you don't even think to write in your tests. Right? That's the kind of test that you write after you after the error pops up. - -80 -00:35:36,480 --> 00:36:03,110 -Scott Tolinski: Yeah, there's a lot of tests that are over right after the error pops up. Oh, boy sees the second one's an oopsie. It's called envy. I posted a dot E and V file one time. Nuff said. So yeah, they put in a dot E and V file to GitHub, I would assume or somewhere public. And oh, they posted it. So when they posted in like Reddit, or Twitter or discord or something either way, Daddy envy lots of secrets. No, thanks. - -81 -00:36:04,110 --> 00:36:33,710 -Wes Bos: Next one, a Christmas miracle. I'm not sure if I told you on this last year, which didn't. I told I took down a production server at Christmas time with some poorly optimized SQL and stored procs. The app was for low income families to get assistance purchasing holiday dinner, the production server hosted over a dozen database all that which became unavailable. Imagine taking away Christmas dinner, from families in need to Yeah, - -82 -00:36:33,710 --> 00:38:20,580 -Scott Tolinski: some of these the stakes are so high on these it's just it's very unlike a cringed into the back of my my chair here, the $1 million bill when I'm interviewing a candidate, I like to ask them tell me about a time they made a mistake and how they resolved it. To make that vulnerability easier for a nervous candidate. I tell them a time where I wrote in a SQL UPDATE statement without the where argument which destroyed 13 records on production. one candidate we interviewed shared his story, he was configuring a utility that would spool up an AWS server, upload a video transcoded transmit the video and then delete the server. It was going well until one Friday, he pushed some code that broke the Delete server step. He got back to work on Monday with a $1 million bill from Amazon. So let me tell you, I also woke up one day with a very, very costly AWS bill. I don't know if this has ever happened to you. But I don't I don't know what happened if it was a an access issue or something. But I had been and I don't know if it was like hacked, necessarily. But somebody got access to an API key that allowed them to spool up new servers on my AWS account, and I woke up and there were hundreds of servers doing mining Bitcoin or something. Who knows? Yeah, zaneta bill froze like $30,000. And I email them and be like, Oh, so they were like, well, if you can get rid of these and secure your stuff, then we can we can move on. And that happened to me a few years ago, but it was a scary situation. I was like looking at that bill like holy cow. And luckily, AWS is reasonable enough that if you Yeah, fix up your stuff. They rescind any of that, - -83 -00:38:20,690 --> 00:40:16,110 -Wes Bos: that just goes to show the power of the cloud. Really? Yes, you can spin up a million dollars worth of equipment over a weekend and obviously, so they he kept those servers running, which means that no one else can use those servers. So you're buying Yeah, usually with the serverless function, you pay for three seconds, and then they shut the server down. But if you're especially with like video servers that probably have graphics cards hooked up to them, and you're running them for like 50 hours, instead of like 12 seconds, that's gonna be expensive. Yeah, $1 million, 1 million. Next one, the hacker who dropped the DB. So I was around two to three months into my first web dev job and was meaning to truncate the order table for a pretty big shop locally. Instead, I did it on production. Oh, two minutes later, my boss walks in and tells me that there's a bug in the admin interface, and orders are not showing up. That's when I realized what I had done. I got so scared I command queued the sequel pro and acted like I didn't know anything. Didn't see we were in the office until 11pm fixing it up. And luckily, we could restore all data since we had query logs enabled for replication. So that's, that's how a lot of times people like fix these database issues as they go back into emails that were sent or logs and they have to parse the data out of those log files and put them back into the database. Then they assumed it was a hacking attempt and malicious scripts. And spent quite some time to try to find the hacker. Well, I acted like I didn't know anything. Oh, I never confessed except to very close colleagues. I quit the job after three otherwise wonderful years sweat emoji. Oh, yeah. - -84 -00:40:16,110 --> 00:44:47,250 -Scott Tolinski: All right, we got a hefty one here. So my story takes place in 2016 to 2017. I was hired by a consulting company to work on a server, it's a CMS implementation. I've never heard of that server. No, my skill level at the time was probably just barely above mid level, but mainly C sharp and dotnet. Tech, well, maybe why I haven't heard of it. Not so much JavaScript. I was a pretty fair hand with the internals of the CMS though. So I thought I could figure it out. Also, I reasoned a bit that my tech lead had a decade of experience, so I could lean on him a bit. arriving on site was the first thing the client told us was no frameworks playing that js, or jQuery only. But then we'll be Ajax ng in the widgets from the CMS to other projects. So the JavaScript can't conflict. So okay, so you got immediately got to deal with a whole bunch of versions stuff going on here. So when I asked what version of jQuery the other projects were using, he said, Oh, various, some version two others on version 1.9. That's not a problem, right? sounded bad to me. Wouldn't that be rough to know whether your code will work? Yes. That sounds rough to me as well. My other tech lead thought, no problem, we can do it. Okay for you. At least my tech lead had the goods over the next week or so while we familiarized ourselves with the project, the client would make some more restrictions around the JavaScript and CSS to use, like no build steps, no jQuery plugins, etc, etc. The tech lead would sagely not as had no problem, okay, this tech lead, no, not a lot of problems with this tech lead. So we start working, and a few weeks and I'm struggling with a problem trying to reason through code should work verse, the written requirements, I asked my tech lead to come over, and I'm explaining the code. And he says, What is this tool you're using here? I had a dual monitor setup with one screen that had Chrome dev tools on the other. And I had the web page I was working on. He was gesturing at the dev tools. I didn't have any fancy plugins or anything. It was standard dev tools. I mean, this the console, know, what's this tool? It seems pretty useful. You mean, the dev tools? Oh, yes. that's built into Oh, oh, my heart wasn't in my stomach. Oh, he doesn't know Chrome Dev Tools. What else? Might he not know? Am I the one who's strong? Or am I the one who's wrong? Maybe Dev Tools aren't standard tooling? Oh, no. My place in pure self doubt without holding judgment on the expert tools I have. So what do you use, and he shows me his setup. He's This is an elaborate system of alert statements to debug his code. I keep a straight face. But internally, I know I'm in danger. I soon learn this is this is very good. This is like spooky stories. So when you're when you're a dev lead, who's been saying yes to everything does not debugs through alert statements. I soon learned that he doesn't know a lot about certain tech that was necessary for the project like Ajax or MVC pattern, what sorts of things I started picking up more and more user stories as he struggles with his work. Pretty soon the client is asking me to plan and implement these features. And that's when the real horror begins. I start writing JavaScript, I the junior level coder who starts writing a lot of JavaScript, I need to have reactive components. But I can't use a framework for libraries. I can count on jQuery because the I can't use plugins. And we're not even sure what jQuery is be used at any given time. Oh, no, I think I get it get through this. I'm so sorry. I think I can reliably use the AJAX functions, jQuery, sorry, start to set something up reasonable for the AJAX and that's about it. I then I read about this regular JavaScript called a mutation observer. So I start working, writing a custom framework, I can create functional representations of components and start overloading the prototypes with these functions. I feed into an engine in quotes that has mutation observer at its heart. It's not as bad as you're imagining. It's worse things happen on the site. But we don't know why race conditions are bound one off by hairs off by one errors. And then I realized my errors are fundamental to the architecture of the framework that I wrote. I work long hours, I become bitter. - -85 -00:44:48,630 --> 00:44:49,950 -Wes Bos: so beautifully written. - -86 -00:44:51,060 --> 00:45:31,830 -Scott Tolinski: I work long hours, I become bitter. Yeah, it's very funny. And I oh my god desperate. I start introducing Vici So the project knowing that the framework is not used elsewhere, maybe I can get away with it. And I do get away with it. Technically, things work over budget and out of time we released to production. I roll off the project one month later, but I hear stories, the company spends months and thousands of dollars to fix the project. They formally adopt Vue js and everything to that. I am so sorry, but I learned a lot and thank you. So there was just so many train wreck, - -87 -00:45:32,399 --> 00:45:41,610 -what a train wreck, you can't look away. Mini. Like once you get to the mini versions of jQuery, and you don't even know which one is like useful. Yeah, yeah. - -88 -00:45:41,999 --> 00:45:58,020 -Wes Bos: Oh, man, that is just like every possible thing to go wrong. The tech lead who uses alert statements? And like, yeah, normally, I wouldn't rip on somebody for not knowing how to do something. But the guy was a tech lead of a large JavaScript project, - -89 -00:45:58,320 --> 00:46:02,610 -Scott Tolinski: and having other people underneath you and just been like, Yeah, sure. Yeah. - -90 -00:46:05,190 --> 00:46:12,960 -Wes Bos: Oh, that was a good one. So thank you to whoever wrote that in. He said, I'm inspired to write a blog post about myself. So please, please do that. - -91 -00:46:13,320 --> 00:46:13,890 -Scott Tolinski: Yes. - -92 -00:46:14,370 --> 00:46:54,960 -Wes Bos: lorem ipsum. The horror story comes from when I was working on a feature to break a cache on our customers RSS feeds stored in s3 to reduce the delay when polling for updates. So this is pretty common thing. You have an RSS feed, they probably just save the save the RSS feed to a text file instead of having to do all the maybe hundreds of database queries underneath. I found out the hard way that our development environments also wrote to the same s3 buckets at the same time. And instead of just breaking cache files, I rewrote production records with lorem ipsum. Oh, doesn't say how they fixed it here. But that was probably at the rerun that script with the production. - -93 -00:46:55,440 --> 00:47:03,540 -Scott Tolinski: Oh, yikes. Big gags, malicious compliance. I once had to embed an ember app into an iframe in a react. - -94 -00:47:06,000 --> 00:47:07,920 -Wes Bos: React. So real world, - -95 -00:47:08,100 --> 00:48:16,920 -Scott Tolinski: Eddie Yes, I know, and implemented browser side pub sub so they could interact with each other. To make matters worse, the OAuth sign in modal opened from an element in the eyes. One day, our author randomly stopped working because of a major browser implement his giridih update to block events originating from the iframe. So we hastily added an Add button to the React app that published an event so that the Ember app could subscribe to it. This was the outline of this. We quickly shipped a fix, but our leadership said it was unacceptably ugly in order for us to undo it. We warned them that undoing it would prevent users from being able to log in, they didn't believe us. We reverted the fix and within minutes of the deploy, completing our support team started receiving reports of the login being broken after a couple of hours of broken log reports. The leadership told us to put it back so this this is a major Frankenstein right here like this is this is you know 10 neck bolts that are 10 neck bolts Frankenstein. This is - -96 -00:48:17,519 --> 00:48:29,820 -Wes Bos: this is horrifying. Oh, that is there's a whole Reddit called malicious compliance. And it's just stories like that where people are like, Alright, I'm telling you, it's not gonna work, but I'll comply. - -97 -00:48:30,240 --> 00:48:32,820 -Scott Tolinski: Whatever, do it cool. ship it - -98 -00:48:32,850 --> 00:48:48,300 -Wes Bos: all right. Um, we're actually actually it's pretty good. We're about halfway through the stories now. So we are going to put a cap on that and pick it up next week with a whole nother hours of additional stories and let me tell you, there is some good ones in there. Yeah. - -99 -00:48:48,810 --> 00:48:58,350 -Scott Tolinski: Oh my gosh, I'm very excited. Sick pics. This is the part of the show where we talk about things that we find to be sick. West. Do you have any sick pics for us? - -100 -00:48:58,560 --> 00:49:06,540 -Wes Bos: I do. And this has this is actually something I saw on one of Adam savages one day builds a couple - -101 -00:49:06,810 --> 00:49:09,750 -Scott Tolinski: years ago, here and savaging the sick pics, - -102 -00:49:09,840 --> 00:50:30,480 -Wes Bos: like this is Adam Savage last week as well. So this is a LED flame effect light bulb. So this is just a light bulb that goes into any regular light fixture, and it has a actual flame effect. And it actually looks real like I'm this you think it looks cheesy, but like this looks like a real candle are a real campfire. And what I'm doing is I'm going to put it into the light that is on the front of our porch because like if you've ever been to New Orleans, you know how they have these like gas lanterns that are sort of flickering. I love the love the look of that. So what I ended up doing, you can get them in just like a regular light bulb, which is called a 62 or you can get them in the really small sockets that go into our porch light has a small socket so I got a couple have each of them because I think it looks really cool that kids love it. And it just gives a really nice like ambience without having the danger of real flame. So the one you can just go on Amazon and search for the one I got was called hand sang led flame light effect. And also the cool thing about it is it if your light fixture is upside down, it's smart enough to know that it's upside down, and it will revert the effect. So that claim isn't going downwards, but up. That's cool. That's very cool. Yeah, - -103 -00:50:30,780 --> 00:52:56,850 -Scott Tolinski: my sick pick is going to be a video game that I've been playing almost obsessively joy. I play games, and I play games on the weekly like I like Sunday is my game night right where I play video games. But this game is just so fantastic. It's called Hades. It's by Supergiant Games, I've played several of their other games before and I've always been a fan. And this is a, they call it a roguelike game, I don't even really even I've never played with roguelikes before, I don't know very much about that. But let's say Hades is this this game that's themed out of like Greek mythology, right. And you play a character who is stuck in basically hell and their father is Hades and you're attempting to escape that's like the long and short of it, you're attempting to escape these like layers of hell, essentially, to get out into the world. And so the way it works is that there's like, you play the first time and you maybe make it to like level level 10 or something, and then you die. And then you have to start at the beginning. And the next time you're a little bit better at the game you you've gotten a couple more power ups, you get to like level 15. And you keep going and you end up playing almost in like a loop. But the coolest thing about this game, and I urge you as a computer programmer to play this game. And like think about it in a programming sense. There are so many variables at play here. So like as you go, there's just like 1000 there's there's five different weapons, there's hundreds of different upgrades and whatever, and you use the Greek gods to empower yourself in various ways. But as you end up going, it is so finely balanced. So so incredible that like you can tweak your setup, and play the same game. I've maybe made like 50 attempts to escape, maybe even more than that I've escaped, you know, at all times. And I still want to pick it up again, just because every single time you play, it's like, permeated, and it's different. And it's random enough that like you can have just entirely different experiences, even amongst the weapons like you could have like a sword. And there's like four different variations of the sword. And each one substantially changes the gameplay. And what I found to be just absolutely fascinating about this game programming wise as how the heck do they get so many different variations and permutations and random ability without breaking like the challenge of the game at some point. It's always very challenging no matter what you do, and it's always very engaging. So haiti's been my favorite game of the year, so far in to this game. So check it out, it's on switch PC, and that, that kind of stuff. So - -104 -00:52:57,000 --> 00:53:15,690 -Wes Bos: that's my spec, sec. Shameless plugs, Master gatsby.com. My latest course on learning to build websites with Gatsby and friends. And we do all the CSS in it. We use a headless CMS, it's pretty good people are really enjoying it use. It's at Master gatsby.com use the coupon code syntax for 10 bucks off - -105 -00:53:16,020 --> 00:53:44,100 -Scott Tolinski: sick. My shameless plug is going to be my animating spells course which is coming out in it's going to teach you how to animate things and spelt normally that we get into the gesture stuff and we show you how to write really neat custom animations and really take control of the look and feel of your site using spelt. It's fantastic. So if you are interested in learning spelt, we have courses for that and if you are interested in really stepping up that Polish meter check out animating spelt only on level up tutorials comm - -106 -00:53:44,550 --> 00:53:54,150 -Wes Bos: All right, thank you so much for tuning in. And thank you everybody who submitted their spooky office story. Hopefully you have a good Halloween and we will catch you on Monday. Peace. - -107 -00:53:56,580 --> 00:53:57,390 -Scott Tolinski: Head on over to syntax.fm - -108 -00:53:57,390 --> 00:54:06,360 -for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax295.srt b/transcripts/Syntax295.srt deleted file mode 100644 index e0f1c14ce..000000000 --- a/transcripts/Syntax295.srt +++ /dev/null @@ -1,164 +0,0 @@ -1 -00:00:00,360 --> 00:00:24,450 -Unknown: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos and Scott El Toro Loco Tolinski. - -2 -00:00:25,920 --> 00:01:01,140 -Scott Tolinski: Oh, welcome to syntax in this Monday, tasty treats. We're going to be taking some time to talk about time and I'm talking about the brand new date time stuff in JavaScript. This is really, really fascinating and a huge topic. So we're going to be getting deep into this stuff. And I'm referring to the temporal proposal for JavaScript. This is currently in stage two and we have a whole lot to say about this. Before we do so though, let's introduce ourselves. My name is Scott winsky. I'm a developer from Denver Colorado and with me as always is the Wes Bos. - -3 -00:01:01,200 --> 00:01:02,280 -Wes Bos: Hey everybody. - -4 -00:01:02,580 --> 00:01:09,420 -Scott Tolinski: Hey, Wes. Wes and Kitt he's got his son kit on his lap here and it's it's fantastic I love it. - -5 -00:01:09,660 --> 00:01:18,590 -Wes Bos: Yeah, he's been quiet for now. So I'm just trying to play some Arthur without sound mastic what a man. Can we just say the Arthur's the best show ever? I love ours are growing up. Do you watch it? - -6 -00:01:18,630 --> 00:03:15,330 -Scott Tolinski: Yeah, I used to watch it before school. Absolutely love that aardvark man. Yeah, he's a he's a champion. So good. This episode is sponsored by a another champion in our industry. And that is Sentry had Sentry.io. Now Sentry is the perfect place to keep track of all of your errors and exceptions. Since we're gonna be talking about JavaScript dates. Imagine this, you write some JavaScript date code, and something breaks and you're you're trying to figure it out, because the JavaScript Data API is very difficult to work with. Or maybe you've brought in some third party library. And that's caused more issues. Well, Sentry is here to help because it's the perfect place to bug all of your errors, exceptions, track them, and find them in your application to fix them. You can then select it, you can create a GitHub issue can mark it as resolved, you can mark it as ignore, but you can see exactly how many people this particular error is affecting. Maybe you were trying to work with timezones, which is something that is notoriously difficult than you goof something up. And now somebody on the other side of the world is having a bug due to your ignorance and the problems in the date API with JavaScript. Well, Sentry is there to help. So if you want to give it a try, test out Sentry AD Sentry.io, use the coupon code tasty treat all lowercase and all one word, you'll get two months for free. So let's get into it. We're talking about the temporal API, the temporal proposal, there was a link in the proposal. First of all, we're linking the proposal in the show notes here. So please click on that. But did you see this? Maggie pint.com link, it was called fixing JavaScript date. This was a really great blog post. And if you want a little bit of background on some of this stuff, I would pop through this blog post too, because she goes into some of the problems here, like what are the problems with JavaScript a while no support for timezones, parser behavior is unreliable, the date object is mutable. There's a lot of like little issues here. And it just goes through and talks about why the JavaScript a date API sucks. - -7 -00:03:15,480 --> 00:04:05,580 -Wes Bos: Yeah. It's like I was just going through this whole proposal. And by the way, it's massive. Like there's so many different parts to it. Basically, I'm saying it's a wicked awesome API for working with dates and times and relative time zones and durations, and basically anything to work with time or dates or calendars and be able to convert them to different types of calendars and different types of time zones and not get anything lost in between there. So I assume once this is shipped to the browser, we'll do away with, like, it was obviously still be there. But like the whole new date will just be like deprecated. And we'll use the new temporal, which is a capital T temporal, global namespace in all of our JavaScript, which is - -8 -00:04:05,630 --> 00:05:10,580 -Scott Tolinski: very cool. You know, it's great that there's this big problem that we all know, because we know that it's a problem, because I mean, how many times have you done a JavaScript project and not reached for something like date FNS or moment j s in the past like me, never I pretty much though that's like a day one installed for me in terms of like libraries that I'm interested in using date. FNS right now is always going to be something I'm going to use. So the fact that there are people out there who they're doing something about this, rather than just authoring a library and say, you know what we can fix the JavaScript date by introducing this new temporal proposal. And one neat thing here is that it's polyfilled as well. It says the polyfill specification documentation or under continuing development, it should be understood as unstable. So with that in mind, it's neat that you can actually use the polyfill today and at least try these things out to have a handle on them. I always love that when, when that exists so that we're not just going to be dropped this brand new date thing in our labs and been like, Alright, now it's now it's the new new, we're gonna have the ability to polyfill it. - -9 -00:05:11,159 --> 00:05:45,120 -Wes Bos: It's true, like we can both test it now. And also like, what's really cool about that is, once this thing drops, if you read the readme, it says that they are very close to going into stage three, at which point it will be considerably harder to add and remove stuff. So like, maybe in like a white like a year or a year, two years, we'll have this and then we can just start using it because we'll have a polyfill. We can drop that polyfill in and just go nuts. It's not it's not one of these things, we have to wait for all the browsers to support it, because it's, it's easily supported. Sorry, he's been No, no, he's - -10 -00:05:45,120 --> 00:06:20,580 -Scott Tolinski: fine. I think the moment they said stage three is the moment when I would consider to start to drop this in with a polyfill and try it out and use it over a library because you won't have to bring in a library to do date manipulation stuff in the way that we were before. So the principles here are that all temporal objects are immutable. So that's fantastic. bringing some immutability, their date values can be represented in a local calendar system. But they should be convertible to in from the Gregorian calendar. Well, it's the pro lepic Gregorian calendar, which I'm not familiar with. But - -11 -00:06:20,580 --> 00:06:22,020 -Wes Bos: what is that, sir? It's - -12 -00:06:22,020 --> 00:06:29,520 -Scott Tolinski: important. It's a link to Wikipedia. Let me see. The proleptic. Good boy, Korean calendar. - -13 -00:06:29,549 --> 00:06:34,080 -Wes Bos: Oh, that's the calendar that we use is yes. In Canada in the US - -14 -00:06:34,109 --> 00:06:37,380 -Scott Tolinski: is just the Gregorian calendar. It's just the fancier name for - -15 -00:06:37,409 --> 00:06:39,480 -Wes Bos: Yeah, very nice. Very nice. - -16 -00:06:39,959 --> 00:06:55,830 -Scott Tolinski: And it's also all date time values are based on the standard 24 hour clock, and that leap seconds are not represented. So there's no leap seconds, which are leap seconds in the current one, I'm not positive. I don't know anything about No, I've ever thought says - -17 -00:06:55,830 --> 00:07:03,390 -Wes Bos: in this packet, as regular Java as JavaScript is now it does not account for leap seconds, doesn't count for leap years. - -18 -00:07:03,630 --> 00:08:11,250 -Scott Tolinski: Yeah, this is absolutely massive. But there's some really neat stuff in here. So if you do go to the GitHub page for this, at the very bottom, in the documentation section, there's a cookbook to help you get started learning the ins and outs of temporal is available here. And if you select that, it takes you to a neat little cookbook documentation, which allows you to see in like FAQ frequently asked questions, but also like really standard stuff. Here's how to convert between particular types, converting between temporal dates of legacy dates, serialization sorting, rounding timezone, conversion arithmetic with dates. So what does this syntax look like this, you mentioned that it's a capital T, temporal, but you can think of it as like, temporal, now date, date, to string, whatever. But from then we have temporal. Now that instant, there's a whole lot of different classes inside of here. And it seems all very nice. I don't know if I have any, like, I haven't obviously used this at all, but just by looking at it, it seems like the kind of stuff that you'd expect from having a library. - -19 -00:08:11,270 --> 00:08:30,660 -Wes Bos: Yeah, like, you know, like when you have a date object in JavaScript, and you want to grab like the month. And you also want to grab the number of milliseconds or like the day of the week, and you got to remember if it's offset by if it's zero based, or if it's not, like I think days of the week are zero based, whereas days is a month or like what Yes, - -20 -00:08:30,660 --> 00:08:32,730 -Scott Tolinski: oh my god, that is the worst. - -21 -00:08:33,629 --> 00:09:43,710 -Wes Bos: This is just a really nice API that has like properties, you can just say, like dot minute. So you take your date and access the dot minute or date or anything like that. There's this temporal instant Scott array mentioned, that is the pretty much just like data. Now. That's a nano Actually, it's nanosecond representation of a fixed point in time. Whereas the link data now it's just millisecond milliseconds from sometime in 1970 or something. Yeah, January 1, midnight, January 1 1970. That's when time was created. So I guess we get nanoseconds now, which gives us even even more down to the wire, which is pretty cool. And then those those is just like Unix timestamps are right now as they can, you can move that anywhere and regardless of timezone or calendar or anything that can always be that is just a time. Whereas like, if you were to use like, January 5 2007 8am, you Okay, okay, but which timezone, right? So instance are across the board the same. And there's just so much stuff in here, I just have this open and just pulling through all the different properties. - -22 -00:09:43,710 --> 00:09:56,150 -Scott Tolinski: I think I'm gonna have to spend some major, major time on this, I think is just one of those things that's going to eventually just replace the way that we entirely do JavaScript dates in our applications. And I am here for it. - -23 -00:09:56,660 --> 00:10:43,400 -Wes Bos: It's cool because you can like the calendar API is just something we don't have in JavaScript at all, you can make a new calendar, you pass it a date. And then from that you can ask what year it is, what month it is, how many days are in that current month? what day of the week? Is it? One thing I'm wondering is, can you get and I'm assuming you can is can you get a list of all the weekdays and months of the year, that's one thing I've never been able to do. There was like a trick you can do in JavaScript that I figured out one time, but I really want it to be able to just like, just give me an array of all of the months of the year, so I can loop over them and put them in a drop down or something like that. And I bet there's something in here like this, there's probably there's probably like 200 methods in this entire spec for different things. So it's massive, its massive. And yeah, - -24 -00:10:43,410 --> 00:11:39,030 -Scott Tolinski: that's what I'm saying. I'm just like clicking through this nonstop and finding neat things. And it is funny that you mentioned that like building like date pickers. One of the reasons why date pickers are really terrible is because of things like this, like you mentioned, having to create an array with all of the month names, and whatever. It's like, yeah, I can't I just get that information from JavaScript itself in an easy way that is predictable. I don't know if you work too much with a calendar. There's like a react project react big calendar, that was it's really super cool react component for building calendar stuff, I worked with him pretty heavily in that one startup I was working for. And I just remember just fighting that library, I had to build my own like extended version of it. I remember fighting that library, how dates worked in JavaScript, and everything just felt like just insurmountably annoying, just like, this is like the worst, worst thing I'm doing in my day to day job. So well. - -25 -00:11:40,620 --> 00:12:05,520 -Wes Bos: What else we have here durations. So if you have like four days and you say oh, I need to add a day to that, there's add and subtract methods from durations. And then I'm assuming you can take that duration and then add and subtract that from a specific date, much like date functions will allow you to do which is really cool. So you can just maintain this running unit that's not a number. It's literally a duration. And - -26 -00:12:05,850 --> 00:12:46,530 -Scott Tolinski: this is this recipes thing is like really super good. If you haven't popped up in the recipes, one, Schedule A reminder ahead of a matching a record setting duration, push back a launch date. And so like actually gives you code to show you how if you need to push back a launch date, here's how you write that code using this new temporal. And to me, this is the most interesting aspect of all of these docks, because this shows what real practical code is going to look like flight arrival departure duration. So you, you can get the instance from the incident, like there's a difference method. Gosh, you get the difference in hours, and it gives you the difference in hours. Look, imagine that it's just it's very cool. - -27 -00:12:47,520 --> 00:13:31,560 -Wes Bos: One other really kind of neat thing I saw I saw in here, and I hadn't even thought of this is temporal that year, month and temporal month day. And this allows you to specify a month of a year and a day of a month without having to actually make a date for it. And I thought that was kind of interesting, because like, like for me when I do my affiliates. I have like, affiliates earned in February 2020. And then like, I have to represent February, in like a specific date. Right? And like, he was like, Okay, oh, I could I could choose like, February 1 at 12 o'clock. But then, in some time zones, that's January 31. And just - -28 -00:13:31,560 --> 00:13:33,240 -Scott Tolinski: do it for your own time zone. - -29 -00:13:33,330 --> 00:14:00,480 -Wes Bos: Yeah. And then you hope. Yeah. And it's like, oh, well, like, Why do I have to set a time for the rest of this, I just want to say, the month in the year, and they have a good example of like the November 2010 meeting or the 14th of July where like, you just want to specify a day or a month. And this will allow you to do that. And then you can then go ahead and translate that to other ways you want to represent it in different types of calendars. And yeah, - -30 -00:14:00,510 --> 00:14:24,630 -Scott Tolinski: I am very much looking forward to that exact thing. Sometimes I like I'll do to my like my sales manager, it's not a human being my sales manager dashboard that I built that shows, you know, my graphs and stuff and all. That's like the worst part about it. Anyway, I got to set gotta create your date and set the time to 00000. And then you get to take the other day instead of the last day of the month, the end of the day. Make sure you get in that zone and then just like, Ah, - -31 -00:14:24,839 --> 00:14:25,350 -yeah, - -32 -00:14:26,550 --> 00:14:39,720 -Wes Bos: my my own sales dashboard right now. If I travel, it's off by however many hours in my mind. I'm like, Oh, I should fix that. And I never do. It's fixed when I go home. Yeah, exactly. - -33 -00:14:40,530 --> 00:14:48,510 -Scott Tolinski: The location or something, if you want to get the right ones, cuz that's I mean, yeah, I mean, if you're the only person looking it's not like you got 100 people looking at it or something. - -34 -00:14:48,750 --> 00:14:55,950 -Wes Bos: Yeah, so good. I think that's it. I'm gonna try out this polyfill because it's obviously not done. Don't put it in your app yet, but - -35 -00:14:55,950 --> 00:14:58,680 -Scott Tolinski: I'm gonna put it into my app, pushing it alive. Right now. - -36 -00:14:59,670 --> 00:15:15,840 -Wes Bos: Do it That's that actually happened with, um, date functions 2.0. I like I just put the beta into production. And then they released and I updated and it broke because like, why was not lower, but they had it, they caught it in their warning message, which I was super happy about. - -37 -00:15:16,380 --> 00:16:12,800 -Scott Tolinski: I know I was very happy about that. That was a fun conversion. So that's really all I have on this you got anything else? Or is that I love this. So that's it from visual, you got to see these code examples. So read this blog post fixing the JavaScript date is from 2017, then check out the proposal, then check out some of those recipes. We'll link all of that stuff in the show notes. These recipes are really super good to check out. This is the new temporal proposals. So it's stage two, it's not quite in, it's still possible to change but it looks like it's moving Full speed ahead. And hopefully you get that in soon. So that's all we have for this tasty treat. We'll be back on Monday or Wednesday. What are we doing? Um, I had so much time to think about that. And I still goofed it up. We will be back on Wednesday with some UI web dev stories again. If we even might have a guest reading a spooky story for us. - -38 -00:16:12,840 --> 00:16:15,050 -Wes Bos: You gotta listen this one it's gonna be a banger. - -39 -00:16:15,090 --> 00:16:17,340 -Scott Tolinski: Must Watch. Listen. Now watch. - -40 -00:16:17,400 --> 00:16:20,730 -Wes Bos: Thanks again for tuning in and catch you later. Peace, peace. - -41 -00:16:22,640 --> 00:16:32,420 -Scott Tolinski: Head on over to syntax.fm for a fullarchive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax296.srt b/transcripts/Syntax296.srt deleted file mode 100644 index d7c33dddd..000000000 --- a/transcripts/Syntax296.srt +++ /dev/null @@ -1,576 +0,0 @@ -1 -00:00:01,320 --> 00:00:10,530 -Unknown: You're listening to syntax podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott Tolinksi, and Wes Bos. - -2 -00:00:11,219 --> 00:00:44,070 -Wes Bos: Welcome to syntax today we've got part two of a spooky web development stories. These are stories that people have sent in, and we're gonna read them off to you just horror stories of deleting the database or accidentally pushing something into production or like cringe worthy stories of web development where it all went wrong. Today, we are sponsored by two awesome companies. First one is Log Rocket. And second one is Netlify. We'll talk about them partway through the episode. Oh, I forgot to do spooky voices. Oh, I didn't today's got - -3 -00:00:44,580 --> 00:00:56,700 -Scott Tolinski: to good, tired, tired style. I had meetings because I have meetings. Now. I don't know if you notice I have meetings because there's people on my dev team that we meet. And so I've been just tucking into a microphone all day. - -4 -00:00:56,850 --> 00:00:59,970 -Wes Bos: Just meetings for the rest of your life. Yeah, - -5 -00:01:00,059 --> 00:01:00,960 -Scott Tolinski: I know, right? - -6 -00:01:02,070 --> 00:01:09,030 -Wes Bos: I just went to the dentist. And they use like a little mini sandblaster on my teeth ever had that happen? Yeah, - -7 -00:01:09,180 --> 00:01:28,920 -Scott Tolinski: my dentist is. So like, hypermodern they do x rays with this thing that looks like a literal 1950s depiction of a ray gun. Like it looks just like that. And they just like click it on the side of your head and you're done. It takes like two seconds. But the cleaning they do almost entirely via a like a water like water sprayer. Is that weird? Like a water blaster? I - -8 -00:01:28,920 --> 00:01:33,060 -Wes Bos: was much for that over the scratching with a little pick, right? - -9 -00:01:33,930 --> 00:02:02,670 -Scott Tolinski: Oh my gosh, it's so efficient and so good. I have like a receding gum on the inside. Because I used to have a towel. Yeah. So it like receded my gum and I hate going to the dead rate me all day long at the dentist. Oh, can't take it. They don't burn me. They use me as a shining example because I started flossing in the past like five or six years more more routinely. And I used an app to do it. And they said now they tell all of their other clients. They're like, he used an app. I gotta use an app - -10 -00:02:04,890 --> 00:02:18,330 -Wes Bos: to get me to buy an electric toothbrush. So Oh, yeah, dude, you gotta get an electric toothbrush. Sonicare all the way day, all day may get ready for some sick pics in the future. I think I'm gonna pull the trigger. Yeah, we got the - -11 -00:02:18,380 --> 00:02:26,750 -Scott Tolinski: latest Sonic care. Got the wireless charging, you just pop it in. It buzzes on your teeth that tells you when you're done. It couldn't be any easier. And my teeth have - -12 -00:02:26,750 --> 00:02:29,160 -Wes Bos: been waiting for I'm doing it. I'm doing it. - -13 -00:02:29,370 --> 00:02:29,880 -Scott Tolinski: Yeah, - -14 -00:02:29,880 --> 00:02:34,160 -Wes Bos: I'm an adult now. All right. Oh, wow. So we've got the stories for you today. banter, - -15 -00:02:34,350 --> 00:02:35,220 -Scott Tolinski: lots of banter. - -16 -00:02:35,310 --> 00:03:25,770 -Wes Bos: You want banter? We got it. And none of it is about the weather. So you're welcome. Listen to this. We've Scott was chit chatting with his bud, jack reciter. Over on Twitter. And as you know, jack reciter runs the Darknet diaries podcast, which is probably one of my favorite podcasts. And so he just talks about like, like, what, like security issues, dark web breaches, things like that. And he just like tells it. My favorite ones are the pen testers were people like the pen tester into like real world situations. And it's just an awesome podcast. And he agreed to take one of these stories and read it. And like, he stayed true to the story. But he just the way he embellished upon it. And it's amazing. So we are going to play that for you right now. And then we'll come back with just regular scotton West, which is not as good. - -17 -00:03:28,680 --> 00:06:07,110 -Jack Rhysider: Have you ever thought about email storms? Like for instance, suppose you have your out of office reply on and you send an email to someone who also has her out of office reply on soon as you send them an email, they're auto replies sends you an email right back saying they're out of office. But wait, you also have the same auto reply on to. So shouldn't your inbox respond saying, Hey, I'm out of office, too. And then as soon as that email gets sent to them, they responders comes back saying I'm still out of office, why are you trying to email me, and so on and so on? Well, luckily, that doesn't happen, because someone must have made a mistake at some point in the past. But this is a story about an email store. That didn't end so well. I was working on an app, which included email integration, and I needed to test sendgrid email API. And I needed to see what was in the notification, which triggered when something was sent through the API. So I wrote a web hook for sendgrid to send a POST request, and that would forward the contents of the post request to myself and another developer by email using sendgrid. So I sent the post request and got the email notification. But then I got two more, and then four more, and then eight more than 1632 64 128 256 512 1020 14 emails just showed up in my inbox and so on and so on. It only took me a minute or so to realize my mistake. But by that time, my mistake had triggered more than 75,000 emails. See every time me or that other developer would get an email sendgrid would trigger that notification email and tell me that emails were sent successfully. So for every email sent to us, two more notifications were generated and also sent to us by email, this email storm ripped through our office like a category four hurricane. See our email servers were hosted on premises in our offices. So not only did I knock out email for everyone in our office, but the exponential growth of inbound emails, dost that offices internet connection for the rest of the day, immediately, we called the IT support company who managed this email server. But every time they would try to remote into it and clear the queue, the remote session would just freeze up over and over, they desperately tried to weather the storm, but they couldn't. Eventually they had to get in the car and come do an on site visit and fix the problem. For a few days after that, our offices still didn't have a functional email server. This was a nightmare scenario, which has haunted me for years after. I'm jack reciter. And I hope you enjoyed the story. - -18 -00:06:07,769 --> 00:06:11,040 -Scott Tolinski: Thanks, jack, for recording this for us. By the way, it's fantastic. - -19 -00:06:11,369 --> 00:07:23,270 -Wes Bos: Yeah, definitely check out dark net diaries, I really appreciate it. Let's get going with the different stories. In almost all of these, we didn't actually mention the name of the company or the person, it's just that we get known in trouble. But this person, it's kind of important, which company was and they said it was fine. This one is called dirty dicks JSON, which is from Dick's Sporting Goods. I worked for Dick's Sporting Goods for several years. While I was there, the structure of the engineering here was a bit odd to say the least the backend engineering team and the front end engineering team were completely separate teams. They didn't have any direct interaction and didn't even touch some of the codebase do the separation. My team has front end engineers often had no clue how about the back end was actually set up. It sounds ridiculous, but it's true. Well, one day I was monitoring x HR requests on the website inside odd JSON called banned words dot JSON get loaded in so I opened up that bad boy to see what was inside. And to my surprise, it was hundreds of words that I simply cannot repeat on this platform. I actually have used that JSON file before there, there is a file on the web of every bad word you could possibly ever imagine. indexes in there, they probably had to do a custom. - -20 -00:07:23,489 --> 00:07:24,450 -Scott Tolinski: They probably had to - -21 -00:07:26,700 --> 00:07:44,070 -Wes Bos: say in a real, fork it and release their own bad words that JSON. I was absolutely shocked. It turns out the back end team was using this to filter out search requests that had bad words listed in the file. I couldn't believe what was in this list was loaded into the client side. What if somebody found it a month later? So - -22 -00:07:44,580 --> 00:07:45,480 -Scott Tolinski: I did? Yeah. - -23 -00:07:47,340 --> 00:07:55,560 -Wes Bos: Sure enough, a month later, I pop open Reddit and I see trending on our web dev, Dick's Sporting Goods bad words, dot JSON. It was an interesting day. - -24 -00:07:58,230 --> 00:08:44,730 -Scott Tolinski: That's very funny. I have a close relationship with the ex. I think I've been there a bunch of times because I bought all my workout equipment there on Black Friday. So I've been I pop into Dick's all the time in that place or at it's a cheap workout equipment there. So shout out to Dick's Sporting Goods. If you are looking to buy a squat rack on the cheap, ours is held up really nicely. So advertisement for Derek's shout out fix. All right, next question. CMS does or next story, SEO move through those or I moved at from design to engineering. So I had some code experience but never really dealt with environments after a grueling few hours setting up the app stack natively on my machine httpd.com. And all I got expression engine up and running - -25 -00:08:44,760 --> 00:08:50,490 -Wes Bos: app is Apache, MySQL and PHP, not the Google attempt to control the web not - -26 -00:08:50,520 --> 00:09:51,120 -Scott Tolinski: Yes, yeah. And pages or whatever that is shout out to expression engines to I haven't I haven't used that in a little bit. The last step is to replace some global fires the local points of the dev URL instead of prod URL, but not yet being trained to pay close attention. If I was looking at the site, that dev rather than site comm I swapped them out on prod, the site completely tanked. The marketing site was the main login for the app. So support blew up. The company basically stopped senior leadership team was doing rounds trying to get to the bottom of it, because the break happened via fields inside of the CMS down as well a senior eventually had to go in and manually change the values from the database to get things up and running again, pure live edit the database style. Again as my first day moving into engineering, I was mortified and certain they were going to boot me right in back into design forever. Yes. I think this one's very relatable. - -27 -00:09:51,120 --> 00:09:51,899 -Wes Bos: I've done this. - -28 -00:09:51,899 --> 00:10:06,409 -Scott Tolinski: I don't know if I've done this. I feel like I've done this in WordPress, or maybe even expressionengine but like, there is like a lot of specific situations when you can edit something in a wiziwig and bring down the whole site. Like, that's very scary you - -29 -00:10:06,409 --> 00:10:52,080 -Wes Bos: want me to tell you a good UI for this is I've done it on WordPress before you change the site URL on WordPress and then you save it and it's just white screen. And like you can't you have to email the database to fix it. Yeah, router has an awesome UI for this. And when you hit save, and it makes a possibly a breaking change, like you change the, the the URL of or you change the firewall rules or something like that, it will save. And then if it doesn't get a ping back from the browser, within a minute, it will revert the change back because obviously, you went missing to the browser, and it will roll back that change for you. Which I thought was was awesome. That's neat. It's sort of like that, you know, when you change the resolution. That's it. Like, - -30 -00:10:52,110 --> 00:10:54,270 -Scott Tolinski: do you want to keep this resolution? Yeah. - -31 -00:10:54,330 --> 00:11:15,870 -Wes Bos: Or are Am I upside down right now? Yes. Ah, next one is the oh no hotel? Oh, no. Oh, God, I accidentally managed an endpoint in production that pointed to a staging route for hotel reservations. I think about 400 people made a reservation that was wiped after a database cleanse. That was a bad day, not sure how I get my job. - -32 -00:11:17,549 --> 00:11:59,250 -Scott Tolinski: Oh, my God. Next one, FTP. Once in my career, I needed to create an FTP user for a client's website. Due to some wonky permissions, I had set up their home directory to the root of the site so I could FTP into the web root. Once I was done, I removed the FTP user and left the also delete user home directory. About 15 minutes later, it dawned on me what I did. And thankfully, the server host had a very decent backup. So So what they left this bit that deletes the user's home directory, but they is when you have deleted the FTP user. So what did it do it like went to the admin or something. - -33 -00:11:59,520 --> 00:12:13,590 -Wes Bos: When you add a FTP user usually what it does is it gives that new user its own like subdirectory but he created an FTP for the root and then when you delete it, it says, Hey, your delete their files, but it was the root of got rid of the - -34 -00:12:14,640 --> 00:12:16,980 -Scott Tolinski: bad. Yeah, seems like there should be some protection. - -35 -00:12:17,039 --> 00:12:55,140 -Wes Bos: Yeah, rough. Next one push notification how I knew to me code base was working on some push notification issues. And there was a difference between the local setup and the production setup. While doing that, I sent a dozen increasingly more frustrated test push notifications. Turns out, it wasn't just me that was getting the messages and the entire team was notified. I notified everyone on the team that was just getting text messages. Oh, shoot, not a big deal. It's a tech company. And sh it happens until the tweets start coming in and emails from investors that not only was it but the entire user base. - -36 -00:12:55,799 --> 00:12:57,000 -Scott Tolinski: Whoa, - -37 -00:12:57,899 --> 00:13:12,120 -Wes Bos: whoa, I swore wrote witty, despising push notification messages. I think that's sort of a trend of these is. Don't ever write a swear in any of your console logs or images, or you just never know. ban. - -38 -00:13:12,330 --> 00:14:10,169 -Scott Tolinski: Yeah, you never know when people are gonna see it. Back in 2005, I worked on a web app for a DVD retail chain. Moving on from server plus client apps required by dial up to a single full time online app. On the launch day, I discovered that the central DB sync from the client DBS was completely broken. Nobody tested data integrity. Yeah, yeah. oopsies people from branches just called we see people from different cities in our system, and ours are missing. Hashtag go. Nice little hashtag there. I spent the day bn seeing two local PC's dumping the databases through my sequel, Edmunds and compiling the central DB manually, all that after a brutal two day launch. All of those three days I listened to David Bowie's album must answer 70 Times wrote a bad product. Yeah, - -39 -00:14:10,169 --> 00:14:17,130 -Wes Bos: he probably whenever you hear that music, you just, it's true. I remember I have that with Owl City. Remember our city? - -40 -00:14:17,370 --> 00:15:01,620 -Scott Tolinski: You know what, actually, back when I was trying to become a musician. I had a lot of context with the LSAT guy because we were doing similar types of music. And there was a website. It was called the if this now what it's called, let me let me know the 16th you might not have ever heard of this called the 61. all lowercase letters, the 61. I don't know if it still exists, it looks like it's closed. But this was like a music streaming app where people would upvote songs until you could enter them under hashtags and people upvote them or whatever. In the Alamo city guy he like kind of blew up on there. First and foremost. Wow. And we were in the same communities of making songs and he sent me a couple messages because he liked some of my music and He got really popular and I never heard. - -41 -00:15:02,939 --> 00:15:09,899 -Wes Bos: That's awesome. I just associated that music with learning to code my spaces. And every time I hear it brings me right back. - -42 -00:15:10,139 --> 00:15:11,909 -Scott Tolinski: Yeah, that's very MySpace era music. That's - -43 -00:15:11,909 --> 00:16:18,779 -Wes Bos: funny how music can do that. Next one is called bad words again. So this is another one. I wrote a bad regex to check for bad words and a modal and it alerted the user humorously of bad words. And they said not to say it. Unfortunately, it matched substrings in words and alerted banking HR managers that they were saying ass and tip when they're writing assistant. I remember when I kid, I was writing a Microsoft Word shopping list for my mom. And one of the things on the list was fruit cocktail. And every time I wrote it, this huge thing would pop up on my computer. And I would be what, like, What's bad about root cocktail? What about this is just fruit cod No, it just it just like it was like matching part of the world. It obviously wasn't it wasn't the software probably wasn't smart enough to i thought i or maybe it's because I was thinking as I was typing it, it realized the word and I hadn't had time to finish it. That's why we need AI. - -44 -00:16:20,130 --> 00:16:46,529 -Scott Tolinski: But this next story is Mo Money. As a junior dev in my first web dev job I left a variable as zero instead of one in the payment gateway. This stops certain cards from being allowed to pay no one noticed for a year. Yeah, I got a final written warning and confidence destroyed. Don't assume it worked. Which is a great point. - -45 -00:16:46,770 --> 00:16:51,799 -Wes Bos: Yeah, check that this is the first time I heard of someone actually getting canned for a mistake like that a - -46 -00:16:51,799 --> 00:16:59,190 -Scott Tolinski: year. They left it in for a year and how did know me? That's very year. That seems like an operational issue. Yeah, - -47 -00:16:59,279 --> 00:17:41,790 -Wes Bos: yeah. That's crazy. Ah, next one bass ackwards. My first job out of college was that a prominent review and feedback management company. If someone bought a product from one of our clients, we would send them an email asking them for feedback in a review. In other words, we spam people with emails, we were having a formatting issue in some of our templates, a senior dev pushed up a change, and we mark the bug as fixed. The next day, we receive several frustrated calls. When they found out all their emails are being sent backwards, every single word backwards. So example dear customer became REM OS. It's it's like not just like, customer dears. The actual word was backwards, - -48 -00:17:41,810 --> 00:17:43,020 -Scott Tolinski: remote, suck read. - -49 -00:17:44,670 --> 00:18:03,270 -Wes Bos: Write mode separately. The commit was reverted. But thousands of emails had already been sent. It was an interesting day. And always remember watching our senior dev furiously revert code for the first time. I love the show yells course. That's I wonder what that was. Do you think that was like a? What do you think like a CSS right to left? - -50 -00:18:03,539 --> 00:18:07,920 -Scott Tolinski: I have no idea. Yeah, don't think CSS right to left. That's it. - -51 -00:18:08,009 --> 00:18:09,320 -Wes Bos: Does it reverse the? - -52 -00:18:09,630 --> 00:18:12,750 -Scott Tolinski: No, I don't think it does. Well, I guess it does. Yeah, I don't know. - -53 -00:18:12,750 --> 00:18:14,310 -Wes Bos: I don't know, man. - -54 -00:18:14,310 --> 00:19:19,200 -Scott Tolinski: I don't know. I have no idea on this one. All right, excellent. One taxi coding. I made any electron game to run on in store screens in five major brand stores for the launch of a new flagship device. Installation happened the night before. So I went to the first store with the crew to oversee, I found a breaking bug and spent the next 12 hours coding in a taxi next to the client on 3g, so much pressure, I couldn't remember if a j s filter removed or kept values in a true condition, dancing with the devil with 5% battery and three Docker images to build and publish but manage to find a pub at 8am to celebrate the job well done. Yeah. Yeah. I've had actually my share of pull over I had to once one time I was on the ski hill. I was on Winter Park, Mary Jane and I had to ski all the way down the hill to my car to go get my computer to fix a bug that was in production at that very moment that I'd gotten an email about while I was on the chairlift. So yeah, shout out to you. I had a similar so - -55 -00:19:19,259 --> 00:19:34,920 -Wes Bos: man, I this one I thought about all weekend. It's just I just kept thinking back to the poor guy sitting in the back of a cab. That's probably just sitting there running and fixing it. Wow, that's, that's rough God that you can find a public idiom that would not happen in Canada. - -56 -00:19:35,060 --> 00:19:36,150 -Scott Tolinski: Yeah. - -57 -00:19:36,660 --> 00:20:22,770 -Wes Bos: Next one is bad envy. Not sure if that's the kind of story you're after. But in a company I work for we had an absolute madness of packages was weird dependencies to each other. So every time we had to switch between projects, which is regular because we worked on six different sites, we had to yarn unlink rm rf, the whole yarn link directory, yarn install, and you're link again, this on average should take at least half an hour out of each devs day. Oh, and another nightmare that there was was there is no hot reloading for the sites every time you made a change, even if it was just a change of margin and a sass issue, it would take 40 to 50 seconds to rebuild. I miss the Ruby sass times where the refresh took less than 10 seconds. Oh, - -58 -00:20:22,920 --> 00:20:39,210 -Scott Tolinski: yeah. Let me describe to you a nightmare. Here's the nightmare. Yarn link. That's it. That's the nightmare. That's the whole nightmare. It is very hard. And you never know if what you're doing is working or not working. I don't know if you've done any yarn linking or - -59 -00:20:39,450 --> 00:21:19,200 -Wes Bos: you have been in a lot of cases. If I have to edit a like a module that I'm using. I just go into node modules and start hacking away at it. And they're hacking. Yeah, it's usually you're working on the bundled version, not on the main version. But it's it's a pain. And that's exactly what I do. Yeah, I just had to node module because yeah, especially if the parent repo is like a mono repo. And then you're just like, asking to make yourself very frustrated. Those are probably the biggest pains to me is like when development is slow. You're like, I can code and think much faster. But this thing is getting in my way. And it's I'm so slow and frustrated with it. Yeah, - -60 -00:21:19,230 --> 00:21:49,530 -Scott Tolinski: I know. I'm spending some time implementing snowpack right now. And I'm just I'm very looking forward to the feature where I say something and it's just updated that next instant. Alright, next story is logged in as I once left, some debug code in when checking and error for a user that logged everybody into his account. So that account has been compromised, I would say I think that's safe to say that accounts been compromised. Everybody get to log in as Oh, that sounds that sucks. - -61 -00:21:49,650 --> 00:22:27,300 -Wes Bos: email subscribers plugin. So my task was transferring a WordPress site from one server to another we were pretty rookie sir setting it all up manually. We set up all the plugins and then imported the content years worth of pull posts. Unfortunately, we didn't notice there was an email subscribers plugin that emails a subscriber every single time that a post is published. So this is pretty common. People say yeah, I want to get an email when there's a new blog post. There's a plugin, you throw it in, and it works like that. So when we imported 100 plus posts, it ended up sending an email for every single post to every single subscriber. Oh, you think it would detect that? - -62 -00:22:27,420 --> 00:23:41,160 -Scott Tolinski: There's a lot of like, a man there should be check some some systems nowadays. Yeah. All right, next one, one in the 300 chance of the C word. I once wrote a pro mountable password generator. The theory being that generated passwords made up of random vowels, combined with consonant pairs would create a string which wasn't a real word but could be pronounced and therefore would be easier to remember. It was used during the password reset flow of a web app whose demographics skewed towards very non tech savvy, many of which would have problems even copy and pasting. It was in production for several months, and had generated thousands of passwords before another dev received a new password, which had contained the C word. And then he wrote, yes, that C word. One of the consonant pairs I had used was NT, the function had roughly a one in 300 chance of including the C word somewhere within the generated sorry, one in 300. Yet not great odds for that's both funny get the word. You're probably your generator. That's pretty good. - -63 -00:23:41,160 --> 00:24:04,410 -Wes Bos: I got some I have random store names and one of my courses and it just takes like a adjective and a couple vowels. And someone got angry, unsightly women. And she's like, Oh, you should probably check this. I'm like, Oh, yeah, I probably shouldn't. possibility but it's also random. So ha, yeah. - -64 -00:24:04,410 --> 00:24:09,690 -Scott Tolinski: Like what? Yeah, yeah. How do companies like Heroku? Or, you know, how did they do that stuff? I - -65 -00:24:09,690 --> 00:24:50,610 -Wes Bos: don't know. That's, that's a good question. Like Netlify does that as well? Are they like generate random possible pairs? And like, how do you go through all the permutations because there's millions of possible combos? I don't know. That's, that's a good question. Next one, production target. When I joined as a new grad, I was asked to learn about load testing and load testing our staging servers, I learned about Gatling which I just looked that up, and that is an open source load testing framework. And after I figured out how it works, I ran my Gatling load test script. I think I said it about 100,000 concurrent users. That's kind of cool. Actually. Maybe we should do a show about that. I think that'd be kind of a cool tool. - -66 -00:24:50,610 --> 00:24:51,990 -Scott Tolinski: I'm interested. Yeah. - -67 -00:24:52,350 --> 00:25:08,490 -Wes Bos: Three minutes later, we all start getting alert emails and calls saying someone was trying to take our servers down. I also didn't realize that It was me until I noticed that I set the production script to be target the production servers, I did not get fired, thankfully. - -68 -00:25:09,840 --> 00:28:17,550 -Scott Tolinski: Hey, that's great. And let me tell you, you also will not get fired. If you use one of our sponsors. I'm talking about Log Rocket, because Log Rocket allows you to find bugs in your application very easily and very quickly by giving you a session replay. Now, what is the session replay? Well, it's a video scrubbable video that gives you the network tabs and shows you the user's mouse where they clicked on how they were able to do all this stuff. This way, you would have seen potentially somebody firing off this Gatling and seeing that it was your mouse, who is the killer is coming from inside of the house, that whole thing. So you'll want to check out Log Rocket at Log rocket.com forward slash syntax and you'll get 14 days for free. Again, you get a scrubbable video replay that includes not only the video of what happened, but also the Network tab and the console and all sorts of fantastic things to help you find and solve those bugs. So thank you so much for Log Rocket for sponsoring this spooky episode. Who This next one is our happy SEO and then there are definitely worse things to read from others. But the worst thing in my career was to block all search engines from Europe's largest cooking community by accident. Oh, yeah. In the good old days, let's deploy those changes, meant to login to a server by SSH run 30 commands and check to see if everything is fine. I remember those days. days, there was no physical problem on the website. So we all left it for the weekend. Yeah, I know not to deploy large changes on a Friday, the source of all bad things that happened was the idea of a colleague to remove our testing installations from Google. Sadly, he pushed it to the wrong branch. As I was already thinking about the weekend, I skipped the check every file of all commits, if they're reasonable on the checklist, or each go live, because you know, it always just kind of happens to me too, like you get complacent with things working all the time. And that you laxer guard a little bit something breaks. So setting deny all in the robots, that txt did not only lead to 50% velocity of visibility in Google measured by sistrix. And millions of pages removed from the index, but also lost revenue from it. If you block Google's crawler, it will not deliver content related ads on websites and this burned thousands of euros per day. Luckily, SEO saw that something was wrong on Monday, and we could fix it very fast. But it burned lots of money. And I was in fear for a full week until we figured out that it was a good accident. Google started to crawl the new content that was better than the old one and rankings had been higher. After two weeks than it had been before. Press one line of code. A lot of money burned a horrible week to wait for a new search result measurements. And the day that we started to implement automated deployments with security checks that prevented some of the possible mistakes. - -69 -00:28:18,630 --> 00:28:31,350 -Wes Bos: So you just ran the like probably the largest SEO test. Yes, yes, that's just hilarious. I'm glad it worked out the next one I call it just I couldn't even think of a name for this one horror story. - -70 -00:28:31,469 --> 00:28:38,160 -Scott Tolinski: I surprised you named all these I named a whole bunch from last time. I did not get a chance to name any of these all i think is probably for the better because your names are all - -71 -00:28:39,240 --> 00:29:49,110 -Wes Bos: I got the names. You got the add transitions. Yes. So this one horror story. I wrote masquerade comm command line tool to anonymize databases with in one of the earliest versions, I did an array merge, but got the order of the arrays wrong. The content of these arrays was database connection config, the one from a config file and the other from CSI params passed to the binary I meant for it to have the CSI params to take precedence. So cron would run to anonymize a replica of the database. But alas, the config file from the production application took precedence and I anonymized my clients production database on a nightly basis. Oh, we found out a few days later, that we had to parse order confirmation emails from sendgrid. In order to retrieve the data. I said, not to run a process like this on a production machine. And now we all use Git lab runners with a scheduled task to anonymize who those ones are. You can screw it up by accidentally typing the wrong thing or hitting the wrong button or running a command in the wrong directory. Spooky Uchi I fell in and I can't get up. - -72 -00:29:49,140 --> 00:30:38,040 -Scott Tolinski: All right, this one. This one is pretty good. At my first job, I worked for a company that built a system for monitoring vulnerable folks in their homes. It worked too. motion sensors placed on the wall of the house. I push to change the charts that I thought fixed a bug. Two days later, we received a call that a woman was convinced her elderly father had fallen in the bathroom. She had called him in a panic at 1am. Oh, gosh, that's scary. Turns out because of a time. So here are the charts. were missing data from 12am to 1am. Certainly my most painful and costly bug. Yeah, that is frightening. That's very frightening to know that you could write some software that would have that kind of consequence. Very, very scary. - -73 -00:30:38,070 --> 00:30:44,400 -Wes Bos: Yeah. Like, that's, that's that's real, man. I can't even laugh at that one. I'm glad that - -74 -00:30:44,520 --> 00:30:45,930 -Scott Tolinski: right. I know. Mike. - -75 -00:30:47,010 --> 00:30:50,670 -Wes Bos: says it like that hurts like that person was probably super rattled. So - -76 -00:30:50,970 --> 00:30:54,660 -Scott Tolinski: good story. Yeah, real. Woody. Yeah. Thanks. - -77 -00:30:55,560 --> 00:32:08,430 -Wes Bos: Chris crypto used to work for a startup company that had an Ico back when it was a thing tm So, Icos initial coin offerings, so when like a new type of crypto comes out, they have an Ico where people can buy in. launch day is coming and we're preparing for months. The smart contract is already out there on the Ethereum network, no going back, our website had a countdown and everything for all the investors we spent months acquiring, and the potential big ones we had on our list. Big day finally comes. And I finally get the wallet address just before launch. Hmm. It's a QR code I uploaded to the website in time, just hot and the countdown and excitement. We did it. Not long after I'm informed the QR code was a placeholder, and nobody was able to pay. He likes the crypto craze died right after that. So who cares about how much quote unquote money we lost in those few hours, the company went under the next year before I left, they still owe me some money. So just under the same Yanks as deploying that last one where you have the gambling and you forgot the Boolean of tests. True. There's - -78 -00:32:08,460 --> 00:32:14,400 -Scott Tolinski: so many like money ones like that, like lots of money lost or potential for money. - -79 -00:32:14,400 --> 00:32:28,020 -Wes Bos: I still do like when I launched my courses, I still even though I test on stripe all day long, I still generate myself a coupon. I set it for like $1. And then I buy the course myself just to make sure actually works with a real - -80 -00:32:28,020 --> 00:33:39,960 -Scott Tolinski: buy the course yourself. I refund yourself whatever. Yeah, I do that. rm rf, my Halloween Horror Story, Friday afternoon in the office working on a Magento site. frightening enough in itself. I love that note that this author added because it is very thing working on Magento. But anyway, we used to do beer Fridays, but I'm a woman who doesn't drink. So I sat at my desk drinking a glass of Prosecco and ran rm rf, RM, hyphen RF to for those of you don't know that command removes recursively all directories they have what you specified command to delete a folder. So I could read, compile and accidentally left out the forward slash. Somehow I deleted that the company's entire development server which contained it d hU seven D website. The poor DevOps guy spent the entire weekend trying to recover it by some miracle. I still work for the company five years later, have a va 60 to 70. home. I will delete like one development site in freakout 60 to 70 production sites Yay. - -81 -00:33:41,100 --> 00:34:42,540 -Wes Bos: Next one we have is never deploy on Fridays, I work for an e commerce agency at the time, I made some small updates to our site, I forget exactly what it was. And I thought I'd update the project's dependencies at the same time. So I made an update and deployed on a Friday afternoon. I know I know. Yeah. So this is what I refer to as a YOLO update where you're like 400 updates to my package JSON sure fine, as you should after any deployment I went ahead and check the site for any possible issues search for some products added to the basket went through the checkout all seemed while I go through the test a second time just to be sure I deployed on a Friday after all better make sure it works, right. No issues spotted. I close up my laptop and headed home for the weekend. Monday. I arrived at my desk. The mood in the office is more somber than usual. I'm grabbing whatever preferred choice of caffeine was for the day. And the team lead pulls me aside he does not look like a happy chap. Props to whoever wrote this. This is very well done. - -82 -00:34:42,540 --> 00:34:43,110 -Scott Tolinski: Happy Jaffe, can - -83 -00:34:43,110 --> 00:35:16,500 -Wes Bos: I see you in the meeting room, please? Oh no. It turns out that the update updates I so bravely deployed cause a basket issue that prevented customers from adding more than one item to the basket anytime. Of course I never spotted it as they only added one item during my test the issue was not reported until Sunday. I never got told how much money my this cost my client only that I really really did not want to know. Deployment had been done in pairs from there on out, never deploy on Fridays Ooh. - -84 -00:35:17,400 --> 00:35:19,610 -Scott Tolinski: Yeah, a lot of these people ever deployed on Fridays, - -85 -00:35:19,800 --> 00:35:27,150 -Wes Bos: or have a like a good set of tests would have earned pretty basic test would have caught that I'm sure they have a test for now. - -86 -00:35:27,650 --> 00:36:15,980 -Scott Tolinski: Yeah, yeah, that's how you learn. Excellent billion dollar scramble. Hey, you know what, I'd like the million dollar scrambled eggs. I know. That sounds good. These aren't scrambled eggs. Okay. We were demoing a product, we were building to a potential client, our first ever demo of the product, and it was for a deal worth millions of dollars. So we got a million dollar deal here. A DevOps engineer just so happened to be going through what they thought were our old clusters and deleting them. Our deployment got deleted about an hour before the demo. It was the maddest scramble I've ever seen to try to recover a Yeah. So if there's any major appointments, don't start deleting stuff. Just don't just wait, just wait. You never know what you're - -87 -00:36:16,050 --> 00:37:08,690 -Wes Bos: never know, we literally probably had like three or four stories like that so far. Speaking of deleting production, I deleted the production database thinking it was my local because my database client and prod local look the same. The most recent backup was at 10am. I deleted it at 4pm. And there was around 600 ORDERS WE HAD without a backup. The manager covered 99% of these using email logs, spreadsheets, and bulk inserting the process of deleting to recovering was from 4pm to 2am was for engineers who, to this day, I use two database clients, one for local database, and one for production staging. And I will only use a read only access for production thankfully didn't get me fired. My work handled it very professionally or understanding who spicey that's a spicy one. - -88 -00:37:09,300 --> 00:38:22,830 -Scott Tolinski: less spicy. All right, 500,000 concurrent problems. A lot of problems. A couple years ago, I was working for a well known company that offers a very widely used website chat widget. Hmm. I was working on a few subtle UX changes to the widget that would give users a much more intuitive interactions in the behavior of the chat. For emerging and deploying the changes, we started to see a couple small errors. Turns out that anytime anybody clicked on the chat widget, even if there was a friendly message, notification inviting them to join the conversation, it would just disappear completely. At this point in the company, we had around 500,000 concurrent users, and around 5% of them would engage with the widget. Upon my discovery of this bug, my heart sank into my stomach and a cold sweat started. I had deployed this and then gone into an hour long meeting. Resolution early on, the company decided that deploys and rollback would be easy and instant. Luckily, for me, rolling back was is instantaneous and only required clicking a button. I made sure to test my code more thoroughly from now on. Do you have any rollback setup in your in your deployment process? Because I do and it's it like saves my butt all? I - -89 -00:38:22,830 --> 00:38:29,760 -Wes Bos: don't on my Digital Ocean? Like I could just rollback a commit and and redeploy, and it would fix it. - -90 -00:38:29,960 --> 00:38:31,440 -Scott Tolinski: You'd have to read them. Yeah. - -91 -00:38:31,830 --> 00:38:35,420 -Wes Bos: But no, I think I would like to have something like that. - -92 -00:38:36,780 --> 00:39:00,210 -Scott Tolinski: Yeah, I host on a meteor galaxy, right? Because it's the meteor host. And they have like, just like a history of every version you've ever deployed. And so at any given point, it'll tell you, I'll use the current version, whatever. There's the past version, at any given point, if I have a mistake, I just click the old version and click, you know, go back to this one. And I can go back to any prior version, and it just plays it for free in like instantly, - -93 -00:39:00,380 --> 00:40:17,070 -Wes Bos: it just cut cuts over the domain now like now, fi's I, they'll all do that as well, because they just have multiple versions of your app, instead of one where they can take different data. Yeah. That's good to know. Next one deleting a government website. Many years ago, I worked for a company that ran the state of and I've blanked this out already website. So this person asked to for us to anonymize it because they're worried about the government getting litigious. I that's such a good word. Listen to just I was trying to debug an error on our staging server. And anytime I touch the files on the server, the changes didn't seem to be reflected on the staging website. So I figured let me just delete everything quickly. So I rm rf, the home directory, and still the website was there. I bounced the server thinking cash still nothing. Finally my office make make goes hey, did you know the whole website is down which website site, the production website as far as storing everything facepalm Oh, and this this sounds like this was done way back before version control and things like that where if you if you deleted it, it's gone. - -94 -00:40:17,630 --> 00:40:24,030 -Scott Tolinski: Also our rm rf is just so dangerous. Didn't you have something where you use something? I feel like you had this. It's trash - -95 -00:40:24,030 --> 00:40:35,310 -Wes Bos: or something Jim install dash g trash dash D Li. And that will put it in your trash instead of RM. I never use rm rf. Just because it's scary. - -96 -00:40:35,849 --> 00:40:54,270 -Scott Tolinski: Interesting. Next story youever on this surprise, my worst production related ex offense happened while I was at a startup in LA. They were trying to become a more modern he fight. What does he fight? Do? They Oh, they do? Like they do like gift cards and stuff. Like they're not great. Like it's - -97 -00:40:54,270 --> 00:41:08,280 -Wes Bos: like if you get invited to like a birthday party or like a wedding, you can RSVP and like it comes in over the email. It was pretty popular. Like 510 years ago, did you get my invite to the Halloween party to get my - -98 -00:41:08,339 --> 00:41:16,650 -Scott Tolinski: Yeah. Basically, if you were having a party, wedding, whatever you wanted to have a digital experience, you would use us or a paperless post - -99 -00:41:17,399 --> 00:41:20,280 -Wes Bos: paperless post, like So anyways, - -100 -00:41:20,280 --> 00:43:06,300 -Scott Tolinski: I had this pretty amateur rails web app API that we had built typical MVC architecture, using active model, we had a bunch of callback methods into models themselves that would fire uncreate save events, actually thought this was pretty slick at the time. And yeah, that's pretty sick. We had just deployed a change to run a bunch of dB migrations, and it went off without a hitch. We then had a migration script that would walk the DB and upgrade each record with default fields. This script failed to skip the permission callbacks and basically firing off emails left and right for every single event attendee in the system. female. Yeah, so Oh, that is so funny. That is very funny. So for those of you who aren't picking it up, basically, they had a hook on DB change that would send an email or something, and their crawling script just fired off against every record. Now imagine the horror when you're in the middle of America planning a surprise birthday party for your father's 50th with over 100 people, and you're waiting to announce until two weeks before, and all of a sudden a bunch of emails start going out to everyone attending, or you're a bride planning a wedding and you send out a bunch of emails to your attendees list prematurely. Or you just had a funeral for a family member a month ago. And you send out a please attend to Ted's funeral email to everybody again, Oh, that one is very painful, very painful. It was all out. pandemonium company was freaking out. I won't say for certain that this was the final nail in the coffin for the company. But it certainly didn't help. Oh, gosh, to this day. I'm hyper vigilant when it comes when and where backend code sends emails, I hope this is what you're looking for. This person may have single handedly killed Eve. - -101 -00:43:09,710 --> 00:43:26,550 -Wes Bos: Oh, that's that's even why like when I use, like a local development, I'll make sure that I'm using like mail catcher or temporal email something just because if you accidentally trigger 500,000 emails, that's kind of a nightmare to come back from. - -102 -00:43:27,030 --> 00:43:28,290 -Scott Tolinski: Kind of a nightmare. Yeah. - -103 -00:43:29,880 --> 00:43:30,780 -Wes Bos: What's not a nightmare that - -104 -00:43:30,900 --> 00:45:09,690 -Scott Tolinski: was got a is it Netlify. Our sponsor for this episode. Netlify is certainly not a nightmare West, I don't know why you put them in the same sentence. It was actually funny a little bit ago, you you started one of these and you're like, you know what, I thought you're gonna do a transition. And then you thought started reading the next story. So you've got me Netlify now@netlify.com is the fastest way to build the fastest sites as in, you can deploy your front end code on this thing. And just with a git push a look at that risk to nugget push your entire site builds and is constantly deploying. And anytime you push a commit to a specific branch, all for free, easy to use. There's awesome awesome, awesome features that are added to nullify constantly over a million developers currently using nullify isn't that crazy million developers. So out a lot of people using this thing, there is just a ton of features that allow you to really, really gain productivity, like crazy. I host my site in Netlify. I know Wes hosts his his site and Netlify and it is fantastic. You can do all sorts of things like serverless functions, or or DNS based analytics, which are actually very, very nice compared to normal script base analytics. l There is even an identity platform that allows you to create a login user accounts on your front end code site, all just through Netlify itself All this and more. So check out Netlify dot com forward slash syntax and see what everyone's talking about. because trust me, this is the place to host your front end code. It is so dang easy and simple. You know what? - -105 -00:45:09,810 --> 00:45:24,150 -Wes Bos: Now if I had just checked if you go to one of your commits, and you can view that commit that's already built, you can just publish it. roll it back, if you accidentally screw it up. Hey, cool. Mr. D whole, - -106 -00:45:25,650 --> 00:45:26,250 -Scott Tolinski: the whole - -107 -00:45:27,150 --> 00:46:12,030 -Wes Bos: one time, I was working on a client site and running tests to try to debug some email template issues going out for my CMS. Again, I had a mail trap installed locally, so no real emails got sent from PHP mail function. Okay. Okay, so good. Okay. Okay. Unfortunately, oh, the module I was using uses its own SMTP implementation and bypasses the PHP mail function. So it was funny, when the client called her office and asked if my business partner if he thought his order for Mr. De Hall was real or not. Stop Stop putting bad words in testing. - -108 -00:46:16,530 --> 00:46:25,020 -Scott Tolinski: Oh, it was not. So what the what's kind of lost here is that the word is actually spelled out if they're not already do it's - -109 -00:46:26,100 --> 00:46:27,990 -Wes Bos: a sporting goods store from earlier which - -110 -00:46:27,990 --> 00:47:46,350 -Scott Tolinski: we weren't allowed to say. So that that is much funnier. That is another bad word. It seems hilarious that so many people have made this very same mistake. Very funny. Also, these kind of things are a little more harmless than like, you know, sending out a notification about funerals not not exactly harmless. Alright, one expensive race condition. This just happened today. So it's fresh in my mind who freshman, I had to build a samples request wizard for an international flooring company on WordPress using jQuery steps and Gravity Forms. At the end of the wizard, you submit the form by clicking the Finish button on the wizard. My code in a WordPress template catches the form finish event submits the form, then location dot href equals thank you very much page, I come to find out that I had built a race condition that sometimes made the page change without submitting the form. Client misses 60% of their leads boss is furious and choose me out over slack. So glad I wasn't in the office test reforms in all browsers at all network speeds. So the form was firing an event early and submitting the form without collecting all of the information. Yeah, people people don't like that. Especially any sales teams that need to keep track of their their their ba Sinhala Yeah, - -111 -00:47:46,410 --> 00:48:02,430 -Wes Bos: I like it when you take away like huge loss in sales. Like sometimes I submit a form on a website. That's like a local business. I'm like, I'm never getting replied to this. And sometimes you feel that way. Sometimes when you're filling out these like, yeah, janky forums, that was rough. Like - -112 -00:48:02,430 --> 00:48:03,990 -Scott Tolinski: this is definitely a waste of mine. That's a - -113 -00:48:03,990 --> 00:48:29,970 -Wes Bos: prime example. People always asked like, what's a race condition like that is a perfect example where they hit submit and then the code after submit the form was just window dot location, and they didn't wait for the Submit to come back properly. So you could forget one one away, or you put a you don't put the winner location in a callback, you're poached, and poached. And it also works hundred percent of time in development because as fast as out, - -114 -00:48:30,120 --> 00:48:42,690 -Scott Tolinski: right. Right. That is actually that is the big problem there is that it does it works. Always work like race conditions that are so often not apparent in development, just because it's super fast. The - -115 -00:48:42,900 --> 00:50:58,860 -Wes Bos: next one is just called Yikes. That's all I could say to some of these questions, these stories that came in. I am a developer in a consulting firm in Sweden, writing C sharp on the back end and using react with either JavaScript or TypeScript and hosting everything in Azure 99% of the time 1% SharePoint. I was in my last week at my last job and I was due to start my new job. I worked a 12 hour day to keep up with all the handovers etc. So colleagues could have a chance to continue working on the solutions that I'd taken care of one project was a process tool hosted in SharePoint Online, the guy who would oversee it had negative 1% experience with SharePoint which I pointed out to my bosses. But to make things easier, I made it a play script. To ease things a bit starts with the terminal and runs the script towards the acceptance environment. umpteen million error errors occurred appeared, which is strange because there should only be about 20 commands. I log into the environment and double check if I accidentally entered the wrong values in the script, which is located according to me, but I get a 404 error when trying to reach the environment. I log into the admin interface and I discovered the site is gone. Also checking the trashcan there are no things they're very strange. I find that I'm in a different folder than the one where I saved my script. in that folder there is an old deploy script that was used when the project was started 1000 years ago, which was not used after this project was finished. The first thing the script does is force, delete the site and then try to create a new empty site. Oh, no, the site is gone with lists and everything lists are like a SharePoint thing. Sort of like SQL Lite. There are no backups of the acceptance environment, although that is very important. I feel just a little bit panicked. How am I going to solve this. However, I remember testing a tool six months ago to copy entire environments, where my first attempt was made. Here in the acceptance environment, I find the clone environment it can be used, and the same tool to clone it back. It only took eight to 12 hours of work to create all the new things done in the environment in the last six months instead of x number of hours rebuild everything from scratch. Oh, - -116 -00:50:59,310 --> 00:51:04,620 -Scott Tolinski: yeah. This is a great use case for delete your old stuff. If you don't need it. - -117 -00:51:04,620 --> 00:51:09,960 -Wes Bos: No kidding. You can get it back from you can get it back if you need to - -118 -00:51:10,410 --> 00:51:37,320 -Scott Tolinski: go next one always be closing. When I was in my 20s I forgot a closing table tag and the mail shot that went to thousands. This resulted in the first mail containing one males content. The second mail contained it to the mail servers of the multinational company crashed as a result. Yeah, so can dangers of recursive Yeah. And like possibly - -119 -00:51:37,320 --> 00:51:41,970 -Wes Bos: leaking sensitive information from one email to another right? - -120 -00:51:42,270 --> 00:51:44,040 -Scott Tolinski: Yeah, makes a big, - -121 -00:51:44,130 --> 00:52:26,250 -Wes Bos: big. All right. Last one we have here is a data's all day I delete a site. I deleted the Adidas Facebook page at 8pm the night before a $3 million spend for ESPN and YouTube homepage takeover. This was back when Facebook apps were big and there was no tiered permissions. I was a tech director and clearing out all the designer project manager accounts. So no one would delete anything, accidentally deleted all the accounts and then deleted the entire page. Our sister media agency called Facebook in the UK, and some engineer found the deleted page and re added it in Crisis averted my boss did not fire me. - -122 -00:52:27,600 --> 00:52:28,800 -Scott Tolinski: Ah, - -123 -00:52:29,670 --> 00:52:30,660 -Wes Bos: he likes - -124 -00:52:31,740 --> 00:53:25,710 -Scott Tolinski: high it's it's days like this, where I am very happy that my job is this low stakes as it is. I can spend a month working on a course and I get that course out I get it I get a chance to review and watch it 800 times before it goes out. If I do by chance happen to release that course with a tiny little typo in it. That is not a problem of the magnitude of any of the oh that we have read on this show. I just man be safe and be careful y'all write tests do not run rm rf unless you are very, very sure of it. Although I did that once where I ran get clean in a non get directory and deleted half the computer. I talked about that last year. So don't do those things. And make sure you take good backups, man good backups, good tests. Be very careful. Don't push on Friday, any other parting pieces of advice that you've gained? Man, I just - -125 -00:53:25,740 --> 00:54:02,640 -Wes Bos: I just keep thinking about the one with the 500,000 concurrent users, because you like do an image tag incorrectly and all sudden your support team blows up. And like you're you're causing support extra work or maybe have to bring in more people in that you have to pay them and it's just the mistakes in those environments are just so high stakes. So that's what I saw. And obviously like backups and automated testing, and like maybe two keys to deploy sites probably whatever a lot of these but then we wouldn't have the show every Halloween so - -126 -00:54:05,130 --> 00:54:19,110 -Scott Tolinski: so please continue to make major mistakes of course none that will result in the permanent harm anybody but if 800 people get the whole sent to them and their text messages, then I think that's probably okay. That's a bug. That's That's pretty good. - -127 -00:54:20,280 --> 00:55:55,470 -Wes Bos: Oh, that's great. All right, let's move into some sick pics. I'm gonna pick pick something I've picked in the past but I just got a second one of them and I was just reminiscing about how much I love this thing. So this is a instant read meat thermometer. Really not necessarily just like you said this last day. And so if you want to be a good cook, and part of why people aren't good cooks is because they don't know when something is cooked all the way through. So they overcook it so they don't die of seminar poisoning or something like that. And you can for like 15 bucks, you can go get a really good Good thermometer that you just poke into your food that you're working and it tells you what it is and like I feel like it made me a better cook when I got a really not not necessarily like a really nice version because there's like thermal pens that are like $100. But I got this one. It's called Mr. Scheffer, which is hilarious to me but has backlight the the numbers are huge. Most importantly, it reads very fast. So some of these cheap ones you get at the grocery store, you got to leave it stuck in for 15 seconds before it actually reads accurately. And that's too hot. If you're on the barbecue or something because you can't you have to keep your hand on it or you got this plastic thing in the way of the heat. So go get yourself a nice thermometer. I have got two of these now I've the Mr. Scheffer I had at the cottage, I left it outside it poured rain on it for days, I dropped it off the deck going strong. So I really liked it. I'll put a link for it in the show notes. - -128 -00:55:56,220 --> 00:56:16,260 -Scott Tolinski: Mr. Scheffer will be coming to Mr. Tolin. Because I, I said that at some point. And like, Yeah, I do need to get one. And just like it was like two days ago, we were cooking some pork. And we were using the stick and get away for air. And it just is like, you're looking at it. You're like, I don't even know if this is and yet, like, I have no idea what is the best - -129 -00:56:16,260 --> 00:57:02,280 -Wes Bos: one because at least in Canada, a couple years ago, they changed the safe temperature for eating pork to 145. And if you if you pull up a piece, nice piece of pork off the barbecue at 145 it'll go up to 150 45. Or sorry, you pull it off at 140 goes up to 145 after resting, you cut it open you think that that is still raw and it's like there's red in it and it doesn't look like it's cooked all the way through. But just like knowing like yes, it's it's cooked. I'm did the temperature on it. It is safe for my family to eat. And it's funny because something like I have my like parents over there like are you sure that's cooked all the way because they grew up in this the age of the higher pork temperature and they probably went over that because they didn't have thermometers at that time. - -130 -00:57:02,520 --> 00:57:16,320 -Scott Tolinski: I kind of I gotta get me a good meat thermometer, especially Mr. Shepherd. Sometimes I just buy things based on the name and that is a great name. I'm very into the name of the Mr. Scheffer. So what am I gonna stick pick today? - -131 -00:57:18,900 --> 00:57:23,790 -Wes Bos: Oh, man, I'm just looking online. And it's not called Mr. Schaeffer in the states - -132 -00:57:23,850 --> 00:57:27,780 -Scott Tolinski: away. Why should they do that to us? Why would they possibly do that to us? - -133 -00:57:28,020 --> 00:57:31,410 -Wes Bos: Can I get the Canadian version of the American version comes with a bottle opener. - -134 -00:57:31,680 --> 00:57:36,480 -Scott Tolinski: I would rather get the Mr. Scheffer than the one with the bottle. Oh, no, I - -135 -00:57:36,480 --> 00:57:41,280 -Wes Bos: found the exact one that I have. It's not called Mr. Schaeffer, unfortunately, - -136 -00:57:41,970 --> 00:59:43,800 -Scott Tolinski: that's a huge disappointment was a very big disappointment. Okay, I am going to a sick peg, a library, JavaScript library. And I'm talking about FASTA phi. Have you heard of FASTA? phi FST phi.io. But no. So I've been diving into the world of node servers lately, because I want to see like what's changed since the last time I looked, I know a lot of people talk about nest, j s next but nest and there's like nest, there's happy, there's Express, there's koa. Fast. If I was the one, this kept on popping up over and over again for me. And I started looking into this and I don't really need server. So I will stick pick this I've been given it a test out just to see there's some really neat graph qL stuff in here too. And they basically did some neat little benchmarking against Express and Apollo for this graph qL thing to find that it's like, very, very fast. Okay, so here's, here's how fast this thing is. So on their benchmarks page, and this is their own benchmark. So take take that for what it is. But according to this, they have some code here, and they got 76 835 requests per second, nearly 77,000 requests per second, on FASTA phi, were expressed with the same code was only able to get 38510. So nearly double the amount of requests per second that it was expressed, was able to deliver with the same code. And same with happy co was a little bit more but fast if I was still like 20,000 requests a second more. So obviously, this is their benchmark. So you know, take that with a grain of salt, do your own benchmarks, but testify for me it's been not only very fast, but very easy. The logging all this stuff, set up the plugin, the whole environment has been very cool. There's a lot of neat plugins involved here. So check this out. If you're looking for a node server, right now check out testify.io it's one that I've been having my eyeballs on quite a bit lately. - -137 -00:59:43,920 --> 00:59:58,230 -Wes Bos: Cool. Check that it looks like they have a lot of middleware as well, which is something you want to you want to think about if you're picking a new server like you probably are going to need a bunch of plugins or middleware it looks like they've got hundreds of community what's so sick, - -138 -00:59:58,379 --> 01:01:08,850 -Scott Tolinski: and there's some that like are like me Not only graph qL servers easy but also make, I don't know, if you've ever gotten into Data Loader, know, there's like an issue in graph qL, where like, let's use level up tutorials. As an example, I say I want all of the playlists on the site. And then I want all of the tutorials on the site. And if you set up your graph qL server in a normal way, where you have your resolver, and then another resolver, and then one call to the other, you could end up in a situation where you're getting like 500 database queries, because let's say you have 20 tutorials, each tutorial has 20 videos and in like, the way your system might be set up, it's not going to do all of those requests in one fell swoop, it's gonna do the one and then the individuals and loop and whatever. So Data Loader is like a caching mechanism that prevents large queries for like that from being a problem. It's basically a caching solution that will make your n plus one queries way more performant like exceedingly more performant. And so there's a really neat graph qL server in here that has like Data Loader essentially built into it, they make it like part like a first class citizen. And it really solves a lot of the pain points I was having personally with Data Loader. So I'm into this. It's very cool, - -139 -01:01:08,910 --> 01:01:18,980 -Wes Bos: sweet. I'll have to check that out. They'd be I look similar to lamda instead of Express like, which is kind of cool. It's not that much different. But yeah, I just noted that - -140 -01:01:18,980 --> 01:01:20,610 -Scott Tolinski: cool, shameless plugs, - -141 -01:01:20,760 --> 01:01:35,370 -Wes Bos: I am going to shamelessly plug all of my courses Wes Bos.com, which is my new website. Check it out. Ford slash courses has a list of all my courses most recent one being master Gatsby, make sure you use a coupon code syntax for 10 bucks off - -142 -01:01:35,790 --> 01:02:16,320 -Scott Tolinski: deck, I'm gonna shamelessly plug level up tutorials.com where you can sign up to become a pro member and gain access to a new tutorial series every single month along with our entire catalog which is constantly growing and let me tell you, I am really excited for the next upcoming year we have three or four guest teachers lined up that you are all going to be very excited about. I can't talk too much about it just yet. But we have some guest creators coming on. I have some new courses coming out. I have one that just came out on stealth animations that is fantastic. We have new course every single month. It's sort of like a magazine subscription check out what the latest courses. So level up tutorials.com forward slash pro sign up for the year and save 25% - -143 -01:02:16,380 --> 01:02:23,580 -Wes Bos: beautiful Alright, thanks so much for tuning in. We'll catch you on Monday. Have a spooky Halloween. - -144 -01:02:25,530 --> 01:02:35,310 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax297.srt b/transcripts/Syntax297.srt deleted file mode 100644 index 764e50117..000000000 --- a/transcripts/Syntax297.srt +++ /dev/null @@ -1,96 +0,0 @@ -1 -00:00:00,360 --> 00:00:21,660 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Wes Baracuda Bos, and Scott Tolinkski - -2 -00:00:25,920 --> 00:02:17,310 -Scott Tolinski: or Welcome to syntax, and this Monday, his teacher, we're going to be talking all about certifications. And we're going to be talking about not the type of certification that you'd find in the lock symbol in the URL bar, we're going to be talking about certifications for completing training completing some sort of test that shows that you are certified in X, Y, and Z skill. My name is Scotland's gamma developer for the Colorado and with me, as always, is the West balls. Hey, hey, Wes. This episode is sponsored by century the perfect place to find all of your errors and exceptions, bugs as creepy crawlies in your code. Let me talk a little bit about century the coolest thing for me is to be able to come in at any given point and have a full like, full understanding of what the issues are in my site at any given point. Because sometimes you have bugs that are bugs, bugs that you got to fix right now. And other times you have things that pop up here or there, maybe you're affecting one or two people that are not crucial. And the cool thing is that century puts all of those things in a nice table that makes it really easy for you to see just how much of an issue something is right? Maybe did one particular user have a single, failed WebSocket message that did not reach it to its intended target? Well, that's maybe not something you need to drop everything and fix that 25 users get a message saying that the site's on fire, maybe that's not what you need to pay attention to allows you to track all of that and store it in a GitHub issue. And then fix it whatever is causing your site to be on fire. So check it out as century.io use the coupon code at tasty treat all lowercase all one word, and you will get two months for free. All right certificates. Yeah, of the non SSL type. Let's talk about him. - -3 -00:02:17,600 --> 00:04:37,850 -Wes Bos: Yeah, we're talking about like, like skill certificates, web development certificates. And this sort of came about because we first we got one question in the potluck. That was Node.js. The open JS foundation offers a couple hundred bucks, you can get a no jazz certificate. And then we got another someone tweeted this link at me which we'll put the link in the show notes. It's a it's a good blog post. It's called imposter syndrome, how display on the front end, it's just a blog post about this person's sort of journey in front end development and learning from all these different online resources. And in one part of that was like battling with imposter syndrome I'm just gonna read the part is is so how do you as a front end developer figure out what a specific team is made up? And how can you contribute the most proper definition of a skill set is the answer to both questions. The problem is that there are no set of degrees or certifications in the front end world that are universally known and accepted as proof of skill in different areas. This also fuels that pesky imposter syndrome says it's kind of interesting coming from the the other not necessarily a hiring point of view, but it's coming from someone who's learning and the question is like how do I know if I have the skills that are enough for a job and then later on the blog post goes on to say I will end with a plea towards educators out there specifically tagged me as well as if you perhaps even to the organizations who create these open source frameworks, Please agree on a format that will let us show off our skills back Enders get official Computer Science degrees from Microsoft Amazon etc. front ends Get YouTube courses certified on the honor system there is more than enough information craftsmanship and variety to warrant a full University front end degrees official react or Angular certificate a solidified job titles with defined skill sets attached to them. Let's display front end Okay, so that was that was kind of interesting to say someone saying like look, I as someone who's learning like we need to standardize this stuff. So you know if you're good enough, like if you want to be a lawyer, you have to pass the bar exam if you want to be an engineer who builds who builds buildings, you need to have specific certifications even if you you want to install a fireplace in somebody's house. Yeah, you need to have at least in Canada we have this Wet Wet certified which is wood energy transfer technology, - -4 -00:04:38,010 --> 00:05:24,750 -Scott Tolinski: something like that. It's funny because accordion I just had this conversation the the I think it was like two nights ago where somebody was saying it was like one of those new shows on Netflix what they were doing home stuff. And the one guy's like, yeah, I moved the electrical box or whatever. And I was like if I moved an electrical box in my house, I would never sleep at night because I would be afraid that the house would burn down. I mean, those certifications, whether or not I'm not like asking to see an electricians certification when they're going to do this thing, or if they were to move an electrical box, but just the fact that that certification exists, in my mind takes that out of a space of being, like, a trust from non trustworthy to trustworthy. And it's so funny to see this in a totally different context in our industry. - -5 -00:05:25,760 --> 00:07:21,900 -Wes Bos: Yeah, totally. The thing about standards is, as soon as you make a standard, people will sort of go around that and make their own. That's, that's the hilarious XKCD cartoon where as soon as you come up with a standard, now, congratulations, you have to battling standards and different ones. And I personally think the the reality of this is that, especially in tech and front end development, in general, is that this stuff moves way faster than any standard should probably track on. So like, the reason we had jQuery is because like we had standards, in web development, it just wasn't good enough. So people went around that and made their own libraries for that. The reason why TypeScript is much preferred, in some some cases over regular JavaScript is because people say like, we need more out of the standard we need, we need a little bit more, we have universities, and this is probably the best example of all is, there's lots of universities that offer web development certifications out there. And in most cases, they are deemed as sort of a joke, or they're super behind. And everybody has stories about learning from a university where it just wasn't good enough. So in my opinion, I'd love to get your thoughts on this is that programming and front end development, and I actually asked this on Twitter. So we'll go into some specific tech in just a second. But I think in web development, in general, it's far too broad. There's so many different areas, it's far it moves far too fast, to try to fit us into a box of a certification. And the reality is, is that I think being a web developer, the proof is in the pudding, it's if you are a good developer, you'll be able to show that through projects that you've done through past work through through all kinds of stuff like that, you know, it's easy to show somebody if you're a good developer, or if you have the skill sets that are needed, as you'd literally just show them the stuff that you've been working on in your skills, and that should speak for itself. Yeah. - -6 -00:07:21,990 --> 00:08:31,980 -Scott Tolinski: And I mean, I think you really nailed it. I think the the biggest one, can you imagine like a browser API certification where, like, you know, whatever, chrome version 57 Yes, out and completely invalidates the one thing you just learned, because all sudden, the middie API is no longer available. And you spent all this time learning of this this thing? Man, you're right. I mean, the stuff changes way too fast to have any sort of valid certification as somebody who has a hard enough time keeping up the like versions in video courses, right. Can you imagine just exactly how difficult keeping up what ever the expected knowledge of a certification would be in our in our industry right now, in terms of front end stuff? I feel like that would be exhausting, full time position, because of all the new stuff that is changing constantly. Yeah, I largely agree with you that a certification that you got on react 15 is going to be toast by the time react 16 comes out, I guess it's a standard fare, right. But at the same regard, I think this stuff just just changes way too quickly right now. - -7 -00:08:32,340 --> 00:09:25,350 -Wes Bos: Yeah, I asked this on Twitter. And I got lots of really good replies. The one thing where people said they are valid is with specific vendors. So this a kind of went outside web development and more into sysadmin. And Ops, a lot of people said, yeah, if you want to if you want to hire someone that's good with all the Amazon products, or Google Cloud, or IBM certified or Burnett, yeah. All that stuff, then in that case, yeah, that's a very specific tack. In a lot of cases, like Amazon will have a list of people that have their cert. And if somebody comes to them and say, Hey, we need we need to work with serverless functions or whatever, or we need to be able to scale up, then they can say, yeah, go to these people that have those specific certifications. So I think that's probably the one area in our industry where they may make sense to have a certification. - -8 -00:09:25,830 --> 00:10:18,270 -Scott Tolinski: Yeah, because when I was looking to like way better at AWS stuff, that was something that I noticed pretty heavily and that's in that scene, more so than other scenes was like, you're looking to get good at AWS, all of the courses that exist for getting good at AWS. do so with the premise that you are going to be able to master certification at the end. So like we will teach you to be able to pass this aid of x y, I forget what it's called that whatever x y and z AWS certification. If you take this course we will set you up to be able to pass that exam and to me it's such a funny way. world because last time I did something like that was when I was getting certified in skis, key bindings, and not not actual code. But I just did all these tests with the premise that I was going to pass this ski bindings test so that I would not hurt little kids when they went out on the mountain. And so - -9 -00:10:19,140 --> 00:11:23,100 -Wes Bos: I have my CPR certification. I would not want to YouTube and say, Oh, yeah, I got it. So what else we got here? just let's just go through some of the replies to the tweets because I tweeted a question for folks who are hiring, do certifications mean anything to you? overwhelmingly, the replies were, it doesn't hurt. You're like, if I'm hiring, and I see it on the resume. It doesn't hurt you. But I much rather see what you've actually built. I'd much rather see past projects past employers you've worked for. So one really good reply was from Richard Davey, no, it's not a sausage. I was funny. experiences the key indicator or if it's a junior role where experience isn't available, We absolutely do look at the thing you've built in your own time. These things help you get an inner interview. So like that gets you in the door. A couple of good projects in your thing after that is 100% personality and aptitude. I thought that was that was really interesting, because obviously, in some cases, you if you're brand new to this, you can't you don't have five years experience somewhere else. Next one, it - -10 -00:11:23,100 --> 00:11:35,640 -Scott Tolinski: says Nope. Eg the Java certification exam has the most up to sc code you can imagine. I know people who passed it without have a written Java code by studying the sample questions and answers. - -11 -00:11:37,410 --> 00:12:36,540 -Wes Bos: This one I thought was really interesting. From my buddy, Arlene MacLean, he says depends on the cert at car pages. So in Canada, I don't it's might be in the states as well basically, like, selling used cars online. We hired a lot of devs. That straight from hacker u, which is the bootcamp I used to teach at. And that meant a lot to us, mostly because Heather Payne, she was on podcast, does such a great job of screening. Every grad I met from there not only had skills, but was winsome, and really wanted to make stuff. So that's kind of interesting as well, is that like, specific schools or boot camps or something? might be a bit of a Honey Hole? Because like I know, a Honey Hole of good developers, because they're already pre screened. Like, I think that Heather said only like, what 10% of the people that apply make it in? So they're already doing the filtering for you plus, then you know, like, the content there. So in that case, yeah, it probably would be a good thing if you are an employer and you know where to where to go get these good grads. - -12 -00:12:39,840 --> 00:14:25,800 -Scott Tolinski: So glad that made its appearance back in the show. Notes. Okay, here's, here's the last one here at Nope, just like a number of years of experience. They do not guarantee expertise. I think that's a great point. I know a lot of men maybe not a lot. I've known a lot of developers in my past who'd be the the webmaster who never moved their skills beyond modifying HTML files in Dreamweaver. And it just because they've been doing it for 20 years does not mean they know how to build a modern site. So yeah, just like just like number of years of experience, right, a certification can be passed or failed. I'm maybe a prime example of this not that certification wise, but like, I am not good at exams. So like for me to pass an exam it like, I feel like I don't learn things. If I'm studying for an exam, I feel like I am learning how to pass the exam, I think you will get a subset of those types of people who have no practical or real experiences. Yeah, yeah. And that's just not gonna fly. I think the one that, to me, the one that resonated the most was basically just saying that, like, the things that are most important are aptitude, and personality, in addition to your code, because the best developers are those who can take the time to grow themselves in a project. And with a project, it may be not necessarily the types of developers who already have it all figured out at the start. Anytime I worked at any agencies or whatever the people who were the best, or who got their stuff done that most efficiently were not necessarily the most proficient it developers overall, but the types that would be willing to fully dive into projects and really understand those the types of personal qualities that you're just not going to get from whatever the results of a certificate - -13 -00:14:25,800 --> 00:14:57,270 -Wes Bos: are. I like that a lot. Oh, one question I have for you is the initial blog post we read came from the learners point of view. They said like I need some sort of like bar, where I know that if I'm, I have the skills to be hired or not. And since we don't have some sort of checkmark to say, yes, you have passed this certification. You are now hireable by these companies. What do you think like how what do you say to somebody who's that situation? How do I know if I have the skills? Am I good enough to start go out and job searching? Oh, - -14 -00:14:57,270 --> 00:16:26,940 -Scott Tolinski: how do you know you're good enough to me it It's just all about doing it, every single job that I got that I was like really happy in, and like a job I grew up in was a job, I maybe did not feel qualified enough to get at the job. So I either had to be convinced to apply to these jobs, or I did. So with the idea. Well, if I if I get an interview, that'd be pretty cool, then you get the job, then you feel a little bit like Oh, crap, I'm a little over my head, and then work really hard. And then you grow as a developer to human and all of those things. So yeah, I don't know. that's a that's a tough question for me, because I've always, always had sort of the mentality of apply for everything, you know, write the cover letters do do the work, you know, really show up and do your best and try to get the gig even if you feel like you're probably not good enough for it. I remember one of the first jobs I interviewed for was like, some manager position at the University of Michigan, and they were just like, do you have any experience scheduling or management? And I'm like, nope, how hard can it be, you know, I can do it, whatever. So having, it's maybe not, it's like that blind confidence sometimes can really come in handy. But really, it's just, you have to believe in yourself that you can accomplish anything. And you can do these things. And given the opportunity. So just apply for stuff that you might not feel that you have the capabilities of doing. And then who knows, you could potentially grow into those roles and positions. And - -15 -00:16:27,090 --> 00:17:09,030 -Wes Bos: I totally agree with you, I think we should do a show on. These are the things you should be able to do before you you apply for a job. And it should be things like, Oh, yeah, fetch some data and display it make a layout. We should let's do show on that. Because I think that'd be we could come up with a list of like 20 things. And then after that, it's up to the person who's hiring you to decide if you have the skill sets or not. And I think like up imposter syndrome probably will come into play here, where you think you don't necessarily have it. But honestly, like, like that one tweet said personality aptitude. You can learn the technical skill sets, a lot of the times from there, and that's what people are looking for. They're like, Yeah, I don't mind investing in this person a little bit if I really liked them. - -16 -00:17:09,479 --> 00:17:11,330 -Scott Tolinski: Yeah, totally. Totally. Totally. - -17 -00:17:11,790 --> 00:17:13,380 -Wes Bos: Yeah. Good show. Good show. - -18 -00:17:13,380 --> 00:17:20,160 -Scott Tolinski: Good show us. We just had our we should have a new segment where we just pat ourselves on the back. Gosh. - -19 -00:17:22,050 --> 00:18:28,290 -Wes Bos: We did good. Yeah, no, that was a that was an interesting one. I had seen it pop up a couple times. And you often see this like, frustration of we need the government to step in and standardize our skills and make it some sort of like thing where you have to graduate from an academy and then you are good enough, but unfortunately, and fortunately for like, people like Scott and I who are don't do well at tests, and we just sort of sling that we just go out there and start slinging code and building stuff. And it's worked out we're able to make a living off this web development stuff. Because certainly, if it was up to, like, I remember I don't know, this is totally unrelated. But like every Sunday night, not every Sunday night, but still, every couple Sunday nights, I still get a feeling of I have no homework. Because my entire university in high school and in grade school, I will get this like, I hate homework, oh, just want to go on computer and make stuff. And just that feeling of I don't need to do homework anymore. Oh, my - -20 -00:18:28,290 --> 00:18:53,810 -Scott Tolinski: God is the best. I spent all of my college life doing coding in most of my classes, musicology. Yeah, just sitting in the back coding, coding and stuff. And that's just how I always was to, it's just like, I just got to get my homework done so that I can you know, work on this video and editing or work on this code. And that's something that very firmly resonates with me. - -21 -00:18:54,180 --> 00:19:05,460 -Wes Bos: Beautiful. All right, I think that's it. Thanks for tuning in. If you've got thoughts of your own, I've linked a Twitter thread, but also tweet us at syntax of m. What's your thoughts on third certifications? Oh, before we go, I - -22 -00:19:05,460 --> 00:19:33,050 -Scott Tolinski: maybe have one more small point to make, ya know, if the type of job you are applying for is going to require a certification because some do like just because we say that certifications aren't, you know, the the bee's knees and all sorts of regards. There are some jobs specifically like like you mentioned, AWS, Google, whatever that will say like straight up do need the certifications to be considered for this job. So just last little thing, have that in mind. - -23 -00:19:33,660 --> 00:20:02,550 -Wes Bos: Totally. I should also say like, I'm probably being a little hypocritical here because I do offer certifications for all of my courses. And the reason why I do that is because some employers in order to get paid back or in order to take a course or whatever, you have to actually have some sort of certification. So like you do sometimes have to play in that ballpark as well. I just don't see it all that often for real hiring of jobs. Yeah. Cool. All right. That's it. That's it. - -24 -00:20:04,100 --> 00:20:16,170 -Scott Tolinski: Please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax298.srt b/transcripts/Syntax298.srt deleted file mode 100644 index 7a2da0bcd..000000000 --- a/transcripts/Syntax298.srt +++ /dev/null @@ -1,620 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Josh Comeau: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -Wes Bos: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:06,120 -Josh Comeau: development treats out there, - -4 -00:00:06,149 --> 00:00:10,560 -Scott Tolinski: strap yourself in and get ready to live ski and Wes Bos. Welcome - -5 -00:00:10,560 --> 00:00:40,610 -Wes Bos: to syntax. This is the podcast with the tastiest Web Development Series. Today, we've got a guest that we haven't had a guest on. And in a while we've got Josh komu on who's here to talk to us about a bunch of stuff. But the one thing I'm really interested in is he is doing voice coding, where he can't use necessarily always be using a mouse and typing on a keyboard. So that's all I know about it. I intentionally didn't ask any questions because I I want to put it on the podcast. So thanks so much for coming on, Josh. - -6 -00:00:40,769 --> 00:00:42,240 -Josh Comeau: Yes, my pleasure. Thanks for having me. This - -7 -00:00:42,240 --> 00:00:58,500 -Wes Bos: is super exciting. Awesome. today. We're sponsored by two awesome companies. First one is sanity, which is a structure content CMS. Second one is Sentry sanity and Sentry Sentry does all of your error and exception tracking Scott to linsky as always, is with us. How you doing this, Scott? - -8 -00:00:58,649 --> 00:01:02,759 -Scott Tolinski: Hey, I'm doing good. Just live in that cold brew life and - -9 -00:01:03,389 --> 00:01:11,450 -Wes Bos: getting coked up? Yeah, we're recording on a Tuesday we record on Monday, but yesterday was Canadian Thanksgiving. And Josh here from Montreal. - -10 -00:01:11,510 --> 00:01:20,400 -Josh Comeau: Yeah, that's right. It's a weird, you know, like, family holidays in the time of COVID is always a bit strange, because it was kind of just like any other day, but yeah, Canadian Thanksgiving. - -11 -00:01:20,810 --> 00:01:59,330 -Wes Bos: Cool. Happy Thanksgiving. It's funny because we've had other guests from Montreal as well. And we made a joke last time that we only have guests from Montreal on it. I think you're the third Do you remember who everyone from Montreal was? It was the the missive folks. Etienne. Yeah. And there was somebody else that was from Montreal, I forget. But anyways, we only have guests on that are from Montreal. So why don't we get started, you just tell us who you are. You've got like a background over handsome some pretty cool companies who you are what you do kind of what you're interested in. And then we'll dive into the voice coding stuff. - -12 -00:01:59,460 --> 00:02:29,250 -Josh Comeau: Yeah. So my name is Josh. I've been a software developer slash web developer for going on seven or eight years now in a formal capacity a bit longer than that just for me hacking around and doing stuff for fun. Worked recently for companies like digitalocean, Gatsby, Khan Academy unsplash. And I recently left a job at Gatsby to pursue my own thing. So excited about that. I've also, as mentioned been using a microphone and an eye tracker is my primary input mechanisms for coatings. It's about March or April. - -13 -00:02:29,550 --> 00:02:31,680 -Wes Bos: So yeah, eye tracker. And - -14 -00:02:31,740 --> 00:02:37,220 -Scott Tolinski: yeah, we're definitely in support of doing your own thing over here. We're big fans of it. - -15 -00:02:37,250 --> 00:02:44,639 -Wes Bos: Yeah, that's awesome. Congrats. that's a that's a big leap to take. So like your own thing. You mean like, like, what is your own thing, - -16 -00:02:44,640 --> 00:04:03,539 -Josh Comeau: then? Yeah, I mean, pretty similar to what both of you do. It's been kind of a dream of mine to focus more on education. I should also mention, for my bio, I've been teaching at a local boot camp for the past couple years, I do the part time program. So I've been juggling that with my day job. And I mean, I used to work at Khan Academy, which is like a super education focused organization. It's always been kind of a dream. But it's always been like, you know, I'm still getting experience in the industry. And it's always been like a thing in the future. So I have a repetitive stress injury, which is why I don't use a keyboard. And that has kind of like flipped a switch in my head, where I had the realization that even though what I have isn't supposed to be a long term thing, who knows, right? Like, and who knows what else is around the corner, I don't have an unlimited amount of time to do whatever I want. And so if there's something that I want to do, I shouldn't assume that I have all the time in the world to do it. I should do it now. Hmm. And I'm in a very fortunate position where I have enough saved up. But I'm not under a ton of financial stress. So I have, like all of the circumstances are in my benefit, aside from not being able to use a keyboard. So I figure like, why not do it now. So yeah, the idea is, I'm going to create some online courses. I also I write on a blog, I do a lot of like experimental stuff, where I create interactive widgets to help explain concepts. And I really want to pursue that idea further. So it's going to be kind of like a multi modality kind of thing where there's going to be videos, but there's also going to be interactive widgets, code snippets, just like ways to get your feet dirty, or your hands dirty and play with ideas. - -17 -00:04:03,569 --> 00:04:05,460 -Scott Tolinski: You can get your feet and your hands dirty. - -18 -00:04:07,380 --> 00:04:08,669 -Josh Comeau: Just get the whole body in there. - -19 -00:04:08,699 --> 00:04:40,070 -Wes Bos: Yeah, yeah, we should say that you have like an awesome twitter feed and blog. So we'll do shameless plugs later. But right now go follow me is Josh w. komu. co m EA you on Twitter, and it's the same calm. You got a really, really awesome blog, lots of like, like, like you said, lots of like good interactive examples. There's lots of animation stuff. Maybe we'll we'll cover some of that as well. Let's jump into the coding with your voice. So you said you have a repetitive stress injury is that from just banging on the keyboard all day long. - -20 -00:04:41,250 --> 00:05:14,370 -Josh Comeau: That's the theory. It is it's kind of ironic, where the initial thing happened. I had some I've been playing beat Sabre, which is a VR video game I was playing and I hurt my wrist. So I went to a physiotherapist. I mean, I had already seen one for a couple other things. Yeah. And one of the exercises he gave me for my wrist wound up injuring my elbow and it's that elbow. injury. I'm still I don't actually think it's the physiotherapists fault, though, like what I think happened is I was like a ticking time bomb, right, like it was gonna go off at some point. And the reason I think that is that my left arm was the one that was injured, my right arm started acting up a couple months later. - -21 -00:05:14,609 --> 00:05:53,040 -Scott Tolinski: So you know, really interesting because I've been going to the physical therapist now for a little bit too for my back. And like one thing that I've learned greatly from what they say is that, like, the problems that appear are like I'm dealing with similar issues, right, I had a problem with one side and one part of my back and now it's like a whole nother side and a whole nother part of my back is hurting. And it's because your your body tries to accommodate for whatever thing is happening at that given time. And you fix one thing, and while you're fixing another thing, it could lead to the uncovering of like you said, like a ticking time bomb, something that was bound to be going wrong at some point. Anyways, it's fascinating to hear you having a similar experience. - -22 -00:05:53,129 --> 00:06:43,170 -Josh Comeau: Yeah, I mean, I think that part of it, too, was that I'm right handed, and it was my left arm that started acting up initially. So what it meant is that now my right arm, which was already doing most of the work was now doing everything. So I was doing everything on my right. That was part of it, too, that I overused that arm, and then it started having the same issue. And yeah, the issue is, it's called cubital Tunnel Syndrome. It's the lesser known cousin of carpal tunnel syndrome, it can manifest in a whole bunch of different ways. The way that it manifests for me is like a burning and tingling in the elbow. It's gotten better and worse, kind of fluctuating. Where it is now is I can type for about two or three minutes at a time. But as you'd imagine, it's like super hard to get anything done with that amount of limit. And if I, if I have like, maybe 10 of these two or three minute snippets in a day, the next day, I'll feel worse. So really, it's like I can use it for like 15 minutes a day. Oh, man in small in small bursts, which makes it really hard to program. Right? - -23 -00:06:43,949 --> 00:06:52,380 -Scott Tolinski: So so like carpal tunnel, is it? Is it like a inflammation of like tendons or something that's causing nerve, nerve pain, nerve damage kind of thing? Yeah. - -24 -00:06:52,380 --> 00:07:48,750 -Josh Comeau: So there's a tunnel. There's two tunnels in your elbow that a nerve runs through. And essentially what happens is the nerve gets irritated if it rubs up against whatever that tunnel is made of cartilage or whatever. So yeah, it's a nerve inflammation issue. And the idea is something like 15% of people, when you bend your arm, something shifts out of place, at dislocate. That's the nerve moving. And it happened to me. And if you if you are one of these 15% of people, it makes you more prone to have this happen. I should also say that something like 85% of people who get this issue, it recovers spontaneously in six weeks. So like, if you aren't one of the people who has experienced signs of this, please don't get too panicked. For most people, it doesn't actually become this like month long saga, it usually goes away on its own in a few weeks. But in my case, I'm in that unlucky 10% which it turns out is really frustrating because you always go see these professionals. And they're like, Oh, yeah, that'll go away and eggs, and you're always given this like false hope of like, okay, I must be right around the corner, then. - -25 -00:07:48,750 --> 00:07:49,410 -Wes Bos: Mm hmm. - -26 -00:07:49,439 --> 00:07:58,770 -Josh Comeau: Yeah. I mean, it's still it's still supposed to go away on its own at some point, but there's also a surgery they can do, which essentially just moves the nerves so it doesn't get as aggravated. Oh, man, I'm - -27 -00:07:58,770 --> 00:08:07,800 -Wes Bos: getting damn Yeah. And I'm getting the mouse over here. I, whenever anyone talks about nerves, or organs, or anything like that, I'm just gonna fall over. That's why I - -28 -00:08:10,200 --> 00:08:11,580 -Josh Comeau: probably should have thrown a warning in there. - -29 -00:08:12,150 --> 00:08:23,730 -Scott Tolinski: I feel like we were talking about something a couple episodes ago was when I was like mentioning an injury Landon had. And I could tell you a little meltdown. there and I was like, Okay, I'm, I'm not gonna go into any more detail. That's fine. - -30 -00:08:23,730 --> 00:08:27,270 -Wes Bos: You guys go and do it for the sake of the podcast. But if I fall over that, - -31 -00:08:30,210 --> 00:08:31,860 -Josh Comeau: listener discretion is advised. - -32 -00:08:32,100 --> 00:08:41,580 -Wes Bos: So you obviously write code for a living? So like, tell us about this is the most interesting part. Like how do you do that when you you can only code for a couple of minutes every single day. - -33 -00:08:41,820 --> 00:09:50,610 -Josh Comeau: Yeah, so that's where and one of my co workers amberley mentioned this, essentially, like there is a community that has either similar issues or other motor issues that use this as their primary input mechanism. And it's powered by a software called Talon Talon voice. So the idea is I discord has a speech recognition engine, you can use its own built in one or dragon or any of the other ones that it supports what it does differently, because like most voice recognition just transcribes what you say. And that's great if you're writing a letter, but like, as you would imagine, it gets super tedious when you have grammar and different casings and stuff. So it comes with a bunch of built in commands. So for example, if I want to write in camel case, you just say camel hello world and it'll camel case, it'll output hello world with a W capitalized and smushed together. You can do snake hello world. And it's snake cases it. So it has all these built in formatters. It also has built in syntactical things, so I can say dub arrow and it'll put like an equals and a greater than sign. Oh, yeah, greater than sign to make a double arrow. So there's a bunch of these like little shortcuts that spit out common common things that you need. I can go like much deeper into all of the things that it can do. Is it worthwhile? - -34 -00:09:50,880 --> 00:09:52,159 -Wes Bos: Let's do that. Yeah, - -35 -00:09:52,200 --> 00:09:53,730 -Scott Tolinski: I'm very interested. Cool. So - -36 -00:09:53,730 --> 00:11:43,950 -Josh Comeau: why should the first thing is you have to learn like an alphabet. because English is like a really annoying language. Right. Like p V and T and B, like all these letters sound way too much alike. And that's why like, whenever you're on the phone, it's always like, okay, t like Thomas and V like Victor. And it's always like, it's so hard to understand. So it has its own alphabet. And all of the words that it uses are single, like most of them are single syllable. So it's like air bat cap drum each. It's like all these short words that when you say this word, it puts that letter there. And granted, like, usually, you're not just, you know, like, it's rare that you need to reach for that, because usually, you just say the sentence that you want, you don't go letter by letter. But of course, like there's times where you have like a weird word or some technical thing, but the dictionary doesn't know the next thing about it that's really cool is navigation. So you can say go left, go right go up, just to move the cursor by a single position. But you can also use ordinals. So if I say go left fifth, it goes left by five places, and actually the ordinals work for any command. So like, if I wanted to save the number 1000, I would say one, zero third, because it's one zero. And then the third means like, repeat the zero character three times, ah, so you'd wind up with 1000. That's lots of like little tricks like that make it it makes all the difference in the world, because it would be way too tedious. Otherwise, just so the other thing too, is that all of this stuff that I've mentioned, like all of the commands are Python scripts that come with the software, so you can change any of them, you can add any additional ones that you want. So being a JavaScript react developer, I've added a whole bunch. So I can say, Elm image, and it'll make a JSX image tag, I can say, styled image, hero image, and it'll say const image with a capital image equals style dot IMG, tick, tick. And he puts like, it does all the formatting for me. So I say like three words, and I get like a styled style tag ready to go. - -37 -00:11:44,309 --> 00:11:47,850 -Scott Tolinski: So is it almost like snippets, or voice? - -38 -00:11:47,880 --> 00:12:36,450 -Josh Comeau: Yeah, it can be thought of that way. And in fact, I already had some VS code snippets. And so for those ones, I've just left them alone. And I'll just like, say, the letters that I require for this snippet, and then say the word tab, and it drops that in, which is actually kind of like an easier. But one thing that's kind of annoying about that is it takes VS code a couple seconds to like evaluate that. One of the things telling voice gets right is they understand the difference between like 300 milliseconds and 100 milliseconds is huge when you're trying to rattle off a bunch of rapid commands. So like small intervals in time, make a much bigger difference when you're voice coding than when you're typing. So I've tried to move most of them, even though it's like much faster just to add a snippet in VS code, because I don't I'm not super comfortable with Python. Yeah. And it's like, you have to touch more file. It's like more work. But you get this like, super snappy response when - -39 -00:12:36,450 --> 00:12:56,399 -Wes Bos: you do it. Insurance. And that's, that's really cool. It's it's almost like you are like, you're talking about all these little like tricks and stuff that you have. And I'm like, that sounds a lot like, like JavaScript and or any programming language language in general is that like, as you get better at this thing, you just like learn lots of little tips and tricks to be able to be be productive and whatnot. - -40 -00:12:57,210 --> 00:13:32,760 -Josh Comeau: Well, I was initially super skeptical of this, because you just think like, all of the experience I've had doing voice transcription. First of all, it gets it wrong half the time. Yeah. And I just I couldn't imagine how this would be anything but a super frustrating experience. And like truthfully, it is frustrating. Sometimes there are times where it's like, I'll try to say something and it gets it wrong. So I'll try to modify it and then I see the modification wrong, and I get this big mess. And I'll just wind up like pulling out a keyboard and like Angry typing it in and keyboard away and then trying it again. So like that's totally something that happens, but overall like 80% of the time, and it's getting better and better the more I do it. It's pretty smooth sailing. - -41 -00:13:33,299 --> 00:14:13,289 -Scott Tolinski: It's just fascinating to me. I do a lot of voice typing, I suffer from a dyslexia. So like, for me writing is very challenging in general. So it's not like a mechanical issue. It's a it's like a processing issue. So I do a lot of voice dictation overall, pretty much any text message or anything I send is voice dictation. And so I have varying degrees of experience and tolerance for levels of accuracy in voice dictation, as I'm sure you've really experienced. This is just so I've downloaded Talon Talon voice comm it looks really interesting here. Talent is is the primary tool. Do you use this for everything? Or just coding specifically? - -42 -00:14:13,320 --> 00:14:38,010 -Josh Comeau: Yeah, it's so I use it for everything. It's honestly not the best for just doing straight text, I probably should get a second thing when I just want to like, you know, write a blog post or tweet something. Like you wind up having to specify a lot of things that other software would do for you. Like periods and capitalizing the starts of sentences. You have to do that all manually with Alan, but it works just fine. And it's like good enough at this point that I've just stuck with it. - -43 -00:14:38,250 --> 00:15:30,960 -Wes Bos: That That makes me think about, like, I wonder how AI will will play into tools like this because like, you would imagine after doing it for 300 hours, it would it would like well, like what's the VS code extension? I'm using kite. So what kite does is it? It went out? They went to GitHub and they downloaded every line of JavaScript ever And then they also, as you're coding, it will suggest things that like, hey, given your past and every line of JavaScript ever put on GitHub, will you maybe you want something like this. And I just think about that, or even like, like, just voice to text, when you're doing like Siri or something like that is they will go back and correct previous words based on words that you've written in the future. And it gets better as it has more context. I'm like, Oh, that's kind of interesting. I wonder if AI will start to play into tools like this, to make them even better, - -44 -00:15:31,200 --> 00:15:43,500 -Scott Tolinski: you have to imagine it well, because especially because like Google, Google voice dictation is way better than the apple one. And I would imagine they have a little bit more juice, they're involved in like natural language, - -45 -00:15:43,950 --> 00:15:50,520 -Josh Comeau: there is like a lot of room for improvement. And I should say that I'm a super big fan of talent, I'm very, I've talked to the person who's written it, you know, I - -46 -00:15:50,520 --> 00:16:51,600 -Scott Tolinski: so I should also say that it's a paid software, there's a free version and a paid version and the paid version, you get the latest version. And there's a lot of like, other little things. So I'm a big fan of it. But it doesn't really, as far as I know, do anything like what we're talking about, like, it'll make the same mistake over and over and over again, and it never learns from the fact that I keep autocorrect, or re correcting it in the same way. But it's totally like it's going in that direction, right? It has to, and it's exciting to see how it, it kind of feels like we're very early into this thing. And it's there's like more potential, there's so much more potential ahead from where it is now, I wonder, like to like how far brain signal processing would help in those regards to because there's a lot of those, like, experiments where you see, you know, nodes connected to different spots of your brain measuring your electrical signals in your brain. So like, like, at what point does it become you're not even speaking, but you're, you're thinking about things or you're moving windows around that way, and it just becomes a little bit more, you know, sci fi where your mind is controlling everything, in addition to your voice. - -47 -00:16:52,080 --> 00:17:03,799 -Josh Comeau: Yeah, there was I mean, I tweeted about this a couple days ago, and a couple people mentioned some company called neural link neural link, and they're essentially working on this. And it does seem like that would be even better. So hopefully, they they Hurry up with that. - -48 -00:17:04,649 --> 00:17:12,690 -Scott Tolinski: Yeah, yeah, I remember seeing a TED talk a while ago is just like, just think about moving a box and the box moves. And it's like, Wow, that's amazing. Yeah, that's - -49 -00:17:14,070 --> 00:18:13,820 -Josh Comeau: one of the things I should talk about, too, that I neglected to mention is it also features eye tracking. And the way that works is you have to buy a separate thing. So I have this bar that just sticks at the front of my computer. And it essentially just reflects light off your eyes. So we can tell roughly where you're looking, it's not super precise, but they account for that. So the way that it works is you make a popping sound with your mouth like up, and it essentially zooms in on roughly where it thinks you are. So like your entire screen becomes like maybe four inch of orange box. And then it's like super accurate because like you know, you can tell like within maybe an inch of where you were only everyone it blows it up. So you pop wants to open the window roughly where you're looking. And then you move your eyes slightly to like pick the specific area, you make the popping noise again, and it clicks on that thing. And you can make you can say right, if you want it to right click, you can pop twice if you want to double click. And that works super, super, like surprisingly well. I still haven't found a way to click and drag. So like that's the only interaction I don't have a workaround for I have to pull up the mouse when like I want to drag a file from one window to another or whatever. - -50 -00:18:13,820 --> 00:18:26,520 -Wes Bos: But yeah, it's pretty cool. Like if you want to like move your cursor or select some text or like anything you'd normally do with the mouse, you can just and you can move around. That's unreal. That's so cool. - -51 -00:18:26,550 --> 00:18:48,590 -Josh Comeau: Yeah, it's pretty cool. It uses a device called the Toby five, I think it was like a few hundred bucks. The irony is the device. It's like a Windows device that is meant for like Windows Hello. Like it's not actually meant to be a mouse replacement, but Talon voice built their own drivers for it. So it's controlled by Talon, even though when you go to the Toby website doesn't mention any of this stuff. It's just like, it has like a couple little tricks that can do - -52 -00:18:48,590 --> 00:18:52,100 -Scott Tolinski: so like but yeah, it's eye tracking for PC games. - -53 -00:18:52,530 --> 00:19:13,800 -Wes Bos: Because Yeah, cuz I'm a Windows computer and you just open it and it looks at your eyes and logs you in, like kind of like face ID right. And I was thinking like, how does that work? And like, I don't know what the technology is under the hood? I don't know. It's like a like an Xbox Kinect, I guess was like the very early version of that and it seems to be beginning better. That's so cool. I love that. - -54 -00:19:14,300 --> 00:19:19,200 -Scott Tolinski: This says that infrared optical Okay, so it's using something infrared. - -55 -00:19:19,470 --> 00:19:33,690 -Josh Comeau: And I know that you can it does have a video camera in it because you can toggle it on to see what it sees. And it's just like this low rez monochromic monochromatic thing. But yeah, it works like it works better than I expected it to. Wow. And - -56 -00:19:33,690 --> 00:19:40,290 -Wes Bos: how much was that the talents offered? Like I kind of want to get an idea of like, How much money do you have to to get into this? - -57 -00:19:40,310 --> 00:19:44,430 -Josh Comeau: It's I think it's 20 bucks a month. Join the person's Patreon. - -58 -00:19:44,490 --> 00:20:04,470 -Wes Bos: Oh, yeah, I'm just looking that up that's that's surprisingly affordable to get into something like this. Like I'm just wondering myself like, even if you don't have any issues like is this something you could just layer on top of all of the others. workflow that you have just to add a little bit more productivity would be kind of cool to try. - -59 -00:20:04,500 --> 00:20:19,200 -Josh Comeau: Yeah, I would say. So I know that there are a few tasks now that definitely feel faster with voice. Like I mentioned, the styled components, snippet. Yeah. And creating elements like it's so much faster just to rattle off a couple words. So I could totally Imagine that. Yeah, - -60 -00:20:19,290 --> 00:20:36,930 -Scott Tolinski: yeah. That seems like a really neat, neat avenue to explore, especially if you like, haven't explored that kind of Avenue before. I've never I've never even considered something like this. And I think it's it does seem to be a little bit, like less barrier to entry than I had probably assumed. - -61 -00:20:37,260 --> 00:21:08,430 -Josh Comeau: Yeah, I will also say that and I'm struggling, I'm blanking on his name. But there was a conference given a few years ago by someone who uses because talent voice has been around for a while it's not brand new. And he was saying that he developed I think the same issue, I have a similar issue. He got used to coding with his voice, his injury healed, and he still spends about half his time voluntarily coding by voice just because, I mean, maybe it's that he wants to prevent a future issue. But I the impression I got was that he actually enjoys it enough that it's and has gotten productive enough with it, that it's kind of a wash. Like he's happy to do that. Instead of using a mouse and keyboard. - -62 -00:21:08,700 --> 00:21:16,290 -Scott Tolinski: I watched that one from by using Python code by voice TV is read. Yeah, I think that's it. Yeah. Emacs. - -63 -00:21:16,350 --> 00:21:24,320 -Wes Bos: Yeah. He like made his own little commands where he could like, cuz I think he was using vim at the time. Emacs. Emacs is badass. - -64 -00:21:25,740 --> 00:21:30,450 -Josh Comeau: I may be misheard, like, maybe he wasn't using Talon voice. But yeah, that's that's the guy. And that's cool. - -65 -00:21:30,510 --> 00:21:32,490 -Wes Bos: And like, how long have you been doing this? - -66 -00:21:32,940 --> 00:21:55,980 -Josh Comeau: I started in Well, my injury happened in March. I probably started in May or so like I you know, because I spent a couple of months just trying a whole bunch of other things like seeing occupational therapy yet. And various specialists and various keyboards and various mice, and I got a standing desk. So it took me a couple months to like, work my way to that in my list of alternatives. But yeah, so it's been probably about four or five, five months, five months or so now. - -67 -00:21:56,070 --> 00:22:01,380 -Wes Bos: Oh, where would you say your your productivity is at right now versus where you were before? - -68 -00:22:01,980 --> 00:22:16,950 -Josh Comeau: Yeah. So there's a couple thing I was, it's hard to estimate, right? Because I don't have like doing the same task. I would say my typing speed is about a quarter what it was, but my overall development speed is probably about 50%. Because you know, like, all the time where you're thinking about things, that's still the same style? Yeah, you're right. - -69 -00:22:16,980 --> 00:22:19,140 -Wes Bos: Yeah, the typing is only a small portion of it. - -70 -00:22:19,410 --> 00:22:37,830 -Josh Comeau: It doesn't slow you down as much as you might think, based on typing speed. The issue though, is I'm not you know, I'm an introverted person that's worked remotely for years. I don't spend eight hours a day speaking. So my throat is bothering me. And I have to take breaks for that. So it's like, you can't put that much pressure on your voice. At least I can't yet maybe with a bit of practice, I'll get to it. - -71 -00:22:38,310 --> 00:23:00,600 -Wes Bos: Yeah, you should start a podcast for you to do two episodes a week and all day long. What about like things? Like, I'm not sure if you use any of these, but just like TypeScript types language, does that make it any easier? Because the editor possibly knows what you want to type as well? - -72 -00:23:00,750 --> 00:23:19,710 -Josh Comeau: Yeah. So I haven't in the past few months, I've just been working with plain JavaScript. I have worked a fair bit with both TypeScript and flow, but I haven't tried it with this. I imagine it would be you know, I mean, even with just straight JavaScript is VS code has gotten better. Yeah, it is. You import an object, it knows the key. So often, it's like I'll say the first word and then just say tab and it'll fill it in for - -73 -00:23:19,800 --> 00:23:39,180 -Wes Bos: me. I imagined that would help quite a bit. Cool. Man, you got to do a YouTube video of you building something without like, like, tie your hands around your back or something like hilarious like that. Just to show. How cool is Houdini? Yeah. And what about like switching to the browser and refreshing the browser or things like that? Do? Does that cover that? Or is that just coding? - -74 -00:23:39,420 --> 00:24:01,680 -Josh Comeau: Yeah, so the cool thing is that it's not actually specific to any program. So there's a focus, I say, focus Chrome, and it moves me to Chrome. Okay, I do command tildy. To move between windows command tab to move between it, they all have the same keyboard shortcuts, you can just vocalize them. So like if I want to refresh this command, read and read is the word for R. So yeah, you get it gets pretty convenient with that. If I want to open the dev tools. It's Command Option set, because - -75 -00:24:02,430 --> 00:24:03,690 -Wes Bos: I that's cool. - -76 -00:24:03,960 --> 00:24:36,600 -Scott Tolinski: Very cool. Like one of our sponsors, says, I don't know it's not as good. Oh, my goodness, not my best work here. And I'm talking about sanity. sanity.io is the B y o runtime. Bring Your Own front ed to structured content in the back end. Wes, do you want to talk more about sanity here? I every time I say BYU, I want to do BYU Oh, content. And then I realized while technically correct, it is not really that doesn't really make that much sense. So - -77 -00:24:37,110 --> 00:26:05,220 -Wes Bos: yes, so sanity says structure content, CMS, you probably know what they do by now, since they've sponsored so many of our podcasts. So I thought I would use this sponsor spot to talk about one of their most recent, they're just they're cranking out features. Like I wonder how many developers work at sanity because it seems like every couple of weeks or they're bringing out some sort of new thing. feature and a lot of the features lately, because I think they have a lot of the developer experience nailed. They're rolling out a lot of the end user UI updates. So things like multiple people can edit things or review things. Like, they have an example, if you go to their blog posts, you can see a visual example. But they'll say like, Oh, no, cross out this word and use this word and stand or I want to add a comment on this thing. And just like an awesome editing experience at the end of the day, because when you're picking like a headless CMS, there's a lot to think about in terms of like, will it work with Gatsby and things like that? And is there a graph qL API, but then there's the whole other side of it is, is the person who's going to use this thing at the end of the day from marketing? Or are my client going to actually enjoy this thing, and they spent all the I think, as much time on that as they do the developer experience. So highly recommended, I used it in my latest Gatsby course as well. sannidhi.io four slash syntax, that's gonna get you double the free usage tier, they already have a really generous free tier as well, if you want to try it out on any of your your next projects. Thanks so much just entity for sponsoring. And - -78 -00:26:05,220 --> 00:26:57,750 -Josh Comeau: the one thing I did want to talk about was the perspective that it's given me, like, you know, we talk a lot on the web about accessibility. Yeah. And it's so so easy to think of accessibility as something you do for other people, right, like people who are blind. And you tend to think of people who are like, in a separate category permanently. I know that like Jen, Luca and others have talked a lot about this idea that most people will experience a disability at some point in their life. And so it's not like something you do for other people, something that you do for everybody. It's something that benefits yourself and a lot of accessibility stuff, This experience has taught me just how inaccessible A lot of things are, now that I have the eye trackers, it's, you know, I can have a mouse replacement. But before I got the eye tracker, and after my right arm started, I had to use tab navigation to get through things. And it made me realize just how inaccessible so much stuff is. So it's been like a really interesting, involuntary case study. Yeah, still, like, see what that experience is like a little bit - -79 -00:26:57,810 --> 00:27:13,860 -Wes Bos: is a chi like, I want to see a conference talk from you a YouTube video on that, like, I think there's so much to be learned from from this type of experience, just because like, you're the guy who makes the stuff as well as you're now the guy who had to experience it all yourself. That's really cool. - -80 -00:27:14,220 --> 00:27:59,580 -Scott Tolinski: I'm interested about maybe like, the eye tracker, like, I wonder how good those eye trackers could be, you know, it'd be my dream to be able to look at something, make a pop noise with my mouth and have it read it to me. I'm terrible at reading, right. So like that is a challenge of mine is that I'm trying frequently trying to find ways to have the web read to me in better ways. Like you mentioned, people, they don't think about many of these disabilities until it hits them. And then then it becomes a priority. We talked about it in our episode on accessibility, that there are several categories of disabilities, whether it's temporary, and whatever, I mean, even just holding a baby in one arm is a disability for that given period of time. So definitely will make you you reevaluate things once a once a hit like that. - -81 -00:27:59,940 --> 00:28:36,030 -Wes Bos: You know, one kind of cool thing is I saw the other day is air pods have accelerometers in them. And somebody figured out how to pipe the data out of the air pod into a web socket. And you just turn your head and it it knows where you are. So I'm thinking like, man, I think the air pods are gonna are gonna start disrupting the whole hearing aid industry, like my opa has a hearing aid and it's like $3,000 and here I am with my air pods, which is probably better. For 300 bucks. I'm thinking like, man, like this consumer technology is gonna be huge for for accessibility devices. - -82 -00:28:36,450 --> 00:28:47,580 -Scott Tolinski: My dad has a hearing aid and his hearing aid is pretty sick. What is it? He Bluetooth? He Bluetooth into the TV he Bluetooth? Oh, yeah. Oh, yeah. Yeah, they're fancy. - -83 -00:28:48,210 --> 00:28:49,140 -Wes Bos: I didn't know that. - -84 -00:28:49,529 --> 00:29:13,470 -Josh Comeau: That's cool. I know, Adam Savage from Mythbusters has talked about how he has hearing loss and the hearing aids are fantastic. But they're, like $8,000. And he's, you know, and he was looking into it. He was very aware that like he has the privilege to afford these things. But there's, there's, you know, you there's no reason that it shouldn't be an order of magnitude cheaper, because it's not like there's any special it's not super expensive hardware. It's just that it's so specialized. They don't make it that many of them. - -85 -00:29:13,529 --> 00:29:14,700 -Wes Bos: Yeah, right. - -86 -00:29:14,729 --> 00:29:23,640 -Scott Tolinski: I think that that same same coin point could be applied to just about 1000 things in our healthcare situation across the globe right now. Yeah. - -87 -00:29:24,479 --> 00:29:28,860 -Wes Bos: All right. Let's switch topics. What do you Let's ask you what do you want to talk about? - -88 -00:29:29,340 --> 00:29:36,810 -Josh Comeau: I would say that the thing that I'm probably most known for online is whimsy and animation, so I'm happy to chat about that. That's like right up my alley. - -89 -00:29:37,289 --> 00:29:45,900 -Scott Tolinski: Your wimzie is very on display. Your little 3d guy love your little 3d avatar. Did you make your 3d avatar I did - -90 -00:29:45,900 --> 00:29:52,140 -Josh Comeau: not. I have experimented with Blender but I very quickly realized that goodness this is like a you know it's a whole skill but I don't have - -91 -00:29:53,670 --> 00:30:18,600 -Scott Tolinski: I bought a course on doing 3d with blender with the anticipation of doing it and I it remains unwatched, and my my cue still? That actually it's funny that I did a course on 3d using three js. And was it react three fiber? Have you explored around at all with because you have your 3d model? Have you played around with making that 3d model like actually rendered in browser, - -92 -00:30:18,630 --> 00:31:32,670 -Josh Comeau: that has been the idea. The problem is that the so I commissioned an artist in Spain to do it. And from what I understand, I don't actually have the model assets. But what he explained is that, like, the rendering takes, like half an hour and all of the lighting and that, like, he could send me the model, but all of the environment stuff, like there is certainly a way to do it. But I have not, not gotten to that, I will say that I have used react fiber quite a bit, one of the things I made was a beat Sabre editor. So you can like import your own song. And for that all of the editors that exist, you know, it's a simulation of the game. So you have blocks moving in 3d space, and you have a grid, and you click to place them. And like, all of that immediately was like, This is gonna be like, a bit of an S show if I tried to do it with the DOM, like, just with that. So yeah, I reached for reactive fiber and found it super, super cool. And that was part of the idea. Cool. It's very cool. We have all these like amazing tools for animating models, but you need those models in the first place. So yeah, it's totally like, there's so many things. Whenever I talk about like animation and wimzie, I have to like, add the disclaimer that there's like 100 different subcategories, like it's huge, right? Like there could just be, it could just be CSS animation. It could be SVG stuff. It could be 2d canvas. It could be Web GL, it could be three js. So there's like all kinds of like, directions, you can go with it. And they're all super interesting. Not enough time. - -93 -00:31:33,060 --> 00:32:18,600 -Scott Tolinski: Yeah, one more thing, you know, on your site, you have that neat little like mouse follow thing, or it's as simple as so to describe the listeners. It's what lines and as your mouse moves, they they move towards your mouse. And it's sort of like a grid in it is these small little touches like this, that I think they do a lot for an application. And I don't know how long that took you to put together. But I can't imagine it's much more than just looking at the mouse position and rotating an object in a grid, right? So like, the amount of the the amount of effectiveness you can get out of that is pretty impressive. Do you want to go in a little bit more in depth about that, that whimsy style, what your approaches are to even like dreaming up? like fun little windy things to add? - -94 -00:32:18,780 --> 00:32:44,760 -Josh Comeau: Yeah, a lot of the time, a lot of the questions I get are like, why would I do this? Right? Like what is the what is the goal? What is the purpose? Yeah, because a lot of the times I think people like they remember the animations of the early web and all of the like dark UX patterns like the the shoot the monkey game that like vibrates around your screen to get your attention. It's important to recognize why you're doing something and that like that animation you're describing, I call it like the iron filings because it reminds me of like, when you have a magnet and you move it over the is - -95 -00:32:44,760 --> 00:32:47,220 -Scott Tolinski: that's exactly that's a perfect way this I was modeling - -96 -00:32:47,220 --> 00:34:11,940 -Josh Comeau: it after that. It took me Yeah, like a couple of hours, like a good maybe like, you know, one morning, and it adds so much of like a little unexpected Spark. And I'm a big believer of this like idea of emotional design, right? Like, you can build something that can elicit an emotion. And that emotion will make your product slash website much more memorable and much more engaging. This is like, you know, there's like the dark version of this, which is why everything on your Facebook feed is frustrating and enraging, because that's what people click on. But there's like the happy version of it too, which is like if you can do something that sparks a bit of joy or catches someone by surprise, they will become more engaged in your thing. So there is there is a strategy to this, right, which is that like, I want people to come in and join my website. And these little details really help, like sell that as a thing and make them remember that my site exists when they're looking for something to do next week. I know that Sarah dresner had an article in defense of fussy websites, which talks a lot about this. And I was super privileged to be featured in this article, which is just like she really enjoys when it's clear that the website creator puts time into these kinds of details. And it is like Yeah, can I do this because I am totally this person as well. But if I see someone has put time and attention and care into those little details, it's so much more engaging. Like I just enjoy the experience so much more than just someone throwing up like a standard theme. And even if the content is the same, right? Like it enhances the content, in my opinion. Yeah, - -97 -00:34:11,960 --> 00:34:18,480 -Scott Tolinski: I frequently am shoving interfaces in my my wife's face saying Look at this. I'm like, Okay, - -98 -00:34:19,400 --> 00:34:44,960 -Wes Bos: yeah, cool. I love that. That's like, like, why would you do that? Because it adds that like we were talking before the show how you have a yellow microphone cable, and you spray painted your, your monitor on pink. Yeah. And like, people were like, why would you do that? Like, it doesn't add any functionality. But like, I'm gonna remember that now. And I think that's really cool and adds just a bit of like, extra fun to your day, I think. - -99 -00:34:45,480 --> 00:35:27,960 -Josh Comeau: Yeah. And that's the thing is it doesn't take long, right? Like neither one of the things that I'm talking about, that we're talking about, like I find that it's one of the great frustrations of my life as an Icee. An individual contributor is we're working On some feature, and inevitably, we have underestimated how long it takes. And now we have to cut some stuff from scope. And the thing that always gets cut from scope is the like little details and polish. So, yeah, I'm a big fan of advocating to doing that stuff, even every 10 teams. Yeah, like, even if it means shipping a little bit later, or putting in, you know, like, maybe just like pushing a post launch, but then still actually doing it. All those little details make a huge difference. - -100 -00:35:28,530 --> 00:35:36,240 -Scott Tolinski: Do you have an app or apps that you would say are your favorite? For those small touches? - -101 -00:35:36,240 --> 00:35:36,840 -Josh Comeau: Goodness? Is - -102 -00:35:36,840 --> 00:35:42,980 -Scott Tolinski: there any off the top of your head that you can be like, Oh, yeah, I loved when I popped open this app. And it did this little thing. - -103 -00:35:43,130 --> 00:36:31,650 -Josh Comeau: I will say that mobile apps tend to get this better than web apps. And a lot of the time, it's nothing that you would necessarily like it's not necessarily wimzie. But it's like transitions between screens, right? Like in pretty much like in the calendar iOS app, when you click on an event, like five different things happen all at once that are all part of like one giant structured bit of motion, right? Like the header gets shorter, and the thing slides and something else comes up. And it just gives you the impression of like you are interacting with a tangible thing. It's not just like, this stuff was painted. And now this stuff is painted. Yeah. In terms of examples, there was a calendar app by moleskin. The binder, the notebook company, yeah, that had like a bunch of these little details, but I haven't actually used it in a couple years. It just I thought it was neat. Sadly, I don't actually have that many examples that I can reach for it. Because I have one - -104 -00:36:32,210 --> 00:37:00,420 -Wes Bos: go forth. VLC puts a Santa hat on. Although didn't VS code, but a Santa hat on something. And then people got bent out of shape on celebrates Christmas, so they added a switch here with the snowflake Oh, oh god, I think that that was unintentionally a troll. But then someone took the bait, and then they actually switched it out with the snowflake. - -105 -00:37:02,160 --> 00:37:06,000 -Scott Tolinski: definitely appreciate the Wednesday in general. Totally. - -106 -00:37:06,300 --> 00:37:59,670 -Josh Comeau: Yeah. And that's like, I do think especially when it comes to personal sites, right? Like, I can understand that when you're working for a company. It's the realm of the designers, right? Although I will say also, like having these skills. Like, I've been in so many conversations where design has an idea. And the developer will say it's non trivial, right? That's the term non trivial that we use. And what non trivial means is like, I haven't done that before, so it's going to take me some time to learn how to do that thing. Yeah, if you have the skills, and also all kinds of things become trivial. So it's, it's totally worth investing. But I was gonna say that like for your own personal site. I've just every time I have like a wacky idea, I go for it. Because there's Yeah, I don't have to worry about getting like an approval on anything. I don't have to worry about consistency, right? Like, it doesn't matter if it doesn't fit. If it's a fun idea. I'm going to do it. See of it. Yeah, I think personal sites are such a great way to experiment with that kind of stuff. - -107 -00:38:00,150 --> 00:38:16,020 -Wes Bos: I remember Paul Irish in the background of his website, would it just as you moved your mouse, it would just like, it just gets the background of the website. And I was just like, like, that was like 10 years ago, and I still still, like sit there sometimes be like, that was the good. That was great. That was good. - -108 -00:38:16,860 --> 00:40:10,380 -Scott Tolinski: Yeah, that's my favorite types of stuff. I've used my personal site like this for a long time, like just as a playground. Like that animation transition between my pages right now, I was like just trying to see if I could do the transition from the video game Doom, like the first one where everything like sort of melts on the screen. And like, who cares, just go for it and try to make stuff like that happen. If it happens, then you know, whatever. But it's your it's your personal site. And I think I think that always will reflect positively on you, even if it is and like as polished as some other things. I think people love to see that kind of stuff where you're really going for it. I do want to quickly move into a transition to Sentry. And my transition game not on point today it says okay, but my errors and exceptions will be on point because they will be logged in Sentry@Sentry.io. Now Sentry is the perfect place to track all of your errors and exceptions. This is a tool that both Western I've used for a long time. And we we personally use it in a way that allows us to track all of our releases to each bug. So if a bug pops up, I can see when this bug was introduced, potentially even who is really you know, who you know, most likely me but who did it. So usually me and if I did this bug, I can see what release I did this bug in and maybe even what commit I did this bug in I could push this directly to a GitHub issue and track it along there. I could say hey, this bug shouldn't even be here. Let me click it. This was resolved. And then watch in horror as I get an email 20 minutes later saying that there was a regression because a resolved bug had been found again. So if you want to have all of your errors and exceptions, tracked and handled, In this kind of way, heading over to Sentry at Sentry debt I owe you use the coupon code tasty treat all lowercase all one word, and you will get two months for free. So thank you so much for Sentry for sponsoring. - -109 -00:40:10,980 --> 00:40:23,580 -Wes Bos: Alright, let's let's talk about teaching now. So you are doing a part time boot camp, which is funding us. That's how exactly how I got into the whole teaching game as well. What sort of stuff are you teaching? Yeah, so - -110 -00:40:23,580 --> 00:41:41,130 -Josh Comeau: I teach, it's actually pretty cool because I teach at Concordia University. So I get to say that I teach out of universal. It's in partnership with a company called journey education. So how it started was there was a local boot camp in Montreal called decode MTL, yeah. And they formed this partnership with Concordia, where Concordia really liked as part of their continuing education department to like, get into this space. And what's neat about it is it's a part time course that runs for eight months, it works out to be I think, a little over 400 hours. So it's about the same as like a 12 week boot camp. But it's all of the same kind of stuff. So it's HTML, CSS, vanilla, JavaScript, React Redux node and Mongo. So it's a really big, like, it's pretty much the full gamut. I was the I started by just being what they call a technical coach, which is you're there, and you're just helping students one on one with any questions that they have. Yeah. And then for the past, almost eight months, I've been the head instructor of that part time course. And I also helped develop some of the curriculum. And it's just been super satisfying and super fun. I mean, I know that it's I've heard you talk about this is how it helps you build that intuition for where the questions are. And just what the frustrations where the frustration lie. Yeah, because it is, it's so hard to remember what it's like not to know something, especially like I learned react four or five years ago now. So it's been it's been in my toolset for so long that I forget, just like how tricky props are at first. Yeah, you're not used to them? - -111 -00:41:42,000 --> 00:42:01,680 -Wes Bos: Yeah, that's awesome. I, one thing I get all the time people ask me say, is it worth going to a boot camp? Because obviously, it's a lot of money? Is it worth going through boot camp versus just learning yourself? And is it worth going to a boot camp versus going to a traditional university? What are your thoughts on that? Yeah, - -112 -00:42:01,710 --> 00:43:35,150 -Josh Comeau: oh, I have strong opinions. I would say that the reason not to do a boot camp is for the curriculum, or the knowledge that they have, right? Like, everywhere has like Free Code Camp has an amazing curriculum, and it's free. Yeah, the two benefits I see to doing a boot camp one is accountability. So like you are with a bunch of people, you invested a lot of money in it. And you are like, held accountable, right? Like, when I do we actually have grades. And in order to get the diploma, you have to submit all I think we allow you to miss six or seven of the assignments, and you have to do all the projects. And they have to be like, at a certain standard. If you are the like, I am this kind of person myself, where it's just so hard to motivate yourself, you know, it's like you're at home, you have the option of like, I can go play Rocket League, or I can like work on my education. It's so much harder to come up with that motivation. So that's one accountability to his staff. So like the technical coaches and the instructor, you have a person who is paid, that you can ask questions to and the students who I think, take advantage of this the most are the ones who are getting the most value out of it. So there are like, I'd say, like being we I teach a class of 25. And there's probably like five or six students that I hear from non stop. And then like five or six students that if I don't reach out to them, I would just never hear from them. Again, like it's totally like everyone. I i'm not saying that either of those is better or worse, just the people who aren't afraid to like ask a bunch of questions, for sure are getting more value out of it. Because that's what I think the main value proposition is, is when you're doing online courses or online tutorials. It's just hard to come up. You know, if you're stuck somewhere, you can ask online, but no one is dedicated to helping you with that. Yeah, - -113 -00:43:35,550 --> 00:43:46,830 -Wes Bos: yeah. Oh, yeah. That that's that's a huge frustration. Even mine right now, is that like, I have this problem right now. I need somebody to help me right now. You know, and that's the huge benefit. - -114 -00:43:46,890 --> 00:43:56,850 -Scott Tolinski: But you go to the IRC room, and you start freaking out at everybody until they kick you out. You know, - -115 -00:43:58,830 --> 00:44:36,120 -Josh Comeau: I do think that a lot of people look into boot camps, because they think they have like special knowledge, like, you know, like, you can only learn stuff there. And I don't think that's true. So I think that for plenty of folks, if you have that intrinsic motivation, and you're resourceful enough to answer your own questions, might not be worth it. There. The other thing too, is that like at our boot camp, we have Career Services. So after you finish, we pair you with a career coach, we help you do interview training, and LinkedIn reviews, all of that, like technical practice interviews, all that stuff is super valuable, too. I kind of think, though, that if you build a portfolio of projects, and are willing to be a little bit more patient, I don't think that stuff is critical. I can just help you get there a little faster. - -116 -00:44:36,390 --> 00:44:52,920 -Wes Bos: Yeah, yeah, we did an entire show about that. That whole thing like learning in boot camp, but also the after, like getting a job and interview prep. If you want to listen to that. It's Episode 246 boot camps, getting a job income share agreements with Heather Payne. That was a pretty interesting one as well. - -117 -00:44:53,310 --> 00:45:49,380 -Scott Tolinski: Yeah, one thing I wanted to just touch on real briefly is one thing I really like. So I posted a link in the show notes of one of your blog posts on the CSS full bleed article, and one of the things I just wanted to draw attention to and have people go check out especially complimenting you on here is your usage of like interactivity and teaching. So like one of the coolest things is that you have these content resizeable areas to show layout stuff in CSS. And I think that is just the most fantastic way in the world to show some of these layouts was I don't know if you've checked this out, but go to the article I have linked here. And so the way he does it is basically he shows, let's say, like CSS Grid, one example has like a one fraction and then a 65 character with then a one fraction zone. And these zones are inside of a div that is content draggable. Is it what is that property called? - -118 -00:45:49,470 --> 00:46:00,300 -Josh Comeau: It's just resize. If you had to resize horizontal, you also have to set overflow to something other than the default. But yeah, essentially, it turns any HTML element into a text area kind of thing, where you in the bottom right corner, you have a handle, you can drag. - -119 -00:46:00,780 --> 00:46:22,410 -Scott Tolinski: Yeah. And so you do that in combination with colored zones. And it's so effective in teaching these layout things. I just wanted to, like, draw attention to that for our listeners to go check this out. Because this is like one of the most effective, I think, articles I've seen on these types of layouts, these fluid layouts, I think he's just do a really great job. But that I wanted to shout that out. - -120 -00:46:22,770 --> 00:46:35,280 -Josh Comeau: I appreciate that. Yeah, it comes back to like, I think there's so much potential for you know, the nice thing about my blog is it's done in MDX, which means if I have an idea for like an arbitrary widget, I can just write a react component and then drop it right there in the blog post. So - -121 -00:46:35,280 --> 00:46:37,410 -Wes Bos: it's trivial. Just gonna ask that Yeah, - -122 -00:46:37,410 --> 00:46:43,590 -Josh Comeau: MDX makes this possible. Like if my data was in pure markdown, there's probably still ways to do it. But it probably wouldn't be as straightforward. - -123 -00:46:43,890 --> 00:47:03,420 -Wes Bos: I think it's so much smoother that it's like, embedded rather than embedding like a code pen or whatever. And like, there's certainly a good use cases for embedding code pen. But this is just like, just okay, I'm understanding how this layout works. And let me drag it to different sizes, see how it how it reacts? It's not like overly engineered? Yeah, - -124 -00:47:03,510 --> 00:47:27,060 -Josh Comeau: I think there's a big difference when it like, if it's just an article that's passive, right, you're reading and it's like, on the reader to do that work in their head to visualize it, you have this thing you can drag even if you know, it's not, it's not like this wildly interactive thing, but it makes it active. So like, you're actually experiencing the thing. And I find it really helps that concept. It's like, the best way to build an intuition for something is to be able to play with it and see how it reacts when you do different things. - -125 -00:47:27,120 --> 00:47:40,110 -Wes Bos: There are so many goodies on your website, I just keep finding, I definitely have to go to his website and click around folks, it's my favorite is the sound effects. When you click on nav items, yeah, oh, I - -126 -00:47:40,110 --> 00:47:56,340 -Scott Tolinski: don't have sound up. So I've not heard sound effects. But I will less than I famously, both advocated for more sound effects in website in one of our episodes where we were trying to disagree on things, and we both ended up agreeing. For me, it's - -127 -00:47:56,340 --> 00:48:33,930 -Josh Comeau: so so similar to what we were talking about earlier with, like animations where so many people have just been burned by the like, 90s. Yeah, like a media is playing in the background when you visit a website. So it's like, no website uses sound. I actually I published a package use sound, it's just a react hook that lets you like drop sound effects really easily. Oh, nice. It's super, super useful. And I find that this is another area that mobile apps, right, like a mobile, your phone will interact with three of your senses, right? You can see it, you can hear it, and it vibrates, you can feel it. Whereas the web, you have one, all you do normally is you can see what's happening. And the more senses you can reach out into the more it becomes like a tactile real thing and not just pixels on a screen. - -128 -00:48:34,440 --> 00:48:36,330 -Scott Tolinski: Do you have a Nintendo Switch? - -129 -00:48:36,450 --> 00:48:38,160 -Josh Comeau: I do? Yes. And - -130 -00:48:38,220 --> 00:48:41,490 -Scott Tolinski: yeah. I'm going to talk about the haptic feedback is that or is that - -131 -00:48:41,490 --> 00:48:46,380 -Josh Comeau: I thought you were gonna talk about all the little sound effects, like when you go to the store, and it makes it like do to do to do sound effects like, - -132 -00:48:46,740 --> 00:49:05,850 -Scott Tolinski: Yes, all that all that stuff's fantastic. But what I did want to talk about was that, like, you mentioned that the phone vibrates, right, that haptic engine in the Nintendo Switch. joi cons is so good that you can, you know, shake a glass of ice in your hand and feel how many ice cubes are in the remote, right? How many ice cubes are in this remote? - -133 -00:49:05,880 --> 00:49:06,480 -Wes Bos: Right? Like, - -134 -00:49:06,480 --> 00:49:31,080 -Scott Tolinski: we don't have anything like that? I A lot of my studies in college were about like using accelerometers to pick up things and interact with them in sort of interesting ways. And it's just so amazing how many of these browser API's go unused or ignored? Wouldn't it be really cool if we had some like 3d haptic abilities on on the browser to do some really neat haptic haptic feedback stuff? I don't know. Just got the wheels turning. - -135 -00:49:31,110 --> 00:49:34,650 -Wes Bos: There's a vibrate API in I think it's always supported in Android though. - -136 -00:49:34,920 --> 00:49:58,530 -Josh Comeau: That was gonna be my thought is there probably is some like really fancy API, but it's probably like not super widely supported. But yeah, I mean, it's, I played what what's called this game on the switch where it's like, the controls are you have this plank and you move either side up and down and a bowl run you have to like roll the ball and detect it feedback. But haptic feedback makes that possible because you can feel it rolling down the log. And yes, it totally changes the experience. - -137 -00:49:58,830 --> 00:50:10,860 -Wes Bos: The vibration API navigator vibrate, and it's currently under recommendation. And implemented in Chrome, edge, Firefox, Android and Samsung internet. So just not - -138 -00:50:11,550 --> 00:50:25,950 -Scott Tolinski: Safari, which is cool. I'm gonna put a little snippet in the show notes here, go ahead here. Actually, no, this isn't gonna work, I was gonna say head to your console and paste this in and check it out. But of course, we're on desktop, you just have to Peter's not gonna start vibrating. - -139 -00:50:28,320 --> 00:50:58,560 -Wes Bos: There was some way back like 10 years ago, actually, my very first YouTube video was, there was a accelerometer API in the Old mac books, because they had like spinning hard drives. And they would sense when you dropped it, and they would suck the arm in on the hard drive. So it didn't damage the platters. And that was always a fun little demo to show people that you could, you could do it, and then they got rid of the accelerometer because all MacBooks have SSDs in them. So that was kind of a bummer. Anything else you you want to share? Or, you know, like, I - -140 -00:50:58,560 --> 00:51:17,100 -Josh Comeau: think the main takeaway that I hope people have is, this is a viable option, right? So like, I know, I've heard from a bunch of folks recently, like people have arthritis, whatever issue that you have that makes it difficult to use a keyboard or mouse, there are alternatives that are surprisingly feasible and will only get better with time. So it's just it's cool to know that stuff exists. - -141 -00:51:17,340 --> 00:51:24,960 -Scott Tolinski: Are there any good blogs or resources or communities around this type of work that people are doing where you can learn more? - -142 -00:51:25,080 --> 00:51:57,510 -Josh Comeau: So there is a slack, the Talon has a slack room, and I believe you can join that for free as well. So that's where I've had the most. I've spoken with the most folks. There's also a conference talk by an author, first name is Emily, I forget her last name. Okay, maybe I can try to find that. And it'll show up in the show notes if I can. Yeah, yeah. Because there's that was it. I mean, a lot of what we talked about is it overlaps. But that was my first moment of like, Oh, this is a thing people do. And there's a lot of really good, really cool stuff you can do with it. Emily Shea. Yes, that's the one. - -143 -00:51:57,780 --> 00:52:06,360 -Scott Tolinski: Cool. Well, I think that did. Okay. Well, this is the part of the show where we talk about things that are sick. Josh, did you come with a sick pic? - -144 -00:52:06,419 --> 00:52:54,870 -Josh Comeau: I did. And I struggled because you know, this is I have one. I should also say I've been a syntax listener for quite a while. So I've heard a lot of things. And I you know, I there's all kinds of stuff that I've wanted to share. What I will share is a book that I've listened to an audiobook called the utterly uninteresting and unadventurous tales of Fred the vampire accountant. It's a mouthful of a science fiction book. And it's amazing. It's essentially an accountant who gets turned into a vampire. And all he wants, he's like this quiet, introverted person. All he wants is to have a quiet accounting life, and he keeps getting unwittingly pulled into adventures. So it's like, opposite of every other kind of kind of story like that, where like, he like he has some friend that gets kidnapped by a werewolf and he has to go rescue them. And it's always like, he solves things by becoming friends with people and using his accounting skills. So it's like, unbelievable, it's - -145 -00:52:54,870 --> 00:52:57,840 -Scott Tolinski: such a fun, Beth. Great. Cool, Wes. - -146 -00:52:58,230 --> 00:54:25,590 -Wes Bos: I am. It's funny, you mentioned Adam Savage earlier, because I am going to sick pick his book, which is every tools a hammer, I'm gonna recommend that you do the audiobook of this, I do audiobook for every book I read, but I'm gonna recommend specifically the audio book for this. He released this like, I don't know, maybe a year or two ago. And I'm only just recently got around to actually getting through it. I'm not totally done yet. But I've really, really been enjoying it. So Adam Savage is the guy from Mythbusters. And I've always really liked him because of his approach to learning and sharing what he knows and mastering his craft and putting it in a place where he can he can charge money for it. And just like understanding and hearing how he sort of went through life and the obstacles that he hit, and just at the end of the day, he's just a maker, and he loves to share what he knows and loves to to be in community. And I think specifically, the best part I've got out of it so far is just like how does he tackle a large project by breaking it down into smaller parts and making lists and stuff like that. And I think that I was listening to him like man, like a web developers need to listen to this book because he really shows you how he can take something that is just mammoth, which is all the projects on Mythbusters as well as his own personal projects, and be able to tackle it and do a good job. So it's called Adam Savage, every tools a hammer. Cool. - -147 -00:54:25,860 --> 00:55:42,540 -Scott Tolinski: I'll check that out. I have a podcast that I'm going to sic pick and it's a fun podcast. I listen to a lot of comedy podcasts. If you are have ever been a fan of Paul F. Tompkins who is the voice of Mr. Peanut butter on bojack horseman. He has a podcast called the neighborhood Listen, which is fascinating and awesome because there's a little intersection here with apps where they are basically what they're doing is they're reading posts from a neighborhood app, whatever is most likely next door they don't name what it is, but they're they're reading posts from next door and then they're basically you proffering as long as they live in the community in which that post was posted, so they have a fictional town that they live in. And they're just two citizens of this town, read a post about coyotes or whatever. And then they're just, they're just elaborating on it. And every single episode, they have a guest, on who's another comedian. And that guest will play the part of the author of a specific post. And then so they'll get to interview the author of this neighborhood post to see exactly like, what were you thinking when you were, you know, you're giving away used toilet paper or something? Who knows? But they're very, very funny. And I've been loving this podcast. So check it out the neighborhood that listen. Beautiful. Alright, let's - -148 -00:55:42,540 --> 00:55:48,090 -Wes Bos: get into shameless plugs. Now the name speaks for itself. Do you have anything to shamelessly plug Josh? - -149 -00:55:48,510 --> 00:55:49,140 -Josh Comeau: Yeah, so - -150 -00:55:49,140 --> 00:56:12,450 -we talked a little earlier about how I'm kind of pursuing my own thing, I very quickly threw together a landing page. So the first course I want to create is about CSS, because I think that so many, especially JavaScript developers struggle with it. So you can find out more about it if you go to CSS for j s, CSS dash fo r dash j s dot Dev. So it's like a play on CSS and j s. And there's a bit of information there. You can also sign up to get updates about it and I'll be sharing more about that soon. - -151 -00:56:12,450 --> 00:57:09,240 -Scott Tolinski: Very cool. And that lots of touches of wimzie I'm seeing on this already just little, little drawing things and explosions and whatever 11 I'm going to shamelessly plug my course that is going to be up by the time you're listening to this on. Another way you can add whimsy to your spelt applications called animating spelt is the name of the course and we go through just showing you how awesome and easy animations can be in spelt. If you've ever struggled with animations Let me tell you we make it really super easy because spelt makes it really super easy especially because they can they bake in so much functionality into core spelled so we cover a whole host of practical animations stuff that you need to do every single day in your job building things like slideshows and draggable sections and menus and whatever and we do so with ease in spelt with animating cells on level up tutorials comm forward slash pro 10 up to the year and save 25% - -152 -00:57:10,050 --> 00:58:09,870 -Wes Bos: I'm gonna shamelessly plug my master Gatsby course. This is a course where we learn to build websites with Gatsby react graph, qL headless CMS sanity, progressive images all that I'm going to read one quick review I got on Twitter the other day. He says I'm about halfway through the fantastic master Gatsby course by Wes, Bos West is always great at not only explaining the technologies and frameworks, but also including practical tips for efficient development in your local environment. So let's let's one thing I sort of went hard on this course is just like lots of extra little tasty treats, if you will, lots of extra little tips in building websites, local dev things that that it's not related to Gatsby, but it's just things for developers to know. So check it out. Master Gatsby. com use the code syntax for extra 10 bucks off. All right, thank you so much for coming on Josh. Really appreciate it. This was super cool. I think this is gonna be super popular episode that we can also just point people to and they want to learn about voice coding. - -153 -00:58:10,200 --> 00:58:14,340 -Josh Comeau: Yeah, it's been an absolute pleasure and a privilege. Thanks so much for having me. Josh, - -154 -00:58:14,340 --> 00:58:15,750 -Wes Bos: thanks a lot. Talk to you later. - -155 -00:58:15,750 --> 00:58:28,950 -Scott Tolinski: Please, please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax299.srt b/transcripts/Syntax299.srt deleted file mode 100644 index cf9ccb09d..000000000 --- a/transcripts/Syntax299.srt +++ /dev/null @@ -1,192 +0,0 @@ -1 -00:00:25,680 --> 00:00:44,670 -Scott Tolinski: Oh, come to syntax on this Monday tasty treat, we're gonna be going all down the list of bundlers and 2020 bundles and tools that you can use in your projects, we're going to be going into them quite a bit. Personally, I'm dealing out a couple of Scott's picks, which is something that I just made up for this episode. - -2 -00:00:44,670 --> 00:00:49,980 -So my name is Scott Tolinski. I'm a full stack developer from Denver, Colorado and with me, as always, is the West Bos. - -3 -00:00:52,680 --> 00:00:53,790 -Wes Bos: That's it. That's all I got. - -4 -00:00:53,820 --> 00:00:57,390 -Scott Tolinski: Yeah, I know. We, we both had sort of rough nights last kids. - -5 -00:00:57,390 --> 00:01:04,140 -Wes Bos: Oh, man. It's amazing that there's still people on the planet, given how rough kids can be sometimes - -6 -00:01:04,560 --> 00:01:07,710 -Scott Tolinski: is very rough, especially when they come up in the middle of the night wake you up - -7 -00:01:07,710 --> 00:01:09,360 -Wes Bos: exactly what we had to Yeah - -8 -00:01:10,170 --> 00:01:22,680 -Scott Tolinski: it is hard. It is hard with Guardian a both woke up this morning. And we're just like, uh, she says something about going to work. And I was like, you don't have to go to work. It's Sunday, he's like is on Sunday. It's like, Oh, no. - -9 -00:01:25,270 --> 00:02:35,680 -However, let's just say if you had a child coming into your room in the middle of the night to wake you up, that might be conceived as a bug in your program. And you might want to be able to see that while it happens. So you can prevent it in the future. And you might be able to do that with one of our sponsors today. And I'm talking about log rocket. Now log rocket is the perfect place for you to see your bugs and errors happen as they happen in a real browser, scrubbable window. It's so fascinating to me, I'm such a visual person. So when a tool like this pops up in my radar, and it allows you to solve bugs by having a scrollable video with the Network tab and all that stuff that all of the tools that you know and use for your own debugging flow, man, it really catches my eye. So you're gonna want to check this out at log rocket.com. They works with all the stuff you know and love. There's an on premise or in cloud version of this thing. And it is a fantastic tool. So check it out that log rocket.com forward slash syntax, sign up and you will get 14 days for free. So bundler, you want to start off, you have a nice little what is a bundler little business here, we can start off there. And then yeah, get into him - -10 -00:02:35,720 --> 00:04:06,980 -Wes Bos: real quick. For anyone who doesn't necessarily know like, I got to actually it's funny, I got an Instagram message this weekend, someone was just like, what do I do to make my code go live? Like, what is the process and generally, you have a bundler that will help you both in development mode while you're working on the website. And as well as when you get ready to ship that thing for production and send it out to the masses. So what does a bundler do? On one hand, you can just write HTML, CSS, and plain JavaScript to open it up in the browser. And that's certainly one really great way to do things. But as you get into more complicated apps, you generally need a tool that will handle all of the JavaScript that you write. And often, in many cases, they will also handle all the templating and CSS that you write. So like what goes into a bundler, you got to configure it, right, you got to choose what language you're using, whether you're templating in JSX, or pug or view or any of these other things out there. Those need to be converted into the templates that they're used in, whether that's just HTML, or whether that's a react application, and need to choose what JavaScript you're writing in. And what you're compiling to. So whether you are writing in modern JavaScript, es 678 910. And compiling to ES5 is pretty common right now. See support older browsers, TypeScript CoffeeScript, you're using different features decorators, nested prop drilling, what's that one called again? - -11 -00:04:07,490 --> 00:04:08,660 -Scott Tolinski: Oh, optional chaining, - -12 -00:04:08,690 --> 00:04:33,320 -Wes Bos: optional chaining, there you go. So if you're gonna use that, you need to convert that to something that's going to work in all the browsers, polyfills environmental variables, loading CSS, compressing images, and the probably the two the most important one is asset chunking. So chunking down into smaller JavaScript bundles that you can load as you need them, and tree shaking, which is it will take out - -13 -00:04:34,340 --> 00:04:44,270 -unused JavaScript. So if you import something from a library, you don't use all the methods, it will just cut out those unused methods for you. So that's kind of all the work that a bundler does for you. - -14 -00:04:44,480 --> 00:04:59,960 -Scott Tolinski: Yeah, tree shaking to me is one of the ones that I think is a killer feature that people should be looking for right now specifically, because totally you can import one little thing. I mean, just think about the possibilities of having like something like lodash in your project and I know lodash exports - -15 -00:05:00,170 --> 00:05:47,420 -to individual function, but maybe you could just like not even think about that library at all, just be like, Oh, I just want this one little tiny piece and not have to worry about the size of anything like that. I mean, you, you get those kind of benefits. So to get into it Webpack. The first and foremost one we want to be talking about specifically because one, version five just came out. And two, it's probably the most used between all of the different frameworks that use it. And, you know, I think there was a time when Webpack was the sort of de facto, so everybody jumped on it. This one to me is the hardest to learn. But it is also the most used now I wonder if it's the most used because it's used in so many libraries or individual projects are really going hog wild with this. But to me, Webpack is just, it's very difficult to grok you know, the word grok? - -16 -00:05:47,660 --> 00:05:53,330 -Wes Bos: Yeah, to understand to kind of get the idea of everything it encompasses. - -17 -00:05:54,380 --> 00:07:11,690 -I would say it's by far the most popular one out there, it was first on the scene, not very first, but it was first on the scene when we when we sort of moved to these bigger builds, and they did a whole lot. It can do absolutely anything you want. It's a Swiss Army Knife of this type of thing. I think the frustration with it comes with that the fact that it can do everything is it's very hard to configure, because almost all of us are just doing the same stuff. Like we're all writing, react or view or spell apps. And we're all bundling them. And we're all kicking them out the other side. And yeah, on some cases, there are some edge cases. But I think like just regular developers like Scott and I, and probably a lot of you listen to this podcast, we're all just writing the same type of JavaScript at the end of the day. So it doesn't make sense for us to actually have to configure it. So because of that, I haven't written a web pack config in probably two years now. And that's no shade on Webpack. That's just because either other packaging tooling is much easier to get up and running with or if you look at something like next.js or Gatsby, they just use Webpack under the hood for you. And they have somebody much smarter than us that knows how to configure this thing. And they just do it for you. It's part of the build step of whatever framework you're using. - -18 -00:07:12,020 --> 00:08:45,260 -Scott Tolinski: Yeah, I'm gonna go in the same way I don't think I've ever written once. Not single time written a web pack config file from scratch, is certainly I've usually just copied and paste one or exported from Create react app or something like that to actually use it. So yeah, Webpack is there it is very powerful, very used. And there will be a lot of blog posts and stuff teaching you how to do it. It's just again, a lot a lot to pick up. Alright, next up is a roll up. Now roll up is Scott's pick for the best option of most features verse ease of use, as in roll up can do just about everything that exists just like Webpack it is definitely a Swiss Army knife. Roll up gives you you know, the all the hot module reloading the ESM stuff, the tree shaking, it gives you just about every single major feature that you could possibly want. And in fact, I think quite a bit of projects are starting to use roll up now I know spelt uses roll up. I know, PSD x Are you familiar with t s dx was like a starter for creating react libraries. It's, you can think of it as like the Create react app for creating libraries and push publishing them to NPM. It's very, very good. And it's TypeScript primarily. But that uses roll up Ed very successfully because it gives you the smallest bundle sizes possible. So I really like roll up myself. And if I was like picking a Swiss Army knife, one to go with and I would most likely pick roll up myself. So this is a Scott's pick for most features or ease of use. - -19 -00:08:45,540 --> 00:08:59,040 -Wes Bos: Yeah, I've actually never used roll up directly. Like I'm sure I've used it in some sort of underlying build command. But I've never went in and did it myself. Is there a chi roll up config? Or how does that work? - -20 -00:08:59,460 --> 00:09:16,530 -Scott Tolinski: Yeah, there's a roll up config and the roll up config. See the thing with roll up is that by default, it's it's meant to just be a bundler. So by default, it's just going to be a bundler. And then there's plugins to do all sorts of transpiling in whatever of your code as needed. - -21 -00:09:16,830 --> 00:09:17,400 -Wes Bos: Oh, yeah. - -22 -00:09:17,520 --> 00:09:50,730 -Scott Tolinski: So it's, it's really neat. Basically, the config file can just be like a JavaScript object that you're exporting where you give it an input and an output and what that format should be. And then you can toss around plugins along the way, whether or not those plugins are analyzing your code, maybe it's analyzing your CSS, maybe it's transpiling. It maybe it's testing it, whatever. But you can have as many outputs or inputs as you want, which makes bundling really nice and easy. If you wanted to have multiple builds of your project based on necessary features, browser requirements, whatever. It's neat. I like roll up. - -23 -00:09:51,230 --> 00:11:37,130 -Wes Bos: Next one we have here is parcel parcels my favorite out there, and it is a bundler. It supports all of the popular things out of the box, TypeScript, CoffeeScript, all of your CSS, all of your react view, pug. And then you can just go and add plugins for for any other languages that it doesn't support. But I've never run into anything that it doesn't support for me, which is awesome. It just works. So you the way that it works is you install the partial CLI. And then you just give it your URL of index dot HTML or a react application or JavaScript file. And it will run both it also is a bundler. But it also is like a whole development environment. So it does hot reloading and environmental variable injection and local server, whenever I need to just quickly work on something like even if it's just HTML and CSS, I will quickly just say parcel index dot HTML. And then you can type a link source equals, and you can link to SASS files, you can link to TypeScript files, and it will just detect those and load them all in and you can you can run the build. And it's just so easy. I've never had to configure it with a custom parcel config, I don't even know if that exists. You just use your package JSON for things like which browsers you're supporting. Or if you have a custom Babel config, you can just pop that into your, your package JSON or Babel config tool, which is great. So big fan of parcel personal two is going to come out at some point. And I think that's going to make it even even easier. I'm not sure what the features are for parcel two. But a big fan of parcel one. - -24 -00:11:37,640 --> 00:12:00,200 -Scott Tolinski: Yeah, parcel is my pick. This is the parcel is Scott's simplicity winner pick of the week. So I do I like I like parcel. It's the easiest to get started with by far, it just makes things nice and easy. I have found some issues sometimes where I hit like a bug with it. And I'm like, I don't know what to do next. And then you have to start diving into the config or something. But for the most part, I think it's very, very solid. - -25 -00:12:00,500 --> 00:12:37,370 -All right, next one is going to be NPM yarn and yarn two. Now these are not bundlers themselves, you can certainly use them as part of your build process by writing custom scripts yourself. And I remember when like Gulp started coming out, there was like a an audience that was just like, I don't get why you would use the tool for this. Why don't you just use NPM scripts. And that's certainly possible to have the scripts to do these types of things for you. I don't know if I'd personally recommend it as the standard now that things are so complicated with browser support modules and tree shaking and all this stuff, I would pick a bundler If I were you, but certainly try to do it. - -26 -00:12:37,520 --> 00:13:23,000 -Wes Bos: Your NPM and yarn are just for installing your dependencies. And then having just like agnostic commands like NPM start and then under the hood, it will run parcel or roll up or whatever. It's funny that you said Gulp though, I forgot I took 160 line Gulp file and just converted it. It was for the slides for the talk that I do. Yeah, I just converted it just to parcel justtyped the word parcel index dot pug. And it worked. I was like, Holy smokes, I have to convert my wife's WordPress website over to parcel and I think I'm gonna do a video on how to do it because she has a pretty big gulp file behind it as well. And I'm pretty sure I can get it down to no config was parcel. - -27 -00:13:23,480 --> 00:14:49,850 -Scott Tolinski: That's nice. Yeah, I definitely take that approach. So the next one I have in here is going to be snowpack. Now, snowpack is Scott's speedy pick of the week. And it's sort of like Sonic after he's had three espressos. snowpack is very fast, because by default, it's only compiling the actual code file that you're touching at any given point, because it uses the ESM imports. By default, everything is very, very fast. So like most of these bundlers, when you save a file, it's going to be alright, scanning your project, compiling all the files as fast as possible than performing that rate, hot refresh. What snow pack does, if you modify header dot j s, it transformed or even header.ts. It transforms header.ts and transforms it into whatever it needs to be. And then hot module reloads that into your browser as fast as possible. I want you to just have it there just about instantly. In terms of like save file c update. I think snowpack is by far the fastest, especially for dev builds, at least out of the ones that I've tried and recently swell to just announced that they are going to be moving their main bundler for death mode to be in snowpack. So it's definitely reached the big time and I think that's a good sign of things to come for snowpack is very nice. Remember, we had Fred on the show, and that was a great episode. So I don't have the the numbers pulled up in front of me. Maybe Maybe I can do that. - -28 -00:14:49,000 --> 00:15:44,200 -Wes Bos: Yeah, this snowpack is from like, like Scott says the devs behind pika package Frederick k shot Episode 212 beauty he ha Go back and listen to that one because this is like definitely like a next gen piece of JavaScript tooling. Because what it does is it just goes it does away with common j. s modules and possibly even NPM. And just says, Okay, what if everything was a URL and everything is an es module? What can we do there? And so along with snowpack, there is snowpack CDN sky pack, which allows you just to load in your dependencies from URLs, which is the same approach that Dino is taking as well. We'll talk about that in just a second. So I would definitely keep an eye on if there's any one of these that you want to check out in terms of like, I want to see the future of JavaScript, I would say snowpack, is it? - -29 -00:15:44,740 --> 00:18:40,570 -Scott Tolinski: Yeah, yeah, snowpack, very cool. You can also do production bundles with it, although I have not tried it myself. Next one is going to be ISO build. If you haven't heard of ISO build, that's because it's the name of the bundler that's built into Meteor. And Meteor version two, which I want to do a whole episode on. Wes is about to drop soonish. And so ISO build is gaining two really important features that most people might not know, tree shaking and hot module reloading, hot module refresher, whatever. So Meteor is a build times are going to be way faster with those two new tools. I have it in my codebase. Right now, it's really nice. You might be wondering if I need to use meteors, a whole bunch of stuff to use this. You don't. In fact, basically, level up tutorials is just about only using ISO build as a build tool. And just about none that house of Meteor currently. So this is my underdog pick of the litter. I like these picks. Yes, thank you very much. This is ISO build, or Meteor, again, hot module, reloading, all that stuff is dropping in Meteor too. So I'm really psyched about this. And to me, the build times. At one point were not super great. So now they're getting better and better. Next one we have here is Rome. This is pretty cool. This is a project that is a bundler. But it also is going to be a linter, which replaces es lint, a compiler which replaces your Webpack. Replace your Babel prettier. So it's a format or it's a replaces jest. So it is a test runner. And that this is really interesting. So it's like a one tool to rule them all, just to replace all of the stuff that we have. And that seems very appealing to me, because I can definitely get a little overwhelmed with all of the tooling that is necessary. Sometimes you open up a project, and there's like 400 dot config files. And you're like holy smokes, like what is going on in here. And obviously, like, we've done that to ourselves, because I rather do a project with things like prettier, nice lint. But sometimes the config needed to get up and running with these things is really frustrating. So it looks like Rome is just going to replace all of that. And I was talking to some folks on Twitter about this, because Dino is taking the the same approach. Dino is Ryan Dahl who created no jazz, he's creating this new JavaScript runtime that is TypeScript from the beginning. It's built on rust, it's kind of cool. But it does the same thing. It gives you a linter. It gives you a format or it gives you a bundler. It's all in one. And I was like, oh, man, like Will that work? where somebody just comes along and says, here's all the tooling. Are we going to start to see people being like, cool, but can I have a config for x, y, and z? And a couple of people said in in like go world go is another programming language. They just use the tooling that's given to them. And you don't fuss with it either. Standard. Yeah, you just it's sort of like when prettier came out. You're like, just use what prettier gives you and be happy. - -30 -00:18:41,790 --> 00:19:18,360 -That's what rust is like to in fact, one of the things I love so much about rust is that there is a way to do everything and explicit way to do everything. And I like that you can write your tests directly below your code and each individual file and there is no config to do it. You just do all she doesn't write your test right below it. Okay, that's done. Oh, yeah. Also, guess what? Since there's a standard for everything, it auto documents your code to Oh, okay, great. It's like it all works together in a very cohesive manner. It is really depressing when you think about just all of the hoops and mental challenges we have to you know, go through to figure out exactly what to pick here. - -31 -00:19:18,360 --> 00:19:18,990 -Yeah, I - -32 -00:19:18,990 --> 00:19:48,780 -have not used a dino yet, or demo or dyno and I noticed you know, we had that whole thing before this callback. I have not used this myself but it seems pretty neat. It's one of those ones it's like once the community's there maybe in a little while I'll take a stronger look at it. But like right now there's like no reason for me to dive too deeply into it. It is it is pretty fast. I listened to an episode of software engineering daily about Dino if you can find it is very good. - -33 -00:19:49,070 --> 00:20:01,890 -Wes Bos: I built a couple things here in the air. We'll do a whole show on you know, but what we're talking about I don't see like the killer feature yet. And also, yeah, I think I kind of like NPM installing rather than having import from the URL? - -34 -00:20:02,360 --> 00:20:04,410 -Scott Tolinski: I do. I'm gonna be honest, ideally, yeah, - -35 -00:20:04,470 --> 00:20:39,390 -Wes Bos: yeah. Because like you just import whatever from react and not HTTP, whatever. cdn.com forward slash 1517. Point 0.14. It's a, because like, I'm like, What? How do you update that? Or like do the copy paste that every time I'm sure that that will that will be solved? I'm like, I'm probably being silly here. And they also are mapping all of the Node JS API, so that you bet you probably can run node modules in, in Dino at some point, which is kind of cool. We'll do a whole show on it. I think it's kind of interesting. But I don't think it's time you should jump on just yet. - -36 -00:20:39,990 --> 00:21:41,330 -Scott Tolinski: Yeah, we should get a dino show on the books, I would love to do a deep dive in it myself. All right. Lastly is going to be the let the tool take care of it for you as in, hey, we have a lot of these projects that are whether it's using some of the other view projects, like a grid, some but there's also Gatsby index j s, a lot of these things just use Webpack under the hood, or they just use roll up under the hood. And these are just projects that are layered on top of the framework and layers on top of the bundler, so that you don't have to think about it at all. And to me personally, this is the best way to go because you don't have to think about it. Now granted, I used the ISO build setup, which for the large part doesn't require any config files, and you can start throwing them in there when you need them. Kind of like parcel, right? Yeah. But these kind of tools, like almost the config even happens about like a plugin layer on top of that, like you're doing a Gatsby plugin to get that kind of functionality that you need, not a Webpack plugin. So these tools do use this bundlers However, they just sit on top of them and hope to make them a little bit easier. So you don't have to touch those monster config files. - -37 -00:21:41,670 --> 00:22:00,990 -Wes Bos: Yeah, it's it's pretty nice that in most cases, it can just be tucked away for you. And it does all the hard work for you. So that's pretty awesome. So I don't know. Hopefully, that was a good little primer on bundler. There's also Oh, there's one more I forgot, which is broccoli. I don't know if that one is still think I was still under development. - -38 -00:22:01,380 --> 00:22:02,880 -Scott Tolinski: Broccoli is a compressor, I - -39 -00:22:02,880 --> 00:22:08,850 -Wes Bos: think fast, reliable asset pipeline, supporting constraint time rebuilds. - -40 -00:22:09,390 --> 00:22:10,710 -Scott Tolinski: It's hard to Google broccoli, - -41 -00:22:10,980 --> 00:22:12,300 -Wes Bos: broccoli dot build. - -42 -00:22:12,840 --> 00:22:24,660 -Scott Tolinski: I just ended up getting a Google image of broccoli popping up here. How about this one? Beat it. What about beat Veit? - -43 -00:22:25,140 --> 00:23:19,500 -Yeah, there's a handful of people here, a minute there. b i, t e, it is created by evernew, the creator of view and it is built on roll up. It's an opinionated web dev build tool that serves your code via es module imports. So Veit, I want to I want to say if there is a Scotts speedy pick of the week, pick of the week, part two, this is the number two in that line. Like if there's a race, I'm going to pick snowpack to come in first, and then I'm going to pick vite, beat whatever it is, I'm going to pick that to come in second. It is a very fast has all those things like hot module reloading, and I've used this on a self project myself too. And I really enjoyed the speed of which also there's like a neat, create react to template from here. So you could do like creates v tap template react, and it basically spits out the exact same template as create react app, except for the dev experience is much better. - -44 -00:23:19,560 --> 00:23:35,670 -Wes Bos: Okay, you know, this V looks like parcel parcel is the bundler. But it's also the tooling and feet looks like the same thing as parcel where it just uses roll up under the hood, but then it adds all this tooling on top. So this is awesome. I would say if you're gonna try roll up, probably just go for this then. - -45 -00:23:36,150 --> 00:23:39,600 -Scott Tolinski: It's very good. Yeah, it's very, very good. Beautiful. - -46 -00:23:39,810 --> 00:23:41,250 -Wes Bos: All right. Should we ended again. - -47 -00:23:42,360 --> 00:23:57,360 -Scott Tolinski: Let's end it again. My apologies. I thought about that one. I knew we were going to get some comments. So well, thank you so much for tuning in to this Monday hasty treat in the next episode on Wednesday. Oh, what are we going to be getting into with? We're going to be getting into - -48 -00:23:57,750 --> 00:24:25,830 -100 300 gonna be our 300th episode. And by the time you're listening to us, we would have already recorded it. We'redoing the live call-in show. It's going to be a lot of fun. So yeah, we'll see you on Wednesday for number 300. All right bases. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax3.srt b/transcripts/Syntax3.srt deleted file mode 100644 index 0fc9591d4..000000000 --- a/transcripts/Syntax3.srt +++ /dev/null @@ -1,548 +0,0 @@ -1 -00:00:04,440 --> 00:00:09,020 -Wes Bos: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:09,480 --> 00:00:21,300 -Scott Tolinski: Hey, everybody, welcome to the syntax podcast where we give you some tasty treats on a web development and life topics. Here today is Scott and West as always. Hello, everybody. - -3 -00:00:21,300 --> 00:00:22,770 -Wes Bos: Thanks for coming out. - -4 -00:00:22,949 --> 00:00:39,630 -Scott Tolinski: And today we're gonna be talking about CSS preprocessors and sort of overall CSS structuring sort of what we like, what we don't like, what's hot, what's not that sort of stuff. But basically, I think we wanted to kick it off with Wes, what are you working on right now? - -5 -00:00:39,720 --> 00:01:24,990 -Wes Bos: Yeah, right now I am, I'm thinking about what my next course is going to be. I've got a, I've got a couple that I'm interested in doing. And near the top of that list is doing sort of intermediate advanced react course. And along with testing, and Redux, and all that stuff, I'm looking at doing one in graph qL, which, for those who aren't, aren't totally up on it. Graph. qL is sort of like the next steps from rest, where you just have one endpoint, and I'm sure we'll do a whole show on it. So I just been just been researching different graph. qL packages, different services, writing your own. We talked a little bit a little bit more about this in the React show as well. So it's one thing I'm diving into right now. What about you? Yeah, so - -6 -00:01:24,990 --> 00:01:43,140 -Scott Tolinski: I just hit up the dinosaur JS conference, which was in Denver this past weekend. And there was just an abundance of excellent speakers from like Tom Dale was there Laurie Voss, Myles borns. Just a lot of great, great people working household - -7 -00:01:43,140 --> 00:01:44,280 -Wes Bos: name. Yeah. - -8 -00:01:44,880 --> 00:02:22,740 -Scott Tolinski: Yeah. Yeah, I think it was one of the it was short and sweet. Right. It was one day. Yeah. Just back to back to back of great talks. And I can't remember last time I was at a conference where every single talk either inspired me engaged me. And I like that. Even the ones that were technical weren't like overly technical. They weren't Yeah, taking the time to go heavy into the code, because that can just, you can slow things down. It was more of this. Like, if you want to look at the code, the codes on the repo like I don't need to show you all the code. Yeah. here's, here's what, you know, my thoughts behind this in this in this way. That's awesome. But no, it was a great, great, great conference. - -9 -00:02:22,830 --> 00:02:26,460 -Wes Bos: So today we're talking about or anything else on your end. - -10 -00:02:27,470 --> 00:02:55,230 -Scott Tolinski: Now I've been I've been working on some some projects here. And there, I'm working on an app for B boys are breakdancers to share them keep their moves in basically a bunch of little tools that you would use for practicing. I'm actually building in like a jukebox in there that pulls from a B boy playlist on SoundCloud. So you can have your music playing through your speakers without leaving this app. Oh, that's amazing stuff. A bunch of minor little features here and there to make this thing better. - -11 -00:02:55,530 --> 00:03:02,520 -Wes Bos: That's cool. scratching your own itch is the best I love building. We should we should do a whole episode unlike stuff you've built for yourself. - -12 -00:03:03,180 --> 00:03:03,990 -Scott Tolinski: Write it down. - -13 -00:03:04,019 --> 00:04:17,510 -Wes Bos: Yeah, add it to the Edit to the left. One of my first big Angular apps was I used to buy and sell rode bikes and and the way that it would work is you go on the classifieds. Whether it's here it's something called Kijiji it's like sort of an eBay subsidiary, but like Craigslist, or whatever. And what I would do is I would just like look for bikes in the suburbs, and buy them up, and then bring them back to Toronto and sell them for quite a bit more. And I did that all for a whole summer of university. I make quite a bit of money. Yeah, what I had built was I built this app in Angular, where in the node it would node would scrape. Kijiji, because they have an RSS feed, but it was only updated like once a day. So this would scrape the the classifieds every, I don't know every two minutes or so. And then it would send me a text message as soon as there was something new that matched my query. And then I would I would message them and before most people could even ever see the ad I was already conversing with the person that would buy it. And I like I learned so much from that just because like I was like, just scratching my own itch of like how do I get these bikes before other people buy them and it worked out super well for me. - -14 -00:04:18,420 --> 00:04:51,120 -Scott Tolinski: Yeah, it's oddly enough they mentioned that because my my homie Ben chef who started the level up tutorials with me back in the day. That's exactly how he learned Angular two, but the same like same thing but with baseball gloves. Apparently there's like a huge market really like really high end baseball gloves. And so he was like buying and selling these these rare or hard to find or expensive Japanese baseball Really? It was Yeah, it was it was totally wild. But yeah, same thing. He wanted to pick up Angular and dove into it that way. Sure. - -15 -00:04:51,140 --> 00:05:06,360 -Wes Bos: That's that I love those those stories because it's not like you start off doing like FUBAR and Angular. It's like, no, I yeah, I need I need to get texted when these things hit. Kijiji before everyone else gets them, so that's pretty good. Pretty good reason to learn Angular. - -16 -00:05:07,010 --> 00:05:09,810 -Scott Tolinski: Yeah. Using your powers for good and evil. Yeah. - -17 -00:05:10,530 --> 00:05:50,400 -Wes Bos: Cool. So today we are, let's kick it off, we're going to talk about sort of the big three, which is style of sass. And last, we're going to talk a little bit about what post CSS is, and hopefully clarify like, what it is and what the differences are, and, and whatnot. We're going to talk about storing your CSS in different files, extending class names, sharing CSS, we're not going to be diving into like, styled components, or using BAM or anything like that, because we were going to, but then we realized, like, this is an entire show in itself. So we're just kind of gonna stick on like tooling and sharing CSS, and then we'll, we'll have another one on like approaches to writing maintainable. - -18 -00:05:50,550 --> 00:05:56,520 -Scott Tolinski: So yeah, otherwise, this would be like a three hour a marathon have a podcast. - -19 -00:05:56,760 --> 00:06:05,310 -Wes Bos: Why don't we Why don't we kick it off by just saying like, what are our own personal preference? If we were to start a project today, what would you write it in? I don't know. Why don't you kick it off, Scott? - -20 -00:06:06,000 --> 00:06:38,910 -Scott Tolinski: Yeah, my, my personal CSS stack I always start with is stylists and post CSS. I love stylists, for its simplicity. You know, some people get put off by not needing the brackets. But in all in all reality, you could use stylist the same exact way that you're using sass, and it's going to work fine. There's just some little features and stylists that I like a little bit better, which we can go into. But yeah, so personally, I like stylist for the pre processing. And then I use post CSS for all of my auto prefixing. And that good stuff. - -21 -00:06:38,970 --> 00:07:54,600 -Wes Bos: Cool. I'm I'm pretty much the same way. I absolutely love stylists. And what I've found is that most people don't know what stylist is, it's sort of the like, the little guy in the room. And for those who don't know stylus is, it's like sass exactly same as sass, except the the brackets around your code block are the curly braces, the the semi colon, but after your property value in the colon in between your property, your value, those are totally optional, you can have them, which is great, because then you can just paste regular CSS into your file. But it can also be done indentation based, which comes back to the whole pug and Jade thing versus something like ej s, I absolutely love it. A lot of people don't like it. I have stopped using stylus for my own tutorials. Just because of it's just too much of a headache. People get hung up on it. People are very messy with their indentation when they're first learning to code. And it's unnecessary hang up for them to get into. So I've switched to using sass for all of my coding all of my tutorials. I use sass for most of my client work. And then any personal project any stuff that I'm doing where I'm the only dev on it. It's hundred percent stylists. - -22 -00:07:55,260 --> 00:08:24,300 -Scott Tolinski: Yeah. And what are your thoughts on maybe like a stylist style? I know some people have very specific like, I don't use the brackets. And I don't use the semi colons but I use colons. I always use a colon. And I picked that up from shoot. I picked it up from Cory Simmons is the creator of last grid as well as what was the other major grid? He did? He's done some of the best grid systems out there. And last grid was just as like latest one. Well, I think - -23 -00:08:24,330 --> 00:08:28,740 -Wes Bos: Yeah, so what's the idea behind only doing that and not the other ones? Well, there's - -24 -00:08:28,740 --> 00:09:11,899 -Scott Tolinski: some instances where you have like, either like a transparent mixin. Or you're using a Datsun tax on a variable. Yep. Like if you're using objects in stylus, which function for people who don't know, they function exactly like an object in JavaScript. So you build your your object with nearly the same syntax. And then you can access it with just so you could have your colors object colors, dot Facebook, whatever. And that gives you the Facebook color. And if you are using that dot notation, you need a semi colon or else the whole thing breaks. Yep. So you know, my my view is if the code is going to break sometimes without a colon, just use a colon every single time and you don't have to worry about it. It's sure you shouldn't have to - -25 -00:09:11,899 --> 00:09:14,730 -Wes Bos: maintain like these like edge cases where it doesn't work. - -26 -00:09:15,409 --> 00:09:22,590 -Scott Tolinski: Yeah, exactly. So that's my my thoughts on it. I mean, I love not having to have brackets and all that stuff. So yeah, you know, - -27 -00:09:22,620 --> 00:09:47,149 -Wes Bos: yeah, I'm I'm a totally naked kind of guy. I don't do any of the any of the semicolons, colons, brackets, anything like that. I just go all in on, on doing in it do every now and then. But like maybe three or four times I've actually run into issues. Other than that it's been been perfect for me. And the actually, the compiler is really good as well. It'll yell at you when you do something wrong. - -28 -00:09:48,210 --> 00:10:00,049 -Scott Tolinski: So what's your what's a killer feature for you on any of the CSS preprocessors I have one for stylist for me which is like the reason why I use it but look, what's your killer feature? Yeah, like really draws you I - -29 -00:10:00,049 --> 00:10:47,820 -Wes Bos: think so for stylists, sass and less. At the end of the day, it doesn't really matter which one you have I get email from people all the time, like, which one should I use? It doesn't matter use any of them. Really, for me, the killer feature for, for me and for everyone is variables, obviously, mix ins, which are really, really handy, and nesting your selectors inside of each other. So those are sort of like the big three for me. It's funny, because I also have been bitten by nesting. And I've also been bitten by the mix ins too many mix ins too many custom stuff where it starts to become a bit hard to reason around. But I think used appropriately, all three of those things are absolutely a great reason to use styles less or sass. - -30 -00:10:48,509 --> 00:11:45,149 -Scott Tolinski: Yeah, yeah, absolutely. And, and one of the things I like most about any of the pre processors really is being able to take some of that stuff with you. For instance, like on instead of using a CSS framework, I have, like several things that I take with me from project to project, whether it's just a just a set of shadow variables, you know, and anytime I want to use a shadow, I don't have to think about it. I have an easing package named Eazy E's. That allows me to just like toss into all of my easing, like so you don't ever have to think about easing and I have to bring in anything else. Right? Like, here's the stuff I like to use. Yeah. So for me, like being able to just take those things with you from project to project, and in developing sort of repertoire of your own sort of common patterns and code stuff is is so useful. Yeah. One of my favorite features, it's stylist that doesn't get enough credit. Is this bubbling up variable? Have you used this? No, - -31 -00:11:45,419 --> 00:11:46,559 -Wes Bos: I haven't told me about it. - -32 -00:11:47,039 --> 00:13:05,850 -Scott Tolinski: Yeah, so this is really one of my favorite features. And it's probably the only thing keeping me from using SAS on a regular basis. Because I can't I can't live without it. Basically, the way it works is it has to do with it bubbles up in your nesting. So let's say you have a parent and the parent has, let's say, let's think of a good example. Let's say the parent has a background of black, or Okay, maybe a button is a better example here, sorry, let's say the button has a background of black, you would also want the border to have a background of black maybe in the initial state, maybe it changes on hover or something like that. But let's say instead of having to say what you do is you essentially are able to use a value of another property as a variable for a value. So if you want the border to be the same color as the background, instead of saying border equals black, you can say border equals at background Ah, and that makes it so the border is the same color as the background. And regardless, if you change that, it's always going to pull that value from the background. And it bubbles up by you could be in a nested selector all the way down. And if you were to say at background, it looks up the nesting tree until it finds a background and then gets that value. That's - -33 -00:13:05,879 --> 00:13:30,899 -Wes Bos: super cool, I actually haven't used that before, what I would do is I would just set a variable and then use that variable three or four times over. But that's really neat. And I'm assuming you can also feed that into some of the functions that Silas gives you. Meaning that like you can throw it through a transparency function or an opposite function. So if you if it's like a certain read, and you want to get like a complimentary or an opposite color, that red, you can just feed it a function - -34 -00:13:31,559 --> 00:14:02,399 -Scott Tolinski: is super useful when you have use cases like Like I said, with buttons, right where maybe your button color isn't a theme color it's going to color using throughout your site, maybe your cancelled button has this red color that you only use on that button, you can just encapsulate it there, or I use it. I use it all the time. I use it for all sorts of different weird cases where you're sort of like, well, this needs to be the same as this. Maybe if you're creating a square, you can say the height is equal to the width. And that way, they're always staying in tune that way. - -35 -00:14:02,429 --> 00:14:30,659 -Wes Bos: Yep, exactly. Or if you're doing like, like a ratio, you can say, take the height and multiply it by 1.6. And then it will, it'll always be you don't have to redo the math for each of those every single time. It's one thing I always do is I'll take like the the background color, and then I'll put like a slightly darker border around a button. And then I'll just feed that background color straight into the darken function and darken it by 10% or something like that. And then it'll, it's just automatic. - -36 -00:14:31,350 --> 00:14:35,490 -Scott Tolinski: Yeah, so do you use you use things like the the functions the darken and light Yeah, - -37 -00:14:35,610 --> 00:14:47,850 -Wes Bos: I use I use darken, lighten alpha, which which which takes a hex and then we'll convert it to RGB and then put the alpha right on it so you don't have to manually do that yourself. I'm a big fan of those color ones. - -38 -00:14:47,850 --> 00:14:56,789 -Scott Tolinski: Instead of that I use the just RGB a function. So RGB a will also take a hex Oh is RGB, a stylist? - -39 -00:14:56,789 --> 00:14:57,779 -Wes Bos: Right. - -40 -00:14:58,409 --> 00:15:01,019 -Unknown: And I think in sass as well. SAS Yeah, yeah. - -41 -00:15:01,169 --> 00:15:02,549 -Wes Bos: Oh, I didn't, I didn't know that. - -42 -00:15:03,029 --> 00:15:15,840 -Scott Tolinski: So just because the only reason I do that is because it's short RGBA rapid hex comma, year opacity level, whatever. Yeah. And then instead of light and dark and I use the plus and minus a lot, I don't know if you use those no other Tell me - -43 -00:15:15,840 --> 00:15:24,419 -Wes Bos: about that. This is great. This is like, why I want to do this stuff, not because I know what I'm talking about. But because I just want to like pick up little tips and tricks from people like Scott. - -44 -00:15:25,019 --> 00:16:31,590 -Scott Tolinski: Yeah, so so this is what I've been doing. Since I started SAS, instead of using a lightened function in a darkened function, you don't get necessarily the percentage, you're you're actually adding to the color value, you know, the 255 to zero value. And if you were to say, the hex value, let's say you were to have, you know, any given hex value, you could say plus, and then a number, let's say plus 10. And it's going to bump up all the values by 10. So that that becomes a complimentary later. Ah, so I'll use it all the time on hover states for buttons just by saying, on hover, it's the same hex or variable minus 20, to make it darker, and then you That's it, right? You I'm not saying it's 20%, darker, it's just Hey, it's 20. Darker, I usually do it by eye. I'm sure there's, there's ways you could do it with the science of numbers. You just say, hey, nit minus 20, or minus 10, or something is good for me. Yeah. But it's a nice little shorthand. You don't have to work with the function, you can just throw it in anywhere also works. And stylists not quite sure if that works, unless I haven't had enough experience. Yeah, - -45 -00:16:31,590 --> 00:16:51,929 -Wes Bos: usually what happens is, if there's not something built into the standard library of sass, or less than somebody will go out and make a function or a mixin, or whatever it is that you call it in your language that takes in a value and then you can do a little bit of math with it and return the values from that mixin or from that function. - -46 -00:16:52,799 --> 00:17:08,809 -Scott Tolinski: Yeah. So yeah, I guess maybe we should dive into some of those core features, like what makes CSS preprocessor sitting worth it overall? We mentioned variables, mix ins and function. Yep. So maybe if we want to touch on each of those maybe just very briefly for the people who are uninitiated - -47 -00:17:08,809 --> 00:18:00,180 -Wes Bos: Yeah, exactly. So variables should be fairly straightforward. You declare a variable like red, and then you set that red to be your specific red because then when the client comes around, or you change your styling, you don't have to do a huge Find and Replace. That's kind of like a general rule. In programming. If you're doing a massive Find and Replace, there's probably something that you can do to improve your workflow. And in my case, I will always set up I'll have like a variables file, which I put all of my my variables into. And then I have the specific red and yellow and everything that I'm working on. One neat, one neat thing about stylist is that you can overwrite built in colors. So the built in blue, and red and yellow, those are terribly ugly. So I always overwrite them with my version of blue. And then I don't have to remember what the variable name is, I just know that it's - -48 -00:18:00,240 --> 00:18:29,060 -Scott Tolinski: blue, or yellow. Right. And that's another great feature of stylist I know, this is like a stylist. Pump up our like that you don't have to have the variable declaration in front of it sound like $1 sign. Because of that, you can just use the word blue, like you said, overwrite the blue. And that's primarily how I define my colors and stylist. It's just by using the common like word version of them without, you know, like, my black is what 111? Yeah, exactly. - -49 -00:18:29,060 --> 00:18:49,099 -Wes Bos: I always write the D flat black. And that's something I take with me to project product. If you look at Scott or II sites, you'll notice that they always have like these like, little details about them that you don't necessarily look see at first. But once you look into it, and that's because those little details take some time, but they they come along for free on every single project that we do. - -50 -00:18:49,770 --> 00:18:59,130 -Scott Tolinski: Yeah, exactly. They take it with you. So we have variables mix ins are essentially just reusable chunks of code, right? - -51 -00:18:59,790 --> 00:19:15,390 -Wes Bos: Yeah, so if you've got For example, I it's funny because I use mix ins in both in my pug or Jade, as well as when I'm doing my cuts looking at his water like what's in my water. - -52 -00:19:16,310 --> 00:19:27,829 -Scott Tolinski: It's I've got the giant booze giant like German boot full of water. It's like it's made, it's like two liters. absolutely massive. Okay, - -53 -00:19:28,099 --> 00:20:03,800 -Wes Bos: anyways, mixins. Like, let's say for example, you have like a generic styling that you do to a button where you set the background, you set the padding, you set the width, you set some, a whole bunch of different stuff needs to happen on that button. And rather than either reuse that class name over and over again, or rather than copy, paste that code over and over again, you can create a mixin that is sort of like a function it can take in an argument if you need it, and then it will return to you a bunch of bunch of generators. code for that specific selector and and apply it to that selector. - -54 -00:20:04,440 --> 00:20:28,530 -Scott Tolinski: Mm hmm. Yeah. And functions similarly are sort of, can be used in the same way where it's either spitting out code, but you can also be manipulating values, functions very much like a function in JavaScript, where you're, you're passing it in something, or maybe nothing at all. And it's returning something else. Yeah. So like I said, you can have it spit out code, or you can have it manipulating a value. Whereas - -55 -00:20:28,609 --> 00:21:21,660 -Wes Bos: a mixin will always return CSS, or other stylists, right. Yeah. So that's Yeah, they can be used interchangeably. But functions can be any value at all, return a string or a number, or anything, it is actually one fun thing I've used it for is when I do when I do my conference talks, the way that I make my my conference talk slides look decent is that I take a whole bunch of random photos. And then I have this SAS function, or sorry, the stylist function that will generate a random gradient. So I have a whole bunch of like complimentary colors. And then it goes through that array, and will generate random gradients at different angles and different values. And it always looks really good. But every time I generate my slides, it gets a fresh set of different gradients and different photos on it. So it's kind of like computed, but also looks designed at the same time. - -56 -00:21:22,410 --> 00:21:42,630 -Scott Tolinski: Yeah, and that's part of the brilliance of this stuff, right? I mean, it doesn't matter which CSS preprocessor you're using, but you can do stuff like that with it. And there, you're developing a system where it's always going to look good. And it's always going to be different, but you don't have to touch it, you know, you set it and forget it. And I love that stuff. That's a great example. - -57 -00:21:43,230 --> 00:21:50,060 -Wes Bos: That's true. Yeah. What are what else? Do we want to talk about these things? Obviously, maybe nesting real quick. - -58 -00:21:50,910 --> 00:22:53,790 -Scott Tolinski: Yeah, so and nesting, basically, it functions where the output CSS is what it would be if you're the class thing? Well, okay, let me start over on this one. So the way nesting works is basically, you have your normal CSS, which typically inside of a given class distinction or distinction, you would have your properties, right, but inside of nesting, you can have another class or another identifier in there. And that identifier is going to be as a child of that parent. So let's say you had x as a as a parent, why as a child, and you would have the nested in your CSS, the output and CSS, instead of being the x and y as two entirely separate declarations, or would be you have the X the code with x, and then you'd have X space dot y or whatever, and then the code within there. So it allows you to essentially scope your code together over like a parent selector. - -59 -00:22:53,910 --> 00:23:49,349 -Wes Bos: Yep. And it's pretty neat, because you can do Parent Child selectors, you can also use and this is true in both sass, and stylus, probably same in last as well. Or you can do ampersand. So like, let's say you have like a hero. And then you want to do a direct descendant selector, which is the the the opening or closing angle bracket. So you want to say like hero, and then the direct h4 of that not any direct descendant of it. So you can do an percent angle bracket h4, and then that will generate you a direct descendant CSS selector inside of it. Or you can do, let's say you have button and you can say, button and then nested inside of that you can say button and ampersand dot large. And then that will select anything with a class of button and the class of large like it has to have both of them to be able to be true. - -60 -00:23:50,069 --> 00:24:36,450 -Scott Tolinski: Yeah, and that ampersand is something that you use constantly, is one of the greatest features being able to access the parent selector through that. Yeah. And another thing that people sometimes use, but I found can be a little bit a little bit troublesome here and there is actually using the ampersand in your class. Oh, I do that, right. Yes. Yeah. So let's say you were to have your parent, which would be let's say, hero, and you want your child to be hero hyphen, blue, or I don't know, blues, a bad example, Hero hyphen, large, right? You have a larger version of the hero. You would use the actual ampersand in the declaration. So you'd say dot ampersand or not. Wait, would you say dot there? - -61 -00:24:36,480 --> 00:24:40,800 -Wes Bos: No, you would dot and you put it in the where the hero would go. So - -62 -00:24:41,010 --> 00:25:36,660 -Scott Tolinski: Oh, right. Yeah, because it already has it. So you would just say ampersand hyphen, large, and that would give you the hero hyphen large as your other class name. And then you don't have to write out the word hero over and over again. Yeah. And the only which allows you to have really nice scoped Like very directly scoped thing, the only bummer is, is that if you're looking for hero hyphen large in your code, you can no longer find it. Because it doesn't exist. generated. So then you would just maybe find hero and then scroll down to you find here are a hyphen large or something. Yeah, yeah, I ended up having I did that, like on a large project. And I did that, like 100%. And then when I was and having to change stuff, I was like, gosh, darn it, I can't find anything. So I've said stop doing that. But it's definitely like a really cool technique. - -63 -00:25:36,690 --> 00:26:54,240 -Wes Bos: Yeah, maybe, maybe let me talk about my, my pros to doing that. So it's really big for those who write them. And we'll talk about Batman in the future one, but one of the downsides to nesting in these languages is that your selectors get extremely long. And that is terrible for specificity. So if you've ever like by convenience, just ness that a whole bunch of stuff inside of something, and then you come back later and try to override it, and you're like, damn it, the selectors so specific, I have to use important everywhere to actually get it to work. So and that's the last thing you want to do exactly is important. So if you've got, let's use a hero, for example, if you say dot hero, and you give it a padding, and a background, and then you say ampersand underscore underscore title, that's going to generate you a selector called dot hero underscore, underscore title. And that selector is not going to be inside of your hero, it's not going to be dot hero, space, dot hero, whatever, it's going to just be a top level selector, which really cuts down on any specificity wars that you're going to have. And then all of your selectors are all one class deep, and you don't have the only specificity that you're going to get is if you have code that comes later in the actual document than earlier. - -64 -00:26:54,990 --> 00:27:25,829 -Scott Tolinski: Mm hmm. So yeah, another just a one of the reasons why those those things, bam, and all of those they can be tough to use is because you have those really long selectors. And this is just one of those great things that saves you a little bit of time here and there. Yeah, it's really what these are all about. Right? It's just saving you this time. So we talked a little bit about features. Maybe we should just talk a little bit about a comparison, we express that we both like and use sass and stylus. What about less? What's your experiences there? Yeah, - -65 -00:27:25,890 --> 00:28:56,069 -Wes Bos: so actually, my own personal Wes Bos calm runs on less, because I think I built it back in 2010. And at the time, the whole idea of like a build pipeline, I'm sure it was around, but at the time, it was like, make files. So I was like, that's a pain in the app. I need something that's PHP. So I built my site in WordPress, and then I code a little function into my functions dot php That said, if the person is logged in, then just use the there's a less PHP library, the default ones written in JavaScript, but there's also a less library. And it will just recompile it right on the server for me, which is pretty neat. And I was I was pretty happy with that. Obviously, I've much more sophisticated build pipelines now. But at the time, that was a nice way to do it. I don't sure what the the core differences are, I think variable star within an app sign instead of $1. or nothing in Silas. What else it's it is written in JavaScript, which was a big plus. Because SAS was initially written in Ruby, which a required Ruby in your pipeline. And B, if you had a big, big sass project, it was like, I remember we had one that was like six seconds every time you saved. And it was brutal. Yeah, but But what happened is they rewrote sass in C. And now you can use it in mostly most of your tooling is done in JavaScript anyway. And it's super fast. - -66 -00:28:56,069 --> 00:29:30,859 -Scott Tolinski: Yeah. And my experience with less was, I feel like it is less full featured, there would be things that I was trying to do. I can't give explicit examples here, because I don't remember that there was a time when we were diving into it a little bit. And I was just a little bummed out at the stuff you maybe couldn't do with it. I think it they hooked a lot of people early because one of the when people were still confused about the build process thing when that wasn't really a huge thing. Right? Yeah. In standard projects, there was a what were the real time on? - -67 -00:29:31,680 --> 00:29:35,849 -Wes Bos: It was like a JavaScript file that you just paste into your, your head. - -68 -00:29:35,880 --> 00:29:38,880 -Scott Tolinski: Yeah. And so it doesn't compile it compiles it on runtime, it'll compile - -69 -00:29:38,880 --> 00:29:42,930 -Wes Bos: it in the browser. Yeah. Which, unfortunately, a lot of people shipped to production. - -70 -00:29:43,530 --> 00:30:50,220 -Scott Tolinski: Right. Yeah, right. Exactly. And they said, Oh, you shouldn't do this or production. But like, sure enough, people were just like, Oh, it's easy. Just toss the spotland here and it works. I don't have to think about it. Yeah, so I think that and even bootstrap was originally unless for a little bit before they move to sass and I actually Actually strongly petitioned against using less on a major project we did for the forbes.com. redesign. Yeah, they were like when I got on the project they were using, they were using less than me and this other developer were just basically we went to our boss's office and we're just like, Listen, like, we need to, we need to use sass. Like, we neither of us are comfortable and less and we were the main core developers on it. So yeah, like I said, I can't speak enough on the the differences. I've never just I never got into it. I started with sass personally. Back when sass and Hamill were like, Oh, you don't say sass without saying Hamill. Yeah. And that was like the Ruby thing. Everybody's using sass and Hamill. So, for me, I started with sass and never really looked back. And yeah, stylists and pocius. I - -71 -00:30:50,220 --> 00:31:09,420 -Wes Bos: think I think it is I'm just looking at the website, and it looks pretty full featured. I'm sure there's some like little like nitty gritty things that will you would run into Yeah, but it's like, it's still actively developed. So I, I would probably be pretty happy to join a project on it. And these days, if it already was using last I'd be like, that's fine. We can we can figure Yeah. - -72 -00:31:09,420 --> 00:31:17,609 -Scott Tolinski: Right. And I'm sure now all these things have have grown. Yeah, you know, I guess that that experience is several years old. So you know. - -73 -00:31:18,420 --> 00:31:43,890 -Wes Bos: So let's, let's switch over to talking about post CSS. Because when this came out, people were a little bit confused. There's a little bit of uproar, where people are like, seriously, I just learned sass. And now you're telling me to switch to something different. And I think there's a bit of miscommunication as terms like, what is post CSS and when you might use it, and do you use them together? So I know, what do you want to explain what it is? Yeah. - -74 -00:31:44,099 --> 00:32:07,109 -Scott Tolinski: So post CSS is really just like it declares itself a post processor. So instead of a pre processor, and that might just be like a little bit of syntactic Oh, you know, way to differentiate itself. But it's really the last step in your CSS pipeline. And you can definitely think of it like Babel for CSS. Do you say Babel by the way? - -75 -00:32:07,800 --> 00:32:12,060 -Wes Bos: It's, I say Babel, but it is baulk. But I just for - -76 -00:32:13,170 --> 00:32:13,890 -Unknown: I'm to - -77 -00:32:13,890 --> 00:32:14,490 -Wes Bos: invest. I've - -78 -00:32:14,490 --> 00:32:51,480 -Scott Tolinski: always said I know how that is I get it. I know, like things MySQL or MySQL, whatever. You know, everyone has their way of saying things. But yeah, so basically, it's it's taking your your CSS code, it's not taking your stylist code wherever it's taking your CSS code and augmenting it. So the best use case for it really is Auto prefixing. And anyone who's been around before autoprefixer is new, how much fun it was to always have to type all of the different CSS prefixes. I remember back in the day, there was CSS three for me is that the site when backward, - -79 -00:32:51,720 --> 00:32:55,200 -Wes Bos: CSS CSS three please doc Lemos, Paul Irish, - -80 -00:32:56,069 --> 00:33:03,540 -Scott Tolinski: right? Where you would go to this website to copy all of the browser prefixes, because you don't want to type them all out. And, and - -81 -00:33:03,900 --> 00:33:15,750 -Wes Bos: Mozilla had it backwards, like if you wanted to do top right? border radius, it was like WebKit, top border, right radius. And Mozilla was like, WebKit border, right? - -82 -00:33:15,840 --> 00:34:02,190 -Scott Tolinski: It's like opposite and those just terrible nightmare. So you, you are always writing these prefixes. And your your code was just ugly, because it was just just endless amounts of properties that were like taken up in prefixes. So what post CSS does it allows you to forget that like those things ever existed, and you can just write your CSS with border radius. And with autoprefixer, and post CSS, you can say, hey, just give me you know, CSS that's compatible to the last three versions, or last two versions of major browsers, and it's going to spit out the appropriate prefixes for you. Like I said, you know, you can pretend that they never existed at all. But it's basically a way of extending core CSS features. And it just changing the way that your CSS is output overall. - -83 -00:34:02,910 --> 00:36:15,980 -Wes Bos: Yep, exactly. It's, it's, it's kind of like Babel for CSS like you can any whereas like sass lessons, stylists are entire libraries. And if you want a feature to be added to your library, you have to petition the the people or you have to submit an issue and you have to talk about I would like to get this feature to be added. Whereas with post CSS, it's just a framework where by default, it does nothing. And then if you want it to do something, you need to get one of these transforms a plugin for post CSS to do what it is that you want. So one hilarious one I've seen is like Canadian style sheets, yeah, because we put it we put it in color. And so if you just want to write your CSS, like you were British or Canadian, you can and then it will take your ncss in you again, you could you could write this in sass, it'll compile the CSS. And then once it's at the CSS time, then you put it through one of these post CSS s transforms, that's going to turn it back into the regular CSS. So regardless of what weird thing your team is trying to do, whether you're writing your CSS in a specific way, you don't have to like hope that there's a plugin for that. In sass, you just write your own. in there, you're all written in JavaScript, you can write your own transform, right? And they're cheap. I mean, they're small, cheap little plugins you can add in, there's already a gigantic library of little ones. And they all just yeah, work together. And you hardly have to think about it, you just install? Exactly. Yeah, I'd say that. The one downside to it is that some people do use post CSS, plus 50, plugins in place of sass, lesser styles. Because there is a nesting one, there is a variables plugin that you can get there is anything you can think of, you can just sort of like come up with your own syntax, and then it will transform it to standard CSS for you. The one downside to that is like you have to bring everything yourself. Whereas with sass, less and sass, you know, all the features that are available to you, and you can just go ahead and use them. Whereas with post CSS, you must include a plug in, do the research, figure out if they all work together as you go - -84 -00:36:15,989 --> 00:36:43,170 -Scott Tolinski: along. Yeah, which is one of the reasons why I think a lot of people use x preprocessor with post CSS, right, because then you could all those core features that you're used to using, you don't have to add it all. And then you also can then throw in anything you want that exists in post CSS. And if you look at the post CSS GitHub repo, there's a ton of links to different plugins. So there is just an absolutely massive amount of stuff out there that you can transform your CSS with. - -85 -00:36:45,150 --> 00:36:50,420 -Wes Bos: That's awesome. So is there any plugins that you yourself, uh, aside from using - -86 -00:36:51,420 --> 00:38:16,080 -Scott Tolinski: autoprefixer, I use a one called rucksack, which is, it's sort of like a package for stylists are one of those where you get a whole bunch of just new new powers. You know, some of the stuff I don't use, like, it gives you access to all the easing curves. So you can use the word ease in cubic or whatever, to get the easing q curve, cubic, instead of having a variable for that. There's a lot of different automatic prefixing says there's different quantity pseudo selectors, so that it gives you new pseudo selectors, like at least at most between, so you can say exactly four, or if this is, at most four, then you know, do something, there's, there's some really cool shorthand positioning stuff that I use a lot. So if you want to give this like a position fixed at zero, and zero or something, instead having to do long form, position fixed, you can say position, position, fixed, 00, whatever, all in one line, similar, like you would with like a border radius shorthand. So it's basically it's not giving you a ton of crazy features, but it's giving you things that you know, are cool and nice to have in in CSS. - -87 -00:38:17,850 --> 00:39:02,040 -Wes Bos: That's pretty neat. That that quantity queries one, I think, is pretty neat. So if you're hearing this for the first time, you can use at least or at most, or, you know, you have like any child and whatnot. But somebody figured out that if you have a combination of nth child selectors, you can say like, if there's four items in this div, then make them 25% wide. But if there's three items, make them 33% wide, or, or you can do all these crazy combinations together. And the writing of them yourself is is nuts. It's all like these, like sibling selectors. But you can you can use the quantity queries, pseudo selectors, which are not part of CSS, but it will just convert them into whatever the equivalent CSS and child selector is. - -88 -00:39:02,069 --> 00:39:11,690 -Scott Tolinski: Yeah. And that's really the the strength of this this stuff, right? I mean, sass and stylus, they, you know, they they don't give you things like brand new pseudo selectors. - -89 -00:39:12,780 --> 00:41:04,130 -Wes Bos: Yeah. And what's kind of neat about that is that CSS is is changing. We're getting a whole bunch of new stuff added to CSS, whether it's, we're getting variables, so we already have variables added to CSS, or getting our RGB ba or actually hasn't been confirmed yet. It might be a R. And what that is, is you can use alpha, like you can put opacity on a hex code, meaning that like if you do pound, whatever block is 000000. You can also add some opacity to that by either putting FF or 00 on the front and FF i think is totally transparent. Yeah, I think so. Yeah. Something like that. But you can if you understand how and how to count and check as a decimal, you can apply a value that will convert it. And that's cool because there's this thing called CSS next, which is just a whole bunch of these post CSS plugins put together. And they are trying to take everything that is coming to CSS, and convert it to whatever the the equivalent that we have it today, much like baybel, takes ESX ESXi 78 s 100 code and converts it into es five code that works in all the browsers. We're trying to do that with CSS next. Obviously, not everything is doable, because the browsers don't have to support things like variables before a little work. But you can start coding with all these new color functions, media query ranges, like you can do media query ranges, what I'm just looking at the the website right here, custom properties, overflow wrap, system, UI font, it'll do all these new things that are coming to the browser and then compile them down to whatever the equivalent - -90 -00:41:04,130 --> 00:41:34,830 -Scott Tolinski: Yeah, and that's really I mean, the benefit of modern tooling for the web, right? It takes us stuff that, you know, I remember sequin CSS three features came out, I remember working for an agency that was just like, oh, there's not a chance we'll ever be able to use these, you know, yeah. And it takes us stuff that we had to worry about all these different edge cases and old browsers, and it makes it way more accessible to us on on more projects, because you can write the code the way it's intended to be written and without having to worry about what the actual browser is reading, you know. - -91 -00:41:36,600 --> 00:41:45,060 -Wes Bos: Cool. Well, let's, let's move on to talking about do you want to talk about these libraries? Or do you want to go into structuring, - -92 -00:41:45,090 --> 00:43:15,860 -Scott Tolinski: let's go into structuring with any of these preprocessors it's really nice that you can break out your files a lot easier. And Long gone are the days of like importing CSS files, which was like never super performative are a great idea anyways, so with this, you can import your your files, and instead of having an import at runtime, and possibly having to, you know, download another file, it imports it on compile time unifies, it brings everything in allowing for being able to just break out your code, right, like Wes said, keep your variables in a file, keep your functions, and Nixon's and maybe your typography rules, I like to personally I have sort of, I have an elements file, which is like base styling for all elements of a foundation style, which is like a base styling for all of my foundational stuff, I guess, where you put your CSS reset sort of stuff, and how you'd want to just sort of base styles. And then sometimes it depends on the project, split things up into, like, if we're working in reactive per component file, some people like to keep those per component files with the components themselves further. So that way, you have that structure, sort of like a Ruby on Rails sort of thing, where you'd have your, your template, your CSS, and everything all in one directory. So that sort of style of keeping your styles close to your components is really, really nice. But how do you keep track of yours? Do you do a per component? Do you have like a one big file? Do you have lots of little files? Yeah, - -93 -00:43:15,860 --> 00:43:58,080 -Wes Bos: I've been in the last little bit, probably last year or so I've been totally componentized everything. So I will have a underscore hero dot CSS or underscore store dot CSS and underscore widget. And then what I do is I write all of the code that is associated with that component in that file. So when it comes to editing piece of my website, I don't think about what page is that on, I think about what component Am I trying to edit. And then I crack open that actual component CSS, and I've really been liking that you have a lot more files at the end of the day, but each file has maybe 20 3040 lines of code. And it's much more manageable to be able to do that - -94 -00:43:58,080 --> 00:43:59,520 -Scott Tolinski: you can find it that I do. Yeah. - -95 -00:43:59,969 --> 00:44:10,620 -Wes Bos: Yeah, it's it's super easy to find all the things that you're looking. And if you have source map set up, your browser will tell you which partial you have written that actual piece of sass in. - -96 -00:44:11,550 --> 00:44:15,989 -Scott Tolinski: So do you want to talk about what a source map is? I think this is actually good. Yeah. So - -97 -00:44:16,110 --> 00:44:58,500 -Wes Bos: a source map, I always like to say source map is your treasure map for bugs, where you're authoring your code in a file, like a sass file, a stylus file, a JavaScript component, a react component. And then the browser doesn't understand sass or anything like that. It only understands CSS. That's why it gets compiled. So source maps will sort of tell the browser, I know that you think the error is on line 11 of style dot CSS, but really, they authored this in underscore hero dot sass. And when somebody sees it in dev tools, or when there's a console log or console error, show them where they authored it, not where the browser actually ends up seeing it. - -98 -00:44:58,920 --> 00:45:22,650 -Scott Tolinski: Yeah, and that's pretty crucial. I mean, when you have a large CSS project, and maybe you're not quite sure where something is, or properties being defined, maybe it is something like up the chain and an elemental or something like that you can use just always know where to look for, it just saves you a little bit of time, but definitely something you want to have in your build your build process. - -99 -00:45:23,640 --> 00:45:59,070 -Wes Bos: Yep, I've got a question for you. And this is not in our notes. But I'm just curious. Now I thought about it. How do you handle media queries, because something that SAS allows you to do and Silas is that it allows you to write your media queries in a selector. So you say I have a hero, and you background red color blue, whatever it is. And then you can say, at media min width 500 px, and you can say like, when this hero is less than 500 pixels, then change the padding or the width or whatever it is that you need to change. Yeah. And I've sort of been bouncing between the two, I want to hear what you have to say - -100 -00:45:59,070 --> 00:47:22,739 -Scott Tolinski: I use my nested so I keep it all in the component. So if I have the parent component, you know, this is the header or something like that, I would then immediately have all of the header specific styles. With a simple breakpoint, I use a library to make it really easy for me called rupture for stylists. And it's really nice because the media query syntax instantly becomes way less verbose. And you don't have to worry about having 1000 really long statements, it's just it's plus below, and then a pixel value or plus UI, like above, and then a pixel value, or I think you can do in between two, which I don't often do to be honest. But you you just end up having plus above your, you know your variable for your breakpoint. And so because of that being such a simple one liner, I sprinkle it in anytime, I tend to not rewrite selectors, so I'm not going to have the break point. So if I have the break point for header itself, I'm not going to have all of the children rewritten in each break point, I'll have the children underneath header, and then the children will have their own break point. So yeah, basically, I err on the side of using a lot more media queries in my actual stylist than using less and having to rewrite selectors and that kind of thing. - -101 -00:47:23,580 --> 00:48:14,130 -Wes Bos: It's true, I find if I used to rewrite all my selectors, because I like to have them in a separate file. But it was a nightmare of trying to like re structure all of my CSS again. So I to write my my selectors. And sometimes people are like, oh, but that's too many media queries. But it doesn't matter how many media queries you have. There's no rule that that says that you need to only have six, or like iPhone media query only. Yeah, you can go bananas with them if it's simple. To do. So with something like a plus above or plus below. It becomes really, really simple. Yeah, and, and sort of on that point, I find myself writing a lot less media queries ever since I've picked up Flexbox as well. If you write really good Flexbox code, and hopefully grid code pretty soon as well, my immediate my, like, mobile styles are pretty, pretty small. Yeah. - -102 -00:48:14,130 --> 00:48:28,290 -Scott Tolinski: And that's, and it's got to be the Flexbox has to be like one of the single greatest additions to my life in coding, like, I can't express just how much easier it makes life constantly - -103 -00:48:28,410 --> 00:49:30,570 -Wes Bos: cool. Now, I want to get your your hot take on extending versus adding class names. So this is if you've ever looked at a website, and you've used source, and you see like dot column, column, 12, column, small six, column medium, seven, and it's got like 7000 classes on the div. That's because they are writing a whole bunch of CSS selectors, and then applying them to your markup by just just by giving it a class name. And then the other way around that is that you can, you can write some CSS like a button. And then you want to write another button like button large, you could either give that button, a class of button and button large, or you could just give it a class of button large. And then your button large selector would extend button, it would take everything that it has, and then sprinkle on like font size 100, or padding. 20 pixels would just boost it up a little bit. So those are sort of two different classes of thought. I'd like to hear what you think about that. - -104 -00:49:30,570 --> 00:50:14,670 -Scott Tolinski: Yeah, the heartache is that I don't use them. And I don't worry. There's so many like, I guess there's so many other ways to do that stuff. Like I if I'm going to be reusing or extending that code. I oftentimes just throw things in a Nixon and like if I have a button mixin and you can use a transparent mixing in stylist where you hardly even know it's there. Right. So it's like that base coat. I would just I would throw in a mixing. I don't never see a super need for it. I don't I err on the side of less classes personally, then more micro classes, and just rely more on the features of the preprocessor. But half the time where I'd want to maybe use extend, I probably just make a mixin instead. And don't even think about extend. - -105 -00:50:15,300 --> 00:50:59,070 -Wes Bos: Yeah, I did it on one project. And I regretted it just because debugging was kind of tough. One thing that it does do is if you extend something, like if you have a button, and then you extend it on button large, and then you extend it on whatever, then your your selectors start to look like dot button, comma, dot button, large comma, dot button, blue comma, and it just goes over and over and over again. And it's not the end of the world. It's not, it's not going to make your CSS any bigger. Some people think that that's that happens. But that's what jesup does. If you have, if you have a same selector eight times over, then it's going to just jesup it into small and you it's the equivalent of only writing at once. So it's not a big deal. I just haven't been a huge fan of actually using it. Yeah. - -106 -00:50:59,070 --> 00:51:18,719 -Scott Tolinski: And again, it's like tooling, right? It's like tooling, like jesup. And all this stuff is CSS preprocessors or post processors, whatever. It just lets you work, how it makes sense to you and your team, and lets everything else get out of the way. So you don't have to worry about things like how many class names are on something, you know? - -107 -00:51:18,960 --> 00:52:36,840 -Wes Bos: Yeah, exactly. All right. Um, let's talk about sharing CSS. And this is something I haven't figured out yet. Maybe Scott, not either. But I've worked on a handful of teams. But one thing that I haven't figured out is like, what's the best way to share CSS in like a node module? Or if you're working on like an open source project, like flippity, which is a slider plugin, and it comes with some CSS as well, like, Well, how do you include that in but also keep that up to date. So some of the options are is you can just copy and paste it, I can go into GitHub, view raw copy, paste it into your own mixin. And sort of try to keep that up to date. You can use something like Webpack, where you import the CSS into your JavaScript when you need it. And then your web pack will compile that out to a CSS file for yourself. There was a project called eyeglasses, by Chris who built compass back in the day, that was a really popular SAS project doesn't seem to be in active development anymore. I'm not totally sure where that's at. I don't know if it got any uptake. This is a whole bunch of different stuff. I don't know, Scott, you have any thoughts or solutions on - -108 -00:52:36,840 --> 00:53:08,219 -Scott Tolinski: this? I have zero solutions. And my thoughts are that I'm not I'm not doing it a good way. Right? Yeah. Right now. Yeah, you have a project. And half the time these projects aren't using anything special. And we'll just say, head into the, you know, the dist folder and grab the CSS and node module. You aced it. Yeah. And and that's what I'm doing. And I don't like it. You know? Yeah. So I don't know if there is a better solution out there. If anyone out there has a better solution for this. We want to hear about it. - -109 -00:53:09,420 --> 00:53:36,449 -Wes Bos: It's true, especially if you are breaking your your code into smaller things. I guess the React community sort of has the solved because they they coupled their CSS with their components, which is really nice. But then even then, I was trying to use a component that didn't. Didn't couple it, but I was using style JSX. So like, I was like, how do I import somebody else's CSS? That's not the same way that I'm doing my CSS. So - -110 -00:53:36,510 --> 00:53:37,170 -Scott Tolinski: yeah, - -111 -00:53:37,170 --> 00:53:39,030 -Wes Bos: I ended up just copy pasting. Right, - -112 -00:53:39,090 --> 00:53:47,370 -Scott Tolinski: exactly. And that's why you do that, because it's like, at the end of the day, you know, what's the better option at this point? I guess. So, - -113 -00:53:47,489 --> 00:53:52,290 -Wes Bos: if you've got thoughts tweet us, I'm at Wes Bos esbls. Scott is at - -114 -00:53:54,030 --> 00:54:02,310 -Scott Tolinski: S kolinsky. Or the easier at level up, tuts. That one's easier, then you have to deal with the Polish last name. - -115 -00:54:03,570 --> 00:54:05,699 -Wes Bos: Well, let's jump into our sick - -116 -00:54:05,699 --> 00:54:06,660 -Scott Tolinski: pics. - -117 -00:54:07,920 --> 00:54:23,340 -Wes Bos: This is the section of the show where we tell you some sick things that we're working with right now. And I'm actually just going through building a entire new laptop I just got a new MacBook and I opted not to Time Machine over everything but but set it up fresh. That's the - -118 -00:54:23,340 --> 00:54:25,770 -Scott Tolinski: only way. That's the only way to do it. - -119 -00:54:26,100 --> 00:54:32,520 -Wes Bos: Oh, I was about nine or 10 YEARS OF TIME MACHINE upgrades. But I there's just I - -120 -00:54:32,520 --> 00:54:52,320 -Scott Tolinski: had all these like random dot file application support folders from apps that haven't used in eight years. So every time I have my hackintosh and every time I upgrade the OS like when I upgrade to High Sierra, I'm gonna wipe it fresh clean and start over and Oh yeah, I'm a little obsessed with that. That fresh, fresh startup. - -121 -00:54:52,380 --> 00:56:11,340 -Wes Bos: It feels great and a lot of my like random like Bluetooth issues have stopped. So I don't know if it's related or not. So my pic today is I had been using something for my OSX menu bar called bartender, and what it lets you do is hide icons behind a drop down, it was pretty great because you could just keep your, your OSX you could keep your icon bar nice and clean. And for me, I often plug into a projector, and, and teach. And often I have too many icons that I can't even click them because they're they're hidden on a small screen. So I've moved over to this new one called vanilla. It's by Matthew Palmer, he's he actually built this really sweet emoji picker that you probably see me use in my tutorials. And it's just so simple. It's it goes into your, your menu bar, it's a little dot, and you hold down Command and drag the icons to the left of the.if, you don't want to see them. And to the right of the.if you do want to see them and then you get this little Chevron that you click and it will show you everything. And you click it again or leave it for a couple seconds and it will close again. It's they have a free version. And if you want it to start up on on boot of your of your laptop, or if you want it to auto hide, then you pay I think like four bucks or something like that. It's totally worth it. - -122 -00:56:11,430 --> 00:56:16,710 -Scott Tolinski: Yeah, I love I love stuff like that. I'll pay for apps like that any day of the week. You know? - -123 -00:56:16,739 --> 00:56:27,150 -Wes Bos: Yeah. Oh, yeah. Any day that I actually think it's a little bit cheap, like I probably would have paid 1740 for it. Go grab it. It's called vanilla by Matthew Palmer - -124 -00:56:27,180 --> 00:57:55,469 -Scott Tolinski: though. What do you got sick nice, sick pig is a power blocks, which their website says it's the world's best dumbbell. And I like have to agree with that I'm going real world here I've done some digital sick picks. Power blocks basically is a way that it it's the smartest solution ever. It combines like a dumbbell, that would typically, you know, if you want to have a whole bunch of dumbbells, you've got to buy a giant set. And they take up a ton of space. And they're all heavy and all this stuff like that this combines all of that into a single dumbbell. And you can change it in five pound increments all the way from like 20 pounds, or two, I think it goes down to 10 pounds, actually 10 pounds all the way to 90 pounds at five pound increments. And it's all it takes up the space of one single dumbbell. There's like me Yeah, it's amazing. And they're so they're a little expensive, right, but the amount of one space and just I do you can do a billion exercises with them, because you suddenly have every single weight from 10 to 90 pounds, and you can change them out in a matter of seconds. We my wife and I share these things. So we'll both be doing two entirely different workouts with two entirely different weights. But it's the change out is so fast that you can change the amount of weight and just pass it back packet passing back and forth. And you're not like spending a whole bunch of time you buy one set of them, and you can extend them by adding more and more weight to them. - -125 -00:57:56,219 --> 00:58:00,780 -Wes Bos: So how much is a set of these? For someone who wants to get super buff? - -126 -00:58:00,810 --> 00:58:40,290 -Scott Tolinski: Yeah, if you want to get super buff Man, these things? Yeah, these things will take you there. Let me see. I'm on Amazon right there. Let's see. They go anywhere from this is 129 to 500 bucks, but let's see. Oh, these are the expansions? Yeah, it looks like if you want like the 50 pounds set, your it's gonna cost you like 300 bucks. I can't imagine that. This is I think they have several different versions of that. I don't remember paying three, we have a 70 pound set. And I definitely didn't pay $428 for it. But you can buy it in very different various different sizes. - -127 -00:58:40,680 --> 00:58:48,870 -Wes Bos: And you can buy expansions because like, there's no way I need a 70 pound immediately or ever in my life. Yes, you - -128 -00:58:48,870 --> 00:58:53,730 -Scott Tolinski: do. You need you need this. If you want to get buff, what do you need the 70 pound that - -129 -00:58:54,000 --> 00:58:55,920 -Wes Bos: that truly is a sick pic. - -130 -00:58:57,989 --> 00:59:02,640 -Scott Tolinski: Thank you. Thank you. Yeah, I wanted to get real world with it. This time I've been to digital. - -131 -00:59:03,630 --> 01:00:45,510 -Wes Bos: Awesome. I need to get I did my backpack last time. So all right. Cool. Um, let's round it off with the shameless plugs. This is the part of the show where we shamelessly plug stuff that we're working on or stuff that needs attention. And obviously, we both build video courses. So I'm going to plug one of my free ones right now. It's called JavaScript 30. It's been sort of, I'd really say about six months ago, and I've been really, really happy with what it is I spent about two years collecting different JavaScript exercises that could help people get better at JavaScript, because that's how people would always ask me like, hey, why site like understand FUBAR bars, and I can loop over? Like a list from one to 10 but like, how do I actually build stuff like what I want to do stuff in the browser, and I want to learn I just want to like sharpen my sharpen my tools. I want to get better at JavaScript. So I put together 30 different exercises that take you between 20 minutes and an hour to build and they're all really fun. They're all real world, they all touch upon different stuff from working with the webcam all the way through to some browser API's. It's no, the whole thing is that there's no compilers, no frameworks, there's nothing that needs to be done. You just open up an HTML file and get coding. So are you using it? Yes. Six in that? Yep. Yeah, it totally everything is done in EF six, up to the latest standard. So it's pretty cool. It doesn't work in older browsers. But like, that's not what this thing is. I have other courses that explain how to do that. But this is just how do we get up and running? Oh, wow, I just have 200,000 signups for 101, or 1109 100,000. - -132 -01:00:45,510 --> 01:02:06,980 -Scott Tolinski: That's a ton. Yeah. So my shameless plug here is a series I it's actually a combo deal that I just released. Basically, I have a new sketch series, my sketch videos on YouTube are like the most popular sketch videos on YouTube. So they were really old. And I'm pretty embarrassed by them for how old and old they are. So I re recorded the whole series, it's now the sketch course, or the sketch guide, depending on which image you're looking at. Apparently, I have it, this type here, but it's the sketch course. And then it's a combo with that, and UX prototyping with principle, which is another series I've built on a tool called principle. So it allows you to get up and running with sketch app. So you can design some really cool apps. And then it allows you to get up and running with principle, which allows you to take those sketch designs and make interactive animated prototypes. So you have literal sketch documents or web apps that you can click on the menu and see the menu slide out and then save that as a gift or a video or something like that. But so either way, it's total UX design and prototyping series. So that's on store dot level up tutorials, comm it should be on the homepage, sketch course and UX prototyping with principal. - -133 -01:02:08,640 --> 01:02:16,170 -Wes Bos: Sweet looking forward. I should check that out. I actually did your sketch one, like probably three or four. When did you release your sketch one on YouTube, - -134 -01:02:16,199 --> 01:02:20,010 -Scott Tolinski: your initial 2013 or 14? Yeah, a lot of Yeah, - -135 -01:02:20,040 --> 01:02:35,969 -Wes Bos: it was a long time ago. And it's great. It just got me like up to speed on all the different hunks of scash. And in, in how to how to use it sketches like a kind of like a Photoshop replacement for it's only on the Mac, but it's, it's amazing. I use it every single day. - -136 -01:02:36,150 --> 01:02:38,699 -Scott Tolinski: Yeah, I literally use it every single day. - -137 -01:02:39,930 --> 01:03:05,400 -Wes Bos: We will have actually we should have a whole episode on designing or whatever, something like that. Awesome. Well, let's wrap it up there. We're just about hitting an hour. So until next time, we'll see you on the next syntax. Head on over to syntax.fm for a full archive of all of our shows. Don't forget to subscribe in your podcast player and drop a review if you like the show. Until next time, peace - diff --git a/transcripts/Syntax30.srt b/transcripts/Syntax30.srt deleted file mode 100644 index 8dcaf1ae1..000000000 --- a/transcripts/Syntax30.srt +++ /dev/null @@ -1,524 +0,0 @@ -1 -00:00:01,290 --> 00:00:07,260 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there strap yourself in and get - -2 -00:00:07,260 --> 00:00:08,970 -ready to live ski - -3 -00:00:08,970 --> 00:00:12,599 -and West boss ridiculous ridiculous seasick - -4 -00:00:12,630 --> 00:00:19,140 -Wes Bos: tasty tree. That's sweet. That's sweet. Exactly. Where did Where did Where to? Hell yes, - -5 -00:00:19,200 --> 00:00:27,780 -Scott Tolinski: we we predicted ridiculous 38 inches man. Because it's long because it's long taste - -6 -00:00:30,330 --> 00:00:58,380 -Wes Bos: syntax and that is huge thanks to Andre matter rang ma da ra n g and he just tweeted us this like 10 minutes before we started recording. And it is a syntax soundboard. Which is amazing. It has. He went through a whole bunch of podcasts and clipped out different times when we said things well, yes, shameless plugs. Where did that come from? - -7 -00:00:59,400 --> 00:01:00,240 -Scott Tolinski: is so good. - -8 -00:01:00,360 --> 00:01:01,980 -Wes Bos: The funniest thing is I don't even - -9 -00:01:02,010 --> 00:01:05,480 -Unknown: remember saying it's 38 inches map of these things. - -10 -00:01:05,580 --> 00:01:09,230 -Scott Tolinski: I don't say fear. I was like 38 I don't even know what that could have - -11 -00:01:09,230 --> 00:01:12,719 -Wes Bos: to do. It was 38 inches that you're talking about? I have - -12 -00:01:12,719 --> 00:01:13,560 -Unknown: no idea. - -13 -00:01:13,560 --> 00:01:16,370 -Scott Tolinski: I'm very confused. I'm gonna have to like listen to every episode. - -14 -00:01:18,360 --> 00:02:05,250 -Wes Bos: You know, what was 38 inches please tweet us because we have no idea. But this thing is amazing. So hopefully we're gonna be peppering Nick pics word, we're gonna be peppering in these annoying ass things throughout the episode. So we're gonna do something a little bit different. And that is sort of a q&a show, we put together a little form that would collect questions from Twitter. And we got a whole bunch of questions. And Scott and I just went through and picked out a couple of interesting ones. And hopefully this will give us a bit of a better insight into stuff you're looking for. And some of the stuff is bigger stuff. So we know that we're going to dedicate entire show to but some of the stuff is just tasty, little, little question and answers that we can go through. Today's episode is sponsored by a dev lifts and Freshbooks Douglas is going to get you fit and Freshbooks is going to get you financially fit. - -15 -00:02:05,399 --> 00:02:05,969 -Scott Tolinski: Yeah. - -16 -00:02:06,959 --> 00:02:12,930 -Wes Bos: We'll talk about them a little bit more, partway through the episode. So hello, Scott. How you doing today? Hey, doing - -17 -00:02:12,930 --> 00:02:22,560 -Scott Tolinski: super, super good. Yeah, I hit up a ninja warrior type of gym yesterday was fine. Yeah, it was a pretty sick. Yeah. - -18 -00:02:26,070 --> 00:02:30,840 -Wes Bos: That's pretty sweet. So like, what kind of stuff did you do to jump across water and - -19 -00:02:30,870 --> 00:03:09,420 -Scott Tolinski: gather flames. There is a severe lack of like, fire and water features like this is an HGTV here. If there's no no fire and water features, but there was a lot of jumping and hanging like monkeys. And of course, I use the opportunity to use the trampoline, which I'm a huge fan of anyone who's ever been to any of my house. Like they're my last house. I used to have my trampoline up like all year round. And I'm like trampoline obsessed. And and yeah, this unfortunately it there's no spot for it in my background in Denver, or backyard. So the trampoline is sitting in storage here. But I brought it with me just in case. - -20 -00:03:10,110 --> 00:03:22,050 -Wes Bos: Just put it out on the street or SAR and like in a random park or something like that. I was going to do that with the basketball net. It's just like we don't have a spot for a basketball nap. But I just want to like kind of during the night install one in the park or something like that and see if anyone notices. - -21 -00:03:22,680 --> 00:03:25,680 -Unknown: Right? Yeah, give it Yeah, open open Newser for - -22 -00:03:25,680 --> 00:03:46,830 -Wes Bos: your community. When I was a kid we used to get we take the trucks off our skateboard, and we would do air boarding on the on the ski on the trampoline. Oh, yeah. Like these incredible like tre flips and load finger flips and whatnot. It was so cool, because I was like garbage skateboarding in real life. But if you can put it on a trampoline. Yeah, - -23 -00:03:46,860 --> 00:04:19,519 -Scott Tolinski: yeah, actually, we did the same thing. But we taped like duct taped old shoes to escape board. And then, uh, then we tied like a ski rope or wakeboarding rope to my deck because my parents had a high deck. And we would use it to practice wakeboarding trips. So Oh, one of the coolest things is you, you stick your arm behind yourself, and you'd hold on to the rope. And then you jump in the air. And all you do is just pull hard on the rope, and it would just send you spinning like as fast as possible. Like so many times, it was completely outrageous and dangerous. - -24 -00:04:19,980 --> 00:05:06,889 -Wes Bos: Oh, man, that sounds super fun. I need to get back into that. Oh, yeah. Cool. So we're gonna kick it off now with some some of the questions. They're all over the place. Some of them are JavaScript related. Some of the Microsoft skills related. Some of them are just HTML actual. That's what will kick it off is what are your favorite features coming to HTML 5.2. So HTML is never done and they're constantly adding things and we're getting sort of a bit of a minor update to HTML and most of those stuff is not that all that exciting. Like you can put an h2 tag in front of a, like a legend tag or something like that. But one of the cool things about mind blowing one of the cool things is the ability is this thing. You think called the dialog box? And I was just talking to Scott about this, and you hadn't you hadn't seen this yet, have you? - -25 -00:05:07,259 --> 00:05:08,970 -Scott Tolinski: No, not until this morning. - -26 -00:05:09,810 --> 00:06:42,810 -Wes Bos: Cool. Well, let me explain what it is. So when you want to do like a modal pop up, like, are you sure you want to exit or you want to buy something and you pop something up every but you have to craft that from hand every single time. So what's coming is this new tag called the dialogue tag, and you simply just open close the dialogue tag, like you were a div. And then that element dialogue element has the ability to, it opens up to new API's open and close. And you have the ability to use JavaScript to open and close your dialog box. And that's it, it's actually kind of neat, because there's like, sort of like, you go native, and you get like the alert box and the prompt box and and the Select and they'll suck because you can't, they're native and they're great, but they you can't solve them at all. And then on the other hand, you have all these custom made things where they're not standardized at all. And sort of in the middle, we have this new dialog element that is just sort of like a div at the end of the day, you can style it however you want. You can position fix it, it's not positioned. It's it's static by default. So you can position fix it, you put the buttons in it yourself to open and close it, you can put borders and backgrounds and you can put elements inside of that like form tags, or your own clothes, buttons or, or anything that you could possibly want. It's just sort of like a standardized way to implement a pop up dialog box with the dialog and then it's up to you to both implement the look and feel there's some default styles, but they're kind of ugly, as well as the functionality. You still have to do that with JavaScript. - -27 -00:06:43,170 --> 00:07:14,220 -Scott Tolinski: Yeah, I think this is cool. Because like, I mean, really, there's some things like with form elements and things like that, that that if the native styles can take over and do like, native, fully native styles, like a select list or something like that, that experience is always better. Yeah. So here's hoping that this kind of leads to the same thing with models, because as we know, models are, you know, they're kind of all over the place. So yeah, I'm pretty, pretty psyched that this exists. I'm gonna try to try it out. Now that I know that it exists, but I think it looks pretty cool. - -28 -00:07:14,279 --> 00:07:48,540 -Wes Bos: Yeah, I could see like the browsers right now. It's not bound to like hitting escape or anything to close it. But I could see like, maybe a mobile browser implementing a gesture to automatically close that sort of thing, and maybe just adding a little bit of extra on top of it. And, and it's it's kind of time that we have this thing too, as well, because like we have custom elements for absolutely everything else, right. And if you want to, accessibly implement a modal box, you kind of have to go through a whole lot of ARIA stuff, because there's no proper way to describe what a dialog pop up box looks like. And now now we have that. - -29 -00:07:48,690 --> 00:08:22,350 -Scott Tolinski: Yeah, nice. Yeah, I found some of the additions to be sort of, I don't know, stuff, they wouldn't necessarily get excited about, like having multiple main tags, as long as all of them but what are hidden. So it's like now you can use multiple main tags in the DOM. But all of them the one have to be hidden. I don't really have a need for multiple main tags anyways, and their explanation is that it's single page apps, like some of them might be in the DOM, but hidden. Yeah, I guess I get that. It's just not necessarily a use case for me. Because, yeah, in reactors, - -30 -00:08:22,440 --> 00:08:26,850 -Wes Bos: I don't know, this. Is something more for like a lower level library author to use. - -31 -00:08:27,000 --> 00:08:42,270 -Scott Tolinski: Yeah, yeah, maybe exactly that. So yeah, stuff like that, or the invalidated stuff. So like, you could no longer inside of paragraphs, use inline blocks and line tables, or floated or position blocks inside of paragraph tags. - -32 -00:08:42,960 --> 00:08:46,590 -Unknown: You can no longer use an inline block. Is that true? It says, - -33 -00:08:46,830 --> 00:09:01,160 -Scott Tolinski: the only valid children of paragraph elements should be phrasing content, this means the following types of elements should no longer be used within a paragraph, inline blocks, inline tables floated positioned blocks. - -34 -00:09:02,580 --> 00:09:31,380 -Wes Bos: Oh, this means that types of elements should no longer be nested inside of inline block. Oh, but so if you have a span and you want to give explicit height or width to that span, you can't do that anymore. So I guess that's true. Um, I don't know. Like, you probably shouldn't be doing that either. Just use let the content flow itself. So I guess that's a good use case. But I could see that people getting hit by that here and there. I don't know if browsers will ever explicitly go back and break that. But this is the new spec. - -35 -00:09:31,619 --> 00:09:41,970 -Scott Tolinski: Right? It I mean, I guess it does make a paragraph function more like a paragraph of text. Right? You know, maybe some people might have accidentally used a paragraph and maybe meant have used a div. - -36 -00:09:42,050 --> 00:10:02,730 -Wes Bos: Yeah, that's true. You sometimes like see people reach for a paragraph element when they're not sure what element to reach for. So this is making it a little bit harder to to get into that. Neat. Let's move on to the next one. What you want to grab one off. Oh, that one was from Igor. Thank you, Igor. Oh, no, that wasn't That was from Jordan Jan's and not eager, sorry. - -37 -00:10:06,540 --> 00:11:24,600 -Scott Tolinski: Smooth. Okay, let's see this week. See, if I'm not looking at you, I don't know if it's you or the soundboard because they're the same level of my headphones right now. Okay, so here's a fun one, how do you retain all the information you absorb like a sponge. And this is kind of an interesting one, I think it assumes the the that we do retain everything I personally retain information more like, I'm not quite sure, something that only retains a little bit of what goes through it because you end up learning so, so much, and then he latch on to the bits that you latch on to. And then you'll maybe have to go back and latch on to other stuff as you go. But honestly, for me, the reason the way that I found to learn the best is to put yourself in the trenches a little bit and struggle through it and get your hands dirty and actually work on something. So if I'm trying to learn something, in particular, to actually start coding in it sooner rather than later, and hitting hitting issues and solving those issues and sort of working like maybe a clueless detective, what rather than like, somebody who read all the documentation, and is totally confident without ever ever written a line of code, you know? - -38 -00:11:24,810 --> 00:12:22,770 -Wes Bos: Yeah, yeah, I think what's important here is that, like, I don't necessarily retain information. I'm very, I guess, I'm very poor, the amount of times I found my own StackOverflow questions. Yeah, my own Stack Overflow answers, or my own blog posts in my own Google searching is I it's embarrassing how much that comes up. And that's I guess that's a benefit to blogging. It's like, write it down before you forget it, because you will forget it. But I think important point here is that you should really focus on understanding high level concepts. How do things work? What should you what pattern should you take in a specific way? And then you can always look up syntax and specific implementations of something because like, you don't have to memorize all the lifecycle methods of reactor, you don't have to memorize what the background shorthand is in CSS, because you can look that up. And eventually it will, you'll just remember it, but don't sweat that it's not nearly as important as high level ideas. Yeah, - -39 -00:12:22,770 --> 00:13:03,480 -Scott Tolinski: I 100% agree with this. And in fact, usually when I'm learning concepts, I'm constantly trying to either come up with a metaphor for it for something that I understand or relate it one to one to something I already understand. So this new concept is just like this other thing, I kind of learned, but it's different in these sort of ways. Or, oh, well, this actually functions like a river. And for these reasons, but like reattaching, that knowledge to something that you already know, helps you paint that picture, your brain already has those connections. So instead of having to form new connections, you're just attaching it to connections that already exist. It will make recalling it easier and make understanding the content much easier. - -40 -00:13:04,109 --> 00:13:10,080 -Wes Bos: Exactly, exactly. Exactly. Exactly. Gotcha. All right. I'm - -41 -00:13:10,080 --> 00:13:14,430 -Scott Tolinski: sorry, everyone for this because this is this is the greatest thing in the world. - -42 -00:13:15,450 --> 00:14:44,970 -Wes Bos: We're super, super excited about next one. I'm sorry, that last question was from ozanne. That's a really cool name. Oh, Caan was that and firma Canadians. Next one is from Blake Campbell. What are your favorite CSS library or frameworks, this is something I get asked a whole lot about. People are often surprised to hear the answer is that I actually don't use a library or framework. But I also don't have anything out for them. So I don't use like a bootstrap or foundation, in a lot of cases, because I just prefer to sort of build up my own little mini library of things that I like to use. I have used foundation in bootstrap in the past in quite a few projects. And what I really like about them is that it is a nice foundation for you to nice and cleanly architect an application if you aren't really sure about how to clean the approach building an app in with CSS. And I've also used it when like, I'm just focused on the back end, and I just want to get it up and I need it to look half decent. So then I'll like bring out foundation and add some some of those helper classes onto my elements. But past that, I don't really use it. I prefer just to spend an hour or two making like a whole bunch of little helper classes that will apply some nice CSS to me. And then I find in the long run, I've worked on a lot of apps that have us Foundation, and almost always end up regretting using something like that. And that's just personal preference. Obviously, that's not the use case for everybody. - -43 -00:14:45,150 --> 00:16:21,050 -Scott Tolinski: Yeah, but yeah, yeah, I mean, I've noticed the same thing especially like bootstrap and foundation there. There comes a point when an A projects been worked on deeply enough that there's just so much customizations and overrides and stuff made to the framework that You might have been better off writing that code from scratch, rather than extending a framework, you also have to think about all that extra stuff you're bringing along with you, for instance, a lot of those things include a whole bunch of different layouts. And how many of those layouts are you actually using? I mean, the CSS, skidding generated exists for that stuff. So if you're not using it, you know, that's just wasted space. So for me, yeah, I sort of go through and do that I, I look at my design, I create, I create some basic layouts, I create some basic helper classes, I create my base styles. And that's pretty much it. I don't use any frameworks. Really, the place that I do is kind of outside of CSS and React Native, I use native base, because React Native is really tough to get. Well, like following the design guidelines for both platforms at once is not some so much fun. Exactly. So like having a library to just does it all for you. So native based on React Native is a really nice framework, especially because the stuff you're overriding is mostly like colors and fonts, and maybe style specific stuff. So you get to stay within the compatibility guidelines. So yeah, I don't know, I've used skeleton, I've used bootstrap, I've used Foundation, I don't particularly I haven't necessarily chosen to use any of them on my own projects. Yeah, and now that we have CSS Grid, I mean, a lot of times you would use some of the stuff just for the grid framework, or - -44 -00:16:21,900 --> 00:16:30,990 -Wes Bos: just for the the layout itself. And that's totally not necessary anymore. CSS Grid will, will totally replace you need for for any of these layout frameworks. - -45 -00:16:31,200 --> 00:17:00,180 -Scott Tolinski: Yeah. And it will actually, here's a good use case for these frameworks, a hobby project that is simply just a hobby project. And maybe you're learning this, this thing to learn some JavaScript framework, right? You throw bootstrap on there, you don't have to worry about the sizes taking up, it automatically is going to make it look decent. So you don't have to worry about the styles. And then you don't have to spend time writing CSS for a side project when you're not trying to learn CSS or make it you know, something bigger. So I mean, that that's a good use case. And - -46 -00:17:00,180 --> 00:17:25,890 -Wes Bos: you can you can also go out there and buy these like for like 20 bucks, you can go buy like a bootstrap admin framework. And it's got like, everything you could possibly want for a back end admin forms and login forms and password resets and listing of users and all these things. And if you're just trying to focus on building an app as fast as possible, because you're you've got you're running out of money or whatever it is, then then totally reach for one of those things. - -47 -00:17:26,090 --> 00:17:27,240 -Scott Tolinski: Yeah, totally agree. - -48 -00:17:27,240 --> 00:17:32,220 -Wes Bos: Thank you, Blake Campbell for that one. Next up, - -49 -00:17:32,490 --> 00:17:35,430 -Unknown: do want to hear from a sponsor, right? No, - -50 -00:17:35,430 --> 00:20:39,050 -Wes Bos: yes, we do want to hear from the sponsor. So let's talk about deadlifts. deadlifts is a sponsor of had on many times. And if you want to hear quite a bit about more about Daedalus, definitely check out the episode we did on fitness and nutrition. So dev lips is JC and fat. And JC is a developer and he's also giving us personal training certificate. And that is a personal trainer. And they're on a mission to make developers healthy. So they are in sort of the the fitness and nutrition space. And they are entirely focused on developers and how they live their lives and how they can get both in shape as well as healthy. So the thing that they are offering up is a sort of a personal training and personal nutrition plan. And I myself went through it probably about, oh, five months ago now and it's been working great. So you have a consultation with them. And based on what your goals are, maybe you don't want to go to the gym, you just want to work at home, then they can, they can make you a training plan just for working at your home or for me, I like to go to the gym, but I can only go four times a week. And I travel a lot. So what they did is they made a just a four day a week, 45 minutes, plan that I I just go to the gym, they tell me exactly on which day what I need to work out and what I need to eat, they recommend a specific nutrition plan for you. And I really like that because it's like the perfect amount between like I just watched a bunch of YouTubes with these meatheads have been working out for nine, nine years. And like the total opposite, which is like I paid $900 for a personal trainer in the gym. And I don't really want that because like, like I can watch YouTube videos, I can figure out what the exercises are, I just need someone to, to take a look at my life, take a look at my goals and to figure out what I need to do in order to hit those goals. And then just then I've got my plan and destiny to work my plan. So that's exactly what DevOps is offering you. So if your New Year's resolutions are not coming along, as well as you thought you can sign up for their personal training plan, you can use the code syntax for 75 bucks off and that's good through March 1, at which point that that code will go back to 50 bucks. So if you're still listening to this after the fact you can still get 50 bucks off. Along obviously along with that your personal training plan you get access to their Slack, which there is full of developers kind of And eat slack because half the time people are talking about like react methods for sending email. And then half the time people are talking about like, how do I properly use a kettlebell or something like that. So it's pretty neat in order to join that if you just want to join the slack, they're offering that off as five bucks a month as well. So if you just want to join a community of like minded developers looking to get fit as well, you can totally do that in so go to dev lips.io and use the code syntax in order to to get access to this and you can get 75 bucks off definitely highly recommended. Again, I went through it myself, and it's really helped me get in shape. - -51 -00:20:39,860 --> 00:20:43,530 -Scott Tolinski: Nice. Nice LOVE, LOVE LOVE deadlifts. - -52 -00:20:43,560 --> 00:20:45,050 -Wes Bos: Yeah, they're they're really good guys. - -53 -00:20:45,390 --> 00:21:00,350 -Scott Tolinski: Yeah, super cool. Okay, so let's get another one of these going here. I like this one. What are what were some of the struggles you had early in your coding journey? And how did you overcome them from Ryan blow? - -54 -00:21:01,410 --> 00:21:01,920 -Unknown: Yeah, - -55 -00:21:01,920 --> 00:21:02,790 -I like this one a lot. Because, - -56 -00:21:02,790 --> 00:21:51,990 -Scott Tolinski: you know, I guess people do talk about this stuff. But it could be always talked about more just what kind of stuff, you know, people who are further along in their career dealt with or struggled with growing in their skills. And for me, I think one of the biggest aha moments overall in coding for me, was when I figured out how to work with error messages. I remember, I mentioned at some point, I, one of my first experiences working with a server side language in a database was a Magento. site. And I had only ever done static HTML. And I didn't do any research. I didn't know what I was doing. And I would hit like a white screen of death, because probably, maybe there's some something off with the database credentials or something. Who knows? Yeah, but I had no idea how to check the error. And I no idea how to fix the error if there was one. And so I was just like, Okay, I gotta start over. Like, yeah, - -57 -00:21:52,050 --> 00:22:00,120 -Wes Bos: I can't imagine how many times that I googled WordPress, white screen of death, right. Look, could it be anything? Yeah. - -58 -00:22:00,150 --> 00:23:00,660 -Scott Tolinski: And so even there, there's so many questions you see on web dev, Reddit, where people will be like, how do I get like, what's wrong with my CSS? So whether it's CSS, whether it's node, whether it's PHP, or any of this stuff, figuring out how to solve your own problems yourself is like a huge thing that you will struggle with until you figure out how to do it. So yeah, I think that's a big one, that once you get over that hurdle, you can start solving your own problems. You don't necessarily feel like, holy cow, it's not working, what the heck do I do? Basically, the message here is always check the error logs, Google the error, if you don't find anything with the error. I mean, Well, okay, check the error logs, read the error in plain English. And I because there's a lot of times again, where people will come to forum post, and they'll be like, this thing says, x is not defined, why isn't it working? And then you're just like, well, maybe you should look at whereas like, it's defined and see if it actually is defined. I mean, reading giving the - -59 -00:23:01,140 --> 00:23:32,730 -Wes Bos: actual error message is so so important, because it's very scary, especially with no and they just dumped this massive stack trace on you. And almost all the time, all of those lines are in the actual library itself. And for those who don't know, a stack trace will sort of show you the steps up until the error actually happened. That's what a stack trace is. And almost always it's just one or two lines that you actually need. So being able to just take a deep breath and attack that error messages. I totally agree with you. It's super valuable skill. - -60 -00:23:32,969 --> 00:23:41,100 -Scott Tolinski: Yeah. So yeah, troubleshoot. You're learning how to troubleshoot your stuff is a hurdle. And once you get over it, you're going to be a much more confident developer. - -61 -00:23:41,400 --> 00:24:19,080 -Wes Bos: Yeah, I think for me, the biggest struggle I had was just impatience being like, I felt like I was running through water, where I just wanted to make these amazing things. And I just wanted to go through and I would see all these other people just slapping together an app in a weekend. And I could just spent like, four hours trying to get my like, CSS to align properly. Yeah, it is so incredibly frustrating to feel like you're never going to get there. And it's so interesting, how incremental or not incremental, what's the word for when your skills get better and better - -62 -00:24:19,620 --> 00:24:21,600 -Scott Tolinski: at a exponential - -63 -00:24:21,630 --> 00:24:35,880 -Wes Bos: exponential, it gets exponential in your your coding skill gets exponentially better over time, and you become exponentially both better and faster. At the same time with those two things. Combined is synergy. I'm moving my hands around in the air right now. - -64 -00:24:35,880 --> 00:24:38,190 -Scott Tolinski: That means the universal sign of synergy, right synergy. - -65 -00:24:38,190 --> 00:25:15,540 -Wes Bos: So just knowing that it gets better and that it won't you won't be this slow and feel like you're running through quicksand for all the time and getting past it because that's also the the massive hack to becoming a good developer is like, how do you just mentally get past that defeated? slumped Charlie Brown kind of feeling where you're like this, I'm garbage at this, I'm taking so long, how will I ever catch up to these other people? And just knowing that you if you push through that you're going to beat out a whole bunch of other people that will never make it past that, and they're going to give up at that point. - -66 -00:25:16,080 --> 00:25:40,710 -Scott Tolinski: Yeah, it's definitely that kind of race. People see it as like a sprint, you know, the old thing. It's not a sprint, it's a marathon or whatever. Yeah, people are gonna get frustrated or give up or not keep that, that energy up, or that excitement up. And as long as you are excited about what you're doing and pushing through, you're gonna have those breakthroughs and all of a sudden be mister. Yeah, Mr. Mrs. Miss rocket, man or lady. - -67 -00:25:42,360 --> 00:26:05,250 -Wes Bos: Yeah, I think also knowing like, you're gonna have those days where you hate coding. I have those days all the time I had that day, the other day where I just like, was like, This is so hard. I'm not getting anywhere. And I'm so incredibly frustrated and just puts you in a super bad mood. But being able to separate yourself from it's okay to have a bad day. And this is really fun stuff. And I want this to be my career is super important. - -68 -00:26:05,370 --> 00:26:37,230 -Scott Tolinski: Yeah. Yeah. Yeah, speaking of super frustrated, like, I have a, like my first StackOverflow post that I've done a long time, because I'm just like, so frustrated with this node streaming issue I'm having right now. And it never ends. You got to, you got to always, just like you said, Take that how it is? Yeah. Oh, that's that's the life you always have one problem to another. So, uh, yeah, let's check out another one of these. Oh, I did the last one. So you get to pick this one. - -69 -00:26:37,679 --> 00:26:42,120 -Wes Bos: All right, I'm gonna tackle one of the harder ones here - -70 -00:26:42,870 --> 00:26:43,830 -Scott Tolinski: to it. Okay, so - -71 -00:26:43,830 --> 00:27:20,160 -Wes Bos: this one is kind of related to it totally react related to react, and it is what is high order components, render props and reconciliation. And this is from Dragon or tray, gra g a n, it's pretty sweet name to man, everyone's such cool names on here. I'm sorry, I'm gonna, this is not going to be the best explanation ever. But hopefully, it will give you a high level view. And you can go off into the React documentation is really good has lots of really good examples of what this is. And there's some also some good YouTube talks that you can go through it. But I'll give you a high order view of what these things are. - -72 -00:27:20,910 --> 00:27:21,750 -Scott Tolinski: Order components. - -73 -00:27:22,560 --> 00:28:34,080 -Wes Bos: Let's talk about higher order components and render props. And then we'll talk about reconciliation. Because I didn't even know what that was 10 minutes ago, but higher order components and render props. So when you're building react app, you have sort of two concerns. You've got like what does this component do? How does it fetch data? How does it handle changes to data? How does it save data and all that stuff? And then you have this other concern? Which is what does it look like? What does it look like when I render out the actual DOM element to the page? What styles what class names to be applied? How does it loop over multiple elements? And you you have those two things? And what ends up happening is that you sometimes tightly bind, what does it do? And what does it look like it together and then you create another component, like let's say you have a shopping cart component where you need to fetch all of the items in your shopping cart. And then you need to display the items in the shopping cart. And then you want to do like a little widget in the corner that like shows how many items are in your shopping cart and the price? So Oh, my pop, my pop is barking? Hey, no, no. Sorry. What was I saying? That's the - -74 -00:28:34,080 --> 00:28:37,380 -Scott Tolinski: only thing that slows us down on this show is the dogs barking. - -75 -00:28:38,850 --> 00:31:14,760 -Wes Bos: So yeah, these two elements, and you don't really want to overlap the same functionality of fetching the data for the shopping cart twice. So what you can do is you can separate out the sort of duplicate functionality of holding your data and updating your data into a separate component. And then you can create other components that will will figure out what they look like and how they are rendered out to the this the script the screen. And back in back in the olden days, the way to fix this was called mix ins. Or you would just like take this mixing and mixing would infuse some sort of functionality into your existing component and react got rid of those. And new ways to do that were ESX classes. And then now we have high order components, which is essentially just a function that will take in your component of what it looks like. And then it will expose the methods and the state and the data to that sort of child component. So that's what a high order component sort of is. And you will often see that where like with Apollo, you might have a component called with data or in react router. We're not sure if we have one now but it's called the width router. And then you can just export these components and then you can just say export it with the router and then the high order component from the router or the high order component from Apollo. We'll just infuse your, your component with that actual data and functionality, should you need it. Right? Yeah. So stay with me so far, Scott? Oh, yeah, I know, I know, you know these things, but I just you're the only person here to talk to. Then the other way, which is becoming a really popular lately hear a lot about it is render props. And instead of making a header component that sort of wraps your child component, you keep the functionality in the data in your, your, your main component. And then the question of what does it look like, is simply just a property or a prop on your component called render. And this is not standard in react yet. This is just like people have sort of come along the idea of this whole, like, just pass it a component. And then the render prop is usually a function that will pass your state or your data to the child component, and then you just tell it exactly what to render out. So it's a little function to say, with this existing data and functionality. We will work with all the functions, and then I'll just pass down the data that I need to the render function. And then that's, we'll we'll decide what does it look like? - -76 -00:31:16,440 --> 00:31:19,230 -Scott Tolinski: Cool, cool. Yeah, super cool. - -77 -00:31:19,860 --> 00:31:21,600 -Unknown: Word. Cool. Yeah. - -78 -00:31:21,600 --> 00:31:42,660 -Scott Tolinski: And you'll see, I mean, you'll see render props, and like you mentioned and higher order components and a bunch of libraries that you use. So you're probably already exposed to them. Even if you might not be, you might not even know that you were you were using them. Yeah, I mean, think about it react router for like, how do you render inside of a route for a component, but the render prop? Yep. Yeah. So stuff like that. - -79 -00:31:42,690 --> 00:32:57,630 -Wes Bos: Yeah, there's a really good talk, Michael Jackson gave, who is one of the authors of react router, when he sort of explains the whole. We went from mixins to tie or components. And then there's this new idea of render props. And the first time that I like really got to use it was with this downshift library that Kent C Dodds put out. And he's he's an engineer at PayPal. And he did this really cool thing because he made this like, drop down, and the whole downshift. What's it called the whole downshift component. It doesn't render out anything. It's just a functionality. And there's no baked in elements. So it's not like you have to like bend to the specific markup that downshift makes you implement. It's just a whole bunch of data and functionality. And then in order for you to make it show up on the page, you have to give it a render prop and tell it how to render out. And that's amazing. Because you get all the powerful functionality of this sort of autocomplete that downshift gives you without any of the you must use it in this specific way, you can use it in any any way that you would want. It's just render props. - -80 -00:32:57,840 --> 00:33:33,990 -Scott Tolinski: Yeah. And another similar library that I use render props, and all the time as react power plug, which seems very similar in a different type of way that there's like a billion different little utilities, like a toggle component. And the toggle component automatically gives you a toggle function and on off state. And it just makes if you ever need to write a toggle, you'll never have to write this down. It says state update ever again, if you want to use this, this library. So there's a lot of cool little things like that using render props to just totally avoid writing code that you would write frequently. So yeah, love it. Cool. - -81 -00:33:34,050 --> 00:34:00,420 -Wes Bos: And then there was this other question that was asked in the same one, which is what is reconciliation? And I also didn't even know what it was before this podcast. I looked it up. And I'll just link to the article too about it. But it seems to be how does react figure out what changed without having to rerender the entire application. And that is called reconciliation. And the way that react implements reconciliation is in a specific way. So I'll link to that article in the show notes. - -82 -00:34:00,570 --> 00:34:07,200 -Scott Tolinski: Yeah. And that is probably one of the it's one of the reasons you have to use keys for like everything right? I mean, that's like a - -83 -00:34:07,200 --> 00:34:19,050 -Wes Bos: big big so knows exactly what where to. That's Yeah, the reason why we have keys is so that react can keep track of what elements are which and when things change. Yes, the nice efficient way. - -84 -00:34:19,460 --> 00:34:24,330 -Scott Tolinski: dope. And as we all know, React is pretty darn fast. So yeah. - -85 -00:34:24,810 --> 00:34:28,730 -Wes Bos: Blaze and we have a bit of a sound check sound - -86 -00:34:28,830 --> 00:34:31,949 -Unknown: for that reason. Mm hmm. - -87 -00:34:31,980 --> 00:34:35,790 -Tasty. Tasty, is 38 inch shameless plugs. - -88 -00:34:35,790 --> 00:34:37,110 -Wes Bos: Okay, good. - -89 -00:34:39,000 --> 00:37:14,690 -Scott Tolinski: Gosh, darn, it's a great, okay. So this is a question that I really liked this question, not only for how it's how it was asked to us, but for what we also think that the question is actually trying to say the question is, when should you just drop the towel on code which will I'm sorry, Eduardo, if I, if this is, you know, shouldn't be funny, but we are kind of cracking up at that question. So yeah, how should you? When should you just drop the towel? And we assume Eduardo means like, when should you give up on your coat? Like when it's your towel? Yeah. This isn't like a locker room code here. So, yeah, so this is a good question. I mean, I guess it depends on what your project is, right? If this is going to be? I don't know, this is a tough question to answer. Because when should you give up on the code itself, not necessarily like the project or whatever, but the code that you've written. And I say this as someone who's who's given up on a large code base for our level of tutorials. So when level up tutorials was originally written, it was written in Drupal. And it stayed that way, for a long time, at the time, I was working pretty heavy in Drupal. So it was a side project for me at that point. And it was really easy for me to just say, hey, Drupal, go get me all these YouTube videos from YouTube and sort of assign them to different content, to content types, and whatever. And as level up tutorials grew, I want to start to add subscriptions, I want to add all this custom code, and I just found myself hacking Drupal and writing my own modules, more than I would care to. And, yeah, so basically, at some point, I just realized that this code base while I had put a ton of time into it, and it works well for what I needed to do is not going to be there for me in the future, it's not going to be the full on codebase. So at that point, I made the decision to drop that code base entirely start from scratch, and deal with all of the difficulties involved there and just start my own thing. So for me, I could see the writing was on the wall that this code base was not going to be able to take me where I needed it to go. And that's when I dropped it. Yeah, I mean, yes, other things are, if your project is like a hobby project, and it's beyond saveable. I could see that being something maybe sometimes you just so far off in a bad direction, and then you finally had some clarity. And it's a hobby project, you could just throw it all out the window and start over and then move on with your newfound clarity. I guess that makes sense. Definitely, too. - -90 -00:37:15,569 --> 00:38:48,600 -Wes Bos: Yeah, I'm sort of on the same page. I think what you need to do is look at, do I want to scrap this code? Because I think that I could rewrite it better? Or do I need to scrap this code? Because it's actually interfering with the, the the logic of the application or the speed at which we can we can develop the application? Because at the end of the day, we're developers, and it's often easy to forget that we're building things for our end users or for a business use case or for some sort of use case at the end of the day. All right, let's see, let's see, as a business, we're trying to sell t shirts on a website. And should I scrap this code? Because it doesn't look good? Meanwhile, it's totally it's working totally fine. It's selling t shirts. And it's, it's not interfering with the end user? Probably not just leave, let it be until you actually need to touch that piece of the code base again, and then maybe you can rewrite it. But if is it stopping you from rolling out new features really quickly? Is it stopping you from maybe having a nice quick application? Because you could maybe rewrite it in react versus the old one as in maybe like just a server rendered slower version? Something like that? Is it stopping you from from trying new things that you might want you might want to otherwise implement? And I think that's really my my barometer for, should I scrap this specific thing? Or is it working just fine. And I can spend my my time elsewhere? - -91 -00:38:49,080 --> 00:39:14,520 -Scott Tolinski: Yeah. And there's definitely sort of like a cost benefit analysis that you need to go through like, is the amount of time that this is going to take up going to be paid for by, you know, the results of this change? For me, it certainly was by having this new site, this new platform, it was going to be much friendlier for my users. I was able to get more users. Oh, yeah. There you go. Exactly. That wasn't the soundboard. - -92 -00:39:15,600 --> 00:39:16,460 -Wes Bos: Exactly - -93 -00:39:16,530 --> 00:39:20,940 -Scott Tolinski: that one was. In case you couldn't tell the difference. One of those - -94 -00:39:20,960 --> 00:41:08,360 -Wes Bos: was the soundboard. Exactly. Yes. Yeah. I like that. I think that's a good nice little litmus test for for whether you should be rewriting something or not. Yeah. Let's take a break for a sponsor. Let's talk about fresh books. Fresh books is the best cloud accounting software out there. So if you are trying to run a small business, if you are a freelancer consultant, or you're just trying to send an invoice over to someone, I highly recommend using Freshbooks for both sending all of your invoices, being able to bill in different currencies, being able to log all of your different expenses that you have. So this is not just invoice general. Or you could code something like that in JavaScript real quickly. But being able to keep track of all of your clients being able to keep track all your invoices, all of your expenses, there's time tracking built in, a lot of people ask me like, what do you use for time tracking. And when I used to do some hourly billing, what I would do is, you can either use the there's some apps that hook into Freshbooks, and you just click the button, I'm working for this client right now. It'll start counting all your time, you can turn it off, and then once a month, I would take all of my time entries, and then just auto generate that into one big invoice. My client loved that. Because during the day, I would just write what I was working on. And then at the end of the day, they can look at Okay, Wes, build 60 hours this month, and we can really hone down to what were those 60 hours, what were we specifically working on? so highly recommend you check out fresh books, whether you are just a small business, a freelancer or anyone that needs to manage their finances for their business, you can get 30 days free apps, what is it freshbooks.com forward slash syntax and use the code syntax? And how did you hear about us? Thanks so much to Freshbooks for sponsoring, sponsoring. - -95 -00:41:11,420 --> 00:41:18,600 -Scott Tolinski: Cool? Yeah. Okay, cool. So, yeah, I think I hit the last one about dropping the towel. So - -96 -00:41:19,319 --> 00:43:40,650 -Wes Bos: I'll pick up a new one, no, pick up that towel. I'm like this one. What is the best way to get my hands dirty with JavaScript for a JavaScript beginner, this is from Malik, like working on real life, for example. So like, if you're a JavaScript beginner, and you want to use want to get more, more experience and like, well, how should you approach that? Should you build a huge? Should you do lots of little examples? Should you build an entire application? Should you focus on the fundamentals, there's all these different approaches that lots of people recommend. So I'm going to, I'll talk about what I like to recommend to people, and maybe Scott can take a look at his. So my recommendation for this is that don't work, specifically on apps work on on what I like to call pieces. Because, first of all, we're slowly moving over to this whole idea of like componentize applications where you don't really work on an entire application, you work on a specific thing, like a date picker, or an image upload or a photo gallery, or a contact form or all these different things, right. So what I recommend for people is take take yourself out of the complexity of trying to integrate this into an existing application, because that can make make things two to three times harder than they actually have to be. And just work on sort of these nice isolated from scratch examples. So that you can really focus in on the pieces that matter to that piece. And you can worry about implementing it into an existing application at a later point. So that's the whole idea behind my JavaScript thirty.com course, which is just build 30 different things from scratch every single day. And you're going to start to to get the hang of it, you're going to you're going to start to be able to think of your applications as different pieces or different components. And you'll be able to confidently approach a specific thing. And I do that myself, if I want to implement something into an app, I don't necessarily try to do it right away into my big app, I tried to just do a little proof of concept in a separate, usually just an HTML file or a code pen. And then once I've got it working, I can I can start to migrate those pieces over to infusing in my actual app. So I don't know what about you, Scott, what do you think about that? Yeah, - -97 -00:43:40,670 --> 00:45:34,410 -Scott Tolinski: so for me, I agree on everything you just said, I like I like JavaScript, learning and examples that put you more in the browser and less of like, fictional JavaScript land, because yeah, so many, like, obviously, it's important to understand functions, it's important to understand for loops and stuff like that, but how many JavaScript tutorials Have you come across that start with like, let's iterate over a bunch of numbers using a for loop. And the while that stuff's great, you have to learn it. And you have to know the the foundational, the skills, I think it's important also to be excited about what you're learning about. And if you're getting your hands dirty, doing stuff that affects the browser, so whether or not you're you're deciding, like, here's a great example of a project that is small, like a soundboard right soundboard, it's gonna require a little bit of JavaScript, it's going to be fun to work on. And it's small enough chunk that you can not spend an entire month on it, right? you'll you'll spend a few afternoons on it or something, you know, even if you don't know what you're doing, but being able to identify small projects like that, that are interactive in the browser, and exciting are gonna like really drive your JavaScript knowledge because instead of thinking like, Okay, I'm learning this But why am I learning this? You're thinking, Okay, I need to do this, what do I need to learn to do this? Okay, here are the concepts that I should be looking at. And here's how to approach it. And you're going to go through a little bit more like that. Now, obviously, again, I'm before people tell me, you got to learn the fundamentals. Obviously, without a strong foundation, your house falls down. So learn learn the foundations while you're doing this, you know, do those basic foundation courses, read eloquent JavaScript, all that kind of stuff. But like, while you're doing that, also get your hands dirty, with some fun, interactive browser based examples? - -98 -00:45:34,440 --> 00:46:41,940 -Wes Bos: Yeah, I think that you can learn the fundamentals while you're also building something fun, and it goes to this. I don't know, I think in life, you need small successes, and need it to be fun in order for you to get confidence in moving forward with things and some people really prefer looping over foo bar Baz all day and focusing in on I'm not putting that I do put that down, I do put that down. But that's and that's totally fine. I get that. But I do think that many newbies to JavaScript need to be able to have those, those small wins. Because that gives you the motivation to to move forward and to to get excited about this stuff. And that's so so important to just avoid quitting or burning out on this specific stuff. Because it's I don't know, I when I first learned programming in school, like I had one programming class, and we did tic tac toe in SSI. And I remember just like crying because I wanted to make like a website. And I wanted to make like a sweet Tic Tac Toe app, not like one that was printed to the command line. - -99 -00:46:41,999 --> 00:47:08,850 -Scott Tolinski: Right? Exactly. That always that always bugged me about those classes. Like I took an engineering one on one and like, yeah, yeah, you did nothing that was visually exciting. And as a visually exciting, you know, persona. And that's one of the benefits of working on the web is that we can do so much visual cool stuff. Yeah, gi stuff without a whole lot of hassle. But yeah, I just remember being like, Ah, this, how am I ever going to show this to anyone? They're gonna be like, yeah, cool. Cool. - -100 -00:47:09,780 --> 00:47:46,320 -Wes Bos: Well, in one of my most popular JavaScript 30 ones is we just take the really cool navigation from stripe or stripe has this like sweet nav? Are you ever over it? No. Like, we do. It's so much fun. And then we just like recreated ourselves from scratch with just some JavaScript in CSS and being able to like show someone that you did that or build a soundboard or something like that is so much more better than being like look, I I learned how to extend a prototype. Right? So excited, right? Like those things will will come up as you're having fun, right? sick, sick, sick, sick. Sick. Wait, let me - -101 -00:47:46,439 --> 00:47:51,570 -Scott Tolinski: let me do for you. sick, sick, sick, sick, sick. Sick word. - -102 -00:47:51,570 --> 00:47:54,420 -Wes Bos: Hell yes. Sick? - -103 -00:47:57,180 --> 00:47:59,460 -Scott Tolinski: Yes, which one of those was actually me? Okay, - -104 -00:47:59,490 --> 00:48:02,730 -Wes Bos: I think we got we got time for one more, I think, ooh, - -105 -00:48:02,760 --> 00:49:16,200 -Scott Tolinski: is there anyone that you're you're you're itching for? We have a few sorry, if we didn't get to yours, we will we will get to more in another episode. Okay, so for our last one, we have a question that says how do you recommend a designer who, whose following falling in love with front end dev sharpen their skills while being happily committed to a full time design position? So basically, this person is a designer, and they are slowly or not, maybe not. So slowly falling in love with front end development stuff? And I you know, to me, I think the answer to this is that the two are so related in all sorts of different ways that I don't see why there's any. Well, if you're a full time designer, there should be no reason why you shouldn't be able to expand your design or your front end dev skills, while being a full time designer. Now maybe you can't do it professionally. But maybe you can get some downtime here. And there. Maybe you can wager for some 20% time or any of that sort of stuff and work on code projects. Or maybe it's as simple as just being friends and connecting with the front end developers at your job and and really sort of learning a little bit more about what they do or having them throw you resources or maybe even little small projects your way. - -106 -00:49:17,400 --> 00:50:37,020 -Wes Bos: Yeah, I I think that this is always the question everyone rolls their rolls their eyes at is should designers code. And it's like a never ending thing should designers code? I don't care. Maybe if you if that designer wants to learn how to code then yes, if not, then then maybe not necessarily. But I do think that being able to code is a tool in the tool belt of a designer, and I have worked with is really interesting. I had worked with designers in the past who delivered me interactions. In some It was not very good JavaScript, I rewrote it, but they they delivered me how something should act When you mouse over it, and when you click on it and whatnot, and it was really neat, because maybe part of your delivering the design to someone will be some examples, maybe it's a code pen or something like that, that will explain how the interaction should specifically work in this thing, rather than just trying to explain it or doing multiple layers in your sketch or Photoshop or using one of those design prototyping tools, you can actually just like, get down and dirty in code, some CSS and JavaScript. And in show your, your devs. This is how it actually needs to be implemented. So - -107 -00:50:37,110 --> 00:52:03,510 -Scott Tolinski: yeah, yeah, I mean, that that's a really an excellent point, when we were when I worked at Ford, I was the front end. I mean, I was a front end developer, I was just building interfaces in Angular and stuff like that. And the designers would come to us and they were excellent designers. So don't take this is any sort of slight against and they would, they would show us some really cool stuff. And then at the point in which the questions come up about animation, or sort of transitions, it all fell back onto us, the front end developers now, I have experienced in motion design, but honestly, that technically wasn't my job. It's the designers job. But instead of the designer having the knowledge of how that sort of animations could work in in code and stuff like that, or the JavaScript for it, we were just coming up with our own easing curves, we were coming up with how it felt as as front end, developers and I would, you know, throw a little bit of motion designer on my resume because of that, just because of that, that role you had there. So it would have been absolutely helpful for a for a designer to say, Hey, man, like if you could throw this Bezier curve on here. That's the exact the kind of animation I'd like to see. And not that I can't do it myself. But that would have helped out or maybe would have provoked a conversation. So yeah, if you're a designer, you want to learn how to code you want to learn how to do some of this front end stuff. I say go for it if you don't, like don't feel pressured into doing it either. So yeah. - -108 -00:52:05,220 --> 00:52:11,100 -Wes Bos: Good answer. I like that a lot. Yeah, yeah. Wait, let me get some soundboard in here. - -109 -00:52:12,900 --> 00:52:13,650 -Unknown: We - -110 -00:52:19,350 --> 00:52:20,340 -Wes Bos: like the last one. - -111 -00:52:20,340 --> 00:52:27,660 -Scott Tolinski: I love her laugh. But yeah, just use your own laugh track all the time. Yeah, she just had this open to give myself some laughters - -112 -00:52:27,690 --> 00:52:30,870 -Wes Bos: all day long. Just have it like play at random intervals. - -113 -00:52:31,470 --> 00:52:42,780 -Scott Tolinski: I can absolutely already see my wife Courtney hating this. Like giving myself a laugh track. I feel like she thinks that's the last thing that I would need to - -114 -00:52:45,780 --> 00:53:13,860 -Wes Bos: we need to make a mobile version of this so that it will be just pocket ready, actually. Yeah, it is mobile. Ready? Is it? Oh, it already is powerful. Yes. amazing job. Cool. All right, let's move on to some sick, sick, sick, sick, sick, sick, sick, sick, sick, sick, sick, sick, sick pay sick pick. - -115 -00:53:13,860 --> 00:53:15,930 -Scott Tolinski: This is almost performance art at this point. - -116 -00:53:17,610 --> 00:54:01,950 -Wes Bos: Some sick pics, this is the section of this, I realized we don't actually describe what these things are anymore. And we have people joining the podcast every single week. This is the part where we do a sick pick, which is something that we have been enjoying in our life, whether it's an app or a device, or a big bag of caffeine or, or any I should know Wait, last, um, last week, I recommended this magnet charging thing. And it's always been working good for me so far. But I did have someone who bought it and it broke within 30 minutes of them. So guard your heart, you can return to Amazon mindview. And I don't know if you got a bad one or it's just crappy, ugly built, but I will continue to update you on mine as well. - -117 -00:54:02,880 --> 00:54:04,980 -Scott Tolinski: 30 minutes. That's a that's pretty quick. - -118 -00:54:04,980 --> 00:54:06,990 -Unknown: That's pretty brutal. Oh, - -119 -00:54:07,020 --> 00:55:43,920 -Scott Tolinski: so Okay, so my sick pick up is a series of books or a couple books. There's three of these. I'd never read the third one because I've heard it wasn't super good. So yeah, so these books are by Paul Arden, who he was the creative director of Saatchi and Saatchi, which is a huge, huge, huge advertising company. So he has some books, one of which is called it's not how good you are it's how good you want to be and the other is called whatever you think think the opposite. And these are sort of one page is sort of a motivational like I don't know how you'd even describe it. It's an it's not like a sound like the sort of like shock you to motivate you thing. But they're both to get you thinking differently about all sorts of situations in life and if this thing isn't isn't for you, if you're not into this kind of stuff, then I could see it being pretty annoying, but like some of these things like whatever you think think the opposite is a bunch of like Stranger Than Fiction little mini stories about how you should open your mind about different things. And it's not how good you are one is sort of the same thing are just different little small little snippets and ideas where each kind of page, if you are open to it could sort of blow your mind in a different way or just really, really, really just on a different level. So I love these books. I read them all the time I pick them up just whenever I open a page and just say, Okay, I'm reading this page right now and then maybe just meditate on that for a little bit. So I'm a big fan of these little books. They're cheap, they're little they make little great additions to your office they make great gifts super cool book, - -120 -00:55:44,189 --> 00:57:22,620 -Wes Bos: sick pics. All that no, that was not that was a sick pick. Good sick pack. Scott. I like that a lot. Thank you. I only two sick pick another podcast, people always ask me what podcasts I listened to. And I go in and out of them. Just because I think people like I don't know, they sometimes say like, Oh, I am I don't like that one. Or I love that one. And I think it's kind of neat that you can go in and out of different podcasts depending on where you are in life. Like you're just starting up a business like I just went hog wild on business podcasts and likewise and then and then you start to get sick of some of the some of the podcasts you'd like Alright, I've heard them say these same things 7000 times I get it I don't need to be listening to this and then I I get rid of it. Right. So a couple different ones that I'm currently into is and let me preface this as I know this is cheesiest thing in the world is the the Tony Robbins podcast. So put I do know Tony Robbins is there Scott? Yeah, yeah, absolutely. So Tony Robbins is this like, massive guy who he's got all these like self help books and, and all these different conferences that are $10,000 to apply. And most people write them off as like just a bunch of Fufu. But if you get past the whole, like, Boa Fufu he actually is an extremely smart guy. He has this really really good book called master your money which just goes into like index funds and how nobody can beat the market and stuff like that. And that's not my second pick is but oh by the way, he has a really good documentary on Netflix, I would definitely watch that. Have you seen that one? - -121 -00:57:22,680 --> 00:57:25,170 -Scott Tolinski: I've seen it on the listing, but I haven't watched it you - -122 -00:57:25,200 --> 00:59:15,270 -Wes Bos: gotta watch it not just tonight. But my podcast is his the Tony Robbins podcast which funnily enough, he is not on the podcast at all. Or very, very infrequently it's actually hosted by one of his employees in the first like 20 minutes of the podcast is just them trying to pitch they're like executive training which is garbage So fast forward to that but once you get past all of that the Fufu them trying to sell you stuff they will often have because he's such a big guy that they often have very very smart people on and just the there was somebody on the other day that had a really good one on nutrition I was really into that they often have different different people from different aspects of life and I think it's like just the right amount of exposure to do outside of the the web development world this stuff that still is applicable to your life. So the Tony Robbins podcast and I'm going to also sec Peck the Kevin Rose podcast you know Kevin roses yeah he created dig back there stuff dig he had dig and then he was on the the podcast diggnation way back in the day and I absolutely loved it he's like one of my like huge man crushes and I just like love his like just approach to everything and like he's like super into different like body hacking and different like he he's on keto as well and he but he also is like not so over over the top something like Tim Ferriss where it's sometimes a bit much. So I really like it He always gets like really neat people on whether it's talking about cryptocurrency or different diets that you can be on or just, I don't know all kinds of different things, different sleep cycles and whatnot. So I find that those two podcasts are kind of broaden my horizons outside of this tech world that we're in. - -123 -00:59:15,510 --> 00:59:20,670 -Scott Tolinski: Nice cool. Yeah. should give some podcast sick pics sometime as well. - -124 -00:59:20,670 --> 00:59:35,520 -Wes Bos: Take pic sick pic. Awesome. What about a shameless plug? Oh, we don't have a button for a sham. Oh, we do. We do shameless plug shameless shameless plugs. All right, let's do it. What do you got a shameless plug for me. Yeah, so - -125 -00:59:35,520 --> 01:01:03,330 -Scott Tolinski: by the time this episode is released, I'm keeping my fingers crossed. What day is that? It's Wednesday. Yes, so it must be because that's my deadline I will have my React Native level to React Native course available for pros and for purchase at level up tutorials comm forward slash store. And so with this course basically the promises is that well in the in the first React Native basics course. There's so much beginner stuff to cover, we didn't get to cover a lot of real world stuff, it was more like here's how to even get going. And so in the level two React Native course, we get into all of the important stuff like routing, right, which is a huge sort of pain in this sort of React Native world. Just go through a simple routing situation and talk about how it's different from web routing and stuff like that. We talked about using native styles using native base, we hit an API through graph qL, using graph cool, so we actually ended up having at the end of the day, the thing that you're building is a journaling app. So you can log in, you can add a new post post title, you can go back, you can edit your post, and it's all authenticated. And this thing is going to be pretty much ready for primetime. So definitely it if you are interested in learning, not only React Native, but also React Native with Apollo and some new fancy graph qL stuff, check it out, level up tutorials.com forward slash store, you can get that by buying it or becoming a pro thick. - -126 -01:01:03,870 --> 01:02:04,590 -Wes Bos: That's pretty sweet. I am going to plug in my CSS Grid at CSS grid.io people are still loving it. So I'm really happy about that. Um, what else I'm recording my react for beginners course right now just because react world changes. So so quickly. So that's going to be getting a full update to the most recent API changes and best practices and whatnot. And then I am I've been sort of heads down last couple weeks just working on my, I think I'm gonna call it advanced react course, where we're touching on graph QL. And I've been been learning all about Prisma. And yoga, which are kind of some fun names to say. So it's sort of the right balance between building your own graph qL server and not having to spend your entire life maintaining this thing. So a lot lot coming from me. And that's kind of what you can expect. sick, sick. I think that's it. And you - -127 -01:02:05,160 --> 01:02:06,030 -Unknown: know, for me, it's - -128 -01:02:06,030 --> 01:02:27,720 -Wes Bos: all good. Cool. Oh, we should say, if you do have a question for us, I'll put a link in the show notes, so that you can submit your question to this forum. These questions are very helpful to us. Even if we don't answer it directly, we kind of get an idea of the types of questions and the types of things people are looking for on this podcast, we might do a whole episode on it. - -129 -01:02:27,840 --> 01:02:40,410 -Scott Tolinski: Yeah. And if we didn't get to your question, we have we have it all saved here. So like, if it's one that we want to answer, whatever in an upcoming episode, we'll be doing more of these. So Fear not, we may answer your question in the future. - -130 -01:02:40,800 --> 01:02:55,110 -Wes Bos: Somebody asked, Is Angular two to five already dead? No, no, it's not. It's very big. So a little bonus question there. Cool. All right. Have a good week, everybody. We'll see you next week. Please - -131 -01:02:56,010 --> 01:03:05,040 -Scott Tolinski: head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax300.srt b/transcripts/Syntax300.srt deleted file mode 100644 index a9e374f6f..000000000 --- a/transcripts/Syntax300.srt +++ /dev/null @@ -1,2424 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -Unknown: the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:06,120 -development treats out there. - -4 -00:00:06,149 --> 00:00:09,000 -strap yourself in and get ready to live ski - -5 -00:00:09,000 --> 00:00:10,650 -and West boss. - -6 -00:00:10,889 --> 00:00:11,670 -Oh, welcome - -7 -00:00:11,670 --> 00:00:18,750 -Wes Bos: to syntax. This is episode number 300. Can you believe it's got? - -8 -00:00:19,259 --> 00:00:20,010 -Unknown: I can't. - -9 -00:00:20,010 --> 00:00:27,320 -Scott Tolinski: I know it's actually kind of ridiculous. It's been 300 episodes. I had no idea that it's been that many. - -10 -00:00:27,779 --> 00:01:04,980 -Wes Bos: Yeah, it creeps up on you. That's a lot. So today we've got a like a banger episode for you. We're doing a live show. So shout out to everybody who is currently on one of the hundred platforms that we are streaming to right now. And we will also obviously publish this out through the regular podcast feed. But let's talk about sponsors real quick and then we'll get into the the nitty gritty of of you coming on the show and asking us questions and and whatnot. So today we're sponsored by two awesome companies. First one is Sentry. And the second one is Netlify. We'll talk about both of them partway through the episode. Sick hi doing today, Scott. - -11 -00:01:06,630 --> 00:01:34,740 -Scott Tolinski: Do good. I did a little like, you know that low ugly intro that you saw. We were laughing before the show started because I was doing a little pre streaming to make sure things were working. Okay, and getting the video gone. And Courtney showed up in the chat to absolutely roast me for drinking all the cold brew. So I drank all the cold brew and I put some hot water on for the tea to be running and it's just waiting waiting for the cooking. Oh, Henry Helvetica in the chat. What's up, Henry? - -12 -00:01:34,800 --> 00:01:56,790 -Wes Bos: So we're gonna do a listener Collin shows is the first time we've ever done it. We spent most of our week trying to figure out how to technically do this. There was lots of different products out there. Like even like everyone was saying use zoom because it has breakout rooms. But if we're in the breakout room, we couldn't see who was in the other room. So finally we settled on Scotts discord, which I think this setup is working pretty well. - -13 -00:01:56,810 --> 00:03:30,240 -Scott Tolinski: Yeah, it's really interesting what we're doing here actually, I think that might qualify for like a hasty because I'm using like several audio routing software's, we have a discord room where we're going to be manually changing roles. And then I'm technically I'm streaming my desktop, because it's a smoother stream than piping, discord, or zoom directly into OBS. It was like way choppy for some reason. I don't know the details there. So we're just streaming my screen here. And it's working pretty well. And we're streaming on simulcasting, on four different platforms to YouTube channels, a twitch channel, and syntax FM. And I should say before we get too crazy that this is being streamed on a platform called mux. So I'm gonna shut up mocks real quick. This is mcse at MCC Comm. This is not an advertisement. But this is where I host my videos personally, they had a really neat streaming system that we're just basically piping in and then using HLS and a react player called react HLS player. And we're just pasting in basically the URL to the wizard, the M, M, three ua whatever file and yeah, whatever that file extension is, we're passing that in to the React video player as if it was just a video. And voila, it just works pretty amazing, big, big fan of this. So I'm psyched to see that we can do live streaming so easily on our own platforms, without relying on Twitch or whatever, you know, pretty sweet. - -14 -00:03:30,240 --> 00:04:19,380 -Wes Bos: So today, we've got you're gonna call in. So join in the discord if you are not links and all of the descriptions wherever you're watching. And the way it's gonna work is we will bring you in either video and audio or just audio if you only prefer to do that. And you can do one of four things. Or you can you can do them all if you really want we might cut you off. If it's too long, though. You can ask us a potluck question. You can do a sick pick of your own, you can take a stumped question. So have Scott and I give you a interview question related to CSS or or JavaScript or node or something like that. Or you can do a shameless plug. So if you've got a project you're working on, you got a YouTube channel or a book or whatever you want to plug. We're talking to Scott, this is your show. You guys get to supply all the content for this show. - -15 -00:04:19,640 --> 00:04:28,260 -Scott Tolinski: Very true. And it's gonna be a lot of fun. So I don't know. I'm very excited. Do we want to bring somebody on right now? Or do we want to talk about stuff? Do we want to - -16 -00:04:28,700 --> 00:04:37,760 -Wes Bos: know, let's do it. Let's bring somebody on. Let's bring Brad on. He was like three hours. He was already in the chat and he had all his links ready. So he's he's raring to go. - -17 -00:04:37,770 --> 00:04:59,010 -Scott Tolinski: Yeah, Brad did have these links, right. He posted all of his links, I think so. Let's bring Brad Garrett up. I remember because he told us how to pronounce it once he said like therapy therapy. So let's break bread on Brad. I'm gonna hook you up with a roll right now. Okay, so the first one we're gonna see There he is. Okay Brad. pop it in - -18 -00:04:59,390 --> 00:05:00,810 -Unknown: a Hey, - -19 -00:05:00,990 --> 00:05:02,100 -Scott Tolinski: Brad, what the setup? - -20 -00:05:02,100 --> 00:05:07,050 -Unknown: What's up y'all? Thanks for having me on. I get to break the ice. So that's, that's nice. Yeah, - -21 -00:05:07,070 --> 00:05:16,920 -Scott Tolinski: yeah, no experience with this stuff. Brad has his own YouTube channel his own content and stuff. So you seem like you've got this down to some degree. Yeah, - -22 -00:05:16,920 --> 00:05:21,870 -Unknown: I'm brave enough to do three out of the four. I'm going to save face and skip on the stumped. Question. - -23 -00:05:23,610 --> 00:05:29,700 -Scott Tolinski: Yes, anybody would like it. So if anybody would like to do us dumbed question we will do we - -24 -00:05:29,700 --> 00:05:34,530 -Wes Bos: need someone who's gonna do a stump question next? Yeah, we should even do it not that hard. Don't - -25 -00:05:34,530 --> 00:05:37,950 -Scott Tolinski: worry, the domain game that should have been one to Oh, yeah, domain - -26 -00:05:37,950 --> 00:05:50,580 -Wes Bos: get well, we can do it. We can do a live again, because we're doing live at react athon in December. Maybe we should do domain game there. All right. So what's your What do you want to start with? Let's pick pick question. - -27 -00:05:50,610 --> 00:06:32,850 -Unknown: Let's start with a question. Something interesting came up on my team at Adobe, we were kind of rushed to get out an alpha of a product. And this product included a graph qL API, and we didn't have time to document it. And I said, Well, hey, they have this awesome thing called graph qL playground that we can embed into the website, that that's better than documentation. Yeah, my back end team actually brought up some security concerns. They're like, we don't we don't think that's safe, due to the ability to introspect the graph qL API. So my question to y'all is, are you aware of any security concerns around graph qL introspection? - -28 -00:06:33,330 --> 00:06:56,970 -Wes Bos: Let's explain real quick. What introspection is, is that, when you enable this thing, it will give you a picture of what the entire API surface looks like, every single query every single input every single type that is possibly in and if somebody were to see this, like a developer, they can quit very easily see the entire surface area of the API. So that's what it is. Go ahead, Scott. - -29 -00:06:57,059 --> 00:07:55,080 -Scott Tolinski: Yeah. So I do want to say I think first and foremost, that if you're using Apollo or I don't know if you are Apollo, by default, has introspection turned off in production. So that's one key is that I personally turn off introspection in production. Same with playground, I have playground and introspection turned off. Only just because I don't want people snooping around. But in the same regard, I've always heard this being said is like you shouldn't rely on security through obscurity. Yeah. And that, like somebody should be able to see your ends. And if your ends aren't secured, then that's like a bigger problem. I don't know, I turn off introspection myself again, personally, because I just don't I don't need it. I don't want it in production. Yeah, I don't know. There are concerns there. But again, I guess it's a matter of how well the the I guess, they're not necessarily endpoints, but how well the the mutations are secured themselves. - -30 -00:07:55,230 --> 00:08:23,460 -Wes Bos: Yeah, like, yeah, someone could could figure it out. If it was, like, if you put these graphical endpoints into production, if it's on an iOS app, or if it's on a client side application, someone can figure out what all of our it's just like trying to piece together reverse engineer API is much harder than actually just having all the documentation for the entire API. Yeah. So I turned it off as well, just because Apollo recommends that, but I as long as it's secured properly, - -31 -00:08:23,610 --> 00:08:29,790 -Scott Tolinski: Iran in the chat says that they expose the playground via B only behind a VPN. - -32 -00:08:30,240 --> 00:08:31,620 -Wes Bos: That makes sense. I like that. - -33 -00:08:31,710 --> 00:08:41,070 -Unknown: That's essentially what we wound up doing was we routed it through this service that required authentication, that would then allow request to pass back through to the API. - -34 -00:08:41,820 --> 00:08:55,260 -Scott Tolinski: Interesting. Yeah, fascinating. Yeah, this is a these are not necessarily problems I run into concerning the I don't work at a company like Adobe. Yeah, you know, that's for sure. That's a big way different fish than what I'm dealing with. - -35 -00:08:55,620 --> 00:08:56,820 -Wes Bos: What about your sick pick? - -36 -00:08:56,940 --> 00:09:38,970 -Unknown: For sure, thanks. Yeah. Okay, so my sick pick and my shameless plug kind of go together. Um, I'm a fan of working out. I'm a fan of fitness and a while back, a buddy of mine challenged me to do a bunch of Murph workouts. These are this CrossFit workout where you do like hundreds of push ups and pull ups and squats and stuff and you're supposed to wear this weighted vest. And so I finally purchased that weighted vest and it's awesome neck so this is the 511 tack tech plate carrier you can get it from rogue fitness.com I got a 10 pound plate in the front 10 pound plate back. That thing is built like a tank I love it fits like a glove ha cool. I would - -37 -00:09:38,970 --> 00:09:48,919 -Scott Tolinski: love a weighted vest. There are so many times that I put on ankle weights and I'm like I wish you were a weighted vest. So let's take a look very cool, - -38 -00:09:48,990 --> 00:09:55,470 -Unknown: super comfortable to I you can do all your pull ups and stuff in them and not feel like you're rubbing you know on your chest or anything like that. - -39 -00:09:55,980 --> 00:10:06,899 -Scott Tolinski: I hate when the weight belt around your waist and that's like pulling on your Hips in a weird way when you're trying to do weighted pull up so sick I will take a look at this. In Brad, do you have anything to shamelessly plug? - -40 -00:10:07,200 --> 00:10:43,860 -Unknown: I do. I actually built an application called Murphy that that is specifically designed to time and track your CrossFit Murph workouts. It's really complex. It's like broken up into into 20 rounds of five pull ups, 10 push ups, 15 squats, and it's really hard when you're like, sweating and stuff to remember what count you're on. So I built an app. It's a it's a pw a made with spelt. And I released it to the Google Play Store. So if you search Murphy and you are PHY on the Google Play Store, you can pick it up. - -41 -00:10:44,130 --> 00:10:46,020 -Scott Tolinski: What's it say that once more Murphy what - -42 -00:10:46,230 --> 00:10:49,740 -Unknown: am you are PHYO Okay, - -43 -00:10:49,770 --> 00:10:58,380 -Scott Tolinski: you were just spelling Murphy. I thought that was cool. I will check this out. So pw a on the App Store. How was that process? - -44 -00:10:58,500 --> 00:11:28,049 -Unknown: It was confusing. Doing like the signing process. Because like pw a builder.com wants to sign up for you Google App Store wants to sign it for you. And I got all the keys crossed the first time around, so I hadn't delete the whole thing and start over. Once you get past that hump, it's like really, really simple. And if anybody wants to the app cost money on the App Store, but it's a PVA, so it lives online. Cool. So you can Oh, Murphy, Murphy dot Brad derpy.com. And you can use it for free. Cool. - -45 -00:11:28,110 --> 00:11:45,210 -Scott Tolinski: That sounds awesome. Little sick. Brad will will get a link to that in the show notes and everything and thanks for stopping by. Man. Happy to have you here on the three. I'm glad that you're the first guest Brad because Brad's been a longtime member and he's been around so you happy to have you, Brad. Thanks. - -46 -00:11:45,480 --> 00:11:46,799 -Wes Bos: Appreciate it. Thanks, man. See - -47 -00:11:46,800 --> 00:11:53,580 -Scott Tolinski: ya. Okay, sick. Okay, so he just left on his own accord, which is great. You should bring - -48 -00:11:53,610 --> 00:11:54,870 -Wes Bos: Brittany in next. - -49 -00:11:55,590 --> 00:11:59,159 -Scott Tolinski: Yes, I am giving Brittany the roll of live. - -50 -00:12:00,870 --> 00:12:04,620 -Unknown: Brittany? Yes. Hey, - -51 -00:12:04,919 --> 00:12:17,340 -Wes Bos: hi. Hey. Oh, video. That's always the last. Like, whenever you like a client, you have a 30 meeting. Oh, video. We put it on. - -52 -00:12:19,890 --> 00:12:35,130 -Scott Tolinski: Yeah, it was funny. This morning. I think it was like at like 10 o'clock or something corny was like, I have a video meeting in five minutes. I can't be like, Oh, you have to be on video. Just do it. Audio. Just go. Yeah, that's very funny. - -53 -00:12:35,220 --> 00:12:35,789 -Unknown: Yes. - -54 -00:12:35,789 --> 00:12:36,720 -I love Discord. - -55 -00:12:37,320 --> 00:12:38,610 -Yes, Discord. - -56 -00:12:39,360 --> 00:12:49,860 -Yeah, I'm a huge fan of both of you. I think both of you know that. I've spoken to both of you through Instagram and Twitter. A little bit because mainly because of where I live, I think because you're - -57 -00:12:49,860 --> 00:12:50,970 -in Michigan. - -58 -00:12:51,419 --> 00:12:52,710 -Yeah. And Michigan. - -59 -00:12:53,220 --> 00:12:54,299 -Yeah. - -60 -00:12:54,809 --> 00:12:56,010 -Scott Tolinski: The tulips. Right. - -61 -00:12:56,309 --> 00:13:01,890 -Wes Bos: My sister lived in Holland, Michigan for the longest time and Scott lived in not far from Holland, Michigan for - -62 -00:13:01,950 --> 00:13:05,399 -Unknown: most of his life a little far. At the other side of the state. - -63 -00:13:05,940 --> 00:13:06,630 -Wes Bos: Okay. - -64 -00:13:06,750 --> 00:13:09,450 -Scott Tolinski: Yeah. The other two hours. Okay. It's not that far. - -65 -00:13:09,960 --> 00:13:13,620 -Unknown: So I'm gonna have to hold the can the button to talk? - -66 -00:13:13,679 --> 00:13:17,820 -Scott Tolinski: Oh, you know, you don't have No, she doesn't have to hold the button to talk. Oh, I - -67 -00:13:17,820 --> 00:13:19,080 -Unknown: have it set in my - -68 -00:13:19,200 --> 00:13:22,649 -Scott Tolinski: okay. No, okay. Yes, that is very smart of you. - -69 -00:13:22,919 --> 00:13:30,570 -Wes Bos: That's how people in Michigan tell how where they live. They're just showing their hand, which is great. I wish Ontario had some of that. Like, it's very true. - -70 -00:13:30,720 --> 00:13:35,640 -Scott Tolinski: One of my best friends. It got a little dot tattooed where Ann Arbor is on his hand. - -71 -00:13:36,059 --> 00:13:37,649 -Unknown: Oh, that's awesome. So he could just be like that - -72 -00:13:37,860 --> 00:13:43,980 -Scott Tolinski: was although he moved back to to Michigan. So it's like now he's just like, yeah, I live. - -73 -00:13:44,070 --> 00:13:48,960 -Unknown: I live in the same place. Actually more than Michigan colors today for you, Scott. - -74 -00:13:48,990 --> 00:13:49,830 -Yeah. - -75 -00:13:51,300 --> 00:13:55,590 -Wes Bos: I thought that was about two colors. Oh, yeah, it is. - -76 -00:13:56,880 --> 00:13:58,049 -Unknown: The same as that. - -77 -00:13:58,049 --> 00:14:02,820 -Scott Tolinski: Yeah, the your colors are the same as my alma mater. So thank you, Wes. for that. - -78 -00:14:03,779 --> 00:14:06,960 -Wes Bos: I did on purpose. All right. What do you got for us today? What would you like to do? - -79 -00:14:07,710 --> 00:14:43,260 -Unknown: I would love to shamelessly plug the zoo team Academy. Oh, what's that started. So I started learning to code from Andre nangloi, a couple years ago on his Udemy courses, and this year, they launched the GTM Academy. I just led a responsive web design workshop a couple days ago, and on the website next week. And I have to say, though, that I would not be where I am without the two of you. Because I learned CSS Grid from was this course. And it made me fall in love with responsive layouts. And then Scott, your CSS design systems course was incredible for - -80 -00:14:44,520 --> 00:14:45,029 -Wow, - -81 -00:14:45,049 --> 00:14:58,380 -learning how to use CSS variables. So I mean, both of you have been just extremely helpful to me. So I love both of you. It's great, but the ctm Academy is great. And so I shamelessly plug that back and - -82 -00:14:58,380 --> 00:15:15,240 -Wes Bos: in Canada. It's the best At tm Academy, translate for anybody. Nobody in Canada actually says that. I have all of my friends say z, even like my kids learn the alphabet in the class the other day, and I was like, say it to me. And I listened. And they say, they say, See? - -83 -00:15:16,110 --> 00:15:20,070 -Unknown: I know a couple people from Canada and they have said Zed before, and I'm like, Really? - -84 -00:15:20,760 --> 00:15:30,090 -Wes Bos: Yeah. Well, I say I say Zed sh. So we did. Yeah, just interchangeably use it. Yeah. Sad to say, use a Z, sh, z shell, I'm sure. - -85 -00:15:31,799 --> 00:15:40,470 -Unknown: Originally, and I'm sure there's a lot of things I say that I'm like, why did I just say that? Like, yeah, I stopped saying y'all for a long time because I didn't want to be - -86 -00:15:44,279 --> 00:15:49,260 -Wes Bos: Oh, man, awesome. Any any other ones you want to do or just wanted to plug this ETM Academy? - -87 -00:15:49,799 --> 00:16:03,000 -Unknown: Yeah, I just wanted to get on say how much of a fan I am. Your your guys dynamic from the beginning has been just amazing. So I wanted to say thanks to the fans that plug that and because I've got my workshop coming on there. So super nice. - -88 -00:16:03,630 --> 00:16:21,179 -Scott Tolinski: Yeah. And Barry, I mean, we he could Britney's been around that level discord for a long time. And she's always sharing her posts and all that stuff on on dev two and everywhere. So I've been appreciating seeing all your stuff just over over the course of time. So shout out to Brittany. Thank you. Yeah, - -89 -00:16:21,360 --> 00:16:23,880 -Unknown: I really appreciate this, guys. This is awesome. Thank you. - -90 -00:16:24,120 --> 00:16:27,360 -Scott Tolinski: Yeah. Thanks for having me. Got it. Thanks for helping us elevate 300 - -91 -00:16:27,779 --> 00:16:28,890 -Unknown: Yes, see you. - -92 -00:16:29,520 --> 00:16:33,179 -Wes Bos: This is really convenient that everybody has like high quality microphones. - -93 -00:16:36,000 --> 00:16:36,899 -Unknown: I do have a setup. - -94 -00:16:39,390 --> 00:16:40,260 -Thank you guys. So - -95 -00:16:40,260 --> 00:16:46,770 -Wes Bos: thanks again. All right, next, we've got cook, code stacker. Hello. - -96 -00:16:47,880 --> 00:16:48,480 -Unknown: Hey, - -97 -00:16:49,350 --> 00:16:50,669 -can you hear us? - -98 -00:16:50,789 --> 00:16:53,940 -Yeah, good. Okay. Hey, - -99 -00:16:54,779 --> 00:16:58,860 -Wes Bos: thanks for coming on. But do you have a name or just code stacker? - -100 -00:16:58,950 --> 00:17:07,050 -Unknown: Yeah, no, no, no, my name is Jesse. I've talked to Scott before, but I've never met us. So it's great. Great to see you guys. I appreciate it. - -101 -00:17:07,679 --> 00:17:13,860 -Wes Bos: Oh, no problem. Thanks for thanks for coming on. So like, Where are you from there? Yeah, so - -102 -00:17:13,860 --> 00:17:16,410 -Unknown: I'm in I'm in Texas. Yeah. - -103 -00:17:16,679 --> 00:17:25,530 -Scott Tolinski: Yay. Wow. Yeah, access. Mm. Yep. Alexis and Brittany is from the south. So we Yeah, we gotta get some Northerners on the show. - -104 -00:17:27,149 --> 00:17:28,610 -Unknown: We got a Canadian on next. - -105 -00:17:30,480 --> 00:17:44,910 -Yeah, so I know. I really appreciate it. You guys are you guys are great. I'm, you know, fairly new to this industry of teaching online tutorials and stuff like that. So you know, I have a YouTube channel. But you guys have been a great inspiration for me. Oh, thanks - -106 -00:17:44,910 --> 00:17:45,960 -Wes Bos: a lot. Appreciate that. - -107 -00:17:45,990 --> 00:17:54,090 -Scott Tolinski: You'll have to you'll have to have to plug your plug your channel. Would you like to do a stump question or a good? Oh, okay. - -108 -00:17:54,090 --> 00:17:58,050 -Unknown: I will do I will do a stump question. plug my stuff. - -109 -00:17:58,410 --> 00:18:13,680 -Scott Tolinski: Yes. That is a good trade. I was just about to get it. And then I typed in stumped into the Google search bar to let you know exactly how on my brain is today. But what was the the site I can't find the site 32nd Interview Questions? 30 - -110 -00:18:13,680 --> 00:18:21,540 -Wes Bos: seconds of interviews.org. I put I popped it in the notion. There's a lot of things that we have to open right now. I've got three monitors, and they are all full. - -111 -00:18:22,380 --> 00:18:31,950 -Scott Tolinski: That is Yeah, I have the Discord. I got the OBS YouTubes. And yeah, let's stuff. Sorry, you can find it because I can't find the link right now. - -112 -00:18:32,009 --> 00:18:34,200 -Wes Bos: All right, I'll grab one. I'm just looking through them right now. - -113 -00:18:34,200 --> 00:18:35,460 -Unknown: Don't make it too hard. - -114 -00:18:35,549 --> 00:18:46,920 -Wes Bos: That's a silly question. There was one on like, what are the advantages of the Node JS callback pattern? And I was like, none, it sucks. It's now that we have a sink await. Are you a reactive? - -115 -00:18:47,160 --> 00:18:47,760 -Unknown: Yeah, - -116 -00:18:47,760 --> 00:18:51,510 -react? JavaScript, CSS, any kind of front? Okay, we've - -117 -00:18:51,510 --> 00:18:53,790 -Wes Bos: got a react question here. That's marked as hard. - -118 -00:18:53,790 --> 00:18:55,230 -Unknown: What are - -119 -00:18:55,230 --> 00:18:57,690 -Wes Bos: portals and react? - -120 -00:18:58,110 --> 00:18:59,010 -Unknown: Oh, that's easy. - -121 -00:18:59,010 --> 00:19:00,450 -Why are - -122 -00:19:02,610 --> 00:19:07,140 -Wes Bos: the portals are very, very niche used part of react? I mean, I - -123 -00:19:07,140 --> 00:19:08,790 -Unknown: don't think so. It's just a pop up. Right? - -124 -00:19:09,240 --> 00:19:10,860 -What did they do? Well, it's - -125 -00:19:10,860 --> 00:19:26,940 -almost like a modal. Right? So it's just a puts a container up on top of another container and you can actually access the root of react from it. So it doesn't, it can it's basically on its own, but it can be pulled into another container. - -126 -00:19:27,350 --> 00:19:31,850 -Wes Bos: Yeah, it's it's your react application outside of your root element. Right. - -127 -00:19:31,890 --> 00:19:38,060 -Scott Tolinski: Right. Yeah. Right. allows you to insert into the DOM into an element basically all right. - -128 -00:19:38,160 --> 00:19:42,320 -Wes Bos: Yeah. Okay. I think that was that was good. Good. Luck your thing. - -129 -00:19:45,150 --> 00:19:56,790 -Unknown: Appreciate, ya know, so my youtube channel is obviously code stacker with an R in then also just released a new course VS code hero Comm. So yes, check that out. That would be great. - -130 -00:19:57,860 --> 00:20:00,630 -The hero.com Yeah, and - -131 -00:20:00,630 --> 00:20:05,220 -just for syntax, if you put in the coupon code syntax, we'll get a discount. - -132 -00:20:05,300 --> 00:20:07,610 -Scott Tolinski: Oh, look at you came prepared. - -133 -00:20:10,440 --> 00:20:12,560 -Unknown: Props sweet. - -134 -00:20:12,690 --> 00:20:16,230 -Scott Tolinski: Yeah, this looks nice. I like the the shadows. - -135 -00:20:16,499 --> 00:20:18,090 -Unknown: Thanks. Cool. It's - -136 -00:20:18,090 --> 00:20:20,430 -all done with Gatsby and tailwind. - -137 -00:20:20,700 --> 00:20:22,020 -Whoo. All right. - -138 -00:20:22,020 --> 00:20:25,140 -Wes Bos: All right. Even the enum animations to - -139 -00:20:25,739 --> 00:20:30,180 -Unknown: animations or iOS animate on scroll. Cool. Super simple. - -140 -00:20:30,180 --> 00:20:39,050 -Scott Tolinski: Sure enough, you're allowed to say the world tailwinds on this podcast anymore. Because there people always Tweet, tweet at us. Whenever we say the word tail would - -141 -00:20:39,800 --> 00:20:51,110 -Wes Bos: really get in trouble. Yeah, no, just joking around, but just joking. Awesome. Cool. All right. Would you like to do any other? Are you are you done? - -142 -00:20:51,320 --> 00:20:57,900 -Unknown: No. That's good. I appreciate it. Yeah. Great show. let some other guys get in here. Sweet. Thanks. Thanks for coming on. - -143 -00:20:58,050 --> 00:20:59,280 -Scott Tolinski: Yeah, seriously. Thank you. - -144 -00:20:59,330 --> 00:21:00,320 -Unknown: All right, thanks. - -145 -00:21:01,980 --> 00:21:09,860 -Wes Bos: Who do we want next? Spence's? 10 he just he tweeted that he's having a beer. Watching this. So let's have him on. - -146 -00:21:10,260 --> 00:21:22,950 -Scott Tolinski: Bear. But it's not beer o'clock here. Yeah, sorry for everybody gets some downtime. Usually when we record there's not a ton of downtime but we do get some some Adam cut this out. - -147 -00:21:22,980 --> 00:21:32,700 -Wes Bos: Yeah. And cut the sometimes a kid will come running in or the last podcast I had my kid on my lap the entire podcast, you can hear him a little bit. Which I thought was funny. - -148 -00:21:33,240 --> 00:22:01,050 -Scott Tolinski: Yeah, in fact, it is very frequent that we have children either running around or or fiddling with our knobs or, or just ruining the, the audio in general for me in my office, they just love twiddling the knobs on my compressor. And then just we've been getting, Adam has been sending us messages about the quality of our audio. So hopefully it hasn't been too bad. Alright, Spence is joining Oh, and Henry helvetic has got to hop on, - -149 -00:22:01,470 --> 00:22:04,860 -Wes Bos: bring Henry and if Spence is not joining in? - -150 -00:22:05,430 --> 00:22:09,630 -Scott Tolinski: We'll do Spence first. Okay, we could do double. Could we - -151 -00:22:12,030 --> 00:22:15,540 -Wes Bos: please at the very end, we should just let as many people as we can. - -152 -00:22:16,950 --> 00:22:31,860 -Scott Tolinski: We might actually hit both of them at the same time. At the same time. Those of you wondering, I do not know how to do pop popping. I do not know how to do that style of dance Just in case you're wondering. - -153 -00:22:32,610 --> 00:22:35,040 -Wes Bos: Oh, pop and lock their doors? No, you - -154 -00:22:35,040 --> 00:23:06,180 -Scott Tolinski: can't say pop in lock Wes. That's because they're very different dances. Popping is the popping is the kind of stuff well, this is waving. But popping. This is popping. And then locking is is like is is like very clown like it's it's hard to explain. But there's finger points and wrist rolls. There's this is your lines. This is a lock. And this is a pop. They're very different. - -155 -00:23:06,660 --> 00:23:08,100 -Unknown: All right. Oh, here's Henry. - -156 -00:23:08,700 --> 00:23:09,390 -Scott Tolinski: Henry. - -157 -00:23:09,390 --> 00:23:09,990 -Unknown: Yo, can - -158 -00:23:09,990 --> 00:23:11,040 -you guys hear me? - -159 -00:23:11,250 --> 00:23:13,290 -Yeah. Can you hear? Oh, come - -160 -00:23:13,290 --> 00:23:16,620 -on. Oh, somebody - -161 -00:23:16,620 --> 00:23:24,570 -Scott Tolinski: didn't give Spence the roll. I'm sorry. That's why can you guys hear me? Can you guys hear me? Yeah. In your face? I don't know if you can hear us. - -162 -00:23:25,110 --> 00:23:27,420 -Unknown: Yeah, but I don't know which mic - -163 -00:23:31,470 --> 00:23:32,040 -Scott Tolinski: syntax. - -164 -00:23:33,510 --> 00:23:36,690 -Wes Bos: You gotta you gotta turn off your live stream folks when you call in. - -165 -00:23:38,460 --> 00:23:41,940 -Scott Tolinski: Okay, I think oh my god. Oh, hey, - -166 -00:23:42,780 --> 00:23:43,410 -Wes Bos: how's it going? - -167 -00:23:43,590 --> 00:24:25,050 -Unknown: Okay, cool. Cool. I was like, completely confused. I was like, what is going on right now? I have too many screens. And I didn't know which one was live. Which one was lagging? I don't know. Anyways, how you guys doing good. I'm alright, man. Just add a pretty interesting morning. I just did a little q&a with this new web dev class in London, London, England. And I was just answering questions and stuff like that. So it was it was pretty interesting. But man, I you know, honestly, I'm glad to be with you guys. Because as you know, I probably caught some of your early episodes. Like, I think under like the first 20 or so then I kind of fell off after that. So I have to apologize. Oh, - -168 -00:24:27,630 --> 00:24:28,500 -Wes Bos: yeah, you know, I've - -169 -00:24:28,500 --> 00:24:40,530 -Unknown: said so but, but yeah, yeah, we like I saw the announcement about the the live show. And I was like, dude, I'm still here. Let me just log in and see what's going on. And you're a man, and I think I'm your first Canadian. - -170 -00:24:40,530 --> 00:24:42,750 -Scott Tolinski: Yeah. first official - -171 -00:24:42,780 --> 00:24:51,660 -Wes Bos: here from Toronto, which we used to hang out in person when I was back living in Toronto. And I think actually the first time I met you was in New Orleans. - -172 -00:24:52,170 --> 00:24:58,200 -Unknown: Yeah, dude, it was like that. Was that Sunday? Yeah, exactly. - -173 -00:24:59,100 --> 00:25:00,480 -Wes Bos: The pencils are behind. Me, - -174 -00:25:00,600 --> 00:25:12,570 -Unknown: that sounds so weird because I used to work at this design firm at some days I had to eat up. And I was like, dude, I don't know what to do. And then I ended up just flying to Nola to volunteer. So it's - -175 -00:25:14,730 --> 00:25:20,790 -Scott Tolinski: just just just head on over to NOAA just to chill. Yeah. And volunteer. That sounds. That sounds like quite the - -176 -00:25:20,940 --> 00:25:24,000 -Wes Bos: as fun as the get get really good conference. Yeah, it - -177 -00:25:24,000 --> 00:25:36,330 -Unknown: was fun, man. It was fun. I met a bunch of folks and yourself, obviously. And then, you know, there are a few days there to actually, I'll probably post a photo cuz that was one photo, a bunch of us just hanging out. So it was pretty interesting. - -178 -00:25:36,870 --> 00:25:43,740 -Wes Bos: Yeah. Tell us about your your performance. You run jam stack Toronto. What do you want to talk to us about today? - -179 -00:25:44,070 --> 00:26:21,000 -Unknown: So I really was going to plug a set of videos. I'm about to drop next week about a particular sort of like event I put together but roughly, I'm from Toronto for that. Instead, I run a couple of meetups trying to work performance meetup and the jam stack Toronto meetup. But as you mentioned, I'm actually going to drop a link about that in the in the chat. So basically, two things I wanted to plug real quick. Next month. Yeah, I'm doing a I always mispronounce it. Sorry. I'm French. Ella, venti. I'm saying that wrong. 11. d 11. That's it. Sorry, sir. - -180 -00:26:21,060 --> 00:26:23,580 -Wes Bos: What's the acronym for it? - -181 -00:26:24,480 --> 00:26:27,660 -Unknown: eleventy 112? y? Yes. - -182 -00:26:28,710 --> 00:26:32,100 -Scott Tolinski: Oh, yeah. Yeah, I hear so much about this, but I've never used it. - -183 -00:26:32,400 --> 00:26:52,470 -Unknown: Yeah, it's, it's really getting a lot of momentum around the SSRS. Oh, CSS g sorry. So sorry. I'm so confused. Now. What I want to say is just for fun, I'm doing a meet up on November 11. So 11 1111 minute, lightning talks on eleventy. - -184 -00:26:53,700 --> 00:26:55,500 -Wes Bos: So Oh, that's awesome. Yeah, - -185 -00:26:55,500 --> 00:27:51,900 -Unknown: it's something a little different. I'll leave a little link in the slack of slack into discord about it. But what I really want to talk about was, I'm releasing a set of videos from a little sort of mini conference I put together last week or no, last month, basically on images and image formats. You know, as you mentioned, I'm a bit of performance fan. And the image conversations ones that I've always had in mind, and especially this week, would, I guess next announcing that image component, and all this sort of like tooling around performance, and specifically, performance monitoring, images have become a little important. So I have some videos coming next week about this conference I put together. So people talking about emeth, which I'm sure you may have heard about, which is sort of like the new kid on the block in terms of image formats, supported right now in stable Chrome, and behind a flag in Firefox, - -186 -00:27:51,900 --> 00:27:56,790 -Wes Bos: I believe, does that replace web p then like, that's another new image format, right. - -187 -00:27:57,059 --> 00:29:14,820 -Unknown: So interestingly enough, what P is actually 10 years old, but it's only really gained a bunch of momentum in the last two or three years. And what is been very important this year, specifically, because finally, in Safari 14, so Big Sur, and iOS 14, is you'll get where P support. But this is basically on its 10th here, but what some consider now an old format at 10 years old, because even around with better bit with better specs. But in some of these videos that I'm releasing, we're talking about web p 2.0. being worked on as we speak, one of the videos I talked about metrics like LCP and images, and what people may not realize that images, or at least your largest image on your page will affect your score your lighthouse score drastically, because it'll take up about 25% of the score. So if you miss that on, you mess up your your Lh score as well. Very interesting set of videos. You know, I talked about what we talked about, if we talk about web p a viff, skoosh, we talk about that, as well, because they have a lot of support. And we talked about this format called JPEG Excel, which is sort of getting a little bit. Yeah, it's getting a little bit of traction right now. So it's pretty cool. So yeah, I mean, I just want to mention that I'll probably be dropping that next week. So - -188 -00:29:15,390 --> 00:29:16,770 -Wes Bos: where can we get that? - -189 -00:29:17,069 --> 00:29:28,800 -Unknown: I'll probably do it on Twitter. So my Twitter handle which is basically my handle on discord right now, so I'll be Helvetica and yeah, I mean, it's just some pretty neat information I just want to discuss. - -190 -00:29:29,219 --> 00:29:37,530 -Wes Bos: I'm really glad that I found out you're French and we call I can call you only now you absolutely can. I was always saying yes sweet. - -191 -00:29:38,850 --> 00:29:43,350 -Unknown: It's actually preferred, but you can have problems with that are - -192 -00:29:43,680 --> 00:29:47,100 -Wes Bos: not me. I took grade 10 French. Hey, I didn't take - -193 -00:29:47,100 --> 00:29:53,400 -Scott Tolinski: French but my my grandmother has a French maiden last name. So I basically French. Yeah. - -194 -00:29:54,420 --> 00:29:58,770 -Wes Bos: Awesome. Cool. Well, thanks so much for coming on. Appreciate it. Hey, Ben. Thank - -195 -00:29:58,770 --> 00:30:03,360 -Unknown: you. Thanks for Send through these issues I was having said into what was going on for a second oh - -196 -00:30:03,360 --> 00:30:04,680 -Scott Tolinski: it's all good. - -197 -00:30:04,950 --> 00:30:06,630 -Wes Bos: I say - -198 -00:30:07,290 --> 00:30:14,610 -Scott Tolinski: thanks for stopping by every alright Spence is up next. Oh Henry you're still here you might have to leave there we go - -199 -00:30:16,350 --> 00:30:27,540 -Wes Bos: say yes that should be his like developer name. That's like a big jewelry store here in Canada spends diamonds and diamonds I don't even know it is here Spence diamonds. - -200 -00:30:27,719 --> 00:30:29,670 -Scott Tolinski: That's actually really sick nickname though. - -201 -00:30:29,700 --> 00:30:39,450 -Wes Bos: Yeah, that sounds like a like a MySpace crunk core. Like band name like Spence diamonds and the the wild cats. - -202 -00:30:39,990 --> 00:30:41,360 -Unknown: I wild cats. - -203 -00:30:42,750 --> 00:30:45,860 -Scott Tolinski: wild cats or wild cats. Wow. Cuz I feel - -204 -00:30:45,870 --> 00:30:48,330 -Unknown: like Oh, there it is - -205 -00:30:48,360 --> 00:30:50,670 -that room very far. - -206 -00:30:51,840 --> 00:30:55,950 -Wes Bos: Scott clean speaking. We can hear your Spence mark on here. Anyone? - -207 -00:30:56,850 --> 00:31:03,630 -Scott Tolinski: Oh, we can hear you. Test. Test test test. Check your audio and check your audio. - -208 -00:31:03,720 --> 00:31:05,100 -Unknown: Oh, my. - -209 -00:31:06,570 --> 00:31:08,490 -Scott Tolinski: Smith's gone. He'll be come back - -210 -00:31:08,580 --> 00:31:11,460 -Wes Bos: and his back. Hello. Hey, - -211 -00:31:11,460 --> 00:31:15,360 -Unknown: you can hear me cool. I've got the - -212 -00:31:18,480 --> 00:31:21,780 -Wes Bos: site. bring somebody else in. Alright, bring Jason. - -213 -00:31:21,860 --> 00:31:27,210 -Scott Tolinski: I'll bring Jason because Jason is gonna Jason say a discord Pro. All right, - -214 -00:31:27,420 --> 00:31:27,990 -Wes Bos: Jason. - -215 -00:31:27,990 --> 00:31:28,770 -Unknown: Hello. - -216 -00:31:28,920 --> 00:31:29,550 -Scott Tolinski: Hello. - -217 -00:31:29,550 --> 00:31:31,020 -Wes Bos: How's it going? It's going well, How - -218 -00:31:31,020 --> 00:31:31,680 -Unknown: are y'all? - -219 -00:31:32,100 --> 00:31:33,120 -Scott Tolinski: Good. How are you doing? - -220 -00:31:33,120 --> 00:31:34,110 -Unknown: Good. Good. - -221 -00:31:34,110 --> 00:31:36,090 -Let me let me get my camera going here. - -222 -00:31:36,110 --> 00:31:39,660 -Scott Tolinski: Yeah, you got a fancy setup to spooky. - -223 -00:31:43,110 --> 00:31:50,130 -Unknown: Doing the you know, we aren't doing anything fun for Halloween. So we figured we'd dress up for all our Friday zoom calls. Sick. - -224 -00:31:50,850 --> 00:31:51,630 -Scott Tolinski: That's amazing. - -225 -00:31:53,190 --> 00:31:54,030 -Unknown: That's great. - -226 -00:31:54,030 --> 00:31:57,360 -Scott Tolinski: So how is that being affixed to your head? Is that Is it a band? - -227 -00:31:57,630 --> 00:31:59,820 -Unknown: It's Yeah, it's like a it's a little like a headband. - -228 -00:31:59,999 --> 00:32:02,760 -Scott Tolinski: Oh, yeah. All right. All right. All right. But the - -229 -00:32:03,239 --> 00:32:07,200 -Unknown: days I actually have my ears pierced from back in my rock star days. And so Oh, - -230 -00:32:07,200 --> 00:32:08,130 -yeah. - -231 -00:32:08,580 --> 00:32:09,840 -These are just real earrings. - -232 -00:32:10,410 --> 00:32:19,440 -Scott Tolinski: I had a tongue piercing for like, eight years. So I wonder if I could still shove something through my tongue and have like a spooky, spooky Halloween Town. - -233 -00:32:20,249 --> 00:32:25,530 -Unknown: I had a tongue piercing and as a result, I have a lot of very expensive dental work. Yes. - -234 -00:32:25,530 --> 00:32:44,490 -Scott Tolinski: Do I know dude? My Yes, my aunt, my aunt in law was like, is that she was a nurse and she was like, you need to take that thing out. Because you are gonna really regret it later on in life when your dental bills are really high. And it's just like, whatever. And then like, sure enough, I'm like, I wish I wouldn't have had that thing. And for some - -235 -00:32:45,720 --> 00:32:46,440 -Unknown: of you. - -236 -00:32:47,340 --> 00:32:50,280 -Scott Tolinski: It sucks at the dentist. I will tell you that. - -237 -00:32:50,490 --> 00:32:55,770 -Unknown: Yeah, a little time you go in for a cleaning. You just get judgment. Like they're like, oh, tongue pierced, didn't you? - -238 -00:32:55,830 --> 00:33:14,910 -Scott Tolinski: Yeah, dumb now. Yeah, but you feel dumb. Now Westbrook you don't know. Basically, there's like a ball on the underneath side of it. And it rubs against the gums on the die, er, and then your teeth and it just that stuff doesn't come back. never comes back. And it hurts really bad. Yeah, definitely. - -239 -00:33:16,950 --> 00:33:20,160 -Wes Bos: So somebody on Twitter tagged you and told you to jump in here? - -240 -00:33:20,309 --> 00:33:34,380 -Unknown: Yeah, yeah, I got a I got tagged with a link to the like to the YouTube. And oh, yeah. Cool. Toby. Come in. So I, I wasn't sure if somebody asked me or it was like actually, like, hey, Jason's coming or something. But - -241 -00:33:34,499 --> 00:33:55,650 -Wes Bos: no, no, that was we're so what we're doing for is our 300 episode. And we are having people come on. And they either have to ask us a Paula question. They have to do a sick pick. You got to take a stumped question. So Scott, and or I will give you a question about JavaScript or CSS that you have to answer or shamelessly plug something. - -242 -00:33:56,190 --> 00:33:58,680 -Unknown: I guess stumped me. Let's try it. All - -243 -00:33:58,680 --> 00:33:59,340 -right, let's - -244 -00:33:59,340 --> 00:34:11,640 -Wes Bos: do it. The question is, this is a hard a JavaScript question. What does use strict in quotes do? And what are some of the benefits of using it? Oh, my - -245 -00:34:11,640 --> 00:34:12,210 -Unknown: God. - -246 -00:34:13,980 --> 00:34:17,130 -Wes Bos: I had this one myself. And I could only think of one thing. - -247 -00:34:17,610 --> 00:34:20,480 -Unknown: Yeah, I use strict. - -248 -00:34:21,569 --> 00:34:46,380 -I don't know, I don't know if I know any of these. So I know that. One of the things that people complain about in JavaScript is that it does inference of a lot of things. And if I remember correctly, you strict was a way to turn some of that inference off or to make it stricter. And that helps avoid some kind of confusing errors. However, I have no idea if that is accurate or even close. - -249 -00:34:47,400 --> 00:34:54,690 -Scott Tolinski: My answer would have been it makes it more strict. Because I don't I don't think I've ever used use straight. I don't know why it just happened. You know, - -250 -00:34:54,710 --> 00:36:06,270 -Wes Bos: I know why. I know. I neither of you have done this and it's because you're probably writing modules. For years now, yes. All right and right about the time that this rolled out, you probably move to module so you never used it but you strict is, is if you've got a JavaScript file or a script tag, and you type in you strict at the top of it, it will convert that the JavaScript runtime to strict mode, which cleans it up. Because if you can't break old JavaScript, and some some things like you can create a variable without putting var in front of it, or you can have a global variable accidentally. That's the big one for me. One of the other ones here sometimes provides increased performance simplifies eval, and helps make JavaScript more secure. For me, it basically like turns off these silly things that we've had in JavaScript forever that you shouldn't be allowed to do, which is the case if you write JavaScript in a module. But if you still are writing JavaScript and a.js file, and that's why often when you bundle your JavaScript, you'll see the first line says, use strict and this way, if you like, create a variable without putting a VAR in front of it. It won't even run because you might accidentally be doing something that's bad. - -251 -00:36:06,510 --> 00:36:13,830 -Unknown: I'm not gonna lie. I didn't even know that you could do that in JavaScript like keyword. - -252 -00:36:13,980 --> 00:36:20,880 -Wes Bos: Yeah. That's good. It's funny and yeah, it's like, like, obtuse thing to know about JavaScript. But - -253 -00:36:20,880 --> 00:36:22,650 -Unknown: like, I didn't know you could do that either. - -254 -00:36:22,650 --> 00:36:25,590 -Wes Bos: All right. Well, dumped. stomped - -255 -00:36:25,770 --> 00:36:27,810 -Unknown: on was completely stumped. - -256 -00:36:30,900 --> 00:36:33,060 -Scott Tolinski: Yeah, stumped. stump shows no mercy. - -257 -00:36:35,070 --> 00:36:37,860 -Wes Bos: All right. Well, thank you so much for coming on. Really? appreciate it. - -258 -00:36:38,280 --> 00:36:42,920 -Unknown: Yeah, absolutely. Thanks for having me. Have fun with the rest of the episode. Congratulations on 300. - -259 -00:36:42,959 --> 00:36:44,550 -Wes Bos: Yeah, thank you. Okay. - -260 -00:36:45,710 --> 00:36:50,400 -Scott Tolinski: Spence. He said he could hear us now so Okay, yeah. - -261 -00:36:51,510 --> 00:36:53,760 -Unknown: Our thing was, hey, - -262 -00:36:55,530 --> 00:36:57,780 -Scott Tolinski: it's all good. You can hear us we're good. - -263 -00:36:58,109 --> 00:37:06,810 -Unknown: Oh, from the UK? Yes. Yeah, we say he's dead. And we put, you know, unnecessary use and stuff in - -264 -00:37:08,610 --> 00:37:12,380 -Wes Bos: the correct way, like, miles per hours on your street, right. - -265 -00:37:13,080 --> 00:37:14,900 -Unknown: Y'all don't know what's going on with that. So? - -266 -00:37:16,670 --> 00:37:19,940 -Scott Tolinski: Yeah, that is weird. Yeah, - -267 -00:37:19,940 --> 00:37:20,550 -Unknown: sorry about that. - -268 -00:37:21,149 --> 00:37:22,710 -Scott Tolinski: Your name is Scott as well. Right? - -269 -00:37:23,070 --> 00:37:23,690 -Unknown: It is Scott. - -270 -00:37:23,690 --> 00:37:27,170 -Scott Tolinski: Yeah. I've seen you around on the on the social - -271 -00:37:27,170 --> 00:37:49,730 -Unknown: sciences. Pretty much Spencer's 10 everywhere. So thank you guys, both you. I mean, I think Wes, and your JavaScript 30 was like one of the sort of the first part the gateway drug into me becoming like a proper professional web developer. So thank you. - -272 -00:37:50,040 --> 00:37:51,650 -Wes Bos: That's awesome to hear that you're welcome. - -273 -00:37:51,749 --> 00:38:03,110 -Scott Tolinski: I think there's a new toll that everyone's gonna have to pay to come on the show where they have to send us each a compliment at the beginning. Butter for his barbecue. - -274 -00:38:05,190 --> 00:39:42,380 -Unknown: So yeah, I just wanted to come on and plug act tober Fest, which no one has spoken about so far. So I've been contributing to a foster tree called MDX embed, which is lets you embed third pi things into your MDX file. So not just Gatsby, but next j s. And anywhere where you can use MDX you can use MDX embed, just just wrap it in in the provider and you can sort of embed tweets, YouTube videos. And that's the main thing I use it for, ah, there's a ton of stuff in there. And this is a really good success story from Oktoberfest. And I just like to say there was like 80, around 80 issues. And so Paul Scanlon, who is in his repository at the moment, he did a great job setting up an umbrella issue. And this was just for test coverage. So we could do a v1 release. And we've achieved it. We've got 98% test coverage, I think now, it was zero before. So thanks to this, just saying saying thanks to everyone contributing throughout October 1. So and thanks to Paul for, you know, for the library as well. So it's, it's been great. We've had tons of people come in and contribute. And it's been really active. And we did it. I mean, we did I think it was the AC issues and we just churn Wow, integration tests and enter in tests. So it's been great. So that's my plug. And we - -275 -00:39:42,380 --> 00:39:45,360 -Scott Tolinski: just talk about how awesome MDX is in general Ah, - -276 -00:39:45,360 --> 00:40:23,360 -Unknown: boy Yeah, no, I love MDX is the best and it just makes document stuff so much more fun. I tweeted the other day, I put a sarcasm component into my empty hex, just so I could rap a bit of text In the sarcasm component to say, up and down, I took it from weiss's proposal for the sarcasm proposal, which is basically just that and then put it into a component folder then CMD exe. And that's it. 10 minutes late, you've got a sarcasm component in your, in your mouth and so it's great. - -277 -00:40:24,000 --> 00:40:29,360 -Wes Bos: That's so good. Oh, that's hilarious. That's like actually a really good use case for learning. - -278 -00:40:29,480 --> 00:40:35,790 -Scott Tolinski: Yeah, totally. And shout out to those of you who use spelt there is an MD specs, which is a - -279 -00:40:35,790 --> 00:40:38,550 -Unknown: Yeah, no, I was looking at it. So it's - -280 -00:40:38,550 --> 00:40:42,110 -Scott Tolinski: a very good, I'll put it in the discord. It's very, very good. - -281 -00:40:42,900 --> 00:41:05,250 -Unknown: Brilliant. So that's me done. Thank you guys. And I have listened. I wouldn't say to everything hundred. But I have listened to nearly all of the syntax episodes. I listen to the a lot of podcasts. And a lot more thanks to your recommendation, Scott. So dotnet diaries. Oh, yeah. We're swindled and there's just tons of stuff now. - -282 -00:41:06,150 --> 00:41:14,340 -Scott Tolinski: The crime crime based podcast. Yes. It makes me very depressed. But - -283 -00:41:16,830 --> 00:41:19,260 -Unknown: later on that now I guess, but thank you, chaps. - -284 -00:41:19,290 --> 00:41:20,880 -Wes Bos: Thanks for joining us. Appreciate it. - -285 -00:41:21,090 --> 00:41:26,190 -Scott Tolinski: Thanks, Brad. You got it. Got your audio work. Anyway, happy to have you on Skype. - -286 -00:41:26,310 --> 00:41:28,770 -Unknown: Yeah, I can take my thumb off the spacebar now. Thanks, guys. - -287 -00:41:32,400 --> 00:41:37,050 -Scott Tolinski: James. James is gonna set up. Everybody's has pro setups. - -288 -00:41:37,230 --> 00:41:40,440 -Unknown: Sweet. I'm on. What's up with turn on camera. - -289 -00:41:40,920 --> 00:41:42,210 -Yeah. And like, - -290 -00:41:43,710 --> 00:41:47,420 -what's going on? This light is your chance to go dance at - -291 -00:41:48,230 --> 00:41:50,880 -a supernatural poster. I'll get a kick out of those. - -292 -00:41:51,270 --> 00:41:53,250 -Scott Tolinski: Oh, yeah. Oh, yeah. - -293 -00:41:53,370 --> 00:41:57,000 -Unknown: Well, thank you. I appreciate it. It seems like it's going well, this is super cool. - -294 -00:41:57,330 --> 00:42:27,150 -Scott Tolinski: It's very cool. We spent a significant amount of time trying to figure out the technical aspects of this. We're like, okay, let's use breakout rooms and zoom and like what the heck, we couldn't get anywhere. We tried a lot of different stuff. It's definitely pretty eye opening. And me personally, I learned how to do a countdown clock on OBS and a looping video with audio and stuff. It was pretty good. Yeah, I'm finally getting that OBS kick going. I know, James, you're you're pretty comfortable on. On OBS. - -295 -00:42:27,630 --> 00:42:44,940 -Unknown: I yeah, like I do it a lot. I actually stream this morning, but I don't do anything too fancy. And I actually have So you mentioned having the issue with recording the window with zoom was choppy. I've had the exact same thing. So I do the same. Grabbing the screen and then just clipping out the stuff that I need. Yeah, yeah. - -296 -00:42:45,000 --> 00:42:53,070 -Scott Tolinski: Yeah. I think I saw on the internet somewhere and was like, Oh, good. Just try and yeah, I'm using the stream labs OBS - -297 -00:42:53,400 --> 00:42:54,720 -Unknown: for us. Yeah. - -298 -00:42:54,720 --> 00:43:11,100 -Scott Tolinski: Yeah. It's pretty nice. There's all these plugins I got, I got that I actually a shame. ashamedly paid money just so I could get the gold color scheme. It's a golden black color scheme. There's a lot of other features that come with the Pro, but I don't care. I paint gold colors. - -299 -00:43:12,900 --> 00:43:16,230 -Unknown: So that we can shame you specifically for this. How much did you pay just for the gold? Oh, I - -300 -00:43:16,230 --> 00:43:18,630 -don't? I don't know. I don't know. - -301 -00:43:19,190 --> 00:43:21,060 -Wes Bos: It's a rounding error for Scott. - -302 -00:43:23,040 --> 00:43:52,530 -Scott Tolinski: Yes, no, it's uh, I was like, Well, if I'm gonna if I'm, well, there's a lot of extra little templates and gadgets and gizmos that they give you with it. So I was like, Well, if I'm gonna if I'm gonna do live streaming, I don't want to have to figure out how to do all that stuff myself. I want to click button, get countdown clock and then change the values though. Yeah, Jane, do you want to do a shameless plug a stumped question, a potluck question? Or was the other one a sec, pick? Six pick. Whatever you want. - -303 -00:43:52,890 --> 00:44:40,140 -Unknown: Yeah, I will. I'll volunteer for a stumped question. We'll see how it goes. But I would like to ask a question first, if you're cool with it. Yeah, I am now teaching my second round of a boot camp. But I know Wes, you've done that in the past. This one is twice a week at nights. And this one is virtual this time around the last one was in person in Memphis. So it's a different experience. And a lot of what we talked about, I've talked about this on the podcast before but just the idea of imposter syndrome, the idea of being really nervous to ask questions specifically, that's the easiest way for people to fall behind. So any like we bring this up, myself and ta are always encouraging people. Hey, ask questions. What questions do you have trying to be pre emptive any specific advice on how to really keep keep people engaged and make them feel comfortable asking questions to make sure that as they start to Yeah, maybe fall behind that we kind of catch on pretty quick. - -304 -00:44:40,379 --> 00:45:47,160 -Wes Bos: My answer is gonna be for in person because I spent a lot of time like thinking about this and because what would happen is you would teach something, and the question was come up during that time, and then I made sure that we had like 1015 minute like, work on it yourself breaks, and then I had to master the walk around. The classrooms slowly but not like a teacher who's trying to look at everyone's screens. And just saying like, hey, any questions over here or like really reading body language from certain people and you just like walk it up, like, hey, everything looking Okay, or, or whatever, or even just like going up to somebody who had finished it and the check it out. And then while you're sitting down usually the person next to it would be like, actually, you know what, I have a quick question as well. So just like trying to, like tease the questions out of people. And it literally it's just being physically close enough to people where they're like, okay, now it's not a big deal. You know what, while you're here, come on over, and I got a question and then and whatnot. So that was that was my little trick. And I feel like I got that down pretty, pretty down pat, because I could stand in front of the class and say questions. Nobody, nobody's gonna Yeah, nobody's - -305 -00:45:47,160 --> 00:45:48,420 -Scott Tolinski: gonna say yeah, - -306 -00:45:48,450 --> 00:45:57,030 -Wes Bos: yeah, start walking around tons of questions. And also, like, people would listen into other people's questions. They have questions on that. So that's, that's my advice there. - -307 -00:45:57,750 --> 00:46:33,480 -Unknown: Oh, yes, definitely. It's a challenge being completely remote. So we have Yeah, and it's actually an interesting program, we start with 160 students. So it's just kind of a numbers game really of like, it's free. So we have a ton of people start or down probably to 130 or so now after a couple of weeks. And that's expected. So I do like a main lecture thing for everyone in zoom and then we break out into our ta groups and then I kind of float around and try to help there so it's a it's a different thing trying to do a virtual versus actually being able to be there in person read the body language like I try to see as many faces as I can but you can only see so zoom at a time. Totally. - -308 -00:46:33,600 --> 00:46:39,390 -Scott Tolinski: Let's get a stumped question going here. Let me know my papa papa, papa, papa, papa, papa. - -309 -00:46:39,870 --> 00:46:58,260 -Wes Bos: I got Yeah, you might you might not know this one. This one is this one is easy. But I this is something that I know a lot of people don't know, because maybe not necessarily something they've used. What is the difference between the post fix i plus plus and prefix plus, plus i increment operators. Okay. - -310 -00:46:58,710 --> 00:47:38,850 -Unknown: So one will do I have to like, picture it in my head to actually explain which one, one will increment the value first before, like, you actually get to reference it and the set the other one will like reference it first and then increment it. So if you do, like plus, plus, if you console log plus plus i, it would increment i and then log versus if you i plus, plus, it would log I and then add the one. I was like, I was waiting for some sort of reaction to see if I if I was even close. And then - -311 -00:47:38,850 --> 00:47:39,510 -Wes Bos: what can I - -312 -00:47:44,130 --> 00:47:59,910 -Unknown: so I'm gonna I'm gonna strip that out of the YouTube video later on, and use that for like, my promotional stuff. This is the highest reward I've ever gotten is the flyers and the energy drink combo. - -313 -00:48:03,060 --> 00:48:14,580 -Wes Bos: That's good. Good. Well, good job. That's it. I remember that one biting me and I didn't know it and that I very clearly remember having an off by one error. Yep, like something. - -314 -00:48:15,480 --> 00:48:17,430 -Unknown: That's a tricky one. Definitely. And it's not. That's why - -315 -00:48:17,430 --> 00:48:27,180 -Wes Bos: like a lot of us Lin will say, just don't use those at all. Use those circles if you need to. Because it can bite you if you don't know you're doing. - -316 -00:48:27,630 --> 00:48:29,040 -Unknown: Yeah, yeah. - -317 -00:48:29,760 --> 00:48:42,810 -Yeah. And you almost never see. Unless you really know what you're doing. You're almost ever c++. I, uh, you almost always c++. So throw that in for someone that doesn't specifically know what it does would would definitely throw them off. - -318 -00:48:43,020 --> 00:48:48,300 -Scott Tolinski: Yeah. I don't know if I use that much outside of like, I don't know if I use that ever anymore. - -319 -00:48:48,570 --> 00:48:49,410 -Unknown: Yeah, like, - -320 -00:48:49,410 --> 00:48:50,430 -I know that I, - -321 -00:48:50,670 --> 00:48:59,070 -Scott Tolinski: I do. plus equals Yeah, yeah, I'm trying to think of when I when I was thinking like loops. It's like a written loop and no 1982. - -322 -00:48:59,670 --> 00:49:26,130 -Unknown: So you want to start my biggest pet peeve right now. And teaching is right from scratch. So we're learning for loops. And as I'm writing out all this stuff, for several days before we learned about map, or like I showed them for each, I was having to type all these damn for loops, like every single time and it was like the bane of my existence. It's like, if I were to do it in VS code, for example, I've got snippets. But now I need to actually explain what I'm doing. So it's like, yeah, worse to type - -323 -00:49:27,000 --> 00:49:32,310 -Wes Bos: a semicolon after the anchorman condition. Don't Yeah, it's funny. - -324 -00:49:32,340 --> 00:49:47,340 -Scott Tolinski: My biggest thing is when when prettier stops working. And I've realized just how awful I am at formatting by people, like start mashing the keyboard and then when I click Save, and it doesn't fix itself, I'm like, What is going on here? This code looks terrible. And I - -325 -00:49:47,490 --> 00:49:59,970 -Unknown: I look like not so great of a developer because I make lots of mistakes because right now we're using a browser thing called restlet. Which is not vs. Oh, yeah. And they see me make all sorts of mistakes that I wouldn't usually make inside of VS code whatsoever. - -326 -00:49:59,970 --> 00:50:07,470 -Wes Bos: Up. The chat is like, why do you have pliers on your desk? And someone's like, Wes has a bunch of random motors on his desk. I'm like I do. - -327 -00:50:08,220 --> 00:50:32,700 -Scott Tolinski: That's true. I mean, I have a bunch of random crackers, which is really crackers and cold beers. Really my mo here. You know what else is something that is a really big problem of mine, when I really don't like it is when I have bugs and creepy crawlies in my code. And one thing that I do to get those out of there, James, do you know what it is, when I have bugs in my code - -328 -00:50:32,910 --> 00:50:36,810 -Unknown: I missed to the sponsor was, so I don't want to guess I was one and then mess it up. - -329 -00:50:37,260 --> 00:51:55,110 -Scott Tolinski: Okay. Oh, that is very kind of you, because it is your century. I'm talking about century hi.io. This is a error and Exception Handling service that Wes and I both use for a very long time that really gives us all sorts of really awesome information about our application at any given point is totally a central piece of software. In my mind, if you are running any sort of application that people are using, because people have bugs, people have issues, and then you get to catalog them. And if you're in a team, you get to say, somebody else do this for me. And then you can have them fix it, submit the issue marked as resolved and then be shocked and horrified when it comes back. And it is a regression because that's just how life is right. So head on over to sentry@sentry.io use the coupon code tastytrade all lowercase all one word, and you will get rid of all those creepy crawlies in your here's, here's what's gonna happen if you sign up for century those creepy crawlies, they're going to turn into gummy worms. And that's going to be a lot and I'm going to eat them. Because that's that's how the candy situation is going in my household. Right? We we were on a call with unrelated we were on a call with my parents the other day and they said something about the candy and Courtney was like, I don't know if we're gonna have any left because Scott ate a whole bag of the coffee. - -330 -00:51:58,380 --> 00:52:06,690 -Wes Bos: Scott, you totally missed my softball. I was trying to give you I was drinking from the Netlify water bottle. And I thought that transition - -331 -00:52:06,720 --> 00:52:16,740 -Scott Tolinski: Hey, Wes. The yes answers are read in the order in which they're in the know document or the notion document and - -332 -00:52:17,760 --> 00:52:18,300 -Unknown: notes. - -333 -00:52:18,720 --> 00:52:20,850 -Wes Bos: Yeah, check your no my bad My bad. But no, - -334 -00:52:20,999 --> 00:52:24,330 -Scott Tolinski: I could not. I couldn't see the Netlify logo on your water bottle. - -335 -00:52:24,780 --> 00:52:28,800 -Unknown: But I saw it. I just didn't know what he was doing. I thought he was just like really proud of the water bottle. - -336 -00:52:29,249 --> 00:52:37,200 -Wes Bos: I have a century shirt too. I should like go full. What's the author? He's wearing? He's wearing all the Reebok. - -337 -00:52:37,830 --> 00:52:38,580 -Scott Tolinski: We wrote - -338 -00:52:38,970 --> 00:52:44,340 -Wes Bos: Wayne's World. Wayne's World on the on the swag. Cool. - -339 -00:52:45,030 --> 00:52:51,270 -Unknown: For what it's worth. I was gonna guess century by the way. I just didn't quite hear the interest. So I didn't know I didn't want to say it wrong. But - -340 -00:52:51,480 --> 00:53:01,350 -Scott Tolinski: it was verified. verified to be data. Excellent. Thank you. Okay, anything else? I shamelessly plug anything I'm - -341 -00:53:01,680 --> 00:53:31,380 -Unknown: sure we have. Yeah. YouTube, James q quick. And recently put out an E book actually called YouTube for developers at YouTube for developers calm Oh, awesome about how to get started why people should the benefits that come along with it. Really the benefits like for your career, and I just record a video this morning. That is not live yet. But like the five things that I've learned doing YouTube videos and how it's influenced my career. So YouTube for developers calm and then just James q quick on YouTube. - -342 -00:53:32,100 --> 00:53:37,650 -Scott Tolinski: sec. James, really appreciate it. Yeah, appreciate it. It would have been 300. Without Yeah, that's for sure. - -343 -00:53:38,640 --> 00:53:43,950 -Unknown: Well, I feel pretty privileged that I got to be part of a transition for a sponsor. That was pretty special. - -344 -00:53:44,280 --> 00:53:51,450 -Scott Tolinski: Yeah. How the coffee is made. Alright, - -345 -00:53:51,450 --> 00:53:52,260 -Unknown: I'll talk to you later. - -346 -00:53:52,800 --> 00:53:56,250 -Scott Tolinski: See ya later, James. Yeah, we're gonna get whaletail on. - -347 -00:53:56,370 --> 00:54:00,600 -Wes Bos: Yeah, I'm gonna take a break. I'll be right back in two seconds. - -348 -00:54:00,840 --> 00:54:03,660 -Scott Tolinski: How about I take a break too. Okay. And we just leave. - -349 -00:54:04,650 --> 00:54:06,450 -Wes Bos: We'll just leave it. We'll help. - -350 -00:54:07,770 --> 00:54:09,570 -Scott Tolinski: I need some some water here. I'm - -351 -00:54:09,570 --> 00:54:13,740 -Wes Bos: getting a little tired. Why don't you just add a bunch of people to the stream and then we'll leave. - -352 -00:54:16,740 --> 00:54:23,820 -Scott Tolinski: No, you go first. Well, and then I'll go. Okay. Well fail. Well, we'll fail you. - -353 -00:54:26,100 --> 00:54:27,450 -Unknown: Got it got the mute. - -354 -00:54:27,450 --> 00:54:28,680 -Scott Tolinski: Where's a plan? - -355 -00:54:28,680 --> 00:54:30,210 -Unknown: I am an egg plant. It's - -356 -00:54:30,210 --> 00:54:35,850 -my Halloween costume because discord hasn't implemented. Server specific photos. - -357 -00:54:38,430 --> 00:55:04,980 -Scott Tolinski: that's a that's a pretty, pretty dope Halloween costume. My son is going is a dragon and I'm trying to Well, we're not going out. But I'm trying to figure out what what to be wearing around the house. I'm notoriously bad at Halloween costumes. I was LL Cool J ones and I was a Fresh Prince once and then I was a golfer. They're just all terrible costumes and everyone would be like, I have no Do what the hell you are, like, well, I'm wearing a candle and I'm wearing a vest. So I'm obviously LL Cool. J. - -358 -00:55:05,670 --> 00:55:06,540 -Wes Bos: Oh my god, like, - -359 -00:55:06,780 --> 00:55:07,650 -Unknown: I don't know about it. - -360 -00:55:08,400 --> 00:55:18,750 -I've been like the same Mario costume for the past like four years since I started University. So on the terrible costumes thing can't be - -361 -00:55:19,410 --> 00:55:23,760 -Scott Tolinski: the one. You seem like you could rock a pretty pretty mean Mario with that mustache. - -362 -00:55:26,460 --> 00:55:38,040 -Unknown: I think I'm better left to get enough attachable Yeah. Princess in a castle would want this moustache saving. - -363 -00:55:38,070 --> 00:55:45,390 -Scott Tolinski: So I'm going to take over for a second. I'm gonna get I'm gonna get some tea. All right, good. - -364 -00:55:45,450 --> 00:55:48,300 -Wes Bos: Well fail. Is that reference to Twitter - -365 -00:55:48,330 --> 00:55:53,430 -Unknown: going down? reference to Twitter going down? No. Didn't have something to do. - -366 -00:55:53,910 --> 00:56:12,690 -Wes Bos: No. Yeah, yeah, that was well, also Olden, Olden folk when Twitter used to go down like every day. Therefore a four page how to fail whale on it. And when something would go down, you'd be like, oh, that that service fail. Well, their whale failed. was in reference to - -367 -00:56:13,350 --> 00:56:16,500 -Unknown: my last name is MacPhail. So just - -368 -00:56:16,530 --> 00:56:19,200 -Wes Bos: seriously, that's amazing. Yeah. What's your first name? - -369 -00:56:19,770 --> 00:56:20,370 -Unknown: Austin. - -370 -00:56:21,030 --> 00:56:22,350 -Wes Bos: Austin, where are you from? - -371 -00:56:22,350 --> 00:56:24,720 -Unknown: Saskatchewan, Regina. - -372 -00:56:25,200 --> 00:56:45,720 -Wes Bos: Oh, a Canadian and my wife is from yorkton. Oh, really? Yeah. So not far away. I've been to Saskatchewan many times in the winter, which is absolutely freezing. But yeah, Saskatchewan. Ian's are in an odd type. What do you what do you call this that I'm wearing right now? - -373 -00:56:46,169 --> 00:56:55,500 -Unknown: That is to me because I find the word bunny hug embarrassing. When I say to other people, I say hoodie. Yeah. - -374 -00:56:56,670 --> 00:56:58,140 -Wes Bos: I call it a bunny hug. - -375 -00:56:58,350 --> 00:57:03,180 -Unknown: Yeah, there's there's billboards when you're driving that says our CEO calls it a bunny hug. - -376 -00:57:05,310 --> 00:57:06,090 -That is the - -377 -00:57:07,470 --> 00:57:08,280 -CTO to - -378 -00:57:09,450 --> 00:57:14,430 -Wes Bos: yummy. You have your own Ted like telephone company up there to sask tell which is - -379 -00:57:14,460 --> 00:57:29,040 -Unknown: Yeah, we got my bed actually right now they have been making a bunch of noise outside my house or outside my apartment installing infinite, which I'm very excited for. Because that is their LTE. The fiber lines. - -380 -00:57:29,700 --> 00:57:31,230 -Wes Bos: Oh, man, - -381 -00:57:31,440 --> 00:57:39,690 -Unknown: they can highlight good speeds. Oh, that's awesome. So I don't I don't have a nice setup like everyone else. But I do massage chair. So - -382 -00:57:39,750 --> 00:57:46,920 -Scott Tolinski: Oh, buddy. Well, okay, well. Yeah. Is that your normal chair? - -383 -00:57:47,160 --> 00:57:47,700 -Unknown: No, - -384 -00:57:47,700 --> 00:57:56,220 -I just I got this from my dad. Not that long ago. They didn't need it at their condo. So they asked if I wanted it. And I could not say no - -385 -00:57:56,460 --> 00:58:01,230 -Wes Bos: to a computer chair. Or it's just like one of those like lazy boys at the mall. This is - -386 -00:58:01,230 --> 00:58:02,160 -Unknown: a lazy boy. - -387 -00:58:04,740 --> 00:58:18,300 -Wes Bos: Dreams, man. Like My dream is to have one of those L shaped couches, that every single spot that you sit in is a lazy boy that has a cooler and cupholders and my wife is like never in your life. Will we buy that? - -388 -00:58:19,590 --> 00:58:54,870 -Scott Tolinski: One, one time in high school. One of my friends his dad had a company that invented the shoot with just dizzy I always remember the name of this thing. But it is essentially a golf ball puzzle that you could print a logo on and sell. And he sold the company for like millions of dollars. And the first thing they did was build build a theater in their basement. And the theater in their basement had like rows of massage chair. Massage, but it was just like the dude went from like one day being like normal, normal everyday dude to the next day. A massage chair theater. - -389 -00:58:56,310 --> 00:58:58,710 -Wes Bos: Kind of money. I hope that one day is massage. - -390 -00:58:59,280 --> 00:59:07,950 -Scott Tolinski: a golf ball puzzle man a golf club puzzle. It had a really good name to I forget what it was the bogey buddy. Oh my gosh, the boat. That's awesome. - -391 -00:59:09,780 --> 00:59:12,840 -Wes Bos: What do you what do you got for us today? What do you want to talk to us about? - -392 -00:59:13,200 --> 00:59:15,230 -Unknown: Okay, so I've - -393 -00:59:15,479 --> 00:59:16,170 -always had - -394 -00:59:17,370 --> 00:59:50,430 -problems with Eclipse. prettier and VS code working together. The tutorials I think if the step of where they've selected their extension, and they go right to npm install, yes, lint. Oh, Bob's your uncle. I hit save and my code looks good. But I feel like there's a step missing there because I've just been given so yes, lint and stuff doesn't work. And then I realized oh vs lint or VS code has this autosave plugin. Yeah. - -395 -00:59:50,850 --> 00:59:59,070 -So yeah, we're like what is the process that it's on the headphones are really physically here. here once again. Oh, yeah. - -396 -00:59:59,280 --> 01:00:10,560 -Scott Tolinski: Your question is About VS code and es lint and prettier playing nicely together, which I have a significant amount of problems with myself. I feel like, right. Am I? - -397 -01:00:10,950 --> 01:00:15,000 -Wes Bos: Sorry? The question was like, how do you set it up? Or like What's missing? Yeah, like - -398 -01:00:15,000 --> 01:00:48,720 -Unknown: What's missing? Because it's like, it's obviously not bibbidi bobbidi boo MPN my es lint and prettier. And it all just works when you get your prettier RC and or es lint RC. Get all that extension set up. But you're in suddenly we are in B, we Airbnb in here. No, there's there's a VS code setting. But I don't know which one it is because there's three extensions. vs. Code. Yes, lint VS code prettier. And then VS code prettier es lint. And I don't know which one to select as default for better. - -399 -01:00:49,440 --> 01:01:10,110 -Scott Tolinski: The way the way that I do it is I just keep installing and adding configs until it works. And then No, no works. I just don't touch it. Yeah, anything more official than that? Brittany posted a really nice blog post that she did in the chat about getting it all set up. So maybe that might be a good help, Brittany might be the - -400 -01:01:10,260 --> 01:02:11,670 -Wes Bos: I've spent a lot of time on this. Because it's so frustrating. It never frickin works. And I I too, and I set off to disaffiliated. It's because of moving parts. There's, there's prettier, there's. And then there is also three extensions in VS code that could be installed. And then there also is a beautifier built into vs. Code. Yep. And they can fight with each other. So personally, I use both es lint and prettier. A lot of people just use prettier but i like i like getting the feedback from Yes, lint, and I like getting the formatting from prettier. So the way I do it is I use prettier via an es lint config. Not every es lint config will do that. But I put them together. So it's just one config at the end of the day, then you need to not install any prettier VS code extension, you only need to install the ES lint extension. And then you need to go into your settings. And this is all documented. I have a just Google no sweat, - -401 -01:02:11,790 --> 01:02:14,730 -Scott Tolinski: yes, lint. That's such a West blog title. - -402 -01:02:16,590 --> 01:02:48,690 -Wes Bos: It's a it's a YouTube video, and it's a readme on on GitHub. And it goes through all the VS code, you got to turn off format on save and you got to turn on code actions on Save dot fix all. So you have to go off and turn something in this even this morning, I was battling. I'm working on converting my config to TypeScript. And I have the prettier comma Dangal setting and I have the ES lint no comment dangle setting. They were fighting each other. So every other time I saved it will go back and forth. - -403 -01:02:50,040 --> 01:02:51,060 -Scott Tolinski: I know that. - -404 -01:02:52,920 --> 01:03:16,620 -Wes Bos: So yeah, I've I've honestly spent days working on my config. And you don't have to use my config because you can just follow the settings and plug in your own or you can extend it But yeah, I feel you there it's always frustratingly and I've gotten to a point now where I can get all my tutorial people up and running on it. Because the auto format is such a key thing when learning. Yeah, so good. - -405 -01:03:17,100 --> 01:03:29,640 -Unknown: Yeah, well, I mean, like, like Scott was saying, It feels weird when he doesn't have the auto format or and it's when you actually like backspace stuff and add a semi colon or remove it. - -406 -01:03:30,660 --> 01:03:53,670 -Scott Tolinski: Yeah, it makes me feel so weird about how I used to code like without I mean I had to yes lint but even he esslyn Did you know auto formatting at some point, whatever. But like, man before prettier and Ts lint together side by side kicking butt I don't know what I did. Personally, I think my code just probably look terrible. And now Thank you very much. - -407 -01:03:54,180 --> 01:04:45,000 -Unknown: Okay, so I know this is probably running a little longer because you guys took your segmented break there. Now let me hang on let me hang in. So I think I'm gonna skip the stumped and not risk myself embarrassing myself. But I do kind of want to plug something because I want to I want to get some feedback on it. Because Yeah, you guys decided to go with Gatsby and sanity for an artist blog site artists blog slash portfolio site. So let me know I guess folks at can go to Erica er, I see kk a weird would say spell Erica dot art. And that's like my first kind of solo project that I've launched ever. And they just kind of went back. Let me know. Cool. - -408 -01:04:45,120 --> 01:04:59,970 -Scott Tolinski: Yeah, my network is being really slow. What's going on here? I'm only streaming and doing all this video stuff. Why isn't it going faster? A e i r e i know er like aka.rs - -409 -01:05:00,810 --> 01:05:03,150 -Unknown: There's a C before the two K's. Okay, - -410 -01:05:03,180 --> 01:05:10,680 -Scott Tolinski: well, that is a good. Good for me. Hey, great. Yeah, yeah. Cool. - -411 -01:05:11,220 --> 01:05:34,050 -Wes Bos: Nice job. You. I don't think you're using the Gatsby sanity image component. No, I thought that would be. Yeah, cuz a Gatsby image Sanity provides all the pieces you need for Gatsby image. And it will provide you multiple sizes and resizes and image formats. So that's probably somewhere to look, but it looks awesome. Nice job. All - -412 -01:05:34,410 --> 01:05:41,820 -Unknown: right. Thanks. Thanks, guys. And thanks for having me on. And then your answering this question. Hopefully that is my feature was, - -413 -01:05:41,820 --> 01:05:43,920 -yeah. All right. All right. - -414 -01:05:44,520 --> 01:05:46,590 -Scott Tolinski: Have a good one. Well, thanks for popping on. - -415 -01:05:47,040 --> 01:05:49,230 -Wes Bos: Pop and Lock in, pop in and lock it. - -416 -01:05:49,260 --> 01:05:50,310 -Unknown: All right. I know. - -417 -01:05:51,690 --> 01:05:54,630 -Wes Bos: Tons of people on it. All right. You are you grabbing someone's got? - -418 -01:05:54,810 --> 01:05:58,200 -Scott Tolinski: I have added Dave kiss. - -419 -01:05:58,560 --> 01:06:05,250 -Wes Bos: This is fun. There's there's like a little chat room going on YouTube. A huge chat room going on. The Discord. - -420 -01:06:05,670 --> 01:06:09,510 -Scott Tolinski: Oh, yeah. Oh, yeah. And I'm trying to monitor them all. - -421 -01:06:11,160 --> 01:06:14,070 -Wes Bos: I'm not looking at your YouTube is there. There's a bunch of people in there too. - -422 -01:06:14,580 --> 01:06:19,500 -Scott Tolinski: Yes. Oh, you have people in yours as well. Yeah. That's what we do. simulcasting. - -423 -01:06:20,550 --> 01:06:21,180 -Unknown: We're, - -424 -01:06:21,330 --> 01:06:24,720 -Scott Tolinski: we made it. Hey, Whoa, look at that setup. - -425 -01:06:25,080 --> 01:06:30,690 -Unknown: Yeah, this is my this is my work from home office. I need a little bit. Lucky going on. You know, no, my - -426 -01:06:30,810 --> 01:06:37,860 -Wes Bos: gosh. So Insta worthy. Are you sure you're not desk boy? Um, - -427 -01:06:37,920 --> 01:06:39,030 -Unknown: I'm not sure what that is. - -428 -01:06:40,800 --> 01:06:42,930 -Scott Tolinski: It's uh, yeah, that's a definitely West thing. - -429 -01:06:44,580 --> 01:06:50,820 -Wes Bos: It doesn't boys is someone who posts a photo of their desk on Instagram every day. Oh, man, that's sick. His office. - -430 -01:06:50,850 --> 01:06:59,730 -Scott Tolinski: You know what the saddest thing about that is the West is that like, when I do that? When I post a photo of my desk every day on Instagram? I get way more people following me than when I - -431 -01:06:59,730 --> 01:07:03,960 -Wes Bos: worked. Oh, I do too. Or just Yeah. Just joshing around. - -432 -01:07:04,170 --> 01:07:11,220 -Unknown: ojama covered in Sour Patch Kids wrappers, and Oh, yeah. That probably wouldn't go too far. - -433 -01:07:11,970 --> 01:07:22,710 -Scott Tolinski: Sour Patch or top tier Halloween candy for me in my mind. I'm a Gummy that I'm I'm I'm a salt. sugary, sugary, sweet gummy guy. That's definitely my my go to. - -434 -01:07:23,130 --> 01:07:23,670 -Unknown: Yeah, it's - -435 -01:07:23,670 --> 01:07:26,310 -definitely I think a pretty underrated - -436 -01:07:27,030 --> 01:07:29,190 -Wes Bos: the chocolate gets all the love peanut butter chocolate - -437 -01:07:29,190 --> 01:07:30,600 -Scott Tolinski: chocolate does get all the love. Yeah, - -438 -01:07:30,600 --> 01:07:33,750 -Wes Bos: peanut butter chocolate kind of guy. You're not a big candy guy. So - -439 -01:07:33,750 --> 01:07:40,770 -Scott Tolinski: I'm not either but like if there is a gummy worms in the house. I'm all over those gummy worms. That's for sure. - -440 -01:07:41,250 --> 01:08:00,450 -Unknown: Alright, check this out. I got a sick pic for y'all love it. All right, you were mentioned before about how you're using. I think OBS for like the fancy middleware for your video to your stream, right? Oh, yeah. I just came across this. not affiliated with it called Hmm. You ever hear of it? - -441 -01:08:00,690 --> 01:08:02,480 -Wes Bos: Mm hmm. No, - -442 -01:08:02,550 --> 01:08:28,709 -Unknown: ah, check it out. Okay, so this is what I'm using to kind of compose this thing. So essentially, what happens is you get like this keynote for your live stream. So you have the ability to put together slides or pipe in your video. And I could also co pilot it if I want to throw another remote webcam here in the corner. And then as a background, I can change the room on me and I get these pointers to be able to like say this is what I'm talking about over here. - -443 -01:08:28,709 --> 01:08:30,140 -Oh, someone mentioned - -444 -01:08:30,539 --> 01:08:37,970 -that Twitter thread. I can share my screen. It's super dope. I've been using it lately on some demo calls. And it's been pretty great. - -445 -01:08:38,270 --> 01:08:41,039 -Scott Tolinski: I like their branding. Once they finally arrived here. - -446 -01:08:41,039 --> 01:08:47,850 -Wes Bos: Yeah. I especially like that they're using grunge on their website. And I think it is the same grunge I use. I - -447 -01:08:49,079 --> 01:08:50,520 -Scott Tolinski: do like the paint splatter when I remember - -448 -01:08:50,520 --> 01:08:57,659 -Wes Bos: you know behind it is like a subtle. Oh, is that correct? Oh no, that's my monitor. Oh my gosh. - -449 -01:08:58,640 --> 01:09:06,020 -Scott Tolinski: Like what are you talking about? I see that your monitor is so crappy or is that dirty? It - -450 -01:09:06,140 --> 01:09:45,720 -Wes Bos: is dirty? Because no, let me explain that so that you could get as aggressive. So you know why? Okay, two things. First of all, we just ran out our top room up here. And we just threw out the drywall out this window into the river. So not joking. We put in a thing. And we're this guy's just still laughing. And they hit the guy and I couldn't. And then I got the Ben q light. And it Oh, yeah, she delights straight down. Yeah, and I didn't realize how dusty that was that I thought it was grunge. Wow. Anyways, that's been bad day. So - -451 -01:09:45,720 --> 01:09:49,560 -Unknown: do you just get like a rain in the towel? There's really not much to it. Yeah, - -452 -01:09:49,560 --> 01:09:50,270 -I got - -453 -01:09:51,350 --> 01:09:53,930 -Scott Tolinski: one of these. microfiber though. - -454 -01:09:53,930 --> 01:09:57,810 -Wes Bos: Yeah, you send it over that way. Like that's a quick Sorry, I do have one. - -455 -01:09:58,710 --> 01:09:59,970 -Unknown: Here's a better route. Oh, - -456 -01:10:00,000 --> 01:10:01,310 -Go to curl. Yeah. - -457 -01:10:01,830 --> 01:10:12,119 -Scott Tolinski: For those of you who are listening at home, there is a spooky house. You can tell it's a spooky house because there's the sinuses keep out on the front and the green - -458 -01:10:12,119 --> 01:10:31,830 -Unknown: listening to Oh, so all these like awkward pauses are gonna make a home No. Well sick pick. Yeah, that's what I got in terms of sick pick. I, truthfully, the stump thing I was like down for it. And then I think I got virtually stumped from all the other questions as well. I couldn't get embarrassed. But uh, I guess I'm down to try it. - -459 -01:10:31,949 --> 01:10:32,550 -Wes Bos: All right. - -460 -01:10:32,760 --> 01:10:35,580 -Scott Tolinski: Yeah, I think we should did chest test your luck. - -461 -01:10:35,930 --> 01:10:38,010 -Unknown: All right. Roll the dice. - -462 -01:10:38,180 --> 01:10:38,850 -Wes Bos: Okay. - -463 -01:10:38,850 --> 01:10:41,040 -Scott Tolinski: It's not master West in the house here. - -464 -01:10:41,220 --> 01:10:54,560 -Wes Bos: This is a CSS question. What is the difference between the plus and the Tilda sibling selectors in CSS? Oh, - -465 -01:10:55,430 --> 01:11:27,119 -Unknown: plus Hill dot kilda, tell D, for those listening at home on a preface this answer with its completely made up. So don't take it for granted. Don't think for the truth. The plus is going to select the element that is right next to the element that you're targeting with the original selector. And the Tilda is a like a parent selector for the current element. That'd be that. - -466 -01:11:27,390 --> 01:11:31,170 -Scott Tolinski: That'd be neat. The second one would be cool. If that existed. - -467 -01:11:31,640 --> 01:11:48,540 -Wes Bos: Now, that close enough that you got the first part, right, first one is right. Yes. Is the next the adjacent, the adjacent siblings, and the Tilda selects all further siblings and the exact next one, right? - -468 -01:11:48,770 --> 01:11:50,310 -Unknown: Correct. Yes. - -469 -01:11:50,310 --> 01:11:51,180 -All right. - -470 -01:11:51,180 --> 01:11:51,869 -That wasn't bad. - -471 -01:11:52,290 --> 01:11:59,369 -Scott Tolinski: Yeah, no, you got sweet. All right selector would be very cool to have a be very intuitive parent selector. - -472 -01:11:59,970 --> 01:12:28,350 -Wes Bos: Yeah, I wonder if we'll ever get that. Like there was some talk about like putting like an asterisk on the selected element. So you could say like, this came out the other day. In next .js released the image component. And if you put a class on the image, it puts it puts the class on the image itself. But it wraps it in a couple divs because of responsiveness or whatever. And there's no way to select, there's no way to add a class currently there. They'll they'll add it, I'm sure. But I was like, yeah, it would be cool to have a parent selector in CSS. - -473 -01:12:28,520 --> 01:12:44,790 -Unknown: There's some crazy thing that I'm doing and one as one of my selectors, I don't know what it is. Maybe you can enlighten me to tell me how I'm doing this thing. But I thought it had some like, I've never seen too much about this, but it was like equals Tilda - -474 -01:12:46,020 --> 01:12:47,340 -maybe equals - -475 -01:12:47,390 --> 01:12:48,420 -or r star equals? - -476 -01:12:48,420 --> 01:13:53,159 -No, it was it? Or maybe the other way around? Let me see real quick, essentially, to describe it before before I can find it is. So yeah, it's a tilde equals. So I have a I have a class that essentially an element child of that of the top level class, I wanted to like look up the tree and say, Hey, if the thing above me, like somewhere up there has this class associated with it, or in fact, I'm using maybe I should just put this in the score. And you have tell me exactly what this looks like to you. So this isn't a style component. Okay, check that out. So this goes into a style component for part of the app that I'm working on. And something about that allows it to look up the tree and determine whether or not in this case we have is like this data attribute right to determine whether or not that element up there has that data attribute so what's going on there that I mean I was like, I don't know I must I have no idea offbeat up and I saw but it actually it works somehow I don't really understand it - -477 -01:13:53,160 --> 01:14:41,720 -Wes Bos: though. The Tilda is, I think it's like the star where it's it does like a partial match. So you could say anywhere where the title or attribute or class is has the word LG in it. So it could be LG dash five LG dash six, anything that just starts with or has that LG in it, we'll we'll do it the and percent selector. I think that is something styled components. I've not seen the at the end of I've not seen the ampersand at the end of a selector like that. That's definitely not CSS, regular CSS, but because of style components, maybe it has the ability to traverse the selectors and go up. But usually the end is like and this thing plus the followings selector, right? - -478 -01:14:41,760 --> 01:14:58,770 -Unknown: Yeah, that's how I've always used it. And I must say, like, I don't know, like I said, stayed up late or had too much coffee and you just get one of those zones where you just start coming up with I don't know something that came out one time and I've never been able to actually figure out how, what it meant or why I wrote it, but it actually was I was pumped about it. - -479 -01:14:59,460 --> 01:15:08,670 -Scott Tolinski: Very weird. We're checking. Interesting. Cool. Well, well, thanks for sharing that. We'll we'll check that out and see what the heck is going on there. Yeah, we - -480 -01:15:08,670 --> 01:15:10,619 -Unknown: know I'd love to follow up on that at some point, - -481 -01:15:10,640 --> 01:15:49,470 -Wes Bos: I just found a blog post about it. Oh, the ampersand will allow you to have siblings of a styled component that's actually handy. So let's say you are in a style component, and you have like a like a list item stuck style component, and then you have a next one beside it, the ampersand will allow you to select the next styled component, no matter how deep you are, which is, that's really cool. So if you're if you're five levels, deep Oh, selectors inside of one style component, you can still select the next top level styled component without having to go back up the tree and then into it. That's awesome. I didn't know that existed. - -482 -01:15:49,920 --> 01:17:14,430 -Scott Tolinski: The I didn't know they existed either. Straight up. Well, uh, that, uh, that that's definitely Awesome. Well, thank you so much for sharing that, Oh, well, shaking his his water bottle letting me know that it is time to talk about hosting. Because if if you could get this, get this, if you wanted to share this neat little bit of information that you just shared with us, what are you gonna do? Well, the easiest way to do anything is to just pop up a quick little blog on Netlify. And it is a very quick, you can do it with any tech you want, including styled components in Gatsby and whatever you might like to do are spelt in some front end tech or some view and whatever. You can pop any front end code on and Netlify in just about two seconds, and it's so dang easy. You just pass it in a GitHub repo and, Wham it, it's up. And it takes care of all that continuous integration stuff that's so hard to set up. Who wants to fiddle with build pipelines, when you can just get it for free with Netlify. So you're gonna want to check out Netlify. They were more than just a front end host though, they have all sorts of additional things like server lists, functions, user accounts, contact forms, and all sorts of more things. So check it out@netlify.com forward slash syntax. And you will see all of the magic I don't know I'm kind of trying to come up with another, another slogan on the fly here and see the magic The only one I ever come up with. So - -483 -01:17:14,479 --> 01:17:40,050 -Wes Bos: did you see that they they release background functions yesterday. So you can now run serverless functions. A synchronously meaning that like it doesn't have to be triggered by somebody hitting a URL, and or run for up to 15 minutes, which is pretty cool. Someone was asking me about that on Instagram, like, two days ago. And I was like, Ah, you can't really do it. And then they were they released it. - -484 -01:17:40,640 --> 01:17:44,100 -Scott Tolinski: You can't really do it. Oh, oopsies. Now you can. - -485 -01:17:44,390 --> 01:17:49,050 -Wes Bos: Yeah, now you can they rolled it out. So I also just realized we had Jason on the show. - -486 -01:17:49,500 --> 01:17:50,100 -Unknown: Yeah. And - -487 -01:17:50,250 --> 01:17:55,470 -Wes Bos: talk about Netlify he works there. So is that part of is that harming our editorial? integrity, - -488 -01:17:55,830 --> 01:18:13,970 -Scott Tolinski: Scott? Ah, no, because remember how much I talked about Netlify before they sponsored our show. Shout out to Netlify for being a longtime sponsor of ours. And thank you, Dave, for popping on your name is Dave Right. I've just assumed Your name's Dave based on your username. So - -489 -01:18:14,340 --> 01:18:28,920 -Unknown: it's Paulo. I'm just kidding. Yes, Dave. Thank you. Yes. Thanks for chair. I'd actually didn't want to break up your ad speak. But yeah, trying to get I don't know how to get off of your big discord user. - -490 -01:18:29,369 --> 01:18:46,920 -Scott Tolinski: No, that is very fine. is actually better that you were here for the ad read? Because that that's what we call a personal engagement right there. Dave, I think you can just click there's an x at the bottom of discord. There's like a little phone within my God. It's like a phone with an X. There it goes. - -491 -01:18:48,060 --> 01:18:51,470 -Wes Bos: Alright, we had a whole bunch of other people that wanted to come on. Yeah, - -492 -01:18:51,470 --> 01:18:54,330 -Scott Tolinski: but I promised Gary he could come on. - -493 -01:18:55,970 --> 01:19:09,630 -Unknown: Turn on my camera, turn off the radio. I'm doing Halloween early. It's my favorite holidays. I figured why wait till tomorrow. - -494 -01:19:09,680 --> 01:19:11,100 -Wes Bos: He's a JavaScript wizard. - -495 -01:19:11,130 --> 01:19:50,580 -Scott Tolinski: That's how I live life. My favorite XYZ Why wait till tomorrow. That's, that's really dope. I'm happy you are able to come on. So this is going to be an embarrassing question. Because it is Garrett right? Or is it? I forever and ever and ever. Garrett's been on the chat room for a very long time. And every time I read his username, I read it as Gareth and I just sort of assumed your name was Gareth and then one day I was like, I'm so dumb, what it would have would have by taking Gareth who's named Gareth. So sorry if your name is Gareth out there. And they just said that but no, thanks for coming on. - -496 -01:19:50,580 --> 01:19:59,930 -Unknown: Get there. No, you're right. It's th Yeah, it's good, Gareth. Oh, okay. It was right there. Yeah. Read earlier. Yeah. Yeah. - -497 -01:20:00,449 --> 01:20:21,140 -Scott Tolinski: Okay, well that that hope it just toss it. Um, Gareth is our typing champion over here at the level of tutorials discord by a significant margin. We did a typing challenge test, and I think you beat me by like 100 words per minute or something outrageous. You're so like untouchable. What was it like to 16 or something? - -498 -01:20:21,140 --> 01:20:24,680 -Unknown: No, no, it was like 135 or something. But yeah, oh, - -499 -01:20:24,680 --> 01:20:43,380 -Scott Tolinski: mine was like 60. And yours was like 135 or either way, everybody was like, well, well, you think you would take out west too? We had some stiff competition, too. And you just about decimated everybody. competition? I don't think anybody came close. - -500 -01:20:43,500 --> 01:21:01,430 -Unknown: Yeah, because I took keyboarding class and I think it was sixth grade. And they were trying to make us do like the home keys or whatnot, the quote, unquote, proper way to type. And by that point, you know, I've been on computers my whole life. So I had my own way. And I think I got a C in the class. So I have a vendetta against that teacher and have always been kind of faster, ever since leaving - -501 -01:21:04,619 --> 01:21:07,350 -Scott Tolinski: the swapping all the keys to divorce, or whatever is that - -502 -01:21:10,560 --> 01:21:11,180 -Unknown: level. - -503 -01:21:11,580 --> 01:21:37,020 -Scott Tolinski: I listened. I actually tried to do it once. Because I listened to a podcast where the guy who created WordPress was like, Yeah, I have some like statistics that say, how much like further your fingers move over the course of your lifetime if you don't use Dvorak. And I was like, Wow, that's pretty significant. Maybe I'll give that a try. And I moved my phone to divorce. And my computer was still the normal Qwerty. And it was very confusing for me for a very long time until I swapped it back. - -504 -01:21:38,100 --> 01:21:43,290 -Unknown: Cool. Yeah. So I have a have a potluck question I wanted to ask, I'll get some insight on this. - -505 -01:21:43,290 --> 01:21:44,250 -All right. Um, I've - -506 -01:21:44,250 --> 01:22:23,699 -been working with with React Native recently, I come from a web background. And I basically got transferred to a new project that's React Native. And I'm loving it, like React Native is super fun to work in the skills transfer over pretty well. And so my question is, what do you think about the future of mobile development in terms of these hybrid platforms? React Native flutter Xamarin. You know, there's a bunch of them right now, I think spelt as a native implementation, versus traditional Android or iOS development, specifically aimed at new developers looking to get into mobile development. Would you say you know, learn React Native learn react or learn Android learn iOS in terms of employability, that kind of thing? - -507 -01:22:24,390 --> 01:24:01,770 -Scott Tolinski: I think to me, personally, it depends on like what you're looking to build, right? Because React Native it by no means is React Native, like lesser in terms of like the stuff you're able to make. But if you are a react, or a view or a stealth developer, there's absolutely no reason why you can't build like, really good native apps. But those tools, let's say if you're going to be you could probably build games just fine. But let's say you wanted to build was that the Flappy Bird now Flappy Bird. Because Flappy Bird simple though. The one where you pull the string and the bird flies and hits the or the pig fly every bird game. Angry Birds. Let's say you wanted to build Angry Birds. I don't think I'd go with react. And at that point, so for me personally, as a, as a web developer, somebody who has these skills, I would pick up I would use those skills to build the thing. Yeah. atn, who created Mrs. and Mrs. Is backbone. CoffeeScript and Cordova and I use that app every single day. And I'm happy with it. So like, if you could if you have these skills, you can make stuff that is like super legit. You mentioned the spell one, by the way, the salt one uses native script to actually sponsor our show at one point. And native script is really interesting to me. But a works like everything. And it's kind of crazy that it does. But I I say if unless you're looking to become an iOS dev like full time, I yeah, just keep on with these tools. Or if there's like a specific point that you're hitting, that's like, shoot, I can't go forward. But React Native is capable of so much. I'm sure there's somebody out there who has built a neat game with React Native and stuff. It is very, very capable. - -508 -01:24:01,920 --> 01:24:58,100 -Wes Bos: Yeah, I think it's worth your time digging into the React Native or whatever the equivalent is for view or whatever, just because like they are really good. And if you just look at like desktop apps, every desktop app that has come out in the last couple years has all been built on on webtech. discord notion. I'm just looking at my my URL bar notion. Yes. Yes. Yes. Yeah, they're all electron base. So like, that's not to say you couldn't do that on the on the phone, especially as these phones start getting faster and faster and beefier, and that like hit that comes. It's not just it's not even a hit with React Native, right, because it does compile to Yeah, but just run the JavaScript just runs in, in a background thread. So yeah, so and like they did. They literally did Angry Birds in html5, like 10 years ago. They did it in the browser. So there's not to say that that wouldn't run. Yeah, - -509 -01:24:58,520 --> 01:25:22,520 -Scott Tolinski: bad example. Then What? Are you familiar with it? what's called Universal react? Wes? Ah, no. So there is a sort of like a native first approach to writing react where you write React Native using Expo. And then you could basically output to web. So the idea would be that you do get to write once deploy everywhere you just sort of the backwards way, - -510 -01:25:22,560 --> 01:25:37,080 -Wes Bos: like React Native web. Makes sense? Yeah. Because then you're not like trying to shoehorn web into mobile, you're just creating this one layer, right? But like, I've never used it, maybe. Maybe that would work. It probably would. - -511 -01:25:37,470 --> 01:25:41,760 -Scott Tolinski: Expo is really sweet. I dig it. Yeah, no doubt. - -512 -01:25:41,790 --> 01:26:04,800 -Unknown: Yeah, that's something I've run into with React Native is that some of the tools I love with web are not available. Cypress is a good example. And so he's a kind of cross platform, things like React Native web that lets you run React Native in the browser opened up this whole new ecosystem of web tools. And I've been very pleased with how these two parallel react ecosystems are kind of merging, or they have a lot of crossover. - -513 -01:26:05,159 --> 01:26:55,920 -Scott Tolinski: Yeah, it's an interesting space. And even in like, a lot of other languages, like I, like I said, I'm learning rust. And there's like some neat stuff going on there. And using whatever web tech in with rust to deploy, like, basically, they have somebody working on basically electron, where it's like a drop in replacement for electron basically, with the exception of your, your writing and in rust rather than node. And it does, it feels exactly like electron, it just uses just infinitely less of your CPU. So there's a lot of interesting stuff going on there. And web tech is, it's definitely one of those things that you can bet on for any given amount of time, and it's gonna come through. I mean, what is it Brad, Brad released an app in the App Store, that's a pw a II, we talked about being able to do that. But I haven't seen the implementation of it before. So that I mean, it's just sick when people are able to do - -514 -01:26:56,369 --> 01:27:01,500 -Unknown: it's a recent thing, right that Apple opened up the app store the pw A's I believe, I think, - -515 -01:27:03,090 --> 01:27:10,050 -Scott Tolinski: oh, I don't know what Apple can Google does with what they're calling Tw as I don't really understand the difference. But - -516 -01:27:11,060 --> 01:27:17,159 -Unknown: seriously, we should all learn rust because webassembly is gonna gonna replace JavaScript, you know, maybe next month - -517 -01:27:17,159 --> 01:27:41,279 -Scott Tolinski: or something maybe next. And it's pretty sick. I when the more I learn about it, the more I find out about companies that are using it today. Yeah, like for the things that they're using it I'm like, Huh, so it's actually being used in stuff for really expensive things. And for the most, most things that we need to do on a day to day basis, who cares? But we have something really expensive. Not a bad idea. Yeah, - -518 -01:27:41,369 --> 01:27:44,670 -Unknown: you want to run Unreal Engine four in your browser or something? Yes. - -519 -01:27:48,119 --> 01:27:55,170 -Scott Tolinski: Yeah, absolutely. Cool. Well, thank you so much, Gareth, anything else you want to shout out or Yeah, - -520 -01:27:55,199 --> 01:28:27,060 -Unknown: got a sick pic I've been enjoying recently. It's a browser extension. They have Chrome, Safari, Firefox and edge. It's called dark reader to dark reader. org. And it's kind of like a universal dark mode. So for sites that don't have dark mode available, it kind of forces them to have a dark mode. And another really great um, a lot of sites I visit a lot do not have a dark mode. And so suddenly they do it's really great for accessibility, all that kind of thing. So I'll drop a link in the discord. But yeah, if you're a dark mode aficionado, like myself, I found these to be Yeah, - -521 -01:28:27,090 --> 01:28:31,649 -Scott Tolinski: likewise. I like it. And I'm gonna use it. I'm already clicking the Edit button. - -522 -01:28:32,279 --> 01:28:44,819 -Unknown: Yeah, I would. I would shamelessly plug, not something of mine. But actually, the level of tutorials. discord is really cool. And if you're someone who's only in there to watch syntax live, stick around and hang out we have. - -523 -01:28:46,170 --> 01:28:47,760 -Scott Tolinski: Yeah, we do have a lot of fun. But, - -524 -01:28:47,939 --> 01:28:54,119 -Unknown: yeah, chill, especially during 2020 when we're all a little bit more isolated, perhaps than we have been. It's been it's been great. - -525 -01:28:54,750 --> 01:28:59,970 -Scott Tolinski: Very true. Very, very true. Well, thank you so much for stopping by. And thank you for shamelessly plugging our Discord. - -526 -01:28:59,970 --> 01:29:01,319 -Unknown: Yeah. - -527 -01:29:01,830 --> 01:29:03,420 -Thanks for having me on. It's a lot of fun. - -528 -01:29:03,449 --> 01:29:04,260 -Thanks for joining. Appreciate - -529 -01:29:04,260 --> 01:29:10,140 -Scott Tolinski: it. Appreciate it. Okay, one more. So - -530 -01:29:10,140 --> 01:29:13,439 -Wes Bos: one more, and then we'll have bring everybody in. - -531 -01:29:13,859 --> 01:29:14,939 -Scott Tolinski: We'll open it up. - -532 -01:29:15,090 --> 01:29:17,100 -Wes Bos: That might be awful, but let's do it. - -533 -01:29:17,370 --> 01:29:22,949 -Scott Tolinski: Oh, it's okay. All right. Let me type I'm getting some major lag lag. - -534 -01:29:23,010 --> 01:29:28,739 -Wes Bos: Yeah, you're lagging for me, too. All right. It's gonna let you pick somebody. There's a lot of people that want it. We should do this more often. - -535 -01:29:28,920 --> 01:29:44,939 -Scott Tolinski: Yeah, we should do this more often. axos getting in because he typed the fastest. And oh, Louis. I accidentally gave them all the Louis. Okay, so excellent. And Louis can come on, because I do for you. Excellent. Louis, because I accidentally gave Louis the role to - -536 -01:29:45,630 --> 01:29:47,010 -Wes Bos: accidentally - -537 -01:29:47,369 --> 01:29:49,260 -Scott Tolinski: Axel and Louis. - -538 -01:29:50,609 --> 01:29:51,569 -Unknown: Oh, - -539 -01:29:51,569 --> 01:29:57,750 -Wes Bos: hey, Scott. Wes is doing let's let's stop for a second. Let's see that shirt you got on there. - -540 -01:29:57,779 --> 01:29:59,399 -Scott Tolinski: Yeah, let's see that shirt. - -541 -01:29:59,550 --> 01:30:03,060 -Wes Bos: look better. Wow, yeah lebanner winnipeggers Oh, beer. - -542 -01:30:05,699 --> 01:30:07,649 -That is awesome. Where'd you get that? - -543 -01:30:07,649 --> 01:30:18,210 -Unknown: I just I thrifted finds ya is mostly for the color but then this you know the curling is like so sick i think is like a curling thing too. - -544 -01:30:18,239 --> 01:30:20,310 -Scott Tolinski: Yeah, definitely a curling stone. Yeah, - -545 -01:30:20,369 --> 01:30:37,560 -Wes Bos: I have a really sick blue like jacket that says Labatt sailing on it that I found. And it's got the big sailboat and this is like Labatt is like an old school Canadian beer company. And it's it's so cool. Like people ask me about all the time when I'm out. So I love that kind of stuff. - -546 -01:30:37,949 --> 01:30:40,380 -Scott Tolinski: Yeah. Do you have any stones at your house was - -547 -01:30:40,710 --> 01:30:53,250 -Wes Bos: no no. My friend up at our cottage they do. They fill bleach bottles with ice and then spray paint them. And then they have like curling on the lake. With that, so cool. - -548 -01:30:53,550 --> 01:30:55,229 -Scott Tolinski: I would do that. I'd be very into that. - -549 -01:30:55,649 --> 01:31:09,449 -Unknown: Well, that sounds amazing. Yeah, curl. I've never been curling before. I mean, so I kind of feel like one of those people who wears like a bad t shirt that you know doesn't listen like you ask them what their favorite album or a favorite Led Zeppelin album is like, I - -550 -01:31:09,869 --> 01:31:16,350 -Wes Bos: haven't listened to the outside. But everybody's wearing Thrasher t shirts right now. Yeah. And do you even skate? - -551 -01:31:17,460 --> 01:31:27,689 -Scott Tolinski: Yeah, I have a shirt with a Griffin on it. And I've never written the Griffin. So it's Yeah, I think we're all okay with supporting things that we like, like Griffin's - -552 -01:31:27,989 --> 01:31:30,060 -Unknown: cool. Are you? Are you from Winnipeg? No, I'm - -553 -01:31:30,060 --> 01:31:35,729 -from sarnia. Ontario actually close to Ontario. So, yeah, - -554 -01:31:35,850 --> 01:31:38,159 -Wes Bos: God knows all about another Canadian. Yeah. - -555 -01:31:38,699 --> 01:31:59,220 -Scott Tolinski: Because I'm from Detroit area. So I've been to London and I've been to Windsor extensively. Yeah, so that whole area. I think the furthest we ever got in that way was like grant grand band. And that's not very far either. But all that area of Canada that's right around Michigan. That's that's definitely my my area of Canada that I'm very familiar with. - -556 -01:31:59,279 --> 01:32:21,119 -Unknown: I mean, this this no word like starting is not worth stopping by. Really? You know what I mean? Like if you're ever traveling, especially when you're going to grant bad if you're going to Grand band just like around sarnia just go right to grant man like That's way better than it is here. But GB cool. You know what? congratulations guys on 300 episodes. Thank you want to say Congrats. You get amazing, amazing accomplishment. - -557 -01:32:21,720 --> 01:32:23,909 -Wes Bos: Yeah, really appreciate it. - -558 -01:32:23,970 --> 01:32:26,699 -Scott Tolinski: We got Axl in the house to Axl. Hi, Axl. - -559 -01:32:26,970 --> 01:32:30,420 -Unknown: Hi. Doing. Hey, awesome. - -560 -01:32:30,449 --> 01:32:36,600 -Wes Bos: Where are you from? Mexico. Awesome. Oh, nice. It's probably much warmer than up here. - -561 -01:32:37,050 --> 01:32:38,880 -Unknown: This actually, yeah. - -562 -01:32:40,740 --> 01:32:42,630 -Wes Bos: Oh, cool. What kind of dev? Are you? - -563 -01:32:43,739 --> 01:32:52,319 -Unknown: mostly a front end dev? I work with Angular dress right now for my project. But I like all things JavaScript, - -564 -01:32:52,380 --> 01:32:54,840 -I say eautiful. - -565 -01:32:55,199 --> 01:32:59,010 -Scott Tolinski: Yeah. We're not talking about Angular very much on the show. - -566 -01:33:00,810 --> 01:33:09,750 -Unknown: Yeah, no worries. I'm actually a little bit into view these days as well. So I'm learning it on the side. Yeah, you're gonna keep updated? And - -567 -01:33:10,050 --> 01:33:15,569 -Scott Tolinski: that seems like a natural progression to they seem like they are very compatible with each other. - -568 -01:33:16,140 --> 01:33:41,310 -Unknown: Oh, yeah. Yeah, they're, they're very similar. I just wanted to say, you know, buttering you up. Your inspiration for for me, personally. And it's been great to follow you and see how you've progressed and created all these quality stuff. I have a couple of courses from Wes. And it's been really, really great to learn from you. Thanks a lot for all you do. - -569 -01:33:41,430 --> 01:33:49,409 -Wes Bos: Oh, thank you. I appreciate that. That's really cool to hear. You got anything you want to do a stomped or sick pic or anything else. - -570 -01:33:49,739 --> 01:34:31,319 -Unknown: I do kind of have a shout out. And also a shameless self plug. That's where we hear some really cool. So the first shout out is we're having a .js conference in Mexico. It's the .js counts. Same, the one you know, but the Mexico edition. So that's going to happen the second, third and fourth of November, it's obviously going to be remote. So you can go to .js comm.mx. You can watch the talks there. People like Sarah v. Ada, it's gonna be there, as well as Tracy Lee from the stuff media and things like that. So there's a few really interesting talks in there. So you can check it out. - -571 -01:34:31,739 --> 01:34:33,270 -Sick. Sorry. Yeah, - -572 -01:34:33,270 --> 01:34:34,170 -Wes Bos: that's that's - -573 -01:34:34,380 --> 01:34:39,060 -Scott Tolinski: Js conf.mx. You said, right. That's correct. Yep. Cool. Say, - -574 -01:34:39,569 --> 01:35:30,600 -Unknown: and I have a shameless self plug for the YouTube channel. I have. I'm running. I'm creating lists. And the idea is to have different playlists for different projects that we build. And it's kind of like, a little bit of egghead style where you take just one topic at Time short videos that should be real quick on it. And so we have something I think Scott will like, which is Meteor plus view. Oh, cool. Yeah, really intermediate as well. So yeah, yeah, there's one playlist for that and one for building desktop applications with NW, j. s, and view as well. And things like that. So you can check that out@youtube.com slash Expo just, it's my name, but it's spelled differently. Um, it's a ck zet E. LL. - -575 -01:35:30,659 --> 01:35:33,569 -Yeah. - -576 -01:35:33,630 --> 01:35:34,949 -Yeah, that's, that's the one - -577 -01:35:35,939 --> 01:35:38,189 -Scott Tolinski: back. Well, thanks for thanks for popping on. - -578 -01:35:38,340 --> 01:35:38,850 -Unknown: Thanks a lot. - -579 -01:35:38,850 --> 01:35:48,569 -Wes Bos: We should also say tickets to .js comp, Mexico are only 10 bucks. So definitely hit that up. That sounds awesome. Well, thanks again. All right, Louis, what do you got for us? - -580 -01:35:48,989 --> 01:36:21,270 -Unknown: I actually have a potluck question for you guys. So yeah, so it's not it's not technical. It's more so so you guys are always so busy. You know, you guys are amazing. devs. So, but you're also you know, you're learning new things you are keeping up with your family. You guys have families, you know, you guys have other things are probably working on outside that you don't share online. Keep an eye out, you know, you got so many things going on. So I was just wondering, like what your daily routine is like? And how do you decide to prioritize the projects that you guys think are worth working on? - -581 -01:36:21,659 --> 01:38:41,580 -Scott Tolinski: I can't go first because my daily routine is a complete mess right now. Especially, although it's, it's been, it's been getting a little bit better, Courtney and I, so Courtney, my wife works full time, she's a psychologist, and she has a full time schedule on her plate, I have a full time schedule on my plate. So therefore we are the agreement that we've come up to is that neither of us get full time. I get the morning shift with the with the kids. So I get before lunch with the kids, and she gets after lunch with the kids. And then we just sort of swap or we do that every single day. So for me, I have what like from noon to five every single day to work. And that really, really stinks. For me, especially because I'm running a business, I have people working on level up tutorials, we're doing syntax, so Mondays right away are spent on the podcast, that means I have four days out of the week to hustle and somehow record a new tutorial series every month, in four days a week, and four hours of those days. So, for me, it's all about like being really, really, really hard about scheduling everything. And more importantly, like nowadays, it's about saying no to everything. I Well, I say that as somebody who just had guests to three different conference talks, one of which I just did for Meteor and then I'm doing one for Apollo and then one for graph qL I should be saying no to everything. And I the most part, say no to everything, everything because just about everything that's not my main objective kind of gets in the way right now. So for me, it's just been about really, really, really hard scheduling. And then not not getting away from that schedule as much as possible. Like today today is like kind of backwards because we're doing the live show. So Courtney is going to take the afternoon shift, but we're already you know, what time is it 130 here here in Denver, so she's she's gonna get like a diminished time. So I'll have to give her like weekend time or whatever. It is just about shop, shuffling things around as much as possible. But at the end of the day, I have to I have to do weekends, and I have to do nights and I have to do whatever it takes. I take my computer to the gym. And when I'm in between sets, I am approving prs like that is I'm approving prs while getting prs in the gym. And writing PR for Twitter, and email. So it's just about getting it all in when you can and scheduling as hard as possible for me. - -582 -01:38:41,699 --> 01:38:43,050 -Unknown: eight hours of sleep a night though, - -583 -01:38:43,199 --> 01:39:14,040 -Scott Tolinski: at least at the mall, trying to Yeah, yeah, we I pretty much close the computer at like eight o'clock each night. That's not like a given but like cornea, we'll sit down, we'll watch TV, we'll watch whatever, just to wind down and we've been trying to go to bed earlier to just because neither of us get get the time. The kids have been waking us up in the middle of night, those kind of things. So if we're not getting eight hours of sleep, it's it's because of outside. Outside intervention outside the intervention. I don't know. - -584 -01:39:14,069 --> 01:39:15,600 -Wes Bos: Yeah, its sources. Yeah, the - -585 -01:39:15,600 --> 01:39:16,350 -Scott Tolinski: best thing we can do. - -586 -01:39:17,640 --> 01:39:36,000 -Wes Bos: For me, what is my daily routine look like? I generally work I drop the kids off at school like 820 I get back usually at my desk by about nine o'clock. I'm pretty strict about trying to do a nine to five every day, Monday through Friday, and then not No, no evenings, no weekends. - -587 -01:39:36,119 --> 01:39:52,470 -Scott Tolinski: I'm gonna interrupt you here because I sent a message message yesterday that would have been at like 503 it's just like complete silence. And then this morning, he's just like, Yeah, I don't work after five. It's like you are so good about that. I would. I really applaud you - -588 -01:39:52,470 --> 01:42:17,640 -Wes Bos: for that too. I also don't have slack on my phone either. So like if something happens, it's just smart. I don't see it. But like, I'm not I'll say a little bit flexible with that as well, usually about three o'clock, my wife will say, Hey, keep an ear out for kit, she's got to go pick the kids up. So sometimes I'll wake up and off to take half an hour to go be with him. But that's okay. That's that's just what the working looks like right now, like Scott just shared what his looks like as well. My wife usually works on weekends, I take the kids on Saturday mornings. And then my wife just works at night and stuff just trying to fit it in or it's possible. It does seem like I have a lot going on. But usually I just focus on two to three or four projects at once. That's for development, I usually have like a course that I'm working on. And then I usually have like another course that I'm sort of thinking about. And if I'm like, if I'm stalled with something, like, for example, I'm recording my advanced react course right now. It's Friday afternoon, I got to wait until Monday because there's a there's an update that's coming out with Keystone that comes out on Monday. And we're going to use that in the course. So I'm stalling that and I could switch over to something else like the podcast or working on one of my new courses that are coming up. Just like personally, we have a lot going on with our house. Right now we are doing a bunch of rhinos, to our house. And that involves painting and sanding and having trades in and like we're doing a lot of the work ourselves as well. And what I try to do both for work as well as for house stuff is to have big goals. Like we've got five rooms in our house that we're working on right now. But you have to break it down into much smaller little things. Like every night, I have maybe an hour and a half of time to work on the house that you can't just like it's it's so overwhelming to look at some of these projects that take 30 hours, so you just got to chip away or it's like, okay, tonight, I'm gonna patch this thing. I'm gonna sand I'm gonna paint it. And having those small wins is critical for me. Because I go ha like I did something like my wife knows that when I'm grumpy. It's because I ended off by not getting something done. And I didn't have that win. And I feel like I wasted my whole day, especially like when I have a bug. And I'm like, deep into it. And then my wife texted me She's like, hey, it's like 507 you're not down yet. I'm like, this is killing me because I'm like so into it, but I can't I have to break away from it. So trying to make get those small wins is key for me. - -589 -01:42:18,029 --> 01:43:05,640 -Scott Tolinski: Yeah, well, I it's funny, I think both of us, we have like a bit of a weird thing where like, I think our schedules are very different in the middle of a course. And at the end of the course then when we're not doing the course, like for me my like my schedule is very much like on the month, right? Like the the second and third week of the month, or like second month is planning a course I'm just like writing a lot of code. The third month is recording our course I'm just like non stop recording. And then the the fourth is like editing and getting it ready. Like today I have to export like 20 some videos when we're done with this. So like, it's weird, because my days look very different based on what day of the month it is specifically but yeah, yeah, that's, that's, uh, it's gonna feel like I feel like we're gonna feel like we have superpowers. Once everybody gets their time back. They'll be really sweet. - -590 -01:43:06,029 --> 01:43:39,510 -Wes Bos: Yeah, that's like one like, good thing about having kids is that like, like, I used to complain about how busy I was when I had homework. And like, that's not to throw shade on anyone who doesn't have kids or isn't busy, like everyone obviously has their own challenges in their life. And I certainly felt very overwhelmed when all I had was homework, but I'm really looking forward to life gets harder and harder every, every day. I'm very looking forward to that part where it gets a bit easier. And then all sudden you have these skills that you've learned in hard life manage and you can apply that Yeah, yeah, exactly. - -591 -01:43:40,109 --> 01:43:40,739 -Unknown: Yeah. - -592 -01:43:41,010 --> 01:43:44,460 -Scott Tolinski: I am very ready for that right now. Yeah. Are you ready? Nice. - -593 -01:43:44,489 --> 01:43:48,899 -Unknown: Yeah. Thank you very much. Yeah. Yeah. Hundred percent great answers as well. Great answers as well. Thank - -594 -01:43:48,899 --> 01:44:00,270 -Wes Bos: you. Yeah. Cool. Well, thanks so much for joining Scott. Do you want to unleash Can you just add a whole bunch of people into the room and we'll do a send off? Yeah. - -595 -01:44:01,710 --> 01:44:15,840 -Scott Tolinski: Oh, boy. I can't wait to see my computer crashed. Oh my gosh. Because there's a limit. The limit? - -596 -01:44:16,260 --> 01:44:17,760 -Wes Bos: Everyone turn your cameras on. - -597 -01:44:21,029 --> 01:44:22,859 -Unknown: Britney, your daughter What's up? - -598 -01:44:22,949 --> 01:44:24,180 -Wes Bos: This is relatively calm. - -599 -01:44:24,300 --> 01:44:31,920 -Scott Tolinski: Yeah, this is relatively calm. And there's Trevor? - -600 -01:44:31,980 --> 01:44:35,520 -Wes Bos: Never never see one of those. - -601 -01:44:38,279 --> 01:44:43,170 -Scott Tolinski: Thank you, everybody for hopping on and celebrating our 300th episode. It's really sincerely amazing. - -602 -01:44:43,439 --> 01:44:46,680 -Wes Bos: Yeah, that's really cool. We need to do some sort of like, - -603 -01:44:47,040 --> 01:44:48,090 -Unknown: we have to say peace. - -604 -01:44:54,029 --> 01:44:56,550 -Scott Tolinski: What there's 26 people, we how do we do that? - -605 -01:44:57,540 --> 01:45:11,340 -Wes Bos: We've broken this. So we will And off by saying piece. Ready 321 awesome. - -606 -01:45:14,609 --> 01:45:24,359 -Scott Tolinski: Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax301.srt b/transcripts/Syntax301.srt deleted file mode 100644 index 3decf369f..000000000 --- a/transcripts/Syntax301.srt +++ /dev/null @@ -1,188 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,149 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott Tolinksi. - -2 -00:00:27,120 --> 00:00:57,360 -Scott Tolinski: Welcome to syntax in this Monday tasty treat, we're going to be cooking up something really good for you. This is CSS of grid level three, that includes CSS Grid masonry. Now if those words don't mean a lot to you, just wait because we're going to be talking about why this is such a cool thing and why we've been waiting for it for so long. This episode is sponsored by Log Rocket. Now Log Rocket is the perfect place to see all of your exceptions happen in real time. - -3 -00:00:57,360 --> 00:00:57,990 -Unknown: Hey, - -4 -00:00:57,990 --> 00:01:55,530 -Scott Tolinski: do you use or break something on your site? Well, this allows you to see not only the Network tab, the console log, but the DOM and the user as they clicked and made the thing happen. Maybe they typed in something and it broke. Now you get to see all of that happened in a scrubbable video replay it is really, really super cool. This is one of those services that I highly recommend checking out their little landing page and then checking out the scribble videos because it's one of those things that you really have to see to understand just how amazing this is anybody who's ever tried to debug an issue that's happening in production? Well, it sometimes can be like trying to find your way in the dark without a flashlight. And this is that flashlight, so check on over to Log rocket.com forward slash syntax and you'll get 14 days for free. Give it a check. This service is really, really super neat. Before we get started, let's introduce ourselves. My name is Scotland's game developer from Denver, Colorado and with me, as always is the West boss. - -5 -00:01:55,650 --> 00:02:21,630 -Wes Bos: Hey, you know, something I was thinking about? Is that maybe we need to do another episode where we introduce who we are and our backgrounds because last time we did that was like two and a half years ago. And I talked to a lot of people who say I started listening six months ago or whatever. So it shout us out on Twitter if you want that episode. Not necessarily again, but yeah, an explainer episode as to who we are and and whatnot. - -6 -00:02:21,660 --> 00:02:29,910 -Scott Tolinski: Who is your daddy? And what does he do? movie that time? That's under Guardian cop. - -7 -00:02:29,910 --> 00:02:36,330 -Wes Bos: It's Kindergarten Cop. Yeah, never seen it. But like I remember like, I've probably even said that many times in my life. - -8 -00:02:36,359 --> 00:02:39,720 -Scott Tolinski: Yeah, yeah. There was there. Everybody had an hour an hour no face. Yeah, - -9 -00:02:39,750 --> 00:02:49,110 -Wes Bos: yeah, it's like the very nice, I've never actually seeing the original Bora either. But they had a very nice change of life. Yes. - -10 -00:02:51,330 --> 00:03:57,540 -Scott Tolinski: Likewise, I don't know when Bora came out, I think it was probably before this. But before we get started talking exactly about what this is, I figured 2015 Scott would like to pop in here and just say thank you very much for the CSS working group for adding this grid masonry because this would have saved my butt back in 2015, when the only solutions for this for JavaScript. Now when CSS Grid first launched, I think the biggest missing feature that a lot of people had on their minds was, Oh, this doesn't solve the masonry problem. But it solves so many other problems, right? So CSS Grid dropped, we all know that you got these amazing grid features that allow you to do all the things we used to have to have a 960 grid, or whatever grid in here before to assign things to a grid super easily, like basically invalidated a whole scope of libraries at the time. So CSS Grid comes out. It makes everybody's life easier, but it doesn't solve the masonry problem. Now, along comes CSS Grid, level three draft, which includes masonry style layouts. So Wes, do you want to give a little intro on these? Yeah, - -11 -00:03:57,570 --> 00:05:33,660 -Wes Bos: yeah, this is also something that I wanted as well, when I was working on my CSS Grid course, I thought, of course, this is gonna be doable. And I went to Rachel Andrews GitHub repo called CSS Grid ama, and this was in 2017. So three, almost four years ago. Now, I said, like, how do you do the Pinterest layout in grid? And the answer was, it's not it's not what it is. Everybody thought it was gonna be. It isn't. It's not what it is. That's more of a CSS columns thing. But the the downside of columns is you can't control the order and yet direction out of flow. So yeah, we now have CSS Grid level three. It's a draft proposal, CSS Grid, level two, added sub grid, and I believe that was it. And now we have CSS level three, which is in proposal and is adding masonry layout, which will allow you to stack items together, regardless of work. We're gonna call it height in this case, but it can go either way. And that's Good if you think about Pinterest is probably the most popular. Lots of websites do it now, when you think about D Sandro's metaphyseal. Yes, yeah, isotope or isotope that j s, were they all locked together, you have to do that in JavaScript right now. And that is going to change once this gets merged into the CSS Grid spec. And once all of the browser's implemented, it looks like Firefox already has it implemented under a flag so you can test it out. It might change but that's the whole point of the proposal is that you can see what people think about it. Before we go further than that. Could - -12 -00:05:33,660 --> 00:06:09,600 -Scott Tolinski: we give one giant shout out to David de Sandro very influential libraries, so many things that he's made, even just if you had to is like metaphyseal dot CEO, man, he's just on so many influential projects and things that I've used from peccary to isotope just a lot of really neat stuff. So I just want to give a big shout out to Flickr, he was the best library. Yeah, it's definitely one of my all star influential people in this space. So and all his little logos that he's been creating, just so cool. - -13 -00:06:09,810 --> 00:07:30,840 -Wes Bos: All right. So let's talk about how it's gonna work. So the way that it works in CSS Grid masonry is that generally, when you have a grid, you specify either your grid template columns, or you specify your grid template rows, and you specify the width or the height of them, and how many you have and whatnot. The idea with CSS masonry grid is that you pick one of those axes. So whether it's rows or columns, and you set that to be masonry. And then you also set this new property masonry auto flow, I think there's a couple options there, the example they have is as next and then what that will do is it will first layout all of your grid items that have size. So this works similar to if you're using fr units on your grid first, before it even divvies up the free space, it will say all right, well, this item here has an explicit start and stop, it starts at two and goes to four or this item here spans five, it says so in the CSS, so we'll first put all of those in your grid, and then you're left with empty space. And then we'll start taking the additional items which are not explicitly laid out, and then start to pack them into wherever they're able to fit either on the column access or the row axis. - -14 -00:07:31,080 --> 00:08:05,880 -Scott Tolinski: From what I read, I think that masonry autoflow. Next property prevents it from filling in. If you look at the masonry auto flow property line, like the 2.5, and you scroll down, you check out that image. So it's, it shows that the without masonry autoflow. Next, it's hard to it's such a visual medium, but the fourth item would be placed. So it would masonry into the empty space where with the masonry autoflow. Next, it moves it to the next line, either B pack or next. And by default, it's the other one, what was it packed - -15 -00:08:06,000 --> 00:08:07,440 -Unknown: pack? Pack? - -16 -00:08:07,440 --> 00:08:17,270 -Wes Bos: If you look at the 2.5 masonry auto flow property, okay, as the value can either repack or Oh yeah, or pack definite first or ordered. - -17 -00:08:17,820 --> 00:08:39,120 -Scott Tolinski: So next basically causes it to skip that space and go to the like the next available open line. Which that to me feels just like was that was one of my questions when I was looking at this was like, why would you use masonry at all if you're using this autoflow next business, but I guess like, this is one of those things, I really need to just get my fingers dirty again. I need to just you know, give it a test. Oh, yeah, - -18 -00:08:39,150 --> 00:08:45,020 -Wes Bos: yeah, well, maybe you could turn it on or off. And this is just Scott Knight trying to parse what the spec is. Oh, - -19 -00:08:45,020 --> 00:08:45,930 -Unknown: yeah. Oh, yeah, I - -20 -00:08:45,930 --> 00:08:51,410 -Wes Bos: certainly do not envy the people who have to implement this into the browser. - -21 -00:08:52,740 --> 00:10:20,520 -Scott Tolinski: Oh, what we need here is we need a Chris coyier CSS masonry, a complete guide, blog post, and that's gonna be all open. For me. That was like the defining thing for Flexbox for me. So one thing I thought was neat in here, it was using the direction property in CSS. And you may not have used the direction property unless you are getting into internationalization stuff. But there's a property called direction and CSS that allows you to do right to left. And this is something that's not necessarily new. But in the past, like with Flexbox, we could change the flex direction. And I think this is neat, because we can change the grid direction with masonry and have everything really hang to the far right by just simply using direction RTL grid masonry, and on the horizontal direction, it pins everything to essentially it goes from top right to lower left now in our grid, and naturally need but what's really neat about this is when we even rotate this on it access a little bit, and you do direction of right to left, so that pins it to the top right and then you do your masonry on the y axis rather than the x axis, and it goes top right, then middle right, then bottom right. And then the next one will kind of scoot up as far as it can to the top right. And this gives us an insane amount of features, I mean, just tools in general to do - -22 -00:10:20,850 --> 00:10:22,590 -Wes Bos: weed, you haven't been able to do that before, - -23 -00:10:22,620 --> 00:10:55,710 -Scott Tolinski: or at least not easily, you'd be doing like some really interesting workarounds for it. But I think this really blows open, just being able to put the content anywhere you wanted, at any given point without doing, you know, position absolute or something like that, or taking things out of the flow. I it's really, really astounding, when you look at some of these examples, I highly recommend heading to this link that we have in the show notes to check out the working group, because what they do is they have these little images that show you where all the boxes go with various bits of code. And it is very illuminating very, very cool stuff. - -24 -00:10:55,860 --> 00:11:34,980 -Wes Bos: It's pretty, pretty neat. And they have tons of little examples as to what happens when you use when you anchor one item here. And when you align the item, what happens to use an inline grid happens when you use a margin and a gap. Yeah, man, there's so many edge cases that could be that this direction thing I didn't even realize that we're getting this. It's a proposal for CSS right now, I'm glad you said this. Because the same thing happened with gap where we had we added direction, FOR FLEX direction. And then they're like, oh, grid, do we add grid direction? And it looks like now they're just saying direction? direction. And that will that will work with everything. Same thing with gap is no longer grid gap. It's just gap. And it works with Flexbox and grid now. - -25 -00:11:35,010 --> 00:11:38,310 -Scott Tolinski: So direction would also work with Flexbox? That's what you're seeing? - -26 -00:11:38,520 --> 00:11:39,150 -Unknown: I - -27 -00:11:40,710 --> 00:11:46,350 -Wes Bos: think so. I don't know. Probably? Well, no, actually. Because - -28 -00:11:46,350 --> 00:11:49,140 -Scott Tolinski: Because direction is a property that's existed for a while. - -29 -00:11:49,710 --> 00:12:32,790 -Wes Bos: Yeah, but with Flexbox. It's it's row or column or row reverse or column reverse, right? That's how you change the axes of Flexbox. And you can't change the axes of grid. Yeah, without doing an only define what the axes are. So I guess it won't work with Flexbox, then that's wrong. Well, that's okay. Yes. Awesome. So I am really excited about this. It's just another thing that's been on my wish list for a long, long time. And if we talk about like, what are the things that we still need to use JavaScript for for layouts? It was masonry. What other things can you think of that you still have to do is content queries is still something you have to use for JavaScript - -30 -00:12:32,970 --> 00:12:33,810 -Scott Tolinski: element queries? - -31 -00:12:33,810 --> 00:12:39,360 -Wes Bos: Is there element queries? Yeah. Is there anything else that you're still using JavaScript for auto height, automating - -32 -00:12:40,080 --> 00:13:00,930 -Scott Tolinski: aspect ratio, but that's being solved? That's coming anyways? Yeah. I like need to fire up the Can I use for aspect ratio? Can I use.com is the best place in case you have not ever been even though we talked about all the time, aspect ratio, CSS is a big fat Red's across the board forever and ever and ever. Looks like - -33 -00:13:01,080 --> 00:13:04,380 -Wes Bos: Flexbox sent a flag for both Firefox and Chrome though. So - -34 -00:13:04,380 --> 00:14:24,600 -Scott Tolinski: kind of Firefox adds IT FOR FLEX items. Oh, yeah. Okay. So it is a flag. Okay. I can deal with that. I just need to know I need to now. Right now, I wrote out a little wrapper for react to do it. I need I need that aspect ratio. So that's really really for me, it's funny that you mentioned those two things, because I have my like Final Thoughts written here. And I said, this is basically power tools for CSS layouts at this point, CSS Grid, you can do anything with it. And I like I have a hard time of like layouts that you could not to do with this kind of thing between grid and whatever it masonry was really the last holdout. And so like really like people, I think the whole complaining about CSS layouts being hard is done at once this is in it's done. Like no more if you consider things like that joke is tired. You can you can center things very easily. And CSS. That's not a thing anymore. vertical center, yes. Now I think anymore, masonry layouts, finally not going to be a thing anymore. And I wrote here, once we get element queries, my CSS thing, wishlist is essentially going to be complete that aspect ratio, those things are going to make me as happy as I could possibly be with CSS. And I think these tools, specifically open up the possibilities to create a just an endless amount of layouts. And it's going to be really, really fascinating to see this time next year. What kind of stuff people are making with this? Yeah, super - -35 -00:14:24,600 --> 00:14:37,320 -Wes Bos: well put. Last thing I'll say is, do you think this is going to be abused? Is everybody going to start throwing masonry layouts into their, into their designs now because it's so easy? I think we would have to get into a time machine for that to - -36 -00:14:37,320 --> 00:15:02,300 -Scott Tolinski: happen when people were using it already. Even with JavaScript. No, I don't I don't think so. But I do think it opens up some really neat possibilities. Now, isotope, let me pull up metaphyseal again, David de Sandro had one neat plugin that we used that was based on masonry where so like masonry is just like the grid aspect of it. Okay, so it's isotope. Oh, no, I think The top was the sorting one where did like flipo - -37 -00:15:02,300 --> 00:15:04,740 -Wes Bos: animations use masonry under the hood? - -38 -00:15:05,220 --> 00:15:22,710 -Scott Tolinski: So Oh, man and Packer, he has like drag. So I don't know if he just doesn't have this plugin anymore. But he used to have one I think it was isotope like, it might be isotope where it was masonry where you'd click something and expand and the whole layout would refill and rechange. That was isotope. - -39 -00:15:23,010 --> 00:15:30,630 -Wes Bos: Yeah, we just rerender it, but it would figure out the what had changed. What that's one good question I have is that will this be animatable? - -40 -00:15:32,400 --> 00:15:33,240 -Unknown: Or not? Yeah, - -41 -00:15:33,510 --> 00:15:34,020 -Wes Bos: yeah. - -42 -00:15:34,020 --> 00:16:15,780 -Scott Tolinski: But the good news for that is if you want to do listen, I just drew, I don't want to drop my course here. But I did a course on animating with framer emotion. And the latest version of framer motion allows you to animate properties on Flexbox, and stuff like that using flip animations. And it's just by like adding one Prop, essentially. So like, hey, if we can get that, then I'd be very psyched. Again, animating any of these properties is like really what I want to see. I want to see animating these properties I want them to be able to be you click and expand and the whole thing, relay out some whatever. That's what I want. And I think these tools will open that will be abused. I don't know maybe potentially, I abused masonry. So there is a chance that I will - -43 -00:16:15,780 --> 00:16:18,030 -Wes Bos: be in there. We're all guilty. Yeah. - -44 -00:16:19,590 --> 00:16:30,600 -Scott Tolinski: There's a chance we might see a resurgence right. New masonry ism. Like the new morphism it's a bad joke when you have to explain it. That's that's Yes. - -45 -00:16:31,319 --> 00:16:34,950 -Wes Bos: All right. I think that's it. Let's cut that off before Scott has a more terrible jokes, huh? - -46 -00:16:35,610 --> 00:16:41,520 -Thank you for tuning in. And we will catch you on Wednesday. Peace page. - -47 -00:16:43,470 --> 00:16:53,250 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax302.srt b/transcripts/Syntax302.srt deleted file mode 100644 index 0bdf2e308..000000000 --- a/transcripts/Syntax302.srt +++ /dev/null @@ -1,432 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,820 --> 00:00:06,120 -Unknown: the podcast with the tastiest web development treats out there. - -3 -00:00:06,149 --> 00:00:10,530 -strap yourself in and get ready to live ski and West boss. - -4 -00:00:10,589 --> 00:00:47,549 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there today. We've got a guest on for you. We've got Benjamin dumpy, he's here to talk to us about running conferences. He's run a whole handful of different web development tech conferences in the past. So we're here to talk about how conferences are run and what's hard about them and all of the all of the stuff that involves in person as well as like, now we have Coronavirus. So now we have a lot of online conferences, what makes a good online conference as well as like the tech behind running an online conference. So welcome, Ben, thanks for so much for coming on. - -5 -00:00:47,609 --> 00:00:49,409 -Unknown: Yeah, thank you guys so much for having me. - -6 -00:00:50,009 --> 00:00:54,240 -Wes Bos: Yeah. With us as always, Mr. Scott to Lynskey. Yeah, you didn't today, Scott, - -7 -00:00:54,359 --> 00:01:22,170 -Scott Tolinski: hey, I'm doing good. I do want to say at the job, Ben, the conferences that I don't just don't I'm not saying this to just butter Ben up here. But the conferences that I've been to that business owner have been the best conferences. So I think I have the best person to talk about this on because seriously that all of the conferences that were there's react on whatever jamstack calm those conferences were always awesome that Ben's done. So thank you very much for one throwing awesome conferences and to stopping by to talk to us about it. - -8 -00:01:22,560 --> 00:02:11,130 -Unknown: Yeah, absolutely. It is my pleasure both to run those events, because it's absolutely my passion. And my love of running these events and bringing these people together that hopefully shows and those events in us. Secondly, is my pleasure to to come on this podcast. I've been a fan of your podcast for a long time. And I think you guys are, are amazing individuals and amazing podcast hosts. I remember your first episode that I know in my car, actually just thinking about it. Now I was like driving across one of the bridges coming up to the San Francisco skyline and there's West, his voice and Scott's voice and you guys just awesome. And it was and you guys were like, oh, we're just figuring this out. And now you got this like amazing cadence go. And it's amazing. It's amazing stuff. Go on. So not to butter you up, but - -9 -00:02:12,270 --> 00:02:12,870 -Wes Bos: I'll take it - -10 -00:02:12,900 --> 00:02:17,340 -Scott Tolinski: Well, yeah. Yeah. Exceptionally into being buttered up lately. - -11 -00:02:17,940 --> 00:02:27,090 -Wes Bos: Yeah, for those who are listening are live. I think we've done two live syntaxes. And we're supposed to do three. But yeah, that didn't pan out. We - -12 -00:02:27,090 --> 00:02:28,310 -Unknown: had other plans for that. - -13 -00:02:28,350 --> 00:02:36,990 -Wes Bos: Yeah. But those were at at Ben's conferences, and he had this like, the really cool. What do you call those big signs that you have made? Oh, yeah. - -14 -00:02:37,350 --> 00:02:43,860 -Unknown: So it's just like an expandable like sign that we just put on the table between you guys. So he put up like - -15 -00:02:44,100 --> 00:02:45,210 -Wes Bos: the syntax logo, - -16 -00:02:45,270 --> 00:02:55,770 -Unknown: we put up the syntax logo on a table between you guys, we've got some nice couches for you. And then we put some shrubbery up there, which we like set up like quickly during a break for like everyone don't go anywhere. - -17 -00:02:57,660 --> 00:02:58,380 -Scott Tolinski: shrubbery, yeah. shoving - -18 -00:02:58,380 --> 00:03:15,270 -Unknown: everything on the stage. It was it was really great. And I believe one of you started off saying Yeah, between two ferns with the western sky. Which was, which was so amazing. Like, we didn't learn this until after that. But you guys had never met until that - -19 -00:03:16,650 --> 00:03:17,789 -Wes Bos: conference. - -20 -00:03:18,660 --> 00:03:21,030 -Unknown: Conference on stage? Well, not on stage again. I - -21 -00:03:21,030 --> 00:03:24,120 -Scott Tolinski: mean, like, yeah, base more or less. We went out for ramen - -22 -00:03:24,120 --> 00:03:28,500 -Unknown: before, which is fantastic. You gotta hear about that story sometime. - -23 -00:03:30,000 --> 00:03:47,370 -Wes Bos: Yeah, that was that was good. Scott is exactly what I thought he would be. So there's not. Likewise, we got to talk about our sponsors, real quick, was sponsored by Sanity, which is a structured content, CMS and fresh books, which is cloud accounting. We'll talk about them partway through the episode. - -24 -00:03:47,789 --> 00:04:12,600 -Scott Tolinski: So you've decided that you would like to run a conference, right? You said I think a conference is a good idea. There are a lot of variables, which I'm sure you're very aware of that there's just thousands and thousands of variables here. And there's a lot of costs. What do you do when you're thinking like, okay, now Now I need to start figuring things out, like what's step number one of starting to throw a conference? - -25 -00:04:12,750 --> 00:06:04,530 -Unknown: Sure. So I think there's really three things that you need when starting to run a conference. And the first thing is your motivation. Who are you? Why do you want to run this conference? Right? Are you a company? Do you want to run this conference for recruiting? Do you want to do sales of a product? Do you want to just bring people together? Are you establishing a new category? Are you an individual? Are you doing this for passion? for money? Are you doing it because you just love events? So in my personal story, you know, I have a background in sales and marketing and finance. Then I moved into web development started off in Rails. You I went to one of those boot camps. But then I really got into react. And I was fortunate enough to really start my web development career, when react was just starting to come out, like I remember I just graduated episode a little shout out to them. And in Portland, Oregon, and React Native was just announced on the stage. And I was just blown away, right. I remember Tom Aquino's keynote, amazing speaker, even better manager of the over there at Facebook for the React team. And it was just so inspiring, so amazing. And they put on quite an amazing conference. So that really inspired me to get into react. So for my personal story, it comes from a passion of the subject matter of the conference. And it comes from a passion of the events because after I graduated from Epic codice, I moved to San Francisco, which just has an amazing meetup scene, and meetup as in meetup.com, which, Curiously, has a trademark for that word. So let's call them meetings. - -26 -00:06:04,530 --> 00:06:05,190 -I - -27 -00:06:07,170 --> 00:09:06,630 -have an amazing, San Francisco has an amazing meeting scene, which are like, basically many conferences. I mean, this is happening every single night. And you have these these companies that are hosting these, these events at their offices, you know, they're promoting themselves and their company, they're saying, you know, come and work for us, and, and so on. But then just the transfer of knowledge, the sharing of knowledge, which is, which is very special, both to San Francisco, because it's such a high level here, also to just web development in general. You know, when I went to my first conference, when I was working in finance, I remember the company I was with, we had a booth. And there was this guy who comes up to us, and he just looks like a banker. You probably even smelled like a banker. I mean, he's he's clearly our competition, because we had this like, proprietary software product. And he's asking us all these probing questions, but he's pretending that he's an attendee. And we're like, dude, you took off your sponsor badge, don't even wear a badge. Yeah. And wearing a suit. You look like a banker. So he's like, infiltrating us, right? He's like coming in, I'm sure that happens in software. But among us, devs Not really, right. We're all about open source, we're about sharing knowledge. And this just, this culture was just so captivating to me. And it just really, really, I just fell in love with it. So I fell in love with the meeting scene in San Francisco, I fell in love with the knowledge transfer, the community building. And I noticed that there was really only one react meetup. And it was happening a lot in in the South Bay, and not as much in San Francisco, which is where I was at the time, I decided to start my own. And we started this meetup.com group, and it just grew from there, right. And so the motivation is really important to establish. So for me, it's a lot of passion. It's a lot of interest. And it's the magic, right, it's around a specific theme. And so this leads into my second goal that you need to understand when you're looking to make your first conference is to know who your target audience is, if you don't have a specific target audience, and you don't have like a brand already built, it's going to be tremendously difficult for you to run a conference. Like for example, let's just say there's this really hot new technology out. I don't know it could be react, it could be view, it could be once that new one by Google, the new mobile cross platform. flutter flutter, right? flutter flutter. Yeah, seems really cool. Do you have an audience for that? Are you the person to run an event like that? Like, if your motivation is more, I want to feel the demand for this? Are you the right person for that, though? You know, so you have to be connected with your audience, you have to know who they are. And you have to have specific motivations for that. Does that make sense? Yeah. Yeah. - -28 -00:09:06,630 --> 00:09:34,980 -Scott Tolinski: I think that's an often overlooked aspect of just about everything. Like, what are you? What are your actual motivations here? That sort of high level thought of who is this serving is stuff that we've been talked about in the context of whatever our freelance projects out, right, like, Who is this? Is this project serving your ego? I don't think it is, I think this is serving some company's goals or whatever. So what are those goals? What is your motivation? And I think those are exceedingly important questions that often get overlooked. - -29 -00:09:35,190 --> 00:10:04,890 -Unknown: Yeah, exactly. And since this is, you know, since your show is all about web development and tech, within that industry, specifically among us developers, it really comes down to transparency, right? You have this whole culture of open source. And so that transfers I think, into events and you want to be as transparent as possible. with who you are, how you're running the event and why you're the right person to run that event? - -30 -00:10:05,270 --> 00:10:39,270 -Wes Bos: Yeah. Do you mind telling us like which of the conferences that you've run in the past? Because like, I know, you've run some of yourself. And then you also have run some for for companies as well. But I always thought that was pretty interesting. Because like, your also your conferences are there for profit, right? You're not just like some sort of Meetup group that's now running a conference. There's certainly lots of those. I'm not going to name names, but there are there are conferences that are industries that you go to, and they're very much put on by companies looking to make a massive profit, because there some other sales are down right now. - -31 -00:10:41,370 --> 00:13:35,820 -Unknown: Yeah, so conferences are done for 2020? Of course, probably 2021. But just to give you a little background on me to answer your question, yeah. So I'm in a unique position, because I'm an independent organizer. And I have a number of skills that allow me and just experience overall that allow me to run events, almost solo. And what I mean by that is, I have a background in sales and marketing, which if, if you're thinking of running an event, and you're not comfortable speaking to people, you're not comfortable, cold calling people, you're not comfortable, cold emailing people, yeah, either get someone to do that. And be really involved in it as a major stakeholder, as in like giving them a lot of the profits if you're if you're if you're going for profits, or don't do it at all, because that is a major part of this. Because conferences are enormously expensive, enormously risky. And if you don't have the confidence to sell sponsorships, tickets and just be on it all the freakin time. Don't do it. Yeah, do it. It's just like, you have to enjoy it, right? That's part of why I'm in such a unique position. Because I really love what I'm doing. I have the experience to be able to do that with sales and marketing. And then with web development, to a lesser extent, I don't really get into code that much anymore. But when I first started, like, I built the websites and you know, I designed it and like it showed because my design. I never worked at a company as a professional designer, but it got the message across and it was it was good enough, right. You know, if you put your heart and soul into something, then it definitely shows. But just to answer your question. So I'm the organizer of react athon, which I've been organizing since 2017. React athon started as just really just a week of events supporting Facebook's react con, which at the time, was impossible to get tickets to like they'd open up tickets, like at 12pm on next day, right? And they would sell out in like, milliseconds. I'm like, Okay, how many tickets? Were there? Did people write bots for this? I don't know. They were they were just so hard to get. Secondly, it was in Santa Clara, which if you're not familiar with the Bay Area, it's a decent distance away if you're like working in San Francisco, and you're used to used to walking places. So we've been running events for over a year in San Francisco, through the variable react Meetup group. And, you know, I had been building this community. So there's a lot of interest around react and this whole event space. And so what we did was we just, we basically said, Let's run a week of events leading up to Facebook's react con. So we partnered with a number of companies, including Pinterest to run our meetup there, which we had over 350 people come there. It's just insane. Fortunately, they have a massive office or I think they used to, I think they're getting rid of that office. - -32 -00:13:36,360 --> 00:13:39,899 -Scott Tolinski: They make you login before going into the office. Yeah, they had - -33 -00:13:40,529 --> 00:17:01,620 -Unknown: the envoys there. And the line was extremely long. We had an RSVP of over 650 I think you can still see it on our meetup page. So a bunch of people did end up not coming in because the line was just so incredibly long, but like hilarious. We stacked the deck with just amazing speakers. We talked about serverless Redux, we had people fly in from the east coast. Justin Baka Rick, from formerly from NPR. I think it's a capital one now came all the way from Washington to speak at this event. But we also did seven different workshops from six different instructors. We had a hackathon at GitHub over the weekend. And then on Monday and Tuesday, which was react con we had a live viewing party of the conference. And so with all this demand, this this goes back to motivation and knowing your target audience. So I'm really understanding that wow, there's a lot of demand for this. But at the same time, there's already a conference the San Francisco react con, right that takes place q1 reactivation was taking place q1. So what do I do, but reactive on is pretty sorry, React con. Facebook's is pretty advanced, right? It's for people who are already in the React community. Right? You're going there as a quote unquote react developer, or web developer who specializes in react is actually sir JavaScript developer who loves react. But there wasn't like an introductory conference. So the idea was okay, since there's all this demand, let's create this one day conference to welcome people to react, right? So we curated all this content, basically, for people coming from, you know, other technologies or at a boot camp or just new to it in general. And that was in the works. But then Facebook announced that they weren't going to run react con. And so I said, Okay, I guess I want to advance calm, too. And that was, that was the impetus for react athon becoming a three day event. So did the workshops, and we still did the hackathon. But just a long winded answer your question I also. So Netlify was a sponsor of the very first reactive THON, which was just, you know, that week of events leading up to react con. And then they also sponsored the second one. And after that second conference, which was that three day events, I'd been talking with them for a number of months about running a jam stack calm, they had actually run a precursor to jam calm the year prior, but I think they realized that it's, it's a lot more involved, it's a lot more difficult to run than they had previously estimated. So for their second attempt, they they came to me, and they said, you know, we want you to run this. So I was hired as the program manager to run jams calm, and I ran the first two of the program manager. And then the next two, I helped at a more like, organizer capacity, because they started to build out their internal events team. And so I ran that and before before Coronavirus, ruined my career and, you know, much as much of the world. It's just so sad to say, I was in talks with AWS and talks with stripe to run events for them. And I just need to follow to help them with graph qL summit, like in a limited capacity. And, you know, all that just stopped. Including reacted on, which was Yeah, yeah, insane. - -34 -00:17:02,580 --> 00:17:21,720 -Wes Bos: Man. Yeah, I remember. It was like March. And I was just like, oh, like, we're, we're still going to this right. Like, yeah, we're still going to this. And there's, there was no cases in San Francisco at the time, and everything was gonna be fine. And that is reported. Yeah, at least no reported cases at all. And within a week or so it just I'm sure your email just - -35 -00:17:21,800 --> 00:18:01,290 -Unknown: escalated. So quickly, it escalated so quickly from Oh, there's no cases here to Oh, there's hundreds, oh, events over 100 in person gatherings are illegal. Okay. I guess it's not, we actually postponed it before they made it illegal. Because our policy is we wrote because we were monitoring this our policy was that if this is declared a pandemic, because remember, this is early March, late February, early March. Yeah, everything is still unknown. So we're like, still figuring this out. But once a who is like, hey, it's a pandemic, we need to, you know, stop this thing. We were like, okay, yeah. - -36 -00:18:03,390 --> 00:18:23,250 -Wes Bos: Can we talk about getting speakers and whatnot? I'm curious about like, how do you select who gets to speak at it? How do you ensure there's appropriate diversity in your speaker lineup? Paying speakers, things like that? Do you pay speakers? Should you there's a lot of opinions on whether you should speak for free or not? What any thoughts on that? - -37 -00:18:23,570 --> 00:20:15,860 -Unknown: Yeah, absolutely. That's a great question. So this, this goes back to my point of knowing your target audience, because your audience isn't just the people who buy tickets and come as attendees, your audience, by audience, I also mean, know who your potential sponsors are, know who your potential speakers are, right? know who your potential marketing partners are people who would be interested in coming to this event, you know, you want to get the press involved, you want to get as many people to make to make your conference as well known as possible, right? You need to make a lot of noise, because events live and die by awareness. They really do. Like, how often have you log on to Twitter, and you're like, oh, wow, this amazing conference is happening tomorrow. Right? Like, why didn't you hear about this before? It's like, Hey, I'm 10,000 miles away. So now with remote events, that's going to kind of flip that on its head a little bit. We'll get into that a little later if we have time. But to answer your question about like, speakers, specifically, well, this goes back to your motivation and knowing your audience and defining a specific theme, right? No one wants to go to a conference that doesn't have a theme. You have to convince those people to actually want to come to this event, both the the audience and the speakers. And so this also goes back to, again, your motivation of who you are and if you are the right person to run this, that will give you a bit of credibility to approach speakers and my philosophy is always that you should confirm a number of speakers by inviting them that helps to give the event a sense of Euler a sense of I'm at a loss for words right now premium this exclusive, not exclusive, but something that's more premium. Yeah. - -38 -00:20:16,709 --> 00:20:30,510 -Wes Bos: You often see that with a conference will launch. And it'll say Chris khariar is headlining, and then none of the other speakers are announced yet they'll be announced at a later point, but they you sort of have to anchor with like, this is legitimate. We got Chris coiour to come for the - -39 -00:20:30,510 --> 00:20:32,910 -Scott Tolinski: it's the list. utiliser - -40 -00:20:33,419 --> 00:20:36,300 -Wes Bos: legitimize there, there you go. Yeah, - -41 -00:20:36,539 --> 00:23:18,780 -Unknown: exactly. And, and these people who are, you know, well known, they're also many of them are like, professional or semi professional speakers. So you know, you're gonna get a good talk from them, you know, you're gonna get good content from them. And many of them have big audiences and big megaphone. So if you can get someone that has, like, 100,000 followers on Twitter, like, that's good, that helps you to market that. Because your speakers don't just become speakers, they become stakeholders, right? Because it's important for them to go to an event that's also successful you like if you're a speaker, you don't want to confirm and say yes to an event that you are unsure of, right? You can't be like, well, if I go to this event, and I fly across the country this night, you know, because in person events, again, you know, you have so much logistics, just as a speaker, you got to fly somewhere, you got to go to the hotel, how far is the actual venue from the airport to get a flight, it's just a lot of time a lot. Yeah, you're spending all this time there is it going to be worth it for you. And so that's something that you as the organizer have to convince others that it is. So if this is your first time running a conference, your job in that regard is a bit harder, so you have to have. So this goes back to me and my personal story of building a brand around rerolled react and running the meetings that have a higher cadence. And you know, we put a lot of effort into those because for us, that was also business, you know, I've been an entrepreneur since like, 2014. It wasn't just like, oh, let's do you know these meetups, because it's fun. It was lead gen for us, right? Because we ran like a react training business, right? We we started with public workshops. And our goal was to be, you know, training in house before the end of the year. And we and we were doing that, like, I think six months into rebelde react, we were training nerdwallet in their office. And then we try and Pinterest, and we tried a bunch of other companies and we even flew to Chicago, we flew to New York, because it was a lot of fun. But honestly, my my conference business really, really started to take off. And I spent a lot more time in that. And that's really where my passion lies. And so I would organize workshops with conferences, as well tie them together. But yeah, to answer your question about speakers, it's really important, I think, to have a number of invited speakers. And then for me, personally, I like to have a CFP or call for papers, a call for proposals or call for speakers, whatever you wanna call it. Yeah, basically inviting people to submit their talk some conferences, like I think react rally, correct me if I'm wrong, but I think they just operate on cfps, which is great. It's a community conference run by two amazing individuals, engineers, or maybe more. I don't know. I think it started with just - -42 -00:23:19,469 --> 00:23:55,620 -Wes Bos: what are your thoughts on paying speakers? One thing I hear a lot from people is when they're complaining about a conference, they say you have to pay all your speakers tons of money and pay them for their time. And then you also have to have like, super well catered lunch. And you also have to have xy. And sometimes I hear these people complaining, I'm like, you don't know how much it costs to run a conference. It's very expensive to run a conference, I think. I'm not saying you shouldn't pay speakers, I just say that. Like, there's a lot more that goes into it. And I'm saying this as somebody who has been to a lot of conferences to talk to a lot of people like you who run them. - -43 -00:23:55,859 --> 00:25:09,990 -Unknown: Yeah, I would encourage anyone who, like doesn't really have an idea of how expensive at conferences just to request a catering menu from a hotel and look at the price of coffee. It's ridiculous coffee at a conference of like 500 people can literally cost you that many thousands of dollars. I'm talking like 567 up to 10 for just 500 people for like a two day cost yet. It's insane. It's so expensive. And everything is so expensive. And this is why actually I started my own catering company started a company called lifted plate. And actually when I was running jam, stack calm. Fun fact for you that the last in person event that we ran at the city of metreon in San Francisco, about 500 people and we got estimates from catering companies and literally it's like the bare minimum without breakfast. We're looking at $200,000 plus Same. And this is not counting the AV. This is not counting the venue itself. This is not counting the labor. It's - -44 -00:25:10,260 --> 00:25:12,600 -Wes Bos: why the wife, the cat, the - -45 -00:25:12,600 --> 00:27:50,460 -Unknown: Wi Fi is nuts. Like people, why is the Wi Fi suck? Well, because it costs $10,000 per megabyte. It's, it's, it's really insane. And so when you hear people complaining, it's you just have to be, you have to one service that you have to address those complaints. But I think you're right, Wes, I think there there could be a little more understanding and empathy on the other side. And this goes back to, to the transparency, right. Okay, so you have all these expenses? Do we pay speakers? Well, it depends on who's running the event. If you're, if you're Amazon running a massive conference, maybe I shouldn't call it a specific company not to pick on Amazon. But if you if your record profits, and you're running an event, and you don't pay your speakers, maybe it probably doesn't look good for you. Yeah, because giving a talk is, it's a lot of work. You know, I gave a lightning talk at DEF CON SF. Last year. And, you know, it's just 10 minutes, but it took me days, and you guys have given talks, and anyone else who's given talk, you know, how much work goes into it, and how much care goes into it. And then not, that's not even counting like polishing your slides and making them look good, right. So it is a lot of work. So for me, as an independent organizer who does this for a living, I need to make a profit to you know, pay my own bills, I need to make sure that the event itself is making money. And I need to make sure that everyone is is happy that it's that simple, good event. So what I do for my speakers, I don't pay them with cash. But I provide, you know, roundtrip flights, I put them up in a nice hotel, for the duration of the conference. And I provide a really good speaker dinner. And the speaker dinner to me is really important. Because having talked with all these potential speakers and the speakers that we confirmed, for months leading up to the actual event itself, when it happens, you want to have some place where where the speakers can come together and meet and just relax. And they've all worked hard on their talks while doing a full time job and taking care of their families and maybe 20 other conferences that they're speaking at. And so I put together like this nice dinner for the speakers to come together and casually hang out and meet. And then that makes the conference experience better for them too. Because, you know, a lot of these people are meeting for the first time in person, or meeting up again from conference they've met before. And so coming to the event, this gives them a chance to, you know, hang out and meet each other and then go to the events and have a friend have a friendly face. That's that's around the conference for them. - -46 -00:27:50,999 --> 00:28:43,530 -Scott Tolinski: Yeah, some of those little little touches and in whatever they go, totally noticed by the people attending conferences, because I've been to a lot of conferences and I think like some of the things that have always stood out about the conferences that we went to that you ran were like you said the speaker dinner excellent. Every time had great conversation met some people that were talking to on Twitter for a long time, but just like set up in a way that definitely invoked that sense of camaraderie and you know, just getting to really experience the people that you're there with. But also, Wes has a note on here about your your speaker goodie bags. Man, the speaker goodie bags were fantastic. And I kid you not my wife yesterday, because you know what? I really love this react. athon mug you have. It's not just a crappy mug. It's a nice mug, whatever. But - -47 -00:28:43,770 --> 00:28:44,550 -Wes Bos: mine yesterday, - -48 -00:28:44,580 --> 00:28:51,750 -Scott Tolinski: you seem to go all out in the goodie bags and the boxes and whatever. And yeah, I think that oh my god, they're just like, really fan, Scott, - -49 -00:28:51,750 --> 00:29:25,740 -Unknown: those. Those mugs have a sordid history. So I ordered, I ordered a box of bugs. I'm not gonna call it the company who did it because they made it right. So I'm not going to give them bad press. But the first time it shipped, everything was broken. And I'm like, Okay, great. Like a couple months left, and I need to order more. They sent more these weren't broken. But then like, a few weeks later, I see like these $2,000 charges on my on my bank account. And I'm like, What the heck? That's for like Russia. But great. So I got the mugs. They're broken. Now I'm hacked by Russia. - -50 -00:29:26,250 --> 00:29:31,080 -Oh, no. But yeah, like guys in there. Fantastic. - -51 -00:29:33,000 --> 00:30:17,880 -Yeah, and, and this goes back to, you know, your motivation, like is your love of like, this event, this technology, this? Whatever it is this community going to show and what you're doing, you know, because like running a conference isn't just, oh, I'm gonna put a schedule together and find a venue and things will work itself out. It's like running a it's like running a new product within a company or even more running its own company, right. You're managing A mid six figure or seven figure budget even. And you have these deadlines and you got sales and you got marketing. And just you have all these aspects coming together in this one event that is just much more happening under the scenes than you can ever imagine. - -52 -00:30:18,480 --> 00:30:41,970 -Wes Bos: I'm gonna discuss a My favorite thing from the goodie bag was the jam stack jam. Where one JavaScript, one API's and one like markup jam. My kids loved it. It was they like they gobbled it right down. And I tweeted a picture of it and people loved it. I thought that was such a interesting thing way to go down is just have jamstack j, - -53 -00:30:42,720 --> 00:31:14,730 -Unknown: I think it was I think it was someone from the Netlify team, I think it was Jessica Parsons. Or maybe Phil Hawksworth that posted that in the company slack. And I just thought it was hilarious. And I was like, Alright, I'm doing that, as part of the stickers, I buy the jam, I remember just the the night before, actually, you know, completing the packages, just, you know, it was such a long time to get the original stickers off of those things, though, man. sitting there in the sink with like a razor. And - -54 -00:31:16,920 --> 00:31:37,950 -Scott Tolinski: so if you all of a sudden see some $2,000 charges for some mugs from Russia that you bought, you want to keep track of how you were reimbursed for that, you should probably reach for one of our sponsors to keep track of your finances. And I'm talking about Freshbooks. West, do you have a personal anecdote to talk about Freshbooks with the zoo involve charges from Russia, - -55 -00:31:38,039 --> 00:32:37,500 -Wes Bos: let's talk about expenses with Freshbooks. I think that's a good good lead in. So Freshbooks will hook up to your credit card, and you can auto import your things right from your credit card. So you would see $2,000 worth of Russian mugs that are broken or as a line item in your Freshbooks. And that should raise a red flag to you because you'd be able to filter for like something I'll do every now. And then as I'll go through my top like 20% of expenses, like the really expensive ones, and then see like, okay, make sure making sure they're all valid. And if there's places I can cut them down, even 10% that's significant. So Freshbooks would spot that for you through your reports and all that. So check it out, if you are a small business that needs to do your accounting, your invoicing, your expenses, all of that, check out freshbooks comm forward slash syntax, ooh, Freshbooks got a new logo. If anything, go to this URL for the new Freshbooks logo. And make sure you use syntax in the How did you hear about a section you're gonna get a 30 day free trial with that URL. - -56 -00:32:37,500 --> 00:32:38,190 -Scott Tolinski: Sick. - -57 -00:32:38,400 --> 00:33:13,200 -Wes Bos: last note about real life conferences is just catering. I can't believe you started your own catering company because the food was so good. Versus the like, usually conferences give you a box with a super cold Apple sandwich that's been in the fridge for three days. Yeah, and like a bag of chips. And they're cold as well, because they're, they freeze these lunches or whatever. And they're awful that I usually then everybody says, Oh, thanks, throw it in their bag, and then they go and buy their own lunch. But it was amazing. And so you just like started your own catering company just Well, - -58 -00:33:13,200 --> 00:35:21,060 -Unknown: it wasn't just me and I'm more the sales and marketing and lead gen like arm of the company, I have the good fortune of having a better half who has her own company. And it's it's assisted living, you know, they they run like a 30 bed assisted living, which is extremely hard in the industry a that's a that's a whole other topic. But they've been running it for a number of years. And the assisted living they run actually was was famed for their food because their grandmother who started it, you know, she started it out of a hatred for the industry. Because when she put her own mother in an assisted living home, like when she went to visit her the first time, she was wearing men's pants, shoes that were like mismatched and didn't even fit, and was just like the food was just terrible. She said Ah, so she started her own assisted living, where she focused on you know, actually like caring for the people. Just assisting them. And more importantly, will not more importantly, but equally importantly, is providing them with amazing food. And so when when my my fiance and her brothers took over the business, they really worked hard on even improving that even more. So they became basically professional chefs. And when my event business started taking off, and I showed them how much money like these catering companies are charging, which is it's fine because it's really expensive and you know, you have your ups and downs and catering. We said well we can do this right. So when we cater gem set con For example, I told you that, you know, we've got estimates for like 200,000 minimum to do this. Well we saved them over $90,000 Because we well, you know, I gave them friendly rates, you know, they're paying me as an event organizer, and I say, Here, I'm gonna give you guys, I'm gonna give you, your company, this amazing product for rates you won't get anywhere else. And that's kind of our pitch now, you know, is that we can provide, like, very top tier catering at rates, you won't find anywhere else. - -59 -00:35:21,480 --> 00:35:29,880 -Wes Bos: Vertical integration conference company, you can get the jam and the stack and the stack, - -60 -00:35:30,480 --> 00:35:31,530 -Unknown: the stack of jams. - -61 -00:35:31,920 --> 00:36:07,830 -Scott Tolinski: So obviously, we're living in a, like a post pandemic, or active pandemic society. Currently, I would imagine that this would be pretty detrimental to the in person events and catering businesses, when you first started having all this stuff, in your mind space was any sort of event that would prevent in person events ever on your radar? And if not, like, how did you immediately react to it? And what were now almost like a year later, how has that reaction changed? And how do you see this space evolving? - -62 -00:36:08,250 --> 00:36:26,730 -Unknown: Yeah, so that's a really good question. And I think to answer your first question was something like this on our radar? I would say no, I think for most people, a pandemic that completely shuts down the entire world economy kills hundreds of thousands. I don't know, it's in billions at this point. I don't know. It's a lot. - -63 -00:36:26,940 --> 00:36:30,440 -Scott Tolinski: It's a lot. It's I mean, there's over 200,000 in the US so - -64 -00:36:30,480 --> 00:40:57,600 -Unknown: but when I remember the first person who expressed concern, one of them one of my keynote speakers for reactive THON, he's like, do you have a backup plan? I'm thinking to myself, Oh, my God, like there is no backup plan for this right? in this industry. Because the contracts you sign, it's like, there's no insurance for this for an event like this. Right? There's, there's force majeure. And that's it. And when it completely decimated the industry, like this event, this industry has completely gone to zero, right. And I saw the writing was on the wall, pretty quickly, when I saw that the National Guard had quarantined an entire city in New York, when I saw what was happening in Italy. And then in Spain, I knew that this was something that is a once in a century event. And, you know, in the events industry, in every industry, in the past, what, six years or so since this booming economy, we've all just been coasting, right? It's just been easy to find money. It's been easy to to make sales, it's been easy to build a business. Nothing is easy, but comparatively speaking, right? To a recession, or I don't I don't what do you call this? Is it a depression? It's an entirely depression. Yeah. It's, it's its own category. Right? Because like, at least the Great Depression was, it was it was caused by economic forces. I mean, can you classify a pandemic as economic? I guess you could, but it's just, it's just so off everyone's radar. But I think, Scott, to answer your question about going forward. As I mentioned previously, I think in person events are done for at least through 2021, if not until 2022. There's a lot of uncertainty around this, of course. But I think that uncertainty leads to confirmation that this is not coming back anytime soon. Because, as I mentioned, running an event is enormously expensive. It's there's enormous amount of uncertainty around it. And if I'm an event organizer thinking about running a big conference, like how am I going to convince people one that it's safe, and two, that it's actually going to happen? Because I need to confirm sponsors. Now, many sponsors, many companies who sponsor events, and they now have policies against sponsoring in person events. Many companies have policies against sending their people to in person events, right. And so that reduces your potential pool of attendees, potential pool of sponsors, just overall revenue. And I haven't really looked at budgeting, but I don't think things are going to reduce in cost that much, right, you'll probably see special deals here and there. But again, with all that uncertainty, how many people unless your pockets are really deep, like unless you're a Google or Microsoft, how many people are going to risk that? Planning six months, ahead of time, six months, a year, two years, like you look at for the big conferences, like the ones that take place at Moscone Center, for example, in San Francisco, which is our big Convention Center. In 2019, that place is booking out two and a half years. You have to plan at minimum two and a half years for your event coming up. So the big events, what happens to those and then you look at the smaller meeting scene, right? The events that happen that company offices, right so let's say You're a company that used to host events. Now let's talk about you considering hosting these. Let's say in 2021, q1 q2, let's say for argument's sake that you have welcomed your employees back to your office, you've instituted strict guidelines, health and safety. Everyone's abiding by them, you know, you're taking temperatures of everyone. It's very tight, very tight security. Okay, that's great. You're doing that for your employees. You're taking a risk there. But you're doing it at from a measure approach. Are you going to welcome hundreds of strangers into your office? to potential super spreader events? Yeah, probably not. Yeah. So I think the conference scene is done. And so is the, you know, smaller meeting scene, probably through 2021. Unless something like, basically a miracle happens, like our presidents. - -65 -00:40:57,630 --> 00:42:56,130 -Yeah. And so when I saw this was happening, I saw it pretty early on, I saw how severe it was. And I was looking for solutions for taking events online. But everything I saw, just was not adequate. Right? The main things out there are you got your Slack, you got your Discord. And then you pair that with like a YouTube live stream. You hack it together on like, a website, use your OBS, you're dealing with rtmp you're dealing with streams. Yeah, everything's still super hacking fragmented. It's just it's, it's not a good experience for the organizer for the speakers. sponsors, like what are the sponsors, even getting an online conference, right? The attendees, you don't really have the serendipitous nature of number one, just the excitement and thrill of being in a in person location with other like minded people. And then just bumping into people and these random conversations, because, you know, a conference is so much more than the talks, right? It's running into people that are like minded from any part of the world, and having great conversations and saying, hey, you want to go grab dinner, you want to go grab a beer, it's these connections that conferences really facilitate, that make them so amazing, and which in which is why I love them so much. And so with online events, you never going to replicate that experience, you're just not going to, and anyone who promises that is, is crazy, or is just, you know, selling snake oil, because whether you have VR, or AR or what's that like video game that they're like Farmville or whatever they're playing? Now, that's like attending an event? Like I think, personally, I think those are really sad. Events. And it's like, I need to go like, like, I'm Zelda into the - -66 -00:42:57,000 --> 00:43:12,570 -Scott Tolinski: crossing. Yeah, you're an animal crossing your yard that you painted on yourself. Yeah, believe it or not, by character and Animal Crossing, wears a level up tutorials logo T, that I may never arrive at a live conference, I'd be wearing it. - -67 -00:43:12,920 --> 00:46:28,260 -Unknown: Very, very nice. Yeah. So I think that online conferences, online events, should not try to replicate that experience, because you're just not going to get it. But there are other things that you can focus on, that are more conducive to the online experience that can actually be more beneficial. And I think the main thing that is being overlooked, and something that we're working on right now, is facilitating smarter connections with people I'll give you, I'll give you an example. So an in person event, one of the main problems for sponsors, is measuring their ROI, right? How do you measure the number of people you interacted with? How many of those turned into sales or recruiting whatever your goal was? How to classify them? And then how inefficient or efficient Are you in connecting with the right people? Right, if your goal is hiring, and you're talking to people who aren't looking, Hmm, that's a waste of time, right? And the organizer can can help alleviate this and facilitate this to create hiring events and certain things that appeal to certain sponsors. And you can help that for sure with with event design, but it's not perfect. And it's always going to be limited to the amount of time and amount of resources you put in right mind of people that are there at the event and what your strategy is, but online, you can do some interesting things. So one thing we're working on with this new company event loop that I co founded, and I'm the CEO of we're working on dynamic sponsor booths. Hmm. So check this out. So you're a sponsor. You have Have your booth online. And you're at this event where there's, you know, full stack engineers, this front end engineers, this back end engineers. And there's the DevOps engineers, right? It's an engineering conference. Now, if someone from DevOps shows to your shows up to your booth, did they want to see information? That's just very general? Do they want to see stuff on front end? Or did they want to see stuff on DevOps, they want to see stuff on DevOps. So with an online experience, you can create these dynamic booths so that the attendees that show up into your booth see relevant content, relevant information that's most appealing to them. And that helps to facilitate engagement. Right. And so we create these smarter connections. And then for the company. That's smart pipeline generation for them, right? That's Yeah, integrated lead gen for them. Whereas some platforms right now they have these sponsor booths that are just like, basically a zoom call. in a chat room. Yeah. Mm hmm. Ours is helping to facilitate these connections. And the way we're thinking about this is with the passion and love that I have for conferences, and making connections with people, because we're not seeing that right now. Right. So we need something that is actually going to help facilitate that. And so so, so that, that's what event loop is, is helping to do. - -68 -00:46:28,920 --> 00:46:43,770 -Wes Bos: That's really neat. So it's, it's an entire product, there's, there's the you're using the good of technology to sort of further experience for the sponsors. But I also includes the whole viewing and giving a presentation experience as well. - -69 -00:46:44,040 --> 00:49:55,320 -Unknown: Yes, so with event loop, our mission is to make remote events easier to create, more fun to attend, and more useful to every type of user, both at the event and beyond. So it's a platform for organizers to easily very easily create events, for speakers to create their own like speaker profile and speak at any event that they want to, for attendees to browse and discover events on the homepage, RSVP to them and attend them very easily. And sponsors to easily create their own company profile, and sponsor events. And so it's important to note that this isn't just like a platform for offense, it's also a professional network. Because one of the problems that I found with other online event solutions is that it's all about the event itself. And this makes sense at an in person because all the amazing things we talked about in person events, and not amazing in person experience. But you don't really get that with online events. So you need something more. And for us, it's leveraging the power of the internet, because that's the medium were meeting over. Scott, if we were to meet at an event on event loop, you could follow me and I could follow you that's a mutual follow. So now we basically acknowledge to each other that we want to connect. And so now I can get data analytics and where we met, what event we were at. And basically see our history there. So we're providing each user with like a light CRM. Now this translates to companies and sponsors as well. So they get this this data as well. Disclaimer of being fully ccpa and GDPR compliant, of course. But the interesting thing here is that events on event loop are not just an island. It's not just Galapagos it's a continent. Because you can meet people at events, you can connect on event loop and you can stay connected beyond that event. And the integration, the smart integration for speakers, for organizers for sponsors, really just makes this simple. And our goal when we launch in a few months here, leading up to our our flagship conference, the modern web summit. Our goal is to create a community for tech. So we say that event loop is the events driven network for the tech community because you build your network out events on event loop so you can discover events happening. You can learn at events, you can engage whether you're comfortable just typing in chat, or engaging on video conversations. And not just like random right? Like the the organizers that we're onboarding or experienced organizers that helped to facilitate conversations like one of the things we do at react, athon that you guys experience is topic tables. Very simple concept. You create a table where people come in, they identify it's all Yeah, right. You facilitate conversation around a specific topic. - -70 -00:49:55,770 --> 00:49:56,490 -Wes Bos: I love that. - -71 -00:49:57,270 --> 00:50:38,130 -Unknown: It's such a more efficient way to network. You know Both for for extroverts who are like, okay, now my ROI can be, I can be much more efficient, because I can identify the things I want to talk about. And for introverts who might find it more intimidating or more difficult to start conversations, it's a lot easier to join a conversation because you know, what you're going to talk about. So we have all that integrated into event loop. And so it makes it easy for you to organize, attend events, to get analytics after the event, and just so much more. And we're, we're working so hard on this, and we're, we're really excited to launch it pretty soon. Nice. - -72 -00:50:38,130 --> 00:51:41,850 -Scott Tolinski: I think my favorite thing you said there was this not Galapagos, which seems like a great tagline. It's very, very catchy there. In terms of building islands or whatever. Yeah, no, it's just it's really interesting to hear you talk about about this stuff, especially because we've been firsthand experienced your, you know, your in person conferences. So we know like, what your your vibe is, and, and how, how can that be translated into these online spaces that we're facing right now? I think it might be a good time to talk about one of our sponsors, which is Sanity, which hilariously enough as a lead into this, their new feature. It's also not Galapagos as in allows you to manage and edit your content while having other people review it as in You are not alone editor on an island at writing this stuff. You can now write your code or write your your wiziwig and have it be tracked changes and have those changes be authored for review. Wes has a little note in here, which is saying it's like get blame for authoring content. - -73 -00:51:42,930 --> 00:51:56,580 -Wes Bos: The Sanity folks sent that to me, they're like, well, they they sent me they're like, Hey, can you talk about this? I'm like, array talked about it. But he said it. It's like get blame for content editing. I was like, that's you're writing it for us. That's a great way to put it. - -74 -00:51:57,990 --> 00:52:01,500 -Scott Tolinski: Wes, do you want to talk more about Sanity? I know you've used it quite extensively. - -75 -00:52:02,310 --> 00:53:26,280 -Wes Bos: Yeah. So Sanity, we talked about them 100 times before they are a structure content, CMS, they are a headless CMS, meaning you go and make your content types. and out the other end, you can grab their API, they have this really slick, it's called sanity studio, that really slick UI for actually editing your content. And they work on that just as hard as they work on the actual dev experience for for you. And I, which is great, because the clients love love using it. So this like review thing that they just rolled out is super slick. It's, it shows you when somebody edited something, when someone deleted something, you can see who did it, which is they said it best it's like, it's like get blamed, but for content editing. So it's pretty sweet. They just actually they just announced the other day, they raised a $9.3 million to redefine content collaboration, which I think is so cool, because so they're they're really focusing on making a good editing UI that people can use at the end day, which is, that's that's the mass at the end of the day, right? Because you can, you can have a good dev experience for you and I but you can have a really slick editing UI as well. So check them out sanity.io four slash syntax that's going to get you double the free usage tier. Thanks so much to Sanity for sponsoring. What should we talk about? Now? We're getting up near the end? Is there anything that we didn't touch upon yet? - -76 -00:53:26,280 --> 00:54:21,420 -Unknown: Ben? There's, I mean, there's, there's a lot, but ours is not that much to cover over this. Like, if anyone's curious they can, they can reach out to me personally been at event loop dot app. I'm happy to help you. You know, with any conference questions that you have, or any event questions, I'm sure we won't be getting too many in person questions. In the next few months, maybe that's probably even doesn't make sense to say that. But I had this whole like list of things that were like, more practical, like we talked a lot. You know, we talked very obtusely about this, which I think makes sense. But I think you also need like a part two that goes into details. Or maybe I'll turn this these notes I have into into a blog post or something. - -77 -00:54:21,870 --> 00:55:07,620 -Wes Bos: Yeah, no, we definitely have you back on and talk about it. I think this stuff is super interesting. Because like I personally have been to probably dozens and dozens of conferences over the year I've spoken at, actually all of them. I I'm trying to think about like I've been to a couple conferences early on, but pretty much every conference that I go to, I say speak as I see it, both from a point of view of somebody who is attending and someone who's speaking as well as like, I agree with you like probably the best part of the conference is meeting people and having good conversations with people and grabbing a drink with them and things like that. So There's a lot more to running a good conference or attending a conference that is in the the nitty gritty as you say. - -78 -00:55:08,220 --> 00:55:11,070 -Unknown: Yeah, yeah, totally agree. All right, - -79 -00:55:11,070 --> 00:55:17,280 -Wes Bos: let's move on to some sick pics, then. Did you have a chance to grab a sick pic? - -80 -00:55:18,000 --> 00:55:56,310 -Unknown: Yeah, I did. So my friend sweet Zach on twitter at sweet Zach. He's been really into serverless lately, and he kind of he kind of builds in public similar to how swix builds. And he has this really cool new course called serverless handbook. Oh, just really interesting. So he's been learning a lot of serverless on his own. And he's been he's a, he's one of the instructors for real world react. So he's really experienced in like teaching workshops, and publicly and privately, most training companies. So if you want to get some of that experience, and you're interested in serverless, go check out serverless handbook dot. That's, that's my sick pick. - -81 -00:55:56,610 --> 00:56:05,580 -Scott Tolinski: That's awesome. I am definitely lacking in my serverless expertise. So that seems like a good thing for me to pick up on. Wes, do you have a sick pic? - -82 -00:56:05,970 --> 00:58:02,790 -Wes Bos: I do is the new Chromecast. Google just rolled it out a couple weeks ago. And I got mine about five or six days ago. And the new Chromecast that plugs into your TV. It's 4k. But it comes with a remote. And it's awesome. Because first like I love the old Chromecast. But the not having a remote is frustrating, especially with having kids because you walk away and something happens or they want you to play the next one. And like my kids are old enough now or they can hit the button to play the next one. Yeah, so the new Chromecast is awesome. And it aggregates all of your not all of it, but a lot of your apps. So we've got Netflix, Disney plus amazon prime CVC, we've got a couple services that we pay for. And it just aggregates them all into one UI kind of like Apple TV will do. Except they don't lock it down unnecessarily like Apple TV would. Mm hmm. And it's just an awesome UI. It's nice and snappy on it. It was 70 bucks Canadian, I think they're 50 bucks American. The other thing I really like about it is that you can use just the remote, at least on my Samsung TV. It's a replacement, the remote replaces your TV's remote. So it's not like you know when like when you're a kid you had to like turn the TV on was one remote. And then you'd have like you had another remote for like the cable box. And then another one for the DVD or the VCR you'd have like six or seven. And then if somebody tried to like turn the volume up on the wrong remote, you're like, No, no, you're you're screwing it all. When you increase the volume on the Chromecast, it actually increases the native TV volume instead of having this weird, like offset volume ratio like oh, it's not loud enough. So and you can also use the original Samsung remote with all of the Chromecast features except for the voice command we have to use. So I'm so impressed. It's awesome. Big fan of it. Check it out the new Chromecast. - -83 -00:58:03,060 --> 01:00:09,420 -Scott Tolinski: Cool. I saw yours looked really nice aesthetically. So my second pick is going to be a vacuum. I just bought this vacuum. Yeah, I bet it was a big fan of my Dyson Handheld Vacuum before which belong to one, whatever. But we had it for many, many years. And it still functions but like, out of the plastic on the handle broke off. So it's like there's like a lot of little things about it. The batteries like really bad nowadays there. It was just really showing its age. So we jumped on this tiempo pure one s 12. And let me tell you, Courtney and I watched probably about 20 hours of vacuum review YouTube, which is a huge channel where there's so many channels where they just show you all that here's like a test course for these vacuums. And here's what it sucked up and what it didn't. Yeah. And so we got this Tinker one, let me tell you, it is so very cool. Besides having an app, it's got an app, and it's got a holder for your phone. Not that I'm going to use either of those features. But it has like a really neat LED screen that's showing you how much suction it's needing at any given point you have like a little touch slider where you can make it more suction. One of the needed neatest features about this thing is that it's got like a trigger lock, so you can lock the trigger. So you're not constantly holding the button to turn on the vacuum on the whole time. It seems like a problem that basically this company took all of the little things that annoyed me about my Dyson and made them so much, much, much, much, much better. So check this thing out. It is very futuristic. I've been really really liking it. And, man, I it's so funny that I would say pick a vacuum, because this is one of the ways that my wife psychologically manipulates me. She's a psychologist, right? She understands my psychological profile. She knows that I really like positive reinforcement. And she uncovered that my mother my entire life told me I was really good at vacuuming. So you know what, as an adult vacuuming is hilarious. It's hilarious. They don't pick up the vacuum book eight times a day. All because my mom was always like your great vacuum cleaner. I know. She knew what she was doing. So, a shout out to my mom who's most likely listening to this who got some really good vacuuming out of her house when I live there as a child, so shout out - -84 -01:00:09,510 --> 01:00:20,580 -Wes Bos: so is this your like main vacuum like amazing? It's like yeah, it's a battery operated you just like dock it and it charges and you don't have like a one you have to plug in everywhere and schlep up the stairs, correct? - -85 -01:00:20,609 --> 01:00:48,090 -Scott Tolinski: Yeah, and that's doing it before with the Dyson which was life changing itself. Yeah, we never had a bed and that thing was incredible. This is even much better because when the batteries are better, but to the batteries are swappable, so they give you two batteries. Unlike the Dyson where after the battery died, you got to go hunt you hang it up and let it charge. This one battery dies. Just toss in another battery. Oh, good to go. Nice. Yeah, I could talk about this vacuum all day. Always instagramming photos of it. And it was a little weird. - -86 -01:00:50,790 --> 01:00:53,100 -Wes Bos: Sick pics. God, that looks awesome. - -87 -01:00:53,190 --> 01:00:54,390 -Scott Tolinski: Yeah, it's very fancy. - -88 -01:00:56,190 --> 01:01:01,230 -Wes Bos: Let's get into some shameless plugs. Now. Ben, what do you have to plug for us today? - -89 -01:01:01,710 --> 01:02:52,980 -Unknown: Yeah, sure. So, you know, I told you about how we're kind of reinventing redefining conferences, events, meetings online. That's with event loop. So people can go to event loop dot app, request an invite, we're in private beta right now. So you can request an invite there. It's specific to tech right now. So if you're, if you're looking for you know, chatting about sports, this isn't the place or politics specifically, please come and talk about politics on event loop. No way. Twitter's for do it there. So event loop dot app is that. And secondly, we're we're kind of launching to the public on March 22. So this is going to be the modern web summit. So we have 10 tracks, including view, accessibility, react, and many, many more at modern web summit.com. So if you really want to see event loop in action, you want to come to this really awesome event with over 100 sessions and amazing speakers, it really shows off like what event loop is all about, go to modern web summit.com. Tickets are arranged from pre to 199. So we're also very transparent about where our funding goes for the tickets. So we're paying our speakers going back to that previous subject, an equal share of 20% of the funds. We're also donating 20%, Free Code Camp, among other areas of allocation of funding, so so check out modern web summit.com. We'd love to see as many of you there as possible. It's it takes place on event loop on the internet, so it's really easy to attend. And you can always upgrade your ticket later. So So go and grab yourself a free ticket. And then you can upgrade to a limited or a full ticket at the event or just before the event if you want. Awesome. - -90 -01:02:53,250 --> 01:02:59,700 -Wes Bos: Tyler McGinnis asked me to speak at this. So I believe I will be speaking here. I can't wait to see you there. - -91 -01:02:59,970 --> 01:03:19,770 -Unknown: Yeah, that's actually a good point. So each track that we have each of the 10 tracks are curated by experts. So Tyler McGinnis of he did one of the earliest react tutorials online, I believe alongside us, Scott, I didn't know you at that time. So I don't know if you were at that time. - -92 -01:03:19,830 --> 01:03:21,540 -I was okay. I was - -93 -01:03:22,710 --> 01:03:25,050 -Scott Tolinski: the very first one. The very first, - -94 -01:03:25,470 --> 01:03:32,160 -Wes Bos: that's how I met Scott. I told him not to copy my name. So we released beginner react tutorials at the same time. - -95 -01:03:33,570 --> 01:04:02,280 -Unknown: Yeah, so we have Matt or David curating the serverless track, Jen looper, curating the view track and just so many other amazing people that are curating this content to make it just our goal is to make it the biggest web conference in the world you know, the most relevant we might take some flack for featuring certain technologies and not featuring other is But no, we got a we got to stop it at some point. So I yeah, and Traxxas is innocently enough. - -96 -01:04:03,230 --> 01:04:23,100 -Scott Tolinski: Let me tell you one, though. This website slaps this website is very good. It's so so cool. With the the little the bars going down I love the visual aesthetic. The speaker lineups bananas good. You got Eric Meyer, you got Denver, Denver resident Miriam Suzanne and Susie, do you remember this do West Did you ever use Suzy? - -97 -01:04:23,160 --> 01:04:23,670 -Unknown: Oh yeah, - -98 -01:04:23,700 --> 01:05:25,620 -Scott Tolinski: yep, yep. Yep. Friend do this show Henry Helvetica I'm a Boston man. great lineup, john papa. I can just keep going on and on. Of course Wes Bos is going to be there. So you know, this thing is going to be slammin. Love it. Cool. So yeah, thanks for sharing that. My shameless plug is going to be for my course on animating spelt. spelt is an awesome framework that is continuing to improve and get better and better and better. In fact, the latest spelt summit that just happened was so cool. So I am going to be releasing a course on animation in spelt. We're doing all sorts of neat stuff including learning actions, which are a Powerful directive in svelte, that allows you to do some really neat stuff really close to the metal. And the thing that I've been loving most about it is that how close you are to Dom API's compared to some other frameworks and other things like that. So you are really tightly tightly into modifying the DOM and I love it. So check it out at level up tutorials.com. And if you sign up for the gear, you're going to save 25% that is - -99 -01:05:25,620 --> 01:05:41,130 -Unknown: so beautiful. And hey, we have spelt track actually at modern. And I love I love your little episodes that you guys do where like you teach each other something? I think we I think Scott, you taught you taught West view on one of the episodes of Yeah, - -100 -01:05:41,130 --> 01:05:42,540 -correct. Yes, - -101 -01:05:43,080 --> 01:05:44,550 -you should teach him some spelt. - -102 -01:05:44,760 --> 01:05:47,910 -We actually have one we have done it. We - -103 -01:05:48,240 --> 01:06:27,000 -Scott Tolinski: have a couple a couple months ago, and I taught us about and i think is pretty convincingly neat. I should note that this episode's gonna be out November 18. So our Black Friday sale will be in full affected. So if you actually, if you sign up for the year, you're going to save 50% and not 25% for a very limited time for Black Friday. So get your yearly subscription in now and you'll get access to animating spelt along with every other there's like 30 courses on level of tutorials. But in addition, if you sign up for the year, you get access to 12 new courses over the course of the upcoming year. So check it out level up tutorials comm forward slash pro - -104 -01:06:27,390 --> 01:06:51,300 -Wes Bos: Alright, I'm gonna shamelessly plug my master Gatsby course actually all of my courses will be on Black Friday sale so just go to West boss comm forward slash courses that will include my two most recent courses Master gatsby.com and beginner JavaScript calm. So check them all out. All right, that is it. Thank you so much, Ben for coming on. That was awesome. Yeah, a - -105 -01:06:51,300 --> 01:06:54,720 -Unknown: lot of fun. Thanks, guys. Great to see you too. Again. Yeah, likewise. - -106 -01:06:54,750 --> 01:07:03,570 -Wes Bos: Yeah. So hopefully we will meet again in person one day. Cool. All right. Thanks again and catch you later. - -107 -01:07:03,630 --> 01:07:05,160 -Unknown: Cheers. Bye. Please. - -108 -01:07:07,170 --> 01:07:16,920 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax305.srt b/transcripts/Syntax305.srt deleted file mode 100644 index d5e985e11..000000000 --- a/transcripts/Syntax305.srt +++ /dev/null @@ -1,88 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday Open wide. Get ready to stuff your face with JavaScript CSS loadmodule BBQ Tip Get workflows right dancing, soft skill web development hasty as crazy as tasty as web development traits coming in hot here is when Sarah Khuda boss and Scott L. Totally ski. - -2 -00:00:25,920 --> 00:02:15,330 -Scott Tolinski: Oh, welcome to syntax in this Monday tasty treat, we're gonna be talking all about conventional commits. And if that sounds like something you've never heard of before, then you are going to be very excited about this one, because this is going to be talking about commit messages, and a system for the sort of specific commit messages that you can write that can then have more intent and functionality within your application. Overall, commit messages are hard and having a system for it takes all the guesswork out of it. So we're going to be talking about conventional commits in this episode. My name is Scott Tolinksi. I am a developer from Denver, Colorado, and with me, as always, is West boss. Hey, hey, Wes. You know, one place where conventional commits will definitely come in handy is your Sentry. Because you can get what commit what version, everything happens to if you connect your repo to sentry@sentry.io, which is our favorite error and Exception Handling tool that allows you to track all of the exceptions and errors in your application. In fact, you'll want to check out sentry@sentry.io use the coupon code at tasty treat all lowercase all one word for two months for free. And again, one of the cool things here is that when we're dealing with conventional commits, right, we can attach specific commits to our code in Sentry, or specific versions, you can see which version and what kind of commits went into this code. And it's so nice that you'll be able to track all of this and say, Hey, remember that thing that you did, there was an error there. And then in your commit message, you could actually have a better idea of the bug that it fixed or anything like that, but you're attaching because maybe you're creating an issue automatically in GitHub in Sentry. And then you're referencing that issue and your conventional commit a lot of cool stuff here. So let's get into a conventional commits was, is this something you are currently using? - -3 -00:02:15,660 --> 00:03:30,540 -Wes Bos: No, it's it's not like we mentioned a couple episodes ago that like, pretty, pretty good, I can sometimes put garbage ones in there. And that's fine because it for yourself, because you can squash them all into into one commit. But I've been seeing a lot of pull requests come in lately with something like build colon or fix colon or chore, colon or refactor colon. And I'm like, Oh, that's cool. But then I see it over and over. I'm like, there must be something that people are following and found it. It's conventional commits. And this is really interesting to me. Because a yes, it does give you much better history as to what happened. But what I was surprised to find out is there's lots of tooling around parsing these commits, and helping you decide what to release or what changed. And that's really interesting, because like, I've been working with the folks on Keystone lately. And every time that they put in a commit, they also commit a change file, and it will describe what changed. And then when they do a release, they're able to just automatically compile all of those, what changed and they have all these, like, you know, you look at the the change releases as to what happened. I was like, Oh, that's how people are generating these things. They're automatically doing it. They're not just someone being like, oh, what did we do since the last? - -4 -00:03:33,780 --> 00:03:35,460 -Scott Tolinski: commit to those changes happen? - -5 -00:03:35,670 --> 00:04:32,250 -Wes Bos: Yeah, I thought that was really cool. And I'm assuming that's what VS code does as well, because every time VS code releases, they will link back to a commit. That actually happened. So So what is it? Well, every time you have a commit in your commit message, you will write the type of commit that can be fix, feature, breaking change, build chore, refactor, test, perf, colon, and then you write a description of what you changed. And then there is an optional, so commit messages can be multi line, you can have an optional body, which describes it a little bit more. And then you have optional footers, which is often used for custom stuff, like if you want to, if you run JIRA, and you want to link it back to a JIRA tag, you could put the JIRA if you have a specific reviewer, you want to like link up who reviewed something, you could put their name in there, and you could automatically parse those out into it. So it's sort of like a syntax format for code changes. That is also a readable, - -6 -00:04:32,270 --> 00:04:37,440 -Scott Tolinski: I would say it's a conventional, it's a convention for writing commits. Is that - -7 -00:04:37,470 --> 00:04:41,510 -Wes Bos: yeah, that's what it is. Yes, you nailed you should register that domain. - -8 -00:04:41,550 --> 00:05:31,950 -Scott Tolinski: Yeah. So neither of us Western. I haven't haven't necessarily started using this yet. But we're both going to give it a good try. Right. And I think we should do a check in and talk a little bit about what we've learned about conventional commits over time. So you mentioned that there's a specific format in a body potential question. That, to me seems like I'm gonna have a lot of trouble keeping track of all of the details here. Is this something that you're concerned about in your own? Like, I know I have, like, I've memory issues where I'm going to forget all of the the structure of this kind of thing. In fact, when I think about bam, I have to like, go through my brain. Alright, block, like, what is the order that they all go in for them? Yeah, like, for people who have a hard time remembering, like, really specific orders and stuff like that? Do you? Do you think? Is that going to be something that you're going to have trouble with? Are you just gonna pipe this into your brain and leave it there? - -9 -00:05:32,430 --> 00:05:52,620 -Wes Bos: I think I think you'll you'll get to know it. Because it's like Git committing and things like that. But like, I think I'm also thinking now like, could there be some sort of like csli that prompts you for each of the pieces, there's a VS code extension I saw. And when you do a commit, it will prompt you for each of these one, four or five different pieces of information. Yeah, I - -10 -00:05:52,620 --> 00:06:23,970 -Scott Tolinski: actually, it's funny, you mentioned that because I had just googled conventional commits c li to try to find the same thing. And I found commit doesn't commit as in which it does is exactly what you're referring to. It's basically prompts that are saying, Oh, hey, dude, would it what type of release is this? What does this do whatever. But I did, this is what I want, this is what you want. And there's also another one, it's Cz, c li, which is also a conventional commits. c li, which looks like it has quite a bit of people using it 10.2 1000 - -11 -00:06:24,210 --> 00:06:26,460 -Wes Bos: Oh, yeah, we're late to the game on this, - -12 -00:06:26,909 --> 00:07:41,130 -Scott Tolinski: late to the game on this. But let me tell you, I also installed the the conventional commits GitHub extension, or I'm not that good at the VS code extension. And so your standard Command Shift p conventional commits, and then it gives you a drop down saying what type is this is a feature? Is this a bug, whatever, and then it asks you for the scope. Alright. And I could say no scope, no scope, 360 it asks you what kind of emoji you want to give this? Oh, that's great. This VS code one sec. If you want the lipstick emoji, or the rocketship emoji, okay, then write a short 10. It says tense description, but maybe it means terse. Either way it write a description. So I did this, that whatever. And it's going to create your commits for you. And to me, that is such a better way to do this than me trying to remember the actual syntax for conventional commits. I think this to me was the biggest barrier for this because I would look at this. And let me tell you the, the documentation for conventional commits, yeah, it's pretty easy to parse. But if you look at this page, it can specifically be a little bit overwhelming. If I look at this, I can look at it. And I would say, wow, there's a lot to learn here. But yeah, if you install one of these serializer tools, hey, that that's all of the the hard stuff out of the way for me. - -13 -00:07:41,490 --> 00:09:05,660 -Wes Bos: Let's talk about semver. Real quickly. So semver is, you know, when you see like a node package, and you see like 1.5 point two, we might be wondering, like, Look, what are those numbers and semver is broken down into the three major, three major parts, there's fixes which are. So let's look at 1.5 point two as an example, that point two was released, because they released 1.5, point one, and subsequently 1.5 point zero, and then they realized something was broken. So they fixed it and released a dot release, which is that the 1.5. part, the point five is they were on 1.4. But they added some new functionality to it. But they didn't break anything else. So that they went from 1.4 to 1.5. Because now there is this new method that you can, you can go ahead and use. And then finally, the the one point, the very first one is breaking changes. So let's say they released something that totally broke how a method on API worked, then they bumped it to 2.0 point two zero. And this is kind of associated with conventional commits, because you have fix, which is patch releases that the very end of it, there's feature, which is adding new stuff, that's the middle and then you have breaking changes, which is the main one. So you can you could associate these and probably even generate your semver version for your package automatically based on the tags that are in these commits. - -14 -00:09:05,670 --> 00:09:32,700 -Scott Tolinski: Yeah, you know what, I'm really interested in that because if you were to look in the level up tutorials, GitHub issues right now, you would see one that says automatic versioning. And then the body of the issue says I'm really tired of having to change the version myself. I really think that this could be actually something that could help us out in that regard. I'm really excited to give this a try. I know we are definitely late on the boat to this one, the boat pulled up and left and now we're like trying to we're saying wait, hold on, we're gonna miss the boat - -15 -00:09:32,850 --> 00:10:06,090 -Wes Bos: looks like there is already a package that will based on the commits will generate a semantic version for you and automatically published. What do you see that if you go to the bottom of this conventional commits org, there's tooling for conventional commits, there is one that's just called a semantic version, and it will automatically and I need that because I've got a couple of packages on NPM. And every single time that I have a change to one, I have to like bumpit myself, like Scott just said, and publish it myself and automating that would be, it'd be really, - -16 -00:10:06,359 --> 00:11:34,980 -Scott Tolinski: really slick. And also it would, it would go really well with just everything else in my workflow, especially like we mentioned in Sentry, because you can, you know, attach errors to versions, right, whenever I get an error in my Sentry, it tells me what version of the software it's on. And if this was all done automatically, and we could have version updates micro versions much more often when I'm not like every commit or whatever, or every every whatever, it's really going to nail that in just a little bit more. And I think that sounds fantastic. One thing I do want to shout out here, and this conventional commits.org is just how awesome this documentation is. Because they do everything in like the body of it's in like a big FAQ, essentially, I mean, besides the the introductory stuff, it teaches you the spec, whatever. But then there's a whole FAQ. And then below that there's some resources for about tooling for conventional commits, of which there is a lot you can always tell when something is highly used by how much tooling there is around it. And then it projects using unconventional commits. So you can check out some people who are actually using it and see what it looks like in action. And to me, this is like gold star documentation. I really love this. I think that is just the amount of tools and features around this stuff really gives you a good idea of why you should use it. And I think people should take notice about just how neat some of this documentation is it feels like you know, those like awesome GitHub repos where it could be like awesome confessional commits. This to me feels like yeah, that repo as the documentation. I wonder if that - -17 -00:11:34,980 --> 00:11:41,310 -Wes Bos: is the thing. Yeah, right. Yes. There's not it's because the docs are an awesome list already. Whenever - -18 -00:11:41,310 --> 00:11:52,380 -Scott Tolinski: I learned anything, like the first thing I do awesome blank. I mean, I'm doing a lot of Dino right now. So I was doing awesome Dino. And then you get all the awesome stuff right there. It's almost like it's in the name. All right. - -19 -00:11:52,380 --> 00:12:04,650 -Wes Bos: I think that's it. Scott and I are gonna try it. And maybe we will. I don't know maybe six months from now. We'll do a follow up show to see how we liked it when we didn't like it and if it made any of our our workflow and lives easier. Yeah. - -20 -00:12:04,889 --> 00:12:08,670 -Scott Tolinski: I am very excited to do this. And I'm on board. I'm 100% on board. - -21 -00:12:09,990 --> 00:12:14,700 -Wes Bos: Beautiful. All right. Well, thanks so much for tuning in and we will catch you on Wednesday. Please - -22 -00:12:18,000 --> 00:12:27,780 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax306.srt b/transcripts/Syntax306.srt deleted file mode 100644 index c253c0cb9..000000000 --- a/transcripts/Syntax306.srt +++ /dev/null @@ -1,504 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax - -2 -00:00:02,820 --> 00:00:06,120 -Unknown: the podcast with the tastiest web development treats out there, - -3 -00:00:06,149 --> 00:00:10,530 -strap yourself in and get ready to whiskey and West boss. - -4 -00:00:10,559 --> 00:00:19,020 -Wes Bos: Welcome to syntax and happy holidays. possible to do a - -5 -00:00:19,410 --> 00:00:21,690 -Scott Tolinski: sleigh bell sound with your your mouth. - -6 -00:00:24,060 --> 00:00:34,140 -Wes Bos: Close enough. Today we have the 2020 web developer Gift Guide. or as we like to call it an entire episode of sick picks. - -7 -00:00:35,490 --> 00:00:37,470 -Scott Tolinski: Sick pick us out sick pick us up - -8 -00:00:37,500 --> 00:01:19,560 -Wes Bos: we should call it that. We're basically going through a bunch of things that make good gifts for techies. Web developers in general. Just because like we ask web developers like nice things, we like little gadgets. We like little gizmos, whether that's in fitness, or in cooking or in just in your desk in actual tech. So we're gonna go through all of that. Hopefully, there is some ideas that you can either get the web developer in your life or you can ask everyone else in your life for so we are sponsored by two awesome companies today. First one is Log Rocket and second one is Freshbooks. We'll talk about both of them partway through the episode. - -9 -00:01:19,620 --> 00:01:20,400 -Scott Tolinski: Yeah, - -10 -00:01:20,400 --> 00:01:22,620 -Wes Bos: how are you doing today? Scott, you're ready for Christmas? - -11 -00:01:22,620 --> 00:02:19,160 -Scott Tolinski: I am ready for Christmas. I'm ready for Christmas. Ready for all of the holidays? Everything? Yeah, just it's gonna be really sad this year considering where you know, we're an entirely different state than the rest of our family. And that's like really hard. Usually we we have Courtney's parents come out for Thanksgiving, and my parents come out for Christmas or vice versa, or swap it around. Or sometimes they both come out. And this year, it's going to be feeling really weird at our house with not everybody around and stuff like that. So it's depressing at the same time. But yeah, the kids love it. This is going to be you know, Brooklyn's first Christmas, where she could actually be more than just like sedentary just like hanging out watching everybody else enjoy the fun. She's actually going to get to rip open stuff and enjoy everything. I remember how special that was with Landon the first time so I'm very excited. And Landon is like full on like Christmas is the greatest thing in the entire world age. So he's just so ready. He's so ready. And it just I don't know makes it really fun. So I'm excited - -12 -00:02:19,190 --> 00:02:33,630 -Wes Bos: Christmas with kids as the basket is so fun seeing them get excited about it. And like our kids, it's we're recording this What? November 9. So Christmas is like a month and a half away at least. And they asked like every day is is tomorrow Christmas? No, - -13 -00:02:33,660 --> 00:02:42,470 -Scott Tolinski: no, not even close. sanded carries around is like little Duplo catalogs and is like oh on those one. I want this one. I want this one. - -14 -00:02:45,419 --> 00:02:58,560 -Wes Bos: Man. All right. So we've we've broken it down into bunch of different categories home and cooking games, tech, smart home desk stuff, we cannot come up with a better name for that desk stuff. Question mark. That was I wrote that. - -15 -00:02:58,590 --> 00:03:01,560 -Scott Tolinski: Yeah, I'm gonna say yeah, don't don't drag me into that conversation. - -16 -00:03:01,979 --> 00:03:18,630 -Wes Bos: We have a whole new category this year called live streaming or sick work from home setups. I think that's a very popular thing. as of lately, everyone's at home on zoom, software, little apps that are nice fitness and clothing. So should we get on into it? Start with the home and cooking? - -17 -00:03:18,750 --> 00:04:45,510 -Scott Tolinski: Yeah, let's do it. And I'm going to be starting with one of my favorite things, something that you can all tell I rely pretty heavily on because I talk about it nonstop. And that's my cold brew maker and people hear cold brew maker and they think like, oh, there's got to be some gadget or Gizmo or whatever, to do the thing. No, here's what these things are. So I have two of them, one of which is a gallon, one of which is two quarts. And if you ask me, Scott, which one do you have? I got both, I got the one gal and then I have two of the two quarts, and we have them in constant rotation here, because you got a little bit of time for brew. So these things are a basically a mason jar of a given size with the two or the one gallon want to having a little spout at the bottom of it. But it's basically a mason jar with a filter. Here's what you do you buy some cheap coffee, what we do is we buy these big bags of coffee from Costco giant unground bags of coffee, then we use just a little little tiny ceramic grinder, you grind it, don't get a hand grinder, because those things are a giant pain in the butt for how much you have to grind. you grind it, you get a kind of chunky, you put it in the filter, you put water of any type and then you leave it on the counter for 24 hours put in the fridge when you're done. And you got yourself cold brew, everybody is really surprised at how easy that is. But to be honest, it's very easy for me and I love cold brew because of the low acidity I can't drink normal coffee. So for me, this is way nice to have a one gallon thing with a spout of cold brew in our fridge at any given point. Just maybe I'll get another glass I'm kind of feeling a little foggy today. - -18 -00:04:45,540 --> 00:04:48,690 -Wes Bos: That's almost four liters for the rest of the world. That's a lot. - -19 -00:04:49,230 --> 00:04:54,060 -Scott Tolinski: Yeah, and like I said, we have one of the one gal and two of the two courts so that we can always have - -20 -00:04:54,360 --> 00:04:55,950 -Wes Bos: two leaders for the rest of the world. - -21 -00:04:56,310 --> 00:05:17,610 -Scott Tolinski: Just a fresh rotation going on at all times over here. So part of my routine is to fill it up when one of them gets low. And then the added benefit of having more than one is that the longer you leave the beans in there, the stronger it gets. So if you have one on deck, you can let it brew for like three or four days or so if you leave it in the fridge. And you got cold brew concentrate it get cooked - -22 -00:05:17,610 --> 00:05:18,510 -Wes Bos: up on it. - -23 -00:05:18,540 --> 00:05:28,740 -Scott Tolinski: Yeah, Yeah, you do. It's a little a little intense sometimes. What Courtney and I because we there's no way to really judge the batch other than time. So sometimes Courtney will be like, - -24 -00:05:28,740 --> 00:05:29,430 -Unknown: oh boy, this - -25 -00:05:29,430 --> 00:05:31,770 -Scott Tolinski: batch today. This is a serious batch. I - -26 -00:05:32,820 --> 00:05:34,020 -Unknown: got a lot done today. - -27 -00:05:34,020 --> 00:05:35,970 -Scott Tolinski: I got it done. - -28 -00:05:36,450 --> 00:06:25,680 -Wes Bos: This is my probably my most lovesick pic ever. And that is the combination of nordicware half sheet pans and pre cut parchment paper if you have someone, I feel like I've talked about this so many times on the show, so I won't spend a whole lot of time on it. But if you want to give somebody who likes cooking, the best gift ever get them really nice heavy half sheet pans or the people call them cookie trays or whatever. And they're just basically those pans that go in your oven and then get either pre cut parchment paper. So it just lays flat. You just grab one out of the out of the drawer, throw it on, or you can get these reusable silicone mats. They've come down in price quite a bit lately, which I am happy to see. And you just throw one of those on there and it makes cleanup super, super easy. So big fan of all of those tools. Yeah, - -29 -00:06:25,710 --> 00:07:59,550 -Scott Tolinski: we definitely took your advice on that pre cut parchment paper. Definitely. You live in that life live in that life. We got a good life. Yeah. Next one up is one of mine and West said before we started recording this, this was a really good one. And my people might not think about this a lot, but I love this and this is gaffers tape. If you have never used gaffers tape, it's widely used on film sets to tape down cables. It's a gaffers job do gaffer that cables and tape everything down. And since I used to work in an environment I used to work in a film studio where we did the CDs that came out with Guitar World Magazine. It was like a guitar lessons in Guitar World Magazine. I used to have to set up and tear down all day and I got so used to using every gaffers tape for everything it's become my go to. And so if you come to the to Lynskey household and you look at our entertainment center, you will find all of the cables gaffer down Go you come to my office, you will find all of the cables gaffer down, I am not a fan of having live cables just there for some of the especially with kids, right, you don't want to trip over it so it doesn't get sticky, right? It doesn't get sticky when you tear it off, at least in my experiences. And most surfaces I don't know about every surface and whatever. But it comes in a whole bunch of different colors. Like we have the brown that is the same color as the wood in our because we have like a craftsman old 19 1920s Craftsman house. So it's the same color as the wood molding and everything. So if you get a brown that's the same color, you don't even see it, especially if it's on like a ledge or something like that. So we use appropriate color gaffers tape for all sorts of stuff in the house to make sure that things are taped down and that it just hides away all of the unsightly cables. - -30 -00:07:59,940 --> 00:08:23,580 -Wes Bos: I would love a roll this and I've always looked into it and I've never found it like somewhat affordable it's kind of expensive. It's all it's like yeah, it's it's good. There's like certain things in life where you're like, why is there not like a generic cheap version of this? And it's because it's that good? I think there's there's like an Amazon version of it. I'm sure it's just as good but it's still still kind of pricey. Yeah, 10 bucks or roll? - -31 -00:08:23,730 --> 00:08:37,860 -Scott Tolinski: Yes, it is expensive for tape. But in my mind, it's one of those things that you you really you know, it's better than getting like this little hooks that Yeah, hook the cables down or whatever. I don't know in my mind this stuff is definitely worth the price. Next one we - -32 -00:08:37,980 --> 00:10:04,890 -Wes Bos: have here is a whetstone for people who have knives to sharpen them. This is probably the thing that I get asked about the most and interested about like Instagram, they're like, hey, what was the whetstone that you bought? This is just for sharpening your knives keeping them in tip top shape. And the one I use is the henckels whetstone couldn't find it online. I got to add a local like, Oh, we should also say like I we've linked a lot of Amazon links in here, but um, probably check out your local suppliers first for this type of stuff just because of COVID and a lot of stores are going under right now. So I got mine at a local restaurant supply stores, the Henkel knife block, you just want something with a double sided one, a normal grip like 1000 or something like that. And then you flip it over and you get a super high grit like a 6000 7000 something like that. And that will allow you to have a really nice, the only thing I don't like about it is it is a bit of a production. It's messy because when you use it, it's a bit of production to like bring it out into like I am sharpening my knives now, but it's worth it. I'm hoping for Christmas that somebody gives me these. They're called cardboard wheels. And they are essentially just like wheels of MDF, like like IKEA would be made out of you put it on a bench grinder and apparently they are amazing for sharpening knives like super sharp, and it's super fast. So that's why I'm going to ask for for Christmas is a set of these wheels and a bench grinder. But that's that's pretty involved to have to buy a bench grinder to sharpen your knives. - -33 -00:10:05,399 --> 00:10:11,820 -Scott Tolinski: Yeah that is a I we don't have anything like this we just have the drag through one which is nice okay yeah - -34 -00:10:11,820 --> 00:10:20,820 -Wes Bos: yeah those are pretty good like yeah look at you there and same with the home you should like a hone will get you a lot of a lot of the way there in between knife sharpens Yeah. - -35 -00:10:22,039 --> 00:10:23,700 -Scott Tolinski: Yeah, yeah, we use wheezes - -36 -00:10:23,730 --> 00:10:42,750 -Wes Bos: Yeah, you see a lot of people say like, those are garbage but they're like they're not knife sharpeners. They're just a home they if you're as you're the tip of your knife becomes bent or you cut through a chicken bone, the very fine tip of the knife will bend over and the home will sort of stand that edge back up again and it'll make it nice and sharp before in between sharpens. - -37 -00:10:42,960 --> 00:12:02,909 -Scott Tolinski: Yeah. Okay. Next one for me is this new vacuum cleaner that we got actually sick pick this in an episode This is the tiemco pure s 12 and this is a really need vacuum cleaner for tech heads who like vacuums, it is expensive. I am not going to lie, but it is going to do everything for you. And this thing has like a whole bunch of attachments. I've recently gotten into the little miniature roller so that Okay, so to describe this vacuum cleaner, it's sort of like a handheld vacuum cleaner like you see with the Dyson's two handheld vacuum cleaner. You can put a long tube and have it be your normal vacuum cleaner. You could put a crevice tool on and that would be a crevice vacuum cleaner. And there's a little hand roller so you can like I use this to tape to roll the countertops like we got crumbs and whatever on the countertops I just use the vacuum cleaner to roll up the crumbs. It's that it's like that useful for me. So I use this this thing for seriously everything is vacuum accordion, I watched hours and hours of vacuum YouTube. before purchasing this specific one you can do so yourself you'll find the same conclusions that this one is the best. There's swappable batteries, which is to me the killer feature for this thing because that's what we had about we had an older Dyson. And that was the worst part about is the battery always die and you'd be like oh, I guess I'm done cleaning for today. I gotta wait for this thing to charge. With this one I want I'm a vacuum Holic. So I'm vacuum in whatever, pop it out, pop a new battery in there ready to go. - -38 -00:12:03,480 --> 00:12:12,210 -Wes Bos: I'm glad that you're testing this one out. I'm hoping that our plugin when lasts another year or so. So we can give you can we can get the full report from you because - -39 -00:12:12,390 --> 00:12:13,169 -Scott Tolinski: so far so good. - -40 -00:12:13,860 --> 00:12:39,870 -Wes Bos: Yeah, that's awesome. Next up, I have I've said this a couple times already. So I'll say a quick is an instant read thermometer. This is a must have for anyone cooking in the kitchen. It's important to get one that is like actually instant read and not 10 second read and they have come down in price quite a lot in the last couple years. So bit one, just get an instant read thermometer. I'll link one up in the show notes. But there are tons of them out there. - -41 -00:12:40,169 --> 00:13:26,549 -Scott Tolinski: Totally. Next one for me is going to be a my favorite tea store. This is tea house. This is an Arbor, Michigan I used to pop in here It used to be across the street from my my office I used to pop in here all the time. But they have some of the serious best loose leaf teas, it's a small business, they do an insane amount of testing on all of their teas, they run it through all sorts of different tests, various places, they only get the best stuff. If you're into loose leaf tea, you cannot go wrong with tea house, I have the link in the description of this show. There's stuff for everybody in here. So if you're not into like the grassy green teas or whatever, you could get something with some more fruit, more flavors or whatever based on what you like. But there there's a ton of stuff here. It's a like I said small business, one of my favorite places to shop. And I absolutely love it. - -42 -00:13:27,059 --> 00:13:37,230 -Wes Bos: Let's move on to the second section, which is the Scott section because I don't play games. Scott always has some super fun little games. So we'll go through all the ones. - -43 -00:13:37,350 --> 00:15:44,880 -Scott Tolinski: Yeah, so these are all playable on the Nintendo Switch. Many of them are playable on other things. But I think the first one is for the programmers out there who like playing games, but might like something entertaining that has some programming vibes to it. This game of Baba is you is a logic puzzle game that is just so fantastic. Imagine you are getting sort of a live coding environment. And you can manipulate variables and functions and whatever and that changes the world you live in. Well, that's basically what Baba is you is your your little rabbit named Baba, and you're trying to get to the goal or whatever. But you push around little things. So let's say it says like door is solid, and then you can't go through the door. But if you remove that definition from the environment, the door no longer becomes solid, you can walk right through the door. So you're basically able to program quickly manipulate the environment, and it gets really really intense in some of the plot the like, I consider myself good at this kind of thing. Some of these puzzles are crazy hard. So this is a really great puzzle game that's very programming based. There's also the untitled goose game, which is just fun. You're a goose you cause havoc. There's a game I've been playing the most is Hades described it as a sick pick the other day, but this game is just absolutely fantastic. It's very Greek mythology based. And then the one for the family. The family game is the jackbox party pack and not like kids kids party like adult party. Not because it's like loot or anything but because kids probably won't be able to have a lot of fun with this jackbox party pack. There are seven of them are these games that people can play on their phones, and only one person needs to own the game. So what we do is we hook up my Nintendo Switch to the computer, we stream it over zoom. And then my entire family all over the country plays these games together, which are basically party games things like where your your writing and prompts or the one that we like the most is called vidiots, where you draw artwork, and then the artwork has specific values and everyone's bidding on it in an auction. The person with the most amount of value at the end of it wins. It's very fun, and it can cause for a lot of hilarity. So check out any of the jackbox party packs, they are absolutely a ton of fun. - -44 -00:15:44,999 --> 00:15:55,830 -Wes Bos: puti full. I wonder if I'll ever get into games as my my kids start to get older. It definitely seems fun. Whenever you're talking about them. I'm like that that will seem fun. I should try that out. - -45 -00:15:55,919 --> 00:17:15,990 -Scott Tolinski: Yeah, I played a lot of games. Like I grew up playing video games. My parents had like the Intellivision, which is you know, one of those old ones with keypads and whatever. So yeah, I grew up playing a lot of games, my my parents would always play like burgertime, and all sorts of things. You know, I grew up with it. And we used to play a lot of cards, you know, that Euchre, Michigan Euchre life. I don't know if you get up in Canada, but initially, it was a huge thing. So I kept a lot of family gaming, whether it's board games, video games, or whatever, and it's definitely carried on to my life. Well, let's talk about Log Rocket. And I'm talking about Log Rocket as a service not as a gift or anything like this Log Rocket is one of our sponsors today. And this service allows you to see errors and exceptions handled happening as they happened with a video scrubbable replay. It really changes the game in terms of how you can debug things. Because imagine debugging a issue and seeing exactly how that issue happened in the first place. Not only that you get your Redux store if you have it, or your network tab, or your console log or any of these things along with the scribble video, so you can see your errors happening. So check out Log rocket.com forward slash syntax, so get 14 days for free. It's one of the services that I absolutely love. I think it's changing the game in terms of being able to debug issues that other people are having on your site. Very cool idea. - -46 -00:17:16,649 --> 00:17:45,150 -Wes Bos: All right, let's move into tech. These are just pieces of tech that us as devs seem to love. The first one. I think this is a not a must have. But it's something that would be really nice for every developer and that is a nice pair of Bluetooth noise cancelling headphones. I personally have used the QC 35 for I don't know like four years and they are awesome and Scott you're on the Sony's right. Yeah, a little bit newer. Yeah, I'm - -47 -00:17:45,150 --> 00:18:22,950 -Scott Tolinski: on the Sony wh 1000 x m fours. And here's the first naming I like Coke. Okay, so like Apple Apple changed the game with naming their products A long time ago. How is nobody understood that when anybody asked what monitor I have from LG, I wish I could just say I have the LG power curve, but that's not a thing that doesn't exist. But like I'd see their LG if you're listening LG just called the power curve. Okay, that's a great name. No, I got I got some just long string of digits and numbers that are numbers and letters that I have to tell people I don't even know what it is so yeah, get on now. What's up with you? - -48 -00:18:24,450 --> 00:18:48,540 -Wes Bos: I also better be better I you know, I'm a a big wise fanboy. And wise, wise is the company they they had these cameras and now they're rolling out all kinds of all kinds of product crazy stuff. Lots of fans. Yeah, they just announced they're not out yet. They're on pre order. But they're they announced Bluetooth noise canceling, like half of noise cancelling headphones for 50 bucks. - -49 -00:18:48,560 --> 00:18:50,790 -Unknown: Random products just left and right. - -50 -00:18:51,050 --> 00:19:35,300 -Wes Bos: Yeah, they're coming out swinging and, like they're probably not gonna be a $300 pair of headphones. But I don't think they're gonna be six times worse. Like I bet they're gonna be pretty good. They look nice. Obviously. No one's I haven't tried them yet. So I can't say that but I'm excited to see these because bluetooth headphones are the best. Once you get them connected. That is their nightmare to get connected to your devices. We have USB C hub. This is something if anyone has one of the new MacBooks I've had the the USBC MacBook for Yeah, like three years now and like still, almost nothing that I own is USBC and there's no card reader on or anything like that. So you can find a lot of these really I'm a big fan of anchor stuff. - -51 -00:19:35,550 --> 00:19:37,020 -Scott Tolinski: Yeah, Yeah, me too. - -52 -00:19:37,340 --> 00:19:51,900 -Wes Bos: Do you see anchors coming out with this is turning into this that cool tech show. It's gotten less which I'm totally fine with. Yeah, DC anchor like launched a smart home brand called up while oofy - -53 -00:19:53,090 --> 00:19:55,980 -Scott Tolinski: did they existed for a while I have something that's goofy or do - -54 -00:19:55,980 --> 00:20:12,630 -Wes Bos: I really do I have something that doofy I am here for They got vacuums and cameras and, and all kinds of stuff. And I'm like, man, if it's any if it's as good as the bunker stuff has been for USB and battery packs and all that stuff, that's gonna be a good. - -55 -00:20:12,750 --> 00:20:16,020 -Scott Tolinski: I feel like I own something that's Goofy, or whatever it is. - -56 -00:20:17,160 --> 00:20:18,930 -Wes Bos: I feel like I do, but I mean, you fi - -57 -00:20:18,989 --> 00:20:27,510 -Scott Tolinski: I'm looking at their site, and I don't recognize anything. So I maybe I don't either way. Yes, I have seen them. I did not know they were related to anchor. That's neat. Yeah, - -58 -00:20:27,540 --> 00:21:00,990 -Wes Bos: yeah, I'm, I'm pretty excited about about that because anchor makes some good stuff Anyways, what we're talking about USBC hub. So something that you can plug in, you get extra USB ports, you get a card reader, you get an HDMI, I have one of these, I personally have a sabrent one, which I really like I bring it with me to all of my conferences, it's never flaky. So either the anchor, the sovereign ones are really good. Just having that for any depth to throw in their backpack will make sure that anything that you've stumbled upon unless it's a VGA projector, you're probably going to be covering - -59 -00:21:01,920 --> 00:22:31,140 -Scott Tolinski: a keyboard that I really like is the one that I use is the key Kron k two, I believe it's the K two. When I bought this keyboard, they had like one keyboard now they have like eight. No, I have Sorry, I have the K one. And the latest version is the version four, I initially bought the version two and I did not like it, it registered key presses before and then the version three came out and they fixed all their issues. So I got the the K one, version three. And it's awesome. So much so that I ordered the latest k three, the K three is their latest keyboard. So I actually jumped on this beforehand. And I even kick started it because I'm ready to have this. This thing is a Bluetooth, optical key switch keyboard. And it's primarily good for a while maybe not primarily, but it's really great for Mac users like the one thing that I always hated about the mechanical keyboard game is that because it's all gamers focused, it's very like low latency specific, right. So everything was non Bluetooth, because Bluetooth inherently has latency. But I like I wanted a nice mechanical keyboard for typing at my desk. And the key cron ones are great because they have Mac keys you can get with Mac or PC keys. Thank you. Thank you very much, because that is a very good feature, you can choose your types of key switches, optical, whatever. And the keys are very, super thin. So it feels way more like typing on an actual Mac keyboard and the best way, and it doesn't feel like a giant clunky keyboard and it's Bluetooth. And there's a lot of really neat led patterns on this thing. So my kids love playing with it too. - -60 -00:22:34,830 --> 00:23:58,770 -Wes Bos: Yeah, moko keyboards is something I've I've tried to get into many times over and just haven't been able to make it work. I always find myself going back to the Apple keyboard with the number pad on the side. But like the key crown one looks pretty sick. I like it a lot. Next, and this is related to the Bose QC 35. Or actually, it's related to any any headphones. There's this new company, I think their new company called wicked cushions, which is right down my alley of naming things. And they make like aftermarket ear cushions for your headphones. Because like the ear cushions on your headphones are consumable, like a year and a half in if you wear these things for eight hours a day, they start to fall apart and they rip and whatnot and yet to get new ear cushions and they're not that expensive. So it's kind of something you have to expect when you get these headphones. And there's this new company called wicked cushions that sounds like oh, like stylized ones. So I ordered the black cammo ones for my qc 35 they're not here yet, but from seeing the reviews and I've bought aftermarket cushions before and they are totally fine. aftermarket cushions for everything and they have them for all all headphones if you got beats or the Sony ones or whatever. But there's so many cool colors like the one with big palm tree leaves over them. - -61 -00:23:59,130 --> 00:24:12,480 -Scott Tolinski: Unfortunately American to have it for my Ultra zones, which are German company these. I had to like really, I actually got these cushions off of eBay. They were like impossible to find anywhere. And I found them on eBay of all places. Really. - -62 -00:24:12,480 --> 00:24:16,500 -Wes Bos: Yeah. And they're they're not just like generic circle ones. - -63 -00:24:16,590 --> 00:24:34,110 -Scott Tolinski: They're not generic circle ones here. They're the they're the exact same ones that you could get from the ultrasound company themselves but they're like a German company and they like didn't sell to ship their their ones here and none of their stores carry them. It was and also these headphones are like 20 years old at this point. So yeah. - -64 -00:24:35,190 --> 00:24:37,080 -Wes Bos: Wicked cushions, - -65 -00:24:37,469 --> 00:24:39,120 -Scott Tolinski: cushions that's very funny. Yeah, - -66 -00:24:39,570 --> 00:25:24,090 -Wes Bos: there's a replacement top band too. That's never gone out on mine like the band that goes on your head. It's good to keep an eye on what else we have here braided USB cables. This is always something I'm always going through cables. I don't know if I'm hard on my cables or what but I bought all kinds of cheap and expensive and apple and whatever. USB cables Actually, it's not USB cables. It's lightning cables that always break on me. I've never had a micro USB or USBC cable go on me. But a braided one is definitely nicer in terms of durability as well as it just I just like like the feel of it looks better aesthetic. Yeah. Good aesthetic on a braided cable. Yeah. Cool. So - -67 -00:25:24,090 --> 00:26:06,210 -Scott Tolinski: let's get into the Smart Home section. Now, wise cams. We've talked about wise cams, a whole bunch on this show. And one of my new favorite wise cam products is the outdoor camera. The outdoor camera is a little bit costlier. But it's all battery powered. The way you had to do it before was find some way to shelter power to a camera or have it living inside pointing outside kind of thing. These outdoor cameras. They're heavy duty for outside, but they also have a crazy good battery life. Yeah, the picture is amazing. We have the just this straight up outdoor one. And it has been nothing but awesome. Since I got it. I've only had to charge it once. It's been a long time. And I absolutely love it. This is one of my favorite products from wise and they've really come out with a bunch of great stuff. - -68 -00:26:06,300 --> 00:26:11,100 -Wes Bos: Yeah, I got the outdoor cam as well, full, full disclosure, they sent it to me for free. - -69 -00:26:11,730 --> 00:26:14,100 -Scott Tolinski: So they did not send it to me for free. - -70 -00:26:15,780 --> 00:28:21,750 -Wes Bos: We'll get you one side. So I had used the regular cams outside in an enclosure and they work great except the killer feature on the out the new wise outdoor cam is that the the motion detection, it actually has a sensor on the camera. The motion detection on most cameras, including the wise v twos, is def based, meaning that they'll take a photo and then they'll take another photo and they'll diff them and say oh, there was thing. So like, if like a mosquito flies really close to the camera, it's like oh, there was motion. Whereas with that PR motion detection, this thing works awesome because it actually has to detect somebody there. And that paired with the AI of is there actually a person there and it looks like they're they're working on detecting animals and packages as well using the AI. Ai which is really cool. And the battery is awesome on it. So I've had it at our cottage for two and a half months. Yeah, so probably about almost 80 days it's been plugged in or not plugged in. And we're at 55% battery life right now. Yeah, it'll go down quicker. If you're walking in front of it every single day. Like sometimes we don't get anything but if like a deer or something walks in front of it, it will trigger which is kind of cool. So big fan of the y's outdoor cam, they also just released the y's Cam v3. Yeah, I saw that. But I didn't know what's different about it. It's got a better low light sensor. So if you are running it in like a dark, somewhere that is dark, it will give you a better quality. I've seen a bunch of people on the forums already have posted, like overnight time lapse photos of it's snowing, which is so cool. And also it's water resistant. So it's ip 65 which I think the iPhone is as well. So they This is one that you can just put it outside without a without a thing. It's not yourself to plug it in. And you can't just put it anywhere then like the actual outdoor camp but like for 20 bucks an outdoor camera. Yeah, really good. Big fan. Yeah, well, yeah, they - -71 -00:28:21,750 --> 00:29:42,990 -Scott Tolinski: do a lot of great stuff. I have a one that's kind of expensive for what it is. And this one might shock some people when the price This is the Lutron dimmer. And this dimmer is for people who use the hue bulbs No, I really liked my hue bulbs, they are very costly, and whatever at the end of the day, but they are really cool. I have like my one in my office set up to do like change the temperature color all over the course of time like all of the lights in our houses get a little bit like more red tint as the day goes on, just to give you a little bit better sleepy times. And I really like these switches because it turns any switch into a dimmer as long as you have hue bulbs because it basically screws on to your current switch. And it gives you the ability to twist it or press it. And you might be looking at the price. It's 40 bucks, you might say Holy cow, a $40 switch and a neat we don't have one of these in every switch in our house I should say like this is for specific things like in our bedroom, we have a switch and we put one of these on there. And this switch now controls like five or six hue bulbs all at once. Oh, connected via different things. Some of them are just in the bedside lamps and stuff are being connected by this and you can you can do a lot of really neat stuff with this. They're expensive. I found at least a couple of these have been very worth it for us. It also prevents Courtney from turning off the switch making the bulb not work anymore because the hue bulbs have some that issue. - -72 -00:29:44,550 --> 00:31:14,070 -Wes Bos: That's awesome. I love the Levitan dimmer switches. At the time they were the only Wi Fi based switches that could do three way if you have a switch on one and then you have a switch somewhere else. Like in our house, we have two switches for most of our lights. And if you want to put a dimmer on them, that's annoying because if you dim one and then you turn it off and on on the other one, if you want to undo it, you have to walk over to the other one. So they did some kind of sneaky stuff behind the scenes where they use the neutral wire, I think, or they use one of the wires as a data wire instead of what it's meant for. And then the you can dim them from either switch, as well as dim it with your voice or you say, okay, gargle, lights, 20% and then boom, bring them down. And they are awesome. The only thing I didn't like about them is that if you want to use iOS, it's an entirely different switch. And I accidentally bought the iOS switch, installed it and then realized my mistake and I had to like get the run downstairs flip the breaker, yell up to my wife is the right one. So that's annoying. I've heard the What is it? The Lutron casita casetta dimmer. Oh, yeah, if you don't if you don't have a neutral wire, which a lot of old houses we don't you know, we don't then that one does some sneaky stuff behind the scenes in order to make it work, which is kind of cool. Yeah. Yeah, I - -73 -00:31:14,070 --> 00:31:26,580 -Scott Tolinski: almost got those. They were they were costly to I don't I think we went in the Hubei direction. And once we were in the new direction, it's like, well, there's a lot of like accessories here that are huge, specific. So yeah, the caseta ones are supposed to be pretty cool. - -74 -00:31:26,670 --> 00:31:53,340 -Wes Bos: The last thing is the Google Home. What's it called Google Home hub desktop. They changed the name. It's called the nest hub. We love ours we have to and favorite part about it is the photos. You see Yeah, photos. Kids love it. They just sit in front of it for hours and swipe through the photos. It's just a photo frame. Yeah. So yeah, it's it's and obviously they controls our lights and were able to pause our TV with it and like it's it does everything. - -75 -00:31:53,460 --> 00:32:00,840 -Scott Tolinski: Yeah, Courtney watches TV on it sometimes because we have we have one on our nightstand so she could just hang on we don't have a TV in our bedroom. So you do watch TV. - -76 -00:32:00,900 --> 00:32:07,110 -Wes Bos: Oh, does it so when you go to sleep it gets dim. Is that dim enough to sleep with it? Or do you want me Yeah, it - -77 -00:32:07,110 --> 00:32:33,690 -Scott Tolinski: goes black essentially, with just the time on it. Sometimes it can be a little bit like if I wanted to adjust the thermostat in the middle of the night. It can be a little bit of like ah when you when oh yeah the dark mode for it. Yes it is. It is definitively good although our our stupid baby monitor is just extremely bright all the time. With like it has all these like little like notification LEDs on it that are just constantly bright. Oh, that - -78 -00:32:33,690 --> 00:32:34,650 -Unknown: tells me not I really - -79 -00:32:34,650 --> 00:32:38,700 -Scott Tolinski: have no idea what a darkroom looks like anymore. And it drives me nuts. - -80 -00:32:39,090 --> 00:33:21,480 -Wes Bos: Oh, man, I have to have a totally dark love. Like I would probably have like the blackout shades. And then but still like gets through the sides. Like they they replaced all of the street lights with LED streetlights. And when they did that, it's like boom, like indoor. So we had to put like blackout curtains in front of that. And then I went around with actually this is really good. This is a sick book right here. It's just get somebody a roll of multicolored electrical tape. So you get white, red, black, blue. And then whenever you have to block off an LED light on some silly electronics. You can do that with this electrical tape that hopefully matches and doesn't look too awful. Yeah. All right. - -81 -00:33:21,990 --> 00:33:43,080 -Scott Tolinski: Cool. So let's get into the next section which is going to be desk stuff desk is off. This is a list this list is naming here, the desk stuff. And one of my favorite things that I have for my desk is I do a lot of standing on my standing desk. So I have a fatigue map. They're really cheap, like 1620 bucks or so and that's a nice little comfortable mat and I stand on it and it really makes standing at my desk quite a bit better. - -82 -00:33:43,770 --> 00:33:49,860 -Wes Bos: Oh, that looks cool. I want one of these in front of where I prepped food. - -83 -00:33:50,340 --> 00:33:52,470 -Scott Tolinski: This is Yeah, a lot of people would use it for that. Yeah. - -84 -00:33:52,470 --> 00:35:03,060 -Wes Bos: Yeah. Every now and then I see them at Costco and like this would be nice to have. Yeah, I haven't never pulled the trigger on it but it looks really nice high density foam. I'm gonna sick pick rollerblade gang chair wheels. This is something that literally hundreds of people on Twitter got after I showed them yeah, it's just basically your desk chair you pull the wheels off. And then somebody figured out you can put rollerblade wheels and it comes with all the the attachment so you just shove it in and then you have these really slick smooth rolling wheels on your office chair. It's like the benefits of it is that it is smooth rolling. And then also it saves your floor you don't have to I've even seen a lot of people say they got rid of that plastic mat you have to put on top of carpet. Because they just go straight on carpet with these which is kind of interesting. I've never tried them on carpet. We've got vinyl where in both of our spots, but huge fan. These are like they're cheap, like 30 bucks. And major major upgrade to your office chair. Just if somebody if you get in them for somebody who has an Ikea chair Get the 10 millimeter ones otherwise get them 11 millimeter. - -85 -00:35:03,570 --> 00:35:15,090 -Scott Tolinski: Yeah, I have them and I have a revocable rug. So if you have a rug in your office, you can definitely roll over them. It's been very nice to be able to roll over it and not have to worry about that. - -86 -00:35:15,360 --> 00:36:02,160 -Wes Bos: What else we have here Logitech MX three mouse, this is one, I have the MX two, mouse, but the MX three is the latest version of it. And it is an awesome mouse. It's got all kinds of little buttons on it. I used the apple mouse for probably 10 years. And when my last one broke, I thought I'll just try a new one. And I'm so glad I I put three of the buttons to volume up volume down and play pause. Like what what a benefit of that, like I never a lot of people do a lot more complicated stuff with it. But I just use mine for for doing audio and playing pause. And I can't imagine not having that anymore. Because if you need to pause your music when you have your hand on the mouse instead of on your keyboard. It's very, very easy. Yeah, - -87 -00:36:02,160 --> 00:36:09,900 -Scott Tolinski: I don't use the mouse. I use the the Magic Trackpad. I like trackpads. I don't know why. Oh, yeah, my wrists and hands don't like it. But my usage does. - -88 -00:36:10,170 --> 00:36:42,060 -Wes Bos: Yeah, I should try that. Again. I haven't tried a trackpad in probably five years. Maybe I'll get get into that again. What else we have here wireless charging pad. These are really cheap. It's a stocking stuffer at 10 bucks or so. And most phones built in the last what would you say two years. Three years. If your phone is less than two years old, you probably have a wireless charging coil in the back. And just having one of these little pads you can lay your phone on and get a little bit extra charge into it is pretty cool. Yeah. - -89 -00:36:42,420 --> 00:38:04,080 -Scott Tolinski: Cool. So let's get into our live streaming and work from home setup stuff. So this is going to be large Lee around audio visual stuff for your computer and your setup here. Whether you are zoom in or podcasting or YouTubing or twitching, whatever any of those things. First and foremost, I wanted to have the Elgato stream deck. This is something I'm very bullish on I like this a lot. It's basically a it's a square with some buttons. And the neat thing is you can reassign those buttons to just about anything when you're streaming. And those of you who have used OBS know that it is a giant pain to like, do anything in OBS in my mind. So this thing kind of eases some of that pain because you can assign macros and all sorts of things to your OBS, whether that's changing the source or initializing some sort of sequence or whatever it is really, really neat. And actually had another competitor to this on the list before called the loop deck loop spelled l u l o u p deck. Unfortunately, I read a bunch of reviews about it saying the software's terrible. And the really depressing part about the software being terrible is that when you might actually ask them do some of these videos like one of the reviewers was like I installed the software and there's this like Developer Tools thing open by default on it. I don't even know what this is. And oh my god, they ship software and head electron with Chrome Developer Tools. Bundled so it's always been in there. Oh - -90 -00:38:04,080 --> 00:38:06,840 -Wes Bos: my gosh, love Boolean got in. - -91 -00:38:06,960 --> 00:38:21,000 -Scott Tolinski: But also. So that tells you it's web based. But all of the reviews for it said that the interface was slow laggy terrible, awful everything. So unfortunately, I'm not going to recommend that one just yet because it seems like that their their dev team has a lot more - -92 -00:38:21,650 --> 00:38:29,820 -Wes Bos: box this loop deck to end though we should say that the what is the the other one Elgato one is like 120 144 - -93 -00:38:30,110 --> 00:38:59,400 -Scott Tolinski: for the 15 key there's a 20 or 32 key that's 240 and a six key one that is cheaper. And again this The thing is like little LEDs and the keys. So the keys can even be gifts or, or neat things like that. It's very fun. I like it a lot. And Elgato makes some really neat stuff you're gonna have on here the cam link, which is the thing that we use to connect our cameras to the computer via HDMI. And I actually been using the cam cam link for a long time you have the 4k one. - -94 -00:38:59,820 --> 00:40:25,380 -Wes Bos: Yeah, yeah, I bought it right before the pandemic. Yeah, which is a smart man. I got it and and then the pandemic hit and no, you couldn't find them anywhere. And I had a friend that really needed it for like a real work. So I gave it to them. I just got it back recently, but I did do a brief little stint with the knockoff one. So the 4k is 60 frames per second, which is awesome if you're gaming or whatever. But if you just try to take an old or an SLR mirrorless camera and use it as a webcam. They sound like a $20 one that's just called HDMI video capture. And I was like, I'm gonna try this. I'm gonna see if it's any good. And I got it and it actually worked really good. their views are really good. And then it broke. Um, it got really hot and it stopped working. So obviously I just returned it to Amazon. I got a new one. But from what people are saying on Twitter is I probably just got a dud because there's a lot of people on Twitter Like, yeah, I've been using mine for whatever I stream for six hours at a time, and it has never overheated on me. So that is a good option because the cam link is super expensive. But if you're trying to get somebody like a $20 gift, that would be a good one. Just also get them the HDMI cables as well. I don't think many people have a micro or mini HDMI grow. Yeah, whatever the camera has, - -95 -00:40:25,400 --> 00:40:27,480 -Scott Tolinski: you'd have to have knowledge about their camera. - -96 -00:40:27,690 --> 00:40:28,770 -Wes Bos: That's that's a good point. - -97 -00:40:29,340 --> 00:41:06,270 -Scott Tolinski: Oh, I should say I also tried out the Blackmagic version of the same thing. Blackmagic, the company that does DaVinci Resolve has their own of these. And it was supposed to be really nice, but there was no feedback on it like not even an LED to tell you if it's working correctly, and I could never get it working correctly. So the cam link at least has an LED to show show you in it like should be working. And I've been using mine to even stream my Nintendo Switch. So when I said I was streaming Nintendo Switch, you can plug in any HDMI that has a clean output into this thing, whether it is a video game council or something like that. And suddenly it becomes your webcam. So it is not just for camera. It's for all sorts of cool stuff. - -98 -00:41:06,600 --> 00:42:32,400 -Wes Bos: Next one we have here and this is this is from somebody on Twitter recommended this. So I don't have this myself. But I thought this was big brain over here. He linked to a adjustable height work bench from Home Depot as a really heavy duty slick, adjustable standing desk. So what it is, is it's a big butcher block table on a metal powder coated black frame that has a manual crank on it to move the desk up and down and it's 229 bucks for a 62 inch. That's a really wide desk, you can also get a 46 inch one for 179. And I was like man that I cuz I have a butcher block from my desk. And I was like, I love it. It's it's like it's not as deep as soon as as other desks and it's super solid. It's super heavy. And I'm thinking like that would be really cool. The only weird thing is that it's it's manual crank so you have to manually crank it yourself. But I immediately started thinking well can I put my drill on that could you put a little motor on it that you you you have a button so like that's, that's way cheaper than a lot of these standing desks that I've seen before. And this has a real wood butcher block top. So big brain. Shout out to Jonathan speak who recommended that one people on Twitter are loving it. So check that one out. - -99 -00:42:32,550 --> 00:44:13,860 -Scott Tolinski: Nice. Cool. So next one for me is the I never say this company's name newer newer, newer n e w er This is a dimmable by color led studio key light it is a very very very bright professional studio lamp. It has 480 LED beads and it is a it's the whole thing is very thin, it's very nice that it's only 62 bucks comparatively to some other LED lights or anything like that this is to get yourself a nice light because as Wes and I were talking about before we recorded this episode lighting is really the big big difference in terms of having a okay camera look good and having a good camera look amazing, is really just the lighting setup and I use this thing it does not come with the stance so you're going to have to have a standard luckily I had just a generic stand sitting around but you can get a cheap stand for really cheap. And again this thing has a diffuser baked in what I like about this one specifically compared to I have a couple other studio LED lamps as well but the reason why I like this one so much is because every other line of LEDs is like orange tinted orange tinted so that you can have individual brightness knobs for the white light or the orangish light and that way you can tune the kind of look that you're getting out of it. If you have too much like super high white light on your face, it's going to give you a more of a pale look so you can add a little bit orange orangey light in here so my other ones my main key because I'm using it as a field my main key is a straight up white LED my back lights and main white LED but my fill light is actually straight up sepia or or the orange tint so that way it kind of fills in some of that extra light giving me a little bit more more color. - -100 -00:44:14,519 --> 00:44:47,520 -Wes Bos: Yeah, my wife just got a set of soft boxes from newer and I just like put them in because I'm I'm trying to like up my my game as well which is why I've got the cam link and whatnot. I'm sort of in the middle of it maybe once you've got to figure it out we can do a little rundown of our setups But yeah, I couldn't believe like I was like this camera is garbage. And then I just put this like beautiful light in front of me and hit like media and Scott also he they he turned off his lights. And I was like God looks good. And then he turned on his lights and it's like, Oh, that looks so good. Like I get it. - -101 -00:44:47,580 --> 00:44:48,900 -Scott Tolinski: Yep, it's a big deal. - -102 -00:44:49,140 --> 00:45:27,840 -Wes Bos: Another fun thing I got as I'm trying to do some colored backlight in my setup and I got these LED RGB floodlights, which are also Water resistant. So you can you could, you could throw them really anywhere like that you can for Christmas or whatever, it would be kind of cool as well. Mine came with a, just a little remote to change the colors. But now I'm seeing that there's some available that have an iPhone app, which I'm kind of, maybe I'm gonna get those. Instead, I'll return the ones that have because you can set the color to any color that you want. Except for Brown. That's a very interesting, yes, technology connections video. So - -103 -00:45:27,840 --> 00:45:28,410 -Unknown: watch. - -104 -00:45:28,440 --> 00:45:42,000 -Wes Bos: Yes, because you can't make Brown. But any other color you are allowed to have. And they just throw a really nice super bright color on it. And I was really impressed. My kids love them too. So I'll link those up as well. - -105 -00:45:42,000 --> 00:46:53,640 -Scott Tolinski: Cool. Next one for me is going to be this vivo pneumatic mic arm. I have tried every mic arm under the neath the sun, I had a really fancy canon one that did just was garbage. I mean, they're all they're all these external spring breaks. So when they look ugly sitting on your desk with all these springs sticking out to they never put the mic where you put the mic, I put the mic up here and then a droop down because the mics too heavy for it, you tighten it up, it doesn't care over time, the thing is just inevitably going to break down. So I was really on a run to find a good mic arm and all of the good ones like the broadcast ones basically require you to drill through your desk, or they're very expensive, or there was a lot of downfalls with all of them. And so I found this one after a lot of trying and looking. It's vivo, same company that makes my my monitor arm and it's pneumatic. And it is only 79 bucks. So compared to other professional ones, this one is a steal. Because if $70 sounds like a expensive mic arm for you, yes, it is. But compared to the other good ones, this one's a definite steal. And if I put my mic over here stays there every single time and I don't have to worry about it. It's - -106 -00:46:53,640 --> 00:46:58,530 -Wes Bos: like the light at the dentist. That's how I always tell people about automatic things are like when - -107 -00:46:58,530 --> 00:47:07,890 -Scott Tolinski: the dentist puts the light where he wants it to go. It stays there. It's easy to move. But then once you once you stop moving it it doesn't move. Yeah, it's just very good. So - -108 -00:47:10,650 --> 00:49:06,300 -Wes Bos: that's good. So that's it for our work from home setups and whatnot. What do I do another show on on stuff once once we've all our I've got it settled down, you obviously have yours dialed in. Let's take a quick break to talk about our sponsor, and that is Freshbooks Freshbooks is cloud accounting. And I'm going to tell you not about the features of Freshbooks. But about the support of Freshbooks. So I had it issue was Freshbooks on Thursday, last Thursday, and I logged into Freshbooks, I needed to download a tax summary for my accountant and get it off to him. So I clicked on it and the pages jumped to the top, I immediately was like JavaScript is broken because they clicked on the link and or clicked on the button. And it didn't move me to that part of the application. It just jumped to the top of the page. So I said okay, this is this is annoying what I'm gonna do about this, so I was like, I'm gonna call him. So I call them somebody picked up first ring, said, Hey, Freshbooks What's up? They didn't say what's up. They were more professional than that. And I explained the issue. I said, it looks like JavaScript broken. Trust me, I'm a developer. He could tell that the the guy on the phone was also super technical. So he understood what was going on. said all right. So he first he generated the report for me and then he also logged logged off that issue and in contacted the right people for it and it was fixed within a day. I had it working again when I tried it again the next morning. So support as Freshbooks is fantastic. Let alone they answer the phone, you know, I didn't have to like submit some sort of like contact form that they immediately email and say we got your support request and then you never hear anything back. The sport is awesome. So check it out. Freshbooks comm forward slash syntax, make sure you use syntax in the How did you hear about a section and that is going to get you a 30 day unrestricted free trial. - -109 -00:49:06,540 --> 00:51:01,590 -Scott Tolinski: Cool. So let's get into the last two sections really quickly breeze through some of these because these things are not sort of tech related fitness stuff. I got a concept to rower pm five is the model. Oh gosh, model d o the D concept two, model D pm five. I love this thing. I use it all the time. Now I ordered it from somebody locally on Craigslist. They are kind of difficult to find right now. So pop up in Craigslist, set up some alerts and try to find one for yourself. The reason why I really liked getting a rower is because it's going to be a good way to do cardio at home in the middle of a pandemic right because cardio at winter is really really tough to do. Especially unless you're doing like jumping up and down in your living room or something which is fine. But the rower in general is going to build muscle as as well as do cardio stuff. So very good. Another thing I want to shout out is the power blocks which are going to be difficult to find and hopefully that doesn't stay the same but who knows. The power blocks are adjustable dumbbells that go anywhere from five pounds to 70 pounds or even higher if you have the extension. We use these things every single day. They're just incredible. I've had them for now, like eight years or something, and they're just very good. Another one, this one's going to be a cheap one. Because a lot of these have been very costly. This is the band's. So I have some $19 bands here, elastic bands that you can use for different types of poundage of pressure all the way from 10 to 50 pounds. And I do this is a piece of gym equipment that costs 20 bucks, and I have only ever bought one set of these and it has been fantastic forever and ever and ever. For me, we just attach them to something in our gym, we have like a thing called sweetest stall bars that I built. But you could attach these to the doorframe, you could attach these to literally anything. And it allows you to get weighted resistance, do all sorts of stretching exercises or strength building exercises, like the possibilities are seriously endless for what you can do with good bands. So check these out $20 and it will really really make a big difference. - -110 -00:51:02,130 --> 00:51:41,250 -Wes Bos: I will pick one fitness thing. And that is just a couple of kettlebells. Having them in your office, if you're frustrated trying to work through something being able to lift and swing them a couple times. It really helps. I bought mine, I bought a couple new ones like a couple months ago. And they're really really hard to find I found like the last few at a Canadian Tire here. But just looking online, it looks like stock for these are starting to be replenished, which is awesome. So that's another cheap little home office fitness thing that you could just have there and get through any hard times that you're having with with frustration. I'm amazed at how helpful they can be when you just swing them a couple times. - -111 -00:51:42,420 --> 00:52:16,530 -Scott Tolinski: Awesome. Lastly, let's get into some clothing here really quick. I'm going to shout out developer.io that's d VLP r.io. Travis is a friend here he lives in Colorado. He's a really great guy. And he's been making these t shirts for a long time often imitated I must add. I've seen his designs that he created all over the internet from various people ripping them off. So if you want to support Travis and his awesome, awesome stuff, he's got some great t shirts and hats and stickers and stuff. Check out developer at DV lpr.io. And yeah, check it out a lot of cool stuff. - -112 -00:52:16,680 --> 00:53:20,070 -Wes Bos: I got a couple little pieces of clothes that I really enjoy. naked and famous makes my favorite jeans. They're Canadian company that makes Japanese salvage and the cut I really like is called the super guy. They have a whole bunch of different cuts and you might want to find a place that sells see so you can find your cut, but the super guy is kind of like not super skinny painted on but like tight around the leg. And they are fantastic quality jeans. The same company also makes these things called unbranded. I think I've talked about this before, so the unbranded brand, and they are the exact same cuts. They're just made in China instead of made in Canada, with Japanese denim. And they also they're much cheaper, they're still not like super cheap, but they're much cheaper. So there's kind of two options there. I like buying them, they could have famous ones because they, they always do collabs or they do fun stuff, like they'll they'll do like a red red inside or they'll use a different color thread on the back, things like that. It's kind of fine. I really like that. Neat. - -113 -00:53:20,100 --> 00:54:10,440 -Scott Tolinski: I have a link here from a store that I really like for men's clothing. So I'm sorry, this is very gendered here. But men's clothing, you know, my wife has a hard time finding stuff for me because I have very specific tastes in my clothes. But this is a place I know that she can go to and literally Close your eyes and pick and probably I'm going to love it. So this is Huck berry.com if you've never heard of this, they have a lot of stuff that's not just clothing, a lot of like gifts. So if you're looking for gifts for that dude in your life, this is a great place because it's all expensive stuff. I don't want to I don't want to get your hopes up that it's gonna be cheap stuff, but it's all very good stuff. A lot of like really, really nice crafted things brands like tobacco and Flint and Flint and Tinder I name is the name of the brand either way, a lot of really neat stuff for dudes. I got - -114 -00:54:10,440 --> 00:54:41,100 -Wes Bos: a couple more little things as well here. everlane makes a really awesome crewneck which is a it's called the uniform crewneck if you Google it, it's a really nice good quality sweatshirt. Levi's has my favorite denim button up called the Barstow Western and fall Raven makes a probably some of the best flannels that I've ever worn. I specifically have one called the Skog but all of the fall Raven ones are are really really nice. - -115 -00:54:41,220 --> 00:55:21,000 -Scott Tolinski: I love going in to the fall Raven store. There's one in Boulder and just being like this, this stuff is very Yes. The last one I wanted to have would be these Lulu lemon joggers. I have the men's jogger and my wife has the women's version of the same thing. And these things are not like they're they're not they're not yoga pants or whatever these things look like joggers, they they're kind of a, I don't know what the material is. It's very stretchy. And so she bought me a couple pairs of these pants and it's literally all I wear anymore because they don't look cheap. They look very nice. They hold up, but they're also extremely stretchy and very comfortable. They're sort of like fancy sweat pants, but they're not. - -116 -00:55:21,030 --> 00:55:24,030 -Wes Bos: Yeah. socially acceptable sweatpants. - -117 -00:55:24,030 --> 00:55:45,720 -Scott Tolinski: They're very nice. So like they are they're nice enough to wear out and not feel like oh, I'm slogging around in sweatpants. So I seriously have a couple pairs of these and I wear them all the time. I was a little skeptical about dude buying Lulu lemon stuff. But after I got these Courtney was like, I like these pants so much on you that I need to buy some for myself and the women's version is just as nice so very cool pants. - -118 -00:55:46,080 --> 00:55:46,710 -Unknown: All right. - -119 -00:55:47,160 --> 00:55:48,420 -Wes Bos: Do you have any sick pics for me? - -120 -00:55:50,400 --> 00:55:52,920 -Scott Tolinski: That's a good one. This one says the sick pic. So - -121 -00:55:53,010 --> 00:56:15,840 -Wes Bos: yeah, that's it. So hopefully that is helpful. I hear from people all the time. Like obviously it's just an entire episode of us telling talking about cool stuff. But people always tell me how much they like the sick pics and and they get to find out about neat stuff here and there that we're into. So hopefully that is helpful for you or for whoever it is that you're looking to buy some Christmas gifts for. - -122 -00:56:16,170 --> 00:56:29,190 -Scott Tolinski: Yeah, awesome. Well, I'm going to shamelessly plug if you would like a nice tutorial series. Well head on over to level up tutorials.com forward slash pro and sign up for a year and that would be a great gift too. So level up tutorials.com forward slash Pro. - -123 -00:56:29,400 --> 00:57:07,740 -Wes Bos: Yeah, actually, that's one thing I get every single year is people say how do I gift your courses? I don't have a a process for that. But generally the way it works is just buy it with your own email address and then change the email on the day we'll change the email and re send it to that person so you can just shoot me an email Wes at West boss calm or Hey at West boss calm is probably better. And we will switch that over and we can do it at or near Christmas day so you don't ruin the surprise as well. Word. Alright, Wes bos.com forward slash courses I forgot about the link and use coupon code syntax for 10 bucks off - -124 -00:57:07,950 --> 00:57:09,480 -Unknown: sick. Alright, thanks - -125 -00:57:09,480 --> 00:57:14,040 -Wes Bos: so much for tuning in. We'll catch you on Monday, B's face. - -126 -00:57:15,930 --> 00:57:25,680 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax307.srt b/transcripts/Syntax307.srt deleted file mode 100644 index e2581c1ba..000000000 --- a/transcripts/Syntax307.srt +++ /dev/null @@ -1,192 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday Open wide. Get ready to stuff your face with JavaScript CSS loadmodule BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is when Sarah Kuta bombs and Scott L. Totally ski. - -2 -00:00:25,950 --> 00:00:49,590 -Scott Tolinski: Oh, welcome to syntax in this hasty treat, we are going to be talking all about react hooks, and why you might want to use them first class components. What are the benefits over class components? And really what is the incentive to switch to function components vers class components? My name is Scott Tolinksi. I'm a developer from Denver, Colorado and with me, as always is the West boss. Hey, I'm - -3 -00:00:49,590 --> 00:01:02,940 -Wes Bos: excited about this one, we got a actually a potluck question that says what is the incentive to switch to react hooks versus classes? So we thought we'd turn that into a little episode and explain why we like them and why they were even made? - -4 -00:01:02,970 --> 00:04:22,560 -Scott Tolinski: Yes, yes. And a side note, a meta note, this is gonna be funny for anybody who's maybe seen this tweet, but I'm broadcasting live from Hamilton, Ontario, and I believe West is in Denver, Colorado, because what we did is we took photos of our background or screenshots of our backgrounds, and then swap them, and we're using them as zoom backgrounds. So I have this difficult background it was the funniest thing to me about West using my background is that he has like a photo of my son behind him. I'm like cracking up about this. So this episode is sponsored by sentry@sentry.io is one of the coolest services that Wes and I both used for a long time. This service allows you to capture all of your errors and exceptions and see them in a nice table. And you can use the coupon code tasty treat all lowercase all one word to get two months for free. This is such an amazing service that gets better all the time. You know, it's kind of interesting, I just logged into Sentry just now. And I feel like every time I pop up in Sentry, there's little subtle UI tweaks or improvements here and there. You know, when you think of products that come out and then stagnant. I never think of century because it's always adding neat stuff. For instance, one of the cool things I just noticing just now besides the fact that they got new icons for react, yeah, it looks like the icon for react is different now. It started adding unhandled tags to errors that I'm having on the site that have been unhandled. And that's kind of interesting to me, because here's a handled error, which is invalid credentials, which is one of those things, I gotta I gotta change now, because my, my new account system throws whenever somebody tries to log in with the wrong password, like I don't, I don't want that I want the UI to take care of it correctly. Either way, that's a handle exception. However, here's another one. Video j s is not defined, which is probably a race condition due to how we are loading video j s. And it's not really hitting a lot of people, but it is in fact unhandled. So that's something we're going to take a look at and figure out exactly what's going on there. I think that little label they just added really, really helps. So this is sentry@sentry.io. Again, it's a service that's constantly adding new features. So check it out. coupon code, tasty treat, all lowercase, while all one word. All right, React hooks. It's funny because it feels like react hooks came out forever ago at this point to me, but I was thinking about it like the last time we maybe recorded an episode about maybe not necessarily about react hooks. But when we did our, our intro to react hooks, I was just thinking about how we talked a lot about how the future will tell a lot about how hooks will change our workflows. And now we're kind of living in that future. Because I personally, I feel very comfortable writing react hooks. And I feel maybe even differently about how I use them, when to use them or the things that I do with them. So I'm excited to talk a lot about them verse class components in 2021. And how this has sort of changed. So I think the biggest thing with for me about react hooks is that they decouple the UI from the logic, meaning that you can take your logic and your things that you're you need to do in your site, the stuff that you need to do, you can take it with you from component component to component, just like you used to take UI from component to component to component. It's almost like building blocks, or Lego blocks for functionality rather than building blocks or Lego blocks for UI. So to say, - -5 -00:04:22,950 --> 00:04:33,600 -Wes Bos: Yeah, I think that's like the biggest one for me is being able to decouple state management, side effects, things like that from the actual component itself. Can you define side effects for - -6 -00:04:33,600 --> 00:04:37,920 -Scott Tolinski: the audience real quick? That's when I think that is a mysterious word for some people. - -7 -00:04:38,100 --> 00:05:18,200 -Wes Bos: Yes, the side effect is when you're specifically in react, but it This can apply to all of JavaScript is when your component needs to reach outside of its scope of duty and do something like maybe it would update the title tag on a website, or maybe it would subscribe to a database for WebSocket maybe events like that. So whenever you need to To sort of like, reach outside and also the the effect hook in and react is also another good way to rerun any code that you need when you're maybe like you're waiting for something to change. And if you want to like watch for a variable to change, you can use the use effect hook for that. Yeah, - -8 -00:05:18,690 --> 00:06:44,820 -Scott Tolinski: yeah. And to me, the improvements that you get out of that is, is purely a just a improvement in quality of life. I think in working with these things, it makes the code a little bit easier to understand how to function to move around to share. But you also get like, hands on the code that might not otherwise be there. For instance, like think about re hooks in the shareability. There, there's a GitHub repo called re hooks, that is a bunch of already made react hooks that you can just drop into your projects, right. And that kind of stuff couldn't have it really existed besides being in just in copying and pasting, or maybe it ends up being a component or a high order wrapper component that just really, to me, it doesn't feel the same in terms of how easy it is to just throw a function in a ref on here. One of the neat things that I have noticed here is that it makes things like graph qL codegen possible. If you don't know about graph, qL cogen, you basically pass it into schema, and it cooks out all of your react hooks for you, including like type react hooks. So now instead of importing a query, and importing a use query hook and passing that query into there, what I get is a use tutorials query, which is a specifically already made react hook that is completely typed to what I need. And I can just pop that in and spit out the tutorials and the same thing with any of my mutations or whatever. But I just can't imagine any of that would have been possible without react hooks. I guess you could do the higher order components, but it doesn't feel the same way to me. - -9 -00:06:45,420 --> 00:07:57,810 -Wes Bos: Yeah, like all of this stuff could be done. Yeah, previously with the hierarchical model, like Scott said, but it was really tricky before hooks to take, if you had like, maybe three different pieces of state, and you had two different pieces of functionality, you needed to inject all of those things into a component, the way to do it was either stuff it all into one component, or use it all as high order component. And you'd have to use this like render Prop, or pass it in via props or something like that. And that got a little bit hairy when you had multiple things. So it's really nice with the hooks can because you can give you a three pieces of state, you don't necessarily have to stick it all in, in one component, you can stick it in three different hooks, and they all manage their own nice tidy, do you just sweep everything into one yes, nice little hook. And then you have two little pieces of functionality. And maybe you have other hooks for that you can pull all five things in just at the top of your function, you don't necessarily have to do this weird, just from a syntax perspective alone. That has been key for me in not having to write these really weird render prop functions because the render props are awesome when we got them. But the syntax sucks. I mean, that's just a limitation of, of react at the time. Yeah. - -10 -00:07:57,960 --> 00:10:15,690 -Scott Tolinski: And right along with that, I think about state management for me, and not just talking about US state got a lot nicer, specifically around other libraries. So there's, there's now been sort of a state renaissance in react with hooks, because a lot of things have started working a lot nicer. I think, even like context, context is one of those things that I used, but I almost kind of used for grudgingly in the past. But with hooks, you just wrap a provider, and then you have your output of the context into its own hook. So like for instance, I have a like a use user hook, which is basically just the output of a use context with the context passed in there. So now anytime I want to get my current user, I just say const user is equal to use user. Now I have the user data anytime I want it. And it's really easy. How many lines of code did a render prop take to do that? I mean, way too much, right. And now we actually have access to the user in the body of the function rather than just in the UI part of it. So that to me is a big deal. I think about that all the time, just how better my steak got. And it also opened the door to libraries like zustand, which is like a super minimal state library where you can pass data around outside of your react. And they did another one called Joe tie. Have you seen Joe tie? No. That's Joe tie Joe tie, which is a Japanese Oh, tip. Joe tie is a Japanese word that means state. In Japanese. It's by the same team behind react spring and zustand. And so zustand that you could think of it as like a an easy way to quickly create, like a use reducer that's outside of any sort of component where Joe tie is sort of trying to compete with recoil, where you think of recoil as being the state itself is like an atom. And you can have many versions of that specific atom. So you could have many versions of the state. So Joe tie is basically the, the zustand version of recoil, and I like it a little bit better, and I really liked it. Standard, those kind of libraries that just makes working with state very easy. So like to me, I'm using zustand as sort of like a Redux replacement. And I'm using I'm not using Jota yet, but I think it looks pretty neat. I don't really have necessarily a use case for but it to me state got a lot nicer. - -11 -00:10:16,020 --> 00:10:22,040 -Wes Bos: That's JOT ai. Yeah. For everyone listening and trying to Google it. I had to get Scott to send me the link. - -12 -00:10:22,110 --> 00:10:27,650 -Scott Tolinski: Yes. Yeah. Not everybody took Japanese in college like me? No, no, - -13 -00:10:27,690 --> 00:10:29,190 -Wes Bos: no, not everyone did no. - -14 -00:10:31,140 --> 00:11:34,620 -Scott Tolinski: Next step, a big reason is, besides being able to reuse functionality of code throughout your own project, and others would be the reduction in code overall. And this is something that I don't know if people think about too much. But with the use effect, specifically, and I suppose use layout effect, we used to have to with the lifecycle methods, there is this inherent duplication that could happen between the update and the mount lifecycle hooks. So you would have several lifecycle hooks, and many of the times those lifecycle hooks were like doing the exact same thing, you were having to check a lot of things, but there was a lot of code duplication that existed in those lifecycle methods. And now they can all be reproduced essentially, in one tiny little encapsulation, which would be a use effect, which is targeted to specific dependencies as in, hey, when this thing changes, rerun these things, instead of when the component changes, here, just just run a function, hey, the component changes just run a function. Now it gets to be if this thing changed, didn't do this specific action. And that has led to a big decrease in duplication of code. - -15 -00:11:34,949 --> 00:12:38,670 -Wes Bos: One kind of interesting thing that I was working on an article a week or two ago, just on moving a lot of the syntax code base over to be all hooks based. And there's actually quite a bit of state in this annex website, because there's, like episode that your reading episode that you're watching where you are playing, pausing, what the what is currently streaming all of that information. And it was funny, like I just deleted a whole bunch of both duplicate code stuff that needed to happen on Mt as well as update. But also, I had like a bunch of custom methods that were simple set status, like when someone posit set the state, and those all got deleted, because the update method that you get from use state was enough just to use that directly. And there was no in between function. Because previously with state, you had to like only update part of it. And now you can just have separate use state hooks for that specific one. So I thought it was I was like, Man, this is a really big component, and it probably reduced the code size to about half. - -16 -00:12:39,209 --> 00:13:03,990 -Scott Tolinski: Yeah, yeah, the the reduction code for me has been big. And it's not just like removing syntactical sugar, it's removing, like, legit duplication of things that you were having to do twice, both on update and mount, even where were some of the other the hooks in the past should component update and stuff like that. I mean, it just, it reduces so much complexity, and it boils it down into a if thing changed, then do this, you know, the other - -17 -00:13:03,990 --> 00:13:30,450 -Wes Bos: thing was when component did update, and you only wanted to run some code when part of state updated, then you had to like say, if you'd have a whole bunch of if statements in there, your your update one that were just like, unrelated to each other. And with effect, now you can just just pass the thing that you want to watch into the second argument of use effect, and it watches that value. And if it changes, it will rerun the code. That was a big one for me as well. - -18 -00:13:30,450 --> 00:14:32,370 -Scott Tolinski: And not to say I don't have gripes about use effect, because I think the name is not not great. But we can talk more about that. At the end, I do think for the most part, it's made my code just an insane amount easier to read. So I don't I don't know about your code base. But I only have one component in my entire level of tutorials out of like, hundreds of components that is still a class component. And it's because it was like a react YouTube video player that I just copied from a third party library. And I really don't want to refactor it because this thing is like, this thing is big and has this like I didn't write this code to begin. So it's not my style one and two, it's like I just, I just don't want to touch it. YouTube isn't a big part of our platform anymore. So it's like, well, I'm just going to let this thing be. So I've converted my entire codebase over, they say no to do that. But it really made me understand hooks a lot better. And maybe if you have a little bit of extra time, taking that time to convert a bunch of your code to hooks might make you understand the use cases a little bit better. And I think that's a perfect way to see why it's why the code looks nicer. - -19 -00:14:32,730 --> 00:15:08,820 -Wes Bos: Yeah, I've been I've been just going over mine every single time that needs to work on a component, that's when I decide to convert it over. And then anything that thing touches, maybe I'll do a few more but I still have quite a few class components in my thing just because it's not worth it to touch especially like sometimes fussing with it will break it and you don't necessarily get all the edge cases and whatnot. So for me, it's just one by one as as I need to refactor the men because like it We also say this might be clear that like classes aren't going anywhere. I just much prefer to write everything in a function. You know - -20 -00:15:08,820 --> 00:16:50,670 -Scott Tolinski: what I do too, but it's very funny. The other day, Tom, who's a tom toms, a developer for level tutorials, he was working on refactoring, some stuff that we had for our subscriptions code. And he's like, yeah, I threw all of this stuff into a class and all these class methods. And I was thinking, Oh, that's very not how I would have done it. But then I was reading how the code actually is to work with. And it's actually very nice because the Braintree API is just about as backwards as you can imagine. And so instead of doing a whole bunch of run around in the Braintree API, we now get to call like, level up of Braintree dot cancel, cancel subscription. I'm like, Oh, that's very nice. That's very explicit what it's doing. I actually kind of did classes in that way. I have mostly functional myself. So the same classes used in this sort of normal way of object oriented programming is not really my specialty. But no, I think, yeah, classes definitely aren't going away. But class as react components. Yeah, they're going somewhere. So I would get on board with the hooks train. So simplicity. And usage is a big thing for me, for instance, like even just throughout use state or whatever thing, and then update or set thing, right thing set thing That to me is so much easier than set state, then you have an object, you don't necessarily know what's in that object, but you're going to set something in that object. This to me is way more simplistic and way more explicit in the code, the code is easier to read. But also one big thing is refs right. refs have gone through so many usages from the initial way where we had them as like string refs, where you just had like a magic string that all of a sudden became a ref. Then there was the whole function thing where you had to set this dot thing is equal to, you know, ref, whatever. Oh my gosh, that is such a nice, - -21 -00:16:50,700 --> 00:16:52,470 -Wes Bos: yeah. Function ref. - -22 -00:16:52,500 --> 00:17:24,510 -Scott Tolinski: Oh, my gosh, I've already forgotten how to do it. I parse it from I pushed out of my brain because I don't want to ever think about it. Again, it was just such a tremendous amount of waste of space in my code to do such a minimal thing. But now you get use ref, and it spits you out a raft, you drop that ref onto a component, boom, you have a DOM reference, that ref current or thing current. Either way, ref make way more sense with react hooks. And I do use them quite a bit. So yeah, this is one of those ones to me that it became it went from being obnoxious and unnecessary to Oh, yeah, this this makes perfect sense. - -23 -00:17:24,590 --> 00:17:28,980 -Wes Bos: Yeah, I definitely think that they are a little harder to first learn. - -24 -00:17:29,009 --> 00:17:30,050 -Unknown: But there's the learning curve, it's - -25 -00:17:30,050 --> 00:18:19,070 -Wes Bos: it's definitely worth it. Because once you get it, it's it's much easier, which is really cool. And another kind of thing that I was like sort of celebrating the other day is I stopped using, like variable functions are like const, my thing equals arrow function, implicit return, I stop using that entirely. And that that's kind of related to hooks because you can only use a hook in a proper function. And you can export it. And the other thing about that is I, even if it's a tiny little component, I don't like using, I don't like using the implicit return for it just because of the frustration with debugging. You can't put a console log in there. But you can use this little or trick and whatnot. So I've completely I'm curious what you've you've done, I've completely moved over just using the word function and exporting it if I need to. - -26 -00:18:19,100 --> 00:18:26,130 -Scott Tolinski: Yeah, I do the same thing. I use name functions. function. Yeah, that's it. That's what I do. Yeah. - -27 -00:18:26,490 --> 00:19:02,010 -Wes Bos: That's good. Yeah, it's funny. Like we I think we had a bit of a moment there with the implicit return and you saw people do it for everything. Yeah. it to a point where I get people emailing me all the time being like, why did you not use the new way? Yes, six way that implicit, like, it's, it's what we're talking about is a variable equals parentheses, arrow, and then you implicitly return like a div or something and put everything in there. And you can't use hooks inside of those. And also, they're very hard to debug. So it's not official, like you're not bad if you're doing that, but I personally have don't use those anymore, which I really like - -28 -00:19:02,010 --> 00:19:09,690 -Scott Tolinski: doing. No, no. Anything I don't use anymore. What default exports, don't use them anymore. Oh, you're using everything name, everything named in that way. What - -29 -00:19:09,690 --> 00:19:11,700 -Wes Bos: about a page and next jass? - -30 -00:19:11,810 --> 00:19:15,210 -Scott Tolinski: I don't have an ext JS application that I maintain. - -31 -00:19:15,830 --> 00:19:20,190 -Wes Bos: So there you go. Yeah. And why? Because of - -32 -00:19:20,670 --> 00:20:11,010 -Scott Tolinski: what because they're explicit is really what it comes down to. I've gone through a bit of a metamorphosis I one of the chrysalis or whatever it's called, I became a butterfly. And now I really understand the benefit of having things be explicitly imported and exported. The like automatic imports are easier even just like import helping is easier in general. Also, there isn't. I ended up having some situations where I would have the actual components name be refactoring or something in one component and not in another where like if I were to change the name of a component that wouldn't break things because it's a default export and you're essentially renaming it on import. So things kind of, were easier to get out of sync that way. This way, if you don't even have to think about it. If something changes the name, then the names changed everywhere. And that's just how it is. - -33 -00:20:11,330 --> 00:20:20,970 -Wes Bos: Because it's it's explicit. Yeah. Unless you were to, even if you were to rename it on import ready, the way you typed it in the file would still be updated. Which is pretty cool. - -34 -00:20:21,000 --> 00:20:36,930 -Scott Tolinski: Yeah. Yeah. And as we moved the entire code base to TypeScript, and all that stuff, becoming more explicit with everything has become one of those things where I've gone from liking a little bit of magic bear to liking less magic. And I guess this may be a transformation. I know, it's, I do still like to see - -35 -00:20:36,930 --> 00:20:38,250 -Wes Bos: the magic sky still, - -36 -00:20:38,250 --> 00:20:47,220 -Scott Tolinski: like some magic here and there. But I do I really greatly benefit or understand the benefits to explicit typing explicit everything. And - -37 -00:20:47,330 --> 00:20:50,520 -Wes Bos: yeah, taking a little bit of extra time in the long run, - -38 -00:20:50,670 --> 00:22:23,730 -Scott Tolinski: helps you, I think it also has to do with the size of our codebase. As the codebase has grown. People always say that, you know, some of these issues will become more apparent when your code base grows. And that's really true, because as our code base has grown, it becomes harder and harder to keep track of everything. Last thing I wanted to touch on is, if you had any gripes about hooks, I have just some gripes about the naming of like, use layout effect. Come on, like there couldn't have been like use Dom effect or something, something to explain, like what it actually is, or even like use effect itself, like use effect to me, is not a great name. It doesn't really say what it does. I feel like it could have been named something different. But they had to stick to the use, like maybe use on changers, I have no idea I guess that's that's a JavaScript thing. naming things is difficult, it's very difficult. Even having the the cleanup function essentially just be the return function of a user effect. That to me is completely bonkers. And like you would have to like know, that kind of arbitrarily just exists for you to actually know that you couldn't look at the code without knowing react and have any clue what that's doing. So for me, like the naming around, some of these things could have been a lot nicer. And I think that is what led to a little bit of the confusion and doubts when people try to learn these things is they're they're explicitly not as explicit as on component did mount or something like that. And that, to me, is something I think could have been done better. But that's really my only gripe with hooks is naming. And that's at the end of the day, that's just a matter of learning them. And once you once you got it, you got it, - -39 -00:22:24,060 --> 00:23:29,850 -Wes Bos: there's a couple things that bugged me specifically, set interval and set timeouts are so difficult. And there are like, the really good hooks out there, I just don't understand why they don't come with react like they're not you have to npm install them. And it's really frustrating, especially like, for me, I'm someone who just throws together lots of really quick examples. And whenever I hit a something that is built into the JavaScript language, set interval and set timeout, and it's so hard to use in react hooks, I wish that they would make that like a first class support and make it really easy to use. And then the second thing I have here is just if you have an a sink, use effect function, like do you want to use a sink await inside of use effect to fetch data? Because that's a very popular thing to do. You have to either switch to promise based then syntax, or you have to have a secondary function inside of your use effect function, which gets really hairy really quickly. So I've just switched to using dot then and in catch, instead of marking my thing as a sink. I, I bet they could fix that. - -40 -00:23:29,940 --> 00:23:33,420 -Scott Tolinski: Have you seen the view composition API? - -41 -00:23:33,450 --> 00:23:33,960 -Wes Bos: No, - -42 -00:23:33,960 --> 00:24:16,140 -Scott Tolinski: I have a tweet from Ave who did this. I mean, who did Who did this? Who did view the crater view, they got it right, in my opinion, instead of calling it use effect, they call it watch effect, which to me really describes a lot more but also the return is named on cleanup. So you know, with an unclean up, so So those are two things right off the bat that they got naming correct in all of this, where you can quickly see watch effect and on cleanup. And that's just how it should work. So to me, like, I feel like they got they got some of the naming right in a way that the React team probably could have done a better job with I think, - -43 -00:24:16,440 --> 00:24:39,630 -Wes Bos: all right, I think that's it. So hopefully that answers the question from secret agent. What's the incentive to switch to react hooks versus glasses? It's kind of a nice little like, Where are they now? Because, again, Scott said at the top of the episode, we haven't done a specific or hooks episode since they were new. And now that we've been coding them for like, a year and a half now. I think we get them and we can talk about how we've used them. - -44 -00:24:39,660 --> 00:24:40,470 -Unknown: Yeah, sorry, I - -45 -00:24:40,470 --> 00:25:03,210 -Scott Tolinski: want to go back to the revenue thing real quick. I forgot to mention that. The reason why I brought that up in the first place was because you can use async directly in the view version of their watch effect. You don't have to you don't have to have a function that calls another function. If you want it to do and await data fetching. You can do it right in the watch effect. Which is really how it should be. Alright, that's - -46 -00:25:03,210 --> 00:25:08,700 -Wes Bos: it for today. Thank you so much for tuning in. We will catch you on Monday. No on Wednesday. - -47 -00:25:10,349 --> 00:25:12,000 -Unknown: Please, please - -48 -00:25:13,920 --> 00:25:23,700 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax308.srt b/transcripts/Syntax308.srt deleted file mode 100644 index 123232b13..000000000 --- a/transcripts/Syntax308.srt +++ /dev/null @@ -1,632 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax, the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:09,930 -development treats out there. strap yourself in and get ready to whiskey and West boss. - -3 -00:00:10,559 --> 00:00:35,520 -Wes Bos: Welcome to syntax today is I bet this is gonna be one of our most listened to episodes ever. Because the last time we did this episode was one of the most popular episodes and that is Gatsby vs. Next in 2020 2021. This is the we're recording this in early November. So I would say that this stuff will probably hold hold true for at least halfway through 2021. Would you say Scott? - -4 -00:00:35,520 --> 00:00:45,299 -Scott Tolinski: Yeah, it's very funny because I always thinking about changing this this episode's title to be 2021 rather than 2020. And then I was like, well, - -5 -00:00:45,299 --> 00:00:46,740 -Unknown: well, - -6 -00:00:46,740 --> 00:00:50,880 -Scott Tolinski: who knows where we're you know how things will change. But yeah, I'm excited about that. - -7 -00:00:52,020 --> 00:01:57,560 -Wes Bos: Awesome. Today we are sponsored by two awesome companies. First one is Sanity, which is your structure content, CMS, and second one is Sentry. It has all of your error and exception tracking. So we're gonna talk about next versus Gatsby, there's been a lot of stuff that has happened in the last couple weeks, most notably next 10 came out and they dropped the very early image component. We'll talk about that in a bit. And in next nine, they also dropped a whole bunch of statically rendered API's. So last time, we talked about this, I was saying use Gatsby for websites and next for apps. And I don't really think that's that's necessarily true any longer. They're both starting to eat into each other's space. And I I like this show because like, I have no horse in this race. I just like that both of these tools are fantastic for building websites and web apps. I've got courses on both of them. I think they're both fantastic tools. And there's not going to be a clear winner at the end of today. But we hopefully can just inform you as to what they both do. - -8 -00:01:57,750 --> 00:03:09,600 -Scott Tolinski: Yeah, I think you're dead on. And I think that was sort of inevitable. Even from the time that we had recorded that episode was that they would inevitably run out of room in their respective spaces and start to bleed into each other's and I don't like I would maybe agree to some extent to the fact that like, I might even still do Gatsby for websites and extra ABS if I was doing like straight up or react every time but I almost would gonna reach for things like felt for simple projects, especially for websites, because of the well, even with UI like an MDX type of thing that the the amount of code you're writing is really pretty minimal comparatively to some of these things. Like when I look at like, maybe like a template file or something like that in MDX or MD specs in the spirit world compared to a Gatsby site, which by no means is like crazy amount of syntax, there is just a lot of extra noise that kind of gets in between you and the HTML that you're working with. I don't know if I would universally say Gatsby hands next for every project as much as I would have last year anyway. So yeah, it's interesting to see how the landscape changes in any year or two. - -9 -00:03:10,139 --> 00:04:35,190 -Wes Bos: All right, so let's get into it. We're gonna go through sort of a whole bunch of different pieces of building a website, server rendering, statically, rendering, re rendering client side data, dynamic pages, hosting images, videos, SEO off plugins, ecommerce, we're gonna go through all these and sort of explain who does what and how to do it, and each of them, and then you can make your decision at the end of this. So let's start off with server rendered, or I'm just gonna say like, yeah, like, like, rendered to HTML, meaning that when you hit a website, you're getting HTML from the server, and you're not getting a JavaScript bundle that then has to render on the client and both do them. The difference is when they do them, so Gatsby is a build time currently is the build time rendered, meaning that they will, right before you deploy your application or as part of your deployment pipeline, it will run Gatsby build, and they'll kick out a public folder that has all your images, all of your HTML, all your JavaScript, all of your folders, and then you can take that and throw it up on a website. So that's done at build time. Next us a little bit differently where that's done on demand. So when you you can like pre render, like statically. But you can also do things statically on next .js either on demand, I guess that sort of gets into the next one as well. We'll talk about that more in just a second. So yeah, both of them do it. - -10 -00:04:35,610 --> 00:05:24,380 -Scott Tolinski: Yeah, both of them do it. It's a matter of of what your needs are. And sometimes we do we talked about this a bunch in the last episode is like when do you need that data? Do you need it live from the user? Or do you need it pre user and that really kind of defines which of those techniques in either platform you're going to reach for as in like, if you need statically if you need not statically If you need server side rendered data that includes user information, then index js is the only option in that regard, because Gatsby just can't do that. But Gatsby can do client side user information, but not not server side as instead of CLI rendered, or even server side rendered, because you don't know who the user is at the time of build. So that makes that kind of impossible. - -11 -00:05:24,630 --> 00:06:04,770 -Wes Bos: Let's move on to the next one, which is static generation. So Gatsby is entirely static generated. So you do everything at build time, like we just said. So the big sort of thing that dropped in next nine, was the ability to eat make some pages static, and some pages server side render, right? Not I think that's so cool. Because like, you can pick and choose which pages on your website are going to be statically rendered. And then you can also opt into if you want it to be a traditional server side rendered page as well. And you can decide on a page by page basis, which I think is pretty killer feature and x .js. - -12 -00:06:04,830 --> 00:06:43,440 -Scott Tolinski: That's something I've always wanted in my own platform, because I think about it, like, there are some pages, the about page, the, you know, the contact page, like those don't need to be created by the server, whenever a user asks for them. And like the standard SSR model of doing things they don't need to be, they could be just sitting there waiting. And I think that's really neat. You know, I wonder if there's like, the next generation of these things is like, like, essentially chunks of HTML and JavaScript that are statically, or pre rendered, or whatever, that can just pop in to given specific spots, rather than having to like fish for information and maybe do TV calls or anything like that. - -13 -00:06:43,470 --> 00:07:47,700 -Wes Bos: Yes, sure, like static chunk static, it's still built on demand, but the parts of it. Like, I wonder what that obviously, like, would that be a major benefit if you could still compile this thing, but not have to do the database calls for specific thing? And we should say also, like, there's probably people listening to this and be like, um, I was doing that years ago, like, anytime we talk about next, yeah, someone's like, so they invented PHP for JavaScript, right? So like, obviously, yes, you you can you can do these things like it's probably trivial to cache some URLs more aggressively than other URLs in your PHP app, or really any app, right. But I think that the the benefit that we're seeing here is that you're writing everything in JavaScript, and you're writing, like some of this dynamic stuff that happens in the browser, as well as your server render pages are all in the same languages. They're all in the same react framework, you can share components from one to another. So you don't have to pick and choose which gets rendered on the client and which doesn't, - -14 -00:07:47,880 --> 00:08:17,130 -Scott Tolinski: there is something to be said about having all of your code and the entire code base in one language in one, like cohesive style and everything like that, that I really, really love myself. So I do I mean, it makes it all of the entire code base approachable, like if my code base was in PHP on the back end. Yeah, sure, I'd manage. But like, I'd have to keep track of like two sets of syntax API's and tooling, and all sorts of things that just get in the way of being productive. - -15 -00:08:17,369 --> 00:08:24,990 -Wes Bos: Yeah, that's a that's a huge benefit to just go all in on all in on one language and in one framework for for all this. - -16 -00:08:25,140 --> 00:08:31,620 -Scott Tolinski: So next section is re rendering pages. You said Gatsby can be re rendered and redeployed. What do you mean by that? - -17 -00:08:31,800 --> 00:09:33,799 -Wes Bos: So like, let's say one page on your website, a blog post is updated, or photo on one of one of your pages has changed? And maybe you just touched one page, or maybe just touch six pages out of the 7000 that are on your website? So that's what Gatsby cloud is. Is that what you can? Yeah, yeah, it can like partially rerender, part of the Gatsby website. And it's really smart about it, it does have to know about your data source. So it only works with specific CMS is actually it works with Sanity, one of our sponsors today, and then it can redeploy it. So that whole process of I changed a website and it's live can really be boiled down to I know that they've said they've gotten it down to seconds to re regenerate it. And then redeploying I imagine would just could be seconds as well. So that's kind of interesting, if you think about it, because like let's say it takes 30 seconds altogether to make a change to your website, and then to see it live. That's almost getting into the territory of just having it entirely server rendered, which is pretty cool. - -18 -00:09:33,899 --> 00:09:34,470 -Scott Tolinski: Almost. - -19 -00:09:34,500 --> 00:09:39,630 -Wes Bos: Yeah. Almost 3030 seconds. Could be a lot in some it is right? Well, I - -20 -00:09:39,630 --> 00:10:15,570 -Scott Tolinski: think about clients, right? So I don't know how much client work you've done with Gatsby but I did a couple of in like, outside API's maybe like WordPress and what people don't understand with Gatsby is that when you, you know, rebuild, like they're used to the flow of saving their WordPress file and then seeing it live on the site. And so yeah, in 30 seconds This is a lot if you are rebuilding, because you save it make a change, and it's not live on the site. I actually got like, three or four. Like even after explaining to the client, that's how it works. I got like three or four emails asking about it. So like, I think that is a big holdup. - -21 -00:10:15,720 --> 00:10:58,710 -Wes Bos: Yeah, I think that's where the end most of these CMS says that they're using will have like a preview mode. Yeah. And you can like, I know, this is actually a perfect episode for Sanity sponsoring. Because let's, let's save that for the address. Yeah, that's perfect. Okay. And then the sort of, like, I always like to point this out is that that is a paid feature. It always gets a little bit weird. There's obviously companies building these things. And these companies need to make money. But I always like to be super clear as to if you're not paying Gatsby for that. You don't get that feature. That's that's something that gets me just has been their secret sauce. And that's how they they attempt to make their money. Yeah, - -22 -00:10:58,740 --> 00:12:17,039 -Scott Tolinski: yeah, that is, well, that was also a thing what like, last time we recorded this episode, what was sort of a mystery how Gatsby was going to make money? Or was like, okay, we get that next has, what was the previous name? Right? Oh, yeah. As is now. Yeah. At the time, they still had a an insight now. I mean, they still had that. So it was making money. But it's like, Well, okay, so Gatsby got a lot of money, but how, how are they going to make money. And it's funny, because that whole situation in terms of like how a company makes money, leaving the product, and the project into different places, really was sort of the downfall of meteors popularity, because they couldn't fit, they got a lot of money, the meteor developer group had got a lot of money, and they couldn't figure out how to make the money. And not that Meteor wasn't making money, because it certainly is, they started their hosting thing, it makes money, but it wasn't making enough money. So then they they come up with Apollo and graph QL. And they're like, Okay, well, we can charge for Apollo engine, we can charge for this and that, and it's like a whole more cohesive business model, and that way to actually make the money. So it is funny how, like, we as developers can sometimes discount these things as being like higher level discussions that we're not caring too much about, but it really has a huge impact on the future of the code. And - -23 -00:12:18,059 --> 00:12:55,980 -Wes Bos: yeah, and and before, like, whenever we talk about, like Gatsby, there, people always come swinging and saying, like, they're just taking the problems that they made, which is regenerating and charging to fix it. And last, but that's what a lot of companies do for for that like, like, they'll take the hardest part about, like, if you look at MongoDB is a good example. It's a open source database, but they also have a massive company behind them massive, and they will take the hard parts, which is finding out why your database is slow, or hosting the thing or security or replication, and they make those things easy, and you can give them money to make that easier. So that's that's a business model. - -24 -00:12:56,340 --> 00:13:14,399 -Scott Tolinski: Yeah, they did a business. And that's how business works. So you did a business? Yeah. One of our sponsors also does business. And they do business well, and they do business with a neat little previewing thing that we just kind of hinted at, do you. Do you want to talk about that now? - -25 -00:13:15,179 --> 00:14:29,370 -Wes Bos: Yeah, let's get into it, because we are talking about it. So our sponsor is Sanity, which is a headless CMS that you generally you use with want to evenly use it with whatever you want. But yeah, it's very popular to use these headless CMS is with next Yass, or Gatsby, or any of these frameworks to pull in your data from Sanity. And it's really cool, because Sanity has a plugin that will allow you to change your data. And you can preview that as if your site was updated. And then if you have build steps or anything that needs to happen, that will obviously go but your client will see what it looks like. And that was actually kind of an interesting thing. Like when I did WordPress way back in the day, it was always hard for the client to say like, I want to change this thing on this page. Now where does that field line up in the backend, right? Change it and save it and then go back. And he had to clear caches in some cases as well. So Sanity is making that really easy for the person who ends up actually editing the website. So check it out, if you are building a website or web app or anything like that, and you need a headless CMS or structured content, CMS, as they call it, go to sanity.io forward slash syntax, and that will get you double the free usage tier sick. - -26 -00:14:29,730 --> 00:14:31,890 -Scott Tolinski: Thank you for Sanity for sponsoring. - -27 -00:14:32,309 --> 00:14:45,990 -Wes Bos: Let's talk about next .js in terms of pre rendering pages, if you are doing server side props on next, yes, then it is just re rendered. But one one kind of cool thing is they helped us update the syntax website to which is - -28 -00:14:45,990 --> 00:14:47,250 -Scott Tolinski: statically use. - -29 -00:14:47,520 --> 00:16:07,350 -Wes Bos: Yeah, it's statically generated, but also it needs to update itself when a new episode is released, and we didn't really want to set up a cron job or whatever. So they have this revalidate flag. You can set on a page. Basically, the way that it works is that when you make a page called like, show, what you do is you you first you fetch all of the possible routes that you want, and you return that. So forward slash show one, forward slash, show two, forward slash, show three. So we fetch a list of our podcasts and then export that. And then for each of those shows, we go and fetch the individual data that can be done, it's cool, because it all happens server side, we don't have to have a public API for it, because we just have internal libraries. And then what happens is that there's a revalidate of one, one second on it, you can set these to whatever you want. It's the amount of time that needs to pass after somebody visits the page. And it'll check if it's stale. And it will, it will revalidate it. And in our case, so if you go to the website at nine o'clock in one second, you will probably see the new episode is not there. But that, that kicks off something in the background that says, Oh, this page is now more than one second old, and it will regenerate that page and serve it up to the next person that comes. - -30 -00:16:07,380 --> 00:16:10,260 -Scott Tolinski: Yeah, so you won't get it. But the next person will see, - -31 -00:16:11,580 --> 00:16:22,289 -Wes Bos: like, how does that work with like, like pages that maybe don't get a ton of traffic? Or can that be done on like a cron job where it would just like, check every so often, right? Yeah, cuz you don't want that? Sure. - -32 -00:16:22,289 --> 00:16:49,590 -Scott Tolinski: That first person. It's funny because a lot of these new services like our video streaming service, the first person who watches any of the videos that any of the given qualities gets a hit because it transcodes it on demand. So the person's gonna inherently get a slower loading video, but then they caches it for the next person, right? So it's funny that a lot of these new services, I don't I doubt this is a new idea, but like the first person takes a little bit of a hit. I mean, that's what that's how cloudinary works. Do, right. - -33 -00:16:49,620 --> 00:17:09,750 -Wes Bos: Yeah. And, and even, like, Heroku, someone hasn't visited your thing, it takes like a second to spin up that droplet and run a cold start. Yeah, exactly. I remember, like back in the day, people would write these little bots that would just ping the website, and it would stay hot, it would say, that'd be - -34 -00:17:09,750 --> 00:17:10,410 -Scott Tolinski: invalid. - -35 -00:17:12,720 --> 00:17:45,630 -Wes Bos: Anyway, but like with those on demand, we'll talk about that when we hit images, because like, that's a huge benefit to doing it on demand versus that build time, which is, it takes forever. That's how nex .js does it which is kind of cool. You can just revalidate it in the background. And I'm curious now, I don't actually know the answer to that. But like, what if you have a website, that's like, six people hit it a day? Yeah, then it's important for whoever visits the website to get the most up to date. If that's the case, I guess, then then you have to do server side rendered, which is probably not a big deal for here. Not a big deal, - -36 -00:17:45,630 --> 00:18:34,230 -Scott Tolinski: right. Because, like we act like that's a big deal. But like, at the end of the day, the server is really fast at generating HTML, it is very fast to that. And you know, like, when I actually sit down and think about the amount of work or the the process that my server has to do on each page that's hit. I'm, like, always pretty amazed at how fast it's accomplished. And I'm kind of a perfect freak, where I'm looking at the ttfb all the time, and all that stuff. Like I'm constantly evaluating those things. So for me, like, the server is very good at producing HTML. So this should not be a conversation of like statically. Always, static has its advantages, right? It can be cached, it can be served up really quick and fast. You don't have to do any processing to get it there. But the server is very good. So server side rendered applications by no means will be slow. - -37 -00:18:34,530 --> 00:18:41,060 -Wes Bos: Alright, I just had a little note there, but hosted graph QL. But I moved it to a different section. So hang on for that. Oh, - -38 -00:18:41,060 --> 00:18:41,730 -Unknown: yeah. - -39 -00:18:42,990 --> 00:18:45,300 -Scott Tolinski: Keep your hats on. I don't know if that's the same. - -40 -00:18:46,800 --> 00:18:47,910 -Wes Bos: We can we make it that way. Hold - -41 -00:18:47,910 --> 00:18:48,750 -Scott Tolinski: on to your hats. - -42 -00:18:48,750 --> 00:20:02,520 -Wes Bos: Hold on. There, keep your hats on. I got. The next one is data management. So you've you've got data, it comes from an API, it comes from markdown files, it comes from all of these different areas. How do you manage that? So Gatsby has an I personally really liked this Gatsby has a graph qL API feature, where it will it's called sourcing. So the way that it works is that when you fire up a Gatsby thing, it will go and get the data from all of your different locations, whether that's data from Sanity, whether that's data from markdown files, whether it's data from the GitHub REST API, and it will normalize it all into one big graph qL API. And then you can go ahead and use graph qL queries from your single graph qL API anywhere in your your website, which is really cool. And I personally really liked this because the you don't have to write schemas or type anything or whatever with Gatsby, it just pulls in the data from your your source, and it will automatically detect types and schemas and all that stuff for you. And just give you that That's really wicked graph qL API. Yeah. - -43 -00:20:02,730 --> 00:20:39,030 -Scott Tolinski: And I've always liked it, too. I've liked it for everything except for the images, because the images part, like the fact that you had to query Yeah, and do all the image transformation in the query always felt weird. But for the most part, I really loved being able to just at any given point, write that graph. qL query, it would be neat. If there was some, there is some magic involved. But it'd be neat if there is like, a little like, I don't know, I think I'm just spoiled by like single page component features that exist in view and felt like the the single page component thing is nice, because there could be a little bit of magic where you're just like, here's the data. And yeah, they're Gatsby has a little bit of that. But I don't know, what do - -44 -00:20:39,030 --> 00:20:46,140 -Wes Bos: you mean by that? Like, single what is the single page component? Oh, like CSS, JavaScript logic and templating? - -45 -00:20:46,200 --> 00:21:06,630 -Scott Tolinski: Yeah, it kind of gets out of the realm of being a straight up JavaScript file, which is why people don't like it. Shawn swix actually had a really neat little model of doing like, single page react. And I don't know if it gained any traction, because I think react people are so used to the whole Jess JavaScript thing that they I think are a little bit blinded by that sometimes. But that's just my, - -46 -00:21:06,990 --> 00:21:23,760 -Wes Bos: I'm here for for like, which we made up .js X, like, what more do you want? Like, or do you want more? I mean, we already changed the format of the JavaScript we're writing, we're just putting HTML tags in the middle of our JavaScript, so why not? Why not more? Yeah, right. - -47 -00:21:23,760 --> 00:21:50,850 -Scott Tolinski: Speaking of why not more, why not to JSX to please it with, I'm gonna stop saying salt in a second. But there's like a, you know, they do like the two brackets inside of a component. They just do like two brackets, and then the variable name to pass that variable down. So instead of doing like, prop equals prop in brackets, it's just yeah, it's Prop, like, come on, can we? Can we have that we just, I just want that that's the only thing like that. - -48 -00:21:51,180 --> 00:22:20,970 -Wes Bos: So next, .js doesn't have anything built in for data management. And that's not because they like haven't thought about it. It's just they're intentionally saying, No, we don't, we don't care how you manage your data. So go off and get Apollo or SW are just like, yeah, stale, while revalidate. It's definitely much smaller. in scope. It's basically like a bunch of utilities around fetching data. And when you should refetch that data, or you go get Redux, - -49 -00:22:21,120 --> 00:23:14,790 -Scott Tolinski: you're missing a big one. What react query? Oh, yes, is basically like, you could think of a query as Apollo for non graph. qL API's is really the way I like to think about you can do graph QL. API's with it. But it's not as nice as Apollo in that regard. But it is you get these nice little use use query hooks and use mutation hooks, and it does all the caching for you in that caching is really nice. I like yeah, React queries. And it's, it's in the definitely in the same same category as SW are here. We need a tasty on this, because this looks awesome. I've not used this before. Or hasty, we made a hasty on well, Tanner, who created it, he popped into the chat room over 300 episode. And we couldn't get him on the show cuz he had to head out of balance. But I've talked with him previously about coming on syntax. So if there's interest in having him Come on, yeah, yeah, it's a it's a really, really great, really awesome platform - -50 -00:23:14,790 --> 00:23:15,570 -Wes Bos: sick. - -51 -00:23:15,840 --> 00:23:29,940 -Scott Tolinski: Yeah, it's funny, when we were talking about this whole, like, next .js is like, bring your own data. I had this realization because I you know, I, those of you who listen to the show, not that I've been using Meteor for a long time, and and I was trying to always figure it out dead, - -52 -00:23:29,940 --> 00:23:31,830 -Wes Bos: Scott. Oh, yes. Shut up. - -53 -00:23:36,900 --> 00:24:39,210 -Scott Tolinski: So I've always been trying to put in my mind, like what is in fact, the difference between these two platforms, because they're both very encompassing platforms in a lot of ways. And I was trying to put my finger on it. And I think I really nailed it when I was thinking about this because I think Meteor is a platform where the data is not flexible, and it's bringing your own front end, where next is a platform where the front end is not flexible, and it's bring your own data. And, and that to me kind of blew it all open because I also haven't seen these things in different ways. It's like, oh, okay, if you if you like to bring your own data in your own login your own all that stuff didn't next is a great platform if you're happy with react if you want to use anything, and you want to have that database like if you want to have that freedom for the front end then I don't know Meteor Meteor is a great platform for that. So it kind of blew my mind when I just suddenly had that little bit of a realization that next was making a lot of choices for you on the front end so you can make those choices yourself on the back end and meteors like the exact opposite. - -54 -00:24:40,830 --> 00:24:43,350 -Wes Bos: Wow, that's that's a big revelation there, Scott. - -55 -00:24:43,920 --> 00:24:44,730 -Unknown: Okay, - -56 -00:24:44,760 --> 00:24:47,370 -oh, no, don't - -57 -00:24:47,370 --> 00:24:49,140 -cram it and - -58 -00:24:49,950 --> 00:25:16,650 -Wes Bos: no, I didn't mean to make funny I just it makes sense. I actually like think about these things and I'm like well versed. Oh, please come out with the rest of it. Yes, like They'll probably do an awesome job at it. And they're they intentionally are agnostic about, like what CMS you're using or what data management thing you're using. And they probably believe strongly in that just because like Otherwise, they probably would have rolled out a CMS by now. Yeah. - -59 -00:25:18,420 --> 00:25:41,790 -Scott Tolinski: It's funny, because if it seems like I'm talking a whole lot about other platforms in this episode, it might just be because I haven't worked with next and Gatsby as much this year, as I did the year before either of them, even though they both have made huge leaps and bounds. So if you're getting that that vibe that I'm kind of allowed in other platforms, it is really, really accurate. So I'm hopefully bringing that voice to this episode. That's good. - -60 -00:25:41,790 --> 00:25:47,940 -Wes Bos: That's good. Because these are not the only two ways to build a website. And despite - -61 -00:25:49,260 --> 00:25:51,390 -Scott Tolinski: Twitter or or, you know, yeah, - -62 -00:25:51,420 --> 00:26:27,450 -Wes Bos: yeah. It's funny, like, we originally built the website for syntax in next Yes. And and then Gatsby became super popular. And everyone's like, why is it not in Gatsby? And then, like, if you sit on it long enough now? Now, I think the pendulum is kind of swinging back to being like, Oh, yeah, it is a good use case for the syntax website. Because like, we also have have an API on there, I pull the latest syntax into my own website and the syntax that FM hosts the API. And that's actually one thing we don't have in the show is you can't host an API with Gatsby because it's all done on bill at build time. Although, - -63 -00:26:27,630 --> 00:26:28,140 -Unknown: although - -64 -00:26:28,170 --> 00:27:57,000 -Wes Bos: there I'm crossing my fingers, Oh, I got some stuff. Let's get into the next part here. Dynamic pages. So I'm going to explain what I mean about these situations. So let's say you have a website with 100. Shoes, right? You could loop over those shoes, make a page for every single shoe and that's okay, you got 100 pay 100 shoes, and then, okay, you also have like, different types of shoes, categories, basketball, shoes, runners, casual shoes, bowling. And then each of those shoes has colors. I've gotten six or seven different colors for those and and then you have like sizes, you got 12 different sizes for each of those. So that starts to get complicated when you want to have a page that you say, Okay, I want a page and somebody actually messaged me that, like, I want to have a page that shows me basketball shoes that are red in size five, I'm like, Okay, well, okay. And now if we look at both platforms with next year, as you probably throw that over to a server side rendered page, yes, with Gatsby, it has to be pre rendered. So what that means is that you have to pick out every permutation of basketball shoes in red in size five basketball shoes in red in size six basketball shoes. And, and you get the point, right? Yeah, and I just did some quick math. And that's, it gets exponentially large when you think about every single combination of it, right? And then what if you want to do size, size six and seven at the same time, like we've all seen a website with the filter on the left hand side, and you want to filter for each of those - -65 -00:27:57,060 --> 00:27:59,730 -Scott Tolinski: as the filter on the left hand side? - -66 -00:28:00,690 --> 00:29:58,230 -Wes Bos: So what happens is that you're like, Okay, we can't feasibly regenerate no 10,000 different combination pages here. So what do you do? Well, you dynamic just Yes. Yeah, it doesn't make it dynamic. you fetch the data on the client side. I think this is this is a bit of a downside to Gatsby is that, then you have to go straight from the browser to your data source. And we I showed you how to show how to do this in my Gatsby course. Because I think it's important is if the data needs to be fetched on the client side, there's no like refresh attribute, you can put on a graph qL query refresh on client. And also in Gatsby, you query all the data from the graph qL API. And that's just not available when you're when you're in production, right? Unless you are do like Big Brain run Gatsby develop on your server. So you have to go straight to the source. Like in my course, we went straight to Sanity, we bypass the graph qL API entirely. And then we have that we have to deal with loading states, which is kind of a pain. So that's a downside. And I just I've been talking about this. So for a while, and I just finally searched it. And I searched Kyle Matthews hosted graph QL. And I found a tweet from him in April 2020. It says, dynamic is a bit fixable to once we have a hosted graph qL mode. So I'm hoping What that means is that and I think what this means is that Gatsby will eventually have the option to deploy your graph qL API as well. And then you'll be able to both obviously pre generate all of your pages, but you can also have them refresh with the latest data on the client without having to do two different graph qL API's is that was frustrating because like the Sanity graph, qL API is not the same syntax as the Gatsby graph qL API. And so you can't even reuse queries. Like you can't even like ship a query to the browser and then rerun it. You have to write the query again in the client and I thought that was a bit of a pain. - -67 -00:29:58,380 --> 00:30:13,230 -Scott Tolinski: Yeah, it is a little Bit of a spaghetti salad at that point, like, a little bit of a rough spot, especially when you think about how elegant all these things are, then you get into the weeds or something like that. And you're just like, Why? Why is this? Why am I doing this? - -68 -00:30:13,259 --> 00:30:39,420 -Wes Bos: Yeah, I love getting into the weeds on this type of thing, because like this is not necessarily something you hit. Yeah, until you've your way, like way too late to switch over. So right and not, not every website needs that right or cares about that. Or maybe you decide to do the shoe searcher just on entirely on the client side, because who cares if you have a page, like who's searching red shoes and size five, maybe that's not necessary. - -69 -00:30:40,680 --> 00:32:55,920 -Scott Tolinski: Yeah. Next one is routing. And routing, to me is the biggest thing I don't like about both of these platforms, I do love that they both do folder based routing. And folder based routing really saves you from having to write a router, because it, it basically looks at the folder structure of your application inside of your pages directory, and then generates the routing based on that. The big problem with folder based routing is that each of your page changes basically goes all the way up to the top. And you'll see the solutions for this being unlike a wrapper file where you can wrap your code in as many providers and whatever as you need to, you know, like a file where you can import all of your providers, whatever. That way, you can do animations on mountain unmount. But the problem with that is, is specifically in react, React doesn't handle animations on unmount very well. And because of that, you would have to orchestrate your entire applications, mounting and unmounting Apple animations in the, you'd have to orchestrate this all in the provider because you'd have to have all of those data's and values whatever you're, you're moving from what I'm trying to think of how I would do like customized page transitions per route in next j s or Gatsby with framer motion, and it would not be really pretty like when one thing I really love about react router setups for this is that you can have nested routes, and nested route ORS, so nested routes, Fine, whatever, everybody can do nested routes. And that's something nobody understands is that Nesta routers, which is what react router five and four, whatever allows you to do, where you physically, let's say I have a page, and then I have a layout. And then inside of that layout, I have a whole section of the page, maybe it's like user account information. You've seen this on GitHub, where there's a menu, like a sub menu with a content area with next or Gatsby, you click on any of those, and it's having to rerender everything top down, right. And whether or not that's the layout that it's in whatever. But in react router, you can have it be so that that little thing is self contained in that little layout. When you change a page there, it only affects the mounting and unmounting of components within that sub small sub section, while changing the URL, - -70 -00:32:56,130 --> 00:32:58,200 -Wes Bos: it could be just like a box in the sidebar, right - -71 -00:32:58,200 --> 00:33:51,180 -Scott Tolinski: could just be a box in the sidebar. And then the neat thing about that is you can like for instance, I wrote a wrapper for react router that does mounting and unmounting animations of sub layouts. And that would be impossible with next or Gatsby just flat out impossible. So like the user account information, when you click any of those links, those pages can mount and unmount and whatever, without affecting anything higher up on the chain. And that to me is like the biggest, biggest biggest gripe I have about either of these platforms, when we went to move level up tutorials to next. But that was like one of the most disappointing aspects of it was that we are losing so many of those neat user interface touches that we had gained through react router. I would love to see them to add this. I think there. Some people don't necessarily get what you're talking about when you talk about nested routers. But it is it is like a thing that I really, really love and use frequently. - -72 -00:33:51,509 --> 00:34:35,820 -Wes Bos: Okay, that makes a lot more sense to me. Because last time you talked about it, I was like I don't understand what you're saying, which is but like I get it like even if you are on a user, like an edit user page. So you have everything for the user admin page, but then just a small subset of the user page, you were to change that you could just animate or switch and it doesn't have to mount and unmount the entire thing like in index js and Gatsby, you can you can like put your header and your footer in like a higher level component. And those won't unmount and remount. Like the the navigation won't. But everything else was the whole the whole guts of the page. Well, if that's the case, you have to have the same layout for every single page. You can sort of step outside of that, - -73 -00:34:35,879 --> 00:34:49,170 -Scott Tolinski: right. And I think anybody who's tried to do mounting and unmounting animations on Gatsby and next will instantly get what I'm talking about because there are so many hoops you have to jump through, especially when you're talking about like nested anything there. - -74 -00:34:49,830 --> 00:34:53,340 -Wes Bos: Let's talk about hosting real quick. Where can you host these things - -75 -00:34:53,360 --> 00:34:54,150 -Scott Tolinski: anywhere, - -76 -00:34:54,230 --> 00:35:15,270 -Wes Bos: anywhere. They're they're very easy to host Gatsby is just HTML, CSS and JavaScript. The other day, so you can you can literally put that anywhere. FTP in most cases, you have a build step with both of these. So you'll need something to, to push it. I think that's that's good. The hosting hosting thing looks good. We'll talk about server list in just a second. But hosting looks good for both of them. - -77 -00:35:15,420 --> 00:36:13,880 -Scott Tolinski: Yeah, that we will, like I said, we'll talk about the serverless thing. It's it's a little weird that you get a better hosting experience with wsl of the next .js than anywhere else. But I guess that's that's to be expected. That's how they're Yeah. Gonna make my own businesses. Yeah. You know, it does. It does sometimes feel like that's like, like, what what are they like an unintentional roadblock or put up, but I honestly don't know too much about the specifics there. So I don't want to say anything, because I honestly, I don't know. And, and it is absolutely their, it's their platform. So it would be absolutely right for them to make money off their platform in that way. So I have no problems with it. It's just It is one thing. Let's get into images. And images are a big deal. And Wes, I actually found something really neat. Because I know you have a lot to say about next new image component. I haven't used it or checked it out too much. I want to hear all about that. But regarding some of Gatsby's updates, I have some neat little information to share. So you can go ahead and I'll drop my tidbit after - -78 -00:36:14,040 --> 00:37:04,170 -Wes Bos: Yeah, yeah, I was just like, literally like 20 minutes before I recorded this show. There's a bunch of tweets flying about updates to Gatsby, I don't. I got code, you got code, I got code. Alright, so images in both of these platforms, you want to compress, you want to resize, you want to lazily load them, when people scroll into view, you want to blur them up so that you can you can run like blurred versions, and then while you load them, it fades in Nice. You can do that cool SVG trick. I don't, I still don't know if that's actually really cool. Or like if it's a gimmick, or if it's like real, like where some you the way that it works is that you have an image of like, Scott, it's pretty cool. And it will trace like Scott's face into an SVG and load that up while the image is downloading, and then it'll fade it from SVG, Scott into pixel raster base got, you think it's cool. - -79 -00:37:04,710 --> 00:37:29,360 -Scott Tolinski: I think it's cool. I think it's cool. Like, I think you're playing a dangerous game if you're using it with faces, because you're gonna get somebody who's got a really bad looking SVG face, and they're gonna get upset about it. But I think for some images, it's very cool and other images. I think it's out of maybe a per case basis, I'm definitely more likely to use the blur the blurred version than the SVG one, but I think it I think it has its use cases. - -80 -00:37:29,730 --> 00:37:38,850 -Wes Bos: No, it wouldn't be funny is if it automatically colored it like the Barack Obama hope poster, it'd be great for faces. Yeah. Well, it's like loving him. - -81 -00:37:39,750 --> 00:37:48,150 -Scott Tolinski: His name was fairly Shepherd, fairly Shepherd, fairly new. Is wasn't Spencer, Shepherd, fairly the famous obey guy. - -82 -00:37:48,440 --> 00:37:50,010 -Wes Bos: He is he's the one that design that. - -83 -00:37:50,430 --> 00:37:51,420 -Scott Tolinski: Yeah, he designed it. - -84 -00:37:51,420 --> 00:37:52,710 -Wes Bos: He did obey. - -85 -00:37:52,710 --> 00:37:55,290 -Scott Tolinski: He's done a lot of very fantastic art. - -86 -00:37:55,800 --> 00:39:10,320 -Wes Bos: Cool. Yeah. So with these up until, like, what about a week ago, at the time we're recording? Next, Jess had no skin in the game for how you do images. And I even when I launched my own website, people were like, Hey, why don't use next? And I was like, well, images. And they're like, Well, why don't you go and use cloudinary, or whatever. And, again, I've said this many times, I'll say it again, I love those services. But there's something to me, where if there's a core feature of your application, that can't be done, without paying for a service that sort of pushes me away, like not that you shouldn't pay for these services, they're great. And I also use them on, I use cloudinary. On a lot of them image x is another one. But if you can't do part of it, I feel a sort of the same way about search. Everyone's like, just use all golia and like level golia It looks awesome. We're trying to integrate it with our website. But like, wouldn't it be nice if you could also just run that on an airplane where you had no internet? Or if you wanted to just not have to pay for these services? Because like, I know, sooner or later, we're gonna wake up and we're gonna be like, wow, these services are costing me $100 a month for to run my own personal website. So - -87 -00:39:10,400 --> 00:39:12,380 -Scott Tolinski: death by 1000 services, it - -88 -00:39:12,380 --> 00:39:26,010 -Wes Bos: death by 1000 servers is exactly like I always thought would be funny, you know, when you like, go and pick a Mac, and you like, customize it. And you're like, what's the most expensive Mac I can make? Yes, I that would be funny. Like, what's the most expensive personal website? - -89 -00:39:30,690 --> 00:39:33,270 -Scott Tolinski: You know, like, very funny. I love that. - -90 -00:39:33,360 --> 00:39:39,650 -Wes Bos: Yeah. back end front end, continuous integration, testing. Search, but only name is - -91 -00:39:39,650 --> 00:39:43,050 -Scott Tolinski: compression. Yeah. Yeah. That's very good. Very good. - -92 -00:39:43,080 --> 00:39:45,750 -Wes Bos: Could you go 100% paid services? - -93 -00:39:45,810 --> 00:39:46,800 -Unknown: Yeah. No, it'd - -94 -00:39:46,800 --> 00:39:47,340 -Wes Bos: be good. - -95 -00:39:47,340 --> 00:39:51,270 -Scott Tolinski: Don't they call that no code movement. That what they call that? - -96 -00:39:51,510 --> 00:41:19,590 -Wes Bos: No code. So let's talk about next and next rolled out their image component. It's very early days for it. I think that they they pushed out what they had at The time so they could announce that next .js cough, because it's not as good as the Gatsby image yet. But I don't foresee that being an issue of swaying you. Either way, I guarantee it will be just as good as Gatsby image in a couple months from now or whatnot. They had a it looks like they had a dev at Google work on all of it. So it's awesome, because you just have an image tag, you give it a source. And that source can be a remote source, it can be a local source. And then you can specify the quality, the width and the height, and it will regenerate all of the different sizes for you. And it will lazy load the min as you need it. I will convert it to web P and try serve that up and Gatsby image does all of this as well. It's great. It's it just takes all the hard stuff around making images good on the web, and just puts it into a an image component. So it does doesn't do blur up currently, it does do lazy loading, both of them don't support gifts, which is super annoying, because like with Gatsby if the code your own fallback component, which I'm sure they'll fix at some point. One of the big pains to Gatsby images is you have to read a graph qL query just to get an image now you do Yeah, that looks like it's not the case anymore. There's a GitHub thread that is proposing to do very similar to what next is doing is just have an image tag and figure it out for me. You know, - -97 -00:41:19,940 --> 00:41:25,190 -Scott Tolinski: proper props where props are due. gritstone did that a while ago, over a year and a half ago? - -98 -00:41:25,560 --> 00:41:30,270 -Wes Bos: Yeah, I was just looking at the grid, some docs that you linked here. And like, this is what I've wanted forever. - -99 -00:41:30,420 --> 00:41:36,810 -Scott Tolinski: I know like I've been highlighted in gold, and it says the gold standard and the links to grid sums images. So check that out. - -100 -00:41:36,860 --> 00:42:04,320 -Wes Bos: It is the the gold standard. Cuz like also another thing when next year's currently is you have to give it a width and a height. Whereas Gatsby has this idea of fluid and fixed images where you could supply the width or the height or you can supply both. And then it's a fixed image. And it's not currently something that works with next. Yes, yeah. And then there also is an image and format Auto cloudinary has a setting where you can say format auto and quality auto. Yeah. And it just picks it for you. And I was like, Yes, - -101 -00:42:04,320 --> 00:42:16,460 -Scott Tolinski: that's what I thought if they support web web p given web p if they support whatever any of these new formats are literally any new format. And Gatsby do do the format thing, though they do auto format. - -102 -00:42:16,530 --> 00:42:29,190 -Wes Bos: Yeah, you will they not auto format, but they will try to serve up a web P. But what I'm thinking about is like, you know, sometimes like a JPEG is smaller than a PNG. And you didn't think that that would be the case? I don't think it does that. - -103 -00:42:29,250 --> 00:42:40,400 -Scott Tolinski: Yeah. cloudinary is amazing with that in that like, I love that photo. I just like the day I dropped that on everything was just amazed at the sizes of images I was serving up. - -104 -00:42:40,590 --> 00:42:44,100 -Wes Bos: So you want to tell us about the Gatsby image? Yeah, - -105 -00:42:44,100 --> 00:43:33,270 -Scott Tolinski: somebody linked me to Doc's Sophia andron. She linked me to the updated docs for what will be the new Gatsby images thing. So if you do go to Gatsby plugins images, there's the readme for the experimental image plugin, which will most likely I don't know if this is going to be the final code. But this seems to be the the code, which shows a static image component where you're passing in just the image rather than doing a graph qL query, which I love, and I haven't, I haven't really because she only sent us after we started recording. So I haven't really had the time to read this. I'm not good at parsing stuff like that, while we're while we're chatting here, but I'll leave this this in the show notes. So you can check this out yourself and give it a look, it seems to be pretty neat. - -106 -00:43:33,570 --> 00:44:02,670 -Wes Bos: Yeah, I just give it a quick scan. And it looks like you can use it anywhere. So you don't have to query them at a page level, which now page versus static query. This looks awesome. It basically just gives you a image tag static image tag. Yeah, that will allow you to do and the only downside it looks like is you can't have a dynamic width and height because you can but I think you have to use the graph qL interface still? No, because graph qL queries cannot be dynamically taken me Gatsby, - -107 -00:44:02,670 --> 00:44:04,380 -Unknown: you're right, you're right. You're Unless - -108 -00:44:04,410 --> 00:45:15,210 -Wes Bos: Unless you're at a page level, but like you can't change it in the browser. And you can change that you can't calculate it at build time. Because it has to has to be known, right? You can't put variables into a graph qL query, you get the upside of it all being static and super fast and whatnot. But then you also get I think, a hosted graph. qL will, will help us out there as well, totally. The last thing we have here is one huge pain point for Gatsby is you have to generate all your images, build time. And for websites, a lot of websites, that means a long time to generate it. And again, that's another thing Gatsby cloud will do. I personally use something on Netlify that pushes them off to Google Cloud and like does them concurrently but it's still kind of slow. And then once you do it the first time, it's not as bad but like, if you have to delete your cache folder, you're gonna be you might as well go get lunch, if you've got a lot of images on it. And the next yes doesn't on the fly, right first person that does it, it probably a little bit slow. But then then it's generated on the fly. And I and that's also what Gatsby does in. In development mode. It doesn't, it can just do them on the fly, which I wish they did in production. But obviously, it's the downside to not having a server. - -109 -00:45:15,660 --> 00:47:02,490 -Scott Tolinski: Yeah, right. Always a consideration. Yeah, other thing you want to take into consideration when working on applications is having issues in your application. Because if you have issues in your application, you're going to want to go ahead and use a tool like Sentry. Now, you might be thinking Sentry on a static website, well, hey, Sentry works on the front end code, as well as it works in backend code. In fact, it's really easy to drop into a react project and get all of those react errors that you might have in your application in your century. So it's not just for server side code. And it's not just for straight up node code, it's for all of your code, we use Sentry, and both our API as well as our react setup. And let me tell you, it's really nice to be able to have both of those setups and see any sort of issues and set up your react error boundaries. Or you can just capture those exceptions, it may happen. Anytime your users are getting a white screen of death, you're gonna want to check out century@century.io, use the coupon code, tasty treat all lowercase, all one word, and you're going to be able to solve any of those bugs in your front end code, as well as the back end code to if you're using any of that server side stuff. So to get into it, let's actually move to the server side stuff, which will hint there let's talk about the server and or serverless platforms here. Gatsby has nothing in terms of like, what is Gatsby do themselves, they don't do anything with your your server side code other than the static generation, there is no server list platform for Gatsby so to say. But that's could be seen as a strength because you can use whatever surrealist platform you'd like, right? If you want to use AWS, you want to use Netlify, or begin any of those serverless function platforms that exist out there. You can use that and you can do it yourself. But again, Gatsby itself does not not do anything there. - -110 -00:47:02,640 --> 00:48:44,190 -Wes Bos: No, no, it's just some cases. That's good, because you just like, like, you can do it, obviously, but not with with what we do. Next. Yes, has API routes. And we said, we talked about API routes when we talked about the syntax website being updated, because we moved all of the custom node code and the custom node node server that we had on syntax. And it moved all over to API routes, which if you haven't done this before, it's a it's a folder in your next app website. And then you can run server side code on there. We got a message from Tim, who runs a said he says, For some reason, it sounded like we said you can't run the API routes unless you host on wsl. But the thing was just say is that you can host API routes anywhere, it is only serverless if you host it on your cell, right? Right. So if you host it on digitalocean or something like that, then it's just a node app, which is just fine. Like in a lot of cases that that's all you need. It's only special serverless. When you host it on your cell, there is a couple community projects to try to get it to work on. Like even I reached out to Brian LaRue, who works on begin, Okay, can we host next gas on begin ended up not being possible? Hmm. Which is a bit of a bummer. because it'd be cool to to move this thing wherever you want. But that is to say, if your app goes down on wsl, like for whatever reason, if you want to move, like I'm not saying you should I love it, I host my syntax there, and I host a bunch of my projects there. But if you need the option to move somewhere else, it is doable on a server. But if you need the server less than you have to I'm sure you can configure nginx and some API gateway or something like that. Sounds like actually make it work. Yeah. - -111 -00:48:45,300 --> 00:49:42,060 -Scott Tolinski: I do want to say that any experience I've ever had hosting on oversell has been very positive. I think they get it in terms of the UI of things and the flow of things. Like Netlify. I think they got it first. Maybe not first, but they got it right to make it easy. And I want to say the first isn't it before varicella or something like that? I'm getting to that. They got it right. And then versaille also got a right in terms of just make it as easy as possible. The thing I hate most in life is tweaking nginx file server, like bring my server down. I goofed up an engine x file, like, No, thank you. Let's make it very, very easy for me. And in it all. I think that all goes back to like, I don't know if Heroku was the first ones to make it super easy, but like, I love it, bring on the easy hosts bring on just the Push To Deploy not having to think about continuous integration. I don't want to think about any of that stuff. Push your repo, let it go, you know, - -112 -00:49:42,539 --> 00:49:47,280 -Wes Bos: let's move we got we have SEO here, but both of them do SEO. Great. - -113 -00:49:47,340 --> 00:50:23,550 -Scott Tolinski: Yeah. So if it's rendered by the server, the Google bots can get to it then it is good. Okay, the plugin ecosystem Gatsby has a ton of plugins and you know what Gatsby's done that since day one, a Kyle himself probably wrote a ton of those initial plugins. And they existed from the very first time that I found Gatsby I clicked on Gatsby, I clicked on plugins. And I was like, What? There's a lot of stuff here. So it that kind of thing really gives you confidence in the platform and that there's people using the platform. Now this is funny that you said get next .js has plugins too, but I haven't used it as single plugin. I don't think for next year's ever. Do they make these things known? - -114 -00:50:23,700 --> 00:50:27,750 -Wes Bos: Yeah, there's there's a whole repo called next dash plugins. - -115 -00:50:27,810 --> 00:50:30,480 -Scott Tolinski: Yeah. But there's a re is it on their site? Like if you - -116 -00:50:30,600 --> 00:51:26,250 -Wes Bos: don't think so? Yeah, that's thinking about this. Now, I've never used the next plugin either. I think because next doesn't handle the data layer like Gatsby does. There's not a whole lot of not necessarily sure if it's neat, or whatever. But there's not a lot of plugins. And I think it's way easier with Gatsby just to throw in a plug in sitemap plugin, bam, throw it in, you're up and running. And that's not to say you can't do these things. You can do anything you want with anything. But in my experience, it's been much easier to click these things in. And I think that's key for the market that is, like WordPress, devs, who are coming from the standpoint of if you need functionality, you can just click in something without a whole lot of fanfare. I think that's part of who gets to be as targeting, which is like, I don't think next .js is targeting those types of people. So that's, it's even another thing to say is like, Who are these platforms? For? Right? - -117 -00:51:26,400 --> 00:52:26,640 -Scott Tolinski: Yeah. Although I, you know, I would say that that one experience that I would have liked to be better on next jazz would have been like the Apollo experience. So like, specifically getting user data available on surfer in time, I had a mess of like, almost were like circular dependencies. And I felt like very close to like, this needs that. But this needs that. And this needs this. But that needs the thing before this before it even gets going. So how am I going to get like, how I'm going to get this data and I had to like, initialize some of my code twice when like I shouldn't have and granted the cool thing about next is their examples repo is top notch, right? those examples Yeah, folder in there examples, repos. Very good. But the moment that you have to get outside of some of that stuff, I found it to be a little rough. And I would have loved for like a plugin to be like, oh, there, here's the next Apollo plugin, you install that you pass it this whatever, it's all taken care of for you, you know, granted, I don't need it, but it'd be nice. - -118 -00:52:26,700 --> 00:53:01,470 -Wes Bos: Yeah, I agree. There's Lewis, who actually he started this plugin. When I was building one of my react courses. It's called next with Apollo. And it is the plugin now to use it. And he does an awesome job. It works great. But just the there's often a disconnect between next and Apollo and you get like weird loading states or like, loading is true or false, but there's no data and then it re renders again. And there's lots of little edge cases and I would love to see like get those Apollo in and versatile in a room and be like, just make it easy my pizzas if you guys can I make this work? - -119 -00:53:01,590 --> 00:54:01,620 -Scott Tolinski: Yeah. Right? How about figure out a way to make it as easy as meteors data setup? And I'll be it'll be very Yeah, totally, next step is off. And neither of these platforms do off in my own, in my opinion here. The first to do find some way to do easy auth is going to see some big gains from that. One of the reasons why I think a lot of people really liked Meteor at first was because like, you just drop in accounts, like we're talking about how easy the image plugin and like the new Gatsby image plugin. If you want to see easy accounts, check out my author, I made a plugin for Meteor authen, spelt, and you literally import login window from accounts UI. And then you write login as a component there. You have accounts, they just work, right? You get the password reset stuff, you get a login button, you get register, you get all that stuff. And like somebody figure out the easiest way that we could get login index j. s or Gatsby, and I'll be I'll be a happy customer. That's for sure. - -120 -00:54:01,950 --> 00:54:14,670 -Wes Bos: Yeah, I think the next is not doing this because it's the job of the signal layer. Right? Yeah, the data layer. And that's Keystone and strappy have made that what you're asking for that's in Keystone strappy right now, - -121 -00:54:14,700 --> 00:54:31,500 -Scott Tolinski: but I don't like it as much. No, then no offense to Keystone and strappy. Neither of them have done it in a way that is as easy as Meteor did it. So like, okay, that's true for him did it that easily 2015? Okay, it's 2021. Can you make it that easy? Again, just make a bet. Yeah. - -122 -00:54:31,710 --> 00:55:33,540 -Wes Bos: I think the frustration of a lot of these things that we're saying is like, we want the rails of JavaScript, and we have lots of these things out there. But because the JavaScript ecosystem is bring your own 500 different things, and everything works interchangeably with everything, nothing in JavaScript is opinionated. And because of that, we have these things where everything can work together. It just takes like a little bit of configuring or a lot of bit of configuring to to get it to work. Think ecommerce and doing e commerce in Gatsby and next. With Gatsby, the options are limited to like headless shopping carts snipped cart is a big one Shopify, there's tons of them out there. But at the end of the day, if you're going to have a cart, and charge people's cards need server side code to be run, and that is either you have to fire up a server run serverless functions or pay a service in order to do it. So I honestly don't think Gatsby is a good use case for e commerce people ask me this all the time too many things on - -123 -00:55:33,540 --> 00:56:45,510 -Scott Tolinski: Gatsby e commerce. So like, I don't mean to say that isn't like you're wrong? No. But I need to say that isn't like I have a fair bit of experience there. And I have used several different ways whether it's just stripe, which changed their API on me after the tutorial is released, thank you very much stripe, and then Shopify and snip cart or anything like this. And with Gatsby, the big problem with e commerce and Gatsby is that the majority of the e commerce functionality that you're going to be doing is going to be taking place off your site. Yeah. So whether that is the cart functionality, which or you can build your own cart and submit it to Shopify or whatever, you can do that that's fine. But once you get into the shipping screen, the users like their past orders, if a user wants to check up on their order, there's a lot of things there were these platforms, you're going to need a service like snip cart, or Shopify and without those things, it's not going to be pretty because again, the user account information cannot be generated. So you're going to have to write like just about everything custom, which I guess would get you to the same point you are at with next where you do have to do everything custom anyways, but at least a lot of that can live on your site, rather than having to be an iframe on your site. - -124 -00:56:45,930 --> 00:57:01,710 -Wes Bos: Well, that's even another another good question is should you even be doing any of this stuff custom? Or should you just like, e commerce is a hard hard thing, right? And if you're getting into the weeds with e commerce, you're probably better off reaching for some sort of existing solution. - -125 -00:57:01,740 --> 00:57:43,650 -Scott Tolinski: Let me let me even plug in an existing solution that I really like is called reaction commerce. I don't know if you've seen reaction commerce used by Nola. So shout out to fella. Yeah, reaction. Commerce is a really nice, it has a 10 10,000 some stars on GitHub, and it's a really nice modern, there's a company behind it, right. But the code is on GitHub. So what's neat about this platform, I heard about them, because they are initially built on Meteor. Now they're their own custom thing. But it's a really nice modern platform compared to like this giant, monolithic Corporation, Shopify, shout out to Shopify, but I i'm not talking I'm not talking trash to Shopify by any means. But it's a little bit more of like, your own thing, rather than, you know, - -126 -00:57:44,129 --> 00:57:51,540 -Wes Bos: like, so is this. This is the like the back end for your commerce, or this is a, I'm pretty sure it's react in - -127 -00:57:51,540 --> 00:57:52,320 -Scott Tolinski: the whole thing. - -128 -00:57:53,189 --> 00:57:57,720 -Wes Bos: Okay, but like, this is not just a UI, this is actually like it does shipping in orders. And so, - -129 -00:57:57,720 --> 00:58:37,800 -Scott Tolinski: so reaction is an API, first headless commerce platform using node react and graph QL. The UI is really nice. The the plug in system is really nice. When I was initially building level up tutorials, I was building it on reaction commerce. And then I like realized, and I don't like too much custom stuff with my subscriptions to to really go for it. But now I wish I would have because they're the amount of like stuff that they do for you regarding those things, whether it is subscription orders, or shipping or whatever is like, Oh, I got a code that myself now. So I would check this one out. It's a neat platform. Pretty cool. - -130 -00:58:38,280 --> 00:59:11,070 -Wes Bos: So we'll talk about next they released a boilerplate for using next JS with commerce. And it's awesome because like it all the website runs on next j s, but the all the heavy lifting will go to any headless shopping cart solution Shopify snip cart, there's a million of them out there. And that's pretty cool. I also like another thing we're not really talking about with this e commerce is that a lot of times, especially Shopify, it's not just add to cart or whatever. It's the logistics of integrating with shipping providers. And - -131 -00:59:11,100 --> 00:59:12,630 -Scott Tolinski: there's so much there to where - -132 -00:59:12,630 --> 00:59:21,120 -Wes Bos: that product lives or if you're drop shipping or if like you have a store as well, where the product is shared between inventory and all that connections - -133 -00:59:21,120 --> 00:59:25,140 -Scott Tolinski: to all the services weighing and yeah, oh my god. - -134 -00:59:25,170 --> 01:00:19,140 -Wes Bos: Yeah. So that's why like next is saying like, and I think next is a great solution for doing e commerce because like you can, like I do it in my advanced react course you can do it entirely in on server side with next j s. And then just charge the card with stripe API's and all that you can do that and lots of cases and that would be a perfect use case for something like Scott and I. But as soon as you need to get into much more complex stuff, where you need fulfillment and whatnot, then yeah, you certainly lean on an existing solution out there. WooCommerce we talked to Let's shout them out. Scott and I are we're looking at doing syntax t shirts. Spoiler, we're gonna have some sick march for you pretty soon. We reached out on Twitter, David lindahl. Who runs this really cool active wear? What would you say this is Scott act mountain where now Colorado where he might - -135 -01:00:19,679 --> 01:00:26,670 -Scott Tolinski: be upset calling a caller right away. But it is very Colorado where it's very Patagonia where he you know that? - -136 -01:00:26,700 --> 01:00:52,620 -Wes Bos: Yeah, so he runs on on WooCommerce. Because he was saying just because of the the actual price of running WooCommerce is way less for his little side gig here. It's called Rainier watch.com if you want some, some sick shirts, so he gave us like half an hour of his time, just let us pick his brain. So we'll link up his brand here in the notes as well. I think if you're doing commerce next .js is a good solution over katzie, but certainly you can do both of them. - -137 -01:00:53,790 --> 01:01:22,260 -Scott Tolinski: There's a lot of stuff. Yeah, it's a lot of stuff. And you know, I think these both of these platforms are very good. And we will see changes and evolution over the course of this year with both of these platforms. And and I'm I'm really excited because evolution of both of these platforms means evolution and the work that we get to do. And so I'm excited about it. And hopefully a lot of great stuff comes out from both next teams, the versaille team as well as the Gatsby team. - -138 -01:01:22,710 --> 01:01:51,210 -Wes Bos: Yes. And like, again, shout out to everybody who's working on this stuff. Because like I sometimes I feel bad saying anything. I don't necessarily want to do these these like vs shows because like, Here I am talking running my mouth into a microphone where there's like actual developers, like working on the stuff day in and day out. So I appreciate all the work that everybody does on this stuff, because they're both two wicked platforms. And I love to use both of them. - -139 -01:01:51,450 --> 01:02:18,980 -Scott Tolinski: Yeah, likewise. Yeah. And I would, I would definitely stress it like don't take any bit of criticism that was there I ever have is as being like criticism of the work involved. Because I think both of us know firsthand, like, what that work looks like and how hard a lot of these problems are. So yeah, I would, I would certainly not want our critique in any regards to be used in that way. But shout out to all of the the developers working on these really tough problems. - -140 -01:02:19,500 --> 01:03:11,100 -Wes Bos: Alright, I think that's it, let's move into some sick pics, I am going to sick pick another kitchen tool that I absolutely love. And that is deli containers. So a deli container is basically if you get takeout from like a fall place or something like that you get this like plastic container with the plastic lid and it's clear. So I've been watching a lot of like food YouTube lately, and over the last years I've seen bone appetit, they use them for everything. You can get them in three different sizes, the recyclable the lids, and the bottoms are two different kinds. And I made sure before I bought them that they were recyclable and my where I live, because I know I'm gonna get some hate for recommending a plastic piece of plastic. But these things are the best. I took all my spices and I switch them over to using deli containers - -141 -01:03:11,550 --> 01:03:13,020 -Unknown: or spices. Yeah, I saw that man - -142 -01:03:13,020 --> 01:04:04,890 -Wes Bos: it just life changer because I can like see everything they stack really nicely. They're really durable, you can microwave them, you can throw them in the dishwasher. It's just just awesome. Like we started getting them. It's sort of like a replacement for for Tupperware. And I'm almost on the bridge we have like this like glass lock, where it's like a plastic lid and glass bottom right now. And I like it. But there's something about just these delicate handers and how how flexible they are for for storing leftovers for storing spices for storing, like pasta, you open up a bag of pasta, you can just throw it into one of these and then when you use the big one, and then once the leftovers get below a point, you throw it into a smaller one and you you can keep your fridge nice and tidy like that. So pretty big game changer for me in terms of cooking and organizing the kitchens called deli containers. - -143 -01:04:05,040 --> 01:04:16,710 -Scott Tolinski: Yeah, you know, the biggest problem we have with our spices is that they're in a lazy susan that's like at trial level and we have like a child lock on there. But the Oh yeah, ripped it off. So like - -144 -01:04:18,030 --> 01:04:18,980 -Wes Bos: drive me nuts. - -145 -01:04:19,290 --> 01:04:50,850 -Scott Tolinski: They do the amount of cinnamon that's been poured all over our floor. The Brooklyn just buys spice goes everywhere. That's been a huge problem in our household lately. I'm going to sick pick the this is a tool that I used several times and it is like okay, I had a prefaces we're in an old house old drains all this stuff our drains clogged up all the time. And I was reading about how bad drainage is for your drains. And I really like the ease of a solution like just pouring drainage into the drain but that's really bad. - -146 -01:04:51,570 --> 01:04:54,480 -Wes Bos: If you have a septic tank either you can like kill all the bacteria. - -147 -01:04:54,810 --> 01:05:55,380 -Scott Tolinski: Yeah, you can. You can do bad stuff with drain. Oh, so I've moved entirely to this thing called the deep Cobra drain Zipit and we've got one of these oh yeah gusting it's disgusting. It's disgusting to use because you're shoving it down a drain what it is it's like a little like it's got like little hooks on it's a long little zipper plastic thing. So it's a decently long piece of yellow plastic with these little hooks on the end and when you do is just shove it down the drain and then you pull it out and when you pull it out along comes everything that's stuck in your drain and I like I could I could fix for the most part all of our drains in about like five minutes on like just total throughout the whole off just go and just zip it on each of the drains and they're just instantly unclogged. So this thing is fantastic. It's it's $7 so like to have something around the house that is non chemical it's not going to hurt your pipes is going to be superduper easy and can get anything out. I love this Cobra drains it and I used to - -148 -01:05:57,240 --> 01:06:06,390 -Wes Bos: I remember like our our shower was draining like really slowly slow. And I never knew that the drain cover came off and we had had this - -149 -01:06:06,479 --> 01:06:08,790 -Scott Tolinski: shower for I can't figure mine off. - -150 -01:06:08,850 --> 01:06:31,890 -Wes Bos: I still can't figure it out. They all come off like they all have to be chopsticks in it. And turn it is threaded. It's probably yours is threaded. Or sometimes there's little it's just us gotta yank it and it'll pop out. Cuz these have little tabs anyways, yeah, put it down there. It's disgusting. It like takes up an entire like hairball says, you know, like - -151 -01:06:31,890 --> 01:06:35,880 -Unknown: so gross when your smells terrible. Yeah. - -152 -01:06:36,510 --> 01:06:44,370 -Wes Bos: Good tool. I think mine was just a couple bucks at Home Depot. Definitely. If you see one, or this is definitely one of those like buy it before you need it tools. - -153 -01:06:45,030 --> 01:06:51,120 -Scott Tolinski: Oh, yeah. Oh, yeah. Definitely buy before you need it. And in that like longer, the better in my mind. - -154 -01:06:51,150 --> 01:07:10,730 -Wes Bos: Yeah, that's that's a good tip. Some shameless plugs. I'm gonna shamelessly plug. I'm gonna go agnostic on framework. Today, I have a Master gatsby.com course which is built in Gatsby. And I have a advanced react.com, which uses next j s. And - -155 -01:07:10,770 --> 01:08:55,430 -Scott Tolinski: that one is just about to be updated. Let's see, this is a month out. It might even be released by the time you're listening to this. So check it out at Advanced react.com. Using Keystone as the back end and Keystone little tip. Nobody knows this yet. But by the time you're listening to this, you well as Keystone is rewriting their back end. Again, on next j s. The whole UI for editing in the CMS is going to be index j s, which is pretty cool. Neat. So I'm going to shamelessly plug in my Black Friday sale along with the latest course as of the time of recording this. For those who don't know, I release a new course every single month. The most recent one is animating svelte, and it is just showing you just how easy it is to build custom directives to toss on stuff with like, you got to see some of the stuff that I'm doing an animating spelt like for instance, I built my own drag plugin. And to make anything draggable all you do is you say use colon drag on anything. And then it can drag in any dimensions like toss it on the model, oh, you can just drag it around. Oh, you want to have actual fire. That's amazing. And the action can fire when you hit a certain threshold. And then it's so super easy. You attach it to custom JavaScript events and all sorts of neat stuff. And that's all in the course if you want to learn how to do that kind of thing, check out level up tutorials att.com forward slash pro sign up for the year and save 50% right now only right now at the time of when you're getting this because the sale is going to be over very, very soon by the time you're listening to this so head on over to level up tutorials.com get that course along with 12 other additional courses over the course of the year not to mention the entire back catalogue, which includes a mammoth amount of things at this point. So check it out, level up tutorials.com forward slash Pro. - -156 -01:08:55,520 --> 01:08:56,039 -Unknown: Alright, - -157 -01:08:56,039 --> 01:09:07,829 -Wes Bos: that wasn't long a show in the history of ever but we needed it to be so we could get through all of the different pros and cons. Hopefully you enjoyed that one and we will catch you on Monday word peace please - -158 -01:09:09,659 --> 01:09:19,409 -Scott Tolinski: head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax309.srt b/transcripts/Syntax309.srt deleted file mode 100644 index 208cdb437..000000000 --- a/transcripts/Syntax309.srt +++ /dev/null @@ -1,224 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,580 -Monday Open wide. - -3 -00:00:02,580 --> 00:00:07,620 -Get ready to stuff your face with JavaScript CSS loadmodule - -4 -00:00:07,620 --> 00:00:09,060 -BBQ Tip Get - -5 -00:00:09,060 --> 00:00:19,460 -workflow breakdancing, soft skill web development hasty, as crazy as tasty as web development treats coming in hot here is Sarah - -6 -00:00:19,460 --> 00:00:21,300 -CUDA, Bob, and Scott - -7 -00:00:23,579 --> 00:00:24,149 -Tolinksi. - -8 -00:00:26,760 --> 00:00:56,070 -Scott Tolinski: Welcome to syntax. And this Monday tasty treat, we are going to be doing a rundown of our 300th episode talking about the tech that we use to make it happen. And some of the behind the scenes stuff that allowed us to do what we did, which was invite you on to talk to us in the middle of a live stream and how we organize that now Who are we? Well, my name is Gus winsky. And I'm a developer from Denver, Colorado and with me, as always is the West boss. Hey, - -9 -00:00:56,670 --> 00:00:58,950 -Wes. What's up? Dude? - -10 -00:00:59,700 --> 00:01:11,370 -Wes Bos: I'm very I just spent the last couple days working on the transcripts for this Yes. And every, every single time I say something like, Hey, I'm like, oh man that transcripts gonna goof that up with - -11 -00:01:13,860 --> 00:02:39,630 -Scott Tolinski: you. Yeah, we're gonna have to start tweaking how we talk giving a little bit more gap, I'm gonna start speaking with a little bit more Scott flavor to try to try to steer it in that era. That's good. Well, you were working on a neat, awesome feature for this new syntax website, it might have been a good use case for you to institute something like Log Rocket, which is one of our sponsors today, where you could have seen if the transcripts were breaking when somebody tried to load the page, because what Log Rocket does is it gives you a session replay of your errors and exceptions. This is a really cool service that has been sponsoring syntax for a long time now. And you'll want to want to check out Log Rocket comm forward slash syntax to check it out, you'll get 14 days for free. And what you'll see is a session replay, which is a scrubbable video with the network requests on the error logs and anything you could possibly want to help you discover any bugs you have when you're rolling out a new feature. I really love this tool. So thank you so much for Log Rocket for sponsoring syntax. All right. So before we get into maybe what we used, we should maybe do a quick rundown of the things that we tried first. And I don't want to say this came together at the last second. But we certainly did not uncover what would be the final workflow for this 300 episode until just about the day before, I would say we had tried and talked about a bunch of different stuff. So do we want to start there? - -12 -00:02:39,750 --> 00:04:24,000 -Wes Bos: I asked on Twitter like, hey, like, we want to be able to record the broadcast, but also have people like call in or zoom in or something like that. So I went on Twitter, and I asked like what are options out there. And it's kind of interesting. Right now we're seeing a lot of startups and new companies that are the zoom for X, Y and Z. Because like even though zoom is good, it doesn't like work for a lot of specific use cases like for conferences and things like that, right. So the most common suggestion we had was use zoom breakout rooms. So you're allowed to enable breakout rooms on zoom and you can jump into other ones and without perfect like everybody's like, yeah, that's the best solution. But when Scott and I tried it, it's just gotten I and when we both went to the breakout room, there was no way to go back into the main room. Like we both left. And there was no way to like bring people in and like know who was in the other one, you couldn't be in two rooms at once. So it just wasn't an option unless we're to have like a third person who was like full time in the room and then sending people over as we needed them. It actually didn't work out at all for us so we scrapped that one as well. Other people suggested hopping which is super expensive stream yard seem to be another good solution. But we ended up just I think I tried like three or four of them which is sucks because now I'm part of all these like onboarding emails. Did you get our last email? Yeah. Yeah, learn how blah blah blah makes you money. You know, I hate those. Yeah, onboarding sequences anyways, so none of those worked. And we ended up just going with discord and using discord chat. So you want to jump into how you did that? - -13 -00:04:24,240 --> 00:05:45,090 -Scott Tolinski: Yeah, this was fun because I've been on discord for a little while for the level up tutorials discord that we originally had on Slack, but I always kind of got annoyed that you know, at the time for I mean, I think they have this now where you can just sign up and login. But to do user just to allow people to create their own account by default in discord was the default behavior rather than with slack. I had to fire up a app on Heroku to have a login form that was like inviting people it's just so dumb that that was the way you had to do it on slack before but so we we've been on discord for a little bit and the discord allows you to do a video or audio and video rooms where you can do video chats. And this is actually how we do all of our meetings via discord, we just pop into our level of team room that we all have permissions for. And we just start chatting in there via video, we can screen share, and whatever. So we thought this might be a decent option because we could have a room that we could control the access to, right, you have an AV room and then based on a user role in discord, you can give people access to being able to join this room. Therefore, you could say, all right, so and so is now live, now they get the live role, they can then see access to that room, they can click it and join it and essentially call in without having to really do too much other than joining the chat room. So that was really the right workflow to me. - -14 -00:05:45,420 --> 00:06:15,090 -Wes Bos: Yeah, it was it was pretty seamless. And even like, I thought it was really neat UI when I would just click on your your name like the Convo that we had just between us, and then it would immediately flip on the mics. And like there was no calling or accept or Oh, yeah, add to like, the thing that drives me. nuts about zoom is I will call Scott, I'll press the call button. And then it will it'll do a pop up that says, Do you want to allow Scott? And I'm like, of course, I would like to let Scott All right. - -15 -00:06:15,090 --> 00:06:26,700 -Scott Tolinski: Yeah. Yeah. So zoom is is frustrating that way. And that could even be a future way that we end up recording syntax. Although zoom does have some nice features where it has like a backup recording. And - -16 -00:06:26,730 --> 00:07:07,890 -Wes Bos: yeah, the backup recording is is pretty pretty much for syntax. But yeah, it's it was a really slick experience. So while we were doing also, we got tons of questions about like slack versus Discord. And obviously discord is way better, especially for communities. I think like slack is sort of like turned its back on communities because I don't think there's any way for them to make a community thing that works for 20,000 people but also maintain their very lucrative teams per per person in a team. So I'm still on slack. A lot of people ask me like, why don't you move to Discord. And I have 50,000 people in my slack room and I can't just like switch over - -17 -00:07:07,920 --> 00:07:09,510 -Scott Tolinski: just pick up and walk over to - -18 -00:07:10,530 --> 00:08:08,430 -Wes Bos: pick up and walk over. And like that's like a significant asset to me as well as having these people. And there's no way everybody would move over. So you would lose a lot of people that way. But like the UI, everything about about discord is is much better. Which which is pretty cool. I'm a big fan of it. Especially like all the the video calling whatnot. Just for like my sake, I'm not going to move from slack to discord because that's just chat to chat, I'm holding out for something that's like a mix of like the real tightness that you get with a chat, but also the longevity that you get with a forum. And I also have like years of backlog in slack. So my messages Don't go away immediately. So that's not not an issue for me. That's the sort of the the downside to a lot of these big slack communities. But yeah, I wish that discord would make some sort of like, chat based form software as well. Because like I was really hopeful for spectrum. - -19 -00:08:08,609 --> 00:08:10,350 -Unknown: Yeah. Which went nowhere. - -20 -00:08:10,500 --> 00:08:25,020 -Wes Bos: That got bought by Google and sorta it sort of flops. I don't think they're working on Charlie anymore. Yeah, they got Microsoft did. No, it was bought by Microsoft. It was bought by GitHub, which got bought by Microsoft said Yeah, same thing, I guess. Yeah. Well, I - -21 -00:08:25,080 --> 00:08:27,000 -Scott Tolinski: mean, you said it got bought by Google, it was just clear. - -22 -00:08:27,020 --> 00:08:41,520 -Wes Bos: Did I? Oh, yeah. Sorry, not Google. No, no, by GitHub, different company, different company. So that's this question I get all the time when I'm over discord, because there's not it's not worth it for me just yet, but definitely like it. I know. Yeah, spectrum - -23 -00:08:41,520 --> 00:08:45,600 -Scott Tolinski: is a classic example of why you should wait a little bit because people were like, everybody - -24 -00:08:45,600 --> 00:08:47,420 -Wes Bos: gonna get on spectrum - -25 -00:08:47,420 --> 00:08:58,670 -Scott Tolinski: and everybody got spectrum. And it probably like no shade on spectrum here. But like, whenever I use spectrum, I feel like it hardly functions nowadays. Like I have to refresh the page several times and it's very frustrating for me. - -26 -00:08:59,010 --> 00:09:37,830 -Wes Bos: The other thing I get from and this isn't a maybe it maybe it's part of the tool, but the other thing I get from spectrum when I post something, I just get this feeling that nobody's gonna reply. It's you know, diva. Yeah, yeah, yeah, it's sort of like filling out a contact form on like a sketchy business website. You're not gonna ever gonna get this feeling from it, which sucks. And when you jump into a chat room, you can see that there's people there and that's why I like the the real time pneus of chat but I also like the longevity of threads on on something like spectrum or GitHub discussions. That one's looking pretty good for next year. So a big fan of that lately. Yeah, - -27 -00:09:37,830 --> 00:12:31,890 -Scott Tolinski: I think another big thing with slack verse discord is that discord by default you are subscribed to every room or slack you have to like hunt for the rooms you want to subscribe to. Yeah, and in Discord. It's like here are all of the rooms and you can participate in the ones you want to participate in. And that to me, it feels nice. I like the folders and everything for rooms. I know you can do that in Slack, but discord for me feels like they have way more program IQ capabilities in terms of like, oh, welcome to this room, you know, click this emoji to get access to this showing that you've read the rules, you know. So like, yeah, like that, to me is very interesting, super good. It's much more interesting than like, slack bots, because like all we ever did with slack bots, to be honest, was one of the guys on my team wrote a macho man, Randy Savage, slack bot. And like, he was like, programmed to do several things. But you would say elbow drop, and then somebody's name, then Randy Savage would pop in with this little icon, it'd be like, Randy Savage picks up as stilinski and slams him through the table. And like, that's all he does. Like, that's what we do is like, it's like fun, but it's not exactly that useful. Okay, so next up is the live streaming setup. What do we do for live streaming? Now I don't love OBS is a open broadcasting software, I believe is what it's called. It's a, it's an open source project. But I use a version, which is like a paid version of OBS, which has a bunch more features called OBS stream labs. And it recently became a Mac App, it used to only be PC. I use this because it includes a bunch of templates, it includes a bunch of extra features. But the big feature for me that it includes is like a really easy way to stream to multiple sources at once. I think it was like, up to, I don't know how many, I think up to three, because we were hitting our limit pretty much, you maybe can either do three or four. Either way, this allowed us to stream to a whole bunch of different places at once. As well as, sort of have a waiting room where people could join in had like a looping animation, which we'll talk a little bit more about how I made, we had like a looping animation that could do a countdown clock, the countdown clock was made in OBS. Once that countdown clock hit zero, we went live and, you know, OBS is one of those software's that you really have to spend some time with. Because it's, it's like missing so many basic pieces of normal functionality that you're used to in normal web apps, or normal apps in general. So like, yeah, if I want to click something, or if I want to have a source, fit the output screen size, you have to do all of that you have to jump through a bunch of hoops. Yes, you could do transform or whatever. But you can't even zoom out of the canvas. So let's say like, like in figma, you zoom out of the canvas to shift handles and whatever to make things the right way. OBS. If you drag your handles beyond the canvas, you're just you have to like start over or position in manually because you cannot zoom out of the canvas. That drives me nuts. - -28 -00:12:32,100 --> 00:12:44,520 -Wes Bos: Yeah, it's it's kind of like the the VLC of streaming like it's it's free. It's open source it under the hood, it does everything. But yeah, it's just the UI layer is kind of where - -29 -00:12:44,730 --> 00:13:36,060 -Scott Tolinski: Yes, ain't even the pant fancy paid one is, is just like a skin on top of it. So it's not great. And people who really like OBS mean they like it. And I have such a hard time with that because to me, it feels like such a half baked software it is open source. So I mean, it's okay. So one last bit, we did a screen capture. So I did a breakout of the discord window, the the video chat, I broke that out into its own window on my desktop. And then instead of telling OBS to use that output, I told the OBS to do a screen capture why, for some reason, both on zoom and OBS. The output was really choppy when you chose like the native video output rather than doing a screen recording. It was like you lost major framerate issues. So I chose to do it as a screen capture. And that seemed to work just fine. - -30 -00:13:36,180 --> 00:14:14,460 -Wes Bos: That's another thing about discord is the output the little rounded corners, nice little bit of padding. It just looks so much nicer than zoom where it's just squares, borders, big zoom logo, bottom right hand corner. So yeah, I thought that actually looked really nice. And luckily you have like super good internet that you're able to push it because then we took that that feed and then you were pushing it from your computer to my YouTube live stream your YouTube live stream and into mux. Yes, and and Twitch or just just max. - -31 -00:14:14,520 --> 00:14:23,250 -Scott Tolinski: Oh, yeah. And Twitch. So no, we had four streams going I have three sources, but no, we had four sources going. Which is uh, yeah, that's pretty wild. - -32 -00:14:23,310 --> 00:15:00,750 -Wes Bos: It worked. Well, it seems silly to like double up on YouTube, but both Scott and I had there was like, pretty active chatroom in on YouTube for both of those. And then we also had the chatroom in, in discord obviously, which is kind of interesting because like we said in the description and in the chat, like join the discord chat room, but there was just like, probably a couple dozen people in both YouTube chats. They just decided that that's where they were going to talk about to talk about it, which was good because like, that's my big thing that I think of is like don't push people to different platforms like just meet them meet them where they All right. - -33 -00:15:01,170 --> 00:18:51,210 -Scott Tolinski: Yeah. And that's actually one of the things that stream labs OBS does really well. So one of the neat features that stream labs has is that allows you to see all of the chats for both YouTube and Twitch as an aggregate. And like, then you don't have to have all those windows open, you can see all the chats. And if you need to respond to something, you can do it there, too. So we push to mcse. I'll talk a little bit about the mux setup. So how did we get our mux set up which was@syntax.fm forward slash live, we had a video player on the live site of the real life page of the website, this was really easy to build. So if you are interested in doing your own live streaming on your own platform, and not having it be on YouTube, or something like that, this lives on mugs, and we actually I don't know if you know this West, but it actually did a live DVR recording of it as well as we did it. So this video doesn't just exist on on YouTube permanently. It exists on Macs as well, in case we ever wanted. So mcse.com this the day are not sponsoring the show, I use them for my video hosting myself. And what how do we do this? Well, you can do this programmatically, but I created a new live stream via their UI, because it was just easy to click a new live stream button rather than try to write some code to do it, right. And that basically gives you an address and a key a stream key. So that key is private, you just paste basically paste in that address with your key into stream labs. And that's a video source now. And that's just my mcse source. And the next basically, we had a h l s m a three u eight stream address from mux, which is the we did a whole episode on video format. So go back and listen to that episode, if you want to learn a little bit more about that. But HLS is an interesting format. It's basically what any sort of live streaming is done with nowadays. And the problem with that is is that it's not compatible in every browser. So I found this really neat react hyphen HLS hyphen player, that is just going to play any HLS file on any browser polyfills. So you don't have to worry about it and just works right. So I basically just dropped in the HLS address into this react HLS player as if it was a standard video file. And that would just do its thing. And so that's really as easy as as when we clicked stream live or whatever the player allowed people to play it and watch live and it was basically just like a straight up video file. Next is the looping intro introductory video. So like when you were to arrive early, I think we hit this going like a half an hour early there was like a countdown clock. And there was a looping video with some music. So I made this looping video in principle for Mac, which is a prototyping software, but I use it to do all of my video animations. It's kind of like After Effects light in some sort of ways. So I basically I created the the looping animation frame in figma. Then I told principal to import it. Then I made a looping animation. And then I export it as a video in mp4. And then I told OBS to just loop that mp4 is one of the sources. I also had some music underneath it, which was a song I made called Lotus frog 64. I made it a couple years ago. And I think if it really really neat, it was kind of digitally, that kind of thing. So that just that just had it going for whatever 30 minutes before we started. And the last bit of this was the countdown clock which I did mention briefly the countdown clock was interesting because it was basically just a stream labs plugin that somebody else already made for me and I was able to click Add countdown clock I gave it a time to Countdown to and then I changed the font and dragged it wherever and that was that's how easy it was to create the countdown clock I didn't have to do anything fancy. And then somebody else already wrote this I even considered writing my own script at one point to do the countdown clock and it's just like that's dumb. Everybody's got a countdown clock like why would I? Why would I do that myself so - -34 -00:18:52,140 --> 00:19:37,170 -Wes Bos: yeah, next one we have here is just recording natural audio. So usually what Scott and I will do for the podcast is we both record our audio locally. That way it doesn't anytime the internet glitches out you don't get that little weird sound that is and also on zoom. Specifically, you'll you'll often hear people's audio. Like it drives me crazy when I listen to a podcast you can clearly tell that the audio is recorded on zoom because it's low bit rate I know there's just like a tinny robotic sound to it. And zoom also tries to add a bunch of like noise cancelling to it you can tell because when when someone talks the fall off on the audio sort of like the last the last like syllable of what they're saying sort of goes down - -35 -00:19:37,500 --> 00:19:39,350 -Unknown: like crunches out Yeah, yeah, - -36 -00:19:39,350 --> 00:19:43,950 -Wes Bos: don't don't like that. This is I'm awful at describing how audio stuff works. It just sounds awful. That like - -37 -00:19:43,950 --> 00:19:47,570 -Scott Tolinski: hollowness and sounding when you hear like an audio that sounds like that. - -38 -00:19:47,730 --> 00:19:48,300 -Wes Bos: It's called - -39 -00:19:48,300 --> 00:20:16,980 -Scott Tolinski: low bitrate. And it's basically like every you could think of like audio, digital audio, and when you have analog audio, it's a wave, right? Yeah, but in digital it's it's like vertical chunks of data. Vertical chunks of data to make up that wave. And the low bit rate is how many of those chunks exist. So if you chop out some of those chunks, then it feels like there's there, it's more hollow, there's not as much information there for it to get that smooth. To - -40 -00:20:17,330 --> 00:21:41,910 -Wes Bos: make sense. And so what I ended up doing is because God had such a elaborate setup on his end, he couldn't just get a clean stream of his own audio. And then also, we needed to record the guests as well, which their audio was only on Discord. So what we ended up doing is I recorded all of the audio on my computer. So I have my own microphone being piped into one on one recording. And then I took the output from discord, which was Scott and the guest. And that I pipe that into what is that loopback. loopback is an interface that allows you to create virtual audio inputs and outputs. So I took Scott the output of discord and put it in its own, like microphone, I'm using air quotes here, and then I recorded that straight from it. And luckily, because Scott's upload is so good, and my download is pretty good, it sounded great. And we also could record the guests as well. So the only downside there was that Scott and the guests were on the same track, which can be a little bit harder for our editor shout out to our editor who had to edit that that behemoth of an episode, it was like two and a half hours of raw Yes, audio. And that was it. So it worked worked really well. And then we also have the YouTube stream and the mcse thing just in case, we always like to record a backup, because stuff happens and a few times we've had to use our backup. - -41 -00:21:41,970 --> 00:22:44,940 -Scott Tolinski: Yeah, one thing I do want to say here is that loopback my wants to use future tech kind of bit me in the but because I've been on Big Sur beta for a while, like for a long time. And it's worked pretty fine. But one of the software that doesn't work for it is loopback, which just so happened to be like the thing that does audio routing for Mac OS and shoot. And so for, I think up until the actual stream, I was panicking that I wasn't going to be able to get the audio writing on my end working correctly. But I ended up using an open source tool called Black Hole. So Google black hole, Mac OS, and it wasn't easy to set up and it wasn't necessarily easy to make sure I got it right. But once I got it right, it just worked and basically allows you to throw all of your audio sources and inputs into a quote unquote black hole and then pull them out of a black hole later on somewhere else doesn't have any sort of nice interface like loopback but it saved my butt because it worked on Big Sur while loopback was getting their stuff together. I think they do have a Mac OS big server version now. But at the time they didn't which is you know convenient for us. - -42 -00:22:45,269 --> 00:23:35,670 -Wes Bos: I think that's it so what seemed like a very flip on your webcam and start going ended up being a big like wow, this is not necessarily a a thing, right? Where you want to bring people on and screen them and record the audio and the video and stream at all. So like there's definitely still I would say like a space for this type of thing. I know there's a lot of audio apps for podcast recording I think it'd be really cool to see something like this also for video that allowed you to have chat and bring people on that was it's kind of interesting because at the very high level it seems like there's tons of options and tons of really easy ways to do it. But with like a lot of things once you get into the nitty gritty of it you realize like oh wow this is not as fleshed out as as we had had thought it would be - -43 -00:23:36,060 --> 00:24:22,020 -Scott Tolinski: it just so happens that when you have like very specific wants and needs that like you have to find some some somebody else who has those very other specific wants and needs already and who made that software and it's just not always there when you're expecting it so yeah, I thought this was a lot of fun and it was very stressful for me because again so much routing through my computer so I mean there was there was a lot routing through both of our computers but everything worked and it was really pretty It was really pretty neat. I was really interested and excited to see just how easy it was to get our own custom live streaming setup going with monks and our own website. It was very very easy and that gives me a lot of really interesting ideas for stuff that I could do Did you know I bought the domain level up dot live that's a good domain huh? - -44 -00:24:22,020 --> 00:24:23,670 -Wes Bos: Yeah, yeah, that's really good. - -45 -00:24:23,759 --> 00:24:26,400 -Scott Tolinski: Not even level up tuts level up dot live I got that. I like - -46 -00:24:26,400 --> 00:24:41,070 -Wes Bos: that. That's good. Yeah, yeah. A lot of people said they loved it, they they would love to do it again. It was really cool to have like people from the audience just jump on. Surprising a lot of people had really good microphone setup. So the audio and video was very good. - -47 -00:24:42,060 --> 00:24:59,610 -Scott Tolinski: I know if we would have done this before. COVID I don't know if that would have necessarily been the same case. It's like seems like everybody got a neat setup. Not enough that not to say that the people who called in did for that because I know a lot of a lot of people who called in have their own YouTube stuff and whatever but it is fun. Everybody had a really neat setup and it all worked really well. - -48 -00:25:00,000 --> 00:25:04,680 -Wes Bos: We definitely should do it again. Maybe for Episode 350 food. - -49 -00:25:04,710 --> 00:25:05,220 -Unknown: Yeah. - -50 -00:25:05,220 --> 00:25:07,230 -350 like that. All right, let's - -51 -00:25:07,230 --> 00:25:09,600 -Wes Bos: plan that. 350 that should be - -52 -00:25:10,440 --> 00:25:11,070 -Scott Tolinski: next week. I - -53 -00:25:11,070 --> 00:25:16,350 -Wes Bos: think it's like next week. Yeah, that's like June or so. Alright, that's it. Anything else to add Scott? - -54 -00:25:16,350 --> 00:25:17,160 -Scott Tolinski: Nope. - -55 -00:25:17,160 --> 00:25:20,880 -Wes Bos: All right. Thanks for tuning in and we'll catch you on Wednesday. Please - -56 -00:25:23,280 --> 00:25:33,060 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax31.srt b/transcripts/Syntax31.srt deleted file mode 100644 index aebdcaa56..000000000 --- a/transcripts/Syntax31.srt +++ /dev/null @@ -1,676 +0,0 @@ -1 -00:00:01,290 --> 00:00:12,180 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to linsky and West boss. Okay, - -2 -00:00:12,330 --> 00:00:24,360 -Wes Bos: welcome to syntax. This is the show where we talk about tasty treats and web development. And with me is Scott Tolinksi. Hi, Scott, how you doing today? - -3 -00:00:24,360 --> 00:00:26,880 -Scott Tolinski: I'm doing good. How are you? - -4 -00:00:26,970 --> 00:01:23,700 -Wes Bos: Good, I'm doing pretty good, pretty good. Today we're gonna talk about what are we talking about this is gonna be like the, we call this the totally not coding show, where we're just gonna talk about ourselves and things that's going on in our life and some hobbies that we have. So we're kind of gonna break it down into different hobbies that we have and sort of explain like, why we're into them. Different YouTube channels we watch, I always find that interesting to see like, what do what noncoding things you actually watch online? And what are you working on personally right now. So like, what are you sort of trying to tackle and improve in our life. So break it down into those three things, and maybe we'll get some some nice, nice content out of that cheap, cheap, cheap, we've got this super cheap, cheap, we got this soundboard sorry, to those 15% of you who hate it, we'll try to tone it down a little bit. But we got some nice new sounds on it, which is I was pretty excited about we had - -5 -00:01:23,700 --> 00:01:27,000 -Scott Tolinski: a hard time starting this podcast because we were just playing with the sound - -6 -00:01:32,640 --> 00:02:10,740 -Wes Bos: blazon. Alright, we'll stop fooling around. Now this episode is sponsored by fresh books, fresh books, cloud accounting software, especially as tax time is coming up, it's going to be something that you need to be able to run your business into manage your incoming money and your outgoing expenses and all that good stuff. So I'll talk a little bit more about them partway through the show. So let's say let's kick it off, I guess we'll chat with Scott about we'll talk about I will go back and forth between different hobbies that we might have in we both have a couple different noncoding hobbies. And let's hear from Scott. What years is the first one? Yeah, yeah, so - -7 -00:02:10,740 --> 00:04:30,720 -Scott Tolinski: I get some, the probably the biggest hobby I've had in my recent life would be dancing. So if you don't know if you haven't heard from any of these episodes, I've been breakdancer for a long time B boy for those in the know. But this is like basically something I've been doing since high school I saw like a music video was the crystal methods name of the game music video where it was like a guy with a giant nose, breakdancing. And I was just like, Ah, this is just really cool. I have to learn this. So I started basically sneaking into the dance building at the University of Michigan. Why because there was a club that taught breakdancing at the University of Michigan, even though I was in high school, so I didn't have access to the recreation building so that I couldn't get in right so they do this thing where the where the somebody would distract the guy at the door, somebody else would pop open the exit door and then I would run in the exit door and then we'd all run down the stairs really quickly because the guy at the security counter couldn't catch us he couldn't leave his post. So that's how I would sneak into this place. Week after week as these guys didn't even know me and they decided like they wanted to just help me sneak into this place you know for fun so so that's how I started picking it up and I just started going to practice there eventually went to school and became part of the club eventually became the president of the club and just submit breaking forever and ever and ever and ever. And then at first it was just like hey, this is cool. I want to learn some cool tricks I want to do some cool stuff. It wasn't a good dancer at all I'm terrible dancer. And even for a long time in in the scheme of things I've been a terrible dancer was never like my role. Usually you enter like a competition which are called battles. There's like a bracket right usually maybe like 50 teams enter and then they'll break it into like a top 16 and then it'll just be like a straight bracket you go and you face the the one one crew and then you go all the way to the finals and the winner of that wins some sort of prize or trophy or whatever. So my role in the group was always to be the guy that came out and did the spins right? So that was like my my thing was movie The more the gymnastic stuff so we had a guy that was like our flavor guy he would come out and just do some some fresh poses and stuff like that he was a good dancer. - -8 -00:04:30,769 --> 00:04:43,170 -Wes Bos: Is that where you like kind of like I'm I'm I'm coming at this from like seeing a couple movies is that where you kind of go on your head and you put your you put your legs in weird situations and you hold it there for a bit. - -9 -00:04:43,199 --> 00:05:06,389 -Scott Tolinski: No this this guy is like, he's more like he comes out he's he's dancing really like he's a really good dancer. And he's more or less like posing but like not upside down. We have another guy who's like this Really strong dude. And his sort of role was to be the guy who did the upside down for example. Okay, - -10 -00:05:06,419 --> 00:05:10,980 -Wes Bos: so that's not flavor then so flavor just just closing with your feet on the ground - -11 -00:05:11,009 --> 00:06:43,800 -Scott Tolinski: flavors more like style. Okay, some people like would say it's like I don't know your it's just like it's hard to express because braking is so interesting there there's so many different capacities in it. There's this whole the musical there's there's the whole flavor component where you have to be. Yeah, you have to be like you have to have style is the best sort of way to describe it. So there's the style component, the musicality component. Then there's also the acrobatic component, the gymnastic stuff. And then there's the, the creativity involved. And then there's the strength component and stuff like that. So we had guys who would do all these different things, and it was primarily my role to come out and just to start doing like some of the crazier spins and stuff like that. So that's always been been my role until recently and I got a concussion in 2012 from breaking, throwing some some tough stuff on a some tile floor I should not have been throwing tough stuff on got a little bit of head bounces, it was not so good. And since then, I've been I've been focusing more on the just having fun and working on the musicality and, and that sort of thing. So so my, my career in dance now is like, just purely to go out there and dance and have fun, and just to experience the music, more artistic side of things. So I've been breaking a really long time, right? So we we've, uh, you can find various clips of me on YouTube and stuff like that. Some notable performances, I guess you could say is that we did a halftime show for the lions Thanksgiving halftime - -12 -00:06:43,800 --> 00:06:45,209 -Wes Bos: Super Bowl. - -13 -00:06:45,209 --> 00:06:53,399 -Scott Tolinski: No, not the Super Bowl. Yeah, just the Thanksgiving Day thing it was. I forget who it was. We backed up some popstar but we didn't. We didn't - -14 -00:06:53,399 --> 00:06:54,720 -Wes Bos: realize that Justin Timberlake. - -15 -00:06:55,500 --> 00:06:56,850 -Scott Tolinski: It was not Justin Timberlake. - -16 -00:06:56,940 --> 00:06:58,290 -Wes Bos: Okay. You're sure? - -17 -00:06:58,560 --> 00:07:04,980 -Scott Tolinski: Yes. He was. He was like he was like a one hit wonder guy. I forget who it was. But Shaggy. - -18 -00:07:05,009 --> 00:07:09,240 -Wes Bos: Maybe you're more shaky, or was back. He's back. He's back. She didn't - -19 -00:07:10,019 --> 00:07:12,329 -Unknown: know he didn't bring this up knowing that he's back. - -20 -00:07:12,389 --> 00:07:17,490 -Wes Bos: No, I didn't I just thinking of the old days when shaggy was the thing? Dude, - -21 -00:07:17,490 --> 00:07:29,610 -Scott Tolinski: he's got a he's got a new hit with sting. There's a shaggy instincts. Oh, shit, you know, it is actually really good. I'm confused. I'm very confused. - -22 -00:07:32,279 --> 00:07:33,269 -Unknown: But yes, me. - -23 -00:07:33,300 --> 00:07:49,199 -Scott Tolinski: Yes. Did halftime shows for the pistons and stuff like that? Oh, yeah, we did traveled all around the the US entering competitions. And, you know, I have a giant check in my office that I won from one of those competitions and really a dream of mine to win a giant check. So - -24 -00:07:49,649 --> 00:08:01,230 -Wes Bos: amazing. Yeah, that's a left Did you have you ever like just like met somebody in the streets? And instead of fighting, you just broke? it? Is that a thing? You do broke against somebody? Or do you brake against you? - -25 -00:08:01,350 --> 00:08:02,579 -Scott Tolinski: You brake against a buddy. - -26 -00:08:02,639 --> 00:08:03,630 -Unknown: Okay. - -27 -00:08:04,230 --> 00:09:11,610 -Scott Tolinski: I can't say that hasn't happened. But it doesn't happen in like, the regard that you're probably thinking, I think it would be probably that you'd like, knew somebody is fighting over a girl and like the way that you decide. It's actually like, way more accurate than you you want to believe here. It's because because the people in the dance culture, it's so like hantai fighting. Yeah, and there there are fights that happen. But like I've seen situations and things for people who are getting up in each other's faces and they're like mean mugging and getting up really close and like just super aggressive. And you're like, oh shit fights about to break out and then two seconds later, like, let's let's dance it off, man. And like, that's how it happens. It's actually it's 100% serious and like everyone is like I've seen like close to Bose being thrown danced it out. Instead, I actually have seen that's a that's the difference between Chicago breakdancing battles and other areas as in Chicago, they will fight you so do not like push it I've seen like someone get headbutted before, just like all around madness. So Chicago is a bit rough. - -28 -00:09:12,050 --> 00:09:21,870 -Wes Bos: Wow. That's that's a very interesting subculture area life that I've never had any experience in. It's kind of cool to hear how things go down. - -29 -00:09:22,109 --> 00:10:14,420 -Scott Tolinski: Yeah, it's cool. And it's getting a little bit more and more put together every single year, I would love to see it a little bit more like I mean, so to be honest, there's this under a whole underground side of things where you don't want to dilute the culture, you want it to be very raw, you want it to be very rough, you want it to be like very aggressive. And then there's like the commercial side of things like, hey, this could be in the Olympics, and this could be on the X Games or whatever, if people like really took it seriously in that kind of way. But the problem is, is that like no one wants to dilute the culture at the same time like it. I don't know the right people need to do it. And it's sort of happening right now but at the end of the day, be Boys will be boys and everyone will be late to everything and jams won't run on time. And there's like a certain aspect of the culture that needs to like grow up before Oh, yeah, that next step. And it just, it's just not happening. - -30 -00:10:15,780 --> 00:10:18,390 -Wes Bos: That's interesting. Cool. Yeah, - -31 -00:10:18,390 --> 00:10:20,490 -Scott Tolinski: let's hear let's hear about one a year how to use - -32 -00:10:20,520 --> 00:14:39,480 -Wes Bos: so probably my, one of my most treasured hobbies is his barbecue. And I've only gotten into it and maybe the last about four years, I've been super into eating barbecue, a large a large portion of my life. But over the last, I think maybe about like five years ago, we I've like developed this like love with the south, which is like, down south in the states and my wife and I've traveled down there a number of times, we've gone to all the different big barbecue cities and try the different types of barbecue that is down there. My wife and I are also super into yard saleing, which is just walking through other people's junk and haggling. I love the whole haggling part of it and whatnot. And so we went on this a couple years ago, we went on this thing called the world's longest yard sale, which is there's there's this highway called highway 127 I believe it is. And it's just like a week long from I think from Georgia up to Michigan, this highway sneaks through and it's like an old obsolete highway, it's been obsoleted by bigger highways. And it just goes through all these tiny little towns. And you know, we basically just like in January, it's in like August or something like that in January, we book hotel rooms in these tiny little towns, and then we just like drive up this highway, yard sale on our way through all these different antique vendors and just like random people selling their stuff on the side of the road. So part part of that was like I really got to experience some of like this, like real, just people have a huge smoker on their front yard. Or people I don't know selling ribs out of a church parking lot or something like that, I really got to experience the like whole barbecue culture. Like there's I've also been to like, just outside of Austin, there's this place called Salt Lake, which is apparently it's not the best barbecue in the world, but it has the best barbecue experience I've ever had. It's like outside, it's a dry County. So you have to bring your own beer. And there's like, you get to sit under these nice little awnings. And there's a band playing and like you feel like it's just like a really nice barbecue experience. And I sort of fell in love with both obviously the deliciousness of smoked meats, as well as the the barbecue experience that is like, it smells great. And it's sort of an all day thing. And you just hang around with your family outside and whatnot. So when we got our own house about three or four years, no, five years ago, we got our own, we finally got our own house and I had been renting up until then. And one of the first things that I did when we when we got our own houses, I ordered a smoker, which I really sometimes people don't understand what this is. So the idea is that you you buy this thing called a smoker, and you put charcoal and wood in it and you you control the temperature and then you put meat on it whether it's pork or beef or chicken and then you the the smoke and the low temperatures will slowly but surely cook the cook the food right. And it tastes delicious. And it's really good. So I got a what's called a Big Green Egg, which is one of the I don't know, it's it's one of the like cult following barbecues out there. It's super overpriced versus like other stuff that's available out there. But it's amazing because you can cook pizza sauna, you can do all kinds of smoking on it, it also works as a regular barbecue. And I just got super involved with it, I really liked the whole aspect of learning how to do something and then learning how to sort of perfect it by just scouring the internet and reading a lot and watching lots of it's very similar to how I learn a new coding technique, which is just like I just sort of immerse myself in that culture and immerse myself in learning all the different things and being a sponge to all the information that is out there and then going and applying it myself and I've had it now for three or four years now. And I'm starting to get pretty good at it. And it's just it's just a really fun hobby to have because you can you can have friends over and you can make a really nice meal and it's it's like better we don't go out for barbecue now especially in Canada barbecues. Very good. We obviously do down south where it's where it's like legit, but it's way better than having that our house then then at a restaurant. Nice. - -33 -00:14:39,720 --> 00:14:48,300 -Scott Tolinski: Nice Yeah, we saw the green egg whenever we go to Home Depot or something. It's got like the felt felt on the underside like where it closes right? Yeah, - -34 -00:14:48,300 --> 00:14:49,170 -Unknown: yeah. The - -35 -00:14:49,170 --> 00:15:44,700 -Wes Bos: funny thing is about it is like you with anything you people become such gearheads so that like that felt that felt ring around the inside. That's a That's just like a seal to keep the smoke out. But that's widely regarded as garbage amongst gearhead. So I of course had to go out and buy this thing called the Rutland seal. You got aftermarket, aftermarket seal. It's like a Honda Civic, you get all these upgrades to it. And you're just like super into all the different like plates and grates and different ways to light your charcoal quickly. And it's, I also I kind of love and hate the gear that comes along with hobbies because because it's such a simple thing. It's like this caveman thing of smoking meat, but you can get so into it and it can get so expensive into all these different things. It's kind of kind of fun, though. - -36 -00:15:44,760 --> 00:16:02,100 -Scott Tolinski: So are there like are there like they're like hobby centers where people are like, showing off their customized smokers and egg like where people are like, as you know, like mechanical keyboards. Yes. Like endless amount of sites or people look at my soup deaths. It's pretty big on mechanical keyboard. - -37 -00:16:02,610 --> 00:16:06,800 -Wes Bos: Instagram is really where all the the meatheads hang out - -38 -00:16:06,840 --> 00:16:09,990 -Scott Tolinski: of meatheads. Is that is that official terminology. No, - -39 -00:16:10,200 --> 00:17:57,450 -Wes Bos: I guess meatheads is the guys at the gym. But there's a pretty big culture of barbecue online. And that's another thing that we'll do is when I'm like getting super into anything, whether that's smoking or into cooking keto, or anything like that, I will just go on the hashtag on Instagram, and scroll my night away. Yeah, looking at what other people are, are building or other people are smoking with different tips that they have and asking questions, because there's this whole thing like, do you go low and slow? Or when you when you're cooking something? Do you? Do you wrap it? Or when do you apply the salt, I've talked about this earlier is that like people get so crazy about these little things that really don't matter all that much. And it just reminds me of programming so much, because people say like, Oh, I would never wrap a brisket. And other people are like it's called the Texas crutch or you win Yeah, because your your brisket hits like 170 degrees, and then you want to, you want to like get it up to 200 or you're pulled pork, we need to get it up to 200. And you hit this thing called the stall where at a certain point your meat hits a certain temperature and then it starts expelling water because you've hit this evaporation, temperature, and then the the evaporating water starts to cool down the actual meat. So you stall out at 170 degrees or whatever it is. So a way around that is you can either wait it out, or you can wrap it in like a foil or a butcher paper or something like that. And that will contain the contain the actual thing and then that that's called a Texas crutch. And then you'll that'll get your extra 30 degrees to where it's like falling apart and being nice and juicy. And people are like so divis of on whether you should use the Texas crutch or not, it's so funny to look at it. That's hilarious. I - -40 -00:17:57,450 --> 00:18:42,480 -Scott Tolinski: love that though. And that's like part of the coolest thing about the modern like time we live in is that you can like fully immerse yourself in stuff like that. I mean, even like when I started breaking, you couldn't do that. There was no such thing as any of this stuff. Like when I started dancing, I've learned primarily off of flash animation, there was like a website that had a flat like maybe like a seven frame per move flash animation of different breakout moves, right. And like I was like trying to learn these techniques for like a sense, essentially a stick figure doing them. And like nowadays, nowadays, these young kids are all learning off of YouTube. And they can just totally immerse themselves in Instagram and YouTube and see all these like World Class B boys and learn these techniques really easily and all sorts of stuff. It's just amazing. - -41 -00:18:42,630 --> 00:18:54,630 -Wes Bos: Yeah, it's everything that amount of access to the best people in the world. Right? Well, let's, uh, let's move on. Let's hear another one of your, your love is there. Yeah. So - -42 -00:18:54,630 --> 00:21:49,860 -Scott Tolinski: moving on. I've been writing recorded music for a long time. And this is something I've been wanting to get into quite a bit more lately, because for a very long time, you know, I was playing drums in a band for a long, long time. And I played piano for a long, long time. And, you know, in college, I just started writing and recording music myself, under the name of a domestic robot was my band name, although, I have to admit, like my singing is awful. I'm very aware of that my singing is not any good. I just had to take a singing class in college, and I nearly flunked the singing class. Because I have like a one octave range. I can. I can go really low, but it's like a one octave range. And I remember my singing teacher, he would like sit down with me at the piano and he'd be like, you really can't hit this note. I'd be like, Hey, no, I can't hit it. No. Okay. So yeah, my singing is not good. If you're interested in not good singing check out domestic robot but I really liked making music regardless if people liked it or not. So So I did that for a long time. And I just started this new idea of a new band here in a band, I mean, a one person musical thing, where I want to start doing music at least once a week. And that's sort of the goal is every Sunday night from like, six, or after, after laying in goes down. So maybe like 730 or so onwards to just work on music. And I have this new band named called shift, period forward slash super period. So shift super, which is obviously like a keyboard shortcut. Ah, like, yeah, and the genre of music is, I don't know what to say. It's like electronic music with samples, you could think of like kid koala, or avalanche avalanches or something like that. Very, very sample heavy. I'm going to be taking a lot of snippets from my favorite documentaries, because I watch a ton of documentaries. So I'm going to be taking a lot of audio samples from documentaries and essentially using them like similar to how we use the soundboard to actually like, I don't know, sample collages and stuff like that. So I'm really excited about it. I don't have to worry about singing, I don't have to worry about writing lyrics. I can take these ideas and stuff like that and put it down and just tweak it a little bit. So I have a song I'm working on right now. I'm pretty excited to share it whenever I can. So it's not done yet. But maybe pretty soon. But yeah, shift super. And then I have this whole design aesthetic around shift super, that's I'm calling ski wave, which is sort of like a vapor wave style, but based off of at ski movies and stuff. Ah, yeah. So if you want to think about this visual art style, all you have to think about is like a full body neon like bodysuit in the skier, like maybe upside down, but like definitely hitting off a cliff doing some like tweaked out pose. Yeah, that's, that's the whole aesthetic that I'm going for overall, - -43 -00:21:49,860 --> 00:23:25,200 -Wes Bos: I can't wait to see that. So I've got a follow up question that's related. I'm sure a lot of people are asking, obviously, having these these hobbies are super important, I think especially in web development, as it is very easy to become overwhelmed or burnt out or, or anything like that. And I was actually thinking about this the other day, where I think about just being competitive in our industry. And I find that there's a lot of people who they really just aren't putting in the amount of effort that needs to happen in order to get over that hump and get really good at coding. But then there's also like, on the other side, there's this like, oh, there's a lot of people that are really maybe overdoing it and, and just giving it too much. And that will eventually lead to to burnout, right? And I'm very aware of burnout with myself, because I don't want that to ever happen. I know that I have a good thing going right now in terms of my work life balance and doing something that I really enjoy. And I want to always make sure that I don't ever get to that burnout point, because I see a lot of people do it. And they either get extremely cranky and irritable online, or they just rage quit and they're done. And they sort of ruin a really good thing. So I'm always like trying to figure out like, Where's that sweet spot in between, like working super hard, but also not burning out. And I think that these hobbies are super important. But my question is like, like, where do you find the time for it? I think that you're great at having these. You're dancing, and you have a little kid and you're making music. And that's good. But like where do you find the time for that? Yeah, so - -44 -00:23:25,200 --> 00:25:12,630 -Scott Tolinski: at this point, it's it's largely when Landon goes to sleep. So he goes down at like 730 now, and even before Landon, these things were the same, I think the biggest point is making it part of your schedule, and making it part of your schedule and keeping it there. So it's hard for me because I've been breaking for maybe like 14 years now. So for 14 years, I've been going to dance practice to two times well, now it's like two times a week. It used to be like three or four times a week. But even when I when were when I was first dating my wife, she was getting your PhD. So like she is really busy all night long. So she's not expecting me to hang out. So I can go to dance practice two nights a week. No biggie, right? You know, and even even now, it's just been something I've been doing for so long that go into dance practice for two nights is no big deal. So like having that that schedule and that expectation of like, okay, Tuesdays and Thursdays from 730 to 930. I'm going to go breakdance and I'm going to go practice, I'm going to go whatever, and, and that's going to be cool. And I will have that time available for my wife whenever she needs it as well. Right. So for instance, I work out monday, wednesday Fridays, from 330 to 430 is when I work out I do it that time because Courtney gets home at 430 with Landon and then I watch Landon for an hour while she gets that time to work out. So yeah, keeping that hard schedule and like making sure that it You sort of freeing up this time to do this stuff like scheduling in your hobbies is like just as important as being I don't know, just being consistent with it, but like actually scheduling it in Yeah, is the main thing for me. And - -45 -00:25:12,630 --> 00:25:29,430 -Wes Bos: I think having that what you said is important having that like understanding with your significant other, where you you both understand that you both need it otherwise, like, You're both going to be worn too thin. And that's not good for for anyone and it's not good for your family either. Right, right. - -46 -00:25:29,550 --> 00:26:08,400 -Scott Tolinski: Yeah. And it definitely, I mean, you got to see it that way. Because, especially if you're working long and hard on a coding project or something, it's really nice to go and do something that lets some of that, that tension out, right, because I have had tension from, you know, trying to get something working or whatever. And it feels great to go to dance practice and just like, work it out, Let it out, let that you know, sweat it out a little bit and forget about it for a while when you come back to it. Your brain is in a totally different space and you're ready to tackle stuff and you're not so high strung on some of these issues that can really pop up and keep you just shoot. What am I supposed to do here? You know? - -47 -00:26:09,120 --> 00:26:10,620 -Wes Bos: Yeah, I totally agree. - -48 -00:26:11,250 --> 00:26:15,390 -Scott Tolinski: Yeah, so just making time and scheduling it because it's important. Yeah. Good. - -49 -00:26:16,290 --> 00:26:23,610 -Wes Bos: Cool. Thanks for that. Um, hopefully some people find that helpful. I know I get that question. All the time. Where people? Yes, I - -50 -00:26:23,700 --> 00:26:37,020 -Scott Tolinski: mean, I get that all the time where people don't even ask that question. But they just say I can't do all of this stuff. I can't go. I don't have time for the gym. I don't have time to do XYZ. Yeah, you do. You're just bad at scheduling. Yeah, yeah. I think I think - -51 -00:26:37,020 --> 00:27:56,340 -Wes Bos: bad scheduling. And also, like, you have to work up to that point. Like, I had a workshop on Friday. And I had to get up at like, 545 in the morning, I arrived at 630 train, didn't see my kids as they were still sleeping. And then I got home from the train. It was just a nine to five workshop. And I got home from the train at like seven o'clock at night. And I just saw my kids before they went to bed. And I was like people do this every single day. Yeah. And I luckily enough, like I remember having the talk with my wife when she quit her job two, because my wife works from home as well. But she used to be a shoe designer. And and I remember her being like, like, this sucks having to do it. And thankfully, we had the foresight to to try to build something for ourselves before we had kids and before we had a house and stuff like that, so we could take those risks. Because it was a lot easier. I'm not saying you can't do it now that you have kids but I'm glad that we did it because we saw had like we want to start to design our life in a way that we don't have to commute and we want to have time for for hobbies and working out and and all these good things. Right. So it's also I think it takes years and years to work up to that point, but it's it's well worth well worth those risks and well worth putting a little bit of extra effort in to get to that point. Yeah, - -52 -00:27:56,340 --> 00:28:37,440 -Scott Tolinski: I know I remember having like an hour long commute both ways. So I used to I used to work in Detroit area so I would drive from was it Dexter which is Ann Arbor area Southeast Michigan and be like an hour to get to Detroit or so every single day with traffic and you would get home you know, like six o'clock ish or something and you would just feel like totally spent and it would be like and and you know, I guess at that point we didn't we didn't have a baby so it was a little bit easier for me to eat dinner and then two hours later go to to practice or something but it wasn't certainly easy. He definitely had to like force yourself to do it. But yeah, it can be super tough. I totally get that. - -53 -00:28:37,440 --> 00:28:39,690 -Unknown: Yeah. All right. - -54 -00:28:39,690 --> 00:29:06,960 -Wes Bos: Um, what is it mine that my turn? Yeah, all right. I'll talk about when I got here. Oh my other I talked about my barbecue in the yard sales that's in the summer we go in yard sales all the time. I've talked a lot about working out I wouldn't say that's necessarily a hobby because it still is hard for me sometimes I really look forward to it. But more often than not I'm I have to really be like I don't feel like going but I'm gonna go - -55 -00:29:08,550 --> 00:29:11,010 -Scott Tolinski: today I'm feeling like that just my gym day and I'm like, - -56 -00:29:11,640 --> 00:31:21,720 -Wes Bos: I don't want Yeah, I went this morning thankfully and I'm testing out this new thing where I I go from nine to 10 miss the first hour of work and go to thing and see if it gives me a bit more of a boost the boost in the morning. So far it's working pretty good but that might also be the copy I had on the way home. What am I talking about? Um, date night, my wife and I go on a date once a week. Usually Thursday nights. We're lucky enough to have my wife sister living with us. In exchange for living with us. We she does a bunch of babysitting for us. And she's also she also works for me as well as my assistant which is pretty cool. So if you ever email me and get an email back from someone that's not me, it's likely her but a date night, once a week. We we live in the second in city called Hamilton which is an old steel town sort of the the Pittsburgh or the buffalo of ham of Canada. And it's it's crazy how much how many new restaurants are opening up and many like, nice new donut shops are opening up like the stereotypical hipsters gentrifying the area, which it has its own problems as well, because we have a big issue with affordable housing in our city now. But what's kind of cool is that we go out for date night, once a week, and we get to try all these different restaurants and absolutely love it. And it's kind of a nice time for my wife and I to chat about work and chat about what we're working on and chat about whatever's going on in our life because I kind of ever since we started doing it, it's just been so good for just our own sanity and your marriage and everything like that. And I've been like saying like the government should like mandate that you have date night once a week because date night, mandated a mandate mandated mandated night. Yeah. I don't know it's a it's not really a hobby of ours. But I just thought I'd mentioned that that's a pretty big part of our life. And we always look forward to it on Thursday night, where you're just about second the week, and then you get a you get to go out and and then the next day is Friday, and everything starts starts looking up from there. - -57 -00:31:21,960 --> 00:31:36,540 -Scott Tolinski: Yeah, no, that's great. I wish we had some better babysitting options here. That was the hard part about moving across the country from the rest of your family is that you instantly lose all of those, those support networks here. So we're slowly building some of that back. - -58 -00:31:37,260 --> 00:32:06,990 -Wes Bos: There's a couple startups in the area that are trying to solve this. People have money, but they don't have anyone to take care of their kids. You know, like, lots of my friends are like I would kill to have somebody that I could reliably have come over once or twice a month even to babysit my kids so we could go out on date night. And there's some people trying to figure out like, how do you do this like trust thing, where you can just like have an Uber for babysitters but also not just like have a random stranger. Yeah, - -59 -00:32:07,710 --> 00:32:29,580 -Scott Tolinski: I know. Yeah, that stuff is scary. It's like we take land into daycare every day. It would be sick if that daycare was open until you know 10 o'clock. Yeah. Just some nights it'll let him let him hang out there while you got to have a date night so that yeah, that's super awesome. I agree. That's super important. Yeah, totally jealous about that one. - -60 -00:32:31,170 --> 00:32:54,930 -Wes Bos: Yeah, that's good stuff. Um, so that's all my my my soda. Oh, a homerun. Oh is another hobby of ours. We moved into 140 year old house a couple of five years ago we've slowly been renovating different areas we did our whole main Florida the whole get rid all the walls because yeah, open concept. And we're just about to start another round of rentals wherever our whole house is plaster which - -61 -00:32:54,930 --> 00:32:57,180 -Scott Tolinski: sucks. And yeah, just two - -62 -00:32:57,209 --> 00:33:17,940 -Wes Bos: cracks. And once we've done all these Reno's you shift the weight of the house around, and when that causes the house to move a centimeter or two in either direction, and then that cracks the plaster and then this the ceiling starts cracking. So we're getting a whole bunch of drywall done, which is miserable, but much needed. Wow. - -63 -00:33:18,150 --> 00:33:26,730 -Scott Tolinski: So are you are you like I know you've you've referred to yourself as you know. The was it chip and Joanna like - -64 -00:33:27,570 --> 00:33:30,450 -Wes Bos: Joanna the chip and Joanna JavaScript? Yeah, yeah. - -65 -00:33:30,450 --> 00:33:34,290 -Scott Tolinski: Are you coming in there with a sledgehammer? Like No, no, I'm - -66 -00:33:34,290 --> 00:34:53,130 -Wes Bos: coming in there with the checkbook? Yeah, I do. I'm, I would say I'm, I'm fairly handy and I'm able to look things up. We also have a rental property as well. So when things break at the rental property, I generally try to get in there and fix it before I have to call someone to fix it. It's just good. So like, I feel like like also, we had like this weird issue at a rental property where there was like a weird smell coming from the basement. And I paid like a plumber like 350 bucks to come fix it. And they didn't fix it. Like he just like is like all sneak it out. But I can't guarantee that's the problem. And I was like that there is why people aren't successful because they're they don't want to be they don't have like a problem solving mentality. Whereas like, I'm like, Alright, I'm gonna figure this out. Like, I don't know anything about plumbing, but I can debug this smell pretty easily. So a couple hours of sniffing around the basement and trying different things and coming back a couple days later, like, figured out where this random smell was coming from. And it turned out it was like a random pipe that was no longer used and some rat climbed up, or something like that, or a mouse climbed into, probably died. I don't know what it was, but we fixed it. And I was just like, Okay, how, how am I better at debugging this plumbing issue than an actual plumber? - -67 -00:34:53,310 --> 00:35:19,380 -Scott Tolinski: Yeah, so this is actually hilarious because my dad would refer to this as doing quote, a downtrend. Job, which is hilarious. We always my brother and I, and now my wife, we always crack up about this downtown job thing because one time we were like, We got hired by our neighbor when we were in middle school to mow their lawn. And so, like mowing their lawn and whatever my dad's like, don't forget to do a downtown job. Wait, so - -68 -00:35:19,380 --> 00:35:24,710 -Wes Bos: what does the downtown job look? Like? Good job. It means it means it. - -69 -00:35:24,710 --> 00:35:38,940 -Scott Tolinski: It means like an extra extra light on the job or something. Yeah. So like, oh, if they hire you to mow their lawn, don't just mow their lawn, but weed whip and pull some weeds and young and make it like truly, like, perfect shine on that thing. - -70 -00:35:40,440 --> 00:35:42,060 -Unknown: So I've always said this, it's still good. - -71 -00:35:43,170 --> 00:36:08,480 -Scott Tolinski: To do a downtown job at the end, like yeah, if it is like, yeah, I'm not I'm gonna debug that, like, I'm gonna figure out I'm not just gonna patch it up and call it a day or something like that, or, or Yeah, I have the same exact mentality is that it's like, I guess it is that just a debugging mentality. It comes from deep seated, wanting to do a downtown job - -72 -00:36:08,730 --> 00:36:33,980 -Wes Bos: is that I always see developers in other aspects of their life. And it's funny how many barbecue guys are also developers in their real life, because it is this like, very simple thing. But it's also you can get very technical, and there's a lot of like moving parts to it. And you can get really into it. And I think that developers are, are well suited to that because they like to get into the nitty gritty and the whys in the house of it. Yeah, - -73 -00:36:34,020 --> 00:36:43,710 -Scott Tolinski: I think the problem solving aspects are just so thoroughly embedded into being a good or a programmer or any of that stuff. You want to solve these problems. A downtown - -74 -00:36:43,710 --> 00:36:54,380 -Wes Bos: job. I know I use that in my tutorials. Like let's not just leave this here and assume it's going to work. Let's write a couple error handlers and, and do a downtown job. Yes. - -75 -00:36:54,420 --> 00:36:57,540 -Scott Tolinski: Yeah. See that? The the rock kolinsky special right there - -76 -00:36:58,200 --> 00:36:59,400 -Wes Bos: is your dad's name. - -77 -00:36:59,420 --> 00:37:15,920 -Scott Tolinski: Yeah. His name is rock. Yeah, yeah. It's not sure for anything. It's spelled ro ch. So a lot of people mispronounce it. Roger Roger, something but no, it's rock Rocco. It's Giza. He's probably be psyched to know that the downtown job is making it under the power to make a lot of like, - -78 -00:37:15,920 --> 00:37:24,090 -Wes Bos: Do you smell? when you're a kid, did you make those jokes? We did not. I don't know why - -79 -00:37:24,090 --> 00:37:33,060 -Scott Tolinski: cuz we even we even watch the rock and stuff like that, which is I think it was just like so oddly normal to us that his name was rock like it was it? I have no idea. - -80 -00:37:33,480 --> 00:37:55,800 -Wes Bos: We I got another funny story. We just got new pots and pans. And we got these new pots and pans called the rock. And it's like this like, kind of like this new nonstick surface where it's like kind of beveled it's really interesting. And they're awesome. And they're called the rock and it says the rock right on the pan. I taught my daughter to say Do you smell his cooking? - -81 -00:37:55,800 --> 00:37:59,520 -Scott Tolinski: That's awesome. That's great. That's super good. - -82 -00:38:00,780 --> 00:38:04,050 -Wes Bos: All right, do you got any more hobbies you'd like to talk about here? - -83 -00:38:04,109 --> 00:38:14,130 -Scott Tolinski: I do but maybe want to hear from the freshest breakdancing managing your your, your books, that's a fresh hobby of mine. - -84 -00:38:14,460 --> 00:39:53,150 -Wes Bos: Managing your books is a very very important so if you're running a business, I always talk about when you have a business there's two things you can work on your business and your homework in your business and there's stuff where like you're learning a new skill, you are creating a new course or you are doing some marketing that's that's important business to me. But then there's this whole other subset of it which is unimportant business working in your business which is just like doing the books and doing email and doing this busy work that has no end like result and working on it. And to me that is that is accounting and I hate doing it and that's why I've been using fresh books for maybe about eight years now. And I love it because it just makes my makes my time spent tracking invoices, tracking expenses, tracking, profit and loss and doing my taxes at the end of the year. It's just very minimal and it doesn't get in my way so I just jump in. I'm able to see who's paid the invoice who's seen the invoice like right before the show we're supposed to have another sponsor, but they haven't paid us yet. So I just jumped into Freshbooks check that saw I'm like hey, I can see that you saw the invoice clearly they click the link but they did not yet pay it and you can pay via credit card so like what's going on here? How can you unpaid yes I was able to I can I did a comment right on the invoice and it shows up as as a history on that so that's why I love fresh books and I definitely recommend that you sign up go to fresh books calm for slash syntax and use syntax into the How did you hear about a section? Because that will keep Scott Nye creating these hilarious syntax episodes? - -85 -00:39:53,190 --> 00:43:27,600 -Scott Tolinski: Yes, hilarious. Yeah, so another hobby of mine. This is a we can get this one quickly. But I love kung fu movies. I like all kung fu movies, but of particular, this studio, the shot brothers, which existed from like, 1960, something to like 1980 something, though, basically, the shot brothers was like the precursor to golden harvest, which is where Bruce Lee and Jackie Chan both found their initial fame and stuff like that. So I love these movies, they're awesome for a variety of reasons. They're there, the studio in like, I don't know, like 30 years, so span produced, like 700 films. So they were just cranking out films. And because of that, they ended up having this like, a lot of experimentation, a lot of like, really interesting, sort of non conventional plots are filming and stuff like that. And these movies can get really artistic in every sort of different sort of way. And oddly enough, they're just totally odd. Some of them are just totally odd by American film standard. So like, you could watch this whole movie that just huge struggle, and the main character, like, at the very end of the movie, like finally is going to prevail, but then he doesn't. And then he kills himself. And that's the end of the movie. Like, there's no follow up. There's no like, epilogue or something. Yeah, that is the end of the movie. So like you, you can't really predict what's going to happen in any of these movies. They're just totally off the wall sometimes. And I really liked these movies, because so many of them follow these themes of life self progression, which is is like a huge deal, like, and some of the plots are just like way over the top, like where this guy, or a bunch of people were in like a Shaolin Monastery and they're trying to become more powerful or whatever. So they put like, you know, five pound ankle weights and say, Hey, jump out of this pit, and then Okay, jumps out of the pit. Now, here's 10 pound ankle weights, try to jump out of this pity jumps like 1000 times until he finally gets out. Okay, now, here's like 20 pound ankle weights or whatever, and it keeps going until he's got like 1000 pounds on his ankles. And then the Shaolin monks like, okay, now take off all your ankle weights and he just jumps over a building. It's like totally outrageous, but like, this idea of like self progression, that if you work really hard on these like areas of yourself, you can you can grow them to sort of unworldly proportions. us. So I've always loved the fact that those themes are so prevalent in so many of these movies to like an outrageous point, is one of the reasons I've always been been geared to this, I wanted to give my top five, well, in no particular order, but top five favorite shot brothers movies, okay, with a tiny little description, I'll be quick about this, for anyone who doesn't care about these movies. But if you have any bit of interest in some of these are going to be really good. I really love some of these movies. So okay, one of the classics is the 36th Chamber of Shaolin, which is, you know, inspired a Wu Tang album. And the 36th chamber is all a sort about this guy who gets into the Shaolin Monastery and he sort of goes through and works harder than everyone else and eventually invents his own Chamber of this Shaolin Monastery at the same time, he has to fight this this sort of oppressive force that's coming in. So 36 chambers really excellent. My favorite film is the five deadly venoms, which is a classic, absolute classic. It's basically a mystery about - -86 -00:43:29,880 --> 00:43:30,650 -Unknown: it. - -87 -00:43:31,080 --> 00:44:06,210 -Scott Tolinski: Yeah, there's these five, five kung fu artists that all have different specialties. They're all based up there's like the toad, and the scorpion who has these like devastating leg kicks, or the gecko who can like run up walls and stuff like that. It's these like five deadly venoms it's inspired a ton of modern film and all sorts of different ways of even like a modern American film. So the five deadly venoms Awesome, awesome mystery film, five fingers of death is a great sort of a very in if you've seen Kill Bill, you know, they're like that siren right before she goes off and starts killing people. - -88 -00:44:07,080 --> 00:44:07,710 -Unknown: Where - -89 -00:44:08,970 --> 00:45:26,760 -Scott Tolinski: that light comes from that movie. There's like a lot of really like famous things, five fingers of death was like one of the very first Chinese Kung Fu movies that found fame over in the US It was like a precursor to Bruce Lee and all that stuff being popular in the US. The Secret Service of the imperial court is sort of an odd film. It's not on most people's lists. It's a really large it's a large movie very epic. And then the last one on my own a boxer from shantung here is also inspire or Kill Bill like aspects of Kill Bill were inspired pretty heavily from boxer of shantung. It has a super awesome violent ending. Oh, these films are exceedingly violent. I'm going to say that right now. Like a lot of like fake blood like arms cut off and stuff like that. And then the last one is human lantern. Which is a also is exceedingly violent film but insanely artistic every single shot in this thing is just sort of mind blowingly beautiful even though it's like a horror film. So it's certainly a bit gory and a bit like disturbing. But the film itself is just an absolute masterwork of just sort of unconventional like beauty shots. You'll never see another film like this composed or whatever. It's pretty sweet. - -90 -00:45:27,750 --> 00:45:54,120 -Wes Bos: Cool. I've never seen a kung fu movie in my life. I'm not super into movies at all. I've it's part of my like, claim to fame with people is that I've never seen anything like foundational movies in life. Like I've never seen Star Wars or Harry Potter or Lord of the Rings, or any of these movies that people like, Oh, they always make like jokes. They're like, use the four sounds like I don't get it. But maybe we ought to check out one of these kung fu ones. - -91 -00:45:54,210 --> 00:46:09,090 -Scott Tolinski: They're there. They're interesting. I think the five deadly venoms is probably the best film and 36 chamber is probably the most famous. They're they're good. I don't know. I really liked them. They're just sort of they're bizarre, in a sort of a great way. - -92 -00:46:09,930 --> 00:46:10,470 -Unknown: Yeah. - -93 -00:46:10,980 --> 00:46:29,550 -Scott Tolinski: So that's my kung fu movie fandom. If you ever see these, my office I have like kung fu movie posters all over everywhere. Yeah. And these are like ones that were actually hung in like Chinese theaters in the 70s when these films came out. So I've been doing a bit of collecting there, but - -94 -00:46:29,730 --> 00:46:39,690 -Wes Bos: that's pretty neat. Yeah. Cool. All right. Let's switch gears then to just some other stuff about us. Real quick one, what kind of car do you drive Scott - -95 -00:46:40,319 --> 00:47:22,950 -Scott Tolinski: drove a Ford Focus ST, which is like their souped up version. It's a little fast and furious. It's got a 250 horsepower engine and stuff like that. It's uh, only comes in a manual so I got this car cuz my grandpa worked it for this whole life. So we got like the a plan. And basically, it was a I could get a really awesome price on a really sweet car. knowing what I know. Now about how many Ford's I've owned. I'm probably not going to buy another Ford. But I've liked this car. I've had I've had it since 2013. And it is it has served me well. Before that. I had a Ford Fiesta, which was like a lemon. So I had to like give the whole car back after like, oh, - -96 -00:47:22,980 --> 00:47:24,360 -Wes Bos: like through the lemon law. - -97 -00:47:24,360 --> 00:47:25,200 -Scott Tolinski: Do the lemon law. Yeah. - -98 -00:47:25,440 --> 00:47:27,180 -Wes Bos: I was interesting. I had - -99 -00:47:27,180 --> 00:49:09,660 -Scott Tolinski: a Ford Fiesta and like I had it for about one week started leaking oil. So I take I take it into the dealership, and hey, it's leaking oil. And keep in mind this is one of the first Ford fiestas off the line at this point this is right after they brought it back so like the press for this would not have been good if like they were having problems yet. But instead of doing anything about it Ford actually made it much worse. So their their technicians like like, actually like wrecked the interior of the car. There was like oil stains on the carpet. They like scratch part of the car. Like these texts, absolutely did a number on the car. And this I get the car back. And it's like trash, kind of like usually when you get it back from the dealership. It's like nice, but the car was like kind of trashed. Yeah. And it started leaking oil again in like two days. And like, so I take it back in there. I took photos of the salt I documented at all. And Ford was like not doing a whole lot for me. They were like not sympathetic. They're like, yeah, we're gonna replace your engine. Now I'm like, the car is like one week old. Like it's give me a new car man. Like, yeah. So I ended up just I you know, I went off on Twitter a little bit. Yes. started tweeting and I got in contact with the line director for North America. Wow, they were basically just like, yeah, this is not good. Like so. We're gonna fix this. So they eventually, to their credit, they got me a new car. The car worked fine. That dealership I never went back to that dealership. I actually got banned from that dealership for leaving a one star review on their Facebook page. I actually went to go back for like a simple oil change. And they were just like, you're not allowed here. Really? Yeah, seriously. I was like, because I gave you their like because of comments you left on social media. I was like I - -100 -00:49:09,660 --> 00:49:10,680 -Unknown: allowed I - -101 -00:49:10,680 --> 00:49:22,890 -Scott Tolinski: gave you a truthful like, description of what happened. One star review and then DEP that didn't like it shady. Yeah, I got shut off. Crazy. Twitter Hayden. - -102 -00:49:23,129 --> 00:49:27,720 -Wes Bos: Well, I drive a Subaru Forester, which is a - -103 -00:49:27,960 --> 00:49:29,700 -Scott Tolinski: like, we have a forester to - -104 -00:49:29,730 --> 00:49:31,530 -Unknown: this. All right, I - -105 -00:49:31,530 --> 00:49:32,190 -Scott Tolinski: love it. - -106 -00:49:32,280 --> 00:49:33,120 -Unknown: What year do you have - -107 -00:49:34,140 --> 00:49:38,040 -Scott Tolinski: the latest 2016 or seven? Okay, we're using it but - -108 -00:49:38,040 --> 00:51:21,510 -Wes Bos: it's the new they just released the new. The new like kind of it looks a little different. Yeah, we have a 2010 so it's starting to get on and it's yours. We had the summer we're down south in as we do. Yes. And we had the head gasket blow which sucked. So we had to have the whole thing tow thank goodness I had. We have ca Which is like a in triple A in, in the States, the CEUs for Canada. Yeah. Luckily that translates in the states as well and they had a drive with a they put the car on a flatbed This is the downside of four wheel drive is that you can't just tow it with any tow truck, you got to put it on a flatbed and or put some wheel dollies underneath the wheel. So they towed it two and a half hours to Asheville, North Carolina, and it was so expensive to fix it. But whatever, it's everywhere. Other than that, it's been pretty, pretty solid car. Starting to get up in the kilometers. We're thinking about the next year to what our next move will be. We also we've got two kids and the car seats are massive. And I don't know in the States, but in Canada, they make you rear face the car seats and they don't make you but they suggest you rear face them until they're like 14 years old or something like that. Yeah. So the when they're rear facing like you're like pretty much kissing the dashboard on an SUV, which is silly. So we were looking at something that has like three rows, just so that we can have a little bit more room for all our gear. And and the kids and friends or whatever. So we're looking at what like three, we don't want a van like where those people were? Yeah, I live downtown and we're kind of cool. We were cool. - -109 -00:51:24,600 --> 00:51:26,370 -Scott Tolinski: Cool, cool jeans in a van. - -110 -00:51:26,580 --> 00:51:59,490 -Wes Bos: You can't know like I like I might as well start wearing Kirkland jeans. I understand every all of my friends that have vans are like Dude, get a van the best like I understand the functionality of it, but like I just can't can't bring myself to it to jeans. So we're looking at I really, really want an electric car. But for the size that we want. There's just not not much there. Like the biggest one that the biggest electric car that they have right now is the Model X, which is like $150,000 Canadian, so yeah, - -111 -00:52:00,060 --> 00:52:35,130 -it is all bad. And also it's it's not even that big in the in the with the third row. BMW has a hybrid x five. But so they it's kind of like the the Prius right, so you can like drive in town on the electric motor. And then if you need to recharge or you run out or whatever, you can flip over to the electric one. But the the one that the the hybrid doesn't have a third row, so you can't get that. No, we're thinking like, the next car we buy will likely be the last gas car we ever buy, which is pretty exciting. Yeah, I - -112 -00:52:35,130 --> 00:52:53,010 -Scott Tolinski: know. That is like a, I told myself, I don't think I would buy another car unless it is like an electric car. But at this point, yeah, I think the options are still growing. Right? You know, obviously, you'd love to have a Tesla, but the cost is just so expensive. They're beautiful. I would love to be able to afford a Tesla, but not yet. - -113 -00:52:54,540 --> 00:53:13,860 -Wes Bos: Pretty soon though, I'm super excited, especially with the GM and all these companies coming out with electric versions, apparently, like there's gonna be a electric Jeep Wrangler in 2020, which is pretty sweet. So I'm pretty excited about the future of electric cars, and I just not ready to pull the trigger on something like that just yet. - -114 -00:53:14,010 --> 00:53:29,940 -Scott Tolinski: Yeah, for sure. Yeah, well, in Colorado, you kind of need a electric super out here that would probably like it would probably blow that like I think everyone out there is a electric super released. I think everyone would just go home early from work to go buy an electric Subaru. They're - -115 -00:53:30,810 --> 00:53:54,090 -Wes Bos: now putting out a three row they just announced this new Subaru that has three rows, and it's being built in the USA. And they they haven't said whether they're gonna have electric version or not, but that would be pretty sweet as well. But I also don't buy brand new cars though because that's, I don't know, we just I've only ever bought one car in my life and we just pay cash for it at the time. - -116 -00:53:54,090 --> 00:54:45,000 -Scott Tolinski: So I bought a shockingly amount of like I bought that Fiesta and then like Joe that was a new car and then like two years later I bought the focus. But it was you know, I had the the four day plan and stuff like that. Yeah, the before that I had a Acura Integra too fast too furious about that when I was in high school. And then after that I had a Lexus IS 300 that I had for like one year and then sold it because I that car was actually permanent kind of sick investment because they were kind of rare. So I bought this this is 300 it was a manual and it could not hang in the winter. We're rear wheel drive. Totally so yeah. And then I ended up selling it for more than I bought it like a year and a half later because they were like the model I had in particular was kind of rare. And so I drove it for a whole year essentially for free because when I sold it I made all that money back. - -117 -00:54:45,000 --> 00:54:45,660 -Wes Bos: Oh man. - -118 -00:54:45,750 --> 00:54:56,970 -Scott Tolinski: Yeah, it was kind of a sick deal for me but we got lucky on that one. Okay, so well. Okay, what what YouTube channels do? You eat? This is an interesting question. - -119 -00:54:57,030 --> 00:56:28,770 -Wes Bos: I watch a lot of YouTube just because it's I find it really Interesting to see what other people are working on and all over the place like I've been watching this one guy restore old Kawasaki motorcycles called genius garage, I'll link to it. And he's just got a really great personality and explains how small engines work. Like I don't really care, right? Like I can bring it to bring my lawnmower to somebody if it needs to be fixed. But I just find it interesting to dive into different topics that are totally unrelated to things that I work on. So I was pretty good. I watch bone appetit has the series called it's alive with Brad. And he just goes through different types of fermentation, which I love because like I've done fermented honey and kombucha and all these different sauerkraut kimchi, I just love the whole, like gut bacteria and delicious fermented foods. So and he is a how like, absolutely hilarious. What other ones do I have here? This one called Big Clive comm where he buys this like shady electronics off of eBay. And like cracks him open and and sees it sees if they're safely made or not. So he'll buy like a buy like a $40 LED floodlight off eBay and crack it open. It'd be like there's no ground. And then he's he's British. So he calls it he calls it Earth, which is like, you know, you like have like the third prong in the US and Canada is around. Yeah. And in the UK. They call it the earth. - -120 -00:56:28,830 --> 00:56:30,090 -Scott Tolinski: I had no idea about that. - -121 -00:56:31,980 --> 00:56:48,690 -Wes Bos: So charming. What other houses made is on YouTube. Remember how it's made? Yeah, done. The best part about how it's made is they always start off with a pun. Like if they're building light bulbs. They're like someone had a great idea. Or something like that. Yeah. - -122 -00:56:49,440 --> 00:56:54,330 -Scott Tolinski: Do you listen, there's there's a lot of podcasts from from how it's made. Yeah. - -123 -00:56:54,420 --> 00:56:55,710 -Wes Bos: Oh, no, I have to. - -124 -00:56:55,710 --> 00:57:08,160 -Scott Tolinski: I might I might I might be tripping. I might have made that up. That, like, stuff you missed in history class. Is that how? No, that might actually be something else. There. I might be thinking of something else. - -125 -00:57:08,400 --> 00:57:10,380 -Unknown: Oh, yeah. I got a couple - -126 -00:57:10,620 --> 00:57:12,270 -Scott Tolinski: stuff. How Stuff Works is what? - -127 -00:57:12,270 --> 00:57:19,740 -Wes Bos: We're not how it's made. Yeah. How Stuff Works was I love that that website when I was a kid How Stuff Works. Yeah, - -128 -00:57:19,830 --> 00:57:22,140 -Scott Tolinski: it was killing in the podcast sector. - -129 -00:57:23,100 --> 00:58:42,330 -Wes Bos: Check it out. I also watch Alex French guy cooking. He's just got this. He's kind of got the Casey Neistat vibe of his vlogs but for cooking and absolutely love it. His stuff is really, really good. Casey Neistat. And then my favorite by far is Mathias, Mathias Wando. So he has two ones, he's got one just as own where he's just putzing around his house fixing stuff. And he's a he used to work for rim here in Canada, which is they made the BlackBerry and he was like an engineer for them. And he's just genius. And all of the stuff he does is woodworking. But he just solves all these problems around his house with pieces of plywood. And it's just so interesting. And he has another one called wood gears. And he makes all these gears and I've seen these Yeah, I so he's just anything he does, I'll watch it, whether it's replacing a door at his house or making an extension for a table or he makes these like he's like really obsessed with how mice learn right now. So he's making these mazes for the mice and the shrews at his farm. And he just like does like a time lapse of a mouse trying to move through a mouse. And it's interesting how the mouse learns how to do the maze after like two minutes or so. And he just has like such an engineer brain, but applies it to his life. - -130 -00:58:42,390 --> 00:59:01,320 -Scott Tolinski: Yeah, some of this stuff is amazing, like the panto router stuff, where he's developing these machines to make some of his woodworking, like, easier or whatever. But he's like creating these just really complex machines. Yeah, I have no interest in this stuff at all. No, I could sit and watch these for hours just because they're so incredibly cool. - -131 -00:59:01,710 --> 00:59:27,690 -Wes Bos: Totally. Yeah, definitely know him. And my other part is that he he uses drywall screws for everything, which apparently is a huge No, no, in the woodworking world. You're supposed to use different kinds of screws. And he's like, I like drywall screws, they work well for me. And I was like, Thank you like because sometimes in web development, we get like that as well. And it's like, this guy is just living his life and doing cool, good stuff. So those are my YouTube channels. I watch a lot of YouTube I really like it. And some of my favorites. - -132 -00:59:27,870 --> 01:04:05,040 -Scott Tolinski: I know I watch a lot of YouTube too, for being like a well, you know, I've been to VidCon I've done the the YouTuber thing and I'm not like trying to I'm not trying to be a YouTuber, you know, I just want to put out good content on YouTube, you know? Yes, it's sometimes that YouTube stuff is a little I don't know, I'm not I'm not super into the vlog vloggy sort of sort of stuff, but I watch a lot of YouTube myself. For a long time I watched the bro science life, which is the dumb marzetti he's doing like skits where he's playing this character of like this gym bro. Oddly enough, the guy himself is actually kind of a gym bro. But he's like very self aware. Yeah whole thing is hilarious. I like he was one of those videos for a long time where every time he would come up come out with a new one I'd have to watch it he mmediately they're hilarious. He's super super funny guy you have a hard time understanding if he's acting at some points, but he's definitely acting because like his normal personality is like pretty chill guy. Yeah, there's a YouTube channel called stance, which has all of the largest B boy battles on it and they have like the major competitions and stuff like that. They'll do like highlights, like the best sets from these competitions and stuff like that. So Stan says a really high production value for breakdancing on YouTube. Just really awesome stuff. I listened to the the needle drop, which is Anthony fantana, his music reviews. He's really I you know, I, I grew up being a huge fan of music reviews overall. Yeah, we would get spin and rolling stone and all these magazines and they would all come in and we would just go to the reviews immediately and read these music reviews. And that's just something I grew up with. So like having a music reviewer on YouTube, I feel like it's really fair, most of the time, I totally agree with them. So I really like his channel he doesn't he does his thing very, very well. And there's like enough little artistic elements in his channel that I find it to just be excellent. Next is RED LETTER MEDIA. These guys got famous for their outrageously long reviews of the Star Wars prequels, which are like way better than the actual Star Wars prequels. Like? So the the first RED LETTER MEDIA video I saw was like maybe it was hit. I feel like it was like two or three hours of just him talking about the first Star Wars prequel. And it's done in like this really like I don't he's playing a character. Mike who's like the main guy in the channel is like playing this, this weird character he calls Mr. Plunkett who's like he's so supposed to be like a creepy guy who lives in his house. I don't understand the character but like the, the critique of the film is so dead on that he's just like diving into. Like, you know, people say that they they don't like prequels or whatever. I'm not a huge star wars person. Either way. I mean, I like the movies. But I'm not crazy about I'm not like a crazy Star Wars fan or something like that. But this This review is just so thorough and more about like, the filmmaking techniques and the story techniques used in the film and why they're, they fail spectacularly and the problems with it and like, he goes down by like technique, by technique, by technique, why they like, are a complete failure and all sorts of ways and the reviews are just so darn excellent. I've like rewatched a two hour long review on a movie, I don't care about that much. That's how good they're so that's how they like got famous originally was through these reviews. And then they've since done the same thing with several other major movies and stuff like that, but they they have since expanded the channel to have several more people doing these things. And they do like half in the bag reviews with a review just new movies that come out and stuff like that. They'll do like best of the worst where they're watching a bunch of really terrible movies and then have to vote on which one is the best. They'll they have started this new thing, which is like a fictional podcast that's making fun of fanboy podcast it's like it's it's so weird because it's there's a ton of effort put into it but the whole thing is a farce. They're they're doing this podcast as if it was like a real Star Wars fanboy podcast and they're all sitting there and they have like all of their their Star Wars toys all around the desk drawer wearing Star Wars gear and like the whole they do the whole thing in character but the character is so deadpan I it's hard to explain it's like a farce within a forest within a forest. The whole thing is like absolutely ridiculous. And I just find their sense of humor to be totally dead on so really love RED LETTER MEDIA, one of my favorite channels. Man, I - -133 -01:04:05,040 --> 01:04:10,230 -Wes Bos: haven't heard of any of these, though. Yeah, YouTube channels. Yeah, I - -134 -01:04:10,230 --> 01:04:18,360 -Scott Tolinski: mean, if you're not into movies, I'm not I'm not like crazy in the movies. But I took a lot of film in college. So I have like, yeah, like understanding of like, that sort of stuff. - -135 -01:04:19,140 --> 01:04:22,800 -Wes Bos: Man, this bro science life.com is janky. - -136 -01:04:23,580 --> 01:04:24,230 -Unknown: website. - -137 -01:04:24,330 --> 01:04:31,770 -Wes Bos: Yeah, you should do a like a YouTube video about explaining why the animations are so jittery. Oh, man. I - -138 -01:04:31,770 --> 01:04:33,270 -Scott Tolinski: did not know he had a website. - -139 -01:04:34,500 --> 01:04:40,530 -Wes Bos: Maybe it's just I think it's because he's got a massive animated GIF. looping. - -140 -01:04:41,670 --> 01:04:53,430 -Scott Tolinski: Yes. Doesn't Yeah, definitely, definitely a little jank. Speaking of which, we're going to be doing episode on performance stuff and how to get rid of jank. So nobody likes that. Nobody likes a janky website. - -141 -01:04:53,970 --> 01:05:11,580 -Wes Bos: janky I'm glad that word has hopefully it's not offensive. I said uh, was it a couple of I don't think it is. I've been Saying it for four years, but something else I was saying the podcast a couple weeks ago, I had unknown to me was was actually offensive. So apologies if you know what that was. Yeah, that's the hard part. If - -142 -01:05:11,580 --> 01:05:16,620 -Scott Tolinski: you say something you don't know. It's Yeah, it's it to people like an asshole. Yeah. - -143 -01:05:18,630 --> 01:05:22,440 -Wes Bos: I don't think janky is. I don't think jakey is offensive. - -144 -01:05:22,890 --> 01:05:24,840 -Unknown: It just sounds like it sounds like it could be. - -145 -01:05:25,080 --> 01:05:43,730 -Wes Bos: Yeah, it does. It definitely sounds like you could offend some sort of person there. All right. Um, so we did the YouTube videos. Um, let's wrap it up with our last question, which is, what are you working on mentally, personally, right now that this is kind of an interesting one. Yeah. Yeah, - -146 -01:05:43,730 --> 01:08:32,010 -Scott Tolinski: I personally, I like develop this. I have this app, I think it's called habits habits app, I'll link to it, it's or something. And basically, you put in your your habits that you would like to keep. And then you'd say like, what frequency you'd like to do them. I'd like to do this five times a week or whatever you set up reminders and stuff like that. So I have several habits and the URL, track them on your graph. I originally started using this app, because I wanted to be better about flossing, which is ridiculous. But I was never good. Like, I was never good about sticking to flossing. And I always felt bad about it. Like, I just don't like it. I still don't like it, right. But I understand why it's so important. So I was just like, you know what, screw this, I'm actually going to I'm an adult, I'm going to make an effort to floss all the time, like, like a daily, whatever. And I use this app to track my flossing, which is so stupid. But I have not missed a single day. I have not missed a single day since I started this app. And which is ridiculous. But so I use this app to track everything now. So I've been trying to stick really hard on it. So like, you know, I have to work out X amount of days a week, I have to one of the things I have on there now is a daily to do list if I, which I've been failing spectacularly on when I make a daily to do list, I'm always more productive, right? Always. Yeah, so like, I am not doing my daily to do list in the past, like two weeks, I haven't gotten a checkmark on that one. And it's stressing me out a little bit. And I think that Yeah, so things like that. So I'm trying to do a daily to do list I'm trying to do like a daily question, why write down a daily question, something that I want to solve that way I can make sure I'm answering or learning something every single day, even if it's small, like just something that pops up while I'm coding. Why do I need to do this and Apollo with graph qL? I don't know. I'll take some time to research it maybe like 15 minutes or something daily question. I'm trying to cut kill my inbox a little bit, get that totally. You know, we talked about Inbox Zero, whatever. But I'm trying to get it just just totally under control all the time. So I'm fully aware of everything in there. I'm trying to do handstands every day, which I'm not doing. I'm doing them like every other day, but I needed to do them every day. I'm trying to stretch my quads every day. Because I really tight quads. It's like causing me a lot of problems and athletic things. So I also have like a morning face washing and evening face washing routine that I need to do. I have like all these habits I'm tracking. So but yeah, that's pretty much it, man. It's all about for me, it's like trying to get this, these routines in order because like everything else is so chaotic right now, like life wise. So it's like, get this stuff that you don't have to think about. Get it tracking, get your reminders in. And yeah, get it done. So yeah, it's for me just trying to establish better routines. - -147 -01:08:32,370 --> 01:08:36,510 -Wes Bos: Let's call that habits. I have to check out that habits up. That seems pretty neat. Yeah, it's - -148 -01:08:36,510 --> 01:08:38,180 -Scott Tolinski: beautiful to really nice design. - -149 -01:08:39,120 --> 01:09:45,030 -Wes Bos: Awesome. So for me, I'm just trying to I talked about this earlier is finding that sweet spot between working really hard and avoiding that that burnout stage trying to figure out where that because I feel like I've got into a nice groove with my business and how things are going and whatnot. And then I think now it's time for me to maybe turn towards just like other things like obviously exercise and, and whatnot. And I've been also finding myself when I'm at the gym, not all that interested in some of the business podcasts. So I think that maybe that's a bit of a sign that like I listened to the music and music at the gym the other day. And I was like, Oh, this is so nice. I forgot about how much I just love enjoy listening to music or, or even with podcasts listening to stuff that is just not technical, technical or not business related. So that's kind of trying to focus on getting into that sweet spot, both in business as well as sort of the the rest of my life. So I know it's kind of hand wavy, but I'm trying to quantify exactly what that is right now. - -150 -01:09:45,030 --> 01:09:46,470 -Unknown: Yeah, yeah, - -151 -01:09:46,470 --> 01:10:01,950 -Scott Tolinski: I totally get that. I definitely definitely get that. I can count like so many podcasts that at the time I subscribed to them also. Yeah, I'm so into this and I listen to 100 episodes and then be like, okay, I've gotten everything out of this. You know, that I could get out of this? - -152 -01:10:02,370 --> 01:10:42,140 -Wes Bos: Yeah, exactly. And I think that's part of continuous self improvement. Once you've feel like you've got a pretty good handle on something, then you you look other where your other other places in your life and figure out okay, how can I, what can I tackle next? What can I get better at next and then you get those systems and things in place. And then ideally, you you just get better and better at all these different pieces and then you learn how to smoke me and then you move off of that and then you learn. I don't know, maybe I'll try to do a handstand. Next. That'll be my The thing that I tackle. Yeah. I think that's that's super important. I think it makes me a better developer, focusing on perfecting other areas of my life. - -153 -01:10:42,720 --> 01:10:52,200 -Scott Tolinski: I think what you're saying is that, you first you do a downtown job, and you just let everything else grow from there. - -154 -01:10:52,220 --> 01:11:06,750 -Wes Bos: Yeah, exactly. Yeah, exactly. Cool. Cool. Pretty good. Cool. Cool. Cool. Um, I don't know we're running pretty long now. Do you want to hold off on some some sick pics until next time? Or what do you think - -155 -01:11:06,770 --> 01:11:08,810 -Scott Tolinski: I have a quick quick sick pick - -156 -01:11:08,850 --> 01:11:10,410 -Wes Bos: a quick pic. Okay, yeah, quick, - -157 -01:11:10,430 --> 01:11:30,890 -Scott Tolinski: quick. pic is a new podcast that just came out. For those of you who like history. For those of you who specifically who like hardcore history, which is an excellent podcast in itself, where they do like these long as like five hour long post, like hardcore bands. Yes, like hardcore bands. I love the history of hardcore bands. In - -158 -01:11:30,890 --> 01:11:32,910 -Wes Bos: 2000, the chariot became a band. - -159 -01:11:33,140 --> 01:11:43,170 -Scott Tolinski: There's a whole episode. Oh my god. This is awesome. This is Dan Carlin, the host of hardcore history. And - -160 -01:11:44,850 --> 01:11:50,100 -Wes Bos: George Carlin. Nice. Dan Carlin. Carolyn. No, I said that. I said, George Carlin. - -161 -01:11:50,340 --> 01:12:13,830 -Scott Tolinski: I would do that. Okay. And basically these are like, more frequently episodes because the hardcore history ones like take me he gets like two episodes done a year. He's sick of that. So he released new new podcast, Carl called hardcore history addendum, which are going to be more frequent, shorter episodes. And hardcore history is like the single greatest podcast. So I'm so excited to have this new podcast from Dan Carlin here. - -162 -01:12:14,600 --> 01:13:46,730 -Wes Bos: Awesome. All right, I'm gonna like pick something as well. So I had a workshop, a react workshop on Friday. And one of my students was Tracy Osborne in she actually just moved to Toronto. And she is a mostly I guess she's mostly like a Python developer and a web designer. She's pretty neat. Actually, she also a business owner, if you listen to the indie hackers podcast, she has one on there. And she just put out this book called Hello web design. And it's it's awesome. It's I'm gonna show Scott right now it's like a nice it's a small enough book that you can get through and not feel overwhelmed. And it's it says this design fundamentals and shortcuts for non designers, which I love because people always ask me like, how do I get better at design and this is actually like concrete things that you can do it goes through things like grid and color typography, whitespace content, user experience, using images, planning, prototyping, coding, your design, it kind of just goes through all the stuff as a non designer if you're in the book is beautiful, it's done in full color it's a nice small size you can throw it in your bag read a couple pages on the subway or whatever so pretty pretty neat and pretty excited to I haven't obviously haven't read the whole thing yet but from from flip flipping through it reading a couple pages and and chatting with her I feel confident enough to recommend it as well and I also tweeted out a bunch of people were like Oh, I love that I love her book. So definitely recommend you check this out if you want to get better at design - -163 -01:13:47,250 --> 01:13:48,450 -Scott Tolinski: nice awesome - -164 -01:13:49,620 --> 01:13:52,050 -Wes Bos: cool any shameless plugs sick - -165 -01:13:52,100 --> 01:13:59,040 -Scott Tolinski: yeah no just a levelup pro new content every month subscribe to level up tutorials comm Ford slash pro suite. - -166 -01:14:00,000 --> 01:14:33,020 -Wes Bos: Yeah, my courses you know about them Wes Bos calm for slash courses. pick one up, take a free one. Whatever it is that you like, have a bunch more stuff coming out in the in the coming weeks. Nice. Cool. So I hopefully you enjoyed that. If I would love to hear what you thought about this episode. If you'd like the it's kind of a different not coding show. I think that people are sort of interested in I always like hearing kind of the lives behind the actual people. So if you like that make sure you tweet at Scott and I am at Wes Bos Scott is at s toes in ski s Tillman ski. - -167 -01:14:34,080 --> 01:14:35,760 -Scott Tolinski: Just the easiest name to remember. - -168 -01:14:37,680 --> 01:14:43,350 -Wes Bos: There you go. You'll find him. Other than that, we will check you next week. - -169 -01:14:43,920 --> 01:14:55,590 -Scott Tolinski: check you later. Peace. Please head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax310.srt b/transcripts/Syntax310.srt deleted file mode 100644 index 2fd97b67a..000000000 --- a/transcripts/Syntax310.srt +++ /dev/null @@ -1,548 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:09,930 -development treats out there. strap yourself in and get ready to whiskey and West boss. - -4 -00:00:10,559 --> 00:00:46,229 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there today we have a show much requested show we did a show on serverless I think once before but today we have Brian LaRue on today to talk to us all about serverless. And I want to ask him questions about TypeScript and maybe Dino as well. So we'll get into that in just a second. today. We've got two awesome sponsors. First one is Netlify. Second one is Sentry. We'll talk about them partway through the episode. So with me, as always is Mr. Scott Tolinksi. How you doing today, Scott? - -5 -00:00:46,259 --> 00:01:09,360 -Scott Tolinski: Oh, I'm doing great. I'm doing fantastic. I'm actually doing very well. Despite that, we have kind of a rough like kids day this morning. But other than that, everything's gone. Very, very good. So yeah, just ready to get into it. A little bit about serverless. This is a huge gap in my knowledge base. Because I know that the basics, but I don't know the ins and outs. Really, really completely so. Yeah, so - -6 -00:01:09,360 --> 00:01:12,980 -Wes Bos: that's why we have Brian on here. Hello, Brian. Thanks for coming on. - -7 -00:01:13,259 --> 00:01:17,700 -Unknown: Yeah, I'm stoked to be here. This is my favorite podcast. - -8 -00:01:17,969 --> 00:01:36,450 -Wes Bos: It's an awesome. It's funny because I initially found out about you. Probably 10 years ago, I was watching a Jay .js cough talk. He made Caesars as part of your talk. I think it was like a phone gap talk. See? Like this Canadian. Second Bloody Mary. But what oh, oysters. - -9 -00:01:37,860 --> 00:01:39,930 -Scott Tolinski: until just now I'm trying to figure out what Caesars was. - -10 -00:01:40,410 --> 00:01:47,790 -Unknown: It doesn't sound good. But it is good. So it's it's like a Bloody Mary, but with clam juice. That. - -11 -00:01:50,160 --> 00:02:05,280 -Wes Bos: Right? You can buy the premix gelada, which is like the Mexican kamado and beer mix together. Okay. Yeah, it's kind of like that. But instead of half beer, it's like a vodka or gin or something like that. It's very good. - -12 -00:02:05,370 --> 00:02:08,030 -Unknown: Yeah, I've been making them with tequila lately, actually. - -13 -00:02:08,030 --> 00:02:08,630 -Scott Tolinski: Oh, - -14 -00:02:08,910 --> 00:02:13,620 -Unknown: yeah. It's a nice way to mix it up. Hot point 2020 style season. - -15 -00:02:16,350 --> 00:02:23,060 -Wes Bos: So do you want to give us a quick rundown of what you used to do, as well as like what you've been doing for the last couple years? - -16 -00:02:23,400 --> 00:04:43,760 -Unknown: Sure. Yeah. Like you said, I used to do a lot of mobile stuff. I think this might be a consequence of being Canadian, you got brought up in the early web, and there were blackberries everywhere. And some of them, some of them could even talk to the web. Like they were the first thing that could do that. So that was that was pretty pivotal. And I was very much into mobile and iPhone happened. So that was kind of a big deal. Yeah, hit like, hit the web, kind of like a meteoric, you know, like, people were really worried at the very beginning, the native code is gonna take over as the web, you know, thing of the past this mobile form factor, and the experience is so much better. And, and the team that I was working with at the time called my Toby, we were very Webby people. And we're like, wonder if we can embed a web browser in this thing. And sure enough, we could. And everyone said, that's a terrible idea. So we knew we were onto something good, because I never people say that that's usually something unexpected good comes out of it. And yeah, that was the PhoneGap project. And later, Apache Cordova and I spent a lot of time thinking about embedding web browsers and building single page apps in the mobile form factor and, and the compilation side of it was actually another big part of the problem space, we were running a hosted service where you could upload code in the cloud and pump out iPhone apps. But the dirty secret under the hood was that we had a whole bunch of Mac minis and a beer fridge. Powering that. And really, yeah, for real, that's awesome. Yeah, and so load balancing an early monolith with actual hardware and, and that that journey led me down during the cloud thing. And eventually the cloud thing. I fell backwards into doing the serverless thing. And I thought serverless, I was late to when I started doing it. And around 2014 2015, it was like, obviously, this is where this is all going. And it was clear to me that the future was going to be on demand, it was going to be stateless. It was going to be these fast, tiny little functions that you deploy up into the cloud. And you don't think about runtime or anything like that. Helped co author a framework called architect, now, co founder of a startup called begin.com, where we make it super easy to deploy the serverless applications to AWS 30 seconds or less. You could have a URL on the internet. And yeah, that's what I've been up to these days. - -17 -00:04:44,040 --> 00:04:56,510 -Scott Tolinski: I'm glad you mentioned begin at the very end there because I first tried out begin on a YouTube video called Scott trice begin, it was like my first initial attempt at trying it and I loved it. It was a it was a - -18 -00:04:56,510 --> 00:04:58,070 -Unknown: chance to watch that video. - -19 -00:05:02,450 --> 00:05:03,240 -Wes Bos: people mad. - -20 -00:05:04,830 --> 00:05:31,650 -Scott Tolinski: Yeah, some people got really mad specifically when their product didn't work. Again, they understand. Yeah, it happens, right code happen. And like, that doesn't mean I'm never gonna try it again. But begin was one of the ones that I thought was like, just so buttoned up in terms of like, the little details being like fantastically there and, you know, lots of little joy moments. So, yeah, I'm really, really pumped with all the work you're doing over there at begin. - -21 -00:05:31,950 --> 00:06:12,780 -Unknown: Yeah, we have a belief that the developer experience can really be kind of like a consumer product experience, it doesn't have to be a bummer to use. It can be fun, it can be mobile, it can be Webby, and it can be friendly. And, and the cloud kind of isn't any of those things yet. you hop into the AWS console, it's it's notating, the dating nightmare, the needs of the near that's friendly for folks to approach it and figure out how to reason about it. And, you know, it's our belief that that audience just grows. And a lot of folks want to get on AWS, they want all these superpowers, but they don't want to deal with - -22 -00:06:15,540 --> 00:06:16,170 -like, Listen, I - -23 -00:06:16,170 --> 00:06:16,920 -Scott Tolinski: do not want that. - -24 -00:06:18,180 --> 00:06:45,090 -Wes Bos: Alright, so for those who are new to serverless, can you give us like a quick rundown of like, what is it what is serverless? Even like I, you hear this word serverless or lambda or, like spin up and all that in you people don't necessarily, especially if someone's like new to programming, they've not necessarily hit the issues that serverless solves. And they're just like, I don't get why I have to code my code differently. For this to work. - -25 -00:06:45,600 --> 00:08:59,190 -Unknown: Yeah, that's super important. Point two. So what it is, is definitely a nebulous thing. So it's become kind of a buzzword. Everyone wants to use the buzzword and it's spread out. But in I believe the serverless community would generally agree with me that serverless is more of an idea about how you approach your application architecture than it is a collection of logos that you need to have to implement against. And the first sort of principle of it is you want to outsource undifferentiated, heavy lifting to a third party vendor, you don't want to rack servers yourself, yet, you know, you what you want to do is probably rent that compute. And if you take that rent the compute thing to its logical conclusion, you probably don't even want to read the metaphor of a server, you just want to rent like the function execution, you want that to be ideally on demand and stateless as fast as possible. uptime is like a thing that we pride ourselves on. But when you think about it, it's just a terrible inefficiency, for pre provisioning a whole bunch of capacity, or we have a whole bunch of servers laying around doing nothing waiting for a spike to happen, we're paying for stuff that is not adding value. So the on demand model is a pretty important component to this being stateless is pretty important component to this, it can be you know, any high level service. So I can think of stripe as serverless for payments, right? You can think of Twilio is serverless for SMS. But a lot of people can play it with functions. And I think that's fair, because that's the most primitive primitives that you can get. And the function execution often often gets, you know, foisted over to AWS lambda, that's the granddaddy in the space. AWS are the first people to sort of say, Hey, we're gonna charge you by the function execution. And it all fell out from that. And those function executions are an important part of the story. But you can be serverless, without any lambda at all. You could consider s3, maybe the greatest granddaddy of all serverless things, and you put your index HTML on that thing, and it scales forever, their servers, but you're not writing about that. And that's like, the old joke, you know, there's servers and servers, and that's fine. Some service folks get a little bent out of shape over that one. But there is - -26 -00:08:59,190 --> 00:09:32,010 -Scott Tolinski: like, a lot of people who get fired up about the term serverless for some reason, and they're like, there's no such thing. But like, I mean, it there's there are technical reasons why, like, this is a different platform, right? I mean, it's just so weird that people hear the word serverless and get angry about the fact that they're, I mean, just like the cloud, it's somebody else's server. Who cares, right, that there's there's the advantages and reasons why and like it don't get caught up in I don't know the binding of it all or whatever. - -27 -00:09:32,520 --> 00:09:36,899 -Unknown: We want everything to be a one answer, which would be really great. - -28 -00:09:36,960 --> 00:09:38,539 -Scott Tolinski: Yeah, no, yeah, exactly. - -29 -00:09:38,610 --> 00:11:23,340 -Unknown: Unfortunately, reality intervenes, and there's lots of answers and they're changing all the time. And that's complicated and scary and and you know, if you know how to do something, one way that you see this new way if you know could be offensive to your, your sensibilities, you might be incentivized to think otherwise. Economically, there's lots of reasons to be worried about what certain This is gonna do to the existing application architectures that are out there, because it is such a big game changer. You know, if you're part of the last generation of software developers you might be looking at this is existential, which I don't think you should, because there's never been a moment like that in history of compute, we tend to just pile technology up on top of technology. And, and that works, you know, like, the story isn't either or it's and also, it's Yeah, how can I leverage this in my new project? or How can I bring this functionality over to our existing legacy infrastructure, like, I have a good story for this one, we're working with a client that's got huge Rails app. And some of it is written in dotnet. Somehow, and terabytes of data, they're not moving that to serverless. But they have a front end team that wants to build a modern front end for this thing. So they put it behind a graph, qL proxy. And now these teams are communicating through schemas, they're able to build up on their respective sides, they can leverage their existing investment, and they're starting to pick off functionality one by one, moving it over to Cloud Functions. So it's, it's nice to see that we're kind of getting past this either or serverless. Bad and we're now seeing more commingling of the techniques. And a lot of that's been driven by front end. - -30 -00:11:23,610 --> 00:11:53,039 -Wes Bos: Interesting. So in that, like graph, qL proxy, so what's happening when they're moving it over is that they have like, a bunch of serverless in the middle, if it's part of the existing app, they just pass that through to the existing app. But then they'll say, like, Alright, you know, we're gonna do like, client dashboard or PDF generation or image resizing. And is that how it works, they just pick off like pieces of functionality, and move them from this monolith to a function like taking data returns some data. - -31 -00:11:53,460 --> 00:12:49,830 -Unknown: Yeah. And it's, it's interesting, because the ones you're citing are good examples for like things that people can do now. So you know, we used to run these cron tasks, that would be a server that would build PDFs or something from a database dump. And, and that's incredibly common, that's a perfect use for a Cloud Function. Because you can schedule these things, they go away, you only pay for them when they use them. And you don't have to worry about any of that scheduling stuff. It's probably just a copy paste the logic. Now you're not limited by runtime, there's no reason why you can't bring any binary you want with you using lambda layers. So yeah, there's a lot of this migration stuff is starting to happen. And it's, it's neat to see because running these types of older school workloads was painful. Yeah, a lot of work that you didn't need to do. And now you don't need to do that. Why would you? Yeah, yeah, we're, - -32 -00:12:50,309 --> 00:13:41,309 -Scott Tolinski: it's very interesting, interesting time, I do want to go back to the whole, like, legacy technology bit just for like a one second is just just to add on to what you're saying is just that, so many of the best flash developers that I knew are now the best JavaScript developers that I know. I mean, if you're out there hearing a lot of these things and feeling overwhelmed about not knowing them, you you you have, you know, your skills will apply. And also what you were saying there reminds me a lot of how people are starting to use wisdom in bits, right? You're sort of offloading the either higher complexity bits, the heavier bits, you're offloading them in chunks rather than making some sort of grand migration all at once. And I think that's a really comforting thing for a lot of people to know that it's not like picking up and moving your platform to serverless. It doesn't need to be like that, or should be like that. - -33 -00:13:41,789 --> 00:14:02,250 -Unknown: Well, I learned JavaScript from ActionScript. Two. So that was definitely where you know, like, writing JavaScript 15 plus years ago was pretty out there as an activity. But writing, building flash apps was not a lot of that stuff came over into ESX. Thank God it did. - -34 -00:14:04,830 --> 00:14:06,179 -Yeah, yeah. - -35 -00:14:06,179 --> 00:14:42,270 -Wes Bos: So let's talk a bit more about like, if somebody is working on a traditional app right now, their skill set will move over. Like if you're working on a node app, you can just write JavaScript in a serverless function, even like I know, an architect there is even like an express function where you can just like literally take your Express controllers and plop them in. And there's like a couple of things that are you kind of have to like know about about serverless functions that are different than a traditional server, like what are there there's like, there's no memory, really, because like if it spins down, that's gone, right? Like that computer is now doing something else. - -36 -00:14:42,659 --> 00:16:15,210 -Unknown: It's completely stateless. And they do stay warm as it were. So container will get reused under the hood or a VM will get reused, but not for the same execution. So like a brand new executions happen, and this is there's concurrency. So if you get hammered with 10 requests, you probably get 10 separate instances of VM responding immediately. And then that scales up by default to 1000 on a on a stock Amazon account, but I know of people that have bumped that limit up to 40 or 50,000. So it's, it's wild, what we can do now is so the scale part of the questions is out. But the trade off, as you mentioned, is that you don't have a disk, not really, you get 500 meg temp disk, and you can have it for 15 minutes, which is pretty good, you can do a lot of stuff with that. Most web apps respond within a few seconds. So it should be should be plenty to do what you need to do. If you're building a web app, if you're building something that needs to do longer, lived, you know, invocations, this isn't the perfect technology for that today. But the thing I keep trying to remind people is, when we started this journey down serverless, it was three seconds of execution. And today, it's 15 minutes, and that number is not going to get lower and, and the cold start is going to continue to drop to zero. And as there's more competitive pressure from Azure and other players, Amazon will continue to drop prices. So this paradigm just keeps getting better. Yeah, yeah. - -37 -00:16:15,240 --> 00:16:26,549 -Wes Bos: Can you tell us a little bit more about a cold start? Because that's something you hear against serverless haters, they'll say, I rather give me Kubernetes or something all day long. But the cold start kills me like, what is that? - -38 -00:16:26,909 --> 00:17:45,800 -Unknown: Yeah. So when the lambda function gets invoked, it has to mount itself into a virtual disk of some kind. And that mounting process is effectively unzipping the file system. And if it's got a big file system, it's going to take longer, and the cold start is pretty much directly correlated to that mounting. And, you know, if you have a, if you have a bigger function, it's gonna take longer to start. So the solution is write small functions, keep them under five Meg's and you will be sub second cold starting, we typically see a begin cold starts between 70 and 100 milliseconds now. So it's not really an issue anymore. I mean, not a human perceptible issue, if you're really trying to count those milliseconds, and you're doing a real time app, this might, might not be perfect, but it's pretty close. Yeah, so older application architectures really didn't contend with cold start, because they were all intended to run for a long time. So if you're running a jar file, it didn't really matter that much if it took a minute to start up. But it matters. Now. If you've got a kind of, if you're running Java, frankly, you're gonna have a bit of a hit to that cold start, that you wouldn't see with a node j s, or a demo or a Python or even Ruby now, it's actually super fast, which is underappreciated. But a great place for for lambda functions. - -39 -00:17:45,860 --> 00:17:46,470 -Wes Bos: Awesome. - -40 -00:17:46,680 --> 00:18:10,260 -Scott Tolinski: So you mentioned briefly about like languages, what languages are and aren't suitable, because so there was like, it was briefly touched on there. But I think this can even lead into some of the talk about Dino and in TypeScript here. So like, if we're, if we're writing serverless functions, would something like let's say rust be appropriate for serverless? functions? - -41 -00:18:10,440 --> 00:19:13,650 -Unknown: Yeah, sure. So lambda has a few ways of extending itself. And of the popular easy ways layers, and layers let you bring anything you want to the party that can compile into Linux runtimes. So rust is in play goes and play dotnet, Java, you name it. All that would would be possible or is possible, your default is probably no j. s. Yeah, the demo thing is exciting, because Ryan and Bert are well aware of the importance of cold start, and they note are going to be competing on this more and more as time goes on. Notice amazing start properties, and then oh, still faster. So this doesn't probably matter to someone who's just building sort of like a whatever web app. But if you have a huge workload, and you're doing, you know, millions of invocations, that starts to add up, and that becomes a cost center that you will pay attention to. And so there's going to be some economic incentives to think about this over the long run. - -42 -00:19:13,650 --> 00:20:09,030 -Scott Tolinski: Have you heard of this ayliffe dot j s platform? I guess you could say, this just came on my radar today because Joe, I'm sorry, Joe, if I mispronounced your last name? previte or .js. Joe is maybe how more people will know him on Twitter. He just tweeted about this today. And I've never seen this before. And so this library ayliffe dot j s is basically you could think of the demo for Dino whatever for next j s comparison so you get filesystem routings static site. And I'm interested in this because I don't see anything about their whole serverless API folder structure, but I know next, j S has been pretty responsible for a lot of people using serverless functions a little bit easier in the mainstream more recently, so I don't know if this was on your radar. But I, this just popped up for me today. And I thought this was kind of interesting given the topic of, you know, Dino, Dino verse, no .js. Here, - -43 -00:20:09,350 --> 00:20:58,170 -Unknown: it looks cool. And I think this is where we're gonna see a flood of these because denno takes out the a lot of the config steps required to build something like this, like, you get SSRS or for free, because it's just part of how dental works. Being a TypeScript based runtime, I imagine we're gonna see a lot of these types of things. And yeah, from a, from a lambda perspective, this stuff is just another thing that can pop out a string, you know, it could be a basket, it could be done, oh, it doesn't care. And that string, if it's got markup, and you will do the right thing by, but you don't have to now think about the routing layer the way that we used to, and you don't think about the load balancing layer. And, and the cost is also way, way, way, way cheaper. I think it's something like 10 cents per million executions. So - -44 -00:20:59,910 --> 00:21:01,440 -Scott Tolinski: yeah, sounds good. Yeah. - -45 -00:21:02,040 --> 00:21:12,030 -Unknown: And you can spread that out across Amazon accounts, you can enjoy a free tier of 1 million executions. And so it's just, it's ridiculous. So cheap, it is comparatively - -46 -00:21:12,269 --> 00:21:44,910 -Wes Bos: amazing. Cuz like, yeah, sure, like I hear all the time that even in my own courses that we go to host a note app, and it's 510 bucks a month. And if you've got, like, you can run one $5, digitalocean server and whatnot. But that gets that gets really frustrating, especially if you just want to like have a bunch of projects, like I remember back in the day, you'd have an FTP folder. And I have 100 little fun projects in there. And that seems a lot harder nowadays, especially like you could there's a lot of free services out there that you can host them on. But who knows if that's going to be around and forever as well. - -47 -00:21:45,210 --> 00:22:29,130 -Unknown: This is my backwards math on Amazon, I think some people get a bit shaky on them. Because you know, it's a big scary company. But they've they've got, I guess the burden of proof would be on someone to say not Amazon, like, why would you? Why would you subject yourself to that breaking changes that you can't control from upstream? Or whatever reason, like they've been around forever, they don't break their API's. They're only getting cheaper. They're the market leader. So to me, it's easy to go there. I think as a company, I kind of understand like, if you're Walmart or the retailer, maybe you're bright. Yeah. As long. But there's a self interested web developer who doesn't have time for this. Like, yeah. - -48 -00:22:33,240 --> 00:22:47,640 -Wes Bos: That's, that's a good point to sort of explain how everything that you touch on sort of works together, because you've got like, there's obviously Amazon, which is the big supplier. There's, there's other ones out there, like Google Cloud, Google Cloud, does it Azure does it. - -49 -00:22:47,760 --> 00:24:19,830 -Unknown: And that's the thing, I kind of don't believe that they do. But I'm deep in this. So they use the word serverless, that if we start measuring on the kind of criteria that I'm thinking about about undifferentiated heavy lifting, and not managing scale and on demand only. And the other big part of this is determinism through inference code. A lot of the other providers just do not have these characteristics yet. case of Azure, they have a functions product, but you're still running instances of Kubernetes. And the functions are in a shared responsibility models, so they're all lumped together and save instance, in AWS land, these functions are really completely isolated, separated things that can interact with each other in any way whatsoever. And, and that's why you want, you're starting from the least privileged, most secure, most performant way to approach it. Thanks, GCP. I don't know they keep shipping stuff and deprecating stuff. So I honestly don't even pay attention, because I sort of feel like they're a waste of my time. And a harsh thing to like, say, but it's, you know, they're not even in the number two spot. So like, I only have time to really focus on maybe one and two, and that would be AWS and Azure, Azure, I'm excited about long run, because they've got better distribution channels to AWS, you got GitHub, you got NPM, you've got TypeScript, code, code spaces. So like that cloud is going to be important, whether we like it or not. And then finally, this is important, because they are de facto at the moment. Totally. - -50 -00:24:20,160 --> 00:24:37,380 -Wes Bos: Okay. So there's obviously that and then there is architect, which is the open source framework. So instead of, let's explain, like, what architect is, like, how you is an open source product, and then explain how that relates to what begin is, which is your company, right? - -51 -00:24:37,769 --> 00:26:58,080 -Unknown: Yeah, so architect is an open source, way to generate cloudformation. And in the future, hopefully will be open source way to generate other types of cloud infers code solutions. And so to explain what that is. cloud formation is a document type that you can hand AWS and they will generate resources for you. And the reason you want So the reason this is important to you is you can get the same thing every time. If we're telling AWS, I need three lambda functions, you're gonna always get three lambda functions on the other side. And this seems like kind of contrived. But if we don't specify our infrastructure in some kind of manifest file, there's no way for us to get a deterministic results on the other side. So it's kind of like a lock file, same idea, except for instead of code dependencies, it's your cloud dependencies, you want to check that in with your code. So you can tell the cloud Hey, I need, you know, an API gateway in s3 bucket, I need this particular security rules for it. And that document is extremely hard to write and very verbose and takes a lot of insider knowledge. So architect is a high level format that generates those documents. So you can just focus on your business logic and your app concerns without having to deal with the low level details. We don't lock you out of that, you can still modify and read the cloudformation. It's totally accessible to you. But we just make it easier and faster to generate that, run that locally, begin deploys cloud formation documents. By default, we deploy cloud formation documents generated by architect, there's nothing stopping us or in the future from deploying other kinds of cloud formation documents, but we're keeping it on the happy path right now. Because we can control the local development experience. And that's a really big key for us. So there's a lot of Amazon out there. And we can emulate all of that. But we can emulate the services that we kind of curate and pick. And the ones for web development in particular are interesting to me. So if you need to access like, machine learning stuff, or any other hardcore, like analytics stuff, you can still do all that. But we make all the web app stuff really easy to do. And we make it run all locally so that your development cadence isn't impacted by having to wait for a deploy to see what happens on the other side. Yeah, - -52 -00:26:58,080 --> 00:27:24,150 -Scott Tolinski: I think that's really been long, long standing. One of the biggest gripes some people have with serverless is just like what the local dev picture looks like in terms of like, ease of use and developer experience there. Because in my experience with it, it has it hasn't been always the smoothest trying to test and use these functions locally on various platforms. So it is interesting to see that that specific aspect of it improve in various ways over time here, - -53 -00:27:24,540 --> 00:27:45,210 -Wes Bos: like the one thing I was pleased to see was, its I was just like, oh, serverless it's just functions, right? Like you said, people just think it's all functions. But like, it also has assets like images, database under the hood. What else WebSockets scheduled functions. It's like a cron job kind of Yeah. - -54 -00:27:45,420 --> 00:29:24,000 -Unknown: Yeah, schedule functions. cron functions, sometimes people call them events. And functions are another one that we're starting to see other providers realize that you need but sometimes you need a background task to run for a few minutes, like when someone signs up, maybe you want to send an email, but it takes a minute for that process to run. And you don't want to block the web requests, sending emails, and yeah, then you then you've just created an API for DDoS in yourself. So you want to have that run in the background somewhere and fire off an event. So that's another capability. And queues are another one that's under appreciated, but kind of cool. So sometimes you need a background task. But you can't hit an API a whole bunch of times all at once. And you need to queue that up so that you know you're only eating out like one at a time. So that's another one that's really important. database streams is another cool one. So we support dynamodb. You can write data into and out of Dynamo. But you can also subscribe a function to that. So you can start composing your app on events in the database. Oh, that's cool. Yeah, yeah. Yeah, there's this sort of new world where our data is blending in with our compute. And the data too, is another thing that scaling to zero. So this is not intuitive, but like Redis popularized having a cache and having a timeout on that cache. There's a ton of good patterns for that. And you want to persist the data, but you only want to persist it for a little bit, like shortleaf tokens for session state for reset your Reset Password flow, you know, you might have a token that's going to expire in five minutes. That's super easy to do now, I don't know. Yeah, there's lots of lots of things that set it apart, that's for sure. - -55 -00:29:24,240 --> 00:30:59,340 -Scott Tolinski: So I'll take this quick moment to talk about our first sponsor today, which is sentry@sentry.io. Now, I actually just pushed a new update to level up tutorials last night, and we were watching Sentry pretty closely, because when you do a new release, it's kind of nice to have your your eye on things in case you introduced any new bugs. And this happened to be a really huge update. So we just completely rewrote the account system. before we're using meteors baked in accounts. And now we're using accounts j s, which is just like a, just a node based account system, right? And it's nice because it plays well with the current account system. We had But moving your account system, very scary, very, very scary. And we had some errors come in that kept saying invalid credentials. And that's not the kind of thing you want to see after moving your account system. And it turns out, the new account system just reports errors, it throws in a way that our other one did it. So when people are goofing up their password, it's throwing in our Sentry caught that, and we were on it at the moment, and we're able to find out, oh, oh, it's just people messing up their password, it did. The site's just throwing, there's no issues able to breed this morning. So Sentry had my butt for that, because I had my call stack, I could see how many instances of this happening, I could see the users, I could see that this was in fact introduced in the build that we deployed last night. And it's not a bug. So thank you so much to century for sponsoring us and love you every single day. So head on over to sentry.io use the coupon code at tastytrade. all lowercase, all one word, get two months for free. And you can breathe easily, just like I did this morning. So thank you. - -56 -00:30:59,670 --> 00:31:09,450 -Wes Bos: You're a big fan of TypeScript and types, right? I think I saw a tweet from you the other day that they were talking about bringing optional types to JavaScript. Was that you? - -57 -00:31:10,170 --> 00:31:13,350 -Unknown: Yes. It might have been might have been stating that. - -58 -00:31:14,310 --> 00:31:22,470 -Wes Bos: Why are types in JavaScript so awesome, whether it be TypeScript or like, do you even think we're gonna get types in regular JavaScript someday? - -59 -00:31:22,610 --> 00:32:08,280 -Unknown: I would assume so. I mean, I don't know why we would stop improving language. Now. It's, it's always been painful, for sure. But you know, Ruby, and Python have just done this too. And I think they took a lot of inspiration from the incremental typing that you see with TypeScript. And yeah, it makes for a better debugging experience, in many ways. You catch those bugs earlier. And, and that's nice. And it's especially nice in a dynamic language like JavaScript, where TypeScript can only help us right now is that author time, which is great, you know, any help is better than no help. And I particularly like using the J s doc style. So it's very unintrusive. I don't need a build step, I can just annotate my functions, and I get all the help in Visual Studio - -60 -00:32:08,280 --> 00:32:16,860 -Wes Bos: code for our listeners, that's where you instead of putting the types in the like function and the return, you write it in a comment above the actual function, right? - -61 -00:32:17,400 --> 00:32:49,410 -Unknown: Yeah, or you can import type deaths. So you can, you know, write your own type deaths, and then import those in the comment. That seems to be like a really nice way to work, but doesn't help me once I go to production and my codes running live. And now this is a can of worms. But boy, it would be nice to have some degree of contract validation on function signatures at runtime. And, you know, being able to capture that data in my submissions of forums or whatever would be really nice, because we're rewriting that code all the time anyway. Yeah. - -62 -00:32:50,490 --> 00:33:31,410 -Scott Tolinski: I think I'm candidate number one for the the type of developer that went from being like, Oh, TypeScript is too much work for me to being I need types everywhere across the board now. Like our API is a graph qL API that's fully typed everything is using like code generator to generate the types and types across the board. And I want I want types straight up now in in JavaScript, badly now that I've learned just how awesome they are as a non computer science person. Overall, I just think more developers as they get more into TypeScript, like I have will see that just how beneficial it is to have that stuff and having an unread time would be would be sweet. - -63 -00:33:31,610 --> 00:34:34,080 -Unknown: Yeah. And like Daniel gets us a little bit closer, it's still kind of a little hidden built stuff in there. And they've got some reconciliation to do right now on the TS config side. So when Dino initially launched is ay ay ay ay. He's TypeScript and will respect your Ts config. And then more than two people are using it at once. Now, they've discovered that if they don't have the same Ts config things could be bad. They're they're going to be moving to some kind of recommended system, probably that you can opt in and out of wherever and will hopefully have the same Ts config. And, and that's good. But like, yeah, once you get the runtime, there's, there's just like, slightly more I want out of this. And we don't get that with TypeScript yet. So yeah, and I'm assuming, especially after the whole promise, and the ES modules thing that Tc 39 wants to continue to improve the language. And yeah, I can't imagine that there isn't more broad consensus like that this could be a good thing. Where this becomes problematic is what happens to TypeScript. - -64 -00:34:34,460 --> 00:34:49,710 -Scott Tolinski: Yes. Right. Yeah. Because obviously owned by Microsoft, and there's sort of I don't know interest they're all about you know, is Microsoft become the, the owners of JavaScript, the de facto JavaScript, which is kind of happening if they're only in control of - -65 -00:34:49,710 --> 00:34:54,650 -Wes Bos: a log this that thing we've got to 10 years later. Miko yeah crypt. - -66 -00:34:56,960 --> 00:35:03,440 -Scott Tolinski: Yes. So are Would you say that, you're you're in And no Dino. However, however you say it. - -67 -00:35:03,510 --> 00:35:12,180 -Unknown: Yeah, I keep saying down because they were saying that but now they're all saying, you know, so I'm totally wrong. - -68 -00:35:12,180 --> 00:35:18,480 -Scott Tolinski: We've been saying it wrong every episode that we've said it because we've said it like eight different ways. So there's it's unavoidable. Yeah. - -69 -00:35:18,980 --> 00:35:20,790 -Unknown: Did a dinosaur egg you - -70 -00:35:20,790 --> 00:35:21,960 -Scott Tolinski: know? Yeah, yeah, you - -71 -00:35:21,960 --> 00:35:22,530 -Wes Bos: know, - -72 -00:35:22,859 --> 00:35:24,300 -Scott Tolinski: yeah, it makes sense. - -73 -00:35:24,380 --> 00:36:53,730 -Unknown: I am a fan. I think, you know, more VA based Linux II runtime options are awesome. Notice still great and my my go to like, you know, it's my right hand tool. But as an as a new contender, it answers a whole lot of really important questions, what how this thing could evolve, and I think it's also driving node to be better. So this is when all the way around. The other kind of angle to this. And again, that's just like our nature, we all want this to be like one answer, but there isn't one, you can mix and match this stuff, you can have a demo function, a Ruby function or Python function on the same That's true. And, and that's cool. Like you're allowed and, and it's maybe a good idea because sometimes pythons better at some stuff than Ruby is or vice versa with with demo and, and node like demo for a front end layer is sweet. It's got all the things that you kind of wanted to be there the whole time, it's thinking about the front end from the very beginning with a very browser II API, fetches built in node modules are important export or built in async await is a thing. It's not a bolt on to kind of an older way of thinking. So I can imagine, just like many of the other trends that we've seen, the front end is going to drive a ton of adoption to demo because it paves over a bunch of these ports with node. Meanwhile, nodes not slowing down, they're gonna take a cue from this and improve their story. So - -74 -00:36:53,960 --> 00:37:00,690 -Scott Tolinski: yeah, and I think projects like that ayliffe are going to get a long way. That mean, just make it easy, right? Make it easy for people. - -75 -00:37:00,920 --> 00:37:04,650 -Unknown: Yeah, the end of the day. That's what we're all looking for. We want to go home at five. - -76 -00:37:07,980 --> 00:37:23,250 -Wes Bos: Yes, it looks like they're they're migrating or not migrating, but they're building a lot of the node core API's, right into Dotto, so theoretically, you would be able to take a lot of your utility libraries, just bring them bring them in to denno. Right. - -77 -00:37:23,360 --> 00:38:12,030 -Unknown: Yeah. And the other angles of this, they're, they're paying close attention to what happened with NPM is they lived it. And they're building a lot of that in as part of the standard library for demo. So where we would normally be reaching for NPM to bring our runtime up to some kind of development stack that we need. denno has already made a lot of these choices for you. So it's got a built in linter tester, it's got the full node standard library on the way most of the browser API, and then just a ton of stuff that you probably need, like goods are built in. Other other things that like, for years, we're like, why is not built into node and the node philosophy was to be this lightweight, small core where you would compose it with userland modules. And that has come to its logical conclusion where we have a huge amount of user land. - -78 -00:38:15,980 --> 00:38:18,750 -Wes Bos: One guy can take down half the application - -79 -00:38:18,750 --> 00:38:21,150 -Scott Tolinski: in some of its mining Bitcoin on your computer. - -80 -00:38:21,170 --> 00:39:02,420 -Unknown: Yeah. The other angle on this, I guess, for the dental Corps is coming out from a security standpoint. So they, they want to have versions, kind of full featured standard library, and then have really tight permissions around how it accesses the underlying operating systems that you can really finely tune the permission model. This may not seem like that big of a deal, but it's a pretty big deal. And larger applications, especially in the enterprise, security is key. And if your runtime can block you from reaching out to the internet, or whatever, that's just a handy capability for isolation. So I think we could end up seeing no do some of that too, with time. - -81 -00:39:02,760 --> 00:40:37,950 -Wes Bos: Our sponsor today is another company that has some serverless offerings as well, and that is Netlify. So you probably know Netlify, from being able to host your static website, but they also offer we've talked about the analytics and serverless functions and all that good stuff. And they just rolled out two things recently, which I thought were very, very interesting, especially if you're running like a Gatsby website. And you do need to add some sort of functionality to it. They release background functions, which is great, because if you've got a serverless function, just like Brian said, a couple of minutes ago, if you have something that needs to run a little bit longer, not blocked, though with a web request, then you can go ahead and grab that. So background functions is pretty cool. And then they are in early access. I'm thinking I'm gonna ask for this myself of edge handlers, which I thought was really neat. And what that seems to be is at the edge, you can sort of intercept the request and run Some code at that point. So whether that's I think that'd be kind of cool with the Gatsby website, you could, you could personalize the website a little bit at the edge by running a little bit of JavaScript, they have a whole bunch of different examples here, a B testing, aggregating API localizing content. Pretty nifty. I'm excited to see them. That's like one thing that has been becoming popular in the last a year or so that I've seen pop up is this ability to run code at the edge. So check it out. netlify.com, forward slash syntax. Thanks so much to Netlify for sponsoring, do you think websites should be able to work without JavaScript? - -82 -00:40:37,950 --> 00:40:39,150 -Scott Tolinski: It's a great question. - -83 -00:40:40,020 --> 00:41:02,280 -Unknown: Yeah, I think that's a worthy goal. I don't think I'm going to say that's an edict, or, yeah, something that always is the case. But if you're going to start from a place, I think starting from the place that's most accessible is a good place to start. I think it's easy to do if you started at that place, if you haven't started at that place. It's not easy to do. And that's totally okay. - -84 -00:41:02,480 --> 00:41:48,170 -Wes Bos: Yeah. I remember back in the day, where you would make like a form, send a POST request to the server. And then you would just add a little bit jQuery on top to make that happen in the background. And then you display the answer. And we certainly moved, we moved away from that. And you, you take the action off your form tags now. And you handle it entirely in JavaScript. So it's always interesting to me to see people who are like, No, we can still make this thing work without JavaScript. And that's not just for like, I'm always like, well, who's turning off JavaScript, right. But there's a lot more use cases that that could happen where JavaScript thing fails or something like that, or you're you duck into the subway as a jazz files downloading or something like that, or you submit the thing, and you get back into data. And - -85 -00:41:48,380 --> 00:43:07,880 -Unknown: it's time to first byte, you know, you want to render that markup payload as quick as possible, it's probably the most accessible, which, you know, that doesn't mean it has to be for screen readers. It could also just mean your keyboard on your phone works, you know, the way you would expect when you hit enter kind of thing. And you can absolutely code all this stuff. Completely client side, I definitely wouldn't argue that that isn't the case. But I am saying is you probably want to start with the progressive enhancement thing, generally, because you're gonna get more accessible app. But yeah, it's not an either or it's an and also, it's, again, something also, it's easy to Cloud Functions with any provider, you can add a post handler. And then now you've got the easiest way to do a form. And you can build on top of that pretty trivially. It becomes a sort of zealotry argument to sometimes, which I don't think it's helpful. So people be like, No, you have to be accessible. And, and that's not helpful. But what you really want to do is think about, like, what is the easiest way to achieve the outcome I'm going for right now. And if that is to bundle it, and have it all run client side, and then by all means, but there is definitely Yeah, the old PHP progressive enhancement way, or just the form submits, we can see responses come back and 7200 milliseconds, probably good. - -86 -00:43:08,100 --> 00:43:08,790 -Wes Bos: Yeah. - -87 -00:43:11,130 --> 00:43:27,960 -Unknown: not actually that bad at an experience for an end user. And I guess if there is, like, really complicate, like, I had someone the other day on Twitter, it was like, How am I supposed to build an UI like figma? From from this progressive enhancement technique? Like, what why are you starting with I have to build figma? - -88 -00:43:28,320 --> 00:43:29,730 -Yeah. - -89 -00:43:31,730 --> 00:43:34,730 -Start with like, what's the easy thing I can do? And then they didn't make it? - -90 -00:43:34,800 --> 00:43:38,150 -Wes Bos: Yeah, most of us are writing signing forms and not. - -91 -00:43:40,890 --> 00:44:44,520 -Unknown: Yeah, yeah. But I think, you know, the, the client side thing is also coming back in more modern frameworks now anyways, so for the progressive enhancement, things like remix, from the React router, guys. Yeah, I got one of the indie licenses for that. And their whole thing is to render server render first and then progressive enhancement at the right time. And their whole thing is to be dynamic and and use caching headers instead of a pre render step. And you've seen the same kind of thinking right now also a spelt and spelled K. So I think the pendulum is actually gonna swing back. And I don't think the developer experience has to be any different in these places. It's just the tools right now aren't quite thinking this way. They're, they're sort of thinking like, I give a function, some data and I return a DOM string. Basically, how can I do that on both sides of the world without having to re write it twice? has been the sort of like endless struggle, but now that we have Yes, modules everywhere. That struggle seems to be coming to an end. - -92 -00:44:46,110 --> 00:45:12,090 -Wes Bos: Yeah, I'm so excited for that. After that, that leads me into my next question here is sharing code and serverless functions. Can you do it and there's a limitation at some point because you, you're essentially thinking like it's essentially bundled, like like you would bundle front end application for a serverless, you would bundle like a couple utility functions and a couple of libraries, you have to be at Dave, every time you use something, your function gets bigger, right? - -93 -00:45:12,150 --> 00:46:44,250 -Unknown: Yeah, so this is different depending on the provider, the deployment framework using so like serverless, calm and Netlify versal, all bundle. And that means that, you know, you have to sort of declare and know your whole comp file paths when that function goes up. And it's all going to get, like, compiled into one file, which comes with trade offs. So it's good for performance to have less lookups. But bad for debugging, when you've got one file, why there's an error somewhere and you don't know where. And so for our way of doing it, by default, we upload the whole function folder, and you can put a package JSON in that function folder, and we will obey it and install whatever stuff you have in there. And then an architect, we have this concept of a source shared folder, where you can put shared code in that, and then it'll get uploaded with all of the functions. So you can share code across multiple functions, it's the same. And then the last knife in your booth is layers. So all all these other techniques fail you. Lambda layers, let you compile up your own node modules. And you can order your own binaries or even your own runtime, if you want, you can put that up there and then you declare we support this and begin to you just declare the layer Arn. And then that gets bolted on to the runtime. So if you needed for some reason to write your function in PHP, you can do that. It'll work. Or if you needed to, like you know, include a different version of image magic, or actually the really popular one is puppeteer a lot of people out there. - -94 -00:46:44,700 --> 00:47:17,010 -Wes Bos: Yeah, that that's actually what I tried using in one of mine. Yeah, that was in Oh, is it my CloudFlare worker, I was using CloudFlare worker and I was grabbing a website and crawling it for image and then and then returning that image inside of the HTML. And I couldn't I couldn't use. I forget what I think it was puppeteer, I couldn't use like one of these really slick things. And also that probably be really slow, man, everybody was saying like, oh, if you're using AWS, you could put that in a layer and it'd be much easier, - -95 -00:47:17,160 --> 00:47:25,680 -Unknown: I will show you a link to a demo doing it with begin, it's pretty easy. You just give it this public layer Arn, and it'll add puppeteer to your function. - -96 -00:47:26,190 --> 00:47:29,880 -Wes Bos: And yet, all the popular things are already layer FIDE, right? - -97 -00:47:30,270 --> 00:47:59,010 -Unknown: Pretty much. I mean, I'm maintaining one right now for the demo runtime. And it's not too bad, but just about anything else you can think of is, is out there. And the student Michael Hart actually maintains this project called yonder, which lets you create lambda layers using Yum, yum, which is kind of cool. So anything you could yum install into a Docker container and create into a lambda layer. So there's plenty of mischief you can get up to that one. - -98 -00:47:59,490 --> 00:48:05,580 -Scott Tolinski: There's so much to learn. My gosh. It's so exciting. Yeah, it - -99 -00:48:05,580 --> 00:48:10,440 -Unknown: was stuff was pretty inaccessible before, but now it's Yeah, fingertips. - -100 -00:48:11,610 --> 00:48:39,870 -Wes Bos: So what I liked so much about like, arc and begin and all these other companies is that you mostly like most web developers listening to this podcast, probably don't have to care what yumna is, right? Like, in very, very few cases. And that's beautiful. Because it takes the like having to manage a server part out of the equation or writing it like the worst thing in the world is writing an nginx config file, right? Like all that stuff is, is almost gone now. - -101 -00:48:40,800 --> 00:48:54,120 -Unknown: Yeah, that's true. And I what they need to know, I think folks just need to know that it's possible, file that one away. And then you know, when the inevitable comes, and you're like, Damn, I wish Linda could do that thing. Yeah, it can. - -102 -00:48:56,310 --> 00:49:17,190 -Scott Tolinski: Even at one point we had, we had, like, considered rolling our own cloudinary on lambda. And it was surprisingly super easy, but I just didn't have the bandwidth to do it. It's like, yeah, yeah, that actually is is way more accessible than I was expecting. And and I think a lot of developers will over time starting to learn that. There's some really neat stuff out there we can be doing - -103 -00:49:17,820 --> 00:49:34,140 -Unknown: is you you try to you tried to DDoS us but you'd like, Did that image. thing back in? It's funny. It shows up in our logs. Is this one big spike? Really? Yeah. So what happened in February and then it's like, oh, yeah, - -104 -00:49:34,170 --> 00:50:11,640 -Wes Bos: so what I did was like, I was like, playing around with begin, and what's the database called? Again, I was screwed up. dynamodb Dynamo I always said Dinamo last time. dynamodb. And I was like, I want to make something that like, counts and saves it and then renders out. So what I did was like, you just hit a URL, it increments the value in the database, renders a PNG, and then and then serves it back off. And I was like, Oh, cool. Like I did it. Did this old school thing on new school tech, and then I like tweeted it out. And obviously people are like, well, screw this guy. And they people just started hammering it like writing. Because there was no like, - -105 -00:50:12,180 --> 00:50:15,690 -Unknown: there. It was just writing to the database. Yeah, straight there. - -106 -00:50:15,690 --> 00:50:24,840 -Wes Bos: It went up to like, I think like 800,000 or something like that in in like 20 minutes. And you showed me some logs of like, it didn't even - -107 -00:50:25,080 --> 00:50:48,180 -Unknown: sweat. We were watching it go down, because we're like, we might have to put a pin in this, but it was fine. People got bored of refreshing that page. So it was cool to see, Dynamo just like came up gracefully handled the load the API gateway with serviette as a dynamic pre rendered image, and no problem, which is, - -108 -00:50:48,780 --> 00:50:51,180 -Wes Bos: do you know how much that cost to run? - -109 -00:50:51,600 --> 00:50:59,130 -Unknown: Yes, nothing. So you were you were like way within the free tier limits? Man, - -110 -00:50:59,280 --> 00:51:07,320 -Wes Bos: it's funny that spike, that spike shows up on your like, company wide thing. And we are well within free tier limit. Oh, my gosh, yeah. - -111 -00:51:07,320 --> 00:51:45,420 -Unknown: Yeah. And so part of our hack, for begin on the free tiers, we smear you all these apps across a whole bunch of AWS org accounts. And the paid tier will put you on your own dedicated org account. These apps can access each other, they're locked out by I am. But there couldn't be a noisy neighbor effect. Like if you had the West boss effects, you want to avoid that. But because it's all on demand, it seems to level out quite cleanly. And whenever we see these spikes, it's just a perfect opportunity to invite someone to, hey, maybe you want to join our paid tier. Get your own isolated org account. It's totally it still - -112 -00:51:45,420 --> 00:51:55,560 -Wes Bos: works. I just went to it. 140,000 hits. And almost all of those came in, in 15 minutes of people writing loops. - -113 -00:51:58,200 --> 00:52:13,590 -Unknown: Yeah, it's a it's a different time, because this used to be a scarce resource. And we would run the server forever. And now it's a commodity. And we want this thing to go away, you want to shut off at the end of the request, which is a completely different programming model. - -114 -00:52:13,680 --> 00:52:46,050 -Scott Tolinski: And there's just so many, like fantastic threads in this episode, I don't want holding on them. So I hate to do this, because this was just an incredible episode, Brian, it really thank you for for coming on, because I learned a ton. And I have a long list of things to start reading now. And I love that that's the end result. So I'm sure the audience is going to be having a lot of stuff to pull out too. So thank you so much. Now it's the part of the show that we talk about sick picks, where we pick things that we find to be pretty sick things that we like can be anything, did you come prepared with the sick pick, Brian, - -115 -00:52:46,440 --> 00:52:47,070 -Unknown: I did. - -116 -00:52:48,690 --> 00:53:22,830 -Totally self interested sick pick here. But he recently added auto fingerprinting to begin. So if you wanted to try out doing an app with just pure ES modules and not have to deal with a build step, I strongly urge folks check out our fingerprinting feature, which hopefully by the time this airs has documentation. And the TLDR is with you just Radiesse modules, you put them in a folder, you reference them like normal files, but we'll do all the auto fingerprinting for you. And it'll all loads the way you would expect, which is nice. Nice. What - -117 -00:53:22,830 --> 00:53:24,540 -Wes Bos: What does fingerprinting mean? - -118 -00:53:25,170 --> 00:54:07,560 -Unknown: Oh my god, sorry. So when you, when you do a build step, often you'll see the files will have like a little Shawn would be like, oh, gosh, like to 860 or something. And that's a fingerprint of the contents of that file. And the reason we want to do that, because when it goes out to the internet, we can cache it forever. And then if the file changes, then we change the SHA, which will in the cache. So it's a technique that you kind of can't opt out of you need to do this with your apps. Most tools just do this for you already. But it's a build step, but it's a manual one and it's something you got to run yourself. So if you want to just try writing yes module straight up without having any build step in between you and Matt. And this is a way that you can achieve that. - -119 -00:54:07,830 --> 00:55:24,360 -Wes Bos: Cool. That sounds really neat. I got a sick pick today. This is a another bizarre tool that I had to buy. My kids threw a bunch of stuff down our vent. We have these like super old cast iron or Nate vents like our house is like 120 years old. My kids throw stuff down all the time because there's a huge place and we're like, okay, we have to get this stuff out of here. Otherwise it's gonna burn and like it's a bunch of their toys that were kind of necessary. And even a flashlight that was on got thrown down the vent. So I was like, Alright, well I couldn't take the vent off because it has like 100 years of paint sealing it on. So I ordered this grabber tool, which is a bendy magnetic has a little flashlight in it and basically you just press the end. And these four little claws come out. Then it bends wherever you want. And I think it's really popular in automotive if you drop a bolt into your your engine, you need to be able to pull it out. And this thing is awesome. Like I got all this stuff out. But also I was like I was talking to my wife was like, I'm glad we have this now like, this is definitely something I've needed in the past and it wasn't it was like, I don't know 15 bucks or so. So not not super cheap, but definitely well worth having in your tool arsenal. - -120 -00:55:24,360 --> 00:56:13,950 -Scott Tolinski: sick. I have a fun sick pic. Not it's a music sick pic that I found out about this morning. And I am very happy about this. This exists. This is an album called been here for too long. It is 28 versions of blink when a tos dammit, by various artists. Gosh, it's great. There's some some really talented artists out here. And if you're into that song, this is by blink 155 which has just a ridiculous bandcamp. And apparently a blink wanting to focus podcast or something. I have no idea. I just found out about this because I'm one of my favorite artists, Jeff rosenstock, who you might know West because he's on the same label as pop who I know you really enjoy. Right away pop is pop the band that you like, that's Um, I don't I don't. - -121 -00:56:14,399 --> 00:56:21,300 -Wes Bos: I've never publicly declared my love for pot, but they're good band. But I wouldn't say like I'm a pothead or something like that. - -122 -00:56:21,330 --> 00:56:41,100 -Scott Tolinski: Okay, I thought you would talk about the ones on this show. That's why I said that. Either way there. Jeff rosenstock is one of my favorite punk artists. He's on that same label. And he's on this album. So I'm very excited to be having this. And he just, yeah, so check this out of the link in the description. Blink 155 been here too long. - -123 -00:56:41,340 --> 00:56:46,650 -Wes Bos: Awesome. Shameless plugs. Do you have any other anything else you'd like to plug there, Brian? Oh, - -124 -00:56:47,160 --> 00:57:27,630 -Unknown: yeah, cool. bonus round, we also just released a thing called proxy. And it lets you proxy other websites from begin website, you declare a proxy, you can point it at your Heroku or whatever else. And then you can override individual routes to win. So one thing we're doing is they'll build a graph qL API, but they want to point to an existing app, or vice versa. This is the way to do it. We just released that, like, two days ago. And for some reason, this has been a bad week to launch stuff. So we Yeah, that's another one we're checking out. - -125 -00:57:27,660 --> 00:57:34,830 -Wes Bos: Oh, that's neat. So that that's something someone would want to take a look at if they were trying to move over a monolith and do it piece by piece. - -126 -00:57:35,160 --> 00:57:44,760 -Scott Tolinski: Yeah, exactly. Exactly. Yeah, that's a good key for anybody to have, like in their platform, because nobody wants to move all of their stuff over. You know, like, - -127 -00:57:45,090 --> 00:57:59,460 -Unknown: they can't usually right, like, they've got an existing inertia and data and there's just they're not going to rewrite the database. And so I think it's the future of serverless is not a big rewrite, the future is going to be these hybrid architectures for sure. - -128 -00:58:00,330 --> 00:58:28,050 -Wes Bos: One other thing I wanted to just note is I thought this was really interesting when I first met you guys at conference was your co founders is Ryan block, who's the end gadget and gadget guy, so the guy who was reviewing the Motorola flip phone and all that stuff back in the day, and like I cuz like, I grew up, like, like reading all of his stuff. And like, when I met him, I'm like, Oh, my gosh, you're my internet tech. So he's obviously a developer as well. - -129 -00:58:28,410 --> 00:58:45,510 -Unknown: Yeah, let's go web developers well, and similar to me, kind of over it on the server side and wanted to just focus on the ease of use side and yeah, Ryan's probably landing twice the commits I am these days. zacher for sure. - -130 -00:58:45,540 --> 00:58:46,410 -Wes Bos: What a badass. - -131 -00:58:46,439 --> 00:58:47,340 -Scott Tolinski: Yeah. - -132 -00:58:47,340 --> 00:59:01,710 -Wes Bos: Cool. I'm gonna shamelessly plug all of my courses West boss comm forward slash courses. By the time you're listening to us, I'll probably have my advanced react course re recorded as well. So check that out, use the coupon code syntax. 10 bucks off. - -133 -00:59:02,220 --> 00:59:17,430 -Scott Tolinski: I'm going to also shamelessly plug all of my courses at level up tutorials.com forward slash Pro, we have a new course every single month. And who knows maybe there's going to be some interesting content related to Dino on level up tutorials at some point in the future. So we'll see. - -134 -00:59:17,700 --> 00:59:18,960 -Unknown: Sweet. All right. Thank - -135 -00:59:18,960 --> 00:59:24,600 -Wes Bos: you so much again, for coming on. That was awesome. I answered all the questions that I had for you. I appreciate that. - -136 -00:59:24,629 --> 00:59:41,820 -Unknown: Yeah. Yeah. Thanks for having me. Super. Appreciate it. It's awesome. Well, congratulations, Scott. Now you can not think about that for a while. All of us in Canada like thank God. - -137 -00:59:44,310 --> 00:59:59,760 -Scott Tolinski: Thank you. Have a good one, guys. Peace out. Peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax311.srt b/transcripts/Syntax311.srt deleted file mode 100644 index 6d4b5fbef..000000000 --- a/transcripts/Syntax311.srt +++ /dev/null @@ -1,84 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday Open wide. Get ready to stuff your face with JavaScript CSS loadmodule BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is when Sarah Kuta boss and Scott L. Totally ski. - -2 -00:00:25,950 --> 00:01:10,500 -Scott Tolinski: Oh, welcome to syntax. In this Monday hasty treat. We are going to be talking about bots, and specifically around the whole PlayStation five buying debacle where people have been trying to buy a PlayStation five and unable to because bots, dang these bots, it's gonna be a good one here. And I'm really excited to talk to you about my strategy, which I've listed as Scott strategy. It's very good. My name is Scott Tolinksi. I'm a web developer from keep on. I almost said I'm a level up developer from level up tutorials. And then I almost said I'm a web developer from level up stars. I'm a web developer from Denver, Colorado. My name is Scott Tolinksi. Yes, I am killing this intro. And with me, as always is a West boss. - -3 -00:01:10,530 --> 00:01:12,840 -Unknown: Hey, everybody, hey, with - -4 -00:01:12,840 --> 00:05:06,450 -Scott Tolinski: this episode is sponsored by one of our favorite sponsors over here as syntax and that's Log Rocket to now Log Rocket. I don't know if you've caught on to this. But all of our sponsors, our favorite sponsors, in case you're wondering, Log Rocket at Log rocket.com is a really neat service. And this is actually kind of a funny thing that I wanted to bring up. On a side note here. There's been so many times that I've googled something and the Log Rocket blog has come up. So they've done a really nice job about writing really good little blog posts here on all sorts of interesting topics. And I'm always very impressed when, when that happens. It's like oh, I google something in a service and company that I use is thinking about the same things that I am. So Log Rocket at Log rocket.com is the perfect place to see how your errors and exceptions happen in the same type of real time that they happen for the client. They give you a scrubbable video replay of the scene of the crime imagine that happening? Who Stole the cookie from the cookie jar? That is not a question you have to get that anymore because you can see who stole the cookies from the cookie jar. And I'm guessing as my daughter because she's really getting in that pantry right now. She's opening the pantry door and just reaching in and grabbing all that food for herself. So Log Rocket at Log rocket.com gives you a session replay of the errors, bugs and exceptions happening in real time works with all the stuff you know and love. So check it out at Log rocket.com. Okay, so this is the 300 and 11th episode, and I'm really excited. I'm a little all mixed up. But I am down to do some of these. I'm trying to do 311 Lyrics here. Bear with me. So let's talk about our strategies for creating a bot. Let's say we wanted a PlayStation five, right? Here's a scenario I really want to PlayStation five. But Ooh, these dang bots are clicking on them. How do we fight back with my own bots? That's gonna be a bot on bot war here. So let's go into Scott strategy. First. Here's my strategy. And I just want to say that out of the two of us here, I'm the only one with a PS five right now. So I think my strategy is the one to go with. I'm just gonna say that. So here's Scott's strategy is, well, I don't know how to do bots, because I've never made a bot for anything in my entire life. So I'm going to go to PS five.reddit.com. And I'm going to refresh the page on the day that pre orders go live. And then I'm going to find the the first link from amazon.com. And I'm going to click it and I'm going to click go as fast as possible and get a pre order. because let me tell you, pre ordering is definitely the way to go in these scenarios. Now unfortunately, we are long past the time in which pre ordering would have been even possible. Now the bummer here is that so many of these services and these crappy things like Walmart's online presence, right? Walmart wants to play with the big boys, but their online site allows people to Kota bots to to buy these things. Now, what I'm going to do is I'm going to stay far away from any site that has a checkout process that can be manipulated with a bot easily. I would say that because I'm sure most things can probably be bought with a bot somewhere else. But like for instance, I don't think Amazon is that easy to buy with the bottom. I don't think it's as easy. I think they're they're a little bit more sophisticated than that. And that's just my strategy. I'm going to go somewhere that doesn't have bots, and I'm going to refresh. I'm going to hit a link and I'm not just going to do it blindly. And that's what I'm going to do. Because to be honest, if I tried to code a bot like this, I would probably end up buying 15 psi, because I just have no idea what I'm doing in this regard. Okay, so what's the strategy probably might be a little bit more interesting as far as this podcast goes, because you actually have a lot of experience with this. I recently got a rower off of Craigslist. And people were like, Oh, cool. Can you share the code that you wrote to do the bot to like, alert you when they became available? And I was like, Well, I I download the Craigslist app and then I click send me messages when this word is found. The Yeah, I just idea. I have not done this kind of thing. So let's let's hear it let's let's hear your your strategy. Yeah, - -5 -00:05:06,510 --> 00:10:54,480 -Wes Bos: I've talked before where I wrote like a Craigslist Kijiji Facebook marketplace app that would scrape every three minutes. And then alert me when things popped up just because like, that's how you get the competitive advantage there. Obviously these apps have built in notify me. But then by the time they notify you It's way too late because they only they run it like once a day or twice a day or something like that. So how would I do that? This was asked on Twitter, by the way by baja magician. And he says, We need a podcast on how to use JavaScript to track websites to send a text message or email as soon as the PS five is available for purchase so that he'll be fun to build. How would I go about that? Well, first of all, before I even get any any of this, somebody built a very similar website, called Mick broken calm. And what he did is he tried to add a ice cream to his cart for every McDonald's in North America, every minute. And by doing that, he's able to see if the ice cream machine is broken, because they say sorry, not available, or if it's working. And then he has a map of the entire North America, or even Europe to telling you if the ice cream machine is currently broken or not, which is hilarious. And this was a wild situation is like the same approach. Maybe we should have this guy on the podcast. Yeah, we should try this guy in the podcast, because this is my favorite kind of web development. Yeah. So how would I do it? Well, first of all, you need a way to find out if there is any stock. And there are one of two ways you can do it. First way I try is all visit a website. And I'll open up dev tools, I'll go to the Network tab and click on x HR, and then refresh the page. And you will monitor what x HR requests are being fired off. And often they will be firing off a request to an endpoint like a product endpoint. And that will return if anything is available or not. So I just went to bestbuy.ca. clicked on PS five, open up dev tools. And I found they have an endpoint bestbuy.ca for slash eat calm API forward slash availability for slash products. And then they pass an argument to the product ID. So that's how they do it. If they don't have that, if it's all server rendered, which more and more, this is all done on the client side or at least refreshed on the client side. So they usually have an API. But if not, you just have to fetch the entire HTML, you can use a fetch function, like a lot of people don't know this, but you can fetch literally anything, including a website. And then instead of using JSON, you just use dot txt, and that will just give you a payload. That's the easiest way to scrape a website, you have to do it on on the node command. Because of course issues though, then you can either regex it. So like if they, you could like look for the word unavailable or available or in stock, you could just regex it and find that value pretty easily, a little bit further, you could use a node package called Cheerio, which is kind of like jQuery for URLs. So it doesn't have like any dependencies that are needed. And it works pretty good. It's a little bit clunky to use, but it works pretty good. The sort of the best way is to use puppeteer, which is it's using a headless Chrome browser, and it actually fires up chrome and visits the website, and you can click on things and whatnot. And that's the closest to actually visiting a website. And it's a little bit slower. But if you're, if you're running this every 1015 minutes, it doesn't matter. From there, save your data and the database for this type of thing. I like using text based databases, because then there's no overhead. So low DB is a good one. And it just uses JSON files as your database. SQL lite is another really good one that's actually a full blown database solution. But it's still saves to txt files. If you're throwing this into a serverless function, throw it in something like Dynamo DB would probably be good Dynamo. What am I saying? Every time Dynamo, Dynamo, Dynamo DB dynamite. Dynamo. So just something and these are the types of projects where go and try that weird database solution you've never tried before. Because it's fun to fund the learn on something like this, which is low stakes, then you need like a cron job. So you need to rerun this scrape every so often. And you can I would probably ideally, you run this on your computer, because then your IP address is one that they possibly know about. Because there's a lot these companies are doing to block this type of activity because it's it's unfair, right? It's unfair to people who just want to buy a PlayStation and there's all these resellers trying to buy them all up, which is frustrating and ruins the whole experience. So I would do that. And that's cool because the guy who asked this question didn't say how do I use a bot to buy it? He said how do I use make a bot to just let me know when one is available? So I'm not spending my entire day refreshing, 14 different websites, then when there is a match when there is one in stock, then you send a text message, I would use Twilio for that send an email, I would probably use postmark for that. And then you could even go one step further and try to submit the form. But most websites worth their salt are gonna throw some sort of caption in there. If they put google recaptcha in there or ask you to add five plus five, then your bot will probably fall over. Because you can't script past that. That's how most bots are stopped these days, you have to throw a reCAPTCHA in there. And Google will also detect if you are a bot based on stuff we do. They won't tell us most movement, things like that. Someone told me the other day, Scott kept hitting recaptures because you use a VPN? Yeah, someone said that if you move your mouse a lot, it will trigger less often, which I don't know if that's true or not. - -6 -00:10:55,860 --> 00:11:18,870 -Scott Tolinski: True. tried it? And I feel like yeah, it might have actually. So like, I was getting some fails on ones that I felt like should have passed. And then I was like, okay, screw it. This time, I'm gonna move my mouse around, and I just started moving. And then it passed. And I honestly have no idea if like, you know, I just got lucky that particular time, because who knows? But it worked the one time I actually tried it. But that's it. Yeah. - -7 -00:11:20,610 --> 00:12:30,690 -Wes Bos: Oh, man. So you could you could script the mouse moving a whole bunch. I don't know if that's possible or not. But maybe you could build a physical robot that moved your mouse and jiggle it around. Yeah, a random amount. Couple last things, here are things that could get in your way, you could get your IP address blocked, that's most common, you could get a CAPTCHA or CloudFlare, which throws up just a temporary pause in the way that will stop you. So that's something to think about as well. Other ways is you can often these API endpoints won't work directly, but they'll only work if you're signed in or if you have all of the cookies. So you can also if Firefox and Chrome dev tools you can like right click Copy as fetch. And it will copy every single header that got sent along with the request. And more often than not somewhere in those headers is there's a couple like session IDs and things like that, that will come along for the ride and ensure that it's a valid request. So that's how I would do it. At the very core of it. It's just downloading HTML, checking if there is value, and then I would probably send off a text message so that I could quickly hop on my phone and and trying to buy the thing. - -8 -00:12:30,840 --> 00:12:41,340 -Scott Tolinski: Yeah, that's a really smart Yeah, that's really smart. I'm sure these companies love have been bots, it their servers, all the time. Whatever, what can you do, - -9 -00:12:41,400 --> 00:13:20,820 -Wes Bos: it's both frustrating from like the user point of view that you can't buy this thing was also frustrating, like the developers behind this website. Now, like, in addition to have it trying to sell this thing and help manage stock where 500 people are trying to buy one product at one time. Yeah. Because like, Look, what happens if you charge a credit card within 12 milliseconds of them like who gets it right like then you gotta check if the product is still there. When you refresh. I would like to have somebody on who does e commerce for a big drops like this, whether that's like like Nike or something like that. They do these huge drops like what is their .TECH actually look like in order to handle all that? - -10 -00:13:20,849 --> 00:13:34,740 -Scott Tolinski: Yeah, I definitely agree with that. Just as long as they're not one of the they didn't work for Kohl's Did you hear about Kohl's? Unfortunately, I think they sold a whole bunch that they did not have and then like everybody got a bunch of big cancel alerts. That's a huge bummer. Bummer. Bummer. - -11 -00:13:34,979 --> 00:13:36,300 -Wes Bos: for the PlayStation five. - -12 -00:13:36,329 --> 00:13:36,900 -Unknown: Yeah, - -13 -00:13:36,900 --> 00:13:45,930 -Scott Tolinski: I think it was just Oh, Joel's yesterday because I have follow along to some of this stuff still, and it was honestly These are big problems that seem very difficult to solve. If you're asking me - -14 -00:13:46,079 --> 00:14:02,010 -Wes Bos: back in my day, all you had to do is wake up at 3am and camp outside the Walmart or Zellers is where I went when I was a kid. We have this Canadian we used to have this Canadian Walmart called Zellers. for PlayStation two, I camped out in front for four or five hours and you just got to buy one. - -15 -00:14:02,280 --> 00:14:35,880 -Scott Tolinski: Oh, here's what my mom did for PlayStation two, because there was a surprise for Christmas for us. My brother worked in the stockroom at Target. And he got a little hot tip. They were never supposed to be bound to some sort of non talking about these Hot Tips in the stock room. But my mom showed up and one of us was one of the first like 20 people on that specific day and they were she like she had gotten there. I forget if she was like one of the first people online or something but they were just like, how could you know because it was like a rainy day. I just had a feeling you know, just check in. Just check in. So yeah, - -16 -00:14:35,910 --> 00:14:59,970 -Wes Bos: there's also a website stock track.ca which will allow you to put in a skew of a product for Canadian Tire Walmart Best Buy, it will do this thing that we talked about. It will check if there is in store stock for 50 of the closest stores is if you're willing to drive an hour maybe there's five or six different stores within one or two hour drive. Either way. - -17 -00:15:00,000 --> 00:15:26,190 -Scott Tolinski: That's how I got both my Nintendo Wii back in the day. I was like, well we find calm are one of those type of things and it told me when they're going to be there and I just shut up early. And then another one I got my Oculus quest from this like random city in North Central Colorado that was just like, you know, middle of sort of nowhere, but they had a Best Buy and that Best Buy they had like one in stock and I drove a couple hours up there to get it. It's like, okay, you never know. - -18 -00:15:26,490 --> 00:15:37,380 -Wes Bos: Wow, that's amazing. I I did that with the Wii Fit? I was trying to get one, though. And, yeah, I just manually refresh the Best Buy website because I had nothing better do my time. Yep. - -19 -00:15:38,460 --> 00:15:38,970 -Unknown: Yep. - -20 -00:15:40,020 --> 00:15:57,690 -Wes Bos: All right strategy. If you have built anything similar, I always like hearing the stories of people that automated their way into fixing a problem that they have sweetest at syntax FM. I'd love to hear those stories. Yeah, likewise. Alright. Thanks for tuning in. And we will catch you on Wednesday, please. - -21 -00:15:59,970 --> 00:16:09,750 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax312.srt b/transcripts/Syntax312.srt deleted file mode 100644 index 7b87a0905..000000000 --- a/transcripts/Syntax312.srt +++ /dev/null @@ -1,364 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,790 -Announcer: You're listening to syntax - -2 -00:00:02,790 --> 00:00:10,560 -Unknown: the mind cast with the tastiest web development treats out there. strap yourself in and get ready to whiskey and Wes Bos. - -3 -00:00:10,589 --> 00:00:20,969 -Wes Bos: Welcome to syntax. This is Oh, December 23. We're recording this in November but a very Merry Christmas to everybody who's listening in right now. Merry Christmas, Scott. - -4 -00:00:20,969 --> 00:00:23,460 -Scott Tolinski: Hey. Yeah. - -5 -00:00:25,260 --> 00:00:46,830 -Wes Bos: A sleigh bells we are having a potluck. today. We are sponsored by two awesome companies. First one is fresh books. Second one is century. Talk about the both of them partway through the episode. But we got a bunch of really awesome questions for you today. We're gonna we're gonna rip through them. So Scott, and you want to start off with the the first question here? Hey, - -6 -00:00:46,830 --> 00:01:11,090 -Scott Tolinski: first question is from rock to Lynskey. He says you guys are doing a downtown job with three exclamation points that is straight up from my dad. So shout out to my dad who may or may not be listening to this, but he did to watch our 200th episode or a 300th episode. And he had never heard of discord. So he's just like, well just meant a thing on the potluck. And maybe they'll see it. So thanks, dad for being so supportive. - -7 -00:01:11,120 --> 00:01:18,030 -Wes Bos: My dad said he was gonna try Colin as well. But then he got busy. We should have both of our dads on at some time or just like, let them and then - -8 -00:01:18,230 --> 00:01:30,060 -Scott Tolinski: we'll walk away. You would want that my dad is a riot. He is very friendly. Yes, he is. He's a character in the best. All of the best possible ways. He's very funny. Yeah. - -9 -00:01:30,870 --> 00:02:55,289 -Wes Bos: All right. Let's get into some questions. Here. We got actually two questions about computers. So I thought we'd start that off, because I don't know like maybe like a month or two ago, we got questions about the new Apple silicon max. And I was saying like, oh, it'll be years before it's out before we move over. And I was super wrong about that. They came out like a month after two months after we had talked about it. It's looking like they're moving pretty quickly. So we thought we got a question here about them. And we thought we'd sort of tackle them as to are they viable machines for web? devs? So a question is from pooky. Hey, guys, Wes, thanks for all your key courses. I am a longtime listener. Your courses helped me land a new job last month for a sweet raise. Oh, congratulation. Yeah. Yesterday, Apple announced their new Macs. They seem pretty sweet. But I was curious is what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and NPM still work on the new machines? Would it be smart to start learning new programs to prepare for the transition? love the show? Have a great day. All right, I thought this is really cool. Because Apple released them, it seems like a lot of the stuff that we do as creators, video editing audio, also just like running processes we haven't really seen like, What does node look like? Because it's not supported yet, but very, very excited about it. What about you, Scott? Are you looking at these new ones, - -10 -00:02:55,500 --> 00:04:07,860 -Scott Tolinski: I'm sort of in the same camp I was with other things where it's just like, wait and see at this point, because like, I just bought a 16 inch MacBook Pro and it is a beast and it does all the things I needed to do. So I'm not like itching for a bubbly wall. Okay, I shouldn't say that. I would love a new computer. I always love a new computer. But at this particular juncture, I am just like not even concerning myself with them. I haven't like done next to zero research about them beyond the fact that it go fast. And I'm pretty pretty pumped about that for the future. I haven't in my mind, I saw a report about a Mac Pro, not a Mac Pro Mini but a quote unquote smaller sized Mac Pro. And I'm thinking that would be really sick to have, like just sitting behind my monitor right? Something little behind my monitor or or even like a true audio setup and have it in another like cooled closet or something like that. cables. You know what? I don't know, personally, I'm not interested in any of these other ones. But I would be interested. Like if they are really that fast, then maybe Yeah, getting like a production machine? And like, maybe having that be a thing. But who knows? We'll see. - -11 -00:04:08,160 --> 00:05:43,860 -Wes Bos: Yeah, I think that these new ones are probably not for us as like video and content creators, I bet that they'll come out with like, they'll take like seven of the chips and throw them in another one. That's amazing. I think that will be the one for us. But for for web developers, they seem pretty attractive. And so the question is, do I need to like what about my software? Is it going to work for web developers? Or do I need to pick up new stuff? So the answer is probably not. Yeah, it looks like most of the software, either will already work, or will already work in sort of like a VM? Or would they plan to make it work at some point. So I thought it would be kind of interesting to go through the list of software that we use as web developers, and just give a quick yes, no, or it's coming. And again, we're recording this a month in advance. So a lot of the being worked on might even be it works already. So there's a couple good websites you can go to is out Apple silicon ready.com. And then there is a GitHub repo called does it arm. So arm is the technology that is underneath the apple silicon. Apparently it's not exactly the same thing. But a lot of the the .TECH that where it already works with arm because there's a lot of tablets and phones that are built on arm that already support the software. So let's the first the sort of the big thing is, is electron based apps, so apps that are built in, in JavaScript, HTML, CSS, but our desktop apps like VS code, notion missive discord is slack electron based still - -12 -00:05:43,860 --> 00:05:47,310 -Scott Tolinski: actually don't know if discord is, but I think it is. I know it's web based. So - -13 -00:05:47,310 --> 00:06:36,150 -Wes Bos: definitely, yeah, it's definitely web based. So all of those things, it looks like electron has already rolled out a blog post saying, electron 11 will start to ship a x 64 version of it. So all of these apps should work. The sort of only gotcha is when these apps have, like native dependencies under the hood, that needs to be ported over. I think the next big one is brew. So brew is the command line utility that you use to install a lot of other things. And that currently does not work natively. It does work under Rosetta, too. So you can you can run a lot of these applications under Rosetta to and they will run and it looks like they again they they already have a path forward to trying to port it over to Apple silicon, which is pretty cool. - -14 -00:06:36,150 --> 00:06:48,270 -Scott Tolinski: And from what I hear the like if you're running web dev stuff in Rosetta, the speeds are pretty comparable to what it was without Rosetta, as in what it would be on a standard Intel older - -15 -00:06:48,300 --> 00:07:15,360 -Wes Bos: just a regular Intel Mac. So that that's good because then like all of the new stuff will hopefully be faster. And then the Rosetta stuff will be just as good as you had it. Chrome. and by extension I'm assuming brave and IE are already on Apple silica and Firefox will be soon as of recording it's not VS code is insiders build will run yes soon. ScreenFlow. That's a big one. For me. That's my main recording tool. There's no Rosetta to or native. - -16 -00:07:15,540 --> 00:07:17,430 -Scott Tolinski: Oh, it doesn't work with Rosetta to. - -17 -00:07:17,910 --> 00:08:04,050 -Wes Bos: No, no, it doesn't even so like those apps that are like very heavy on video processing. They use a lot under the hood. They already said that they've been working on the developer kit all summer. So it's not like they it got released no go. Maybe we should update it. I have been working on it. So that's the one I'm really excited for. Because my biggest pain points with my laptop are slow video export times, and bad battery life when you're running node processes. I hope I hope the export like even if it gets like twice as fast. Some people are saying like five or six times faster video exports, which I have a hard time believing but like, Man while I lay down money quick. Yeah, yeah, if that happens, let's just think about all the time - -18 -00:08:04,050 --> 00:08:16,470 -Scott Tolinski: loss that you have from your and that's why I think about like a production machine. If I had like a Mac Pro production machine, you could just tell that go thing to export, you know, 30 videos and then pop over to your laptop or something and what else we - -19 -00:08:16,470 --> 00:08:32,220 -Wes Bos: have here figma unsure, it's it's browser based. So I would assume it would work because it's it's all web .TECH. Right? Yeah. I couldn't find anything online. The sketch is already updated to Apple silicon. So you get big benefits there. - -20 -00:08:32,220 --> 00:08:36,649 -Unknown: I couldn't find any info MongoDB DaVinci Resolve is fully supported. - -21 -00:08:36,720 --> 00:08:42,529 -Wes Bos: Wow. Oh, that's good. I would be very curious to see what the exports on DaVinci Resolve look like. - -22 -00:08:42,649 --> 00:08:43,499 -Scott Tolinski: Yeah, me too, - -23 -00:08:43,499 --> 00:09:47,460 -Wes Bos: how much faster they would be I turned to is being worked on. I'm assuming hypers Tron. So probably. And those are all the big ones that I'm using Oh, the other one is node node is does not work. NPM. And node does not work yet. Same with rust. I'm assuming it will work eventually. And then they have announced that they will back port some of the I think node 15 will work on this. But they'll they'll backport like some of the LTS releases, that will probably be an issue. And last Oh, that's the other one is Docker, Docker does not currently work on it. And that that's a massive one for web developers. Because if you need to run any tools in a Docker container, even like you want to run an old version of node that doesn't work on Apple, silicon is a call just run it in a VM. If the VM doesn't run, then then you're kind of out of luck. So node and Docker, probably I would hold off as a web developer for those ones, because those are those are huge ones. And those are like a large part of our tooling. Even if you don't like oh, I don't use Docker directly. I'll probably a lot of the tooling you're using does use Docker under the hood. - -24 -00:09:47,760 --> 00:11:10,679 -Scott Tolinski: Yeah. For me, I'm in a firmly wait and see mode with any of this, which is very contrasting to how I am with software when I like Big Sur Yeah, yeah. Okay, alpha. Let's go on my You know, livelyhood machine, let's go. So for me, it's funny that I do take a bit reserved approach with this stuff. But then again, I'm not needing a new computer. So I'm kind of checked out of that hunt anyways, but it's fascinating to see the updates, and we'll, we'll see exactly what this does to the industry. And if it shakes it up at all. All right, next question is from a Christos us, hey, great, Joe, no really great show. What is better for working at the home or office? an iMac or a Mac Book Pro? Whoo. Yeah, it really depends on some things like if you don't have an external monitor, having that big old iMac screen is really pretty sick. One time, when I worked at one of my first agencies, I was given an a large iMac as my leg death machine. And I really loved it. I really loved having that big. But before I was just used to only working on laptops. So I don't know, the big monitor is a big plus, if it's your only screen that said I am the type to always have my computer with me or you know, want to bang out some code or something. So I prefer a MacBook Pro personally, and almost always have that as my default main machine. - -25 -00:11:10,919 --> 00:12:20,640 -Wes Bos: Yeah, I agree. I we get I put this in here. Because this question I get all the time. Like, why don't you buy a Mac Pro and then also have a laptop? Or why don't you buy an iMac and also have a laptop or or have a dedicated machine for recording. And then another one I'm like, I don't want the overhead of maintaining two machines. And I 100% need to be able to take my work with me to a coffee shop or on a to a conference or whatever. And I just need everything with me. And I don't want to have to fuss with two different ones. So because of that, I bought the most powerful MacBook Pro that you can get and souped it up. It sounds like a rocket ship all the time. Because I'm pushing it to its limits. A lot of the time. I have it hooked up to two 4k monitors it running a doc running all of my stuff and it works it works great. So I'm a big fan of by the MacBook Pro and then also invest in desktop stuff. And it's funny i was i My battery died on me once I'm a MacBook Pro and the ladies like don't leave it plugged in all the time. I'm like, What? I'm supposed to have it plugged in I use it all day. They always have - -26 -00:12:20,669 --> 00:12:25,409 -Scott Tolinski: something to say for how you like it's never the machines fault or the text fault. - -27 -00:12:25,679 --> 00:12:27,179 -Wes Bos: Hi, you're holding it wrong. - -28 -00:12:27,270 --> 00:12:43,289 -Scott Tolinski: Yeah, my, my power cord literally caught on fire the power cord caught on fire. Well, you shouldn't wrap it around the hooks, but the hooks exist for you to wrap it around there. And then they took the hooks off probably because it was happening to a lot of people but like, - -29 -00:12:43,500 --> 00:12:44,070 -Unknown: come on, man, - -30 -00:12:44,070 --> 00:14:16,740 -Scott Tolinski: my thing just caught on fire. I have some empathy here. I agree with you. And I also ran two machines myself once before I had a hackintosh for a long time. People always ask me 100 Well, I've been there done that for a very long time. I know all the ins and outs of the hackintosh ecosystem. And it was a giant pain in the ass to have two computers. It definitely was. Now I say that as somebody who will jump back in and maybe get a Mac Pro and these things, you know, get into the arm territory. But we'll we'll see about that. I think all the sinking libraries and everything might make that a little bit easier now with like Apple, Apple sinking all of your everything and Dropbox or Google Drive or whatever. All right. Next question here is from Liz. Liz says hi, Scott. And Wes, thanks for all of the content. On your podcast. I was wondering two things, what are your thoughts on remix? And has your listenership gone down since COVID-19? I've heard that less people listen to podcasts now because they can no longer have a commute. Thanks for all that you do. Yeah, you know, I haven't checked the listener stats recently. But definitely in March, we saw a big hit. I think things have normalized a little bit, but I don't think they're back to where they were because yeah, most people aren't. Maybe not most people but there are a large amount of people who are tech people who are now at home. And some people can't listen to podcasts while they code or while they do other things and I listened to them in the gym while I'm doing dishes. I've actually have not personally decreased my listenership of podcasts I know a lot of people have What do you have the the stats or - -31 -00:14:16,830 --> 00:15:07,919 -Wes Bos: Yeah, I have them open right now and it's probably like a 10 15% drop not not as much as I was expecting. Because a large portion of the listenership does listen on a commute definitely saw like a big drop around April. Not a huge drop, but it definitely a drop. And it rebounded. After that. We're still not all time highs that we were last year around September. But also the other thing is that this podcast continues to grow listenership as well. So that probably has something to do with the fact that we just keep getting more listeners that are new and finding out about the show that sort of replaces some of the people that are not necessarily driving 45 minutes to and from Their job every single day. So yeah, pleasantly surprised. Given that, it seems like all podcasts have taken a bit of a dive lately. - -32 -00:15:08,159 --> 00:15:11,520 -Scott Tolinski: So what you're saying is, is that we would have seen a dip, but we're just too popular - -33 -00:15:11,520 --> 00:16:09,840 -Wes Bos: just way too popular. Yeah. Yeah. The other question is, here are your thoughts on remix. So if you haven't heard, remix is a new react framework from Michael Johnson, Ryan Florence and Michael Jackson, Michael Johnson. And they're the devs behind react router, one through 49. And just chuck everything time we measure rat rat, or we, we joke around about that, it's a new react framework. That is it looks like they are rivaling next j s. Not in that they are going to go toe to toe competing with features and doing the same thing. But they are doing a sort of approaching it a little bit differently, including the fact that it's it's not open source, you have to pay to get access to it. And they are which is really cool. Because like, these guys have spent their lives building and maintaining react router, and a couple other popular projects, - -34 -00:16:09,929 --> 00:16:14,460 -Scott Tolinski: stuff that's probably used by millions of people. And they haven't seen a dime for it, you know? - -35 -00:16:14,579 --> 00:16:24,120 -Wes Bos: Yeah. And also like not even that didn't see a dime. But they like get flack from people like Scott Nye when they upgrade, no really no version of react router, - -36 -00:16:24,149 --> 00:16:41,130 -Scott Tolinski: I am firmly on the in the camp of I love all of their updates. React router is one of those projects, no wrong and I love react router. So I know don't don't get that wrong impression, because I really do love all of their updates. In fact, some of the React router stuff is like features that I must have that they've introduced recently. - -37 -00:16:41,159 --> 00:17:02,039 -Wes Bos: So like, I don't really know a whole lot about it, because I haven't paid for it. And we asked Ryan to come on the show may wish asked him again to sort of explain it. But one of the features that I see just from the twittersphere is that it will work entirely just server side. And you can run it without actually having react on the on the client, which is which is pretty nifty. And - -38 -00:17:02,039 --> 00:17:14,970 -Scott Tolinski: I think that might be a primary driver of a lot of it is is letting the server do more than not just like in a server side rendering situation. But like a, like a caching and sending react components down the line. - -39 -00:17:15,149 --> 00:18:00,270 -Wes Bos: Yeah, I'm really excited about it, I don't think that it's not going to replace next jass in terms of popularity. And I don't think that that's what they're they're aiming for. They are probably aiming for like, like a license for a team license is 1000 bucks per death per year, which if somebody's building a massive application on it, that's not really necessarily a big expense for them when they're probably paying hundreds of 1000s of dollars in salaries every single month. So it's really interesting, I'm kind of excited about this different approach that they are taking to a lot of people are saying like, Oh, it's paid, it will never take off. But I think that they've thought a lot about it. And it's going to be a pretty nifty, nifty little framework. Yeah, and - -40 -00:18:00,270 --> 00:18:34,410 -Scott Tolinski: I don't know if we've talked about this before, but I don't know if you've ever used expression engine before. But that was a paid CMS framework that did pretty well. And it was a nice experience to use. And as a developer, I always was, you know, happy when our company got a license for it. So I think there is a market for this type of thing. And I'm excited to see where it goes. Because they understand like many other people understand right now that the process of server side rendering and then hydrating and all that stuff is way harder than it needs to be especially if you've done any of it outside of the context of an ext JS app or something that does it for you. - -41 -00:18:34,679 --> 00:21:59,370 -Wes Bos: Yeah, one more thing I have here, we need to have a show on open source sustainability, because I was talking to Jed who works on Keystone. And he's got a lot of thoughts about that as well because he has a consulting business. And then he also has a keystone .js which is big, open source project. And I'm just like telling them like I will pay 200 bucks. Like I always go back to paying for advanced custom fields on WordPress where Yeah, I paid I paid the 100 or 200 bucks for the plugin. And I get this amazing gallery plugin that is like a custom a really good field that I add to it and I'm keep telling them like I'll pay for that. For Keystone where you have a suite gallery you can drag and drop, reorder, add all text, crop image face detection, all of that added to it. I think there's some really neat stuff that could be done with with open source and premium plugins or just going entirely paid like remix is doing I think it's an interesting space. Next question from New York game. What is your approach for testing ecommerce sites? I'm about to launch a client's online store and I'm sick was worried that a simple plugin upgrade will impact the store and that I won't know about it until a disgruntled customer complaints. Oh, this is a good one like and this is kind of scary because this is the moneymaker right? It's not like oh this button got like a weird hover color or or something like that. It's like literally, they're not the money stopped coming in for for the business. How do you test it? Well, there's sort of like a lot of ways you can can go at it. And I recommend as many ways as possible, I'll tell you, I'll tell you what I do currently, and I'm working on doing like an automated tests for but I currently don't. So whenever I even touch a piece of code that has to do with the checkout, or even the CSS of the checkout, because I've done it in the past where the buy button wasn't visible, because I changed the font size or something. So usually, what I'll do is you can get test stripe keys, you can just run that locally on your machine, you can afford to four to four to the credit card is a fake number, and you can get credit cards that will reject you can get different credit cards that will reject for different reasons. And you can test them all to make sure that both your error handling is working as well as the actual checkout is working and the fulfillment on that. And then anytime anything changes in your code, you can rerun it. And the question here is like a plugin upgrade. It's probably WordPress. And the fact that WordPress lets you upgrade plugins in production is like it's it's good, because like a lot of people don't even have a development environment for WordPress, but you should definitely have some sort of development environment where you're just in stripe keys. You don't accidentally send emails to customers, you're totally isolated from it past that, like there's nothing wrong with sometimes I'll do this. I get emails from people all the time and like, Hey, I can't can't buy it. And then I'm like, Oh my gosh, is there something wrong with my checkout system. And at the end of the day, there's something wrong with their credit card or or whatever, and they weren't reading the error, right. But I'll just generate a coupon that gives me like, 99.9% off, it just brings it down to 50 cents or something like that. And I'll use my actual credit card to check it out. And it does cost me 40 or 50 cents, but there's something to save for that peace of mind. Every now and then just double check that it is working in production as well. Yeah, yeah, I - -42 -00:21:59,370 --> 00:23:37,410 -Scott Tolinski: I'm on Braintree, which has a little bit different of a way, it's the same deal with the test credit cards, and there's a sandbox environment. And we do have automated testing the end of the day, I think what this user needs is a local environment to be able to install, test it out, make sure it's going to work. And then if you want to do that you're low on production after that, then that by all means go ahead. But again, it depends on how much money is this store making you Is this your your whole livelihood and you're neglecting these things is store making you a ton of money or is it just like extra side income. And to me that the amount of money that the store is making really will change what my testing procedures around this looks like because this is my entire livelihood, and it is a lot of money coming in, then I'm going to make sure I have automated testing in place. I'm going to make sure I have that local dev environment, I'm going to make sure I have everything set up to prevent any loss of funds. Oh, in West has a West is giving me a transition into to our sponsor, his transition is not good. Okay, so let me do a touch up here. There's a better one, Wes gave me his you know, what else handles money? Okay, okay, fine. But you could have said, let's say this, this site is bringing you in lots of money and all sudden you need to start tracking that money. It's it's the same premise West, but what you've done is you've like just you've bridged the gap, but you haven't told a story. So that's really what you have to do, you have to tell a story. And if you want to make money on those stories, you can always sell your stories on your ecommerce site, and keep track of that payment with Freshbooks. - -43 -00:23:37,740 --> 00:24:57,450 -Wes Bos: Yes, Freshbooks is small business, accounting, EDI, your invoices, you can manage all your clients, you can see who owes you money, you can automatically follow up with them with the robot. It's awesome. It's it's the best software I've ever used to manage all of your company's expenses, invoices, all that stuff. And I just want to tell you really quick, sorry, I think I told us on a couple episodes ago, but I'm gonna tell it again, I had an issue with one of the reports that I was generating in Freshbooks. And so this is this is not working, I clicked the button and it didn't work. And so I called him up first ring picked up is that Oh, man, we can get it, we get that sorted for you. So the guy on the phone, manually generated them for me and sent them over an email so I could get them off to my accountant, and that'd be good. And then they went off and logged the bug and followed it up with their product team. And then two days later, I got an email from them saying, hey, thanks so much. This is actually affecting a couple other clients as well. We fixed it. And here it is. And it was awesome. I didn't have to chase them around. They told me when I was ready, they fix the issue temporarily for me. So just outstanding customer service at Freshbooks as well. So check it out freshbooks.com forward slash syntax for a 30 day free trial. And make sure you use syntax in the How did you hear about a section because that will keep them sponsoring. on and on. Thanks so much to Freshbooks for sponsoring. Cool. - -44 -00:24:57,690 --> 00:27:49,500 -Scott Tolinski: Next question from Corbin. Hey, syntax boys. I'm at getting into web development through college, and noticing that the intro courses are very hard to get into. I've been self teaching. So I'm feeling like I'm ahead. The intro to computing logic course basic algorithm teacher, very slowly forces us to use an awful software called Raptor to create pseudo programs, I've been asking to actually use a language rather than software. But the teacher doesn't have enough programming knowledge to grade actual language assignments. I feel like this course is a step back from what I already know. And I was just wondering if you have any tips on getting through the grueling required courses? Love the podcast can't wait to hear more. Okay, so I took a number of classes that I did not care for or that were behind the I took a get this I took a web design and development course at the Art School of the University of Michigan where they used Oh, gosh, what was the software it was Adobe. Go live. I forget what it's called. It was Adobe's version of Dreamweaver, before Dreamweaver existed, it was all based on dragging and dropping things on to a grid, you could do multiple layers, and it never worked. The code, it always worked in their in their little preview browser, but it never worked in any real browser. So it was total garbage. And I coated everything by hand throughout the whole course. Because why? Well, because you don't get to have control over the assignments, I recommend finding some way anyway, that you can make your assignments more exciting or interesting for you to keep you engaged. Because that's really what's going to come out of this, you're going to get the most out of this if you can use at least some inspiration from what they're doing to drive you forward in some sort of way. So I think that's an important concept is you need to keep yourself engaged if the course is not keeping you engaged. Like I had classes that were like music history, that I did really poorly and but I to get through them, what I would do would be writing computer programs to help me study. I was like trying to find some way anyway, to make it engaging. So if you're if you're getting bored with the programs that they're having you right, or any of that stuff, I still think you can find some way to make it more interesting to you. Like, what if, for instance, what if instead of just doing the assignment in Raptor, what if you didn't know programming language first, and then did it in Raptor is like, Okay, I'm the I guess that's double work, but at least you're getting something out of it. I don't know, I would, I would again, take make sure you're getting the lessons that the teacher is actually teaching and not just like what you think they're teaching, and pay attention as much as you can. And it take to take to learn the heart of the core concepts and fundamentals to the best you possibly can. And it should help you along. - -45 -00:27:50,820 --> 00:30:21,750 -Wes Bos: I just, I just looked up what this Raptor was. And it's like a flowchart diagramming tool. And I, I literally wrote so many flowchart diagramming tools in school, and they were not for programming, per se. They were more business processes. And like swimlanes, and things like that for like how you do order fulfillment and whatnot. It was like it was related to tech. But again, it had nothing to do with actually writing any code. It's funny because this this Raptor, the screenshot is from Windows XP, so I can feel how like, oh, the software must be to it's actually using I remember when I was doing these, I just remember being like, I have no idea what I'm doing. Like, why am I swim flow charting arrows to everything? I just remember being like, I have no idea. And it was because these teachers think like, Yeah, you got to focus on the fundamentals. You got to learn this stuff first, before you actually before you actually write any code. And we've talked about this before. And the reality is that maybe you don't necessarily have to spend your entire day on the fundamentals. And maybe you can jump in and start trying to write some stuff, it might not be good. It might not be the best stuff ever, but at least you're getting your feet wet. So that sucks for you that you have to do that. And like, what are the tips for getting through this grueling required work? Just do them, like you don't have to like slam dunk, I got 70s all through university, because I was just putting in the work that was needed to get through it. And like, I look back in hindsight, and when I when I did learn things, I look back and go, Oh, that's what that swim chart was. That's what the these ideas were. And I did look back and go, Oh, I understand now that I know these things. I look back at it. And maybe I did learn a thing or two. So definitely put in a little bit of time and get those done. But like what I really want to say here is that if you want to get good at programming, it's all about what you do and how you put in the time. So take this time that you have in school, start taking online courses or building a side project or you're obviously listening this podcast is that's getting you somewhere as well. Just keep listening to the podcast. Keep listening to the podcast, keep building things. Because when you get out of school, your career and what job you get is not going to be based on what grade or how many diagrams you built, it's going to be, what can you actually build? And what have you built in the past? And what are you familiar with in terms of real world technology? So that's my advice there. - -46 -00:30:21,750 --> 00:30:30,060 -Scott Tolinski: You mean to tell me West that my D and music history did not impact my career over as a web developer? - -47 -00:30:32,190 --> 00:32:05,850 -Wes Bos: Yes, it's, I don't know. It's funny, like we don't, I don't want to like, but pu traditional school so much, because like, there's there's a lot of good stuff that can come with that. But we get a lot of these questions where people say, like, hey, like what you guys who are real web developers are talking about, and what they're teaching me in school have almost no overlap. And it's frustrating to see because it's hard. I have also gotten emails from people who do teach in schools and are very much up on on how it works. Word. Next question from Randy. So it's been announced that sapper will never hit 1.0 and said spelt core functionality is being expanded. And sapper is going to be deprecated. Oh, so the the functionality of sapra is going to be rolled into what's felt is I know you all don't have any inside info on this, but kind of wondering how Scott feels about this. And what he's doing with his sapper site, and the nebulous time between the big announcement and the release of the next felt version. I'll really quickly just say what I say, thinking about this, I love this. I wish that react would do more, I wish that there was more rolled into what react does. There's something about the JavaScript industry where we have to pick and choose our pieces and often that's why people love next .js is that it next guest doesn't even do half the stuff you want it to do because they say go grab external packages for it, but I wish that more JavaScript frameworks would do more like like they're doing here - -48 -00:32:06,150 --> 00:32:18,030 -Scott Tolinski: Yeah, cuz when you control more you control more of the output right? I've gotten the the vibe with I don't know how much I know you've been doing a little bit Dino we should do another we should do like a dino Dino episode now. - -49 -00:32:18,060 --> 00:32:18,600 -Unknown: Yeah. - -50 -00:32:18,600 --> 00:35:50,520 -Scott Tolinski: I don't know how much you've been doing with it to the point where you've noticed some of this but I've really noticed that one thing I love about the dino infrastructure and community overall is that a lot of this stuff like linting and formatting and all that stuff. And testing is like baked in, which is just like it's so it's such a relief not to have to like oh, what what library Am I going to use for this? And does it does mega Lord connect to omega star and whatever doesn't make the big brain I mean, I honestly all those connections is like where things start to become a problem. So what am I going to do with mice sappers, I am not going to do a gosh darn thing with it. Not at least not for right now. Because really, what they said is that is that the spell to kit, which is what they're going to be calling it is basically going to have the functionality of sapper. So it's going to have at least some sort of file based routing system, as far as I know. Like if it has file based routing system, and maybe some things will be different. I have no idea my sapper site is basically a static site I'm reading and the markdown files and loading them up inside of this felt site. So my site is really not complex at all. My sapper site, I'm not gonna be doing anything with it until spoke it is done and released and out of the way in whatever, I have been familiarizing myself with the technologies on the production builds and everything they're going to be using roll up and then on the front end client side for development, they're going to be using snowpack. Now, we had Fred on the show talking about sky pack and pika pack in some of the projects he was working on. And snowpack is the sort of current iteration of all that stuff. And snowpack is is really super cool. If you haven't checked it out. snowpack dot Dev. One of the coolest things about snowpack is just how insanely fast it is. They're they're touting 5050 milliseconds, or Yes, 50 millisecond build times, or just outrageous stuff, because what's happening is they're just loading up a file, and if it needs compilation, then they're compiling that single file rather than your entire project. So build times are just just effortlessly tiny and In short, I've been running experimentally snowpack on a level up tutorials branch to try to see if we can have our site. We do a lot of like cute things with our repo that are kind of getting in the way but when I got it working at least a little bit, oh boy how to deal with a really cool so I'm gonna sit and wait a little bit. I'm really really excited that they're choosing to do this route with roll up and snowpack both separately for production or or Development bundles. I'd like to do something similar for us at some point in the future. But yeah, I feel really, really strongly positively about this. I think it's neat. Okay, so now we have a bunch of WordPress questions, we might be able to breeze through some of these because they're a lot of them are pretty similar WordPress questions. First one is from Jesse Woody. I currently work I'm currently working through a full stack Udemy course, to make the switch away from my day job to a freelance web development, I want to start taking on some easier freelance jobs to make extra money for my portfolio. And I see WordPress as a recommended way to do this. My basic question is, would it be worth undertaking the learning process of picking up some PHP to learn basic WordPress development so that I can start freelancing now? Or would I be better served learning HTML, CSS and JavaScript and waiting to broaden my understanding of these languages before taking on clients? - -51 -00:35:51,230 --> 00:38:37,730 -Wes Bos: That's a great question. Like, I was thinking about this the other day, like would WordPress still be the best intro to building freelance websites? Before you all get angry? Because we all hate WordPress? There's some some things to think about, like, Why do freelancers pick WordPress a lot of the times and it's because it's quick to get up and running, it's super cheap to host, the plugin ecosystem is massive, the client comes to you and says, Hey, I need the website to do this. There is almost always a plugin that will do something similar to that. And that's huge, because a lot of freelance developers either don't have the time or the skill to build that thing themselves. Even if you're looking at like, lucky, a headless CMS, there's there's not plugins like Gatsby has plugins, things like that. But they don't have the whole admin back end UI plugins that would be able to do that. And often the alternative to using a plugin is pay this $8 a month for this service, which is often not an option. So if you're looking at building a couple of $1,000 websites for clients, is it worth learning PHP and picking up some WordPress? I'm gonna say, Yeah, why? because learning how to like, like, how much PHP Do you really need to know in order to do WordPress not a whole lot, you need to know how to build classes and extend things? No, you need to know how to like, make a variable, loop over things, create a function that takes in data and return stuff. And all of the stuff that you learn in JavaScript can also apply to WordPress. So if that's the route you want to go, I think that's a pretty, pretty good route. If you want, you could also go the route of just doubling down on JavaScript and becoming more of a, like a JavaScript Dev and like a freelance where they just people will hire you to build UI kits and components and things like that. And you can get pretty far with just JavaScript. But there's still just so much so like, I have a lot of freelance devs friends myselves. But I think I've seen a lot of like big businesses, what do you call them? agencies either closed down that we're doing like full time, WordPress, not all of them. There's, there's lots of agencies out there that do big, big WordPress stuff, still, but I've seen a lot of them go away. But there still is a lot of freelance WordPress devs that WordPress is their choice. So yeah, I would say like it's probably don't don't bet on I'm like, I'm always hesitant with this stuff. Because everybody hates WordPress. And I always feel like I have to, like defend it to everybody. But like, I still think it is currently like I don't I've got my qualms about it. But I think it still is a really good choice for that type of thing. - -52 -00:38:37,919 --> 00:40:01,730 -Scott Tolinski: I think you'll have to decide like, essentially what type of developer you're wanting to be. Because, you know, if you want to be working at like thing and doing maybe like engineering, engineering, or computer science stuff, or maybe even more advanced user interfaces, then you're probably going to get more bang for your buck out of going hard on JavaScript. But if you just want to build client sites, and if you want to build if you want to build client sites in like an agency world or anything like that learning PHP, and WordPress overall will be very helpful for you in the long run. It's not going to be going anywhere anytime soon. So yeah, I would say it just all depends on what your goals are. Their next question is from Eric Butler. If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there's no API only mode for WordPress, like there is for rails or Laravel. And if I install WordPress on a server, and it's going to be discoverable online, I'd hate to have people in the WordPress API site think it was my website, or for my static site to have to compete with my WordPress API for prominence in search engines. How do I ensure this won't happen? redirects robots only have that HTTP forward slash API or whatever the word was a WP hyphenated PCI or I forget what it is even - -53 -00:40:01,770 --> 00:40:05,730 -Wes Bos: Yeah, like he means like the REST endpoint of the URL. Correct? Yeah. - -54 -00:40:05,730 --> 00:40:31,440 -Scott Tolinski: So either way having the REST endpoint of your API or use a graph qL, where there's only the one endpoint, have those be publicly accessible. And as far as your, your WordPress site goes, redirects, like I said, redirects and robots to prevent it from being crawled. So robots, file, disallow crawlers, and then redirect, especially the home page to your other actual homepage. - -55 -00:40:31,650 --> 00:41:10,730 -Wes Bos: Yeah, there's likely a plugin that will do this for you. But if I if it was me, what would I do, I would make a WordPress theme called WP dash nothing, I would have an index dot php in there. Because the way WordPress works is that everything will eventually try the index dot php. If it doesn't find any other files, and you just type in PHP return, you return nothing blank in that. Okay, that's done. There's no front end to your website. And then just to be doubly safe, just like Scott says, robots dot txt, disallow star everything. And that would be good. - -56 -00:41:10,730 --> 00:41:16,320 -Scott Tolinski: I think, one time we had our staging environment competing with the clients actual site, because we - -57 -00:41:16,440 --> 00:41:59,820 -Wes Bos: got to do our robots on it. It was, Oh, you know what, I think the website needs to do that right now. Because I was, I was thinking like all these Netlify and verse cell deployment previews. Oh, those are URLs out in the wild, like, Did that does that automatically? I wonder if they automatically do that. canonically link back? Hmm. Do we need to add like a robots. txt dependent on environmental variables? interest probably do need to Yeah. But like, I also would assume that Google would put something into their search engine to make sure like, clearly it's the same website. And these things keep popping up. And all the links go back to syntax FM, but we should probably look into that. Yeah, - -58 -00:41:59,880 --> 00:43:31,860 -Scott Tolinski: yeah. Next question is from gage. So I'm gonna rapid fire some of these out here. If I have a Vue JS website running on WordPress, how can I dynamically insert a view components into the word from the WordPress back end, Eg have every post that insert a Vue JS poll component, I don't want to recompile. So that this is a tough one, because what the component has to be living in PHP, essentially, if you're inserting a chunk of code, and that chunk of code could be written once, and that code is hitting the back end, you so probably what would have to happen, this is me spitballing, because I've never done this. But you probably have to compile that code down to just straight up JavaScript, insert that JavaScript to be loaded via a WordPress widget or WordPress section or something, and then just have some parameters being able to be changed. I don't know how the two interact. This sounds like a tough one to me. And I always remember back in the day of working in Drupal, and there's these things called Drupal blocks. And there was this experimental way that you could turn on PHP and the Drupal blocks. And everyone who is like good at Drupal would be like, please just don't do this. Because you're essentially typing PHP into a text area on the site. And I think about how many times I was like, well, this would be a lot easier if I just copy and pasted this PHP into this text area. It almost always worked, but it never felt great. So I don't know this, this seems pretty, pretty sketchy to me. But it seems like something you could probably pull off - -59 -00:43:32,340 --> 00:46:25,890 -Wes Bos: West. Any thoughts here? Like you could just dynamically insert it via the React Dom dot render, or view j s Dom dot render, and then pass in the data via props into into that component. So unless I'm like, listening to this, or understanding this incorrectly, there's probably something wrong with the way that you're architecting your component if you need to recompile it based on different data that needs to be passing. Because that's that's the beauty of the components. Right? One quick thing from the last question, I just looked it up. And both versal and Netlify, will send a header called x robots tag, and they will disallow your your preview URLs from being indexed by Google. So you don't even have to do anything there. It will automatically happen. Oh, cool. Next question from Glenn. My question has to do with WordPress. I've heard you mentioned previously that you have used WordPress to host sites in the past. I'm keen to learn how you have created your own themes for those sites. Do you write your own PHP etc? Or is there another way? I'm hoping to learn a bit more about developing for WordPress, this is a skill I'd like to have in my back pocket. I'd love to hear about any resources you'd recommend for this. This is a good question. So there's sort of like three different ways that you can approach this. There's one one type of person will go and buy a theme and then just start tweaking it. To make it look like they want. So that's pretty popular thing to do, you're like, Okay, I want to make this website, I'll start with something close enough and, and we'll tweak it until it is. Another type of person will buy a theme. And they'll create a child theme which allows you to overwrite, selectively overwrite parts of a specific theme. And that's great, because if there's a this is like this weird thing in WordPress, where themes also come with a bunch of functionality, which should be a plug in, but the theme does come with all this functionality. And the theme needs to be updated to support new things and, and themes have become massive, and just, they're, they're almost a CMS in themselves. It's kind of important, if you're doing that, then you need to maintain the code base, and then just apply your stuff on top of it. That's a child theme. What I do is just had like a starter theme that I built, but it's all just totally from scratch, it had like your basic loops, your basic nav, your basic footer, all of that stuff in it. And I would just start from that, and then build out the site from there. And I wouldn't update the starter because it basically just, it's just like a little bit of starter coding. It's not something you have to update over time. So yeah, that that dude, I write all the PHP myself. Absolutely. I still have a handful of WordPress websites that I maintain my own. My own wife's website is still in WordPress. And all of that is just custom written PHP that I've done myself, along with that handful of plugins for functionality that is needed. - -60 -00:46:26,550 --> 00:50:25,020 -Scott Tolinski: Cool. Yeah, I honestly, I have not written PHP or WordPress in a while. So I'm gonna defer to you on that one. I think the trial themes are having a starter theme is of course the way to go. And if you are hacking a theme, you best have some sort of error in handling exception tracking because well, if you're hacking a theme too much, maybe you have broken something and me nice to know if you broke something. So I'm gonna recommend it sentry@sentry.io imagine that one of our favorite sponsors over here at syntax, so you'll want to check out century sentry.io use the coupon code tasty treat all lowercase all one word, you're going to get two months for free. And I am just a huge fan of Sentry. We use it all the time. And one of the things I mentioned here on the show about how much I like it is really just the fact that every time I go to Sentry, I feel like there's a new stuff. You know, Sentry has been a big player in the industry for a while now. And I don't feel like they've they're not resting on their laurels. That Is that a thing? Either way, they're not taking it easy here there are they're always adding new features and functionalities to century even little tweaks and enhancements to the interface. So if you want the best error Exception Handling service out there, check out sentry@sentry.io coupon code tasty treat two months for free. Okay, let's get into last couple of questions here. We have some career questions. And then I think we can wrap it up with it with these two last questions here. This first one is from Tim Hello. And it says I've been a developer for 15 years. Unfortunately, I've had to leave web development for personal reasons, I have a lot of great skills. Unfortunately, because I've been out of the game for so long. my resume is full of holes, all of the current experience I have is project based or freelance based, I do not have the ability to show long term projects or anything stable on my resume. I'm trying to get my first job back in the field after a long absence. And it's proven difficult to nearly impossible. I'm listening to your tastytrade about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. That's very Tim, like that confidence. How can I get my first job back in the field? I am working on small projects to highlight my skill, but no one really seems to care. What would you do? Yeah, this one's tough. You really just need to find that agency, that dev shop, whatever those those developers who will who will see through the BS that this industry has sometimes and gives you a chance because I think back to my first I know you've been a dev for 15 years. So my first hire as a dev, I got hired largely because I think the the developer, you know, knew and maybe wasn't there but to tell I was passionate about what I was doing. I really loved it. And I was always trying to strive to better myself. And I think those kind of qualities that interviewers sometimes neglect can be the qualities that make you the best hire. So you're going to want to apply for a lot of things. Obviously, you're going to want to interview for a lot of things. So you're gonna want to play a bit of a numbers game here and I don't know if I would go too heavy into the like, I don't want to say thing but like, you might be better off looking at like agency places because they be more they might be more likely to hire somebody who's not like straight out of a boot camp slinging algorithm answers like they just practice them via flashcards or something like that there might be looking for somebody who has a more breadth of experience. So I would definitely say approach to that world or the agency world, the type of things or find it maybe a small project to help out on open source code, things like that, that will look good on a resume, obviously, nobody has infinite time. So it's impossible to just say, Oh, go off and hack away on some open source projects, and whatever, and just come back and get a job. So as long as you are passionate, you're applying, you're improving your skills, somebody will take a chance on you, you just got to keep going for it. - -61 -00:50:25,050 --> 00:53:00,840 -Wes Bos: Yeah, that's kind of the interesting thing about like, somebody who's been at it for 15 years, your problem solving skills are amazing. And no matter how much time you've taken off your problem, solving skills are probably very good. People's skills, I'm assuming are good. If you've been a web developer for 15 years, you've probably dealt with some clients over the years and things like that. So it's hard to say without actually seeing your resume and whatnot, like what the actual problem would be. But what I would do is like, you just need to present yourself as having all of these skills in addition to the latest hotness that everybody wants, right? Like, yeah, you should probably show that you're good with JavaScript and can sling a serverless function and can connect to a database and things like that. But also, also on the flip side, you have problem solving skills and people skills. So how do you do that? Well, you say you're highlighting your skills with small projects, maybe you need to jump onto something like open source and say, Hey, I'm a maintainer, X, Y, and Z, these just attach yourself to some maybe larger projects or, like, I'm surprised he's saying that the people are don't seem to care about the small projects, because that's what everybody said, when we asked about certifications is the proof is in the pudding. Right? So maybe those projects need a little bit more like it's not just like a one or two day thing. But you spent a couple of weeks on building these these types of things. So also, what would I do blog posts, maybe YouTube videos, oh, yeah, conference talks, things like that, taking and taking the topics that I talked about, like problem solving people skills, whatever other skills you think you have, from your 15 years, write a blog post about how you think new developers can can apply those things and just kind of show off and flex the fact that you do have these things, especially like a conference talk you right now, all the conferences are online. And there's tons of them, like, there's probably like three times the amount of conferences than there were before because you can do them online. And everybody's trying to do an online conference. So you can probably do it either a YouTube video conference, talk blog posts about those skills. So that's what I would probably try next. But I also think, like, we need to do some sort of episode on, like reviewing people's resume or reviewing. I don't know what you call that. But like your presence, you know, like, people often say, like, hey, I've done these things, but it's not working. Why we don't really see much past these questions. So I'd love to be like, Alright, well, I looked at your website. And - -62 -00:53:01,020 --> 00:53:02,880 -Scott Tolinski: these are the first things I noticed. Yeah. - -63 -00:53:02,910 --> 00:53:31,650 -Wes Bos: Yeah. Something as simple as you have way too much drop shadow on this thing. That's a huge turnoff for me, you know, and just like little things like that, that could be doing it bad fonts or something. Yeah, yeah, totally. And those are things like, if you've got 100 people to look at, and somebody's gone overboard with a drop shadow seems petty, but I would be like that next. They clearly don't care about, about that type of thing where you might not even think about that. You're like, Oh, it looks fine to me. I didn't realize that. - -64 -00:53:32,010 --> 00:53:34,320 -Unknown: Yeah, totally. Yep. Absolutely. - -65 -00:53:34,980 --> 00:55:34,020 -Wes Bos: Last question from Ethan. Hey, what's up Scott. I'm currently in a food service job but would love to move into the dev and design field. I have a year of experience in JavaScript, HTML, CSS, and sass as well as react Gatsby next to node. Okay, bingo. This This guy is hit all of the all of the the bingo spots for it. I have a small amount of experience with freelance web design and development, but I feel like I am greatly underselling myself. $150 for a Gatsby site built for a friend and less than $100 for a couple of Fiverr gigs. Yeah, that's that's very cheap. I have seen freelance work worked out well for my friends and family, but I'm terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that just says shoot hi and have them talk the price down. But I hate confrontation. How should I go about finding my first $1,000 client? And how should I show the client that my work is worth it? This is a great question because and we've we have a couple freelancing episodes you can go to and we have a couple on quoting as well. Go through and listen to all of those because it is it is a hard thing to say. This is my work. Allow me to bill you like $1,000 not even a lot for a website but a lot of people are super uncomfortable with even asking that because they There's maybe some imposter syndrome there, they don't feel that their their skills are worth it, it really just boils down to not proving to the client that you are worth that, but proving to the client that the attack you're building is going to be worth it to them to their business or to 31. So you're building a new website for a realtor, if you literally get one new client from this website, like I remember when we bought our house, I went through like 15 different realtor websites. And there was one person that had a nice website, and we went with - -66 -00:55:35,820 --> 00:55:37,470 -Scott Tolinski: that sounds very you Yeah, - -67 -00:55:37,499 --> 00:56:21,750 -Wes Bos: yeah, it's like you, you paid a couple 1000 bucks to have a nice lead design website. And you got I don't know how much to realtors make tons from selling a house. Right? Right. So you just have to like sort of turn the tables and say, it's going to be worth it to your business to spend this stuff. And also, like you just the first time putting yourself out there, you just got to put them you got to put the quote forward and say, This is what I'll charge. I'm they're really excited to help your business succeed. That's it. And don't stop saying sorry. And I'm not sure. And if it's too much, let me know, you just got to put it out there. And they might walk away because it's not what they expected. But like from what you're saying, people should be jumping at $1,000 websites from you. - -68 -00:56:21,870 --> 00:58:08,310 -Scott Tolinski: Yeah. And in it, just think about, we did a lot of comparing to other industries in those episodes. And I do want you to think about that when you're when you're thinking about this as well. Because think about the last tradesperson that you hired who you know, I don't know, I've had people into like, look at our bathroom or something because we need a little bit of a rant on our bathroom, right? So we had several people right before the pandemic come over and look at it. And sure enough COVID head, we didn't get to do it. But I remember the process that I went through in my brain trying to decide which of these people would be the right people to go with. And I'm thinking just like, how they they talked about their work. And it's difficult to ask for money and be confident about all that stuff, when you do feel maybe a little bit of imposter II or you're not used to it. But just think about those trades people who are like, it's gonna be this much Take it or leave it, I do good work. And that's really like, kind of the mindset you need to be in in a way it's like this is definitely going to be worth it to your client. It shouldn't be you shouldn't you shouldn't work to undervalue it. There's a book called design as a job I talk about at least a few times a month on this podcast by Mike ponterio. That is really good about hyping you up to believe that your work is worth way more than you're asking for. And I highly recommend checking that book out because it can really change your mindset. But again, think about other tradespeople. And if you're hiring somebody, what type of qualities Would you like to see in that person? And try to emulate a lot of those things. Just try to be you know, even you can pretend or LARP around like you are really fancy, you know, boutique website guy. And maybe that's it. But yeah, I think that that that will go a long ways for you. - -69 -00:58:08,940 --> 00:59:04,440 -Wes Bos: Yeah, like even one more thing coming back to that, like Scott said about the having a contractor trade in your house. It's always like a mix of like, clearly you're competent enough to do this. But I also like you as a, a people person, I trust you to be able to say like, Oh, yeah, it's gonna look amazing in here, like, Oh, you know, what we did on another website is we made it responsive. And we did like a different nav. So like, you've got a lot of items in your nav. And I think that we could, like, rearrange this thing on mobile. So it works a little bit nicer. And then you say, Hey, have you ever been on a website where it's just like, awful to use on your phone? Just like relate to them a little bit and say, like, yeah, we can make this work well together. Awesome. It's not just like, I charge 1000 Yes, or no, you know, there's there's a, there's a lot you can do in terms of like, putting your client at ease and getting them excited for for the work that you're going to do so. Good luck with that. That sounds really cool. Heck, yes. - -70 -00:59:04,440 --> 00:59:18,510 -Scott Tolinski: Well, okay, that that is it for this potluck. I think it's time to get into sick pics. Sick pics are things that we picked that we find to be sick. Wes, do you have any sick pics because I at least have a few I've been podcast hunting lately. - -71 -00:59:18,870 --> 00:59:24,150 -Wes Bos: Oh man. Good You got even more podcast? I am going to sick pick a box of meat. - -72 -00:59:24,780 --> 00:59:36,540 -Scott Tolinski: See this is very on brand. I'm sick picking a podcast which is going to be some sort of a scam based fraud crime podcast and you are going to sick pick a box of meat. This is very unbranded - -73 -00:59:36,600 --> 01:00:43,170 -Wes Bos: Yes. Bread. So I tried out one of these local box of meat delivery companies. This is called True local. This is probably for Canadians most likely, I think they're in Ontario and check if they're in your location as well. I'm in Ontario, and it's really cool because there's a lot of farms in Ontario that do good Quality, sustainably sourced, they're kind to the cows, and pigs and things like that. And then there's also like you go into the grocery store. And there's a bit of a disconnect between, like being able to just buy it directly from your farmer. And then the stuff that's in the grocery store is not necessarily some of the best stuff. So I tried out one of these boxes from true local and it was awesome. I got bacon, bone broth, a bunch of steaks, really nice prime rib turkey bacon, which was surprisingly good. It was really cool. It's you, you can sign up, you fill out your box, they give you like 20 points. And like bacon is one point. And then like a prime rib is four or five point, something like that. And it was really cool. Big fan. Sounds - -74 -01:00:43,170 --> 01:00:43,680 -Scott Tolinski: cool. So - -75 -01:00:43,680 --> 01:00:59,010 -Wes Bos: check it out. It's true local tea, are you local.ca. And you can just sign up for one month and try it out. And it comes with dry ice, which is really cool. Because Have you ever had dry ice Scott? - -76 -01:00:59,250 --> 01:01:04,980 -Scott Tolinski: Hey, true local USA. Man, we've ordered some some food before that has come with dry ice as well. - -77 -01:01:05,040 --> 01:01:29,040 -Wes Bos: But yeah, it comes with it comes with dry ice, which I was very surprised because it went out for delivery at like 8am. And I got it at like 3pm and everything was rock hard still. And then we gave we put all the dry ice in, in a bunch of like a boiling water and our entire kitchen was full of all the steam and the kids loved it. So it was fun for the fun for the whole family. - -78 -01:01:29,880 --> 01:02:03,780 -Scott Tolinski: Yeah, yeah, I should check this out. I know we've been doing some some of those meal delivery services. You know, we've tried all of them out because that's what Courtney does. She does like the coupon that you get the first month of them. And since there's like 20 of them, she's just like, tried all of them. So a meat delivery. It looks cool. I'm into it. My sick pack is Whoo, I got to pick a podcast here. I've had so many interesting podcasts that I've been listening to. I could really just close my eyes and pick at some of these interesting ones I've been listening to but I think this one might be the most entertaining. And something I'd never heard of. It's called chameleon, - -79 -01:02:04,020 --> 01:02:05,760 -Unknown: hollywood con queen. - -80 -01:02:05,760 --> 01:03:17,520 -Scott Tolinski: So con, the swindling type of podcast of which I am into this one is really wild. It's a story about tradespeople in Hollywood being essentially scammed into this really bizarre scam where they're flown to Jakarta in them sort of drifting around. And they're depositing small amounts of money here and there. It is so weird. But by Episode Six, I've already had several like what moments and I can't believe I've never heard of this at all. So chameleon, hollywood con queen is very good. The storytelling is very good. You know, it's your standard, you know, 45 minute long True Crime episode where it's like, you know, each one reveals a little bit more like a Netflix documentary or something. But I really liked this one, and it just popped up on my radar. And I've been just constantly being like, Whoa, actually, let me do a twofer here. Because podcasts are a dime a dozen. Right? There's two for the second one here is this is an I Heart Radio Podcast. And it is called q clearance the hunt for Q anon if you aren't familiar with the Q anon conspiracy, it's like - -81 -01:03:17,580 --> 01:03:18,450 -Unknown: yo q head, - -82 -01:03:18,480 --> 01:04:15,270 -Scott Tolinski: Scott, come on was please. Like, it's so stupid. It's so incredibly stupid. And what this podcast is doing is is this guy who's British, so he's got like, No, no, no dog in the fight here, so to say. But he's like just trying to identify who the heck Q is as a person, maybe diving into the history of a lot of the anonymous image boards and message boards on the internet. And like talking about the likelihood of the fact that it's, it was most likely one person pulling a prank on other people, and then like now has been in the ownership of an actual white supremacist guy who is just like doing it to rile up the base. It is a very interesting and he does a lot of diving into internet stuff. So if you're like a darknet diaries, fan q clearance is very good. It's very, very good. It's also horrifying. Just how many people believe such an idiotic thing in general. So yeah, those are my two picks. - -83 -01:04:15,600 --> 01:04:25,350 -Wes Bos: Beautiful. All right, shamelessly plug all of my courses West boss.com forward slash courses, check it out and learn a thing or two for the upcoming 2021 - -84 -01:04:25,800 --> 01:04:26,640 -Unknown: yeah, - -85 -01:04:26,640 --> 01:05:11,670 -Scott Tolinski: check out level up tutorials.com. Our latest course, at the time of recording this episode is Dino one on one for web developers. We teach you the basics of working in Dino by the end of this course. You get up and running, being able to read file, we do a contract generator where you read a file and you enter some inputs and it spits out a contract. We also work pretty heavily in Oak which is a Coca Cola like web framework for Dino where we build into actually building an API with oak we get into serving static files and static pages with oak and a lot of neat stuff along the way. So if you want to, as a web developer learn the very basics of Dino, check out Dino, one on one for web developers on level up tutorials.com. Alright, thank - -86 -01:05:11,670 --> 01:05:15,060 -Wes Bos: you so much for tuning in. And we will catch you on Monday America - -87 -01:05:15,060 --> 01:05:21,630 -Scott Tolinski: Christmas and Happy Holidays to all of those who don't celebrate Christmas as always you inconsiderate, cool. - -88 -01:05:23,220 --> 01:05:24,980 -Wes Bos: Happy Holidays everybody. Sorry. - -89 -01:05:26,250 --> 01:05:29,520 -Unknown: Face peace and love, peace and love and - -90 -01:05:30,420 --> 01:05:31,110 -sleigh bells. - -91 -01:05:32,910 --> 01:05:42,690 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax313.srt b/transcripts/Syntax313.srt deleted file mode 100644 index eb09f4777..000000000 --- a/transcripts/Syntax313.srt +++ /dev/null @@ -1,268 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday Open wide. Get ready to stuff your face with JavaScript CSS loadmodule BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott L. Totally ski. - -2 -00:00:26,010 --> 00:01:01,560 -Scott Tolinski: Oh, welcome to syntax. And this Monday tasty treats, we're gonna be talking about hosting and web servicing Web Services pricing explained. So a lot of times we head to a new service and it says, this is going to cost you 0.3 cents per whosits and whatsits. And you might just be like, whoo, I don't know what that is. So we're going to be talking all about the different types of pricing that different services can charge you what they all mean, and how that affects your bottom line. My name is Scott winsky. I'm a web developer from Denver, Colorado, and with me, as always, is the West boss. - -3 -00:01:01,560 --> 00:01:18,090 -Wes Bos: Hey, I'm excited about the show. It's not gonna be the most fun show ever. But this is something I'm really you're gonna you're gonna be your mind is gonna be blown. But like, I never, I like especially with like Heroku they'd say like a, how many dinos do you need? - -4 -00:01:18,360 --> 00:01:23,940 -Scott Tolinski: Yes, I don't know what I would like one that dinosaur base, and it's gonna be really cool. Okay, - -5 -00:01:24,480 --> 00:01:43,260 -Wes Bos: how many Dino dinos did Dino need? So like I pricing it? Sometimes you look at these pricing pages, like, I don't know, how much is it gonna be? You know, and now that I understand it a little bit better. I thought let's, let's, let's tell the people how it works. - -6 -00:01:43,410 --> 00:02:32,630 -Scott Tolinski: Yeah, it's some of it was like with even with AWS, it's just sort of like, well sign up and see how much it costs after the end of the first month. Yeah, I'm not going to be using that much of it. So it's not going to break the bank. So let's get into it. The first topic that we had here would be a lot of places charge via the minute or time that you're going to be using something. And this is oftentimes with servers that gets spun up for serverless functions, because those functions that are run are only run for that period of time. And then there's that computer interface is able to be used for something else, right, the classical, most like shared server type of thing, but just different. And so because of that you're paying for the amount of time that function is running in that amount of time that that service is being used, rather than the fact that that service needs to exist. 24 seven, - -7 -00:02:32,780 --> 00:03:24,150 -Wes Bos: yeah, you these ones, for me are at least the probably the easiest to estimate other than just paying a certain amount per month for a specific amount of resources. And that's just because like you can literally run your functions. And then you can do some quick back of the napkin math as to like, how long did that take? All right, 300 milliseconds or 100 milliseconds. And then how many times will that be hit, maybe a user will hit that page 100 times a year, and then you have 40 users. And you can pretty quickly do that. This is pretty popular in serverless space, because you are literally paying for time you just a couple couple seconds of a server, and then somebody else could seize that server after you. It's also popular in using graphics like you can, you can also do this for graphics cards, AI, machine learning things like that you pay by the minute, or by the second for the amount of time that you're using on those servers. - -8 -00:03:24,390 --> 00:04:34,760 -Scott Tolinski: Yeah, and those scale with the amount of load, you're putting it under, you're asking it to do a big heavy thing, it's gonna cost you a bigger, heavier dollar than if you were doing something that was really light, because it's inherently going to take less time. But in the same way, this one is also kind of the same thing. I mean, they're all facets of the same thing if you think about it, but in this regard, the next one that we buy resources in how many resources not be a time, will you be charged and this can be the common VPS model that you've seen for a long time. And that stands for virtual private server something like Digital Ocean where you're paying for the price of the virtual private server and you are paying for it this stats on it, you're paying for the resources as in how much CPU can this thing handle? How much RAM does this thing have? How much storage space does this server have. And then as you need more, you can always scale up and many other container based things. So this is how level up tutorials is hosted or hosted on Meteor galaxy and we pay by the resources we have auto scaling in case we get hit too hard and it can scale up our containers to use more resources if we need it or and all the good things that you're you are used to with that sort of flow. - -9 -00:04:35,390 --> 00:05:09,870 -Wes Bos: Yeah, if you are used to also like a Digital Ocean droplet, or what's the other one linode is another popular one space Rackspace, things like that. You say I need a gig of RAM and this was CPU and disk space is not necessarily a big one anymore because disk space is it's so cheap, but one thing you do want to look at there is are they SSDs Yeah, because when they do Read the file from that disk. It needs to be fast, right? That was the Yes. That's how digitalocean sort of got onto the scene is that they started as a SSD first hosting company. - -10 -00:05:10,050 --> 00:05:11,850 -Scott Tolinski: Where did you host before? digitalocean? - -11 -00:05:12,200 --> 00:05:34,920 -Wes Bos: I was on media temple. Me too. Yeah, yeah. Media temple was a really big one. And then I had a I had a GoDaddy server for a long, long time. I still have a Bluehost server. I do too. Yeah, that those those like GoDaddy Bluehost companies that have just like PHP LAMP stack, they like once they get somebody in there, it's gravy, because it's hard to move. - -12 -00:05:35,460 --> 00:05:41,700 -Scott Tolinski: Yeah. And and I think they know that because they Yeah, they pay a decent amount for referrals. Oh, yeah, ladies. Yeah. - -13 -00:05:41,940 --> 00:05:57,060 -Wes Bos: I think like with Bluehost, I'll often I used to have affiliate links before I denounced them. And they would pay like $100 per sign up. And they know, that's because somebody that pays is going to be with them for 810 years or something like that. - -14 -00:05:57,120 --> 00:05:58,410 -Scott Tolinski: Yeah, that's what they're banking on. - -15 -00:05:58,560 --> 00:06:23,880 -Wes Bos: The next one is per dyno. This is popular with Heroku. And you may you may hear like, I think other hosting companies have this similar similar vein. And essentially, it's just a virtual Linux server, like we were talking about earlier. But then they will give you a specific amount of CPU and memory as well. I'm not sure why they call it a dyno and not just what you're getting. What does the dyno even stand for? And - -16 -00:06:24,180 --> 00:06:24,900 -Unknown: Heroku? - -17 -00:06:25,320 --> 00:06:26,610 -Wes Bos: That's a good question. - -18 -00:06:26,940 --> 00:06:39,420 -Scott Tolinski: Because that's the first time that I'd ever heard that, that language. And I wonder if it is just like marketing, we need our you know, AWS is so heavy in that where everything is the AWS version of whatever it is. - -19 -00:06:39,630 --> 00:07:22,410 -Wes Bos: Yeah, and and the the coolest thing about Heroku. And all these other platforms is that you can just add more dinos, and it will just make your app faster. Because the way that Heroku works is your apps are stateless. And you can just run your app on multiple servers. And that's why like, if you try to use Heroku, and you upload an image, you might come back to find out like a week later that your images are gone. And that's because they don't have any state that if any files that are uploaded, Heroku will just be be cleaned up, you have to put them somewhere else like a s3 bucket or something like that. And that's great, because they they will, they will launch more versions of your app, and then they'll run it on a load balancer for you. Maybe that's why they have a special name for it. - -20 -00:07:22,520 --> 00:07:48,570 -Scott Tolinski: My understanding is that might be that because Heroku was like the first big primarily used one to do the container based scaling up and scaling down. I think they just called them dinos before they were called containers. And then after they had got started calling containers, I see in quotes, it says that on their site, it says a dyno, which is isolated, lightweight Linux containers. So it doesn't explain it as being anything other than that. - -21 -00:07:48,600 --> 00:08:47,100 -Wes Bos: Yeah. One other thing that Heroku has is they have free dyno hours. So that was another weird thing to me. When I was coming from a traditional server, you pay for the server, you get a box somewhere and it's running. And then they would be like, how many hours do you need? And I'd be like, all of them 24. Yeah, it should always be up 24, please. And I never understood it. And now I get it. Because the way that it works, like I said is that very similar to serverless functions is that that box will spin up, it will turn on when people are visiting your website. And then when you're no longer using it, it will turn off. And then when somebody hits the website, again, it will turn on. And that that's the cold start that you hear often. And that's good to know. Because sometimes you have you have a website, you could host 100 websites on there, and you might not get any traffic to them, because they're just side projects, things like that. And if they're not getting a whole lot of traffic, then they're not costing Heroku really anything in terms of resources to run them. - -22 -00:08:47,520 --> 00:09:26,610 -Scott Tolinski: Next is by bandwidth. And bandwidth is the amount of data that is transferred. Because we often think about like data in terms of like storage, but we do work in a medium that's primarily on the web. And on the web. One of the biggest things that you you track is how much data is sent in. And that's really what bandwidth is, is if you have big, heavy files and you have to send them then you're going to be paying more in bandwidth fees because it costs money to send them ISP are currently exploiting by data caps, not a bandwidth that is being traveled is what's going to be the thing that's tracked there. What services in your mind, do you see as companies offhand, do you know that charge by bandwidth - -23 -00:09:26,640 --> 00:11:09,570 -Wes Bos: the one that I use is backblaze b two which I use? Yes, do all like downloads for my my video courses. And so they have like a couple things like I pay to have my video files on their server. So for a terabyte it's five bucks a month. And then if you're uploading terabytes another five bucks a month and if you're deleting a terabyte it's another five bucks a month so they charge you for any time that you either hold data, you upload it, you download it or you delete it or sometimes they refer to as Ingress or as That you're transferring data to them. Like, I think mcse is another one that will charge you for Ingress. And so that that's another thing to think of. Because like, yeah, it might cost me I'm not saying this specifically for Microsoft for one of these platforms, it might cost me $100 a month to do this. But if I wanted to move over everything, I've got terabytes and terabytes of data, that right to move in, especially like, if you think about like a hosting platform like cloudinary, right? Like, I don't know what cloudinary uses behind the scenes, whether it's Amazon s3, but like, let's say they wanted to move from Amazon s3 to whatever the Azure image hosting version is, then they would have to calculate, okay, we've got, we've got 70 terabytes of photos from the last year, if we wanted to move those all over, that would that would be a pretty penny just to get it into the server, let alone people requesting these images and downloading. So that's something that probably most people listening this podcast don't have to necessarily think about that. But if you have a large application with loss of user content, then you would be probably thinking about that. - -24 -00:11:09,900 --> 00:12:34,110 -Scott Tolinski: Yeah, and some of these things, you need to take an entire course on to know how much you're gonna pay for the thing, because it is funny that I'm looking at like, muxes payment page. And granted, they do a good job of this, but it's for encoding mux is 0.5. dollars a minute, so five cents a minute, to encode. And then for storage, it's point three cents a minute to store them. And then to stream it, it's 0.13 cents per minute. So like, that's three, like fractions of $1, spread out over three different things. And so you might be like, Oh, I have no idea how I'm gonna pay for this, like what I'm going to pay for this service. But that's why a lot of these things end up giving you video calculator. So like monkey has a really neat video calculator where you can say, Alright, my average video is, let's say, my average videos, 10 minutes long, I'm going to get 25, I'm going to do 25 monthly uploads, and then the average video view count, I don't know the default is 75,000. So that's fine. And then you're going to be paying 550 bucks a month to do that. So like, hey, that that tells you pretty explicitly what that's going to cost. But you have to know that information going into it, you might be able to do some like calculations to say okay, maybe in the future, this is what it will look like. But at the end of the day, you do need to have some information about what your traffic should look like to be able to calculate a lot of these. - -25 -00:12:34,380 --> 00:12:51,690 -Wes Bos: Yeah, or even like another way to think about it is if you think about like what a user would do, like an average user would use in terms of traffic. You can think about that. And then and then you've hopefully, if you have a business, you can figure out what is the user worth to you? And then you can say, okay, the like, for me, I know, - -26 -00:12:51,720 --> 00:12:54,630 -Scott Tolinski: users are priceless. I cannot put a price on users there. - -27 -00:12:55,860 --> 00:13:36,000 -Wes Bos: Yeah, like if a user watches an entire course, I know how much that's gonna cost me and I know how much I'm making. And that allows me to make calculations based on other things like that, based on like, how much free courses can I offer to stream as well? Because I have to pay for bandwidth on that as well. What else do we have here by database calls? If you've got like a database service, they will often charge you either by entries, like how many entries Do you want to store in a database? Or how many calls Will you be making to that specific database? Again, for me, that's, that's really hard to calculate, because like, how many database calls are you making? Yeah, for a specific page, sometimes it's six or seven, - -28 -00:13:36,000 --> 00:13:44,490 -Scott Tolinski: if you have joins, that's another call. Right? But in most cases, they're peanuts. If you have graph qL, could end up being 30 calls without you even knowing. - -29 -00:13:45,270 --> 00:14:09,480 -Wes Bos: Yeah, yeah, it's true. Like you can sometimes forget about the database underneath graph QL. What else users This is more of a SAS thing. But it can bleed into hosting how many users are able to log into your platform and manage your specific app or whatever. And sometimes you have to be on a specific tier in order to get either features or amount of users that can access specific things. - -30 -00:14:09,840 --> 00:14:45,510 -Scott Tolinski: Yeah, and GitHub works that way. And then yeah, I would call GitHub. Yes, certainly a SAS but it is like a web service. Use it for our entire pipeline. And so we have to pay for more minutes in our pipeline. But we also have to pay per user for our API although I don't know how many of the features we would lose if we just went to the the free private account thing that you can do now because we have a team have a few people so I don't know I'd maybe you should look at that but doesn't Netlify also charged by seats. I thought they did but I'm looking at their I feel like we had to pay for additional seats in our account to get team support. - -31 -00:14:45,840 --> 00:15:12,450 -Wes Bos: Yeah, there you get one team member on their free one. And then on your your the pro account, it's $19 per member per month. So if you want more people to be able to manage your application, or see logs and things like that, then you can pay That I don't think that like every team member would need would need that though, just because you get most of the, the info about a build will be put into a GitHub comment on on a pull request. I'm like that. Yeah. - -32 -00:15:12,450 --> 00:15:14,130 -Unknown: Yeah. So that - -33 -00:15:14,130 --> 00:15:24,000 -Wes Bos: that that's kind of interesting one as well, the the way, kind of around that I see a lot of people do that as they just share the login. And especially with something like Firefox, - -34 -00:15:24,000 --> 00:15:41,300 -Scott Tolinski: I was gonna say, with like one password, because that's what we do, we share not not of all of our services. Granted, we paying for a lot of Team Services. But we do share services to some with one password in it, it makes it really nice, because you have a team shared one password thing, and everybody's got the passwords, and you get an auto fill in whatever. Yeah, easy. - -35 -00:15:41,670 --> 00:16:19,440 -Wes Bos: One little thing that I use is Firefox containers, or container tabs. I haven't used these. And it's awesome, because I can just open up a container tab for something else and just go to youtube.com. And I'm still I'm just signed into youtube.com as the one that I'm sharing with everybody. And I don't have to like log in and log out or open up an incognito tab and log in. So you get all the benefits of that. And I think in Chrome, you have to open the entire second browser. But Firefox allows you to have container tabs. So just that one tab will be an array of your own cookies and your own sign in stuff like that. That's that's I really like that. - -36 -00:16:19,740 --> 00:16:27,480 -Scott Tolinski: This is sort of sort of unrelated, but kind of related. Do you see that? Like, I saw a screenshot of like Chrome grouped tabs, if you see yes, - -37 -00:16:27,540 --> 00:16:29,010 -Wes Bos: I get it. It's a gray. - -38 -00:16:29,520 --> 00:16:31,230 -Scott Tolinski: Yeah, do you get in your Chrome, - -39 -00:16:31,260 --> 00:16:37,980 -Wes Bos: I have it every time I open Chrome. I'm not a I'm not using Chrome as my daily driver. But every time I use it, I'm like, What is this great line. - -40 -00:16:38,010 --> 00:16:50,790 -Scott Tolinski: And then I finally figured out that's what it was. I haven't opened actual chrome in a while. And I know brave is like kind of different because I don't have those things in brave here. So I wonder if we're gonna get container container windows in Chrome, - -41 -00:16:50,820 --> 00:17:00,000 -Wes Bos: you can turn it off. But I don't particularly like it. Although I don't know. Maybe I'm. Yeah, I wonder if it is coming to Chrome. Because they're they're doing that - -42 -00:17:00,000 --> 00:17:04,650 -Scott Tolinski: it sort of seemed like a preface to me. But I'm pulling that out of nowhere. So that's - -43 -00:17:04,680 --> 00:18:05,300 -Wes Bos: where most of our information comes from. Next, we have here is by apps. How many apps can you host digital oceans app platform does this now where instead of paying for resources, although you can you can increase the resources on a specific app. It's by app. So in like for me, I can grab a Digital Ocean droplet. And if you want to run all of the nginx stuff yourself all the certification, the certs, yourself, all of the renewing of the certs, if you want to run that all yourself, you can run as many apps as you want on a single digitalocean droplet. And like if they get too popular, then it will slow down, right. But digital oceans app platform is by the app, so you pay for $5 for every single app that you have. And if like for me, I have back end and front end on one of the episodes working on. And in that case, it would be $10. And that's just the price you pay. I think for all of the ease and benefits that come along with that type of thing. - -44 -00:18:05,810 --> 00:18:11,220 -Scott Tolinski: It really bummed me out that you can't use CloudFlare with digitalocean. Yeah, - -45 -00:18:11,250 --> 00:18:29,940 -Wes Bos: yeah, yeah, definitely do a whole show on the Digital Ocean app platform. Because it is awesome. But yeah, they, they're so ingrained with what they do, you just can't use CloudFlare. And for a lot of people, both for security standpoint, and for just like the stats that they give you, they don't let you do that. - -46 -00:18:29,940 --> 00:19:03,300 -Scott Tolinski: Also the amount of like, if you already have something that exists on a platform that's using CloudFlare, you might have some things that are pretty, not necessarily tightly integrated in, but like some things that you might be relying on that, like the DNS stuff in CloudFlare is way better than a lot of other DNS providers. Like you can do neater things with like different types of alias records that aren't necessarily like real types of records, or maybe even like we have redirects set up all the way at the CloudFlare level. And that to me, would be a bummer to lose. Because I looked at I looked into this app platform, it's pretty sick. Other than that, - -47 -00:19:03,900 --> 00:19:36,320 -Wes Bos: yeah, it seems like like I don't Netlify says if you use CloudFlare, with Netlify, you lose some of the I forget what it is you lose some of the edge benefits magic because they don't have control over the DNS. So in order to make it as good as possible. I think first cell does this too. But in I think in both cases you can knowing that you're giving up some of their edge benefits, then you still can use it and with digitalocean is just says not not gonna work. I bet they'll change that though, because that's a huge, huge thing for people. - -48 -00:19:36,780 --> 00:19:54,350 -Scott Tolinski: I was gonna say, also by apps and a different sort of way to look at this. They're like Heroku had a thing where you could add apps to your app needs to die. No. Do you remember like, you can like one click add on services to your URL. I'm using the word app in a totally different way here. - -49 -00:19:54,590 --> 00:19:56,970 -Wes Bos: Like Like a database or what Yeah, - -50 -00:19:57,120 --> 00:20:05,330 -Scott Tolinski: you could pop in like an M and I always thought that was kind of interesting, but I always got confused with like, Where's this thing? Like, is this the ownership of my app? - -51 -00:20:05,340 --> 00:20:38,280 -Wes Bos: Like, I think it's just the tight integration with other, it's just a tight integration Prisma did this to where you could like, quickly create a database on another service. Yeah. And I really liked that, because like, it's still on this other service, which you like to use, but you don't want to like, sign up and API keys and users and all that stuff, you can just do it from one dashboard. I don't think that that was anything other than that, although I'm not I haven't been a huge Heroku user. I've done lots of demo apps on Heroku. But I've never set a production app on Heroku, we - -52 -00:20:38,280 --> 00:21:04,920 -Scott Tolinski: hosted level up on Heroku for like, maybe a couple years, I only moved it to Meteor galaxy, because I wanted to help support Meteor development group and the cost the same, like I wasn't, I wasn't, it wasn't any more or less expensive, but it's like, okay, Heroku has their money, you know, media developer group could could not necessarily could use the money, but maybe they you know, that money could go back into the development of the platform that I'm using, rather than some other service, you know, last one we - -53 -00:21:04,920 --> 00:22:31,770 -Wes Bos: have here is just by work, the one that pops out here is cloudinary. They they do both bandwidth, obviously, because their images, but they also give you a certain number of transforms. So if you need to resize an image, or convert from JPG to PNG, that's a transform. I mean, you do that once you have like Scott dot png, you want to turn it to jpg, you transform it. And then the next person that requests got that JPEG, you don't need to transform again, unless you're changing something about it width, or the height, or the quality or something like that. Yeah. And that's kind of cool. Because if you think about, like, resources on there, and but my favorite way, just looking at all of these different ways, my favorite way that that is done is when you can just like tell me how much it's gonna be a month. And just hope that me as the user doesn't cost you more money than you're bringing in, right? Like, sometimes I look at these pricing pages. And I'm just like, I have no clue what this means to me. Obviously, it means a lot to you, because you're trying to calculate how much a user will cost in terms of how many resources they're using and transforms and all that stuff. But I, as the user, just want to know, how much is it going to be per month, generally for the the type of app that I want to run on? It's obviously a hard thing to do. But that's that's my big, big fan, when something just costs a certain amount. You don't have to be a rocket scientist to figure out how much it costs. - -54 -00:22:32,100 --> 00:23:26,700 -Scott Tolinski: Right? You You're you got the chalkboard out, you got all your equations, you're doing the math, I actually really I love a good a good calculator in that regard. And I think to shout out monks once more muxes calculators very good for what it is that tells you exactly I mean, they give you sliders, they make it really easy. It like feels very helpful, like they're trying to help you make that decision. And when when I first talked to the mcse, folks, they said they launched the calculator so that people would realize how cheap mcse was not so that they could see how much they were going to be paying. I mean, obviously it is. But like, that seemed like to be the message was like that people think we're too expensive. And we want you to easily see that we're not too expensive. And I thought that was a really neat way to put it. That's another service that's hard to calculate because they do the transition transforms, sort of like cloudinary does, right? where like, if you ask for a 1080 p version, it's transcoding chunks of that on the fly. It's pretty cool. - -55 -00:23:27,000 --> 00:23:30,150 -Wes Bos: The last one I'm just looking at here is what does CloudFlare workers cost? - -56 -00:23:30,390 --> 00:23:44,460 -Scott Tolinski: Because that's kind of serverless functions, but it's also like edge functions. It's its own sort of thing. We should have an episode about like, what are some projects that you could use like edge workers for essentially, that would be a little bit more generally, - -57 -00:23:44,460 --> 00:24:37,740 -Wes Bos: I like it. And they are 50 cents per million requests per month with a minimum charge of $5 a month. So 50 cents per million requests. Seems seems cheap. But like, again, requests not visits, because like somebody who visits your website might have 20 requests, you got yellow CSS files, you got six versus a jQuery 18 plugins. You got that every one of those is a request, right? Yeah. But and and also, they only have up to 50 milliseconds of CPU time. So if you're doing anything that takes more than 50 milliseconds, then it won't fit into a worker. And that's because the workers sit in front of your website from being loaded. I believe. So cool. I might be wrong on that. But I've used it a few times. I thought that was interesting to see how they they price there's - -58 -00:24:37,950 --> 00:25:00,510 -Scott Tolinski: Yeah, this has been very illuminating. And again, if you have a good calculator, good pricing calculator, share it with us on Twitter, I want to see some of these pricing calculators they're very fascinating to be those also kind of makes for fun little easy JavaScript projects to if you look at some of those pricing calculators and say, Oh, this would be some simple math in some form inputs might be something need to try to experiment with and make some like fun. - -59 -00:25:00,690 --> 00:25:27,300 -Wes Bos: Yeah, totally agree. I've been working on a mortgage calculator because a lot of the mortgage calculators out there are either they sell your soul to privacy people because and then you get ads for mortgages all the time, or they are not Canadian mortgages are a bit different than American mortgages. So the math is not exactly the same. So I've been trying to like make my own with like no trackers. And I love I like working on calculators. It's fun. - -60 -00:25:27,960 --> 00:25:32,580 -Scott Tolinski: So in Canadian math, do you use a for a variable rather than x? - -61 -00:25:33,810 --> 00:25:39,390 -Wes Bos: Yeah, it's pretty easy. Right. A big goal a and we report the mountain loonies. - -62 -00:25:39,510 --> 00:25:47,130 -Scott Tolinski: Yeah, okay. Yeah. So you could just have like a pond full of geese. And every time you slide it, more geese get added to the pond. - -63 -00:25:47,160 --> 00:25:51,840 -Wes Bos: Yeah, exactly. And there's no there's no wondering if you lose your house if you break your leg. - -64 -00:25:52,200 --> 00:25:53,340 -Unknown: Yeah, there's right. - -65 -00:25:54,450 --> 00:25:58,530 -Scott Tolinski: Yeah, that that come that's a little bit more on the bleak side of things. But yeah, - -66 -00:25:58,530 --> 00:26:13,170 -Wes Bos: we'll stick with the geese. Yeah, lots of geese in this this one. Yeah. All right. This I thought this was gonna be a 10 minute episode. I was like, oh, Scott. We'll just do a quick one explaining the differences a turned a little tasty. So let's wrap it up. - -67 -00:26:13,200 --> 00:26:31,680 -Scott Tolinski: Wrap it up. Well, thank you so much for watching and we will see you on Wednesday. Peace. Please. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax314.srt b/transcripts/Syntax314.srt deleted file mode 100644 index f59616948..000000000 --- a/transcripts/Syntax314.srt +++ /dev/null @@ -1,612 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:10,530 -development treats out there. strap yourself in and get ready to whiskey and Wes Bos. - -3 -00:00:10,559 --> 00:00:24,329 -Wes Bos: Welcome to syntax. I'm laughing because I can see the reflection of Scott's monitor in his microphone arm because it's like a glossy black. And he is currently looking at Instant Pot on Amazon. - -4 -00:00:26,010 --> 00:00:38,520 -Scott Tolinski: I'll let you know that we already have an instant pot. Okay, I popped over to Amazon to see if they had the era 20 in black and they don't. But these are their their cyber monday deals. - -5 -00:00:38,820 --> 00:02:08,660 -Wes Bos: Awesome. Well, we got a banger of a show for you. Today, we are going to do 2020 in review. So first, we're going to take everything that we predicted would be .TECH to watch in 2020. So we did a show at the beginning of the year. And some of them were bang on some of them we were big Miss. And then we're gonna go through just some other, like, what did we think 2020? What was hot? What had a big come up? What did we focus on as web developers in 2020? Today, we are sponsored by two awesome company. First one is a Log Rocket, which does your JavaScript session replay. And second one is fresh books, cloud accounting, we'll talk about them partway through the show. So welcome, Scott. It's the almost the New Year 2021 it's been a heck of a year, to say the least. It's funny looking back at these notes, because we had no idea what 2020 had in store for us. But we're gonna just go through all their predictions that we had, as well as some other tech that we thought was big in 2020. So you wanna you want to kick it off there? Yeah, we were so helpful, young and helpful. First one is CSS subgrid, which didn't show up, it's in browsers. And what's actually the Can I use status of subgrid? I use subgrid in my master Gatsby course. And then we we wrote a support query and CSS to fall back to not, uh, not the exact layout, but like, sort of equivalent with free space rows. But I was like, Oh, this sub grid is awesome. - -6 -00:02:08,690 --> 00:02:37,110 -Scott Tolinski: So sub grids only in Firefox right now, I was thinking it was in a canary as well, but it looks like it's only in Firefox. So it's a thing. Like I said, I haven't used it yet. And like you said, you have a fallback for it. So okay, it became a thing, it became somewhat usable. But I doubt most people are still really diving into subgrid to the degree that they could in the future, that considering it is going to really allow you for some really flexible, awesome layout stuff. - -7 -00:02:37,280 --> 00:02:49,050 -Wes Bos: That's the thing about only having two or three browsers now. Because once it does, once it does layout, we're in good shape. Yeah, so far, it will probably roll it out in like four or five years. And they'll have their own version of it. - -8 -00:02:49,139 --> 00:02:52,800 -Scott Tolinski: Yeah, they'll put it behind a OS update. The - -9 -00:02:55,620 --> 00:03:19,530 -Wes Bos: next one we had here, it was CSS Houdini, and I'm gonna say this one was a big mess. Because Scott and I were pretty bullish on CSS Houdini. And I thought by now we would have saw saw a lot more. And there's certainly stuff like we talked to Adam Argyle about it. And there's people working on it. But it just it's not at a point now where just like us, regular developers can start to implement it in our app. - -10 -00:03:19,650 --> 00:04:23,630 -Scott Tolinski: Yeah, Houdini is one of those ones that I am very excited about. And I was like, I have a Houdini course ready, not like in the course is not ready to go. But I've been building the outline for it for so long. That I'm just ready to get doing it. You did is it Houdini ready at comm is a great place to see the status of that. There are definitely a lot of aspects of Houdini that have shipped. But this is one of the ones I will still put on my list for 2021. Because I still think it's going to come very soon. And it's going to be very cool. Well, maybe not very soon, but it's going to come in it's going to be very cool. Next one is CSS features that are not supported in older browsers. Things like scroll, snap and position sticky. I think I've used position sticky, a lot more than I've used. I've never used scroll snap. Actually, I've used it in a demo, but I've never used it used it. I don't know there are some CSS features that that to me gained a little bit more traction in my heart this year. But I don't think scroll snap specifically was one of them sticky. Definitely one of them. - -11 -00:04:23,670 --> 00:05:11,880 -Wes Bos: Yeah, I think one thing we can say about 2020 is that in most cases, ie is officially dead. Yes. It's obviously still supported in some use cases. But I The more I talk to people, the more I hear is, yeah, we're not supporting it anymore at all. We're in a really good spot. Now with Microsoft Edge. Running Chrome. We don't have a whole lot of those issues. That's that's a whole nother aspect of it. But I'm pretty excited about it because there's a whole new swath of CSS that we can now use as well as when new features come out. We can just go ahead and start using them. Within six months or so we don't have to now wait years and years. And the thing that always kills me is anytime I have to tweet about any new feature we always get the yap on. Oh, - -12 -00:05:11,970 --> 00:05:12,570 -Unknown: yeah, yeah. - -13 -00:05:12,570 --> 00:05:17,730 -Wes Bos: And so that's those are those are like going away. They're still there. But that's going away. It'll - -14 -00:05:17,730 --> 00:06:23,220 -Scott Tolinski: always be there. It's a it's part of the industry. But again, it is, as long as that problem gets better than everything gets better for us. The next one was a big a big fail, big swing and a miss for us. This is me when I was playing t ball here, isn't I, I stepped up to the plate, and I swung and I would usually hit the tee ball stand instead of talking about NPM. Tink is something we have on our list, which is in an installer list. NPM something a little bit more similar to what you're starting to see with some of these tools. Like I think, what's the one that has all the the package listing? Is it Skype, I know, it's not snow pack that I'm thinking of it's sky pack, or the one where you can install directly from URLs. Either way, this this sort of thing is coming to be a little bit more prevalent here where we're, we're removing the idea of a node modules folder, where things might get installed on your system, rather than being installed in a directory for the individual application. But NPM Tink, as far as I know, I you know, I would love for somebody to come clarify for this. But I have not seen any movement on this at all. I don't think it's even a thing really know - -15 -00:06:23,220 --> 00:07:03,000 -Wes Bos: what people were really excited about NPM Tink is that there was going to be updates to NPM. I think people were a little bit frustrated with the the pace at which features were being rolled out and things like that. And that's why we got yarn. And then we're all excited about NPM Tink, but it's been huge for NPM. I feel like the NPM in general has really been listening to us, they opened up to new GitHub repos, where you can request features and get input for the community, everyone, they're super responsive. I put in my own two cents. I wanted to use JSON, five for package JSON. So we can get things like comments and trailing commas - -16 -00:07:03,420 --> 00:07:05,910 -Scott Tolinski: that we're doing gotcha. Oh, good. Yeah, - -17 -00:07:05,910 --> 00:07:36,180 -Wes Bos: they will never happen. They've said, because that's how you package JSON. But like, the reason behind it is because so many things, including node j. s, consume package JSON. And if you all sudden make a breaking change, like putting comments in a package JSON, than it would in JavaScript in general has no way to parse JSON five, it's an external module, right? So that that would first have to be built into at least into node if not the language, right. So that's unfortunate. - -18 -00:07:36,210 --> 00:07:41,520 -Scott Tolinski: I didn't know that JSON five was even a thing. So this is even Oh, kind of shocking. - -19 -00:07:42,030 --> 00:09:11,880 -Wes Bos: that for a second. Yeah. If you've ever edited your VS code, settings, that JSON file, you'll note that you can put comments, you can put trailing commas, there's a whole bunch of other little little things that you can do. And that's, that's a JSON file, and you have to have a custom parser for that, rather than the JSON dot parse, that's built into JavaScript, which is awesome. But it will never come to note, somebody after me proposed that we make a dot JSON file extension, and it checks for that first, which node already has that where they check for like.js file first, and then they'll check for a JSON file, and then they'll check for so like they possibly could, but I highly doubt it will ever come. But I think NPM has come come a long way. I am really excited to see what happens in the next year or so in terms of features and things like that. Oh, the other thing I was gonna say is that, I requested that you'd be able to run NPM dev instead of NPM, run Dev, or whatever it is, because you know, you can run you can run NPM start and NPM test. But then if you have another custom script, you have to run NPM run and the name of the script and like that's the smallest thing ever, but it trips up everybody. And I proposed that it will check if there's a script by that name. And if not, it will fall back to or first it will check if there's like a native command called that. And if not, it will look for a script of that name. And they said no as well. - -20 -00:09:12,409 --> 00:10:02,700 -Scott Tolinski: That's what yarn does. And I've always really liked that about yarn. It is a small thing. But here, here's the thing that I think is nice about it. It's a it's a venture, right? It's a convention that is like those kind of things are just choices that we have to make all the time in web development. Like, specifically in the JavaScript ecosystem, there's so many things to choose from that you get, you know, choice paralysis, because there's just so many choices. And at the end of the day, having the ability to name your scripts, whatever you want, do NPM run whatever instead of there being like a clear convention. Alright, test is always NPM run test or NPM test that you know, lint is always NPM lint like that would be so nice to have these standards that were just like a thing that maybe you could extend if you want it to but how Having the standard would be a really nice - -21 -00:10:02,779 --> 00:10:37,770 -Wes Bos: not even like a standard but just check if like if you run NPM bundle, and there's there's nothing built into NPM. That's called NPM bundle like there is MTM NPM publish, then it says, oh, maybe maybe there's a script like you could just check, right? And they said no. And I was like, well yarn does it. And then they said, yarn does a lot less than NPM. Which is true, because you can't publish to the you can't publish and all that with yarn web, but I wish it was, but they're listening. It's It was a cordial discussion. And there's a lot of other things on that feature request that they are going to be implementing. So that's great. Yeah. - -22 -00:10:37,770 --> 00:10:48,090 -Scott Tolinski: So at the end of the day, NPM evolved a lot. I started using NPM full time rather than using yarn, yarn hit version two that was this year, right? Or was that last year? - -23 -00:10:48,090 --> 00:10:56,850 -Wes Bos: I think it will we have the next point, just grab the next point on here, which is yarn, plug and play or Yarn Yarn to use switched off yarn. - -24 -00:10:56,880 --> 00:11:57,750 -Scott Tolinski: I switched off yarn when this happened because there were so much divisiveness around this in the yarn community users people were asking for fallbacks. There were large changes that you needed to make to your projects. project to make this work. I think initially, I think there was a lot of blowback about that initial release of yarn to I personally don't I remember understanding the blowback at the time, but I don't remember now for being entirely honest. And it was it was vile, I mean, NPM The only thing that NPM didn't have that yarn had besides the not needing to run put running there was the package updater built into yarn was nicer than ncu. Yes, I run into you, I it's fine. But the the yarn one, the little interface it gives you is nice error, which is it's, it's it's not enough for me to hold on to to yarn when NPM got a lot better overall. So yarn still exist, people still use it. Yarn version two, it wasn't the big splash that people were expecting. It didn't cause some sort of domination on yarns part there. - -25 -00:11:57,870 --> 00:13:27,240 -Wes Bos: Yeah, I what, from what I see is that most people using yarn are still using 1.0, which is is too bad, because like, like no shade on the developers, but I think it was just a bit too. There's lots of breaking changes. And it was really big in terms of how it rolled it out. And they just like broke everybody's things. So everybody just went back to yarn one or switch over to NPM. I did find one thing today that I need. And yet what that yarn has is resolutions. So if you have a package that somewhere down the dependency tree of that package, it's it's requiring a version which you need to change. So in my in my thing I was using, I think it was Keystone. And like four levels down, there was like Keystone needed an uploader plugin and that uploader plugin needed Apollo Apollo server or something like that. And it was breaking and like, I was like, I did the whole thing where like, you open a shoe on the thing. They're like, well, it's not. Right, the dependency. So you go to the Tennessee you're like, well, that's not us. That's that's a dependency. Yeah. Oh, and then you go down and down to down. So I found out you can, you can just write resolutions in your packet. Yes, yes. And it will, it'll force a specific version that you specify. And you can get it to work with NPM with a third party package, but it doesn't work unless you have a package lock file. If you do the whole thing where you delete your package lock file and your node modules because something's broken then you have to npm install and then you have to run the the resolution command it's a pain in the butt yarn does it way nicer. Yeah, totally. I - -26 -00:13:27,240 --> 00:13:54,120 -Scott Tolinski: agree. And I've used this resolutions before myself and I was like really struggling through some mono repo stuff on my own and I find all of that stuff to still not be solved perfectly yet in any regard. But yeah, the resolutions is a nice thing to have. Next up is pika and snow pack now pika is pika pack did that become snowpack pika pack is that that's my understanding of it is pika pack became snowpack. - -27 -00:13:54,270 --> 00:14:09,090 -Wes Bos: Yeah, though, there's Pika, Pika dot Dev, which has snow pack. That's the bundle tool. And then sky pack, which is their CDN that's similar to what's Michael Jackson's URL Loader for NPM. unpackage. - -28 -00:14:09,210 --> 00:14:11,159 -Scott Tolinski: Okay. I didn't know that was his interesting. - -29 -00:14:11,490 --> 00:14:24,899 -Wes Bos: Yeah. It used to be called NPM. CDN. That then they switched over. So yeah, that I think there's been huge and I think we'll talk about this a little but the whole ES modules thing. Oh, huge. Huge come up. - -30 -00:14:25,620 --> 00:14:26,340 -Scott Tolinski: It's very good. - -31 -00:14:26,370 --> 00:14:31,860 -Wes Bos: We were right on that one. That's good. Yeah. Do we have Fredrik on the podcast this year was that the - -32 -00:14:31,860 --> 00:14:35,070 -Unknown: previous year had to have been this year. I think it had been - -33 -00:14:35,250 --> 00:14:42,570 -Wes Bos: January 8 2020. So we It was very shortly after we predicted that or or said that that would have a big call. I would love to - -34 -00:14:42,570 --> 00:14:45,539 -Scott Tolinski: have him on again to talk more about like right now - -35 -00:14:45,630 --> 00:15:15,779 -Wes Bos: because he's like one of these like, visionaries in terms of like, yes, modules and what the future of JavaScript looks like. Speaking of the future of JavaScript Dino, we were pretty bullish on Dino last year saying like, this is gonna be a really cool thing. If Dino hit 1.0. So it's got like a stable API, we're seeing some good hosting for Dino. There's a lot of packages available to it. They're working away on on porting the entire node API over to Dino, which is great. We learned how to say it, too. - -36 -00:15:15,799 --> 00:15:16,799 -Scott Tolinski: That was a big deal. - -37 -00:15:19,559 --> 00:15:49,740 -Wes Bos: Yeah, it's awesome. I think this goes along with just like the fact that everybody is ES modules first. And maybe we'll talk about this now, node shipped as modules. Finally, after probably a four or five years of working on it, probably four years of working on it. So it's kind of cool, because between snowpack, Dino, node s modules, and all the other tools that we've been working with, we're slowly seeing common jazz being phased out. - -38 -00:15:49,860 --> 00:16:49,620 -Scott Tolinski: Thank you. And that's I'm very excited about that. I, you know, I've been babbling my server side code for a while now. So I have all my codes have been in the like, import syntax for a while. So it'll be nice to not have to like touch that when I move off of common j. s, entirely and stop transpiling or compiling my code. I actually really love Dino. Now, but it's so funny we, we go through these phases where we like don't know something, it just sort of sit back and wait. And maybe people are talking about it. And we we have to be a little bit reserved in some of our ideas about it. And like I started really playing with Dino a little little bit ago here. And I released a course on it this month. So like, I got pretty deep into Dino world. And it's, it's still very fresh, right? There are definitely some things that you'll hit. Or like, it's funny, because you'll hit a package. And we'll be like, Oh, this package is the most widely used ones are the dino ecosystem. And then it'll be like 52 stars on it on GitHub, you're like, oh, whoo, - -39 -00:16:49,860 --> 00:16:51,029 -Wes Bos: yeah, very early. - -40 -00:16:51,299 --> 00:17:42,450 -Scott Tolinski: But one thing I've really enjoyed about my time in Dino is just how code forward it is we talked to, we're gonna do a whole episode about it very soon, next year. But Wes and I have been talking just about, like how cool it is to be able to load like a Ts file from a URL at any given point that exists on the browser. And one thing that it's really done for me, is it's made me dive into the source of packages that I'm using a lot more than I do with JavaScript, because it's so easy to get to that source file. And I even just like command, click on an VS code, and it will link me to the dino dot land source file. And I can look at that file and say, Okay, this is like these the inputs, the outputs, whatever. But the fact that it's all tight, all of these things, man, I got a lot to say on this, because I've been like really reading sources so much since working on Dino stuff compared to what I do with node typically. - -41 -00:17:42,800 --> 00:18:25,740 -Wes Bos: Yeah, it's, it's funny because it's, it runs like TypeScript natively. So there's no compile step. And one of the really frustrating things to me is, like, when you run into an issue in a package, and you open up the source, you're looking sometimes most of the time you're looking at the compiled source, and not the author sources. And as more packages move over to being TypeScript, that's going to be very, I think that node needs I hate to be the guy that is like, this needs to be built into node because we all say, jQuery. Yeah, you should just build jQuery into the browser. But like they need some sort of like first party support for running TypeScript in node, I think, totally at least, but I don't know if that will ever happen, though. - -42 -00:18:26,090 --> 00:19:09,050 -Scott Tolinski: Yeah, especially after the way Dino is built, right the way Dino is built liquid that in the ground up, that's the framework of it, you know, is that it will just run TypeScript. Man, I'm turning into like one of those people who, who wants to abandon the compilers, because we're just we're getting the ability to use so many things that are close closer to the edge of the browser here, where whether it is modules in the browser, or ESP modules on the server, or just TypeScript running it straight up, like to me, after using snowpack, and Dino I'm so convinced that these, like compiler list modules are the the near future and I I've seen I've seen the future and I would like to stay there. - -43 -00:19:10,320 --> 00:19:20,300 -Wes Bos: It's so good when everything's a URL, and there's not a build step or anything in your way. So good. Yeah, maybe that's our prediction for 2021 is less - -44 -00:19:20,360 --> 00:20:23,040 -Scott Tolinski: compilers. Trust me once I once I get my dev environment on the snowpack. I'm just gonna be like, in the best mood all the time. Those 52nd mill, Reloads are the best thing in the entire world. Okay, next up is react we talked a lot about suspense becoming more of a thing and I feel like the the guy with the stopwatch still waiting for suspense here. suspense still does not have support the server side rendering context of things which makes it a huge no go for a lot of people. suspense, a exists. You know, it's actually funny. I use suspense a lot in the React 3d course. That's the only time I've used suspense is in the React 3d course. Because in react three fiber, it's I mean, it's all browser based anyway, so you don't have to worry about server side rendering. And the in the React 3d course that the rectory fiber team has built suspense into all of the loaders and everything. And it's really cool. I wish I could use it at any other capacity Other than that, but for the most part, we have not seen suspense really take hold any degree. - -45 -00:20:23,130 --> 00:20:27,960 -Wes Bos: Yeah. And when we talk about this, at least, I'm referring to the suspense for data loading. Yeah, there's two separate right - -46 -00:20:27,960 --> 00:20:29,280 -Scott Tolinski: on top of everything, - -47 -00:20:29,330 --> 00:20:56,880 -Wes Bos: we had like the the wrapper where you could set a timeout. And if there was, if it went longer than that timeout then show a loader otherwise not I think part of that was scrapped. And I think the whole like that whole suspense, her day loading there are, I don't know any firsthand thing, but the fact that they haven't released it means that they are taking another look at it. I mean, like, maybe this is not the right approach for us to go about this. So we were very wrong on that. - -48 -00:20:57,390 --> 00:22:58,770 -Scott Tolinski: Yeah, it just seemed like I mean, it was a big announcement and seemed really cool. You just thought it was gonna have some movement. But no, not not a ton of movement, at least not in front of the scenes here. And, you know, maybe you you wanted to use suspense in your server side rendering code you didn't know a support until you dropped it in there. And then it broke your site. Maybe you'd want to use one of our sponsors? Well, I'm just talking about what happens if your site breaks because you use some features that don't exist in the project. And well, you thought they existed or something, you maybe you're not using TypeScript, and it's not complaining at you either way, your site broken, you got to fix it. How do you fix it? Well, sometimes it's really hard to see exactly what happened when the site broke, maybe you're not running into the same specific scenario that other people are running. And in fact, here's a really good scenario. For instance, this morning, West tried to load up his affiliate page on level up tutorials, calm, but Wes has a very specific type of user account where he has access to like the pro content, and he has access to things that other people do not have access to. But he hasn't paid for a subscription, because he's my co host, because he's a deadbeat, right? And, uh, no. So because of that, he ran into a very specific bug, which was on our list. And you know, sometimes we might see this, this bug come in and say, ooh, I have no idea how this user is hitting this well, Log Rocket makes it really easy to see what exactly the user did. And in Wess case, it could just be his account in his data, but I get access to more than just the video replay of what he did, I would get access to the console, log, the Network tab, all of those things that you would need, when you're solving a bug in your local dev environment, I could see that the network request was returning some graph qL error saying that it was not defined, well, I can understand how this was happening with Log Rocket. So head on over to Log rocket.com forward slash syntax and you will get 14 days for free. So check out Log Rocket and see how the bugs are happening. Like it's magic. - -49 -00:22:59,010 --> 00:23:08,310 -Wes Bos: See the bugs like magic. Next one was Meteor you went often on of Meteor on your own course platform? What 16 times this year? - -50 -00:23:08,490 --> 00:24:22,830 -Scott Tolinski: What's the status media and media are what's a celebrity couple that breaks up and gets back together again, I don't know I although it's not messy in and I'm not broken up with Meteor I like PDR platform still on it? No Meteor was purchased by tiny they had just got new ownership at the very end of last year. So that was like a big thing for me to say oh, you know, perhaps this is going to revitalize the community has since it's not exactly like world beating numbers here or anything like that. But since this version 1.9 dropping in the new ownership, they are now up to version one point 12 and they have version two is in beta. So I've actually version two as all sorts of neat things but how module reloading and tree shaking stuff so there went from being absolutely no movement on the developer side of Meteor to lots of movement. The new owners have done a good job they even approved a mini conference for a meteor so like I said, I think it's it's good movement on their part and we will see if that continues to grow and move in 2021 my lights in my office just went from concentrate to energize and I got a little bit more of a orange glow on me now. - -51 -00:24:24,300 --> 00:24:30,450 -Wes Bos: Awesome. Next one we have here is felt I'll let you take this one as well but definitely can't stop here - -52 -00:24:30,450 --> 00:25:24,810 -Scott Tolinski: and about spelt spelt has really gotten to it's gotten a lot more shine this year. Definitely a lot more people working in spelt than there was in 2020 or 2019. So spell definitely definitely had a big year in terms of people using it. It is very good. I really, I think like two or three svelte courses this year. So I had a lot of time in spelt spelt and I really enjoyed my time working in it. They also just came out with the announcement that they're going to be moving there. You know, Their their site building experience that was called sapper before it's now just going to be spelt kit. And it's going to be with ESM. Using snowpack in home man. So I think this fall, it's gonna have a big year next year too, because in my mind, they're leading the way in the whole ESM side of side of things for front Enders. And once people get a load of some of that stuff, they're gonna not want to give it back - -53 -00:25:24,870 --> 00:25:30,570 -Wes Bos: we also had on this list is view three, I don't remember when view three came out, or what we said about it to you - -54 -00:25:30,570 --> 00:25:31,950 -Scott Tolinski: two or three months ago. - -55 -00:25:32,430 --> 00:25:42,300 -Wes Bos: Okay, so it came out, just I guess it took most of the year to come out. And what I'm hearing from people is that as awesome, I've not used it, what about you? - -56 -00:25:42,510 --> 00:26:06,690 -Scott Tolinski: I haven't used three. Now I've only used two. There is like a view hooks kind of deal that I like, I don't really I haven't I haven't been paying enough attention to view this year to really know what the changes in the ecosystem are. I think my view time got taken up by spelt this year not to throw any shade on view, because by all means, I think view is getting better and better. I don't know, I'm gonna wait, maybe we should dive in. And we should do a view three, Oh, - -57 -00:26:07,170 --> 00:26:58,380 -Wes Bos: do a show on that. All right, we only have here is Apollo. So a couple of months ago, Apollo three came out something I've been waiting for, personally for my advanced react course. And it's awesome. They have super fine grained control over the cache. So if you need to read things or evict things or find things in the cache, they got really slick API's around that. You can do custom logic over how things are read or merge. So you can just query items. And then you can control whether they hit the network for them or how they're merged or what order they go in. Lots of like, super that that stuff is so so complicated every time I get into Apollo mccoo. This is tough, like imagine actually building it. Like they did a lot of work and a lot of thinking in terms of how the API should be working. And also, there's this new Apollo Dev Tools coming out pretty soon as well, which I'm excited for. - -58 -00:26:58,440 --> 00:27:56,430 -Scott Tolinski: Yeah, there's been a lot of movement in the Apollo Apollo engine became something else. I think Apollo engine became Apollo studio. And it gained a lot of neat features. I really liked this new version two, it did make some things like the ever so slightly better, like the update, that was the the manual updating of the cache stuff is a lot nicer to me, especially on like, the ways you're at the context of optimistic UI, that's all got a little bit nicer for me, which I do, I would like it to be even nicer. But I get it. It's really nice. And to me, personally, I've been using Apollo with with both Apollo TypeScript plus graph qL code generator to generate all my hooks for Apollo. And oh, that is the promised land. I'll tell you, that is fantastic. I actually had a conference talk, and I'll link to it about Apollo graph qL tooling that I think would be really interesting, if you are interested in that sort of thing. So I'll make sure that's in the show notes. - -59 -00:27:56,790 --> 00:28:21,030 -Wes Bos: Next .js had a big year, not in terms of features, they did roll out next 10, which has the image which is huge for me, we talked about that in our next versus Gatsby one. They are focusing on internationalization, which is a huge pain point for a lot of people. But it just feels like it's gained some just serious momentum in terms of like, this is an awesome framework to build your app or website. I'm all over it. - -60 -00:28:21,180 --> 00:28:26,010 -Scott Tolinski: Yeah, totally. I just wish they would add that there aren't any I'm gonna I'm not gonna say that one more time. But - -61 -00:28:27,690 --> 00:28:44,550 -Wes Bos: I know but let's say it because the other day I was building something. What was it transcripts for the syntax satifying website. And I was like, Scott, I finally need nested routing, and I understand what you're talking about. I just want to render the whole same thing except for this minor little, minor little 17 - -62 -00:28:44,759 --> 00:29:04,170 -Scott Tolinski: components do especially when like, for instance, if you were to go on the level of tutorials, My Account page West and you were to change the page on that page navigation, we get that nice little animation. We're only that one little spot. Yeah, you can't get that in next .js just flat out get it do it without orchestrating at the top level. So Bingo. - -63 -00:29:04,170 --> 00:29:07,050 -Wes Bos: I don't know how they would do it. But I want it. - -64 -00:29:07,080 --> 00:29:11,250 -Scott Tolinski: Yeah. No, it's it's really easy for me to sit back and say, just - -65 -00:29:11,279 --> 00:29:21,330 -Wes Bos: do it. Just do it. Just push, just push a button. That's always the thing for people on Twitter. Just put edit, but like, the thing that's blocking them is they couldn't figure out how to put a button. Oh. - -66 -00:29:22,560 --> 00:29:23,460 -Unknown: Oh, that's it. - -67 -00:29:23,490 --> 00:29:29,880 -Wes Bos: Oh, oh, boy. Oh, like how would we let them do it? I button. Okay. - -68 -00:29:30,840 --> 00:29:58,560 -Scott Tolinski: Yeah, we're aware. And next step would be Gatsby, which really, you know, it I I use Gatsby less this year in 2020 than I used it in 2019. But only because there's more options. spelt kind of took the place of my guts being stuff but it's still very viable option. And they they released a ton of stuff, but none of which I've used. So I know you released a course on on Gatsby. So you you probably have a greater insight into this than I do right now. - -69 -00:29:58,800 --> 00:30:33,420 -Wes Bos: Yeah, I guess Gatsby's just been on fire with their different features coming out lately are working on making it images generate on demand instead of on build, which is can be very, very slow. They announced file system based routing. So like next .js. You can you can use a certain syntax and name your files a certain way and it will it'll create them for you, instead of having to you can still use the existing API, which is often great, or does it create pages API, integration with all the different CMS is has been been really, really good. So Gatsby is firing on all cylinders? I - -70 -00:30:33,420 --> 00:31:06,450 -Scott Tolinski: think 2021 is going to be like, even even since we recorded the next versus Gatsby, there's been like three or four things that have come out since since then. So I'm really excited to see both of these platforms develop over the next year, totally. Next step would be a serverless. stuff. Now serverless has gotten easier begin calm, we predicted would be a thing that more people would be having their eyes on. And we actually use begin.com to do our transcript checking as the serverless function. Right. So when I say we, I mean, you did it. I did not do it. - -71 -00:31:06,720 --> 00:32:12,270 -Wes Bos: Yeah, I needed. I like I got a little bit deeper into serverless. And I needed to run something every so often. Yeah, which is sort of like a cron job. And I also needed it to run for, like minutes at a time, because there's hundreds of episodes that we needed to check, especially when we're talking to GitHub in the script and pushing them to GitHub and all that stuff. And I found out that a lot of serverless providers don't have that right now. And Netlify just rolled out background functions, which is exactly what this is. And begin had both of those, which is why I went with began I was I was hoping to just host it with the existing website, but it wasn't possible. So big fan, I feel like serverless is is finally getting to a point now where it's super easy just to write a quick little thing I in my Gatsby course I call that a sip of back end and you just need a login like that. Yes, the back end, you have a little serverless function. And we predicted it's going to get easier. I think it's between all of the different platforms out there. I think it's gotten so much easier. What about you? - -72 -00:32:12,300 --> 00:32:33,240 -Scott Tolinski: I agree, I have not used it to the degree that I would like to yet. And so I think for me, 2021 will be a big serverless year for me, but I do I've been loving it because that was my biggest complaint about it before when it was just AWS, serverless functions and lambdas. You had to connect the lambda to the whosits to the websites. And next thing you know, he's like too - -73 -00:32:33,240 --> 00:32:34,080 -Unknown: hard. Yeah. - -74 -00:32:34,680 --> 00:32:38,250 -Yeah. And the dev into local dev environment. No, good. Yeah. - -75 -00:32:38,910 --> 00:33:06,150 -Wes Bos: I I'll say that. The deploying, like I talked a lot about what was it? No jitsu, back in the day, we had this thing called New jitsu, you could whip up a quick note app and hosted under jitsu really, really easily. And I love that because it was so easy. Just to throw up a quick It was almost like making an index dot php and throwing it on a server and you can hit that your I used to love that when I did PHP. And then everything got so much more complicated. Like you have to do SSL certificates - -76 -00:33:06,150 --> 00:33:08,670 -Unknown: and ci and CD, - -77 -00:33:08,910 --> 00:33:28,740 -Wes Bos: pm to and rerun it. And I was like, Oh, and I feel like now with serverless functions. We're getting back to just write some code in a file, deploy it, and you can hit that URL that code will run. And that's the best imagine when JavaScript modules are everywhere. You can just throw up a little JavaScript file and have it be read. No problem. - -78 -00:33:28,740 --> 00:33:50,850 -Scott Tolinski: I like it. All right. Next one was the headless CMS Thunderdome that we had going on, between all of the different options. I think Sanity really has continued to grow and the headless CMS base especially as a paid service, a WordPress just sort of is doing its thing. Still nothing like really shocking from WordPress out of this year or any of the other CMS has to be on WP - -79 -00:33:50,850 --> 00:33:54,090 -Wes Bos: graph. qL as is not WordPress specifically. But yeah, - -80 -00:33:54,090 --> 00:33:55,680 -Scott Tolinski: WP graph QL. Yeah, - -81 -00:33:55,890 --> 00:34:01,110 -Wes Bos: they release 1.0, which is Great Gatsby is actually funding that, which is pretty cool. - -82 -00:34:01,140 --> 00:34:09,600 -Scott Tolinski: Yeah. And that's a shining spot. But it's other than that. There's not a lot of movement necessarily, at least not that it's been on our radar. - -83 -00:34:09,860 --> 00:35:03,600 -Wes Bos: We also there's a couple other headless CMS is that a bit big come up. Keystone is the one I've been super bullish on this year, Keystone is releasing notti. As I'm talking about, it's probably out now I've been working with the folks at Keystone, just to make sure that it works with with my app. And it's built on next jass, which is really cool. So the back end, if you want to make any customizations to the actual admin UI, you can just do that because it's just next to us at the end of the day. It's just big, big fan of it. strappy is another one. I spent some time this year building an app in strappy. I really like it, it's super impressive. The UI that you have up and running, you can just log in, create your types relate things to another one another and you can do so much via the UI. There's just a lot of polish on that one. So those are two really big ones? What else do we have Redwood was a big one - -84 -00:35:03,810 --> 00:35:08,820 -Scott Tolinski: still in development, Blitz still in development. But I don't know if we mentioned those in our - -85 -00:35:09,060 --> 00:35:46,230 -Wes Bos: i don't think so they I think they came on our radar this year. So. But all these years of like yearning for a headless CMS that has really good user management and really good inputs. I'm gonna say we're finally there. There's lots of really good options to build your your website. I think the only thing that we're still missing yet is and I don't even know how to solve this is the the plugin ecosystem that that WordPress gives you. I know. Yeah. I don't know if that exists in any other ecosystem. Yet, which not a lot of not everybody needs that. But certainly a lot of people sticking around on WordPress because of it. - -86 -00:35:46,260 --> 00:37:16,770 -Scott Tolinski: Yeah, totally. You know, next up we had was Cypress and this is fun. We had a currently no Firefox support, hopeful for 2020. And guess what we got Firefox support, as well as edge support. And I use that every day. So I still use them like Cypress quite a bit. And one thing that we did is there, the Cypress community is definitely involved. There's, you know, in the React testing library space, there's now a did they are now like Dom testing library. But there's also a Cypress version of it too. So you couldn't use the same syntax that you're used to in the React testing library in Cypress. Oh, cool. Yeah. And not only that, but there's like a whole bunch of plugins, I've gotten really deeper into Cypress myself because like, we use Cypress quite a bit. So having to write my own custom Cypress commands, so that I could do like c y dot login, and have it login with an account on our database and stuff like that has been really nice. I really liked using it. What are some plugins I use, because I use a couple of plugins, which I didn't even know was a thing. But I use a dark mode plugin for Cypress just to turn it to be dark mode. And people are always have their minds blown by the fact that there's a dark mode. What else do I use, I use promise register Cypress promise register, where you can do like a Cypress promise to better control the flow. And then the testing library Cypress add commands. So I use those three plugins. And it makes my Cypress there's a whole community of Cypress plugins out there. And if you look on Cypress a site, to me that was like a huge thing beyond the Firefox support was having all those neat, neat plugins to play with - -87 -00:37:16,860 --> 00:37:30,600 -Wes Bos: the next one we have here. And this is actually not a space that I dipped into is the whole design and code mixing. Oh, yeah, space. But we had modules here. What what's the status of that? Have you used that? Great - -88 -00:37:30,600 --> 00:39:39,570 -Scott Tolinski: question. I have not used it. And I was hoping to get access to it in September of last year. And if you have their site modules that app, it still says apply for beta access. So I have not I have not gotten access to it. As far as I know, it's a thing still, I follow the developer on Twitter, and he seems to be tweeting about it. But I don't know when when this thing's coming if it's coming, but it exists still. figma holy cow figma had a great year 2020. Because figma is one of those products where like, like sketch came out. And people started asking for features and they were just like, no, like, not gonna give you those features. And guess what, we're not going to give you support for anything other than Mac. And meanwhile, figma just like crams features in constantly. So I don't know if you've been paying attention, anything they've done. But one of the even the biggest things that they added was auto layout tools, where it's basically flex containers, to say like you have a button. Well, now this buttons design is basically determined by the padding. So you could set padding on a button with text and have it auto expand and do all that stuff without having to do any weird constraint or layout tools. So there's been like a ton of like, the types of features that web developers really like to see have been have just been dropping left and right, I'm trying to find there's like a new feature that they recently did. Let's see, auto layout has become more flexible. So now you can do like flex containers with their auto layout, all this pretty cool. So the options are our hug content filled container, like pretty neat. There's also button variants is now a thing now so you can have variants on your components. Instead of making like 800 different components you make like one component, and then you can like have your button and then you can have a disabled variant and a hovered variant and whatever and it just exists as a drop down on that thing. It's like these are the tools that developers would really love to have when they're working on a design application because that's how development works. So figma to me constantly innovating with a lot of the stuff they're adding. So check it out. - -89 -00:39:39,710 --> 00:40:24,600 -Wes Bos: I'm so excited to use this I said previously on the show my next thing that I design like next website design will be in figma and then I fired it up and I was at my at the cottage in the fullstack shack at the time and figma like needs good internet to work. There is like a you can save locally but it it doesn't like it makes you save a new copy. Every single time you want to hit the Save button, so like, that's not a workflow for doing any sort of design. So I was kind of bummed. So I went back to sketch and did my website. So the next thing I design, hopefully will be in in figma. And it's just it's really exciting. Another thing I wanted to say is, did you see on Twitter the other day, there was like a 3d app that is going to be loaded pretty soon. - -90 -00:40:24,780 --> 00:40:31,530 -Scott Tolinski: Like, did I forget? Oh, yeah, I retweeted that thing. I opened that and I was like, mouth that game? It is very cool. - -91 -00:40:31,920 --> 00:40:39,110 -Wes Bos: Like, what what? What is it? What is it? Like? It's a it's a 3d app. What is it for? What's it called? - -92 -00:40:39,860 --> 00:40:55,770 -Scott Tolinski: It's funny, my Landon, spline spline Landon always like when whenever he learns about something new. He asks What to do? What does it do what it is, I'll be like, Dad, is that what is this? I'll be like, Oh, it's a bit like, Oh, it's a microphone. What to do? - -93 -00:40:57,060 --> 00:41:13,380 -Wes Bos: What to do? Oh, so it's a 3d design tool for the web. And it looks like a whole it looks kind of like figma. And you can design 3d stuff. And then like, what's what's the point? you export it? So you can use it on the web? Or or what? - -94 -00:41:13,400 --> 00:41:17,150 -Scott Tolinski: That's what I would imagine to be the case? There's not a ton of information about it, but - -95 -00:41:17,150 --> 00:41:24,330 -Wes Bos: comes out tomorrow. Yeah, it's not even out yet. It's it comes out December 1. So you're listening to this. It's already out. Let's check it out. spline dot design. - -96 -00:41:24,630 --> 00:41:42,420 -Scott Tolinski: Yeah, says export production ready web assets. So you could probably like drop in, like when I did my react 3d course, it was definitely missing from that world was like having to do everything in code can be really awesome. But sometimes you really wanted a GUI to click and drag and move and whatever. - -97 -00:41:42,920 --> 00:42:51,980 -Wes Bos: That's funny, like, probably seven or eight years ago, I built a an ad for like, some car company and the car would drive in and break and it would dip down a little because the brakes hey, yeah. And then it would blow a little smoke when it turned off. And we had designers do it in some sort of app. And then we exported that to HTML and CSS, I think. And it was not very good. So and that was like seven or eight years ago. So I'm excited to see what maybe that that's more motion graphics. So this is 3d. So that was the list of the .TECH that we thought was going to be hot. We are on and some of them are way off and the others. Let's move into some other things that we just just as a look back into 2020. The biggest one to me is that ES modules had a big come up. We talked about that. Yeah. Yes, modules can be used in the browser. They can be as a node. Dino has it? We're getting build tools that are ES modules first, which is snowpack, things like that. Webpack has had it for a long time. Yes. modules for beginning. I still have not shipped any code. That is yes. modules in the browser. Hmm. It's still all compiled. But yeah. Only once a year for that. - -98 -00:42:52,080 --> 00:43:40,940 -Scott Tolinski: Yeah, I guess maybe it could be it really just think of who has to ship it and who hasn't shipped it? I guess I don't know. Where it's fully supported just yet. That's got to be a whole episode now. Yeah, the bundler world really took a big, I don't know, a big jump, I think I think people are really starting to see, especially with the ESM stuff, like the bundles that we have coming in snow pack and beat fight. When I say this correct. One of these days is gonna be pretty cool. I think that whole world has a lot to offer, I think roll up became much more greatly used in being able to ship all sorts of things like ESM. I don't know if anybody's used the TSD x library for creating libraries in react and TypeScript. But that's built with roll up and it ships iesa ESM. And, yeah, all of that good stuff that we're talking about in this episode. So - -99 -00:43:41,040 --> 00:44:22,410 -Wes Bos: yeah, we have a whole episode on bundlers and tooling, you can go back to that. And we'll go through all the other ones. But it's been a big year for all of the different tools and bundlers that we have graph QL. I feel like graph qL got way easier in terms of tooling and things like that. Just rerecording my advanced react course from a year and a half, two years ago, versus now having to manually write the types and type everything out and then type it for your server and then type it for your API gateway, and then type it again, when you're consuming it that as sort of a thing of the past. And I feel like it's just gotten way easier for people to go ahead and use it. - -100 -00:44:22,830 --> 00:45:19,830 -Scott Tolinski: Yeah. And types. We talked a lot about, you know, waiting to see what the next type library movement would be like, Who's gonna take the crown, and it seems pretty obvious to me that TypeScript has taken the crown over flow and reason, even though if those are both still widely used, I think more people are using TypeScript. To me, it's, there's a lot more tools around it. A lot more of the community juice, regardless of if you like flow or not. TypeScript really seems to have the juice. And and this was my first year writing a lot of TypeScript. I mean, we moved our entire code platform server and client over to the TypeScript along with fully typed in our API. Everything I got deep into rust, which is my first fully typed language that's like typed by default, like strong type language that for me, like really blew open, like the idea of using types in my codebase overall. So TypeScript for me got so much more of a real world experience for me. - -101 -00:45:19,860 --> 00:45:40,650 -Wes Bos: Yeah, me, too. It's probably been about six, seven months, every single new thing that I build is been in TypeScript. I've been been working on a TypeScript course here and there, I've got a really wicked layout lots and lots of demos. And I just, I'm there, I'm there. Like, I don't know if I was late to the game. But I get it. I - -102 -00:45:40,650 --> 00:45:42,450 -Unknown: totally get it. We're both on time. - -103 -00:45:42,480 --> 00:46:26,400 -Wes Bos: Yeah, we're on time. I think like, it's at that point now, where it seems to be the winner until maybe JavaScript gets its own types, which would be kind of cool. Seems to be everybody's shipping it, there's types of L for everything you npm install automatically has types. And even even like VS code, if you just write regular JavaScript, in VS code, you still get a lot of the benefits of TypeScript, which is, which is so awesome. So I am officially a huge fan of TypeScript, we'll probably do an entire show or two on what the benefits are, and the tooling around it and whatnot. But, and also, I feel like not just like me, and you maybe it's just me, and you, but I feel like everybody else is sort of jumping on the TypeScript train as well. So - -104 -00:46:26,430 --> 00:46:48,780 -Scott Tolinski: yeah, to, to to. Yeah, I like it a lot. I think it's great. I think it's fantastic. Also, wisdom became a viable. Like, in the past, at least for me, I looked at the sort of wisdom world and was just sort of like, Oh, it's a thing, right? It exists. But like, for me, I now understand how people are using wisdom and real world production ways. - -105 -00:46:48,960 --> 00:46:51,180 -Wes Bos: What is awesome. For those who don't know, - -106 -00:46:51,270 --> 00:48:21,090 -Scott Tolinski: wesam is basically being able to use assembly code in the web. And if that doesn't mean a whole lot to you think about like being able to write a language, a language that's maybe not JavaScript, maybe it is, but maybe it's not JavaScript, maybe it's like rust. And that language can do some things that are very, very fast, very, very performant, much more performant than a JavaScript or node app could do specific tasks, right? Well, what you'd be able to do is compile that code that rust code into assembly code in which the browser could then load up as a module and use directly into your JavaScript code. A good example of this would be an app that Wes and I use for frequently is the MongoDB compass app in the compass app. While it's not built in wisdom itself, there are specific functionalities such as their performance tracking stuff that is actually written in rust, and then exported, so that when when the what they do is that they call a function that appears to be a JavaScript function by all intents and purposes, but that function is written in rust. So when you import it and use it, like the the consumer of that might not need to know too much about it, just the ins and outs in that function goes off and does all that stuff. And it's much faster because it's assembly, and then it pops the answer back out. So that's a good example of some some real world usage of wisdom in the wild, because compass is an electron app. And it's browser based, but it is using wisdom to do a bunch of computation, heavy stuff. I don't - -107 -00:48:21,090 --> 00:49:15,030 -Wes Bos: think that I knew that. I knew that it was like, like, Oh, you can run games in the browser, and it runs the assembly code under the hood. But I'm just looking at this GitHub repo called awesome web assembly languages. There's a list of probably 30 or 40 different languages that you can run in, including PHP. Yes. So you get assembly like yeah, even like you have some some weird dependency that's written in a different language other than JavaScript, or it says it really nicely here it says webassembly, or wisdom for short, is a low level bytecode, that format that runs in the browser, just like JavaScript, that is designed to be faster to parse than JavaScript, as well as faster to execute, which makes it a suitable suitable compilation target for new and existing languages. Yeah, so you gotta like, you gotta write it in like there's like a PHP, p IB. wasum. interpreter. - -108 -00:49:15,480 --> 00:49:27,570 -Scott Tolinski: So I know you because both of us, we do a lot of video stuff. You've used some of the video compilation, I guess, rendering applications. Like what's the FFmpeg - -109 -00:49:27,690 --> 00:49:34,020 -Wes Bos: FFmpeg is is what most video stuff uses under the hood. So you could run that in the browser. - -110 -00:49:34,110 --> 00:49:42,720 -Scott Tolinski: Check it out. FFmpeg dot rasm I'll send a link I'll put it in the show notes here. Yeah, no way. You can run it in the browser. Yep. - -111 -00:49:42,750 --> 00:49:43,350 -Wes Bos: No way. - -112 -00:49:43,350 --> 00:49:54,300 -Scott Tolinski: Why did it this way? Yes way. You can upload a video converted with I'm actually in the process of doing a fun little project with this. FFmpeg - -113 -00:49:54,300 --> 00:49:59,400 -Wes Bos: so is that what figma uses under the hood for some stuff figma is - -114 -00:50:00,000 --> 00:50:03,540 -Scott Tolinski: figma is built in something interesting, possibly rust - -115 -00:50:03,900 --> 00:50:23,550 -Wes Bos: figma is powered by web assembly, c++, c web assembly is cut figmas, low time by three x. So there are many benefits to using c++ code. Ah, so that's kind of interesting because like, you think like, Oh, I don't want to use fingers, because it's just web tech, and that eventually is going to get super slow and sluggish. But it's not. - -116 -00:50:23,790 --> 00:50:59,130 -Scott Tolinski: It's not it's in use on the web. Yeah. So, you know, it's funny, because we, we talked a lot about wisdom, you know, like, hold your horses, we'll just see what that you know, wisdom isn't necessarily something we need to worry about whatever. And by all intents and purposes, it might not be something that you you might not ever need to write a cc code to use the browser. But the fact that you could have FFmpeg import it like a JavaScript module, then yeah, you know, use a function directly out of it and have it just work in the browser is very cool. Like, that's the kind of thing that you'll probably want to be aware of. - -117 -00:50:59,370 --> 00:51:10,590 -Wes Bos: All right, Scott, you need to use your figma connections to get the dev from figma on it to talk about this was awesome. That'd be so cool. You have your people call their people. - -118 -00:51:10,650 --> 00:51:13,410 -Scott Tolinski: Yeah, I'll do that. Well, - -119 -00:51:13,410 --> 00:51:14,100 -Unknown: I'll have I'll have - -120 -00:51:14,100 --> 00:51:21,510 -Scott Tolinski: my people call, called their people and then set up some invoicing and then we can track that invoice to make sure it gets paid on time. How about that - -121 -00:51:21,660 --> 00:52:15,180 -Wes Bos: with fresh books, fresh books is our sponsor today freshbooks.com forward slash syntax. They are cloud accounting for your freelance or small business or whatever if you're sending out an invoice, don't open Excel and make a thing that's impossible to track. Do it all through Freshbooks you can send it out you can check on what's paid, you can send late payment reminders, you can track all of your expenses, you can auto import your expenses from a credit card or a bank account is awesome. So check it out freshbooks. com forward slash syntax Make sure you use index in the How did you hear about a section and thank you so much to syntax no to Freshbooks for sponsoring and thank you so much to syntax syntax well listeners for using Freshbooks because they just re opt for sponsorship for next year as because it is working and you the listener are using Freshbooks which is awesome - -122 -00:52:15,480 --> 00:52:49,890 -Scott Tolinski: I think we could say thank you to the syntax listeners for giving all of our sponsors to try because really our sponsors have really enjoyed you know getting to share the the magic of their their services and whatever but I think for the most part you all are you trust us to share what we think is really cool with these companies and I think it reflects really nicely that upon all of you that you you trust us to that degree because we use all of these services and we love them so just happy that you guys can see that magic cracks at Pepsi - -123 -00:52:52,920 --> 00:53:41,220 -Wes Bos: another big thing unsuspecting was work from home gosh obviously exploded in 2020 because of the new vo Coronavirus we all started there Now not all of us but a lot of us I would say most of us are now working from home and remote work is kind of like this like weird thing where people some companies are into remote work and some weren't and they weren't doing it right and it really was just learning by fire or you really had to figure out how to make this work by working remotely. That is awesome. is somewhat related starlink internet we talked about my cottage internet situation starlink internet is now coming which is great for remote workers in remote locations. Yes is great what else webcams everybody's got? - -124 -00:53:42,420 --> 00:53:54,570 -Scott Tolinski: Yeah, I got a wiki webcam because everybody finally realized that the Mac webcams have not been updated since 1908 they're just like the oldest part of the Mac I don't know where they even find this supply. - -125 -00:53:54,630 --> 00:54:00,030 -Wes Bos: When you turn it on. There's a big poof you know, in the old timey photos there's a cloud of smoke - -126 -00:54:01,890 --> 00:55:43,680 -Scott Tolinski: or dust you can't move anywhere or else it'll ruin the exposure time. Yeah, no I know the mat webcams like I don't know like where they even find the supply of these webcams. They are so old they must have just ordered too many of them initially and been like well I got a deal it's got to use them until they're gone. No I have no idea everybody got a nice web cam or cam link to make a webcam nicer and I don't mean everybody everybody but everybody spent so much time on zoom and whatever video calls now we all realize just how how bad it can be with these these crappy webcams. Overall, a lot of this stuff around is your company ready to do like remote working. Our industry probably sees this in a much different way than many other industries because we're inherently a little bit easier to work remotely if you're a computer programmer. Granted it has removed some of the personal aspects of getting to know your your your co worker on the desk and say hey, can you take a look at this? Am I doing this in a really dumb way? They can't just pop over Look at your screen and say, yeah, this is stupid. It's really changed the way that a lot of companies are working and open up the possibilities for a whole ton of different SaaS companies to come in, swoop in and collect some money by giving you a service that is going to make your team work a little better remotely. I know we've had to use discord pretty heavily. We do all of our team meetings in discord now. So we just pop on over to a video chat room and chat away and whatever. And it's actually pretty nice. You can have a little breakout room and say, Hey, can you come take a look at this for a second, and it's almost like actually being at this person's desk. So yeah, these tools have all gotten a little bit better changed quite a bit, not something any of us necessarily expected, but probably a change that was gonna happen at some point. Anyways, - -127 -00:55:43,890 --> 00:57:05,100 -Wes Bos: another this is not new at all. But pair programming remotely has be has seen a big up, because like, you need to debug things with coworkers. And I use for the first time on like a really big app, I use vs codes, live share. Yeah, we're cool with it with Jed from Keystone. And I was so impressed at it that you can see where they are, they're moving around, and you can highlight things. And I do we just had like the video of somehow I wonder if they're gonna add like WebRTC eventually, so you can have video in it as well. So it was good. The only thing it didn't have is that like, it doesn't show when someone's hovering and looking at like type definitions or something like that. It doesn't show that. So there's there's a bit of like missing context there. I wonder if that will come at some point. But another one is Tuple. I've not tried this before, so they sent me a DM about it a while ago to try it. I just never did. But it's apparently a really good pair programming the farahan from Shopify is on the homepage. And I saw a talk from him like 10 years ago, when he was at extreme labs about pair programming and how they only do pair programming. So if he is endorsing it, like he's probably one of the top pair programming enthusiasts in the world. So if he isn't, if he's endorsing it, it's probably pretty good. Yeah, - -128 -00:57:05,100 --> 00:57:50,910 -Scott Tolinski: I have a hard time with it because of my general hyper activity level. But like, I do really always appreciate having multiple eyes on code. Some of that next ones here would be an actual, like coded library, React query, got a lot of juice, a lot of people using react query and 2020. And I think that's probably going to continue because, in my mind, what react query did was make working with HTTP a large part as nice as working with graph QL. Granted, it's not as nice as like the types up and down the stack that you get with graph QL. But the fact that you use react query the same way that you use use Apollo use, use use query and Apollo and having the cache just exist like that. Yeah, that react query is basically the way to do HTTP requests and storing of cached data for me now, - -129 -00:57:51,120 --> 00:58:53,970 -Wes Bos: Alpine j. s. It's not something I've used yet, but I especially it seems to have gotten really good traction in the Laravel. php community. And what it is, is I like to think of it as like JavaScript sprinkles, you know, early on in the angular days where you would just write like, Angie, repeat, and you would just like, yeah, it's all declarative. You write your HTML certain way. And then it just is JavaScript. That's what Alpine j. s is. And I think there is, as much as we talk about building these crazy neck jazz 100% react server rendered TypeScript. There's a large portion of us, but I even think our listenership who are working on 10 year old server rendered applications and parts of them are built in JavaScript and whatnot. But if you often if you just need add a little bit of interactivity to something, it doesn't make sense to change that entire view over to a single page react app. So Alpine j. s, is that. And I think that that really filled a need that a lot of people wanted, - -130 -00:58:54,180 --> 00:59:37,620 -Scott Tolinski: you know what that I mean, I wonder like if web components are going to continue to fill more of that need to, I've been seeing a lot of people talk more and more about web components towards the end of the year. And I don't know if you've checked out stencil at all, but it's not still seems pretty cool. It's like a multiple output target Web Component framework where you can like have react, working, play by play with view and web components. That all works very nicely together. I haven't used stencil myself, but it seems like something that could becoming more of a more of a tool. Speaking of more of a tool 2020 is a giant tool. The year itself as a tool. Remember when that was like a big insult? Yeah, 2020 man, it's rough. Yeah, let's just get out of here. Let's just, - -131 -00:59:37,620 --> 01:00:33,330 -Wes Bos: let's just stop it. Yeah, it was a hard year for productivity. Just like everything changed. Just mental, trying to focus on your work when there's a lot going on in the world. So it was only half of your work time. Yes. Just in terms of like sheer being able to work. I know that you hadn't had that. So yeah, it was a rough year, I don't know if we need necessarily need to go into all the ups and downs. But it was it was a tough year and want to say thank you to everybody who listened in all year long. I'm super impressed that despite all that happened, we never missed the entire episode. We did know over 100 episodes of syntax this year, people kept on listening. I thought we were gonna see a major drop when everyone stopped commuting, and that didn't happen. People are still sending in their Pollak questions and just it's been good to have this podcast to this year. - -132 -01:00:33,510 --> 01:01:00,570 -Scott Tolinski: We're endlessly thankful for you for listening and keeping the podcast as you know, as popular as it is, but it's also like, hey, Wes, it's been awesome. Having a whole year of doing episodes with you. I we we got we got to chat web about so many cool things. We had a lot of cool people on the show. And yeah, you know what? I'm optimistic for 2021 at 2020 can go can go. I don't know what they say. I'm trying to say something appropriate, but it's not coming to me right now. It - -133 -01:01:00,570 --> 01:01:03,540 -Wes Bos: can kick rocks is what you're trying to say there's rocks. - -134 -01:01:03,570 --> 01:01:07,380 -Scott Tolinski: Hey, one time I told the guy in a bar to kick rocks and it might have been the coolest I've ever been. - -135 -01:01:08,310 --> 01:01:21,810 -Wes Bos: Man. I love that kind of stuff. Like I call people goofballs all the time. And you know, I love those kinds of like, like you're you're being mean, but you're being mean super PG. Yeah. - -136 -01:01:22,080 --> 01:01:25,950 -Scott Tolinski: Let's say somebody has a full diaper. Totally full diaper, - -137 -01:01:27,510 --> 01:01:43,860 -Wes Bos: man. All right. Well, thank you so much for tuning in. Hopefully you have an enjoyable New Year's Eve not going anywhere staying home, which is what I do every year, regardless. being safe. Thank you so much for tuning in. And we will catch you next year. - -138 -01:01:44,220 --> 01:01:45,960 -Scott Tolinski: Except for we didn't do sick pics. - -139 -01:01:46,140 --> 01:01:51,450 -Wes Bos: Oh, okay, sorry. I tried to wrap that up way too early. You got a sick pick for me today Scott - -140 -01:01:51,480 --> 01:02:03,900 -Scott Tolinski: sick pay. Do I have a sick pick for you? I think I do. I i've been like, I have a lot of sick picks lately where I feel like I've just like discovered a lot of cool things. Whether it - -141 -01:02:03,900 --> 01:02:04,560 -Unknown: be you got another podcast - -142 -01:02:04,560 --> 01:03:25,260 -Scott Tolinski: for us, I might have a podcast. I've been listening to a lot of cool podcasts lately. But now I'm actually going to pick a light bulb today. Because you may know in our smart home episode, we talked a little bit about the fact that I was on the Philips Hue platform. And the Philips Hue is fine. There's a lot of great things the app is like slickest experience, like Philips Hue man has really nailed a lot of aspects of it. But the bulbs are very expensive. And when you get into like flooded bulb territory, it's like 40 bucks a pop and when I have six flood bulbs in my kitchen, there is no way that I'm spending that kind of money on flood bulbs just to make them smart. Well I found a works with hue bulb. And I didn't realize this was even a thing but this brand I n n are pronounced enter. They work with Philips Hue and I bought their floodlights, they have bulbs, they have spotlights, they have strips and everything's quite a bit cheaper maybe like half the price. So I'm gonna pick some inner bulbs here so that you if you're looking for a little bit cheaper of a situation with your Philips you can use these that I buy I've connected now. Eight of them and that perfect they work just lovely. My my wife refers to our kitchen as a cave now because I turn the lights down low when I'm doing dishes at night. - -143 -01:03:26,310 --> 01:03:30,120 -Wes Bos: My wife loves having the lights as dim as possible. And they do. - -144 -01:03:31,860 --> 01:03:37,350 -Yes, I'm into my eyes. I want it to be like a operating room. Hey, I hate sitting in the dark - -145 -01:03:37,620 --> 01:03:45,750 -Scott Tolinski: corner you come up and just be like, what is this cave? Like? What do you get my eyes ready for sleepy time? - -146 -01:03:45,960 --> 01:03:51,570 -Wes Bos: I got a sick pick something that I've been thinking about getting for a long, long time. And that is a weighted blanket. - -147 -01:03:51,630 --> 01:03:52,230 -Scott Tolinski: Oh yeah. - -148 -01:03:52,230 --> 01:04:27,420 -Wes Bos: One for my daughter six months ago, just because she was having some trouble sleeping. And every time I like put it on me. And also every time I go to the dentist and they Oh yeah, like lead. I feel this just like overwhelming sense of calm. And I'm just like maybe, like, why is it that I just feel so good. So we ended up getting a like the heaviest one you can buy 25 pound weighted blanket for our bed. Like I was telling my wife I just want the weighted blanket to outweigh the weight of the world. I wanted to - -149 -01:04:27,420 --> 01:04:30,210 -Scott Tolinski: physically turn my bones to powder. That's what - -150 -01:04:30,210 --> 01:05:02,730 -Wes Bos: I would prefer. Oh, and I'm like I'm like this is the heaviest one this is gonna be too much. No way. No way I could probably put three of them on me and be fine. And it is so nice. We've had it for a couple days now. And every night I go to bed and I put it on Mango Ah, and I'm a couple days in and I've slept really good all of those nights. And I don't know if that's correlation or causation just yet but it feels awesome. And I can't believe I waited so long because like investing in your sleep setup. There's I don't think there's any any other way to do it. - -151 -01:05:02,850 --> 01:06:12,720 -Scott Tolinski: Yeah, I have this Pendleton one. That is from Costco and I have the 20 pounder. Courtney got it for me last year for Christmas and a whole man. I love it. Yes, I agree, man, that thing you put that thing on? And it is it's that same lead vest experience. And I totally dig it. Oh, it's I can't believe I waited so long. So big fan of that. Yeah, shameless plugs. I have courses out every single month on level up tutorials. We're recording this far enough advanced that I don't even know what my next course will be. But I'll tell you what my November course was Dino 101. For web developers, where we tackle the task of understanding what Dino is we write a lot of TypeScript code we we get down with some neat stuff like you know, we build a contract generator reading and writing files. But we also get deep into writing a HTTP server with OIC where we serve not only a JSON API, but we also serve up static files as well. We talk all about error handling middleware, and you learn all about how it would look to write a real world application and Dino so check it out at level up tutorials.com. - -152 -01:06:13,080 --> 01:06:33,750 -Wes Bos: I'll plug all of my courses, go to West boss comm forward slash courses. And the list of all of my courses that you have on there, JavaScript, CSS, you name it. Some of them are free. The paid ones use a coupon code syntax for 10 bucks off. All right, I think that's it now. Thank you so much for tuning in. And we will catch you next year. Please - -153 -01:06:35,640 --> 01:06:45,420 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax315.srt b/transcripts/Syntax315.srt deleted file mode 100644 index 11bed9f8d..000000000 --- a/transcripts/Syntax315.srt +++ /dev/null @@ -1,256 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,000 -Announcer: Monday, Monday, Monday Open wide. Get ready to stuff your face with JavaScript CSS loadmodule BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is when Barracuda bombs and Scott tell told me - -2 -00:00:25,980 --> 00:00:31,320 -Scott Tolinski: Oh, welcome to syntax. And this January Monday tasty treat. - -3 -00:00:31,350 --> 00:00:32,360 -Unknown: Happy New Year. - -4 -00:00:32,399 --> 00:03:02,940 -Scott Tolinski: Yes, Happy New Year to you. We are going to be talking all about keyboard shortcuts and window management. And this is one of those things that I cannot stop talking about. Which seems crazy to say, but that's honestly how I feel. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado and with me, as always is the West boss. Hey, hey, and with us today as well is the two of our favorite sponsors. Boom, I kidding. All of our sponsors are our favorite sponsors. But two of our favorite sponsors are Freshbooks and Sentry, I'm going to kick it off with Sentry. But sentry@sentry.io is the exception handling tool that allows you to see more than just errors happening in your project. Now, they allow you to really discover a ton about your application. For instance, one of my favorite things that Sentry has is their performance tab. Now the Performance tab allows you to monitor web traffic through your site and actually see graphs and charts about just about everything you could possibly imagine. Okay, so here, we even get our failure rate of each route. So you get the time to load, you get the app dexis score, you get how many users and how long it took them to hit these pages. And then based off of things like the failure rate or the time to load, it assigns all of your routes, a user misery score, which is like a little chart to just show you. Okay, if we check it out, we can see, okay, one of these pages here has a fairly high user misery score, but I love amount of people have hit this. And maybe if one of them had an error for some reason, maybe their ad blocker was turned on, well, maybe that's not something we need to be concerned about. And I see another route that is the exact same page in my site, just a different route for that react component. And I can see that this route has a very fast loading time and an extremely low user misery score with a with a ton of traffic. So therefore, I know, it's not actually something I need to worry about. But this allows me to see at a glance, which of my routes are the most painful for our users to hit. And it's very, very cool. I'm perfed. That's one of my big things. I love perf. Love it. Love it. Love it. So getting performance tools inside of Sentry is one of the coolest things in the world. And I've been using this since it was in beta. And let me tell you, I use it at just about every week. So check it out@sentry.io use the coupon code tasty treat all lowercase all one word, and you will get two months for free. Now let's move on to West talk a little bit about fresh books. - -5 -00:03:03,119 --> 00:03:41,460 -Wes Bos: Fresh books is the cloud accounting solution for your small business. So if you 2021 this is the year I'm talking to you listen to his podcast right now. You are you've been trying to start a business, New Year new you new fresh books account, you are going to start a business this year, and you're gonna log your expenses in Freshbooks. You're gonna send out all those invoices and expenses, you're going to remind your client who forgot to pay their invoice in Freshbooks. So check it out and sign up at freshbooks comm for its syntax for a 30 day unrestricted free trial. Make sure you use syntax in the How did you hear about a section? Thanks so much for Freshbooks for sponsoring - -6 -00:03:41,970 --> 00:05:35,670 -Scott Tolinski: CIC. Okay, so keyboard shortcuts, window management, I know we both use simultaneously the same tools and different tools. So I'm excited to hear about some of your setups, we can share setups a little bit, I think we could start with one that I knew were both pretty high on I'm not talking about Colorado air, I'm talking about carabiner elements, which we both love and use this app carabiner elements, it's for the Mac. Now unfortunately windows people I don't have an analogous software for this. But what this is doing is allows you to basically override keyboard functionality. And one time This came in handy was when I had water damage on my keyboard and my shift key just kept on pressing itself. So because of that I could just get into carabiner elements and turn off that shift key. So it gives you a lot of like neat little things like that. But I think the reason we both use it as for productivity specifically and the creation of a hyper key. Yeah, the hyper key being the combination of command control option and shift and so what we have both done I did so at the behest of West which was assigned my Caps Lock key to be command control Option Shift because really how often do you use cap lock? Never I know use caps locks and if I do, it's an accident and I'm mad at myself. For me what it's done. It's opened up this whole world where I have a blank slate of keyboard shortcuts that I just know, if I hit the command lock key and something else, it's going to be a keyboard shortcut and have to worry about overwriting other things. Like I use these heavily in my DaVinci Resolve for video editing, I do caps locks a, it normalizes my audio, I do cap locks, and it creates a new timeline with my current video clip, you know, just things like that I just start setting keyboard shortcuts willy nilly in VS code, Caps Lock l for me deletes the line by just because I want it to be that way. - -7 -00:05:36,000 --> 00:06:44,820 -Wes Bos: Yeah, that's all I use Karabiner elements for is the ability to remap your cap soft key. In like Mac OS settings, there are the ability to mess with the modifier keys, but you cannot remap your caps lock key to be a new modifier key. So that is what you kind of have to do. Just set it up. And then from there, once you have a hyper key, then you can use your hyper key plus literally any other key on your keyboard. In order to set up we'll talk about this window management and keyboard shortcuts and stuff like that. So one app that I absolutely love, and I can't stop talking about is and I've been using it for years is better touch tool. So better touch tool is this massive application that has tons and tons of different features built into it. And it allows you to specify custom keyboard shortcuts, custom trackpad shortcuts, drawing mouse gestures, touch bar, custom stuff, you can use the Siri remote, you can hook up a MIDI to it, you know, like those like MIDI things that you can hook up to your computer. Hold on, - -8 -00:06:44,850 --> 00:06:52,530 -Scott Tolinski: hold on. Let me actually ask you this. This is gonna be a fun little side. middie can you tell me without googling it? What is Midwest, - -9 -00:06:52,950 --> 00:06:58,050 -Wes Bos: music instrument, digital, something digital interface. - -10 -00:06:58,050 --> 00:08:13,560 -Scott Tolinski: I think it's good. I actually don't know what the acronym stands for. But my uncle who got me my first job in the magazine, he actually was like an early adopter of MIDI. And he'd like Britain first, some like electronic music magazine. Back in the 80s, I believe and he was like super into MIDI really early. You could think of MIDI as information about music, or information where you could say, Alright, this is like an a five. So it's the a the fifth day on the keyboard, it was hit at this time and with this velocity, so it tracks like how hard something was hit, when it was hit and what node it was hit. And so people can do many to do, you know, play on a keyboard that has no sounds within it. And then take that MIDI blueprint and run it through a computer and it's playing it back with sounds assigned to that. One of the things that I'm looking at getting right now is a MIDI drum kit, because, you know, I have a drum kit applied into my drums my whole life. But I haven't gotten to play for the past like seven years. And so I want to get an electric drum kit that will have a MIDI out which zone cable MIDI out into my thing and I can play the drums and have it go through my computer. And if I want it to be cow sounds when I hit the snare drum, the naki cow sounds when I hit the snare drum, - -11 -00:08:13,710 --> 00:08:26,520 -Wes Bos: and you could hook up the MIDI to better touch tool. Yes. And then when you slam the hi hat, you could do like a cowbell Yeah. middie that when you hit it, it deploys your your website or something like that, because it hooks up, - -12 -00:08:26,700 --> 00:08:30,060 -Scott Tolinski: you could do a beat to deploy some code, doo doo doo doo. - -13 -00:08:31,320 --> 00:10:05,340 -Wes Bos: So what I use better touch tool for is, first of all, all the keyboard shortcuts. So once you have this hyper key, you can set up keyboard shortcuts to like I've got hyper h opens my terminal, or hyper f opens my ScreenFlow app, or what I really use it for is window management. So I've used dozens of these window management apps, and they all come down to either you have to configure them by writing this very obtuse fig file. That's too hard for me. Or they're very simple and they don't do all of the things that I want. And bettertouchtool is there like both of those where you can get super nitty gritty into window management like I have hyper arrow keys will snap my windows to the left or to the right or to the top or the bottom I've hyper page down will move it to the left monitor and just cycle through all of my monitors. But then it also has these snap areas that you can define. So for me I'm when I record, I only record a portion of my screen and that because the monitor is too big for creating video like that, and I have defined the snap areas in my layout. I have an extended Apple keyboard so I have all these extra F keys and I have the home and Page Down page up buttons so hyper plus all those buttons I do too. Oh, there you go you in like, I never use those keys for anything do. - -14 -00:10:05,540 --> 00:10:11,970 -Scott Tolinski: There was like a hot minute where I was like, Oh yeah, page up page down. I'm loving this and then like no, I don't use it I'd use. - -15 -00:10:12,480 --> 00:10:18,120 -Wes Bos: Yeah. But even if you do hyper plus those keys are probably not assigned to anything right? - -16 -00:10:18,120 --> 00:10:19,710 -Scott Tolinski: I can't imagine Yeah, - -17 -00:10:19,740 --> 00:11:01,560 -Wes Bos: it's like a whole nother because I always have my fingers on the arrow keys. So I just moved my hand up. And I feel like I have four more arrow keys without having to look down or feel. And then I have those set to maximize my windows to the different snap areas. And they're within the portion of my screen that I'm thinking. So I used to have to resize my windows to fit inside. And now I just hit this keyboard shortcut, and it snaps them all into place. And my mind was blown. I was like, This is perfect. This is amazing. And just like the window management, it's just a small part of better touch tool. And it's like worth the $20 for a lifetime license for a better touch tool alone. - -18 -00:11:02,010 --> 00:12:19,650 -Scott Tolinski: You know what I gotta, I gotta make this change. I've been using DVS spelled di VVY. For a long time, actually, you can tell just by the aesthetic of this website, when I bought this in. And I challenge anybody to look at this one. This is very two point web 2.0 timing, when this thing came out. And dizzy by all means it's fantastic. And just like you, I have the same setup with my hyper key where I can hit option, or I can hit hyper to the right. I even have them set up specifically for my ultra wide because I know my ultra wide if I make the window one third of the width or whatever, that's still more than enough width for me. Yeah, or I have an option to do half and half. I also have hyper are puts all of my windows to the correct aspect ratio of my screen recording software and moves it into that recording spot. Yeah. Which is something that most people don't think about when you record your screen. Your screen isn't 16 by nine, which is the standard aspect ratio. If you're smart, you're screen recording 16 by nine so that way you're dealing with standard, you know, aspect ratio formats and stuff. But Hmm, better touch tool, it how much control does it give you because the nice thing about Divi is that Divi sort of works like CSS Grid, where you can choose how many grid items you want. And then you can choose the gap between them. So you can even like adjust the gap. - -19 -00:12:19,920 --> 00:13:20,820 -Wes Bos: Yeah, so I tried that with mine. And I tried like figuring out where it was. But it never was exactly the size I needed it to be. It was always off by like 10 pixels. And so better touch tool, it literally says action trigger snap area x 319 pX, why 714 width and height 19. Like, for some reason 1920 is not wide enough for me. So 1923 pixels, is the is the width I need and the height. And it's like super fine grained control, you can hook them up to keyboard shortcuts, it also gives you like visual snap areas, I have it set up where if I'm dragging a window, and I hold down hyper, it'll officially give me all the snap areas, I can drag the window into that snap area, and it will automatically expand to that size. And then it also gives you the windows like if you slam a window up into the top left or right of your screen, it will expand Oh, that - -20 -00:13:20,970 --> 00:13:24,000 -Scott Tolinski: Oh baby, give me that Windows around. - -21 -00:13:24,060 --> 00:13:51,960 -Wes Bos: Yeah. And like, I guess I'm talking about it. And I was like, how much should I pay for this tool? Oh, I was like $20, like seven years ago. And I was like, we got to do a show on this. And you can also do keyboard shortcuts specific by an app. I just have shortcuts and then I go into each app. But if you want to like say like, if I'm in Google Chrome, and then I press this keyboard shortcut, it can do something different than when I'm in VS code or something like that. You - -22 -00:13:51,960 --> 00:14:18,810 -Scott Tolinski: want to hear it. I'm gonna use this for Yes, hi, I'm going to use this because you know how ScreenFlow you can pinch and zoom in the timeline. Yeah, well, turns out, you can pinch and zoom in the timeline that Final Cut Pro two. And I'm still used to that workflow. But DaVinci Resolve is Command Option to increase if you do pinching in davinci resolve it like zooms in on the video or whatever. So I am going to use better touch tool here to set up pinch and zoom to remap to option plus and option minus - -23 -00:14:19,050 --> 00:14:43,650 -Wes Bos: Oh, because because they have a whole trackpad thing. And you can set up custom gestures that do things. Oh, that's sick. Yeah, because most apps will have the ability to set a keyboard shortcut for things like zooming in, but they won't have the ability to set a gesture. Right, right. That's like a OS level thing. And that's what this gives you full access to so it is super slick with that - -24 -00:14:43,650 --> 00:14:49,140 -Scott Tolinski: by lifetime mag access. Yes, please. I can't even wait till the end of the show to get my credit card out is very good. - -25 -00:14:49,200 --> 00:15:03,240 -Wes Bos: I'm like almost annoyed that this was only $20 because like the app does so so much like if you have one of those like five year old or 10 year olds. remotes, remember, you can't get a remote for your magic. I - -26 -00:15:03,240 --> 00:15:04,020 -Scott Tolinski: got one. Yeah, - -27 -00:15:04,079 --> 00:15:43,230 -Wes Bos: yeah, yeah, I remember that they don't work anymore. So it doesn't come with the IR thing. But like you could use that with it. And like, there's just so many little hidden features inside of it. And just for the window management alone, it's the best Window Manager I've used. But then you can also put all your keyboard shortcuts in it. And then you can also like script things. And then I also found out, you can do web overlays with better touch tool. So one thing I do is, I use this app called Uber layer. And I have just a PNG, that's the size of my monitor, and it overlays on top of my screen. And then I can see where I'm supposed to be recording within which the box doesn't ScreenFlow ScreenFlow doesn't do that for - -28 -00:15:43,230 --> 00:15:44,910 -Scott Tolinski: you, I saw you does, - -29 -00:15:44,969 --> 00:16:14,670 -Wes Bos: it allows you to specify a certain part of the screen. But at least when I was looking at it, you had to drag and drag and resize it and manually enter the numbers. You couldn't set like a thing. And then it also Gray's out the outside of it, which sometimes I want to show the menu bar of other thing, and I'm happy that it recorded that part of the screen, because I want to be able to zoom into it. Or if I want to zoom into the dock and show like oh, there's a new notification here. So I just record the whole screen. - -30 -00:16:14,879 --> 00:16:16,770 -Scott Tolinski: I just don't record that part of my screen. - -31 -00:16:16,829 --> 00:16:45,870 -Wes Bos: Oh, yeah, maybe I should look at it again. But the web overlay thing is really cool. Because you can just write HTML, CSS and make this overlay on top of your website. And I was thinking like, oh, if you were like a streamer, oh, yeah. You could code your own, like overlay in JavaScript and like, pulls data in from an API. What's it called? what's what's called Uber screening? No, this was called overlayer Brulee. But I just found out that better touch tool lets you embed a web view over top of your screen. - -32 -00:16:45,899 --> 00:16:50,010 -Scott Tolinski: So it seems like better touch tools to just become my daddy or something. Right? - -33 -00:16:50,129 --> 00:16:51,930 -Wes Bos: They should call it everything. - -34 -00:16:52,679 --> 00:18:13,170 -Scott Tolinski: Yeah, I'm interested in this. You know, it's so funny, because I was coming into this episode being like, Oh, yeah, I got so many things to share. I'm gonna like go nuts on this. And I'm like, this is just me gushing over better touch tool and the fact that I don't use it. It's so good. I'm not big, big, all about improving your own efficiency. For some reason. There's like some shortcuts in VS code that just don't register in my brain, right? Like, I know, you heavily invest in things like creating shortcuts and yeah, snippets and stuff like that, that will help you. And for me, like I've always found that like, one of my biggest boosters to productivity is when what's in my brain lines up directly with what that shortcut is? There was some shortcut whatever the the shortcut to delete a line, I think it's like command K or something by default. Yeah. And to me, that never felt right, because I never learned it as command K, I'm sure those of you who have learned it as command K, you know, it feels right. But for me in my head, if I delete line line line, yeah, oh, I put hyper to hyper l delete the line. And I have so many shortcuts that are just like that. Like you don't have to accept vs codes. snippets, like VS code is shoving a plate of stinky cheese in front of you. I don't know stinky cheese can be good. I'm trying to think of something that's not good. You know, it could be sending some disgusting food in front of you. And you'd be like, No, wait, I want cheesecake. Okay, and you can have cheesecake, you don't have to take what it gives you. One thing I did was in VS code, I - -35 -00:18:13,170 --> 00:18:21,780 -Wes Bos: set hyper h up to show code hinting. So like, you know, when you write a method like set timeout, and it's like, yeah, the first argument is - -36 -00:18:21,930 --> 00:18:25,550 -Unknown: the function. And then you have to delete the one word to get it to pop back up. - -37 -00:18:25,680 --> 00:18:33,590 -Wes Bos: Yeah, you're like, God, come back. I need you. I just set that to hyper age. And it just shows them right. It's super, super simple. - -38 -00:18:33,660 --> 00:18:34,710 -Scott Tolinski: What is that? - -39 -00:18:34,770 --> 00:18:47,010 -Wes Bos: Let me let me find out what it's called for you. Trigger parameter and static. Other things since I got the Mac extended keyboard with the number pad on it because I'm an accountant. Do you ever use your F keys? - -40 -00:18:47,060 --> 00:18:47,820 -Scott Tolinski: Yes. - -41 -00:18:47,820 --> 00:18:49,550 -Unknown: I never use my F keys. - -42 -00:18:50,400 --> 00:19:03,350 -Scott Tolinski: I do. This keyboard. The key Tron key one actually does a really good job of the F keys. So I do use them. Yeah. Oh, and I specifically use function f 11. What does that do? It brings the windows apart allows you to use your desktop. - -43 -00:19:03,390 --> 00:19:36,390 -Wes Bos: Oh, yeah. Okay, cool. So I never use my F keys. And because I have the extended keyboard, I have F 16 through F 19. And those are almost never hooked up to anything because most Macs do not have that unless you explicitly go and find that keyboard. So I hooked up my f 19, which is the top right hand corner to record and to stop the recording. Because sometimes in my recordings, you'll see me put my mouse at the top right hand corner and click stop recording. And I was like, that kind of sucks. So I set that up and then I set up so - -44 -00:19:36,390 --> 00:19:41,460 -Scott Tolinski: ScreenFlow Command Shift two stops the recording, just to FYI, Command Shift two. - -45 -00:19:41,840 --> 00:19:52,100 -Wes Bos: Well, I did that but I always forgot it. And I was thinking I need one of those either a MIDI or I need like one of those Elgato decks. Oh yeah, - -46 -00:19:52,100 --> 00:19:53,460 -Unknown: I won't put those so bad. - -47 -00:19:53,460 --> 00:20:15,420 -Wes Bos: I was like, I just need a button depressed. Yeah, that's not a crazy keyboard shortcut because like you said, like sometimes it just can't really Remember what the keyboard shortcut is. So I just hooked it up to that button. And then also, another thing is to drop a marker. When you screw up, I drop a marker. And I was like, I just need a big old button on my desk. That's dropped marker. So I hooked that up to F 17. - -48 -00:20:15,590 --> 00:20:18,590 -Scott Tolinski: So what are you saying you don't squawk into the microphone? - -49 -00:20:18,660 --> 00:20:32,880 -Wes Bos: Yeah. I usually just go or clap or something like that. So I can visually see it. But the marker is a little easier on the voice. What else? Do you have anything else, I got one more thing. But I don't want to fall over here. - -50 -00:20:32,910 --> 00:21:20,460 -Scott Tolinski: Don't get blown my mind because so many of my things are just based around that hyper key and then adding keyboard shortcuts galore. So for me that's like really, really the big takeaway most of the way most of the way. And then like I said, Devi, but I'm kicking Devi to the curb. Another one I like to use, I use rocket, an app called rocket Yes, to do my emojis. And you can set up bracket, so you do colon and then you can start typing. And it's sort of like the way slack gives you emojis everywhere, which is really how emoji should work in the OS. And the coolest thing about rocket is you can tell rat rocket to buzz off and VS code and Buzz off and slack and Buzz off and discord where those functionalities are there. But if I'm popping open Twitter, and I want to throw a little emoji in the tweet. Oh, yeah, it's right there for me. So yeah, I use rocket for that. - -51 -00:21:20,730 --> 00:22:35,850 -Wes Bos: Last thing I have here. This is not entirely keyboard, but it's just text expander I use text expander like crazy to have little snippets for little things. Like people asked me what my business number is all the time or phone number or email address or a little like people say, How do I merge my accounts, I just typed colon merge or colon, phone or colon email, and it will just expand that. And then another thing I do all the time, I guess it's not really keyboard shortcut related. But whenever I'm typing things, like if I type JavaScript, really quickly, I always do capital J. VA, s CRI PT, because I hold down the shift key and I type it really quickly. And sometimes you'll see that like it's really annoying to me. So I set up a text expander where if you ever type something with two capitals, right next to each other, it will automatically down to phi lowercase the second one because that was probably an accident. And I thought it might get in the way but it is super super handy. Do you pay the subscription? TextExpander? No, I bought it like years ago before they moved to the subscription. And I just have not upgraded because it's I'll say I love TextExpander but I don't want to spend How much is it? - -52 -00:22:36,210 --> 00:22:41,280 -Scott Tolinski: It's 333 when billed annually or 416. Okay, yeah, - -53 -00:22:41,670 --> 00:22:50,220 -Wes Bos: I don't want it I don't want the email every month. I don't want the the invoice Just let me pay my 40 bucks or whatever and give me the software - -54 -00:22:50,519 --> 00:23:40,710 -Scott Tolinski: and then never take a version update or something. Yeah, he really preferred paying on major version release I preferred paying for major version releases the software, especially stuff like that. I actually do have one I said I didn't but Clippy, which is the fork of Oh man, I forget what this thing was originally called. But I used to use it back when it wasn't Clippy. And thankfully, somebody picked it up at Clippy hyphen app.com. And it's also open source. So you can check out this source on GitHub. But this application is a clipboard manager with lots of features and includes snippets. So we have like all of our you know, canned email responses in here snippets, all of the working credit card for stripe kind of things in here, along with like special URLs that I use, like a discord invite URL, or even terminal commands. - -55 -00:23:40,769 --> 00:23:42,420 -Wes Bos: Oh, you can store stuff in it. - -56 -00:23:42,450 --> 00:24:26,280 -Scott Tolinski: Yeah, you can store some like global snippets. And instead of pasting things with Command V, you do Command Shift V and it pops open a little window, you can navigate it all by keyboard if you want. The cool thing here is that you can choose whether or not to paste in plain text or not. So you can paste formatted or in plain text, and I have mine set up to have 100 of my past clipboard copies. So the last 100 things I've copied into my clipboard exists in this drop down. I never lose anything in my clipboard. I will tell you that. There's never been a time where I've been like, oh, man, I copy that thing. No, it's like an older thing I copied from last week still in there. So I'm a big fan of Clippy here. It's really great app. I've been using it for a really long time. - -57 -00:24:26,490 --> 00:24:51,540 -Wes Bos: I think you might have talked about this on like one of the very first episodes of syntax. I've used it since then is the best. The bee's knees. Yeah. Yeah. Big fan. So I think that's it that I that I love these kinds of shows because it's just little, little handy things. I think I'm going to do a little YouTube video showing some of the more visual pieces of bettertouchtool because if you're not using hyper key you are missing out. Let me tell ya, - -58 -00:24:51,540 --> 00:25:07,260 -Scott Tolinski: and I just right now as we're talking, I just set up my keyboard shortcut for Clippy to go directly into clipboard history rather than the snippet or Keyboard history section. I wanted to go right into the keyboard history section by doing Hyper V. There we go. Hyper V, baby. Good idea. - -59 -00:25:07,260 --> 00:25:17,940 -Wes Bos: Good idea. You only have so many keys available, but with hyper, you get a whole 4050 kit ladakhi how many keys are on a keyboard? - -60 -00:25:18,630 --> 00:25:24,540 -Scott Tolinski: I don't know. But it's looking a lot bigger right now. I bet a mechanical keyboard heads know that because they're all about those key caps. - -61 -00:25:25,319 --> 00:25:33,960 -Wes Bos: 104 keys is common in the US. So you probably have probably 70 or 80 of them, you're able to set up to hyper, - -62 -00:25:33,960 --> 00:26:23,460 -Scott Tolinski: hyper something, my guess 72. And if you have one of those keyboards with the thumb buttons and clickers, oh, man, you got a lot of keys. So that is it for now for hyper productivity with keyboard shortcuts and window management. We know management side of things. Windows users are probably seamless Linux users. To be honest, I found that it'd be pretty nice on Linux as well. But as Mac users, yeah, they just won't give it to us. So we got to use things. And bettertouchtool plus Karabiner plus Clippy plus all of the apps you know, and love is all just a winning connection for me. So really excited to hear if anybody else has any of these killer productivity apps for Windows, PC, Mac, whatever, please share it with us on Twitter, hit us with the most retweets and especially if it's Windows or Linux considering Wes and I are not necessarily in that territory too much. - -63 -00:26:23,940 --> 00:26:27,690 -Wes Bos: Alright, thanks for tuning in. Catch you on Wednesday. Please - -64 -00:26:30,720 --> 00:26:40,500 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax316.srt b/transcripts/Syntax316.srt deleted file mode 100644 index 271266b88..000000000 --- a/transcripts/Syntax316.srt +++ /dev/null @@ -1,480 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,590 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to whiskey and West boss. - -2 -00:00:10,590 --> 00:00:48,720 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats out there. Today we've got some 2021 predictions Scott and I have compiled lists of things we predict will be popular and things that will happen in web development this year. And then at the end of the year, we'll sort of revisit this list and see where we slam dunked it and where we err, balled it. Today, we are sponsored by three awesome companies. First one is Sanity, their structure content, CMS, second one is Log Rocket session replay. And the third is linode, which does Linux virtual machines. Talk about them all partway through the episode. How you doing today, Scott? - -3 -00:00:48,929 --> 00:00:55,530 -Scott Tolinski: I'm doing good. It's funny. We always record these in the morning and we're recording this episode in the afternoon. It feels very different. - -4 -00:00:55,589 --> 00:00:56,189 -Wes Bos: It does. - -5 -00:00:56,189 --> 00:00:57,060 -Unknown: I feel awake. - -6 -00:00:58,770 --> 00:01:07,500 -Wes Bos: Yeah, we usually record them at like 9am your time. So you're like, you're thrown right into it. But I it's 11 o'clock my time on record. So right. I'm just getting hungry. - -7 -00:01:07,830 --> 00:01:10,730 -Scott Tolinski: That's a me problem. Yeah, yeah, definitely a me problem. - -8 -00:01:12,660 --> 00:01:17,670 -Wes Bos: All right. So how did you want to do this show? We're gonna go back and forth with our predictions. - -9 -00:01:18,030 --> 00:01:38,730 -Scott Tolinski: Yeah, the way I think that would be fun, rather than just like being too organized with it is that? Well, we both made lists of our predictions, and maybe we could just start at the top. And I could do one and then you could do one, and then I could do one, and then you could do one. And if you have the exact same prediction on your list, you could say, I have that too. - -10 -00:01:39,180 --> 00:01:41,760 -Wes Bos: All right, let's do it. You want to grab the first one? - -11 -00:01:41,820 --> 00:02:51,210 -Scott Tolinski: Yeah, I had like a whole like game, not like an actual game. But like a fun way of doing this, like, involve, like ranking them. And then like, the more I thought about it, I was just like, this totally is not going to work. I like presented it to West is like I got this great idea for the episode. And then I was just like, we basically just go off and go back and forth and talk about what we want anymore. Like, what else? What else you got? Okay, so my first prediction is going to be one that I am guessing you're gonna have to say I have that too. And that's just ESM. And ESM is going to be big in 2021. I have been to the edge and back. I've seen the future. And I have used ESM. And I don't want to go back. And in fact, I use snowpack to do some ESM bundling for those of you don't know it's ECMO script modules. So it's basically JavaScript modules built in. And with the combination of a nice ESM focused build system like snow pack, you get some crazy fast reloading times your tooling gets easier. Everything overall just seems to be quite a bit nicer, in my opinion. - -12 -00:02:51,569 --> 00:03:44,490 -Wes Bos: Yeah, I had the same thing on mine as well. Everything is just a URL. I'm very curious to see if we'll get imports from URLs. Yeah, in a node, which would be kind of interesting, because you can do that. Actually, I think we already have that. No, I'm wrong there. You can import from a URL and node because that is part of the ACMA scripts back. The part of the script spec is that you can just import whatever from https colon slash slash etc, etc. So I had it here. Yes, modules. By default, everything going forward should always be ies modules. And everything else coming .js is considered legacy we should do an entire show on now that we have ies modules in Node. What does it look like? How do you use it? How do you mix between how do you convert a project over from one another? Because we did do a show. But that was before it was finished? And there was a couple things that we didn't quite have yet? - -13 -00:03:44,940 --> 00:04:50,510 -Scott Tolinski: Yeah, I think they along the lines of what you're referring to with the importing from a URL would be like a caching at package system, sort of like what Dino has, where if you import from a URL it downloads and caches that in a really nice way. I don't think node has anything like that specifically, although I'm gonna say the word snowpack a lot in this episode. But snow pack does have something like that in their version, they have like a version three release candidate released recently. And there's some very interesting stuff in here in this v3 release candidate, including one of which is called streaming NPM imports, where it's going to make some of this transferring over to importing things from URLs a little bit easier, because what you would do in snowpack would be import react from react, so to say, and then snowpack would go off and get that from the CDN with the right version, instead of having an npm install process or even a package dot JSON to set those things. So it functions a little bit more like a transparent install from URL. It's very interesting. - -14 -00:04:50,999 --> 00:07:06,030 -Wes Bos: Interesting. One quick question is that node does have a cache for importing things. And one thing I'm kind of curious about is can we get like hot reloading for node modules, I tweeted it out the other day, a couple of people had some like kind of half baked solutions for it. But because node has an S module loader, I'm wondering if like, Can somebody make another loader that funkified with the cache, and then every time that you run a function, it will on demand require it, that would be pretty wicked to get that because like, that's a pain I have right now is that for a lot of node processes, you have to restart the entire application in order for it to see it. And like, that's not so much of a big deal when you're doing like a small little serverless function. But for existing node applications, it can be a bit of a problem. Totally, my next prediction was remote work is obviously going to become more popular. The whole COVID thing. I don't think remote work is like a silver bullet. There's a lot of hard stuff specifically around like new hires and juniors, it's being a little bit harder for them to skill up because you don't necessarily have someone to sit beside you. But the the part where I think is going to be kind of interesting is that there's a whole new talent pool that opens up when a lot of these companies go remote. So never mind these, like rich California tech people moving into some beautiful Riverside place, like yeah, people are frustrated when we hear stories of that. But what I'm saying more is that there's a lot of really smart people all over the world. And for a lot of people, it just has not been an option to get a job as a web developer because of where they live. And now, that is going to be an option for a lot of people. Because there is this thing called remote work, which is awesome. I think like, like that might not be all that exciting to hear from people who are currently looking for a job because the talent pool probably just got much bigger. But I think that's good for people that are hiring, because now you can all sudden just like, select people from absolutely anywhere. So I think that's gonna be a big, big thing in 2021. - -15 -00:07:06,270 --> 00:10:15,510 -Scott Tolinski: Yeah, especially in our industry, where you can pretty easily detach, you know, the experience of working in a real environment. You know, people see it like a little hubs, I have a friend who works for a major company of which I'm not going to disclose like a major big company. And they do like crazy, intense work to you know, just to add a layer of, you know, clarification there. It's an unknown company, they do an unknown large amount of work. But they have these like little hubs where they'll have like four people in Denver. So what they'll do is they'll buy a small office for those four people in Denver. And so instead of everybody working from home, you just work from where you are. And if there is enough people in that specific spot, then they buy you an office there. And guess what, if you want to go to that office, you can go to that office, if you don't, Hey, no worries, you can also work from home. So I think there's like little fun things like this, where you will see companies maybe investing in smaller spaces in you know, various spots around the country, or even just wherever to get a little bit more control over their workspaces. But again, still in giving people that ability to technically remote work. So I did not have that one on my list. But I think you're totally right. And I think this pandemic is only accelerated that process. Next is in my list is a dino is going to grow in usage. And in just about everything, I think in 2021, I recently released a course on Dino Dino 101 for web developers. And we really looked into not only the dino core foundational basics, but we looked into the web framework side of things. And let me tell you stuff is there. There are certainly good things there. And the community is growing. But if I were to say, let's say like Scott, you were to have to choose to build level up tutorials from scratch right now, would you pick Dino? My answer is probably right now. No. That said, if I had some fun side projects or something, I might say yes. Because in my experience, there were many packages that were just flat out now working with many cases, you know, connecting to a Mongo Atlas DB within the most used Mongo package just didn't work for me. And like, I didn't have the time to debug this. But like this package in these things aren't being used by enough people to hit all of the different edge cases or even cases that exist right now. So as more people continue to experience it and use it, I think Dino's usage will continue to grow. And there will be more and more tooling and packages around it. I think it's a great platform, and I really enjoyed using it, but it is it still needs a little bit more time in the oven. I think not Dino itself but the community. One thing I noticed like, even like packages that everyone would have to use, like there's a dot E and V package. That's really good, mind you, but There's like 83 stars on it. And you're like, ooh, 83? I think not that stars are really the end all be all, but like I was, so to say a little bit surprised with how few people are using a lot of things right now in it. Yeah, - -16 -00:10:15,570 --> 00:10:58,919 -Wes Bos: I'm super stoked about Dino, we will probably talk a lot about it on this podcast next year just yet, we are so excited by it. I don't think that like, it's not gonna be like, Oh my gosh, everyone switched over Dino like, you will probably see that at least four years coming. Like what how old is node right now like 10 years old right now, it took them a good amount of time in order to get big. But if we see that all node API's are now compatible, and there's like a compat layer where you can just run existing node modules in Dino, that's gonna be pretty exciting, I think. Yeah. So yeah, definitely keep an eye on it for 2021. And we'll see where we are. I'm really excited to see where we we are in one year's time, - -17 -00:10:59,130 --> 00:11:11,640 -Scott Tolinski: I had a lot of positive experiences when working with Dino and I think this will tie into my next one, even though I just had this. So I guess you can go either way. My nice things were all about TypeScript in it. - -18 -00:11:12,029 --> 00:12:37,230 -Wes Bos: Oh, yeah. My next one here is that tooling will fade away. So there's sort of like two camps, I would say, of people's thought process over tooling right now. One is, we don't need it. You can use ES modules and HTML and the browser. And you can ship ES modules to node and like, you don't need a layer of tooling. Some people are going as far as to say, and then you sort of see people on the other side of thing. They're saying that, yeah, you still need tooling. There's a lot of stuff that you can't do with just HTML, CSS, and JavaScript, you still need a lot of this tooling in place, but it's gonna fade away. And I think I'm in that camp is that what I mean by fading away is that you'll notice that you're actually using tooling because Dino's perfect example, it has a linter format or transpiler. You can use TypeScript immediately tester. That's not to say that they're not doing anything. For you. It's all happening for you. But the tooling is built in, or we're excited to see what happens with Rome, personal to probably should come out snowpack, all of these tooling, you just run it and it just works. And there's no, there's no more fussing about it. And it's been like this way a couple of for a couple of years already, I think with some of the React tooling, specifically, next, jazz has been really good about this. But you just don't need to spend a whole lot of time fussing with these tooling. And I bet 2021 is the year that we say, all right, stop complaining about Webpack configs. Because that's not a thing anymore. For most people, - -19 -00:12:37,260 --> 00:12:42,149 -Scott Tolinski: it will be like the people who are still complaining about I can't send our things in CSS. And in 2019, - -20 -00:12:42,149 --> 00:12:49,230 -Wes Bos: that joke has been long gone for like, like, what, like five years we've had Flexbox centering that ship has sailed. - -21 -00:12:49,260 --> 00:12:54,840 -Scott Tolinski: Yeah, it reminds me of like comedians doing their material from the 90s or something. So it's not gonna work. - -22 -00:12:54,929 --> 00:12:55,440 -Unknown: Yeah. - -23 -00:12:56,940 --> 00:14:40,440 -Scott Tolinski: I mean, I definitely agree with you, I think we're gonna see more and more of these tools. And each time I try out a new thing, whether it is parcel or snowpack or whatever, they all just feel nicer than the predecessor that configs read nicer. The usage is generally nicer. You know what, like, I've been having just so many experiences lately, with new platforms where I fire up a new platform, I don't write a shred of config. I don't even tell the thing that I want to use TypeScript. And then I make a TSX file. And the builder compilers just like, no problem. I got that. For me personally, like, that's what 2021 is going to bring. It's gonna bring situations where I'm not installing, and then thinking okay, now, how do I put my TypeScript compiler into this setup? Or how do I open Nakata deal with Babel, and you know, just not having to do these things is going to be a huge productivity boost for us all, it's going to be a huge decrease in barrier to entry. Because honestly, it's really great to write TypeScript code. But when the first you know, two videos of any tutorial series have to be about setting up your environment. That means not learning TypeScript, that's learning how to, you know, get a tech stack working for the sake of getting it working. Right. So I think we'll see a lot of this stuff. I have one interesting thing on my list here, because I also had the fact that these tools will get easier. Let me follow this up with a prediction that I have that is right along the same lines of this. And this is a greater usage of other languages to build JavaScript and TypeScript. For instance, have you seen e s? build.github.io? - -24 -00:14:40,649 --> 00:14:46,409 -Wes Bos: Yes, I have. I didn't look out what it was. I assumed it was just a builder for ES modules. - -25 -00:14:46,409 --> 00:14:59,520 -Scott Tolinski: II s build is basically a Babel competitor written in go. And they do a neat little comparison, where, you know, people throw these benchmarks up and yes, they're benchmarks on somebody. Oh, - -26 -00:14:59,520 --> 00:15:05,250 -Wes Bos: yeah. One of them. Graphs where it's 1000 times faster in their specific use case, be like, my - -27 -00:15:05,250 --> 00:16:18,899 -Scott Tolinski: thing is way, way better than yours. Look at this graph that I created to show you that, like, I'm gonna make a graph that shows just how cool Scott is. And I'm gonna like so very clearly, based on this data that I'm presenting you. Very cool. So no four is built, it is very fast. But I think this is a neat trend that we've already really started to see, even if you're not aware of this. And one of the things that we've been seeing this in is Dino, specifically, Dino is built in rust, or at least the aspects of Dino that would be transforming your TypeScript. Right. And likewise, he has builders built in go. And so my prediction is that we are going to be seeing languages like go and rust, used to great effectiveness to improve JavaScript tooling. And I think that's something that we're definitely going to see this as building, regardless of if their benchmark say that it's crazy fast. I've used it, it is crazy fast. So you know, I think this is the first of many of these types of projects that we're going to see over the next year. Isn't Rome also built in rest? Am I am I tripping on that? But, bro, maybe along the same lines, too. - -28 -00:16:19,260 --> 00:16:28,740 -Wes Bos: Is that? Let's let's check that out. Looks like all the files on their GitHub are in TypeScript. So no, I don't think it's in raw. - -29 -00:16:28,740 --> 00:16:37,440 -Scott Tolinski: They're all written in TypeScript. Yeah, it looks like you are right. So this is just a classic case of me. making that up. - -30 -00:16:37,470 --> 00:16:58,860 -Wes Bos: broam is written in TypeScript and runs on node j. s. Rom has zero dependencies and has largely been written from scratch. Hmm, interesting. Zero dependencies is the new big thing is that there's not a whole tool chain of 40 node modules down. I would like to install them then and then see, like, what's in the node modules directory? One thing? Well, - -31 -00:16:58,890 --> 00:17:15,390 -Scott Tolinski: so here's, here's the quote, and this is like, the nachos connected to another Nacho with cheese. Is that one Nacho? Or is the two nachos? So like along with that, that same question? Like if you just bundle all your stuff up before putting it into your node modules? Is it one dependency? Or is it the 100? boundaries? It - -32 -00:17:15,390 --> 00:17:23,190 -Wes Bos: was before? In Canada, our version of that is when the timbits stick together councils one, even if the one is stuck to another one? - -33 -00:17:23,219 --> 00:17:28,340 -Scott Tolinski: I don't know why I thought you're gonna go butene. But nothing really falls apart in your area. Do you? - -34 -00:17:28,500 --> 00:17:42,510 -Wes Bos: Oh, yeah, we get put in is pretty big here. Yeah, yeah, we have this chain called smokes protein, which is just like after we used to go after the bar and get like, like an eight pound little box of protein. And you would just hate yourself the next morning. - -35 -00:17:42,540 --> 00:17:58,680 -Scott Tolinski: That's great drunk food. And we never had that in anywhere that I really, except for there is one place here in Denver that does a fantastic routine. But yes, I went, we went to Montreal for my brothers. My brother's bachelor party. So we definitely ate a bunch of protein. Oh, yeah. Great. - -36 -00:17:58,950 --> 00:19:33,540 -Wes Bos: Let's take a quick break for one of our sponsors. And that is Sanity available@sanity.io. forward slash syntax. Sanity is the structured content CMS for your next project. So what it is, is, it's like a, it's a CMS. So you sign up for Sanity. But the kind of cool thing is, it's a service, but you have control over both the front end of your application, obviously, is whether it's a reactor smelter, or view or Angular website, but then the actual editing experience is fully customizable, because they have this thing called Sanity Studio. And you can install Sanity Studio. And the code runs both locally on your own computer, as well as you can deploy it to Sanity. Or you can deploy it to your own domain name, you can deploy it anywhere. It's a react application. And I really love that because you you get the entire editing experience with Sanity Studio. But if you want to be able to control custom inputs, or theme it or do whatever you want, it's not just like, Alright, you have six color pickers and you're allowed to choose from these six colors. And you There you go, you customize it, no, you get you get access to all of the code, and you run it all yourself. So check it out on your next project. If you need a headless CMS for your project, check it out sanity.io forward slash syntax that is going to get you double the free usage tier, which is 200,000 API requests, 1 million API CDN requests, 10 gigs of assets and 20 gigs of bandwidth. So pretty generous free plan there for your next project. Check it out. Sanity io forced us syntax. Thanks so much to Sanity for sponsoring. - -37 -00:19:33,750 --> 00:19:35,280 -Scott Tolinski: Thank you Sanity. - -38 -00:19:35,489 --> 00:21:17,700 -Wes Bos: Oh, one thing I'm super stoked about is programming communities gaining some traction. So right now a lot of programming communities are either in slack or a lot of them have moved over to discord and those are awesome, but like I sometimes mourn the death of the good old message boards and forums and things like that. Right. And I think I've been looking around myself I've mentioned many times I want to move my slack to something else that is more of a real time message board than just a chat where things get lost. Yeah, after 20 minutes of talking, right? So I'm pretty excited because we've we're starting to see GitHub discussions pop up the Dev, to folks are really seeing this thing called forum fo r e m. And basically, it's just like they're open sourcing their entire platform. And it's like a Swiss Army Knife of running communities, you can make it whatever you want. It's really, really cool. I've been playing with it myself. There's another so that that one's open source, it looks like they will offer a hosted version as well, I'm not really sure about that. There's another one called circle. I think it is like what I hoped spectrum would have been. And I've been testing it out for my own community as well as a circle. So I think this one is more targeted at like kind of exactly what Scott and I do as well. So I'm stoked about that. Because it's bringing back the the form, think about how much we lost to slack, slack expiring chats, right, we I think we lost a lot of back and forth. And I would love for when somebody helps somebody, I would love for that to stay on the internet for at least five or six years so that you help other people only come in in the coming future. - -39 -00:21:17,840 --> 00:21:29,130 -Scott Tolinski: You know what this circle.so kind of reminds me of like, Facebook groups without Mark Zuckerberg greedy finger on that, you know? Really? Yeah, it's - -40 -00:21:29,130 --> 00:21:30,270 -Unknown: kind of me. Yeah. - -41 -00:21:30,270 --> 00:21:32,910 -Scott Tolinski: I mean, at least that's the vibe I get from looking at it. - -42 -00:21:32,940 --> 00:22:12,000 -Wes Bos: Yeah, kind of, I would say that's not what it is. Because Facebook groups have the same problem in that everything is not as temporal and then it's gone. The search son can't find it in Google. But yeah, and it's all all around a thread. And then when you get too many replies, the thread gets overwhelming. I hate Facebook groups, I'm part of so many of them, because that's unfortunately, where communities are right now. But this is what I'm hoping is this kind of like, like a really good forum, but with a lot of like real time nets layered on and on top of it. And so I think it looks pretty cool. I'm still between whether I'm gonna go with form or circle, I have to try it out a bit more, but get excited. - -43 -00:22:12,060 --> 00:22:28,620 -Scott Tolinski: Yeah, you know what it is, like you mentioned, it's like one of those things like it's what you kind of want it spectrum to be which never really fully materialized spectrum to me is just a big void. It's kind of crazy that so many, so many communities jumped on spectrum really early, when it was looking like it was gonna be awesome - -44 -00:22:28,650 --> 00:22:45,780 -Wes Bos: is because people were dying for a better alternative to slack and GitHub issues mash together, right? And then structure was supposed to be that but it just didn't even like max tweeted it. That's how I found circle. He tweeted it out being like, this is what spectrum was supposed to be. So I'm so excited for it. - -45 -00:22:46,200 --> 00:22:56,340 -Scott Tolinski: Yeah, discourse was always a decent option too. But it never seems like a ton of people use discourse. I know, the media forms on discourse. And there are aspects of it that are really nice. - -46 -00:22:56,520 --> 00:23:10,560 -Wes Bos: It's funny, like, I've tried out discourse, I've even installed it myself. But there's something about the UI about it. Yeah, no, I get that. I'm not sure what it is. But every time I'm on when I'm kind of irritated. Yeah. And I'm like, Ah, I'm not sure what this is. - -47 -00:23:10,770 --> 00:23:20,400 -Scott Tolinski: You know, one of the things is the Command F is overwritten. Like that. bugs me on that. Yeah. Like Wait, wait, and who is it gusto overrides the Command click and the gussto dashboard. I'm - -48 -00:23:20,400 --> 00:23:21,270 -Unknown: like, Why? - -49 -00:23:21,270 --> 00:23:45,660 -Scott Tolinski: Why would you do that? Like people? Okay, next up on my list is going to be something I think you have on your list too, because I did a little snooping. And oh, no, I shouldn't have done it. I'm like, Oh, it's a shaggy No. shaggy song was not I shouldn't have done it. It was it wasn't me. So it wasn't me. I wasn't snooping. I'm talking about more wisdom here. Wisdom bird stands for web assembly. What is the - -50 -00:23:45,660 --> 00:23:46,350 -Unknown: answer? - -51 -00:23:46,380 --> 00:23:49,500 -What is the N stands for and plasm for web assembly, - -52 -00:23:49,500 --> 00:23:52,890 -Wes Bos: a membeli, a member of the mumbly part of assembly really, - -53 -00:23:52,920 --> 00:25:12,330 -Scott Tolinski: there's nothing else there. I always thought it was like web assembly. So you know, Hypertext Markup Language, you know, something like that, but not. So when some is basically the ability to use other languages on the front end, or in the browser of your applications. And let me tell you, I found a taste of wisdom. I was kind of like, yeah, okay, who hasn't, we'll see whatever. I'm not a developer of any other languages, although I'm a hobbyist of a couple. But like, I'm not a great developer of any other languages. But when I saw, like, some of the coolest stuff that Mongo was doing in their app will using their compass app using rust and wasum. And I watched a talk and it looked like, wow, that was pretty easy. In fact, they were just doing the number calculation was one of them was one of them as they built a number calculation, some sort of thing that needed to run a lot of values really quickly, and they built it in rust. The rust program really wasn't that intense. They built it using Webpack. And then you were able to import the rest function as if it were JavaScript, get the correct typings and everything in it, and just use it like if it was JavaScript. So that's To me is really, really interesting. And I think though that world now that we're starting to see some wisdom in production in lots of places, I think we're gonna just see it even more. I think people are gonna be like, Wait a second. This is really really fast. I - -54 -00:25:12,330 --> 00:25:17,370 -Wes Bos: totally agree. I tried out the new 3d tool. Did you try that out? Oh, it was a call - -55 -00:25:17,400 --> 00:25:20,370 -Scott Tolinski: 3d tool spline. I have not tried out spline - -56 -00:25:20,400 --> 00:25:44,100 -Wes Bos: spline. Yeah, so spline is a new 3d tool. It's built in. It looks like it's built in react. It's funny, because as soon as it launched, I whipped out this. There's this tool called Charles. He went out. I whipped out Charles Charles allow you to sniff network traffic. Do you ever wondering like what an app who it's talking to? And what server Yeah, - -57 -00:25:44,100 --> 00:25:48,240 -Scott Tolinski: there's like Little Snitch was another one of those, but maybe a little bit more invasive? - -58 -00:25:48,450 --> 00:26:21,810 -Wes Bos: Yeah, Charles is more like dev tools for like the dev tools Network tab for your entire computer or for your iPhone. And you can also do SSL proxy monitoring. So you can like install your own cert. Anyways, I opened it up because I was like, what's this built in, and the entire application is hosted on Netlify. And it's just boxed into an electron app. And I thought that was bonkers. I found the URL and I just ran it in the browser, I was like, This is unreal, unreal, they can build a 3d app with wisdom and HTML, CSS JavaScript. So pretty excited about that very - -59 -00:26:21,810 --> 00:27:18,570 -Scott Tolinski: cool. New one I'm also excited about is one of our sponsors today. And this is one of our sponsors, that's going to allow you to see some magic happen in your browser, I'm talking about Log Rocket Log Rocket is the error an exception handling tool that allows you to see errors and exceptions as they actually happened. You get a session replay with a scrubbable video replay, including the network log and all sorts of information that you can use to detect what happened on your site. It's like being able to solve a mystery by seeing the crime happened. Wow, that sounds so good. Especially as web developers, we're often working in the dark with the earmuffs on. And with not being able to see anything in our surroundings are solutions a black box, we're just trying to fix the problem. And Log Rocket really makes fixing that problem easy. So head on over to Log rocket.com forward slash .TECH, sign up and get 14 days for free. Check it out. - -60 -00:27:18,960 --> 00:27:48,450 -Wes Bos: My next section here is that TypeScript will become extremely popular it obviously already is. But I think like the masses will find that it makes more sense to start a TypeScript project than just a regular JavaScript project, because of tooling VS code is just getting so dang good. With all of the tooling that surrounds TypeScript, obviously, being able to run it, no problem. And Dino is really, really cool. So I see it as a big year for TypeScript. - -61 -00:27:48,660 --> 00:28:49,770 -Scott Tolinski: Yeah. In fact, we just happen to line up perfectly on this one, because you see, my very next one on my list is TypeScript tooling will get even nicer, which is something I alluded to earlier on when we we talked a little bit about tooling in general, right? Like nobody wants to spend their time learning TypeScript, to learning how to get their tooling to work. Yeah, I want to create a dot TSX or a.ts file, we want to save it and we just want to have it work. And in for me, if you remove a lot of the barriers to entry around TypeScript, I think it is just totally ripe for really mass adoption. At this point, I really, really have a hard time going back to writing JavaScript anytime now. And it's crazy. If you listen to syntax, like a year or year ago, even when we're like, well, we'll see who the winner is, you know, yeah. And now I'm just like, I love TypeScript. And it's best friend, I bought at a really nice gift first birthday. I'm just very excited to be TypeScript friend at this point. So now TypeScript could just, you know, make their driveway paved, then more people will come over to his house. This is an extended metaphor. - -62 -00:28:51,180 --> 00:29:32,250 -Wes Bos: I like it, the latest version of VS code that came out, I think, at the beginning of December, when it rolled out, they changed something with the both with the auto import, and with the type hinting, and it got the purchase regular JavaScript I'm talking about it got so good. Like, it's obviously still not as good as writing TypeScript. But if you're using like, third party library, almost all these third party libraries that are popular ship types now and you can use those all in regular JavaScript, so like, just between that I think that will show people Oh, that's so nice to be able to use in JavaScript. Imagine he was even better in TypeScript. And so it's gonna be a big year for it. Totally. What do you got now? That - -63 -00:29:32,250 --> 00:29:33,150 -Scott Tolinski: was my next one. Are - -64 -00:29:33,150 --> 00:29:34,020 -Wes Bos: you running out? - -65 -00:29:34,140 --> 00:29:35,130 -Unknown: No, I'm not gonna. - -66 -00:29:35,400 --> 00:29:36,870 -Wes Bos: Oh, grab another one there. So well, it's - -67 -00:29:36,870 --> 00:30:51,420 -Scott Tolinski: funny because I'm snooping again, and I noticed your next one is about react. And my next one is also about react. However, both of ours are different. Okay, so I have to on react here specifically, maybe I'll go through both my two here just so we can save time. One scoped CSS in react will find some way to become better than it currently is. I have been on this for a little bit I think spelt CSS out. Or you just put a style tag, you get single page components. And it just works. style components are nice, but nothing is really quite dialed down in the React community as if there's always like a little bit of JavaScript barrier in between the JavaScript and CSS that would prefer just to have a little bit more magic there myself personally. And maybe that's a framework that solves that problem. I just think somebody's going to make single page components a little bit nicer in react, and we're going to get that scope CSS of my dreams. Now another one I think is going to happen, which I also think you might have something about in yours is server side rendering and hydration in react will become a lot better. Because anybody who's worked in server side in react, or even in the hydration, it's not a lot of fun. It's pretty intense on the computer when you're working in Dev, so I always turn SSR often Dev, I see remixes doing a ton there. - -68 -00:30:51,690 --> 00:31:31,530 -Wes Bos: Yeah, the whole like streaming react will be a thing. Instead of like thinking server side client side, it just works. And then it will stream from the server to the client. Not exactly sure how that's gonna look. But it's got to get better than it is now. Like, even right now, if you try to do something like anytime you have like a window, dot whatever, oh, yeah, it like breaks the entire bill, come on, you have to go get a special component for it to work. Like, you can't figure this out. Like they obviously are. But it's been like a year and a half, almost two years of us sort of waiting for what this is gonna be in react land. So I'm so pumped. And I bet 2021 is the year that we find that out. Yeah. - -69 -00:31:31,530 --> 00:31:42,900 -Scott Tolinski: And I bet that all connects somehow to suspense, and promise Based Rendering and react somehow, I'm thinking they're all related somehow. I don't know if it is, but - -70 -00:31:43,050 --> 00:32:47,910 -Wes Bos: that kind of ties into my own thing is like, I think we'll see. And this is, this won't be me, I doubt it. But I think we're gonna see people fall out of love with react just because of things like animation, scope, CSS, the server side rendering, there's a lot of stuff that has not gotten better and racked, ever. And there's all these other frameworks that are just slam dunking how to do this stuff. And I'm not sure if that's because react just says, Well, that's not our problem. We are the putting data in the DOM and updating the DOM, right? Yeah, people and you do the rest, right? Like this next jazz problem or something like that? Or if they say, Yeah, like, we've been looking at how to do that stuff. And we're going to show like, even the forms, why is it so hard to sync a value to state with the form input, right, like, come on, it should be a little bit easier to do that in react without having to install a whole bunch of stuff. So I think either people will fall out of love with react because of those reasons. Or we will start to see a little bit more magic added to react. Yeah, - -71 -00:32:47,910 --> 00:33:58,530 -Scott Tolinski: in various various ways. I agree. I think there will be something there. And I think maybe this is a related topic, but maybe you're gonna see more people on web components, because there are more web component based frameworks that are coming around whether that is like stencil or something. But there are more web component based frameworks out there that they're advertising. The point is, well, it's closer to the platform, you know, it is the platform, so why wouldn't you use the platform sort of thing? Yeah, we'll see. So my next one here is going to be markdown based formats like MDX are just going to continue to skyrocket and use because let me tell you, there's nothing better than authoring HTML with MDX. It's fantastic. I was doing a markdown post the other day, and I was like, Oh, I need to add, what did I want? I wanted to add like a counter to it, just like a simple counter. And I was like, Oh, yeah, this is markdown, like if the if this was an MDX file, I could just drop in a react counter into this. But because it was markdown, I was like, Okay, I'm, I'm in static land here. I think things like MDX, which is basically markdown with components inside of it. I think those things will continue to become more and more popular. - -72 -00:33:59,010 --> 00:34:50,640 -Wes Bos: I predict Gatsby will get some sort of server rendered streaming rendered on demand some way to get around the limitations of what Gatsby has right now is that it's entirely static. And now that next gas has the ability to do both. We talked about this on the whole next first Gatsby show. There's, there's like a data layer and whatnot. And there's still some benefits to Gatsby there. But I think that they've got to both to solve some of the pains of long build times as well as sometimes people do want to server render some of this stuff. I'm curious to see what they'll come out with in terms of hosted, hosted graph QL. On the flip side, I'm always curious, like, will next jazz ever implement some sort of data layer? Or is that out? Scott? Is that outside of the scope of what next? .js - -73 -00:34:50,640 --> 00:34:51,360 -Unknown: is? Yeah, - -74 -00:34:51,360 --> 00:34:55,190 -Wes Bos: I think it probably is outside, but I'm just gonna throw it on the table there. - -75 -00:34:55,230 --> 00:36:38,420 -Scott Tolinski: Yeah. Just toss it on the table. I think that's cool. I agree. I mean, I think for the most part What we're going to be doing next year around, I don't know, midway through the year, we are going to be having ourselves like a little bit of a next .js, Gatsby, and remix Thunderdome, where we're gonna have these platforms that are doing server side stuff. They're doing data, they're doing all sorts of stuff. And we're gonna have to say, all right, well, which one has what? which one has what? And I do think that will definitely be I think, here's the fun one, that might be a little bit of a change of pace here. I think augmented reality tech in the browser is going to continue to evolve and become much more thing that needs to be in your skill set, maybe not by the end of 2021. But I think it's going to improve like its market share will rise in terms of skills needed. because let me tell you, Courtney, was buying something from Target yesterday, and she had the she had the app up and was putting a picture on one of our walls with augmented reality. And I know people have been able to do this for a little while. But like, is this the website or the app, and she's like, this is the app. And I was just thinking, yeah, this is an aspect that web is going to be behind it, right? companies are gonna say I want to be able to see my artwork on the wall, I can't do that on the app, because I don't have the skills to do augmented reality. Now, I don't know what the status of this is. In current land, I've done a little bit of 3d, but no augmented reality. So I'm interested in checking out more about these API's, I think augmented reality is going to be something that the native app makers are going to be running wild with, while we're still held back just a little bit, but I think we need to push it, - -76 -00:36:38,690 --> 00:37:28,290 -Wes Bos: I'm gonna kind of tell them that with augmented reality, becoming easier for us just regular web devs. I think that somehow I don't know how, but AI will also become a little bit easier because I was thinking the other day, like, you know, when you search on a website, and you misspell it, but it still finds what you meant, I was just sitting there thinking like, Damn, that sucks that we can't just do that in the web. You know, like we you have to like, go get algolia or some sort of set up some sort of Docker container that will learn from you. And, Mike, is there not some sort of like smart, like some browser based thing or like some way to do that just in regular applications? Where it's not a huge undertaking? I don't know. But I think AI is getting huge in every industry, just like you've seen the noise cancellation AI. Have you seen that? - -77 -00:37:28,559 --> 00:38:04,190 -Scott Tolinski: Yeah, I have. Yeah, the What's it called? It has the name, r TX voice. It's called exploits. any of that stuff for me, I think is poised to at least grow in some sort of capacity. Because I say this as somebody who really wants it to happen. But then I'm thinking about it. On how many websites in 2020 still have really terrible search. I can think of a lot. Yeah, there's like a lot of things. We're all search. But like even like, What is a giffy? Like, giffy, you search a two word thing. And it only searches for the first or the second word like you can search this as a phrase Come on. - -78 -00:38:05,730 --> 00:38:06,690 -Wes Bos: That's a good point. - -79 -00:38:06,860 --> 00:38:09,270 -Scott Tolinski: And so might be a little bit optimistic on our part. Yeah. - -80 -00:38:09,570 --> 00:38:11,210 -Wes Bos: Maybe this is just our wish list. - -81 -00:38:11,420 --> 00:38:12,210 -Unknown: Yeah. Right. - -82 -00:38:12,210 --> 00:38:17,400 -Wes Bos: Do you have any predictions for next .js? What's gonna happen with that in 2020? We - -83 -00:38:17,400 --> 00:38:27,030 -Scott Tolinski: have no predictions for next .js. I think whatever the React team is doing around server side rendering, if they are in fact doing something around server side rendering, I think that will will dictate - -84 -00:38:27,090 --> 00:38:38,880 -Wes Bos: that will be what we get. Yeah, that's true. I think the image component that they released will probably get a lot better. But past that, I still want them to do some sort of CMS but I don't think they'll ever do that - -85 -00:38:39,090 --> 00:39:39,810 -Scott Tolinski: board. But no, I don't have anything on on next year. Specifically. Now I have one on VS code is going to continue its dominance. VS code will continue its market share dominance, it is going to continue crushing foes as it invests in cloud shared code environment, so that people can start coding easier on their iPads or their phones, whoever would want to do that. What was there was a demo of some app that I just saw the other day was like a decentralized repository for your code. And it used this really neat thing where people were able to do sort of like a multiplayer mode and their code. And I was just thinking multiplayer mode in code, kind of like it is in figma. is gonna happen. Yeah, we're gonna be able to pair code just like you said, with like, remote work things being easier. We're gonna be able to pair code where we're all typing on the same files and saving and then we're getting, you know, point 05 millisecond hot reloading on to our ESM bundles and shipping it. It's gonna be cool. - -86 -00:39:40,050 --> 00:40:01,400 -Wes Bos: Yeah, code space is what VS code is already working on GitHub code spaces were what will be the day where we don't even have VS code as an icon on our dock, but you just visit the URL. That will be interesting day. It's coming for sure. It's funny VS code. I was just thinking it's like, isn't it funny how VS code just tricked us Using an ID - -87 -00:40:01,730 --> 00:40:08,670 -Scott Tolinski: just ID light for a little bit, and then they're like, well, we'll just go a little bit more than one. Next thing you know, you're using WebStorm with a - -88 -00:40:09,030 --> 00:40:57,170 -Wes Bos: little bit of TypeScript. Yeah. It's true. So good on you. Good on your vs. Code. Yeah. What else we have here, just some CSS predictions, I predict color functions we will get, I think people will use more built in features. Like I posted a screenshot the other day where I refactor style components like theme props, and like using a theme provider and style components. I just refactor that just using CSS variable, yeah. And a lot of people were like, oh, you're not using that? Mmm, like No way. css variables are their native. They just work. It's an OK syntax with the dashes. I'm used to it. Now. So big fan of that. And like, that's the idea is that eventually you stop using a lot of these transpilers. And you just get CSS like one day, maybe we'll even get scoped CSS. - -89 -00:40:57,170 --> 00:41:07,080 -Scott Tolinski: And honestly, CSS variables to me are just endlessly better in every capacity than a theme function or whatever. And styled components, or - -90 -00:41:07,109 --> 00:41:08,420 -Unknown: even for rounding, - -91 -00:41:08,880 --> 00:41:12,980 -except for rounding. Did you see that all rounding corn? - -92 -00:41:13,400 --> 00:41:32,690 -Wes Bos: know somebody on StackOverflow asked, like, how do you round a value with CSS? And they had this like, insane calc function? I was like, Yeah, but like, why would you ever want to round? I guess, if you wanted to, like, I couldn't think of a reason why I wanted to round but I thought it was hilarious. I'll try to look it up. - -93 -00:41:32,690 --> 00:42:31,170 -Scott Tolinski: Yeah, please do. My prediction was that people are going to use and love seriousness variables. because let me tell you, man, I have a course on CSS variables. For those of you out there modern CSS design systems where we create design systems with CSS variables. And if we had like a, which we don't, if we had some sort of way to gauge the feedback that we've gotten on every single course, that is by far my most appreciated course this year, people really are blown away by what you can do with CSS variables. And I'm considering making a second part to it. Because there's a lot more you can do. For instance, we started detaching our colors to be hlsl a and then storing different parts of the variables as like I have a hue and saturation variable and then a lightness variable. So that way, we can do our own pseudo color functions by plussing, a percentage amount to a function in Eden calc, and it works really nicely. The whole system is just amazing. I have so many thoughts on CSS variables, - -94 -00:42:31,680 --> 00:42:39,060 -I'll save them for later, but I really love them, I think people are gonna continue to, to love them. And man, they are just very, very nice to work with. - -95 -00:42:39,650 --> 00:42:42,540 -Wes Bos: What about serverless, any predictions there serverless - -96 -00:42:42,980 --> 00:43:13,800 -Scott Tolinski: will continue to grow and evolve. And becoming easier and easier local development with serverless will get easier. The amount of platforms that make you have to think about lambda functions, less the amount of like, just, you know, the ease of use that we've seen already with serverless. like not having to think about it. Like I think most front end developers don't even want to think about it at all. They just want to have it be served to the most people as fast as possible, and be able to scale. And I think that's what we'll see. - -97 -00:43:13,940 --> 00:43:45,870 -Wes Bos: Did you see the other day, I just saw this today was Netlify rolled out a plugin that allows you to run next .js on Netlify. And not not just like next .js static version, but like, server rendered, and it runs all entirely in serverless functions, which is besides the serverless framework. That's the first time I've ever seen the ability to run next gas as serverless functions, instead of just a regular note app when you're outside of oversell hot, hot, hot. What else do we got here? - -98 -00:43:45,900 --> 00:45:30,420 -Scott Tolinski: We have time for our third sponsor of the day, which is a new sponsor. And this is a new sponsor, but not a new company by any means. Because I'm talking about linode and linode has been doing the dang thing for a long time. Do people still say dang thing? And 2021? Is that a thing? Oh, yeah. linode is just one of these cloud hosting providers that has been really innovating for a very long time. So whether you're working on a personal project or managing enterprise infrastructure, you deserve a simple, affordable and accessible cloud computing solution that allows you to take your project to the next level. They are talking my language right there. Simplify your cloud infrastructure with linode Linux virtual machines and develop, deploy and scale your modern applications faster and easier. So today, you can get started with linode with $100 free credit, which we all know in the VPS world will get you a very long ways because virtual private servers especially companies like linode are cheap. So $100 in credit is going to get you a lot of stuff. So you're going to want to head on over to linode.com forward slash syntax. That's Li n od e.com forward slash syntax linode has 11 global data centers and provides 20 473 65 human support with no tears or handouts, regardless of the plan size. In addition to shared and dedicated compute instances, you can use your $100 credit on an s3 compatible object storage, managed Kubernetes or more. So check it out linode.com forward slash syntax, click on the Create free account button to get started. Thank you for linode for sponsoring. - -99 -00:45:30,720 --> 00:46:19,650 -Wes Bos: Next one I have here is enterprise jam stack. This is a little bit tongue in cheek but I think that jam stack will become becoming more and more popular. I saw the other day that CloudFlare is rolling out like static hosting in the whole like build process online, which is pretty nifty. So I think like the big players are now taking note of jam stack. It's sort of outside of our whole like, people that listen to this podcast. And now I think that it is a is a much bigger thing. And we're seeing a lot of people see the benefits, especially with tools like next Gatsby sapper, whatever spelt smelt kit, it's pretty exciting to see both serverless and statically rendered or statically. refreshed pages be so easy to build word. - -100 -00:46:19,830 --> 00:46:30,270 -Scott Tolinski: I think that is it for our predictions. I think we'll come back to you later in the year to see how we did on these predictions just like we did, unless you have any others you'd like to touch on. - -101 -00:46:30,359 --> 00:46:46,050 -Wes Bos: I just asked on Twitter, a couple of people said progressive web apps are finally a thing things over thing. Maybe Apple will finally Yeah, they are but Apple always cripples them. That's the frustrating thing about everybody using an iPhone. So maybe progressive web apps will be - -102 -00:46:46,410 --> 00:47:16,560 -Scott Tolinski: an even bigger thing. What do you think is going to happen first? Do you think that electron based which is already happened, but electronic like apps and native apps that are written in web .TECH? will be more popular than pw A's? Or do you think pw A's will ever be more popular than web apps that have been bundled into be a native platform? Because I just don't know if I see without companies like Apple like adding pw A's to the app store? I don't see that like ever taking off? - -103 -00:47:16,830 --> 00:48:01,500 -Wes Bos: Yeah, that's, that's a good question. Because you can take like we talked to the missive folks and their app, I was surprised to hear that it was JavaScript, HTML, CSS. So like you can do that now. And it seems like every month now I hear about a new app that Google Whoa, this is this is actually a not necessarily React Native app, but like this is just JavaScript running inside of some sort of shell. So I probably will see that I don't think Apple will ever want you to go around the App Store, because that's how they make a lot of their money. But as long as as long as we can still just build our apps in HTML, CSS, and those things get better and faster and consume less memory and less resources and things like that. I think that's probably where, where we'll see it. - -104 -00:48:01,500 --> 00:49:24,420 -Scott Tolinski: Word. Cool. So let's get into sick pics, the part of the show where we pick things that are sick. Let me tell you what, my cup has been overflowing with sick pics, I cannot keep track of them all. I have too many. So I've been having to write them down in like eight different places. So much stuff to the point where it's like getting a little absurd. Let me pick one that is going to be really nice. For those of you who are looking for something fun to watch. No, nobody likes to talk about how everybody's all stressed out right now because of the current situation. So Courtney and I have been like only watching funny things or fun things because anything else is just too intense. So we've been watching Ted lasso on Apple TV. And man, that is a delightful show. Wow. It's stars Jason Sudeikis. And it's about he's a football like a college football coach who gets hired to be the coach of a premier league team. And he he has to go to England and and sort of manage the fact that everybody hates him, and all sorts of great things. But he's like this unbridled positivity in his way of doing things is just totally infectious. And we were completely hooked after completely hooked after one show. And then just like binge it after two and then by the time that we ran out of episodes we were just very sad that it was done. But they've been signed on for two more seasons. It is very very good. - -105 -00:49:24,810 --> 00:49:49,500 -Wes Bos: Oh, check that out. I got a sick pick something that you sick picked, I think or mentioned a couple a couple weeks ago a couple months ago and it's this newer dimmable 480 LED so like I went down the rabbit hole of of lighting. And I almost got the key light and you're like no don't there's better ones. - -106 -00:49:50,310 --> 00:49:56,280 -Scott Tolinski: Like rebranded like, you know, I mean it's marked up definitely marked up, even though it is cheap, - -107 -00:49:56,520 --> 00:51:06,810 -Wes Bos: and I couldn't like find like whatever the equivalent was just because of how they make it. And somebody on Twitter said like, Alex, excellent, I'll thanks so much for this. He said, You don't have to like light your face directly just bounce it off a wall. And I was like, Oh, that's a great idea. And I was like, Okay, I need like a super, super bright LED, and I bought a couple of them and returned them. And then finally, I was like, Scott, what's the one you have? Again, he sent it over. And like that was it because it's, it's got a dial for like the warm LEDs as well as the dial for like the cold bright light. And you can mix it just perfectly, because that's always the problem I had is that like, sometimes I come on, like very pale, or to read. And this allows me to dial that in. And this thing is awesome. It's just like the sun. And I can just I can bounce it off off my wall. And my video got so much better from it. And Scott's had this thing for years now. And it's great. I love it. So it's the newer dimmable by color led they have 480 ones is the sun they've won 660 LEDs, which I imagine is like Tucson Yeah, - -108 -00:51:06,810 --> 00:51:10,800 -Scott Tolinski: it's probably actually starting nuclear fission in your office. - -109 -00:51:12,840 --> 00:51:27,450 -Wes Bos: Yeah, so big fan of it, we need to do a show on our setups now that I think I'm pretty, pretty happy with my audio video setup right now. Specifically video. I've had my audio dialed in for years now, but I'm pretty happy with my video now. Yeah, - -110 -00:51:27,480 --> 00:51:50,730 -Scott Tolinski: I have recently rearranged my entire office, you you can tell us because you're now seeing my whole back, my whole set that I created is smaller and a little bit shifted in the wrong direction. So I'm gonna have to shift my set to match. And my setup is really dialed in. People were always really getting on me about my exposed cables and my cables are at tidy as a team. I - -111 -00:51:50,730 --> 00:52:00,540 -Wes Bos: hate the cable, the cable shamers cables, cable. Let me just say cables are beautiful. And you should never shame somebody for having a plug in their computer. Yeah, - -112 -00:52:00,570 --> 00:52:21,270 -Scott Tolinski: I got one of those little lick racks. I screwed it in. And I just shoved all my cables into there. So guess what? You cable people like those cables. They're still there. They're just all shoved into a rack. So you can't see. And I hope you think about that. So that's awesome. I'm glad you like the light this these things are fantastically small and just then and just amazing. So - -113 -00:52:21,360 --> 00:52:27,510 -Wes Bos: way smaller than I thought tiny. Yeah, it's like maybe what like maybe eight inches by eight inches. - -114 -00:52:27,540 --> 00:52:36,420 -Scott Tolinski: It's maybe a foot by a foot looking at my foot and then looking at the light. I actually might have the bigger one, but I'm not sure which one I have. Either way, mine's a foot. Yeah, cuz we're just by a foot. If - -115 -00:52:36,420 --> 00:52:39,900 -Wes Bos: when you showed me a photo of yours, it looked bigger. - -116 -00:52:40,110 --> 00:52:41,670 -Scott Tolinski: Yeah, it's potentially. - -117 -00:52:41,850 --> 00:52:49,920 -Wes Bos: It's awesome. So yeah, check it out. I'm excited to do a show on video now. Yeah. So okay, shameless plugs, level up. tutorials.com. - -118 -00:52:49,920 --> 00:53:29,670 -Scott Tolinski: We have just new courses out 24 seven here. The latest course at the time of recording this video, or this podcast, which is months ahead is Dino 101. For web developers. And let me tell you, this course is for those of you who hear the words Dino and maybe don't understand why you would ever want to use it or where it fits in or how to even get started. We talk all about writing your first line of Dino code to exactly what the heck that permission model is doing, how we can import and load things, what the standard best practices are, and how to get started writing your own web server that serves static as well as the API's. - -119 -00:53:29,760 --> 00:53:51,780 -Wes Bos: All right, I'll stick around shamelessly plug all of my courses that West boss comm forward slash courses got a list of all of my courses. And you can use the coupon code syntax for 10 bucks off that. Alright, that's it. Thank you so much for tuning in. And we will catch you on Monday. Peace, please. - -120 -00:53:53,520 --> 00:54:03,270 -Scott Tolinski: Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax317.srt b/transcripts/Syntax317.srt deleted file mode 100644 index f8ec90ea2..000000000 --- a/transcripts/Syntax317.srt +++ /dev/null @@ -1,80 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,149 -Announcer: Monday, Monday, Monday Open wide. Get ready to stuff your face with JavaScript CSS loadmodule BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is when Sarah kouga bombs and Scott Tolinksi - -2 -00:00:25,890 --> 00:01:08,220 -Scott Tolinski: was the deal with void. In this episode of syntax, this is gonna be the show about nothing and that's a Seinfeld joke off the top for you as my my best Jerry that I could do. Yep, we're gonna be talking all about nothing in this episode. And I'm not talking about absolutely nothing I'm talking about no undefined void false zero non non non bread, empty arrays, empty objects never all sorts of values. That could mean the things that do not exist. In fact, I would love to have a zero zip nada inside of JavaScript as well. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, and with me, as always is the West boss. - -3 -00:01:08,280 --> 00:02:38,550 -Wes Bos: Hey, everybody. Today we are sponsored by two awesome companies Prismic. And Log Rocket, let me tell you a little bit about Prismic. Well, you know, Prismic, it's a headless CMS gives you a graph qL API, you log in and create your content types. And it gives you an API out the other end, they have a newish feature that is called slices, I'm going to talk to you about that. And they allow you to define dynamic zones to allow your content writers to compose richer page layout. So this is actually a problem I used to have. And a lot of CMS is where you want to allow people to click together different pieces of content in order to make a page, right. And if that's the case, you can't just give them very rigid, like, here's your title, here's your hero, you can upload one image and a call to action text, right? You want to be like, Alright, well, I want a call to action button here. And I want to embed a video here and I want to have a gallery or can upload multiple pieces. That sounds like a content type. Those are just collections of different parts of a page that can be added in any order. So it's really slick because Prismic has added this thing called slices that allow you to have both non repeatable and repeatable pieces of content that can be added in any given time. And it makes it I think it kind of makes it like a page builder. So I want you to check out Prismic and the new slices feature@prismic.io forward slash syntax. And they've got a whole bunch of really good examples on there. Thanks so much to Prismic for sponsoring, - -4 -00:02:38,660 --> 00:04:04,440 -Scott Tolinski: cool. And this show is also sponsored by Log Rocket at Log rocket.com. forward slash syntax, this is the place where you can see all of your bugs happen in a visual scrubbable video replay is the access to the network log, the error log, the Redux store, if you have one, it also connects with all of the services that you know and love. In fact, there are so many services that it connects with, you can just check out their list on Log rocket.com. And it's going to show you exactly how it can connect it with all of these services that you probably may already have in your application already. Now, it also works on premise or in the cloud, I use the cloud version myself, it is very easy to get up and started. So check it out at Log rocket.com forward slash syntax and you will get 14 days for free. So check it out. Alright, let's get into this whole thing about nothing, right. And I think the easiest one to start off with is undefined. Now sometimes people feel like undefined is like a value. I mean, it can be set as a value. But like undefined means that the variable has been created, but it has not been given a value it is undefined. It does not have a definition. So if you are to create a variable, let's say you say var Scott, that's it var Scott semi colon, the value of Scott therefore then becomes undefined, the variable - -5 -00:04:04,440 --> 00:05:35,040 -Wes Bos: has been created, but not yet set. Same thing with a function that returns nothing will return undefined to mean that it did not return anything. So I like to think of undefined as being implicitly nothing, meaning that you've created it, but you've not yet set anything to it. So it is implicitly nothing. Whereas on the flip side, we also have no and no is a value of nothing. Yeah, it's a show about nothing. So that is explicitly nothing. Nothing is no until you explicitly go and set that thing to be no so what's the difference between null and undefined? No explicitly has a value of nothing. undefined does not have value. So no is a value of nothing. undefined does not have a value. You can set variables to be either but that's where it gets confusing to people because like Okay, I get it, but what about If I want to set something to be nothing like I have a variable, I want to set it to be nothing, you can set either to be undefined or null. And the way I think about it is if you want to set like a score variable to nothing, then you set it to No, if you want to unset something, meaning bring it back to its original state of not being set, then you set it to be undefined. And then finally, I always like to mention this, when we talk about them the double equals that's the one time where you could use a double equals, and that will allow you to check if a value is either set to null or undefined. - -6 -00:05:35,100 --> 00:06:54,930 -Scott Tolinski: Let's talk about void. Now. I don't know how much you've seen void in just normal JavaScript because I see an hour time and type definitions. You know, me I've been used things like react three fiber react spring a lot. Yeah. And the guy who created both of those Paul Henschel, he uses void somewhat frequently in his JavaScript code. So it's very funny, sometimes they'll be on like, code sandbox to look at a, an example of code that he's written. It's funny that I pull out him directly as an example, I don't know if he would even see himself this way. But like, as if this is some sort of an identity. But I noticed the most of the I saw a void being used was in a lot of his code pens, and I always be like, what, what is this void, like what's going on with void. So what is void? void is basically, in my understanding of it, at least the way that I've used is you use void when you want to say, this function returns void and returns absolutely nothing. And primarily, you'll see it being used a lot in TypeScript capacity being used in like, maybe you have like a react state function where that state function is setting the state, but it's not necessarily returning anything. So when that function gets passed into another component, you would define that as well, it could be just a function that accepts these parameters that returns void, - -7 -00:06:55,020 --> 00:08:32,730 -Wes Bos: yes, or returns nothing. So in JavaScript avoid can be used to ignore the return values of a function, which is kind of interesting. I've never used it myself. But if you have a function that returns three a number, you can, before you call it, you can write, like, let's say you have a function called Get a number and that function returns three, you could say, void, get a number, and then that will always return undefined, no matter what that function does. So it allows you to mark it as that one kind of neat example I did see I asked on Twitter is that you can pop it in front of an async function inside of a use effect. So with use effect, if your use effect function returns anything that is then used as the cleanup function, when this thing is unmounted, run this function, and that can get you in hot water if you have an async function as your use effect function because an async function, even if it returns nothing, it always returns a promise, right? Because if you mark a function as a sink, it will immediately return a promise, right? That's the default there. That gets into trouble because you can't have a sync function in use effect, which is weird. Some people say, if you just want to do something on component mount, and you don't care about updating, and you don't care about unmounting, or cleaning up, then you can pop a void in front of it, like fetching lists of people are fetching some data on Mount, you could pop a void in front of it, which I thought was interesting. The last one we have here is people all the time they say put it on a link like a ref equals JavaScript void. Oh, yeah, - -8 -00:08:32,730 --> 00:08:34,830 -Scott Tolinski: I guess I have seen it that way. Yeah, - -9 -00:08:34,860 --> 00:09:12,690 -Wes Bos: you shouldn't be doing that though. Because if your links go to nowhere, they shouldn't be linked, right? They should be. That's accessibility issue that screws with people's tabs. It should be a button if that's what you want it to do. So you can do that. And another thing people said is, you can do like a quick and easy prevent default on forms. So if you have a form where you don't want it to submit, normally, you'd normally put at prevent default on the on submit, but you can also use JavaScript void on the on submit, I don't think I would use that because I if I don't want the form to submit normally. Then I caught up on submit handler and prevent default anyways, but kind of interesting. - -10 -00:09:12,770 --> 00:09:36,020 -Scott Tolinski: Interesting. Totally. Yeah. All right. Well, let's talk about the next one, which is going to be within TypeScript specifically. And this is the never type. Now never is interesting to me, because every time I see it pop up, I'm like, I don't necessarily understand in which case you would create something that will never, it's a little bit confusing, because never it really means exactly like what it will sound like. - -11 -00:09:36,020 --> 00:10:39,530 -Wes Bos: So the way I see it is that some functions will never return. And that's not to say some functions return nothing that's undefined. That's what avoid is avoid is when you don't care about what comes back or returns nothing undefined, but never is when the function will never return anything. And the cases of that happening are if the function throws an error, if you throw an error that function does doesn't return anything it, it throws an error, and you have to deal with the error. Or if you have infinite loops, like a while loop, that's when you would use it. And then I finally I found if you have an unreachable variable, like if you have an if statement, if true is equal to false, then let var equals this will never be set, then I don't know, I've never run into that I've never run into that. Yeah, that is the reason why they are there. And I could see it with functions. There's a differentiation between void, which is if you don't care about the return, and it is undefined, and never meaning that function will never actually return a value. - -12 -00:10:39,650 --> 00:11:20,700 -Scott Tolinski: Yeah, in I've never written a never typed myself. tools that I've used to generate them or generate types have popped in and never here and there. And I see it in my own types, or I see it in third party libraries types, and I'm like, okay, and never has a value or I think I understand it a little bit better. Now after talking about this. I don't know if I would jump to write it. Maybe it's one of those things that the moment you have a use case for it, I felt just clicks into place. So you have a note here that we wanted to talk about falsy values now and like this is just sort of like other falsy values. And this is really funny hear this. So like zero and negative zero? did, I did not know that you could have a negative zero. - -13 -00:11:20,760 --> 00:11:25,230 -Wes Bos: Yeah, me neither. I don't think I've ever had that. I've never - -14 -00:11:25,230 --> 00:11:35,550 -Scott Tolinski: even thought about the idea of negative zero. And really spending too much time thinking about negative zero is gonna put me into a weird place mentally. - -15 -00:11:37,440 --> 00:12:16,830 -Wes Bos: So JavaScript does have this concept of false values, meaning that like, we obviously have false values, which is false. But then we also have other values, which are equate to false meaning that if you use them in a conditional like an if statement, or something like that, they will evaluate to being false. And zero, negative zero. I also learned zero n, which is the big int. If you're ever working with big numbers in JavaScript, there's some max value that numbers will go to in JavaScript, if you need to go bigger than that you have to use begin. And zero n is the zero equivalent in big end. So that was interesting. - -16 -00:12:17,070 --> 00:12:20,970 -Scott Tolinski: Now it's interesting here, I have an obscure falsie value for you. Yeah, - -17 -00:12:21,000 --> 00:12:24,810 -Wes Bos: false. Haha, yeah, false false is false E, - -18 -00:12:24,870 --> 00:12:43,050 -Scott Tolinski: which is so is an empty string, which is, you know, I always love when an empty string is equated to false, because like, it makes it a lot easier to not have to check for the length things or whatever. It's just one of those things where you're like, Oh, yeah, strings have got my back and empty string, obviously, it's going to be false. Right? - -19 -00:12:43,200 --> 00:14:39,090 -Wes Bos: All the things we have people asked about was an empty array is not falsy. An empty array is a value, it's just empty, right? But if you want to check if an array is empty, and array has nothing in it, then you check for the length attribute, and that will return a number. And then like we said, zero is a falsie value. So an empty array on its by itself, not a falsie value, but its length of zero is false a value. Yeah, if you ever see that, if an if statement, and they're just checking for if blank dot length, then they're basically saying, Hey, is this thing empty or not. And likewise, an empty object is a truthy value, an empty object is still a thing. It still exists, right? unlike an empty string, which exists as the thing but it equates to false an empty value will exist as an object, and therefore it is equal to true if you want to check if an object has things in it, you can just use keys or object keys and pass the object. And what that will do is it will return you an array of all of the properties or keys on an object. And then that will Furthermore you can use the length on that to check if there are values. So you would say if object keys, my object dot length, and that will tell you if there is anything that has been set on the actual object. And you also don't have to worry about like prototype pollution. That used to be the case when we use for loops in objects. If you had any custom prototype methods on that object, then that object might not have the property itself. But the thing that it was instantiated from or constructed from will have it on there. And that's not the case with object keys. Like that's it. All right. Thanks for tuning in. I appreciate it. Hopefully you learned a thing or to come back to reference this one. There's that's a definite interview question. explain the difference between undefined and null. And we'll catch you later. Hey, please. - -20 -00:14:40,800 --> 00:14:50,580 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax318.srt b/transcripts/Syntax318.srt deleted file mode 100644 index 3a979e06b..000000000 --- a/transcripts/Syntax318.srt +++ /dev/null @@ -1,656 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:10,530 -Unknown: the podcast with the tastiest web development treats out there. strap yourself in and get ready to whiskey and West boss, - -3 -00:00:10,559 --> 00:00:58,830 -Wes Bos: everybody. Welcome to syntax. This is a live podcast, we got free that we did at react athon. So we're gonna cut over to that real quick, but we are sponsored today by three awesome companies. First one, the new one magic Bell the embeddable notification inbox Freshbooks, which is cloud accounting and century which does error an exception you know that but they do performance monitoring now as well. We'll talk about all of them partway through the episode. Welcome to the scary voice again. Welcome to syntax, everybody. Spooky. Thanks so much for everybody for tuning in. My name is Oh, no, we have slides for this. Welcome, Scott. How you doing? Dude, good luck behind the scenes of how unprepared we are. - -4 -00:01:00,090 --> 00:01:06,450 -Scott Tolinski: We didn't even clap. Oh, yeah. Put your hands up, take your hands up. And I put my hands up. And I was like, oh, we're gonna clap. No, clap. All right, let's - -5 -00:01:06,450 --> 00:01:12,420 -Wes Bos: do the club ready? 321. That was the best cop we've ever done. - -6 -00:01:12,930 --> 00:01:13,530 -Scott Tolinski: Not for me. - -7 -00:01:15,450 --> 00:01:28,530 -Wes Bos: Awesome. Well, let's get into it. Thanks, everybody, for coming out. This is super fun. We've got a lot of interaction today. So make sure that you're glued to the chat. And we also have some q&a and some stuff. We got links coming up in just a sec. - -8 -00:01:28,560 --> 00:01:49,740 -Scott Tolinski: Yeah. So to answer your question from a minute ago, I'm doing good. Good. I'm doing very good. Those of you who are listening on the podcast, this is being an originally recorded at react athon 2020. So shout out to everybody who's listening in to a post fact. But this is going down live right now. How do we want to kick this off? Wes? - -9 -00:01:49,800 --> 00:01:53,580 -Wes Bos: I think let's let's get into intros and then we'll get into the show. - -10 -00:01:53,700 --> 00:02:06,060 -Scott Tolinski: Well, okay, for those of you who have never heard of syntax, we are a twice weekly podcast. And on Mondays we have 30 minutes or shorter episodes we like to call tasty treats. - -11 -00:02:06,060 --> 00:02:13,740 -Wes Bos: And on Wednesdays, we've got tasty treats. That is our hour long. screenshot. And Scott, you got your cursor in the middle of the slide. - -12 -00:02:15,360 --> 00:02:29,780 -Scott Tolinski: My name is Scott Lynskey. I'm a developer from Denver, Colorado, you can find me at s t o LINSK. I just about everywhere, Instagram for dance moves and Twitter for code moves. - -13 -00:02:31,410 --> 00:02:45,750 -Wes Bos: My name is Wes Bos, I'm a full stack dev from Canada by tweet most recently fleet until they shut it down. And in Wes Bos leading down now they're not but it's not taking off as well as I thought it would. So we'll see - -14 -00:02:45,810 --> 00:02:47,009 -Scott Tolinski: I fleet fleet. - -15 -00:02:48,750 --> 00:02:59,130 -Wes Bos: Alright, what do we got next? So today's live podcast, what do we got on the gamut, we're gonna have All I want for Christmas in react JS or nay s where you - -16 -00:02:59,130 --> 00:03:11,280 -Scott Tolinski: have to decide if the library that we're referring to is a real JavaScript library. Or if it's fake, if we made it up, or if it's potentially something else, as well as a JavaScript library, - -17 -00:03:11,310 --> 00:03:21,270 -Wes Bos: we've got underrated versus overrated, where Scott and I talk about hotness you hear about often, and we're gonna give our opinion of whether you should spend your time on it or not, - -18 -00:03:21,330 --> 00:03:54,270 -Scott Tolinski: we're also going to be doing a fun game that we prepared. And I'm actually really excited about this one, because we have not talked a whole lot about it. But we're doing something called syntax error, where Wes and I are going to throw up a code that has a small error in it somewhere. And we're going to have to try to find it without codice styling or anything like that. We've got JavaScript hot take tweets, that's all I'll say about that for now, JavaScript pod take tweets. And we also have Q and A with Scott and West that Q is me. And the a is West in this one - -19 -00:03:54,330 --> 00:04:13,350 -Wes Bos: for the q&a. We've got a link. So if you have a question you'd like us to answer go to pigeonhole at forward slash tasty. There's two things on there, we're gonna play a little polling game in just a sec. And then there's also a q&a, you can add your questions in there. So if you've got something already, throw it in there, and you can upvote the good ones and whatnot. - -20 -00:04:13,380 --> 00:05:00,830 -Scott Tolinski: So let's get into the content here. The first thing we're going to be doing is All I want for Christmas in react is, and these are fun things. And if you think some of these things should not be added to react, that's cool. I think these are just sort of some things that maybe we've seen either elsewhere, or just things that we think could be better that we really like, we'd love to see my act. So the first one, I think this is be on top of a lot of people's list would be suspense for data fetching. You know, they're just an endless amount of jokes you could make about being in suspense about suspense, but I'm not going to go there. Once you use suspense for data fetching, or at least give it a little try, it's really nice to use, and I would love to see more of this but, man, and I think we're just going to be waiting For a little while, - -21 -00:05:00,870 --> 00:05:39,870 -Wes Bos: yeah, I don't I don't know, I just wish that we knew what the status of what it was. Or like, I know, they're just trying to spend their time to see like, make sure that they make the right choices and the best approach. And we have all this like possible server streaming stuff that's coming. So pretty interested to see what comes of that. Next one we have here is unmount animations. This is a general theme for me and react is that I look over at as that meme where I look over at some of these other frameworks, it looks nice. Like, I kind of wish that a lot of this stuff was just built in and you didn't have to use third party library. I wish there was just like a first party way to do this, this type of stuff. And I don't even do a lot of animations. I don't Scott, you do lots, right. - -22 -00:05:39,900 --> 00:06:13,740 -Scott Tolinski: Yeah, I do lots and in specifically, the unmounting animation that kills me so many times, because like if you're nested deeply, and you want to control like the delay, like even a point 03 second delay unmounting a component, it's kind of difficult to like really orchestrate that. And it's not like it's not doable, we have things but if you are several components deep and you want to unmount, the parent component orchestrating something nested like that, not superduper easy to do still, - -23 -00:06:13,830 --> 00:06:17,310 -Wes Bos: this next one, I'll let you take because I know this is your, your baby. - -24 -00:06:17,460 --> 00:07:08,430 -Scott Tolinski: Yeah, well, okay, so I would like to see single file components, which like, doesn't necessarily say that I need single file components. And really what that is, is the idea that you have a file and the framework and understand a little bit more about the application or that specific component just by the nature of the fact that it's in a file. The obvious example of this would be something like a style tag in a spell file, a style tag in HTML file automatically scopes the CSS within that file to that component, and the amount of .js you could save typing just by having writing a little style tag below your component and having a just work little sprinkling of magical rock salt. What do you do have any fancy salts we have a bulky salt which is black whoo Really? - -25 -00:07:08,430 --> 00:07:12,420 -Wes Bos: No we have what's the the flaky salt in diamond? Yes. - -26 -00:07:12,420 --> 00:07:13,110 -Scott Tolinski: Diamond. - -27 -00:07:13,890 --> 00:07:16,080 -What is that stuff coordinate drive I - -28 -00:07:16,080 --> 00:07:19,350 -Wes Bos: picked it on the podcast before not mile, don't - -29 -00:07:19,380 --> 00:07:20,010 -Unknown: ya mal don't - -30 -00:07:20,010 --> 00:07:38,310 -Wes Bos: and we bought like on Amazon, you can buy like a bucket of it. And last summer I bought a bunch of salt cellars which is like a little wooden thing with a lid on it. And I gave everybody in my family a salt cellar with the salt in it is an awesome gift. super cheap. It's kind of nice little stocking stuffer. So - -31 -00:07:38,340 --> 00:07:45,510 -Scott Tolinski: hot tip for you. I would take a salt flight. And a little bit to my component files and single file components. Their - -32 -00:07:47,010 --> 00:08:05,340 -Wes Bos: next one we have here is prevent default shortcuts just like it will one of these little things like if there was a syntax for handling events. That was like Star equals I think I don't even know maybe I think another I saw this in another framework. A lot of this others I Oh, yeah. So what's the swell syntax for that? - -33 -00:08:05,730 --> 00:08:12,870 -Scott Tolinski: You can just tell it to ignore that prevent default, like directly on the component via a directive. I forget what the syntax is offhand. - -34 -00:08:13,170 --> 00:08:19,470 -Wes Bos: Like on click or handle change star equals and it like immediately prevents the default on that. That'd be kind of cool. - -35 -00:08:19,500 --> 00:08:22,620 -Scott Tolinski: Yeah, I'm really trying to limit the amount of times I say svelte here. - -36 -00:08:23,760 --> 00:09:05,250 -Wes Bos: Jonathan says it's true. Maybe we just need to move over. What do we got next year form input state to mapping? Gosh, yeah, I just think like forms in react. Everybody uses forms in their react application. Almost everybody does. And wouldn't it be great if there was some sort of like built in thing like, I remember back to the angular days, I still remember you just like n g bind even a piece of state and it just sinks in like, Oh, my God, I miss so and like, if it's a number I will parse float or parse into it. I know, there's lots of libraries out there. Whenever I talk about forms, and everyone's like, have you heard of Formic before? I'm like, Yes, I've heard of format and like, it's awesome. But like I wish react would be default, have all that stuff baked in - -37 -00:09:05,270 --> 00:10:07,200 -Scott Tolinski: for you. When I look at like Formic code. It's like, this is no less complex than just writing all this data updaters myself. And that's not what I'm looking for. I'm not looking for. I mean, yes, I want complete control. But I'm not looking for endless fine tuned ability I'm looking for do it all for me. And that, that can be nice. I actually ended up even writing my own form library because I didn't like any of them. And it's still not great and maintaining your own formulae very kind of sucks in itself. So like, there has to be a better way than than making controlled state for each individual reducer or whatever. There has to be a better way. Now we're going to be kicking off something that we like to call j s, or ne s. And this is going to be a fun little game where we shout out a library title, or potential library title. And you tell us if it's a JavaScript library a an object Which we're going to define or both. So we've done this a couple of times on our live shows and our favorite game. So let's start it. - -38 -00:10:07,279 --> 00:10:15,450 -Wes Bos: Alright. So, is graphene, ah, carbon atoms are organized in a hexagonal lattice - -39 -00:10:15,529 --> 00:10:25,520 -Scott Tolinski: or an opinionated Python library for building graph. qL libraries are both are both get your votes in? We got Wow, big - -40 -00:10:26,460 --> 00:10:27,510 -Unknown: lion and now - -41 -00:10:27,649 --> 00:10:28,320 -Yeah. - -42 -00:10:28,980 --> 00:10:49,649 -Wes Bos: All right, we're gonna reveal the answer. Both. So I looked at job quote, graphene was it's when carbon atoms are organized in a specific way, kind of interesting Wikipedia read. Next up, we have floodlight Is it a super simple syntax highlighter for x HTML documents. - -43 -00:10:49,740 --> 00:10:55,470 -Scott Tolinski: A large light used to illuminate the dark outdoor spaces are both, - -44 -00:10:55,740 --> 00:11:24,870 -Wes Bos: by the way, shout out to pigeonhole. They make this awesome, like conference software, where you can do like live polling, like we are doing right now. And it's awesome. Like we checked out probably five or six different pieces of software. And I think I want to have one of their devs on the podcast just because of how super fast and like slick it is. Yeah. All right. Ready, reveal answer. Oh, man, Wally. 3.7%. Correct. - -45 -00:11:24,990 --> 00:11:28,200 -Scott Tolinski: It's literally both white. I think you might have goofed this one with - -46 -00:11:28,260 --> 00:11:35,399 -Wes Bos: Oh, yeah. So obviously, it's both so I get that up. But only not only. Have you got it, right. - -47 -00:11:36,480 --> 00:11:39,570 -Scott Tolinski: It's not the light to illuminate dark spaces. - -48 -00:11:39,750 --> 00:11:43,080 -Wes Bos: It is it is. Oh, man. All right. Next - -49 -00:11:43,080 --> 00:11:47,159 -Scott Tolinski: time machine. Is this in the early 2000s skate brand, - -50 -00:11:47,279 --> 00:12:03,419 -Wes Bos: or a view bass GUI for creating state machines or both? Alright, here we go. Answer boom. 51% of you were correct. It is in early 2000s. Escape Brent, although that would be a good name for totally believable. - -51 -00:12:03,480 --> 00:12:04,500 -Unknown: It's solely the - -52 -00:12:06,149 --> 00:12:16,950 -Wes Bos: view based GUI for creating state machines so believable. Yeah. All right. Next, Joplin. Is this a free open source note taking and to do application, based on - -53 -00:12:16,980 --> 00:12:22,950 -Scott Tolinski: markdown, a city in the northwestern corner of Missouri are both - -54 -00:12:23,789 --> 00:12:50,460 -Wes Bos: already both 50.9% of you guessed it is Whoa, I didn't even know this. I was just looking for I went on GitHub, like trending repos. And I saw Joplin. And I was like, Oh, I wonder what Joplin isn't. I also figured out like it's a wicked markdown app. Like you know, we were talking about, like, how I can't take markdown notes on my phone. And like have them synced to just files on my computer. Yes. Looks like this. Does that Oh, - -55 -00:12:51,330 --> 00:12:52,559 -Scott Tolinski: no. Something else for that. - -56 -00:12:52,590 --> 00:12:56,279 -Wes Bos: What is that? Do you remember? I'm very curious because I'm in that space right now. - -57 -00:12:56,309 --> 00:12:59,820 -Unknown: My phone is currently dead. So Scott, of course - -58 -00:12:59,820 --> 00:13:06,390 -Wes Bos: got but with this is the new weekly segment. What piece of technology is broken? with Scott right now? - -59 -00:13:06,809 --> 00:13:16,230 -Scott Tolinski: Dude, I can't even make my iPhone stop working just out of the blue. It's terrible. Lupin, and I'm gonna send it off. I have no idea what's going on with my tech. No idea. - -60 -00:13:16,919 --> 00:13:18,960 -Unknown: All right, next one. No, go. - -61 -00:13:19,350 --> 00:13:26,820 -Scott Tolinski: Is this a JavaScript library that connects to no code tools? Like what was this button bubbled? I - -62 -00:13:26,820 --> 00:13:32,159 -Wes Bos: Oh, I didn't realize that. Or is it a smart 12 volt car battery charger? - -63 -00:13:32,220 --> 00:14:00,690 -Scott Tolinski: Or both? Are both doo doo doo doo, doo doo. Alright, ready? Already done. Oh, this one was very split. This is a car vote. And in fact, it was a my battery just died because I haven't driven my car in like nine months, and I didn't drip feed it. So I was like looking at battery stuff on Amazon. And that's where I found the noco. That's how we come up with these questions here. - -64 -00:14:00,809 --> 00:14:07,860 -Wes Bos: So you gotta say 37.8% voted the correct answer. We got to say it for our audio only listeners audio only. - -65 -00:14:07,890 --> 00:14:21,090 -Scott Tolinski: Yep. Next one we have here is inner? Is it Internet of Things smart light bulb or a CSS in JS library for selecting parent selectors. And unfortunately, this one cannot be both. - -66 -00:14:23,070 --> 00:14:27,870 -Wes Bos: This is a good one. I kind of like not having both but both like, at least you can throw people - -67 -00:14:27,900 --> 00:14:33,360 -Scott Tolinski: yeah, both is definitely the wild card in my mind because it adds that little bit of like, well, could it be? - -68 -00:14:33,510 --> 00:14:36,029 -Unknown: Yeah, all right. Oh, - -69 -00:14:36,029 --> 00:14:40,110 -Scott Tolinski: it isn't an end of things smart. We got all got him got him Got him. - -70 -00:14:40,140 --> 00:14:44,610 -Wes Bos: Yes. 48.5% of you guessed it was the Internet of Things smart light bulb, - -71 -00:14:44,669 --> 00:14:57,299 -Scott Tolinski: which is funny about this is because I actually sick pick the inner bulbs on an upcoming episode. And I was like, wait, when is that episode airing? Did I Did I ruin my my .js or Nast? - -72 -00:14:57,360 --> 00:15:06,270 -Wes Bos: Oh yeah, you're sick. Next one is kept kkoma strand. Is it a thermoplastic carbon fiber - -73 -00:15:06,270 --> 00:15:15,480 -Scott Tolinski: composite rod used in modern building or a Redux like state management library for svelte or both? - -74 -00:15:17,010 --> 00:15:18,270 -Unknown: boats? boats. - -75 -00:15:19,140 --> 00:15:29,669 -Wes Bos: Alright, reveal? Yes, almost 77% of you guessed correctly, that's an odd thing to know that it is a thermoplastic carbon fiber composite rod. - -76 -00:15:29,850 --> 00:15:37,260 -Scott Tolinski: I think most people could look at this and say there's no way that's an actual thing. And that is like, a plastic carbon fiber composite rod. - -77 -00:15:39,720 --> 00:15:41,700 -Wes Bos: Oh, man. All right. Next one. - -78 -00:15:42,270 --> 00:15:51,630 -Scott Tolinski: Sputnik five, Sputnik v. Is this a codename for an upcoming WordPress release? With the built in headless? - -79 -00:15:51,659 --> 00:15:56,010 -Wes Bos: Or is it a non replicating viral vector COVID-19 vaccine? - -80 -00:15:56,130 --> 00:16:00,000 -Scott Tolinski: It's funny because we should be voting on the ones that the other person wrote. Because - -81 -00:16:00,960 --> 00:16:04,020 -Wes Bos: I made this up. So you tell me what you think it is. - -82 -00:16:04,380 --> 00:16:07,980 -Scott Tolinski: I think that this is the WordPress thing. - -83 -00:16:08,279 --> 00:16:38,429 -Wes Bos: Okay. I think people are googling it. Because it was very much cute in the early days to the wrong one. And now it's, it's going up. All right, ready? It is 45% of you guessed correctly, it's a non replicating viral vector COVID-19 vaccine. But 44% of you thought it was a codename for upcoming WordPress release. We're passable? It's not though, because WordPress only uses jazz musicians for their code names. Well, who does it know that? - -84 -00:16:39,240 --> 00:16:40,289 -Scott Tolinski: Okay. - -85 -00:16:42,299 --> 00:16:47,549 -Wes Bos: That's good. People in the chat are saying how many they got right one out of eight. All right, - -86 -00:16:47,760 --> 00:16:53,520 -Scott Tolinski: I bet that person the highest score person probably picked both for floodlight, and was like, come on. - -87 -00:16:53,610 --> 00:17:55,140 -Wes Bos: Yeah, yeah, you know what? So there's, there's two people that got all of them cracked, because obviously I goofed up the headlight one. But that was fun. That was fun. One of our sponsors today is magic Bell, they do this really wicked product. And it's an embeddable notification inbox. So if you need to notify your users of anything notification, it's a pain in the butt to do that. Why? Because you need to have preferences for what who gets notified about what and if you want to turn off notifications, or something like that, you have to have to add that in. And there's just a whole lot to think about real time updates, if someone hasn't refreshed the page in a while, all that good stuff. So magic Bell is a service where you can just drop it into your application with a few lines of JavaScript, they have an SDK and an API as well. And you get that little, I like the name magic Bell, little bell in the top right hand corner of your app, you can put it wherever you want. And you click it and they'll be able to see a list of notifications about whatever it is that you want. - -88 -00:17:55,770 --> 00:18:06,860 -Scott Tolinski: Yeah, I don't know if you've ever had to code anything like this to yourself West. But last time I really regretted it. It was, it was so I would have loved to have known about magic Bella at that time. - -89 -00:18:06,860 --> 00:18:08,160 -Unknown: Because at the time, I was just like, Oh, - -90 -00:18:08,160 --> 00:18:12,050 -Scott Tolinski: yeah, let me just cut up and oh my gosh, there's so many things to worry about here. So - -91 -00:18:12,110 --> 00:18:44,360 -Wes Bos: it's one of those things that seems so simple or like Oh, just an array of things to tell the user and then you get get into it, you're like, oh, but how do you market as seen, and then maybe like WebSockets, or something, so the whole thing to it. So magic Bell will let you do that they have a free plan of up to 1000 users. So you can just drop this into your own application. And then they gave us a coupon code, coupon code syntax all caps for 20% off. If you sign up in the next two weeks. That's magic bell.io. Thanks so much to magic bell for sponsoring. - -92 -00:18:44,490 --> 00:19:35,840 -Scott Tolinski: Next thing we're going to be doing is talking overrated and underrated. And this is sort of like a segment where we're just kind of gauging each other's interest or ideas on some of these new tech things. So let's kick it off with the very first one is Dino, overrated or underrated? I'm gonna say right now, it's probably underrated. It's very nice to work in. I think the permissions model of it all is very forward thinking I think the entire import via URL is not as painful as I expected it to be overall the TypeScript experience with it, not having to run a bundler not have to do any of that was just very nice. It's very nice to use. And I liked that all of their tooling is sort of what's the reasonable way to say this, not all over the place. It's not a total mess. So - -93 -00:19:36,050 --> 00:20:48,150 -Wes Bos: I like it. Yeah, I think it's gonna say underrated as well, not to say that you're gonna build your next app on it, because that would probably be not a good idea. Because it's very much in the early days. Yeah, there's like a lot of and you probably have heard this on the podcast. We've been talking a lot about shifting tooling right now. We've been talking a lot about ESM becoming the thing now that it's a node. We've been talking about modules and URLs, we're talking about TypeScript, and Dino seems to just nail all of those things. And that's really cool. We'll replace node, I don't think so maybe it would you would see it coming for like, in like five years. Like, it's not like you're gonna wake up tomorrow and be like, Oh my gosh, I have no skills left. And like that's the other thing about it is that if you know JavaScript, and you're in node, like, you switch over to Dino, no problem, but it's kind of cool. And I'm very curious to see how node will react to this. But also, it's it's harder for node to just do this stuff. Because they have to maintain compatibility with the rest of the node. That's why ESM in Node was so hard to get right, because they couldn't break 10 years worth of work that they've done, whereas Dino could just write a new thing. Here we go. - -94 -00:20:50,130 --> 00:21:30,210 -Scott Tolinski: Next one is sort of somewhat related is ESM. import from a URL. And I think this one is very, very good. In fact, it only took me a little bit to this is underrated, I would say I think importing anything from URL is really pretty underrated overall. Because to me, one of the fastest way is to try out a file. I know that when we were trying out stuff with Ts in Dino, it was like, so nice to be able, oh, let's just import this file from a URL. Yeah, I think just in general, importing from a URL and being able to access the file as an import like that. Very, very good. - -95 -00:21:30,239 --> 00:22:11,070 -Wes Bos: Yeah, I think so too, as well. Like, first, you can do that in literally, you can do it in JavaScript in the browser, which is super cool that you can just, you can write an app, have an HTML file, script tag type of module, and then just start importing stuff from different URLs that are out there. And I think that's pretty cool. I don't know how I feel about upgrading, like what happens when you upgrade, like a bump of version release, I'm sure there will be tools around that. And because like you literally import it from like, whatever cdn.com forward slash, the 2.2 point zero. And then what happens when 2.0 point one comes out? Do you like find a replace? Do you have to copy paste that - -96 -00:22:11,130 --> 00:22:36,600 -Scott Tolinski: in Dena and there's or Dino there's a like a standard of doing like a depths folder depths.ts, where you do your imports. And that sort of almost becomes a package dot JSON, if you think about it with import statements. So that's definitely a thing there are there are detractors from that. But it seems like that's what we taught in our Dino course. So like, it seems to be pretty much like a standard in that world. So who knows, maybe that becomes a thing. - -97 -00:22:36,630 --> 00:22:42,780 -Wes Bos: So you have like a depth such as file where you import everything you need for the project, and then it isn't global? Or - -98 -00:22:42,780 --> 00:22:55,680 -Scott Tolinski: then you import from that file. So it's like your Oh, it's almost like a package JSON because you're setting the virgin when you're importing it. And then you're if you want to add the version, you're only modifying in one spot. Oh, that - -99 -00:22:55,680 --> 00:23:10,380 -Wes Bos: makes so much sense. Yeah, cuz you can even you can use the export from syntax for that, or you say, like, export react from HTTP, whatever. And what that does is it imports it and exports in the same go. Oh, that makes so much I know. I didn't think of it. That's awesome. - -100 -00:23:10,410 --> 00:23:16,530 -Scott Tolinski: Yeah, it's nice. Next one is remix dot run. was do you want to take this one first? - -101 -00:23:16,650 --> 00:24:03,990 -Wes Bos: Yeah, this is the new react framework for building apps. And websites from Ryan Florence and Michael Jackson, to the devs are the devs, behind react router, awesome react, thought leaders in the space. And they are sort of like taking a look at the landscape and rethinking it and it's closed right now. And I think it will be you have to pay for it. But from what I've seen, it seems really interested. So I'm going to go underrated on this one. And not that we're going to everybody's going to be using it. But I think that they are rethinking a lot of things, especially with what I've heard is that streaming from the server and this pain that we have, which is server side and client side rehydration and whatnot. I'm very curious to see and I bet if they like nail something like I bet other frameworks will adopt that as well. - -102 -00:24:04,020 --> 00:25:33,270 -Scott Tolinski: Yeah, we're pretty much all go and one we're agreeing on everything I think is underrated. I also think that like, like he said, specifically about the streaming from server side. Yeah, that stuff sounds so good to me. I maintain our own server side rendered react application. And it's not a lot of fun. It's just not super easy, but it also feels like it also feels like it's doing more work than it needs to. And I think the remix folks are really figuring a lot of those aspects out next is going to be x state which believe it or not, I'm going to say is underrated looks that we should have had things that were underrated. Yeah, that actually might have been a problem in our approach to this. But at state Hey, I don't know if you've used state machines at all West but when we were writing the video player or the video uploading system, so we upload our videos, to the all those who have not heard we use a service called mcse to do our video so we upload our videos to bugs. And building that video uploader was like the thing that made me see the light for state machines, specifically, because there were so many states that this uploader could possibly be in. And so for me, it was pretty eye opening to control those states in the state machines world for the first time and just say, like, Alright, I really feel like this uploader is really solid compared to some of my other code, which was mostly Boolean flags set by state variables and things like that. - -103 -00:25:33,330 --> 00:25:45,990 -Wes Bos: I've not used that. So I'm gonna go medium rated, but it's one of those things that you just can't hear people stop talking about it. And we had David on the podcast of six months ago, and he talked about it and it I just made a lot of sense. Like, I certainly have the problems that it solves. - -104 -00:25:46,140 --> 00:27:49,260 -Scott Tolinski: Yeah. This episode is also sponsored by sentry@sentry.io. Use the coupon code tasty treat all lowercase all one word, and you're going to enjoy two months for free of centuries. Really just outstanding feature set, it's just really a fantastic error and Exception Handling tool. In addition to that, there is some really great new features around the performance monitoring that came in Sentry. Somewhat recently, I had a, I had a beta access to it a little while ago, just because I wanted I wanted to get in. And it was really blew me away just how useful it was to basically have a table of all of your routes and how fast they take to load. Because it really allows you to quickly and easily see which aspects of your site one get hit the most, to potentially have some failure rates, right? Maybe it gives you a failure, a percentage, but also allows you to see just how long it's taking for some users to load. Now they are constantly iterating. Upon this feature, I actually just went here just now. And although I checked this, I want to say last week, because I check it all the time, they have already added some new stuff. This is his first content, full paint, largest content, full paint, first input delay, cumulative layout shift. And what it does is it gives you these, these bars of saying how how many people have this hit 80% of my users are getting a green level first input delay, and 20% of my users are getting a yellow level of that. And then 0% of my users are getting a fire red level saying hey, yes. So as you can see, these tools are very useful to be able to see some other things like who's getting a cumulative layout shift, which that's when some content has loaded and others hasn't. And then the layout shifts, that is a huge pet peeve of mine. So it gives you the option to see all that stuff really easily. And you can even search by trends. It's very cool. So check it out@sentry.io use the coupon code tastytrade all lowercase all one word, and you will see some of their new tools. - -105 -00:27:49,590 --> 00:28:34,500 -Wes Bos: All right, we'll move into some hot take tweets hot topics. I asked on Twitter for some hot take tweets. What are your JavaScript hot take tweets, and everybody gave me their opinions which is hilarious because my like Twitter's been ruined for like three days now with people sending me because not because like people do it. But people reply with their hot take. And then there's like a argument every single tweet has like a 40 thread Harkey. So first one is from Lauria and .TECH. Spread syntax isn't super readable, and you probably should use something else if you can have it. Yes, I just shared a bit of code solution using it. So sue me. So I really like this one because I do it myself. But it's not super readable, heartache, tweet, what do you What's your take on this? Scott? - -106 -00:28:34,590 --> 00:29:10,860 -Scott Tolinski: I think it's wrong. No, I this is gonna bug like, I'm the type of person who does want to go on to Twitter and be like, no, that's wrong. Like, it doesn't matter. In fact, but i i agree with Laurie that like, when I when I don't want to say I don't want to try to claim that she just started using them because I doubt she has but like, when I first started using them personally, I felt like this is not readable. But like now that I'm I've been to the edge and back and I've been using them for so long. And I understand it. Yeah. Like I see through it. For some reason I've been able to see through the lines of the matrix. And now I just like it a lot. - -107 -00:29:10,950 --> 00:29:16,860 -Wes Bos: But once you know what spread is then like, yeah, obviously have to know what it is. But yeah, once you know it's the best. - -108 -00:29:16,890 --> 00:29:42,000 -Scott Tolinski: Yeah, best. Okay, next one is from Chris Haldeman, comes with a log is lazy and slows you down as a terrible debugging experience. Chris can be right about all of this. And I will still use console dot log until I enter the grave. So yeah, no debugger is great. debugger is fantastic. But sometimes it crashes my browser and sometimes it's slower than using deep or just a simple console log and seeing actually, if the output - -109 -00:29:42,090 --> 00:30:09,300 -Wes Bos: like we did a show on syntax about like advanced debugging techniques with people asking what else do you use breakpoints break on that you can you can listen for Dom changes, all of that stuff. You can view network requests and all that those are great and I use those when I'm when I'm in trouble but nothing wrong with the content. Log Rocket console log. Optional chaining makes code so much more readable and makes it harder to debug when it comes to optional props or fields. - -110 -00:30:10,050 --> 00:30:13,800 -Scott Tolinski: I love optional chaining. It's my, it's my baby and I will defend it, - -111 -00:30:13,830 --> 00:30:32,360 -Wes Bos: I've not run into a really odd bug, because that's the thing is that it could be undefined anywhere along your chain. And you wouldn't necessarily know where it was undefined unless you took them out. But you could also just pop a breakpoint in there or log the thing one step above to see what is coming in. - -112 -00:30:32,400 --> 00:31:18,060 -Scott Tolinski: What's funny is that I, once I moved to TypeScript, it made me realize just how unsafe some of my code was. And like sometimes the solution is, if you're in a conditional, just dropping a question mark in there to do the optional chaining and it's like, Alright, now this is safe, and it's gonna work. I don't have to worry about it ever again. This next one is from Dan. Dan says JavaScript really isn't that bad, as long as you avoid double equals and four dot.in. Yeah, Dan is dead on JavaScript is really not that bad. And it's gotten better all the time. A lot of the people I think, who criticize it, or even criticize the changes on and are maybe people who came from other languages, they're using JavaScript and all feels like hectic and chaotic at this point. And it is kind of chaotic. But once he got it, I really enjoy working in JavaScript or now TypeScript for the most part, - -113 -00:31:18,060 --> 00:31:22,860 -Wes Bos: big fan double equals die, don't use it as one of the other hot takes was double equals is fine. - -114 -00:31:23,640 --> 00:31:24,150 -Unknown: Yeah. - -115 -00:31:24,660 --> 00:31:59,520 -Wes Bos: And the other. For me, I use four of the dead, or I was added to the language a couple years ago. And it's awesome. Yeah, for us where it's at Next one is the NPM ecosystem has turned JavaScript development into a game of Legos rather than real programming, what and to that, I say, I'm a Lego Master, I wouldn't be able to build some of the stuff I build without some of the packages from much smarter people. That's the beauty of JavaScript is that you can reach for these much harder things like OAuth implementations, and beat crypt, when you don't necessarily have to do it. I wouldn't know how to build that myself. You know, as real programmers, they - -116 -00:31:59,520 --> 00:32:30,780 -Scott Tolinski: mold their own Legos out of their plastic that they have for from the oils of the earth. Yeah, I don't know about this one. All PR unless you're unless you're writing like a binary, everything you're doing is the exact same as what you're saying. NPM is, or react is the worst choice for beginners, web. So in its current state. And I kind of agree it's not the worst choice for beginners, because it's so widely used. That's why it's a good choice. For beginners. It's so widely used, you can get a job doing - -117 -00:32:31,110 --> 00:32:32,310 -Wes Bos: it on your resume, right? - -118 -00:32:32,430 --> 00:32:43,320 -Scott Tolinski: But if you are just trying to understand DOM events, and whatever, man, keep it vanilla, and if you want to move into a framework, I don't know, keeping us something way easier than that. Yeah. - -119 -00:32:43,350 --> 00:33:04,770 -Wes Bos: So for beginners listening, that's not to say you shouldn't learn react, I literally have a course called react for beginners. But there's a handful of things you need to know about react, you couldn't be able to just jump in, but I think that's the same for a lot of stuff. So I think I agree on this, but you could still learn it. Yes, it's still not super hard and complicated. There's just more. You gotta have like a list of like, five gotchas. You know, - -120 -00:33:04,799 --> 00:33:11,250 -Scott Tolinski: it's also kind of like saying like, pancakes are the worst food for breakfast. There's still pancakes man, like, they're pretty dope. - -121 -00:33:11,880 --> 00:33:44,430 -Wes Bos: Yeah. Next one, Aaron Bushnell says, If you work at an agency, really try to avoid using using things until it's absolutely necessary. And even then only what you need when you manage hundreds of sites, it quickly can become a tremendous source of technical debt. I agree as somebody who still has a CoffeeScript site in production, and what six or seven, I've been working this year to cover all my Gulf sites over Who in the world are you still? I'm not writing anymore, but like it's still running. And it still runs good. - -122 -00:33:44,430 --> 00:33:45,090 -Scott Tolinski: Yeah, yeah, - -123 -00:33:45,090 --> 00:34:05,760 -Wes Bos: you definitely that's the beauty. I love doing agency work and freelance work, because you could choose whatever you want it, but you can definitely fall into a whole, you just bring on a whole bunch of stuff. It's same thing with WordPress plugins, too. If you go bonkers on WordPress plugins, you're gonna have a bad time because half those things aren't going to be out of date or not maintained or break. - -124 -00:34:05,790 --> 00:34:07,980 -Scott Tolinski: They're gonna install eight versions of jQuery. - -125 -00:34:08,460 --> 00:34:11,360 -Wes Bos: Yeah. What do we got next? - -126 -00:34:11,360 --> 00:34:13,050 -Scott Tolinski: Do we want to get into q&a? Cuz? - -127 -00:34:13,230 --> 00:34:16,080 -Wes Bos: Yeah, yeah, let's move into q&a. We're running out of time here. - -128 -00:34:16,130 --> 00:34:18,300 -Scott Tolinski: Yeah, cuz we forever on these - -129 -00:34:18,860 --> 00:34:50,400 -Wes Bos: 100 more of these? Yeah, some good ones. Some good ones. Go visit that tweet and listen to all the popular unpopular opinions. So if you've got a question for us go to pigeonhole that at Ford slash tasty, and ask a question, or you can drop it in the chat as well. First question is from anonymous. If you recently started doing web dev work, which career path would you choose? Start up? Fang Fang is Facebook, Amazon. What's the other apple? Netflix and Google? - -130 -00:34:50,420 --> 00:34:56,630 -Scott Tolinski: Yeah, we should actually start making up like a fake thing with like different companies in here. It's Yeah, board - -131 -00:34:57,380 --> 00:34:58,170 -Unknown: foodora - -132 -00:34:59,790 --> 00:35:00,650 -Scott Tolinski: No, God, - -133 -00:35:00,690 --> 00:35:42,360 -Wes Bos: yeah, that would be hilarious. Yeah. Or so would you do start up Fang, or slash big tech companies or freelance or contract or if I started today? Um, it depends. For me, I look at some startups and I don't envy, the work life balance and the grind and how quickly things move. But I also know people who get into startups and they're young, and they've got nothing but time and, and whatnot. Certainly easier. And also not not to say that startups are only for young people, because there's lots of people that are running great startups, they just work nine to five, and they're done. Right. But I think On the flip side, there's also a very heavy culture in that Fang, - -134 -00:35:43,260 --> 00:36:09,630 -Scott Tolinski: I really like studio work a lot. Yeah, like that. That's an option to working in a design dev studio, because you get a lot of experience with many different projects. And especially early on in your career, it can give you a lot of exposure to different projects in working with clients, many times you're, you're in client meetings yourself, rather than, you know, being some project manager so you can get some managerial skills, you can get some project skills that shift very rapidly. - -135 -00:36:09,650 --> 00:36:56,520 -Wes Bos: Also, I'm going to say, if you can get the Fang job, go for it, just don't allow your lifestyle to inflate what they're paying you. Because it's very scary to be making $200,000 at Facebook, and before you know it, like someone's got to pay for that Tesla. If you get sick of working at a Fang and you want to go do your own thing, like I get DMS like this all the time people like, oh, Wes, I want to I want to make courses like you do. I want to be able to just dick around on the internet like you do. That would look so good on your resume. Like I work for Google. And now I'm doing my own thing ex Googler makes a new product or whatever. I think that would be kind of cool. So if you can get it, go for it. Otherwise, I'm a big fan of like Scott says studio. I went contract freelance my own and it worked out for me. I really enjoyed it. - -136 -00:36:56,580 --> 00:36:58,130 -Scott Tolinski: Yeah, yeah. Hey, great. - -137 -00:36:58,260 --> 00:37:29,250 -Wes Bos: Today, we are sponsored by fresh books. Fresh books is the cloud accounting solution for your business, whether you're a small business, big business freelancer, whatever, if you need to keep track of your time, send out invoices, convert that time into invoices, track all of your expenses, take expenses and turn them back into invoices, all of that good stuff, just to run your business, all the money stuff, check it out. freshbooks.com forward slash syntax that's gonna get you a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring, - -138 -00:37:29,480 --> 00:38:39,440 -Scott Tolinski: Eric real quick before we do the next one asked in the chat about breakdancing being added to the Paris Olympics. I have been following the breaking in the Olympics thing for maybe like 15 years now maybe longer than that they've been the group that's behind it. A lot of people have been trying to get it in since the literal 80s. So I'm very excited the Junior Olympics for when really well, you know, a lot of the the people in the scene are concerned about it becoming exploited by the masses or whatever. But to be honest, the Junior Olympics went so well. And they didn't really change it too much. So I'm pumped, anon says TypeScript, all the things and yeah, I'm pretty much in I'm pretty much in I really like it. And I don't see myself writing anything else. Even like today, I popped open a quick utility. And I find firing up a quick code utility, I'm going to hit up just some, you know, off the cuff .js, kind of like real quick stuff. And I did it in TypeScript. I wasn't any more encumbered than I was in JavaScript, like I felt, I felt like I could flow with it. And that, to me, was like a big thing. Because I always see TypeScript as this big barrier to entry. You got to set up your tooling and whatever. But as long as you're using the right kind of systems that make it easy to get going, and TypeScript, all the things yeah. - -139 -00:38:39,510 --> 00:39:48,380 -Wes Bos: And we were talking about this, we had a topic table on TypeScript yesterday, and I joined in and we're talking about like, Is it a barrier to entry anymore? And I don't think so. Because like, pretty much every major or even minor package out there, I have a one line code called wait and somebody submitted title, they all have types already. You can infer types for like, like I just built right before this podcast. I was like, man, I want to see my webcam, but the like Apple photo booth, they crop it like like this. So I was like I built like, it's called check my hair. And it's just it just shows your webcam really quickly. And I'm like ardabil doesn't TypeScript. It was like maybe 40 lines of code. And there was two or three spots where I had to literally type something. And everything else was inferred. And you got all the benefits from the the code completions and all that. So like, I don't think everything No, you can still write really good JavaScript. But I think the barrier to TypeScript has become very low in the last year or so. That's specifically why I'm into it now because you can get up and running even for silly projects super quickly. Next one, you know, grab it, - -140 -00:39:48,480 --> 00:40:40,190 -Scott Tolinski: what do you do to keep up to date with the latest and greatest changes in tech front end libraries, new languages, etc? Hey, here's actually um, do you have the GitHub app on your phone Wes No, I don't get it man, do I, the GitHub official app, it's so good for finding new packages. There's an explore tab on it. And it gives you a bunch of potential libraries that you might be interested in. And I use this like crazy for finding stuff. I don't know how or why. But this to me, like it has really changed how I find projects, because it shows you trending stuff and whatever. But it's very good. And I use it all the time to find new things. I also look at Awesome, awesome repos, you'll find things that like awesome TypeScript, and then you just go down the line of list and look for cool stuff. And just look for for neat little things. So that's what I do personally, for me, - -141 -00:40:40,500 --> 00:41:24,570 -Wes Bos: we can ask this question all the time. It's follow people on Twitter who who follow this stuff, like Scott, and I listen to syntax, and like, what do Scott and I actually do, I read release notes of every single browser. Anytime there's like a working group that changes a proposal, there is a good Twitter account called intent to ship, which is really good, which means that like, at that point, it's going to be in the browser in a couple of weeks. So just kind of watch those and the salic you're gonna miss something. If you listen to the podcast and follow handful of good people on Twitter, you're gonna hear about subgrid 14 times and the 15th time that you hear it. That's when you should probably pay attention because Okay, now now it's the thing I need to implement in my in my app. - -142 -00:41:24,650 --> 00:41:39,480 -Scott Tolinski: Speaking of cool new things, Luna tweeted this out Houdini done, how today. Oh, yeah, Houdini yokkao. Very cool stuff for CSS Houdini. So I posted in the chat somebody go and check that out. Wow, big wallet questions here. - -143 -00:41:39,570 --> 00:41:55,260 -Wes Bos: Yeah, they came in, we got how much time left? No time. Let's just keep going until they kick us off. What other good questions we got here. Can you share some exclusive barbecue tips? low and slow baby fish sauce. Did your mom try the fish sauce? She - -144 -00:41:55,260 --> 00:42:12,150 -Scott Tolinski: did? Yeah, she made it. She made it. And my, my mom was like, I'm making the recipe. And I'm like, What recipe? And she's like the one from the podcast that Wes was talking about? It's very fun. Yes, she made it. No, she loved it. We do something very similar to that all the time. We use fish sauce pretty heavy handedly over here. - -145 -00:42:12,150 --> 00:42:18,650 -Wes Bos: Fish sauce is the SEC, I would say, all right, what do you expect a blitz .js. In the coming years? - -146 -00:42:19,400 --> 00:42:45,710 -Scott Tolinski: We'll see. I don't know, it's gonna have a tough time. Because I think as somebody who's used like full stack frameworks, it takes a lot for them to like, really take off and Blitz j s is on top of next j s. So at least has that going for it where it's like, Alright, this is like next j s with Prisma. And all this other stuff, right? And that's cool to me. But like, I feel like it will have a hard time getting people to really latch on to it and building a community. But I think it's cool. And I think it's worth doing. - -147 -00:42:45,840 --> 00:42:50,730 -Wes Bos: I like this one. What's the first node module you install on a brand new react project besides react itself - -148 -00:42:50,730 --> 00:42:52,170 -Unknown: react router. - -149 -00:42:52,350 --> 00:43:03,860 -Wes Bos: For me, it's usually next j s, if it's multi page or parcel, if it is just a single little one off app, because personal will bundle it all for you just kind of cool - -150 -00:43:03,980 --> 00:43:26,250 -Scott Tolinski: thoughts on using languages other than j s or Ts with react like kotlin, for example, I think is neat. I've kind of looked into some of this myself lately. But thoughts about using it I'm not good at any other language if we're being entirely honest. So yeah, j s and Ts for me all the way right now. But you know, I'm learning. I'm learning rust, but I'm not going to be super effective with it. You know? Yeah, I - -151 -00:43:26,250 --> 00:44:21,330 -Wes Bos: don't have all the time in the world to learn other languages, although they probably expand my horizons. But there's literally nothing wrong with just spending all of your time in JavaScript. Alright, let's last one right here is Do you have any approach for optimizing high res images that are stored in your back end? Like s3 for a Gatsby website? We're talking about this on Twitter today? There's a lot of services that will slurp up your image, transform it on demand and return it cloudinary image x Sanity, does it whatnot. I think making your own is what I need to do, because I always I love that approach on demand rather than doing the Gatsby build, especially if it's a if it's a remote image next jass is image component does it with remote images, which is a killer feature, but not Gatsby's. I always like hesitant to be like, yeah, just pay this monthly cost for this service. And then the service will do it. Because I do that. But then also like, it sucks to have to tell someone just pay for - -152 -00:44:21,330 --> 00:44:21,990 -Unknown: it. Right? - -153 -00:44:22,380 --> 00:44:27,780 -Wes Bos: So like it wouldn't it be cool to like, run it on like a serverless function or something like that. That'd be nice. It'd - -154 -00:44:27,780 --> 00:44:35,010 -Scott Tolinski: be cool if there was like a spin up option where somebody had created like a pre configured one where you could just like spin up your own cloudinary. Okay. Yeah. - -155 -00:44:35,730 --> 00:44:50,250 -Wes Bos: I think that does exist. It's just that like cloudinary has 4 million features. Yes. And then you sometimes you use them like the they even have like CPI like if you want it to sepia tone your photos like it's a digital camera from 2001. You could - -156 -00:44:50,250 --> 00:44:55,350 -Scott Tolinski: or make it like into a photo booth at a Western show at Disneyland or so. Yeah. - -157 -00:44:56,400 --> 00:45:12,660 -Wes Bos: That's a good idea. All right. I think we should end it off. There Thank you everybody so much for tuning in. That was really fun. We always like doing these live ones it's a bummer we couldn't do it in person. But hopefully next year we get get the big shot in the arm and we'll be able to see you all in person. - -158 -00:45:12,690 --> 00:46:24,930 -Scott Tolinski: What about sick pics do we want to do some sick pics Oh rebounds off sick picks sick picks, we pick things that are sick, I'm overflowing with sick pics over here. So while West goes and hunts for his I'm going to pull up mine here, sick picks my sick pick the thing that I think is sick. And this is going to be a very special one. This is the coolest little extension I've ever done used in it's called color conversion color. This is a VS code extension. I'll post it real quick here. Let me find the actual links page. So I've been personally dealing with a lot of like moving colors to HSL hsla doing a lot of variable work there. And I found this really neat extension for VS code that allows me to convert colors from hex to hsla. And it is so dang fast. Because you just basically highlight your color string your hex value, you say go turns it to hsla. Again, I'll post it in the chat here. I'm like trying to google it while I'm talking about it. But it's really nice to not have to leave your editor or whatever just toggle through different types of color conversions. And this thing has been saving me some serious time. - -159 -00:46:25,020 --> 00:47:34,020 -Wes Bos: I mean a sick pick Allah lock picking kit. So I we have this like vintage gumball machine in our house and we bought it years ago, we every now and then we put some candy in it for the kids and they get a penny and they turn it and they get like a couple Smarties that come out. And it's getting full of money and we don't have the key, we have the key to put the candy and we don't have the key to get the money out. And it's getting full I I told kailyn I was like I'll learn to pick locks. So I bought this. It's an acrylic lock. So it's see through and you can see all of the pins in the lock so you can see what you're doing. It comes with a whole bunch of different picks. I'm trying to pick I did it, why I did it on camera. So it's a super cheap lock. That's why it's so easy to pick the real real locks are a lot harder than that. But it's cool because you can see what it's doing and how locks actually work. And that just is so helpful to understand like when you are picking a real lock. What are you trying to do right now you're not just jamming this pic in there. And it came with a whole bunch of different types of picks. And I watched lock picking lawyer on YouTube. So yeah, it was it was kind of fun. - -160 -00:47:34,020 --> 00:47:43,050 -Scott Tolinski: I watched so much lock picking trying to lock pick one of our doors and the doors locked and it was like a super fancy sliding lock or whatever - -161 -00:47:43,110 --> 00:47:44,730 -Wes Bos: slide Yeah, not a slang, - -162 -00:47:45,030 --> 00:48:24,870 -Scott Tolinski: block slang. I was a slang in my slang and I could not get the thing open obviously and then I had a lot bigger come over and need to use like a whole like big rig machine to get it open so I didn't feel too bad about myself after that. Awesome shameless plugs West boss comm forward slash courses as the list of all of my courses. You can use syntax for 10 bucks off and I'll shamelessly plug level up tutorials.com sign up to become a pro and you'll get access to 12 new tutorial series for the entire year as well as the entire back catalogue of 1000s of video tutorials. So check it out, level up tutorials.com. Alright, thanks - -163 -00:48:24,870 --> 00:48:39,300 -Wes Bos: so much to react THON for having us. Thanks everybody in the chat. I was super fun. Make sure you subscribe to our podcast syntax out of fam in whatever podcast player you're using. And leave us a review positive review. say nice things about us to pace. - -164 -00:48:41,040 --> 00:48:50,820 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax319.srt b/transcripts/Syntax319.srt deleted file mode 100644 index 7b0b4dd9a..000000000 --- a/transcripts/Syntax319.srt +++ /dev/null @@ -1,120 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:03,060 -Monday Open wide. - -3 -00:00:03,989 --> 00:00:06,990 -Get ready to stuff your face with JavaScript CSS - -4 -00:00:06,990 --> 00:00:07,620 -loadmodule - -5 -00:00:07,620 --> 00:00:09,060 -BBQ Tip Get - -6 -00:00:09,060 --> 00:00:09,839 -workflows right - -7 -00:00:09,839 --> 00:00:10,440 -dancing, - -8 -00:00:10,559 --> 00:00:16,710 -soft skill web development hasty as crazy as tasty as web development treats coming - -9 -00:00:16,710 --> 00:00:21,660 -in hot here is when Sarah Khuda boss and Scott L. - -10 -00:00:23,610 --> 00:00:24,480 -Totally ski. - -11 -00:00:25,920 --> 00:00:55,680 -Wes Bos: Oh, welcome to syntax. And this Monday hasty treat, we're gonna be talking about CSS typography and systems, how you can quickly get up and running with a system of typography that will take all of the guesswork out of your CSS sing around typography, which we all know is not a ton of fun if it's not your specialty. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, and with me, as always, is the Fantastic Mr. Boss. - -12 -00:00:55,710 --> 00:01:07,080 -Unknown: Hey, yeah, happy new year. We're back at it. This is the first one we're recording in 2021. So feeling somewhat refreshed. I'm excited to be back to work. After a couple weeks off. Yeah, - -13 -00:01:07,080 --> 00:05:37,170 -Wes Bos: I spent the entire break rewriting my platform. So I wish I could say necessarily the same thing. It's in a healthy thing. But at the end of the day, I didn't have a whole lot of time to do, you know, just like nothing for some reason. I don't know, we had like 800 projects going around at the house. So it was like, Oh, we got to do projects. We got to do this. We got to do that. And then it was like almost like coding in the evenings. For me like was like, almost like relaxing. For some reason. It was like a chill thing. So our sponsors today for this episode are Sanity and Sentry those who of you who have been listening to syntax for a long time have known that we love both Sanity and Sentry. So with a little bit about Sanity is Wes Yes, Sanity is the structure content, CMS, they've been coming out swinging with all kinds of features. So if you got 2021, and you're working on a project, you got your next project, you need a headless CMS, for your project, check out Sanity, it's awesome as well, the way that it works is that you, you set it up and you create a project. So all of Sanity is done in the code. So you define all your schemas, you define all the inputs that you have, you define how they relate to each other. And then when you run this thing, you can also get this additional thing called Sanity Studio, which is the actual CMS and Sanity Studio man, they have spent a lot of time working on this as a CMS, it's pretty slick, because so Sanity is both an API a graph qL API, they also have this thing called grok, which will it's another language or syntax for querying the data out of Sanity. And then you get Sanity Studio, which is a react JS based CMS that you can use to edit and manage all your data and that CMS is really slick because your your clients, your users, whoever is actually managing the data at the end of the day, they will use that you can put your own custom React.js components in it. So I am challenging you in 2021. I want you to pick up whether it's a client project or a side project or whatever, and try Sanity out in one of your projects, go to sanity.io forward slash syntax that's gonna get you double the free usage tier. Thanks so much to Sanity for sponsoring. Cool and this episode is also sponsored by Sentry. Now Sentry is the error handling and exception service that Wes and I both use. In fact, I use Sentry every single day. It's so funny with Sentry and Sanity, I'm trying really hard not to say the word Sanity here, everything. So I really love Sentry. I really love this product. One of the cool new things that they've added recently is this performance tracking. And one of the cool things about the performance tracking is it really gives you good insight, along with graphs and tables into just how fast every route that your site has. A I don't know if people in the past have gone through Google Analytics to look for this type of thing. But for me, I think this is a much more helpful view, it fits a little bit more into the site of monitoring of your website rather than analytics or something to me, this feels really nice and even gives you a really cool user misery score, which lets you know which of your routes are the most problematic. It's very, very cool, it breaks it up. And it gives you all have the kind of metrics that you'd like to expect from something like this. So you can see quickly at a glance, the time to first content, full paint, the largest content full paint, the first input delay, the cumulative layout shift, which Who the heck likes layout shift? I don't think anybody does. So you're gonna want to head on over to sentry@sentry.io use the coupon code at tasty treat all lowercase all one word, get two months for free and start monitoring not only your performance, but your errors and exceptions and more with Sentry. Okay, so welcome back West is feeling like I need to start doing some like warm up stretches here to get going. And also with just our luck notion happens to be down so we're gonna get through this with we're gonna get through this first. So the big question, I Want to answer in this episode is how do you define type in your projects? How do you define type in your projects, font sizes, font families, those types of things? How do you define them in your actual projects? But also, how do you come up with the systems? And how do you create these things in a way that they end up being essentially helpful to the lifecycle of the project without becoming bloated? It's a common trait of CSS to Okay, do a little patch here, then a little patch here, the next thing, you know, 10 years from now, your entire CSS system is not a system, but just a randomly assorted, just lots - -14 -00:05:37,170 --> 00:08:00,900 -of times. Yes. This looks pretty good. And I think for some people are still styling text in that sort of way, where they're saying, Oh, yeah, this looks good. Let me just set it to this random value, or whatever it seems about right. And in my experience, designing on a type system, and a system that can be created for you, especially when you're new to this kind of thing, is one of those things that will set your designs apart from feeling amateurish, because part of the things that really can make a design feel amateurish is bad use of spacing, and typography. And unfortunately, typography is a difficult topic. So you can't necessarily expect everyone to become a typographic master from the very get go. So I think we would want to start this off with like, how do you set up your types personally, and maybe answer some questions as we go? Like, how many font sizes? Do you define where and how do you define them? What units do you use? And how does this fit into the overall picture of media queries for your particular application or your sites. So for me, I usually create a typography dot CSS file in my project, whether I'm using scoped CSS style components, or whatever, I'll always have like a one file and that file will do both all of my global styling as well as export any custom typography values that are used throughout the site from there. And I really like doing that, because, like you said, it can get out of control, I find that putting it all into one file, or even one folder, lets me know that okay, if I'm fussing with the font size on this thing, I should try my darndest to go back to those base things that I've created, and adjust them in there. But so what I'll usually do is I'll set up my HTML tag, and I usually set the base font size on my HTML tag to be 10 pX, you'll also see people do that as 62.5%. And we've talked about this in the past. And the reason behind that is because the the default font size in, in the browser is 16 pixels. And it's really easy to set that to, like as a Canadian, I'm used to saying measurement systems and doing things based on 16th. doesn't make any sense to me doing things Yes. 10 threads What is going on? Oh, - -15 -00:08:00,900 --> 00:08:02,910 -Unknown: it was like, what, - -16 -00:08:02,910 --> 00:08:14,940 -what did they do they set the base font size to be 16? Because of it was an American that didn't or just because that was like a good read. That's a good readable size, I guess, if you don't have any CSS applied? - -17 -00:08:15,000 --> 00:10:58,470 -Wes Bos: Yeah, I think that's probably it. Yeah. Anyway, so by setting the base to 10, then anytime you use a RM value, you can always do it 10 base. So 1.5 REM is very easily calculated as 15 pixels, it is very easy in my head. years ago, there was a difference between using 62.5% and 10 pX, because the percentage allowed users to scale up their font sizes accordingly. That's not true. That hasn't been true for like five years, people always like to bring it up. Yeah, people are like, what about accessibility? Do you a blind people? And it's like, no, that's that's not a thing anymore. Because the like, try set your base font size to 10 pX and then zoom in and out with your plus and minus keys, and it will still go up and down. So that's not a that's not really an issue anymore. What else? So once I have that, I'll go through all of my base styles, paragraphs, lists, buttons, set a base font size on that usually like a 1.5 Ram on that. I'll usually use rems by default, and then I'll kick over to using EMS, if, if I find that I need to make a component where everything scales up accordingly. Although I was doing EMS the other day, and I switched it to using CSS variables and calc. Man, I was hitting some like weird like half pixel issues with EMS, and I switched it to calc and CSS variables and those issues went away. And I was like wow, that's maybe I should not be using EMS anymore. Maybe I should just use using variables and calculate the font size based off that. Then I go through all my headings and set them all up h1 through h6. They all have a file I don't have like a value that I increment by be curious to see If you have a more of a formula for calculating those I started, just kind of eyeball it and see what looks good. And then I'll also make classes where you can style an h2 as an h1. And I think this was the silliest thing ever, because there's probably even a tweet of me being like, why would somebody say like, h1 with the class of h2, and now I get it, it's because you want your headings to be appropriate nesting values for accessibility for Google SEO and things like that. But you sometimes want an h2 to look like an h1. And if that's the case, you don't just use an h1, use an h2 use the appropriate tag, but then you style it to look like like an h1. And then past that I just create variants. So sometimes I'll have like a hero h1 or a large text, I'll just make a bunch of little utility classes, I can slap on things. So I'll usually have just a handful of those that are used throughout my project and try not to get too carried away. Otherwise, like you said, Scott, it gets too messy. And - -18 -00:11:00,780 --> 00:11:20,100 -Unknown: have you ever opened up a CSS file and seen that like font size defined in every single class, like every, every single class because everything was so specifically defined that like people are just overriding have to override it. And the only way to fix that is to just write it all from scratch? That's it. - -19 -00:11:20,190 --> 00:12:03,750 -Wes Bos: Yeah, actually, I don't have like a rule where like, you should only apply font size to text nodes, like a paragraph or something like that. And not to like a div. But that's sort of the way that I swayed. Do you have like a rule like that where you don't set a font size on a div? Yeah, I do not set font sizes on divs. Definitely don't do that only on individual elements. And to be honest, I don't know how many times I even set font size like I. Yeah, I guess I do have a fair bit of font size overrides, but not like a ton ton ton. So for me, I do only assign them to specifically type based elements. So I'll define the font sizes on paragraphs, headings, those types of things. But that's pretty much it. Occasionally, a span span. - -20 -00:12:03,810 --> 00:12:15,060 -Unknown: Sometimes he gets spammy, getting spammy. That's mine. It's not like a huge thing that I do is just sort of a little system like, what about you? Do you have a bit more of a defined system? Or is it similar? - -21 -00:12:15,180 --> 00:16:43,200 -Wes Bos: Yeah, so we, at some point here got to rewrite all of the CSS to be CSS variable lies, CSS variables to do the whole thing. In our CSS, we do not define any font sizes that are not based off of a CSS variable. So every single font size in our scoped CSS, so to say, is pulling from a CSS variable and our CSS variables we have, let's see, it's really interesting. The way that I have done it is I have, I have nine different font sizes ranging all the way from 3.05 to rems, to 0.51. To rems, I do not use that 10% thing, just because I set the malware Yes, the only way. The only way the only place I know I, I'm picking it up, the only place I define the font sizes in the variables themselves. So it's not like I'm having to think about rems ever in my site, or thinking about rems pixels, anything, everything is based off of a couple of variables. So I have base font size, which is set to one RAM, I have base Nam size, small font size, smallest font size. And then from there, I have all of my headings set, heading 1234567 all the way down to seven. And these are just heading sizes. So again, no correlation to the semantic meaning of those element tags. And then I have a couple of extra ones which are are kind of like when I really need something big. That's not like my normal h1 size, I have an extra heading and then I have an extra big ass heading or anytime I need to like really get some big headings going. So that's really how I define my my font sizes. So I do them in rems, the values here you might be wondering like 0.5, to whatever rems like that's sort of, you know, odd, I got these values from a generator. So these values again, they did not come from my brain, they came from a generator, which we'll talk a little bit more about in a second. So I define them all in my variables, I only use the variables and I don't do any calculating. So I'm not calculating the size based on one thing or another. And since they're rems, they're all relative to the base rather than just using the variables correct. Like that. And like like to be clear, it doesn't matter that it's 0.554 or five rems because Scott doesn't remember that he remembers extra big ass large. Yeah, right. Like that. Anytime we're doing CSS and we see like font size, you'll see font size, base, nap size, font size, small font size, font size, like base font size. So like yeah, and you're defining that that in the CSS, it's so readable. And not to mention, it really keeps things hard on a system which is What I'm all about right now, how do you scale up and down with media queries in your system? Do you just change the body font size? Because I think that's all we do we change the body font size. Since we're using rems, the, and then ever so occasionally, we'll update one of the CSS variables, let's say the base nap size got to 80 bitty on mobile, when I yeah, scaled down the base font size. So then I have to like, override that one in particular. But since there's so much stuff based on that size, it just kind of all flows back together, you go bigger on when you go on mobile or smaller. It honestly depends. So my base font size, I set HTML to 18 pixels by setting the base font size to whatever you want, you can scale up the whole system up and down since it's all on rems, right. And then on the HTML tag. Yeah, I'm trying to find where I have my immediate query for that. I don't necessarily see. I don't know if I even update that I just said I did. But I don't know if we do anymore. What I should do is I'll bring my headings down, especially for like my marketing pages where my headings are like, like totally the whole entire width of the Yes, yes, the thing. Yeah, and I'm thinking about like those websites that I build, and I usually bring those down quite a bit. Or if you use, like v, w values for for your headings, then they'll just scale down based on the width of the thing, which is kind of nifty, because then you don't have to like write like four or five little breakpoints where you're like, Alright, bring it down a little bit more or a little bit more a little bit more. So that's what I do. Sometimes I'll bump the font size up a little bit on mobile, but I don't don't do a whole lot of touching past that on the the different font sizes. Yeah, for - -22 -00:16:43,200 --> 00:20:20,130 -what I'm seeing, I'm only overriding the base font size for my my HTML, I'm only overriding that base font size in the largest screen, and I'm making it larger. So look out mine does stay at 18 pixels all the way down to mobile. So hey, that's how I did it. So let's talk a little bit about systems. Because now that you get a little hint on how we're both doing this. Why are systems important within CSS, as well as typography in general, I'm a huge CSS systems fan. Big, big, big fan of this, because when you write your CSS onto a system, it enforces consistency. And one of the things that people don't realize with aesthetically building something nice looking, is that one of the things that makes things look nice is consistency. Right? If you have a slight difference in your font sizes, here and there or wherever, then that slight difference is going to add up and it's going to look weird, it's just going to look off, it's going to look and same thing with like spacing, right. Some of those like really low hanging fruit in designing us, CSS that looks nice, is like if you have a system for your typography and a system for your spacing, then as long as you have that system, it's going to be consistent. Now, of course, that system could be too tight or too open or whatever. But as long as you have that system, that consistency is going to be there and it's probably gonna look a little bit better overall. Another one is it takes all of the guesswork out when I'm starting like a new component. And I need a specific font size that it's not allowing me I know that my options are not every single number in the history of numbers, dot pics or whatever, I know that I can set it to base font size, smallest font size, any of my headings, and you know what those are my only options. So, but I have like nine font sizes. So if you can't find the correct size in nine font sizes, then that's a problem. It's true. Another like little benefit I was just thinking about your method of using variables is that you can easily scale up the font size for accessibility reasons without scaling up the rest of everything on the website. Because if you've like just use zoom on your computer, then it zooms up borders, margin, padding, images, literally everything else. And for a lot of users, they just want a bit larger font and not bit more Porter, right? Totally. So back in the day, these were popular, we have like the three little A's and you can allow someone to scale up or down the font size, you can make those really really easily by just incrementing your your base font size, and not incrementing everything else off that. Yeah, I love things like that man. Again, it just it makes it easy. You don't have to think about it. I know we have a lot of problems with like decision fatigue, we make too many decisions in a day. And the last thing I want to do is be making a decision on like each individual font size. So like if I can take any of that like decision making out helping reduce decision fatigue and making choices while coding without having to worry about if it's going to look nice. Like I already have designed, quote unquote, the system. So why do I need to design this individual thing as an individual thing? Like it should just fit in the system? I think also like if you are not good at design, picking a system like this really helps you make something that's not super ugly. Yeah, I think that's something we see like we were talking a couple episodes ago about like, just like things You know, people are like I'm sending him 1000 resumes and I can't get noticed. And there's sometimes things like drop shadow and whatnot that just turn off on your website. Another one is inconsistent font size. You might not even see it yourself. I Oh, yeah, this looks weird. Yeah, if you have a system, the system will save you have faith in the system. - -23 -00:20:20,400 --> 00:22:50,580 -So the last one I want to talk about is how do you actually design one of these font systems? Because all including my font system, which is really what, like 10 lines of CSS in here, I'll include mine in the show notes. But like, how do you design something like this, because I sure as heck did not come up with 2.411 dot RAMs, like I didn't come up with that. So one of my favorite tools on the web is a place I've been going to for a very long time. And there's a handful of other resources that do this exact same thing. But the one I really use and love and what we teach in my course, is a type hyphen, scale calm. Now type scale.com has this really basically gives you every font size you could need. And then if you need one more, there's a plus button at the top or bottom. So if you need to go bigger, you can always click plus and add on additional, larger ones that fit within the system. And they're all based on ratios. So like their major third minor, second, perfect fourth, Golden Ratio. And these these ratios are actually what defines the scale. So in the little sidebar, you can say, all right, I want a base font size of 18 pixels, I'm going to pick a perfect fourth, and then it has every Google Font ever. So you can set your heading font. And then you can set your body font. Or if you don't have those picked out, you can experiment with them in here to see what they're going to look like. So you can set all of your body font type and your heading font type, and the scale. And guess what it spits out an example on the right column bar that shows you body paragraph text with all of the different heading sizes and how it's all going to look. And you will see visually there that it's going to look nice, it feels like I'm like shilling for this website, I have no connection to Jeremy church who wrote this website, it's really nice resource. At the bottom of the page, there's a grab the CSS button and an edit on code pen button. So I always just grabbed the CSS, I grabbed the CSS directly. And that's what gives me all of my sizes. So this is really how I do it, I rely on tools like this, that are really just doing some math behind the scenes for me, that calculates how big each thing should be. And it gives you the the RAM and pixel values. So like whatever you want, if you want to do it all in pixels, they're all here and allows you to visually see that this thing is going to look nice. I don't think I would ever define a type system without something like this simply because I am just not trained in typography. typography is something that people spend their entire careers doing. So like, it would be very arrogant of me to be like, Oh, - -24 -00:22:50,580 --> 00:22:57,090 -Unknown: can I can just create this all myself? Because I'm too I don't know. - -25 -00:22:57,150 --> 00:24:14,010 -Wes Bos: Yeah. But when you're a type head, though, I mean, you you're good at typography. So did you use any sort of tools when coming up with this? Or are you just like, straight up? I know, it looks good, because I've always looked at your designs. And I always really, really love the typography and all of your designs, how did you come up with that stuff? That's a good question. I just kind of fuss around with it until it looks good. That's not fair West. That's not a few. But I think that's a little bit different for you, you're probably referring to like my, like course websites like with, like, marketing and things like that. Yeah, like those things you can I think you can be a little bit more up and down with the font sizes and see whatever because like I do go one by one, and adjust those as needed. But then like, I look at something like my own website and the blog, and I have a much more defined type system for that. Because there's blog posts, there's headings or subheadings, and things like that. And that's more of a website and a publication that needs consistent type sizing, whereas my marketing websites is they're always different colors and different sizes and they're skewed and rotated and, and things like that. So yeah, that's unfortunately I don't have a scientific method for that it's just the good old eyeball and good ol eyeballin - -26 -00:24:14,039 --> 00:24:19,110 -Unknown: Yeah, in like for somebody like you who's just like very skilled in design, like that. - -27 -00:24:20,280 --> 00:25:18,870 -Wes Bos: My wants in design have always been much greater than my abilities. So like I want it to look a certain way but I don't like it. I'm not really good enough to aesthetically look at this and know how to tweak it so some people always say your stuff looks really good. You are a designer month one just kind of pick and values out of a generator here. But um, thank you. Yeah, it's good. It's, it's, that's, again, that's the whole point of the type system, right? It saves you from maybe yourself if you don't necessarily know what to do, the type system will tell you what to do. Totally cool. Well, this is a CSS and type systems. I have a lot of thoughts on CSS and CSS systems in general in terms of the consistency and all these things. So maybe we can do some more of these. We can talk about color systems. I've done some neat stuff with hsla recently. So font size is definitely one. I think we have a lot more things to cover in terms of like, how do you come up with your shadow system or your z index system a year? the very worst? Yeah, good margins. - -28 -00:25:18,900 --> 00:25:25,320 -Unknown: Oh, do you got a couple of BS variables in my thing, and everyone always asked what they're for. And it's sir box shadow - -29 -00:25:25,770 --> 00:25:26,670 -box shadow. - -30 -00:25:28,080 --> 00:25:54,750 -Ours our level we have level one, level two, level three. that's appropriate is appropriate. All right, that sounds good. Thanks so much for tuning in. And we will catch you on Wednesday, please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax32.srt b/transcripts/Syntax32.srt deleted file mode 100644 index ed13f703e..000000000 --- a/transcripts/Syntax32.srt +++ /dev/null @@ -1,528 +0,0 @@ -1 -00:00:01,290 --> 00:00:10,650 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to linsky and West boss. - -2 -00:00:10,830 --> 00:00:21,450 -Wes Bos: Welcome to syntax everyone. This is the podcast where we dish out the tastiest web development treats with me is as always is Scott to Lynskey. Hello Scott, how you doing today? - -3 -00:00:21,480 --> 00:00:38,040 -Scott Tolinski: Hey, I'm doing a pretty good I'm off to like a fresh start today I applied the update that's been bugging me in the top right corner of my MacBook for like, a solid district a month. And now it's like do you want to do this? No. Do it. I'll do it next. Tomorrow. And then are you? - -4 -00:00:38,310 --> 00:00:40,680 -Wes Bos: Yes, you upgraded to High Sierra? No, this - -5 -00:00:40,680 --> 00:00:50,670 -Scott Tolinski: is this is just a standard update. They're just so bothersome on OSX or Mac OS. They're just like, that little pop up pops up Yeah, times and won't go away. - -6 -00:00:50,970 --> 00:01:09,390 -Wes Bos: I went hunting for a way to like disable those annoying pop ups are so bad. I couldn't find anything. It's so annoying. It's I don't want to update my computer right now. Because it's gonna take it reminds me of the old windows days where you would like update and then it'd be like, four hours remaining. You're like, damn it. There's my entire day. - -7 -00:01:09,420 --> 00:01:17,549 -Scott Tolinski: I know I did it right before the show. And I was sort of, I thought it was gonna be kind of quick. And then it was like it will be 20 minutes and has like 20 minutes. - -8 -00:01:17,549 --> 00:01:18,299 -Unknown: Are you serious? - -9 -00:01:18,299 --> 00:01:22,890 -Scott Tolinski: Okay, I guess yeah. Hey, no, baby. Whatever How you doing though, - -10 -00:01:23,159 --> 00:01:58,310 -Wes Bos: I'm doing pretty good, pretty good. I've been working away on my graph qL course which sick I've been really I've had some like, I don't know, it's, it's a bit hard to to get your head around everything and all the different moving parts, getting it all working together. And I feel like I've hit a stride now with all the different pieces. And I feel like I can just like, I'm really confident in being able to teach all of the stuff that I have set up right now. So now I'm just kind of wrapping up the the app that we're gonna build, then I have to style it and design it and, and then it's time to record it. So I'm pretty, pretty excited about that. - -11 -00:01:58,379 --> 00:02:11,750 -Scott Tolinski: Nice. Nice, nice, nice. Yeah, I definitely helped that I rebuilt my entire platform with graph qL before I tried to start teaching good cuz I like any sort of bump in the road, I would have hit a hit along that way first, and - -12 -00:02:11,780 --> 00:04:21,660 -Wes Bos: yeah, yeah, just for those listening. Actually, maybe we should talk about this real quick is um, so in our graph qL episode, we talked about graph cool. And then how graph cool open source their thing. And then it got, it got kind of switched over to Prisma, which is an Prisma. And yoga. So instead of what you can still use graph, cool. But if you want a little bit more control over the resolvers, meaning like how does your data come out of your database, they've sort of split it into two pieces, which is Prisma, which is the back end database for you that it comes with a built in schema, and all of the mutations and queries and everything, you need to be able to have a full blown graph qL server up and running. But the thing is, it doesn't have any authentication or any custom stuff. So if you want to add authentication or custom stuff, which everybody does, then you you slip a thin little yoga server in front of it. And then you can add your sprinkle on your little custom stuff on top with you could do authentication, you can do custom queries, it's like just an express server that sits in front of Scott's dog barked just a little Express server that sits in front of your Prisma and I really liked it it was a little bit to get up and running a little bit to understand like what are all these moving pieces but well worth it? I think graph qL has a bit of a learning curve that is well worth going through. Before we get started today, Scott, I want to talk to you about a little bit of a contest that we are running and we're going to run a contest both on Twitter and on Instagram. So the way that you want to first of all what are you gonna win Scott you're gonna win either one of my courses or one of Scott's courses you choose whatever course you'd like to learn next. And the way that you enter is you got a screenshot yourself listening to the syntax podcast so and then post it up either to Twitter and or Instagram so screenshot yourself listening to syntax posted up on Instagram and tag Scott and I so on Instagram, I'm at Wes Bos and Scott you are at s - -13 -00:04:21,660 --> 00:04:22,740 -Scott Tolinski: to Lynskey. - -14 -00:04:24,019 --> 00:04:46,680 -Wes Bos: Awesome and on Twitter I'm at Wes Bos and Scott you are s Tolan ski. So we're the exact same thing on both and what we're going to do is we're going to pick one winner both from Twitter and from Instagram and award you a free course. Nice and also hashtag TC treats please because people are doing that anyway. - -15 -00:04:47,790 --> 00:04:50,509 -Scott Tolinski: Is that a requirement? Are you making that a requirement? - -16 -00:04:50,699 --> 00:04:53,190 -Wes Bos: Yes hard requirement hashtag tasty treats hashtag - -17 -00:04:53,190 --> 00:04:54,660 -Scott Tolinski: tasty treats. - -18 -00:04:55,170 --> 00:05:52,410 -Wes Bos: All right on with the show. So this episode is brought to you by tu tu Awesome companies xojo xojo is, is a cross platform development tool for creating native apps for desktop, mobile web and Raspberry Pi and fresh books, the cloud accounting software that I gush about almost every single week on this podcasting on this podcast. So today, we're gonna be talking all about email and not actually dealing with personal email. But we're gonna be talking about sort of the flip side, which is when you have an application, or when you have like a business like Scott and I do. What's the email story? There's a lot that really goes into it in terms of sending email and compiling email and applying styles. And what's the difference between transactional email and marketing email, and there's all kinds of rules around both of those that you need to follow. And it's, it's a bit of a complicated space. So hopefully, we're gonna simplify the different pieces around sending email. Yeah, - -19 -00:05:52,440 --> 00:06:26,190 -Scott Tolinski: and to be entirely honest, you know, email is not one of my favorite things in the entire world between spam folders and MX records, and HTML templates, all that sort of stuff. I mean, there's just so many aspects of it that are not a lot of fun to work on. But I mean, there are a lot of fun aspects as well. And I'm sure I'm speaking from my perspective, you might be the the email, the email person who's out there who loves it, it's this. I just don't love it. I don't love working with email any sort of way. But it's one of those things you got to do. - -20 -00:06:26,610 --> 00:06:38,160 -Wes Bos: Yeah, yeah, absolutely. So why don't we start off? just explaining how do we use email in our apps as well as in our businesses? So you want to give that a shot? Yeah. So - -21 -00:06:38,160 --> 00:07:21,930 -Scott Tolinski: I have a couple of different email situations. Basically, through the level of site, you need to send emails, anytime you have user accounts or sales going out, if somebody signs up for a subscription or purchases, something email needs to send out from the site itself. Yeah, so I'm sending email anytime. Yeah, anytime someone places an order makes a subscription, that stuff. But I'm also sending an email from the marketing side of things to let the users know whenever there's a new course out, or whenever there's potentially new stuff on YouTube, or there's new features on the site. So there is this like sort of two sides to the thing where the application needs to be sending emails, and then I'm going to be triggering and sending emails myself through a third party. - -22 -00:07:22,920 --> 00:09:23,520 -Wes Bos: Awesome, I'm pretty much the same. So whenever anyone buys a course for me, it automatically sends them a magic link, which they can use to click over to my course platform because I have many courses on the same course platform every single time that you buy something it sends over magic link, and that will detect if you already have an account, and it will ask you to sign in. If it does, if you don't already have an account, because I don't want to make people sign up for an account before they buy it. I just want them to buy it. And then that sends a magic link, they click it, they can register a password, and then they can sign in. So that's the transactional email part of it. And I also have a couple other times password resets, obviously, the ability to merge email addresses or merge accounts on my platform, because the most bizarre thing to me is that there's some people out there that have like 15 email addresses, and they never know which one they use. Yeah, yeah, to sign up for it. And I just don't know how you live your life like this. But there's people out there that have all kinds of or people that use, like modifiers on their email every single time, which is something I kind of wish that I built into my platform at first, which is there's some, there's some libraries out there that will strip modifiers off an email. So if somebody signs up with like, Larry, plus Wes Bos, or Larry dot, Wes bos@gmail.com, then it will just strip out those modifiers, it'll still it'll still keep that email on file. But if they use another modifier down the road, it's always going to sign them into the same account, they don't have to remember which modifier they use. But that's not something I did from day one. So it'd be a bit of a task, I think, to go back and change that. So I do that. And then on the marketing side of things, I have a huge email list that I send, I don't send out email very frequently, maybe once or twice a month, just little updates as to where I am. And that is done. I'll talk about that that's done through my drip account. - -23 -00:09:24,020 --> 00:10:09,390 -Scott Tolinski: Yeah, in addition to that, like the modifier thing, or the extra emails, when I was working at that startup, there wasn't an exorbitant amount of people who would sign up for an account. And then they wouldn't do this, the whole like, connect your Facebook account or whatever, they would log out at some point or go to a different device, and then click, you know, sign up with Facebook, and they would just expect it to be on one account magically, like it would it would expect it to know somehow that whatever email they used, and their Facebook account that they signed in were the same account even though they never linked them or didn't The sort of process there? Oh, it's just it was so like, Oh, wait, what do you mean, your your stuff? Isn't there? Oh, you you made a new account? Yeah, that's - -24 -00:10:09,390 --> 00:10:21,390 -Wes Bos: always, always confusing with like, did I sign in with GitHub or Facebook? And ideally, what would happen is that when you sign into Facebook or GitHub, these places already have your email address, and those are confirmed. Right? - -25 -00:10:21,780 --> 00:10:24,920 -Unknown: So what if the emails different on lately, right, - -26 -00:10:24,920 --> 00:10:47,520 -Wes Bos: likely is and then you have all this like, I don't know, it's such a such a mess. And I hated having to change people's accounts and merge them. So I just built a whole merging process where you can give it your new email address, and then it has to email that new address to confirm you're actually that person. And then once you confirm that, it'll flip you back to the site and merge everything into one big account. - -27 -00:10:47,640 --> 00:10:48,360 -Unknown: Slick. - -28 -00:10:48,510 --> 00:11:57,060 -Wes Bos: Yeah. So that's, that's the difference between the first path we talked about, that's called transactional email, you send somebody a password reset, or, or receipt or something like that. And then you have marketing email, which is, you send more like bulk email to somebody saying, hey, buy my course. Or here's an update I did. Or here's the latest syntax podcasts that we've done. And we're going to talk about both of those today. So let's start with the the first half, which is transactional email. And there's a whole lot that goes into this like, generally, transactional email is you send one at a time. And a whole bunch of stuff needs to happen, you need to template out the email. So you, you have some sort of template where you have some sort of variables like the person's name and an ID. In my case, it's a magic ID that they need to click, how much they paid, what course they bought, all those variables need to be put into your template and then compiled, and then then they need to be styled. And the downside to HTML email is that your CSS needs to be inlined. So it needs to be all done via style attributes. And, - -29 -00:11:57,480 --> 00:12:00,720 -Scott Tolinski: and we'll be talking a lot about more about email templates - -30 -00:12:00,810 --> 00:12:25,800 -Wes Bos: later on, in just a sec. And then, and then obviously, it needs to be sent. So you need some sort of service to send your email because you can't just use PHP mail function or, or the built in mail function in any of these libraries anymore, because that was 100% chance of getting marked as spam. So do you want to break down what your sort of flow looks like for sending a transactional email? - -31 -00:12:25,890 --> 00:13:59,400 -Scott Tolinski: Yeah, so for me, I actually, my data comes in directly from the database, I then compile it into a template using handlebars. So I basically just take all of my my JavaScript data, I compile it into HTML, using a handlebars, templating language, basically throw all my data into the template itself, I have my templates all saved as external HTML file. So I basically just merging the JavaScript with this HTML file in the template that's already defined. Then I'm using a built in core package for Meteor called email to basically send out the email to or to the email provider, which my email provider is mandro. So mandrill is the one taking care of all of the sending. So basically, at the root level, I've just connected my API keys and everything with mandrel. So that way, with the meteor email package, when it sends out the email and knows to use mandrel, mandrel takes care of sending out getting those to where they need to go, basically. So yeah, that's my setup, it's really pretty much night, nice and lightweight. The reason I'm on mandrill is because I was on there when they had the free platform. And when they started making you pay, I was already using MailChimp for my for my marketing email. So at that point, I was just like, well, I'll just, I'll just pay for mandrill. And, you know, bite that bullet right now. So who knows, we've talked about this before, but maybe that could see that changing in the future off of manjal. - -32 -00:13:59,430 --> 00:14:08,250 -Wes Bos: Yeah. And here's a question for you is, do you first I've got two questions. First, do you do you have to inline any of our CSS? Or does the meteor take care of that for - -33 -00:14:08,250 --> 00:14:50,970 -Scott Tolinski: you? I have basically have built and designed all of my HTML email templates, as if they were just standalone HTML email templates, the only thing I'm doing is inserting data. So the CSS is all inlined in the templates themselves, okay, so I built the templates as like does design are platform agnostic, it doesn't necessarily matter. And most time these are really pretty bare bones. Most of my like fancier emails are done through my marketing email campaign. So a lot of this stuff is pretty much just like set up to look like a receipt or, or here's your information or whatever. But yeah, I have all the CSS in lining in the HTML template. It's really just two pieces of HTML template. JavaScript coming in, merging together, - -34 -00:14:51,000 --> 00:14:59,970 -Wes Bos: send it out. Awesome. And then my other one is to connect to mandrill or using mandrels API's. Are you just using SMTP - -35 -00:15:02,010 --> 00:15:03,840 -Scott Tolinski: I'm using mandrels API's? - -36 -00:15:03,870 --> 00:15:57,570 -Wes Bos: Yeah, okay. Interesting. Okay, because that one one thing that I learned was that, um, I guess it's better to or for my case, at least I was using Amazon SES to send email. And they they pulled it at some point because I had someone run a bunch of spam email addresses through my system, which is before I had any, any sort of anti spam measures in place. And I was I'm using smtp. Sorry, Oh, you are okay. Good. Because Luckily, I was like, shoot, I can't send any emails and people are buying stuff. And then people okay, never got an email. So luckily, I was using smtp. And I was able to flip it over to another service provider. Yeah. Which is great. So don't ever use any sort of proprietary email sending API's. Yeah, just use straight smtp. - -37 -00:15:57,720 --> 00:16:01,200 -Scott Tolinski: This is one of those things I set up like two years ago, and I haven't thought about it since. - -38 -00:16:03,150 --> 00:16:06,930 -Wes Bos: That's good. That's, that's nice when you can just set it and forget it with something simple like that. - -39 -00:16:06,990 --> 00:16:18,570 -Scott Tolinski: Yeah. And for me, like I said, I hate I really just don't like working in the email that much. So I guess it's not necessarily been neglected, but it's definitely not the thing I spend my my most time on. - -40 -00:16:18,800 --> 00:20:08,400 -Wes Bos: Yeah, yeah, I spent some time maybe like a year ago, making mine look a little bit nicer. Just because anytime something like looks a little bit weird on someone's like, bizarre email client that I've never heard of that I get all kinds of email. So let me really run through what mine looks like. It's pretty similar. Just use a couple more packages. So my own thing, my course platform is built in pug template. So I also use pug to template out my emails. So I template those out. Except for instead of using like divs, and paragraph tags, I actually use sort of an abstraction on HTML called it was called inky at the time, but now it's called zurb, foundation for emails. And it's kind of like react. And we'll talk about an alternative to this in just a second. But the way that it works is instead of having like a paragraph tag, or a image tag or anything like this, because aligning these things are like a, like you're trying to have a table two pieces of data side by side, then you have to, like have tables in HTML, because you can't use floats or, or grid or Flexbox, or anything in CSS emails, so you have to use these old school tables. So what zurb foundation for emails does is it just gives you these tags that are things like column or row, or I'm trying to figure out what the Let me pull up, maybe you can pause Just a sec, let me pull up the actual. So they essentially have this these different components, like rows and columns and buttons and rappers and spacers. And these are just like tags called column and row and button, and then they get converted into whatever the nasty table equivalent is to that thing. So it's really nice, because you don't have to think about like, Okay, how do I design a table because I totally forget, within a table within a table. Exactly. It's just nasty how, how ugly the markup is for emails. And you don't have to think about that at all. You just use a column tag, and then you put two column tags beside each other. And that will convert it to whatever the terrible call span table markup is. So that's great. And so what I do is like, I code my emails in pug with these like tags that aren't really HTML, then I run it through the Serbs NPM package called Anki. And Anki turns it from these beautiful tags into the terrible table HTML. Then I run it through a package called juice. And what juice does is it takes your CSS, I just write my CSS and a style tag. And then it will figure out what the what the CSS should be applied to which elements. So if you have 14 paragraph tags in your email, it will take your P selector and inline it on all 14 of your emails are all 14 of your paragraph tags. And if you have a div with a class of wrapper, it will take all of your styles from dot wrapper and apply it to your wrapper, right? It will inline all of your CSS for you. That's what juice does. And then finally, at the end of the day, I have this ugly HTML table email with all of its CSS in lined and I haven't had to write either the two terrible things that will email which is inline CSS and table markup. And then finally, I use node mailer node mailer is a package that can connect to smtp. And then I use what do I use postmark, as usual, yeah, post sender, and that's like an alternative to something like mandrill. And then they will actually do the delivery of the email. So there's a whole bunch of steps but if you look at my code, and this is a Exact same way we do it in my node course. It's it's only like four or five lines of code converting from one to another. And that's so - -41 -00:20:08,490 --> 00:20:42,750 -Scott Tolinski: here's the, here's the template at the current state pass. And then the next step, here's the template now pass in the next step. Shoot that thing out. Yeah, that's pretty much how mine is, in a sense, just a little bit different. So I've been there. I guess the major, major differences are I have inline my CSS because I don't really have that much to be honest. Yeah. And obviously, the the pug, that sort of stuff. So yeah, that's really super interesting. I mean, what other sort of senders are there? There's, you said, postmark. I use mandrel. There's also is mailgun, - -42 -00:20:43,410 --> 00:22:15,060 -Wes Bos: mailgun, sendgrid. sendgrid. Yeah. There's also Amazon CMS, which is dirt cheap. I've used that for a long, long time. But I did find that my deliverability was not as good with that. Like, so what happens is that often an email will be undelivered it will either. There's a couple of reasons why an email cannot get to somebody could bounce the wrong email address. It could be blocked by the ISP. So often, I'll have, like corporate users, they'll have some sort of thing where it will block it because it's they don't know who Wes Bos comm is it will, might be. So I don't know, there's a bunch of different arrows. I can't remember all of them right now. But with Amazon MCs, there's no way to tell what happened to it unless you actually build your own dashboard. And that sucks. So when I moved over to postmark, I was so happy because they allow you to just like search for someone's email address. And I have this like, hooked right up into my reporting dashboard. So someone says like, scott@scott.com, I didn't get an email, all I have to do is click a button, and it will tell me when the email sent, I'd be able to preview the email that that did get sent. It will tell me if it bounced or if it was blocked by the ISP, or if it was open, or if it wasn't, so there's all kinds of stuff that you can look into and almost always I can tell exactly what had happened. And we can figure it out for the user immediately which is great. - -43 -00:22:15,150 --> 00:22:47,670 -Scott Tolinski: Yeah, I love that stuff. You know, the sort of those tools and for me, I guess that's one of the reasons why I've never left mandro is that I've never really had a huge like issue with deliverability there's never but never had a big issue and I've had issues with deliverability with mailgun before pretty heavily in the past so yeah mandrill has never had any problems for me I've never really had to deal with that so I guess that's a plus one from Andrew for me but also I haven't used postmark which looks pretty fantastic so - -44 -00:22:47,880 --> 00:23:24,900 -Wes Bos: yeah I was I was super happy with it and also with postmark there's a couple things you need to do when you when you need when you need to use a new sender is you need to verify that your your domain name so if you're sending from Wes Bos calm there's a couple different ways that these companies verify that you own Wes Bos calm and can send email from that and most of them do it via What's it called? Is it like a DK Im on your domain or something like that. And you have to like set a DNS record on your domain name and then wait for that to propagate and then you get verified - -45 -00:23:25,169 --> 00:23:43,890 -Scott Tolinski: sometimes the the domain registrar's all have like a different way they want you to paste that. Yeah, and then there that could be a total mess like whether you have to wrap it in quotes or whatever. The thing that they tell you to paste in there is like not absolutely how you should do it. And you have to like sort of try a few times before recognize - -46 -00:23:43,919 --> 00:24:30,390 -Wes Bos: try something wait a couple hours. It doesn't seem to work. Maybe it didn't propagate. Yeah. Or maybe it's such a pain so yeah, that's a huge pain. postmarks a verification is just an email initially, and then you can get sending right away. And then you can go forward and and verify via your domain name, which I believe gives you a little bit more of a boost the boost in terms of like Gmail, not thinking that you're spam, because you have taken these extra steps to actually verify your domain name and the actual email address itself. Like one stupid mistake that I made is I always sent from West Wes Bos calm and then one day I sent out a new email and I'm like, oh, use this new email address. Wes Bos calm, total mistake, my email open rate just dropped - -47 -00:24:30,390 --> 00:24:33,660 -Scott Tolinski: like, like 40% or something is untrusted. - -48 -00:24:34,020 --> 00:24:53,100 -Wes Bos: Yeah, you got it. You got to like build up to to that. And you got to have people actually opening these emails, like the first thing I did was sent 200,000 email addresses, email, emails from the thing, which is stupid mistake. But you got I guess you gotta have a little bit more reputation behind a specific email address at first. - -49 -00:24:53,160 --> 00:25:23,580 -Scott Tolinski: Yeah, that's a weird thing. I remember in the mailgun dashboard specifically, there was a whole like email reputation meter. And it would like telling you how golden this email was, or whatever how trusted it was amongst clients with this a lot of tricky stuff, because it's not an easy fix. And a lot of people want like a fix this right now sort of thing, right? But like, if your email gets marked as being untrusted, that's not necessarily an easy thing to come out of really quickly. - -50 -00:25:23,970 --> 00:25:53,790 -Wes Bos: Yeah, yeah, that's part of the reason why I don't email a whole lot is because I want my emails to feel good. And I want people to be excited to get them. And especially with developers, they get real cranky about marketing real quick. So if you're sending way too much like that, the developers are very quick to hit the I noticed myself, I'm very quick to set hit the spam button on someone who's annoying me being like, Hey, I didn't I this is too much. I didn't say that you could do this, right. - -51 -00:25:53,820 --> 00:25:54,750 -Scott Tolinski: Yeah, definitely. - -52 -00:25:55,860 --> 00:26:09,450 -Wes Bos: So that's, that's transactional email. In in a nutshell, sending all of it, maybe actually, those, there's a couple more, one more service that he used, and it's called mail, catch, mail, trap, - -53 -00:26:09,900 --> 00:26:13,860 -Scott Tolinski: mail job, you ever use this, I have never heard of this failed trust. - -54 -00:26:14,010 --> 00:27:14,760 -Wes Bos: So if you are developing locally, and testing things, oh, you, there's always the ability where you would accidentally write some code that would loop through all of your users and email them a test email. And that's a nightmare. So what we want to do is use mail trap, which is like a kind of a fake SMTP server, where you set your credentials when you're developing locally to be mail trap, traps, SMTP instead of postmark or whatever. And then any email that gets sent will not actually ever reach the user. But it will be trapped in this like fake email inbox called mail trap. And that will, that will show you all the emails that were sent and what they look like in text and HTML. And it's great. I love it. I used it my node course. And it's great because you don't have to for tutorials as well, because you don't have to like have the user go through the whole domain name validation thing. You can just use mail trap. And there's no validation there because it's a fake email inbox. Nice. - -55 -00:27:14,910 --> 00:27:36,810 -Scott Tolinski: Yeah. So it's great, because it looks like you can actually open the email and experience it like an inbox, which is nice, because what my system does is it just console logs, the HTML when an email gets sent out locally, so it just doesn't ever doesn't ever send it that's just like a the built in functionality for the meteor email package. But having actual email to open on development would be kind of nice. - -56 -00:27:37,380 --> 00:27:55,950 -Wes Bos: There's, there's some local versions of this as well. So you can host your own. I believe it one's called mail hog. And it looks like it's a Ruby. So if you want to install mail hog, locally brew, install mail hog, you can run a local version, but I've been happy with the free version of mail trap. - -57 -00:27:56,010 --> 00:28:00,330 -Scott Tolinski: Yeah, looks like you get 50 messages. So you just gotta like clear out that inbox all the time is that - -58 -00:28:00,750 --> 00:28:02,370 -Wes Bos: it just deletes the old one. So - -59 -00:28:02,400 --> 00:28:07,710 -Scott Tolinski: nice. Oh, doesn't worry. I don't need anything more than that. Nice, super nice. - -60 -00:28:07,950 --> 00:29:33,110 -Wes Bos: Yeah, so big fan of that, I would definitely check it out. If you're looking at doing email before you accidentally email all of your users. Sometimes I get like a push notification from an app being like test. And I was like, oh, someone screwed up, then we'll we'll talk about that. Let's take a quick break for our sponsor. And our sponsor today is xojo. With xojo, you can really just write one version of your application for a Mac and say you can write it on a Mac or Windows or whatever it is, you click a button and it will be compiled down to native versions on Windows on a Raspberry Pi on the mobile on mobile on the web. It's kind of one of these right? Once it works natively everywhere. It's not something where it's kind of just HTML j. s running absolutely everywhere. It's actually native xojo lets you abstract yourself from specific platform details. So you can focus on what makes your app unique. All Apps have completely native controls, even if they weren't developed on that. That platform just used to drag and drop interface with one language to program all the functionality. Users include fortune 500 companies, citizen developers, professional developer, it hobbyists, and students, anyone who wants to build apps faster, listeners can get 20% off with the coupon code syntax, and you can check it out at xjo.com, forward slash syntax. Thanks so much to xojo for sponsoring. - -61 -00:29:33,450 --> 00:30:53,610 -Scott Tolinski: Thank you. Yeah, so we touched on this a little bit in the last section where we sort of talked about our inlining, our CSS and stuff like that. Let's talk a little bit about designing emails. We mentioned that there's tables within tables within tables, because, unfortunately, all of the awesome layout features that we have in CSS and even some of the layout features of the past and CSS that weren't so awesome. We never had access to in the first place. Like if you could use CSS says grid and HTML emails, my life would be amazing. So in HTML emails, you're largely expected to one inline all of your CSS and to use tables to layout everything. And this can cause some headaches. Luckily, there's a lot of different packages out there that can help you sort of tame the system or make it so you don't even have to interact with the system. And they run their interim like goi sort of drag and drop stuff to write in one language compile to HTML template. There's all sorts of nice starter kits, too. We mentioned the zurb Foundation for emails, which can give you some really nice basic starter templates that are responsive and stuff like that. They're going to look nice on your, your phone, email client. So yeah, let's talk a little bit about your your process for designing an HTML email, like where do you Where do you start? - -62 -00:30:54,270 --> 00:32:01,080 -Wes Bos: Yeah, usually what I'll do is I'll start with an existing existing template, just because like, I'm not doing anything all that complicated, I try to keep my stuff to just one column, top to bottom. But even then, like I just once I just tried to have a button with padding, and, and a background color, and like, the whole thing was just like garbled, I was like, really, I can't use padding and background color on, like, whatever this crazy thing is. So that's when I switched to using zurb foundation for emails, just so that it could use like a button tag, and then it will compile it over to whatever the equivalent is because like, honestly, there's there's people out there that are full time, email writers, and they're really good at this, but I just don't have the time or the interest to learn what the equivalents are. So I wouldn't say that anyone should really learn what those things are, just because there is the alternatives out there, right? Like you can get a template and just change what you want. Or you can use it. There's also this other one MJ ml. You've seen this one, Scott, we've talked about it on the show before. - -63 -00:32:01,140 --> 00:32:17,160 -Scott Tolinski: Oh, yeah, I love MJ ml. Because it's basically, I don't know if you'd want to call it like Gatsby for emails, but it's a static site. It's a static email generator for for react, you get to write your stuff in Oh, wait, am I thinking about the wrong thing? - -64 -00:32:17,190 --> 00:32:18,860 -Wes Bos: No, no, you're right. It's written in react. - -65 -00:32:18,900 --> 00:32:23,010 -Scott Tolinski: Sorry, I like opened up this the MG ml page. And it didn't say anything about react. And - -66 -00:32:23,580 --> 00:33:08,400 -Wes Bos: I think that there may be, I think that there may be hiding, not hiding, but going away from the fact that it is react, because as an end user, you probably don't care that it's react. Yeah, you're right, you just care that I'm writing these tags. So they have tags like MJ, body MJ container, MJ, column MJ image, and then those are behind the scenes, those are just react components, right. And then as we know, React components have a render method, which will, under the hood, render out the the equivalent gnarly HTML that you care about. So it's just like zurb foundation for emails, where you can write in their tags in their flavor, and they'll take care of converting it over to to whatever the equivalent is. - -67 -00:33:08,429 --> 00:33:37,500 -Scott Tolinski: Yeah. And you know, what's cool about this? Is that it, I don't know, it makes it makes writing your templates a lot easier. The problem I have with this, the only problem I have with it is that it'd be really nice if you didn't have to use this as a command line utility. Like, I would really like to be able to use this template code in my actual setup on the server and have it output directly while I'm sending to be maybe dynamic, like create dynamic templates and stuff like that. - -68 -00:33:38,550 --> 00:33:46,950 -Wes Bos: Is that not available? I actually haven't used it before. But what I assumed it would be I'm just looking at their docks right now. It looks like they have like an API that you can hit. - -69 -00:33:47,100 --> 00:33:53,820 -Scott Tolinski: They might not. When I was looking at it, it was just a command line utility, which is simply just taking in the template spitting it out. - -70 -00:33:55,020 --> 00:33:56,430 -Wes Bos: Let me pull this up. And - -71 -00:33:59,610 --> 00:34:04,740 -Scott Tolinski: it could it could have evolved from since then. Or it could be mistaken. Oh, yeah, - -72 -00:34:04,770 --> 00:34:51,000 -Wes Bos: they say inside no j so you import m j m l to HTML, the import your your package. And then you feed it a bunch of MG ml, which is the special tags that they've created. And then that will kick out your HTML. So in theory, I could swap this out in my pipeline for it with zurb Foundation emails, or zurb foundation for emails, and it will kick out HTML. So it's not just a command line tool, you can use it in line in your actual application. I think that they just do they they show the API and they show the the command line utility because a lot of times people are just copying and pasting it from their local computer to like their their MailChimp or drip or whatever it is are using. - -73 -00:34:51,150 --> 00:35:06,060 -Scott Tolinski: I might be tripping but like, I swear, I found an issue on GitHub and someone was like it'd be really great if we could use this on honors node server and They're like, yeah, maybe in the future. I like again, last time I looked at this was maybe about a year ago or - -74 -00:35:06,090 --> 00:35:07,770 -Wes Bos: Oh, I guess probably implemented now. - -75 -00:35:08,280 --> 00:35:27,030 -Scott Tolinski: Yeah. If I'm totally wrong on this, and you're a creator of this, and it's always been able to do this, please let me know. Because I feel like I'm living in an alternate universe right now where this couldn't do this a little while ago. And now we can. So either way, that's exciting. I'm actually going to start using this in more capacity, then. Because this is exactly what I want. - -76 -00:35:27,420 --> 00:35:41,790 -Wes Bos: What I think is cool about this, I don't know if this is this is probably possible, like, could you use your own components? Like, for example, if you had like a product component on your website? Could you also use that to render out the product into your email? But then maybe you'd have to worry about - -77 -00:35:42,840 --> 00:35:51,900 -Scott Tolinski: HTML styles, and inline styles like because with this, this wouldn't know because all of its components are outputting, specifically to HTML email. - -78 -00:35:52,260 --> 00:36:01,460 -Wes Bos: Yeah. But if you if you use like a styled components, would it just kick the CSS? people screaming at us right now being like, - -79 -00:36:01,460 --> 00:36:06,900 -Scott Tolinski: read the docs? Yeah. And with that, with that CSS actually look good on email? - -80 -00:36:06,980 --> 00:36:14,420 -Wes Bos: Yeah, that's a good question. That's the that's the dream, right? Is Yeah, well, to use your components wherever. But maybe not. - -81 -00:36:14,730 --> 00:36:20,250 -Scott Tolinski: I'm gonna, I'm gonna start implementing this, I'm gonna start doing it right now. I absolutely love this. Yeah, - -82 -00:36:20,820 --> 00:36:28,880 -Wes Bos: it's kind of neat. They also have an API as well. So you could, you could even make like an online editor, where you Oh, they even have that they have it all my editor, - -83 -00:36:29,210 --> 00:36:33,150 -Scott Tolinski: and j ml. What we can do next. - -84 -00:36:34,830 --> 00:37:19,800 -Wes Bos: Probably everything that we are thinking about right now, they already had. Um, let's talk about testing email. So one of the frustrations with email is that you'll often get a screenshot from a user being like, this is messed up on this bizarre email client or two versions, old iPad, and you're like, cool, but I can't inspect it, and I can't see it. And I can't test it. Like, the really frustrating thing about email is that every time you want to see what it will look like in an email client, you have to actually send an email. And then even then you have to have that email client to be able to view it. So there's a solution to this. And it's a service called Litmus. - -85 -00:37:19,950 --> 00:37:22,830 -Scott Tolinski: Oh, actually a different one. So we can talk about Oh, - -86 -00:37:22,880 --> 00:38:25,940 -Wes Bos: cool. Yeah, I'll have to hear what yours is. Yeah. And what I do is anytime that I used to do email design for clients, and anytime I would do one, I would bake in one or two months worth of Litmus, because I think it's like 90 bucks a month or something. Let me pull it up, bro. It's so expensive. Yeah, the basic is, is 79 bucks a month billed annually. And the plus is 160. So it's super expensive, but they know that that people need it. And they know that email is where most company's money is, so they're willing to pay it. And this will just give you screenshots of your email in all of the different clients from some bizarre iOS email client to old versions of Outlook, and so on. And it's pretty fast. It's pretty quick. It used to be built into MailChimp, I think it still might be built into MailChimp. And the only frustrating thing is that there's still it's just a PNG image, you can't right click inspect element. So if something's broken, you just got to keep guessing until it starts to show up. - -87 -00:38:26,609 --> 00:40:28,830 -Scott Tolinski: Yeah, okay. So I use something called the email on acid email on acid calm, which is they used to have this ridiculous design style. I mean, they still breathe. It's actually they've cleaned up the design quite a bit. But if you go to their website, you'll see the sort of like green splatter. It looked like the slime from Nickelodeon or something everywhere. Yeah. Oh. And so this email on acid, we started using this back in the day, when I worked at an agency, we were doing a lot, a lot of different email marketing and stuff like that. And their pricing is pretty good. I have 44 bucks a month for their, yeah, their unlimited tier again, it's going to show you all your screenshots and stuff like that on all of your different devices. The free tier is actually pretty decent, you can test it out on a few different browsers just to get an idea. Some of like, the more common ones. And the ones they give you for free are actually pretty good. I mean, it's not giving you access to all of them, but it's giving you access to enough to see that. Well, it's not going to look bad and some of the major ones. So I definitely like that. They're also they'll give you potential warnings. So when you upload your your template and stuff like that, it's going to tell you if like there's better ways you could be doing things or more compatible ways. So it gives you that saying, hey, we've identified these things that are potential issues and here, here's the what you can do to fix them. So I've used email on acid. It used to be sort of like a paid person. There used to be like a pay per cent. here where you could say, I'm gonna do 10 tests, that's going to cost me like 20 bucks or something. And that was really nice. If you had like a one off gig, you could just build a client for those tests. It looks like I don't know, if they still have that I'm not seeing it. But it was those pretty nice. Overall, I definitely really liked working in an email on acid, I never had any reason to try any other ones. So I guess I didn't look. But so I don't know the comparisons between this and littmus, or anything like that. But it's pretty nice platform here. And not when you hear talked about a lot, I think, - -88 -00:40:29,900 --> 00:42:30,630 -Wes Bos: awesome, I had no idea about that. So I'm gonna have to check that out. Because I always was doing the whole sign up for a month of lateness and then make sure you cancel it before they renew it for another month, just because like I only needed it for it's one of those tools that is just so expensive that you can't pay for it month to month, unless you're doing quite a bit of it. One little tip I can give you about designing emails is images, sometimes people don't turn their images on. And generally that will hurt your open rate or hurt your perceived open rate. Because the way that most of these email clients track that the person has opened the emails, they have a little tracking pixel. And then when that when someone turns images on on the email, it'll automatically send a ping back to the server saying this person opened the email. So one thing that I do to get better stats is you have alt text on your images. And when you have an image that is not shown the alt text shows. And what you can actually do is you can style, the font size and any of the text attributes of the alt text. So you can say like font color, yellow text, Shadow, whatever, font size 100 pX, and usually what I'll do is I'll just like have a funny alt text being like a super hunky men typeset a computer. And then I say turn your images on. So and that really helps my open perceived open rate. Because people are like, Oh, I have to see this hunky man in front of a computer. So you can style everything about an alt text. And this works both on your computer as well as are both on in the browser as well as in emails. Another fun thing you can do is if an image does not load, you know how you have before and after pseudo elements on most elements, right? But you don't have before and after pseudo elements on what what are the inputs I got? What are the elements like input? image? Yeah, select - -89 -00:42:30,689 --> 00:42:35,940 -Scott Tolinski: a lot of ones you want to use on and then forget that you can't and then you'd Yeah, and then you're like, why isn't this working? I - -90 -00:42:35,940 --> 00:42:37,530 -Wes Bos: think button maybe? - -91 -00:42:37,880 --> 00:42:39,480 -Scott Tolinski: I don't know, I need a list. Yeah, - -92 -00:42:39,480 --> 00:43:16,650 -Wes Bos: the reason the reason that you can't use before and after on some of these elements, as they're called, they're what are called replaced elements, meaning that the the browser will take them, and then actually replace them with their their native equivalent and image is one of those elements. But if an image source fails, or does not load, which is the case, when someone has images turned off on their email client, then it is not a replaced element. And you can use before and after on it. So you can you can put these little bars on top and the bottom of your actual image being like image download failed or turn your images on. - -93 -00:43:16,709 --> 00:43:17,790 -Scott Tolinski: Yeah, so give him a little - -94 -00:43:17,790 --> 00:43:23,150 -Wes Bos: image shaming. And you can put emojis in there too. So pretty. - -95 -00:43:25,230 --> 00:43:26,310 -Scott Tolinski: Does it all? I mean, - -96 -00:43:26,630 --> 00:43:36,090 -Wes Bos: yeah, I have a little tip from like two years ago that I posted this all I'll tweet this out, put it in the show notes if anyone wants to see what I'm talking about. - -97 -00:43:36,110 --> 00:43:38,790 -Scott Tolinski: Nice. Yeah, let's see some code for this. I like this. - -98 -00:43:39,030 --> 00:44:55,140 -Wes Bos: Let's take a quick break and talk about fresh books. Fresh books is a cloud accounting software, which I'm using quite a bit because it's tax time right now. And I'm just getting all my taxes wrapped up before I send it off to my accountant. And what one thing that I really like about Freshbooks is that it basically has everything to do with my business. So anytime that I send off an invoice to someone for the show, one of my favorite things about Freshbooks is that I get to Bill Freshbooks from Freshbooks for this show, because they sponsor it all of my expenses go in there all of my different types of currency that I have is in there all of the different different types of taxes so anytime I bill somebody from Canada I have to charge them their provinces tax rate. And it's great because it keeps track of everything that I could possibly need in there and then just takes and then I could just do a single dump off to my accountant and he loves it he says I often refer my my own clients to use fresh books because at the end of the year, it makes my job so much easier. So if you are a small business looking to get some sort of accounting software in place, I definitely recommend you check out fresh books at fresh books calm Ford slash syntax, and of course use syntax in the How did you hear about a section - -99 -00:44:55,200 --> 00:46:49,440 -Scott Tolinski: nice, super cool. Yeah, so Okay, so we talked about Designing emails we talked about marketing, or transfer. So we talked about designing emails and transactional emails, we have not talked about marketing emails, which is a huge thing. And a lot of people are very interested in marketing emails, I take a little bit more of a, I guess I don't want to say relaxed approach than you do. But my approach is definitely bit more simple. I have a MailChimp account, I've designed my emails through MailChimp, which actually is just a beautiful interface, right? I mean, let's face it, MailChimp is one of those online platforms, that is a great place to go to for inspiration. In general, as a developer, there's a lot of great tools and stuff in there to make sure your emails are working fine, they can compress your images and resize them and everything like that. So the MailChimp, like email builder is just super nice. I take care of all of my marketing emails through MailChimp, I AB test everything. So I send everything out to you know, 10% of my audience or something with different titles, the winner open radios title sends out to the other percentage, that's the only thing i a b test, honestly, is titles. I probably could get into a more but like I said, I take a pretty relaxed approach to marketing emails. And it's something that I actually I don't know, I have some some guilt about emailing people, like, I don't know, I know how full my inbox is. So I you know, I don't try to send out a ton of emails maybe one or two a month if that and try to keep it pretty light and say, here's what's going on, here's what could interest you and whatever. But everything comes directly out of MailChimp tested all love the interface, love everything like that. I've recently been doing a little bit of research into seeing maybe where else I could go other than MailChimp. And I found the prices for a lot of these platforms to be actually more expensive, which I wasn't expecting to be honest. - -100 -00:46:50,490 --> 00:49:38,340 -Wes Bos: Yeah, it's, it's super expensive. I think the the big thing right now in an email is what's called like marketing automation, meaning that instead of it, I mostly just do blasts right now meaning that I'll just send out a big email to everybody on my email, email list, and it'll go out. But the big thing now is that you have this automation where, let's say somebody, I don't do this right now. But it's clearly something I should be doing. If someone were to watch, come to my website, maybe watch a video, and then you can tag them as like, watch the JavaScript video, and it clearly shows that they're interested in JavaScript, and then you can send them a follow up email, like, like six days later be like, hey, how's JavaScript going? And, and then give them a coupon code or something like that. And the idea is that you have like, sort of this machine where you've got all these levers and trips, and when somebody trips specific amounts, then you can, you can shoot them off and email and that's the I have this thing called, I use drip. It's that great, get drip calm, I actually think it's just drip calm now. And it's super expensive. It's by far the most expensive thing that I pay for a monthly it costs hundreds of dollars more than my mortgage to run, which it it makes me cry. But the the sort of the thing that you need to know is that like, regardless of how much your email lists costs, you should be able to get, like, I don't know, 510 times that back if you're using your email stuff properly. So it's kind of neat, I have everything set up and drip, I record everything. So if you watch a video, it will log that your last watch the video into my drip, or it will. So what I could do is I could this all bundles down to segmentation of my list. So if, for example, I sent out a little Hello, I'm Wes Bos email to everybody who signed up for my CSS Grid course, in the last week. But how or had never had never signed up for a course before. So I could segment my list right down to that. Or I could also say like, show me that people who have watched at least half the videos, but then stopped and I could send them a little email being like, Hey, keep going. You can do it. It's pretty neat. It's the the amount of segmentation in like, just the very fine greenness is amazing how how deep you can get, because then you're not sending unnecessary emails to people. Like I'm not sending. Hey, my react course is on sale to people who have already bought my react course. Because then they'll be like, I don't need this. I already bought it. I'm happy with it, right? - -101 -00:49:38,790 --> 00:50:13,590 -Scott Tolinski: Yeah, for sure. And I think that's something I'm definitely missing in my whole process. But in all honesty, I think MailChimp has really just started adding a bit more of those automated Automation features and stuff like that. I just haven't had the time to dive into it. To be entirely honest, I would really like to learn more about that stuff, but it seems like so it seems took a lot of a lot of a lot of setup a lot of work, a lot of knowledge and a lot of specific knowledge, right? Like this stuff is going to be very worthwhile if you put the effort in, but I'm not sure I have the time to do it. - -102 -00:50:13,830 --> 00:51:33,750 -Wes Bos: Yeah, I took me, I probably spent two weeks integrating drip into my own platform, by from everything, like when you sign up for a course, it doesn't add you to it right away. It's only when you watch a couple videos, then it adds you to my email list. And there's all kinds of stuff that I had to integrate into my platform. And it is just so much work to get the stuff and conveying all the data from my database into it like which courses they have bought, or if they're a customer. And then there's also the whole concept of conversion. So when somebody buys something, it tells them how much that thing was. So you get sort of like a lifetime value of a customer. And then after a while, you can start saying like, oh, if I spend, like three months working on a CSS Grid course, and then I put out a paid course, this percentage of the people who bought the free course or who got the free course, will then turn into real customers who buy it, and you can start to put some numbers to what your time is worth. But again, it's almost the reason why I don't do it as much as I should be, is because my time is better spent just making more content, right? Like you could probably squeeze an extra little bit of juice out of that rock, or you could just keep making more awesome stuff, which will likely sell a lot better. Yeah, I - -103 -00:51:33,750 --> 00:52:03,390 -Scott Tolinski: think that is the the main reason why I haven't spent more time on it. Because I mean, that is my platform is there's a new course every month and stuff like that. And that's what I'm advertising. And that's that's what I'm putting out there. And I am going for more more more content. And you know, honestly, I probably be would be in my best interest to spend more time on it. But that's definitely one of those things that Yeah, I there's only one of me. So recording videos, improving the site, all that stuff is taking precedence. - -104 -00:52:03,870 --> 00:53:45,360 -Wes Bos: Yeah, I should also talk about this thing called sendy. So there is sort of a host your own email platform called sendy out there. And I think there's another one called email octopus as well. And these, what these things do is they charge you a small fee for either access to the code base, he hosts it yourself, or I think it's a I think email octopus is a hosted version. And then what it does is it hooks up to your Amazon SNS account, and sends out the bulk email through Amazon SNS, which is extremely cheap. Like, I think I could send 10,000 emails for $1, which is is way cheaper than any of these other platforms. And it was good, I use sendy for maybe two years. And I was pretty happy with it because it gives you good stats as to who opened it, who didn't open in how much bounced and whatnot, allows people to unsubscribe, it does all that stuff. But the the huge thing that is missing, and they're starting to implement this is the ability to segment your list. So what I had to do previously is I would have to export my whole list, you go into Microsoft Excel, and like and then export the list from Microsoft Excel and re upload it as a new audience. And that's suck because I if I ever wanted to send a quick email off, then I couldn't. So I would say anyone who's just getting started and is weary of costs, definitely check Cindy out. I was happy with it for years. But once you start getting going in the email game, you realize that the cost is negligible to what your extra bringing in in terms of email, because email is by far the biggest moneymaker for I would say everybody, - -105 -00:53:45,420 --> 00:54:33,810 -Scott Tolinski: yeah. Have you heard of this? mautic.com m. AU. t IC or sorry.org mautic.org? No. This is kind of interesting. I just want to do a little hunt for sort of open source email providers. Yep. Because it's definitely something that's out there. And this one looks really interesting. It's open source marketing, automation. Email automation. Looks like there's a nice, like visual editor for writing these sort of segmentation flows. It sort of looks like a line chart, like if the user does this thing go here, but it's all very visual. I have not seen this. It looks like it's something somewhat popular. It looks kind of nice. - -106 -00:54:34,020 --> 00:54:49,830 -Wes Bos: That's cool. I actually went down down this road after I was looking at getting off of sendy. And Andrus, who runs who's the developer behind node mailer? He came out with something similar to this. Let me find out what it is real quick. - -107 -00:54:52,080 --> 00:55:05,100 -Scott Tolinski: Yeah, the caveat here is that I have not used this or even heard of this until just now. I just did a little little search but it looks they have a nice website. be worth your time to check out. That's it, I have no idea how nice it is actually. - -108 -00:55:06,629 --> 00:56:18,240 -Wes Bos: It's called mail train. Okay. I gotta check this out. Because that's always very interesting to me, especially if you're using something else to send email the the sort of gotcha with all of these sendgrid and postmark is that the thing you can't do is send bulk email. Because if you're sending bulk email, you have to be using some sort of service, or you use Amazon SNS to send all of those big bulk emails, which is great. So the other one is called mail train. And I used it about six months ago, and it was in pretty good spot pretty good space. It's based on Express and MongoDB. And I was pretty happy with it. I donated a bunch of money because I was I was very, I was very much invested in this thing being built, because like, why isn't there an open source MailChimp out there, right? But at the end of the day, it just really wasn't where I needed it to be in terms of segmentation, I really need to get nitty gritty with, with how fine grained I can get with my list. So I just moved over to drip and it's been well worth my money even though how expensive it is. But I've never seen this mountain modoch map mouse click - -109 -00:56:18,360 --> 00:56:20,760 -Scott Tolinski: mouse, mouse, mouse, it's - -110 -00:56:20,880 --> 00:56:22,200 -Wes Bos: it's probably like automatic, - -111 -00:56:22,230 --> 00:56:29,520 -Scott Tolinski: some magic. That makes our sense that that makes way too much sense. So it's just, - -112 -00:56:29,760 --> 00:56:31,560 -Wes Bos: it's open source isn't on GitHub? - -113 -00:56:31,560 --> 00:56:33,060 -Scott Tolinski: I don't know. - -114 -00:56:33,540 --> 00:56:35,100 -Unknown: Let's look for it. And let's see. - -115 -00:56:36,120 --> 00:56:44,100 -Largest open source. But but but not they're like little social tags. Yeah, it is on GitHub. And it's - -116 -00:56:44,100 --> 00:56:53,880 -Wes Bos: built in PHP. Interesting. Interesting. be pretty easy to to host this yourself. - -117 -00:56:54,540 --> 00:57:03,540 -Scott Tolinski: Yeah, it's funny if you if you just Google open source, email marketing, there's a decent amount of stuff popping up. might be worth a little a little dive in sometime. - -118 -00:57:04,019 --> 00:57:06,990 -Wes Bos: Yeah, I should check that out. Yeah, do - -119 -00:57:06,990 --> 00:59:27,980 -Scott Tolinski: you have a favorite a provider in any sense out there, whether it is open source or or like a service, let us know what you're using. I'm very interested. I'm doing a little survey right now. So I'd be very interested in hearing what everyone likes to use and what you're using maybe a little bit about why and if it's whatever it is, I want to hear. Okay, and I guess it's time for sick pics of which I have a sneak peek of an app slash platform, that platform that I've been really into lately. If you've used mint.com before to do sort of your keep track of your financial accounts right all your checking and your your credit cards and all sorts of stuff. I have found a platform that I like much better than mint called personal capital. I don't know how well known this platform is I've heard of it. Yeah, I have been really really into personal capital I found mint has started to get a little bit well they they haven't really progressed I mean men sort of stayed the same the interface kind of stayed the same they this stuff they did add was not necessarily always super helpful. I had a lot of accounts not connecting things that should be working and didn't and I was just getting kind of frustrated with it. So then I went looking and I found personal capital. They have a nice looking website. The app works really nicely there's like Android widgets and stuff for it. So the whole thing works really nicely login via fingerprint all that good stuff. And yeah, I've just been really liking this especially the sort of advice it's been giving me has not been in your face like mints advice, and the advice is often good. So for me, I found that the app and the service were really nice. It gives you some really interesting charts like basically your expenditures for the month so you can see like in two overlaid charts This is how much I spent on this day of every single day of the week from comparing this month to last month so you can see oh crap we're already over where we were this point in last month, so we have to dial it back or else we're obviously going to be over our our total budget or stuff like that. I found the budgeting tools and everything to just be excellent. So personal capital is my sick pick. I really really really been liking it if you are feeling maybe a little bit not into mint lately, then I would check out personal capital looks really nice app. - -120 -00:59:29,370 --> 00:59:36,270 -Wes Bos: Pretty sweet. I'm gonna have to check that out. Actually, I did check it out. And it's like most things it's not available in Canada. - -121 -00:59:36,270 --> 00:59:37,770 -Scott Tolinski: Oh sucks. - -122 -00:59:37,770 --> 01:00:00,480 -Wes Bos: I'm just looking at another one called wealth, aka wealth. Yeah, I don't I don't know if this does bank accounts or just investments. Interesting. That doesn't look like my bank. My bank is never available on any of like, we have four banks in Canada. And they're never available on these like link your bank account things which is always frustrating. But - -123 -01:00:00,690 --> 01:00:24,210 -Scott Tolinski: yeah, and that's why it's because I'm a part of like a really small credit union. And it's on all of them for some reason. The funny thing is, is credit union they, they've always had like a really progressive app, like they just released a new version of the app. And it's all material design. And that like, looks awesome. Like, how are you guys doing this? This looks really nice. Meanwhile, their website is terrible. So they have a really good app developer and a not so great web developer. - -124 -01:00:27,210 --> 01:00:38,430 -Wes Bos: That's cool. So I don't have a sick pick today, just because I don't have any I was struggling to find one. And I don't want to recommend anything that I'm not super stoked about. So I'm gonna pass on the SEC pick today. - -125 -01:00:40,110 --> 01:00:40,800 -Unknown: sick, - -126 -01:00:41,220 --> 01:00:45,510 -Wes Bos: sick, any shameless plugs for you today, Scott? Yeah, I'm - -127 -01:00:45,510 --> 01:01:28,770 -Scott Tolinski: gonna plug, again, my subscription service level Pro, I have a new series that's going to be coming out this month that I am officially announcing as pro Gatsby. So what are we doing is a lot of interesting Gatsby stuff. I asked Twitter, you know what you wanted to see in it, unfortunately, like, there's way too many things to cover in a series to hit all those stuff. But I really want to be able to, what we're going to be building is sort of like, how you can build a really nice blog using Gatsby and have this thing be blazing fast with all of the nice Gatsby graph qL features there. So pro Gatsby is going to be available at the end of the month. So sign up. Now, if you want to have access to all of that and more. - -128 -01:01:29,940 --> 01:01:55,110 -Wes Bos: Wow, my, I'm just gonna plug my upcoming, I think I'm gonna call it advanced react and graph qL course I'm really excited about it, it's going to be a massive course just because it's going to include all kinds of stuff from styled components and graph qL and, you know, all that good stuff. Um, and it's gonna it's gonna be a big course, but look forward to it, because I think it's gonna be a good one. Nice. - -129 -01:01:55,140 --> 01:01:55,950 -Scott Tolinski: I'm excited for it. - -130 -01:01:57,000 --> 01:02:00,330 -Wes Bos: Sweet. All right. With that, we will see you next week. - -131 -01:02:01,410 --> 01:02:10,560 -Scott Tolinski: Peace pace, head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop - -132 -01:02:10,560 --> 01:02:12,540 -Unknown: a review if you'd like to show - diff --git a/transcripts/Syntax320.srt b/transcripts/Syntax320.srt deleted file mode 100644 index 3d4801fbf..000000000 --- a/transcripts/Syntax320.srt +++ /dev/null @@ -1,356 +0,0 @@ -1 -00:00:01,319 --> 00:00:03,660 -Announcer: You're listening to syntax the podcast with - -2 -00:00:03,660 --> 00:00:04,590 -Unknown: the tastiest web - -3 -00:00:04,590 --> 00:00:10,530 -development treats out there. strap yourself in and get ready to whiskey and Wes Bos. - -4 -00:00:10,530 --> 00:00:50,280 -Wes Bos: Welcome to syntax. This is the podcast with the tastiest web development treats today, we've got a potluck for you. This is the show where you send in your questions and Scott and I will attempt to answer them. We really like these ones because it's all over the place things like we talked about VS code and JavaScript and CSS and getting a job making more than $100,000 a year some some really good ones for you today. We are sponsored by three awesome companies today. First one is Prismic, your headless graph qL CMS Log Rocket, which is JavaScript logging and session replays, and linode, which does cloud hosting and Linux servers. We'll talk about them partway through the episode. How are you doing today, Scott? Hey, I'm - -5 -00:00:50,280 --> 00:01:56,060 -Scott Tolinski: doing good. Hey, we should also state that if you want to get in on the fun here of these Pollak episodes and submit your own question, head on over to syntax.fm. And there is a button in the top right corner of the website that says ask a question. So that will take you to our forum. So you could submit questions, because while we do get a ton of good questions, in fact, we get so many questions, we can't even begin to answer them all. But it's always nice to have fresh perspectives and things like that. So head on over to syntax.fm and submit your question if you have one for us, overall, less, I'm doing good. Just live in life in the fast lane over here trying out some really exciting web dev tool. So I think we're gonna have like a bit of a good show topics going on with some of the stuff I'm working on right now. And I'm really cutting the edge right now on on some new tools that I'm working with and working on. I even wrote my own graph qL plugin for iOS build. It's like, that's where I'm at right now, man. It's a lot of fun. And I'm sort of loving it, but also at the same time, wondering if I should have picked something easier. - -6 -00:01:57,720 --> 00:03:04,770 -Wes Bos: Awesome. I'm looking forward to chatting about that. Alright, let's get into the first question here from Benny boy, not so much of a question. Oh, so this is not a question. But as me saying, thanks. I started web dev as a bartender slash college dropout in 2017. When syntax was pretty new, so about three years ago, I rarely missed an episode and this year, I'm starting my first over $100,000 .js job whole key doodle. hokey, do not is big. Your show has been fun, kept my attention in the realm of web dev and help guide my interest. I think it has been extremely valuable in my career. And I look forward to more I would like to give you and Scott 50% of my first year salary. Wow. Imagine That's amazing. Congrats, Benny Boy, that that's unreal that people can in three years, you can go from doing something totally different, which is a bartender. And then I'd like to hear like what to Benny boy do in order to skill up so quickly. And, and heartland such a sweet paying job? - -7 -00:03:04,979 --> 00:03:52,020 -Scott Tolinski: Yeah, Benny. Boy, if you are listening, go ahead and submit another potluck. And we'll check back in with you in the next pilot episode. Because I do want to learn a little bit more about what your approach was because this is huge. And I know this show is all about asking questions. I put this one on here. Wes, this is the only non question I just put this on here. Off the jump just so people can see that there are people out there who, you know, weren't professional web developers, you know, just a few short years ago, and they're now making some big bucks working on code and slinging code. It's it's really super inspiring to me. I went from not working on code to making $24,000 a year. So this seems like a big jump like that is pretty inspiring. - -8 -00:03:52,080 --> 00:04:09,569 -Wes Bos: Yeah, Yeah, no kidding. It's probably I'm, I'm willing to bet it's like San Francisco. Yeah. Something like that. Because that's, that's a decent chunk of change. Like I know, I know, senior developers that don't make that much. But Totally, yeah, a lot of that is dependent on on where you live as well. So cool. You want grab the next one. - -9 -00:04:09,750 --> 00:04:42,660 -Scott Tolinski: Next one is from just the Dane. Hey, guys, thanks for an awesome show. And they even put a little alert. .TECH. Weston's got are awesome. Thank you so much for that, then a listener for a few months. Now I listen to your podcast, in the car to and from work, which is about an hour each way. And the subjects are really interesting. I find myself talking to my car radio commenting on public questions. So good. luck, yes. Okay. So here's the question. Not sure if this has been brought up before, but here it goes. How do I know when to pull in a package rather than to write similar functionality myself? - -10 -00:04:43,320 --> 00:05:22,170 -And is there a rule when enough is enough in terms of having too many packages? What I'm concerned about is a bundle size. Overall, it doesn't seem to take a lot of packages before Webpack notifies you about a large bundle size. What is the best practice? This is Adjust there is not a hard and fast rule to any of this other than you kind of have to learn and grow with the process of it because there are some packages that you'll find that are absolutely massive. And one thing that I like to do is to add bundle, what's the package in VS code, no - -11 -00:05:22,350 --> 00:05:23,610 -Wes Bos: phobia. No, not - -12 -00:05:23,610 --> 00:05:32,160 -Scott Tolinski: bundle phobia. phobia, bundle size, size in VS code will show you in your import statement, just how large each of your imports are. - -13 -00:05:32,460 --> 00:05:35,010 -Wes Bos: Import costs is what it's called import cost. - -14 -00:05:35,040 --> 00:08:17,460 -Scott Tolinski: Yes, import cost, you got it. The best thing about that is you'll see it in your code, while you're writing to say like, holy cow, this particular package I'm using is huge. For instance, here's a good personal story, I was looking in my codebase the other day, and I was noticing that an NPM package for view had been installed those like view templates, something. And that brought in a lot of other stuff. Now granted, these things weren't being executed on the front end. So it's not like the user is giving ship this code. But I was just thinking, I don't want all this stuff in my I don't want a whole view project in my application as well, like, so I began to try to figure out which package imported this thing. And sure enough, it was something that I was not expecting to have the USD view and it wasn't something I necessarily needed in that regard. So it's nice to have an idea of like, what exactly is going on with your packages, what they're bringing in how large they are just overall their size, in terms of when you should write your own functionality for it, I would almost I don't want to say always, because I'm certainly not like this. But I would almost always err on the side of get the thing working, get it up and running, get it going with maybe a third party package or whatever. And then trimming the size as you need. That's not necessarily great advice for for huge, long term projects, where you have the team and the money behind it to be able to write everything from scratch when you need it. But even in those projects, I doubt people are writing everything from scratch. So it really depends on where you can get those savings, and being cognizant of what packages you're bringing in and what those costs are associated with those packages. And just remember that at the end of the day, you're shipping stuff to users. And if too many projects are going in the client side of your application, and you don't have even even with tree shaking or too many things coming to your client, that's going to take a hit on that load time, no matter what. So you can be as vigilant as you would like about it. But at the same time, it's a delicate balance. And it's certainly something that you need need to, like be aware of and like look into rather than just say, Alright, what is the limit here? What am I What is this limit? You mentioned bundle phobia was I use bundle phobia a lot. I use bundle phobia on some my own packages that I wrote to realize that I was importing something that should have been appear dependency, and then that like greatly reduced the package size for me. So little things like that bundle phobia is a great place to learn about bundle sizes, and how they grow. In the best case scenario, you would have something in your build tool or your ci CD that - -15 -00:08:17,460 --> 00:08:19,770 -Unknown: would tell you like something's too big, - -16 -00:08:19,770 --> 00:08:30,770 -Scott Tolinski: it would tell you something's too big, or would say your project has grown by an astronomical size between this unless commit what happened, you know, something like that, just to make you aware of it. - -17 -00:08:30,809 --> 00:08:47,580 -Wes Bos: Yeah. And and she said that Webpack does notify her that and though that will happen by default, I think turning on that import costs and VS code is good. First of all, it will give you an idea of what is too big, like, is 100 k big or is that is that worth it? - -18 -00:08:47,820 --> 00:08:48,770 -Scott Tolinski: Depends what it is. - -19 -00:08:48,899 --> 00:10:36,899 -Wes Bos: For me if it is something that is very cut and dry, and it's just a little function, I'll often just go and grab a copy, paste it from Stack Overflow, throw it in a lib folder, utils folder. But if it's any more complicated than that, like something like a really complicated lodash method, those things are tested super well and they've been battle tested. Not only are you you're getting the, you might be adding a little bit more, but you are making sure that that code is not going to also break in production on you because you forgot to cover one little use case somebody pops an emoji in and something like that. Like actually that's that's a problem I had once is my old course platform like years ago, I used to the URL to download the videos used to always be I would slugga phi, their name. And I had just got a little simple little one, and just called slugga phi and it replaces characters that are URL friendly and puts dashes where spaces are. And I had a bunch of Russian people by the course and their names were entirely in Cyrillic. And none of those characters are valid in the URL, right? So it broke because they would hit a URL with nothing in it and then I swapped it out for a package that was I NPM installed and they took care of that the converted Cyrillic characters to whatever URL friendly character is close enough to that so that I wouldn't sweat it too too much. But yeah, keep an eye on, on that type of stuff. And also, if it is an issue you're looking at, it will tell you what is causing the issue. And you can figure out okay, well, what am I really using this for? Am I gonna hit? Am I really like merging nested arrays? Or am I just doing this one little simple thing? You could swap it out for a little line of code? So I know that that was a long answer to say it depends. But - -20 -00:10:36,919 --> 00:11:49,289 -Scott Tolinski: yeah, that helps. It's not necessarily an easy answer. Overall, and I struggle with this greatly because I, I really like performance. So I, I find myself really seeing how much I can squeeze out of things. Another option that we didn't listen, I know we're done with this question. But another option that is in the pot, if you find a library that is too big, you can always look for alternatives. A good example, as we were using a react color picker that used Redux and a whole bunch of extra Redux thunk, and whatever, just to control a stinking color picker element, including tons of other inline packages. And it was huge, huge, huge package. And the biggest package I've ever seen. And of course, I found a smaller react color picker. And it worked very well for us and has about one 10th the size so that's always an option as well. Okay. Next question is from Paige neighboring house, who I just want to say Paige, she mentioned that she writes a lot of questions. And then we've answered the last three of them. paid up is an all star question writer every single time I could read her questions before even getting to her name and being like, this is a great question every single time it's Paige. So shout out to Paige neutering house for always asking great questions. - -21 -00:11:49,470 --> 00:12:57,480 -Wes Bos: Today, I got a new one for you. I received an email from a creator of an ID I've never heard of, with a plugin support for languages and frameworks. I don't use asking me to publish a review of their ID IE, I get these all the time. They attach a pre written guest post or said I can write my own opinion. If I choose and asked what my terms are. I wrote back saying I it wasn't a great one to review their ID for reasons I lifted listed above. I'm very happy with vs. code editor too. But it got me thinking my question is to you, what is your opinion of doing sponsored posts or guest posts on your own sites? And if you're in favor, what sort of terms payments etc? Would you outline to charge for it? sponsors posts on personal sites seems like a little disingenuous suspect to me. But maybe I need to get over that way of thinking and focus on bringing in a little bit of extra income via my site, when the opportunity presents itself. Oh, this is this is an awesome question. Because I get this all time Scott. And I get it all the time. We have people that want to come on the pocket they want to pay to come on the podcast, just to like, pump their own thing up. My - -22 -00:12:57,480 --> 00:12:59,760 -Scott Tolinski: boss has been working on a great project. - -23 -00:12:59,820 --> 00:13:15,990 -Wes Bos: Yeah, are like YouTube videos is the biggest one, someone offered to send me like three boxes of different types of drones, because I did one video and I was like, That was amazing. But I was like, not really a drone YouTube channel, I did one video on writing a drone to JavaScript, whoa, - -24 -00:13:15,990 --> 00:13:39,059 -Scott Tolinski: can I just say I'm going to take a little bit of anger towards this because Wes directly stepped in front of my getting a drone in the first place. And now here, Big Bucks when they're coming in with three drones. And West is like, you know what, I don't need your three drones. And you know, who doesn't need your three drones either my co host who didn't even get one drug? - -25 -00:13:40,200 --> 00:15:34,980 -Wes Bos: It wasn't the same, not the same company. It was totally different company. They just searched on YouTube. So that's a really good example. What was the company, IBM and telo approached me and many other creators, including Scott, and they said, Can you do a video and we'll send you a drone? And I said, Sure, I forget how much it was a couple $1,000 I'll do a video on it. And unfortunately, I asked for so much that they didn't have any money left for Gosh, so sorry about that, Scott. But whenever I approach these types of things, in most cases, it's not a good fit, like people look at ID editor. But if you do approach them in whatever use case, what I usually like to do is let me do my own thing. Like I'm not gonna use your ID or your your page builder and be like, this is amazing. I'm going to use this for all of my stuff. I'm gonna say all right, these people pay me to check it out. I'm going to try to build something with their tech and I'm going to let you know what I think about it along the way and those are the types of things that I like to do. I don't do them very often because my time is better spent actually making courses. But yeah, I think I think as long as you feel okay about it and no and are very clear that somebody is paying you to do something which unfortunately is not the case with a lot of reviews. Yours out there, I think it's totally fine and get that money if you can, because it's, you've worked hard to obviously build this thing. I think in the case that you're saying right here, these people are just straight up looking for linkbacks and SEO juice, they're just they're not looking for like to get actually like good informed reviews there, they probably found your blog, they probably found it ranks high for keywords like that they want like JavaScript, and then they're probably saying, alright, we if we pay this person 300 bucks, it's gonna really help our SEO just know trying to gain that it sounds like, yeah, - -26 -00:15:34,980 --> 00:16:07,380 -Scott Tolinski: I think this is an interesting question. Because it's like, as long as you feel comfortable with it, then it's good to go. That said, Be very explicit upfront, I like to say like, 800 times in my videos almost to the point where it's obnoxious. Like, you hear me gushing about Netlify right now, or who am whomever, right, this is I'm not being paid for these opinions. There was like a video I did on Skype tries begin begin.com. And I was just like, going nuts about it. And I had to say, like, Alright, I they did not pay me, they not even know I'm making - -27 -00:16:07,890 --> 00:16:10,799 -Wes Bos: a bummer. Part of what you do, like a company people are like, Oh, - -28 -00:16:12,029 --> 00:16:45,870 -Scott Tolinski: right, especially, even here on syntax, we do get paid for these advertisements, right. But the ads that we read on syntax are almost all companies that we've used before they even reached out to us in the first place. So and the ones that we have, and we test the products, and we use them and we love the the the stuff that we bring to you here. And so it's a tough call. Because yes, in some regards, you don't want to ruin your credibility. But if you are able to do a full up review of something without having to, you know, butter their biscuit the whole time, - -29 -00:16:45,990 --> 00:16:46,500 -Unknown: then - -30 -00:16:47,070 --> 00:20:09,930 -Scott Tolinski: then go right ahead and do I get that money or whatever. And if it doesn't feel like a good fit, chances are, it's not going to be a good fit. Okay, so let's transition into one of our sponsors. I always love I wouldn't rest West, right? They sponsor transition to broke speaking of getting paid, which is just weird, because the sponsor that we're transitioning to, it has nothing to do with money. Log Rocket, Log Rocket, what are they? Well, they're a visual tool to help you see bugs happening. Whoo, okay, well, maybe perhaps there's a new hot framework that wanted you to review their framework. So what do you do either a Log Rocket on that bad boy, and you check out to see if there's any errors happening. And if so, well, now you've got a better idea how they're happening with this new service. So check out Log Rocket at Log rocket.com. forward slash syntax, you're going to sign up get 14 days for free Log Rocket is this really, really cool, modern tool that allows you to see errors happening with a scrubbable video replay. You can even get access to your Redux store, your network tab, your console, logs and more. There's an on premise version, as well as the cloud version. It works with all of the tools that you know and love and even, and even integrates into many other tools that you probably or may already be using. Really just giving you that full control over seeing how your errors happen. So stop guessing when bugs happen over at Log rocket.com forward slash syntax. All right, let's get into the next question from Rob Osborne. Hey, Scott, and Wes, do you have any resources for those of us who want to learn more about digital products through e commerce the sources I found Scott's e commerce and Gatsby courses next .js commerce demo, focus more on creating stores that sell physical products? Are there any gotchas when selling digital or physical? Thanks for all that you do? Okay, let me tell you, Rob, selling digital products is way easier than selling physical products. Because physical products have so many like little edge cases, whether it's around shipping or locations that you're selling to, those things really add up. And next thing you know, you're coding a whole bunch of stuff. If you're doing it from scratch, I know, I coded my own e commerce platform from scratch. And it at large had access to both physical and digital products. And the first thing I did after like one year of running, it was just remove physical products without spending way too much time on managing that stuff. So digital products, typically what you're selling access to with digital products is either some sort of a role, you're selling access to a role, which a role on the user will give them the ability to access different features in your codebase or you're giving them access to digital files or potentially like streaming services. The additional files one might be a little bit tougher because you want to block access to non paid customers to those digital files. And typically that involves like a when they purchase something, you're giving them some sort of like a key to a very specific URL, if you're storing those files on an Amazon s3 bucket, you can get very complex with the ownership of those files and who has access to download or access them, - -31 -00:20:10,140 --> 00:20:16,890 -Wes Bos: like temporary keys, things like that. So that if someone sent that link to seven of their friends, they couldn't all download that. - -32 -00:20:17,190 --> 00:21:16,440 -Scott Tolinski: Yes. So there's a lot of stuff you have to consider there, if that's something you want to get into. But if you really just have a look at the very basic bare bones of all of this, you could have a zip file and a link somewhere, maybe it's a backblaze, v2 bucket or an Amazon s3 bucket, you got a link somewhere, they make a purchase, yes, send them that link, maybe you're sending them via email. That's the very most basics of it. Now, granted, you'll still probably want some sort of a database to store some of these things in if you're doing it from scratch, you could always set up through us a Shopify instance to do this as well. I personally wouldn't I don't think it's intense enough, I probably like me would have a database with users and orders and sales and those kinds of things. But for the most part, when you collect payment, you're giving either users a role, or you're creating a record in the database that says, here's an order this user made the order, this is what they have access to - -33 -00:21:16,470 --> 00:21:56,610 -Wes Bos: good. Actually, the one thing I will add is I am trying to sell some t shirts right now. Oh, yeah, I am. I'm trying out snip cart, which is they sponsored like two years ago, but it just says, going down the route. I first sign up with Shopify, and Shopify is like this massive thing that does absolutely everything. But it was just like, unfortunately, because of that it does everything. I was just so overwhelmed by everything. And I was like, I just want to sell t shirt and acid. Yeah, yeah. So I was like, oh, maybe I'll try it, snip cart. And they also do digital products. So you could build a next or Gatsby website. And then for that section of it, you could throw snip card in there, which would be kind of cool. - -34 -00:21:56,670 --> 00:22:10,110 -Scott Tolinski: Like, if you don't want to build it from scratch, SIM card is a great option because it can it's just front end code. You don't have to write your own database or anything like that. And it definitely a really good option. You could even throw it on the static site if you wanted. - -35 -00:22:10,230 --> 00:23:55,860 -Wes Bos: Next one we have here is from a non Do you have any tips on keeping your skills up to date while taking a break from work? I'm a front end Dev, currently, six months into my year long maternity leave, and I feel my brain has turned to soup. I listen to podcasts and read blog posts, but it feels like it's never enough time and energy are very limited for me to work on personal projects. That's that's a good question. Yeah. Because like, if you are away from this stuff for so long, I think like it's a bit like riding a bike, even though you might feel like you haven't touched it like, like, there's even for me, there's certain parts of code where I'm like, oh, man, I haven't worked on that website or haven't worked with this tack in seven years or something like that. And you come back to you're like, I have no idea what to do. But then you get you get back into it, you start working on it and whatnot. So I was the first day, don't sweat it. It's good to have have breaks and whatnot. And also, you probably come back to it with a renewed energy for it, even though like maybe not energy in life, but just a more excitement for it. And then like you said podcasts and blog posts are a really good i think i what i would add to this is also watching coding videos on YouTube or on just like a course like not necessarily you doing it because we know that that takes lots of time and commitment, but just watching others do it will. It's both it can be enjoyable if it if it moves at a decent pace. But also it can be good just to keep your head inside of things like that. And a year is really not that long. I know that we talk about like things changing very quickly. But I think if you were to keep up to date with the podcast and whatnot, you're not gonna you're not gonna be left behind or anything like that. - -36 -00:23:55,890 --> 00:25:34,530 -Scott Tolinski: Yeah, I wanted to put this one in here very specifically, because six months into a year long maternity leave, like yeah, that is going to be very tough, especially with everything else that comes along with the maternity leave. I know, you mentioned that your brain feels like mush. Yeah, I can only imagine that your brain probably feels like mush. Because first year is rough. It's very rough. You're not getting any sleep. It's hard to concentrate on things. I know my wife constantly refers to her baby brain as just being like, she can't even think straight. Right? her normal ways of doing things are just just aren't easy anymore. So whatever you can do to give yourself that ability, like Wes said, watching tutorials without even doing it is a good thing. Because you see the code being written. It puts good practices in front of your eyes most likely if you're watching talented coders, because again, it what it does is it's kind of flipping those same switches in your brain of the text on the page and what that text is actually trying to solve. It's not Going to work your your problem solving stuff as well. But it's actually going to be really good for you to really visualize a little bit more programming, which can really help. So I think Wes nailed it. Next question here is from Alejandro. Oh, and sorry for anon. Oh, good luck for you next six months. Yeah, congrats. All right, ella 100. Next question is, Hi, thank you for the awesome podcast. I've been listening for 100 episodes or so still trying to catch up below 200. Wow, is crazy. To me. It is crazy. You know what it was? I want to start at episode one and just listen to them all. - -37 -00:25:34,530 --> 00:25:37,950 -Wes Bos: I want to do that. That would be a lot of time. - -38 -00:25:37,950 --> 00:25:42,780 -Scott Tolinski: I've listened to them all when they came in again, I want to I want to go on that journey - -39 -00:25:42,810 --> 00:25:44,280 -Wes Bos: to go for it. Enjoy. - -40 -00:25:44,370 --> 00:28:10,170 -Scott Tolinski: Yes, thank you. I've learned and enjoyed a ton. I'm a web developer. So syntax allows me to stay up to date with a web dev and learn from other people's experience. Here's my question. I remember you guys saying something about making your own UI component libraries? I have been wondering, do you use some CSS library like tailwind or bootstrap for doing this? Or do you write your CSS or CSS from scratch? Thanks in advance. Okay. So ella hundra, I write my CSS from scratch. For the most part, I use styled components to make my component library. But I've been getting away from this. I don't know how you feel about this West, we can have another conversation about this another time. But I've been getting away from using styled components for everything. Specifically, because CSS variables have become my Bay, I absolutely love CSS variables to the point where they have made so much code that I've written redundant I've, I've gotten better at systems, I've gotten better at design systems. I've gotten better at Classless CSS as in my base CSS file that I wrote, where I style all of my elements and whatever has gotten me to the point where I've written such efficient CSS that I'm almost hardly having to write overrides anymore. Not that I don't have to first specific features, but like overrides or specific instances, what I've done is I've taken an approach where I have all of my base stuff. And I've started to craft my own utility CSS classes when I need them. Now, that might seem contradictory to some of the things I've said about utility CSS in the past. But what I've kind of pushed back on and utility CSS is, is just importing some utility CSS library or going from those starting points, because you don't need all the stuff they give you. And you have to learn somebody else's thing. But if I want, maybe like just a text align center on something, it's okay to make a center class and then throw that text align center on there to to augment your own things. So I think you'd be surprised if you wrote it from scratch just how little you end up having to write to do some of these things yourself, then write them for when you need them. That said, it does depend a little bit on your time time levels, how much time you have maybe using something like tailwinds could be a nice way to rapidly write some code. Me personally, I maintain it all and styled components, CSS variables, if you want to learn more, I have a course on this called modern CSS design systems. Talking about writing really, really good base level CSS, - -41 -00:28:10,200 --> 00:29:24,660 -Wes Bos: I write everything from scratch as well, I've got lots of different projects, some of them just use classes that target things, and you apply the CSS to that some of them use them. Lots of them use style components. I don't use any of the theming values from style components. And I very rarely actually use the ability to stick JavaScript data into the style components. But I still really like style components for what it's good for, which is scoping, CSS, making reusable components, just writing the CSS, like its regular CSS, and, and sticking in there. So I really like that I think if I were to ever switch away from style components, it would be just to something that uses like the almost the same API as components, but is a smaller footprint, because I don't necessarily need the variables thing any longer. That's not to say that you shouldn't use documents. It's just I have found myself not needing it as much now that we have CSS variables. And I want to be clear, I'm not people always take things like oh, I'm not using it as much. People always say like, oh, you're not using that at all anymore. And it's dead. No, no, I still use it all the time. I still, it's still my choice if I'm doing CSS in a react project. So - -42 -00:29:24,690 --> 00:29:36,420 -Scott Tolinski: that's it from scratch. And sometimes using a library can save you a bunch of time. One of our sponsors could save you a bunch of time on the back end. And I've talked about Prismic. - -43 -00:29:36,450 --> 00:32:21,570 -Wes Bos: Yes, Prismic is a headless CMS for your project. It's awesome, because the way that it works is you sign up for Prismic. And you log in and you don't have to write any code, you just start creating your content types. You create relationship types. They have this really neat thing called slices, which we're going to talk about and some upcoming episodes as well. And then you can give that your marketing person or your end user, the person that's using your website, they log in, create all the content types. And then on the other end, you can grab a graph qL API, we'll talk about slices coming up, as well, it's a really big thing that Prismic has rolled out. It's pretty nifty. It's awesome, because you can go ahead and make a reactor view or an extra Knox or any project you want, and pull in all the data from Prismic. So check it out for your next project, go to prismic.io forward slash syntax. And they have a really, really awesome landing page with a bunch of starter files, they have other features, slices previews is really cool. You can preview your data, and they also have image optimization. So they have images built right in. So that also solves the problem not of where do you put your data? But also, where do you put your images? So check it out. Thanks so much to Prismic for sponsoring .TECH Next question from Dan Chenery. Hey, guys would be interested to hear some common ways use dev tools, Chrome Dev Tools, React dev tools, Redux dev tools, etc. I feel like there's a lot of information out there that I'm not utilizing, to help you figure out problems during development would be here to hear an overview of how to use different different tabs, I think that this would be awesome. Like, maybe we should do a bunch of hastiness on the different tabs and how we use them. But like real quick, my most used tabs are, inspector with CSS, I use Firefox dev tools. And there are some really nifty stuff around CSS and unused properties or invalid properties, I use the Network tab a lot to see what's being pulled in when things are being pulled in. I use debugger statements in the in the DOM, they also have, you can put in break statements, which will break when some data is added, or when a DOM has DOM element is updated, and whatnot, I use the storage tab quite a bit for local storage and cookies. And those are my big ones. Firefox just rolled out this really nifty, multi line console sort of playground, you know, if you're just trying out some JavaScript, and you want to run it, and you just type it in the console, but it's multi line, and sometimes you hit enter at the wrong spot. They just, they just rolled out this sort of like little playground where you can put your write your code, and then hit a shortcut key, and it will run it in the console. So I like that a lot. - -44 -00:32:21,750 --> 00:32:56,730 -Scott Tolinski: I've not I've not seen that yet. I gotta update to get it. I have been using I think primarily, I mean, obviously, the elements and the styles tab are probably the the default. All right, yeah, much CSS in the styles tab. Like I really like to try things out. And that's actually another area where my variables and design system stuff has like really come in handy, because you can tweak so much by modifying a couple variables in our system. So that's always really nice. For me, even chrome added so many of the nice new layout tools now like the grid stuff that Firefox Dev Tools had. So Chrome's really been stepping it up. - -45 -00:32:56,760 --> 00:32:58,710 -Unknown: Did they add that? Yeah, they have - -46 -00:32:58,710 --> 00:34:23,790 -Scott Tolinski: a bunch of new stuff. Oh, check out that. Yeah. And then you can even extend the grid lines show that I mean, all this stuff that you can do in the Firefox version of it. It's really nice. There's some some really cool tools there that they've been adding lately, specifically, around that kind of stuff that you're used to in the Firefox developer tools. But even like color pickers, and little things like that, I think that Chrome Dev Tools has responded well, to the Firefox Dev Tools being so dope. They're just like, well, we gotta gotta step it up a little bit. I think my most used tab in Chrome Developer Tools nowadays is probably the Network tab. I really rely on the Network tab. And also, I've been doing a lot of ESM stuff lately, where you're able to see the modules being loaded as individual networker. Yeah. Like I said, I spend a lot of time in the Network tab, but it is endlessly helpful once you get to use it. Not from like, perf. I mean, perf. Yes, absolutely. But be able to see like, Alright, this thing's not working, what is actually being returned to me. Like, for instance, maybe I was expecting a file to be returned, but it's actually getting my in. My request is returning my index dot HTML file. You know, have you ever seen that? Let that error that's like, unexpected token forward slash bracket. Yeah. can be confusing. Yeah. But if you head to your network tab, and you can see, okay, what's actually being loaded with this file? Oh, it's loading an HTML file that's unexpected. I get that one all the time, or a course - -47 -00:34:23,790 --> 00:34:41,280 -Wes Bos: or issue? It would the error would just tell you, it blocked it, because of course, but you can actually see what came back. And if you see the data that came back properly, but it didn't come into JavaScript, because of course, then you know, okay, there's something wrong with my, my server, or I'm not sending the right cookie or - -48 -00:34:41,280 --> 00:35:33,110 -Scott Tolinski: and even just like inspecting individual requests, like for instance, like you might know that your your site is slow, but you might not know why it's slow and being able to see which requests specifically is taking up that amount of time. It's just endlessly useful to have all of those things right in the easy place. a side note here Last week, I said That's unexpected or something. That's what we always say to Landon when we're like, he's doing something weird and we don't want to be like, what are you doing? Now? You know, cuz you know, you don't want to shame a little kid like that. So what we're saying we always say, That was unexpected. I got that one morning. That's great. All right. Next question is from Harry. Harry says, Hey, listen, Scott, thank you for everything that you do. You are both truly a gem for the community. You know, remember when we said that, you got to say something nice about us before? - -49 -00:35:33,860 --> 00:35:34,670 -Unknown: Everybody is, - -50 -00:35:34,770 --> 00:38:07,710 -Scott Tolinski: yeah, I really need some help or advice. I'm graduating from a boot camp next month and feel like I am feeling severe insecurities, or imposter syndrome. For whatever reason, I freeze up when it comes to writing up or coming up with code myself, mainly in JavaScript, when in class or watching tutorials. following along or viewing other people's code, I can tell you exactly what's going on or why it's being done. I can change things and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. I forget simple syntax having to Google the oddest things. And sometimes I don't even know where to start my own application. Do you have any advice on how to get past this hurdle? Like some sort of system or template that you follow? When starting out? I'm a very visual learner. When there is nothing here I choke, I know doing projects are supposed to help, but figuring them out at my own issue. I feel like at this point, I shouldn't be feeling like this. But is this normal? Okay, let me just stop you there. Yes, very normal. In fact, this just like anything else in programming is a skill that you need to practice. Now, I like to organize my code by writing out some little like notes to myself in terms of comments, usually, in the form of comments, like first thing, alright, I'm starting a new JavaScript, let's say it's a node server, and this node server needs to connect to a database. All right, what do I need to do? First, I'll leave a comment that says, very broadly, connect to dB. need another comment? Once DB is connected start server. Okay. So like, you could think of it as like, when you're writing a term paper or something, you're writing a paper in school, and they always like told you to do like an outline. First, I like to do an outline in comments, if there's a project that I'm not sure where to start, here's what I need to do. And here's what I need to do in plain English. And then what you can start to do is just start to fill in those blanks with the code that accomplishes those things that your text is saying to do. And that will at least get you through a place where like, typically, when you're solving a problem, or you're writing an application, you typically know what the problem is. And if you start at the very most broad way of describing that problem, and then drill down, drill down, drill down. And next thing you know, you're ready to write some code, that is usually a good strategy for me. But this is an entirely normal thing, Harry, and you just need more practice. And if you're struggling and googling a lot, hey, that's cool. Don't get down on yourself about it struggle in Google, because that's the only way you're gonna get that practice - -51 -00:38:07,770 --> 00:40:29,550 -Wes Bos: is is totally normal. Like Scott said, I think what I do, and I still do this is like you're attacking a problem. And you have no idea even where to start. And then you panic, because you don't know. And then there's this added thing about like, is what I'm writing the best way to do this. So first of all, throw out that that part, which is is this the best way to do it, it doesn't matter. Like I did a, I did a little YouTube video the other day, go to my email or my channel, and it's about like a tricky, what's it called? Can you solve this tricky JavaScript array problem. And I think that was that was a good example of how I approach it, where I explain it. And I just think like, something needs to happen here. And then just start doing a brain dump of different things you think needs to happen, and then write them in comments, like Scott was saying, and then just start to do little pieces. That's how programming works is that you are constantly just changing the way you're doing something and re approaching and refactoring and whatnot. So just know that that is is normal. The only other thing I would say is maybe even try to record yourself solving a problem as if you were going to post it on YouTube. That's not to say you should post that on YouTube but just getting comfortable with attacking a problem. Well you feel like somebody is watching I'm using air quotes here, I think is also really helpful that that's helped me over the years, tackle things better. Sometimes when I have a problem I'll flip on my screen recorder and just talk through it and probably four out of five times it's not very good and I don't post it but that one fifth time it is actually a good video but just for that for just for me thinking this might be actual video for people. It helps me post it online and also it's helpful because You get past that like imposter syndrome. I just posted my video and I had 300 people telling me I did it wrong. You know, I used to get really upset about that. And now I'm just like, there's literally lots of ways to do it. Who cares? Like, this is how I did it. And then there also is helpful little tips in the comment of Oh, you could have used this little method or maybe if it easier, faster to do that, and it's helpful. So that's what I think I think you should just, it's totally fine. Keep practicing, you'll get better at Yeah, - -52 -00:40:29,550 --> 00:40:36,030 -Scott Tolinski: embrace the the rough, you know, patches that you have when starting out and just know that it is totally normal. - -53 -00:40:36,030 --> 00:41:09,270 -Wes Bos: Next question from David P. Ah, do you think developers have a responsibility to help reduce co2 emissions caused by the web, a BBC News article, blah, blah blah.uk stated that HD video streaming on phones generates about eight times more emissions than standard definition video, but and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution on the mobile device? Or should they let the end user choose? Thanks for the hard work? - -54 -00:41:09,270 --> 00:41:09,780 -Unknown: Oh, that's, - -55 -00:41:09,780 --> 00:41:31,920 -Wes Bos: that's a question. Yeah, I should maybe read this article here. But I'm assuming the processing of the video is what causes a lot of the emissions because it takes so much heat and CPU power and whatnot. So do you think that we have to reduce co2 emissions? Absolutely not. We're web developers. And we can do all with No, I'm joking. - -56 -00:41:35,100 --> 00:41:37,830 -Scott Tolinski: I was like, really about to get upset? It's, - -57 -00:41:37,880 --> 00:42:50,670 -Wes Bos: it's all fake? No, no, honestly, yes, I think if you can eke out another place in your life, where you can stop the co2 emissions from from going even just like the other day I spent, like 10 minutes trying to get my frickin monitors to sleep at the right time. Because it's sometimes that you just I leave my desk, and I come back in the morning and the my monitors are still blasting on. And I was like, Why? Why are these not going to sleep? And I had to like dig down the rabbit hole of that. But if you can find more ways, absolutely. Should you degrade the performance of the video and the quality? I think that's what an algorithm should do. Not you, or the user can do it. But I think like, if the YouTube video like YouTube does this already, they can detect if you're watching it on a specific device and the speed of urine and internet and whatnot. So there's that I would serve up your users I've worse version of a video just to help the environment. Because there are other things you can do. There's lots of environmentally friendly hosting companies, you could put it on, there's carbon offsets that can be done. I'm not an environment expert. But I think that there would be other other ways to offset. - -58 -00:42:50,700 --> 00:44:31,680 -Scott Tolinski: Yeah, I'm not an expert, either. I do think that what you mentioned, being like not necessarily their responsibility, because typically, if you're serving video yourself, you're serving a singular file, it's not going to get that many plays. But the companies who are doing the heavy lifting in the serving of video, whether that is YouTube, Vimeo, or let's say like even my, my host mocs, right, those companies, they're doing the heaviest of the lifting, because they're choosing which to serve up for users. And I don't think that I would imagine that those companies would like to keep their bandwidth bills, all of that as small as possible. So that's where the biggest savings are going to come in general, was going to be from those companies who are able to make those changes as well as like, let's think about like, the biggest I think carbon co2 emissions decrease is going to come from better compression and newer formats. And that's really like something that's sort of out of your control. So the things that are in your control. Yeah, absolutely. I would say go for it. And that should be even like a, that should be a differentiator, right. Let's say there's there's two hosting companies or something and one provides those types of features and one doesn't, you know, maybe start looking at the the one that provides, you know, what are they're doing for environmental causes, or whatever I am very, very, very pro environment. And I would like to see everything possible be done, but I don't think changing your video output to only allow for SD video streaming. I don't think it's really the right solution. But you know, - -59 -00:44:32,070 --> 00:44:54,900 -Wes Bos: yeah, they say in this article, they there's a little update at the bottom that says the story should have said 4k not not HD, so it's there, they're comparing 4k to 320 p which is massive, massive difference in video quality, and I would say like unwatchable on on 320. And in most cases, especially for me programming, the text needs to be super crisp. - -60 -00:44:55,050 --> 00:45:07,320 -Scott Tolinski: And you know what, like, there is going to be much bigger offenders than you, whatever your Doing. That's not to say you shouldn't do everything you can, but Netflix is serving up 4k, and they're doing it to - -61 -00:45:07,410 --> 00:45:09,240 -Wes Bos: they're burning diesel, you know, they're not. - -62 -00:45:11,910 --> 00:47:51,930 -Scott Tolinski: So far, like, you know that that's Netflix is they're gonna be the ones who are hitting that major co2 emissions bump. And in fact, if you wanted to do your part there, maybe you should just set your Netflix and your YouTube qualities to Adobe on HD rather than 4k. And then that way, you won't get that 4k if you don't need it. I think that would probably do more than whatever you're serving in terms of environmental offset or something like that. All right, let's actually this is, I don't have any, any prepared transitions for this new sponsor that we have with us. No, it's been a little while since we've had a new sponsor, because all of our current sponsors are just so amazing and keep coming back. So this new sponsor is linode. Now, if you have been around in the web development space, for any amount of time, you probably have heard of linode linode is a historically tried and tested cloud hosting platform. And if you haven't been to linode.com, lately, you're gonna want to check it out, because they offer a ton of really, really awesome services beyond just simply hosting a VPS. Because I would say like linode, as I want to go, like back in time back into time here, when we were looking for new cloud hosting providers. At some point, there were a handful of companies who did VPS stuff, and linode was always at the top of that list, right. And so they have evolved as they should have, and they have come out with a ton of cool new stuff. And I don't know about us, but I'm looking into Kubernetes more, which is I don't know why, but I am looking into Kubernetes. I've learned how to say it. And that's a good start. And there's some really, really interesting Kubernetes products available on linode. So today, you can get started with linode with $100 free credit, which we all know in the VPS world will get you a very long ways because virtual private servers especially companies like linode are cheap. So $100 in credit is going to get you a lot of stuff. So you're going to want to head on over to linode.com forward slash syntax that's Li n od e comm forward slash syntax linode has 11 global data centers and provides 20 473 65 human support with no tears or handoffs, regardless of the plan size. In addition to shared and dedicated compute instances, you can use your $100 credit on an s3 compatible object storage, managed Kubernetes or more. So check it out linode.com forward slash syntax click on the Create free account button to get started. Thank you for linode for sponsoring. - -63 -00:47:52,530 --> 00:51:24,000 -Alright, next question is from Ben K. What about Ben q? Isn't that a tech company? Yes. Okay. Hey, Scott West, I was hoping that you guys could give me and other listeners advice on knowing when you've bitten off more than you can chew. Often I'll be working on a project for fun and possibly building my portfolio. And I'll continue to be excited about the features that I'd have to add as my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle but hours later, I find myself stuck. Realizing that I'm in over my head as I've tried to make something that I'm not yet experienced enough to work on, or with or having lacking the manpower to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow. But sometimes I feel like I'm not using my time wisely. So my question to you is where does the line between challenging ourselves take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming? Okay, but I think there's two things here, because the two things that stuck out to me were, I'm realizing that I'm in over my head, and I'm not experienced. Okay, so one, the experience level to tackle something to me, that's a great problem to have, because this is a good opportunity for you to become experienced in this. Number two, the lack of manpower to complete something that is a different problem, my friend, because there are problems that are just way too big for you to code up and a side project, or else everyone would just write Google and their side project, you know, it's like, there are certainly problems that are not going to be easy for you to solve or possible for you to solve as the solo individual. But if it is a problem of you don't have the experience. This is a good opportunity. If this is something that you want to learn, or you feel like could benefit you in the long term in your job hunt your career, then you're going to want to go ahead and just look at the problem for what it is okay, I'm trying to solve this problem. Here's a good one. and building a video site. I have no experience with video. What do I have to do? Well, I have to figure out how to upload video, okay, well, I gotta have a way to upload the video, look at, uh, upload the video to somewhere, Okay, I gotta find a service, okay, maybe that service is a paid service, maybe it's a free service, whatever. Maybe it's an API that already exists to Vimeo or whatever. And, okay, I picked this service. Now I have to write the code that connects the two, I got to upload the video to the service, hit the API, do that stuff. And that, to me is like fully understanding the problem and the solution before writing any code, and then you can then try to execute. Now a lot of the times when you are trying to solve a problem without writing any code, you will have missed a substantial amount of things. Or perhaps your brain did not think of the things that it does not know about it. Because imagine that if you don't know about something, you don't know about all the little things you have to think about. But it's a good opportunity for you to then dive in further dive in further dive in further. And you know what, by the end of it, you may not even get a functional product, but you will have learned a ton about the intricacies of these little things. And maybe next time when somebody says hey, can you write me a video uploader? You could say, I could possibly write you a video uploader. But these are the things that we need to consider. Do you have the budget for this? Do you have the time for this? Do you have this or that? Whatever. So it's not always about getting the code and results, but it's sometimes about like learning the things that you just don't know, exist out there. - -64 -00:51:24,060 --> 00:53:29,790 -Wes Bos: Yeah, that's I always would tell people push yourself maybe 12 and a half percent past your comfort level. So don't take on something that is like, like, massive, like, sometimes we see people do that, where they're like, yeah, like, I'm just gonna push myself and like, you should know how far you are pushing yourself. And how do you do that? Well, like, Okay, I'm taking on a project with like a store locator. I know, I was just saying sample, but it's a good example. I've never built one before. And I've never done mapping before. So let me do a quick little bit of googling around, let me look at some of these packages, and say, Okay, well, this thing allows me to plot map points on a map. And this thing allows me to pull in my store my data, and I can have latitude longitude, I think that with a little bit of work, I can get those two things working together. I think that's a good example of pushing yourself, right. It's not going in blind, pushing yourself as not being blind about it, and just throwing yourself into deep water and learning how to swim. It's just saying, like, I am a little bit afraid of that I'm a little bit intimidated. And there's a lot of unknown. I think, also, what is worth having is if you can find some sort of mentor, who it will be your phone a friend for this stuff. Yeah. And just like, not necessarily do the code for you. But just be like, Look, I'm trying, like, I remember my buddy Darcy, I was building a integration for a real estate website. And I was just trying to like, hack their query params and pull it into their website. And I was just like, yeah, like, it should be possible. And then I was I was in over my head, and I didn't know how to do it. And then he just came along and said, like, all right. Like, this is how I would approach it, you need to make sure you're getting the data from the client, and then like hot potato, send that over to, to whatever proxy you're working on as that Okay, good. Like, in that case, I knew that I was pushing myself. And I knew that it was possible, but I just hit like an actual technical hurdle, which I didn't know, I didn't know what the piece of technology was to, to fix what I think I had in in that case, having a phone a friend is key. So hopefully, that's helpful. Yeah, - -65 -00:53:30,000 --> 00:53:49,050 -Scott Tolinski: I think the phone a friend thing is, is a really good idea. But at the same time, you gotta be aware of that, you know, you're placing a cognitive burden on somebody else. So making sure that the questions are like, is this a dumb idea? Or those types of things? Where should I look to learn about this? Don't be like, learn? Yeah, for me, right? - -66 -00:53:49,140 --> 00:54:36,270 -Wes Bos: Yeah, just having like a shirt coming to people with your questions. Like, sometimes people will send me a DMS all the time, people send me DMS with questions. And sometimes it's just Hi. And then I'm like, Yes. What do you need? Hi, is this what you're sending to me? And then other times, people will say, hey, Wes, I know you're busy. Here's a code pen or code sandbox with the exact issue that I'm running into. What do you say inbox? Yeah, yeah. And then I was like, oh, man, like, then I can just, like dive into quickly. And And usually, it's a question where I'm like, Huh, I bet I could figure this out. Like, it's almost like, almost a challenge. You know, like, the last YouTube video I did about the array thing. That was somebody who came into my DMS was like, Well, how would you approach this? I don't like, you obviously know me very well, because I want to fix this myself. - -67 -00:54:36,300 --> 00:54:57,000 -Scott Tolinski: Yeah. Like if I'm in GitHub issues and, and I'm like, just pawn around some other library that I use as GitHub issues, and somebody comes in with a code pad. Man, I feel compelled to. It's bad for me my productivity, but I feel compelled to click that and be like, What is going on? Oh, yeah. And the live episode, we did that little game where we could see who could see if we could find the little bugs in - -68 -00:54:57,000 --> 00:54:59,670 -Unknown: the code to me syntax error. Yeah, that's a lot of fun. - -69 -00:55:01,140 --> 00:55:12,240 -Scott Tolinski: Okay, last question here is from Matteo Wong. And he asks, thanks for the fantastic show, Scott and Wes, I've been listening to every single one, as soon as the GitHub commit code GS Mateos on the GitHub tip, - -70 -00:55:12,240 --> 00:55:30,600 -Wes Bos: oh, there's the GitHub. So for those who don't know, there's a couple people who scope the shows early by watching GitHub. And the GitHub commit will have the mp3 URL in it. So we can see from our stats that there's like, between five and 12 people that do this. - -71 -00:55:30,629 --> 00:56:45,480 -Scott Tolinski: Yeah, right. It's very fun, Matteo, on the GitHub gang here. What is the right use case for a database? And what is the right use case for a headless CMS? is a headless CMS just a database plus a user friendly way of entering data into the database? Is there a secure way of querying Sanity directly from the front end? A lot of questions, but do I have data that I want to be only available to logged in users? Thanks, again, for the podcast. Okay. So for the large part, there is a bit of a difference between the headless CMS and a database with a user friendly way of entering the data because oftentimes, those systems, the CMS, they're taking care of things for you beyond just entering and retrieving data. There's a lot of like, you mentioned permission based things. So like you only want to have data available to logged in users. That's something that you can't just do with only a database, right? There needs to be logic in the application somewhere to look at, like, who is the current user in a secure manner? What are they doing? And what do they have access to? Well, you do need code logic in between there. And your options are to either write it yourself, or to have the CMS have it being written for you. Of course, there is trade offs there. - -72 -00:56:45,600 --> 00:58:10,410 -Wes Bos: Like you can't use a database straight to your front end code. Because like a database doesn't, you can't just connect JavaScript on the client to a database. Because there needs to be layers of like logic, how and things get updated. There's a layer of authentication, who can update and pull data. And then finally, I think one thing you're thinking of here is that a headless CMS gives you a GUI to actually manage all of that data. Even though you can obviously, go straight to the like an API, like the difference between an API and a database is the database is just where the data lives without any sort of restrictions on the I guess some databases do allow you. But usually, you need another layer on top of that, which is who can do it and what and the layer. And then finally, you have a GUI, which is if you log in, you want to be able to manage, update, delete, query, things like that. So that is the difference. Some people will go straight for a database and build their own layer of logic, authentication and gooey on top of it. I think in most cases, people go for a no, maybe not most cases, that's not true. But in a lot of times, she will just say, like, yeah, I have the use case that headless CMS fits. I have content, I've got data types have a relationship between the things, I just want to define what those are and to spit out an entire GUI and graph qL or REST API for me. - -73 -00:58:10,680 --> 00:58:28,710 -Scott Tolinski: Work. That was good. So for that one, now, we're gonna get to the part of the show that we call sick pics. take picture where we pick things that we find to be pretty sick. Sometimes it's products sometimes it's podcasts. Sometimes it's meat. I have no idea Wes, what do you got for us? This week? - -74 -00:58:28,830 --> 00:59:33,840 -Wes Bos: I got a sick pick a hot sauce. That is very hard to get in Canada. I had somebody send me a bottle of this and it was awesome. It's the secret secret aardvark habanero hot sauce. And it's unlike any other hot sauce I've ever had. And it's I was gonna say probably top three hot sauces I've ever had. It's thick. It's almost like almost like a salsa, but not a salsa. And it's got the right amount of heat like it's not like gonna blow your brains out super smoky. Like I get the hiccups Yeah, yeah, it's it's chunky and it comes in like a bit of a different bottle than you would think it comes in like a bottle like a squeeze bottle but it's got a big wide mouth on it because it's a little bit chunky and man, is it good? I ran out and I was really bummed because it's like $17 a bottle if you want to buy it in Canada when it's just like a couple bucks if you buy it in the states so I am waiting for the borders to open up so I can go buy some more of this because I loved it secret aardvark habanero hot sauce. Sounds good. - -75 -00:59:34,140 --> 00:59:58,050 -Scott Tolinski: I am a big fan of habanero. We grew our own there. You can find everywhere in Colorado. So I'm a big, big fan of that. That type of burn. It's like a little bit less upfront burn than you get with a jalapeno. Like in my experience, it's a little bit more of a younger and it's a good linger. I'm a big, big big habanero fan. I put them in my DJ a lot. That's my my jam. - -76 -00:59:58,050 --> 00:59:58,860 -Unknown: Ooh, - -77 -00:59:58,950 --> 01:00:03,480 -Scott Tolinski: there's there's so much VGA is one of them. All right. - -78 -01:00:03,539 --> 01:00:06,690 -Wes Bos: I never made the VGA. I need to do that. That sounds awesome. - -79 -01:00:06,719 --> 01:00:43,530 -Scott Tolinski: Yeah, get some nice sushi grade tuna. Chop it up real fine. dice it up. Throw it in there. Oh, yeah. Scoot squeezing fruit. That's what people don't know. They often think it's just like you squeezing grapefruit in that bad boy. Great. DJ going, Yeah. Big fan. Okay, so my sick pick is going to be kind of funny here. This is three m double sided mounting tape. Because I did not believe that double sided mounting tape would be exciting or interesting. But I have double sided mounting tape and I have my like, you know, the count digit is our hub for our computer. That count digit hub has a beefy power supply. - -80 -01:00:43,530 --> 01:00:54,060 -Wes Bos: It's a big old power. So Oh, mind you might just fell off. It's sitting on the ground right now because there's like 800 cables. Yep, if you get the wrong one, it falls off. So - -81 -01:00:54,149 --> 01:01:51,960 -Scott Tolinski: this is awesome. I need to know what I have done. In addition to having this like because I want to you know, I gotta keep my cables organized and whatever. I wanted to have a power strip underneath attached to the underside of my desk so I could plug in anything or whatever. In addition, I wanted to be able to mount that power supply that giant power supply. So I've used this three mm double sided mounting tape and I have had a you know a power strip you plug things you unplug it gets a lot of action in that up and down way. So like that has not budged it hasn't budged at all. And the power supply for my three m i just took some sticky double sided tape popped it right up in there. And it is stuck like a mouth mouth ever mouth effort. It is. It is stuck. So I've used this tape. In fact, I've used this tape so much that I already went through a whole roll and I ordered two more because I was like you know what? mountain tape double sided mounting tape by three m this stuff is legit. - -82 -01:01:52,169 --> 01:01:57,270 -Wes Bos: That's good. I'm gonna have to get a roll of that we have it. We have it for our rugs, - -83 -01:01:57,329 --> 01:02:00,390 -Scott Tolinski: keep them in place. That is so smart. Yeah, to do that. - -84 -01:02:00,629 --> 01:02:09,210 -Wes Bos: Yeah, I've been using Velcro for all of my stuff. So that if you do need to take it off, you still can. But this for some cases you don't. - -85 -01:02:09,230 --> 01:02:20,910 -Scott Tolinski: This is more sturdier than more sturdier. This is more sturdier than Velcro. Because like that Velcro the sticky isn't gonna be the weak point of it. It's gonna be the Velcro the heavy - -86 -01:02:20,910 --> 01:03:07,950 -Wes Bos: duty Velcro I literally I could hang like myself up with a stripper. It's so heavy duty. Like it's like you don't think like I you should see my ceiling right now I used to put all my hard drives on the ceiling because I have this like angled ceiling and I took them off and I ripped the drywall off. Because this the Velcro was so strong, so maybe go easy on that. But yeah, good sick pack. Shameless plugs, I'm gonna shamelessly plug all of my courses at West boss comm forward slash courses, you'll have a list of master Gatsby beginner JavaScript ESX for everyone. full stack, advanced react and graph qL react for beginners CSS Grid, there's lots of on there, go check it out. Use coupon code syntax, or 10 bucks off. - -87 -01:03:08,460 --> 01:03:41,970 -Scott Tolinski: Awesome. I'm going to plug all of my courses at level up tutorials.com. We do a new course every single month. It's like a magazine subscription. You sign up, you get the latest course. It's very cool. You get me teaching you all sorts of awesome stuff like Dino, one on one for web developers as well as animating svelte or even animating react. Love that stuff. So if you want to check all of that and more head on over to level up tutorials.com forward slash pro and sign up for the year today. All right. Thank - -88 -01:03:41,970 --> 01:03:47,880 -Wes Bos: you so much for tuning in. We'll catch you on Monday. Peace, peace. - -89 -01:03:49,560 --> 01:03:59,310 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax321.srt b/transcripts/Syntax321.srt deleted file mode 100644 index 37a3666e8..000000000 --- a/transcripts/Syntax321.srt +++ /dev/null @@ -1,200 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:03,060 -Monday Open wide. - -3 -00:00:03,989 --> 00:00:07,620 -Get ready to stuff your face with JavaScript CSS loadmodule - -4 -00:00:07,620 --> 00:00:09,060 -BBQ Tip Get - -5 -00:00:09,060 --> 00:00:16,710 -workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming - -6 -00:00:16,710 --> 00:00:21,690 -in hot here is when Sarah Kuta bombs and Scott L. - -7 -00:00:23,579 --> 00:00:24,480 -Totally ski. - -8 -00:00:25,920 --> 00:02:03,690 -Scott Tolinski: Oh, welcome to syntax. In this Monday tasty treat, we're going to be talking all about the new unreal image format called Eva, if you know the pronunciation on that it's an image format. We had jpg, we had ping, we had PNG, whatever. Now we have a with. And let me tell you, it is very, very, very cool. It's also very small. So we're going to be talking all about what it is, why you might use it, how you might use it, and what the future looks like for Ava. My name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado, and with me, as always, is West bow. Hey, Hey, where's this episode's sponsored by two awesome companies, one of which is sentry@sentry.io. And the other one is Freshbooks. Now Sentry is the perfect place to see all your errors and exceptions happening in your application. It does an amazing job at cataloguing all of your errors in its dashboard. It's very cool. And along with that, it gives you some really interesting features like performance tracking tools that allow you to see just about every single route on your application and get the perfect metrics that you need to debug any sort of performance issues that are happening on your site. Not only that, but you know, sometimes it's really easy to sweep those kind of things under the rug, right, you're like, Oh, this is fast, but I'm using it but you don't exactly see what all your users are seeing all the time. And this is the kind of tool that's already in all of the stuff that you're already using. So pop it into your Sentry application that you're already using. And guess what now you can see right in front of you exactly how miserable your users are on some routes. That's very, very cool. So head on over to sentry.io use the coupon code tasty treat all lowercase all one word, and you will get two months for free. - -9 -00:02:03,720 --> 00:03:10,200 -Wes Bos: Next sponsor is fresh books, fresh books is cloud accounting, you know what they do your invoices, your expenses, one thing I'm going to highlight in this ad right here is that you can hook it up to you directly to your bank, and have your expenses automatically imported into Freshbooks. And I was just checking it out the other day and hooking up my own bank account. And they now support tons of banks, 14,000 different banks and in Canada alone, or I am the list of possible banks as well as they hook up to your PayPal, which is really cool because like for example, my CloudFlare I pay for my domains with PayPal, and that can hook right into PayPal and automatically import those expenses, which is really slick as well as all the bank accounts you have it can both do bank accounts as well as credit cards. So depending on how you're paying for things he gets the import of they're really slick saves you tons of time, check it out freshbooks.com forward slash syntax for a 30 day unrestricted free trial. Make sure you use enter syntax in the How did you hear about a section when signing up. And thanks so much to Freshbooks for sponsoring - -10 -00:03:10,260 --> 00:03:31,140 -Scott Tolinski: .TECH so let's get into the meat and potatoes here. And I'm talking about a with the image format now, right off the bat I'm gonna say I don't think Western I know exactly how to pronounce this, but I don't think that's anything new with image formats. I mentioned that off the jump saying JPEGs and whatever. jpg whatever people call this. I'm gonna call it a TIFF. Is that what you're gonna call it? Wes? - -11 -00:03:31,140 --> 00:03:35,910 -Wes Bos: I think so. It's as if avesh sounds weird. Yeah, sounds weird. - -12 -00:03:35,910 --> 00:03:36,960 -Unknown: It sounds Yeah. - -13 -00:03:37,140 --> 00:03:51,720 -Wes Bos: It's a V is a yo media video. That's it. This format initially stems from video compression. And the i F stands for image format. So a V if a thief Yeah, that's what it is. Let's go with that. - -14 -00:03:51,750 --> 00:05:48,660 -Scott Tolinski: Let's go with that. So took it off the jump. What is a VIP, I think the background on it. It's derived from like you said, it's derived from a video codec and that video codec is the AV one video format. This is a royalty free Video Coding format that was designed for video transmission over the internet. So this was not a format that was designed for just display or whatever this was specifically designed for transfer over the internet. And so they basically took this AV one format and were able to create a new image codec directly from the individual frames of an AV one video, they're often seen as being so side by side but at the same time video compression has a bunch of issues that image compression doesn't have and vice versa, I would say. So they are different beasts. So it's interesting to see that this is pulled directly from a video format. Another thing is that like a v1 eva is royalty free, which to me is the most exciting thing about this, because in the past video formats and image formats has been a huge topic amongst browsers because of ownership of those formats. For instance, mp4 not royalty free. And mp4 is owned by several people. And because of that, I don't know who I think Apple owns part of it or they have their own QuickTime thing. Either way, the big meat here is really just that when something is not royalty free in any of these image formats, browsers are going to be way less likely to implement it. Because let's say Google owns this image format in Google, you have to pay Google royalties to use this image format, that's going to make apple and Firefox much less likely to implement that in their platform, or vice versa with any of those companies. So by being a royalty free format, nobody's fighting for essentially control. It's not their format. They're not cashing in the Bucks when people are using this format. So I think that's a big deal. And it's nice to see a really, really hot new image format be royalty free. - -15 -00:05:48,810 --> 00:06:18,420 -Wes Bos: You might be saying like, didn't we just get web P and I, I thought that myself, we had Henri Helvetica on the podcast when we I think we did our live show. And he said, when he was 10 years old, and Safari had just implemented it. The whole benefit here is that the AVI files are tiny, and can be used to compress stuff that you would traditionally use for JPEGs or web p as well as things you would normally use a PNG for, which is really cool actually doesn't - -16 -00:06:18,420 --> 00:06:22,770 -Unknown: have transparency. It's actually a great question. It does have transparency. - -17 -00:06:23,130 --> 00:06:24,090 -It does. It does, - -18 -00:06:24,120 --> 00:07:23,250 -Scott Tolinski: yes, cool. Because I did see in some of the comparisons, they were like talking about like that the Avi format was maybe a little bit less appropriate for something with like a lot of anti aliasing. And then when he was coming out on top in some of those situations, so that they'll be interesting to check out exactly when it will be most appropriate. One thing that I saw is they said in situations where you would use a JPEG, or even a web p right now, they said web p was basically half of the size of a JPEG, and a Vf is half of the size of a webpage. So not only we're getting faster internet, faster browsers, faster download speeds, we're getting smaller images, so that therefore anybody on a satellite connection, crappy internet connection over the phone, or whatever, people who have those connections that are not fiber, internet, hardwired to the dome, those people are going to be able to get fast loading times because the images themselves, which are often the clunkiest, heaviest things on your website, those things are going to be smaller. And that's fantastic. - -19 -00:07:23,250 --> 00:08:48,720 -Wes Bos: Jake Archibald has a blog post where he compares the differences between several types of images, like a photo of a race car that was clearly taken with a nice SLR, but then also something that was like export it from illustrator, that's very simple colors, and then also an SVG that has transparent background, but also a gradient underneath it. And it's unreal to see you can just click the tabs and see the difference between them both like if you go from the web p which is 50 k down to the A Vf which is 13 K, there's absolutely no difference that I can visually see between the two and then an other options are like okay, but if they're all the same size, like what does a 14 k PNG look compared to a 14 k web P versus a 14 k f. And the results is like, wow, that's incredible that it does, I think the only thing that it doesn't do is animation, which is okay, because you should probably just be using a muted video for that. Not even a GIF anymore. But man, I'm so impressed at how small these images can get. And really, there's no discernible difference between the two when you're switching between them the race car one, if you switch between them, the aVF looks better than the web p which is twice the size of it. - -20 -00:08:48,770 --> 00:10:11,490 -Scott Tolinski: it's astounding. It is astounding the amount Yes, we should say that this is a lossy format, which you're kind of dealing with, it's inherently going to be a lossy format as in data is removed from the image when you're taking this image and you're compressing it with a viff, there is inherently going to be some data removed. Now the thing about compression engines in general, whether you're compression, audio, video, images, whatever the key to compressing is that you want to be able to remove as much as possible without degrading the visual aesthetic of the image or audio aesthetic, whatever you want to be able to remove enough of the stuff that nobody cares about. And that people aren't going to notice that it can reduce the bytes that you're shipping, but it won't reduce what is the visual output. That's why this format is so good is because it's able to remove the information correctly, or at least to the point where you have these really fantastic looking images, but also keep the file sizes insanely small because at the end of the day, you have to think about this like an image or a video or audio all it is is just shipping bytes of code that represents something and then our brains are able to decode it via our eyes or whatever. So like, if you think about it in those terms, all we're doing is figuring out the right ways to remove information from something while keeping the end result to be as good as possible. And boy, howdy, very good. - -21 -00:10:11,520 --> 00:10:51,770 -Wes Bos: There is a lossless option with a Vf I was just reading. But in that case, the file is much larger than any of the other options. So like, it's not something you should be doing. It should be a lossless version. Yeah, or sorry, it should be loss lossy, which means that you do lose pixels, or you do lose metadata about it. But the loss II version is it's even smaller than the SVG version of some of these things. So if you think like, Oh, yeah, SVG is the best version, if you don't need the benefits of the SVG, which is being able to target the pieces of it, then this is possibly even even better option work on real - -22 -00:10:51,770 --> 00:10:52,620 -Unknown: but real, - -23 -00:10:52,770 --> 00:12:25,260 -Wes Bos: yeah, let's talk about how to implement it. So like, you're not going to just be like opening up Photoshop, importing your images and save as a TIFF and replacing them all, or you're not gonna be hand coding these things. Because, like, to be honest, a lot of these like next generation benefits, whether it's code splitting in your react application, or whether it's using a new image format, you need some sort of robot to do it for you. Otherwise, it's just not gonna happen. Nobody's got time for that kind of thing. So you will have to lean on tools that hopefully handle your existing images for this type of thing. cloudinary currently has this in beta. So cloudinary is a sponsor of ours, you can, but they're not sponsoring specifically this one. But you can pop the cloudinary URL in front of it and tell it to format auto or foam format. And then it will kick out the best possible option for that, which is pretty cool. Gatsby now supports it and their latest version of Gatsby. So if you're using Gatsby image component, it will kick it out. Oh, and then also, I think the thing we didn't we didn't say at all was you can support multiple versions of this because the picture element, you can give it a source or a source set and tell it Alright, this is the AIFF file. And if it doesn't support that type, it will just fall back to whatever's next. So as long as you have a JPEG or a PNG at the end of the line, the users that have browsers that support it, are going to get the benefit from that. Yeah, - -24 -00:12:25,320 --> 00:12:32,880 -Scott Tolinski: there's also this skoosh Sq you Oh, sh squish, squish, - -25 -00:12:32,880 --> 00:12:34,080 -Unknown: squish, squish, squish, - -26 -00:12:34,080 --> 00:12:35,310 -Scott Tolinski: squish. - -27 -00:12:35,310 --> 00:12:35,850 -Unknown: Yeah, - -28 -00:12:36,420 --> 00:12:40,410 -Scott Tolinski: that's it. Am I am I am I tripping here. What am I am I tripping? - -29 -00:12:41,189 --> 00:12:42,180 -Wes Bos: I think Yeah, tripping - -30 -00:12:42,330 --> 00:13:59,910 -Scott Tolinski: it, you said skoosh skoosh skoosh skoosh. That's the same word. Okay, whatever. This app is really neat. One of the cool things about this, there's also a COI to be able to use this in your command line for compressing images. One of the neat things about this is I'm going to go ahead and recommend you click one of the test app or one of the test photos. For instance, the 2.8 megabyte red panda image is my favorite. I love red pandas. And this gives you a little Draggy tool. So you can see the exact difference between the compression algorithm. So let's say if we wanted to give it a try. And there's a little drop down, that allows you to select a booth here. And you can actually adjust the quality. Now the cool thing is you can also pinch to zoom to like really get in like I want to, I want to see this cute little red pandas knows in a viff verse the the original image, and oh boy, I'm seeing a 70% reduction in size, this image went from 2.8 megabytes to 66 kilobytes. And this red pandas nose is looking as adorable as ever. So this is a really neat tool to give this a try. But also see this thing in action and see what what kind of benefits you can actually get out of it. But again, there's also the CL if you want to try it out, or you can actually compress an image of your own by dropping it directly into the interface here, - -31 -00:13:59,939 --> 00:14:47,010 -Wes Bos: we should say support for a Vf is it's in most recent Chrome as of August 2020. It's coming in Firefox 86, which by the time you're listening to this should be out. So the fact that it's in Firefox in Chrome means it's in edge as well. And a lot of the brave as well. It's not in Safari, like you probably could have guessed. But that shouldn't matter because of what we talked about earlier is that your tooling should just fall back to a web p version of that and then in 10 years when Safari implements it, it will just stop generating that one thing we had that for years with video tag as well. Yeah, you had to like have a odg and an mp4 and what was the other one? - -32 -00:14:48,570 --> 00:15:47,850 -Scott Tolinski: I mean, did Safari only do a movie? I feel like that might have been the thing because Safari I don't know at some point Safari got an mp4 but there was the whole format wars and on video and And now it's even like continued into like the streaming formats as well. But as long as you're able to get all of the fallbacks and everything in order, then everybody should be able to get something they'll be able to see, which is really what's important here. And another thing that to think about is like, I don't know what the Mac OS support for a Vf is, but I did find this quick look plugin because that's actually one of the things that really bugs me about like web P. And whatever that web m movie format is, you want to do like quick look on your your Mac computer to see the file. Yeah, it like has to open it in the browser or something, it doesn't give you the quick look. And so I did find a quick plug in for a viff I haven't tried it. I'm gonna try it right now where you basically just drop this into your library quick look folder, and then you can do a quick look on Avis files in your browser or in in Finder in Mac OS. - -33 -00:15:47,880 --> 00:16:04,440 -Wes Bos: Yeah, that's one thing I'm gonna have to get is I have this little right click Convert to JPG on my Mac. Because all the time is I airdrop a photo from my Oh, it's not web p it's whatever the apple photo version is. What is the apple photo - -34 -00:16:04,470 --> 00:16:08,280 -Scott Tolinski: format? Oh, gosh, he I see what is that? Whatever one? - -35 -00:16:08,670 --> 00:16:11,370 -Wes Bos: Yeah, hi, Casey. I see ya know what? Okay, let - -36 -00:16:11,370 --> 00:16:13,230 -Scott Tolinski: me let me rant for a second here. Yes, - -37 -00:16:13,230 --> 00:16:14,040 -Wes Bos: let's hear it. - -38 -00:16:14,040 --> 00:16:50,700 -Scott Tolinski: You know what you cannot do on a Mac? on an iPhone. Let's say it takes the photo in the AGI whatever the Ah, crap photo format. I don't know, whatever is the format's fine, but it takes a photo in that. And so when you're on hold, or when you're on a chat support on your phone with an apple customer service rep and they'll be like, Can you take a picture of the issue? Will you take a picture of it and then you go to upload it and bring it in there? There are things like our image uploader only allows JPG or PNG like it's your crazy your format support it. Like if you're not going to support it. Nobody else is. The End rant. - -39 -00:16:50,790 --> 00:17:27,900 -Wes Bos: Yeah, let's have a call to all developers is update your image uploaders to support Oh, yeah, he hike. Because like, like the iPhone is the most popular camera in the world. And the fact that most websites that ask you to upload an image kanak especially like, like, if I have to email a photo to somebody who I know is not even a lick technical, or I know they're on a Windows computer. I like have to be like, Oh, I have to convert all these images from hike to jpg. There's workflows you can do but like you shouldn't be. So it's the most popular camera in the world? Why can't we support that everywhere? - -40 -00:17:28,530 --> 00:17:31,850 -Scott Tolinski: A great cosigned stamp it push it push a lot. - -41 -00:17:31,920 --> 00:18:29,550 -Wes Bos: So this this quick look that you just posted looks super handy. So you can you can preview those values in your Finder. Next, yes does not have support for it yet. But there's a pull request in so the code has been written I'd imagine maybe even by the time you listen to this, that next .js is new image component will support this as well. I think that's it, oh, there's one more a vi f.io. It's just a drag and drop, it'll convert it to convert your JPEGs and web PS and whatnot to a vi F. So if you ever need to manually do that, you certainly can just drag drop it in this looks like a really slick one. These little these online image converters always make me a little bit uneasy. Like the other day, I had to upload that dot XML file, which is an email file, and I had to convert it to PDF. And I found this website that did it. But I was like, there's no way I'm gonna upload contents of this like sensitive email to this random server. Yeah, - -42 -00:18:29,550 --> 00:18:32,330 -Scott Tolinski: you know, they're there. They're copying everything. Yeah. - -43 -00:18:33,930 --> 00:18:49,650 -Wes Bos: But like, I'm sure that that's not to say whoever built this one, I'm sure this one is fine. Oh, wait, no, I'm so silly. Excuse me, it says, literally the first line on this website, no data is sent. The magic happens in your browser. So it's all happening client side Not, not server side. - -44 -00:18:49,680 --> 00:19:17,520 -Scott Tolinski: I think a good rule of thumb for a modern internet user is to just assume that everybody's out to steal your stuff. Yeah. So I don't think that's a anything you got to apologize for. But I cannot I cannot recommend reading this Jake Archibald post highly enough. It is very, very good. It gives you a ton of information. It gives you a ton of examples. And this is the type of thing you're like, this sounds great. I got to learn more. this blog post should be the first place you head to a lot of great stuff there. - -45 -00:19:17,520 --> 00:19:39,000 -Wes Bos: All right, I think that's it. Let us know if you're using a WPF in your own project. I'm curious to flip this on. In my own website. I should like wow, I wonder what the difference would be in load times and whatnot. When I flip it on from web p to a Vf. Yeah, I might have to find a blog post with like lots of photos or something like that. What the differences for cloudinary - -46 -00:19:39,000 --> 00:19:42,800 -Scott Tolinski: said it's in beta. How do we turn it on? Do you know have you checked the doc - -47 -00:19:42,800 --> 00:20:05,910 -Wes Bos: say just put the F underscore a Vf as the format. Okay. And then it says please contact us if you want to use this in production. So I would imagine that pretty soon that they wouldn't roll out the stable version of that but yeah, you could just pop that in your your thing or if you have auto on, I imagine that that would start delivering a gift by default eventually. Yeah. - -48 -00:20:05,970 --> 00:20:14,810 -Scott Tolinski: Cool. Awesome. Well, this is a great one. So I hope you really enjoyed this episode, and we'll be at you on Wednesday with an episode about TypeScript. - -49 -00:20:14,810 --> 00:20:16,530 -Unknown: So check it out base, please. - -50 -00:20:18,480 --> 00:20:28,260 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax33.srt b/transcripts/Syntax33.srt deleted file mode 100644 index c8fcf2ce6..000000000 --- a/transcripts/Syntax33.srt +++ /dev/null @@ -1,448 +0,0 @@ -1 -00:00:01,290 --> 00:00:09,599 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to linsky and - -2 -00:00:09,599 --> 00:00:33,210 -Scott Tolinski: Wes Bos Welcome to syntax. In this episode, we're going to be talking all about media and large files because that's something that you encounter all the time on the web, from video, to images, to downloadable zip files, all sorts of stuff. We're gonna be talking about all things working with media and large files. So as always, with me is Wes Bos. How you doing man? - -3 -00:00:33,750 --> 00:00:59,280 -Wes Bos: doing pretty good. We had a family day this week. I'm laughing because I forgot to hit record on my I forgot to hit record on my end. So we're doing this how you doing thing again, but I'm good. We we just had a family day here in Ontario, which is a holiday they just made up a couple couple years ago. And it overlapped with my birthday. So got a nice long weekend on my birthday. I was pretty stoked about that. Join the club 30. - -4 -00:00:59,280 --> 00:01:00,300 -Scott Tolinski: Nice now - -5 -00:01:00,300 --> 00:01:01,050 -Unknown: welcome. - -6 -00:01:01,050 --> 00:01:02,790 -Scott Tolinski: Welcome to the 30s - -7 -00:01:04,010 --> 00:01:05,700 -Wes Bos: Thank you, Thank you How you doing? - -8 -00:01:05,870 --> 00:01:51,060 -Scott Tolinski: I'm doing pretty good. Just doing a lot of coding, we also had holiday was Presidents Day, yesterday, I spent the whole day working on improving my test coverage for my site. And in turn, I kind of came up with a really, really slick process for doing just graph qL mocking of data, just like really, really one liner code. And it's just really super slick and is made me just very, very excited to just finish this, this little testing update i'm doing i'm like getting really excited about working on my test, which is not something that I typically do. So I'm gonna do a little blog post about how I'm doing these these tests and graph qL, Apollo and my whole sort of stack here and how nice and smooth the whole processes. So - -9 -00:01:51,510 --> 00:02:08,430 -Wes Bos: yeah, that's exciting, pretty psyched. I'm looking forward to that, because I just I just finished up writing all the tests for my my graph qL server that I'm building for my course. And I'm happy with it. But I definitely think that there's a little bit of magic, I could add there. And I'm excited to see how you have architected those tests. Yeah, - -10 -00:02:08,430 --> 00:02:17,580 -Scott Tolinski: yeah, it's using some some tools that Apollo gives you with some little, I don't know, nice, custom little fun stuff. That's pretty sweet. Or - -11 -00:02:17,580 --> 00:02:40,080 -Wes Bos: we'll have a testing show coming up as well. Once Scott, and I sort of put it put together all the content and decide what will go into it because a lot of people have been asking for a testing show. I think there's a lot to talk about. There's a lot of like new services and new things coming to the scene right now. So I think it's a pretty exciting space. I think it's a space that's getting a lot easier than than it used to be even a year or two ago. - -12 -00:02:40,110 --> 00:03:13,800 -Scott Tolinski: Yeah, yeah, definitely. Can't wait for that one. This episode is sponsored by xojo, which is a cross platform rapid web app and app development platform, as well as cloudinary, which is an extremely I don't know relevant sponsor for this episode, because they do asset hosting for both video, and photos. And they do all sorts of on demand and manipulation and really fast file loading the really, really cool service. So we will hear more about those sponsors later on in the episode. - -13 -00:03:13,830 --> 00:03:20,640 -Wes Bos: So today, we're talking all about like images, videos, and downloading big zips. Hashtag big zit, - -14 -00:03:20,670 --> 00:03:23,100 -Scott Tolinski: we both got a lot of big zips download, - -15 -00:03:23,220 --> 00:05:16,050 -Wes Bos: we both, we both have big zips. And we've all we've run into various issues and found out various ways. And I guess part of making your website as fast as possible and making the user experience as as good as possible is paying a little bit of special attention to your videos to your images into your big zips that you have to download. So why don't we kick it off and just start talking about like a CDN. And what that is because everything we'll be talking about today generally involves working with some sort of external server. So a CDN stands for content delivery network. And the idea behind a CDN is that rather than putting your media files and and even your your CSS and your JavaScript files, rather than putting them on the same server that your website is hosted on, it sometimes makes sense to put those on a separate server that is distributed around the world, because what tends to happen is like, sometimes you just assume that everybody's in the States or North America and your website loads fast for you. And it's great. But if someone from say Japan is trying to visit your website, it can be a little bit slow, it can be a little bit sluggish for them to actually load those assets on your website. So a CDN will essentially give you one spot where you can load your images and then it will then go and distribute your images and your videos and your your media assets around the world. And then anytime someone requests like a JPEG of Scott, it will figure out where is the closest Scott JPEG on a server to me and let me let me load that one from the Japan server. of the Asia server or from the Europe server rather than having to go all the way across the ocean? Because I don't know how how the internet works. There's some sort of pipes series oceans. Oh, okay. Okay. And it'll speed it up, right, Scott? Yeah. And that's one of those things - -16 -00:05:16,050 --> 00:06:30,240 -Scott Tolinski: that you might not even think about, like, let's say, you're located in New York, and your server is located in New York, and you're thinking everything is loading up snappy. And that that actual physical distance is not very long, right. But let's say you're in Japan, and you're in Tokyo, that physical distance has just been multiplied by an extreme amount. And you're definitely going to see those latency that latency take place, with the actual physical distance that data needs to travel. So this content delivery is a delivery network, as Wes stated in our last take is like fairy dust, sprinkling your data all over these different servers all over the world, and making it nice and easy for users to access it. I remember when I was first learning about CD ends was when PageSpeed was starting to be like a major thing. And they would give you like grades like A, B, C, D, E, F, and whatever. And if you got a big old F for PageSpeed, your your page speed score would just go way, way, way down for the content delivery network. So that that was the first time that I was sort of had my eyes open to the wonders of a CDN, and just how it can improve your site loading performance and just overall deliverability of your assets. - -17 -00:06:31,290 --> 00:07:53,670 -Wes Bos: Yeah, the The first time I ever ran into it was when I released my sublime textbook, I had a bunch of videos, and I think I had about a gig worth of videos. And I was getting emails from from users in Europe saying like, this is brutally slow, my internet is fine, here's the here's the PageSpeed for my or here's the like, let's be tests for my internet, it's great. But your specific links to these videos are brutally slow. And what I realized is that I had thrown them up on Amazon s3, which is Amazon s3 is a space where you can throw up large media files and pay by the gig for how much people download them. And then based on where the people are in the world, you pay different amounts per gig. And it worked great for me, except that it was extremely slow because I was hosting them somewhere in the States and the European users were being extremely slow for them. So what ended up happening is that Amazon has another product called CloudFlare. Fried, no front, oh, so many clouds, too many clouds, cloud front, in front of your s3, and then it will magic fairy dust them around the world. And then when somebody from Europe then requests it, it's going to connect them to a European server rather than that one is a little bit more expensive. putting that in front of there, but well worth it because you can't can't give your users such a brutal experience in downloading these video files or big zips. - -18 -00:07:53,699 --> 00:08:22,350 -Scott Tolinski: Yeah, yeah. And I also am a user of cloud front. I'm gonna say that I'm gonna get it right. I heard that last time I was at CloudFlare. And it was something Yeah. But yeah, they'll also use that. And there's a lot of other CDN options. We have a few listed here, like cachefly max CDN, you can use, you can use what's called as a CDN. CloudFlare to as well. - -19 -00:08:23,759 --> 00:08:51,170 -Wes Bos: Yeah, that's me. We'll talk a little bit more about them when we talk about some of the different services. But there's the beauty of CloudFlare will sort of just sit in the middle of your application, and you don't really have to worry about distributing them for you, which is pretty neat. Yeah, so CD ends definitely is definitely a must have when you're you're loading up any kind of large media file or even just images files, because that can definitely slow down your website. - -20 -00:08:51,600 --> 00:09:09,650 -Scott Tolinski: And I would act Sorry to interrupt I would actually say you you would you'd need a CDN. On any site period that you're you're looking for have two people to use all over the world, right? If this isn't like a hobby site, this is like a professional site. I feel like you should be using a CDN no matter what. - -21 -00:09:10,650 --> 00:09:46,620 -Wes Bos: Yeah, like when might you not need a CDN? Maybe if it's like a local business, I'll be like, your users or hobby project. Like I did a lot of like WordPress websites, and very rarely unless it was a sort of an international audience, would I would I pick up a CDN. But I think there's not a whole lot of excuse not to use some sort of CDN these days, because I think it's a lot easier to and we'll go through some of these different services and different packages that you can use. And they're sort of just you can just bake them right into your WordPress or to whatever it is that you're using. Yeah. - -22 -00:09:47,640 --> 00:09:48,330 -Scott Tolinski: sick, - -23 -00:09:49,080 --> 00:09:55,710 -Wes Bos: sick pick pic. So what should we talk about first video images or big zips? - -24 -00:09:55,710 --> 00:10:41,910 -Scott Tolinski: Let's start with the the smallest and work our way up. So The smallest images, videos and then some Wiggins' some big gig territory with the big zips. So I think Yeah, we'll start with we'll start with images because images are usually of the range of, from, you know, kilobytes all the way to megabytes. Maybe if you have some giant images, you should, you should probably keep your images pretty small. But, uh, yeah, let's talk about images. And first and foremost, I think is a is the format's because that's like, sort of the initial, you know, starting point of an image is what initial format it is whether or not it's a JPEG, or ping, or PNG is some like, say, - -25 -00:10:41,910 --> 00:10:59,010 -Wes Bos: I say Pac. I say PNG. But then one Funny thing is is totally different. But we watching HGTV, and in Canada would call the H fac. But in the States, they always say it out. They say h VA See? Oh, yeah. What do you say get h fallis? h. - -26 -00:10:59,010 --> 00:11:22,860 -Scott Tolinski: Our they say I've always heard h back. But yeah, that seems like something that could be very possible. Yeah, we have a web P and we have we have the controversial name format. And I don't want to get an anybody's ruffle any feathers here. So the a gift or a GIF, depending on which one you like. But the GI f format? - -27 -00:11:22,860 --> 00:11:24,150 -Wes Bos: The gi Yeah, - -28 -00:11:24,180 --> 00:11:28,860 -Scott Tolinski: yeah, yeah, maybe we should just start calling it a GI F and then just go to de taris. Gi. - -29 -00:11:28,860 --> 00:12:12,840 -Wes Bos: Yeah. That's great. So I think it's really important to talk about different image formats, because like, we talked about making your site as fast as possible and using CD ends. But at the very basic, I think a lot of people don't pay enough attention to making your images small enough. And I myself am guilty of this. But it's really easy to launch a website with two or three Meg's worth of images, when in reality, you could probably get away with like 100 or 200 k worth of images if, if you paid a little bit of attention to format. And we'll talk about this in a second and compression of these. So I don't know, do you want to run through the different formats and say kind of what they are for? - -30 -00:12:13,170 --> 00:12:50,130 -Scott Tolinski: Yeah, so this is my understanding of it. Basically, you're going to be using a JPEG for photos primarily, they're going to be lower in file size. That way, you're going to be using a ping or a PNG file for graphics or something that you need transparency because pings do transparency and JPEGs do not. And then we have web p, which is sort of the modern wonder format, which is developed by Google I believe, and it is just a faster, smaller, better letter, everything format, stronger, all of those things. - -31 -00:12:50,160 --> 00:13:01,800 -Wes Bos: So it does everything you want. It's tiny in size. It has transparency like a PNG it does full color like a JPEG it does animation, like a GIF. It's everything right? And the - -32 -00:13:01,800 --> 00:13:06,030 -Scott Tolinski: only thing missing is compatibility. And that's that's Yeah, the only thing I wonder - -33 -00:13:06,030 --> 00:13:12,090 -Wes Bos: let's look at it let's look it up right now because I'm web p - -34 -00:13:12,510 --> 00:13:22,080 -Scott Tolinski: image format and I use so can I Yeah, looks like the gold right in Firefox big old red and edge big old red and IE. Big old dreaded so far. - -35 -00:13:23,340 --> 00:15:19,860 -Wes Bos: So it's let's maybe we'll flip it. It's currently only available on Chrome, Opera Mini Chrome for Android UC Browser and Samsung internet. So nothing to shake a stick at because Wait, is that the same? It's still significant because like, let's talk about like, if your Facebook Wait, Facebook, I believe currently serves up Web p to Chrome users. So let's say half of their users are on Chrome and they could save 20% on every image that they serve up that's like a major savings in bandwidth for free using Chrome and also in this is a bit great because our sponsor today one of our sponsors is cloudinary is one of the features of cloudinary which I've used for my my CSS Grid course is the ability to just set the format to auto and what it will do is it will first it will compress it to whatever format is is best which is great because I always find this thing I it's like the rule of thumb like pictures are JPEGs and logos are PNG s but then sometimes like if you save a PNG as a JPEG it's like way smaller for whatever reason and the for the there's no lost he can't you can't see any pixelation or anything like that. So you're like, Oh, that's weird. Like why do I Why Am I breaking this rule of this should be a PNG it's like a logo, but it's way smaller as a JPEG. And one of the cool features of cloudinary is you just set it to format auto and it will figure out what the smallest possible version it can store it as And then it will also, if it detects a browser that supports web p, it will serve up a web p for you for the user. Otherwise it will serve up whatever it thinks is the next best format for you, which is pretty, pretty nifty that you the developer doesn't have to care about that. It would you just say, I don't know, do your best. And, Jennifer, yeah, I'm - -36 -00:15:19,860 --> 00:15:51,090 -Scott Tolinski: a huge fan of the punting to the experts like, you are the expert in this you are the service, it's in your best interest as an image host to serve up the smallest file size possible. And cloudinary does a great job with it. So sorry, if this seems like a large ad, but this is just like, how we use it. So it's one of those things that Yeah, I would absolutely trust them to give me the best image format, not only because it's in their best interest, just because there are the image compression experts as well on that. - -37 -00:15:51,120 --> 00:17:15,240 -Wes Bos: Yeah. One other thing we should talk about with compression is often when you are compressing via different methods, we'll talk about what those are in second. There's an option between lossless and lossy. And the difference between those is that lossless will never actually degrade the quality of your image, it will try squeeze out as much of the space that it can by doing I don't know sorting the bits in different ways and using all kinds of different tricks to make the image as small as it can. But it will never throw any extra pixels out the door. And with lossless that's when you start getting pixelation, but at a certain point, there's sort of the sweet spot with lossless where you do throw some of the pixels out the door, which makes the file smaller, but it still is, you can't really tell that it's been pixelated or compressed anymore. So it's kind of that sweet spot where you want to get it as small as possible without affecting the quality at all, or all that much so that it's actually noticeable to your user. Yeah. And then there's the I mean, there's the type of compression, that's simply just removing all the extra data that doesn't pertain to the image whatsoever, which is all of your metadata. Like a lot of people don't know this. But when you take a photo, there's a ton of data attached that photo, whether it's the location, the type of camera, all sorts of stuff about like, this photo, right has a whole bunch, it's called Ada Exif, Exif - -38 -00:17:15,389 --> 00:18:26,670 -Scott Tolinski: EXIF data. Yeah. And one of the things that these compression engines can do is just remove all that because, you know, why do your users need to care about what kind of camera this This photo was taken on? They absolutely don't. And if for the most part, you don't want to serve them that data. So a lot of these image compressions and I would, I wouldn't necessarily say a lot of I would say all of them are going to remove that metadata, if you ask him to, which is usually a default option. And that's definitely something that you're going to want to make sure you get rid of its image compression is one of those things, that's easy, it's easy. If you are have a build tool, it's easy, if you don't have a build tool, it's easy. If you're using a third party service, it is something that you cannot leave out of your process, because it's so easy and so valuable. I mean, shaving a couple of kilobytes off an image, you know, hundred times over is going to really just increase the amount of positive address impression that your website has on people just because of these load times are going to be faster, there's going to be less jank overall, but the whole thing is just going to be better. So there's really no excuse not to compress your images in some sort of way. Mm hmm. - -39 -00:18:26,840 --> 00:19:19,500 -Wes Bos: I think another one thing that I see after teaching couple coding boot camps is awesome people come out of it, and they they don't, it's not often taught about compression and how easy this sort of stuff is. And there's I guess there's like three things that you can do to make the file size smaller, like, the obvious one is resize your image to the size that you actually need it to be. Or even in some cases, resize it to be just a little bit smaller. And then you can stretch it up without any seeing anything. So obviously, the size of it. And then there's the Scott talked about removing all that extra metadata. And then the third one is actually using a compression library on it. So let's talk about that. Like, okay, I'm sitting here, I've got a website with a bunch of images. What do I use to make my images smaller? Yeah. Is there some automated stuff there? Is there some services I can use? - -40 -00:19:19,530 --> 00:20:17,700 -Scott Tolinski: Yeah, so like, one of the cool things, one of the coolest, easiest ways to do this is let's say you have the site and you just have a folder full of images. You don't have a build process set up, you're not using Webpack Gulp grunt any of that stuff on the easiest possible things you can do is download an app called image opt in. We'll link to that in the show notes. Image. optim is just a standard app that you can throw it in your dock and you could essentially click and drag that folder onto the icon of image, opt in and click Go and it's going to shave a ton of data off of your images. And the coolest part is it tells you how much data shaved off of each image so you can see and you can feel really good about that decision. To drop your images into the image optomap and just let it sort of crunch those images a little bit, and there's no degradation and photo quality with image optim. So nice and easy, it's free. Just just something that you you should be doing if you aren't using any sort of other image compression. - -41 -00:20:17,730 --> 00:22:45,690 -Wes Bos: Yeah, image Optimus great, I always have it because as much as a command line, techie as I am, sometimes I just need like one image to be compressed. And I just open the app, drop it in, and it spits it out the other end, nice and compressed, much smaller than I actually need it. So under the hood, what is image optimum actually using and it's likely and there's, there's this thing out there called image min. And the thing about images, that compressing images that was so hard for so long, is that all of these different libraries, you need a different library for every type of image if you're compressing PNGs is a different library than if you're compressing JPEGs. And even when you're compressing JPEGs there's all kinds of different libraries out there that you could possibly use. And even with SVG images, you might think, oh, SVG are the best. They're they're vector. Even inside of that there's all kinds of stuff that can be stripped out of an SVG to make it even, even smaller. So what's really neat is that there's a there's a library out there called image min interfaces with all of these, I think there's like 14 or so image compression libraries out there. And they're always like built in these like lower level languages called light like like C and whatnot. And it's hard to use. So image Minh is a JavaScript interface that you can use to actually interface with all these different ones. And it takes care of the compiling and all that like harder stuff. And you just have to simply and I've used it specifically with Gulp and Webpack. In the past, you just have the types of images and it comes defaulted with a whole bunch of really good ones that so you could you could just use it with the defaults, I specifically like to swap out the JPEG one with a compression library called Moz. jpeg. Because as men, it's amazing. If you're just posting up photos of people on the internet, you run them through mas. jpg, that's exactly what it's for. It's exactly for displaying JPEGs on the on this on the internet. And it just gets them so nice and small. I usually have a gulp test setup where it just watches my image folder. And then anytime there's a new image folder in there, it will just rerun that specific image through it, and then dump it out into like a compressed folder where I just have like a mapped one to one, I always always maintain my like original images, and then was kick out the the smaller ones into like a compressed folder. It's just so so nice. - -42 -00:22:45,720 --> 00:23:13,590 -Scott Tolinski: Yeah, and this is one of those things that you can throw in your build tool. Regardless of what build tool you tool you're using. chances are there's an interface for literally whatever, if you're using just to Webpack, or Gulp or grunt or Yeah, so it's gonna work with whatever build tool you're using. So definitely, definitely something to add in there if you are using a build tool. And if you're not, again, image optim, drag that folder and drop a compress all that good stuff. - -43 -00:23:15,060 --> 00:25:27,780 -Wes Bos: Awesome. So let's take a quick break and talk about our sponsor, which is cloudinary already talked about them. And I talked about this earlier. But cloudinary, I found out because of Scott, and Scott had us in a couple projects before and then I sort of was Scott told me like you can just put the one of the features of cloudinary is you can just put their URL in front of your existing images. And it will sort of suck up the images, compress them, resize them, do anything you want them and then spit them out the other end. And that was great if you have an existing website, which you want to just like, run all of your images through it. But it is a sort of a full featured image and video hosting platform as well as it has a whole bunch of tooling built into it. So what I like to use it for now is I use it for uploading all of my images for a specific website. And then it has resizing built in. So if you don't want to have to manually resize all of your images, or even write a like a gulp script that will manually resize them down free images, you can just hit their API or hit their specific URLs, and it will transform them to that specific size. It has a whole bunch of stuff for watermarking and filters, rotation images, face detection, all kinds of really neat stuff. The thing that it use it for most is, is the two things. It's auto image quality. So it will say I'm going to compress this thing as much as I possibly can without making the final image look like garbage. And then also the auto format where it will figure out if I need a web p or a PNG or whatever, and then serve up the appropriate one to your users. And you, the developer do not need to care about this stuff. So I'm a, I've been a big fan of only been into cloudinary for maybe about a month now. But I used it on my CSS Grid course, when it launched because I got nailed with traffic. And it saved my butt because I didn't have to worry about a CDN, because it does the CDN for you. I didn't need to worry about compression or resizing or any of this stuff. It just took care of it for me. So I know you're a big fan of it, too, right? - -44 -00:25:27,840 --> 00:26:24,720 -Scott Tolinski: Yeah, yeah, I use it for all of my image hosting, I upload images directly to cloudinary from the client, I use it to re host the images I pull in from the YouTube API, because when I pull them in from the YouTube API, they're giving me a YouTube link right for the image. And I basically just tack that that image link on to the cloudinary link. And then instead of having to worry about YouTube's servers, or CD ends, or anything about loading up, those images are having to worry about pulling those images off and saving them to my own file storage. cloudinary does all of that for me just by using that fetch URL, and it keeps it up on their servers, and I forever stored in there with that URL that I don't have to worry about ever again. And I don't have to worry about someone else's servers, all of my images are in one place. And yeah, I also use that auto formatting. I use a nice little we can talk about this in a minute here, but a picture fill to serve up a whole bunch of different sizes for different people that's like, Oh, yeah, - -45 -00:26:24,720 --> 00:26:28,680 -Wes Bos: cuz you can, you can generate a bunch of sizes, when you upload a single image or so - -46 -00:26:28,680 --> 00:27:37,320 -Scott Tolinski: yeah, actually. So I don't know, we can we can bleed out of this advertisement into actual content here. So like, what I what I do is I have like an array of images or image sizes, right? These are my different sizes, and then I just have a map over that array. And then I have that in my picture fill of these different sizes, and then that those sizes, essentially just get tacked on to the cloud Neri URL as what size I want the image to be. So I can just give it an array of saying here, I want this image at 200 pixels. At the device with of 200 pixels, I want this image at 400 pixels at the device with a 400 pixels, whatever just iterates over that array inside of a picture, Phil cloudinary is going to generate all of those images at the different sizes for me. So that way a user on a mobile device is only ever getting a photo that is 200 pixels wide, or 300 pixels wide or whatever. And I didn't have to do any work. I didn't have to generate those photos. All I had to do was pass in a number to a URL in cloudinary made that cached it served it up and made it nice. - -47 -00:27:38,580 --> 00:28:27,510 -Wes Bos: Yeah, that's so awesome. It's one of these things like I hate to be or not, I'm glad to be gushing about it. Because it's like one of these services that I found. I'm like, why have I not been been using it? They also have like a really nice like, free I think what do you get like 10 gigs for free before you even have to start paying for it? Yeah. Which is, which is pretty nifty. The API is really good. I'm using it in my upcoming react course. They're not paying me for this or anything. I just think that it's the easiest way to upload images. And I'm not lying the code to upload an image from a form tag, the JavaScript is nine lines, nothing like it's a weight fetch, you hit this API endpoint, you send the data along in the body. And it comes back with a URL of your resized and compressed image based on a preset preset and your back end, which is pretty neat. Yeah, - -48 -00:28:27,510 --> 00:28:48,540 -Scott Tolinski: it took something that I did not like working in at all, which is image hosting, compression, all that stuff, right? There's too many variables, there's so much stuff to do, I took something that I did not like doing. I especially didn't like my server doing it because it can occasionally be expensive on your server if there's a lot of stuff going on and made it very nice and easy. So love it. Yeah. Big fan. Cool. - -49 -00:28:48,630 --> 00:29:32,670 -Wes Bos: So a couple more after we're done gushing about a couple things, I want to tell you about cloudinary. Specifically, they asked so they obviously have adapters for all for react for view for for node for Python, all of your back end and front end languages. You can use it just right from the client if you feel like doing that as well. And then finally, they also have a conference on April 12 coming up called image con, as a conference all about, I guess images on the internet, which they're hosting. It sounds pretty exciting. And you can use the code syntax 99 to get a discount on that. So thanks so much to cloudinary for sponsoring and happy to have you on. All right, so we did images. Should we should we keep going with talking about video? - -50 -00:29:32,699 --> 00:31:12,660 -Scott Tolinski: Yeah, so we are we're getting into some bigger gigs here. Not yet into the big zip territory, but definitely some bigger gigs and we're gonna talk about images or images video. Because video is something that has become more and more viable every single year on the web. And for a host of different reasons for a long time video was just a huge, tremendous pain to do on the video. You had to always jump immediately into the flash system you had to either use A package like JW Player, one of these big old flash players, or you had to buy one, you have to worry about hosting this specific format that the Flash Player is going to use. And then you had to deal with while building the actual player in Flash, which was always awful. And so for a lot of these reasons, video hosting on the internet really took off when things like YouTube started to get more popular. People wanted to host more more and more video on the web. And video is expensive. There, there is a large file size at plate, there is some complexity at play. And thankfully, html5 came along with the video element saved us all from the flash or JavaScript held that we were in. And it's made working with video so much easier to the point where anybody, like, can just throw up a video, I mean, I have a video as the background of my website, it's like, hey, this video was so inexpensive and so easy that it's in the background, who cares, you know, whatever, video is just become one of those things that on the web is just now everywhere. And so having your file sizes, having your services have everything loading quickly is becoming a much bigger deal. - -51 -00:31:14,370 --> 00:35:15,090 -Wes Bos: Yeah, exactly. So what do I I'll talk a little bit of my own video hosting setup, and I'll talk about some of the different options that you have there in the first one is you cannot just serve up video from a regular server. Because the actual streaming of the video is first you're going to kill the bandwidth that you have available on the server. And second, if you get 100 people trying to stream a video, the CPU that is trying to serve up that large file is just going to spike and your server is going to fall over. So you I would go as far to say you absolutely have to use some sort of external server that is sort of set up and ready to serve up these these larger files out there. So I've talked about mine if you're if you're curious about Scott, and I've set up how we do this, we have a whole podcast called our stacks. And you can go back I get emails all the time people asking about, they usually say love the podcast, what do you use to host your video, and I'm like, you obviously didn't listen to the podcast, because we have a whole podcast on that. But I'll talk a little bit about mine right now, for the longest time, and actually for forever, I've been using Vimeo to host my videos. So when I'm when I have my videos, I export them from my ScreenFlow. And they are in extremely high quality. And then what I do actually, no i i don't i export them at 10 ADP, and I have some settings that I use. They're not they're not extremely high quality, but they're fairly high quality. And then what I do is I'll upload those to Vimeo. And then Vimeo will then make a couple copies of that and they will compress them down to different versions that will make sense for mobile and, and for for 720 and 1080. And then what I was doing is I took the Vimeo pro for like 250 bucks a year, they'll just give you like the raw mp4 file which you can then use in your own player. So for the longest time, I was using my own player that I had built with vimeos mp4 files. And that was pretty good. I was really happy with it because I got a custom player. But the downside to that is I would often get users around the world where the the bandwidth was much slower. And they would say like, like, Is there any way I can degrade the quality so that it would load faster for me? And my answer to that was no, I don't have a way to do that. Which sucks in those users which have to download the zip file and watch them locally. But that's not a great experience because you lose like video tracking which one you watched and whatnot. So I what I and also kind of at the same time just before Christmas on like December 23, I got an email from Vimeo being like, Mr. Boss, you're currently using about 25 terabytes a month in bandwidth. Which there's no way they're making money off of me at 25 terabytes a month for $200 a year or 250 a year. So what they said is you may not use unlimited bandwidth on our unlimited bandwidth plan if you're using your own player. And I said, Okay, fair enough. I've been I've been meaning to figure out a solution for my video as well. So I switched to the Vimeo player. So vimeos own player will embed into your actual player and then they do automatic degrading of quality. If you're on a slow network or all that stuff, and it's great. Their player is good. The only reason I hadn't used their player in the first place when I built my platform was because they didn't have the ability to control the playback speed, which is a huge thing when you're watching tutorials. So they had since implemented that and I was able to to switch Over my react player to using Vimeo as a player for that. So yeah, they are happy, everybody was happy. And I know it's good, I was really happy to actually offer my users the ability to degrade quality, if they're on a slower bandwidth. Yeah, - -52 -00:35:15,090 --> 00:37:33,270 -Scott Tolinski: and I think this highlights something that I like about video services, that just how important it is to lean on companies that have this infrastructure in place, because video, you're serving up a big gigs. And you, you know, like you had with this, this custom player, this custom player wasn't able to serve up the, the sizes that we're going to keep vimeos bandwidth in check, right, or their their usage. So you lean hard on their, their player, and that player is now more capable. And I lean hard, personally, like lean super hard on YouTube, I let their servers do all of the work. So I host all my stuff on YouTube, and even unlisted or private videos, I bring them in through some special stuff, I wrote my API that I can host, you know, private videos on YouTube, and still have them play on my website, and not have to worry about a third party hosts other than YouTube. In addition, I use them for compression, because I edit and record and do everything in 4k 60 frames per second, then I'll throw them up to YouTube. But I don't want my users to download 4k 60 frames per second. Not only that, but I don't want to have to store a whole bunch of different versions of these files, outside of my, my backup servers and stuff like that. So what I do is I, I upload that full quality, 4k, whatever to YouTube, I let them host that version. And then I use the YouTube DL, the library, the command line tool, and I use that to download all of my playlists in whatever format that I want. And the cool thing is, is you can just pass it into YouTube download, you can just pass in the playlist, and then maybe some formatting options or, or file size options. You just say hey, go and it's going to download all that stuff. And and these files are going to be compressed to the the way that YouTube would have you download them or whatever anyways. So again, it's leaning hard on your YouTube servers to handle all of that processing, all of those the video hosting and all that stuff for me. And then I don't have to do it. I don't have to sit and wait for you know, 10 hours. Well, Final Cut in my little laptop tries to render these videos out in eight different formats. So I lean like hard on YouTube. Yeah, - -53 -00:37:34,350 --> 00:38:07,650 -Wes Bos: sure, the amount of time I've spent trying to figure out all the different like bitrate and audio settings in my thing, I'm garbage at figuring out how to best compress video compared to YouTube who does like millions of videos a day. So I'd much rather just give them the highest possible quality version. And then they will come back to me with a compressed version after about 10 minutes or so. And you can then download that. And usually that's the best way to get a really nicely compressed video is just to let the pros do it for you. - -54 -00:38:08,360 --> 00:39:18,600 -Scott Tolinski: Yeah, I This used to be my job. I was a video editor. And part of my job was compressing and exporting video. I mean, I had to do that for specific DVD releases and stuff like they used to be part of my job. And I still don't want to do it like I don't, I would just rather have YouTube take care of it. Especially using those tools make it so so easy. If you aren't into having a company like Vimeo or YouTube host your video that are primarily like public video storage places. There's a lot of other third parties that are primarily built for private video hosting. at Ford, we used bright Cove, bright kovas is one of those ones that handles they give you good metrics, the service does cost a little bit, all of these services are going to cost a little bit of money. And you're definitely paying a premium for that. But they do give you a customized video player. They make it nice and easy to host your videos with Brightcove. And at that point, they sort of act just like it's an image host, or it's a video host right? They handle all the video player, they handle all that stuff. There's also Wistia Wistia, which I was calling Wistia. But apparently it's Wistia Wistia - -55 -00:39:18,899 --> 00:39:38,690 -Wes Bos: Yeah, I was using Wistia initially, actually, but the their bandwidth is is just too much. So it would be like four grand a month for me to host my videos on Wistia which they have some really nice tools but the the bandwidth is just too much for me. Mm hmm. Then there is also sprout video, which is one of the ones we looked at when we were looking at Ford for Ford. - -56 -00:39:39,900 --> 00:39:57,000 -Scott Tolinski: Yeah, it does spark video. Nice little website. Honestly, I don't know too much about it more than that. But it's it's video hosting. They give you a video player customize metrics, analytics, that sort of stuff. So a lot of these are going to be very similar in sort of what they're offering maybe that it's just like micro points. what's different between them? - -57 -00:39:57,920 --> 00:40:17,630 -Wes Bos: Yeah, definitely check them out. And then obviously, our Sponsor de cloudinary also does video as well as they do the transforms for you. So you can upload your video to them, you can use their nice player but the ability to add watermarks and crop the video and compress it and all the stuff that you would do to an image you can also do it to video as well. - -58 -00:40:18,650 --> 00:40:22,080 -Scott Tolinski: Yeah, that's pretty amazing. The Yeah, man transforming. - -59 -00:40:23,400 --> 00:42:18,030 -Wes Bos: It's pretty, pretty nifty to be able to crop and, and watermark. And, oh, I think that you can put a, I guess you put a circle around the video and whatnot. So I'm pretty. I'm gonna check it out for for my own stuff i don't i'm so heavily built into Vimeo at this time that I don't see myself moving anytime soon. Because I have a whole thing with captions, like I can auto upload my captions to Vimeo and whatnot. So I'm pretty happy with that. But it's definitely worth checking out if you're doing any sort of custom video stuff. And then also, what is that on CloudFlare CloudFlare. So maybe we should talk about what CloudFlare is. And then we'll talk about their video product that's coming out CloudFlare is they started out I guess has like the DDoS mitigator, where the way that it works is that you, instead of putting your domain name directly to your server, you put your domain name and point it to CloudFlare. And then CloudFlare will sort of sit in between your domain name and your actual server. And it will intercept all the incoming requests. And then it's able to do all kinds of stuff. So one of them is mitigate DDoS. So if someone's trying to nail your website, it will stop that. Another one is it is a CDN for you. So it will take your CSS, your JavaScript, all of your images, it will try to compress them for you it will put them on CD ends around the world, and then serve them up. So you don't even have to really worry about compressing your images, because CloudFlare will do that for you. What other kinds of stuff does it does it do for you? Obviously, it puts your website around the world for you. It gives you free HTTPS, which is pretty sweet. To be able to do. I don't know cloud CloudFlare is pretty sweet. And even on the the free plan that they have. It gives you quite a bit for free, which is pretty nifty. Yeah, - -60 -00:42:18,149 --> 00:42:41,460 -Scott Tolinski: that was you use CloudFlare. I don't on level up. But that was one of those things than the free plan came out. I was just sort of like, yikes, this saves you a lot of stuff for free. I remember when they've they first hit the scene and everyone was just so like blown away by how cool it was. I don't use it. Because I just have my CDN set up, I guess it would be useful for like the DDoS protection and stuff like that. - -61 -00:42:43,190 --> 00:43:20,820 -Wes Bos: Yeah, it's really good. And then one other thing I use it for, which is totally random that they do this, but they they give you a header on every request that tells you what country the user is coming from. And I use that for my country specific discounts. And I found that that is fairly hard to spoof with a CloudFlare is like a huge piece of the internet. And it's it's very hard to trick them. And I think part of what they also do is they know about people trying to use proxies and whatnot. I'm not saying it's not possible. It's certainly a few people have tried and done it. But it does a pretty good job at weeding out people who are trying to cheat the system. - -62 -00:43:20,960 --> 00:43:21,570 -Scott Tolinski: Nice. - -63 -00:43:22,190 --> 00:44:04,320 -Wes Bos: Yeah, that's and so what they're doing, like the one thing that they don't do is they don't cache any of your large files at files, and they don't cash in your video file. So what they're rolling out now is a new video hosting service. It's currently in beta. I've had some chats with them before the new year before while I was having that trouble with Vimeo. But I since I since I've switched over to the Vimeo custom player and I'm not looking at it anymore. But it's pretty exciting that CloudFlare is coming out with their own their own video hosting product. And from what they were quoting me on pricing, it seemed very good. So I'd be excited to for when that comes out to the general public. Yeah, - -64 -00:44:04,320 --> 00:44:30,990 -Scott Tolinski: I. And like I said, it's an exciting time for video on the web. I mean, I just remember the wonderful feelings I got when I found out I could just use a video tag for the first time in HTML. And then you have to deal with any sort of, I mean, you had to deal with different formats, because at that time mp4 was chrome and then you had Oji v ogV was for Firefox. - -65 -00:44:31,980 --> 00:44:40,560 -Wes Bos: G Yeah, that was a nightmare. You had to like, supply like three formats and then fall back to a flashplayer Yeah, inside of the video tag man, those were the video for - -66 -00:44:40,560 --> 00:45:33,960 -Scott Tolinski: everyone. I remember that. There's a website video for everyone that you could just upload your video and whatever, give you a bunch of different versions and give you the code to make it happen in the flash player and everything like that. Yeah, that video is come so so long, so long, so long. It was actually Okay, so One of the things that you mentioned before is that, you know, you'd want to not host your videos on a server or your own server, I actually think that there is a use case for hosting very, very short videos on your server. Like, for instance, the background of my level of detour, or the background of Scott tolinksi.com is a very short video. And I think it's like kilobytes. I don't know how big it is. But it's a really small video. And that is a short video. It's on loop. And it's that's not hurting anybody, I don't think but I think now that most part if you're getting, like watching video territory, - -67 -00:45:34,920 --> 00:45:59,790 -Wes Bos: oh, one other kind of cool thing I want to talk about while we're on this video thing is web torrent. So we all know what what torrents are, they are the ability to distribute a file across many computers. And then when you want to download a file, let's say, I don't know what what kind of legal video would you download from like, if you wanted to watch it like a open source breakdancing video, - -68 -00:45:59,790 --> 00:46:08,610 -Scott Tolinski: or let's say you wanted to watch a live streaming hockey game, like a hockey game that's live streaming that's legally provided as a stream. - -69 -00:46:09,420 --> 00:47:48,360 -Wes Bos: Yeah, so they would distribute these files across all of the different browsers, or all the different computers, and then you would download a little bit from everybody. And then as part of the downloading, you'd also seed which means that you would also give the video up for download the the pieces that you do have, you can let other people download the pieces from you. And that's the whole idea is that it's just as mesh of computer sharing stuff. And I'm pretty sure that's actually how Spotify works as well. Don't quote me on this. But I did hear that Spotify will use the computer's bandwidth to upload files to people that are nearby, rather than have a central service. So there's this thing called web torrent, which is just basically BitTorrent implemented in JavaScript. And it's pretty neat, because what that then allows you to do is I don't do this, but what I could do is I could use my users who are watching my videos, and also be cedars, and upload the video to other people. And then you have no bandwidth bill, as long as there's always enough people watching it. And you can also you can also supplement it with your own server as well if you'd like. And it just blew my mind that that was possible to watch a video in the browser, by downloading it from other connections that they use. I think they use web RTC to connect to air on different computer, and then simultaneously upload it to other people, which is pretty neat. I'm not stoked about using my users bandwidth, without them knowing. They're like they pay me to watch my video. So I don't really want to use their bandwidth to do that. And I have a pretty good thing going on already. But I was pretty interested to see how WebStorm works. Yeah, - -70 -00:47:48,390 --> 00:48:28,770 -Scott Tolinski: yeah. In fact, one of the cool things, there's an app called soda player, soda player.com. This episode getting a really nice looking website. But it's overall it's like this modern video streamer torrent app, video torrent app, and you just paste in a URL to that torrent or whatever. And it plays that the torrent. But this app is is built on electron. And I believe it uses web torrent. I guess I don't know what else you would use. If it looks like someone on Hacker News is saying it uses web torrent and FFmpeg. Yeah. So there's all - -71 -00:48:28,800 --> 00:48:31,200 -Wes Bos: sorts of features. Oh, lievable. - -72 -00:48:31,230 --> 00:48:36,720 -Scott Tolinski: Yeah, the web here is powering probably the best video torrent app on the market. Amazing. - -73 -00:48:37,620 --> 00:49:46,470 -Wes Bos: Neat. All right, let's take a break and talk about our sponsors. xojo. Before we get into talking about big zips, and we've had xojo on a couple times, and xojo is a cross platform development tool for creating native apps for desktop, mobile web and the Raspberry Pi was xojo, you can really just write a one app, say can write one on a Mac, you click a button and it's going to compile to the completely native version on Windows or on Raspberry Pi or whatever it is that you're looking to compile to. So sojo lets you abstract from the platform specific details you can focus on actually just making your application focus on the application itself and not worry about all the different cross platform bugs that are gonna pop up when you do this thing. So users of xojo include fortune 500, companies, citizen developers, professional developers, it hobbyists, and students, anyone who wants to build apps faster. So listeners of syntax get 20% off with the coupon code syntax, and you can try it out for free at xojo. That's Expo jo.com forward slash syntax. Thanks so much to xojo for sponsor, yeah, - -74 -00:49:46,500 --> 00:50:01,920 -Scott Tolinski: I'm such a huge fan of things that just make difficult tasks like cross platform apps a lot easier, right? Yeah, you know, people spend way too much time on on that sort of stuff and having tools that can really eliminate a lot of times Yeah, big abstracted away from you. - -75 -00:50:02,040 --> 00:50:03,690 -Wes Bos: There's something to be said for that. Yeah. - -76 -00:50:04,230 --> 00:50:50,340 -Scott Tolinski: Yeah, absolutely. All right. It seems like we're getting into big zip territory. We're gonna be diving into some big zips here. Big zip, which we both we both host a lot of big zips considering that we both have video platforms that are selling videos and videos, as we mentioned in the last section of this are big. So yep, let's talk about hosting zip files because I've primarily been using Amazon s3 to hosts all of my videos. And I've done a little tour of backblaze b two as well, which I know you use. So I host on backblaze as well as s3 I got a little bit of here and a little bit of they're doing some trial me so yeah, - -77 -00:50:51,000 --> 00:52:05,610 -Wes Bos: yeah. So I what I had done for the longest time is I zipped up my files and I put them on Amazon s3 and then I put cloud front in front of that, which would distribute them around the world and then you pay for that and my bandwidth bills were extremely high, just because cloud front and s3 are expensive. And also I was doing a poor job at compressing my videos like they were way too big for for what I should have been I didn't even realize this until a couple of people emailed me being like, Hey, you know if you run these through, like, what is the video compressing FFmpeg I use handbrake, which is a UI and then handbrake will handbrake has this thing called a like a fast 10 ADP, and it will it'll do a good job of compressing them. And then so I did that. And that brought my my zips down. They were not so much big zips, they're just medium zips. And then I'm testing out, I still have about half my files on Amazon s3 with CloudFront and have the other half on black backblaze b two. And back black mu, the backblaze v2 is so much cheaper. Like I think it's like four or five times cheaper. Let me look it up real quick. - -78 -00:52:05,640 --> 00:52:18,510 -Scott Tolinski: backblaze. You know, what I didn't like about backblaze is that you want to use their command line uploader to upload a file that was larger than six gigabytes. I had like just one zip. Yeah, - -79 -00:52:18,540 --> 00:52:24,360 -Wes Bos: there's there's a couple gripes I have with it. That's one and I remedied that by using you know the app transmit - -80 -00:52:24,390 --> 00:52:31,170 -Scott Tolinski: Yeah, yeah. Just to fit. Oh, but it was blocking me from Yes, it was it? I don't know. Maybe you're right. Maybe that's what I did as my solution because - -81 -00:52:31,170 --> 00:53:44,010 -Wes Bos: that was it's not FTP. But transmit knows about backlight. Yeah, so it'll interface with with backblaze. So backblaze to store a gig a month is half a cent. So if you've got a one gig zip, that's half a cent a month. And then to download it, it's two cents a gig. And then in comparison, Amazon s3 was five cents a gig plus whatever CloudFront was on top of that. So I know that sometimes when I had users from India downloading my files, I was paying maybe like 1520 cents a gig because it was more expensive in India, and then you also pay to store as well. So I was so impressed at how much my bandwidth went down by both from doing better compression and moving over to backblaze. It was so much cheaper. The one thing that I still don't know, and I've said this on a past episode is that it's backblaze is not a CDN. They just have one data center in the US. However, I have never received a complaint about slow downloads from backblaze. And I've received many from Amazon s3 without cloud. - -82 -00:53:44,700 --> 00:54:13,470 -Scott Tolinski: Yeah, I definitely have to. Yeah, although I haven't I haven't had the necessarily the Well, yes, you're right. I haven't had any negative comments from backblaze. But I have had negative comments from people using s3 just like hey, why the video is so slow downloading like they shouldn't be. But yeah, no, I think that's definitely something I should maybe do a little bit heavier of a trial on I have, you know, a good amount over there. But maybe I should be doing more save myself some. Yeah. Well, - -83 -00:54:13,530 --> 00:54:54,930 -Wes Bos: I had, I had a bunch of users before I did it. I had a bunch of users do some tests on some zips, some big zips that I had on backblaze. And I'm like, hey, you're in it was specifically Germany. I don't know what it is about Germany, but it was I guess I have a lot of customers in Germany but it was always slow in Germany. So I found a bunch of users spread around the world space and a bunch in Germany and all of them said it is fine. So I've been really happy with it. I am going to move the rest of my video files over to backblaze just because of the the savings like I was spending over $1,000 a month on bandwidth bills from Amazon and and my backblaze bills are under $70 a month now. Which is amazing. Nice. Nice. - -84 -00:54:54,930 --> 00:55:25,740 -Scott Tolinski: So for you You said you use handbrake for your video company. Yeah, I use a was an MPEG stream clip. I just wanted to get that out there. It's one of the worst. I'm so sorry if you work on this because I know it's open source it's one of the worst looking apps and websites for one of these type of projects. Again I apologize the the products really nice it but it's really good for all sorts of video format compression and all sorts of stuff like that. Really nice all open sources stuff. - -85 -00:55:26,880 --> 00:55:32,880 -Wes Bos: They have a hit counter on their website. Oh, they do. Whoo. 16 million hits. Wow, impressive. Yeah. - -86 -00:55:33,150 --> 00:56:43,530 -Scott Tolinski: Oh, yeah. That these these accordions drive me nuts, too. They have like a hot hover accordions on like sexually. It drives me nuts. latest update was in 2012. But the thing about this stuff is just rock solid. Yeah, this is like I said, this app is not been touched in forever, and it works perfectly fine. Although you probably won't be able to get some like hot new web and stuff out of it. So we actually, okay, we talked about image formats. But we did talk about video formats, of which there is the ogV. There's the mp4, which is like the one you're probably going to encounter the most. But there's also a movie, which is Apple's refusal to use MPI M Oh, yeah. It's like, come on, man. Like, why just just make this an mp4. Just Just make it an mp4, what's the deal there. And then there's web M, which is just like web P is for images. But for video. And again, it's the Google wonder format that is magically super fast, magically, super awesome. And just missing out on that compatibility layer there. So I guess those are the main formats are going to encounter of video on the web. Yeah, maybe - -87 -00:56:43,530 --> 00:58:16,770 -Wes Bos: we should talk about like, like, Why Why is there all these like formats out there? I think money that's cuz licensing mp4 is not an open standard. Is that right? Yeah, I forget who owns who owns what motion Motion Picture Association owns mp4. And yeah, so if you want to play an mp4 on a device, you need to pay kickbacks to the motion pictures, it was the same with mp3 as well, if you wanted to play mp3 is on like a on an iPod. Apple had to pay the Motion Picture Association, a little bit of money in order to do that. And for the longest time, Firefox dug their heels in and said, No, we're not going to pay this corporation. Because just to play an mp4. So Firefox didn't support mp4 and you had to use like a GV or GG, and then chrome did and there was all this kind of messiness. And I think what ended up happening, this might be wrong, but I think what ended up happening is because windows and and a Mac, the computers themselves ship with the ability to play these formats. I think the how it worked is that Firefox just use the built in codec into the operating system to play the mp4, rather than having to pay kick back and pay the actual mp4. So this might be totally wrong. But I feel like that's what what it was, it was a while ago, there's so - -88 -00:58:16,770 --> 00:58:49,290 -Scott Tolinski: much stuff in there. And it all comes down to different people own different formats, and they want to get paid for the usage of those that licensing or that usage of those formats. And open a totally open video format would be great. I get everybody to agree to it, whatever. And giving all these corporations and Apple and Google and Firefox, Mozilla whatever to work together on an open video. I don't know. Like, yeah, like and sure enough, like whatever the web web em seems like a great solution. But is that just like fully Google owned? I don't know. - -89 -00:58:49,920 --> 00:59:07,380 -Wes Bos: I don't I think webcam. Google made it. And then they opened it up for for everyone to use. But I don't know. I don't realize maybe somebody that knows a little bit more about the the hot drama of all the different browsers can tweet syntax and will retweet, like part - -90 -00:59:07,380 --> 00:59:17,940 -Scott Tolinski: of the frustration with like Safari, like doing video streaming, you know, safaris, like with this apple event where you can only stream this on safari, like, come on. - -91 -00:59:18,030 --> 00:59:21,510 -Wes Bos: Yeah, they have this like mp3 au format. - -92 -00:59:21,540 --> 00:59:34,050 -Scott Tolinski: Why Why use that though? I know I'm three au Yeah, but like, just use something that all the browsers can understand. It's like they're there. I don't know. It's Microsoft. That's a Microsoft move right there. And oh, yeah, Microsoft move. - -93 -00:59:35,280 --> 01:00:24,750 -Wes Bos: Weak I hate all that stuff. So weak, weak weak, or is the soundboard so that's large files. Um, there's obviously other places you can you can host your you can host them up on different CD ends. Some of these different CD ends have the ability to generate temporary URLs. So if you're hosting some sort of private content, then only a specific someone with that URL. can download at once, and then the URL invalidates itself or it expires after a couple, couple couple months or hours or whatever it is that you want. There's lots of different A lot of people ask me like, why not just use Dropbox or Google Drive? And that is because I would blow through that in about an hour. They they only allow you what 300 gigs a day or a month or something like that. - -94 -01:00:24,750 --> 01:00:46,530 -Scott Tolinski: So the bandwidth limits are not made for people hosting stuff for professional running companies, right? They are made for can consumer or like an internal company file storage, where you're sharing files in a company and stuff like that. Yeah, they are not made for having a billion people download your your stuff from there. That's pretty much it. Yeah, - -95 -01:00:46,560 --> 01:00:54,300 -Wes Bos: that's it. So big zips, images, videos. Anything else you want to chat about or get in there? - -96 -01:00:54,750 --> 01:01:12,060 -Scott Tolinski: We did not mention who we mentioned the words SVG, which is hilarious that like we went an entire episode about media and didn't talk about SVG. Sure, but I think SVG kind of maybe falls into its own sort of like graphic interface format, whatever would graphic interface format, is that GIF, - -97 -01:01:15,660 --> 01:01:16,730 -Wes Bos: graphics format, - -98 -01:01:17,250 --> 01:01:34,650 -Scott Tolinski: okay, whatever. So SVG is like its own sort of thing. Where, I don't know, like, you use icons. And ever as SVG, I feel like SVG has enough content, we could do a whole minisode all about SVG. The idea doesn't necessarily fit into the whole image, video and big zip thing. - -99 -01:01:35,430 --> 01:02:13,680 -Wes Bos: Yeah, I will plug Um, so there's a thing called SVG. Oh, and it stands for SVG optimize. And that's what that's one of the tools that comes with images. So if you have an SVG is in there, it's going to strip it out. Specifically, if you're exporting SVG, either from illustrator or sketch, they put a lot of garbage in there, and you can usually get, you can get your SVG is down to even like half or a quarter. So definitely check out SVG. There's this hilarious website from Jake Archibald called SVG OMG. Where you can just do it online, drag and drop, an image upload, and you can turn on and off different image compression. values. - -100 -01:02:13,680 --> 01:02:25,140 -Scott Tolinski: Sick. Yeah, it's huge. Got to be a huge fan of SVG at this day and age. It's cool stuff. Yeah, we should do we should do a mini episode on that. There's a lot of stuff there a lot of fun stuff to talk about. - -101 -01:02:25,859 --> 01:02:27,660 -Wes Bos: counted, and well put it in the list. - -102 -01:02:27,660 --> 01:02:34,980 -Scott Tolinski: Cool. All right. So well, that's pretty much it. Yeah. Do you have any sick pics, - -103 -01:02:34,980 --> 01:04:40,890 -Wes Bos: my sick pick this week is a Chrome extension. I don't think I've picked this one before. But it's called nim. And it's node inspector manager. So one of the pains of doing node is if you try to console log something, it just dumps it into your terminal. And sometimes when you have like nested objects inside, and you try to console log a nested object, it just gives you object object and you don't really know what's in there. And it's, it's very, I don't know, like Flintstones, to go back to that after we're used to the nice dev tools of Google Chrome. So in node, now we have this dash dash inspect flag that you can pass when you run a node process. And that will give you a URL that you can visit. And it then hosts his own version of the Google Chrome Dev Tools. And I believe it's an open standard. So you should be able to use other other browsers, dev tools that are built on the open standard CIC. And you can just use the Chrome dev tools like you're used to using them in the browser. And the most popular thing that I like to use is use the debugger command, you can pause your code execution. And then the console logs actually show up as regular console log. So if it's an object, you can open it up, and you can explore it. And you can use console dot dir and all the other different console methods that you're used to. And it's not just white text on a black background that that is dumping it into. So that's great. The one downside is that every single time you restart your process, it gives you this random URL. So if you're building an app, every single time that you make a change, it restarts your process. And then you have like a new URL you have to visit. So node inspector monitor, what it does is you install this thing that port scans your computer, which I guess, buyer beware. And then it will sort of detect when you're running a new process. And you can set it to just automatically open up a new tab in your browser and and show you the dev tools for this. So it's amazing. I've been using it for about a year now. And it's at a point now where I'm just feeling like this is what I wanted for the longest time. - -104 -01:04:41,460 --> 01:05:56,040 -Scott Tolinski: sick, sick node inspector monitor inspector monitor nice. My sick pick is going to be my new video screen recording software that I've been using for the past couple of months. And as someone who's tried like everything under the sun for video screen recorders, I use QuickTime for Long time, I used a screen flick, I used ScreenFlow. I have now moved on to one that was suggested to me by Joel from a CAD called I show you instant. This app does everything I wanted to do. I don't want an editor because I use my own video editor. I don't want any sort of bells and whistles, I want to hit record. And I wanted to give me a video file. One of the things I hated about a screen flick is that I recorded and all this stuff like that. And what it gives me is a screen flick file and what do I have to do immediately export it? And what does that do? It creates two files on my computer of the same stuff. So I show you instant is really super nice. The options are all great. And what allows me to do is hit record screen record super quickly and it pops out a it's an mp4 or an MTV or whatever but it pops out a video files that I can just draw a bow Yeah, I - -105 -01:05:56,040 --> 01:06:07,260 -Wes Bos: think but that's the beauty of that's the beauty of it. Because what is the Quick Time always gives you mo v files, which is such a pain in the ass because then you send it to somebody on Windows and it doesn't work and yeah, - -106 -01:06:07,770 --> 01:06:09,630 -Scott Tolinski: yeah, and then 24 bucks. That's - -107 -01:06:09,630 --> 01:06:10,620 -Unknown: good. Great. - -108 -01:06:10,650 --> 01:06:41,220 -Scott Tolinski: It's great. Yeah, it's record super slick. It's got all of the bells and whistles for like showing click highlighting or, or on screen or can do your webcam or can record the retina screens as double pixel so I can get a 4k out of my normal computer monitor. So yeah, this app is super nice. And for 24 bucks or whatever. It definitely checks all the boxes. I record, I toss it into my own video editor. And it's all good. This thing is solves every single problem I have ever had with another video screen recorder. So yeah, yeah. - -109 -01:06:43,050 --> 01:06:45,510 -Wes Bos: Wicked auto a shameless plugs. - -110 -01:06:46,260 --> 01:07:22,110 -Scott Tolinski: I'm working on a new series called pro Gatsby. So if you want to subscribe to come a level up Pro, you'll get access to all of that and more the new pro Gatsby series that's coming out in the next couple of weeks as well as the React Native series The level two React Native series The off GS mastering figma I have so many Pro Series right now that are all like, I've been working so hard on these things. So as a as a level up Pro, you get access to like, a whole bunch of exclusive premium series that too many to list right here. Yeah, so level up pro level of choice, comm four slash Pro. - -111 -01:07:22,650 --> 01:08:26,600 -Wes Bos: Awesome, I gotta plug my own stuff. While I realized that there's a lot of people are coming to this podcast and hearing of our stuff for the first time. And they don't necessarily look past the podcast. So if you are hearing this for the first time, or you don't really know what Scott and I do is I create video courses that train you and scale you up in web development. And I've got a couple paid ones and a couple free ones. Paid ones are on iOS six for everyone one on learn node one on react for beginners. Then I've got some free ones CSS Grid, JavaScript 30 Flexbox command line, if you're ever wondering people always asked like how do you get that cool terminal that's command line power users for so go to West boss.com forward slash courses. And you're going to see a list of absolutely everything that I have there. And I've got a whole bunch of rerecording my react right now and then I've got an advanced react and graph qL one coming out in the very near future as well, which I'm super stoked about sick. Sick. Cool. Well, thanks so much for listening in and tuning in. I guess we'll catch you next week. - -112 -01:08:26,640 --> 01:08:38,670 -Scott Tolinski: I'll catch you later. Please head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax34.srt b/transcripts/Syntax34.srt deleted file mode 100644 index d15359acf..000000000 --- a/transcripts/Syntax34.srt +++ /dev/null @@ -1,200 +0,0 @@ -1 -00:00:01,290 --> 00:00:02,790 -Announcer: You're listening to syntax - -2 -00:00:03,030 --> 00:00:04,560 -Unknown: podcast with the tastiest - -3 -00:00:04,560 --> 00:04:36,750 -Wes Bos: web development treats out there. strap yourself in and get ready. Here is Scott solinsky and Wes Bos. Welcome to syntax. In this episode, we're gonna be talking all about static site generators, which is a topic is something that's been around for a little while at this point. But as certainly heating up quite a bit fairly recently, people are starting to really find out all of the benefits. This episode is sponsored by two relevant sponsors, one of which is relevant because that time of year, it is tax time. This episode is sponsored by Freshbooks. And it's also sponsored by a company called Netlify, which does excellent excellent hosting, all around and lots of other services for static site generator generators, amongst other things. So we'll get into both of our sponsors a little bit later, a little bit more in depth with me, as always is West boss, how are you doing today was doing great. It's starting to warm up around here in Canada, which I'm really excited. It's a little unseasonably warm. So I'm super excited about that. All the snow has melted, and I'm able to take off the parka for once in my life. Hey, that's great. Yeah, what about yo How you doing? I'm doing good. I am recording a new microphone and a like an entirely new setup today. This is the first recording I have done with this setup. I haven't done any tutorials, any pie. I mean, I've done tests, but like, I'm slightly worried that it's not going to come out perfectly. You know how things always take some time tweaking. So in addition to that, I'm getting over a cold for like the 100th time this year. So if for some reason this audio is not great. That is that is why but it will be it will be tweaked to hopefully it sounds nice and buttery. Yeah, sounds good to me. And you. You want to want to drop what equipment you got real quick. I'm sure people are interested in that. Yeah, the microphone is an electro voice ar e 20. It's sort of like a classic voiceover mic, a lot of people in NPR use it. It's definitely like a radio sort of style microphone. Definitely pretty good on the low end of things. I think it suits my voice pretty nicely at a couple of choices. I had a really nice mic before, which is the Shure KSM 32, which is like a really nice mic. But for this kind of thing. It was a condenser mic, it was picking up a ton of noise, any sort of thing outside or whatever. Air Conditioning noise or whatever, it was just way too sensitive. So this is going to be a dynamic mic, it's going to be a little bit more directional a little bit better, I think for this. So I picked up a 286 286 s, which is just like a preamp that includes a bunch of other things such as like a compressor, a de Esser and enhancer an expander gate. And this is just sort of to gate out some of the the noise as well as this mic in particular, it needs better preamps to boost it. If you were to go straight from this mic into your into your interface, it would actually be the signal would be pretty quiet. And by the time you boosted it, it might introduce some noise. So pretty much anyone who's used this mic says you need a preamp, you need a better preamp to sort of be at the signal. And what better preamp than the one that Wes Bos uses to get out all of the noise and all that stuff. Yeah, man, I bought this thing. Maybe two years ago, I bought it right after I released my first react for beginners. Yes, sir. Now it's Yeah, it's coming out for the third time this week. So I've had it for maybe two years now. And it's awesome. Because I don't have to spend any time in post messing with my audio. It just comes in clean once you twist the knobs in the right direction. Yeah, I'm looking forward to a little bit more of that because I had to do so much post production of my audio to remove like AC noise or just background noise in general, like picked up my computer fan and all sorts of stuff. I was I was just like really struggling to process that signal in a good way. And hopefully this is a this is an improvement that department. Yeah, yeah, totally. It's expensive equipment. But I think it's worth the it in the long run where you don't spend as much time messing with your audio. Yeah, yeah, absolutely. And when you have when you have Skype calls with people, they're always like, wow, you sound great. Yeah. Yeah, I know. People always do that already. When I bust up like the fancy mic, and they're just like, man, we're using our computer mic. It's so good over there. Yeah, we're using computer mic, and we're in some like hipster office where it's all glass. And yeah, it's so echoey it's the classic right there. - -4 -00:04:36,769 --> 00:05:33,690 -spurtle. So let's talk real quick about the winners to the syntax. two episodes ago, we did a tasty treats, where you post a screenshot of what you're listening to both to Twitter and Instagram. And thanks so much to everyone who entered and did that it was kind of cool because it gives us a better idea of like who's listening. And then it also gives us a second kind of interesting idea of like, when do people listen? Both at what time time of day as well as, like, we did it for two weeks, and people are still posting daily. So it's kind of interesting to see people not necessarily listen to it on the day it comes out. But over the next kind of couple weeks. Yeah, yeah, that was surprising to me to just how many came in every single day, you know, it was very consistent. Yeah. So keep doing it. It's kind of kind of neat to see people hashtag in big zips and hashtags. Um, so our winners are khalad garba. Yeah, that's from - -5 -00:05:33,870 --> 00:05:34,529 -Unknown: Instagram. - -6 -00:05:34,649 --> 00:06:06,180 -Wes Bos: That was for Instagram. So congrats there. And the winner on Twitter was Dallas Thiel, which he posted a kind of a cool photo of listening in his car which I realized that a lot of cars a he looks like he has CarPlay but a lot of cars pull the the information about the podcasts from the ID three tags of an mp3. And I forgot to put those in for a couple episodes. So sometimes it just says unknown and apologies for that. They won't. won't show that anymore. - -7 -00:06:06,240 --> 00:06:14,459 -Unknown: Oh, yeah. Nice. I could even maybe put that up earlier in the workflow and just set it as the defaults in the editor. Oh, it's a nice, - -8 -00:06:14,910 --> 00:10:54,270 -Wes Bos: it's a it's more because our podcast host takes the mp3 and then it will take the details of the podcast and put it in like the the title and everything and then it will put it into the ID three tag for us is a little checkbox. I sometimes forget that. Oh, okay. Word. Okay, cool. So yeah, so today, or is that? Is that it for the? Yeah, for the winners? Congratulations to our winners. By the way. Congrats. Also, I should know, we didn't pick these people based on their their posts. Specifically. We, we did a randomize slash random. Yeah. So if if you felt like your post was really hilarious, chances are it was really hilarious. And we loved it. So sorry about that. If you had a great one, and we didn't, maybe we'll we'll do another one. That's some point for the best post. Yeah, random posts. Yeah, I think that that's an order. Props to the guy who posted in the shower as well. That was great. I think that might have been my favorite one. That's hilarious. So okay, so today, we're talking all about static site generators. And these, this topic has been sort of hot lately, it's been hot for a long time, though, if you've been paying attention to this sort of thing. I don't remember which was the first it static site generator, I feel like it was probably Jekyll. And the way these things work is, well, I guess, let's just, I guess, go into what a static site generator is it, it takes your files and produces a static site, which a static site is one of which is really just HTML, and JavaScript and CSS, or whatever code that lives as files. I mean, you could open this, these files up in your browser without a server to host them on. And they would still work, right? I mean, this is a truly the build process builds out the site, it spits you out your code, and you have that code, just like an old school website, that you could have coded by hand, the only differences is that they are so much more powerful in so many ways than a website that you would have coded by hand back in the day. Yeah, I still remember the old days of using frames, because if you wanted a header, you would have to have header dot html. And if you were to include that in every single file, then obviously, if you want it update your header, you'd have to go through every single file and update it. So a static site generator gets away from all of the sort of downsides to having a static site, which is manually editing thousands of files and brings you all the benefits of having a static site, which is this thing is just HTML, CSS, and JavaScript. And it can literally run anywhere. Yeah, yeah, absolutely. And, I mean, some of those things, it's like being able to use all of the tools, you know, and love without having to necessarily rely on some of these, like heavier platforms, right? Like, you can have a react site, and you can have it be SEO compliant. And essentially, I mean, not, I mean, you would call it server side rendered or whatever, but have that, that that code actually in the DOM without having to have a Express server that's handling this hydration and server side rendering and all that stuff. And I like a much more complex setup. That honestly kind of becomes a huge pain for some really basic sites. And I think there's just a whole class of websites. I mean, I think the amount of websites that could benefit from a static site generator are just much larger than maybe what some people have in their minds is like what you would use this for. Yeah, so why don't we talk about we want to talk about some of the benefits of a static site generator Yeah, let's do that. So, or maybe maybe we should talk about, like our experience with static site generators in the past. So I actually haven't built a static site in, I don't know, maybe about a year and a half. The previous before that I had built a number of different large scale websites, all based on static site generators. And I was it kind of opened my eyes to static site generators are not just these kind of like, personal websites, where you're a developer, and you have your whole website on GitHub, and it's, it's regenerated every single time you make a change. But these are this is actually viable for larger websites, because and even when we'll talk about, like, even if you have e commerce or dynamic data, or any of that stuff, you can still do that with a static site generator. So you and obviously, you're working on some Gatsby tutorials right now, right? - -9 -00:10:54,800 --> 00:12:05,280 -Yeah, yeah, I just, I just wrapped up. I'm like, a couple of videos away from editing, like the last video in this series, which is pro Gatsby. Gatsby is obviously this was not obviously Gatsby is a new static site generator that came on the scene sometime last year. And when it dropped, I think people got really excited about it, because it's react based. You write everything in react, you use the tools you're familiar with, like react router, and uses graph qL as its data layer, and then it takes everything and just spits out a static site. And I found working in Gatsby to be really just awesome. So I yeah, I've been working on the series pro Gatsby that covers all sorts of different ways for working in Gatsby. And that's really my extent of static site generators. I've never used Jekyll or Hugo or any of these other static site generators that have been popular in the past. I never used any of them. And then when I did find out about Gatsby, it was like, wow, this is this is great for a lot of reasons. So that that's pretty much my experience. I have my site in in Gatsby, but I plan on doing a lot more with Gatsby overall, I've built a few client sites in Gatsby. - -10 -00:12:06,780 --> 00:12:14,010 -Unknown: And that's really my extent of my professional work, or at least non like tinkering with these static site generators. - -11 -00:12:14,790 --> 00:17:08,330 -Wes Bos: Yeah. So what are the benefits of going static? First of all, it's, it's super fast. Because at the end of the day, what you are getting when you generate a static site, is you're just getting a folder full of HTML files, it uses your, it uses like the directory structure to do routing. So if you had a file called like Ford slash about Ford slash dog, you would actually have a folder called about and actually have a folder called dog. And inside of that, you'd have an index HTML, just like probably the first days when you started to learn how to code. That's exactly how we did it. And that's amazing. Because you never have to, you don't have to babysit a server, you'd know that these things aren't going to go out of date, or, you know how like, tech sort of seems to rot. And even though if you don't touch anything, it will go down and break at some point. It kind of makes me look back at the old days where you can still go back to some of these websites that were made 20 years ago in HTML, and they will still work. Yeah, yeah, I think that's a like one of those things where there's like, the less things that can break, the less things that will break. And that's definitely there's way less things that can break in a site. That's just some static files, right? You don't have a server component that needs to eat that could potentially break or any of that sort of stuff. So I think that's definitely one of the huge plus sides. Well, one of the biggest things for me is just how insanely fast they are. A lot of these sites, whether it's Gatsby or Jekyll or Hugo, whatever, we'll get into some of the different ones that exist, they are very, very, very fast. They load almost instantly. There's some time there was a point in my my Gatsby tutorial series where I like did a refresh to talk about like the production speed. And like literally half the content on the page due to caching and other things doesn't like doesn't even flash like when you hit the refresh button. It's like the big image reloaded temporarily. But then like everything else didn't even leave the page. The actual loading times on these sites, or the what they can be is absolutely phenomenal. And I think Gatsby is one of those things that's like really, really seen that sort of speed take off and people have just I think it's a wow factor when you when you hit a site on gasping you're just like, wow, this thing loaded in, you know, like I said 100 milliseconds or one millisecond. How about like don't know when it's 100? Yeah, 100 milliseconds 100 fast website. Yeah. Like it's, it's insane. Some of the loading times you get from these things. Yeah, they're also extremely secure as I wouldn't say like they're impenetrable. But if you have no back end that could possibly be hacked or survived. If something bad, then you you take a whole aspect out of the the security question where it is. It's just HTML being served to the website, obviously still could have your server hack, you can have that JavaScript changed for being delivered to users. But there's there's a whole lot less going on there when you don't have to worry about having a back end and databases and securing routes and all that stuff. It's just HTML being served up to the page. Yeah, I mean, let's think about some of the most common ways WordPress sites are hacked, which is people searching for that WP admin link, or people just like trying to find out if it's WordPress, I like I have a server. And if you've ever checked the server logs, you can occasionally see all these errors where people are just hitting What are common exploits in WordPress packages. So you'll just see like a flurry of links before they get banned, where people are just like searching for whatever these common WordPress exploits would be to be able to get into your site. Now, the cool thing is, is because if you're using a static site generator with something like WordPress as your back end, which we'll get into in a little bit, there, they will have no clue. I mean, there's no connection to WordPress at all, there's literally no connection. And so because of that the users that are hitting your site or whatever, they're not going to be able to search for those URLs, they're not even gonna be able to know that the back end was ever done in WordPress at all. I mean, they would have no clue. And that is a huge boost in insecurity. So let's, uh, let's talk about some of the static sites that exist or static site generators that exist. I found the site, static jen.com, which lists out all of these static site generators to use, and I was, I scrolled, and then I scrolled, and I scrolled and scrolled and scrolled and scrolled and scrolled, because there is, I don't know how to express how many different static site generators there is more than you can possibly count on this page. I mean, you could probably run a script to count them. But I don't want to the - -12 -00:17:08,330 --> 00:22:06,900 -static site generators is such a hilarious thing that it seems like every single developer at some point in their life, thinks that they're going to build a static site generator. That is the end to all static site generators. And then before you know it, you've got 40,000 stocks. Yeah. So I guess let's talk about some of the big big dogs. And then if we leave out what your favorite big dog, you can let us know what your favorite big dog is. a hashtag runnin with the big dogs. For those shirts. I love those shirts. So well, I don't even know what you're talking about. Just Google, sometimes Google running with the big dogs. There's these there was like, I feel like at one point, there was like a run in with the big dog store in the mall. These shirts are ridiculous. They were like a cultural trend in the United States in the 90s at some point. So apparently didn't make it up north. Okay, so. So some of these static sites are, we have Jekyll, which is Ruby based, which is really been around for a long time at this point. It has 33,002 stars on GitHub to give you an idea. So Jekyll is very widely used. It has been used for a long time. And I think it was probably the first static site generator that made people pay attention to this, this sort of thing. I could be wrong about that. But in my mind, from what I've seen, that was that was the case. Yeah, the reason behind it is because you can deploy a Jekyll website to GitHub Pages, and GitHub will generate and will do the whole compiling of your static site generator for you. So if you wanted to have a website that was like you can have like custom generation you can still deploy that sucker to GitHub Pages and host it for free which is pretty sweet that's not true for any other static site generator Yeah. And then next we have Hugo which I have not used to go it's go based based on the name of Hugo so I have not even I I've done a little bit of a toying around with with the go language but I haven't done any serious work with it. And I have not used to go at all Do you have any experience with this? Not at all my I do have something funny to say though my my parents dog name is Hugo nice Hugo Boss. Get it? Oh, yeah. But I in terms of the language go No, I've never never used it. Many people say I should. But I've also never used the Hugo either, but it seems like a super popular. Yeah, I mean, from the looks of it. There's there's hundreds of themes. It looks very, very, very capable. They have a big big numbers. They have 23,000 stars on GitHub. So again, this is a very popular static site generator. And it's funny, these two most popular ones are the three most popular ones. According to these GitHub stats, I have not used a and I'm gushing about six site generators over here. So there's, there's a lot here. I mean, there's, there's literally a static site generator for you, if you want to check it out. That's okay. We should also say, you don't necessarily need to know these languages in order to use them. Because they're generally come pre configured, they generally have the ability to add all sorts of plugins for different things that you might want. And it's more about how you use them. then having to actually code anything yourself generally, is you just drop in a whole bunch of markdown or a whole bunch of files, a whole bunch of configuration into these folders, and you run the the build command, and it will spit out a website on the on the other end. Yeah, and they might be good introductions, because it looks like Hugo uses go templates for their, like templating language. So it might be like a good introduction to some of these technologies. If you're interested in learning go, it might be like a maybe like a softer, easier introduction to some of that stuff. Next up, is he Hugo hexo, which seems like it's it's trying to play off the Hugo name, they have a very similar logo, it's just a different color. This is a JavaScript based static site generator that uses ej s or pug for their templates. Again, I have not used this one. But you know, from their website and their from their statistics, it looks very, very capable. They have 20,000 plus stars on GitHub. Have you seen this one? I've seen it. I've never used it. I know that it's it's fairly popular. I'm a big fan of pug. So that would that would totally win me over on that end if I were ever looking at it. But the fact that Gatsby is sort of just come out of nowhere, which in the last like, what how long has Gatsby been around for like just over a year, maybe - -13 -00:22:06,960 --> 00:27:04,980 -I don't even know, if it's been a year I could confirm that I had. Like when it was released, I put out my like, first look at Gatsby tutorial. It was like right when they did their initial beta testing, or initial, like beta release. And I don't remember, I feel like those those videos weren't that long ago, that they have some statistics here. Although it doesn't look like it goes back very far. But yeah, it really hasn't been very long at all. Yeah, it's, it's, I'm so impressed by it. And I also really liked the idea of writing everything in a react component. So if you did need to share a react component between a static site as well as another application that you're using, you can totally do that. Yeah, I guess. So at this point, let's get into let's get into Gatsby then. So Gatsby has 19,000 stars on GitHub, it has not been around for very long. It uses react as its templating language, it's JavaScript based, I believe it uses Webpack. Under the hood, it also uses the tools that you know, like react router, that sort of stuff. And it uses graph qL as its data layer as in, like if you are going to be bringing content in from API's to be generated into this or markdown files or whatever. It uses graph QL. So it uses all this fancy new tech to build really excellent static sites. And let me tell you like the, the speed that they advertise for these sites on Gatsby is just just these things are just blazingly fast, just like it says here. And I say this all as someone who is about to release a course on Gatsby called pro Gatsby later this week at level up tutorials.com. But like, I honestly I would not be be gushing or whatever any of this stuff. If this isn't honestly how I felt I built my site in Gatsby and was like instantly blown away. And all you got to do is go to their showcase and click around on their GitHub page, look at their showcase and just see some of these these sites and look at who's building sites in Gatsby, I mean, a react js.org built in Gatsby. So if it's good enough for React.js dot org, it is good enough for me. That's pretty cool. And I also think like, I think JavaScript apps and static site generators are a bit of a match made in heaven. Because over the past couple years, as we build more complicated applications, what's starting to happen is that everything is actually happening in the browser. Anyways, a lot of your routing is happening in the browser, a lot of your interaction file, uploading can even be done in the browser, all of these things that you used to just need a server for. There. Obviously, we'll talk about some of the use cases where you still do need a server. But I think people are moving over to them now because of the simplicity and because their servers really not doing all that much at the end of the day, right? Yeah, yeah. That that is like the one killer feature of all of these is, it's just incredible. And again, like you mentioned already getting to reuse some of the tools that you know and love. I mean, the React package ecosystem is so huge at this point, you can use any of that stuff in your static site generator and build some really fancy, really fancy stuff. I should also mention that next j s, which I'm a big fan of. So next j. s is the what is it the React server rendered framework from ziet, or site. And they also have an option where you can like when you deploy it, they spin up a tiny little Express server that sort of handles the routing, and the passing the requests to to the actual server, but you can just create a routing config file. And then you can generate all the static HTML and JavaScript that's needed. And you can deploy your, your next shass site as an actual, just static site, which is pretty neat. Nice, nice. As before we move off of this topic of which flavors they come into, I do want to shout out nuxt, which is a new hot one as well, which is a view based view framework based, static site generator. It's got 10,000 stars on GitHub, it's definitely one of the the new the the new big dogs, it uses. Like I said, view j s. So the view crowd, if you're looking for your stack, set static site generator, if you're like, ah, I love the idea of Gatsby but it's react, check out nuxt and you XT .js dot org. This one definitely looks promising. I haven't used it myself can't talk too much about it. And that's it. We actually, we've been talking about doing this episode on Vue JS where since Wes and I both don't use view, we are going to do like a mini app that we were just going to both code and just report back on our findings in another episode. If that's something that you'd be interested in, let us know I we got some pretty good feedback on that already. - -14 -00:27:05,820 --> 00:31:41,400 -Yeah, I think that's gonna be super fun. Because like, I've heard such good things about view. And I've heard such good things about nuxt, which is the reason why it's called knucks is because it's the equivalent of next in view, which is kind of a funny name. I really like that. Yeah, right. But I'm if we do do the view app, I'm definitely going to be using nuxt because I'm I both in react land and and everywhere I'm I'm so sick of build tools and complexity and configuring things. And just the beauty the beauty of using next j S has just been I've just been so in love with it. So I definitely got would like something like that and view world as well. Yeah, I love that stuff, too. Cool. So I think it's a good time to hear from one of our sponsors. Our first sponsor today is Netlify. This is an extremely relevant sponsor for this episode Netlify does hosting for sites. And they're their whole sort of slogan here is right front end code, push it, we handle the rest, and Netlify. When they say they handle the rest, they handle the CDN they handle. They have an easy command line utility, they give you a one click SSL, which we all know the SSL is becoming way, way, way, way, way more important. So that one click SSL sort of takes the headache out of having an SSL who doesn't love that. It's easy to scale. There's extreme caching, there's continuous deployment, there's pre rendering, you can roll back your applications. And on top of that, like it makes working with these static site generators a dream. So let me like tell you the process of getting your Gatsby site up onto Netlify. You push your Gatsby site to your GitHub page, okay? Or not even to your GitHub page, you push it to a GitHub repo, or it could be a Bitbucket or get lab or whatever you log in to Netlify. You log into your GitHub account through Netlify. You select the repo and you hit go. And Netlify understands that your repo is a Gatsby site. And it understands you don't have to set up the build tool or anything it's going to automatically without you having to even tell it, it's a Gatsby site, set up the build, build it and anytime you push to that repo, it's going to build a new site for you. And you could have easily set up your custom domains SSL all that stuff. hosting a static site with all of these features has never been this easy. It is absolutely incredible. I was completely blown away by it. I was using this service in my in my upcoming pro Gatsby course and I had to put a disclaimer in the course that there this This video was not an advertisement because I was talking so like positively about it. I always love when you have to be like no they're not paying me for this. I actually just freaking love it, right? Yeah, yeah, I know exactly. I was just like, I'm sorry, this, this whole video sounds like an advertisement, but I'm really just blown away by this service. So netlify.com forward slash syntax to check out this this service seriously, you're gonna want to go ahead and sign up and just try it just push up a Gatsby site to this thing, and you are going to be blown away again netlify.com forward slash syntax. It's a, you can just go to their site and look at all of the different companies currently using Netlify, I think you'll be blown away. So netlify.com is just superduper. Cool. And it's not just gets but you can post on that was that static site Gen website we were just talking about, they have a little button that shows you all of the different static site generators that allow you to post to Netlify are easily deployed to Netlify. And it's like, it's like, all of the big boys, all of the big dogs. That's so nice. The one thing I'm seeing here is that they have form handling, which they're in beta right now. Yeah, see, because that's like, that's like one of the few things that you might need a server for. And if that's the case, you're like, oh, maybe I'll have to make like a serverless function or something like that. But if it's all nicely built in and form handling is one of those tough ones, because you have to deal with spam and bots and stuff like that. So it's pretty neat that they're rolling that into it looks like even in their their free personal plan. Yeah, yeah. And that's another thing, they give you a ton of stuff in the free plans. So if you're, if you're like a little wallet shy, check out the free plans to try it out, you're going to be blown away, you're probably just want to give them all of your money anyways. Also, I - -15 -00:31:41,400 --> 00:33:51,120 -should, I should mention that they wanted me to let you know that they are hiring. So web devs out there, which is hopefully, most of you listening. Check out netlify.com forward slash careers or just go to netlify.com down on the bottom of their their sitemap down there. There's a careers link, go ahead and click on that they are hiring for all positions. They're hiring remote or local. And if that sounds like something you'd be interested, they are looking for you. wicked, wicked. Looks like I'm just looking at why that's built in. We use go and c++. Like it. Yeah, that's what that's our back end. Totally Wicked, great user experience all around. For the rest of this episode, I'm gonna be talking about how much I love Netlify. And this will not be part of the I promise myself. But yeah, again, netlify.com forward slash syntax. Okay, so we talked about, you know, what static site generators are? We've talked a little bit about why they're dope. We talked about some flavors of these static site generators. Let's talk about some of the common pitfalls, because we just sort of hinted to one of them a second ago. Yeah, it's anything that you might need a server for, is because I guess the downside to a generated website is that at the time of generation, that is your most recent content. So if you wanted to use any sort of dynamic content, maybe you if you wanted to, like schedule a post to show up, then you would have to schedule a region of your website at that specific time. If you wanted to do search, that's that's one, like, you can't have a search page for every single query that someone might search for. You can't generate that you need it to be generated on demand. And there are solutions for all of these pitfalls. And they generally are, surface themselves in external services that sort of handle that piece for you. So in search, what's the, what's that search company that I'm trying to talk about? I'll go, - -16 -00:33:51,120 --> 00:33:53,070 -Unknown: I'll go Yeah, I - -17 -00:33:53,070 --> 00:37:27,360 -Wes Bos: said, Yeah, I have to, like read their neck to be reading their name to be able to sell golia. Yeah. They're awesome. So if you if you don't want to have to handle search, you can use it as a separate thing. Ecommerce is another one, like if you want to be able to charge somebodies website. And it's funny that a lot of the times sponsors may be past or future are the solution to this because like, what, what did we have snip cart, have a sponsor a bunch of episodes a couple of months back, they do all of the they do all of the handling of your e commerce without needing a back end. So sometimes you do need to reach for these things. And generally, the solution to that is you have to subscribe to some sort of service, and they handle the complexity of that in turn for you not having to build your own back end. Yeah, yeah. Another thing I hit, or at least I noticed in the comments for my previous Gatsby tutorial series, the free one was that like people didn't necessarily understand when it wasn't behaving dynamically, right? Like they would maybe add a new post. Like how Gonna add a new markdown post, and this is going to bring this post into my blog. And then they would refresh their page. And there'd be no new blog post. And they'd be like, what's up with that like? And what are these pitfalls is like it's a, it's a static site generator, it generates a site. But to generate that site, it's not necessarily always going to do so on demand, you oftentimes need to generate the site. And at that point, it's going to look through your file system or hit your API or whatever. So the site isn't hitting the API every time you load it, which is a bit different than from how many other apps work, right. A lot of times when you work with an API, it hits the API every single time you load the page, or whatever this hits the API on build. And so it will not touch the API after it is built. So that's just a little thing I know people get hung up on is sort of like, Oh, isn't this updating? Oh, you got to build it. It's just HTML. Yeah, right. Yeah. And then you mentioned the server side functions, contact forms. It's funny, it's like where it's like full circle, right? Remember, like back in the early days of HTML, it's like you wanted a contact form? And like, what did you do? You had to have a like a Perl script or like a PHP thing that, like, all it did was send your emails. Yeah. So I mean, here we are with static sites that have no capability of sending emails, and it's like full circle. So you know, the surfaces like the fact that Netlify is adding in the email thing. That's the email problem, the fact that like a hosting service like this could put in, like email sending a Yeah, that that's a big, big, soft to one of the most annoying problems. I think, just because there's only a couple gotchas that we've gone over, and you generally need search or form. And if they can supply that, I think that's pretty neat. Yeah, when was the last site you built, that didn't have some sort of like contact on my Scotland ski calm, because I didn't want to have to deal with it, I just did put my my email, I just don't want to deal with the form. Just here. Email. Yeah. And then it frustrates me because I always like having a contact form. Because without a contact form, people don't necessarily give you the information that you need. So by having a contact form, it sort of like forces them into supplying the information that you specifically need, like I when I did freelancing, I would ask for, specifically for budgets and what their website was because people forget to offer up all that information. - -18 -00:37:27,510 --> 00:37:40,460 -Unknown: Yeah. Or they're trying to be like, a business about it. They're trying to be like, you know, I don't want to tell you what, like, I don't want to play my cards until you tell me how much it's gonna cost. So yeah, if you make that a requirement, definitely a nice thing there. - -19 -00:37:41,420 --> 00:40:35,310 -Wes Bos: All right, any other any other common pitfalls that you've run into? I guess, I have one that may have started to cut you off. But I do have one in with that. When I was building one, I was using a one called all struct, which is a Ruby based static site generator. And it worked great. Except that the what was it it was the the feedback was very slow in that like, when I was building a website, I wanted like to be instantly refreshing the page. Yeah, and I would save a file and have to sit on my hands for a second or two while it generated it, and then whip and then refresh the page. And that was a credibly frustrating, because, like, I like a nice, quick feedback. And I'm so spoiled now with the hot reloading of my react components that anything less than instant really sucks now. So what is your specifically with Gatsby? What does that look like? Oh, it's fast. They they have they have some hot hot reloading? Yeah, no, there would be times it's so funny, because, you know, I've been primarily working with some pretty big apps. So the compile time is not it's not like super long, but it's definitely not instantaneous, and be able to save a file. And then before I can even tab back have that being updated is like a was like one of the funniest things in this tutorial series. I'd be like, okay, and if we head back to our page, we should say, Oh, it's been updated already. Okay, like, the updating the hot reloading is super fast. Obviously, if there, I think if you make like a new markdown file or something like that, you do have to, like start and stop the, the build process. So there's like, occasionally things. Well, I should take this back. If you are like, let's say you have a query, like you're building out your blog listing page, right? And you add some new markdown files, that blog listing page itself is like that query is going to find all of the new files, but what won't happen is the actual page generation. So if you try to go to any of those pages, you need to rebuild, you need to start and stop the builder. But for the most part, the like the actual hot reloading if you're working in just styling your thing or whatever, it's superduper fast. Yeah, it's it's not so much the extra content. It's the I'm templating out in, in formatting in dealing with interaction hovers and yeah clicks that needs to be quick because it's incredibly frustrating to debug something with a two to three second delay. Yeah, and every change worse. Yeah, that's absolute worst and it makes you like, want to do something else. Like I have such a short attention span. If my thing's not like hot reloading that fast, I'm just like, Yeah, I just think back to before no lib sass came out in I had like a 10 second sass build. process. Yeah. And it was like, color red. - -20 -00:40:35,310 --> 00:40:37,050 -Unknown: Oh, wait for 10 - -21 -00:40:37,050 --> 00:44:10,710 -Wes Bos: seconds, and then it would refresh. And oh, I remember that too. Yeah. For you. For you youngins listening. I know, there's a lot of young uns listening to this, like you don't know how good you have it these days. Is that what is get off my lawn moment? Yeah. Okay, so we talked about pitfalls, we talked about flavors, why they're dope, what they are, let's talk about some of the like, one of the things that goes along with the pitfalls is updating. Because think about it this way, you have a static site, you run a build command, you build the site, you move those files up, like an old school way, you would just drag them and drop them via FTP or something like that. And you make some changes, you add a blog post, what doesn't happen is site doesn't immediately update. I mean, let's think about this. One of the ways that it's commonly used to, to add a blog post in the static site generators is something through like headless WordPress, where you are only using WordPress as back end, the static site generator, WordPress is API and building the site. Now in a WordPress site, you'd be used to adding that post, going back to your app, your website and having that post, just be there. But since the the site itself isn't hitting the database, the site needs to rebuild. And therefore, you need to tell the site to go rebuild or re fetch that data. And this is just true with like any sort of back end you're using. I mean, typically, you're bringing in data from an API of some kind, right? Maybe it's an API that's querying your markdown files and your file system. Maybe it's a headless WordPress, maybe it's a headless Drupal, there's something called Netlify. CMS, which is pretty sick, little modern style CMS here, this Netlify CMS is actually basically just a system that sits on top of your markdown files. So when you add new posts, edit new post, or whatever, it's just editing markdown files, rather than hitting a database or whatever. But that is a big problem is, is hey, you've made these changes. How do you get this site to update? Yeah, I think this is, I think, I think that's worth it. And because like the the big website that I was doing was a static site generator, it was based on Drupal, because I often think I people think static site generators are just for developers who are so hardcore. And they, they write their blog posts in markdown and put all their images, they have a script that resizes the images and stuff. And at the end of the day, that's not actually how real world users run their websites, real world, users want a back end where they can log in and upload their stuff. And they can it can modify all their pages. And that's great. Like, you still need a WordPress or Drupal or some sort of CMS interface to manage your content. But it's really important to know that these static site generators can just ping your API and grab that content. And then it's just, they just don't know thread it into the HTML, and then you're, you're in good shape. You don't have to, you don't have to fetch that blog post from the database every single time. It's unnecessary. You just have to, you have to fetch it once at the time of posting. Yeah, yeah. So some of his big solutions to this is one of the again, I'm sorry for coming across like a shill here or something. But like the Netlify service, one of the things that does is like it looks for updates on your GitHub now. So if you're using like the Netlify CMS, which updates your markdown files when you make a save, and like actually pushes to the repo that triggers a rebuild and rebuilds your files. - -22 -00:44:12,000 --> 00:45:53,610 -So like that solution, right there is pretty slick. But it is definitely a little bit more developer focused like to log into it, you do login with a GitHub account. Now like headless WordPress, or content fall, which I haven't even mentioned, content file content feels like an API as a service. Basically, it's WordPress is back end but you create an account and they're not expecting you to have a front end like like content full doesn't take care of the front end, it just takes care of the back end and it takes care of those those tools really nicely, right. So with something like content fall, you would actually just a Content folder in Netlify. They work together really well because like when you have like a Netlify hook that is just waiting for a POST request to come in. And then in content for You just say, hey, anytime I make a new post, send a POST request to this address. And then what happens is you write your content, your blog post your your user still get the interface, like a WordPress kind of thing. And that hits that post tells is a Gatsby site or the whatever site to rebuild, it then fetches your new stuff and rebuilds and sort of essentially solves two problems, right? That you could have with this stuff. And that's going to work with content folder WordPress, or any that sort of stuff. You're just sending a post hook to tell it to rebuild. But the long end of the story is like, if you are updating your content, you need to tell the site to rebuild somehow. Makes sense? And I think in a lot of cases, that's totally worth it, where it doesn't need to be instant. It could be I don't know, however long it takes to rebuild and redeploy the website. - -23 -00:45:53,820 --> 00:46:01,350 -Unknown: Yeah, what certainly won't be instant at that point. So do you want to talk about our next sponsor, it is tax time. - -24 -00:46:01,980 --> 00:48:30,180 -Wes Bos: It is and I actually this sponsor spot is going to be a personal story from the book of Wes Bos. So the sponsor is Freshbooks. And, as you likely know, Freshbooks is cloud accounting software that if you're running any sort of small business, you're a freelancer or a small business, then you can use it to keep track of your invoices, keep track of all of your expenses, keep track of all the different types of money come in, I just did my taxes. I had billed people in four different currencies over the year. And it's it's really fantastic. And one problem that I had was in Freshbooks, you can have multiple types of taxes. So depending on like where you're at in if you have different types of taxes in Ontario, we only have one tax is called HST. And I had my assistant put in all my expenses in as HST and she typed in HST, however, I had put in a whole bunch of expenses as well. And I typed it in as capital HST. And I was sitting there and it ran my my tax report, and my account was waiting for it. And it spit out this report as to different types of HST, lowercase HST, and high and uppercase HST. And I was like, Oh, darn. And there's no way I could go back and edit like 300 expenses for uppercase HST. So I called Freshbooks. Up, picks up on the first ring, I tell them what's happening. And they say, Oh, yeah, no problem. And no problem. No problem, we'll run what's called the script. And I was like, I'm a developer, I know what scripts are. And we hung up the phone, and I went and got a coffee. And I think within about 1015 minutes, they had run a script on their end and updated it. And that was my own error from from not inputting it the same way. But they fix it for me, really quickly, their customer service is fantastic. Which is pretty neat to be able to just call them and, and I'm pretty sure, I don't know if this is still true or not. But I have a bunch of friends that work at Freshbooks. And I think when you're every everybody has to take a little bit of time every year to actually work support. So sometimes you get developers that pick up the phone for support. I've called him a bunch of times, just done a little little questions I've had about reports and whatnot. So their support is amazing. You should definitely check it out@freshbooks.com for slash syntax use syntax in the How did you hear about a section? - -25 -00:48:30,420 --> 00:48:39,030 -Unknown: Yeah, I've always heard such good things about their support. I haven't I haven't had a personal experience with them myself. But I've always just heard and mostly good things about it. - -26 -00:48:39,090 --> 00:50:20,370 -Wes Bos: It's because they're Canadian. Yeah. Hey, actually, we should talk about this sometime. But you should know that I'm actually I don't know if I'm half Canadian but I'm what yeah, I am of Canadian origin my my grandparents. Originally my grandparents parents didn't immigrate into the United States they came from Poland to Canada and then they both were married and stuff in Canada my there my both have like what is their maiden name Marsh and I mean, that's very French Canadian. Oh, yeah. Oh, yeah, I've Canadian roots here West. We're not we're not that one. Wow, that's a big shocker. God is Canadian. Only half only quarter whatever I don't know. Well, you should get that citizenship you can come down here and get a get all that medication. We just passed this thing in Canada or Ontario. Where now if you're under 25 all of your like our health care was free like you see the doctor Yeah, now all the drugs are free under 25 years old, which is unreal. I just got a letter in the mail that my health insurance went down. Because of this change. You no longer have to pay for health insurance for our kids, which is so good. This is not fair. This is not fair. I'm furious. I couldn't I was like, This is amazing. Like I literally walked into This the pharmacy the other day, and I gave them a prescription. I showed them my health card and they gave it to me. There was no cost. He just swallow up Colorado. Poof Colorado, Canada. Yep. I will trade you for cabac - -27 -00:50:24,270 --> 00:50:32,760 -Unknown: hilarious. I don't know if you know the hockey connection between Colorado and Quebec is that the Quebec Nordiques? The Nordiques? Yeah they yeah Buster Denver. - -28 -00:50:33,120 --> 00:51:29,100 -Wes Bos: That was my team when I was a kid when I like pretended to like sports. Yeah, the avalanche and I had a Joe Sakic jersey. Oh, nice. Okay, so yeah, let's, uh, let's head back to last thing we want to get to, which is hosting. Now I know. I mean, if you guys are a fan of different static site generators, we probably missed out on a whole lot of stuff. We always miss out on so much stuff, because it's like, there's so much to talk about. And there's, there's so little time Yeah, we don't know most thing. So in this lesson we want to hit on is hosting and the answer, like the question is, where can you host a static sites? And the answer is anywhere, you can host them anywhere, your files, you can drag them, you can buy the cheapest GoDaddy host or Bluehost, shared host or whatever, and just throw them on there. If you have a simple site, or whatever, it is easy to host them anywhere, including, like GitHub Pages, right? I mean, you could just push things up to GitHub Pages. - -29 -00:51:30,540 --> 00:51:36,390 -Unknown: I mean, Gatsby has a build command that builds directly to GitHub Pages, and you don't even have to think about it. - -30 -00:51:37,650 --> 00:54:14,010 -Wes Bos: So that's just some of the hosting, you can also host on one of our sponsors, which is Netlify, which we mentioned just how easy and nice it is to host there with all those. Like if you need features, right? Like, you're not going to get that stuff from a GoDaddy host, you're not going to get the CDN and the the email forum and all that sort of stuff. So yeah, I mean, the answer is you can host these anywhere. But there are certain like upsides to hosting at a place like Netlify, or something like that, not to mention the free tier is is pretty sick. So I mean, what's your experience with a hosting these sort of things? I have hosted them on pretty much any of these options I've hosted on GitHub Pages I've hosted on Netlify have hosted Yeah, you know, a basic basic Digital Ocean server that I'm using for something else. What about you? Yeah, I think the, what you need to think about here is like I've done, definitely my own server. And the downside to that is the sites get into the hundreds and hundreds of files. And if you're just thinking about FTP in these things up, as you know, if you've ever tried to FTP up an entire WordPress install, it takes forever. And the reason is not because WordPress is huge. It's because WordPress has many files. And if you're uploading many, many files, it has to connect to your server and do the whole handshake between the server for every file, that's why it's slower to upload 1000 files that are the much smaller than maybe like a one gig big zip, because that's just a single file, right? So that's a little bit slow, you then you have to have your own sort of build process. So whether you you have a build processes, and you use something like our sync, which would just sync the the changed files as well. So I've used my own my own Bluehost as well. What else have we used? Basically, just like your own, for that large project, we host our own custom server. What was frustrating about that is it took 20 minutes to deploy. So as soon as the GitHub issue was merged, then we'd have to sort of sit on our hands and, and wait for that to be deployed in a couple times. We had some, like, major changes that needed to happen like hot fixes. And 20 minutes is a long time when, like, what one time this is stupid of me. But I left the debugger command in my JavaScript, which is not a big deal. But if you have Dev Tools open and you run JavaScript, it paused the entire website for for everyone. And it was a developer focused website, too. So the chances of having a developer having their Dev Tools open was - -31 -00:54:14,069 --> 00:54:32,970 -Unknown: Yeah, it was Yeah, right. Exactly. Yeah, that's your audience right there. I know. I know. I I've done I've done like I said, I've pushed up to FTP and whatever. And again, this Netlify thing when I when I did it, I was just sort of like, this is the promised land right here. This is this is what I like this. Is that that stuff I like? - -32 -00:54:34,860 --> 00:54:45,330 -Wes Bos: Yeah, you can also believe us now Zeitz site away, is it it's probably site, I would guess. But oh, man, I say everything wrong. Yeah. Okay, I - -33 -00:54:45,330 --> 00:54:45,930 -Unknown: don't know. - -34 -00:54:47,730 --> 00:56:07,230 -Wes Bos: So sites now does static as well. It's pretty nifty. So there's tons options out there. You can explore them in what most of these don't come with is the the CDN. We talked about last week and Netflix Netlify does come with that, which Yeah, yeah. So that's pretty much it. The hosting options are for static site generators just like pretty, pretty wide. I mean, we had our whole episode on hosting. It's like, where do you always didn't? How do you host them, you set up your server and all this stuff like this. And with these things are just like, Who cares? You know, put them up somewhere. It's easy. I'm actually a, I'm currently going to be moving my my Scott solinsky.com. I'm going to be moving that to Netlify today, because I'm going to take advantage of all that extra stuff. It's not getting any, it's not getting any of that caching. It's like a CDN. So I'm gonna do that. I'm really curious about what I'm going to use because my own Wes Bos calm needs to be rewritten. And just like he designed, and I, I'm going to stay on WordPress, because I've got years and years of content in there, and I'm really happy with it. I just want to build something cool. In the front end, I'm very, I'm very tempted to use the WP graph qL and build it in Gatsby, - -35 -00:56:07,770 --> 00:56:20,340 -Unknown: I think you should, should take a long, hard look at Gatsby as someone who just did an exhaustive tutorial series on it. I am so interested in doing more and more Gatsby stuff. - -36 -00:56:21,720 --> 00:57:13,290 -Wes Bos: You know, it's one site that could be in Gatsby is syntax.fm. Because Let me explain how syntax works is we have a tiny little server that runs. And it serves up our syntax react site, which is built on next Jess. And then we have a little server that will when you ping it for a specific episode, it will serve up the HTML, which at at start of the app, it converts all of our markdown to to HTML. So that doesn't need to be on demand. It doesn't need to be an HTTP request every single time that you want to view a different episode. Because it's it only needs to be generated once a week. That's how often we release a podcast. So we could just generate that as part of our build processes. Yeah. - -37 -00:57:13,290 --> 00:57:16,560 -Unknown: They're good opportunity. - -38 -00:57:17,010 --> 00:57:20,970 -Wes Bos: But well, will it happen? Maybe not? Because I've got right - -39 -00:57:22,140 --> 00:57:25,830 -Unknown: now there's, there's so much so much to do. So yeah, - -40 -00:57:25,830 --> 00:57:26,400 -I think - -41 -00:57:26,400 --> 00:57:57,420 -Wes Bos: that about wraps it up with static sites. Again, we probably left off something that you are upset about. So if we left off anything, go ahead and ping us at syntax FM on Twitter. We want to hear your thoughts on static site generators, which ones you like which ones you don't like why you like them, all that sort of stuff. Want to hear what you're thinking about static site generators? Again, it's not necessarily a new topic, but it's definitely a hot topic. So I guess it's time for sick picks. Yeah, getting sick picks. Wes, I totally had one. - -42 -00:57:57,450 --> 00:57:58,320 -Unknown: Yeah, well do it well, what's - -43 -00:57:58,320 --> 00:59:45,060 -Wes Bos: your monitoring his sick pick my sick pick is the is going to be a VS code package, or extension, I guess you call them. This is the J s refactor extension for vs. code. And as someone who has been writing a lot of async await code, along with some other stuff, this package makes it super simple to wrap your code. Like you just type your single wave function and you finish it. And then you're saying, Oh, yeah, I gotta have a try and catch. I gotta always have a try and catch. So you just highlight your stuff. Do a command, select to try and catch from the menu. And then it wraps your code in a try catch, hey, you didn't even have to type it. Oh, I say that as like, hey, it's the try catch thing. But it's not just that there's a whole bunch of different things you can do with this package. Let me just pull it up here. refactor j s refactor. Okay. This package can handle in addition to wrapping your code and try catch it's essentially just like wraps your stuff, right. It can wrap your code in an arrow function and that sync function condition generator and iffy. You say if he or if he I say iffy, okay. It does things like converting your functions to arrow functions, converting to template literals. It is really cool. I've been awesome. It's slick. Yeah, I can't believe I couldn't find this. I just started Googling around because I was like, I'm so sick of writing try catch. So I just looked for that functionality. Specifically, I stumbled upon this and I've been I've been pretty, pretty pumped about it. Wow, this is wicked. Wicked. I'm gonna check it out too. Because it is the ability to convert to an arrow function. What about converting back? - -44 -00:59:45,060 --> 00:59:50,370 -Unknown: Does it have that? No, no convert back. It should only convert what way? - -45 -00:59:51,600 --> 01:00:41,670 -Wes Bos: Once you've arrowed you cannot go back. Yep. Cool. Check that out. My sick pick is also going to be a VS code extension on it. Cuz we did a whole episode on VS code, but people ask me all the time, like, what are the extensions that you use, and I'm always going in and out of them, trying different ones and disabling them, enabling them. One of the one of the ones that I use all the time is just auto rename tag is very simple. If you have an opening tag, that's a div and you want to convert it to a paragraph, or even a custom component, if you're working in react, and you have like a store picker component, and you want to rename that to stores picker, you just have to rename one of the tags, and it will update the corresponding closing tag. Which is amazing, because you don't have to do that like double cursor select, you just rename one of them, and the other corresponding tag will will update itself, which I love. - -46 -01:00:41,760 --> 01:00:58,320 -Unknown: Yeah, I love that stuff. Modern tooling is just so excellent. So excellent. For free, for free as well. Yeah. So yeah, I guess. So we got some sick pics in here. Wes is currently taking a photo for Instagram of this recording session. - -47 -01:01:00,120 --> 01:03:56,850 -Wes Bos: I think I want to get into some shameless plug since I got something to shameless plug. And I'm really excited about it. I've been making tutorial courses for a long time. This is easily one of my favorite tutorial courses. And I think it's like very evident in the editing process, just how much I liked recording this series. Because as I'm editing, I'm just like trying to find the mistakes. I was just like I was on I was on a level when I was recording this thing where I was just like, I was so excited about it that I just was it was just coming out of my mouth and recording so well. So this is the pro Gatsby series, which I'm releasing this week, it will be out by the time that this audio recording is released. So level up tutorials.com forward slash store to check it out. Basically, I cover everything you need to know about getting up and running with Gatsby. And we cover all the stuff from deploying hosting everything that we talked about on this show. We we set up an API in several different ways we we import from markdown files, we import from Netlify CMS, we import from contentful. We set up this auto build process we host on GitHub Pages we host on Netlify. We do all sorts of cool stuff. And not only you're going to learn how to build these excellent static sites, like we talked about in this episode, but you're going to learn the insides of some things like the node API for Gatsby or the data layer, how it understands and reads graph QL. And we even have a little fun, I introduced the web animations API and make it a little bit of page transition going in there. So pro Gatsby is going to be out by the time you hear this. So level up tutorials, comm forward slash store or you can become a pro and subscribe and get access to fancy series like this every single month. Okay, good. I'm going to plug Which one should I plug today, close your eyes. And I'm going to plug my ESX for everyone course, just because ESX is what like maybe two years been out for now. And there's still a lot of people taking the course. But as you know, JavaScript continues to go and it continues to evolve. So I had maybe a couple months ago, I updated the ESX for everyone. And now it's a six, seven and eight for everybody. And included a whole bunch of stuff on a cinco wait. And Babel seven, a whole bunch of new stuff that has come to the language since it's been recorded. And the beauty of the six courses that the stuff that's already there doesn't go out of date, because it is the language. So whether it's promises or working with classes, or getting a hold on prototypal inheritance, people, somebody was mentioning how they really enjoyed that specific video. In the past. And this is more we don't really build an entire application. This is more like trying to update your core fundamentals of JavaScript. So check that out at es six.io. sick, - -48 -01:03:57,089 --> 01:03:59,010 -Unknown: sick. Yeah, - -49 -01:03:59,010 --> 01:04:16,440 -Wes Bos: make sure you do that. So I yeah, again, we want to thank our sponsors Freshbooks to Netlify for sponsoring this episode. Again, check out static site generators, check out any of them. They're all cool. Love them. But yeah, that's it. Until next time. Yeah, peace, peace. - -50 -01:04:20,670 --> 01:04:29,700 -Unknown: Head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax35.srt b/transcripts/Syntax35.srt deleted file mode 100644 index bc355b589..000000000 --- a/transcripts/Syntax35.srt +++ /dev/null @@ -1,424 +0,0 @@ -1 -00:00:01,290 --> 00:00:10,439 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to Lynskey and Wes Bos, - -2 -00:00:10,470 --> 00:01:19,230 -Wes Bos: welcome to syntax. Thanks, sir. I'm try that again. That was dumb. Keep that in maybe. Welcome to syntax. Thanks so much for tuning in to another episode. Today, we're gonna be talking all about this topic that I'm actually wanting to talk about a long time. And because I get a lot of emails about this, and it's not something we talk about in public all that much. But it's sort of the sense of impending doom or the the sense of being overwhelmed with how fast our industry is changing. And it's such an interesting industry to be in, because you can get a really good job in it. But it also it just moves so quickly, that I think a lot of people are sort of feeling like, they just can't catch their breath with what the tech is. And it's sort of scary when when your job and your income depends on this sort of moving target. So we're going to talk about, like, how do you keep up and how do you deal with this fast pace industry that we have. So today, we're sponsored by two awesome companies Freshbooks and Netlify. Freshbooks does cloud accounting and Netlify does some fantastic hosting for your website. We'll talk a little bit more about them partway through the show. With me as always is Scott till insky. How you doing today, Scott? - -3 -00:01:19,230 --> 00:01:40,110 -Scott Tolinski: Hey, I'm doing super good, as usual to some Sunny Sunny weather here in Denver. We did a couple of Park walks with the no coats on Oh, living it up in the 60s and 70s and it's been pretty nice. I'm not attempting to brag here but it's just been really like as someone who spends a lot of time cooped up in the house It has been really nice to get out - -4 -00:01:40,319 --> 00:01:49,799 -Wes Bos: Yeah, we just had a really like nice warm spray some of our patios were opening up you can have a beer on the patio and then we got nailed with another snowstorm so - -5 -00:01:50,459 --> 00:01:58,500 -Scott Tolinski: parka Oh, I so over the last break between the steps and less I turned 22 or not 22 Wow, - -6 -00:01:58,529 --> 00:02:00,030 -Wes Bos: congratulations. I turned 32 - -7 -00:02:00,030 --> 00:02:09,150 -Scott Tolinski: vana that yeah, that I think that was just some like, I don't know, that's not necessarily a Freudian slip but there was this little slip there. I wish I was turning 22 - -8 -00:02:11,009 --> 00:02:12,470 -Wes Bos: Well, happy birthday congrats - -9 -00:02:12,470 --> 00:02:14,060 -Unknown: on that a thank you. - -10 -00:02:14,720 --> 00:02:16,380 -Wes Bos: Jay anything special for your birthday. - -11 -00:02:16,880 --> 00:02:37,280 -Scott Tolinski: I just head out to the mountains did some some solo shredding did some a little little snowboarding I hit that I actually like hit the train Park like the whole day. So it's not usually not like I usually spend like half the day in the train park or whatever. At this time. I was spending the whole day hitting rails and the halfpipe and the jumps and feeling really good. Just having a good time. - -12 -00:02:37,439 --> 00:02:52,170 -Wes Bos: Now sick though the ones the one game I did play when I was a kid. I didn't play a lot of video games. I kind of wasn't super into it. But the one I did play a lot was Shawn Palmer's pro snowboarder, which was essentially just Tony Hawk but with a snowboard underneath it. It was great. - -13 -00:02:52,170 --> 00:02:59,160 -Scott Tolinski: There was like a while there were like they could just throw any pro and then pro this extreme sport and - -14 -00:02:59,219 --> 00:03:02,010 -Wes Bos: yeah, what else did I have? I like Matt Hoffman. - -15 -00:03:02,789 --> 00:03:07,800 -Scott Tolinski: Max there was surfing one Kelly Slater. Yeah, there's a whole bunch of I have like all of those because I love those game, man. - -16 -00:03:07,889 --> 00:03:41,730 -Wes Bos: That's fine. I should go back and play those. Those are really fun for real. I rereleased my react for beginners course last week. So first time it feels into this episode is first time you're hearing it. Super excited about that. So it's the third time since I released it in late 2015. So it's the third time I've totally re recorded it from scratch. And it's up to date with the latest, latest and greatest and everything that there is in react. So pretty excited to get that out the door. And now I'm focusing back on my advanced react course which is it's still a month or two out but I'm moving moving some ground on it. - -17 -00:03:42,090 --> 00:03:43,440 -Scott Tolinski: Nice. Glad to hear - -18 -00:03:44,100 --> 00:05:44,279 -Wes Bos: Yeah, so let's get into it. Let's talk about let me just like start off I'll just read this email that I received I'm not gonna mention any specifics from the the person that sent it cuz I don't want to out anyone but I thought it was just like a really good summary of what a lot of people and myself included a lot of times that are sort of feeling so hey, Wes, being a follower for a long time. I applaud you for taking the leap from agency work to bettering the community. So a couple years ago, maybe about a year and a half ago, I I took the leap from being a sort of freelance developer, working with agencies and startups, to moving to building courses and doing podcasts and stuff like this, right. So he said straight up, I'm falling behind. I used to be on the cutting edge. I've been doing this for close to 20 years, or sorry, 10 years professionally. I'm exhausted trying to know what the right tool is for the right job. I learned jQuery and so JavaScript I know stupid, which I don't agree we didn't talk about that. But now he has six is that should I wait for iOS seven before I jump in. And then this is the part that that kind of really hit hit home for me as well. My My life is infinitely more complex with a growing family. I can't crush weekends like I used to. I don't want to let my clients down. So They're sort of like this, like, at a certain point, you've been doing this for a few years, when I first got started, it's all I wanted to think about is all I wanted to do, I would listen to podcasts non stop, I would want to do it all night and code all weekend. And at a certain point you, you want to have other hobbies, you want to have the weekends off, you want to go snowboarding, you have to spend time with your family, or you want to spend time with your family. Right? There's this like, whole secondary option to it. And it's kind of hard when you're like, What am I supposed to do in order to keep up? So that's what we're gonna be talking about today. First of all, like, how do you approach this sort of feeling? as well as how do you actually keep up so that your skills stay relevant? Yeah. So - -19 -00:05:44,310 --> 00:06:30,570 -Scott Tolinski: I think it's important to, to state off the bat that like, you, you are not like this is not, you're not alone, this is not a unique problem, I feel like at some point or another, most people in your job or or this industry will feel like this at some point. Because with the amount of progress and the rate at which everything changes, there, it's just impossible to feel like you have a handle on everything all the time. And even if you like, even if you do have a handle on everything, it's still really easy to feel that you don't have a handle on everything, just because of the amount of churn and the amount of things and options to learn and stuff like that it is incredibly easy to have these feelings. And I would say most everyone will go through these sort of things multiple times in their career. - -20 -00:06:30,630 --> 00:07:47,730 -Wes Bos: I feel it all the time. And I think one of the the best sort of advantages that I've gained in my career is just being okay with not knowing everything. Like I do this for a living, my job is to stay up to date and record videos of the new stuff and to teach you folks how it all works. And I often feel like it like if I'm spending eight hours a day trying to keep up how is someone who has eight hours a day of actual dev work that needs to get done for their clients? How are they supposed to keep up? Right? It's it's just crazy. And I think that I think the biggest point that I'm going to have here today is that it's fine with not knowing how to do absolutely everything is fine with not knowing like I often have people being like, hey, Wes, what's the difference between RX js and Redux? And I used to been like a, my answer now is I don't know. I've never tried RX. Yes. And I'm sure it's great. And I often get people being like, Oh, you haven't tried it, it's amazing. And, and you get all this sort of like, energy towards it. And I'm sure I should check it out at some point, but I have a full enough plate as it is. And I sort of know what I should be checking out and whatnot. And I don't know, it's, it's something that you have to get good at is being fine with not knowing absolutely everything. - -21 -00:07:47,940 --> 00:08:47,100 -Scott Tolinski: Yeah. And I mean, that couldn't be any more dead on especially, I mean, with that, that point about this library or that library. There are people that will will come at you in and say, Oh, you don't know this, and maybe they're trying to be helpful. Maybe they're trying to make you feel like, Oh, this thing can help you, right. But a lot of times I feel like those people are just trying to maybe flex they're like, I know this or drop these buzzwords, or maybe like, you know, there's just this whole whole thing of trying to put yourself? Well, I know, I know, more than Wes Bos does I know more than so and so does, right? Like, I think a lot of these times if you're feeling like, Oh, so and so and everyone knows this chances are everyone has these huge gaps in their knowledge. And just because you don't know something, yeah, you have to be be cool with that you have to be very cool with knowing that there's going to be large, large gaps in whatever you learn at any point. And that's not a bad thing at all. That's that's probably a good thing. - -22 -00:08:47,129 --> 00:10:55,560 -Wes Bos: So first thing I kind of want to the first point I want to get across here is the cutting edge is not necessarily a place that you want to be in sometimes when you're in this sort of I don't the sphere of Twitter and listening to even our podcasts and all this you sort of see everything moving like a crazy speed that there was some stuff going around on Friday, people being like Redux is dead. And half the people are like, Wait, what? I just spent like six months learning this and you're now you're telling me it's dead? Like what the hell right? And I think what's important for this kind of thing is when something new comes out, I don't immediately jump on I started just sit on my hands. I know let people sort of figure it out. Often what happens is if there's a 1.0 of a library that comes out or if there's a new thing that comes out, it seems like absolutely everybody is jumping on that train. It's probably not something you should be jumping on. Because those people that are working on the cutting edge, they're dogfooding it which means that they're trying it themselves, they're putting it into production. They're learning what their development cycle looks like. And they're going to put in the time to sort of develop all this stuff and then at a certain point This technology is going to either go away because you know what, it wasn't such a great idea. And I'm not going to do it, or it's going to mature and become a little bit more stable in what it looks like. And that's a point where you can start to take it on because your job likely you probably have to get stuff done. And if you spend half your time dealing with deprecated, and new API's and things changing all the time, then that's going to be incredibly frustrating, especially if you've got working at like an agency where you dev something and come back six months, it's likely that you're going to have some sort of breaking changes in that application where you might just sort of yearn for the old days where you could push out a website and and come back to it two years later. And there might be some new features in the language. But you might not necessarily have trouble upgrading that to the latest libraries. - -23 -00:10:55,890 --> 00:12:52,620 -Scott Tolinski: Yeah, that's especially I think, important with things like these frameworks, because I mean, how many JavaScript frameworks, I mean, the joke is that there's a billion JavaScript frameworks, but how many JavaScript frameworks have come out, they make a big splash, people are talking about them for like, four or five months. And then maybe like eight months down the line, there's less people and then 10 months down the line less people, and then all of a sudden, it's sort of like not a thing, right? And then maybe you just invested, you know, a solid week of your time or a couple months of your time to, to get the handle of this particular framework. And now this framework is not being used by anyone anymore, where if you would have just sat back and sort of waited, like half a year or so you could have seen that the the trending was sort of trending downward? So I mean, there's something like it, remember? Yeah, I don't know if you would say like the the big, the big ones right now for popular JS frameworks are probably like, Angular. in Angular people. I know, there's the whole Angular Angular JS thing. I'm just saying Angular as Angular react and view, right are probably like the big three at this point. But, you know, eight months ago, would you have been able to predict views growth, I don't know, if I would have been able to predict views growth. Now I understand that it's a great framework. You know, it's it's easy to pick up and people really seem to enjoy it. But it could have been all those things. And it could have just slowly, slowly decreased rather than increased. And now you can see this trajectory is something like Vue JS or something like react are much less, much less volatile or potentially going to just go away overnight, or decline in usage or something like that. And you didn't just spend all your time learning something that could potentially I mean, there's no harm in picking up react today. There's like, there's a billion people picking up react today. Yeah. And you know, it's - -24 -00:12:52,920 --> 00:14:49,680 -Wes Bos: not going anywhere, anytime soon. Exactly. They're, they're picking it up just on time. And that's, I love that you just said it just on time, because I was listening to Tim Ferriss podcast last week. And he did, he has some questions. And he talked about this concept of maintaining relationships with people. And he says he tends to do what's called just in time relationships instead of just in case relationships, meaning that he doesn't go out of his way to make relationships with absolutely everybody. However, if there's something that it may be beneficial between a relationship, then at the time that he needs it, then he'll go out and try to foster that relationship. I was like, that's very similar to how I approach JavaScript. And it's more just in time learning, meaning that I know a lot about JavaScript, the language, and if there is something that I would possibly need, maybe there maybe going back to RX js, like maybe I was doing an application that it was just a perfect example. And people have been telling me like, Oh, I did an app like this, and it really helped us out. I would say, Okay, that sounds like exactly what I need. I'm going to go out and learn that specific thing. And usually, the overhead to that thing is really not all that much, because and I know we say this all the time, and especially beginners hate hearing it. But if you really do double down on the fundamentals and stay up to date with the core language fundamentals, like we just had a huge change in the language, which was ESX. There's all kinds of new stuff, the arrow functions and computed properties and classes and all this kind of cool stuff. But as long as you can keep up to date on that, you'll be able to just switch over and do this just in time learning. No problem, pick up a new library in a couple days a week, depending on how big the the breadth of the library would be. - -25 -00:14:49,920 --> 00:15:20,760 -Scott Tolinski: Yeah. Because if you do understand those concepts, it's going to make understanding the usage of those concepts and a library that much easier. And so yeah, I'd be doing have to know how to build a framework and JavaScript, you don't have to know how how they built XYZ, whatever, right? But having the general skills and being able to recognize patterns and recognize techniques, and being able to use those techniques is going to make learning this stuff a way, way, way easier when you need to, and that I never heard of this just in time learning, but that's definitely how I approached this. I - -26 -00:15:20,760 --> 00:15:21,570 -Wes Bos: made it up. - -27 -00:15:23,130 --> 00:15:47,610 -Scott Tolinski: Well, then that's why I have not heard of it. But yeah, I mean, it's like, hey, that's the perfect way to learn is, is when you need it when you need something like this, to learn it. And that's not to say that you shouldn't learn something if you don't need it. Because sometimes it's just fun to learn new stuff. But, you know, if you're if you have all these responsibilities, and whatever, and you don't need to learn these things, then then don't don't get hung up about it. Mm hmm. - -28 -00:15:47,700 --> 00:16:58,530 -Wes Bos: I think like, the thing you should take away from this is maintain your your core JavaScript, like skill set, or maintain your core web development skill set, whatever language it is that you're using. And then when it comes time to being able to learn something, then that's exactly why it's gotten I make courses, it's because you can sort of have this happen all the time, people just sort of drive by pick up my react course, do it in a day or two. And then they have the sort of base knowledge of how react works. And they can sort of take it and run with it. Whereas like the flip side, sometimes I have people come take my course. And they're like, hey, Wes, I got a job doing react. And I only know jQuery. And I'm finding it really hard to understand the back text, or the arrow functions, or understanding inheritance or any of these, like different concepts that come your way. And then it's just a bit of like, Oh, it's too bad, because like, you can kind of fight your way through it. But it would be better if you had the sort of rock solid or even, like, decent understanding of the language, and then picking up these new things would be would be so much easier. - -29 -00:16:59,010 --> 00:20:18,420 -Scott Tolinski: Yeah. Yeah. And, I mean, there's things like that, let's let's talk about like, ESX. Because, you know, it's, it's been available to us, essentially, for a large amount of people for a long time. But like I've interviewed for jobs in the past two years, that that don't use ESX at all, just because they feel like it's too much of a hassle. They're there, people don't understand the features. So they don't want to train everyone and stuff like that. I for me, I don't I like a lot of these things. You don't have to take the entirety of ESX features at once. You can spend time, slowly progressing your understanding of them, right? Like, oh, why are arrow functions useful? Why are they different than normal functions? Okay, I got that one. Next, you can move on and you can slowly sort of add each of these things like the spread operator, or, you know, object destructuring, or stuff like this, you can slowly sort of add them into your flow. And in that way, you can really take some time to marinate with these things. Have them like totally understand how they're improving your life on a day to day basis. But I think I mean, it is important to keep that stuff up to date, even if you maybe aren't using it at your job. Because come the time, when you you want to be able to advance or you want to be able to grow and they're asking for these skills, you want to be able to at least be able to speak to that or show some initiative to delay it to learn their speaking of staying up to date, there's one hosting company that is more than just staying up to date, they're bringing us way into the future. Netlify as netlify.com is a awesome new host that basically their slogan is right front end code, push it, we handle the rest. And that is so very true, because they offer so many insane features for front end code, static websites, all sorts of stuff that you just can't get with any other hosting platform. In addition to things like one click ssls prerendering, you have a built in content content delivery network. There's also some really amazing features like contact form handling, you have this sort of web hook deployment system. For instance, I was just talking with someone and they gave me this example of their their app, I static site updating every single time they tweeted. And that's made possible based on this really extremely simple API, where the Twitter API was just hitting their Netlify site. And it was telling Netlify to rebuild, Netlify would rebuild and grab all that stuff. And we're talking about statically built sites here. So there's just infinite possibilities for the kind of stuff that you can do with the Netlify API. And now they're having all sorts of excellent new features, like I mentioned, contact form handling, all sorts of stuff that you would typically need a server to do. And this is sort of really taking out all of any sort of the back end programming for you and then giving you a user interface to truly build things like that. Content Management System like sites with a blazingly fast static site generator using the jam stack, whether that's any of these from Jekyll to Gatsby to any of these amazing static sites, if you actually, if you want to learn more about six sites, we did a great episode last week about static sites. - -30 -00:20:18,480 --> 00:20:25,020 -Wes Bos: Yeah, that one that was like one of our most popular episodes in the last couple of months, I was super impressed at that. - -31 -00:20:25,340 --> 00:21:27,860 -Scott Tolinski: Yeah. So if you are interested headed to netlify.com forward slash syntax, and sign up, check it out. Seriously, I have never used a host that has had this, uh, I don't know, it's just this easy to use. And, and somebody was commenting on Twitter about my my cell job of Netlify in the last episode, and I was just so like, so darn genuine, I, like cannot stop talking about it. I've been telling my wife about it. And she does not do web development. She's just like, I don't care about this. So that's how much I love this service. Also, if you are looking for a job, they're hosting, or they're they're hosting, if you're looking for a job, they're hiring currently. So netlify.com forward slash careers, both remote and local position. So if that sounds like something you'd be interested, check out netlify.com forward slash careers. Otherwise, just hit up netlify.com. Check out some of their features. This seriously is a next level futuristic host for static site generators, as well as just front end code in general. Sweet. Hey, - -32 -00:21:27,900 --> 00:21:31,260 -Wes Bos: I got a question. Can you explain what jam stack is? - -33 -00:21:31,380 --> 00:22:05,880 -Scott Tolinski: So yeah, the jam stack is basically a JavaScript API's, and then markup to build your site, aka, you're not dealing with any sort of server side coding at all. So the JavaScript is, is writing your front end code, whether that is like a view, j s, or a React.js. Or just straight up JavaScript is JavaScript on the front end. Next, you have API's to handle all of your sort of server side stuff instead of managing your own server, and then markup to display your post. So you know, markdown files and stuff like that to be able to bring in all of your content. - -34 -00:22:06,930 --> 00:22:14,850 -Wes Bos: I'm so happy that there is now an acronym that has an acronym in it. So the jam, the A of the jam stack is API, which is - -35 -00:22:16,260 --> 00:22:19,470 -Scott Tolinski: we see Yeah, can we go deeper than that? I think we need to have another one. - -36 -00:22:19,500 --> 00:22:24,210 -Wes Bos: Yeah, three acronyms deep. So you've arrived in tech? - -37 -00:22:26,160 --> 00:22:26,850 -Unknown: Nice. - -38 -00:22:28,350 --> 00:22:54,330 -Wes Bos: All right. So um, let's talk about a little bit like why do you need to stay up to date in this industry? I think that like, obviously, you need to stay up to date, because things are changing. You don't want to get get left behind. But I think there's a lot of people who you're working on your team, you're working nine to five, and you're happy with your stack, and it's working well. So Scott, tell me why does someone need to stay up to date? - -39 -00:22:54,630 --> 00:23:12,780 -Scott Tolinski: Yeah, well, you know, not every job is permanent. And when you're looking for a new job, and the job resume, or the the job, you know, the posting or whatever says, Hey, you need to be proficient in SAS and ESX, and react and whatever. - -40 -00:23:13,740 --> 00:23:14,310 -Unknown: Well, - -41 -00:23:14,340 --> 00:25:12,690 -Scott Tolinski: what if all the jobs that you're looking for end up having to be to be like that, like, you might be sort of finding a really tough to find a replacement position, you know, that every time you lose a job is your fault. So you could find yourself in a situation where all of a sudden, your your comfy chair that you've been sitting on is no longer there. And there's no more comfy chairs out there. So you're going to have to look for a way to make your situation a little bit better. So I mean, in the hiring world, the stuffs the stuff moves fast, right? But honestly, I feel like the the job postings are always like, a little bit behind. So if you are feeling like the job postings and what they're looking for maybe like a little bit out of your league, or out of your range or something like that, you're gonna definitely need to stay up on that, or else you might not be able to find another position. Ultimately, also your clients, right, you might not believe this, but your clients have a pretty good handle about what's possible on the on the web, and whether or not they know it in technical terms, they use Facebook, they use Instagram, they use all these sites, and they see all these features in action, and they're just sort of like, Well, why can't we do this? You know, why can't I mean, honestly, the you know, the answer is Facebook has 1000 engineers in your, you know, maybe a smaller team, but they don't understand that aspect of they want to see these modern features, they want to see this, this really modern stuff and, and not all of the old techniques and the old code can do these modern features and techniques. So you're gonna want to be able to satisfy your clients or else again, you could get fired and and another thing is, you know, maybe your your just performance at work in general, you're getting passed by by younger developers who are making a bigger splash and the boss is sort of looking at their Work and looking at your work and saying, Wow, their stuffs a little bit more impressive. And that could you know, really hurt your chances for promotion or even the chance to keep your job. So I mean, maybe you're falling behind at work. - -42 -00:25:12,990 --> 00:26:51,540 -Wes Bos: Yeah, I think on that point there's there's a sort of a fine line between, like staying up to date for just to stay cool. Because I often you hear people throw the word out like hipster web developers, meaning that like it's it's almost like a meme how how much these people move around with the the new tack and are talking about the latest and greatest like framework called like scratch or sniffer, whatever it is that they're they're working on. But I wouldn't be so so fast. also write that stuff off, because at a certain point, this new tech is going to make both your job as a developer better, I think it could, because it's, you're going to have a really nice workflow, you're gonna be like, oh, wow, this is so much easier than I thought, as long as I get over that initial hump of learning. And as well as like, we need to be thinking about like, why are we building websites at the end of the day, and it's because this new tech is enabling better experiences, more sales, whatever it is, at the end game of your website, or your web app is, generally this tech comes with sort of an advantage, which it might be faster website. But it also might be faster turnaround, meaning that like you have a bit of a competitive advantage, because you can start pushing out new tech, like think about banks, and the banks are built on all this old tech. And it's so hard for them to roll out new tech and new features and new UI and stuff like that. And then what happens is that these, like new startups come around, where they're all based on this new tech, and they can move a little bit quicker, and they're a little bit more flexible. And that's generally a huge competitive advantage for it. - -43 -00:26:51,689 --> 00:27:55,080 -Scott Tolinski: Yeah, that's something Yeah, that's something I didn't even think about is this whole, this technical debt, this legacy debt of this stuff that you've built, and it's, it's becoming so old, that it's becoming harder and harder every single month, to be able to move it into the future. And, you know, maybe you end up being stuck in the past, right. And that is a very real concern, especially with some of this tech and not to say you need to be on the cutting edge cutting edge. But if you're not taking these steps to at least keep up with sort of modern times in your stack, you you run the risk of getting bounced out by, you know, the the, you know, the fast new app, I don't want to use the word agile in the sense of, you know, agile, you know, team stuff, but like, the more agile team that's able to come in there and sort of, you know, juke around you and be much more, I don't know, trying to keep some most sports references in here, but be like, you know, like, more athletic and just be able to surpass you and those kind of ways. - -44 -00:27:56,100 --> 00:29:17,130 -Wes Bos: I think another important point is that sometimes I find this myself, I would not like web development, if it stayed the same, or if it moved really close, really slowly. Because like, there's only so many things that you can do in web development, especially if you're working for an agency that works on a lot of the same kind of stuff. And I find that after maybe a couple years of doing something the exact same way, you start to get sick of it. Because it's not challenging. It's not, you're not coming across new techniques, you're not trying to solve any sort of new problems, you're sort of just going through the motions of building a credit app or styling a WordPress theme or something like that. And at least for me, I find myself getting getting really sick of that really quickly. And often, when I pick up a new technology, I feel that initially you are when you're first learning web development. And once you got past that initial, everything is broken, nothing works. But as soon as it started to work, and you're like, Oh, you get that like that feeling of like, This is so fun, and I'm super excited about it. I often will get that when I get past that initial hurdle of new tech and being like, oh, oh, yeah, I can see how this is gonna gonna be fun. So it's just fun to learn new stuff, and to always be changing how you approach problems. Yeah, - -45 -00:29:17,340 --> 00:29:41,820 -Scott Tolinski: I remember first learning, just JavaScript frameworks in general. And it seemed to me like I was at the time, I wasn't super good at JavaScript in general. And I didn't, I felt like everything was so scary and difficult. But then you're right, once you get over that initial hump, and especially with something like Angular that made that hump very, like minimal, like the very first version of Angular. Yeah, they're like, sort of two way text binding example, right? - -46 -00:29:41,939 --> 00:29:43,800 -Wes Bos: I should remember when that happened. I was like, - -47 -00:29:43,860 --> 00:31:24,960 -Scott Tolinski: Oh, no, I remember being like, I don't understand why this is any better than jQuery young and I was like, Well, I guess I'll try this out. And then I tried I was like, What? This is easy. What? Magic? Yeah. So like stuff like that. You get really, really excited all this whole new world. opens up of stuff that, you know, I often feel like I have superpowers with some of the things that I learned when I learned you're all of a sudden, like, I can do this. It's like getting a peek inside of the matrix or something right? You all of a sudden at Duke can do all this stuff that you couldn't do before. And it makes you just really super pumped. And, and I guess I just never like for me, like I do get that there's, there's a sense of like complacency, complacency where you like, show up to your job every day, you do the same thing. And some people really like that comfort of always knowing what to type and when to type and whatever. But I mean, it can be a major problem. I worked at agencies where years into sasses popularity, they were still calling SAS a fad, it might have been used by like a huge percentage of developers SAS is a fad, icon fonts, it's a fad, SVG, it's a fad, like at some point your websites or there's these, you know, slow WordPress sites that use images for everything and not that WordPress sites are bad. I'm just saying like, they're stuck in these old techniques. And they're just not willing to go because it's very comfortable. And so like, for that person, like how do you motivate that person who's very comfortable and is happy being comfortable rather than like the type like us who are like when I get comfortable, sometimes for too long? Maybe get a little bit stir crazy. - -48 -00:31:24,990 --> 00:32:31,560 -Wes Bos: Yeah, yeah, the flip side of it, I think for those people, you you need to know that this industry is not going to like I don't I don't like saying this, but this industry is not going to wait for you. And you have to always be staying up to date. It's just part of being in our industry. And the fact that you don't necessarily like to stay up to date, or you just don't have time for it like your boss. We'll talk about that in just a second. But like you, you work so many hours a day you got kids, you don't have any time you can't spend your entire weekend learning this stuff, because you've got other stuff going on in your life. And I'm a big proponent of I realize everybody has different different schedules and whatnot. But I'm a big proponent of just like not working on the weekends. And like, How do you stay up to date with that? So it's really important to know that, regardless of what situation that you're in, you need to know that part of your job will be I don't know, maybe it's five or 10% of your week needs to be dedicated to staying up to date with with what's going on. Yeah. - -49 -00:32:31,560 --> 00:32:32,550 -Scott Tolinski: Do you want to get into that - -50 -00:32:32,550 --> 00:32:33,270 -Wes Bos: now? Like how to - -51 -00:32:33,270 --> 00:35:02,010 -Scott Tolinski: stay up to date? Yes. You know, like you said, it won't wait for you. And you do need to make some sort of effort. Like we mentioned so many times in this episode, you don't need to be on the cutting edge, you absolutely don't. But do you need to have maybe a handle on some modern stuff you absolutely do. And for most of the time, I think it's the best way to approach it is to assume that no one has the ability to work nights and weekends. And and and grind on this stuff. Because let's face it, there are people that can and that do in the past, I have as well. But the overlying baseline assumption is that you're not taking the stuff out of your nine to five. So in that assumption, you need to find the best way to learn on the job. And I understand you're swamped with work, right, everyone's swamped with work. But you still need to find ways to learn whether that's sort of just finding something that's maybe like a little side project at work that maybe your boss knows about or doesn't know about. But it's not like a side project that's making you money kind of thing. That's something they could be mad about. Like, for instance, I mentioned another episode, I wanted to learn Angular at my job, there was no room to learn Angular, there was no client projects that could use Angular, I spent an hour maybe a day or so I mean, if you can't pull an hour or even half an hour out of your day, then not everybody is efficient. 24. Seven, at work, I'm very aware like I've worked at these these places before and not everyone's on on the clock grinding 24. Seven at work. So if you can't find like half an hour, a day to sort of dedicate to like, maybe just toying around with something that you need to maybe like look at your time and how you're spending your time. But I took this time to learn Angular, so instead of instead of just like learning Angular, and grinding away, I built a little checklist for our web developers to use in our, like a pre deployment checklist, right? And this could have been done on pencil and paper, but I decided to do it with Angular and use some new fancy things I wanted to learn like local storage and whatever. But that way if my boss was like, What are you doing? Like what are you working on to say, Hey, I'm building this, this little checklist for the team to use to go through their stuff before they deploy. They can check all this stuff, and it's it's going to impress your boss because it shows you have some sort of initiative to make things better, but it also gives you that time to Like really grind away on some new stuff? - -52 -00:35:03,480 --> 00:36:31,190 -Wes Bos: Yeah, I think when when I was doing a consulting and I wanted to learn something new, I was kind of in the lucky position where I was getting hired by Well, it was about half, just like companies who needed a website or a web app built in there, you they come to me because I'm the technical expert, and I can choose the entire stack. And then the other half of the time, it was existing tech teams coming to me and being like we need help with and when I was doing it is either we need help with JavaScript, or we need help with some more advanced WordPress stuff that that you're working on. And in that case, what I would I would try to do is to figure out one kind of new thing that I could work into every single project. So whether that was using SAS in a new project, whether that was install, setting up a gulp process was that was trying to find something where it was like, Ah, this probably could be done with jQuery, and it would be just fine. But I'm going to try to do this puppy in Angular, just for the sake of learning and implementing Angular into that one single thing. And that's sort of how I tried to do it into it. Because at a certain point, I didn't have time to necessarily learn on my own. So if I could get paid to learn, and that's ideal. And I could use that new tech in every single project. And that stuff adds up pretty quickly being able to try a new thing on every single project that you work on. - -53 -00:36:31,380 --> 00:37:41,010 -Scott Tolinski: Yeah. And I think it's also a good point to say like, these things don't have to be major leaps, right? You don't have to go to a framework or to whatever, they don't have to be these giant leaps forward, they can be little tiny leaps forward. For instance, you've always used images for icons, well, or an image font for icons, well, in this project, it's really not going to cost me that much more time to learn SVG. So I'm going to use SVG for icons. And that's like, basically, it's taking something small, right? Using SVG for icons, it's something you could learn in a day, right, and it's pushing the needle forward, it's giving you a little bit of an experience here or there. Or even like CSS Grid, you know, people say I can't use CSS Grid, but you can still learn it and write a fallback for it. And the amount of time that it's going to take for you to do that is not extreme enough, where it's going to set you back. Like I understand it's not efficient. And it's not as easy as just writing the same stuff you've always written. But it will push you forward. And it'll get you using those techniques, and it will open your mind and push the needle forward just a little bit. - -54 -00:37:41,010 --> 00:38:10,410 -Wes Bos: It's worth spending a little bit extra time. It's funny, any time I tweet about something, and even with my CSS Grid course, you get like this army of, like corporate devs come out being like, well, it's not supported in every browser. I'm like, Okay, thank you for telling me that. Yeah, maybe I should just shut this whole thing down for a couple years and and wait for it to catch up. There are ways that you can go around it if you cannot use it. And like Scott says, I think that's a really important point that you made there. Yeah, yeah, I - -55 -00:38:10,410 --> 00:38:57,030 -Scott Tolinski: didn't. So I mean, the the idea here is that you can find ways to learn at work, right? Whether that's the small projects or injecting things into your project, that doesn't fundamentally change the project itself, right? If the project guidelines are, the site needs to be a WordPress site, it needs to do this, it needs to do that. There's no there's nobody telling you. I mean, unless you have like a really, really over overreaching boss. There's nobody telling you, you can't write CSS Grid with a fallback for this the no, yes. Like, at the end of the day, people are going to care if it works, and you get your stuff done on time. And, and I do think that there is time and capability for everyone to add little things in here to push the needle forward. Absolutely. - -56 -00:38:57,479 --> 00:41:09,860 -Wes Bos: And one more thing while we're on that with the boss, because I get emails all the time from people being being like, okay, Wes, I'm so gung ho about all this new stuff, but the team I'm on, it's led by some stodgy old guy who hates everything new and everything that we do is totally fine. And it seems like sort of sometimes the the senior developer on the team is feeling a little bit anxious, that stuff is changing. And it's not necessarily stuff that they know how to do. So there's always this kind of weird thing where maybe the junior developer knows a little bit more, a lot more of it, because they're excited about it and wanting to try the new stuff. And the senior developers sort of just been like, Nope, it's fine. We don't compile our JavaScript. We don't try sass. We write everything like this. It's been working this way for 10 years. We're gonna do it for another 10 years. If that's the case, and I've run into plenty of situations like that, especially being a consultant, that I would be this whippersnappers that comes into companies. being like, Hey, everyone, what you're doing is garbage. So your company hired me to fix things. And people don't like you, when when they're doing that, because it's obvious that they needed to reach outside their team for some help. So when that was the case, what I would do is I would sort of put together a proposal, meaning that like, you have to spend a little bit of time putting together what the tech is why you might want to use the tech. So that was the big one is like people don't necessarily understand why I get this question on Twitter, like last week, people go, cool. It's cool that you really see react series, but why do I need react? And I was like, oh, like, I sort of forgot that some people don't even understand why you might need it, right? So you sort of can go through all the points and you start to make like a presentation, maybe a little PowerPoint, build a little app and show them how it works. And generally, if that is the case, if you can show that this actually has value, and I'm not just a hipster, trying to use new technology that will often push those those other developers over the over the hump and get them excited about it as well. - -57 -00:41:10,080 --> 00:42:58,350 -Scott Tolinski: Yeah, there's a certain like, show don't tell us well, right. Like, if you throw up a, you know, some some modern tech that's doing something, and it's way more performant, it's way faster, it's a way better experience than what they have, then that could that could very well be the thing that makes everyone go, aha, I get it. This is way better. I understand why this is why like just even looking at this example. Or the amount of code that you use to write this, this is just instantly something that is is an aha, so I think there there is a little bit that these people, sometimes they do, they don't see the point, they don't see the why and you need to give them that that aha experience you do, you need to maybe illustrate that a little bit. And, and in extreme cases, I know there's these these cases, and if you are the type of person who likes to push things forward, and you like to to stay up to date, and your boss is the one holding you back, right? Like if you're really excited about learning this stuff, but you're not getting these opportunities. In extreme cases, I would say that's grounds enough to try to find a new job. Like, I know, none of that's not for everyone, right. But for me, personally, I don't think I could be comfortable in a place where my boss was really denying me the opportunity to learn that much. And sure enough, people are gonna say, Well, you can't just quit your job. Sure, you can't. But you can look for new jobs. And you can look to see what's out there. And you can potentially find something a little bit more progressive, if that's if that's what you're looking for. I don't I don't want to say that you should quit your job or something like that without having something lined up. But it might be caused if if this person has you know, you've tried to reach out to them and talk to them that you want to grow in your position more, and they're not budging, then it might be time to start looking. - -58 -00:42:58,560 --> 00:43:41,640 -Wes Bos: Yeah, if you can't get them, often, what I'll see is, especially when I do corporate training I get there's usually one person who joins like a bit more of a corporate team. And they're all they're like the whippersnappers of the new tech. And then they'll bring me in to sort of get the rest of the team all excited about it. And in good companies, the they're open to that, because they know that tech changes, and you need to always be up to date. But in some companies, maybe it's just bad culture. And I think you need to think about your your dev career, maybe you have 2030 years left of your dev career. What is that going to look like? If you spend the next five years not progressing forward? You could be potentially hurting yourself long term. - -59 -00:43:41,879 --> 00:44:36,720 -Scott Tolinski: Yeah, I left to the the shortest I've ever stayed at a job with six months, in six months, I could tell that I was not going to to get what I needed out of that job. And I started looking because I mean, there's no shame in that there's no there's nobody saying you must keep a job for this long or whatever. If something is clearly like not making you happy, or not allowing you those opportunities to learn or whatever, on the job, then maybe you start looking because there are a ton of companies that really really put forward the idea of learning and progressing because those are those are the smart companies because it's it's, it's in their best interest to have, you know, their developers trained and on this stuff. So and honestly, in all honesty, if I if I had a team of developers underneath me, I would I would give them a lot of time to spend on personal learning and development if that's what they wanted on the job getting paid for it. Yeah, - -60 -00:44:36,720 --> 00:45:27,900 -Wes Bos: it's the way it should be. You start attracting top talent to you like you think about like, why does Facebook give developers time to work on react? Why does Airbnb give their devs time to do open source? Why does any company give their devs time to do open source and it's first because they need the the best tools in the industry, but it's also in a huge part of it is so that they can attract the top Tech, like, there's, there's reason why some of the best devs in the industry right now are working at Airbnb, Netflix, Facebook, all of these big companies. And it's the reason is is because they put out, they're known for being like the titans of the JavaScript industry, and they're going to attract the best devs that are out there. Yeah. Yeah, King of the best. Let's talk about a sponsor, which is, well, yeah, transition - -61 -00:45:27,900 --> 00:45:28,830 -Scott Tolinski: game. - -62 -00:45:28,860 --> 00:47:12,960 -Wes Bos: Oh, yeah, I'm trying to try to work on it. So our sponsor today is Freshbooks. And Freshbooks, is cloud accounting for your small business. And I'm gonna last week, I told a little little story about how I got how their customer service was great. And this week, I'm going to talk to you another little story that I have. And for 2018, I'm looking at doing my expenses a little bit differently. Currently, what I do is I just save all my receipts. And I hope that I don't lose any of them, and then line them up. So one feature that Freshbooks now has is in mud, they just rolled out my bank, I think in the last six months or so, the ability to hook into your bank so that you can auto import your expenses, right from your credit card. And that's great, because because i a lot of my expenses are in us in the receipts that I get are in us. But the conversion rate, it gets charged to my credit card, and Canadian. So what I've been doing is I've just been kind of converting it at the bank of Canada's rate for the year. But now what I can do is I can import them and I can expense it at the exact amount that I was actually charged on my credit card. And then when I do my taxes at the end of the year, there's no sort of discrepancy between, like maybe I'm out a couple hundred bucks or, or a couple thousand bucks because of the conversion rates. There's not going to be any of that. So I was really excited to see and they've had it for a long time. But specifically, my bank wasn't on there for for a while. And now they have it, which is exciting. They have support for pretty much every bank now. And I recommend that you check that out to auto import your expenses right from your your company's credit card. So go to syntax comm Ford slash Nope. Go to freshbooks.com Ford slash syntax and use syntax into the How did you hear about a section? Thanks so much to Freshbooks for sponsoring. - -63 -00:47:13,560 --> 00:47:19,800 -Scott Tolinski: Awesome, super awesome. So So I guess we've covered you know, - -64 -00:47:19,800 --> 00:47:20,430 -Unknown: hey, - -65 -00:47:20,430 --> 00:47:40,320 -Scott Tolinski: it's okay to fall behind, we've covered that, when it actually becomes a problem, how to make it less of a problem, right how to learn on the job, basically get paid to learn. And sometimes you need to just do it and not even ask your boss, you just need to do it. Right. What else is there hear about falling behind? - -66 -00:47:41,040 --> 00:48:10,530 -Wes Bos: Um, I think the other question is, okay, I want to stay up to date. What do I do? There's, there's so much stuff out there, what do I learn? How do you know what you should learn? What are the resources that I should follow? Like, what is the thing that I should read to stay up to date? People ask me all that all the time? They're like, like, what do you read? And how do you stay up to date and all that? So maybe we'll both go through? Like, what is our approach to staying up to date? You won't go first, or? Yeah, I - -67 -00:48:10,530 --> 00:49:25,080 -Scott Tolinski: mean, for me, we've mentioned this already once, but a strong handle on the fundamentals of JavaScript, or whatever your main language, if you're just a CSS and HTML person, a strong handle on the fundamentals, and like taking that time to grind away and that stuff is always going to be, you know, important. Now, I think there's some easy ways to have this stuff permeate into your life, whether it's following podcasts, such as syntax.fm, or other podcasts, right, or YouTube channels, and just following this stuff. Like, what kind of debt is watching a 10 minute long YouTube video that explains the arrow function to you like, that's nothing, right. So I mean, you could put one of those on a date or something. I think, for me, investing time and understanding the foundations, but also just just knowing that you don't have to sit down and invest your whole day in this stuff. So for me, getting into things that can permeate into you, whether it's becoming a fan of a YouTube channel, like level up tutorials, or becoming a fan of a podcast such as syntax, FM or something like this to to just let this stuff permeate into your life a little bit more. - -68 -00:49:26,069 --> 00:50:48,210 -Wes Bos: Yeah, pretty much the exact same way. I'm just gonna go through some ways that I tend to see people staying up to date for me, it's just Twitter. I'm on Twitter, like a good chunk of my day going through it. Which is funny because like, it seems like such a time waster, but for me, it's it's staying up to date having conversations like the other day I had a question about reacts new context API, asked a question and I got a whole bunch of like the people who are working on this stuff are replying some of the people that are in the forefront of Explaining how this stuff works, they're replying. And that Twitter thread alone is super valuable because I learned a lot. I know that people go through all the replies, read all their plays, and then they're up to speed that helps them know, Oh, I didn't even know react had a new context API or react has a new refs API. And I asked a question about it. And crickets, nobody replied, I had to go off and figure it out myself. And I came back and updated the thread with the information. And then whoever was following that thread now now is up to speed on that new and that's great, because it's not so overwhelming that you are sitting down and watching something, it's kind of just this passive reading of a couple tweets, seeing conversation between people, and you sort of understand what the cusp of of everything changing is. - -69 -00:50:48,450 --> 00:51:38,190 -Scott Tolinski: Yeah. And don't let that because that if you're, I don't know that the Twitter thing can if you follow like too many people that are like super cutting edge, the Twitter thing can also contribute to making you feel like you're behind. So maybe just like, like, maybe label some of these people as like, these are the cutting edge people and I don't need to, you know, necessarily be up on everything they're up on, but maybe just aware of it. There are like, you know, like the web dev, Reddit is a great place to stay up again, sometimes, you know, staying out of the comment section is a good idea. Because people just like make grand declarations, you know, like people either it's just an internet thing, but people would just make declarations like, this is wrong, this is right, this is the way to do it. This is not the way to do it. And that can also contribute. But yeah, even just simply getting the news, there is a little little story - -70 -00:51:38,190 --> 00:53:20,730 -Wes Bos: about that, actually, when I was first learning JavaScript, I remember when node came out, and I was so excited about it. And I was like, This is gonna be my thing. I'm gonna hitch my wagon to node, and I'm gonna, I'm gonna write it on the way up, because I think it's gonna be a big thing. And then this guy came out with this blog post called node j. s has cancer. And I, and I, like, I actually felt like terrible when that came out. Because I was like, Oh, no, did I just spend, like the better part of a year trying to learn this thing. And now this guy is saying it's cancer and Ruby on Rails is going to be the thing. And now I'm much more. Whenever I see blog posts like that, I'm like, Okay, this guy clearly hates it, it maybe has some valid points. But there's never going to be this like one blog post. That sort of just stomps out in entire technology, especially sometimes these people that write blog posts love to, to make these big, grand statements about about technology and put that away, because if the tech is really going to die, you're going the writing will be on the wall way before we before something like that happens. And I just like, look back at that now. And I'm like, You have no idea how like harmful that is to newbies to say something like no, Jess has cancer, because I thought that that was like, the end of my career. And I had just wasted all my time. And I should have spent it on Ruby on Rails where the reality is no, it's just some some goofy dude with a blog. And he obviously unpublished it now because if you look back at it, it's laughable. Clearly not cancer is clearly great. There's, - -71 -00:53:21,030 --> 00:54:09,990 -Scott Tolinski: there's something about that for everything, you could probably find a so and so's cancer post about like any given technology. And I again, yeah, that stuff, you just got to take with a grain of salt. Because Yeah, it's just one person's opinion. And that person may have their opinion formed on all sorts of factors. Maybe they run a Ruby on Rails shop, and it's in their best interest to drag node through the mud to get everyone else, you know, unexcited about it, so that they can, you know, maintain their level of, you know, income that they're getting. Yeah, that always bugged me a lot. We there used to be an old joke inside of our, his agency that we worked at, I'm sure this is a joke everywhere online as well, but the so and so is dead post, like blank is dead. Yeah. You know, it was always just, it was like, every single weekend, something else was dead web 2.0 is dead, - -72 -00:54:10,230 --> 00:55:02,580 -Wes Bos: or what was the other one it was, um, you attach a considered harmful to the end. Because there was a time when everyone was writing this tech is considered harmful. And then, and now it's now it's a meme where you sort of sort of say, like, syntax is considered harmful. Or I found another hilarious tweet I want to read it's, it's from kitzur. And I probably said it wrong, but I met him at a conference. And he's really involved in the React community and he's like Mr. Cutting edge and he tweeted the CoffeeScript plugin for Babel seven used in combination with create react app to and web pack for rocks so hard literally changed my life. And someone replied, I honestly cannot determine if this is a real tweet or output of some front end speak generator. - -73 -00:55:02,669 --> 00:55:07,680 -Scott Tolinski: Yeah, that's hilarious. That does it. It could very well sound like a robot wrote that. - -74 -00:55:07,740 --> 00:55:20,340 -Wes Bos: Oh that CoffeeScript Babel seven create react app to and Webpack for those are four things. I have not tried yet. Oh really is what Yeah, well, I know people seven. Table seven is about Yes, six quarters haven't - -75 -00:55:20,340 --> 00:55:27,180 -Scott Tolinski: learned that stuff yet. Well, what are you doing man behind? Yeah, what's going on there? - -76 -00:55:27,570 --> 00:56:48,450 -Wes Bos: Cool. Um, I got some other things How do you stay up to date? podcasts obviously, listen any of Peter Cooper's newsletters so Peter Cooper runs JavaScript weekly and knowed weekly, in front end weekly and all of these different weekly and he spends a lot of time curating good content, he's not just like kind of slinging a bunch of links into an email, like he spends a lot of time working on that. So generally, what I'll do is I'll just skim that every week, just to see I almost never click through to any of the stuff, but it's kind of just good to have the stuff in your head. And then if you start to see the same thing over and over and over again, then you can start to that's at that point where you realize, okay, this is not just cutting edge tech, maybe it's something that I can, can start to look at. And lunch and learns, I think are really cool. I thought it was really neat is that when I re released my CSS Grid course, like an hour later, somebody posted a photo of like four devs sitting in a room on their lunch with like sandwiches and my grid course. And they were just doing it together. Yeah. And I think that's cool. Like maybe once a week, it would do a brown bag lunch, and commit an hour, hour and a half to going through a couple of Scott or eyes video or trying to learn something together. Because if you're learning it together as a team, then there's that like, added benefit of being able to bounce ideas off each other or clarify it with with each other. Yeah, - -77 -00:56:48,450 --> 00:58:28,680 -Scott Tolinski: I think that's such a big thing. Because, you know, maybe you're not seeing the why but your your coworker is sitting next to seeing the why. But instead of you just sitting there not discussing that, if you're learning together, you get to bounce that, that why off, they get to bounce here, their excitement, or you get to bounce your excitement off of them. And that excitement can certainly be transferable. I mean, I didn't. I was like, like a lot of people. The syntax of react initially put me off from it. And one of my co workers was just like, no, you're dumb. This is so great. Here's why it's so great. And he was just like, always excited about it. And I just remember being like, well, dang, I think he just convinced me. And then I you know, eventually that's how I got excited about reactors by somebody else being excited about it, and then wanting to give that discussion while he was learning it. So yeah, lunch and learn. Super good. And on that same long along those same lines is meetups. I mean, every single week? meetup has a new different topic of something that you maybe it's interesting to learn, or maybe you're just interested to know that it exists. For instance, reason, I just went to a meetup about reason and react. Am I going to go use reason and react? I don't know, maybe sometime in the future, it seemed pretty cool. But I didn't go to that meetup to be like, Yes, I need to learn reason. I went to the meetup to say, hey, maybe check this out, see what's going on here, see what it what it's about. And just having that little knowledge, I know what it's about now. And I know what it's about in a different way, and maybe excited about it, whatever. But you don't necessarily have to go spend that time commitment to go learning and I'm going to spend half an hour listening to someone talk about why you might want to use reason and react. And that definitely, you know, that gave me it's good to have that - -78 -00:58:28,680 --> 00:59:22,140 -Wes Bos: sort of understanding of what it does, why people are so emphatic about it. And then I guess on the on the flip side, as well, it's important to note to people who are really excited about these cutting edge technologies. Often, people come off as like kind of like shamy, or like, Oh, this is the best and it comes off wrong. Because they're just so excited about this specific topic. It happens in people who are vegan or people who do CrossFit. Oh, yeah, where like, they just want to share with the world how amazing this technology is. But you come off a little harsh, and you end up putting a bad taste in their mouth. So generally, when when there's a new tech and you want to share it with someone, like it's often good to have some examples about why why it has changed your life or why you love to use it, rather than just being like use it, use - -79 -00:59:22,140 --> 00:59:22,740 -Announcer: it, use it. It's - -80 -00:59:22,740 --> 00:59:26,850 -Wes Bos: amazing. I can't say enough how amazing this is. - -81 -00:59:27,210 --> 00:59:40,860 -Scott Tolinski: Yeah, and also being respectful of other people's time commitments, and suddenly, everyone can go learn and not everyone has those opportunities. So not to be like you need to learn this but like, Hey, this is why it's cool, whatever. If you have time, you should maybe check it out. - -82 -00:59:41,820 --> 01:00:18,450 -Wes Bos: So hopefully that that puts a few of you at ease with the sort of crazy fast paging industry. Always remember that Scott and I are professional keeper uppers. And not necessarily everything we do is something that you should learn but by listening to this podcast, Hopefully it's you find out interesting things you find out about new stuff and then should there be a time that pops up where you do need to use the new tech here we go oh, I remember listening to syntax on graph qL maybe this would be a good project to to actually implement it for - -83 -01:00:18,630 --> 01:00:51,270 -Scott Tolinski: Yeah, and for me I guess the the big takeaway is like, you shouldn't like shame yourself or be upset about not staying up on things. But you should nessus you should become aware of maybe like the global state of the industry and make sure you don't fall behind the global state of the industry because if everyone in the entire industry is moving to this and you're not moving to this, it could become a problem but that said, little things framework changes little whatever don't stress out about it not when it can when you can don't sweat it Yeah. - -84 -01:00:53,640 --> 01:01:13,950 -Wes Bos: The again the twittersphere the people who are podcasting we are super into this stuff. And I would say a majority of the industry are nine to fivers who love it but don't necessarily aren't as as a head over heels as Scott and I are and the people who are talking about this stuff all day long. - -85 -01:01:14,100 --> 01:01:18,720 -Scott Tolinski: Yeah, and there's nothing wrong with it. You know those approaches? Yeah. It's all good. - -86 -01:01:19,379 --> 01:01:59,370 -Wes Bos: Awesome, so let's move into some sick pics. 76 shit pics. Wait, people we got to get the soundboard up again. people were complaining. The soundboard was gone. What's the Euro syntax. So we're just going to open up the soundboard real quick because we haven't had it open and people are complaining that we took it out. So there's some new sounds being added to it. So down there and shakes it. Neat. Neat. Exponential synergy. synergy. I'm garbage at this. Blaze and then what? Twitter Hayden - -87 -01:01:59,970 --> 01:02:03,810 -Scott Tolinski: downtown job. I'm glad Twitter Hey man in their - -88 -01:02:05,610 --> 01:02:08,400 -Wes Bos: downtown job shake. Shake shady. - -89 -01:02:08,400 --> 01:02:09,180 -Unknown: pretty annoying. - -90 -01:02:13,770 --> 01:02:14,970 -Oh, that's good. - -91 -01:02:15,270 --> 01:02:18,600 -Wes Bos: Where did that come from? This one's still my favorite though. - -92 -01:02:18,630 --> 01:02:19,890 -Scott Tolinski: It's 38 inches, man. - -93 -01:02:19,890 --> 01:02:23,130 -Wes Bos: Somebody told me you were talking about your monitor. Which makes sense - -94 -01:02:23,160 --> 01:02:24,420 -Scott Tolinski: because yeah, 38 inches. - -95 -01:02:24,420 --> 01:02:27,600 -Wes Bos: Yeah, you go we couldn't figure that one out. I love that one. - -96 -01:02:30,630 --> 01:02:32,400 -Scott Tolinski: Okay, sick picks you got a sick pick? - -97 -01:02:32,700 --> 01:02:36,390 -Wes Bos: I do. I was sick pick. Let me find one. - -98 -01:02:38,520 --> 01:04:21,300 -Scott Tolinski: Well, you're finding yours I got a sick pick. I this is a book I'm listening. I'm listening to the audiobook I've not read read this, I'm really interested in this book is been really good so far, like 90% of the way through. So if the last 10% sucks, then I'm sorry. But 90% of this book is so far great. It's called never split the difference, negotiating as if your life depended on it. And it's from an he's an FBI hostage negotiator. And he's writing this as like a in the in the in the seam of like a business book, but also how to just talk to people in general, if you need to negotiate, whether that's like negotiating big, big things like money or whatever or little things like, you know, just very small little things, basically how to talk to people to maybe not get them to be defensive or put them in like a negative position and how to always like sort of stay in a way that not necessarily puts you on the advantage in negotiations, but like puts you on equal footing or whatever, not to take advantage of people or something like that. But basically a way to talk to people and to negotiate with people without like turning it into some sort of, like I said, like someone on the defensive. So it's never split the difference by Chris boss. It was really, really good. Because it's like I said, it's like a business focused book. But it's all about this topic. And he uses all these anecdotes from his job as like a hostage negotiator. He tells you some really amazing stories about some some ways that they negotiated, negotiated out of some like really real major hostage situations that you would have seen on the news and stuff like that. So the guy's amazing. The knowledge is really good. Never split the difference really love this book. - -99 -01:04:21,600 --> 01:04:51,870 -Wes Bos: It's really cool. I think that's a that's a super good skill to have as as a developer, right? Like I think about like our own lives right now. And Scott just negotiated a pretty sweet deal with Netlify to sponsor this podcast, right? I've negotiated deals with like companies like Firefox to sponsor my my course, right? If you don't have those negotiation skills, then sometimes you don't have the money or the time or anything to actually put out the stuff that you wish to do, right? - -100 -01:04:52,230 --> 01:05:12,030 -Scott Tolinski: Yeah, yeah, and absolutely, and even in the relation to this episode, you need to negotiate with your boss to get some time to learn. Having the being able to present your argument as a way that like, yeah, these are some things that like are why it's important and to get your boss to see it instead of like, No, we just got deadlines, deadlines deadlines, you know. So yeah, - -101 -01:05:12,749 --> 01:06:42,540 -Wes Bos: it needs to be able to bring a clear argument to the table and, and be on their side, like, Look, I'm trying to build better experiences for our clients. So the business can make more money, in part of that is going to be furthering it. So I like that I'm going to add that to my on my audible list is getting really long, I need to go on some flights or something. It's been stacking up. Awesome. So my sick pick of the week is going to be a podcast, and what's it called, it's called. It's called containers. And this is really neat. It's a eight part audio documentary, it's available on all the podcast players. And it goes through how container ships work, you know, like these, if you have a ship, you put a container on it, and they take it off, and they put it on a transport truck, and you back that truck up to your target and take all the gear out of it. That industry is insane. How how containers work and how stuff gets shipped over from Asia to North America and shipped around the world. So they go through really how containers are like the backbone of our economy and in how the ships work and people that live on the ships. And I just found it's so so interesting. It has nothing to do with web development, but it's just one of those like, just tastes good. And one of those really nice, you know, when you watch it, yeah, it's a tasty treat. You watch a documentary, you're like, oh, that was a good one. That's exactly what this does. So it's a podcast eight, it's only eight episodes. That's it after you're done called containers, - -102 -01:06:42,810 --> 01:07:33,900 -Scott Tolinski: nice, sick, sick, sick, sick. So I'm going to shamelessly plug my pro Gatsby course which is on sale. Now. Basically, we go through the very basics of Gatsby, we explore the file system, we explore the graph qL data system, how you can tap into that use various things as an API, we use content fall, we use Netlify, CMS, all these things to have a real CMS experience for your static site. We also get into various hosting options, automatic rebuilding via hooks, and a little bit of fun stuff too with like the web animations API to do some animated page transitions. just general fun stuff. So pro Gatsby available right now on level up tutorials.com forward slash store, or you can become a pro and get access to all of the series on level up tutorials. So all that good stuff there. - -103 -01:07:35,190 --> 01:08:13,290 -Wes Bos: Wicked I'm going to plug my totally recorded react for beginners course it's at react for beginners calm. And to sort of celebrate. What I did is I put all of my courses on sale right now. It by the time you hear this, I think there should be maybe I have to extend it. I got to look at the right now as I'm recording got two days and 11 hours left. So I'll make sure that there's at least 12 hours after this podcast goes. goes live that if you're listening to this and you want to buy one of my courses, they're on sale right now. So go to react for beginners calm or learn no.com or ESXi. Oh, and pick up a course. - -104 -01:08:14,310 --> 01:08:15,120 -Unknown: sick - -105 -01:08:15,150 --> 01:08:24,450 -Wes Bos: sick. All right. I think that's it for today. Thanks so much for our sponsors, Netlify and Freshbooks. And we'll see on the Twitter's e pace. - -106 -01:08:27,960 --> 01:08:36,979 -Scott Tolinski: Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax36.srt b/transcripts/Syntax36.srt deleted file mode 100644 index e89d5371a..000000000 --- a/transcripts/Syntax36.srt +++ /dev/null @@ -1,176 +0,0 @@ -1 -00:00:01,290 --> 00:00:02,790 -Announcer: You're listening to syntax, - -2 -00:00:02,790 --> 00:00:04,560 -Unknown: the podcast with the tastiest - -3 -00:00:04,560 --> 00:00:10,590 -web development treats out there, strap yourself in and get ready. Here is Scott solinsky and West boss - -4 -00:00:10,650 --> 00:00:34,500 -Scott Tolinski: and welcome to syntax in this hasty treat. We're gonna be talking about freelancing, answering some questions that we received via email and Twitter and all sorts of stuff, just about general thoughts on different topics relating to having freelancing clients, and working as a freelancer, as always, with me is West boss. - -5 -00:00:34,530 --> 00:02:46,050 -Wes Bos: Hello, Hello, we are trying another minisode. Um, it's gotten I have this massive list of topics that we would like to get through. And there's a lot of topics that are, are not beefy enough for an entire hour long episode, but would would better be suited towards a minisode, which I don't know, we'll see how long this one is maybe 2025 minutes. So that's exactly what we're doing here. We did a huge episode on freelancing a couple months back, and we got a lot of follow up questions. So we're going to try and tackle some of those questions that we have. This episode is sponsored by Jonathan Starks a value pricing bootcamp. So Jonathan Stark has his book called hourly billing is nuts. And he's a huge proponent of this thing called value based billing, we'll talk about it. And that book is awesome. And I totally agree with everything he has to say. And what he's doing with this podcast sponsoring is he's trying to get people to sign up for his free, what is it a six day email course called value pricing boot camp.com. And in that, he's going to teach you basically the basics of how to get up and running with value based billing rather than hourly billing. So he talks about how hourly billing limits limits the growth of your business, how value based pricing works, how to do it, versus fixed bid stuff, a whole bunch of stuff in there. So if you are either a freelancer or you're maybe thinking about doing like a side hustle, make an extra couple grand a month, doing some some side work. Or if you maybe would like one day like to live the dream and work for yourself, I would definitely start here. Because that mindset of being able to charge what you're worth and make some good money is crucial to being a developer as as is the actual development skill, I'd say both of them are just as important. So head on over to value pricing bootcamp.com. And you can sign up for his free email course that will come I think it comes one a day, which is nice, because you can sort of learn it over a week. So thanks so much to Jonathan Stark for sponsoring. - -6 -00:02:46,350 --> 00:03:01,380 -Scott Tolinski: Nice, it's one of those things that can save you so much money long term, like once you understand how to get that type of billing and everything like that, that can just well not just save you money can make you money can make you a lot more money than if you were trying to build other ways. - -7 -00:03:01,680 --> 00:03:52,740 -Wes Bos: Mm hmm. Absolutely. I did this myself. I'll talk a lot. I did some hourly billing as well, you can go back to the freelance episode and talk about that. There's some some situations where that still does make sense. But if you're trying to take on your own clients and do your own project, this value based billing is the way that you're going to make some significant money and be able to still take vacations and not feel like you're you're trading ass and seat time for for however much money. And if you if you want to take the day off and go snowboarding like Scott does, then you totally can. sick, sick. So let's that that was our sponsor spot. Let's move into the actual content of this episode, which is answering some questions about specifically about freelancing. Again, if you want to hear a little bit more about Scott and I's history with freelancing, go and check out let me find out what episode that was for you One sec. Yeah, I - -8 -00:03:52,740 --> 00:03:54,330 -Scott Tolinski: feel like that was an earlier one. - -9 -00:03:55,170 --> 00:04:06,690 -Wes Bos: Episode Five, how to. Yeah, that was a very long ago. So how to slam dunk freelancing. And we go into our histories with actually getting paid and doing it on your own. - -10 -00:04:06,720 --> 00:04:18,660 -Scott Tolinski: So I'm gonna I'm gonna jump in here and ask this first question. Okay, the first question. I'd love to hear ideas, I'm building a portfolio to land those first few customers. How do you build credibility? - -11 -00:04:18,689 --> 00:06:02,399 -Wes Bos: Yeah, so I think the important part here is that your portfolio really doesn't matter as much as your credibility and your your referrals. So for most of my career, I had a really terrible portfolio. And most of the decent stuff that I had worked on was not able to do publicly because often what had happened is that, like, an agency would, would get a huge contract and then they would bring me on in the agency would take credit for that or as I would just build it and get paid for it. So some of the best stuff I did. I was not able to say I did that. And I think that what's important is that when people are looking to hire a freelancer They want to skim through your portfolio and see that you're good. But it's not going to be that killer portfolio that's going to set you across this set you aside from everyone else, what is going to make people choose you is the reputation of you, yourself, your character, you as a business. So almost all of my work came from being referred from other people. So people would say I had worked with Wes, before he does a great job, I recommend that you go with him, and that's going to be worth its weight in gold. And as well as the reputation in the community. So I was blogging a lot about specific technologies, I was doing conference talks about specific technologies. And by putting yourself out there, and talking about these specific topics, you sort of position yourself as an industry expert, whether you are or not. And then that's going to to go much further than a really nice portfolio. Because you sort of stand out as as the person to hire for that topic. Yeah, - -12 -00:06:02,399 --> 00:06:36,420 -Scott Tolinski: I feel like portfolios are really only like super key with like, straight up design gigs, right? Like if someone wants to see your your style of work more so than your quality of work than a portfolio can come in certainly handy for design work. But yeah, so what about these before you have referrals? Like before you have somebody recommending you, you maybe haven't even done a freelance gig before? What What do you do to prove to them that you you do have what it takes to see their vision? True? Yeah, I - -13 -00:06:36,420 --> 00:08:07,500 -Wes Bos: think what I did is, first you tell people that that's what you do. Sometimes people are like, how do I get thing and they go to their website? And it's just like, it's like a white page. That's, like, super minimalistic. It's like, No, you have to tell people, I build kick ass websites. The second thing is you need to ask people. So a huge part of what I did is I would just I made a list of 100 businesses in Toronto, and I emailed 100 people. And I said, Hey, do you need any any work done. And that might seem weird, because that's annoying. But if I guarantee if you put in the time, and you contact 100 different businesses that might need some work, they're going to, they're going to find you. And then I, another thing that I did is I would be very vocal on Facebook, I will go to a lot of meetups and just tell people, hey, I'm a web developer. I'm a web developer. And what tends to happen is that just by saying it over and over whether it's like taking Instagram of your your laptop, and some code or whatever, that gets sent in people's mind, and then saw at some point in the next half a year year, someone's uncle is going to need a website, or someone's aunt's daughter is going to need some an app built. And they're going to say, oh, Wes, does that. Let me let me refer you to him. Because we will always reach out to their inner circles first and say, Do you know anyone? So being on the flip side of that, you need to make sure that you tell people, that's what you do. So that when someone something comes around, they're going to going to be remembering you. - -14 -00:08:08,339 --> 00:08:48,650 -Scott Tolinski: Yeah, yeah, totally agree. Yeah, just to get that out there and NAB those first few clients. I also think it's important how you present yourself as a business via and I'm sure will agree via email or communications and stuff like that. Timely professional communications will go a long way in proving that you are a business your legit business rather than just, you know, some some hacker guy or gal behind a computer, you know, wanting to just make a couple bucks here, something like that. So, okay, I think that's pretty good for that question. Okay, next question. What are some strategies for estimating or figuring out possible budgets? - -15 -00:08:49,560 --> 00:11:56,160 -Wes Bos: Yeah, this was another big one for me when I was doing freelancing, and people are always like, it's like, kind of like a like a standoff with the client where you, you start to like, you shoot them a number and you slide it across the table and they'd be they become outraged because negotiating for a use car or something like that. It's It's not like that at all. It generally, what I like to do with people is, first what you do is is you sit down with your client and you figure out before you even talk about money, no, I'll come back to that in a second. But before you even talk about money, you need to figure out like what is it that they need at the end of the day? So I would sit down with them and say like, what is it that you don't tell me what you want but what is that? What is it at the end of the day that you need? So if you sit down with a real estate agent, they might need more leads at the end of the day or if you're working with a landscaping company or something like that then they may be saying like I we need more customers at the end of the day and you as a business owner needs to understand the actual objective of the website not tell me what color and language you need this thing done it well. That's another pot aspect as well, like people would, as I go on in my career, people start hiring me for my excellence. teece in JavaScript, rather than just being like a website guy, but I guess that's a that's another area as well. But at that same time, you also need to ask them like, like, what is the, what's a client worth to you? If it's a real estate agent and every single time that they get a client, it's worth six grand to them, then you they may be super happy to pay you. I don't know. However, however many dollars for every single client they get, you don't have to get into the lead generation business. But you could you know, that this website might be worth 10 grand a year to them, if you were to put the work into making sure that they're going to get those things. So understanding the business aspect, understanding what it's actually worth to them at the end of the day is super, super important. Not what is the industry average for a website, or what is a website cost? It's understanding your client and what's worth them. And then finally, understanding what their budget is. So I would always ask them, What is your budget, and that will help you understand like, kind of where they're at and where they may be way off this, sometimes they say, I have no idea what my budget is, I have no idea what to expect for some of this thing. And at that point, you can sort of start to come at them with with some numbers about what it might be. And, and to avoid that sort of sticker shock. I always like to tell them like, okay, I generally work in the range of five to $20,000 for a website, depending on what it is that we need. And and then I always like to talk about like the future, where if we can't afford it all now maybe we can just start with a nice base. And the good thing is I was talking about like, I'm going to build on an open source technology so that you'll be able to add to it a certain point, you're making an investment right now in your online presence. And as you need to add stuff, as you have some more cash available to dedicate to this, then we can we can start to add to it. Yeah, I - -16 -00:11:56,160 --> 00:12:38,790 -Scott Tolinski: think I think the discussion of money is something that people are often uncomfortable with, and you need to sort of get over that. Because even that's simple question. Like, that's maybe always one of the first things I ask if it's not stated in like a proposal, if somebody wanted me to work or something like that, if somebody emails me asking, saying that they have some work or something like that, the first thing I asked them is, what's your budget? It's not because I'm greedy, and I want their money, it's because I want to understand if this project is a good fit, or what they're looking for out of it, or, you know, just sort of what they're expecting to pay for this work. And and then that can open up the dialogue about what exactly that that is going to be. - -17 -00:12:38,970 --> 00:13:44,220 -Wes Bos: And I also say it's, it's also budgeting and in quoting people is also just a skill as well, I remember I was just like, spend an entire day on putting together a quote, and I would just be like sick to my stomach being like, Oh, is it too much? Is it? Is it not enough? Like? How much more could I get them like you're trying to gauge it all. And at a certain point, you start to get really comfortable with this sort of skill, and be able to sort of feel people out feel kind of what it's worth to them on the other side. I keep I know, I keep saying that. But that's really, one of the most important things that you need to take away of running a business is you need to understand, if you build this thing for them, what is it going to be worth it to them, it's not like this, like sunk cost that people don't want to have to spend, it's I am running a business, I bet I could make more money if I had a really good website or online presence or app or whatever it is. So I'm hiring you to help me further my business. And at the end of day, you both make a lot of money. And then I tell you here are both in good shape. Cool. - -18 -00:13:44,220 --> 00:15:11,760 -Scott Tolinski: Okay, so here's a little bit different one, how do you have the conversation with long term clients, that you need to increase your rates or start charging more for a particular project? Because Yeah, long term projects can can sort of drag on and drag on, or maybe it's just something that you know, you're going to be working on monthly for, you know, a year or two years or whatever. And maybe you are realizing that you're putting way in more than you're getting out. And that you need to adjust yourself because otherwise, you know, the whole thing, or the whole entire project could just become a much larger loss for you then like a single one off loss. This is like a repeated loss, you know, so how do you have that conversation? And And my answer this is to just be honest, and to say, Hey, listen, like when we first talked this this project, I was seeing it as this and I understand we made this agreement in the past, however, it's now more apparent that I need this amount of time or this amount of resources to continue or to improve this project. And that I mean, that could mean the end of that relationship. They could tell you know you we said this and that's what I'm going to keep paying you unless you want to break the contract. Like that, but I think you need to be honest and have that discussion and in an honest way with your client, because if you keep your mouth quiet and you take the loss, you're going to take a big loss. - -19 -00:15:11,790 --> 00:16:39,330 -Wes Bos: Yeah, the way I did it with my clients is, I would build like pieces of their website. So like one of my clients, we build, like a newsletter bit. And then we built an online store locator. And then we built a, a gallery of all their posts. And what I would do is every single time that they wanted to take on a new project, I would take in all the what they wanted, I would make sure that the scope is nice and clean, and it was clear both what they weren't getting and what they were not getting. So every time I gave a quote, I would also have a section of what it does not include just to make sure that everybody's on the same page, and there's no misunderstanding there. And then I would just give it a fixed base price for that amount. And, and as I got to be a better developer, I got much faster at it. And it doesn't necessarily matter because it was just a fixed, fixed based, and I charged them based on what that dev work was going to be worth to them. And as I got more expensive, I would just the quotes would just get a little bit more expensive. And it's kind of hard to sort of compare those things to each other because it's like, oh, you charged us 3000 bucks for this piece of the website, and the other one was 5000 bucks. It's kind of hard to compare those things to them. So I think just not charging hourly, is probably the first thing that you can you can do in that use case. - -20 -00:16:39,390 --> 00:16:39,900 -Unknown: Yeah. - -21 -00:16:41,070 --> 00:17:43,290 -Wes Bos: Having clearly defined scope for all of your bids. And if you are charging hourly, like I had, I did have some clients where I was being pulled into their team. And if I was being pulled into their team, then I needed to charge hourly because the scope of the project was just too big. And there's too many moving parts to totally understand. So in that case, I had what was it every every single time that they needed to get more budget approved, they would ask me to rescind my contract. And at that time, I had the ability to increase my rates. So it I think it's just the simplest, look, I'm getting better at this cost of whatever, like the costs of life are going up. I'm charging more. And at a certain point, some of your older clients are going to go away and they're going to find someone else's cheaper and some of the other clients are going to be totally fine with paying that it just just being okay with being able to walk away from people is super important because you don't want to have that like oh, what are they gonna do sort of thing? - -22 -00:17:43,310 --> 00:18:21,110 -Scott Tolinski: Yeah, yeah. Because again, if you're sinking all this time into it, it could just end up being so you could be taking a huge loss on it. You know? So taking a big ol big l big Elvis use. If you listen to like, I don't know, I don't know how much rap music you listen to us. But there's plenty there's like a sample that's like been in like a billion songs. It's just like boo boos I don't know if it's Fat Joe or who does it actually but it's like an A billion songs cuz Big Al rest in peace he he died when he was way too young. That's a little hip hop history lesson for you right there. - -23 -00:18:21,150 --> 00:18:27,590 -Wes Bos: No, I'm I don't know anything about that one. But I was a big Biggie fan when I was a kid. So I'm sure if I heard it, I would. - -24 -00:18:27,900 --> 00:19:21,000 -Scott Tolinski: Yeah, yeah, it's it's all over the place. Alright, let's move on from big ol. Okay, so what is your take on value based pricing, which I feel like we've given several takes on value based pricing. Basically, value based pricing can get you out of a lot of tough situations that you can find yourself in from hourly based situations, right? Like, again, spending way too much time on to get something done, right? Where if you're, you're assessing out what the value is of that to your client, you can potentially save yourself some some trouble down the line, right? Rather than hourly based, right? Which, while you're always billing hourly, you could piss off your client by working too many hours or, you know that that idea of what are you doing for those hours or whatever, it could totally goes out the window, because it's all based around the value of what your client is getting out of this. - -25 -00:19:22,170 --> 00:20:28,890 -Wes Bos: Yeah, I think regardless of where you're at, in your dev career, value based pricing is a super good idea. Because if you're a new Dev and you you charge someone 2000 bucks or something, it's great to know that you can take your time and and not be rushed for something. So if you're still learning a new tech, maybe you take on only your first paid react project, you're feeling a little shaky on react, it's totally fine to to double up your time on that. Take twice as long as you normally think you would. And and learn along the way make sure you do a good job and On the flip side, if you're a sort of a seasoned Dev and or if you've you You've maybe done something similar to this. So one big thing that I used to do is I would, I would build a lot of store locators. And I could just kind of take the code from from one project and move it over to another. And if you charge 5000 bucks for one store locator, and you build that thing from scratch, and then obviously make sure that you retain licensing for this thing. And then you do it for another person, like, does the fact that you have already written the code, make it any less valuable to them? Yeah, - -26 -00:20:29,100 --> 00:20:30,390 -Scott Tolinski: absolutely not at all, - -27 -00:20:30,780 --> 00:21:38,400 -Wes Bos: their clients need to find them. So store locator should be 5000 bucks for them. And it's gonna take you a third of the time that it took you to do it that first time. Or if you you, you shouldn't be punished. Because like, if you're a good developer, and you're super efficient, and you have all this tooling in place to do stuff in your reader really quick. Does that mean you could get paid less? Yeah, no. So I'm a huge proponent of value based pricing. I think that he, your I always did like the hourly calculation after I did a project and it always worked out to being much more than, than I would if I were to charge hourly and a flipside, the clients don't like hourly billing either. Because, like, how often like people, sometimes people come to my house, and they're like working on something and they're like, I charge this much an hour. I'm like, I don't want that. You're just gonna take your sweet time and charge me more money. I don't want that. Just tell me how much it's gonna cost and what I should expect for that money and, and do it as fast or as quick as you can or as slow as you want. But I don't care just do a good job. And I should, I should know exactly what I'm paying and what I'm getting up front. - -28 -00:21:38,670 --> 00:22:03,570 -Scott Tolinski: Yeah, totally. Totally agree. Yeah. I mean, because then yeah, I mean, that that that hourly, like, what are you doing for these hours can build resentment because they feel like you're taking too long on anything that can like sort of sour relationship? Where if the other cost is determined up front, everybody sort of knows exactly what's happening before it even happens. Yeah, so Okay. I think that's a good good answer for that one. Moving right along here. We're I think we're getting kind of close to our time. - -29 -00:22:03,900 --> 00:22:10,260 -Wes Bos: room for one more otherwise, it starts to move to a maxi sewed. Yeah, are many What is it called hasty tree? - -30 -00:22:10,769 --> 00:22:16,440 -Scott Tolinski: Yeah, hasty tree? What? What are these three last questions we got here? Do you have a particular favorite? - -31 -00:22:16,830 --> 00:22:20,970 -Wes Bos: Uh, let's do the one about WordPress and premade. themes. Okay. - -32 -00:22:21,840 --> 00:23:34,890 -Scott Tolinski: Okay, yes. So I'd like to know when it's okay to use tools like WordPress and pre made themes. And when it's bad behavior, should I be using more advanced tools, when I could do a better faster job with WordPress, it feels like cheating. In my opinion, you know, I feel like if the tools, get the job done, get used those tools to get the job done. Now, the caveat I have here is with this pre made themes. If you're using a premade theme that is going to remain unchanged, then I think ethically, you need to make sure your client knows that this is a pre made theme that you're installing and that it's not a unique web project. Now, if you're taking that premade theme and flipping it and modifying it enough to that it's not recognizable, then I think that that that line gets blurred based on how much you're changing the theme. But for me, using tools like WordPress, or pre made themes, or whatever, can save you a ton of time, save you a ton of money, and we'll be all good, but do not lie to your client and say they're getting a unique design, if it is a design that is, you know, not unique to their their business. - -33 -00:23:35,340 --> 00:25:37,860 -Wes Bos: Yeah, that's usually part of the initial conversation with these sort of things where you say to the client, hey, we can sort of hit the ground running, I'm going to start with this existing theme. And you're gonna save yourself. Otherwise, if we did is totally custom, it might be 10 grand, but I'm doing this for three grand because right, we're sort of hitting the ground running with a premade theme. My thoughts on this on sort of the the flip side is, of course, use as many things as you can to make it faster, like what are you gonna write your own JavaScript compiler, right? Yeah. Because like, your client doesn't know I'm using Babel. So I have to write it from scratch. No, of course not. You can you can lean on these tools. And that's sort of the beauty of open source. So on that's like the business Wes answer to that. And the developer West answer to that is that there is especially in this whole WordPress 1500 dollar website area, there is a ton of people doing this kind of stuff. And as websites like Squarespace and Wix as these things are becoming more and more popular. Laura's starting to see is people are we're starting to see a lot of like agencies that do this sort of $5,000 WordPress job. We're starting to see a lot of them close down and it's it's because you can get a better website. When you go go get Squarespace or something like that. And then you can edit you edit it yourself and you're not sort of held at gunpoint by a developer. So you might I never used premade WordPress themes just because I wanted to continue my, my skills as a developer I want it to be Get a grip get to be a really good developer, I did the WordPress thing for a long time. But as I got on in my career, I was doing more like custom WordPress stuff where people needed a custom plugin developed or they needed to integrate it into this other system or they needed like a JavaScript thing built into into the WordPress theme. And I'm glad I did that, because it did get me into much better paying stuff - -34 -00:25:37,890 --> 00:25:39,510 -Scott Tolinski: raises your value significantly. - -35 -00:25:39,570 --> 00:26:34,710 -Wes Bos: It made me a better developer, I wasn't just me. And also I can't believe how frustrating some of these crappy ass WordPress themes are in the box. So they're not crappy. But like every developer wants to do everything themselves, myself included. So I would say it's totally fine. There's nothing wrong with that. But if you're looking to long term in your career, and you're looking to become like a, like a top dollar custom developer and not just like slinging these WordPress $2,000 WordPress theme every day, then I would probably say that it's worth your time to build these things from scratch and, and what ended up happening for myself is I had my own, I had this WordPress theme called WP hit the ground running. And that was my own starter file, and it had Gulp and Babel and yeah, image compression had all that stuff built into it. And I just like it was my own little competitive advantage. Best of all worlds, right? You - -36 -00:26:34,710 --> 00:26:47,100 -Scott Tolinski: have your own tools, you got to build them. You got that experience. And you got a little head start in different ways. Yeah. Again, yeah, best of all worlds. That way, you know, it's gonna be good, because you did it. Or at least, it's going to be familiar to you, you know? - -37 -00:26:47,640 --> 00:27:08,550 -Wes Bos: Mm hmm. I honestly found myself when I would take an existing theme. At first I found I would spend more time undoing a lot of the built in styles and trying to figure out what the heck was going through this developers mind when I was just like, I would just rather start this thing from scratch with my like, CSS reset, and then I'm up and running, trying - -38 -00:27:08,550 --> 00:27:23,430 -Scott Tolinski: to like dance around all of these, you know, cascading styles that who knows, you know, how they were written. And you change one thing, and it changed some other things, because you don't have a handle fully on the CSS. It's giant monolithic file or something. Yeah, I totally agree. - -39 -00:27:24,840 --> 00:27:44,280 -Wes Bos: So hopefully, that that answers your question there. It's definitely not cheating. But long term, definitely. Look at building your own stuff. Word. So that's just under half an hour here. I think we should should wrap it up. That's our minisode. If you have any. We will be calling it a hazy tree to tree. Yeah. - -40 -00:27:45,300 --> 00:28:09,390 -Scott Tolinski: I think like there's so many questions around this freelance stuff. And such a large part of our job is doing this kind of stuff. I think we should do somewhat regular of like a freelance themed hasty treat, in addition to some other hasty treats, obviously, but I think we should answer more of these questions. So I mean, again, if you have any more hasty questions for us regarding freelancing hit us up we can just add them to the list and get to them whenever we do another one of these - -41 -00:28:09,419 --> 00:28:37,800 -Wes Bos: I think just business in general is kind of fun to talk about in hasty treats. Yeah, marketing. And there's this like whole other side to running your own business, especially if you like, want to build a course or something like Scott and I do. There's a lot that can be shared there. So if you got specific questions about business side of things, or anything that you'd like to see a hasty treat on just tweet us that tweet us or put it into the spreadsheet, we have a little a form you can fill out we'll put that in the show notes. - -42 -00:28:37,830 --> 00:28:42,120 -Scott Tolinski: Yes, sick. Cool. This is a nice little hasty trade here. - -43 -00:28:42,180 --> 00:29:25,020 -Wes Bos: Alright, that's it. Thanks so much to Jonathan Stark for sponsoring again, you can go to his site value pricing, a boot camp calm to get his free 60 day boot camp miniseries and also check out his book, hourly billing is nuts. If you're interested, a little bit more of the stuff we talked about. I always like having sponsors that line up perfectly with the topic that we're talking about. Yeah, yeah, we he asked the sponsor like months ago and I was like, Oh, just wait until we have a freelancing one because then you'll get the most bang for your buck in sponsoring this thing. So thanks so much. Check that out. And with that, we'll see in the next one, peace Foose. - -44 -00:29:26,160 --> 00:29:35,190 -Scott Tolinski: Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax37.srt b/transcripts/Syntax37.srt deleted file mode 100644 index e6158ad7e..000000000 --- a/transcripts/Syntax37.srt +++ /dev/null @@ -1,380 +0,0 @@ -1 -00:00:01,290 --> 00:00:02,790 -Announcer: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:07,260 -Unknown: the tastiest web development treats out there, strap yourself in and get - -3 -00:00:07,260 --> 00:00:09,599 -ready to Lynskey and - -4 -00:00:09,599 --> 00:00:10,560 -West boss. - -5 -00:00:10,590 --> 00:01:00,450 -Wes Bos: Hello everybody and welcome to a another episode of syntax today we're gonna be talking all about recording our own recording workflows. What makes a good screencast? What makes a bad screencast? What hardware we use what microphone I get a lot of questions. I'm sure Scott does as well about this stuff. So this is going to be hopefully the the podcast that I point people to when they ask me questions about the nitty gritty details of recording. And I think it's kind of a nice, nice topic. Because even if you're not running a full time business making screen recordings like Scott and I are, it's it's helpful just to have a good setup. If you want to make internal documentation, you want to throw a couple of YouTube videos up. The right setup will go a long way. So with me today is got to linsky Hey, welcome. How you doing today? - -6 -00:01:00,510 --> 00:01:24,540 -Scott Tolinski: I'm doing good. Doing good, beautiful day hanging out ready to get the week going? And yeah, you know, working on other new series as I as I do, I got a new monthly series every single month. So got to get on that grind. And as this topic is recording, I'm going to be doing a lot of recording editing over the next few days, as always, I suppose. How are you doing? How are you doing today? - -7 -00:01:24,569 --> 00:01:43,260 -Wes Bos: I'm good. I'm doing well. I'm going off to Manchester, and a couple days. So I'm just getting bigger, wrapping up my work. And I have a conference that I'm doing a talk over there. So I'm looking forward to that's called up front cough. I know I'm gonna be meeting a lot of syntax listeners there. So shout out to you. - -8 -00:01:43,920 --> 00:01:45,390 -Scott Tolinski: Nice, super cool. Yeah, - -9 -00:01:45,420 --> 00:02:16,530 -Wes Bos: this episode is sponsored by Freshbooks and Netlify. We'll talk a little bit more about both of those companies partway through the show. So why don't we kick it off. And let's start off and just talk about our hardware. So before our beautiful buttery voices even get into our computers, there is some hardware that actually needs to happen. And Scott gently touched on this a couple of weeks ago, but let's get into the the nitty gritty details of how it works. So you want to want to kick us off first what hardware use - -10 -00:02:16,560 --> 00:03:55,470 -Scott Tolinski: Yeah, so I actually I've been I just got a new microphone, which is the electro voice r e 20. It's a super famous radio voice, radio voice radio microphone that you often hear and things like NPR before that I was using a KSM 32 made by Sure. And before that I was using a blue Bluebird but throughout all of this I've had a decent mic. I think that was a really important thing for my setup. to having a nice mic that works well for my voice. I got a little bit of a bass your voice so sometimes having a mic that caters to that is good for me. I also use a Focusrite Scarlett is that the two eye to eye to eye it's we have the same one, so two eye to eye two as my interface. So basically, the microphone goes into the Scarlet. Oh, actually, I'm sorry, it goes into my microphone goes into my preamp which is my 286 s which takes care of compressing and DSA removed it has a noise gate built in. But mostly this electro voice mic just needs some extra gain to it. So really pumped up the game so that when it comes into my audio interface, that it's at a respectable level so that so out of the 286 to the Scarlet and from the Scarlet into my computer. I also use for a mic boom arm which you frequently see in my videos. It's just can m mic arm, it's really fancy. It has the XLR cable that runs through the the piping of the metal so you don't have any cables sticking out anywhere. So the cable just is a high super high quality XLR that pops out at both ends and plugs right into my preamp. - -11 -00:03:56,130 --> 00:04:06,090 -Wes Bos: Pretty sweet. And this is actually something I asked you about a couple of weeks ago. Can you like run through? What's the difference between what is it a passive mic and - -12 -00:04:06,150 --> 00:04:10,800 -Scott Tolinski: what dynamic bike dynamic dynamic mic versus a condenser microphone? - -13 -00:04:10,800 --> 00:04:11,550 -Wes Bos: Okay, - -14 -00:04:11,550 --> 00:05:06,990 -Scott Tolinski: so a dynamic microphone. Well, it has to do with how the magnets are inside of the microphone and somebody who who knows better than me is going to correct me on this even though I did learn this in school once a dynamic array. A condenser microphone needs an additional 48 volts of power also known as phantom power, that power travels through the XLR cable and what that power does is it if I'm totally butchering this, please correct me. It's it powers the the diaphragm in the microphone to actively pick up sound by moving the magnets. I'm pretty sure it's moving the magnets. I'm not positive about that, but it powers uses the 48 volts to To pick up the signal in a different way from a dynamic microphone, which are essentially just like talking into the diaphragm itself. - -15 -00:05:07,699 --> 00:05:28,110 -Wes Bos: Awesome. Yeah, that's, that's something that I, when I was shopping for my I kind of looked into all those different ones. And I don't use one with phantom power. So make sure that I have that turned off. And then there's also like, kind of like side fire microphones and front fire microphones. And both, I think both of us are using what front fire or that means you talk right into the top of it. - -16 -00:05:28,139 --> 00:06:19,259 -Scott Tolinski: Yeah, so the so like the distinction, there would be like a, an omni directional, which is a microphone that picks up the signal equally from every direction, a directional microphone, which is you have to talk into it at a specific direction, then there's a cardioid pattern that looks sort of like a heart, where it gets everything from the front, the sides and a little bit less than the back. And then there's a super cardioid, which is like just a more extreme version of that same sort of shape. So there's several different polar patterns for microphone pickups. So for what we're doing, having a directional is probably your best, a directional is probably best, because you're talking into it, you don't want the sound that's whatever your computer or the noise behind it being picked up. Yeah, and with a dynamic microphone, like we have, like we're both using is going to be better for eliminating that noise as well. - -17 -00:06:20,130 --> 00:10:15,960 -Wes Bos: Wicked. Alright, so let me go into my hardware. So my microphone is a Heil pr 40. And I picked that up, mostly because I had been listening to Leo Laporte for probably like 10 years. And that's sort of the one that he goes for. And I did a bunch of research and that one sounds, I think it sounds best with my voice. And I used to have another one, it used to be a USB microphone, and I don't think any of my tutorial, maybe my Flexbox series was recorded with the Audio Technica 80 2020, which is a USB mic. And that's like 100 bucks. And if you're just looking to get up and running, that's a great one to just pick up before you're getting too serious about it. And then I've got a Heil, boom arm that I sort of have on my desk. It's pretty good, I find that it wiggles free maybe every couple months. And there is a there is a little like desk mount that you can like drill into your desk and just like put it like a hole in your desk, which I'm looking at doing because I've already once wiggled it free and drop odo and it Luckily, these microphones are like, like, I always find that like cameras and microphones are like really durable. So it didn't do anything for the microphone. But I did snap my or does this though I have a pop filter, specifically made for the highlight. It's like a nice small pop filter that just fits right over it. And it's great because if you're saying prop types all the time, you're you're gonna be popping your piece and I specifically had to become a bit more of an audio file because for me, it sounded fine. And then you would just like people's ears were bleeding when you would say prop types and and things like that. So to get a little bit more into the audio, so comes out of microphone through the thing I have it sitting in a What's this called? What's this called shock, shock mount and that will stop any generally like when you get like weird noises in your thing. It's not just like outside noise, it's vibration. That's that's what bugs people were vibrations, especially from people's keyboard, when you're typing the vibrations will make its way back into the microphone. So it's on a shock mount which is totally suspends it on just kind of like hair elastic material, goes down the Heil, and then into my my preprocessor, which is a 286 s and that, essentially we talked a little bit more about this, but this that makes sure that the audio going into my computer is as clean as possible. It takes out any background noise if I have a truck roll by sometimes I like to have the windows open when I'm recording in the summer, or if my dogs walking around and clicking as nails that those outside or my chair squeaks or something like that those outside noises don't make it into my actual recording. Which is really, really important to me because I was spending way too much time fussing with my audio after the fact and I just wanted to like just like record and at first the sound good. And that's exactly why I have this thing it does it takes the essence out of your voice it does some enhancing. It lowers my voice. I don't have the lowest voice in the biz now like Mr. szalinski over here. So I have it, boom defying my voice a little bit. I know there's a couple other things I I had an audio engineer come over and he sort of tuned it to sound good. So it goes into that and I actually have what's called an equalizer as well, which will. What that's used is for, for filling out the sort of the lower parts of my voice So it's a nice, very consistent radio voice. I don't have the equalizer hooked up yet, I need to get the my buddy over to tune it to mix. I tried turning the knobs, but I just can't I need somebody who actually has an ear for this as actual audio engineer. Yeah, - -18 -00:10:16,080 --> 00:10:42,690 -Scott Tolinski: you need you need that. It's amazing how much that ear makes a big difference. I because I went to school for this stuff. And I wouldn't necessarily say I have the year I have a little bit of training. And I know what all the knobs do. I know what Yang is for but like, one of my best friends is a audio engineer by living. And he can look at any of my stuff and tell me in like two seconds, what it needs to be tweaked or whatever. Because you know, he just has that year? - -19 -00:10:43,020 --> 00:11:37,110 -Wes Bos: Yeah, yeah, that's when my buddy came over. And he's like, your gait is way too high, which was it sometimes if you hear people in the the trailing off of their voice gets cut too abruptly, then then you have your gate way too high and things like that. So he did a good job with that. And then so it comes out of that DB x 286. It's supposed to go into the equalizer, it's just not yet. And then it goes into the scarlet, the focus right to it, which is that just takes the actual XLR signal, and then turns it into a USB interface. And now that lets me both pipe it into my computer, into my recording programs or into Skype or whatever. And then also, I have like, a set of audio monitors on it, which it will allow you to like hear yourself as if I was on the radio a couple a couple years ago, and it was weird to me to hear yourself talking through your headphones. - -20 -00:11:37,140 --> 00:11:37,650 -Unknown: Yeah, I - -21 -00:11:37,650 --> 00:11:48,330 -Scott Tolinski: don't have my monitor on. No, I don't. either. I do the one ear ear off the headphones to hear myself better rather than a monitor or whatever. Yeah, - -22 -00:11:48,360 --> 00:12:27,510 -Wes Bos: yeah, it's but it's kind of kind of nice to have I used to have turned it on, but not anymore. And then I think that is it. That's all the all the hardware that I have. It's pretty expensive. Me as you're talking about like, like, what do you got invested into this? Yeah, because at first like I just had $100 Audio Technica mic, and that worked pretty well. And I would recommend that before you spend any time but after I released my rack for beginners, I was like, I want to move faster at this. So I spent, oh, I would say all this gear is probably 1500 bucks us. Yeah, which is not cheap, but worth it. - -23 -00:12:27,630 --> 00:15:16,140 -Scott Tolinski: It depends on what you include in that because I have my studio monitors are maybe like 700 $800. For the speakers, the studio monitor speakers, that the focus right eye to eye is the most reasonable item out there. Before I've had multiple other digital audio interfaces. Before I was using something called an inbox made by Digi design, which is like something you needed to use the application Pro Tools, which is why I got it. Pro Tools is really like the best in the biz audio software for recording. But you know, I just haven't been using Pro Tools and that that rig no longer works with Mac OS, they just didn't keep up the drivers. And I spent like $600 on it and it's essentially worthless now. So then after that I got an Apogee one, which is a kind of frustrating device. It's a it's a really brilliant audio interface. It has way better preamps than this focus, right does. But it was Mac OS only. So you couldn't use it with anything else. And it just sort of died on me one day I was getting weird hissing in my audio recording and you can hear him and some of my like a few select videos. There's just like weird hissing sound that came from the audio interface. So I had to go plop down and get a new one. And obviously after I had to sort of expensive ones fail on me in different ways. I decided to just go kind of cheap with my preamps here or with my focus, right? And I was like what this thing's like 120 bucks or something. It's not very much but the Scarlet was definitely worth the money there. And you know spending money on the 286 s like I was doing most of my stuff in post and didn't have a problem with that but I needed to buy a preamp anyways for this bike. And if you're spending an extra 50 bucks to get a preamp that includes a compressor and all this stuff instead of just a preamp that I thought that was a pretty good price for me. I've never gotten skimpy on the microphone. All of my mics have been a little costly. I think microphone is a really important thing if you're going to be doing this professionally. Yeah, yeah. So So I've never gone never gone too skimpy on the mics. So yeah, so I mean, you know, we both are doing this professionally. So we're obviously going to spend a lot of money on it. And in my In your opinion, like what are the the most essential because for me, I think the essential is if you're going to be doing this at a small time scale or you just want to try it out. It would just be a USB microphone and a little desk mic arm like that's pretty much it right you don't need any of this stuff. You can fix your audio in post if you need to. If you're using a USB microphone, but like that Don't get a cheap USB microphone, maybe like a Blue Snowball or something like that sort of USB microphone that's made for this kind of stuff. But if you have just that you should be able to at least accomplish or get better audio than, you know, 90% of other people doing this kind of thing. - -24 -00:15:16,590 --> 00:16:23,580 -Wes Bos: And there's a lot more you can do with your actual environment, versus actual equipment. Because if you have a crappy environment that you're recording in, it's not getting and no matter what microphone you have, it's not going to sound any good. So I always tell people, and what I did before I had even like a boom microphone, I just had the 80 2020 comes with this little tripod stand, but just put a T shirt underneath your keyboard, and that will absorb both any of the actual typing noises that are like, sometimes you listen to screencast it's like, boop, boop, boop, boop, boop, boop, boop, boop boop, when they and that's because the the vibrations of you typing is going straight into your microphone. So putting a T shirt underneath your keyboard is going to absorb your typing vibrations, as well as, take any echo that you're possibly hitting off your desk or your environment. And there's other stuff you can do. Like you can record in a if you like, a lot of times people have like a walk in closet, and they'll record in there. And that sounds amazing, because you just have shirts that are absorbing all of the environmental sounds. So there's a lot of little tricks you can do to make it sound decent with a cheap, some cheap equipment. - -25 -00:16:23,610 --> 00:16:30,120 -Scott Tolinski: Yeah, yeah, you certainly are not required to have a bunch of expensive stuff. Yeah. - -26 -00:16:30,390 --> 00:16:43,590 -Wes Bos: So once the actual audio is coming in hot off the microphone. Let's talk about actually both recording our screen as well as well as recording the audio. What is what does it look like for you there? Yeah, so - -27 -00:16:43,590 --> 00:21:11,600 -Scott Tolinski: I things have changed for me considerably because of new computer, a new setup, all sorts of different stuff. But right now what I'm doing is, I am recording off of my laptop, even though I'm usually hooked up to an external monitor. So my external monitor will contain all of my like notes, or code or documentation or example stuff I want to be looking at while I'm recording. So I'll have to pull that up on an ultra wide, so I could fit a whole bunch of windows on that. Since the screen dimensions of the new MacBook Pro is not 16 by nine aka YouTube's aspect ratio, I use an application called Devi to set my windows to a perfect 16 by nine that takes up the entire width of my computer. So instead of instead of like attempting to record a pixel dimension, right, I'm not recording a specific resolution, I'm more or less recording at an aspect ratio, the widest it will get on my computer. So as long as it's 16 by nine, I'm recording double the pixels using an application called I show you HD. It's recording double the pixels. So basically at 16 by nine double the pixels, I'm actually getting a 4k output resolution even though the actual pixel dimensions are sort of something unconventional. When I drop it into Final Cut Pro it actually converts it to a 4k or whatever I want. Anyway, so right now I'm actually working in a 4k pixel dimension, I'm not quite positive what it is, but it's at a 16 by nine 4k. So uh, let's that's pretty much it. So I basically I use Divi, to get everything in the right spot I use, I show you to select that 16 by nine area I hit record. And the actual recording goes like this, I typically have a either example code, right, the ending of which may or may not be determined. And I have this task I want to accomplish. And I don't use a script. Because if I did a script, I would mess it up 100 out of 100 times, right, it would be bad. And I talked through my code as I write it. I mean, chances are the stuff that I'm doing in these videos is something that I've done 100 times before. So being able to talk about my code while I'm typing. It isn't necessarily that difficult to me not to mention, I've had a lot of practice, I've recorded over 2007 videos doing this stuff. So for me, it's all improv everything except for necessarily the code is improv right, I'm just coming up with what I'm saying on the spot because I know how to describe it. I can't work off of a script, I do my recordings, I stopped the recording, and then I dropped everything into Final Cut Pro. Now I have like a really specific editing workflow that has worked really well for me. And I don't I really like Final Cut Pro specifically because of this, this magnet or magic timeline or whatever the heck this new feature was they introduced turns out most people hate this feature. But if you're recording a one track video, as in something that doesn't have multiple angles, it can be extremely handy because what it does is it zooms up the end of the clip whenever you make a cut, lurk or it doesn't allow there to be any empty space. So in a lot of different video editors like premiere, it allows you to be empty space in your cut. and stuff like that. And then you have this empty space, you have to delete, you have to move stuff over, this sort of just shoots everything over, and sort of like all falls to the earliest second. So I have this keyboard shortcut setup with z, x and c, where c is the cut, it will just make a cut in the video, Z is to edit up to the where the playhead is. And x is to edit back to where the playhead is. And I keep my three fingers on those three keys and I use my mouse to move the playhead because there's like our playhead, skimming and Final Cut Pro. And I basically play it like a piano, I just moved my mouse see exits the exit, and I'm just tapping, tapping tapping and I just look at the audio more so than listening to it, I can recognize patterns in the audio, I recognize, when I say the same thing in my audio just by looking at it in the way I do things is that the second take of what I do is always the right take. So if I see that I said something twice, I'll just cut out the first one and then in not do anything about it other than that, and then I'll listen to it all that a couple times and make sure there's no mess up. So I didn't miss anything Chop Chop, chop, push it up the YouTube directly from Final Cut Pro. - -28 -00:21:12,860 --> 00:22:55,530 -Wes Bos: Wow, that's I always like hearing how other people do it and all with your mind. But it's I'm always looking to learn some new tips from from other people. And actually, when Scott and I first started our our mastermind group a couple years ago, that was one of the first things that we talked about is our recording workflow. So my recording workflow is quite a bit different. So the way it works is I have three monitors going, I've got a 4k monitor right in front of me, I have a 22 inch on a on its side. So I guess in what does that called not landscape portrait mode. And then I've got my laptop to my right hand time. So on the left hand side, what I'll do is, I'll have notes open about what I want to get across. So I don't have a script or anything like that, I just sort of have like bullet points of things that I need to touch on or maybe some examples that I want to touch on in that. And then I'll also have either the finished code example up or if it's sort of like a partway I'll just kind of I'll do like a markdown file with the code example in that it's just so I can glance over and see exactly what it's going to be. So it's on my left hand side, on my right hand side I'll have it really depends on what kind of what I'm working on sometimes is empty, sometimes I'll have it, have my editing software open on there. And then on my main 4k display, what I have is I've created this sort of overlay that is I use this application called Uber layer. And I've created in sketch the sort of frame that is a 16 916 10. What is it? I don't even know what the what it is. But essentially, I'm trying to record a 1920 by 1080. Is that what aspect ratio is 16? by nine? Right? Yeah, - -29 -00:22:56,250 --> 00:22:58,320 -Scott Tolinski: whatever. That's standard one by nine. Yeah, - -30 -00:22:58,710 --> 00:25:15,270 -Wes Bos: yeah, so it fits perfectly into that. And I have this sort of overlay on my screen. And what it is, is it's a frame, and the outside of the frame is sort of like grayed out. So and then inside the frame, I put all of my windows, and then on the actual frame itself, I have all these notches for common like window sizes that I like to use. So I'm not just halfway and a quarter of the way and a third of the way and and along the height. And then I know that I can always like size my windows to these different notch sizes. So that if I have to go back and re record something, I can always size it up. So it looks pretty similar in that nice. Um, another reason why I like to use that. So I don't record my entire screen, I do record the entire screen, but I always have to trim it down to that 16 nine, I don't record in 10 at 1920 by 10 a record double that. And then I always just just bring it down, I really like that because if I ever need to to zoom in on one of my things, then I have those extra pixels available. And the video is just super crisp, it always looks really, really good. So I'm pretty happy with that. Another reason why I don't like recording my entire screen is because I we're really limited on code space. And when you're recording a video, there's sometimes when your lines get too long, it gets a little bit jumbled. And I if I can, I like to have what we're building and what we're coding open at the exact same time. So I like to get rid of as much extra stuff as I possibly can. So I make sure that things like browser tabs and things like the visual Visual Studio codes, the top bar and the bottom bar, all of that stuff is extra to me. So I make sure that that's off screen. And I only record the actual code and the benefit of that is I look back at some of my old screencasts and it hurts me because as soon as OSX updates what the Minimize buttons look like or they update a gradient or something like that, then your videos start to feel old. Yeah. And even if the content is good, then it just starts to, it just feels like oh, this is probably out of date. And it frustrates me. - -31 -00:25:15,330 --> 00:25:16,110 -Scott Tolinski: Yeah, definitely. - -32 -00:25:18,060 --> 00:26:35,490 -Wes Bos: So that's my recording. And I use a application called ScreenFlow to actually record my entire screen. So I hit record on ScreenFlow. That will pipe in my microphone into it one like annoying thing of screen, I got some gripes of ScreenFlow it's not the best thing. People always ask me like, Why don't use this, why don't use that. And I'm at a point now where I'm so fast at recording in ScreenFlow. And it doesn't annoy me enough to spend the time learning something else. Because I'm trying to run a business here. I'm trying to like teach people stuff at the end of the day. And if you get romantic about the tools and all of that stuff, then it starts to cut into your actual, like, there's this whole working in your business versus on your business. And that's just not something that I'm interested in changing right now. But the annoying thing is that if you have a microphone like I have, it will only record a left or a right channel. And you always need to like mix that back into a mono channel. And I tried like getting a hardware splitter and splitting the cable into two and then piping it into both sides of my mixer. And that didn't work because it's smart enough to maintain channels. So I use an app called What's it called? - -33 -00:26:35,490 --> 00:26:36,360 -Scott Tolinski: Sound flower - -34 -00:26:36,479 --> 00:26:43,620 -Wes Bos: sat? No, I tried sound flower, but that one that they always recommend? Yeah, - -35 -00:26:43,679 --> 00:26:51,720 -Scott Tolinski: I know I show you just allows you to choose your channel for your audio. So I just yeah, Mo use the left channel and make it moto. - -36 -00:26:52,199 --> 00:27:42,990 -Wes Bos: Most decent applications do most of the call that I saw. But ScreenFlow doesn't and then they they removed ScreenFlow was like regressing in all of their features. There's all every time there is a new version they like I think what they're doing is they're becoming like a Slideshow Maker for people who have like weddings, because every single time that they release a new feature, they talk about how it's like easier for people who make slideshows, I'm like, I'm trying to record my screen, like, for example, by default. Now, when you add audio and video, you record audio and video and you try to add that to your thing, it will put the audio after the video. Like what like shouldn't audio be overlapped with the video because it happened at the same time. What Yeah, yeah, they changed it because of people making slideshows. So she's what's the app that I use, called, I always forget what's called - -37 -00:27:43,350 --> 00:27:48,780 -Scott Tolinski: low on one sec, that audio hijack isn't made by that company, because it's but audio back. - -38 -00:27:49,170 --> 00:28:29,490 -Wes Bos: So the app I use is called loopback. And loopback allows you to do is to take your input sources. So whether it's your your microphone, or you can also take input from a specific app. So some when we did the soundboard, I piped it in from Google Chrome. And then you can mix that into left and right channel. So I have basically the left channel mapping to the left and the right channel of my virtual interface. And then that gets piped right in, I don't have to worry about mixing it into mono after the fact, which is really important to me, because I've posted so many YouTube videos by accident, where the audio is only in the left ear, and then you get every smartass in the world commenting, - -39 -00:28:30,360 --> 00:30:45,660 -Scott Tolinski: yeah, you gotta have, you gotta have that, you got to have that. So talking about smooth setups, let's talk about a hosting platform that makes setup absolutely painless. And this is going to be one of our sponsors, Netlify. Now Netlify basically takes out all of the difficult things in working with static sites or front end code, and really just lets you build your code and deploy it in these modern tools like we're used to. So for instance, if you had a static site that was built in Gatsby or something like that, and there's all sorts of these things, such as rebuilding the static website, or getting an SSL setup that are just more pain than they're worth, or even having a contact form, and that Netlify takes care of all of that stuff for you in a way that just makes working extremely effortless. You push up to GitHub, your site is automatically rebuilt and deployed, they have easy to use web hooks. So you can trigger a rebuild, literally add anything that you want to send you a web hook, you can easily quickly add an SSL or even like a contact form is something that's so difficult, typically on just standard front end code without having any server side component. What are you going to use a serverless function, you're going to have a script somewhere that's running this for you are going to use some other form thing. Well, well Netlify makes it extremely easy. You simply add some attributes to your form on your static site. It's some it's like a normal contact form and you can choose what you want. to do with those emails, whether an email is getting emailed directly to you, or if it's just posting in a Slack channel, or if it's just saving that form submission on the Netlify back end. So check out Netlify netlify.com, forward slash syntax and see what this hosting platform has every buddy buzzing. Now also, they are hiring. So if you are a developer, and you're looking for a new role, whether that's a remote or local, headed to netlify.com, forward slash careers, and check out what kind of jobs they have available, because they are hiring a lot of excellent people, and they could be hiring you. So check it out, again, netlify.com, forward slash syntek, or netlify.com, forward slash careers. Alright, and thank you for Netlify for sponsoring. - -40 -00:30:47,580 --> 00:31:43,260 -Wes Bos: Awesome, so my last couple of points that I have, there is a record right into ScreenFlow. When I screw up, I'll either just to sort of pause and do a little click, and we'll talk about screwing up in a second. And then when I actually do need like a break, or there, I do screw something up, I'll just pause. And then right then in there, usually what I'll do is I'll just trim the video so far to the point. So I sort of edit as I go. And the benefit to me of doing that is that I'm in the right headspace. And if I feel like I screwed up, or I could explain something better in the code, I'm in the exact spot where I need to be and I can always roll it back to that specific spot. So when I'm done a video, it's pretty much edited and trimmed up and ready to go. Only later I'll come back in, if I have any, like overlays that need to happen, or, or any extra stuff that needs to go over top of the video at it. So you're sort of editing while you're - -41 -00:31:43,260 --> 00:31:45,390 -Scott Tolinski: recording. It's like, yeah, back and forth. - -42 -00:31:45,930 --> 00:32:22,380 -Wes Bos: Yeah, sort of like it's pretty quick, because it's I'm pretty quick with the keyboard shortcuts in when I screw something up. And then I'll make sure that it transitions and flows nicely into one another. And, and that way, when I'm when I'm done the video, it's pretty much ready for export, other than just putting in the intro and the outro onto the video. And I don't need to come back into it because I used to record after the fact. And then I realized that I had screwed up. But it's very hard for me to get back into the code and the exact setup and get the app to the point where I would exactly was unless you have like, like get hashes that you can revert to for each video. Hmm. - -43 -00:32:22,770 --> 00:34:36,330 -Scott Tolinski: See, I think I just for me, it's all about knowing when I messed up like in the moment, like I'll, I'll be unhappy with a take. And I'll redo the take almost immediately. So I guess that leads us into like messing up because people hear these polished or sometimes maybe less polished recordings or whatever. And they want to know how they get that good like how I think people assume you have to record a lot of amount of time. So if my videos are like 13 minutes long or something, I'm probably not recording more than 15 minutes total. I'm not cutting out very much unless there's been some sort of colossal mistake. For me, what I do is I pay attention constantly. And if I'm not happy with something I'm saying, or if I miss type of code, I'll go back and do it immediately. Again, I mentioned before that the second take is always the best take for me. So I'll know that if or the second or third take if I if it gets to that level. I know if I say something more than once then I never even have to listen to the first time I say it, I can just cut it out because I know that I must have messed it up at some point. So for me that that's what I do with mess ups. I used to have this well alert system for myself. And this is maybe one of the more embarrassing stories of the history of me recording. I used to have this alert system and I thought about doing this again, maybe with like an app that will do like a buzzer or something like that. The whole idea for me in this at this point in my my recording time was that I had I had accidentally This was way back, way, way, way, way back. I had accident left and some mess ups and i was growing concerned that I was missing some mess ups in my editing, or my listening to the relisting. So I said it, it would be really great if I had some sort of visual indicator in the audio form that let me know that this is where mess up took place. So I started making what I could only describe as an extremely obnoxious noise into the microphone. that would that would pique the mic. And I I guess I just did this for fun. Or because I was the only one listening this but the I could only describe it as a squawk. It's it's a really lovely sound. And I just would essentially scream it into the mic so that I would keep the mic, - -44 -00:34:36,330 --> 00:34:44,820 -Wes Bos: right. And you can see it in your waveforms. It's the similar idea to the clap at the start to sync up audio and video. Right, exactly. So - -45 -00:34:44,820 --> 00:36:11,250 -Scott Tolinski: I would be okay, there's a squawk, I'll cut here, whatever. And then that way I could speed up and I would never miss anything because obviously who's going to miss that? Well, I did a series for a publisher, a recording series for a publisher packt Publishing like is a full on Magento tutorial series, which is super duper, a long recording process and it was very involved. And so I submit all of my videos to the editor and of course you have an editor who has to whose their job to go through and watch all of these videos to make sure everything you're saying is technically accurate, a good or whatever. And so this poor editor is probably sitting there with their headphones on listening to this thing. And then they're hearing me talk about Magento and then hearing me scream into their ears. Because I, I get a message on the, the my notes and it's like, everything's great, except for at 215 in this video, the author screams into the microphone. Oh, it's just like, oh, oh, no. And I'm so glad I'm never gonna have to meet this editor in person. I don't know who they are. Because I would just be so embarrassed about that. That that was probably it probably like it was probably like, cartoonish it probably like knocked their headphones off. They probably just like shot into the air and knocked them out of the carpet because it was a really, really bad sound. - -46 -00:36:11,730 --> 00:37:02,130 -Wes Bos: That's hilarious. Yeah, when I when I screw up I've only ever left one in. And luckily, somebody pretty cool because I dropped the F bomb. Why? Because I yeah, I had screwed up and, like, explanation of a specific topic. And I was like, damn it, like, I get it together. And then so I just like started again. And usually I'll cut those out. And but when I'm when I'm listening back to it and cutting and chopping pieces in and out. I'll listen to it at two X and ay. Ay, ay, it sounds like Ah, you dropped an F bomb, like 234 and video 70. I was like, shoot. So I luckily, luckily, they were cool about it. And they were one of the first people to listen to it. So I cut it out again. And re uploaded it which I was happy about. - -47 -00:37:02,250 --> 00:37:20,130 -Scott Tolinski: Yeah, I'll definitely have like a conversation with myself. Let's just be like, Scott, when you're editing this, go back to two minutes. Because you're an idiot. And you made these mistakes. Oh, like a little a little conversation with myself. But then I'll be listening to and I'll be like, Oh, this doesn't sound like it's about programming. - -48 -00:37:22,350 --> 00:38:03,210 -Wes Bos: What about a goofing up, I specifically leave a lot of my own syntax errors and and other errors and mistakes Africa to export something, I always leave those in because people tell me that they they actually really enjoy seeing me do that. And also what I don't know what the issue is. I'll say okay, let's try to debug this together. And if I can debug it in less than a minute or so, it's not going to like I don't necessarily pause the video, I just go through it. And I sort of explained my own thought process behind the debugging. And people say that they absolutely love that. Because that's that's such an odd skill, like how do you teach somebody? What is the thought process to debugging something like this? - -49 -00:38:03,270 --> 00:38:55,620 -Scott Tolinski: Yeah, I do the same thing. And like there, there are aspects of which like if you're typing something wrong, and it's clearly like a typo, I'm gonna go back and do it. But well, maybe not so much. I guess it depends. But I usually leave that stuff in definitely as a learning opportunity. But chances are my outlook on this is if I'm doing something that I've done 100 times before. Yeah, and I mess it up on camera, that means that someone is likely to mess that up for various reasons in their their code as well. I mean, it's just a very real possibility that these are the things and like you mentioned, it gives you a good opportunity to get into that debug mindset. Now that said, If I'm running to an issue, like, I don't know, if you've ever had this, where you're just having an off day, you go to record something, you'd be like, we'll save this. And now let's tap back. Oh, it's broken. Okay, let's find out why. Okay, you fix it. Oh, let's see if this was should be all cut. Nope, it's broken again. Like, - -50 -00:38:55,620 --> 00:38:57,920 -Wes Bos: there's just a crack. Yeah, - -51 -00:38:57,960 --> 00:39:27,600 -Scott Tolinski: I loop. And I'm just like, you know what, I'm just gonna toss this out. I'm gonna start over, like not getting anybody, you know, any value here, because I'm messing up so much. And that can happen. I mean, you're talking and recording and coding at the same time. So there's definitely a lot going on. And it can be easy to mess up. But I do agree, I think each time you mess up on camera is a learning opportunity for your audience to really see inside the eyes of your standard debugging situation, or some of these issues that can happen. - -52 -00:39:29,420 --> 00:39:48,960 -Wes Bos: Absolutely, I totally agree on that. That's I want to someday make a debugging course. You're just not sure. Like what that would look like, right? I think debugging is maybe just better in in the moment when there's an actual error. And you can you can read the syntax error and follow the stack trace back for sure. - -53 -00:39:49,080 --> 00:39:52,460 -Scott Tolinski: Yeah, even just teaching those skills about reading the error messages. - -54 -00:39:52,589 --> 00:40:42,600 -Wes Bos: Alright, let's talk a little bit about bad screen recording. So we've all seen our fair share of guys on you. YouTube with Windows XP, unregistered hyper cam yeah and no notepad open. There's a lot of bad screencasts out there. And I've certainly learned a lot over the years of doing this. And there's things that that drive people nuts. And there's things that make just for like a boring recording where people turn it off, because it's not moving fast enough. I think pace is a very important thing that I've learned over the years. Because if you go too quick, you frustrate people. But if you go too slow, that also frustrates people. So knowing where to speed things up, and knowing where to to slow things down is really important. So what are your senior recording? pet peeves? Yeah, - -55 -00:40:42,650 --> 00:42:12,980 -Scott Tolinski: so this year, these are things before I started level up tutorials. And even now, I watched a ton of video tutorials. And that was one of the things that I think really helped my channel become popular was the fact that I had learned a lot of lessons before I started. So if I see a lot of code channels that pop up here or there, they don't get any traction, and then they go away. If you would like to do some, you know, screen recording and not have your channel be one of those, you know, those casualties here. I think some of the biggest things is one, a bad microphone that we mentioned, you can get a cheap USB, like a Blue Snowball, or the one that you had West, but just a decent USB microphone, that's not like the one that came with your Windows computer back in the day, you know, that is going to go a long way. Having a nice microphone I there was nothing that will turn me off from a video quicker than having an awful or get this no microphone, you know, it's not going to work typing your script onto the screen and Notepad. Instead of talking into the microphone, you're typing. And you're giving those instructions that way, that's not necessarily helping a lot of people out if you are not talking and you are typing on the screen, I will close that out in a second. Next small text we are working on, you know, some people might be watching this and a smaller resolution. Some people might be watching this at half their screen while their codes open, you need - -56 -00:42:12,980 --> 00:42:14,940 -Wes Bos: to have it open on an iPad or something like yeah, - -57 -00:42:14,940 --> 00:42:41,040 -Scott Tolinski: you need to have the text, especially the code available to see. Or if you're in the debugger or something like that. And I'll often call that out if if I noticed that the screen zoomed out too much. I'll zoom it in right then and there. Maybe zoom it out a second later, just so people can see. But having small text, if you don't want to zoom up the interface, you can always just change the font size and things like VS code, just change up the font size. That way you don't get like extra big margins and stuff on the entire. - -58 -00:42:41,340 --> 00:43:17,280 -Wes Bos: That's one of my pet peeves. I actually, I was at a conference a couple months ago, and somebody was doing like a live code demo. And they had bumped their font size all the way up. But that also bumps everything else up. And like between the tabs and the status bar, it was like half the screen was taken up by the Chrome. So one little tip is that you can zoom your entire editor out so that the tabs in the sidebar are tiny. And then you can bump just the font size up in your settings file. And that will make sure that you have like almost all of your screen real estate dedicated to actual code rather than things like browser, Chrome and whatnot. Yeah, - -59 -00:43:17,340 --> 00:45:09,210 -Scott Tolinski: I get this, I do so many screen recordings that my standard VS code, font size is 36 pixels is my standard setup. And then whenever I'm actually coding like a project, like level up tutorials, comm or freelance work or whatever, I actually change that in my workspace settings for that project. So I just leave my text size at a 36 like constantly a VS code, which is kind of a pain whenever you're like create a new project. But luckily, I do way more recordings than I do new projects. So it's, you know, good for me to do that. Now another thing that bugs me is not lingering on shots of the code after you've talked about something. So you could say, now I'm going to type this and this and this and then you tab quickly back to a window, or you tab over to your eye term or, or you move off of that screen, and your user is going to have to then rewind back, but not only that, they're gonna have to pause it just the right moment right in between the time that you've finished typing. And when you've you know, because people want to see the code or if you don't have the code available on a GitHub or something like that to reference not lingering on code shots. So if you don't need to be off of the code, I usually leave the code up for a couple seconds, not only just to give people time to pause if they want to pause it but just to let that sink in just a little bit more. And yeah, yeah. Oh, here's another one. Here's an issue that I had. Early on in my recording, I wouldn't get to the content right away. Like if the video topic was how to install WordPress. I might not be talking about how to install WordPress for two minutes or so. And then it receives a hail of downvotes and then people are just like, jumped to minutes to skip all the crap. You know, it's like, oh, okay, like there's a lesson learned. Yeah, but yeah, don't do that. Because Yeah, you'll get a bunch of bad comments. - -60 -00:45:09,540 --> 00:45:21,060 -Wes Bos: Yeah, what's up everybody How you doing? This is TJ Yanni D going on, make sure you Patreon like and subscribe and thanks so much for checking in like six minutes in, you're like, Okay, thanks. I just need to know how to install this driver. - -61 -00:45:21,120 --> 00:45:33,540 -Scott Tolinski: I know I was so short, sweet. And it's usually Hey, what's up? This is Scott, in this video. We're doing this. Let's go. Here's the intro into the example right away. If you if you take way too long, people are gonna be grumpy. - -62 -00:45:34,200 --> 00:48:16,410 -Wes Bos: Yeah. Oh, totally. So some other bad screen recordings, sniffling and creaky chair. It's kind of an important one. Just people. It drives people nuts, mouth noise when Oh, yeah. make noises? Oh, that's one thing that a lot of microphones do. They're just way too sensitive. So you hear the person opening their mouth every single time and just like the saliva. It just, it drives me nuts. It drives a whole bunch of people. No, yes, you want to be again, the good hardware can totally alleviate that highlighting shaking of the mouse. So sometimes, if you're trying to explain something, I still always like to circle code with my mouse. But if you're just trying to like highlight a whole bunch of stuff or shake your mouse, and I think like context of to where you are in an application is really important. And if you move too quickly, or you have too sudden of jumps, or you're tabbing back and forth, back and forth too quickly, that gets that really gets people disoriented as to where you are. Too many files is one that drives me nuts. So in my model, and like in modern web development, we're all about like, having many little files and even in modern react, it's all about having like 10,000 index JS files inside of different folders, which, for me, it makes sense that you would have these folders and inside of that you have index j s, but for someone trying to learn, it's really disorienting when you need to make an update, and you have to touch 15 different files, and they're all called index dot j s. So I'll try to avoid that and just call them what they actually are, even though in a lot of people like like to go the other way. jumping around too quickly. As a bit of a pet peeve. I talked about that. And I also find that is specifically when when people use vim and tutorials like I get how awesome vim is. But it's very disorienting to people just to where you are. So whenever I make a new file, or I switch tabs or something like that, I'll always make sure that I'm clearly saying where I am. And I'll show people that I am right clicking, making a new file, even though Yes, there are shortcuts that you could do with that. It's it's good to show people where they are because I can't tell you how many times people have wasted like two hours? And the answer to their solution is you're in the wrong file or you're in the wrong folder or something silly like that, where it's so even though it's not your fault, people like people send some nasty emails when they're there have been they've wasted their weekend on something and it's not working. Even if it's not the fault of the tutorial. The emotions run high. Let's just say that. Yeah, - -63 -00:48:16,440 --> 00:49:07,860 -Scott Tolinski: yeah. And one of those things that I like to do to combat some of that like file craziness stuff, too. So people don't know where they are, is I'll purposefully create less new files and work in a larger file, even if I know that is not how I would normally do it. And I'll call that out in the video and say, typically, I would put this component in its own file. But since we're in this example here, it makes sense for me to show you this all together. When you're doing this, you're going to want to split these up. Because I understand that like if you're jumping around too much exactly like you said it can throw people off. So if your core code organization is not exactly a production, or my Standard Code organization and a tutorial, I think that's usually a okay for me, I usually like to keep it fewer files. And I'll usually make that explicitly noted. - -64 -00:49:08,400 --> 00:49:46,020 -Wes Bos: Yeah, in my JavaScript 30. In my CSS Grid course, it's just index or not even index, it's like a like whack a mole dot html. And all we have a style tag and we have a script tag and everything gets done in one file. And the amount of positive feedback I've had from that is amazing, because people understand that you can put it in a separate file. It's just that you need to make sure that you're you're not jumping all over though, especially when you're trying to reference HTML and then jump back to the JavaScript, having it in the same file and actually showing people that you're scrolling up and down is really important. - -65 -00:49:46,110 --> 00:49:58,560 -Scott Tolinski: Yeah, totally agree. So we've gone over what makes a bad recording. Let's take this into the positive realm. I'm all about positivity. So what makes a good recording good screen recording less - -66 -00:50:00,000 --> 00:52:10,260 -Wes Bos: I think for me, it's having nice like a good color scheme. Part of the reason why I have my own custom color scheme is because I've done a lot of teaching both in person as well as, as well as on screen. And I know that when lighting conditions both for throwing a projector up on the screen, or when people are trying to watch it in, maybe like they're watching it on the subway or and the lighting is really bright. Having good contrast on your editor is really important. So sometimes people have these like very wishy washy themes that they look sweet, but they're it's both inaccessible, it's not people who are colorblind or have our heart of seeing, it's very hard for them to make out the differences. So I have like a nice, I can't tell you how many people have emailed me being like thank you for having a decent theme on on it, because my cobalt too is extremely high contrast. And that works really well on on all kinds of projectors that works on all good on all kinds of screens. If you're on a bit of a older screen, it still looks really, really good. Having nice big, large text, I often like to have a font in my editor that is a little bit bolder. Specifically, on Windows, the anti aliasing is really poor. So sometimes if you have a really thin, a really thin font and and you're on Windows where the anti aliasing is wrong is is poor, it's very hard for people to make out what you're typing. So I use operator mano, and that font is nice and thick. And the yellows and the different colors that are used in it just look really good. And it's very easy to see what I'm typing. I've started now to try to make the application that we're building work well, almost sounds like a almost a mobile view, because I like if I can, and this is not always possible. But if I can, I like to have the code and the thing we're building open at the same time. And it's nice to be able to not have to flip back and forth. That's not always possible because you have to open up Chrome Dev Tools, or you have a terminal open. So you flip back and forth. But I tried to minimize that flipping around. If I can, - -67 -00:52:10,290 --> 00:53:06,270 -Scott Tolinski: yeah, I should do that. I don't focus on that right now. Keeping both things open, I should definitely at least try to do that. And sometimes that I think they would make a little bit of improvement, I think I think makes for a good recording is a short recording, I try not to get over 12 or so minutes. Usually, you can also too short to me is a little bit of a bummer. If it's like three minutes, it doesn't necessarily feel like you've covered everything, I like to keep it in between six and 12, somewhere like that. Obviously, these are just like personal preferences. But again, another thing that makes a good recording is simply like finding the things that your audience is complaining about. Because if you're doing like things that are, you know, various things you're going to hear about it. If you're posting these publicly, people will leave comments. And I would invite you to not take those personally and to see how they can actually improve what you're doing rather than Yeah, being grumpy about it. One of - -68 -00:53:06,270 --> 00:54:01,890 -Wes Bos: the biggest complaints I got was in my Flexbox course. But I did this annoying, I liked whistling sound at the other friends. And the audio on that was a bit higher than my actual voice. And apparently it scared the pants off of a couple of people. And I'm working on a feature now where you can do like a Netflix, turn it on in your settings dashboard, and it'll just skip the intro. Well, my intros are now I try to keep them like four seconds or less. But even then people people send me nasty emails and other people love them. So I like having a bit of an intro and it gives you time to sort of context switch that this one is this one is now the last one's over. And now I'm moving into another one. You can read the title as to what it is but I don't do whistling music anymore because it's a bit dismissive. - -69 -00:54:01,920 --> 00:54:41,160 -Scott Tolinski: I had I had a series recorded. It was like a trailer for a series for my first React Native series that came out like early last year I think it was and I was like really I wrote the song for the the trailer and actually put effort into like making the trailer exciting. And then all of the comments were like what is that high pitch noise and I swear just most of my ears must be blown out. I went to a lot of concerts when I was younger, and I did not wear earplugs I swear my high end frequencies just must be totally shot so I like I don't know if I just didn't hear this and mixing and everyone let me know about it. It was apparently a abrasive sound. - -70 -00:54:42,210 --> 00:55:03,840 -Wes Bos: Yeah, be I think being open to that feedback. Sometimes it comes off wrong from people sometimes it comes off a little nasty. Because I think because I have so many followers people don't expect me to actually reply because I often get like a gnarly email and then I'll reply to and be like Oh, so sorry. About About that, and then they're like, Oh, I was in a bad mood. I'm so sorry. And - -71 -00:55:04,380 --> 00:55:14,670 -Scott Tolinski: some people double down on it, though. Yeah, you're like, well, I'm sorry. Like, how could I make this better? And they're just like, uh, you know, if you and your whole family go die, yeah. - -72 -00:55:15,600 --> 00:55:21,210 -Wes Bos: Okay, yeah, those people have other issues in their life. So I feel I feel poor for them or bad for them. - -73 -00:55:22,710 --> 00:55:27,690 -Scott Tolinski: Cool. So you, I think it might be time to hear from another one of our sponsors. - -74 -00:55:27,750 --> 00:56:29,670 -Wes Bos: Yeah. So let's talk about fresh books. Fresh books is a cloud accounting for your freelancing or small business empire that you're trying to build. And I absolutely love fresh books, because it is the one stop shop that I do for all my invoicing for all of my expenses for all of the different types of money that I need to receive and spend and put all my different receipts and take a photo in. So if you are a small business of any type, and I've gone through all my different examples throughout the last, like 10 episodes or so of how I use fresh books, but if you are a small business, and you need to get some sort of accounting software in place to manage all of your expenses and your invoices, and you can also do time tracking on it. Even though last episode, we talked about not billing hourly, hit up a freshbooks.com for slash syntax and use the code syntax into the How did you hear about us, you'll get your first 30 days of totally free. And thanks so much to Freshbooks for sponsoring. - -75 -00:56:29,670 --> 00:56:44,160 -Scott Tolinski: Thank you. Cool. So we talked a little bit about all of our equipment. What makes a bad recording what makes a good recording or flows all that sort of stuff? I think it might be time for some sick pics and shameless plugs. - -76 -00:56:44,640 --> 00:57:11,640 -Wes Bos: Sick pics. All right, I actually have a really good sick pic this this week. Me too. And we bought recently. He got a good one. I'm excited for it. So I just got a new car said goodbye to the super Forster. And when I had the Super Force, I had one of those, you know, these magnet phone mounts? Where? Have you seen these before? Where they it's like a magnet that goes into the vent? And then I give you Yes. - -77 -00:57:11,640 --> 00:57:13,170 -Unknown: Yeah, I guess I've seen that. Yeah, - -78 -00:57:13,260 --> 00:59:33,270 -Wes Bos: okay. Well, I've I've been like on the constant search for phone holders in the car that are decent. So I've tried the ones that stick on the window. I've tried ones that go into the like cigarette adapter, and they always fall down or they're always kind of awkward to get my phone in and out. So maybe about a year ago, I stumbled upon these magnet phone mounts where you can slide it into a vent. And then they give you this little piece of metal that you put either behind your case, or you just stick it to your phone and then you can just smack your phone on the actual the magnet and then it holds it and they worked okay, but ever you hit a big bump and it will fall off. Or if it's cold outside, your phone would start to cook in it I had a couple times it would shut down because the phone got too hot. So putting your phone in front of the event is not a good idea either. Now, I just found another one that is a CD holder phone mount, which is the same idea because like who uses CDs anymore? No one. So this thing it slides into your CD holder in my new car. It's exactly the right spot where I want it. And then it just has this massive super thick magnet on the end. And then you got this plate here. I'll show you on the video right now. It's like metal plate stuck to the back of my phone. And it's on a ball joint, meaning that you can tilt it whichever way you want. Because the problem with the vent ones is that it would just point whichever way the vent was pointing. So I'm super happy with it. The magnet is really good. It can angle the right way. And it's just like your phone won't fall off. When you when you hit a big bump. So it's called, I don't even know what it's called. These are all there's like 1000 of them on Amazon. They're all just rebranded stuff from China. So I wouldn't sweat it although I have bought some crappy ones because the magnets not great. So this one is called the Pumas and it slides right into your CD CD holder, you push a little button, you slide it into the CD holder and then you let go the button and it will sort of like put pressure against the top and the bottom of the CD player. So it'll hold it in place so cool. Very happy with that to finally find a phone mount that I'm I like sick. - -79 -00:59:33,270 --> 01:00:59,850 -Scott Tolinski: I have a gadget little gadget myself here. It's gonna be so I don't know if your house has this. We both have old houses. So it was very likely that you have closets that don't have any lights. Is that something that you have? Yes, yeah, none of our closets have any lights. And so that could get kind of tricky, right, obviously. So I found this really brilliant. It's called an oxy LED and it's a little strip that looks like a strip of LED lights, that's motion censored and has a magnet back end and like a magnet sticky. So you can sticky magnet, this little wand of LED lights into your closet. And it's motion censored, and it charges via USB. And so since it's motion sensor, it's not all the time the battery's gonna last forever. But I've had this experiences, or I just put it into my office closet where I keep all my gear. And I'm so used to being completely dark and having to turn on my phone flashlight, or one of my studio lamps in there or something to see, I walked it the other day, and the light turned on and illuminated the whole thing. And I was just like, yes, this is so good. It was 11 bucks. They make these things with different, like maybe different lengths to the LEDs for different spaces. But for $11 I have a wireless motion sensor light inside of a closet, and I'm going to start putting these everywhere. I'm just gonna go by Oh, - -80 -01:00:59,850 --> 01:01:00,480 -Wes Bos: man, - -81 -01:01:00,480 --> 01:01:11,610 -Scott Tolinski: it's so brilliant, that this little thing exists. Now, this is like the future to me. I can't believe this, this thing exists. And it's so nice. It works. So well. - -82 -01:01:12,230 --> 01:02:06,270 -Wes Bos: That's amazing. I mean that because we just in our we Our house is like super old. And one of the weird things that our house had was like a made staircase, which is like a back staircase that people like the maids would walk up. And then there's like a tiny little room that is supposed to be a bedroom. But it's so small that like that's where the maid would stay. And we turn that into like a walk in closet. And it's annoying because we hate having to turn the light light on and off because the light switches like kind of behind a bookcase or a shelf. So we put a motion detectors switch in there. And then all you did is just walk in and it turns on and then after five minutes, it turns out so I love those kinds of little things. So I'm going to check this out because I specifically have above my where I put my tools in the basement. It's always so dim and I can never find anything. - -83 -01:02:06,300 --> 01:02:29,160 -Scott Tolinski: Yeah, there's a lot of people use this for that. Or I saw people like putting them underneath their cabinets in their kitchen. Just there's it's pretty endless any place that you need lights that you don't want to wire up anything like that. I couldn't believe for $11 How, how good it worked. I was expecting Okay, well, that was I told coordinators like I'm gonna buy one. And if it works, well, we're gonna buy a ton of these. - -84 -01:02:29,910 --> 01:02:32,880 -Wes Bos: How long does the battery last? I haven't - -85 -01:02:32,880 --> 01:02:45,570 -Scott Tolinski: had a diet, since it charges by USB. But this is again, it's pretty low traffic. It's a closet. I don't even go in this closet every day. So we're gonna find out on that one. But so far, I have not had to charge it. It's been a couple weeks here. - -86 -01:02:46,730 --> 01:03:00,180 -Wes Bos: That's pretty nifty. I think I think what you could also do is just get like an external power bank. Yeah. And then plug that in to charge it. Yeah. And then they're headed somewhere. Yeah, and put it back and then just kind of move them around the house whenever you need to. - -87 -01:03:00,330 --> 01:03:14,400 -Scott Tolinski: Yeah, and that's the best part is that the the mounting thing is all a magnet. So if you want to pull it off and use it like a wand you can do Oh, really? Yeah. So if you need to look in the box, specifically, you could pull it off there and use it like a wand. It's unbelievable. It's great. - -88 -01:03:15,660 --> 01:03:17,910 -Wes Bos: I'm gonna order some of these from my house. This looks great. - -89 -01:03:17,940 --> 01:04:18,660 -Scott Tolinski: Yeah, my order a couple more. Yeah, I will shamelessly plug my pro Gatsby course, which is proven to be very popular, people are saying a lot of great things about it. So I'm really excited with how it turned out. Basically, it's teaching you Gatsby, the static site generator that we talked about in our static site generators episode. And it basically teaches you how to build really, really fast performance websites that are statically generated using react. And we go through all sorts of stuff from, you know, hosting to do redeploying to even page transitions with the web animations API. And it just all sorts of good stuff. And on top of that, I'm releasing some free additional videos, I just released a free video on YouTube on Friday about how to use the contact form feature in Netlify. So there will be additional free content added on to the end of that series as well. So if you want to learn Gatsby and get up and running, head to level up tutorials, comm forward slash store and check out pro Gatsby - -90 -01:04:19,770 --> 01:05:38,480 -Wes Bos: wicked, I am going to plug my JavaScript 30 course which just cracked 150,000 people who've taken it, which blows my mind. That seems like a lot of people. And I think I hit a bit of a nerve with the course and people are really enjoying it. So if you are in the spot where you feel like I need more practice with JavaScript, but all the stuff that I'm trying to learn is like different frameworks and bundlers. And what's what is my thing on here I have like, I think no frameworks, no compilers, no libraries, no boilerplate. So if you want to get good at just JavaScript, No jQuery, no react, no Babel, no Webpack, none of that you just want to get good at the language itself. All well having fun while doing it, because a lot of those vanilla JavaScript stuff is like looping and console logging. And that's very boring. So in this, we build 30 different things, a one per day, everything from using Canvas to using the microphone, we do like a speech detection one, we do Ajax calls, we have some ones in there called array cardio, which people seem to really like, which is just getting good at MAP Reduce and filter, which is so important. 98% of JavaScript. Yeah, - -91 -01:05:38,520 --> 01:05:48,150 -Scott Tolinski: like, seriously, once I once I like, learn those, I was just like, oh, man, everything I would have done before is, you know, totally out the window. - -92 -01:05:48,150 --> 01:05:54,330 -Wes Bos: If you ever find yourself creating a variable and then doing some sort of for loop, like how When's the last time you wrote a for - -93 -01:05:54,330 --> 01:05:56,070 -Scott Tolinski: loop? I can't tell you, - -94 -01:05:56,480 --> 01:06:44,100 -Wes Bos: I can't tell you writing a for loop, you're probably doing something not necessarily wrong, because there's nothing wrong with it. But there's probably a cleaner solution using MapReduce or filter. It's amazing, big fan of MapReduce filter. So so check it out. It's at JavaScript thirty.com. And poster, a lot of people have posts kind of like what they make every single day, the kind of the fun thing about it is that people will will do the exercises in them. And then they'll do that, oh, I wonder if I could add x, y or z or I wonder if I could build something that is similar to this that is sort of built upon it. And that's really where you want to be for programming because you're inspired by whatever it is. So JavaScript thirty.com. That's my shameless plug sick. Cool. All right. Well, that is it for this week. Hopefully you enjoyed it. And - -95 -01:06:44,730 --> 01:07:01,050 -Scott Tolinski: yeah, we'll see you later. Yeah, you can now become a pro pro screen caster. These piece, head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax38.srt b/transcripts/Syntax38.srt deleted file mode 100644 index d667441fe..000000000 --- a/transcripts/Syntax38.srt +++ /dev/null @@ -1,452 +0,0 @@ -1 -00:00:01,290 --> 00:00:10,650 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here's got to Lynskey and Wes Bos. - -2 -00:00:10,980 --> 00:00:18,780 -Wes Bos: Welcome to syntax. Welcome to Episode 1 million Well, not Episode 1 million, but we have just crispy one. - -3 -00:00:19,730 --> 00:00:21,450 -Scott Tolinski: One episode - -4 -00:00:21,510 --> 00:00:53,490 -Wes Bos: is our 1,000,000th episode. Thank you so much for hanging in there. And with that, we'd like to announce that we are shutting it all down. No, I'm just joking or not. But we we just cracked 1 million downloads. And I'm pretty excited about that. So huge thanks to everybody who has listened in and shared it with a friend. And I don't know it done everything. It's been a wild ride. And we're looking forward to 1 billion. So with me today is Scott to Lenski. How you doing today, Scott? Hey, - -5 -00:00:53,550 --> 00:01:04,680 -Scott Tolinski: I'm doing super good, as usual, just recording by next series and getting all that stuff going coding up and doing all sorts of, I don't know, it's just just work and feeling good. How about you? - -6 -00:01:04,889 --> 00:01:25,620 -Wes Bos: Good. I'm feeling good, too. I just got back from a conference in Manchester, which was super fun met a lot of syntax fans there, which was pretty, pretty fun to actually meet people in person. It's funny people are like, I hear your voice all the time. But now you're in person. Or and now you're like at one x i usually listen to you at two x You sound like your - -7 -00:01:25,620 --> 00:01:43,620 -Scott Tolinski: dog. I know that it's a weird, like when I like listen to a podcast, I suddenly turn it back to the normal speed. The just sound like you're talking so slow. It's so weird. I like don't get it like does your brain just adjust back to normal at some point? Like, I can't handle it? - -8 -00:01:43,739 --> 00:02:51,360 -Wes Bos: Yeah, I can't I just like the whole world is ruined to me. I just like talk to people in person be like, hurry up. So slow. Oh, so we've got two sponsors. Today, we've got cloud Neri which does image and video hosting. And we have O'Reilly's fluent conference, which is sort of a really good web development, JavaScript focused conference. We'll talk a little bit more about those partway through the show. So today, we're gonna be talking all about easy perf wins. So there's, there's a lot of things you can do in your website and on your server and with your CSS and your JavaScript in your network requests that you can, you can do that make these little changes to your website and your web app that will make your website faster, it will load faster, it will respond faster, it will give you a better experience. So we're gonna rattle through about 20 different tips that we have. And hopefully you can, you can take away a couple of these steps, you don't get super into it, because this performance world is another world into itself. But hopefully you can take away a couple little tips and and go and research the stuffs yourself a little bit more. - -9 -00:02:51,900 --> 00:03:22,620 -Scott Tolinski: Yeah. And you know, everyone always talks about that, that that quote or or that study where they found out exactly what percentage of users or conversions drop off for every millisecond your site loads. So hopefully, these kind of things are going to get you thinking about just ways that you can completely smash up in that, that. I don't know that loading, initial loading speed, get your conversions, get your website performing much better and get your users happier. Because there's nothing worse than a slow, slow website. - -10 -00:03:23,010 --> 00:04:00,360 -Wes Bos: No kidding. And I just saw I just went overseas and I bought like the 500 meg data plan. And I can't believe how fast I was like $100 for 500. Meg's and I blew through it in like, like a day. And I was just like, I take it. Like I have like, almost unlimited data plan. I really fast internet at home. And you sort of get used to that. And then you realize that like there's a lot of people out there that if you accidentally waste like six Meg's for them, because you're not compressing an image or you're inefficiently loading some resources. Like that's, that's money in their pocket that you're taking away from them. - -11 -00:04:00,810 --> 00:04:03,240 -Scott Tolinski: Yeah, expensive, very expensive. - -12 -00:04:03,660 --> 00:04:51,360 -Wes Bos: So we're gonna, we're going to break this down into a couple different sections. We're start off with like some network stuff that you can do. So how you request assets from the server, how you serve up assets from your server, some media stuff, how you deal with pictures, we did a whole episode a couple episodes ago that was specifically on dealing with large media files. So we talked a lot about compression and whatnot there. And then we'll talk about CSS and JavaScript, what you can do to low those faster, remove unused code, etc. And we got some stuff on fonts because because fonts, custom web fonts can really bloat your page side size. And that's, that's a big one right now, where you get that sort of like you don't see any text for a couple seconds until the font download. That's a bit of an annoying one. - -13 -00:04:51,810 --> 00:05:06,829 -Scott Tolinski: Yeah, super annoying. And a lot of these they will annoy your users whether or not your users tell you a lot of times your users will just no longer become you Your users anymore after enough of these issues, because they're, they'll be fed up with your site with your slow site. - -14 -00:05:07,130 --> 00:05:12,889 -Wes Bos: Totally. Um, Alright, so let's kick it off, you want to, you want to start us off with a network tip. - -15 -00:05:13,440 --> 00:06:07,620 -Scott Tolinski: Yeah, network tip, this is the probably one of the most I say basic tips on here is to reduce the amount of HTTP requests. This is one where every single time your site loads, and it has to go and grab something from another location, it makes this request and that that round trip time for the request to happen, can slow the loading of your page, if you have, you know, of 2020 requests to different JavaScript files or something like that. Maybe you're loading all your plugins from CD ends or something like that. Let's say you have all of these different requests going out, each one of those is going to take some amount of time, your code needs to wait for that stuff to load, just one of those things that you want to reduce as much as possible. So that's one of the reasons why people use a build process or a bundling tool to bundle up all your script files and stuff together into one file for them to load in, make one request. - -16 -00:06:08,459 --> 00:07:36,060 -Wes Bos: Yeah, cuz there's some sort of limit, I don't know what it is, offhand. But there's some sort of limit in the browser right now, where you can only request so many things from a specific server at once. And if you have more than that, then it's going to wait until they come back in our purse and then go off and fetch more, that is going to be changing sometime soon. So we're getting this thing called HTTP, HTTP Two, two, or as the Brits like the color, ah, h two, h two, h two. And what that's going to do is it's gonna allow you to like multiplex your requests, meaning that it won't matter that you have 100 requests, because what's going to happen is that it will just go to the server and come back with all those requests at the same time, rather than going back and forth, back and forth, back and forth for every single request. So that will eventually will change. And that's, that's kind of goes along with JavaScript modules. Because eventually, we won't have to use Webpack, or anything like that to bundle everything into one big j. s file. But we'll be able to just serve up our our unbundled modules, and then it will sort of crawl through all of our modules and do those imports for us and doing extra requests every single time. But I don't really know how far that that is off. There's some other people out there that are better at all linked to some talks on YouTube that that explain HTTP to a little bit better. But I'm looking forward to that as well. Yeah, - -17 -00:07:36,060 --> 00:08:36,360 -Scott Tolinski: I think a lot of our solutions are going to be something about either, like bundling tools, or like maybe like future improvements will fix these things for us, eventually, the future is bright, as always. So that's, you know, something to look forward to. So Another good tip is to utilize caching, also utilize local storage for data that doesn't need to be refreshed. If you use a system like like Apollo or Redux, or any of these sort of libraries, they have different local storage and caching systems that you can just sort of plug and play in and make sure that, you know, like, let's say, a user goes off and gets information about something. And well, that information is not changing the next time they're getting it. So why are you going to get that information again. So utilizing some of the stuff is going to prevent extra, again, extra requests, but extra time it takes to get that information from an API, your things going to load faster, and your users aren't going to have to sit and wait, while it makes a redundant request for you. - -18 -00:08:36,390 --> 00:09:31,160 -Wes Bos: Yes, that's pretty good. And also on the server side, you can turn on whether you're running like an Apache server or nginx server, you can also turn on like aggressive caching of your images and have your JavaScript and your CSS. And what that will do is every single time that your browser requests something, it'll go, Oh, I actually had downloaded this JavaScript file before, I don't need to make that round trip, I'll just serve it up from the cache. That can be a little bit of a pain when you're trying to invalidate the cache. And that's generally why Yeah, people put hashes in their CSS and JavaScript files where you might have like scripts dot before nine, seven dot j s. And then when you need to invalidate that cache, then you just change the script name to something totally different. And then the other kind of cheap, cheap way that you can do it is you can just do a question mark V equals one like, you can put a little query pram on the end, and that will also bust that cache. - -19 -00:09:32,910 --> 00:09:39,630 -Scott Tolinski: Yeah, a lot of these libraries will do that kind of stuff for you too, or these build tools and stuff like that for you, which is web pack will - -20 -00:09:39,630 --> 00:11:24,390 -Wes Bos: definitely do that for you. Yeah, the next one is enabling g zip on your, on your server. So a lot of times, people don't understand what Jesus epistle, let me explain what it is really quickly. So what jesup is, is when you have some, let's say text that's being sent from your server to the browser, Let's say I have the text West is cool. And I am writing a blog post about myself and I write the text West is cool 11 times, what Jesus will do is it will take that text that is duplicated over and over and over again, and say, Okay, I see that this test is cool is being sent 11 times, I'm only going to send it once. And every other instance of that I'm going to just point to that first instance of West is cool. So it might just send West is cool. And then in place of West is cool, it will always send like something like go look here for the actual text, that'll sort of point to it. And that's great, because if you ever have duplicate CSS selectors, you have duplicate CSS rules, like how many times is your your CSS have text align center in it, right. So it will only send text align center once, and then it will point to that text align center for every single time. And that will really make your CSS as small as possible in your JavaScript as small as possible, because you're not unnecessarily and that's why sometimes people don't necessarily care about duplicate CSS rules or sending more CSS over the wire than they should, because it might just be that you have GS F and you should have jesup turned on on your server, because then your requests are going to be as small as possible. - -21 -00:11:26,400 --> 00:11:49,590 -Scott Tolinski: Yeah, I mean, I love stuff like this, because like you said, you don't have to worry about your your CSS, duplicate, or any of that sort of stuff. Because I mean, at the end of the day, writing code should be easy for you to read. You shouldn't have to worry about what's easier for a computer to read, right? Let the tools sort of make it optimize better for the server itself and allow you to have your code as well as it is easy for ya. - -22 -00:11:49,710 --> 00:12:11,010 -Wes Bos: I agree with that. Sometimes you see people going way out of their way, in the name of performance. And like, that's great. But like it kind of bums me out that like we have to like, think about what the computer is doing and what is faster in that case. And ideally, either the tools or the platform would would know these things and make it faster for you. - -23 -00:12:12,090 --> 00:12:50,010 -Scott Tolinski: Yeah, yeah, yeah, yeah. Okay, so this next one is something we've talked about probably a few episodes on the show already, as he's, you know, content delivery network to deliver your stuff. Basically, again, the the idea here is that your server is in a physical location, a CDN is going to make it so your data is spread out amongst locations, so that the point of request is closer to where the data lives. Rather than having to, you know, go from Tokyo to New York to get the data, it can go from maybe like, I don't know, Tokyo to Kyoto or something, depending on where the different CDN locations are. - -24 -00:12:50,519 --> 00:14:47,250 -Wes Bos: Yeah, CD ends, very popular, go back to our episode on what dealing with media files, would we call it big zips, something like that. And you can begin to talk a lot more about doing that. Next one we have is loading your JavaScript at the appropriate time. So we're gonna we're gonna talk about a little bit more about this, and when we hit CSS, and JavaScript, but what you likely learned when you were learning JavaScript is in the head tag of your HTML, you put all your link tags, which loads your CSS, and you put all your script tags, which loads your JavaScript. However, the problem with that is that those things are what are called blocking, meaning that it will pause the parsing of your HTML, and pause everything else below that, that needs to happen while it goes out and downloads and parses your JavaScript in your CSS. And that sucks, because generally, what's happening is your user sees nothing. Because if you're thinking about the head that's loaded before any of the HTML on the page has been parsed and put onto the page, so your user is just sitting there on their hands, waiting and staring at this white screen. So the easiest way to get around this, and there's lots of different script loading techniques, we'll talk about them. But the easiest way to get around this is just load your script tag before the closing body tag. And what that will do is it will make sure all of your HTML is loaded on the page first, your user can start to orient themselves to what's on the page, they can start reading, seeing where these items that are on the page, and then your JavaScript is going to load right before the closing body tag and, and sort of as an added benefit to that as you if you do that you never have to worry about like document ready or or when the document is loaded. Because by the time your JavaScript runs, it will have already loaded all of the HTML on that specific page. - -25 -00:14:48,660 --> 00:16:53,130 -Scott Tolinski: Word. Yeah, definitely. Next one is a one lazy loading. Now I have a personal story about this. I was having some slow loading times on my level of tutorials. page, which is a page that doesn't make any database requests, it's server side rendered. There's a lot of reasons why this should not be slow, right. But I was still seeing a couple of maybe a second and a half delay on each load, right. And so, you know, you went into my tools, we're going to talk a little bit about troubleshooting later in the episode, and maybe how you can solve some of these things. But I found out that one of the things was the Twitter component that I have, where it brings in tweets. And so that whole block of things was going off to Twitter and getting those tweets and it was delaying the loading of other content on the site. Now, one solution I came up with was to just lazy load that whole block, because that tweets is not into view, at that point, the user doesn't need to see the tweets, and therefore they don't need to load. So lazy loading is a way of basically telling your site to only load specific things when they are about to come into user view or are in user view. So it's nice to go out and get those tweets until the user scroll down enough and there's maybe an offset, to say, Oh, hey, now go get those tweets, it can make that request, instead of delaying the loading time of your site overall. So having things lazy loading, using it, I mean, things like react, make lazy loading effortless, because there's just like a lazy loading component, you can just wrap wrap your components in a lazy loading component and give it an offset, and therefore, you know, you never have to think about it again. But lazy loading the stuff that your user doesn't need to see, if you have 100 images loading, and they're only seeing the first five of them, you don't need to load all hundred of those images, lazy load the ones out of view, given an offset, so that they're never like necessarily seeing an image load unless they're scrolling super fast. But lazy loading is a great way to delay the loading of content until your user actually wants to see it, you know, no reason for them to pay up front for something that they might not even see. - -26 -00:16:53,760 --> 00:18:49,980 -Wes Bos: That's a super good tip. I like that a lot. Next up, we have is a link REL equals preload. So we all know about the the link tag to load your CSS, but the link tag can actually be used to load in almost any other type of asset, if you give it an attribute of REL set it to preload. So what this can be used for is any other content that you have on the page that you'd like to sort of kick off the download. And this I don't think that this was a block your page from loading, but it'll sort of go off in the background and start to download it. So if you have a, like an mp3 that you want to play quickly, or if you have a video file or an image or some JavaScript that will be loaded, at some point, during that page, you can kick off in your head, you can kick off a preload of that asset. And then by the time the user or the browser actually needs that asset, it will have already likely been downloaded. And that will make things a little bit faster. On that same idea, there's also a rel equals prefetch, which is pretty neat. And what that will do is if you have a page that you'd like to prefetch, so maybe I have a homepage, and I have a store page, if someone's on the homepage, I might want to pre load the store page, so that by the time they click on that store, page, bam, it will already be loaded. And it will be that like sort of that instant cutover that we're used to I use this in a little bit differently. But I use this index j s quite a bit where if you if I have like a page of products, and I have a previous page of products and a next page of products, what I'll do as all preload the previous and the next page, so that when they actually click it, it will have already gone to the API and got the list of products and rendered out the HTML and then at the instinct cut over to that actual page. - -27 -00:18:50,970 --> 00:19:01,980 -Scott Tolinski: Yeah, and that's such a great experience. I've been on so many sites where like, I click it and the page loads really quickly. And I'm like Courtney, Courtney come look at this page load so quickly, and she's just like, - -28 -00:19:02,840 --> 00:19:03,420 -Unknown: people like - -29 -00:19:06,330 --> 00:19:10,530 -Scott Tolinski: I don't know if she listens to this, she's definitely going to be agree with you. - -30 -00:19:12,350 --> 00:19:13,650 -Wes Bos: Oh, that's okay. So - -31 -00:19:13,650 --> 00:19:39,240 -Scott Tolinski: okay, these are general network tips. But we're gonna break it down into several different classes of stuff. And the first of which is going to be media. So like, we already had a whole episode on things like this, but I think these some of these things we either didn't mention or are worth reiterating in this section. So first be using the picture Phil and image source set. Is it do you call it source set for SRC set? - -32 -00:19:39,270 --> 00:19:50,280 -Wes Bos: Yeah, I call it source says what do you what it stands for? Yeah. Like it's a setup server thought about that? Yeah. Because Because you have the image source. And then you can have many sources, which is the source set. - -33 -00:19:51,300 --> 00:20:33,150 -Scott Tolinski: Okay. I mean, it makes perfect sense. I've just never thought about source it. So yeah, so this basically is a winner. Parts of web design first came out, there was a whole this, basically you throw with 100% on your images, and they sort of just adjust to the container size, right? And everyone was doing that for a little while. But we didn't necessarily Well, not to say we didn't think about this, because people were thinking about this. And you know, but a lot of people weren't necessarily thinking about, Hey, I'm loading up this 700 pixel wide image on a phone that's, at the time 320 pixels wide. And they're, they're the desktop user and the phone user getting the same image, even though like they don't need the same - -34 -00:20:33,270 --> 00:20:47,700 -Wes Bos: or even worse. So had the the iPhone retina came out, do you remember that? And everyone? Oh, yeah, exporting all their buttons and two inch maps at two acts, that was a nightmare. Which so sorry, go ahead. Yeah, no. So - -35 -00:20:47,700 --> 00:22:05,700 -Scott Tolinski: what this allows you to do is to specify various images, as in multiple images per a picture in the browser is going to sort out which one, your user needs to be served using things like media query, right, so you'll be able to say, at a minimum width of this size, go ahead and serve up the user this and this actually pairs really nicely with one of our sponsors, which we'll get into it in a second here. But uh, in in the way I do this is I have various, I have a picture tag, and then I have various source sources for my images. And then I have cloudinary, go off and fetch the perfect image for any sort of given size, I have basic browser with setup. And this can all be done sort of dynamically, I didn't have to export a billion images at different sizes. cloudinary is going to create those when I asked for them. But basically what it is, is this allows you to have the perfect size image for any given scenario. And this also means that you can cater your image for desktop, to mobile, whatever, if you need to do specific cropping. Or maybe you want a different even height, verse width, image ratio, you could do all sorts of stuff. It's basically using a media query to serve up whichever image is most appropriate for your user given whatever device or browser they're using. Yeah, you know, - -36 -00:22:05,700 --> 00:22:38,700 -Wes Bos: where I use this a lot was with like a banners like sliders on a homepage, generally, on the homepage ever really like a long rectangle. But then as you get down to mobile, that rectangle doesn't doesn't shrink very well, because it's it's almost microscopic, by the time it gets really wide. And we want it to go on to move to more of a square or more of like a taller rectangle. So we would just create a couple different banner sizes and then use source set to change it up. But what is what's the difference between sorsa and using the picture element? - -37 -00:22:38,940 --> 00:22:42,720 -Scott Tolinski: Oh, are you asking this knowing the answer to No, I - -38 -00:22:42,720 --> 00:22:48,900 -Wes Bos: actually don't know the answer. I okay. I've used the picture and picture, Phil before. And I've used source as well. What is the difference? - -39 -00:22:49,590 --> 00:23:06,510 -Scott Tolinski: I think they're their combined techniques. The picture element uses various sources, your source set to display the right image. And then like what is the picture element is an actual HTML element? It's just you need a polyfill to use it. - -40 -00:23:07,410 --> 00:23:17,700 -Wes Bos: Know, the picture element is a standard though, but and picture fill is just a polyfill for the picture, but can't a source that just put directly on an image tag to or not? - -41 -00:23:19,080 --> 00:23:22,080 -Scott Tolinski: That's a good question. I have never used it out of the picture element. - -42 -00:23:22,110 --> 00:23:26,160 -Wes Bos: Okay. Okay. I get it. That makes sense. Have you thought - -43 -00:23:26,160 --> 00:23:27,150 -Scott Tolinski: about that? - -44 -00:23:27,179 --> 00:23:28,140 -Wes Bos: Let me let me look it up. - -45 -00:23:28,169 --> 00:23:30,690 -Scott Tolinski: I don't know if you can't, or can I have not? I just haven't - -46 -00:23:30,720 --> 00:24:41,790 -Wes Bos: let me look it up real quick. Okay, and we're back, I actually didn't know what the difference was. However, I found a nice little tweet from Chris coiour, about four years ago, it says source set and sizes is information to help the browser decide what to do best in the picture element with with MIDI attributes. With the with the picture tag, you can have these sub source tags inside of it kind of like a like a video tag, or an audio tag. And that will allow you to explicitly tell it when to do something sort of like with with a media query. So I think that what I'm understanding from this, and if this is wrong, please tweet us and we'll retweet you from the ad syntax FM is that the source that will usually give as much information about how big the different sizes are, and when you want them to come in, and the browser will make a decision for you based on different things in the browser. And then the picture is you you make all the decisions with different media queries. And you can do a little bit more what's called Art Direction. Which means that you can say at this level use this and that's that's what I've used it before. I've used the picture fill library for that. So yeah, - -47 -00:24:41,790 --> 00:24:48,570 -Scott Tolinski: pretty much only use the picture fill without with I mean the only the picture filled not using both. Oh yeah, - -48 -00:24:48,600 --> 00:25:07,200 -Wes Bos: yeah. So the picture fill for those who want to know is a polyfill for older browsers that don't have the the picture element, which most most new browsers do on picture element. Let's look at On Can I use picture element is supported in everything but iE 11? Like most good things in the world? - -49 -00:25:08,040 --> 00:25:12,810 -Scott Tolinski: So, yeah, so use your polyfill. If you gotta do it awesome. At this point, it's pretty cheap one. - -50 -00:25:13,260 --> 00:26:11,520 -Wes Bos: Yeah. Next one, we have image compression. So we talked all about that in a couple episodes ago, where you can take image op DME, and you can use web P and JPEG and PNG, you can create lossy versus lossless, I think that is some of the lowest hanging fruit out there. Don't worry about getting all tie downs on these, like, there was this big thing the other day where where people would get all bent out of shape about using a library like jQuery versus coding it all in vanilla, because jQuery was much too large to actually load onto the page. And there was a sort of the things as one last one last image, meaning that like, if you're really sweating, loading one JavaScript library, take a look at the actual images on your page, because you could likely gain a lot of perf there. And that's such low hanging fruit. So I would definitely start there if you're looking at making your website faster. - -51 -00:26:12,509 --> 00:27:52,380 -Scott Tolinski: Yeah, yeah. Yeah, actually, we never mentioned this one in the I think this is sort of self explanatory. We didn't mention this in the network. One, this goes along with that if you want things to load faster, you have to serve less data. We just totally overlooked that. But like, I mean, that goes along with that image compression, right, you want your images to be smaller, you want everything to be smaller, the less amount of information you're sending over the wire, the faster things are going to load. Okay, so the last one in our Media tab is going to be inline SVG. Now, HTML, SVG can be in HTML. The only problem with it is SVG is typically kind of messy. So for a long time, people were just using the image tag and using a source image as an SVG to load up their SVG tags. Now, there's a lot of, you know, this fetches as an image, it creates another request as to go to your server to fetch that image, when the SVG could just be into your HTML by default. So there's a couple of solutions for this, you could actually physically copy and paste your SVG into your HTML, which isn't necessarily that reusable. I mean, if you're using react, you could make it a component or something like that. But nowadays, there's some really cool libraries that what they will do is take your SVG files, you can just use them as an image like normal. But then when Babel goes to compile your code, it's going to place all of your SVG G's in line, so that you don't have to write the code that way. But you end up having code that is with inline SVG. Other benefits to inline SVG are being able to target the various parts, the elements in your SVG with CSS yakko, - -52 -00:27:52,380 --> 00:29:02,130 -Wes Bos: which is a great thing, you use an image tag, you can't access the internal bits of your SVG. But if you inline it, you can change the color, you can rotate like pieces of the SVG, you can, you can add outlines. And it's really sweet. So I love that. And I've also done it in pug and Jade before where you can just include it. Like you're including a partial, but you can include the SVG file, and it will inline that entire for you. So that one takes a little bit more setup in terms of tooling, which is I think, why we are still seeing a lot of people using Font Awesome. With the class of fa, the whole idea is everyone wants to get away from these icon fonts, because they can be really slow to load this entire icon font when having an Yeah, they're pretty big, whoo. And loading inline, SVG is so much faster. But we're seeing some pushback against that, because it's just harder, right? People don't have the tooling in place. And they like just adding it, fa fa dash Twitter. So if you can spend a little bit of time getting that tooling, a place that will auto inline the stuff for you, you can still author it as you're used to. And then it will sort of handle the heavy lifting for you sort of when when, - -53 -00:29:03,210 --> 00:29:31,830 -Scott Tolinski: yeah, since I started my site before there was those plugins to inline it for you. I just have a react component named icon. That's a simple switch statements looking for a name of the icon passed in as a prop and then outputs the inline SVG. Now that icon component is kind of a giant mess of a bunch of SVG tags. But like, it sort of hides it all the way. And I can say, Hey, give me the icon which icon this icon, okay, it's like my own little icon library. Look at the one I want. Pretty nifty. - -54 -00:29:32,160 --> 00:31:51,420 -Wes Bos: Alright, let's take a break and talk about one of our sponsors. So our sponsor today is cloud Neri and cloudinary does, at the very basic, it does image and video hosting for you, but that's really not all it does. We're talking about performance and whatnot. What cloudinary will do is you can take your image, you can upload it to cloud Neri and it's going to do what they call these transforms on it and you can do everything from resizing your image to compressing your image. to changing from a PNG to jpg, and I like to talk about my favorite part of cloudinary. And this is something that I use in my own websites. And it's just to set the format to auto and to set the quality to auto. And what it will do is if you give it a JPEG, and you can say, give me back this JPEG, or give me back this image at 500 pixels wide, but you figure out what is the best format and you figure out what is the best quality, and it's going to smoosh down that image as much as you possibly can. And it's going to determine if a PNG or a JPEG is going to be a better format for that specific image. Or if your browser that is requesting the image supports web p, it will serve up a web p which is much smaller. And it's great because it takes all the heavy lifting and the image compression and all that stuff sort of off your plate, and it will just take care of it for you. So I'm a big fan of it's got introduced me to cloudinary. Like maybe like 20 episodes ago, I've been using it in all of my projects. It's just, it's just fantastic. So if you are looking for some sort of image hosting solution they have, they obviously have adapters for they have an API of the stuff for for Ruby and node and I myself have just used a lot of the have a URL that you can put in front of your existing images. And it will start to suck up all of your existing images and spit out the compressed and smaller versions of it, which is super handy for existing websites where you just want some easy wins. So definitely check out cloudinary@cloudinary.com. And then they also have a image con that's coming up in April, it's on what do we got here, April 12. So just in 22 days yet, and if you're interested in heading on over to it, that's in San Francisco, on April 12, use the code syntax 99 to get a big discount off that. - -55 -00:31:52,500 --> 00:32:52,110 -Scott Tolinski: Nice. Yeah, one of my favorite things that I did since I started using cloudinary was before the I was pulling in images from YouTube's API. And not only was I having to hit YouTube for those images, because I wasn't grabbing the images, I was just loading them up in YouTube only gave four different image sizes. But for some of their older uploads, it only gave you two image sizes. So I had to have all this logic to say Oh, if you know if this and chose all four, then then you know, use the picture filled to show the right one. But sometimes there's only two. And so with cloudinary, I was able to plop my highest res one at the end of a cloudinary URL. So not only would cloudinary upload the image, but I could then use that URL to give me all of the appropriate sizes rather than just relying on what YouTube provided. And you know, everything was just a okay after that. It just simplified everything so much. This is one of those services. When I first started using it, I was like what's the catch? There's kind of a catch. Yes. Great. We should mention that is I'm here. - -56 -00:32:52,410 --> 00:32:54,450 -Wes Bos: It's free. Oh, yeah. - -57 -00:32:54,450 --> 00:33:03,780 -Scott Tolinski: It's pretty good started using I just could not believe it. And then what here I am a year later. And I'm still being like, there's got to be a catch. This is too good. It's too good. Yeah, one of my favorite services. - -58 -00:33:03,860 --> 00:33:29,280 -Wes Bos: They're they're great. Like they get what do you get 20 gigs of bandwidth. And I actually was using the free plan on my CSS Grid course. And I went over that 20 gigs, and they didn't cut it off. So like, even if you get a spike in traffic, they're going to they're gonna tell you your account is over. And you have to go to our premium plan. But they're not just going to immediately cut you off, which is like one another really cool thing about about this company. So check it out@cloudinary.com. - -59 -00:33:30,330 --> 00:33:48,420 -Scott Tolinski: Nice. Cool. So we've talked about network requests. We've talked about media, and now we're into actual code that we use with CSS and JavaScript. So there's a lot of little things here you can do, some of which can be done automatically for you. So do you want to go ahead and hit the first? Yeah. - -60 -00:33:48,630 --> 00:35:30,750 -Wes Bos: So the first one is what we like to call critical CSS. And what critical CSS is, is you load the CSS that is needed for that first paint, before everything. So generally, the way we do it now, and this is the way I do it in most of my websites is that all load all of my CSS and a link tag in the head. And that makes sure that all of your CSS is loaded before your HTML is loaded. Because otherwise, if you load your CSS after you're going to get like flashing, where it will download the HTML show you in black and white, and then your CSS gets applied. And you get that sort of like that flashing and your users get disoriented. So the solution is just load all your CSS first and then load your HTML. But that can be slow, especially if you have lots of CSS. So the absolute best way to do it is to do what's called critical CSS where you can use some tools that will figure out based on the viewport of your website, what CSS is absolutely needed for that first pain, meaning that maybe your logo and your nav, and whatever's on your homepage for that specific page. load all of that CSS in just a style tag, above your HTML And then a synchronously load the rest of your CSS at a later time, once the page is actually loaded, and that that'll kick in as your user needs to scroll down. So this again, this requires a little bit of tooling, especially if your homepage is constantly changing. But there is some libraries out there once called critical CSS, and it will sort of look at your CSS, look at your HTML, and then it will figure out what minimum CSS needs to be loaded. And that's called your critical CSS. - -61 -00:35:31,770 --> 00:36:34,290 -Scott Tolinski: Nice, I actually like this section of the the sort of suggestions a lot, because a lot of these things in this section here are going to be stuff that your tools do for you. Like, if I can get free performance gains, just by downloading something or enabling something in my tools, like to me that's as good of a win as possible. So this next one is going to be kind of obvious, is minify your code? Because, well, what minifying does is it replaces things like long variable name strings, and stuff like that, basically long bits of text, and it's going to smoosh it all down and remove the whitespace and make it totally unreadable. What that does is going to essentially reduce the file size. And again, you're sending less big file sizes down the line, everything's going to load quicker. So again, minify is going to make sure that your code just basically is not human readable. And that's not necessarily the point. But the point is to make it doesn't have to be human readable, it has to be computer robot - -62 -00:36:34,320 --> 00:38:05,670 -Wes Bos: usable. And that's what source maps do, right? Like source maps will, right? Take your minified code and your transpiled code. And it will always point you back to your actual authored code at the end of the day. So that's again, one of the lowest hanging fruit you should absolutely be doing a lot of the stuff that we're doing is, is kind of nice extra stuff that you can squeeze a little bit of extra perf out. But if you're not minifying your code and you're not compressing your images, then you're likely doing something wrong, because that's such a such an easy win. Next one I have here is remove unused code. So you can we all have been there where you're like doing Do I need this CSS anymore? Do I need this JavaScript library? Just not gonna touch it because I don't want to mess anything up. So you can use again, you can use some tools that will look at your your website and figure out this is unused CSS, we can remove it. And also I like to have in when I'm writing JavaScript, I like to have my es lint rules where you should never import something that you don't actually use in that file. And that, by default, will just figure out, oh, well, why are my importing this piece if I'm not going to actually be using it in here. So I found that as ever since I was switch to writing JavaScript modules. First, when you stop using a JavaScript module in a file, that code stops getting bundled. And second, es lint lint will yell at you if you accidentally have imported something that you're you're not using anywhere in that module. Yeah, - -63 -00:38:05,880 --> 00:38:36,360 -Scott Tolinski: yeah. And this one kind of goes along with that is just code splitting. Because if you're, what code splitting is going to be doing is basically taking all of your modules and determining what is being loaded at that given point. And, you know, some of the criticism of these front end applications is that we're sending, we're replacing, you know, I guess, a lot of, I don't know, we're replacing sort of standard techniques for sending a ton of JavaScript down the line like - -64 -00:38:37,290 --> 00:38:38,760 -Wes Bos: Greg's to hello world. - -65 -00:38:38,880 --> 00:39:37,560 -Scott Tolinski: Yeah, right, exactly. And that's the joke is say, hey, and you know, you just replaced all this, but now you're sending this huge JavaScript file down the line. So a code splitting is going to do is find out basically, what are the components and what is the code that needs to load at that given time, and only send that in the JavaScript bundle. I mean, I cut off, you know, megabytes of code by initiating code splitting. Basically, if you hit the front page of my website, the user does not need to load all of the JavaScript from the store, right? The store includes a whole bunch of third party libraries for managing payments, that includes a whole bunch of stuff that the the homepage of the website doesn't even care about. And when I hit the store, I can then do that loading of that bundle. And you can break your code up into various bundles that are only, you know, being loaded on demand when you need them rather than at the start. So again, yeah, you don't want to send your entire application online every single time. - -66 -00:39:38,760 --> 00:40:05,340 -Wes Bos: Yeah, I think it's kind of cool with, especially with react and Webpack. And or view and Webpack is that this stuff will be very simple. Like you shouldn't have to think about, okay, what do I need on this page, right? Like, it should just figure out that, oh, this module is not on this page. So it's not necessary to actually load that module and then one You go to the store page, it will kick off the request for that, that bundle that you have there. - -67 -00:40:05,670 --> 00:40:34,560 -Scott Tolinski: Yeah. So basically just using like a dine, they called dynamic imports is that is that the Yeah, so basically using a dynamic import, where the import itself doesn't happen until the resources requested. And if you have like a routes page, and you load up each one of the components for each of your routes as dynamic imports, the router is going to be smart enough. And the code is going to be smart enough to know not to load any of those other bundles. But it doesn't actually you don't just have to bundle it routes, you can bundle wherever you want based on your dynamic imports. - -68 -00:40:36,570 --> 00:41:10,980 -Wes Bos: This was a quick one transpile less, so we're starting to get to a point where you don't have to Babel or Babel everything, you can start shipping some of these things depending on what browsers you support. So I like to recommend to people is use a Babel preset env v n. And that will, what that will do is it's sort of like can I use where you tell it which browsers you want to support. And it will tell you what you need to transpile and what you can keep as native and that way you're going to be transpiling you're not going to translate and the stuff that is unnecessary? - -69 -00:41:11,400 --> 00:41:41,940 -Scott Tolinski: Yeah. Again, smaller, smaller files, right. So here's another one has a great name. It's one of my favorite names and in tooling, tree shaking, which is basically again, finding automatically finding is sort of like what you mentioned with your unused code thing. It's it's finding your your stuff that's not being used that's in the bundle anyways, and shaking it out. It's like you got a bunch of apples in a tree that nobody is using. You shake them out of their trees a little bit less, less heavy. - -70 -00:41:42,330 --> 00:41:44,220 -Unknown: Tree Chicka Yeah. - -71 -00:41:44,220 --> 00:41:54,110 -Wes Bos: Do you ever watch that? That show? Where they catch? crocodiles? Like they hunt crocodiles every in like the buy you down in? In the south? - -72 -00:41:54,380 --> 00:42:04,530 -Scott Tolinski: He talked about like, the swamp people? Oh, I thought you're talking about like the Crocodile Hunter like the name. Steve Irwin. No, yeah, - -73 -00:42:04,860 --> 00:42:14,480 -Wes Bos: no, I'm talking about swamp people. They got this. I think it's down in Louisiana, somewhere in the in the by you. And he's like, every time he's got a big one. It's called the - -74 -00:42:14,480 --> 00:42:16,500 -Unknown: true Chicka chicka. - -75 -00:42:19,350 --> 00:45:23,250 -Wes Bos: That's good. Next one I got here is a sink in differ on your script tags. So there's a fantastic website here that just breaks it down. So so simple. And the idea here is that when you load an HTML page, and you have a script tag in that page, what happens is your HTML starts to, it loads all the HTML, and then it starts to parse the HTML, which means that okay, I've downloaded this HTML file, I'm gonna go top to bottom and start parsing every single line, oh, this is an h1 tag, this is an h2 tag, this is a span, oh, this is a script tag. So then it it sort of pauses on the script tag and does a couple things. So it poses its own HTML parsing. And then we'll go out and download that script tag. And then when it comes back, it will also parse the contents of that script tag, and then it will keep on going with its life. And that's what we refer to as blocking, meaning that the HTML sort of just puts itself on hold while it downloads and parses the the script tag. So what you can do in your script tags is you can give it an attribute called a sync. And what a sync will do is in it will kick off the download of your JavaScript while it's still parsing the HTML. And then once the download of the J s is finished, it will it'll pause itself and actually, and actually run your JavaScript or parse it, that's the word we use. And then there's also another attribute called defer, which what it will do is it will, it'll parse all the HTML at the same time download it. And then at the very end of the HTML being parsed, it will, it will parse the JavaScript and actually run it. So take a look at this blog post, I probably didn't do a very good job at explaining it. But it just has these really good diagrams as to when things are happening. And as a general rule of thumb, you probably want to pop in a sync tag on your, on your script tags, which will definitely speed things up sick. Let's take a quick break and talk about one of our sponsors, which is O'Reilly's fluent conference that's happening in San Jose from June 11, to June 14, from the 11th as well, they've got some training and they and from the 12th, to the 14th. They've got the conference going on and what floon comp is conference dedicated for web developers, it used to be entirely JavaScript focused. Now it seems that they're they're broadening it just to web development in general. But I actually spoke at the very first flume conference many years ago and they invited me this year. I couldn't make it unfortunately, but I can definitely tell you that it is a great great conference and if you are looking for a conference to go to that is front end web development focused, I would definitely check this one out. I'll take it from the top. So if you want to check out fluent, go to conferences.oreilly.com and use the code syntax that's going to get you 20% off. Hopefully enjoy it. I love going to conferences, and this is definitely one that you should check out. - -76 -00:45:24,240 --> 00:45:25,710 -Scott Tolinski: Nice, nice. - -77 -00:45:26,010 --> 00:45:29,520 -Wes Bos: Beauty. So let's keep rolling. What are we going to talk about now? - -78 -00:45:29,760 --> 00:45:57,780 -Scott Tolinski: Yeah, so we got fun. So one of the things that we mentioned earlier on with svgs is use SPGs. In place of icon fonts, icon fonts are big. Typically, they take a long time to load, you get a whole bunch of like, if you're using 10 icons from an icon font, there's probably about 115 icons that you're not using and your users loading all of those. So again, like do you really need to load all of those fonts in there, I mean, replacing them with an inline, SVG is going to save you some cavies. - -79 -00:45:58,260 --> 00:48:52,680 -Wes Bos: Next one is really easy when you see a lot of people just scrapping Web Fonts altogether. Because Because Web Fonts can can be pretty large, especially if you just take a normal desktop font, you try to convert it yourself, it's not uncommon for it to be several hundred k B's. So using a native font stack, which is using the fonts that are already installed on your user's computer, is a great idea. So the dash Apple dash system font, it will use the San Francisco font built into your users operating system, it looks great. And then there's there's also blink Mac system font. And then this is really nice font sack, I'll put it in the show notes that will it will find the best Sancerre fonts that are installed on like almost everyone's computer, and you get a really nice fast loading website. And it just looks really, really slick. So use a native font stack if you can, without having to load those custom web fonts. But if you do have to use a custom web font, there is a new property in the browser that is called font display. And this is actually not one that I've used myself, I just asked on Twitter, about some perf tips for this, and a bunch of people said to use font display. So I'm just gonna go through the docs and explain exactly what it does. So here's the problem that it solves. If you have a website, sometimes you are just sitting there looking at a website and the text is unreadable. It's it's like invisible text. And you can you can select the text and you can highlight it, but you can't actually see what the letters are. And that's because your entire website has loaded your CSS has loaded, but your web font is still trying to download it and come back. And that's extremely frustrating to users, because they likely do not care that you're trying to load in Roboto, when they have a perfectly good Helvetica on their computer. So font display, what it will do is it tries to like find a happy medium of when the browser will cut over to a fallback font. So there's the whole idea of a block period, which is when you have that invisible ness that's by default, there's a period where it is swapped. So if the font face is not loaded, any element attempting to use it must render a fallback font face. If the font faces successfully loads during this period, it uses it normally. And then there's a failure period as well where it will fall back to your other one. So that's another one that I would definitely check out especially if your users are on sort of like spotty 3g, most mobile phones are going to support this font display property. And likely when somebody is trying to get like look up directions or trying to pull something up on a spotty 3g connection. They do not care about your fancy font. They're just trying to get the information of the website. - -80 -00:48:53,370 --> 00:49:38,220 -Scott Tolinski: Nice. Okay, so before we get into the sick tips, let's talk a little bit about troubleshooting this stuff. I actually feel like maybe this we could do like an entire episode on troubleshooting performance. Yeah. I mean, if that's something you want to hear us dive deeper into other than just a quick mention, at the end of this episode, let us know, I think we could fill a whole episode worth of this stuff. But some of the, the easy things are to fire up the Network tab in your Chrome Dev Tools, give the page a reload. And you can see exactly how long everything is taking to load. And it happens in sort of day to day is that is that called the waterfall. Where one happens the next happens the next happen. So yeah, it's that I'll show you Yeah, - -81 -00:49:38,250 --> 00:49:58,350 -Wes Bos: it'll it'll show you like what is depending on other like one request kicks off another request kicks off another request. So it'll definitely point out like what is slow and how long things are taking in there. So they have that but then each the Network tab also shows you how long each resource has taken as well as how big each resource is. - -82 -00:49:58,649 --> 00:51:07,050 -Scott Tolinski: Yeah, and it will show you next With all that on a timeline with screenshots of your application, yeah, you can see if there's one thing in particular that's blocking that first paint, you can figure out a way around to block that paint. It's just super, I don't know, it's super handy, handy, handy. Again, we could talk a lot about the Network tab and some of these other other tabs in your Chrome Dev Tools. There's also, I think, a good tip is to simulate slow network speed. Because really, I mean, you're used to, many of us are used to just using this, this application on a fast earned network. So if you add to the Performance tab in your dev tools, there's a little gear in the top right, you can click that. And you can simulate a slower network speed for fast 3g, slower 3g, you can do CPU throttling, you can do all this stuff and load your app. And again, see some screenshots of everything going down, what your users might be using this on slower, less powered devices, or perhaps bad network connections. Last thing you want to do is have the experience be downright bad for everyone. - -83 -00:51:07,439 --> 00:51:58,530 -Wes Bos: Yeah, I even know some people take like one day a week or or one day a month, and they turn this on on their entire computer. So they can simulate what it is like working on a slow, slow network on their entire website. And on their entire computer, which is great. I had this myself is I pulled up my ESX at i o course on a slow connection this weekend. And I realized that the fonts were loading in times the Roman for a quick second, and then flipping over to my custom web font. I was like, damn it like I should have a better font stack for that. How did I miss that? And it was because it was first because I had the the font always installed on my computer. So it was installed. Right? Yeah. And also I'm Oh, if I wasn't, I was always on a fast connection. That wasn't an issue for me. And then I looked at I was like, that looks terrible. How could I let that slip and I should turn this thing on before I launched the site. - -84 -00:51:58,889 --> 00:53:03,960 -Scott Tolinski: Yeah, I one of my I was using App I made called B boy tools, which is to like, store my breaking moves and stuff in it. And I was using that at practice the other day, and there's like no connection and practice. And I was like, this sucks. What am I doing? Like, I mean, it's a hobby project. So I haven't put the time into it. But like, I would click click an action that would have to hit the database, but the database because the network was too slow. So like the action didn't have any sort of indication that it was doing anything and all these sorts of things that I should have seen. I mean, that's a hobby project. But all these things I should have seen just by simply simulating a bad network connection, and maybe doing some optimistic UI stuff and all that sort of stuff. Lastly, we have something called a mu not Lastly, you might have another one. But we have something called PageSpeed, which is a Google, basically you drop your site into PageSpeed. And it spits out a whole bunch of tips that says, hey, you were doing this well, and you're not doing this. Well. This is one of the first tools I ever used to open my mind towards performance, when you would first drop your site into PageSpeed. And it's like you get a big old fat F. But luckily, it gives you a big old list of stuff to fix. - -85 -00:53:04,529 --> 00:54:05,310 -Wes Bos: Yeah, I love that. It's almost like a game like one a couple years ago, great. Yeah, there's a, I have a YouTube video on this. Basically, my PageSpeed was brutal. And I just like, threw my screen recorder on. And I was like, Alright, I'm going to try to fix my WordPress website, it's really slow. And I'm going to go through all the recommendations that it has. And I would just sort of take one off, and then show people how I fixed it and then take another one off and show people at a certain point at Google just wants you to serve up a blank page with nothing. That is 100. So there are some things that you kind of have to ignore being like, of course, I need a style tag. Otherwise, it's not gonna load. But there are some fantastic recommendations on that page. And it was stuff that I had just like, I didn't even know that I was doing it like I wasn't compressing my images properly, or I didn't have the right caching turned on in my ht access file. And they're just like small little wins that if you spend an hour or two on your own site, you can really improve your perf - -86 -00:54:05,820 --> 00:54:07,380 -Scott Tolinski: about it. Love it. - -87 -00:54:08,400 --> 00:54:22,290 -Wes Bos: So I think that's all we got today. That's, that's quite a bit a little tips. I know there's only 1000 more. If you have any more tips of yourself, please tweet them at syntax FM. I always like to hear it like to retweet those to other people. - -88 -00:54:22,860 --> 00:54:35,580 -Scott Tolinski: Yeah. And also, if you'd like to hear us do an episode on using your dev tools to troubleshoot performance, or just troubleshoot in general. Maybe we should just do a whole site on Dev Tools tips. Yeah, we should totally do dev tools. - -89 -00:54:35,580 --> 00:54:37,050 -Wes Bos: I'm down. - -90 -00:54:37,590 --> 00:54:39,780 -Scott Tolinski: Yeah, gotta be down with dTT - -91 -00:54:39,960 --> 00:54:43,740 -Wes Bos: All right, I'm at dTT I'm down to dev tools - -92 -00:54:44,040 --> 00:54:48,660 -Unknown: to be t dTT. It's great. Love it. print it. - -93 -00:54:49,260 --> 00:54:52,170 -Wes Bos: Awesome. What about you got a sick pic for me today? - -94 -00:54:53,070 --> 00:56:31,380 -Scott Tolinski: I do. Okay, I do. I have a sick pic. And this is one that I took a chance on. So to say like I wasn't quite sure if this thing was going to be great. This is a smart power strip that I got. Now this smart power strip is considerably cheaper than all the other ones on Amazon. So at first I was sort of like I don't know. But it's it's basically a smart power strip that has four different plugs in it. And then four USB plugs, it connects to a smartphone app. But it also works with Alexa and google assistant and all that stuff. But you can turn off any of the individual ports, you can turn them all off. Again, it has four USB ports, the USB C ports, but I set this up on my porch to do like routines. So you can hook it up to timers and do like sort of standard timer routines. But you can also, like I said, hook it up to the Google Assistant, which if I say the words right now, the one on my desk is going to start beeping so I'm not going to, but you just say hey, turn on the lights, or better yet with my phone because I have the pixel two, I just squeezed the phone and say turn on the lights and then the lights turn on. It's a it's a cheap, it's a $30 power strip. And it is for the price. I mean, it's the smartest $30 power strip I've ever bought. And it's worked really well for a couple weeks for me. So I've been really impressed when I first started Googling these power strips, I was seeing a ton of overpriced sort of not what I was looking for stuff. So this is this I'll link this one up in the video description. It comes in black or white, nice, super easy to use. Super easy to connect. Perfect. - -95 -00:56:32,340 --> 00:56:36,360 -Wes Bos: Yeah, you can turn off each each one individually like those four. - -96 -00:56:36,360 --> 00:56:55,020 -Scott Tolinski: Yeah, and the app, there's like you can give them names. So you give them names. So if I want to say turn off the patio lights, it's going to turn off the one thing specifically and the other one I could say turn off the porch heater turn off the you know the the radio or whatever. Yeah, that's pretty sweet, right? Yeah, I'm - -97 -00:56:55,020 --> 00:57:14,940 -Wes Bos: gonna we're gonna do a show on like this home automation stuff, because I've been super into it as well. last little bit. And we'll Yeah, we'll have a whole show on that at some point because I've got the I got a camera and doorbell and all these different plugs. And it's the whole house is almost voice activated now. - -98 -00:57:14,940 --> 00:57:30,330 -Scott Tolinski: Oh, nice. I've been really wanting to do more of that. I'm trying to figure out a solution. We have a fence, right and it has no lock. I want to figure out a smart, smart fence lock situation, but it doesn't look like there's anything like perfect for me. So I'm gonna have to get get some smart hacking going on. Oh, yeah. - -99 -00:57:30,360 --> 00:59:13,890 -Wes Bos: Yeah, it's it's funny how many times you think like, Oh, I could just hack together a little Arduino. And you realize that you have no time? Yeah, exactly. All right. Mine is not I don't know if this is necessarily a sick pick yet. But I just like to talk about the stuff. It seems like there's a lot of little gadget heads that listen to this podcast. And it's kind of cool to just share different stuff that you're trying out like those those charging cables that I've been using those magnetic ones. Those are pretty neat. So what I did on my last flight is I forgot my headphones. So I had air pods and my bluetooth headphones. And it didn't have any way to connect to the inflight entertainment system to watch a movie. And so I because I forgot the actual cable and went to a whole bunch of places no one had one. So I was like, whatever, I'll use the crappy ones that they give you. But when I was just boarding my flight just before I found this little thing at the drugstore, and it's a it's a little Bluetooth adapter that will take an ox in and then it will just transmit it via Bluetooth so that you can you can convert the inflight entertainment system or really anything that has an ox out into a Bluetooth hotspot which is super cool and then you can use my headphones without it and first of all, it was amazing because I always get tangled up in my headphones when I'm trying to trying to go to the washroom on a plane or something like that. So I had no no headphone cord that it was at times it did have like a like a quarter or half a second delay which it was a little bit noticeable so it's not perfect because I don't know Bluetooth is Bluetooth is it's so good, but it's so garbage at the same time. - -100 -00:59:13,890 --> 00:59:18,060 -Scott Tolinski: Yeah, it's one of the it's one of the best worst technologies that exist. Yeah, - -101 -00:59:18,060 --> 00:59:56,580 -Wes Bos: it's like when it works, it's the best and when it doesn't, you're pairing it for half an hour and you can't figure out like my keyboard. I couldn't pair my keyboard the other day and I wasted like half an hour trying to get the pair but this little thing has got a like a nine hour battery built right into it. And I'm also thinking like, you can go on you remember like those old Bose sound Doc's that have the 30 pin connector for your iPod. Those things are those things are dirt cheap on on like Craigslist right now and yeah, you could just go and buy one of those and plug like a little Bluetooth adapter into the back and you have like a Bluetooth sound doc - -102 -00:59:56,640 --> 01:00:03,210 -Scott Tolinski: I was just thinking about like donating one of them because it's like I don't have the port anymore. But he already does have an ox port dev the - -103 -01:00:03,600 --> 01:00:26,400 -Wes Bos: use case for it. It's a speaker at the end of the day. So definitely check that out. I'm pretty happy with it. I'm still I wasn't thrilled about the little bit of a delay. But I thought it was pretty neat to mention it. And we'll see it's called a Ks wireless airline adapter. Sick. Sick. All right. What about uh, what do we do shameless plugs? - -104 -01:00:26,609 --> 01:01:38,160 -Scott Tolinski: Yeah, hey, I'm gonna announce my next Pro Series right now. I was gonna do it on Friday, and I didn't do it. So now's a good time to do it, I will be doing a Vue JS for everyone, which is going to be a 20 part video series, teaching you the basics of view. So basically, we're gonna be building a project that's like the movie database that we did for react 16, that's going to be showing you how to get started how to understand view without by its first get started in view as sort of just like a Hey, throw this onto a div on a website, then it goes into more of the application building stuff. It goes through routing, it goes through hitting API's, it goes through all of the basic foundational skills that you'll need to build a straight up view, j. s app. So it's using all modern techniques, async, await all the straight up modern stuff that you've come to expect from level up tutorials, tutorial videos, so check it out, level up tutorials.com, forward slash pro or just hang out until the end of the month when the series is released. And you can purchase it outright. So it's going to be Vue. js for everyone is going to be available for level of pros Sign up today and get access to all of the excellent level up tutorials pros series that are available right now. - -105 -01:01:38,940 --> 01:01:50,190 -Wes Bos: Sweet. People are gonna be really excited about that. So all that like every day, I probably get maybe 700 DMS, from people asking me to compare react in view, - -106 -01:01:50,220 --> 01:01:54,420 -Scott Tolinski: we need to have that episode because I'm ready to do that. I'm very ready to do that. Yeah. - -107 -01:01:54,510 --> 01:02:48,720 -Wes Bos: All right. Let's say I've been taking it on. I got a lot of taking notes. Oh, yeah, well, it'll happen the next couple episodes, then let's do it. I'm just gonna give a little update on my advanced react course. So I am almost done building the application that we want. It's a big app, it's going to be a big course I'm really excited for it, it's going to cover it's going to be full stack, advanced react and graph QL. Meaning that we're going to build the back end API. We're going to build the front end with advanced react in in graph QL. I've just been working on the last couple days have been working on writing all the unit testing of the actual components I've been using gesture that pretty excited about all of that. So I'm still probably a good month, month and a half out from from actually releasing actually got to record it and everything like that. But the app we're building is, is getting nice and polished. So look forward to that. - -108 -01:02:49,140 --> 01:02:49,650 -Unknown: Yeah, - -109 -01:02:49,650 --> 01:02:55,730 -Scott Tolinski: speaking of much testing, got an episode on that, too. Our episodes are just non stop. We got so many to do, - -110 -01:02:55,979 --> 01:03:05,370 -Wes Bos: man when we started this podcast, I was like, how will we ever like once we've done react and a couple of them? How will we ever know what to talk about? But the the list just keeps on growing? - -111 -01:03:05,609 --> 01:03:09,540 -Scott Tolinski: Yeah. Unbelievable. Sick. All right. That's all I got. - -112 -01:03:10,049 --> 01:03:11,010 -Wes Bos: See you next week, - -113 -01:03:11,010 --> 01:03:22,290 -Scott Tolinski: right, please head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show - diff --git a/transcripts/Syntax39.srt b/transcripts/Syntax39.srt deleted file mode 100644 index ec01f66aa..000000000 --- a/transcripts/Syntax39.srt +++ /dev/null @@ -1,496 +0,0 @@ -1 -00:00:01,290 --> 00:00:04,560 -Unknown: You're listening to syntax the podcast with the tastiest - -2 -00:00:04,560 --> 00:00:10,590 -web development treats out there. strap yourself in and get ready. Here is Scott solinsky and West boss. - -3 -00:00:10,619 --> 00:00:27,480 -Scott Tolinski: Welcome to syntax. In this episode we're gonna be talking about jQuery is jQuery dead, which is the clickbait title. This episode. So as a as always with me is Wes Bos. - -4 -00:00:27,660 --> 00:00:28,620 -Wes Bos: Hello, hello. - -5 -00:00:28,650 --> 00:00:29,700 -Scott Tolinski: Hey, how you doing today? - -6 -00:00:29,700 --> 00:00:43,230 -Wes Bos: I am doing fantastic. I'm all we're recording on a Tuesday instead of a Monday morning right now. So I'm all juiced up and ready to go. Yeah, so is I'm not as sleepy as I was. It would be on a normal Monday. How are you doing? - -7 -00:00:43,290 --> 00:00:53,130 -Scott Tolinski: I'm more sleepy, because I didn't get any sleep last night. But I'm highly caffeinated. So get ready to go. Yeah. - -8 -00:00:53,160 --> 00:00:57,690 -Wes Bos: Because of because of the baby. Yeah. Yeah, it - -9 -00:00:57,690 --> 00:00:58,680 -Scott Tolinski: was just some nights, - -10 -00:00:58,950 --> 00:01:11,310 -Wes Bos: just like, most nights for me. But not anymore, though. It's been pretty solid. I had a rough night a couple a couple nights ago. But it's only like maybe once every three weeks that you have a rough night. - -11 -00:01:11,340 --> 00:01:14,790 -Scott Tolinski: It's Oh man, I dream of that life right there. It's - -12 -00:01:14,790 --> 00:02:05,430 -Wes Bos: it's really it really makes you appreciate sleep. Alright, so today we are sponsored by two awesome companies. First one is a new sponsor Log Rocket and the Log Rocket is sort of it does this guy and I were talking before this, it does all kinds of stuff. And we sort of settled on that it does, it does three things. It does exception tracking, which is if errors are happening on your clients website, how do you know if they're happening happening, it'll log that it does session replay. So how did an error happen, it'll play that again. And that does performance monitoring. So we'll talk a little bit more about all three of those things. But that is a Log Rocket. Thanks so much to them for sponsoring. And the second one is Freshbooks, a success cloud accounting. I'll talk a little bit more about their services partway through the show. - -13 -00:02:06,900 --> 00:02:07,560 -Scott Tolinski: sick, - -14 -00:02:07,799 --> 00:03:02,730 -Wes Bos: sick. So let's talk all about jQuery. jQuery is I think everybody who has learned programming and or web development in the last 1015 years or so I don't even know how old jQuery is. But it's been around forever. It's got this sort of spot in your heart where you really do love it. That's it sort of you think back to the the old days of jQuery, where you would write your plugins and all this stuff. And it seems that we're migrating away from jQuery. And there's there's a lot of thoughts on either end of this, whether it's it's still relevant or not, if he should still learn it or not. And that's sort of what we're gonna we're gonna try to do today is to tackle whether or not jQuery is still relevant, and tackle why maybe people are sort of moving away from it. But let's take a little trip down memory lane. What is your experience with jQuery there, Scott? - -15 -00:03:02,970 --> 00:03:59,520 -Scott Tolinski: Yeah, I mean, jQuery is one of those things that you learned alongside of all sorts of stuff. Maybe you were hacking together WordPress themes are doing that sort of thing. And, well, you needed the slideshow, because every website needed a slideshow. So you went to that? What's the best way to get a slideshow? Okay, well, uh, I guess jQuery, right, you just throw in a jQuery plugin. And if you don't know jQuery, at that point, you just hope you don't have to modify the plugin. Because if you do, you don't know what to do, right. So that was my sort of experience and just learning how to interact with the DOM, right, throwing in on things to animate things or whatever. But at the end of the day, it was really just, you know, tossing in a jQuery plugin, and then saying, oh, how wonder how this plugin works and investigating a little bit more, and then trying to fix maybe issues or add on to things or whatever. And then you just sort of understood a little bit more and more of jQuery. - -16 -00:04:00,870 --> 00:05:06,000 -Wes Bos: Yeah, I had a bit of a similar intro to that I would do a lot of WordPress websites. And along with that, you would find different jQuery plugins that you want it and you can kind of sling them and I'll have different functionality to your website. jQuery conference was one of the first conferences I ever went to. I sort of cut my teeth in helping people learn to code via the jQuery chatroom. I met a lot of fantastic people in the jQuery chatter, IRC or the Yeah, the IRC room way back in the day and people would i would post my own questions, and I would stick around and I spent a lot of time in jQuery and I'm very thankful to it. For really shaping my career, my career I was talking to just like, maybe about two years ago, I talked to Boaz, who who works at a company called Boku and he said that he should get a j Cray tattoo because it basically built his career. Yeah. I think that maybe I'll get a jQuery tattoo just because it totally built my career and totally - -17 -00:05:06,000 --> 00:05:55,050 -Scott Tolinski: just removed the barrier to entry for a lot of things like I remember looking at the, you know, even back then people would say, well use vanilla j. s for this, and I didn't know JavaScript very well. So I would look at the vanilla j. s solution. And then I would look at the jQuery solution, I'd be like, I think I'm gonna go with the jQuery one, because this is way easier. Yeah. And it did it. It just opened your mind and let you accomplish things, which is one of those things that I think is like a huge thing for learning is actually accomplishing things rather than just sort of, like trying to accomplish things. So if you get things done, you're going to be more likely to want to come back and do more things. So jQuery definitely removed a lot of those barriers. So, so I'm along the same lines, if you ever write any jQuery plugins, and if so what was your first jQuery? Yeah, - -18 -00:05:55,380 --> 00:06:20,970 -Wes Bos: I, I'm trying to think back to what my very first jQuery plugin was, because I remember Ben Allman, who was like Mr. jQuery plugin, he wrote a ton like he wrote jQuery BBQ, which did the like, remember, when you had to do like changing the page URL without refreshing the page, you had to use hashes? Yeah. And he wrote this BBQ, which did like back button in query, I forget what it was, but he jacks, - -19 -00:06:22,079 --> 00:07:13,410 -yeah. And he built so many amazing jQuery plugins. And he had this sort of boilerplate that had like a set up and a tear down. And once I saw that, my mind was just open, I'm like, oh, I've just been writing tons of jQuery, I could be making it into this nice tidy reusable plugin. And I think that the first thing that I did was jQuery equalize columns, or something like that, where if you had three divs, that needed to go side by side, and they need to all be the same height, what it would do is grab all three divs, it would find the height of all three, it would run it through math dot Max, and then it would apply a dot height to the rest of them nice. And then it would also listen for like a window resize. And when that happened, it would rerun it, you remember, you would have to set like hard widths and heights on things and then recalculate it on on window resize. Oh, - -20 -00:07:13,410 --> 00:07:21,269 -Scott Tolinski: yeah. I mean, that's like, essentially, the whole like, Pinterest layout thing is all just, you know, very hard coded. That's, that's pretty dope. Uh, - -21 -00:07:21,269 --> 00:07:22,560 -Wes Bos: yeah, yeah. What about you, - -22 -00:07:22,560 --> 00:08:11,190 -Scott Tolinski: my first plugin was down down to fade, is what I called it. This is how a plugin was is probably terrible. I would love to find the code and look at it. It's It was probably terrible. But it really just, it was four page transitions. You lit up a page, and it was a lately well, like stagger load, fading transitions, that's all it did. You just you just applied it to a list of things. And when that list loaded, it would slowly fade in each one sort of staggering it. So yeah, that was my first one. I just wanted to have it a nice little like, I don't know, I've always loved transitions, like staggering effects and stuff like that. So it was nothing fancy. It didn't do any lazy loading or anything. It was just purely cosmetic. - -23 -00:08:12,540 --> 00:09:30,570 -Wes Bos: Awesome. That's that's always fun to hear what what people think, what their first plugins were and how to use it. And I also think like going back to is Jake, jQuery was such a huge push to move the web forward, because it first like it lowered the bar so that like, almost anyone could get in there and build something like, I didn't learn JavaScript before I learned jQuery. I just like dove straight into jQuery. I think a lot of people did that. And slowly past that, I started to actually learn proper JavaScript, but I was able to, like get things done without really knowing what I was doing. And then I at the same time, it made the experience of the web much nicer because doing a lot of this stuff in in vanilla JavaScript would have been a nightmare. And just not possible. Especially we're talking about cross browser back in the day. So big props to jQuery was also we had jQuery UI, which was sort of like a UI library that had things like drag and drop and resizeable liners and all sorts of sliders and tabs, and all these like fun, like UI things that you would use over and over. But then it also come with some base CSS that just makes you cringe now that when you look at it now, whenever you visit a jQuery UI website, you're just like, oh, did - -24 -00:09:30,570 --> 00:09:44,030 -Scott Tolinski: you add did you use jQuery UI? Because I, I, I did not use jQuery UI specifically, because the styles, and I know you override and stuff like that, but I will do different plugins. instead. - -25 -00:09:45,000 --> 00:10:19,160 -Wes Bos: I would take jQuery UI, and then I would try to like change the CSS. And that was always a nightmare. So what I ended up doing and I didn't realize you could do this is you just throw out all of the CSS and just use the JavaScript library to give you things like draggable and droppable and All these different UI paradigms, and then you can just add your own CSS on top of that, as long as he knew what you're doing in the CSS realm. So I was very much happy when I realize you could just throw out the CSS part because it didn't need to look like absolutely every single jQuery UI website out there. - -26 -00:10:19,160 --> 00:10:57,420 -Scott Tolinski: Yeah. Yeah. There was one it was also a came along at an interesting time, too. And, and right along the time that the jQuery UI came out with jQuery Mobile, and jQuery Mobile sort of made your entire site look like I don't know, like the iPhone, iOS, one interface style of things. And I remember it was like, for a long time, every every meetup or tech demo, or anything that you went to that was about mobile for the web was using jQuery, we'll just throw jQuery UI on this and all sudden, we have an iPhone layout is sort of a precursor to some of these, you know, native libraries now? - -27 -00:10:57,990 --> 00:11:07,170 -Wes Bos: Yeah, it didn't really. There's still a couple websites I know, like the Government of Canada uses uses that quite a bit, which is really funny. Every once in a while you'll - -28 -00:11:07,170 --> 00:11:10,140 -Scott Tolinski: come across an older mobile app or something. - -29 -00:11:10,170 --> 00:11:45,450 -Wes Bos: Yeah, yes. This is jQuery Mobile. Yeah. I it's funny, because I there's a couple times in my career that I sort of like was ready to bet the farm on attack. Yeah. Like I was ready to be the jQuery Mobile Dev. Oh, nice. And it just never really took off. And same thing with numerous Sencha touch. I'm sick. Sencha touch was the cycle, like native mobile framework, or it felt like native and they were doing things like, like, way bad. Like, this is kind of like the old dudes talking about the old days, but you used to not be able to do physician fixed on the iPhone? Do you remember that? - -30 -00:11:45,870 --> 00:11:49,050 -Scott Tolinski: I never had an iPhone. Oh, - -31 -00:11:49,260 --> 00:12:15,360 -Wes Bos: cuz you just couldn't do position fixed. So if you want it to have like a bar, and scroll a div with a bar on top, there was like a whole bunch of hacks that you had to do Geez. And like it was because there was no like div overflow scroll there, it was just not possible on the phone, like you would have to use two fingers to to scroll and overflowed. So they would listen to touch events, and just emulate this whole scrolling interface. I just we've we've come - -32 -00:12:15,360 --> 00:12:40,950 -Scott Tolinski: a long way. Remember when that had like, I honestly don't remember iOS not supporting position fix. But I totally believe it because there's all sorts of dumb stuff like that. I mean, even right now, actually position fixed on iOS, Safari is a total mess. If you do position fixed, and you have an input in there, it jumps the input all the way around, and you can't get around it other than by not making a position fixed. It's like how does that it's fun. Does that still exist? - -33 -00:12:43,200 --> 00:14:41,040 -Wes Bos: So the what we're trying to say here is that like, never forget where you come from. jQuery sort of raised us and I owe my entire career to jQuery. However, like my own my own product websites still use jQuery to pop up the little payment dialog and to do a little bit of stuff like that. But if I'm starting a website today, like my free my free course sites, that was built at a later point in my career, and those don't use jQuery, and anytime I'm building a website now I don't reach for jQuery. In even if that's not just because I'm building it in react or something, if I'm just doing a simple little website, I do opt for using just vanilla JavaScript. So we're going to talk about like, why, like, what are the alternatives? Why is jQuery going away? And it sort of go into all the different big pieces of jQuery that it used to do it wouldn't have two selectors and Ajax and Dom traversal. And it had some utility functions. And it did cross browser normalization it did event listeners, it did animation it did like it was just this massive library that just did absolutely everything for you. And I feel lately, too, what's Yeah, it was the best. And I think I feel like what's happening now is that we're going into the sort of like, smaller, not necessarily size, because people tend to complain a lot about the size of jQuery, which I don't I understand it on some situations, but it's really, I don't think it's something that you have to sweat to too much. We talked about that last week. There's a lot of other things you can do for performance. But we're sort of just going for the smaller libraries that if you need something to do Ajax, or you need to do something to do Dom traversal. Or if you need to do something a utility library, you can just pick these small little pieces up and just bring that in when you need it rather than bringing the entire library without it. So yeah, what do you what do you have to say before we get into it? - -34 -00:14:41,070 --> 00:15:49,020 -Scott Tolinski: Yeah, no, I think it's just like what you said, like I agree, I didn't, I didn't learn JavaScript. Before I learned jQuery, essentially, alongside JavaScript, but I didn't. I didn't learn JavaScript as a way to interact with the DOM, because the ways to interact with the DOM weren't cross platform weren't, you know, readily and easily available. And that's what you that's where I learned jQuery for, you know, it was like, this is how you interact with the DOM. And, and it made it very nice and easy. And again now, like, people want to hate on jQuery, right? They want to say various things about jQuery, but it's really not jQuery fault. It's more or less that the browser's in the JavaScript tools that we have are getting better and better. And, you know, they just jQuery isn't as necessary anymore. Because the stuff that we can do is is now cross platform, it now doesn't rely on any of the things the reasons why we initially use jQuery in the first place. So yeah, again, to reiterate your point, yeah, jQuery isn't bad. Everything else, as you're just getting better, has just been better, better. - -35 -00:15:50,070 --> 00:16:57,050 -Wes Bos: Alright, so let's go through all the different pieces of jQuery and talk about what you might use as an alternative to that piece. So the first one is the selector API, and the return of the jQuery object. So I'll explain what this is really quickly. So one of the beautiful things that jQuery brought to us was this little library called sizzle. And what sizzle did is it gave you the ability to use CSS selectors in JavaScript. And you can select any element based on any CSS selector, that you had used another also even a few that you hadn't been able to use in CSS that you could use in jQuery. Now, that was amazing. However, when document query selector and document query selector all had shipped, it shipped with pretty much the same set of selector options. So any selector that you had previously used in CSS or in jQuery, it's now doable in in vanilla JavaScript, so there's, there's no need to do dollar parenthese quotes, you can use these document dot query selector. - -36 -00:16:57,090 --> 00:17:18,210 -Scott Tolinski: Yeah, and I mean, if you if you're still using jQuery for this, and you know, this query selector all is compatible with all major browsers, I mean, it's compatible 911, you know, pretty much anything that you're going to use, the Can I use is like all green for this. So there's really no reason to use the jQuery selector find over the query selector, all unless you're needing that jQuery object. - -37 -00:17:19,609 --> 00:19:37,920 -Wes Bos: Um, another kind of cool thing that that jQuery did it sort of along the lines of the selector API is, is when you selected something, what would happen is that it would return to you not the actual elements, but it would turn to something called a jQuery object, and that jQuery object would would have the elements in it, but it would also have all these methods on it that like fade in and fade out and color and dot CSS, and every all of the, I think there's like 360 methods in jQuery. And that isn't as nice in jQuery, because our sorry, in vanilla JavaScript, because first of all, dollar is much nicer than document query selector. Yeah. Yeah. But I like to use this thing called blink dot j s. And what blink j S will do is it will just map dollar sign to document dot query selector. And dollar dollar to document dot query selector all. So this is based on something Paul Irish had put together many years ago. And I even use it in my I even use it in my my note course, it's amazing, because you can just have like a quick syntax for it. But then the other thing that it doesn't do is that if you want to immediately call like add event listener on something and it doesn't exist, that's another pain that you you often have without jQuery is that if you select an element, and that element doesn't exist on that page, in jQuery, you can just call methods on it. Yeah, and it will fail silently in vanilla JavaScript, they will error out. So there is some in this blink dot j s, it will sort of extend the prototype of a node list, which a node list is something that query selector all will bring back to you a list of elements. And it'll allow you to use.on rather than dot addEventListener. And and then it'll allow you to listen both on things that might not exist. As well as if you have an entire array of elements, or a node list of elements. Sorry, it will allow you to listen on multiple elements. So with I think, what is this 15 lines of code, you can replicate two of the best parts of jQuery. Yeah. In vanilla JavaScript. Yeah. Never - -38 -00:19:37,920 --> 00:19:39,540 -Scott Tolinski: uses bling. That sounds great. - -39 -00:19:39,570 --> 00:19:44,040 -Wes Bos: I mean, yeah, I'll send you a link on slack right now. Yeah, I'll put it in the show notes as well. Nice. - -40 -00:19:44,190 --> 00:20:04,200 -Scott Tolinski: Yeah. So I mean, it's just like that, that that goes to show you it's like, right, like jQuery. One of the reasons why jQuery is so large, it has to support X amount of browsers still. It needs to have all this additional stuff, but if you want to just take a little bite out of the funk You just use some of that stuff. It's nice to see little libraries like this. - -41 -00:20:05,060 --> 00:20:42,050 -Wes Bos: Yeah, big fan of blink j s, it just makes those little annoyances because I find that vanilla JavaScript has a lot of tripping points, especially when you're learning JavaScript or working with the DOM for the first time. There's a lot of little gotchas. Like, for example, a node list is not a true array. So if you want to use some some of the methods on a node list, like map, you have to convert it to an array first. And jQuery just took care of all those, like, little like gotchas that are so so frustrating when you're trying to first learn program. - -42 -00:20:42,050 --> 00:21:36,000 -Scott Tolinski: Yeah, especially because like, Can you explain that that exact concept Oh, it's not an actual like array to someone who doesn't even really, truly understand what the heck they're doing anyways, right? Like that, that just clouds everything so much to the point where, I mean, that would frustrate any new person trying to learn this stuff. And it's obviously one of the reasons why jQuery is so appealing, because it just took all that those pain points away from you. Another thing that jQuery did really well. And then I think this opened a lot of people's eyes when when demos started coming out for Ajax and stuff like that. And jQuery just made working with those kind of Ajax requests. I don't know, just as again, like everything else, it just made it all very easy. And it took something that was instantly complex and made it not as complex at all right? - -43 -00:21:37,650 --> 00:21:45,150 -Wes Bos: Yeah, so what was the alternative at the time to dollar dot Ajax, it was new XML HTTP request. And that was, - -44 -00:21:45,449 --> 00:22:38,790 -Scott Tolinski: I mean, the amount of code you had to write compared to you know, the, the jQuery alternative was unreal. And now obviously, we have fetch, which fetches like, it's so nice, because fetches is in my, like, in my opinion, right? The jQuery solution for selector finding is still easier than the document, document what to get out, get all select or whatever. It's, it's something that I just never, you know, I have my snippet editor, fill out the rest of those words there. But it's just a selector. All selector, all my memories, not so good. But yeah, so I mean, but like, unlike the vanilla solution for query selector, all right. The Ajax solution, which is fetch, fetch is way easier, right? fetch is as easy as it gets you fetch URL, okay, returns a promise. Got that? - -45 -00:22:39,690 --> 00:23:14,220 -Wes Bos: Yeah, I love using fetch. And for use cases where I do a lot of Ajax in an app, what I'll do is I'll install axios. And axios has some of the nice defaults that jQuery is dollar dot get JSON had. And it's just a perfect example of I don't need the entire jQuery library, it just needs something nice for dealing with Ajax requests. And in that case, you just reach for something that just does that. That's the whole idea. That's the Unix philosophy, right? Do one thing. And one thing well, so jQuery does a lot of things. And axios does one thing, it does Ajax requests really well. And that - -46 -00:23:14,220 --> 00:23:53,640 -Scott Tolinski: can connect can be a confusing point to a lot of people, right? Like why go to 100 different repos to learn something rather than go to one repo like jQuery and have all everything you need out of that, right. Like, that's just another potential pain point when trying to learn this stuff. And I mean, it's speaking of pain points and running into things and not knowing how to solve them. The worst is being in the dark when you're trying to fix any of your problems in your code. So that's why we want to take a quick break to talk about our sponsor, which is Log Rocket, who's going to totally eliminate any sort of bugs or issues that you having in your code? - -47 -00:23:53,700 --> 00:26:36,750 -Wes Bos: Yes. So Log Rocket is a service and Scott and I, like I said, we were just kind of talking about before this, how we're going to explain it to everyone because you may have heard of, like error tracking. And if you haven't Allow me to explain it to you error tracking is. And I run this on all my own websites. This is sometimes even email from user saying, like your website doesn't work. And then what do you do? you email them back? And you say works really? Well? Yeah, it works for me, or what browser are you on? Or like, as a developer, sometimes what I'll do is I'll say like, Okay, can you pop up in the console and let me know, like, if you have anything like weird going on, and that's annoying, because those errors don't happen on your server. They happen on the client and in you might not know when they're happening. So if you have some sort of exception tracker running on your website, they will log all of those and then often what I'll do is I'll go into a dashboard for something like this, and then you can see like, okay, like previously, I've had like, I've had like 300 people on an iPad running more One older version of iOS are all having this issue. And then you can figure out what the issue is and get it fixed. Right. So it's one thing that Log Rocket does. The other thing that it does is is session replay. And this is so so cool. So Log Rocket s, essentially records, everything on the website, the HTML, the CSS, the most moving all of the different cliques and events that are happening. And by collecting all of that data, what you can do is when something actually breaks, you can replay a video of exactly what had happened up until the user doing that. So maybe the user had uploaded an image and then removed it and then uploaded a second image. And that's when the when the actual error happened. And the the user might not know exactly what the steps are to reproduce that error. But if you are watching exactly what had happened to that, then it's it's a fantastic way to figure out what is happening. So it does error tracking session replaying. And then it also does performance monitoring. So if you go to the website and take a look at some of the screenshots they have, they essentially have the, like the Chrome Dev Tools UI, in the back end. And you can you can take a look at all the different aggregate metrics about the the performance of your website. So if you want to know exactly what is causing slowness for a specific user, you can really dive into that and figure out what there is. So this is a pretty unique tool. We're just like looking at it before the thing and I was talking to Scott, I was like, man, I want this on my way. This is fantastic. - -48 -00:26:36,780 --> 00:26:44,280 -Scott Tolinski: Yeah, how many times you get your your error and your century? And you're just like, Huh, is there a wonder how this error came about? - -49 -00:26:44,850 --> 00:27:33,570 -Wes Bos: Yeah, it's, it's kind of frustrating to figure it out. It does. It does integrate with a lot of existing exception trackers as well, if you're looking to so if you have something like Sentry or roll wire, and then you can integrate with that as well. So check it out at Log rocket.com forward slash syntax. And that's going to give you a 14 day free trial. So you can just try it out and see what it's all about. It can definitely like, I think this thing will pay for itself on your website, if you're accepting any sort of money on your website, because you don't want to have any sort of people not being able to to buy your product or to view your website or use your app word. So thanks so much to Log Rocket for sponsoring get definitely going to be installing this on my site - -50 -00:27:34,170 --> 00:27:36,450 -Scott Tolinski: early after this. Right. Yeah, exactly. - -51 -00:27:37,440 --> 00:27:47,070 -Wes Bos: Sweet. So let's keep going with jQuery here. We did select our API. We've talked about Ajax, let's talk next about Dom traversal. And what that is, - -52 -00:27:47,070 --> 00:28:34,290 -Scott Tolinski: yeah, so a lot of times when your you'd find your item, right with your, your query selector, right, and then you might need to find the the child of it or the parent of it, or the closest one to eight or any of that stuff, right to to identify a particular element on your page. Or maybe you want to grab all of the children of a particular div or something like that. jQuery made that super easy with all of its different methods like, closest, right, so like, we used all sorts of that stuff to oftentimes find all the children or something, find all you know, the parent or whatever. And the native solution is, well, it's a native methods now that that do very similar things, right? We have things like the closest method, which well, you just pass on a selector. - -53 -00:28:34,980 --> 00:29:03,210 -Wes Bos: Yeah, they have the browser now has this, like matches API? Or you can, you can pass it a selector, and it will, it'll find the next instance of it. And pretty much any, like Dom traversal API that you need. You just have to Google or go to this. You don't need jQuery GitHub repo. Yeah. And you can see what the native equivalent is for that specific one. I think that's fantastic. Yeah, - -54 -00:29:03,210 --> 00:29:12,360 -Scott Tolinski: previous element sibling instead of prief. Next element, sibling, that's a little verbose for me, but still, it's it's their native, it's in the browser, you might as well - -55 -00:29:12,360 --> 00:30:22,050 -Wes Bos: use the native versions are always named terribly, but I get why it's like that. But one thing I should also say is, I wrote some absolutely terrible code, because of Dom traversal. thick and I wrote some very, very brittle code. And I find that if you feel like you need to do Dom traversal, like I get like you have something you need the parent but like I used to do things where like, you go up to levels over there you Yeah, and you likely are writing bad code at that point. Because if your application is so based on the structure of your HTML, that's going to break as soon as you change something around or somebody else comes up comes around and and and try To move elements around, so I much prefer just to give things a class or an ID or a data attribute, or go directly to that element. Rather than having to, like assume that these things are in a certain place. So maybe like pause a second, if you're, if you're doing a lot of traversal. And figure out, is there a better way I could go directly to this item, instead of jumping around the the DOM tree? - -56 -00:30:22,080 --> 00:30:28,860 -Scott Tolinski: Yeah. And like was mentioned, if you don't want to add a class or an ID to something, that data element is a nice little targeter. - -57 -00:30:31,200 --> 00:30:57,510 -Wes Bos: Next one is data and utility methods. So these are things like copying arrays, checking for items inside of an array, pretty much anything that lodash does, there was a whole bunch of like, handy little data utility libraries that lived inside of inside of jQuery. And the answer to this is just use lodash. Or if you can, a lot of cases your MapReduce filter, - -58 -00:30:57,540 --> 00:31:05,640 -Scott Tolinski: yeah, are going to be just fine for you. Yeah, MapReduce filter of like, totally, just to replace so many things, because it is an object spread - -59 -00:31:05,640 --> 00:31:09,750 -Wes Bos: and array spread. Those have replaced a lot of my need for it as well. - -60 -00:31:09,780 --> 00:31:40,140 -Scott Tolinski: Yeah, yeah, I mean, even a lot of my need for lodash. Like, oftentimes, when I'm doing using lodash at all, it's for like the find method, like that's pretty much it or has or, or some of those, but like, I yeah, I'm not using lodash or jQuery anymore for any sort of array methods or anything like that. Yeah, all that MapReduce stuff. It is well worth your time, if you are not familiar to spend some time just going over the basics of MapReduce filter. I know he said that a couple times on here, but it's well worth your time. - -61 -00:31:41,520 --> 00:31:56,850 -Wes Bos: We should just do an entire episode on how much we love MapReduce filter. Yeah. But I should also say and In a similar vein to he sort of started get these jQuery naysayers, you also get lodash naysayers. And I'm going to stick my neck out for lodash right now, because - -62 -00:31:56,850 --> 00:31:57,860 -Unknown: loaded - -63 -00:31:58,200 --> 00:32:50,160 -Wes Bos: lodash is built in a way that you can just import the single piece that you need, and you don't have to import the entire library. So if there is an lodash has tons of like, really weird edge case, use cases for if you have a lot of data, you need to flatten it, or you need to find it in a nested structure or, or there's all kinds of stuff that that lodash does. And if you find yourself needing that equivalent, um, I often will reach for just importing that lodash method versus some random dude on Stack Overflow, because I know john David Dalton, who is the author of lodash. He's absolutely nuts about performance testing. And I know that lodash is always going to be the best pick for some weird, specific array or object search that any to do. Yeah, - -64 -00:32:50,190 --> 00:33:20,100 -Scott Tolinski: I mean, I don't even know what the arguments against that at this point would be. It's like, because he said, You can import that function directly without importing into the library. So the size is not a concern, right? Because you're going to be writing that code anyway. So yeah, I do the same thing. I import only what I need from lodash. So you don't get the whole library. And again, in the special use cases, you do know that that solution is going to be good. I wouldn't return anything else. I know there's there's people that are on rammed or or underscore still. I like lodash quite a bit. - -65 -00:33:20,640 --> 00:33:36,600 -Wes Bos: Yeah, me too. And I also find myself using lodash more on the on the server, because that's where a lot of my data massaging needs to happen before it gets put in a database. Yeah, or respond to the user. I don't do a lot of my data massaging in the client. - -66 -00:33:37,140 --> 00:33:39,420 -Scott Tolinski: Not a lot of massaging in the client. - -67 -00:33:41,790 --> 00:33:45,000 -Wes Bos: All right, you want to pick up the next one. Yeah. So - -68 -00:33:47,370 --> 00:35:34,650 -Scott Tolinski: hurry out in this list. Oh, okay. Yes. So yeah, so this one is a big one, which honestly feel like this is a problem that's gotten way better across the board. I know, some newer developers might not realize how difficult this has been for a long period of time, but normalized weirdness across browsers. So basically, right, you have your like, cross browser compatibility, it just always just been a giant pain. And it's not just CSS and JavaScript, two different browsers implemented things differently and had access to different features. And, and what jQuery did was totally remove your need to worry about that. I don't remember worrying about browser compatibility doing any sort of jQuery work pretty much ever until jQuery two came out, and they dropped, ie support. Right. So yeah, I think this is one of those things that jQuery just made so much easier on your life. But again, browser, browsers have done a really good job of each, you know, incremented version or whatever got better and better and better. And here we are at the point where JavaScript browser compatibility is isn't necessarily a huge deal, unless you have like sort of like one off things like fetch needs a polyfill for certain browsers and stuff like that. But browser compatibility across the board is is just way, way better. And for, you know, for those cases where you need compatibility, we have things that are build tools like Babel, which is going to, you know, make sure that your code is compiled into something that's going to work with whatever preset environment that you have anyway. So you can just write your JavaScript and forget that browser compatibility is even a thing, which is a wonderful, wonderful world. - -69 -00:35:34,880 --> 00:36:10,380 -Wes Bos: Yeah, it's, it's gotten so much better, both with with Babel, and I'm a big fan of using polyfill.io. And what that will do is it's just a little script tag that you pop into the either the head or right before your own JavaScript, depending on your loading strategy that we talked about last week. And it will just do a sniff of your browser, and it will only load in the polyfills that are needed for that specific browser. So I know that if you load up the polyfill dot j s in Chrome, it loads nothing. So that's pretty, pretty neat. Do you remember to do that, - -70 -00:36:10,400 --> 00:36:45,480 -Scott Tolinski: um, I don't know if you remember this. This is I don't remember what year it could have been 2011, there was an April Fool's day where someone released the library and it was like magic polyfill or something. And the polyfills documentation was just like, just drop this just just one import in your website. And the browser automatically detect all this and everyone is like, this is incredible. Oh, wait, it's an April Fool's Day joke like, this doesn't exist. And our lives are still difficult. But here we are. And this thing that like, was at one point, a joke because of how far fetched it seemed is right? Yeah, it works perfectly. - -71 -00:36:45,510 --> 00:37:19,170 -Wes Bos: It's actually happened. It's actually a real, it's hilarious. I love it. Oh, that's good, big fan of that. So browser, browser compatibility, not so much of an issue anymore. There still are little edge cases, especially when you get into the mobile world, where you have people that with these, like, seven year old Android phones that are being given out for free on a low budget carrier, you do have to still worry about those. But I think it's less of an issue, I don't run into it as much. And if you want to know that if errors are happening, you can use Log Rocket, a - -72 -00:37:20,280 --> 00:37:20,850 -Scott Tolinski: bouncer. - -73 -00:37:22,590 --> 00:41:12,270 -Wes Bos: What else we got here, event listeners. So another thing that jQuery did very nicely was making an event listeners listening for clicks and double clicks and hovers and all these different elements. It made it very simple across all the browsers, it normalized that across all the browsers. And it also allow you to do two things that I really like first, you can listen on multiple elements. So right now, if you have six buttons, you have to select all your buttons. And then you have to do a dot for each over each of those buttons and attach an event listener to every single one. And with jQuery, it would just you just say.on click, and it would anything that it matched, it would add an event listener to it. So with this blink dodge asked that I mentioned earlier, it will add a.on method to each node and each node list. So a node is one element. That's what query selector gives you. And a node list is sort of like an array. It's an array ish. Yeah, it's it's array ish, because you can't map it. But you don't need to, you just need the dot for each. So you can loop over every single one. I use dot for each on all my JavaScript 30 ones as well. Yeah, so that gets rid of that qualm there. Another one is event delegation. And maybe I should explain what event delegation is real quickly. And I have in my JavaScript 30 course, but I'll go through it real quick. So what event delegation is, is when you listen for a click on let's say, you have a div, and you're that's a bad example, because you shouldn't do that. And that's not accessible. Let's say you have a button, yes, that button, you're listening for a click on that button, right. So when you load the page, you'll select all the buttons on the page, and then you will listen for a click on each one. And when someone clicks it, you'll run some code. But what sometimes happens is that in the future, you might add buttons to the page. So maybe you have a list of items for sale. And then you have a delete button beside each one and you lay on page load, you listen for a click on the delete button, and then you remove it. However, if you were to add a button or add an item after the page has loaded, that new Remove button is not bound. It's not being listened to for a click on anything. So it becomes a bit of an issue because, like how do you listen for clicks on things that are not yet existing, right? It's the existential crisis. So this event, event delegation Now what that does is you listen for a click on something that does exist. So you could listen for a click on maybe like a div that surrounds all of your items, or you could even listen for a click on the body. And then what you can do is you can, you can say, I'm going to listen for a click on something higher, but I'm going to delegate that click to the actual button. And that's because events in the browser, what they're called bubble up, meaning that if you click on the body, you also click on a div, and you also click on a rapper, and you also and it just sort of bubbles all the way down to the actual buttons. So you can sort of like delegate the listening to a responsible parent that exists, I always use the stupid example being like, when you're, I'm an adult, and I'm responsible for my kids now, and I'm responsible for any future children that I might have, even though they don't exist yet, I'm still responsible for any clicks that might happen on them. So it's a little bit tougher to do that with vanilla JavaScript. But I don't know of any libraries offhand of that make event delegation a little bit easier, but it's usually just three or four lines of code to to make that happen. - -74 -00:41:13,500 --> 00:41:55,050 -Scott Tolinski: Word. Nice. Speaking of delegation, I always start all of these transitions with speaking of I gotta have a new, it's gonna look transparent at this point. But okay, okay, we're talking about delegation here. Okay. So one of the things that is a, you know, difficult to delegate is your personal finances, in your business finances. And so what Freshbooks does, is it makes it really easy to work with your accounts, your accounting, your invoicing, and anything that you might have the urge to delegate out to someone else. Because while Freshbooks makes it easy enough that you can do it yourself, or you can actually delegate it out to someone else. - -75 -00:41:56,550 --> 00:42:50,790 -Wes Bos: Yeah, so I do this quite a bit. We have sponsors for this podcast. And what I'll do is, I'll just assign the sponsor email to my assistant and my system will go into Freshbooks. And she'll create a invoice make sure that it's in the right currency, because they support multiple currencies, they make sure she adds the ability to pay online, they could pay via credit card, that all that goes directly into it. So it's fantastic, because fresh books makes doing invoices in lugging expenses as easy as possible. But then you can also add team members and allow them to go in and do all of the heavy lifting for you creating new customers following up on unpaid invoices and whatnot. So big fan of that go to CES, what is this freshbooks.com forward slash syntax to get 30 day free trial and make sure you enter syntax into the How did you hear about a section? - -76 -00:42:51,110 --> 00:42:55,670 -Scott Tolinski: Yes, a big cookie for Freshbooks for making our accounting lives so much easier. - -77 -00:42:57,270 --> 00:43:52,350 -Wes Bos: Wicked. Alright, so the last section I had here is animation. jQuery was amazing. Because the way that animation had worked before we had CSS animation, or the web animation API is we literally just changed the CSS very quickly. So what you would do is you would set a div to opacity one, and then you would set it to a pacity, 0.9994. And then 0.9991. And you would just go from you would just rapidly update this the inline CSS of an element from one to zero. And then when that finished, it would like hide or remove the item, depending on what method you did. And that was amazing, because he had all these beautiful things like slide up and slide down and fade in and fade out and animate to and it would, you'd be able to animate the width and the height of an element. And it was so good. But why don't we need that anymore? Scott, - -78 -00:43:52,710 --> 00:44:57,180 -Scott Tolinski: we don't need that anymore. Cuz we have lots of stuff. We have CSS transitions, animations, we have the web animations API, basically 100 different ways that we can do animations now that aren't using jQuery, although I gotta say, the slide up jQuery method. It's still probably the easiest way to do a sliding up transition. Yeah, like, like, that's still probably the easiest way. But yeah, I mean, there's just, I personally am a huge fan of the web animations API, which basically allows you to set initial states keyframes, that sort of stuff, and then run animations. You can save them as a is like an animation and tell it to run and stuff like that, or reverse or whatever. The the web animations API is so dang flexible now. That honestly, yeah, I can't imagine going back to jQuery animations despite how incredibly awesome and easy they were for their time. But yeah, that's pretty much it for me or you could you know, swap classes, whatever, do your animations transitions with CSS, which is super common, as well. - -79 -00:44:58,890 --> 00:46:00,600 -Wes Bos: Yeah, big fan of that. Oh, So I think people will if you need heavy animation, or if you need light animation, you reach for CSS transitions, CSS keyframe, web animations API, if you need like heavy animation, you might reach for the web animations API or something like green sock. So again, we're getting we're either going native, or we're going specialised, and you reach for those things as you need them. So yeah, I do agree with you there, though. The slide up is still painful. The hack I use now is because the if you don't know the thing with sliding a div up is you can't animate to height auto, are you and you can add them, you can hide it, you can animate from height auto to height zero, or you can animate to is from a max height. Yeah, that is much higher than anything to a max height of zero. And that will cut that's a bit of a hack, because the timing doesn't work perfectly all the time. But it's it's still okay. Yeah, I - -80 -00:46:00,600 --> 00:47:20,370 -Scott Tolinski: actually, it's one of my most watched videos on YouTube is how to do that. Is that really, it's, it's from out of forever ago, I think it was like how to do an accordion transition with CSS. I forget the I forget that. Oh, it was Yeah, it's using the max auto trick, which I remember learning that I mean, like, Oh, this is so great. I don't use slide up. And then I was like, This is still a pain in the ass and it feels hacky. But I guess it works. So yeah. I don't know, I'm thankful for libraries now that exist. And I mean, the web animations API and stuff like that. But even like really simple libraries, like we've talked about before, like I used one on called react flip move, or it's just like, you wrap your, your stuff in a react tag, and then pass it along the transition name. And then you can have staggered and delayed and whatever transitions and animations I That to me is pretty dang slick. So I mean, you have your own platform specific libraries, like we mentioned, are getting specific, you have bigger things like pop motion, or green sock or whatever. And then you have browser. browser API is like the web animations API and CSS stuff. So yeah, animations are probably in the best place that you've ever been. I think that is become obvious based on some of the animations that you're seeing take place on some websites that are sort of knocking your socks off these days. So it's all good. It's all good. Big fan. - -81 -00:47:21,060 --> 00:48:22,080 -Wes Bos: It's all good Baby, baby, baby, baby bear. Cool. So that is the I guess that was seven things that jQuery did and sort of what we're using now or using as alternatives in the browser. some final thoughts. I don't know if you have any final thoughts about about jQuery here? I still think that jQuery is the best way to to learn JavaScript. And I know that's a bit of a controversial opinion. But let me explain myself. I think, first of all, when you're learning JavaScript, you need to have some fun, and you need to have these wins. And I think what a lot of people do is they say, Oh, you need to learn the fundamentals. First, you need to sit in a room and console log for 40 hours before you even like see a div. Right? And that sucks for people learning JavaScript, what they want to do is they want to be able to click a button and for something to pop up or something to fade in and and get these like immediate. What do you call that? - -82 -00:48:22,560 --> 00:48:24,300 -Scott Tolinski: immediate results, immediate feedback. Yeah, - -83 -00:48:24,300 --> 00:49:26,160 -Wes Bos: you get immediate result and immediate feedback. And that's what keeps you going. And obviously, you have to you really, I'm a huge proponent of just like nailing the fundamentals before you go into anything. But what I love about jQuery is that you can get up and running with like six or seven lines of code, and you can actually build something that's really fun. And then once you're comfortable with the whole idea of, and when I used to teach JavaScript in person, we would say like, go get something like that's a selector. Listen for something. That's your event, Ella, that's your event handler, and then do something. And that's your callback of when you click it and that whole concept of go get it listen for something and do something that applies to absolutely everything in all of JavaScript, right? That's not different anywhere else. So that can apply to It's fine, then after that you can move into vanilla JavaScript, or react or whatever. So I still think that jQuery has a spot in getting up to speed quickly with what is JavaScript and what is the browser and whatnot. Yeah, - -84 -00:49:26,340 --> 00:50:57,990 -Scott Tolinski: and then this all goes back for like one one thing for me, you remember the angular one example the two way data binding and stuff like that. And then immediately, there'll be a whole bunch of people saying, like, don't do this, don't do this two way data. But like, to me, like, if you're trying to get non non heavy programmers, like if, like giving the best practice 100% this is whatever advice is great for programmers and experienced developers, but people who are coming in and don't necessarily understand the specifics or even have that background. I think it's important to have those examples. And to be able to do stuff like that, that like really amazing two way data binding, right? Well, I have no idea what's going on. And that's not necessarily a bad thing. because like you said, it's getting you those wins. It's getting you excited, it's letting you work with the DOM and stuff like that. And who cares if it's not the best practice, because when you're learning, I don't think you need to stay to 100%. This is the most efficient, whatever sort of ways when you're learning and it's good to have a few wins, get that in, get a little bit of understanding, be able to build something cool. And then you can always fix it, improve upon it as you go. Right? I do think that like he said, it is just so important to get those little wins in there for learning JavaScript. And if you're getting turned off of learning JavaScript, because it feels so monotonous, just go easier with it, go easy and make something cool, make something fun, make something stupid, and just go for it. Because that turns a lot of people off learning JavaScript is just sort of the complexities of some of this stuff. - -85 -00:50:58,080 --> 00:51:20,700 -Wes Bos: Yeah. And I think once you start getting comfortable with the stuff you have your the natural progression is to just start to look for better ways to do something faster ways to do something better design patterns, and you just become a better developer as you you're you're always looking for better ways to do things. I think it's a natural progression of a developer, so I wouldn't sweat it too much. - -86 -00:51:20,820 --> 00:51:39,510 -Scott Tolinski: Yeah, learn the foundations while you're learning some really cool stuff, making some fun stuff. Cool. So yeah, that's pretty much it for jQuery, you said you, you still would use jQuery today in a teaching environment? would you use jQuery today in a production environment? If you were starting a new project? - -87 -00:51:39,540 --> 00:52:06,960 -Wes Bos: I don't think so. Because I know vanilla JavaScript well enough. It's funny because like, I don't immediately reach for react or something. But I do usually just reach for your vanilla JavaScript. And that's what my whole JavaScript 30 course is all about, as well. So I don't think that I would necessarily reach for it unless I had some very bizarre circumstances where I had to support a very old browser, or something like that. - -88 -00:52:07,170 --> 00:52:10,200 -Scott Tolinski: Yeah, I'm gonna be right there with you. No, one. - -89 -00:52:10,200 --> 00:52:11,460 -Wes Bos: Sweet. - -90 -00:52:11,460 --> 00:52:14,160 -Scott Tolinski: So is is jQuery debt. Oh, - -91 -00:52:14,190 --> 00:52:17,460 -Wes Bos: that's the final questions. Question. Oh, yeah. - -92 -00:52:17,700 --> 00:52:18,360 -Scott Tolinski: It's a question. - -93 -00:52:19,050 --> 00:53:45,960 -Wes Bos: A question led? And? Oh, I don't I don't know. I don't think so i think that i think jQuery is really just passing the baton over to all and actually, this is one thing I didn't even talk about is that one of the biggest things behind jQuery was this thing called the jQuery Foundation, which the jQuery foundation would they would have run conferences, and they have extreme amount of poll, because they're such a big, a big stance in the JavaScript community. And the jQuery Foundation was used for so much good because it paid people to work on the jQuery project it it, I think that's one of the biggest things, they have had people working for it, they ran conferences, and they would recommend a learning materials to people, it was amazing. And it's since been renamed to the .js. foundation. Nice. And what the .js Foundation does is it since they still have this massive pole that is the jQuery community and everything behind it, they can still run conferences, they provide money to lots of open source projects. So it's kind of cool that they can use the popularity of jQuery, to then parlay that into other tools. Like I think web pack is part of it. Other tools in the community that definitely need the attention and the funding and all the other stuff that goes along with that. - -94 -00:53:46,320 --> 00:54:28,230 -Scott Tolinski: Yeah. And while while jQuery might be sort of like dying from your initial project, starting point sort of stuff, right, I think, I think it's important to show respect for what jQuery has done for our profession, and all of the amazing, amazing things that allowed so many people to build. So yeah, I wouldn't say it's dead or sorry, whatever. Like you said, it's a transitioning to whatever. And you know, I might not reach for it on my next project. But that doesn't mean that you shouldn't or that it's a bad idea for you personally. Yeah, I mean, I have the JavaScript tools in my toolbox to take care of the things but not everyone does. And that's not a bad thing. - -95 -00:54:29,520 --> 00:54:44,160 -Wes Bos: Now that so rest in maybe jQuery is just being retired jQuery is going down to Florida. Yeah, and got a socks on Drive and a golf cart around and a smile shirt on Yeah, floral shirt. Wearing a floral shirt right - -96 -00:54:44,160 --> 00:54:48,570 -Scott Tolinski: now. Oh, yeah. I got my I got It's almost time I would add when I'm - -97 -00:54:49,650 --> 00:54:56,130 -Wes Bos: out here to hack in some floral heat the summer so get ready. It's just snowed there. It was - -98 -00:54:56,130 --> 00:55:07,230 -Scott Tolinski: out of nowhere. It's been like 70 degrees and sunny here and then we went Woke up this morning and already sun and distant nose all melting but we got like, we got like six inches of snow last night like all of our trees are all like beat down. - -99 -00:55:07,380 --> 00:55:09,180 -Wes Bos: Oh, rough. - -100 -00:55:09,540 --> 00:55:12,990 -Scott Tolinski: Yeah, right I go shake those trees. Trisha - -101 -00:55:13,020 --> 00:55:14,730 -Unknown: Trisha Oh? - -102 -00:55:17,160 --> 00:55:18,360 -Scott Tolinski: Whoa. All right. - -103 -00:55:18,690 --> 00:55:21,960 -Wes Bos: Let's talk about some sick pics. Do you have any sick pics today? - -104 -00:55:24,090 --> 00:55:37,230 -Scott Tolinski: Do That was my impression of the Always Sunny in Philadelphia bird call thing wrestling episode. It's unintentional but, uh, what do they call it? Do you watch that show? - -105 -00:55:37,680 --> 00:55:42,960 -Wes Bos: Oh, yeah. Me is probably one of the that's what the death so tasty treats comes from and he actually - -106 -00:55:43,110 --> 00:55:44,640 -Scott Tolinski: what was the bird birds of - -107 -00:55:44,850 --> 00:55:46,590 -Wes Bos: the birds of thunder birds? - -108 -00:55:46,680 --> 00:57:01,200 -Scott Tolinski: Is that what it was? That's what it was it was oh my god, that was one of the one of the best episodes. Okay, so sick picks. I'm gonna go with something that we've touched on in the email episode. We've touched on this in a couple of episodes. But this thing didn't exist back when? Well, I didn't I don't think it existed or didn't exist in its current state. But MJ ML, which was the library for building email templates in react? Yeah, well, they have an app. And it's a little electron app I built on electron and make sense out of electron. But what it does is it's awesome. It saves your templates. It allows you to download and do stuff with pre made templates and edit them. And you can export them out as HTML, you can keep them in MJ ml so that you could copy and paste but what it does is basically gives you a really nice little editor or interface that's perfectly tuned to work with the MJ ml language and give you some really, really nice and easy HTML email templates. I use this recently to redesign one of my emails and was just totally totally psyched about how easy it made working with HTML email, which everyone knows is a gigantic pain. Wow, - -109 -00:57:01,200 --> 00:57:02,280 -Wes Bos: this looks amazing. - -110 -00:57:02,370 --> 00:57:06,240 -Scott Tolinski: Yeah, the MJ ml app, desktop app desktop app. - -111 -00:57:07,320 --> 00:59:05,370 -Wes Bos: nifty. That's a sick pic. Sick. Cool. I'm gonna go. So a couple episodes ago, you recommended these LED bars, which, yeah, sent me off on a little tangent being like my house is too dim. So I was like this one, I was like, our basement is too dim, it's too damn dim and my garage is too damn dim. And like, I have all these like halogen spotlights in our garage. And they're like super, they get super hot and they blow out and they're expensive and they suck power. So I went on Amazon and I found these LED utility lights that are just the best thing ever. So they're super affordable, I got four of them for 150 bucks. It's like a four foot long led utility light. And you can either hang them from the supplied cables, or you can just screw them right into like a joist or something like that. And so I bought four of these things, and there's the brightest hell and they just like lit up my entire basement. And the really cool thing about it is that they are just a regular two prong it's not a three prong with a with a ground it's just yeah prong which allows you to do I don't know if these are legal in the States or not. But you can get these little things that you screw into a light socket and then you put a bulb in it and what it does is it gives you two extra plugs on the light socket. So what I did is I just plugged it into there onto a switched existing light. And now I've just added a whole bunch of light that's already on the switch. I didn't have to to wire in any new stuff in the garage I put them on on our our garage door which has a sensor so as soon as you walk in the garage, the sensor trips and then lights up the entire garage. Wow, - -112 -00:59:05,520 --> 00:59:11,010 -Scott Tolinski: yeah, this would be perfect for garage my gym. Pretty much anything Wow. - -113 -00:59:11,040 --> 00:59:27,480 -Wes Bos: And the 35 watts which is like their. If you think about it says it's 100 watt equivalent and I would bark into to say it's even more than that because 100 watts is just to have the old light bulb Do you even have light bulbs like glass light bulbs in the states now? - -114 -00:59:27,870 --> 00:59:28,980 -Scott Tolinski: What do you mean like - -115 -00:59:29,070 --> 01:00:03,230 -Wes Bos: in Canada, a regular light bulbs are are banned. So either banned, you can't go to the store and buy them like I've got like a little stash that I bought before they went out but I stopped using that question because it's all LED bulbs now in Canada, you can't and then the government every now and then they subsidize these LED bulbs because they're like four or five bucks a bulb, but they subsidize them down to $1 a bulb and then you just I just bought like tons of them so I'm doing my whole house and led to Just like the power is very expensive yeah here - -116 -01:00:03,540 --> 01:00:34,620 -Scott Tolinski: we have all led we went to this thing called the Denver flea which is this like gigantic hipster flea market in Denver that they do quarterly it's super hipster that we got some like really hip dog bandanas there. But when we were leaving the one time there is like a one of the energy companies was just passing out boxes and boxes of LED lights. And they were they like they seriously I just held on my hands expecting to get a box and they gave me like eight boxes. So like are like okay, well, I guess we have light bulbs for life now. - -117 -01:00:35,250 --> 01:01:13,560 -Wes Bos: Yeah, these LED bulbs last, they're supposed to last forever. I had a couple of my office that overheated or something and they started flickering. And I had to replace all the dimmers in my house to be led dimmers because it's a different, different kind of dimmer, but well worth it because they're super bright. They don't use a whole lot of energy. And these things are super sweet that you can either cut the wire and wire it into an existing junction box or just plug it into one of these little tap things. Cool. Select to solid utility led shop light. I'll put a link in the description. anyone that's interested in brightening up their day. - -118 -01:01:16,020 --> 01:02:21,510 -Scott Tolinski: Dope, okay. nei sick pay, or Oh, I have a shameless plug I yeah, my view j s for everyone course is going to be out by the time you are hearing this episode. So head on over to level up tutorials, comm Ford slash store and checkout view j s. for everyone. It's basically the easiest way to learn view. It takes you through all of the view fundamentals, its total latest and greatest practices, uses all of the the version of view ccli version three. So everything that you're doing in this is totally up to date and modern view j s. And you'll see why basically, a lot of people are really starting to really love working in view. I know we we keep talking about making episode about it. I have a lot of thoughts on view after spending so much time in to do this series. So yeah, if you want to learn Vue js, which is a really hot framework right now check out Vue JS for everyone, and it'll give you all of the basics up through all of the sort of essential skills that you need to build a real app - -119 -01:02:22,020 --> 01:02:30,510 -Wes Bos: suite congrats on getting that launch. That's that's exciting. I know a lot of people have been asking about view content so I'm gonna point them that way. - -120 -01:02:31,020 --> 01:02:31,830 -Scott Tolinski: Nice. - -121 -01:02:32,070 --> 01:03:09,300 -Wes Bos: Sweet I am going to plug I'm still working on my advanced react course it's looking really good I'm super stoked about it but go to West boss calm for slash courses. matter really good spot right now are all of my courses are up to date, except for my Redux one, which is it's still the Redux part of it is still totally up to date, because Redux doesn't change but he uses react create class instead of extends so I don't know you should be able to switch over from one to another, but all the other courses are totally up to date. I just released my react one. So check that out if you're looking to learn a thing or two. - -122 -01:03:09,780 --> 01:03:11,040 -Scott Tolinski: Nice, cool, - -123 -01:03:11,160 --> 01:03:14,700 -Wes Bos: sick. All right. Well, that's it. I'll see you next week. - -124 -01:03:15,299 --> 01:03:28,680 -Scott Tolinski: All right, who's face head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax4.srt b/transcripts/Syntax4.srt deleted file mode 100644 index d941c2460..000000000 --- a/transcripts/Syntax4.srt +++ /dev/null @@ -1,440 +0,0 @@ -1 -00:00:03,810 --> 00:00:09,090 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:13,080 --> 00:00:57,360 -Wes Bos: Welcome to syntax episode number four. Thanks so much for joining us. Today's episode is going to be all about JavaScript tooling. We're going to dive into a bunch of the different things in the tooling landscape and sort of explain what they are and what you when you may use them. There's been a lot of new stuff has come out lately, and I think that this is going to be great to catch you up to speed with with whatever's going on. Um, this episode is sponsored by delicious brains. We're serious podcasters now that we have a sponsor and delicious brains has a plugin called WP migrate DB Pro, which is great. When you want to move a WordPress we're going to talk a little bit more about what it is a little bit through the show, but thanks to them for sponsoring. Hello, Scott. How you doing? - -3 -00:00:57,360 --> 00:01:03,869 -Scott Tolinski: Oh, doing good. Getting over cold here. But feeling good today feeling a feeling like normal? How about you? - -4 -00:01:03,869 --> 00:01:19,890 -Wes Bos: I'm doing really, really well. I am in in between vacation right now I just had, I was down in Georgia for vacation, and back for a week to cool things off. And then I'm gonna go back to another cottage with my family. So pretty excited about that. - -5 -00:01:20,090 --> 00:01:20,700 -Scott Tolinski: Nice. - -6 -00:01:22,020 --> 00:01:58,260 -Wes Bos: Yeah, so um, let's, let's talk a little bit about our podcast launch. Because the way that we did is we recorded three episodes. And then we launched it and now we're recording the fourth in the fifth episode. And it's it's gone surprisingly well, it's I've been super happy with the numbers, the response from people, just sort of everything that's been around the launch. So I want to say a huge thanks to everyone who helped spread the word tweeted out, leave a review on iTunes, whatever it is, a lot of people don't use iTunes, but they booted it up anyway, it's just - -7 -00:01:59,760 --> 00:02:37,310 -Scott Tolinski: Yeah, seriously, thank you. I mean, the responses even on Twitter, and all that stuff has just been extremely positive. And it's just such a, it's so great to see. Just so many, you know, positive things said about the podcast so far. And it's amazing knowing that, you know, we did these first three episodes. And, you know, they're only going to get a little bit better, a little bit more cohesive, a little bit more polished every single time. So it's like we did these three episodes. And this thing's only gonna get better from here on out. So I'm excited to see where it's gonna end up. Absolutely. Like, - -8 -00:02:37,350 --> 00:02:59,760 -Wes Bos: I I'm a professional explainer of things. But when I record my own screencast, I can just like, oh, that was a poor explanation. So I can cut it and redo it. But it was a podcast, it's a little bit more. We don't do a whole lot editing on it. So I'm excited for this podcast to make me better at sort of just casual conversation and, and doing things in a single take. - -9 -00:03:00,060 --> 00:03:02,310 -Scott Tolinski: Yeah, likewise. Cool. So - -10 -00:03:02,310 --> 00:03:04,530 -Wes Bos: what are you working on these days? Scott? - -11 -00:03:05,520 --> 00:04:43,620 -Scott Tolinski: Yeah, so a whole ton. Yeah. So basically, I had some issues with my two sites, the level of store and the level up site. And these, these bugs or these issues were coming with package versions and stuff like that they were getting just harder to manage over time. And the last thing I wanted to do is just to string these bugs along forever and ever and ever. So I decided to do this giant merge of the store in the site. So they used to be two entirely separate sites they used to an iframe and a JSON web token to manage reactive logins between the two sites. And it just got really complex. So I moved it off of store dot level up tuts comm to level up tutorials, comm slash store. And that was a huge process. Because of both routing, I had to merge, like, I don't know, like 40 plus react components into an entire new site. The good news is they already shared a database. So it was just mostly about moving that that front end and those that backend methods and stuff like that, and making sure everything still worked, but it was a absolutely major major migration. And definitely caused, you know, a little bit of you know, headaches here and there. I also moved off of an apex domain to www after like seeing that there's a lot of positives to being on www over, you know, just level up tutorials. COMM really, what - -12 -00:04:43,620 --> 00:04:45,420 -Unknown: are they? Um, - -13 -00:04:45,810 --> 00:06:14,850 -Scott Tolinski: you want to go to like, there's a yes hyphen. www.org. Yeah, is a is a pretty long explanation about why you would rather use WD WW, but it has to do more with like sites growing in size. There's a lot of things with cookies and with sharing things from basically, if you were to use a sub domain, like if I were to use, you know, forum dot level up tutorials, comm it's going to be easier for me to integrate that into the site with, you know, things like cookies with using www then it would be the apex. In addition, like a lot of services like Heroku in the service I moved to the site deploy to, which is meteors galaxy service, they're hosting service. Yeah, they, they, they definitely they, they both recommend not using Apex domains just because of how their systems work. But they they link it to a whole bunch of good stuff. But after reading through it, I was just like, well, this stuff isn't isn't a huge deal for me, but they be will be and if it's going to make my life easier to move to www on these hosting platforms and just buy again, bite the bullet do it all in? Yeah, yeah. So it was a huge process. I ended up having to write out like a nginx config on a Digital Ocean box to handle redirects for eight. Oh, - -14 -00:06:15,120 --> 00:06:27,270 -Wes Bos: that's always just a nightmare. I got a whole bunch of emails because I sent out your email your website when you relaunched it and a whole bunch of people said that the link wasn't working, because I guess you were in the middle of that. - -15 -00:06:27,510 --> 00:06:50,100 -Scott Tolinski: It was the day of Yeah, and like, bad timing on my part. 100% bad timing. But like, yeah, it was funny because HTTP worked. But HTTPS did not redirect because of the SSL was saying it was invalid. So yeah, it was it's a whole thing. But it's all good. Now everything's up and running. So you know, in hindsight, it was the right decision. - -16 -00:06:50,130 --> 00:07:01,650 -Wes Bos: Yeah. That that should be another episode is like, we'll talk about like, clearly uninformed, two guys trying to manage servers or like, Oh, God, - -17 -00:07:01,650 --> 00:07:10,320 -Scott Tolinski: yeah. Which is one of the reasons. My, my digitalocean config, it's just like, I just got tired of managing it, you know, to be honest. - -18 -00:07:10,680 --> 00:07:50,820 -Wes Bos: Yeah, yeah, I'm actually in that sort of in the same space as well, where I have. I have one server myself. And I'm like, What if this like thing goes down, like I can just deploy my application anywhere, but in the setup is really, really easy, because it's, it's all in node, and I can just npm install NPM start and get up and running. So I'm sort of in the process of making it a little bit more flexible. And the first thing that I did is moved to like a floating IP address, so that I can like deploy to another, another box or droplet and then just cut over the IP address to that. Which is pretty, pretty neat. So um, yeah, the process of that. - -19 -00:07:51,240 --> 00:07:53,400 -Unknown: Yeah, like that. Cool. - -20 -00:07:53,460 --> 00:07:53,970 -Well, - -21 -00:07:53,970 --> 00:10:25,040 -Wes Bos: let's talk about JavaScript tooling. We're gonna go into not everything. There's all kinds of different JavaScript tooling, but some of the stuff that relates to front end JavaScript development. So we're going to talk about modular bundle, talk about module bundlers. And then things like baybel linting, prettier Bailey Babli, pre pack all kinds of different stuff were like, you might have heard people talking about this. And you probably know what what pack is, but some of these other ones, you might not necessarily know what it is. So we're going to take our best stab at explaining what they are and why you might want to use them. So let's kick it off talking about our module bundlers, we'll start off with web pack. That's sort of the the big one in the room. Now, previously, before that, there, there's a couple other ones who have browser fine roll up and whatnot. But web pack seems to be really winning that race right now. And it does a whole bunch of stuff. And I think that's why there's a lot of confusion around what it actually does. But at its core, it's what's called a module, bundler, where it will take your JavaScript modules, whether you write them in Yes, six source, unlike common j s, and it will compile them into either one JavaScript file or many JavaScript files. And it has this concept of it has a whole bunch of different concepts has a dev server built in and all these other helpful things. But probably the biggest one is it has a concept of loaders where your JavaScript modules can import any type of file, whether you're importing JavaScript or whether you're importing CSS, and then the loader is instructed how to or what to do to that actual, that actual module. So it CSS it will convert it in line or convert it and put it into a separate CSS file. So that's really the big one. And a lot of the stuff that we're going to be talking about today is is something that you would use with Webpack. So yeah, I know what Pac is, I'm not a huge expert at it. I've been using it for a couple years now. And every single time that I try to build my own Webpack config, I end up very confused. So I know that there's some some big stuff happening right now around education around Webpack, just to distill it, because it is the super powerful tool. But it also is this like, very complex thing. And it's really hard to reason - -22 -00:10:25,040 --> 00:11:27,270 -Scott Tolinski: about. Yeah, and there's a lot of, you know, there's a lot of copying and pasting going on, when you're doing your Webpack configs. And for me, I honestly feel like, I feel like a lot of that confusion is I you know, I hate to drop the word syntax, but it's, I think it's all syntax related. You know, I mean, they use a lot of jargony terms, like loaders and stuff like that. And I think when you get into some jargony stuff, yeah, it inherently makes it a little bit more difficult. I always felt like other, you know, simple tools, like Gulp had things a little bit more like transparent what was going on? Exactly, yeah. Not only because it was just state, you know, straight JavaScript. You know, that said, it's one of those things that if you look at a Webpack config long enough, you're going to understand what's going on. If you obviously know it's, you know, the the root of everything and what's happening, it's it's easy to pick up. But at first glance, it's definitely not necessarily the most obvious at first glance, I would say but you know, that's just how it is. - -23 -00:11:27,390 --> 00:12:28,560 -Wes Bos: Yeah, exactly. And and while we're talking about that, let's let's talk about like, what's the difference between Webpack and something like Gulp or grunt, because what I hear from a lot of people is like, I was so happy with gold. Yeah. And now you're making me change to Webpack. And I'm extremely frustrated, because I don't understand what's going on. So like, like, what are the the main differences between the two, I guess that grunt, and Gulp, were what you call a task runner, for they are task runners, I still use Gulp quite a bit, I really like it. Yeah, and by themselves, they, they don't do anything there. They're actually the one thing that you can do with Gulp on its own is his get a file and then move it to another folder. That's all that is, by itself. But then you go ahead and you go out and you get all these different plugins that you sort of pipe your your content through, you transform it, maybe you have sass, turned it into CSS, and you run that through autoprefixer. And then at the end of the day, you you actually - -24 -00:12:28,560 --> 00:12:43,800 -Scott Tolinski: output it, right, it's a very much you put it in something, you get something out, right, you put your car your sass, your stylus, and you get CSS out minified whatever. It's it's simply just taking your files and transforming them, you know, - -25 -00:12:43,800 --> 00:13:27,930 -Wes Bos: exactly. And, and Webpack does that as well. But it also is a first class module bundler. So if you have JavaScript modules, or if you have CSS, then it will know how to handle those things. And via loaders, it will encounter a type of file, and it will know exactly what to do. And that was a big hang up for me, because I was always like, like, Where do I put the files into web pack? And the big changing moment for me was that you don't put files into web pack and get something out. It's that web pack will encounter different types of files in your modules that you imported. And then it because it knows about loaders, it will know actually how to handle them. - -26 -00:13:28,350 --> 00:14:06,840 -Scott Tolinski: Yeah, yeah. And I think it's just really a, you know, it's, it's the next next step here. Because primarily when gulpin, in grunt, were getting popular, you were building single page apps, but they weren't these like giant monolithic, like, huge JavaScript files, essentially, at that point. And if they were, you're probably doing a lot of more custom tooling to get that into a better situation. And now, you know, I mean, everyone's writing big react or Angular apps. And in just this module, loading overall becomes so much more important aspect of the build process itself. - -27 -00:14:07,110 --> 00:14:54,180 -Wes Bos: Yeah, because you can do bundle splitting and tree shaking, and we'll have a whole episode explaining what all those things are. But there is a lot more to what Webpack can do in terms of building a performant website that is, is really, really going to help you out. So I would say to those who are are still really frustrated at web pack in I don't think that Webpack is going to be something that absolutely everybody needs to learn. I think that what is going to and what is happening is that you're going to start to use tools like next j s or create react app or whatever it is, and you're just going to use the tool that sits on top of it and someone much smarter than you are I is going to build that tool right and it's just going to work for - -28 -00:14:54,210 --> 00:15:01,410 -Scott Tolinski: the purpose that we need it to and you won't have to touch it unless you need something Right, exactly. Yeah, - -29 -00:15:01,440 --> 00:15:16,860 -Wes Bos: I like how next .js does it where you, they will expose the next config that will sort of fold into the underlying web pack. But they don't they don't drop the whole thing on your lap and say good luck. It's tough to get up and running with Right. - -30 -00:15:17,129 --> 00:16:58,590 -Scott Tolinski: Yeah. So I, you know, I've mentioned Meteor a couple of times on this podcast so far. And it's one of the things I really like about it is their their build tool, which, you know, many times in the community, they were trying to get them to move over to Webpack. But they're built to was actually, really one of the most unique exciting things about it is a sort of zero configuration build tool where you, you get things. Basically, if you want to use sass, you just do Meteor add sass in your terminal, it adds the sass package, and you never think about it, you don't write a config file, you don't say, hey, look at the style style files or whatever. In addition, like you have things like die, like exact code bundling. So if you're using these dynamic imports, and stuff like that, there's no overlap and your JavaScript bundles, they're like exact exact sizes to your bundles, it does all that bundling for you, you don't have to write a single line of config, and never have to think about it. So like you said, I think that's, you know, where a lot of this stuff is going is these really opinionated tools that sort of handle all this stuff, basically, for you. And then if you need to expand upon it, obviously, you can, you can write your own ISO build, which is meteors build tool, if you if you, you can write your own ISO, build plugins that do all this stuff for you, and expose all that if you want. But for the most part, you just flat out don't need to. And, you know, I think that's that's, that should be where things are going. Because you know, there there's a certain type of person that loves to write a ton of config files and stuff like that. And I am to some extent, but man, I can't, I can't get into it for too long. - -31 -00:16:58,800 --> 00:17:30,560 -Wes Bos: Yeah, we're not doing stuff that's all that unique. So I don't sort of see the reason why every single person needs to make their own own build. Right, right. Exactly reinventing the wheel every time. Yeah. Cool. So once you have a build tool in place, then it's time to sort of run around and start picking up all these different tools that work with your build. And probably the biggest use of that is Babel or Babel. Whoever you say it. It's, it is. Yeah, - -32 -00:17:30,690 --> 00:17:31,580 -Scott Tolinski: I say Babel. - -33 -00:17:31,890 --> 00:17:37,770 -Wes Bos: So do you want to take a stab at explaining what it is? And why you might want to use it? - -34 -00:17:38,040 --> 00:18:30,080 -Scott Tolinski: Yeah, so I mean, my understanding of Babel, and correct me if I'm saying anything incorrect here is is really that it's it's transforming your your JavaScript into essentially JavaScript that will be readable by most browsers. And so if you can write JavaScript of tomorrow, today, you can write S six, you can write ies 2017, or however you're defining your ies builds. Yeah, you can, you can write that that next year of ies code and use features that might not be totally finalized, or even stuff that is finalized and not in a browser yet. You could write that code and not have to worry about the head not working on some browsers here or there. It's basically just making that code. You know, you can write the code you want to write without having to worry about it working. - -35 -00:18:30,690 --> 00:20:12,320 -Wes Bos: Yeah, exactly. And actually, Babel used to be called back in the day, I think it was three or four years ago, it's called six to five, where it would take your ESX code and compile it down to Yes, five, and they actually moved away from it being just that one thing. And it's it's now sort of like a general JavaScript compiler, where you can pick how you can pick the different transforms that your JavaScript will be compiled down to. So the the biggest use case is react where you can write JSX, which is like kind of like write HTML tags inside of your JavaScript. And obviously, that's not valid JavaScript. But by running it through Babel with the React preset turned on. It will then compile down your JSX to the equivalent, whatever react create element is. And the when it really clicked for me, is just a couple of weeks ago, when I saw that somebody had written a PHP to JavaScript transformed in PayPal. And the guy I wish I could find the tweet, but the guy who said like, I'm like, he obviously it was a huge joke. But it just really solidified the idea that you can write anything, even if it's PHP, and we talked about this with post CSS kind of the same idea. You can literally write anything like and then writing preset are a plugin that will interpret your PHP and then the preset will transform it into your your end JavaScript that you're actually looking for. - -36 -00:20:12,350 --> 00:20:54,350 -Scott Tolinski: Yeah. So yeah, and I, I actually had a moment the other day where I was always doing something. And I felt like I was just typing the same thing over and over again. And I was like, really, for a second, I was like, should I just write like a plugin to just somehow write a shorthand that that converts this for me, and then I obviously decided against it. But it was like a couple of moments where I was like, was this a good idea, or is a terrible idea, you know, it's easy to have those when you're the only person on a code base, you deal with other people's like, looks at you about these one off, you know, plugins you might make, you may say, so PHP to JavaScript. - -37 -00:20:56,600 --> 00:22:45,300 -Wes Bos: One thing I wanted to say about Babel is that, so there are plugins, and then there are like, there's plugins to support template tags, there's plugins to support. The new for loops, and ESX has plugins to support classes, and they'll all compile them down. And then collections of those plugins are called presets. And the big ones that everyone was using was preset 20, es 2015, and preset react. But what is moving to now in the Babel team is trying to get everybody to move over to this is using just preset m, e and V. And what that will do is is much like autoprefixer with CSS where autoprefixer of CSS you say like, Hey, I'm supporting these versions of IE in Chrome. So apply the CSS accordingly. So the free set em for baybel? Will, you can tell it, okay, I'm, I'm compiling to react, or I'm compiling to the last two versions of the browser, or I'm converting to react or node. And then it will figure out for you, let's say you, um, supporting the last two versions of every browser, it will say, oh, okay, well, we don't actually need to compile some of the stuff, you can just run it straight away in ESX. You don't need to have to compile everything down. And then you also don't have to do that whole dance where you figure out like, do I need to compile this or, or don't tie and sort of whatever I was doing is they just compile absolutely everything. See, right, think about it. But this will will do the hard work of figuring out what needs to be compiled and what doesn't need to be compiled without installing all the plugins yourself. - -38 -00:22:45,420 --> 00:22:50,640 -Scott Tolinski: Yeah. Another another move towards less configuration, right? - -39 -00:22:50,790 --> 00:22:54,570 -Wes Bos: Yep. Yeah, exactly. So I was pretty happy about that. - -40 -00:22:54,780 --> 00:23:04,710 -Scott Tolinski: Are there any plugins you have to live with? Oh, you can't live without in. In Babel? Yeah. Is there something that you have to have on every project? - -41 -00:23:05,910 --> 00:23:34,470 -Wes Bos: Um, no, actually, I used to dive into like the stage zero, stage one, stage two, which is like stuff that might be coming to JavaScript isn't like I was like, super into decorators like, like a year or two ago. And then like, it kind of got yanked back. And like, Oh, we might actually not get Yeah, yeah, I sort of hold off on on touching stuff until it is totally, totally set definitive language. Exactly. Do - -42 -00:23:34,680 --> 00:24:13,380 -Scott Tolinski: I still use decorators, I use decorators to bring in all my data. So I'm pretty set on on enjoying decorators. Still. Other than that, I pretty much I use this transform class properties plugin for the static declaration of Prop types and default props in react. So that or even just state equals object instead of having to do it in the constructor. I prefer that syntax for my react components. So yeah, for me, it's nothing too wild. It's pretty much those are it transform decorators, and class properties. - -43 -00:24:13,950 --> 00:24:35,280 -Wes Bos: It's, it's worth if you want to, like see what some of the the good ones are, or what the ones that people are using is start up a quick create react app, and then inject from it and then take a look at which presets that create react app is using because it does have some of this these more edge cases stuff that makes writing react a lot more pleasant. - -44 -00:24:35,370 --> 00:24:53,310 -Scott Tolinski: Yeah. Yeah. And that I love all those the new syntax changes and stuff like that. I know some people can get a little overwhelmed when even you are moving from the React create class to, you know, the class syntax, but to me, those are all upgrades, you know, that's a nicer way to write the code, I think. - -45 -00:24:53,730 --> 00:25:09,870 -Wes Bos: Yeah, yeah, exactly. Cool. So let's, let's move on to the next one, which is linting. We're going to talk about linting and then we're going to talk about a new, it's not really a linter. But it's, it's something called prettier. So let's talk about linting es lint, what is linting? Scott - -46 -00:25:10,020 --> 00:26:22,590 -Scott Tolinski: linting basically looks over your code and finds bugs, it finds things that are based on your configuration, stuff that it might be concerned about stuff that it definitely should be concerned about. You can basically set all these rules to say, Hey, I always want to use semi colons. So that way, when you're writing your file, and the file doesn't see a semi colon, or the linter, doesn't see a semi colon where it thinks there should be one, it's going to warn you, it's going to warn you through your your code editor, it's going to warn you visually, maybe I'll do like a red underline or something like that are added to a list of issues in your code. You can even set your depending on your text editor, you can set it to auto fix, which I do, you know, if you haven't to auto fix everything I'm save, you save your thing, it doesn't have a semi colon, it's going to know that it needs to add one and add one for you. So linting makes it you know if there was a time in my life before linting, where you would save a file and you wouldn't know if it would work because you'd think it would work. And then you'd refresh the page and there'd be an error or something like that. And and that's just a bad way to do things, right? - -47 -00:26:22,620 --> 00:26:29,310 -Wes Bos: Yeah, it started catches, it catches the possible errors before you actually hit the browser, - -48 -00:26:29,430 --> 00:26:55,830 -Scott Tolinski: right? It catches all those those errors that people just despise when you're writing code, right? It's the stuff that shouldn't be breaking, because it's Yeah, it's not an issue with your implementation, or of the code itself. It's an implement, it's like an issue with it. Maybe just a typo or something like that. here and there. Yeah. And yeah, I rely on linting. very heavily. My Yes, lint is a serious business for me, I think. - -49 -00:26:55,980 --> 00:28:35,610 -Wes Bos: Yeah. So the way that you have it is you Yes, lint is the big one there. There was before that there was j es lint and j s hint, yeah, and every language out there has a linter. And all of these linters and enforce both formatting, which is like, make sure you use two spaces, or you didn't indent this properly, or you started your variable with a capital. So those are all just sort of like nitpicky formatting thing, which is great when you're on a team to enforce some sort of consistent styling. And then it also has like code quality things, things that will actually break your code, which is improper scoping, forgetting some sort of syntax, maybe forgot a curly bracket is going to, you're going to catch that before you actually hit the browser. You use the variable name, twice, whatever, all these different things. And you have an es lint file, where you turn these rules on and off. And what I find with a lot of beginners is that they turn it on, and then it what it tells you that like, all of your code is garbage. Like I remember turning it on for the first time and I was like why do people do this? But I what you do really have to spend some time putting together a list of rules that you do and do not want because by default, if you turn them all on, you might think like that's that's totally fine. I'm fine with like leaving off a semi colon or I'm fine with I can't think of which ones I should just open up mine. - -50 -00:28:35,790 --> 00:28:59,010 -Scott Tolinski: Yeah, I have mine open right now. Yeah. And but there are there are presets that you can you can get where like Airbnb is a big popular one. That's the one that I sort of based mine off. I use Yeah, I extend to the Airbnb one. And then I have several rules overriding it. But yeah, Airbnb, s lint config is, is definitely a good go to. - -51 -00:28:59,370 --> 00:29:12,660 -Wes Bos: Yeah, and it also includes a whole bunch of rules for writing react as well. So like some formatting things like which order do your lifecycle methods come in? Like, do you put the render before component should mount? It'll yell at you? - -52 -00:29:13,080 --> 00:29:22,290 -Scott Tolinski: Yeah, and and whether or not you've defined your prop types. So if you haven't defined your prop types and a prop, it's gonna, yeah, and let you know. And - -53 -00:29:22,710 --> 00:29:29,360 -Wes Bos: if you write this stop props dot name. It'll be like, hey, you did not declare a prop type. You do that first. Yeah, - -54 -00:29:29,400 --> 00:29:33,540 -Scott Tolinski: I know. It shames you into writing prep dives. Exactly. - -55 -00:29:33,570 --> 00:29:38,190 -Wes Bos: Cool. So I don't know any other stuff about linting that you're a big fan of? - -56 -00:29:38,340 --> 00:30:08,400 -Scott Tolinski: Yeah, like I said, I'm a big fan of having an auto fix everything. If you have your rules set up very tightly, you save your files, it formats it for you. Everything looks very nice. And then you have to worry about that less, right? Like when you save a file, you don't have to worry about whether your line was tabbed correctly. Because the moment you hit save, it's going to tab it correctly for You, you know exactly that. Yeah, this little time saver stuff. It's little bug removal stuff that it makes it just totally invaluable. - -57 -00:30:08,820 --> 00:31:23,550 -Wes Bos: Yeah, yeah, absolutely. So we're gonna take a second and talk about our sponsors is the first Super sponsorship read I've ever done. Think, I don't know, they gave me a little thing to read. But they said, I can also sort of riff on it. And the, the company that is sponsored is called delicious brains. And they make a product called migrate DB Pro, which is a WordPress plugin that will help you get your WordPress from one location, whether it's localhost or a server to another location, which is most likely a production or development server that you need to get it up and running. And I've actually been using this for years and years, which is pretty cool. I thought they wanted to sponsor the podcast. So the way that it works is that when you have a WordPress or when you have any CMS, your, your links are all hard coded to the URL of that thing. So you might have localhost 3000, just in your database 20,000 times, and the way that we used to do it in the olden days was you take a dump of your database, and you run some sort of big Find and Replace on your database for localhost, and you replace that string with whatever it is on your production, - -58 -00:31:23,640 --> 00:31:24,990 -Scott Tolinski: and you have your breath, - -59 -00:31:25,380 --> 00:31:37,230 -Wes Bos: and you hold your breath. And then you screw it up because you forgot a colon or a forward slash, and then the whole thing comes crashing down. And you just, you start thinking about maybe just going into a different Yeah, - -60 -00:31:37,260 --> 00:31:37,920 -Unknown: career. - -61 -00:31:40,020 --> 00:32:48,300 -Wes Bos: So I, what I've been doing for the last year, I've done quite a bit of WordPress in my past is that your theme goes in Git and you can deploy that. And that's nice and clean. But there's sort of this area where your data needs to go from one server to another? And how do you actually migrate that from one to another when you have all these paths? So migrate DB Pro, will you install this plugin on your remote WordPress in your local WordPress, and then you can either push or pull the data from one install to your other install. And it's going to take everything along with it's going to take all of your data all of your users all of your passwords, and do all of that Find and Replace for you without you having to export a file and import a file and do the Find and Replace by yourself. So it's amazing. It used to take me like an hour or an hour and a half to migrated WordPress. And now I've got it set up on tons of websites and you just you hit the migrate button in it it does it does this thing in a minute or two or not even a minute or two. And it's up and running. - -62 -00:32:48,479 --> 00:32:51,510 -Scott Tolinski: Yeah. timesavers like that. Amazing. - -63 -00:32:51,540 --> 00:33:19,680 -Wes Bos: Yeah, pretty, pretty happy. But they also have this like media files out on which is because like, I always say like your code goes in Git and then your your data is in the database. But then you have this like sort of gray area, which is like when you upload a file to the WordPress back end, right? Like does that going in? You're good, but like what happens if you like upload a file locally, and then you need that local file on remote? But then there's like remote files that can't get overwritten. FTP drag - -64 -00:33:19,680 --> 00:33:21,210 -Scott Tolinski: and drop? Yeah, that's, - -65 -00:33:21,210 --> 00:34:03,270 -Wes Bos: well, that's exactly and then you're like, like, keep both. And so what this will do is, it will also push up your media files, all of your uploads that you've uploaded to the WordPress back end. And then if there are unnecessary media files on any of the servers, it will also remove them, which is pretty neat. So huge. I think that a lot of people who do WordPress are already using this plugin, but if you're not check it out. They've given us what 20% off. Delicious brains calm for slash syntax, get you 25 or 20% off your order. Oh, cool. How How was that first sponsorship read ever? Did I convince you Scott? - -66 -00:34:03,689 --> 00:34:07,260 -Scott Tolinski: Yeah, I think Well, I think the tool convinced me. - -67 -00:34:08,760 --> 00:34:09,980 -Wes Bos: Not good. Yeah. - -68 -00:34:09,980 --> 00:34:18,060 -Scott Tolinski: No. I know. I thought it was an excellent, excellent description of delicious brains migrate. Cool. Awesome. - -69 -00:34:18,060 --> 00:35:53,280 -Wes Bos: All right. So let's talk about the next one, which is prettier is this just came out? I don't know, a couple months ago. And it's kind of cool that Scott was just talking about, yes, lint fixing his code. And there are a number of things that yes, lint will do like add in a semicolon if you forgot it, or re indent your code. But when you're when you're talking about prettier, prettier is kind of like es lint, except that it only does the visual formatting part. So it doesn't do any of the scoping issues or any of the actual bug stuff that comes up. But there's a sort of second half to two link Which is you spend a lot of time, like, Oh, I forgot to space in front of my curly bracket or Oh, we don't put a space between the colon and the property. But we do after and all these little nitpicky stuff, when you submit a pull request, and your team goes through it, and they're like, oh, nitpick, sorry, but I put a, you have to put a space there. And it's just super unnecessary. So what prettier will do is you set all those different rules, and then you run your code through it, and it will just fix it all for you. So there's, it's not going to tell you what's wrong, it'll just fix it for you. So if your line length is too long, or if you have a function with too many arguments, it will just put it on to the next line and all of these different visual formatting issues, you can code in whatever format you like. And then before you check it into get, it will just format it to your team's standard prettier style. - -70 -00:35:54,480 --> 00:36:23,940 -Scott Tolinski: Yeah, these kind of tools are in there, timesavers. Because now you don't have to, like you said, you don't have to go back into that poll request and say, Hey, fix this minor formatting issue, you know, that you overlooked. Because everybody on your team is all using the same tools to auto fix your code in these different ways. It's, it's just one less thing you have to worry about. And not to mention, you'll open up someone else's file, and it's going to look like your file. Exactly, you know. - -71 -00:36:24,900 --> 00:37:07,020 -Wes Bos: And I think this is huge for beginners, I think a lot of people are like, Oh, I don't, I'm just learning to code. I don't need a tool like this. But I think it's even better. Because a lot of times, beginners, the code will be really messy. And then you're like, my feedback is always like, clean this up. It's a little bit messy. But like if if there's a tool that will just immediately make it a lot cleaner for you, without you having to figure out how does indentation work? And what do you put on a new line, whether versus not, it will really help you out. So you can set it up with all of your code editors so that every time you hit save, it will just immediately format it to your liking. - -72 -00:37:07,230 --> 00:37:37,110 -Scott Tolinski: Yeah, and there's an es lint plugin, so it drops right into es lint. And if you have your es lint, config and everything like that, you don't even have to touch any of that stuff. It's all it's all good. But like I mean, even like you said there with new, like new new coders, right? I mean, the sooner you get used to looking at pretty code or code that's formatted in the same way that all these other companies are, the better it's going to be for you, because that's training your brain to read that code in that specific way. - -73 -00:37:37,590 --> 00:37:38,460 -Wes Bos: Exactly. Yeah. It's - -74 -00:37:38,460 --> 00:37:42,210 -Scott Tolinski: up, though, if something looks weird in the future, you know. - -75 -00:37:43,290 --> 00:37:50,940 -Wes Bos: So check that out. It's called prettier. Next up, we got bat, bat Babli. Baby, babe, I - -76 -00:37:50,940 --> 00:37:52,560 -Scott Tolinski: don't know Babli believe - -77 -00:37:53,630 --> 00:38:45,030 -Wes Bos: this one is, is very simple. It's before what we would do to minify. Our code is we use uglify. And uglify would just like, if you have a variable like first name, and you use the variable first name like six or seven times, then that could possibly make your code very long. So what it will do is it will take out all the it'll take out dead code, it will take out using that first name variable and replace it with a variable called a it'll minify your code to be as small as possible. The problem with uglify is that it doesn't understand Yes, six code. And as we're starting to actually ship, yes, six code to the browser. People are running into this issue where uglify can't handle arrow functions or something like that. So basically, is it's built on a table, and then it will just minify your ESX code for you. - -78 -00:38:46,730 --> 00:38:56,280 -Scott Tolinski: Yeah, sweet. Pretty sweet. Yeah, yeah, it's another one of those things. You use it, you got to use it. It does what it's got to do. And it uh, it does, uh, well, cool. - -79 -00:38:56,280 --> 00:39:10,730 -Wes Bos: Um, Next up, we have one called pre pack, which is, again, it's one cool thing about Babel is that all of these different JavaScript tooling projects are growing out of Babel. And pre pack is another one that sort of came out, have you you've seen this at all, Scott, - -80 -00:39:10,730 --> 00:39:14,210 -Scott Tolinski: I've seen it, but I don't know too much about it, to be honest. - -81 -00:39:14,760 --> 00:40:21,920 -Wes Bos: So they call it a let me open up the website. It's a pre packed IO. They call it a tool for making JavaScript code run faster. And essentially what it is, is that it will run your JavaScript code and figure out anything that could be run beforehand, in a compile step. So as simple example, is like let's say you had somewhere in your code where you're like, var dog age equals 10 times seven, and then every time your JavaScript runs, it will have to do 10 times seven and then put it into the age variable. What pre pack will do is it will just say var dog age equals 70. So it will be like oh, that that's simple. Why would I have to run that every single time The end result will always be the same. Why don't I just stick that into an actual variable? So I guess JavaScript can be a little bit slower when you've got all of these little things that need to be run every single page load. And it will figure out what those things are in random and then just make it into a variable for you. - -82 -00:40:22,020 --> 00:40:55,170 -Scott Tolinski: Yeah. So it's, it's optimizing your code for how the browser likes to read and handle JavaScript code. And I didn't realize it says that the related technologies closure compiler is a related technology, in Closure Compiler, for those who don't know, is that project by Google that does essentially the same kind of thing. But the benefits are pretty unreal. I mean, you know, you just get better code efficiency overall. So either of those projects, definitely, - -83 -00:40:55,350 --> 00:41:07,730 -Wes Bos: it looks like in a lot of cases, that also makes your code much smaller, as well, which is great, because you don't need to calculate these things. So just throws out that code to calculate it. And it just saves the actual end result of it. - -84 -00:41:09,030 --> 00:41:26,310 -Scott Tolinski: Yeah, yeah. And I, you know, I think tools like this are going to be more common. They're going to be more used just because anything that is going to get you performance boosts and efficiency boosts is going to be worthwhile to add to your project. - -85 -00:41:27,480 --> 00:41:48,720 -Wes Bos: Cool. So that I believe is all of the tools that we're going to talk about today. I actually, I have a whole tooling talk that is things like image compression and dead code elimination. So we'll have to do another one of these that are not so JavaScript focused, but more website tooling focused or web app tooling focus. Yeah, - -86 -00:41:48,720 --> 00:41:49,860 -Scott Tolinski: there's so much there. - -87 -00:41:50,100 --> 00:42:04,730 -Wes Bos: Yeah, yeah. image compression alone. I there's just so much to learn about that can really boost up your website. So well, we'll put that on the list for sure. Easy, free gains right there free performance gains, free gains comes for free. - -88 -00:42:04,800 --> 00:42:06,180 -Scott Tolinski: Yeah. All right, let's - -89 -00:42:06,180 --> 00:42:23,340 -Wes Bos: talk about sick pics. Okay, this is the section of the show where we talk about we pick something that is sick, and that we like to recommend to you. So I don't know, Scott, why don't you start us off? - -90 -00:42:23,520 --> 00:44:29,460 -Scott Tolinski: Yeah, my sick pick is a figma. So you get to do figma.com to check it out. So what is figma? It's basically like, you've used illustrator, you've used sketch, you've used all these other illustrative apps for doing web design, UX design and stuff like that. figma is actually browser based. So the good thing about it being browser based is that it's cross platform, you can use it on any platform, there's an electron app, it functions very nicely. But you could think of it as just a design app for web stuff. No web stuff, mobile stuff, pretty much anything, I use it to design my thumbnails for my YouTube channel. And it's awesome. It's basically they took a lot of the features that people really liked in something like sketch and, and built upon them. So you have a component based design flow, where if you used to meet if you're like me, and you're used to thinking in react components and stuff like that, or just component based development figma handles design the same way you're making these components, you can make versions of these components, you can modify these components, you can set, you know, sort of rules on them, like this components always going to be pinned to the top left, whatever. And then when you do your mobile design, or whatever, you can stretch the canvas, and the component stretches with the canvas. So it's basically a very powerful web, UI design, all that sort of stuff platform. And it's become my main design tool. And I'm doing a freelance project full my first full time freelance project design in figma right now, and I just didn't so I'm so into how nice it works like, wow, moving between layouts and pages and stuff like that. So a big big fan. There's a lot of lot of features I didn't touch on there's like, shared components and styles throughout your team. There's some really, really, really cool stuff there. Oh, I - -91 -00:44:29,460 --> 00:44:31,350 -Wes Bos: have to check this out. I had never heard of it. - -92 -00:44:31,500 --> 00:44:46,320 -Scott Tolinski: Yeah, I hadn't. And then when I when I, when I did hear about it. I was like, okay, you know, I'm happy with sketch and then I started using it. I'm like, I'm happy with figma like, this is really sweet. So I've been on it pretty hard lately. - -93 -00:44:46,710 --> 00:44:53,670 -Wes Bos: Wow. So what what would you use sketch for that this doesn't do or doesn't Nothing? - -94 -00:44:56,580 --> 00:45:37,200 -Scott Tolinski: Nothing really. Yeah, this even has some like built in prototyping. Features where you can like, set up hotspots and do like a presentation view and click between your designs like you would an envision or something like that. So it's replacing sketch in my toolbox right now. I am a big fan of it, I mostly just use the electron app. But the browser version is great, too. It's pretty much the same thing. It's really it's pretty inspiring to see this as a browser tool, just how, how awesome it is. Looking at this application in the browser, makes me feel like the browser is capable of so much. - -95 -00:45:37,290 --> 00:45:43,020 -Wes Bos: Wow. And that's really cool. Because like the one downside to sketch for me is that there's no windows so - -96 -00:45:43,560 --> 00:45:45,030 -Scott Tolinski: yeah, cross platform, man, - -97 -00:45:45,060 --> 00:45:49,800 -Wes Bos: I would love to see a class a cross platform thing come out, like sketch. - -98 -00:45:49,860 --> 00:46:07,080 -Scott Tolinski: Yeah, everybody can use and there's a you know, it's a little bit different things aren't necessarily where you'd expect them to be in certain in certain places or whatever, if you're coming from that. But yeah, the moment you get used to it, and it starts to feel comfortable. Yeah, it's feeling very comfortable to me right now. I'm really liking Oh, - -99 -00:46:07,080 --> 00:46:10,530 -Wes Bos: awesome. We're gonna check that out. Take my - -100 -00:46:10,770 --> 00:46:13,890 -Scott Tolinski: si GMA document. Yeah. - -101 -00:46:14,280 --> 00:48:12,240 -Wes Bos: So my sick pick today is a docking station for my new laptop. So I got the the new MacBook Pro with the all the USB sees and live in the dongle life. And I have a pretty complicated setup here I've got two external monitors, I've got some external USB audio equipment, I've got a printer, I've got a couple of hard drives, I've got I don't know all kinds of stuff. And what sucks about that is that you have to plug all of the stuff in when you throw it on your your desk and you want to work from your monitors. So one of the promises of Thunderbolt three and USB sees that you can have one plug for charging for monitors for USB for for absolutely everything. And it's finally coming to fruition where I got this thing called the Cal digit Ts three, I believe it is. And it's it's super expensive. It was I think it was like 350 bucks, and then I got hit with duty it was it was probably about 400 bucks, Canadian at the end of the day. Which is ridiculous because that's you can get a Windows laptop. But, uh, it finally has happened where I put the stock on my desk, I plug in all of my USB stuff, I also plugged in another USB hub. And I plugged in all of my monitors, and then you plug that thing into the wall. And then you have one single USB three, or I guess it's technically Thunderbolt three, and you plug it in and all of your USB stuff works, the laptop starts charging and both monitors are powered, which is incredible that it actually works. And I'm amazed that there's no like, I don't know, I feel like my entire life. I've had to plug USB stuff in and out in and out. - -102 -00:48:12,480 --> 00:48:28,800 -Scott Tolinski: used to make it work. Yeah, you don't want to see my desk right now I have like, you know, it's one of those things the cables get. So over time, you know, you plug them in, and you plug them out whatever. And then you have to eventually just like rewire the whole thing because yeah, it's just so much. Yeah. - -103 -00:48:29,310 --> 00:48:42,120 -Wes Bos: So I've been super happy with it so far. It does have a SATA ports, which I guess means you can plug a hard drive or an external GPU directly into it, which was pretty cool. - -104 -00:48:42,120 --> 00:48:45,990 -Scott Tolinski: Yeah. And that external GPU would be sweet for video editing. - -105 -00:48:46,169 --> 00:49:09,300 -Wes Bos: Yeah, I'm just like, I hate waiting for exports. So wondering like, how that works. But it's called digit Doc, check it out if you're interested and you have tons of money to burn. But I'm really happy to finally just have a single plug. I can I can get up and go whenever I want. Just have to plug this one thing in. - -106 -00:49:10,110 --> 00:49:13,680 -Scott Tolinski: Awesome. Yeah, it looks cool. Well, that's it - -107 -00:49:13,680 --> 00:49:26,760 -Wes Bos: for this episode. Make sure you like subscribe. Let's YouTube. What do you do on a podcast you review? you subscribe. In Follow us on Twitter. I'm at Wes Bos to be esbls - -108 -00:49:26,760 --> 00:49:31,380 -Scott Tolinski: I'm at St olinsky or at level up tut's. - -109 -00:49:32,190 --> 00:49:35,100 -Wes Bos: Awesome. Until next time, we'll see you then - -110 -00:49:35,730 --> 00:49:51,690 -Scott Tolinski: see who's bass. Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you liked the show. Until next time, - diff --git a/transcripts/Syntax40.srt b/transcripts/Syntax40.srt deleted file mode 100644 index 083ca88e2..000000000 --- a/transcripts/Syntax40.srt +++ /dev/null @@ -1,448 +0,0 @@ -1 -00:00:01,290 --> 00:00:10,650 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready to Lynskey and West boss. - -2 -00:00:10,770 --> 00:00:35,790 -Wes Bos: Good Monday morning. Oh, no, that's not us either. Welcome to syntax. Hopefully you're doing well today we are talking all about testing. So we're super excited to to get into this specifically JavaScript testing. But the idea is that we cover on this will be applicable to to most languages. So with me as always is Scott to Lenski. How you doing today, Scott? Hey, - -3 -00:00:36,110 --> 00:00:42,840 -Scott Tolinski: I'm doing I'm doing pretty good. Yeah, I'm doing this good. The hallways just working, working, working. You know, that's, that's the life I'll - -4 -00:00:42,840 --> 00:00:43,770 -Unknown: also - -5 -00:00:44,220 --> 00:01:13,439 -Scott Tolinski: Yeah, I'm recording this. It is Monday and the University of Michigan is headed to the national championship in basketball, which is not anything that anyone who follows Michigan basketball would have expected a couple of months ago. So I don't know. I am pretty psyched. The game is tonight. And by the time you're listening to this, it's probably already over and Michigan has probably already lost but just the fact that they're playing in the national championship is is pretty sweet. We're all super pumped. - -6 -00:01:13,730 --> 00:01:15,650 -Wes Bos: Is that like the the Final Four? - -7 -00:01:16,200 --> 00:01:18,030 -Scott Tolinski: Yeah, it's the final game. Yeah. This - -8 -00:01:18,030 --> 00:01:21,510 -Unknown: is like the Stanley Cup of basketball. It's exactly yeah. - -9 -00:01:21,510 --> 00:02:03,540 -Scott Tolinski: Basketball, and in a minute Michigan basketball. I mean, they got there. I don't know. Few years ago, I forget what year was, but they're there. Michigan's never been primarily known as like the basketball school. We've been we've been the football school. And like, lately, our football has not been super good. And our basketball has been very good. Which is just, it's great. It's a great thing. Especially because we have a lot of rivalries with Michigan State who's always been primarily the basketball school. And not only did we beat them every time this season, we beat them. We we took the big 10 tournament and stuff like this. So it's been a pretty sweet year for Michigan basketball out of nowhere. - -10 -00:02:03,870 --> 00:02:19,380 -Wes Bos: Pretty sweet. I used to be super into basketball when I was a kid. And I don't watch any sports at all anymore. I think it has something to do with just like not having cable or for I haven't had cable, and like 12 years. So I think all the sports have been drained of me. - -11 -00:02:19,880 --> 00:02:23,130 -Scott Tolinski: Yeah, I do the YouTube TV. So - -12 -00:02:23,690 --> 00:02:26,880 -Wes Bos: we don't have anything good in Canada. Do you have YouTube read as well? - -13 -00:02:27,470 --> 00:02:38,430 -Scott Tolinski: No, but I actually Maybe it comes with YouTube TV. I'm not positive about that. But YouTube ads on YouTube lik? I have ad blocker? Oh, I'm not quite sure. Yeah, - -14 -00:02:38,460 --> 00:02:59,970 -Wes Bos: my ad blocker doesn't work on YouTube for some reason. But I was looking at buying YouTube Red, which gets rid of all the ads, especially now that my kids are starting to watch YouTube, I want to turn on all the ads, but it's not available in Canada. And it's annoying, because if you want to use the YouTube app, or Chromecast it then it'll stick like a Chevrolet Spark ad in beforehand. It's kind of annoying. - -15 -00:03:00,390 --> 00:03:01,620 -Scott Tolinski: Yeah, that's super annoying. - -16 -00:03:01,620 --> 00:04:38,009 -Wes Bos: We are sponsored today by fluent cough, which is an awesome web development conference from O'Reilly happening in San Jose, from June 11 to June 14, and snap shooter and snap shooter does Digital Ocean snapshot backup. And they do like a lot of fine grained control. And you really have full control over backing up your digitalocean server. So we'll talk a little bit more about them partway through the show. So let's get into it. This sort of ideas behind a tackling a testing episode, because the whole testing landscape is massive. There's so many different types of testing, there's so many different libraries that you can use to test there's all kinds of different languages that you can test in. So our hope with this episode is that you walk away with maybe a better understanding of what testing is, I feel like testing is one of these things where people don't talk about it a lot, because they don't necessarily do it. And they talk about not testing. The kind of the shame game starts to get played where people go, Oh, you have to death because people who do do testing, are extremely passionate about it. Because once you do get into it, you're like, oh, Why wasn't I doing this forever. It's one of those things. It's like CrossFit, right? You just get you just like are so passionate about it that you come off a little, a little harsh, sometimes. So little push, I have a feeling that a large part of our audience doesn't do any testing and they are interested in getting into it. So hopefully you can walk away from this episode with a better idea of what testing isn't. It'll be a little less scary than I think some people think it is. - -17 -00:04:38,570 --> 00:05:27,959 -Scott Tolinski: Yeah, I think that is a big message. It is way less scary than you're expecting. And maybe like, maybe you had a bad experience like attempting to learn how to test and that like put you off from it entirely. But if you go through the growing pains or any of those initial things, you're going to see the benefits the very first time that any of these things sort of come about that we end up getting into In this episode, so I, personally as someone who never really, I never when I first started programming, I never saw the point until I had an application worth testing, you know, something that I need to make sure doesn't go down or is being used by a lot of people and, and then the moment that you do have something like that, you start to experience all of the issues and reasons why people find testing to be such an important part of your stack. - -18 -00:05:28,620 --> 00:06:58,680 -Wes Bos: Yeah, you only need to have a have a weekend ruin once in order to see the value. And I think that's an important point as well as is not everybody is building the exact kind of apps. So it I don't think it necessarily makes sense to test absolutely everything. I built WordPress themes for a long time. And I didn't test any of them. And I almost never had an issue with all of those applications. And but as I started to get into more building applications, more building custom stuff, versus using a lot of plugins which they themselves have been tested, I started to see the light and see that even though it does take more time to to build the stuff, it first makes me a much better developer, and we'll we'll talk about some of the benefits. And second, it really covers my ass in a lot of use cases where you didn't necessarily see things like, I'll give you one simple example. When I first launched my first course, thing, I didn't test, I would take someone's name and put it through a slug URL, and then the URL to download the book and the videos was their name would be in the URL. And I had people from Russia buy it, which Oh, China Slug a phi a totally Cyrillic name. It the slug is nothing. And then it was it was breaking the downloads for that specific user. And if I had a thought about that, and if I would have had tests for for all of those different use cases, run it through a bunch of different names, then I would have caught that. - -19 -00:06:59,399 --> 00:08:21,540 -Scott Tolinski: Yeah, yeah. And it's so funny. There's, I don't know, one of my favorite. And then you mentioned not everything needing the ability to be tested. One of my favorite like this doesn't need to be tested situations was when I was working at Ford, and we were doing design prototypes. And our whole job was just to crank out code versions of these design prototypes so that people could use them. Right? Yeah. And we had this this third party developer who is like from another agency who wasn't part of our team. And he got basically contracted up to fill in some additional work here and there. And he came back with this prototype, keep in mind, these things are supposed to be lean, and they're supposed to be just done immediately, he came back with this prototype that was fully tested, CSS testing, and all sorts of stuff. And he was like, going to do the handoff. And he's showing us this prototype. He's like, here's, here's where my CSS test live. And here's where this lives, and here's my, my this and that. And I was just like, this is a prototype man, like, what are you like, I'm not going to make, I'm just going to go ahead and delete your test folder, because we're not going to be using them, we're actually going to show this prototype to the client once, and then it's going to get tossed out and you're never going to see it again. So that I mean, not everything needs to be tested. But if you're working on stuff that is user focused or user facing is going to be in production here then - -20 -00:08:21,570 --> 00:08:24,300 -Wes Bos: yeah, testing important. Totally, totally. - -21 -00:08:24,870 --> 00:09:17,300 -Scott Tolinski: Yeah, so I thought I thought we'd kick things off a little bit of talking about types of testing, because there's a lot of types of testing. And they're all kind of different, in a lot of ways. And some of them the the methods in which you go about actually testing aren't necessarily the same. So I guess the most basic micro way of testing is unit testing, which is probably the one you hear the most about, which is basically testing the most simple, smallest unit of your code. If you have a function, your test would be saying, Hey, here's some input. And the output should be this. That is the unit test a single function, right individual unit, and react, it could be testing a single component, right, without without rendering more deeply than a single component. But having just one single component or one single function tested is unit testing. - -22 -00:09:18,330 --> 00:11:31,410 -Wes Bos: Yeah, so let me give a couple examples. The most basic one, which everybody uses when they're learning to test is you have a function called add, it takes in a and b and it returns a plus b. So what you would do is you would, you would run that function with one and two, and you would expect that the function returns three, right? And then you could run it with a whole bunch of different other edge cases. You could, you could try it with a one and a zero, you could, you could try it with negative numbers and just make sure that you're expecting what this function returns every single time is exactly what you expect. And one kind of thing that comes along with that unit testing when you do that is this whole concept of appear functions. And this is one thing I see in in react a lot where people are moving to react and Redux. And maybe they directly try to update state directly instead of using set state. Or maybe they have just like a variable outside of scope, and they're just sort of updating that outside of it. What unit testing does is because you are just testing this function, by itself, you always want to make sure that you're writing what are called pure functions, meaning that given that I feed this function, A and B, one and two, it will always return to me three. So if I ran that function 1000 times, it's not going to return to me anything different any other time where sometimes you have a function, and then you you update a variable that is outside of that function. That's, that's a mutation, and that's going to eventually kick you in the butt, because you might run that function in my error out, or if you run it once, and it returns three, but then all sudden, you run it a second time. And it returns five. That's that's inconsistent behavior, right? So I think that along with unit testing, understanding this whole concept of pure functions, pass in data, always get the exact same result back is really important. It's the same thing goes with with dates, if you ever have a function that needs a date, don't generate the date inside of that function, pass in the date into the function, so that you can always expect the exact same resolve that comes back. - -23 -00:11:31,919 --> 00:13:14,940 -Scott Tolinski: Yeah, yeah. So you'll see that unit testing, again, is extremely important to make sure that these individual things are going to work by themselves. And now the next one I want to talk about is going to be sort of the next step up the chain, which would be integration testing, where an integration testing is how these units work with each other, right? Because more often than not, you're not just having a single function that returns a single value. And that's the entire application, I mean, with react, you have a component within a component within a component, maybe you have a function that calls another function, or maybe you have a function that calls both of these units, or both of these individual functions. So an integration testing is doing is testing these individual integrations, these these things, these systems that work together and how they work together. For instance, again, with the React example, you have a nav component with a menu item in it write a unit test, we'll just check to make sure the nav showed up. But an integration testing is going to make sure that the nav shows up correctly. With the individual menu item showing up in the menu item component is showing up and rendering all of the stuff that needs to be rendering as in these two things are working together in unison as they should be. So integration testing is gives you a little bit more confidence that these things the system is actually working as it is in the real world. Now, most of my tests are integration tests in react, we can talk a little bit more about this when we get into our own testing setups, integration, testing something specifically with doing like mount rendering and stuff again, we'll go over more of that later is definitely something that I use quite a bit more than individual unit testing in web application stuff. - -24 -00:13:15,210 --> 00:13:47,280 -Wes Bos: Yeah, because there's a bunch of memes out there, where they say like two unit tests, pass zero integration tests, where, by itself, these things work great. But as soon as you start to use them together, everything burst into flames, right? So you can be sure that these things work just in like a sterile room by themselves. But if they ever need to interact with each other, then other issues can start to arise. And that's why it's important to to have integration testing as well. Yeah, - -25 -00:13:47,729 --> 00:13:51,090 -Scott Tolinski: yeah, definitely. Yeah, you want to take the next one. - -26 -00:13:51,389 --> 00:15:33,050 -Wes Bos: Next one is visual regression testing. And this one is a lot more visual, it's very visual. And the way that it generally works I've done this a lot in the past is, especially when you have a lot of developers working on CSS. And you don't get this so much when you you start to use scoped CSS or style components and stuff like that. But what I would do previously is if you have like a class of like, footer, and you'd style that thing somewhere, but you don't know that somewhere else on the website, there is also something with that same class. What What this will do is it will take screenshots of your website on every single page, and then it will diff them with how they used to look. So maybe when you check in your code to GitHub, it will generate a visual version of that site and compare it against what the current site looks like. And it will show you everything that has visually changed on the website. So if for some reason, a box got way bigger, or if for some reason your fonts changed, and you'd be able to quickly visually see that, oh, this CSS looks good, but it actually had an unintended consequence. of breaking this part of the site or changing the look. And I really like that because especially on websites where you have just one monolith CSS codebase, you can sometimes the style of your website will just slowly morph over time. And before you know it, it, the site just doesn't feel as nice and tidy and clean. And that's because your CSS is sort of leaking out to different parts of the website. So visual regression, testing will, will definitely catch those. And flag anything that is has a significant change on it. - -27 -00:15:34,620 --> 00:16:12,630 -Scott Tolinski: Read, see a lot of these things. It's interesting because again, testing is so important. But not all of these kind of testing, it will be important for every single kind of app like a lot of these things, the larger your app is getting, the more people that are using it, the more of these strategies you'll want to employ. Right, to make sure that there aren't, but if you have the the engineering in the time, and whatever. I mean, all of these are going to make your life a little bit better somehow. But I don't necessarily think that. But I guess they all are important. But again, I guess just not for every single app, right, I guess. Yeah, depends on how it's being used. And who's using it. Right. - -28 -00:16:12,800 --> 00:16:57,840 -Wes Bos: There's some sort of balance that needs to be found there. Yeah, I think if you talk to people are, who are head over heels about testing, obviously, the all of these things are would be amazing to have in place. But the reality is, is that a lot of a lot of people don't have necessarily have the time to do the thing, these things. And, of course, these things are going to save you time in the long run. But I don't think that you have to deploy all of these for the example that I'm talking about with the visual regression testing. This was a just primarily a website. So there wasn't a whole lot of functionality. But there were hundreds of pages and hundreds of different layouts on that. And we needed to make sure that all these different layouts didn't break from deployed to deploy. So regression testing was was fantastic in that case. - -29 -00:16:58,410 --> 00:18:42,840 -Scott Tolinski: Yeah, absolutely. Cool. So next on the list is e to e or end to end testing. Now end to end testing is a bit more. It's sort of like a robot testing the website, like you would be testing the website as a human being right. Like, when you test a website, you don't test the functions manually, you don't, you know, run a function and say, hey, did this, like as an individual, not a code testing framework like that. But with end to end testing, it's, it's actually loading it up in a real environment, like a browser, right? It's loading it up in a browser, it's actually clicking through, it's actually paging through your site and checking to make sure that things are working, you're checking to make sure that when you click this button, this thing happens in the real world in a real browser, the library I really liked for this, we're going into libraries. margen is cyprus.io. It's sort of the new kid on the block, because it's actually showing you sort of like a video or an interact, it's not really a video, it's like an interactive browser of Cyprus, clicking through your site and making sure so that way, when you writing your tests, you actually get this visual indicator of the the robot or the code that's going through and clicking and using your site. But end to end testing is basically like the biggest macro for the same type of thing that unit and integration testing are, it's just making sure that the entire system is working inside of a browser, like you're expecting it, you know, one of my, one of my Cypress tests for level up tutorials is just that I click around the site and that the pages load as expected, right. Yeah. So I click click, click head out to a few different pages, and just make sure all of these pages and all these links and all these different, you know, things are just loading as they need to. Man, - -30 -00:18:42,840 --> 00:19:18,930 -Wes Bos: I'm really excited about this, the Cypress because no good. Previously, what what's the one that everyone you see, use Selenium? Yeah, I had used that. And it's so slow. And it's like, so brutal. Yeah, I don't like it makes me not it made me not not makes me It made me not actually write tests for it, because I just like couldn't deal with the like, okay, I built this thing. Let me spend the next hour, like waiting for it to boot up. So I was not happy about that. And I see this Cypress and it's a service, but it's also open source, which is my favorite kind of service. So pretty sweet. It's - -31 -00:19:18,930 --> 00:20:32,190 -Scott Tolinski: a it's a joy to use. I'm gonna tell you that right now is that syntax, it is like, I mean, it's like jQuery syntax to find click, find click whatever. But then when you run your tests, every time you save or whatever, every time your tests run, you have that browser window open, and you see it clicking through. And so that way you can see exactly if the test if the test is doing what you expect it to be doing. And if it's not, then you can inspect or you can just click on the test and will time travel back to when it's actually attempting to do that to troubleshoot writing your tests basically, I found like the the amount of resistance I had writing test to be so extremely small because I was able to see every step every you know, I sat through it. Talk about Cypress one time in the guy described integration tests or end to end testing with Selenium is like, I don't know, try to solve a problem while you're blind and deaf, like you just you're just like waving at, you know, you're just trying to figure this thing out where this, this testing problem is actually sort of illuminates and gives you total vision into what's going on in the test itself. So I'm a big fan of something like Cypress, but I'm also a big fan of end to end testing, because again, this is how your users are actually using your site. And that's why it makes it important. - -32 -00:20:32,550 --> 00:21:24,690 -Wes Bos: There's a couple other pieces of testing, which we are not going to cover today. But that's stress testing, which is what happens when 100,000 people visit your website at once. Or what happens when you try to sell stickers on $5, Digital Ocean droplet or something, I need to learn how to do performance testing. So making sure that everything is as fast as possible usability testing. So that's learning things from your users as they they actually use a website and beta testing, which is getting people into your site before you actually deploy it large. So those are all the different types of testing out there that we could think of I'm sure there are some more. But let's talk a little bit about why you would want to test like what are the benefits to testing? And then we'll get into the nitty gritty of how you actually run a test. Sure. Yeah, so - -33 -00:21:24,690 --> 00:22:49,410 -Scott Tolinski: I think one of the the biggest, the biggest single reason for why you would do testing is confidence that your code is going to work. There's, there's, you don't necessarily realize this while you're writing code, but you have all these connected systems, right? And you think, Hey, I'm writing this code right now. And it's working right now. So why would it work tomorrow? Right? Well, what happens if you change something on your site tomorrow that you might not realize is actually kind of connected, and that connection ends up breaking. And then therefore, the thing doesn't load and you didn't know, because you didn't go back and manually check each page. So the confidence that you get from writing each from will write all of your tests, passing is going to give you the confidence that everything works. And if you have integration tests, unit tests, end to end tests, right? You have this confidence that not only are your individual functions working, but your your system as a whole is working together. And then therefore, if something is breaking, or something's going wrong, you know about it instantly, the moment that you write some bad code, or some code that affects another system, and modifies it or something like that, you'll know because when you run your tests, your tests will fail. And it'll tell you what's going on. And it'll tell you where the problem is. And you're not going to have to spend a lot of time and you don't have to have a user reporting to you that this thing is broken, you'll already know it's broken before it ever hits production. - -34 -00:22:50,850 --> 00:24:02,850 -Wes Bos: Awesome. Yeah. The greater confidence is such a such a huge one. Next up a wide test is easier factoring. So often, what happens is that you have let's say you have a function where if you input a credit card number and some some billing information, and then what comes back from that function, or what resolves from that a synchronous function is either a success or an error, right? And then all the nitty gritty about how that happens lives inside of your libraries and everything like that. So if you wanted to refactor that library, and totally rip out the guts and and rewrite it, maybe you're putting in a new payment library, maybe you're just updating the code to from callback base to a sink await. You want to have confidence that that is not going to break how it works, right. And we've all had this code where you sort of shy away from touching the code, because you don't want to break it. Well, if you have tests Oh, is running against that code, you can totally change the internal guts. And as long as it still covers every single edge case of how you're testing something, you can have confidence that your factor went properly, and you can have much faster refactoring. - -35 -00:24:03,630 --> 00:25:09,090 -Scott Tolinski: Yeah, I mean, I really liked this too, because it also made me a much better developer, because you can write, you can find your code and see where it is these larger chunks that are more difficult to test, right. So you break things out into smaller functions, you test those smaller functions individually, you tech test the whole thing as an integration, but it to me it like really helped me illuminate where some of the issues in my not necessarily issues, but where some of my code could be better just by simply writing the test itself. So one of my things that I really like about testing is you end up having a greater understanding of how your code works. Because when you get into writing these tests, you need to address it, sort of what cozen what comes out what goes in what comes out, and then you think about what possibly could go in adding in what possibly could go in and seeing what comes out and then being able to adjust your your functions or your code accordingly. You'll end up just having a much greater vision of your code and understanding because you've written the test, you understand what should be in what should be out that sort of thing. - -36 -00:25:10,020 --> 00:26:51,360 -Wes Bos: Yeah, along the same lines as edge cases in your code will show themselves so much faster when you have tests. So an example of something I'm working on right now is, or a function that I have in my own codebase is that I show how much a product is, and I have all my products stored in cents, so something might be 5000 cents, and that is really $50, right. And I want to format that as a price. So if something is 5000 cents, I want to format it with the dollar sign, and just 50 I don't want the 50 dot 00 on the end. But if it's it does include cents, then I want to show like $50 and 48 cents. And then there's all these other edge cases that it would run into where if it was $50 and 10 cents, my format, or would just do 50 dot one, right? Like, obviously, you need the zero on the end there. And then there's rounding and all kinds of stuff that that needs to happen. So what I do with this is, is I basically write this function, and I say given sense, it should, I should expect that it returns dollar sign $50 or dollar sign 50 dot 42 cents, and and then it becomes a game because you're like, how can I break this function? Right? Yeah, and you sort of throw like 40 or 50 or not, not that many. But you should throw all these different, what we call assertions at it. And you you say like, Okay, if I give it amount of full dollars and incense, then it should format it like this. And you can write all these different things. And if I would ever refactor that function, I have all of these different tests written against that function. So I don't have to go back and try it again, myself. - -37 -00:26:51,810 --> 00:28:02,970 -Scott Tolinski: Yeah, this was a big one for me. Because like he said, it is it is a game. And once you realize that, like a lot of the times when you're writing your code, you're writing the code was sort of perfect inputs, right, because you're designing the input, so then therefore, you're getting outputs that you expect to be perfect. But what happens when your inputs aren't totally perfect, right, or the numbers aren't coming in, as you'd expect, it is so much faster to write a test that tests the results of this function than it is to try a billion different varieties of this value, right. In the last one, I the simpler code base, I did kind of touch on to it, writing tests sort of illuminates again, where these functions are maybe a little too monstrous. And they could be broken up into smaller bite sized pieces that are easier to test. So if you write code that is hard to test, then that is a good indicator that maybe your code could be written a little bit differently or better. Because, again, if these tests are hard to test, or you're not quite sure what to do, they're the writing these unit tests, or these integration tests are going to help you just sort of figure out where these areas in your code that could be simplified. - -38 -00:28:03,060 --> 00:28:22,980 -Wes Bos: Someone once told me, if you if you're describing your tests and includes and you're probably your function probably does too much, or your test is probably doing too much. So you got to break that up into smaller pieces. And, again, it's just going to make for much simpler codebase. Overall. Nice. - -39 -00:28:23,250 --> 00:28:45,540 -Scott Tolinski: Yeah. So I guess the big takeaway here is confidence, right? I mean, we're all looking for greater confidence in our code, and we want to make sure it works. And so another thing that can give you great confidence is snap shooter. Snap trigger gives you the confidence that you're always going to have the backup solution that you need for your Digital Ocean droplets. - -40 -00:28:46,020 --> 00:30:22,260 -Wes Bos: So snap shooter is a Digital Ocean backup service. So it's actually pretty, pretty nifty, and hardware. So if you've never used digitalocean, before, first of all, you should, because digitalocean is awesome, a second of all, so in digitalocean, you have these things that are called droplets. And if you want to take sort of like a backup or like a what's called a snapshot of the entire image of that, because you want to maybe move it to another server or you want to be able to restore to that snapshot. It's funny, we're actually gonna be talking about what snapshots are in testing today. In digitalocean, you can also snap shot your entire server, and digitalocean lets you manually do that yourself. However, snap shooter is a service that sort of takes it off to the next level. So if you want fine grained control over how often you you backup your services, how long you can keep the backups of your Digital Ocean. So Digital Ocean only lets you backup your servers for four weeks. So if you need backups that are much longer than that, this is a perfect service for you. You can retain them a lot longer. I thought this was kind of neat. A snap shooter actually runs on Digital Ocean. So you're a snapshot of your server will never actually leave Digital Ocean itself, which is pretty, pretty nifty. It's this is really great. I actually just started it up before the podcast, they have a free plan that's for 14 day free trial. And I was running a backup of my own server in, I think, what was it about two minutes? Scott? Yeah, - -41 -00:30:22,260 --> 00:30:30,360 -Scott Tolinski: I would, uh, I mean, in the lead into this episode, it was absolutely no time. I mean, I yeah, it was it was super fast, - -42 -00:30:30,539 --> 00:30:55,200 -Wes Bos: pretty sweet. You just connect it to your Digital Ocean account. And then it will take a look at all of your droplets. And then you can go ahead and start scheduling it all from there. So if you need some backup for your Digital Ocean server, check out snap shooter.io. And of course, we have a coupon code for syntax listeners, use the code syntax to receive a 20% off for your first 12 months. - -43 -00:30:55,529 --> 00:31:00,630 -Scott Tolinski: Nice. Yeah, if you so if you're backing up? snaps, you got to do - -44 -00:31:00,630 --> 00:31:17,130 -Wes Bos: it. Yeah, we should do an episode on backing up as well. Because that's that's one thing I think people aren't doing as well as, as they should, because it only takes one terrible crash. Before you just want to stick your head in the sand. So check it in how many people - -45 -00:31:17,130 --> 00:31:44,160 -Scott Tolinski: I guess you don't really experienced this too much anymore with solid state drives. But how many people remember like had like a hard drive full of stuff. And all sudden the hard drive won't boot up? One day, I had a lissie like raid drive one time that one of the drives died. And I lost everything on both of the drives. And I didn't have a backup. Because I mean, it was my backup. But I still had extra stuff on there. It wasn't living somewhere else. So backups. Yeah, I had burned. - -46 -00:31:44,580 --> 00:32:42,540 -Wes Bos: I had my my old MacBook Pro, I put in a one terabyte SSD in there. And it was like 1200 bucks or something like that. And it died, like a couple of months in and I was so unhappy. But luckily, I had backups in place. It's Yeah, I think everybody should know it's not if your drive dies, it's when it drives. So you should always have some sort of backup system. And you can also restore from snapshots as well. So if things do go south, it's just a couple clicks away to restore your droplets, which is pretty sweet. Food. Cool. All right, let's move into libraries and services. So you get it you want to test you want to do some sort of the testing that we did, what are the different libraries that you can use? And we're gonna be attacking this from a JavaScript standpoint, because we are primarily JavaScript developers. But again, you should know that these ideas, they are an absolutely every single language. - -47 -00:32:43,230 --> 00:33:04,950 -Scott Tolinski: Yeah, absolutely. Yeah. And there's, there's probably like a lot of things in actual software testing that's existed for ever and ever and ever that, you know, web developers, or as we write more and more complex stuff are just starting to dive into. So okay, so some of these libraries. Did you want to test drivers assertion library first? - -48 -00:33:05,160 --> 00:34:08,130 -Wes Bos: Yeah, let's just clarify real quick. And these sort of blur the lines, there are kind of two ideas there, you have what's called a test runner, which will watch your files and suck in all of your tests and actually run them for you. And then you have what are called assertion libraries, which is inside of your test runner, you actually need to check if those values are what your you're expecting, right? And generally, your your assertion libraries will say, like, expect the add function to equal three, or expect this react component to have three children or expect this react component to look like this or to have attribute or, or you get the point, right, like, run this code, expect these things to happen? Are these things to have been called or it to look like this, right? So there's sort of two ideas and some of these overlap, some of them you use together? It's a bit of a complicated space, because there are so many different tools out there. - -49 -00:34:08,630 --> 00:35:43,400 -Scott Tolinski: Yeah. Cool. So we're gonna start with the most popular test runner out there. Which is well, it's this is also sort of an assertion library as well. Right? It's both Yeah. So yeah, it's a jest. Now, just as a library made by Facebook that will run your test and also do your assertions to make sure everything is as expected, but just sort of came onto the scene the past couple of years and has been a hot hot, hot favorite. In fact, I, I my tests were written originally in mocha. So I was, which is another one we'll get into in a second. So I was on mocha and I wasn't necessarily planning on rewriting everything. The API is pretty similar. But I had a tweet a few weeks ago, where I was just saying, Hey, I'm gonna do a series on testing when people want to see mocha or jest, and I had a Maybe like 10,000 responses? Just, it was like, in fact, some of them were like getting into insulting. They're like just You idiot, like, why would you do anything else. So people are pretty, pretty high. And just right now, I do like mocha as well. But like, just is a new more sort of, I would describe it as being a little bit more simple, easier to use than some other things. There's a lot of extra features, we'll talk about some of the snapshot testing stuff, because I haven't actually done very much of that. But just is a Yeah, it's a pretty sweet library for testing. Anything really in JavaScript, a lot of times people think because it's a Facebook library that it's for react specifically. But it's really just for JavaScript testing. - -50 -00:35:43,530 --> 00:36:04,130 -Wes Bos: Yep. It's awesome. Because like, it obviously tests your JavaScript, it comes with a really nice test runner in it. So it will watch all of the files on your computer, it's very fast, it will, it'll run the test, I think it's much faster, a little bit faster than some of the other libraries out there. What is there's some other things that are really like, - -51 -00:36:04,530 --> 00:36:27,230 -Scott Tolinski: really nice code coverage features will tell you how much of your code is covered by tests, it'll give you this nice little table output of, you know, different percentages for this, this file is covered like this, and this files, so it gives you some some eyes into your code as to what tests you need to write and how you can make your code a little bit more robustly tested. - -52 -00:36:27,600 --> 00:37:05,940 -Wes Bos: Yeah, sure. Because if there are some lines of code in your data in your application, they obviously aren't tested. And there's a possibility that things could go south there, the thing I was talking about is that the watch feature on your tests will it works with Git. And that's really cool. Because it will by default, if you watch your files, they will only watch the files that have changed since your last get check in. And I thought that was really neat. You can obviously overwrite that with the dash dash watch all flag. But I thought that was really neat, because you can just test only the things that have changed since the last time you had committed. - -53 -00:37:06,230 --> 00:37:25,920 -Scott Tolinski: Yeah, and I really like to there, while the test runners running it can there'll be a thing, you'll just like push F to test all failed tests, right? You can only run the tests that have most recently failed, or you can, you know, run all the tests or again, run the test of code that's been changed since the last commit and stuff like that, I found some of those things to just be awesome. - -54 -00:37:27,420 --> 00:37:46,590 -Wes Bos: That's great. So another library that we have is mocha, and this is one that I used on my own codebase before I moved over, just like you it is fairly similar to to how Jess works. I don't know. Do you have any any examples of of what you didn't like about it? I guess we sort of covered that with just, - -55 -00:37:47,100 --> 00:38:29,550 -Scott Tolinski: yeah, basically, I didn't find the like, I didn't find everything to be as painless. I think there were some maybe some extras syntactical stuff here and there that I needed to do. I didn't find that the runner itself to have as many options like loading up the things like the code coverage and stuff was just so easy with just that. Like, I'm not like a Mocha Pro, though. So like mocha people, if it's, you know, in your mind as easy or something, let me know, but from what I've heard from people who have used both pretty extensively, that just has a pretty much a big up side, compared to those features, you know, - -56 -00:38:29,940 --> 00:39:19,670 -Wes Bos: yeah. Another one that's actually totally different this is this is one that I have experienced on a couple of projects, kind of the the neat part about being a sort of a contractor for all the years is I have dipped my toes into many different teams, and they all have different testing strategies. And I love that because often you get people who are so passionate about their way, but they've been working on the same team for five years. And that's the only way they've ever done it. But it's kind of neat to see a different approaches to it. So this was one it's called cucumber. And this is we'll talk about what BDD is behavior driven development. And so I'm laughing cuz Scott Scott stock, what did he say about your dog? Oh, - -57 -00:39:20,010 --> 00:39:53,760 -Scott Tolinski: he's afraid of BB DS, which is an acronym that is usually used for something else, but we use that for big black dogs. He's a little shih tzu and if he sees a big black dog, he loses his mind it's like this, these other dogs sort of like whatever but we're on a walk. We'll be taking him through the park and then Courtney and I will just be like, Oh bvd and then those. It's like you cannot control them you cannot. It is scary to over something. - -58 -00:39:55,830 --> 00:41:49,460 -Wes Bos: Anyways, is BDD is not the thing is basically blackdog. So what cucumber allows you to do is that you can write your tests in plain English. So let me give you an example of Let me pull up an example of cucumber. So the way that cucumber works is you write these dot feature files, and you say a feature is a slider, or a feature is a checkout, and you say, as a customer, I want to be able to buy something. So that I this is tip example, I really didn't like this approach. But here, let me give an example from the actual website. So the feature is Hello, cucumber. As a product manager, I want to I want our users to be created when they visit our site so that they can have a better experience. And then inside of that you have a scenario user sees the welcome message, when I go to the homepage, then I should see the welcome message. And you just write all of these bizarre feature examples. I know there's people that are absolutely nuts about using this cucumber, and they love it. But I always just found like, I was like, as a developer, I want to die when I write a cucumber. But then what happens is that it converts them to actual like, like a regex matching. And then and then you go and actually write the test behind it. So you're right, the clicks, and the and you look really say like when I click this button, expect this pop up to be visible and things like that behind it. So I always thought that was kind of neat, because you can sometimes get like project managers or things like that to actually write the the cucumber tests, and then you as a developer can go ahead and just wire them up and make sure that they all pass. Yeah, - -59 -00:41:49,880 --> 00:43:03,840 -Scott Tolinski: yeah, I actually I didn't, I didn't mind hurting cucumber tests personally. But I'm kind of like, I like that sort of like English II thing where it's very like, we the way you read, it makes a lot of sense, right. But definitely, definitely a little bit different option there that we mentioned another one already, in the end to end testing section, which is cypress@cypress.io. They were a sneak peek of mine at one point again, this, the service gives you a really nice little browser window into seeing exactly as your tests are running, you could sit there and watch them run. I found the actual assertion library and everything when you're writing your test to just be extremely seamless and easy, just just super easy. And again, that's not react specific or anything. Cypress is just for testing your code, right? Because you're basically pointing Cypress to a URL, you're saying, hey, load up this URL, and then do this stuff. Hey, click here, click here, then this should load this should load this should do this. Oh, when you click the when you click the Checkout button, if there's no products in the cart, then it should show this alert message if you click the Checkout button, and there's products in the cart, and the cart should open. I mean, it's just really really super slick in my opinion. - -60 -00:43:04,290 --> 00:43:15,210 -Wes Bos: Yeah, I I think that's pretty neat because I Kent C Dodds, you know, Kent C, Dodds has been just laying down some some testing nuggets on Twitter over the past couple - -61 -00:43:15,380 --> 00:43:19,260 -Scott Tolinski: years. So good. Yeah. So blog post his tweets, all that stuff. - -62 -00:43:19,290 --> 00:44:15,060 -Wes Bos: Yeah, he's he's just got so much good. I think he's got a bunch of video content as well. I'll make sure I link it up in the in the notes. I'll pull it up. But he said that like the closest The closer you can get to how the actual user expects to use your, your website, the better, right? So rather than, like, sometimes you you just write all these unit tests and you assume that the the data coming back from the API is correct, and or if it is correct, then then you're in good shape. But what your user actually cares about is that you can actually see the products in the cart, and that there are six products in the card and that they have an image beside them. Right. So I think that's pretty neat that Cypress is coming out with this this product and it's open source, so you don't have to pay for it. If you don't like it. I think it's pretty neat that it's making this sort of like closer to the user testing a lot easier than than it has to be. - -63 -00:44:15,480 --> 00:44:16,710 -Scott Tolinski: Yeah, wait, absolutely. I - -64 -00:44:16,770 --> 00:44:17,940 -Wes Bos: say that right. A lot. - -65 -00:44:18,000 --> 00:44:29,700 -Scott Tolinski: It's making it a lot easier. It's making it a lot easier. Yeah, absolutely. Okay, so let's get into a couple of react specific libraries. The most popular one is enzyme which was written by Airbnb, is that correct? - -66 -00:44:29,760 --> 00:44:30,840 -Wes Bos: Yes, it is. - -67 -00:44:31,020 --> 00:45:20,670 -Scott Tolinski: Okay, so enzyme is basically a way for you to work with react specifically, you pass in a react component, you can say hey, shallowly render this, which will just render that single component and not anything deeper than that, basically, essentially, for a unit test. Then you have the Mount, which is going to fall on render that component along with any sort of child components, which again, is going to illustrate any of the sort of integration issues that you're you might run into between data as getting passed down. So enzyme is a very, very, very popular library. It's primarily the library for react, testing up until this point, and then and I say up until this point, because it was only a week or so ago or a couple weeks ago, that Kent C, Dodds released his appropriately titled, React testing library. - -68 -00:45:20,910 --> 00:45:23,400 -Wes Bos: Yeah, he's totally gonna win the SEO game there. - -69 -00:45:23,760 --> 00:46:02,490 -Scott Tolinski: I know, which is hilarious because react testing library is basically I mean, we talk a lot about, you know, what he was saying before about how user is using the site, what this library does is it strictly sort of enforces best testing practices with react, because it doesn't give you the option to do everything, it basically limits you do test the way that is going to be more reliable to how your users are actually using the site. And this thing is brand new, I've only had a chance to read the docs, I haven't had a chance to use it. But it should be easy to just drop into your application and start rendering your components and testing them. From what I looked, it seemed like it was pretty sweet. - -70 -00:46:03,000 --> 00:47:55,350 -Wes Bos: Yeah, so and with both of these enzyme and react testing library, I should say that they allow you to sort of orchestrate the application yourself. So you either shallow render it or you mount it. And again, the difference between that is shallow render will only render that component. And if you have any other components inside of that, it will just like if you have a store picker component, it won't render the store picker component inside of it. And a mount will go inside every component all the way down and mount that actual component and render it out. And then inside of that you can simulate form submits clicks, typing into text boxes, all of those different things, you can check specific you can you can check that your component has like a paragraph tag in it, you can check that the attributes are properly set, you can say like click this button and then expect that the button has a red border around it. There's also a whole extension for enzyme that is for style components. So if you really want to test that like, like when I do this expect that the border is red, or the border thickness is 20. I haven't gone that far, because I don't think it's necessary for stuff I'm working on. It's it's pretty nifty that you can you can sort of orchestrate as a user would would actually use it and then check whether it's checking that the text is displayed on the page. Or you can also reach inside of props and state, which is I think a little bit frowned upon in the React testing space. Because again, you want to you want to make sure that there's a paragraph on the page. And that that paragraph on the page says what you're expecting it not that props and state match what you're expecting, because again, you want to look at it as a user, not the actual, you're not not a robot, right? Yeah, - -71 -00:47:55,379 --> 00:48:28,980 -Scott Tolinski: yeah. Again, it's it all comes back to that you want to be testing the closest to how your users are actually using good seeing your site, rather than how a robot uses and sees your site. Right. So yeah, all of these things, again, are just going to like really, I don't know, educate you on how your site is, is handling things, right? It's going to keep you up to date and having just a full understanding of of where your site is at all times. So well. Another way that you can boost your education is by attending the fluent conference. - -72 -00:48:30,120 --> 00:48:32,280 -Wes Bos: Beautiful segue, Scott, that's - -73 -00:48:32,280 --> 00:48:38,220 -Scott Tolinski: great. Trying to use the speaking of speaking of speaking of - -74 -00:48:38,580 --> 00:50:15,210 -Wes Bos: testing, you're getting really good at this. So O'Reilly, who comes out with all those books that probably have taught you various web development they are running their fluent conference for, I don't know, I think they've been doing it since like 2011, I spoke at the very first fluent. And it's fantastic. It's a massive, massive conference, which with edge, tons of speakers and tons of really good training inside of it. So if you are looking for a conference that is sort of going to get you up to speed with what's going on in our industry, some of the best practices, you get to see I always love going to conferences, because in 45 minutes, or however long a talk is you can see. Or you can hear from an industry expert that is in that specific space. So maybe there's gonna be somebody on testing there, maybe there's gonna be somebody that's talking about react may be someone that's talking about new JavaScript API's that are coming to the browser, you can just sort of take their their sick last six months of work, and just brain dump it right directly into you, which is really, really exciting. So I definitely suggest that you should check out the fluent conference. If you are any sort of web developer, software engineer, your designer working on web performance, any of that good stuff in web development, check it out. So it's fluid conference on June 11 to June 14. The training is the first couple days in the conferences the last two days, I believe it's in San Jose, California, you can get 20% off with the coupon code syntax. So nice, so much to fluent for sponsoring. Awesome. Okay. So - -75 -00:50:15,210 --> 00:50:31,680 -Scott Tolinski: lastly, before we wrap this thing up, we're going to just talk about some general concepts here. If we haven't gone over yet, so the first of which is mocking mocking is a word that you probably see. I don't know, only in testing, I do see mocking elsewhere other than in testing? - -76 -00:50:32,400 --> 00:50:36,090 -Wes Bos: I don't think so. I yeah, I don't, I've never seen it anywhere else. No. - -77 -00:50:36,450 --> 00:51:20,700 -Scott Tolinski: So mocking is is sort of, you got to take the word as what it sounds like. But you're basically using fake information, whether it's a fake function or a fake data to plug it into your code, right. For instance, you have a API, that API returns some data, and that data goes into your component, that component renders out, what you want to be doing is not necessarily always testing that API. Because if you know that information is coming back a certain way, you can make mock versions of that data, so that you have data to put into a function without hitting that API, you put that data into your react component, check to make sure everything renders out fine. Or maybe you are mocking out functions where you don't actually want the function to run as it needs to run in the real world. - -78 -00:51:20,850 --> 00:51:57,690 -Wes Bos: So yeah, I guess like a quick example of mocking is, if you have a function, and let's say you, you have a function called get cupcakes, and and that will hit an API and come back to you with Alyssa cupcakes, you don't necessarily want to actually have your, your API requests and be hitting the network for all of those because it's slow. And that makes your test brittle. And what you can do in that case is somebody else's testing that API to make it work. And that that may, that may also be you. But you could just immediately return a list of cupcakes that you have stored in like an object or JSON, file it just load that in and return it immediately. Is that is that right? - -79 -00:51:58,020 --> 00:52:02,700 -Scott Tolinski: Yeah, yeah, that's That's my understanding as well, correct us if we are wrong, - -80 -00:52:03,000 --> 00:53:38,550 -Wes Bos: beautiful, there's a whole bunch of like terminology in here. And even though I use it, I don't necessarily know the the words just perfectly Yeah, it is. Next one is a spy function. And what this is, is sometimes again, just like the the network requests, sometimes you actually don't want to fire the real function, you just want to make sure that that function was fired. So for example, on a react component, maybe have a Checkout button. And when somebody clicks that button, it'll it will trigger a whole bunch of functionality that is outside of that component, all you want to do is make sure that when someone clicks the Buy Now button, you want to make sure or you want to expect that the function was called, you want to expect that the maybe you want to expect that the function got called twice, maybe you want to expect that the function was called in passed in a certain parameters, maybe you want to expect that the function errored out. And so spy function is basically just like swap out an actual function with the sort of fake one. And then that spy function will record all of the things that happen to it, how many times it was called what it was called with, and all the other data inside of it. So often, what I'll do with a react component is since your your functions get passed in as props, you can just pass in spy functions to all of your like, all of the functions that you have. And then you can run the component, you can click a couple buttons, and then you can expect that those functions were then called. - -81 -00:53:39,210 --> 00:53:54,420 -Scott Tolinski: Nice. Cool. So lastly is snapshot testing. And snapshots are basically Well, they take a snapshot of your code, and then you compare the snapshot with how the code is now and make sure that everything looks and functions the same. pretty much it. - -82 -00:53:55,320 --> 00:56:19,740 -Wes Bos: Yeah, I'm not I I am a big fan of this snapshot testing. because let me tell you why I'm with enzyme. What happens is that you you render your react component, and then you will maybe render a div. And inside of that div, you have like a paragraph tag, and that paragraph tag says, your cart total is $44. And what you would do with enzyme is you would first you would find the paragraph tag, and then you would expect the text of that paragraph tag to be your cart total is $44. Right. And usually, the way that you write that whole test is that you you render the component at once you go ahead and copy the text that was in that paragraph tag, and then you you paste it into your expect. And then if somebody changes the text or that paragraph doesn't get rendered properly, for some reason, then that test will fail. And you have to go back into the test to update what that paragraph tag. And same with attributes right you can, you might write six or seven expects in a test to say expect that this attribute is set this class is set to act Have expect that this form is disabled. And with snapshot testing, what it will do is, it will basically just take a dump of your HTML and this is by default, in, put it into a snapshot file, and then every time it runs, it will make sure that what got rendered is exactly what is inside of the snapshot test file. And then if anything changes, let's say, you you had the word your total is, and then you changed it to just total colon, then that snapshot would fail. And all you have to do to update it is just push the U button. And then it will go ahead and update your actual snapshot. Now, there's a bit of a downside there, because you can very easily just hit the U button and say, Oh, yeah, just update all my tests. And you might not catch it. But why I really like this is because if you were to check in some edits to a react component, you would both see what happened to the React component. But you also get this really great visual change of what the output with the changed output is actually going to look like. Because you would check in your snapshots to GitHub, and it would show you that your total is got changed to total, at the end of the day. Hmm, - -83 -00:56:20,160 --> 00:56:31,350 -Scott Tolinski: yeah, see, I haven't been using snapshot testing, because I've primarily had all of my tests already written in mocha. So like, so I had to dive in and really start snapshotting it up to to get that that benefit there. Okay, so - -84 -00:56:31,350 --> 00:57:20,700 -Wes Bos: it were, I got one more thing. Yeah, I found that it replaced a lot of finicky finding of elements and checking the content if I had like a lot of them. Whereas I can just dump the whole thing into a component. All right, going into a snapshot and then check if it's there. And you just know that if the entire thing matches what it used to be, then then it works, right. It's pretty cool. There's also custom serializers, as well mean that you could snapshot test anything, it doesn't just have to be a react component, it could be if you really wanted to, you could just like dump an entire JavaScript object. And then you could just expect that the, the JavaScript object looks exactly the same. So there's all kinds of different custom serializers out there, there's, there's one for specifically for enzyme objects, which I use. - -85 -00:57:21,120 --> 00:58:27,810 -Scott Tolinski: Nice. Cool. So we talked a little bit about the concepts, the stuff, let's talk about TDD, or the strategy here for test driven development. Now, TDD is something that I first learned about when I first started doing Ruby on Rails stuff, because I think more so than any other community, the Ruby on Rails community really embraced TDD as part of their education process. So TDD test driven development is basically this you are, you first write your test, then you write your tests, so that it fails, right, you write your test, your your test obviously fails, because the code doesn't exist, then you write your code, then the test passes, because your, your, your code. Now matches are now completes correctly. So the idea is, is really that the test driven development is instead of writing your components, and then testing them, you're writing your tests, and then writing your components. Second, so that your tests again, exist first. And then your code exists second, so that you write your code to pass the tests rather than your test to pass with the code. - -86 -00:58:29,760 --> 00:58:33,300 -Wes Bos: Yeah, so pretty popular. Do you? Do you use this at all yourself? - -87 -00:58:33,749 --> 00:59:09,090 -Scott Tolinski: Sometimes? It depends on how much time I feel like I have, or I really add, because it does take a little bit more time. But again, it gives you more confidence. Overall, I do it. Sometimes I'd like to do it. But I don't always when I dive into the features, I'm definitely like, if I'm diving into something, I'm definitely a little bit about results driven. Like, I want to see something really quick for my own motivation sake rather than for anything else. But when I am feeling motivated already, and I don't need motivation, then yeah, I like test driven design or development. - -88 -00:59:09,479 --> 00:59:21,330 -Wes Bos: Yeah, totally. I myself, don't use it. But I definitely see the benefit of doing something like this. And I know, again, people who are into TDD are absolutely crazy about it, and love it. - -89 -00:59:22,350 --> 00:59:23,430 -Scott Tolinski: Yeah, nice. - -90 -00:59:24,150 --> 00:59:42,980 -Wes Bos: And then the other one that we have is a BDD, which is big blackdog is behavior driven development. We talked about that. That's what's cucumber. So rather than I guess, I'm not really an expert in this, but rather than then doing it all based on me, how do I describe this? - -91 -00:59:43,320 --> 00:59:57,930 -Scott Tolinski: Instead of how you're, instead of thinking about your code in like code land, right, like, you know, robots using your code or functions passing in this. It's more about again, it's more about how the behaviors of your users are are driving the the tests. - -92 -00:59:58,320 --> 01:00:13,770 -Wes Bos: Yeah. So I think there's like a As a user, I am approaching the website are given that I'm on this page, when I click this button, then expect the pop up to be open, just like we talked about with that cucumber. So that's kind of a neat way to approach it as well. - -93 -01:00:14,460 --> 01:01:12,750 -Scott Tolinski: Nice, cool. Okay, last on our list is continuous integration, which is something that is been really cool lately. But basically, continuous integration is an automated build and testing process when you're committing to version control. So basically, you commit your code up to GitHub, GitHub, then triggers a build of your code that runs does all your tests, and then maybe either push it like, let's say, you push to production, production that goes ahead and runs all your tests, make sure everything passes before actually pushing to production. That way, there's no case scenario where a user on your team has made some changes to the code didn't run their test didn't confirm that it was working and had this thing, God, this is extremely important in applications, again, in both applications, libraries and stuff that rely on a lot of people using them. Because again, you don't want some sort of errant push to go ahead and break the experience for a lot of people. So continuous integration is something that is really super cool. The main sort of library for that is Travis CI. - -94 -01:01:14,250 --> 01:01:56,310 -Wes Bos: Yeah, that's the one that we had used. And you can set up Travis to do anything you want, right? It can, it can take snapshots, it can run visual regression testing for you, it can run all of your tests. And often those are integrated directly into GitHub, because then it will run all of your tests as soon as you submit a pull request. And if the reviewer sees that all the tests are still passing, you didn't break anything else, all of your new tests are passing, then they can go ahead and just merge that thing. And it'll it'll go ahead and push it to production. So I even heard of people, they have a big, like a big red light in in the office. So if you submit a pull request with a failing test, it'll go off, - -95 -01:01:56,370 --> 01:01:59,430 -Scott Tolinski: which is funny. I like that. I like stuff like that. That's - -96 -01:02:01,560 --> 01:02:14,340 -Wes Bos: beautiful. So let's wrap it up. Just talk a little bit about our own our own testing strategy. So do you want to take a quick dive into that? I guess we've sort of talked about it throughout the episode. But yeah, somewhat up in 10 seconds or so. - -97 -01:02:14,700 --> 01:03:16,650 -Scott Tolinski: Yeah, I use Cypress for end to end testing, just test generally usability or user clicking around things. test to make sure my stuff that the users are doing works, I use jest to do my test runner, my code coverage. And as my assertion library as well, I don't do a lot of or any snapshot testing, really, but I probably will at some point here. So I'm pretty much testing all of my components with enzyme. And I'm using mounting instead of shallow rendering. So all of my components are mounting. So I pretty much use full mounting, I use enzyme. I don't have any continuous integration set up. I don't do a lot of stress or performance, or usability or beta testing. I don't do any visual regression testing, although I probably could do some of that stuff. So yeah, that's pretty much it. I do a lot of unit integration and end to end tests using jest and Cypress. - -98 -01:03:17,280 --> 01:03:25,890 -Wes Bos: Beautiful I am. It's funny. Anytime we describe our own thing, it's almost always saying, but I am just - -99 -01:03:26,070 --> 01:04:39,210 -Scott Tolinski: yet sorry. Sorry, sorry. Yeah, at some point, I forgot to mention this, I have this like really slick mocking setup for graph QL. And Apollo, which I got to talk about this because this is really cool. Basically, it's a, you know, some of the times mocking your your data can be so hard. But since I have a full stack app, I have access to my schemas, as well as the whole basically my entire graph qL Apollo setup. So because of that, I have a single function called mock man Mach Mang, that I just pass in a a query. So I use the same query that I'm using on the actual front end of my site, I import that into my test. And then I pass it through my mock Mang function. And that's about as much data as I want all mocked out with fake data. It's never actually hitting the API. It's instant. It's so fast. It's so cool. Basically, just say, Hey, give me give me the the actual query that this thing is using, give me the data, the actual data, this thing is using a pass it in. And just like that, I have all my data mocked out. It's super cool off to publish a blog post diamond or something like that. It's not anything crazy. It's using some built in methods and stuff that Apollo gives you just wanted to touch on that really, really quickly. - -100 -01:04:39,810 --> 01:05:46,980 -Wes Bos: Yeah, that's pretty pretty nifty. I need to check out that because I was I was talking to you about testing. I'm sort of in open mind mode right now with like, writing writing tests for my next react course. And just in general, I think there's a lot changing right now and I'm sort of just like, not throwing everything out the window. Because I was doing all kinds of reading and everyone says, everyone's like just shallow mountain and, and don't. And then and then there's other people on the other side, which is Oh, Mount everything and don't shallow render anything, right. So I'm a bit I'm sort of testing out both of them, I haven't made any decision, this is the decisions decision made any hard decisions on either way, I'm using just an enzyme, I'm using a enzyme to JSON, which will allow me to do snapshot testing with enzyme. And then I'm not doing any sort of continuous integration, stuff like that on the on my current stuff, just because it's not as big I have in a lot of previous other projects that they worked on. - -101 -01:05:47,640 --> 01:06:32,580 -Scott Tolinski: Yeah, I'm gonna look up to I'm going to be looking to set up some sort of continuous integration of my setup fairly soon here when I get a minute. Okay, and since we are running a little short on time here, and I don't think either of us have anything, I think we're going to skip our stick pics today. and jump right into the shameless plugs. I released a new series Vue JS for everyone, check it out. If you're interested in learning view, j s. It's a beginners course. But we go over all sorts of stuff from routing to API's best practices, and everything with the brand new view CL is version three, everything is fancy, fancy, fancy and new. So check it out, view j s, for everyone for sale right now level up tutorials comm forward slash store or become a pro subscribe to get access to all that stuff to - -102 -01:06:33,810 --> 01:07:26,610 -Wes Bos: beautiful, I'm going to plug my YouTube channel. I've I've been starting to throw up these I've been starting to throw up these sort of just short informal videos. Because my courses are such a big produced thing. It's nice to have an outlet just between Twitter Hot Tips and a big produce course. It's nice to have like the sort of in between videos where it's just me kind of riffing on an idea. So I did one on object nested object destructuring I did another one on react context API. And it's just between five and 10 minutes explaining how something works and they seem to be doing doing really, really well in terms of views. And I'm trying to get to that hundred thousand subscribers so I can be like Scott and get the what is a silver playback button. Yeah, I - -103 -01:07:26,610 --> 01:07:31,320 -Scott Tolinski: have the silver I wish I could get the the better ones. But the silver - -104 -01:07:31,320 --> 01:07:32,490 -Unknown: one is pretty nice. It's - -105 -01:07:32,490 --> 01:07:36,120 -Scott Tolinski: pretty actually it's way heavier and cooler than you'd expect. But uh, - -106 -01:07:36,180 --> 01:07:38,490 -Unknown: cool. Yeah, I've had so right now, - -107 -01:07:38,490 --> 01:07:47,610 -Wes Bos: I want everybody to go to youtube.com forward slash West boss. And hit that subscribe button. smash that subscribe button. Just just - -108 -01:07:47,640 --> 01:07:49,950 -Unknown: punch your fist, right? Yeah, join the bell club. - -109 -01:07:50,970 --> 01:08:20,790 -Wes Bos: Like, subscribe. Ring the bell. What else do you have to do? You know, ring the bell is get post notifications, or when someone posts on to YouTube. Oh, yeah, ring ago. You got to ring the bell and do all that you got to do and get me to that. I'm so far away about 44,000. But I've been 5000 in the last month. So nice. I'll be there in a couple of years. Yeah, - -110 -01:08:20,790 --> 01:08:22,310 -Unknown: get it. Get it, get it right on. - -111 -01:08:22,520 --> 01:08:39,020 -Wes Bos: Cool. That's it for today. Thanks for tuning in. And if you have any of your own testing thoughts, please tweet them at syntax FM and I'll be sure to retweet them from the account. always interested in hearing what other people have to say as well. Or pace is - -112 -01:08:39,470 --> 01:08:49,770 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax41.srt b/transcripts/Syntax41.srt deleted file mode 100644 index dad420562..000000000 --- a/transcripts/Syntax41.srt +++ /dev/null @@ -1,352 +0,0 @@ -1 -00:00:01,290 --> 00:01:04,950 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and Wes Bos. Welcome to syntax. In this episode, we're going to be talking about something that is always an important topic. Something that we cannot talk about enough is burnout. It's something that is extremely prevalent in our industry right now. And in as just everything grows and progresses, it's really easy to get burnt out. With me, as always, is West boss. Hello, everybody. Hopefully, you're doing well. excited to talk about this topic. I think it's a, I don't know, I think there's a lot of a lot of people that are suffering from burnout on the verge of burnout kind of feel like this, this nagging feeling every now and then. So I'm, I've definitely felt that myself quite a bit. So I think it's something that's neat to talk about, and talk about how you can stop it from happening and, and just have a bit of more of a balance work life. - -2 -00:01:06,030 --> 00:01:41,520 -As as you learn, right? Yeah, absolutely. And especially those of us who are either work in law, I guess anybody is susceptible to burnout. But those of you who are, you know, you're in the hustle lifestyle of the startup world or something like that. It's so incredibly prevalent. This episode is sponsored by Freshbooks, which is cloud accounting software, and fluent, which is an awesome conference in San Jose. Beautiful, so well, how we're gonna tackle this is, we're gonna talk about like, what it is real quick, if you're not totally sure, what causes it, and then we're going to dive into - -3 -00:01:42,840 --> 00:02:36,240 -how you can sort of get around it, how you can avoid it, how you can fix it, if you're sort of leaning that way and, and hopefully give you a couple tips to, to stay away from it. Because like, I honestly think like that my competitive advantage in this industry is having mostly figured out I don't know, I don't I wouldn't say totally figured out but I would say mostly figured out how to have a bit of balance in my career. And I think that is a massive competitive advantage. When you're, you're in any business, and especially web development, being able to be both good at what you do, but also not hit that wall. Because often I see people who are just like, just given her and there's definitely times in your career where you're super into that. But you can definitely see it from a mile away where that's gonna crash and burn in six months from now, because there's no way that sort of - -4 -00:02:37,500 --> 00:03:39,990 -involvement that sort of hustle is is sustainable at all. Let's kick it off and talk about what is burn out just for those who might not know or I don't know, it's kind of a weird feeling. So do you want to take a tackle at describing what that feels like? Yeah, it's well, burnout is a, I guess it could be like, categorized as a sort of overwork to the point of pure exhaustion. And it could even be like depressive like symptoms where you don't want to work. You don't want to, to spend any time learning, you don't want to even look at code, right? You just, you sort of just want to check in at work or check out or whatever, show up, get paid And leave and you're no longer passionate about what you're doing. You're no longer excited by the challenge of code or anything like that. You're You're lashing out at people who are also actually keeping up with the the modern, sort of new things. And if somebody mentions a new JavaScript framework, you're gonna say that thing is stupid, because I don't have time. I don't have a energy. Yeah, think about it. - -5 -00:03:41,100 --> 00:03:43,380 -Yeah, I think it's just it's best summarized as like, - -6 -00:03:44,490 --> 00:04:37,380 -just like that gut feeling where you just lose all enthusiasm for, for what you're working on. And I want to be careful around that. Because I think burnout is a bit different from just not liking what you're doing. I think that burnout is really easy to say, I'm getting burned out. It's like, No, you just hate what you're doing. And we've all had, I have at least one day a week where I just have to work on stuff that I don't feel like working on. And it's just not fun. And I don't want to do it. But you got to sort of slog through that. That terrible work to get to the fun stuff. It's not all going to be fun. And I think one of a trait of being good developer is being able to work through that work that you don't like but burnout is just like day in day out you start to lose your enthusiasm you start to hate what you're working on. You start to detest what it is that you're doing working for the weekends kind of a TJ Yeah, right like that kind of mentality. - -7 -00:04:38,400 --> 00:04:59,970 -over weeks and months can can start to lean learn to sorry lean to it to what I call burnout. Yeah, and I you know, a lot of our sort of modern the way we're, we're telling each other to work this hustle harder sort of thing. It's like permeated on perpetuated, not permitted on all these different social media platforms for you have to work harder, work harder. - -8 -00:05:00,000 --> 00:06:19,860 -Work harder, you know, keep going. And that that does nothing but breed this feeling of you can't keep up. Or you're maybe not as adequate as these other people because you can't keep up, right? Or it's just that you are trying to keep up so hard and realizing it's slipping and slipping and slipping and slipping. And eventually, it's just overloaded to the point where you can't feel like you can do anything. Yeah, I'm all about the hustle. And I'm all about the the hard work and just putting in the time and yeah, and really given her but part of being good at that part of being a very efficient productive developer is knowing how to have balance in your life and knowing how to take a break. So that when you come back to it, like we talked about this, on one of the fitness episodes, or I think as a productivity episode, where it taking time out of your day to actually go to the gym, will make you a more productive developer. So by working less, you will get more done at the end of the day, I think that also lends itself to just being a productive developer. Yeah. And avoiding burnout in this case. Yeah, absolutely. And we're gonna be talking about some of these things about how to prevent it and stuff later on in the episode, but there are there are just so many things that you need to structure into your life to make sure, so Okay, so we got that you're overworked, overloaded, overstressed. - -9 -00:06:21,030 --> 00:09:38,130 -So why? Why is being burnt out bad? I mean, this is kind of an obvious thing, right? Why is it bad to be burnt out, even the word sounds bad. Typically, you're things that are burnt out, or like an engine that's overloaded, or something like that, right? That it's no longer able to function correctly. So that's really just it is that it's bad, because you're no longer able to function correctly, you've lost your passion, everything becomes monotonous, a lot of it is just really that, like, all your learning is going to really be halted or slowed down, and you won't be developing as much as a professional as a human being, or anything in life. Because why would you want to learn something if you're so overwhelmed or overloaded by it? Yeah, it's, it's kind of scary, because especially I think that there's, there's a lot of people that are sort of sort of feel like they're keeping their head above water in our industry, because it moves so fast. And it's kind of scary to be in a spot where you don't want to keep learning and you don't want to, you don't like what you're doing, but you feel like you have to keep it up and to keep building stuff. Because otherwise you're gonna fall behind, you're gonna be without a job, and you likely have like a mortgage or a family or you have, like you need that job to, to keep going. Right, yeah. And then a more serious level, it could lead to abuse of drugs, or alcohol or anything like that, just because of these depressive symptoms, where you're not wanting to do anything, right, you're not wanting to work, you're wanting just come home and unwind or something like that. Because you have a hard time leaving your work or something like that, maybe you're drinking a little bit more. There's a lot of heavy stuff involved around there. And it all, you know, it doesn't have to be that serious. But like, I mean, it certainly could lead to that sort of situation. Yeah. And, you know, I mean, you talked about your work life balance is one of your greatest skills. And one of my not greatest skills is the fact that I haven't totally gotten this figured out yet. You know, I I'm definitely getting there. And then this year has been one of my main goals is to take more time, and I've always had my, my hobbies that help out with and stuff like that. But, you know, it's, it's a problem, when some of your hobbies are starting to the things that you do every single week, these things that you do to unwind, you're starting to put them off to go work more. And that that is a little bit of a warning sign. So I personally have not mastered this, and I'm definitely getting better at it. But I had, you know, numerous situations last year, where I was just putting in putting in the days, you know, 12 hours, yeah, just constantly 24 seven, working both weekends to try to get this stuff done. And it was it was getting really bad. I was not, like I said, I wasn't going to breaking practice, I was making reasons to, to avoid taking the breaks, or maybe playing a video game or going on a date night or something like that. I was I was making these excuses, because I had so much to do, and there was just so much on my plate. And I thought I never possibly get all of this stuff done. Without absolutely grinding for it. In turn. I did not want to get out of bed. I did not want in the same turn. I didn't want to go to sleep either. So you you'd wake up and you'd be like, yeah, I'm not. I'm not feeling like I want to do anything today because there's just too much to do. - -10 -00:09:39,300 --> 00:09:48,150 -And that sort of really just it got really tough, right? And it didn't get any better until I prioritize these things. I I - -11 -00:09:49,170 --> 00:10:00,000 -you know, my wife, Courtney, you know, she sat down and we had a chat about here's what needs to be instituted in your life to make this better and a lot of it was having designated - -12 -00:10:00,000 --> 00:12:19,710 -nights to unwind, chill out, go to practice more, make things like going to work out a priority, all sorts of stuff like that. And we're going to talk a little bit about how to prevent burnout a little bit more later on coming up here in the episode. But really, it was it was a problem, and definitely something that I'm hoping to improve this year. And I'm already seeing quite a bit of progress. That's awesome. I see that in myself as well, where if you are having problem with some code, or I'm coming up to a big course launch, or I'm just frustrated, in general, I'm not getting moving as fast as I thought I could be with something. My immediate reaction is just to throw sheer time at the problem. Yeah, which I always look back in hindsight saying, like, that was a stupid idea to, to do something like that. And it's something that I'm slowly, slowly doing, because I think that every time that that does happen, I throw your time at it, it's just not the code quality suffers. Every everything suffers at the end of the day, and and you just start to feel like garbage, because you are just so I think like both like physically taxed, but also just mentally taxing as well. And, and I also want to say like, this is not to say like people who are, are putting in those long days, that's not necessarily mean that you're going to find yourself in burnout. Like I definitely when I was first learning to code, I was just loving it and just absolutely wanted to spend every single hour with the thing. But after I had done it for a couple years, and I realized that those those longer days were not as fulfilling, but they just left me feeling like garbage. Yeah, yeah, like, like garbage. I mean, it's it's exactly it. And I don't know, it's one of those things that you if you haven't experienced it before, you almost don't know that it's coming on until it's on. And you're just so used to working, working, working, and all of a sudden, you're just like, Ah, oh, like there's just like, great feeling of despair or whatever, that you just cannot do any more work. But by then it's already too late, right? So, because of that, I guess we want to dive into a little bit of how to prevent it. Because at this point, right, we have, - -13 -00:12:20,730 --> 00:12:21,840 -we've established - -14 -00:12:23,010 --> 00:12:42,150 -you know, what it is how this sort of onset feels. And we also sort of talked about how it, it's too late, right? Once you're feeling burnt out, you are burnt out. And it's much tougher to become unburned out after you're already burnt out. So how can we start to prevent this kind of thing from even happening in the first place. - -15 -00:12:43,230 --> 00:13:28,200 -And it's easy to get overwhelmed with all this stuff when you have so much to do. So I guess there's a little bit of heavy transition. But I mean, one of the ways that you can prevent being overwhelmed is by, you know, farming out some of the things that you know, you have to do, or not unnecessarily farming them out, but making them easier. One of our longtime sponsors fresh books, again, is something that in my opinion, makes accounting easier. And accounting is one of those things that I look at all the time, and I'm just like, Oh, I don't want to do my accounting, that's extra stuff I got to do. It's just more and more and more things on my plate, right. So I'm really thankful for products like Freshbooks for making that part of my life quite a bit easier. - -16 -00:13:29,670 --> 00:15:00,000 -Absolutely. So for my Freshbooks ad read today, I wanted to talk about one of the the products that Freshbooks has in it's, it's just a free book called breaking the time barrier. And kind of it's it's pretty cool because like Freshbooks, put out this free book. And it's not about how to best do your accounting or, or something like that. But it's they honestly want their customers to make more money at the end of the day. And that's why they have all these automated payment reminders. They make billing really easy. But another way to make more money is just to charge more. So Freshbooks put out this free book, which was written by their CEO, Mike McDermott, and it's called breaking the time barrier, how to unlock your true earning potential. So we talked a lot about in the freelance episodes, how to do value based billing and how to really get paid what you're worth and how to stop chasing that time talk about like putting hours in and getting burnt out. The best way to kill your passion for a coding is to maybe start a business in it, and just to throw your time at it because it's one thing to be worried about keeping up with code. But it's another thing to actually have to get stuff done for your clients when you're you're sick of it. So being able to Bill what you're worth and be able to take that time off is super important. So I want you to check out this free buckets online from Freshbooks. They also I also have a print copy. I think I picked it up at a meetup at some point. But just give a Google search to breaking the time barrier and also sign up for your - -17 -00:15:00,000 --> 00:17:22,290 -30 day free trial of fresh books@freshbooks.com Ford slash syntax and you syntax into the How did you hear about a section? Nice? Sick? Okay, so good. Yeah. So again on the line to that is is making your life easier for yourself is definitely one of the things that you want to do to prevent, to prevent verb burnout, right? Like, what kind of things can you automate? Can you remove from your life that you have to do every day that you don't need to do every day? Or like, potentially you're, you're, you're not like doing your things efficiently, right? I guess those are two separate topics. But really, if if part of the reason why you're burned out is that there's too much on your plate, it's, it's finding these patterns of things that you can remove from your plate in a consistent manner. Rather than just you know, getting rid of this play getting a you know, the next one the stack until they're all done, maybe like grouping and organizing and automating to help sort of relieve some of that pressure. Yeah, I find that a totally sometimes you hear people complaining about all the work that they have to do, when if you were just to spend some time, investing in your tools, investing in your process. And you can really automate that I take all the time I there's a lot of work that hate doing. And we talk about doing like shit work, where I cannot force myself to do work that I do not like doing. And like one example was people would always ask for amendments to the receipts. And like, that's like the last thing I want to be spending my time on, which is adding your VAT number to a receipt of something, right. So I implemented a voice system where the user could easily just amend the receipt and add in that information so that their, their billing information was cracked, right? Or we talked a lot about email, go back to the email episode. And I hate doing email. So I have a system for it, right. So if you are feeling like you're exhausted by a lot of this busy work, and you you just have too much to do, as well as sometimes there's just so much going on in your head where you're trying to keep all these balls in the air. If you can set aside some time to build both build tools for that, whether it's building a workflow, whether that's building actual, like coding things that will automate tasks for you, rather than having to manually do it. - -18 -00:17:23,730 --> 00:17:32,160 -Like that. Or it just spending time on like getting your email workflow down, Pat, that's going to really help you out in terms of taking that stuff off your plate, like, - -19 -00:17:33,180 --> 00:17:40,440 -even like if you were to look at my calendar for this week, let me go open it up right now. My calendar this week has - -20 -00:17:42,840 --> 00:17:44,880 -one thing on it. And - -21 -00:17:46,080 --> 00:18:00,240 -that's that's it, I just have a physio appointment on Wednesday. That's it right. And I have absolutely nothing else. Why? Because like, I very aggressively turned down meetings, I don't go for coffee, I don't - -22 -00:18:01,260 --> 00:19:59,250 -have calls all that often. Obviously, that's it's not completely avoidable. There's all these things, my entire week is pretty much just wide open. And that's intentionally done. Because if I want to work on something, I usually have the entire day just to spend my time working on that. And I'm not trying to, to juggle meetings and phone calls and all these kind of like little tasks that I have to do, I usually take a day out of my week to do all the little tasks that things that have to get done, here and there. But having a nice clear schedule is extremely important to to avoiding this stuff, I think, yeah, but that also is a product of you doing your own thing. Because so many people, like they don't get to pick their own calendar, right? I mean, they get no meeting invite, and they have to click accept, or else their boss is going to be like, why aren't you coming to this meeting? I mean, I just, I remember back to my days at agencies or, or anything, just like all of the pointless meetings and all this stuff. Yeah, and, you know, some of the times we're most productive was when your boss was on a vacation, and you were just working really hard all day instead of having to take this time out. So I mean, it's it's not like the easiest thing to do. But you know, if you're in that situation, I mean, you could address why these meetings are killing your productivity in various ways or adding overload or stuff like that. And they may tell you to just you know, screw off or whatever you might not be like they totally receptive to that but it doesn't hurt to to have that dialogue. I've done it with with clients in the past where there was too many meetings and I said like, look like you're billing me by the hour. It'd be fine to sit my ass at a meeting 11 times a week, but I just can't get anything done with this amount of and there's this kind of like thing I've been been looking into lately which is like locus of control. This is going a bit off tangent but locus of control is - -23 -00:20:00,210 --> 00:21:11,160 -degree, I've got it on Wikipedia here the degree to which people believe they have control over the outcome in their lives. And you often do hear people complaining about, Oh, that must be nice for you to be able to have a completely open week. But the reality is, is that I saw myself getting just engulfed in meetings and calls and all this like little busy work. And I set out like maybe three years ago to say, like, I don't want any of that. And after three years, I'm almost completely wide open to working towards that. Yeah. And you have control of that. And we'll be talking a little bit more about like, work life and an actual job situation burnout, sort of advice there. And I mean, you mentioned like emails and stuff like that. setting, you know, time at the beginning, and the ending of your day to check email is a common tip amongst productive people. Yeah, and I definitely, like not having to check your email 24. Seven does a and st link, reduce my anxiety absolutely does or, or turning off notifications on my phone was like, one of the big things for me, I just turned off all notifications for anything, unless obviously, someone's calling me and it's an emergency, but - -24 -00:21:12,300 --> 00:23:36,600 -I don't, I don't pick up my phone to just check every single time I get an email now, because I'm not getting the little flashing light or any sort of indication that I need to go pick that up and, and do that thing. So so that's definitely a big thing as to to get those automations in place. And, and I should say, like, it's hard to see the forest from the trees when you're in it, right? When you are really just feeling this this heavy workload, you want to keep scrubbing plates, right, you want to scrub plate, throw, scrub, pray, you know, like a cartoon or something. But like, it's really more advantageous for you to take a step back to look at the overall big picture, make an organizational plan, plan it out, and then go forward with it rather than to just keep scrambling, because that scrambling is only going to lead to worse performance, you're going to miss things. Again, things like testing, you're not going to want to do because you got to keep going, you got to keep adding features or whatever, who cares for tests, and then turn, your code is going to suffer because you're going to have bugs, those bugs are going to come back to bite you. And it could have been prevented if you had some sort of a bigger plan. Another, you know, thing we talk a lot about on the show is is using your hobbies and work life balance in the terms of being active getting outside going for walks going to the gym, I go to dance practice twice a week. And let me tell you, there are some days where that dance practice on Tuesday night is you know, it's from eight to 10pm, we put the little guy down and I drive out to the north side of Denver to go dance practice, it is not easy to to get myself in that car and go especially in the winter, right. And then you're there, you're tired, you've already had a hard day, and I get there. And honestly, I've never been upset when I've left every single time that I leave. I'm just like, that was worth it. I feel so much looser, I feel so much less burdened, I took that two hours to stop thinking about everything that is plaguing me. And I've used that creative energy output in a way that is expelling a lot of energy, a lot of that stress, right? So this kind of stuff is very, very important to take time to burn some of that energy or that excess stress off of you via working out walking going to the park or something like that. - -25 -00:23:37,920 --> 00:24:07,590 -Yeah, I can't tell you how many how many times I do not want to go to the gym. And then I come back from the gym being like, Oh, that was amazing. How do I keep forgetting how this feels when you are finished the gym, right? Yeah, oh, it's always all the time. Like I don't want to go and then you start working out and you're like, Oh, this is great. And then you come back and you're on top of the world. why don't why doesn't everybody do this? Yes is amazing. So that that paying attention to your health both like what you're eating, what you're eating what you're - -26 -00:24:08,790 --> 00:24:40,950 -what you're doing in terms of exercise is so important to to avoiding burnout. And I'd say that's probably one of the top ways to avoid it. Because it's both going to take you away from your work as well as all of the good things that exercise does to your mind and your body. Yeah, I actually a personal story. I woke up this morning, I was dropping my son off at daycare and as I was getting carsick, you know what, I don't know if I really want to go to the gym today. I have a lot to do. And then I was just like, you dummy. What are you thinking? Like? - -27 -00:24:42,480 --> 00:24:59,970 -So so mad at myself for just being like, yeah, I mean, I didn't it didn't hit me until we started. Just talking about it just now that here I was trying to rationalize avoiding the things that I need to do to prevent burnout here and I'm just telling you, it's like a problem for me and I'm trying to - -28 -00:25:00,000 --> 00:25:13,110 -Still trying to avoid the things that I know are going to help me here. So that's how hard it is if you're this type of person who just likes to work, work work, it's tough. It's tough to shut it off. - -29 -00:25:14,370 --> 00:27:23,850 -Totally. I think another one is, let's let's talk about sleep. And then we'll get into the the more of the the motivation, the more mental ones, I guess, sleep very important. Obviously, I do not get enough sleep because I have kids, I'm coming off like a two hour sleep right now. Yeah, from my kids being up all night, and I feel like garbage. And I think it's really easy to get poor sleep. And it's really easy to stay up a couple hours later than you actually are. And then when I do get a good sleep, I feel on top of the world and I definitely noticed my productivity just just skyrockets. So that's important one to keep track of. Yeah, and again, another one that is better to take care of sooner rather than later. Because when you are burned out, you can lose sleep over thinking about your code, your work or your stress. And that can actually give you poor worst sleep, and it can just make the problem worse. I myself am not a good sleeper, I will sit up and think about code problems all night long. It's a terrible, terrible thing. So I have to, I have to train myself for use things like that app headspace, which is like guided meditations sort of relax you to get you in the mood, for going to sleep or to get your brain off of those things, or play. Like, I know, video games aren't always super good idea there because they, you know, excite your mind. But playing a relaxing video game, I was getting your brain into a space that is more meditative and relaxing through reading headspace, or whatever you can do to relax yourself. Um, I think we should talk now more about just like motivation in general, towards your code. Because I think sometimes this the burnout doesn't necessarily come from some of the physical stuff that we're talking about. But it can just become from the work that you're doing the actual work that you're doing. Because often you are working on things that might not be as exciting as you want. Maybe you're working on a particularly hard problem. I remember spending just weeks and weeks just trying to like, tweak some CSS, that was like such a slow process and you feel like you don't get anything done. And you're not really proud of what you do. And - -30 -00:27:25,140 --> 00:28:18,600 -I really think that your your motivation in life comes from lots of small wins. And if you if you stop having those small wins, and if you're not proud of don't feel good about the stuff that you're working on, it's it's easy for this feeling to sort of creep in, right. So whereas taking breaks is really important, I think it's also as important as just making sure that you are either working on stuff that excites you. And obviously not everyone can be doing that because your job is your job. And you have to work on the stuff that you're assigned. But it's important to have maybe side projects or to be always investigating new avenues. Myself, I find listening to podcasts or watching conference talks. Yeah, I'm working on new JavaScript API's just sort of stuff that's out there. Like I think back to - -31 -00:28:19,800 --> 00:28:46,290 -when I first got really excited about this stuff. I was just doing stuff for the fun of it. I was working with webcam stuff, I was building little applications that would help me buy bikes from Craigslist much faster than anyone else, right? I would just have all these projects. And I still do have all these different projects out there myself. And it's fun to have these little pet projects that are both something that you're totally invested in and having fun with. But all you're also learning something new - -32 -00:28:47,730 --> 00:28:49,500 -as you go along. Yeah. - -33 -00:28:50,820 --> 00:29:37,980 -I mean, this is definitely one that is like it's very it can happen. And when you're working at a job, right, because a lot of times you're not getting to pick your projects. I worked at an agency, and they are sort of mandated. Everything is CMS based, it has to be using these older versions of PHP. So we were primarily on WordPress and Drupal, specifically. And there were blocking a lot of newer techniques and technologies, you had to support old browsers. And I think I was just so not happy with the work I was doing. But also the people at work, they would finish their jobs really quickly. Right? So we'd build a WordPress site, you'd knock it out. And then some some of the dudes were like playing games on their phone and stuff like that. You just end up sitting there for a while. And - -34 -00:29:39,000 --> 00:30:00,000 -if you work around that environment, you end up getting into the trap of being just like that. And I remember starting to play games on my phone in my free time at work and thinking hey, I'm getting paid for this. And then it was maybe novel for about a day and you're just feeling like, ah, I don't want to do anything right. I don't want to do any work or whatever. I'm - -35 -00:30:00,000 --> 00:30:27,690 -Just not excited by any of this. And part of that started to really turn around. When I started learning different different frameworks I, at that time, I had so little to do at work, I instead of, you know, hanging out with the guys and playing whatever on their phone, I started doing a tour of all of the different front end frameworks, I learned backbone, I learned Ember, I learned everything under the sun, and I was feeling productive. And by the end of it, - -36 -00:30:28,920 --> 00:31:01,560 -you know, a couple weeks later, I had a job offer from a better place, because of specifically that stuff I was doing and I got out of that job. And then my new job was exciting and fresh, and all this sort of stuff. But it was just so beat down by doing this same sort of monotonous work that was not exciting and not motivating to me, and I could not modify that I did my best I could and so instead, I found things to motivate myself and found ways to pull myself out of that and that in turn led to a better situation overall. - -37 -00:31:02,580 --> 00:32:18,750 -Man that that might be some of the best advice that that is in this entire episode. Because like I cannot agree more with with being learning new stuff is both going to reignite your passion with the stuff but it's also going to make you extremely employable. So that if you are in a bad situation with your job and and you can't talk to your boss about maybe using new tech or negotiate negotiating some time every week to learn then it might be time that you you go see you go get a new job. Yeah. And by having side projects, and getting to know this stuff is is definitely going to help you in that way. Yeah, I mean, it is funny that the stuff I learned in that tour is directly what I got the job doing. So yeah, it was it directly caused myself to shoot up. And not only that, but it was a nice, huge pay pump for me. So you know, all around, it was a good thing. So not not to toot Scott arrise own horn here. But I think the best way that you can do this is not to aimlessly wander around outdated, broken GitHub repos with lots of examples, because that's what Scott and I do, but but then we distill it down into tutorials. Like, I would definitely recommend that you pick up a tutorial, one of the best - -38 -00:32:19,920 --> 00:32:50,880 -things I ever feedback I ever got on my course was someone said, Wes has reignited my passion for web development again, and I just thought that was such a good feedback. Because like, that's exactly. I think a lot of people are like, Huh, like, oh, new stuff, I have to learn something new. But if you if you maybe take a course, that's fun, and you're learning a lot of new stuff, and and you get excited about again, and you think back to like maybe when you first got in this and you it was really hard, but you were really excited about it. So taking some sort, of course I definitely recommend. - -39 -00:32:52,320 --> 00:33:50,280 -Yeah, I'm, uh, I'm working on a talk right now about my, my, everything I've learned about learning, right? Because I have to learn so quickly for this kind of job, right? And one of those points is, is that go back to when you first started, right? Because when you first started web development, chances are, you were just very, very motivated and excited, and you weren't burnt out. But you are motivated and excited because everything was exciting and interesting. And you were you're getting to learn all this new stuff. But I guess we could talk about the other side of the coin coin is when you're you're there's also a situation where you're spending all your time learning new stuff. And that's what's burning you out. I just learned this. And now I have to learn this and this and this. And I just learned that now, this is no longer used. I just learned Redux. And now people are telling me not to use Redux context API that that can lead to burnout so quickly. So I guess in that, that instance, the advice would be, you don't have to learn all the new stuff. - -40 -00:33:51,660 --> 00:34:30,960 -Because if you try to learn everything that's new, you're gonna have the same it's a balance right now everything is is this way or that way. You don't want to go full swing into either direction. You want to take your time to be motivated to find stuff to learn and do all that stuff. But you don't want to feel like I have to grab this and this and this and this and this forever. Yeah, so if you are feeling like that, please refer back to Episode 35. Keeping Up With The Kardashians, which I Scott made that stupid title, and I almost I almost axed it and deleted him from slack. But then yeah, but it was a hit everyone love that title. So I, I see corrected. - -41 -00:34:32,190 --> 00:35:00,000 -I came up with that title. And I messaged Courtney first and I was like, Courtney, before I send this to us, I need your honest opinion. And I was like, I think this is hilarious. Like what do you think? And she just sends me back? No, no, don't even send this to you. He's going to kick you off the show. He's gonna he's gonna do the show by himself. He would rather do that. But then I was just like, no that come on. It's not that bad. There's no way it's that bad. So then I said to you, I'm like, yeah. I'm a - -42 -00:35:00,000 --> 00:35:08,970 -Where this is this is, this is bad. If anything, it just it just talks. It says lots about our audience where everyone thought that was hilarious. - -43 -00:35:10,050 --> 00:35:17,430 -Good. Awesome. Speaking of learning new things, let's talk real quick about a sponsor our sponsor today. - -44 -00:35:20,520 --> 00:35:53,760 -This as well. So our sponsor today is O'Reilly's fluent conference, which is, you know, O'Reilly, they build all the books with the animals on the front. They have a conference that is they are building a better web. It's from June 11th to June 14, is an absolutely massive conference. I've spoken at it before they have some of the best people in the industry speaking. I'm just on the website right now. Lynn Clark from Mozilla, she's the one who builds all those amazing like, how does Redux work in cartoons? Like? - -45 -00:35:55,530 --> 00:36:03,540 -A good way to explain things she just is awesome illustrations a Peggy from Apollo. She's, she does a lot of the dev on - -46 -00:36:04,860 --> 00:36:10,980 -Apollo clients link city, link state and all that stuff. Who else is speaking here, Val head. - -47 -00:36:12,390 --> 00:36:16,020 -Patrick Hammon, I've, he does a lot of performance stuff. - -48 -00:36:17,340 --> 00:37:02,520 -Who else? I'm just just scrolling through all the Cory Doctorow. Wow, that's impressive. So, so some pretty awesome speakers at this. And I think that conferences are a fantastic way to reignite your passion in web development again, because it takes you out of where what you're working on. And it puts you into all kinds of different areas of people are working on stuff in all kinds of different areas. And you can sort of dip your toes into different things like you can dip your toes into performance and into react and into different parts of CSS. And it's pretty nifty. So I want you to check out O'Reilly's fluent conference, the training is on June 11, to 12. The conference is on the 12th to the 14th. It's in San Jose, California. - -49 -00:37:03,810 --> 00:37:13,470 -You can go to conferences.oreilly.com forward slash fluent to grab your tickets, and you can use the code syntax for 20% off. - -50 -00:37:14,850 --> 00:39:08,040 -Nice, dope. Nice, dope, dope, dope. Okay, so we talked a little bit about how to prevent we can talk a little bit more and this I kinda want to focus maybe a little bit more on like nine to five jobs stuff, people who are working in an office, we talked a little bit about this. But you know, chances are you could be burnt out at your office, if you're overworked, underpaid, you know, that again, though money, they could throw money at the problem right in, in, you know, a new pay raise is only going to temporarily make you happy, that regard, you're still probably going to end up being more burnt out, even if they're paying you more, but uh, in my opinion, too much overtime for too long, especially not getting paid for it, we had a situation where we had three devs on a project, we were already working hard and one of the guys couldn't hang so they let him go. And then that work just ended up getting dumped on to the other me and this other guy, Jeff, our plates. And we hustled through it. But at the we knew it was going to be like light at the end of the tunnel, like you're only working this hard until we get a new guy on the project. And until then we'll pay you overtime. So because of that, we were able to say okay, we just chug through this, right? And then that was a situation where you work your ass off instead of working your ass off to get burnt out. So if you're, if you're not getting overtime for continuously working overtime, I would not do that I would be looking for another job, I would say I'm either pay me overtime, or don't give me overtime work. And you are valuable enough. Not necessarily to just tell your boss that but you are valuable enough where you can go look for another job. Or you can prevent that situation from happening. Because if you're working 60 hour weeks and getting paid for 40 hours a week, someone else will pay you that money for that time. There's just no way about that somebody will do that if you're employable. - -51 -00:39:09,090 --> 00:39:40,350 -So there's no use of really putting yourself through totally, I think if your employers worth anything, letting them know that you're starting to feel burned out and letting them know that you're you're just not feeling great about all the work that's that's coming your way. And that you might need some sort of break or you need to switch things up. That's, that's something that needs to happen in a lot of use cases. And if it's a decent employer, they're hopefully going to understand because they value you as an employee, and they know that pushing you to the bone isn't going to help anyone. - -52 -00:39:41,640 --> 00:39:58,380 -Yeah, absolutely. If they don't tell you you then that's that's a big problem. Yeah, communicating with your management. I mean, they're your bosses, but there are people and just like any good relationship, you should be having open lines of communication and you should let them know how you feel in a very nice and professional way. - -53 -00:39:59,430 --> 00:39:59,970 -Yeah, and - -54 -00:40:00,000 --> 00:40:23,280 -We've mentioned this several times today, everything gets bad enough look for a new job, there's really just no reason to stay at someplace that doesn't value you as a person. Yeah, we're in a pretty good industry, at least right now, where if you are a decent developer, you have probably in much more demand than you think you are. So it might be it's not easy to find a job, especially like I know people have. - -55 -00:40:24,630 --> 00:41:37,080 -They might live in a small town, there's not a whole lot of opportunities out there. But it's worth putting yourself out there, especially for even remote work as well. If you live in a small town, you can't necessarily find something. Because if you sort of stick your heels in and in and keep going with it for next four or five years, then then you're going to sort of wind up being like, Oh, I'm five years later, I absolutely hate it. My skills are out of date, because I haven't wanted to keep up and, and now I feel like I'm scared of scared of losing my job because I'm just not relevant anymore. Yep. Yeah, absolutely. All very important. Okay. So next is you've burned out. Because so far, everything's a little bit preventative, right. And this is the point where you've already gone over the edge, you are feeling totally worthless. You're feeling like you don't want to do anything you don't want to learn. What can you do to reignite your spark to get yourself going to get yourself out of the dumps? Like, what's, what's the first step? You're just like, oh, crap, this episodes really hit hit a nerve with me. And I'm feeling like, I'm totally burnt out, what do I do? - -56 -00:41:38,460 --> 00:42:17,700 -So, in my opinion, the first thing you want to do is to, I would say, if you can, if you have vacation time, or whatever, take a personal day, right? If it's a job, take a personal day, if you work for yourself, take a personal day, it's one day, everything will be fine, when you come back to it, take that day, go for a walk, go for a hike, go downtown, do something fun, do something that's non destructive. So it's like don't go out to the bar and just go get hammered or something like that, do something that is going to be a positive, and just let everything go right, this, this work will still be here. Even if you have deadlines or whatever, take a vacation day. - -57 -00:42:18,780 --> 00:43:34,830 -And that's going to get you just a total refreshed mindset. And what you're wanting to do is when you come back is you're going to start to make a plan on how to make things better. Because we mentioned before, when you have all of these things that you're juggling, it's so hard to really take the time to see the big picture. And this point, you've you've distanced yourself a little bit, taking a day or two or maybe even a week or whatever. But you've been able to distance yourself enough where you can start to look at the bigger picture and start to make a plan to organize, automate, take care of these things in a way that when you come back to work, you're not just like, shit, let me just start working again, as hard as I can. Yeah. Because then you're just going to get right back into the dumpster. I think some of those things that it could be in your plan is you obviously can't just stop working. But I think there's a lot of other things like figure out where a lot of your source of burnout is, is potentially coming from, it might just be that you have to stop going on Twitter, every single day, because you're seeing all of the new stuff is stressing you out and giving you anxiety FOMO. And you need to turn that off. Or maybe it's all the I know that a lot of people get burnt out from GitHub notifications, you do this amazing thing where you create all this open source software. And then it just becomes this enormous burden, where there's thousands of people - -58 -00:43:36,000 --> 00:43:48,030 -relying on your own open source software. And there's there's bugs that need to be fixed. And there's ideas, people have opinions and pull requests need to be merged. There's all this like, extra work that needs to be done. - -59 -00:43:49,560 --> 00:44:29,850 -And maybe it's just reaching out and saying like, I need someone else to do this, right? Like being able to delegate that to somebody else who is invested in the project and, and letting it go, right. Like I'm a big proponent of sabbatical. I think in a lot of different occupations every I think it's seven years traditionally, where people just take six months off from the work. Obviously, we can't necessarily do that in web development. But by maybe taking a break from some of these things that do cause you to burnout will will be helpful, and you'll be able to come back refreshed and with a new attitude towards it. - -60 -00:44:31,050 --> 00:44:59,910 -Yeah, I mean, one of the big things I think you even touched on there was just delegating, giving up some of the control, right? You're an open source maintainer, maybe you're the only maintainer. Look for the guy who is sending you the most pull requests and say hey, do you want to be a maintainer of this project or even put out a call how you know, is there anybody who would like to help me maintain this project, or just just looking to give up that control? I have a hard time with giving up control. I know we've talked about this before. I have a hard time with don't want to do everything myself. - -61 -00:45:00,000 --> 00:45:23,850 -It's not necessarily that I feel like, I can do it better. But I know the project, it's gonna take me less time just giving up that control and delegating or even just giving up the control overall and saying, Hey, listen, who wants who wants this thing? Who wants to help out? Will will definitely help you in that regard? Oh, yeah, I would say also, one kind of fun thing that you can do to, - -62 -00:45:24,990 --> 00:45:40,320 -to make this better is to have like a online chat group of just some other developers that not aren't necessarily your your co workers. Because sometimes I'm so frustrated with something. And - -63 -00:45:41,370 --> 00:46:35,250 -it's causing me to, like, really hate what I'm working on. And all I really need to do is just a sounding board of six or seven other devs or, or even just like messaging Scott and being like, I can't figure this out, or isn't, this isn't the way that they designed this API stupid, and you could just ran, you can just rant for 10 seconds. And then or like, Oh, I totally ran into that. Here's how I went around it. And just having like a sounding board that will help you get across your problems. I think sometimes when you when you hit problems, you put all that weight on your own shoulders when the reality is if you just took a break, or if you just have a sounding board of other developers to listen to your problem, you can often get through that, that dark period of being frustrated with what you're working on much faster, whether that's just like somebody is being dumb, do you or your code is not working? - -64 -00:46:36,450 --> 00:48:52,230 -Yeah, and shout out to the level up tutorials slack room for doing exactly that. And there's a number of guys and gals in there who will just chime up again, either expressing frustrations or sharing their their latest thing or whatever. But I mean, I even just yesterday, I was, like reworking the entire styled components system design system in my my site. And I was just like, this is really hard. I'm very frustrated. When I'm there, you know, hey, it turns out redesigning your whole design system after it's already in place is very difficult. And it's no fun. But it's definitely something you've got to do. Right? So it's on the list. So yeah, so Okay, you you get this place to sound off is definitely like a good thing. But how do you you're let's say you've, you've burnt out, you sort of recharge, you've got these things? How do you rekindle this, the spark has still burned out the engines or whatever you get to get this new spark to get going up and running. And one of my favorite things, again, is to learn something, but have it be inconsequential to your business or your work, right. Because if you're learning everything or your work is taking over your life, the last thing you want to do is to learn something that is like business critical, what my my opinion, you should learn something fun, you know, maybe it's if you're into audio visual stuff, you can work with the Web Audio API, or the camera, the web RTC, or do something fun or just goofy that way. Or maybe you want to explore Canvas a little bit. But that'll like still be increasing your coding skills while having it not be mission critical. It's not going to feel the pressure of work, and you're still going to be making some sort of progress advancement, you're going to be learning something new is going to drive motivation. Absolutely. I cannot agree more. And I do that all the time. myself. I have a massive folder of demos that I have never seen the light of day because it's just little things that I fiddle around with myself. And yeah, it's not something that I want to put out because it's it's not necessarily that all that interesting. But I learned a little thing. I built a little tool for my own like, the other day, I built a script to do automated DMCA takedowns on YouTube, because I have all these silly, silly folks who buy my course and upload it to YouTube. - -65 -00:48:53,250 --> 00:50:00,000 -And then YouTube's DMCA takedown is like five minutes per video, but there's a you can I built a script that would automate it. And I just like run the script in the console on a YouTube page, and it will automatically generate the whole takedown notice for me. And it's amazing. So like that. And that that felt good to do that, right? Because I had I learned a couple things along the way. And I had success in it and that those little successes are where your motivation comes from. Yeah, absolutely, totally agree. And I have like, my I bring this project up this B boy tools. It's an app I use for breaking. But I use this app as a shell for all sorts of these experiments. Like I wanted to work with the, you know, the webcam, and web RTC. I wanted to mess around with it. And so I was like, Well, what can I do in this B boy tools app that will work with that sort of stuff. And so I made this this camera again, that delays itself. So it's almost like watching yourself in the mirror but 30 seconds later so you can dance for 30 seconds and then go back and watch it without ever having to touch your computer. But that again was something that I came up with as - -66 -00:50:00,480 --> 00:50:18,750 -is something I could add to something that already exists. But it's it's getting, it's not mission critical. It's not work. It's just for fun. I wanted to experiment and learn that sort of stuff. And that's actually one of those things I did when I was burnt down. That's one of the projects that that helped me get out of that feeling like totally overwhelmed. - -67 -00:50:20,010 --> 00:50:55,950 -Yeah, and I would say, it's worth having a list of things that you'd like to work on one day, because I find myself as soon as I have a list myself, anytime I want to rage quit something, I just, I close all my editors. And then I open up one of these little projects and just fiddle with it for an hour in and build a little bit of something and then I feel a little bit better. Or also what i what i do is I'll just record a little YouTube video on something that I know really well. And I feel like people I should share, right. So just like that total context switch to something where you can, you can finish something, you can put a YouTube video up, and then you feel a little bit better, you can go back wins, - -68 -00:50:57,090 --> 00:52:07,410 -small wins. Cool. So any other last tips on dealing with burnout, other than just just it's important, again, affects your total mental state, it can affect your relationships with people outside of work people with inside of work, it can affect just your own levels of feeling confident and everything like that. So don't take these feelings or this overwhelmingness don't take it lightly make sure that you're you're you're checking yourself before you wreck yourself because nobody wants to get wrecked themselves. You know, that just that's not something we want to happen. Totally. Yeah, that's really good. If I so hopefully you found that useful. If you yourself have some some tips on on how you've avoided it or how you your own experience. I know there's a lot of medium posts up there where people who have kind of gone through it themselves and and how they've dealt with it and different things that they've put in place because this is just gotten AI's own experience. So if you have your own, make sure you tweet at syntax FM, really appreciate when people kind of share their own experience as well. Because it's I know it's hard to to be vulnerable and to just tell people that you you didn't like coding for him. Yeah. Yeah, I know. There's no one no shame. no shame in that game. - -69 -00:52:08,760 --> 00:52:14,220 -Yeah, so I guess it's a sick pick time. Do you have a sick pick? - -70 -00:52:15,240 --> 00:52:42,780 -I do. It's another another household pick. So Scott gave his lights the other day I gave my my lights the other day, which by simple wishes, sort of targeted collection like chip and Joanna just gotten West pictures of us slim and Lacroix. Yeah, that's that's sweeping up Roy can sculptures for your coffee table. Like ceramic Lacroix cans. I'm gonna I gotta get that done. Now. I gotta make that. Oh, that's a great idea. - -71 -00:52:43,800 --> 00:53:10,680 -Man, we've got that syntax Lacroix sticker. So tweet us at syntax FM if you want this the Lacroix I do for syntax because I'm about to put in the order. So I we're doing a renovation at our house right now. And we have to buy like a vanity and tile and all this stuff. And there was like a deal at load of Lowe's in the States. Oh, yeah. Yeah, it's like a, like a Home Hardware home or Home Depot kind of store. - -72 -00:53:11,910 --> 00:54:59,940 -And I got all these gift cards because I bought some stuff. And what I use the gift cards on was a brand new drill set. So I had this like crappy drill that the battery would die all the time. There's only one battery so if it died, you had to like sit there for four hours while it it charged. And I bought a new DeWalt drill set, which I was really excited about because they're they're like the best some of the best drills you can get. I have that one. Do you really? Yeah, I do that one, the two. No, just the just the one better. So I got a drill drill and impact driver. Oh, see, I don't have the impact driver but I have the drill and it's the best. Super good. So the thing about these drills is you got to commit because the battery packs are all different and once you commit to a battery pack system, there's all kinds of other tools that you can buy that the batteries are swappable, right so I committed to the DeWalt system and that was free because I had all these like coupons or all these like gift cards for it and then what I did is I went out and bought this thing from DeWalt is called the 20 volt cordless wet dry vacuum so it's you know what a shop vac is? Yeah, it's like a thing and you can suck up all kinds of like drywall duster anything just whatever you whatever you pointed that yeah just suck it up yeah then you can just suck it up and it's awesome awesome little vacuum The problem is that it's like so unruly. Got to plug it in and the hose is super long and digit courts are always so short you like move it a little bit. plugs that's the worst. Oh, it drives me nuts. I hate Accenture cores IO plug in lawnmower right now that's another story but that drives me crazy. Yeah, yeah. Yeah. Anyways, - -73 -00:55:00,000 --> 00:55:03,449 -So DeWalt has this like tiny little handheld - -74 -00:55:04,650 --> 00:56:04,050 -vacuum that you can pop the hose off, you put up the put the battery from the drill in it, and then you can just bring it with you and do all your little vacuuming. So like, if the car is a little bit dirty, or the basement needs to dirty, or we just did like a renovation, you need to suck up some sawdust or something like that. It's like the most convenient little vacuum to bring around. So I know has nothing to do with web development. But I know that there's a lot of homeowners out there that are very happy with this little vacuum. Hmm, that's great. I'd like I'm gonna have to get this because I want love my DeWalt drill. This thing looks great. This looks exactly what I need. But that drill, I'm telling you, that thing is so high quality and when you press the trigger, but it talks so hard, it almost like tweaks your hand. You know, it's like yeah, charm off. Yeah, it's awesome. I think the first time I probably was like, whoo, whoo, this is nice. Yeah, I was my contractor had one. And I was like, - -75 -00:56:05,220 --> 00:56:33,090 -Oh, this is nice. I need to get one of these. Yeah, that's, we were building a deck and my dad borrowed one from his office and was like, Oh, I gotta get this. We both went out bought them that day, because they were just that good. Yeah, it's, it's amazing. And now that I'm, I'm in the battery pack of jewel, there's all kinds of stuff you can buy with it. And this vacuum was the first thing I bought. And it's I've been so happy with it. Sick. That's a sick pick. I'm gonna pick - -76 -00:56:34,350 --> 00:59:03,240 -a cool man. Well, my sick pick is a totally different realm as well, which is the documentary that I watched that popped up on Netflix fairly recently. I am a huge fan of this is a totally odd hobby of mine. I'm a huge fan of mountain climbing documentaries. I have. It's absolutely absurd. In that that shift super project I was talking about with music. One of the first shift super songs I did was using, like, Oh my God, this documentary is so old. I don't know how old it is like 1940s called the hardest way up for climbing this mountain Annapurna. But I'm a big fan of these mountain climbing documentaries. The older the better if I can find ones that are superduper duper old, like I'm all about that black and white, whatever. Because it's just so fascinating. Yeah, so I've seen every mountain documentary climate that's that you can find readily available. And this latest one came up on Netflix, and that's called Meru, me are you about the this peak Meru. And it's in the Himalayas. And it is bananas. It's the movies more about like, these three dudes in their life struggles as they're attempting to climb this peak that's never been climbed before, out of all the peaks in the world. There's such a large, you know, all of the big ones have been climbed. And this one had not been climbed in so many people had failed on it. And so this this video was about them. And the one one of the climbers is a videographer. And his job is to like film, famous skiers and snowboarders doing the crazy run. So he's doing the crazy runs with them, and stuff like that. So the video work and the production work on this thing is absolutely top notch. It is just beautiful. Everything about it the documentary is from 2015. So it's not like brand new or something. But it is so good for so many reasons about their their adversity, and the amount of stuff they encounter. And just sort of the lessons that they're learning. I watched it a couple times. I watched it first. And then I was like corny. You have to watch this like right now because it's so good. And then she really liked it. It was just, I don't know, it was a really interesting, exciting well made documentary that told a really good story. So many times. These mountain climbing documentaries are just like, oh, they want to get up the mountain. And sometimes they don't. Sometimes they do. And that's the whole thing. And this is much more of a story out these these people. And I just found it to be absolutely amazing. Just a brilliant story with twists and turns and stuff you don't expect. Very, very good, - -77 -00:59:04,290 --> 00:59:06,720 -man. And have you ever been mountain climbing? - -78 -00:59:08,130 --> 00:59:49,860 -No, I live in Colorado. That's like a big thing here. Not only do mountain climbing but there's there's things called these fourteeners. There's 14,000 14,000 feet peaks, where everyone in the state of Colorado. They're like they meet each other and you're like, Hi, my name is Scott. I've climbed 1514 years I've climbed 1014 like it's so weird people like so many people claim these things. I did it's like bizarre. We have not climbed any yet. And there's a couple on my list that are just like easy leisurely hikes, but they are it's a big thing here. You get a lot of both professional and amateur just like someone you meet at Whole Foods. Turns out they may have climbed a mountain at some point. Wow. - -79 -00:59:50,940 --> 01:00:00,000 -That's pretty neat. I'm gonna put that on my Netflix. I love documentaries. It's like one of the only things actually watch. If you like documentaries, I found this one to be exceptional for the for the story. - -80 -01:00:00,000 --> 01:00:10,650 -And the production. Yeah, I mean, I always need high quality production. So that that's what I watch. One was called one mile, mile and a half. Hmm. - -81 -01:00:11,759 --> 01:00:14,610 -Let me double check. That's right. Yeah, mile, mile and a half. - -82 -01:00:16,619 --> 01:00:19,380 -Yeah, I watched this one called mile and a half on, - -83 -01:00:20,640 --> 01:00:34,200 -on Netflix about a year ago, as amazing as about people who walk. They didn't climb mountains, but they walked really, really long way. And it was just the production quality was amazing. And the story was super cool. So I'm gonna check this one out. Sick pick. - -84 -01:00:36,270 --> 01:00:38,640 -Low see you running sick pigs. - -85 -01:00:40,770 --> 01:00:53,700 -All right, now it's time for shameless plugs. And you can hear my dog huffing and puffing, she heard something, I don't know what she's hearing. But she's got to keep us safe. So she's letting us know. - -86 -01:00:55,200 --> 01:02:01,500 -somebody's doing construction nearby. And that is a potential harmful cause for us. So my shameless plug is going to be Thank you, Lou. My view j s. For every one series that I just released. There's 24 videos on view, j s, it's going to teach you all of the basics, we get routing setup, we do some animations, we talk about sort of why and how view works. And it's all modern view stuff. I mean, this thing just came out. And it's all using the latest techniques. So you are going to feel like a view Pro, you're going to understand the component system, you're going to understand how to bind variables, you're going to understand how to hit an API, the lifecycle methods, all of how it's different from react, how it's different from Angular and how it sort of fits into this landscape, right and also how it's similar to these things. So if you've heard the hype about view, j s, and you want to learn more, check out my series Vue JS for everyone that's on sale this month for 29 bucks, so a good time to pick it up. Because next month, it's going to go right back up. So $29 brand new series for me Vue JS for everyone, check it out. - -87 -01:02:02,760 --> 01:02:28,500 -Wicked, I'm just gonna plug my courses page. So Wes bos.com, forward slash courses, that will give you a list of all the courses that I have. So if you're looking to learn something new, I've got a bunch of free ones and a bunch of paid ones. So mostly JavaScript and CSS focus and check it on out. sick, sick. Cool. That's all right. That's it for today. Hopefully you enjoyed it. We'll see you next week. - -88 -01:02:29,760 --> 01:02:40,980 -Please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax42.srt b/transcripts/Syntax42.srt deleted file mode 100644 index 90a83bb30..000000000 --- a/transcripts/Syntax42.srt +++ /dev/null @@ -1,380 +0,0 @@ -1 -00:00:01,290 --> 00:00:55,890 -Wes Bos: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to Lynskey and West boss. Hello, everybody. And thanks for checking out syntax. This is the podcast where we deliver tasty treats every week. And this week, we are going to be doing some super tasty treats. We're going to be answering a bunch of listener questions, we get all kinds of questions via the the the forum that we have via Twitter via dm all over the place. So I sort of compile those and every now and then we will rattle through a bunch of listener questions. And I like this because there's there's something for everyone in this kind of episode. And it will it really allows us to talk touch on some of these topics which are much smaller. Maybe it's just 510 minutes to talk about rather than a massive episode. So with me as always is Scott to Lynskey. How you doing today, Scott? Hey, - -2 -00:00:56,040 --> 00:01:06,870 -Scott Tolinski: I'm doing super good. I think we need to come up with a catchy name for these kinds of episodes. Like you know, mailbag is inappropriate because it needs to be tasty treats related - -3 -00:01:06,980 --> 00:01:08,310 -Wes Bos: it tasty. So - -4 -00:01:09,540 --> 00:01:12,420 -Scott Tolinski: I tried to come up with something off the top of my head, and I was just like, - -5 -00:01:12,420 --> 00:01:15,360 -Wes Bos: throwing an egg from a neighbor or like making cookies, - -6 -00:01:16,320 --> 00:01:18,090 -Scott Tolinski: or cookies, or - -7 -00:01:18,120 --> 00:01:23,370 -Wes Bos: cake sale or bake sale. Ooh, potluck. So Paul, Paul, everyone. - -8 -00:01:24,719 --> 00:01:32,489 -Unknown: Oh, yeah, yeah, that's all right, right in the action. - -9 -00:01:33,780 --> 00:01:48,659 -Wes Bos: Welcome to the potluck episode. That's actually how Scott and I do almost everything with this podcast is just kind of riffing on it. I remember when we first did the, the name for the podcast, we had so many stupid ideas. And then syntax just popped out of nowhere. - -10 -00:01:48,689 --> 00:01:57,930 -Scott Tolinski: Yeah, we had a lot of stupid names, we should, we should actually at some point, just go through and rattle off all of the crappy names we came up with for this show. That'd be a good little segment there. - -11 -00:01:57,959 --> 00:02:35,130 -Wes Bos: Oh, it's brutal. Anyways, today we are sponsored by fluid comp, which is the awesome web development conference and deploy HQ, which does sort of deployment straight from your Git repository. And we'll talk a little bit more about them partway through the show. So why don't we we dive into it, you want to pick off the first question, we've got a whole bunch here. And we're just gonna sort of get through as many as we possibly can. And then if you have your own question, we'll put the link to the forum in the show notes. And go ahead and submit your your question right now. So why don't you rip one off there, Scott? And we'll we'll try tackle it. Yes. - -12 -00:02:35,160 --> 00:02:59,730 -Scott Tolinski: Okay, so the first one. This one is, what are your thoughts on view? j. s? I feel like I'm appropriate. Or it's appropriate for me to answer this one cuz I just did a series on Vue. js after working in react so long. So the full question is, by Louis Hernandez, what do you think? Or what are your thoughts on Vue JS? I've recently seen a bunch of hype about it, it actually looks pretty good, but would like to hear your thoughts. My thoughts are, - -13 -00:03:00,300 --> 00:03:00,870 -Unknown: uh, - -14 -00:03:00,870 --> 00:04:59,070 -Scott Tolinski: I found it to be nice to work in. I enjoyed working in it. I was surprised at how much stuff Vue did for you. For me, I came from Angular before react. So a lot of the concepts are very Angular II, or at least Angular one E. And they're also very react D, in a way. And so because of that, it was sort of a nice hybrid of some of these ideas, you're passing props. But there's still a lot of my opinion, like magical stuff, stuff that you're sort of wondering, where's this coming from? It's not nearly as explicit as react, I found sometimes being a little like, is this going to work? Okay, this worked. Okay, um, why? Why is this working, but like, only because things weren't as explicit in that, but it's one of those things that I think that if you were working in view all the time, you knew exactly where everything was coming from, and you were very, very comfortable and familiar with it, it would be really nice because you have to do a lot less work to get things going. So in my opinion view is pretty sweet. I think it's a, a wonderful another flavor of web framework to have out there. It offers you a lot of options, and a lot of ease into development that things like react aren't doing for you. The view csli was great. It's a great sort of, like create react app kind of system. So I found the view ccli, the latest one to be excellent. All around the ecosystem, the docs, they were all great, the community was great. If I had issues, I went to the discord channel, talk to a bunch of people. So there's definitely a lot of things to like about view. That's it. I'm not going to jump out and rewrite my whole site in view right now, because I don't see that much of a reason to jump. You know, from react view. I still love working in react. So if I was working on a new project, might I consider a view? Yeah, I've definitely consider it. But I'm not exactly about to change my current trajectory and what I'm working on for it. - -15 -00:04:59,610 --> 00:05:43,050 -Wes Bos: Yeah. I think sometimes people ask me all the time, like, what are the differences? And which one is better? And there is really no answer to that. They're all very good at what they do. They all have their pros and cons. And we'll do a whole view episode once I actually get myself learning and building some stuff in view. But I would definitely not say that it's hype, because it's it's definitely one of the frameworks now, I would say, yeah, people absolutely love it. People are betting on it with their businesses. So I would definitely consider it if you are looking at different frameworks. And also this view press came out the other day, you see this static site generator for view? And it's built by you. Yeah, yeah. The the lead dev behind view, - -16 -00:05:43,110 --> 00:06:00,240 -Scott Tolinski: I only saw that it came out. I didn't fd. I didn't dive too much into it. I would like to dive into it more, because there is what view is a view x or nuxt? Or Yeah, view x. Sorry, yeah, Redux? Yeah. nuxt. Oh, yeah. I haven't used that one either. Pretty nifty. - -17 -00:06:00,870 --> 00:08:17,699 -Wes Bos: Cool. So Well, well, again, we'll have another episode on that some point people ask for every single day, but I just need a couple days to to build an app myself in it. And right now, I'm pretty heads down on my course. So we'll get to that eventually. We next one, kind of along the same lines is have you ever used TypeScript or flow, which do you prefer? So I'll start off on this one, and we can see what Scott's things are. So first of all, let's explain what TypeScript and flow are. So JavaScript is what's called a loosely typed language. And what that means is that if you have like a function, and you either want to accept arguments into it, or you want to return some values from it, you can just do whatever the hell you want, you can you can accept a number or a string or a Boolean, or an object, and it will always work. And you can convert these from one to another and without really, without really much problem, right. And because JavaScript is so loose, it's it's kind of nice, because you can just like get up and running with it without having to know a whole lot of stuff. However, there's a huge downside to that, which is your it can get really messy, you don't know, if you need to pass in a value, you don't need to know if you need to pass in a string or an object or a number or what you should be returning or, or any of this stuff. And then also, along the same lines, the the tooling with this stuff is really great around things like TypeScript and flow, because then you get this really nice sort of like IntelliSense in your editor, where if you type a function, it will tell you exactly what you need to pass it, what type you need to pass it a little description along with it. So I haven't built anything significant in TypeScript or flow myself. However, doing graph qL, over the last couple months, over the last couple of months, I've definitely seen the value of having a very rigid typed language because because graph qL itself is is typed like that, right? And once you get over the hump of how rigid it is, you start to say, Oh, this is nice. I definitely see why people vastly prefer this over just JavaScript. - -18 -00:08:17,730 --> 00:09:14,640 -Scott Tolinski: Yeah, yeah, I haven't used it myself either. Because I ended up like modifying my, my code base so much, I feel like I'm treading water instead of adding new features. So that's one of those things that like it would require a lot of work to put into place right now. And I just really need to, well have time to do that. But personally, I think I would, I would definitely try out TypeScript or flow on any other project, or even reason. I think for me, one of the things I wanted to wait and see which one is going to come out on top, I don't know if there is going to be one that comes out on top. But you know, low is made by Facebook and TypeScript, as a lot of support from a whole bunch of different companies, including Microsoft. And, you know, it's used in Angular and all sorts of stuff. So it's tough to say reasons, gaining some steam in the React community as being a new option. I really want to see, like before I invest a lot of time in picking one of these. I want to see which one is is the de facto winner. I don't know if we'll get that though. - -19 -00:09:15,720 --> 00:10:07,260 -Wes Bos: Yeah, and we should also say that flow is mostly just comments. And it's a little bit of a modification to the actual language. Whereas TypeScript is an entirely separate language and sort of encapsulates JavaScript and ESL ESX, and everything that we got, but then also add a whole bunch of stuff on top of it, so I would definitely check it out. It is a barrier to entry. Uh, one of the reasons why I don't necessarily reach for it immediately is because I do teach. Yeah, and if I were to immediately start to do everything in TypeScript, well, I people have asked for TypeScript classes, then that's a huge barrier to entry for a lot of people who don't necessarily want to do and generally what happens is that people that already know No TypeScript will just do my tutorials in TypeScript because they know enough to be able to say, okay, the equivalent in TypeScript is x, y and z. - -20 -00:10:07,550 --> 00:11:48,480 -Scott Tolinski: Yeah. Yeah. Totally agree with that. Yeah. Because the moment you make it the TypeScript, React tutorial, you're losing that chunk of your audience that isn't interested in in TypeScript or interested in in flow or reason or whatever. Okay, cool. So the next item in the potluck is brought to us by jazz. He, he brought this in, wrapped in cellophane on a paper plate here. And this is, what is your biggest? or What was your biggest breakthrough advancement in learning JavaScript, and web development? A project, a study? Or not a study, but that he saw, okay, what was your biggest breakthrough? For me, I think my biggest breakthrough was really just diving into frameworks overall, whether it was Ember, Angular, backbone, those were the first three that I dove into, for me that took JavaScript out of a land of, hey, I need to have a slideshow, let me drop this jQuery in here, or I need to have this event happened when I click this button, let me drop a little line of JavaScript in here to something that was much larger than that and much more. This is a full on application. And it's so much more interactive, and I'm working with database calls. Because previously, before working in that kind of thing, I was all, you know, CMS backend I was interacting with the database is primarily through some sort of PHP system. So for me, my biggest advancement was that the moment that the JavaScript frameworks sort of came into a more mature state, and started being a lot more used, and you're certainly building on applications with JavaScript itself, so that to me was a big Wow, super cool moment. - -21 -00:11:49,379 --> 00:14:19,020 -Wes Bos: Yeah, I think for me, it was I had built a I was sort of Learning Express and and passport j s, and that whole stack that where you build a back end based app, and I had taken on a project to build sort of a contest on Facebook. So the way it worked is that Facebook apps, I don't know if they're still this way. But Facebook apps used to just be an iframe that you pop into Facebook, and they send along some authentication headers, and whatnot. So what I had to do is I built this Express app where it would log in with Facebook, people will be able to upload a photo and attach that to their Facebook ID. And then people will be able to vote on those different photos. And there's a whole bunch, it was basically a contest where people would upload photos of various spots around Canada, and people would vote and then at a certain point, somebody would win. So that was huge for me, because at the time, I had been doing primarily WordPress websites and jQuery websites and being able to switch over to actually building something significant. In Express, it really pushed me and it really opened my eyes to how all of this other stuff worked. I remember like kind of weighing, like, should I try to hack this together and WordPress, or should I build this custom thing in totally in JavaScript and express and I decided to go custom because one of the things they needed, which is really funny, it was the ability to detect nudity, because people could could upload, there was no moderation process in there. So it was hilarious, I got to use this library called nude dot j s, and it would, it would detect if there's nudity based on skin tones and stuff like that. I think it was very long ago, maybe five or six, seven years ago, that I did this, there's much better stuff out there now with machine learning to actually, I remember uploading a photo of toast, and it thought toast was nude, because there's so much like this skin tone. So that's what I did. And I remember that just like really grew my crew my skill set. And then from there I built on or maybe four or five other medium sized Express apps that had authentication and logging in and uploading photos and, and all of that stuff. And that that really pushed my skill set past the sort of jQuery where I currently was not that was before frameworks had even sort of surfaced. - -22 -00:14:19,710 --> 00:14:53,670 -Scott Tolinski: Yeah, cool. Yeah. See, when when node was first starting to be a thing for me. I didn't necessarily. I didn't necessarily get it. I mean, I got what node did but I didn't. I didn't dive in because I was doing CMS base sites. And for me to have to go through and do a whole, I guess Express was like still infancy or whatever, to have to write your an HTTP HTTP server and get all that stuff going. I just remember being like, Yeah, but it's easy to install WordPress like, yeah, so I didn't jump on it, I think in that same regard as you did. So yeah, super cool. - -23 -00:14:54,960 --> 00:15:16,550 -Wes Bos: I talked about this before, but I remember watching on YouTube of the introduction to node and not talking really understanding what it was, but I could feel that it was like, going to be something big. And I'm super glad that I sort of bet the farm because at that time, everybody was learning rails and I thought, should I be learning rails? But JavaScript was a good solution there, too. - -24 -00:15:16,680 --> 00:15:43,590 -Scott Tolinski: Yeah, we went to a knee in the CO creator of level up tutorials bench if we went to a code meetup, and they took maybe, like, 45 minutes for them to get the entire room up with like, a Hello World, because it was like, right when it came out. And I just remember, like, this is a lot of effort. This is a lot of effort. But I also think it was probably just because there's a lot of people infancy, nobody really knew what was going on. But you know, now Now today's that the whole thing would be very different. - -25 -00:15:43,920 --> 00:16:07,500 -Wes Bos: Yeah, it's actually kind of interesting, because there still is no real rails of JavaScript. You know, like, you know, Rails is like everything baked in, or red or ivalo. php, has this, like everything sort of baked in, and you can just get up and running. And there are some things out there. But it seems to be the JavaScript community is just like, no, I like my small packages, and I'll stitch them together. Yeah, - -26 -00:16:07,740 --> 00:16:13,350 -Scott Tolinski: yeah, I really enjoyed using rails. But again, I do I do sort of like the way the node community has moved. - -27 -00:16:14,610 --> 00:19:28,950 -Wes Bos: Yeah, yeah, totally. I agree. Let's take a quick break and talk about our sponsor, which is deploy HQ. This is actually pretty nifty. Because people ask me all the time, how do you get your websites deployed to your actual server, because you often have your website, you've got some sort of Git repo or any other version control repo, and then you've got a server that need to deploy it to so what deploy HQ will do is allow you to either just watch your Git repo, and whenever you push something to let's say, a lot of people will watch their master branch and, and when a commit lands in the master branch that will automatically deploy to your your server. So what this will do is either via FTP, or SSH, it's going to take your Git repo or any other repo that you have and deploy that thing directly to your server. So you're always running the most recent code in there, you can write custom commands to do build. So if you have like a build step in between pushing to your master repo, and then compiling a whole bunch of assets or building your application, you can push it in there, they've got guides for for react, and view and all these all kinds of guys that you should really be checking out. They have the ability to deploy to multiple environments. So if you have a staging and a production server, sometimes you need to get it okayed by management before you actually deploy to production. That's something good to have their automatic deployments. So it's going to watch your Git repo. And as soon as you do that, it's automatically going to kick off the build process and deploy it right there. You can set up post commands to if you want to have like a big button in your office that says deploy. But you could pull a sweet little Arduino thing for that. What else do they got here, you can scheduled appointments to to deploy at a specific time, maybe you want it to deploy, not on a Friday afternoon, like I've done before, it had everything coming crashing down. Pretty nifty little thing. Pricing is very reasonable. I'm just checking it out here. It's 950 a month for up to 10 projects, unlimited deployments, unlimited user, I like that unlimited deployments before, because you You shouldn't be penalized if you do five or six commits within an hour and it kicks off five or six builds should be able to do as many as you want for your 10 projects. So it looks like it's about 950 a month us but if you are a syntax listener, which you are go to deploy hq.com forward slash syntax, and what that's going to do is it's going to give you 50% off your first six months which is pretty sweet. They also have a free 10 day trial and it's it's not one of those scammy trials where they they pull the rug out from under you and ask for your credit card no credit card required just give it a 10 day trial to see how you like it and then get 50% off. Also, this is pretty nifty. I'm gonna grab one of these before anyone else does the first 25 listeners get a who successfully deploy a project are going to get a free deploy HQ mug or t shirt so I'm gonna do mine right now and there's 24 left after this so go ahead and check it out at deploy HQ comm for slash syntax and thanks so much to deploy HQ for sponsoring. - -28 -00:19:29,460 --> 00:19:30,030 -Unknown: Yeah I love - -29 -00:19:30,030 --> 00:20:00,840 -Scott Tolinski: stuff like this because working it like you're coding your your your heads in your code and it works locally. You just sort of expected to go up to production and be okay but like who loves spending that time it once your once your deploy process is like really excellent. It's such a joy to just be able to deploy something like easily and confidently and know that you don't have to worry about it. That to me is such a big thing that it's like a life improvement in your your whole life. load everything. It's - -30 -00:20:00,840 --> 00:22:33,150 -Wes Bos: totally Yeah, sometimes you hear about these companies that are like, they deploy once a month, or something like that. And then it's almost scary, right? And yeah, if you deploy early to play often, and you have a process in here, it's going to be super simple. So they also have a 10 day free trial, I should mention that as well. It's not one of those things where they're gonna ask for your credit card and wink, wink, it's 10 day free trial, you can just go ahead and grab that. So their signup process is really cool. They have a link to your gmail.com. Right after you sign up. That's, that's smart. Sick, wicked. So check it out. All right, let's grab another question here. Um, any tips, this one's from critter, I don't know if that's your only or not any tips, tools, tricks for motivation or avoiding procrastination. So I'm a big procrastinator, and a big proponent of, of getting a lot done. And I know this in myself, because when there's something that I don't want to do, I will just start watching YouTube videos, or just push off all of the actual work that I have to do. Because of that one thing that I don't really feel like doing. So what I found with myself, and this is sort of the process that I go through is I do a brain dump into my things. And we've talked about this before in our productivity episode, which is I follow the sort of the Getting Things Done methodology where you do a brain dump into your app, and then you can sort by project. And then I take it one step further, where I wake up in the morning, and if I if I know it's a day where I have to do a lot of little things, like I know that I have to fix this piece on my website, there's a broken image on this site, there's an issue with my player that I need to fix. There's like a lot of like little stuff that I've been sort of putting off for a while, I'll dedicate a day to just doing little stuff like that. And then I'll sort those tasks by the amount of anxiety that it gives me, meaning that like, Oh, I don't feel like doing that, or I don't want to reply to that email, or I'm not sure how I'm going to solve that problem. I'll do that first. Because as soon as you can you force yourself to get through those sort of tougher parts, those those pieces that are pushing you away from doing your actual work, you get through those as fast as you can, then all of a sudden you start to get on a roll. And then the work gets easier and easier as you go through. So sort your list by amount of anxiety, which I think is funny, because if you're used the website Hipmunk to book a flight, I haven't, but I've seen them they have - -31 -00:22:33,150 --> 00:22:34,410 -Scott Tolinski: a chipmunk logo, - -32 -00:22:34,739 --> 00:23:07,530 -Wes Bos: they have like you can search for flights on different carriers and whatnot. And they they sort by are not anxiety, they sort by pain, pain, meaning that they don't, they have like this algorithm by based on like, how many layovers and and how short the flight is, and if it has Wi Fi or not. And that will give you a pain score, then they can sort by pain, which is exactly what you want to do. So that's that's my tip, there is sort by anxiety, get the hard stuff done out of the way. And that will open you up for a productive day. Nice. - -33 -00:23:07,560 --> 00:24:41,070 -Scott Tolinski: I love those tips. And it's going to actually coincide with my sick pick today. So give a little teaser of my sick pick today, which is a book called Eat That Frog, which is basically that system of doing the stuff you dread sort of first, because those are your frogs for the day. I actually one of the things that I love about to do list, which is my favorite to do application is that in one of their most recent updates, I don't know when this was they started sorting automatically by your priorities. So they have up to four levels of priority. So now when I give something a p one, it automatically moves it to the top of today's things. So instead of me having to sort them manually or whatever, I just add p one, p two, p three, whatever. And it gives them a more read severity color. And then they're like looking at it and I can see it automatically sorts my things top to bottom of the stuff I got to get done the most of the stuff, I got to get done the least. And I just go through and I don't even think about it. And I don't even say I don't want to do that. I say hey, you're the top thing on the list. You're bright red, you're staring at me I got to do this or else I'm gonna be upset with myself. So I usually go through and and first thing I do each day is to do list make a big old To Do List Mark everything is p one through p four. I can adjust it over the course of the day. But typically, I like to have a pretty good idea what I'm doing for the day. If I don't have that list, I end up just sort of meandering around in my own brain and not getting too much accomplished. So for me, procrastination tips are make that list and Eat That Frog I'll talk a little bit more about Eat That Frog in the sick picks part of the show, favorite book of mine. - -34 -00:24:42,150 --> 00:25:05,970 -Wes Bos: That's wicked. And if you're interested more in these whole productivities we Episode 11 of syntax back in September, we recorded our favorite productivity hacks and we were more focused on tools and and tooling around and apps that you can use as well as with touch on some methodologies, such as getting things done. So if you're interested in that, check out that episode. Yeah. - -35 -00:25:06,060 --> 00:28:37,860 -Scott Tolinski: Super cool. Okay, so let's get a another potluck item here. What are your? Okay, this question comes from Arkham. What are your thoughts on the new age of CMS flat file, or headless versus database driven? versus some other court? some blue sky dream CMS, basically, what are our thoughts on the CMS platform or landscape right now as we see it, where we have things like flat file, markdown file, CMS, as we also have database driven ones, as well as maybe some potentially cool other stuff, which there are some potentially cool other stuff. So let's get into it. I think some of its pretty, pretty cool. But it requires a certain level of technical know how like, I could see a markdown file driven, CMS being very popular for developers or people who are familiar with code, but like, I'm not going to tell a client who's never you know, who's only used Microsoft Word, to use a markdown file as their database or a CMS, I'm just not gonna do that. I don't think they're going to get it, I don't think they're going to have a good time. And I don't think they're going to have a good experience with me as their developer. If I'm saying, Hey, you got to come in and Mark edit these files, it might be a little bit different with something like Netlify CMS, but at the end of the day, you're still requiring some build time. So they're not going to see that instant feedback where when they save a file, it's automatically updated for them. Like in WordPress, you save it, you go to the page, it's there with nullify CMS and Gatsby or something like that, you save it, and then it has to rebuild with the new markdown file. And that maybe takes a second, it's not as instantaneous. I think it's a great system. And I really like it, I just don't know how I feel about it for non technical clients. That said, the headless CMS landscape is pretty sick. Right now, that gives me an opportunity to announce and plug my new pro series coming this month, which is going to be modern WordPress, where we're going to be doing all headless WordPress, both with next JS as well as Gatsby. So I'm going to take two different front end approaches on it both gonna be server side rendered, or statically rendered stuff, I am been pretty, pretty dang psyched with how effortless it's gotten lately. For a little while, there were so many like, I don't know what to do here, or here, or here. There's too many questions up in the air. And I think lately, the headless WordPress game has really gotten a lot more. This is how to do things. And this is the way so I'm pretty excited about it. That said, I haven't built any major client sites in it yet. And I have an opportunity to build a WordPress site. I just got a WordPress freelance client. And who knows, uh, I have this opportunity. It's got to be WordPress. So hey, I'm gonna make a judgment and do some headless WordPress on this one, and get back to you a little bit more on on how awesome that is. Before Wes jumps in here, I think one last thing blue sky, oh, what are these these other things that AR AR could exist. And this one CMS is pretty cool thing. One is called graph CMS. It's a graph qL based CMS that is a host, I believe they have an open source version of this thing. It's all graph qL based and the interface is fantastic. It looks like WordPress, if it was designed today in that manner is like really modern looking. And the guys behind graph CMS are really cool. So graph CMS is one of those ones that I really want to use really want to try on a bigger project that just haven't gotten to yet. So that that's sort of one of my thoughts on the landscape here. A lot of really exciting stuff happening. - -36 -00:28:38,730 --> 00:28:41,580 -Wes Bos: That's pretty cool. You're on the homepage of this website. Do you know that? - -37 -00:28:41,610 --> 00:28:53,040 -Scott Tolinski: Yeah, yeah, I talk to these guys all the time. In fact, I'm gonna do a graph CMS tutorial series for them. But they were working on some some big updates. So waiting for those to come through will not byline. - -38 -00:28:53,070 --> 00:30:54,810 -Wes Bos: Yeah. Wow, that's pretty nifty. Yeah. So I am also pretty invested in this whole headless CMS right now because my own website badly needs a redesign. My the code that's running on Wes Bos calm was originally built in 2011. And it's sort of been tweaked and fudged over the years. I've built it in less. And there's just there's a bunch of little bugs here and there that I'd like to move however, like, I'm not for sure. Not interested in moving away from WordPress, because I've got so much. So many blog posts I have every single talk I've ever done is stored in a custom post type with custom fields, and have all this content in there. And also, I really like it. So like I know a lot of people like to, to I don't totally get why WordPress gets such a bad rap. Like I mentioned, like, Oh, I'm going to redo my website. I'm sticking with WordPress, but I'm going to likely do like a react front end with something like Gatsby or next or I'm still looking at a couple of the different options that are out there and I got like 7000 people who were recommending alternative CMS is which these things look amazing like crap CMS, and there was there was like three or four other ones, I forget the names of them. And they look amazing. But I'm, I'm pretty happy with it, my assistant does a lot of updating in it. So I think you definitely need a CMS with that's easy to update, like Scott was saying a client is not going to log into GitHub and update markdown files and wait for that whole thing to build. And also, a lot of cases, you lose the sort of dynamic pieces of the website, I know that you can run JavaScript on the client side and dynamically render based on that. But like for my talks, they automatically archived themselves when the date has passed. And if that was the static site generator, and I'm statically, generating my my talk page, then I'd have to come up with some sort of regeneration - -39 -00:30:54,810 --> 00:30:56,250 -Unknown: web hook web - -40 -00:30:56,670 --> 00:32:34,890 -Wes Bos: that would ping at a certain point. And like I get, I get the whole hype around static site generators, and we did a whole webs a whole episode on them and the benefits of it, but it's it's definitely not a good use case for absolutely everything, especially when you have clients and other people at stake other than your idealistic developer. Yeah, standpoint behind these things. So pretty excited about it, I definitely think that the way forward is headless something and then a front end in react Angular view, whatever it is, I think the space is starting to firm up around things like next view press Gatsby, it's not totally there just yet. There's a bunch of people that are it's not as nearly as easy as just like slapping a WordPress theme on and, and going for it where all the queries are done for you. There's there's a lot of like, like, in Gatsby, I needed to wait like 10 minutes for it to pull down all my blog posts. And then there was an error in my graph, qL query, and then the whole thing broke. So I had to like change the query, wait 10 minutes, then it broke again. And then I just gave up because that whole developer experience is not as good as it can be just yet. I know that they're, they're working hard on it. So it's pretty interesting space. So definitely be watching it. And if I was a, like a, a web developer, like if you're if your bread and butter right now is WordPress, I would definitely be doubling down on your Angular view react skills right now, because that's, I think that's the way that it's going. It's sort of this separation of concerns, front end back end. - -41 -00:32:34,949 --> 00:32:50,360 -Scott Tolinski: Yeah. I've been really impressed with the system that we're using in the modern WordPress course for my new course here. So I'm pretty psyched to get called. It's the love of putting me on the air. It's a starter. Yeah, that one, - -42 -00:32:50,360 --> 00:33:13,050 -Wes Bos: which is from postflight, which are like life hacker. Yes, I remember. latrina Gina Trapani. Okay, your pin. Yeah, she she tweeted at me. And I was a little bit starstruck because I had grown up with her life hacker and listening to her on podcasts and whatnot. It's pretty cool that she's, she's Devin behind all that stuff. So - -43 -00:33:13,050 --> 00:33:29,130 -Scott Tolinski: it does, it does the thing that is most needed in this space. And it's unifying a lot of things and making it easy, which before it's sort of like, where do I go for this? What do I do for this? What do I do for this, and this sort of, like, aligns all of the stars, so I am extremely impressed. So - -44 -00:33:29,160 --> 00:34:05,250 -Wes Bos: yeah, I'm hoping it's gonna start settling down because there's there's nothing better than having a nine year old WordPress site. And as long as you keep it up to date, it just works, right? Like I, I tweeted the other day, YOLO updated 19 plugins on my own site, and it didn't do anything. It worked fine. Whereas you wait a week in JavaScript land, and that thing is all sudden broken, and best practices have changed. And I also don't really want to babysit something that much because I don't want to spend that much time on my own my own site. So it's kind of interesting to look at. - -45 -00:34:05,550 --> 00:34:10,730 -Scott Tolinski: Yeah, totally. Cool. Well, thank you Artem for that one. Art. All right, - -46 -00:34:10,730 --> 00:35:47,280 -Wes Bos: let's pick up another one here. Let's talk let's do a business one, hashtag business. How can I start selling and making courses like you guys, I love teaching stuff to people. I've taught in a few local meetups. And then there's another question. We'll talk about that later. That's that's nothing to do with this one. So um, how do you start doing what we do? I think it's it's just putting yourself out there and helping people. So I think like, if you look at both Scott and I, you can listen to our origin stories on previous podcast, but both Scott and I both started out. I started out doing blogs and YouTube videos and teaching at ladies learning code, which is like this, not for profit on weekends, and all three of those things that I did, I found out that I really liked it. I really found the way that I like to explain things. And it sounds like this is from Arvind, it sounds like he's taught a teaching in a few local meetups as well. That's a fantastic first start. But you really just got to start putting yourself out there, whether it's making YouTube videos, blogging, writing books, you kind of find, find your medium and find your people. And then from there, once people start to, to really enjoy your stuff, once people start to enjoy the way that you explain them, once you find your tribe, so to say, then, then they start asking for more stuff. And they started asking for you to teach them XY and Z. And at that point, you can start to put together a course based on what people are asking for. - -47 -00:35:48,030 --> 00:36:39,650 -Scott Tolinski: Yeah, I think a lot of it too, is starting without the expectation that people are going to be interested right away. Nobody knows who you are, they they're not familiar with your work. And you might not want them to be when you first start trying to get into this anyway. So for me, personally, I would just say, Get going start recording a bunch of stuff, get a decent microphone, listen to our episode on screencasting. Because that gives you a lot of tips and tricks there. But get get going and just start making a bunch of stuff because you're never gonna find out what you're bad at. And this until you start uploading and people on YouTube start telling you what you're bad at that at that point, you can start tweaking and fixing it and you know, not taking it personally and using that to progress. So I definitely say just go for it and get some stuff pen to paper and voice to record or tape or whatever you would say here. And just just go for it. Yeah. So yeah, I think that's pretty much it. - -48 -00:36:40,050 --> 00:37:33,960 -Wes Bos: Yeah, I have one more tip I probably have is, like you obviously need, you need an audience for this to work. You need a group of a couple thousand developers who love what you do. And and you can make a living off of having, I would say you can probably make a living off of having 2010 20,000 people watching the stuff that you do and and really enjoying it. So building that audience and then also figuring out how you can actually reach that audience. So I have multiple touch points through the audience. Twitter is a big one for me. Email is by far the biggest one for me. This podcast is another one YouTube videos are another one. Facebook is another one making sure that you have all these different touch points. Because when you have something to say, and when you have something to sell people, you should be able to contact them fairly easily. - -49 -00:37:34,770 --> 00:37:40,710 -Scott Tolinski: Yeah, good tips. I mean, we got to do we have several episodes on our to do list about business stuff. - -50 -00:37:41,460 --> 00:37:59,960 -Wes Bos: Yeah, if you want to hear more business stuff, Scott, I will put on our suits. And just tweet us or fill out this form with your specific business questions. Because I love talking about this kind of stuff. We should actually wear suits. When we do that episode. I just got a new one. I went to a wedding this weekend. So watch out nice. - -51 -00:38:00,170 --> 00:38:08,400 -Scott Tolinski: Let's take a break here for our next sponsor, which is the fluent conference in San Jose, California. - -52 -00:38:08,400 --> 00:40:01,440 -Wes Bos: So fluent is a conference put on by O'Reilly, you know, O'Reilly they have the the books with the animals on the front, they teach you everything about everything. I think they cover absolutely every programming topic, but fluent is a web development conference. And it covers all topics from JavaScript, CSS, security, everything you need to know for becoming a better web developer. And this is a absolutely massive conference. Let me I'm gonna go to the speaker's page here and, and take a look at there's probably 40 different speakers that are speaking at this thing, they have multiple tracks. They have multiple days, they have training in the days before June 11, to 12 is training. And June 12 214 is the tutorials and the conference. So if you are looking to both like reignite that spark, like you want to get motivated and toss yourself into different pieces of web development, as well as really just like find some of the titans of our industry and suck all of the knowledge out of their brains into yours is a fantastic spot for you to go and start to learn new things. I'm just looking at the the speaker list here. And there's all kinds of amazing people who are going to be speaking at this sort of thing and not to mention, like even just the amount of people that you can meet, like some of the best relationships that I have right now are through meeting people at conferences and, and some of the best things I've ever learned and, and being able to reach out to people for help is because I've met them at a conference before and you've developed and foster those relationships. So check out fluent conference and use the code syntax to get 20% off on your tickets. Awesome. - -53 -00:40:02,760 --> 00:40:03,650 -Unknown: Super cool. - -54 -00:40:03,980 --> 00:40:05,790 -Wes Bos: look good. All right, next one. - -55 -00:40:06,650 --> 00:40:50,760 -Scott Tolinski: I'm gonna hit one that is a just addressed to me here. Yeah, highlighted here so I can take that. This one is this one comes from France, or no, there's no and their fries fries Roz. Roz, right? Pres. Uh, sorry about that. I sincerely apologize for butchering. This question is, uh, how did you to gain renown in the developer engineering space? Wes has mentioned he blogged early on his career, Scott started level up tutorials. on YouTube. I'm curious to know how you went about gaining recognition expanding your reach in the developer community? Okay, I guess this is so this was just a just me. So looks like it's addressed to both of us. - -56 -00:40:50,850 --> 00:40:52,050 -Wes Bos: We can both take a stab at it. - -57 -00:40:52,080 --> 00:42:18,230 -Scott Tolinski: Yeah. So gaining renown. I'm gonna go ahead and say that I did not attempt to gain renown. And that was never a goal of mine. I don't even think I, I would say I have read. I'm not I'm in a podcast, I have a YouTube channel. But like, I don't necessarily think of myself as like a renowned developer, I still look up to a billion developers, right. So for me, it was all about creating content, content. First, I did everything for free on YouTube for years and years and years, just as not even a side gig, because people like to assume you make a ton of money off of YouTube ad revenue. And let me tell you, there is a drop, like it is a penny, you make nothing on YouTube ad revenue. So you know, I get comments all the time, like, Well, Mr. Mr. moneybags over there with his 2 million views or 20 million views. It's like, no, that's over the course of, you know, since 2012, and I have made no money off of it. So I, it's all been content first for me. And I just want to share this stuff. Because it's so frustrating to me when you have an issue, and you can't find anyone else talking about it. But you know, other people are experiencing that issue. So I like to make these videos and sort of share them for that reason. Primarily, the fact that I can now do it as a career is like all plus, plus, plus, plus, because that means I get to spend more time doing it. And I get to work on my own site. And I get to have this sort of freedom. But it was never ever about gaining recognition for me. Now once. - -58 -00:42:19,380 --> 00:44:23,490 -Wes Bos: That's awesome. Mine's a bit different. So I had been, like I said, I blogged early in my career with lots of lots of topics around JavaScript and CSS and WordPress. And I definitely did see the benefit of being well known. Not for the the fact of just for being famous or anything, because I think that's kind of a silly, a silly thing to go towards. But just because knowing that if you have some sort of audience, then your options for a career are much greater. Like I remember watching, I used to watch the jQuery podcast with Paul Irish on it. And all sudden, he got a job at Google. And I was just like, This guy has been blogging, blogging about information about web development, and really involved in html5 boilerplate. Very, like very influential in the community for just straight up helping people do better at their job. And that led to him getting a job at Google or a same thing for less money it owes money would go to conferences all over the world and, and help people better understand things. And he just broke it down in this way that was just just really made sense. And, and I look at people like Chris coiour. And he would just day in day out blog stuff about CSS that he had learned and wanted to share with other people. And so all three of these people who I looked up to, they all were just trying to help people learn web development, right. So I thought like, That's amazing. And they're doing what they love. And and part of the reason behind that is because they're able to amass such a following so I made a pointed decision to really double down on on Twitter, posting Hot Tips is mostly how I've got my my following on Twitter is just by I don't know, maybe it's been about five years of Hot Tips so far. Were - -59 -00:44:24,510 --> 00:44:25,500 -Scott Tolinski: top tips. A lot - -60 -00:44:25,500 --> 00:44:31,680 -Wes Bos: of Hot Tips. I think I like calculated at once and it was well over 300 how many degrees are - -61 -00:44:32,339 --> 00:44:35,790 -Scott Tolinski: Celsius degrees Celsius? Is that of Hot Tips? - -62 -00:44:35,939 --> 00:45:17,130 -Wes Bos: Oh, is it? That's it? Uh, well over 100. Yeah, yeah, well over 1200 by degrees Celsius. So it's pretty spicy. But like, I just decided like, Okay, if I'm going to make this work, it's going to take years, but I'm going to just keep helping people keep posting stuff on YouTube, keep blogging, keep posting Hot Tips on Twitter. And if you do Do that for long enough, then it starts to build and and then it builds and builds. And that momentum that you get is is unbelievable. Like it's brutally slow at first and then then it starts to just the ball starts rolling and rolling and then it it gets bigger and bigger. Right? - -63 -00:45:18,090 --> 00:45:20,610 -Unknown: Yeah, you bet. So - -64 -00:45:20,670 --> 00:45:52,020 -Wes Bos: that's the way. So it's a little bit weird to talk about just because like, I don't know, what is being renown in our industry. There's I don't see, I don't know, there's a lot more. How do I say this? There's a lot smarter people in the industry who, who don't have as much of a platform that I do. And I definitely know that there's a lot of people working on much harder problems than me, they're doing much better stuff in the industry. And that's great. But I know that like, I'm trying to help people learn stuff. And that's, that's what I'm gunning for here. - -65 -00:45:52,050 --> 00:46:08,820 -Scott Tolinski: Yeah, yeah, absolutely. Yeah, I don't think it's something to ever I mean, it your platform is being used for good. You know, that that's all you got to worry about. Exactly. Cool. Okay, what do we got next? Well, who brought something else the potluck? - -66 -00:46:10,740 --> 00:50:07,920 -Wes Bos: taught let's talk about server side rendering. What IS WHAT IS IT pros and cons? Okay, so we've talked about this a little bit, it's fresh in my mind, because I have been working on the server side rendered aspect of, of my advanced react course coming up. And server side rendering is essentially, you run the JavaScript on the node portion of your web server, and render it out to HTML, so that when someone visits the website, they immediately get just HTML. And rather than getting a blank page, the JavaScript downloads, and then and then you get the HTML, which is rendered out from your react app, or your view app, or whatever it is. So there's that. And then there's this, this whole concept of like rehydration, where your your client side will pick up where the server side left off. So react is very good at that where you can do your first render on the server, and then react will pick up the HTML from there, and then start just re rendering the pieces that it specifically needs to so why would you server side render, it works without JavaScript, if you want, SEO is still a big one for people. Because even though Google says that they index JavaScript based websites, I don't believe it. And I know that SEO is huge for me, I get 10,000 visits a day on my website, and there's no way I would gamble that with without using server side rendering. So if I was building a website today, I would definitely and I am going to be rebuilding mine, I'm going to be server side rendering it because I don't want to lose any of that Google juice or that that traffic that comes in pros and cons. Mine, my own pros, it's great SEO, it's really fast it is that initial load, you don't get, you don't get that flash of white for a split second, while the page loads. cons are that it's sometimes difficult to get set up. If you try to do server side rendering yourself. Good luck. It's incredibly difficult because you have to replicate your entire build process on the server as well. There are things like next j s, which make it so much easier for you, if you start with next jass, then everything becomes a lot easier. That's that's really important there. it's sometimes hard to consider the server when you're building components. So sometimes components will call the window or call local storage, or call fetch. And all three of those things don't exist on the server. So you have to do this whole type of window is undefined, to check if it's there in your code. Also, one other thing I run into is I'm using JW t, which is JSON Web tokens. And that does my authentication for my users. And I'm storing you can store jvt in cookies, or you can store JW t in in local storage, and I'm storing them in local storage. And the downside to that is that that doesn't come along with your initial page request. So you can't do any sort of client side authenticated rendering on the server, because the data we teach doesn't come along with it. So what I have to do is, as soon as the page loads, I have to refresh the little bits that possibly could change if the user is logged in. So that's a bit of a downside or upside, but it's not a huge deal. Because once the page is loaded, you never have a page reload for the entire application because it's all pushed state and whatnot. So That's my long little rant on SSR. I think it's definitely worth it. I can't wait for the day that we don't have to care about it. Yeah. What about you? - -67 -00:50:07,950 --> 00:52:03,360 -Scott Tolinski: Yeah, I mean, I echo everything you said exactly. I was every time I was like noting something in my head. Oh, I should talk about authentication. I should talk about this. You You got I think you covered all the bases. I think that was the one of the biggest things for me is still is dealing with authentication and rehydrating Right, right. For me, I'm getting like, occasionally errors on the front end saying like, hey, and react this component expected this. But now it's getting this And specifically, because of, well, the authenticated client version, when it's rehydrating is now bringing in more views or more, more HTML. So it definitely isn't as easy as it could be. I use Meteor for my build tool and meteors build tool handles both your your server and your client. So in that regard, like next j s, it makes it really easy. You just simply have to write your, your server side code to say, hey, render this. And it pretty much handles everything for you. You don't have to worry about your build tool about things talking to each other, have all my data coming in from graph qL server side rendered. So I use server side rendering for level up tutorials, I really enjoy it, I wish it was as easy as just flipping a switch. Again, you expect some things to when you first start using server side render after building client side app to all of a sudden be a little bit more difficult, like, again, like unexpected things where you're calling the window and you forgot that you were doing that. And then it's all of a sudden the server doesn't recognize a window or undefined or whatever. So there's definitely things to be aware of. But server side rendering is getting easier all the time. And I think it's just one of those things that is eventually going to become one of those things you don't even have to think about worry about and platforms like next j s just make that super, super painless. So yeah, I'm a big fan use it, we'll continue to use it. I think there was like an episode where I didn't use it in syntax already. But I like changed. It rewrote, rewrote my server side rendering thing like the day after we recorded that episode. So that's how it always happens. - -68 -00:52:03,390 --> 00:52:49,050 -Wes Bos: That's the beauty of this podcast, though, is because like we clearly don't know much of what we're talking about. But as we sort of riff on it, we either get ideas between each other, or people much smarter than us will tweet us and say like, Hey, have you checked out X, Y, or Z that might be a good solution to your problem. So basically, this podcast is just us airing our grievances and getting people much smarter than us to help us out for free, though little little trick. That's the truth. Um, I got one more quick one before we finish. There's they're coming in right now all these questions that I tweeted out right before the thing is, is Yeoman dead? So Yeoman is a Yeoman is a lightweight, like a generator for boiler - -69 -00:52:49,440 --> 00:52:51,690 -Scott Tolinski: stuff? I actually just used it this weekend. - -70 -00:52:51,750 --> 00:53:45,720 -Wes Bos: So so it's not Yeah. And so like, if you wanted to, like start a quick WordPress, there's like a Yeoman generator for WordPress, or you want to start a, you know, create react app is like a generator. So it's something like that. And I don't think it's dead. It's not as popular anymore, because a lot of tools are starting to replace it. And I just saw the other day on Twitter that NPM is getting the ability to do these sort of generated, so you'd be able to type I think it's NPM, create react app interest, and then it would just like you, you push a create react app to to NPM. And then it will, it'll scaffold out that app for you. I know, yarn already has the ability to do that. And it looks like NPM is now getting to get it. So I don't I don't think it's dead. But it's not not as popular as it used to be just because of its like, jQuery is just out of need. I don't think it's as popular anymore. Yeah, - -71 -00:53:45,750 --> 00:55:12,810 -Scott Tolinski: I used it for creating a I created on a Saturday or Sunday, I forget which day I created a a snippet library for react and Apollo just I was like, so tired of, of importing mutation, and then writing my mutation with the render prop and I was just so tired of that. I was like, Okay, let me go to VS code and check out the snippet library. Oh, there's no snippet libraries. Well, I guess I'm making one. And I was so psyched to find the Yeoman VS code plugin generator, because Ah, awesome. It's not it's like, when you load it up. It's like, do you want to make a snippet library? Yes. Okay. And then that's all you have to do. Like, I had to do no work to build the snippet library. I didn't have to do a build tool. And if you think about it at all, I just used the Yeoman generator, use the one that said snippet library and was good to go. But there was like a ton of different templates that you can start out with for vs. Code extensions. And for me, as someone who is like, if the barrier to entry is too great, I'm just going to be like, yeah, screw it. I didn't want it that bad. Anyways, I'll copy and paste it. But for me, it was just so easy to get up and running doing that, but I just did it no time. Got it up there. And now this thing exists. And if you'd like you can contribute to it and check it out. It's on my GitHub. It's the React Apollo snippet library. Yeah, I just did it, you know, pretty quickly. So the chances are, there's some things missing for it. But I just added all this stuff I use all the time. And if you have stuff you want to see in it, please submit a pull request or be psyched. - -72 -00:55:13,739 --> 00:55:27,900 -Wes Bos: nifty. All right. I think that's enough questions for today. Thank you so much for sending those on in. If you've got another one, please make sure you push it into the listener questions. I like doing these every now and then. It's kind of fun to talk about these these smaller little topics. - -73 -00:55:27,929 --> 00:55:30,330 -Scott Tolinski: Yeah, really successful potluck. - -74 -00:55:30,989 --> 00:55:49,500 -Wes Bos: Everybody. A lot of it reminds me of having beers at a conference where you just kind of chit chatting about different topics that may come up. Yeah, but let's, uh, let's move on to some sick pics. I'm really excited to hear more about your sick pick today after you teased it earlier. Yeah. - -75 -00:55:49,709 --> 00:57:14,130 -Scott Tolinski: So my sick pick is Eat That Frog, which is a great name for a great book. And I listen to the audio book on this, as I do for most things. It's by Brian Tracy. And it's basically a book about accomplishing your tasks stop. Okay, the the subtitle of the book is 21 great ways to stop procrastinating and get more done in less time. So thank you, for who submitted that question. Let me see. Um, thank you, critter for submitting that question. goes along with Eat That Frog I suppose. But because you did a nice little lead into my sick pickier. This book is awesome. It's another one that you can breeze through like getting things done. And it will have profound impact. I had my wife Courtney and I both read it. I read it and I was immediately like, you got to read this. And then now we talked about this all the time we talked about Hey, did you eat your frog today? Like it's funny because it's like actually become a point of conversation and become like a point of normalcy in my life. But I really really like this method. Because before I had this method again, I wasn't. Well, this combined with getting things done has just made my my workflow my procrastination stuff totally out the door, as long as I follow the stuff in this book. So I'm a huge, huge fan. Pick up the audiobook, listen to it, pick up the book, if you like to read but Eat That Frog exclamation. Wow. - -76 -00:57:14,130 --> 00:59:00,450 -Wes Bos: Can I put this on my I have so many audible credits. So I'm putting this on my list of Audible, wicked. So my sec pick today is dev Doc's dot IO. Again, you remember? What was that like desktop app dash that everybody had? That was pretty nifty, because you could just like download the docs to every single thing ever. And then you could have it as a desktop app. So I always like the web developer Am I like to have things as a website if I can. And dev Doc's dot IO is a website that lists Doc's for every single language and and many of the different. Many of the different things that you have. So Babel backbone, React Bower, Bowers is not much anymore, Drupal, WordPress, Ember, you get the point. So if you need documentation for anything, they pull them into this single website called dev Doc's dot IO. Now, this has been around forever. But what I recently discovered is that I went on a flight, and I needed the docs to jest an enzyme, and I needed all the JavaScript docs, right? So I needed those big three, and don't think that they had enzyme. It might No, they don't, they don't they have, they have jest. There's a pull request open for adding enzyme Doc's to it. But it's a progressive web app, meaning that it will store the docs offline. And if you just turn off your Wi Fi and turn off the network requests, then it automatically still works when you refresh the page, and you're offline, which is exactly what you need when you're on an airplane. So check it out at dev Doc's dot IO. - -77 -00:59:00,690 --> 00:59:27,030 -Scott Tolinski: Yeah, I have used this so many times on airplanes before it's like what am i pre flight rituals is to head to dev docs and make sure that I have everything saved for offline that I could potentially need. Because there's there's nothing worse. When you're like on a plane. You're like, God, dang it, if I could only remember what this method was. Yeah. So I actually really love this this website. So that's a I used to have a - -78 -00:59:27,660 --> 00:59:36,450 -Wes Bos: base to have like a alfrid extension to directly search dev docs. And then it would pop it open directly. I don't have it right now. I get deleted a bunch of them. Get it again, though. - -79 -00:59:37,230 --> 00:59:39,230 -Scott Tolinski: Yeah, Andy. super handy. - -80 -00:59:40,590 --> 00:59:45,540 -Wes Bos: Quick, yeah. What about I what we call them shameless plugin list bugs. - -81 -00:59:45,570 --> 01:00:36,900 -Scott Tolinski: I'm gonna shameless plug the level up tutorials pro level up Pro, which is the subscription account where you can get access to all of my tutorial series. It's becoming more and more valuable than ever, because every single month there's a new Premium tutorial series. This month's coming premium tutorial series I mentioned before is modern WordPress where we do all headless WordPress stuff. last series was Vue. js for everyone. So if you got excited by us talking about view today, you could check out Vue JS for everyone and find out what the hype is about as a pro Gatsby, which will teach you how to build static sites with Gatsby like a pro Redux and react for everyone modern CSS layouts level to React Native with graph qL with React Native for everyone. There's a lot of stuff here, and every single month is a new series. So a lot of value there. If you've never subscribed, you get access to all that stuff right away. - -82 -01:00:37,830 --> 01:01:27,930 -Wes Bos: Wicked, is gonna plug Wes bos.com. forward slash courses has a list of everything you have, if you want to learn node or react or up your JavaScript skills in e6, there's a bunch of free ones, CSS Grid, JavaScript 30, check them all out. I'm currently still working on my advanced react course. There's been a lot of movement in the whole graph qL space in the last couple months, around different libraries and whatnot. And I'm sort of just I'm still working on the application, but I'm making sure that everything is going to be settled down for at least a little while. So it is taking a little longer than I had hoped. But I am totally fine with that. Because I know that it's going to be fantastic. So stay tuned for that. Probably in another month or so I'll have that ready to launch. - -83 -01:01:28,050 --> 01:01:35,370 -Scott Tolinski: It was I got it. I got a request here. You stop making the show about the great Wes Bos, please. - -84 -01:01:38,610 --> 01:02:08,820 -Wes Bos: Somebody tweeted that the other day. Like I just like I had updated people on this react course. I'm like, so sorry. It's taking so long. And then somebody said, Can you stop making it about the great Wes Bos? Oh, some that. I guess that's another point on the having a bit of an audience you do get some wacky people coming out with some wacky people some mean things to say someone's question here too. What was the question about you? - -85 -01:02:08,970 --> 01:02:12,750 -Scott Tolinski: Oh, I say I say something too frequently. And that was upsetting them. - -86 -01:02:13,319 --> 01:02:17,280 -Wes Bos: Love the podcast. But Scott, please stop saying and stuff like that. - -87 -01:02:18,420 --> 01:02:54,420 -Scott Tolinski: I hope I didn't say this episode. If I said this episode, I'm gonna be disappointed in myself, because I was actively trying to appease here. So I was very, it was very concerned effort to not say that. But in the future, who knows that somebody actually had some guy, I assume it was a guy send me a message every single week. That was just like a homophobic slur for some reason. Like, I have no idea. It would be from some who knows email I would just get it was obviously the same person cuz they weren't very creative. But it would just be like a one liner. Be like, okay, like, thank you. sending me this. - -88 -01:02:55,560 --> 01:03:29,340 -Wes Bos: There's definitely some oddballs out there. I guess it comes with the comes with putting yourself out there. Yeah, for sure. Maybe we'll talk about that. Because that's another thing, which is like, putting yourself up on YouTube. And, like I daily post code that I write online for other people to judge. Yeah. Which is not always met with the best reactions. People have opinions on what's good and what's not. So it definitely, it can be a little bit scary. putting yourself out there, but definitely worth it. Yeah, we'll we'll have an episode like that dealing with criticism. - -89 -01:03:29,640 --> 01:03:35,880 -Scott Tolinski: Yeah, I think we should. There's a lot of stuff there. And I think we've both probably learned a lot of lessons over the course of the years here. - -90 -01:03:36,390 --> 01:03:37,620 -Unknown: totally sick. - -91 -01:03:37,620 --> 01:04:35,370 -Scott Tolinski: Alrighty. Well, thank you so much. Oh, we should mention, we never do this. But we we are What does episode like number 42. Now of syntax. Yeah, we have a ton of episodes, we have 42 episodes now. And we cover a lot of topics from graph qL to soft skills stuff. I mean, I can't even jQuery static site generator, site performance, all sorts of stuff dealing with failure, lots of questions and answer show. So if you enjoy this show, are you enjoying the most recent shows, check out our back catalogue, we got a lot of good stuff. We get a lot of questions asking us for topics show topics that we've already done before. So check out our back catalogue because there's a lot of good tasty treats there, too. We need to make some sort of Best of list we'd be interested to know what your favorite episodes are, so that we can compile some sort of like here, come to syntax and listen to these 10 episodes. If you haven't ever listened. Yeah, yeah, totally. - -92 -01:04:35,400 --> 01:04:41,130 -Wes Bos: So tweet us your your favorite episodes from the back catalogue and we'll come up with a little list. - -93 -01:04:41,160 --> 01:04:42,390 -Scott Tolinski: Yeah, that'd be sick. - -94 -01:04:43,020 --> 01:04:46,020 -Wes Bos: Sick. All right. We'll see you next week. Thanks for tuning in. - -95 -01:04:46,140 --> 01:05:01,140 -Scott Tolinski: They he pays. Well, that was a coordinated piece. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review and If you like this show - diff --git a/transcripts/Syntax43.srt b/transcripts/Syntax43.srt deleted file mode 100644 index 840874e8f..000000000 --- a/transcripts/Syntax43.srt +++ /dev/null @@ -1,364 +0,0 @@ -1 -00:00:01,319 --> 00:00:22,109 -Scott Tolinski: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott solinsky and West boss. Welcome to syntax. The podcast with the tastiest web development treats around with me, as always, is Wes Bos say What's up? - -2 -00:00:22,229 --> 00:00:23,520 -Wes Bos: Hey, everybody, - -3 -00:00:23,669 --> 00:01:24,420 -Scott Tolinski: hey, this episode, we're gonna be talking all about array methods and object methods, we're going to be doing some of the ones that we feel like are very, very usable things you should be using, you know, somewhat frequently stuff that's going to improve your life stuff that's going to make your code more readable, easier, all that good stuff that comes along with these methods, we're going to be going just a little bit about what they do, maybe why you might want to use them, what they return, what the benefits are all that good stuff. And this episode is sponsored by Freshbooks credit, which is amazing. And cloud accounting software, as well as Netlify, which is honestly one of the, you know, possibly one of my favorite services of all time here at this point. I tweeted about it the other day, and someone was like, Yeah, but they're your sponsor. I was like, Yeah, but I, you know, found Netlify first and then reached out to them and was like, I love your service. I absolutely love this thing. So any words or comments you hear from me talking about Netlify? Is 100%, my .js. - -4 -00:01:25,500 --> 00:01:49,830 -Wes Bos: funnier, I would say probably about half of our sponsors are companies that we use ourselves. We praise like I have no no problem tweeting out being like this company is amazing. Like it's super good. And then they often say, Oh, we just got a bunch of signups just from you like that happened with cloudinary and a couple others. And then they come on and sponsor full time because they realize that this audience is awesome. - -5 -00:01:50,010 --> 00:01:57,840 -Scott Tolinski: Yeah, for real. And we're just genuinely excited about this stuff most of the time. So yeah, that's really just did so how are you doing today? Wes, - -6 -00:01:58,230 --> 00:02:16,160 -Wes Bos: I'm doing great. I am going to New York tomorrow morning. For generate cough I'm doing a react like an intro to react to workshop on Wednesday, and I'm doing a talk on Thursday. And then we got a day on either side to to hang out and enjoy New York. - -7 -00:02:16,169 --> 00:02:42,870 -Scott Tolinski: So I'm pretty stoked about that. Beauty. I'm actually heading to SF San Francisco, this weekend to talk at Site day. Talk on learning on a lot of people ask me like, what's up? How do you learn a lot of stuff so fast. And we'll be doing an episode on that too, after this talk, maybe cover a little bit what I go over in that talk. But I'm really excited to be out there. So if you're outside day safe, just go. Come say hi, I will be there and hanging out. - -8 -00:02:42,990 --> 00:04:17,880 -Wes Bos: Yeah, wicked, man. We are world travelers, or at least United States travelers. Yes. Wicked. Alright, so let's get on into it. We've got I think I've got I counted like 20 different things. And I think that this episode is going to make you a better JavaScript developer. In my wiscon, I always talk about our love for all the array methods. And often we get people being like, what are they can you do an episode on it. So this is the episode where we're going to rattle through 20 different methods on arrays and objects that you should know. And it's gonna make you a better developer, you probably know a handful of these, hopefully, there's a couple that you either didn't know about, or a couple that we can use in a way that you never knew about. And they'll just make you a better, more well rounded developer. So let's open it on up. And maybe that we should talk about that real quick as well. Like, why are these methods so great that we're all talking about. And I think that it really boils down to two things. So you can kind of keep this in mind as we go through them. First, all of these are chainable. Meaning that if you need to first filter a list, and then transform it, which we're going to talk about in just a second via map, then you can chain them as as long as you want. And it's great because often you need to do three or four things and sort of pass them through, talk about the machines, again, pass them through four or five different machines. And you don't have to do it all in one big confusing loop, you can sort of think through your process in six or seven chained methods. - -9 -00:04:18,200 --> 00:04:29,970 -Scott Tolinski: Yeah, and many times you end up using Yeah, you end up using them, either just one or a couple, but it doesn't matter. Because once you start chaining them, you start really seeing how powerful they can be back to back to back here, - -10 -00:04:30,360 --> 00:05:20,880 -Wes Bos: totally. And then the other benefit is immutable. And we've talked about this on the episode before but I mutation is when you reach into a object, an array, a string, something and you reach directly into that variable, and you directly change the data. And that's called the mutation and in functional programming, it's very popular in react land. It's the reason why we call dot set state instead of just reaching directly into state and changing values. And that is because we know ever want to modify the data directly, you always want to just make a, like a copy, or you always want to return a new data and then put that into state or you always want to return new data and put that into Redux store. And, and and that's what's beautiful about everything we're talking about today is that they never hurt the original data. They just make new data that is the modified version of it. - -11 -00:05:21,120 --> 00:06:34,380 -Scott Tolinski: Yeah, yeah, absolutely. I like the first one on the list here that we have is filter. And I love filter for a number of reasons. But I use filter primarily, as you tweeted out, it's like a poor man's search, where you can have a dot filter method on an array, you could have some sort of state coming in from your search. And as you're typing, you could have it filter through a number of items in your array, and I use this on the level of tutorials site for anytime I need to search their data that's already there. If I have the 50 to 60, some tutorial series on the on the channel, if you start typing in there, it's just using a filter method to filter which items are shown. So filter is a method on the array that has a callback and in that callback, you get to determine what is the the item that is going to be either filtered or passed through, you can do any sort of conditional anything in there that just returns a true or false. And that basically allows you to and what it does is it outputs a whole new array based on whether or not those conditions are met. So you end up having a brand new array at the end of it that has been filtered by whatever these conditions are. - -12 -00:06:34,680 --> 00:08:46,669 -Wes Bos: Awesome. Yeah, that's a great explanation. I always tell my students when I'm teaching filter, it's it's sort of like a little machine where you a lot of these array methods are sort of like a machine where your your raw material goes in one end, and then the machine is the method itself. And in this case, the filter is just a sort of like a paddle where you that you can you can run a conditional you can check if something is there, you can check if the number is greater than 100. You can check if a property has a specific property that you're looking for. And then you can either keep it or return true or return truthy, maybe we should talk about that real quick. What does truthy and falsy mean? Because in JavaScript, if you have an if statement, you can obviously check if something is equal to true or you can also check if something is greater than 40. And that will return a true Boolean but you can also use truthy, which means that there are other values in JavaScript that are equate to true meaning that like a string, with text in it is truthy, it's not true itself, but it's there. So it's truthy, a string with no text is not necessarily false, but it's falsie. Right? Same with a zero is false. See a one or any other number is truthy, there's a couple other ones that are undefined is falsey. No is falsey. So it's good to good to have those things. All right, next one up we have is map. and if we talk again, about the whole machine map, we'll take in an array, let's say you have an array of four items, and it will modify that array and spit out an array on the other end, that is your modified item. So basically, what you're doing is you're taking in a list, I always like to give an example of you take in Scott, and Wes and Snickers. It's an array of three strings, it goes through your map. And then at the other end, it's going to return an array of three things. And the map could add is cool to the end of each one. So you take in Scott West Snickers it will spit out Scott is cool West is cool. Snickers is cool. So any single time that you need to do a little bit of data massaging changing the data, changing what it looks like removing items from the data, it's always the same amount of items that's being returned. But they're always massaged or changed in some way. - -13 -00:08:46,740 --> 00:09:39,330 -Scott Tolinski: That's what map does. Nice. Yeah. And again, we see this a lot in react. Because, you know, again, people sometimes think that you use dot map to loop over your data and react because that's essentially what you're end up doing. But all you're doing is you're creating a new array full of your data with the JSX in it and returning that array. And then react is just outputting that array. So you're not really doing like an mg four or something like that. It's it's actually making a new array. And that's why it's useful in that regard. So you know, dot map is one of those ones you use a lot for stuff like that, but you end up once you just realize that well hey, if I have an array, and I have a need a new array, and it needs to be based on the previous array, but different for some reasons. Yeah, map starts thinking like the right option for you. Right about then. I use map a whole heck of a ton. So definitely one of my most used array methods here. - -14 -00:09:39,630 --> 00:09:42,360 -Wes Bos: Yeah, I would say it's, it's my top used one. I would - -15 -00:09:42,360 --> 00:11:20,340 -Scott Tolinski: say it's my top use one too. Yeah. Next we have one that's really important and very useful, but often overlooked in mostly just because I think people can find it to be a bit confusing. Just because of it's a little bit I would say it's more complex is not really that much more complex. Once you get Use to it or use it. But I'm talking about reduce. Now reduce is going to be something that it doesn't necessarily return an array. I mean, it can return anything, right? Yep. Yeah, so reduce, unlike dot map or filter that are automatically returning arrays. This one's a little bit different. And I think the best way to think about this is to look at some of the properties, one of which is frequently referred to as the accumulator. So this thing is accumulating based on the information you're passing into it, I use reduce to generate totals and subtotals. From shopping cart values, right? If you have an array of five totals from the last five orders, or whatever, you can reduce that number down by simply adding the value to the new value to the old value, whatever, and then getting the the total value out of that. And so that's what I used to reduce a lot for, it's basically taking in an array of information with its objects, whatever, and then accumulating or using that information to return a single value. But that I mean, that value could be anything, it could be an object, it could be array that you create yourself, or something like that. But I like to go back to the example of a subtotal or a total from subtotals isn't the nice way, I like to think about it the most - -16 -00:11:20,370 --> 00:13:03,899 -Wes Bos: Yeah, you take in an array of products. And for each one, you just take the price off of that product, and then you add it to the sort of the running tally of that one. Another thing I like to use it for Is it let's say I have a string. And that is a transcript of this podcast. And I wanted to know how many times I said sweet in the entire podcast or how many times they use specific words, what I would do is I would take the entire string of this podcast, I would split it, which turns, it would split it on a space, meaning that it would turn every word I've said into an array of a huge array, and then you can reduce over it and start with an empty object. And then for every single item in that array, you sort of log how many times that word has been saying. So you take the you take that empty object and the first time I say hello, so you say hello is equal to one. And then I say my, and then you say, on that you on that object, you put my is equal to one. And then if I say hello again, then you just say, Oh, I already have that key of Hello, let's just increase it by one. And then you run that through the entire array. And then at the end of the, at the end of it, you don't have a number, you don't have an array, you have an object where every single word is a key in the object. And then every single value is how many times those words have been saying. So if you ever want to tally how often something has happened, reduces perfect for there's all kinds of use cases. For this, I've even seen people use it in if you want to sequentially run promises, you can take like, let's say you had an array of data, and each one needed to happen one after another, you can reduce each of those into a promise. And then and then just fire those off one after another, which is pretty, pretty nifty. So there's all kinds of great use cases for it. - -17 -00:13:04,140 --> 00:14:30,270 -Scott Tolinski: Yeah, and I think a good place to go. I mean, even just the developer.mozilla.com. And then just looking at the the array function, or the array methods here and seeing the reduce, they have a plenty of different examples. So if you're thinking like, I guess I get stone, I just don't know why would use this, check out these examples. Because these are a lot of very real world examples, including that promises, example, Wes was just talking about, but also a lot of really cool other stuff, too, that could get your mind working. And sometimes you might be trying to do some code, and it might seem complex, and then all of a sudden, you're like wait, would reduce work here, maybe reduce work here. And I think at that point, you should just start trying it. Because honestly, this stuff will save you so many lines of code, I actually went back and looked at some code that I had written for a project maybe like maybe like three or four years ago, and it took up so much space, it was hundreds of lines of code in JavaScript. And I swear I just demolished that into a couple of lines, array methods. And I just remember being like, dang, I was really bad at this. But I guess, you know, these things weren't out there, you had to use lodash, or any of that stuff underscore to, to really take advantage of a lot of this stuff. And that's actually one of the benefits of these methods, too is they're removing the need to use a library like lodash to do a lot of this stuff now that they're native into the browser. So that's just a advancement, advancement advancement - -18 -00:14:30,539 --> 00:15:34,260 -Wes Bos: you had to fall. Next one we have is dot for each now a filter MapReduce, these are all loops, they all loop over all your items in an array, however, for each is also a loop that does not return anything. So in all of the previous examples, we've always wanted to take in data, do something with that data and then return some other sort of data we've got for each is great when you have what's called a side effect when you need to actually do something with each piece of that data and the most simple example I can think of is if you're selecting a list of buttons in vanilla JavaScript, you do document dot query selector that will return you what's called a node list. But it's kind of like an array. We can talk about that later episode. And you can call dot for each on that node list. And you can loop over every single element. And then for each of those, you can attach an event listener saying, like when this thing is clicked, I can run it. So if you don't need to return any sort of data, then you need to reach for each. However, if you do need to return some sort of data, then you reach for filter MapReduce. - -19 -00:15:35,250 --> 00:15:41,370 -Scott Tolinski: When was the last time you wrote like a for loop? Like ever since for each came out? I have not touched for loops. - -20 -00:15:41,370 --> 00:16:08,520 -Wes Bos: No, I think anytime you find yourself doing like you set a variable that's empty, and then you open up a loop, and then try to reach outside of that, that function and updating that external variable, there's probably a better way that you can do it with filter MapReduce, because that's one of the big beauties of all of these array methods is that they're self contained, meaning that they don't ever have to reach outside of their own function to get data that that needs doing. - -21 -00:16:08,909 --> 00:17:39,540 -Scott Tolinski: Yeah, absolutely. Cool. Yeah, I mean, I love and use for each all the time. Again, anytime I would have thought of making a loop, I just jumped to four h so much easier, it's less code, it's more readable, a lot of good stuff about it. And Okay, so the next couple of ones, in my mind a little bit deceptive in their name. Like that, we have some and every which are kind of similar. I'll talk about some specifically. But some seems like it should be doing something a little bit more, I guess. But that's some what it does. Here's a perfect example, if you have, let's say an array of five numbers here, you do dot sum on that array, and then you have a condition to check whether or not those numbers are even, it's going to tell you if some of those numbers are even, it's going to return a true or false. So if you have an array, that's five values that are all odd numbers, and you do some and then you have your condition to check if it's even, it's going to return false. If you have one item in there, that's an even number, it will return true. So this is some, and I don't really find myself using some very much, but maybe I could find some ways, every is the exact same thing except for it's going to make sure that every item in your array passes that condition. And again, it's just going to return a true or false. So in this case, if you had an array that was four numbers that were odd, and then one number that was even and you were doing a check to see if it was even, it would return false because not every one of those is going to pass that condition. - -22 -00:17:39,800 --> 00:18:50,940 -Wes Bos: Yeah, here's an example of when I used it on my upcoming react course, I have a list of permissions that are available for someone to update an item, you can either be in a minute at an administrator, or you can have a permission on your profile called can update item. And then what I did is I would loop over the allowed permissions and check if the user matched some of the items, they don't need to have all the permissions, they just need to have one. So another good name for some would have been contains at least one or or not contains, but is at least one because you can you can run like you can run code inside of it to either return true or false. So in my ESX course, I use an example where we check if at least one person is over drinking age. So you have an array of people, they all have their birth dates of when they were born. And for each one, you can calculate how old they are. And you can return true or false whether their legal drinking age and you can you can make a variable says is at least one person legal drinking age. And that will be true or false, depending on the data that's passed in similarily. Every will check if every single person is of legal drinking age. Interesting. - -23 -00:18:51,080 --> 00:18:55,350 -Scott Tolinski: Yes, yeah, these are definitely ones I need to use quite a bit more, I guess, Oh, - -24 -00:18:55,350 --> 00:20:03,860 -Wes Bos: I thought I wouldn't. I because I've tweeted a lot of these out, I always find these generic or these kind of edge cases. And some can be used as what's called a short circuit for each, which is kind of nifty. Because sometimes you have an array of data and you're looking for one thing in the array and you want to you want to run some data on the first thing that you find. Like let's say for example, you want to you have a list of people and you want to appoint the team captain for the first person who is 20 years or years of age or older. What you can do with some is you can just loop over every single one. And as soon as you find that first one that is going to be true, some will stop running on the rest of the data because it doesn't care. It's some is just looking for at least one that is true. So you can use it as a for each loop that you can break out of early because a for each loop. If you've even even if you found the piece of data that you're looking for in your for each. There's no way to stop the for each from running whereas dot sum, you just need to return true And then the rest of the, the array will no longer be iterated over. - -25 -00:20:04,290 --> 00:20:08,360 -Scott Tolinski: Interesting. Cool. Yeah, I haven't I haven't used that before. That sounds uh, - -26 -00:20:08,430 --> 00:20:10,770 -Wes Bos: sounds pretty cool. Pretty nifty. - -27 -00:20:11,460 --> 00:21:46,980 -Scott Tolinski: Cool. Yeah. Pretty nifty. You know what else is really super nifty is Netlify, which is one. Today? Yeah. So Netlify is again, I tweeted out the other day, I mentioned this in the intro, I think I tweeted out that Netlify if if I'm going to host anything at this point, Netlify is the first place I'm looking to. And I'm going to strongly back that statement, because Netlify over the past few weeks, if I want to host anything, I think I don't even think anything else, I think now's the time that I fire Netlify and get this going. because let me tell you Netlify is the most seamless easy to use host that I have ever used. You can connect it right here repos, you can have automatic deployment, it works great with sort of front end code, static site generators, and that kind of thing. But the best part about Netlify is they have all these additional features that sort of remove any of the friction for any kind of server side stuff you might want to do. For instance, they recently launched something called functions, which are essentially AWS lambda functions without configuring the API gateway coordinating documents or setting up an AWS account, which let me tell you, that barrier to entry to AWS is enough to keep me to not want to use it. So the fact that Netlify has completely removed that now opens up serverless functions with absolute ease using Netlify functions. Now, in addition, they also have something new called identity, which allows you to manage signups logins, path password recovery, Oh, - -28 -00:21:46,980 --> 00:21:48,450 -Wes Bos: I know that, - -29 -00:21:48,480 --> 00:23:04,200 -Scott Tolinski: yes, it's authentication without having to have a back end. So now you can instantly add authentication to your front end code. Again, you don't have to have a server, it does it all with JSON Web tokens. Basically, easy, easy, easy stuff to allow you to work with user accounts. Now there are plenty more of these, we've talked on things like forums and stuff like that before to the best part about Netlify is it's free to get started. So you can check out Netlify get started, only pay for the functions, or the identity, or the forums for the actual work that you need to use. You're not paying for all these extra features, if you're not using them. So head on over to netlify.com forward slash syntax and sign up for Netlify. Today, tell them you came from syntax, if they're ever talking to you tweet at them, or let them know that you heard about it on this podcast. And yeah, I absolutely love this service. Again, this is 100% genuine, I don't think I could be this excited about something. If I if I wasn't legitimately this pumped about it. So I love Netlify I use this service myself all the time. In fact, my slides that I'm using for my talk this weekend will be hosted on Netlify. So too fast, too furious. netlify.com - -30 -00:23:04,890 --> 00:23:26,610 -Wes Bos: Beautiful. I'm really excited about this whole serverless functions thing, because I've tried a whole bunch of different serverless things and they all seem like a little bit more work than they should be. On Netlify I haven't tried it yet. It might be a lot of work, but I kind of doubt it because of their whole I don't know, they just they seem to make everything very easy. So I'm gonna have to check that out pretty soon. - -31 -00:23:26,640 --> 00:23:54,810 -Scott Tolinski: Yeah, yeah, the the barrier to entry is usually just like too much for me if I'm looking to be doing a hobby project to just say, yeah, screw it. I'm not I'm not gonna bother with it. But yeah, definitely some really exciting stuff going on Netlify. Also, they launched a in between the time of the last episode in this one, they lost a really do site design. That is beautiful. So check out that site design. I'm a big fan of it as well. Obviously, it seems like I'm a big fan of everything they do. But this is some some great great stuff going on. - -32 -00:23:55,260 --> 00:25:22,860 -Wes Bos: Wicked. Next up, we have array dot includes and this will simply check if you have an array and you want to check if a value is in your array. So you have a list of letters and you want to check if a W is in there, then array dot includes will check if it's in it. A lot of people always ask why is it not dot contains, like almost all other programming languages are. And it's because mootools you remember mootools from back in the day, remember mootools there's a lot of stuff going on with the mootools naming collisions going on to that was some high drama for a little bit. Yeah, they because they there's a kind of this thing in JavaScript where you say never touch the prototype, meaning like don't ever mess with built in, built in, like jQuery never touched anything that was built in. But what mootools modified an array prototype, and added this dot contains method. And if you if you're fairly new to JavaScript, modifying the prototype will allow you to add additional functions on to any array. So you can just call like, you could You could make a method called is West cool that you could call on any array. And you would just say like array is West cool. And it would always return true, right? So mootools did that, which was super handy. But now, they can't, JavaScript couldn't add it, because it would break a whole bunch of existing sites that have mootools on it, because it works in a little bit of a different way. So it is included and not contains. - -33 -00:25:23,190 --> 00:25:45,510 -Scott Tolinski: Nice. And so and also, if you are wondering, what's the difference between something like sum and includes right, because they're both going to return true if something's in an array, sum is based on a condition that you're writing yourself where includes is simply just you're passing in a string or a value, and it's checking to see if that value, you don't have to do any sort of condition checking or anything like that, instead of includes, - -34 -00:25:46,560 --> 00:26:21,150 -Wes Bos: I keep thinking of this, like, crazy thing, since I've done talks on this. And I always think of what questions came up, a question that always comes up is if you have an object, and you want to check if that object is in the array, it will not do what's called the deep check for equality, meaning that if you create two objects that have the same exact values, those are not the same values, that those are two separate objects. So it will only check if that original object is in the array. And it will not check if an object that looks exactly the same is in that array. If you need something like that, that's when you reach for something like lodash with some some custom methods. - -35 -00:26:21,450 --> 00:26:31,140 -Scott Tolinski: Yeah, yeah, I, these things have been totally invalidated lodash. For me, I still use lodash for some of their little bit more complex methods and stuff like that. - -36 -00:26:31,140 --> 00:28:10,320 -Wes Bos: Next one we have is array dot from. And this is what's called a static method, and not an instance method. A static method is something that lives not on every single array that you create everything we've talked about. So far, these are methods of any array that you've created. However, this one is on the mama array, the capital A array, and it's just array dot from, and what it will do is it will take anything that is, has a length, or I think is an iterable. And it will convert it to an array, meaning that if you pass it an object with just the length property, it will create an array with that many slots. And that's really handy. Because if you've ever wanted to say like, Okay, I need an array with 10 slots in it, you can just say array dot from pass an object with a length of 10. And then one other thing I know a lot of people know is the second argument to array dot from is what's called as a map function. So you can create in one fell swoop, you can create an empty array with 10 slots. And then you can fill each of those 10 slots with anything that you want, because you use the map method, or the map argument works exactly the same way as the the map method to fill those slots. So I've done this before, where if you want to create a leaderboard, and you want to just like leave them empty, or if you want to, I don't create an array of a couple promises, each of them using the incremented number, there's all kinds of use cases for it. And it's one of those you keep in your back pocket. And it just replaces a lot of those kind of older tricks that you've had with slicing and splicing arrays. - -37 -00:28:10,710 --> 00:28:29,880 -Scott Tolinski: Nice. I have not, I've not really used this, I'm not going to lie here. This is not one that I've spent much time with. So there is a lot of use cases where you do need to create an array of a certain length. And it's always nice to see a way to do that. That's nice and seamless. Super cool. Okay, nice. Did you have anything else on that from? - -38 -00:28:30,270 --> 00:28:56,490 -Wes Bos: Ah, I don't think so there also is array.of, which will take as many arguments as you want and turn it into an array. So if you have you just you call a radar of and you give it six arguments, it will return an array of of those six arguments that it sent you, I don't use that. I don't think I've ever used that. But you could, because you can, you can combine that with the the spread, and the rest operators for some some nifty stuff. - -39 -00:28:56,730 --> 00:30:26,430 -Scott Tolinski: Nice, nifty, nifty, nifty. Okay, so the next three are going to be some object methods here. And people often they want to work with objects occasionally, like they want to work with arrays. So some of these can help with that. The first one being dot values, which is simply just going to return an array of the values, right. And so if you need to get every single value from an object, right, just the values, then you would use dot values. And then you would have access to now an array full of just the values. And likewise, a keys dot keys is going to work the same, giving you just an array of all of the keys for each item in your array. Now there is a third one, which is going to be entries, which basically is going to put the key and the value into an array for your object. And you might be wondering, well, what's up with that? Why would I need to do that well allows you to easily do object data entries. Put in your object, then you do a dot for each on that. And then you have access to the key and value, essentially allowing you to iterate over an object, which is a question that gets Google the surprising amount of times how do I loop over an object? Well, this is how you use entries. And then you do a for each on that array. And then you have access to the key and value and you can use that key and values to do whatever you would like. - -40 -00:30:26,700 --> 00:31:11,100 -Wes Bos: Yeah, so it's, it's not something that you could never do before. But the beauty of entries is that you don't ever need to reach outside of that function, that for each or that map or whatever method you're calling after the entries, you don't need to reach outside to the original object to to use that as a reference. Because what used to happen is like if you had like keywords, where you say, hey, was said three or three times and sick was said 100 times, you can just dot entries over a keywords. And it will give you both the keyword that you said, sick. And the number of times that it was said 100. Right. And you don't need to do that whole like keyword square bracket key to reference the actual value of the object. Nice. - -41 -00:31:11,400 --> 00:31:20,010 -Scott Tolinski: Yeah, it's definitely one of those ones that will save you a couple lines here make your code a little bit more readable? Totally, I think sort of all of these are to be honest. - -42 -00:31:20,100 --> 00:33:25,500 -Wes Bos: Yeah, I think so as as at first, there's there's always pushback to these things, because people are used to doing a specific way. But almost all of these newer ones that we're talking about AR are brought to the language because of obscure ways that we used to do it. And a good example is next up is called array spread. And this isn't really a method per se, but it's a new thing in JavaScript, where you see those three dots most of the time, that can also be a rest, there's two things, there's a rest and a spread. But what a spread will do is convert any sort of iterable into an array. So if you have an array, and you have a.dot.an, actual array or any iterable, it will convert each of those items to items in the array, which is really nice. So what are some use cases for that, if you want to concatenate a bunch of arrays together, you can open up a blank array, and dot dot dot, the first array, dot dot dot, the second array, dot dot, dot, the third array, and if each one of those original rays had five items, you're going to end up with one array with 15 items in it, and it will sort of just concatenate them all together. Whereas with dot concat. Previously, if you want to concatenate more than two arrays, you're starting to add a lock B unless you use like a some obscure dot reduce with it. So I'm a big fan of concatenating them. Another big one is removing an item from an array. So if you have an array of comments on a blog post, and you want to remove one of the comments, how do you take an item out of the array? Well, we said earlier, don't don't splice your array, don't mutate the original data, return a new array, right? So what you could do is, I do this a lot in my Redux course, where you can open up a new array called like new comments, and you can slice everything before the comment that you want to get rid of, and slice everything after the comment you want to get rid of. And that will just take both of those things, put it into the new array, except it's a brand new array without the the comment that you're looking for. So big fan of that one. - -43 -00:33:25,830 --> 00:34:44,190 -Scott Tolinski: Yeah, these these end up making your code look at first, when you don't really know what they're doing, I think they can, they can make your code look a little bit more confusing. And once you really start to use them, and start to see how nice they can be. You want to use them all the time. And I find myself using these spread operators so much that because it does it makes your code way easier succinct. And once you understand what's going on there, it definitely makes it easier to read actually thought these used to create a, an array of strings, like an array of characters from a string on Reddit yesterday. I don't know if you Oh, yeah, do that. Yeah, I thought that was kind of I thought that was kind of fun. I don't know if I'd end up doing it. But uh, I thought it was kind of a fun use case, to see that you could even use the spread operator on a string like that. Now, the next one is going to be very, very similar. But with objects this time. It's with objects. It's the same thing, right? It basically allows you, you can concatenate objects, you can do all of the same stuff where you're grabbing all of the properties from one object and being able to put them into another object or do something like for instance, I frequently will use this if I'm passing along data into my server into a new object, maybe in an Apollo query or something like that. I find myself using this probably more than array spread. I think I use this more than a race Brett, I think, - -44 -00:34:44,210 --> 00:35:53,880 -Wes Bos: yeah, the the object spread is is amazing. And it just made itself into node and it's in all the browsers now. And it's it's really great because previously if you had wanted to merge two objects, a one example I have is somebody So you have like a function that has some default arguments. Or if you have something that has a bunch of defaults, like, let's say we're writing animation query, and you have like, you have speed, and length, and number of items that need to be animated, those are all defaults. However, if you wanted to overwrite one of them, what you can do is you can say like var options equals, and you can dot dot dot defaults. And that will take every item from the array, or sorry, that will take every item from the object and spread it into the new object. So take a copy of every top level, it doesn't do nested copying. So be aware of that. And then if you just write anything after that any properties that you're right later on will just overwrite any duplicates that have previously shown up in that object. So it's great to to merge things, or to set some defaults and overwrite anything extra that you'd like, - -45 -00:35:54,270 --> 00:36:32,520 -Scott Tolinski: nice. I love all this stuff I love. Again, it can look very foreign if you're not using it. And some people might look at that and start to not want to use it or not want to to explore it any further. But I definitely recommend you start trying these things out. Because once you feel like very comfortable with these things, you're going to really start to write some really, really nice code. So again, I'm just such a such a big, big fan. And so a lot of this stuff is we're accounting for our data here. But let's talk about another type of accounting. This is going to be our actual accounting. So let's hear a little bit about fresh books from Wes. - -46 -00:36:32,730 --> 00:37:33,780 -Wes Bos: So it is tax time and high five to all you freelancers who have filed your taxes on time this year, we've got a couple more days here in Canada to get ours in. If you are not on your taxes, you should listen up because freshbooks is awesome cloud accounting software for that. So I'll spare you the ounce of prevention, prevention cliche. But really, if you think ahead with these sort of things, what you can do with freshbooks is you can link up your credit card in your debit cards to your Freshbooks account, you can import all of your expenses, you can categorize them, no problem inside of your Freshbooks. And then once tax time rolls around, all you need to do is just export a nice tidy summary of all of your different expenses. There's no dreading tax time and spending evening upon evening importing all of your expenses and manually putting them in one by one. So to claim your 30 day unrestricted free trial of Freshbooks. Go to freshbooks.com Ford slash syntax and enter syntax into the How did you hear about a section. Thanks so much to Freshbooks for sponsoring. - -47 -00:37:33,780 --> 00:37:34,880 -Scott Tolinski: Thank you. - -48 -00:37:35,190 --> 00:38:47,690 -Wes Bos: So we talked about spread on arrays, we talked about spread on objects, those are those three little dots. But we also have a rest, which is fantastic when you're using destructuring. So if you have an array of 10 items, and you want the first one to be I always I use an example of you have an array of people that are on a hockey team. And the first person is a captain, second person's assistant captain and the rest of the people are just team players and you you want the captain, you want the assistant captain and then you want an array of the rest of the team players, what you can do is you can say you can use a destructuring in ESX, where you say const, square brackets captain, assistant captain and then dot dot dot team. And what that will do is it will take the rest it will take anything that comes after it, you've destructured the first two items, and then anything that comes after it will just be sort of collected into the rest of the array, right? Similarly, you can use a function rest as well where you can make a function, you say arc one, arc two, and then dot dot dot the rest of the arcs. And so if anyone were to pass a whole bunch of arguments past that, you could collect them all into a nice tidy array with the rest. So they look exactly the same, but they are totally different arrest and spread. Nice. - -49 -00:38:47,730 --> 00:39:06,360 -Scott Tolinski: Yes. Again, love these use this all the time. Okay, the next day are ones I don't necessarily find myself using that much, or at least this one in particular, which is freeze on an object. And this is going to do like what you would expect like Mr. Freeze and Batman Returns, I don't know is that Batman Returns Batman and Robin, I - -50 -00:39:06,360 --> 00:39:09,840 -Wes Bos: don't know, I don't know anything about or anything like that. - -51 -00:39:10,050 --> 00:39:50,460 -Scott Tolinski: These are from the 90s with I other than that those are like the only superhero movies I've seen that are the old old Batman ones. Okay, so object dot freeze is going to freeze your object and basically preventing you from being able to add or modify it. So you have an object you call object freeze, you pass into your object into the the argument there the parameter, and then you basically if you were to try to change a value, let's say you were to do object property, your property equals a new value, it would throw an error in strict mode. So basically not allowing you to modify it's turning your object in sort of an immutable object, right? It cannot be changed. - -52 -00:39:50,670 --> 00:41:14,310 -Wes Bos: Yeah, it's what most people think that const does. But const doesn't freeze your object. If you have a if you have an object or an array. You can Still modify the contents of that array with cons. But object dot freeze will freeze the entire thing, and will not allow you to to add any properties to it or change any of the properties which is. So I again, I haven't I don't think I've ever actually used this myself. But if you were like trying to do something an application, you want to make sure that a third parties do not directly reach into it very much like like maybe even react could do that with state where you don't want people to reach directly into state you want to call other functions, then you could use dot freeze on that. Similarly, we have object dot seal, which is not like Earth seal. It's like soundboards. Okay, I can't wait till soundboard, the seal is added to the soundboard. Yeah, object dot seal will stop any new properties from being added to an object but will not stop you from editing existing properties on that object. So if you had a const, Wes equals name, first name, last name, and favorite movies, and you never you want it to be able to change the properties on that great, but you don't want people to just start willy nilly adding extra stuff to it. That's where you use object dot seal. - -53 -00:41:14,520 --> 00:41:49,260 -Scott Tolinski: Nice. We wouldn't want willy nilly anything, especially around seals. Let's go ahead. And lastly, we have one that you might not be using too much anymore, just because of our object spread fanciness nowadays, but object dot assign is going to basically allow you to combine some objects, we got two objects here you do object dot assign, you put in your objects together and you get a new object with your objects together. Again, this is what we could do by concatenating objects with just simply using our spread operator. So again, I'm not sure if this one's going to be as useful in the future here. - -54 -00:41:49,650 --> 00:43:07,350 -Wes Bos: Now and if you actually look at the babble output of when you use object spread, it actually just uses object dot assign under the hood. So it's one of those useful ones, you are going to see it quite a bit through existing code. But over the next couple of years has ever moved to using object spread, it's a probably see less and less of it, I should say, again, both with object spread and object dot assign, those do not do deep cloning of your your properties. So if you have an object inside of an object, it will, it will of course, take that sub object along for the ride. But it will not take a copy meaning that I have a link it up in the thing, I have a little YouTube video on copying versus reference, and meaning that those that sub object is just a reference. So if you were to have two objects with that same sub object, if you were to change either one of them, the corresponding one would change itself as well, which is sometimes not what you want, because you want a true copy. And if that's the case, then you need what's called a deep clone. But again, and in some cases, you don't want that that can be a bit of a performance hit, especially if you have very nested data. So you want to be careful. And know that when you reach for a deep clone, you actually do want a deep clone. - -55 -00:43:07,670 --> 00:43:21,480 -Scott Tolinski: Yeah, anytime I do anything like diva object or deep array, anything, honestly, I reach for lodash. Because there's so many methods in there, they're just going to help me and I know that those methods are going to be more performant than whatever I would try to write anyway. So - -56 -00:43:21,810 --> 00:43:56,400 -Wes Bos: beautiful. Well, that's our show. We've got some sick pics and some shameless plugs coming up. But we didn't even think that we could fill a whole show with this. And then as we started riffing on the ideas are like, man, there's an entire episode just on these things here. Because there's there's so much to them. And sometimes they take for granted just knowing these these methods really well. But if you're first getting, if you're just learning to program or you've been doing it for a long time, there's there's often going to be methods in here that you didn't realize that you could reach for it and make your code a little bit simpler or, or more readable. - -57 -00:43:56,760 --> 00:44:30,300 -Scott Tolinski: Yeah, sometimes I think that when you're working on something and you feel like your solution that you have is feeling a little complex or overbearing or just a little difficult to read or parse or any of that stuff. Chances are, if you're using a lot of arrays and objects, these methods can come in handy in different ways to really make your code way more readable. So again, if you're if your stuff is looking and feeling very, very not so good, perhaps start looking into changing some of these array methods and see your code start to maybe get a little bit nicer and cleaner. - -58 -00:44:30,600 --> 00:44:44,580 -Wes Bos: Alright, so my sick pick today is a s o g folding knife. So I am one of those weird guys that carries around a knife at all times. Do you carry around a knife ever? Let me tell you a knife. No. - -59 -00:44:44,670 --> 00:44:51,060 -Scott Tolinski: Yeah, so don't don't try to mug I shouldn't I shouldn't say that on air. Nobody tried to mug me. None of our viewers I don't want to get mugged here. - -60 -00:44:51,629 --> 00:45:34,230 -Wes Bos: So I just find especially our spring is here. I find that having a knife on you is so handy from opening up packages to I was running Pairing a hose the other day to cutting up your kids Chicken McNuggets when you're out on the road, I just find that having a knife on you at all times is always just comes in so handy all over the places and I had kind of a had a pretty nice one that was what's called spring assist so it's it's in Canada, it's not legal to have a switchblade, which is where you press a button in it. But I had a spring assist one from I forget what will come. What's that gun company that has the, like the hunting company with the deer on it. Colorado - -61 -00:45:34,260 --> 00:45:35,160 -Scott Tolinski: idea. - -62 -00:45:36,630 --> 00:46:08,340 -Wes Bos: Anyways, I had one in the spring assist, which opened in my pocket once and I was like Nope, never gonna carry that again, because that's kind of scary. So I went on Amazon and I didn't want to spend a whole bunch of money on a new knife just because like, I don't really care about it all that much. Like, there's these knife guys on YouTube, but they spend hundreds of dollars on it, but I just wanted something decent that you that fit into my pocket was kind of low profile and you can just put the clip on your jeans. So I found on Amazon this S o g SOG folding knife. It's pretty nifty on your show, Scott. Look at this thing. - -63 -00:46:08,700 --> 00:46:10,530 -Scott Tolinski: Oh, yeah, that's a nice, pretty - -64 -00:46:10,560 --> 00:46:20,400 -Wes Bos: pretty nifty and it's not spring assist. It's centrifugal force. So you have to do the flick of your wrist open it up so it doesn't open up your pocket. - -65 -00:46:20,460 --> 00:46:22,860 -Unknown: So you get a badass to Yeah, yeah, sometimes - -66 -00:46:22,860 --> 00:46:52,710 -Wes Bos: it just like, and now it's funny because my daughter in public is like, Dad your knife. Like we need to cut something. I was like, No, I can't bring out a blade like that. But yeah, it's pretty, pretty handy. I would definitely check it out is about 25 bucks, I think when I bought it, and I've had it for about six months now putting it through the paces. And it just sharpened it for the first time. The other day so good knife. If you're looking for a cheap folding pocket knife, check this one out. - -67 -00:46:53,040 --> 00:46:57,540 -Scott Tolinski: Where do you sharpen it with just like a like a kitchen knife sharpener kind of thing? Yeah, - -68 -00:46:57,540 --> 00:47:36,510 -Wes Bos: well, I've got a stone that has two different kinds of grits. And every I don't know every four months, I'll take the stone out and take every knife in our house and and give it everything a sharpen. And then you flip it over and it's a very fine stone. And then it's pretty nifty. It's you can also get those those kitchen steels where you choose and those are for there's a lot of like confusion over that those are those are good, but they're not they don't sharpen it, they just hone it so you use that in between sharpening to to to get a nice sharp edge on it, but every couple months you need to make sure that you give it a proper sharpen You should also - -69 -00:47:36,540 --> 00:47:40,770 -Scott Tolinski: yeah posting posting your sharpening Glock I don't need to put like that. - -70 -00:47:41,040 --> 00:47:44,910 -Wes Bos: Yeah, I think it's a Hinkle I got it. It's like 100 bucks or something. It's - -71 -00:47:44,910 --> 00:47:49,020 -Unknown: pretty expensive, but I gotta hang on that that's gonna be a good purchase. - -72 -00:47:50,130 --> 00:48:31,800 -Wes Bos: Yeah, definitely check that out. It's It's now my like thing where if I visit family members, I bring my stone along because just like I can't stand it when people don't have sharp knives. And it's just like, just like destroying a tomato. Trying to cut it with this. Like my parents my entire life. Never sharpen an entire knife in their house. And I didn't know the the joy of having sharp knives in the house until I until I started getting into it myself. And now I just kind of kind of like public service just go to people's houses or like if you rent a cottage, I'll bring my stone and just sharpen all the cottage knives because no one cares at a rental if the knives are sharp. Except for me or I'll bring my own. - -73 -00:48:32,790 --> 00:48:38,370 -Scott Tolinski: Yeah, right. So it's like what you're staying over at someone's place and they come down in the middle of night you're sharpening knives. - -74 -00:48:40,320 --> 00:48:43,470 -Wes Bos: I'm sorry, but you can't live this way. It needs to be sharp. - -75 -00:48:45,060 --> 00:48:55,020 -Scott Tolinski: That's awesome. That's great. I'm excited to check this stuff out. I gotta get a knife. I apparently I got a third sharpen. I sharpen my knives, but I thought I did but apparently I just honed them. Oh, you - -76 -00:48:55,020 --> 00:48:56,910 -Wes Bos: do steel? Oh, yeah. - -77 -00:48:56,940 --> 00:48:58,890 -Scott Tolinski: Oh, yeah. I thought that was sharpening them. - -78 -00:48:59,010 --> 00:49:12,150 -Wes Bos: No, you use that before you like cut a chicken. You own it. You give it a couple. But you still need to do proper maintenance on your knives and give him a proper sharpen every couple of months. Yeah, - -79 -00:49:12,150 --> 00:51:22,080 -Scott Tolinski: I know what I'm doing this weekend. Yeah, okay, so my sick pig is going to be a another tea shop. I recommended what ciab before and what Chai is great for really rare and exotic teas. You're getting black teas and I'm not black teas are getting dark teas like pouvoirs and yellow teas that you're not going to find anywhere else right? Yeah, I know there's a pool or joke in there. I see West gearing up. Oh, yes. Oh are occasionally some Kumar's tastes like poo. So they're real, real dark and smoky. So my favorite tea store is tea house.com. It's H. Au s. This is a shop in Ann Arbor, Michigan that I used to go into like once a week because it was right across the street from where I worked, and I was just so lucky. To be about one of the best tea shops in the country. So tea house is so good. It's not necessarily as good for those rare teas. But what it's great for is a huge variety of like classic greens, scented greens and stuff like that, or all sorts of different kinds of teas, they take very, very fine care of their stuff. Everything is like tripled tested in Germany and they really spend a lot of money making sure that they're teaser like the highest quality and I've been going in there for years and years and years. And now that I moved to Colorado, I have I'm still ordering from tea house all the time. This is this is the place where I love to get my tea. So if you are a fan of tea, check out tea house, they have all sorts of herbal teas as well as green teas, black teas, and all that good stuff. And again, I'm just such a huge fan of everyone involved at tea house, they they're always they sent you like a they send you like a personalized video whenever you order from them, which I think is just ridiculous and amazing. They always write you a little handwritten letter, and they'll they'll pick you out some samples that they think are like based on your order, like oh, based on your order, we might give you a you know, like these as well. Were like some places like David's teas or some of these other places. They're just like here are some samples and toss them in a bag. These are like always geared towards what you ordered. So I'm just a huge fan of this place for a lot of reasons but tea house.com easily my favorite tea shop in the country. - -80 -00:51:22,380 --> 00:51:40,320 -Wes Bos: Impressive they have an x an E v certificate, which gives you the the name of the company you know when you you see a website with the name of the company in the certificate in the URL bar. Hmm. Impressive. That's nothing to do with T but they're clearly serious about t if they're willing to shell out the cash to get one of those certs. - -81 -00:51:40,620 --> 00:51:44,700 -Scott Tolinski: They They do everything right in my opinion they they do all the stuff right? - -82 -00:51:44,730 --> 00:52:02,010 -Wes Bos: So yeah, big fan looks like it impressive. All the check that out. Do they ship to Canada? Probably not nothing ships to Canada. Except for you sent me some spices at Christmas time? I did. I've been I'm almost done them. I've been going nuts on them. They've been great. Good. Well, that was a place - -83 -00:52:02,010 --> 00:52:29,100 -Scott Tolinski: called that. The savory spice shop. Yeah, we like whenever people come into town, we're like, we're gonna take you to the spice shop. And they're like, What? Why would you do that. And then they go there. And they're like, this place is amazing. Because there's like a billion, billion spices I have my favorite spice from the savory spice shop is the togarashi which is a Japanese seven spice, which includes a whole bunch of stuff, I put togarashi on everything, making eggs togarashi anything togarashi it's funny - -84 -00:52:29,100 --> 00:52:58,500 -Wes Bos: i was i was thinking about that. This is totally you can tune out if you want. But I was thinking about how I'm a big fan of spice blends. And I don't mind somebody else figuring out the spice blend. I was like, this is very similar to my picking of JavaScript frameworks. You know, like, I don't mind when someone does a little bit of work for me, so that I can look like a hero when I just sprinkle on some spice blend. And everyone's like, this is amazing. What did you spice it with? And like I shine? Yeah, spice blend. - -85 -00:53:00,480 --> 00:53:03,960 -Scott Tolinski: That's great. I never thought about that. Like that. But very appropriate. - -86 -00:53:04,260 --> 00:53:07,290 -Wes Bos: Awesome. So what about shameless plugs? For me today? - -87 -00:53:07,620 --> 00:54:06,540 -Scott Tolinski: Yeah, so by the time No, not by the time you're listening this. By the time you're listening to this, this course will almost be out my headless WordPress course. Basically, what we're doing in this course, it's going to be I haven't decided to name yet it could be called modern WordPress, could be my headless WordPress, it could be all sorts of stuff still in that phase right now. But this course is going to be all about working with the WordPress API in different sorts of ways with react. So we use a really, really brilliant WordPress starter kit that we mentioned in the last episode. And we go through and we, we start to rewrite a WordPress style theme using react using a lot of good stuff. And it's using next JS primarily. Now we all are so going to get into some Gatsby stuff. But it's not like a definitive Gatsby plus WordPress course. But we will be showing you how to work with Gatsby and WordPress as well in this course. So all stuff headless WordPress, headless WordPress, plus react, and just sort of working with API's in that way. - -88 -00:54:07,050 --> 00:54:56,430 -Wes Bos: Awesome. I'm just gonna give a little update on my stuff right now. So I've been probably for about six months been working on my advanced react course, because it's a beast, and it's gonna be amazing. I'm super excited about it. And once that one is done, and it's pretty much almost done, I was just had a little meeting with the Apollo folks to talk about how to best test everything on Friday. So that's the last little little bit that I'm finishing up. But after that, I'm sort of looking forward now as to what comes after that. And if you look back at Episode 23, when we talked about this year, I've got a couple that I'd like to do a beginner JavaScript course a beginner CSS course and I want to do a VS code course. So I'm curious what you want to see next. So tweet me at Wes Bos with which which of those three you would most prefer to happen next. - -89 -00:54:56,700 --> 00:54:58,500 -Scott Tolinski: Nice. I'm excited as well. - -90 -00:54:59,010 --> 00:55:04,200 -Wes Bos: Sick. All right. Right. That's it for today. Thanks for tuning in. And we'll see you next week. - -91 -00:55:04,590 --> 00:55:17,460 -Scott Tolinski: Peace base. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax44.srt b/transcripts/Syntax44.srt deleted file mode 100644 index b9d6960c4..000000000 --- a/transcripts/Syntax44.srt +++ /dev/null @@ -1,348 +0,0 @@ -1 -00:00:01,290 --> 00:00:10,349 -Announcer: You're listening to syntax podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and Wes Bos - -2 -00:00:10,380 --> 00:00:50,340 -Wes Bos: Welcome to syntax Thanks for checking out the podcast with the tastiest web development treats. My name is Wes Bos and with me as always is Scott to Lynskey. Today we're gonna be talking all about learning. How do you learn quickly? How do you pick up new topics in this fast ever changing fast paced industry, being able to be a quick learner is probably a super invaluable skill. So we're gonna be going through all that today, we're sponsored by Netlify. And fluent conference. We'll talk a little bit more about both of those companies. partway through the episode. However, Scott just got back from San Francisco, and I'm told he has an amazing story to tell us or - -3 -00:00:50,700 --> 00:00:52,560 -Scott Tolinski: maybe not an amazing, yeah, - -4 -00:00:52,560 --> 00:00:55,650 -Wes Bos: interesting story. So how you doing? First of all, - -5 -00:00:55,860 --> 00:04:36,360 -Scott Tolinski: oh, I've had I've had better 24 hour periods of time in my life. I'm just gonna go on and say that because first off, the first half of my trip to San Francisco was incredible. I had a great time. I, you know, I thought I killed my talk at Zai. De we the whole thing was great. Everyone's talks were grades. I day overall was amazing. It was just a great experience. So, uh, after that, did after there's after party, whatever, I went to a friend's place to hang out for a little bit. A guy I've known since the University of Michigan. And so I take an Uber home, right or Lyft home. I noticed my my thumb is like aching a little bit. And I'm just thinking, Okay, that's sort of weird. Maybe I hit it, and I didn't notice it. So I didn't think anything of it. Go to bed. Like two in the morning, I wake up and it felt like someone had hit my thumb with a hammer. Like it was just throbbing and they hurt so bad that it woke me up and my heart was pounding. So I just, you know, I looked at I ran under some cold water. And I went back to bed. And I was thinking like this is this is weird. This has gotten significantly weirder. And I woke up and maybe at like 4am again, and it was so much worse, like painful, pain wise, swollen wise, it was huge. And it was just absolutely killing me. So I couldn't like I couldn't sleep. So I got no sleep, right. So this is the start of the ordeal. I got no sleep. And then, so I wake up eventually. So to get my my stuff together, take a shower, and get ready to go. Because I got to hop on an airplane at like two. Actually, I think I was at one sorry, flight was at one. So I get out and I look in the mirror. And so my my thumb at this point is huge and bright red. But there is a line like a thick like one inch thick line going all the way from my thumb, all the way up my arm. And it's like street all the way up my bicep into my armpit. And my armpit was all swollen. And like, at this point, I'm like, this is really weird. So I google that. And the parent like the the first posting in there. It's just like, if you see red streaks, go to the emergency room right now, no matter what No. And I was just like, what? I have a plane to catch. I like I have no idea. So I caught my doctor. And he's like, well, it's either a blood clot, or it's an infection of the like the lymph nodes. And so that's what it ended up being the limpin Titus I think it is, which can end up to like an infection of the bloodstream, which can be fatal. And the whole thing is very dangerous. So So at this point, I still didn't really know what it was. So I'm hopping on a lift to go to the airport. I figure maybe I'll just head to the ER on the way home or something around. Like, once I get back to Denver. Yeah. And my doctor is like, yeah, so if I were you, I would not get on a plane right now, I would do anything but that I would go to the doctor. So at this point, I'm like getting really stressed out. I hadn't slept I hadn't eaten anything all day. It was like, maybe like 11 I hadn't been in and whatever. But my whole worldview just starts to really compress. I'm ringing my ears. I can't breathe. I'm like, sweating really hard. And I'm freaking the other guy in the lift out as well as the dry. Because I'd like I opened I opened the window. I like stuck my head out the window or whatever. And they're just like, you know, I have a C and I'm like, I need air Take me to the emergency room and they're just like, what, what are you What's going on? Uh, - -6 -00:04:36,420 --> 00:04:37,639 -Unknown: no. - -7 -00:04:37,920 --> 00:07:14,430 -Scott Tolinski: Luckily the guy in my lift was super cool. And he was from Cleveland. He was like, he was like trying to talk me through it but I basically passed out. Everything just like totally went went out. And I kind of like came to and the the the other passenger in the lift. Like who is like was super duper I kept apologizing but he was just like, hey, so where are you from, and he was like just trying to make small talk to get my like brain in that zone. I totally appreciate that. So I figured I would just sort of walk it off at the airport, which I did. Meanwhile, Courtney is looking up ers and places that will take our insurance in San Francisco. I am not super familiar with the area. So she eventually found some place. So from the airport, I already had my bags and everything. I just took another lift to the ER from the airport, got checked in, and they looked at me they saw like the streak on my arm and there and the first thing she says to me is like, you're gonna be here for a little bit. And I was like, oh, oh, great. Okay. So yeah, so I got checked in, I got shot up with some antibiotics and some painkillers and some stuff was given a prescription. And it turns out, my flight was super delayed. So Oh, after all of this, I actually still are in my hospital band. But after all of this, I, I walked from the hospital, like walked out of the hospital with my suitcase and everything to a Walgreens a couple blocks down, got my prescription, took another lift to the airport, again, hopped on my plane and still made my flight somehow after all of this, holy get this it gets worse. Well, it doesn't get worse. It's it doesn't get too much worse, at least well, so at the same time, Courtney, my wife is experiencing some really weird symptoms and she calls a doctor. And so we she's at home with her 11 month old Landon and, and they tell her she needs to go to the urgent care what like we don't even know what's going on. Right? So she drops Landon off at the neighbors who are awesome enough to take him put him down. And she heads out to the urgent care to get looked at. And she actually had something that's like kind of similar, which is weird, because we definitely didn't it was like, is like the the skin version of whatever I had. So she's on antibiotics or whatever. But is that I didn't bring a house key. So I finally get home. And I'm locked outside for like three hours while I have to wait for it to get to the urgent care. So I just pulled out is that in my backyard? You know, I get Wi Fi in the back. just popped up in my computer and worked on some code because that's my life. - -8 -00:07:14,519 --> 00:07:17,310 -Wes Bos: Holy smokes. Yeah, - -9 -00:07:17,310 --> 00:07:17,910 -Scott Tolinski: it's that's - -10 -00:07:17,910 --> 00:07:19,889 -Wes Bos: a crazy story. - -11 -00:07:20,250 --> 00:07:22,589 -Scott Tolinski: Yeah, totally sucked everything about it. Wow. - -12 -00:07:23,040 --> 00:07:24,660 -Wes Bos: And you're both gonna be okay. - -13 -00:07:25,259 --> 00:07:45,570 -Scott Tolinski: Yeah, I'm pumped full of antibiotics. I've been taking them on the clock and I still have the streak going on my arm. They told me it's gonna be a little bit before it goes away. But uh, my thumb is gigantic right now. It's like double the size of what it is. I can't bend it or anything. I have no idea how many this happened. It's totally bizarre. Oh, and you both had it. - -14 -00:07:45,600 --> 00:08:06,630 -Wes Bos: I want to cut my hand. And my hands started swelling up and just over over like two days. And then I started looking it up. And of course, it's like, yeah, it can. It's a gut infection. And it can like spread to your bones and they had to cut your arm off and I was freaked out. And luckily, thanks. Thank goodness for antibiotics. - -15 -00:08:06,769 --> 00:08:23,850 -Scott Tolinski: Yeah, seriously. Yeah, it's no joke. So if anyone saw my tweet that I was saying, I had to go to the ER that is the the story about it. I'm I'm psyched. I got it all taken care of. And let me tell you that hospital I went to in SF was like, top notch. Everyone there was amazing. So a good experience there. I - -16 -00:08:23,850 --> 00:08:30,300 -Wes Bos: guess. That's pretty cool. Wow, that's the story. Yeah. Yeah. So - -17 -00:08:30,300 --> 00:08:32,399 -Scott Tolinski: a great way to Yeah. - -18 -00:08:33,780 --> 00:09:16,620 -Wes Bos: This story is brought to you by what Netlify Thank you. Awesome. Well, that's a pretty pretty cool story. Since got here, love. I'm thankful that you didn't die. Yeah, like you're healthy now. Awesome. Well, Scott's talk in SF outside day was was all about learning. And we thought we would sort of parlay his layout into a podcast so we can spread the love a little bit further and, and sort of help help everyone else learn. So do you want to give us sort of a rundown or kick it off? And will you sort of lead through this? And then I'll throw in my two cents as I yeah, as I have stuff to say. - -19 -00:09:16,890 --> 00:11:24,450 -Scott Tolinski: Yeah. So if you saw my talk, this is some of the stuff is gonna be a little bit redundant. But if you didn't, hopefully, all of this information is super useful to you. So Well, the main idea here is that we have several different things that you can augment your process while you're working to. Maybe make learning more favorable, right. So one of the the, the sort of global things that you want to be having in mind is understanding how you learn and how you learn best. And I always talk about like, I see people in my YouTube comments or wherever they're, or even on like Reddit, will say like, videos are a terrible way to learn, and like, or blog posts are terrible way to learn or apps are terrible. No, that's true, because everyone has a totally different learning style, right? So whether it's videos or blogs or whatever, you need to figure out what your preferred learning platform media is, because for me, I have a terrible short term memory. I tell this story that, you know, Courtney, while she was getting her doctorate, had to do a bunch of psychological tests. So because of that, I have like every psychological test, she she has like a complete breakdown of my psychological profile, which I should mention she did before we got married, so maybe she knows something. She she saw, it was like, Okay, I guess, I guess he's all right. But my short term memory was so bad seriously, that I don't have an IQ, because it's just in the dumpster. It invalidates the IQ test, because my short term memory is really bad. So because of that reading blog posts are long stretches of text, like really sucks for me it like my eyes gloss over. And I like end up reading the same lines twice or three times or whatever. One of the reasons why I listen to audiobooks instead of reading books. But so for me, like I learned best big concepts from video tutorials. And like code concepts best from just going into the docs and trying out the code examples in the docs and then sort of like cutting my teeth that way. Did you know what your best Learning Media is? Was? - -20 -00:11:24,510 --> 00:13:37,200 -Wes Bos: Yeah, totally. It's it's kind of interesting that you say that you don't learn well, from from reading is because I never read books. Like in my entire life, I can probably count especially like all through high school, I always read the the cliff notes all through university, almost never read the textbooks. And I just thought that like, like, I wish that I could, but I just couldn't. I couldn't stick to it. It just had to read things over and over again. And it was really hard for me to suck information out of a book. And I just thought that like, Oh, I'm just a bad learner. But it turns out that that just wasn't my learning style. Because as soon as I found audiobooks, and I had always been a child of the Internet, and I wasn't dumb, I was always like, learning stuff and building stuff, right? So it was kind of cool when both audiobooks became popular because like, I now consume an incredible amount of audiobooks. Yeah. And when, when YouTube and all these video sites came out, I was like, wow, I like I can, I can consume this information so quickly. And I was always so jealous of people who could do speed reading, and were able to just like, suck up a book really quickly. And now I'm able to do that with with video, which is really, really cool. So I think video is definitely my learning type as well. And I also stress that even if you you find some videos and you find you're not driving, well, you may not have just found the type of learning as well, because even inside of video, there's still like, a lot of my stuff that I build is very much practical and example based in real world. And some people absolutely love that. And then there's another crowd of people who love the Foo bar Baz and just prefer to focus on concepts. And that's, that's how they learn, right, this couple different groups of people. So I would definitely first try out different mediums, books, videos, whatever it is conference talks, and then even inside that year, it's gonna be a bit before you find the type of trainer or the type of video that you like. And I think that's, that's why I do well is that not everyone likes my stuff. But I have found my little crew of people who particularly like the way that I explained things, and I'm sure you have that as well, Scott. - -21 -00:13:37,350 --> 00:14:59,910 -Scott Tolinski: Yeah, and that's actually I don't know if you have seen my slides, but that's the very next level that is, is to is to find is to find your preferred learning resources, right? Because again, there's 100 YouTube teaching programming channels, but even if one channel has 200,000 subs in one channel as 200 subs, you will find that the cross section between those is not actually that big because chances are it's just one person prefers one of those channels, teaching methods or learning styles or whatever so if you do find these people then like Yeah, fine, you know, little you subscribe and follow the stuff they're doing and and buy their their products. Because really like if someone speaks to you the right way, then that person most likely just learns things or has this teaching style that is going to be compatible to you so I mean you do want to find these people I remember the first time that I was listening to a lot of video tutorials and there were some like WordPress ones that we had bought at my agency and I watched and then I could not stand the instructor I don't know who the instructor was and not to be mean or anything but like it just did not vibe with me I didn't like what he's doing I didn't like his style. And then I've always really really liked i don't i don't know if you ever listened to a lot of like Jeffrey way tutorials. He had been doing tutorials for like net tut's back in the day. - -22 -00:15:00,000 --> 00:15:30,660 -Wes Bos: That's yeah is the kind of the first one that I really found jive well with me because it was it wasn't this like very cold approach to to learning to program a very boring like, I think that you find that quite a bit on like lynda.com tutorials where you just get someone with a PowerPoint and recording a PowerPoint and that's so boring. Whereas if you if you find someone that you like, like, like at the time that tut's I really enjoyed it, then that goes a long way in increasing your learning. - -23 -00:15:30,870 --> 00:16:36,780 -Scott Tolinski: Yeah, same here. Okay, so the next little little headline, I guess, is going to be to improve your foundational skills. And the best part about this is that you don't have to spend time to focus on these specifically, like people want to say, improve your foundational skills. But the cool thing is, is you can improve your foundational skills while learning a framework while doing this or that, but you want to be having the mind to improve your foundational skills 24 seven, because the best part about core JavaScript, CSS, HTML skills, programming skills, all that stuff, the best part about improving those all the time, is that you can take them from project to project and then the framework matters less, right, because you just end up having to learn the syntax of the framework rather than how you do stuff in JavaScript. Because chances are frameworks are all based heavily, heavily heavily on JavaScript core concepts. And while there is going to be some magic here and there with things like view, it's still having those skills in JavaScript are going to make you much much better at the framework than being good at the framework. Well, - -24 -00:16:36,800 --> 00:17:25,410 -Wes Bos: I found that I don't know if you found this as well. But I found when I picked up react a couple years ago, my mind just like, JavaScript got so much better. Because react does have a little bit of magic here and there. But almost everything in react is just JavaScript at the end of the day, and it's forces you to get better. So I really understand binding and like the arrow functions, and scope, and modules, and all these things that are just JavaScript at the end of the day, I found that react forces me to get much better at that. And on the flip side, I just taught a react workshop this past week. And I found that there was a lot of stuff in there. That was a huge tripping point for people. That was just JavaScript at the end of the day. Oh, - -25 -00:17:25,470 --> 00:17:33,860 -Scott Tolinski: so Okay, yeah, this is a perfectly dentist story, a story that I tell in my presentation, man, you are like, I feel like you watch this. So - -26 -00:17:33,930 --> 00:17:35,040 -Wes Bos: I totally didn't. But - -27 -00:17:35,060 --> 00:19:17,250 -Scott Tolinski: one of the stories that I tell is that I had like a YouTube comment before on one of my react videos. And someone was like, Oh, I totally, you know, like this react style lifting. But I don't understand why the React developers chose to use the word map for looping over stuff like Wouldn't it make more sense to use like a dot loop. And like, again, if you don't have your core JavaScript skills, you don't necessarily understand that that map is just outputting an array, and you're just returning an array. And that's all it's doing. So in actual react, you could have just output that as an array itself, rather than like a loop so to say. So it's having those core JavaScript skills, you recognize things in a different way. And then you stop looking at it as this is the frameworks way of doing things. And this is the JavaScript way of doing things. And again, same for me react was like, it totally improved my my JavaScript skills all the way around. Okay, so yeah, in addition to that, like, you want to be focusing on the stuff that you can take with you from project to project, because you don't want to have to learn things more than once. And this is especially true with libraries. So if you're using a library, like why would you use like a react cookie library when there's a JavaScript cookie library or something, right, because then you only have to learn the API once you can bring it with you from project to project. And then you don't have to relearn the view way of working with cookies or something, you just have the JavaScript way of working with cookies, or the JavaScript way of working with local storage. So then you only have to learn things once again, and you don't have to spend the time. So that's obviously going to make learning faster if you have to learn less things, right? - -28 -00:19:17,970 --> 00:20:35,430 -Wes Bos: Yeah, this is one thing I didn't like at all. When I moved away from jQuery. And I started picking up these frameworks. And I would Google, even Angular had this. Angular had its own way to make HTTP requests, and they have their own like, way to add an authentication middleware. And I didn't like that I had to, like, go out and find my own pieces for for data fetching and for managing cookies and for JW T. And I was like, why is this stuff not built into the library, but it now makes a lot more sense after having done it for a number of years, because any, anytime that I do anything, I can just bring along axios and I know exactly how how axios works or I can bring along Cookie library, I can bring it along local storage, and it just works everywhere that you go. And there's no relearning. Like you said, there's no relearning of how to do it in a specific framework. It does take a little bit of like learning initially. And it also takes a lot of, you have to be confident in choosing your own libraries, which I know a lot of people don't want, they just want to be told what to use. But I think we start to see these sort of major libraries in every single area, surface themselves, like date functions, and axios and whatnot. - -29 -00:20:35,570 --> 00:22:41,460 -Scott Tolinski: Yeah, and chances are those libraries are going to have a huge, more like a much larger community behind them, because there's more people in different frameworks and different things using them. So they're going to exist for longer, they're going to see updates for longer, and they're gonna have more people behind them. Okay, so let's talk about saving time. And one of the best ways that you can save time is by using something like Netlify to host your sites, because Netlify has so many awesome features that save me and Wes a ton of time when we want to deploy things. For instance, they have so new and keep in mind, these features are only pay for what you use for all of the features, right. So each individual feature has its own pricing tier, which is just totally Excellent. So they have some excellent features such as the new functions, which make AWS serverless functions as easy as it's ever been, I mean, this this thing, it totally takes all of the barriers to entries away, or using serverless functions, you can just pop in a function here and there. And Netlify makes it super easy. There's also the identity feature, which allows you to manage signups, logins, passwords, all sorts of that stuff for your users without a server side component. So that way, you can have client side authentication, and client, Aaron client authentication on your website without actually having a server having to manage any of the difficult technical stuff, you can just use their system and have it nice, easy peasy. There's also forms which I've been using a ton, which basically allows you to submit all sorts of comment forms, right? Whether this is sending an email off or in a call, so trigger a web hook or maybe post in a Slack channel. So there's a ton of different possibilities there with the new Netlify forms feature. Either way, all of these features are excellent. And just extremely easy to use. I think that's one of the things people comment on the most on Twitter, I see when they sign up to through Netlify through syntax is, wow, I just signed up and holy cow deploying my site was easy. So - -30 -00:22:41,489 --> 00:22:46,830 -Wes Bos: yeah, like they don't believe us. And then they actually try it like, oh, wow, that was that was amazing. - -31 -00:22:47,009 --> 00:23:04,710 -Scott Tolinski: Yeah, it really is amazing. And I don't say that as someone advertising something. I say that as someone who uses it and is amazed by it. So check out netlify.com forward slash syntax, and sign up and start hosting on Netlify today, because let me tell you, it's a pretty sweet experience. - -32 -00:23:06,750 --> 00:23:11,280 -Wes Bos: Wicked. Alright, let's jump into the next one. What do you What's your next point that you got here? - -33 -00:23:11,310 --> 00:24:43,050 -Scott Tolinski: Yeah, next point is to narrow your focus. A lot of times, you'll see posts where people are like, hey, I want to learn react plus Redux plus Webpack, plus this in that all at the same time, plus style components, whatever, just throw it all in there, throw it all in there once. And the problem with that is is like when you start to learn a whole bunch of like big concepts and frameworks at once. You don't necessarily see the boundaries between them. And you start to see the like, if you're learning let's say react and Redux you're not learning way react does things you're learning the way that react and Redux does things together. And you're not learning the way Redux does things by itself, either, right? You're learning this whole system at once. And the big problem with that is, is that well, that let's say I want to learn Apollo, right. And I want to replace Redux with Apollo's Apollo state link and stuff like that. Now you have to learn a whole bunch of stuff over again, right? It's almost like starting fresh, because it's not totally starting fresh. But the amount of stuff that you have to relearn is considerably more because you don't have the individual experience with each things. So my my strategy is to learn one thing, by itself react, I'm gonna learn react by itself, I'm gonna learn a really good then I'm going to learn Redux by itself or Redux plus react. But either way, the boundaries between those are much more separate so that I can always go back to my core react skills, without Redux or without Apollo, whatever. And then you can supplement it. I like to say it's like a git merge or like merging your data into the stuff that already exists. - -34 -00:24:43,770 --> 00:25:37,650 -Wes Bos: Totally that that was actually one of when I first launched my react course, like three years ago, that was probably the biggest pushback that I got was I even have like a funny FAQ on the website that asks if I'm using any of these flux libraries, because people assume that you need to learn all these things together. When I knew after having learned both of them myself, I'm like, no, it's better for your own learning. If you just focus on react itself, trust me. And thankfully, a Dan Abramov, the creator of Redux tweeted out, don't learn Redux and react at the same time, learn just react, because then when you move away from Redux, or if you need to build it, you might not need it. Like people ask me all the time, like, how do you know if you need Redux? And I tell them, don't build it without? And trust me, you'll find out when you need it, because you'll know exactly when that pain point starts hitting. - -35 -00:25:38,070 --> 00:26:40,800 -Scott Tolinski: Yeah, exactly. And so many people are like, I don't see the point of Redux, well, then you don't need it yet. You don't need to learn like, why would you waste your time learning something that you don't need? So unless, of course, you're building this big project, but in this, this case, it's specifically just learning, right? It's just projects for learning. One of the things I don't recommend doing is like, picking a serious real project to learn something. I like to learn things on sort of side projects, or here and there, look, throw away code, right? Um, okay. So yeah, so again, you know, when when you learn these things, in bundles, the boundaries become blurred, right, and you end up sort of slowing down any additional future learning. So part of learning fast is not just learning fast right now, but learning fast in the future. So you don't want to slow down potentially learning things in the future by having these giant blocks of skills rather than these individual little modules, node modules, right? Little node modules of skills. There - -36 -00:26:40,800 --> 00:26:41,430 -Wes Bos: you go. - -37 -00:26:41,520 --> 00:27:55,980 -Scott Tolinski: Yeah, like this analogies and metaphors. Alright, so the next big step is to get excited about whatever you're doing. Because yes, whenever you're excited about something, I don't know about you, but I really immerse myself in it, I dive in. And I get very not necessarily obsessed. But you get to the point where you start thinking about in a way that is much more in depth. So for me, like I like to think about when you first start learning programming or like major concepts, and you get really excited, like when you first started programming, it was like, you're getting all these big wins, you're making stuff and you're like holy cow, I can put a background color of green on an HTML page. That's amazing. So like, you end up getting really excited about what you're doing. And you just drives you to learn more and more and more. And then all of a sudden, you reach this point where you've been doing that for so long, and no stirring the grindstone to get there, and you sort of lost that feeling. You've lost that loving feeling. You're not exactly like as like, just Intuit as you were before. So you want to start thinking about that initial feeling of excitement that you've got. Because when you are excited again, you you turn into hacker man, you start hacking time. Yeah, - -38 -00:27:56,850 --> 00:28:47,550 -Wes Bos: I think that's this is probably the biggest point behind the entire episode for me is that if you're excited if you're invested in the things that you are building, and, and that's why we always anytime that I have something, we always build something that is fun to build and looks good, and is actually something you do in the real world, you could parlay that into an application that you want to deploy to production. Because you you need to be invested in the thing that you're building. Otherwise, you will fizzle out, you won't be all excited, even if it's silly to think about what the thing looks like, when you're building it and eat it. Some people like whatever, just slap foundation on it. But then you're you're not invested it you don't have any pride in it right? You're not going to put that that little shine on it that extra 10% to make it ready for production and be able to show other people. - -39 -00:28:47,790 --> 00:30:27,420 -Scott Tolinski: Yeah, and to go along with this. I mean, people say well, okay, well, okay, I get I gotta be excited. But how do you get excited about stuff. And, you know, you said to make it look nice, right? To make it to be proud of it, right, that's going to make you excited. And one of the things I like to do about projects like this is to build them around hobbies, and we've touched on this before building projects along with your hobbies, find something that already excites you. So if the code itself doesn't excite you find something external, a hobby, or something that you're already excited about your let's say, you just watch Game of Thrones, and you're, like, totally pumped about it, like make a game of thrones themed project, right? I have most of my courses, we do things like work with the movie DB API or something like that, and ensure enough Yeah, I get it, teaching you to build a movie listing. But if you don't care about movies, like I recommend finding an API of your own and using it instead of whatever I'm doing and try to apply the concepts that we're learning in this series. Because if you're not excited about whatever you're doing, it's not going to help you. So most of my side projects, yeah, most of my side project is we do our like breakdancing related or kung fu one of my first projects was a conference to film list I made so I could keep a database of all my favorite kung fu movies. And it just to find projects like that I've had co workers that are into beer brewing. So they like they wanted to learn how to build stuff with the Raspberry Pi. So they built this whole homebrew a whole controller thing for their their beer brewing process and use that as a project to learn their Raspberry Pi. I mean, there's just so many opportunities to learn stuff like that. - -40 -00:30:27,750 --> 00:31:11,310 -Wes Bos: That's such a good point, because that is the thing that drives me nuts is I over learning graph qL over the last six months, all of the examples are either Star Wars, or what does it pose? Yeah, the two things I care the least about in the entire world are Star Wars and Pokemon and I don't get what they are like, I don't understand. Like what a Jedi is, or I don't I don't get it at all. Like maybe if it was crazy bones or Pogs or some crazy. But it's just so frustrating to try to learn when it's all this just jargon that you don't care about. Which is really funny. - -41 -00:31:11,669 --> 00:31:43,650 -Scott Tolinski: Yeah, that's hilarious. Yeah, so find whatever it is, you're not you know, I've mentioned before the CO creator of level up tutorials, like he was into, like, rare and expensive baseball glove. So he was doing his project to help him buy and sell baseball gloves. But that helped him learn Angular, and it had a double function of getting you excited, as well as actually being practical and easy to use. So let's talk about something else that's extremely practical, is going to the fluent comp to up your skills. So with more about the fluent comp is Wes Bos - -42 -00:31:43,679 --> 00:33:31,350 -Wes Bos: fluent is the web development conference brought to you by O'Reilly, you know, O'Reilly they have those books with the animals on front of them. And I've actually spoken at fluent conference in the previous years, they invited me this year, unfortunately, couldn't make it but I highly recommend checking it out on June 11 to 12. They've got training on June 12 to 14, they have the tutorials and conference. And if you are trying to get better, or even just try to get excited, again about JavaScript and web development, performance, anything that has to do with building websites, I would highly recommend that you check out this conference. They've got some amazing speakers lined up. What do we got here, Val head, I just saw her. This past week at a conference. Her talk was amazing. All About animation, different types of animation, SVG animation, via JavaScript via CSS, it was just like this amazing, like someone who is an expert at animation, and all of these different animation libraries. I just had to sit there for 40 minutes and have their like past years worth of work downloaded into my brain. And I find it amazing that you can just go to a conference and have all of these people brain dump everything they've learned in the last six months a year into Patrick Hammon. I've met him before he does some amazing performance stuff. Brendan Eich, I don't know, I've never really heard of him. But apparently he's doing something about JavaScript. Peggy from Apollo actually met her this past week in New York. She's super smart and knows a lot about Apollo and graph qL, which is pretty sweet. So I would check it out at fluent conference. It's ai conferences.oreilly.com. Use the coupon code syntax to save 20% off. Thanks so much to fluent for sponsoring. - -43 -00:33:31,710 --> 00:34:33,900 -Scott Tolinski: Nice, super cool, thank you. Yeah, so the next thing about this is going to be I like to call this grind time. And grind time is the part where you get to write a lot of code. One of my favorite things in my my slides is that says, it says give let's give less shits, write more code, make more things, do stuff, start typing, right? People like to get hung up on best practices this and that, when really, they should get hung up on putting pen to paper and getting code output. Because if you get worried about breaking things all the time, and this is learning specifically, right? I'm not talking about you're starting a new project for serious, right, this is just specifically for learning, break it break it all the time. Because in that process of breaking, you figure out how to troubleshoot, you figure out how to fix the problems. You figure out what potential problems there are, you figure out all these little pitfalls. And so you want to start getting your pen to paper as soon as possible and just start writing a lot of code. - -44 -00:34:35,040 --> 00:36:22,290 -Wes Bos: Totally, it doesn't matter. I can't stress this enough. It doesn't matter what you use, or how you do it. It doesn't matter if it's a best practice or if it's the worst code you've ever written as long as you are actually writing code. Stop talking about it, stop researching it. Stop reading 1000 medium articles where people are pontificating about the best practices and why not those things the best practices will totally follow. But as long as you are putting pen to paper or putting wet fingers to keys and actually coding stuff. That's where you're going to see. To see leaps and bounds. I've got another tip or little thing that has helped me in my own career. And it came from Adam Savage. I might have even mentioned this on the podcast before, but Adam Savage is the he's the mythbuster. Right? I'm sure many of you have grown up watching him. And he's got this awesome podcast where he often talks about making things. And he said once on it, where he was teaching his his son how to make a Leatherman holder out of out of leather, right? I love them is a kind of this like little Jackknife thing that you put in your pocket. And he said to his son, Alright, first thing you need to do is submit to yourself that you are going to totally screw it up three or four times, and you're going to build this thing three or four times. And if you approach learning, knowing that you're going to build this thing three or four times from scratch, you're going to scrap what you have, and just throw it in the garbage. And if you're fine with that, because that is part of the learning, that's not frustrating, that's not setbacks, or something like that, then you're going to have a much better time in and knowing that that whole process of getting absolutely nowhere, or seemingly getting absolutely nowhere is totally a part of the process. It's totally Yeah, and it's very important, because, again, - -45 -00:36:22,290 --> 00:38:45,900 -Scott Tolinski: you just pick up so much little things, and that, that you can only learn from experience. And, and I like to call this iteration driven development, because you just right, right, right, right, right, you make a lot of stuff and through quantity ends up coming out quality, because all of a sudden, you know the pitfalls, and you know, the things that are wrong, and you've experienced them firsthand. And these big picture stuffs are starting to come into view. So another thing I really like to talk about here in the grind time is to use people that are smarter than you when you're writing a lot of code. And, you know, I don't know if a lot of people came from Angular, when we first started writing Angular code, we had no idea what we were doing, because there wasn't a whole lot of stuff out there about like best practices. So we were just sort of hacking things together. And then somewhere along the line, while we were working on our projects, the john Papa style guide came out and it was sort of like illuminated everything, all of a sudden, this is how you do it. And so we would just go to that john Papa style guide, and just read it top to bottom, and then all of a sudden, you're just like, Wow, it was a good total brain dump. Now, I've seen all this patterns, and I have a set of rules. And I can follow these rules. So you want to work really hard. But then you want to find these style guides that can help you illuminate the best practices, I think I used the Airbnb style guide for the most part for react with some tweaks here and there. And along with these style guides, you're going to use snippet libraries. And it seems counterintuitive, because the snippet library is going to be writing code for you. And here we are talking about writing lots of code and breaking stuff. But if you use a snippet library, you're instantly exposed to best practices, and you're instantly exposed to good code. So while you're learning the big pictures and the concepts, you also get to see, hey, this is what the good way of doing it looks like. Or at least this is what this recommended way of doing it looks like. And then you start to just recognize that this big patterns in your brain starts to say, this is what good code will look like, rather than, you know, this is what my code looks like. And eventually you can you can put like an es lint in your thing to you know, check against these style guides in the snippet libraries. And you're instantly going to just be looking at good code all the time. And suddenly, you're just going to be thinking in good code, because it's it's all of a sudden, it's not like, Oh, I'm just thinking and this I'm acting as the way that I'm thinking about this is the right way to do it. So you end up refining yourself by using these sort of snippet libraries and style guides. - -46 -00:38:46,500 --> 00:39:25,350 -Wes Bos: Yeah, the once I had react down pat, and I flipped on the Airbnb ESLint rules, it was really interesting because it would highlight like all of my code, and it'd be frustrating because it tells you your garbage developer, but it's kind of interesting to like read the rule and then go do a little bit of research as to why does this happen. And then I went from sort of like being able to build stuff in react to being able to build stuff in someone's idea of a best practice in react. And I think that that pushed me that extra step. Once I actually was able to build anything, then I started really doubling down on best practices and, and reading the whys in the house behind it all. - -47 -00:39:25,710 --> 00:39:59,070 -Scott Tolinski: You just gave me a great idea. In fact, this is a this is a million dollar idea if somehow this could make money, which it can't. But what if there was like an S lib library that instead of just like telling you like when you highlight it and it tells you what the problem is? What if there is an ESPN library that insulted you, Allah Gordon Ramsay, it was just like, what are you bloody idiot? What are you doing? Like that would be that'd be hilarious. I would really like I would really love to have Gordon Ramsay or it could like have a little Gordon Ramsay gift. Just like shouting at you for this mistake. - -48 -00:39:59,700 --> 00:40:01,190 -Unknown: Cheers. Use double quotes. - -49 -00:40:03,480 --> 00:40:05,690 -Scott Tolinski: I really want to see this thing in action now. - -50 -00:40:05,880 --> 00:40:06,390 -Wes Bos: Okay, so - -51 -00:40:06,390 --> 00:40:53,250 -Scott Tolinski: along with that Gordon Ramsay thing, you know, cuz he gets on people for egos and whatever is to like, check your ego because chances are, you're coming in like thinking you're how shit about something and you're not. Again, I keep coming back to the stories that I tell during my presentation, one of the stories I tell is about events. I came up with this on the spot a couple of weeks ago, because this is actually something that happened to me the day I was giving this talk at the React Denver meetup. There was this article about render props going around. And I saw it, it was like at the top of the Reddit and the Twitter's and whatever. And I was just like, Oh, I know, render props. I don't need to read this. And so a day goes by and you know, click through it, and I see it. And I'm like, oh, okay, it's still up there. Maybe I'll read it. Open the article either. And like three things, and I'm just like, - -52 -00:40:54,300 --> 00:40:55,710 -Unknown: yeah, I there. Here I am, - -53 -00:40:55,920 --> 00:41:29,460 -Scott Tolinski: I have a slide telling me to check my ego. And here I have with my ego being like, yeah, you're, you're smart, you know this. And then sure enough, that there's so much stuff I could have learned. So there's so many learning opportunities, if you just always invoke some sort of student mentality, this sort of like, I am always a student, because in this industry, you can't really afford to be a master of anything. You have to be a student, which is one of the reasons why I hate on resumes, when people would like progress bars and something. It was realistic, you should have your progress bar being at like, you know, 50% or zero the whole time because you're never done learning something. - -54 -00:41:30,110 --> 00:41:31,980 -Wes Bos: Yeah, that's just to infinity. - -55 -00:41:32,520 --> 00:42:25,130 -Scott Tolinski: Yeah, exactly. Okay, so the last one is going to be total immersion. This is the most fun one, because you can do it while you're doing other stuff. And you subscribe to any sort of YouTube blog or podcast, whatever, you just totally immerse yourself when I want to learn anything like I want to learn personal finance, I subscribe to like 800, personal finance podcasts. And I listen to them all until I'm totally sick of it. And it's just like that with anything, right? You just totally immerse yourself and you don't even need to focus on it. Because again, if you're hearing people who are smart about something, talk about something, you eventually start to think like the smart people think, because you're getting this just sort of implanted into your brain. And this sort of goes along with one of our sponsors in the O'Reilly conference is that conferences are a great way to do this, too. You sit down at a conference, and you just sort of get this brain dump from everyone that's coming in and in giving you their information. - -56 -00:42:25,190 --> 00:43:00,750 -Wes Bos: Yeah, totally. I do this all the time. Whenever I'm like, right now I'm trying to get into meat caring. And what am I doing? Well, I'm following all these people on Instagram, I'm watching 1000 different YouTube videos, I'm reading all kinds of blog posts about people's experiences, and he just sort of like total immersion into that specific topic. And then at a certain point, I will get good enough at it where I don't necessarily care about it all that much. And I'll be able to just sort of like let go of some of that stuff. But when you're in that learning mode, I think it's super, super important. - -57 -00:43:01,650 --> 00:43:22,590 -Scott Tolinski: Yeah, hugely important. And it's easy to because again, you get a lot of this stuff just by clicking subscribe. And by showing up, if all of a sudden your YouTube feed is filled with a billion videos on graph qL, you're gonna see some that you know, fit your fancy, you're gonna open them up and learn stuff, this is the most fun step because you have to do the least hard work in this step. - -58 -00:43:22,610 --> 00:44:20,220 -Wes Bos: Alright, so I got a couple more points here, I'm not really sure where they fit in along the thing. But these are just some things that helped me when I'm learning something new. And the first one is to just scan the docs really quickly. You don't necessarily have to read all of the documentation, although I generally do. But I just scan the documentation to understand what the surface area of that library is. So that when you have a problem with something, or when you need to do something, you can realize like, okay, I remember they had a specific thing for working with a cache in that way in the documentation. So there's this acronym rtfm. You can you can look it up on urban dictionary. And it's funny how often people don't just scan the docs really quickly, or actually read the documentation behind the project. It is boring, it's extremely boring, but if just force yourself to take 20 minutes, half an hour to, to read through the documentation, scan it, you can you're gonna get you're gonna get through those common problems a lot easier. - -59 -00:44:21,090 --> 00:44:39,060 -Scott Tolinski: Yeah, I love that. I mean, for me, the docs, that's the way to learn is to just go through scan it try stuff. And the worst part is I hate it when Doc's put like code that you're not supposed to do it, because I like don't read that part. And then I go, Oh, yeah, that code, and then it raises and then I like read the paragraph, but it's like don't do Oh, okay. Oh, get it. - -60 -00:44:39,090 --> 00:45:55,980 -Wes Bos: rtfm. Yeah. Another one I like to do is if there are a Doc's are out of date, or not very good. I like to go to the GitHub search, and the GitHub cert, I like to go to GitHub search and search for that piece of the API. And then what you can do is you can find other people who have used it in their own projects, and you can see It actually use because sometimes the documentation assumes that you know a few things. And if you can actually see it in use case in somebody else's project, it's going to make a lot more sense. So that's like a nice little trick that I like to use for any language. And you can also filter on GitHub by specific languages. And you can exclude common like, sometimes you find like a boiler plate that someone's forked 1000 times. So you can just remove all of that. Joining slack and chat for specific tech. So whenever you're learning something, join the slack room for that, because you're going to find you're going to find like other people that are at the same point as you. So generally, what I like to do is I ask a lot of questions, but then I also like to live read what other problems people are having. Like right now I'm specifically in the Apollo, the graph, the graph, cool. And the now those three slack rooms, and I see all the questions that people are asking, - -61 -00:45:56,850 --> 00:46:40,710 -Scott Tolinski: yeah, I do this, I do this too. And they're the or even no spectrum to spectrum and Slack, unlike all in all those communities. And what you don't want to do though, is you don't want to sign up for the community, ask a question right away, don't contribute, don't like, yeah, like, don't be the guy who just signs up and be like, my stuffs broken. And then like everyone, you know, and expect everyone to help you and then get mad when it's not, you know, so But no, I'm follow those those communities. And again, that's part of like, in my opinion, that like immersion part, because again, if you're seeing all these people talk about stuff, and maybe someone's having a problem that you've already solved, and you can solve their problem. And then also, that's a nice little confidence booster, because here you are just learning something, but you're already able to help someone else. - -62 -00:46:42,240 --> 00:48:36,090 -Wes Bos: Totally. Another one I have is finding like an accountability, buddy. So often, I'll see people take my JavaScript 30 course or the CSS Grid course. And they'll either do it at lunch with some coworkers, or if it's a group that's just graduated from a boot camp that all take it together, or people meet up once a week at a coffee shop and work through one or two of the exercises. And that's awesome. Because often people that are in the same headspace, they're at the same point as you are going to be so much more helpful than somebody that's like way ahead of you. Like I often laugh at people that are reading like Elon Musk's biography or Richard Branson's book, and it's like, you're not gonna learn anything about like running an internet business from Richard Branson, because he's so so far ahead of you that the applicable tasty treats that you're gonna get from him, they're they're not they're nowhere to be found. Right? So yeah, and people who are either where you're at, or maybe one step ahead of where you're at, and that's going to be such a better relationship and learning experience for you. Yeah, totally. And last one I have is just learning the open, put everything up on GitHub, asked lots of questions, share the nuggets you have, because if you blog about something that you had trouble with, and you're not only paying it forward, but you might be opening yourself up to maybe a job with that specific JavaScript, once you do get better at it, then you could maybe get a you could get some work for it, you could position yourself as an expert in the industry, you'll likely get a whole bunch of people asking you to write books about that specific topic that always happens when you write blog posts. And, and you're again, you're just helping other people as well. And that's super important to to pay it forward. Because there's other people taking the time out of their day to help you. So why can't you help other people who are sort of coming around that it's got dogs barking? - -63 -00:48:36,629 --> 00:49:35,490 -Scott Tolinski: No, I think that follows along too with like, a little bit of loose the moon, please stop. Part of that follows along, I think with the checking your ego part because like, a lot of times people don't want to share that stuff. Because they think my codes bad people are gonna look at my stuff and judge me, but like, nobody's gonna judge you. And if they do, they're just going to help you rather than actually judge you. So if someone's judging you about their stuff, then there's not a person that you need their, you know, approval, because that's kind of a rude thing to do. So like, honestly, you need to sort of get over that, that judgy worrying about if people are gonna like or not like your code, because there's always going to be grumpy people like that. But I totally agree. Put your stuff out there in the open. And the worst thing that are like the best thing that could happen is that someone's going to say, hey, you should do it this way instead and a nice way and then you have a nice little learning opportunity to yourself that you might not have gotten that soon. Maybe you down the line, you would have gotten that that same little tidbit that tasty treat, but like maybe you get some tasty treats a little bit sooner that way. - -64 -00:49:36,180 --> 00:50:52,890 -Wes Bos: Yeah. And on the flip side, if you are someone who I know there's often a lot of people out there who are really, they care a lot about the way that things are done. And often they are they come off as overbearing, and we have this in the boot camp, where people would DM me all the time the questions that they had because they're too embarrassed to ask them In the open or they're too afraid of this one guy who would come out swinging with the like the you know, just just walk all over you with is the best way to approach something where it's just like, I just had a question about how to butter my bread, and you're telling me I should fly to Italy and take a breadmaking course. You know, like we're just like, I get that all the time to ask I just hate asking questions on Twitter because you just like brace yourself for the this just like overbearing answers and you're doing it the wrong way and, and everything like that. So like On the flip side, if you are trying to help someone always know that someone is might be taking a big leap to ask this question and approach them gently at first until they they might start asking for for more from you. Yeah, - -65 -00:50:52,980 --> 00:52:04,020 -Scott Tolinski: if you're, if you're in this always a student mentality, right? If you're always looking at yourself as a student, and not a master, you're going to be way less likely to think like if somebody asks a question, you're gonna be way less like they think that dummy doesn't know the right way to do it like I do, you know, they're, you're more likely to think oh, cool, they're they're trying to learn this thing. Let's have a teachable moment here, something like that. Cool. So that pretty much follows it. If you want to check out my talk, I'm sure it's gonna be up on zite their YouTube channel at some point here, they have some really sweet production out there. So hopefully, it's looking nice and crispy. So I can't wait to see that myself. Because I think it was all pretty good. If you want a more concise version with slides and animated GIFs of this same kind of thing. But I hope that clears up some little things. I get so many emails about people being like, Man, you put out so many tutorials on so many different topics. How the heck do you learn this stuff? and use your all of my tools and tips and secrets? I mean, this is it right here. So I'm not leaving anything out. This is what I use to learn stuff really quickly. Do you have any sick pics? Wes, I do have a sick pic over here. - -66 -00:52:04,589 --> 00:53:00,330 -Wes Bos: I do. My sixth pick is audio book this time. So I've been following Gary Vaynerchuk for for many years. And if you don't know Gary Vaynerchuk, you may have have come across him online and in been put off by him a little because he's got this very, very aggressive like Work, work, work, hustle. And like this, he caught his surface layer is not great. But if you can get past that you realize that he's very genuine. He's just very emphatic about what he's talking about. And the advice and the content that he puts out is top notch is extremely good. So if you are trying to build some sort of business, or you even just need a bit of a kick in the pants to keep learning, I would definitely recommend checking out. Gary Vaynerchuk his latest book, which is called crushing it, so his I first read his his book, crush it with like, I don't know, 810 years ago, - -67 -00:53:00,390 --> 00:53:02,790 -Scott Tolinski: so there's crush it and crushing it. - -68 -00:53:03,210 --> 00:54:11,340 -Wes Bos: Yeah, so crush it came out. Let me let me find when it came out. 2009. So it came out nine years ago. And it's really what spurred me into that you can just go ahead and run your own business online. And it sort of like gave me permission to just go for it and not have to have permission from anybody else, you know. And nine years later, he has sort of followed up with this next book, which is called crushing it. And it really just goes into like some social media stuff. But really just like how do you as a just a single person, go out there and run a business and make it happen, even though you're probably short on time, and you have all these excuses out there. I highly, highly recommend it. It's super good. I already got my wife listening to it because she's trying to build her own business right now. And it's exactly the advice that I think a lot of people need right now. So check it out, crushing it, the audio book just came out. It's him narrating it which is really funny because he goes off script all the time. And it's not not boring at all. So check it out. - -69 -00:54:11,520 --> 00:56:45,750 -Scott Tolinski: Nice. Cool. I'm definitely gonna I don't consume a lot of Gary Vee media, but I'm about to because I just got a nice big ol recommendation for it. So I'm definitely gonna get that book up. Oh, my sick pic is a library for JavaScript in specifically react but also JavaScript is pop motion pose. That's a lot of peas there. Hopefully I didn't pop out my microphone, but we have a pop motion.io forward slash pose or just pop motion.io and pop motion pose is the declarative motion system for HTML, SVG, react and React Native. And it is pretty much the way I like to look at it is like styled components for animation. You end up defining your components just like you do in styled components. So it's like posed The component name or pose, wrap the component name, if you wanted to use styled components. And then you sort of define different poses or different positions, right. So normal normal animation sort of libraries, you have like an in and out or whatever. But this is a little bit different. If you had like a menu, you would describe the open state and the closed state, you would describe these two different named states that are two different locations or two different whatever you can have as many as you want. You could have like 10, different locations or whatever. But then you just pass in into the component, whatever location you want it to be at. So if you had a menu, and you were to have a toggle, you would say, hey, toggle, now set this to be open. And then with the CSS, it automatically does the animation you have, we have to set anything. And by default, it has some really nice sensible defaults for really nice easing less a little bouncy ease and all that sort of stuff, timing, you can you can customize all that stuff. But it makes flip animations really easy. It makes animations in react really super easy. I had a chance to play around with this for the past couple of days. And as far as animation libraries go, I found it to be really, really nice. There's like dragging animations make it really super simple. It's pretty all encompassing for animations. It has like, yeah, it's the it's really well thought of, and the only downside to this thing right now is that it's still pretty fresh. The docs are kind of lacking. The Ducks definitely need a little bit more for like practical examples and stuff like that. So maybe if you have some time and you're into it, you can commit some of that I've been thinking about doing it little YouTube series on this, because it's pretty sick. I've been a big fan. - -70 -00:56:46,740 --> 00:57:22,410 -Wes Bos: This is so much simpler than like, every time I need to do animation, I have to bust out what CSS transition group Yeah, in react, and I can never remember how it works. And like you have to like have like transition transition group. And then it's always so confusing, I get a lot of email about it in my course, where I try to make it as simple as possible, people are just still so confused. And at the end of the day, I just want to add and remove classes, or I want to be able to set A and B and flip between the two or I want to add items to an to list and remove it. So this looks awesome. And - -71 -00:57:22,410 --> 00:57:37,470 -Scott Tolinski: let's talk about confusing. Every time you'd say anything about animations, people are like react motion. And react motion is extremely powerful. But for the life of me, I just cannot get past the API. I can't, I can't I don't I don't love it. - -72 -00:57:37,470 --> 00:57:39,900 -Wes Bos: I just cannot. I've tried it many times. And - -73 -00:57:41,040 --> 00:57:57,330 -Scott Tolinski: it's just not it's not intuitive to me at all. So pop motion basically has a lot of the power of something like react motion, but with the ease of something like styled components. So definitely a new favorite library of mine. I'm going to be adding it to the level upside to do some stuff and really getting into it. So a big fan - -74 -00:57:58,320 --> 00:57:58,950 -Wes Bos: book good. - -75 -00:57:59,640 --> 00:58:01,740 -Scott Tolinski: Shameless plugs, question - -76 -00:58:01,770 --> 00:58:41,550 -Wes Bos: shameless plug, I will shamelessly plug all of my action to shamelessly plug my JavaScript 30 course if you haven't taken it already. And you are looking at getting better. Like one of the big points we had today is build something that you're invested in build lots of stuff. That's exactly what this course is dedicated to JavaScript thirty.com. It's totally free. The idea behind making it totally free is that you enjoy it so much that you come in by one of my paid ones, which works really well. Holy smokes. I have 170,000 people have taken this course. So maybe you have taken it already. There's not 170,000 people listen to this podcast. - -77 -00:58:43,230 --> 00:59:52,110 -Scott Tolinski: Nice. Yeah, highly recommend. I'm going to shamelessly plug my new series which will be out on Monday, the day that we're recording this. So we'll be out by the time you are listening to this on Wednesday, which is going to be my headless WordPress course in that course we cover getting started with headless WordPress, we cover the WordPress API, talk a little bit about just sort of the pitfalls and stuff you can come in, we use next j s on the back end for a server side rendered version of your headless WordPress site, as well as Gatsby. So we do both little to two pronged approach, right? We do a little bit of Gatsby, we do a little bit of next, and we talk about the pitfalls and the common issues that along with both. Now what we're not doing is we're not building out a whole blog, because if you've built a theme or anything with WordPress, you know that stuff, right? Or you know what you want it to look like this is more of a course to say, here's the stuff that you're going to run into. Here's the general ideas. And here's how to get up and running with a headless WordPress in 2018. And here's how to totally crush it with that. So check it out. It's called headless WordPress that's going to be available level up tutorials.com forward slash store or become a levelup pro and get access to stream all that stuff as well. - -78 -00:59:53,310 --> 00:59:54,120 -Unknown: Sweet. - -79 -00:59:55,680 --> 01:00:03,570 -Scott Tolinski: super sweet. Yeah, that's it. I don't have anything else. Although I do have another story that I promise to tell the rest of running short on time. - -80 -01:00:03,720 --> 01:00:10,110 -Wes Bos: All right, Scott's got a T story if you'd like to hear his t story, hang on. If not, we'll see you next week. - -81 -01:00:10,140 --> 01:02:01,350 -Scott Tolinski: Yeah, yeah, sorry, I don't this is totally unrelated. I tweeted out about this. And people like, I gotta know this whole story. So curious. This is a quick one. When I worked at team Detroit, they didn't have any room for us. So they put us in a hallway. So we just had like car desks in a hallway. Because of that, like all of our personal belongings were just like out in the open. And I had like, gone to San Francisco and bought this really high end fancy tea that you can only get from this one shop in Chinatown. Very, very high end fancy tea, and I spent a ton of money on it. And I have maybe like two glasses of tea with this bag of tea, and someone stole that off my desk. And it's my fault for leaving it out. But I didn't know where else to put it because I didn't have a desk or anything like that. So someone stole my fancy tea, like who steal someone else's fancy tea off their desk at a job like so I went through the office and like was like checking all the different cabinets or any I checked every single kitchenette in this like giant s building, and it could not find it. So someone stole it straight up. And that sucks. So for years and years, I've been thinking about this tea that I only got to have a couple glasses of so I did not know the name of the tea store. I didn't know anything about where it was. I knew what it looked like in Chinatown, so I just start walking around Chinatown. I started texting Courtney. I'm like, I can't find it. I have no idea where it is. then boom. I see it. I go in there. I tell the story to the guy who gives me a private tea tasting and he gives me all his favorite teas and it was amazing. And here I am right now sipping on this tea that was stolen off my desk several years ago that I am so excited to have once again and it is delicious. I have been drinking it this entire episode. And I'm just so happy to have it. That's the story for anyone who caught that tweet and was like what the heck is he talking about? That? Yeah, that's it. - -82 -01:02:02,220 --> 01:02:05,910 -Wes Bos: T thieves. Maybe didn't What? What's your Twitter Scott? - -83 -01:02:06,180 --> 01:02:09,750 -Scott Tolinski: s kolinsky stll ins k i - -84 -01:02:10,470 --> 01:02:18,840 -Wes Bos: beautiful. I'm at Wes Bos if anyone else wants to follow us on Twitter and I were also the same on Instagram as well. - -85 -01:02:19,020 --> 01:02:22,590 -Unknown: Yeah, that I Geez. Alrighty good. That's it. That's - -86 -01:02:22,590 --> 01:02:24,630 -Wes Bos: it. See you next week peace. - -87 -01:02:25,980 --> 01:02:36,030 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax45.srt b/transcripts/Syntax45.srt deleted file mode 100644 index 4afffac4e..000000000 --- a/transcripts/Syntax45.srt +++ /dev/null @@ -1,280 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,590 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here's Scott solinsky and Wes Bos. - -2 -00:00:10,619 --> 00:01:00,960 -Scott Tolinski: Welcome to syntax, the web development podcast with the tastiest treats around and with me, as always, is Wes Bos. Say hello. Hey, and this episode, we're gonna be doing another potluck episode, which is where we take user questions and give you sort of rapid fire answers. Whoever's got the answer, we're gonna answer all your questions. We'll also be posting the link to submit questions on our Twitter. So if you want to be submitting questions for the next potluck episode, which we're going to be doing sort of monthly or something around there will want you to go ahead and submit your questions for the next potluck. If you want your questions right on cindex. This episode is sponsored by blue and comp, which is the awesome web development conference in San Jose from O'Reilly Media and fresh books, which is amazing cloud accounting software. So what's up Wes How you doing? - -3 -00:01:01,199 --> 00:01:27,810 -Wes Bos: I'm doing fantastic. We finally finally have some nice weather we had snow like a week and a half ago. And now it yesterday it was 28 Celsius which is let me just convert that to American please do that is 82.4 American degrees II and just absolutely loving this. This warm weather is much needed after a long cold bummer of a winter and now I'm just like, I just want to be outside all day. - -4 -00:01:27,959 --> 00:01:33,030 -Scott Tolinski: Cool. I can do to like open your windows and stuff in your office and I got it open right now. Hopefully - -5 -00:01:33,030 --> 00:01:49,620 -Wes Bos: I've never recorded this podcast with the windows open I don't think so. Hopefully no trucks roll by I have it open pretty often when I'm recording my my courses and because of the audio gear that I have usually takes away any trucks or birds or whatever is rolling by. - -6 -00:01:49,949 --> 00:02:14,340 -Scott Tolinski: Nice. Cool, man. I'm doing all right. Ever since Ryan Yeah, I'm surviving ever since my little issue here. I've been like trying just like not not having any caffeine. I'm like keeping in. So I'm like a little foggy and slow today. So if my questions even a little foggy and slow, that is why it took me like four tries to get this intro correct for this episode. So hopefully we're gonna we're we're gonna be right here. - -7 -00:02:14,489 --> 00:06:00,510 -Wes Bos: Awesome. Well, let's kick it off. I'll grab the first question. And we'll sort of work through it. And then we'll we'll go through the rest. We should also say if you have questions for us are things that you'd like us to cover on the podcast, whether it's big or small. Sometimes these things are smaller little pieces that we'd like to tell people. That's why we put them in a potluck episode, make sure you click the link in the show notes. And that will kick you off to the forum where you can submit your question. So this first question comes from no name. There is no name in there. So good. So yeah, let's, uh, let's call this person Sarah. So Sarah asks, What is an efficient way to process huge data in brackets greater than 740? Meg's from a third party API without pagination, sadly, in node j. s. So this is I thought, this is a great question because I have run into this at some point in the past where you need to pull in a whole bunch of data into your application and then do something with that data in an example that I've had before is, I was doing a first Facebook application for a vitamin company. And this vitamin company would put a pin code underneath the lid of every single bottle of vitamins that they have made. And they had gave me a Excel spreadsheet full of over a million pin codes. And they're associated, like if they were a winner, or not a winner and, and things like that. So that was nuts. And I had to import them into it just a MongoDB had to like massage the data a little bit like I had to transform it into an object. And then I had to put them into MongoDB. And I had to try to read this 1 million pin codes into memory, and then import them into MongoDB, just by looping over each one, maybe doing 10 or 15 at a time. And the whole thing crashed, it just fell over. Because you can't read that much data. It depends on how much memory but at the time, my computer just did not have enough memory to store all the information about those pin codes into memory at once. So this is kind of I The reason why I like this question is because they will teach us about streams versus buffers. So you might be familiar with streams versus buffers. If you've ever used Gulp before, sometimes when you use Gulp, you have to mix and match streams and buffers and they don't totally get along. So you have to use a converter. But the idea of a buffer is that you've read some data. Let's say you have a CSS file, you read the entire CSS file into memory, and then you go ahead and process it. Change it from sass into regular CSS, right? I like to equate that to if you're eating a sandwich, you probably it's like a mini slider and you just pop the whole slider into your mouth at one g once it's in your mouth that you started chewing, eat it. However, what happens if you have a sandwich that is too large, it let's say you have a comically huge size submarine sandwich where it doesn't even fit into your house at all. So it's like poking out the front door. What you need to do in that case is, as this massive submarine sandwich is being brought into your house, you need to start dealing with the sandwich as it's flowing in. And that is what streaming is. So instead of reading all data into a buffer at once you can stream the data. And as those pin codes or as that submarine sandwich was sort of coming into the house or the application, I was immediately dealing with it as it was coming in. So that you're you're not always you don't always have all the data at once you sort of just deal with it in chunks as it streams into your application. And that is exactly how you need to deal with very large files when you're working in a no jazz - -8 -00:06:00,570 --> 00:06:05,160 -Scott Tolinski: nice. Do you have a lot of comically large submarine sandwiches coming into older? - -9 -00:06:05,400 --> 00:06:18,060 -Wes Bos: I wish? I wish. Yeah. But uh, No, I haven't had a comically large submarine sandwich. And I remember when I was a kid in school, we'd have like sub day, did you ever have like pizza day and sub day? No, in school? No, - -10 -00:06:18,120 --> 00:06:19,830 -Scott Tolinski: no, at least I didn't. - -11 -00:06:19,860 --> 00:06:45,120 -Wes Bos: Pizza day was a huge thing for me growing up where we were just like, you bring in three bucks, and you would have pizza, or we had Hot Dog Day and you'd bring in a couple bucks and get out get a couple hot dogs. And one day, we had sub day and they would bring in these just mass of subs on these like 10 foot boards, which I can't imagine any fun to transport. But we stream them into the classroom, cut them into little pieces and fed them to the children - -12 -00:06:45,180 --> 00:08:02,430 -Scott Tolinski: duty. Okay, so let's check out the next item in the Pollak, which is from Benjamin Snyder. And the question is what's new shiny right now that you think is going to go the distance? So what new shiny thing and web development do you think is going to go the distance? And for me, it it seems like it's, you know, been something we've been talking about a lot, but in my opinion, the graph qL overall, but Apollo specifically in the graph, qL community, and that that sort of scene is still very much the new and shiny thing to me. And that is the the one thing that I think specifically graph qL, but when when people use graph qL, for the first time, they're sort of like, wow, I get it, that's great. I don't have too many people that I see use graph qL and being like, I don't get it or I don't like it, right, because once you use it, you suddenly see how lovely of an experience the queries are. And just everything around it is. So for me, I would say that Paolo is the the library more so than relay or something like that. But graph qL specifically, I think is the new and shiny thing that is going to become much more of a much more of a common thing over the next year, your next couple of years or so, - -13 -00:08:02,460 --> 00:08:59,130 -Wes Bos: yeah, I totally agree in the fact that it's, it's like gonna replace rest with meaning that or maybe not necessarily replace rest. But in a lot of applications, you will be using it instead of a REST API, or you will actually be having a graph qL server that consumes an existing REST API, and then maybe adds some other stuff on top. And that's really cool, because it's going to be an absolutely every single language where people are going to be able to use this graph QL. And it's not just a JavaScript and react thing. Like I know sometimes Scott and I are always talking about react and JavaScript, but this graph qL is going to be across the board in every single language are ready is and I think in it's gonna take a while because it requires huge buy in from both the server and the client record requires rebuilding large pieces of your application. So I don't see it, like exploding with popularity and all sudden everybody's using it. But over the next five years, I definitely see it gaining some serious, serious steam. - -14 -00:08:59,190 --> 00:09:42,899 -Scott Tolinski: Yeah, it's just such a joy to use writing graph qL queries overall, or even the the graphical interface, like when I'm teaching now, in my latest headless WordPress course, when we do the Gatsby stuff, and working with the WordPress API, it is such a joy to go into graphical and type out your query and see all the data coming back. For those of you who don't know, graphical is this thing that can come along with graph QL. And it's basically an interface for testing queries where you write your query out, and it immediately spits out the data, but it's also sort of self documenting. You can click into your objects and sort of see what the potential children and stuff are inside of these things. And it is just surprisingly excellent - -15 -00:09:42,919 --> 00:09:47,970 -Wes Bos: to use. Have you checked out well while we're talking about this graph qL Have you tried out graph qL playground - -16 -00:09:48,000 --> 00:09:48,690 -Unknown: yet? No, I - -17 -00:09:48,690 --> 00:10:45,480 -Wes Bos: haven't. Oh, allow me to tell you. So graphical is this like app that comes along with any graph qL server and the folks over at graph cool who are who are behind Prisma They sort of took that and built it into a even more of a resilient application have used this. Okay? Yes, it's awesome. So the way that it works is that it you can connect to your your graph qL API, you can see your schema just like you can in graph graphical, but you can write your queries and your mutations and your fragments in tabs and you can save them. When you run them. The data will show you on the right hand side, it will show you tracing. So I was having some serious issues with slow queries. And I was able to use the the tracing that was built into it. To visualize where was where was the slowest slowness actually happening was that my app was talking to the database was at the request. Yeah, it's, it's really, really cool. It's a desktop app as well. So you could just download that. And - -18 -00:10:45,649 --> 00:11:09,480 -Scott Tolinski: yeah, definitely use this. Interactive multi column schema documentation, automatic schema reloading query history can Okay, so let's solve really sick. I remember I've used this because this is built into the graph cool, like UI version of graph. Cool. that's out there. Yeah, this thing is pretty darn nice. So man, the tooling around graph qL as well. Yikes. This is awesome. - -19 -00:11:09,659 --> 00:12:09,090 -Wes Bos: All right, let's grab the next one. All right, I got two quick ones right here that is a little bit more lighthearted. First one is Wes, can you make a course on how to barbecue some meat properly. And that's funny, but I actually hope to do that one day, I really want to build like, like a cooking series, where I go through a whole bunch of different things that I like to cook like a pizza and a kabocha and a meat curing and smoking. And I just want to go through like the 10 cool things that Wes likes to cook. And I think that will be like kind of a little passion project that'll do at some point, I think it's fun to we've talked about this Previously, on the podcast, we have a whole podcast related to Scott and I's hobbies. And I think it's it's really important when we talk about our burnout episode a couple of weeks, weeks ago, as well, it's really important to have these hobbies where you're always trying to learn something new in a different aspect of your life. Because I feel like at the end of the day, it makes me a better developer to constantly be learning something else other than web development. - -20 -00:12:09,270 --> 00:12:27,210 -Scott Tolinski: Yeah, I get a lot of people telling me to do breakdancing tutorials do and it's funny because it's like something I would love to do. But at the end of the day, there are like a lot of people who are more qualified, who would probably do a better job. But that is a I would absolutely watch a cooking with West series. Absolutely. - -21 -00:12:27,330 --> 00:12:54,029 -Wes Bos: There you go. And then another quick little one is somebody asked, how do you go about learning a new language or a framework? Do you read books, Docs, or watch video? So we covered this last week? I think this question was asked before we released the podcast. But if you want to know how Scott and I learned quickly our strategies or tools, our thoughts on video versus books, then go back and listen to Episode 44, where we talk about how to learn quickly. - -22 -00:12:54,120 --> 00:15:35,039 -Scott Tolinski: Nice, cool, okay, so here is one from my homie Adam Rasheed here. He asks, well, what are the best things to keep in mind when you're the only dev on a team? And I like this question, because I've been the only dev on a team for numerous things, whether it's agency stuff, or whether it's for my own work, whether it's for startup or whatever. And I think the stuff you need to keep in mind the most is that you have lots of responsibilities, you have a responsibility for one clean, organized code, you have a responsibility for nice, well written commit messages in your version control. Because chances are, you're not going to be the only person that's ever touched this thing ever. Like what if somebody, you change your job and somebody else comes in, and then they come back, and they want to see the history of this thing. And they get messages are all like messed up, fixing mess up, you know, like, you want your git commit messages, you want all of that stuff, the commenting, you want all of that stuff to be just like it would be if you had a team, because you never know when you're going to have to drop this project and somebody else is going to have to jump into it, there's absolutely nothing worse than picking up a project that's either undocumented or just you know, written as if you're never going to touch it again. So I like to approach projects, especially when I'm the only dev as if I would be working on a team. And I'll be passing this off to somebody else. Because for me, that is an extremely important things. And I just think about how many times I've been burned when I started at a new agency. And all of a sudden, I've been given a project that either came from a different agency or a previous Dev, and it was just a total mess, and just trying to make sense of either the the CSS or trying to make sense of any of that stuff. So for me, it's that you have a responsibility to really keep these things as clean, organized and excellent as possible as if you were working on it with a team. Other than that you also have responsibilities to make good decisions on the tech you're using. There's a lot of new shiny stuff and I like using new shiny stuff too. But I wouldn't necessarily recommend something that You don't know if it's gonna be around in X amount of years, because that really puts your potential client in a tough spot. Like what if you use some like obscure CMS that no one has heard of, and then they need updates to it. And the new dev comes along was like, I've never even heard of this CMS. So you do have lots of responsibilities for in the future. And so just keep that stuff in mind and make sure you're doing right by you and your client, as well as giving yourself those opportunities to learn like we always like to have. That's pretty much it. Yeah, there's a lot of stuff there that you could say, but keeping clean and organized is, I think the biggest one. - -23 -00:15:35,159 --> 00:16:02,909 -Wes Bos: Yeah, I totally agree. I think it's with developers and contractors that work on your house. Always think the last guy was a total idiot. It's often because of the things that you notices where somebody is, there's too much in the developers head. And not enough is written down in consistency and tests in documentation, whatever it is, at the end of the day, yeah, you do you want the next guy to come in to be like, wow, - -24 -00:16:02,909 --> 00:16:33,090 -Scott Tolinski: they did a great job. I was actually I had been given some code, I was doing some consulting, and I'd be given some code. And I looked at it, and I was just like, wow, whoever did this did an excellent job. And there's nothing there's a great, that's a great feeling when you can look at someone's code and just instantly know that whoever worked on it did a great job. Speaking of doing a great job, one way that you can continue to do a great job and grow yourself in your career is by attending the fluent comp, in San Jose, California. - -25 -00:16:33,450 --> 00:17:34,020 -Wes Bos: Awesome. So we are talking about fluent conference from O'Reilly, you know, O'Reilly, they have the books with the cute cute animals on the front. And so they have a conference on June 12 to 14 in San Jose. But they also have training on the 11th to 12th. Which, if you want to come maybe a day or two early and sit through a workshop with some of the industry's best, I can highly recommend that you check that out. So what are some of the workshops they have a complete introduction to react, which is from a Brian Holt and Patrick Hagen. So Brian Holt works at Microsoft, I think he used to work at Netflix, which those are two major react companies I would definitely trust, trust what they have to say, developing Angular web apps with TypeScript sounds pretty interesting. webassembly deep dive. So there's, that's actually one kind of cool thing we should do a show on is lasme webassembly. And like, what is it? And why is everyone so excited about talking about it? There's another one here learning graph qL, react, and Apollo Well, well, well. - -26 -00:17:36,570 --> 00:21:11,060 -debugging performance, I love as much as I love conference talks, I think workshops are sometimes a better spot to get that hands on experience that you need. I teach a lot of workshops myself, and I love having a full seven or eight hours with like 20 or 30 people and being able to lead them through some actual deep dive real world example. So check it out, hit the link in the show notes. And you can use the code syntax for 20% off. Thanks so much to fluent for sponsoring is the next question we have is something that some people have been asking me like crazy, because let me the question is is Redux for react dead with the new context API. So let's rewind real quick, I put out a video a couple about a month, a month and a half ago on reacts new context API, which let me explain context really quickly. So in react, we've got kind of two ways to hold data or pass data, you generally hold your data in state, and you pass your data via props. And it becomes a bit of a problem when you need to pass your data from one component down seven or eight levels, because you're doing what is called prop drilling, where you have to pass the data down seven or eight levels, and that sucks. So there's this like kind of, there's always been a context API in react. However, it's always been kind of secret, because it's been experimental. And we're always been told, don't necessarily use it. However, the new context API that has come out is pretty neat. So the way that the new context API works is that you can create a context and a file in that can hold that can hold anything really, it can hold data, it could also hold like functions for updating that data, it can hold it really anything that you want. And then when you want to expose the stuff that is in that context, to a another component that is maybe seven or eight levels deep, you simply import that context, and you use a render prop. So you've wrapped your component in it will give you a render Prop, and you'll be able to pass those data in that functions on down, which is really, really exciting. So I was a big fan of this new context API, because part of the reason why people have reached for Redux is just because they need a simple way or a way at all. To get data from maybe your highest level down to your lowest level you need to be able to move your data around your application without having to explicitly pass it down all those levels. And that's what the context API will solve for you. So Redux does that as well. Redux allows you to inject your store in at any level deep, and you can expose that data via props. And that's really exciting. But Redux does a lot more where it allows you to take your both your data your store totally outside, it allows you to write how that data is updated via your reducers and your actions all the way outside, it'll it makes it really easy to test your application in your data structure. You can also have some fantastic tooling around Redux where you can do what's called What is it called time traveling where you can go back in time, you can turn things off. So the only the one little piece of Redux that is getting replaced is the are not replaced, but is now made available via the context API, which is getting your data from one place to another, the rest of the stuff is still totally in Redux. That said, Is it going to stop a lot of people from using Redux? I think so. Because I think a lot of people were unnecessarily using Redux just because they had they needed the ability to inject data at any level. And now that the context API makes that so simple, I don't think we'll be reaching for it as quickly, which I'm really excited about. - -27 -00:21:11,090 --> 00:21:35,130 -Scott Tolinski: Nice. Yeah, I really, I don't know. I like I like this kind of thing. Because, again, it's it's built in now. It's the solution and that sort of way. And it is going to make or I guess, simplify some of those things without needing to learn a whole nother platform. Right when you don't exactly another platform. Unless you do need it. Right. So yeah. Thank you for bringing that to the potluck. - -28 -00:21:35,300 --> 00:21:37,710 -Wes Bos: Yeah, that's such a good name. I love it. Yeah. - -29 -00:21:37,950 --> 00:23:39,780 -Scott Tolinski: I'm really, really loving the potluck theme. It's so good. Yeah. The next item on the picnic table here is from Riley, which is what is the funnest project you've ever worked on the hand? Why? And this is going to seem totally, I don't know, cliche, in a way. But the most fun project that I have ever worked on is my level of tutorial site, because I have full control over it. And I have just unlimited opportunities to try things. And I use it as a playground to try all sorts of new tech. Like, for instance, I was just talking about pop motion pose in the last video. And like if I want to throw pop motion pose into a dev version of my site, I can just throw it in there. And I'm, you know, I have no one to answer to other than me. So I get to just use it as a total playground for code. And I take all those opportunities, especially in development branches, and use it as just a place to try out experimental stuff. So for me, it's a creative playground. And that's why it's the most fun project that I work on. The most fun project that I get to like work on in use is my boy tools app that I made for myself, because I use it all the time and competition. Basically, it's an app that allows me to put my moves into my phone, and I get to select which ones I've used in a competition, and it removes all the ones I've used. So at like the later rounds, when you're getting into the semifinals or finals, as I do. You actually you get to see all of the stuff you have left where other people are like sort of searching their brains to try to say, oh, like what moves Have I done already, right? Because it's in breakdancing worlds, you get docked for doing the same thing twice. So if I have the ability to see instantly all of my moves, for me that makes it really fun. And because of that, I get to really say, hey, what are their kind of tools and things would be really useful for me to have in this in practice or in competition. And I can just write them in quickly and get to try those out. And since I don't have a ton of users, I don't have to worry about breaking anything, I just throw it up there and, and get to try some really fun stuff out really applicable in my day to day life. - -30 -00:23:39,930 --> 00:24:33,000 -Wes Bos: That's I like that. That's really cool. I also really enjoy working on my own platform. But I'd say probably the most fun I ever had is I've built around three or four or five medium sized scraping projects. In the past. I used to run a daily deal scraping website where it would scrape like Groupon and all these other ones into a single email and a page. I had written a scraper for Kijiji, which is sort of like Craigslist down in the States, it would it would grab all of the listings of bikes and and text me as soon as a new one was on and I would buy and sell rode bikes. And I had written a couple other scrapers. I think those are always the most fun because there's no rules. There's no documentation. It's just a website, and you got to figure it out yourself. And I really liked that both the problem solving as well as scratching your own itch and making something that's going to better you as a developer or just a bike flipper. - -31 -00:24:33,030 --> 00:24:46,740 -Scott Tolinski: Yeah, I've a funny follow up question. Is there any project that you've ever been presented like freelance wise or otherwise that you did not get to do that would have been like totally wild? Oh, that's - -32 -00:24:46,740 --> 00:25:44,910 -Wes Bos: a good question. So there was a project that I was presented maybe like seven or eight years ago after I initially did that first webcam where I put the glasses on top of it. I did all this face tracking that got an enormous amount of attention from people who wanted to do some really cool cutting edge stuff. Lots of people contacting me wanting to do online glasses and stuff like that. And I did a couple of those. But what I didn't get to do is some like, like next level 3d stuff where it was using 3d cameras and tracking the face. I think it was for a Google or some sort of like really big, I think it was like a chrome experiment. But it was just so far past my my skill level, I had sort of hacked together this face detection. And then people assumed I was this amazing machine learning specialist. And I was really bummed out because it would have been so much fun. And I would have paid super well. But I just couldn't take it on because it was too far past me at the time. What about you? Yeah, - -33 -00:25:45,090 --> 00:26:31,710 -Scott Tolinski: we worked at a small agency in Michigan. It was like a 12 person agency. And we were approached to build the Insane Clown Posse website. By the insane they reached out to us, I see. Yeah. And so the owners of the company didn't know who they were. And so they were basically like, okay, here's what we're gonna do. We're gonna put on that icps music all day long. And at the end of the day, if we feel like we should do this website, then we'll accept it because it would have been a big paying project it would have been a decent You know, it would have been a decently large project for this agency. They put on they put out ICP all day at the end of it. We're just like, I don't I don't think so. It's not gonna have Well, we'll pass on this. Wow, we didn't get to build that man. - -34 -00:26:31,770 --> 00:26:37,800 -Wes Bos: I CP his jokes are probably some of my most favorite jokes in the world. Like - -35 -00:26:39,180 --> 00:26:41,100 -Scott Tolinski: the the magnets. - -36 -00:26:41,219 --> 00:27:04,770 -Wes Bos: I don't know. There's like a show Workaholics. You ever watch that show? Yeah. Fantastic. And they always make ACP joke. And there's like a documentary on Vimeo. I'll find it and link it up in the show notes about just about juggalos, which are the people that follow ICP around. And it's such a bizarre subculture of people that follow this band. - -37 -00:27:04,799 --> 00:27:17,160 -Scott Tolinski: Yeah, being from Michigan, we have our fair share of juggalos and fago. And all that stuff. Although fago is delicious. Whether or not you're an ICP fan or not, which is something they're they're big fans of so - -38 -00:27:17,610 --> 00:29:51,570 -Wes Bos: Oh, man, that's fantastic. All right. Next one up is a what's the best use case for j wt I've seen some people use it for sessions in react natives as well as web apps. But then I've seen lots of people saying simple session cookies are better for the latter. Thanks. So we've talked about this a couple times on the podcast. But let's go over real quick, what is JW t jadibooti stands for JSON web token, and is sort of a replacement for session cookies, where when you log into a website, and what happens is that you get a cookie, and that set was some sort of unique identifier and that unique identifier comes along with every single request that you make to the server. And then let's say you upload a photo, then it knows that you're currently logged in as Wes Bos, because your session cookie matches the logged in session that lives on the server, right. And that's a fantastic way to do it. But JW T has sort of come along and they give you these tokens, and you can then take that token, and you can store it really anywhere you want. And the most popular way to store it is you put it in local storage, you can also put it in a cookie and have that sent along for every request as well. So there's that. And then when you have a request in reactor in any JavaScript application, you generally write some sort of middleware that says any requests that gets shot off to the back end, make sure you attach this JW t as a header. And it's great, because you don't have to worry about having sessions on your server, you just have to worry about encoding the JW t on your server and making sure that that lines up with someone in your database. So it's sort of like stateless, which is great. You don't have to worry about maintaining sessions on your, on your server, if you're doing that in memory that sometimes can get tricky. Or if you have multiple servers, and you have to share it in a database between the two. And then JW T will also allow you to store a little bit of data inside the JW t. So you could store the user's name, you could store a link to their avatar, you could store some permissions, just like handy stuff. That's something you might need to display on the page. You can never actually use it for doing authentication. That all happens on the server but it is handy to be able to store a couple extra pieces of info in the jadibooti. So is it better A lot of people think so there's are definitely still use cases for cookies and sessions. I think that's in some cases, it is easier to use a cookie in a session. But it's just another way to do authentication in your application in my upcoming react courses going to hand roll the JW t authentication, so I'm pretty excited about that. Sick. Okay, here's - -39 -00:29:51,570 --> 00:32:10,680 -Scott Tolinski: a here's a good one. I like this question. I'm 30 with eight years of experience. I've worked with several technologies like Java C sharp JavaScript, react, react, native Angular graph qL, node j, s etc. I feel like I know a little bit of everything, but I don't master any topic. And that makes me feel insecure, should I focus on something and try to master a particular technology. And this is from Christian. So thank you, Christian for submitting this. I strongly believe in in really narrowing your focus down to a few things, I have largely been known for a lot of my life as the jack of all trades, master of none. So this one definitely reaches out to me in particular, and not even just programming. I was trying to do way too much stuff, right, just way too many different things. And carnie came to me and was basically like, you need to just pick a couple things and just go for them. And you don't necessarily know ahead of time, when you pick these things. You want to maybe use your gut, you want to base it on some some things like, well, what am I see myself doing in the future? What do I enjoy doing? What is something I'm going to be happy doing? But in my opinion, you do need to narrow your focus here, because a lot of these technologies, whether it's Java, and C sharp, and then the other webtech, right? Is your Java and C sharp skills, are those going to be helping you build web tech, do you want to build web tech, if you're building web stuff, it is probably going to be best to focus on on on several key languages and several things that you really like doing, you know, if you if you really double down on your JavaScript period, like your JavaScript core skills, then automatically you get better at node, you get better at react, you get better at Angular, you get better at all that stuff, right? So in my opinion, they really think long and hard about what you like doing. And then if you like doing web stuff, I would double down on your JavaScript knowledge rather than trying to have all of these different things. Because again, it will not only will it make you more employable, but it will make you feel more confident and stuff like that. And you can always do Java, C sharp, whatever, and for fun and whatever, and have it be less of a focus. But I think you do need to straight up say, almost even out loud, like, I'm going to narrow my focus to this. And then I'm going to be that kind of developer. - -40 -00:32:10,710 --> 00:33:37,890 -Wes Bos: I think that's fantastic advice just for for life in general. And that's sort of how I've always seen it with skills in life is that, okay? Now I'm going to focus on being really good at WordPress, I did WordPress for a couple years, and I got really, really good at it. And, and then I moved my focus to JavaScript and said, I'm going to focus getting really good at JavaScript, and then I moved over to to doing node and then I got more into react. And it's nice to be able to say, I am currently trying to slam dunk this thing. And then I'm going to once I get pretty good at that I'm going to shift my attention away and focus in on something else and get really good at that thing. And then maybe you focus on CSS and in life in general, like a couple years ago, I took up smoking and I just really focused on that way of cooking and not smoking. So no smoking me and the smoker had to really focus on your your smoke, literally hundreds of cigarettes a day to get really good at it. And now it does, it just comes naturally to me, I just smoke a pack a day. But I like that because now it's it's not so much of a focus of mine, I do it quite a bit. But it's not something that I really need to put a whole bunch of time and effort into it. It's just a skill that I now have. And then you move move on to something else in your life. And then before you know it, you're 1015 years into your career. And you just started this incredibly well rounded developer because you've gone deep on six or seven different areas over your career. - -41 -00:33:38,100 --> 00:33:39,840 -Scott Tolinski: Nice. Yeah, totally agree. - -42 -00:33:39,900 --> 00:34:53,190 -Wes Bos: swit. Let's take a break for a sponsor. Let's talk about our sponsor real quick. And that is a fresh books as dealing with your day to day paperwork ever brought about feelings that resemble anything close to joy, satisfaction, or we're doing a ad read from from Freshbooks here? I don't think so I've never had joy, satisfaction or ease from doing any of those things. So no, I don't think you would ever use that. So Freshbooks is fantastic for invoicing, it takes like 30 seconds to login and send off an invoice. It has automated expense tracking, which is so cool. You link up your Freshbooks account to your credit and debit cards. And every single time that you have an expense on your credit card, they will automatically import that into your fresh books, which is amazing. And there's online payments. It's gotten I use this a lot to get paid for paid by Freshbooks for the Freshbooks sponsor on this podcast. And you can you can automatically have people pay you directly into your stripe or PayPal or a whole bunch of different types of accounts. So check out freshbooks@freshbooks.com forward slash syntax and use syntax into the How did you hear about a section? Thanks so much to Freshbooks for sponsoring. - -43 -00:34:53,339 --> 00:34:58,670 -Scott Tolinski: Hey q cool. Okay, I do have another little potluck item here. - -44 -00:34:58,880 --> 00:37:32,730 -Wes Bos: Yes, question. We had is why do thousands of entrepreneurs build a SAS, SAS is a software as a service. So think about some sort like Freshbooks, you sign up for Freshbooks, and you use their software as a service, you pay for it monthly. Why are so many of them built on Ruby on Rails any popular alternative. So I think the reason why a lot of these sasses are built on Ruby on Rails is because Ruby on Rails is a little maybe we should explain it. For those who don't know, Ruby is the language and Rails is sort of this like application framework that's built on top of Ruby. So what you can do is you can take Ruby on Rails, and you can sort of hit the ground running, because it comes with all of the stuff built in for interacting with the database for having user accounts for, for doing all the normal stuff that you would do in an application and you have a startup, it's really important to move as quickly as you possibly can. Because often these, these startups are only have a couple thousand dollars, maybe $20,000, in seed round funding, and they need to build something or you're doing it, you're just bootstrapping it yourself, you need to be able to build this thing as quickly as you can just see if you get traction. So that is why Rails is so popular in the software as a service service space. But there are other alternatives I know in, in the PHP world. So Laravel is a framework popular framework for doing something similar to that in PHP. And then I think even on top of that, there's like a Laravel Spark, let me just look this up as a Code Igniter. Two was one for PHP that I don't know if people are still using Code Igniter. Yeah, Code Igniter was one Laravel. spark is built on top of Laravel. And it does things like automated billing user accounts. So even goes further being like, we know you're trying to build a SAS, let's get you up and running with that, which I have always been so jealous of these, these sort of hit the ground running frameworks in these other languages. Because I guess with Meteor as an exception, we haven't. And there's there's like, there's been sales, there's been a cost sales, there's been a couple in JavaScript, but none of them the Keystone jass was looking really promising for a while. But that seemed to have has fizzled out, which I'm kind of bummed out about. So it doesn't seem to be any, like equivalent in the JavaScript space, we always sort of have to build everything ourselves, or go with a boilerplate or starter starter file where it has a lot of these things set up for you. I don't know, did you have any thoughts on that? Scott? - -45 -00:37:32,900 --> 00:39:01,260 -Scott Tolinski: Yeah, I think is pretty evident in the meteor community, like how many people in the meteor community came from rails, and a lot of it was was people who are in the rails community, we're coming to the node. So I personally used Meteor quite a bit. So I saw a ton of that, or where people were coming in from, from rails and maybe even using CoffeeScript. Because CoffeeScript reminded them so much of Ruby. Agree, I it's one of the reasons why I chose Meteor to build my platform on is because I love stuff like this I I built, the original version of B boy tools was in Ruby on Rails, I did quite a bit of Ruby on Rails for a little bit there. And I really liked it. And I personally love this stuff that will save you that kind of time and take care of one of my absolute favorite things about Ruby on Rails was the scaffolding tools, you could just pop up into your command line and initiate like a new collection. Yeah. And when you did that, it would it would build you the entire form for creating, updating and deleting it would build you the layout. And it would set you up so nicely for all this stuff that again, I just wish there was maybe something like this right now. But the platforms are so specialized in this in that you'd probably have to end up writing your own for whatever you're doing. I even consider doing that. I briefly wrote my own and then quickly abandoned it when I found out how much work it was. So I do I wish there were stuff like this. I love like quick scaffolding tools. I love platforms that make your life that much easier. And if you if you like Ruby, and you like the choices they make and Ruby on Rails, I don't think it's a bad option today even it's a pretty sweet platform. Totally. - -46 -00:39:01,260 --> 00:39:38,580 -Wes Bos: I also should say if you are looking to to get a bit of a head start, I have had a lot of people take my learn node course just take the finished files from it, and then build on top of that, because that that comes with a couple different models, a couple, a couple different controllers, routing, authentication, all the stuff that you need to like a back end that you can edit it. There's also this really nice hackathon starter. If you're looking to get into you want to hit the ground running it, maybe you're at a hackathon, you need to build a little app in a weekend. hackathon starter is a boilerplate for node web applications. Pretty nifty as well. I've, I've used that in a couple little projects before as well. - -47 -00:39:38,880 --> 00:41:06,270 -Scott Tolinski: dope. Cool. Yeah, that's a good one. Okay, here's another one sort of, I guess not really along those lines at all. Would you s spot which is stands for single page application versus SSR for large reactor view apps. And the single page application thing would be more of loading all of your JavaScript up and having your Java Script sort of deer page transitions, routing and all that stuff on the front end, rather than having it be server side rendered sort of like a typical server side loading of your pages. And I personally would say, if you can swing it, and you have the time and you have whatever, I would choose SSR over it, because of initial loading times, SEO support, all sorts of just a, like nice little things there that said, like SSR stuff is way more difficult than it needs to be. It's so like, it's so annoyingly difficult sometimes, especially when you're having to get into a lot of custom stuff. You know, one of the reasons I really do like next js is just the simplicity that it gives you for server side rendering. I think there's like no other platform that makes server side rendering as part of the platform as next js, I wish Meteor would have taken some cues for how they did server side rendering, and how to just sort of be the default, the way you do things. I would choose SSR, if you can swing it, and you have the ability to make that happen, because I think the benefits definitely outweigh any sort of the time you're going to put into there - -48 -00:41:06,300 --> 00:42:03,810 -Wes Bos: wicked. I've got another question here says, Ah, it's from Joe Stewart, I need to make an online learning platform. What do you use? And what do you recommend? So the answer to this is both gotten I have custom built our own and the the whys in the house behind both of ours is in Episode 14 of syntax, it's called our stacks explain, and it goes into all the different pieces of it. We both have JavaScript stacks, all the way all the way down, or all the way up, which is pretty cool. But if you obviously can't build your own, there are lots of good things. I've heard good things about teachable, which is good for selling online courses. I've heard Moodle is good. That's I guess that's more targeted at like the the grade school in high school and university crowd. But there are lots of these things are called LMS learning management systems. There are plenty of them out there. If you're looking to build your own. Even with WordPress, there's lots of good plugins for that. Yeah, I - -49 -00:42:03,810 --> 00:42:20,210 -Scott Tolinski: struggled myself with should I have used something like that? How much of the features would have benefited off of it the end of the day, I have so many like custom needs that like it just doesn't necessarily make sense to hack together someone else's thing rather than using all my own good stuff. You know, it's tough, - -50 -00:42:20,210 --> 00:42:56,550 -Wes Bos: the biggest thing I have for why did you build your own versus use x, y, and z is that I'm trying to be competitive here. And if someone everybody else is using this out of the box existing thing, then I can come out swinging with new new features new platform, like a one really good example of was when I turn on my country code discounts, like no other platform had that at the time. And I just like it, put it out. And it did really well for me. And now you you started to see people scrambling trying to get this implemented into their own platform. By the way, please don't email me asking about that. ever talk about - -51 -00:42:56,550 --> 00:43:05,280 -Scott Tolinski: scrambling, you're you're not believe how many emails I get. I say, hey, Wes, does the country code thing? When are you gonna do it? I'm just like, gosh, darn that. - -52 -00:43:06,270 --> 00:44:35,100 -Wes Bos: I get so many emails from people being like, Hey, can you share how you did it? Let me go through it real quick how it does, I'm taking notes by the CloudFlare gives you a header that tells you which country it is the person is coming from. And then based on that I give the person a coupon code for that specific country. And then when they check out, it checks at the country that they're coming for matches up with the coupon, because I built my own coupon system, it I was able to extend my coupon system to allow checking for specific countries as well as specific products. So that's how it is how do I decide what country gets wiped off of that is my own private information? I will never share that. Because I like it's not that I don't want to to share this information with everyone. But I do not want to become an economist. And I didn't I'm already I already get lots of emails from people being like, Oh, this is not fair. This country gets more than this country. And like that's the last thing I want to be spending my time on. I've spent a lot of time talking to people in different countries and asking them, what do you get paid? How much is rent in your country, and have a pretty good idea of what is fair. And I do not want to be in the middle of some sort of like, I know President Obama flies into to talk about renegotiating a specific country quotas. So there is there is a library somebody posted on someone that someone built it with an app that uses an API to calculate parody purchasing power, which you could probably check that out to get some some numbers that are fairly close to me. - -53 -00:44:35,160 --> 00:44:48,270 -Scott Tolinski: I'm gonna do that. Check that I got to implement this. So many people are asking, and for those of you who are asking, it's not that I don't want to it's that I have way too many things on my list. And this is on there as well. Yeah, don't worry about it. It's gonna happen. - -54 -00:44:48,300 --> 00:45:20,910 -Wes Bos: Actually, one of my favorite parts about all this is that some countries, namely India, love to bargain. And, like it's just I guess it's just part of the culture to bargain bargain. In haggle for four prices, so it's funny some of the emails that I get, or people are trying to tell a such a sob story or, or just trying to go back and forth with me. And I don't have time for that. So I don't entertain any of that. It's just that I hope this is fair. Take it or leave it. I'm doing my best here to make it affordable around the world. Nice. - -55 -00:45:21,030 --> 00:45:21,720 -Unknown: I like that. - -56 -00:45:22,710 --> 00:45:28,080 -Wes Bos: All right, I think we're coming up on the end of the show. Do you have anything else? Or do you want to do you want to call it there? I think - -57 -00:45:28,440 --> 00:45:59,370 -Scott Tolinski: we have covered quite a bit. We still have quite a bit of questions in here. But again, if you have questions you want to see answered on the show, please check out the show notes and submit your questions, because we have them all open here. And although we probably have not gotten to your question, because there's a lot here, we always appreciate more questions, because it definitely helps us pick new show topics or even larger shows, or being able to answer any of this sort of stuff. We have a lot of show topics coming up that we're really excited about from user questions here that are going to be into full shows or hasty tree. Yeah, - -58 -00:45:59,400 --> 00:46:25,950 -Wes Bos: I love this. Because sometimes we see the same question six or seven times and then we know we have to do a show on it like us. Specifically, people always are asking about our boot camps and college and a comp site degrees worth it. Right. And that's, that's like a show that we have coming up. That's going to be an entire show, because it's such a big topic to cover. But keep rolling in the questions. Because as we see the same questions as six or seven times, we know that it's time to create an episode on it. - -59 -00:46:26,160 --> 00:46:28,830 -Scott Tolinski: Yeah, absolutely. Do you have any sick pick? - -60 -00:46:29,340 --> 00:48:05,970 -Wes Bos: A pick? Yes, I do. My sick pick today is going to be a repack from one of the earliest episodes we did. Our viewership has grown substantially since then. So I know a lot of you haven't heard the sick pick. And it's an app called parcel. And what parcel does is it allows you to track all of your online orders without having to incessantly check them. So like how you know that pain when you order something online, and you're always checking the checking UPS or FedEx or or Canada Post and it sucks. It's such a pain. So what parcel does is it gives you push notifications. So whenever any of your delivery status changes, you know exactly when they're going to be coming if they've been delivered or if they haven't. And one of the coolest things I like about it is that it gives you an email address. Like there's an iPhone app, there's a OSX app, there's a web app that you can go, there's probably a Windows app, and it gives you an email address. So what I have in my email is these rules where anytime I have a email that says your order has shipped or anything along those lines, I automatically forward that email to this special email. And then it will then parse that for any tracking numbers and automatically add it to my partial app and send me a push notification. So for things like Amazon, as well as any automate anything that I buy regularly, it always just automatically gets added in here. And then otherwise, you just add in the tracking number and it will auto detect a carrier for you. So check it out at partial app.com has nothing to do with Webpack or bundling. It's just for tracking actual packages. - -61 -00:48:06,090 --> 00:48:06,690 -Unknown: Nice. - -62 -00:48:06,690 --> 00:49:57,600 -Scott Tolinski: Mine is also going to be an app, this could be an app for iPad specifically, I recently got an iPad to do a lot of testing on it's my first iOS device that I've ever owned, I've never had an iOS devices, I get a lot of people telling me like, you know, maybe bugs on mobile Safari or something like that. And I thought it was about time that I actually have a real device here to test on safari and stuff like that, for all of iOS is wonderful, wonderful Safari bugs, which there are numerous of. And so I got this thing and I decided to get the pen and one of my new favorite apps is this. I don't know if it's Nebu, or ni boo but an EB o and it's a note taking app that is basically a pen and paper journaling app that you can take. And what you do is when you write, it's constantly converting or handwriting into text. And so you can save this stuff as a txt file when you're all done. And let me tell you, as someone who has terrible handwriting, this thing is awesome, because it correctly identifies almost every letter I do except for my A's, which it thinks are twos because I do it weird looking to a but for the most part that identifies all of my words really well. And it has some nice, really nice gestures. You can slash through words to delete them, you can draw and here and one of the cool things I like is if you do a drawing or a diagram or something, you can click and resize it, you can write and then click and drag and move that paragraph. So it's basically like future paper, right. It's like having a notebook paper right here that you can write on. It's all your handwriting and stuff, but you can drag things around on it and resize them and delete them and do all sorts of really cool stuff, underline them to give headings and stuff like that. I really enjoyed this app. I did quite a bit of research trying to find a nice handwriting notepad app for how much I like notebooks and things like that. And I've been using quite a bit so I'm a big, big fan of this - -63 -00:49:57,630 --> 00:49:59,910 -Wes Bos: wicked any shameless plugs that you have. - -64 -00:50:00,480 --> 00:50:59,730 -Scott Tolinski: Yeah, I have a new course out this month called headless WordPress. It's 22 videos where we dive into all sorts of headless WordPress topics. It's a little bit different than some of my other courses. Because it's not like a clear project, we're usually doing like a full project. And since headless WordPress is more or less, something that you have to learn the common pitfalls and things like that, we explore two different routes, which is one through next js and one through Gatsby. And we talk about sort of how you can work with headless WordPress to pull in all of the stuff that you would need to make a normal blog, how to write your components, how to do your API calls, how to work even with graph qL, or, or what sort of plugins you need with WordPress to make the API more complete. So this is headless WordPress is on level up tutorials.com. Right now, you can purchase it outright, or you can sign up to become a levelup pro and get access to that as well as all of the other awesome levelup pro series that are available right now as well. And all of the future ones as long as you stay subscribed. - -65 -00:50:59,880 --> 00:51:33,960 -Wes Bos: But again, I am going to plug my Instagram. I've been trying to double down on Instagram lately, just because I spent a lot of my day on Twitter, but also, I've been on Instagram for years. And I love it for personal stuff. But it's really been taking off for for web developers in the last six months or so. So instagram.com forward slash West boss and I have a nice mix of pizzas, smoked meat, pictures of my kids and wife and web development stuff. So if you are interested in any of those, check it out. I instagram.com forward slash Wes Bos. - -66 -00:51:34,620 --> 00:51:41,670 -Scott Tolinski: Yeah. And I'm at es talansky if you want to see breakdancing footage, and at level up tutorials if you want to see code stuff, - -67 -00:51:42,420 --> 00:51:46,770 -Wes Bos: wicked. Alright, thanks for tuning in and we'll see you next week. Please - -68 -00:51:48,870 --> 00:51:51,480 -Scott Tolinski: head on over to syntax.fm for a - -69 -00:51:51,510 --> 00:51:52,770 -Unknown: full archive of all of our - -70 -00:51:52,770 --> 00:51:58,650 -shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax46.srt b/transcripts/Syntax46.srt deleted file mode 100644 index c20c8d4cd..000000000 --- a/transcripts/Syntax46.srt +++ /dev/null @@ -1,432 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:04,590 -the podcast with the tastiest web - -3 -00:00:04,590 --> 00:00:09,000 -development trees out there, strap yourself in and get ready to live ski - -4 -00:00:09,000 --> 00:00:10,560 -and West boss. - -5 -00:00:10,589 --> 00:00:26,190 -Wes Bos: Hello everybody and welcome to a syntax the podcast with the tastiest web development treats. My name is Wes Bos, I'm a let's let's introduce ourselves assign again, Scott. I'm a full stack developer from Canada. And with me, as always is Scott say hello, Scott. - -6 -00:00:26,309 --> 00:00:30,960 -Scott Tolinski: Hey, my name is Scott to ski. I'm a full stack developer from Denver, Colorado. - -7 -00:00:31,169 --> 00:01:16,830 -Wes Bos: Beautiful. So today we are going to be talking about what's new in JavaScript. So there's all this like JavaScript, as we know is a constantly evolving language. The language itself is always moving. browser API's are always moving new JavaScript API's are always surfacing themselves. We're getting new libraries and new ways we can use different libraries. It's a really exciting time. So today we are going to go through I don't know 10 or so different new API's will explain what they are when you might want to use them. And looking forward to it. So today's sponsor is fluent cough, which is an amazing web development conference down in San Jose and Netlify which is Scott's favorite hosting company will not stop gushing about. Yeah, so how you doing today, Scott? - -8 -00:01:16,979 --> 00:01:32,370 -Scott Tolinski: I do good. I have this uh, this tea that I got from that fancy tea shop. Oh yeah, blue people. It's like a serve a rare sort of lung like Korean gin seeing oolong tea. It's excellent. Oh, starting my day off right. - -9 -00:01:32,399 --> 00:01:50,880 -Wes Bos: How about beautiful I'm doing pretty good. Just still enjoying the super nice weather. We had a pizza party at my house last night The Big Green Egg which is the the smoker that I have. Yeah, it has a pizza plate on it. It made all kinds of amazing pizza. So super fun to do that. - -10 -00:01:51,030 --> 00:01:52,050 -Scott Tolinski: Wow, that sounds good. - -11 -00:01:52,200 --> 00:01:56,040 -Wes Bos: Yeah. And you are do you want to talk about your your studio - -12 -00:01:56,040 --> 00:03:23,190 -Scott Tolinski: at all? Oh, yeah, yeah, I am in the process of building a studio. Anyone who has followed me on Twitter for any given amount of time would have heard me complain about some of the noise that happens outside of my office which is plentiful from the amount of construction going on in Denver overall but to my neighbor doing things like vacuuming his patio two times a week, our dogs barking or my dogs barking or all sorts of noise that happens so I am going to be building a studio which should have some significant DB reduction I'm going for isolation room here so it should be absolutely silent when the whole thing is done. So I should be posting if you want to follow me on Instagram at S kolinsky I'll be doing a lot of like stories showing the progress and stuff like that I'm in the design phase right now I have a contractor I have a my audio engineer friend is doing the design for me and overall it should be really really cool I think at the end of it I'm going to have my isolation booth take up about half of the room and then the other half of the room I'm do did do a delicate design into the like on camera part of my studio that you'll typically eventually see me at on my YouTube videos. For those of you don't know I run a YouTube channel level up tutorials so check out level up tutorials on YouTube where you can see a lot of these videos and stuff that I'm talking about until the eventual set in studio will be heavily featured on level up tutorials to - -13 -00:03:23,310 --> 00:04:02,910 -Wes Bos: that's pretty cool. I'm so thankful that my office is relatively quiet right now my neighbor is cutting tile on their porch and they're my neighbor's house is almost touching ours they're that close yeah and a Scott says he can't hear it at all which is which is great. I think that's such a competitive advantage in what we do is quiet being able to record whenever it is that you want you don't have to worry about family or neighbors or any external noise that's going on are you bothering other people by talking I used to share an office with my wife and I had to wait for her to like leave before I could actually record and sometimes you're not feeling it and you you waste all that silence right - -14 -00:04:02,910 --> 00:04:34,320 -Scott Tolinski: yeah and right now I feel like have this like gap right the dogs not barking my dogs are barking the neighbors not outside working because he works outside all the time. Like Yeah, I have the window now I have to record and so or you know, corny doesn't work friday so she's home all day, which you know, I don't want to tell her to be silent, but I want to get stuff done. So it's just going to be nice to be able to go inside my my soundproof isolation studio, shut the door and be able to record at anytime, anytime, anywhere. Regardless of what's happening. I am psyched. - -15 -00:04:34,440 --> 00:04:50,630 -Wes Bos: That's pretty sweet. swipe, swipe. I was gonna say it's sick and sweet that swipe why swipe. Alright, let's, let's jump into it. I got all kinds of stuff in here, which is which one do we want to start off with here? - -16 -00:04:50,699 --> 00:04:51,750 -Scott Tolinski: Let's do something fun. - -17 -00:04:51,840 --> 00:04:55,470 -Wes Bos: Yeah, let's do something fun. You want to start off with your animation one? - -18 -00:04:55,740 --> 00:07:29,820 -Scott Tolinski: Yeah, this is a library I had as a sick pick a couple episodes ago which is popular. Motion pose, or pop motion overall, I really like this, this package a lot. The only downside to this package is that the docks are still growing. So you might get to it in and look at some of the examples and be like, Wow, that's really cool. But how do I, how do I actually do this stuff? Basically, pop motion pose is a new library that works in it react or works in just standard JavaScript. And the the JavaScript or the React version of this thing functions very much like styled components, where you do a pose, dot, and then your element name, or could wrap around another component, right. And then inside of your string literal, instead of having a CSS styles, you define sort of locations or posed positions. So for instance, you could have a menu, right, which is the the closed position would be translated off screen, and then the open position is translated on screen. And then you simply are just passing what state this animation is into the React component. And that actually takes care of all the animations. So instead of saying, Hey, this is active or not active, you're saying this is opened or closed. And you don't have to do anything with CSS, it works really well with styled components, it works well with any sort of other component or whatever like that. There's also some really excellent flip animation techniques, which we've talked about flip animation a little bit before, but it's where you calculate the beginning and ending position and then animate between the two. So there's just a lot of tools for really excellent animations, I just rebuilt the level up login system to use pop motion pose instead of just sort of normal CSS transitions. And let me tell you, there's some really cool stuff for really animating Well, on unmounting. And mounting, which is, in particular, something that I found to be not so much fun is animating the unmounting state and things typically, in CSS transition group and transition group for react to get you so far. Let me say the syntax for this is quite a bit better. So if right now if you you know, don't mind having things not working, or you know, really kind of crushing through it a little bit while you go through some examples. Pop motion pose is a really, really cool library. I've had nothing but really excellent results from these animations here. So I'm really excited to try to use it in a more thorough way. But I've been a big, big fan of this library lately. - -19 -00:07:30,000 --> 00:08:10,980 -Wes Bos: This is really cool. Because pop motion is just a I'm just looking at what because pop motion pose is specifically for react but pop motion itself. It says it's the Swiss Army knife for animators and interaction developer. So you can just use this with anything it looks like you can tween from one thing to another. No, there's lots of animation libraries out there. Actually, I have Val head had an awesome talk at a conference I was in a couple weeks ago, about all the different libraries that are out there for animating. But this pop motion looks really good. And it seems like you can just pipe the animation numbers out into any other library that you want. You could just as you can pipe it into three j s or react a frame. Pixi j. s. - -20 -00:08:11,040 --> 00:08:42,240 -Scott Tolinski: Yeah. So pop motion itself is really cool. It's sort of the animating the post part is where you're setting up these different positions, like open and closed. Yeah. And so that's not just react, but it can be they have like a nice component for react. So you have this sort of like this pose where you're setting up your sort of like stage or whatever. And you're, you're, you're telling these different things to do XYZ, right. They also have a really cool animation for styling, SVG, called style fire, pot motion has a bunch of pretty cool libraries. Overall, I think it's really interesting stuff. - -21 -00:08:42,330 --> 00:10:19,159 -Wes Bos: Next one I have here is intersection observer. I'm pretty excited about this one. So let me explain the problem first. So if you've ever had to build a website, where something happens when you scroll into a specific portion of your website, or you want like an element on your page to start auto playing, or to slide in, or slide out or to, to fade in, when you animate to a certain point, you know that that's kind of hard, because you have to listen for the window on scroll event. And then when the window event scrolls, then you need to check where your different elements are on the page and figure out if they are on page or not. So this intersection observer is a new browser based API that is based on observables. Meaning that you can watch a whole group of elements. And what you can do is you can say, Tell me when this element is a div or a video tag or anything, is either on the page goes off the page, or is partially on or off the page. So you can set these little thresholds meaning that like, tell me when this video element is halfway on the page 0.5 and then start to autoplay it or tell me when this ad unit has totally scrolled into view and then record a view for it. And this is pretty cool because in the past has been very hard to actually calculate all this stuff and it's a bit of our performance hit in the past So I'm really excited about intersection observer coming to the browser, it's going to be really performant. Because like, who knows better than the browser, what elements are actually on the page, because the browser has to paint these elements of the page, right? So check out intersection observer, I'll link up to the MDN docs, - -22 -00:10:19,440 --> 00:11:52,470 -Scott Tolinski: in the show notes, dope. This one is an announcement that happened at the site day conference that I was speaking at a couple of weeks ago. And this is a new library, and it's called m DX. Now, MDX is a new, full featured Loader for JSX. In markdown, it's kind of interesting. So it sort of turns markdown files into components. And you can move your components from markdown file to a markdown file, and then use them as sort of JSX inside of a markdown files. So you could see what looks like an HTML or react element just plopped down in your markdown file. And that could be any sort of reasonable chunk, essentially making markdown into something that's way more extendable than it's ever been before, you could think of this being really super useful in creating really nice readmes. Or perhaps you're in like a blog system, and you're using markdown files for your blog posts, you could be using shared sort of content between different blog posts, or perhaps there's just sort of maybe different content that you want represented in entirely in markdown. Now, right now, this is a loader for Webpack. Specifically, there is an issue queue to integrated into personal as well. So who knows what the future of this is other than outside of Webpack. But it's really sort of super cool. It's not something I think anything else is doing. And just opens up a lot of, you know, possibilities for markdown files that are used in sort of a different way. - -23 -00:11:52,529 --> 00:12:39,539 -Wes Bos: Totally that because that's always been a bit of a limitation to using markdown is that there was no real include structure to include stuff like that, if you were writing a blog post, you wanted to pop in a graph, or a YouTube video, or maybe you wanted a table that shows browser compatibility for a specific tech and you want to just include that into your blog posts, you could just pop in these react components right in line. So this is pretty cool. I probably will use this when I'm redoing my own blog post or when I'm redoing my own website because I need something exactly like this. And it comes from Zeit in as we know we're big fanboys here, anything that's like puts out they put out now and next next react framework, they put out hyper term, so it's it's likely that I will absolutely fall in love with this. - -24 -00:12:39,570 --> 00:12:46,529 -Scott Tolinski: Yeah, it seems pretty cool. When they announced I was instantly like, Oh, yeah, that's useful. I don't want to write that hasn't existed before cool. - -25 -00:12:48,600 --> 00:14:39,659 -Wes Bos: Wicked. My next one is along the same lines as the intersection observer is resize observer. So another question is, how do you know when an element on your page has been changed size. And right now, the only way to do that is to you either run a timeout, and you check the size of an element every, I don't know, a couple hundred milliseconds, which is really bad for performance. Or you listen for window resize. And then when that happens, you check if your elements have resized, and both those aren't really great solutions, because we're starting to move away from what we talked about is like viewport based design, meaning that like, okay, the the screen of this device is a certain width, then when when that happens, these components are going to be this size. However, not everything has to do with how big the screen size currently is, it should have to do with how big is the the component currently. So I did this in a talk and he gave an example of like, you have a video on the left. And on the right hand side, you have a list of videos, sort of like YouTube does if you have a playlist open on the right hand side. And depending on how wide that playlist of videos is, you want to style it in a couple different ways. And ideally, this is going to be something called element queries where we'll be able to use CSS just to apply CSS to things based on their current width. Or if you have a component that stretches across the whole width of your website, you want it to look different than when you put it into a footer, and it's a third of the width of the website. So resize observer is going to allow us to watch elements for when they resize themselves. And then when that happens, we can apply and apply classes or do anything in JavaScript to those elements. And I what I'm using this for is just waiting for the actual element to resize itself and then applying a class of small, medium large. And then at that point, I can jump into CSS and and style them differently. Small, medium or large. - -26 -00:14:39,690 --> 00:15:11,970 -Scott Tolinski: Yeah, and if you're using styled components, you could just trigger different props into that component and have different states there. I think the the possibilities that this opens up for element queries is pretty sick. I've always been a big fan of that idea of element queries, right like because why would the window you know something's its own size should just determine its layout. Rather than, like the window size, specifically, of an individual item, right, so element queries are something that I'm pretty excited about. So using something like resize observer for that seems like a pretty sweet deal. - -27 -00:15:12,029 --> 00:15:25,080 -Wes Bos: Yeah, I'm pretty, pretty excited about it. And hopefully, it's a bit of a stopgap solution. Because Yeah, ideal world we would have no JavaScript involved in exactly how are things look, right. So for now, we have to use it, but maybe just CSS in the future crossing my fingers. - -28 -00:15:25,169 --> 00:17:03,240 -Scott Tolinski: Yeah, definitely something that I'm hoping comes in. Cool. So this next one is going to be something that is existed for a little bit here, but a lot of people still don't know it exists. In fact, when I used it in my Gatsby series, I think a lot of people were surprised to see that this thing exists. And I think for good reason, the browser support isn't great. However, there is polyfills. I'm talking about the web animations API, which is a great way to work with animations in JavaScript natively, which is just basically a really nice way to set up again, different animations. And then you can have them essentially saved as a variable. And you can tell your animation to play or pause or reverse, or it gives you a lot more control over things. Because was a native implementation of animations, right. So instead of just changing classes, and having a CSS transition, or animation do its thing, you can sort of full control over what's going on here. And again, if you took my pro Gatsby course, you probably got to see these things in action and saw how just how generally impressive they were or nice to use. So I'm a big fan of the web animations API that said support is a little rough Safari, not so good. iOS Safari, definitely not so good. Firefox has full support. Chrome has partial support, and edge and IE are like totally read. So the good news is, is there's a sick polyfill out there for this called the web hyphen, animation syphon j s, it's just a polyfill to you know, get all those browsers up to date. So if you want to use the web animations API today, use it with the polyfill. Because there is really sort of bad bad bad browser support right now. - -29 -00:17:03,360 --> 00:17:19,680 -Wes Bos: I'm pretty excited about that one as well. Again, polyfills, unneeded, it's always a, we should probably state that a lot of the stuff that we're talking about today, we know that it's not in every single browser. There's always some sort of Debbie Downer that comes out swinging anytime you talk about anything new, - -30 -00:17:19,739 --> 00:17:21,110 -Scott Tolinski: but when can we use it? - -31 -00:17:21,149 --> 00:17:40,050 -Wes Bos: Yeah. Oh, but it's not supported in this aisle. Thank you. Or, on the flip side, there's always that people that asked me what it's supported in. And I just want to be like, Can I use.com? Check it out? Yeah, stop asking what is supported? And because you should be able to look this stuff up? No problem, right. So yeah, I can I - -32 -00:17:40,340 --> 00:17:43,290 -Scott Tolinski: couldn't be any more intuitive. It's a beautiful, beautiful website. - -33 -00:17:43,440 --> 00:18:39,540 -Wes Bos: Yeah. If it's not on there, you likely can find it either in what is it on MDN. And if that's not, if it's not there, it's probably just an experimental API, which has not been confirmed to be in the browser. Sometimes browsers will implement these things like here. My next one is the face detection API. So this, as far as I can tell, this is just an experimental API. It's not a browser standard just yet. But sometimes the browser's will implement these things just to say, Hey, this is kind of how we were hoping it would work. And then they'll sort of circle back and go through the entire process of standardizing it and making sure that all of the different browsers can implement it. So this new API is the window dot face detector API and assume that this is going to be expanded into all of the shape detection API is maybe you could feed it custom data sets of learning how to detect if it's something as a hot dog or not a hot dog. Watch Silicon Valley. Yeah. - -34 -00:18:39,560 --> 00:18:45,150 -Scott Tolinski: Yeah. Haven't seen the new season. But the hot hot dog hot dog was like, I think a high point of the series. - -35 -00:18:45,180 --> 00:19:10,890 -Wes Bos: Yeah, very good. Anyway, so the way that this works is that you create a new window dot face detector, and then you pass it an image tag, and it will return to you an array of faces, and it will tell you within those faces, where the eyes are, and where the mouth is, these things are called landmarks, which are kind of interesting, which leads me to think that it's not just going to be for faces, because if they call it a landmark, - -36 -00:19:10,920 --> 00:19:15,320 -Unknown: yeah, it might be general enough. Yeah, exactly. Image detection API. - -37 -00:19:15,390 --> 00:20:13,820 -Wes Bos: That's what I'm thinking it will eventually be Will you be able to pass it in, but I tried it out. I sent a tweet out where I passed it just a photo of me and my family, and it detected all of our faces all of our eyes and and the mouth, which is pretty cool. And then I thought and this is something I did years ago, I thought what can I also pipe in a video element. And I can't remember if I just piped in a video element or I piped in a canvas element. I think what I did is I took a snapshot and piped it into a canvas element. And then and then it would give me real time face detection and it works really really quickly. So it follows my face around the screen, no problem. It gets bigger and smaller as it moves back and forth. And then what I did is I thought okay, well Well, it tells you where the eyes are, it doesn't tell you where the tilt of the head is. So if you tilted your head, it would just keep a straight box on it. But then I remembered, I don't know, you remember from math class, you remember? Like, what a squared plus b squared equals c squared? - -38 -00:20:14,190 --> 00:20:15,480 -Scott Tolinski: Is that the algorithm? - -39 -00:20:15,540 --> 00:21:08,970 -Wes Bos: Yeah, yeah. I had to figure out what the hypotenuse of something was. And I found the perfect rhythm. Yeah, I think that that the Fagor rhythm in JavaScript called like a coast to, and it's this, like built in equation, I have no idea how math works. But I wanted to know, if I have the location, the x and the y of my eyes, can I figure out how many degrees My head was tilted. And I use that to figure out the tilt degree. And then I could use CSS to rotate the eyes and everything. So I'll put the code that I have up on GitHub, I probably we'll do a little YouTube video on it at some point as well. I think this is really fun, especially if you feel a little bit burned out, bummed out on what you're working on right now take a little break, right? I don't know, 60 lines of JavaScript, and you can build a little face detection. - -40 -00:21:09,180 --> 00:21:21,830 -Scott Tolinski: Yeah, API, like webcam projects are always like really one of those things that when you're feeling burnt out, it's always fun to just sort of grab some example that already exists, and then mess with it or, or play around with some new API's like that. always a lot of fun. - -41 -00:21:21,900 --> 00:21:23,430 -Wes Bos: It's so much fun, I love it. - -42 -00:21:23,490 --> 00:21:52,320 -Scott Tolinski: So if you feel like you are really getting a lot out of all these different new API's and new libraries that were going over in JavaScript today, you might want to check out the fluid conference in San Jose, because the fluent conference is going to be the place where you can hear from all of the most amazing people in our industry, talk about all of their latest and greatest things, or projects or libraries or different API's. And you can totally expand your brain even further. - -43 -00:21:52,530 --> 00:23:20,460 -Wes Bos: Yes, so the O'Reilly fluent conference is happening on from June 11, to 14. So first two days, they've got some training, the second two days, they've got tutorials, and the conference happening is happening in San Jose, California at the San Jose Convention Center. And I would highly recommend that you check this out. I mentioned in previous episodes that I actually spoken at flume conference before I was hoping to go this year and speak at it, but it didn't work out with some other overlapping conferences that I had. But if you are looking for a couple days just to sort of download the information of whole bunch of experts into your own brain and get up to speed with what's going on in the web development community, I would say that you should check out a fluent conference book, your hotel book, your flights grab a ticket to this because it's always a good one. They have some amazing speakers go to the O'Reilly fluent conference website and just peer through the huge grid of different speakers that they have. I went through a different speakers in previous episode, Burke Hall, and he works on Microsoft on some of the VS code. I'm just gonna grab a couple of random people that I know from here, Patrick Hammon, I don't know how to say his last name, Val head who I talked about just a couple of minutes ago, she does a lot of animation stuff, she does some awesome workshops as well, some really good titans of our industry are going to be speaking at this thing. And you should check it out. So use the code syntax for 20% off and enjoy the conference. Nice. - -44 -00:23:20,670 --> 00:23:22,890 -Scott Tolinski: Yeah, that that seems like it's gonna be a good one. - -45 -00:23:22,950 --> 00:23:40,500 -Wes Bos: Yeah, it's always hard to like pick which conference that you're going to. And this one has a high probability of you enjoying it, just because there are so many speakers and so many tutorials that's going on there. So there's likely a high likelihood that there's going to be something there that you will get extreme value out of. - -46 -00:23:40,590 --> 00:24:43,110 -Scott Tolinski: Yeah, definitely. Cool. So this next one is going to serve to eliminate a problem that a lot of people sort of, I guess, have issues with, it definitely is a point of security on a lot of websites. And I'm talking about the payment request API. So basically, the payment request API's goal is to eliminate checkout forms. And it's meant to do it in a way that sort of allows the platform to take over this sort of checkout process. And this is a nice thing, because Well, I mean, you're handling secure information, and you're handling, you know, people's data that they obviously want to take very seriously. You know, they're entrusting you with their credit card information like Wes and I both do. And this will allow the platform to handle it in a way that is basically one the interface will be nicer because it's again, the platform can handle a unified interface, but to I think, more secure or less, less likely for someone to write some crappy code that gets abused. - -47 -00:24:43,230 --> 00:26:43,290 -Wes Bos: Yeah, I should also like kind of interject here it is going to be more secure. And part of it but also, at a very basic, this web payments API is actually just a glorified autofill which means instead of you typing into a form, you just create chrome or our Android drop down or something will pop up on your your device that is native to the browser or native to the device. And then it will say, do you want to give your billing information and your your shipping information to this website and at a very basic, it will just dump an object of credit card data to the user. And then the user then takes that and sends it to stripe or to Braintree or Authorize. net? Yeah. But that's I guess that's sort of a stopgap solution, because it's kind of a nice, standard autofill. But ideally, which is what Scott's talking about here is that the web payment API will be way more secure. Because the way it's going to work. And this is how Apple Pay works right now, is that your browser, whether it's Google pay, or Apple Pay or something on the device, it will then charge it and make a token, sorry, will not charge it, it will make a make an Apple Pay token or a Google pay token. That is good for charging a credit card for 40 bucks. And then what you do with that token, is that you take that token to stripe or to to PayPal or to somebody that supports Apple Pay, or Google pay or alipay. Yeah, exactly. You take these tokens, and you say like this token, I was told I could get 40 bucks, if I give you this token, so like a drink ticket at a wedding or something like that. And then what happens is that stripe or Braintree, or whatever, will process that token, and then give you the money. And that's awesome, because that means you as a web developer never have to touch credit card data, it's just one time use tokens. And also means that you as a consumer never has to give your credit card to a sketchy website, which I'm super excited about. - -48 -00:26:43,680 --> 00:27:44,190 -Scott Tolinski: Yeah, because that can sort of be the wild wild west, especially with older sites, you have no idea what the back end is like. In fact, when we took over a freelance project one time, and that we were doing there, the clients, I'm not going to reveal this client. But we were doing this client's sort of e commerce solution. And we were getting them up into being PCI compliant, and all that good stuff. And starting with a sort of modern thing and their current system, I almost don't even want to tell you what it was doing. It was sending credit card information in plain text to an email to the guy who was writing down their information and then charging it by hand in their system. And the whole thing like I when I saw how the current system worked, I was just like, Oh, no, like, this is bad, bad news. So when we ripped it all up, and we had the whole new way of doing things, it was a huge adjustment for them, because they're like, why can't I just use my current credit card machine to enter the card numbers anymore, because that is totally wrong. You should not be doing that. Oh, - -49 -00:27:44,400 --> 00:28:14,700 -Wes Bos: that always blows my mind that that is how it works for a lot of people like we bought new doors for our house. And the person comes over and takes out a photocopy sheet, writes down my credit card number on the sheet, yeah, flips it flips it over, writes down to like three c three numbers CVC. And then like, takes that back to their office and charges the credit card. I was like, you could just go online, you have everything and you could go online and start running amok with my credit card. And how is this how it works? Yeah, - -50 -00:28:14,910 --> 00:28:37,710 -Scott Tolinski: get the stripe reader or the Square Reader, the the PayPal, whatever, just plug that into your for you got a phone, just plug it in and swipe the card. I mean, this modern technology has like really sort of blown the doors off of e commerce stuff and turning it into a much more obviously secure situation. But there's so many old sites and all this and that and old ways of doing things that just need to not happen anymore. Yeah, - -51 -00:28:37,710 --> 00:29:15,930 -Wes Bos: this is saying like a lot of these brick and mortar businesses still they don't do credit cards properly, either. Like we bought some This is like totally aside. But as I'm outraged, we bought some wallpaper that never shipped. And I wanted to get my money back for the wallpaper. And they're like they told us to come in and they could do the refund. Okay, I was like, I was like, I work with credit cards every single day. I understand how this works. And you can refund it without me driving across town. And they're like, Oh, no, we can't. So I was like, Alright, well charge back charge back. 123 charge back. And it was funny how quickly they figured out how to refund my money after that. - -52 -00:29:15,960 --> 00:29:18,030 -Scott Tolinski: Yeah, right. Ah, gosh. - -53 -00:29:18,110 --> 00:30:32,100 -Wes Bos: Anyways, what do we got next here this one is I'm pretty excited about is the n i n TL I didn't even know that this was a thing. There's a global in in the browser. And there's a global in Node called MTL, which is it stands for international. And on that there's a method called a number format. And I was alerted to this because I tweeted out about this string method called to local string. And what to local string will do is it allows you to take a string or actually a number as well. This is I think this is a method on numbers as well. And then it will convert it to formatted currency meaning that you could pass it $1,000 or thousand dollars and 50 cents, and then or $1,000 and 54, three cents. So like where it's like round is still not rounded. And then you could take that and then format it into a local currency that is in this sorry, this won't convert currency, but it will format it with the proper commas or the the periods, the decimal places and the like the euro sign the pound sign any any currency that you are looking to use. And this is awesome, because I used to use all these like annoying regex is yeah to actually - -54 -00:30:32,100 --> 00:30:34,740 -Unknown: do that. So annoying typically to do this. - -55 -00:30:34,770 --> 00:31:37,470 -Wes Bos: So I use this on my own website where I format my products where I want to say if it's $50, even, I just want to show dollar sign 50. But if it's $50 in 34 cents, I want to show $50 and 34 cents, right. And that wasn't always super easy with these, like StackOverflow functions that I used to copy and paste. So moving over to this to local strings slash international number format, they do the same thing. Apparently, the better one to use is I MTL number format. And then you can pass it which currency you want. So you could pass in like a country code, or a language code sorry, like German or Canadian, French. And if that curve, if that locale uses a dots for the thousands and commas for their sense, or the flip side, which is what we use in North America, which is commas and then your decimals or using a period, it will format that properly. So big fan of it. It's not great. It's not supported super well. And in Node world, it doesn't come with all of the different languages by default. But - -56 -00:31:37,470 --> 00:31:39,420 -Scott Tolinski: it looks like it's supported pretty well. - -57 -00:31:39,450 --> 00:31:59,880 -Wes Bos: Yeah, there's there's some inconsistencies across browsers, which of course is always happens. But if you're just formatting I know a lot of you are from North America, if you're just formatting Canadian, or US dollars, or I guess American, any anyone that's using commas first and then decimal for four cents. It works great across the board. And I've been super happy with it. - -58 -00:31:59,910 --> 00:32:32,100 -Scott Tolinski: Yeah, this is one that I'm so surprised. There's not more frequently talked about. And like, even if you were to Google something like format currency and find the StackOverflow post first up like this, it's not mentioned people just don't talk about it. So I'm pretty psyched to see that this kind of thing exists. And it just makes those those little things that you have to write your own solution or whatever, man, it makes that significantly nicer. So I'm really excited about this one. It's sort of like not a not a sexy one. But it's definitely very, very, super useful. - -59 -00:32:32,130 --> 00:32:33,030 -Wes Bos: super handy. - -60 -00:32:33,030 --> 00:33:05,820 -Scott Tolinski: super handy. Yeah. Okay, so I have another one, that's going to be, I guess, super handy. I don't know if you've, you know, ever tried to work with big, big, big numbers in JavaScript. But the math does not always add up if you're working with big numbers. And that's because JavaScript does not support what's called Big Ince, big big integers. So what's cool is that on May 2, v eight announced that they are adding big int to V eight, if you don't know what v eight is the engine that is that node runs on, right. Is that how you would say that? - -61 -00:33:05,880 --> 00:33:15,930 -Wes Bos: Yeah, yeah, that's v eight is the the engine that is behind Chrome. And they ripped it out and put it into node as well, which is why we got node j. s on the server side. - -62 -00:33:16,050 --> 00:33:44,790 -Scott Tolinski: So we are getting big hints. And big events as well are coming to E s, whatever most likely he is next. They're currently in stage three. The proposal is really sweet. We'll link to it in the show notes. But basically, it's going to make working with big integers, big numbers, much more of a viable thing. Because right now in JavaScript, that's always been a point of confusion for people who are new when they go to do some big math and find something's not adding up correctly. - -63 -00:33:44,880 --> 00:33:51,510 -Wes Bos: Yeah, I've actually never Never in my life have run into a situation when I would use begins have used God. - -64 -00:33:51,600 --> 00:33:55,260 -Scott Tolinski: No. But I haven't worked with big data. Yeah, - -65 -00:33:55,290 --> 00:34:39,420 -Wes Bos: me neither. But this is fairly common. When you are doing like computing, maybe running Bitcoin in the browser, you're doing graphics, a lot of 3d stuff often needs this. I've run into if you ever try to loop over pixels in a canvas, know that for every pixel, you get four numbers. In that case, you need us a special kind of array. I didn't even know this existed, but I forget what the name is, offhand. But if you have an array that is absolutely massive, like millions of entries, then you need a special kind of array. And I can imagine if you're doing a lot of graphics work, you'll run into the need for doing that. Nice. Yep, big and maybe maybe one day when we're adding up Scott's bank account, we'll need a big big it's - -66 -00:34:40,350 --> 00:34:42,210 -Scott Tolinski: no, that's the dream. - -67 -00:34:42,690 --> 00:37:19,320 -Wes Bos: That would be a good sticker. Big in the sounds like a rapper. Yeah, does. Alright, next one we got here is I got kind of two here, which is the the speech detection and speech text to speech. So in my JavaScript 30 courses are two API's that I've used just because they're a lot along the lines of just being real fun, and doing an amazing amount of work with a surprisingly little amount of code. So speech detection will allow you to listen in on a microphone. And it will take what you're saying and stream it into words. It's pretty cool because it will give you you can listen for the the word streaming in. And you know how when you talk into Siri, it sort of tries to type what you're saying, as you as you're saying it and then it will fix it depending on the words that you say after it, we'll do this in the browser as well. So you can stream these words in and show them on the actual page until you get an end event. And then at the end event, it will give you the entire sentence of what it thinks that you actually said, it will give you other sort of options of what words that might not have been done properly. And it works pretty well. You can also pipe in different accents that the person may have. And it will try to account for that. I've had some, I think it was in some African countries where people people were trying to speak English to it and one of one of their accents, I forget which country it was in Africa. And they said it didn't work very well. But for my Canadian accent, it worked fairly well. And I know that there's a bunch of British people taking the course as well, it worked pretty well for them. Hopefully, that will get better for all, all accents around the world and all languages. And then on the flip side, we also have text to speech, which you can then take text in and simulate it into actual words. So it's pretty cool. If you use Chrome on a Mac, it comes with something like 60 different voices that you could possibly use, because these voices are all built into OSX. If you just use Chrome on Windows or something else, I think there's only three or four different voices. So if you want to speak back to the user, you can have control over two things the pitch, and the speed. And it's it's hilarious, a lot of fun. Because you can say like, and or you can pipe emojis into it in the in the course JavaScript 30 we go. Hello, my name is Wes Bos poop emoji. And then you can do a really look. Hello, my name is Wes. So if again, if you're having a bad day, put this on the shelf thing stop right now and do some text to speech because it's absolutely so much fun to play with the pitch and the the rate at which the person speaks. - -68 -00:37:19,400 --> 00:38:35,400 -Scott Tolinski: Yeah, do you know what I use this for? I use this for in my my B boy tools, my breakdancing tools, I frequently recommend or I talk about on this. It's an app that I made to help me like do practice tools right for while I'm dancing. And so a lot of times when you're dancing, it's easy to sort of just like get lost in sort of what you're doing. And so I made a tool to help me like explore creativity and the app because I'm usually playing my my speakers or my sound through my computer into like a speaker system, right? Yeah, then I have the app set up and I'll hit go on this, this this thing I called the Tombow Iser and the combo, Iser is going to shout out to move names. So I've entered all of my moves into this move book. And then the app actually speaks out the move names. It will be like when Mel to this, this or that. And then I'll have to do that move combination. And basically what it does is it gives me two moves that are like totally separate. And I have to come up with sort of a transition between the two. And then that way, transitions between everything. It's like sort of like a tool to get you out of your normal mode of practicing. But there's a billion things you can do with this stuff. I mean, I have a robot shouting at me breakdancing moves while I'm dancing. It's pretty sick. - -69 -00:38:35,420 --> 00:38:49,380 -Wes Bos: That's great. Yeah, I just think of all the things that you could add speech to where you're not necessarily using the application when you're sitting in front of a computer. It would be awesome to have it speaking events to you rather than just visually showing them. - -70 -00:38:49,500 --> 00:38:52,880 -Scott Tolinski: Yeah, they you know, what else is awesome is Netlify Oh, - -71 -00:38:52,880 --> 00:38:55,980 -Wes Bos: it's also fun, I got a better transition for less. - -72 -00:38:57,920 --> 00:38:59,070 -Scott Tolinski: I'm gonna do it for you. - -73 -00:38:59,280 --> 00:39:01,710 -Wes Bos: You know what also makes Scott dance? - -74 -00:39:01,770 --> 00:41:07,460 -Scott Tolinski: Oh, yeah. Netlify Netlify does make me dance. I love Netlify. Netlify is an excellent modern host. It gives you all in one workflow that combines global deployment, continuous integration, and HTTPS with a whole bunch of excellent features. I mean, you know, HTTPS is something that's sort of a given now you sort of have to have an SSL if I think pretty much anytime and so the fact that hosting companies like Netlify make a process of having an SSL certificate on your site. Absolutely painless, is one of the most absolute unsung benefits of something like this. So you get all these awesome features straight out of the box like AWS lambda functions, right, that make working with server serverless style functions extremely easy, something that basically is constantly sort of a hassle if you've ever tried to do any sort of serverless functions, working with AWS, the interface, blah. So Netlify takes all of that stuff out of there and makes it super nice and easy. There's Also the new identity feature that allows you to manage signups logins, password recovery, all without having a server component to your website. And there's also a great new forms feature that allows you to submit contact forms that, well, they can't, they're not just don't just have to be contact forms, these forms will submit a web hook somewhere, they'll ping Slack, they'll send you an email, they'll do all sorts of stuff. So it basically allows you to work with forms in a really excellent way without having to have your own server side component. I mean, this is allowing you do all of this stuff client side, and let me tell you, the Netlify experience is something you've got to experience to understand because it is really cool. Just sign up, login with your GitHub and push a new site, I recommend something like a Gatsby site. Or you can check it out, just just push it up. And you'll see how nice and easy this thing is because it automatically detects your platform and automatically writes the build script. And basically, you just sit back and relax, you click a few buttons, and you're deployed. So check out netlify@netlify.com forward slash syntax and see why this hosting platform makes me dance. Check it out - -75 -00:41:07,610 --> 00:41:35,790 -Wes Bos: wicked, and it's funny how often people tweet us. And this happens with a lot of our sponsors, which is thank you for doing that. If you try out one of our sponsors, and you enjoy it, or you don't enjoy it, let us know. Because seeing people tweet about the sponsors, makes the sponsors want to sponsor more, which is good for Scott and I because then we can keep making these things. But so many people have been trying out Netlify and tweeting us being like, Wow, it actually is amazing. I didn't didn't think it would be but it is. So yeah, check it, - -76 -00:41:35,880 --> 00:41:36,780 -Scott Tolinski: we get a lot of those. - -77 -00:41:37,880 --> 00:46:21,450 -Wes Bos: Alright, next one we have here is let's talk a little bit about the state of EOS six modules in node. So kind of one of the funny things about doing my node course is that a lot of people email me being like, Wes, why did you not use like import and export default? And why did you use require and module that exports in your node course and surprising A lot of people don't know, maybe it's just because they're writing a lot of front end JavaScript, or they've always used Babel, there is no ESX modules in Node yet it is currently being worked on. And I just kind of wanted to give everyone sort of an update of where it's at right now and what's going on with it. So current status of ESX modules and note is that they are under a flag in Node. And there is an entire working group dedicated to implementing modules in the browser. And the reason why it's taking so long it's been well over a year that they've been working on this is that they don't want to, like this is a huge thing in the language, right? And yeah, they, if they goof it up, then we're gonna be living with it forever. For the next however long we're going to be building stuff in node, right? So they want to make sure that all the different implementation details are tried out and tested and battle tested and made sure that everyone is happy with it. And they've got different they have this this committee that is just the modules committee, and they have people from the node world, they have people from the browser world, they have people from all kinds of different types of programming, and they're making sure that their thoughts are heard on it. So where is it right now, right now, they are currently at a spot where if you want to build a module in node, you have to use the dot m. j. s, the Michael Jackson script. So you cannot build an ESX module, the Michael Jackson script, you have to use the dot Mjs extension, which most people myself included go really like you're making me new use a new extension, if I want to use modules, that kind of like puts me out of my workflow, because I've been using.js on the client side. And now if I want to build a module for the client side, and the server side, like if I want to be used in both, I have to now use Mjs in the browser as well, right? And that's because in the browser doesn't matter what extension you have. But on the server, it doesn't know what type of file it is until it actually opens it. So some way to signify what type it is, needs to happen. And that's why they're using the dot Mjs. Extension. And there's a lot of people are asking, like, why can't we just use like a dot j s, like it was in common j s. And apparently the difference between, there's a whole bunch of blog posts out there, I'll link up to them because it requires a there's a lot of people that are just sort of tweeting angry about it, but don't take the time to actually read into the technical difficulties that are happening. The difference is that an ESX module you need to know the shape of an API before it's parsed, meaning that before it actually parses every single line of JavaScript in a module file, it needs to know what is imported and what is exported from that file. And in common j s, which is the require it parses the entire file first before it actually exports the values mean, which is why you can do dynamic exports and dynamic imports in a require j s or sorry in a comment .js environment. So that's kind of where it's out right now is that most people are unhappy with it because it kind of sucks to have the dot Mjs. So there is a couple options. JOHN David Dalton, who is the JavaScript developer behind a ton of things out there, most notably lodash, he has written this thing called ESM, which is a zero dependency production ready module loader. And you just require this thing before you run any of your JavaScript code and node. And then it just works. So he's really pushing for if he can make a module that makes it work, I think that they could, hopefully likely make it work in in core node without it. And I think that he sort of made this thing to show them, it's possible and we should do it. So he's pushing real hard, he's on this committee, he's putting a lot of time into it to try push for just making it work. Like you shouldn't have to rename your files to dot Mjs just to make it work. And they're still still working on it. So if you have thoughts on this, make sure that you actually put in your your two cents, it's all on github.com, forward slash node j. s, forward slash modules. And you could attend any of the meetings that are happening and putting your two cents rather than just waiting till it's too late and complaining. Yeah, so interesting. - -78 -00:46:21,629 --> 00:47:08,850 -Scott Tolinski: Yeah, it's funny, because I'm in the the meteor system, your back end and front end are so linked that you don't ever have a separate configuration for your build process. And because of that, anytime meteors front end was getting a feature in its build process, or a Babel plugin or whatever, you automatically got that on the server. So I've been using the import syntax on the server for, I don't know, the entire lifetime of the level of Sykes that's been there in Meteor this whole time. And and so it's like, funny for me, because I'm almost been just ignoring all of this information, because I haven't even had to touch the require syntax, because I haven't even had to think about it to be honest. So it's nice to to get a sort of update on where things are now that I, you know, I haven't been paying attention to be honest, because I haven't had a reason to. - -79 -00:47:09,270 --> 00:47:48,390 -Wes Bos: Yeah, yeah, totally. You can just babble your entire back end if you want, or run it through this ESM or not run it through ESM, but require this ESM module first, and then everything will just work, which is great. I can't necessarily do that for a lot of my tutorials, just because these things are constantly in motion. Oh, yeah. And what happens is that you use this like hot plug in one day, and then six months later, it's like deprecated in a bad practice. I just and also like, some teams don't want to adopt this stuff. They want to do everything as close to core as possible. So hopefully, this will resolve itself in the future. There's a lot of smart people working on it. And looking forward to it being all wrapped up. - -80 -00:47:48,629 --> 00:47:53,490 -Scott Tolinski: Yeah, dope. Do you have any other things that you want to hit on? Because I'm all out? - -81 -00:47:53,609 --> 00:48:08,910 -Wes Bos: I think that's it. I think that's it. We'll probably do another one of these in six months or so as new stuff starts coming out. But if you have new stuff that's coming to language, make sure you tweet us and we'll put that on the list for the next show. dope. Wicked. What about a sick pick? You got a sick pick for me today? - -82 -00:48:08,910 --> 00:49:33,720 -Scott Tolinski: Yeah, I the sick pick. And the sick pick, has influenced me in a couple of different ways. A lot of people probably been seeing this thing being passed around right now. It's called dank Moto, which is a Yeah, coding font. I really like it that dank.sh I've been using Fira code because of the ligatures. And the things I love about fig. Fear code is the ligatures, but the font itself has never been my favorite aspect of it. And so I figured I would try dank mono because it has all the pretty arrows and equals and all those awesome ligatures that, you know, some people just really don't like I get it. But I love having the arrow support and the ligature support in a font. So for me, the ligature stuff is excellent. But this font on top of it looks very, very nice. It has some really interesting characters, it all sort of fits together in a nice way. And, you know, it's I've been using for about 48 hours now is my main coding font. And I have to say, I'm pretty impressed. I really like the way it looks, it makes looking at this very pleasant. There's a whole lot of blog posts that they've done on on how they made it, why they made their choices. And I just happened to really enjoy this thing. Now the thing I want to say about it influencing me is when I purchased it, it showered me with confetti on the loading screen. And I was just so I was like, Oh, that makes me feel good. I like that. So I instantly went and added confetti. A good idea. - -83 -00:49:33,720 --> 00:49:34,290 -Wes Bos: Yeah. - -84 -00:49:34,290 --> 00:49:43,920 -Scott Tolinski: So I added confetti to my purchase flow, and no regrets. It's hilarious. And I love it and just change the colors to match level up. Wow. - -85 -00:49:43,950 --> 00:50:05,130 -Wes Bos: So I think what's also important to note about this font is that it has all of the italics that everybody asks me about. Oh, yeah. peredur motto so I get an email every single day get tweeted every single day. What's that fun with the italics that you use? And then I say it's operator Amano. It's 200 bucks. And then people say, oh, and then they either go steal it, or they don't use it. - -86 -00:50:05,490 --> 00:50:08,640 -Scott Tolinski: Yeah. So I think this is running like 40 pounds. - -87 -00:50:08,670 --> 00:50:39,030 -Wes Bos: Yeah, which is about 55 bucks as we record, which is a fourth the cost of operator mono. It looks super good. I'm really excited about this, because 200 bucks for a coding font is not worth it for most people. So this, this is pretty sad. I actually do have a question about ligatures. I've always stayed away from ligatures. And because I don't want the inevitable I thought that people would email me being like, what's the arrow character? Yeah, I don't understand it. Do you ever get questions about that? - -88 -00:50:39,030 --> 00:50:40,080 -Unknown: I haven't. - -89 -00:50:40,260 --> 00:51:08,340 -Scott Tolinski: I would have expected to have at least had one. And I have not interesting. Yeah, I have not. So take that for what it is. But no, I haven't had any questions about that. And I used them in all of my videos. I use them in all of my code. And for me, some people you know, you'll get comments about like, I can't stand ligatures, but yeah, and they make the code way more readable. For me. I don't know what it is. I just like those symbols. Give me those symbols all day long. I'll take it. - -90 -00:51:08,430 --> 00:51:34,980 -Wes Bos: I want it. That's pretty cool. And on the same note, there's someone on Twitter with this. I'm gonna find his name here. kill a man. Oh, kill him. I'm probably butchering it, but he took operator moto and patched it to take the fear of code ligatures and put it in. So if you want the best of both worlds, you can either just buy this font or you can patch if you're already using operator moto. You can just patch it but dank mono looking really dank. I'm probably gonna try this out - -91 -00:51:34,980 --> 00:51:37,980 -Unknown: myself. Yeah, it's like Colorado. dank right there. - -92 -00:51:39,630 --> 00:51:43,770 -Wes Bos: Awesome. My sick pic. Oh, shoot, what was it? I had a good one. - -93 -00:51:43,950 --> 00:51:45,810 -Scott Tolinski: You gotta write it down, bro. Yeah, I - -94 -00:51:45,810 --> 00:51:46,740 -Wes Bos: gotta I gotta - -95 -00:51:46,890 --> 00:51:50,760 -Scott Tolinski: I always do that. And then I would start doing them. And I'm like, crap. I had a good one. - -96 -00:51:51,630 --> 00:53:09,330 -Wes Bos: So my sick pick today and this is saying Scott sick picked a long time ago is the ring doorbell. So I've had a regular ring doorbell I got on Black Friday. And it worked really well, except for the fact that what's the motion detection would trip way too easily because of the way that my front door is situated. It's pointed at the road. And anytime a snowplow drives by which is every minute in Canada, it would trigger the motion detection and it was so annoying because my your phone would buzz and my wife's phone would buzz and the the doorbell in the house would would would buzz. And it would just be like, Oh, another truck rolled by right? So the ring Pro, full disclosure, I emailed the ring. And I said like can you send me a free one and they did with kind of my way of life, I always asked for a free one. First, they sent me the ring Pro, which allows you to allows you to set motion zones so you could take the road out of the zone and just put my front porch on the motion zone. And I got it all hardwired in and it is working great. I think it's 10 ADP, it's really crisp. Very happy with it. So if you're looking for a doorbell I definitely check out the ring Pro. - -97 -00:53:09,540 --> 00:53:11,520 -Unknown: Nice. I see only - -98 -00:53:11,820 --> 00:53:18,300 -Wes Bos: only if the ring process dominate. Are you a professional doorbell user? Well, of course you need the ring, bro. - -99 -00:53:19,230 --> 00:54:25,740 -Scott Tolinski: I like about the ring a lot is when it says you community updates. I don't know if you get those community? No, no, we get we get ones that are like I don't know if this is a US only or for what I have no idea but I didn't do anything to enable this. But it's like my package was stolen off my porch. And then it shows you that person's video. And then like the general location of where there was this dude who was like really creepy, and like multiple people had him what he his whole thing was, is that he would pretend to unload a big package. So like took him a little while he would unload this big package. Yeah, he said it on your porch. And then while he was doing that, he was like trying to break into your house. So you'd see him checking the windows and going around, and it was the same dude. I'm like five people's cams. And everyone like they found him and then they sent the videos to the police caught him. And yeah, he was uh, he had been caught like several times before that for breaking and entering. So I thought that was really cool to see. Now I would see this guy and I would think he's delivering a package. It looks like he's delivering a package but like to see that and be like, Oh, man, that guy's creepy. This is what it looks like. And I got a little ping about it. It's pretty sick. - -100 -00:54:25,980 --> 00:55:09,180 -Wes Bos: That's really cool. I gotta see if mine has I don't know if anyone in my neighborhood. I live in a bit of up and coming neighborhoods. I think I'm the only guy that has a $200 doorbell installed. What else was there? Oh, yeah, we got to do our show on home automation just because there's so many different things that I'm talking I'm trying to automate our watering right now because we like we're so brutal at watering our plants in the summer and they always die. So I ordered this like timer that you put on the hose and then it's and I'm setting up drip line. So of our plants and hopefully it's going to be on this is such a developer way to approach plants but like automating the watering of it and the grass and everything. I'm super excited about it. - -101 -00:55:09,390 --> 00:55:39,360 -Scott Tolinski: Yeah, aren't we have a drip line set up through our sprinkler system through all of our plants? And it was in there before we moved in. And I was thinking like, this is great. I'm gonna have to water this stuff. And guess what, it doesn't work for some reason. And like, I'm just was way too busy last year to check it out. So this year, it's been like my goal. I'm like, I'm gonna figure out why this drip lines not working because I'm like, manually watering our plants, despite the fact that they're Yeah, right. Like, oh, I gotta go take the hose out again. Even though it's already hooked up. I just got to figure out why. Maybe there's a cut in the line somewhere. I haven't seen it. I mean, you gotta - -102 -00:55:39,360 --> 00:55:47,430 -Wes Bos: when did did you buy your house before winter? Yeah. Oh, you know what? You got to blow it with compressed air before winter. Otherwise, it freezes and the line Oh, - -103 -00:55:47,430 --> 00:55:48,450 -Scott Tolinski: no. Ready? That? No, we - -104 -00:55:48,450 --> 00:55:49,860 -Wes Bos: do. Okay, okay. Yeah. - -105 -00:55:49,890 --> 00:55:53,250 -Scott Tolinski: Oh, yeah. There you go. Do that from Michigan from Michigan. We - -106 -00:55:53,250 --> 00:56:08,400 -Wes Bos: know. We know about snow. I know about snow. That's another episode of gardening with Scott and Wes. Thanks for tuning in. Remember to cover your hydrangeas and water your snap peace. Yeah, we'll see you next week on community radio. - -107 -00:56:09,870 --> 00:56:11,040 -Unknown: Peace, peace. - -108 -00:56:12,930 --> 00:56:22,680 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax47.srt b/transcripts/Syntax47.srt deleted file mode 100644 index f07115796..000000000 --- a/transcripts/Syntax47.srt +++ /dev/null @@ -1,112 +0,0 @@ -1 -00:00:01,319 --> 00:00:09,930 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and get ready to whiskey and West boss. - -2 -00:00:09,930 --> 00:03:27,090 -Wes Bos: Hello everybody and welcome to syntactic podcast with the tastiest web development treats. Today we are talking about debugging here are some we're gonna go through like first we're gonna go through some tips. How do you get good at debugging? How do you tackle a problem that seems impossible to fix, and go through these steps actually figure out what it is. And then we'll go through some of the tools that we actually use to make debugging and development easy. Today's episode is sponsored by two awesome companies. First one is fresh books. They provide awesome cloud accounting software. And the second is coffee cup software. But more specifically, they just launched a CSS Grid design tool. And we'll talk a little bit more about that partway through the episode. It's actually pretty sweet. I know what you think of me immediately think about a design tool, you think back to like Dreamweaver or something like that. But I actually checked it out and the coder puts out is pretty, pretty sweet. So we'll, we'll talk partway through them partway through them partway through the episode. Today, Scott, hey, I'm doing good. I just came back from a long trip. I went to Romania for a conference. And on I am exhausted, definitely taken a little while to recover here. But everyone will be happy to know there is a terrible Part Two to my health adventures, which is actually sort of related to the first part and so like, I don't know, if you remembered me mentioning that Courtney also got sick and had to go was her thing that she got sick for was actually a sort of like a reaction to getting strep throat. It was like the strep throat and then that infection, like did something else. And that's why she had to go to the doctors. So she had strep throat. Right. Okay. Yeah. And I I had whatever, just that thumb thing going on that it was an infection, right. So well, I you know, we all think we're good. I go to Romania, and I go on, you know, to like straight days of traveling, and I end up in Romania. And I get there at three in the morning, and I pass out and I wake up with the worst strep throat I've ever had. It was like, I'm speaking the next day. And all I can think is I'm in Romania, I don't know where I am. And I have like no access to anything. And I just I just like my throat is been dominated. So yeah, after struggling to figure out how to contact a doctor or something. I finally got a doctor to my room when I went to the pharmacy and got antibiotics and believe it or not, after taking that in like two day or a day or whatever. My throat was actually decent enough to talk but I definitely wasn't definitely wasn't feeling great. After all that here's a cue not getting sick ever again. Because what the heck yeah, I just I just got off last week, I was pretty like feeling rundown and not feeling great. And it just sucks especially like, like, it's probably has something to do with kids. Kids are always sick. And I feel like I've been super sick all of the past winter. And I'm just looking forward to it being warm out and hopefully taking a break from all this sickness kind of dragging you down. Because it's such a bummer when you're trying to get stuff done. And you get hit by a truck of sickness. No kidding. Yeah. And obviously, the travel and the not sleeping and the time zones. And all that stuff made it much worse. And yeah, a gear agreed, I'm home, I'm ready to chill out, I'm ready to get some work done and be totally not sick forever - -3 -00:03:27,180 --> 00:08:27,020 -wicked. Alright, so let's jump into it. So I've got about 16 different tips are just going to rattle through them. And then we're going to go through a whole bunch of the different dev tools, tabs that will help you actually debug stuff. So we're going to be coming at this from primarily a front end web developer standpoint, and some note as well, but primarily things that you can do when you're debugging JavaScript, CSS, debugging HTML, I guess that I've been there before we forget to close the tag and everything becomes nested inside of each other. So first tip that we have is to actually read the stack trace or to actually read the error message. Yeah. And it's funny that this is a bit of a joke. But it's also often what happens is that when an error happens specifically in JavaScript, you just get this massive dump into your console into into node. And it's just so big that most people freak out and don't even look at it at all, because it just seems like nonsense. And especially because a lot of the like paths that it gives you are in your node modules directory. And it's like, well, I didn't author that couldn't be an error in there. But what I like to tell people is to like take a deep breath, and actually take each of the what the stack traces, maybe we should explain what this is a stack trace is sort of like a treasure map of what happened up until the accident. So if a function called another function, and that called another function in a library, and it called another function and a library, what it's doing is it's sort of following or following the hops of function calls to the actual to the point where it actually choked right Usually what you have to do is to read the first three or four lines of your stack trace to figure out where the actual errors happening. And there's often a lot of nonsense in there a lot of paths that are not helpful to you. And you can, if you can learn to ignore them, or even in my node course, what I did is I wrote a little filter on the stack trace to highlight the actual file name where the error was happening. Because most people, what happens in my courses is people just email me a huge stack trace without even looking at it. And so I just would, I just wrote a little debugger that would highlight the names of the files. And that helped a lot because it sort of just highlighted where it was actually happening. So read the stack trace, that's super important, you can get a lot of information as to what is happening in the stack trace. Yeah, and I think this one goes overlooked a lot, because there's just so many times where I get customer service emails, or get issues on a GitHub repo or something. And a lot of it the the time that you're spent even doing that, or sending an email and waiting for a response could totally be mitigated if you were to just read maybe the first line or the second line. And perhaps that's the clue that you need to solve this thing. But a lot of times people see this big error, and then all sudden, they just get concerned and maybe stop. Or maybe they just don't even know you know how to look at it. But you know, just even reading it and trying to take that into context of what you're working on. And how it fits in is really just such a big thing and a big skill that will go a long ways, despite seeming sort of basic and obvious, right? It's definitely something that you just need to have practice with. And you need to force yourself to just read and get by that, you know, it's one cool thing about stack traces in create react app that I learned when I was recording, my re recording, my react for beginners course is that the stack traces First of all, create react app does an awesome job, awesome job, they catch the stack trace, and they actually display visually to you on the page instead of in the console or in your terminal, which is great, because stack traces in the terminal suck. But you can also click on the stack trace files, and it will automatically open up that file in your VS code. And to the line where the error actually happened. And my mind was blown. When that happened. I didn't know that until I was recording and accidentally clicked on it. So hot tip there. Yeah, I think that is absolutely brilliant in tools that do this kind of thing that make error debugging, like that much easier by even maybe potentially showing you where the issue in the code is like what line? Yeah, that's just on. It's unbelievable. It's one of those things that can only get better, right? Totally. Yeah. Next one is make sure you aren't debugging production. So this is a silly one as well. But I've done this 1000 times where you're trying to you are also maybe I should add to this, make sure you're not debugging production and make sure you're not cached. Because those two things I've pissed away so much with caching, because you just like all this, and maybe you're trying to fix a problem that's already been solved. It's just you're getting the old version in the cache. Yeah, that's the worst. So like, just check yourself I've so many times have been refreshing the actual live site link to local site was not. And then also make sure if you've got Think about it, because often I have like a, like one or two levels of caching turned on like the other day, I my own website was not refreshing. And it turned out that I had my I forgot to turn off my CloudFlare caching hit to turn that off, and you have to wait like 10 minutes for that to clear. And then it starts immediately showing up. - -4 -00:08:27,059 --> 00:11:55,919 -Yeah. And also, if you're debugging react in your in production mode, it like changes all of the component names and the React dev tools. And that can just be a huge mess. Sure. I mean, you can turn that off. But yeah, okay, yeah, the next one is going to be check the network panel for the whole response. Now, this was sort of a game changer for me when I figured out this, especially when you're working with API's and stuff like that. Now, this one is superduper important even for things like graph qL, or anytime that you're doing any sort of network requests, or maybe an image isn't loading or something like that, in the Network tab in your dev tools, it's going to show you every single network request that your site makes, and when they made it, how long it took the file, and whether or not it was successful. Now, what you might not know is that you can click on any of these. And you can get the entire request, the response, the timing, and all that sort of stuff. And oftentimes when there's well not oftentimes, but when there is a failed request, that request is going to show up as red. So if you are working in anything, whether it be an API call or a graph, qL or something and your data isn't coming in, especially if you've messed up a graph qL query, and you click that, and you look into the response, the response is most likely going to tell you the problem, especially with graph QL. It tells you exactly what the problem is. So if you are having issues where things aren't showing up, check that out again, and some of the simple things like how many times have you been like why isn't this image showing up and maybe the images in the wrong folder or maybe it's not doesn't have the right permissions or something. But if you check that network panel, you can see the actual request made and see if it was successful and See if that's coming back and actually working. I really like this tip because one big thing that happens when I'm teaching newbies JavaScript is that it's really hard to understand what cores is. So core stands for cross origin resource sharing. And, and what that means is that when you're sharing data or scripts between domain names, you've got my bank.com. And you've got Wes Bos calm by default data is not allowed to go from one domain name to another domain name, because what could happen is that Wes Bos calm could request, drain my bank account method on on my bank.com. And as soon as you visited it, if you were logged in on your bank, then it could drain your bank account, right? Like, you just can't have that. So each domain is generally sandbox. However, there's lots of cases where you want to share data between domain names API share data between domain names, you might have like, for example, I have many domain names, I have RAC for beginners. And I also have learned no comm, I want to share data between those two websites, because I want to I want to share, like what products people have bought between the two domain names, but I don't want to share it with absolutely every website out there. So what course will do is, of course, will allow you to define what domain names can access the data. And often what will happen is people will get this like, obscure error message or especially with when you're using JSON p, which is we want to explain that right now. But if you're using JSON p, it'll often tell you cannot read property, oh of undefined. And it's just a very obscure one. And if you go into your network panel, you can often see the data that you're trying to request back, but you can't actually access it with JavaScript, because because, of course because of the security model of the browser. So again, open up your network tab. And if you can see the data, but you're not able to access it in JavaScript, it's likely a course issue. And it will have thrown some cores issue. It's it's that access control allow origin header message that you often see, - -5 -00:11:56,039 --> 00:11:57,450 -Unknown: yeah, what's the worst? - -6 -00:11:58,559 --> 00:15:02,700 -Wes Bos: Or the best if you don't want your bank account? drain? Yes. What do we got next here, use debugger commands in the browser. So we're probably all used to using console logs all over the world. But there's also this concept of setting breakpoints in the browser. And what a breakpoint is, is you can generally go into your code and click a little red.on a specific line or on a specific function, and what will happen is the code will stop running at that breakpoint, it will break at that point, right. And in. That's, that's kind of cool. But what you can also do is, instead of having to go through your dev tools panel and setting those breakpoints, you can just pop the keyword debugger, semi colon anywhere in your JavaScript. And what will happen is if your dev tools are open, it will freeze JavaScript from running and then it will pop open, it'll sort of like allow you to peer into the application as it were that one second. And that's really helpful when it's helpful and all kinds of use cases. But one use case that I specifically use it for is when you have what's called a race condition where sometimes you find yourself being like, okay, when this is running, it says cannot read property undefined. But when I console log it, it's fine. It has that method. They're like, why can't I access this property? Why can't access this method. And that's usually because you have a race condition where one thing is running a little bit quicker than another. And that's, that's a whole nother world of pain where you have to get into a synchronous fixes. But setting a breakpoint will allow you to pause it at that point where you would normally just console log it. And then you can peer into that. That's some of my future tips, how to appear into what the JavaScript looks like at that point. Yeah, another good one here is using source maps. Now source maps are something that become much more important nowadays, because we have all this code that's compiled, whether it's our CSS, that's been compiled from sass, or stylus, whether it's our JavaScript that's been transformed from ESX, to something that the browser is compatible with. Basically, our code goes through these changes. And sometimes the files that get minified and compressed and moved into another file, when your error log comes up, it could tell you that the error is on line 1000 whatever of app dot j s, instead of where it actually lives, now at source maps do is they sort of map one to one with your code when it makes that transformation. So that the errors in your dev tools or when you're looking at your CSS in your in your style tab, it actually gives you the correct file, whether that's a stylist file, or SAS file, it gives you the actual correct file file, note location and file line and all that stuff rather than the end compiled one, like sort of the end one so that you actually know where to look for when you get these errors are these whatever's in your less flying in the dark? Because if you're not using source maps, and all this stuff's compiled, as it is an error on line, you know, 10,000 whatever, you really have no idea where to look. Yeah, so this really just all it does is it gives you a map like a treasure map is like Here's the error, let's go find that error, you know, - -7 -00:15:03,000 --> 00:18:48,870 -super helpful, especially when you have react components, it will tell you exactly which component and most, most browser dev tools will actually allow you to peer into your, that's what sorts of apps are. But if you have the file locally on your computer, it will, it'll show you the source file. So it'll show you your, your styles file or your sass file or your react component in dev tools. So you can actually see where that thing is, yeah, love them. Next one I have here is make full use of all of the console methods. So probably on my tombstone, will say, Wes showed people console dot table. Because of all the work I do for bird teaching people things, probably the one that I get the most praise for is showing people console dot table, which is when you have an array of objects. And each of those objects have the same properties. Like, let's say you have an array of people, and each person has a name, a last name and age and a dog, what you can do is you can console that table that array and it will show you a table of each of those rather than you console logging just a there's a huge dump of objects, you have to open every single object up individually. Right. So along with that, there's a whole bunch of other methods there. And you can go into the Chrome Dev Tools, or any or sorry, the MDN for console. And you can see and one of the ones that I really like, especially when you your console gets a bit messy, you've got console logs from all over the place, and you haven't cleaned them up yet. Like I know, that's probably not a good practice. But we all do it. And you all have too many console logs going on. So what console that group will do is allow you to open up a group, you can console log as much as you want. And then you can cancel that group end. And what that will do is it will just tidy them up into a nice closed group. And you can use a little arrow to open and close that group. And there's also another method for default, opening that group as well. And it's cool that you can visually see that this is for that one specific console group that I did. Nice. Okay, cool. Another one that seems sort of obvious here is opening your stuff up in another browser. And now for me, I have lots of in browser, lots of browsers installed on my computer, like I have like three different versions of Chrome, you know, Chrome, Chrome, Canary, that beta, Chrome, Firefox, Firefox, developers edition, Firefox, nightly, like all of these browsers, it's really important to try your thing in another environment. And sometimes it's a issue of a browser issue, right? Like the problem is the browser itself and how it's working. And other times it could be like an extension, maybe there's an extension installed on one browser that you don't have installed on another browser. And that's actually an exception. Yeah, I could run into that problem so many times. So also, maybe your browser is out of date, like Chrome Canary gets updates all the time. And there's often some issues in Chrome Canary. So checking to see if there's like a new update, and just running and restarting your current browser is a good little thing to do, too. But basically, just trying your stuff out in different environments. And seeing how the change responds to those in different environments is, is something that's always necessary if you're trying to figure out a problem. Yeah. Oh, is it that's actually a bit of a problem for me right now is often I'll get people reporting issues with my player. And it's almost always they've had an extension installed, whether it's like one big problem I have right now is privacy, badger locks, Vimeo, sometimes, so people are just watching it. And all of a sudden, they it says, for privacy reasons, we cannot load this video and the Vimeo, play@vimeo.js JavaScript library doesn't have a way to catch this exception yet. They're working on it, there's a huge issue open. Hopefully, it'll be solved soon. Because it's funny, I have a little snippet now that says, hey, try turning Privacy Badger off. - -8 -00:18:48,870 --> 00:23:03,210 -Nice. Next one has to do with the whole breakpoints and debugger command that I said earlier. And it's the stepping into and stepping over function. So again, when you have JavaScript, and you want to see exactly how it's running, when you set a breakpoint, it will pause JavaScript. And then you can use these the little arrows in dev tools to either step into functions, meaning that you could just click, click, click, and that will run every single line by line by line. And then you can also step over a function meaning just run this function and pause at the next function that's going to be running. And I find this I don't use this all that much. But I do find whenever I have a specially tricky issue, or I'm not sure where things are happening, like maybe there's not necessarily an error message. But something weird is happening with my data. And I want to know exactly where this is happening. And this kind of leads into my next point is by setting a breakpoint, then stepping over it, what you can do is it gives you the option to peer into both your data, he can look into your window object and see all the data that's in there. You can console log things that are in scope, but it also gives you a peer into the scope of the function, the scope of the application where it's Running. So you can open up this thing called scope. And it will show you what your currently scoped variables are. Let's say you're looping using a for each, it will show you what your L and I variables are at the current time. And if they're undefined at a time that where you're trying to call a method on it, then you then you know exactly why that's happening. Yeah. And scope is an issue that can definitely play a lot of people, like what do I actually have access to? What is this actually mean right now. So this is definitely a great way to get some insight into that. Another good one is to create a small replication and either like a code pen, or one thing that I've been doing lately is if I need a small reproduction, I say replication Yeah, replication reproduction. Yeah. If you need a small version of what you're working on, or to try to find an error, I oftentimes will go for a create react app. And I'll build a little create react app. And I'll just build only that thing that is messing up in the crate, React app, or if it's CSS, and JavaScript based, maybe a code pen or any of those things. And those are nice, because they're easy to share, but a create react app, you can just share the GitHub or whatever. But the point being is taking your code out of its current environment and putting it into an environment that is a bit more, I guess, what's the word I'm looking for? It's like, you know, when there's an outbreak situation, when there's like a quarantine, quarantine, you're like quarantine or isolating your code in a way that it gives you that ability to see exactly If the error is in your code. Or maybe it's in the environment in which your code is running. But if you can't reproduce the error in a pristine environment, and everything's working fine, then chances are there's not an error with whatever libraries or anything they're using. And the chances are that the errors that the in the environment that they're being run in. And not to mention, it's also makes it way easier to show someone else that someone else can look at this code and say, Hey, actually, you messed up on line 34, dummy, like, check it out. I guess to me that creating and taking your code into a new context is such a big thing to figuring out where the sort of context of the problem is, I think this is probably the most helpful tip for newbie programmers. Because when I was learning, what would happen is I would just try to tell someone my problem, and they would say, Okay, can you make a j s fiddle? And I just be like, Oh, yeah, I don't have time for that. Just tell me what's wrong with my code. And almost always when I was recreating the production, or what is this word, we're trying to say, trying to replicate it reap reproduce the error, you would stumble upon what was actually happening? because it forces you to go line by line and really think about how you're you're doing it. So yeah, it might seem like a waste of time to actually make this thing error out again. But almost always, you're going to find the issue. As it happens. I was about to say that exact same thing, right? It is such a it's one of those things that always seems like a giant pain in the ass and like a huge time sink, and then you do it, it is almost always worth it. Totally. Speaking of worth it. Whoa, what's that? Good. All - -9 -00:23:04,290 --> 00:25:36,210 -right. Let's talk a little bit about our sponsor, which is fresh books, fresh books is a cloud accounting software that I use for my business. And I highly recommend anybody who has a small business, whether you're a freelancer or have a couple of employees, you're trying to keep track of invoices, keeping invoices in multiple different currencies, I, I now have so far this year, have invoices in four different currencies that are going on. If you've got expenses, if you need to keep track of your time, how much time you're working on specific, specific projects, I use that a lot when I was doing hourly based billing for some of my clients, what I would do is just turn on the timer or at the end of the day, I would say okay, I spent six hours on this project, I would sell up in three or four bullet points what I had worked on, and then at the end of the month, it was really easy to generate an invoice that was detailed exactly what was happening on each of those days. So sign up for freshbooks@freshbooks.com for slash syntax and use syntax into the How did you hear about us, and you're going to get a 30 day unrestricted free trial. Nice. Yeah. Love that. What else do you got for me? here's a here's a good one. And this is always one that I really frown at when it comes about. But take a break. There'll be so many times it'll be a weekend. I'm like working hard, I'm frustrated or something. And I will just be like, take a break. Like go for a walk. You'll figure it out if you do that, because it always works. And I'll be like, Whatever. I'm just I'm almost there. I'm so close to solving this bug and should be like, No, no, no like, and I take a break, I go for a walk, I do something else. And sure enough, I always solve the problem totally or I just think about it in a different light because taking a break allows your brain to continue working on it without the sort of like stress of looking at the same things and it gives you a new mindset allows you to come back to your code with a totally new viewpoint and really just again, will illuminate some of the potential issues. So taking a break and Taking a step back from your code, allowing your brain to sort of process it for a little bit. Big, big, big tip. And it's one that's easy that people often like to not use, I can't tell you how many times I've solved issues by just going to the gym or having a shower or just giving it a rest for a couple days. And you come back to it with a totally new mindset. And it's usually not like a simple, quick fix, it's usually like, Oh, I should be approaching this in a totally different way. And just giving your mind the mind is crazy in that if you just give it time, it will just work on that in the background process. It's a ServiceWorker for your body. - -10 -00:25:37,410 --> 00:25:37,920 -Unknown: Nice. - -11 -00:25:38,759 --> 00:26:32,250 -Wes Bos: Next one is something called rubber duck debugging. And I love this because it is similar to reproducing it but the what people recommend is just put a rubber duck on your desk and talk your problem through to that rubber duck or if you have other people in the office. Because what happens is when you have an issue and you're trying to figure out what's wrong, if you explain what you're doing, how you're approaching it, and how the issue is happening, often by forcing yourself to outloud say the steps that is happening, you're gonna stumble upon Oh, I clearly wasn't checking for XY and Z or Oh, that was so stupid of me. I did this. So put a rubber duck on your I've actually thought about just getting Rubber Ducks as swag at some point and just putting them on your desk, because it's so funny how you can solve your problems just by talking to a rubber duck at your desk. - -12 -00:26:32,279 --> 00:26:39,150 -Unknown: Yeah, and it's fun, right? I mean, it's Yeah, it's got a fun, a fun little thing. Yeah. Big fan. - -13 -00:26:40,410 --> 00:29:31,560 -Wes Bos: Um, another big one is to check slack for GitHub issues. I get a lot of people tweet at me or send me emails to questions they have. And then I asked them to maybe do like a search in GitHub to see if it's a problem with the library. And chances are, if it's, it is a problem with the library, then they're most likely is an issue already there. And they're tracking it. And if it's not theirs, chances are someone's run into this issue and seen this error message before. And maybe you just made a mistake. And this GitHub, you know, issue line will show you where that mistake will be someone will say oh, well, I actually need to do this instead of this. So even just checking GitHub issues, is something that I sort of obsessively do anytime I run into a mistake just to see very, most, first and foremost, if there's already a map laid out for me to fix whatever I'm doing. So I don't have to figure out where I made the mistake, somebody else may have already made that mistake and figured it out. I think at the same point as well. If you ever find a GitHub issue, that you are having the same issue or the same error message, what I like to do even if it's like an issue that's a year or two old is just leave your solution in the comments. Because what will happen is over the next year or so there's going to be hundreds of people that stumble upon that on a Google search. And then they're going to give it a thumbs up because the GitHub reactions now you can usually just whiz through an entire issues, comments and find the one issue that hasn't 400 thumbs ups on it. And you know, okay, that clearly this is the silly thing that we all missed. And here's the solution to it. Yeah, yes, yes, yes, yes. Next one is use the node dash dash inspect flag. So this is not front end related, this is back end related. And for the longest time, you have been able to use Chrome Dev Tools on your node application. Because if you console dot log in a node application, you get it in your terminal. And unless you're using something like chalk, or colors, the output of console dot logs in the in your terminal is a very, very hard to read. And it's usually just a mess with other logs that are going in there. So if you now pass the dash dash inspect flag to your node process, it will fire up a like a local server that will allow you to talk to Chrome Dev Tools. And now I used to use a Chrome extension called nim. And I am and what that would do is it automatically would open up the dev tools when you started a new process. And there's probably still some use case for that. But now Chrome dev tools will just show you a little node icon in right to the left of the elements panel. And it's it's fantastic. Because you can now get a full blown console in Network tab, a couple of the other tabs as well for your node process. And you can use console dot group and all these things, debugger commands, everything that you're used to using in the normal Chrome dev tools in your node apps. Do you use this at all? Scott? - -14 -00:29:31,770 --> 00:29:40,770 -Unknown: I don't. Yeah. Now, it's my I know my, my site is based on Meteor and I know you can use it with Meteor and everything like that. I just haven't and I definitely need to - -15 -00:29:41,070 --> 00:29:42,450 -Wes Bos: just don't have issues. - -16 -00:29:42,840 --> 00:29:48,690 -Unknown: Yeah, no, I have no bugs ever. In fact, I have zero bugs me my code is absolutely pristine, constantly. - -17 -00:29:49,350 --> 00:34:14,400 -Wes Bos: Cool. I guess that's all the we have one more. Oh, one more Sorry, go ahead, which is to read the code in the library, because Okay, so code author is in open source, awesome authors, a lot of time though writing their code, and said, The sad thing is, is, you know, sometimes the docs, they fall by the wayside. And maybe this code has some features that are undocumented or not fully documented, maybe a function takes some parameters in a certain way. And then the API isn't documented correctly. Or maybe you're just running into an issue with the library itself. Now, this one's a little bit more advanced, if you're not like necessarily the best at reading code. But if you have access to the repo, and the pre compiled code, you can see the code as authored and see exactly what the API should be like. And you can actually look at the author's code to see all sorts of stuff. I mean, if you're using a method, right, then maybe you should see exactly what that method accepts what it outputs, what it actually does inside of it. And maybe not all of it is the most important part. But let's say you're just running into an issue, it doesn't hurt to look into the code and see exactly what the code expects, or how it was written. I learned a lot about a library called react spring the other day, just by looking at the actual implementation of it to see that, Oh, well, this thing actually does accept some props and configuration options that weren't exactly how it was shown in some of their examples. And because of that, I was able to actually get some stuff done without filing an issue to ask a question, or, or find someone else to say, hey, can this do this? Or can this do that, just by looking at the code totally. And on the same thread, often, the people who write these libraries are not the same type of people who write good documentation. So like, on the flip side, I'm not a great library author, but I'm great at providing examples and explaining things. So I sort of find that as my calling to say like, Okay, take 20 minutes out of your day here, and, and update the docs, because these, these author libraries are putting in lots and lots of time actually building this thing. And if you can take a load off both in terms of support as well as helping other people that are using it, then it's going to go a long way it is. And the best part is is like if you are running into an issue, chances are other people are running into an issue too. And if you can cover that in the docs, you're gonna save so many people have it like tight, like, why run into the same issue that everyone else has run into when somebody at the beginning of this like car crash could have just fixed the issue, and then there wouldn't have been a big car pile up to continue that metaphor. Yeah. So okay, so those are a lot of our debugging tips, sort of willy nilly stuff that you can use all over your debugging process to improve how you do your stuff. I think in this part of the episode, we want to take some time to talk about the different sort of browser debugging tools that come in both your Chrome Developer Tools as well as your Firefox developer tools, because although a lot of us open up this and see the elements tab, or the styles tab or the council, then a lot of us don't necessarily go past those tabs and pass those tabs are where some there's really excellent stuff. And not to mention more and more excellent stuff, like constantly being added to Chrome. And so because of that, I think, I think, yeah, we should maybe highlight some of our favorite tools, we did mention the Network tab earlier on in this and I use the Network tab, almost more than any of these, well, I guess, some of the extension ones or whatever. But I use the Network tab all the time, especially when working with queries to see what data if the data call was successful, why it wasn't successful, and where the stuff is coming in. I know we talked a bunch about this earlier. But I use this one a lot, especially for the waterfall too, you can see how long things took. And maybe there's some performance optimizations you can make here and there based on how long things are taking the load. Or if you're trying to try to debug like an AJAX request. And often what I'll see people is do is they they write the code to fetch the data, and then they write the code to parse the data. And then they write the code to display the data and it doesn't work. And you're kind of sitting there being like, oh, what did I do wrong? Right? With the Network tab, you can just say like, okay, is the request firing? Good? Is the request bringing back data? Good, what does that data look like? And then Am I parsing it properly. And then if all of those things work, then there's probably issue with the displaying step. So narrowing down where it's actually happening is really important. - -18 -00:34:14,520 --> 00:36:28,290 -Okay, so next, that's frequently used is the Performance tab, which allows you to click a record button, reload your site or do some sort of action and see the code that is being run in what's called sort of a waterfall of code like one function, which calls another function which call another function. And it sort of all goes down in this like sort of triangular, like an upside down triangle shape. And this is really sort of beneficial for seeing where things might take a long time. Maybe there's a loop in there somewhere that is doing too many things. And not only that, but you can see the screenshots of your application as it's loading as it's working. You can enable CPU throttling to make your computer under higher stress. You can enable network throttling to slow down See similar slow 3g networks or even offline, this thing is just so incredibly handy for seeing how your application loads and the performance of it, I use this one again. In addition, in the Network tab, I use this one all the time, especially when I'm taking time to make my stuff load faster. Awesome that I use that quite a bit as well. And sometimes when I have like a 20 minutes or so what I like to do is just go into the Network tab and see like, how much can I shave off of my my page loading. And I remember I went on my CSS Grid site, and I put was a cloudinary passport. So I put their like image compression URL in front of all of my images, and I shaved off like 500 milliseconds or something like that. And in quite a bit of like, I think like, four or 500. Meg's worth of download, I was pretty happy about that. So it's kind of fun to see. Okay, where are the big things coming from? And how can I actually get those down? Sort of what I love in these Dev Tools is specifically Firefox has a lot of like little edge case tools that not a lot of people know about, because I know that a lot of people are on Chrome, but Firefox is dev tool game in the last probably a year or two years has been doing really, really good. We've talked about the CSS Grid dev tools are fantastic. But it's like the little things like the fonts tab. Have you ever like tried to debug a font? Oh, my God, like, I don't know if it's my computer font, or if it's actually working? It's one - -19 -00:36:28,290 --> 00:36:34,800 -Unknown: of the my top my least favorite things to debug is, why isn't this font loading? Or why isn't this font working? - -20 -00:36:35,100 --> 00:41:34,590 -Wes Bos: Yeah. And what you can do is you just go to the fonts tab of your like, you select like a paragraph tag or a heading in Firefox dev tools, hit your fonts tab, and then it will show you which Web Fonts you're loading for the page. And then it will tell you other fonts in the page. And it'll tell you if they're system fonts, or if they're web fonts. So that way, you know, and I've done this many of times, I've it looked great on my computer, I deployed it, and then you forgot to or the web font wasn't working for some odd reason, because it was just a font installed on your computer. Yeah, totally. And along the lines of that, here's a little a tasty treat, if you don't know about it, but the three little dots in the next to the x, that gives you all the settings in the Chrome Dev Tools, there is a little tab there that says more tools. And this is going to be where you'll find a whole bunch of awesome little tools just like that in Chrome that you may have never even used before. And this list grows all the time. In fact, one of the options in this list is what's new, which is always worth popping open to see what's new in these latest versions of Chrome or Chrome Canary with the tools that exist. In fact, I was just doing a lot of animation work. And there's an animations one in here that allows you to step through an animation with a playhead. Anyone who's ever worked in something like after effects, or any sort of animation design library knows that well, animations on the web are very difficult to really figure out or fine tune because you don't get access to the things like a playhead. And this basically, anytime you will trigger an animation. For instance, if I hover over something, and there's an animation, it automatically gets locked into this animation thing, you can click the animation, you can drag the playhead around, you can make fine tune modifications to this and then re click the play button to watch the thing. Go again. So you're really doing some animation debugging, this thing is super, super cool. Not to mention just just for the sheer amount of customization options it gives you and stuff like that it's awesome. All along the same lines of all these little edge KC tools because like sometimes we just get stuck in the elements tab, and then maybe the console. And you know a little bit about using a couple of the other ones, but there are so you can dive deep into all these different tools. And Umar I don't know if I'm saying his name, right. I apologize if you're listening to this, because I've met him before. But he has these dev tips. And he's been doing this for I bet like six years or something like that. He's been posting these little animated gifts of how to use different features in the dev tools. And he's been tweeting out little gifts forever. But if you go to Umar u m a r.com forward slash dev dash tips, we'll link it up in the show notes. He's got 171 of these little little tasty nuggets, tasty treats that help you to learn the little edge cases of it. And he also has a course as well, which is modern Dev Tools comm which goes into it looks like a little bit more in depth of it. So I would check that out if you're interested in really conquering the different pieces of the dev tools if the stuff that we're learning today. If you're saying Whoa, I didn't know you could do that. We're only scratching the surface here. Yeah. And along those lines of another little one is B one a Firefox got first and then chrome thank god they added this because I love this one, which is the layers in Chrome with under more tools layers, and it's going to show you if you're working with a lot of stuff that is occasionally on or off screen right? Maybe menus flying in or alerts or something like that and things like Working, you're not quite sure, or like 3d stacking order where two things line up on top of one another, this layers will show you the entire website with stuff outside of the canvas included. So if you have a menu sliding over, that menu will be over on the side, and you'll see it off of the canvas. And you'll see where everything sort of exists. Really just making sort of debugging these kind of situations way better. Not to mention, there's also 3d views where you can click and drag and see this thing as like sort of a 3d model in space. And the cool thing about that is then you can really figure out stacking order, and maybe why things aren't lining up on top of each other, or why you can't see something, maybe you can see something, and maybe it's just hidden underneath, like hidden underneath this stuff. So these 3d views and the Layers panel are really super cool and can come in really handy when debugging layout. Another great one I have is overriding sensors. So if you ever working with you want to work with geolocation, you want to fake some data that's coming in, if you want to ever fake the like fake an iPad, actually a little little hot tip, if you go to instagram.com and set your use Chrome dev tools to make it an iPad, you can actually use Instagram on the desktop, you can upload photos, you can view stories, I didn't even know you could do this, but you can I my friend arley posted a little similar day. And you can I didn't even know you could use, you can use all of Instagram, uploading and liking and commenting and viewing stories from the desktop. If you just fake the user agent as a mobile phone, like an iPad, something like that, - -21 -00:41:34,610 --> 00:45:57,510 -yeah, that it's awesome. I the amount of stuff that you can just, you can fake through that I use it all the time. For geolocation. Personally, I was on a here's another little hot tip, I was on a plane once and the plane had a sometimes they have cheaper rates if you're on a phone for internet. And once they had it free if you were on a Blackberry. So I just I just fired up my dev tools and change the user agent to a Blackberry. And then I got free internet. And then I switched back and I had free internet for the whole flight. And that is off just yeah, you always got to try it. Anyways, we have different sensors. So what's the when you tilt your phone, what sensor is that? accelerometer? Yeah, the accelerometer, I built some fun stuff in that you can actually tell via JavaScript, how the user is holding their phone. And if they're turning it and flipping it over, you can fake that you can fake the geolocation. If you open up Xcode, this isn't in the browser. But if you open up Xcode, and you open up the iPhone simulator, you can actually simulate somebody driving a car or the called riding a bike and turning. Because one time I needed to build a clickable speedometer with html5 geolocation, and it tells you the speed in there. But the hard thing is that in order to test that you have to run down this tree. So you can go into it. And this is part of my JavaScript 30 core. So you can go into Xcode and simulate someone driving or someone riding a bike and someone local a city traffic or highway traffic. Yeah. So I mean, there's just so many of these things. And they're all super duper helpful in all sorts of use cases. So I guess another one I wanted to talk about was maybe like, what sort of extensions Do you use for Chrome dev tools I personally have, like the Apollo dev tools, which are awesome. I have the React dev tools, the Redux dev tools, the view dev tools for any of those apps. But in addition, I also have the lighthouse extension to allow me to use lighthouse at any given point, as well as a JSON format, or which people comment all the time, this Chrome extensions called JSON format, or Yeah, all it does is give you pretty JSON, or you can look at the raw, it allows you to collapse, it allows you look, I use this all the time when looking at data coming in. I love it. Because if you highlight if you hover over a nested node in your JSON, it will tell you the path to actually get to that that nessa thing in your JSON. So it'll tell you like person named first the abbreviated, it'll show you the all the way down. And then you could just copy that dot path to what you're looking for. Yeah, so nice. Another tab I really like is the application or storage tab, that depends on what browser you're using. But this will often tell you what cookies are set by that browser. So if you're having trouble with something going on, or if you actually want to log out of website, you can just clear all the cookies and then refresh the page. And you can see exactly what is being set. And then it also shows you things like local storage in index dB, so you can see what data is showing up for that specific domain name. I use those quite a bit. The cookies wasn't in there for the longest time, but it is now and it's really, really good. Nice. One I really like is the Firefox grid inspector. It shows you basically everything about the grid lines, the gutters, all that stuff like, oh, what exactly your grid is looking like. And I actually use this one just yesterday. I mean, I use this all the time, but just yesterday, I was having an issue in Firefox specifically where the grid was off. sort of weird, but it wasn't weird in any other browser. And I checked it out. And luckily, it showed me that there was a whole lot of padding getting applied to things. And it turns out that Firefox doesn't handle a padding percentage on a grid item very well, where all the other ones just sort of view it as a normal. And I use the padding percentage for aspect ratio, like placeholders for images. So because of that, I was able to see that the actual grid cell was way, way bigger than it needed to be, I just simply wrapped each grid cell in a div, and it was doing those as the children rather than the one with the percentage bottom. And I could see that it was sort of instantly exactly how to fix that using the Firefox grid tools. So there, if you're working with CSS Grid, I'm hoping chrome implement something that's as good or better than these, because they're just so good. And I use them all the time. But one way that you can avoid having to debug your CSS Grid at all is by using coffee cups, CSS Grid, prototype, software, - -22 -00:45:57,660 --> 00:49:30,120 -good transition. So coffee cup is a they make these tools for working kind of visually building websites. And they contacted me a while ago, they actually just typed in CSS grid.io, I think to try to buy it, because they were coming out with the CSS Grid product. And they found that I had done a course on it. Then they got in touch and said, Hey, like, Is there anything that we could do together here? So I set up a call with them, I was like, okay, so you are building it, what they have is they have this actual program that allows you to visually drag and drop and add elements in use CSS Grid to build an actual website. So I said, Okay, that might not be a really good fit with our audience, because like, we don't really use visual builders, but show me right. And so I jumped on a call with them. And I actually loaded up the software myself. And I started to build a layout based on CSS Grid. And then, so it worked really well. Um, you can add different types of elements, you can change how big they are, all of like, I know a lot about CSS Grid, I did an entire course on it. So I was really given it the gears to see how this thing works. And to my surprise, it worked really well. And then when it exported the code, the code was extremely clean, I got some a bit burned from 10 years ago, and we had Dreamweaver and export this gnarly looking code. But this is absolutely a way that you could visually build, you can use their templates that they have, or you can just visually build a layout in CSS Grid. And that's probably why I like Firefox dev tools, because it visualizes grid for you. And then you can export this thing to HTML and CSS, and you could probably just pick it up from there, you can either edit it in this thing, or just pick it up from there, the code is so clean, so I was very, very surprised at it. And if you're looking for a way to either learn CSS Grid or just build stuff with CSS Grid, I'd probably recommend checking this out, they've launched a domain name, CSS grid.cc. And on that they have the free CSS Grid builder that you can download, you can watch a demo video, how it works. And then they also have a whole bunch of resources on how CSS Grid works. So because like part of understanding CSS Grid is not just getting a tool, it's it's really thinking and tackling a layout in terms of CSS Grid, you really have to relearn how to do layout when you learn CSS Grid. So they put together this awesome website at CSS grid.cc. That will both give you the tool that you need, as well as the a bunch of information in terms of how to learn CSS Grid. So check it out at CSS grid.cc. And thanks so much to coffeecup software for sponsoring the podcast. Nice, cool. So I think that pretty much does it. I mean, there's just so much stuff here. There's so many dev tools, and we left out probably a whole lot of stuff and debugging and performance tips. So maybe we'll have to do a part two to this where we talk a little bit more in depth about some more dev tools and really dive into some of that stuff. I don't know if you would be down for that. But I would be down for that. Yeah, tweet us at syntax FM tweet us your favorite dev tools, tips. And we'll probably put together another episode on this. My sick pick today is it's not gonna be tech related at all. But I posted a picture on Twitter the other day of just my backyard, we're having a beer with my wife in the backyard. And a couple of people said, Hey, nice coffee table. And so my sick pick is how I actually got this coffee table. So it's kind of a I think developers will find this interesting. Do you guys have a Habitat for Humanity restore down there? - -23 -00:49:30,120 --> 00:49:32,250 -Unknown: I think we probably do. Yeah. - -24 -00:49:32,280 --> 00:50:42,360 -Wes Bos: So Habitat for Humanity has these stores in Canada, they're called the restore and they sell building materials that people have donated. So someone rips out a kitchen and the stuff is still good. Then they donate it and then you can go in and buy it. So one thing that they sell is granite countertops from counters that people have ripped out and replaced with new stuff. So what we did is we went and found a piece of granite that was I don't know maybe three feet by two and a half feet. It's heavy as hell but it's like 150 bucks for a huge piece of granite. Then we built some cedar some cedar like a like a base for it that we could put the granite on top of and it's like the best coffee table for outside ever because it's super heavy because it's hundreds of pounds from the granite and it's it stays outside all year round it handles the snow just fine because it's literally granite and cedar. And it's it's great for the kids because you can just wipe it down you can hose it down it doesn't get musty or moldy or anything like that because it's natural materials. So hot tip if you're trying to build some sort of outdoor coffee table maybe look for a piece of granite and and build a table out of it. - -25 -00:50:42,390 --> 00:50:48,960 -Unknown: I thought it was really cool when I saw that. Yeah, I'm actually very very into this idea. So I'm definitely have to see a little bit - -26 -00:50:49,500 --> 00:54:45,450 -Wes Bos: about one probably 18 years ago they built one and they still have the same one and they've never sealed it or anything and sitting outside for was 1618 Canadian winters. Amazing how well I think they've rebuilt the cedar base once in that 18 years. That's amazing. I'm really sick pick sick tip pick tip pick my sick here is going to be for an app that I'm sure a lot of people have already but for those of you don't know this app saved my butt. It's called Hotel Tonight gives you really cheap rates on hotels specifically if you need them like now like if you ever need a hotel and you're somewhere Hotel Tonight gave me a like literally like 50% off of a hotel. So when I was in Paris on my layover instead of like having to stay at a crappy hotel for X amount of dollars or whatever I was able to stay at this really sweet fancy hotel for the exact same price and not to mention the app itself is really cool just really well made so I always a big fan of well made cool apps so Hotel Tonight has saved my butt on multiple occasions when I need to book a hotel at the last minute so yeah sick pick that's cool. I saw an ad for this on TV the other day Really? And it said Hotel Tonight for hotels that are not just for tonight apparently Oh yeah. Oh unfortunate name but it sounds like a great app. Well I think I think for a while they could only book hotels for tonight. I'm not quote me on that. But I think that's the way it was and then they just realized that maybe the market could be larger if you could book for more than a few nights in advance that's like hotwire is now just showing you the name of the hotel being like low last six customers got this hotel and every time that because people hate that sort of guessing game I my sick pick a couple months ago was a website where you could decode the what hotel it was, but now they're just showing it to you. Now you nice, cool sick pick for me it are no shameless plug. I'm just gonna shameless plug all my courses at Wes bos.com forward slash courses, can check it out, I've got so much ESX and react in all kinds of good stuff, I am almost ready to record my advanced react course. I it's funny because Prisma which is the the graph qL database, they've they rebranded from graph cool the other day, and they have had some major changes in the last couple of months, Apollo has had some major changes in the last couple of months. Next j S has had some major changes, and hopefully Fingers crossed, everything has stopped changing for at least a couple of months. And I'm glad that I've waited this long because it would have all been out of date in a month or two. But it's it's all being reviewed by a couple of the best people in the industry at this stuff right now. And then I'm ready to record. So probably a couple more weeks before you can get it. I know everyone's chomping at the bit to get it. Yeah. So that's the whole thing is like the growth in our industry is amazing for like getting new features and new easy ways of doing things and new products and whatever. Yeah, for us content creators. It is very difficult. You You spend all this time agonizing over decisions about what software and what tools to use, and then you get one thing and then it's invalidated. It totally ruins everything that's happened to me so many times. It's definitely like a learning experience about how to design courses that are more bulletproof. But that's so totally. And on the flip side, when something does work very nicely, like my node course has been for about a year, year and a half. It's been out for about a year and a half about a year it's been out and it hasn't had any major updates other than a couple things here and there. And then people ask me if it's out of date all the time. They say no, yeah, no, yeah. So you're you're you're kind of damned either way. But that's the industry right like that we we chose to work in it and you kind of have to keep up to date with it. And by keeping up to date we become you have a bit of a competitive advantage over a lot of those garbage tutorials that become out of date and they don't bother the time to update them. - -27 -00:54:45,480 --> 00:56:35,340 -Yeah, my shameless plug is going to be my level two react course. This is going to be coming out this week on level up tutorials. It's already recorded. I was hoping to get all the editing done on my vaycay but it will not vacate my trip to Romania. I wish it was to vacate. I did not get all of it done. But I'm hopefully going to crush the rest of the editing in the next day or two and get this thing up for release on Wednesday, if not Thursday, probably this is a course it's a intermediate level react course. And the idea behind it is that it's covering pretty much the next level of stuff that my react 16 for every one course didn't cover or maybe wasn't didn't exist. So covers the context API covers, using portals, it covers really, really sick animations. I'm doing sort of like the Tinder interface where you're dragging a cart around. And these are extremely performant animations, you're going to be sort of blown away by how good these things look in any sort of regard, we go over sort of all the systems about using a library called react spring to build these really excellent animations. And again, we go through and build some practical stuff to like an animated modal using portals using render props. I mean, there's like the first few videos of the series just set you up to understand now concepts that are becoming very, very popular like render props in react. So this is going to be an intermediate skills course but it's going to be nice and easy ramp up to set you up to learn and use all of the new and awesome techniques in react so level to react to level up tutorials.com forward slash store where you can subscribe get access to that along with every other tutorial or you can purchase that one outright if subscriptions aren't your thing, quick good. I think that's it for this week. You had anything else got nothing. Awesome. Thanks so much to coffee cup CSS Grid builder and fresh books for sponsoring. And we'll see you next week. - -28 -00:56:35,340 --> 00:56:48,030 -Unknown: Please pace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax48.srt b/transcripts/Syntax48.srt deleted file mode 100644 index 31c7e6889..000000000 --- a/transcripts/Syntax48.srt +++ /dev/null @@ -1,532 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,879 --> 00:00:08,010 -the podcast with the tastiest web development treats out there. strap yourself in and get ready - -3 -00:00:08,669 --> 00:00:20,300 -Scott Tolinski: to live ski and West boss. Welcome to syntax, the podcast with the tastiest web development treats around with me. As always, we have Wes Bos. Hey, what's up? - -4 -00:00:20,339 --> 00:00:24,179 -Wes Bos: Hey, everybody, hope you're doing well today. Happy Memorial Day, Scott. Hey, - -5 -00:00:24,179 --> 00:01:01,110 -Scott Tolinski: yeah, in the US, it is Memorial Day today. And today we are going to be talking about VS code. Again, it's going to be our part two to our VS code episode that we did more than half a year ago, and basically covering a lot of updates and changes in VS code since then, again, some of the extensions, tools and tips and all that good stuff that we like about using pretty much both of our favorite text editors, I'd say, yeah, this episode is sponsored by Log Rocket. We'll talk a little bit more about Log Rocket later. But it's an excellent way to help debug your applications. - -6 -00:01:01,169 --> 00:01:30,300 -Wes Bos: Cool. So yeah, it's been I think I counted like eight months, which blows my mind that we've been doing this podcast for even eight months. But about eight months ago, we made an episode on vs. code. And we went through some of our favorite tools and tips and whatnot. And I know that we've audiences has grown quite a bit since that time. So I thought we would just start off and explaining like, why are we on VS code? I think I've been on it for almost a year. Now. I've been on VS code. I think you've been on it even longer. But I thought we just did a quick, - -7 -00:01:30,360 --> 00:01:31,290 -Scott Tolinski: maybe a couple - -8 -00:01:31,410 --> 00:01:48,540 -Wes Bos: a couple years. Wow, impressive. I was on. I was on sublime tax for years and years before that. And it was hard for me to switch over just mentally, but actually did this switch over it was it was so nice and quick. And let's just talk about like, why why do you use VS code over anything else? - -9 -00:01:48,570 --> 00:03:07,560 -Scott Tolinski: Yeah, for me, it's a nice middle ground between something like sublime, which is performant, but has kind of, in my opinion, not a great user experience. And it's like a has a fine user experience. But like, I've never found debugging things going wrong in Sublime Text to be very much fun. Yeah, I mean, there's something as simple as es lint not working now, how do you figure out why it's not working in Sublime Text? Just, it's just no fun, right? I mean, it's, again, all this stuff's doable, whatever. But I've found that the nice middle ground between you have this sort of no help system, that sort of bare bones, but very performant, like sublime. And then you have this system, that's all user interface focused like Adam, but has terrible performance. I liked that him for a long time. But the larger project you get on that thing just started chunking. down. And then so vias code is a nice little middle ground in between there. And even, it's now become more of an ID light, where it has all these excellent ID type of features. But it's still super performant is free, and has a huge extension market is just, in my opinion, the the text editor with the most bang for your buck, which is obviously zero dollars, but it's still got the most stuff, and it performs the best. And it feels the best. I just like it all around. - -10 -00:03:07,590 --> 00:04:55,130 -Wes Bos: Yeah, I think the the thing that got me moving over to it at first was that VS code has just the right amount of UI for being able to interface with it. Because with sublime, we had like a, like a couple different modal pop ups that you could use and some very limited subset of CSS. I know they're, they're currently working on making that UI in sublime better. But just the ability to have a really nice UI and have everything in VS code is what moved me over to at first. And then just like the sheer amount of awesomeness that they're they're bringing to the editor in the the crazy pace that they're working on, I think they have, they must have like, like 1015 and I don't even know how many people work on VS code. But every single month they release once a month, or you can get in the insiders build and you get these new features all the time. And they release every single month with just a huge slew of new things that are coming in. And like you said, a lot of the new features that they are starting to roll out are Id like features, which is really funny again, we joke about a joke about most web developers are sort of just like sitting here with our untyped languages and text editors and and there's people using typed languages and at ease being like I told you this was awesome. Yeah. Yeah. But yeah, some of the features that are coming are amazing like one of the new features that they have is auto import. So if you were to import if you're to use a function that is from an imported module, it'll automatically stick that import at the top of your file it doesn't work for me every single time and I haven't really dug into why that is but it's pretty cool to see that all these new new features are always coming to the editor and again the extension market the theme market is just blowing up there's there's something that is amazing for absolutely whatever you're working on - -11 -00:04:55,130 --> 00:05:34,110 -Scott Tolinski: Yeah, and I ride with the insiders build way Yeah. Wow is always out. Asking for updates and is occasionally breaking. But yeah, it's really nice because you do get the features early. They they don't always document what those features are. So you might not even know these things exist. But if you're poking around the editor, you can see new things here and there. And I like it. For the most part I sometimes wish I wasn't using the insiders build when some some odd things happen, like my react, commenting system breaks occasionally. And then you have Oh, yeah, data restart. But other than that, I mean, it's, it's pretty darn solid for the most part. But yeah, this this new stuff, or no, do you want to get into some of the new features coming other than auto imports? - -12 -00:05:34,350 --> 00:06:44,460 -Wes Bos: Yeah, yeah, let's, let's rattle through a couple of them. And what I would suggest that you do, if you're interested in what's new, is just do a quick search for vs. Code updates, or just go to code, Visual Studio comm forward slash updates. And along the sides, they have every single month, and they have the big release notes for every single one. And a lot of these new releases are targeted towards JavaScript, CSS devs, just web developers in general, which is, I guess, the target market for VS code. But some of my favorite new ones that have come up, come out in the last couple months other than auto imports is the new notification API. So if a plug in or a theme or something needs to notify you that something happened, like maybe one of your plugins needs to update a snapshot, we'll talk about that in the future, then it has this new little update in the bottom right hand corner where it doesn't really get in your face, but it's a little toaster pop up that allows you to, to see what's going on and you can put buttons inside of there. And that's that's just what I mean about VS code. Having nice interface. They saw the need that it was hard for people to notify users that something had happened. And then they rolled out this new type of notification, which is a bottom right hand corner toaster. - -13 -00:06:44,460 --> 00:08:32,580 -Scott Tolinski: Yeah, you know what, I love everything about this, except for when I'm recording tutorials. And I don't know, popped up and then I realized I'd recorded a good like five minutes with this toast message. You have to Yeah, go cancel it out. But yeah, no, the new the new toast message is great. I love that. And you another really cool thing, again, is the the auto import which you had mentioned, which again, it doesn't work every time for me. And that is a little bit of a bummer. But being able to auto import your stuff is not super huge, exactly straight from your, your NPM file. And it almost is the kind of the features that do make it feel like an ID right, where that's the kind of thing you miss from work. Well, not the kind of thing I necessarily missed. But it's the thing you miss from working in Java or you know, Android development that I used to do, where it always is referencing which packages you need. And I don't know, I just love that kind of helpfulness that comes from your, your editor here. So another awesome new feature is these linting errors in the file explorer, because these will show you anytime you've been editing a file and it has an error in it. Now I don't know for you, but for me, it's only going to be showing these errors for files that you've modified. Since the last commit, I believe or you have open I'm not quite sure which it is. But it shows you the error message or shows you the errors or which files have errors by highlighting the color and the file name red. And then it will tell you how many errors are in that file on the right hand side of the Explorer. So let's say like two comma m m, meaning modified since the last time you had a git commit. So if if there's warnings, it turns your files, yellow, and if there are errors in your file, it turns your files red. So you can quickly see at a glance which of your files still have es lint errors that you need to take care of. Yeah, - -14 -00:08:32,660 --> 00:09:06,090 -Wes Bos: I love this because you can quickly and also if there's a file hidden inside of a folder, it will turn the folder read and accumulate all those error numbers into a single number. It's fantastic because at a quick glance, I can see pacifically I use es lint and prettier. It will show me what errors and warnings I have in my sidebar and I can quickly rattle through all those rather than having to spit out a list in the command line, I find that I use this quite a bit. Also, when I before I do a git commit, I can quickly see what's been modified, modified, added, deleted, etc. - -15 -00:09:06,120 --> 00:09:11,659 -Scott Tolinski: Yeah. So for me, it only shows the files that are open. I've determined this - -16 -00:09:11,730 --> 00:09:15,120 -Wes Bos: Okay, for me, it shows me everything really? Hmm. - -17 -00:09:15,899 --> 00:09:23,250 -Scott Tolinski: For me, it's like I was I have to open a file and have an error in that period to work out. Who knows this could be an insider's build thing or one of these little issues. - -18 -00:09:23,850 --> 00:11:12,419 -Wes Bos: Yeah, that's actually a problem with sometimes when I do tutorials, people ask me how I replicate a specific UI and my editor and I'm just like, Oh, I don't know, because you've been like working on your editor for like two years. You don't know what is what a standard, what's a plugin what you've changed via your own settings. So what I tried to do, and I just have a dot files repo up on GitHub, but that just gives everybody my current settings and usually from looking at all of my current settings people can figure out okay, is this something that Wes had used the setting for or is it a special plugin that he's installed? Or is this a standard VS code thing now, huh? Cool. Another one that I really like is column selection. And this goes way back to when I used to use text expander. This is something that I could never get working in sublime. If you click the middle button of your mouse and I don't doesn't Mac button have a middle button by default? No, no. Okay, I use this thing called better touch tool, no, not better touch tool, magic prefs. I've been using magic press for for years and years. And it's just a nice little preference that you can put on your computer that will give you a middle click button on your Magic Mouse, because I need a middle click to be able to close tabs, right. And what happens when you when you click your middle click button and drag down, it will give you cursors all the way down. So if you have some, let's say you have like 80 lines, where you need to put cursors. And you need to select character eight through 14 on all of these lines. And this often happens when you have data that looks exactly the same, you can just middle click drag down and select every single line in the same amount of time, which is amazing. And you could also just use it to pop a cursor at the same point on every single line. And I'm so glad that they added this feature because it was something I had missed from text - -19 -00:11:12,510 --> 00:11:32,279 -Scott Tolinski: that I say text expander earlier the expander but I was no man text. What is it text? Text me text me? Yeah, I know, it's been so long since I've had text. I know that was like the the first text editor that I used that had the plugin system and then this kind of interface before that. I think it was like more into things like coda and stuff like that was a long time. Yeah. - -20 -00:11:32,399 --> 00:12:14,100 -Wes Bos: Another really cool thing that I've just noticed recently is if you ever open up a file that has an extension that VS code doesn't know what to do with, like, for example, I opened a CSV file the other day. And what happened is it just opens it up in plain text. But it then suggests, hey, the marketplace has a bunch of extensions that are useful for CSV files. And I love that because every time I open up like a dot E and V file or a CSV file, then I discover new plugins and new syntax highlighters that are specifically for it. And I found this really cool one that will highlight a CSV file and every single comma just as a different color and the content inside of that as a different color. So it's really easy just to visualize a CSV - -21 -00:12:14,100 --> 00:13:40,649 -Scott Tolinski: file. Cool. What am I new favorite features that I'm not quite sure when some of this came in, because it sort of comes in all the time. But since the time we recorded this podcast last two now there has been a ton of more options for customizing the interface. Even things like hiding what's called the the activity bar hiding the status bar hiding the entire sidebar, the entire panel where you have all your your debugging extension icons, all that stuff you couldn't necessarily hide or even customized before with a theme. So now you can customize it with theme obviously that that came into VS code A while ago. But the fact that you can hide all of this stuff just from the view, the View menu and you can select View and then toggle any of this stuff, I really recommend learning the keyboard shortcuts especially if you're hiding the sidebar stuff, I use the the the extension or the the keyboard command to hide the Explorer, the extension window all the time. And I just leave it open. What that does is it gives you a ton of room it with your actual editor for your code, your terminal all that stuff. If you don't need to have your file explorer, open 24 seven, which you most likely don't need to have it open 24 seven, or that extra little toolbar, how many times do you actually need that toolbar if you just memorize Command Shift E or Command Shift X to switch between those windows. To me that was a huge change allowed this editor to really clean up the sort of space that it takes up in my window. - -22 -00:13:40,679 --> 00:14:55,770 -Wes Bos: Yeah, because like as Scott and I we're recording these video series spaces at an absolute premium when you're trying to show your code and what I like to do in my tutorials is show both my code and my what we're building at the same time if I can fit it. And when you have all this extra like already the VS code gutter where you have the line numbers that's already huge because it needs to be able to import breakpoints and put get status in the in the gutter there. And then you have this this activity bar on the very left. That's where you can switch beside between like viewing your extensions and viewing your debugging and viewing your open files and, and file system. So what I recommend is just hide the activity bar altogether. And then learn like Scott said, learn the shortcuts to toggle those things open and close and just open them when you need them. Because chances are you don't need to have them open because you can either toggle them open, like we said or most stuff is going to be available via the command palette. And that's Yeah, that's like a little tip that I like to tell everybody is that you're probably not using the command palette as much as you should be. The command palette is if you hit I think it's Command Shift p i have the sublime key map extension installed. So whenever I tell people shortcuts so it might it might not be - -23 -00:14:56,370 --> 00:14:58,080 -Unknown: the it's command. Okay, yeah. - -24 -00:14:58,289 --> 00:15:22,500 -Wes Bos: And you just got a huge list. have anything that you can do in the entire editor like rename a file, open up a terminal, close the tag, rename a tag, etc, you get the point, right? Yeah. And that will give you both a list of everything you can do, you can filter down, it will also give you what the shortcuts are for that specific thing. So if you forget what it is the first 20 times that you do it, then you can quickly look it up via the command palette. Yeah, - -25 -00:15:22,500 --> 00:16:13,679 -Scott Tolinski: and if you're traversing fyers files, or you're trying to get to other files, my favorite things from going from file to file is typically never popping into the Explorer to look for a file, I usually just do command p to go to a file and just start start typing in the file name. Or if I'm in a file specifically, and I want to go to another file that's related, like let's say I'm in a react component, and I want to go to the React component that's being used. If you hold down the Option key, and you'll get a little underline underneath any of your variables. It's called the SCO to definition. So if you hold down the command key, hover over the React component name and select it, it's going to jump you to where it's defined in another file in that particular file. So for me, that's the fastest way to get around these files, rather than having to hunt for them in the sort of command or in the Explorer window. Anyways, - -26 -00:16:13,710 --> 00:17:10,500 -Wes Bos: that's such a good tip, I don't think most people know about that. Or if you hold on your option key, you can click through to the different files that you have. So like I would, I would encourage people, anytime that you find yourself grabbing your mouse and hunting, like doing a little mouse hunting with your, with your cursor, I'll stop, there's probably a way better way that you could possibly do this, because there are shortcuts for absolutely everything. And using your mouse probably is the last thing I do use my mouse a lot in tutorials. But that's because I want to show people where we are and give them context for the file system. But when I'm coding on my own, I never use my mouse to do that thing. I often get emails from people trying to be snarky, but like, you know, there's a shortcut for that. And I was like, I know there is I wrote an entire book on it about shortcuts. But yeah, is much faster to use the the shortcuts in the command palette and clicking through and all these little features that you might not necessarily know - -27 -00:17:10,500 --> 00:17:37,580 -Scott Tolinski: about. So do you use ever the keyboard shortcut for the going to a definition of a component, which is just the F 12 key? Oh, no, I don't I don't because when I hit F 12? Well, one I have to hold the function key with the stupid Touch Bar. But to like does a little bit expo's a thing from Mac OS, just like totally override that. So I always unfortunately, use the Command click on the thing. It's not that big of a deal. But just wondering if you use that. - -28 -00:17:37,680 --> 00:18:34,170 -Wes Bos: Yeah, there's you can definitely see some of the Microsoft Enos come through in the product when a lot of the shortcuts are F keys. Because as a Mac user, the F keys are so hard to to get to. And it's it's worth either getting some sort of utility like carabiner, or better touch tool to reclaim your F keys or remapping them. There's an amazing the utility for remapping keys nVs code is amazing. And it will tell you if you try to overwrite one and you can just hit the key code. You don't have to like in sublime, you had to just edit this huge JSON file. But the there's actual utility inside of VS code for recording new keyboard shortcuts. So again, if it's on your F keys, you're probably not going to be using it that much. So it's worth assigning a new keyboard shortcut. Maybe I should be doing that. That's not something that I've been using all that much. It's it's one of those habits that you get into Yeah, like somebody just on Twitter recommended this react snippets library, which I just like, I just it's called - -29 -00:18:34,200 --> 00:18:38,430 -Scott Tolinski: because I use one that I really enjoy. And I've been using it for a long time here. - -30 -00:18:38,489 --> 00:18:42,870 -Wes Bos: It's called es seven react Redux graph. QL. React Native snippets. - -31 -00:18:42,870 --> 00:18:43,740 -Scott Tolinski: That's one - -32 -00:18:43,770 --> 00:18:49,260 -Wes Bos: that's the one Yeah, like Why? What have I been doing with my life that I don't know about this suit? And I haven't - -33 -00:18:49,260 --> 00:18:52,770 -Scott Tolinski: been using it didn't every tutorial series I've ever done with react. You - -34 -00:18:52,770 --> 00:18:56,010 -Wes Bos: know how much I hate writing prop types. Dude, there. - -35 -00:18:56,790 --> 00:19:33,750 -Scott Tolinski: Yeah, I actually wrote my own prop type snippet, because I liked it better than this one. But okay, well, I mean, obviously, like RCC to create a react component, all that good stuff. But yeah, so Okay, so so another new hot feature. And this thing is this. I think this is a real game changer for vs. Code is the Visual Studio live share, which gives you Google Talk, like real time collaboration on your code, and even gives you like a little, I don't know what you'd call that little tag of whose little tool Yeah, who's typing and who's cursors, who, just like a Google doc type situation, Wes. He said, You recently spent some time with this. - -36 -00:19:33,900 --> 00:21:44,400 -Wes Bos: Yeah, so it was recently released out of private beta into the public, which means that it doesn't come with VS code yet. You have to install an external extension that's made by Microsoft. It's called vs. Live share. And I would imagine that it would come standard in VS code. I think it also works for just regular Visual Studio. Yeah, it looks like it, which is pretty nifty. And the way that it works is that you install this extension you sign in with either GitHub or your Microsoft account. And then you can just start going live, which means that you can you can start up a session, and then you get a link and you send that link to your friends. And then all of a sudden, anybody that has that link has the ability to view all of the files in the sidebar, there's some security things that you need to be cognizant of like, like, make sure that you're not sharing environmental variables vital. Yeah, there's somebody you can you can exclude it, there's a whole page that is just on security. And it's worth spending five minutes reading that so you make sure that you're not doing anything silly. By default, the terminal is not shared, which is good. So somebody can't RMR your entire hard drive. Yeah. But if you trust that person, obviously, you can allow them to you can share your terminal and allow them to just to view or to have it. And it's really, really cool. Like, I think this is exactly what we've been waiting for. Because pair programming, and maybe we should explain that that's what this is for. If you want to pair programming with someone, or you both are editing the same code at the same time, you need something to do with that. And previously, most people have just been using vim, and I believe something called t mux. Yeah, or T mux will allow you to share a terminal session with multiple people. And like that requires you to know vim, right, and like some a lot of people know vim, but a lot of people don't know vim, and a lot of people are comfortable in their own editor. So by sharing this, and it's kind of cool, because you can just open up a separate VS code window and and share it with yourself if you're lonely and have no friends to code with. Yeah, and it's, it's great, you can see exactly where everyone's cursor is, you can see what people are selecting. I don't believe there's voice. But I would imagine that Microsoft would integrate this with Skype at some point, although Skype is a bit of a dumpster fire lately. So - -37 -00:21:44,400 --> 00:22:49,620 -Scott Tolinski: maybe Yeah, right? I would imagine that, like they're just relying on you to use some other tool for that. But I mean, a lot of times people are doing like pair programming, one monitor one keyboard, and just like passing the keyboard or talking and stuff like that. And so I guess this would be a really great way to just be able to put pull your monitors next to each other and sit next to someone and code to I mean, if you're in an office office environment, it would be pretty sweet to be able to work on the same document to different computers, and be able to actually see that happening all in real time. I would, I don't know, I think back to times that we were collaborating on certain projects, and certain various gigs of mine. And like how amazing it would have been to have some like this way, you can both be editing the same files and same codebase and stuff like that. And actually seeing it rather than making small change here get pushed small change Git pull, you know, like, yeah, actual legitimate real time collaboration stuff is just super, super exciting to me. And I wish this existed when I worked at an agency with multiple people on a code base. - -38 -00:22:49,650 --> 00:23:32,010 -Wes Bos: Yeah, apparently, you can also share servers as well, which is means that you could you could run it on someone's computer. And this is exactly what I need. Because so often I have like a question on like something about graph qL or Apollo, and I'll jump on a quick like zoom or hangout or something with with a developer and what has to happen is if they actually want to get in into the code, and I can't just share my screen, I have to get them. And then I have to tell them to NPM, install the back end and the front end. And that's just another 10 1520 minutes, hopefully, if they can get it running locally. And this will just speed that all up because they can actually edit the code directly on my machine and run the server directly on my machine, but still have full access to to it. - -39 -00:23:32,070 --> 00:24:16,890 -Scott Tolinski: Yeah, I just love this, this kind of stuff. Again, this all goes back to the one thing that we talked about with VS code being just relentless in their updates, I would I would describe it as relentless because there is new updates and new stuff to this thing coming all the time. So even though it came out last year, it was my favorite text editor. It's not like they've just sat back where, you know, remember, I mean, Sublime Text is great. But remember, there was a huge period of time in Sublime Text three, where it didn't see a single update. And so this is certainly not that case. There are updates to this thing all the time, and they extremely useful updates. Another thing that's extremely useful that we should take time to talk about is Log Rocket, which is going to allow you to stop guessing why bugs happen? - -40 -00:24:16,980 --> 00:26:40,410 -Wes Bos: Yes. So Log Rocket was a sponsor a couple a couple months ago, and they've since come back for more because apparently you folks loved it. And I think this is a really cool tool. So when you have a website and you're you're running code on a website, there's a couple things that you need to be wary of. And I think the biggest one is that sometimes there are errors that happen on your website, and you need to know about them from your customers. And luckily sometimes for me when I have errors on my own website, luckily, my website services actual developers, and I get very helpful emails from people being like, hey, Wes, this isn't working. Here's why it wasn't working. That doesn't happen in the real world. What happens is that someone visits your website, something is broken. And your sales suffer, maybe someone emails you with a vague, your site is broken. And there's not a whole lot of information in there. So what Log Rocket does is it will sort of help you get through that in doing three major things. And the first one is exception tracking. So this is when an error happens either on the server or the client side, you're going to get information about that error that happened, and it's going to send it back and put it in the database for them. And that's helpful, because it'll tell you how many people are having this error, what browser it's actually happening on when it's happening. And you can usually by looking at that data, see, okay, this error is specifically happening on one generation old iPads. And here's the actual error that's happening, you can figure out what's happening. But if that's not enough information, they also do session replay. So if you want to watch a video, so what Log Rocket does, they told me this they, they instrument the DOM to record HTML, CSS on the page recreating pixel perfect video. So what they do is pretty much track what the user is doing on the website, what buttons are clicking where their mouse is all that information? And then if you ever need to see, okay, how did a user actually end up getting this error? What did they do to to reproduce it, they're going to give you information. And then the third thing that they do is application performance monitoring. So they will watch your application for things like asset download failures, x HR latency, so if your fetch requests are taking a whole lot of time. So it's kind of cool that this tool does a whole bunch of stuff, all in one. And I definitely recommend that you check it out. Yeah, - -41 -00:26:40,410 --> 00:27:05,280 -Scott Tolinski: I love how it integrates with a lot of stuff too. Like it integrates with, like anything you could possibly want in this, this this workspace like century and robar, and New Relic and Trello, and JIRA, and GitHub, and integrates with everything. So it's pretty sweet. And they have a lot of big hitters for their client base, like Carfax and NBC and Reddit. So a lot of big names using this tool, they clearly like what it's doing for them. - -42 -00:27:05,460 --> 00:27:17,220 -Wes Bos: Awesome. So you want to check out Log rocket.com for slash syntax, and that's gonna get you started for free. Check it out. And thanks so much to Log Rocket for sponsoring the podcast. - -43 -00:27:17,250 --> 00:28:43,170 -Scott Tolinski: Thank you. Okay, so we talked a little about some hot new features. And over the course of that, we talked about some tips here and there. Let's talk a little bit about some extensions. Because since we recorded last, there have been a lot of new extensions, both themes and useful tools inside of VS code. And so I guess maybe we want to just go through some of either our new favorite extensions, or maybe ones that we've been touched on before, and if we're still using them, but one of my new favorite extensions that's come out fairly recently that I get maybe more comments about than anything else in my videos is the it's called a bracket pair colorizer. And what it does is it colors, the bracket pairs, so you can quickly at a glance, see what your pairs are, because obviously when you hover over a bracket, it's going to or when you click in the bracket space or your cursor is over the bracket space, it's going to show you the of the closing or the paired bracket for that, but be able to just look at your code at a glance and see Alright, the blue lines up with the blue the yellow lines up with the yellow, the pink lines up with the pink. And the this thing is easily one of my my favorite extensions, not only that, but it also colors the what you call that the line that the vertical line for the tab spacing Oh, the indentation indentation line. So it also colors, the indentation line the exact same color so you can quickly see the entire scope that your bracket or your parenthese is covering. I love this one. Yeah, - -44 -00:28:43,350 --> 00:29:10,380 -Wes Bos: I need to check this out. Because I just installed a What was it? It's called rainbow brackets. But I just disabled it and tried this one. And I think I like the colors that this one has better. And I'm not sure if I like the indentation coloring yet or not. Sometimes what happens is that will ask for suggestions on Twitter for these extensions. And then I'll use them for a couple of weeks and then I'll make my final decision. So this is going on my own for the next couple months. Yeah, - -45 -00:29:10,440 --> 00:29:21,060 -Scott Tolinski: I like it and I've been using this one for I don't know maybe five months now and it's it's one that I haven't I haven't considered turning off. It's just been a plus for me so far. Wow. - -46 -00:29:21,090 --> 00:29:55,230 -Wes Bos: Pretty nifty. Can I wonder if I can color the because with my theme, the indentation colors don't look all that great? Or if I can tell it look like they fit right in with mine. That's pretty cool. What are some other ones here auto rename tag is one that I've been using, like I think I recommended on the last one. And what this does is if you have an opening HTML tag and you rename that tag, it will close the course or rename the corresponding closing tag. I use this all the time especially in react when you have to rename a component. You just have to rename the opening one and not worry about the closing one. - -47 -00:29:55,259 --> 00:31:03,510 -Scott Tolinski: Yeah, I don't know how I live without this one. Definitely makes my life easier on a day to day basis. At least save some time. Another one I've been using lately This is a more recent install for me is called better comments. Now a better comments is basically inside of your comment, you have different keywords, that's going to highlight your comment with a different color. So if you have a comment, and then you have the word to do colon and all caps, it's going to give that a color. Likewise, if you have a comment and you have an exclamation point, it'll give it a red color. If you have a question mark, it'll give it a blue color. If you have an apt puram or an ad, whatever the parameters, it's going to color it a certain way. So this thing is pretty sweet. You can totally customize the colors that works with like every language that exists. And I have been loving this especially for to do comments or alerts or, or things like warnings. Like if I want to leave myself a warning while I'm in some sort of development or refactor branch or something like that. And I want to make sure I know to come back to a line I use this and it instantly gives you that like visual, looking at your code of Hey, hey, hey, you look at this. So love this one. - -48 -00:31:03,600 --> 00:32:16,650 -Wes Bos: That's sweet. I've got I just installed these. That's why I like doing these shows. Because sometimes you get so complacent, like I said earlier, I didn't know about this react snippet library, you just think like, Oh, that's fine. I'm pretty happy with my setup. But as soon as you get a whole bunch of new plugins, a becomes really fun. Again, I've got a couple here. And they have to do with testing. So we did a show on testing a couple of months ago, a couple weeks ago. And some of the plugins that I use are first I use the jest, the jest test runner. And what it does is it will first it'll run all of your tests inside of VS code. So you don't have to actually run a separate extension in the in the terminal. And then it will also put little icons beside each of your test definitions to show you whether it has not run, whether it's passing or whether it's failing. And if it's failing, it will, it'll show you a little pop up or you can click through to see what the actual problem is. So I thought that was pretty nifty. I still do run some of my tests in the in the terminal because I'm not totally sold on it just yet. But I just installed that and when I was writing my testings in the terminal, I found that Oh, that's kind of nice that I can can see if they're running or not right from right from VS code. - -49 -00:32:16,680 --> 00:32:23,520 -Scott Tolinski: I use a different one for the same exact thing. It's called called jest. It's by Orta. Oh, Arthur, and - -50 -00:32:23,520 --> 00:32:24,450 -Wes Bos: I use that - -51 -00:32:24,480 --> 00:32:27,630 -Scott Tolinski: Yeah. Oh, cuz there is just runner as well. - -52 -00:32:27,719 --> 00:32:32,700 -Wes Bos: Oh, no, no, this one's just called jest. Okay, by it's got you 250,000 downloads. Yeah, - -53 -00:32:32,700 --> 00:32:51,600 -Scott Tolinski: this one because again, when it fails, it actually leaves a look a little comment next to the test to showing you in line without having to without having to reach for like a tooltip or something like that. So I do like this one quite a bit. I also probably even though I have this installed, I almost always run my tests in my terminal as well. Oh, yeah. - -54 -00:32:51,630 --> 00:33:51,900 -Wes Bos: Yeah, it's a It could also be just like a secondary thing that shows you what your tests are doing when you're when you have them open. But you can also run them in the terminal as well. Yeah, nice glance, something else that I use on the same idea of testing is one called snapshot tools. And this one doesn't have a whole lot of downloads, 10,000 downloads, I think more people should see it where if you are writing any sort of jest snapshot, which is let me explain it real quick, a snapshot will like you could take like some HTML, or you could take a react component and snapshot it and it will convert that HTML. And then if your snapshot ever changes, meaning like, Oh, you used to have the word West is cool. And now that was changed to Wesley is cool, then it will tell you Oh, your snapshot, your snapshot test is failing, because something about your UI has changed. So what this will do is it will allow you to update your snapshots directly from VS code, but it will also allow you to hover over top and click through to see your snapshots. So I thought that one was pretty handy when I was doing snapshot testing. - -55 -00:33:51,930 --> 00:34:04,290 -Scott Tolinski: Yeah, I don't use this, you know what I don't I don't actually do very much snapshot testing, as we talked about in the snips, or in the testing show. There's something I probably want to do more this tool looks pretty cool. I'm gonna install it and give it a run anyways, it looks pretty sweet. - -56 -00:34:04,350 --> 00:34:40,460 -Wes Bos: Yeah, I've been finding since the even since the testing show, I've written all the tests for my upcoming react course. And and what I find I'm doing is not snapshotting the entire component, because sometimes that's a little much, especially when you have a bunch of a bunch of other components inside of it that may have objects like mutation and query components. But I have been finding that like, Oh, this little header that has an h1 and like a subset text, I'll just snapshot that little header Yeah, and and make sure that that little piece of the component doesn't change. And you can have three or four of those snapshots in a single test to make sure that everything is looking good. - -57 -00:34:40,560 --> 00:36:09,920 -Scott Tolinski: Nice. Cool. Another one that I really like I use this all the time for if you've already written code and you need to modify it in some sort of way I use a specifically for adding try catch around things is called j s refactor by Chris steed as 180,000 downloads. This one's really great because basically you can make a selection of Have your code. And then you can either right click and see what kind of refactoring you want. Or you can make a selection of your code, I believe the extension is Command Shift, and then for various ones, so it's a command shift j, there'll be an additional extent, there'll be an addition key command, you need to actually wrap your code. But if you do Command Shift j, these Command Shift j, I'm going to check the actual extension for this. But it allows you to do things like select a bunch of code, do the keyboard shortcut, and then have that actually wrap that code in a try catch, it can do really interesting things I can make it can extract a method extract a variable, it can inline a variable can rename variables, it can convert arrow functions to will convert convert functions to arrow functions, it can convert to template literals. It does a whole lot of stuff, all based around refactoring your code. And again, I use this primarily for wrapping my stuff in a try catch or using making something async or whatever, but it saves me a ton of time. There's There's nothing worse than having to go try, catch, copy, paste, move these lines down, whatever. So yeah, I find this saves me a lot of time. - -58 -00:36:09,980 --> 00:36:55,670 -Wes Bos: Cool. You have any other extensions. Oh, you've got a couple here import costs. Yeah, that's one someone asked me about all I'll talk about that one. Real quick import costs whenever you have an import or acquire statement in a module it will tell you how big that module actually is. So if you accidentally import something that is massive like I've previously in a tutorial once I imported this thing that was meant for server side and it was like made my bundle like two Meg's so it'll tell you how big it is. I had to turn it off though, because my lacks last workshop I did. I had a couple people type 400 k BG zipped beside the code that I told them to write and I was like, Oh, no, no, no, no, this extension that I have, but they actually just like copied it down verbatim of what they saw. So I had to be careful with that. Yeah, - -59 -00:36:55,670 --> 00:37:49,130 -Scott Tolinski: that's wild. That's funny. Lastly, we have polar code, which Yeah, questions about this one a lot. But if you see some like fancy photos of code on Twitter or Instagram or something like that, chances are it's either I believe there's like an app that does this what is it called carbon there's I forget what the app name is because I've always used polar code. So polar code allows you to in your editor to basically select some lines of code then you tell it to make it into an image and then it makes it into a really pretty image using your current syntax theme and everything that that becomes nice and shareable you could share that anywhere and it's easy to read nice you can modify all the font sizes and anything that you have going on in your actual code will show up in this little image that you can then put on the social medias or your blog - -60 -00:37:49,650 --> 00:38:26,960 -Wes Bos: I've been been loving this just because it makes my my I've been doing code screenshots forever and this makes my my code screenshots just look so nice. One thing I wish that it would do and I think this might be coming as it has this like default gray background by the way in there Oh yeah. And I would love to take I have this like beautiful picture of wheat that I use for my background and everything we and I would love to bring my wheat photo in automatically put that into the background and then also maybe like watermark it and in the bottom right hand corner without Wes Bos drilling because I get people stealing my my tips every now and then so I guess if they're gonna steal the probably just cut it off. - -61 -00:38:28,110 --> 00:38:30,360 -Scott Tolinski: Yeah, you cannot people stealing your tips, man. - -62 -00:38:30,540 --> 00:38:35,520 -Wes Bos: Yeah, well, I don't care. I kind of care but it's probably not worth it at the end of the day. Yeah, - -63 -00:38:35,550 --> 00:38:36,120 -Unknown: for sure. - -64 -00:38:36,120 --> 00:38:39,440 -Wes Bos: You got any other extensions as you move on to some tips? - -65 -00:38:39,750 --> 00:38:42,000 -Scott Tolinski: I guess the themes? Maybe Lastly, - -66 -00:38:42,060 --> 00:38:48,690 -Wes Bos: yeah, any? What theme Are you using right now and there's a couple of new themes that have hit the block that are are the new hotness, yeah, - -67 -00:38:48,690 --> 00:39:38,040 -Scott Tolinski: so right now I'm using the my own theme level up official because I like these colors. I chose my brand colors because I like them. So level up official if you like the level of colors, which is a lot of background, it's a dark theme. It's it's really dark purple for the background, and then a lot of teal and red and greens. It's a for me I really like I really like this theme I built it to to fit my tastes so ever since then I've been just really really enjoying it and haven't really found the need to balance it kind of gives again my videos its own like personal look because they are my brand colors and stuff like that. So I've been liking the level up official theme and I have been continuing to work on a little bit improve it here and there. Make it a little bit better, but definitely my favorite theme right now. - -68 -00:39:38,130 --> 00:41:52,170 -Wes Bos: It's pretty sweet. Sarah dresner just came out with a new theme called Night Owl. And it's it's right down my alley. Apparently she used my theme as a starter but it looks nothing like my theme anymore, but it's right down my alley where it's got this kind of like bluish purplish background. So it's not like a dark dark theme but it's also not a light theme. It's kind of nice nice in between and it looks really good. It's got a Hun download 22,000 downloads and like probably about a week ago she released it. Whereas like my theme has been out for like 10 years and I have like 70,000 downloads. Yeah, I definitely hit hit a the right spot. Apparently it's super accessible as well in terms of colorblindness, some nice contrast, I've also heard from a lot of people who have difficulty seeing that they really like my cobalt to theme because it has a very high contrast, and it's very easy to see. Nice. So check that out as well. It's called Night Owl. Let's talk about just some some tips like these are just things that you should know how to do in VS code. I've got a little list here, maybe Scott has a couple as well. But these are just things that I see people not doing when I am doing a workshop in person. And then I'm like oh, are people ask me about them all the time when they see me just casually doing something in, in a tutorial that's not specifically about how to use your editor. And probably the the biggest bang for your buck that you're going to get in terms of being fast at coding is learning how to jump and select by letter, word, line and wrapped lines. So and what I mean by that is when you have your cursor and you're trying to move around your document really quickly, you should almost like spend like 10 minutes just like having a bit of cardio where you learn to jump to the top of the file, jump to the bottom of the file, select the entire file, if you have your cursor in front of a line of code, you should be able to hold down I think it's your option key in here, hit your arrow keys and jump word by word instead of just like leaning on your arrow key and waiting for it to get to the end of the line. Same thing goes with if you want to select four words, you shouldn't reach for your mouse and select those four words you should get to where you want to start, hold on your Option Shift key and then just use your arrows to select everything that you want. - -69 -00:41:52,190 --> 00:42:28,050 -Scott Tolinski: Yeah, and and, and along the same lines of that bang for the buck, one of the ones I use the most is to move a line, if you hold down the Option key and hit up or down on your errors, you're going to move that line up or down. And again, if you hold option and shift and hit up or down, it's going to duplicate that line and move it up or down. So if you are I mean, if you're rearranging lines, or you need to move a line, I use this all the time, or this Option Shift one to duplicate and stuff like that. And I think that's one of the ones that when I in my tutorials I get the most comments out of people never seen before even though it's a it's definitely superduper useful to use all the time. - -70 -00:42:28,130 --> 00:42:41,210 -Wes Bos: Yeah, line bubbling as what I like to refer that to and I don't think Yeah, and it's so good. If you're trying to cut and paste, I always get really worried when you have to cut lines and then paste them somewhere when you can just bubble them up and down. - -71 -00:42:41,280 --> 00:42:42,230 -Scott Tolinski: Yeah, I use that - -72 -00:42:42,270 --> 00:44:05,040 -Wes Bos: my next tips I just got to write here. And they're just operating. They're not have nothing to do with VS code. But I see it all the time. Where if you have two windows of the same application. So if you have two VS code windows open, I see people drag their one window out of the way and then click to their new one. And then when they want to go to the old window, they drag their other one out of the way and drag the new one in. And it drives me bonkers seeing people do that. So you should know that just like you can command tab and switch between applications, you can command bactec and switch between windows of the same application. And if you're a Windows user, I'm sure this exists, I just don't know what it is. But command backtick, what that will do is it will cycle through all of the windows of it. So if you have three versions of three windows of Chrome open command backtick will cycle through them all you should never be using your mouse to drag and drop windows around this is it's not actual sheets of paper. You can just automatically surface them it's magic. And then the other one I have along with that is go into your keyboard settings of OSX and change your key repeat to as fast as it goes in and change your delay until repeat to a short as it goes. And that will just make your your editor fly. When you hold down the arrow key it will go as fast as possible, rather than you having to sit there and wait for it to slowly move over. What's funny, this - -73 -00:44:05,040 --> 00:44:49,440 -Scott Tolinski: one got me in trouble with my clicker for my presentations. I turned my key things all the way up. I had gotten this new clicker, and I plugged it in for the first time and I click and it advanced by like three or four slides. And I was just what the heck, I just bought this thing. It's so good. Like, what and and so I after much after much troubleshooting and like really being annoyed at the clicker I found out that day was that and so I just had to temporarily bump it down, which was super annoying for like, the couple of days that I was actually coding while I was about to get my Oh yeah. And then I had to bump it back up afterwards because I'm so used to being able to utilize that. That the holding rapidfire key thing - -74 -00:44:49,740 --> 00:44:57,300 -Wes Bos: that's interesting. I never thought about that. That's that's gonna happen to somebody else six months from now and they're gonna be like, thank you, Scott. That was what it was. Yeah, - -75 -00:44:57,300 --> 00:45:09,360 -Scott Tolinski: I know. That was That was a tough one to troubleshoot. I have no idea how I figured that out. I was thinking it was, it was a problem with the clicker was a problem with the presentation software. I was not imagining it was like key press thing. - -76 -00:45:09,480 --> 00:45:11,850 -Wes Bos: Interesting. Do you have any other tips? Yeah, I - -77 -00:45:11,850 --> 00:46:40,170 -Scott Tolinski: think a lot of my tips were covered earlier here. Let me see. So I guess one of my my tips is to use the Git features. Now, there are a lot of extensions that will really help with this as well. But like Git History, being one of those extensions, that allows you to see the entire, like, the history of all your branches and your files, and you can select a commit and see which files were modified. But that and the default get sort of view this file compared to its last committed version. It's the I don't know what the shortcut is, but the icons in the top right, it has a file with a magnifying glass. And if you select that, and your file has been modified, since the last commit, it will show you what the previous version of that file look like, I use this all the time in case something went wrong, while I'm coding and I want to just go back to where I was, or see what the heck, why did I make this change? And with this change, or how did this change affect my overall code. So I use these get features a lot. Another one is by default in the bottom left. Again, I should probably know the keyboard is central for this. I'm using my mouse to do this, but it shows what branch you're on. If you click on that branch, it's going to show you all of your different branches. And then you can just select your branch to get to, to check out a new branch or even create a new branch. I use this more often than the actual command line. I use Git like command line for everything committing and adding and all that stuff. And but for changing branches, for some reason, I really like the actual interface. do see your branches in here. - -78 -00:46:40,200 --> 00:46:58,980 -Wes Bos: Yeah, it's it's slowly turning me from a like a command line Git purist into someone who likes a little bit of gooey because I never had a good app that would do show me diffs. And allow me to move around. And I know there's hundreds of different good apps out there. I've tried a lot of them. But this is definitely hitting that sweet spot for me. I'm pretty happy about it. - -79 -00:46:59,010 --> 00:47:16,500 -Scott Tolinski: Yeah. Especially when you have branches that their names aren't like I have some occasionally some branches, where it's like a version name or something like that, like trying to remember the actual branch if it's not like a feature branch name or something like that. And make sure you don't have any spelling mistakes when, when changing over to a new branch or something. I just found it to be nice and easy. - -80 -00:47:16,530 --> 00:48:21,600 -Wes Bos: Yeah, I actually have another one that has I just little tip I learned about this morning. So I always gripe about the spellcheck in vs. Code. Yeah. And that's because it's not native, meaning that it's not normal spell check that you use for the rest of your OS. It's it's built into, it's just an extension that you have to add. And for some reason, like when you click on this word that spelled wrong, little light bulb that shows you the things, it's always in random spots. For me, it's never right beside the word. I don't know why it's moving around. But I learned that you can just hit command period. And it's control period if you're on Windows, and that will open up what's called code actions. And this is just part of VS code. And if you have like, let's, for example, if you have an es lint error that's fixable, I have them automatically trigger on safe, but you could also hit command period, and that will open up code actions. But one of the code actions you can do here is to open up the possible misspellings or the possible correct spellings, or add that word to the dictionary. And that's amazing because it's this for my entire life, this - -81 -00:48:22,050 --> 00:48:29,100 -Scott Tolinski: extension and into the code. The code actions is VS code specific, which spell checker are using along with it. - -82 -00:48:29,100 --> 00:48:37,230 -Wes Bos: I'm the one is called code spell checker. It's got 1 million downloads. It's the one I think that everybody uses. Yeah, there's a few of them. There's - -83 -00:48:37,230 --> 00:48:41,520 -Scott Tolinski: a spell checker code spell checker. Okay, cool. - -84 -00:48:41,580 --> 00:49:09,300 -Wes Bos: Yeah. And so if you hit command space, it will show you the things but what I love about this is for my entire life, I've been trying to find a way to access spelling mistakes via the keyboard. Yeah, and there, there is no way to do this in OSX, you always have to reach for your mouse if you have a spelling mistake, and it sucks. However, with this extension, which I used to hate, I now love it because you can now access your spelling mistakes via the keyboard and not have to reach for the mouse. - -85 -00:49:09,330 --> 00:50:08,880 -Scott Tolinski: Yeah, that's great. I'm gonna be using this immediately. I made a lot of spelling mistakes. It's actually kind of hilarious. I don't know if you've ever heard of this. But when I was growing up, I was put into an experimental curriculum called the creative spelling. And I don't know if this was a Michigan specific thing. If you have taken creative spelling, let me know. But creative. Creative spelling has nearly ruined spelling for my entire life. It basically was like, how do you think you should spell this? And then that's just sort of how they taught spelling. And because of that, I cannot spell no way thing correctly. I'm just so bad at it. My wife. She's like learning about creative spelling curriculum and how it was like a total failure. Obviously a total failure. But that is my history of spelling. And one of the reasons why I'm just so bad at Because I was just not taught it correctly in school, it's almost like a huge joke now that I had to take creative spelling not not like actual spelling like a normal child. - -86 -00:50:09,000 --> 00:51:39,450 -Wes Bos: Oh man, I'm not the greatest speller. But my problem is that I don't take the time to, to give it a quick glance over before I push something live. And that drives some people nuts that I sometimes have a little spelling mistake on it. And I kind of want to leave it in now, just because it frustrates some people so much that I there's sometimes a little spelling mistake in it. What other tips, I got a couple more here, and we're almost running out of time. Yeah, renames symbol and change all occurrences is something I use a lot. If you have like a function name or variable name in your project, and you want to rename that, first, if you're using TypeScript, this is something that just comes with TypeScript is awesome. But you can also use it and just regular JavaScript or CSS or things like that. And like a symbol is something like a variable or a function or a CSS selector. So you can just like right click and use the what is it called, I always just use the keyboard shortcut. That's why it's called. It's called rename, rename symbol names, rename symbol. And that will rename it throughout your entire project. Or then you can also use change all occurrences that will change it in the current folder. And this is way better than using Command D as many times as you find the thing or place or to find and replace, because those things will do partial matches sometimes, and you could accidentally replace something that you didn't mean to replace and this will actually find a proper symbol in your project and do their place on it. Seriously, this - -87 -00:51:39,450 --> 00:52:06,120 -Scott Tolinski: this one why sigh I forget man who originally somebody originally tweeted this out, I'm gonna feel really bad for forgiving of the first time I saw this on Twitter as a hot tip. But the moment that I saw this, it was like, Wow, that's so nice. That's so nice. They mean vs. No, it wasn't you. VS code or like ID users are gonna be rolling their eyes really hard at that one. Because Yeah, that seems like a feature. That's right to make fun of for that kind of thing. - -88 -00:52:06,210 --> 00:52:19,440 -Wes Bos: Yeah, I've I have a theory that VS code and TypeScript and graph qL are just like these little gateway drugs, trying to get us portal web developers on proper type programming and IDs. Yeah, - -89 -00:52:19,470 --> 00:52:22,710 -Scott Tolinski: well, VS code is free. And web is not free. So - -90 -00:52:22,740 --> 00:52:45,210 -Wes Bos: they're there. Take that, yeah. Wow. Any other tips that you have here, there's just so much I just, I tweeted out earlier today, like, send us your favorite tips and tweets, and it's just a treasure trove of little nuggets that people have. Because every everyone's got, like two or three little things that that not everyone else knows. And just I just love reading through the comments and finding new things. Um, another tip, I - -91 -00:52:45,210 --> 00:53:04,650 -Scott Tolinski: should have put this in, like, I've had a lot of my tips here end up that could have been falling onto the extensions. But I use a actually is this and maybe I'm not using an extension for this, you'll have to tell me if you have this functionality. If you do get your command palette, and then do a sore two lines if you type s or T sort. - -92 -00:53:04,770 --> 00:53:06,600 -Wes Bos: Yeah, that's that's a default. Okay. - -93 -00:53:07,560 --> 00:53:50,610 -Scott Tolinski: An extension, but VS code, I guess this is a hot tip rather than an extension tip. But this allows you to sort your lines by ascending or descending. And I use this all the time, especially with, like my imports to be alphabetical sometimes. Or if you have, for instance, I'm merging all of my graph qL schemas like that to be alphabetical. Or if I have a list or something like that, or an object that like to be those in a specific order, I can, I can highlight those lines do Command Shift p sort lines by ascending and then it's going to short them, sort them alphabetically by their, their object property name or something like that. But either way, if you like your stuff to be in a specific order, rather than sort of willy nilly, this is going to absolutely help with that. - -94 -00:53:50,790 --> 00:54:24,060 -Wes Bos: I use that one in sublime all the time. And the two that I'm missing is unique lines. And I don't think that VS code has it. Maybe it does. Let me just double check this No, there I don't think there is a unique lines. And I also don't think that there is a title case you can uppercase and lowercase all of your selection. But there is no title case, which I used a lot in sublime where if you're trying to take a list of components and and capitalize all of them, because their classes or something like that, then it's helpful. So there's probably extension out there, I just have to spend 10 minutes looking nice. - -95 -00:54:24,180 --> 00:54:28,110 -Scott Tolinski: Yeah, I would like that, I would like that very much. And - -96 -00:54:28,350 --> 00:55:01,500 -Wes Bos: also one other thing I don't have and maybe somebody can send me an extension that does this is a select two quotes. I have one that will will toggle quotes, you can toggle between single, double and backticks. But if you're inside of a string and you want to expand your selection to a string, I currently don't have a way to do that. And I would love to get that back in my workflow. But each one of those things means like, like let's say you have like a string. Yeah, and your cursors inside the string and you want to select everything inside of the string, not including the quotes Huh, how would you do that? you - -97 -00:55:01,500 --> 00:55:02,820 -Scott Tolinski: double click it What? - -98 -00:55:02,820 --> 00:55:09,600 -Wes Bos: Unless there's no like, you have like a Hello, my name is Wes in quotes and you want to select the words. Hello, my name is - -99 -00:55:09,630 --> 00:55:10,890 -Unknown: Wes. And this was - -100 -00:55:10,950 --> 00:55:12,300 -Wes Bos: Yeah. Hold on. - -101 -00:55:12,300 --> 00:55:16,110 -Scott Tolinski: I don't know how to do it with the keyboard extension. But if you double click it with the mouse - -102 -00:55:16,200 --> 00:55:20,820 -Wes Bos: it double click what with the mouse word? No, but what if you have many words Hello my name is was I - -103 -00:55:20,820 --> 00:55:22,560 -Unknown: was loved all any words? - -104 -00:55:22,620 --> 00:56:07,200 -Wes Bos: Yeah, this selection expand selection. So here we go, we're learning live here. It's command, shift space, Command Shift, Holy smokes, I learned something. All right. So if you're inside of a string, and you want to select everything inside of that string, hit Command Shift space. And if you hit that, again, it will expand the selection one bigger to the quotes hit that again, it'll expand it one bigger to the parentheses around it, hit it again, it'll it'll just keep going one level wider per for from whatever defines it is a something that stops it Command Shift space is not doing anything for me. Now, maybe, maybe that's my sublime. Go to selection, expand selection. - -105 -00:56:07,230 --> 00:56:25,380 -Scott Tolinski: Okay, I'll have to check this out in the selection. Are you in a C key bindings that need to go to key bindings ba okay. Learn in live learning? Yeah. keyboard shortcuts, selection. Expand selection, where you at? expand the line selection? - -106 -00:56:25,440 --> 00:56:27,120 -Wes Bos: Yeah, that's the one I think so it - -107 -00:56:27,120 --> 00:56:45,690 -Scott Tolinski: looks like mine is command and then whatever that like, you know, that like vertical character that's just straight up and down. Pipe pipe? Yes. Pipe? No, no, I never called that pipe. That makes a lot of sense. Yeah. Although it doesn't work out though. Yeah, I might have to check this out. Because it doesn't seem to work for me. Hmm. - -108 -00:56:45,720 --> 00:57:04,140 -Wes Bos: But that that's one I used all the time in sublime. And I never figured out maybe I have an extension for that, because I remember griping about it a while ago. And there's sometimes you have problems that are just not a problem enough to figure out a fix. So you just live your life with this little annoyance until you die. Yeah, you know those things? - -109 -00:57:04,140 --> 00:57:09,030 -Scott Tolinski: Yeah, you just I don't want to think about this right now. So I'm just gonna think about it later. And then you never think about it later. - -110 -00:57:11,250 --> 00:57:16,050 -Wes Bos: Exactly. Cool. So I think that's that's all the tips. I have anything else that you want to let's talk - -111 -00:57:16,050 --> 00:57:58,770 -Scott Tolinski: about maybe a couple things really quickly, before we go that we'd like to see improving and VS code? Yeah, I got this in the last episode. I'm going to gripe about it. Again. This is the region folding. Last time I said I would like region folding because there's no region folding in VS code. And sure enough, Charlie, after that episode aired region coding, it came to VS code. And shortly after that, it just totally stopped working entirely for me, i and j. s code and react code. I am not able to get a region coding folding to work flat out. I don't know what's going on. I'm in the insiders build. I didn't change it in the defaults. I have not been able to get it to work since that initial install. And that bugs me I wish it was easy. I wish it was way easier than it is - -112 -00:57:58,800 --> 00:59:23,610 -Wes Bos: to have the gripes that I had last time. We're first you couldn't style a lot of the stuff outside of the editor. And now that has totally changed. You can you can have workspace specific settings. Oh, yeah. Which means that like, first of all, if you have a theme, and you don't like something about it, which I get emails every day people like I like this. But can we have an option for x, y, and z, every single thing in your theme can be overwritten, which is amazing. So if you don't like a specific color, or you don't like the metallics or you don't like anything, you can you can overwrite those yourself and change it. But you can also color the top bar to be a different color. And I'm going to do this in my my upcoming advanced react course where we have a back end and a front end. So I'm coloring them different colors. And this is coming to Windows within a couple weeks as well. So Windows users don't Don't worry. That's dope. Yeah, you'd be able to do so that was a gripe I had. And now you can you can do it all one thing I would like to see is the the sidebar, the indentation isn't very sometimes I get mixed up or sometimes I create a file in the wrong folder because the indentation in the sidebar isn't great. And I think that's something I can control with my theme. I just haven't put the time into to building that yet. I would like to see like lines or something like that, like a tree structure. So you could see exactly what folder these files are in. Oh, yeah, yeah. No, she made and I think that was my my two grapes. Yeah, the workspace specific settings are super nice to be able to have specific settings for specific projects. - -113 -00:59:23,640 --> 01:00:17,100 -Scott Tolinski: Yeah, I've one little gripe is that sometimes when there's I mean, there are ways to figure this out. Don't get me wrong. But when sometimes when there's an extension that is causing your CPU to balloon, there's not great way to just be like, hey, which extension, is it? Because if you look at obviously your Activity Monitor just shows it as a generic code process there. Like it would be really nice. You know, in Chrome, there's the extension or is it what is the performance manager something in Chrome or basically shows you each individual extension and how much RAM and CPU it's taking up? I would love to have something like that for this because As there are occasionally extensions that are just making your CPU go nuts, and it's not VS code itself, but to hunt down which extension of that is the processes, either CPU profiling or like turning off all your extensions and turning them back on one by one. And it's just not so great. - -114 -01:00:17,130 --> 01:00:52,320 -Wes Bos: Yeah, that this is something that I always feel bad for both people who work on Chrome and people that work on VS code, because people always snarky tweets, Activity Monitor being like vs codes taking 5,000% of my money out of my bank account. And it's almost always some rogue extension that is going awry, and being able to figure out what is causing that I thankfully, I have never had perf issues with VS code. And I have a ton of extensions installed by hostpapa. A very expensive computer. So that might have something to do with it as well. - -115 -01:00:52,350 --> 01:00:58,860 -Scott Tolinski: I've purchased us only because I'm running the insiders build and it's not exactly like a final build, you know, - -116 -01:00:58,980 --> 01:01:33,270 -Wes Bos: oh, yeah. But the VS code has like they've got their thumb on performance, and they really don't want. I think they've done a lot to make sure that it's hard for extension authors to do bad things. But it still is like I accidentally shipped my theme with a bunch of developer dependencies as regular dependencies. And somebody said that that was causing the the theme to slow down, or the VS code to slow down and they switched them to dev dependencies, which means that it doesn't make it into the the final bundle. And that speeded it up quite a bit. So it's helpful to have people knowing that stuff is I had no idea. Hmm, cool. All right. Well, this - -117 -01:01:33,270 --> 01:01:43,260 -Scott Tolinski: is a this has been a super it has been informative for me. I learned some stuff. So if I learned some stuff while we were doing this, and I had notes prepared for it, I hope you all learn some stuff. - -118 -01:01:44,700 --> 01:02:01,050 -Wes Bos: Yes, what you should do after this is take your favorite tip either from the episode today, or just a tip that we didn't talk about and tweet it at syntax FM and tweet it out yourself. And we will retweet those because I know there's a lot of little nuggets that people have and the more we can share it the better. Yeah, - -119 -01:02:01,050 --> 01:02:09,300 -Scott Tolinski: absolutely. That's how that's how we all figure stuff out. So absolutely. Do you have any sick pics today? - -120 -01:02:09,450 --> 01:02:20,940 -Wes Bos: Sick pics. I Oh, I do have a sick pic. And again, my sick pics have been on tech related in the last little bit just because I have I only have so much tech we - -121 -01:02:21,720 --> 01:02:46,860 -Scott Tolinski: had 47 sick pics so far. And for those of you who don't know a sick pick in this show, if this is your first first episode of syntax is where we talk about the stuff that we like we just basically pick something and it can be really anything we've done like fitness equipment, we've done yard work equipment, we've done all sorts of a code stuff and books that we like so the sick pics are really just stuff that Wes and I are liking right now. Yeah, so - -122 -01:02:46,860 --> 01:03:50,550 -Wes Bos: this one is I've been working on my yard we talked about automating watering and stuff. So over the last couple weeks I have installed drip irrigation system to all of the plants in our backyard because I hate watering plants and we always forget about it and then all of our plants die then I also had my dad install a in ground sprinkler just one because our yard is tiny. So we just installed one and then I bought this like timer on Amazon and it's great because a lot of timers are just like manual where they click click click click click click and then when they hit a certain tab, they turn the water on and they hit another tab they turn the water off but I bought this like hose timer you put it on your your hose bib and it gives you four spouts and you can use this to like basically set up cron jobs for your different ones. So I have one of them going to all my plants and another one going to my sprinkler and you can set up how often it waters how much water is for how long it waters and then you can also just switch the knob to it so it's called the Mel nor digital Aqua timer and it's been working out really well to me. I'm a big fan of it. - -123 -01:03:50,550 --> 01:03:52,110 -Scott Tolinski: Nice Aqua timer. - -124 -01:03:52,169 --> 01:03:52,920 -Wes Bos: Aqua timer. Yeah, - -125 -01:03:53,190 --> 01:05:21,230 -Scott Tolinski: it's pretty sweet name micic pick is going to be very odd. This is I don't know there's there's sort of this whole world of face soaps and stuff like that, right? I'm gonna be talking about a face soap, which I really like, which is kind of hilarious sick pic here, but it's this Korean face soap. It's called. I'm going to butcher the pronunciation of this company. It's t o s o w o n g I'm not even gonna try. I'm sorry. I don't have any Korean training so long. So so long. Yeah, I don't know. I took Japanese for a couple of years. So for me, it's like I don't have no know what this is. But it's it's called the enzyme cleaner. And it's a powder wash. It's really unusual. It's like these little tiny pellets. And this thing lasts forever, which is one of the reasons why I like it so much. So as opposed to like a liquid soap or like any other kind of like face soap. It's this like little tiny it's like powder, right? And so you just dump a little bit of the powder on your hand. You get your hand wet and then you rub it together get superduper sudsy and this stuff is so good for like 11 bucks, these little tubs Diesel tubes last me for ever. So this is an odd tick pick, I think but like I use this every day, and I like it. Yeah. So I hope you if you're needing a new sort of facewash, check out this enzyme cleaner, we'll have a link to it in the course descriptions again, this is it's sort of hilarious. But uh, it's definitely something I really, really makes my life better. I think I - -126 -01:05:21,230 --> 01:05:42,750 -Wes Bos: always find that funny that like, sometimes people ask me, like, should I have a separate Twitter account for stuff that's not code related? And I would say like, no, like, developers have other interests other than coding, and like, I'm willing to bet most of our audience has a face, you know, so really, maybe most of us would have a face. Yeah. So there you go. Yeah. Sick back sick pick. - -127 -01:05:42,750 --> 01:05:45,630 -Scott Tolinski: Yeah, get some face up some enzyme face cleaning. - -128 -01:05:45,750 --> 01:05:47,820 -Wes Bos: Okay, and what about a shameless plug? - -129 -01:05:48,030 --> 01:07:13,260 -Scott Tolinski: Shameless plug, I have released a new series, level up tutorials.com forward slash Tour, which is my intermediate react series. And this is going to be covering all sorts of intermediate react topics, stuff that wasn't covered in my react 16 for everyone course. But in this series, we do a lot of practical interface stuff. But I also teach you all of the hot new skills that you hear all about things like the new context API, we talk a lot about creating portals, we create what we don't just create, but we really, really dive into understanding render props, you've probably been seeing render props a lot in new plugins or other people in react, talking about using render props, and maybe about why you want to use this. So this, we dive into creating a sort of component that uses render props, and exactly why it's a better system than what we could be doing without them. So it really really hammers home the the sort of core ideas behind a lot of that stuff. And we get into building some extremely performant animation stuff. So we build like the Tinder interface where you're dragging a card left and right and animates, it's really super smooth, you can do things with those actions. And we build an animated modal component, all sorts of stuff using this library called react spring, which allows for extremely customizable performance animations, it's gonna stuffs gonna blow your mind. So head on over to level up tutorials.com forward slash store and check out level two react - -130 -01:07:13,350 --> 01:08:13,470 -Wes Bos: wicked, I'm going to plug all of my courses, I just put them on a bit of a secret sale. It's not secret anymore. I didn't send a big email, or anything like that. But I I put them up for sale, I actually put them up just for a couple days yesterday, and they started selling really well. So I'm putting them out for another week, because I like selling stuff. And so you if you want to learn react, go to react for beginners, calm, if you want to learn iOS six, get up to speed. So especially if you are like sort of like anticipating my advanced react course that's coming out in hopefully a couple weeks. And you want to be prepared for it. definitely make sure you've done react for beginners, and you're super comfortable with ESX as well as the sink await and all of the new stuff that's come to to JavaScript. So esx.io and if you want to brush up on your node, so we are we are going to be using Express for the server side portion of my advanced react course. So if you're want to brush up on your Express skills, go to learn node.com and all of those are on a little bit of a discount right now. Grab one or all three. Enjoy. Nice, - -131 -01:08:13,500 --> 01:08:22,890 -Scott Tolinski: Cool, well that that should be it. Yeah, again, tweet at us your hot VS code tips. We want all that stuff. We're going to retweet you, and we're going to share the love on Twitter. - -132 -01:08:22,970 --> 01:08:25,409 -Wes Bos: Cool. We'll see you next week. Peace Peace. - -133 -01:08:27,329 --> 01:08:37,100 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax49.srt b/transcripts/Syntax49.srt deleted file mode 100644 index 4b7c13ac7..000000000 --- a/transcripts/Syntax49.srt +++ /dev/null @@ -1,204 +0,0 @@ -1 -00:00:01,319 --> 00:01:40,320 -Unknown: You're listening to syntax the podcast with a tastiest web development treats out there. strap yourself in and get ready. Here is Scott Lansky and West boss. Hello everybody and welcome to another episode of syntax with me as always as Scotland ski Hayden today, Scott. Hey, I'm doing super good. We just had a ton of fan we had both sets of in laws. My parents Courtney's parents are both staying at the house and we do not have the accommodation to support that many people. So it was a tight quarters, but it was just a lot of fun to have everyone in town. Got to see a bunch of family. And yeah, it's just it was just really nice. Really nice to have everyone out here. How about you? How are you doing? Doing good. It's super nice out here is weird. Like in April, we had like a weird freak snowstorm. And then in May we've had like temps that are like, like it was 35 here the other day, let me convert that to American. That'd be cold. Cold here. Cold there was 35 is 95 Fahrenheit. So it's not cold. It's very hot. It's been like smokin hot last couple days. And I've been loving it. We're going up to a friend's cottage this weekend. And I can't wait. That's awesome. Yeah, yeah. So today we are talking all about what are we talking about today, we have a potluck going down today. So we try to do these potlucks once a month, where we take your questions, and we just talk about smaller things. Because a lot of times we want to talk about stuff that doesn't fit into a huge show. And we often get a lot of questions from you. So hopefully, we can rattle through all six or seven different questions and touch upon a whole bunch of different topics. - -2 -00:01:40,440 --> 00:02:13,710 -Scott Tolinski: This episode is sponsored by fresh books, which is excellent cloud accounting software and coffee cup software, which has made an amazing CSS Grid tool. So for anyone working with CSS Grid, which should be many of you by now, because it's so excellent. You're going to be totally blown away by this awesome tool software that they've put together. So we'll talk about more about these sponsors later on in the episode. So let's get into it. What is the first item in the potluck today, Wes? Alright, this - -3 -00:02:13,710 --> 00:03:17,460 -Unknown: one is from Andy boy, the kid. The question was, what is the best resource for staying up to date with browser related JavaScript? Ie any new or changing Dom API's? I like this question. Because often what happens when these browser API's are sort of in the proposal stage, I don't really care about them all that much. But once they hit the browser, either in stable or they are in sort of a proposed state, what I'll do is when a new version of Chrome comes out, or Firefox does a fantastic job at this, whenever they release a major version, what they do is they detail all of the things that are new in the browser. And some of that stuff is user interface. But they do often have a section on JavaScript, and that will detail these are the new browser API's that are available to the general public. And these are the new browser API's that are available under a flag, you might need to go in and turn those on. And at that point, it's like, oh, never heard about that. Never heard about that, then I can go in and do a little bit of exploratory and then if it's something that is useful, or something that will be useful in the coming years, I'll usually turn that into a hot tip on Twitter. - -4 -00:03:17,639 --> 00:03:46,590 -Wes Bos: Nice. Yeah, I think it's a great, great tip. I mean, because that that information is made available, you just got to go looking forward to it be nice if there was like a, I don't know, maybe there's something like this exists, if you know of this, like tweeted out of this, like a blog that just would just only release those JavaScript part release notes or something like that, like, just so you could have that all in one central place, anytime anything comes out. I'm not sure that I would get interested in that if it exists. Yeah. Next. So let's go have another question here. - -5 -00:03:46,590 --> 00:03:54,120 -Unknown: Let's grab one, let's say how do you stay motivated if you don't like your current project? And this is from Michael Hoffman? - -6 -00:03:54,630 --> 00:07:05,730 -Scott Tolinski: The answer to a good question. It's a good question. And it's one that we've answered in kind of different ways before on the podcast when we're talking about something, maybe other things, but maybe not directly. So how do you stay motivated if you don't like your current project, and I have a lot of experience with this. Because when I was working for the University of Michigan, we were getting a lot of projects that it was essentially an internal agency. So internal companies, or internal sections of the the university would have to bid for projects. No, unlike a normal agency, where the companies that are bidding for these projects are all somewhat exciting companies. This was all just a department in the University of Michigan. So I had a ton of projects that I just did not have a great time doing because they were just so boring, right? Although the contents boring, the layouts, boring, everything's boring about it, there's not too much you can do about it because that's what the the client wants, and that's what the website supposed to be. So for me, I was always taking an opportunity to make it more fun for myself. For instance, you know, take a break Project and learn something like a sass or stylus with it right? Because the end result of the project does not matter what you know, as long as the thing works in the amounts, the specifications, nobody should be getting in your way to say that, hey, you can't try this, or you can't try that as long as it doesn't affect the outcome of the project or take up too much of your time. But I would work on things like maybe developing a new design system for myself, or new tools for myself to make the whole project faster. But either way, I would take it and try to build in ways to either make it more of a learning experience for me it technically, like if creatively the project wasn't exciting, and maybe make it a more technical challenge, right? Have you always been using jQuery or a built in JavaScript slideshow, hey, try building your own for this project. You know, you could take someone else's source and use it as a roadmap. But either way fine, little things about the project that you can now work on to make it more challenging for yourself and in turn more challenging will make it more fun. I think that's, that's really good advice. And I think, also, if you are maybe thinking about this in not in terms of like a work project, but in terms of a personal project, I think that there's a lot to be said for just doubling down and actually finishing stuff. So if you have a personal project, and like I often look look out and I see people who are like putting out like incredible amounts of content and you go like, how is it that you are releasing so much stuff, and I've talked about this before, but it's it's because those people are actually finishing the stuff that they work on in the last 10% of the project is always such a, it's so hard to finish projects like that, it's always so tough to get through that last 10%. And by the time you get there, you're just about ready to be done with it. But I say like, that's probably a really good skill to have as a web developer is being able to push through that last 10% that's really, really hard, just become a little bit more mentally tough, and be able to finish things because that's gonna make you a forex developer, or I don't know what sort of ex developer you can become, but definitely worth it. - -7 -00:07:05,880 --> 00:08:28,350 -Unknown: Yeah, absolutely. This one's from Ron croute. Off Nami. Now, if I actually pronounced your name correctly, the question was, what is your favorite music to work to? And I can tell you, it's definitely not Drake. That's surprising considering where you're located. I thought I thought he was like the national, the National artists. That's Nickelback, but it's just something about Drake that it just cannot stand it. I listen to all kinds of music. And I would encourage you to follow me on Spotify, if you're interested in it. But I would say most of the music that I listen to is what I what is called hardcore metal core. I've got a playlist on Spotify called retired scenester. Metal core, because I know that I think about 80% of web developers are just retired band members or or roadies or something like that. So I listened to that a lot. I've been really into Dino Nyah, Houston is Yeah, yeah. This the audience who doesn't know he? He is like, a prodigy skateboarder at this point. No, he's like, what he's got to be in his like mid 20s or something. But he came up in skateboarding when he was like, a little tiny kid with dreadlocks. And his story is actually really fascinating. There's a documentary on Netflix called navigation about him. But yeah, he is amazing. He is maybe the most incredible skateboarder. - -8 -00:08:28,560 --> 00:10:39,299 -Scott Tolinski: Yeah, he's unreal. And he came out with a new video he's on he skates for Nike. And he came up with a new video called till death. And it's gnarly as hell. And the music that he skates to is awesome. It's like kind of like it's rap. Which I don't listen to a whole bunch of rap but there's a playlist of all the music from his skate video called not Houston till death, and it is got some bumping tunes on there. bumping tunes. Yeah, what about you? I listen to it's all over the board for me. I listen to a ton of rap music, hilariously enough, one of my favorite things to listen to is the three six mafia while I'm programming. I really like the new Janell Monet album. I my favorite sort of like punk punk is this Jeff rosenstock I love pretty much love anything that Jeff Rosen stocks putting out my music tastes are sort of all over the board. I like good, good stuff. I also really like listening to music and like sort of dance on my desk too. So like zap and Roger where he got a little bit of talkbox and sort of like 1970s funk music that I'd be breaking to. I don't know, my rap music tastes are sort of all over the board too, because I like some modern stuff like Kendrick and like a Young Thug. And like, I don't know, I like a lot of random stuff. But I also like some really random rap music like this guy. A patchy Who is the flavor unit, which was a queen Latif his group? He's sort of a periphery member of this like soul. Yeah. And I could listen to the Apache released one album, and I could listen to that album over and over and over. You might, those of you who might know him might know him from his hit track. gangsta bitch that came out in the 90s. So, yeah, pretty much anything Golden Age, rap music, modern rap music. I don't know, as long as it's good, whatever. I also actually good. I have a level up tuts rap playlist on Spotify, too. So if you google level of tons of rap music, or something, I believe it's there. Oh, man, I - -9 -00:10:39,299 --> 00:11:05,070 -Unknown: need to check that out. Actually, there's a couple more here that I've just been like, I have a bunch of music that I listen to over and over when I'm coding just because it helps me get into that flow state. And Levi, the poet who is it's kind of interesting. It's it's kind of some of his stuff sounds like rap. Some of this stuff sounds like, like foci. And are it's all over the place. But and it's all spoken word, but some really good music a big fan of that lately. - -10 -00:11:05,159 --> 00:16:02,010 -Scott Tolinski: Nice. Check it out. All right, what's the next question for us? Next question. All right. So this is a this is a more technical one, in what order? Should developers learn tools and libraries related to graph qL? So in my mind, I guess this question, you know, you could think this is by I'm sorry, this is by Mark volkman. So, in my mind, the first step for graph qL anything is to just play around with graphical for those of you don't know, graphical is this really nice interface for playing around with an API, you should be able to find the graphical interfaces on any sort of graph, qL API, sort of websites, or documentations. And it's an interface that allows you to build the queries and see the results and basically hit real time modify them, one of the cool things about this tool is it gets you hyped for graph qL, you can see just how easy it is to build these queries. And why this thing is so cool with this system. So in my mind, you'd want to just test out graphical first. Next, you want to understand the core concepts of how graph qL itself is just sort of a specification, right? Not a technology or a library, whatever. And then you have your different libraries. So then you understand, hey, okay, now we have these different libraries. So at that point, you'd want to pick one, whether it's relay or Apollo, I think Apollo is easier for beginners, I think Apollo is a little bit easier overall, anyways, so I would pick Apollo, and then just try just Apollo client. There's a lot of API's out there, that are open to play around with. So you can play around with one of these API's that already exists with Apollo client. And then from there, you can go on to writing your own Apollo server and stuff like that. And then you can get into some a lot more of the additional libraries around Apollo or graph QL. Overall, I think one other thing I'd add, like, I totally agree with all that, and one other thing I would add is just go to graph ql.org. And click on there learn, almost always, I don't recommend going to the the spec website for a language just because it's almost always over people's heads. But graph ql.org has an awesome introduction to what graph qL is specifically because there's going to be a whole bunch of new concepts that you're going to need to learn with graph qL, you have queries and mutations and fragments and fields and directives and variables and all of these like new things that you need to learn about before you can actually use it. And I found that if you spend 1020 minutes reading through the documentation on the Learn section of graph ql.org, it's going to really help you kind of talk the talk. Yeah, absolutely. This one is from Ishaan Mathur. I think I got that one. Maybe I am comfortable with j. s, and brackets node on the server. Is it a good idea to learn other languages like PHP or Python? So I often get this email, or Twitter dm or Instagram dm, all the time where people tell me their life story. And then they say, should I learn X, Y, or Z? And at the end of the day, I'll tell you like, first, it depends. Meaning that it depends on what you want to work on it, what different types of projects that you work on, if you get a job that is in PHP, then obviously, yes, you're going to need to learn PHP. Or if you if you want to find yourself, you find in your area, a lot of the job postings are in Python, or maybe you work in a specific industry, or that's like the language. So really, it depends. And I also think there's a lot that you can learn by learning different languages and building stuff in different languages, because some of the best stuff that we have in JavaScript is only brought over to JavaScript because people have written in other languages and have come back and be like, okay, but why don't we have this? This is really easy in these other languages but I can't bring it over. That said if you are looking to just double down on Language, often what I hear from people is that I'm super overwhelmed with what I should do next. Should I spend more time on JavaScript? Or should I spend another spend some more time on PHP, Python, and I think like right now, in the last couple years, JavaScript has been exploding, there'll be some really good articles coming out, where I think the title of the article was, what if JavaScript is the standard language being like, it's probably worth your money tested right now, double down on going all in on JavaScript. Because you're we're starting to see if you want to write a serverless function, you have to write it likely in JavaScript. If you want to build a interactive front end for a WordPress blog, you have to build that in JavaScript, if you want to build some sort of really nice streaming service, you likely will probably build that in JavaScript. And I know that's not what a lot of people want to hear. But it's starting to seem that if you want to be very valuable in the next couple of years, I would just forget about other languages, and just double down on all all in JavaScript. Yeah, I - -11 -00:16:02,010 --> 00:16:56,490 -agree. And in fact, I don't think you're going to regret doing that. And if it is me, like, okay, so the only reason I would pick up something like PHP, or Python, for me at this point is, is if there's some inherent reason, like there's a specific job that I want that uses it right, then I would really need to get you know, those skills up for a job that I'm applying for. But right now I can do everything that I need to do in JavaScript. So taking the time to improve my JavaScript skills are only going to benefit me more in the long run. If I were to learn something else, an additional language, right, I would pick something that is like a surrounding language to the JavaScript ecosystem. Like I would learn something like reason, which is, for those of you don't know, it's like an Oh, camel. Is it Oh, camel, it compiles to JavaScript. It's, it is it is reason based on Oh, camel or is reason? Oh, camel. That's a good question. That's - -12 -00:16:56,490 --> 00:17:05,160 -Unknown: a good question. I, I haven't really looked into that at all. But it's one of those things I keep hearing about. And that's probably one of those things I'm going to need to check out pretty soon. - -13 -00:17:05,279 --> 00:19:47,460 -Scott Tolinski: Reason lets you write simple, fast quality typesafe code while leveraging both JavaScript and oh, camel. Yeah, I know, you can have JavaScript in reason. But either way, I would learn something like a periphery to JavaScript, something that is going to be in the same community, this same world. That way, again, you're just always increasing that that same sort of nucleus of skill set. So speaking of things that we want to double down on, I think CSS Grid is one of those tools. And one of those skills that the more and more you emphasize and put it into your workflow, the more and more you're going to get out of it. And one way that you can get more and more out of CSS Grid is with coffee cup software's CSS Grid prototyping software. Yeah. So coffeecup software is their company that makes a lot of this kind of like a GUI in order to build websites. And they contacted me a couple of months ago and said, Hey, we're actually releasing a CSS Grid tool, which will allow you to build CSS Grid layouts in this kind of visual editor and then be able to, to use the visual editor to add columns, add rows, and mess with anything that CSS Grid does. And I said, Okay, well, I know a little bit about CSS Grid, I did an entire course on it. And I find it hard to believe that you can make a really nice visual tool, but I'm going to check it out. Because one thing that I've learned is that CSS Grid is very hard to look at just CSS. And so to visualize it, that's why I like to use the Firefox grid visualizer when I use CSS Grid, because you need to be able to see exactly what is going on, as you're authoring the stuff. So they came along, they launched the CSS Grid builder tool, and you can get it at CSS grid.cc. And I had a call with them I saw and I built a CSS grid layout. And then the the big thing came where it is, okay, let's, let's export this thing and see if it's any good. And let me tell you, the code is exactly as I would author it, I think that's called Turing complete, where when a tool outputs code that is, as an author as a regular human would write it, then it starts to look really good. So I was pretty impressed with it. It gives you a really good visual overview as to what your grid looks like you have full control over all the different pieces of the grid, how you justify how you align items, your columns, your rows, your named areas, whether they span from specific areas, and not so I check it out at CSS grid.cc. They also have a little CSS Grid guide on there that will help you get up and running with how CSS Grid works. So check it out at CSS grid.cc. Thanks so much to coffee cup software for sponsoring sick, - -14 -00:19:47,520 --> 00:23:11,070 -sick, sick. All right, next question. What do you got for me? Next question. All right. Next question is as a computer science undergraduate at a university, what can I do in terms of programming that could benefit me greatly after graduation. This is from Mike, I like this question a lot. Because we often don't necessarily hear this sort of, it's sort of the the classic like I'm in school, and what can I do to improve my job chances after unlike the historic advice would be go get a free internship somewhere or whatever and, and work your butt off at a job and make those contacts and connections. But the web development industry is a little bit different in that regard, I mean, you can go and get an internship. And if you have the opportunity, definitely getting your hands dirty. And some real world code in some real project stuff is going to help. But if you if that's not an option, I think there's plenty of things in this sort of modern era that allow you to make the same sort of progress. For one, I mean, you could contribute to open source software, if you come out of college and you're looking for a job and your name is on the list. And you've you've contributed to all these different projects. And it's just going to show that you have the initiative to work on this sort of stuff. And you know that you are the type of person who can work without somebody telling you to do this or that. I also think there's a lot of room for making connections within the industry of maybe reaching out to companies or places that you might want to work. You know, I was always very inspired by certain companies and I would follow their stuff, and I would follow them on Twitter. And I would share their work. And I would talk about their work and stuff like that. I think making these connections and reaching out to people like that is a good idea. You can write blog posts, again, blog posts are a great way to boost up your resume, especially, I mean, it doesn't matter if anybody reads them. But writing a blog post is going to get you thinking differently, it's going to again, show that you have some initiative, and again, you're gonna want to make stuff mean, make a lot of code thrown in your GitHub, it doesn't have to be perfect. Just Just make stuff and show that you like working in code. And I think all of those things are gonna look really good when you're at a your first interview, and another candidate has just graduated and didn't do any of this stuff in here, you've, you know, contributed to open source and you've shown initiative like that. So I think those are all great things that you can do to, you know, increase your stock coming out of school. And that's exactly what I did is I didn't necessarily contribute to open source when I was in school, just because my skills were simply just not there yet. I was just way below where I could be. But I did spend time blogging about what I had learned. I did post up lots of examples. I hung out in chat rooms, and I helped people a lot. It's funny actually just hired someone to help me work on some of my course platform stuff. And the reason why I hired him is because he was helping me. I had some questions. And every time I had a question in the chat room, he will come up and help me and I was like, Damn, this guy's good. Like, he really knows this stuff, right? And like it just by putting yourself out there, whether that's blog posts, whether that's going to conferences and meeting people, whether that's joining in on the conversation on Twitter, contributing to open source, putting yourself out there and showing that you actually are excited about this industry and are actually putting in work. It's going to go a long way in terms of both increasing your skills as well as making yourself attractive to employers. - -15 -00:23:11,130 --> 00:23:12,240 -Unknown: Yeah, love it. - -16 -00:23:12,330 --> 00:28:04,260 -Scott Tolinski: Next question we have here is from Yannick is Hi, Guys, do you want to talk a bit about SEO? I understand react is not a good choice for when SEO matters, what would be a good JS framework to build a website for a local business. So there's a lot here, let's start to unpack this. SEO search engine optimization means that when you will search for something specific, you will find the website and traditionally react in all JavaScript frameworks are not a good idea for SEO because it's not server rendered. Meaning that if Google crawls your website in the past, and it's still kind of up in the air, whether or not it works now, Google would not actually run the JavaScript on your page, it would just it would just take the CSS and the HTML does on the page, render at that page really quickly and read all of the words that are on it. And then anything that gets rendered after the fact in JavaScript is kind of invisible to to Google bots. Now there is a whole lot of evidence that Google does does run JavaScript. Now there's a lot of people who have showed examples of running a react to just client side and it still renders out that said, what I bet my business on it No way, I don't think it's nearly as stable as having a server rendered HTML application. But that says, you can now easily render your react application. somebody the other day, asked me, hey, Wes, in which episode did you talk about X, Y, or Z. And all I had to do is just google syntax and the topic that they talked about. And the whole syntax website is built in react. It's all built in JavaScript, but it's server rendered, meaning that it gets rendered on the server, it spits out HTML so that when Google crawls it, it doesn't actually have to run any JavaScript to access So all of the show notes and everything that's on that page. So server rendering is not the easiest thing in the world, especially even like I use next j. s, there's a couple other frameworks for this is still not the easiest thing in the world. There's a lot of like little things that you have to talk about. I think we've done some shows in the past on this, but it's definitely worth worth doing it. So if I were building a website for a local business, I would probably go with next jass or something like a static site like Gatsby, or stick if it's just a simple example, I might just stick with a existing WordPress theme. That way, you know, WordPress has kind of tried and true for for SEO. Yeah. Any thoughts on that? Scott? Yeah. on the grounds of server side rendering, not always being easy. Yeah, I have. So like, the server side rendering for me is with Meteor and react, which isn't, isn't bad. But then you have to have graph QL. And then you have to figure out a way for graph qL is the data to come in and be server side rendered. And then you know, what I am totally hung up on code splitting, with server side rendering, using dynamic imports, my dynamic imports just don't server side render. And it's like one of those things that is just be been bashing my head against the keyboard for a couple months to try to make this happen. And I don't get anywhere with it. So I can totally understand server side rendering being difficult with these things. But again, there are services like you mentioned, like next that make it just super easy, or static site generators, like Gatsby that make it super easy. But if all of those things don't do it for you, there's also services like pre render pre render.io, that allows your your site to be fully crawled by Google as if it was just crawling static sites. But it doesn't actually require you to do anything. Pre render just sort of crawls your page as JavaScript and output the static version of it. That's just for search engines. So there are definitely other ways around this. If those things don't work for you. I like pre render, it's a pretty sweet service, they 19 billion pages. They have surfer engines cross there, there are big, big heavy hitter here. Definitely something that's really cool to use. But yeah, that's pretty much my thoughts. I don't I don't think it's too impossible to do server side rendering with JavaScript or with react. And I think it's getting any lean easier all the time. I don't I don't think there's any reason why you wouldn't pick react for SEO reasons. I just that that isn't the thing for me, I don't think, yeah, yeah, I don't, I don't think you really have to worry too much about that, given that you can put in the time. And maybe I should explain why it's such a problem. Because let's say you have a react application and like three levels deep, you have an AJAX request, how does your application know to wait for that Ajax request to fetch the data, and then to come back, and then to render to the page. And then to finally spit that out? There's this whole a synchronous nature to JavaScript, whereas a lot of server side only languages like PHP are very, they're very synchronous. They read top to bottom. So they only export the data at the end of the day. - -17 -00:28:04,590 --> 00:29:56,430 -Wes Bos: Yeah, it's it's a, it's tough stuff. All right. So I've just stood up at my standing desk. So you know, things are getting serious here. Next, the next question we have coming in is from this is from Tom, this one, I think goes it kind of nicely along with the college student one in a certain kind of way. They say, soft skills question, how can I build my network when I'm a grumpy old man, and then in parentheses, by industry standards, anyways, I totally get that, who is tired by the end of the workday and would rather go home to dinner with the spouse, then go to a meetup event? Yeah, this one, this resonates with me as someone with a one year old, because I don't, you know, want to go to meetups all the time. And I don't want to work past five o'clock anymore. And I want to just do the nine to five thing check in check out. But I also want to make excellent things constantly improve network and do all that stuff. So this answer is in two parts. One part is that you need to make that sort of maybe a priority at some time in your work day. It doesn't have to be long, you can take like, you know, 1020 minutes out of your workday and do some digital marketing and not marketing, digital networking, right, where you're connecting with other people on chat groups or something like that. I think slack groups or spectrum channels are a great way to sort of meet other developers and prove that network there is a level of tut's slack room again, or a bunch of people hang out and talk about code. So like that kind of stuff is a great way that you can, you know, improve your network by meeting other developers who are also working on the stuff without having to like take time after work or something like that. I think there's just so much networking that you can be that you can do digitally. I mean, for instance, Wes and I did not meet in person. - -18 -00:29:57,480 --> 00:30:04,650 -Unknown: We even somebody like tweeted the other day Would love to hang out with you. And Scott, I was like, that's funny, cuz I've never hung out with Scott before. - -19 -00:30:04,680 --> 00:31:33,510 -Scott Tolinski: Yeah, we I know, people are most surprised when they hear that we have never met in person. We have only hung out online or in chat rooms or slack rooms or webcams or whatever. But you can do that much networking. I mean, we've networked to the point where we have a podcast for a year, and we've worked on projects. And we've done all sorts of cool stuff, right. But like, this all just happened because of digital networking, which is something you can certainly do via Twitter, or Slack, or GitHub or anything, just build those connections. And you don't have to take your whole day, you can take 510 minutes here and there, whatever, you know, take some time out and just say, Hey, I'm actually going to connect with some people that I either, you know, admire or like minded or whatever. And that way you can continue to grow your network and just work on it. Now, again, the second part of this is, is maybe pick one meetup a month, and just go to it. Because there isn't a nice thing about being in this, this natural energy of this room where people are learning things. And they're teaching things and whatever. And I don't have time, personally to go to a meetup every week. But I can make time to pick one meetup a month, I go to the react to Denver meetup. And I love going to that particular meetup. Even though most nights I would be like, I can't do this. You know, there's too much other stuff to do. But one on one a month is not a huge commitment. I don't think and I think it's definitely that that is kind of important to get out there. Yeah, - -20 -00:31:33,510 --> 00:32:46,230 -Wes Bos: I totally agree. I, I'm a huge proponent of just working your nine to five especially like, now I've got kids, I don't really want to leave, I don't want to leave my wife with these are bratty kids that are put them to bed by herself and all that stuff. So I don't even like going to conferences all that much. And what happens every single time that I have a conference or a meet up before. I'm like, Oh, I don't want to go. And then I go and then I come back. And I'm like, Oh, that was amazing. Like, I feel like re energized. I'm all excited again. It's like going, Yeah, I'm all excited. It's true. You never want to go to the gym, then you actually go and you go into a meet some really cool people. You talk about some stuff and you learn a whole bunch of stuff, you get different people's opinions on stuff. So big fan of doing slack rooms and just kind of being online all day and kind of the watercooler conversation. But it's definitely worth once a month once every two months going out to some sort of meetup conference, and getting to know it. But I totally feel you on there. Where you I'm not as young as I used to be. I used to love to go to these things all the time, as many as I possibly could. And, and now I just rather like sit home and water my lawn and yeah, I drink a beer with my wife, you know? Yeah, - -21 -00:32:46,230 --> 00:35:20,280 -Scott Tolinski: I'm right there with ya. All right, next one. This is a question for Wes. I'm glad I picked this one because it's for me, I have taken your react course and JavaScript 30 course how do you come up with such good designs and UI? So first of all, thank you. I'm not like I if you go back and listen to like our origin stories, I think way back, let me go real quick find the episode number seven is Scott's origin story. And episode eight is my origin story. And we sort of detail like how we got to where we are. And before I are kind of as I got into coding, I was actually spending a lot of more of my time in Photoshop, and designing stuff. So I do have a bit of a design background before I got heavy into coding. But I think really where my design started to get much better is when I was working the whole PSD to WordPress scene for a long time where I would work with designers, they would give me a Photoshop file, or I guess these days, it would be a sketch file or a figma file or something like that. And then I would try to convert that pixel for pixel to HTML and CSS. And that both makes you a really good developer, because you have to learn how to do all these different things in CSS. But it also forces you to pay attention to things that you might not have necessarily realized before things like letter spacing, and things like padding, and margin and specific colors and the way that fonts work together. And all of those a lot of like these like little things and that make a design good that you can pretty much just like have a list of these are 20 things that make a good design. And if I follow all of these 20 rules, then your stuff is going to look 80% of the way there and then there's there again, there's a whole creative, creative aspect to it. I always like to take something that is like new to CSS, like clip path or a bunch of patterns or multiple background patterns, or multiple background images. I like to use all of those things because I know what's new and cutting edge and CSS but I also know what's what's good and what looks good. So, really that's that's how I got good at it. I've been doing It for, like, what, 10 years now, I do feel like my stuff has gotten a lot better. And I do feel in the last like three or four years, I've sort of hit my stride in terms of having my own style. Previously, before that it was a lot of mimicking other people's style. And now I've sort of hit my stride with my own. Yeah, - -22 -00:35:20,309 --> 00:35:43,290 -Unknown: I think at the end of the day, it all comes down to practice, I mean, the amount of time you've put into it, and you obviously you have good taste. And like you said, You're mimicking a lot of that good taste, and eventually, your taste, and your work combined to form this unique style and the actual actual skills. Definitely something I wish I put more time into, to be honest, I'm getting there. I'm getting there. But I'm not there. - -23 -00:35:43,319 --> 00:40:05,340 -Scott Tolinski: Totally. I actually have one more more thing to add to that is a lot of my design stuff is also very simple. I feel like an area where I could get much better at design is when your application gets complicated. And you need to convey information and make good user experience based on a design. That's a whole nother level of designers. It doesn't just look good, but it is a joy to use this product. And that's where a lot of these top shelf developer starts to shine where they can make something enjoyable to use because of not how it looks but but how how you interact with the product. Yeah, that's kind of my my next step. Nice. You know what, there's one aspect of design and the specifically web design, and I've always been terrible at is body copy, like not like paragraphs and paragraphs of an article. But like, Hey, I just have a single paragraph. Like I get the line letter spacing, I get the vertical rhythm aspect of it, I get the font size, I just don't make it look good for some reason. It's like, it's like a curse. But yeah, okay, so Okay, we have one more, and then we're gonna take a break for another sponsor. This is Ryan wrote. And Ryan road asks, as more web moves to secure connections with progressive web apps, dot app, etc. Where can a noob learn the basics of HTTPS SSL certificates, services, like Let's Encrypt and how to deploy a secure website. And this is going to be a good resource, I think, in general for this kind of stuff. But I would follow Troy hunt, who created the site Have I been poned. But he's very, he's very security focused. And so his twitter feed ends up becoming like a great anytime a an excellent article about anything security comes up. It's it's basically on his Twitter feed, his blog is great. He does a lot of courses for Pluralsight. So I would recommend checking out some of his courses, like introduction to browser security headers, stuff like that. So he is a really good follow in a great person to check out their courses, because as far as security goes, he's definitely up there. Yeah, I think that's, that's who I follow as well, to get a lot of the stuff, I do see a lot of the little tips on Twitter and things that will come your way. One other thing I think of in terms of this HTTPS and SSL and like, I think that it's so bizarre to me that it's so hard still to do SSL properly, I know that there's less than than crypt and it's for free. But you still have to get into your server and assign the certificates and make sure that you set up a cron job to have them renew. And you have to understand like, how if you have an nginx, server in front of it, and all that stuff, and I think that this stuff is going to not be your problem pretty soon it already is if you use Netlify sites. Now, Meteor galaxy does it for hub. Yeah, a lot of these like services where you do pay a little bit extra per month for this, they will handle all of that SSL provisioning, all that stuff for you. And then you can also just use a CloudFlare, where if you, you use CloudFlare as a DNS provider. And what that means is that, like, let's say you buy a domain name@hover.com, usually what happens is that you go to hover and you point your name servers to your hosting company. And what you do instead is that you put your name servers to CloudFlare. And then CloudFlare, will appoint what's called a records towards your hosting company. And then CloudFlare will sort of sit in between your server and and your visitors and it will sort of proxy the traffic and there's a whole bunch of stuff that they do. They do DDoS mitigation, and they allow you to block certain countries, and they like to cache a bunch of files, and there's tons of stuff that they do and but probably the reason a lot of people use them is because they provide free HTTPS certificates. So if you can just turn this on, and that will will put an HTTPS certificate on yours. The only thing that is a gotcha I do use CloudFlare on all mine. But if you ever have to temporarily turn off CloudFlare it's called gray clouding it, then your HTTPS will break because if you turn it off, there's no certificate right? So I still do put a Let's Encrypt on all of my sites. And then I also use CloudFlare as a secondary level of security, and I use it for a couple other reasons. - -24 -00:40:05,400 --> 00:40:11,900 -Unknown: Yeah. I don't know, though the SSL stuff like he said, it's still not as not as much fun as it should be. But it's getting there. - -25 -00:40:12,090 --> 00:41:07,290 -Scott Tolinski: Yeah, I think like, pretty soon what's going to happen is that and this is already happening with things like caddy server, where your server will do will handle that for you, rather than you have to worry about like SSL certificates and signing them and provisioning them and all that you just do something useful. And like a caddy server, where it caddy is like a replacement for Apache or nginx. And it handles it for you. And I believe a future version of nginx will also do this, where it will just provision the certificate and handle it all for you. Because I just don't understand, like, why do we have to do this as developers? Like, shouldn't it just be? Yeah, handled? automatically? Yeah. Because like, also, like stuff is going to rot. Like if you leave a website for three years and don't touch it, like used to be able to go back to old websites, and you could view them from 15 years ago. And now if you leave a website for a year and you forget to renew the certificate, the thing is busted. - -26 -00:41:07,320 --> 00:41:24,270 -Unknown: Yeah, yeah. I'm excited for that day where it's turnkey, super easy. 24. Seven. Okay, so think of other things that are turnkey, easy, 24. Seven, I think of fresh books, which is amazing cloud accounting software that Wes and I both use for our personal and business accounting. Let me just open up Yeah, - -27 -00:41:24,270 --> 00:41:26,960 -I got one. - -28 -00:41:29,190 --> 00:43:00,690 -Scott Tolinski: Beautiful segue, we actually got a little note from one of our sponsors that they really like how we just just put this punters in and segway the men and, and kind of talk through it rather than have a formal pre recorded thing. But so Freshbooks is going to allow you to track your hours, format, your estimates, work out your taxes, capture your expenses, Chase late payments, prepare invoices, submit proposals, all of that stuff, when you're a freelancer, that is all known as paperwork. And the good news about that is that fresh book has created a ridiculously easy cloud accounting software, for freelancers for small business owners, that will tackle all of those problems and solve all of those problems for you. So I really like fresh books I've been using, I think I've been using fresh books or something like 10 years or laying fresh books is a local company to where I live. And I have a lot of friends that work there. And I just have such a big fan of the company because if I need to send out an invoice, you need to get paid for one of the sponsorship spots on this podcast, you just jump in, you add the details to it, the new Freshbooks is even faster used to have to create a customer and then create an invoice but you can just create an invoice and create the customer at the exact same time. So I'm just so in love with Freshbooks for managing that the part of running a business that sucks I hate doing all the stuff in Freshbooks makes it super easy. So head to freshbooks.com forward slash syntax and enter syntax into the How did you hear about a section? Thanks so much to Freshbooks for sponsoring. Thank you. Alright, do you want to hit a couple more of these and then get into the sick pics are? - -29 -00:43:00,990 --> 00:43:02,010 -Unknown: Yeah, yeah. - -30 -00:43:02,010 --> 00:47:31,770 -Scott Tolinski: Okay. Yeah, one right here. Yeah. from Max, have you? Have you had experience working in big enterprises? Also ones that don't focus on tech primarily? If so, would you consider working for such companies just as fun as a smaller team, or even compared to freelancing? So I like this question. Because Scott and I, we're running our own business, we're small, we're lean, we're doing all kinds of stuff. Whereas I know a lot of you that work for this work, listen to this podcast, work for a huge companies that have thousands and thousands of employees. And there's many different departments that work on the website. And I often will hear, it must be nice that you can like be able to jump between all these technologies so quickly. Or it must be nice that you can just use SAS, like it took us three years to get less implemented. And then all sudden, it has changed. So can it be as fun? Absolutely, I think so. I think it really depends on on company culture and values in that and what I have have seen also, like, one A good example is gov.uk. So the government of all people in the UK, you would think the government is slow and stodgy and, and hard to work with. They are like one of the forerunners in creating good online experiences. And they have an amazing team that works on their websites and their design and, and all of the different properties that they have. And it seems to be like compared to I guess, working with online Canadian stuff is just a joy to use any of the UK government website. So that's, I think that's a really cool example. There's another one here in Canada, we have a really big telecom company called TELUS and they really needed to, I think maybe about four or five years ago, they needed to like revamp their entire online presence and they needed to like they need to just move really quickly outside of the the kind of the all of the stuff that a big company sort of dread Download. So they they essentially just created a another company that was inside of the company. And that allowed them to just work as quickly as they can. They had like permission from the high ups there to basically say, like, somebody told me that they have permission to tell anyone higher up to eff off, which is hilarious. That's awesome. Because like they, this is a technology company. And if you're being held back by your technology, then that's not a good, that's not a good place. And that's how big companies fail. Right? So I think it really depends on on who is in the company and company culture. And I think that's definitely something I can change. And I owe a lot of people are have a really nice team inside of a big company. And they really enjoy their their team. I mean, a lot of Mac conferences, you don't necessarily hear about them online, but they're doing really cool work internally. Yeah. Well, when I worked at I worked for a company that was at the time called team Detroit, I think it's called GTB, or something, I just changed the name, and I don't understand it. But they are Ford's main advertising agency, and they handle all of Ford's web work. So we were building prototypes for Ford. And I was a part of a team that was maybe like 40 people where we had some designers, some UX experts, some project managers of developers, and everyone is sort of working in this very like tight knit team to build these design prototypes of which Ford looked at and said, hey, these are too progressive for us. But the work was just so much fun. And the team was so energized by the work. So this was a big, big company, a big, big project. But again, like you said, the company culture and the team culture is really what made this project, not the fact that it's a big project with a lot of people on it, with the fact that we had a system for for how we did everything, we had a system for communicating and working together. And everyone was open minded and excited to be there. So because of that, it was definitely a fun project and exciting and all those good things that you don't, you don't think of when you think of this giant, monolithic company, right. So again, a company culture, how everyone is working together workflow and all that sort of stuff. It makes her breaks it because if you are sitting in a cubicle by yourself, pushing commits and not talking to anyone, and not having, like a good time, you know, that's got to be no fun on a giant old project. Right. Okay, so Oh, last one here. I thought we'd end it off with something kind of fun, something that we've talked a little bit about before. But what are programming podcasts? You guys listen to? - -31 -00:47:32,040 --> 00:47:56,670 -Unknown: Yeah. Why don't you kick off tell us other than syntax? Of course. I don't listen to any programming podcasts. Oh, there's syntax, which is why want an answer this? Yeah, I actually I do listen to syntax. I listen to every episode after it releases. But I need to I like to listen to the podcast and see how you can get better and how you've explained things. I think it helps me become better at at doing this. - -32 -00:47:56,700 --> 00:49:15,210 -Wes Bos: Yeah, I do, too. Now, I actually take that back. I I don't listen to any like, obsessively. But I do listen to what is this one right here, the graph qL radio, I listen to that there's not a ton of episodes. But graph qL radios great for just talking to people who are really using graph qL in actual production environments and how they're using it. I listened to a podcast called smashing security, which is not necessarily about technical stuff, but more or less about web security as a whole. It's not like here's how to do this or that. It's more like, here's some news that happened in sort of things surrounding privacy and web security. I also listen occasionally to a podcast called test talks. It's about testing. And I listen to that one. Whenever I feel like I'm have the energy to listen to a podcast about testing. Because, you know, some people can't even get the energy to do testing itself, let alone listen to a podcast about testing. But for the most part, yeah, no, no technical stuff. I guess Other than that, I listened to a lot of sports podcasts because it's sort of like mindless for me. I listen to a lot of hockey podcasts pretty much like any major hockey podcast that exists I'm listening to, which is hilarious, because West is the Canadian of the group. - -33 -00:49:17,400 --> 00:49:44,250 -Unknown: Yeah, and other than that, it's sort of random stuff. I listened to a podcast called last podcast on the left, which is like sort of mccobb and dark stories. These guys are, it's this podcast is not for everyone. It's sort of like true crime and definitely a little rough, rough stuff in that podcast, but uh, it's, it's, you know, it's actually really hilarious. They have some stand up comedians and stuff on there. And I don't know, let's do a lot of random stuff, but not a ton of tech podcasts. - -34 -00:49:44,730 --> 00:50:54,990 -Scott Tolinski: Yeah, me too. I think that's the reason why we started this podcast is that I didn't like a lot of the tech podcasts. I found them it kind of exhausting to listen to. I found them very dry and slow and poorly recorded. And there of course is Lots of exceptions to that. But as a big motivation for starting syntax was that there is nothing that is kind of like the water cooler. It's kind of a bit more fun. Hopefully, hopefully you find this podcast, a little bit more fun and entertaining and a little bit more applicable. And there's also a reason why we don't necessarily have interviews on this podcast as well as because I don't know sometimes you get a lot of these podcasts with interviews, and the person who are interviewing is is not totally comfortable. Within the sound quality is always terrible. They're talking from inside of a fishbowl or something like that. But that said, I do listen to a couple tech podcasts. Code pen radio is one of my favorites. And I've been listening to that one for years. And they go through it just everything behind running code pen, and they often talk about the different technical challenges behind running code pen and in different features and how it's built and how they work on teams and how they do partnerships. Big fan of that one. - -35 -00:50:55,170 --> 00:51:11,520 -Unknown: I also listened to Chris coils, other podcasts shop talk show. I really liked that one as well. I've listened to that one for years. Every now and then listen to full stack radio from Adam wathan. That one's pretty good. He's a fellow Canadian jazz party is a pretty good one as well. I - -36 -00:51:11,520 --> 00:51:46,500 -Wes Bos: don't listen to it all the time. But if I have some I haven't got a huge list. I need to do podcast bankruptcy because they're all just gonna come in late. Yeah, I just listened to more business podcasts and more interesting ones. Oh, under the radar. That's from Marco arment. He's an iOS developer, but I just find his take on programming in general and managing projects to be very refreshing. Tools Day is a really nice one. It's from Oona and Chris and they basically once a week they talk about different tools and different things related to programming. I - -37 -00:51:46,500 --> 00:52:20,010 -Unknown: find that one very refreshing. I like that one. And other than that, that's about it. What's your favorite podcasts? Oh, favorite business podcasts a couple in the indie hackers one which I've been on myself. That's from courtland. He is working for stripe now. So it actually the podcast comes from stripe. But it's he asked really good questions and not like typical there's a lot of business podcasts out there that are very fluffy and, and very and motivational. Yeah. content from some other business podcast. And they're just yeah. - -38 -00:52:20,010 --> 00:52:42,990 -Scott Tolinski: And they're all the people that are on it are just there to plug something. Whereas indie hackers is actually gets into otherwise in the house of business mixergy I haven't listened to that one. Ever since I stopped driving to Toronto, I haven't been listening to that one because it's a big podcast. But I like that one startups for the rest of us is from the founder of drip, as well as Mike, - -39 -00:52:42,990 --> 00:53:22,110 -Unknown: I think it's Mike Tabor, who runs I forget the name of the business anyways, that's a good one for both business and solving technical hurdles. I always like hearing just how these different businesses solve problems that I don't necessarily run into like database sharding, and things like that. That's not something I've ever run into. But it's nice to know what is database sharding? And, and why would you ever run into these problems? And that's it for now. I'll post a list at some point of all the podcasts I'm subscribed to. There's a couple dozen in here. Yeah, I should keep like a, like an up to date list. It'd be nice if you could sync that out of pocket casts or something just which is just a straight up list. - -40 -00:53:22,680 --> 00:55:16,200 -Wes Bos: Yeah. Oh, Jeffrey Wright way how's like a nice little podcast called the lyric cast snippet. And he's just got a really good view on life, I think. And he often will just take a specific thing like whether it's a social media addiction or mantras and programming, and he'll just like, be like, Hey, everyone calm down about this. It's not that big of a deal. And here's why. I think it nice, big fan of that one. It's it's nice and short to cool. I like I like all those, like lots of podcasts, if there are things that you really like it out there, podcasting, and we mentioned stuff that you find interesting business programming, otherwise, hit us up with what these podcasts are, especially if they're maybe not as mainstream of ones that we've probably seen and heard of 1000 times before. We'd love to hear what podcast you are listening to as well. Cool. So yeah, that is it for this potluck. Everything has been everything has been real tasty here. So I hope you enjoy dishes are done. Yeah, the dishes are done. The tablecloth has been packed up and ready to go. What kind of sick pick Do you have to take with you? At the end of dometic? Do I have a sick pick for you today? So a couple of weeks ago, a couple buddies of mine got together in the park, and they said we're gonna play spike ball. And I was like, that sounds dumb. What is that? And so what it is, it's like you get this little trampoline, like it's like a mini trampoline, and it has like a net in it and you get a ball and you have four people and one other person's on your team. So two on two, and it's kind of like volleyball where you serve the ball into the net and it bounces out and then the other team has the three hits like volleyball to hit it back into the net and back to your side. And then you have three hits that hit it back. And what you try to do is you try to like spike it so that they can't get to the ball on time or you try to hit it lightly. So it falls off and they have to die for it. And man, I - -41 -00:55:16,200 --> 00:55:37,170 -Unknown: haven't had that much fun in so long. It was it was so cool. And there's another there's a kind of an I don't know if it's a knockoff version or whatever, but I ordered it from Amazon. It's called slammer. It seems to be about 50 bucks cheaper. So I ordered that up. And I'm really excited for the summer to be playing spike ball or slam with all my friends nice. I - -42 -00:55:37,170 --> 00:56:24,420 -Wes Bos: actually so it's hilarious because I saw this, like my my parents love Shark Tank. I don't watch Shark Tank, but my parents love Shark Tank. So whenever they're in town, or we're at their house, we're watching Shark Tank, and yet, I just happened to catch the episode where this was on Shark Tank. And I remember thinking, Wow, that looks really fun. I bet people in Denver would love this thing. And it was like almost like two weeks later, I was walking in wash Park, which is one of the big parks here. And there was like three people like three separate games of this going on. I was just thinking, yep, that looks about right. You know, so it looks a lot of fun at first one you know when they say they're trying to invent a new game, you know that I think there's like a level of eye rolling that comes along with it. But it looks like a total blast, man. It looks like a lot of fun. Yeah, I - -43 -00:56:24,420 --> 00:56:37,620 -Unknown: couldn't believe how much how much fun I was. It's definitely that kind of like, like beer league kind of game where you and your buddies go play slam Oh, in the park for a couple couple hours. And then you go slam Oh, a couple beers afterwards. - -44 -00:56:38,910 --> 00:59:31,860 -Wes Bos: Slam Oh, nice. I love it. So my sick pick today is going to be a YouTube channel. And this is a channel that might be sort of odd for some people who don't know anything about dance. This is called stance stance is a YouTube channel that they publish pretty much every single major breakdancing competition, the like high high quality, high production video, and these guys started this out of nowhere, it was just like a bunch of dudes bringing their cameras to B boy battles of low, low sort of production. And I've just really grown the channel to a place where they are sort of the people to film a lot of this stuff. So this is like the record for a lot of these competitions. But some of the cool things that they really do is like the video like the very first video on their pages, monster moments at freestyle session 20th anniversary, where they put together these compilations of the craziest stuff from that competition. So even if you're not into watching a breakdancing competition, just put on one of these compilations, and proceed to have your mind blown because these people are the best in the world at what they do. So I love this channel. Anytime anything pops up. I'm watching it. And so if you're interested at all in dancer, human movement or anything like that, I check out the stance YouTube channel. I love to give some credit to these guys, because they have really put in the work on this thing. And it's awesome, wicked. Do what about shameless plugs, any shameless plugs today? Yeah, I released a an intermediate react course called level to react a couple weeks ago. And this course covers everything from render props to portals, to understanding and how to use those technologies. The context API, we do some real sweet animation in it, where we're doing the Tinder interface, dragging where you're doing with physics based animation, using a library called Rex spring, which gives you an absolute ton of configuration and ton of flexibility. So we go over how you can do things like interpolating rotation values from x dragging values, and I step it all up to make it really nice and easy. So that you can build some really fantastic, really modern interface stuff without having any prior knowledge ahead of time. So if you're interested in learning intermediate react concepts, how to level up tutorials.com forward slash store and purchase level to react or you can become a levelup pro subscriber and get access to everything on level up tutorials that can. But again, I'm going to just plug my courses in general, go to West boss comm forward slash courses if you want to learn anything about react, or ESX, or node or just get better at vanilla JavaScript. And pretty soon I'm going to have an advanced react course. And I'm going to be working on a beginner JavaScript course likely after that. I'm really excited about that. So check it out at Wes bos.com forward slash courses and learn something today. sick, - -45 -00:59:31,890 --> 00:59:32,480 -Unknown: sick, sick, sick, - -46 -00:59:32,490 --> 01:00:13,620 -Scott Tolinski: sick, sick. Alright, I think that's it. We'll see you next week. Thanks for tuning in. Yeah, and as always, check out this episode show notes for the link to the potluck question form so that you can submit your questions if you would like to hear them on the next potluck episode where we're going to be doing one of these a month. So because we get so many questions that we have to do one a month or else we're going to be totally backlogged forever. So, one a month, Pollak episodes head on over to the course notes, or the course notes, the what is the Episode Notes, show notes, show notes and get that form and let us know what kind of questions you have tech or business or soft or any of that kind of stuff. We'd love to hear him. - -47 -01:00:13,860 --> 01:00:21,180 -Unknown: Yeah, yeah, we should do another business one again. So ask us your business questions. Yeah, we'll we'll do a business episode real quick. Hashtag business. - -48 -01:00:21,270 --> 01:00:22,140 -Alright, peace, - -49 -01:00:22,170 --> 01:00:22,680 -please. - -50 -01:00:24,570 --> 01:00:25,350 -Head on over to syntax.fm - -51 -01:00:25,350 --> 01:00:34,290 -for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax5.srt b/transcripts/Syntax5.srt deleted file mode 100644 index dcd26712c..000000000 --- a/transcripts/Syntax5.srt +++ /dev/null @@ -1,476 +0,0 @@ -1 -00:00:02,700 --> 00:00:22,920 -Wes Bos: Welcome to syntax where we deliver tasty treats for web developers. This episode is sponsored by delicious brains that make us pretty sweet plugin called WP migrate DB Pro, which helps you get your WordPress installs from your local host on to your actual server or vice versa. We'll talk a little bit more about them partway through the show. - -2 -00:00:25,050 --> 00:00:53,610 -Scott Tolinski: Oh, welcome to syntax, we're gonna be talking about freelancing. Today, we're gonna be talking about all sorts of things. Basically, we're gonna be talking money, quoting, billing, just how to manage your time how to manage your contracts, consulting versus freelancing, just a whole bunch of stuff, everything you sort of, you know, you learn by experience from freelancing. So today, as always, we have West and Scott say, Hello. - -3 -00:00:53,610 --> 00:00:56,640 -Wes Bos: Hello, everybody. Hey, - -4 -00:00:56,640 --> 00:00:59,520 -Unknown: so what do you been working on less? Well, um, - -5 -00:00:59,549 --> 00:02:34,710 -Wes Bos: I'm just in between vacations right now. And while the one thing that I did do is release my latest batch of stickers, which, for those who don't know, I just love stickers. And I also love like, doing things really well. So I had researched a whole bunch into getting stickers printed overseas in China because it's way cheaper to get it done over there. And I finally found a really good supplier that does like really good quality and they pack them into these cool little bags. And it's just been a huge thing I did like a small batch a couple months ago, and then I just did a huge batch of 2000 packs 20,000 stickers. And I put them up I like modified my course platform to sell stickers which is kind of hilarious. And printed envelopes and did all this like I don't know anything about like shipping actual product, but I just thought I just like love being able to get stickers to other people. So that's been part of part of my week, part of my week is printing out the stickers and sorry, printing out all the envelopes. And then I I ended up driving down to Buffalo, New York. I live in Canada, and I'm about an hour from Buffalo, New York. And I just crossed the border. And the postage in the states is so cheap that I like save like 1800 bucks on 2000 stickers. Which is amazing. Like I was so happy with Yeah, - -6 -00:02:35,400 --> 00:02:43,410 -Scott Tolinski: I saw your your Instagram post or you're standing by the the postage with all the boxes full of stickers. All the - -7 -00:02:43,410 --> 00:02:53,130 -Wes Bos: envelopes. Yeah, it was the layer I paid my sister in law to actually do all the stuffing of the envelopes because it drives me nuts to do stuff like that. But yeah, it was you know, I - -8 -00:02:53,130 --> 00:02:56,670 -Scott Tolinski: got a pack of those stickers come into my house. Hopefully So did you. - -9 -00:02:56,670 --> 00:02:58,080 -Wes Bos: You buy a pack? - -10 -00:02:58,080 --> 00:03:00,630 -Unknown: Oh, you best believe Oh, awesome. Yeah, - -11 -00:03:00,630 --> 00:03:19,470 -Wes Bos: so it's, uh, they sold out in like, 24 hours. I couldn't believe it. I sold all 2000 packs, so and I didn't even send an email out like usually like if I wanted to, like really drive some traffic to something I would send an email out. But in this case, I just tweeted it. And like just people tell their friends the grab packs. - -12 -00:03:20,730 --> 00:03:30,210 -Scott Tolinski: Always adjust for the Seinfeld sticker alone. Oh, and that hilarious. I got one right here, though. Yeah. So to like, get my new computer to start throwing these. - -13 -00:03:30,990 --> 00:03:45,360 -Wes Bos: I'll send you a couple extra. I've got some like random loose ones here. I don't have any of the holographic ones left. So I got to figure out what to do on the next pack though, because I think I want to do some new stickers. But like, designing these things takes forever. So - -14 -00:03:45,750 --> 00:03:48,690 -Scott Tolinski: we got a we got one with the syntax logo that Yeah, the syntax - -15 -00:03:48,690 --> 00:04:12,930 -Wes Bos: logo for sure. easy one. Yeah, I want to do like a CSS one. And I've got one that's like, you know, Supreme, though. Yeah, yeah, I did one like it says JavaScript, but it looks exactly like Supreme, and people and outs for it. So that one's getting printed. For sure. So yeah, stickers. That's what I'm working on or what I'm done it now now I gotta actually do some real work. - -16 -00:04:14,190 --> 00:04:16,920 -Scott Tolinski: Developers love stickers. That's incredible. - -17 -00:04:16,920 --> 00:04:18,360 -Unknown: Yeah, I'm - -18 -00:04:18,360 --> 00:04:21,830 -Scott Tolinski: not immune to that. I love stickers. So yeah, - -19 -00:04:22,110 --> 00:04:40,680 -Wes Bos: yeah, it's it's pretty good. And then I like I sent a follow up email being like, click I like just said in the email. Now that you have stickers convert my goodwill into buying one of my courses and a bunch of people actually. So it's a it's a marketing tactic as well. I guess it works. Well. - -20 -00:04:41,160 --> 00:04:44,880 -Scott Tolinski: Yeah. Yeah. You get them hooked with the stickers. Exactly. Yeah. - -21 -00:04:45,660 --> 00:04:49,950 -Wes Bos: Cool. All right. Well, we're gonna kick things off. Oh, no. - -22 -00:04:50,070 --> 00:04:52,200 -Scott Tolinski: Wait, do we talk about uh, you know, - -23 -00:04:52,260 --> 00:04:58,740 -Wes Bos: oh, excuse me. I'm just talking about my stickers here. Go ahead, Scott. What are you working on? Uh, yeah. I - -24 -00:04:58,740 --> 00:06:48,270 -Scott Tolinski: moved my personal website, Scott tolinksi.com to a new platform because, you know, it was the week of moving things to a new platform for me. So, you know, luckily, I had I back when I wrote my site, I did it in Meteor, because I actually had some, like, believe it or not, I had some admin database stuff that I was doing, where I was like saving a bunch of my information like, you know, whatever servers I'm running or, or information that I would want to keep, maybe not throw in a Google Doc put it somewhere secure on my own service. And then I built all these tools to keep track of all my stuff and all that, and I never used it, I just thought I didn't use it. So you know, I really didn't need the database. I didn't need any of that stuff. And this platform Gatsby came out, had version one over, I think, last week or the week before, and Gatsby is basically a static site generator built in react using react Webpack, graph qL, using all of the fancy new stuff, and I thought, Hey, this is a good opportunity. My site's already in react, I will just toss it in here. So I did not a live stream on on my YouTube channel, you can go to YouTube slash user slash levelup tuts and see me converting my site into Gatsby in real time. And it's like my first time exploring Gatsby at all. Cool either way, I ended up using styled components. I rewrote all the CSS for mostly. And then the thing absolutely flies. If you go to Scott told ski calm, even though it's loading a video, the load times are unreal. It's a - -25 -00:06:48,300 --> 00:07:02,190 -Wes Bos: pretty sweet. Wow. So when I built the syntax website, a bunch of people asked me why I didn't end up using Gatsby and I had never heard of it. But I took a look at it. And it looks amazing. - -26 -00:07:02,520 --> 00:07:42,450 -Scott Tolinski: Yeah, no, I think you were We were like one week too early with Gatsby. I seriously do. Yeah, I think it came out like right after that. So or at least hit version one. The cool thing about Gatsby, we can talk about this more some other time. But you there's all these plugins, so you can use it really easily. And like a headless WordPress situation, to bring in all your WordPress queries through graph QL. You can use markdown files and make a blog statically really easily. You can use content full, there's a billion plugins for it. So it's, it's it's a pretty cool platform for a static site generation. And like I said, the thing flies, it's fast, very fast. - -27 -00:07:43,080 --> 00:08:09,360 -Wes Bos: It's pretty neat. Check that out. I think it's really cool to see that you can now build static sites in react. And there's also a framework, I forget the name of it. It's like MPM l or something like that, where you can write HTML emails in react components. So you can you can just write language, you can write like a button or a column tag, and then it will convert it to whatever the equivalent is in HTML emails, - -28 -00:08:09,510 --> 00:08:11,850 -Scott Tolinski: that sounds like something that I would vary. - -29 -00:08:11,910 --> 00:08:58,440 -Wes Bos: Alright, let's let's find the name of this, because we should, we should tell people what it is. Let's see. Yeah, email emails. Like MMJ ml ere we go, m j, m L. And they have all these things like section container image. And then like, that's, that's the whole idea behind components is that you, you took away the complexity, and if there's anything that's complex in the world, it's HTML, email, HTML email. Yeah, they just make they just make their own custom things. And it's all built in react, which is pretty cool. Obviously, it doesn't like run react in your email. I'm imagining that it. It does sort of like a server side rendering spit out HTML at the end of the day. - -30 -00:08:59,130 --> 00:09:06,360 -Scott Tolinski: And they have a cute little website here. So awesome. Work soups, cute. soups. Cute. Cute. - -31 -00:09:06,540 --> 00:09:55,260 -Wes Bos: Alright, let's talk about freelancing. So both of us are independent, independently operated. I've myself I don't want to hear about Scott in just a second. But I've was a freelancer for all of my life. I've actually never had a full time job. And I really, really enjoyed it. I learned a lot along the way. I made really, really good money when I was freelancing. Obviously now I'm doing full time working on my own courses. But at the time when I was doing, I called it consulting, because you get paid more for consulting but the end of the day, it's just freelancing. And I really, really liked it. So I freelanced bi for about 10 years. What about you, Scott? - -32 -00:09:56,100 --> 00:10:38,880 -Scott Tolinski: Yeah, so my freelancing experience has been a little bit different. I definitely freelanced full time until the past like two years but even then it's been level up tut's. Really. Yeah. So my freelance experience is more been like taking taking nights and weekends gigs here and there and maybe doing one or two at a time. The whole time. I've always had an agency job. Yeah, I worked in like several different agencies from like six people to 1500 people sized agencies like, and stuff in between. So for me, it's like nights and weekends, collect a little bit of extra cash where you can take on some small, some big, whatever kind of projects to just fill that space. That's, - -33 -00:10:38,940 --> 00:10:52,769 -Wes Bos: I think that's so cool about being a web developers that if you want to make an extra thousand bucks, 2000 bucks a month, like you totally can, as a web developer, you can squeeze it in here, there. And yeah, have a little bit of a side hustle. - -34 -00:10:53,149 --> 00:11:01,230 -Scott Tolinski: Yeah. And there's just there's a lot of work out there. There's, there's no other way to say it. There's just there's a lot of work available out there. If you can find it. - -35 -00:11:01,289 --> 00:11:33,690 -Wes Bos: Yeah, I that's like, I always tell people that because there's, there's not a lot of freelancing isn't for everybody. And when people ask me to refer them to someone who can freelance, I often have a hard time coming up with someone who will be reliable, who works at it full time, who is just going to be like, I'm willing to stick my neck out for them. So if you can become a really good Freelancer via the stuff that we're talking about today, there's just unlimited work out there. - -36 -00:11:34,289 --> 00:11:35,460 -Scott Tolinski: Yeah, absolutely. - -37 -00:11:35,789 --> 00:13:01,230 -Wes Bos: So um, I don't know, let's talk about, obviously, we're both doing web freelance, I should maybe talk a little bit more about what I did. Most of my freelancing time will serve maybe the first half of it was focused entirely on doing WordPress. So I was doing stuff for small businesses building, building out websites for them. And as I became sort of like a WordPress specialist, what started happening is that agencies would come to me, and they would either refer me what I call the chaff, which is stuff that's 10 to $15,000 jobs, that's agencies don't take on small stuff like that. Whereas that's a really good job for for individual like me. So they would do that, or they would bring me on for for specialization. And then over maybe the last five years or so I focus my efforts more on, I still do quite a bit of WordPress. But my my efforts were more focused on building JavaScript, building out JavaScript. And then I became more of a less of like, I'll build you a website guy and more of, we need to hire a Wes, because he is good at JavaScript, we need someone to help us out specifically with front end, say CSS JavaScript stuff so that we can get that all sorted out. - -38 -00:13:01,919 --> 00:13:07,740 -Scott Tolinski: Right, you're coming in and looking at looking at code and not maybe writing it from scratch. - -39 -00:13:07,769 --> 00:14:03,389 -Wes Bos: Exactly, yeah, writing it from scratch, like either setting people up, and then like peeling and saying like good luck, like I've got you there or coming in and fixing something where it had gone awry for whatever reason. And that that's sort of like the difference between like specialization and generalization. Whereas you can go the route of like, I'm a website builder, and then you you apply, you go to people, that's, there's lots of people that do that, and that you can make really good money there. And then there's also specialization where you become known for a specific skill. And you can go as my was, like, pretty broad, like JavaScript in front end. But you can go pretty deep into it, like be like the Google Maps person. And then you write, you'd be that like the $200 an hour Google Maps consultant that people bring in when they've got some serious problems, then, - -40 -00:14:03,779 --> 00:15:30,799 -Scott Tolinski: yeah, so you know, and that's in, like you said, you know, the $300 an hour $200 an hour Google Maps guy. And then that kind of is where some of the big money is, if you have this individual, you know, this expertise that not many people have, you know, I remember when we were at an agency, and we really needed someone to work in pretty high level search technologies. For instance, we had our own service for the Kresge Foundation, which is like a major foundation in the United States here. And that was one of our big clients. And they needed really, really high level search in their site. They were doing a lot of grants and stuff like that. So we bought this Google Search app search appliance. It was a literal box. That was like a Google search box. But yeah, oh, yeah. And these things are awesome. Or at least they were I don't know if there's it's still a thing. This was this was some years ago, right 2012 In 2011 ish. Yeah, and, and that was a very specific technology. And we searched high and low to find someone who was like an expert at that to wire it up to everything and, and that was that that person got paid because they, they were like the person to do this and not many people knew about this search appliance or knew the ins and outs. And and that's a very good route if you can get it. And it's a something that has demand, right? - -41 -00:15:30,899 --> 00:17:35,010 -Wes Bos: Yeah, yeah, exactly. Um, and one other thing I should say, while we're talking about this is I've talked to quite a bit of people who want to go freelance because of the flexibility that it provides you in terms of working from home working your own hours, and then you hear from a lot of people six months in, and they're like, I hate it. I hate my clients. I I'm always working. And it's just not what I thought at all. And I think that you, there's this really good book out there called the E myth revisited. And it goes into talking about how you can be someone who is a technician, which is us, like we're developers, we can sling code all day long, and build this really great stuff. And that's great. But that doesn't mean that you can run a profitable business. But just on that as well, because you also have to be the manager, or it's the person that actually knows a thing or two about actually running a business. So you have to know how to talk to clients, you have to know how to, like, I think one of my biggest benefits is that I don't talk to I didn't talk to clients in terms of technical stuff, people would hire me because I knew I was good at technical, but you have to talk to them in business terms. And if you can relate to how a business works, and how a business makes money, and if you can help a business make more money, then that's really where the sweet spot of running your own show starts to get because people will pay you unlimited money, if you are helping them make more money, right? Because you are, in turn extending their their actual business. So I think that's that's a really important point to take into consideration. If you're looking at it, you have to say, am I the type of person who also wants to run a business as well as be the technician where you get into the nitty gritty of, of writing code, right? Yeah, - -42 -00:17:35,040 --> 00:18:39,829 -Scott Tolinski: nobody's gonna do that stuff for you. Unless, obviously, you're paying someone to do it for you. So you know, I like like Wes said, if you're talking to clients, you need to learn to speak in their terms. Because if you don't, they're not going to see the why you're going to be leaving money on the table, you're potentially going to be missing out on opportunities overall, you know? Yeah, definitely something and I along those lines, there's a an excellent book design as a job, which came out by a book apart. I don't know when this came out, it came out of I don't know, I'm dating myself here. So I'm gonna say a few years, and it's probably like, six years ago. But design is a job by Mike ponterio. I Mike Montero material. Yeah, yeah. Yeah, it's really this, this book opens your eyes to all that stuff, dealing with clients and talking about business terms and money and all that sort of stuff. It's a definite definite must read if you're going to be a freelancer. - -43 -00:18:40,339 --> 00:18:42,320 -Wes Bos: Cool. I'll just check that out. - -44 -00:18:43,170 --> 00:18:44,359 -Scott Tolinski: Yeah, um, yeah, - -45 -00:18:44,430 --> 00:20:33,750 -Wes Bos: on the same, same sort of idea. There's this whole concept of either being an hourly based billing person or this thing called value based billing, and I actually do quite a bit of both of them. I'm a huge fan of what's called value based billing, because the way it works is that you don't charge somebody you don't charge for acid seat time, because that means when you stop working, the money starts stops coming in. And if you want any sort of freedom, if you ever get burnt out or, or anything like that, if you ever need some sort of break from this, you shouldn't have to be like, Oh, well, then the money's gonna stop coming in. So value based billing follows the term where you talk to and this is where the business sense help comes in. where you say, like, I am going to build you a store picker, and or a store like a store locator on your application, and that will bring you an extra $5,000 worth of value. So I'm going to charge you $5,000. Now, if that takes you however many hours to build it, that's that's totally fine. But if you were to do that again, or if If you were to do something similar and you were to reuse parts of that code, or you were to you already knew how to do it, because you had figured out all the problems, you can quickly code it up again. Like, if it takes you half the time, do you charge half the amount? And the answer to that is no, it's still the same amount of value that's been delivered to the end client. So the fact that you're charging $5,000, and it takes you half the amount of time, then that's, that's exactly how business works. Right? Yeah, it's - -46 -00:20:33,750 --> 00:21:00,079 -Scott Tolinski: all value based and, and then you don't have someone comparing numbers to numbers here, right? Like, I am working at one, you know, $100 an hour or 150 an hour or something like that. And then they're, they're looking at that as is that that time? In comparison to other things? What am I spending on, you know, dollars per hour for this, and then this, rather than this value of what you're bringing? Exactly. - -47 -00:21:00,079 --> 00:22:28,410 -Wes Bos: And I found, also, with with hourly based billing, I found that clients like you tell them you charge, like, for me, I think it was like $130 an hour, I was charging and like you don't come to someone and tell them that because they're gonna, they're gonna do the math in their head, and they say, I get paid way less than that. Right? So why the hell should I I should have got into that. And it doesn't mean anything to them. And then you're always managing timelines, and you're trying to quote how long it's going to take you where you have a fixed base billing, it's much easier to go as quick or as slow as you want. If you want to take some time to learn a new technology, you're not under the gun to actually to spend that time. efficiently, you can take a little bit more time on there. So big fan of fixed base billing, but hourly billing, I also did a lot. And that is the case where the scope of the work is fuzzy, meaning that you question yeah, you do not know or you're working with an existing team, you're relying on other people to give you stuff in order to work. And if that's the case, you're working with the team, then then hourly based billing works just fine, I did quite a bit of that you can make some really good money doing that as well, because you can charge a high hourly rate. Because the client doesn't have to pay your health insurance or pay for your training or any of the other overhead that comes along with actually having an employee you're simply just a gun for hire. - -48 -00:22:29,190 --> 00:24:13,560 -Scott Tolinski: Yeah. And and and with either of these, whether you're going with value based or our Yep, it's a lot of it can the decision can be made in what's going to be more beneficial to you, like you said, if the if the the project guidelines are fuzzy, right, and you say, you know, x features going to cost $5,000 you get in there, those are the as you get in there, they become less fuzzy, you end up spending more time on it than you'd expect, then that hourly would have benefited you, because you could have made more money hourly. So it Yeah, it's really all about what's best for you, as a freelancer, right, what's going to maximize your income in this particular application. And, and I think that, you know, leads me to something that people are pretty, they're shy about talking about money. They're, they're shy about talking about quotes, they're there. People don't want to bring it to a place where you're getting into the just sort of the dollar amounts here and there. And and that's like, really something that you can't do. Because these people run a business, they expect to talk money. Yeah, you know, negotiations around money should not be awkward, right? You should feel comfortable negotiating your price. Yeah, if you're quoting something too high, they're gonna tell you it's too high for them. So, you know, I would say, Don't shy away from talking about it. Yeah, you know, have a have a discussion about what you're thinking, you know, I I'm thinking this feature is going to cost X amount of dollars, they might come back and say, Well, you know, what can we get for this amount instead? You know, and then you can have a conversation. - -49 -00:24:13,589 --> 00:25:18,599 -Wes Bos: Yeah, you absolutely need to be able to talk money without it being awkward, because I always hear a freelancers just undervaluing their work, because they're afraid it's not going to get accepted. And they think it's like, they give a quote, and then they say no, and then they walk away. And the way that's not true, the way that it does work, yeah, where people think that like, I've got 300 freelancers lined up and I'm going to go for the cheapest one, right? Whereas often what happens is that they have only you that they're talking to, or they have a couple different people and they are they aren't just basing it on how much money it is going to be. But they are basing it more on your personality, how you interact with them, your communication style, all of those things. So People don't, don't chicken out on your quote, charge what you're worth go in with a nice strong quote. And if it's too much, then they will tell you and you can you can figure something out, or you can walk away because they just don't have the budget that you're able to work with. - -50 -00:25:19,290 --> 00:25:52,140 -Scott Tolinski: Yeah, always go high. Cuz if you're going too low, you know, it's easy to go too low, your client will love that, you know, your client will love that year, you're cheap or whatever. But what does that get you? Yeah, the person who's putting in the time to do the work, right. So, you know, obviously, friends and family discounts, you know, on another nother side of the defense there, but like, if you're doing work for somebody, it's a business relationship. And yeah, and you should, you should get what you're worth, you should get the value that your, your work is worth. - -51 -00:25:52,169 --> 00:26:58,260 -Wes Bos: Yeah. So how do you find out how much to charge? That's always the the million dollar question like, what is value based billing? How do you figure that and that is that is just a skill that you will learn. as you go along? There's no everyone always asks me, how much am I worth right now, if I know xy and z? And the answer is how much you, you want to like, I remember I was charging 50 an hour. And my friend was like, you should charge 100. So right, I'd started charging 100. And no one batted an eye. And it's not because I was just like amazing and super good. It was just because like it was that was fine for people to pay. And they thought that it was well worth it. So I think there's a lot of people that severely undervalue themselves, especially because they come from like, Well, I was making 80 grand as a full time developer. So cut that up into 40 hour weeks, and you got it where it's like you don't understand, like, you have to buy a laptop and pay your own health insurance. And you've got all this overhead working for yourself, that that needs to be taken into account. - -52 -00:26:59,099 --> 00:27:19,890 -Scott Tolinski: Yeah, I mean, a good rule of thumb is if is if all of your clients are immediately agreeing to the price that you're giving them, then you're too low. Like, you should have a little bit of pushback at some point to get that upper limit, right? If, if you're always saying it's gonna be X dollars, and they're like, Yes, we'll do it right now. Yeah, you know, then you know, that that's, that's too low. - -53 -00:27:20,189 --> 00:27:50,160 -Wes Bos: Yeah, exactly. You want to and for me, it was just a matter of like, sort of inching my way up. And as, as he become, we'll talk about this in just a second. But as you become sort of more in demand, once the referrals start sort of coming in, then you can, you're gonna have more and more work than you can actually deal with, or at least I that's the way I was, and then you can sort of cert, you can inch up your hourly rate or inch up your prices. And that's how the economy works. Right? - -54 -00:27:50,280 --> 00:28:02,130 -Scott Tolinski: Right. I mean, it's simple supply. If your skills are in demand, you need to charge more for them, because you know, they're they become more valuable and more rare as your time gets filled up. - -55 -00:28:02,579 --> 00:30:28,950 -Wes Bos: zactly want to take a quick sec and talk about our sponsor, which is a company called delicious brains, they make a sweet plugin called WP migrate DB Pro. And it's actually something that I've used quite a bit myself, it's a WordPress plugin that you install on both of your actual WordPress installs, like let's say you're developing one locally, and you've got another one up on your actual production server. And you have your theme, and that goes into git, but you have this other thing, which is the actual data in your database, you need to get it from local host to production or or vice versa. Maybe you're working on existing website, you need to take a copy of it, and bring it down. So how do you do that? Well, if you dump the database, there's all these strings that relate to localhost and needs to be replaced. So WP migrate DB pro will just basically connect your two word presses together and it will push or pull the actual content from one or another. And it will do all the finer place of of the actual strings that you have and any other problems that are bound to pop up when you're migrating a WordPress. So I've been using this for for years and years and it's absolutely essential piece of doing WordPress development. So it's kind of cool that we're doing the freelancer one because quite a few freelancers use this to move around their clients. WordPress does. Yeah. And WordPress overall, as you so heavily in freelance dev work, yeah, yeah, exactly. That's sort of like if you're looking at getting into if you're like maybe a new developer, and you're looking at getting into the freelance game. WordPress is definitely some low hanging fruit that you can, you can just jump into and get up and running. Right? Yeah, using themes and then getting to customizing your own themes and building very complex. Exactly, exactly. That's exactly how I got started. So they've got a 20% off code for us at delicious brains.com forward slash syntax, check it out. And huge thanks to them for sponsoring the show. So, let's talk about finding clients. Where do you get clients from? A lot of people when they're starting out, they go to, they go online, and they're like, are they asked me like, what's the like, Honey Hole of, of clients? Like, where do I go to get the best clients? And like, or what am I? What about what are these? Is that a thing? - -56 -00:30:30,570 --> 00:30:36,030 -Scott Tolinski: I know I just got great imagery. I got like, you know, Winnie the Pooh, the tree. - -57 -00:30:37,230 --> 00:32:58,140 -Wes Bos: But their answer to that is like, by the time a job gets posted online, and this can be true for full time jobs as well, there's going to be 20,000 people applying for that actual thing. So the good work will always come from people reaching out directly to you, because they know that you do something or through a referral from an actual friend. So the way that I sort of boosted up my initial career was Twitter back over 10 years ago, was, was like a, there's maybe a couple hundred people in Toronto that actually were on Twitter, and I was one of them. And we used to have these things called tweet ups, where you would just like get together and drink a beer with people from Twitter, which is a very bizarre thing to do. But through that I had met all kinds of people who run agencies, and that were sort of in the tech scene. And they, I was very loud about being a developer, I am a developer, I post on Twitter post on Facebook, I have a website that tells people what I do. And just by doing that, at some point in time, people go, I need a developer. Oh, Wes. Okay, I remember, he's always talking about his web stuff. Even like, for people who are on Facebook, they don't like like posting, like work stuff. But yeah, if you're that person who's always posting like working on a website, or pictures of code, or whatever, it's not going to immediately lead to leads. But what happens is that it's funny, I was teaching freelancing class once and I opened up my Facebook, and I did a search for like, doing website or need a website, and I found like, like, 13 different people where it's like people from high school you haven't talked to in 15 years. And they're like, Hey, how you doing? Blah, blah, blah. Anyways, my brothers uncle needs, I guess that would be their uncle, but my uncle needs a website, are you doing that, and that's how I got a lot of my initial leads was just from telling people exactly what I do. And then when it comes time to these people actually needing someone to build them a website, I was the first thing that actually popped into their mind, before they did a search or asked a friend or did anything like that? - -58 -00:32:58,710 --> 00:33:57,720 -Scott Tolinski: Yeah, it's a simple Association, right? You know, you think, Oh, this guy is always posting this. I mean, I have 1000 of those. So associations of people on Facebook, just based on what their post exactly, you know, not websites, but what those things are that you identify that person by, and if you make that identity as the guy who works on websites, then yeah, you're gonna get thought of, and that is really the best way to to get your name and get clients is, is to have people think of you when they think of the website, so whether you're going to meetups, your, you know, your casual meeting people and stuff like that, or are new people, you know, you tell everyone I make websites, you know, and that's everybody knows somebody, and everybody knows somebody, you need something, you know, I can't tell you how many client projects I've gotten just from a friend of a friend, yep, friend of a friend of a friend, you know, just your name comes up in conversation, they reach out, and you do good work. Exactly. - -59 -00:33:57,720 --> 00:34:32,610 -Wes Bos: And I think once that starts happening, as you continually put yourself out there as a web developer, no matter and that's important to do, no matter how much work you currently have, because you always got to keep that the fire stoked for the more more coming in. But if you are doing good work, if you're extremely reliable in what you do, if you're very personable, able to communicate with the client, you will get unlimited referrals because they tell their friends, their friends, still their friends, their friends, their friends, and before you know it, you're you're absolutely slammed with really good work. - -60 -00:34:32,610 --> 00:34:55,190 -Scott Tolinski: Right? And that's infinitely better than let's say, Oh, I just put my portfolio online, right? I just put my like, people are maybe arriving at your portfolio and looking through it and whatever. But your portfolio is not going to get you this kind of work. No, it just it just won't, you know, because, you know, people honestly don't care now that - -61 -00:34:55,260 --> 00:35:10,860 -Wes Bos: my portfolio was was broken links for most of my freelancing career. And people do not care. They just need a referral is worth its weight in gold from, from somebody who said, Oh, this guy's good. Make sure you check them out. - -62 -00:35:11,549 --> 00:35:17,400 -Scott Tolinski: Right? So how did you get your very first client? Like, what was your very first client interaction? I - -63 -00:35:17,400 --> 00:36:29,070 -Wes Bos: was good. Um, so I we should do like a whole show on our like origin stories, but that's good. I was doing like MySpace designs and doing t shirts for bands. And the people, these kids that had bands, their parents had pool companies and campgrounds and like, just like random businesses that needed websites. And they would ask their kids like, Hey, where did who can do us a website, and they would say, oh, that West guy that did our MySpace, he can also build websites. So it sort of sort of went into that. And then when I moved to Toronto, just getting really involved in the agency scene, letting making sure that every single agency in town knew who I was, was really important, because the agencies pass on a lot of $15,000 projects. And it's, it's really, it really sucks to tell someone, you can't work with them. So if you can say, I can't work with you, but this person can, it's so much nicer, because you can sort of like, like, get out of here and drop it on someone else's lap. And I was very willing to accept those lap drops. Yeah, - -64 -00:36:29,100 --> 00:37:19,380 -Scott Tolinski: yeah. Right. You got to be, especially if you're trying to make it, you know. Yeah, I know, my first client was my parents who did who did not pay me for this. But I had a job at the time. So it's cool. It was a definitely a, you know, just a favor. And they had, they'd started a tea store, they were selling green tea out of their house. So I didn't know very much about I mean, I'd made websites, but I didn't know anything about databases, and all that sort of stuff. So it gave me an opportunity to learn at the time was Magento, I built the site on and it gave me you know, even though they're my parents, it was still like, you know, here's expectations about what the site's going to be doing and stuff like that. It was like a nice ease into working with a client, because that client is, you know, can only be so angry at you. Yeah, - -65 -00:37:19,400 --> 00:37:20,400 -Wes Bos: yeah, absolutely. - -66 -00:37:20,880 --> 00:37:50,730 -Scott Tolinski: You know, so the, you know, the work went well, and, and then I did, I did the Craigslist thing I like went to craigslist to find clients. Yeah. And this was when I was in college, and I got a client, and I somehow got a client, I'm going to say that I have no idea like Craigslist is is not a great way to get clients. At least not valuable clients. This one worked out really well. And it turned into a long relationship of designing and building sites for them. It's true, those - -67 -00:37:50,760 --> 00:38:38,150 -Wes Bos: those repeat clients are are amazing, because you don't have to work or you don't have to have meetings or anything like that, to actually sell them on that work. You can just sort of have an ongoing relationship with these people. Right? They know what they're getting already. And you just meet those expectation Exactly. Another big one for me was was conferences anytime that there was a conference in, in Toronto, I would take people out for lunch, like all these speakers are flying in like hours or a day early, and they're just sitting in their hotel, so offered to take them out for dinner. And that led to many good referrals because these speakers often work in in very high, highly regarded companies. And those companies have huge budgets, and can really bankroll you when when they're looking for help. - -68 -00:38:39,030 --> 00:38:59,010 -Scott Tolinski: Yeah, and that one is, uh, I can't like that sounds like a great tip. But like, I'm not I guess I'm not that socially inclined. Yeah. Like, I feel like I would have a really hard time reaching someone for dinner. Yeah, yeah, yeah. Um, so you know, power if you can do that, like, do it. Yeah, that's a skill that not everyone will always - -69 -00:38:59,010 --> 00:39:04,710 -Wes Bos: say that to me like, Oh, yeah, of course. You're super outgoing. You can do that. No problem. Well, yeah, I guess. - -70 -00:39:07,170 --> 00:39:13,110 -Scott Tolinski: Yeah, I am not i'm not i guess we get both ends of the spectrum. There have always been like the opposite end of that that social spec. Oh, yeah. - -71 -00:39:13,440 --> 00:40:45,780 -Wes Bos: Yeah, make sense? Um, all right, let's talk about contracts, communication not getting screwed, because another thing that I find with people is that it's when you talk to them about freelancing. It's always them versus the client. They're always mad at their client for like, going over whatever and you're on your clients team. They're hiring you to to help them it's not you versus your client. It's it's you with your client to finish that end goal. And there's a lot of stuff that can be done in order to sort of like manage that relationship between your client and obviously contracts is one of them, but quite honestly, a lot of my stuff, never had a contract, and I've talked to Quite a few lawyers about this, and they'll tell I'll tell you the same thing that is like, yeah, you can, you can have contracts that, like, they're very important to have that spell out what will and will not happen. But like when push comes to shove, you're not going to take someone to court for five grand, you're not going to hire up a lawyer to lawyer up for, for a $10,000 website, because it's you're gonna it's gonna blow that all away. And what's I think, much more important is having very open lines of communication and managing expectations with your client, because that will go way farther in, in understanding what needs to be done and what isn't going to happen and, and whatnot, then an actual contract will, will do. - -72 -00:40:45,809 --> 00:41:44,520 -Scott Tolinski: Yeah. And like you said, if you're if you're talking about your client, like you're fighting them, yeah, that's, like, you could say that's like a code smell. Right, that's like that that's a good indication that those lines of communication on both ends that there's an issue there. Yeah. And those type of things are difficult to, you know, it's you, they're difficult to fix, right? If you have that poor communication from the get go. Yeah. And, you know, managing expectations and talking to your client is, is really the best way to make sure that everyone is satisfied with what's going on. I don't know, I think that's just such a tremendous, tremendous topic there is, is, is being able to say, this is what you're getting, this is what I'm doing. This is what I expect from you, you know, everyone's on the same page. Everyone should be happy. Yeah, if someone's not happy, then there is some breakdown in communication or expectation. - -73 -00:41:44,550 --> 00:42:35,250 -Wes Bos: Exactly. And it's, it's your job. Often I people, I hear people being like, like, there are terrible clients out there. I've had many of them. But often, it's the developers job of doing a poor job at talking to the client and squeezing out the requirements from them. Because you How often have you heard of like, at the last minute, before we launched, they asked for all these features, right? And that's, that's your fault for not understanding business requirements, asking the right questions and squeezing out, like, doesn't need to do this? Or did you? Did you even think about geo locating based on the GPS? Or did it? Do you need to print a list of stores or all these things? Right, and that stuff comes with time, but you definitely need to learn how to squeeze out proper requirements before absolutely anything starts. - -74 -00:42:35,849 --> 00:43:40,020 -Scott Tolinski: Right. And in managing that, so that it doesn't get to the end of the product. And they think that they can say, let me add this and this and this. I mean, you need to be very upfront, earlier on in the project, that this is what you're getting, and maybe nothing else, you know, to some extent, because if they're thinking that they can add, you know, there's, there's two sides of that, maybe you didn't know that they were expecting to add all this stuff, or they thought that it would be easy to add this stuff. So they could just drop in at the end and tell you to do it, you know? Yeah. So just making sure everyone's on the same page about what exactly they're getting, you know, you're not gonna you're not like, let's say you have a, you're getting a room remodeled or something like that, you're not going to go into the whole process. And let's say, you know, there's a hole sink or something they needed to add, yeah, you're not going to get to the end of the process and be like, oh, let's add a sink here. Now, you know, everything needs to be defined before. Yeah, yeah, exactly. - -75 -00:43:41,340 --> 00:43:41,880 -Unknown: Um, - -76 -00:43:43,740 --> 00:45:04,560 -Wes Bos: I want to talk about this isn't on our list, but maybe like some tools that are helpful for running a freelance business. Because that definitely, like running the business side of things is, is huge, right. And if you, there's this thing, like it's working on your business versus in your business, and you want to be, I don't know which one you want, but you don't want to spend all of your time doing the stuff that actually runs the business, which is bookkeeping and email and all of the like, sort of busy work that some people think that they're actually being productive. You want to get away from that and actually do the stuff that's making your money at the end of the day. So I don't know if you have any, but I've got a couple that I used over time, which is a project management system, as much as they hate things like Basecamp and, and whatnot. Having absolutely everything in a central repository, rather than all through emails that you have to sort of piece together when you want to like look back at it. That's that was super helpful. I used generally my clients would have their own version of Basecamp and you just use theirs which is great, but For smaller clients, you have to sort of supply that because they're not that type of business. - -77 -00:45:05,280 --> 00:45:42,270 -Scott Tolinski: Yeah, I take a lot of like, actual physical, a pen and paper pages to write out all that stuff. Yep. drilled into my head that way. You know, as far as just keeping track of assets and everything, you have to be very diligent about your, your organization, so folders with inspiration folders with, you know, assets that you need for the project, or any of that, that code stuff or whatever, keeping everything absolutely together in an organized manner, instead of just like random files on your desktop or something like that is is absolutely essential. Yeah, you know, that organization? - -78 -00:45:42,539 --> 00:45:47,160 -Wes Bos: Yeah, writing everything down, having it all in some sort of places is super key. - -79 -00:45:47,849 --> 00:45:52,110 -Scott Tolinski: Yeah, so whatever that tool is, as long as you have a system in place, - -80 -00:45:52,289 --> 00:46:29,670 -Wes Bos: right, um, Trello is huge for that as well, especially if you have clients who like to go nuts with Excel, they'll open up in like a Google Doc excel sheet. And then they'll like start putting like a list of bugs that need to be fixed or whatever. And then like, you'll fill like reply in the next cell, and like, it's terrible. So Trello, will, you can just create a card for what needs to be done. And then you can drag it into the doing column. And then once you're done, Dragon done, you can have conversation tacked to each card. So I almost prefer that entirely over something like Basecamp. - -81 -00:46:30,360 --> 00:46:55,740 -Scott Tolinski: Yeah, the hardest part about those things is if the clients not already using them, yeah, I don't know if you can expect the client to use them, right. Like I've had a hard time. You know, if you set up a Trello, and you have the intention of it working like that, but the client is not already using Trello. chances are they're not going to be super into it. But if they are into it, then that you know, that can make your Yeah, totally, much much. But it's - -82 -00:46:55,740 --> 00:47:12,960 -Wes Bos: funny to look at, like the progression of my last 10 years where as I got into higher end clients, and more expensive clients, they were much better at this whole communication, there was a lot less hand holding in the business side of things versus actually communicating with them. - -83 -00:47:13,650 --> 00:47:28,350 -Scott Tolinski: Yeah, and a lot in agencies and industry sort of stuff like that. I've already used these tools and other things or with other other or they're, you know, freelancers, and contract workers and stuff like that anyway, so that can definitely be a big help. - -84 -00:47:28,380 --> 00:47:30,180 -Wes Bos: Awesome. Yeah, - -85 -00:47:30,180 --> 00:47:36,030 -Scott Tolinski: I use, what do you what do you use for your accounting and stuff like that? invoices? Yeah, - -86 -00:47:36,060 --> 00:47:53,820 -Wes Bos: I've been on Freshbooks for probably 10 years now. Big fan of it. My accountant loves it. You can just do a dump of all of your invoices at the end of the year. You put all your expenses in there. So been a big fan of fresh books over over the years. Cool. What about you? - -87 -00:47:53,850 --> 00:48:03,840 -Scott Tolinski: I use a wave. Yep. Wave apps calm. Yeah, I used to exist free up. I've never looked back. I really like it. - -88 -00:48:04,080 --> 00:48:18,360 -Wes Bos: That's pretty cool. I think wave does a little bit more in terms of like you can you can run payroll, and do direct deposits and stuff like that. Whereas Freshbooks more geared at like a freelancer I think wave is more geared at a small business. - -89 -00:48:18,780 --> 00:48:19,290 -Unknown: Yeah. - -90 -00:48:19,290 --> 00:48:41,520 -Scott Tolinski: What's cool about WAV though, is the the free tier stuff. Yep. Like keeping track and sending invoices is probably the like, I don't know, I've used a lot of different invoicing software. And it's just been really great. I mean, it keeps track of everything. But the interface for building invoices and managing clients and stuff like that is really just as good as it gets. That's cool or free. You know? - -91 -00:48:41,520 --> 00:48:42,690 -Wes Bos: Yeah. Can't beat that. - -92 -00:48:43,470 --> 00:48:44,160 -Unknown: Yeah, right. - -93 -00:48:44,160 --> 00:49:43,740 -Wes Bos: Awesome. Um, what else we have to talk about? Being a freelancer? I think one of them. For me, at least, this might be a little bit different in the States, which is, like health insurance, like, what do you do and you're not covered by an actual company? It could, because you need to pay for those things by yourself. So in Canada, I pay for my own health insurance and some disability insurance. And I know a couple others, and it ends up being about 300 bucks Canadian for the entire my entire family per month, which I know is a lot more expensive in the US. But you definitely have to have those things in place. And that's opt in figure out how those all work. Because that's one reason why I see people don't want to go out on their own because they just don't know how to put it to get their own health insurance and to to get involved with all that. - -94 -00:49:44,640 --> 00:50:13,140 -Scott Tolinski: Yeah, and that's one of those things I wish I could speak more on. I've been like, lucky enough. Like I said most of the time that I've been freelancing I've had another job so I haven't had to worry about it. And now that I'm doing full time, you know, my wife works. She works like 75% time. So she gets Oh, yeah, lover or health insurance. So, you know, it's tough for me. I've never had to deal with that. And I know it's it's just a complex hassle. You know, it's just one more thing you got to worry about. Yeah, - -95 -00:50:13,140 --> 00:50:46,830 -Wes Bos: yeah, absolutely. It's, it's nice if you can have a partner that you can sort of go under their own and not have to pay your own because it can add up like, I know, it's pretty cheap in Canada, but you pay a couple other like disability insurance and whatever other things that you need to pay on a monthly and before you know it, you got five 600 bucks a month in all the different things and that's many thousands of dollars per year, whereas your employer would just totally swallow that you don't you don't take that for granted. - -96 -00:50:47,550 --> 00:50:55,320 -Scott Tolinski: Yeah, absolutely. All right. So now's the time in the show that we get to talk about our sick - -97 -00:50:56,160 --> 00:50:57,150 -Wes Bos: sticks. - -98 -00:50:57,510 --> 00:51:04,890 -Scott Tolinski: Yeah, I got a really sick pig. Today, it's like truly sick. what's what's your what's your sick pick today, - -99 -00:51:04,920 --> 00:53:01,800 -Wes Bos: my sick pick is an app for OSX called Karabiner elements, KA are a bi n er. And what this is, is an application that will allow you to remap keys on your keyboard. And what I use it for is the caps lock key Caps Lock key absolutely useless. It's it's precious on your actual thing, especially at the new MacBook Pro, or you got the stupid Escape key. That's like like a little screen there. So if you want to make use out of your caps lock key, you can use Karabiner elements to remap it to another key combo. So what I have done is I've mapped capslock to the combination, because you'll have only so many modifier keys on your, on your keyboard, you have control option Command and Shift and like Command S command x or whatever those are all taken. And then you have like shift a and you have all these different key combos in there generally taken by some app. So if you remap your capslock key to what's called hyper, which is just a fancy word for saying, mashing your hands on the Command Option Ctrl Shift key. So you just press caps lock, and then Caps Lock a Caps Lock q caps look arrow, any you can make up your own key combos now, and they're not taken by any application. And that's really cool. So you simply just use Karabiner elements to map a map your caps lock key to those four key combos to hyper and then you use any other app, whether it's Alfred, I use one called better touch tool. And then you can you can then say when somebody hits hyper arrow, maximize, maximize your window to the right, or when somebody hits hyper s, open up Spotify. And it's amazing. You make all these different key combos. - -100 -00:53:02,880 --> 00:53:04,620 -Scott Tolinski: What was that app that you said you use it with? - -101 -00:53:04,650 --> 00:53:30,900 -Wes Bos: It's called better touch tool. And then in better touch tool, you just better Touch Tools amazing. It's maybe that would be my pick next time. But it's it's got a whole bunch of different things that it's a window manager. It's an application launcher. It has all kinds of stuff. But what I use it for is launching applications and and moving around my Windows based on hyper keys. - -102 -00:53:31,770 --> 00:53:32,790 -Unknown: Cool. Oh, yeah, - -103 -00:53:32,790 --> 00:53:39,030 -Scott Tolinski: I love this and love this. This is gonna be in our we have our like productivity episode. Yeah, we're gonna talk about this. Absolutely. And also, - -104 -00:53:39,030 --> 00:53:53,100 -Wes Bos: I should say, don't tweet me about every other window manager ever. I know. I've tried them all. You see what happens is when I tweet about something is like Why not? X, Y or Z? And so they're right. I got - -105 -00:53:53,100 --> 00:53:57,630 -Scott Tolinski: it. Right. Because Because when you start using one thing, you know, it means you automatically hate - -106 -00:53:57,660 --> 00:54:04,230 -Wes Bos: Exactly, exactly. Yeah. What about you? pick pick? - -107 -00:54:04,290 --> 00:54:30,090 -Scott Tolinski: A Yeah, my sick pick. I'm going something we haven't gone before. I'm going with a TV show. Whoa, we have we have not allowed or Yeah. You tell me. I'll allow it. Okay, cuz, you know, I don't watch a lot of TV. But like, Man, this is my favorite show on the planet. And it is Thrashers, King of the road. Oh, yeah, I've - -108 -00:54:30,090 --> 00:54:34,050 -Unknown: been watching it. Yeah, it just started back for it well, so - -109 -00:54:34,050 --> 00:55:47,850 -Scott Tolinski: actually skiing the roads been going on for a while in the in the skate culture, skateboarding. But now it's a TV show on vice land. And it's it's awesome. So basically, you could think of it like the show jackass meets any skateboarding video ever. So it's it's two or three teams, three different professional skateboarding teams going across the country completing ridiculous changes. lunges from, you know, from totally non skate related challenges to adding extra sets of wheels, double skateboards and then just really really hard tricks. So they're all professionals and they're all amazing and they're hitting these giant rails and giant stuff and and just absolutely doing some of the coolest skating on top of doing just outrageous stunts and whatever it's a it's like it's yeah it's like a reality show meets jackass meets skateboarding video so and so this Yeah, it's so good. And I've like even I've been watching all the old ones because a lot of the old ones are on YouTube now just like the ones before was a TV show and just like yeah threshers king of the road definitely my my favorite. - -110 -00:55:47,910 --> 00:56:16,290 -Wes Bos: Oh man. I'm gonna spend the rest of my day watching this it's so funny that just it's just dying like they they dropped into a half pipe on a rack of ribs last season. Yes. All kinds of curries and they take some pretty big slams because they a lot of these guys are like street skaters. And then they do this like crazy like ramp work which they're not there they don't know how to do that right? So right they just fly all over the place - -111 -00:56:16,950 --> 00:56:25,560 -Scott Tolinski: yeah, yeah. So sorry for going off the board there I'm sure you can watch it elsewhere he's had to YouTube king of the road Yeah, it's uh it's why advice advice land - -112 -00:56:25,560 --> 00:56:34,890 -Wes Bos: is is a really cool show as well are really cool channel as well like I feel like as like an aging hipster it's like the perfect channel for yeah I - -113 -00:56:34,890 --> 00:56:40,920 -Scott Tolinski: pretty much don't turn it off I if I'm if my TV's on it's typically on vice land. So - -114 -00:56:41,490 --> 00:56:58,170 -Wes Bos: big fan that that maybe that'd be my pick next week as well. Just the vice land channel in general. They're their website at least in Canada. They're what their website has quite a bit of stuff for free. They have they've this one Matty Matheson as this dead set on life. You watch that one? Yeah, it's like a Yeah, - -115 -00:56:58,170 --> 00:57:04,980 -Scott Tolinski: he's a he's a Canadian guy. Right? Yeah, we don't know much about him in the state. I never heard of his name until that. - -116 -00:57:05,309 --> 00:57:21,210 -Wes Bos: He's big in like, the like Alexisonfire like punk scene growing up and then, you know, he's like a chef and does all this hilarious stuff. So cool stuff that that is that is the sick that is the sickest pic I've ever picked. - -117 -00:57:21,270 --> 00:57:26,100 -Scott Tolinski: Or it's by definition of everything. I mean, it's it's as sick as it gets. Really - -118 -00:57:26,130 --> 00:57:46,620 -Wes Bos: think about it, you know? Awesome. Well, that wraps up the show. Thanks so much for tuning in. Make sure that you do all the things that you're supposed to do. leave a review whether it's nasty or not, let us know what you think on Twitter. I'm at Wes Bos Scott is at S kolinsky or at level up to cool until next time, see. - -119 -00:57:47,580 --> 00:58:01,680 -Scott Tolinski: See? Head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you liked the show. Until next time, - diff --git a/transcripts/Syntax50.srt b/transcripts/Syntax50.srt deleted file mode 100644 index ec6c989b6..000000000 --- a/transcripts/Syntax50.srt +++ /dev/null @@ -1,428 +0,0 @@ -1 -00:00:01,319 --> 00:00:06,150 -Unknown: You're listening to syntax, the podcast with the tastiest web development trees out there. - -2 -00:00:06,179 --> 00:00:10,500 -strap yourself in and get ready to whiskey and Wes Bos. - -3 -00:00:10,559 --> 00:00:36,600 -Wes Bos: Welcome to syntax. Hello, everybody. Hope you're doing fantastic today. Today we're going to be talking all about progressive web apps that is building an application in HTML, CSS, and JavaScript and making it work in the browser. But I don't getting that full control that you are used to in a regular installed application. So I'm pretty excited about that. With me today, as always, is Scott Tilden ski Hello Scott hiding today. Hey, - -4 -00:00:36,650 --> 00:01:03,390 -Scott Tolinski: I'm super good. I entered my first breakdancing battle in like three or four years this weekend. And it might I'm paying for it right now. My back and my breath. Everything is hurting. But I did really good. I entered with a student. So we didn't get super far. It was like first or second battle. But I did really good. And I'm pretty psyched because it felt really good to get out there and actually get back competing a little bit. So yeah, how about you? How are you? How are you feeling? - -5 -00:01:03,629 --> 00:01:33,120 -Wes Bos: I'm feeling pretty good. Just had a nice little cottage weekend went up north to my buddy's cottage for the weekend with the kids and enjoyed that thoroughly. I'm all charged up. I'm actually heading off in two days. On Wednesday morning, I'm driving down to Dayton, Ohio, which is about six hours from here. I opted to drive because the flights were much longer with the layovers, and I'm I'm doing a workshop down there. And then back. So looking forward to that. - -6 -00:01:33,599 --> 00:01:34,380 -Unknown: Nice. - -7 -00:01:34,679 --> 00:01:47,640 -Wes Bos: Today we are sponsored by Log Rocket, which does error logging error replaying and a couple other things we'll talk about today, as well as Freshbooks, which is cloud accounting. We'll talk about both of those awesome companies partway through today. - -8 -00:01:47,819 --> 00:02:01,140 -Scott Tolinski: Yeah, hey, before we get into it, I know we don't do a whole lot of like topical web dev news stuff. But this one's pretty big. I thought maybe would want to touch on it. Even though this is coming about like a week late. What are your thoughts on this whole GitHub Microsoft purchase thing? - -9 -00:02:01,379 --> 00:02:53,940 -Wes Bos: Yeah, I think it's pretty cool. Like I'm I was pretty fine with GitHub, just operating on their own. But I think Microsoft for all the flack that it gets is actually being pretty cool. Lately, I know that there's people have all these like edge case scenarios that they come out of the woodwork, but just by seeing Microsoft champion TypeScript, seeing what they're doing with VS code and, and like what they're just doing, in general, for the open source web development community, I know that there's a lot of really good people inside of Microsoft that are, are working to make really awesome stuff. And it's easy to look at something like Skype, which is just an absolute disaster, and it gets worse every single time that it comes out. But there's also you can also look at other things like VS code and be like, Okay, I know that or I hope that they're going to do well by this. What do you think? - -10 -00:02:53,969 --> 00:04:00,060 -Scott Tolinski: Yeah, this is pretty much exactly my thoughts. I don't think that the Microsoft stuff today is the same as the Microsoft from even seven years ago, that would have messed this up. I don't know, I picked seven. That seemed like a good number. But I mean, I don't think it's the same company that would have done this. And I also don't think they're gonna, they're gonna be like, too overbearing on GitHub, right? I can't imagine that they would look at GitHub and be like, hey, let's mess this up. So I would I am optimistic about a lot of people are, you know, citing it as the apocalypse or something, but I really don't, I don't think it's gonna be that big of a deal. I'm not rushing to move my stuff off of it. Like you see a lot of people, a lot of people do that simply off of principle alone, that they don't want to be supporting a giant giant company. And I I get that. I mean, I totally get it. But I guess I'm cautiously optimistic, I think it's probably going to turn out fine. And, you know, what, there's a lot of competition in that space. And, you know, Bitbucket and get lab are great, too. So well, if Microsoft, you know, totally messes it up. It's not like we're like totally out of options for places to move to. So hopefully they take that, and, you know, improve upon it to compete. - -11 -00:04:00,060 --> 00:04:46,520 -Wes Bos: Yeah, it's pretty cool. And another thing I forgot to say was like Microsoft's also developing w SL, which is Windows subsystem, Linux. And they're making a huge push right now to make web developers like Windows just because like they're making all of our all of your like Linux kernel stuff, work on all this stuff. The reason why most people just buy Mac's when they're web developers is because it's so painful, trying to get all this tooling and everything working on Windows. And so what they're doing is they're they're making the Linux kernel work inside of windows, so that you can run all of this stuff and not have to deal with those cross browser things. So I'm pretty excited about that. It's also nice because they also as a Mac user, everybody feels totally ignored by Apple. And lastly, yours. Yeah, - -12 -00:04:46,529 --> 00:04:50,250 -Scott Tolinski: I know. We'll also look what's gonna happen to Adam editor? Yeah, that's - -13 -00:04:50,250 --> 00:04:51,200 -Wes Bos: a great question. - -14 -00:04:51,239 --> 00:04:52,130 -Scott Tolinski: It's a big question. - -15 -00:04:52,289 --> 00:05:20,670 -Wes Bos: Big deal, like like VS code has sort of won that battle. And now that they they own both, maybe they can take some of the Cuz there's obviously a ton of super smart people working on Adam and doing some amazing stuff. Like, it's easy to like poopoo Adam and say it's slow, but like, obviously, there's a lot of really smart people working on it, and they're doing some amazing stuff. So hopefully they'll just bring those devs over to VS code and, and keep up the amazing pace that they have. Nice. - -16 -00:05:20,850 --> 00:05:55,830 -Scott Tolinski: Yeah, so so sorry to derail the episode. Maybe, I mean, maybe it's worthwhile at some point, we can do some you know, like web development, new sort of stuff, even though that's typically not what we're doing on here. There's there's kind of a lot of big news lately and things going on. Maybe it's worth some time talking about sometimes. I don't know if we would want to do that in an episode or outside of an episode or whatever. But hey, yeah, works. Probably a hasty treat. At some point, we can rattle through some of the the most recent news and it's and like, most importantly, want to like tell you how does this apply to you as a as a web developer? - -17 -00:05:55,830 --> 00:06:00,600 -Wes Bos: and not so much like, what do you think about this? Yeah, this is good or not, right? Yeah, - -18 -00:06:00,630 --> 00:06:11,970 -Scott Tolinski: word? Definitely. Okay, cool. So let's get into progressive web apps. What are they? I mean, first off foremost, before we get into, you know why you might want to use them or whatever, what, what the heck is a progressive web app? - -19 -00:06:12,060 --> 00:06:48,990 -Wes Bos: Yeah. So I'll take a stab at it myself. Progressive Web App is not, it's not a framework. It's not a thing. It's just a it's a term that was coined by I think, Alex Russell, who is a developer at Google. And it's just a collection of sort of thoughts and best practices and using technologies together to make a website or a web app function similar to a native desktop application. And this is, this has long been the dream where instead of having to code something in Swift, or Alan for iOS, and then I don't know, what does Android use Java? - -20 -00:06:49,230 --> 00:07:03,150 -Scott Tolinski: Yeah, use uses Java, but now you can write it and oh, man, what's it starts with a D, the only word that's coming to me is Dalvik. And that's a keyboard layout. What is it? I don't know, think of it and then it here. Yeah. b. - -21 -00:07:03,150 --> 00:07:58,710 -Wes Bos: So you, you sort of it sucks to have to write them multiple times. So the dream is to be able to write your application and potentially your website in JavaScript, HTML and CSS and, and just deploy once and have it work everywhere. And that's been the dream forever. And I've long been on that train. But I've sort of fallen out of love with that idea. Because as a user, as a web developer, I'm all on board. But as a user, these things don't work as well as you want them, they don't feel as good. There's limitations that you have. And those things are slowly going away, especially iOS 11.3, just came out a couple months ago. And they implemented some of the major features that are needed for progressive web apps. So the idea is that you shouldn't as a user, at the end of the day, you shouldn't be able to tell whether you are using a progressive web app or a native application, as well as we'll go into some of the what what the install flow looks like that as well. I don't know. Does that make sense? What do you think? What does a progressive web app do? Yeah, - -22 -00:07:58,710 --> 00:08:51,289 -Scott Tolinski: yeah. Before I get into it, I do want to say that that language does not start with the D. It's kotlin. I was not even close. I've seen this word a whole thousand times. Yeah. So sorry about that. But yeah, no, I, for me, it's just like, I think about it as just more native like applications on the web. And you know, that was the first time you install a progressive web app, you'll sort of see what I mean, because they can install. I don't know how it is on iOS. But on Android, they install into your your app drawer, just like a normal application with the same kind of icon that a normal app has, when you click it, it has a splash screen loading up, it has to have all these sort of things that we're going to go into later in this episode. But it really does feel like a native application, when you're running it. It even hides the URL bar. So it does look and feel like an application. So for me, it's like this native like application, but with web technologies living on the web. - -23 -00:08:51,570 --> 00:09:23,940 -Wes Bos: Awesome. So you have this progressive web app checklist that Google has hosted on their website. And basically, it's a massive list of things that you should do to your application to make it a progressive web app. So what we're going to go through is kind of rattle through a bunch of the big ones. And then for each of them, we'll go into here's the idea, how do you make that happen? And then that will open up the things to different tech, like responsive design and service workers and manifest files and some new web API's, etc, etc. So you want to kick us off with the first one? - -24 -00:09:23,970 --> 00:10:19,710 -Scott Tolinski: Yeah, so these are the baseline things. This is the things that you sort of need, like absolutely need to be considered a progressive web app. So the first one would be that your site is served over HTTPS says that you're using a valid SSL certificate on your application. Now, this is something you should be doing anyways. So regardless, if you're interested in progressive web apps, if you know, I feel like at this day and age, you should just default to be wanting to ask no brainer. Yes, yeah. And now with Let's Encrypt, it's free, and a lot of services like Netlify, or a lot of these new hosting companies are making it really easy like a one click sort of get your SSL certificate, there's really no excuse to not be into it at this point. So you're gonna want to make sure that your site is served over HTTPS using a SSL certificate. And if you want to get one for free, I highly recommend to let's encrypt.org. I know Wes and I both use, Let's Encrypt. - -25 -00:10:19,830 --> 00:10:53,940 -Wes Bos: I should also say that the reason why we need SSL certificate is obviously because it's encrypted the traffic between it but also all of these new API's that we're talking about accessing the user's webcam, service workers, caching, all of these new API's are only available on what's called the secure origin. And a secure origin is an SSL certificate, website or localhost. So if you just want to get into these things, and the idea of getting a HTTPS is a little daunting to you know, that if you're running on localhost, that is considered a secure origin. Yeah. - -26 -00:10:54,090 --> 00:11:03,990 -Scott Tolinski: Well, again, these are, you know, sensitive. Those are, you know, using someone's sort of device. Yeah, information. It's sensitive information. So yeah, definitely, you want to take the next one? - -27 -00:11:04,140 --> 00:11:30,120 -Wes Bos: Yeah, pages are responsive on tablet and mobile devices. This is probably again, another no brainer, make sure that regardless of the screen size that the user has, it's a mobile friendly, whatever, especially also this goes the other way around, is if someone has a very large screen, don't just give them the 1200 pixel wides, can you take advantage of a really, really wide screen, as well as a very, very small screen and landscape and portrait? - -28 -00:11:30,360 --> 00:12:45,450 -Scott Tolinski: Nope. So the next one is kind of a big topic, we maybe want to get into this a little bit here. But all app URLs load when offline. So basically, you need to have an offline experience. Have you ever loaded up Instagram, when you're not online? Well, it doesn't load in your new posts, but it will typically load the ones that are stored in your cache or, or loaded already. And you can pretty much use the app just not use any of its online functions. So for a progressive web app to be a progressive web app, it needs to function very similarly, where all of your URLs need to load when offline. And one of the cool things you can do to test this is in your Chrome Dev Tools. Under network, there's just simply a checkbox where you can make yourself offline. So you can always check yourself to see if you are working. Now the way to have your app URLs working while offline, is to use something called a service worker. No service worker is basically like a script that runs in your browser. It runs in the background. And it can complete things right? It can it can do things like you know push notifications, or background sync, and in the future, apply, be able to do a lot more. But it's basically something that is a script that runs without you using a website. - -29 -00:12:45,659 --> 00:14:37,919 -Wes Bos: Yeah, I think the the important part of a ServiceWorker is that it runs in sort of this third space, I like to think about it because you have like your maybe have server side JavaScript, you have client side JavaScript, which has access to the DOM and, and the window and all of that stuff. And then you have this kind of third space, which is a service worker. And a service worker is a JavaScript file that is installed, but it doesn't have access to the server. And it doesn't have access to your DOM and the window and stuff like that. It's running in this third space where all it has access to is this thing called self and self is the service worker. And what it can do then is it can it allows itself to run in the background. So if you like let's say you were opened up a website and you entered in a to do item and you closed your phone and put it back in your pocket, well, that little service worker could run in the background while the phones in your pocket and still upload that like it doesn't need user interaction to actually make it work because it can run it can run in the background when you're not actually on the website. And that's how you enable things like push notifications, like Scott says, there's an it'll it has it does have access to this new caching API in the browser, where that's that's how it stores the files offline where it can, I think maybe the most important part of a ServiceWorker is that it allows you to intercept network requests. So if you were to request index dot HTML and dog jpg, the ServiceWorker sits in between your server and the browser and it will intercept that request. And then what you can do is the first time you get that request, you can you can store it in your your browser's cache, and then the next time that you visit it, you can intercept that request, and then just send back that information that index HTML and the dog dot JPG immediately before without having to even touch the server, which is what makes it offline, right. - -30 -00:14:37,949 --> 00:15:07,799 -Scott Tolinski: Yeah. And what's cool about this is you can make sure that this kind of thing is even working if you've installed your ServiceWorker because if you do go into the Network tab, and any of your requests that are coming from a ServiceWorker are going to specifically will they're going to have a little gear next to them, but they're basically going to show you that they're coming from your ServiceWorker and not from the same origin or location that they typically without it. So you could definitely see that all of these are when your requests are being handled or intercepted by the service worker. - -31 -00:15:07,980 --> 00:15:57,899 -Wes Bos: Yeah, I found this to be very tricky to work in. Because what happens is that you write a little bit of client side code that registered the service worker, but then the service worker will cache the code that registers itself. So you get into this like kind of like weird loop where if you update your code for your, your client side code, it won't update itself. But there's there's lots of ways that you can, the dev tools will allow you to bypass a ServiceWorker and fetch from the server as well as you can, you can write some code that will invalidate old caches, as soon as you update your server every time the page loads, what happens is that the client will download the ServiceWorker and check if it's changed at all. And if it has changed at all, then you get what's called an activate hook. And in that activate hook, you're allowed to sort of delete old stuff and then make room for the new stuff. Word. - -32 -00:15:58,020 --> 00:17:38,840 -Scott Tolinski: Yeah, serviceworkers are a big topic. And I think there's something that we could go pretty deep into. But really, at the end of the day, the lesson here is that your app needs to work well offline, and it needs to have some sort of experience, for instance, yep, level up tutorials, you can browse between the sites offline on level up tutorials, but you can't watch the YouTube videos because well, they're on YouTube, you know, you can't watch that that content, but you can interact with the site otherwise, right. So there is definitely something that needs to happen there where your sites are all again, all URLs are loaded offline. So the next one is going to be metadata provided to the with the feature where you add your application to your home screen, or your applications jar or something like this. It's basically a metadata file called a web app manifest basically allows you to define a whole bunch of information for in about your application, such as the name, maybe like a short name, what the icons are about the icons that are going to be used in the app drawer, the general background color, or the theme color is so that your your device, I know iOS and Android probably both do this. They have like adaptive themes for like the status bar and the navigation bar and stuff like that. So if you define your theme color, that way, the the operating system knows how to have that color change and stuff like that. So this is a really simple, it's just a JSON file full of a bunch of information. If you just go to the developers google.com and look at the web app manifest thing, it really just explains everything that needs to be in there. But again, this is just a JSON file with enough information that the browser can understand a little bit about your application. So they want to add it to the homescreen and knows how to treat it. Yeah, - -33 -00:17:39,210 --> 00:18:28,980 -Wes Bos: I should also note that this is not the same thing as an App Cache manifest file. So previously, a couple years ago, there was a proposal, I don't even know if it got merged or not. But you would be able to serve up what's called the App Cache manifest file, and you would tell it, which files to cache and then it would do it all behind the scenes. And that has since been removed and replaced with service workers, because service workers allow you to run JavaScript, and you can do logic in terms of what should get caught cached and not. Whereas an App Cache manifest file, you just gave it like index dot HTML, dog dot jpg, and there wasn't a whole lot of fine grained control over what we have there work. I don't use Android, but often I see screenshots from people where they have your the website can color the top bar of Android. Yes, this is where you would do that. Yeah. - -34 -00:18:29,250 --> 00:18:35,910 -Scott Tolinski: Yeah. Yeah. So you give it a theme color and stuff like that. Yeah. So yeah. So that would that would change the status bar up top there and everything yeah, - -35 -00:18:36,239 --> 00:19:08,670 -Wes Bos: wicked. A couple more that we have here. First, to load fast, even on 3g. So they have some, there's a lot you can do in terms of lazy loading and or only loading critical CSS, making sure that if you're going to run an app, the first download is not 10. Meg's worth of data, the first download is that first pain is really, really quickly. And then if you do need to get additional stuff, you totally can. Or you can, you can also just load things on demand with lazy loading of your scripts and code splitting. - -36 -00:19:08,910 --> 00:20:14,520 -Scott Tolinski: Yeah, and this is good for anyone. Again, just like the HTTPS, even if you're not doing a progressive web app, you want your site to load fast on the 3g, or at least fast enough time to first paint all that stuff. And so again, use your developers tools to throttle your internet, check out the all of that sort of your performance, your your network request, I actually actually shaved I shaved like 500 kilobytes off my my site a couple of days ago, just simply by I just flipped on this this. What is it like format auto on cloudinary. That's all of your images, web PS in browsers that support web P and I shaved like 500 kilobytes off my site with that one little change in and boosted up my score a little bit on this one. So find things that you can cut out there and get your site's loading fast on 3g or slower connections. Next is site work. cross browser as in, you know, all of the modern browsers, Chrome edge Safari, Firefox, again, something you're gonna want to do anyways, right. So a lot of this stuff doesn't necessarily, I don't know it exists outside of the bubble of progressive web apps. - -37 -00:20:14,640 --> 00:22:05,940 -Wes Bos: Next one page transitions don't feel like they block on the network. So transition should feel snappy as you tap around even on a slow network. And this kind of goes along with a couple other ones, which is each page has a URL, and you use the History API. So generally, what this means is that you're not reloading the page, every single time you visit a page, I have some, some apps like this, like the I have, my thermostat is eco B and the web app for it is so slow, and every time you tap, it takes forever to it. First of all, they have like, they don't have that like fast click enabled, where if you touch something, it immediately doesn't immediately it does that, like 300 millisecond timeout, so it feels very like or like very old and to work with it. And then it's just not snappy, it doesn't feel like you can tell that they're using JavaScript to build the app. And that's not it doesn't provide a nice experience. So by using like, like something like react, or view or whatever, generally, the routers have these things come with history, which is html5 push date, meaning that you don't have to reload the entire page every single time that you touch something, what it does is it just changes the URL, and then your application will react to it. And ideally, what will happen is, if there's something on that page, you could you try to preload anything that is big on that page, so that when you do hit that, you have a nice quick little thing or ideally instant, and that's something that next jass does really well, if you have a link, you just put a pre loaded attribute on it. And what it will do is it'll go off and build that page in anticipation that you actually do it. Now I've also seen other people just do like, as soon as you like, hover with, like, it's so cool pixels of that link, then they start to load it, which is great, because they can just just give you that little like, like half a second advantage that just feels so much better. - -38 -00:22:05,970 --> 00:22:54,810 -Scott Tolinski: Yeah, I think that's such a cool idea, too. I know sometimes that you wonder if people just are hovering, hovering, hovering, and then it's loading a bunch of stuff. But I think that's a really cool idea that the like preload on hover thing. Alright. So last one here is that each page has a URL as an individual pages are deep linkable via URLs. So this is mace basically just for sharing things, right? Because if you share something, it needs a unique location. So everything on your site, again, this one shouldn't be too tough. If you're using sort of, I mean, if you're writing single page apps, if you're using routing solution that's common, this should be pretty doable, and pretty easy. But basically, anytime you have a page, you just got to make sure it has a URL per page. Yeah, nothing, nothing crazy there. - -39 -00:22:55,050 --> 00:23:13,140 -Wes Bos: Now, that's something that we're like we're already doing. And that's something that's really nice about web apps versus desktop applications, if you ever need to get specifically somewhere. Or if you have, like, maybe you have like a couple different searches that you want to bookmark, it's super easy to be able to bookmark those things as we have a standard. It's a URL. - -40 -00:23:13,170 --> 00:24:29,460 -Scott Tolinski: Yeah. And it's funny, because when I'm teaching, React Native, that's actually a sticking point in kind of a weird, tough situation. Because you don't think about routing via URLs you think about like screens and transitioning to screens from various events. But you don't have this sort of concept of here's your URL that we're so comfortable with. So because of that the whole routing and navigation thing can seem a little bit weird for people who have never done any sort of native app development or coming straight from web. But yeah, definitely something that is easy to do with our tooling. Now, another thing that will make your life easier. I know, this is actually really bad transition here. But basically, in working with web development, we often run into bugs. And we often unfortunately, run into bugs in production. A lot of times, it's maybe testing that's finding these bugs or even your users. And if these things are happening in production, it can be difficult to figure out what the heck is going on and why. So with Log Rocket, well, it gives you the ability to both reproduce bugs faster and find how they happen. And basically, it makes fixing issues a total dream. So Wes, why don't you talk a little bit about why we like Log Rocket so much. - -41 -00:24:29,490 --> 00:27:24,930 -Wes Bos: Yeah, Log Rocket is I love their website, because it's so simple. Just stop guessing why bugs happen. Log Rocket lets you replay what users do on your site, helping you to reproduce bugs and fix issues faster. And we've all run into this sometimes, if an error happens on your server, and I believe Log Rocket will will track those as well. But it's a really tricky situation where when you're writing JavaScript, you're shipping the software to the user and asking the user to run the code themselves. And that's the usually doesn't happen other than if you're just shipping it like an app, shipping it to users phone. Usually it runs on your own software and the users are using it on your own hardware, right? So I often run into this where somebody will email me and say, I can't buy it. I can't log in. It's broken. Like, Oh, thanks. So, so helpful. I like, like, you don't think especially like web developers, if you don't think that you could like, check the console? Or tell me a little bit? Did you get an error message? Like, why is it not working? What were the steps you're doing? Right? And it's frustrating. And you don't really want to have to ask your customers that. So what Log Rocket will do is it will track what your user did up until that issue, and then it will aggregate all of your issues. And you can see like, Okay, this is specifically happening, like, let me tell you about a bug that I have right now that I could have used this for coupon codes, I have two checkout forms, and I have a credit card checkout form, and I have a PayPal checkout form. And then I have a total that the user can pay at the bottom. And what was happening is sometimes people put the coupon into the credit card form. And then they go, Oh, no, I'll use PayPal, and then they flip over to paypal. And then they don't put the coupon code in, in the PayPal one, but the total has updated because they did on the credit card form such a bizarre sequence of steps to actually happen. And then they would pay for it. And they say, hey, Wes, I didn't get the coupon didn't work, what's going on. And for me to figure out what was happening took maybe 10, people emailing me to finally dig down. And if I had Log Rocket, I could just say, Okay, this specific person was having an issue, I can attach it, you can attach it to specific transactions. And then I could replay what they are actually doing, where they're putting it in the wrong form, and then flipping over to the other one. And then I could go in and fix that bug. They also do. So they do accept exception tracking session replay. And they also do application performance monitoring. So if you want to kind of keep an eye on things that tend to make your website slow, maybe things can degrade over time, check it out at Log rocket.com forward slash syntax and get 14 days free. So you could just test it out, see what it's all about, put it, throw it up on your website, see if you can find it. Because those issues are scary, because you don't necessarily know that you're using it, you're losing users or you're losing money from people not being able to buy it. You just it's hard to tell they might not they might not email you, they probably won't. So thanks so much to Log Rocket for sponsoring. - -42 -00:27:24,930 --> 00:27:55,440 -Scott Tolinski: Awesome. Okay, so now we're gonna get into some of the things that make a exemplary progressive web app. So the other things were sort of the baseline, those are the things you have to have these things you don't necessarily have to have, but are good to have. So for instance, having all of your content being indexed by Google. And now this is again, something you probably should be doing anyways. You're probably familiar with Google Webmaster is a Google Webmaster Tools or Google Web masters. What is this called? - -43 -00:27:55,650 --> 00:28:04,530 -Wes Bos: Google PageSpeed? Or Oh, no. Yeah, yeah. It's Google Webmaster Tools. Yeah. Where you can like see how it's crawling your website and the errors that might pop up. - -44 -00:28:04,560 --> 00:28:36,990 -Scott Tolinski: Yeah. So you'll have a like, sort of a sitemap, an XML sitemap that you submit, you add your property in here, you can see that Google is going to crawl your application absolutely correctly. And if there's any sort of potential issues, or errors, or that sort of thing that Google Webmaster, I guess it may be called, it's called the search council or something like that will help with this. So definitely something you should be doing anyways. Right? I mean, if you want your content to be found, then you probably didn't want to have a sitemap. And you want to have that submitted and indexed by Google, as well as other search engines. - -45 -00:28:37,350 --> 00:29:40,650 -Wes Bos: Next to are something I've been doing for a long time, which is schema.org, metadata and social metadata. So specifically, I make sure that I have all the correct meta tags for Twitter card. So if someone shares it on Twitter, it shows the right thing for when you share something on Facebook ever shared something on Facebook and had a random image pop up, you know, huh, why did it choose that one. And that's generally because the person who's running that website has not set a specific banner or size or infer a description, things like that. So there's a set of like standard ones, which are schema.org. And you can say, like, this isn't a news article. This is a recipe, this is a video. And that will help anyone who's crawling it understand what the content of the page is better. And then there's social media ones, which are specific to Twitter and Facebook, actually, Facebook came up with their own standard and sort of opened it up, which is called Open Graph. And if you set generally if you set Open Graph tags, they will they will work across all the different ones and things like Pinterest that might scrape it well. We'll use those as well. - -46 -00:29:41,010 --> 00:29:47,310 -Scott Tolinski: Where the next is going to be to use I hate saying this word, canonical. I'm gonna Okay, there we go. - -47 -00:29:47,360 --> 00:29:48,110 -Wes Bos: I got a call - -48 -00:29:49,830 --> 00:30:16,830 -Scott Tolinski: in my YouTube video about progressive web apps, and I was like kinda that I just could not get it. So I got it. So this is basically if you have a page that's Similar or a duplicate of another page, and you have multiple routes to that same page or multiple URLs, right? I don't know. Like, I can't think of a reason why I would do this offhand. I don't know if you have something that you've done this for. I know - -49 -00:30:16,830 --> 00:31:07,470 -Wes Bos: WordPress allows you to have different URLs. So you could do like forward slash, like query string p equals 54. And that's like post 54. But then you can also have permalinks in WordPress, like forward slash about Wes. And those two pages are the same pages. And then there's, there's the possibility of Google crawling both of those pages and getting confused or docking you because you have duplicate content. That's a big thing in SEO to make sure that if you ever have a route that might end up at the same place that your your URLs are again, it also if you were to update a URL, and you kept the old one there, you could, okay, yeah, for SEO purposes, yeah, then those will tell it, I've never done them myself, I've only ever used them in WordPress, because when I'm doing my own routes, usually is only way unless you start have some old technical debt. I think that's probably where that comes from. - -50 -00:31:07,739 --> 00:31:30,450 -Scott Tolinski: Word. So basically, what you're going to want to do here is you want to specify a canonical URL with the rel canonical our l canonical. So that way, you would just add those tags to the head of your page. And that would just indicate that, again, this page is canonical, I'm gonna keep saying that. It's embedded in my brain. - -51 -00:31:30,989 --> 00:34:04,080 -Wes Bos: Yes. All right, we're gonna move on to the user experience, ones that we have here, there was another one called the History API in that list, but I covered that earlier. So the user experience, one is basically making the app feel good to the user. And this, the first one is content doesn't jump when the page loads. And this is specifically, this is a pretty big problem in web development. Because super frustrating. One, two, what happens is that your page downloads, and ideally, you have CSS loaded before your content is loaded. And then the CSS will be applied to that. But sometimes the CSS comes after. So you have like that first flicker where the HTML loads and then your CSS is applied. And then maybe your web fonts download, and then they flickers again, because it puts in the new web font. And there's a whole bunch of new stuff around that whole folk flash of unstyled text. And then maybe you have an image that downloads and it's unsure how big the image is going to be, because it doesn't know the width and the height of the image until it downloads the whole thing. So then it, it reloads the page again. And then maybe you're using Flexbox, or CSS Grid, which are they size themselves based on their content. So if you have an image in a CSS Grid, then the size of that grid is going to do could get to get bigger, and then that might trigger three or four more renders and and then you get this sort of like janky website that just re renders six or seven times before you're actually ready to do it. So there's a lot you can do to to fix this. First of all, you can have what's called critical CSS, where you can run some tooling against your webpage and say, like anything within the first thousand pixels high, I grab, extract all the CSS that is needed to render that critical piece of the website. And then they simply just stick that into a style tag on the page so that any other CSS that needs to load later has no effect on that, that initial one. And the same thing goes for images as well. Ideally, what would happen is, sometimes people serve up a blurry version. And this is kind of cool. Sometimes people will save like a 10 pixel by 10 pixel version of an image. And they'll just save it in like a base 64 string. And then you can stretch that thing, and blur that thing to be the size of the image that you hope to, it's a little bit more work because you need to know the width and the height of the image that's coming in, because you have to set width and height attributes on your image tags. But what that will do is it will, it will load the placeholder and it will load a blurry version of that image until the actual full image has been downloaded. - -52 -00:34:04,169 --> 00:35:25,440 -Scott Tolinski: Yeah, one of the that's one of the reasons why I love Gatsby so much is because stuff like that is just baked into that for you. Yeah. Oh, check out it's like the images get Gatsby images component or something. It's actually it has so many options in Gatsby hyphen image. Oh my god, it's so cool. Because one of the things that it does is it gives you the option of how it pre loads and one of those options is like a SVG version of it that like is sort of like posterized almost but yeah, yeah, I can have it fade in the blurry version. And it's one of the coolest things because it just works. It works so easily. And it it like I don't know what in my pro Gatsby course. And let note the plug there for pro Gatsby at level up calm. But in the pro Gatsby course. I think that was definitely like a wild moment. For a lot of people when you just show how easy it is to get that basic blurry image then that's not something that's a lot of fun to do on your own. So, again, this is one of those things that it causes major annoyance issues for your users. And I personally, I just think so many times when you're about to click something, and then something else loads, and then the thing loads immediately, and then you push the wrong thing. And LinkedIn was like King of that just like UI elements just popping in right in front of where you're about to click something. at the last second, I think they've gotten a little bit better. But for us, it's so - -53 -00:35:25,440 --> 00:35:39,150 -Wes Bos: funny that yeah, that's what everyone jokes that the the remember the Hawaii sent like a missile alert to everyone's phone. Come on. Someone joke that that was the issue or like a banner ad loaded in later and they accidentally click the wrong one. - -54 -00:35:39,510 --> 00:36:07,800 -Scott Tolinski: Yeah, so I i personally take care of this on level up by having like an aspect ratio wrapper for a lot of my images, there's a way you can do that with I think it's the aspect ratio, or images, if you know that you just have a percentage on padding bottom for like an image wrapper. Yeah. So that takes care of that nice and easy. But again, yeah, you'll want it's one of those these things that sort of, you'll want to be working on it all the time, just make sure this content doesn't jump in, it will make the experience better for your user. I - -55 -00:36:07,800 --> 00:36:32,960 -Wes Bos: really like that that Gatsby is doing the tools there. Because a lot of the stuff we're talking about today is really nice in theory, but I find it's gonna it's not going to be somebody something everyone will do until it's really easy to actually implement into your existing websites, or if you're building a fresh site. So I think the answer to a lot of the stuff we're talking about is that tooling is getting better. And we'll make a lot of this stuff a breeze. - -56 -00:36:33,000 --> 00:37:05,630 -Scott Tolinski: Yeah, I'm so excited for that. Like, where you don't even have to think about a lot of this stuff, because it's all great. But you know, it could be easier if you just have an image component. At some point, you pass in your URL, and the image component figures out everything it needs to do and does all that nice little loading stuff. So yeah, it could be a really nice feature. And I think they're definitely moving there. Okay, so the next is going to be pressing back from a detail page retained scroll position of the previous page. I don't think we have to do anything to get this to work this way. There's just browsers work that way. Right, unless you're modifying the scroll itself. - -57 -00:37:05,960 --> 00:37:30,630 -Wes Bos: Yeah, I think what happens is this works in the browser by default. But I think if you're using a like something like react, because it announced the component, and then it has to remount, when you press the back button, it doesn't actually have a cache of that like, like the browser might. So most routers, I think react router does this, it will just remember your scroll position. And reinstate that once the component has remounted itself. - -58 -00:37:30,780 --> 00:38:00,630 -Scott Tolinski: Yeah, so nothing crazy. When tapped inputs aren't obscured by the on screen keyboard, aka, when that keyboard pops up on your device, the input and what you're typing into, should be visible. Now typically, again, the devices are going to mostly handle this unless you have things that are CSS that's preventing this from from happening. So again, just something you want to test on your actual device or a emulated device to make sure when that keyboard pops up, that the stuff that you're typing in is actually working in find - -59 -00:38:00,840 --> 00:38:40,650 -Wes Bos: there's a little tasty treat here is that ever, there's a new API in the browser called dot scroll into view. So if you select a div or a input box, you can simply just call dot scroll into view, and it will smooth scroll it into view. So it's very simple. You don't need some scroll libraries anymore. And there's some nice polyfills if you're supporting older browsers that don't have it. What else have we got here? There's a whole bunch. But I want to make sure that we get to some of the more important ones content is easily shareable. No kidding. site is responsive. Got it. Any app install prompts are not used excessively. That is something that people are rallying against is when you visit any website like Reddit on the website, it just like is like usually user webapp. Yeah, - -60 -00:38:42,420 --> 00:38:46,650 -that's called interstitial interstitial. Yeah, that - -61 -00:38:49,230 --> 00:38:53,130 -Scott Tolinski: just the Enter annoying it. That's what it is. Oh, that's not funny. - -62 -00:38:53,150 --> 00:39:05,850 -Wes Bos: Yeah. And then the Add to Homescreen prompt is intercepted. So I guess there's a hook that you can use to when the user installs it, then you can use that to do a whole bunch of caching, - -63 -00:39:06,150 --> 00:39:08,610 -Unknown: then we get into a lot of these performance. We talked about - -64 -00:39:08,610 --> 00:40:00,860 -Wes Bos: that caching, we talked about that. So there with a ServiceWorker, you can cache all of your things on load. That's great, because then when you come back to the web app, it's going to work especially if you have spotty offline. Actually, I watched Jake Archibald has a if you search anything ServiceWorker, the whole front page is just him doing hilarious conference talks. And he said that the issue with offline is not whether you're online or offline, it's when you're in spotty connections where you're kind of in and out or you It says you have four bars and you don't really work. So by always doing cash first, you're going to always load immediately, and then you can try to update that stuff in the background should you need to, and I really like that because it's the worst when you're traveling and you're like spotty here and there and working. Just let me use it and then sync as soon as you do have some data. To work, - -65 -00:40:00,980 --> 00:40:15,980 -Scott Tolinski: yeah, yeah. And a lot of stuff like, Paulo makes that like nice with the optimistic UI sort of stuff. And yeah, there's definitely a lot of a lot of things that are making that easier for us. Okay, so the checklist is pretty much pretty much done for all the important stuff unless you see anything else. - -66 -00:40:15,980 --> 00:40:18,300 -Wes Bos: But I think some push notifications here. But - -67 -00:40:18,330 --> 00:40:45,510 -Scott Tolinski: yeah, I think that's what I wanted to get at would be talking a little bit about before we wrap this up, talk a little bit about the additional sort of device API's that we now have access to, and things on your devices that are going to sort of make these things feel a little bit more native, for instance, I mean, we talked about web RTC, and get user media to access your webcam. And these kind of things, again, are features that well, native apps are allowed to use. - -68 -00:40:45,750 --> 00:41:47,550 -Wes Bos: Yeah, web RTC is a is a really cool one. Because like, get user media lets you access your users webcam and your microphone. But well, web RTC will let you to do web RTC is a is a protocol for transferring data between clients, meaning that you could, right the reason why people like like pretty much everybody is coming out with a Skype competitor right now is because web RTC will allow you to connect from device to device without a server in the middle, there's still a little bit you still have to have what's called a I think a TURN server where they handshake between the two like they both need to know their IP address. And if they're on different routers, but that's really exciting. Because then you'll be able to send, you can really send anything, and not just video or data, I believe. What's it called web torrent is built on web RTC mean that you can send just packet data, data, anyone and that's, that's really cool, because that's like a whole network layer of being able to communicate without having the server in between. - -69 -00:41:47,670 --> 00:42:07,440 -Scott Tolinski: Yeah. And again, on the same long lines of things that use on your device. I can we briefly mentioned push notifications, a push notifications, for better or for worse, can be super handy on an application, they can also be very annoying. But push notifications, having that access to us that sort of stuff. Could again, it's going to make your application feel more like a real app. Yeah, - -70 -00:42:07,460 --> 00:42:57,650 -Wes Bos: it's and I the push notifications is a funny one. Because like some people love them and have them on like my wife has them on anytime anything happens on Instagram, she gets a push notification. And I have pretty much every single push notification turned on likewise, yeah, except for email. But I will often just turn off all my push notifications. And it's just a better way to live your life I think. But I don't know, it's, it's a necessary thing that we have. It's like anything marketers are going to abuse these new technologies. So you kind of have to get your users like you have to get their permission, and you have to have them trust your application before you hit them up with a push notification. Otherwise, you're gonna block it. And it's very hard to unblock to communicate to the user how to unblock push notifications, because the settings are often buried really deeply. - -71 -00:42:57,690 --> 00:43:05,820 -Scott Tolinski: Yeah, the application that I clicked block on the fastest was Facebook, just like No thanks. No, no way. Do not want. - -72 -00:43:07,290 --> 00:43:09,710 -Wes Bos: Should we take a quick break for Freshbooks? - -73 -00:43:09,980 --> 00:43:40,110 -Scott Tolinski: Yeah, Gus, speaking of things that aren't annoying. No, but uh, basically, a tool that Wes and I both really love to use for our personal accounting. I've done so many segues into fresh books. Now I don't have any left. But fresh books is really just an excellent, excellent, excellent cloud accounting software. And many of us as freelancers, web developers, they work in a small company or a larger company. Things like fresh books just make our lives so much better. Because of just how well they work. - -74 -00:43:40,290 --> 00:44:53,520 -Wes Bos: Yeah, like, on Friday, a couple days ago, Scott and I were for some reason almost. We sold so many sponsors spots for syntax, I think we had like four or five people finalizing some deals that we've we've made for sponsoring the podcast, which are really excited about, and all of the invoices for those go through Freshbooks. And it's fantastic. Because what I had to do is Scott said, Oh, have they paid have they paid Have they not paid, I just looked at my list of invoices. And you can see the status of all of the invoices. You can you can send like you can bug them if they haven't paid you can say it's overdue, you can have Freshbooks send the you are overdue email, so it's not coming from you but it's coming from the robot that is fresh books. And it's just a really great way I hate spending time on the stuff I've talked about this in the past I have an assistant who does most of it for me. And it's just a nice way to take yourself out of that busy work and let us focus on things that are important building courses and recording this podcast. So head to freshbooks.com for slash syntax for a 30 day unrestricted free trial of fresh books and use we use syntax in the How did you hear about a section when you're signing up because that makes fresh books keep coming back for more nice, - -75 -00:44:53,760 --> 00:45:03,750 -Scott Tolinski: yeah, love fresh books, and they've been a longtime sponsor for us so far, so definitely really appreciate them. You know, believing in us at the beginning, the beginning of all of it. - -76 -00:45:04,260 --> 00:45:10,800 -Wes Bos: Yeah. Now, now we hear speaking of great. That's awesome. - -77 -00:45:10,860 --> 00:45:52,380 -Scott Tolinski: Okay, so a couple more things, again, just accessing two more device things like the year accelerometer and GPS access. Again, these things are things that you're seeing in applications used more and more, you know, things like a GPS access is going to be really nice. And some applications like maybe it's a realtor's website, and you're looking for things in my area. And you can just say, hey, let's find stuff in my area. So having access to get into these device, these devices, what are they called sensor device API's, device API's and sensors? Yeah, it's just makes our lives cooler. Because we can do cooler stuff with it. We don't have to implement a bunch of code to check these things, we get access to the data right from the device itself. - -78 -00:45:52,530 --> 00:46:41,370 -Wes Bos: Yeah, a couple other API's that we have are the payment request API, this is really exciting. Because what happens is that you store your card in Chrome, or you store your card on your phone, and then you want to pay for something, you can use your thumbprint or your face ID or whatever it is, and then it will then what that does is it gives you a token, you can then take that token to stripe or something and then cash it in for real money. That's really exciting. Because that's one thing that that real apps have like I love not having to love ordering Uber or Uber Eats or paying for something on my phone. And then it's like, oh, just press your thumb down instead of having to like go find your credit card and type this like long ass number in and it haven't not work. So I'm really excited about Payment Request API. And I believe that it is in all of the latest browsers now. dope. - -79 -00:46:41,400 --> 00:46:47,190 -Scott Tolinski: Yeah, definitely one of the cooler ones to come in. lately. I know we've actually mentioned it a few times on the show already. - -80 -00:46:47,400 --> 00:48:12,090 -Wes Bos: Big fan, big fan. What other ones do we have here? One mug? Grab a couple more? Yeah, sure. So also, like there's a couple other API's in the browser that allow us to store stuff because we talked about serviceworkers that allow us to to run code. In the background, we talked about the cache API, which allows us to store to cash assets, JavaScript, images, HTML, you name it. But we have a couple other things. We have local storage, which is just a key value store for kind of like a mini database. If you ever wanted to store things like I often will store playback rate for or like if you go to the syntax website, and you listen to a podcast, and then you come back later, it will reinstate where you left off. And that is stored in local storage, because like you don't have an account really, to store that data in for syntax, but you can store it in the browser. And then it will remember the downside to local storage. This is just key value. And it's just a string. So if you want to store an object, you got a JSON string a file, if you want to store numbers, you need to make sure that you parse that back into a number from a string. So it it does the job in most cases. But if you ever need like a a better full blown database solution in the browser, there is a another one called index dB. And this is actually not something I've ever used myself, but it is a full blown database solution that you can use right in the browser. Have you ever used index DB before? - -81 -00:48:12,120 --> 00:48:32,250 -Scott Tolinski: No, I haven't. No, no, but it I mean, it looks really cool. But so for me, my local storage needs are pretty much met with a Apollo in the persistent cache plugin. Yeah. Which basically just stores your queries into local storage, and then you don't even think about it. But yeah, no, I haven't used this yet. I mean, it looks pretty cool, though. - -82 -00:48:32,790 --> 00:50:32,310 -Wes Bos: Yeah. And then there was one more here, oh, Storage Manager. So one thing I was even thinking about is, I use Vimeo to play my videos on my course platform. But then if someone wants to watch them on the train, they have to download them. And then and then sort of manage like a file, a folder of video files themselves, right. And what I would like is that someone could visit the website, download all of the files to the browser, and then they could just visit it on offline mode. And then it would just it would cut over from Vimeo to the videos that they've downloaded into the browser. But like each course I have is like a gig or two. So I was just like, looking into like, what are the limitations of that. And it seems to differ from from one to another. And I think you can also like you can allow a website to have more information in it. But there's this new Storage Manager API, which it doesn't store any data for you. But between the caching API service workers, local storage, index dB, all of these things take up space on your your user's computer. So Storage Manager will tell you how much space you have used and how much is available on that device. I was just looking into it on the docks, and it says a numeric and numeric value, which provides a conservative approximation of the total storage the user's device or computer has available for the site origin or web app. It doesn't tell you what that is. I think it's bytes because I ran it on my computer and it said had 66 gigs? My computer has 500 but it says it's conservative. Ah, but nowhere in the docs does it say what it's measured in, and that the example they have is just a percentage you have 12% left. And so it's pretty new. I don't even know if it's a when it's in Firefox, Chrome and Opera right now. So I think it's one of these things that is, is on the cutting edge. But I would love love love to have my course viewer totally offline. So you can go on a train or a plane and and not have to use Wi Fi for it. - -83 -00:50:32,340 --> 00:50:45,180 -Scott Tolinski: Yeah, I think my limitation on that might be you do? I think that might be the limitations. I'm using YouTube's embeds. Yeah. Can you download a YouTube video and watch later without paying Yeah, to bread, or you can't - -84 -00:50:45,180 --> 00:51:28,680 -Wes Bos: buy, like Netflix does it for kids. Or you can go on your phone, you can queue up some My kids love a pop patrol, little baby bump. So we often but they expire after like a month of having them on your phone. And what always happens is that you open your phone up when they're freaking out. And you're like, like, just take the phone in and handle it right. And then and then it's like, oh, this cache has expired. And I'm like, Damn, yeah, Netflix. So I don't know, maybe hopefully YouTube will will come around to that. Because like Google's touting all of this offline first stuff, and some of their biggest products don't follow. Yeah, any of these. Yeah, but that's often like legal and advertising. - -85 -00:51:29,070 --> 00:51:40,830 -Scott Tolinski: Yeah, I mean, they just have so many. They like really something new all the time. Like, doesn't matter. Do they already have a music app? Sure. Let's do another music app. Another how many chat apps can we do? Let's just keep making chat apps? Yeah. - -86 -00:51:42,000 --> 00:52:05,700 -Wes Bos: Hilarious. Oh, there's also a battery vibration API. No battery API was pulled back because marketers ruined it. They were using it to fingerprint you. Yeah, it means that like they could tell I think we talked about this in the past, but they could. If your battery's at 30% in your IP addresses in a certain area, and then you visited another store, and you open up your phone, they can like they can fingerprint you based on like, yeah, try to Yeah, guess what you're doing? - -87 -00:52:05,790 --> 00:52:33,510 -Scott Tolinski: Yeah, some of this stuff is pretty cool. Because of the ways that he you know, the creative ways that you could use these things in your application. Maybe for like low battery users? Is this still a thing? If you're using like an OLED screen, you would be staring up like black non pixels, red pixels. There's just some really cool ideas there. I actually don't know if that would actually be a legitimate way to help save someone their battery, but potentially, maybe Who knows? kind of neat. Yeah, either way. - -88 -00:52:33,960 --> 00:52:34,650 -Wes Bos: Don't ruin it. - -89 -00:52:34,680 --> 00:52:41,610 -Scott Tolinski: Yeah, right. You could do a lot of creative things with this stuff. And you don't have to use it all for practical reasons. Totally. - -90 -00:52:41,700 --> 00:52:44,040 -Wes Bos: Any anything, anything else you got for this or - -91 -00:52:44,460 --> 00:53:21,120 -Scott Tolinski: I don't know, I think that's pretty much it. Again, a lot of these things, you'll want to check out this checklist and, and take care of the the baseline things. We didn't even talk about the lighthouse girl or the audits tab, which is basically the way to check your application for a lot of this stuff. It's sort of like a PageSpeed sort of system where it audits your site. And they'll give you a report, it will give you things to fix. And it will give you links to tell you how to fix them. This is called lighthouse, there's a website for it, there's a Chrome extension for it. And in Chrome Dev Tools, under more tools, there's a tab called audits that will take care of this for you as well. It's cool, - -92 -00:53:21,120 --> 00:53:52,680 -Wes Bos: I need to I'm gonna run that on a couple of my sites. I haven't built a whole lot of progressive web apps. But I think what we need to do is not look at it like I'm building an app, but how can I add these helpful things to my existing and maybe just a website, right? Like I'm going through all of these and I know that my course platform could probably use about half of them to make to make the viewing experience nicer and to make the buying experience better, which will mean that I make more money, right? Yeah, more money. More money. Mo Money, Mo Money, Mo Problems. - -93 -00:53:55,260 --> 00:53:56,370 -Scott Tolinski: That song goes right. - -94 -00:53:56,760 --> 00:54:01,170 -Wes Bos: Something like that. Anyways, I got a sick pic for me today. - -95 -00:54:01,200 --> 00:55:47,010 -Scott Tolinski: Yes, I got a sick neck. This is one of my favorite apps. Speaking of web app, so I don't know if this is a progressive web app or not. I've never checked I don't think it is. But one of my favorite web apps is called my noise dotnet. And my noise dotnet is a noise making application. No typically these things have like, you know rain noise and wind noise and stuff like that, or white noise. This one is using like sound generator. So this thing is really awesome. Because instead of just being like a simple looping audio file or something like that, it is very interesting, how he how he makes these. It's definitely they're more much more complex sounds he uses like audio synthesis and a whole bunch of stuff to make these sounds. But there is in sort of an amazing amount of different sounds that are like non repeating and just super good. One of my favorite ones is airplane, the cabin noise. I use that I've actually used that on an airplane. Because I don't want to hear like other people's conversations and stuff like that. But I can use the airplane cabin noise and get that same sort of thing. They'll just put you to sleep. I love a lot of these noises as well. This for a long time has been an iOS only app, there was the web app. And then there was the iOS app. Well, there is an Android app for now. And I'm so excited to use it. Because I was using some crappy one. And this is like the sort of gold standard for noise making applications in my opinion. And if you're interested, definitely like click some of their affiliate links or donate I've donated to them a couple of times, because he he does this all for free. And this application is seriously amazing. follow him on Twitter and all this stuff. Mind noise dotnet, one of my favorite favorite noise making services. Wow, - -96 -00:55:47,040 --> 00:56:05,490 -Wes Bos: that's why good, what you got my sick pick is going to be very summer ready. And it's more of a general so I really we've talked about this many times in the past, but I'm obsessed with the drinkware. Right? Whether it's we've talked about the big bottles, what do you have the Bo TTL the bottle? Oh, yeah. - -97 -00:56:05,490 --> 00:56:06,420 -Scott Tolinski: And it's big. - -98 -00:56:06,540 --> 00:56:20,970 -Wes Bos: To me. There's, it's like, a little bit bigger than mine. It's funny somebody somebody said on Twitter the other day that one of the biggest challenges of being self employed is making sure that you're hydrated. And I'm like, that's the opposite. Yeah, I just drink so much water all day long. And - -99 -00:56:21,030 --> 00:56:23,070 -Scott Tolinski: yeah, the worst, it's distracting. - -100 -00:56:24,150 --> 00:57:31,590 -Wes Bos: Anyways, um, so I've got I have a bunch of Yeti stuff. I've got some of the Yeti low ball cups of coffee and I've got the huge Yeti Rambler that you can you can put like two liters of water in I've got a whole bunch of it and I love the Yeti stuff, but it's it's so overpriced and what's not so overpriced, but you pay a premium for the actual Yeti and to look like a cool person. But if you're if you're just like need like actually like decent cooler wear or drink where a Walmart has Ozark Trail stuff, and the Ozark Trail stuff is actually really really good quality. So I have a couple of they're kind of like insulated thermos mugs, I've got one of the backpack coolers that keeps ice for like, a kept ice for like a day, which is amazing. They sell like kind of a Yeti version of their bear proof, cooler as well. So if you're looking into high performance drinkware and coolers this summer, I would say pick pick some some of the Ozark Trail stuff. They definitely do a good job. I think it's I think it's a Walmart brand. I've never seen anywhere else. I've actually bought it all in the States because the haven't found a lot of it in Canada. Nice. - -101 -00:57:31,740 --> 00:57:33,240 -Scott Tolinski: Nice little summer. Ready? - -102 -00:57:33,480 --> 00:57:37,830 -Wes Bos: Yes. Summer ready. Any shameless plugs? Yeah, no, I - -103 -00:57:37,830 --> 00:58:32,400 -Scott Tolinski: just want to plug my latest react level to react course we cover all sorts of really awesome react topics. And one of my favorite things about this course is diving into an animation library called react spring. You can think of it like react motion, but a little bit easier to comprehend, that sort of has the same sort of idea you're interpolating. It's all physics based. And we're doing some really cool stuff where you're dragging and moving divs. And these things are responding based on how you're dragging. And we're interpolating all sorts of different animations. So it's really, really cool. We end up building like the sort of Tinder style interface where you know, you drag to the left, and the thing rotates and fades out. And it's all super, super performant and physics based. So if you're interested in learning about that kind of thing, along with a whole bunch more of intermediate react topics, check out check out level to react over at level up tutorials, comm forward slash store or become a levelup pro to get access to all of that and more. - -104 -00:58:32,550 --> 00:59:01,560 -Wes Bos: Well, again, I'm just gonna plug my Wes bos.com forward slash courses. I have too many courses to specifically pick one now but if you're looking to get better at JavaScript, React s six s seven Yes, alias. I think s nine. I'm not sure I updated it recently with all of the newest async await stuff. To learn to learn react. I've got a bunch of free courses CSS Grid JavaScript 30. So if you're looking to learn something in the next couple of weeks, or whatever, check out Wes Bos comm forward slash courses. - -105 -00:59:01,730 --> 00:59:25,050 -Scott Tolinski: Awesome. Well, that's it. I hope you have a better understanding of progressive web apps, how you can get going on them. If anything, is unclear, check out that checklist. Because seriously, there's basically here's the problem, here's how to fix it. And here's some links, take some links, get out of here, that kind of thing. So check out that checklist. And it'll solve a lot of your questions. If you have any additional ones after this episode. - -106 -00:59:25,050 --> 00:59:28,770 -Wes Bos: We're good. All right. We'll see you tomorrow or not tomorrow. We'll see you next week. - -107 -00:59:29,480 --> 00:59:43,320 -Scott Tolinski: See you tomorrow bases. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax51.srt b/transcripts/Syntax51.srt deleted file mode 100644 index 49ccdc741..000000000 --- a/transcripts/Syntax51.srt +++ /dev/null @@ -1,124 +0,0 @@ -1 -00:00:01,319 --> 00:02:24,900 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. Welcome to syntax. In this episode, we are going to be talking all about our workflows and all kinds of ways we're going to be talking about our design workflows are designed to development workflows are sort of how we use Git in our projects, how we even deploy and really just work on our sites what the process is that both Wes and I use as sort of in a project a project basis. So as always, with me is Wes Bos. Say what's up. Hello, everybody. Hope you're doing well. Yeah. So this episode is sponsored by coffee cup software, CSS Grid building tool, which is a brilliant tool that allows you to both design and develop CSS Grid based layouts and a really brilliant visual editor, as well as view School, which is going to be a new course on view, which is going to really level up your view skills. So check it out. We'll get into both of those a little bit more as the episode goes on. So how are you doing was how's it going today? I'm doing fantastic. I just got back from Dayton, Ohio, in which I had a company down there called spark box. They're pretty cool company. But they actually designed the original code pen layout, which I thought was pretty nifty but they brought me in to do a workshop on kind of like just like web apps in JavaScript in general. So we did a full day workshop on promises a sink await modules, we used parcel bundler, by the way I'm absolutely in love with parcel Yeah, I'm so good. I'm working on a course right now for electron and I'm using parcel for that. And it just like everything in parcel. I'm just a huge fan. I use it all the time. Yeah, I can't believe how how how much of a joy it is. I find that the docks aren't great, but you mostly don't don't need the docks. Yeah, we did that. And then we also did serviceworkers we built this like photobooth application where we like lazy loaded and code splitted and what else would we do with it? We made it offline with service workers. And it was just a lot of fun. Met a whole bunch of really cool people got to hang out in Ohio where I rented a pretty pretty sick Jeep drive down there. I saw the Jeep - -2 -00:02:26,100 --> 00:02:46,890 -play fan. Yeah, I wanted to like drive it on something and Sarah flex in it, but I couldn't find any like mountains or I was gonna you know, you know, Target has those big red balls soon. I wanted to drive it onto one of those. But locally, one of those balls broke loose and rolled into a car and just Oh, just nailed it. So I don't want to kill anyone. Yeah, that's rough. - -3 -00:02:47,940 --> 00:03:20,460 -Anyways, how you doing? I'm doing all right, actually, it's funny. There's this target, in Colorado, in Denver here that has this giant rock on a corner and it's like a corner that people end up like miscalculating all the time. And maybe if they would have had your Jeep they would be fine. But there's like it has its own like Twitter account where people post photos of cars stuck up on the rock because they undercut it the rock underneath the car and then they have to get towed. Because there's no way to get off of it. It happens all the time. It's hilarious. That's a nightmare. nightmare. Yeah. - -4 -00:03:22,230 --> 00:04:59,970 -Today, we are going to be talking about workflows. Often, Scott and myself, we get a lot of questions about like, what's your process for starting a design? What's your process for taking design to development? What's your deployment process look like her? What's your workflow look like? What's your Git workflow look like? So we're going to rattle through a bunch of common workflows for design designed to dev get deployment and then anything else that we can think of, and just say like what our workflow currently looks like, and hopefully he again, a thing or two from it. Yeah, cool. So I do want to get into it. First you want to talk about, we can start at the very beginning sort of the design process, let's kick it off with the design workflow. So the first thing that I do is, is when I want to build something, well, as I get, I just take that back, it's not necessarily always the first thing that I do. But anytime that I'm going to put out a production website that's client facing, most likely one of my course websites, or one of the applications that we build in one of my courses, a big part of that is is designing the actual application. So I'm going to sort of detail what my process looks like and what my workflow looks like to do that. So first of all, I don't design in code. A lot of people ask me that like, Oh, do you Why don't you just like do your design in CSS and I find that I'm not as fast if I were to do it just in CSS and I also find that I don't have the the flexibility that I would want to be able to quickly move something or quickly group something there quickly make a reusable symbol and want to use the design program. I feel like the stuff that I make is much better because I'm not restricted by what I know is possible in CSS and - -5 -00:05:00,000 --> 00:06:59,280 -That's often the case with designers where a designer who doesn't know how to code will often make something and first reaction from developers can't do that. And don't you know what we can do? But that's almost a good thing, I think, because it really forces you, as a developer to stretch yourself and to think about creative solutions of how to implement specific things. Yeah, it's one of those things that like, I think it would be great if it could happen more for everyone. Because I remember, there was one of these layouts that I was given at Ford. And I just remember when I first saw, it was just like, you can't do this stuff. And I found the most creative solution to it. It was like, I just remember, like, sort of just really impressing myself with the creative solution I found for it. And I, when I first looked at, I was like, I can't do this. And then by the end of it, I was like, I am the best because I figured out this crazy slash this, you know, but it's a huge, huge booster. Yeah, totally. So what I do generally, when I approach a new design, I always have sort of a look and feel for for every single product and course and thing that I build. And usually those come from inspiration from any really anything, what's going on, like, for example, the syntax kind of look and feel of both the logo and the website, a lot of that comes from a cover CDR from band called boys night out. So if you so if you Google Voice, handout, train rack, and you find the the album art for that specific band, you'll see that like a lot of the syntax logos is heavily inspired by that. That's also where a lot of my love for that specific yellow that I've used in almost everything I ever do, has come from. And then I just have like a lot of like, kind of inspiration always saved, whether it's screenshots in on my phone, or I see stuff that I like, or whether it's just kind of a feeling that I've been really wanting to do something with like, like palm trees lately. So watch out for that, that'd be kind of cool. And then once I have the sort of the look and the feel and the layout that I like, I'll usually open up like a moleskin or a moleskin. - -6 -00:07:01,410 --> 00:10:00,000 -And sketch out the layout in pencil just to kind of get my ideas on paper. I'm very bad at sketching. I often see pictures of people sketching out these amazing like wireframes, and they look so good. And minus like basically like did a chicken try to draw a circle on the thing. But it's important for me to get it out on a pencil. And then what I do is I jump into my editing program. So currently my editing program is sketch I use Photoshop for many years. And I'll just say that sometimes people think like, oh, you're a Photoshop designer, or you're you're a sketch designer, and I don't think it really matters all that much which program you use. I'm just on sketch because I've been on it for a couple years. I'm really happy with my my layout workflow. It does most things that I want. So I'm pretty happy with sketch but I've heard really good things both about I think Scott use figma. Adobe has their own product called was Adobe XD Yeah. Which I've heard awesome things about it, have you? Yeah, I've used it a little bit. There's some cool stuff like this, like iterators thing where you can like iterate, like, let's say you're building like a grid, you would design like one component, and then you just sort of drag it and it would like automatically duplicate it. So there's some like, there's some neat stuff in it. I ultimately don't use it, because I don't use any Adobe products, really. And yeah, I'm a big fan of figma. I'll talk a little bit more about that when I get to it. But there's also like the Envision studio which is an early release still framer, there's a whole bunch of stuff now a whole bunch of different these new school design applications. Yeah, it's funny how how quickly I will mourn the one thing that I'm losing in all of this is I'm losing a lot of my like raster based layouts of you can still do raster in sketch, but it doesn't work as well. And I like if you know my my design, look and feel I love texture and patterns. And and that's almost always raster based. I had a huge library of brushes and actions from Photoshop that I've had to say goodbye to when I moved over to sketch, but I'm pretty, pretty happy in how sketch is working out for me. Anyways, once I've got the kind of the the layout done in sketch, what I do is I go back and start to refine what the look and feel is it so I'll spend a lot of time on colors. I'll spend a lot of time on typography, different patterns, different textures, refining the overall layout, things that overlap. And I won't design the entire website in sketch, what I'll do is I'll just make sure that I'm happy with those main things, which is rough layout colors type pattern. And once you have that down, Pat, I feel like I can extrapolate that look and feel to the rest of the website. And at that point, I start to move myself into actually writing some CSS. So I will often jump out I would say I jump out of the program early but not until I have look and feel colors, textures typographic down pat. So that's my design workflow there. What about you? Yeah, well, it's quite a bit different specifically because I don't end up designing that many layouts, right? You do a new one with each one of your course client work or that sort of stuff. - -7 -00:10:00,000 --> 00:15:00,000 -I pretty much have one sort of living project, which is level up tutorials. And that's the primary thing that I've worked on design wise, I have a, you know, freelance project here and there that I designed. But for the most part, I'm working with a designer, because that's not necessarily my specialty, right? So the level up tutorials, design has been existing since like 2012. So even though I've started over a couple of times, the whole thing is always had been based off of like a certain starting point. And in that regard, my design style is designing through iteration. I'm not like a talented designer. So it has to be refined, and then refined and then refined. And every year, I look back at last year's iteration of this site, and I just go, oh, if I was really bad at this, and I still look at it, I'm like, okay, there's a lot of things that could be better. But you know, I'm, I'm getting better as I do it, right. So the design aspects of the site are just something that I've worked on. And I've worked on, and I've worked on over and over again, until it starts to actually fit my taste, right, because I have that common problem where you have good taste, but you don't have good execution. So I'm working to get better at that execution. Now, one of the things that's helped me do this, since I've designed most of this site in browser, I would say 99% of it designed in browser, one of the things that's helped me lately is to actually go backwards and move this into an actual design application of which I use figma. Because a figma is superior like component based system. So we're sketch has things like symbols and stuff like that, look, figmas component system sort of blows it out of the water. And it like really, mirrors react in a lot more ways. So the components are way more flexible in figma. And that's the reason why I use it. So I've like rebuilt my entire styled components library that I have, like I've rebuilt the entire style components library, sort of one to one inside of figma. That way, I can grab and drag elements. What's cool about this is that I have published a team library. So if I add anyone on to level up tutorials, team, the there's this whole team library thing, and like figma has this really awesome organizational will have like headings, and then it'll have all of your headings named in the visual and you just drag them and drop them. It's more like a it's more like a it's like a library like a storybook kind of style thing where you can click through them and see everything a little bit better than the like sketches symbol system. It's way better for like organization, but either way, so I have this whole system now that I build sort of one to one instance components that allows me to sort of iterate on some of these design ideas really quickly and see them and layouts across this whole thing using this sort of automatic refreshing component system. And I've taken ideas from atomic design, I don't necessarily follow one to one ya know, atomic design is the book by Brad frost where he sort of outlines this component based system of having like atoms and molecules and different types of things to describe different smaller and smaller chunks of your website. But either way, my whole design layout is like again, its its goal is to be one to one and figma with everything flexible so I can try it out in different layouts. And again, I partake in a little bit of light theft, for instance, like the footer of the website was designed sort of to look like Pitchfork coms footer, not like totally one to one. I don't even know if it is still the same anymore. I think pitchforks got undergone a redesign since then. Yeah, it actually follows it a little bit. But basically I you know, I've if you look at Pitchfork, kamioka level up tutorials footer, you'll be able to see some similarities, they're not exactly the same anymore. But so I partake in a little bit of light borrowing here and there. For instance, the new animation I have, when you hover over any of my tutorial playlist, it does sort of like dip and grow thing, I saw something kind of similar on a Patagonia sort of one off website that was like really well designed. And I just really loved the sort of depth that their animation gave. So I kind of borrowed some ideas about this, like sort of dipping, rolling sort of animation and built my thing around there. So I definitely am constantly looking for those inspiration targets, and saving URLs, saving photos, that sort of thing. And many of that stuff never ends up making it into anything actual production. But sometimes something grabs me so much. I'm like, Alright, I gotta figure out a way to, you know, be inspired from this in the site. It's cool. I just reminds me, we should totally do a website on design systems. I haven't worked on a whole ladder. I've worked on a handful of them in the past, but that seems to be like the new hotness right now. And the company that I talked to this past week, they say that a lot of spark boxes, a lot of their work is doing design systems where you do things like you design the typeface and what a card looks like and iconography of the website and different colors and like all the stuff that goes into it and Brad frost atomic design is all part of that and I think it's really interesting especially when you have a company that is so large that you cannot like for me I can just design some - -8 -00:15:00,000 --> 00:19:59,970 -And it'll stay consistent across the board. Whereas like, you have like a company like Salesforce, I think, who's What was her name? I think Gina from Salesforce, I listened. I met her at a conference once. And she just made this like thing for Salesforce design system where there was something like Salesforce has something like 14 million employees or something incredible like that. And they have like, something like 30 million different web properties that all needs to look the same. And design system is how you save that. So we add a card, and we'll do a show on that at some point, we should, because my talk in Romania just recently was basically on design systems. Oh, really? Yeah, it was about component based development and design systems and sort of the intersection there. So yeah, I have a lot to say on that topic, I have a lot of good resources to share. So hey, maybe we can make it the next one. Sweet. If you want to hear it, tweet us at cindex FM, and we'll make it happen word. Let's move on to design to dev workflow. So once you have the design down, Pat, or once you have enough of the way in my case, what does it look like to take a design and build it into each month, I were being very simplistic here where in the olden days, what would happen is you would design something, and then you would hand it off to developer, the developer would work on it. And then they would hand it off and stuff is a lot more free flowing right now. But what I'm saying for this is, this is how I approach something that is brand new. If I have a brand new course website that needs to be designed, I'll do that first initial discovery phase in sketch. And then once I'm happy with it, I'll move over to my design, move over to my dev workflow. And first thing that I'll do there is set up my tooling that needs to happen. So really, depending on what tech I'm specifically using, if I'm if it's a react project, I'll probably reach for styled components. If it's just a typical server rendered website or WordPress website, I'll search I'll reach for stylist or sass in either something like a web pack or parcel or just a regular golf, I still have lots of projects that are running on on Gulp task runner just because I thought that that was it's not the best for JavaScript applications. But if you've just got one sass file or a couple sass files that need to be spit out into one or a couple CSS files, I still think that it's one of the best and easiest ways to get up and running with that, then what I'll do is I'll move over to setting up my type. So I'll take any fonts that I have that aren't specifically one of my little dirty little secrets is that I'll often buy a font off of something like creative market. And these font authors will often not give you a web ready font, you have to make sure that you buy the license for a web ready font, but you you have to convert it yourself. And for that, I'll usually use a website like font squirrel. There's also a tool I use for a while called, I think it was called font prep. Let's see if that's still a website. Font PrEP is no longer being maintained and has been superseded by font plop. Okay, here we go spot flop by it looks like it's like a desktop app that you drag and drop it. I hardly ever do do this because like, I don't know how many times I need to convert a font maybe a couple times a year. So I'll usually go to font squirrel and, and convert that over. Once I have all my type setup. I'll go in and start to usually have like a variables file where I'll keep all of my specific yellows and greens and blues and different colors that I'll use for that. I'll create different partials that I use often with my course website all share partials amongst the site. So generally it's a not sharing any of the design. But there's a lot of layout stuff in my courses, like how do I lay out the videos? Or how do I lay out the reviews? Or how do I lay out the different sections, a lot of the kind of the layout with whether it's great or Flexbox, or floats, a lot of that stuff stays the same. So I'll share that amongst my projects. And then I'll sort of like just like add a layer of paint on top to make it look different from from every site to every site, I'll import resets all that good stuff. And once you have all of those in place, what I'll do is I'll try to do as much HTML as possible before styling. So this is one thing that I saw when I was teaching in person, people will get really frustrated with trying to start design something and it was because that they were not creating all of their HTML first. So what I'll do is I'll try to get all of the HTML as much as the HTML as possible on the page. So my unordered list for a list of videos, all the images, videos that are coming in paragraph tags and different sections and intersections and all that good stuff. And it will pretty much just be black and white. And then once I have that sort of like base, that big piece of granite, I can start to chisel away at it with with CSS. So that's one of my recommendations for people who get frustrated with bouncing back and forth. Just try to do as much of your HTML first, then go into your CSS and then I'll sort of take two or three passes on this the first pass I'll do just lay out stuff - -9 -00:20:00,000 --> 00:25:00,000 -So getting things to go where I want them to go. And then with each subsequent pass, it gets a little bit more fine grain, I spent a little bit more time on the fit and finish of it. And then over time, it goes from very rough layout to very detailed luck. And that's another tip I give people who are starting to get into this stuff is don't sweat the little stuff up front. Because when you're trying to do like, large scale layout, and fuss over small little typography changes at the same time, it's, it's really frustrating. So first, the little details at the very last, whereas the very first look at the very, very broad and basic stuff. Yeah, and that has to do with like, batching. I mean, we don't, we haven't really talked about batching very much. But then there's a whole process of getting things done that involve batching, where you group similar tasks together to stay more efficient, because when you get like really in line with doing one kind of thing, your brain is in that mode. So it's more efficient for you to even do that. Because we're bouncing back and forth between writing structure and writing style and writing structured writing style, you're changing your sort of context all the time. So I mean, I do that all the time, I'll even if I'm doing JavaScript stuff, I'll just do up the structure first, then I'll do the interactivity, then I'll do the styling or the other, you know, do the structure than the styling meant and interactivity, but like batching, those tasks together can really help you be more efficient overall. Totally, that's such a good tip. And I would definitely try to put that in place if you're new to this stuff. In terms of tooling, I'll use either something like browser sync, which browser sync is one of those tools that I absolutely love it, it does a number of things. First, it just watches your file system, it'll spin up a little development server, it will auto reload your CSS, when it changes without having to refresh the page, it will give you a local local host server, I'll give you a local IP. So you can bring it up on your phone, if you're on the same Wi Fi network, it'll give you local tunnel. So if you want to send a link to somebody else, it will sync click. So if you had a website, open up on like, eight different web websites, and you could use browser sync to sync the scrolling on each one. So big fan of using browser sync, or a lot of react applications have this built in where you do the hot reloading immediately for you partial has it built in for CSS and JavaScript. And then like the final, I guess the final thing, once I've have all that set up is obviously build the thing. And then I'll finish things off with testing it across different browsers and different devices. And what I'll often do is I'll open it up to like a chat room, if it's a course I'll open up the course website and the actual course to 50 people or so. And then by in turn for them getting early access, they'll just like tons of eyes on it, being able to find things like spelling mistakes, or weird issues on two versions old of Safari or on a weird Android phone, then you'll be able to really get in on it. And that's I love having being able to just like set loose the hounds on a website, because they find absolutely every little quirk of a website. Yeah. Nice. Yeah, that's my dev workflow. Oh, yeah. Yeah, I mean, a lot of is mine is very similar. I have sort of not necessarily like a library. But I have definitely certain files, especially my styled components, or previously, like my stylist style systems, where I move these things over from project to project. And then the stuff that usually is around things like breakpoints or functions that I like to use or short hands or things like that. And I take them with me from project to project. So typically, when I'm starting a new project, I'm almost always moving that stuff over, like first and foremost, because I don't want to get into any sort of styling without my handy was that in stylist, I hit some mix ins and now install components. I have some functions and stuff like that, that I just sort of rely on at this point that I just really like. So I'll start a project and I'll move that stuff over. Just so I have everything to my liking, you know, so I don't even have to think about it. And, yeah, that that's like one of the big things for me is just being comfortable in this environment. And when you're comfortable, like for instance, the level of tut's code base has been worked on for so long that I'm so comfortable and then environment. So I tend to make most of my projects in that same sort of style just so I have things where I like them. It depends on the type of project again, because I'm maintaining a large project as well as occasionally doing new new, smaller projects. If I'm doing a new, smaller project. It really depends. I've been using Gatsby so much lately. So if I'm thinking about this as being like a static site, I'm instantly gonna jump for Gatsby, create a project, bring over my tools and get to work. If it is just going to be a full on maybe like a headless WordPress, I might look for next JS or something like that. If this is just going to be a front end thing, I would just go - -10 -00:25:00,000 --> 00:28:37,200 -Go for create react app. And that's pretty much where I've been lately is to grab the thing with the least resistance, bring my stuff over and get to work. So everything else, like a lot of it mirrors what you're talking about, you know, you do all your setup, you write a lot of your structure, and then you sort of batch in the different stuff. The for me, the tooling is a little bit different, specifically, because level up tutorials is on Meteor, which has this bit of combined sort of front end and back end, and it does the hot reloading for you. And it works just really nicely as a full on platform. So I end up just basically, if I'm doing a meteor site, or just one that would need like a database, and like, I would just fire this thing up and get to work. Because again, it takes care of most of the stuff for you. The last thing I want to do is spend hours and hours and hours on tooling. So I pretty much am always copying and pasting tooling stuff, bringing it over from another project that's using it. And I'm hardly ever writing any of that stuff from scratch. So yeah, that's really my philosophy for getting going on a deaf project is to get into the code and into the project as soon as possible, because that's where you're going to be inspired to work. And actually, like see things happening. Awesome. Yeah, I've got a question about, you got some notes here on breakpoints. So at what point in your dev process? Do you start to introduce breakpoints to make things responsive? depends on if I have the design ahead of time or not? Yeah, if I have a designer or myself who's designing this thing, I am doing mobile first straight up. So I design mobile. And then typically, I'll do the breakpoints per layout or per element per page or whatever as I go. So like, I'm, I won't style the entire site mobile, and then co the breakpoints, I will do, here's the homepage. Alright, I'm going to style it from mobile to desktop all in one sitting just so I don't bounce again, I'm like sort of batching I don't want to jump and forth, back and forth between contexts here. I want to keep the context. For level up, it was a little bit different. The site changes all the time. So I'll pretty much do the desktop first and then work backwards from there, which is kind of backwards, but it works. Yeah. Nobody, there's no like 100% go this way. Yeah, I'm I've been always been desktop first, just because most of my traffic comes in via the desktop. Likewise, fine, I find myself not writing nearly as much responsive stuff ever since Flexbox. And grid have come out, specifically since Flexbox came out. And now it's even less now that that grid is out. But as I lay out the site, I generally lay it out on the desktop, and then I'll sort of just kind of keep going down down down. As we get smaller. In the last probably two years or so I've always been writing my media queries in line with with sass or style components, me that I used to write like a separate media queries file, or I used to write the media queries at the bottom of like, if I had, if I had like a video layout, I would write the media queries at the bottom of that. And I've since moved to writing the media queries right inside of the selector, which is not saying as part of CSS, but it's you can do it in most like stylist or sass or style components. And I really like that sometimes, sometimes I'll pop the breakpoint in a variable so that I don't find my I don't have to keep writing the whole like, media max width, whatever. I know that. Yeah, you've had you have some tools that make it a little bit simpler than having to write the whole media query. Do you remember what that is? Yeah. Well, it depends on on stylist, I use one that I think is called, they might just be called breakpoints to be honest. - -11 -00:28:38,280 --> 00:29:34,680 -And it's as you just do plus above, medium or whatever. And then yeah, use that. On the style components I have the sort of object that you use, I can like link this in text, I have it in just somewhere. But it's basically just an object that you could say above dot mead for like, medium. And then yeah, you have backticks and write your your style your CSS inside of there. And that takes care of it. So I also do mine in line with the selector. Because again, I think it's easier to read. It's Yes, to kind of keep everything in one spot, especially if you're doing like a one liner, like a CSS Grid is changing a little bit from Yeah, like each rows to four rows or something. Yeah, all the time. Yeah, I mean, so I mean, I'm probably primarily using react for everything. So whether it's like Gatsby or next or Meteor or something like that most of my design setups are sort of react based right now. Awesome. Speaking of react, other people sometimes like to - -12 -00:29:36,090 --> 00:30:00,000 -how is that transition brutal? Anyways, Scott and I have been trying to make a hilarious transition to view school.io, which is one of our sponsors for today. So people ask me all the time, like, Hey, why are you gonna do a course on view? Are you gonna do a course on view? And my answer was always maybe, but I've got so many other courses that I would love to do first, that it's unlikely that - -13 -00:30:00,000 --> 00:31:25,470 -anytime if you need to learn view right now, it's it's not something that you'll probably get from me. So our sponsor today is view school.io. And they are, they have this thing called the view, j s master class, which is a learn view j. s from building a real world application from scratch with Alex not again, I'm not even going to attempt to say his last name KYRIAKDD is he's a view core team member and the author of the best selling book, the majesty of uJs. So he's put out this video course, that's going to teach you how to build things in Vue js. And we got a couple couple points right here, you're gonna build a real real world application, which is a form, you're going to use view and friends, you know, the view ccli view x, if you router, other technologies use Firebase RX j s, you're going to be looking at how to how to use best practices for building something in Vue js, code splitting Webpack, modern JavaScript. So some of the features of the form that you're going to build single page application, real time updates, content moderation, markdown support server less optimized for SEO with meta tags. So it is currently being developed. There's currently over five hours as 75 lessons and five hours of content. So if you want to learn view, and if you want to jump in on this, we are going to send you to view - -14 -00:31:27,480 --> 00:31:50,580 -school VUE school.io forward slash syntax. And we've got a kind of a cool deal here. The first 50 people are gonna get 25% off sick off, not on 25% off. So head on over and grab it. And thanks so much to view school for for sponsoring. That's awesome. Yeah. And from a core team member to cool. Yeah. So you know, that obviously know what they're talking about, because they literally are building view. - -15 -00:31:53,250 --> 00:31:57,540 -Unlike me, I'm just kind of pontificating on different things here. - -16 -00:31:58,710 --> 00:34:59,970 -I'm just joking. I know what I'm doing. Anyways, let's keep rolling with the thing. What's the next section that we have here? Are we homies? Next one is Git flow. So what does it look like when you actually need to make an edit to your website? What is your whole Git flow look like that. So usually, what I will do is that you maintain your your master branch, and your master branch is usually what gets pushed to production. I know some people will also have a separate branch for that. But I've also worked on so many different teams in the past, and they all have their own different Git workflow. People are very opinionated about their their Git workflow and how to approach it. So this is generally what I've settled on. Now, I know that there's a lot of people have different workflows. And I would love to hear what your workflow is, if you tweet us at syntax FM, and we'll make sure we retweet that. So this is generally how it works for me is that I will have an issue with something that needs to get added a feature request or something that needs to get fixed a bug report. And those issues will generally for me, I like to keep those in GitHub, although in the past, I've used JIRA, which is the worst thing in the world, every tool for us to use. And generally, those tickets in JIRA or in GitHub will have a number associated with them. So maybe, like dev 113. So what I'll do is I'll take Master, I will take a branch off of master into that specific issue called dev 113, then what I'll do is I'll actually do all of the work inside of that branch that needs to happen, committing as I go along. So anytime I do something significant, or anytime that I wrap up for the day, I'll stick that into a commit and push it up. Because there's nothing more scary to me than having uncommitted work where you could potentially lose it. Yeah, even even if it's just committed locally, I always like to push it up to my own fork of a branch so that as I have a work in process, I have it sort of backed up to GitHub or wherever you're pushing your your Git repos to, then what I'll do is generally, when you're working on a big project, that's pretty quickly moving. If you're working on an issue for three or four days, you're going to be pretty far off from what masters on because other people have been adding things to to master and you want to make sure that it works. So you'll do something called a rebase in git, which will sort of it will it'll take your your changes that you have done, let's say you added six commits to it, it'll sort of pick them up and put them in the air, and then and then bring in master again, and then attempt to land your changes back on top of that you, you rebase your changes on the latest version of master. And in most cases, that's fine. In some cases, you have an afternoon's worth of merge conflicts to deal with, which is always a bit of a nightmare. Then, depending on who the client is, I don't do this myself, but I've had clients in the past who want me to squash all of my commits. So if I have six or seven commits that detail what I've been working on, they'd like me to squash it into a single commit so that they the repo history stays nice and clean. I don't like to do that. - -17 -00:35:00,000 --> 00:39:59,970 -Because often I'll have three or four significant changes in it pull requests, and I like to have those as separate commits. So that I know that what I did in that specific one, what squashing will do is it will just it'll literally squash it into one commit, you're sort of rewriting history at that point interesting. Then I'll push it up to GitHub. Yeah, and I have a pull request. And then that pull requests will generally run against any continuous integration, any tests that they have. And then at that point, you either tear off a new issue, and you start from Master again, or if the new issue requires the work of your previous issue, then you create another branch off of so I had def 113, I created another branch off of that, which is def 114. That can get a little bit hairy now because especially if you're squashing, squashing things if you have to go back to one on three, then you get into a little bit of hot water, but it's all doable. That's that's sort of what I settled on any thoughts? Or what are you working on like that? Yeah, mine's a little bit different. And usually, if I'm working on a team, as the first thing you ask is like, hey, what is your Git flow workflow? Yeah, they tell me and then I just hold that 100%, because there's nothing worse than we had like a unfavoured. Again, we had like some other outside developers coming in working on the same project. And they were like, not on our team, a whole different agency. And they came in and just tried to sort of like strong arm their process, when we already had a process. It was like we're all I did was like, separate the two teams, when we should have been working together, we were like really frustrated that these guys were trying to impose their system on us when we already had a good system going, just for no reason at all. But so I usually like to adapt to any system that if I'm coming into a project, no questions asked, I'm going to use your system, I'm not going to try to improve it or change it or whatever. My system is pretty much this. And for a long time, I've been the only dev on the site, I do have outside contributors all the time, if you want to get some some practice, and you can contribute to level up tutorials, just join the Slack channel and reach out to me and I'll add you when you can check out the code base and stuff. But it's all it's all private, I do allow people to work on it, though. And so my system is pretty much this, I have a master branch that's one to one with whatever is deployed on the site, I deploy only from the master branch, and I basically I deploy anytime I merge into the master branch, it's not automatic, I don't have any continuous integration setup. But the rule is pretty much if I'm merging into Master, that means it's ready to go live. And then so pretty much everything lives in develop while it's being worked on tested, whatever. So I work on a branch called develop. But I don't actually code on the branch develop, the develop is just the sort of branch where everything gets merged into. And then from there, I pretty much do a feature feature branch sort of style, if I'm working on a feature, or I'm working on a bug or whatever, I don't name it after the issue number or anything like that. I just name it as a simplified version of whatever that issue is, like, based on title. Yeah, if I'm working on the affiliate system, the branch is going to be affiliates. And then I'm going to work on that do all my thing, do all my code and then push it into develop just for the merge merchant and develop? Alright, everything's working good merge it into master when it's ready to go live. I run all my tests right now, because I have both my API and my UI in one code base, because it's all in Meteor, right? That makes testing a little bit different. I test all of my react stuff with jest and I test all of my non react stuff like the server and API and stuff, I test it with actually, mocha, I'm working on maybe simplifying my testing. So I run two, I run my server side my API tests, and I run my client side test, I just run these both by hand because, again, I with the meteor stuff, I haven't necessarily dialed that down yet. I'll test pass good to go. I just run a deploy command, which is a script that deploys to Meteor galaxy, which is a really great hosting platform for Meteor sites from the meteor development group. So I mean, really, my good strategy is to have master one to one developers sort of where the changes are happening. And then I'm writing code always in a feature branch. And if I have contributors, they either make their own feature branch and I merged in or with a pull request to develop. Yeah, yep. Cool. I always like hearing what everyone's it sounds like we're fairly similar. Yeah. Yeah. They're all very, like little flavors of the same kind of style. As long as you have something that works for you. And, and mine has been born through refinement, just as I'm sure yours has. Right. Yeah. Yeah, totally a little things that you do come about because of issues that you've had in the past. And then you fix them yourself, you know? Yeah, yeah, totally. And speaking of things that you can work on refining, you can always work on refining your CSS Grid skill. So now, one of these tools that's going to help you build CSS grids, design, CSS grids, and really understand CSS Grid so much more as coffeecup software CSS Grid building tool as far as code generation and - -18 -00:40:00,000 --> 00:40:03,750 -UI design tools, this thing is awesome. Yeah, - -19 -00:40:04,890 --> 00:44:29,520 -it actually is awesome. I said on previous podcasts, they reached out to me because I have a course on CSS Grid. And one of the hardest things that I found with with CSS Grid is being able to write CSS Grid code and then visualize what it's going to look like. Because it is such a visual thing. And that's why we use these grid visualizers that come in something like Firefox. So they came out with this coffee cup software is this company that makes a bunch of different like website designers, they have a responsive site designer, where you can code a lot of the visual aspect of your application in this GUI and then export out the code. And then they they built this an additional one for CSS Grid. So I was like, Okay, well, let's check it out. I doubt it will be that good. And I had a call with them. And they have this layout editor, you can design in CSS Grid, or Flexbox, or block or whatever it is that you need. And then inside of CSS Grid, there's a whole bunch of stuff like, how many columns are there? How many rows are there? What are the implicit versus the explicit columns? What are the flex values of all of the different Flexbox elements that you have. So there's really a lot going on there in CSS Grid. And let me tell you, when I hit the export code, it's a pretty much with the exception of adding one additional class to some of your selectors, which is something that the the editor needs to to be able to import that code back in. It's pretty much just the grid code that I would write myself. So if you're looking for a tool to help you write CSS Grid code, you need to check out coffee cup CSS Grid builder, at CSS grid.cc, you can go ahead and download it for free. They also have a whole bunch of awesome resources for getting started with understanding how CSS Grid works. So thanks so much. So coffeecup software for sponsoring and grab it at CSS grid.cc. Nice, super cool. Yeah, and one of those things that's really cool about that, too, is that like, if you are still like shaky on your CSS Grid code, you could use it as a total learning tool to really just look at analyze their code and see like maybe or the, I mean, their code so good. It's like, see how you should be writing your code to, you know, yeah, like, I need, I need a column, or I need a grid with six columns. And then I need element number four to span from columns two to six. Right? Yeah. And also, I want it to span from row three to four, you could just do that, export it and then look at the export ID code and go Okay, that's how I would do it. Now. Let me implement it into my own. So check it out. Yeah, so cool. Oh, last thing, well, maybe Second, the last thing we have on our list is deployment. I already briefly mentioned mine, but really for deployment for me is that I deploy with a meteor galaxy. And it's pretty much just a one, a one liner script, and I have it aliased or I have not aliased, it's in my Actually I have it both aliased. And I have it in my package JSON. So I have it in my package JSON as deploy, right. So you could just do yarn deploy, or I also have yarn deploy alias to just deploy. So I'm, like lazy enough where I would like removed one word from the command, just like the type deploy and divine command line, because that's, that's how I roll I guess. So I pretty much just type deploy from Master after all my tests have passed. Again, I don't have any continuous testing, integration, that sort of stuff. I'm looking to add all of my tests into that process to have it automatically built into galaxy. But I just moved from Bitbucket to GitHub. So I'm still in the process of rewriting some of that stuff that I have here. But really, yeah, that that's it. Nothing crazy. The only thing is separate about that is with a brief note on like API keys and stuff like that, I keep my API keys. And this Meteor has a file called settings, JSON, which is essentially just a JSON file. And there's two objects in JSON or in this file. One is just sort of your client side code where everything is public, right? Your public stuff, and then your secret stuff. So anything that you put in settings dot JSON is your secret stuff. And you can add it in your site as Meteor dot settings, dot, and then your stuff. And you get access to it, the server side, whatever as a secret, but it doesn't live in your repo. And then when you run your deploy command, it references that file and uses those variables. So that's how I work with all of my secret API keys and stuff like that. Yeah, you got the a lot of secrets there, Scott. Oh, yeah. You know me. Alright. - -20 -00:44:30,690 --> 00:44:59,940 -How I do I have a couple. Like I still have like lots of different websites that I maintain all of the sites that run both my paid and my free courses, including the viewer. All of that is run under one application. That's the biggest application that I have. It's called boss monster, and that is currently hosted on Digital Ocean. And the way that it applies right now is is actually pretty simple. I use our sink which is a Unix command line tool, it The easiest way to to describe - -21 -00:45:00,000 --> 00:46:08,430 -sync is that it's sort of like Dropbox for Linux, meaning that it will analyze your files locally and remotely. And it will sync the files that will push up, push up files that have changed locally to your server. And then anything that was deleted locally will be deleted on the actual server. There's a whole bunch of different options there. And that's a very, very simple way to do it. Then after I've done our sync, all jump onto the server via SSH and just give it a quick reboot, I use a tool called forever. Which what forever will do is if your NPM script falls over for whatever reason, maybe a user hits a specific use case that you didn't intend and in the apple crash, then that will, it'll log it, which is great. And then you can it will just restart the restart the process for you. Which is good, because it's not like saying like PHP, or PHP doesn't really fall over it just like you just refresh the page and visit that thing again, right? Yeah, I'm just imagining PHP falling over as if it was like, some sort of actual entity, just sort of Oh, boy, oh, here I go. It's just like a wobbly elephant. Oh, - -22 -00:46:10,110 --> 00:50:00,000 -no, that's it's pretty simple. In the past, I've also used just SSH ping files up. So I've had different commands that will just SSH up an entire folder to it. So I am looking at moving over to something that's a little bit more resilient, because that's, that's pretty simple. And I also have to manually SSH into the box to restart the thing. So what I and also that will, that often gives me a two seconds of downtime, which inevitably, every couple months, somebody catches me doing a little two second downtime and sends me an email when they could have just refreshed two seconds later. Yeah, yeah. So I have multiple containers running the site and updates on one, which is a container and then updates at 00. downtime over Yes, that's what I'm looking to move over just for, for performance as well as as no downtime on that as well. So whether that's moving over to Docker, I'm mostly leaning towards using now sites now right now, I had a bit of a bit of downtime issues with them in the last six months or so I've I've had a couple websites go down. But they're they're working hard on it, I think a lot of the issues were from from DDoS, and not their own, it's just from from people that were have malice against them. And what that will do is it will start up your website, and then it'll cut the domain name over so that you don't have any downtime. And then it does like load balancing and stuff for you as well, which is something that I want to do. So I'll probably move over to that at some point. Other other things, if I have like a WordPress website, I'll use sometimes in the past, it's not what I use right now. But you can actually use Git to to deploy websites as well, where you could have like a branch on on, you could have your Git repo and then you could just SSH into your box and do a git pull. And that'll pull down all of your actual assets. I said WordPress, earlier was WordPress, it gets a little bit hairy, because you also have assets, which you don't really want to put those files into your Git repo. Some people do, you can, but it's not really something you want to do, because then if someone uploads something remotely, you upload something locally, it gets kind of hairy. But we've had a past sponsor, which is delicious brains, they have a tool called w WP migrate DB Pro, which is exactly what you want. Because I always have a Git repo of my website locally. But the the data is the harder part, which is I want to pull all the fresh data from the server down to my local host. So I'm working with the most up to date content. So I use that plugin. And then I'll just either FTP drag and drop the whole, the whole theme up when there's a change, or I'll do a get a git pull of just the theme for that website so that I get my latest in there. So I have all kinds of different deployment strategies. not totally happy with anyone Oh, even the I forgot the syntax website is built on codeship, which there's a lot of services out there past sponsor, again, deploy HQ, you can just watch your Git repo. And then when there's a commit that lands into the like a specific branch, you can run some scripts, and those scripts could do testing those scripts can do deployment. So what we use codeship for is codeship will automatically watch our Git repo. And then when there's a commit lands in the master branch of the Git repo, it will automatically do a now just it'll just run now. And there's some keys and stuff that we need to put in there and it will deploy it. And then alias the syntax, that FM domain name over to the instant latest instance of that now. Nice. Yeah, so I don't have a lot going on there. But it's kind of interesting. I love hearing how a different people handle the deployment of their websites. Yeah. And for project structure, what do you what do you do there? Yeah, project structure is something a long, long time ago and I'm really glad I did this. I was shown by actually a company called jet Cooper which is - -23 -00:50:00,000 --> 00:54:59,970 -Now Shopify Canada, they got bought. But they showed me that every single time they start a project, they number the folder. And what that will do is that every single project has a folder like, I have 0230 syntax, 0231, stickers, 0232, node, zero to three, five, Kate. And now these are all the different projects that I have. And then that way I associate, I can remember the number that I'm working on, and I use the command line z, which will let you to jump to folders just by kind of fuzzy matching them. And I can just do z syntax or z 230. And then I don't have to know the exact name of the folder, but it'll just jump me right into, that's whether I remember the number or like the numbers are nice, because it'll it'll show me like, kind of by date of when, when that project was created. And then the name is nice, because I can often just look it up by by the name of that. And then inside of that, I'll usually have a code folder that has the application in it, I'll have a assets folder that contains anything that the client or myself needs to hold on to, whether that's textures, I'll often grab a lot of icons from the noun project, and with the noun project, you need to credit people that that you use those icons for. So I'll keep a running list of icons and people I need to credit in their logos, you name it, and then I'll have a design folder that contains the source images for for Photoshop. And then I usually just do get inside of the code folder, which is the web application. Nice. Yeah, yeah. So mine, again, is Meteor. So it's a little bit different Meteor 1.7, recently came out. And before Meteor had everything eagerly loading. And this is like an old legacy thing. And Meteor is that by default, everything was sort of eagerly loading. So if you didn't want it to eagerly load, you put everything in an imports folder. So everything of mine currently lives in an imports folder to do like, proper important structure. However, now that 1.7 is out, you don't have to do that anymore. So I'm working on modifying this right now as we speak, actually, but eventually, or pretty much everything inside of my imports folder is my application. And that folder structure looks like API, where I have all of my graph qL, mutations, schemas, all based on feature. So I'll have my entire API based on feature broken up into its individual folders inside of my API folder. And then I have my UI folder, which has all of my react components, which are server side loaded. So it's not necessarily like a client folder, it's basically just all of my components. inside of my UI folder, I have an elements folder, which has an index dot j, s, which imports all of my styled components. And so I have this is this is not necessarily the style components in my site. This is the base components. So I have a whole system of elements that are based components that are almost like my own bolt, it is my own design system. Anytime I need any of these components, instead of having to import one from a specific file, I'm importing, you know, input from elements, essentially, it's almost like it's its own node package, while keeping it in the codebase. So I have that as well as like sort of design utilities. And then each of my features in the site are broken down and sort of feature folders for those individual components all again, React components inside the UI folder. Next, I have a startup folder, which has both client and server startups, which is where all of my Apollo config sort of lives. Well, it's not necessarily the config, it's all of the Apollo startup stuff in my server side rendering stuff in the Apollo server config lives in the API folder. But it basically imports everything in there. And anything that needs to happen on startup, whether that's server side rendering, or collecting styled components for server side rendering, or any that sort of stuff happens inside of those startup folders. And then I have a Utilities folder, which is like utility functions that can be used on both client and server. If it's a client side utility, it's most likely going to be or a UI style utility. It's going to be inside of another Utilities folder inside of UI. But I do have a Utilities folder at the root for utilities that are used across both of those. That's pretty much it. Yeah, it's a main the meat of it. Is it between the UI folder and the API folder? Again? Yeah, yeah. nifty. That's I was like hearing everyone's different setups. And I've learned a lot just by being able to view view other people's layout. And even when you get into react world, you have like a live in components folder and a source folder. And it's kind of neat to to see how other people approach doing this kind of thing. Yeah. Although Did you hear that? Did you watch that? Ryan Dahl 10 things I regret about node.js? Yes, I did. And one of the things he regretted was index.js which allows you to require a folder Yeah. And and leaving the dot j s off of a require. I don't another thing See, I don't like I see where he's coming from. But I like both of those things. But yeah.js is more explicit, but like I am, I don't really care. I don't know. I would just ask - -24 -00:55:00,000 --> 00:57:20,100 -I've honestly just don't I don't necessarily agree I can't even come up with the words. Yeah, but a lot of the things that he if you haven't seen this, Ryan Dahl, who is the creator of Node JS, he came, he had came out of hiding. He was gone for the longest time. And he did a talk at a jazz cough and said the 10 things that he regrets about no jazz and how he designed it, and is really, really, really interesting talk to see someone who had built this thing. say, Okay, now that were six years in on node, what do I regret about it? And that whole a lot of the things that he said were specifically from like, like the language maintainers thing, rather than, like a user standpoint, because a lot of the things that you said of like, oh, that would probably make it harder for me, the developer, but probably better for for the language in, in general. So he's coming, he's coming out with this thing called D node, which is like trying to like a TypeScript based sort of node ish runtime, like JavaScript on the server side, but done via TypeScript, which is pretty interesting. So I'm all ears on that, because he obviously changed the industry with node. Yeah, absolutely. Keeping an eye on it. Definitely. All right, what about sick picks, pick pick, pick, pick another Nintendo Switch game. This is one that my wife and I have been playing non stop, we like to find games that are like two players that we can play their Co Op or against each other or whatever. I mean, cornea is like favorite game to play together is the 2d Super Mario games, where you can both play on screen at the same time. You know, we like to play a lot of video games like that. So we found this game. It's not exactly a hidden or something, but overcooked, which it might interest you because it's basically a cooking game. Oh, you're your two little cartoon characters working in a kitchen. And the whole goal of this game is that you have to get dishes out of the kitchen, and a certain amount of time. So the ticket comes in. And you have to assemble like, let's say you're making burgers, you got a you prepare the meat, got up the lettuce, cut up the tomatoes, you got to cook the beef, you got to assemble the burger on the plate and everything. And you have to get it out in a certain amount of time. So you're all under huge time crunch. So at its very most basic, it takes a little while it takes a lot of communication. By the end of it. Like Courtney and I are both talking like real chefs. We're like, why not burger out like? - -25 -00:57:21,510 --> 00:59:59,970 -It's like, it like really takes that level of coordination. You know, it's hilarious. They'll be like burgers all day. Let's keep going on those burgers. Like, you know, that's hilarious. And we list like crack up. But then the game decides to throw curveballs at you. And it has things like oh, well now there's an earthquake in the middle of this dinner service and the ground is separated and you can access each other or each other fortunate. So you have to start like preparing for these events or one of them you're like cooking in the dark or something like that. And it can become a total mess. Like if you leave the soup on too long or the burger on too long. It catches on fire and you have to go find the extinguisher for the whole thing burns down and you're like totally running around and frantic the whole thing is hilarious. So if you have a games that you'd like to play co op i definitely recommend overcooked I don't think it's just on the switch. I think it's on lots of stuff but we have been loving that game. That looks super fun. I'm looking at on Steam right now. Oh yeah, it's wild. Yeah, it's a blast. Awesome. I am going to sic pick the skyroam Solis which is a global Wi Fi hotspot. So I have a bit of a problem when I go traveling I want data on my phone. But I don't want to just get a local sim because first you have to unlock my phone is unlocked but you have to unlock your phone and if me and my wife both have to unlock our phone, it's like a couple hundred bucks and then you have to go by the sim and charge it up and the most important thing is that you lose your number which if you use iMessage on iOS, and you don't have your number you get into sort of this like iMessage hell where like your messages aren't being received sometimes it's a really big nightmare. And then also like I don't want to lose my number because people have that number they text me people. I still want to be able to get emergency phone calls when I'm away so I like to keep my number so I long time ago use this thing called no roaming kn o w which is a little sticker that you put on top of your SIM card and then you allows you to switch back and forth between your your other sim and this one but it just it just never worked. It's it's It was great because the prices were good. It was amazing because you could just put it on your phone, you don't have to carry anything around that's extra and it just doesn't work very well for me. It took like an hour or two hours half the time it didn't work and then I was spending data roaming data to try to be on the on the phone with support and it just nightmare so I don't recommend that but I found this other one which is the skyroam Solis which is just this like hockey puck, that is bright orange that you carry around and it just makes a Wi Fi hotspot. I think for about eight or nine bucks a day you get unlimited and I put that in quotes - -26 -01:00:00,599 --> 01:00:37,500 -unlimited data you get 500, Meg's of LTE. And then after 500, Meg's either pay another nine bucks, or you can you can go on edge, which is enough for push notifications and whatnot. So I was pretty happy with it, I popped it on to a USB charger, I drove all the way down to Dayton, Ohio with it, and I carried it around all weekend in my backpack. And it was great, nice and nice and sturdy. The only downside was that it's too big to put in your pocket. So if you go to the bar, or something like that, you can't take it with you, either. You want to look like you have a giant hockey puck. Yeah. - -27 -01:00:38,880 --> 01:00:41,340 -Which would not be out of place in Canada button. - -28 -01:00:42,810 --> 01:05:00,000 -Totally would be. Yeah. Seems like normal. Yeah, absolutely. That's hilarious. Overall, really, really happy with it. It's it's also going to be nice traveling with my family because my wife can also use part of that 500 Meg's and they've got iPads for the kids, they can only use that. I don't. Also it's it's kind of cool. Because sometimes if you are traveling even inside Canada, and you're running low on data, I only have six gigs, a month on data. And if you want a hotspot and you want to work for a couple days, or if even if the internet goes goes out in my house, I don't want to use my data plan. I don't mind paying nine bucks for being able to keep working. So check it out. If you're looking for that. I know a lot of people use dates. I was gonna say your wireless provider because I am on T Mobile and is like I get unlimited 24 seven. And what's it called? Like hotspot unlimited hotspot and get this when I went to Iceland, I got off the plane in Iceland and it was like Congratulations, or is like you for driving in Iceland. You get free calling free text messaging, and 3g data in Iceland. And I was like, I'm not paying like, what is it like I'm not signing up for so I'm not signed up for anything special. Just my plan has that. And so I thought it might just be Iceland. No, I arrive in England. No, here's your here's your plan for England. I arrived in Romania. And it's like, yep, you get 3g. You get unlimited text and calling. I was just like, what is this? Like, I didn't sign up for any I actually looked on my plan on T Mobile. And it was like, you're not paying for anything extra International. So amazing. Yeah, I have no idea where utopia that is the United States where things are cheap. And yeah, really. In Canada, all the telecom companies will rob you. And it's not a good deal at all. And some of the telecom companies not mine have this thing called Rome like home, where you can pay nine bucks a day just to use your your data plan from home, which is pretty good deal. Because then you have it on your phone, but I don't I don't specifically have that. So and other people are just like, oh, people are saying just buy a Google Wi Fi and bring a bring a phone or get a Google phi SIM card and put it into one of these hotspot things. But you can't get that. So I'm in Canada. So this might not apply to you. If you live anywhere in Europe, where telecom is amazing. Or apparently us we're telecoms also meeting but I don't think it immediately I think I just got lucky. I'm like grandfathered into some old plan or something. That's nice. What about a shameless plug? Yeah, I'm gonna shamelessly plug my latest react series level to react edges, intermediate react topics. We talked about all sorts of cool stuff, like why and how you would use a render prop and render props are everywhere right now. And I help demystify the process of setting up a render prop based component. Not only that, but I talk a lot about the benefits. So we go step by step by step and why you can see down the line why this thing is actually better. We also talked about portals fragments talked about awesome animations, I use a library called react spring to get physics based animations do work interactivity into your site. So we build like the Tinder layer where you're dragging things around and stuffs happening because of it. So check it out level to react at level up tutorials, comm become a pro. And I'm going to mention the level of pro yearly subscription, because I don't know if it's obvious enough on the side, I'm gonna work on making this more obvious. But if you sign up for a year, you save 25% off that pro subscription, so sign up for a year. And that money there's going to be a new series every single month. And if you look back at each series that's come out so far, it should be an indication of how awesome the content is going to be every single month moving forward. So check it out, level up tutorials.com forward slash pro Thank you sick I'm asking to plug my courses again@wellness.com forward slash courses are all kinds of free and paid courses ESX for everyone, which is now updated for iOS seven s eight all those cinco wait stuff is in there, even though that I recorded that course about a year and a half ago now it's still very relevant is there's a lot of people that are still a little bit shaky on the different parts of ESX. I think a lot of people don't think they're shaky on the on ESX until they come into one of my workshops and you see using classes or backticks or all of the different parts. There's like 30 different pieces of ESX. So check that one - -29 -01:05:00,030 --> 01:06:18,330 -out@esx.io or I've got a course react for beginners, which is going to be I got another one coming out advanced react that will be out shortly. I've got CSS Grid, which is free JavaScript 30, which is free course on learning node, learn node calm, which will teach you all it pretty much talked about my course platform today, how pretty much how I build that thing is exactly what I use in learn no.com. So all kinds of stuff too much dimension on here. But I realized that Scott and I don't necessarily explain who we are every single episode, we teach people how to get better at web development. And we each have our own course platforms where we sell different types of courses. So if you enjoy syntax, consider supporting us and grabbing a course or two at our at our our links hit the show notes for that. Yeah, I think that's something we don't do a good job of, we need to every episode be like, here's who we are and what we do. We're professionals. So yeah, yeah. It's funny that how many people have found my stuff through the podcast, which is makes me really happy because I tried to be on Twitter and YouTube and Instagram. And like, there's there's just different audiences all over the place. And there is a lot of overlap in it. But I think it's important to make sure that we're telling people what we do and why we're doing this podcast. Yeah, I just sell you a bunch of stuff. So yeah, yeah. My book. I don't have a book. - -30 -01:06:20,340 --> 01:06:33,780 -I think that's it. Anything else? I got nothing, nothing. All right. And if you want to see that episode about design systems, maybe we can do that. Next one. Let us know if that's something you're interested in. Cool. All right. We'll see you next week. All right, whose face - -31 -01:06:35,550 --> 01:06:45,330 -head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax52.srt b/transcripts/Syntax52.srt deleted file mode 100644 index 060851617..000000000 --- a/transcripts/Syntax52.srt +++ /dev/null @@ -1,644 +0,0 @@ -1 -00:00:01,350 --> 00:00:07,289 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there. strap yourself in and - -2 -00:00:07,289 --> 00:00:08,010 -get ready. - -3 -00:00:09,389 --> 00:00:39,180 -Scott Tolinski: And West boss. Welcome to syntax, the web development podcast with the tastiest treats around. Hmm. Yeah. In this episode, we're gonna be talking about marketing for developers and why marketing is important for developers, even if you aren't necessarily starting your own business or anything like that. And we have our very own marketing guru in the studio with us today, Wes Bos. Hello, everybody. - -4 -00:00:39,900 --> 00:00:42,930 -Wes Bos: I'm honored. Thank you so much. How you doing today, Scott? Hey, - -5 -00:00:42,960 --> 00:01:11,310 -Scott Tolinski: I'm doing good. And today, we have a couple of great sponsors with us. As always, we have Log Rocket, which really makes finding solving bugs, super, super easy works with all of your tools and all that good stuff, as well as Freshbooks, which you should know by now is amazing cloud accounting software that was tonight. Both both love. So we'll be getting into a little bit more about our sponsors, as we go. But yeah, so how's it going? Anything - -6 -00:01:11,310 --> 00:01:11,880 -Wes Bos: new? anything - -7 -00:01:11,880 --> 00:01:14,220 -Scott Tolinski: fun going on in the world of Wes. - -8 -00:01:14,250 --> 00:01:40,890 -Wes Bos: Not too too much. It was father's day yesterday, which happy morning? Yeah, thank you. As to you, too. It's funny. I think one of our very first episodes we recorded we asked how is your first Father's Day. And this is Episode 52. Which means I think we've been doing it for just about a year now. Probably a little under a year because of I did a couple hasty treats here and there. But uh oh. 52 episodes soon. Wow. Pretty impressive. - -9 -00:01:40,920 --> 00:02:43,920 -Scott Tolinski: Yeah, it's amazing. Yes. Speaking of hasty treats, I think we have maybe a little bit of announcement regarding Yeah, treats. So we have had so much positive support coming from every one of you who listens and all of the just the the kind words and all these amazing stuff, and people can't get enough the syntax. So we have decided that we are going to do a hasty treat a week now we're gonna get an extra episode coming in here. I don't know if we know the exact release date or day of the week yet, we haven't necessarily discussed that. But I'm sure we'll stagger them out or something like that, where we're gonna be doing what's called a tasty treat, for those of you who don't know, is a, you know, maybe like a 2025 minute long episode, where we talk about one topic in particular, and maybe it's a topic that we cannot spend a whole hour on and don't want to do, like a sort of a split show. So this way, we can focus on one minor topic and get into it nice, good. And, yeah, it's gonna be a lot of fun. We're pretty excited about this. - -10 -00:02:44,160 --> 00:03:24,540 -Wes Bos: I'm super stoked about it just because I often get questions about specific things like I'm just looking at the list right now. If domain management role systems, cores and SSL, what is the new front end developer refactoring setting goals, what's new in react, consulting, two products, what's Prisma there's all these things that I wish I could just send someone to a podcast so they can understand. And that's exactly what these these tasty treats are going to be, is us explaining or unwrapping something. So hopefully, you can get a better idea where you may be you're walking the dog or going for a quick drive to the store, you'll be able to get it done in I don't know, maybe even seven minutes if you listen to it at two X 10 minutes. - -11 -00:03:24,630 --> 00:03:43,800 -Scott Tolinski: Yeah, and I think the the best thing about this for me is that there's so many good topic ideas that we've had sitting on our list that we've been avoiding, because we can't make a whole episode out of them. So we have a ton of excellent episode ideas prepared for this. And we are ready to get these tasty treats going. - -12 -00:03:44,010 --> 00:05:36,899 -Wes Bos: wicked, wicked. Alright, so talking about marketing today, let's let's get right on into it. So this is this is me marketing for developers. And I like this topic a lot just because like Scott, and I obviously run our own businesses. And I know that a lot of people listening here are at some point in their life, or they're going to get the itch to build something themselves. One of the best parts about being a developer is that often if you have an idea, you actually have the skills to make that thing come and be a real thing. Whereas a lot of times, like often you see people looking for technical co founders, they've got great ideas and they have like they have connections to make it happen but they don't necessarily have the actual technical skills to bring things into fruition so at some point in your life, it might be now might be in a couple of years you might want to make a little bit of side income from whether it's a product whether you're you're trying to sell some courses like Scott and I do whether you want to host a podcast like Scott and I do as well and get that sponsorship money coming in those those Freshbooks dollars. So we're gonna kind of go through the the different parts of marketing and and hopefully you can pick up a few things, here and there. So first thing I want to note That marketing is not just advertising. And this is business school, I went to school for business. So I took a lot of marketing courses. And that's one of the things that they really hammered down was like, people think marketing is just banner ads and things like that, that's advertising marketing a large part of marketing is, is also figuring out what people want. So a big part of what I do is, is listening to developers about what they're working on what they're struggling with, what they want to learn what's hot. And by, by listening to that I am able to figure out, Okay, this is what my next courses are going to be, because I've had an open ear for for all these years. - -13 -00:05:37,139 --> 00:06:22,620 -Scott Tolinski: Yeah. And again, we are talking a little bit about this as like Beau who have their own business, but this stuff is important for anyone who's looking to sort of up their own, you know, personal stock game. And in this industry, you got to have ways to stand out and by marketing yourself correctly, you can increase those kind of things. For instance, I mean, even when level up tutorials wasn't making any money whatsoever. And the whole goal of it wasn't to be making money or to be a business it was just to provide content, level up tutorials got me more jobs and job interviews than anything else. So by marketing yourself knees ways, you are making yourself looking way more attractive to potential. I mean, makes your resume stand out amongst the list of other resumes. - -14 -00:06:22,889 --> 00:07:11,579 -Wes Bos: That's that's a really good point. And I think if there's anything you'll take away from today, it's that you should start this now before it's too late. Because I often see people who are sick of their job, or they want to move to a smaller town, because they can get a nicer house, but then they have to commute on their job, and they want to be able to work remotely. And if you start this personal branding, marketing stuff. Now, by the time you want to make some sort of switch, or by time you want to move up and take a new job, you're going to have a bit of momentum behind you. And that's gonna work. It's not something you have to do, but it certainly is helpful. Yeah, I know a lot of people are a little bit being like, Oh, I don't have time to do any of this stuff. I'm trying to learn a whole bunch of stuff. I don't want to have to run this business. That's that's totally fine. But if you want this to be an option in the future, then it's probably worth starting now. Yeah, yeah. - -15 -00:07:11,579 --> 00:07:39,750 -Scott Tolinski: I mean, every job I got in the web development industry, except for one, I was pretty much got because of my efforts in that department right there. I wasn't hunting for jobs. I don't think I ever hunted for a job after my first job. It was sort of people came to me, because they either saw my content. Not only that, but freelance gigs and stuff like that. I think the potential is huge. But again, you don't you don't have to do it. But it can help considerably. - -16 -00:07:40,019 --> 00:08:14,250 -Wes Bos: Totally. So let's start off with the the first part. So let me just actually rattle through so you can expect what we have. We got personal branding, we got stuff on just running a business, we have social media, we've got paid advertisement, we've got email marketing, we've got partnerships, and then we've got freebies. So those are the major sections we'll be going through today. The first one is personal branding. And this is probably the biggest one for Scott and I it's how people in the community perceive us and personal branding is is huge for me, and I think that it probably is would you say it's it's huge for you as well, Scott? Um, - -17 -00:08:14,310 --> 00:08:53,520 -Scott Tolinski: it hasn't been a No, he's done everything under my business's name, where you do everything under West boss. I've always done everything under level up tutorials. So that's a good point. Yeah, even when we started this podcast, I think more people would have known me as the level of tutorials guy than Scott to Lynskey. In fact, it took me a long time, like, I don't know if it was just like, General shyness or something. But it took me a long time, even on the YouTube channel to be like, Hey, this is Scott Tolinksi. You know, it was sort of just like, Hey, this is Scott, whatever. Yeah, it was less of trying to build my own personal brand. I think a lot of it was maybe I was just ignorant towards the importance of using my name for things. Totally. I - -18 -00:08:53,520 --> 00:11:06,690 -Wes Bos: actually many times in my career, I've like struggled to come up with company names. And I always ask people, and they're like, what are you doing? Your name is Wes Bos. Why don't I just use that. So I was lucky from, I guess, from being born and kind of a cool name. So I always decided to stick with it. The downside to that being obviously, it's very hard to expand my business. If I ever wanted to sell courses for someone else. They wouldn't be Wes Bos courses. However, that's not anything I'm remotely interested in right now. I just love doing my own thing, and not really looking to expand it. So I'm totally fine with that. But I'd say behind my personal brand, I hope what there is is like a trust and reciprocity that's really big for me, I feel like my whole business model is built upon giving, giving, giving, helping people, teaching people and then when it comes time that someone wants to learn something, that reciprocity gets cashed in and they can they can buy a course for me because I've given so much out and that's it I should explain how my business model works for those who are new to the podcast. So I create web development courses on, on web development, a CSS, JavaScript, those are kind of my main areas. And I have, I don't even know maybe six or seven free courses. And then I've got three or four paid ones, I've got my ESX one, my node one, my react one, gonna advance react one coming out, I've got a whole bunch coming out this year that I've got some serious momentum on them. And generally, what happens is that somebody will find one of my free courses, or they'll find my YouTube or my Twitter, we'll talk a little about that stuff. And they'll take a couple and they'll like the way that explain things. And then they'll come around in and come and buy one of the paid ones, when there is a skill that they need to learn that I offer a course in. And I feel like that that trust that I've built up by putting out very good quality free courses, like the free courses are the same quality as the paid ones, then they're they're nice and polished. And you'll learn a lot from them. There's no difference between the paid and the free ones, because except for the actual price, at the end of the day. - -19 -00:11:06,929 --> 00:12:15,270 -Scott Tolinski: Yeah, I think part of this part of the reason why you've been successful is because of this, sort of, I think a genuine nature of of how you're approaching this. And this is such a big thing that so many people overlook, they tried to be so and so they tried to be Wes Bos, or you know, whatever that thing, but they you have to be your authentic self, and that authenticity is going to carry through into your work. And I think it certainly does, it's something I've always tried to do myself, I don't want to be trying to emulate someone else, or you know, someone else's YouTube channel or something that they might have some characteristic that really works for them. But the last thing I want to do is try to harness that characteristic, because it's not me. And I think your audience would see through that pretty quickly. So I think part of the the benefit here of your own personal branding is that it needs to remain authentic to yourself 100% I mean, I think gets away with everything, art, music, any of that sort of stuff, the the authentic, or the authenticity as the worst word I've ever come up with, like the genuine nature of people will shine through and I think really, really helped people - -20 -00:12:15,630 --> 00:12:51,630 -Wes Bos: totally I often see this in in YouTube videos in every single industry and you can tell that people are copying the Casey Neistat kind of Oh yeah, they're to his thing or they're doing that stupid PewDiePie zoom in on the face or like they're just stealing the the sort of the look and feel which I think you might have to do that a little bit when you're first starting out. But I'm always for doubling down on on your own sort of look and feel and, and personal brand on things because that is gonna shine through over anything else. - -21 -00:12:51,840 --> 00:12:53,039 -Scott Tolinski: Yeah, absolutely. - -22 -00:12:53,280 --> 00:13:45,150 -Wes Bos: Cool. Personal Branding. I love it a little note here speaking at conferences, that's also something that how I have I think a big part of a personal brand is establishing yourself as an expert as as cringy as that sounds. So how do you do that? Well, writing lots of blog posts, maybe posting YouTube videos, appearing on podcasts, having your own podcast, speaking at conferences, all of these things are very important by positioning yourself as an expert, even if you're not like I'm by no means an expert in in much. And especially when I started, I had no idea what I was doing. But by but just putting yourself out there and having the guts to, to put yourself out there is really, really important. And what that looks like is going to be different for every single person because obviously, I love going up on stage and talking about JavaScript, but that is like probably the definition of health. people listening right now. - -23 -00:13:45,510 --> 00:14:44,340 -Scott Tolinski: Yeah, it's big. I mean that it is big. And sometimes it happens by accident, right? Like, you could just be like, I want to get started with this personal branding stuff. I'm gonna make a bunch of blog posts. I mean, for me, one of my first big hits on YouTube, so to say was, I did a series on sass. It was like before, lib sass it was before sass had really taken off. And the only way people were using sass was through Ruby at the time and stuff like that. And I'd done the series on SAS when it was pretty darn fresh when it was almost still SAS and Hamill. Like you almost talked about SAS and Hamill, not just SAS. And because of that, people really thought I was a SAS expert. I was pretty instantaneous and everyone's asking me for SAS advice and I'm thinking like, I just learned this stuff and I made this series to help other people learn this stuff, but here I am, and everyone now thinks that I am like the the SAS man. So there you go. That's how it happens. Yeah, the SAS man. I guess I could still be the SAS man if I want it to be - -24 -00:14:46,770 --> 00:16:51,750 -Wes Bos: awesome. So let's move on to the next point which is just like general running of your business is is good for marketing. So it should go without saying but like being good to the people who buy your products. Is is very, very important because They are the people that are at the end of the day, giving you their money and paying the bills and allowing you to have this business, right. So I think this is really, really important. I try to treat everybody who buys a course from me as well as possible. Yeah. And it's just little things like sometimes people get confused by I have like, generally in my courses have like a starter pack and a master pack. And then what sometimes happens is people don't scroll all the way down, or they get excited, and they click the starter pack, and then they, they get to the end of the video, and they're like, oh, how do I how do I upgrade, right? And what I'll often do is I'll just upgrade that person for free, because it's not, it's not their fault. Maybe the UI on my website was wrong, it might have been their fault, but I don't care. If you upgrade them for free, you lose out on 20 bucks worth worth of income. But I guarantee that person is going to tell a couple friends maybe buy a course in the future, again, they're just going to be a very happy customer. Same thing with my return policy, I don't have like a, I don't have like a 60 day return policy or something like that. I just have, if it's not for you don't sweat it. Because sometimes people buy the course life gets busy. Six months later, they'll actually take the course and then they really enjoy it. They don't want to sometimes when people are about to buy, they're like, oh, not sure if I can finish this and whatnot. So I'll just say like, if it's not for you, you can return it no sweat, does that get abused? Absolutely. It gets abused every now and then. But if I try not to punish my good users, same thing, there's no DRM on my videos. So I'm not trying to stop people from downloading and pirating them because like 98% of my customers are very good. And they don't want to be bothered by DRM. So I rather make it a pleasant experience for that 98% then punish the 98% because a couple people are gonna do shady stuff. So just being cut your customers very important, right? Yeah, it's - -25 -00:16:51,750 --> 00:18:13,140 -Scott Tolinski: funny because I get so many emails from people, or on my chat room that are sort of like, Hey, man, did you know that I can access your videos in certain ways, like I have found this hack, and I've had access to your video game? Like, don't you want to patch this? And part of that is well, it would mean DRM might there's no other way around some of these things. Yeah. And so, for me, the answer is, it's cool. Like, just don't do it. And don't tell other people to do it. Don't be a dick about it. And then we're all good. Because, honestly, yeah, I don't want to I've always hated the DRM thing, you know that there's nothing worse in the world than when Apple had their like iTunes DRM. I mean, Apple was sort of the quintessential example of terrible, terrible DRM practices, and just like making it difficult on their customers, and so I just just never wanted that sort of experience where people are having a hassle. And again, yeah, if somebody is going to get, and they want a refund on your course, or something like that, it is very inexpensive to just give them the refund, just give them the refund, you know, I mean, that that will that will give you a Happy, happy, maybe potential former customer if no, then maybe tell someone in the future, but it is inexpensive, even if it seems expensive at the time. It's totally, yeah, - -26 -00:18:13,170 --> 00:19:10,020 -Wes Bos: I've had people come back a year and a half later and actually rebuy my courses, or I've had people buy the courses after they had stolen them. And first, if you try to steal them, they're almost always out of date. So don't try to do that. But they don't do it anyway. Or they get a job. And they're like, Oh, I feel so bad that I did it. Or I've had people email me asking for help. And I'm just like, okay, like, what's your email with the receipt? I don't see it here anywhere. Anyways, that's a very small percentage. The nice thing about the industry that we are in is that most people make pretty good money. And most people are very, very good about not being a jerk and supporting me for because like Scott, and I were just out on our own right. We're not huge business out there. This is our income. And I feel so privileged to be able to actually make this my job. So it's, it's really cool to see that people will go out there and support you. - -27 -00:19:10,050 --> 00:19:24,690 -Scott Tolinski: Yeah. And I've actually had people refer to level up tutorials as like a decent sized Corporation. And I'm like, it is me. It's just me. Maybe I should call it Scott solinsky tutorials, but it is just me. So yeah, that's funny. All right, let's - -28 -00:19:24,690 --> 00:20:44,280 -Wes Bos: move on to the next one, which is a social media. There's all kinds of different social media outlets, and I've got some some opinions on how to make this work. My first point here, and then we'll kind of go through each of them. But regardless of which social media platform you're on, I think, by far the most important thing is don't try to push people off of a platform. A lot of people think like, oh, Twitter sucks, or I don't like Facebook, because nobody's clicking on my link and they just have like a website or a YouTube video and they're like, I just need to get people off of this platform where I want them To go, and that's the wrong way of thinking about it. You need to say, okay, there's people on this platform, how do I bring them content in the way that it makes sense to you? So how do I record a 15 minute YouTube video on how react context works? Or how do I post the hot tip to Twitter that will help people not leave Twitter, but just get a little value in Twitter? Or recently, we've been posting snippets of this podcast to Instagram because we don't want to we obviously have to go off of Instagram if you want to listen to the podcast. But if there's something of value that can be ingested directly on Instagram, then then that's ideal. Right. So yeah, don't push people off the platform bring tailored content to them that makes sense on that specific platform. - -29 -00:20:44,520 --> 00:20:54,480 -Scott Tolinski: Yeah, and I think it's, it's obvious when you're just like, it's an obvious like, sales funnel, like, please come to my site and learn more, you know, yeah, I think it's just a little too obvious. You - -30 -00:20:54,480 --> 00:20:57,240 -Wes Bos: want dates? Yeah, yeah. - -31 -00:20:57,270 --> 00:20:58,290 -Scott Tolinski: Yeah, absolutely. - -32 -00:20:58,440 --> 00:21:08,460 -Wes Bos: Not gonna work. So let's go through all of them and just talk about how we specifically use each one. Let's start with YouTube since Scott here is king of King of YouTube. You've got that play button? No. Yeah. Yeah, I - -33 -00:21:08,460 --> 00:21:16,340 -Scott Tolinski: got that. Yes, I have the Silver Play Button. I'm hoping for the gold. But that seems like a decent amount of ways off. I think that a million. I think it's a million. - -34 -00:21:16,380 --> 00:21:19,260 -Unknown: So everybody, go and subscribe to Scott right now. - -35 -00:21:19,290 --> 00:22:22,920 -Scott Tolinski: Yeah, level up tutorials on YouTube. I'm a quarter of the way there. I think you get the silver one at like 200,000 subs or something like that. But yeah, so YouTube. For me, my YouTube strategy will surprise people. My YouTube strategy has been less of hard strategy and more of quality through content and iteration. I was not good at YouTube tutorials. When I started doing them, I started doing them in 2012. And it took me a long time to get good at them, or at least what I think is better at them. And my strategy has always been, well, if I can out, work other people and release 20 videos on react that are all high quality and good, then those videos will naturally find their way to the top, you know, so I'm not going to fill my thing with sort of like those hilariously bad YouTube thumbnail designs that you see where people are doing like they're shocked face and like some some like really? Like click Beatty sort of thumbnail? - -36 -00:22:23,490 --> 00:22:25,500 -Wes Bos: what I did to my dear God, yeah, - -37 -00:22:25,500 --> 00:23:29,400 -Scott Tolinski: right. That stuff works. Trust me, it works. But that's not been my strategy. Because that's not me. I think it's kind of weak. And like, so for me, it's always been quality content first through quantity, quality content, through quantity, yeah, lots of that stuff. So basically just making a lot of good videos, and then people will find them. And my SEO strategy for that is write titles for these videos, where people are going to like, but naturally what they'd search for, if I was searching for something, I would name my video that like how to do this, and this. And that has just led to people finding my content. So really, for YouTube, the strategy has just been quality, quality, quality, quality. And that's a I think, a big message because so many people want the success they want the the YouTube thing so they go through all these click Beatty strategies, and they they tried to do it quickly. It took me years to grow the channel and I started in 2012. And maybe I could have grown it faster and other means but you know, I'm very, very comfortable with how I grew my channel. You know, that's awesome. I - -38 -00:23:29,400 --> 00:26:19,770 -Wes Bos: actually had watched a bunch of Scott sketch tutorials before I even had known Scott myself and it his stuff is all over YouTube. I've been on YouTube for for quite a while. Let me go back and just see, by the way, my first video on YouTube was on after effects and Final Cut Pro. So it wasn't even web development related. It took me like two series before I moved into web development stuff. Awesome. My first YouTube video was seven years ago, how to reset a WordPress password when forgotten. Nice. So WordPress uses MD five hashing algorithm and you can jump into the database and just update that hash and then your password will be reset. And I had been asked that like 100 times and I was like, Alright, screw it. I'm making a I'm making another one. And then I did another one how to import large SQL databases. So a lot of hosts when you're uploading a MySQL DB would just stop because the DB was like 500. Meg's so you could use this thing called Big dump. And it would take a big dump and split it into many pieces. And then I started like it's actually really funny. Just going through all of my old all of my old video do yeah, on here. I don't watch any of my old ones. I'm thinking about like unpublishing some of them. It's so cringy I also have like, I've unlisted videos of me in high school on the bus 12 years ago, that was I uploaded them to Google Video before YouTube was even a thing. Yeah, I remember I moved over Anyways, my strategy has always been just I kind of do two things. So first, what I do is when I release a free course, is only available on my platform. And then what I'll do is maybe two or three months after I released the course, I will slowly drip them out, maybe two per week on YouTube. And if it's a 3030 video course, then I can get 15 weeks out of that. And then what I'll also do is I'll just record these just like random one offs that sometimes I find people are having a hard time understanding destructuring. Or sometimes people are having a hard time understanding what the new react context API s and I'll just record a one off video that will sort of detail it in and usually they're about 10 or 15 minutes. And I wish I did more of those because they always do really well. And then between that my courses and just the one off videos, I've been starting to like kind of label them as like, here's how Baa baa baa works, just to kind of group them together. And that seems to do well for for titles. And yes, it's for pretty well, I'd like to do more stuff like this, like put more of my personality up on the YouTube channel, maybe show my face a little bit more. I'm at what, 53,000 subscribers, I seem to be getting about three or 4000 a month, which is has picked up significantly since I released my CSS Grid course, on YouTube. And it's all good. And I'm making pennies. Yeah, - -39 -00:26:19,830 --> 00:27:00,990 -Scott Tolinski: actually, that's a big misconception, you're not going to make a lot of money on youtube, I have a quarter of a million plus subscribers I have over one you know nearly 1002 and a half videos on YouTube. All most nearly all of them monetized I get a lot of views. And I do not make any sort of where near a livable salary on YouTube. I make like, you know, pocket change on YouTube. So that I think it's a big misconception, I wouldn't start a YouTube channel to make a ton of money. But it definitely is a good platform to help grow your own personal brand. And maybe like if you're like us doing courses or anything like that, it's definitely an avenue to make people aware of your quality content. - -40 -00:27:01,290 --> 00:27:53,760 -Wes Bos: Totally, totally. And I don't I should I say him, I don't mind saying how much I make off of it. I don't care. YouTube says you're not allowed to share these values. But I'm gonna say it anyway. So I get just for people who are curious. I last 28 days, I've got hundred and 6000 views, 3000 subscribers, and I've made 420 bucks, which is not nothing that's up significantly from previous months. I think it's because my CSS Grid course has been doing really well on YouTube. But that's kind of kind of interesting. So what actually one little kind of cool thing I've been doing is any money that comes from YouTube, I put into my kids like kind of savings account is hopefully over 2025 years by the time they're ready to do some adult stuff. They'll they'll have a little nice little chunk of change. That's sick. Yeah, cool. Anything else about YouTube riona moved on to tophatter. - -41 -00:27:53,790 --> 00:28:47,460 -Scott Tolinski: My YouTube strategy has changed over the years. And so before it was just create a lot of content. And I think one thing now that my courses are more developed, because before when I was doing my YouTube courses, I was recording the course as I was making it like I wouldn't write a course and then record it, I would just sort of do it free for all like, Okay, I guess next week, I'll do these videos, because this what the audience wants to see. But I found my courses are better if I plan them out and work them out and do them better. But I need to be able to support myself. So I have these premium courses now level up Pro, right, where you get access to all these premium courses. So my content on YouTube is now shifting to me more blog blog, like like an individual helpful video that's going to maybe help support some of this content rather than like a full course. But I'm still going to be doing free courses. So I guess in that regard, it is kind of helpful to see YouTube occasionally it's like a block. Yeah, and it works well that way. - -42 -00:28:47,730 --> 00:29:23,940 -Wes Bos: I really like YouTube in that way, just because there's something that you need to be able to get out and explain. Or there's something in your your one of your courses that maybe 7% of the people won't understand. And it's nice to just be able to point people to a separate video. So they don't have to stop the entire course to explain a specific piece of JavaScript, you can have just a supplementary one that can can be sent over. And I also find that people who are on teams, they'll often have a new hire, and my videos will be part of like the welcome package. Make sure you understand that this is how we use D structuring watch Wess video on that. - -43 -00:29:24,090 --> 00:29:27,720 -Scott Tolinski: Yeah, I get that and especially in like universities and stuff like that. Yeah. - -44 -00:29:28,050 --> 00:29:33,240 -Wes Bos: Yeah, that's really bizarre to me that a lot of my courses paid and free are part of university. Alan. - -45 -00:29:33,330 --> 00:30:15,060 -Scott Tolinski: Yeah. Yeah. Likewise, yeah. Before we can then the next one, which is Twitter. Let's take a moment to talk about one of our favorite sponsors here, which is Log Rocket. Now Log Rocket is one of these services that I think it's just gonna save you a ton of time because really what it's doing is saving you that that that difficult time where you're trying to solve these bugs, right and maybe you have some other tracking tools like Excel. entry or roll bar some of these that are getting you, you know, there may be harnessing your errors. However, luck racket does much more than than they give you a full on vision into what's going on with these problems. - -46 -00:30:15,210 --> 00:32:03,480 -Wes Bos: Yeah, it's a, I think that they've put it really well in their documentation that front end errors are not simple. You're essentially shipping all your software to a browser, which could be one of 15 different browsers, it could be iE 11, it could be the newest version of Chrome, I've had people come to me with errors. And it turns out that they're on like a year old version of Chrome. And for some reason, it just stopped updating like, they're web developers, right? There's all kinds of different devices, you got local storage, you've got often people are on proxies, they have weird Chrome extensions installed that are messing with it, there's just a whole bunch of stuff that could go wrong on the front end. So what Log Rocket does is three things exception tracking, and this is it will log any errors that happen on the client, and then it will group them together, you'll be able to say, okay, 10,000 people are having this specific error cannot read property value of undefined. And you have to go in there. Oh, I forgot to check if there was actually element there before before I pulled the value out of it. And you can fix those. Next one is share session replay super important because if you want to know how this error happened, the steps leading up to it. So they essentially record the clicks and the scrolls and the hovers and all of the steps that the user takes up until that you hit that bug. And then you can replay it like it was a video on your actual back end. And then the final one is application performance monitoring. So things like download failures, JavaScript load time, JavaScript, parse time, x HR latency, that stuff can sneakily get into and make your website feels slow over time. So this, it'll sort of monitor it over time. It's pretty neat. So check it out at Log Rocket Log rocket.com, forward slash syntax. And that's going to get you a 14 day free trial. Thanks so much to Log Rocket for sponsoring. Awesome. - -47 -00:32:03,990 --> 00:32:43,410 -Scott Tolinski: Thank you Log Rocket. Yeah, awesome service. So let's get into Twitter, where the king of the Twitter land amongst the two of us here is obviously Wes, if you compare our followers now, I am going to admit here, I'm gonna defer to you on a lot of this stuff. Because I was late to Twitter, I was super late to Twitter. And you probably had more subscribers or followers on Twitter than I have right now, when I joined Twitter, so I am very sort of new to this world. And so follow me at S. Alinsky. You know, let me help me grow that audience a little bit. But yeah, let's I want to hear your strategy for growing your Twitter following Wes. - -48 -00:32:43,560 --> 00:33:24,150 -Wes Bos: Yeah, I get tons of people messaged me about this. And my answer is just do it for I went on this website, Twitter, birthday.com. Do it for 11.3 years. So I was on Twitter extremely early, which was a huge advantage. Because similar to how Instagram is right now, people were hungry for new people to follow. Whereas I think on Twitter now people are a little bit overwhelmed with with how much content is out there. So I got in on the game early, which is why you should anytime a new platform comes out, you should spend some time on it because it might pan out to be the next Twitter it might might just flop like ello and not be a big thing. - -49 -00:33:24,180 --> 00:33:30,540 -Scott Tolinski: There was another new one that that came out and I was on it for like one day and I could tell they didn't have the stuff and I was like no doesn't does it - -50 -00:33:30,570 --> 00:33:33,180 -Wes Bos: like mastodon No, no, I - -51 -00:33:33,180 --> 00:33:51,450 -Scott Tolinski: don't remember how to dark theme. People will know somebody and somebody will know exactly what I'm talking about. But Google, everyone got the invite so and so I was on it for like, I'm checking out this today. And it was sort of be like a Facebook, Twitter hybrid kind of thing. I forget. I was I used it once. And I was like, Yeah, no, it's not gonna happen. - -52 -00:33:51,660 --> 00:35:48,650 -Wes Bos: Not worth it. So I've been on Twitter for over 11 years now. And how I got most of my Twitter followers was by doing Hot Tips. So it didn't invent the hot tip. But I did invent the little flame emoji in front of a hot tip, which is really cool to see that it has sort of like been, a lot of people have taken it on when they post Hot Tip. So sort of a standard now, which I don't mind at all. I think it's kind of cool. And the idea behind the hot tip is just like a tasty treat that something. Here's how X, Y and Z work. Here's a cool little trick about how something works. Here's how a new feature in JavaScript works. Oh, in maybe a year or two in JavaScript working or in CSS, we'll get this new feature. And and just by giving people a little nugget of information, that's why they're on Twitter, they want to see a little stuff they want to stay up to date on the industry. And they don't want to be pushed off to a 6000 word blog post about about something they want to receive a nice little piece of information in the kind of continually update all of their stuff. So I've been doing that I've done I've been doing Hot Tips for probably about four or five years now. Before that, I was obviously very involved in, in the web development world on Twitter. And that it by having these these tweets, often what will happen is that they'll they'll get retweeted by like a huge accounts like CSS tricks or smashing mag or, or they'll just like ripple through. And they'll get tweeted by retweeted by 400. People who have 300 followers each and then that will, once you do that, like six or seven times, people will start to see your account keep popping up, and then you'll and then that's what that gets your actual follow. And more importantly, that's what sort of builds credibility behind your person, because there is clearly ways to pad your, your Twitter followers if you want it to I'm sure you could go on eBay and buy 100,000 followers tomorrow. But if people don't enjoy the content that's just gonna fall flat. - -53 -00:35:48,780 --> 00:36:21,750 -Scott Tolinski: Yeah, I think my Twitter following amounts are proof that I'm not buying Twitter followers. But yeah, no, I think the message here is really the same as the message that you know, I was thinking in YouTube is really that quality content is going to Trump everything. And I think that maybe is a message overall is that if you're producing quality content, I think it's going to mean it will get in front of the right eyes, eventually, if it's quality content, and you usually see the cream rise to the top look at these sayings. I'm coming out with left and right here. - -54 -00:36:23,130 --> 00:37:31,880 -Wes Bos: So a lot of people say like, okay, it must be nice that you've been on Twitter for so long and got in on it early. But I still think that there is room if you join Twitter today, I think that there is tons of opportunity to get it. So Steve, Chicago, I can't even say his name. But he has taken the Hot Tips. And he's been posting these super high quality design tips. So So yeah, here's a way if you have a lot of information, here's a way to make that information a little bit more digestible. Here's a way to use borders that are a little bit more gray than black, and it looks so much better. Here's a way and then he just creates these these Hot Tips. Again, he's creating content for the platform. He's not pushing you off to a YouTube video or to a thing and he's gone from, I don't know, I think like a couple thousand followers to as I'm recording, he's at 28,000 recording, and he's been doing them for a year. So just a perfect example of like if you actually still consistently produce high quality content, if there's a huge hunger for it, because anything that he posts goes wild, and it's because it's really good quality. - -55 -00:37:31,940 --> 00:37:37,440 -Scott Tolinski: Yeah, absolutely. I think that's like one of the best bang for buck follows I've had in the past year. - -56 -00:37:38,850 --> 00:37:46,500 -Wes Bos: So we'll we'll link it up. Let me just type it out right here as well. Is te Ve SCHOG er, - -57 -00:37:46,530 --> 00:37:51,210 -Scott Tolinski: I feel like just for being a fellow Canadian. You should just know how to spell or pronounce his name. - -58 -00:37:51,330 --> 00:38:04,530 -Wes Bos: Chicago. Yeah, actually, he lives like a couple 45 minutes away from me. A lot of a lot of Canadians so does Adam wathan who posts a lot of really good tips as well. He He lives close to me as well. So it's something in the water here. Hot water. - -59 -00:38:04,530 --> 00:38:06,840 -Unknown: Yeah. Next up, we - -60 -00:38:06,840 --> 00:38:11,360 -Wes Bos: have Facebook. My Facebook strategy has been week - -61 -00:38:11,480 --> 00:38:13,440 -Unknown: week. Yeah, mine as well. Likewise, - -62 -00:38:13,880 --> 00:39:38,280 -Wes Bos: I'm on Facebook at Wes Bos dot developer. And what I have is that I have my assistant take my Hot Tips and and repost them on Facebook. So here I am telling you not to push your content otherwise, but I think that the Hot Tips work well both on Facebook, as well as on Twitter. So my system reposting them. I also recently have been posting all of my personal Instagram photos to Facebook my business Facebook account don't add my I have like 6000 friend requests on my personal Facebook don't add that way. Yeah, I don't either. But I for the longest time I didn't do that. And but I also part of what my personal brand is, is that people have other interests other than web development, right? They they like that I do barbecue they like that I post photos of my kids like are they like whatever I'm doing around town going for dinner and stuff like that. So I have started posting that on Facebook as well because people like to see the life behind the actual person as well. Because you kind of feel like you're friends with them. And I don't know it's kind of fun when you post something about a cooler I bought you can or a barbecue that you always get amazing information from other people who have similar hobbies and you get to kind of have a cool little friendship with these people. Yeah, - -63 -00:39:38,310 --> 00:40:18,230 -Scott Tolinski: my Facebook strategy has been Yeah, letting MailChimp and Instagram automatically post to Facebook for me. That is that is probably the extent of my Facebook strategy. I feel bad about that because there's a lot of opportunity but obviously, with where Facebook is in the world today, I just I don't feel good about being on Facebook, I don't feel good about being on facebook.com. And I understand the marketing possibilities. But like, at the same time, I don't know how much time and money I want to invest in Facebook itself. So I'm sort of staying away from it regardless. Yeah, whatever it could bring me, you know. - -64 -00:40:18,380 --> 00:40:30,090 -Wes Bos: So I find that probably 90% of my Facebook followers are from overseas. So lots of here, let me just take a quick look of or people I - -65 -00:40:30,090 --> 00:40:31,400 -Unknown: would agree with that. Yeah, - -66 -00:40:31,400 --> 00:40:49,230 -Wes Bos: lots of people from India, lots of people from Sri Lanka. Anytime that I say kind of take a look of where people are from that are liking and commenting on the stuff. It's almost always outside of North and South America. Which is kind of interesting to me that that's where a large part of the audience is coming from. - -67 -00:40:49,590 --> 00:40:50,610 -Scott Tolinski: Yeah, yeah. - -68 -00:40:50,610 --> 00:40:51,330 -Wes Bos: What else do - -69 -00:40:51,330 --> 00:40:53,610 -Unknown: we have for social media? - -70 -00:40:53,790 --> 00:40:57,380 -Wes Bos: Reddit? Yeah. interesting one, yeah, read it, - -71 -00:40:57,380 --> 00:41:56,550 -Scott Tolinski: it's tough. Because if you post the wrong thing, at the wrong time, you'll be put on a skewer, and everyone will be very upset. Unfortunately, or fortunately, I've never really had that happen, because I'm usually, you know, pretty cautious about that. They're very suspicious. editors are very suspicious about marketers, so I don't do any more like if people mention me, or level up tutorials or the podcast, I'll pop in and be like, Hey, you know, hey, hey, what's up by myself. But for the most part, I'm only posting my my free youtube videos of helpful tips and stuff like that on Reddit, or if I have, you know, a tip here or there or a post, I'll post that stuff, and sort of let the marketing stuff take over, as in people are, oh, hey, it's level up tutorials on YouTube. And then I'll be like, yeah, hey, check out my my store while you're at it. But for the most part, it's really difficult. You don't want to sort of burn people over there. They can get a little aggressive, I'd say, - -72 -00:41:56,690 --> 00:42:11,420 -Wes Bos: yeah, there's there's no marketing to to read it at all. I found my strategy. I've even got banned from our web dev couple years ago, because every time I had a new blog post, I would submit it like, Oh, yeah, submit a blog post? - -73 -00:42:11,420 --> 00:42:13,260 -Unknown: Yeah, like actual content. - -74 -00:42:13,440 --> 00:42:49,710 -Wes Bos: Yeah. But then I got banned from it. So I stopped posting my stuff all together. And I just, I just spent a lot of time in the comments, I find that Reddit web dev is very, very helpful to me in terms of research about what people are trying to learn. So I'm always reading what's going on there. And then often people will tag me. And then I'm at a point now where people will submit my own stuff, which is great. Yeah. And then I can just chime in and say, Hey, thanks so much for submitting it. And you just have to be part of a community which I have like I have a part of the The good thing about my Twitter account is that I've been on it for let me let me see how many years I've been on on Reddit. - -75 -00:42:49,710 --> 00:42:51,170 -Scott Tolinski: Oh, I've been on it long time. - -76 -00:42:51,690 --> 00:42:59,280 -Wes Bos: Let's see. April to 2007. So I've been on it for as long as as long as I have on twitter. 11 years. So - -77 -00:42:59,280 --> 00:43:09,380 -Scott Tolinski: where does that tell you that? Oh, okay. 2007. Wow. Okay, I'm on August 21 2009. So yeah. Wow, super. - -78 -00:43:09,380 --> 00:43:11,010 -Wes Bos: What are you doing those two years? - -79 -00:43:11,040 --> 00:43:16,380 -Unknown: I surprised that you've been on for longer? So I felt like I've been I've been on for years. A long time? - -80 -00:43:16,830 --> 00:43:32,820 -Wes Bos: Yeah, it's it's good. And I think just being part of a community and people have asked tons of questions on there. And it's it's easy to chime in and help someone out. And then if you help people out six or seven times, then they start to go, oh, who's this West guy? Oh, he's got tutorials. Right? Yeah, whole reciprocity thing comes in again. - -81 -00:43:32,850 --> 00:43:49,080 -Scott Tolinski: Yeah. And if you're listening to this, and you ever feel like posting this in text podcast, or any of my stuff, or Western stuff, yeah, please do, because it looks really pathetic when you post your own thing that, you know, like, hey, check out this, this YouTube channel, hey, check it out. - -82 -00:43:49,140 --> 00:44:21,780 -Wes Bos: Anytime somebody, you can go to reddit.com for slash domain, or slash syntax.fm. And you can see, anytime someone has submitted the syntax podcast, and every single one of them has gotten at least 10 votes, and most of them have like 130 220 50. So they do well when they do get posted. Because obviously, it's good content. But it's just not something that we can just machine dump all of our links on there. It has to be something that the community suggests, right? - -83 -00:44:21,810 --> 00:44:26,430 -Scott Tolinski: Yeah. Do you spend any time on Reddit that's not related to web dev stuff? - -84 -00:44:26,670 --> 00:44:33,270 -Wes Bos: Um, I go on, like, there's our smoking, which is smoking meat, not cigarettes, or vaping. - -85 -00:44:35,130 --> 00:44:39,840 -Scott Tolinski: What about smoking like this talking other people about smoke? cigarettes? Yeah. - -86 -00:44:40,620 --> 00:44:57,060 -Wes Bos: I got a DIY just to see people's like, what they've been building, which is always really interesting. Our metal core is really good for new music suggestions. And personal finance Canada. It's really good. And then there's like a local one Hamilton for my city. - -87 -00:44:57,150 --> 00:45:28,350 -Scott Tolinski: Oh, yeah. And I see what's going on. Yeah, I'm on the Denver in the color. I'd also like just normal personal finance, but I actually moderate and I didn't just my I think I created the our B boy, which is dancing one, which I admittedly do not put any effort into moderating that thing, but it's got 50 or no, it has 5000 subscribers. That's not very much but it's a breakdancing Reddit here. So if you want to check out some B boy clips, check it out, I guess. I don't think that brings me anything personally in the marketing but it's there. - -88 -00:45:28,770 --> 00:46:00,240 -Wes Bos: Yeah, let's go Reddit. Reddit is a very interesting one. It's I think it's sort of replaced the the forum for me like years ago, it was as part of lots of different types of forums that and you can always find a community that is super into like I was, I've been getting into meat hearing and then I just go to the I forget what it is like the sausage forum. Be careful searching for sausage on Reddit. But you can find people that are obsessed about it and have been talking about it for years and you can just dive in and just learn so much. - -89 -00:46:00,300 --> 00:46:02,490 -Scott Tolinski: I recently joined the lawn care Reddit. - -90 -00:46:04,650 --> 00:46:06,210 -Unknown: I was like, Oh no, what - -91 -00:46:06,210 --> 00:46:07,350 -is my life? - -92 -00:46:07,350 --> 00:47:05,760 -Wes Bos: Oh, that's great. I need to do that one. Yeah. Anyways, next last one we have here is Instagram which is been blowing up in the last maybe year or two for web developers. I've been on Instagram for probably six or seven years but just recently web developers have been have been joining in on it it's kind of interesting again it's there's a lot of people posting really odd photos of themselves just holding laptops are like that's a weird it's a weird thing that that gets so so many views use some woman or like a coffee beside a laptop with like perfectly put up code I'm always self conscious of taking a photo of my screen because people are like hey shit code there buddy. Yeah, but it's it's interesting, but I do find that it's kind of cool to a lot of the stuff is very surfacey but if you get through that our boy Denise will link it up in the because I can't can't I always butchered his last name is it Dinesh or Denise because - -93 -00:47:05,850 --> 00:47:06,390 -Unknown: Dinesh - -94 -00:47:06,420 --> 00:47:09,570 -I've been saying Dinesh Okay, I guess finish sorry. Finish. No, he's - -95 -00:47:09,570 --> 00:47:11,280 -Scott Tolinski: the man. Yeah, he's absolutely man. - -96 -00:47:11,310 --> 00:47:31,650 -Wes Bos: Yeah. So he posts tons of extremely helpful content. He's He's a perfect example of how to do Instagram, right. She's got like 20 25,000 followers. He's always pumping other people in the in the community linking up really good stuff, posting reviews of different tech gadgets that he has so big fan of the stuff that he puts out. It's pretty good word. - -97 -00:47:31,740 --> 00:47:42,810 -Scott Tolinski: Yeah, yeah. And again, I'm gonna need these platforms follow both of us. I'm at as Alinsky for breakdancing footage and at level up tutorials for photos of my computer sitting next to a coffee cup. - -98 -00:47:43,050 --> 00:48:04,020 -Wes Bos: I'm at Wes Bos WGS POS and I just cracked 10,000 followers which means that I can do swipe up in Instagram story is so good because now I can swipe up to listen to the podcast Swipe up to buy a course Swipe up to anything and it's it's so much better because people always DM me being like, Hey, what's the link for? Yeah, xy and z? Yeah, - -99 -00:48:04,200 --> 00:48:22,440 -Scott Tolinski: that's so frustrating. Okay, follow at level up tutorials. I only get 5000 I am halfway there. It's taken me a long time to get 5000 on there. So yeah, it is it's hard cuz you can't link your stuff and people always be like, Where's this available to? I'm like, I just go to level up tutorials. COMM But I can't link anything. So. - -100 -00:48:23,100 --> 00:48:32,850 -Wes Bos: But yeah, I love post though. And I have 1000 posts and 10,000 followers, you have 99 posts and 5000 followers. So clearly you're doing something right. Well - -101 -00:48:32,850 --> 00:48:44,730 -Scott Tolinski: Am I just started the level of tutorials. One my personal one has like 4000 posts, but it's all breakdancing stuff. So that's pretty much it and photos of my dogs down my son and my wife. So yeah, - -102 -00:48:44,760 --> 00:48:49,920 -Wes Bos: mop dog. mop dog. Cool. All right. Let's move on. Oh, man, where we are? - -103 -00:48:49,950 --> 00:48:52,050 -Scott Tolinski: Yeah, cooking on the time here. - -104 -00:48:53,160 --> 00:49:49,860 -Wes Bos: All right, let's, let's take a break for our other sponsor, and then we'll keep going with it. So hang in with us. This is there's a lot to unpack in this episode. So our next sponsor is fresh books, which does a cloud accounting software. I love fresh books because I run my own business. Speaking of marketing and running your own business. Part of what you don't want to spend time on is is the the business part of it, which is doing your books chasing after unpaid invoices, setting up wire transfers, all of that miserable stuff. So fresh books will take care of all of that stuff for you. You can log all of your expenses, you can give people estimates, you can turn those estimates into invoices. You can log all of your hours that you're working for specific people and then attach specific dollar rates to that work and different types of work and then just turn that into an invoice. It's amazing. I love it, check it out@freshbooks.com forward slash syntax to get a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring. - -105 -00:49:50,070 --> 00:49:51,240 -Scott Tolinski: Thank you. Alright, - -106 -00:49:51,270 --> 00:49:59,520 -Wes Bos: so let's keep trucking here. Yeah, let's talk about paid ads. I have a little bit experience, a lot of failure in this. I've - -107 -00:49:59,520 --> 00:50:00,600 -Unknown: also had You're in this - -108 -00:50:00,780 --> 00:51:29,610 -Wes Bos: paid advertisement is when you go on to Facebook, Twitter, Google ads, you and you pay somebody for a banner ad or insert a video, I've spent a lot of money on Facebook, which is actually funny enough how I've got a lot of my Facebook followers, I have about about 35,000, Facebook fans, or whatever you call them likes, and those almost entirely, probably about 20,000 of them had come from people seeing me post ads on Facebook for my courses. And they didn't necessarily buy the course, but they liked the page, which is great, because that's what you want is you want people to be on it. And then you got to hit them up 100 times over the next two years. And then they actually, they actually buy something. So I at some point, I had a Facebook where I put $1 in I was making $1 20 but I there's I couldn't figure out how to scale it, you know, like I wanted to, I wanted to be able to put in a million dollars and get back $1.2 million. And I couldn't figure it out. So my time is much, much better spent creating free courses, creating free content doing this podcast that pushes my personal brand so much more forward. It's and that stuff is harder. A lot of times people email me being like, okay, like I'm ready to pay $500 for ads, but it doesn't work. Yeah. And it's really frustrating because you think that advertising is just this thing where if you have a bit of money, it'll just work and it doesn't you have to like do a B testing and trial too much. - -109 -00:51:30,120 --> 00:51:54,660 -Scott Tolinski: I don't have the training. I'm not good at it. If I was in a position where I have someone whose specialty was that, like I would be about giving them some freedom to try that. But I personally do not have the time to learn those skills. And yeah, sometimes sometimes those ads can seem a little inauthentic to I think about that guy with the Ferrari in his garage. He's like, Oh, yeah, Ty Lopez stir. Yeah, that guy. Oh, - -110 -00:51:54,660 --> 00:53:28,950 -Wes Bos: that's really interesting. Yeah, yeah, he's if you don't know are, you probably know who I'm talking about is this guy, he spent millions of dollars on YouTube ads versus Oh, here's my Ferrari. And he says Ferraris. And Brent probably has a lot of people doing Oh, he's actually making bank on what he's doing. Because he promotes the sort of like lifestyle, and then all these kids want that lifestyle. And then he sells courses to become like a social media marketer, or he sells like a book club, where it's like, there's all these horror stories online, I follow him on Instagram, just because I am. Like, he's obviously a genius marketer and able to manipulate people. And it's, it's kind of he's very, very sleazy in what he does, but I still follow him because he has he knows what he's doing in terms of how to like he, every day, he has a new pair of shoes, he's got these kicks of the day, where like, obviously kids love shoes, and Ferraris and free MacBooks. And then they follow him and then a certain percentage are going to shell out they're like, go into debt on their credit card and buy his is like a millionaire course. So yeah, he's really, really, really sleazy. Which, again, like developers have such a high bs tolerance. Whereas I think other industries, like kids wanting to buy a Ferrari, or maybe fitness, there's, you can be a little bit slimy like that. But there's developers build this stuff. They know how it works. And they have very, very high bs tolerance. And there's no way that you could get away with that. I try to market developers. - -111 -00:53:28,980 --> 00:53:42,000 -Scott Tolinski: Yeah, for sure. Yeah, I think that's good though. I high bs tolerance is a is a is a excellent thing to have here. Because there's so much Bs and people trying to sell you all sorts of stuff in this space in general. Yeah. - -112 -00:53:42,150 --> 00:54:39,240 -Wes Bos: I've also tried Twitter ads in the past, to very little success. I've had many calls with Twitter ads spokesman, and they clearly don't know what they're talking about. They just want you to spend more their answer to all my questions where you really have to spend about three or $4 per XY and Z and then it just never makes sense. They just want you to pour money into this thing. Like these ads are good for people who want just notoriety. Like if you're selling a car, right? And you hear about a car three or four times on a YouTube ad or something, but it's not good for people like us where we want to track if I put $1 into this machine, I want to get a buck 50 back. Yeah, right. Yeah, it doesn't doesn't work out. Well. Some people have figured it out. You often see on Instagram, those free watches or free rings and stuff like that. People figured out how to sell you a $10 ring and make money off of that but I can't sell a $75 course and come out ahead on it. - -113 -00:54:39,480 --> 00:54:40,740 -Unknown: Yeah, not for me. - -114 -00:54:40,980 --> 00:56:01,140 -Wes Bos: Next up, we got email marketing. This is something I have a very large email list which email marketing is probably responsible for a good portion of my my big my asks. So like, obviously I spend time on all of these different platforms all day long, but then when it comes to Selling someone, I'll send an email out and I don't I don't do email particularly well. What's really big right now is called drip marketing or automation marketing where if someone were to watch three of my free courses, then I would hit them up with a coupon code and make them make them buy it, I just what I do is just every month or two, I just send out a couple emails saying, Hey, I launched a new course or Hey, it's a sale. And it works really well for me. I'm sure there's probably some some optimization that I can do in there. But I've just been spending all of my time on creating courses and people seem to remember I can lucky with a nice, memorable name, people will remember who I am. And my email and I only email they know that, oh, Wes has clearly something to say. Because he's emailing. And not Wes is emailing me every three days with a new way to try to get me buy a course. And I think that's working well for me because I have extremely high open rate and extremely low unsubscribe rate. - -115 -00:56:01,379 --> 00:56:42,870 -Scott Tolinski: Yeah, yeah. And I, I add again, another thing, I'm not very good at it. Clearly, my marketing game is needs to be stepped up a little bit, but I do a little bit of email, I maybe send one a month, I'm gonna probably step it up to being like two a month to say like, here's the next course. Like, for instance, I have a new course coming out this month on electron, so I'm probably going to send out another email just to make people aware of that. Because I think that's like, one big thing is that I feel like I'm annoying people with emails. But yeah, at the same time, my customer feedback to me is that we don't know what the next course is. We don't know what to look forward to. Like, that's such a huge potential for me to be able to say, Hey, here's what's next. Here's what's coming. You know, - -116 -00:56:43,200 --> 00:57:16,830 -Wes Bos: I totally agree with that. And this may be why I need to push a little harder and email but I'm pretty, pretty happy spot right now. And when I do and people know, when I do have a course, I'll send you like, when I launch a course, I'll probably send you four or five emails and and that's totally fine. It almost out of like, I have a quarter million people on my email list. And I almost never get a snarky reply, which is unheard of. Yeah, because yeah, you're almost always gonna trigger someone being like stop spamming me or things like that, which I feel pretty good about people not getting. - -117 -00:57:16,950 --> 00:57:18,330 -Scott Tolinski: Yeah, absolutely. - -118 -00:57:18,900 --> 00:58:02,040 -Wes Bos: I also email marketing is really helpful for me to find out what people want and often tell people to just hit reply, which is a nightmare for my email inbox. Sure, I'll say like, hey, hit reply, tell me what you you were struggling with right now. And you can often take that what they're struggling with and take like those phrases that you hear over and over again, where I'm feeling overwhelmed or the stuff is moving too fast, or I hearing a lot about graph qL and you can take those words and put them directly into copy. Because copywriting is another huge part of marketing which is how do you persuade someone to actually buy the course and by taking the words right out of their mouth and putting it into copy? It's a fantastic way to to write good copy. - -119 -00:58:02,100 --> 00:58:25,320 -Scott Tolinski: Yeah, well, me no words good. So I am terrible at this. And I usually I speak things off the cuff better, I think, than I do write them so I'll usually do voice dictation to write any of my copy, then I'll send it to Courtney and Courtney he'll be like what is this is this English like she was just just absolutely slaughtered and helped me a little bit on that regard. But yeah, it's another thing that's a little tough for me. - -120 -00:58:25,620 --> 00:58:55,680 -Wes Bos: Reading copy has always been something that I enjoy so I'm really happy that I tried to just like make it very personable and not like I try to take a lot of stuff out of it. I did I have a couple copywriting courses in university which which may have helped as well I know that there's some good good courses on learning this stuff out as well. But that whole marketing space is like there's marketers trying to sell stuff to marketers and it's all just like kind of a nightmare everyone's trying to sell each other for dollar PDF so yeah - -121 -00:58:56,400 --> 00:58:58,440 -$300 access to slack room - -122 -00:58:58,500 --> 00:59:12,300 -Scott Tolinski: I'm a sucker though for for for that kind of audio book though. Like this audio Yeah. Oh my god like business. Which one is dev just all of them? Oh, yes. Anything that fits that sort of my own like hmm, I think about this one. - -123 -00:59:13,590 --> 01:01:41,880 -Wes Bos: Awesome. Let's go on to the next one, which is partnerships. So yes, is another way that you can do both partnerships when people partner with me and me being the person who can advertise them as well as partnerships with with affiliate so let's start off with partnerships with other companies. So we be we being the the advertisers out there so I've done a couple partnerships I get tons and tons of email about people looking to to partner because that's the big thing right now. It's it's called influencer marketing, which is another cringy word but companies don't want to buy ads anymore. They want to work with someone in a YouTube video or something like that and use their product and almost always it's a very bizarre product that it cannot see myself flexing into my course is that all Yeah, but twice so far, it's worked out nicely. The first one I ever did was was century, which does like error tracking. It's part of what, uh, one of our sponsors is today Log Rocket. Yeah. And that worked out really well, because it was a product by us myself. It was something that I knew a lot of the developers behind it. And I was very, very happy to to recommend it to users. And that was a lot of times people want to do affiliates based on that. And I always that was just a lump sum. So they sponsor the course, I get a lump sum of cash, and they get a video in the course as well as something in the in the entry email. Same with my upcoming sticker batch, I have somebody who is sponsoring the sticker batch, so they paid to print the stickers, they get a sticker in the batch. And then they also get a little blurb in the thank you email once you once you've bought it. And then the last one I did was with my CSS grid.io course, Firefox came approach me and was like, hey, how can we work together? Often these partnerships are a result of someone reaching out being like, hey, I'd love to do something, yes chat, and you jump on a call and sort of just shoot the shit with them. And something comes out. And it turned out that Firefox was releasing their grid dev tools. At the same time I was working on my grid course. Firefox's grid dev tools were amazing. I would have used them anyway, if they didn't pay me. And it's just a perfect fit. So they sponsor the podcast. And that's great. Because Firefox is very much about pushing the open web forward. And by by allowing me to be paid, it covered my salary for a couple months. And I was able to full time put my time into creating this free course, where I didn't have to sweat about doing other things and making sure I made money in that part of it. Yeah, so yes, I do. What about you, for me, I - -124 -01:01:41,880 --> 01:03:43,110 -Scott Tolinski: almost always turned them down. There's exceptions. I did a series that was sponsored by PrestaShop. One point when I was really into like, Magento sort of stuff, they saw my my work in that space. And it worked out well. Because they they were just going to sponsor like a course on it. And, you know, pay for each episode kind of thing. And then that worked out well for me, because I mean, PrestaShop was pretty sweet at the time. And it definitely fit into my content. It wasn't like out of the realm of what I was doing already. And so if something like that comes up, you know, I'll think about it. But for the most part, I usually, if I'm going to be working with a brand, for instance, lately, I've worked with I worked with Meteor at one point, I was doing some official videos for them. I did official videos for sketch, where my videos are published on their channel, right? I they give me the content, whatever I record, and it lives on their thing, and I don't own it as level up tutorials. And then same thing, most recently with figma where I was doing their, their official tutorial videos. And I like that flow because it doesn't necessarily like make my brand look like hey, I'm doing something because somebody's paying me even if I love figma. I mean, for instance, I reached out to figma to start that relationship, telling them how much I love their product and what I get, even though it's something that I loved and whatever, I didn't want them to sponsor my course on figma on level up tutorials, because I just don't want that sort of connection. Right. I'm happy to do their videos for them. But that's the kind of work I'll take in that regard. Yeah, so that that's pretty much it for partnerships for affiliates. I know you you do a lot of affiliate work. And I'm personally I'm just starting my affiliate program. So if you are interested in making right now, it's just sales, not subscriptions. If you're making interested in making 40% of sales on level up tutorials, and you want to you enjoy my content, and you'd like to share it reach out to me on any platform, email, Twitter, any of that stuff, let me know because I'm forming the beta forts up right now. And I'm wanting to get some affiliates on there. So check it out. - -125 -01:03:43,379 --> 01:06:15,510 -Wes Bos: Yeah, affiliates are awesome. When when it works out well. So I have a what's called a closed affiliate program. No, not anyone could just sign up for it. But what will happen is that if you're listening to this, it's open as well. If you have some sort of audience, whether that is so I have I have affiliates that have email newsletters, I have affiliates that have GitHub repos, where they just put one little line of text saying, Hey, this is a node repo, if you want to learn know, check out Wes, his course, I've affiliate to have Sublime Text extensions, that maybe once or twice a year, they update the extension. And in the in the release notes. They say hey, thanks so much to us for supporting my time because I don't know open source is a weird thing where it's it's frustrating that a lot of open source developers cannot get reimbursed for the time and it also often takes a toll on them. That's why we see people just kind of go AWOL on on open source projects. So it's really cool to be able to partner with some of these open source things and do it in a in a non invasive way. Like sometimes you install npm install something and you get just blasted with donate links, which I think is a little bit much but if you can do it in a way that you are referring people and if you've actually almost everyone who is an affiliate of me has Take in one of my courses and say this is great, I would wholeheartedly recommend it, which does the best for referring things like if you've actually checked tried something out. And that's why one of our, our sponsors dev lifts has done so well, because I went through the dev list program, and saw great results. And then I said, this is great, I recommend it, right. I wasn't an affiliate of dev list, they were just a sponsor on the podcast, but I have, I don't know, probably 70 or so affiliates, where people will recommend my courses. And if somebody buys one of my courses that they recommend, and also, this is really neat, I rolled this out a couple of months ago, if someone refers a free course of mine, and so they end up buying a paid one after that, then they get credit for that, which is great, because sometimes you want to say like, check out what's a CSS Grid course. And then they'll say, Hey, that was good. But let me let me do a paid one. And that person should get get 40% cut of that course because this is a refer to it. Right? So email, people have email newsletters, anyone that has a decently sized audience, people that have blogs, they want to put a little banner in the side, something like that, it's a great way to to expand your audience and and share in that revenue from from people who might not be able to reach otherwise. So - -126 -01:06:15,570 --> 01:06:16,230 -Unknown: yeah, so - -127 -01:06:16,380 --> 01:06:25,620 -Scott Tolinski: yeah, definitely a big opportunity there. But again, that really only applies if you're selling something, you know, if you're Yeah, marketing yourself, you can't really have an affiliate program for yourself. And - -128 -01:06:25,890 --> 01:07:22,770 -Wes Bos: it's it's such a good system for what we do. Because there's it's not like we're shipping a T shirt, we're only making $10 per t shirt. Like the the profit per course that we have is fairly high. So you have the ability to offer someone like a decent chunk, like I've had people buy a 1200 dollar team license, and one of my affiliates has gotten a $480 payout, just from like assists, like referring nicely referring one little link to someone, which is pretty cool. So I definitely would do that it can go awry the other way, there's a lot of sleazy affiliate stuff, which is why I don't have it open, because there's people that will just spam your links everywhere. And then that looks bad on you as a brand. Because all sudden your stuff is is not in a good space. So I only allow people who have our part of the industry, right and part of our community to have have links. Yeah. All right, one more section. Unless you have anything else on affiliate. No, I don't. - -129 -01:07:22,800 --> 01:08:02,010 -Scott Tolinski: Yeah, no, but I have a decent amount, a decent amount. I'm not gonna take up a ton of time, because we're already way, way, way, way over. But next section freebies, I give away a lot of freebies, if you don't know, I have over 1000 plus videos for free on my YouTube channel. And not necessarily wasn't a marketing decision. That was simply just a that's how I create content. But now it works that way where I give away a ton of free content, and specifically to help the community rather than to sell things. But at the same regard, it works in like a marketing fashion. But giving away free stuff is always a surefire way to get people to pay attention to your content, because it's free. And if it's free and good, then that's good for you. - -130 -01:08:02,310 --> 01:09:29,909 -Wes Bos: Yeah, that's I think that's why both it's worked out well for both of us. Because we're not giving away often you see people like slapped together like, Here's 10 short keyboard shortcuts in a PDF. Give me your email address, so I can spam the hell out of you. It's like no, I literally spend months and months and thousands of dollars worth of my time on these things, just to show you that, like and this is good. And also giving back to the community. Right? Absolutely. What other freebies in like March, I do stickers every now and then I just ordered another batch of stickers. So it should be another month or so before I can I get those to be able to sell and the stickers is kind of a fun one because I initially started as just like a fun thing because developers love stickers and I love stickers, I love to be able to give them away. And I've since kind of honed that process where I can make a buck or two per bag of stickers that I sell which is pretty nice because it takes me a lot of time to put all the sticker stuff together I have to hire my assistant who handles all of the email about it and all of the return stickers and the stamping and the licking and there's a lot that goes into it. It's a huge process. But it's just a kind of another fun way especially like I think getting physical mail in the web development world is such a good way people send me t shirts all the time. And it always puts that company in my mind because like who gets mail anymore right it just getting fun mail is the best. Yeah, - -131 -01:09:29,930 --> 01:09:38,640 -Scott Tolinski: I know it's tough like did you ever imagine that you'd be a sticker mogul at this point in your life. Or Baron or whatever. - -132 -01:09:39,030 --> 01:09:57,060 -Wes Bos: No, I was super into stickers like sticker books and I was a kid and now I get older and it's it's really fun to do it as well. Word. Anything else getting free stuff. Sometimes companies send me free stuff like I've got a What is it like I got a router at amplifi HD. It's like a mesh network router for free software. - -133 -01:09:57,060 --> 01:09:58,199 -Scott Tolinski: Anything for free. - -134 -01:09:58,199 --> 01:09:59,159 -Wes Bos: Nobody can do anything. - -135 -01:09:59,159 --> 01:09:59,850 -Scott Tolinski: Give me free stuff. - -136 -01:10:00,890 --> 01:10:10,729 -Wes Bos: Please send Scott something. I got a box of rubber ducks shout out to what is the company I totally forget. So apologies. I - -137 -01:10:10,729 --> 01:10:18,060 -Unknown: posted a photo on on Twitter. So a box of rubber ducks out in the rubber ducks. I got a shout out. - -138 -01:10:19,640 --> 01:10:53,930 -Wes Bos: Anyway anyways, I always disclose when people give me stuff for free because I don't want to like I don't want to ever recommend something. I don't ever want to have a sick pic on this show where it's just because they sent it for free. Yeah. So I'll always make sure that people know if if I got hooked up, I'll let you know. And if it sucks, I'll let you know for sure. I've definitely pissed off a few companies in the past where they send me it for free. And I said not so good things about it. So it sounds kind of nice. I don't I won't. I'll say get free. I got like a ring doorbell for free as well. Just by asking the company for a free one. Not fair. - -139 -01:10:53,970 --> 01:10:58,140 -Scott Tolinski: I've gotten stickers I've gotten I got free stickers from Wes Bos. So - -140 -01:10:58,199 --> 01:11:11,520 -Wes Bos: there you go. All right. Can someone do you have a peel box? No. Okay, yeah, I've got a peel box. Scott has a peel box. Will someone please send Scott a letter or a sticker or a T shirt? You have T shirts, don't you? - -141 -01:11:11,580 --> 01:11:17,600 -Scott Tolinski: I do I have T shirts for sale. Yes, that's it. I don't really market them. They're even kind of hard to find on the site. So let's sell them out right now. - -142 -01:11:17,600 --> 01:11:19,290 -Wes Bos: Where do you buy them? level up? - -143 -01:11:19,290 --> 01:11:22,949 -Scott Tolinski: tutorials.com forward slash store. - -144 -01:11:23,280 --> 01:11:29,640 -Wes Bos: How many t shirts do you have left? Maybe we can sell them out? Oh, I have anyone is still listening to this long pod. Yes, a long episode. I - -145 -01:11:29,640 --> 01:11:32,699 -Scott Tolinski: have no idea how many I have loved. I haven't counted them to - -146 -01:11:32,699 --> 01:11:33,449 -Wes Bos: be honest. Okay. - -147 -01:11:33,449 --> 01:11:37,859 -Scott Tolinski: We have enough. All right. - -148 -01:11:37,859 --> 01:11:40,729 -Wes Bos: I think that's it for today. You got a sick pic. - -149 -01:11:40,800 --> 01:12:58,020 -Scott Tolinski: Yeah, I gotta take big sick pic here, make it real quick, as a sick pick that I have sick picked before. I'm going to do a double Sneak Peek here. And this is Cypress cypress.io. For end to end testing. I don't think this gets enough love as Cypress is really takes all of the guesswork out of testing. I know I've mentioned it a couple times over the history of the show. But if you were a new listener, you may have not have heard me talk about Cypress Cypress IO is an excellent end to end testing system that basically gives you interactive tools to actually working with your tests and even click through gain really keen insight as to what is going on in your code. You can like wait for UI elements and stuff like that they make it really easy. Like sometimes I know when you're writing tests, if something hasn't loaded yet entirely, you could be like testing a loading screen rather than testing that loaded component. So this it gives you a lot of great tools to like wait for certain things. And okay, now that this is on, you can look for this and try this and click this and it's all very visual. So you can confirm that things are working the way you'd expect. It's pretty darn slick cypress.io I'm gonna keep it pretty short. Check it out, watch their little video on the homepage and prepare to have your mind blown by testing, which is a good thing. - -150 -01:12:58,080 --> 01:14:13,470 -Wes Bos: Wicked. My sec pick is a book I listened to the audiobook, but it's also a printed version. It's called own the day by Aubrey Marcus. So Aubrey Marcus is CEO of this company called on it if you listen Joe Rogan podcast you probably have heard of on it before. And he posts he has this book where it says optimized practices for waking, working learning, eating, training, playing sleeping and sex. And I thought it was kind of interesting because sometimes you listen to these podcasts like Joe Rogan, or Tim Ferriss, and they're, they always post like, Oh, I find that it's it's very helpful that if I if I wake up at six o'clock and drink the tears of a unicorn, and then do 12,000 push ups and then I run around, it's like okay, it makes you feel better. Okay, that's good. But this is like I found that this is very applicable information, little tricks, little things you can do when you wake up a little things that you can do to like what kind of vitamins you should be getting very tastefully approach because he owns a supplement company, which is always raises an eyebrow from me. He Yeah, so yeah, I thought I thought it was really good. Lots of little little nuggets, here and there. What was the name of the book again? It's called own the day from Aubrey Marcus. - -151 -01:14:13,530 --> 01:14:15,600 -Scott Tolinski: All right, I'm going to put that on my list right now. - -152 -01:14:15,720 --> 01:14:41,609 -Wes Bos: That's good. It's It was pretty, I think was like 11 hours. So I had to it took me a good couple weeks to get through it. But it was one of those that you could just pick up and put down. Because every single chapter is a different aspect of your life. And it's just helpful little little things that you can like, start or started drinking water again every single morning like instead of slamming a coffee, you gotta slam a water. You got to see my big ass water right here. - -153 -01:14:41,609 --> 01:15:26,880 -Scott Tolinski: I have a giant cup of water next to me at all times. Yeah, I got my my ufm this I actually have this giant like when you this is this cup for those of you who can't see obviously, is from a michigan football game when you buy the largest like beer or soda they have and is like a giant ass cup from a very terrible game. When Michigan lost to Minnesota who sucked and we lost anyways. And we kept making a bunch of people around us pretty mad because we kept talking about what Michigan really needs right now. They really need a double touchdown. And people were just like, God, darn it, these kids are just like making fun of the fact that we're learning. I love Michigan. I'm a huge michigan football fan. But so the double touchdown thing is now hilarious, because anytime we're down by a whole bunch, I'm like God, do you really use one of those double touchdowns? - -154 -01:15:29,580 --> 01:15:32,520 -Wes Bos: That's great. Any shameless plugs, - -155 -01:15:32,720 --> 01:16:21,270 -Scott Tolinski: shameless plug, I have a new course coming out. So sign up for level up pro level up tutorials.com forward slash Pro, I have a new course it is awesome. I'm gonna I'm gonna I don't normally say that about my courses. But I'm teaching you electron in this course. And it's react and electron. And we're building a journaling app. And man, you learn a lot of really cool stuff from working with your own file system, opening directories, I build them like an autosave feature. And it ends up being like sort of a markdown system for a journal post. So you create a file, you write your journal post, and you can do it in markdown, and you get a little markdown preview window right there. So it teaches you the basics of electron, but also leaves a ton of room open for self exploration. And electron is a really exciting course. So it's going to be out later this month, it's not going to be out, - -156 -01:16:21,420 --> 01:16:22,050 -Unknown: well, probably - -157 -01:16:22,050 --> 01:16:46,100 -Scott Tolinski: Oh, by the time this episode comes out, so check it out. It's also going to be available for purchase at level up tutorials. COMM forward slash store. Again, if you're interested in learning electron, and you want to do it in a really practical, beautiful app, it is sick. And I created a cute icon for this app to it is it is like a little composition book. I'm not an icon maker. So I like made this thing. And I was like, Oh, this is my life's work. - -158 -01:16:46,100 --> 01:18:01,680 -Wes Bos: This is this is it. That's amazing. Yeah, cool. I'm going to plug my upcoming advanced react and graph qL course it is still a bit of a ways out. I know people have been emailing me all the time, I've been talking about it forever hit my fair share of bumps in terms of libraries and things updating and changing and constantly but i'm, i'm not sweating it all that much. Because graph qL is very much still a new thing. And I want to make sure that what you're learning is going to be the latest and greatest best practices and everything like that. So it's all been reviewed, I'm going to start recording it now it doesn't look like I'm gonna get it done before I go on vacation this summer. So it will probably be at least a month out yet, which is I know frustrating for some people because they're I've been waiting for it. But I am so so happy with it. We're charging credit cards, we are writing tests, we are doing the back end and the front end and Oh man, I'm so stoked. It's gonna be such a good course it's gonna be a big course. But I think you're gonna learn a lot in it. So, sit tight, I'll send an email out with some more info and please don't email me as to when it's gonna come out. Word. Awesome. So if you're still listening, make sure you tweet at Wes Bos and stilinski letting us know that you made it this far. The longest episode in history. Hashtag team syntax if you made it this far. - -159 -01:18:01,710 --> 01:18:02,670 -Unknown: Yeah. Thanks so - -160 -01:18:02,670 --> 01:18:06,420 -Wes Bos: much for tuning in. And we'll see you next week. See it bases. - -161 -01:18:08,159 --> 01:18:17,930 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax53.srt b/transcripts/Syntax53.srt deleted file mode 100644 index c566019bd..000000000 --- a/transcripts/Syntax53.srt +++ /dev/null @@ -1,244 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,500 -Announcer: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to whiskey and West boss. - -2 -00:00:10,589 --> 00:00:43,560 -Wes Bos: Welcome to syntax, this is a tasty treat brought to you by our good friends at Netlify. Scott and I are gonna make a push to do a whole bunch more of these hasty treats, which if you haven't had a hasty treat before, they're to die for. They essentially just like smaller versions of the podcast, it's where we tackle a topic that doesn't necessarily fill up an entire podcast, but we can probably get between 2010 and 20 minutes out of it. So I'm gonna throw it over to Scott to talk a little bit about our sponsor, and then we'll dive in. And today's topic is domain management. Nice. - -3 -00:00:43,680 --> 00:03:13,560 -Scott Tolinski: Yeah, so Netlify, as many of our longtime listeners will know that I absolutely love Netlify. And I know West does too. Netlify is a host for your site's right. But it's more than just a host. Because the Netlify experience is so cool. You you log in, you maybe give it a Git repo, it automatically detects maybe if you're using like a Gatsby site, and then you hit go and it automatically will deploy your site. Now, that's not where it ends. Because Netlify makes everything simple for you from actually domain management stuff to SSL certificates to using serverless functions they make working with serverless functions so easy. They make identity, oh logins, password recovery, all these things are awesome features that are built right into the Netlify platform, you also have access to forms, they make all the stuff that makes working with front end code difficult, they make it absolutely effortless. So if you've ever had any barriers to entry, in working with either a static site, or just a front end code or stuff like that, you're going to find that your home is very comfortable at Netlify. With all of these excellent features. Not only that, but I'm telling you the initial experience of pushing up your first site to Netlify is just it, you don't get a whole lot of services that give you that kind of experience. So definitely something I highly recommend trying just checking it out. Who knows you try it once. And who knows, I mean, they could instantly become your favorite host. So they make everything absolutely easy. It you can get started for free. And the coolest part about Netlify is is you really only pay for the extra features that you use. For instance, if you are only using farms, and you aren't using identity, which is their login system, or functions, which is their serverless function system. If you aren't using those extra ones, you can sign up for just forms and get access to you know, however many forms you're sending. But for the most part, I mean, the free plans are pretty unreal, so huge, huge props to Netlify for everything that they do. And we're so happy to have them as the the hasty treat sponsor. This hasty treat is possible because Netlify is picking up these extra episodes. So we're just extremely happy to have them. So head on over to netlify.com forward slash syntax to sign up for Netlify. Let them know where you came from. If they ever asked, tweet up and say that you heard about Netlify on syntax, because you know, we obviously love them as a sponsor, and we'd love to keep having them on. So - -4 -00:03:13,740 --> 00:04:55,410 -Wes Bos: yeah, quite a few people have been doing that recently where they have been tweeting me and like, hey, syntax, thanks for showing us the sponsor. And that is awesome, because it helps sponsors keep coming back for more, and then we can keep making more awesome episodes. So let's dive into domain management. We'll start off with a one on one. And we'll dive into all the different parts of having a domain management domains are a source of a lot of frustration. Yeah, as web developers, because if you screw them up, your website goes down, your email could go down. And if you make a change, it's not instant to know if it worked or not. And you kind of have to sit on your hands for a little bit. So hopefully, we're gonna demystify it. I'm not an expert of on how domains work, but I have been using them for about 15 years now. So I know a thing or two about them. So as a one on one, if you're brand new to domain name, if you're not skip ahead 30 seconds, but a domain name is servers have add what are called IP addresses, and either has a normal IP address ipv4, it's called which is like one nine to 48 or whatever. Or you have a what's called a ipv6 address for that specific thing. And that will just be a much longer thing. ipv6 came out years and years ago, actually, when I was in school, we learned ipv6, and it doesn't seem to have taken hold very much just yet, which is frustrating because we're running out of IP addresses for the rest of the rest of our servers. Why does that matter? Well, you get a domain name like West boss calm you people can remember that. And then they point your domain name to a specific server. And that's how it works. Right. So do you want to take a stab at once you have a domain set up? You want to take a stab? What is DNS Scott? - -5 -00:04:55,440 --> 00:05:47,700 -Scott Tolinski: Yeah, so DNS is basically you can think of it like a like an address. sort of thing, right? So what happens is when you type in your URL bar, like you had, I'm gonna go to level up tutorials, comm and do so you want to type that in, you hit enter. So what happens is that address gets looked up in this sort of address book is DNS server and this DNS server is going to be like, okay, level up tutorials, where is that and level up tutorials will return an IP address now that IP addresses linked to a server computer somewhere else where your site's actually running. And that is essentially a look an address book, hey, here's where to go, then the next the computer goes to that IP address to retrieve exactly what you told it to retrieve in the first place. So it's sort of like a, a pretty mask on top of your, your, your domain or your IP address, right? - -6 -00:05:48,480 --> 00:07:19,410 -Wes Bos: Yeah, it's that. And then you have that address book full up. So there's two things that I kind of need to break down here. First, you have something called name servers, right? And and what name servers are, is that your domain name will always have one to four, usually, it's to name servers, which will point to a another server that tells you where that address book lives. So before you can even get to that address book, you need to set your domain name to have name servers that will handle the the listing of your address book, because your domain name has a lot more than just hosting on it, it will often have email on it, it will have information about like if you use like a third party email service, you want to validate that you own that domain, you might want to put a TXT record on that you got a whole bunch of sub domains, if you have aliases, all kinds of stuff goes on that address book of it. But the first thing you need is actually a DNS server. And that is what actually takes the longest amount of time. Because when you change your name server, and again, the name server is where that address book lives, those changes that sort of arrow to where your address book lives, it needs to propagate through all of the DNS servers around the world because there is a correct me if I'm wrong, but I believe there's a root DNS server, and then all of the other kind of children, DNS servers around the world need to update their cache based on that, because when you request like Wes Bos comm, I think what happens is that it goes to your ISP first. And then if your ISP doesn't know where that is, then it'll go to your - -7 -00:07:19,440 --> 00:07:20,550 -Scott Tolinski: the next one, and then - -8 -00:07:20,580 --> 00:07:35,100 -Wes Bos: the next one, and the next one, the next one, the next one. And if any of those along the way, having an older version of that of that name server, then it's going to take anywhere from six minutes to 48 hours for those those name servers to actually update. - -9 -00:07:35,220 --> 00:07:42,690 -Scott Tolinski: Yeah, which is a common pain point, right, that sort of, I have all my settings done. Now I just have to sit and wait to see if it actually worked. - -10 -00:07:42,900 --> 00:08:13,260 -Wes Bos: Yeah, and I find a lot of people only know about name servers, and then they will always change their name servers to point to their host, where what you should really be doing is pointing your name servers to a DNS management, something that will manage your DNS all in one place. And then from there, you can you can modify the different records of that address book, which they update, like in a couple minutes. Is that true? It's good experience. Yeah, in my experience, the the a record will update within 10 minutes or so. - -11 -00:08:13,470 --> 00:08:18,360 -Scott Tolinski: Yeah, I think there What is there? There's a value you can modify to what is that? The - -12 -00:08:18,450 --> 00:08:20,220 -Unknown: the TTL? The TTL? - -13 -00:08:20,250 --> 00:08:26,940 -Scott Tolinski: Yeah, time to live time to live? That's a sort of a heavy name there. - -14 -00:08:27,119 --> 00:09:05,419 -Wes Bos: Yeah, that's dark. So what are, let's give a couple examples of some of the DNS providers because what I previously used to do is I would just set my name server to be Digital Ocean, or Bluehost, or GoDaddy, or whatever. And then whenever I needed to modify that domain name, I would just have to sit there and be like, what do I need to log into, to change this domain where like managing your DNS in the same place you host is maybe not necessarily It's okay, it works in a lot of cases. But I much prefer now to have a single place to manage all my domain names. And then from there, you can point them to your different servers that live around the world. - -15 -00:09:05,760 --> 00:10:34,110 -Scott Tolinski: Yeah, so I managed mine on DNS simple. It's a little pricey, because you're paying like a subscription fee is sort of interesting. for five bucks monthly, you get service on five domains, or 25 bucks a monthly, you get service on five domains, and then you're paying, like you get additional features for the different tiers, right. So you end up paying per domain at some point once you get over five. So like, let's say you're on the personal program, which is missing a bunch of features, by all means it has enough features, but let's say you're on that you're got 10 domains managed on there, it's seven bucks a month, not terrible or anything like that. And keep in mind, this is just for managing DNS stuff. It has nothing to do with your actual domain hosting or whether you're purchasing your domain or whatever like that. So I use DNS and bolt. It is very feature rich, they offer like a bunch of stuff to make it really easy on you. They really emphasize sighs user experience in terms of like, Hey, I don't want to fiddle with all these records, there's so many like one click ads, oh, I'm using Google Apps. Alright, one click Add it just you almost never modify an actual DNS records. Like so many other systems, you're left to sort of know what to do with this one really holds your hands through a lot of it also makes things like SSL, really super simple with Let's Encrypt. And it just, it just makes things easy. So if you're looking for maybe paying a premium to get some easy, easy, easy service, I would check out DNS simple, I like it a lot. - -16 -00:10:34,260 --> 00:10:49,399 -Wes Bos: Like it, I use, I buy all of my domain names@hover.com. I've been been using them for four years, I have name.com. Name, I have a couple of name.com that you cannot buy. We'll talk about those in just a sec. Yeah, named Sarah. - -17 -00:10:49,620 --> 00:10:51,899 -Scott Tolinski: Nice Colorado company, nice Denver company. - -18 -00:10:51,919 --> 00:12:08,940 -Wes Bos: Actually, it's funny. Hover is a Canadian Toronto company. So yeah, there you go. Anyways, um, I buy them all there, and they have an awesome DNS management screen. Some of these like UI to update your DNS are always a little scary. And hovers is really, really nice. However, I often, almost what I'll do for every domain name I have, I'll point it out. point my name servers at CloudFlare. And CloudFlare is, if you don't know it's a, it's a service that does, like attack mitigation, it gives you free SSL certificates, it'll do caching, it'll actually minify your JavaScript, if you want to compress your images, it sort of like sits in between between your website and your user and will proxy a lot of your traffic. And I really like it, because I find that my stuff updates really quickly when I do it. Because CloudFlare is like a large chunk of the internet, they even have their own, like DNS resolvers, which is one dot one dot one dot one, Mm hmm. And I just put out, you could for free, you can put all your domain names in there. And you get free SSL on there as well, if you want to turn that on. And I've been a big fan of that. So I either manage my DNS at hover directly, or I flip it over to CloudFlare and manage it all directly in CloudFlare, they both have really good UI for managing all of the different records that you might have. - -19 -00:12:08,970 --> 00:12:59,580 -Scott Tolinski: I think that's important. And what's so annoying about these things is that regardless of the company, and the UI, whether or not the UI is good or bad, or whatever, so many different companies take different stances as to how to present this stuff. Like Yeah, they label things differently. They have their own system that they're sort of just expecting you to somehow magically know to use this or this when it's like a very specific for them kind of thing. And and the difference is when you read documentation on maybe setting up an SSL certificate in the past, like when you had to buy one before, then you'd read the instructions, and they would tell you to do something on a DNS. And it would just be like, well, I don't even have these options. I don't even have the options to do that. And that was always such a huge pain points. I'm so glad to see companies like this really taking a step forward in their user interfaces for these things. - -20 -00:12:59,730 --> 00:14:11,220 -Wes Bos: Yeah, totally. I agree there's is too much pain in accidentally breaking that kind of stuff. And that's, it scares me so much when you ever have to switch a domain name. So I'm, every time I've migrated a domain name, like I unfortunately have a lot of domain names on GoDaddy, because I was a web developer 15 years ago. And every time I move one over to to hover or name, it's always very scary. Yeah, to actually do that. What else do we have here? The different types of records. So you have a name, you have a records in like at records. And what those will do, those are your primary pointers at your server. So if you have a server and you want a either your main domain or sub domain, you can set those up to point out your server. Or you can point those out a load balancer, which will in turn distributed through multiple servers that you have. You've got MX records, which are for dealing with mail, mail exchange, it stands for Yeah, so I usually just set these up to be the Google aspm MX records. And then you have Google Apps set up for your domain name. And now MX records. Also priority too. - -21 -00:14:11,220 --> 00:14:35,610 -Scott Tolinski: If you ever see the like little number after an MX record, it's like 155 10, that kind of thing. Those are sort of which one to try first, hey, try this one first. Okay, so if you ever see those numbers, again, the lower the number, the higher the priority, so it's which one will be used first. So that way, you can ensure that it's not going to fail, right? By having multiple options, which is many times why you see so many with the MX records. - -22 -00:14:35,820 --> 00:14:38,789 -Wes Bos: Totally. What about C name? Do you want to give that a stop? Yeah, - -23 -00:14:38,789 --> 00:15:14,580 -Scott Tolinski: C name stands for canonical name. See name is basically to alias a one name to another. And oftentimes, you'll see this being used as like asterisks.domain.com. And that way, like any sub domain could point to the domain. So you're basically with a C name. You can refer to another domain. So Maybe you have like blog, dot level up tutorials comm and you want it to point to the same a record, you can do that with just the I think it's sometimes it's usually like an add sign right? Like a Was it a swirly a sign - -24 -00:15:14,730 --> 00:15:17,520 -Wes Bos: monkey tail is when my opa calls it, the monkey tail, That's - -25 -00:15:17,520 --> 00:15:20,549 -Scott Tolinski: dope man, I'm gonna start using that that's way cooler. - -26 -00:15:22,409 --> 00:15:54,929 -Wes Bos: Monkey tail. Yeah, that's, that's really good. Um, so that's some of the major records, there's all kinds of other records in there. Sometimes companies will make you put in just a regular TXT record, which is not a standard, but it's just like, put this on your domain name, so that we can verify that you actually own this domain name, because like, you could sign up for something like postmark and start sending emails from Wes Bos calm, but unless you have actually proven to the sender that you own that domain via setting a TXT record, or there's a couple other ones that I totally forget what they are. - -27 -00:15:55,140 --> 00:16:36,659 -Scott Tolinski: DNS simple has a really dope one called an alias record, which I've used before, in the past, you know, like, what they're called Apex domains, which are domains without a, you know, www dot like a just level up tutorials.com with nothing before. an alias record at DNS simple is basically a fake record type that allows you to do see name behavior on an apex domain, which is, once you get into that kind of stuff, and you can't do that. It's a little frustrating. So the fact that they have a special alias record that sort of handles any sort of complexities that you might have for you that it's super sick for me. - -28 -00:16:37,050 --> 00:16:39,750 -Wes Bos: Yeah, I had to go into that at some point. Me too. - -29 -00:16:39,779 --> 00:16:40,320 -Scott Tolinski: Yeah. And it's what - -30 -00:16:40,320 --> 00:16:42,510 -Wes Bos: I forget why, but it was a nightmare. - -31 -00:16:42,570 --> 00:16:43,830 -Scott Tolinski: Yes. total nightmare. Yeah. - -32 -00:16:43,860 --> 00:17:14,670 -Wes Bos: The one I'm talking about here is a DK Iam, it's a domain key identified email. So if you ever want to send email from a service that does sending email, sendgrid postmark, things like that, you'll have to do a D Kim, to prove that you actually own that domain name. Nope. What else we got here, different kinds of domain names. So what's interesting to know is that we have tlds, top level domains, you have like.com and.ca and whatnot. We have a whole bunch of them now ever since a couple years ago, we have like dot pizza and club and - -33 -00:17:14,810 --> 00:17:17,520 -Scott Tolinski: yeah, most of these out of nowhere. I mean, it's Yeah, - -34 -00:17:17,520 --> 00:18:58,020 -Wes Bos: most of them have like a, like internationally like Google will view them as international. Even though like.tv is actually for a country called Tuvalu. Yeah. Which is actually going cool. Vimeo has like a little documentary on how the.tv is funding this little little island of Tuvalu, which is actually sinking because of our polluting, but they're kind of fight it with the yeah.io is Indian Ocean, but Google sees those as Oh, that's not actually like a Tuvalu website, people are just using it because they like it.tv or.io. So it Google recognizes has a list of globally recognizable domain names. And then there's other country code discounts. Like I think I have a.af domain name, which is for Afghanistan, which has led me into all kinds of trouble. It's like, it was like, so sketchy to get it set up. And like it didn't work half the time. And I went to like the Afghanistan, Twitter, and it just said, we have shut down because of lack of resources. She's and so that is actually for Afghanistan. And I have Boston AF because I'm funny for selling my stickers. And that probably hurts my search engine, if I cared about search engine optimization on that one, because that tells it that's f Gani website, but I couldn't funny fact that couldn't get a SSL certificate from any of the places that sold SSL certificates, including CloudFlare. Because there's like an embargo on the United States doing business with Afghanistan in that not it's not, you know, I - -35 -00:18:58,020 --> 00:19:45,350 -Scott Tolinski: actually I had a before I hit level up tutorials, I had my freelance company, which I called folded Cata creative. And I had a sweet little like origami cat logo, it was pretty sick and actually kind of looks like what get labs logo looks like now is same colors and everything. This is way, way back then. And I was trying to buy a folded dot cat because that's the sweet domain. And it's for Catalonia. And they do no yeah, sell you domains to get a dot Catalonia, you had to prove that your website was either about the country or had something to do with the country or was like promoting the country in some sort of way. And I was like, well, maybe I'll just put like a footer in the bottom and like thanking the country. And then of course, it didn't work. It was like it's such a huge process and they wouldn't they wouldn't give it to me, so I never got that. - -36 -00:19:45,350 --> 00:20:06,560 -Wes Bos: Yeah, cat. Oh, man. That's what name.com does in a lot of these cases is they set up businesses and all of these countries and you they actually own the domain name for you. And then they just kind of like proxy it to you because you have to in a lot of these like dot whatevers, you actually have to own a business in that country in order to secure a domain name. - -37 -00:20:06,660 --> 00:20:12,050 -Scott Tolinski: Yeah. And speaking of cool domain names, you know, like, did you ever use that domain or domain? Yeah, I - -38 -00:20:12,050 --> 00:20:13,140 -Wes Bos: love that website. Yeah. So - -39 -00:20:13,140 --> 00:20:34,310 -Scott Tolinski: this is a cool website. If you've never seen it, it's a domain our.com. And you can type in your domain. Let's say we're typing in level up tuts. And then it basically gives you all of the like, interesting sort of domain names you could possibly buy with it. It looks like there's a few level up tuts domains still available, like dotnet and dark blue. Don't Don't take those for me. - -40 -00:20:34,820 --> 00:21:02,730 -Wes Bos: domainer for a long time, and I also use I want my name.com Oh, yeah. Which will give you a list of every single one. So it'll look up if you type in Wes, it'll tell you like West coffee is 10 bucks. West College is 99 bucks. Cologne, ooh, West cologne. That would be gross. Anyway, it shows you all of the possible options, which is kind of fun. I'm a big fan of I own domain names myself. Have you ever actually bought a domain name off someone before? - -41 -00:21:02,730 --> 00:21:21,990 -Scott Tolinski: off of someone? Yeah, yeah. We bought the my parents had a tea company called blooming tea. We bought blooming t.com off of someone also blooming tea calm now currently sale for sale by Scott Tolinksi. So if you're starting in Tea Company, reach out to me because I've been trying to sell that one. Yeah, so that's the only one I've ever bought. - -42 -00:21:22,020 --> 00:21:23,490 -Wes Bos: What was the process like for that? - -43 -00:21:23,570 --> 00:22:27,870 -Scott Tolinski: He had like, there was like a third party, like escrow situation going on. And we had eventually agreed to a price. It was it was like kind of, I was very green. This was like 2008. I didn't necessarily know what I was doing. Yeah. So it It took it was it worked out. But eventually it was sort of like where to send this to then they they basically just gave control over the address or wherever you tell it to send to or the account you tell it to send to you. Just like open it up to be transferred or whatever. Yeah, that whole process. Oh, no work that we're trying to buy when lately for that startup I was working at and this guy was like really trying to hardball us like giving us Jose he's like asking for like 25 grand for it. And we're just like, I don't know, it's like important, but not that important. And we eventually said, No, that's cool. And then he likes dropped his prices by 5000. They dropped it by 1020. And oh, yeah, startup at already dissolved. So we were just like, no, sorry, man, you just missed out on your chance to even make, you know, five grand on this because we've done it for five grand to be honest. But - -44 -00:22:28,200 --> 00:23:23,280 -Wes Bos: I always wish that I always see domain names that are for sale. And I want and I just like I can't get into it. I bought and bought two before, both from other developers, I bought JavaScript CO, which I'm sitting on for a JavaScript course. And that I bought that for 1000 bucks, which I thought was pretty good deal. Yeah. And then I learned no.com was registered by I forget his name right now, excuse me if you're listening to this, but he was very kind, I was willing to buy it for him. And he said, if you donate $300, to the E FF Electronic Frontier Foundation, you can have it, which is amazing. Like I was so happy to get that because domain names for my courses are really, really important. Those are the only two I've ever bought. And both of those I just kind of was like hope that it didn't get screwed up. And then I've never actually gone through an escrow I have looked into it, I know that it's $100, where an escrow we'll hold both the money and the domain name and then switch them over. Once both - -45 -00:23:23,490 --> 00:23:29,670 -Scott Tolinski: parties have been noted that the seller took care of all of that stuff. We didn't pay anything extra for the escrow. Oh, that's good. Yeah. - -46 -00:23:29,910 --> 00:23:36,960 -Wes Bos: Interesting. All right. We're about 25 minutes in i think that's that's it for today's hasty treaty. Anything else to say about domain names? - -47 -00:23:37,080 --> 00:24:03,330 -Scott Tolinski: No, I don't think so. I love buying domain names. I'm that type of developer who will be intoxicated and come up with a great idea and be like, I'm buying the domain right now. Like a million dollars and then have the domain and be like, What? Oh, no, I don't have this. So I like buying domains. It's funny because they're, they're cheap. And if you ever have a good idea, you can always just buy one. You can just buy one and hold on. It's not cheap for me. - -48 -00:24:03,390 --> 00:24:05,010 -Wes Bos: Well, many domain names do you have? - -49 -00:24:05,160 --> 00:24:08,820 -Scott Tolinski: I only have 20 right now I did some spring cleaning. Oh, yeah, - -50 -00:24:08,850 --> 00:24:19,830 -Wes Bos: I did my taxes last year and I spent without buying any domains. I spent 1500 dollars on domain run because I have like stupid ones like bosta af is $100 a year. Oh - -51 -00:24:19,980 --> 00:24:21,300 -Unknown: yeah, I'm not that expensive. when.io - -52 -00:24:21,300 --> 00:24:26,010 -Wes Bos: is like 49 he used to be 100 bucks a year for iOS domains. - -53 -00:24:26,520 --> 00:24:31,170 -Scott Tolinski: But I always want to have his level up that video. Oh, most expensive one - -54 -00:24:31,290 --> 00:24:59,220 -Wes Bos: with 202 I have to find some fun ones. I've s5 io just in case anyone tried to jack me. I have all the for beginners Angular for beginners, calm Ember for beginners, j s for beginners, calm CSS for beginners. I have like JavaScript 30 like typed out.com. Smart. A couple of them. Yeah, I have a whole bunch that every year. I realize what I was almost really stoked about a year before and then I forgot about totally. - -55 -00:24:59,340 --> 00:25:19,980 -Scott Tolinski: Yeah, I know. Some of these were like hilarious that I had, like I was like, I had one called yoga sequence calm or is going to build an app that had like computer generated like yoga sequences based off of common patterns in yoga and stuff like that it was gonna be really sick. And it's just like one of those things that you just never have the time to ever do. It's like a sick idea. Sick domain. I'm just like, yeah, I'm not gonna. - -56 -00:25:20,010 --> 00:25:32,610 -Wes Bos: Yeah, one of my favorites is syntax.fm. Yes, I was so stoked that that was available. It's a good one. Yeah. Anyways, that's it for today. Hopefully you enjoyed the AC tree. And we'll see in the next one. Yeah, - -57 -00:25:32,610 --> 00:26:02,400 -Scott Tolinski: let us know what you think about tasty treats if you want to see, like specific topics. I mean, this is again, this is sort of even though we've done hasty treats before this. This is kind of like episode Oh, one for hasty treats. Because it's gonna be a recurring thing. And again, thank you Netlify for sponsoring and taking us on as the, you know, hasty treats. So again, we're gonna be doing this more frequently and let us know what you think we're sort of omitting some of our our classic stuff just to give you a quick bite of something tasty. But yeah, that's that's pretty much it. - -58 -00:26:03,420 --> 00:26:06,630 -Wes Bos: They used to be called what we were gonna call them snack episodes until someone - -59 -00:26:06,630 --> 00:26:08,160 -Unknown: knows snack packs. - -60 -00:26:08,160 --> 00:26:18,030 -Wes Bos: hasty trade is the best. He's the best. It's hilarious. I told you I met the history treat the guy who came up with tasty treats. The legend. Yeah, I - -61 -00:26:18,030 --> 00:27:11,190 -Scott Tolinski: was at a I'm so sorry. I forgot your name. I met I met him at the site day I was speaking it's like date, he came up to me. He's like, Hey, I just wanted to tell you that I was the one who came up with tasty treat. And I was so so thankful for that. I was just like, you are the man. very best. So thank you once more shout out hasty to reach out to me on Twitter. I'll retweet you. I'm so sorry for forgetting your name. So that's it. As always, thank you so much for watching. We're going to check you out next Wednesday with the next next syntax episode where either way we're gonna last so much good stuff coming up again, so pumped to be able to do these tasty treats. As always, we're gonna have a little piece to carry us out here. All right, this is head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax54.srt b/transcripts/Syntax54.srt deleted file mode 100644 index a6c5cd323..000000000 --- a/transcripts/Syntax54.srt +++ /dev/null @@ -1,208 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax. - -2 -00:00:03,990 --> 00:00:05,250 -tastiest web development trees - -3 -00:00:05,250 --> 00:00:06,150 -out there, - -4 -00:00:06,150 --> 00:00:09,330 -strap yourself in and get ready to whiskey - -5 -00:00:09,330 --> 00:00:10,440 -and Wes Bos. - -6 -00:00:10,680 --> 00:00:31,200 -Welcome to a syntax. My name is Wes Bos. I'm a full stack developer from Hamilton, Canada. And this is a Scott to linsky. I like to start this this podcast off a little bit different every single time with me, as always is Scott Delinski, who is a full stack developer from Denver. Is that correct? Yeah, that's correct. - -7 -00:00:31,230 --> 00:00:31,829 -Yes. - -8 -00:00:31,829 --> 00:01:20,610 -Scott Tolinski: How's it going today? Scott? Scott? Oh, good. Yeah, I just pushed a bunch of new features to level up, like user view tracking and that sort of stuff. Stuff that people are asking for for a little while. So it feels great to push some of that code up into live production and see it in action. Finally, after working on it for a little bit, so yeah, no, I'm feeling great. got back from a dudes weekend for a bachelor party that was in Winter Park where we did some sick mountain biking, like legit mountain biking, we're going down blue squares, and doing lots of little jumps. And I was terrifying. I haven't ridden a bike in like 10 years before this. So I don't own a bike. And everyone was really worried for me, and I ended up doing fine. So it was it was a lot of fun. We did some a lot of mountain fun stuff. - -9 -00:01:20,730 --> 00:02:04,830 -Unknown: That's really cool. I'm just about to head off. We're recording like a whole bunch of episodes today and tomorrow, just because I'm about to head off on some vacation or holidays, as you say, and the rest of the world. Yeah. And we're going to a cottage up in Bancroft, Ontario, which is like this awesome cottage country area in Canada. So I'm super excited about that. It's been a long couple months of hard work, and I'm excited to have some time off. Nice. That's great. Yeah, we're doing a little vacation as well. It's like three or four days, we're heading into Aspen. We're gonna do some hikes. We're gonna go around and just, you know, hang out, eat some good food and Aspen because there's lots of that there. So it's gonna be a good time, too. So I think we both have some well deserved breaks after next couple weeks here. - -10 -00:02:05,190 --> 00:03:21,780 -Scott Tolinski: Totally, totally. Today's episode is sponsored by coffee cups, CSS Grid builder and fresh books, cloud accounting. I'll talk a bit more about them both partway through the episode. Yes. So today, we are having a potluck. Yum, yum, yum, yum. To answer your listener questions. I like these. We're going to go all over the place with JavaScript question freelancing questions, soft skills, questions, security questions, all kinds of stuff that's coming up today. If you have a question for a feature potluck, please keep them coming. We now have the link over@syntax.fm. In the top right hand corner, it says ask a potluck question. Actually, let me give a bit of a shout out to whoever actually added that the syntax website if you ever curious is open source. It's on GitHub. There's a link to it on syntax FM, and I put a call out to anyone who wanted to actually do some work on it. And we got a couple people adding links to the Spotify Google podcast is not out. So now we have a link to Google podcast and we the potluck submission form was added by Abby Tom do probably goof that up but huge thanks to Abby for putting that up. So it just go to syntax FM I also Scott I don't even know if you know this. I just added position sticky player. Yeah, I - -11 -00:03:21,780 --> 00:03:45,090 -Unknown: saw that tweet. Yeah, yeah. And then I went and did a little scroll. Yeah. two positions, man. He's super cool. I never use it. Because it's like, one of those things that are so long. Yeah. Is it? Let's see, can I use calm? Let's look for sticky? No, ie 11. You get it in edge, but not on T head or tr? - -12 -00:03:45,120 --> 00:04:19,410 -Scott Tolinski: Okay. I guess that's but also position sticky is something you want in a table? Yeah, it is supported on th elements that is supported in Firefox supported in Chrome, the same issue as either Safari, iOS, Safari, hey, I tried it in in iOS Safari. And it didn't work. Maybe there's a little something we have to figure out there. So actually, it's well supported on all of the major browsers, except IE and the nice thing about it is that it just falls back to position relative if if it's not supported, so it just scrolls normally. So I thought that was kind of a nice little two line addition. - -13 -00:04:19,440 --> 00:04:41,880 -Unknown: Yeah, I'm gonna have to I'm gonna have to position sticky some stuff, because I'm already using CSS Grid. So it's like, I've already abandoned the iE 11 train. So yeah, yeah, totally CSS sticky time. Sticky time. All right, let's, let's jump on into it. We got a whole bunch of questions here. Thanks so much, everyone for submitting them again. Submit your other ones, and we will do this once a month. You want to grab the first question there, Scott. - -14 -00:04:41,970 --> 00:07:21,540 -Scott Tolinski: Yeah, I like this question a lot, because it's something that I had to deal with a little bit. Let's see. What do you think about the time and date that you stay at companies in my last in my CV, my last three jobs stayed six months at each companies. Do you think that's a bad thing? This is from Philippe and Yeah, I don't necessarily think it's a bad thing in to me personally, if you have the abilities to back up those job changes, and the reasons for those job changes, if presented with the questions about why you made those changes than any interviewer is going to understand. Because a lot of jobs you don't know the company culture, and maybe you don't know, you know what you're getting into until you're into it. That said, it could be a red flag. And typically, I don't necessarily think it's a red flag that's gonna prevent you from getting into talking to somebody and maybe talking about it, but you're gonna want to make sure you have good reasons for it. If you are jumping companies every six months, and your reasons are, well, the boss was an asshole. Oh, yeah, this boss was an asshole to Oh, yeah. And this was But boss was also an asphalt and perhaps that's not going to look too well. And it might look like you are an asshole. So my suggestion is one, keep your skills up be really good, because a high, highly skilled developer is going to be in demand, even if you've changed jobs, a whole bunch. I personally changed jobs a whole bunch, but it was mostly for better opportunities, right? And to don't do it for dumb reasons, and have a good reason. So when you get presented with that question, in an interview, that you're not looking like someone that would be a toxic employee, right, you want to be presented as an employee that will stick around, even if you didn't stick around at your last few companies. Yeah, I'm kind of in the same boat as that I have taught in the past, oh, five, four or five years ago, I taught boot camp. And now if I talked to the people who I taught in that boot camp, some of them are in senior developer positions and are making really good money. And what they had done is that they stayed at the at three or four jobs for a year, year and a half at each of them. And by doing that jumped, jumped up. I know that everyone says, oh, Millennials won't don't stay at a job. But I really think that's the way that you can really level yourself up. Yeah, it's funny, because I talked to like, my mom, and my dad had the same job for, like, 30 years, and you get like a watch at 30 years. And that was the that was the way that it happened. Whereas now I think people are just jumping from job to job a much more quickly. Of course, you have to have a reason why like, that would raise a huge red flag to me being like, oh, six months at each job. Why, but that's not gonna stop me from bringing you in the door and asking why. - -15 -00:07:21,569 --> 00:08:18,900 -Unknown: Yeah, I totally agree. I think in the past, people had a lot more loyalty to companies, because they thought the companies would have loyalty to them. And then like, we've grown up seeing just how much loyalty companies have to, you know, these people that have stuck around and things like that, you know, so I personally, I don't have too much loyalty in that regard. do what's best for you. Yeah, that's, that's my voice that this question here has a little note on it. Philippe says, I'm from Brazil, and I have a podcast here. It's called dev nostra. I don't know if I butchered that or not. But it means developer on the road in Portuguese. So I thought that was that was pretty cool. I have a lot of people taking my courses from Brazil, which is always surprises me. So that's cool. If you're from Brazil, check out that podcast. Nice. Or if you speak Portuguese, I'm assuming it's in Portuguese. Yeah, if it's not in Portuguese, tweet us out, and we will be awesome. Let's, uh, let's grab another question here. - -16 -00:08:19,020 --> 00:08:19,650 -What do you got? - -17 -00:08:19,710 --> 00:10:56,580 -Scott Tolinski: What is the best way to work remotely. So obviously, Scott and I both work remotely. I know a lot of people who work remotely and I think that being a web developer is the best possible job to work remotely. Because really, all you need is a decent internet connection. And you can live all over the place. I think that's, that's like one of the best perks like, obviously, you can live in San Francisco and make really, really good money. But I think that there's also this huge allure to being able to live in the town that you grew up in or being able to move out to the country or even myself, I moved out of Toronto, which is the huge city to kind of an up and coming city called Hamilton and houses were a lot cheaper. And it's really cool to be able to like have that for you. So working remotely is not without its disadvantages. There's lots of companies that don't allow that at all. So what are some good tips I've worked remotely for my entire life, I've tried co working spaces and whatnot, I just didn't like it at all in my my tips for working remotely are first get a really dedicated space for your work. So you don't just like sit at the dining room table, especially if you have people at home that are running around. You can't just sit at the dining room table or you can't just sit on the couch and be on your laptop because there's like a mental switch that needs to happen when you work and you walk into the room that you're going to be working in. So if you have some sort of dedicated space, I know not everyone has an entire room to themself but somewhere that is only for work upside to that as also you can write that off on your taxes if you're running a business, you have clear on and off times. So it's clear to me that at nine o'clock I start work and at five o'clock I'm off work I don't do laundry or do house stuff during the day and I don't really do work stuff after Obviously, there's some little bit of wiggle room there, sometimes I will get totally sick of work and go do something for the house. And the opposite. Sometimes something will break at eight o'clock at night, and I'll need to jump on my computer. But that's the beauty of of having a flexible schedule like that. And the last tip I have here is having a wine downtime is something that I'm realizing now that I have kids is that I can go from bug solving, like super init to two seconds later, my kids yelling at me having to cook dinner, like fires needing to be put out. And it's really hard for me to be like, Okay, give me a sec, because I need to, like come down from this like debugging mindset that I was in to go over to that. So having some sort of way to wind down. I haven't really figured that out now because I can't like go for a walk or something like that. Because at five o'clock, I need to start making dinner and dealing with the kids and stuff like that. But it's definitely important. - -18 -00:10:56,669 --> 00:15:04,320 -Yeah, yeah, absolutely. And I was one of the one of your sick picks, the recently was the own own the day on your life book. And I think the best tips that he had in that book, and I started doing this, since I read that book, like two weeks ago, or whatever, one of the absolute best tips he had was even if you work at home, have a commute time. And then that commute time do the things that like a normal person would in commute, like you're sort of winding up like I'm sitting there, I'm drinking tea, I'm listening to podcasts, I'm not mindlessly browsing the internet, but I'm not working hard. I'm sort of on work light mode, my brain is sort of getting going. And then I have this hard nine o'clock start time where that's where I start working. Like when typically when we're starting to record this podcast or any of that stuff, right. So I have this little ramp up time to get going that way, I've gotten all that stuff out to something that's really, really helped me is had very specific to do list. We talked about this a little bit, but I write down very specific to do list not necessarily to the hour, but I have a list of priorities. prioritize this, and I'm going to this is the most important thing, I need to accomplish this the second most, most, whatever and so on. Okay, lastly, I will not Lastly, thirdly, I have like blocking software on all of my stuff because I don't have the self control needed to not fall into mindless traps. So I have an app focus on my computer, I have another one on my phone, there's hundreds of these that like block all of like, Nonis it like, oh, it'll keep Instagram open for me, but not because I browse Instagram, but because I post on it for level up tutorials and things like that, or Twitter at least Twitter open, but I also don't browse Twitter mindlessly. But things like Reddit that you can really get sucked into blocked, Facebook blocked all that stuff blocked. So even if you try to go to it, it lets you know, Hey, man, like you should be working right now. And then blocks it for me from that hard work time to that hard end time. So nine to five, and I have it on hardcore mode, so you can't possibly turn it off. Even though I was pretty good about never turning it off anyways. Okay. And the last thing I have is an addition of in a dedicated space, if you are not feeling productive in your dedicated space or in your house, or your work or whatever, take it to a coffee shop. There's never been a time where I've taken it to a coffee shop, put on my headphones and didn't get immediately in the zone. So I walk down the street, I put on my headphones, I put on that my noise website I put on some airplane cabin noise, I put on some rap music, and I just zone it. So for me switching up the scenery into another place that is very work specific can totally keep you in there. But yeah, I've worked remote for both companies. And for myself, it's incredibly important that you do separate yourself from your normal life. All the stuff was said absolutely. Yeah, it's funny that every probably two or three months, I get into a bit of a funk and then I'll just go work at a coffee shop for two or three days. And just like at the coffee shop, as well as the walk to the coffee shop is very therapeutic. Yeah. And I also find myself in the morning, like you said, you mentioned the to do list like in order of importance, always try to make that at like the last thing that I do for the day is I'll make my to do list for the next day. And if I don't have time to do that, what I'll often do is I'll just go on a walk and grab a coffee. And as I'm on the walk I'll sort of talk through what it is that I need to get done and I have things on my phone and I'll add those to my phone and it's just enough time to be able to get it out of my head into the list the whole mantra that we've talked many times about before with the Getting Things Done mindset. Yeah, I have a what I like to call like a meditative shower at night. So I do I do Night Showers on the night shower more than a morning shower. But my my meditative night shower is like I you know, sort of released the last day and then I started thinking about the next day and then I basically come up with my entire to do list in the shower to the point where like when I get out of the shower, I got a rush to like enter everything before I forget. But it really puts me in that like clear thinking space. And the same thing. It's nice to have that To Do List done for the tonight. The night beforehand. So you wake up and you don't have to start thinking about it and yeah, that's As long as it doesn't stress you out too much to do. So. Cool. And anything else, any other tips? We - -19 -00:15:04,320 --> 00:15:12,120 -Unknown: could do a whole house? I just I just think it's so interesting how all of the tips for working from home are all mental, you know? - -20 -00:15:12,149 --> 00:19:22,110 -Scott Tolinski: Yeah, yeah, absolutely. It's really easy if especially if you don't have a deadline or something to just be like, wow, no, no, when you run your own stuff like us, you kind of never have moments where you don't have deadlines, technically. Okay, cool. So I got one here from Ben M. And this one's is a good one. Because that, you know, I currently have a couple of these projects going right now. So what are the trade offs for using WordPress as a headless CMS versus using it as initially intended with being hosted on a server and such plugins, etc? So some pitfalls that I've run into are one double hosting, right? You have to host the back end somewhere, you have to host the front end somewhere. And this can create confusion for your clients, what why do I need to host or maybe you don't need to host but why do I need such a complex setup for my host to there's less connection between the front end and the back end, right, you can do less things like little edit buttons on the front end that take you directly to without having to do so manually, everything is going to be manual, there's going to be no such thing really, as these front end plugins and WordPress, right. So you can add a basic slideshow plugin, and then have it just appear in a zone or widget or whatever, you're more or less going to be making a custom content type, you're going to be making a custom slideshow, and you're going to be doing it all by hand. So therefore you lose some of the speed benefits of these things that just exist in WordPress. And I've also found it to be confusing for the client. Some of my clients who have had WordPress sites in the past now are sort of wondering, Well, why all this extra stuff, like why the extra front end? Why the extra complexity, oh, and maybe that could be a little confusing. If they're interested in maybe some of the actual way these things are working rather than just here's my website. And here's how it works. So for me to alleviate some of these one, know you're getting into it with a custom thing, it's going to be custom, your code is going to be custom. And for me, if I'm writing a react to Gatsby site, whatever, I'm doing the headless WordPress, so that I have access to custom stuff. If I don't want custom stuff, I wouldn't be doing it right, the double hosting thing, you can use a host like one of our favorites Netlify on the front end. And if you're not doing anything crazy, you get that excellent free hosting out of that. And then you can have something like a cheap host like a Bluehost or GoDaddy or something like that for the back end. And then confusing the the site maintainers I presented as this here is your WordPress back end URL. This is it. This is the WordPress back end URL. That's all you got to worry about. And I don't necessarily get into it too much about the front end, the back end and all that sort of difference. They're just like, here's where you go to edit your stuff. Here's where you go to view your stuff back end.whatever.com, or whatever URL it is. So there are definitely a bunch of challenges. And definitely some things that I think are just inherent to having a custom more custom system like a headless WordPress. I agree. I think the only thing I'll add to that is that if you are considering building a kind of headless WordPress, make sure that your client knows that because I think the reason why a lot of people choose WordPress is the the hit by a bus mentality where Oh, you're the developer and you go away, it's very easy to find another WordPress developer who can pick it up and sort of keep running with it. Now if you have a totally custom setup, someone might get thrown in there and be like, I have no idea even how to like to start this like I remember a couple years ago getting thrown into a project that was built on this, like custom JavaScript framework that they had built. And I was like, 10 hours deep on it. And I was just like, I can't do this, I have no idea. Like how like this is even working what the thought process was behind everyone. It was just way too hard for me to pick up from that. So people and also people, you get this like market or types that want WordPress because they can sling a WordPress plugin in when they specifically need like, Oh, I'm using lead pages. Now let me just install the lead pages plugin. And they're gonna be pretty mad when you come back to them with a $3,000 quote, to add that specific functionality where it would have been 10 seconds to flip on a plugin with WordPress in the past. Yeah, I - -21 -00:19:22,110 --> 00:19:39,630 -Unknown: mean, totally. You don't want to, I don't know, you don't want to remove these these tools from the hands of your client who's paying you to build something with these tools? Because I mean, the reality of it is these tools are really what Nick says experience is great. And - -22 -00:19:39,960 --> 00:19:40,920 -he's gonna do it. Yeah. - -23 -00:19:40,920 --> 00:19:56,360 -Another great tool that we really love around here is coffee cup software's CSS Grid. Oh my gosh, people have been commenting on Scott segways. And they're just so good, because - -24 -00:19:57,050 --> 00:21:24,750 -Wes Bos: WordPress to CSS Grid was not easy. No, no, I that is that is unbelievable that you did that. Anyways, our sponsor today is coffee cups CSS Grid builder, it's a free tool. So coffee cup is a company that builds a lot of these visual editors for building responsive websites. And they contacted me a couple of months ago and said, Hey, like, Can we do something together? Because you made a CSS Grid course, we built the CSS Grid tool. And I was like, oh, okay, let's get on the phone and check it out. Because like a visual builder are those any good. And turns out, they are getting a lot better in the CSS Grid. One is awesome, because CSS Grid is super visual in my CSS Grid course, I use the Firefox Dev Tools just to be able to show you what is going on. It's such a visual thing to be able to build. So what they've done is they've created the sort of interface for creating everything that has CSS Grid. So the the areas, the columns, the grows, the grid gap, how much they spend, where they start, where they end, you know, all of the stuff that goes into CSS Grid, and they built a tool, and then you can kick that out to code and import it into your website, which is awesome. You can also bring it back into the grid builder if you want to, to be able to edit it. So you want to check out coffee cups, CSS Grid builder at CSS grid.cc. It's a free download there. And they also have a bunch of resources for getting up and running with CSS Grid. Thanks so much to coffee cup software for sponsoring. - -25 -00:21:24,779 --> 00:24:17,460 -Scott Tolinski: Thank you. All right, let's see what what kind of questions you got. This one's from manuelle. Hey, guys, how do you deal with API credentials in react? Do you wrap that in your own back end? How do you make your back end that doesn't get exploited by others? Many API's, API keys have a request limit. So I think there's a couple questions in here. Specifically, when you have a react application, and you need to talk to some sort of back end like like, how do you make sure that there's people aren't exploiting that? How do you deal with the fact that sometimes you have API keys in your react application, and anyone else could take that. So there's a couple things here, let's let's first unpack the API key thing. So if you sign up for something like Google Maps, or you sign up for something like an API that returns a list of all the comic book characters that come back, and they often will give you a key. And what you actually need to know about these API keys is is this key? Can I use this in the client, meaning that can I use it in JavaScript directly. And if that's the case, then you can just go ahead and use an often what they'll do to restrict other people from using that API key is that you have to input the domain names that the API key is going to be used on. And then the API will block requests only that are only from that specific domain name. So you might like register, local host, and Wes Bos calm and a couple other ones that you have there. Other API's will not let you request that they'll have no course setup. So we're gonna have a whole episode on what courses but essentially, it's cores cross origin resource sharing, where can I share data from domain to domain, and often API's will block all of the requests from one domain to another. And that means that you have to use that API on the server side. And they're expecting you to write your own API endpoint that takes in your requests. And then on the server side, where it's private, you sprinkle on your API key, maybe I'll do some caching there. Because often, like I was using an API, fixer IO to do currency conversion in my back end, just to show me how much money I've made in Canadian. And it turns out that they, they stopped their open API, and now they're on an API key that only allows you, I think, like 20 requests per hour. So what I had to do is I had a cache the currency conversion values for 20 minutes. And I hadn't had to do that before, because I was just hitting it every single time that I had there. So you might not want to implement caching, you probably want to put in your own API key, you might want to implement your own course. Because now if somebody finds your own API endpoint, then they can use that from any end endpoint that you want. So you want to say okay, you can only use it from this specific endpoint. So that's the first half of that. Do you have anything to add about that? Scott? No, - -26 -00:24:17,789 --> 00:24:18,570 -Unknown: no, it was good. - -27 -00:24:18,839 --> 00:27:11,970 -Scott Tolinski: Okay. The other part of it is if you build your own back end with your own API endpoints, like what do you need to do in order to make sure that it doesn't get exploited by others, because if you have an API, you shouldn't have other websites or other people being able to request that. So you can implement your own API keys, you can implement your own cross origin resource sharing URL, so people can only ping them from specific other websites. Although you can definitely get around that with proxies and things like that. There is rate limiting, so if somebody tries to hit your website 1000 times in a minute or someone tries to take a huge list of email addresses and pump them into your database that you can rate limit them based on IP. So you say this IP address can only it can only submit this form two times every 30 minutes. And I've actually run into that before where entire high school classes, take my courses, and they're all on the same IP. So I had an issue shuts them all down, because it seems like someone is spamming the system, right? You can also do what's called shadow banning, which Reddit does this where you can get banned from a specific website, but you'll never know it. So if you view the website as yourself, your your comments will show up and you're like, Why is no one commenting on my comments? Or why am I getting no upvotes? Because it looks like it's working fine. But to the rest of the world. No one sees your stuff because you've been shadow banned. And then there's all kinds other? Yeah, Shadow banning. Yeah, it's like a secret society can thing. There's this idea of CSRF tokens, which is a cross site request forgery. And what this means is that like, let's say I'm signed into bank.com. And then I have malicious Comm. malicious.com. And I visit malicious.com. The fact that I'm signed into bank.com means that my, my browser has cookies for a session, or I'm logged into bank.com. So if sorry, if malicious comm were to send a request to bank.com, when I visit the website, they could send a request to like Ford slash send me all your money, right. And what CSS fr tokens do is that it makes sure and of course does this as well, it makes sure that the request is actually coming from a domain name that is allowed and not from anyone who can access that otherwise, you're gonna get you're gonna get into trouble with, you could visit any website, and that website could fire off requests to external domain names. So there's a lot to unpack there, we could probably should do a whole security episode explaining these concepts a little bit more in depth. But there's there's a lot you can do to to sort of stop that misuse from happening. And it's definitely something you want to do before you get hacked or before somebody finds out that they can be malicious because that's that's never fun to deal with. - -28 -00:27:11,999 --> 00:27:27,810 -Unknown: Yeah, definitely. Cool. Okay, I have a good one here says from let's see if I'm Mark Martin, m m a r t n. Martin. Martin. That's like I would do a lot of A's in that like a Mark Martin. - -29 -00:27:27,840 --> 00:31:21,660 -Scott Tolinski: Yeah, Martin. Yeah. Okay. So this question is long term wise, how do you guys keep an eye with an eye emoji? Thank you, Martin, on performance on an app site in production. So okay, so I'm gonna give some answers that are some of which are personally to how I do it, and then maybe talk about how we can do it. So how do you keep an eye on performance for an app or site in production, one thing I like to do, and you should probably do is have an eye on whether or not the site is actually up or not. So for instance, I use a service called uptime robot to ping the site pings of site every five minutes, there's like a really good sort of free integration with this. And you can pay a little bit more and get more features. But to sites like this are just going to simply ping the site, check to make sure it's working from different locations. And then if it's down, shoot you an email or can notify you in different ways as an API. So I use something like this to well shoot me an email, if anytime any of my sites go down, I just throw this on most of my sites to be honest, just I create a new project, uptime robot, throw it on there, there's a lot of services that do this as well. So okay, so that's just to make sure it's up. Now, another thing I do is constantly check my production site in different browsers in the dev tools. So Chrome or Firefox dev tools, I'm checking those performance tabs. So yeah, I fire up this in dev tools for Firefox, or chrome and the live production version, I'm running the performance features, I'm running the network features, I'm seeing the paint times, and I'm checking it, I don't necessarily do it all the time. But if I do a big release, I'll do it afterwards. Or I should know, going into it, if it's going to have that kind of impact. Also, I just use my sites a lot, I use them on slow connections, I use them on fast connections, I just check it out. I'm kind of obsessed with getting in there and checking out my own stuff there. Now, if you want something more automated, there's a lot of services, I use a couple of services that automate this kind of stuff. For instance, for queries and database stuff, I use Apollo engine, since I'm using Apollo and graph QL. Apollo engine is super easy to just tap into. And you can see graphs of how long certain queries are taking. For instance, I had a query in my air resolver in my role system that was checking the user role. And every single time I was checking the user role, even though I had a fresh copy of the user from the database, I was doing a second database call to check the user role. And this is all taking place on the server side. It didn't have to be done. And I could see in an Apollo engine that that query was taking too long. I went in there, I fixed it, and so something like this Second, a monitoring software can give you a lot of visibility into areas that you can speed things up, especially over time. A lot of these features also exist in my hosting platform, which is Meteor galaxy, which gives me a ton of data on how my site's performing how many people are on it. And exactly, you know, get a lot of fancy real time graphs about what's happening. And you can look and see, okay, where are these slowdowns happening and why? Now there's a lot of services that provide this sort of thing, like, New Relic is really probably a highly used popular one, I do not use New Relic, but New Relic gives you a ton of visibility. And I think they have like a free tier or at least a demo that you can get up and running with. But New Relic is a really nice performance monitoring software. There's also another one called ping DOM, ping, do em that does, like I said before, does that sort of tracking to make sure your site's even up, but it does website performance monitoring. pingdom has a really nice interface. Really cool stuff, I highly recommend having software like this, if the project something you're taking seriously, if you if you want to be having a good eye on your performance at all time, this kind of stuff is is really good. In addition, you could also use some additional, like error checking software like Sentry or Log Rocket, who's been one of our longtime sponsors. So yeah, just having a visibility on what's happening in your codebase is pretty key. - -30 -00:31:21,960 --> 00:32:59,250 -Yeah, I just use a couple of these, I probably should do a little bit more, I use pingdom, to make sure that my site is up, and it will email you when your site goes down, which I find is really helpful. I don't have a paid thing to plan. But if you do pay looks like it's about 15 bucks a month for a single website, which is a bit much for me. But what they do is they also will do PageSpeed, and all that good stuff for you. And they'll give you some really good insights into it. On my database, I use m lab to host my MongoDB. And every couple of weeks, they'll email me and tell me what my slow queries are. And what I really like about this is they will tell me what to index on my database. So indexing, if you're not sure what that is, indexing is kind of like you could index like a title of a blog post. And you could index the content of all blog posts. And it will sort of keep that in memory so that when you perform a search on those fields, it won't have to loop over every single one, it will already have them in memory. And it'll be able to search those fields much more quickly than if we're looping over it. So I have like hundreds of thousands of records in my database. And I was doing some counting, and it had a loop over every single one and count it for me. And it's okay, if you index this, the query would be way faster. So that's good. And then I also keep an eye on Digital Ocean, which is my host right now for my, my websites, they have some good graphs that are more like CPU memory. And you can see like, Oh, it looks like when I sent out this email, I was spiking to 80 90% of my CPU. Maybe it's time for me to upgrade my box to size a little bit larger. - -31 -00:32:59,310 --> 00:33:13,740 -Unknown: Yeah. Hey, do you ever get that question? where it's like, you know, the, if the black box is indestructible, then why don't they make the whole airplane out of the black box in regards to like indexing? Like, why don't you just index everything? Do you ever get that question? I actually - -32 -00:33:13,740 --> 00:34:18,480 -Wes Bos: have that question myself. And I guess it has to do with you need a you have to pay more money? Yeah, depends on how big your database is, you could. And if you have a small database, you can index the entire thing. But at a certain point, it's going to take too long to index absolutely everything. I remember listening to a code pen radio, where they use a entirely separate system that sits on top of their database just to do search. I forget what else a lot. No. So there's like a golia, which will index all your stuff, which is a service, there's Elasticsearch, which you can host yourself or use a hosted version, then there's some other Java one that that could Penn was using to index because you need to be able to search for anything and CSS JavaScript HTML and and find it. And they said that, that when they made a change to the search thing, it would take them days to re index all the code pins that were in there. So like, obviously, at a certain point, you're either going to have to pay a ton of money for your hosting plan, or get some really beefy hardware that's going to to be able to go through that and index it all right. - -33 -00:34:18,600 --> 00:34:41,480 -Unknown: Yeah. Yeah. It all comes down to memory and and that kind of Yeah, processing power. Cool. Yeah, that's pretty much all I got on that one. Wicked. This one is from Jonathan. Oh, record. That's pretty good to do a whole record already. Please, girl, can someone please make a quick cut together? What montage - -34 -00:34:41,520 --> 00:37:06,960 -Wes Bos: What girl? What girl record row record? Well, someone needs to make a montage of me mispronouncing everybody's name. Anyways, the question here is what happened to Canvas after all the hype around html5 some years ago? I hardly see it mentioned anywhere. No use cases beyond games. So I like this question because I actually use Canvas myself fairly often. So Canvas, if you if you're not sure is a is an element sort of like an image. And then you can either use 2d or 3d canvas. And then you have a set of API's that allows you to draw to Canvas. So it's kind of like Microsoft Paint, but for the browser, and I guess there's a lot of websites where you're not actually drawing to the you're not drawing stuff you're not right. So you probably don't see it used in that case. But I think under the hood, it actually is pretty helpful and is used often as a utility for creating things in the browser. So anytime you want to do any sort of image processing in the browser, you'll more than likely have to pop open image canvas. If you want to take a frame of a video and and save it as a JPEG, you need to dump that into a canvas first. And then out of there. Any team anytime you need to dynamically create some sort of image, or you need to draw something to the user, then that's exactly when you reach for Canvas. So specifically, I've used it just last week where I have the website key code dot info. And somebody made a pull request to add a fav icon because there was no fav icon and I was like, wait a sec, wouldn't it be cool if we showed the currently pressed key code in the fav icon so that when you talk, when you toggle away from the browser, you could still see it in the tab that you have like if you're coding in like a code pen, and you want to flip back, you know, oh, shoot, what was the key code for escape, it should show you 27 in in the fav icon of the tab. So I was like, I bet, you could write the number two a canvas element, spit the canvas element into a base 64 image and then set the base 64 image as a fav icon and it worked. I couldn't believe it. And I thought that was pretty neat to be able to do that. And if I were to do, there's no way I would be able to do that otherwise, unless I were to create 400 separate PNG files that had every single different key code in it. Whereas this I just had to write a couple lines to write the number to a canvas, spit it out and set it as the actual number. - -35 -00:37:07,020 --> 00:38:08,900 -Unknown: I have a question about the word fav icon for RDS. It does use a fav icon or favicon. I say favicon. And I feel like I'm the only person that says that right now. favicon favicon favicon. I say favicon. Sometimes it sounds like a like a conference for like enthusiasts Have a drink or something? Oh, yeah, whatever. That was a con. Yeah. favorite drink, they have a con. So yeah, I think it's still widely used. It's just one of those like, tools where it's only when you need it, right, that's the kind of the beauty of JavaScript is that you're not going to be using the entire surface area of JavaScript. There's a whole set of API's for dealing with audio. And almost all of us will never touch those API's. But there's going to be a subset of people that need to do something with audio in the browser, especially as we start to build like desktop quality applications. In the browser, we're going to be needing the image processing and audio processing API's in the browser. - -36 -00:38:08,939 --> 00:40:13,940 -Scott Tolinski: Yeah. Hey, also, you see, sometimes people have some like fancy, like maybe like network patterns or patterns or that are dynamically generated or created behind the like as a background, and maybe you're clicking around the website, and it's adding nodes or making it like sort of fancy, like a lot of times that yes, canvas to that. They're just, I don't know it can be it can be used as a interesting little visual tool here and there. And addition, like I don't know if you've ever seen three j s, which is the whole 3d processing and stuff like that three j. s is is pretty popular. So Canvas is definitely still there. And it's still extremely useful. But again, like as you mentioned, like the audio API's, it's not going to be useful to everyone necessarily. Yeah, I'll let me talk about something that is useful to everyone everyone who has their own business Freshbooks is extremely useful because Freshbooks takes the whole process of accounting, which can be so annoying and frustrating and turns it into an actually nice experience. Yes, Freshbooks is the awesome small business accounting software that makes that part of your mix that part of running your business absolutely painless. So I've been using fresh books myself for running my own business for probably about 10 years now, which is awesome. I've seen it through the initial fresh books about a year ago year and a half ago, they rolled out the new fresh books, which is a totally rewrote it and it's it's such a joy to use. I use it for all of my invoices, all of my expense tracking, you can import all of your expenses from your credit card. You can manage all kinds of different currencies, you can automatically remind clients when they haven't paid and it will it'll sort of follow that up. It's fantastic. So if you are running a small business or if you are even just want to send a quick invoice over to someone I definitely recommend that you check it out. So Go to freshbooks.com Ford slash syntax for a 30 day free trial, unrestricted at that. And enter syntax into the How did you hear about us section? So, thanks so much to Freshbooks for sponsoring. Nice. Alright, - -37 -00:40:13,940 --> 00:40:28,380 -Unknown: I got one from Eric Larsen. It's an easy name. Good, good, easy name for us. Thank you, Eric. And this this question is how do you deal with analysis? paralysis? That's sweet name analysis paralysis? - -38 -00:40:28,560 --> 00:43:53,130 -Scott Tolinski: Yeah. Sounds like a band. Yeah, it does. I always get so caught up in choosing the right libraries and following the best practices that it can halt development. And this is like a super common problem. Because we, as developers, in this dude like to pick what's right, we like to pick what's perfect. And we like to have everything be perfect and best practices all the time. Let me tell you what, and the level up tutorial site I've changed my data layer, like four times from originally will actually I've changed lots of stuff many times. And it probably would have hurt me if I would have really, really changed or taken that time at the very beginning and been like, hmm, instead of just getting into it. So I made some decisions at the beginning. And I started building one way. And guess what, you can change stuff, as long as it's not like, Hey, I'm gonna rip out this huge, huge major part of my site, you have abilities to change this stuff later down the line. I mean, I can, I can think of so many things in my site, I used to use moment. Now I use date FNS, I used to use, I used to use blazer as the front end code. And now I use react, I used to use mini Mongo and tracker from Meteor. And now I use Apollo, these things can be changed over time. And even though it is going to be a little bit of a time sink to change, I wouldn't get caught up in and picking the very best thing, because the very best thing is going to change over time anyways. So just get to work, man get to work, and then then then worry about it later. Yeah, no, I don't think that you should worry about it all that much. It's easy to even listen to this podcast and be like, Oh, man, everything, everything they're talking about is things that I don't use. And like even in my own websites, like my own, my own websites that sell my react course, is powered by jQuery. And the reason why I haven't changed that out yet is because it works fine. Like there are lots of good solutions for solving these problems. And it just because it's not the absolute best solution for solving that problem, it might be 99% of the way there might be 90% of the way there. And if you do have to swap it out, like I'm going to rewrite that the checkout flow in react at some point probably in the next couple months. But I've definitely learned a lot along the way. And that's just part of your career, right, you just need to know that part of your career is that you're going to be building stuff in different types of libraries in different ways and different development methodologies and different approaches throughout your entire career. And that is where you are going to be gaining your experiences. So do your research, make sure that it's a good fit for it. But don't sweat it in the long run, because there are hundreds and hundreds of websites out there that are built on different types of tech, and they're all doing just fine. And it likely will not affect the the bottom dollar of your business. If something is built in x instead of y Yeah, and I didn't, I didn't mean necessarily to go off and say like, it doesn't matter, because it does matter. But don't if it's if it's to the point where it's your micro analyzing between two different things, and both of them are good fits, then then either one will probably be fine. Again, if it's between react and view, it's probably going to be fine with either one as long as you're experienced or whatever. It's between moment and date. FNS it's probably gonna be fine or whatever. But yeah, just make sure that it's the right tool for the job, like you said, and then at that point, as long as it's the right tool for the job. You're you're you're good to go. - -39 -00:43:53,430 --> 00:44:24,510 -Unknown: All right, we got another question here from all this person is provided us pronounciation Yes. Florian Seuss. Thank you, Florian. That is a really nice name. Yeah. Anyways, the question is, suppose I love this question. Suppose you are both forced to change a career with the condition that your new career has to be different from anything you've professionally undertaken before? What would it be asking because I want to know more about you to this question usually pulls out some interesting answers. Cheers, Florian. - -40 -00:44:24,810 --> 00:44:25,410 -Yeah, - -41 -00:44:25,410 --> 00:46:33,360 -Scott Tolinski: this is good one. I got I got I answered. I'll let me let you think about it. I think that I would definitely be in some sort of buying and selling position, whether that is buying things and reselling them on Amazon or buying stuff from a thrift store and flipping it on eBay or something like that, because I have if you think back to when I was a kid, I would go to my neighbor's house, pick the pears off her tree and then sell them on the side of the road, right like I saw. I think arbitrage is the best way to describe what I would be doing. As I would be finding places where things are cheaper, free figuring out something to do with that thing, maybe presenting the pairs in a nice way, putting them in nice boxes, and then selling them. So what else did I do I used to buy bicycles, I would fix them, tune them up, swap out the tires, put maybe 100 bucks into them, and then flip them for two or three times the amount that I actually had bought them for. I used to sell flip black berries, which is I would buy blackberries from people that had them locally, maybe they were locked to a carrier that wasn't popular or often people would like have like 18 t blackberries, when they would they would move from the states to Canada, so I would buy them from them and then I would I would spend the like 12 bucks to unlock it. And then I would I would put a SIM card or I would put a like a 500 meg little SD card with it and I would maybe buy a couple of cheap cases online and then I would sell it as like this package comes with unlocked phone, little memory card and a case and maybe it sell it for 50 bucks more than the most of the things that go right so I would always find these like ways to arbitrage some sort of product that you have there and I still really really enjoy that that's why I kind of like doing this whole sticker thing because the whole process of like designing the stickers ordering them from China importing them into Canada, figuring out that it's cheaper to drive to Buffalo and cross the border and mail them you know, like yeah, that as it's it's a lot of work, but I always find like a lot of enjoyment out of that. - -42 -00:46:33,450 --> 00:50:16,170 -Unknown: Cool. I really have no idea to be honest, I could go a lot of different directions with this. Like I feel like I could be a DJ because I I like and listen to Jay sky. I don't know if I could actually do that. But I feel like I mean I like and listen curate music I've got no you know, it's just a lot of experience in that regard and audio production and that sort of thing. It is very far off I would still get to work with computers in an interesting way. I also am a huge fan of turntable ism even though I'm not good at it, so I feel like I would I would definitely try something like that I could also do something totally different if we're like hey, this has to be way out of the line. I could be like a snowboard instructor because I love being outside and on the mountains I love snowboarding that kind of thing get out there and just live on the mountains and and teach people how to board I guess yeah, those those are two very different answers I guess. turntable ism. Yeah. What is that? You turn tables? Yes, you turn tables now it's typically like the the way that you would describe like a scratching artist a turntable list, a deacon garden Guy amram rat, you know, like the Ah, yeah, I know about that. Yeah, yeah, sir. Table ism. I didn't know that. That was the thing. That was what it was called. I knew that like that was a job but yeah. Battles i've i've a lot of friends with setups, turntable setups, and I would love to get good at scratching to be the point where it could be like a thing. There's this thing called the the DMC championship, as I called the championship, the DMC maybe the word see in the DMC is championship, but it's it's the turntable championships really. And let me actually Google that. Yeah, DMC world DJ championships, so they say it. And these things are incredible to watch. So I've been to DJ battles. And I'm a huge fan of it, although I do not do it. So. Cool. I think we got time for one more question. You want to pick one out? Sure. Although I actually have a third answer to that question. It just came up to me. Oh, yeah. Sorry, is what I would be doing if I wasn't programmed, like I always frequently tell my wife that if I was didn't have to make a living like if I just had infinite money. This is what I would do. So I guess this is the answer to this question. What I would do is I would develop a video game that's a spiritual successor to cruise in the USA because I really want that. I'm very aware that most people don't want that. But I would probably work on video games. That'd be cool. And who doesn't want a sequel to cruise in the USA? I've never heard of that. Let me see cruise and do a USA you never play. We used to play cruise in the USA crews in the world and crews and Exotica for Nintendo 64 constantly love those games. Ah, yeah, I know this game. I used to play this. It's funny. I thought it was something when I was a kid. We had this like, like when I was in kindergarten like, like you used to have like a DOS computer before windows 95 we had this game called cross country Canada. It was like it was like Oregon Trail but instead of like, instead of like dying from dysentery you would like get like shanked by you would pick up hitchhikers maple syrup. Like Yeah, they would steal maple syrup and you pick up hitchhikers and they would steal from you or you forgot to luck lock the truck overnight then you would get robbed It was not I think about it. I wonder if it's still online cross country Canada. Someone didn't say sorry to you. After wronging, you 1991 it came out. So it just google cross country, Canada on YouTube. It's, it's hilarious that this was a game, I'm gonna check it out. Okay, last one is from Nick Roach, as a freelance developer, what - -43 -00:50:16,170 --> 00:51:45,960 -Scott Tolinski: are some good questions to ask a client before taking on their project? There's a lot of questions. Because if you take on and agree to a project, and then you find out afterwards, that this thing sucks, it's way harder to get out of it than it is. So obviously, budget grant the budget, talk about, you know, if your time goes over, if the amount of time that you would have to work on this project is there room for extra budget, you got to talk about things like feature creep, like where they just keep adding on and adding on and adding on. So you're gonna really want to have a good idea of what this thing is exactly, and what it needs to do. Like, let's say, Oh, it's just a blog, and then all of a sudden, it's a blog with a web store, and this and that, and then that's way outside of the agreement, right? So you're gonna want to make sure you have a really good handle on what exactly this project is, what the scope of it is. And you're going to want to make sure that you and the client, both are on the same page in that regard. So again, asking the scope of this project, how big do they see it getting? What do they see it looking like? Do they have designs already? Is this a full on this is just a dev project design project. You know, I also like to talk about preferred communication methods. So much of this is like the problems that come up in freelance projects end up being Yeah, on occasion issue. So do you like to do you want to do like a weekly overview, or actually just learned that bi weekly? is technically every other week? Right? Is it? what's the what's the word for no price? weekly? - -44 -00:51:45,990 --> 00:52:14,130 -Unknown: monthly, bi weekly, twice weekly? Yeah, whatever, twice weekly, or however long? It's, it's totally inconsequential to this conversation. But yeah, so so exactly how they like to communicate, what are their best ways to communicate? What do they want to know? Do they want micro updates, macro updates, how you're working? Do they want to see progress? Do they understand how the progress that you're showing them is going to look? But again, getting communication stuff defined in in up front is going to, you know, be a big deal? I think. - -45 -00:52:15,360 --> 00:55:33,870 -Scott Tolinski: Yeah, I agree as well. I think, in addition to that, some important questions is to ask your your client is like, how do you make money? And that was the thing I always ask them, because at the end of the day, usually, this is someone that's running a business or a cause I also did. It did a website for like a big Food Bank locally here. And like, like, what's the end game? Like? People need to figure out how to use the food bank? And people need to figure out how do I easily donate to the food bank? Right? Those are two major goals. And it's important that you as a developer, don't just be like, Oh, do you want to use sass? Because using sass has no, it doesn't have any matter to the end game of them trying to feed the hungry and, and get access to unused food, right? Or, like a real estate agent. At the end of the day, the real estate agent wants leads, they want people to find their website. So search engine was really important there. They want people to fill it out with their email or their phone number. Because once you got that, then then the real estate agent has them right. So you really need to talk about like, what is it that you're trying to do with this website? And then get into the the important things of like, Okay, do you need a map? With all of all of the listings on the page? Do you need the ability for people to buy things? If if you need people to buy things? Do you need the ability to manage your inventory on the back end? What does shipping look like? And you really have to go down the rabbit hole of finding out all of these questions, because if someone just says, a store, or an image gallery, then it becomes it becomes really blurry. And that's where disagreements can contend to arise, as well as they might not necessarily know what they want, right? Like you. It's your job as a web developer to ask the right questions, to figure out what they need. And then you will come back and propose things to them. Right? Like, I remember when responsive design came out. It was really important for me to ask questions about like, who their customer was and and come back to them and say you should do responsive design because XY and Z not do you need it to be responsive because they don't know, right? You told me I always hate that. I always hate that when we have people come work on our house contractors or, or I learned in the UK they called builders. And then they just ask you questions like, oh, like, what do you want here? What do you want? They're like, I don't know. You tell me. You're the expert here. I need you to help me. Yeah. And say like, do you want? Or this technical term? Yeah, I don't know. I don't know. Yeah, you tell me. Also things just like simple things like a logo. I can't tell you the number of times people assume that a website comes with a logo, right? And like that's an entire entirely separate process, entirely different skill set and like the whole branding thing people just assume often if they do business, they don't have anything. And you can, it could be an opportunity for you to upsell them on things like a business card or pamphlet or design system or things like that. So ask as many possible questions as you can just because otherwise you're gonna get burned. And I always hate hearing stories of people where I tend to find a lot of people in freelance, it's always like them against the client, or like, Oh, my client doesn't understand this and your job, you're running a business, your job is to be on your client side, and to help them through that entire process. And that's what's gonna make you a good Freelancer board. - -46 -00:55:34,170 --> 00:57:06,180 -Unknown: Yeah, nailed it. dope. All right, that's enough questions for today. We got a whole bunch more here. But please keep submitting them. We're gonna move into some sick pics. dick pics, I got a sick pic here. This one comes from one of my best friends in the entire world. His name is Devin current, his company is good hertz, good hertz, Co. and hertz is spelled h e r t z, good. h er Tz Ko, they do audio plugins. And these are like some of the most inventive brilliant audio plugins on the planet. You can even just tell from going to their their homepage that based on the design and feel of these things that they're not messing around, these aren't like, these aren't your audio VST s from you know, 10 years ago, these things are all brilliant, every single one of these plugins is interesting, exciting and unique in all sorts of ways. So if you're into audio production at all, if you're if you're, you know, hobbyist or whatever, you're going to find some really, really cool stuff on good hertz. And, you know, again, he's, he's, he's my buddy, but I'm endlessly impressed with all of this stuff, the amount of just, I don't know, exciting ideas coming out of his company is just mind blowing a he is like more so than any one like the person that I look at his work and be like, dang, I need to step up my game, because he's killing it right now. So check out good hertz.co. It's brilliant, brilliant, brilliant stuff used by a lot of famous musicians. So check it out. - -47 -00:57:06,330 --> 01:01:10,920 -Scott Tolinski: Cool. My sick pick today is a book that I just listened to for the third time. And I recommend that you do the audio book of this one. It's by Derek Severs. And it's called anything you want 40 lessons for a new kind of entrepreneur. And it's only an hour and a half this book. So you can really easily digest it. It's almost like a podcast and Derek Severs is the guy behind CD, baby, where back in the day before, before, when you had a CD, if you wanted to be able to sell your CD online, you couldn't really do that unless you're part of a label and then later on when you want to get your your music into iTunes, you couldn't really do that. So CD Baby was like kind of one for independent artists in that and guess it's just got this fantastic outlook on life, about how to approach business and and how to do it so that you're enjoying life. Like sometimes I find myself like I'm running a business so that I can have the life that I want to live. And sometimes I forget that and like I get stressed out about, oh, my my advanced react course is taking much longer than I had hoped. And I'm really letting people down. Because it's not out yet. And oh, I really want to like get it done before I leave on vacation. And then then I realize like, oh, like the reason why I am running my own business is so that like I can go at my own pace. And I can make sure that I put out the quality that I expect for my customers and I don't have to sweat this or I don't have to hire employees or I can do whatever it is that I want in order to make this an enjoyable thing in my life. Right That's where I'm running my own business. So yeah, he's got this fantastic outlook on life really, really big fan of big fan of their servers. He's the one that put out that quote. If it's not a hell yeah, it's a no. Which I I've been living the last couple of years, which is like as new things come to me. It's if it's not a hell yeah. If it's like maybe Do you want to come to this conference? If it's not a hell yeah, it's a no which is is such a good good mantra for for when you have too many things coming your way. So check it out. It's called anything you want by Derek Severs. And I recommend that you grab the audible book because it's written by him and he's he's his just voice the way that he his voice just fits the the tone of the buck perfectly. Do you subscribe to audible? Yes, I do. I I kind of like it. Sometimes I get too many credits because and then they don't let you keep more than six credits. just annoying, but audible also will refund a book, which I've done many times if the book is no good. You just ask for your money back so there's no there's no sweat in getting a book that looks good. And then and realizing No, it's not like I got this book called The 10 x rule and not good at all. Got that refund. It sounded so good. 10 X. I want to be 10 x one x right now. Yeah, but it wasn't feeling it at all. So I i refunded that one now you subscribe to Audible. I don't but I'm considering it because I've just been buying And do google play store just like whenever I want one, I'll just get it. And I feel like I've bought more than one a month. So, or at least one a month at what it would be. What is the audible subscription? I think it's 15 bucks a month. Yeah, I would it would be cheaper for me to have an audible subscription. Definitely the way I'm doing it. So yeah, I gotta do that. Any shameless plugs, shameless plugs, shameless plugs? When is this coming out? coming out next week? Yes, yes. Okay, my courses are still on sale, I extended it a little bit just because I kept getting emails about people missing it, which is one funny thing that happens, I'm like the it's running out and then feels like I missed it. So I've put it on sale, it's selling really well. All of my courses are currently on sale right now as I prep for my advanced react course. So the advanced course is going to touch upon using Express and express middleware. So you could learn a note, if you want to brush up on that, it's going to be using ESX It is so you can learn ESX for everyone, it's going to be using a sink await, which is also an ESX. And then obviously, it's going to be using react. So if you are shaky on any three of those things, spend the time leading up to my advanced react course, brushing up on whatever it is that you need to do - -48 -01:01:11,040 --> 01:02:55,950 -sick for me, by the time you're hearing this the electron, I'm changing my branding up a little bit from being electron for everyone, it's going to be level one electron. That way I can keep things coherent, because I always have level two things. Yeah, like people were like, well, I got level two, where's level one? Like, ah, yeah, okay, this step there. So it's gonna be called level one electron, it's going to be out this week, the week that I'm currently recording this. So by the time you're listening to level one electron will be out, it's gonna be available on level up tutorials.com forward slash store for purchase, it's going to be on a limited time sale, or you can become a levelup. Pro get access to that along with every other series that I have. There's tons of other series, but the electron series is awesome. We are building an in react with create react app, and we build a markdown editor. That's like a journaling app. So it has metadata. You can create an edit already existing markdown files, you you point it to a folder, so maybe you sync that folder with Google Drive or something. And it's a full on journaling app, it feels very much like some of those apps like let's say like Ulysses or some of those journaling apps, but it's it's ends up you can build a cross platform. It's all in JavaScript react. And you learn a lot of node stuff, we read and edit files, save files, autosave change between files, build the whole interface with styled components, it is really super slick. And I even have a cute little icon for the application too. So at the end of the day, you end up having a little icon in your dock and a fully working markdown application that you can take and really really turn into something very real. So check it out level one electron available - -49 -01:02:55,950 --> 01:02:56,760 -Unknown: now. - -50 -01:02:56,940 --> 01:03:22,530 -Like Scott's laughing I say wicked so much. That is legitimately wicked. Thanks so much for checking out syntax this week. And as always, make sure to tweet us at syntax FM hit us up on Instagram. I'm at Wes Bos Scott is at lanky Delinski stilinski stilinski. Yes. Or at level up tutorials. Yes, get them through that 10,000 Mark, and we'll see you next week. - -51 -01:03:22,710 --> 01:03:23,580 -Please - -52 -01:03:26,460 --> 01:03:36,210 -head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax55.srt b/transcripts/Syntax55.srt deleted file mode 100644 index 623940ac0..000000000 --- a/transcripts/Syntax55.srt +++ /dev/null @@ -1,128 +0,0 @@ -1 -00:00:01,319 --> 00:00:51,060 -Scott Tolinski: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to whiskey and West boss. Welcome to syntax In this episode, this is going to be a little hasty treat on roles. And even though it's a hasty treat, and its roles, I'm not talking dinnertime roles here. I'm talking about role systems and users. So we're gonna be talking all about how we both manage our user role systems, permission systems, that kind of thing, as well as the different strategies that you can take when designing or even thinking about your role system, why they're kind of important, and some of the security implications surrounding all of that stuff. So with me, as always, my name is Scott Williams ski, and with me is Wes Bos. - -2 -00:00:51,239 --> 00:00:52,650 -Wes Bos: What's everyone? - -3 -00:00:52,650 --> 00:00:53,640 -Scott Tolinski: How's it going? - -4 -00:00:53,819 --> 00:00:58,830 -Wes Bos: It's going fantastic. We just recorded an episode before this. So I have nothing new to tell you. - -5 -00:00:59,219 --> 00:01:05,189 -Scott Tolinski: Nice. Nice. I'm glad nothing's happened in the 15 minutes in between that, yeah, so it's here, - -6 -00:01:05,189 --> 00:01:09,870 -Wes Bos: I went and had some cherries. That's what I had. Ooh, that's there. - -7 -00:01:10,370 --> 00:03:28,410 -Scott Tolinski: That's not nothing. I'm gonna tell you that right now. This episode is sponsored by Netlify. And you've heard us talk about Netlify. Before, if you have listened to this show, because Netlify is one of our very, most favorite companies, they do Excellent, excellent hosting for modern web projects, they give you a whole bunch of stuff out of the box, stuff that is no fun to deal with, like HTTPS. Continuous integration, CD ends, a lot of configuration stuff that you don't have to worry about now, because it's all taken care of by the host, and it saves you so much time, it's insane. You simply just give it a repo, if it's a Gatsby site, or something like that. It just knows that it's a Gatsby site, it builds it for you. And then it waits for changes in those repo to give you continuous deployment. In addition to that, there's all sorts of excellent features that you can or you know, you can choose to not add these. But if you want these features, they exist such as functions, which is an extremely easy way to work with AWS, lambda functions. Anyone who's done serverless knows, knows that working with AWS lambda is not the most fun thing in the entire world. While serverless functions are really super cool. They're a giant pain in the ass. So this makes working with functions really just super easy. addition, there's identity where you can manage login, signups password recovery without even having your own server side authentication system. And lastly, there is forms, which makes working with user forms superduper, easy to, again, all without any sort of server side code, you just sort of hit their API with your form, and it takes care of the rest. So check out Netlify netlify.com forward slash syntax, and sign up, let them know that you heard about Netlify from syntax, because I know they love to hear it. Because a so many of you have told Netlify how much you love their service after listening to them on our show. So again, I personally I love Netlify. It's my go to host if I want to host anything at this point. So netlify.com forward slash syntax, check it out, browse through their their gorgeous website, they did a redesign somewhat recently, and it looks great. So there's a lot of great information, great stuff all on netlify.com. Check it out. - -8 -00:03:28,500 --> 00:06:53,820 -Wes Bos: Wicked. Alright, so let's get into it. Role systems, permissions, being able to do stuff, how do you manage that both on the client side in terms of displaying things like a button where the user should not see the delete button, if they can't delete it, as well as on the server side where you actually have to check if they have permission to do such a specific thing. So I'll go into sort of how I do roles on my myself both in my own course platform as well as in my upcoming advanced react course. I asked almost a year ago, I asked on Twitter, has anyone ever rolled their own roll system, which is a roll your roll, roll roll system and rolling. Everybody shared kind of how they approach it. And what I was doing in the past was I was doing what WordPress does. And I was just giving a level to everyone. So a user would be like a one. And an admin would be a five and like a I would be a six or a 10 or something like that, where everyone would have a different level. And then I would check if they have a specific level before they do something. But that sucked. It was it wasn't very good at all. And it's very similar to it just wasn't flexible enough. Yeah, it was it was very confusing, and it wasn't flexible enough in order to as I started bringing more people onto the platform, where I would bring on my assistant and I wanted her to be able to read and write customer data, but it didn't want her to be able to view aggregate sales data or be able to do specific functions to each of the users. Like delete an entire user where I could only do that they could only edit it right? So when I got into that it got a little bit more confusing. And I asked on Twitter what people had done. And Micah rich, who is Micah be rich on Twitter tweeted at me. And he said, See here, I've always just thrown an array of permissions in user data, you can have both specific and general permissions in the same mechanism. And I really like that. So imagine that you have a user object and on the user object, you have permissions. And permissions is an array. And in that array, you can put very broad permissions like admin, as well as you can get really specific where you can have like customer, colon, read customer, colon, right, customer, colon, delete, right, you can do all the CRUD operations. And I like that, because that allows me to just create new permissions as I do new things like, I want my system to be able to view other people's certificates of completion so that she can set Save as PDF and send them because some people don't know how to print a PDF. So she has to do it themselves. So I created a new permission called certificate read, right and and, and then all it does is generally in my Express back end, I'll have a middleware, and I have a middleware that's called has permissions. And then I'll pass it in array of permissions where at least one of them has to have access to and then I have another function for has all permissions where you must have all of these permissions before you are allowed to advance. And that's great because I first of all, I don't have to check permissions in the actual controller itself, I just do it as a middleware before for that request, it goes through whether it's a get request or a POST request. And that's really where I've settled on right now I've been really liking it, it's really flexible in terms of being able to do very broad permissions or very, very specific permissions. - -9 -00:06:53,820 --> 00:06:54,390 -Scott Tolinski: Nice. - -10 -00:06:54,390 --> 00:06:56,040 -Wes Bos: What about you? Yeah, yeah, - -11 -00:06:56,040 --> 00:06:57,000 -Unknown: my head, - -12 -00:06:57,030 --> 00:09:38,370 -Scott Tolinski: I don't necessarily have too many specific permissions, I have more of like a straight roles based, I have, like a higher level role, I have an admin role that just gives you access to the admin panels, I have like a super role that will give you access to everything, I have an editor role that will give access to people who are eventually going to be able to do blog posts, or edit their own kind of stuff, I have, let's see, like a customer role, a subscriber role, like a lifetime subscriber role, there's all these different these kind of things that either give you access to various levels of my site, right. So it's basically an array of roles on the user object. And that array of roles determines what you get access to. Now, again, I check these things in both the client and server side. And some of the beauty of things like Apollo with graph qL is that in my graph, qL schema on the user, I actually have for some of the roles, I have a way that it's just in my resolvers checking the role server side, but returns and is admin, right? So I just have an admin property on the user that comes back. And I have in his editor, his property for different roles. That way, I'm not like always checking the array for everything, like, for instance, subscribers, I use the subscriber role all the time, instead of checking an array to see if the subscribers in there all the time I do that server side and my resolver just returns is pro true. So then I can access that. Now, again, security wise, you might be thinking, well, I can just come into react and change that is true, too, or is false to true and get access to the pro content. No, because the data that I'm serving up is only going to be the data that your server side role has access to. So I'm checking your role server side on any data that I send, therefore, if you try to access the tutorials, when you're not a pro server side's going to know, and it's not going to send up any of that data. And therefore, likewise with admin or any sort of things like that. So I do have some little shortcuts built into my graph qL schema to make access to the things I use all the time, way easier. And then a lot of times I'll do checking or more complex checking on the server side for any resolvers mutations or anything like that, just checking for those properties in the the array there. But yeah, I do I do definitely more of a a straight role based system than a permission system. But my system is definitely lends itself to be able to be expanded upon. And that way you could add micro permissions in there as well. And it would still work just as fine. - -13 -00:09:38,520 --> 00:10:37,520 -Wes Bos: Yeah, the way I kind of see it with these like you can have high level permissions admin, and lower level permissions, like customer delete, is that you can make a specific role and this is actually how it works in WordPress as well. If you get into custom roles in WordPress, where you can create like a new type of role called like a editor and then you can can check and uncheck boxes from all of the possible permissions that are available. And then when you map over that array of permissions, you can expand something like editor into a whole bunch of roles. And you can check if they have those specific ones. Or you can when you do your checks to see if there are an editor, or they have the permission to do something like this. Yeah, it's honestly not bulletproof. I'm sure I haven't run into all of the issues just yet, because my use cases are not nearly as complex as some of the applications out there. But it's been working really well, for me, especially based on what I used to have. - -14 -00:10:37,669 --> 00:11:25,830 -Scott Tolinski: Yeah, and I used to work a lot in Drupal, and Drupal, his role system is intense, its intense, in a great way, because you could access to absolutely everything, but rules and permissions and roles and end up becoming such an issue. Whenever there was like a bug, you would always check the roles or permissions first because it was extremely micro, every little thing in your extension, or plug into you were using, or every little thing in Drupal had a micro permission, you know, can edit, can edit, own, can delete can delete own only sort of things. And there's just a giant table like a giant table of checkboxes. And again, superduper useful super fine, super fine grain, you can tune it up really super nice, but really daunting to look at daunting to manage. - -15 -00:11:26,010 --> 00:12:58,980 -Wes Bos: Yeah, totally. So let's talk a little bit about I talked about how I handled it on the server side with the middleware or right in the controller. But on the client side, sometimes there's a whole bunch of stuff, you need to do it with check. So if you have a specific component where you need to be signed in, or the user needs a specific permission, or you want to display a button, you obviously need the user at that point, right. So what I've done in my Apollo course, my graph qL courses, I've created a component called please sign in. And that is just a component that will wrap any component that needs to be signed in first. And this isn't a security measure. This is simply just a UI measure where it won't show anything, or it will show please sign in, if the user is not signed in. And then that component will always query the current user. And that way, I don't have to make sure that I have the user wherever it is that I need it, I can just wrap it in a component called please sign in. And then one step further, what I've done is that please sign in component will take some props of an array of permissions, and it will check if they have at least one of the permissions that is required for that thing. And then that's another way to I can easily say if this person has the permission to delete an item, then go ahead and show it and I could just wrap it in that component. Otherwise, it just won't show anything or it will show an error message or, or whatever it is that you'd like to show. So I've been pretty happy with that. Although I would like to hear how other people approach permission based UI. Yeah, - -16 -00:12:59,010 --> 00:14:00,480 -Scott Tolinski: I like that idea of having a component to do it. I personally just mostly doing an inline conditionals per component basis. And again, like I said, I have the for the different roles specifically that I use in my schemas that I have all the time, like is Pro is admin. Yeah, got little aliens. Yeah, little Boolean 's that are easy to get out. And then I'm not checking a whole bunch of stuff. So for me, that's how I do it. I just say user.is admin, and then they get access to the admin stuff. Again, don't think that flipping a switch on the front end will give you access to anything that you can actually do. Because, again, we you mentioned this briefly, but it is worth reiterating, these kind of front end role system, things should never be viewed as a security measure. I mean, it is in some regard a security measure, but it's not keeping people out what it is, it's just keeping the UI to be the way it should look for that user. So don't rely on the front end role system to save your bacon in the back end, because it's not going to happen. - -17 -00:14:00,960 --> 00:14:06,899 -Wes Bos: Yeah, if you're if your security plan is, oh, they'll never see that, then you're in trouble. Yeah, - -18 -00:14:06,929 --> 00:14:08,669 -Scott Tolinski: yeah, people will see anything. Yeah. - -19 -00:14:08,909 --> 00:15:14,159 -Wes Bos: Okay. The last little thing I think we can talk about is, where do you store your roles. So I store my roles just on the user as an array. It's not any more complicated that I need a separate model or something from that. I just put it in the user, I know that some people will use JW T, I use jadibooti. myself. And one of the features of jadibooti, although I don't use this specific feature, is the ability to store data in your token, because a JSON Web Token can be decrypted. It's not really data, it is not secure at all, because you can just decrypt it yourself. Yeah, it can be read. And then you can store little pieces of data in there. And most likely, you're going to store the users ID so that you can query them on the back end. But you can also store like common things like roles in the in the jadibooti. So you don't have to make a whole round trip to the server. If you want to know what permission missions that they have. And that that can be really helpful. Again, not for security, but just for being able to quickly check if somebody is an admin, and then you show the admin button. And then anytime they try to actually delete something, then you check that on the server. - -20 -00:15:14,299 --> 00:16:19,049 -Scott Tolinski: Yeah, you know, there's another level of complexity, too, we didn't talk about with like group based roles, where you could do it very, like fine tuned, where you could say, is admin. But in addition to his admin, the, there's another separate like nested array that has a whole list of things is an admin entails, again, I guess, it's all just sort of different flavors of the same thing that group bass rolled, and you could, then I guess, this is no different than what we've been talking now that I think about it out loud. But again, you could check for micro or macro based roles, and having some sort of group where you could say, hey, remove the is admin, and it will remove all over the micro based rules as well, you know, rather than having to deal with each of those individually, but yeah, there's a lot of stuff here. And as you can see, it's really just checking values, right, you have an array of values, and you're checking values. And these things can be whatever makes sense for you. And as long as you're doing it in a way on the server and client that are both secure, it doesn't really matter, as long as it works for your project. And you've put some thought into it. - -21 -00:16:19,320 --> 00:16:48,049 -Wes Bos: Yeah, if anything, I think if you over engineer it at first, it is much easier to accidentally slip up and have a security issue where you're not checking, you're not covering all your bases. So I think starting simple is important, because then your all of your checks will be very simple. And as your needs grow with the application, then you can get into a little bit more complex stuff, because it's a little bit scary being like I think this is set up properly. But you never want to be in that spot. - -22 -00:16:48,149 --> 00:17:08,790 -Scott Tolinski: Yeah, absolutely. Yeah. Like I could always add a more complex part of my my schema on the graph qL and a more complex resolver to check more complex role stuff, in addition to the is admin and his pro and his editor, whatever that I have going right now, if I need it, though, is easy to add that and that way, you don't have to totally refactor everything you already have - -23 -00:17:09,030 --> 00:17:15,450 -Wes Bos: anything else for today, or should we wrap up this treat? Should we scrape the plates and hit the dishwasher? - -24 -00:17:15,590 --> 00:17:43,340 -Scott Tolinski: Hit the dishwasher? Yeah, this is a quick little snack. This tasty treats we're going to be doing these weekly. So let us know kind of topic Do you want to see us cover in the sort of rapid fire? We sort of glanced over that to be in this episode. But this is a new thing. We're doing hasty treats, which are going to be these short little digestible little videos or not videos, audio podcasts that you're listening to in your podcast player. So check it out hasty treat on roles. That's it. That's that's the role system. We got a selfie going on right now. - -25 -00:17:43,610 --> 00:17:49,170 -Wes Bos: Oh, Instagram story. Wave a bat, - -26 -00:17:49,410 --> 00:17:49,950 -Scott Tolinski: dude. All right. That's - -27 -00:17:49,950 --> 00:18:00,930 -Wes Bos: it for today. Thanks for tuning in. And we'll see you next week. Or maybe No, no, we'll see. We'll see on Wednesday. Hopefully enjoy even more of us every week. Yeah, - -28 -00:18:00,989 --> 00:18:05,790 -Scott Tolinski: we're gonna be talking about design systems. Yep. Yep. Design System. very highly - -29 -00:18:05,790 --> 00:18:08,040 -Wes Bos: requested episodes. I'm looking forward to it. - -30 -00:18:08,130 --> 00:18:10,850 -Scott Tolinski: Yeah, likewise. Cool. All right. Well, we'll see you then. - -31 -00:18:11,219 --> 00:18:12,690 -Unknown: Say Yep. Is - -32 -00:18:14,460 --> 00:18:24,210 -Scott Tolinski: head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax56.srt b/transcripts/Syntax56.srt deleted file mode 100644 index 8ba44090a..000000000 --- a/transcripts/Syntax56.srt +++ /dev/null @@ -1,364 +0,0 @@ -1 -00:00:01,319 --> 00:00:06,150 -Unknown: You're listening to syntax, the podcast with the tastiest web development trees out there. - -2 -00:00:06,179 --> 00:00:08,010 -strap yourself in and get ready. - -3 -00:00:08,029 --> 00:00:09,930 -Here is Scott, ski and West boss. - -4 -00:00:10,619 --> 00:00:25,649 -Scott Tolinski: Welcome to syntax, the web development podcast with the tastiest treats around. My name is Scott kolinsky. I'm a full stack developer from Denver, Colorado with me as always is Wes Bos stay with - -5 -00:00:25,709 --> 00:00:26,880 -Unknown: Hello. Hello. - -6 -00:00:27,089 --> 00:00:27,990 -Scott Tolinski: How's it going? West? - -7 -00:00:28,289 --> 00:00:35,180 -Wes Bos: It's gone. Great. So the last thing I am doing before I head off on vacation, so I'm super stoked about that. - -8 -00:00:35,219 --> 00:00:38,490 -Scott Tolinski: Nice do your bags pack to get your foot out the door Ready to go? - -9 -00:00:38,639 --> 00:00:49,049 -Wes Bos: Yeah, actually, no, no bags packed. I got into the hole. Put the hamburger on top of the car. Do you know there's the car topper? Do you have one of those? No. Oh, - -10 -00:00:49,079 --> 00:00:54,450 -Scott Tolinski: no, we don't have one of those. But I've never I knew what you're talking about. I've just never heard it referred to as a hamburger before. - -11 -00:00:54,479 --> 00:01:03,119 -Wes Bos: Now. Yeah, we are growing up. We always call that a hamburger. It's a great way to like get extra space. Yeah. And we just got like a really sick new one, which I'm pretty, pretty excited about. - -12 -00:01:03,149 --> 00:01:18,360 -Scott Tolinski: We always just used to pack the car so that like the kids in the back couldn't move at all. There just be stuff surrounding us, which is actually pretty dope. If there was ever like a car accident, you'd have like a lot of like a built in protection there. You're not moving because you're filled with baby. - -13 -00:01:18,389 --> 00:01:18,930 -Wes Bos: Yeah. - -14 -00:01:20,060 --> 00:01:21,300 -Scott Tolinski: As long as it's off good. - -15 -00:01:21,840 --> 00:01:23,010 -Wes Bos: Like good word. So - -16 -00:01:23,010 --> 00:02:36,930 -Scott Tolinski: this episode is sponsored by view School, which is a great way to learn view. If you are interested in learning view j s, which is a hot, hot, hot new framework, checkout view school, as well as Freshbooks. If you ever listen to this podcast screentime, you've heard us rave about Freshbooks. Wes and I both use and love Freshbooks, which is cloud accounting software. So we'll get into those a little bit more later on in the episode. This episode has been highly requested. And one that is very interesting to myself. Personally, I did a talk on this subject in Romania, like a month ago before. Yeah, and this is design systems, we're going to be talking all about design systems are what they are, why you might want or need a design system. Some of the tools that we can use to have design systems be working efficiently. Some of the stuff that as developers, you can use in more of like a techie developer way with design systems as well. And even a place to check out some really excellent design systems for inspiration. In case that is something that you want to learn more about. So yeah, let's get into it. Wes, do you want to talk a little bit about sort of the basics, like what design systems 101? - -17 -00:02:37,050 --> 00:06:34,290 -Wes Bos: Yeah, totally. And I'm really excited about this episode, just because I've built a few design systems, but it's been like, it's been like the new hotness for the past couple years. And I think even in the last year, it's gained some some serious traction as people move over to building applications in component ties, like things like react or view design system are starting to become much more popular. So I'm by no means an expert on this stuff. I put out a tweet on Twitter that just said like, send me everything you've know, I've built a few myself, but I know there's people out there that are a lot more knowledgeable. And I got a ton of really good reply. So if you're looking for some extra information, some extra links outside of this podcast, definitely hit up that tweet, I've linked it in the show notes, so you can check it out. So first of all, what is the design system design system is something that your organization have, it's a living, breathing system, a document that will describe both like what things look like, that's probably what people go to immediately, but also like how you approach your product, how you how you talk to your customers, how you communicate ideas, how you handle different aspects, things like accessibility, and I found this really good blog post from envision app, which has a really good quote, and I'm just gonna read that quote, just because it gives me the it gives you the best idea of what a design system is. So it says a design system isn't only a collection of the assets and components that you use to build a digital product. According to Emmett Conley, Director of Product Design at intercom most design systems are really just pattern libraries, a big box of UI Lego pieces that can be assembled in near infinite ways. All the pieces may be consistent, but that doesn't mean the assembled results will be your product is more than just a pile of reusable UI elements. It has a structure and meaning it's not a generic webpage. It's an embodiment of a system and concept. I really like that it's embodiment of concepts. Marco Suarez, one of our product designers here at envision adds that understanding not only the what but the why behind the design system is critical to creating exceptional user experience finding and adhering to standards of how we create understanding more simply put, the difference is that the standards and documentation that accompanies the assets with a guide on why and how to use them design components are easier to use and clearer to discern. So this is this is really cool because I think that As you have a big team as your organization grows, it's really important to spend a lot of time on like making your, your designs your your UI consistent across the board. But just snapping these pieces together is is a big part of it. But it's not all that like, there's a whole big part behind it, which has to do with like, in what tone do you write to your users? How do you use capitals, like there's some really good examples here Shopify has a design system called Polaris. And MailChimp has a design system. And they have a specific part in their style guide that's just called voice and tone. And they say like, MailChimp, voices human is familiar, friendly, and straightforward. Our priority is explaining our products to help our users. So like, you have to be like funny, but not silly, confident, but not cocky, smart, but not stodgy and formal, but not sloppy. And I really like that because everything that you put out to your user has to have a consistent look and feel. And that's not just the CSS that you're right about it. It's how do you handle accessibility? How do you handle icons? Shopify even has like, you need to think about what are people using this on? Are they using it on a Braille reader? Are they using it on a Nintendo Switch? Are they using on a laptop? Or are they using on a phone? What do interaction states look like when you're loading something when you're hovering something, when you something is broken? When there's an error, when there's a non critical error, when there's a warning, right, you need to think about all of these things. And that needs to be consistent across the board. So hopefully, that gives you an idea of of what a design system is for an organization. - -18 -00:06:34,320 --> 00:08:30,330 -Scott Tolinski: Yeah, I think one of the key words that you used in your description, one of the things I think that will really drive at home is that concept of consistency. Because these things are really just building consistency among your entire design, right consistency, and an overarching tone, and feel and all that stuff. But it is tone and feel all that everything is just making your design feel cohesive, consistent, accessible, and all those good things that are designed and sort of modern web dev needs to be and again, I you also mentioned that like this is really coming about because of what like more modern web applications, right? When you have a website, that's six pages, and there's a header and a footer and all this stuff, do you need a full on design system, I don't necessarily think so you're more or less just better off with some designs, right? Unless, of course, there is a an existing design system for the brand, or the overarching brand that you're adhering to. And maybe this is like a brochure site a part of a larger project or a larger thing. But now with these applications, and these larger projects that need more consistency, design systems are really the most organized and sort of best way to maintain that. One of my favorite early examples that I saw was the material design guidelines when they first launched those, one of the things that really impressed me about the material design guidelines were they didn't just have what to do. But there was also a large amount of what not to do even as far as animations, contrast and things like that, you can do this. But don't do this. Because if you do this, it's breaking, you know, the contrast rules, or it's breaking the correct feel of how these things should feel. So I've always really appreciated those aspects as well not just like what you can do, but what you shouldn't do and what you can do, what are the restrictions on the system itself? - -19 -00:08:30,480 --> 00:09:36,240 -Wes Bos: Totally, I really like that as well. I remember seeing that with my logo that once was delivered to me with a website that I was building in the designer had gone through with the logo and showed me exactly Okay, here's the logo. And but here's the things that you should do. When you place it in the website, make sure that there's at least like 40 pixels of padding on the top and 80 pixels on either side, you cannot put it in a box, you cannot tilt it, you cannot like all these kind of funny things that you you as a someone, you're like, Oh, I have a great idea of of how I could do this, Oh, this looks better to me. Or I think it would look better if I just added a circle behind the logo. But then that might be look good to you. But as I don't know, 1520 different people add in their own little flair to using something, then all of a sudden, it just starts to erode. And by the end of the day, you have like 20 different web properties. And they all all look a little bit different. And they all handle clicks a little bit different and that that inconsistent feel to your user is not something that is that you're going to like - -20 -00:09:36,270 --> 00:12:02,159 -Scott Tolinski: yeah, definitely, definitely. Cool. So let's talk a little bit about more of the organizational or visual aspects of some of these style guides or design systems because it's more than just a style guide. I guess we should make that distinction, like what are what are kind of things that you're going to see in these various design systems. And in fact, maybe before we get into that If our users are listening to on a computer, and a lot of people listen to this, while you're driving, don't do this while you're driving. on this show notes, there is a link for a repo called awesome design systems. That is a giant table of a ton of different design systems. And there they have, whether or not these design systems have components voice and tone, designers kid or storybook based along with them. But some of the biggest brands in the world here have their design system listed on this repo. And just go ahead and fire open some of these because they're really a one of these things that's nice about this is to just plow through and sort of see the organization and structure of some of these different design systems. So one of them that I really, really liked, personally, was the Zendesk garden, and the Zendesk garden breaks theirs up into sort of different ways. Do you have assets, right, you have assets would be icons, colors, and typography, these things that sort of like go along, like the core components, then you have things like CSS components, where you're thinking more like actual, you know, almost like react components, where you have more of like an avatars and buttons and tables, and tabs and in those kind of things, menus, and then you actually have a section for react components. And these are interactive react components for you have things like, well, the pagination, the notifications, the buttons, and actual react components, you click on any of them, you're going to get a general usage, you're going to get, here's the props that are available to it in a more of a like a techie sort of way in a less design sort of way. So it covers all of the bases in one sort of thing. If you're a designer, you could come in, and you could look at this button, and you could see how it looks and functions and feels you could read all of the guidelines. But then if you're a developer, you can also look at the Prop, see what it accepts, see the code, see some usage examples. And again, see this thing in action. These are kind of typical, but what are some of the structures that you've seen and enjoyed West? - -21 -00:12:02,309 --> 00:14:26,520 -Wes Bos: Yeah, I think that if you just kind of think about like building your own foundation, or bootstrap, that's like a really good start for building the like the style guide, part of style guide part of a design system, I think that what I really like to see is how to consistently handle buttons, how to consistently handle error messages, how to do navigations how to do text, that's a big one where the text will often like a website's won't have like a nice overall text setup. So that you'll see people come in and start to fudge the font size in different pages or, or change the line height or change the font color. And then again, it starts to erode. And using things like sass and whatnot is helpful, because you can put these values in in variables and then change them site wide. But it's it's almost better just to have those things done at a at a global level on your site so that everything is consistent across, you don't have people because I know there's lots of organizations where there's different parts of the website, or there's a couple different applications and you have different teams working on I've even heard of I had dinner with someone I forget who this was, but they were telling me how like there's a team for the header. And then there's a team for the footer. And like there's just teams that have control of different parts of the website. And they all kind of like look differently. And if you want to be able to one team has their own tech stack, and the other team has another tech stack. And I can just see that spiraling out of control. So quickly if you don't have some sort of standards in place. So it's really worth having, having stuff in place. also things like like media blocks, like how do you put in text beside an image? How do you use an avatar? How do you put a price beside something? How do you what is a card, right? Like even after you get all of the base stuff out of the way, which is navigations and buttons and H tags and, and all of that stuff, then you start to build your own components that are inside of your application where you commonly will use a card to show a price or you'll commonly have a form element and having these things stated how they need to look but even better if they're pre built like if you're using a react component. And you can just go ahead and grab your form component like like I'm just looking at the Zendesk garden by the way is that um, Zendesk garden. Is that like a little nod to the CSS Zen garden? - -22 -00:14:26,850 --> 00:15:16,919 -Scott Tolinski: No, I think the company is knit Well, it might be Yeah, I mean, the CSS garden, for those of you who don't know, was like one of the coolest, I don't know if you can really call this like early web thing, but it's definitely when I was like learning web. And CSS garden was a basically a page that you could take and style yourself and have it look completely unique in the CSS garden was sort of a way to show off all of the different things you could do with a single HTML structure with just CSS. So people would take the base HTML page And then manipulate it with CSS. And then everyone would sort of UI not some of the cool and beautiful layouts that you could do with Jess CSS. I remember seeing some of them. And for the first time just being like, how do you do that? Wow. And then just inspecting the CSS and being totally blown away by some, like interesting techniques. - -23 -00:15:17,130 --> 00:15:46,620 -Wes Bos: That was like the I know, this is a bit of an aside, but that was when I really understood the the kind of separation of HTML and CSS Yeah, like you, you write standard compliant HTML. And then you can usually get it to look like whatever you want, with just using CSS, which is really cool. I think that because it's called CSS Zen garden, and then Zendesk, I think that there's a couple Zendesk ORS that listen to this, if you do, please tweet us, because I want to know if this is a nod to that, I think would be really, really cool. It'd - -24 -00:15:46,620 --> 00:15:47,580 -Scott Tolinski: be really cool. - -25 -00:15:47,669 --> 00:16:10,110 -Wes Bos: Anyways, well, we're what were we even talking about the different components, the React components, so Zendesk does, like they have all these components, where you can just simply take a nav tag, or a nav item tag or an icon tag, and they've already done sort of the work under the hood. And then like, like it is Lego, you can kind of click it together and build an interface nice and quickly. - -26 -00:16:10,260 --> 00:18:17,190 -Scott Tolinski: Yeah, this repo, this awesome design systems is seriously one of my favorite things. Because there's so many on here that you can't really go through them all in one sitting. I mean, you could, but you'd be crazy, you'd be a madman. But like, if you just go and click on any of them, just to see everyone's different approach to trying to solve this problem is really just sort of exciting and interesting, because you can be totally inspired by one little thing here, one there, whatever. And a lot of these design systems themselves are really well designed themselves. So like, there's a lot of inspiration here, especially for how these things are organized and laid out and what they contain Exactly. So yeah, it's one of these things that comes along with this, again, is just these individual components and how they work within your system. Because not everyone is going to be using react or view or whatever. So I think there is this like beautiful intersection that happens between the design team and the development team in these style guides, where you're getting, here's the visual, and the sort of structural and all that stuff of how this stuff needs to work. But here's also the technical code aspect of how to make it happen. And it what it does is it creates this, this single source of truth for both parties involved, it's probably, in my opinion, one of the greatest communication tools between both teams, because you you, you actually have answers to the questions you're looking for if I need to build X, Y, or Z. Well, the dev team has the answers right here. And the design team has the answers right here. The design system itself is the source of truth. And I just one of the reasons why I just love this, this whole new shift to using design systems is that you have less sort of situations where a rogue designer is going to go ahead and do something wild and pass it to a developer and the developer is going to be like, How am I supposed to do this, or a rogue developer is using some once off CSS code or something that doesn't exist anywhere else in the site? And potentially, they'll make updates down the line more difficult, essentially, again, it's a single source of truth. And I really, really enjoyed that aspect of it. - -27 -00:18:17,400 --> 00:19:57,300 -Wes Bos: Yeah, the the implementation layer is also really interesting to go through all of these different design systems see, like, how are they actually implementing, like, I'm just clicking through a couple of them. And some of them have implementation in multiple languages. So like, some of them have sketch files, or they might have figma files, or they might have some sort of Adobe file that you can use as a designer, they might have a CSS framework that you can implement. And then via that it's either done via classes, or it's done with something like bem and then some of them are built on react components or view components. And it's kind of neat to see all of the different approaches, because there are no, like, final answers here. You might listen to this podcast and think like, Oh, I must use react components, or bem or I must use stylus and not something but that's that's just what we like. And that's not the the final answer. There's much smarter people working at these companies, especially when it comes to this design system. Because like I don't have a design system for myself, my design systems up in my head and I kind of just like, I just like work on stuff and and make it good. And I probably have a little bit of in consistencies, stuff like that. And it's a much harder task to get hundreds and hundreds of engineers and designers and everybody on board and also keep people happy because I know that sometimes if you if you give a designer like the system, you're like, Oh, don't put me in a box because now I can't like like now I'm just kind of like using these these Lego bricks to put something together. Like I feel like I'm I'm not able to express myself or something like that. So I think that's that's another problem that that might pop up when you have these design systems. - -28 -00:19:57,320 --> 00:20:35,310 -Scott Tolinski: Yeah, absolutely. You know, to speak If like how they are organized, right, there was a really awesome documentation library. Dang, I'm like totally blanking on it right now. And I'm doing a whole lot of googling, trying to figure out what this is called. It uses the new MDX parser that we've talked about before that allows you to use JSX and markdown and basically allows you to throw react components into a markdown file for like super excellent, easy documentation and building design systems that way or at least the documentation for your design system, and I cannot find it it is driving me nuts. - -29 -00:20:35,340 --> 00:20:39,000 -Wes Bos: The Acura MDX is is just it's killing me - -30 -00:20:39,030 --> 00:20:45,210 -Scott Tolinski: Yeah, the accurate MDX please change your name. Change your name and remove yourself from the internet so I can find those a JavaScript What - -31 -00:20:45,210 --> 00:20:46,920 -Wes Bos: was it called re bass, - -32 -00:20:47,570 --> 00:20:48,750 -Scott Tolinski: re bass - -33 -00:20:48,800 --> 00:20:54,860 -Wes Bos: react UI component library and design system built with styled system with support for style components and emotion? - -34 -00:20:54,900 --> 00:21:22,920 -Scott Tolinski: It doesn't it sounds like it could be it let me head to their homepage and see no not read bass. I've seen this though. Dang it. I'll remember it by the end of this episode, I will find it because I'm pretty sure I bookmarked it. And one of the 800 bookmarking apps I use. We've been talking a lot about react components and stuff. But another thing you could use other than react is also view j s and a great place that you can go to learn view j s is view school. So more view school is Wes Bos. - -35 -00:21:22,950 --> 00:22:53,580 -Wes Bos: So a lot of people are asking me, hey, Wes, why don't you do a course on view? And I really would like to at some point, but I just have so many other courses that I want. And I'm kind of double down on react right now. And I know that there's a lot of people that do want to to learn view. So when view school approached us to sponsor the podcast, I was like, that's kind of a perfect fit, because then people will stop emailing me asking me when to go ahead and get it. So the view dot j. s masterclass is what you should pick up if you are looking to learn if you it's kind of cool, here's a couple bullet points about what you're going to do, you're going to learn Vue JS by building a real world application, which is a form you're going to learn about view and friends, which is vcli view x view router, you can use Firebase RX j s all the best practices. Right now they're at the time recording, there's about 75 lessons, which is five plus hours of content is still being recorded. So you can sort of be on the on the train as that is being created. I I think probably the most important thing that you should like hmm, is is this going to be any good? It's built by Alex Kay nodding an attempt your your last name, but he's a member of the Vue JS core team. So obviously, he knows how view works, and is going to be teaching you the best practices. So go to View school.io forward slash syntax and use the coupon there's, there's 50 people who can use the coupon syntax for 25% off. So hurry over and grab that before they're all gone. - -36 -00:22:53,610 --> 00:22:58,890 -Scott Tolinski: Yeah, that's not gonna last very, very long at all. So yeah, make sure you get that coupon - -37 -00:22:59,160 --> 00:24:24,210 -Wes Bos: look good. All right. So let's keep going with design systems here. I think we should talk about next is the actual tooling behind how to actually build a design system because we talked about like, kind of the the idea and the the approaches behind this design system. We talked about like the the actual implementation details of like, Okay, I'm building a website, or I'm building an app, or I'm building something, and I need it to look consistent. How do we actually do that with react or CSS? Or what a lot of people are using now? Is this thing called Have you heard this Facebook yoga? Facebook yoga? No, I have not heard of Facebook yoga. So Facebook Yoga is like a they call it a cross platform layout engine which implements Flexbox. So you know how in React Native, you have to use Flexbox? To lay the lay things out? Yes. Yeah. So they are trying to port that to other platforms, so that you can use this this layout to build out application. So that's one way that you could actually lay out an application in multiple, multiple different ways. I don't know if I would, I would probably reach for that when I'm building a website just because I have all of CSS available to me. Yeah. But if I were laying something out in in another application, it would be interesting to try it out. So let's talk about the the tools behind it. What are some of your favorite tools for actually building a style guide? and designing with style guide pieces? - -38 -00:24:24,240 --> 00:28:06,450 -Scott Tolinski: Yeah. So for me, I pick up my favorite design tool, which is figma, which is very, for me, figma is sort of the the the top of the line as far as listening to how the developer and designer community actually work, because their component system is so dang good. They have this awesome component system with a component library features where you can publish your component library, and it's all super organized. So you end up with this component library that is organized and catalog and very, very explicit, right? And so I have my own Design System in figma, that is sort of one to one with like an atomic design thing where I have molecules and that sort of thing, where you have the little chunks into bigger chunks into bigger chunks into bigger pages and experiments. And you can just sort of drag and drop components. Now, for me, I don't have like a code version of the style guide, but I keep my, my components in figma, one to one with both style components and react components in this site. That way, again, if I'm designing or experimenting with my design, I can just drag and drop these components into a page in figma, and move it around, modify it and see how these things are going to look and feel. And I have all of my sort of specifications for how these different sections of the site should work. Now one of the really cool things that I've been digging about figma is well, they're just constantly updating it to add new features for developers how they really work, right. So they recently introduced the figma API, and people have been experimenting, outputting. And keeping in sync react components, one to one with figma components is something to keep an eye on is something to play around with. But maybe not necessarily something that's totally ready for primetime. But if you are the type that likes to experiment with that kind of thing, there is a ton of room there, I'd be really, really interested in like maybe like a component library as far as like styled components that maintains a one to one correlation to figma components that you know, maybe it stays in sync. Now figma also just released this new style, or figma, three just came out, and they released a whole bunch of new stuff. But part of that is this whole styles thing. And inside of styles and figma. It's sort of like consistent colors, weight, font styles, and that sort of thing. It's almost just like a CSS class that you can move from things to things. And it's not necessarily a component, but something that you can take and apply and keep consistent. So you can build out these styles that are almost like CSS classes, and apply them to anything in your design. So something that I've been really, really interested in, Brad frost actually just tweeted out today, some interesting stuff. And one of those things is a new application called Relay for figma, which it looks like one of the first real products that looks like it's built on the figma API, where you keep your assets in sync with your design system. So Ah, it's it's awesome. So you, you build everything out in figma, as is. And then if you make modifications, it's actually going to push it into your repo into your, your GitHub repo. And it's going to be alerting of changes and stuff like that. It looks really, really sweet. It's an early access right now, I haven't used it. I just saw it today. They got a real cute website. It's really for figma. I actually had this website open and Courtney came by she's like, well, that's a nice website, just like that. This is a nice website. So yeah, check it out. It's one of those things that I'm really super interested in this space is really growing right now. So yeah, the design and development sort of correlation how they combine together. So those are, those are some stuff that I'm using right now. Yeah, - -39 -00:28:06,570 --> 00:29:38,040 -Wes Bos: cool. I'm gonna go into some of the like, up and coming stuff, like you said, the stuff is, is changing really quickly. There's a lot being worked on right now. The whole, like keeping stuff in sync seems to be an issue a lot of people are trying to solve right now. Where if you design something in a program, and then you put it into code, like how do you keep the code and the design things in sync, when you make a change on the code, like we talked about our design erosion, that's gonna, that's gonna happen a lot, right? So a couple different tools that can be used here. From a tweet from Stuart Clark frisbee, one of the cool things that he tweeted was like this video where they built this MAC app that has all of their sketch components inside of it. And if you haven't used sketch before, one of the ideas that you can have with sketches that you can make these what are called symbols. And a symbol could be like, a top bar, or a symbol could be a like a card, and then that symbol can it can take an input like a title and an image and stuff like that. And then these are reusable symbols throughout the entire application. So if you were to make a change to one of these symbols, like the background color, it will ripple through your entire application. That was always a huge pain point for me in Photoshop, where the client would be like, cool. Can I see it in red? You know, like, Oh, goodness, can I please have a variable in Photoshop so that I could just set it to red and not have to select every single layer that has that red in it? That's what these symbols will allow you to do is to make a change quickly or in a ripple through your entire application. - -40 -00:29:38,070 --> 00:30:09,660 -Scott Tolinski: Yeah, hope I'm gonna cut you off real quick here. Yeah, because I do want to say that that's what exactly I don't I don't work for figma. Here. I am just a big fan. The figma component system is the same thing, but way better. I'm sorry sketch I used to use and love sketch but the figma component thing allows for overriding in Having like sub and sub and sub components in a way that like the scheduling can even handle it all. I'm not trying to diminish anything about that. I just wanted to put that back. Yeah, - -41 -00:30:09,750 --> 00:30:52,200 -Wes Bos: man figma does seem like the best way to go forward, I'm definitely gonna give it another shot for building this type of stuff. And it's it's also frustrating to see people building stuff. And this thing that I'm talking about, it's built on top of sketch. So they built a Mac app that has all of their things in it. And you can just drag the different pieces out like a title bar or button or something like that. You can drag it out from there Mac App into sketch, and then you just immediately have this little component in there, which is really cool. But again, like, it's kind of frustrating to see some of these tools being built on different platforms. And sometimes when they're Mac only, yeah, another like, huge benefit to to figma is that it's cross platform, right? - -42 -00:30:52,200 --> 00:31:21,090 -Scott Tolinski: Yeah. And they're, like I said, the component system, when you build it based on like the frame it's in it gives it an organizational structure to it. And you have the shared publish team library that stays up to date with everyone on the team. And so you have like a little book. And when you click that book, it has all of your components laid out in a table and organized by like, what they are the head or whatever. And you can just like that, click and drag and bring him over, you can override and make modifications or that kind of stuff. It's really slick. I'm a big fan, in case you can't tell. - -43 -00:31:22,950 --> 00:33:01,470 -Wes Bos: Another tool that I just heard about and this is in very, very early days, so it's it's not ready for production yet. But Airbnb who Airbnb is awesome, they often champion a lot of these like thought leadership things in our industry, obviously, they've been huge in the React world. And they're also huge in the design world. And so they're building this thing called loana, l o n a, it's at Airbnb github.com, forward slash Airbnb forward slash elona. And they say is lona is a collection of tools for a bit building design systems and using them to generate cross platform UI code, sketch files, and other artifacts. So there's kind of three three things here, they first have lona components, where after doing a whole bunch of reading until like, What is this, it doesn't seem that it is actually a replacement for sketch, but it is going to be what's called lona Studio, which is going to allow you to design these components that are pixel perfect. inside of it, I don't totally understand why it's not replacing sketch and how it will work with that just yet, but you make these component files. And then you have a loaner compiler that's going to ideally spit out these component files in sketch files, maybe a iOS layout, maybe in a react component, maybe in a view component, you get the point or this this seems to be like the reoccurring dream in programming in general, where you can write something and generate output for every single other platform out there. But I'm really, really curious, I'm going to be watching this pretty, pretty closely to see how it how it develops. Yeah, - -44 -00:33:01,499 --> 00:34:07,380 -Scott Tolinski: so that one that I was trying to remember that platform is called the doc because with the ZD OCZ dot site, dogs site, Doc's dot site, I'm sorry. And this thing is really sick because you write these MDX files, which are markdown, oh, yeah, import your react components from it. And then you can write your your style system, your design system directly with the actual react component that you're using. That way, you're not having like an representation of the React component. And that way, you're not typing out how the component looks and whatever you're actually importing, the actual react component is rendering itself. And then you get to see this thing in action. It's really, really slick. I have not used it, but I am very interested in using it. My team is very small. My team is one person small and I got a couple of contractors right now helping me out and some some development stuff. But as my team grows, I could see things like this and, you know, building out a design system to be very, very appealing for for myself, at least in a guideline system. - -45 -00:34:07,739 --> 00:34:16,940 -Wes Bos: That's really neat. Yeah, the fact that you can just import your components into the markdown and then automatically generate a style guide based off of that. Yeah, - -46 -00:34:17,009 --> 00:34:29,690 -Scott Tolinski: when when they announced MDX at the site day, I was like, this is really cool. I can't wait to see what comes out of this. And sure enough, like in absolutely no time, some brilliant people put some brilliant things together. And then we have things like this, - -47 -00:34:29,940 --> 00:35:43,380 -Wes Bos: man, I'm blown away at how much stuff there is around just style guides in general, how much like amazing, like open source tools are out there. People are really, really working hard to to build stuff and to educate all the different teams on on how to build these things. Because like, what else is there in addition to this, there's somebody sent me this Astrium, which is a lightweight pattern library for any web project. So you can make a style guide based off of that. There's a couple of the other ones here. Oh, so there is Bradford Frost who wrote the book atomic design, he's sort of one of the thought leaders in this space, he came up with this whole idea of when you're designing something, you have atoms, which make up molecules, which make up organisms, which make up templates, which make up pages. And he built this thing called pattern lab. And what pattern lab pattern lab is actually like a, I think it's in PHP, but also in Node. And you can template it in a couple of different languages. And what that will allow you to do is to actually like document all of your all of the different patterns. And in this case, the atoms or molecules, organisms, templates, all of the different components of your application. And it helps you build one of these kind of living, breathing style documents. - -48 -00:35:43,500 --> 00:36:44,360 -Scott Tolinski: Yeah, which I mean, the larger your team gets, the more and more important this is, when I worked at Ford, this is all we did, in fact, because this is kind of outrageous, but because they're on every single different market in that project was on their own system. We couldn't build Angular components, because that's we were using, we couldn't build Angular components. And then ship those, well we had to build was a total design system that says this is how these things all need to look and feel, and whatever. So that way, when the developers are actually getting into it, they had a full on rules for how everything should be. So these kind of living breathing systems are extremely important when you have a large team, and everyone needs a single source of truth. Very, very, very important. Something else that's really super important is keeping your taxes and your billing up to date. And to do that Wes Bos and I both use fresh books, is a cloud accounting software that we both love. It's super modern, super excellent, and all around a great product. - -49 -00:36:44,400 --> 00:37:43,670 -Wes Bos: Yes, fresh books is awesome. You've heard me talk about it so much on this podcast, I really, really like it. One little feature that I'm gonna focus in on today is the ability to auto import all of your expenses from your credit card. So one problem that I had for the longest time was just keeping track of receipts. And sometimes I would accidentally lose a receipt or a bit crumpled or the thermal paper that they use gets faded after a year before you actually log it and just a bit of a nightmare. So what you can do is you can hook up your bank account and import your credit cards, and it will automatically log all of your credit card expenses as expenses in your thing. So you're not going to miss anything. And that's pretty, pretty nifty little feature of Freshbooks. I really like that. So if you want to try out fresh books, go to freshbooks.com forward slash syntax and enter in syntax into the head here about a section that's going to give you a 30 day unrestricted free trial. So thanks so much to Freshbooks for sponsoring. - -50 -00:37:43,710 --> 00:37:45,660 -Scott Tolinski: Nice, cool, yeah, - -51 -00:37:45,690 --> 00:37:48,110 -Wes Bos: so what do we got left here? Let's talk about - -52 -00:37:48,230 --> 00:38:49,860 -Scott Tolinski: here's a, there's something that I again, I just perfectly timed bread pasta, just tweeted out a link of some of his new favorite stuff. And one of these just happened to be envision Design System Manager, which is kind of interesting. I haven't necessarily gone through this whole thing, but it looks like exactly what we've just been talking about. And it's funny. I've used this word single source of truth, like 100 times in this episode. Here it is in their first heading. I have not I have not read this heading a single source of truth for consistency at scale. That is like such a good way to describe this man. I can't it Yeah, that's, that's awesome that they use that. So yeah, this is, uh, looks like a pretty slick little system. I'm guessing this is when we scroll down here. I haven't really figured out what exactly it is. Because they there's no way. It's not like it doesn't say it's a code platform, or what does it even say it is? I'm not quite sure. It seems like it maybe works with envision studio to build out your design system. But again, there's no plain English description, - -53 -00:38:50,070 --> 00:39:10,670 -Wes Bos: in visit, envision design system magic makes it possible for every product team to create and maintain a design system at scale, allowing teams to maintain a consistent user sharing blah, blah, blah, blah, blah, and can now be managed and shared from the Envision platform and accessed and updated in design tools such as envision studio and sketch as well as web view. Okay, - -54 -00:39:10,670 --> 00:39:29,580 -Scott Tolinski: so it looks like it's taking your design files and all that stuff and having it on a platform. It looks like it's it's living on envision. So it doesn't look like it's something that would be open sourced or managed by you code wise. So if that's a bummer to you, then that's, I guess, a bummer of this thing. But it looks pretty cute. Looks pretty cool. - -55 -00:39:29,670 --> 00:39:50,520 -Wes Bos: Yeah, I've used envision a couple times not with their I don't know, they have their own design tool. I've used it with Photoshop back in the day to talk to people and like it envisioned first started off as sort of like a gift for designs, right? You could upload different versions of your Photoshop file, you can comment on things and it was really great for that. And they've sort of built up from there. - -56 -00:39:50,730 --> 00:40:02,280 -Scott Tolinski: Yeah, they've been building a lot of really interesting things lately. I haven't not used envision studio yet. I'm sort of waiting for it to get out of this early phase to see where it goes. But it looks pretty cool. Looks pretty cool. - -57 -00:40:02,360 --> 00:40:28,800 -Wes Bos: One other tool I want to mention here, this is from Dennis Riemann. He built this thing called a UI engine, which is a workbench for UI driven development tool for developers and designers to build and document websites and apps. So you can use it to create a living living pattern library, document, your design systems, all that good stuff built in JavaScript as well. It's kind of cool. And there's these open source ones, because if your team has specific needs, these things are very hackable. - -58 -00:40:28,830 --> 00:41:25,050 -Scott Tolinski: Yeah, and we would be remiss, I don't know if that's the right word. But we haven't talked about react storybook, which is an excellent one. Yeah, using react. React storybook is another really great way that you you create what are called like stories, which is your components and how they're used. So you're using your real components, you're importing them, and you're getting some like actual usable documentation for all of your components. Again, this is maybe less of a design systems thing, but more of a actual technical implementation of your design system thing. And it's pretty cool, because again, you can see how all of these components work fit together, how they're used. And if you have your entire design system in react components, then you therefore have, again, a treasure map on how to use and access your components is a pretty cool thing. I haven't used it personally, I've used design systems that have used it and really enjoyed when they they have used it. - -59 -00:41:25,290 --> 00:42:05,670 -Wes Bos: Yeah, there's a on the awesome design systems GitHub repo, there's a column to tell you which design systems have a storybook as well and quite a few of them have a storybook they also have something for designers kit designers kit includes sketch, Photoshop figma files for designers, and then voice in tone, which is provides guidance on how language should be used. So check out this awesome design systems repose? Well, let's move into like the last portion of this, which is like inspiration. What are some of the what are the link dumps the stuff that we didn't really talk about? But if you want to learn more about this design system stuff, what are some of the places that you can go to obviously, I just mentioned myself, the awesome design systems repo, there are a few more - -60 -00:42:05,760 --> 00:42:34,460 -Scott Tolinski: I know that was I actually I mentioned that one earlier too. That one is excellent because of just how much is there and it also breaks down like if they have a react storybook or not. And then if you want to check out some of these that are using react and have a react storybook or whatever you're into, you know which ones to go into. I like that repost simply because every time I'm on there, I can just open one I've never opened before and explore it. So that that is pretty much my source of inspo. If I'm going to look the first place I look for this kind of stuff. - -61 -00:42:34,500 --> 00:43:13,860 -Wes Bos: Also there is unrelated to the awesome design systems repo there is design systems repo, which is a really nicely designed website. Really nice. I wonder if it itself has a design system, I hope Yeah. But they just like list out the latest design systems latest articles on this. So you can like you can dive into some medium articles or experts people that know a little bit more than Scott and I about this stuff, the different tools you can use books. So obviously, friends of the podcast, I would say Brad frost has a book called atomic design, Micah goal bolt. gobo godbolt. I always screw up people's names. I'm - -62 -00:43:13,860 --> 00:43:18,900 -Scott Tolinski: sorry, everybody. It's like, that's got to be like a staple of the podcast at this point is what's missing. - -63 -00:43:18,900 --> 00:43:48,030 -Wes Bos: The names drink drinking game when Southwest can't pronounce someone's last name. Miko wrote a book called front end architecture for design systems. Miko works at Microsoft net right now. And it's I think he's working on Office 365, which they're building in react, which blows my mind, which is really cool. Yeah, a whole bunch of other books in here. those are those are the two that I keep seeing people recommend over and over, which is cool. So if you want to ingest some more content, go to design systems. repo.com. Yeah, - -64 -00:43:48,030 --> 00:44:37,710 -Scott Tolinski: and here's one last one design systems.com, which is actually a website that's owned and maintained by figma, which is essentially just a place for excellent blog posts about design systems. Like some of the first, the first blog post up top here is yes, design systems will replace design jobs. And the very next post is no design systems will not replace design jobs. And these are these posts are all like very curated. So these are all like, you know, really high level explorations into design systems written by people who work on companies with large design systems. So I really enjoy this. That's a great place to learn a little bit about design system. Here are five tips from an Airbnb designer on maintaining a design system. So design systems.com definitely a nice little resource there as well. - -65 -00:44:37,770 --> 00:45:15,510 -Wes Bos: Last one I want to shout out is the website design dot systems. And specifically if you go to news design dot system this is looks like a weekly email that gets sent out with all of the things just like react or CSS or anything like that is there's a huge community around this design systems and it's helpful to if this is your like your job, it's helpful to stay up to date on it. So recommend Checking out and signing up for the design systems newsletter, you can get that in your inbox. Every it looks like they've been doing it for 60 weeks already. So obviously keeping with it, there's a lot of content you could go back and ingest. Yeah. Other than that, are you got any more links? or things like that? No, no, that's - -66 -00:45:15,510 --> 00:45:25,530 -Scott Tolinski: a lot of good stuff that should be enough to keep you occupied with knowing how much content is on all of these links. I'm going to go ahead and say you're not going to be able to get through all of it even with that. So - -67 -00:45:26,970 --> 00:46:00,750 -Wes Bos: Totally, yeah, that's what that's what I hope with this, this podcast, I know that there's a lot of people who don't know anything about about design systems. And it seems to be a pretty overwhelming space where there's just so much information and so many tools and so many best practices and things like that, and so many conference talks, like he just searched design systems on YouTube, and you can find probably 100 hours worth of talks that you could you could watch so hopefully this is like a nice overall primer sort of give you an idea of what it is and then if it's something that interests you, you can dig a little deeper with all the resources we've talked about today. - -68 -00:46:00,810 --> 00:46:04,680 -Scott Tolinski: Yeah, absolutely. Cool. Do you have any sick pig - -69 -00:46:05,340 --> 00:46:18,180 -Wes Bos: pics we should we should mention what a sick back is that are sick that we picked. Somebody emailed me and said that they have adopted the sick pic and shameless plug into their vocabulary at work. - -70 -00:46:21,210 --> 00:47:52,860 -Scott Tolinski: Okay, so my sick pick today is I think this is gonna be a first syntax first here and this is a I know we've both doubled up on sick picks that we've done in the past, but I'm going to double up on a sneak peek that West did. And I have just ordered this. It's the Cal digit t s three plus is a thunderbolt dock for your computer. The cool thing about this is that it has every port you could possibly imagine basically a a brick that will both power your computer power monitors and all that good stuff have additional USB, SD card headphone USBC has lots of USBs has display port Ethernet and all that stuff. It's sort of like a one stop shop. And knowing these new Mac books have like you know four ports that are all the same, it gives you access to all of the ports that you're probably going to need with your MacBook Pro or something like that. So check it out. It's this caldigit ts three plus I'm really excited right now I think pick three for this a techie it's just like a mini little hub I guess. But I've been having some issues and I'm not entirely positive they're not coming from this hub that I have so I'm going to beef it up with actually something that is is quite considerably more beefy and I'm gonna see if if all of my things go away all issues I've been having so I'm really excited to get my hands on this Cal digit Wes says his been his has been rock solid so I am hoping for some rock solid performance myself out of this thing. - -71 -00:47:52,920 --> 00:48:29,580 -Wes Bos: Yeah man it's the fact that you can just plug in one cable and charge and hook up three different hard drives and all of this recording equipment and a couple of webcams and an all USB hub and all of this stuff and it just works when you plug it in it's amazing I'm a little bit a little bit hurt because I like pre ordered it and I spent it's this thing is how expensive is this thing 299 299 I think I paid like 350 now it comes with an SD card slot which mine didn't Oh really? Yeah I would do that all - -72 -00:48:29,580 --> 00:48:33,780 -Scott Tolinski: the time because I do all my my shooting I'm on SD cards Yeah Do - -73 -00:48:33,900 --> 00:48:34,500 -Wes Bos: me too. - -74 -00:48:34,530 --> 00:48:44,220 -Scott Tolinski: I'm about to get a new video camera by the way to me not about to I'm planning on getting a new video camera so we'll have to update more on that could become a sick pic - -75 -00:48:44,940 --> 00:49:28,350 -Wes Bos: sick well that's I'm really happy with that as well it's I'm glad that you're going with it it's super expensive and then I even had to buy an extension cord for it like a long It comes with like a tiny little one foot or two foot Thunderbolt three there's like a specific kind of core yeah needs and you think you could just go online and find any Thunderbolt cord but it has to be a thunderbolt three cord that is rated for 80 watts beefy Yeah, like it has to like you can't if you have like a MacBook Air you can probably get away with a cheaper one but if you want to be able to do all of this stuff it was like a I think it was like a 60 or $70 cable so like I'm in I'm in this thing well over 400 bucks - -76 -00:49:28,350 --> 00:49:28,770 -Unknown: yeah for - -77 -00:49:28,770 --> 00:49:31,080 -Wes Bos: just this thing but you're always - -78 -00:49:31,080 --> 00:49:33,390 -Scott Tolinski: there's like far away from your computer or something. - -79 -00:49:33,540 --> 00:50:01,170 -Wes Bos: Yeah, like so the way that I have all my gear is I have this like little shelf above my monitors and it has all my gear on top of it and then I have nothing touching the desk. I have everything on mounts and I love it but in order to have it overhead I needed a bit of a longer cable in order to actually hook up my laptop which is not overhead so I had to go buy another one which sucks but uh like I'm mad about the price but it's been been rock solid been so happy with it. Nice. Yeah, - -80 -00:50:01,350 --> 00:50:14,250 -Scott Tolinski: I decided I mean, I have a nice monitor. I have all this stuff. And I like really cheaped out on the docks. Oh, I was like, well, I might as well upgrade this part. Because obviously, it's important. So - -81 -00:50:14,310 --> 00:52:07,440 -Wes Bos: yeah, yeah, absolutely. Um, I got a sick pic now and it's going to be for kids. So um, I know that a lot of you listening have kids, God has a kid, I have two kids. For Christmas, my sister gave us these things that are called Picasso tiles. And what they are, are like little squares, either like a two by two or four by four or triangles that have magnets in the corner. So it's kind of like Lego, but you can build things that are a little bit bigger with it. And my daughter is three now. And she's been absolutely loving these Picasso tiles lately, and it's one of those things where like, Oh, yeah, they play with it play with a toy for a week. And then they forget about it. But she's been just on it for like a couple months now and loving it. And as a dad who does technical stuff, I really like to see my daughter be into building things and and having an imagination and building different types of ice cream stores and whatnot. And I just think that it's like really good for the development of the kid to to actually build these type of things. Right. So they are they've been really really good. I've been super happy with it. We just ordered a whole bunch more just because like her creativity is limited by the amount of tiles that we have. So we just ordered a whole bunch more. They're called Picasso tiles. We ordered the as I do with most stuff, I ordered the knockoff version. And they're called play bees. I think there's also ones called Magna tiles. Apparently, from the from the Amazon reviews, they all work perfectly together. They they're all the same size. The magnets are in the same spot. They're not cheap. I got 100 pieces of the knockoff plebes for 60 bucks Canadian, just probably about 50 bucks. American, but but well worth it for I think that the development and the imagination growth in my kids, - -82 -00:52:07,470 --> 00:52:24,210 -Scott Tolinski: I think we might have been gifted some of these. He's really yeah, Landon is too little for the app just yet. But I'll have to double check, because we were gifted something very similar to this. And we essentially just put it in the closet until he's older. So I'll have to check on that. It looks very familiar from what I'm looking at. But really cool. - -83 -00:52:24,270 --> 00:52:44,400 -Wes Bos: Yeah, we do that with a lot of our toys where we'll put them in the basement. And then we bring them up every couple months and like rotate the toys and fresh. Yeah, it's new and fresh. And also to see if they're they're at the stage where it is. So them and we brought these ones out a couple months ago, and they haven't gone down yet because they've been they've been loved so much. I'm super excited to get this new set, because it comes with the wheels. And we're gonna build some pretty - -84 -00:52:44,400 --> 00:53:09,480 -Scott Tolinski: wicked little cars. Nice. Yeah, Landon has been rocking out on this food truck, which is like the hipster version of the classic kitchen that you get your child. It's It's so it's so hilarious, because it's awesome. It's a food truck. And it's the exact same kind of thing that you'd normally have in a kitchen. But instead of building like, you know, normal things, he's building a burger with avocado on it. It's hilarious. - -85 -00:53:12,990 --> 00:53:24,450 -Wes Bos: is it's so funny that we're having kids, our generation is having kids and the things that we actually give our kids. Yeah, definitely. All right, shameless plugs. - -86 -00:53:24,600 --> 00:55:13,320 -Scott Tolinski: Yeah, I have a new course out. It's an electron level one electron. So if you've never done any sort of electron anything, and you use react, check out this course, what we what we're doing is we're building a journaling application that reads and writes actual files and your file system. So the way the application ends up working Is that you, you know, hit commando, you open a directory, that directory then has access to any of the markdown files in there. But you create files, the files have metadata, you can edit them, you can save them in real time, you can see a markdown preview side by side, it sort of just like a journaling application, a lot like maybe an app like Ulysses or something like that. And it's really, really super cool. There's even a nice little icon. So at the end of the day, you get this application that you can build and having your doc and I'm actually using this application on a regular basis as my normal journaling app now, because well, it's free, and I built it, and I can add on to it where I want to. So the cool thing about this is is you get these skills to learn and read and write and work with files in the actual application. And then you can take this thing and do whatever you want to it, it now becomes your application. So it's a really, really interesting course. It's maybe one of the most exciting courses that I've done because, well, I'm just so excited every single video, you can hear it in my voice when I'm teaching you. I'm just like, Wow, this is so cool. Because it is so cool for me to be able to do that kind of stuff now, and work with the file system and no js, and you get a lot of core JavaScript skills, a lot of react skills, a lot of node skills, and it's really, really cool. So check out love one electron it's for sale right now it's on sale, or you can become a level of pro get access to that, plus the tons of other courses that I've released already this year that you've maybe heard me talk about on this podcast, - -87 -00:55:13,410 --> 00:56:07,890 -Wes Bos: wicked, my sick pet or no, not a sick pet, what do we call it shameless plug is just going to be the upcoming advanced react course. It's going to cover everything server side rendering of react, graph, qL, charging credit cards, using pretty much all kinds of new and really, really exciting stuff in the react and graph qL and related JavaScript ecosystem. It is coming up, it's still a couple of weeks out depends on we're recording this in advance, it probably won't be up by the time you hear this, but I just get excited for it. I'm really excited for it, it's going to be available at Advanced react.com. There's nothing there right now. But you can just keep refreshing it until you until you want as well let me give a quick update, I ordered new stickers, they are coming in a couple of weeks as well. So stay tuned, I order tons of tons of stickers. So hopefully they won't sell out this time. Other than that, I think that's it. That's it, check out all those design system links. They're - -88 -00:56:07,890 --> 00:56:27,570 -Scott Tolinski: gonna keep you busy. And also share with us some of your favorite design systems. I want to see some of the ones that you guys love, and all that good stuff. Because again, I'm really into this design system stuff as there's a lot of people right now. And it's just really exciting space. So yeah, share with us on Twitter, let us know what you like design system wise, but other than that got nothing. That's it, - -89 -00:56:27,690 --> 00:56:28,350 -Unknown: please - -90 -00:56:29,970 --> 00:56:30,780 -head on over to syntax.fm - -91 -00:56:30,780 --> 00:56:39,750 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax57.srt b/transcripts/Syntax57.srt deleted file mode 100644 index ac1114b3b..000000000 --- a/transcripts/Syntax57.srt +++ /dev/null @@ -1,204 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,000 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally. - -2 -00:00:25,710 --> 00:01:00,840 -Wes Bos: Welcome to syntax This is a hasty treat as means it's a short episode, but it still is jam packed with delicious. I don't know treats of things that we're going to talk about. My name is Wes Bos with me as always is Scott to Lynskey. Today, we're gonna be talking all about dot files, which is, whenever you open up a GitHub repo or, or anything, you see all these dot whatever files and we're gonna dive into, what are they? Why would you need them? What are some tools that you can use to manage your dot files, and sync them? And that'll be it. So how are you doing today? Scott? - -3 -00:01:00,870 --> 00:01:05,880 -Scott Tolinski: Doing good. I'm ready to demystify some dot files on a dot. Yeah. - -4 -00:01:05,880 --> 00:01:07,980 -Wes Bos: Okay. Do you want to tell us about today's sponsor? - -5 -00:01:08,009 --> 00:03:12,210 -Scott Tolinski: Yeah, today's sponsor, as a, as many of you know, is one of my favorite new services, which is Netlify. Now, Netlify is a web hosting company, but so much more. And it's so much better than just saying, hey, they're their hosts, because Netlify is the very first host that I reach for, if I'm deploying anything. It's awesome. It's like their websites as they go beyond static. Because what they do is they host front end code in a way that nobody else does that they make the the startup process, dead simple. I just had somebody tweet me today saying, oh, Scott, you were not joking, this setup was insanely fast. They're one of those services that the very first time you use it, you're instantly smitten with the process. Because the process itself is unlike any other hosts, they make it dead simple. This is the gold standard for what hosts need to be. In addition to just being a darn good host, they offer a ton of excellent features that are more more important in every today's web, like free SSL certificates that are just seriously one click, you just click it and you get a Let's Encrypt certificate, it couldn't be any easier than that. You can do easy domain management, you get to, there's some really slick AP testing features, continuous deployment, one click just sort of all sorts of stuff. Again, it takes the complexity of working hosting out of it. There's also some really excellent features like working with AWS, lambda functions, identity, where you can have your own login system and forms all these sort of server side stuff that you can use without actually having a server and your site inherently making your site way more secure way faster and easier and less complex. There is a ton of amazing things about Netlify. But to learn more about Netlify, head to netlify.com, forward slash syntax, and let them know that you heard about them from syntax because they love to hear that and we love for them to love that. because let me tell you, this is my favorite hosting platform. And yeah, I love sharing it, as you can probably tell by now. So yeah, check out netlify.com forward slash syntax and see what the hype is all about, - -6 -00:03:12,450 --> 00:04:41,730 -Wes Bos: again, awesome. So let's get into it. What is a dot file dot file is like it's a settings file for all of these different tools. Whenever you're building a website, or in our case, let's let's talk about it from building a website, you building website, you've got a whole bunch of tools that you need, in order to actually build that website, you might have es lint, you might have prettier to format your code, you might have a environmental variable file that you have, you may have get in there, you might have NPM. So all of these things need to put settings somewhere. And often these settings need to come along for the ride when you you put it in a Git repo or you send some code over someone or, or you have different environments where these, these things can be changed. So the way that we've solved this is by using a dot file and a couple examples of a dot file. If you look in the root of Generally, the dot files will either live in the root of your computer. So if you just do like a open up your terminal, and you type Cat Dog, Tilda Ford slash dot and hit tab, if you're using that sh, you're going to see that there are probably I probably have, I don't know, 40 or 50 different dot files that are in there. Some of them contain access tokens to specific things. Some of them can contain settings for editors that I've used in the past. Some of them use settings for my es lint. There's just all kinds of different ones. So what are some of the more popular dot files that you would see as a web developer? Scott? - -7 -00:04:41,760 --> 00:05:33,360 -Scott Tolinski: Yeah, some of the widely the most, most popular one you're going to see is a dot Git ignore, which is basically the file that tells Git which files to ignore because obviously not every file needs to be or wants to be tracked in a repo For instance, if you have private keys, you're going to want to Make sure your private keys are in a file that's not being tracked if your repo is public. Now, obviously, if your repos private, maybe that's a different conversation, but either way, there's typically you'll find things like a d s store files, maybe your node modules folder, maybe some user specific settings, like maybe I want my VS code set up a specific way in a repo. So I have my VS code folder, ignored things like lock files, I have my yarn lock file, not not committed. Yeah, so pretty much that kind of stuff. Anything you want that not tracked by your repo is in your Git ignore file. - -8 -00:05:33,570 --> 00:07:08,910 -Wes Bos: Yeah, actually, on that point of putting like, tokens and secrets and stuff in a Git repo, I was the same thing as you or I was like, Oh, it's fine. It's a private repo until I just had to, I'm having a contractor work on my platform. And I have had these get, like these secrets and stuff in my repo for years, right. And you can remove them from Git. But the whole point of Git is that there's a history to it, right? So I had to set up a whole separate, I know, you can go back and scrub the scrub the history of it if you accidentally commit something that sensitive, but what I had to do is create an entirely separate repo and just cut all of my history with that application, because I didn't want them going back and having access to customer data or production. Anything production, right like that's, you know, I don't want to have any data leak out has all the test data for a contractor that's actually working on the, on the platform. So that was a lesson learned there, we're doing something like that. Another one that I like to use is a dot Git keep file. And this is actually not a standard Git file at all. However, sometimes you want to commit a folder to a Git repo. But if you commit an empty folder to something, git will just remove that folder because there's nothing in it right? So one, like little way to commit an empty folder is just to put a dot Git keep file in there. And that will be enough for Git to say, oh, there's something in here better push up the folder. And that's, I use that all the time in my tutorials, because I might have a components folder in a react tutorial, but there's nothing in there. So I have to put an empty get keep file in their word. - -9 -00:07:09,030 --> 00:07:22,350 -Scott Tolinski: Yeah. And, okay, now we're gonna get into I think, probably some RC files, right? Is that next on your list is an RC? Yes. Yeah. Rc cola. Yeah, I feel like before we should dive into maybe what the RC was, because I was really curious to know - -10 -00:07:22,350 --> 00:07:24,120 -Wes Bos: what RC stands for. Tell me. - -11 -00:07:24,240 --> 00:09:09,770 -Scott Tolinski: Yeah. So I was really curious. So I obviously googled RC and dot files, which actually came up with a really nice StackOverflow question, which just says, What does RC mean and dot files. And it doesn't look like there's necessarily a consensus but it looks like it could stand for any one of these things, run commands, resource control, run control, or runtime configuration. They also have a little sentence here that says the RTR c suffix goes back to Unix is grandparent, c t S. S, it had a comment, or a command script feature called runcam. Early Unix is used RC for the name of the operating systems boot script as a tribute to see t s s run calm. Oh, wow. So it's not something that's super obvious. And it goes way back. I mean, that's a way more interesting answer than I was expecting. So it looks like it could be any of those things. This is a nice little history lesson for myself. So the first I guess RC file that I wanted to cover would be one that is well used pretty heavily in modern JavaScript, which is your Babel RC file dot Babel RC, which is going to be where you're configuring your Babel compiler with various plugins or presets to let it know basically what type of code you're writing and what it needs to do, how it needs to output. So inside of your Babel RC file, you might have things like if you're using certain features of Babel, for instance, I have a Babel plugin that what it does is it makes my styles component names, pretty are not like the package prettier, but prettier for testing. So when I'm testing, I don't have to have some ugly styled component name, I actually end up having a component name. That's the name of the actual component that's called Babel plugin styled components. - -12 -00:09:10,199 --> 00:09:11,190 -Wes Bos: I use that one as well. - -13 -00:09:11,730 --> 00:09:44,220 -Scott Tolinski: Yeah, I also use one to make absolute imports a thing. So I can instead of importing from relative I can import from a root directory as an absolute path, which is super nice, because when you import from an absolute path, and you move one file, you don't have to change that import, just because you move to file. So yeah, plugins are definitely a big part of Babel along with how you output your code using, you know, preset environments and stuff like that. So, Babel RC is probably something that you've came across, come across at some point, if you've been using sort of modern JavaScript. - -14 -00:09:44,490 --> 00:09:51,720 -Wes Bos: Next one we have here is the dot bash RC or the Zed sh RC or what's a fish? What's it called an official dot fish? - -15 -00:09:51,720 --> 00:10:00,630 -Scott Tolinski: No might be called fish. I think it might be called. Yeah, well, there's a dot config folder. And then inside of the dot config, there's a config dot fish file. So - -16 -00:10:00,650 --> 00:11:52,680 -Wes Bos: yeah, that that that dot config folder has been awesome. So sort of, I don't know how when this actually started happening, but because your root directory gets muddied up with the hundreds of these dot files, a lot of these different tools have sort of said, Okay, we're going to put everything in a dot config folder, and then put everything in there. Which is, which is really cool in your bash RC or use that sh RC. That is where you're going to put all of your, all of your shell, you can put aliases in there, you can put different settings that you want. So if you want to change your net sh theme, or you want to change your prompt or any of that information that will go in there. That's all the settings that are specific to it. One thing I will say about aliases, though, you can someone asked me like why are you putting your good aliases in your sshrc file, there is a feature in Git that is specifically for aliases. So I had one where I would run GAC, which would get added and commit all in one go. And then I move that over to my Git config as a as I get alias, and I just say AC equals and then you run the command, git add minus all and git commit minus M, which is really, really helpful. Other times I do do aliases in in my is sh RC, I have one called fix, which will immediately get diff all of my it'll it'll tell me like what files are currently have merge conflicts, and then it will automatically open those up in my editor. So anytime that you you do a rebase, or you do a poll, and you have a couple things that need to get fixed, I'll just type fix. And then it will open all of the merge conflicts in my editor and go through those one by one, which is pretty helpful, although I don't use that as much anymore because of the awesome merging tools that are built into VS code. Yeah, those are myself reaching for those. Yeah, but more - -17 -00:11:52,739 --> 00:12:15,900 -Scott Tolinski: I alias a lot of dumb things, a lot of really dumb things. Because like I have, I have like NPM scripts to start my application, which is just you know, yarn start. But then I have yarn start alias to just start. So I don't have to type the word yard, which I admittedly is ridiculous. But I don't know if it saves me any time. But I prefer to just type start because yeah. - -18 -00:12:18,210 --> 00:12:20,580 -Wes Bos: That's great. Yeah, what else you got for me? - -19 -00:12:20,610 --> 00:12:58,920 -Scott Tolinski: Yeah, another one you might be used to seeing is an es lint RC, if you ever again, use JavaScript, you probably are using something like es lint, which is one of those things that makes finds a billion bugs in your code. And either it makes them aware for makes you aware of them or fixes them or maybe even it's code style things. You know, it's so funny you see those like memes about like people missing a parenthese or semi colon or something like that, and taking hours to debug. And like, man, if you were just using es lint, all your problems go away like it's a two second thing. So if you're not using es lint use es lint and never have issues like that ever again. And - -20 -00:12:58,950 --> 00:13:10,920 -Wes Bos: I always see those those means I'm like, Yeah, I don't mean to be a jerk. But you shouldn't take six hours on a semi colon. You should have tooling that will tell you that. Yeah. Okay. Even better fix it for you. Who cares? Yeah, - -21 -00:13:10,950 --> 00:13:46,410 -Scott Tolinski: yeah. So I never understood that. But yeah, so I have my es lint setup is based on a it's based on the Airbnb preset of es lint. And then I have things like prettier, which we'll also talk about. And I have I have some custom rules. For instance, I like to use the plus plus so I've turned the no plus plus off. So he doesn't like the plus plus I know there's people that don't like it. So But yeah, I like the plus plus there's a lot of little things here and there that I just tweak to make it make it feel more like how I like to program while keeping the spirit of the Airbnb preset there. Anyways, - -22 -00:13:46,530 --> 00:13:48,870 -Wes Bos: I have a massive ESLint file I do - -23 -00:13:48,870 --> 00:13:51,810 -Scott Tolinski: too. And I have a long as yours. Let's Let's - -24 -00:13:51,810 --> 00:14:38,790 -Wes Bos: Lau let's let me tell you what spot so I put my dot files online because I get all the time people messaged me saying, what are your dot files? What are your settings and I didn't put them online for the longest time because I don't think that you should just, like assume that I'm the best at this and that you should use whatever I'm using, I think that you should figure out yourself. So with a little notice they're being like I'm constantly changing them. I don't really have like, really good explanations for why I use every single one. Like sometimes people want me to like die on the sword of using a specific ESLint rule. And I'm just like, I don't know, like I this is probably this is what I like. And I've turned it off because it annoyed me or I turned it on because I find that it's good this way and I don't really care all that much past that. So mine is 124 lines. - -25 -00:14:38,850 --> 00:14:44,430 -Scott Tolinski: Well I thought I was mine. Really longer. I got 87 lines. I was like long. Yeah, - -26 -00:14:44,520 --> 00:14:49,980 -Wes Bos: so I extend Oh, but here's the question. Do you use prettier in your es lint file? - -27 -00:14:49,980 --> 00:14:51,390 -Scott Tolinski: I have a separate prettier. - -28 -00:14:51,420 --> 00:15:02,370 -Wes Bos: Yeah. Okay, well, I put all of my I use prettier and prettier react through es lint. So it's all in one file. So all of my prettier settings, which is not that many - -29 -00:15:02,370 --> 00:15:08,370 -Scott Tolinski: more lines of prettier settings, single quote, true and tailing comma to the s5 - -30 -00:15:08,700 --> 00:15:36,270 -Wes Bos: does and that and then I have that. And then I also have print with 100. Because I know Hmm, prs go for 80 characters. Wow. Can't live that life. Yeah, that as an as Lynn setting interesting, but I've got all kinds of different eastland ones that turn on and specific ones for the type of like node work that I do and whatnot. And that's why people tell people not to just copy paste it, because like, you don't necessarily work on the exact same kind of projects that I work on. - -31 -00:15:36,390 --> 00:15:57,750 -Scott Tolinski: Yeah, and you should. One of those things that involved in there's the J sx, Li, if you're using Airbnb, you should leave all of those on. Yes. Like, it's really easy to just turn those off. And they're like accessibility issues, let me just turn off those es lint errors, and boom, no accessibility, No, leave those on fix those accessibility issues. That's a big deal. So just a little aside there, - -32 -00:15:57,960 --> 00:16:29,490 -Wes Bos: I've been thinking about just like publishing my own ESLint settings, so that when I do a tutorial, I can just extend the Wes Bos ESLint settings, because I find that I have too many in here. And then if I make a change to one, then I have to like, go through all the other projects. I because I work mostly on my by myself on projects, I just have like one global ESLint rule. And then if I have a project where I'm working on it with someone else, we'll make sure that we have a local eastlink file to that specific project, - -33 -00:16:29,640 --> 00:16:30,750 -Scott Tolinski: word boss lint. - -34 -00:16:31,080 --> 00:18:22,610 -Wes Bos: Next one I have here is a dot E and V file. And if you've taken any of my courses, you may have seen this one, environmental variables are an interesting thing where if you have like a password to a database, or you have some specific information that is specific to your environment, and this might be API endpoints, this might be API tokens to YouTube or Vimeo, things like that, that change from environment to environment, and also stuff that should never end up in your Git repo because that sensitive information. So what we'll do is you put them in a variables or a dot E and V file, and then you in your entry point of your note application, you run this package called V and V. And I think there's something for Ruby as well. And it will parse that Nv file and populate those environmental variables throughout your entire application, which is great. I don't use.nv. And, in general, I hate dot files because they are hidden by default. And as someone who is teaching a tutorial, I get an unknown. I don't I haven't used them in years, and it's great, the email stopped. But I used to get so much email of people who would not they would like download it and like Windows wouldn't show it to them or on OSX dot files are hidden by default, and they would copy paste it and then the dot file wouldn't come along for the ride or they they wouldn't be able to see it when they LS unless you pass a specific flag or their editor wasn't set up to show dot files and just a nightmare. So I always change mine to variables.nv just so that it's a proper file. And same thing with Babel. I never used Babel RC, I always put it in the package JSON, which is great because then again, it's one less file to overwhelm the people who are learning as well as it's never going to get lost as a as a sort of a hidden file. - -35 -00:18:22,740 --> 00:18:38,640 -Scott Tolinski: Yeah, I don't necessarily do that. I used the hidden files I actually found that there's a really easy way to toggle like before I don't know if this when this was a thing, but I felt like before you had to go into your terminal and the Mac OS to like turn the files on and off yet, - -36 -00:18:38,670 --> 00:18:40,260 -Unknown: but on vault writes thing - -37 -00:18:40,290 --> 00:19:39,150 -Scott Tolinski: Yeah, yeah. On Mac OS, you can do shift command period and that is finder that just shows and hides them instantly. Shift command period ease Hot Tip Hot Tip. Oh, yeah, I was just googling for this for this define that terminal command and then somebody said shift command dot i was like, What? And then turn off it works really easily. In Windows it's a little bit Well, I think it might I don't know if you could say it's easier because I don't know if there's a shortcut for it now but you pretty much just go to your your taskbar and you select show hidden files and folders from the search results that can be searched just search for show hidden files and folders, it pops up in something in advanced settings as to show hidden files and folders, you just let okay. So it's really easy to turn these things on. And I usually had just left them on but now that I can toggle them really quickly just gonna leave them all off for the most part that way, they're not like cluttering up my vision when I'm trying to nor use my finder like a normal person. - -38 -00:19:39,509 --> 00:19:46,550 -Wes Bos: So yeah, totally sick. You know, my favorite da file is the DS underscore store file. Yeah, - -39 -00:19:46,580 --> 00:20:41,330 -Scott Tolinski: screw that file. It's the What is that? It's a it's a Mac OS file that like let's I'm gonna butcher this without having a reference but I'm pretty sure it's it's just for like, like a reference of the file system or something. Okay. Mac OS operating se DS stores a file that stores custom attributes of its containing folder, such as the position of the icons, the choice of background image, the name abbreviation, so it's basically a, hey, what like the properties of the stuff in this folder, which everyone knows that like, there's nothing more frustrating than doing a commit, and then realizing you forgot to put DS door and your Git ignore, and then all sudden, DS store files, all of your Git ignore or your your repo and then you have to go remove them from the repo. It's just giant pain. In fact, if you google remove DS store files from repo, there's going to be a lot of results. I wonder how many upvotes that Stack Overflow post has on it? - -40 -00:20:41,360 --> 00:20:44,520 -Wes Bos: Yeah, I've done it so many times. That's funny. - -41 -00:20:44,810 --> 00:21:06,110 -Scott Tolinski: Yeah. I'm gonna I'm not answer that question right now. It has, okay, get this okay. This was posted in 2008. Sometime around then, the years ago, 10 years ago, the answer has seven tene, nearly 1800 upvotes on StackOverflow, which is probably more than I've seen most have ever. - -42 -00:21:06,590 --> 00:22:19,860 -Wes Bos: That's awesome. Other files that we have here is the editor config file. So if you're using vim someone else is using sublime and another person's using VS code and you want your editors to all be set up in the proper way, you all want to use the same kind of tabs, or you all want to use spaces and your line break is at a specific, specific size, you don't have to have a specific sublime settings file that you share with everyone, you just use editor config. And then you can install install extensions for all these different editors that will ingest that setting and then adjust the settings to your editor as their I don't specifically use that one myself, especially now with prettier is a lot of people use it for like tabs versus spaces. So you didn't accidentally make a commit where you know, sometimes you see it where somebody like changes one thing, and then they've the entire repo has had a change because they they have formatted it in tabs or they they added a new line at the end whereas the author originally didn't. There's all kinds of like things like that. But now with prettier, you don't have to worry about it. He's authored as you want. And then often what people will do is they'll set up a git hook, where right before you deploy or push to get you will it'll like format the code in the way that that repo was, was hoping to do. - -43 -00:22:19,860 --> 00:22:37,620 -Scott Tolinski: Yeah. And I just have it unsafe for myself. That way, I'm always doing those updates. Yeah, it's actually super useful when you're doing a course like, right, you're just typing your code, and just be like, give me one second, save this and everything looks pretty everyone gets to see it looking pretty. And yeah, prettier. Yeah, that's a very - -44 -00:22:38,820 --> 00:23:16,920 -Wes Bos: a whole bunch of people on Twitter, tell me that, like, you shouldn't set it on Save, just do it before you commit. And I was like, how do you live your life without prettier? Say, like, I always have indent? Like, do you actually spend time reinventing your code? And I type man when I'm typing my code, and then I just hit save all the time. And it just fixes it for me? Yeah, it's amazing. Yeah. Like the the amount? How much faster? I am, I think prettier is like the tool of the last couple years. For me. It's amazing. Yeah, yeah. Anyways, what other any other files you have that are specific? Or should we go into sinking them? Um, no, I - -45 -00:23:16,920 --> 00:23:42,510 -Scott Tolinski: guess nothing. I have some like free dot E and V. Meteor has a settings file, which is a settings dot JSON. So it's not necessarily a dot file. I have a dot Meteor ignore file that tells the compiler which files to ignore if you have stuff, because Meteor has the ability to do eager loading for things. And that's really, that's it, I have a.vs code folder that has my workspace specific settings. But yeah, nothing else. Nothing crazy. Cool. - -46 -00:23:42,540 --> 00:24:19,500 -Wes Bos: So you can also share and sync these. So people often have multiple computers, maybe a vor computer and a home computer and you want to keep your settings in sync. So what a lot of people do is they create a repo called dot files, and then they will just put all of their dot files in there, I have a tiny little one, which is I don't put all of my dot files in there. But I do put my ESLint my Git ignore my hyper dot j s, and then my VS code settings, and I just kind of keep them up to date. Some people will actually use them and get but what I'll do is whenever I make a change to one, I'll just copy paste it into GitHub, so that people can can see the latest version of what I have - -47 -00:24:19,710 --> 00:24:29,310 -Scott Tolinski: word. Yeah, I don't do anything like that. I just start a new project, copy it from an old project. Not necessarily the most efficient, but yeah, that's how it is look good. All right. I - -48 -00:24:29,310 --> 00:24:45,000 -Wes Bos: think that's it for today. Hopefully, that gives you a nice little overview of what dot files look like and why we have them and how to use them. Let us know if you've got anything to add at syntax FM tweet us your tweet us your Hot Tips. Anything else to add there, Scott? No, that - -49 -00:24:45,000 --> 00:24:47,610 -Scott Tolinski: was a nice little hasty treat. I really enjoyed that one. - -50 -00:24:48,120 --> 00:24:51,420 -Wes Bos: pasty. All right. We'll see you on Wednesday. All right. - -51 -00:24:51,420 --> 00:25:04,980 -Scott Tolinski: See ya on Wednesday, please. Head on over to syntax.fm for a full archive of all of our shows. Don't forget to subscribe in your podcast player or drop a review if you like this show - diff --git a/transcripts/Syntax58.srt b/transcripts/Syntax58.srt deleted file mode 100644 index 387369d73..000000000 --- a/transcripts/Syntax58.srt +++ /dev/null @@ -1,296 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. - -2 -00:00:10,559 --> 00:00:21,990 -Wes Bos: Hello everybody and welcome to syntax the podcast with the tastiest web development treats out there. My name is Wes Bos and with me as always is Scott Tolinksi. How you doing today, Scott? - -3 -00:00:22,049 --> 00:00:28,740 -Scott Tolinski: Hey, doing good. Just got back from vacation. I think we both just got back from a vacation. So - -4 -00:00:28,769 --> 00:00:29,340 -Unknown: yeah, - -5 -00:00:29,340 --> 00:00:30,960 -Scott Tolinski: yeah. How was it? How's yours? - -6 -00:00:31,019 --> 00:00:48,119 -Wes Bos: It was fantastic. I went swimming. It was hot as as heck. People don't think that Canada gets hot, but it gets really really hot in the summer and really, really cold in the winter. We're basically complaining year round. And but it was amazing because I just like swam the entire week. How about yours? - -7 -00:00:48,419 --> 00:01:55,170 -Scott Tolinski: Nice. Oh, yeah, it was great. We it was it was as as relaxing as a vacation with a one year old can be. So we we did a lot of hiking, which was great because we borrowed this hiking backpack from a friend that was like, just this big rig on my back so he could look at the bag. Yeah, yeah. And so he had like sun protection. He had a good view. He had like a little cage around it in case someone was to like bite it and fall he'd be you know, safe in that thing when in collapse or something. So it was a really like really sweet rig. And a Yeah, we did some really, really long hikes. One was just like five miles up a mountain. And we were walking up the entire way. And it was took all day, and eventually got the top and we had some sick views, but it was luckily it was mostly shaded too. And we're following rivers the whole time. So it was just like following waterfalls and rivers and and just absolutely destroying ourselves. It was it was a tough hike with a little child on your back. But no kid is pretty much worth it. So yeah, ready to get back into it, though. Ready for the week? - -8 -00:01:55,409 --> 00:01:56,580 -Wes Bos: That's a workout. - -9 -00:01:57,119 --> 00:01:58,710 -Unknown: Oh, yeah, I'm still feeling it. - -10 -00:02:00,120 --> 00:03:16,110 -Wes Bos: Awesome. So today, we're talking all about advice for beginners. And if you're not a beginner, don't turn it off just yet. Because I'm sure as an intermediate advanced developer, you get questions all the time from from beginners, and it's nice to hear some, I don't know, maybe another couple people's perspective on the issue. So we'll be talking about advice for gaining skills, advice for applying to jobs, advice for knowing what to focus on advice for imposter syndrome and, and kind of just a mixed bag of all kinds of different advice because I don't know about you, Scott, but I get like, I get these emails from people where it's their like life story. Like I wouldn't be surprised if it shows up as a hardcover bound book. And I it's it's frustrating for me to to get these like people pouring out their heart to me and and at the end of the day, my advice is very similar to almost everybody in the situation, people tend to think they're in fairly unique situations, but isn't at the end of the day. And I think that a lot of the advice that we have today will be very applicable to absolutely everyone who's who's maybe in it for maybe you're in it for a couple weeks. Maybe you're in web development for a couple years, but you still consider yourself new to the industry. So that's what we're gonna be trying to tackle today. - -11 -00:03:16,319 --> 00:04:48,990 -Scott Tolinski: Yeah, I totally feel your pain. Because as much as I want to help everyone who sends me an email, like I really, genuinely would love to answer every single question. If you send me a giant book, I just like there's no yeah, that that email is just gonna get looked at. And it's just gonna sit there and it's gonna sit there and it's gonna sit there until I eventually decide, oh, this has been too long to respond. I should archive. Yeah, so we're going to get into we have a few different sections that we want to cover everything in here. But before we do, do a quick mention our sponsors today, our coffee cup software and fresh books now coffee cup software has produced one of the coolest CSS Grid prototyping tools that we've ever seen hit is really super nice. And fresh books, as you know is awesome cloud accounting software. So we're going to hear a little bit more about both those later on in the show. So let's get going in it with our first section. In this episode here is going to be advice for gaining skills This is going to be for new developers, or new want to be developers who don't know where to start looking for new things to learn how to learn new things. And luckily, we've actually done a show on on learning things. So check out our learning things show I forget what episode that was. We could look that up here see episode number 44. So check out Episode Number 44 for our episode on learning, if you are still interested in more this stuff after this but yeah, Wes, what is your number one advice for new people gaining skills? - -12 -00:04:49,110 --> 00:06:03,000 -Wes Bos: Yeah, so I think probably one of the biggest things that I hear from people when they send me these big book emails is that they're frustrated with the the sort of pace that things are going because web development sort of has this whole, anyone can do it. And it's easy. And you can attend a weekend workshop and you can build a website and just take a boot camp and get a job with one. Yeah, exactly. And like, we're actually going to do a whole episode on boot camps. I think they're, they're fantastic. Don't get me wrong, but there's sort of this like, get up and running, which is really, really fast. And then there's this like, 98% long tail of the industry, which is learning absolutely everything else. And what tends to happen is that you do a weekend HTML CSS course. And you feel like you're just flying, and you're gonna be like, Oh, I'm on the track to 100 grand, I'm going to get a job, no problem, and it's gonna be good. And then you start to hit this wall. And then you realize, oh, what development is actually hard. There's a lot to it. I'm really overwhelmed. There's there's, there's so much to to possibly learn, there's so much that I could, so many different directions that I could possibly take this, I don't understand JavaScript, is that how I how I said JavaScript really funny there, JavaScript, - -13 -00:06:03,240 --> 00:06:04,170 -Unknown: JavaScript. - -14 -00:06:05,010 --> 00:07:31,350 -Wes Bos: So I think my my biggest advice here is that you need to patience is probably one of the biggest patience and momentum because you're not going to get anywhere just sitting on your hands and waiting for time to pass, obviously, but you're also not going to get anywhere in a weekend or a week or two months or even a year, you're not going to gain significant skills you can obviously get, you can learn quite a bit in six months, a year's time. But if you're looking at people who like myself, I've been in the industry for 10 years. And I still don't think that I'm like, I don't feel like I'm at Advanced developer yet. Maybe I don't know, maybe intermediate advanced developer depends on how you look at it. But I still know that there's so much more that I have to learn. So being able to just like put your head down and build stuff day in, day out, do that for 10 years, and then you're going to get really, really good at this thing. And I think it's as frustrating for people to be like, Oh, I need this job. Now, I want to be able to be making that money in six months from now, when that reality is there's lots of cases where that's true. But you're also going to need to just like look at where you want to be in six months, a year, 10 510 years from now. And that's really what you're gunning for. Because if I look back at my career now, I'm so glad that I kept with it for 10 years, because now it's just like the momentum I have is unbelievable. And being able to learn stuff quickly is is next to nothing for me. - -15 -00:07:31,710 --> 00:09:27,240 -Scott Tolinski: Yeah, yeah. I mean, I think you touched on a lot of really important things there. I think one of the most important one is to just keep yourself in this learning mentality and have your mind be an open vessel. Because at this point, you don't know what you don't know. And you don't really know a whole lot. So yeah, it is going to take some time, this stuff is hard. So don't expect results overnight. And if you do get some results overnight, you know, you can celebrate those but you know, take this time to really explore the fundamentals and explore the basics. And don't put that kind of pressure on you that you need to be somewhere. So I think that's great. One of the biggest tips I have for new developers is start small people want to start with everything. That's like a big thing. People say, Well, this is my first site using these kind of technologies. And I want to use this and this and this and this and this, and this, whether you're brand new to JavaScript, and you want to learn react and Redux and Apollo and everything all in one project, not something that I typically would recommend, because, you know, sure enough, these technologies are things that you might want to learn or pick up at some point. But they're by no means the best way to learn the basics. To learn the basics, you would need to learn the basics. And you want to learn those things sort of separately or together or whatever. But you want to learn these basics in a way that allows you to truly understand what these basics are at their, their core most right? Your fundamentals are so important at this stage in the game, because when I'm looking for, you know, developers, to you know, whether in an interview or whatever, you need to see that these core skills exist, whether it's, you know, knowledge of semantic HTML knowledge of how to write good CSS knowledge of how to write good JavaScript or when to reach for any of these particular tools, and when to not reach for them is a big thing that will get you a long way. So make sure you are focusing on those fundamentals. - -16 -00:09:27,630 --> 00:11:01,380 -Wes Bos: I think my other piece of advice is that spinning your tires doesn't seem like progress. It seems like you're getting nowhere. I can't tell you the amount of times even in the last couple months where I spent an eight hour day working on somewhere something and at the end of the day, I was no further along or that all of my work had to be scrapped. And it's incredibly frustrating to just waste your time like that, especially when maybe you're at a job and you actually have to show progress and you haven't got anything done for that whole day. And how you explain that to your boss is another issue. Hopefully you have Understanding boss, but I know that doing that is his progress because you're going to be that that's what learning is learning is going through 100 dead ends before you actually find the one that actually works out, learning is being frustrated with it and getting better at debugging skills. Like, I just had someone send me an extremely angry email with my node course or they, they couldn't get it running. And they said they spent 48 hours trying to get it started and they had not NPM installed. Like, okay, that's you obviously didn't follow the steps. This is a bit of an extreme example, but guarantee you the next time they do a project, they're not gonna forget to npm install for they move along, right. And that's going to be a lesson in actually following the steps and actually listening to what a tutorial says and, and not trying to jump ahead and, and understanding like, where did these magical libraries come from? Well, they don't come from nowhere, you have to NPM solid, right? All of those things are going to help you become a better developer. - -17 -00:11:01,409 --> 00:14:13,200 -Scott Tolinski: Yeah. And I actually had a similar not not necessarily the same situation, right? Somebody upset that I was leaving errors in my video tutorials. The funny thing is, is like some of my free tutorials to like, Why are you leaving these errors and like, I'm why I watched this video to learn the right way to do things, not the wrong way to do things. And the problem is, is that those skills that we're trying to instill in those situations are these troubleshooting skills. If you don't run into any errors in a tutorial, you won't know how to solve or even go to approach an error when you actually run into one. So again, those troubleshooting skills are some of the most valuable skills that you can possibly gain. I've always maintained that I'm not that smart. I'm just very persistent. I'm when I have a bug, I am going to just, I'm going to spend the time on that I'm going to put put my mind on it, I am persistent, I will get things working, I will not get things working the first or second, third or fourth time, you know. So it's definitely one of those skills that you need to build and grow. And as long as you're working on those troubleshooting skills, and figuring out how to solve problems, and that's such a big thing, don't go running to the chat room and just say how do I do this right away? spend spend a day on it, if you can spend some time on it, if you can, those skills are valuable to gain. In addition to that, I think one thing is that how are you going to stay excited about something to try to solve those problems, right? If it's something you're not interested in, and you're you're banging your head against the wall for you know, two days on it, then what's going to keep you excited to solve those problems. And for me, again, it's knowing what excites me about web development, and not necessarily what excites other people. Because when you're learning content, and you're learning this stuff, there's so many different avenues you can take it to make yourself excited about the outcome. For instance, when I first started, I was really super into, like Photoshop designs, right? Like back when we first started, you did so much stuff by chopping up slicing up a Photoshop file, and then just setting background image to a bunch of stuff to get these like really fancy gradients before, you know CSS gradients and fancy drop shadows before drop shadows. And the challenge involved in getting a really cool Photoshop layout to actually work in a website was one of the like, most exciting things for me. So I was spending my time with stuff like that. But I was still gaining CSS skills, I was still getting core HTML skills, and not really so much JavaScript at that point. But it drove me to figure out these layout and these CSS issues that I might not have figured out if I was just building something that somebody else told me to build, right. So obviously, that's not as applicable, because you can now do all this fancy stuff with CSS. But let's say you see some animations. There's nothing to stop you from wanting to learn CSS animations as a way to learn CSS better. So find these things that make you really excited, and make you interested and then make your own to latch on to it and then explore those things. You're an explorer, go explore. - -18 -00:14:13,649 --> 00:16:39,799 -Wes Bos: Totally. And my last point that I have here, and you've probably all of you have probably heard me say this so many times, but it really is my whole mantra is that you just need to build a lot of stuff you need to build 1000 things is what I say just get out there and start making stuff and I'm going to give you an example from from my own life where I'm trying to understand something and it's just not actually happening. So I've been going down a rabbit hole of YouTube solar energy, I figured out that my house points perfectly South which is where you want it for solar panels and I'm starting to think like oh Wouldn't it be cool one day if we could put solar panels on her house and I want to know all about it how it works and there's a lot to understanding there's the of watts and volts and amps and and different types of batteries and balance. batteries in an amount that aware. And you have to have different gauges of wire, depending on how much you want to move. And there's series. There's wiring solar panels in series versus wiring panels in parallel. And those things are different. There's a bunch of up and down, there's so much to actually learn about how it works. And I kid you not, I've been watching like, probably like 40 different videos, I've read all these articles about like, what are watts, volts and amps. And there's all these like examples about like how it's water, and if you turn the water and the tap on all the way and I'm like, okay, I kind of get it. But then I like two weeks later, I try to remember that and I don't understand, I was like, you know what I need to do, I need to buy a little solar panel and a couple little batteries, and figure out how this stuff works and actually build something so that i will i understand and plug my computer into it and start and figure out how long that lasts based on the size of the battery and how much I'm pulling based on what my electronics pulling all you get the point, right? So I think that's just the perfect example. I was like, Man, this is so much like coding, because like, you can sit there and look and read, what is composition, what is inheritance, you can read it you can watch someone make a sample function called fill a cup, or you pass in the amount you want to fill a cup. And at the end of the day, like you probably will kind of understand that stuff. But where it's really going to click is when you actually run into situation in real life. So that's the whole idea behind my JavaScript thirty.com course, is that like you just start building stuff. There's no secret behind it. I've said this so many times, build stuff, build 1000 things, you're going to get so much better. As you every single time that you build something you're gonna get better. - -19 -00:16:40,169 --> 00:16:49,799 -Scott Tolinski: Nice. We'll have to talk about solar panels. I'm interested. All right. Well, it's obviously a big thing in sunny Denver here. So yeah, very interested. Okay, - -20 -00:16:49,830 --> 00:16:52,710 -Wes Bos: cool. We should do a whole show on how it works. - -21 -00:16:54,179 --> 00:16:56,789 -Unknown: So the panels work solar panels for web devs. - -22 -00:16:57,090 --> 00:16:57,659 -Wes Bos: Yes. - -23 -00:16:57,659 --> 00:17:04,200 -Scott Tolinski: How about solar panels for jQuery users? Or even better solar panels? for designers? These are all good. - -24 -00:17:04,500 --> 00:17:06,510 -Wes Bos: Should designers solar panel. - -25 -00:17:09,720 --> 00:19:43,710 -Scott Tolinski: Bad, there's so many blog posts, okay. Let's get into this next subject, which is advice for applying for jobs. Because you know, not everything, when you're first starting is all just about the code code code, you have to make some money doing this, maybe you went to some, like we said, code camps or stuff like that you've gotten some skills, you're building some stuff, you need to get a job, obviously. So let's talk about some advice there. I think first and foremost, when you're applying for jobs, you should apply for anything that interests you and excites you and that you'd be excited to work on. Now, if you're just needing a job, just apply for anything and everything that exists as long as it doesn't look like a terrible situation, right? Like if someone's asking you to work overtime, for no pay, and whatever, then obviously, skip that stuff. But find a job that excites you, and apply for it. If you don't feel that you're qualified, apply for it. If you definitely aren't qualified, apply for it, who cares? Just get in there. Because the good thing is, is once you get in the door, and you could talk to people, maybe they're gonna see something in you, right? For instance, my very first web development job I was not qualified for I'm just I was distinctly not qualified for this job. I had a good interview, I really connected with the boss who eventually became my mentor. And he definitely could tell I was not qualified for the job. But he could also tell that I was good enough to be that developer or that I could be that developer in no time if he were to guide me right. So my very first job absolutely not qualified. I almost didn't even want to interview for it. My wife found the job posting she was like really adamant about me applying for it. I did I wrote a really nice cover letter talking about why I would really love that job. They took a chance on me and it started my entire career. It even my mentor Ben Ben chef and I, we even started level up tutorials together, which is now my actual career. So again, you start one ball rolling and you never know where that that is going to do so. So apply apply, apply, get in there, if you fail, who cares it like I I've gone into a whole bunch of job interviews, not wanting the job just wanting for experience right and failing at a job interview, failing anything yet stuff is all just experience and it's going to allow you to kill that interview that you really actually want right for that job that you're dying to have. It's going to any any failure is going to open the door for those kind of opportunities. - -26 -00:19:43,890 --> 00:21:46,850 -Wes Bos: Another thing I'll add to that is it's not necessarily a numbers game. Sometimes I hear people being like, I've applied for 300 jobs and I haven't heard back from anything and like, it means you're not doing something right. Yeah, you're obviously not doing something right because like, it's just you're not just gonna say spray your resume out over as many people like that that that certainly is a tactic. And that's the same thing with like, if you're a freelancer, one of the tactics is you want to get a job, contact 100 companies and ask them if they need a website being done, and likely one of them will be done. However, there's much more efficient ways to actually have that done. And it's making yourself much more attractive to employers, because put yourself in the employers shoes, if you post the job up, they are gonna get hundreds and hundreds of resumes. And most of them, you won't be able to differentiate between one or another. So what you need to do is make yourself much more attractive. So writing some blog posts, but we've talked about this before doing YouTube videos of explaining a topic that you have, you don't have to be an absolute expert at this stuff. But being able to first put yourself out there and second, try to break something down, you might put a five minute YouTube video out there that takes you an entire day to put together and you're just explaining a programming concept or how you did a specific thing and react. And by just putting yourself out there, that's going to just move you near the top of the heap, because they're going to see, okay, this person actually cares enough to write a blog posts YouTube video, author and open source project, or I know for beginners, it's it's often not and you can't like necessarily like, Oh, I created this amazing open source project, because your skills might not be there. But you could put up example code of stuff that you've worked on. A lot of people will take my JavaScript 30 course or any of my courses, and they'll they'll kind of make something out of that. And that's totally fine with me, by the way. But you can just put that up in your GitHub as as examples. Just put yourself out there is going to move you to the top of that, that dropped job search heap. - -27 -00:21:47,060 --> 00:22:41,760 -Scott Tolinski: Yeah. And yeah, and that definitely is that you want to make yourself attractive to these people that are going to be judging whether or not you can do this job. And so you know, one of those things, like I mentioned, in my first job, where they gave me a chance that I wasn't qualified for one of the things I did to differentiate myself was I wrote a really nice cover letter that actually explain why that job in particular was like my dream job, right? This is my dream job, because, and I guarantee, you know, the other people did that. Or at least maybe if they wrote a cover letter, it was, you know, you know, generic or whatever. But I wrote an actual like, man, it would mean so much to me if I had this opportunity for these reasons. And they really, really, I think, latched on to that, and they really liked that. So you do need to differentiate yourself, again, showing your commitment to this industry, by doing those kind of things, blog posts, YouTube videos, open source is going to go a long, long ways, it's going to definitely make you look much better. - -28 -00:22:42,090 --> 00:23:08,700 -Wes Bos: One thing people ask me all the time is about negotiating a salary. And I've actually never had to do this. So I don't like have a whole lot of experience on it. So I wanted to see like, maybe you have a take on that. I do have some opinions on it. I think like you should be like really aggressive in negotiating your salary. I think that there's you can leave a lot on the table. People seem to be afraid of possibly negotiating a salary. But like, do you have any experience with that? So when I would get a job offer, I - -29 -00:23:08,700 --> 00:23:42,090 -Scott Tolinski: would almost always call my dad and just be like, Hey, here's the salary. Here's the whatever, like, what do you think I should do? Here's my, you know, current salary, or what's your advice here? And he always had, he had always had excellent advice on this. And and sometimes, let's say I had one job. That was, let's say, it was just offering me 68,000 a year, right as a front end dev position. And you're like, Okay, that that seems like a good salary. It's a bump up from what I was making before, I should just take this, I asked my dad, and he says, tell him you'll sign today, if you get 70. - -30 -00:23:42,630 --> 00:23:43,380 -Unknown: Now, it's just like, - -31 -00:23:44,220 --> 00:24:49,470 -Scott Tolinski: yeah, I'll say yes, right now for 70. So I said that and they're like, Okay, 79. And that doesn't always work. But it has worked for me more often than not, believe it or not, yeah. And don't don't feel ashamed to negotiate your salary. Don't be you know, there, there may be a situation where you they have a lot of people lined up out the door for this job. And they say, this is the firm's salary, we cannot change this. And if they're going to tell you that this is this is as high as they can go or whatever, then that's fine. And you got to also know that by saying, hey, all signed today, if you if you give me 70, they could also say No thanks, let's, let's go with somebody else. So you're taking a little bit of a risk there. But it depends on how much that risk is worth it to you. In that case, I had a job, I didn't need a job. It was sort of like, well, this would be a nice little bump up. Let's see how high I can get this. And yams. It works really well. So I always take those shots. I take all of them. I always try to get a little bit more out of it. And most of the time, I've never lost a job because of it. - -32 -00:24:49,620 --> 00:25:03,510 -Wes Bos: But it's someone really going to pull a job back from you because you try to negotiate like someone says, okay, 65 and you come back and say, Hey, could we do 70 they're not just gonna walk away. They're gonna say Right, no. Would you like it or not? Right? At that point, they've - -33 -00:25:03,510 --> 00:25:34,590 -Scott Tolinski: decided that you are their person, right? Yeah, they they've committed to you to some degree, the point where that doesn't work is like an initial interview. And they're like, what are your salary required? Yeah, I hate that question. Because it's like, Huh, I don't know, as much as you can give me. How about that? You know, I always go for hire though. I always I always go for hire, maybe find out what their developers are making and go for a little bit higher or something like that. They mean, most of the time, they're going to tell you if it's too high, they're not just going to kick you out. So - -34 -00:25:34,920 --> 00:27:05,520 -Wes Bos: yeah, if that was my the case for me what I would say if they say, What is your salary, I'd be like, Look, I have a bit of a broad range. And the money's important to me. But there's also these following things. And I think if you have a bit of an entrepreneur mindset, when you're approaching either a job or negotiating an existing job, you can think about like, how can I How can I turn this in my favor, whether that's negotiating, obviously, more money, different hardware that you want big ass monitors, standing desk, whatever it is that you want unlimited Lacroix in the kitchen, vacation time flexible schedule, all of that stuff is is up for negotiation, I think if you approach a job as not necessarily just like an average salary, and a lot of people will just google average salary, or like, they'll send me an email listing, like, I know bootstrap three and four, and I know jQuery one and two, and then they'll be like, given the following things, how much does your machine compute that I am worth, right? Like, that's absolutely not the way that you can, you can, you can figure out what your salary is worth, because it's a big part of it is up to you to actually negotiate that in, and to go and get those big bucks, the people that make really good money both in business, like as an entrepreneur, as well, as people who are making really good money inside of a company, they are doing that, not just because they're amazing at their skill set, that's important, too. But it's because they're really good at being able to negotiate these things and and show their value to their employer where they can show that it's worth it in the long run. - -35 -00:27:05,760 --> 00:27:53,910 -Scott Tolinski: Yeah, definitely. So a lot of the times we we always want like beginners to really write their own code, right to like, get into the code right away and start writing your code. However, there are some times where having a good code example can really go a long way. And a really amazing tool that we've been made aware of his coffee cup software's grid prototyping tool. So the coffee cups, the CSS Grid tool, really excited both of Wes and I because of the code that it outputs. And so if you're looking to learn things like CSS Grid, this coffee cup CSS Grid software might just be a great way to not only get some experience with grid, but also really grow your CSS skills by looking at some nice code. - -36 -00:27:54,030 --> 00:29:23,820 -Wes Bos: Yeah, so coffee cup software, CSS Grid, I'm laughing because I'm gonna tell the story of how they approached me. I obviously, I have my own CSS Grid course. And they came and said, Hey, can we maybe do some stuff together? And we have a visual builder for CSS Grid, it outputs code, just like you would write it. And I said, Yeah, right. Show me, right. Because like, obviously, developers have a very high bs tolerance. And we all come from the days of the Dreamweaver where outputted, this terrible, ugly code, or, or you've, we've all seen a WordPress, some sort of WordPress editor layout maker that outputs the most horrendous code ever. So I was like, Alright, I'll jump on a call. And we'll check it out. And to my surprise, it was actually awesome. The the code that I put out, was just like, I would author it myself. And it's great, because CSS Grid is such a visual tool. It's such a visual thing that he needs to be able to see what you're building, that you can just stare at CSS and understand how it's going to work because there's implicit and explicit rows and columns and spinning and placements in order and CSS Grid has is huge, right? There's, there's so much to it. So they built this tool at CSS grid.cc. It's a free CSS Grid builder, and you should check it out. It also comes with some CSS Grid guide. So if you want to learn a little bit more about CSS Grid, you can check it out. So thanks so much to coffee cup software for sponsoring again, that CSS grid.cc Nice. Yeah, really - -37 -00:29:23,820 --> 00:31:06,510 -Scott Tolinski: super cool. So we have now talked a little bit about advice for gaining skills, advice for applying for jobs. And now let's talk a little bit about advice for knowing what to focus on. This is seriously one of the questions that I get asked the most like, what technology should I be learning right now? Where should I be spending my time? Like, what should I be doing? And it's tough. I'm gonna I'm gonna say it's tough. modern web development has made this tough because there is so much stuff. It's a lot less simple than Hey, pick up some CSS and some HTML and get going right, or pick up WordPress or Drupal. One of the CMS says, there's just so many things out there now, that can take up your time and take up your learning. However, my biggest advice is to figure out what kind of things you would like to build, like what gets you excited, what gets you jazzed up, and work backwards from there and figure out what these things are that you need to learn to build these things that get you excited, right? Like, let's say, you saw some some interactive thing on a website, or maybe it was a page transition, or maybe it was, you know, something interactive land, like react sort of stuff. And then you find out how they built it, maybe you use built with or one of these things. And you see, oh, this was built with react and CSS and whatever, well, I need to learn react, then. But to learn react, I guess I need to learn JavaScript, and then well, to learn JavaScript, I should at least get the foundations of JavaScript going. So you really just want to work backwards, and to find the thing that like, here's what you want to build, here's what gets me excited. And here's all of the things that I need beforehand and just start cranking away on those things. - -38 -00:31:06,660 --> 00:33:07,860 -Wes Bos: My biggest advice for for knowing what to focus on is is not necessarily like these are the technologies to focus on because I think sometimes people, they see a job posting and it says you must know react and Redux and RX js. And they say, Okay, these are the technologies I need to know. And and that's important. But I think what you need to do is you need to actually build products that focus on solving problems and focus on doing things rather than the actual tech behind it. Because if you sit down with a fresh copy of react, and you're like, I don't know what to build, or I don't know what to do with this, then you're not going to get much past your hello world. Whereas if you say like, Okay, I'm super into hockey or barbecue or buying bikes on Kijiji, or or anything like this, then you have a problem and you have something that you want to build or, or my parents run a business and they need a tool that will help them keep track of x, y and z, right? You find some sort of problem, whether it's a website or an app or a little tool for you to time your your B boy moves or whatever it is. And then you say, Okay, this is a problem I have, I would like to build this. And what are the tools? What is the tech that I can actually use to build it behind? So sort of approaching it from a problem first, because like, newsflash, that's how the world works. You we have problems in the world. And then tools are developed to solve these problems, not the other other way around, right? You don't ever see a carpenter, walk into a shop and say, oh, I've got these new screwdrivers. I've got this new saw. Let me saw something, right. Let me saw a piece of wood and Oh, now I have a piece of wood. That's the same thing as the the Hello World, right? What you say is I want to build a table, I want to build a chair, I want to build a new gate, I want to fix this problem that I'm having in my house, then I need these tools. And as you build stuff, your your collection of tools will grow. And it's no different from that from being a web developer. - -39 -00:33:08,360 --> 00:33:56,970 -Scott Tolinski: Yeah, yeah. Like, I mean, I like all of that advice. Because, again, it's it's problem forward, right? It's, it's what's this kind of stuff that will one solve some sort of problem for me, but also what kind of stuff is going to make me excited, right? What kind of stuff is going to drive that learning what kind of stuff is going to push me forward when I have, you know, all these bugs and then the error ended up bf forgot to import a script or run npm install or any of that stuff, right? What's going to keep you driving through all of those things? Well, it's going to be the drive to solve a problem or to do something that you're trying to do, right. I mean, these things that are going to excite you. So definitely 100% agree on that. But yeah, I guess really, yeah, like you said, First, start with the problem. And then work backwards, find the tech, learn the tech get going build some cool stuff. - -40 -00:33:57,450 --> 00:35:13,380 -Wes Bos: I think another another tip I have here is focusing on techniques and stuff like this is really important. I'm gonna have I'm full of these, like, metaphors are relating to real life today. But that's like, that's, yeah, totally. Like when when I learned how to barbecue, and like, like smoke meat and stuff like that, what I did is I just like, watched lots of tutorials, I tried lots of stuff. And as you are doing these things, you're learning different techniques, you're learning when to apply different rubs, you're learning not to apply barbecue sauce too early, because it's going to burn you're learning how different levels of heat will affect different types of me and you just sort of get into this cadence of learning how to cook and then before you know it, you're not following a tutorial or you're not following a recipe book and I think that's how it's going to be with beginners. You, you first you'll you'll go with someone like Scott awry and you'll, you'll do a whole bunch of tutorials together and you'll build something sort of with us holding your hand and then at a certain point, you'll Let go of our hand and you'll say, Okay, I've got all of these tools, and I've got all these approaches in my repertoire. Now I can I can figure out how to pull them together myself, and it'll just become second nature at that point. - -41 -00:35:13,859 --> 00:36:01,940 -Scott Tolinski: Yeah, I distinctly remember, like a feeling of being like, all of the sudden, whoa, I can do this by myself, without having to look up a tutorial on how to do it. And I'm came up with this entire view on where to go and what to do. I came up with this myself, right? Oh, well, if I want to do this, then I have to do this. And I have to do this. And I have to do this. But it's not overnight for a very long time, it was always like, okay, now I have to go find a tutorial on how to do this, because I don't know how. And eventually as you go, you are going to get these aha moments where now instead of having to look up how to do something, you can invent how to do it yourself, even though it's obviously probably been invented thousands of times before, but you can come up with it yourself, just because you now have those base level skills, you know where to look, you know what to do? - -42 -00:36:02,250 --> 00:37:06,230 -Wes Bos: Yeah. And you'll be able to, to swap things in and out much more easily, right? Sometimes I get people who come and take my node course. And they say, oh, Wes, I have a great course I wish I could take it. But I like to use ej s instead of pug. So therefore I can't, I was like, okay, it's just a templating language. And what you should be doing is that, okay, I'm learning these 11 different parts of node from less one piece I don't like I'd rather use a different templating language at the end of the day, but either bite and chew, just use Jade, because that's what I'm using in the tutorial. Or if you really don't like it, learn how to swap just that one piece out for this tutorial. And keep going with with the rest. And sometimes I think people just look at at tutorial in this, say, Oh, these are all of the things and they're all set in stone. And I want to learn how to use them together. But in reality, they're just lots of different moving parts that you're going to be able to pull just the middleware piece out and apply that to a different project that you're working on a different point or just the templating part, right? Yeah, - -43 -00:37:06,230 --> 00:38:07,920 -Scott Tolinski: I almost always, in my videos recommend that people, Brian branch off from what I'm doing. Like, yeah, I make it very clear. Like in my latest electron series, I'm like, Listen, this theme in this style component system is good for me. And it's good for this series. And if you want to follow it, that's cool. However, if you want this to look differently, if you want this to look differently, with maybe a different technology, please go ahead use those things. Like just because I'm showing you how to make it look like this and how to use styled components does not mean that you have to do that. And I definitely encourage people to extra extrapolate is that that the word extract extrapolate Yeah, yeah. Yeah. extrapolate upon the things that I'm doing, right? Like, Hey, I'm building a Movie Database, well, maybe you don't need to build a Movie Database, maybe you can build a video game database. Or maybe you can build a TV show database, or whatever tests, take the idea in the pie, a little bit of different ideas to it, and then you're going to be getting more out of those experiences. - -44 -00:38:08,220 --> 00:38:28,530 -Wes Bos: Yeah, if you make it your own, then that's when you get excited about like, coming back to the things Scott and I were talking about. If you're excited and you're invested in your project, you're going to learn a lot more. So if you say, Oh, this is cool, but I would like to make it do something else. I could see how I could start to deviate 20% away from this tutorial and make something on my own. That's exactly where you want to be. - -45 -00:38:28,800 --> 00:38:46,230 -Scott Tolinski: So yeah, the last major topic we wanted to cover is really just imposter syndrome. Because again, we get to ask this question all the time. It comes in almost assuredly, every single time we post one of our potluck tweets asking for questions. Yeah, advice for posture syndrome. What do you have? Wes? - -46 -00:38:46,260 --> 00:41:29,480 -Wes Bos: Yeah, this is something that's come up a few times in the podcast, but people still email me about it. So like, I'm gonna put this in the title. Hopefully, this will be a nice, nice way. imposter syndrome is where you've done all this learning whoever you feel like you don't actually have any sort of skill in order to apply for a job or to build something in or if you get a job, you might be like, hold that I trick them into hiring me, I'd really don't feel like I have the skill sets and and it's called imposter syndrome. Because it's a syndrome. It's not something that you necessarily actually have. And I think most people have it, you talk to anyone that works at any big company, and they, they almost always feel a little bit of that being like, oh, man, I might be in a little bit over my head. So I think what's important to to combat imposter syndrome is first know that this is a thing that everybody has, and it's likely that you are not an imposter. Maybe, maybe you are, but maybe you are you you'll be fired very quickly. But it's likely that you're going to join a team and your team is going to help foster you and they see something in you that they're going to be able to grow and they like your personality and they like your skill set and they say like this is someone who we can invest time in and we can grow. So that said what are some other ways to combat imposter syndrome. I think one of them is, is just listen to this podcast because what we do every week here is that we talk about a topic and we distill it into all the different pieces and, and talk about it. And I think that's really important because you don't necessarily know need to know how to do absolutely everything. But having a good surface area of the industry of web development in general, is really going to help you be able to understand how pieces work together, be able to talk to different engineers on your team, understand like, like, for example, if you don't know how servers work, if you don't know how, like Ajax requests from the front end, gets to the back end. Or if you don't know the difference between j WT and sessions, that might not matter. But actually knowing how they work and what they are, will allow you to talk to people on the team allow you to build better products that will allow you to better understand when problems come up. Like I can't tell you how often I get emails from people being like, hey, Wes, I'm working on a react project at work. And I've spent three days on it. And it's not a react problem. It's a server problem their server was was returning bad data or something like that, or there's a corps issue. And people are like, how do I get the server to give me the data? I I can see it in dev tools, but it won't go into my application? And the answer to that is you can't that's what course is right. So having a good surface area of all of these different things where that might pop up at some point in your career is really going to help you. - -47 -00:41:29,760 --> 00:43:15,090 -Scott Tolinski: Yeah, for me, I think that if you go into a job, and you feel like you're in over your head, Well, okay, how about let's put it this way, if you go into a job and you don't feel like you're a little bit in over your head, then I don't think that you've picked a job at the right level, right? You've picked a job at your current level, not at the level where you want to be. So good point, you should be looking for these things to help you girl. The only time it's a problem is if you show up to a job, and you can't do the work and you're not willing or able to make yourself rise to that occasion. So if you get into a situation where you're like, man, maybe this job like maybe I'm not good enough for this, right? I'm feeling like an imposter. I'm feeling like I shouldn't be here. Instead of saying, Well, I guess I shouldn't be here, you need to say I have to show them that I deserve to be here, I have to make myself feel like I deserve to be here, I have to get my abilities up to the point where I feel comfortable here. You know, nobody ever learned to swim by standing at the edge of a pool. I just made that up on the spot. So Wow, that that might be a good thing. Yeah. So you got to get in there, man, you gotta you gotta, uh, you know, tread water a little bit, you got to figure it out, you got to get some work, but you got to get going on that. And that's really just it is you want to feel those times where you're uncomfortable and you're feeling like an imposter. Because really, those are the times where you have tremendous growth. And, you know, that's how you grow your careers through feeling like an imposter and rising to the occasion. So you know, every single time you do that, you push the notch a little bit forward and a little bit forward and a little bit forward and bow all of a sudden you are big boss, man, Big Boss woman coming in there doing the job. But yeah, that's, that's my advice there. - -48 -00:43:15,300 --> 00:43:17,480 -Wes Bos: I know all about being big boss, man. - -49 -00:43:18,030 --> 00:43:48,750 -Scott Tolinski: BBM. I was always I guess I also know that we're on acronyms I do want to stay, I want to say that we should also you should not care about what I wrote here as open up other people's progress, like do not care about other people's progress. Because there's always going to be somebody who is like, way, way smarter way better than you, there's always someone who's gonna be way better, there's gonna be lots of people that are way smarter than better than you don't care about their progress. It's your progress. It's your story. Get going on your stuff. Don't worry about other people's stuff. - -50 -00:43:48,780 --> 00:44:41,790 -Wes Bos: That's that's a really good point as well. Sometimes you see, even with with conferences, sometimes you see these conference speakers, every single conference talking about it in there. They're often like a developer advocate, nothing developer advocates, I think they're great. But sometimes this is people just talking about the stuff and like I should talk. I'm the guy that does the podcast twice a week, but there's sometimes just people always talking about it or posting Instagram or just being very outward about their what they're doing, where if you check their GitHub or ask them what sort of stuff they've built, it's there's nothing there. Right? Because it's really just a show we layer and actually doing the work. There's a lot of people that are doing the work and are very quiet about it. So don't compare yourself to, to maybe that 10% of the people that are just putting themselves out there because it might just be all for show. Yeah, it might not be though. I don't want to I don't want to poopoo anyone's work. - -51 -00:44:42,120 --> 00:45:30,030 -Scott Tolinski: Yeah, right. Yeah, there's definitely people putting in the work on all sides of the spectrum there. And there's definitely people not putting up putting in the work as well. But yeah, that that's that's pretty much it. Let's talk about something that will save you from putting in a ton of work and in my mind, that is Freshbooks Because no one likes to put in the work in their counting time because, well, I'm not gonna say nobody because there's accountants out there that absolutely love it. But for the most part, if you are a small business owner or you're a freelancer, you're developer working on on projects like that. You need cloud accounting software, you need something to keep track of your your expenses, your invoices, and all that stuff. And there are no better tool. There is no better tool, I should say, than Freshbooks, which is incredible cloud accounting software. - -52 -00:45:30,300 --> 00:46:40,950 -Wes Bos: Yeah, talk about like putting in the work when if you're trying to run a small business, sometimes I find that you can get distracted by the everyday the accounting, the all of the stuff that is not actually building stuff. And I, my whole mantra in life is to fight this stuff, tooth. And now talk about focusing on building stuff. One thing that I'm very much against, in my whole running my businesses, wasting time that is on stuff that is not development, right? Because it's such a pain, because it's it's like, really easy to get sidetracked on stuff that's not actually running your business, and feel like you're getting work done. Because you're you're spending time doing invoices and sending emails and stuff like that. And it's not really getting anything done, you're not really progressing forward. So I love fresh books for this because it makes creating invoices super easy, makes good tracking down late payments, it makes creating quotes and all that good stuff super easy. So if you are a small business or a freelancer and you want to accept money online, and you want to build people, you need to check out fresh books@freshbooks.com forward slash syntax in use syntax. And how did you hear about a section? Thanks so much to Freshbooks, for sponsoring. - -53 -00:46:41,220 --> 00:49:14,100 -Scott Tolinski: Thank you. Yeah, absolutely. So while we wrap this up, we have just a section that we labeled here. Other advice, which is good, because there's a lot of little things that didn't necessarily fit into any of these major categories. But we'll go through these kind of quickly. One of the things I really wanted to point out was don't fall into this trap of blindly following, you know, whatever tastemakers are saying to do, right? Or even, you'll get into it on on the Reddit or the Twitter or any of these things where people are saying, Yeah, don't learn that. That's stupid. That's bad, right? Angular sucks, or react sucks, or view sucks, like learn react view, or Angular, if that's better, don't fall into that trap. Evaluate things for yourself, right? If you haven't used something, I mean, maybe you can know it sucks to some degree. But if you haven't used it, maybe it doesn't actually suck, maybe it doesn't even have the those kind of negative things attached to it, right? Maybe you don't know why people are saying something is good or bad. For instance, when I first wanted to learn a back end, like language, right, I took a tour of I did Django with Python. I did rails with Ruby. And then I just did express with node. And I tried all three of them. And I saw which one I liked the best. And I actually, to be honest, I think I liked all three of them. But you know, I'm already writing JavaScript for other things. So node is where I went, right. But I did the same thing with front end frameworks. When I first wanted to learn front end frameworks. I tried Angular, I tried backbone, and I tried Ember, because those are the big three at the time. And a lot of people that I respected, were saying to use backbone, a lot of people, but I just didn't like backbone that much, and I wasn't that productive with it. And instead, I picked Angular, which at the time, people were saying was easy, but you know, wasn't, as you know, is able to build complex things, which it was, but like it was, if I would have just listened to the people that I, you know, was seeing online, I might not have picked one that was best for me. And then 10. Instead, I tried them out, found which one spoke to me, I became more productive with it. And I learned a whole lot about all sorts of stuff, right? The fact that I chose those three, I could see that three different approaches. And I could learn a little bit about what's JavaScript and what's caught in those frameworks. And I became a much better developer out of that. So don't let someone else form an opinion for you really know why those opinions are formed and try to dive into it yourself. - -54 -00:49:14,340 --> 00:51:51,270 -Wes Bos: He has people that are really loud about their opinions, when they're saying things suck, or whatever. It's almost always someone who's brand new and is confused. So they're the approach. Like we see this all the time in the bootcamp where people learn how to build HTML, CSS websites, and then they you flip them into something else that's not HTML and CSS, and it's a little bit harder. And then they immediately say, this sucks, or I hate the way that they do this. And it's like, obviously, you're not so well, like, you obviously are not so into the industry that you you can talk about stuff like this, it's it's that it's you. It's not the technology, it's probably you or its people. There are people out there that are very outspoken and are very opinionated about how things need to be done and have lots to say about how how other people suck at it. But in general, most things are pretty good. And you probably shouldn't listen to people that are saying, When something sucks, right? The same thing with a blog post, if you're the blog post is related name, like, don't use x. Use why instead, or if the whole like title of the blog post is why you should not do something, it's probably not something that you should be reading, it's you should be reading blog posts that are like, Here is why I love to use this right. And they can detail into like the different features of what they haven't, obviously, compared against different frameworks. But this shouldn't be the only goal of it. One of the tip I have here is focused on soft skills as well. So if you want to get a good job, if you want to go far in this industry, tech skills aren't the only skills that you're going to need, you're going to need good time management skills, if you can learn how to get really good at getting things done GTD mindset, if you know how to send really good emails, if you can send short like, I'll tell you a lot of the emails I get from beginners versus very advanced developers, the emails I get from beginners are brutal. There's no spaces, there's no punctuation, they're way too long. It's just a wall of text. It's poorly formatted. So there's a lot to be gained there. Whereas if I get an email from like, next week, I'm going to alera Khan and the developer behind Laravel is Taylor otwell. And the shortness and briefness of his emails is amazing. I don't think I've ever gotten more than three sentences from that guy. And it's because he's so good at obviously, being a developer, but his his communication skills are probably some of the best I've ever seen. Right? So it just goes to show that you need other soft skills to go along with your, your web development. - -55 -00:51:51,450 --> 00:53:24,510 -Scott Tolinski: Yeah, yeah, definitely. One of the other things we had in here, we always still talked earlier on the show about having a mentor. Having a mentor was such a big thing for me, so much of the stuff, Mike, my learning was accelerated so much by Ben Ben chef, who like who was my boss, but you know, I'll never never forget, it was like my second week of work. And I had never done a Drupal site ever. I had, you know, done WordPress, or whatever. And we had like a major client work. And we were, you know, sort of just got a new client or whatever. And he was sort of like, hey, do you want to do this Drupal site? And I was just thinking, I don't know how to do any of this stuff. He just like had total faith in me to do it. I was just like, I guess Sure. I will try to do it. He was like, No, man. It's cool. Like, if you're on anything, I got you. And sure enough, that like mentorship, you know, after that that site was done, I was so much smarter than before, because of all of the things I could learn from him. And if I had any questions, just shout it over. Hey, man, like, how do you like what am I doing wrong here? Can you can you take a look at this. And even if it was dumb stuff like, hey, in your PHP, you add a colon instead of a semi colon. Now the whole thing is white screening and because you don't know how to look up the errors, here's how you can look up the errors to solve this problem. Next time having a mentor was so huge for me I cannot stress this enough is a big deal. And it often works best if they're your coworker or boss or anything like that somebody was got the time to help you out with that stuff. If you've got someone at work who's willing to take that time with you, that is like invaluable in my mind. - -56 -00:53:24,960 --> 00:53:30,420 -Wes Bos: Awesome advice. I think that is it for me. Do you have any last little nuggets you want to drop? - -57 -00:53:30,690 --> 00:53:57,840 -Scott Tolinski: No, keep your well I guess I I said no. And then I started saying one. But yes, keep your mind an open vessel. We always say this before the student mentality. Even if you think you're big badass over here, keep your mind and open vessel your student. You got to learn stuff constantly. We're all beginners in something, right? Absolutely. Just keep on expanding your learning left and right no matter what. But that's it. Yeah, I got nothing other than that. Um, - -58 -00:53:57,840 --> 00:54:07,950 -Wes Bos: do you have a sick pic? I do and it's a more of a sweet pic. Have you ever hear I'm gonna show you I have you ever drank this before? - -59 -00:54:08,130 --> 00:54:09,780 -Scott Tolinski: I've seen the cans. I see. - -60 -00:54:10,170 --> 00:54:10,830 -Wes Bos: Yeah, - -61 -00:54:10,890 --> 00:54:15,960 -Scott Tolinski: I don't know. I don't love their branding. So I never like caught my eye - -62 -00:54:16,170 --> 00:54:32,190 -Wes Bos: cvrs we say in the Canada Zed via Zed via anyways it's a pop or as as you say down south it's a soda. Yeah. Or I learned that some people in the states like a weird I don't know where this is but they say coke for everything when it's a coke. - -63 -00:54:32,309 --> 00:54:38,730 -Scott Tolinski: I don't know it's I feel a large part of the country but I'm not quite sure where I'm from Michigan. So we say pop. It's always hot for us. - -64 -00:54:38,760 --> 00:55:42,000 -Wes Bos: Yes. Pop this. It's pop on this podcast anyways. It's a pop and you can get them in. They have like a root beer and I'm drinking the black cherry one right now. And what it is is it's a zero calorie soda that is sweetened with stevia which is pretty good and they taste amazing and to go even further. They're all clear, but they all tastes like They're like big bold flavor like this isn't Lacroix where it tastes like you dropped a bit of shampoo in your water bottle. This is like bam, it's got some flavor to it. So I bought a whole bunch of them I very rarely find them in Canada and I found them at like one of these new grocery stores near us and I bought a whole bunch and they taste great. They're not not cheap. So it's only a treat for me but I've been really enjoying it so it's called z via it's a soda that's sweetened with stevia and if you don't know stevia is like a it's like us and a non calorie sweetener but it's like organic and it's it's not like aspartame or something like that. So it's supposed to be better for you. We'll see if I die from drinking these will see - -65 -00:55:43,500 --> 00:55:45,630 -Scott Tolinski: taking you right to flavor town - -66 -00:55:45,690 --> 00:55:50,280 -Wes Bos: that's what about you any sick pics? - -67 -00:55:50,340 --> 00:57:49,080 -Scott Tolinski: Yeah, I got a new camera which you're going to start seeing in levelup tut's videos this coming month with my new set at some point maybe I have a new set a new sort of system well it's funny because Western I do a video chat while we do this and I don't like my I took my entire office apart trying to build this new studio and then the table the tabletop for my desk wasn't in stock. So my whole studio is a complete in shambles. I'm like pushed up against this wall back here. And so I am just like ready to get this new set going. But piece number one of the new set was my new camera which is a Sony A seven, three, which let me tell you is a mirrorless full frame camera from Sony that if you are involved at all in the YouTube photography world or anything like that, you've just heard people raving about this camera non stop. I got it specifically to shoot 4k for me. But I just took it to her vacation and Aspen and wow, these photos are incredible. You can see some of the photos I've been taking with this thing on my Instagram account. This camera is unreal. The video is unreal, the photo quality is unreal. And it all makes you It makes it everything very easy and makes me look like a good photographer, which is that's a skill in its own that this camera is doing for me somehow. But yeah, I absolutely love this camera. I've had it for a couple of weeks I've shot some video I've shot some photos. And yeah, I have could not be money better well spent on a camera. So if you're looking for a new digital camera for shooting really high quality video does low light really well. Just overall the pictures insane. If you're looking for a brilliant new camera, I would drop Canon or any of those companies and go right for this Sony, the Sony A seven three is incredible. All you have to do is YouTube, Sony A seven, three and watch some of the reviews. And you'll see just why people are raving about this thing. It's awesome. Big, big fan. - -68 -00:57:49,260 --> 00:57:59,730 -Wes Bos: Wow, that's pretty cool. I'm looking on Amazon and you can buy it with like a live streaming box. I know pretty cool to be able to like use a nice camera as a webcam. - -69 -00:58:00,000 --> 00:58:30,300 -Scott Tolinski: I've been thinking about this a lot. And if you know the answer to this question, please let me know. Do you need one of these live streaming boxes? Or can I just feed the camera in to my computer? If you know the answer that hit me up? I'm sure I could Google just as easily. But yeah, I have been thinking about that as well, especially since I'm going to be doing a more permanent, like a set setup. If I could have this camera be used for my live streaming and stuff like that. I'm going to be doing a lot more live streaming. So yeah, definitely something that we should look into - -70 -00:58:30,600 --> 00:58:34,590 -Wes Bos: sec back. Any shameless plugs today? Yes. - -71 -00:58:34,620 --> 00:59:33,810 -Scott Tolinski: levelup Pro is the subscription service from level up tutorials. I get a lot of questions about level of pro because it's 19 bucks a month, or 1999 a month, and my series are on sale for like 29 or $39 a month, right? People are like, Well, why? Why are these you know, do I get access to everything and let me tell you, you get access to everything. If you sign up for the subscription, you get access to every single series that's for sale on the store. And there's a brand new 20 plus video series released every single month. That's a premium series that you cannot get anywhere else. So that said if you sign up for level up pro for the year, you get 25% off the whole price. So there's 12 new series along with the 12 plus pro premium series that are already there, there's so much content there and there's going to be so much so sign up for the year save a ton of money and get access to all the brilliant stuff that's going to be coming down the line. This next course i'm going to be doing is going to be all about Apollo and graph qL - -72 -00:59:34,050 --> 01:00:33,840 -Wes Bos: sweet I'm just gonna plug my stickers just arrived while Scott and I are recording this podcast. I ordered I'm not lying 180,000 stickers. It's 10,000 packs of 18 stickers. Yeah. Which is crazy. That's a lot of stickers. They will be up for sale probably not for a couple more weeks as I have to go on vacation yet and and And come back and it takes a little bit to prep all this stuff but just for everyone asking, they are coming, they will be soon I ordered tons of them. So please don't email me asking when they will be out hopefully will not sell out as quickly as it did last time. And I will I will be sending out an email to everybody who's on my list as to when they're available. And if you're not on that just sign up for any of my free courses at Wes Bos comm forward slash courses and you'll be you'll be put on my list. I think that's it for today. Thanks so much for tuning in and we'll catch you next week. Thanks. - -73 -01:00:33,840 --> 01:00:34,380 -Unknown: Please, please - -74 -01:00:36,660 --> 01:00:46,440 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax59.srt b/transcripts/Syntax59.srt deleted file mode 100644 index 733e3619c..000000000 --- a/transcripts/Syntax59.srt +++ /dev/null @@ -1,128 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA. And Scott. Totally ski. - -2 -00:00:25,950 --> 00:00:58,440 -Scott Tolinski: Oh, Welcome. Welcome. Welcome to Monday's edition of syntax which is we like to call a hasty treat with me as always, is Wes Barracuda boss. My name is Scott El Toro loco to linskey I hope you liked the new tasty intro that we cooked up for you because we love it. In fact, we were probably both in tears when we were listening to that the first time when we were just even describing it to each other. I think we were we were losing it. So I hope you like the Mondays. Yeah, - -3 -00:00:58,470 --> 00:01:22,410 -Wes Bos: we were making the script so that the that intro that we have was like we went on Fiverr and found some guy that does like radio for 17 bucks. We got that guy to record that intro and we came up with the names and we looked at monster truck names and West Barracuda boss just came to me but then we found Scott El Toro Lin's linski with tillet skia which is means crazy crazy bull. - -4 -00:01:22,620 --> 00:04:57,380 -Scott Tolinski: Yeah, yeah, the crazy ball. Yeah, the crazy. Yeah. And it's a really cool monster truck too. So check it out. That is a really cool monster truck. I didn't want to be Grave Digger. It's a little too aggressive. And I like the alliteration of, you know, well, I guess it's not necessary alliteration. But I like the, you know, Torah polinsky a lot of T's that's hard T's coming in there. like that a lot. So our sponsor for this episode is Netlify. And if you've been listening to this podcast for any bit of time, you know how much we love Netlify Netlify is a great place to build, deploy, manage modern web projects. I'm a huge fan of this service people always you'll see tweets nonstop. They'll say, Man, Scott really likes to talk about Netlify. And then I actually used it, and the Holy cow, you were not kidding. People say that all the time. Seriously, maybe like every day, we get a message from somebody who had never tried Netlify before they try it. And they're just so impressed with the initial setup process that they cannot wait to tweet about it. Because it's that awesome. It's very tweetable. I myself, the first time I used it tweeted about it. And I was just so excited about how cool this service is. Basically Netlify makes deploying your front end code as simple as possible. But more than just deploying your front end code, it also gives you access to all sorts of stuff that you might miss. If you were running a front end project without a server, right, you get access to contact forms, you get access to authentication, you get access to serverless functions, all built into this platform that makes it as easy as possible for you. That's the thing that really, really stands out to me about Netlify is just how easy they make everything. I mean, for instance, you you basically push a couple of buttons, your site's live, you get automatic continuous deployment, no more install scripts, or setup or anything like that. You get automatic continuous deployment from a repo you had access to obviously custom domain names were nice and easy to add a domain name, just point your DNS on over. One of the absolute best features about Netlify is their automatic HTTPS, every single new site that gets put up is automatically going to have an SSL certificate, no clicks necessary. How cool is that? In this time and era, where everyone says, Hey, you need an SSL, and then you say, dang, working with SSL is is no fun. Well, they make it as easy as possible. No excuses. If you need an SSL certificate, this is the way to do it here on Netlify. Nice and easy. Not to mention, there's also some amazing AB testing stuff that just head to netlify.com forward slash syntax seriously, sign up, check it out, you are not going to regret that time spend because seriously, it's actually minimal time spent. And the results are just awesome. So Netlify is my new favorite host. They have been they have been since I very very first tried it. And I'm not going back. I'm such I'm sold on Netlify. It's one of my favorite platforms here. So this tasty treat is sponsored by Netlify. Again, netlify.com forward slash syntax or tweeted them let them know about Netlify. This episode today is all about refactoring in that refactoring is something that well we as developers have to face well all the time as you grow as a developer, or one of the things about refactoring is that when you look at code you wrote two years ago, you'll often want to hide from it. And refactoring code is the best way to learn a little bit about all of the stuff you have learned. So Wes, do you want to take a stab at what refactoring is? Exactly? - -5 -00:04:57,570 --> 00:06:06,900 -Wes Bos: Yeah, so often you'll have a code base Your code works. But it's not the best code you've ever written. It's not the most flexible code you've ever written, maybe if you want to add stuff to your codebase, and it can't be done because of your existing code base, maybe it's using some out of date techniques, you've got just a whole bunch of reasons why you have a code base. And it's stopping you from being the best developer you can be whether it's just enjoying the code and working with it, or whether it's implementing new technical features that that's kind of a one on one part of what technical debt is, is where you've got this old code. And it's really stopping you from moving as fast as you could, could like to. So refactoring just takes code that you've written, and then you just rewrite that code to do the exact same thing on the front end. So your users might not necessarily see any sort of improvement on the front end. Unless you've refactor for speed sake, they may see sort of like a faster response times or something like that. But then that's ideal, because your application still does the exact same thing. But you know, and you can sleep well at night, knowing the code behind that is much more well written. Yeah, - -6 -00:06:06,900 --> 00:07:30,060 -Scott Tolinski: yeah, I think that's a, those are great points. Because there's so many times when there's aspects of your project that you don't want to touch because of it's a mess, and I want to work on this. It's a mess, right? I don't want to do this. But if you were to take that time to refactor it, working on it from that point forward gets a lot a lot nicer. And I think the most important thing about this is like people maybe spend too much time trying to write the perfect code, right? Right out of the gate, when like, really, if you're writing code to make it work, you can always improve your code afterwards. And we're going to get into some tips about how exactly to do that. But the first code that you write is often just going to be the first way that your brain goes to solve a problem. And how many times in life is the first way you've ever figured something out the best way? I mean, not often, right. So so many times you solve something that seems like the best way at the time, and then looking back at it, and like a month later, maybe you have some new skills under your belt, maybe you've had some time to let it marinate a little bit, it's you know, cooking in, in the little marination going and then all of a sudden, you're like, Oh, I could be doing this this way. And then therefore you can improve that code. And maybe the second time you write it, it's going to be much better, maybe it's not even going to be perfect, then and you got to rewrite it again, eventually. But refactoring is really just taking these ideas that you had initially, and then reworking them to be just better for a whole host of reasons which we'll get into. - -7 -00:07:30,480 --> 00:08:21,870 -Wes Bos: Let's talk a little bit about the benefits to refactoring I think one of the biggest benefits, there's a couple of we'll go through one of the biggest ones is that you you keep part of the code base in your head. So it can happen when you have a large application, there's going to be parts of your code base that you haven't touched in a year, two years, five years, possibly. And while it's good to have their they always been working, you likely have tests running against that code base, that's good. But it's kind of scary when there are parts of your code base where you don't really understand how it works or why it works or what's going on there. And I find it really helpful, at least in my own codebase to go to pieces of the application that I haven't touched in a while and just give them a quick scan over maybe refactor a couple of the functions that are in there, just so I understand. Okay, this is the process to to how this works. And you have a little bit of headspace on that area of your application. - -8 -00:08:22,050 --> 00:09:42,510 -Scott Tolinski: Yeah, I bet without even looking, you could probably tell me, what areas of your codebase are the areas that are most scary to you right now. Because I think we all have these areas that haven't been touched in various points. And maybe maybe that's just it, maybe you just haven't gone over with your more modern learning or understanding of things. And maybe you can go ahead and hit those up and make that a better experience for you. So that's really some of the benefits. Another thing is keeping your code up to date with new standards. I mean, we we as react developers have experienced like several changes in how you write react from the initial react dot create class using mix ins, and all those things to now using the class syntax, so the functional state stateless components, and now using even more new things, like you know, state is equal to rather than throwing it in your constructor, I mean, there's all sorts of little things and that change in how we write our code all the time. And refactoring allows your code to stay up to date, there's nothing worse than opening up a react project that you haven't touched in a while and still seeing that react create class and then have to shift your brain over that way after not using that for so long. So by keeping this code up to date refactoring your frequently and and making sure your your code is modern, is going to make it working on it just that much better. Really. - -9 -00:09:42,650 --> 00:11:10,950 -Wes Bos: Actually a perfect example of that is my own code base is getting refactored right now the specifically the player is getting refactored because I'm pretty happy with the player. But there's a couple little annoying things where I want to do a little bit better tracking of where you're at in terms of your videos. I want to do a little bit better tracking in terms of displaying that I want to do. There's a bug right now, but the full screen, where if you watch a video and you fullscreen it, and it flips over to the next one, it's a bug where it kicks you out. There's a bug with the Vimeo right now, where if you have Privacy Badger installed, so there's a couple of things and they've all been fixed. But before we could put implement those, what we did is we went back and refactor the entire player because it was on react dot create class, and it was working fine for about a year and a half. But then I started to get these aches and pains where I wanted to quickly add something and then I'm like, Oh, this thing is still react router to and create class. And I had to do that whole like mind switch to like, Oh, this is how that used to work and refactoring it both allowed me to get up to speed on on the entire application much more quickly. But it also allowed us to implement new features much more quickly, much more easily. And I know now that now that I've had this player for two or three years, I can I can foresee things that I would like to add in the next year or two. And then that, that's great, because I've I've thought about those in and I can sort of build it now thinking of the future. - -10 -00:11:11,040 --> 00:12:50,400 -Scott Tolinski: Yeah, I mean, when you first build these things, you're building it with the visibility of someone who's never built this. Now you're going to rebuild it with the visibility of someone who's one built it, but also used it for a period of time. And that kind of visibility opens up so many doors to you and the type of approach that you're going to be taking to use. I mean, another reason why we or another benefit you could gain from refactoring here is performance enhancement right performance on your site, maybe when you wrote this code is fine. Like here, here's a perfect example. Okay, I had one of my resolvers. And one of my one of my graph, qL, resolvers, that was checking hitting the database every single time it was loading a user role in for let's say, if I was, like, I had a, like a tutorial listing, and I was importing the user, it was doing a separate database query to grab that user's role every single time, even though on the server side, I already had the up to date user object being already pulled from the database once. So Apollo engine opened my eyes to see, hey, I was doing an extra database call there. And therefore, I could rewrite that code where I already had access to the user to not do that extra database call, just grab the user information, apply any sort of permission stuff I need directly on it there and then return and so therefore, again, the user is not seeing any change there. In fact, the code change was pretty minimal itself. But I did get some extra performance because it was not hitting the database when it didn't need to. And therefore, again, just a really nice little benefit that you can get from really looking at your code a second time. - -11 -00:12:50,939 --> 00:14:15,570 -Wes Bos: Let's switch over to a when to refactor. And I think I mean, you might be a little bit different on this, I tend to leave my stuff pretty long. Because generally my stuff works. And it's not causing me any trouble. And I've been am happy with it. And I'm able to fairly easily add new things to it if I want to. However, at a certain point, like we talked about with my player, it does need to be re factored. Because it's it's starting to stop you from moving as quickly as you want or adding the features that your users are asking for. So when should you refactor? I think my biggest one is when it's stopping you from progressing, or writing the best experience you can because there's a lot to say, for writing beautiful code. But at the end of the day, convincing your boss that I'd like to spend two weeks just making my code look nicer. And not actually selling more stuff or, or the bottom line of the business. They don't necessarily always care about what the code looks like, unless it's starting to inhibit your your selling of stuff or your how quickly you can move. So I think if you have to convince your boss, hey, I would like to spend some time on this you need to bit make a bit of a better use case for the code will be better is this will help us to move much more quickly. Or this will speed up the site 300 milliseconds, and that's going to have an impact on on the bottom line. Now I know you refactor like crazy. So let's hear from you. - -12 -00:14:15,689 --> 00:16:54,450 -Scott Tolinski: Yeah, it is it's a problem. But I can afford to do that. Because Well, I work on this thing at all times, you know, nights, weekends, whatever. I work on this this site whenever I feel like it. Because Yeah, it's it's my baby. So I am constantly refactoring it. But I'm also using refactoring as a way to learn new things. So again, this is my project. I'm the core decision maker if I want to migrate the whole thing to Redux and then four months later migrated over to Apollo state link. I can do that. But it you know, that's not necessarily what I would recommend. For me. I think there there are some big things if things are getting left in the dust in your sight. And you know that next year, this thing is going to become a major Problem trying to get ahead of some of these things a little earlier. For instance, I'm not trying to necessarily migrate off of Meteor right now. But I'm trying to remove the amount of Meteor specific things in my site, because I foresee it to be a problem. So for me, it's not too difficult. I have graph qL setup, I have some legacy Meteor methods in the site. And I'm just migrating those over to graph qL a little bit as we go here. So for me, I can foresee these being a problem in the future, or something I don't want to deal with in the future. I have some stylists leftover in the site. Right now I'm just migrating it to styled components, you can do that fairly quickly by throwing it all in your global styled components, and then moving them out into component as you go. Again, I foresee some of these things being issues later down the line of whether they are support or whether they're going to confuse other people working on the site, or whether or not it's actually user bug facing issues, I actually just rewrote my player component as well, because I wanted to keep track of user duration, like how far if they completed a video or not wanted to keep track of which video they finished watching most recently, in their series, there's like so many things, and my current situation could not do any of those. So I rewrote the entire player, the entire player page, all those components. And the benefits out there was amazing. I mean, to me, that was added a major feature that my audience has been asking for for a long time. And that I didn't want to do, because I knew it was not going to be that pretty, I was gonna have to dive into some older code. So for me, I saw that that was one a code smell, I didn't want to touch it, but people had been asking for it. And it was going to be a feature that a lot of people would really enjoy. So that's what I chose to make that tip to refactor that component. I think that's really it. There's these like, sort of useless refactors that I do all the time. But there's also the big ones like that. Yeah. - -13 -00:16:55,410 --> 00:17:29,300 -Wes Bos: One other tip I have is, when you're bringing someone new on to the team, it's likely or sometimes it's a good good time to quickly refactor specific parts of your application, because there may be some legacy code in there, there may be some ideas that you don't use anymore. And it's not worth having to get that person up to space and, and get them into that headspace of the way you used to do things versus the way you do it now. And before you cut that person loose on working on on that piece of the codebase. It might be worth upgrading and refactoring. Different parts of that. Yeah, any other ideas of when to refactor? - -14 -00:17:29,490 --> 00:18:33,860 -Scott Tolinski: Yeah, here's the little one. For those of you are working in like a component based system, nice little refactor would be breaking something out into its own component, right? Maybe you're working on a component, and it started out, and this component was like, 30, lines long. And then all of a sudden, next thing, you know, the components, like 150 lines long or 200 lines long, and you're looking at this giant beast of a component. It's not difficult at that point, when your head's already in that space, breaks that stuff out, refactor it into smaller components. And you'll thank yourself later, because when you come back to this giant beast of a thing, you're going to be like, Oh, I don't want to touch this. But when it's a bunch of smaller things you're going to be much more interested in working on later on. So as you go, and you start to notice things getting a little unruly, tame that up thrown into new component, I prefer smaller components to larger components myself, so I'm never afraid. At any point, if I'm thinking to myself, hmm, is this a little bit too long? I'm always almost going to say, Okay, if I'm thinking about it being too long, it's probably too long. So let's break it up. - -15 -00:18:34,020 --> 00:18:56,360 -Wes Bos: Yeah, I think one of the best ways you can tell a good developer is if you're building something, and you find yourself going, huh, I've done this a couple times, I've written this code a couple times, or we've done the same thing over and over again, that's likely a point where you need to stop drop and refactor that part and make a separate library or node module or something that does the the piece that you're trying to do. - -16 -00:18:56,700 --> 00:19:39,320 -Scott Tolinski: Word. Okay, so we gone over a little bit of what it is when to do it. And some of the benefits, let's talk about your tips for refactoring what stuff that you like to do when you refactor. And I think the biggest thing here is one of the reasons why people always ask about like tests, like, what are the benefits of tests, let me tell you, refactoring is one of the biggest benefits of writing tests. Because if you have your entire code tested, and you know if it works or not, when you go to refactor your code, you're gonna know if the new code works as well, if you wrote good tests that is, so write your tests well in the beginning to account for what this thing needs to do. And then when you do your refactors, if your tests are passing, then that means your refactor is most likely successful. I - -17 -00:19:39,320 --> 00:21:05,430 -Wes Bos: think that's one of the best arguments for writing in depth tests. because ideally will happen is that you will refactor part of your application you'll refactor how a function specifically works. And if your tests all pass or then you know that okay, I totally, like gutted the back end out of this thing, but it's still working as intended, and that was a successful refactor. There's also a tool that that Facebook has here. It's called code mod. I've actually never used it myself, just because I don't work on a code base that is so large. But I know that Facebook itself has something like 100,000 react components, like they've got thousands of developers writing react every single day. And when react makes a breaking change, like they were to deprecate one of their methods, or they were to change from create class to extends, then they can't manually go through, like 4050 70,000 components and migrate those things. So they've created this tool, it's called code mod. And what code model do is you can write these little mods and often the reacting low release of code mod with this to upgrade your code base. And it will automatically switch over your code from one syntax to another because that's sometimes that's all the all of it is, you're moving from a callback to a promise based function, or you're moving from create class to extends, and you can just automate that through your your many, many components. I can't imagine having many thousands of components though. - -18 -00:21:06,240 --> 00:21:18,990 -Scott Tolinski: Yeah, code bound thing is interesting. I like this kind of thing. I again, I probably I would feel nervous running a code mod, but at the same time, you probably shouldn't if you wrote the mod correctly, but it's definitely a really cool little offer if - -19 -00:21:18,990 --> 00:21:20,730 -Wes Bos: you have the right tests, right? - -20 -00:21:20,810 --> 00:24:08,490 -Scott Tolinski: Yeah, if you have the right tests, right, yeah. But then also you keep in mind, your tests have to be right, you know, right. If you write bad tests, and you refactor, and all your tests are passing, you'd be like, Alright, I might go look up the site, nothing works. So yeah, so definitely, those are some some nice little things. Another tip for refactoring is use Git as an escape hatch. So you want to obviously branch off, look at previous versions of that file. If you've run into trouble, like maybe you branched off, you have this new file, you're gonna start tweaking it, and you tweak a little too hard, you tweak it so hard, you can't get back to where you were always you have the ability, it is so so easy in something like VS code, or just click that little magnifying glass in the top right, you see what the previous version of this file look like. And maybe the answers are right there about how used to have it or something like that. Or maybe perhaps you started a path and refactoring. And all of the sudden, you are too far gone, and this thing is broken, and you have to get out and go back to work. If you're doing this on some sort of main branch that you're on could become a big issue. So just use normal Git sort of branch off, do all your stuff there and then merge that code back in. So you don't run into any sort of issues where you're left with code that doesn't work, or you're stuck in any sort of way. So definitely use Git as an escape hatch for your refactoring. Another good tip for refactoring is to simply just break your code into smaller chunks. A lot of times when we're rewriting our code, you don't realize that maybe you are repeating yourself in different ways. Or maybe something could be written as a function that's reused here and there. And here. And there are a lot of times when I'm going to do a refactor, I look at my code very broadly. And I say, Hey, is there anything in here that could be broken out into a smaller reusable chunk? And is that going to help me at all in this code clarity? Is this code going to be nicer to look at? So that's one of the places that I look at first is just breaking things down into smaller chunks in for me is the one of the first places I look at when I'm looking at something unruly, is there something I can refactor out into its own thing, again, most likely what I mentioned with react components as well, but that that's pretty much it, refactor your code, write good tests. And I, to be honest, I think it's not surprising that I'm, like obsessed with refactoring my code, if you hear me talk about this stuff, and I have the ability to do so I understand if you don't, but I really think it is important to to relook at code that you wrote in the past and see if you can do it better. I've looked at stuff that oh, you know, it was 150 lines to do something I could do in a couple of lines, just because I had new abilities that I didn't have before or a new understanding about how to do things. So it's important to look at your own old code, if it's going to become code that you're currently working on. - -21 -00:24:08,820 --> 00:24:25,470 -Wes Bos: That's my favorite when you your git commit is like a deleted 100 lines added seven. So good. Like, I just totally rewrote this thing so much simpler, it's gonna be so much easier to maintain. I dropped all of these additional dependencies and you just feel so much better about the codebase in general. - -22 -00:24:25,650 --> 00:24:37,260 -Scott Tolinski: Yeah. When I really discovered MAP Reduce and filter and all those things. I had so many areas of my sights that the code just got better functional programming in general. But yeah, big big fan. - -23 -00:24:37,590 --> 00:24:50,220 -Wes Bos: Yeah, that's, that's funny, actually, it's one of the things I keep hearing over and over people tweet tweet me being like, Hey, thanks for the episode. We did that episode. Let me find the episode number array methods, JavaScript array methods. - -24 -00:24:50,220 --> 00:24:52,110 -Scott Tolinski: It was Episode 43 - -25 -00:24:52,110 --> 00:25:26,370 -Wes Bos: JavaScript array methods. That was like one of the very impactful episodes because people kept tweeting me like screaming shots of code they refactor where they had something that was so much more complicated. And once you really understand all of how to use all the array and object methods, I think your codebase will get them a lot cleaner. Absolutely. So check that one out. If you're interested in more like more of the how tos, this is sort of ideas of react refactoring. But if you want more like, nuts and bolts of refactoring, specifically JavaScript, check that one out word. - -26 -00:25:26,400 --> 00:25:36,660 -Scott Tolinski: Yeah, absolutely. So I hope you enjoyed this hasty treat. We're gonna be doing these every Monday in case you haven't noticed by now. This is what the fourth hasty treat that we've done so far. - -27 -00:25:37,380 --> 00:25:37,920 -Wes Bos: Like that. Yeah. - -28 -00:25:37,920 --> 00:26:01,920 -Scott Tolinski: And we now have a fancy new intro. So yeah, expect these every Monday we're going to be doing a little hasty treats on all sorts of topics. If there's a topic in particular you think would be perfectly suited for a 20 minute 30 minute little bite size video or not video, his podcast here, hit us up, let us know kind of things you want to see. We're always looking for new ideas as well. So that's it. I don't have anything else. Do you have anything else? I - -29 -00:26:01,920 --> 00:26:23,340 -Wes Bos: think that's it. I'm just looking at the potluck questions that we got here and I just saw one from JC Hiatt. Explain what packaging yarn lock files are, when Why were they introduced? What do they do blah, blah, blah, blah, blah, all that so I think that's gonna make that's not even a potluck episode that's going to be upgraded to a hasty treat. We could do a whole show on that. - -30 -00:26:23,370 --> 00:26:27,660 -Scott Tolinski: Yeah, JC is upgrading our bodies and we're about to upgrade everyone's mind. - -31 -00:26:28,890 --> 00:26:32,790 -Wes Bos: Wicked. Alright, I think that's it for today. Thanks so much for tuning in. And we'll catch you next time - -32 -00:26:32,910 --> 00:26:45,270 -Scott Tolinski: later as head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax6.srt b/transcripts/Syntax6.srt deleted file mode 100644 index 3faf6e804..000000000 --- a/transcripts/Syntax6.srt +++ /dev/null @@ -1,520 +0,0 @@ -1 -00:00:02,820 --> 00:00:08,099 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:11,130 --> 00:00:45,780 -Wes Bos: Welcome to syntax. Today we are talking about accepting money on the internet. We're sponsored today by Freshbooks. We talked about Freshbooks in the last episode, and well look who came over to sponsor an episode for us, which is pretty cool. I'm going to talk a little bit more about Freshbooks partway through the episode. But for now, all you have to know is that they are an awesome cloud accounting software. And you can get 30 day free trial over at freshbooks comm forward slash syntax and enter in syntax in the How did you hear about us section? Welcome, Scott. How you doing? - -3 -00:00:46,050 --> 00:00:47,730 -Scott Tolinski: Doing? super good. How are you? - -4 -00:00:48,540 --> 00:00:51,480 -Wes Bos: Pretty good, pretty good. What are you working on these days? - -5 -00:00:52,050 --> 00:01:29,880 -Scott Tolinski: A whole bunch of stuff, recording some, some random new series, right. So like, there's some series that didn't want us to do for a long time, like go over some code pens that are popular, or maybe making waves or people are talking about and just sort of breakdown how they're done? None. They don't have to be like super tough ones. But like, just interesting for various reasons. Like the one I did for the first video was a really simple just like card flipping animation, but because of use of like perspective, and the use of z transforms. It made it really interesting. And the code wasn't complex or difficult at all. But it was nice to sort of just like highlight what's going on in that stuff. - -6 -00:01:30,780 --> 00:01:31,410 -Wes Bos: Yeah, yeah. - -7 -00:01:31,440 --> 00:02:04,980 -Scott Tolinski: Yeah. So I'm also recording a couple of new series and recording a free series on Gatsby right now, that's going to be out soon, I actually have three episodes that are just waiting to be published. So probably do that right after we're done recording. And then good. Yeah. And if you saw figmas, big release of their, like 2.0 package, or like prototyping features and stuff in there, you may have noticed a familiar voice on the video tutorials. So I got to do some videos for figma. And it was really super cool. And hopefully I get to do a few more. - -8 -00:02:05,850 --> 00:02:18,440 -Wes Bos: That's pretty cool. I've still yet to for those who didn't hear the last time we talked about figma. It's sort of like an online editor sort of replacement for sketch, which is pretty neat. I'm excited to try it out. Yeah, - -9 -00:02:18,470 --> 00:02:22,560 -Scott Tolinski: a lot of really, really cool features. Yeah, so what do you what do you what are you working on? - -10 -00:02:22,710 --> 00:03:35,820 -Wes Bos: I am today is actually a holiday I didn't realize part of working for yourself, is that you just take vacation whenever you want. And then I totally forgot when we scheduled this recording that today is a holiday but totally fine. Because I'm heading off on vacation next week. I'm working on graph QL. Mostly last couple of weeks have been like super heavy into understanding reading the whole graph qL spec, understanding what it is and how everything works. And then just the last a week or two I've been diving into and building quite a bit of stuff with Apollo, which is kind of neat, because like graph qL is the sort of like graph qL is like the the spec the standard. And then you have a graph qL server, which I'm still investigating a couple different server possibilities. But in order to interface with the graph, qL server, there's this thing called Apollo, which is from the meteor Meteor folks where you can it makes just fetching data, performing mutations, storing all of your data in a single Redux store makes it all really, really easy. And it's been like, I just been surprised at how like really nice it is to work with. So pretty happy about that. - -11 -00:03:35,880 --> 00:03:48,690 -Scott Tolinski: Yeah. If you were to see my computer right now, I probably have like, six or seven tabs open between Apollo and graph qL stuff just because it's so much there right now. And uh, it's really, really cool tech. - -12 -00:03:49,110 --> 00:03:58,980 -Wes Bos: Yeah, it seems to be really heating up. It's it's all I've been been hearing about for the last month or two. Yes, it's been around for a while now. But it seems like people are starting to really get into it. - -13 -00:03:59,010 --> 00:03:59,910 -Unknown: So yeah, - -14 -00:03:59,910 --> 00:04:02,010 -Wes Bos: I thought you should see some stuff from me on that. - -15 -00:04:02,970 --> 00:04:25,740 -Scott Tolinski: Yeah, yeah. I think some of the The reason it's hitting up is just that there's more technology around it right. Like you said graph qL spec is has been there but now you know Paulo's getting, you know, hired version, it's getting a little bit more mature here. And there's things like graph cool and all that stuff that you've mentioned before. So yeah, really? Yeah. So it's, - -16 -00:04:25,920 --> 00:04:54,770 -Wes Bos: it's finally getting like, I think approachable for us mortals. Which Yeah, it's funny cuz I initially thought that it was a bit hard to get up and running. But now, both with graph cool and Apollo, I feel like I feel like that's it. Whereas when I was initially learning some react stuff, I was like, really that much? And now I'm on the flip side where like, that's it. Oh, wow. It's it. We talked about it earlier. It's like it's a little bit of magic, which I definitely like - -17 -00:04:54,870 --> 00:05:12,020 -Scott Tolinski: Yeah, yeah, I'm looking to integrate into my stack as well. But there is There's some very, I mean, obviously, because it's written by the people behind Meteor that the using Apollo in Meteor is actually like, is really nice. Just trying to find the time to make that happen. - -18 -00:05:12,770 --> 00:06:08,370 -Wes Bos: Yeah, yeah, totally. Yeah. Cool. So today, we're gonna talk about something we both have quite a bit of experience with and that is accepting money on the internet, when you want somebody to buy something from you. How do you do that? What are the different services that you can use? What are the different code libraries we can use? What are some of the things you have to know about? I'm from Canada, I believe in us. So I've got a lot of like, sort of gotchas when you're at from an international customer. So there's really a lot to sort of learn about how to best accept money on the internet, and not get hosed on fees along the way, as well as make sure that you provide a really nice checkout experience for your users. So obviously, I accept credit card and PayPal on all of my course websites. What about you, Scott, what do you use? And - -19 -00:06:08,460 --> 00:06:23,580 -Scott Tolinski: yeah, so I'm also just accepting credit card and PayPal, or Initially, it was just credit card, but I was getting a lot of pushback on not having PayPal. So I did add PayPal. You know, for reasons that we'll get into. It was, - -20 -00:06:23,940 --> 00:06:27,750 -Wes Bos: yes, always. I've got some hilarious notes here on on paypal. - -21 -00:06:27,780 --> 00:06:33,150 -Scott Tolinski: Yeah, yeah, I know. It's it's total wreck. But But yeah, so also doing both of those. - -22 -00:06:34,050 --> 00:08:19,650 -Wes Bos: Cool. Alright, well, let's start with the sort of the three big services that make it easy to accept money on the internet are the two that make it easy, and the one that makes your life miserable. So there is stripe, which is what's called like a payment processor, or a payment gateway, which stripe has taken all of the complexity of accepting credit cards on the internet and debit cards. And they're actually they're moving into some more stuff right now. But it's primarily credit cards. And the way that it works is that you accept the credit card on your actual website. And stripe will take care of handling the number checking the checking if it's fraud, checking, if it's cracked, one of the CVC number, all of the sort of heavy lifting behind accepting a credit card on your, your website, stripe will do that all for you. And then you just have to focus on building your app and not have to get into the nitty gritty of actually doing that. So stripe is what I use primarily for all of my transactions, it is probably one of the best services I've ever worked with. Everything from how easy it is, from a developer perspective, I think that it's been built as a developer first tool, because it's not really like it's not really a consumer application. It's just a bunch of API's, and then a dashboard that you can see all of your data coming in. Yeah. And when I when I set out to implement it in my app, I was like, wow, this is this is beautiful. It's super nice. The documentation is fantastic. All of the examples are really, really good. Yes. Really happy with stripe. - -23 -00:08:19,830 --> 00:08:54,870 -Scott Tolinski: Yeah, if I were to, like have a documentation Hall of Fame, I think stripe would be right up at the top there. And it's always been good. And it's only gotten better. You know, it's not like it was good. And has, you know, stayed the same. they've improved in so many ways over time. That just made working with stripe way, way, way, way better than others, really. But yeah, I mean, overall, overall stripe is is the way to do it for that. I mean, the interface, the developer experience, everything is just been just pretty much a dream after working with others, right? - -24 -00:08:55,620 --> 00:09:33,120 -Wes Bos: Yeah, yeah, exactly. So we said credit cards. It also does accept debit cards, which is pretty big for for me at least I have a fairly large international audience who doesn't necessarily have credit card. So they do a lot of debit cards, a lot of what's called a Payoneer, prepaid, which is sort of like, like a rechargeable credit card that's pretty popular in India, a couple other places around the world. They do acth transfers, which I've actually haven't done, I've got a few requests, but as far as I know, that's sort of like a direct withdrawal right from your bank account. Do you do any of that Scott? - -25 -00:09:33,149 --> 00:09:41,519 -Scott Tolinski: I have it. I have it configured to do that. But I have not accepted any transactions in that way. So yeah, well, yeah, - -26 -00:09:41,580 --> 00:11:17,460 -Wes Bos: I would like to turn it on. Eventually I would like to turn absolutely everything and we'll we'll talk about why I don't have all of those things turned on. Just right now. I'm on the flip side. So stripe is the best piece of software in the world. And then on the flip side, there is this PayPal, which I like to gripe about PayPal, everybody gripes about PayPal. And usually what happens when I gripe about PayPal is people like, why don't you just use stripe. But the thing about PayPal and stripe is that they're not total replacements. Obviously PayPal will accept a credit card. But the big thing is that is that lots of people have a PayPal account with money loaded into it, what I found I used to not accept PayPal because it's so hard to integrate into your actual your stack, but people have sort of like fun money or off the grid money or money that's not part of the the daily budget in their household. And they're able to use that for buying things like training courses. So that was huge for me, as well as PayPal is big all across the world for people who don't necessarily have credit card debit card, most people will have a PayPal account that they can use to to buy your courses. So when I integrated PayPal into it, it was my sales went up quite a bit. I used to manually do it. And when I when I integrated it myself, quite a few people started buying it just because it was available to them. - -27 -00:11:17,490 --> 00:11:59,340 -Scott Tolinski: Yeah, I had the same experience in terms of sales going up or whatever finding that people just, you know, they they can't use stripe, for whatever reason. But they have this this paypal account, and the demand was so huge for just that adding it was was a big boost to the site overall. But it was it sort of made it worth the pain of integrating. Yeah. And well, I mean, we'll talk about that that pain, I guess in later on. But really, it's it's just like a matter of developer experience, right between stripe and PayPal. You do it, you add a PayPal you get it working. And then yeah, that's it, you know? - -28 -00:11:59,519 --> 00:13:06,269 -Wes Bos: Yeah. So maybe we should talk right now about like, Why don't people like PayPal? And there's a lot of reasons. First of all, they're huge monopoly, they take a much larger cut, then then a lot of the other the processors, especially for me, who's International, they seem to thing Yeah, I think it adds up to about 4% of, of each transaction when somebody uses PayPal, they have been known to just randomly freeze funds. I, I still remember the, the call I got when I launched my react series. It was just blowing up. And I got my phone rings, and I look and it says PayPal. f What are they gonna do? And I picked up the phone. I was like, hello. And he's like, Don't worry, we're not seizing your funds. First thing he said was like, Why are you calling? No. And it was, it was it was thankfully it was them being like, hey, like, like, what's going on? What are you doing? My obviously my sales had spiked. Yeah, but they - -29 -00:13:06,299 --> 00:13:45,899 -Scott Tolinski: they confirmed it. And it was it was always good. But I I try to keep every dollar out of my paypal account, because there's so many horror stories of them just locking up everybody's money. There is an even like, sort of shady stuff with maybe damaged goods and returns and basically money sort of floating in the nebula, sort of Yeah, where those refunds are actually going or whatever. I mean, you know, yeah, I think PayPal is one of those companies that it It represents this this big, monolithic thing that's been around forever. And it's a necessary necessary evil. Yeah. Yeah. - -30 -00:13:45,929 --> 00:15:03,330 -Wes Bos: Yeah. It's, I mean, it's a hard problem to solve. Like, I also wouldn't want to, to work there. Because not, not from like a developer standpoint. But like, I wouldn't want to be PayPal trying to solve all these problems, because right, they have to deal with fraud and international government rules and all that. And that's what, that's what stripe does so well is that stripe makes it seem so easy. But I know behind the scenes, that stripe is doing some serious heavy lifting, to make it easy for us in the consumer. Whereas Pay Pal sort of drops all that complexity on your lap, whether it's in complex fees, or in terms of like how to actually integrate PayPal into your, your stack is incredibly complex. There's probably 70 different names for different libraries, different ways that you can there's like Pay Pal banana, and pay pal Deluxe, and oh, hey, pal, pepperoni. And like there's like and then by each country, they change the names of them. So if you ever want to look for documentation, it's just a black hole of documentation of examples that don't work anymore of outdated libraries. And it's just a very, very poor developer experience. - -31 -00:15:03,360 --> 00:15:53,549 -Scott Tolinski: That's the hardest part about about working with PayPal is that when you don't know the name of anything that you're actually trying to do, like, if I'm just trying to, you know, if I'm trying to integrate just a simple, you know, payment button that sends into PayPal comes back through, you know, URL or something like that. What services that they don't they don't make it obvious at all based on their naming. They don't. Yeah, like you said, there's just 100 different names for things. And the developer spirit experience couldn't be any worse. I know, we both had the same experience of fully integrating like, I brought in like a, I thought I had everything totally good. And I'm getting some totally ambiguous error back when I hit their API. And it turns out, yeah, oh, all the doc, all the docs are out of date. And we just got a new version This week, but we didn't update any of the docs. So - -32 -00:15:53,759 --> 00:16:25,500 -Wes Bos: yeah, then they don't version their API either. So I just had, like, I what was happening is that they just changed the JSON response that came back from the server randomly, right? All sudden, I had, actually I didn't have failing, I had the opposite, which was the ability to for people to buy a course and then sign up multiple times. Which luckily never happened. But it's it was totally, totally doable. - -33 -00:16:25,769 --> 00:16:51,779 -Scott Tolinski: Yes. Is nuts. I don't know. I I'm optimistic that they've shown signs of improving it. But like, Yeah, I don't know. It's like a giant tangled web of wires, right. Like, it's, it's, there's so much legacy stuff. It's so large that untangling this, like giant rat's nest of, I don't know, issues that they have over there. Yeah, I feel like it's, - -34 -00:16:51,960 --> 00:17:33,540 -Wes Bos: it's definitely hard. Like I talked to Kent C. Dodds, who's fairly popular in JavaScript, he works at PayPal, and he always is so sad to hear that I'm frustrated, which is amazing to hear. Like, there's obviously lots of really good people out, oh, yeah, you work there. I don't mean to demean your work at all. I'm sure you're doing really good stuff, especially the interface of PayPal is getting really good. So the back end of managing used to be like, click something, sit and wait for three minutes while it loads. And then like random errors, or just give you like, Times New Roman error on a white screen. So that seems to be going away. And the inner that I think they're building a lot of react interfaces, which is cool. - -35 -00:17:33,540 --> 00:18:16,260 -Scott Tolinski: I just think it's going to take a long time, then the native apps really nice, too. Yeah, I found the native app experience to be better than the web experience overall. But yeah, no, I think they're they're definitely making improvements and a lot of great ways. So we'll see where that heads I would love a better developer experience, or at least a more reliable one. And then, yeah, I'd be I'd be, because I've been putting off integrating my subscription service into PayPal. I have subscriptions, and they're all done through stripe. And so I get a lot of people asking for subscriptions through PayPal, and I just don't know, I haven't decided if I want to make that bullet yet. Right. Normal payments. Yeah. - -36 -00:18:16,850 --> 00:20:51,930 -Wes Bos: So at this point, you're probably screaming at the your podcast player being like, why don't you just use the third one, which is Braintree. So PayPal went out and just bought an entire sort of a processing company like stripe, which is called Braintree. And it does a lot of the similar the same things to to what stripe does. But what the one huge benefit to Braintree is that it has PayPal baked in, meaning that if you're accepting credit card or PayPal, it doesn't really matter. Because you just use one single set of JavaScript APIs to interact with Braintree. And then it gives it gives all of that for you. So I get this all the time. A lot of people are like, why don't you use use Braintree? And I wanted to answer and maybe I'll point people to this podcast because I get this question all the time. It seems really good. The API's are really, really nice. I've actually integrated it into my entire stack already. The downside to it from my side is actually what's called a red tape, which means that in Canada, Braintree is actually just sits on top of another credit card processing company. And you need to go through their entire vetting process to become a merchant with that underlying credit card company. So when I initially applied for it, they would they first asked me for like the actual website that it was going to go on to as well as your terms of service and your refund policy and all of the stuff which it didn't have because the website wasn't launched. Yet, so there was no way for me to launch with Braintree because they were telling me you needed the website up first. And then once the website is up in Canada, at least this is not in the US I know it's much different. It's about a three to four week, wait for them to actually approve you. And that is per domain name. So the way that I sell my courses is that I launch a new domain name for every single course. And they need to do this one month long approval for every single domain name that you you deploy your stuff do so it just wasn't an option at the end of the day. And the hilarious thing is that Do you remember I don't know if you remember this, but remember back in the day with credit cards where they would put your credit card on this piece of carbon copy paper? Yeah, - -37 -00:20:51,930 --> 00:20:53,550 -Scott Tolinski: absolutely. Yeah. - -38 -00:20:53,550 --> 00:21:44,790 -Wes Bos: They sent me those nice. And then they sent me like a, we accept Visa and MasterCard sticker that you put in your window, like say they obviously had run me through the murders home. Yeah, like the merchant application, which is again, another thing that stripe does is that they they understand doing business on the internet. And they know they do not need a window sticker and carbon copy. Right? So I don't know, it's it was just a bit of a headache to go through. I really wish that Braintree would work. Because the one thing that they do is they give you the only way I've ever found possible is that they do the PayPal checkout in place, meaning that you don't have to like go to paypal and come back to the website, you can just do a little pop up in line without having to ever leave the website. - -39 -00:21:45,110 --> 00:22:33,570 -Scott Tolinski: Yeah, I think what I was initially investigating, I was just a little confused about all of again, all of paypals offerings and where Braintree fit into that. It looks like I'm on their site. Now it looks like I think they've clarified things quite a bit more. I don't know if the the site before had this much. I don't know explanation or clarity of the differences of their different products. But either way, it looks a lot. It looks a lot nicer in terms of explanation I might have to investigate. Moving to Braintree. I don't know I haven't had that much investigation about it because I got set up with stripe, and I haven't wanted to change it. But if this can get me a little bit easier, PayPal integration and maintain, you know, custom credit card forums, all that stuff. Be cool with this. - -40 -00:22:34,920 --> 00:22:46,260 -Wes Bos: That I would do it in a heartbeat because I don't like having to maintain two sets of API's one for stripe, and one for PayPal, like my killer feature for stripe would be accept PayPal. - -41 -00:22:46,260 --> 00:22:48,960 -Scott Tolinski: Yeah, right. Exactly. Absolutely. - -42 -00:22:48,989 --> 00:23:05,400 -Wes Bos: Which I hope maybe one day they will do I don't know if that's possible or not. But if you have subscriptions, you just have one set of subscriptions with Braintree. But again, that doesn't help you. You already have subscriptions in stripe, though. I know. Right? Right. - -43 -00:23:05,790 --> 00:23:11,850 -Scott Tolinski: Yeah, that's a great. That just adds a little bit more. So - -44 -00:23:11,970 --> 00:23:36,180 -Wes Bos: I as you can tell, I'm, there's pros and cons to all of the different ones. And it's it's not easy. And at the end of the day, it's definitely worth putting in the work to making all of them work. Just because it will help increase your sales at the end of the day. Like I could complain all I want but integrating PayPal. But if people are paying me more money, then I have to kind of be quiet, - -45 -00:23:36,180 --> 00:23:38,100 -Scott Tolinski: right? Absolutely. Yeah, yeah. - -46 -00:23:39,450 --> 00:23:56,640 -Wes Bos: So um, let's talk about the coding side. After you've selected which services you'd like to go to? How do you start accepting credit cards? Like does stripe give you something? Can you build your own? How does that work? Maybe you want to take a stab at that. - -47 -00:23:56,670 --> 00:25:23,970 -Scott Tolinski: Yeah, so like, there's several different ways you can go with any of this stuff, right? A lot of it PayPal or stripe, offer these sort of solutions. And that make things quite a bit easier on you. For instance, right that PayPal Express checkout is simply just a button that takes you away to PayPal, and you don't have to worry about the forums or anything like that. You simply just have to worry about catching that token on the hook coming in or the data coming in. We're stripe offers something called stripe Checkout, which is pretty much an iframe to a secured iframe that pops up and allows you to enter your information even if you've ever used a stripe checkout before the user could enter their information and it auto populate their their credit card if they wanted to save that information. So it could give you a little bit of ease of use there. But so you you have a couple options. You have these built in tools like stripe checkout or PayPal express that handle a lot for you. Or you have basically option that you can build your own checkout form and pass Secure Data along via their API's, I know stripe has their own node package, they have their own front end package, validating forms, generating tokens, that kind of stuff. So you really have the the two options, whether you want to use their built solution, or you want to do it yourself with their help kind of stuff. Yeah, exactly. And - -48 -00:25:24,029 --> 00:26:19,650 -Wes Bos: and the reason why you might not want to use stripes built in one is that if you want to customize your form in any way, so when I initially built my course site, I use the stripes built in one. And then I realized that there was no, there's no, there's no concept of coupon code built into stripe, because at the end of the day, stripe does have some nice stuff. But at the end of the day, it is just a utility, which is a credit card processor. So if you want to do coupons, stripe doesn't have that you have to, you have to build your own coupon solution, which is generally something that your shopping cart will actually do. So I had to move my note mine over to mine actually looks a lot like the stripe checkout. But it's actually it's a custom solution. And it has doing custom fields in there. And as well as things for for coupons. - -49 -00:26:19,769 --> 00:26:50,550 -Scott Tolinski: Yeah, see, I'm actually I'm doing coupons and stripe Checkout, but I'm doing the coupon stuff all within my own, like car to window. So it's like you have your cart. That's where you can enter your coupon. Ah, yes. Is that price along through the stripe checkout? Which obviously, it isn't as elegant as just having your own forum where you're sending that data all in one, one blast. Yeah, yeah. So that I mean that it is possible. But it does take a little bit different of a solution to do that, right? - -50 -00:26:50,580 --> 00:27:08,250 -Wes Bos: Yeah, exactly. I don't, the thing about me is that I never I always wanted it to be like a one page thing, or I don't want to click someone to click off to a shopping cart. I don't even have a shopping cart. I just have like a form where you can put in a coupon code, and it will update all of that stuff for you. - -51 -00:27:08,280 --> 00:27:10,230 -Scott Tolinski: Yeah, yeah, absolutely. Yeah. - -52 -00:27:11,790 --> 00:27:29,400 -Wes Bos: I wanted to talk and just explain real quickly how like the tokens work because sometimes people aren't like, like, what do you do when someone puts in their credit card on your website like Yikes, you don't want to touch that, like, the possibilities of that our stuff could go really wrong - -53 -00:27:29,430 --> 00:27:30,960 -Unknown: theory works. - -54 -00:27:31,080 --> 00:28:47,460 -Wes Bos: It's scary. Exactly. So the way that it works is that you have sort of two libraries when dealing with with stripe or PayPal, you have a client side library, like a stripe JavaScript library. And what happens is, when somebody submits your form, you take their billing address and their credit card and you send all of that over to stripe. And stripe will then check if the credit card is good, and all that stuff, and then it'll send to you back what's called a token, and that token, will you just take that token, and not the credit card data, you take that to your own server side to actually finalize the transaction, because you can't do this 100% client side, you must have some sort of server side to actually to finalize that transaction. So you have this token, which is is sort of like an IOU, the process hasn't been done yet. But you, you have sort of like pre qualified the the credit card and then on your server, you go ahead and push through that charge with the token, not your credit card number. And then the token will you'll give you information about whether it failed or, or worked or in how much it was foreign and all that good information. - -55 -00:28:47,520 --> 00:29:28,410 -Scott Tolinski: Yeah, and this way their their credit cards never hitting your server, you typically with stripe, you get an object with some information, like the last four digits and stuff like that, obviously, for just display purposes. But you're really like, you know, you don't want to touch or you don't want to own their their credit card information at any given point. Like that's a huge sign that that something's wrong if if their credit card information on up the skated in some way is coming into your server. So right, so you hit server, you get that token, that token represents all of that sensitive data that you don't want to touch. And can can be handled that way through that reference from that point forward. - -56 -00:29:29,280 --> 00:30:20,610 -Wes Bos: Exactly. And you even want it like you want to be really careful with this stuff. Because you don't want to mess around with credit cards at all. And one little tip I can give you is that do not put a name attribute on your credit card input field. And the reason behind that is because if if your form is submitted with JavaScript being broken, it should not eat like if if you don't intercept the Submit Request on a form element, then it's just going to submit it via a get request. to your server, and if that is there, it's going to pass along any data, any inputs with the name attribute. And if the credit card is in there, the your credit card is going to go into the URL bar, or it's going to be put into your server logs. Or it could go, it could leak out anywhere, which is again, not something you ever want to have happen, right? And credit cards. - -57 -00:30:20,670 --> 00:31:29,250 -Scott Tolinski: Yeah. And then, you know, you want to make sure you're familiar with the PCI compliance Guide, which is really just the Payment Card Industry data security standard. So like, you're gonna want to just google PCI compliance, you can basically get the frequently asked questions or guides on on what exactly that means. But you're gonna want to be in constant. I mean, obviously, a lot of these libraries like stripe Checkout, and stuff like that PayPal Express make it way easier to stay in PCI compliance. But I remember, you know, that back in the day, I mean, if you're coding your own own forms up here, and stuff like that, you just have to be very, very, very cognizant about where that data is going. Also secure the heck out of everything SSL, obviously, make sure that you're not accepting payment, or even have like, forms inputs and stuff like that without an SSL. So yeah, it's it's a big responsibility, taking care of someone else's data here, and especially some sensitive information. So you want to make sure you're following the guidelines really, really closely. - -58 -00:31:29,640 --> 00:31:45,090 -Wes Bos: Yeah. Exactly. In SSL everywhere. Whether you're connecting to sending an email, even if you have CloudFlare. Make sure that that connection between CloudFlare and your servers SSL, absolutely. Everything should be locked down tight. - -59 -00:31:45,420 --> 00:31:52,920 -Scott Tolinski: And it's easy now with Let's Encrypt. Let's Encrypt. Yeah. So no, it no excuses. - -60 -00:31:55,440 --> 00:32:31,650 -Wes Bos: One other little tip I have here is that look up the html5 autocomplete spec. Because you can obviously you can give names to your inputs, like name, equals first name, name equals last name, name equals Street. But you can look up the proper autocomplete spec and attach those attributes to your inputs. And that will give you the best case, autocomplete because I do know that I do this myself. If my like, if I'm like, somewhere without my wallet, or somewhere where I don't feel like logging into my LastPass and the autocomplete for my credit card doesn't work. I'll often just be like, - -61 -00:32:32,130 --> 00:32:36,860 -Scott Tolinski: yeah, whatever I'll do I really want to like go find my credit card right now. Yeah, - -62 -00:32:36,900 --> 00:32:41,550 -Wes Bos: I hate it when it doesn't autofill the three digits on the back of the card. - -63 -00:32:41,969 --> 00:33:06,030 -Scott Tolinski: Yeah, I know, maybe I might need to write my own form. Now, because stripe checkout disables autocomplete, unless you like enter your email there. Like unless you're entering your email and using your stripe account, when you hit the actual credit card form, it does, or at least it does on desktop. I don't know about mobile, but it doesn't disturb disable credit card, autocomplete, so might be a good reason to code your own. - -64 -00:33:06,989 --> 00:33:30,300 -Wes Bos: It's pretty sweet. I'm actually looking at recoding my entire checkout form, because there's all kinds of new stuff like Chrome now has like web payments or something like that in Safari and mobile Safari have Apple Pay. Mm hmm. So like, I really want to like build some sort of beast that's going to be able to handle stripe, PayPal, all of these different - -65 -00:33:30,719 --> 00:33:34,260 -Scott Tolinski: stripe can handle auto pay. No. Apple, yes. - -66 -00:33:34,260 --> 00:33:38,100 -Wes Bos: Yeah, Apple. But if you use the stripe Checkout, right? - -67 -00:33:38,130 --> 00:33:39,270 -Scott Tolinski: Yeah. Yeah. Right. - -68 -00:33:39,300 --> 00:33:48,540 -Wes Bos: Yeah. That's, that's a downside to coding your own as you can you just flip it on if you are using stripes. Whereas for me, I have to like code a custom. - -69 -00:33:48,960 --> 00:34:07,610 -Scott Tolinski: Yeah. And handler is something I've been we should connect on a code level later because that is something that I've been looking into as well with that PayPal subscription stuff is just like really beefing my my whole thing up a little bit, and maybe integrating a little bit more tightly into the site. So yeah, we'll have to chat in just a little bit. - -70 -00:34:08,310 --> 00:35:45,929 -Wes Bos: Cool. Yeah, totally. Alright, so our quick stop for a sponsor or sponsor is Freshbooks, which is cloud accounting software. I've actually been a Freshbooks user myself or laterano, maybe seven years now. It's actually a it was a local startup. I don't think it's a startup anymore. They're pretty big company, here from Toronto. And I really, really like fresh books for running my own business on it, because obviously, it does invoicing. But it has a whole bunch of stuff that makes accounting time a little bit easier. So what I do with fresh books is that I put all of my invoices to the clients to charging for any consulting that I do to any reimbursements I need to do. I put all my expenses in there, all of my HST stuff is automatically done. And at the end of the year, when accounting time comes, I hate doing it. Anything accounting, and I have a really good accountant for that. But I just export absolutely everything from that. And my accountant loves it. He said, when I first met with him, he's like, oh, you're on Freshbooks. That's a really, really good. So I definitely recommend using fresh books. And I want to thank them for sponsoring. So go ahead and check it out it whether you're just doing a little side job and billing one or two people, or whether you're trying to run an entire business with all the interworkings of paying yourself and doing expenses and managing different currencies and whatnot. So it's at freshbooks comm forward slash syntax, and to make sure you enter syntax in the How did you hear about us section? Thanks again. - -71 -00:35:45,929 --> 00:35:47,280 -Unknown: Um, - -72 -00:35:47,280 --> 00:36:46,860 -Wes Bos: let's talk about some pain points, some stuff that that's the not so fun part of accepting credit cards on the internet. Um, the biggest one for me is dealing with people's blocked credit cards. Yeah. So you try to buy a course from some random guy in Canada, in I also charge in us. So your America, Canadian business is charging you us. Often what will happen is, either the bank will block it entirely because they're like this is this is fishy. Or what will happen is that stripe will block it because they have their own, we'll talk about this in a second, they have a thing called a radar, which will set different levels and different rules for blocking it. So often, what I have to do is tell people to call their bank, which is a pain in they tell their bank that the charge is fine, and then they have to come back in and try it again. But have you ever run into troubles like that? - -73 -00:36:46,880 --> 00:37:29,610 -Scott Tolinski: Yeah, I get a lot of declined cards that you have to, you know, you could email so and so I've tried a whole bunch to subscribe or to buy this this thing. And, you know, it's telling me my cards declined. Can you give me more information? And then you go into stripe? And you basically the answer is your card was declined. Yeah. is a huge, huge pain point. Because you don't necessarily always have something to say like, Oh, your you know, your your thing was expired or whatever. Sometimes they give you that information. But sometimes it's just flat out card was card was declined. And I know a couple of times you messaged stripe and say, Hey, what's going on? And they'll say, Oh, well, we can fix this one, this person's legit. they'll fix it for you. - -74 -00:37:30,030 --> 00:37:30,650 -Wes Bos: Oh, really? - -75 -00:37:30,690 --> 00:38:09,420 -Scott Tolinski: Yeah. But I found the experience to be most of the time, just say, yeah, this is why it was suspicious. I won't, you know, only, you know, one out of a handful has been allowed to go through and other ones or just you just have to tell the customer? Hey, you're out of luck giving me money right now, unless you want to do it through PayPal? Or if for me with the subscriptions. It's, you're out of luck, you know. So that is that is a total pain point. And like, I understand you have to be pretty diligent with these rules, or else you run the risk of being open to, you know, a lot of fraud and security stuff that way. - -76 -00:38:10,190 --> 00:39:09,690 -Wes Bos: Yeah, yeah, exactly. So there's that there's the bank actually blocking the card, which recently stripe has made their I don't know if they recently got more info from the bank that blocks it. But it used to just be this, this card is blocked. We don't know why. And now it is this card has been declined by the bank. And here's, here's the best reason that we possibly have from you. And then there's on stripe side stripe will also determine if someone trying to buy a course is fraudulent. And, for example, if you are, let's say you're in the UK, or you have a UK card, but you are in trying to buy it from Vietnam, that's a huge red flag. And that will usually get blocked. However, sometimes people are vacationing and they are trying to buy something and like what's going on? So you have to sort of tell them to call their bank and to allow it Yeah, - -77 -00:39:09,710 --> 00:39:40,800 -Scott Tolinski: I think most of the times that that I found things get blocked are because oh, this is a maybe this is a check card purchased in this country. And it's being used in this country or something like that. Where cross country right the card is living in one country and is being used to another and sometimes they're there for work right. Like he said, Sometimes they're vacationing but that yeah, that is a bummer that that frequently happens but again, you know, you're opening yourself up for fraud if otherwise. - -78 -00:39:41,420 --> 00:41:04,050 -Wes Bos: Exactly. And what's really cool is just a couple of months ago stripe released this thing called radar which allows you to really fine tune what gets blocked and what doesn't get blocked. So like for example, if somebody fails the the street check where like they give you the credit card the credit card is fine. PVC is fine, but the like the postal code or the zip code and the address they provided doesn't line up. Because in most cases, the credit card will just push that through anyway, if you screw up the address in somehow. And so you can really like fine tune, what gets blocked and what doesn't get blocked and the different levels of risk that you're you're trying to accept. I'm not going to talk too much about what my rules are some people don't rip me off. But I can tell you that I have, in my situation just because of a bit of an international audience, I've I've tinkered around with it. And I found like a pretty good level where I'm not getting too much fraud. But it's also like not because when I first had it, it was blocking way more than what it was blocking more good transactions than it was fraudulent ones, which was ending me me losing money. Yeah. So now now with this radar, I lose a bit every month from fraud, but I think I make more because of it not blocking good people. - -79 -00:41:04,230 --> 00:41:19,800 -Scott Tolinski: So I haven't modified my radar. But I do get a lot of blocked ones due to radar. I didn't know you could relax it. I always thought it was like you could make it more strict. - -80 -00:41:20,760 --> 00:42:21,440 -Wes Bos: Oh, yeah, yeah, you can, you can go any way. And then you can also write your own rules. So if you have sort of, you got your finger on the pulse of what's going on, like another one for me is that often people from I forget which country it is, but a lot of countries that are around the US, people will have us credit cards, but they don't live in the US measure how that works. But those are those are very valid. So you have to have to know about that as well. And I think the other big one that I get is people forgetting because what it does is it shows up on the credit card as like boss type slash West boss, and often get calls from confused secretaries or people's significant others being like, what is this? And then I have to like be like, someone in your family, a developer? Oh, yeah, yeah, someone? Okay, well, they bought a course for me. That explains what it is like, okay, okay, that's fine. - -81 -00:42:22,190 --> 00:42:22,710 -Scott Tolinski: Awesome. - -82 -00:42:25,560 --> 00:42:32,420 -Wes Bos: Um, yeah. And then what else we got here any other pain points that you are things to look out for? on your end? - -83 -00:42:33,090 --> 00:43:00,060 -Scott Tolinski: I just changes an API. You know, you want to make sure like what was said the PayPal API isn't version. So I have your finger on the the pulse a little bit as to what the, you know, what those API's are doing, or how they're changing or evolving, follow those guys on Twitter and stuff like that. But it's really it's not a huge, I've probably had one or two issues that ever, so just something to think about. - -84 -00:43:01,110 --> 00:43:37,530 -Wes Bos: Exactly. Um, all right, let's talk about like getting your money. So once, once you have received money from stripe or PayPal, the money then goes into your account in you need to then get it out somehow. So the easiest way to do that is to deposit it right into a bank account that you've then linked to your account. And that's what I do I have daily weekly deposits right from stripe and PayPal, will just clean out my account and deposit that right into an actual account. What about you? Do you do the same? - -85 -00:43:37,590 --> 00:44:09,300 -Scott Tolinski: Yep, I do everything direct payment. And stripe is really good about you can choose the interval at which it deposits you can have a do once a month or whatever. So I just have a depositing I think every week. That way you get just like a bundled deposits. But yeah, so direct deposit stripe you got to do or PayPal, you have to do manually, I believe I just put it in your PayPal wallet. So every, every week or so you just go through your PayPal wallet to send funds to bank. But yeah, mostly just connecting your bank account direct deposit. - -86 -00:44:10,260 --> 00:45:16,020 -Wes Bos: Yeah, exactly. Um, so one little gotcha for international, which I guess I'm international I charge in us but I am in Canada. So you can in Canada, you set up a US business bank account on your Canadian account, and then they will deposit that money into us account. That's really important because you can get stripe and PayPal to convert it for you. But they they convert it at like a brutal rate and they will take three or 4% to themselves which is not something you want to do. So what I then do is I deposit into Us Bank Account. And then I take that money to foreign exchange company that takes half a percent rather than the 4% and then converts it for me and it's kind of cool because you can throw yet to play the markets. So you have to watch foreign exchange rates go up and down. And when you think it's good, and that's what your foreign exchange person can do, then you transfer that over to your native currency. Or you just can sit on it in the US currency as well. - -87 -00:45:16,050 --> 00:45:26,280 -Scott Tolinski: Yeah, this I mean, just hearing all this stuff makes me just pretty thankful that I'm not International, because it seems like it just adds a huge layer of complexity to everything. - -88 -00:45:26,790 --> 00:47:06,420 -Wes Bos: It is and even in so another reason like PayPal, why I don't like them is that stripe will deposit into a US Canadian us account. PayPal will not deposit into a Canadian us account, it will only deposit into us accounts, which I think that they do this because they want to screw you on the the conversion rate and make another like I used to get like at the end of the day, I was getting like 10 or 11% dinged by PayPal after I had taken the fee, taken the conversion fee, all of that stuff. So what somebody figured out is that you there's this one bank in Canada called the Royal Bank of Canada. And the reason why you can't deposit into Canadian count is because you need a routing number. And in Canada, we don't have routing numbers, we have transit numbers. So somebody figured out that you can open up a Royal Bank Canadian account and then send the money to the US Royal Bank because they have branches in the US and it just magically gets redirected over which is huge. Thousands of dollars a year. Yeah, so that was that was quite quite the ordeal to get set up but well worth in. And I'm from Canada the stuff is easy in Canada and in some other countries it's the stuff is near impossible where there is no PayPal. And there is no stripe. So stripe stripe has this thing called What is it called? I have I have it here somewhere. What's it called? - -89 -00:47:08,699 --> 00:47:11,969 -Scott Tolinski: They have some big international. Yeah, - -90 -00:47:11,969 --> 00:47:14,880 -Wes Bos: what's it called? stripe Atlas - -91 -00:47:14,940 --> 00:47:20,760 -Scott Tolinski: Atlas. I remember because the the landing page for it was really nice with those like flags diagnose Yeah, stripe - -92 -00:47:20,790 --> 00:47:26,520 -Wes Bos: stripe, some of the best. Along with some of the best API design, they have some of the best like front end, - -93 -00:47:26,579 --> 00:47:59,280 -Scott Tolinski: I use design, I use stripe as a like a design inspiration source maybe once a week, for various aspects. There are so many things about the entire site that is just like awesome. And now what was the only thing lagging behind was like the admin dashboard. And they're really well they've redesigned the admin dashboard in the past year. But even week by week, there's improvements to it. Yeah, really nice stuff. And you see that design language really transfer through even to the admin stuff a bunch more now. - -94 -00:48:00,210 --> 00:49:21,780 -Wes Bos: Amazing, I love it. So stripe Atlas is sort of, they'll set you up with a US business us business bank account, they'll set you up with everything that you need to run an online business. So if you're from a country where you can't do any of this stuff, it will handle all the legal everything for you, which I think is super cool. I don't think that it makes sense to do it from Canada. But definitely, if you're from somewhere else, I would take a look at that. Oh, transfer wise, this is another thing. Transfer wise if you need to convert currency, I have people that will convert it all for me. But transferwise does very, very some of the best conversion rates out there. And the way that it works is is pretty neat. If you watch the video, I won't attempt to explain how they do it with holding groups of money from people but essentially it hooks you up with people trying to buy the opposite currency. And then you just trade money with them. Which is really, really neat. So big fan of that the only downside is that it doesn't do direct deposits from a Canadian bank account. So you have to send them a wire, which is a pain because you have to go to the bank and do a wire for me at least and then also it's expensive to do a wire I think it's about 50 bucks. So it's it's better for me to use an external service. - -95 -00:49:21,810 --> 00:49:22,409 -Scott Tolinski: Sure. - -96 -00:49:24,090 --> 00:49:28,050 -Wes Bos: Um, taxes. How do you do taxes, Scott? Yeah, I - -97 -00:49:28,050 --> 00:49:58,380 -Scott Tolinski: think I just accept taxes on sales or sales tax in Colorado. That's it. I don't I don't know what the rules are for. For Canadian companies, but I believe man, it's like a big deal here because right you buy so much stuff on Amazon. That like yeah, you only have to pay taxes on it. I don't want to say this incorrectly. But I believe you only have to pay stuff, taxes and stuff from Amazon, in states where Amazon has like a presence. Yeah, - -98 -00:49:58,679 --> 00:49:59,369 -Wes Bos: I've heard - -99 -00:49:59,400 --> 00:50:22,050 -Scott Tolinski: Yeah, otherwise Why's the user or the the purchaser themselves? Is like left to deal with that, like tax liability? I don't know how much that is like a big deal or not. But so yeah, as sales in Colorado, that's it for me, just because obviously, it's my only outpost here. So how about you? - -100 -00:50:22,860 --> 00:52:07,440 -Wes Bos: That's pretty simple. Um, mine's a little bit more complicated. So how it works in Canada. And I, when I was first getting started, I like didn't understand how this worked. So I spent a lot of time on the phone with the the CRA Canada Revenue Agency, and I'd like to explain to them how this I'm like, I'm selling a digital good. Mm hmm. Like, what do I need to charge? And they said, they said, you have to charge everybody your local tax rate unless you can prove that they are not from that province or state or whatever it is so and I asked them, like, Can I just grab that by an IP address? And they said, No, that's not good enough, because people can use VPN. So if you check out via PayPal, on my website, you'll notice that when you come back from PayPal ask you for your your address, and like that's weird, because, like, why do you need my address, if it's just PayPal, but I need to keep that on file to show that I do not need to pay taxes for anyone that is outside of Canada. So if you buy it from me and you're outside of Canada, you there's no, there's no tax. And if you buy it for me, and it is inside of Canada, I have to charge the destination tax rate. So every province in Canada has its own HST and GST or, or PST, and it's all different kinds of taxes. So I have to figure out what is their tax rate, and then fold that into the invoice. And that's super complicated. And I don't want to have to charge people more. So what I end up doing is for Canadian customers, I just eat the whatever percentage it is. And then and then at the end of the year, I have to pay out to every single province, whatever it is that I collected, - -101 -00:52:07,560 --> 00:52:35,130 -Scott Tolinski: I also have I eat I eat any taxes. So like I just assume everyone is not from Colorado. Yeah. And then I you know, I have a report that will help with that. And I actually would be really interested in knowing if i if i legally need those records. So if anybody knows, you know, hit us up, because I I'm pretty sure you you don't need something like that, because I haven't encountered that. But that would be interesting to know as well. - -102 -00:52:36,179 --> 00:53:19,409 -Wes Bos: Yeah, yeah, absolutely. Um, one other like sort of bummer. The way that I do that is that if a business buys my course from Canada, I do charge them tax, or I pay out the tax for that. But businesses don't actually have to pay HST or they do have to pay it, but they get it back at the end of the year. So I buy $1,000 laptop, I have to pay 1130, but I get the hundred and 30 bucks back in the end of the year. So that's that's one downside, but it greatly simplifies the checkout experience. Without I just tell people like it's it's 100 bucks, and it's 100 bucks at the end of the day. That's right. - -103 -00:53:19,500 --> 00:53:38,460 -Scott Tolinski: Yeah. Yeah. And I think that's, I don't know, simplifying to me that simplifying the the checkout experience, and like the the price and all that stuff like that, I think that's more valuable than having to, you know, really give your users all that information or whatever. I don't know, - -104 -00:53:38,579 --> 00:54:01,619 -Wes Bos: exactly. Just I often go to websites, where it's like, pages and pages of input fields. And it's so exhausting to have to input all of that stuff, and then it recalculates how much you owe in taxes and shipping whatnot, lightning and yeah, like, I just want someone to put in their credit card number, press a button and charge them if I have to pay a little bit more in some situations. I'm totally fine with that. - -105 -00:54:01,650 --> 00:54:16,920 -Scott Tolinski: Yeah, for sure. Yeah, absolutely. Next, we have accepting Bitcoin, which is another thing that stripe checkout makes really easily doable just by simply clicking a checkbox and having your your wallet, your address, your Bitcoin. So - -106 -00:54:16,920 --> 00:54:19,290 -Wes Bos: do you accept Bitcoin on your site, then I - -107 -00:54:19,560 --> 00:54:59,969 -Scott Tolinski: don't only because I was accepting Bitcoin. And I turned it off briefly. And I haven't turned it back on. Because there was a change in the API. And I just didn't want to I didn't have time to update my code at that time. So I just, oh, yeah, I wanted to update the rest of the API. And I just turned it off. So it's on my list of things to do is to turn it back on, I believe it's like one of my high issues on Bitbucket over here to do but just haven't done it yet. just haven't turned it back on. It's probably as simple as swit like flipping a switch and then changing maybe like five lines of code in my workout. - -108 -00:55:00,000 --> 00:55:04,440 -Wes Bos: If the hummus Did you get a lot of people buying with Bitcoin when you had it turned on a decent? - -109 -00:55:04,500 --> 00:55:05,369 -Scott Tolinski: Yeah decent? - -110 -00:55:05,369 --> 00:55:06,210 -Wes Bos: Really? - -111 -00:55:06,210 --> 00:55:56,790 -Scott Tolinski: Yeah And now that now that people have made so much money on Bitcoin yeah you know one of the challenges of Bitcoin for people don't know Bitcoin is a cryptocurrency amongst others that are like fighting for this sort of cryptocurrency space which will sort of went out you know, there's a whole bunch of different competing cryptocurrencies Bitcoin being the largest they recently had like a split I believe there's like Bitcoin cash now and bit coin, I don't want to speak too much on it because I don't I'm not educated enough. You know, really the, the whole Bitcoin system, people have made a lot of money by buying Bitcoin when it was really, you know, what, even thousand dollars a Bitcoin and now it's 3000, or whatever it is, I haven't checked the prices. They've been like going - -112 -00:55:56,849 --> 00:55:58,440 -Wes Bos: over 3000 bucks today. Yeah, - -113 -00:55:58,469 --> 00:56:33,929 -Scott Tolinski: yeah, it's been going up and down like crazy. So people have made a ton of money, and they don't have a lot of great ways to get that money out of there without accepting huge tax burden or something like that. So people might be, again, like you said, having this like sort of paypal account that's just sort of sitting there with a whole ton of cash in it. They might just have a Bitcoin account. What's sitting there with a whole ton of money in there? Yeah, fun money, right. And fun money that you've made. A whole bunch on out of nothing is definitely fun money to spend. So yeah, it's one of those things I should be. should be getting actually in there. Maybe I'll do it today. Who knows? Maybe? - -114 -00:56:33,929 --> 00:56:35,070 -Wes Bos: That would be sweet. It's - -115 -00:56:35,070 --> 00:56:41,429 -Scott Tolinski: called on? Yeah, it's a straight. Like I said, stripe checkout gets it for you for free. So yeah, it's pretty neat. - -116 -00:56:42,119 --> 00:57:18,570 -Wes Bos: I've been just accepting Bitcoin manually. And I've maybe done, I don't know, four or five transactions with it. And I did a couple like a couple years ago, people paid with it. And like, I think out of the four transactions, I've sold, maybe like $180 worth of product, but it's up over 1000 bucks now, because it's just like the rate increase so much. So that's pretty neat. I definitely want to turn that on, though, because I think it's becoming a lot more popular and why not? Right? Like if it's worth it, if 10 people a year actually end up using it. - -117 -00:57:18,630 --> 00:57:48,960 -Scott Tolinski: Yeah, and I would be interested in implementing it in a in stripe, implementing aetherium for payments. I don't know if you know much about aetherium. That'd be a great, great idea topic to talk about some time on this show. And I think that's the cryptocurrency I'm most interested in so obviously, I would be very psyched if stripe to at some point add that obviously. You know, it has to reach a level of mainstream pneus before it enters something like that, but we'll see. You know. - -118 -00:57:50,550 --> 00:57:59,670 -Wes Bos: Cool. So I'm yeah, I'm still sort of sitting on the sidelines, but definitely going to be getting into it fairly soon. Yeah, let's move over to our sick pics, - -119 -00:57:59,699 --> 00:58:01,260 -Scott Tolinski: sick pics. - -120 -00:58:02,400 --> 00:58:40,949 -Wes Bos: I'll go first. My sick pick this week is chefsteps which is a YouTube channel that teaches you how to cook things. And it's really cool because they do a lot of experiments. And I think that's the way that they approach explaining how things work and why they've done it. I take a lot of like, kind of inspiration in my own explanations when I do my own tutorials. So it's there's a lot of cooking channels out there on YouTube and, and whatnot. But this has been one of the best that has really dived with me. So if you're, you're into like quick ways to learn how to cook new things. Check out chefsteps on YouTube. Cool. - -121 -00:58:40,949 --> 00:59:18,230 -Scott Tolinski: Yeah, I love you know, there's obviously like the, the negative sides of YouTubes and stuff like that. YouTube's the negative side of YouTube, like YouTube is really just the greatest resource in the world for learning anything. I was just on a YouTube channel called bull lawn care nut. I'm like, I'm like mowing my lawn like trying to figure this stuff out. I don't really I'm not good at anything about it. And here I am like watching YouTube. Okay, here's what to do. You know, it's, I'll definitely be checking those out. I love educational YouTube. It's It's by far like one of the greatest improvements Yeah, yeah. And life overall totally. - -122 -00:59:18,540 --> 00:59:27,540 -Wes Bos: Especially like like a 10 minute videos where you got like, if you're having lunch or whatever, I always throw something on. And if you can learn a thing or two, it's it's great. - -123 -00:59:27,570 --> 01:01:27,179 -Scott Tolinski: chefsteps Alright, y'all check that out. What about you my sick pig is a it's a really high end, but really like reasonably priced t store called what? hyphen cha.com. So w en hyphen. Yeah, there's a lot of well, I am in Colorado here. So yeah. This no this tea sorry. This tea is like it's it's really high end tea in the way that like, this isn't the stuff that you're going to find. Everywhere I'm a big loose leaf tea drinker. And there's several shops that I've been going to for a long time. But in terms of like the highest quality and rare, more rare set of teas, this what hyphen cha is like the best place ever, they have a lot of like, really, whatever, whatever kind of teas you're interested in. They even have a lot of T's like, or like classifications of teas that you don't see a lot of here in the states like yellow tea, which is less oxidization than green tea, but more than white tea so it's a little bit in there, you get a little bit brighter color. So those yellow teas are really nice. There's also pu RS and dark teas which are fermented, like really heavy smoky teas. And yeah, and some of these, pu ours are like pretty rare, I mean, or at least a little they take a long time to make and my dad came home from China one time with a pu R. That was like just wrapped in paper in this big ol stick a big old brick of tea and you break off a chunk it it's not for everyone that pu ours and some of these stronger dark teas have a little bit different flavor. But like I said, this, this place is where you're going to go to get a whole bunch of teas that you did not know existed, and it's a really high quality. I bought like a big box of stuff there. They sent me a ton of stuff for free. So really, really cool little place. Yeah, if you're into high quality loose leaf teas. What I love a good pu R Yeah, good pu r n. - -124 -01:01:27,690 --> 01:01:29,310 -Wes Bos: Oh yeah, who are all day? - -125 -01:01:31,170 --> 01:01:31,770 -Unknown: Are they enough? - -126 -01:01:31,770 --> 01:01:42,300 -Scott Tolinski: It does smell slightly like poo or but it's not the best smelling tea in the world. Those dark teas, but they're there, they can be pretty yummy. - -127 -01:01:43,320 --> 01:02:31,079 -Wes Bos: Awesome. Um, all right, let's move on our last one. I don't know, if you have anything to plug in. We've plugged all of our courses. But obviously my courses are at Wes Bos calm for slash courses. But I wanted to just plug somebody else's course right now, just because I ran through it real quickly. And it was really good. It's how to graph ql.com. It's put together by the folks behind graph. Cool. And it's it's a really nice introduction to like, what is graph qL? What are the core concepts? What is the architecture that you need? All the different stuff that you need? And it's just like a nice high level. Maybe spend a couple hours on it, and you get an idea of what it is and then you can move forward into some some chewier stuff to actually implement it. Hmm. - -128 -01:02:31,349 --> 01:03:09,270 -Scott Tolinski: Yeah, it's really a well designed resource. And those, that's always a good indication if the you can tell like the educational resources, like taking the time to like, do that design element of it, you know, it's usually going to get into everything pretty nicely. So, yeah, yeah, yeah. How to graph QL. Cool. I guess my shameless plug will just be my YouTube channel. Level Up tuts on YouTube. I'm releasing a bunch of free stuff. And like I said, new adventures kind of different series than I'm used to doing. So yeah, check it out. There's just going to be a bunch of new content there very soon, all the time. So yeah. - -129 -01:03:10,290 --> 01:03:14,610 -Wes Bos: So that's it for today. Thanks so much for tuning in. And we'll see you next time. - -130 -01:03:19,199 --> 01:03:29,699 -Scott Tolinski: Head on over to syntax.fm for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you'd like to show until next time. - diff --git a/transcripts/Syntax60.srt b/transcripts/Syntax60.srt deleted file mode 100644 index 590a7d6b3..000000000 --- a/transcripts/Syntax60.srt +++ /dev/null @@ -1,456 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,879 --> 00:00:06,150 -the podcast with the tastiest web development trees out there, - -3 -00:00:06,150 --> 00:00:09,630 -strap yourself in and get ready to whiskey and West - -4 -00:00:09,630 --> 00:00:10,500 -boss. - -5 -00:00:10,529 --> 00:00:21,630 -Wes Bos: Hello, everybody and welcome to syntax. My name is Wes Bos. I'm a full stack web developer from Canada with me as always, is Scott to linsky. How you doing today, Scott? Hey, - -6 -00:00:21,659 --> 00:00:23,910 -Scott Tolinski: I'm doing okay, just hanging out How you doing? - -7 -00:00:24,239 --> 00:00:43,710 -Wes Bos: I'm doing pretty, pretty good. Excited to it's Friday, we should record on Monday. But because of vacation schedules and whatnot, it's a little bit jumbled up. But I'm getting prepping for a talk on CSS Grid, which I'm excited to give on going to layer con. So I'm going to be the JavaScript guy going to a PHP conference giving a CSS talk. - -8 -00:00:45,240 --> 00:00:47,430 -Scott Tolinski: I've been seeing your slides. Oh, they look nice. Yeah, - -9 -00:00:47,460 --> 00:01:08,840 -Wes Bos: yeah, I'm really happy with it. That's always a fun part of giving a conference sagas once you're done, you can actually design the design the thing. And I did this new thing where I did the examples in the slide deck. And I just wrote them in a style tag. And then I wrote some code that would display the style tag and then syntax highlight it, it was really cool. Oh, - -10 -00:01:08,970 --> 00:01:11,430 -Scott Tolinski: cool. Yeah, a little bit automation there. Nice, - -11 -00:01:11,450 --> 00:02:28,280 -Wes Bos: big, big fan of that. Anyways, today we're talking about the undocumented web and which is kind of like everything that is scraping private API's proxies, alternative solutions, we say in quotes, kind of necessarily, maybe gray area stuff, we're not gonna do anything. Yeah, we're not gonna do anything illegal today, we're not cops, but we've got some at some point in your life, you're going to need to do something that there's no clear cut way to do it. And you need to make your own solutions or so we say. So that's what we'll be talking about today, scraping, faking stuff, automating stuff, proxies, all of that kind of under the table stuff. Today, we're sponsored by two awesome companies. The first one is Kyle prinsloo has a course on freelancing, it's available at study web development, comm forward slash freelancing. And as you might know, it's a course on freelancing, talk a little bit more about that, as well as our tried and true Freshbooks, which is cloud accounting software for anyone who is running a small business or freelancing. So let's get on into it, I actually have a quite a bit of experience with the undocumented web, as we're calling it. And Scott, you say you don't have a whole lot of experience, are there is that right? - -12 -00:02:28,500 --> 00:02:46,050 -Scott Tolinski: I don't, it's mostly just like fun stuff and stuff that I've seen around or picked up. But I have not done this much fun stuff that in my career. So I'm really excited to hear about some of these, these cool things that you're gonna be telling me about some of the fun stuff we can all try out. - -13 -00:02:46,259 --> 00:07:49,200 -Wes Bos: Totally, it's funny that I was going through this and I have done quite a bit. And I think it's just because that's really where my, my love for web development came, is when you have a problem, or you're not allowed or being able to do something, then you can often find a way around it. So let's get into it. So what is the undocumented web, it's when the traditional methods of the internet don't give you what you want. So often, when you try to build something, you you'll be working with API's. And you'll have limits with that API, you'll have data that you need to get, and sometimes it just doesn't work out, maybe you don't have access to it, maybe it's a Friday afternoon, and you're you have to get approved for API access. And they're not going to approve you for three or four weeks, and you just want to get going with it. Maybe it's just not something the company wants to give you access to. So you have to kind of find your own way around it. At the end of the day. Most web developers are hackers. And we want to be able to find a way around these these barriers, or basically just solve the problems that we have ourselves. So often, these things are quick and dirty. Often they will be very brittle, because they can break at a moment's notice. They're not based on any sort of standards. They're just ways that you've found to go around. And if a company were to change their layout, if it's in scraping or plug that hole at any point, then the whole thing will come crashing down. So I first got into the documented web was one of my first projects was a website called deal page. And I had built this thing where back in the day. And if you if you want to hear a little bit more about the story, go and check out episode eight, which is my origin story. It's kind of how I really got into building apps from websites. And basically Groupon and all these websites were really popular, and I wanted a way to put them all on one page. And you can also get like big bucks by referring people to these things. So what I did is I built this thing that would go off to every single website and some of them had API's that you can hit and get the latest deal and pull it in. But a lot of them didn't. And what I had to do is I had to scrape the page, parse the HTML, I use this thing called PHP query, because like the only language I knew at the time was well Though I knew JavaScript and jQuery, but there was no such thing as as node at the time, and there was no such thing as, like scraping libraries that we'll talk about. So someone had written the entire PHP, the entire jQuery library in PHP. So what you could do is you could pull an entire website and then parse it and look for like an h2 tag, and an image tag with the class of featured image and a span with a class of price. And yeah, I would, I would pull all those out. And then and then put them all on one big website, which is really cool. So that's kind of what first got me into working with the undocumented web. So what we're gonna go through today is talk about undocumented API's, faking stuff, scraping stuff, automating stuff, proxying stuff, a couple tips and tricks. And then I also asked on Twitter, what your stories are hashtag, not a cop, and some people, some pretty fun, pretty fun stories. It's kind of fun in this is Twitter, too, I'm sure if you had had a couple beers. With some developers, I'm sure some of the really good stories that would it would start to come out as to what they did, let's do undocumented API's. This is probably the simplest version, where a lot of times companies will not make their data available via a JSON API for you. But they will have their own API because their own product is likely built in something that needs to ingest an API and pull the data in. So a really good example is Instagram, Instagram has an API, but they have pretty much locked it down over the last couple of years. They don't approve anyone's application. They don't want anybody using Instagram in any way other than the Instagram application. So if you want to pull in a list of your most recent Instagram photos, or if you want to pull in anyone's most recent photos, you can't do that. Because the way to do is to apply for an API token, and they will always deny you, no matter what you tried to do, I believe me, I've tried many, many times. So what you can do is you just pop open your dev tools, take a look at click on the X HR tab in the network. So go to your network tab, click on x HR, then refresh the page or click around and you're going to start seeing the requests come in. And you're going to see, okay, Instagram has their own internal API, then you can start figuring out what the URLs are in order for you to hit those endpoints. And in many cases, there's some sometimes some stuff with like cores and cross origin stuff. We'll talk about that in our upcoming hasee treat as well. But you can use that API in your own stuff, it will change at some point, I've done it many times myself, and they will just break it on you. But it's an option. If you need to be able to pull in a list of Instagram, I use it on my wife's website, and it's been only broken once in about a year. Nice. - -14 -00:07:49,410 --> 00:08:11,160 -Scott Tolinski: Yeah, it's funny, because I think that the Network tab is kind of underrated. Yeah, no, I love the Network tab. I spend so much time in there for various reasons. But you can find out so much good information. If you just like take the time to play around or even understand what's going on there. There's so much good stuff to find out there. So this is just one more thing that you could use the Network tab for - -15 -00:08:11,310 --> 00:08:50,419 -Wes Bos: sure. Even in the in the dev tools, there's like breakpoints that you can set that are like cause a breakpoint at an X HR request. And if you want to know like, what are first of all, what are they firing off? You could like if sometimes if you just hover over something, the fire off and exit chart requests to like, put in their database, this user hovered over these pants, right, maybe maybe start to remarket them, these specific pants. It's kind of interesting. just dig into like how how people say, Oh, you can't view source on websites anymore. But I think the view source now is just watch the Network tab, watch all of the different things to watch how you when you interact with a website, different things get fired off. Yeah, - -16 -00:08:50,460 --> 00:08:53,029 -Scott Tolinski: yeah, absolutely. Yeah, you can learn so much that way. - -17 -00:08:53,270 --> 00:10:13,230 -Wes Bos: One other thing i've i've done with this is in Canada, we have I think in the States, you've got realtor as well. Right. And when you buy a house, you have to go through a realtor. Yeah, yeah. So we I know you have better stuff like Zillow and whatnot. But in Canada, we really just have a low in Canada, we do. But it's like not that good. Mm hmm. And we basically have like the mafia, which is realtor. And they are the only place to go through if you want to look at what's for sale. And their application is it's gotten better in the last like six months a year, but it's still pretty garbage. And it's really frustrating to use. And it seems like they don't necessarily care because they have like a monopoly on this thing. So what's cool about that is you can again, I've what I've done in the past, when we were looking for a house, this was five years ago, you pop it open, you do a couple different searches. And you'll be able to figure out what are the different query params that they're sending to their own API, and how can I replicate that and I built my own little thing that would just like every three hours, it would hit this API and pull in the new listings and then display them to me on a nice clean page or populate them on a map or Something like that. And I love that kind of thing. Because you're scratching your own itch. It's not necessarily going to be an application everybody wants to use, but it could definitely be something that could make your your day. Much better. - -18 -00:10:13,350 --> 00:11:10,260 -Scott Tolinski: Yeah, nice. Now, let's see, we have here, the React dev tools, like utilizing react dev tools on sites that are out, I think this is pretty cool. Because if you have react dev tools, I mean, chances are, they're, they're smushed their, their sites and their components are all not their correct names. But you can still power around and find some stuff. And sometimes it's really interesting to go ahead and just change some props. Now, don't go changing any props on level up tutorials, because it's not going to get you anywhere, obviously, my password protected stuff is still all, you know, server verified. But you know, changing, changing user interface, things will only give you access to user interface things, but it's really cool to be able to do that on some websites and, and really, like see how they work more so than in doing anything nefarious, but like just to go in, and like, okay, so they have these props, you can toggle these props, you can maybe change these values and see how it actually affects the rendering on the screen of that given site is really pretty sick. - -19 -00:11:10,289 --> 00:11:58,409 -Wes Bos: If you pop open on instagram.com. If you pop open the React dev tools, and you change the number of likes from like, I don't know, 22, down to nine and Instagram after after 10 likes, it displays the number before 10 likes, it displays a list of users who have liked it, right. So if you change the number of likes to nine, it will just rerender that part of the application show you the first nine people that have liked it. And then if you change it to 10,000, it will just go in and rerender it and then I think if you could go up to like like 100,000, it will change it to like 100.2 k that many likes. And that's why I always use that in my react workshop because it shows people these react dev tools. And also it's kind of an early look into the whole templating is based off of the data, you change the data, the templating changes. - -20 -00:11:58,559 --> 00:12:14,549 -Scott Tolinski: Mm hmm. Yeah, that's pretty funny. You could also scam scam, your, you know, your social media fans, by posting a photo of me like, look how many likes I got on this? Totally there but then delete the photo and be like, Oh, yeah, but it was I took it off though. I got 10,000 likes, but I didn't like the photo. So I - -21 -00:12:15,480 --> 00:12:43,890 -Wes Bos: take it down. That's great. Yeah, I actually did that. Again, I gave away some stickers two days ago. And I had 1200 people enter as leaving a comment on the stickers. And the way that I picked the winners is that I loaded up all the comments, I had had to click Load More like 400 times. And then I just went into the React dev tools and got an array of all of the different comments. And then you can just randomly pull values from that array, which I thought was a very developer a way to, to give - -22 -00:12:45,270 --> 00:14:40,470 -Scott Tolinski: very developer, very developer, I'm sure there's like services that you could pay a certain amount of money to do all that for you. But that's there you go, you have the skills, you have a neat, unique set of skills and abilities to handle that. So you might as well, this one's less of an undocumented API sort of thing. And more of just an interesting API sort of thing. There was a really great talk ads I Day this year, from Simon Wilson, where he discovered all of these XML files of data, data from the city of San Francisco, like every single tree, what type of tree with the location of that tree, and when it was planted, all sorts of stuff, like tons of stuff. And so he got really interested it and ended up building this thing called data set. Now, data set is a tool for publishing data API's, you could sort of think of it as like, you upload some data, and then all of a sudden, you have an API to hit off of that you can build things. So let's say you find some data somewhere, you can use this data set to simply just upload it as a CSV, right. And then that actually publishes as an API that you can then hit and build something with. So if you have some data sitting around, and you want to transform it into an API without building anything, you can use this data set thing. It's open source. And some of his examples were amazing. It was just super cool, because he was building maps that showed you every tree in San Francisco, and he built it in no time. And then he was saying, Okay, well, let's, let's find the nearest animal near me. And you could publish instantly an animal near me website. It's like find the nearest red panda near me. And it will find you a photo of the nearest red panda near you and tell you where it is. It was just super cool. So if you're interested in some of these, like sort of Rogue API stuff, it was one of my favorite talk. Yeah, recently about the stuff I was really super interested in what he was doing there. So it's Simon Wilson's talk from as a day, we'll post the link in the description. It was really, really super cool. - -23 -00:14:40,529 --> 00:16:42,750 -Wes Bos: That's, that's really at the heart of of what this this kind of stuff is undocumented web where you take, maybe there is data that is available, but it's not in the format that you want it you can't really use it, how you want it and people you build like a layer on top of the data that allows you to actually build your own stuff, right? Mm hmm. One little other thing I want to say is That often, if a website is just server rendered, there's no way for you to get an API. And that's where you have to often reach for scraping. But what a lot of people who do stuff before they even reach for scraping, what they'll do is they'll see if they have an iPhone app or an Android app, because often the website is server rendered, but they also have an API that their, their different applications will use and, and talk back and forth to because if you're building an iPhone app, there is no server rendered, it has to, to ping a server to get that data pulled in, right. So one tool you can use to do that is called Charles proxy. And what Charles proxy will do is you can put it on your Mac, and it will listen to like you can hook it up to an Ethernet port or your Wi Fi, or you can also like proxy your your iPhone through it. And then it will sit, it'll capture absolutely every single packet and request that your computer makes. And then you can write these filters a little bit, it's a little bit hard I it took me a while to get it. But you can write these filters that will filter for specific kinds of requests or different names of requests. And then you can just go ahead and start surfing on the iPhone app. And then it will start logging all of the different requests that you have it if it's an SSL, you have to of course, install a certificate in the middle that will allow you to step in and and touch that. But I thought it was really cool. It's such a super helpful. I've also used it for just web development. In general, when you have like a really hard something where the requests aren't debugging, or I did a lot of work where it had to be on a VPN. And sometimes the VPN was debugging. It was buggy and I was able to use Charles to just peer into that and get a full look at it's one level lower than the the Network tab because it's the entire network layer of your machine. - -24 -00:16:42,990 --> 00:17:06,780 -Scott Tolinski: Yeah, you know, this Charles site reminds me of like that era of websites. Yeah, I know what I'm talking about, like transmit first came out there was like all sorts of these websites, they all had a sort of similar look, this is like this one. This is maybe when I first started really getting into like web 2.0 style design stuff this like I just came to this, this website, and it like took me right back. It took me right back there. - -25 -00:17:06,830 --> 00:17:14,520 -Wes Bos: The really nice background gradient of the tabs are PNGs Oh, that's good. Or a - -26 -00:17:14,729 --> 00:17:26,840 -Scott Tolinski: sprite? And I think the the font is a an image for the header, because it has been a little inset. Oh, yeah. Yeah, this is like classic web two point. Now. I love this. I wish this comeback - -27 -00:17:26,880 --> 00:18:06,930 -Wes Bos: got the 1999 doctype and everything. Dude, this is dope. That's great. All right, let's move on to the next one, which is faking. So another way around it. Sometimes you can find these these API's. But there's obviously a security layer that you need to get by. And they will only let specific people buy in the most basic example is, if you're using some sort of like web scraper, the user agent of that scraper will be Phantom j s, or headless chrome or something like that. And often websites will very like as a very basic way to stop you. They will just block requests that are coming from headless Chrome, you should - -28 -00:18:06,930 --> 00:18:08,880 -Scott Tolinski: mention what a user agent is, - -29 -00:18:08,910 --> 00:19:31,920 -Wes Bos: yes. Okay. So a user agent is a string that comes along with any browser. So any Chrome, Firefox, headless Chrome, a weird browser on your mom's Samsung phone, like all kinds of different stuff. And they will all have a unique user agent. And that's a way for you to tell information about what type of browser is requesting the data. And it's really confusing because Chrome's user agent says Mozilla in it, and there's a whole story. There's a whole story. And that's also why you should never never sniff a user agent to try to figure out like, along, when web 2.0 was getting really popular, or like CSS three people would say like, if this is iE 11, then use this. And that's really bad. Because what you want to do is you want to feature detect, you want to say, does it support border radius or not? Is it iE 11 or greater? Because there was a huge bug that came out where when iE 10 came out, people were parsing IE six, ie seven, ie eight, ie nine, and then they parsed IE one because they were just capturing the IE plus whatever came the first number that came after the word IE. So you were saying if IE one is technically less than IE nine, so then it was saying the browser is not supported. But in reality people were on the latest version of IE not IE one - -30 -00:19:31,980 --> 00:19:38,160 -Scott Tolinski: Yeah. What Oh, man, what was that library that you used for feature detection right around then? Yeah, I know why. It's totally - -31 -00:19:38,220 --> 00:19:39,210 -Wes Bos: or moderniser, - -32 -00:19:39,270 --> 00:19:42,750 -Scott Tolinski: moderniser. Yeah, dude, it's been so long since I thought about moderniser. - -33 -00:19:42,860 --> 00:19:46,500 -Wes Bos: Yeah, sure. I haven't ever I haven't had to use that in years. It's kind of interesting. - -34 -00:19:46,550 --> 00:19:47,130 -Scott Tolinski: Yeah, - -35 -00:19:47,130 --> 00:20:16,020 -Wes Bos: I guess cuz CSS has add supports now. So a lot of the his use case or some other fun stories about faking stuff. I don't know if I've told the story or not, but I got free Wi Fi on a plane because they had this like thing where Like, if you use your Blackberry, you can get free Wi Fi. So I faked my user agent with Chrome to be a blackberry pearl or something silly like that. And I logged on with Wi Fi. And then I flipped it back to regular chrome and I was able to dislike cruise through the internet. - -36 -00:20:16,310 --> 00:20:29,400 -Scott Tolinski: I think that's one of my favorite stories of like, you know, you're not hurting anybody. It's not doing anything like, but it's still kind of iffy, but it's still at the same time. Like, who cares, I actually, I love that story. That's my favorite ones. - -37 -00:20:30,630 --> 00:21:23,570 -Wes Bos: It's good. And also faking in Chrome Dev Tools, you're able to copy your requests. And you can copy all of the like you can copy as as a curl. What curl is, is kind of like a fetch or a axios library for just the terminal and you can curl things and you can download stuff with curl, and you can ping URLs. And what chrome will do is you're able to copy a request as curl. And then what you can do is you can take that curl request and pop it into like a text editor, and then figure out what all the properties that have been passed. This is often what I'll do, and I'm trying to figure it out all I'll copy it and then I'll just start removing headers and and properties that got passed with that request until it stops working. And then at that point, you know, you have your minimum viable requests, and they can go in and start changing the different values. And I'll have some more stories about about tech coming up. - -38 -00:21:23,600 --> 00:22:41,730 -Scott Tolinski: So all of this stuff that we're talking about in this episode is a great way to maybe you know, have some fun, but it's not necessarily the greatest way to make a lot of money. A great way to make money, though, is taking up freelancing and what better way to learn freelancing there from this course from Kyle prinsloo, which will give you access to a whole ton of things that you need to get up and running to really take off freelancing, such as a freelancing and beyond ebook, tons of HTML and CSS templates. There's a slack community, a Facebook community portfolio, website template, a conversion centered guide, a web creation checklist, a prospective client questionnaire, SEO checklist, client proposal template and invoicing template. Basically, he's giving you a whole bunch of stuff, that sort of like here is the stuff you need to get going on freelancing. And again, this is going to be a great way to sort of get all you need in the basics and sort of like set you off on the right foot, right, because we all need these invoices, agreements, these sort of things to get working. But we also need to have good advice on you know, how to deal with clients and all that stuff. So if you are interested in checking out this course, head on over to study web development.com, forward slash freelancing. And Wes, do you want to tell us a little bit about the the deal he has going? - -39 -00:22:41,820 --> 00:23:33,660 -Wes Bos: Yeah, so if you use the code syntax, you're gonna get 25% off, I'm just taking a look at it. Right now the complete bundles, it looks like you can buy the E book for 45 bucks. Or you can buy the complete bundle for 97 bucks on sale right now. Not sure how long that will last. But like Scott said, it comes with a portfolio template SEO checklist conversion center got all those stuff, because like, if you're going freelancing, you need to kind of like hit the ground running because you need to make money like pretty quickly. Otherwise, you're you're gonna go hungry, or you can't pay your rent and whatnot. So looks like this is a pretty good, I did download it in page. So I didn't read the whole thing. But it did download it and page through it to make sure that it was like legitimate. And it's not just something that got slapped together. Because you do see that fairly often. This looks like some legitimate good content, I would definitely check it out at study web development, comm Ford slash freelancing, use the code syntax for 25% off - -40 -00:23:33,750 --> 00:23:51,540 -Scott Tolinski: nice, yeah, take care of it. And you got us sometimes you got to spend money to make money, but a freelancing can definitely make you a bunch of money. So really super cool. Unlike some of this web scraping that we're about to get into. That was a double segue. I'm segwaying back. Whoa, here we go. Yeah. All right, let's - -41 -00:23:51,540 --> 00:25:49,680 -Wes Bos: talk about probably the most popular thing of the undocumented web is scraping. So and what that means is that is the data is often available in the HTML of the website, and you need to get it out, you just need the raw data, you don't need the whole website that comes along with that you need to convert it to like a JavaScript object that contains all of the pieces that you have. So that's what scraping is, is you download the entire website. And then somehow you parse it so that you pull out the pieces of information that you want, like I was downloading an entire groupon.com forward slash Toronto. And then I was parsing out all of the different spans and the links and all of that good stuff. So it was kind of a fun one. I use PHP query at the time. But now anytime I do any sort of scraping, I reach for a node package called Cheerio node lends itself to this because it's JavaScript at the end of the day, there is a there is another one called node Dom or something like that, where it simulates the DOM, but Cheerio seems to be a little bit faster and then Cheerio also gives you if you're used to jQuery it will give you like the entire jQuery dot find dot children dot value dot Text all of the API that you're used to using to traverse because a lot of times with the scraping, you're saying, Okay, let me find the h1. And then let me find the sibling paragraph. That's the description, then let me go up a level over one down a level, and then the image inside of there, that's the image I need to pull out. And then let me go up to levels and then find the span that has a class of price. And let me pull the text out of that, or let me pull the alt tag out of that I was doing that a lot as well. And Cheerio is fantastic for that it doesn't load the website for you, you still need to use something like axios, or request or anything to actually download the raw HTML. But then once you have it, you can run it through Cheerio. And it will turn the string of HTML into an actual Dom that you can traverse and use the jQuery methods on. - -42 -00:25:49,770 --> 00:26:55,830 -Scott Tolinski: Yeah. And if you're interested in some, like maybe lower level version of this way, you're doing a lot more work. But you're learning a lot about how the process of maybe parsing a whole page can work. There is a really great course it was one of the first courses that Udacity put out. And it was basically building a website crawler via with Python, you don't really have to know too much about Python and teaches you sort of the Python basics as you go. But really, what you're doing is you're loading up a page, it's giving you the entire HTML as a string, and you're traversing the site grabbing different links, going to different pages and finding different information, but you're doing it without any libraries. And I really, really enjoyed that, like the process of getting in there. And like grabbing the strings, and then being able to actually do this yourself. I felt like it made me a much better developer after I was done with it. I took this like a while ago when you destiny first came out. But if you're interested in again, learning a little bit more about like the process of that kind of thing. Rather than just using a jQuery type package. I really like that course just for to get a handle on maybe some of the ideas behind some of these things. But that Cheerio package is sick. I mean, just the who doesn't love the jQuery syntax for stuff like that? - -43 -00:26:55,950 --> 00:27:27,510 -Wes Bos: Totally. It's really, really slick. It's funny, I did something called about a month ago with Cheerio, and I hadn't written any serious jQuery in about a year. And I found myself having that that opposite effect of, oh, how do you do this in jQuery? whereas it used to always be the other way around with how do you do this in vanilla JavaScript? Yeah, I've totally flipped around. And I actually wouldn't mind a I wouldn't mind like a vanilla API for it as well, just because it's that's the way I'm thinking in the last year. So it just kind of funny. Yeah, - -44 -00:27:27,990 --> 00:27:28,740 -Unknown: yeah, nice. - -45 -00:27:29,670 --> 00:29:23,760 -Wes Bos: Next up, we have automation. So scraping is great when you have just a URL, and you can hit that URL and scrape it. But that's not always the situation. Sometimes you need to log in and fill out a form, and then click Submit, and then do a search, and then click on something and like there's a whole bunch of steps that need to lead before you even hit that page, where you have the thing that you're looking for the data that you want to scrape. And if that's the case, then you need to like automate those steps where you log in, you wait 10 seconds, or you wait for it to resolve and it comes back and then you click on a button, especially if these things don't have direct URLs. Like if you have like a search that you're searching for, like bikes or something like that. That's that's another good example. Let me tell that sir, real quick. Again, I know a lot of you have heard it. But one of my initial things was I would buy and sell rode bikes, and I would flip them, and Kijiji, which is like the Craigslist of Canada, they have an RSS feed of bikes, or you can like you can like run a search. And you can run a search for a specific like I had this huge search of every single kind of bike. And then you could get an RSS feed for that. But it would only update like maybe once a day or twice a day. And that was too long, right. And you can also sign up for notifications. But that only comes out once a day. And by the time those you got that email, it was too late because the good deals were already gone. So I wrote the scraper that would go to the URL, search for it, and then scrape everything every three minutes so that when something did show up that was on my radar, then it would automatically text me and I could I could view the listing on my phone and I'd be able to jump on a good deals within within five minutes of them being posted. And that led to me getting so many more bikes because it was much faster than than regular people just just searching and doing it when they have time. Right? - -46 -00:29:23,850 --> 00:29:33,210 -Scott Tolinski: Yeah, and this is like a, this gives you so much of a like a jump on everyone else. Right? This isn't a tool that everyone has access to. It's an unfair advantage. - -47 -00:29:33,330 --> 00:31:36,240 -Wes Bos: It totally is. And that's why I understand why people don't like it because like a lot of people just wanted a good a good deal on a bike. But then no, like no, I was scooping up all the deals and then jackin cleaning them tuning them up. That's on the back to these people right and that that also happens with like, ticket resellers. Right? People will right? That will automatically buy up tickets. And one of the Big one, it's it's so funny how often I bet seven times in the last year I've been contacted by some bro, who wants to build a Yeezy company, because so Yeezys Let me explain he's these are these the Kanye West has has these silly shoes, I have a pair so I can call them silly. But there's these silly shoes that he puts out there from adidas but they're called Yeezys. And they drop them only at like a DITA stores and some foot lockers and an online. And if you can get a pair, they're like 150 200 bucks, but then the resale, they can go up they can, I don't know, three, four, some of them depends on which ones you want, they get really, really high, right? So what a lot of people do, and same with like supreme and any of these streetwear brands that are hot and sell out in like a second. People have these, these bots that will sign in, fill out the credit card and just like immediately do it as like within seconds of it of the shoes dropping, because you've automated it and it goes faster than regular people can can fill it out even with like a chrome autofill. So it's a big business now, because if you can buy 15 pairs of Yeezys, and you make three 400 bucks a pair, you're swimming in it right? So people contact me all the time, because I guess they know that I can I have the tech skill in order to be able to do something like this. I always think that's funny. But anyways, you maybe you want to go into some of the tech that you might use to do this automation. - -48 -00:31:36,630 --> 00:32:58,230 -Scott Tolinski: Yeah. So I mean, you probably I don't know what you'd be using. But you definitely need you need something to to repeatedly run this job. So whether it's like a cron job or something like that, and a cron job is essentially going to run at an interval. And you could send to this job to do anything, right. So hey, this job, go to this page, maybe you're loading it up, and some sort of headless browser. Google has recently, somewhat recently, I guess, in the past year, I've lost track of what's recent anymore. That's definitely within the past year, released something called puppeteer, which is their own headless Chrome for a long time, people were using other headless browsers like Phantom j. s. But puppeteer is pretty sweet. It allows you to do all sorts of stuff, like generate screenshots and crawl the whole rendered page. I mean, nowadays, everything's a rendered JavaScript page anyway. So it allows you to crawl the page without there necessarily even be like a server side component to it, lets you use form submissions and all that stuff. So basically, you can use a headless browser like puppeteer to go ahead and go do something, right. So you might need something to trigger as an interval, you might need something to actually load up the content. And then you'd probably using your standard JavaScript skills to target elements, fill their values, click on stuff, do that kind of thing. And with the headless browser, it makes it all pretty nice and easy. - -49 -00:32:58,530 --> 00:33:28,050 -Wes Bos: I'm really excited about this, because I had to use Phantom j s quite a bit in the past. And I always ran into like I was doing something where I needed screenshots quite often. And I was using Phantom j s. And like, they only updated Chrome, like once or twice a year. So if there was something new, and then there was always issues with web fonts, and all kinds of stuff. So it was amazing for the time. But now that we have like legit, officially supported Chrome, headless Chrome, it's going to be much, much easier. - -50 -00:33:28,260 --> 00:33:29,340 -Scott Tolinski: Yeah, super nice. - -51 -00:33:29,360 --> 00:36:30,440 -Wes Bos: Next up, we have proxies. So one way that companies and people stop you from from doing the stuff that we're talking about is that they will they will ban your IP address, or will only allow so many requests per minute from an IP address. And often what happens is that you need maybe a fresh IP address because yours is tapped out. Sometimes API's will allow you like 50 requests per per IP address per hour. And then if you want to make more than that, then you have to get a secondary IP address and start making requests from that one because it looks like you're you're a second separate person, right? If you need to come from a different country. So I've done this quite a bit. Even in my browser. When I was buying stamps for my stickers. I was trying to buy us postage from Canada. And they weren't allowing me because like why would you need to buy us postage as a Canadian, right? So I you can flip on a proxy. And in my case, I use a Chrome extension called Falcon proxy. And then I it's actually really easy in the terminal, you can type SSH minus d, and then just SSH into any server that you have. So whether you've got your like a GoDaddy or Bluehost, or a Digital Ocean, or any server that allows you to SSH into it, you can just set up what's called a socks proxy. And it's just one line of code. And that one line of code will set up a proxy on your computer and then you can use the Falcon proxy Chrome extension to route all of your browser traffic through that. And that allows you to do things like watch Netflix from the US or any of these. And it's great because it's not a known existing proxy. So often well, like Netflix won't block, I think they've started to block Digital Ocean IP addresses. But in the early days, I haven't tried it in a long time. But in the early days, you could just SSH your own server. And because it wasn't like a known one of these proxies that you you pay for, it would be really easy to do that. And that's how we did it with buying these stamps as I proxy through my own server that hosts my my website. And then another little tip for for Canadians who are buying stuff, if you're trying to use your credit card, and it's asking for a US address. I've only learned this since I've started accepting credit cards, but your credit card information can be pretty far off, and they'll still push the charge through. So if you say like I'm in Ontario, I always just say Ohio as my billing address, and then your shipping address has to be different. It has to be wherever you're shipping it to but your billing address, often they will not give you the ability to put in a Canadian address when you want to use a Canadian credit card. So what you can do is you just set it to Ohio instead of Ontario, and then where the zip code is, you simply just take the numbers out of your your postal code and add to zero. So if your if your postal code is m five s two p two, you just say 522 and then add 00 on the end. And that's your zip code for - -52 -00:36:30,440 --> 00:36:34,670 -Scott Tolinski: Canadians. To this is wild, I don't know any of this stuff. - -53 -00:36:35,400 --> 00:36:58,290 -Wes Bos: Well, it's it's only because we're Canadians, and we're oppressed. And we even like buying gas, get buying gas in the States. If you put your credit card in and ask for your zip code. And you don't have a zip code because it's a Canadian. I used to have to walk in to the store. But now you just do the little trek where you take the numbers out of year numbers out of either your postal code and add two zeros to the end. - -54 -00:36:58,460 --> 00:37:01,920 -Scott Tolinski: And this is some helpful stuff right here. Real World helpful stuff. - -55 -00:37:02,900 --> 00:37:29,070 -Wes Bos: Anyways, what else do we have API throttling, I talked about that if you need a fresh IP, you need some sort of proxy, there's services out there that will give you fresh IP addresses. You can also spin up a couple little digitalocean servers at the $5 a month that you need, which is nice, because I believe you can just spin them up for a day or two, get that IP address, do your work, and then spin them down. I don't know if you're billed for a full day. I had - -56 -00:37:29,100 --> 00:37:30,960 -Scott Tolinski: discussions great about that. Yeah, - -57 -00:37:31,019 --> 00:37:32,940 -Wes Bos: I think they'll just charge you for the day's worth. - -58 -00:37:33,600 --> 00:37:39,420 -Scott Tolinski: Yeah, they've been super good. I mean, there's a lot of talk going on about fresh IPS. But what about talks about fresh books? - -59 -00:37:39,420 --> 00:38:43,170 -Wes Bos: Ah, Wow. Amazing. Yes, fresh books is a one of my favorite pieces of software just because as as you as we've talked about today, I'd much rather be working on stuff like this, rather than spending time in my business. So to run my invoicing to run all of my expenses. Anytime that I have a receipt, all I have to do is either have to open up the Freshbooks app on my phone and take a picture of their scene, enter in the details, or I have my assistant has access to it as well. And she can input all of that for me. So you can upload a PNG of it. I love it. Because at the end of the year, when I need to do my taxes, I have all of my invoices, I've all my expenses, you can track time, if you're doing hourly based billing, it's really just got everything that you need. If you are any sort of small business or freelancer, this is kind of the freelancing sponsored episode today. Which is pretty fun. So check them out@freshbooks.com four slash syntax and use syntax in the How did you hear about a section. Thanks so much Freshbooks for sponsoring, - -60 -00:38:43,350 --> 00:38:58,610 -Scott Tolinski: yeah, and that's the time of the year where you really want to get ahead of that stuff. Because come towards the end of the year and come towards you know that that point of time where everything's crazy, the last thing you want to be doing is rushing to get your tax in, in books in order. So right now perfect time to do that. - -61 -00:38:58,829 --> 00:38:59,340 -Wes Bos: Totally. - -62 -00:38:59,340 --> 00:39:52,980 -Scott Tolinski: So this next little category here is just for general tips and tricks. This is just like a little fun stuff. And one of my most favorite fun things that always makes me feel like a hacker, even though it's the dumbest thing in the world is when a site presents you with an overlay, like you can view this content, and then you just Inspect Element, and then click Delete on your keyboard. I don't know if everyone knows this. I feel like a lot of people probably know this. But if you select any HTML element in the elements tab of Chrome Dev Tools, you can delete it just by clicking Delete. In addition, you can also edit that HTML if you want. So I love this because there's so many I mean, people have gotten a little wise to it. But there's some websites that are still not wise to it. Or there's some people that are think they're they're slick by blocking their content behind a newsletter signup form, but they're not truly blocking it. Yeah, they - -63 -00:39:52,980 --> 00:39:55,560 -Wes Bos: want the Google search still there. - -64 -00:39:55,590 --> 00:40:06,150 -Scott Tolinski: They want the Google juice and so you just inspect it, delete it, boom. You're in it. I mean, you it's funny because you can just even be like a hacker you come in and get in there and just look at it, whatever. It's great. - -65 -00:40:06,570 --> 00:41:05,460 -Wes Bos: That's another little story is the first publication ever to do a paywall was the New York Times. And when it came out there like New York Times, if you read six articles, and then at the seventh, I'll put up a paywall, right, and I was like, that's dumb. It's just a div, you can delete it, right? So I wrote a Chrome extension. That was one line of CSS that said, dot overlay display none. And I pushed it up to the Chrome extension store. And the media went nuts is all these articles like hacker writes Chrome extension to defeat the near like defeat the paywall, and eventually got pulled from the Chrome store? Because, God, I guess I was using the New York Times logo, or it was so I don't know if it was allowed or not, which is hilarious, because a lot of people I got some nasty email from people. And it was like, it was like a huge thing. Like, should you display none a div, right? No. - -66 -00:41:06,510 --> 00:41:17,460 -Scott Tolinski: I mean, nowadays, you could do all that with just a general ad blocker where you could just have your ad blocker with the little eyedropper or something and just say, hey, this guy always block this. It's like built into every ad blocker now. - -67 -00:41:17,939 --> 00:41:24,690 -Wes Bos: It's true. And then there's also like, Chrome extensions that you can have, like I forget what the one is that it used to use is called stylish. - -68 -00:41:24,780 --> 00:41:28,110 -Scott Tolinski: Yes. Stylish, stylish, stylish. - -69 -00:41:28,260 --> 00:41:36,540 -Wes Bos: Yes. style. Yeah. And there's just like whole, like community user styles where people have riskin, websites, and I'll often have that on where it's - -70 -00:41:36,840 --> 00:41:38,480 -Scott Tolinski: annoying. Joker. Yeah, - -71 -00:41:38,520 --> 00:43:13,770 -Wes Bos: Kijiji itself they always have ads for like, the most random stuff. So you can like write little rules that select anything that is an ad on Kijiji, and just automatically hide it. Because it's it's so obnoxious when you're trying to scroll through it, and you keep seeing the same crappy bike over and over. What other tips and tricks do we have here? Multiple API keys. So one thing that we we do and when I taught at hacker u in Toronto, was we would always pull the weather and get students to display the weather. And I think they give you something like 60 requests per hour, which is almost always more than enough. But if you want to if a if a site gets popular, your API key will run out really quickly. So obviously, you can pay for for more requests. But another way around it is you can just ask for multiple API keys, give yourself an array and randomly swapping out and swap them out here and there. Obviously, that's not a great way to do a production app. But it's easy to get, you're just trying to like build something, and you're hitting this block and it's getting in the way, it's kind of one way you can do it. Another way is sometimes you have to apply for an API key, and you need to use it right, then what I'll do is I'll just apply for the API key, and then it'll take a couple days to get back to us like Yelp does this. But just go to GitHub search, like variable var, Yelp API key equals and people publish their API keys to Yelp all the time. You could just pull a couple off there and, and use those for the time being until yours. Yours gets approved. - -72 -00:43:14,280 --> 00:43:19,170 -Scott Tolinski: Oh, man, that one. That one might be pushing the line just a - -73 -00:43:19,170 --> 00:43:25,110 -Wes Bos: little bit. Yeah. And then of course, send a pull request letting the author know that they've - -74 -00:43:25,170 --> 00:43:30,300 -Unknown: Yes, put their API key public only after you, you utilize that. - -75 -00:43:30,510 --> 00:44:38,220 -Wes Bos: Yeah, use up there. It's almost always just these like free tier API keys that people do little simple examples with. Yeah, and then they pull it in, there was some quick and dirty stuff. Whenever I'm doing any of the scraping, what I'll do is I'll use a what's called a text database, because like, I don't want to have to like set up a whole MongoDB or whatever, and define the schema and stuff like that. So what I like to do is there's this package called disc dB, which will allow you to use like a MongoDB like interface and it'll just store the data in a text file. And I love that because it's really simple your text your your data just goes into a text file, it's fairly quick, probably not good and it's not good for production but he just tried to save some data to the disk real quickly. You can you pull in one of these things and it uses plain text files to to store it as I think JSON nice Yes, I think that's all the the tips and tricks that I have here. I did ask on Twitter what the different stories were. So I think we're just gonna gonna wrap up today with a couple different stories that we have. I got a couple of myself and then people tweeted them out. - -76 -00:44:38,670 --> 00:46:16,050 -Scott Tolinski: Yeah, I got at least one or two myself as well. Yeah, I could start actually one pretty recently. You know, like MLS and realtor websites. They're like really giant pain. I was working on an MLS searching website. Yeah. And all of these services. Their API's are so bad for tapping into these things. And they would not approve a local host. They were like What is your URL? And I was like, What do you mean? What is my URL? It's localhost. Like, Oh, where is the actual dev name, you know, look at it. And I was like, Well, I'm not going to set up a dev environment just for you, because they actually wanted us to pay for an additional URL that was outside of the production URL. I was like, this is a development URL, like even if I'm setting up yet, URL for this, it's still development, they're like, well, it's an additional cost for an additional URL. So I was not about to do that. Because that's absolutely ridiculous. So I went to their demo example of their code, because they write a whole demo shop up here, how it's working. And their demo example, actually, it was loading a script that was not checking any sort of anything, it was just loading a single JavaScript file that was the, like, protected file. So typically, it would hit the server, check to make sure your credentials and then serve that file was just serving this file. So I just went in the Network tab, I snipped out, I grabbed that particular file, I just copied and pasted it. And then I loaded it up, and I was using it on my local host, and in no time at all had that thing up and running. So that's probably one of my only things like this in this in this sort of, you know, this universe here. But I was very proud of myself for that one. - -77 -00:46:17,850 --> 00:49:18,840 -Wes Bos: That's great. Wow, I have a whole bunch of different stories out, I'll just kind of tell them in general, anytime someone has like a voting thing, often what will happen is that someone from high school, who I haven't talked to in 15 years, sends me a message on Facebook and say, like, Hey, I'm trying to vote my baby as the cutest baby ever to win $37 worth of baby food, and they just spam you and like to actually vote for their thing. Or my sister was in a photo voting. She'd like, submitted one of her. She's a photographer, she submitted it one of her photos to some sort of contest, and I was like, Hey, can I hack it, and she's like, go for it. And our, there's a couple other other ones that we've done. And the problem with online voting is that it's almost impossible to stop people from cheating it unless you tie it back to something that they really care about, like a Facebook account, or a verified email address or a GitHub account, you have to attach it to something. And and then the problem with that is that people don't want to sign in with Facebook, to vote for something because Facebook's gonna, like, post some shit for you. Like, oh, I voted for the cutest baby, right? So no one wants to do that. So what often these voting sites will do is they'll just set a little cookie that says has voted true, and and they'll they'll do you get one vote per day. And you can do it. But if you like, open up an incognito window, you can you can revoke or delete the cookie, you can re vote again. So naturally, I'll write a script that will just every second, it'll ping this URL. And if it's done via curl, there is no such concept of cookies. And if the security is really weak, it'll just keep hitting it. And I'll always just like, I won't do it so that someone will win, because that's dishonest. I'll do it. So it's clear that someone is cheating, like we, Heather Payne, who is she's the creator of hacker you or I used to teach, she was like in the running for like top entrepreneur. And it was clear that one of the other tech entrepreneurs that in her category was was cheating the system. So she's like, all right, who can who can do this, I was like, allow me. And we, we wrote a little script, and then gave the script to like 10 or 15 other students and they all ran it. And we're just like, at then I think what happened was we they wrote a script to make sure that they had just more like 25 more votes than we did, so that it wouldn't look like it was just a weird script that would like check how many votes they had. And then if there was like, if we were last, we would vote it up until we were like 50 ahead, but then their script would catch up. And then it got out of control because we just had these two robots voting each other up. And then before you knew it, it was like someone had 50 votes, someone had 23 votes, like 10,000 votes. - -78 -00:49:19,470 --> 00:49:20,910 -Unknown: First robot warfare was - -79 -00:49:21,300 --> 00:49:44,670 -Wes Bos: over votes. So um, both both people were clearly disqualified and removed from competition How can you run a school called hacker u and not try to hack the the voting when it's when it's clearly done? I feel sorry. Yeah, developers behind these things because they probably built it and like oh, I hope someone doesn't figure out you can delete the cookie and - -80 -00:49:48,570 --> 00:49:50,940 -Scott Tolinski: is all over one sec. Cookies gun - -81 -00:49:51,899 --> 00:51:32,040 -Wes Bos: is hilarious. Anyways, what else have I done vanity plate checker, so Ontario province where I live, you can enter your driver's license. And you can check if three different vanity plates are available. So I was trying to buy like, like web dev or HTML, CSS or something funny. And they only let you check three at a time. And then it's really slow. So, again, I built a little script that would take in an array of like, 100 different choices. And then it was run that three thing over and over and over and over, and then I would I would display all hundred results, whether it was available or not. That one, I don't know that one might have been sketchy because I attached my driver's license to it. But I never, I never heard from them. Because I was like, I don't know, I just did like, nobody 100 buddy. On Twitter, I asked what they what some possible ones are. Dennis Walsh, he said, he made a vehicle auction bidding app that signs into car auction, finds the correct lanes, waits for the right vehicles and then bids like a human. I thought that was pretty nifty. Because that was like the thing back in the day with eBay, you got sniped, or like you would no one would bid on this thing until six seconds before the auction was up. And then you you you coat something to sell. Right? And they they have stuff against that a lot of online auctions will extend the bidding period for two minutes. If someone bids in the last two minutes, so then it'll kind of keep going, which is frustrating for people that are trying to buy stuff online, which I think is part of why no one really uses eBay anymore. - -82 -00:51:32,970 --> 00:51:49,290 -Scott Tolinski: Yeah, then it was always the most frustrating because you'd always get sniped, or like I don't know. It was like it was so frustrating because there was like people that were professional eBay errs, and they were just always better than you or they were robots. And they were better than you because they're robots. Right? - -83 -00:51:49,530 --> 00:51:58,230 -Wes Bos: Totally. I hate robots. But I've built a few in my day. Do you have any other ones that are you pull any other ones out from here? Yeah, - -84 -00:51:58,260 --> 00:51:59,310 -Scott Tolinski: I was kind of looking. - -85 -00:51:59,310 --> 00:53:05,370 -Wes Bos: I got one here. Ben Foster said a couple years ago, 711, Australia had a Snickers promotion, where the price would change throughout the day, based on whether it detected more angry tweets. I built an electron app that scraped the website and notified me when the price fell below 60 cents. So that's pretty wholesome. I like that because it didn't, I thought I was reading this. I was like, and then you built a bot that tweeted angry things and the price dropped. And he's like, No, I just like monitored the price. And and then once it fell below 60 cents, I guess he bought a whole bunch. It's so hilarious. Ray Rielle, which sounds like a very Canadian name. I think he's Canadian. He has this talk called my hockey team sucks. And I just I didn't watch the whole talk. It's about half an hour. But I did a quick look over it. And it sounds like he did some scraping and in data parsing to get some data stats from stuff that he needed. So if you're, I love hearing stories about this kind of stuff. So I'm gonna I'm gonna watch this talk. It's from the forward jazz conference. Yeah, and I would check it out. We'll put the link in the show notes. - -86 -00:53:05,700 --> 00:53:20,520 -Scott Tolinski: This one's also pretty good from Jay Scott Chapman, he says that he wrote a puppeteer app that basically replies thank you to every single person that wrote Happy birthday on his face. Dying when - -87 -00:53:20,520 --> 00:55:10,620 -Wes Bos: I read that one, hilarious. Oh, that's super good. I like that a lot. I probably one of the best scraping things that we haven't talked about is YouTube DL. We've talked about a podcast a couple times before, but it's a command line command line utility that will download like mp4 or anything from YouTube, Vimeo, like a whole bunch of other sites. And all you have to do is pass that a video ID or a URL or, or a playlist and I did this before our trip, we went to the cottage I downloaded a whole bunch of my kids are super into these, like, watching other kids play with toys, and then trying to recreate it. It's just like, I never knew it was the thing. But there's these women tube is weird on YouTube that are like, grown, and they play with toys. Like they were just like by like Paw Patrol, or like they just like by trolls. And they just like play with them be like, Oh, I'm gonna see Mayer. And then my kids prefer to watch this woman play with her toys versus the actual pop patrol show. Right? And it's so weird. It's so bizarre. And this woman is making millions it's called the fizzy fun toy show or something like that. This woman is making millions of dollars off of just playing toys online. It's weird. It's so bizarre, but they when it's time to watch TV, that's what they want to do. And then it's kind of fun because then when they when it is playtime. You can tell that their playtime is much more imaginative, which is kind of cool. Anyways, I needed to tell a whole bunch of those for for the iPad because I'm wanted an offline so you can just pass it a playlist ID and it'll download all the all of them for offline. And then I use the VLC VLC app on the iPad just to play the mp4. - -88 -00:55:10,980 --> 00:55:14,220 -Scott Tolinski: Nice. Super cool. Do you have anything else here? - -89 -00:55:14,820 --> 00:55:23,430 -Wes Bos: I don't think so. I guess I are running up on an hour here. I think it's, it's, it's amazing. You can fill an hour with all these crazy scraping. - -90 -00:55:23,640 --> 00:55:42,450 -Scott Tolinski: Yeah, share your stories of fun stuff you've done like this. If there's anything particularly adventurous or fun or interesting, we'd love to see what you're doing. I am so intrigued by all of these things. And we'll we'll pass them along and share them along so everyone else can get inspired by some of your crazy stuff. Don't take it too intense, though. - -91 -00:55:42,480 --> 00:55:44,850 -Wes Bos: Don't need a knee and trouble and go - -92 -00:55:44,880 --> 00:55:46,710 -Scott Tolinski: Yeah, equations on our hands here. Yeah, - -93 -00:55:46,890 --> 00:55:56,280 -Wes Bos: no, don't if you don't do not call me if you're in jail, or anything like that. Because make sure everything's on the up and up. Don't do anything illegal. - -94 -00:55:57,240 --> 00:56:00,210 -Scott Tolinski: Don't hack presidential candidates. Don't be Elon. - -95 -00:56:02,670 --> 00:56:05,310 -Wes Bos: Awesome. What about a sick pick? Do you have any sick pics today? - -96 -00:56:06,030 --> 00:57:13,350 -Scott Tolinski: Yeah, I got a sick pic. It's a game I've been playing a lot. It's called octo path traveler. It's a RPG for the Nintendo Switch. And it is awesome. It's sort of takes you back to the days of like Super Nintendo RPGs. And it's if you're a fan of the style of game like Final Fantasy games or whatever. It's sort of like a can't miss. The graphic style is like brilliant. It sort of looks like a bit but it's 3d and ends up with this really great tilt shift camera and everything is sort of this. It's hard to explain. But the visual aesthetic for this thing is so cool. But on top of that the game is great. It's all about these stories. And these people again, if you like Final Fantasy type games, you can't miss it. But let me tell you not only is this game awesome, but the soundtrack is awesome. In fact, for a game that's of this size, like it's not like a triple A title or something. It's not like I mean, it's made by Square Enix, but it's not like the biggest game of the year. The soundtrack is is one of the best video game soundtracks I've heard in a long time. So I've been playing this on YouTube all the times. I don't think it's on Spotify yet. But it's it's great, like full orchestra stuff. And it's just really nice. - -97 -00:57:13,620 --> 00:57:21,420 -Wes Bos: It's wicked. I like to to check I need to start playing games. I never play game. So every time we talk about these, like that food one as well. You talked about what's that called food one's - -98 -00:57:21,420 --> 00:57:40,920 -Scott Tolinski: great overcooked, and we actually had a ton of people tweet out saying how much they love overcooked. In fact, I just had a buddy over and we ended up playing overcooked for like the entire weekend because it's so much fun. And it's way different experience. We had three people in the kitchen and so two people and all of a sudden everything changed. It was like a completely different game. - -99 -00:57:41,220 --> 00:58:13,320 -Wes Bos: Wicked. Alright, I've got two YouTube channels that I'm going to recommend because I love watching YouTube, especially like when I have lunch or if I've got like half an hour of downtime rather than just like flipping on the TV. I'll often just find some, some YouTube and I've got all kinds of different interests. And a couple of the ones that have been I've been into lately has been versus a V, which is Arduino versus evil used to stand for and it's actually a guy from Ontario. It sounds like he's from Northern Ontario, because he he talks like, you know, Don Cherry is. - -100 -00:58:13,590 --> 00:58:14,400 -Scott Tolinski: Yeah, so yeah, you - -101 -00:58:14,400 --> 00:58:15,900 -Wes Bos: kind of talk like, - -102 -00:58:16,260 --> 00:58:30,510 -Scott Tolinski: Sherry and the grapes is done. Terry is his nickname grapes. I don't know. I think it is. I could just be talking out of a swag. Yeah, that's right. Yes. Grapes. Yeah, there we go. Got it. - -103 -00:58:30,720 --> 00:59:52,050 -Wes Bos: He kind of talks like, like him, but I don't know he is hilarious wave. It's very, don't watch her on your kids. There's lots of swearing in it. But what he does is he opens up tools and electronics like you can tell he's a super smart guy. Because he's got a you can tell he's got a background in electronics, he can tell he's got a background in metalworking, and heavy tools. And not that those are electronics kind of interests me but what it'll do is it'll take like a DeWalt drill and open it up. And he'll explain the different materials, how it's made, how its die cast, why something might be good quality or not. And I find it just fascinating to hear about that side of I don't know of how things are made. And then the other one is musty one m ust IE one and he does a lot of small engine stuff, where he'll he'll go to a yard sale and pick up like a go kart or a boat motor or generator for like three bucks. And then he'll, he'll try to fix it and what I've learned, it's always the carb bi I've watched like 20 of these videos and it's always it's always the carb. He's always cleaning carbs pretty much that's what I've learned. But it's kind of interesting because he's just got this nice kind of cadence that he goes through fixing stuff and explains how things are broken and when when it's worth fixing and and whatnot. So that was pretty, pretty good one as well. - -104 -00:59:52,500 --> 01:00:08,460 -Scott Tolinski: That's amazing. Yeah, I've been I've been a huge fan of YouTube overall lately. So I it's one of those things that I've been publishing YouTube content for so long. And it's like only now have I been like, wow, yeah, so much good stuff on YouTube. Yeah. Especially like stuff. - -105 -01:00:08,480 --> 01:01:11,970 -Wes Bos: You're, you're finding people outside of the like, yeah, there's like vloggers and tech guys on YouTube and people that live in vans and stuff like that. But there's this whole like, other side, like, if you want to learn anything, I think it's such a good way to just open up your mind, I put all these videos on to x. And I just like, just watch and watch and watch and watch and like, I know a weird amount about small engines and a look at how electronics are made and solar panels and all kinds of like it just is weird rabbit holes that YouTube puts me down. I got super into these like, off grid living people that are like building houses with solar panels on top. Maybe that's why how I like re watching solar panels. And then I got into these people that build these like, tiny houses with solar panels. And most of the time, I'm just shaking my head because I can't imagine. But yeah, it's super interesting to see someone build something and, and be really knowledgeable about about that. - -106 -01:01:12,180 --> 01:02:05,520 -Scott Tolinski: I've recently stumbled down the rabbit hole of photography based YouTube. And there is so many photography channels, oh my god, there's so many of them. And one of the best part about photography channels or videography, whatever for cameras is that they all look good. Because all these people have great camera equipment. So all of the content looks great. And I'm just like watching it's like, oh, what lenses, what lens and what kit, okay, and now I know all the you know, identifying lenses and whatever I've never I've always, you know, been somewhat into it, but I've never been this into it. Now I'm like, Okay, I gotta get this and this and this and this and Okay, everyone's using this and everyone's using that. And this is this is what I need to be into. It's so funny. There's like, it's just like web development. There's like specific trends that you can tell that people are are latching on to right now and what they were latching on to several months ago. Yeah, the new hotness, it's the height. It's just a whole nother world. That's awesome. - -107 -01:02:05,730 --> 01:02:28,260 -Wes Bos: That's great. I also really enjoy watching rope swing fails, you know, like, Oh, yeah, dude, just great shit. like China sales. Yeah. I used to not be able to watch America's Funniest Home Videos, because I just like cringe, because people get really hurt on these videos, right? It's like, haha, but like, no, that guy probably was in the hospital, right? - -108 -01:02:28,950 --> 01:02:56,970 -Scott Tolinski: There's no better videos than people falling at weddings and America's Funniest videos while they're dancing or whatever. We had this a upstairs roommate in college, and they didn't have a TV and we had a TV and cable. And she would only come down to hang out. When America's Funniest Home Videos was on. She would knock out you know, the schedule, she just knock on the door. She'd be like, America's Funniest videos is on there. Like oh, by all means use the TV Go. Go right ahead. - -109 -01:02:59,370 --> 01:03:06,270 -Wes Bos: It's true. That was a really good show when people weren't totally getting ruined. Alright, okay. - -110 -01:03:06,270 --> 01:03:08,790 -Unknown: Somebody the undocumented. - -111 -01:03:09,720 --> 01:03:10,770 -Wes Bos: Shameless plugs. - -112 -01:03:12,180 --> 01:04:04,110 -Scott Tolinski: levelup Pro, I have a new course coming out on Apollo client. It's specifically on Apollo client, more so than anything else, but Apollo client with react. So in this course, we set up a very, super basic API. It's a totally open API. It's with graph CMS. And it's just set up and we almost set it and forget it. And then after that's up, and we explore all of the cool and interesting features in Apollo, such as optimistic UI, and in pagination and caching, persistent caching local state and all sorts of cool stuff. It's all about Apollo. So check it out. It's going to be level one Apollo with graph QL. It's gonna be on level up tutorials this month. So sign up for level up pro get access to that this month. And yeah, levelup Pro is gonna have a new series every single month. I've been going for a little while now and tons and tons of new content all the time. The signup for a year you save 25% so that's the way to do it. In my opinion. - -113 -01:04:04,590 --> 01:04:29,580 -Wes Bos: We're good. I'm just gonna plug my courses in general, if you don't know, I create web development courses at Wes Bos comm forward slash courses. You can pick one up, I've got some stuff coming up on graph qL and some JavaScript stuff and some big platform improvements to have been working under the hood on some mega room and Sarah nothing's been pushed yet though. So hold the hold tight coming soon. And I think that's it for today. - -114 -01:04:29,850 --> 01:04:45,330 -Scott Tolinski: Nice. Cool. Well, we'll catch you in the next one face, please. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax61.srt b/transcripts/Syntax61.srt deleted file mode 100644 index b0148301e..000000000 --- a/transcripts/Syntax61.srt +++ /dev/null @@ -1,232 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node modules barbecue tip workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA bombs and Scott Taylor. Totally at ski - -2 -00:00:25,920 --> 00:03:01,050 -Scott Tolinski: Oh, welcome to syntax in this hasty treat episode where we bring to you a bite sized topics. We're gonna be covering NPM we're gonna be covering yarn. We're gonna be covering all sorts of things involving NPM yarn, like package files, lock files and all sorts of good stuff. And with me as always, is West boss, Barracuda. Bah. Yeah, Barracuda boss in the house. And I am Scott otoro loco to Lynskey here we are ready to go. And yeah, today's episode today's hasty treat is sponsored by Netlify. Now, many of you who have been listened to this podcast have tried Netlify after hearing it on this podcast, and the reaction is always the same. The reaction is seriously. Wow, I can't believe I haven't tried this yet. So many people tried Netlify for the first time and are endlessly impressed with the initial experience was one of the reasons why we first reached out to that because we love Netlify. So much. This service is a hosting service for front end code, allowing you to build deploy manage modern web projects, it takes care of all sorts of the painful parts of hosting. I mean, you you could list out the most painful parts of hosting. And this thing takes care of nearly all of them. For instance, it takes care of continuous integration, right? You push up to a repo Netlify takes care of the rest. It takes care of certs SSL certificates, who you know, you need an SSL certificate and Netlify has got you for free. And every single site you deploy automatically gets an SSL. So there are just endless amounts of awesome little things about this Netlify platform that Netlify hosting that are just endlessly amazing. Now in addition to that, there's also some really nice additional features like functions, which is a simplified interface for working with AWS, serverless functions. It's incredible. There's identity, allowing you to manage your own setups, logins, password recovery, and more all sorts of that stuff. And there's even a forum system. So anything that you could possibly think of needing a server for Netlify has got you covered. And you can go ahead and roll out your front end projects with Netlify. Again, just try it because when you try it, you're going to love this experience. There's nothing greater than a static site running on Netlify. The Jam stack on Netlify is one of the ultimate new web experiences. So check it out. netlify.com forward slash syntax, let them know that you heard about Netlify on syntax, again, one of my absolute favorite services, we're so happy to have them as a sponsor. So that said, let's get into some NPM. Some yarn, some package. Goodness, - -3 -00:03:01,230 --> 00:03:46,620 -Wes Bos: yes. So this episode was spurred on by actually a potluck question. So if you have a potluck question that you think might be a bit large submitted anyway, because we can turn we can do what we want. We can turn them into full episodes. This question was from JC Hyatt who, who runs deadlifts and he said, Can you explain what package slash yarn lock files are? Why were they introduced? Why? Why are they useful? Why would I want one? Why wouldn't I want them? Why would do I put one in Git? Do I not? So we're gonna kind of go into that work. Explain what NPM is where the package dot JSON file is? With the dependency tree is what cember sandbars Ember, I want to say sandbar Ember, but it's its semantic. versioning so some for timber doesn't say - -4 -00:03:46,649 --> 00:03:53,460 -Scott Tolinski: summer, December September. Yeah, I know if we were just talking about this before the show. That is a word I have never said out loud. - -5 -00:03:54,060 --> 00:04:13,110 -Wes Bos: So lots of words I've never said out loud and I always butcher them. So yeah, whatever. Anyways, we're gonna talk about that. And then we're going to get into the the kind of recently introduced package dot lock dot JSON file and, and what that is. So first, let's talk about what endgame. You want to take a stab at what NPM and yarn or? - -6 -00:04:13,200 --> 00:05:18,360 -Scott Tolinski: Yeah, NPM and yarn are basically a ways that you can interact with packages, right. We all use different libraries and packages and our websites. And so yarn and NPM are package managers, there's these systems that go and grab the packages that we need, when we ask them to write from various locations. So when we need a package, we tell NPM, or we tell yarn to go fetch this package by a name, that name then goes ahead and grabs the actual package. So it's sort of a registry, right? So it's a package manager registry of where you can find these packages and automatically keep them up to date with the correct versions for your application. Right. So at the end of the day, you end up using A bunch of different things, you tell your package manager, which packages you'd like to get, it grabs them, or potentially at what versions, you can use it to keep your packages up to date, but it stores them away inside of a node modules folder. And it kind of keeps them out of out of sight out of mind and allows you to use them in your application. - -7 -00:05:18,600 --> 00:06:01,110 -Wes Bos: What's the difference between NPM and yarn? Well, they at the end of the day, they do the same thing. They take in your package, JSON file and your package. json file is a list of all of your dependencies. So if you're building a react application, you might have react and react DOM and react router DOM and then you might have like axios, and a couple more dependencies. And these are just libraries that you need in order to build your application. And you import them into your application. Now, when you create an application, you don't actually take all of your dependencies along for the ride, because that would be very large. You actually, all you have to actually do is just keep a list of dependencies that you want. And then you go ahead and, and npm install them now yarn came around, I don't even know maybe a year ago, - -8 -00:06:01,140 --> 00:06:06,630 -Scott Tolinski: year and a half ago, maybe maybe long year and a half ago. It's it man. Yeah. moves by an old Yeah, - -9 -00:06:06,659 --> 00:06:14,460 -Wes Bos: yeah. But it came around because NPM was kind of slow. They didn't really have this idea of a lock file - -10 -00:06:14,880 --> 00:06:15,930 -Scott Tolinski: type made in. - -11 -00:06:16,560 --> 00:07:48,600 -Wes Bos: Yeah, and it was it was kind of painful, because you would both it would be slow to install things. And also, you could get into trouble, we're going to talk about the semantic versioning in a second, you get get into trouble where something could change from out from under you without you changing any of your code. And that's bad when you want reproducible builds, right? So yarn is a bunch of folks at Facebook and a couple other companies a couple, really, a couple people in our industry who are who are really well respected, sort of got together and built this thing in private and then sort of came out and said, yarn, here's yarn, what it does is it sits on top of NPM registry. So this is not a secondary registry. If you if you publish a package to NPM, you don't also need to publish it to a yarn, but a yarn will also add some caching on top of that, so that it's a little bit faster, it does some stuff where it doesn't have to also duplicate. If you download a package once and then you npm install again, it will just take that from locally, there's a couple things about it. And it was great when it came out and it still is great. I find that a lot of people still use it, although it sort of gave NPM a kick in the pants of things that they needed to fix. Because when it came out, I was a little bit I was happy that these things were being fixed. But I was also bummed because I don't like it when now Oh good. Now we have two different ways to do it, especially as a tutorial creator. Yeah. Now there's like, okay, there's yarn. And now there's NPM. Now I have to like support both of those. And they're - -12 -00:07:48,600 --> 00:08:28,170 -Scott Tolinski: slightly different in how you do things. They're not that far different. But they're different enough where you can't just say swap the word yarn with NPM. And you're good to go. Right? And I guess that is Yeah, that's the concern is that the people who are creating this content, now you have to worry about which one we use. And even in myself, you see my tutorials, I sort of bounced back and forth between NPM and yarn in the tutorials themselves based on what the project itself is calling for, for instance, create react app uses yarn. So every tutorial that I do with create react app, I use yarn, but other tutorials that were the system itself, the default is NPM. And their docks also used NPM. Because I'd like to keep it as close to their documentation as possible, you know? - -13 -00:08:28,380 --> 00:10:19,550 -Wes Bos: Yeah, we barely talked about this. Someone had a question about, like bootstrapping applications. And they asked if someone used the Yeoman generator. And it turns out that yarn had this kind of awesome generator where you could I forget what the command is. But you could like set up a kind of a create react app for all kinds of other examples. And NPM has now rolled that into NPM. So you can like NPM, I forget what the command is. I wish I knew it off offhand. But you can you can set up a simple example really quickly by just saying NPM, create graph qL example or something like that. And then it will go off to GitHub and download the latest. And it's good, because you don't have to tell people to like fork a repo and download it and then CD into the directory? Yeah, you can just go ahead and do it. But it seems like NPM has has added a lot of these things I have stuck with NPM all along, just because I haven't found the speed to be that big of an issue, primarily being on a very fast internet connection. It hasn't affected me all that much. And I also don't want to introduce a new thing into my tutorials, which I don't know, maybe it will eventually fold back into NPM. Maybe it won't. It's just kind of like the future is kind of unknown. For me at least I'm sure if you talk to the developers behind it, they would say that's not true. But I don't really want to delve into something that's not totally necessary, because from what I see, it tends to be more advanced developers who are using yarn, and if people who are doing my tutorials are using yarn they already know how to use Use it. And it's not a problem for them. Like you can do anything you can use create react app with NPM. Or you can do it with yarn, it doesn't doesn't matter at the end of the day, what you're using. And the people who want to use yarn are intelligent enough that they they know what change, whereas some people just want to follow me typing npm install. - -14 -00:10:19,590 --> 00:10:22,500 -Scott Tolinski: Yeah, yeah. What do you use personally, on your own projects? - -15 -00:10:22,910 --> 00:10:42,900 -Wes Bos: NPM. I've never never used yarn myself, I installed it. And that was pretty much it. I do like the interface of it. Because often, if you do a create react app under the hood, it uses yarn. Yeah. And I do like the interface that shows you much better. And I do find that it's faster. It's just never, never been too much of a pain that I've switched. - -16 -00:10:42,920 --> 00:11:05,160 -Scott Tolinski: Yeah, I used yarn. Personally, for some good reasons, and some really dumb reasons. So good. So good reasons would be that it's fast. And I like it. The bad reasons. Oh, actually, here, actually does NPM do this. Now. I've been using yarn for a little bit. So I don't know when you add a package by default, does it add it to your package? JSON instead of that? Yeah, - -17 -00:11:05,160 --> 00:11:08,100 -Wes Bos: so annoying. dash dash save? - -18 -00:11:08,130 --> 00:11:11,550 -Scott Tolinski: Yeah. So that is an NPM. Now? Yeah. - -19 -00:11:11,610 --> 00:11:12,870 -Unknown: Oh, yeah. It's been in for - -20 -00:11:12,930 --> 00:11:41,010 -Scott Tolinski: six months now. Okay. Yeah. So I'm just so used to that in yarn, you didn't have to do save. So that's one of the things that caught me really quickly, and then I just haven't left. And so yeah, yarn has been really fast. And the dumb reasons that I use yarn is that you don't have to type run on your scripts. So you can just do yarn, start yarn, slides that have run, you're saving three characters. And you know me, I love that. So that and also the yarns use of emoji in their their build process. Yeah, those are two dumb reasons why I love it. - -21 -00:11:41,040 --> 00:11:43,770 -Wes Bos: Those are very valid, very valid reason I also Yeah, - -22 -00:11:43,770 --> 00:11:51,990 -Scott Tolinski: but it overall, it is fast. And again, it came out with a bunch of features initially, that made my life a lot better. And I've just stuck with it. So that's pretty much why I'm using it. - -23 -00:11:52,380 --> 00:14:14,640 -Wes Bos: Awesome. So before we get into the next section, we need to maybe explain what semantic versioning is. So when you download react, let's say you've got react version 16 point 2.1. Like, what why is there always like something point something point, something like what do those numbers mean, and that is a standard way of declaring the version of your software. And those three numbers mean something, the the first number 16 is that a major version. And when you bump from 16 to 17, that means it's a major version change, and there's likely going to be breaking changes. So you know that when you update from 16 to 17, you need to be aware that something might change on you, right, and then the second.is, the minor version, and that is a new features can be added, but it's still backwards compatible with all the other versions. So you go from react 16.1 to react 16.2 or 16.3, you'll know that you don't have to worry about us, you can probably just upgrade that thing without sweating it. Obviously, that's not always the case. But as a developer, you should never remove any or introduce any breaking changes or remove any API's, you can only add in a in a minor patch. And then the the third version is what's called a patch, which is just like a bug fix. So you might have react 16 point, 2.0 and then they're like, oh, shoot this, like this is breaking on iE 11 then what they'll do is they'll they'll release, React 16 point 2.2 and then that will that will be a patch, it will not introduce any new features, it will not remove any API's, it will simply just be fixing it as it was expected to work. And that is what semantic versioning is. And the hope is is that or the way that NPM and yarn work is that if you have react 16 point 2.0 in your package, JSON, it's not going to download react 16 point 2.0 it's going to download the the most recent version of that value. So it might be react 16 point 2.4 right, because that's the most recent I do believe that it will I'm not sure I'm not sure about this we'll have to look it up do you do you actually know will it go up a minor version which is the number in between - -24 -00:14:14,670 --> 00:14:48,300 -Scott Tolinski: so in your NPA in your package file if the dependency is listed with a carrot, carrot version 3.9 point two then therefore, you'll be able to up or it will install the latest minor change. So it could be three dot whatever dot whatever, where if you have a till day right you sometimes see that till day 3.2 point nine is the latest patched version as in 3.9 point whatever right? So So yeah, till day verse carrot is the difference there. - -25 -00:14:48,720 --> 00:15:38,220 -Wes Bos: And the default for NPM when you npm install something, I'm just looking at axios right here, so the latest version of axios is zero point 18.0 Then, because I have a carrot in front of that, that's what NPM does by default, if zero point 19.0 were to be released, and I typed npm install, it would, it would go ahead and install zero point 19.0, or zero, point 19.1. Whereas if you just have a Tilda, you say stay on this minor release, but only give me bug fixes. And if you don't have anything, if you remove a carrot or a Tilda, then you will you will never change from you'll never change from that exact version. Now, any anything to add to that before we go on to the the next part, which is a bit mind bending, no, I - -26 -00:15:38,220 --> 00:15:40,410 -Scott Tolinski: think the next part is the important part here. - -27 -00:15:40,710 --> 00:16:24,600 -Wes Bos: Yeah, so the, that's great and all where you could say like, okay, I only want version 1.2 point three. And and, and a lot of people want that consistency. Because people make mistakes, open source authors will introduce bugs and breaking changes. And you say, Okay, I get it. But I don't want to deploy this thing to my server, have it npm install a patch, but it actually that patch introduces a bug or a breaking change or API by accident. And then my whole application is broken. So they want to say, if I'm working with version 1.2, point three, locally, I want to install version 1.2. Point three on the server not version 1.2 point four or 1.3 point zero - -28 -00:16:24,630 --> 00:16:29,670 -Scott Tolinski: or on any other users a computer for that matter if you're working with that's true, it - -29 -00:16:29,700 --> 00:16:51,990 -Wes Bos: works on my machine. Yeah, not yours, right. So the solution to that is you can just set the versions. But the problem is that with NPM, you have what's called the dependency tree where you have a dependency like react, but react might have a dependency of this is a dumb example. But it doesn't actually have it, it might have a dependency of axios. And axios might have a dependency of - -30 -00:16:52,290 --> 00:16:54,270 -Scott Tolinski: jQuery left jQuery. - -31 -00:16:55,320 --> 00:17:59,810 -Wes Bos: dependency of backbone. Yeah, and like a dependency as a dependency as a dependency has a dependency and as a dependency that has a dependency, and it will just go on forever. And that's part of the reason why your node modules folder is usually six gigs. Big is because these things are installing, installing slowing. And one of the big benefits to yarn is that we would flatten that as much as it could, but it can only flatten so much because of different versions that are required by by different modules, right. So it's a problem where even if you clearly define the version number, it might not be that your dependency clearly defines the version number, it might use the tilde, or the carrot saying this general version. So what a package dot lock file will do is it will go all the way down through your entire dependency sometimes 40 levels deep and lock in those actual versions that you've NPM installed, and making sure that when you run npm install, and there's a lock file present. You're actually getting the exact versions, and not the some fair versions where it's, it's it's good enough. - -32 -00:17:59,840 --> 00:18:35,220 -Scott Tolinski: Yeah, this is one of the things that Yeah, absolutely. I mean, basically, the lock file is a treasure map for what your package is great, right? It's everything. It's the list to everything. And you know, when this this, these lock files initially came in, I mean, the lock files have existed in other systems for a long time. Like we're Ruby package manager has locked files. It's not like a new concept overall, right? But yarn NPM, for a long time didn't have lock files. And that's one of the things that yarn brought to the table when it came out as like, Hey, we have lock files. And people I think before that, whether using like shrink wrap, is that what the shrink wrap was used for? - -33 -00:18:35,360 --> 00:18:52,800 -Wes Bos: Yeah, so NPM has this thing called shrink wrap, which people were using at the time. There are some differences if you're a package author, but there's not a whole lot of difference if you are just a user. So you can look into the the difference of that. But it seems like the lock file is the way forward. - -34 -00:18:52,820 --> 00:19:44,250 -Scott Tolinski: Yeah. So either way, yarn, bra lock files. And then NPM came out with lock files pretty soon after, once they had their big update with all their extra new cool features. And now we have our wonderful lock files. So these lock files, again, are things that you should be basically keeping with your application, as long as you want it to work somewhere else. For instance, I think it was like a couple episodes ago, I mentioned that I actually didn't have these lock files in my version control. And it's because I'm the only person working on this thing. But that's actually not a good excuse. Like I needed to remove that really quickly and get these lock files in my repo like ASAP. And it's only because I hadn't had any issues with it that I've never really cared. And, again, I never had anybody else working on the code base. So it's like not like, yeah, that it's working on my system never really happened to me before. So yeah, you'll want to keep these lock files with your code base in your version control. Absolutely. - -35 -00:19:44,460 --> 00:19:56,570 -Wes Bos: Yeah, I agree. I always commit them as well. And what's kind of nice about that is if you ever do do an upgrade, like NPM update, or I use a module called ncu node check update, - -36 -00:19:56,570 --> 00:19:59,730 -Scott Tolinski: I use ncu to yellow update and see you all the time. - -37 -00:20:00,320 --> 00:20:30,990 -Wes Bos: Yo, check. I tweeted the other day that I YOLO updated a WordPress install with 20. plugins. Yeah, work. So YOLO update is the only way to live your life anyways, it's kind of cool because you can see exactly the different pieces that have been updated not just your top level packages, but maybe dependencies dependencies of what package have changed. So that is package dot lock NPM yarn. Hopefully that will clarify a few things. - -38 -00:20:31,019 --> 00:21:08,790 -Scott Tolinski: Maybe we should talk about some of the coolest new features in NPM that have ever arrived lately. For instance, NPM just drops, like ever since yarn came out. NPM has been dropping features left and right, which is a great thing, obviously this competition, right, a little bit of back and forth of who's doing what, but NPM like recently, so somewhat recently, they have a new thing that's NPM outdated returns, if you have outdated packages, sort of like an NC NC you still more featureful Yeah, but there's also things like NP x, have you used NP x yet? Because I used the NP x recently. And I was like, I like this. - -39 -00:21:08,840 --> 00:21:14,840 -Wes Bos: Yes, I have used it before I forget. I used it on create react app, I believe. Yeah, that - -40 -00:21:14,840 --> 00:21:59,940 -Scott Tolinski: what is recommended now. Yeah, so NP x is built into NPM. Now, if you have the latest version of NPM installed, you have NP X on your computer MDX is simply just the command NPM x instead of NPM. And then you can type in a package name, and it will run that package without ever installing it on your computer. And this is particularly useful for things like create react app, that's a generator, right? Like why do you need create react app installed on your computer, if you're on the network currently, or whatever. So instead of running NPM, install, create react app globally, and then running create react app, create your app or whatever, you can just run NPM create react app, and it's going to run the command as if you were running it locally. And it - -41 -00:22:00,029 --> 00:22:01,620 -Wes Bos: was talking about - -42 -00:22:01,649 --> 00:22:13,560 -Scott Tolinski: Yeah, I love this is it I mean, I actually use NPM. Even if I'm using yarn. I do like this a lot, especially for anytime I need to run a script immediately. without installing it. It's a new feature that's hot, hot, - -43 -00:22:13,679 --> 00:23:26,940 -Wes Bos: cool. Also new in NPM is security warnings, which is a huge issue. People ask me this all the time, like, how do you know that? If you're if you have a dependency that uses a dependency that uses a dependency dependency that takes your entire hard drive and emails that to somebody like how do you know that's secure? Right? So there's a node security project that will, I don't know, there's I don't think they audit every single module because that's impossible. But if there are security issues, when you do an npm install now, or you run NPM, audit, and or NPM, audit dash fix, it will tell you of possible security issues, as well as the severity of them. And then it will also give you the ability to link out to the node security project and read the problem with that module. Because sometimes it's like it's a it's a major issue, but only if you use it in this really bizarre way that very few people actually ever do. But it's good to know because it kind of keeps you on your toes. And it also makes you update your your modules more frequently. Because it seems like anytime you do an npm install now it's like 480 critical security issues. Oh, good. Yes, - -44 -00:23:27,239 --> 00:23:27,900 -Scott Tolinski: yeah, - -45 -00:23:27,900 --> 00:24:38,460 -Wes Bos: there was there was a big bug that came out in a dependency, it was like a regex DDoS attack. And almost every package out there had it as a dependency. So almost every package that you install would have a security warning, because it's a dependency, right. That's the problem with some of these really small dependencies. Same with the there used to be this package called left pad, and left pad, all it did is if you had a string, that was like five characters, and you wanted it to be eight characters to the left, you would just add an extra bunch of spaces to the left of the text, right. And it was like this is like six lines of code. And the guy who wrote left pad is angry for some reason. It was it was justified his anger. But he took it down, which was a bit of a not a cool move. And then it broke, like most of the internet, because almost every package had depended on these, like six lines of JavaScript. And you can no longer do that you can deprecate a package. But you and you can your next version can be nothing. But you can never remove a package entirely unless there's a justified version reason for it. Yeah, - -46 -00:24:38,460 --> 00:24:46,350 -Scott Tolinski: I'm sure there were a lot of people freaking out at that moment in particular, I remember when that happened. And there were a lot of people freaking out. - -47 -00:24:46,859 --> 00:24:50,190 -Wes Bos: Yeah, yeah. All right. Anything else to add to this? - -48 -00:24:50,279 --> 00:25:17,970 -Scott Tolinski: I don't that's pretty much it. Yeah, I love again, I love this competition. I love the new things. If there's any features of particular that we didn't shout out of NPM or yarn that you would happen to particularly Like, let us know. We'll retweet you out. And we'll share that with the community here. Because, you know, this stuff is great. And it's hard to know everything. So we'd love to hear what anyone else is using with this stuff just to do you know, scripts or whatever. I wouldn't even talk about scripts. That's that's one of the things we didn't talk about at all. I mean, we briefly Yeah, we'll have - -49 -00:25:17,970 --> 00:25:24,180 -Wes Bos: to do an entire another show on on NPM in general, or NPM scripts. Yeah, and because - -50 -00:25:24,540 --> 00:25:26,610 -Scott Tolinski: there's a lot to it. There's so much there. This is - -51 -00:25:26,610 --> 00:25:28,950 -Wes Bos: becoming a not so hasty tree either. - -52 -00:25:28,950 --> 00:25:37,170 -Scott Tolinski: Oh, yeah, right. Knows man. We got to do a part two. Okay. But yeah, it is. I think this is pretty good. Again, let us know what kind of stuff you're using with this stuff. We want to hear it. - -53 -00:25:37,410 --> 00:25:54,450 -Wes Bos: Yeah, we're at syntax FM on Twitter. The Twitter has been on fire lately. So many good tips. People have been tweeting them at syntax FM and then we'll just retweet them so the community can get it. We've got almost 12,000 followers on our Twitter account now. So you'll you'll get some decent eyeballs on your tips, which is great. - -54 -00:25:54,480 --> 00:25:56,220 -Scott Tolinski: Yeah, absolutely. All right. I - -55 -00:25:56,220 --> 00:26:00,750 -Wes Bos: think that's it for today. Thanks so much for tuning in. Uh, signing off. This is West Barracuda boss. - -56 -00:26:00,960 --> 00:26:03,390 -Scott Tolinski: That's Scott El Toro loco to Lynskey - -57 -00:26:03,930 --> 00:26:04,860 -Unknown: say please - -58 -00:26:06,660 --> 00:26:16,410 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax62.srt b/transcripts/Syntax62.srt deleted file mode 100644 index 6340cc373..000000000 --- a/transcripts/Syntax62.srt +++ /dev/null @@ -1,152 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,590 --> 00:00:09,000 -development treats out there. strap yourself in and get ready to live ski - -3 -00:00:09,000 --> 00:00:10,560 -and West boss. - -4 -00:00:10,589 --> 00:00:29,609 -Wes Bos: Hello everybody and welcome to syntax today we've got a tasty potluck episode for you today, which is a potluck episode is one where we take in your listener questions and we answer them. It's kind of nice because we'll spend a couple minutes on a whole bunch of different topics will bounce around with me as always, today is Scott to Lynskey. How you doing today sky, - -5 -00:00:29,639 --> 00:00:36,240 -Unknown: I'm doing super good. I got stung in the head three times by wasps yesterday while I was mowing the lawn. - -6 -00:00:37,199 --> 00:00:39,810 -Oh my gosh, that's it. That's I feel good though. Other - -7 -00:00:39,810 --> 00:04:55,050 -Wes Bos: than bad that I was mowing the lawn right, just typical standard mowing the lawn. And then all of a sudden, yeah, I just felt like something whacked me in the back of the head. I actually I'm sorry. It was weed whipping at the time. And I thought like part of the plastic thing broke off and flew up and hit me in the head. Like that's how hard it was just hit really hard. It's like out and then like two more really quickly, like, wow, dang. And then I look around. I'm like, swarmed by bees and I found a huge nest in my fence. And I was like totally oblivious. I was standing next to it. And I look I turn around there's like, you know, 30 plus bees. Are there not bees there. Was there like the yellow jacket? Yeah. And it sucked. It sucked. But I'm doing good today. Today. My head is feeling alright man. How about you? I'm doing great. I'm just doing some a little housekeeping because I've got I'm heading off tomorrow to Chicago. Actually, by the time this goes out. I'll be back from Chicago. So thanks so much to everyone who came to Lera con Chicago It was a blast. There we go. That's my forward feature. Looking back nice. And and then after that we're heading off on some vacation going down to Pennsylvania, which should be which should be pretty fun. It's pretty sick, man. I have no more vacations left this year. So I'm gonna have Oh man. Likely, like two or two or three more weeks left. I do a lot of vacation in the summer. So nice. Yeah, some some nice downtime. I'm looking forward to it, Brad. So today's sponsor is our view School, which is an excellent place to learn view j s, which is a topic we really need to cover on this show. And we've been saying it for like half a year now. We need to have a view episode and get over with I think we all know who the blocker on this one is but we also Scott know cuz this episode is also sponsored by our longtime sponsor freshbooks, which is a brilliant, amazing cloud accounting software, which is something you absolutely need in this work environment. Cool. So do you want to get into one? First question is from Moz Saeed Abdi I think I nailed that our editor fonts worth the investment. Are they such a big deal? Why are they such a big deal in the first place? If yes, why? So let's do a quick rundown. I use operator motto in my text editor is 200 bucks. It's that one where you have the fancy italics and about 13% of the population absolutely hates it. And then the rest of the people are fairly into it. Nobody's in between. and I'm a big fan of it. What are you using right now? sky use dank mano right now, which is about 40 pounds. I don't know what that hurts to to be honest. I never I think it's like 50 bucks. We looked at it. We mentioned it and thing someone came out with like, kind of like it's like operator motto but it's it's a quarter of the price. It's a quarter of the price. It's also in my opinion, I like it a little bit more, but it has ligatures, right. It has ligatures, which is a big thing for me, because for a long time I used Fira code. ligatures are another those things that like, you know, half the population absolutely hates, like do you absolutely hate and they do. But I love I love being able to look at the code and see the ligatures like that. So I was wondering, what is it like a chair you want to I think there's probably some people that don't know what a ligature. So look at your, oh, I'm gonna type graffiti people. Don't be mad at me if I butcher this, but my understanding is that it's when two characters combine and then visually, they form one character. It's like often use and things like maybe other languages, where they have different accents on letters and things like that, but ligatures in these coding fonts are useful for essentially creating visual shapes out of your code, for instance, an arrow function, which is just an equal sign, and a greater than sign becomes an actual combined arrow. Instead of looking like two separate characters, the characters combined to form sort of one thing, or like three equal signs in a row, instead of being three equal signs in a row, they stack up vertically, so there's three horizontal lines on top of each other, and they're wider and flatter. So these ligatures allow you to see things in your code, recognize patterns a little bit more easily, right. So again, I've been a huge fan of them. For me, I'm a visual person I'm the spatial person looking at my code is a lot more readable with these ligatures in them. - -8 -00:04:55,259 --> 00:08:43,549 -So is it worth it for someone who shows their code day in and day out? Absolutely. I think using operator model early as one of the first people to actually buy it, I think. And it was a huge kind of like draw into my coding screenshots. People were really very, very, very curious about how it worked. And it sort of drew them into some of the other stuff that I do. Is it worth it for you? I don't necessarily know. It depends on a 200 bucks is very hard to swallow, especially when there's so many good ones out there for much less or even free I use in consolata for a long time, and a Fira code is a really good one as well. So I don't know, it's hard to say, it's kind of up to you, if you want to spend it. Like if I wasn't someone who visually showed my code day in and day out, I probably wouldn't buy it. Yeah, I mean, and I again, I used and bought dank moto. And I might classify that as a frivolous purchase, because it you know, I was fine with Fira code. So if you want to take advantage of some of that stuff, like ligatures, and maybe some more fancy stuff that's in a web font, and you like open source stuff and fear code all the way it's free, there's no reason not to, if you like it, but yeah, then this is pretty much how I look at it to like it. Yeah. Next question. So this next question is from Steve O'Neil, how can I come up with ideas for projects? What can I put in a portfolio when I work for an agency? So we've covered this kind of topic a lot in different sort of ways, where we just say, hey, find aspects in your life, find things that are interesting, find things that are stimulating to you, and just make something out of it, right? A lot of times in your portfolio, you know, if I'm looking for something in someone's portfolio, it's like, you know, maybe more interesting things or more technical challenges. So if you find something that has like a technical challenge, you want to cover as well, like, it doesn't have to be a personal challenge, right? It can come up with like a technical issue itself, right? You might be thinking, well, I don't have any, any hobbies to do this with. But maybe this face detection API looks really cool. So maybe I'll hack together something with that and just make something interesting. But the end of the day, I think people just want to see that you actually work on stuff, and that you like to work on code. Totally. I think that another another way to approach this, if you're working for an agency, a lot of times you can't put the stuff that you've done in your own portfolio, just because like you can't like people don't necessarily like you doing that, especially agency worlds where someone gets a big contract, and they sub that out to another agency. And that agency then hires a couple freelancers, usually three or four things away from the actual company that you did the work for. And the agencies don't want the client knowing that right. So what I did was I have just a huge grid of the different companies that I've worked with, like sauza, tequila Scotia Bank, Jamison, vitamins, TELUS Porter, Bell Media, Red Hat, and like a lot of those I'm not allowed to show the stuff that I worked on. But what I did is I maintained a private portfolio that I would just send to people when they ask for it, because like, I don't know, like, Is that allowed? I'm not sure. But I did it for a long time. And it was I was able to show people stuff internal stuff that wasn't necessarily allowed to, to show on the open web. And, and that is great. So you can just put a little thing on your website, say, please contact me for a private portfolio. Yeah, definitely. And also, I mean, we haven't talked a ton about portfolios or anything like that on the site. I think, again, when you're developing a portfolio that people like to see good things rather than lots of things. So like, you don't need everything you've ever done in your portfolio, like have like five or six good items, like no one's gonna have time to look through all that stuff anyways, so pick your best work. And again, if it needs to be private, make it private. But yeah, pick your best work and show it off that way. - -9 -00:08:43,830 --> 00:13:34,590 -Yeah, go back to the freelancing episodes that we did. Because we talked a lot about the portfolio being such a small part. For most of my career, I did not have a portfolio. And when I did, it was often out of date, and the links were dead. Oh, yeah. But I still had tons of tons and tons of tons of work. Because of the other things that we talked about on this freelancing episodes. I don't think that the portfolio is as important as most people think it is. Next up, we have a question from JavaScript, Joe, which is, let's say have two hours per week to work on coding projects? Do I spend a building a side project? Or do I spend it contributing to open source? What's your experience with contributing to open source so I think that if you're trying to learn your your, your two hours that you have per week is best spent on actually building something that you're excited about something that you are putting your own time into, I think the open source aspect of that, at least in my experience, the open source stuff sort of finds its way into your work. I've never once set off and sat down and said, Oh, today I'm going to open source some stuff or I'm going to work on some open source. What happens is that you work on a project and you use something and you say, Oh, this is broken. Let me fix it for the the library maintainer or you, you build a project for yourself, you say this is really handy. I bet other people can make use of it. So you go ahead and release it. At least set yourself under your own GitHub. Right. So I think open source will sort of find its way into your workflow. And I don't necessarily think it's something they should set off to explicitly do. Yeah, I totally, I totally agree with this. And, and it's not going to be I mean, contributing open source projects is amazing. But I don't know if it's going to be the best way for you to learn new things, maybe it's gonna be the best way for you to learn how to work in teams and maybe dive into stuff. But I would personally be a little apprehensive to do something I've never done before in an open source project, but maybe that's just me being you know, that kind of vibe about it. But yeah, I agree. I think you're gonna have better learning opportunities. But that says, you know, if you have the opportunity to come commit to open source, then please, by all means, go ahead. Cool. So we have one. Here's another one from Diane, who gave us pronounciation instructions. Thank you so much, Diane. That's, that's hilarious. I was cracking up when I read it. She asks, Why is it so hard to grasp and team projects? What are the best resources to master it? Now, this is a good one, because Git is hard. And I guess a lot of people just sort of breezed by the fact that Git is hard, right? Everyone sort of just says, Yeah, it gets, you need get. So here it is, right. But get when it breaks, it breaks. And it's very difficult to fix, you end up you know, really spending a lot of time with some obscure get error that you've never seen before. And you're trying to make it go away, and you Google around, and then you eventually fix it and you move on, right? But learning get, especially in teams, when there's a lot of people touching a lot of different things. And there's a lot of commits and branches, and all this stuff coming in, there is a lot of potential for stuff to break. So my recommendations for this kind of thing is don't like go nuts. People want to go nuts with all of the features with git, like all the time there would they want to do this and this and this. And they're trying to overcomplicate it, rather than just keeping it basic, right branch, git commit, merge, whatever, right? That very most basic stuff, pull requests. And that's it. And then once you have that down as a team, and you have a nice workflow down as a team that way, then maybe you can try to, you know, improve your workflow by complicating with some of the more obscure features a little bit. But I might Yeah, my recommendation is to keep it simple until you can afford to not keep it simple anymore and know what you're doing. My recommendation for a place to learn is to check out try github.io. This is a site I think run by GitHub that has links to a bunch of resources such as, like the GitHub Learning Lab, you can hire professional training and stuff up here. But there's a lot of great stuff from you know, the good Handbook, cheat sheets, visualizing it, that sort of stuff. So check out try.github.io if you have not already, my experience with this is the team stuff gets funky when not everyone's on the same page. Like Scott said, you all have to be on the same Git workflow in order for it to work smoothly. Because if if one of you is rebasing frequently, and one of you isn't or one of you is squashing commits, and one of you isn't, and you're just going to get into a place where somebody accidentally force pushes something in, you're gonna have a bad, bad day. So I recommend looking maybe we should do an entire episode on a couple of the different Git workflows that are out there and quisha. But doing something yet, do some research on different workflows that different teams use, because Git is a tool that can be used in many different ways with a team, and everyone has their own opinions on it. And the most important way is just to do it the exact same way as everybody else on your team. So do some research into some of those workflows. Yeah. def. - -10 -00:13:34,649 --> 00:18:31,260 -Next question is from grant chambers. What are some tips for going to your first meetup, so I went to a ton of meetups when I was first got started. I don't go to meetups very often, anymore, just because of having kids. It's it's not really great for going out and drink a beer all night. But I still do try to make out to at least a couple per year because I find them really, really good. So if you are someone that is brand new to a meet up, I think that it's really important to to push your comfort level. So that is talking to people asking lots of questions. There's often extremely smart people at these meetups that love to talk about the stuff that they know. So being able to just be a sponge and listen to all all the information, listen to the talks, talking to people. It's great for learning things. It's great for meeting people. I think everything that we said in the conference episode how to get the most out of a conference is applies to meetups as Swanee. I know that this seems like something that is very extroverted too, but I think it's also something that you could even if it's just one person, if you're very introverted, maybe if you just like kind of latch on to one person or you do research for who's speaking and maybe you'll prepare a couple questions that you specifically have for for that person. That's probably a good idea. Yeah. Someone who's talked to the meetup before right like there's nothing that the the speaker likes more than when people come up to them. afterwards and tell them that there was a good talk or that they enjoyed it, or something about it that particularly was interesting, or just something that showed that you were you're paying attention or something like that. So, you know, going up and talking to the speaker is never a bad idea Unless, of course, they look like they are in a grumpy mood or something. But for the most part, I think that's like a good Good idea. Again, I, I, as somebody who is not as socially outgoing, as Wess, right, it's harder for me. And so I totally understand if you aren't the type of person who wants to go up and like, talk to everybody. I think the easiest way, if you are a little bit more introverted, is to talk to the person you're sitting next to about anything, what are you working on? Hey, Where do you work? Because chances are, if it's a react meetup or whatever, you have that in common, unless the person's like, Oh, I'm a recruiter, I'm just here to watch. Then you can say, oh, okay, you know, what are you recruiting whatever. But the idea is, is that you all have this common thread, and then that that aspect of it should be an easy conversation starter. But if you just ask the person, where do they work? And what are they working on, that should be enough to start up any sort of conversation with somebody, and you're gonna get some good practice actually being a little bit extroverted, which is always great to do. Again, I am not good at it. And I need lots of practice. So I've been going out of my way to practice that a lot of conferences and meetups and stuff like that. So again, you're gonna want to do that. I just meet somebody find something interesting out and just become a sponge, taken everything, maybe you're not interested in what the talk is about, specifically, but take it all in and figure out what you like, and come out of there learning something, because that's really you know, why you went there? So yeah, that those are, those are my advice, find something that interests you. Yeah, go to go to meetups, I think one other. One other tip I have as well, if you are extroverted, or if you are one of those people that people come up to you, sometimes you get trapped, this happens to me, not not a whole lot. But every now and then somebody sort of dominates your time and is not respectful of your time, and will just kind of keep talking to you about stuff that you could do not care about. And it's so boring. And being able to practice your breakaway is, is really good. And there's a comedians in cars getting coffee, or Jerry Seinfeld, who's one of my role models in life, he's he says, the best way to do that is say, well, it's been great meeting you. Because the only thing you can say to that it's such a nice way to break it off. And like what do you say to that? Yes. Thank you. Yeah. Nice to meet you. Yeah. Yeah, that's, I mean, that's really, really like a thing. If you are one of those people don't monopolize someone else's time, you know, look for body language signals or whatever. But just, you know, take a couple of minutes, you know, introduce yourself, if you're having a really in depth conversation, like, Don't feel like you need to end that conversation if both people are really, you know, having a good time. But if, if, like you're dominating the conversation, and the person's like, checking their watch, yeah, and and that thing, and that thing. Yeah, that's actually the body language is a is a really good thing to learn. So it's something that sometimes I guess, we take for granted, but like, what are some of the other cues that you can take there where someone's feet are, so if someone's feet are open and pointed towards you, then it's likely that they're enjoying it. And if their feet are closed or pointed away, sometimes people will cross their arms and fiddling with their phone, there's a couple like little telltale signs that someone is not interested in talking to you. It's probably worth - -11 -00:18:32,190 --> 00:22:48,360 -looking up a list of those don't don't take that personally, either. Right. Sometimes people just got stuff to do places to be people to see that kind of thing. And, yeah, totally. Yeah. Cool. So again, you know, the main thing is, you're going to a meet up to learn things. Another great place to learn things is through view School, which is a new series and tutorial course designed to teach you view j s. So you want to learn view, I suggest you check out view school.io forward slash syntax, you're gonna get 25% off for the first 50 people that register, it was sold out, which means 50 of you already did, it looks like since they renewed their sponsorship here for another episode. Looks like they put another 50 up there, which is great. So even since the first time we've done this, it looks like they have a whole bunch more videos that have have been put out. So that's really good. So if you want to learn a view, j s by building a real world application, which is a form you want to learn a couple things that come along with view, which is the view see Li the view read or other things like that are x jazz, best practices, code splitting Webpack, modern JavaScript, everything that you want to know in order to write modern view j s, I would check it out. Kind of one of the I guess the best parts of this course is that it's built by this guy called ah Alex and I'm not even gonna attempt the last name was you know how I like to butcher last names, but he is on the Vue JS core team. So there's any sort of like, if you're not sure if he's good at view, he is he actually builds view, so If you want to learn view, check out view school.io forward slash syntax grab. You're one of the 50 25% off coupons, and thanks so much to view school for sponsoring. Thank you. Yeah, look really nice. That website is a straight fire. I mean, that's several fire emojis. So check out view schools. Oh, yeah, several in a row. Cool. Awesome. Yeah. So let's get into the next one here. It says from Michael Hoffman, have you ever thought about using Linux or Windows as your main operating system? I've thought about that every day. I think about that all the time, whenever my computer has any issues, or I hear about, you know, MacBook Pro throttling and stuff like that. I yeah, I've been wanting to get off, I think is my last MacBook Pro that I had. I was like, I'm never buying another MacBook Pro. And then sure enough, I bought another one, you know, three or four years later. So I think about it a lot. You know, the options are interesting with the Linux subsystem and stuff in Windows, now you get you get access to a lot of the the Linux stuff that we like before, I still can't bring myself to love windows. There's so many weird little legacy design things, icons, and like several different styles of things all over the operating system that just kind of makes me really mad. Just there's like a lot of like, little windows, things that like, I mean, I used windows for a long time when I was growing up. And so many of the problems that I had with Windows when I was a high school they're like still exist. And just wondering like, why isn't this a smoother situation? Or why haven't they like really nailed their design language yet, when they have such a strong design language, right? They just don't propagate it through the entire thing. So that said, you know, Windows is a beast, I can't ever see myself running Windows full time. I think I could have a Windows machine and be happy as a dev machine for various reasons. But I don't think I could run it full time. Linux. On the other hand, I would be very happy to have a Linux machine. I've always said very frequently. I mean, I'm an Android phone user, if I could have some sort of computer system that was like Android, but like actually a full on operating system. I would probably buy that. And it looks like the the new Chromebooks you can run Android apps, and you can have access to the Linux, all your commands and everything. Yeah, you can run VS code on Chromebooks now. Right? So because you have access to all of that, if I had to put money on what my next computer would be, it would ever be whatever Google or whoever's releasing at the time, the pixel book looks great. I would have bought that if you could have done web dev on it when it came out. But now that you know, you can install Node and everything on those, like very easily, I think it would be if whatever they're making is good at the time, I might get a pixel book and be super happy with that. Yeah, it's a interesting one to me, just because it's funny, because I love OSX or OS, what do they call it? - -12 -00:22:49,830 --> 00:27:39,030 -I love Mac OS on the computer. It's really smooth. I've been increasingly frustrated with the MacBook Pro hardware in the last years. A couple years. It looks like they fixed a couple of the issues with things like the touch bar and whatnot. It's it's just frustrating. Would I ever switch to Windows? I don't know. It's It's so hard. So I have a What is it like a Surface Book sitting on my desk here, Microsoft gave me like a evaluation unit, just to try it out. And I've been primarily using it just to research the W SL windows subsystem Linux stuff, because a lot of my tutorials use all these snazzy command line stuff. And I want it to work just as well on Windows and and I have been able to get absolutely everything working on Windows, which is so surprising to me. It works really, really well. But that said the rest of Windows First of all, I don't want to like have to relearn everything. Yeah, like I'm not as in love with computers as I was when I was a kid. And I would like spend time evaluating applications and tweaking and customizing. And I just want it to work. I've got work to get done at the end of the day. And the fact that I have all of these different applications and then I have to find like the equivalent, like, Oh, I love Alfred. And then someone's like, Oh, yeah, there's something kind of like it. But it's not as good and doesn't work well. And there's not all the workflows and it doesn't really work out. Right. And that tends to happen with with a lot of my stuff on on Windows, I don't really want to put the time into into relearning it all in the hardware itself. This I don't even know what it is Surface Book Surface Book Pro, something like that. It has like a, you take the screen out and a screen has a battery in it and it becomes a tablet, which is really cool. I like it for teaching because it comes with a little thing you can draw on the screen. Like I tried it for I think a couple of weeks full time but it just just couldn't couldn't move over to it. I think if you're getting started fresh, maybe maybe give it a give it a shot. I don't I don't think that some of the reasons why everybody used a Mac are as relevant anymore because I think that Windows is working really hard to solve a lot of those pain points, especially the windows subsystem Linux stuff, but the switching costs from me is just much too high at this point. Yeah, and I don't care all that much. Yeah. And I think the cult of Mac thing is I kind of in an odd spot because you still have people defending, like, every bad decision Apple makes left and right. And I would have thought that people would be like, at some point being like, yeah, these are some bad decisions, but you still get people like really, really hot. You know, just I will only buy Apple stuff for this, like the the home, the home pod thing, whatever that is like there. Oh, yeah. It's like, that's a joke when people buy that you're like, okay, right. Yeah, because it's way worse than Alexa or Google Assistant. And at the same time, it's way more expensive. And so like, yeah, I again, I just, that's it's too much for me. As for like other Linux operating systems, I've used mint actually have mint installed on my, my old MacBook Air because you can do that. It just I have like, that's the only OS I have on my MacBook Air is meant just because I wanted to see if I could live with it, right. And it's pretty good. But like, I just don't know if it's as polished as something that I could I could live with like that. And for me, a lot of the applications that were tying me down were like sketch, I use Final Cut Pro to edit and a bunch of Mac stuff, right? I use logic to record this podcast. And slowly those reasons are going away, though I use figma. Now, which is available on Linux and Windows, right, I use a Why have a video editor now instead of doing my editing, and then logic? Sure, there's probably audio recording applications that are decent on everything, maybe not as much on Linux. But you know, as long as you you can replace that core functionality, I would move to a Linux system, I just would want it to be as polished of an experience. Yeah, yeah, I don't, I don't think I would ever move to Linux, just because I don't want to babysit, like I used to run a hackintosh like full time, like I'm done. I built like a tower. And I would install this hacked version of OSX on it. And it was amazing. But like when that thing went down, you're in for like a day or two of like, like trying to like SSH drivers into your into your machine from an external laptop. And it's it when my laptop goes down. I what I do is I just go into the Apple store and I buy a new one. I restore it from my hard drive that I have here on my end that I just keep going or they fix the other one. Right. I don't have time to I don't have time to to fuss around with fixing silence. Yeah, absolutely. That is it is a big thing, right? Because it's a huge time investment also, right our audiences. I know there's a ton of people who use Linux and Windows in our audience. But I would say the majority of our viewers probably have a Mac and like that, you know, that familiarity of what they're sitting on their screen is what they're seeing on your screen is kind of a big deal. - -13 -00:27:39,060 --> 00:31:15,300 -Yeah, that's a good point. Next question we have here, there was no name associated with it. But would you recommend Upwork for starting out freelancing or something similar. So Upwork is this website where you can go on and find a whole bunch of jobs that are for sale. Like if I wanted someone to build me a WordPress theme, I would go on Upwork. And I would post the job along with some information about what's going on. And and then people would bid on that, and then I would find someone and pay them through it. And I know that there are lots of good people working on Upwork. But it just seems to me that Upwork has and all of these freelancing websites, it doesn't really seem to me that you're you're actually running a business, it seems like you're sure to just like going to this place where you can get some work and you're sort of dependent on this third party. Whereas if you're trying to freelance ideally, you'd be you'd be running your own business, you'd be doing your own marketing, and you'd be you'd be like really putting yourself out there because as far as I've seen, there's not extremely good paying work on Upwork it tends to be the sort of bid to the bottom stuff. I may be wrong with that. And there's probably some like edge case, areas where people are like, really into legal writing or something like that. But what I like to think I don't know, Scott, do you do you start to see this in now that you've had your first kid? Do you start to see all of your friends from high school starting to sell stuff? Like, there's like, like, there's a very essential oils, a very specific like type of person that I could like, maybe write out like, if you were to give me a list of the people I graduated with that I knew I could maybe give you a list of all of the people who will fall for a multi level marketing scheme at some Yeah, like, it's like a very specific type of person. But yes, absolutely. Yeah. There's so many of them. And the funny thing is, is that like some of them don't get it after one or two even they did like the it works and now they're doing the Rodin and fields and now they're doing like press on nails or something like that. It's like these people just bounce from one to one to one and they don't get that it's a scam. It's like their damn Yeah. So these if you're not familiar, I'm not sure if they have these in Europe and stuff like that. But in in North America, when you have your first kid, you realize that you don't want to go back to work and you want to work for yourself. And what happens is that people get sucked into these like Tupperware party do Tara sweetlegs There's all these like things where basically, you buy a whole bunch of stuff from the company, and then you shake down your entire Facebook list for people trying to sell them stuff, then you invite all your friends over and exploit their friendship to sell these overpriced goods. Right? And it's funny, it always frustrates me to see this on Facebook, because these people are hashtag and be your own boss. Yeah. Hashtag entrepreneur and I was like, you're, you're, like, posting quotes from shark tank and stuff like that, and that you're not running a business. You're just exploiting your friends group for this kind of stuff. And I think like, I always think like, some like, I actually have a friend who's doing really well selling oils. And I often wonder, like, how much better would you be doing if you actually were running your own business? Alright, yeah, clearly, you have the skill to do it. Most people don't. But I think that like Upwork is is kind of the like Tupperware of the web development industry where they offer they say that come to us, be your own boss, run your own business. But at the end of the day, you're you shouldn't be relying on somebody else. If you're running your own your own business like that. Yeah. And it might, you know, might be in decent place to get a foot in the door with a client or maybe get some referrals up. But I don't think I would hang out there for too long, right? Yeah. Totally. I see that too. - -14 -00:31:15,330 --> 00:35:59,130 -Yeah, that's pretty much all I got on that one. Let's see, we have one from Mike see. In he actually spared us his last name, because apparently it's too difficult to pronounce. I love how like how many pronunciation jokes we're getting in our inbox. Now, that's hilarious that everyone's caught on take a drink. They can't pronounce names. What do you think about sites like code wars and code fights? being new to web development? I find problems hard to solve, or find the problems hard to solve? Is it important to know how to solve all of these problems? if so how do I get better at developing the mindset to problem? This is an interesting question, except we use these sites and I like a lot of these sites. I like what they're doing, like for the most, for the most part, like they're presenting you with a challenge. If you haven't seen any of these, it's like, here's a question, here's an array, filter out all of the odd number items, or whatever. And then you have to maybe come up with a solution that qualifies and passes all of their tests, and you submit it and then you get points for it. And then you can look at all of the solutions. And they're they're ranged in difficult to super easy to anywhere in between, right. And sometimes they'll even pit you against someone else who can solve this problem faster. Now, the thing that I like about these sites is they do get you solving problems that you might not encounter in your day to day code that you could encounter in the future. Or that could come in handy when you're trying to think of a technique for some of these things. There's definitely a lot of value in the type of questions that they ask you. And the type of answers that you're going to come up with. Now where they don't have a ton of value is maybe some of the time crunch stuff. It could be fun as a game, right? If you want to challenge yourself, but like in a real world situation, you're never going to have like 30 seconds to answer this question. Or else, you know, you lose. So a lot of the times, you know, I think they're very helpful for getting yourself into a mind state. And do not be hard on yourself for not knowing the answers. Part of the the coolest thing about them is that when you complete it or you give up, you can look at the solutions. And in my mind, if you spend 20 minutes on it, and you can't come up with the right answer, you should probably look at the solution. And then understand the solution don't just glance at it is like oh, that's the answer. Take the time to look at it and really truly understand that solution. Because even if you wouldn't have come up with that, maybe it was just like a method you didn't even know existed that does the whole thing for you, right? But you can't always know the answers to all of these things. So spend some time on it. Don't spend too much time on it. Really the value comes in evaluating different solutions in seeing how other people are doing it and getting to look at code that is good. I think that's the big value. Yeah, I think that they're they're pretty cool too, especially because a lot of the times the the the way that they test if your solution is right as they just like run unit tests against the functions that you're running, which is really cool, because it teaches you to write modular functions that are very easily testable with a unit testing framework. Where it might not click for a lot of people is that when you're getting into web development, I think a lot of people just want to like build stuff. Like they want to be able to see what they have, they want to be able to click a button and to play a video. And a lot of times the stuff on this is very much like extend the prototype filter for X, Y and Z. And like that's a whole nother section of programming, which might not be exciting to you at the time. Because you don't know why would you ever want to extend a prototyper? Like why would I even want to filter this array, right? But when you stumble upon it, where you're like, Oh, I have a an array of photos, and I only want to I want to filter them for ones that include the word dog, and then it starts to set in. I think that's the reason why a lot of people like my JavaScript 30 cores is because it's very much not about the Foo bar Baz and functions and stuff load. That's a really important part of programming. I think you should do it but there's another part of Especially if you're looking for those small wins where you actually built something, I think maybe you can also spend part of your time on just building little little apps, little things that you click little buttons, little toys that we do in JavaScript 34. Yeah, I love that about your course to actually I've been, I've been thinking a lot about your course, because I do want to have some sort of basic beginner JavaScript content on level up tutorials. And I do it's like, really bad, though. It's just not it's like, very, I don't know, here's how to do this, here's how to do this, but not a lot of why. And I've been really thinking about how your course really excels at having an interesting context for everything that you're doing, and how I can make something that is as interesting. So I definitely have a lot of ideas there. It's going to be aimed at beginners. I don't have a timeline or anything like that. But it is going to be sort of beginner JavaScript training. Like I have no experience in JavaScript, but at the same time, still practical, like gets you into web stuff. really early kind of stuff. - -15 -00:35:59,420 --> 00:38:46,880 -Yeah, I've been I've been thinking about that a lot too, as well, just because and I've asked on Twitter like people give me your in if you haven't chimed in on this, feel free to tweet me at Wes Bos and Scott as well. Because like, like, what, what did you trip up on when you're first learning JavaScript? What was frustrating to you when you're first learning JavaScript? Because it's easy for like us experienced devs to come in and start chancing learn the basics and, and stuff like that. But I think back to when I learned it wasn't like that at all. I've been thinking a lot about like, how do I teach people because I don't have a beginner course, either. My JavaScript 30 course, is very much popular in the beginner crowd or people who are looking for a refresher, but it's not it. It assumes you know, functions and variables and passing arguments. And the DOM assumes, you know, a whole bunch, right? So I'm missing this like, like, and people ask me all the time, like, Where do I learn JavaScript? I'm like, I don't know. I like. So I've been thinking a lot about how do I make something that's not your standard, boring, the Foo, bar Baz have a function that adds a and b and returns the total? and things like that, but it's sort of like plays off the the nerves that I hit with the JavaScript 30 cores? Yeah, absolutely. We should we should have a powwow about that at some point. Totally word. Yeah. And then eventually, if you get good at JavaScript, from all this stuff, you're going to be rolling in cash. And what are you going to do with all that cash you're rolling in, I don't know you better have some good bookkeeping. And that's where Freshbooks comes into play. Wow. Haha. Freshbooks is the best cloud accounting that you can get. So if you are a freelancer, a small business, you need to keep track of any number of things. So you need to keep track of invoices that you have people, if you need to send people quotes, I often need to send people a quote, then they go off and get it approved, then get a purchase order, then come back, we turn that quote into an invoice, managing all of your expenses tracking your time. So sometimes you have multiple clients with multiple types of work, and all of that different types of work of different dollar values that are associated with your per hour. If you want to track how long it's going on. I love the time tracking thing because you can get a desktop app and turn it on and off, you can do a quick summary, what I would do is every day when I'm done, I would do a quick summary today work seven hours, here's what I did. And then when it came time to invoice time, it was very clear that I could just like generate an invoice and it would give all the details as to what I worked on. And it was very easy for the manager to approve that freelancing stuff. So if you are a small business, a freelancer anybody who needs to send an invoice, don't create some janky thing on Microsoft Excel. Go to freshbooks comm forward slash syntax and sign up for sign up for a 30 day unrestricted free trial and use syntax in the How did you hear about a section doe? - -16 -00:38:47,280 --> 00:43:42,990 -Next up we got a question from unnamed question was when I work in a website, I need to record usernames, passwords, URLs, keys, login, C panels, WordPress, FTP, SQL, you name it. And that's for each and every website, local and remote. Currently, I use a text file. And I save that all in a website that I NF and I use this format or you just list out there's a URL, here's the username, here's the password. So this is definitely like a worldwide problem where people don't know their passwords. What it often results in is people just keep a txt file on their desktop with all of their passwords, which is let me tell you don't ever do this. You should never ever have a password in a plain text file where anyone could pick it up any desktop application that you're running on your computer could scoop that file up, send it off, and you'd be poached. So especially when you're like you're doing this for clients, right? And if your client website goes down, you might be held liable for whatever's going on in that. So what is the solution to being overwhelmed with all of these passwords and whatnot. So I think first of all, for all of your servers for accessing MySQL, FTP, or SSH, any of these things where you need to push things to, ideally, you'd be using an SSH key, which an SSH key is, is a key that lives on your computer. And it's sort of like a fingerprint of your computer. And then when you want to access a server, it will bring, bring that SSH key along for the ride, and then it will authenticate you, which is great, because then you don't have to worry about username passwords. And as someone who manages the server, if you ever were to quit, or ever were to have your SSH key changed, they can just revoke that key. And then it would, you'd no longer be able to go in it, right, there's no, there's no thing about passwords or sharing or stuff like that. So that's good if you can use SSH if you can't, because a lot of people still do username and passwords, and I had this a lot with clients, they would give me their username and password, what I would always do is first go and make your own username and password. That way all of the actions are tied to your username. And then also when your client goes to login into yours, because they have to renew their hosting, and they forget their password, they're not going to reset it on you. And then that's frustrating to to actually get the password from them. So make your own. And then what I do with those is I store them in I specifically use LastPass, I use one password years and years ago, I switched to LastPass. And I'm thinking about switching back now because I'm not super happy with with LastPass. But anyways, what I'll do is I'll create a note for each website and in that secure note will contain all of the username passwords and all of the secure information that is required for that specific one. And then you don't have to ever worry about it. So just keep it in somewhere that's password protected. Don't ever put it in a plain text file that could be accessed by anyone who has remote or local access to your computer. Yeah. And the benefit of SSH keys is that like it makes SSH ng and fun because you never even have to enter a password or think about it. You just SSH in and it doesn't even prompt you for anything you just in. Yeah, I love that. Again, if you're actually using one password or LastPass, I want to hear your opinions on which one you like more. So shout out at us which one you're using. If you're using a password manager, if it's one password or LastPass? Or if it's something we don't even mention here. I want to know what kind of Password Manager people are using. That's it's a topic that's really interesting to me. Here's a question from Chandler Bing. Thank you for the friends, the friends joke here. What happened to Scott's YouTube channel? No upload for weeks. Yeah, about that. So I have recorded over 130 some videos this year, all of which have gone into the pro channel. Well, at least I have like five videos every series that make it to the YouTube channel, but 130 videos this year. So I have been recording a lot. The only thing is, is that it's sort of a transition period. So this summer, I did a lot of I do a lot of traveling, I did talking and I just had a vacation and I have a child. So all of those things combined have really prevented me from releasing a ton of content on YouTube. That said, part of the reasons why I just remodeled my office. And by remodel, I just got a new desk, a new setup and sort of stuff like that. So that it's going to be way easier for me to crank out content for YouTube, I'm also looking in just having like an editor take care of YouTube content for me. So the plan is, is that YouTube content will be back in some sort of full force very soon here. But I'm still in this period of adjusting and getting things worked out. And then I think later this year, even next month, I think you're going to see the floodgates open and a lot of free content on YouTube. And, you know, eventually I would love to do one, one free series and one Pro Series every single month. But that is a lot of content. So we're gonna see how that works. - -17 -00:43:43,020 --> 00:44:51,030 -Totally having a kid I totally feel that pain, where at the end of the day, like I don't really see a whole lot of YouTube stuff either just because I'm more focused on building my premium content. That's what pays the bills at the end of the day. And spending more time on this podcast which takes away from from YouTube time, but that's fine because that pays the bills. Yeah, it's interesting to find a balance between doing that free stuff which people really enjoy and also help sell stuff but then also like doing the stuff that pays the bills at the end of the day as well. Yeah, people think that YouTube makes you into a millionaire or something like that. And I'll tell you what, 250,000 subscribers you do not like I don't even have enough for rent off of YouTube at all like YouTube does not pay the bills. I'm just gonna say that it doesn't pay very much at all i the way those people are making a lot of money is by millions of views on every video plus sponsorship deals and stuff like that, you know, most YouTubers are probably not making very much money. I'm literally I 100 air from YouTube. So if anyone wants to go out I'll buy tickets because I'm rolling and rolling in hundreds of dollars from YouTube over the years. - -18 -00:44:51,060 --> 00:44:56,970 -Unknown: I got a plaque that count as money. I think that counts as money. Yeah. Can I take that to target and buy something with it? - -19 -00:44:57,420 --> 00:47:25,980 -Wes Bos: No, I'll buy that off for us. I haven't hit that hundred Thousand yet. Last question we got here is kind of a fun one Whose idea was it to do a podcast? who approached whom? First? I don't. I don't remember. I don't remember either, you know, because we had been chatting for a while. And I think the idea of a podcast came up at some point. The the idea of even like we had a lot of the details for syntax worked out a long time before we recorded it. Like a year before we recorded the first episode because I think we were in a mastermind, which is like a group where you get together and laugh maniacally. And no, it's a group that we got together with a couple other people in the industry and just kind of chit chatted about ideas about what's going on sharing what's worked and what hasn't worked. I highly recommend you started mastermind with some of your biggest competitors. We also had Joel, who runs egghead IO. And Josh Owens, who runs a lot of the meteor stuff it was asked for we met every week and just shared some stuff in it. We're no longer running it just because I don't know I think a lot of stuff. Same with like podcasts and stuff, you kind of do their course and you get what you get What it from, what you had hoped. And then and then it's sort of sunsets. Yeah, it goes away. But we had talked about doing the podcast all along that and we had a whole Google Doc full of ideas full of like, possible names, possible ways to approach it. I was looking at some of the failed syntax logos the other day, it was like a picture of Scott and I with the word syntax underneath. It was brutal. I actually didn't think that was brutal. Oh, maybe we should use it seems like, Well, for me, because everything you were coming out, I'm not I'm not that much of a designer. See, see, Wes. I'm like you I know my designs. First my design? No, no, I when I saw that, that design, I don't know. All the stuff you were coming up with was way better than the stuff that I could have come up with. So yeah, I was I was impressed with all of it. So I would say about the original. Yeah, I wish we had the absolute original dock that we had with I think we do. So we just pulled up the dock from April 1 2016. These are good. Oh, that means we've we've had we've been thinking about this podcast for over two years. Now. The podcast itself is only a year old. Yeah, we started it in like June 2017. So while we had the idea for sitting for over a year, just sort of sitting there. things I love about the podcast, juicy details on how hosts build things and earn money, show notes, section descriptions. Here's - -20 -00:47:25,980 --> 00:47:33,210 -Unknown: a good title here. Things I Hate About podcasts too long and rambly. inside jokes. The original - -21 -00:47:34,440 --> 00:47:59,040 -Wes Bos: inside jokes is all this podcast. This podcast is almost entirely jokes I made. I made an inside joke right before introducing this segment. Yeah. Oh, yeah. Here's the some of the original names, which are all pretty good. Oh, I guess we had syntax is sort of right in the middle. And then we had like syntax, caste, code life async code time with West and Scott. website. sauce tips. - -22 -00:47:59,040 --> 00:48:02,760 -Unknown: Code code. Yeah, the fun dev show like code code code. - -23 -00:48:03,870 --> 00:49:36,990 -Wes Bos: You know, you have to say three times. Block scope. I really liked that name. Still, if someone wants to start a podcast, feel free to take it block scope would be a good name for a podcast. Yeah, these are all great. Except for the fun dev show. That's the worst name ever. The codec? Oh, that's funny. Yeah. One of the things I found on this on the even the shoot, where was that it was on the latest version of the dogs barking. And one of the latest versions. I saw. Where is this thing? Dang, I just saw this. Oh, we had our original podcast layout, like when we were describing the layout. And so we say in formal intros. Hey, I'm Wes. Hey, I'm Scott, what are you working on? What's going on in your life? In terms of topic, I talked about topic, sick pics with like eight eyes. And then we have a whole section. Like we have such little on the actual structure. But then we have like a whole 10 lines on different audio samples we wanted to use this is before we even made up any of them. It's like we've spent more time thinking about audio samples. Like for the intro? Yeah, we did. The actual structure. That's great. Yeah. Now Now we, the way that we kind of approach this podcast now is just, we open up a we have a Trello of hundreds of ideas. And then we open up a Dropbox paper and sort of riff on on the layout. And then we just give her so usually like an hour long podcast probably takes us like an hour, hour and a half hour 45 and then and that's it. Yeah, yeah, not too bad. Yeah, you can probably tell - -24 -00:49:38,550 --> 00:49:44,910 -Unknown: we still gotta use some of these audio things that we wanted like the drama Mama, and pound it and Oh, wait, where's - -25 -00:49:44,910 --> 00:49:45,930 -this? - -26 -00:49:46,709 --> 00:51:00,630 -Wes Bos: The system the most recent iteration if you just do a command find for audio API's? We have one that says easy breezy. And then we have hot take time machine which I don't even know how we would use this but hot takes from years ago which I guess would be something about jQuery so these are things that we I guess we wanted to say pound it smash that like button drama mama sick tips tasty treats easy breezy hot take time machine heartache from past years What does that even mean? I wrote that at some point and that is hilarious no I have no idea what I think I came up the word hot take time machine as like a plan Hot Tub Time Machine and then I like just wanted to come I wanted to shoehorn something in there really badly just cuz I was you know laughing about it so much these are good we got the pit we got peace in here as well. Yeah, these are all good cool that's that's kind of fun to look back two years ago we thought the podcast would be and now look at us look at us now you know you know what else was in this doc doc is the Twitter username and password which I just finished saying don't ever do - -27 -00:51:02,010 --> 00:51:07,350 -Unknown: the best part is I didn't even I don't even know that I didn't even know that was in there because I didn't have the Twitter username and password. - -28 -00:51:07,379 --> 00:55:52,380 -Wes Bos: Yeah, well, you can log in now and start start talking shit on the on the syntax. Oh, yeah, look out everyone it's about to get spicy All right, uh, let's move into some sick pics, sick pics. I got a sick pic. that's appropriate. Because I just rebuilt my desk I'm going to be doing a lot of photos of this desk setup. So if you want to check it out, check it out on Instagram I'm gonna be doing on the level of tut's at level up tutorials Instagram account and be showing off this new desk setup that I just built here. And one of the cornerstones of this desk setup is the new like standing desk legs I got which I got the Jarvis standing desk legs, I got them after talking to a ton of web developers about what they're using and why they like it and almost hands down the Jarvis seemed to be the winner. There was a couple other ones the uplift, but the Jarvis really seemed to be the winner and it seemed to be well worth the price I purchased just the legs, I got an Ikea countertop, which you'll see which is pretty sick, and I screwed the legs into the countertop. And it has presets so I can go from standing to sitting I just hit the one or two or whatever and it takes it to the right spot. And let me tell you, these things are awesome. It moves like very quietly it moves very solidly, this desk is huge and it feels very, very comfortable. So I actually have an ergonomic setup now Ed standing or sitting rather than having one that was sort of halfway in between both and having both bad posture and either set up like in my standing one it was a little too low. So I kind of hunched forward and then my sitting one, my elbows were up at my shoulders and I was ridiculous. So these standing desk legs I highly recommend these Jarvis legs. They are awesome if you're looking at standing desk, I've heard the desktops are great as well I can't speak to that but the legs themselves are awesome. So if you know standing desk space, Jarvis legs, check them out. Cool and you got an Ikea countertop on top of that. Yeah, I just bought a slab a countertop is 140 bucks and beautiful looking. And it's a great desk it was really easy to set up I just had to the only you know scary part was drilling into the countertop, but at the end of the day, you know measure a few times first and then you know drill once and it all worked out. So so many people that I know like I've had this countertop desk for probably seven years now. It's just a huge IKEA countertop and it's like it's the best desk that you can get. I think like desktop you have to figure out the legs otherwise, like I just use like IKEA box and some legs underneath and it's just so sturdy. And it's like the right depth. A lot of desks are too deep. And I don't know it's just unreal. I just I think IKEA countertop is the best desk you can for your money. Yeah, they should really like move the countertop section to the desk section because it was it's really yeah, cuz the death section has like a, they have like a butcher block top. But there it's like really thin and flimsy and limit and then it's light and it rattles and it's no good. Yeah, yeah, no good. Awesome. My sick pick today is going to be vices or Thrashers, King of the row, which is a throwback. Oh, it's it's back. I think you sick pick this last year. This might have been like the third ethic pick this. So if, if you're not sure what it is i a lot of people I know that Listen, this podcast grew up as skaters. And what it is king of the road is takes three skate teams out on the road and they have like all these contests and some of the contests are crazy tricks. Some of them are really stupid things like drinking other people's pee, which is disgusting, but it kind of reminds me of remember jack cK cK I had all of those growing up. Yeah, kinda like that. But also like really good skating in it as well and it's just hilarious as all get out. So it's in this third season now called king of the road and You can watch it on viceland.com. Last year, I watched it on viceland calm because I had like a, I could sign in with my phone provider and get access to it. And now it tells me that it's not available in Canada. So I think it's available in the States. You can procure it by other means if it's not available in your country because it's hilarious, and very much recommended to watch. Yeah, I love this show. I love it for the music. I love it. Because you get to know these skateboarders really well, you know, you follow them around in a van across the country, I end up like following most of the skateboarders on Instagram afterwards. And I mean, these, these are the best in the world. So it's not it's not like you're watching just some jackass, people mess around on the skateboard. It's like you're watching professionals. And then the goofy stuff is just like extra fun. You know? It's hilarious. It's awesome. Oh, what about shameless plugs today? - -29 -00:55:52,500 --> 00:57:46,710 -Yeah, I'm gonna shamelessly plug my new course, which is going to be on Apollo client. This is all about using Apollo client with react. So it's also about graph qL servers and setting up a graph, qL API and more about all of the cool features that come with Apollo. So it's called level one Apollo client. And it's really diving into how to use the query component, that mutation component, we really get into things like optimistic UI, we get into things like, you know, pagination, or loading more kind of style, and how you can just really understand and set up Apollo on the client side of your react site. If you haven't done any graph QL. This is a nice introduction, because we set up a really easy basic API. And then we work through all of the cool stuff about how like why graph qL is amazing to work with on the client side. So I'm really excited for this course. I'm a huge fan of Apollo, a huge fan of graph qL in general. So if you're interested in these things, check this course out. It's going to teach you how to use Apollo on the client side in react and you can get access to this course I level up tutorials, comm for slash pro sign up become a pro save 25% by sending up for the entire year at once. And you're going to get 12 series every single year. Lots of good content coming out nonstop. And there's going to be even more lots of awesome announcements to make there is shamelessly plug all of my social media today. So Twitter at Wes Bos that's probably the one where a lot of you already follow me. But I'm also on Instagram quite a bit lately. instagram.com Ford slash West boss I'm on Facebook facebook.com forward slash West boss dot developer, which is kind of funny because I took Wes Bos for my own personal account, don't add my personal account, I have probably 700 friend requests on my personal account that I will not accept. - -30 -00:57:47,070 --> 00:57:47,790 -Unknown: Yeah. - -31 -00:57:48,060 --> 00:58:10,530 -Wes Bos: And what other kind of social media is there? There's Twitter, Facebook, Instagram, Link me on MySpace. And please don't add me on LinkedIn. Oh my gosh, I have like, I probably have 700 requests. Yeah, on my LinkedIn as well. I know. It's funny what what oh, that's amazing. 704 invitations on my on my LinkedIn right now nice. - -32 -00:58:11,010 --> 00:58:16,050 -Unknown: I periodically I go in every couple weeks and just do accept all like, just to get out of there. - -33 -00:58:16,050 --> 00:58:59,580 -Wes Bos: I wrote a I have a YouTube video where we we write a filter and programmatically click the decline button. If the person's byline says recruiter. No, that's me. Yeah. So like we read programmatically. And then we and then we wrote another thing to automatically accept everybody else. Which is funny because he I go into my like LinkedIn inbox. It's just people being like, congrats on your work anniversary. Congrats. Like what? Why have I worked anniversary? Okay, like, you think that's gonna work? Like getting business or something like that? I have no idea. Yeah, I don't understand that at all. And it's like, also, because it's like a robot response. They just click the button and it was just, you know, it's not even Yeah, even genuine or authentic. It's no, I - -34 -00:58:59,580 --> 00:59:03,690 -Unknown: click the button that says thank you for your work experience. Like, no, I don't get it. - -35 -00:59:03,840 --> 00:59:22,800 -Wes Bos: I also, when people send you in mail you they only pay for in mail if you read it or reply. So always make sure that a reply so they waste their six bucks or whatever they pay to try to send it. Anyways, I think that's it for today. Anything else to say? - -36 -00:59:22,830 --> 00:59:25,980 -Unknown: Got nothing. Got nothing else. All right. We'll see - -37 -00:59:26,129 --> 00:59:28,730 -you next week. All right. Peace. - -38 -00:59:30,450 --> 00:59:40,230 -Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax63.srt b/transcripts/Syntax63.srt deleted file mode 100644 index 0173e4748..000000000 --- a/transcripts/Syntax63.srt +++ /dev/null @@ -1,64 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,000 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA bombs and Scott Taylor. Totally. - -2 -00:00:25,980 --> 00:00:37,040 -Scott Tolinski: Welcome to syntax, the podcast with the tastiest hasty as to where development treats around. My name is Scott Tolinksi. And with me as always, is Wes Bos a with a - -3 -00:00:37,070 --> 00:00:38,280 -Wes Bos: Hello, everybody. - -4 -00:00:38,360 --> 00:02:59,580 -Scott Tolinski: Hey, in this hasty tree, we're gonna be covering all things sort of cross origin, we're gonna be talking about JSON, JSON, P and cores. And we're gonna be just talking a lot about working with API's and JavaScript, it's gonna be a lot of fun. And on these Monday episodes, in case, this is your first episode, what we like to do on these Monday episodes is do a little bit of a shorter episode, maybe like a 20 minute dive into a particular topic that we can't necessarily spend an entire hour on. So if this is your first episode, that's what we're doing here. These are called hasty treats, where we get into one particular topic over the course of 20 minutes or so every Monday here, this episode is sponsored by Netlify. Netlify is an amazing hosting platform for hosting your front end code. And if you might be can cerned about it being a front end code thing? Well, yeah, let those concerns go to rest, because Netlify has the features to take care of any sort of server side stuff you could possibly need. For instance, if you need a contact form Netlify has a contact form feature. If you need a serverless functions off in the cloud, right, you can run a Cloud Function on a server somewhere with AWS, they make working with serverless functions extremely easy. Not to mention, there's also a whole feature set for having signups logins, password recovery, and that sort of stuff. And this is all on the front end code, right? Not only that, but the developer experience for Netlify is really second to none, everyone tells us left and right after each episode, we record, okay, I finally gave in and tried Netlify. And wow, because the initial experience is definitely a wow experience. And then definitely it got both of us by surprise when we first used it. And you just attach your repo you go and then it takes care of everything from ssls to continuous deployment. And it just makes hosting an absolute dream, it takes the stuff that makes you very concerned and frustrated usually, and just makes you feel very good about it. So check out netlify@netlify.com forward slash syntax. And let them know that you heard about Netlify through syntax, because again, this is one of our absolute favorite sponsors. I mean, all of our sponsors are our favorite sponsors, but we love Netlify. It's a great platform. And he absolutely just check it out. It's one of those things that you get to see to believe. And when you see it and believe it, you're gonna be thinking as you did, because it's awesome. - -5 -00:02:59,880 --> 00:08:36,150 -Wes Bos: All right, so let's get into this kind of been kind of be an explainer sewed. And it's how to get data or anything early images text from one origin, which generally that means a domain name to a another origin, which is a another domain name. And generally in in back end languages and curl, it doesn't matter what where you get one thing to another. But in the browser, there's a set of specific rules that don't allow you to just reach from website, one website into another website. And there's there's very good reasons for that. And this is a question I get all the time from beginners who are frustrated with that cannot read header access control allow origin error that you may have stumbled upon? So we're gonna try to tackle what is JSON? What is JSON p? And what is cores? And how does that work? So first, what is JSON JSON stands for JavaScript Object Notation. And it's sort of developed as this standard for shuttling data from one website to another from one programming language to another. It's a it's been, it's kind of interesting, because it's, it stands for JavaScript Object Notation, but every single language has implemented JSON into it. And the way that it works is that you take whatever the equivalent of an object is in your language in JavaScript, it's an object in Ruby, it's a hash, I'm not really sure I don't know anything about Ruby. But every language has this idea of an object and you want to bring that object and move it to somewhere else. And what JSON does is it string a file that it turns it into a string and then a string is very easy to move, you can put it in a database, you can email it to someone or or you can likely post it or get it or put it over an HTTP request. And then the other end that is accepting that we'll be able to parse it, turn it back from a string into a the equivalent of an object in that language, whether it's coming from a Python server and being received in a PHP server or it's just waiting for in JavaScript, JavaScript, it doesn't matter because everybody gets along on the standard that we call JSON. Right? Now, let's talk about the the origin policy in, in the browser. By default, let's let's use Scott tolinksi.com, and Wes Bos calm as examples. But default, Scott Tolinksi calm can not request any page, it cannot request to do things on Wes bos.com. And that's for good reason. Because if I'm signed in on Wes Bos calm, and I'm visiting a visiting Scott tolinksi.com, Scott could run some JavaScript that would ping my website, and maybe ping a an endpoint that would list all the accounts. Or if I was signed into my banking, and then in had Scott's website open in another tab, Scott shouldn't be able to ping an endpoint of my banking website to send him all of my money. Because I'm already signed in right there's, there's likely a cookie in my, the way that cookies work is that you have a cookie in your browser. And then when you make a request, that cookie comes along for the ride without you having to do anything. And that's how it checks if you're signed in. So it's got to Lenski makes a request on West boss calm, that cookie is gonna come along for the ride. So that ping will happen. But the data that comes back from that Penguin, there's those other ways to stop that that's we're not going to talk about that today. But there's it's not possible for Scott, Scott delinski.com, that tab to read the data that was requested from the other tab. And that's because you shouldn't be able to reach from one website to another. Now how do you get data from one website to another, there's lots of options that you might want to use. In this case, like let's say you have weather.com has an API to pull the weather, you do want to be able to get the data from that API into it. Or if you're pinging the Yelp API, you do want to be able to pull a list of restaurants into your own website, because that's how API's work. And there's two ways to actually do this cross origin, the The first one is sort of the earliest one, you don't really see this any more. Because because of the second one, which is Corps, but the first one is something called JSON P. And what JSON P is it stands for JSON with padding, which makes absolutely no sense. But it's a workaround that will allow you to load data from one website to another. And the way that it works is that first of all, the website supplying the information has to be on board, you cannot use JSON p unless the server side is on board and actually will will supply up JSON p data. And this is something that I see people frustrated with all the time, they're like, I want to be able to use this API, but I can't How do I make it do JSON p? And if the answer is if the browser if the API does not give you JSON p or cores, you can't. And we'll talk about some workarounds on that in just a bit. Once your back end supplies JSON p the way that it actually works. The workaround is that you can't load data cross origin, but you can load JavaScript cross origin. So JSON P is actually not requesting a JSON document, it's actually requesting a JavaScript document that has a little function in it. That's called a callback. And that function has one argument, which is all of the data that is getting returned from the thing. So that's the workaround is people are just loading in, quote unquote, JavaScript, from one and that callback function will then supply you the actual data, which is pretty interesting. I laughed hard when I actually understood how it worked. - -6 -00:08:36,570 --> 00:08:40,590 -Scott Tolinski: Yeah, no, that's actually really interesting. I didn't, I didn't know that until just a second. - -7 -00:08:41,130 --> 00:10:29,820 -Wes Bos: Oh, there you go. If you look at a JSON p, you'll often need to pass it a callback. And then if you look at the response, the callback is just a function with a huge argument, which is all of the data that comes back. And that's great. A lot of people use that. But now we have something much better in the browser, in that it's called cores, cross origin resource sharing. And then the way that that works is that your server side will designate a a number of URLs that will be allowed to request data from your so I use this all the time, because I post every single every single time I launch a course, I launch a new website, and I have a single back end for my courses, which is that courses that Wes Bos calm, but if I ever want to pull data from the back end, like if I want to retrieve a list of courses the user has bought I do this all the time as if I'm having a sale. I don't want to show the sale banner if someone's already bought it right. So I might ping the back end and say did this person buy this course? If so, hide the hide the sale banner because it's it's unnecessary for them to see it. And that's good, but I also don't want Scott to lynskey.com being able to ping my course back end and get a list of courses that person had bought, like let's say someone had bought a bunch of courses Mind, then they're visiting Scotts website, Scott shouldn't be able to in the background, ping my my back end. And because they're logged in, get a list of courses they've bought, right? So cross origin, I have a list of domain names that are allowed to request data from my server. And then it can go from domain name to donate domain name. But other than that, no other websites are allowed unless you do what's called a access control allow origin star, and that will allow everybody to come in and access it. Yeah. - -8 -00:10:29,850 --> 00:11:20,790 -Scott Tolinski: Which is, you know, something you have to be careful with, you know, allowing everyone to get in there. This is one of those things that almost always pops up. Like, when people are just trying to learn something. I think this is like maybe one of like, the the most frustrating issues that people run into, right? The course error, specifically because yeah, they're learning one thing, right? They're learning how to use a particular front end language. And the instructions will just say, hey, do this and do this. And then they do it. And then they come back with this course error. And then it's like off to Google. It's like almost never a situation where you're experimenting and learning about course, it's almost like you always have to learn it, when something is like being presented to you. And then you have to figure it out. Like why is this happening to me? Oh, yeah. Okay, now this? No, no, I have to learn about course. And now it's one more thing to add on to your plate. - -9 -00:11:21,180 --> 00:14:40,080 -Wes Bos: Totally. That's what I hope this hasee treat will be a nice way to point someone to it, and then 15 minutes or so they can learn. What is cores? And why does it work this way? Yeah, nice. Next up, we have one other thing I've run into in the past is with Canvas specifically. So if you're trying to draw a frame of a video or a frame of a image onto a canvas element, and that image or video is hosted on another origin, what will happen is that you you cannot do it unless you have course setup. Because if if Scott has an image like Scott tolinksi.com, forward slash handsome dot jpg, and I try to paint that into a canvas, there's a potential that Scott could taint the, the word that they use is called tainted, which I love. But it will throw an error, of course error saying like, you cannot write pixels from another domain name. If you want to do that, then you need to, you need to proxy the image through one of the domain names that is allowed. And so I guess that opens us up to the last thing in today's tasty treat. And that is proxies. What is a proxy? Well, a proxy is a server that will sit in between you your front end, and the back end, that is actually supplying the information. And it's going to allow you to do what you want. Now, a proxy is almost always not what you want to actually have happen. But there's a couple a couple good use cases for proxy, one of good use case would be like, for example, I use a beer API and one of my react workshops, and I pay six bucks a month for it and I get an API key. And first of all, I don't want to give the API key to every single student that we have, because that would be bad. And then they could just go off. And second of all, that beer API doesn't allow you to access via course, because they only want you to use the API on the server side. Right. So what I had to do is I had to write a proxy, that would take a request in, add in my API key check for these course things because I don't want anybody using the API key only people that are on localhost, or react or beer or any number of them, and then and then forward the request to the server, come back from the server and then return it. So it's sort of a man in the middle or a woman in the middle that will accept the request, get the data, and then and then put it back. There are lots of proxies out there, there's the one that I always recommend is cross origin.me. And you can put that in front of an API that doesn't have cores, and it will do the proxying. For you. That's often what I'll use. If you're just trying to like, whip together a little simple example, if you're trying to use a weather API, and there's no cores on it or something like that, it's often really easy just to pop a quick cross origin.me in front of it. Because Because there is no cross origin on the server so that we'll be able to successfully make the request. Don't use that for production, because you're essentially running all of your traffic through some random dudes server that you don't know. Right? And they could be sniffing it, they could be doing anything you want. So you never want to send any sensitive information over a proxy that you yourself did not build or do not own. I think that's, that's my summary of JSON, JSON P and cores. Any other ideas? I mean, I - -10 -00:14:40,080 --> 00:15:27,300 -Scott Tolinski: thought you nailed it. I think these these things are frustrating for a lot of people. So obviously, if you you know, if you want to learn more about this stuff, there's this site. I don't know if you've seen this, enable hyphen cores.org. It seems like it's a great resource for working with cores on both the server and the client. And then if you click that, Unlike cores on the server, it lists a whole bunch of different servers like Express. And then you can click on Express and look at, okay, how to enable cores and express? Or maybe you just want to enable it on nginx. I mean, they even have Meteor in here. So they have a lot of stuff. And both client side server side, whatever, I think it's websites, it's pretty, pretty nice little place to learn some things. So yeah, naval hyphen, corps.org. Check it out. I think it might be a nice little supplement to this episode. Oh, that's cool. - -11 -00:15:27,330 --> 00:15:58,200 -Wes Bos: Yeah, cuz that's another thing I really didn't mention is turning cores on is very, very simple. You can do it on the Express layer. that's usually where I do it. You can also do it on the like the server layer, like nginx, or Apache, like Scott just said. So it's really easy to turn it on. It's it's more about understanding how it works, because you want to be careful with this stuff. You don't want to accidentally allow some other domain name to reach into your application, and perform potentially terrible actions like deleting all of your content or reading sensitive customer information. - -12 -00:15:58,200 --> 00:16:13,920 -Scott Tolinski: Hmm, yeah, so definitely cognizant of that. Speaking of which, somebody mentioned that we should do an episode on security stuff. And I think this would be a nice little lead in for doing more on security. Definitely, totally. I've added it to the Trello list. So we have it in there. And I think that's got to happen at some point very soon. Here. - -13 -00:16:14,189 --> 00:16:32,370 -Wes Bos: Totally. I think like, it would be helpful to do like a, these are the things you need to be aware of. We've talked about cross site scripting before and now we're talking about cores. But if we bundle it all into a single episode of like, as a web developer on the server, you need to be aware of these things on the on the client, you need to be aware of these things and - -14 -00:16:32,430 --> 00:16:37,200 -Scott Tolinski: yeah, yeah. What are bad fixes? What are you know? Yeah, stuff to know. - -15 -00:16:37,500 --> 00:16:44,160 -Wes Bos: Cool. Let's do it. Alright, I think that's it for today. Thanks so much for tuning in. And we'll see you on Wednesday. xo. Yeah, - -16 -00:16:44,189 --> 00:17:00,570 -Scott Tolinski: we'll see you on Wednesday with a full on episode. Peace, peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax64.srt b/transcripts/Syntax64.srt deleted file mode 100644 index 982897d1c..000000000 --- a/transcripts/Syntax64.srt +++ /dev/null @@ -1,656 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:09,000 -Unknown: the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski - -3 -00:00:09,000 --> 00:00:10,560 -and West boss. - -4 -00:00:10,560 --> 00:00:18,570 -Wes Bos: Hello everybody and welcome to a syntax today we're gonna be talking about gear. Gotta get the gear. Have you seen that portlandia episode? Where do you watch? portlandia? - -5 -00:00:18,749 --> 00:00:19,950 -Scott Tolinski: Oh, yeah, yeah, so - -6 -00:00:20,099 --> 00:01:04,950 -Wes Bos: there's, there's like this, uh, these characters and portlandia that they do where they get the gear and they every time they're like, oh, let's go on a hike. And then they spend like all day, getting all the gear and all the flashlights and all the like, well, hydration packs, and everything is hilarious, because my wife and I always make that joke, like, gotta get the gear. It's so whenever we have anything new, but we're talking about like office gear, like what are our setups, everything from monitors, to chairs to desk, Scott just redid his home office. So we've got a lot to say. And it's funny. It's one of these things that I actually get a lot of questions about you really think like, it doesn't really matter at the end of the day, all that much, but people love chit chatting about the gear. So let's let's do it today. We haven't gotten I haven't chatted about two weeks. So how you doing Scott? - -7 -00:01:05,249 --> 00:01:35,070 -Scott Tolinski: Do good Hey, I just released a new series on graph qL so it's a like a react and Apollo client series. So it was hard at work in that out and making that happen. I made some major code updates to the level up tut's site just been doing a lot of head in code. getting work done work done. You know, that's that's been it for me. I know you've been on a bit of a vacation, which is wonderful. Can you tell us a little bit about your Yeah, so you went to layer con two. So yeah, so I talked about that. - -8 -00:01:35,099 --> 00:02:57,270 -Wes Bos: Two weeks ago, I went to lair con, which is a Laravel conference in it was in Chicago at this amazing museum. And it was awesome. I met so many people, pretty much anyone who walked up to me, it was like, Hey, listen to sin cat syntax. It's awesome. Big fan of the show. So I thought that was really cool that you actually get to meet the people that listen to the podcast. And also it was like a primarily PHP developers. I was a JavaScript guy giving a CSS talk. So it was a bit out of my out of my area. But it seemed to be enough people. Listen, I guess that's the nice thing about being a front end dev is that even if you are a PHP developer, you'll likely have to learn some JavaScript at some point. So it was really good, met a whole bunch of people. Everyone was super nice. The whole Laravel community is awesome. They announced this thing called Laravel Nova, which is like kind of like a CMS back end that you can hook up to the Laravel. And then it will allow you to log in and it's it's amazing because like you think, Oh yeah, I can make a crud operation. But the interface is unreal. It's all built in view. It does all these relational it's really like the fit and finish of it is amazing. I cannot believe how how nice this thing was. And it really made me jealous. I was like, I want something like that for express or node. And there really isn't a whole lot out there for for us over. So I was pretty jealous of it. Yeah, I - -9 -00:02:57,270 --> 00:03:09,270 -Scott Tolinski: mean, that looks that looks awesome. I'm really into that kind of stuff. To be honest. I like I like I look a good fit and finish on a platform like that. If it was me with the interface a little bit, I'm a total sucker for that. - -10 -00:03:09,359 --> 00:03:45,600 -Wes Bos: It was like the perfect mix of like this thing it comes batteries included for like almost everything that you need. However, if you want an escape hatch to build your own interface for like a custom sort of data input or custom relationship, then you totally can and you can just code up your own view components to pull in the data into manage it yourself. So I was pretty pretty impressed. It apparently took them like, like nine months of full time Dev, which is pretty nuts that this thing took so like, I don't say as long but like it's an amazing product. And they really put a lot of time into it before they even announced it. Cool. I - -11 -00:03:45,600 --> 00:03:51,539 -Scott Tolinski: think this sort of next gen style CMS sort of stuff is a it's a really interesting space. Really. Yeah, I - -12 -00:03:51,539 --> 00:06:29,910 -Wes Bos: think space. Yeah, me too. It's very, I'm curious to see I know there's a lot of stuff in Node world and graph qL world right now. I'm curious to see where it will go from there. And then also so I went on a vacation in the last week to the Poconos, which is kind of a nice cottagey area in Pennsylvania, my family, my extended family and I like my parents and my brothers and sister and all of our 4000 kids we all rent a huge cottage somewhere and we basically were so big and when you're this big it gets hard to be able to rent a cottage because you need like six or seven bedrooms to fit everybody and so basically you you you do the filter on homeaway which is a kind of like Airbnb, but for a lot more vacation properties are on there and you basically set the filter and then you zoom out to North America. And you look at your options that actually gets like my whole family is cheapest house so we were like we want all of these things but for very cheap so we ended up finding a really nice place but had a crazy crazy experience with my daughter who is just about two years old. And I'll tell you the story because it's it was a crazy story and hopefully it can help some other parents We're after dinner one night, we're just playing with her. And she was just sitting on one of the beds and we're tickling her and playing around and my daughter is getting into the the terrible twos. So when she doesn't like something, she she gets really mad. And what had happened is that we were just tickling her and playing around and then all sudden, she decided she didn't like that. So she started like crying screaming at us. And I said, Oh, honey, and I picked her up. And she was laying on her back, and I picked her up. And she went, went unconscious, and we started freaking out. We're like, Oh, my gosh, what's happening? She's like, her eyes rolled back in her head. And her whole body went limp and stopped breathing. So we're like, oh, my gosh, what's happening in my wife's family has seizures in the family. So we're like, oh, man, this is probably a seizure. So we later on the ground, and about 10 seconds later, she came to and started crying and breathing again. And then and then five minutes later, she was totally fine. So we're just like, what was that? So we went to the ER, oh, it's half an hour away. We drove to the ER, got her in the ER, and they took a look at her and started drawing blood and doing all of this stuff. And they ended up transporting us via a, an ambulance to a children's hospital. And they put us in the Children's Hospital. And we had all kinds of doctors coming in and taking tests. And then we had asleep overnight, which is miserable thing I really feel for any parent that ever has to sleep in the hospital. And we're there all day and waiting for an EKG, which is where they attach like a electron thing. - -13 -00:06:29,910 --> 00:06:31,500 -Scott Tolinski: Yeah, electro Yeah. - -14 -00:06:31,619 --> 00:07:39,660 -Wes Bos: electrodes, electronic. Yes, desktop browser based experience. And so this lady, they tell us to get her asleep, which is a task on its own, we got her to sleep. And then they come in, she says, Okay, I need to put 27 electrodes on her head, and we got our sleep are like, Alright, let's do it. And she wheels in this like, computer with all these electrodes on it. And she plugs it into the wall. And she's like, Huh, that's weird. And she tries another plug. And she goes, Oh, that's, that's weird. And we've been waiting, like 20 hours at this point for this thing to happen. And we're just like, Oh, my gosh, what is going on? And she just keeps plugging it into other computers or other outlets. And I'm like, okay, you do not have the debugger, you know, when somebody doesn't know how to debug something, they're like, Yes, just keep trying different. And then she, she, I could tell that the the thing was getting power, but the computer wasn't turning on. And it's like this crappy Dell computer. And she just starts jiggling the DBI cable to see if that will fix it. And I can see that there's no power to the entire machine. So I get my dark, I get my cell phone out on my case that beside I know how computers work. So - -15 -00:07:39,869 --> 00:07:40,920 -Unknown: Excuse me, - -16 -00:07:40,950 --> 00:09:00,360 -Wes Bos: excuse me, I'm a professional computer user. So she has this thing. She's juggling the TVI cable, which is clearly not the issue because the monitor has power, it's the computer power supply that is likely to put. So I get down in there. I'm trying to reset all the breakers on this like, piece of medical equipment, and nothing, nothing works. And we were livid because we're like, we've been waiting 20 hours. So I'm like, okay, go get another one. And of course, it's a brain machine. You think you'd have a backup in the hospital? No backups there there said it's down for a week, Jesus to replace the entire thing. I was like, Oh, you're kidding me? Like, what are we going to do? So we can't do this brain scan. And we're just about to, we can't do the brain scan. So we're like, okay, we have to pack up and like drive home overnight. So that we can go to Canada and go to the ER there and get this thing done. Because we need to figure out what's going on. And just as we're about to like, just, like throw our hands up in the air. And the one of the doctors, like let's just see if the neurologist will still come in. And they brought the neurologist in and he says, tell me the story again, and he is very empathetic and kept asking lots and lots of questions about what happened. And it turns out that, you know, I don't know if you remember this from like high school. But do you remember when kids used to breathe out all the way and then someone would hit their chest? Yeah. Do - -17 -00:09:00,360 --> 00:09:02,270 -Scott Tolinski: you remember that naked pass out? - -18 -00:09:02,399 --> 00:09:54,529 -Wes Bos: Yeah, that's what happened where she screamed. And then I picked her out and I probably hooved another breath out of her at that bipolar Oh, and then by by putting someone who's laying down and picking them up vertical, that also the all the blood rushes out of your head. So it was like a perfect storm and just knocked her unconscious. Which is apparently such a common thing with two year olds. Like we told her friends and like three of our friends like, Oh, yeah, our daughter did that. We had to call the 9110 my and so it was nothing. It was not a big deal at all. And and the neurologist was like this happens all the time. I see it. I see it all the time. People think that there's a seizure. And then he asked us all these questions about family history and did a whole like like, Where's your daughter at how many words does she say Can she opened door handles things like that? And she's like, you're not fine, go home. And we're like, Oh, thank goodness. You know, cheese. - -19 -00:09:54,570 --> 00:09:59,149 -Scott Tolinski: We were really scared for you guys. Yeah, that was that was terrifying to witness. - -20 -00:09:59,399 --> 00:10:23,070 -Wes Bos: So it was not A not a fun, not a fun thing to go through, which is, which was terrible. But every one of the hospitals right, we've stayed in this like Ronald McDonald room, which is really cool. So they treated us nicely. It's just was a disaster. And then we were pretty pretty cooked for the rest of the vacation, which it started. It was like the second day of our vacation that happened. So wasn't the most relaxing vacation, but we're happy that that she's okay. Yeah, - -21 -00:10:23,099 --> 00:10:27,210 -Scott Tolinski: geez, well, it's a the best possible outcome. I think that the only thing - -22 -00:10:27,289 --> 00:10:39,840 -Wes Bos: Wow. So that's my that's my crazy story. Hopefully, you can remember that if you have I know a lot of our listeners have young kids. And if your kid goes blank for 10 seconds, that likely that might be it. Cheese, cheese, yeah, - -23 -00:10:39,840 --> 00:10:40,740 -Scott Tolinski: scary. - -24 -00:10:40,740 --> 00:11:20,730 -Wes Bos: So let's get into it. Let's, we're talking about our gear or office setups. We're gonna we'll start with computers. We'll move through monitors, keyboards, mice, desks, chairs, headphones, hard drives, backup systems, Wi Fi, all of that good stuff. I have a website on wherever I have a website, I have a page on my site called West boss.com, forward slash uses, that just links almost all of the stuff I need to update it with with some of the stuff but people ask me all the time about what gear I use. And I also recommend a lot of people have sort of picked up this for slash users. And if anyone else is making a I love seeing what other developers make some I encourage other people to make for slash users on their own website. - -25 -00:11:20,999 --> 00:11:34,740 -Scott Tolinski: Yeah, mine, Ted, forward slash my gear. Oh, yeah. Although there's a man, there's a really dope site. And I'm struggling to remember is it uses this? Oh, - -26 -00:11:35,130 --> 00:11:35,669 -Unknown: no, I - -27 -00:11:35,669 --> 00:12:20,250 -Scott Tolinski: don't think so. Dang, I don't know why I just made an account on here. I just started uploading my gear. And it's Oh, yeah. Like all of the youtubers who are into photography, use this thing. I'm gonna remember the moment that we get off of this. Oh kit is a kit kit calm. This allows you to upload all of your stuff. I just made a kit, but it's not fully done yet. And this is going to be just sort of like, Hey, here's all of my my stuff that we use for podcasting. I'll share the link. It's not done yet. But I have most everything else on the my gear part of my site. So this is pretty cool it this way it gives you like a nice little interface for it and stuff like that. Definitely a nice little nice little place to host your your gear. Yeah, that got to get that this is - -28 -00:12:20,250 --> 00:12:55,440 -Wes Bos: also like a good way for for people who have a bit of an audience to make a little bit of extra money, because you can put Amazon affiliate links in these things. And as long as you're like, some people, I think sometimes we'll just like say stuff, like I follow some people on Instagram, and they'll just link stuff up because it's on Amazon. And they they're like, Oh, so many people are asking about the shirt that I wear. And really nobody, nobody's asking about the shirt that you wear. You just want to like link us up. So you kinda have to be careful with this affiliate stuff. But if it's actually gear that you use, and you can you can stand behind it. It's kind of a neat way to make a little bit of extra money. Yeah, I - -29 -00:12:55,440 --> 00:13:13,169 -Scott Tolinski: think that you have to be Yeah, you definitely to be careful with that. And especially now, there's rules on YouTube that if you have affiliate links, they have to be listed as affiliate links on your descriptions and stuff like that. You can't just like transparently link stuff anymore. Oh, yeah. And I like yeah, that's that, to me. Is - -30 -00:13:13,199 --> 00:13:19,980 -Wes Bos: should be important. I don't mind if someone sends me an affiliate link, but you shouldn't be trying to trick me into clicking it right. Yeah, - -31 -00:13:20,010 --> 00:13:24,390 -Scott Tolinski: yeah, absolutely. Yeah. Likewise. Yeah. So yeah, let's get into it. What what, - -32 -00:13:24,390 --> 00:13:25,110 -Unknown: uh, - -33 -00:13:25,110 --> 00:14:08,580 -Scott Tolinski: what's the first thing we're going to be doing is probably the easiest to answer your computer we both use the same computer so we both use a 15 inch MacBook Pro with the the new one with the the crappy keyboard and the dongle buck, the dongle book. Yeah. So I actually really liked this computer for a host of reasons. The keyboard like, people really rag on the keyboard and it sucks in terms of failing. Like, I have to push my command keys really hard sometimes. And that's like really awful. Like, sometimes the the keyboard experience is really awful. But for the most part, I like the feel of it while typing. It's clicky the low profile keys. I like all of that stuff. I just don't like how it breaks so much. - -34 -00:14:08,640 --> 00:14:25,080 -Wes Bos: Yeah, so there's a there's a you can bring it to Apple and they'll swap it out. And the newest MacBook Pros have like a bit of a membrane on them, which I think is too met. So if you don't know the problem is that they switch to these new keys that are they called butterfly keys. - -35 -00:14:25,260 --> 00:14:26,520 -Scott Tolinski: The switches are Yeah, - -36 -00:14:26,640 --> 00:15:06,990 -Wes Bos: yeah. So they're they're really like low profile. They don't travel a lot and I actually like the computer but you get crumbs under it and I'm not like eating like nature Valley, you know, that is not to cook crummy crumbs. But getting crumbs everywhere. There's like this meme that is like nature Valley get crumbs. I'm not doing that. Like I have my laptop up on a stand and I still somehow get crumbs in it. That goes under the keys and then you can't like you don't get any feedback from hitting the key and sometimes you got to really ram it and it's a nightmare. So I'm hoping that the new ones saw That problem because that's probably my biggest pain point the trackpad on it is also too big. Like I hit it, I hit my fingers on - -37 -00:15:06,990 --> 00:15:24,090 -Scott Tolinski: it all time all the time and I love the dappled trackpad is like one of my favorite things in the world. And I hit this thing all the time accidentally though, like, it'll, it'll jump my mouse position to somewhere else, or like, click into another window by accident, just because it's like the tap, click. Yeah, that is super Yes. - -38 -00:15:24,299 --> 00:15:59,130 -Wes Bos: So I have mine on a dock and I don't use the keyboard 98% of the time, it's only when I go on trips. And otherwise the hardware is awesome. As fast as hell is really reliable, really, really happy with that. It's just those little things that everybody complains about. That seems to be it's just annoying enough not to make me like I wish that they made the old one like my old one where it had actual HDMI on it had the proper USB ports, things like that. You can still buy them, but I wanted like much faster. So I wish that they would bring that one back because that was my my favorite computer of all time. - -39 -00:15:59,189 --> 00:16:08,100 -Scott Tolinski: So if you if you get your keyboard replaced via their replacement program, do they give you the new one with the membrane? Or is that only on the new they don't say? Because I think - -40 -00:16:08,100 --> 00:16:22,320 -Wes Bos: that by saying it they would admit that there's a problem and then that opens the floodgates to lawsuits Should I would assume so. Like what what help would it be like you're just gonna open another nature Valley 10 seconds later and your your pooch? - -41 -00:16:23,340 --> 00:16:41,010 -Scott Tolinski: Yeah, yeah. Yeah, it's, it's again, I really like the feel of the keyboard. I know a lot of people don't even like that aspect of it. But I like that. It's just I know, also, they have to replace like the whole top case if they replace the keyboard. And that's like kind of insane. It's Yeah, least fixable computer ever made. - -42 -00:16:41,460 --> 00:17:07,650 -Wes Bos: Yeah, it's obsess, it's hard to have it. I also hate the USB C ports. Like I know people talk about this on on then that it's annoying. Like just give us at least one like the amount of times that it couldn't plug something in when I was traveling because I couldn't find the tiny little dongle adapter like I have one on my desk right here. They're tiny, tiny and then and then you can accidentally bump these dongle things and I don't know where he said like, it's a mess. But what's - -43 -00:17:07,650 --> 00:17:22,140 -Scott Tolinski: it called like an SD card reader man, like all of the old netbooks have always had like SD card readers and didn't so many professional photographers use this thing? Like, come on, man. How hard is it? Does this look? Yeah, thinnest ports on the planet. But yeah, - -44 -00:17:22,169 --> 00:17:31,340 -Wes Bos: it's sure you could just there's tons of room? I don't know. I wish that they would they would bring it back. I think Apple is listening. But I don't know that they they care enough? - -45 -00:17:31,380 --> 00:17:34,710 -Scott Tolinski: Yeah, they they're their trillion dollar. They do not care. Yeah. - -46 -00:17:36,330 --> 00:17:45,320 -Wes Bos: So that's the computers that we use. Let's What about monitors, obviously, we both sit at desks all day. We're sitting at desks right now staring at monitors. What do you have for your monitor? - -47 -00:17:45,720 --> 00:19:38,040 -Scott Tolinski: Yeah, so my monitor which people ask me about all the time because they see it on Instagram. And they're like, that's a big monitor. I actually am always like, I don't know the version or the the because I like LG does not make their models numbers. Easy. It's the gnome, three, four, u c, eight, eight hyphen, b, o, b Yeah, the hyphen B so that I don't really know, like, whenever people ask me what this is, but it's on my my gear page, it's on my kit, which I'll link in the thing. But it's a 34 inch ultra wide and it's curved. So it has this like beautiful inward curve to it, it takes up a ton of your vision. And in my new setup, it's it used to be directly in front of me like directly behind my monitor right. Now I have a totally off to the side here on the right. So I can push it away when I do my video recordings. And it doesn't have to be in front of me. And so it's really cool because I can angle it and whatever and it's perfect. And it just takes up so much space. It is it is I'm a huge fan of the ultra wide I when I ordered it, I wasn't quite sure how I'd feel about it. But you can fit browser window with Dev Tools open and your code with multiple tabs in your code all in one horizontal plane. And it is just an exquisite I think development experience for me. I also use this vivo dual stand it's like a one of those mitre arm stands for the monitor but I bought it for when I had two monitors. And so now that I have just one monitor, I I tried to take one of the arms off and it won't come off I actually unfortunately stripped the bolt trying to get it off because it was just like that crank down. So I'm stuck with two arms on this thing I might end up just getting a new one because now that I'm moving it around so much I might want something that's like really super smooth and this is like a $27 arm so it's definitely not the highest quality one so I think I'll probably get another one that's like put it wherever I want kind of thing. - -48 -00:19:38,040 --> 00:19:49,260 -Wes Bos: So where what resonates maybe you can open up your display preferences what resolution do you run that thing at because I've been looking at those ultra whites but they I feel that they only go What? 1440 high - -49 -00:19:49,440 --> 00:19:52,610 -Scott Tolinski: 344 wide and then 1440 tall - -50 -00:19:52,650 --> 00:20:00,830 -Wes Bos: Yeah, awesome. Yeah, so that's I'm like waiting for like a 4k curved one. So yeah, let me go into mine because I think Done with yours. - -51 -00:20:00,990 --> 00:20:11,730 -Scott Tolinski: Yeah, but I'm gonna say Trust me. I mean, if you're waiting, that's cool. But at this this 344 by 1440 Yeah, it looks crisp as, as anything does. - -52 -00:20:11,810 --> 00:20:44,670 -Wes Bos: Oh, yeah, that's good. So I run on them as my main monitor, I have a 27 inch Dell 4k display, which I usually run it at what 3008 by 1692, which is because like, if you run it at full 4k, everything is tiny. But if you run it at like 1920, by 1080, everything is massive. So you kind of have to go in between there. So I usually run it at about that, and I love having the extra height to work with. But that What did you say 3008? By 1692 - -53 -00:20:44,810 --> 00:20:51,320 -Unknown: for your MacBook Pro? Yeah. Or no on my on my external monitor. Okay, that's gonna say yeah, yeah. Okay. All right. - -54 -00:20:52,440 --> 00:21:23,280 -Wes Bos: So I have talked to a bunch of people who actually run like, like 40 inch 4k displays, because another option is you can find a TV that does 60 hertz, it has to do 60 hertz, otherwise, you're gonna get like headaches from watching some of these cheap TVs. But some people do that. And then they run it at full 4k. But because the actual panel is so large, you can fit like 410 ATP monitors on it. And I've been very, very tempted to do that. I just haven't haven't made that. That switch just yet. So that's my, my main one. - -55 -00:21:23,640 --> 00:21:47,330 -Scott Tolinski: I used to do that when I had, when flat screens were first starting to get super affordable that Costco and I bought like a it was like cheaper for me to buy a 32 inch TV at the to get at that resolution. And then that hurts the refresh rate. And it had a DVD player in the side. time that was like a sick thing. I was like, Oh yeah, my monitors got a DVD player in the side. - -56 -00:21:47,600 --> 00:22:39,960 -Wes Bos: That's good. And then to my left, I have a 22 inch Acer display, I've had it for like 10 years, I put it on its side. So I have it vertically, vertically running. So it looks pretty good. I'm big, big fan of that I have been thinking about getting a second 4k and putting it on its side. But I just think that it's a bit too tall to put under it. So I've been thinking a lot about about these different monitors and whatnot. But I haven't haven't made the switch. And then to my right, I've got my MacBook on a what's called a reign m design. It's just a little laptop stand. And then that's just to my right, usually what I'll do is I'll put all my code in my browser on my 4k, I'll have my Slack, and any documentation to my left. And then on the right hand side, I'll have Twitter, Spotify, kind of other stuff like that open and it's nice. I don't use spaces at all, I just have physical screen space. And I can just move my head around looking at it. I don't I don't switch around to spaces or anything like that. - -57 -00:22:40,170 --> 00:23:08,340 -Scott Tolinski: Yeah, same here. I, I have a What is it not cinch. It's one of those apps Devi I actually use two of them, I use spectacle and Devi, because they're both very different. I use Devi to develop my windows for actually level of touch recording. Because I can say, Hey, get to this specific part of the screen, or that just use spectacle to say, hey, fullscreen, half the screen, a quarter of the screen, whatever, I use those things like non stop. - -58 -00:23:08,400 --> 00:23:37,740 -Wes Bos: Yeah, Yeah, me too. I've got tons of shortcut setup with better touch tool to to move monitors to go to full screen a monitor to go to the left to go to the right to go to the lower third hire third. That's pretty handy. And then I also use Divi every now and then if I just want to specifically size something, there's a whole bunch of different tools out there that that specifically do this one, I've just found that some of them just like you have to like configure them to no end and I don't have time to configure them. So I just want like a nice GUI to be able to help me out with the different shortcuts. - -59 -00:23:37,799 --> 00:23:39,270 -Scott Tolinski: Yeah, sure. For sure. - -60 -00:23:39,299 --> 00:24:02,520 -Wes Bos: I also have everything on monitor arm so I hate when your mouse bumps into something or as I often see people have like, like flash and Java books holding up their monitors. So it's high enough. But monitor arms are so cheap. I have one of them on ergotron, which is like the cat's meow of monitor arms. It's like the thing like the dead, you know, the dentist light or the dentist can move the light anywhere they want. - -61 -00:24:02,700 --> 00:24:06,090 -Scott Tolinski: So that's exactly sort of what I'm looking for. Yeah, yeah, every one of - -62 -00:24:06,090 --> 00:24:19,050 -Wes Bos: these, they're super nice, but I don't need I don't have to move it around that much. So for my big 4k, I just bought like a monoprice a little monitor arm and it's been working really nicely. I can move it back and forth. But that's about it. - -63 -00:24:19,289 --> 00:24:38,970 -Scott Tolinski: That's nice. That's very nice. So before we get on to my sin keyboard, let's talk about something else. Wes and I both use, which is m lab. This episode is sponsored by m lab, which is a great place to host your databases. I know I've been using them for quite a little while. I know you have to as I don't know you want to tell us a little bit more about em lab. - -64 -00:24:39,180 --> 00:27:38,940 -Wes Bos: Yeah. So if you are building an application built on MongoDB and you want to be able to to not deal with the database part yourself hosting the database, doing backups, all that stuff, because quite frankly, databases scare me scaling them being able to back them up frequently. What happens if you accidentally delete some stuff so lab sort of takes that all it's a service that it used to host my database and to handle all of this sort of hard stuff for me. And I really, really like it. Because let me just tell you a few reasons why I like them. First of all, they do automatic backup, I pay a little bit extra every month and get I think, every couple hours, I have a backup of my database. And that's just something that you don't have to figure out yourself, they have a really nice interface. So if you ever like like, one time I was away from my computer, and I needed to just jump into the database and fix something really quickly. And I just pulled it, I just pulled it up on the website. And you can do all of your queries and everything right from from the website and view all of your data, their services really good. I once had this weird issue where every like three days my database, which is timeout, and I could not figure it out for the life of me in it, what it ended up being is that I was running an outdated MongoDB driver on my server, not a problem with M lab at all. But they helped me I like contacted them. And I was like hey, like this is going on. I don't really know what's what's happening. But I keep my site keeps going down because my my database, and they actually had figured it out that I was running an old version of the MongoDB driver, which is amazing. And they had a had someone just contact me directly and work on it, which is so good. Their service is really, really good. They know MongoDB cold. And the other part that I really really like about them is that they send you this email every single week that tells you what slow indexes are on your or what you should be indexing on your database. So the way that MongoDB works is that you can tell it to sort of remember or keep in memory, certain things. So if you're constantly querying someone's account by their email address, you probably want to index that user's email your users models email address, so that you can quickly pull up users by their email address. And what they'll do every week is they'll say, like, hey, you're running this query, like one of the query, just looking at the email right now one of the queries that I have is based on their password reset token and their expire. And in the last week, 53, people have run that query, and it's taken an average of 224 milliseconds to run that query, you can greatly speed up that query and use a lot less resources, if you were to index those two things. So I can go back to my model and reindex those and then it will be much faster. So that's really cool. It's not just the database host, but they add this like extra little layer of of niceness on top of it. So check out m lab at m lab.com. For all your MongoDB hosting needs. I use that my node course as well for doing the entire course just because I'm such a big fan of it. Yeah, - -65 -00:27:38,969 --> 00:28:00,960 -Scott Tolinski: I'm a big fan of again, like not trying to manage these things that are just so important yourself. Like somebody was just asking the other day, like, what service? Should I fire up a server on to host my database? I'm like, Well, why would you fire up a server just to host your database when you could use a service like this, because it's just so important, and it takes care of all the tough stuff for you. - -66 -00:28:01,350 --> 00:28:28,320 -Wes Bos: They have a half gig sandbox, which is more than enough for any app. So if you're just playing with stuff, if you're just trying to like learn, do not try to set up MongoDB locally on your computer. In my own tutorial, I tell people just go to em lab. But if you really want to, here's how we run it locally. But it's so much easier just to fire up a sandbox account on em lab is totally free. And then there's there's no like, you don't have to put your credit card in. I don't think it'll just just get you up and running. Which is really good. - -67 -00:28:28,410 --> 00:28:30,000 -Scott Tolinski: Yeah, super nice. So thanks - -68 -00:28:30,000 --> 00:28:33,780 -Wes Bos: so much to em lab for sponsoring. Let's keep rolling with keyboards. What - -69 -00:28:33,780 --> 00:28:34,320 -Unknown: do you use? - -70 -00:28:35,370 --> 00:28:53,250 -Scott Tolinski: I mostly just use the Mac keyboard because my computer's just sitting right in front of me. I don't have it on a stand or anything. It's just sitting right there. And if I do use a keyboard, I have a code keyboard. That's the name of it code keyboard. I believe it was designed by coding horror horror. - -71 -00:28:53,430 --> 00:28:56,130 -Wes Bos: Yeah, and I built Stack Overflow. - -72 -00:28:56,219 --> 00:29:22,260 -Scott Tolinski: Yeah, okay, I'm trying to make sure I'm right on that but it's I have the one with the number pad I got it cuz I like keyboards is number pads. It has like a Mac settings specifically where you flip a little switch and it has everything configured. Yeah, and I bought some key caps for it off of massdrop that are kind of fun. So yeah, that's pretty much it if I use a mechanical keyboard I had a lot of people complaining that the cookies were getting picked up in the mic. So I've been yeah not using that for recording. - -73 -00:29:22,560 --> 00:29:36,990 -Wes Bos: That's the main reason why I'm not using a mechanical keyboard I know you can get like really quiet ones but even the quietest ones is still click click click click click and there's this sick one that's like cobalt to a couple people have bought it they keep sending me links to it like it looks exactly like my text editor theme - -74 -00:29:37,020 --> 00:29:37,860 -Scott Tolinski: perfect for you. - -75 -00:29:37,979 --> 00:30:00,480 -Wes Bos: Yeah, I just don't I just want it to be most of them are wired as well which is a no go for me. I can't have any wires on my desk. So I use just a regular Mac Bluetooth keyboard. Big fan of it. I've been using it for 10 years and then I have a Magic Mouse which is probably about 10 years ago it's disgusting like my like acid on my hands have like worn right through the aluminum are you on? Oh - -76 -00:30:00,480 --> 00:30:02,010 -Scott Tolinski: yeah, I'm seeing that yeah, - -77 -00:30:02,040 --> 00:30:43,830 -Wes Bos: it's starting to go I put up a Twitter thread if you're interested in mice go to this Twitter thread. I'll link it up in the show notes and ask like what's the best mouse out there? And it was like kind of split between use a trackpad, a Magic Trackpad, use a Magic Mouse, or and then this other one the Logitech MX Master two s, which seems like a really sick mouse. So I'm think I'm gonna buy that and just try it out. I've been loving that I've had no qualms about this Metro mouse except that if I bump it, it disconnects for like two seconds and it's really nice someone figured out you can stick some tinfoil in it and make it work better but I'm gonna try it out and and see how it is. Maybe it'll be a sick pic of mine in the future. - -78 -00:30:44,010 --> 00:31:10,470 -Scott Tolinski: Yeah, I use just the Magic Trackpad. If I do use one and I love the Magic Trackpad. I always like when I had desktop computers or anything like that my hackintosh I've always used this giant trackpad. So that would that's like a big thing for me. I just love like my hands are so so used to the trackpad. And the apple trackpad is just so just so nice. That's like one of the nicest things Apple does. That'd be like, the thing I would miss about an apple computer. If I left was the trackpad. - -79 -00:31:10,860 --> 00:31:14,490 -Wes Bos: There's also these keyboards that are split was the name of them. - -80 -00:31:14,520 --> 00:31:33,150 -Scott Tolinski: Yes, I know about those. And I almost bought one the shoot. And it's again, it's escaping me. I've really wanted those because you can build them yourselves. And they're like fully customizable, and they have all these keys. There. They have a ones that like your have your thumbs have like custom access keys. And this is gonna be I did - -81 -00:31:33,150 --> 00:31:47,160 -Wes Bos: use the Microsoft, Microsoft makes awesome hardware. And I use for many years the split Microsoft keyboard that was ergonomic with the Microsoft ergonomic mouse. And I really liked that. It was just a bit too big for my desk and - -82 -00:31:47,360 --> 00:31:49,560 -Unknown: I gave it up. It's the airgo ducks. - -83 -00:31:50,010 --> 00:31:50,640 -Yeah, yeah. - -84 -00:31:50,850 --> 00:32:06,780 -Scott Tolinski: Yeah, the Ergo ducks. And then there's the air go ducks. Easy, was just spelled with an E and A z. That will give you the opportunity to have them like build it for you. Because a lot of these are like coming kits where you have to, like, put it together or solder. Yeah, stuff like that. I'm not. I'm not about that. I'm not about spending that kind of time. - -85 -00:32:06,990 --> 00:32:22,170 -Wes Bos: Yeah. And you also have to, like learn to I'm sure, like if you spend some time on some of these, you could like relearn, like, there's the kinesis. That's the one that I'm talking about that it's like totally split, and it's like you can like almost vertical keys, which is really cool. But - -86 -00:32:22,200 --> 00:32:26,550 -Scott Tolinski: I don't know, one day docs is totally split two. It's like a - -87 -00:32:26,670 --> 00:32:29,730 -Wes Bos: Yeah, it's like it's actually two pieces with a cord in the middle, right? - -88 -00:32:29,790 --> 00:32:45,480 -Scott Tolinski: Yeah, two pieces. And then there's like little extra again, like thumb access keys that are like non standard keys and stuff like that, that are just like modifiers like additional modifier keys. I found a video that's called out from Linus tech tips that's calling it the dankest ergonomic keyboard. - -89 -00:32:47,580 --> 00:33:18,240 -Wes Bos: That I love that Linus tech tips guy he's like the most 90s hold on I've ever seen because he's like, like one of the last few guys that like still builds computers and talks about like graphics cards and chips and overclocking and stuff like that. Remember that used to be the the big thing but you don't see too many people talking about that stuff anymore. Unless you're super into gaming. Let's keep going next is a desk. You just picked your desk and the last did a one so why don't you just tell us real quick what your desk is again? - -90 -00:33:18,330 --> 00:33:30,390 -Scott Tolinski: Yeah, so my desk set up used to be this like IKEA desk. That was pretty cool. I found out I posted a photo on Twitter and I found out it's like a famous IKEA desk. Oh my god, you're right. Yeah, I think so. - -91 -00:33:30,630 --> 00:33:41,130 -Wes Bos: I had the IKEA jerker for many years. It's amazing. You can get all these like like swivel arms for it and it was great when I had like a CRT monitor that you wanted to put up and swivel it around. - -92 -00:33:41,250 --> 00:35:04,500 -Scott Tolinski: Yeah, so either way I had that forever and ever and ever. And now I'm rebuilding my set I want it to be wider. That one was like really deep so I got a really wide what I got is an Ikea countertop. It's the Kirby countertop it's in this like walnut Butcher's block style. It is super nice looking and for like 140 bucks it's just wide desk it's superduper wide and I'm loving it and then I also got to the Jarvis standing desk legs where they have like the presets and these things are which is a great I asked a ton of people everyone what they're using for standing desk legs and it turns out the Jarvis is pretty much the the winner of the between them the uplift but the even at high high heights it's like very very stable. I was joking that I have wasn't joking because this is serious. But I have three presets and one for sitting one for standing and then one for standing in the splits where I saw that third preset it's like Dennis from always sunny always wearing the shorts. Like I work like that and absurd amount of time. I just actually while we were recording this podcast, I had to lower my desk a little bit because I'm starting to slide into this the split stance a little bit. Keep it keep it the right height but now that that's that's my desk. I'm absolutely loving it. It's been here about a couple weeks now and it is just totally it's one of the things that I can say is like great improved my sort of like workflow and setup just how everything is configured here. - -93 -00:35:04,670 --> 00:35:22,880 -Wes Bos: That's wicked I I have a key a countertop as well I've had it probably for seven years now it's an eight foot countertop. I took the IKEA Alex set of drawers to put in the middle and then I've got legs on all four corners and it's solid as hell. That's my big thing about desks. I hate when the desk is wobbly. Yeah, - -94 -00:35:22,940 --> 00:35:24,840 -Unknown: which many of you actually go ugly? - -95 -00:35:24,990 --> 00:36:18,110 -Wes Bos: Yeah, if you go by a desk I hear there's really thin and light and it will it'll wobble a lot. This is nice and sturdy. Actually, my wife and I both worked on on it when before we moved to our current house we both like kind of like had to, it's big enough that you can put two different things on it and now I'm just all spread out on it. I've got lots of workspace to to work on whatever it is that I'm working on. So big fan of the kid desk it doesn't need to be refinished because I I sealed it when I first bought it but all my Lacroix's over the years have definitely left some water stains on it i think that that's my desk big fan of how that works. I cut the back out of the IKEA Alex and I stuffed all of the cables in there. I'm not like you know sometimes you see these like Instagram photos where people don't have a single cable. Um, like I always see that like yeah, right like you probably just cut all the cables off and you're, - -96 -00:36:18,419 --> 00:37:15,380 -Scott Tolinski: you're talking about that because I have I have spent the past couple of weeks painstakingly hiding all my cables. Because I have I have monitors I have the I have a whole lot of stuff on this desk and even though the standing desk I have two wires coming out of the side of it attached down to the leg attached around the leg and then I have that going directly into a outlet well the actually the the surge protectors underneath the chair so that are underneath the table, double sided taped underneath the table so nothing actually comes down from the table. It all plugs into the surge protector underneath the table and then it has the two cords it's just one one power cord and one audio cord. They come down to the leg and they immediately go into an extension cord that is gaffer taped to the wall and then gaffer tape along the molding and it is exquisite the cables on the ones that are on plumb to the thing they're all taped up underneath and double sided is awesome. - -97 -00:37:15,479 --> 00:37:36,000 -Wes Bos: Wow, that's Yeah, cuz I've got if I'm just looking at it right now I just counted I got 26 cords whether they're USB, Ethernet, microphone or power, and they all just run in one big ball down to the back of this thing and it looks okay, but I there's no way I could can make it look that good. And well maybe I'll take some tips from you. - -98 -00:37:36,300 --> 00:37:53,820 -Scott Tolinski: Yeah, mine is also and then my desk is currently in the middle of my room for the video shooting. And the last thing I want is for Landon to stumble in here and pull a bunch of cords and have everything come tumbling off. Yeah, it is. It is tight up. Yeah. He loves the standing desk. He pushes the buttons like crazy. What about chairs? What - -99 -00:37:53,820 --> 00:37:55,830 -Wes Bos: are you sitting in? If you're not standing? - -100 -00:37:56,210 --> 00:38:44,130 -Scott Tolinski: Yeah, I got a Herman Miller Aeron chair that I got refurbished off of this site that I wish I remember but it doesn't exist anymore anyways, and it was like refurbished chairs calm or something. I don't remember what it was. But either way I got the this this Herman Miller chair for like maybe 40% of the price and is brand new, there's like a scratch on the underside of it, but it's like these chairs are expensive and when I bought this I've had I've had it for a long time, but when I bought it my salary could not support a fully priced Herman Miller chair, but I needed a better chair. So sitting at some IKEA thing, so yeah, this chair is great. I've had it for a long time. I am looking at like a saddle if you have any nice saddles that you you you're really liking I'm looking for a nice saddle. So if anyone uses a saddle, let me know. I'm gonna check that out. - -101 -00:38:44,310 --> 00:39:24,420 -Wes Bos: Yeah, I went through the whole chair thing maybe three years ago, and I narrowed it down to either the Steelcase leap or the Herman Miller Aeron and I ended up going with Aaron just because it's it's such an amazing chair. You got a really a lot of people sit in them and the cause isn't that comfortable. You really got to like tune it to your body. And there's like 1000 different things and once you have it like no one else is allowed to sit in it because it's, it's perfect to my body all the levers are exactly the same. I've had it for three years I have the polished aluminum one, which I splurged a little and it looks at the feet of it are in Polish aluminum, I love the look of it. I've been super happy with it. Nice. What about headphones? - -102 -00:39:24,570 --> 00:39:41,460 -Scott Tolinski: headphones. Yeah, I use. I got these aka he used to have these ultrasound headphones that were like incredible. And I'm really upset because they were very expensive, like very expensive. And my dog ate them when she was a puppy and it really upset me. - -103 -00:39:41,690 --> 00:39:42,570 -Unknown: Oh, - -104 -00:39:43,020 --> 00:40:24,840 -Scott Tolinski: so now currently I'm using these AKG they are the K 553 Pro. The ear pads are very comfy which is a big thing for me. I really like these comfy ear pads. I also use the use the Beats by Dre bluetooth headphones that I got for free with my computer. That's not something I would buy typically, but they were free with a computer. So as far as bluetooth headphones go, they work nice. The sound quality is terrible, but they work nice. I'm also again, I'm looking for some wireless earbuds but none of the current generation wireless earbuds are really like doing it for me. Like I need something that I can do handstands in and move around, and breakdancing. And the air pods are not going to be able to do that. They're just gonna fall right out. So I need some time to try - -105 -00:40:24,840 --> 00:40:25,380 -Wes Bos: them. - -106 -00:40:25,400 --> 00:41:02,690 -Scott Tolinski: Yeah. And they're there. They're not sporty. I mean, they they sit in there, I want something that like will like, yeah, cuz they're spinning. In my Yeah, you're there's a lot of movement in normal. I have these like Sony ones that were not Sony, I forget who but they wouldn't be handed back your head. But they had these things that went up into your part of your ears and like really locked them in. And that was like, that was the sweet spot for me. So if I could get something like that, that they're not going to move out. And they're actually still good for everything. I'm actually just waiting for the next generation of all of this stuff, essentially, is what it comes down to. I'm sure there are some some good ones out there. I've looked at all of them. But yeah, so eventually, who knows? - -107 -00:41:02,880 --> 00:41:23,010 -Wes Bos: Awesome. I used the Bose QC 35, which is the the Bluetooth, I had a pair of 25. Before that for probably three and a half years. And they were rock solid, the ear cups kind of degraded after all of the years. And I got free ones from Bose, which apparently is uncommon for them to just give you free. - -108 -00:41:23,220 --> 00:41:24,480 -Scott Tolinski: Yeah, I think they're kind of stingy. - -109 -00:41:24,650 --> 00:42:12,570 -Wes Bos: Yeah, I don't know what I did. I just called them up. And the guy was like, Oh, you know what, I'll give you a new one. So I replaced them gave them to my wife. And now I've got the the wire wireless ones. They are amazing. I know that some audio files turn their nose up at Bose stuff, but they're so nice. They're so comfortable, you can kind of move around, I bought like a Bluetooth adapter for airplanes. So I don't even have to bring the cord on the airplane, which is pretty nifty. And I've been a big fan of them. I also have the air pods that I use just for the Bose QC 35 are not good. If you're moving though, if you're walking, the noise cancellation goes, boom, boom, boom. And then like you're you feel like you're in like a drum because then the noise cancellation and the vibration of walking is terrible. So like you can't wear them anymore. But the good like desk, headphones or on a plain headphone. - -110 -00:42:12,840 --> 00:42:41,900 -Scott Tolinski: Nice. super nice. Cool. Well, let's get into a little sponsor break here. This episode is also sponsored by one of our longtime sponsors, Freshbooks. And Freshbooks makes cloud accounting or you just encounter accounting in general, just super easy and nice. And it's it's one of those things that if you've ever used any sort of accounting software, you know how you could fire up QuickBooks or whatever, and you fired up and it's just like, Oh, I don't know. But Freshbooks doesn't give you that experience. They really just make the whole process really painless. - -111 -00:42:42,090 --> 00:43:48,000 -Wes Bos: Yeah, Freshbooks is, as you know, by now my favorite way to run my business I've been using them for I think about 10 years now they're they were a local company. I've been using them since they got so huge that they are now they do all kinds of they do the invoicing, expenses, time tracking, which is really helpful. If you're doing any sort of freelancing or software, it's based on the hours, we've got some other. If you're interested in learning more about that like freelancing, hourly based billing versus fixed based billing, we've got some opinions on that I've done both and freshbooks worked out really well for it, you can have specific projects that you can attach things to if you have invoices, sometimes I would have to take flights for some of my clients. And then I could just put that expense into my Freshbooks and then turn it immediately into an invoice for the client so they could pay me back for that it does multiple currencies. I think this year alone, I have three or four different currencies in my own. So if you are looking at running any sort of Route, if you're sending any sort of invoice or tracking your time, check out fresh books@freshbooks.com for slash syntax and enter in syntax into the How did you hear about us section? Thanks so much to Freshbooks for sponsoring. - -112 -00:43:48,360 --> 00:43:48,930 -Scott Tolinski: Thank you. - -113 -00:43:49,140 --> 00:43:49,740 -Unknown: Yeah, okay, - -114 -00:43:49,740 --> 00:45:06,960 -Scott Tolinski: so let's get into it. Let's talk about backup systems because I know you have a backup system and maybe a double redundant one. backup systems are important. They've always kind of been important. Anyone who's ever lost a hard drive in the errors of losing a hard drive knows just how much actually like double backups are important. I run a NAS drive, which is the WD my cloud e x 4100 It's a NASS drive. It's pretty cool. It has it's not like the crappy you know, like little ones. It's a full on like business NASS solution. It powers like my media server for Plex and stuff like that. So it's not it's not like a slouch. I have 16 terabytes of space in that thing. It has like dual redundancy backups, and that's pretty much why I have so much space in it is because it does double backups and stuff like that. So I keep an archive of all of my videos and editing and stuff like that. So video files for a couple thousand video tutorials over the years definitely stacks up so I have a lot of data needs. And I like to keep all that stuff just in case you know, so yes, that's what I use. I like it. It's okay I wish I would have is definitely the cheaper option of that. That class of As drives and I kind of wish I would have gone gone a little bit bigger on it in terms of my space, but you know, brand, my sister's - -115 -00:45:06,960 --> 00:45:14,400 -Wes Bos: a photographer and she asked me to do some research into it. And I asked on Twitter and everyone said the Sisson Sinhala Synology. - -116 -00:45:14,460 --> 00:45:16,560 -Scott Tolinski: Yeah, that's the one I wish I would have gotten it. There's - -117 -00:45:17,220 --> 00:47:25,710 -Wes Bos: a lot of people use Yeah, it's not like I, we're kind of in this weird spot where like, you're not a photographer, you don't need terabytes and terabytes. Well, you need a couple terabytes, but you don't need like, I think my sister does like, like 800 900 gigs per wedding or something like that. It's insane how much space you need. Whereas for me, what I do is that I run, first of all, I make sure that my laptop has a one terabyte in it, because I hate having to like, Oh, where's that file? Oh, it's on another hard drive. Like, it's not worth it to me. So I always pay the extra money just to have the one terabyte the new MacBooks have four terabytes in them, which is an unreal, I just want to have almost every single file that I own on my computer. And then I have a Western Digital my passport just running as a time machine that's just constantly going and constantly backing that up that saved my butt so many times, then I also run backblaze on my computer, which is kind of like Dropbox, but for your entire computer. So the initial upload took like a couple of weeks, but then every day, it diffs your files and uploads a gig or two of what has changed. So big fan of that, that's also saved my butt a few times. So I've got kind of got like double backup. And then I also we've talked about this in the in the past. So go back and listen to the episode on Dropbox. I also dev out of Dropbox, I realized that's not a good thing. For a lot of people, it works great for me, you can listen to the episode as to why I do that. So I've tripled backup. And I also don't have any empathy for when people lose files anymore. Because you should have absolutely something in place. And I'm a big fan of what's called passive backup where like, you shouldn't have to think oh, I should back up, I haven't done it in a while because that's when you're gonna get bit. And then I also just have a couple what are called cold storage. So when something like like my Flexbox course, I've that done two years ago. So I put that in cold storage, I put it on an external hard drive. And then I also put it on backblaze v2, which is like just you just could just throw files there. That's kind of like Amazon hosting for you. And so then I have if I ever need to recover it, I've got it in two spaces one local, which I'll go to first that ever burns down or gets stolen. I can go to backblaze b two and and pull the files off of there. - -118 -00:47:25,920 --> 00:47:31,980 -Scott Tolinski: Nice. Cool. Yeah, yeah, so what what kind of charging and charging it what are your charging requirements here, - -119 -00:47:32,130 --> 00:48:46,410 -Wes Bos: uh, well, I've got like a phone and he got your headphones and then I've got a couple external batteries and just stuff that needs to I pad maybe a couple Android devices that I'm testing on all of these things they do plugged in so I've sick pick this in the past it's an anchor, I don't know what it is I'll link it up in the show notes but basically it plugs into the wall and then there are I think like seven ports on it two of them do fast charge and then the other just just regular ones it's kind of like having like 14 of those little apple nubs that you plug USB into. And it's just I just have tons of micro USB and lightning cables coming out of that and I can plug all my gear in and it charges fast. I really like that because it doesn't plug into my computer because I hate the game here phones into my computer and then iTunes pops up and starts asking you questions. So it's like having like to use me please, please yeah, no, never No. So I like having just lots of spaces I also have another one in our living room because like if you're sitting on the couch watching TV there's a possibility that like three or four people want to charge their phone while they're while you're watching TV so we've got like a little octopus of of cables coming out from under our couch you can everyone can plug in and charge - -120 -00:48:46,530 --> 00:48:47,760 -Scott Tolinski: sick sick. - -121 -00:48:48,420 --> 00:49:38,820 -Wes Bos: Yeah, what about a USB so we've both sick pick this in the past we both use the Cal digit t three plus which is the beauty of USB three. USB three is such a mess but USB three and a but it's also Thunderbolt three I think where I don't understand I all I know is that I have an $80 cable that plugs into this $300 splitter and you can plug everything into that so it charges your computer and runs all of your USB stuff. I also have a USB hub coming out of x i still need more spots and that you plug Ethernet into that. I plug my display port for one of my monitors and then USB C for my 4k display. And then it just just runs everything it's it's my dream for the longest time was to have one single plugin and it does that So yeah, I know it's pretty expensive but well worth it. - -122 -00:49:39,180 --> 00:49:57,450 -Scott Tolinski: I know I'm I'm really happy. I bet the bullet on this because I've been loving Michaele digit. The only thing I'm not happy about it as I bought this small cable and it's like just perfectly it's like if it was any shorter. It would be a huge problem and I'd have to get the longer one but it's like it's like stretching it right right now at that full stretch. So I'm like, - -123 -00:49:57,780 --> 00:50:33,660 -Wes Bos: that's that's what happened to me. It comes with that. Like, what three inch cable to plug it in, and I needed it longer. And it's a special kind of cable that can handle both the 80 watts of charging. So like people are like, Oh, just go buy a 399, Amazon basic USBC cable. And there's I went down this rabbit hole of different types of cables, because it needs to do charging a to do data, it needs to do Thunderbolt three over USBC. And it turns out that like, there's like two people that make these cables. And I think it was like 80 bucks, shipped to Canada, which is brutal. It's brutal. - -124 -00:50:33,930 --> 00:50:37,260 -Scott Tolinski: Yeah, until I went out for Wi Fi. What do you use? Why? - -125 -00:50:37,260 --> 00:52:06,030 -Wes Bos: Yeah, so I have a amplifi HD. So there's this, let me pull up the thing. This company I asked on Twitter A long time ago, about like different things. And everyone was recommending either the amplifi HD or the Google Home, what is it the Google mesh network, or the what is the trend net, I think, makes a really nice one as well. And amplify actually sent me this full disclosure, and it was a pain in the ass to set up, I almost shipped it back to them. But once I got it set up, I think that they they push some updates to it. It's amazing. So it's just like, one kind of main thing. And then they gave me three access points. And you can put them all over your house and it jumps to it. I'm still not happy with it. Because like, if I go downstairs, I don't have a big house. Oh man of meager means but if I go from my like three floors down and try to run a speed test, I lose like, like 60% of the actual speed which frustrates me. So well, I don't know if if anyone can and I looked up a whole bunch of them. And people have this seem to have this problem because it has to jump from node to node to node. And I had to play with like where you put them in the house. Because if I put two of them too closely together, it started to like connect to the wrong one. And I think this is a bit of a problem with like mesh networking is that it's it doesn't know which one to necessarily connect to because the signal might be stronger but the other one might be closer to God - -126 -00:52:06,030 --> 00:52:30,390 -Scott Tolinski: Wi Fi does a really good job of that does it? I've never had any issues with that. And so I use the Google Wi Fi and I have a fiber fiber connection. So my desktop is all wired up for Ethernet so I can get a gigabit and stuff. Yeah, but in in the mesh network if I'm in the basement or somewhere away from the main router I still get like, like 300 Meg's down, - -127 -00:52:30,780 --> 00:52:35,580 -Wes Bos: but that's that's the that's exactly my problem. A gigabit is 1000 Yeah, the only - -128 -00:52:35,790 --> 00:52:48,870 -Scott Tolinski: 300 you're losing wireless routers have a what's it called the the the spec for the wireless router only goes up to about that much oh really missing out? Yeah, - -129 -00:52:48,870 --> 00:52:59,910 -Wes Bos: well I get about 100 down wired and I probably get like between 25 and 50 throughout my house on the on the main floor. - -130 -00:53:00,000 --> 00:53:09,930 -Scott Tolinski: Yeah, see if I had if I had 100 wired I would still get 100 Wi Fi it's the it's reached the the ceiling for what the handle or Wi Fi handle? - -131 -00:53:09,960 --> 00:53:27,780 -Wes Bos: Well I can't wait to the solution to this for me it's just get faster internet just unfortunately we don't have every time I see a truck in our area I asked them if they're installing fiber cuz like wanna know like, what are you doing with these wires in the on the telephone poles? Can you please install fiber in my neighborhood now - -132 -00:53:27,810 --> 00:53:45,480 -Scott Tolinski: when we got it I instantly cancelled Comcast. It was like the moment fiber was here. I was like, all right. CenturyLink and it's been good. I have people talk about CenturyLink not being good or whatever. But I've had compared to Comcast, oh my God, I've had nothing but great experiences with them. So I'm loving it loving the fiber - -133 -00:53:45,840 --> 00:54:22,530 -Wes Bos: is everything I will say with this mesh network is that I did get coverage and over my entire house like low speeds are fine. Like I really don't need that much like my Netflix streams 4k no problem, and everything like that. And it will the one thing it did do is that I now can get Wi Fi in my garage which is detached on the very back of our property and I can get I can get Wi Fi everywhere all of our doorbells that need like this is a big thing as soon as you start moving to the Internet of Things. If your doorbells that which are outside your house need good Wi Fi to connect, then you need one of these mesh networks that will will get Wi Fi in every nook and cranny. Yeah, - -134 -00:54:22,710 --> 00:54:56,760 -Scott Tolinski: I like the mesh. I'm all about the mesh of cool recording gear we touched on if you want to learn a lot about our recording gear, I'm gonna breeze through the mind. We had a whole episode on the stuff we used to record, but I use the microphone I use as the electro voice r e 20. I love this microphone. My wife hates it, because well she doesn't hit the microphone. But so we'll be watching TV and I'll be like Courtney, that's my mic on TV. And she'll be like, okay, like, I don't care about your mic, like because it's a famous radio mic so you see it all over the place. So whenever I see my mic, I'm always like, Oh, that's my mic. - -135 -00:54:56,760 --> 00:54:57,390 -Wes Bos: I love it. - -136 -00:54:57,390 --> 00:55:39,510 -Scott Tolinski: So I'm a huge fan of this microphone. I recently Just got a new camera which I sick pic which is the Sony A seven. It's the a seven I got three eyes so I don't even know what to refer to it as. But um it's full frame mirrorless does 4k and it is very okay with that 4k. It is awesome. I'm a big fan it is a the thing looks great. It takes any sort of footage or camera we just went to to Aspen and all the photos looked incredible on it. So video photos, all everything. This camera is unbelievable. And my audio interface is the Scarlet to itu. Again, I'm gonna have all those stuff on my kit page that I'll have linked. And you can go check out that for 100% what I'm using - -137 -00:55:39,840 --> 00:56:03,240 -Wes Bos: awesome. So that's Episode 37 if you really want to dig into hardware and software for recording screencasts we get a lot of a lot of questions about that it's usually starts with love the podcast, what do you use to record and I'm like, Well, you didn't listen on podcast them buddy boy. Hey, well, I don't expect anyone to listen to it because of what we have like probably over 70 hours of podcasts now or something like that. So - -138 -00:56:03,240 --> 00:56:07,290 -Scott Tolinski: if you haven't listened to all 70 hours I don't even know you know you never listen to one as far as I'm - -139 -00:56:07,320 --> 00:56:16,020 -Wes Bos: well. There's there's some people that listen to one every day and then they give her for like a month on the end or two months and then there goes through withdraw, because there's no more. - -140 -00:56:16,170 --> 00:56:22,620 -Scott Tolinski: Dude, I do that though with every podcast I listened to. And I when I discovered I'm like, Oh yeah, there's 200 back episodes. Yeah, I - -141 -00:56:22,620 --> 00:57:59,970 -Wes Bos: get 200 the best. So I use a Heil pr 40, which is a little Leo Laporte. I'm a big fan of everything that Leo Laporte does. So I went and got his sits on a Heil monitor arm that plugs into a scarlet two, I two, which somebody asked me, Why do you need the two itu and not just the Scarlet one input? And the answer to that is, I don't know. I don't think I need both inputs, because I don't have two microphones. And then that comes out of that. And I put it into the DB x 286 s, which is a preamp. That's what makes me sound like I'll Bumi and radio and takes all my SS out and takes all that like, like I've got a fan on right now. And you probably won't be able to hear the fan right now cuz and if a truck drives by things like that little outside annoyances that takes all of that away. So very happy with that, that all goes right into my USB splitter, the caldigit thing and then I can have all the interfaces. The one thing that these Scarlet two I twos do do is that they give you a left and right channel. But if you have a single microphone, it always goes to the left. So I use a program called loopback, which creates virtual audio interfaces. So you can pipe in different channels. You can also pipe in Spotify and Google Chrome. That's when we did the soundboard for this podcast. I was typing in my Google Chrome into my interface. And that allows Scott to hear what I'm playing on Google Chrome, you can kind of like make your own virtual interfaces, so big fan of that. And the only reason I you that use that is because I use ScreenFlow to record and ScreenFlow doesn't have the ability to input the microphone as mono a lot of which - -142 -00:57:59,970 --> 00:58:00,870 -Unknown: is messed up. - -143 -00:58:00,870 --> 00:58:02,160 -Wes Bos: I don't know why so so so - -144 -00:58:02,160 --> 00:58:06,480 -Scott Tolinski: I use I show you and that that just is like oh recorded mono. Here's the end. Yeah, - -145 -00:58:06,480 --> 00:58:33,030 -Wes Bos: that's it. Why wouldn't you do that day? Yeah, every other application I've ever seen does it and ScreenFlow has this like mixed Amano interface, but you have to remember to do it. And I inevitably publish a YouTube video. And people are do this the snarky sounds great in my left ear. And yeah, the thing with YouTube is you can't switch it right, you have to delete it and re upload. So I've switched to just this virtual interface and it's been working fantastic for me, rad. Okay, anything else fancy - -146 -00:58:33,030 --> 00:59:23,670 -Scott Tolinski: i the only thing fancy I have else in my office is I have a Google Home, which I use all the time. Even though I have the speakers and all this setup. I like Chromecast up a podcast or something like that on my google home. I hope it doesn't hear me talking right now. So it doesn't turn on. But I really like it. I'm a big fan of it. I have one in my gym, I have one in my kitchen, I have one in my office. And we use them all the time. I also have a smart outlet, which is connected to my whole rig so that all of my speakers, the table everything. And that's on the schedule. So it shuts off at like 10 o'clock at night and turns on at seven o'clock in the morning. So it's always on but it's not on powering, like I don't have to turn on and off my setup. I just have to come in here and plug my computer and everything's turned on already. And then I'm just you know, I don't have to leave it on or worry about power consumption or stuff like that. So I'm a big fan. That's that's pretty much it for other fancy stuff. - -147 -00:59:23,790 --> 01:01:34,500 -Wes Bos: We have where a Google Home family too. We we got the Eco B thermostat, which is awesome. And it comes with Alexa in it and I was really excited because you can you can tell it to do Alexa stuff, but my daughter's name is Lux. And if we say a Lux, can you come here? It's like, I'm sorry. I don't know what that means. And it just trips it every time we yell at our children. So we are a Google Home family now. That's hilarious. But other than that, I'm I've sic picked this in the past I use a hotspot a skyroam Solis hotspots like a little orange hockey puck, that will give you a Wi Fi hotspot anywhere in the world. And I just went on my third trip with it. And it's they just rolled out the ability to just do by raw gigs, which I like. Because before it used to be, you pay for the day and you get 500 Meg's and then after that it like puts you on edge, which sucks because you can blow through 500. Meg's really quickly, or you might need you might only need like a little sip of data. And then you have to pay the eight gigs, eight bucks for the whole day. So they switched to this thing where you can just buy like I bought 10 gigs for like 100 bucks or something like that. It's pretty expensive. But it was awesome because we just put it plugged it into the car. And then me and my wife had full data all throughout the states, the kids iPad, had data if we wanted to download a new game during the car ride, things like that I was such a big fan of it. It's it's been great I used in the past, I used the no roaming, which is the thing that you put on your SIM cards like a sticker. And that was never worked properly for me. So I've been a big fan of that hotspot, and then a backpack. I've talked about this many times over if people always send me emails about it, I use the peak design backpack, which is a one of the best backpacks ever seen. I went on a long search for the best backpack ever. And you just just go on YouTube and search for peak design everyday. And you can see it and what happened when we were on vacation is that I left the backpack underneath a window and we had a no longer storm. And the backpack got soaked and my laptop was in there. And I like unzipped it and the laptop was bone dry and I was so happy that nice waterproof backpack or well I don't know if it's waterproof or water resistant, but I do know that my $5,000 computer was bone dry. - -148 -01:01:34,500 --> 01:01:36,870 -Scott Tolinski: God that is awesome. - -149 -01:01:37,200 --> 01:01:47,610 -Wes Bos: Yeah. So big fan of that. And I met a bunch of people at layer con that had the backpack and a couple of people said they bought it after after listening to this podcast and they've been super happy with that as well. Yeah, - -150 -01:01:47,760 --> 01:02:12,540 -Scott Tolinski: I'm looking at this topo designs. They're they're a company that's based out of Denver. I think they're I think they're based out of Denver. They're based out of Colorado, but I'm pretty sure they're based out of Denver, and they make this like briefcase bag. That is like a really nice looking briefcase bag, but then it also has like backpack straps for when you want to wear it as a backpack. It's really interesting. I've been I've been thinking about it - -151 -01:02:12,600 --> 01:02:17,070 -Wes Bos: looks it kind of looks like the it's got that Herschel look to it with the square. - -152 -01:02:17,340 --> 01:02:18,000 -Scott Tolinski: Oh, yeah. Yeah, they - -153 -01:02:18,000 --> 01:02:25,110 -Wes Bos: were pieces of leather on it. Yeah, definitely looks like a style. That looks pretty cool. That's it. Yeah. Oh, designs calm. - -154 -01:02:25,380 --> 01:02:30,480 -Scott Tolinski: Yeah, they're their stuffs really cool. I like a lot of their stuff. clothes and bags included. - -155 -01:02:30,570 --> 01:02:45,570 -Wes Bos: That's pretty cool. Oh, the peak design just came out with a bunch of like larger travel stuff as well. Which I know a lot of people have kind of been waiting for for travel gear. I don't need more. I got the 30 liter one, which is big enough for me. But if you need anything bigger, they got it. - -156 -01:02:45,960 --> 01:02:51,630 -Scott Tolinski: Nice. Cool. I think that's pretty much it for all of our stuff. That's our stuff. Gotta get that gear. - -157 -01:02:51,960 --> 01:02:56,610 -Wes Bos: Gotta get the gear. Oh, they Taupo design has a fishing rod holder. Oh yeah, it's - -158 -01:02:56,610 --> 01:02:57,720 -Scott Tolinski: very outdoorsy. - -159 -01:02:57,720 --> 01:03:13,680 -Wes Bos: A lot of high cut a whole bunch of bass. Oh, it's like fly fishing. It's just for little rods. Very cool. I have to check this out. Yeah. Awesome. So I think that's it for today. What about any? This whole episode was kind of sick pics. I don't know if you have anything else. You - -160 -01:03:13,680 --> 01:03:21,330 -Scott Tolinski: don't have anything additional sick pick. No, I mean, I probably do. But I think we've had enough stuff in this episode that you could call it all sick pics. - -161 -01:03:22,740 --> 01:03:37,800 -Wes Bos: Awesome. For shameless plugs. Today, I'm just gonna, I'm going to give an update on my course I'm back from vacation and all my traveling I'm keeping recording, probably got a couple more weeks of working on and recording the course. But my advanced react course will be out fairly soon. So get ready for that. - -162 -01:03:37,950 --> 01:04:40,380 -Scott Tolinski: Nice cool. I released a new course on Apollo client with graph QL. So if you're interested in learning how Apollo client and graph qL work with react, check out this course it's level one Apollo with react. It teaches you all the ins and outs of doing some of the cooler, cooler stuff with Apollo the basic stuff too. But we do like optimistic UI mutations, we get into all of the new render prop components, we talk about things like loading more for like if you want to do load, more pagination, that kind of thing. It's pretty slick. And I'm a huge fan. Or if you want to get access to that along with all of the other premium courses, I believe there's like 17 or 16 Premium courses up on level up tutorials right now with a new one coming every single month subscribe become a levelup Pro. If you sign up for the year, you get 25 poor percent, not percent percent off. So yeah, sign up for a year and check it out. There's gonna be 12 new courses over the course of the next year and again, new course every single month along with a bunch of new free stuff as well. So yeah, level up pro level up tutorials.com forward slash Pro. - -163 -01:04:40,410 --> 01:04:43,290 -Wes Bos: I think that's it for today. Please - -164 -01:04:45,030 --> 01:04:54,810 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax65.srt b/transcripts/Syntax65.srt deleted file mode 100644 index b94f6d17a..000000000 --- a/transcripts/Syntax65.srt +++ /dev/null @@ -1,220 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi ski. - -2 -00:00:26,010 --> 00:00:38,880 -Scott Tolinski: Oh, welcome to syntax. This is the podcast with the tastiest web development treats around. And I am Scott winsky. And with me as always, is West boss say with a - -3 -00:00:39,150 --> 00:00:40,500 -Wes Bos: Hello about em. - -4 -00:00:40,530 --> 00:01:08,700 -Scott Tolinski: Hello. This is a Monday edition of syntax also known as a hasty treat. So let's get ready for this hasty treat in which we're going to be talking about course curriculums, a lot of people ask us how we develop our courses, which they can range from short courses, to long courses, to monthly reoccurring courses to all sorts of stuff. So we're going to talk all about how we make our courses and some of the insights and how we develop our content. - -5 -00:01:08,730 --> 00:04:30,630 -Wes Bos: So this episode is sponsored by century, which does error tracking for pretty much any language, I'm gonna specifically use it myself for JavaScript react applications on the front end, I also run it on my node server. And what happens is that anytime there's an error in your users browser or on your, your server side, what it does is it collects all of those errors, and provides it to you in a really smart back end, that will allow you to peer into a why those errors happen. What happened to the errors? When are they happening on what kinds of browsers and where in the world? Are they happening, you can, you can attach specific data to a user. So you could say like, Oh, this specific user is only having the error, let me reach out to them and say, Hey, I noticed you you stumble upon this exception, sorry about that, we've already fixed it. So being able to like know when errors are happening on your clients computer is really, really important. And they're not always going to email you telling you exactly what has happened. So if you want to know what's going on with your errors, you check out century some points that they try to hammer home is that you can cut your time of resolution on errors from five hours to five minutes. Because if you have all of this amazing look into the actual error that's happening, you can know right away, and they also support source maps, which is really cool. So if the error is happening in minified, it will show you where the error is actually happening in your maxify and your authored JavaScript. So if you're if you authored it in TypeScript, and that got compiled to JavaScript, it'll, it'll show you everything over there. They have noise free notifications tied to the commit. So if there's only an error that specifically happens to one person only that they are alerted, says I know, sometimes you can get just hammered with alerts, and then all sudden, it just becomes noise. And, and it doesn't seem as important for you. They have SDKs for every platform, we talked about that. So if you have like a PHP back end and an Angular front end, no problem. They've got you covered. They've tight integration with code repository, GitHub, Bitbucket, get lab, all of the different ones tight integration with Slack, JIRA pager duty. So if something automatically is happening, maybe 10,000 errors that start coming in, over and over and over you better, you better bet that that thing is going to be pushed to whoever's on pager duty at that time. And probably the most important thing that I want to stress here is that it's 100% open source, which is my favorite kind of service where you pay him to use it. But if you really want it to go and host your own, and run it yourself, it's 100% open source. So it's kind of a neat way to run your business where if they go away, for whatever reason, you know that the source code is out there, you can run it yourself. So check it out@sentry.io and got a special credit for syntax users, which is two months for free. Usually, you can sign up for the free one, and you get you got a handful of error reporting, but you can quickly burn through that if you have a lot of errors like in my case or a large application. So what's cool about that is you can get two months worth of credit, which apparently is good for even if you already have a century if you're already a customer, you can just apply this code which is tasty treat one word and you're gonna get those two months for free. So they are one of the two companies I've ever allowed to sponsor one of my free courses them in Firefox, so big fan of them. I think they're really cool company. I use them myself. So check it out@sentry.io use tasty treat. And thanks so much to Sentry for sponsoring. - -6 -00:04:30,810 --> 00:04:38,880 -Scott Tolinski: Yeah, so let's talk all about our courses. I know you've produced I don't know how many courses you've done, like, what is it? Like? - -7 -00:04:39,000 --> 00:04:46,350 -Wes Bos: I think maybe seven or nine were on there. Yeah, eight, something like that. Yeah. And then lots of little YouTube videos as well. - -8 -00:04:46,380 --> 00:05:07,740 -Scott Tolinski: Yeah. And I've done a lot of courses on YouTube in both levelup pro so we have we both have a quite a bit of experience developing courses in in sort of building these educational materials. So I don't So if you want to talk a little bit about your process first, and then I can talk about mine, and then we can maybe discuss some similarities or differences or stuff like that. But yeah, - -9 -00:05:07,740 --> 00:06:10,920 -Wes Bos: let's Yeah, let's get totally Let's all jump into mine. Feel free to chime in whenever you have anything to say about as well. So it's a question we get a lot is like, how do you build curriculum? What's your process for tackling something? If you want to teach a topic? Like what does that look like when you're sort of brewing it up? So first thing is like, how do you choose what to make a course on? Usually, I like to think of that as marketing, because a big part of marketing is actually just listening to your users listening to the pain points, listening to the things that they're not specifically asking questions for. They're not specifically asking for x, y, and z. So if I talk about my JavaScript thirty.com course nobody asked for, I would really love 30 days of building things with vanilla JavaScript, but what I heard from people over and over was there, I do feel like I just need practice, where do I get the word out? do more stuff. I don't feel like I have a total good grasp on it. And you have to sort of work out what would be the solution to that problem. Rather than then what are they directly asking for? That's like kind of Apple always says, like nobody asked for if people knew. What's the question - -10 -00:06:11,580 --> 00:06:13,620 -Scott Tolinski: about Henry Ford quote, if people not - -11 -00:06:13,620 --> 00:06:15,960 -Wes Bos: apple? Yeah, but Apple uses a horse. - -12 -00:06:16,020 --> 00:06:20,730 -Scott Tolinski: Yeah, the faster horse thing. But I think Apple, Apple references that Apple, yeah. - -13 -00:06:20,760 --> 00:09:10,980 -Wes Bos: Because like, nobody asked for the iPad, right. And everyone laughed when it came out. And now it's a it's a huge part of their market. So it's pretty interesting. So that's really what I do first is I listen to what my users want. And then also, I sort of overlap that with what I'm interested in as well. Because if I'm not interested, if I'm not excited about it, it's not going to be something that I'm going to spend any time on. Because otherwise I'd have like a Java eight tutorial and some sort of like Angular tutorial, which is like, there's huge markets for that stuff. And I could for sure, sell the hell out of a course like that. But it's not something that I really have an interest in. And I don't think that I want to create it cuz they only have limited time, and I want to enjoy what I'm doing, right. But then what I do once I decide like, okay, like, first, I'll give him my advanced react course, because that's one that I'm totally, I'm totally in right now. And I'm working on it. So once I decide I want to make an advanced react course, what I do is I'll keep always keep markdown documents open. And for years, I just kind of opened them up for 20 minutes at a time and just type in or if I get like an email from somebody, and they specifically say something like I asked on Twitter a couple months ago, what what was the hardest part about learning vanilla JavaScript for you. And then I just combed through that for words and phrases that you hear over and over again. And specifically in that one, people kept saying a synchronous over and over again, that they always tripped up on that one. So I made lots of notes on making sure that we spend time on what a synchronous means, how it works, what, what are possible downsides and upsides to it. Then when I have a good idea of what I want to cover for my react one, I wanted to cover some advanced react concepts I wanted us to do Apollo and to do back end, I always get people asking, How do I do credit card transactions. So I wanted to include stripe in there, I wanted to do a node back end. So all of those things I say, Okay, this is what I want to teach people, all of these different topics, what could I possibly build that would would cover all of these topics, right? And what can I possibly build, that would be fun to do. And if we look back at my react for beginners course, I remember thinking like, okay, React is really good at like updating data. So I need something where the data is represented many times throughout the application in different ways. And that was the price of the fish, or the price of the fish would change. And it would just ripple through the application. And I just kind of like riff on a few different ideas of things that I can build. And then I'll sort of settle on something in the case of my advanced react course, we're building a store where you can sell your stuff, you can upload photos, that's that's one aspect using external cloudinary. To upload the photos, I want to be able to touch on all these different advanced react concepts, we're going to be able to buy stuff, we're going to charge stripe credit cards, we're going to be a sending email. So this is a front end and back end aspects to it. And I was pretty happy with the application. Then I go, I set off and I build the thing that we're going to build - -14 -00:09:11,010 --> 00:09:52,230 -Scott Tolinski: actually hold on before you build it before you build your thing. I'm gonna I'm just yeah, jump in here. Do Yeah, how many failed ideas for projects do you go through because I personally, I know that I run into a situation where like, I'm gonna build X, Y, and Z in this course. And then when I start to get into it, and I start to like, really develop that idea. I'm like, Oh, wait, that's actually going to involve some some additional things that are maybe out of the scope of what I'm interested in teaching. And I don't necessarily want to just provide it like, oh, here's this huge chunk of the application that you're not going to be coding. I want to give people everything so do you ever have like totally crash and burn ideas? - -15 -00:09:52,280 --> 00:11:10,170 -Wes Bos: Yeah, sometimes it's it's just way too involved. You don't think it's gonna be a big deal and then before you know it, it starts to unravel a specific In my, my last one I wanted to do sending emails because you need to send emails to reset the password and you need to send emails when somebody buys something, right. So I was like, oh man, like, do I have to Should I just provide it I don't like doing that. Because then people are like, Oh, I don't like when you give us code, right? Like too much boilerplate is something that people always resist. So I don't want to do that like is that in the On the flip side, sometimes it's just way too simple, right? Like, then people are like, this is not real world enough. So I always try to try to go down the middle, it's not going to be a full production ready application, but it'll give you the ideas of how it works. And in my rack course, I ended up or we write all the email stuff ourselves, it's, we don't go into templating, and all that stuff. But it's really not that much extra work just to send some simple text based emails with with links in it. So I would say I usually come up with like three or four ideas and kind of riff through them, build them myself, because part of building a course is also making sure that you understand the topic like rock solid. So I'll usually build a couple things myself before I before I settle on the one that's in that sweet spot of involved enough, but still not like too much where people are going to drop off because it gets too complicated. And there's too many moving parts that the thing will be out of date in six weeks. - -16 -00:11:10,170 --> 00:11:35,790 -Scott Tolinski: Yeah, definitely. I do one time I did a large course on React Native. And that was like the problem. There was so much stuff. And there were so much like this was earlier. And it did it like one little tiny thing in the middle of it got outdated, like the way that one navigation library work. And that like totally invalidated like a gigantic tutorial. Because all the sudden, there was this huge thing. And it was it was a big, big problem. - -17 -00:11:35,880 --> 00:16:25,890 -Wes Bos: It's a frustrating, it's a frustrating thing, which first makes it good for us that we if we keep it up to date, then you're you are at the top of the industry, because it's very hard to keep it up to date. But when it is out of date, it's really annoying because like my react for beginners course is three years old, three and a half years old, and every recorded it three times now. And it takes a couple weeks, probably three weeks every time I want to re record the entire thing. So we've talked about this in the past, it's a it's a hard thing, but it's just part of the industry. It's one of the the pain points that you need to enter and figure out how to solve word. So once I have it built, I have it reviewed by experts. So specifically in the advanced react course, I sent it over to Peggy who works at Apollo, or works on Apollo. And she reviewed all of the sort of the front end code which is which is really, really great. And then sent all the backup backend stuff over to the graph. qL folks, and they reviewed it, make sure that it's up to date. And they love to do that. Well, I'm thankful that they do it. But it's great, because then hopefully it will stop any support on there. And where if I were to teach something funky, and then people like 10,000, people start building applications in a funky way, then that's, that's really gonna put a burden on them. So they absolutely want to have me teaching stuff in the in the way that they would they would recommend it. Then when I have the application, this is probably the trickiest part. And it's because building this application is not a linear thing. You're jumping around, you're going in and out of files, you're refactoring parts, you're you're going back and forth. And then what you have to do is you have to take this application, which has been built as sort of a spiderweb of you jumping around. And you have to make that linear, because software development I wouldn't say is linear and but video is right. So it to figure out like how do you how do you build this thing in 1015 minute videos that are easily digestible, but without being way too confusing, touching 15 different files in a single video. So that's probably the hardest part. And part of actually building the application is being really aggressive with simplifying the codebase. Because the more files that you have, the more abstractions that you have, the easier that it is that someone gets lost or forgets like sneezes during part of the video course. And then they get frustrated. And that's something I hate when people get frustrated with with a course when they miss a part or they're confused about apart. And it's never fun, because you've paid money, you've invested maybe six hours of your time so far. And then you're at this crossroads and need to jump into the Slack channel and get a little bit of help. So what I do is I create a markdown document and I kind of put every video out so I say video one, we cover this, we build this video to cover this topic. And then under every single video I have what we're going to build in that specific video different things that we need to cover. Sometimes when it's a fairly technical explanation, like for example, like what is graph qL? Or what isn't enough things like that? Well, I'll I'll write out a little explanation because I'll think it over six or seven times in my head, how can I best like what stupid explanation Can I come up with in my head that I can make this easier to someone so I'll write that down any gotchas that I had when building it because like, it's easy for me just to say just type this and it works perfectly, but there may have been six or seven tripping points up until I figured that out myself when I was building it. So I'll make sure to note those gotchas and explain them in the video because that's that's helpful for people. Who at some point might might stumble upon it themselves. So usually for a 1020 minute video, I'll have like five or six different or five to 10 bullet points of things that we need to touch on in that specific video, I'll often put the code that we're going to write in the markdown document so that because because it builds on each other, like, if we're building a function that builds an Apollo client, I'm not just going to like start from the top and write the entire file, we're just going to build the very basic of Apollo client, and then we're going to come back when we need to do authentication and modify it. And then we're going to come back when we want to do local storage of data in the Apollo client, right? Like, we're gonna keep coming back to that, that file, and I'll usually put the diffs of the of what we're going to build in the markdown file. So I can just like look at my one monitor to the left of me, and know exactly the pieces that we're building in that video. I think that's it, I don't have scripts, I don't have PowerPoint slides, which those two things are fairly popular in, like the corporate training in Linda, in the lindo world, people will, like sit you in front of a PowerPoint and have bullet points all day long. I'll often make a diagram, if it's a little bit confusing, or I'll just draw something out on Microsoft Paint to, to sort of visualize it to the user. But I don't have any sort of like script or any sort of PowerPoints that I go off of nice. That's it for me. Yeah. I'd love to hear what you have to say for that. And if it's similar or not, yeah, - -18 -00:16:25,920 --> 00:23:16,110 -Scott Tolinski: yeah, I mean, as as you probably know, I record a ton. Like, just yesterday, I recorded six tutorials and the day before I recorded for, and I'm 10 videos deep already into this, this month's pro series, which is on react testing. So if anyone's looking for testing information, keep your eyes open for that one, a little small plug on that it's coming this month here. I'm really excited about this course, though. So this course I'm like, right in the middle of recording this course, I have a pretty good handle on my process so far, like so really, you know, starts with choosing the course. And choosing the course for me is pretty difficult considering I have to choose a new course every single month, I record these things, the month that it's released, I'll spend the first two weeks of the month re planning and recording a tutorial series. And then the next couple of weeks, finalizing and producing, I have my video editor working on it, and then releasing it because I do a course every single month. So it's difficult to come up with these topics. But the idea is is for me personally, I pick a topic based on one what my platform needs, right? So I have a subscription service that has content. And if the subscription service needs a particular tutorial to complete something, right? Well, I have like I want to do react course and I want to do maybe a react and graph qL course and maybe missing in there is some sort of react intermediate course, I'm going to do the intermediate course, right. But there's also the fact that the pro community that people who subscribe and pay to be a subscriber and level up tutorials, they actually get to vote based on topics that I've presented as being possibilities. And then so I definitely I highly take that into account, because it's the visibility of what the people on my platform actually want to see. But it also has to be something that I'm good at, and something that I'm capable of providing quality material on. So I'm not going to give them the option to vote on something again, like a Java whatever tutorial series because again, I'm not the right person for that and, and maybe in the future, I can, you know, hire the right person for that if people are demanding it right. And so that that's pretty much it. I also decided on things like what's hot, right? I had a plan for one of my series one month, and I had already started recording. And then a Gatsby was picking up a lot of steam. And I was like, You know what, I i've been building sites in Gatsby, I really like it. I really enjoy it. You know what I'm going to drop what I'm doing, and do a Gatsby series right now. Because I think the community will enjoy this better than what I'm doing right now. I have a lot of flexibility. I'm the person who gets to choose this stuff. And because I can produce the content fairly quickly. Again, I can I can get that little bit of agility there, right. So one of the first things I do is I make sure I'm always picking a topic that I've spent a lot of time in, that's a big thing for me, because because I'm doing these courses quickly, I don't want to pick a topic that I'm going to have to do endless amounts of research on for instance, I did my level up tutorial site is using Apollo and graph QL. And all this stuff. It's using all the new the new hotness with Apollo client two and Apollo server two and all sorts of cool stuff, right? So I'm gonna, I'm gonna do a tutorial on Apollo client two with react because I have built a substantial amount of code in that and I'm going to be able to talk about it without even reading the docs. I've already spent the time in chat rooms. I've already spent the time in the issues. I've already spent the time in the documentation. And if I need additional little things that I haven't done, I'm going to scan the documentation. And I'm going to do those things in level up tutorials before I ever do them in the series. The next part for me is building the thing and then when you talked about building the thing you talked about how difficult it is maybe to take something That needs to be linear and build out your code. For me, I actually when I write my thing, I almost write my thing as if I'm stepping through each video. Like, I don't build the thing to build the final thing, I build the things step by step as a default. And what that does is it gives me sort of like a dry run through the tutorial series without even talking about it. And it lets me adjust things. And when I do this, it's not planned. It's not like I'm I'm, I don't make an outline or anything like that I'm sort of exploring, like, here's maybe what I'll do for this, oh, this and this, and then this, and then it sort of all falls together, because I can see how long X, Y and Z took me. And I can think about how long x, y and z is going to take to explain. But again, I don't work with any formal hotlines, I'll usually make a to do list Board of like major topics I want to hit, and then just check them off as I go. After the thing is built, I have the final code, and I'll put notes in the final code. But I won't have like each videos, code is just like the final code. So I'll have the final code up on my monitors, as I'm recording at all times. So I can have a viewpoint of what's like a reference point to like what I'm trying to hit at all times. And at that point, I almost, I have like ideas for each individual video. And I maybe have like bullet points for each individual video. But what I don't have is like an outline or a structure for it. So I'll just start recording. And that's again, that's one of the reasons why I can move so quickly is I can record a video. And I can say okay, over the course of the next few videos, I want to get to this point, for instance, yes, you might like react testing, right, I wanted to do a line of just skills before I moved on to react testing library. So I said, these are the skills I guess you need to have. And maybe I'll take a video to talk about writing a basic unit test, the basic integration test, that maybe what like mocking and understand mocking and fake functions, and all that sort of stuff is, and I'll go from there and see how much I can accomplish before. And then by the time I feel like all the knowledge that we've needed to get to at that point is sufficient, then I'll move on. So I'm really building the outline as I go. Because if something's not working out in the middle of the course, or something needs more explanation, I want to be able to feel like I can veer off course a little bit and spend that extra time. And sometimes it's funny because like sometimes you do have these like linear goals, right? I'm building. Let's say I'm building a, like a basic movie site like we did for our react react 16 course, where you're just hitting an API and getting these movies. Well, you could have started with some aspects of that. But you'd be missing some of the topics that I wanted to hit. In a basic react course, I feel like you need to have things like how to build a taco like a basic toggle, just even working with state in that regard. But it doesn't make sense in the context of that application that we're building. So I'll do this little veer off. And it's like unrelated to the final project to show, hey, this is how you do this kind of thing. These are some baseline skills that we need. And even though it's not part of the final project, it's still something that you need to have. And then maybe you can use those skills in your own project of this. And you can extrapolate extrapolate, I guess that might be the right word, extrapolate on your own. Yeah, yeah. So that's sort of where I go there. So basically, - -19 -00:23:16,110 --> 00:23:47,250 -Wes Bos: they often do that as as well with the just if you use a method in react, and I find this a lot when I'm teaching workshops, well, I'll say how do you loop over something in JavaScript, we use map and you kind of get a bit of a puzzled look at from the crowd. And then I'll stop. And we'll do an example outside of the context that we're working with. Because that will help people understand Oh, that's all map does, it takes in something returns a new thing. And then then if you apply that to looping over and returning a component, then then it starts to make a little bit of sense. So I think it's helpful to have those little cutaways as he, as you said, - -20 -00:23:47,280 --> 00:25:00,510 -Scott Tolinski: Yeah, yeah, definitely. And sometimes I don't love to do that. Because again, it's not always like part of the context. But it's definitely, like totally necessary a lot of the times, yeah, so that's pretty much it, I just go through and then I don't again, I since I don't have a strong outline, I don't have that this videos, this series is going to be 20 videos long. But I've done this enough to know how much content I can fit into anywhere between 20 and 30 videos. And that's where I aim, I basically have this, I have a target over on the wall, not a literal target a metaphorical target. And I'm thinking like, yeah, I have to get this series between 20 and 30 videos, because that's my sort of sweet spot for what I like to do with these. And I think how much can I get done, and I just imagine it and take that shot. And if the series ends up being like 25, you know, 26 videos, then cool if it ends up being 2021 videos cool, as long as the amount of content I want to get is in there. Now obviously if I'm way under or way over, then I messed up in the planning stages. And I haven't that hasn't happened to me yet. So fingers crossed that it doesn't but yeah, that's pretty much it. Yeah, I just record record record record, and I usually record an entire series in about four days, maybe five videos a day five, six videos a day. Yeah, - -21 -00:25:00,630 --> 00:25:23,670 -Wes Bos: you're a machine. It's funny that we're very different in how we approach these because for me, it takes at least six or seven months to build a course from from start to finish. And in the case of my react course, it's my advanced react courses is taking even longer than that. But a lot of that is due to changes in the industry and vacation time and speaking at conferences and stuff like that, and, and you come out with something every single month. - -22 -00:25:24,000 --> 00:25:59,430 -Scott Tolinski: Yeah, it's, it's not easy. But I've had a lot of time, like, you know, since 2012, I've been producing a ton of content, I was doing, what, 300 videos a year on youtube for free. So I have the ability to produce this content quickly. And I have my process down to the point where like, yeah, a 20 video series in a week, as long as that's on a topic. I know, if it's on a topic, I don't know, I'm going to be taking much, much longer. But yes, this is stuff I'm using every day. And that's sort of the reason why I can just hammer through it. And explain it in a way like these the issues that I had when I was learning kind of thing. - -23 -00:25:59,520 --> 00:26:23,640 -Wes Bos: Awesome. That's kind of interesting to hear two different approaches. I know a lot of other people build curriculum as well. So if you if you do this yourself, make sure you tweet us at syntax FM with any any additional tips or things that you have because I always love hearing other people's workflow and approaches to this thing because I'm really happy with the the workflow and the cadence and, and everything that I have down pat, but you can always pick up little tips here and there. - -24 -00:26:23,700 --> 00:27:01,410 -Scott Tolinski: Yeah, I know I have a one of my favorite things is with my current setup is this ultra wide monitor, because I can have the code that target code, the docs for whatever I'm working on, and like a like a Google Notepad or something for notes. And then I can have all that stuff open. And if I ever need to reference something, I don't even need to like move my head, I just look up and be like, Oh, yeah, okay, so this is that that thing, and you never even if you've done something 100 times, there's a chance you might miss remember a method or mystery member x or something for something. So, you know, when you're on camera, and you're recording, it's always nice to have those little bits, little bits open for you. - -25 -00:27:01,440 --> 00:27:25,080 -Wes Bos: That's another thing I didn't mention is that I often when I'm designing the thing that we're going to make, I often make sure that the thing that we're making will look good at a very thin like almost mobile or tablet with because I like to have the code and the thing we're building open at the same time. It's not always possible, but if I can have both of them open at the same time, and the design of the application definitely plays into that. Yeah, - -26 -00:27:25,080 --> 00:27:49,380 -Scott Tolinski: I think it's one of the things your courses again, the you know, your courses are definitely they have that level of like Polish in the visual design. I wouldn't not all of my courses have that level of polish. You know, I haven't thought about that stuff. And some of them do have, you know, design and things built in for that. But mostly, I think that's one of the reasons why I'm able to produce so quickly is because your courses really do have such a high level of design. Oh, yeah. - -27 -00:27:49,410 --> 00:28:18,300 -Wes Bos: Yeah, I love love spending time on that I really would like to do a like design part or like build the application with the CSS parts as well. My upcoming advanced react course probably does 30% of the CSS along with me because part of learning the course is styled components, right? We have to write the CSS ourselves, but then the other other 70% comes along with it. And that's just because of sheer time being able to it would be a 70 hour course if I included all of the CSS in there as well. - -28 -00:28:18,360 --> 00:28:19,230 -Unknown: Yeah, sure. - -29 -00:28:19,260 --> 00:28:21,270 -Wes Bos: Cool. I think that's it anything else to add? - -30 -00:28:21,330 --> 00:28:21,900 -Unknown: No, - -31 -00:28:21,960 --> 00:28:48,930 -Scott Tolinski: no, I you know, one of the things that I I really want to stress is that like if you want to do this stuff, because a lot of people like ask me about just getting started making video tutorials and stuff, just do it like just start making some stuff when a lot of my first tutorials I didn't have a plan at all and even for my YouTube ones, I would just crank out a couple of videos and then that led to a couple more and that led to a couple more and there was no overarching script or plan or anything like that for them. So just try it Who knows - -32 -00:28:49,080 --> 00:29:19,650 -Wes Bos: if you go on anyone's YouTube channel doesn't even have to be like a coding channel but go on anyone's YouTube channel and go to all their videos and sort by oldest first and look at their first three videos they're probably not very good the quality is not very good but there's the heart The heart is there the the ability to want to teach someone something is there and then you can see as they go on over the years there the quality gets mad much better their enthusiasm always goes up so it was interesting to see that yeah. Yeah, I - -33 -00:29:19,650 --> 00:29:24,570 -Scott Tolinski: know my video my early videos are terrible and like when people still watch them I like want to get rid of them but like - -34 -00:29:24,600 --> 00:29:29,400 -Wes Bos: they're still good a lot of me look it up people still can I look it up on YouTube right now. Sure. Yeah, you - -35 -00:29:29,400 --> 00:29:30,780 -Scott Tolinski: go back to 2012 - -36 -00:29:30,870 --> 00:29:33,630 -Wes Bos: Oh, you're still level up tut's on I yeah, there's - -37 -00:29:33,630 --> 00:29:34,710 -Scott Tolinski: something about that. - -38 -00:29:35,880 --> 00:29:38,040 -Wes Bos: Oh, you just broke 250,000 - -39 -00:29:38,130 --> 00:29:39,750 -Scott Tolinski: I did. Congrats. Thank - -40 -00:29:39,750 --> 00:29:56,580 -Wes Bos: you. All right, here we go. I'm gonna sort by oldest Yeah, I wonder if you go on my oldest You see, like my wedding video and things like that. If you want to see if you want to see my wedding video, go check it out. A separate job or that stuff. I'm going to look at your first SAS tutorial. Hey, what's - -41 -00:29:56,580 --> 00:30:00,000 -Scott Tolinski: up? This is Scott with level up tuts and today I'm - -42 -00:30:00,359 --> 00:30:03,060 -Wes Bos: You still got the what's up all these years later? - -43 -00:30:03,110 --> 00:30:04,110 -Unknown: Oh yeah, dude. - -44 -00:30:04,679 --> 00:30:13,890 -Scott Tolinski: Well it wasn't it and I never intended that to be like a thing. But you know youtubers end up having like that. Hey guys, you know so yes and that just it's that's - -45 -00:30:13,890 --> 00:30:34,860 -Wes Bos: funny the the guys thing is is you know how it's sort of a thing that you're not supposed to say anymore in our industry. I notice it like crazy in there's funny enough that the fashion tutorials that my wife watches they all start off with Hey guy. And I'm just like, don't do that. That's a microaggression you know, - -46 -00:30:34,860 --> 00:30:47,460 -Scott Tolinski: I was I was out to lunch the other day with a couple and I kept saying guys like, oh, what are you guys doing? And every single time my internal dialogue was like, Oh, don't do that man. Yeah, - -47 -00:30:47,490 --> 00:30:54,000 -Wes Bos: yeah, it's a it's a funny thing. I've totally whether you agree with it or not. I've totally stopped saying it. Because of - -48 -00:30:54,060 --> 00:30:57,510 -Unknown: I'm having a hard time stopping saying it even though I yeah, and - -49 -00:30:58,080 --> 00:31:05,460 -Wes Bos: yeah, I have a text expander that automatically corrects guys to folks just so I don't slip up and get in trouble. - -50 -00:31:05,520 --> 00:31:09,210 -Scott Tolinski: And what do you say it in person though. Hey, folks, like what are you folks doing? That - -51 -00:31:09,210 --> 00:31:37,080 -Wes Bos: sounds sounds sweet. Folks, folks, folks. I say folks, just because I think it's fun to say yeah, but I I don't know I should I should see if I don't think I say God but it's funny because my my daughters say guys, and we don't say that at all. And I'm just like wondering like, Where's this coming from? Maybe just from other people that they've been interacting with from YouTube? Yeah. All right. I think that's it for today. We'll see you folks later. Thanks for tuning in. - -52 -00:31:37,230 --> 00:31:39,630 -Scott Tolinski: Nice. brought it back around. - -53 -00:31:39,810 --> 00:31:40,890 -Unknown: Already. Please, - -54 -00:31:40,980 --> 00:31:41,550 -Wes Bos: please. - -55 -00:31:43,290 --> 00:31:53,070 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax66.srt b/transcripts/Syntax66.srt deleted file mode 100644 index e526bcc3c..000000000 --- a/transcripts/Syntax66.srt +++ /dev/null @@ -1,476 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:20,520 -Wes Bos: the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. Hello, everybody. And welcome to the syntax podcast where we talk about the tastiest web development treats out there with me as always, is Scott to linsky. How are you doing today, Scott? Hey, I'm - -3 -00:00:20,520 --> 00:00:22,859 -Scott Tolinski: doing super good, doing really good. How about you? - -4 -00:00:23,099 --> 00:00:50,939 -Wes Bos: I'm doing pretty good. Just back at it after a couple of weeks of vacation, which I'm had an awesome time on vacation. And now I'm back into It's funny how hard it is actually to get back into coding. Like I just like was sat down at my desk. And I was like, What do I do again? Like what am I working on? Like I feel for people who don't write like JavaScript every day because you get I feel like you get pretty rusty I found after just two weeks of being away, I I don't know how to code anymore. - -5 -00:00:51,509 --> 00:01:01,470 -Scott Tolinski: I think it's hard to get back in the groove of like, anything like that, where you're just like, You're out of your your normal flow. You're not you know, in your all the sudden gotta just jump back into it. - -6 -00:01:01,859 --> 00:01:02,820 -Wes Bos: Yeah, yeah, totally. I - -7 -00:01:02,820 --> 00:01:04,920 -Scott Tolinski: like to project you know, - -8 -00:01:05,369 --> 00:03:07,860 -Wes Bos: that's true, actually being able to jump into an old project and think about like, oh, how was I working on it? How is it working on it, like, I thrive in consistency and doing the same thing day in day out and stuff like that, when it gets messed up. It's it's really funky, but excited to be back. Today's episode is sponsored by two awesome company, Dev lifts, who sponsored the show. Many times in the past, they're back. And they will get you fit as if you're a developer, which you probably are, because you're listening to this, they are going to get you fit and M lab, which is going to host your MongoDB database. We'll talk about both of those companies partway through. But today we're talking about react, I was just kind of sitting around looking at the list of topics. And I messaged Scott, and I was like, you know what we've never done, we've never done a show on react we've done our first ever show over a year ago was on react tools. We've talked about react it probably in every single episode. But we've never actually done like, this is what react is, here's all the core concepts behind it. And we realize that not everybody who listens to this podcast is a react developer with a MacBook Pro that lives in North America. So we thought we would go into react to kind of explain all the ins and outs and our thoughts on it. And the opinions and this would be great if you are a new or intermediate react may also be a nice little refresher into all the different pieces. If you are coming from either another framework or not knowing a framework at all, maybe you're just learning JavaScript at the time. Hopefully this will solidify the ideas because I find that when I switched to react from Angular, I was initially Angular one Dev, I found that there was not a lot of things in react. Whereas in Angular that I felt like there was just endless things to learn. In react, it was pretty simple. There's components, state props, event handlers, couple lifecycle methods, and some ideas around fetching data. And and I guess you can get into it with because it doesn't do routing and stuff like that. But I found that it was easy to grasp the surface area of react. I don't know about you, do you feel the same way? - -9 -00:03:08,039 --> 00:03:48,810 -Scott Tolinski: Yeah, and a lot of the things in react, I think they're things that even people have trouble with this thinking are things in react or just JavaScript things and and that's like, the main thing that I am now going on often the worst thing here, but the main thing that I've been like really loving about react is just personally how much better at JavaScript and makes you and and just the amount of stuff that you can learn in react. And then you can take with you to other things, right? Because now all of a sudden, the stuff you're taking, or the stuff you're you're taking isn't isn't stuff that you have to leave behind, right? It's not dollar sign scope. It's not directives, it's not that kind of thing. It's JavaScript that you can take with you. And I like that a lot. - -10 -00:03:48,840 --> 00:04:11,729 -Wes Bos: Yeah, I feel like I've said this before many times over, but I feel like react has made me a much better JavaScript developer. Because there isn't a lot of magic. There is I guess, in like, the whole rendering and stuff like that, but actually authoring react code, there's not a whole lot of magic that goes on beyond beyond JSX and some of the auto binding stuff that is not totally in the language just yet. - -11 -00:04:11,759 --> 00:04:56,910 -Scott Tolinski: Yeah. And I think I remember back to when I first started learning react, besides the whole confusion around writing your your view in your JavaScript sort of thing, rather than having like a separate HTML file and stuff. I think the biggest thing for me is that felt very verbose. And I was just like, you got to write a whole lot of code to do very little and then I don't think that way at all anymore. It was only a couple weeks before I was just like, Oh, I totally get why everything's like this. And then now when you look at stuff that does a whole lot of stuff for you. I get a little where's this coming from? Why is this doing this? I you know, I never I was it was definitely a fan of a little bit of magic and still I'm a fan of a bit of magic, but like I'm definitely I get why people say there's a lot of too much magic and things you know, sometimes - -12 -00:04:56,999 --> 00:05:16,350 -Wes Bos: totally I agree that there's a fine line in Magic. And I like it just enough. And I don't really know how to how to say that. But react is is probably on the other side of it as not so magic, I probably would like a little bit more magic in react but the explicitness of it, I think does make you a better JavaScript developer. - -13 -00:05:16,350 --> 00:05:17,450 -Unknown: So - -14 -00:05:17,490 --> 00:05:26,070 -Wes Bos: let's get into it. Let's first talk about one of the core ideas of react. And that is a component. We want to take a stab, what is a component? Scott? - -15 -00:05:26,160 --> 00:05:54,360 -Scott Tolinski: Yeah, component is a reusable thing to reusable chunk of code, right. And a component can be something that augments your other things, or it can be something that is itself a thing, right, it can be a visual thing, or it can be something that augments other things like a wrapper or container or something like that. That's providing data. But at the end of the day, a component is an individual item that can plug into other items, or feature other items or contain other items. - -16 -00:05:54,420 --> 00:07:41,850 -Wes Bos: Yeah, totally. So explanation, I really like that, I think you nailed it there, it will either do one of two things, it will either display a part of your application. So maybe you are displaying a user's profile, you want to put an image of them, you want to put like a h2 tag, and maybe a tagline underneath them. And that will be your user component. And you'll be able to take that component wherever you want. And as long as you supply it data to who the user is, then it works. Another way to approach it is a component can be something that handles logic. And and some of that logic will be what happens when someone clicks on a user, what happens when someone hovers over it? What How does the data get into the component and at the very simplest, your logic and your display can be the same thing, you can put those together. And in a lot of cases, that makes sense. But you can just do one of the other where you might have a component that has all the logic in it. And then you might have a secondary component that that just answers the question, How do I display it? And I think maybe we'll get into maybe we should do that now right now. So there's your regular react components, which are you extend react component. And those are, those are what I like to call full blown components. And in those, you can put all of your custom logic, and then each component will have what's called a render method. And in your render method that describes at the end of the day, when I put this component on the page, what does it render out to the page, and that's where you put your HTML. The other type of component is called a stateless functional component, which is just a render and it doesn't it doesn't extend it's actually just a function that returns some JSX. And that's just a taking in data via something called props. We'll talk about that. And then spitting out some DOM elements on the page. Does that pretty good? I think, - -17 -00:07:41,910 --> 00:08:03,540 -Scott Tolinski: Yeah, I think so. And there's also pure components. But those are less important right now, especially if we're just getting into the basic stuff. But like, one of the things that's funny, they always were saying that like stateless functional components are going to bring performance benefits, but it was always like, they're going to bring performance benefits, and I don't think they have yet, right. So do use the stateless functional components in your code. - -18 -00:08:03,960 --> 00:08:48,529 -Wes Bos: I do use them whenever it is that I need to just render out something because it's a little bit simpler. But I do find it a bit of a pain, when I need to switch from a stateless functional component and go, Oh, I actually do need a custom method on this thing, or I actually do you need one of the lifecycle methods on it, and then you have to switch it over to a regular react component. So I myself have never really run into any performance issues with just regular react components. So I do think it's kind of funny, because like, maybe that is something the compiler should handle. If it doesn't see any custom stuff on it, maybe it should just turn it into a stateless one for us. I don't I don't necessarily know why one or the other. But I don't know, it's kind of, there's probably some good reasons that I don't know, - -19 -00:08:48,600 --> 00:09:38,539 -Scott Tolinski: for a long time, I think I was being very, like, I'm always gonna do a stateless functional component unless I have to. And now I'm very, I'm always just going to do a component. And I always Don't even think about stateless functional components, because it's like, it was such a pain to convert between the two that if I started one and had to change, I was always just annoyed by that. And since I wasn't seeing any performance decreasing, and I wasn't doing anything that would cause Well, I mean, obviously, there's no necessarily performance benefits from an anyways. So like, I was just just being cool. Okay, well, if if that's a, that's a thing, and all of a sudden, you know, you get this big benefit from it, I'll just do it all at once. I'll just convert all the ones I can at once rather than having to even think about it. So for the most part, I just use component. And I use pure component occasionally. But for the most part, I just use component. And in that way, I just don't even have to worry about it. - -20 -00:09:38,700 --> 00:10:41,700 -Wes Bos: That's, that's interesting. I like to hear that too. Because what happened when react came out is that everybody was opposed to react because it's through separation of concerns out the window where you used to be like you have your JavaScript here, you have your HTML here and your CSS here and they should all be separate because you have separation of concerns and they sort of threw that out the window and they said, You know what, just put it all in. A component right and and people were saying like, no, you're not allowed to do that. And and and we asked like, well, but why and if we got into this, like sort of developers do this all the time we have these rules that you should never do something. And then if you ask why you start to start stuttering, and you don't really know why you think it's just, it's just his mantra that you repeat over and over again. And you have to try really hard not to actually fall into that, because now we're starting to fall into things in react where people say, like, always use a stateless functional component for this, or what is the other one don't do inline event handlers. And then people come back and say, but why? And then yeah, you sort of stuttered. Uh, oh, I was just just kind of - -21 -00:10:42,720 --> 00:10:52,140 -Scott Tolinski: situation. And in this particular, whatever, you're gonna run into these tiny, little insignificant performance issues that you may or may not be having. Yeah. Therefore, - -22 -00:10:52,230 --> 00:11:04,679 -Wes Bos: there's a demo where I put 300,000 components on a single page, and they all have an inline event handler. Look at the for performance. Oh, okay. I'll remember that next time. I put 300,000 components on a page. - -23 -00:11:04,830 --> 00:11:47,399 -Scott Tolinski: Yeah, right, exactly. So I, I tend to not get wrapped up in that sort of stuff. I mean, there's always some sort of best practice that's going around. And I mean, by all means, follow best practices, right. But like, I don't, don't get too crazy about it for a long time. People were like, I wouldn't even use react without Redux. You're only using Redux. And now, you don't see that sentiment nearly as much anymore. People are using other things instead of just Redux. And in there, there's these new things like that, that happen all the time. And people shift from one to the next one to the next. And again, it's good to stay up on best practices, you don't want to ignore the best practices, you want to do them. But don't get hung up on micro optimizations or something like that, unless you need to. - -24 -00:11:47,790 --> 00:12:23,340 -Wes Bos: That's one thing I often see in senior developers. Whenever I talk with the senior developer, they're always skeptical over rules like that. And they always question why and how that works. I think that's a really good thing I've taken away from from talking to senior developers is don't get wrapped up in I do it myself all the time. And you see it in CSS as well. You see it in HTML, where people come up with these rules, they have to do it this way. Because someone once ran a test in Chrome. And it was like three milliseconds faster, but it's since been fixed. So who cares? In most cases? - -25 -00:12:23,850 --> 00:12:24,840 -Scott Tolinski: Yeah, for sure. - -26 -00:12:25,049 --> 00:13:02,610 -Wes Bos: So we'll move over to the next one, which is JSX. JSX is the templating language. I don't even know if I would call it a templating language, but it's how you make DOM elements, or I like to call it HTML, people will turn their nose and say it's not HTML, it's DOM elements. Yeah, JSX. But like, it's, it's how you get HTML on the page, right? And it looks exactly like HTML, hold a few little things. There's like, you have to use class name instead of class. And you have to use HTML four, instead of four, which are a couple little things. Hopefully, there's a rumbles that that will go away. And in this beautiful thing called JSX, to have been sort of falling - -27 -00:13:02,610 --> 00:13:11,760 -Scott Tolinski: in love, love that. I would love that. I think that was one of the initial things that turned me off of JSX. I was like, I gotta write classname. Yeah, the word here. - -28 -00:13:11,909 --> 00:14:37,020 -Wes Bos: It's bizarre and the fact that preact. So preact, and Inferno are libraries that are compatible with the React API, meaning that you can ideally just switch your entire application over from being a react application to a preact app or an inferno app. And actually, the dev of Inferno now works. Facebook on react in the dev of preact. Now works at Google doing performance stuff. So obviously, these were like sort of like faster versions of react that they built. And it's kind of interesting. I know, a couple big companies specifically use it, but they have fixed that class name and HTML for things. So it's not like a limitation of any language. It's just in the JSX compiler. So hopefully, that will go away at some point. But we use JSX to template out everything. You can take data into your component via three three ways state props, or context. We'll talk about that in just a bit. And it's just how you render it out. The the kind of weird thing about JSX or maybe the nice thing about it is that there is no logic at the logic list. templating language so if you're coming from pug, or Jade or handlebars, or ej s or any other templating language, you know, that they all have their own way of doing conditionals. And if statements and turn turn are rare Aires and look, how do you say? - -29 -00:14:37,529 --> 00:14:38,850 -Scott Tolinski: I say ternary - -30 -00:14:38,940 --> 00:15:19,260 -Wes Bos: ternary it's the one I but it's a bonkers you know, in a rare it's not it's I always say everything wrong. It doesn't have any of that logic in the idea is that you use JavaScript for that logic. And that can get a little hairy in places in most cases. You just need to map over an array of data. And then spit out another component for that. And it's not a big deal. In some of the conditionals, it can get a little bit hairy. But as soon as your templating gets a little bit hairy, it's likely that you need to split your code up into smaller little components that handle that logic before the render actually returns. - -31 -00:15:19,499 --> 00:16:16,950 -Scott Tolinski: Yeah, I'm a big fan. Because in JSX, you have the ability to use JavaScript expressions, right? And just being able to throw those expressions into your HTML. Again, it is it is for all intensive purposes. html, right? Yeah. Being able to just throw in JavaScript expressions in line into HTML, I always find that to be such a nicer approach than like having a property on an HTML element, Allah Angular or something like that, where you have an mg f that was on a div for me that always felt like, is the div going to show? Or is the contents within the div going to show or what is the wrapper here? Right? So I really like the fact that you can have all your expressions in JSX. And it makes it very obvious to me, what is actually going to be output rather than what's the container. Now obviously, if you're used to that stuff, is immediately obvious to you. But it to me, it's just less ambiguous at a glance. - -32 -00:16:17,099 --> 00:16:47,520 -Wes Bos: Awesome. Yeah, that's one thing. When I first started to react to everything that I bumped into, I was like, seriously, this is the way that they do it. But if you just give it a chance, a lot of react to sort of rethinking best practices, especially if you're coming from Angular one, or jQuery or backbone, things like that. It was a bit of a radical shift. And now a lot of the ideas of reactor are propagating through other frameworks. So it might not be that foreign to you. But if it's your first time approaching one of these, it might seem funky, but I'll just tell you give it a shot, because it's great. - -33 -00:16:48,209 --> 00:17:17,300 -Scott Tolinski: Yeah, yeah, definitely. Once you get past that hole, it's different and scary point. It doesn't it feels very intuitive. Once you're used to it. One of the things I was actually just looking on the that JSX two thread. And though somebody was saying like comments, comments feels, oh, yeah, sex, and it does feel hacky, you have to have curly brackets, then you have a forward slash, then the asterisk. And then he's like, sort of the JavaScript block comment inside of curly brackets. It's just a lot of code for a comment, right? - -34 -00:17:17,399 --> 00:17:18,540 -Wes Bos: Yeah, it's really annoying. - -35 -00:17:18,540 --> 00:17:30,780 -Scott Tolinski: Yeah, your text editor will occasionally decide like not to do it I was having for a while where VS code would just always do the double slash inside of JSX. And I was just like, no, stop, please don't do that. Like, I don't have to type this out. - -36 -00:17:30,989 --> 00:18:13,410 -Wes Bos: And if you leave a comment above your initial return, it gives you that cannot return to children, you have to return to put the comment inside. It's so bizarre to me that you can't just use regular HTML comments, which I would love. And I think I'm just opening up my my site stats right now, my most viewed blog post is how to comment in JSX, which is so funny. That's the one thing that everybody there we go to just today it's a noon, and over 300 people have come to my website, asked, How do you comment in JSX? So on any given day, there's probably between six and 900 people visiting my website just to learn how to comment and JSX it should be a little easier than that. - -37 -00:18:13,739 --> 00:19:01,230 -Scott Tolinski: Yeah, super annoying. Cool. Yeah, we're talking about JSX is the way to like write the view for react. But you can write react with actual just JavaScript, I mean, if you want to keep it all, so there's like no abstraction over JavaScript, you can write using react, create element, and you can create an element, right? And you can render those elements. And you can use all sorts of any of your normal HTML in JavaScript. Now, I don't know too many people that actually write react this way, because it's just a lot of extra code to do it. But it exists, right? So if you're like, I don't want to use any of these weird HTML abstractions. You can write everything in straight JavaScript if you want. It certainly is a way to do things. And of course, you can find more information about that again, do you know anybody that it does that kind of thing? - -38 -00:19:01,439 --> 00:20:00,480 -Wes Bos: I don't know. Anyone that specifically uses react dot create element in the way it works is that you, I think it's the you react dot create element. And the first one is the text that or no, the first one is what element you want to create. Second one is an object of properties that goes on that element. And then the third one is what goes inside. And that's either going to be text, or it's going to be another react create element. Because if you want to nest six or seven levels deep, then you have to have six or seven. So I don't use that. I know some people that use this thing called hyper script. It's called react hyper script, and you just use an H and you can give it like div dot example or h1 pound heading and it works a little similar, but the syntax is a little cleaner. I don't see the reason why you would want to use this unless you love finding missing braces and brackets and semi colons. Yeah, it's it's not for me. I don't know anybody that that uses this. But I do know it's it's somewhat popular. There's there's people out They're - -39 -00:20:00,690 --> 00:20:37,470 -Scott Tolinski: if you if you write react without JSX and with something else, whether that's hyper or hypertext or hyper whatever you're hyper, hyper aggressive it was, yeah, hyper script, or with just a regex built in tools, let us know I want to hear about it. Because that's like really interesting to me. It's something again, I can't imagine doing myself. And I kind of want to know, what your reasons are for, for doing that. And if you like it, and how it makes your life better. So JSX basically does a lot of the heavy lifting for JavaScript underneath the hood, right? I mean, it's all just JavaScript under JSX. And speaking of heavy lifting, our sponsor today is deadlift. - -40 -00:20:37,560 --> 00:21:27,240 -Wes Bos: So today's sponsor back at it is dev lifts. We had dev lift sponsor, I think three or four shows in the past specifically, we did a fitness and nutrition episode about a year ago. Now we're actually gonna do a follow up on that, because that was a pretty popular episode. But deadlifts is a company, it's JCL. Dad, there. Jc is a web developer, personal trainer, and that is a personal trainer. And they're on a mission to get devs web developers you healthy because as you know, Scott and I were joking the other day on Twitter, or maybe not joking. We're gonna do an episode on our top 10 favorite chips. Which, by the way, yeah, stop the stop the Add for a second. We have a way better chips in Canada. We have you Scott told me you don't have all dressed or ketchup chips. - -41 -00:21:27,480 --> 00:21:30,110 -Scott Tolinski: Yeah, but we have Cool Ranch. Do you have Cool Ranch? - -42 -00:21:30,390 --> 00:24:47,820 -Wes Bos: Oh, yeah. Doritos. Yeah, wow. Hmm. We've got some whenever like protein and smoky barbecue. Anyways, back. So dev lips has got two new plans or one new plan and the existing one that we talked about last time that they sponsored. So the new plan is called fit dot start. And it's 19 bucks a month. And it's going to be tailored towards a goal that you want to hit what's really important about either of these ones we're going to tell talk to you about so you don't need to have access to a gym. So with fit dot start, it's going to give you you choose a goal, you want to get lean, which is lose some fat, if you want to do bodyweight if you have no gym required. Or if you want to get strong. So you want to do compound lifts. So whatever it is, if you go back to the the fitness one, one, some of my goals were to lose some weight, and to get stronger so that I could have like better mental clarity when I'm approaching these things. So fit start, all the plants are 100%, beginner friendly. The first week, he says is just actually taking a walk, you get all the workouts via email. And he's telling me that they're going to have a mobile app Pretty soon, which I think is going to be super helpful, because I always had a Google Doc on my phone. And when I was opening it up at the gym, so a dedicated app would be pretty, pretty sweet. With fitstar, you get a nutrition guide, it's free for active contributors to any of the DevOps, open source projects, which is pretty nifty. It's free for students to just email your student email address, which I think is really, really cool. So if you're just looking to get started with getting back into the gym and need a really great way I've went through their plans and myself, they work really well. I think that's really neat about developers is sometimes you just need someone to give you a plan and say do this, and then you can go off and do it yourself. Use Fitz, use syntax for 50% off your script subscription for one month, two months, no forever. Check that out. That's at deadlifts.io. You click on the Join button. And then they also have the premium dev list, which is what we talked about last time. And this is like the custom tailored one towards your goal. So if you have specific goals that you have, you have specific injuries, dietary restrictions, things like that, and you want a little bit more hands on more personal personalization, accountability with JC and that you can have video calls with them you get there, you get the private Slack channel with the other one, you get Slack channel. But with this one, you get the private Slack channel. They'll do form form critiques on how your format because that's this one you don't want. Important. Yeah, hurt yourself very important. Yeah. And that one it has, he's only got 10 spots open for this, because obviously their time is not infinite. So there's only 10 spots, you can get 50% off with the coupon code. Tasty. I really like that coupon code. So either way, if you're looking to get fit, check out deadlifts.io. And if you don't know which plan is for you, I'm sure you can chat with JCR that and they'll they'll help you out. I highly recommend going with JC and that I went through it myself. And I know we talked about this before but it's really important to to get fit and to get in shape if you're a developer, not just because you're gonna look good, but I think more importantly, that you're you're going to be more mentally focused and you're going to be on it more. - -43 -00:24:48,000 --> 00:25:06,540 -Scott Tolinski: Yeah. And I think Yeah, I can't wait to do that. That second fitness episode. Everyone knows. I'm a big fan of, of that kind of stuff. So yeah, I'm very excited to talk more and you know, Douglas, everything is This these plans are awesome. And yeah, just check it out deadlifts.io Big, big fans of them. - -44 -00:25:06,600 --> 00:25:11,700 -Wes Bos: Yeah, thanks so much. I'm really excited to have them back sponsoring a couple podcasts. So back at it - -45 -00:25:11,760 --> 00:25:12,870 -Scott Tolinski: back at it. Alright, let's - -46 -00:25:12,870 --> 00:27:10,440 -Wes Bos: talk about data in react, how does data get to where it wants to go? Where does data live and how to fetch it and bring it into an application. So first, let's talk about how does the data get to where it needs to go. So if you have a component called a user, and you want to feed that, maybe an object with a user's name, a description of the user and an avatar, so you would have an author, you would either pass in one Prop, and a prop in JSX is the same thing as an attribute in HTML, except that you can pass it any type that JavaScript support. So you might have a prop on a user component that is like user details. And you would pass in an object that has those three things. Or you might have three separate props, where you have like, name, description, and image and those will all be passed in just like a regular HTML element would would take in a source on an image tag or an alt on an image tag, then once you are passed the data into it, you can easily access the data inside of your component by saying this dot props dot, whatever it is that you want, you can use the React dev tools to peer into a component and see the prop. So anytime that you want to surface data to a component. And this is kind of a tricky thing in react because there's no concept of like a global scope in react. So if you want a component to reach outside, or not even reach outside, but if you want a component to get data, you need to pass it in via props. And that's how you get a similarly if you want data to transcend six or seven levels, you have to do what's called prop drilling, or you have to pass it down all six or seven levels. There's a lot of different solutions to solve this, that issue as well. There's this thing called context, we'll talk about that there's other external data management, things called like Redux and whatnot. But at the very basic getting data into a component is called props. Then there's a couple other maybe you want to you want to take these, we also have what's called truck child props and render props. You want to take a stab at those. - -47 -00:27:10,500 --> 00:30:55,500 -Scott Tolinski: Yeah. And it's actually really funny, I saw a tweet from Dan Abrams the other day where he's like, I don't know why people always do prop drilling when they don't have to. And he showed an example where you had like a container. And then instead of having that container contain, like children that are nested inside of that component, he The children were just being output as the children, the children Prop, or the child props, and the prop itself, instead of drilling into the container and then into the children without ever being utilized. And the container itself just went right into the children in the US like now that container isn't isn't attached to that prop at all. Yes, the child is. And I thought that was really interesting, I hadn't really used that technique very much, I'm almost always passing it down, or I'm using some sort of state management to put that there. So I thought that was like a really interesting thing to say, Hey, your your property is coming from this, skipping the parent and going directly into the child, just because you're using this thing called child props, right? or children. So in react, you have a couple of different ways to utilize props. And one of the default props that react gives you is something called children. So you can think of this as if you were to have a header with a navigation, well, maybe that header could contain several different components. And maybe you'll have that header can Well, I guess, maybe this is a bad example, let's let's have like a card component, right? A card component is is a rapper, and then inside of that component is going to be a whole ton of different stuff, right. And so you could have your card as the outermost wrapper as the outermost component. And then you would have your children be available as a component that is just nested inside of there, you could think of it as like an h1 inside of a div, right? You have your content that's inside of the card. Well, to access the content, you output it with this dot props, dot children, okay. And so the children is just going to output anything that is contained, and it's not passed as an attribute. It's actually sandwiched in between the opening and closing element, just like you would any other HTML situation. So where render props comes in, is the idea that you could have a prop initially, you could see this in something like react router, where there's a prop named render, right, and that render is an arrow function that outputs some code, right and, and there's a whole host of benefits to this. I think, one of my videos I have a whole host of videos on level up tutorials, the level two react course. Check that out. I have like a three video little miniseries in that course. It's like the first three videos that really explain and build up render props, like one by one by one until you really get it. Mm hmm. But basically, the render prop ends up just being a function that outputs some code, and then what spawned from that is useful. In children as a render Prop, and then you end up being able to access things from the parent component in line in your children without having to have this like really tightly coupled parent child relationship. So you'll see this and things like context, you'll see this and things like Apollo when you're pulling data out, it's how I pull my data out. Definitely, it's a hard concept to explain without having some sort of visual thing. If you really want a full explainer, go to level up tutorials, comm check out the level two react course I explain it, in my opinion, a very good explanation. And we really like take it one step at a time take to give you the benefits of it, but it makes for very reusable code. Okay, so render props are a way that you can use an actual prop once named render, now it's just the child prop to access information from the parent inside of your child allowing for like way, way reusable code. - -48 -00:30:55,800 --> 00:31:52,170 -Wes Bos: Yeah, so earlier, we talked about having a one component that fetches your data and another component that displays the data. And that concept is usually referred to as a high order component. And in render props, I think the key there is that the the actual child of your component is going to be a function, and that function will run and the arguments that that function provides you is the data that you're looking for. So I might have a query component that queries for a list of items. And the child of that query component will be an array of items that I can then loop over and display. So the syntax of it, I think, is terrible. Because you've got these arrow functions, using you got curly brackets and square brackets and like triangles and any shape of bracket you can think of they put them in there. But that's just a bit of a think of the downside of the language. I don't know if that yeah. - -49 -00:31:53,100 --> 00:32:12,660 -Scott Tolinski: Yeah, yeah. Yeah, there's, that's the whole thing is that people just found out that this technique, you could just do this technique. And we found out the benefits of it. It wasn't like this is necessarily a feature. This is more just like a technique that was discovered fairly. I mean, in terms of like, things, new things in react that say this is a fairly recent, - -50 -00:32:12,690 --> 00:32:53,850 -Wes Bos: probably in the last 1415 months, I'd say, it's, it's become pretty popular in the last little bit. And there's, there's people that are very against it, and people that are very much for it. Yeah, in Apollo, you kind of have no choice, because they used to do high order component. And then they released some new features, and they only rolled it out as a render prop. And as long as you have prettier running on your render props, it's fine, because it will do the auto indentation for you. Although the one thing I don't like that it does is that if you have an implicit return, it will automatically switch it over to an implicit return if it can be. And then if you want to debug you want to throw a console log inside of your block. Yeah, it's really - -51 -00:32:53,850 --> 00:33:10,470 -Scott Tolinski: good. Yeah. What's the return? Yeah, dude, I know all about that. I for the most part, I agree. I'm right there with you. I'm a huge fan of render props that That to me is like the one thing that I'm always like, do I really want to throw a log in here? And like, go through that? Or do I just want to try to figure out blind faith? Because Yeah, in the as well, - -52 -00:33:10,590 --> 00:33:36,690 -Wes Bos: one little one little tip there is on an implicit return this is we're getting into the weeds. But between Scott and I, if you have an implicit return, and you want to console log the payload, you can do console, log the payload, and and and then do your implicit return. And because console log returns nothing, yeah, it's all C. So it'll, it's falsie. So it'll fall back to the actual return, but it'll still run the console log. - -53 -00:33:36,690 --> 00:33:40,560 -Scott Tolinski: You should, you should sick tip that on Twitter, I've never heard that. - -54 -00:33:40,590 --> 00:33:42,900 -Wes Bos: Let me fire up the fire emoji. - -55 -00:33:43,140 --> 00:33:51,000 -Scott Tolinski: Yeah, that's just get your fire extinguisher handy. Just in case it's a, we don't want to start any wildfires or anything. - -56 -00:33:52,650 --> 00:35:03,270 -Wes Bos: Let's move on to the next one, which is state. So props, I always tell people in my react workshop, you got state and props, those are the two big ones. And state is where your data lives. And props is how your data gets to where it needs to go. So always think of state is the house. And props is the car or the bus that it goes on to to get to the actual final destination, right? So props could be just you manually passing in data to a component, you could just literally write name equals quotes Wes Bos, and that's manually passing in data. But likely that data is living somewhere, it's living in some sort of data store at some point in the data store that comes with react is called state. And every component can have state meaning every component if it needs to, can hold its own data. But in a lot of cases, you have like, like a higher, I don't wanna say higher components. That's the thing, but you have a component that lives at the top, and that contains a lot of your application state. And then you pass down the data via via props or via sign called context, and that will that'll sort of infuse it into so state is where your data lives. Props is where Your data needs to go or it gets how it needs to go. - -57 -00:35:03,690 --> 00:35:14,400 -Scott Tolinski: Yeah. So the I guess the exception to that is that if you're using something like Apollo to get your data, or even like Redux, your data doesn't necessarily spend too much time in state, right? - -58 -00:35:14,610 --> 00:36:44,760 -Wes Bos: Yeah, you can, you can forego state entirely. Because you could just pass in data from you could load in a JSON object and pass it in via props. Immediately, you could have something like Redux, which is an external store. And what Redux will do is it'll wrap your components and just inject that data directly from the Redux store, into the props of your component. Or you could use something like Apollo, which will use a render prop and automatically inject that data via the via prop. So your there's really a whole bunch of different ways. But the way that react comes with is called state and you can use that at to hold your entire application state, or often I'll do just local state, like, I know that you did a tutorial of the button that I use, I have a button in my back end, that's called delete user or refund user, and it's called the scary button. And I don't want to accidentally click that button. I'm really sure I want to do it. So I click it once. And that that's that internally update state of the button called clicked. And like our number of times clicked, and that's one, and then a number of times clicked to. And then every time you click it, it increments that. And then on every click, I check if that number is greater than three. And if it's greater than three, then we run the actual action that that button was supposed to happen. And then you reset the counter back to zero and display the data and that that's great, because I never will accidentally refund someone or accidentally delete someone, I always click have to click it three times. And it gets scarier every time you click it. - -59 -00:36:45,980 --> 00:37:19,650 -Scott Tolinski: Yeah, in my video, I made the button larger and brighter every time you put, like, a little imposing a little bit more imposing Oh, no. Yeah, again, yeah, there was like a time where people didn't want to use local state for anything. And that was one of those little micro trends that like was kind of outrageously ridiculous. Like there are some things that make way more sense to be local state a, you know, that that are just like very nice to be local state. And I use local state for mostly local, local state things toggling this or that although now I actually have a have a render prop toggle component that I really like. So - -60 -00:37:19,650 --> 00:37:23,070 -Wes Bos: I get one of those in my upcoming course, for opening. - -61 -00:37:24,030 --> 00:37:47,400 -Scott Tolinski: Oh, yeah. I love I love the render prop toggle component. myself. But yeah, so local state you you can set your state. And And again, these are these are primarily things like not stuff that you need to access globally. But like, Hey, is this this navigation? Is this drawer open or closed? And maybe Yeah, something you need to be able to control from outside of that component, or, or whatever. But yeah, - -62 -00:37:47,580 --> 00:38:49,440 -Wes Bos: I'll give you another example of when I use state and that's with forms I use, if you had a form, like you, if you want to be able to fill out your name and description and upload an image, those are three pieces of data that as you type them into your input box, they actually have to be at react is kind of weird in this way, where if you're typing into an input box, it has to be bound to state there's a ways around it, I show how to use something called reps in my be in our course, as well. But primarily, if you're typing into an input box that needs to live somewhere in in your state. So what you can do is you can just mirror every time someone hits a key, you mirror that data to the state, and then the state will then populate the input. It's like sort of the circular circular thing. And then that's just sort of like a temporary holding place. And then when you click Upload, you take it out of state and then you send it off to your backend, you put it in your Apollo store, you put you do wherever you want, but state is a nice little way to just keep it temporarily inside of that component before it is that you need to submit it to the back end or whatever. - -63 -00:38:49,730 --> 00:39:34,170 -Scott Tolinski: Yeah, and if I could, I think I think forms are easily my least favorite thing and react easily. your least favorite ugly, least favorite thing and react like having to one like the syntax for ref sucks. It's always sucked all the iterations of syntax for refs has sucked except for when it was a string. But that like was confusing for some reasons. And then like, if you're not using refs having to have like an unchanged, you have to one there's like several ways you can have it automatically where you have like one on change function where maybe you're looking at the name of the input or something like that. But either way, but I use that on change on every single input. And it's just like, there has to be a better way to make a controlled input, obviously, not in the current system. But - -64 -00:39:34,260 --> 00:39:38,610 -Wes Bos: I think there's something called react forms, which I've never, I've never looked into before, but - -65 -00:39:38,610 --> 00:39:47,610 -Scott Tolinski: I think that there's a bunch of form form libraries like Formic Formic is one that a lot of people use. It's very popular. It has lots of stars on GitHub, yeah. - -66 -00:39:47,960 --> 00:40:44,190 -Wes Bos: formed. It's called react informed. They've have to check some of these out. Usually what I do and this is what Scott was talking about is that I have an input and that input will have a name. It will Have a type. And it will have, obviously a value. And and whenever any of those inputs change, I take the name. And I use, I have like one on change handler and I use ESX generated properties or dynamic properties. So you use the name as the key in state, you obviously use the value as the value in state and then I use the type to just double check that if it's a number I, I parse it into a number before I store it, because inputs are always strings. And if it's a type of number, then it needs to be properly parsed as a as a number. And I just like to write that over and over again, it's I'm pretty happy with it. And then if there's anything more involved, like uploading an image, then I'll have to write a custom handler for for that change event. Yeah, - -67 -00:40:44,340 --> 00:40:50,940 -Scott Tolinski: yeah. And then from that works nice, but it's like it's boilerplate, they have to add to every single thing that's true to form. That's what - -68 -00:40:50,940 --> 00:40:54,840 -Wes Bos: was so nice about Angular, where you could just bind it to scope, - -69 -00:40:54,980 --> 00:41:03,000 -Scott Tolinski: scope, directive or whatever. Yeah. Yeah. If you were, if you are, like writing a really tiny project, just bind it to global - -70 -00:41:03,000 --> 00:41:06,060 -Wes Bos: scope. Done. God today, - -71 -00:41:06,480 --> 00:41:21,150 -Scott Tolinski: we had, we had, like, so many projects, that would be like, Oh, shit, we have, you know, six hours to get this whole thing done. And it's a prototype, it's never gonna see the light of day, it's never gonna be in production. Just throw it on on scope. And let's just call it a day. And let's get this thing done. - -72 -00:41:21,600 --> 00:41:50,400 -Wes Bos: It's funny that yeah, it's because that happened with that initially happened with vanilla JavaScript, put everyone put everything on window. Then in Angular, or in jQuery, everybody put everything on the dollar sign, because they're like, Oh, it's just like kind of namespace. Every single time people figure out how to do something bad and react as hard as it is to do some things. It's because they don't want you making mistakes. And I find that I write a lot less terrible code in react, I still write my fair share terrible code, but I do less in react. - -73 -00:41:51,480 --> 00:42:39,510 -Scott Tolinski: Yeah, for sure. Yeah. So state we mentioned is where you go when you want to put your data places you want to you want to modify it, you want to open up your your local state, you want to you want to change it, you want to access and work with data, right? Well, a surface that we like to use over here as syntax for storing data long term, not in local state, but long term is our one of our favorite database services called m lab, which actually looked it was originally called Mongo lab, right? Mongo lab, that's what we were telling you about this last time. Yeah. So m lab, M. lab.com. is a place a basically a service for hosting your databases, that makes everything just super easy. And Western, I have both used m lab for a long time. And we both really like it. - -74 -00:42:39,570 --> 00:44:33,510 -Wes Bos: Yeah, this is one of my favorite times when a sponsor comes on that you've been using them for a long, long time as it's funny that like, almost all of our sponsors are the things that we actually use ourselves. And it's just because usually what happens is we just mentioned them on the podcast, they see a little boost from the podcast, show notes, and then they come back and properly sponsor, which is I think how drug dealers work. But, so m lab, I've been using them probably I think 2011 2012 is when I first started my course platform, and they've been hosting my MongoDB database ever since. And they're awesome, because they obviously host your MongoDB database for you. That's great, because you don't have to worry about scaling that thing. You don't have to worry about security against that thing. You don't have to worry about, they'll do backups for you, you can schedule as many backups as as you want, you have to pay a little bit extra for however many backups that you want. And it's great because databases, quite frankly, scare me because they scare me too. I just don't want to lose it. This the idea of spinning up a Amazon like they host the database on Amazon for you. But the idea of doing it myself and being like out to lunch with it is it kind of kind of scares me. So check out em lab, if you want them to host your MongoDB database, we use it in my node course as well. They weren't even a sponsor at that point. Because I just love using them, they have a sandbox, which is free you don't have to input a credit card number anything sneaky like that, you can just get up and running with a database. And then as you need to scale up as you go to production, you can start using their their their different paid plans that you have, they have got some some pretty cheap stuff. 15 bucks a gig on the shared one or dedicated if you've got some serious traffic being thrown your way I just use a shared one. And I have a fairly high traffic site myself. So check it out at em lab.com and thanks so much to em lab for sponsoring. - -75 -00:44:33,600 --> 00:44:47,250 -Scott Tolinski: Thank you. Yeah, I again, I love it. I mean, we just had to century sponsor the last tasty treat. It's like another service that we use just so much I love when our favorite services reach out to us. So thank you so much for sponsoring. - -76 -00:44:47,519 --> 00:45:50,520 -Wes Bos: So we talked about data in state, we talked about props, just getting a data to it, but like, the another thing about react is like how do you get the data into react components and there's a couple things that that react does. do for you and one of them is routing. And another one is actually data fetching, like, if you're coming from Angular, they had a way to fetch data. If you're coming from jQuery, always use dollar dot Ajax or dollar dot get JSON. In react, it's often bring your own, which means like you choose what it is that you want to use to fetch your data, which I didn't love at first, because I often prefer people just to tell me what to do. And this is the best way to do it. Rather than you have to figure out your own approach. I have that way with file systems as well, where react doesn't really have like a set way to organize your components and stuff like that. I much prefer a convention that this is how you use it, right? But how do you how do you fetch your data? Other than I guess you can, you can explain Apollo. But if it's just like a RESTful API, how would you handle that? - -77 -00:45:50,700 --> 00:46:49,290 -Scott Tolinski: So if it was like a RESTful API, I would have it in like the component did update, and then just hit that API, and then return the data or the error and set that to state and then then have that state being passed in as a prop into a child component, which would then access that data in before like, so I've used things like Meteor before, where they used to have like a mixin, that would go and grab your data from a lick Mongo find on the client side that was really kind of slick. And then there was it now I use Apollo, which is a graph qL API, where I can have my query, basically just in a higher order component, and it just spits out the data inside of a data out of the function from the render prop. And I just passed that down into my children that way. So yeah, again, if you, you know, I would just use the fetch API, although a lot of people use axios, and stuff like that. I mean, what is what what is axios? - -78 -00:46:50,040 --> 00:48:28,440 -Wes Bos: So shout out to Tom and Zahra, who they were like in like Provence, which is, I think, the south of France, listening to our podcasts, which is very flattering. And Tom said, with his ex iOS. So if you don't know, axios is a like, it's like fetch. It's a Ajax fetching library that you can install. And it works on promises. So you can use sink await. And it's really, really nice. So I use axios. Myself, anytime I'm working within Ajax requests, I'll use axios. And the way that it works is that you generally hook into what's called a lifecycle method. We'll talk about that in just a second. And like, generally, when the component loads, you, you go off and you fetch a list of dogs, ice cream, people, something like that, and then that data will come back from the API, you'll set it to state, and then you will pass that into props of your component, or it'll be you'll render it out directly via state in your component. Now, the downside to that is that you have to handle your own error states and your own loading states. So generally, you'll have something in state called loading true or false. And then in your render, you'll check if that Boolean is set or not. And then you'll also have an error state. And that's why that's something I really like about using Apollo. Obviously, it requires you to use a graph qL back end. But if you have a graph qL back end, Apollo handles all of the loading and error states for you so that you don't have to continually do this whole song and dance of is loading. Is there an area to check for all of them set these Boolean true and false. And it's it's a bit of a pain, - -79 -00:48:28,650 --> 00:48:40,380 -Scott Tolinski: easily one of my favorite parts about Apollo, yeah, you just spit out the loading error data and used to be if loading then returned spinner, or whatever. I mean, I love that. It's just it makes it nice and easy. - -80 -00:48:40,650 --> 00:49:20,490 -Wes Bos: Totally. So that's that's data in react, you can kind of fetch it any way you want. You can also use in my wreck for beginners course, we use Firebase, which is a like a real time database. And Firebase is awesome for for learning react, because you don't really need to know a whole lot about the back end. And there's some some really nice packages, one called a rebase, which will mirror some state to what's in Firebase. And it does a sort of like two way data binding. So if anything changes on either side, it will update the other side. And I really, really liked that. And the package just automatically will sync the data of your state with the data of your your Firebase. - -81 -00:49:20,760 --> 00:50:23,910 -Scott Tolinski: So next, we have event handlers, which obviously we're building sort of dynamic things, right. So event handlers are something that you're going to need quite frequently if you're building anything that's actually eaten when he interactive in react, right. So the way that event handlers work is you basically have a property, I guess you'd call it a property or an attribute on your JSX element. And that is going to be the event. You could think of these events as things like on click right, so you have a button and then you'd have an on click, and in that on click equals brackets. And then whatever you want it to do. So typically you're having it run a function or a method inside of your class. And you could just pass that function right in there. Or you could have an inline function in there. That's a nice little arrow function inside of your unclick. On click itself, and you know, as far as events go, it's pretty much just the events that you'd expect from JavaScript, right? It's JavaScript events. - -82 -00:50:24,090 --> 00:51:28,680 -Wes Bos: Yeah, there they are all the standard JavaScript events that you're used to. The only weird thing about it is that they are all in line meaning that like, like Scott said, it's on you have a button and you say on click, which we've been taught for years and years, don't ever do that. But because we are sort of blending our render layer with our logic layer, you do do it right inside. And I actually have learned to really, really like it. So you have it, they do. They are what are called synthetic events in react where they actually listened for every single event on the body tag, or maybe the maybe the document I forget, but they listen for every single event on the very top one. And then those events will propagate through your application. And they just reuse that one event over and over again, for performance reasons, as far as I know. But you as a developer don't really have to know a whole lot about that just because it works fairly similar. It's only when you try to like get into, like stop propagation or bubbling after a couple of milliseconds, because the event is reused. You have to do some some funkiness around that. - -83 -00:51:29,160 --> 00:51:47,910 -Scott Tolinski: What kind of events I mean, obviously unclick. But what other events do you you find yourself using a lot? Because it's one of those things that there's so many events that do exist, but I feel like they go under utilized? Like, yeah, girl, I mean, I guess on scrolls, so much utilized. But there's just some really interesting events that I feel like don't get a lot of use. - -84 -00:51:48,180 --> 00:52:09,330 -Wes Bos: Yeah, I really only use on click on submit, I'll always pop up on submit onto the form element, an on change where you would need to work with form inputs. And I've used like on mouse in and mouse mezza. Mouse enter a couple times, but I'm pretty much just those three, is most of your application. - -85 -00:52:09,690 --> 00:52:13,410 -Scott Tolinski: Yeah, likewise, I've never used on double click, but it exists. - -86 -00:52:15,120 --> 00:52:22,140 -Wes Bos: Yeah, I guess it's not the, the web doesn't really have much of double clicking. So we don't really need to reach for that all that often. - -87 -00:52:22,710 --> 00:52:24,150 -Scott Tolinski: Yeah, yeah. - -88 -00:52:24,330 --> 00:54:56,340 -Wes Bos: One weird thing about event handlers in react and specifically with classes is that if you want to reference the component itself, and specifically the state or the props of the component, inside an event handler, it's a little bit weird, because what happens is like, let's say you have a button component that you've made, and you say, when someone clicks that button, run the internal method called fetch dogs. And when you click that, you fetch them dogs, and you want to put them back into state, inside of your render method of a react component, you can always access this, and this is always going to be bound to the instance of that component. So if you've got six different buttons on the page, this will equal to that instance of the button. And that's great, because each button could have its own internal internal list of dogs, right. And what happens is that when you when you put it in a separate event handler called like fetch dogs, you no longer have access to the component instance. So that means you can't have access to this. And that means you can't say this dot set state, you can't update state, you can't see information about the component, which is props. So that's a bit of a pain. And the way that you could get around that traditionally is you would go into the class constructor, and bind it to this. So you'd have like this dot fetch dogs equals this dot fetch dogs dot bind this, which is just a nightmare to actually have to do that. And that's not a limitation of react, that's just a limitation of ESX classes. So react deprecated, create class and in favor of extending proper ESX classes. And one thing that ESX classes don't have yet is what are called instance, properties. And instance, properties are properties on a on a class that every time you make a new one, every time you make a new button, you have access to the specific data about that one, it's not shared amongst all of the buttons. So the solution is that there's a proposal out for JavaScript for ESX classes to add what are called instance properties. And the little trick is that you can set an instance property to be an arrow function, which will allow you to have this on every single component. So it's one of those things that might not make sense on this podcast. But as soon as you run into it, you go, Oh, I probably need an instance property. And even though it's not part of JavaScript, it's sort of widely accepted as the way that you do event handlers that need to access this word. A lot. - -89 -00:54:56,460 --> 00:56:10,260 -Scott Tolinski: I think it does. But again, it's gonna be one of those things that makes sense to me. you Google it. So next up on the list is lifecycle methods. Which lifecycle methods are something that, well, you have a component, right? Your component has a life, I guess you could say it has the life in the abstract away of things, and not necessarily it's not alive. But your component, basically, it's created and it's destroyed. And in that process, well, it's also updated, I should say, created, destroyed and updated in that process, you have methods that are run at the various stages, for instance, the constructor when the thing is being constructed when it's being created, the constructor runs, right. And there's a specific order to like the order in which these things run, right. So we have these various lifecycle methods from the constructor of the class to get derived state from props, which is a mouthful of a new component lifecycle method. Even render is considered a lifecycle method component did mount should component update component did update, I think the ones you end up using most often are obviously render, but component did mount and component did update, or probably the most used, - -90 -00:56:10,320 --> 00:58:32,190 -Wes Bos: yeah, so anytime you ask yourself, I want to do this when that's likely when you need to reach for a lifecycle method. Because these lifecycle methods are like little, like little like, I like to think of them, like escape hatches are little ways to slip in, as the component is doing its life. And often what needs to happen is that your component will do its initial mount to the page amount is when a component shows up. And then when a component when it's done mounting, that's generally when you need to go off and fetch the data, right and, and that will go off. And that will actually trigger a second rerender. It's not a big deal. But because when the data comes back, you said at the state and then your your dogs or whatever start to show on the page. And sometimes you need to use like external JavaScript libraries that aren't react specific. Like you need to use a DOM library or you actually have to like listen for events. And then what do you have to do with those events, you have to unless it like react handles all of the binding and unbinding for you. But if you're doing something that's outside of react in a react component, you'll likely need to reach into these lifecycle methods and, and listen, and you do your add event listeners on did mount and do your remove event listeners on will unmount. Just before it's about to to leave the page. So there's a whole bunch of these different ones, you probably will use all of them at different points. The component did update I find is also handy if you ever want to say like, okay, whenever something changes about this thing, and whenever some of the props change whenever some of the state changes, and what's kind of cool about that is it will give you the old props and the new props and and the old state and the new state. And you can compare those two things. And you can you can do a little bit of logic, oh, if these things have changed more than 30%, then trigger something, I specifically use that in my react player on my course thing where I want to, I want to save progress for how long someone is, and I listened for the html5 video player progress event. But I don't want to send an AJAX request every single one, I want to send it every 20 seconds. So what I'll do is I'll save the last time that I did it in state and then I'll say okay, if the progress has changed, either way, like backwards or forwards more than 20 seconds, then fire off the the AJAX request to update how far they are in that video. - -91 -00:58:32,430 --> 00:58:47,040 -Scott Tolinski: Yeah, and you always want to be careful. Of course, if in your component did update, if you are modifying the state, keep in mind that every time the state is modified, it triggers a another rerender, which triggers a another component did update and can lead do some infinite loops, right? If you're - -92 -00:58:47,610 --> 00:58:48,300 -Wes Bos: always say, - -93 -00:58:48,300 --> 00:58:59,160 -Scott Tolinski: yeah, make sure it's conditional, right? Otherwise, you could find yourself in one of those, you know, your fan starts spinning up and your CPU starts getting hot, and your website is non responsive. - -94 -00:58:59,400 --> 00:59:53,670 -Wes Bos: There's also another one called should component update, which is really handy. It basically tells whether react should trigger a rerender or not. And that's really handy. Because if you have like, for some reason, if you have like data being like boom, boom, boom, boom, boom, boom, boom, being fed into a component, many times that could trigger like six or seven re renders within a couple seconds. And what you can do in that case is you can return false from should component update. And that will actually stop it from re rendering. And then you have to have some logic in there that will like say, Okay, if it hasn't re rendered in six seconds, or if I now have five new things to show on this page, then trigger a new rerender. And you can sort of manage it there. And in most cases, I don't have to use that. But if it's a specific case where I'm really hammering the component, and I want some like some nice touch, like a light touch on when it renders and you can, you can do the logic in there. - -95 -00:59:53,760 --> 01:00:24,450 -Scott Tolinski: Yeah, definitely. Cool. Next, we have this context, which is a new new ish tutorial. react and basically is a way to have a global state or state or even just data passed from one section of your application to the other section of your application without having to have any sort of, you know, prop drilling or prop go from one to another, to another to another, you can have your state being set somewhere, and you can utilize that state via context. - -96 -01:00:24,570 --> 01:02:28,680 -Wes Bos: Yeah, context is awesome, because it like Scott said, It solves that problem of Prop drilling. And I like to think of context as the data is in the air. And meaning that you can define context at the top of your application. And then you can, you can have what's called a consumer a lower point in your application, and it will sort of like, reach out of the air for the data and, and be able to pull it out without you having to prop draw, kind of a cool thing about that is you can also stick methods in there that handle the updating of that data. So you can it's kind of like a kind of like Redux, we've talked about go back to the episode that says is Redux dead? And we talked about this? And the answer to that is no. But if you just have pretty simple data, and a couple of methods that need to update that data, you can likely get away with putting all of that in a provider, and then reaching for it with a context consumer. I've got a video on this, I'll link it up in the show notes. It's called here's how reacts new context API works. I'm very proud of this one, because it's if you search for react context, on Google Video, it's the first that comes up. Last thing that we have is just routing in react. This is another one of those things that doesn't come with react, you have to reach for an external package to do routing. routing is when a page changes from page to page, what do you do, right? So sort of the big router out there is react router, there is a router built into the next JS framework, which I'm very partial of I use that in all of my all of my applications. I actually just switched over my course platform from react router to a next JS application. And then just in the last week, I don't know if you've heard of this, Scott, but Ryan Florence, who I was, yeah, he's the creator behind react router coming out with It's been seven months since we've had a new router in react. So it's about time that we have something new because I was getting tired of, of not having to rewrite my application. So we have a new one, which is called reach. And it looks as far as I can see, it has a big focus on accessibility, which is really cool. Well, have you looked into this at all, Scott? - -97 -01:02:29,160 --> 01:04:05,670 -Scott Tolinski: I've looked into this pretty heavily. In fact, Gatsby just moved over to reach. Wow, are you sure it's for Gatsby too, I haven't been following that too much other than on Twitter. They did folly merge it in though and reach router. The thing I really like about react router is basically so with react router, you end up having either like a switch, which I think was a terrible idea. It's a switch. It's a JavaScript switch. But I think it's a terrible name for a routing component. But you end up having this router component that wraps around other actual components. Let's say you have a level of tutorials you have, let's say the about page or the homepage, you have the router wrapped around the about component and the home component. And then on those components themselves, you just pass in a path prop and that path prop defines whether or not that component is going to be rendered. So basically, it saves you from having to have an extra route prop that then loads a component and allows you to just load a component itself on a given path, allowing you to pass props into that component, just as if it were any other component instead of having to do a render function inside of a render prop to pass in props and stuff like that. So as far as like, the syntax Marco's I looked at it and instantly was like, I like this, I like this a lot. And then I made an issue in my level up tuts issue queue that says, convert router to reach now. Now obviously with me and refactoring, you know, it's who knows when that's gonna get done, because my applications pretty large, and that would break a ton of things. But I'm interested. I'm very interested. I really like the way it looks. I like the ideas behind it. I like that it's a stability first and all sorts of those things. So - -98 -01:04:05,970 --> 01:04:43,680 -Wes Bos: yeah, I'm just looking at right now. It's like it basically Yeah, like you said, I just have a path. I haven't looked at Doc's before. documentation is beautiful. It's amazing. Only show this component if the path matches this. That's that's very simple. I like that a lot. Impressive. So maybe we'll all be switching over. I also have heard some rumblings that next is going to switch over there internal router, two, two, I heard react router, but maybe it'll be reached at some point. But uh, hopefully it doesn't cause any code changes because you just use whatever it is that next use is under the hood. - -99 -01:04:44,160 --> 01:04:49,320 -Scott Tolinski: Yeah, that's how Gatsby works too. It's just like, kind of takes care of the routing. It's like file based and stuff like yeah, - -100 -01:04:49,320 --> 01:05:20,760 -Wes Bos: so cool. Cool. Cool. I so that's our sort of intro to react. It's kind of fun to be able to do an episode on some of the fundamentals of react and Talk about this stuff. If you've got any ideas of other react episodes you'd like to see, please hit us up and you can pop them in the potluck. If you go to syntax.fm there's a button that says ask a potluck, you can ask them in there and sometimes we convert a potluck to a full meal and do them as a proper proper show or a hasty Yeah, - -101 -01:05:20,820 --> 01:05:33,090 -Scott Tolinski: and we do have to do that view Episode Two, so West needs to its Cummings view. Just Just look over the docks and then I can I can lead the episode. Okay, and talk about it. - -102 -01:05:33,510 --> 01:05:46,730 -Wes Bos: Alright, that's that's gonna happen. People are starting to guess get a angry episode yet. Cool. Um, maybe I'm just afraid that I'm gonna like it so much that I'm going to switch everything over to view - -103 -01:05:47,010 --> 01:05:57,090 -Scott Tolinski: Oh, yeah that like that would be a huge bummer all the sudden there's something wonderful that you have to switch to. What kind of sick pick you sick picking today. - -104 -01:05:57,210 --> 01:07:55,730 -Wes Bos: All right, my sick because today is not a pick. It's a sick ask, which is not a it's a sick, ask, ask. Ask ask. And I'm forever. I hate carrying stuff in my pockets. So you got keys. And I just got it, we got a new car. And the key for it is so freakin huge. I'm so pissed at it. And my wallet. I recently I asked on Twitter maybe a couple months ago for wallet suggestions. And I just want like a nice slim wallet, something that can fit like nine cards because I'm trying to go I'm trying to put all the cards on my iPhone that I possibly can. And then just have whatever it is that I need in my actual wallet. And I got this like it's basically just an elastic band. I don't know who makes it, I'll try to find the link for it. But it's basically just an elastic band. Like not just like a like a broccoli elastic. I tried that. But it kept snapping, but it's like a like an elastic band that you get in like a pair of gym shorts. And it just wraps the entire cards. And I've been really really liking it because it's it's easy to get your cards in and out. And you can also stuff like receipts and stuff in there if you need to. Big fan of that. But now I'm moving on to my keys. Because I when I was a kid and I still do this, like when I was a scenester I would put everything on a carabiner and then like put it on my jeans and I still do that but I sound like a janitor walking around. It drives me crazy. So I I've seen people with these like these, like key management systems where you kind of like, use you flip them out like a, like a Swiss Army knife or something like that. And I'm really curious about if those work well or not and what the different ones are. And it's overwhelming to do research on them. So if anyone has one of these key management systems that doesn't make you sound like a janitor, then hit me up because I've got what 1236 keys that I have to carry around. And I need to be able to have something better than this jingling mess. - -105 -01:07:56,100 --> 01:08:00,780 -Scott Tolinski: We call keys cheese over my house cheese. Yeah. Did you get the cheese? - -106 -01:08:01,730 --> 01:08:03,150 -Wes Bos: I don't get it. Why? - -107 -01:08:03,660 --> 01:08:42,119 -Scott Tolinski: There's nothing to get. I I I've made a habit. I've made a habit of replacing words with other words and my Yeah. And like people who have just listened to me long enough, like know what I'm talking about. And people who don't have no idea what the hell I'm talking about. Like for a long time. I used to drink a lot of Redbull. So but I started just I just started calling it bread bowl for some reason. I just throw it in there. And then I'd be like, I think I'm gonna go get a bread bowl. And like at a co worker be like, it's like four o'clock dude. And my other co worker would just like shake his head and be like now he's talking about Red Bull like, like - -108 -01:08:42,890 --> 01:08:45,770 -Wes Bos: I do. mark of a millennial. I think - -109 -01:08:47,579 --> 01:09:09,229 -Scott Tolinski: I've been I swapped so many words with other words that I think it's like, hugely, probably distracting for some people. I'm surprised. I haven't done it in the context of this podcast before. That's what we it's like a daily thing. We're going on a walk and I'll be like, did you get the cheese? And my wife Courtney, she just doesn't even she doesn't even flinch about it at this point. Like Yeah, I got it. - -110 -01:09:10,590 --> 01:09:22,289 -Wes Bos: Man, that's Wait, speaking of millennials. Another quick pick real quick. I watched the comedy stand up from Lysa slushing her. Yeah, called elder millennial. Do you see it? - -111 -01:09:22,289 --> 01:09:23,369 -Unknown: I didn't. - -112 -01:09:23,369 --> 01:09:25,919 -Wes Bos: Oh my gosh, that's hilarious. She's so - -113 -01:09:25,919 --> 01:09:42,749 -Scott Tolinski: funny we we saw lately. That was also hilarious. Ali Wong's latest. Oh, yeah. Yeah. Especially if you have children. Oh, my God. That is the funniest thing very real world. Yeah. Ellie Wong. I mean, both of her specials were great. So - -114 -01:09:43,079 --> 01:09:56,159 -Wes Bos: me and my wife always talk to her first special she has this joke where she goes, lean in. I want to lie down. My wife always talk to each other. I want to lie down. - -115 -01:09:56,430 --> 01:12:02,130 -Scott Tolinski: Oh my god. Yeah, those are great. So my my sick pick today is a podcast. And this one is really, really interesting. And called. It's called syntax. Oh, it is check it out. syntax.fm No, this podcast called dark net diaries. And if you like, it's like a combination of a tech podcast and a true crime podcast. Because what it does is it it's, it talks about large hacks that have taken place. And these are very, super interesting. And one of them they had an interview with, which which episode was it here, they had an interview with an actual a, like a, someone who works for the government, who hacks like for the government, and they were the smartest person I've ever heard to talk on podcast, they were just like, based on these factors, we were able to determine that the server was running all of these specs in this version of this operating system and had these following exploits because of that, and, and I was just thinking, like, how did you determine that and then she, like went broke through how they determined that and I was just like, dang, this is really like, everything is really smart. But either way they interview, a lot of the people involved. There's some really interesting ones. There's some really like ones, it'll make you think like a, you know, a, there's one with an autistic child who like never had the proper sort of help for him in school. And because of that, he ended up getting like in a lot of trouble doing a hack that he didn't necessarily, at the time understand why it was so bad. And then because of that, he's still paying for it like many, many years later. So there's just a ton of really super interesting things. Some, some very, like high profile hacks have been covered some things you've never heard of it been covered. And it is just really, really, just really fascinating. It's a new podcast, there's only 19 episodes, it started. Looks like it started in September of last year, but they didn't really update a ton until lately, and there's been a bunch of episodes, so maybe one a month or so maybe not a bunch, but they've all been good. Every single one I've watched has been good. So check it out dark net diaries, it should be on any local podcast players. - -116 -01:12:02,130 --> 01:12:05,760 -Wes Bos: Awesome. I'm gonna check that out. That sounds amazing. Yeah, - -117 -01:12:05,760 --> 01:13:02,390 -Scott Tolinski: I'm a big fan. I'm it's one of those ones. You're like, dang it, how is there not more episodes, I want them. But yeah, and shameless plugs, I'm going to shamelessly plug level up a pro, I have a course coming out on react testing. And it's going to cover all sorts of things. We're using react testing library, which is just the very best. And so none of this enzyme stuff. We're using react testing library, we're using jest, we do all sorts of styles of react testing. And we use Cypress for some integration testing. So it's, it's pretty all encompassing, I hope to fill a gap. And what I feel like is, is good testing information for people who don't do a lot of testing. The main angle here is this is for beginners, I explained every terminology, all of the jargony stuff, and we break it down into really, really small chunks. So that's going to be out this month on level up pro sign up. If you sign up for a year you save 25%. So that's pretty sick, level up tutorials.com forward slash pro - -118 -01:13:02,550 --> 01:13:36,449 -Wes Bos: wicked, I'm just gonna plug all my stuff again and Wes bos.com forward slash courses got to listen to every single course that I have, half of them are free, half of them are premium, which is a fun way of saying they're paid. And that's how I support myself. So check it out. If you want to learn anything from react or node server side JavaScript, front end JavaScript, if you want to scale up on ESX. One thing about react is that it assumes that you know, all of these new things in ESXi ESX that i o course you can check out as well. I think that's it for today. Thanks so much for tuning in. And we'll catch you next week. - -119 -01:13:36,600 --> 01:13:50,430 -Scott Tolinski: Catch you later. Peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax67.srt b/transcripts/Syntax67.srt deleted file mode 100644 index 107aa80b8..000000000 --- a/transcripts/Syntax67.srt +++ /dev/null @@ -1,148 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,570 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi ski. - -2 -00:00:25,950 --> 00:04:14,580 -Wes Bos: Oh, welcome to syntax. This is the podcast with the tastiest web development treats. And today is a hasty treat, which is a short version, we usually try to keep it I don't know, between 15 and 22 minutes long. 22.5 minutes is kind of our ceiling on that thing. So we better get going. Today's hasee tree is sponsored by century century is one of the best air tracking services out there. I use century myself I have for a long time. And I actually have teamed up with Sentry previously in my learned Redux course, if you remember if you've ever taken that, and they're back to sponsor a little bit more, so what Sentry does is that it it catches errors on any of your platform. So whether you're running a Python or PHP server or whatever, I specifically use Sentry both on the back end in my node API, and that catches any errors that happen on my server. And then I also run it on the client side, which is extremely helpful to know when errors are happening in my users browsers and and then when an error actually happens, I'm able to aggregate all of those things together, take a look at Oh, okay, it seems like I specifically had a problem once where a whole bunch of users were complaining about not being able to download something on on a download page. And we actually narrowed it down to only users on an iPad. That was two versions old because we're using an outdated version of some library. And it was really easy to figure it out. Because there was, I don't know, 300 people that in the last month have had the same issue. And they were all like 98% of them were on the specific version of an iPad iOS system on it. So it gives you all kinds of like really good insight and allows you just to dig in really quickly and figure out what is the actual error. Some other stuff that they do is they integrate with GitHub, Bitbucket, get lab, all of that stuff, tight integration with Slack, JIRA, pager duty. So if all of a sudden, you're getting all kinds of errors happening, then you can ping off your pager duty and someone can jump in and fix it. Probably my favorite part about Sentry is that it's totally open source, meaning that it's obviously a service that you go and pay for. And you can just drop it into your application in I think it's like three minutes it takes to get up and running in your own application. But if you really want it to host your own, or if you're afraid of a service going away after a certain amount of time and all of your your your data being in there, you'll know that this thing is 100% open source, so you could just spin up your own version of it and, and run your own service for it. So check it out@sentry.io they obviously have a free tier. But what they're going to be doing is if you use the code, tasty treat, which is my favorite promo code ever, they'll give you a two month credit, which is awesome. So if you have like a bit of a bigger web app, the free plan, you can burn through the stuff pretty quickly. So you can get like two full months of a paid plan. And you can really give it a run to see it. That's how I did it my own app. And then after two months, I was like, Oh, this is this is great. It's extremely helpful well worth the price that you pay for it. And also, this is really cool of them as well. It's just such a cool company. They're open source. But if you are already a century user, you can still use the code tasty treat to get two free months, which is awesome. Because I hate was like, oh, but I already have an account. Thanks for thinking of your existing users. Right? Yeah, so check it out@sentry.io forward slash sign up and use the code tasty treat when you are signing on up. Thanks so much to Sentry for sponsoring. Cool. Alright, so let's talk about setting goals. Sticking to goals. Why do you would you set goals, we've touched a little bit upon this back on our like New Year's episode maybe almost a year ago. But now we're gonna kind of get into it a bit more. So you want to kick it off there, Scott? Yeah, let's - -3 -00:04:14,580 --> 00:05:07,700 -Scott Tolinski: get talking about goals. I'm a big goal setter, I set a lot of goals, I set goals for everything. And a lot of times, the cool thing about setting goals is that you don't have to hit them all. And you can aim wherever you want to aim. So if I set goals in life to do X, Y, and Z for everything and different aspects of my life, you know, even if I only hit 50% of those goals in life, or over the cross the next year or something like that, it's still probably more than I would have done then if I didn't set those goals anyway. So really setting goals is just such a powerful way to grow yourself to get things done to move forward to advance yourself and to really just take control of understanding where you're at. So one of the things that we like to talk about here, we I always talk about setting SMART goals. And now you have this smart capitalize. Now I understand the concept. Is this actually an acronym here? - -4 -00:05:07,920 --> 00:07:24,120 -Wes Bos: Yes, it's business school West coming out of the woodwork here. A smart goals stands for specific, measurable, attainable, relevant and time based. So let's give a quick example of that if you're trying to learn to code, and you're specifically focused on CSS right now, a lot of times people say, Okay, my, my goal is to get better at CSS. And that's not a goal. That's a hope. That's a wish, right? And there's no there's no meat on how you're going to attain that or anything like that. So specific, let's go through Smart Passive, so smartest, it's a specific goal goal, meaning that I don't want to get better at CSS, your goal should be, I want to build six things that are based on CSS animation in the next four, four months. Right? So that's a specific, it's measurable. And can you measure if your goal was successful or not? Did you build six things? Yes. Then you pass it? Did you build five things? You almost got there. But at least you can measure it right? It's it's not really good. If you look back after a year, and like, Am I better at CSS? Or like, yeah, Yes, I think so. Kind of there's, there's nothing you can really, you can really prove for that attainable? Is this something that you can actually, like, realistically get done, right? Sometimes you see people come out and say, I'm starting up a YouTube channel, I'm gonna do three a day, right? And then they peter out after a week, right? Because it's just not attainable, right? You have to be you have to be realistic with yourself and in how you're setting your goals relevant. This is about getting real with yourself, whether it's something that you are serious about spending time on in and making it a priority in your life, and then the t is time bound? How long do you have to get the school, right, I'm going to get better at CSS, when what are you going to do about it, right? If you say, I want to build six code pins in the next four months. And that's a really good goal to have, because you know exactly what you're going to be or what you the type of thing you want to build, and how many you're going to make and when that goal actually is going to come due. So you can sort of pace yourself and work backwards from there. So huge fan of smart goals. It's kind of a business II thing. If you do any googling, you're probably going to find lots of like MBA websites that may make you cringe, but I've been a big fan of it in my life. - -5 -00:07:24,360 --> 00:07:54,180 -Scott Tolinski: Yeah, I pretty much only deal in this kind of goal. And I do I set this goes for everything in my life. Right? And they always have to be attainable, they have to be measurable. They have to be everything that you just mentioned there. So I guess, what kind of stuff do you set goals for in particular? And maybe we can dive into some of these and talk a little bit maybe what what our goals are for these kind of things? Is that does that a set? Yeah, we're for you. - -6 -00:07:54,659 --> 00:09:06,990 -Wes Bos: Cool. So I generally have just goals around creating content. So how much content I would like to get out the type of content that I would like to create. And generally that is these, those are very high level goals, because they these courses take so long. So generally, it's about a year ago that I have, and I say this year, I would love to put out two new courses or three new courses, and then I'd like to re record one of them. And I'd also like to matter, I'll make a whole bunch of tweets, maybe 20 Hot Tips on Twitter, and I'd like to put out six YouTube videos, right? So I take a look at this is the type of content that I make. And these are, these are the kind of the amount of content that I think I would like to, to make. And then I also have goals specifically around exercise. And it's more about for me, it's more about just how often I will go and for how long I will go because that just makes sure that it gets me out to the gym, or it gets me out on a run or going out for a walk or things like that. And that's just so that I have sort of a compass that will point me in the direction that I need to go. And and almost like a rule so when I when I should be going and how often I should be going. - -7 -00:09:07,380 --> 00:11:48,300 -Scott Tolinski: Yeah, those are those are things that I am always setting goals for to in fact, when I was doing all the YouTube 100% I had very specific like content number goals, like I need to hit 320 some videos a year or something like that. And I would keep track of to see what what kind of progress and pace I was on. And again, these are attainable. These are things I can do. They're measurable, I know what I'm doing for exercise, I do the same thing. I have goals and things I would like to accomplish. And then once I hit those goals, you know what I reworked my goals. So for instance, one of my big goals was well, I had two big goals and I have a I have like a moleskin of like life goals, which are these big, big goals of stuff I would like to do at some point in my life, right? And then I had much more smaller goals and so some of these things in my life goals was like you know what in life I would like to be able to at least at some point deadlift 300 pounds. I would like to be able to benchpress 250 pounds. You know, these are like things that but some point I would like to be able to do. But then and I'm a smaller level, I would say I'd like to be able to add five pounds to my, you know, workout for this or that every single week. And here's what I have to do to attain that. And you know what I hit both of those I did a 250 benchpress. I did 300 deadlift, and it was like, huge for me. And you know what, I haven't even attempted those numbers since because after I hit those goals, my goals have changed. Now my goals are more about you know, working better to to make myself a more, I don't know, less breakable while I'm breakdancing, which is definitely a thing I get hurt so much, I'm trying to limit the amount I get hurt by really just like sort of padding, those those those things, but I'm also making goals constantly for things like business, right? So we both run our own business levelup tutorials, is my full time business. That's what I do full time I develop I write these, these, the tutorials, I do all the production. And now I'm starting to work with more people and hire on developers and contractors and this and that. But I have very real growth metrics, I use something called profit well as a service to track my subscription metrics and my growth percentages and stuff like that. And I'm hardcore about it, I'm looking at it, I'm always thinking about how I can obtain my goals, how I can reach them, and what these goals are month over month over month. And it's pretty good. It's one of those things that it drives you, right? If I were to make weak goals, and untrackable goals, you're never going to hit them and you're never going to get there. So for my business in particular, it's like I set lofty goals, and I'm I'm heading out to hit them. You know, that's, that's why I'm doing it. So - -8 -00:11:48,600 --> 00:13:42,630 -Wes Bos: totally, I actually, as you say that I just wrote down a whole bunch of mine, as well as, like business goals are a huge one. And I specifically don't have like monetary goals in the business. Because I feel like if I were to say, Okay, I want to, I want to be making X amount of dollars per day. I don't think that like I would know, like what to do to sit down and actually make that happen. But I do know that if I have goals in terms of content and quality, and how many courses I want to put out and frequency and stuff like that, and even doing this podcast, I do know that that will make the the money actually start start rolling in. So I tend to make my my goals more like I one of them that I successfully reached was I wanted 200,000 people on my newsletter. And and I hit that a couple months ago. And I was I was really happy at that. And that's funny because now I don't spend a whole lot of time focusing on the whole newsletter marketing part of my business because I've hit that goal. And I'm happy with the process that I have in place. And it's sort of like lives on itself. And I can move over to again, like last year, I said, I want to have I think 50 affiliates under my belt. So I want 50 people from around the world that are recommending like courses via whatever means that they have and, and I hit that goal that we have there or platform improvement. So every three or six months, I'll go through my own course platform, and I'll look through all of my GitHub issues, because every time I have an idea of something might want to fix or add to it. And I'll say, in the next six months or next three months, these five major things need to be implemented into into the platform. And I like what you said about like you hit those goals, and that's exactly because you're steering towards that. And then as soon as you get there, then you you look up. Okay, okay. Okay, what next? And I think that's really important in moving forward, both in your personal development as well as in a business. - -9 -00:13:42,870 --> 00:15:44,850 -Scott Tolinski: Yeah, yeah. And it's, so again, I have my I have a ton of goals, overall. But one of the things that I've really, really helped me like, realize these goals is this, I'll see if I can link it. There, there was a site that I don't know if it's still being worked on, but was called forever jobless. And they had this worksheet that you could get just by subscribing to their mailing lists. And this worksheet, my wife and I, Courtney, we both did this worksheet. Oh, man, it looks like it might be out I'm gonna see if there's any way you can access that still. But this these worksheets that came out there were like 12 pages and you do things and we would we would redo them every single year, not like as a resolution kind of thing. But we would do them every single year. And these are like big life goals. And so they'll be like, what is the one thing you want to accomplish this year, and then I'll put like 25 smaller sub tasks for that. But either way it was this like huge brainstorming exercise that you could just like, really dive into some of these big, big goals that are these things that you want to accomplish and to refocus yourself every single time you do these worksheets is just such a good good thing to have in your brain. So I'll see if I can find that it's forever jobless. It's a it's the goal. That worksheet. So it's definitely like financially based, but it's definitely a good goals worksheet in general. And we set a ton of goals around things like budgeting, right? Like, budgeting was really big for us when I didn't have a job because I was in between things and level up was still just starting. And, you know, we had a mortgage, we had student loan payments, we had all this stuff, and we got really super into budgeting because we had to, and we were really trying to hit these goals, right, we're gonna spend this much this month on this, and this and this, and this, and we would have to reevaluate every single month what those goals look like, but yeah, we, we, you need these goals, you need these things that are attainable, and measurable, you need to have them, you need to know where you're going. - -10 -00:15:45,270 --> 00:16:50,640 -Wes Bos: Totally. And on the flip side of that, I think it's also and you can tell me, if you have these, it's, it's really nice to have these like kinda like far off goals of where you want to be in life. And whether that's like a house that you want to live in, or some people that you want to help or the amount of work that you'd like to do every single day, everyone has different like, sort of like, oh, man, if I could do anything in life, or if I could have, or if I could live anywhere in life, it would be or if I could visit this as a vacation anywhere in life. And I find it really helpful, and me and my wife both do this is just to actually talk about those goals as if they were they were to happen one day, and it seems kind of hokey, to talk about that. Because sometimes you see people with like, mood boards with a Ferrari on them and stuff like that. And that makes me cringe just as much as it probably makes you all cringe. But I do find it is helpful, if it's something that is very much personal to you, and whoever it is that you're sharing these goals with, I think it's well worth sort of visualizing them actually happening, because I think that helps see them to flourish. And - -11 -00:16:50,880 --> 00:18:53,060 -Scott Tolinski: I think it's a huge thing. visualizing is just, it's one of the most important aspects of this. And it's funny, because I would consider myself an optimist. And so it's really easy for me to be like, yeah, this is happening, even though there's like really no indication that is actually happening. But I think that, that optimism and that that like look at this, like I understand that this is not really happening. But I understand that I'm capable of making this happen. So I'm capable of producing this, this work in this type of work. I'm capable of doing these things. And I have to execute to make it happen. If I don't execute, none of this is going to happen. So you need to be able to visualize and say like, yes, this is happening, I can see it, this is what it's going to look like this is what's going to be like, that pushes me more than absolutely anything else. Now, what's funny about this is that it stresses corny out. Like when I want I'll refer to like, like houses that I wanted to get or like it will be walking and it'll be like, oh, that'd be like a nice house. Obviously, it's way out of our budget way out of our price range. Right? Like she she's warmed up to it now because I think she she sort of gets where, where it's coming from. But for a while, I think it was just stressing her out. She was just like, well, we were never gonna get there. And I'm just like, well, it's it's not that that's like the wrong attitude. But like, if you want it to happen, you have to have it sitting in front of you at all times. And it's funny because now she's she's all about that we're going on walks and we do a daily walk around our little neighborhood. And we're talking about stuff in anytime there's like a house right now that's being built like two blocks up from us. And it's probably like double the price of our house. And she's just like, so like, what would it take for us to be able to move into this house, I'm like, well, you need to take that out of your mind. Because that house is going on market in like a week. Maybe if this is like you know, 10 years down the road, maybe we can live in that house in 10 years, right, but still being able to visualize that. So she's definitely come around in that. And we get to talk about these, these goals as if they're actual potential realities, because that's the only way they're the realities. - -12 -00:18:53,190 --> 00:20:05,550 -Wes Bos: I'll give you another example of that. I think it's really important that you said like, you actually have to like put steps in place to actually make it happen. Because for the longest time, me and my wife, watch, we watch HGTV all the time. And we always watch the like income property one where Yeah, someone buys a house and rents it out and somebody else pays their mortgage. And then 25 years later, you have a free house, right? And we always talk about like, oh, that'd be awesome to get an income property. And we just talked about and one day I was like, let's effin do it. Like let's actually do it like so let's stop talking about it. Stop watching the show. And and dreaming about it actually happening. Like, let's run the numbers. Here's a spreadsheet, how, what are our steps in three or four years, we actually want to go ahead and buy one. And actually that happened, I think it was after we had that talk, probably about four years later, we went out and bought a little income property. And it was really cool to see that like, don't just dream about it and stuff like that, like go we went to open houses all the time, just like we had no intention of buying it. But then I would go to the open house, I would run the numbers about what it would cost I would figure out how much there would be for a rental property and things like that and just by being in it and Figuring out the the actual nuts and bolts to making something happen made it so much more real to us. - -13 -00:20:05,600 --> 00:22:13,980 -Scott Tolinski: Yeah, yeah, I know. And so Courtney has her her doctor, right? She has her PhD. And we had a mountain of student loans from that, right? And I told her that we're gonna get them paid off by this date, right? And she was like, there's no way that's going to happen, because we have that, that that would require this, this and this. And I was thinking, Okay, well, what we need to do is we need to determine, you know, what a monthly contribution, we need to look like to get them paid off by that date, right, you need to then figure out how you can attain that amount of money to make that monthly contribution. And then you just need to go out and do it. But if you were to just say, hey, I want to pay these off this year, or something like that, and there's no, there's no steps, you've not created any steps there. So you need to create those smaller steps and need to figure out how to attain those steps. And then you need to go off and do it. And I'd say today, we're actually we're, we're working at the her loans. I mean, they're almost gone. So I'm, I'm thrilled that I think we're gonna hit that goal. So it's one of those things amazing, it's just, you have to set these mini steps, and you got to make it happen. I really, there's there's one thing in life that I've always really wanted to do. And if you have YouTube, there's this move called the air flare, which is a B boy move. It's really superduper hard. And I went through, and I determined every single micro movement to getting this move, like every single micro movement, it is extremely difficult. And I practice all of the I broke down all the things I built like a helper, which was like an attire inner inner tube from a tire and hung it from the ceiling so that I could hang upside down and try this thing over and over again, I worked my butt off for this goal. And I did it all correctly. And guess what, I never accomplished that goal because things get in the way, right? I yeah, I mentioned my wrists, I got a concussion or this or that. I never hit that goal. But I still hit all of the steps that I needed to get there. And I still did the work and I still put time into it. And I don't feel bad that I didn't get to do it. Because I made as solid of an effort as I could have to do that thing. - -14 -00:22:14,040 --> 00:22:56,370 -Wes Bos: Yeah, totally. I think that's that's really important cuz life, life happens. Like specifically, some of my fitness goals have been derailed for the last couple months. And that's because my kids don't go to sleep. And I've been like, up all night exhausted. You know, like, you're a parent as well. And it's it's frustrating, but it's it's okay to have those setbacks because like Mike, I still I'm still on the right course, I'm still pointed in the right direction. And I know that I will be able to get back on these goals and whatever. And it's important to me that I know that this is this is the direction that I'm heading. And any anything where you you come short of those goals, you know that it's okay, as long as you're pointed in the same direction. - -15 -00:22:56,580 --> 00:23:13,620 -Scott Tolinski: Yeah, absolutely. So when do you personally go about setting your goals because I like to do goals frequently. Again, we mentioned I do that yearly that yearly worksheet, but when do you personally like to set goals, I have a little thing here I like to do is a little trick or a little a little thing I like to do. But uh, - -16 -00:23:13,650 --> 00:24:17,970 -Wes Bos: yeah, most most stuff for me is, is on the shorter term. Because anything bigger than, I don't know, a year, even I, most of my goals are like, weekly, this is what I'd like to get done at the end of this week, like, right this week, my recording my butt off, and I have, I want to record, I think like 22 videos this week, I have it all laid out. And that's my goal for today. And and then I work backwards, I need to do this many per day. And that's kind of what I'm working at. But then I also have like three months goals things for courses that I want to work on courses that I want to put out in the next three months course platform improvements, I don't want to do delegation is another big one for me, where I wanted to this is about a year ago, but I wanted to delegate all of my support to somebody else. And now I'm working on delegating a lot of the the feature development of my platform to somebody else and and then obviously, I do have yearly goals as well. Those are very high level. And they're more like, like I talked about earlier how many courses I want to put out and kind of what's things that I really want to focus in on my time on for for that week. Or that sorry that year. - -17 -00:24:18,120 --> 00:26:20,700 -Scott Tolinski: Yeah. So I do that I do. I do sort of the yearly thing we do these daily worksheets I do definitely weekly goals I go through is usually Sunday night, I take my to do list and then I see what I didn't get done from the previous week. I reassign them to different dates and times. I like really nailed down the things that I'm going to try to accomplish and actually put days and times and things to them not like hardcore scheduled, like, I'm going to do this between nine to 930 on Friday, but more like here, I'm gonna do this on Monday, Tuesday, Wednesday, Thursday, Friday or whatever and have that list ready for me to go for the week. And then I sit down at the beginning of each day and sort of assess that list and see if that's like accurate to how things are I get through it right. But I also do this thing I like to call monthly resolutions. And I approach resolutions like a new year's resolution every single month. And I sort of evaluate things and I look back are the things that were important to me last month still important to me this month? And if so, what kind of progress Have I made on them? And this is like less concrete and more like more like realigning yourself, because you often feel that way, with yearly resolutions, right? You say, Okay, I need to realign myself for this year. But I like to really approach that in a month to month basis is like, this is what's working, this is what's not working, let's change course here. Or maybe my goal of recording a whole albums worth of songs isn't really happening. And I'm not feeling that right now. I feel more like let's do some JavaScript stuff instead, right? So maybe I'm gonna focus more that way. So these monthly resolutions are hugely important to me. And then also at that point, I occasionally will break down smaller goals and within those, and those are actually my smart goals within those monthly resolutions. So if my resolution is for this month is to get, you know, 100 new subscribers on level of Pro, then my monthly goal will be to record this series, do this kind of advertising, do this kind of outreach, do this kind of free content, or whatever, as steps to obtain that goal. Right. So yeah, I love these little monthly resolutions. It's something I've been doing for a little while now. And - -18 -00:26:21,690 --> 00:26:28,920 -Wes Bos: that's really cool. I like that actually, I kind of maybe will adapt that myself. Do you do it on the first of the month, every month? Or? I how do you do that I - -19 -00:26:28,920 --> 00:26:51,840 -Scott Tolinski: sort of do it right at the end of each month. Okay, so just towards the end, whenever I, I prefer to do a lot of this stuff on it's funny, I prefer to do a lot of this stuff on like, Sunday, Sunday evening, after the Landon has gone to bed, and I can just Yeah, really have some time to myself, that's not, you know, scheduled in any sort of way. And just yeah, sure, and take some time to just marinate on it a little bit. - -20 -00:26:52,050 --> 00:27:34,230 -Wes Bos: My wife and I actually have a, we've got one more week of vacation coming up the end of August, and we are bringing her like we're going to the cottage with her mom and her sister. And part of the deal is that they're going to take care of the kids like noon or something like that. So what we're doing is me and my wife are doing professional development from 6am to noon every single day. And we're really looking forward to that, because it's gonna be time that's not for like working on the business or whatever. But it's going to be time just for thinking like setting goals, professional development, my wife has a whole bunch of audio books she's going to do, I haven't yet figured out what I'm going to do yet. But it's just that set aside time. That's, that's for this kind of this kind of thing. - -21 -00:27:34,410 --> 00:28:20,880 -Scott Tolinski: Yeah, it's important to set aside the time make it happen and, and just let it let it permeate into you and all that sort of good stuff. So I guess last thing we want to talk about is accountability. And what are some ways that you can hold yourself accountable? I mean, I think even just the process of creating these smart, obtainable goals, attainable goals, whatever these things that are in lists, the things that you can look at, and the things you can track your progress on. I think right there is like such the biggest barrier for accountability in general. Because if you have this ethereal goal that just sort of like out there, right? And you Well, I didn't hit it. Okay. That's like a sure sign that you didn't have the proper steps set up to hit it. So I think keeping yourself accountable is partly and just creating excellent smart trackable goals. - -22 -00:28:20,970 --> 00:29:17,850 -Wes Bos: Yeah, exactly. Just being able to measure them, like we've said, right, it's very easy to tell if you have a goal or not. Another way is I like to just tell people about goals that I'm working on. And it's kind of a benefit, like, I can talk about them on this podcast and lots of people will will follow up like a couple about a month or two ago, I mentioned that I would love to learn a little bit more about solar and every now and then someone Hey, how's the solar going like anything like this or I'm doing it myself? The I always talk about what course I'm working on and it's coming up and that gets people excited about it. And that also kind of holds me to it because people are constantly asking about it. Right now my advanced react ones a little bit overdue because of a whole bunch of reasons but people they really hold you to it and I'm working my butt off right now because people really really want this thing so it's it's nice to have other people tend to hold you accountable to these things otherwise they're they're just gone wishy washy. Yeah, - -23 -00:29:18,060 --> 00:30:31,020 -Scott Tolinski: absolutely. Another thing I really like for accountability is this saying that we always say in the B boy world is like the don't talk about it, be about it. Like you don't want to talk and say that you're the best at what you do. You want to show it right in like if you're an A B boy battle, and you're in a competition, right? You talking in letting the other people know that you're the best is not going to win you that competition. So there's no point in talking about it. You just have to shut up and get your work done and make it happen. Right. And then you can talk about it afterwards. You can you know, if you you're the greatest after you won the greatest thing in the world, you can say that I'm the greatest but like until it happens, don't talk about it. And even I think that goes for a lot of things, right? Like, so many people, they just express their their plans, and they talk about their plans. And as if it's already happened, I'm, I'm the CEO, I'm the boss or whatever on Instagram and stuff like that. And like the people who are actually doing that stuff aren't out there talking about it and are out there saying that I'm the boss and CEO, they're getting it done, right? Unless, yes, they're like selling a book on the subject. And then maybe that's just part of their branding. But like, for the most part, the people who are working out there and doing the real work aren't out there bragging about it, you know, - -24 -00:30:31,530 --> 00:30:35,910 -Wes Bos: totally agree. So I think we're over our 22 and a half minutes. Oh, no, we're - -25 -00:30:35,910 --> 00:30:38,760 -Scott Tolinski: at 32 and a half. Yeah, clock. - -26 -00:30:39,000 --> 00:30:54,930 -Wes Bos: Yeah, me too. But whatever. This is our show. We're like Netflix, we can make it as long as we possibly want and hopefully you're still listening. If Wait, we should do a hashtag. I always like that when people if you reach the end of this podcast, do hashtag syntax goals. And and tag Scott and I. - -27 -00:30:55,350 --> 00:30:56,310 -Scott Tolinski: Nice. - -28 -00:30:56,880 --> 00:30:59,100 -Wes Bos: Nice. So anything else to add for today? - -29 -00:30:59,190 --> 00:31:36,210 -Scott Tolinski: I don't have anything else to add. Make goals. It's important if you want to, like people always ask, like, seriously, I hit somebody in the level of slack room, which by the way, if you're not on, there's a little tutorial, slack room, it's on. There's a slack link at the footer of level up tutorials. COMM I hit somebody in there be like, I don't understand how Scott gets so much done. I'm convinced he's a machine. And I'm like, I'm not a machine. I'm not I don't get that much done. I'm like not that efficient. But I do make really goal. Like I make strong goals. I track them and I work on them. And I work hard. So I think that is the key to getting a lot done is to make these goals and to work at it. So that's all I got. That's the last thing I have to add. Yeah, that's it. - -30 -00:31:36,510 --> 00:31:40,560 -Wes Bos: Awesome. That's it for today. We'll see on Wednesday, already. - -31 -00:31:40,770 --> 00:31:44,360 -Unknown: Who's we what are we talking about on Wednesday was a little hint - -32 -00:31:44,610 --> 00:31:58,610 -Wes Bos: on piece. We are talking about design tips for developers. I'm really excited about that. So like these are things that you as a developer who might not necessarily be a great designer can put in place and make your stuff look better and work better. - -33 -00:31:58,830 --> 00:32:03,930 -Scott Tolinski: Yeah, so good hype about that. It's a good episode we just recorded and I'm a big fan. - -34 -00:32:04,200 --> 00:32:06,630 -Wes Bos: So Alright, let's see on Wednesday, peace. - -35 -00:32:08,340 --> 00:32:10,560 -Scott Tolinski: Head on over to syntax.fm for - -36 -00:32:10,560 --> 00:32:12,240 -Unknown: a full archive of all of our - -37 -00:32:12,240 --> 00:32:18,150 -Scott Tolinski: shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax68.srt b/transcripts/Syntax68.srt deleted file mode 100644 index 9092176fa..000000000 --- a/transcripts/Syntax68.srt +++ /dev/null @@ -1,156 +0,0 @@ -1 -00:00:01,319 --> 00:03:42,720 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. Welcome to syntax, the web development podcast with the tastiest treats around. In this episode, we're gonna be talking about design tips for developers, we're going to be talking about the little things you can do to up your game on the design side and make things look a little bit nicer on your projects and how to just overall improve your development and design skills as a dev here with me, as always is a West boss. Hello, everybody. Good to be in your ears again, I guess. Yes. Good to be in your ears. And I am Scott to Lynskey. This episode is sponsored by Sanity, which is a bring your own front end style, headless CMS that is really super cool. And m lab, which is an excellent, excellent, excellent modern way to host your databases. So we're going to be talking a bit more about those two sponsors later on in the episode. So what is entity a sorry, I'm doing great. I'm just curious is I'm just googling what a boy is a bring your own front end. Yes, that's a pretty funny, but yeah, I'm excited to have Sanity on actually just looking at Sanity dot aios landing page. And it's actually a fantastic example of a lot of the little design tips we're going to be talking about today. So if you are sitting in front of a computer, maybe how that one open as we're talking about these these tips today. Yeah, they have a pretty key website here. I'm a fan. Yeah. How are you doing today? I'm doing good. Yeah, I'm doing I'm doing good. I've been working. You know, I've been trying not to work on the weekends and stuff. And then I spent a lot of time if you saw me on Instagram, I was just like, designing, redesigning things. And like last night, it was like eight o'clock. And I'd already just I had already redesigned so many things on the site. And then I was like, You know what, I wonder what would happen if I just changed the background color of my site. And I changed the back color. And it actually, everything came out pretty good. And then so I ended up doing some more tweaks. And that's like, you know what, I wonder what happened if I read it and stuff and the nav here. I hate the nav. Let me just rewrite the whole thing from scratch. So then I rewrote the nav from scratch. designed it it's none of it's live yet. It's all going live very soon. But I I just ended up doing so much unexpected work, but it was all fun work. You know, like, love that. Yeah, yeah, it was like creative flow work instead of, you know, usually like to take my Sundays to wind down and do something either like creative or play some video games or something like that, like I'll work on music or something. And, and this felt like that it felt like play like I was getting to just, you know, just throw things to the wall and see if they stick and try him out. And I think it's a good little side conversation for this this episode. But I thought it was like one of those things that just really fun. And I think the results are gonna show once I push some of these updates up. That's true. I always love when you go on those little tangents where you're just like, Oh, this is fun again, and I'm really enjoying like, like, it feels good. Because we've certainly been there where it's really hard to design something. And it's extremely frustrating to sit there and spin your wheels for hours on end. And at the end of it, nothing looks good, right? So it's fun to have those breakthroughs. I'm just actually looking at your I just inspected element on your purple because I thought you had changed already. And you have some CSS variables called purple and dark purple. Yeah, I have an extra purple too. But the extra extra extra purple in the footer that that really dark one but it's uh i'm actually sort of phasing extra per bout. But yeah, rest in peace, extra perk - -2 -00:03:45,150 --> 00:04:05,340 -up and smoke. Yeah. Awesome. So today, we're gonna go through all of these little design tips. This guy and I are not the best designers in the world. But and this is not a show on like how to rock your socks off or a show on how to put the golden aspect ratio over everything or 12 degrees, or everything. - -3 -00:04:06,360 --> 00:05:00,000 -It's so sure you can overlay it in it and you seem smart. Or if you were to overlay a bunch of angles on top of a logo and talk about how those things are, I think what real designers do. And those are really important things that that people go to school and study for them. But I think that if you are just a web developer trying to make your stuff look decent, there are a whole handful of tips that if you just take these into account, your stuff is going to look nice and date better just by doing it. And I think that's what a lot of us reach for because a lot of people use like bootstrap. And then they try to slam their own green into something and change the font and it just looks like not great. So hopefully these little tips will help you improve your designs and make the at the end of the day. We want to make your web apps a little bit more enjoyable to use. Yeah, absolutely. - -4 -00:05:00,570 --> 00:09:59,970 -And that's the whole thing is that I think personally, for me, when I stopped doing things like, Alright, I have to apply the golden ratio to this, I think that's when I got much better at designing because I was following other rules and patterns and visual things rather than trying to adhere to some sort of, I don't know, arbitrary sort of rules or something like that. But the stuff that we're going to be giving you today is all going to be little things that you can do that will Yeah, it's going to take your stuff, and just, I don't know, I will, it's going to add that nice and fit and finish to it, I think that's one of the things that I've learned through a long time of designing things is the last little bit can make such a huge difference. Like I always stopped too soon. And maybe that's why my stuff never looked as good as it could, because I just stopped one or two revisions or, you know, little things, tweaks or whatever, before I should have stopped totally. So we're gonna break it down into just general design tips that we have UX design and animation tips that we have, and then ended off with how to get better. And again, these things are not rules, take them with a grain of salt. But these are things that have worked really well for Scott and I. And they're things to think about when you're you're doing your own design, and they may or may play into making your own design look better. So first one, I think this is probably the most important tip, it's probably the simplest, we're gonna get into some more tips and tricks. But the most important one I think is spacing is consistent. Lots of spacing and consistent spacing. So often the trouble with with designs is that things are just too cramped. And you know, you as a user, don't you don't necessarily feel you don't necessarily visit a website and go, Oh, this is too dense. This is too information dense for me. But when you are using it, it gives you sort of this uneasy feeling sort of anxious feeling that you're like, I don't like using this website. And almost always, if you were to select all of the major elements on the page, crank up the padding, if it's text if you're to crank up the line height, and just add a little bit more breathing room between every I say breathing room, I laugh when I say that, because when I did a lot of client design, that's, that's what they would use, then they would be like, can we add a little bit more breathing room besides something and you'd have to translate? What does breathing room mean, into like, actual technical term wasn't margin was that padding? Is it? Is it line height? Is the text too long? Things like that? Yeah. So adding more spacing, much more important, in my opinion. Yeah, it's actually it's funny that you say that, I think like, identifying what clients really mean, when they give you feedback is one of the most difficult things that because they don't speak the same language, right? Like I had a client, a client, say like, this looks a little cloudy, could it look a little bit more sunny to me like and it was like, it was already like very saturated and bright. So I was like, I have no idea what the heck you're talking about? No, yeah, that makes a good designer, I think being able to hear what your client is saying. And obviously your clients trying to help you and to say, I think it needs this, but it's your job to decipher. Okay, they're they're feeling that this is hard to read, right. And it might not be the actual copy that they wrote, it might not be the font that they may be saying, Let's try a new font. But it might not be the font, it might just be that the lines of your text are much too long. That's a commonly known thing where if your text is is too long, if you have too much width on your your text, then it gets too hard to read and your person is shaking their head and left and right to actually read it. And maybe just by making it a little less wide, putting in some margin or padding on the left and right of the text, maybe adding a little bit more line height, then you bring it back to them and say Hey, what do you think about this, and it's important to try those other things unnecessarily just try to implement it. Otherwise, you're, you're just a pixel pusher at the end of the day. Yeah. According to this website, Bay marred.com. I don't know if this website is the blog, but they said some usability research saying that the optimal width is 50 to 60 characters per line. And here's another UX Stack Exchange that also says the optimum width is 50 to 60 characters per line. So based on how large your text is and everything like that, this should give you at least a little bit of a guideline to figure out what's too wide and what's not wide enough. The next one I have up here is using patterns and texture and this is more of a personal preference. This is more of I guess to say my style of approaching things is I use lots of patterns and lots of texture in my stuff. And I always make sure that they are as subtle as possible. So if you have a div and the background is yellow the way to sort of make it better or to make it like look a little bit more polished that fit and finish I find is you can go off and find some repeating patterns so I like to use I use for the longest time I use this website called subtle patterns. Yeah. Pull it up subtle patterns was huge and they seem they got bought by top towel. - -5 -00:10:00,000 --> 00:10:46,170 -And it seems like they're still fairly consistently putting out new patterns. But there's they're only putting them out in PNG style, which Yeah, is a bit of a pain because SVG is now the best way to go for many reasons. First of all, if it's SVG, you can quickly easily change the color of that pattern. And also, it's going to be much smaller to download a file of that size. And and the third, they will scale infinitely, so you can have them any size that you want. I always have to bring these patterns into sketch or Photoshop or something and change them up myself before I put them in. And with an SVG pattern, it's much easier. So that's a good one. Yeah. Okay. So I met Steve sugar at Lera con, which I said last time, I said, Steve Chicago, and he gave me shit for that. - -6 -00:10:47,850 --> 00:13:26,130 -I mean, what is this podcast? If we're not messing up your name, I know, that passage. That's what people are now making jokes on on this syntax, FM, Twitter that I we all mispronounce everyone's names, which I think is hilarious. So he has this. He is Steve is awesome. We'd be remiss not to mention him in this podcast because he is king of the design tip. So he's sort of taken my like, JavaScript hot tip and done it InDesign, and it's it's nuts. He's went from like, like 2000 followers to like, I think 35,000 followers in just a year, he's working on a book with Adam wathan called refactoring UI, which is going to be pretty, pretty cool. And he has, the way I found out about him at first was that he has this awesome website called hero patterns. Oh, so he has been a hero patterns. Okay, yeah, yeah, here's my hero patterns. And they're all SVG patterns, which allows you to change the color and the Opacity and the background right on the website. So you can mess with them right there, download the SVG. And you can always change them around later in the code. So I'm a huge fan of hero patterns, I use them on quite a bit of my own websites, they're all infinitely repeating. So you don't have to worry about making them repeat. He also has something called hero icons, which is hero icons. And that's like a, that's a paid one that you can you can buy a whole bunch of really nice icons, he's behind a lot of the design for all the Laravel stuff as well. But he's, he's sort of all over and his stuff is is fantastic. So I highly recommend you check out hero patterns, if you're looking for some sort of pattern to add here. Because that's a whole nother skill as well, like I, I do not have the skill to create a pattern myself, I can just find them online. There's another really good pattern website, if you want to make your own custom patterns, there's this website called flat icon Comm. And they have this huge database of different icons, and they have this website pattern dot flat icon, comm which will allow you to just search their icons and just drop them in and make your own pattern. So if you go to my learn node.com course and view the list of videos in the background of that is like a little pattern with like, a little CSS and a little security guy and a little magnifying glass and a little coffee cup and I sort of made the you can make your own repeating pattern in this tool on it's it's awesome. It's very subtle, but I every now and then I get emails from people asking, Hey, how did you make that cool little pattern? Or where did you get that and this tool is is awesome, because you don't have to worry about actually making your own patterns because it does all of the repeating and slicing and dicing for you. Interesting. Yeah, this is cool. I just made a pattern out of hamburgers and broccoli. Now, - -7 -00:13:27,300 --> 00:15:00,000 -actually, this this whole like repeating pattern I initially got from Sentry, which is a one of the sponsors of our show, if you go to sentry.io in the background of their their purple, they have like the Sentry logo, and like a little cloud and a 404 and like a broken phone and like all kinds of stuff. And I was like, Oh, hello, yeah, it's great. It's clearly a custom pattern that was designed for them, probably by one of their designers. And I just love that. And I was like, I need a custom pattern for one of my courses. So those little little touches, they're not noticed by everybody, but the people who do see them really appreciate them. And I just see that and I go Okay, there. It just makes me feel so much better about a company because they clearly paid someone to work on this like custom pattern. I thought that was really neat. Yeah, yeah, it's funny. My my design style circa web 2.0 was like, just throw a subtle pattern on it and call the day. And little did I know, I was like not doing it well at all. I mean, I was just like, here's, here's my like template for starting a website, you grab a color, you grab a subtle pattern, and then you just put a white square on top of that and then put a drop shadow on that white square. That's your website. That that was my go to. That's awesome. Another fun one that I remember. I don't know if you were you remember this, but there's this website called squid fingers. And maybe the people who have been web developers for like 12 years or something or 15 years are are probably being being like yes, squid fingers because like that was the way - -8 -00:15:00,000 --> 00:15:16,500 -website that you went to to get all of these custom repeating patterns. And you would download this tiny little GIF, and then it would repeat over and over and I just searched for it. I don't think that is any longer a pattern. Yeah, our website has a lot of weird stuff that came up when I search for squid fingers. - -9 -00:15:17,970 --> 00:19:49,530 -A lot of questionable images. Oh, yeah, you want to be careful there Oh, somebody posted the the archive.org link to squid fingers. And this was way back when I use Photoshop and use use iframes to change the page. That was a long, long time ago. But I was I used to love using squid fingers patterns. But what else do I use in terms of patterns. I also am a big fan of texture. So if you go to the upcoming react advanced react website has like the best little speckled texture inside of it. It's a little bit frustrating to use patterns because they have to be PNG, because they need that sharpness. With SVG path. svg textures, they never look the same. They're never they don't have that like really nice speckled look to them. So I'm a big fan of something called True Grit texture supply. And they are mostly paid. So you do have to pay for them. But you can download them a you can get these I think they're usually Photoshop documents and then a couple other but they have the best little textures, whether it's halftone texture, whether it's a little bit of grunge, I love putting grunge and everything. And just by adding that to your background patterns or something like that. I feel like it just gets a little bit better. That's a bit of a throwback for me though, because like I was obviously a hardcore kid when I was growing up. And we put grunge on everything. And I've never been able to shake the love. Yeah, crunchy. Even the syntax on FM website has a little bit of grunge in the background. I used to put a paper texture and a lot of stuff because I thought like crumpled paper because I thought it just Yeah, a little bit more, more 3d. What looks okay, so in this repeating this, right, because these textures have to will they have to repeat at some point, right? Or are you just stretching them to their capacity? Or like how was the image that you're using, because I haven't used like textures in design a long time. So what I'm doing in my advanced in the syntax FM website, the texture is very minimal. So it actually does repeat, but what I'm doing in the advanced react is that I have two PNG textures. And those sit on top of a very subtle gradient that's green to green to lighter green. And then I anchor the two textures, I think they're about 800 pixels high by 500 pixels wide, okay. And I've really cranked them down in so that they load fast, but then anchor them in the top right in the top left hand corner, and then and then they're fixed. So as you scroll, the content will just go over top of them while the I think that the the gradient still scrolls. So it's hard to it's really hard to repeat a texture because they're obviously not repeating. So in those you need to anchor them off of something or or anchor them and overlay them on top of something else. So it looks like the thing it's casting on is a little bit dirty. Word. Cool. Yeah, it's one of those things that like it was it was the hotness for a while and then flat design came in and it wasn't the hotness. And then yeah, now that I love this sort of this, this this time in web design in general, because what we're seeing is, is that it doesn't really matter. You know, like for a long time there was these like really hard trends like and i don't i there's definitely trends right now. But I don't know if there's like hard trends, you're not seeing everyone do one thing, you're seeing a lot of combinations of styles. I mean, you're seeing some like really mainstream stuff use brutalist design and some really cool ways. If for those of you don't know brutalist design is like, I don't know, I describe it. It's sort of brutal. It's very, like hard everything hard colors, hard edges. It's sort of just very hard. I just google brutalist design and you'll see what I mean. It has its I think it has its origin and architecture. But yeah, there's people are taking different design styles in the sort of merging them into create all sorts of brand new stuff. And there's not like a, you need to do it this way. Sort of style right now. Yeah. Well, one of the designs that is is really popular right now. Is these like, very, I don't know if what you call it, like smushed or or wide. foncier, you know, the new Dropbox? Ooh, yeah. And definitely not a fan of it. But I might just be I might come around to it in two years. And that will be the thing, right? Yeah. Right. Who knows? Yeah, there's also all over like Instagram or whatever you have, like really heavy shadows, curved, like I see the same design over and over and over again, with just different content for like, oh, here's a here's the design for a movie app and it's like the exact same as someone's Facebook redesign and the exact same as someone's Instagram or they're all like, - -10 -00:19:50,550 --> 00:20:00,000 -Okay, so let's get into more tips here along with that, I guess is the use of gradients. And now it took me a little while to really feel comfortable using gradients again, after - -11 -00:20:00,359 --> 00:25:00,000 -The whole flat design sort of transition. And for a long time, I used gradients and they weren't very good. And then I started using gradients. Recently on level up, the first one I did was in the backdrop for like the login screen. And this gradient light goes from a teal to a purple. And it's sort of a weird angle. And the fact that it does it at a weird angle, like totally changes it to me, it makes it feel like not, I don't know, just not a not a, an extreme gradient, I think that was the whole thing with gradients is that before they used to be so extreme and obvious, and I think the use of subtlety and gradients is so huge, like the header on level up tutorials, comm or like the whole background color where it goes from the light purple to a slightly darker purple. That's like a really subtle gradient. And it adds just a little bit of something that wasn't there with the totally flat purple background. So I mean, I personally love these long or wide, big sort of subtle gradient usage. I mean, obviously, if you're going for like a specific look like a more dramatic gradient can definitely be be super cool as well, too. I'm just looking for this website used to be called gradient phi. And it really showed me that you can use multiple gradients at a single time. So if you don't know, the CSS background image property allows you to set as many backgrounds as you could possibly want. That's how I'm able to do those two background patterns on a single element. But as CSS gradient also counts as a background image. So somebody figured out that you can just layer gradients on top of each other. And as we talk about these crazy things, you should also be wary of performance. Because if you're glaring a lot of stuff that has to that takes a lot for your computer to actually paint it to the screen. So obviously be wary of that. But you can use multiple gradients to get like a really nice, the key I think is having a very subtle, but as Scott said, if you put them on an angle, if you put a couple overlapping on top of each other, if you have two or three gradients, and then and then put a pattern over top of it. And it's very, very subtle, it just gives you that this feels good feeling rather than your your standard top to bottom gradient where you go from one color to another harsh color that I think people were kind of burned from that after web 2.0 came around, where you have these very these buttons, that would would be like super hard gradient. So I don't know what the website is for grading gradient phi anymore, or it let you do multiple it's it seems to be a spam website now that if I go to it, I had it bookmarked. Another one I really like is my color dot space forward slash gradient. And that will, you can just like generate a random gradient and then choose the different angles and stuff. And it will, it'll animate them for you, which is pretty neat. So check out that one, I'll put the link in the show notes. Word. Cool. Another nice thing you can do is use of subtle drop shadows. Notice how a lot of the things that we're saying here is like subtle, subtle use of past subtle use of gradients, subtle use of drop shadows, because if these things become less subtle, they start to overtake, right. And I love using drop shadows for a long time again, in the flat design thing, the drop shadows were out, right, nobody wanted to use them. And now I think you'll see you see, well you do see shadows all over the places people play a little bit more with depth. And if you can level up tutorials, I certainly love to use shadows, I love to like break the barrier between two areas of content by overlaying and using shadows and stuff like that. So I'm a big fan, I use fairly subtle shadows. One of the things that I really like to do is this tip that I noticed from the material design guidelines, this was the in the material design guidelines, they use multiple shadows for all of their elevation levels. And I really like how this this actually produces look where you end up having. Let's say for instance, you have a shadow that's zero on the X 10 on the Y 20 on the blur, and then it's at like 10% opacity of black, right, so then you have this like larger puffy year shadow. And then you have a more focused one where you have an SEC shadow just 066 at 10%. And because those shadows are both at a really transparent percentage, they end up working with each other in a way that is much better than just having one or the other. To be honest, it looks more real world. I use drop shadows and tech shadows in all my designs all the time. And like Scott says subtle is very, very important. I think what you see is that people throw it on and then it sort of looks like like Microsoft word word are because the the shadows are very harsh. And one little tip that I have for making sure that they're subtle is don't just use a black shadow or don't try to figure out what it is because if you yourself have a shadow on something, what color is your shadow, it's not black, it's just a darker version of whatever it's being cast onto, right. So I like to always use my shadows as just RGBA 000, which is black and then set the opacity level to like very, very low like 0.1 or two - -12 -00:25:00,000 --> 00:30:00,000 -0.05 even. And that will give you a very, very light shadow over top of it. If you're really concerned about performance, I've never never myself run into an issue with this. But some people will say, figure out what that color should be. So what you could do is you could set it to this color, use a color picker to actually figure out what that is, and then set it to a hard hex value or RGB color value. But big fan of the the opacity or the alpha channel in RGBA. Yeah, me too, I think are having a very transparent shadow is one of the nicest ways to do a little shadow there, I think it's essential, along the same lines of putting black and white on top of colored buttons is almost always a bad idea. They can look good, but usually they can be they'd be a little bit hard to read. So if you have like a red button and you want to put some white text on top of it, a little trick you can do is you can either make the text a little bit see through so that it changes to like a red or you can figure out what that red will be. Or you can put a very subtle drop shadow on the text one pixel down one pixel to the right and and make it a little bit see through and then that will allow the text to just just pop off that a little bit. And it will make it so much more readable. You could also use the back I think maybe six or seven years ago, it was really popular to do it. A drop shadow that was negative one pixel to the left and negative one pixel to the top. And that made the text looks like it was like stamped into it. Yeah, I use that. Yeah, I was all about that. I was I use that on every single button because you want it that was during the what was the word for that word science felt like real things. skeuomorphic skeuomorphic design that was back when everything like all the app icons were these like very like Steve Jobs, call it lickable design, that all went away as soon as flat design came came around. And that seems to have been sticking around for a while. And I'm very happy about that. But I still definitely do use the the drop shadow, even on websites where I'm keeping most things flat, just because it aids in the readability of your buttons. One other tip I have is you can also insert a box shadow. So if you have a div and you have a shadow on it, you can you can set a second shadow that is an inset. And that will sometimes be if you need to clearly differentiate an item from its background. Sometimes that is a good thing. A lot of people don't know that there's a you just pop the keyword in set before your box shadow and then it will grow from the inside of the element rather from the outside out. Yeah, I like inset shadows. I use them quite a bit. Yeah, I love me some shadows. And one of our sponsors today actually has some really nice little shadows on their website. sanity.io. I actually we mentioned this earlier that their their website was really nice looking, they have like, it's sort of this a hole, it's pretty flat going on. But then anytime they're using a device, they're using a shadow to rest on top of the design. I like that it's like pretty much like one specific thing to feel like it but sort of tangible sitting on top of it. So our sponsor today is sanity@sanity.io. And we mentioned it's a bring your own front end headless CMS structured content done right. This thing is super cool West, you want to tell us a little bit more about Sanity and maybe what they put together for us to experience Sanity. Yeah, so every time we have a new sponsor, there's been a try to spend a little bit of time trying to like fully understand what is the product? And how can we best explain it. And what they did is they actually went out and made us entire, they have this thing called Sanity Studio, which is is sort of the back end CMS for your content. And they made us a syntax back end that really just showed us what it does. So we they sent us a link and we signed up and we logged in, they wrote a little crawler that apparently you can write yourself as well, that will automatically import all of the data into it via something and they wrote a RSS podcast to sanity converter. And then they scrubbed every the whole RSS feed for our podcast, and dumped it in there, which is really, really cool. And then we just log in and we see we have all of these like content types. We have episodes, we have hosts, Scott and I we've got sponsors, and then we have podcasts, right? Those are your if you're trying to think about like, Okay, I'm building a database for an application, what are the content types that I would have. And inside of that, they made obviously the syntax podcast but they also listen to the show, season maida code time with Western Scott. That was one of the failed names for podcasts, and block scope, a podcast hosted by Western Scott, which I was, I really appreciated it and they made a little bit they made art for it and put all the sponsors in here. So the idea is is that you have this back end, that's all built in in react, you can make all of your content types inside of there. And then One really cool thing about it is that you can take some of your react components and customize them - -13 -00:30:00,240 --> 00:32:25,470 -How the back end works. Because obviously, you're going to have your standard input types, right, you're going to have text inputs, you're going to have relational data type, if you have an episode that will that will be related to an actual mp3 file. And then you'll have hosts that are associated with that specific episode, and so on. And you have published date and things like that, which is pretty cool. But then what they did is they took the podcast player from the syntax.fm website, which is built in react, and they just dragged and dropped or, or popped it from our own GitHub repo and just dropped it right directly right into this. And I'm able to see what it looks like in the back end, with that specific react component, which is a testament to building componentized componentize things in the long run anyways, so they built it, they built this whole back end, you can upload images, you can have all of your different settings that come in all of the different sponsors that we have the shownotes everything that we have there. And then once you once you have the CMS that has all of your content in it, then you could build your your front end, however it is that you you'd like to do it. So what they did is they actually went out and built react website, they took the syntax, that FM website, and then just typed in the data from their back end into the the syntax website, which I thought was pretty cool. They have this query language called What is it called? Again? Scott? It's called grok. I believe that's how you pronounce it. grok gr o que grok? Yes. And that language allows you it's it's apparently it sits on top of graph QL. But then adds the additional like, the the downside of graph qL is that it's actually not a not a query language, right? Like, there's no filtering, there's no sorting, there's no that all of the stuff you're used to doing in like a MySQL or MongoDB database. None of that is in graph qL, unless you go out and do it yourself unless you implement those, those things yourself. So this sits on top of that, and allows you to write these really flexible queries against your data and pull in all of that data. So pretty, pretty nifty. I find it funny that we we locked in this sponsor, like three months ago, and like two weeks ago, or a week ago, I was just talking about how there's no real good, like back end data management services for, for node and for us, JavaScript developers, and I was very jealous of some of the Laravel stuff that was being put out. And then a couple days ago, I started looking into this because I had to talk about it as a sponsor. And I was like, Oh, this is what I was talking about. - -14 -00:32:26,610 --> 00:34:59,970 -A while ago. It's beautiful, too. I mean, they do a great job with the little things. And we mentioned, you know, this is a nice looking website, but it's uh, yeah, the surface is just really super cool. I think it is done, right. Yeah, it's done. Very right. So so check it out at Sanity, s a, n i t y.io. And sign on up. I'm really excited to have them on as a sponsor. And I'm really excited to have obviously tried this out myself, because they've they sent us over the syntax, but I'm gonna give it give it a shot and build something myself in it. Yeah, super cool. So thank you so much for Sandy for sponsoring. Everyone give that a check out really cool. Well, this is a tip that you've probably heard us mentioned before on this show. And it's a tip that it definitely is a it's an easy one to do. And it's pretty much not using the harshest color values, for instance, 000 for black, right, because in real life, if something's printed or whatever, you're almost not always looking at a true true black because, well, there's other factors involved. So on the screen, true, black isn't always the best option. In fact, it's rarely the best option. And if you're using true black, it might be more of a like a brutalist or an intentionally, like harsh thing, right. So I personally end up using even if it's a 111, or a two to two, or 333, I usually just end up using a few shades lighter of a black, a dark, dark, dark gray instead of a black, and it almost always looks much better. Yeah, I'm a big fan of this is why I forget where I initially learned this tips, but I think it was the New York Times or something like that, like go to any any major website. Let's go to New York Times and see what color black they're using for their text. They're using lB 333, which is just a standard black color, you probably wouldn't be able to tell it just by looking at it. But it makes readability so much easier. So usually what I'll do is I'll just set something to black, black, and then I'll just bump it off just a little bit. And I find that makes the readability a little bit nicer, not so harsh as as just regular black is. So big fan of that tip. It's just like one of those usually are usually what I'll do is for my entire project, I'll set a variable called Black in my CSS Grid course we do this and I'll just have a variable called Black globally, and then I'll just set anytime I need to use black I just use that variable. And that way I'm not accidentally using pound 000 it puts you in good shape. Yeah, that was one of my favorite things about stylist was the transparent variables. Some people might not like this, but in stylists, you were able to define variables as just a word, so you could overwrite CSS color values. I love that - -15 -00:35:00,000 --> 00:36:57,960 -Black equals 333 or whatever. And then just like you would author your normal CSS instead having to do dollar sign black or you know, var hyphen, hyphen, var hyphen hyphen black, or whatever you do is CSS custom properties. You just use black. I love that. Our sponsor Sanity uses one D, one D, one D, another good choice there. You could see But yeah, absolutely. It's a nice little easy thing. I find that almost all of the built in colors except for pale golden rod yellow, and a couple of my other favorites. Almost all of the like default, red, green, blue, black. All of those are brutal Britain. Don't look don't look super good. Except for like Bloomberg. Your Bloomberg came out with just using like basic blue. Yeah, and I think they dropped it. Do they somebody? I guess they kind of have it still here. Somebody did a redesign recently. That is pretty brutalist. Is it Bloomberg, it might be Bloomberg. today. It's like definitely like, it's it's not totally brutalist, but it's like inspired by an A definitely had my view. Bloomberg here. It looks like they definitely toned it down a little bit. Yeah, I wonder if they if you search for Bloomberg blue, you'll see what I'm talking about. But I'm on the Bloomberg website. And I don't know if it's, I'm not able to see it anywhere. Yeah, anywhere on the actual Bloomberg website, though. Maybe they took it off. Yeah. Mm hmm. Interesting. I see a little bit of it in some of their graphs, income graphs, cash flow graphs at the bottom, but that's it, they use it a lot. And they were they're really holding to it and everyone's like that, that looks like garbage. But any any time somebody somebody challenges and comes out with new design, when Dropbox comes out with new design, whenever anybody comes out with a new logo, Uber Airbnb, Aaron says it looks like garbage. So I usually disregard that and sort of just sit on it for a bit. But I truly did believe that that blue was was hard to look at. And meanwhile, I actually really liked it, but it might just be because I subscribed to a bunch of brutalist, - -16 -00:36:59,040 --> 00:39:59,940 -UX blogs. So I'm used to seeing much worse, but yeah, I that's, that's definitely a thing. I definitely if if I ever want to do something sort of shocking in my like, like, if I want to use a color to debug something, I'm always using red, blue or green with no additional things. But you know, obviously don't leave him in. The last one we have here is that the default browser UI is almost never the best UI. And this one's particularly important because, well, styling, those things are never typically very much fun. Anyways, like styling, selects radio buttons, sliders, it's not very much fun, because it's a lot of little things. It's a pain, there's a lot of gotchas, but it is important. And honestly, if it's, if it's too much of a pain to change them, and you don't have the time, I mean, you can always look into libraries to do that for you. Like for instance, I use almost always a switch, like a toggle component that somebody made that looks like the material design toggle, I almost always use a react component for that instead of doing the design myself, because I just don't want to deal with it. You know, it's just the pain, totally, I while we say this, we should also say that the default radio selects, those are usually not the best inputs, but they are usually the most accessible. And most mobile friendly inputs, we've actually got a show on accessibility coming up. So sometimes you see people just create something with a div, and then it's totally inaccessible, but it looks really good. And that sort of that balance between the two is really, really important. So what I like to usually do is for checkboxes, and radio buttons and stuff like that. And if you go on syntax.fm, and check out the loudness, how you how you change the volume on our player, that's actually just a whole bunch of radio buttons that are bound to the the volume property on the audio element. But so you can always hide those in and use a label. And if you have a ID or a four on the label and an ID on the input, or no, that's wrong if you have an ID on the label, and a name on the radio, and those will be locked together. And if you click on the label, then the ID will be selected. And if that's the case, then you can always hide the actual input itself, and then just rely on the label. And then if you put them beside each other, meaning that if you have the input first and the label Second, you can always use the checked CSS selector. Yeah, saying and to just to specifically color them add CSS to when they're in the selected state and when they're in the not selected state. So it's a little bit of trickery. Sometimes it's better just to use a little bit of JavaScript and toggle Aria attributes instead. But I have found that fairly useful in my cases, just to get rid of the default UI, but still keep it and it makes it easier as a JavaScript developer to under the hood because if you can keep the keep it a standard form inputs. That's really good for a JavaScript developer, but it's not good for how it looks right. Yeah, yeah. - -17 -00:40:00,000 --> 00:43:36,930 -No, it's one of those things that again, the default ones, they look ugly, but they had the best option. So styling those also, they also tend to sometimes have, you know, certain interactions with mobile already worked out for you and stuff like that you don't have to deal with, you know how the device handles those inputs, like select lists and things like that. Cool. So let's get into a little bit more of maybe animation and user experience sort of stuff, stuff that happens when you like, click things and move around. I'm a big fan of animation, I wrote a course on animation. I do a lot of animation stuff. In fact, the latest update for a level up has a really nice little animation on the pro page. So maybe at the time you're listening to this head to look tutorials, comm forward slash pro and and see this little animation happen. I'm a big fan of this kind of stuff, page transitions and, and things like that. So hopefully, here are some little tips here to add some life to your animations, like one, don't use animations, where they're like, unnecessary. I mean, if you do, make sure they're fast, right? Because if you live through the flash era of websites, you'll remember the websites that were just overly animated to all hack, because like that, that was like the cool thing about flash is that it animated. But now we can do the cool stuff like that in CSS and JavaScript. So well, I personally love to use animations for transitions and to load and stuff like that. But it really is to take away the shock of just like content flashing on the screen more than anything, or to add some sort of emphasis right on a hover, maybe give it a nice little scale or something like that. And that's one of those properties I do feel is occasionally underutilized is maybe even like subtle scales. Like we talked a lot about subtle anything. But if you hover over something, I have both subtle and non subtle scaling on level up. So on the GoPro page, if you hover over one of the cards, there's a non subtle scaling, it scales like 1.1 times it has a little bounce, ease and stuff like that. Meanwhile, there's another little more subtle scaling that goes on if you hover over things. So I personally love to use animation to give emphasis to give awareness and to give interest to certain elements. How about you? Yeah, I use it quite a bit in instead of doing like a hover or focus, color change, a nice little scale, a nice little tilt, if you go on my learn node website, all of the buttons have a before before pseudo element on it. And it's like just a slight kind of like a little card shuffle effect on it. And then when you hover over top of it that that the background card just shuffles just a little bit, just to let you know that okay, this does something when you when you hover it, it shows you that something will happen. So big fan again, it's funny how the we just keep saying this word subtle over and over again, because they can definitely be really, really abused. And it's hard to hold back on some of these as well, because they sometimes they look so cool. And I'll be the first to admit that I will always flex the CSS a little bit more than it should because I like to have fun with it. In my websites are targeted at Yeah, my websites are targeted at developers and I often will have people like spent hours just digging into the little little things here and there on my learn node.com website, I, I use this thing called particles.js, which gives you this really cool like sciency background where the particles are attached to each other and they grow and they move and I was so excited about it. And then I launched the course and of course I didn't try it on a laptop that cost less than $3,000. Yeah, like my you're using like 100 are you mining Bitcoin, like what is causing the CPU to be like. - -18 -00:43:38,520 --> 00:44:21,540 -And it was because I was running this particles and it was just repainting, like 60 frames a second and it was just too much. So I had to I had to the particle is still on there. If you refresh the page a few times you'll you'll notice that the particles are random every single time, but I don't repaint it anymore, which is which was sad for me to take it off because people really enjoyed it. And obviously it adds nothing to the usability of the website but it it added just that special extra little bit of this is kind of a fun website that that was built here. I wonder how he did that. Yeah, I know it is it has a little bit of delight. In fact, I was on this website, bear Sears that patagonia.com and I'm sorry for bringing up Patagonia West I know you have a little bit of a - -19 -00:44:24,210 --> 00:44:59,970 -little spat, not necessarily as bad. But either way they had no this beautiful thing on this site. If you click this little skip button get past their their video, and you hover any over any of these images, there's this really cool like little dip in the text is sort of sitting on a different plane. And it's a beautiful animation. And I saw that and it was like super inspired to create this, this a hover effect that I use for my cards, where when you hover over any of my tutorial cards that sort of dips in and it uses the Z access to do like a 3d rotate and sort of like pull itself in. And those are things that are maybe a little underutilized. - -20 -00:45:00,510 --> 00:45:39,000 -Right, but in general the usage of like the principles of animation, right of this anticipation, their response how things actually feel in real space. I think that sort of stuff is under under utilized. So having more of this real world feel to your animations is a big deal in my opinion. Yeah. So this is I was trying to type it in it's not bear Sears like I see them. It's like bear Sears like oh, yeah, fair has to go buy a vacuum and a super sunday.patagonia.com. Yeah, Sears the store. I'm sorry. And for millennials who might not are younger listeners who might not have ever been into Su's? - -21 -00:45:40,650 --> 00:46:04,830 -I don't know if they're still around to be dead serious close down in the States. I don't know. I don't just I don't even live in Canada. I saw Sears was they saw a website. So they exist. They went bankrupt in Canada about a year ago. And their last ditch effort in order to like save the company was they came out with this advertising campaign called WTF what the Sears Oh, no. - -22 -00:46:06,450 --> 00:46:12,660 -No, anyone locally, whenever there's like, whenever something confuses you, you're like, what the Sears is going on here. - -23 -00:46:14,100 --> 00:46:18,480 -Dude, they shouldn't, they should have come out with Sears coin. Maybe that would have helped him. They're a little - -24 -00:46:20,010 --> 00:49:02,640 -crypto there. One last thing I want to touch on this, before we get into our next sponsor break is CSS transitions. Verse physics based. And this is like something I think this conversation started a little bit more once the sort of heavier JavaScript base animation library sir coming out react motion, some more physics based stuff in in JavaScript, right? Because in CSS, the way you do animations typically do have a starting state and an ending state. And then you have a transition, right. And that trend transition defines the duration of the animation, it defines the easing curve. So it's sort of what gives the animation character, right, the the point at which the values change over time. That's the easing curve. And then it also defines what properties are changing, right? So it's a CSS based transition, or even an animation is the same sort of thing. You define different states or different points in this thing. And you you, you ease between those. And there's a whole nother type of animation out there, which is popularized mostly by react motion, but I think really just really done well with something like react spring. And you see it all over, like actual mobile, iOS and Android based libraries use mostly physics based animation. And instead of having a duration and easing curve, you use things like friction and tension to decide the animation. And that's like, sort of what gives this thing life, right. So if you let pull on something and let it go, and you watch that, that how it behaves this property and space, it well, it makes it feel a little bit more real. And to be honest, I think 90% of the animations I've written in the past year now have been physics based. I'm using react spring for most everything. But I've been going away hard on on physics based animation. And it was a huge paradigm shift for me, because I'm used to writing before I did animations in After Effects. And I'm used to keyframing animations, I'm used to easing and stuff like that. But this whole physics based animation stuff has been just totally eye opening for me. And I absolutely love it. You don't have to worry about the easing curves and the durations and stuff like that you just give these things property and let them live. And they feel very real. So I'm just just still in this Patagonia bear Sears website. It's cool. And it's unreal. It's built in Angular one and jQuery. And I love that because it just shows you that like, it's not built in the latest tech, but it's amazing. It's on. It's an unreal experience. Yeah, absolutely. Love it. Yeah. Awesome. So can you transition us from bare Sears to M lab? to bare seniors? Oh, that's a tough one. Shoot. That is maybe Yeah. You know what also besides Sears? You know what? Also bears like databases MongoDB. - -25 -00:49:04,440 --> 00:49:10,470 -You know, what also bears like instead of Sears, they also like, mostly database. Yeah. - -26 -00:49:11,670 --> 00:50:00,000 -So our sponsor today is m lab. And I've talked about them a couple times on the show before but if you've never heard m lab is a hosted version of your MongoDB for you. And so they do all of the hosting for you. They do all of the querying. They do all of the scaling up for you. They have a free 500 meg database for you, if you just want to try it out. I've talked about the the slow query analyzer. So if you're doing like terrible queries, and you don't know it every week, they'll send you a nice little email that tells you what's wrong and how you could possibly fix it. They have a database GUI. So I talked about all those things in the past and a couple of more kind of like advanced features if you are already in MongoDB if you're looking to maybe move your database over from self hosted to having someone else worry about all of these problems is that they have a very popular Heroku add on which may - -27 -00:50:00,000 --> 00:50:48,780 -makes it easy to deploy a MongoDB. Right from Heroku, which is really cool. So you don't even have to think about going outside of Heroku. For that they have a elementary tool, which gives you real time and historical data about your, your database. So things like number of connections, our operations, index efficiency, CPU usage, which is really cool. So it gives you like this nice insight into like how your database is doing, because often you find out that your database is not doing well, too late, and the whole thing falls over or it crashes or you lose a bunch of data and you didn't have proper data backups and stuff like that. And they also some of their higher end plans have 24 seven emergency support, which will give you a response within minutes, which is amazing. I talked about how I goofed up my, my Mongo mongoose - -28 -00:50:49,830 --> 00:53:09,210 -driver, or my MongoDB driver a couple times ago, and they figured it out. For me, it wasn't their problem was my problem. I goofed it up, but they were able to really help me because they know MongoDB cold. So check it out at em lab comm and sign up for a free if you just want to try it out your next little pet project, you'd want to try it out, they have a totally free option, no credit card required. Now, thanks so much to M lab for sponsoring. Yeah, I use m lab because I don't have to deal with backups. I don't have to deal with security. I don't want to deal with any of that stuff. So yeah, I'm so happy to have them as a both a service that I use as a sponsor for this podcast. So thank you so much for m lab for sponsoring. So lastly, I guess we wanted to touch a little bit on how to get better design. And this is one of those things that it's like, well, it takes a little while and it takes time. And it takes effort to get better at design. If you want to be a full on designer, it's not going to come easy, and it's not gonna it's gonna be as difficult as becoming a developer or anything else, right? For that matter. You Yeah, you need to put the time in and you need to put the focused effort in to get better. But that said, there's a lot of little things you can do here or there to increase your your learning as you go further. So one of the things I like to do is just put good design in front of me a lot. So, you know, if you use the social medias or anything like that, just follow a bunch of UI themed Instagram accounts. Now some of them are just gonna post some generic stuff over and over again, that might get sort of bland over time, but you're gonna be experienced design that looks nice and is designed while either way. So you start to have an eye for what good spacing and good colors and good contrast and stuff looks like. So it's definitely a good thing. And you can always browse sites like dribble or I use site inspire I get their emails. So I always check out some of the latest stuff on site inspire. Yeah, what kind of what are your favorite places to look for design inspiration? Yeah, I used to be a super into these, like CSS galleries where people would have websites and I forget what they all were. But that was that used to be the way that you could get a ton of traffic to your website, as you would submit your own website to the CSS galleries, and then they would feature you. I remember one was called CSS next, specifically that I really liked. That that that is now a - -29 -00:53:10,980 --> 00:55:00,000 -preprocessor syntax, so don't don't go to that anymore. But I what I do now is I like to just cruise dribble, I like to cruise sites specifically stripe has some of the most unreal design out there. The stripe is always on the cutting edge of just pushing the limits and making like such enjoyable design, but also like beautiful looking, which I think is two things that are hard to get right Absalom and then I my biggest tip to people and this is really how I learned is that go on somewhere, go on dribble, go on themeforest and either get a website design or download one or something like that, that is a Photoshop file that is a sketch file that is a figma file and implement that one to one don't take someone else's website like this is something we did in the boot camp where you we made people take a flat Photoshop file and convert it into a website that was pixel perfect. And it's it's amazing because it really makes you focus on things like padding and spacing and colors and fonts and line heights. And those are little things that you might not necessarily notice until you overlay the old the design on top of yours and go, Oh man, my my spacing was way off on this. And when I change it, I see how that makes it feel better. And I see the difference between that because just by by forcing yourself into those little itty bitty corners, you're going to start to figure out these are these are the common tricks that people are using to make a nice design. And don't take an existing website. Because what I found is we used to tell people like try to re implement the eBay header or try to re implement the stripe nav or something like that. And then people would just immediately start right clicking inspect element and trying to figure out like what code did they write and and that's that's not what the code that you write should be the last thing you're thinking about. You - -30 -00:55:00,030 --> 00:59:59,970 -should be thinking about Okay, what how is this aligned? What are the different colors that they've used here? What are the what's the different padding and fonts and stuff like that? And then how do I implement it should be the last thing that you're looking at? Yeah. And I agree with this. And it's amazing how many after working at agencies with a lot of developers who maybe aren't like, they don't have that eye for pixel perfect design, it would always be amazing to me when people would submit work, and they would be like, Alright, it's done. And then you look at it, and you'd be like, this is not done. Like there are some several things that are not the same as the design here. Like did, we had an intern one time who submitted something, and he was so like, confident with it. And we had to, I felt bad because we had to break him down a little bit not like, aggressively or something. But we had to be like, Listen, like this, is this, does this look the same to you? And that does not look the same at all? Yeah. So that's like, a big thing is that being able to really identify those things, but again, you know, the web is changing. And we're not necessarily dealing with pixels as much anymore. But being able to interpret what that pixel perfect design should look like across design or screen sizes is a big deal. And it also, I do want to mention that, like, you know, you're talking about learning, design and implementation not mattering. And then I agree with that. But don't be afraid to check out implementation when you're on something. And you see it is really cool. For instance, that bear seer site, I saw that and I was like, how did they implement this? Because I know how I could have done it. But I wanted to see how they did it too. And I wanted to see like, did it line up with how I expected to do it. And maybe that's that's a good idea is to maybe don't just go in there too. It's like peeking at the answer to a test, right? Don't go peek at the answer and see how they did it first, but maybe come up with your own implementation and figure out how you would do it, then look at how they would do it, and then maybe use some of that, you know, that thinking to think is their version better than mine? for what reasons there's my version better than theirs? for what reasons? So it's definitely a you know, implementation is something to think about, but maybe not from a learning how to design standpoint, necessarily, right? Totally. My last tip is selling out already said, but follow Steve sugar. I just love him because he's Canadian. But also that his stuff is just so he does these little tips where he'll come up with a UI and and say, Okay, here is a UI where there's a couple problems in here are some actual ways that we could fix that. And then it shows the the improved UI. And then he just says, Okay, this is what I changed about it. And they're really like Polish obviously spends probably a couple hours on on each of these tips, and they're very digestible. So he has a moment on Twitter. So if you just go to twitter.com, forward slash Steve s, t, e, v, e SCHOG, er, and then click on moments. And then he has a moment called design tips also linked directly to the moment in the in the chat area in the show notes as well. And then there are all the design tips that that he's put together, I think they're, they're really good little things that you might not necessarily think about yourself, how to handle avatars, how to handle data that has different importance, like if you have, here's this one called think outside the database, like don't just create a table and dump all the data into a real estate listing. There's stuff that people care more about specifically number of bedrooms, number of bathrooms, type of house and the price of the house, right? Those are the probably the the things and those things should be easily digestible. And if one of those catches your eye, then you can you can go a little bit further and dig for the additional info that you need. Yeah, I guess my last little tip here would be take time to challenge yourself creatively. And technically, and I'm not talking about in client work, and I'm not talking about things that matter take time to just make some cool stuff. And I'm not talking about again, cool for everyone. This doesn't have to be blockable, or whatever I'm talking about cool for you. I one time made a really dumb gradient wave thing. It was just like 20 gradients stacked on top of each other. And they were animating position and all sorts of stuff. And it for the most part was technically simple. And it was dumb, and it's not anything I was going to share. But it was fun to make. And it was fun to look at. And it was just a nice little experiment to say, Hey, I haven't done this kind of thing before. Let me just do something fun with that. So again, take these sort of time in your life, to to just to experiment and to allow yourself to experiment both visually, animation wise, UX wise and just go for it. Just try some stuff. I don't have anything to add to that. I think that that's perfect spending time on it. I often get frustrated at how long design takes because I'm very efficient with everything else that I do. And I always had to tell myself like you just need to sit here the entire day and work on it and have fun with this and not feel that pressure to wrap this thing up. And that's very different than then - -31 -01:00:00,000 --> 01:00:23,610 -I'm actually approaching something from coding. So it's a important little shift that you have. Yeah, absolutely. Awesome. So I think we need to call the doctor because it's time for some sick pics. I think that needs to be the transition for now and forever. We need some sort of like, we need to get a fiver to get like a little audio sample in there. Yeah, like somebody call the doctor. - -32 -01:00:25,470 --> 01:01:26,190 -So call the doctor. Oh, man. All right. My sick pick today is a Spotify playlist. I've mentioned in the past that I'm super into hardcore music. And I know that a lot of our listeners are as well. If you're not into screaming music, then then skip ahead 30 seconds, but where I find a lot of my new music recommendations, and an old ret ones that I might have forgotten about is a Reddit called post hardcore. And somebody just built I think just in the last week or two, they built a bot that anytime something makes it to the front page of our post hardcore on Reddit, then it automatically adds that song to a Spotify playlist, which is what has been my dream for a long time. So check it out. I've put the link to the Spotify playlist in the show notes. And I'm just so happy to have a nice little Spotify playlists where I know that like this is the type of music that I love. So I know that everything in here is going to be pretty good. Yeah, I've seen so many of these bands in concert actually. This is really yeah, I'm just going through the list. It's like glass jaw and Oh. - -33 -01:01:29,280 --> 01:02:19,860 -And Shin Sparta. Yeah, class job. They had that one album that was pretty good. And then he did head automatica which had one album with Dan the Automator. That was really good. And then they did another album without Dan the Automator. And it really sucked. I always liked his Darren Darren Palumbo or something like that. I always really liked him. They definitely had that one album. That was really super good. Yeah, this is taking me back to dos show dos. And oh man. Dude, they're from I watch it from machine. Oh, yeah. Yeah, yeah, they have that I actually would listen Watch the YouTube video with Joe dos. And what was that? What was that song that I really liked that one album. Yeah. I just love any any music like that. I just pause the I found that one song that I love. It's chose the world the world's best friend become redefine. And it has that like, hey, let me play a little bit of right here. I don't know if this is allowed. But - -34 -01:02:48,960 --> 01:02:51,330 -that was like the breakdown of my childhood right there. - -35 -01:02:53,310 --> 01:04:17,460 -I remember that at shows when they when they would play that and arrow and just lose it at that part. Yeah, dude. Yeah, I knew I knew people that went to high school with those guys. That's funny. Really? Yeah. That's great. Yeah, they're one of my favorite bands still. So since you did a music sick pick, I'm gonna do a music pick, pick two. And this one's going to be a very different, very different genre of music. This is one of my favorite albums. I will I've been waiting. I've been waiting and waiting for this album to come out. This guy Lewis Cole. He is one half of the band nowhere. And he let me tell you, this guy rips on the drums. He is awesome. He's also like a brilliant pianist, a brilliant musician overall. And I don't know how to describe this genre of music. It's weird. It's just weird. It's like, it's sort of, you know, like volf. Paki. And that sort of way where it they they take a lot of sort of like, you know, they take a lot of classic era, you know, funk and soul sounds, but it's also very electronic. It's very funky. It's got some incredible drumming. And it doesn't take itself seriously at all. I mean, this guy, this guy released a series of videos on YouTube before this came out with songs like bank accounts, where the lyric is just, I don't want to check my bank account. I'm too scared to check my bank account. - -36 -01:04:18,720 --> 01:04:47,280 -It's really good. He's, he's got a great sense of humor. But the album is incredible. The musicianship is incredible. And you're going to hear some of the most insane brilliant off key piano solos on this thing in the entire world. So this album time by Louis Cole came out last Friday or a couple Fridays ago when time you're listening to this. And I love this album. So put it on, check it out. It could be your new favorite weird album. Awesome. And check that out as well. Love some weird music every now and then. Yeah, yeah. - -37 -01:04:49,170 --> 01:04:59,970 -All right, any shameless plugs. Yeah, I have a new course on react testing. And this course is going to be out by the end of this month and it's going to be testing react components. And this is - -38 -01:05:00,000 --> 01:06:03,870 -Courses aimed at people who are not good at testing or have never done testing or testing scares them and makes them want to run away and hide. So we define all of the jargony terms. We go through all of the difficult stuff. And we test our react components using Kent C. Dodds amazing react testing library, honestly, I think it is game changing. And it uses basically demystifies testing in react entirely. It's going to be on level of priority, it's going to be available for purchase, it's going to be out by the end of August. And if you subscribe for a year I level up pro you could access to that course along with level two react level, one electron, Apollo react, Vue js, pro Gatsby, headless WordPress, and a ton of other premium tutorial content series and new ones coming every single month. Wicked. I am going to just plug all of my courses at Wes bos.com for slash courses. You can check it out of all my free and all of my paid courses listed out there and probably find something that interests you. Other than that, I think we're good for today and we'll see you next week. Cool booth please - -39 -01:06:05,490 --> 01:06:15,240 -head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax69.srt b/transcripts/Syntax69.srt deleted file mode 100644 index a7a609e73..000000000 --- a/transcripts/Syntax69.srt +++ /dev/null @@ -1,104 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi ski. - -2 -00:00:25,950 --> 00:00:53,370 -Scott Tolinski: Oh, welcome to syntax today, we have a tasty treat for you. We are talking about framer x, and prototyping applications, design applications, the interaction of those applications and our development space, and sort of where that's going to be going and where it is, and some cool cool stuff coming down the pipeline. Now, my name is Scott Tolinksi key, this is a tasty treat. This is the syntax of FM with me, as always, is Wes Bos. - -3 -00:00:53,430 --> 00:00:56,430 -Wes Bos: Hello, everybody. Good to be with you again, I guess. - -4 -00:00:56,940 --> 00:03:30,900 -Scott Tolinski: Yes, good to be with you. Again. This episode is the nicest episode of syntax and it is sponsored by century century is amazing century is a play surface that both Wes and I both use to track our errors. And it really what it is, is it's a sort of a hub for getting all of your errors in a place where you can track, resolve them, and really approach any sort of error system in your website with confidence. Honestly, the service is invaluable to me, I use it 24 seven. So some of the cool things that that Sentry does, it can cut your app, your error resolution down from five hours to five minutes with all of the relevant information it gives you, right? It lets you know the operating system, the user, the even the relevant source code using source maps, so you can see exactly where the error occurred in your source code. I mean, that kind of tool is just amazing. They have SDKs for every single platform you could possibly think for. I mean, seriously everything. So if you're using code to make things a century has your back there. Yeah, there's even some really cool stuff like noise free notifications tied to the commit, right. So if you made a commit, and it's causing some errors, you're going to get notified yourself. And it's going to be again at noise free, letting you know exactly what's happening without a bunch of fluff, okay. And again, there's tight integrations with things like GitHub, Bitbucket, get lab, any of your version control systems. There's also tight integrations with services like slack and JIRA, and whatever you're using to communicate with your team. And if you sign up for century using the promo code, tasty treat all one word, you could get two months for free of century small plan. Now here is the kicker of this coupon code. The tasty treat coupon code even works for already Sentry customers. If you're a current Sentry customer, and you want to get two months free of their small service plan, please sign up or use the promo code tasty treat, and you get a little extra incentive there to try century at a little bit larger scale. Also, for people that might be on the fence about getting to try this in general, the free tier of Sentry is perfect for getting started and just checking out the features and seeing the value. Again, I use this tool nonstop. And I'm pretty sure my team could not function without it. So check it out@sentry.io use the promo code tasty treat to get to two months off of their small plan there. So check it out. It's it's again, awesome, awesome tool, and we're so happy to have them as the sponsor. - -5 -00:03:31,019 --> 00:04:01,200 -Wes Bos: Awesome. So today we're gonna be talking about, we're gonna I guess we'll start talking about framer x, which is the new hotness, Scott, explain kind of what it is. And we're gonna parlay that into the idea of prototyping tools, what they are and why you might want to use one and where the benefits are. And then finally, we'll talk about sort of like our dream for prototyping tools. So this is more of Scott's wheelhouse. So I'm gonna let him drive most of the conversation. And I'll chime in with whatever I have to say about it. - -6 -00:04:01,260 --> 00:09:50,190 -Scott Tolinski: Yeah. So I know, we all use a lot of apps to do design nowadays. And workflow has shifted. I mean, when I was first working at an agency, everything was done in Photoshop, you just did all your designs in Photoshop, whether or not that was like, the right idea or the wrong idea. You know, Illustrator was probably more appropriate than anyways. But eventually, you know, people came along and enhanced some better ideas to make some more modern applications for how we work in developing things today. So look, things like sketch popped out. And when sketch came out, I blew a lot of people's minds because it was a design tool that was now focusing on the stuff that we use in our actual code. There's reusable components, there's styles, there's things like that there's, you can pin things to areas and have some responsive designs. Again, these are ended up being tools that needed to exist did not exist at the time because everyone is using sort of these older archaic sort of ways of design. Finding a website, right? And then from that came new tools like figma. And envision studio and Adobe XD it's XD, right? I think it is. Yeah. And then now, well, previously framer, and now framer x, which is sort of the latest in this sort of design application. Now framer x is a Mac only application, although I hear they are working on a Windows release as well, I have no idea about any sort of timeframe for that, who knows when that could come out. But it's in the pipeline, right? So framer x is at its most basic, it's a design tool, it's sketch, it's figma. It's one of these, it's a competitor to that sort of space. And it very much works in fields like that, you have your artboards, you have your vector tools, you have your component stuff. Now, the stuff that people have been getting really hyped about in framer x is its usage of react components. And this one's really interesting to me because framer X has these two separate concepts, it has a design component, right, which is something like similar to assemble and sketch or component in figma. It has a design component, and then there's a development or a code component and the code component is written in react. Now, I think there's a little confusion that people were thinking you could go back and forth. And you could export design components as react or use this tool as like a prototyping for code tool that would spit out some code. It's not that it's it's just a design tool that allows you to make more complex components with react. What's cool about that is you can build these components that have like, it actually pops up in the interface in the toolbar. So instead of just being a, here's the background, Shadow, and whatever, you can have your own custom parameters, and sliders and whatever that you can control in the app to control these individual components. And then there's an app store, where you can share these components and download other components. Like for instance, I downloaded a YouTube component. And one of the custom properties it has in the toolbar is just a URL, you paste in a YouTube URL into that. And then in your design comp, it actually loads up that YouTube. That's cool. Yeah. And here's the coolest part is that there is prototype, or there's like a prototyping mode, where you click in and opens up like an interactive prototype window. And that YouTube embed isn't just a photo of the thumbnail in the YouTube player, it's a full on working YouTube player. So in the prototype mode, I can click that and actually see it function as if it is a YouTube player in my design, and it's playing the actual video. So it is a little bit of design application. It's a little bit of interactive prototyping application, it is not some sort of code Explorer, or exporter, or whatever you're not, it's not a dream weaver or something like that. It's not a visual code builder. That's not what it is. So one of the cooler functions about this thing I know, you'll really appreciate this aspect is the there's this layout style called a stack. And this stack uses Flexbox rules. So instead of the like, app, like instead of positioning things on a canvas, you select some things, and you put them in a stack, and then that stack automatically determines their spacing, their location and their distribution. And then using exact Flexbox things like space between and whatever, you can have it be automatic, ah, it's I know, I, I've designed enough lists in my life, that there's like nothing worse than working with a list and having to like move an item around or like reshuffle and use your align tools and distribute tools and whatever this like really, like makes it into like a it's sort of a different thing. I it's a feature that I didn't expect to think is that amazing. And now I'm like, wow, this is like maybe one of the cooler aspects of this application. In addition, there's also things like scrolling areas and animations. When you click on things, we can click on a menu and see it fly in from the left. So I highly recommend checking least out there they're a little their videos there. They're sort of what's going on, I have a video on level up tutorials, YouTube, that's like a live stream of me using it 40 minutes if you want to see this thing in action. Again, this video is not sponsored by framer x. This is just my initial opinions. And mostly I wanted to talk a little bit about design tools and prototyping tools in the context of something like this, something that really inter inter gates, interactivity, and code with design. So again, this is like sort of like one step closer to the intersection of design tools, development tools, and maybe like a code builder, because it's not, like I said, it's not a code builder. But it definitely has some like really interesting features with code in your design. So in like, what ways do you think if you were working with a client, could you see this kind of thing to be useful? And like do you think that interactive features instead of your design comps, do you think that like is something that your clients would want to see? - -7 -00:09:50,370 --> 00:10:15,900 -Wes Bos: Yeah, I actually have a question before I get into that is like the React part is very intriguing to me, but don't totally get it. So yeah, is the idea that you take an existing react component that you use and just pop it into your you pop it into your design, and then you're able to use that as part of your design, or is the idea that you build something in this and export it as code? I don't think so. Right? You don't do any exporting as code. - -8 -00:10:15,900 --> 00:11:02,430 -Scott Tolinski: Okay, yeah, so the you import as code specifically, or you can copy code from a code component that someone else already created. But for instance, yeah, like, I could throw in a react component that I've already created. When you click Create component, it gives you an option for design component or code component. And if you have a code component, it'll pop open a window in your text editor as the TypeScript file. And the from there, you can copy and paste. And when you save and update, it'll pop into your thing. There's, again, some additional little features, because you can set parameters that you can modify within the interface. So again, like even if you were to write your code in this thing, you wouldn't necessarily want to copy your code out of it and use it in real life. Maybe, yeah, I can - -9 -00:11:02,430 --> 00:11:41,460 -Wes Bos: see that being really helpful, because there's a bit of a problem where you have designers that are designing components, and then you have your developers are implementing these things. And slowly over time, they start to drift away from each other, and they start to look a little bit different and things get changed. And, and then it's kind of a pain, where your your actual thing that you're using, let's take the syntax player on syntax, FM, that's a component. If I were to take that and put it into this thing, I don't have to worry about keeping the design up to date with what it actually looks like on the website, and vice versa. Right, you could actually just pop the existing component right into it. So I think that that's very interesting to me. Yeah, there's - -10 -00:11:41,460 --> 00:13:23,970 -Scott Tolinski: definitely some some interesting things there. And I think, again, that would be cool. Because you could pop open in your design comp, and actually press play on the button and get it to play audio. So I mean, there's there's some cool things, your your clients actually get to, like, feel how the application works. And now granted, framer isn't like the first framer x isn't the first design tool to do like figma has a prototyping mode where you click play, you can click here designs, you can have scroll areas, you can have pinnable areas, you can do this stuff. So the interactivity stuff isn't necessarily a new thing. But I don't know if you remember, like, back when like the very first prototyping tools, they look like, you know, they look like they were hand sketched. And then the big feature was that you could actually click on things in them was like, I remember showing off design comps at Ford. And then we would have the design comp, which is beautiful. And then we'd pull up this like wireframe in one of the prototyping abs, just so they could click through it and be like, Oh, I'm clicking on this thing, even though it's an ugly wireframe. Yeah, yeah. So we've definitely come a long way since then. And again, I think it's, it's, it's one of these things that is just gonna, it's gonna get better and better. I don't know, if they have any sort of device export, I should look at this. I know like figma and sketch have some pretty slick device export stuff, like you can fire opened a figma design on your phone and click through it. Like you could send clients to a URL and have them like, actually interact with it and feel nice in a real design comp. So yeah, I don't know. Yeah. What are your thoughts on the space in general? Like, where do you think that it can go? Where do you think that it should go? Well, like, I don't know, the convergence of these tools to these types of tools. - -11 -00:13:24,120 --> 00:14:59,220 -Wes Bos: I think that this is really important, because I think it's gonna solve not everybody's problem. I don't think everybody needs to use a prototyping tool like this. But I think that a lot of times, when you're building stuff, the issues that arise when people start to use it arise too late, the client starts to say, Oh, I don't like the way that this feels, or I didn't, I didn't expect that when, when you were to reorder items on the page, it would, it would work like that, right. And I think if you can, can get those things out of the way of how it's going to work. Because I remember back when I first started with Photoshop, it was simple to show the user one file, the normal state, and then we had another layer that simply just showed the hover state. And that was it. But it's so much more complex, there's so much more interaction and interface and how things work together, that is impossible to communicate to a client or even to communicate to a developer. This is how it needs to work when someone clicks on it, or when someone reorders an element or when the screen goes from smaller to bigger. So I think that that's going to really help people that that's find themselves running into issues like that. And I think also it's it's going to allow you to just to dream up new possible layouts and new possible interactions without actually having to spend the time on building what could be some very complex interfaces, a lot of these drag and drop and, and custom interaction stuff that's very hard to write in code. And if you were to spend a week building something and only to figure out this is not the way we want to go, that's very expensive. It's very expensive. - -12 -00:14:59,640 --> 00:16:59,610 -Scott Tolinski: And I think Back to a for those of you don't know, I worked at on like a team for forbes.com. We were doing some like experimental design interfaces. And we worked in a team of like 30 people where we had some, like really influential and excellent designers on the team, and a few devs. And the whole thing was like, we're gonna come up with these incredible interfaces. And we're going to have the devs put them together so that we can do user testing on these things to see how viable using some more interesting interfaces actually is at a scale like Ford, right. And I just think, Wow, nowadays, I mean, this was only a few years ago. But nowadays, you could do a lot of the stuff that we were doing in those prototyping comps, you could do a lot of that stuff in these prototyping app apps now, especially, I mean, you would still maybe need a developer on hand to code up these interactive components, right? Because I don't think a designer is going to be able to go in there and write a react component from scratch without knowing react or anything and have it be super successful. But if you would have a developer coating up these interactive prototypes, it might be a way better way to try out some of these things in user testing, then coating up a whole application itself. This, to me, there's this like, really cool future that we're approaching. And every single new iterative tool that comes out, I think, has a little bit more and more of that special sauce that's going to just I think, progress in that in that term. I'm just like I said, I'm excited for the future of this sort of stuff is so long, the regards to the future, that sort of stuff. There's a space where you have, like I said, we have this design tool that's designing and prototyping is not doing necessarily the code stuff, really. I mean, you can write code in it, and it can work. But it's not giving you code. It's not prototyping code for you. Do you think that the next step is something that gives you prototyping code? And do you think that prototyping code would actually be useful and helpful for developers moving forward? - -13 -00:16:59,790 --> 00:18:09,720 -Wes Bos: Man, that's the that's the dream, right? I remember first opening up Dreamweaver thinking that that's what it was, it was just like a GUI that would allow us to make a website. And that's as much as us developers want to sort of turn our nose up as up at these things that help us write code, I do think that's an inevitable that at some point, I don't know that it will be for your entire application. But for some point, the interface of these things is going to be a bit of a code generator or a helper or something that allows you to both see what you're building, and to have some of these dials and settings and whatnot, as well as actually write the code. It's, I don't know exactly what that looks like. But I would say that in the next five or so years, there's been a lot of like, we're gonna lose our jobs. Remember, it was I think, grid.io, which was gonna like, websites for us, and yeah, freaking out, that they're gonna lose your job. And that went absolutely nowhere. I don't think we'll ever be out of a job. We're just going to be adapting to how we use different amounts of tools. So if you've got thoughts on what you think the future of that looks like, make sure you tweet us out syntax FM. What do you think Scott? - -14 -00:18:09,750 --> 00:18:51,860 -Scott Tolinski: Yeah, yeah, I mean, I think if you're dead on it, it's really interesting, because I doubt that, you know, final product code is going to get pushed out of a design application anytime soon. But I could see there being great benefit to like me dragging a rectangle and styling it and setting up some responsive rules for it, and alignment sort of stuff, and then copying that code out there and pasting it directly into my application, or even getting like a design per code prototype that I could then use, that would save me some time, like, do I really love typing? CSS? Well, I would like it if a robot could type it for me, that would be pretty sweet. - -15 -00:18:51,990 --> 00:19:26,300 -Wes Bos: We're already seeing that a little little bit like in sketch, when I have a complex gradient in sketch, I'll right click Copy SCSS. Yeah, and I'll take that gradient and paste it. And we've previously on the show, we've had sponsor coffee cup has their CSS Grid builder, and the output of it is actually really good. So maybe for like specific things like layout and whatnot, we are starting to see tools like that. And the dream is that one day you will have some sort of GUI that will be a dream to use, and that will output code that is very readable. And I don't know if that will ever get there. But that's the that's the hope, right? - -16 -00:19:26,430 --> 00:21:39,960 -Scott Tolinski: Yeah, it would be really cool to have like a styled component system that stays one to one in sync with your design comps. If you use a design comp, then or if you use a component in your design comp, then you're guaranteed to be the exact same as what's in your code base. And if you modify in the code base that modifies that in the design comp, and if you modify the design comp, it modifies in the codebase like for specifically styling things and really like layout sort of stuff. I see this Yeah, just like that's such a cool idea. I think it's a it's a cool idea and I Not too cool for it, you know, I think some people are gonna be like, well, I they decode everything by hand on a stone chisel and a typewriter and then feed that into, you know, a robot that, you know, converts it to punch card, and then I put in, you know, it's like, I'm not too cool for for a robot doing some of my work for me in that regard. So yeah, I'm excited. I think, again, framer x, sort of, when I first saw it, I was like, Oh, sweet, I'm gonna have like code that just gets output from my components. And it's like, going to be like, just copy and paste your design into a react component. And sure enough, it doesn't do that at all. But it's still I think, like one step closer to that, that sort of goal. And it definitely pushes the bar forward a little bit in terms of what these design applications are going to be doing in the future. So yeah, in that regard, I'm pretty psyched for this thing. It's still in beta. So if you want to get a beta access, you can go to their website, we can make a link available in the show notes to you. and sign up for the beta If not, is probably out soon enough where you can try it. Again, my experiences with it are available on level up tutorials. At a, I think I did a live stream, and I did a what is video. So I've been doing a little bit of frameworks content, this is I have access to it. I've been using it. I'm definitely one to try out all of this stuff whenever it comes up. So yeah, I've had my hands on a little bit. And I'm excited for the future of this design stuff. Again, it keeps getting cooler and cooler. I don't think this is the application that's going to teach you how to be a react developer. I don't think it's the application that's going to merge that gap between design and development and stuff like that. But I do think it is a step forward in design and prototyping in all sorts of like, really, really interesting ways. So do you have any any, like Final thoughts on this sort of, - -17 -00:21:40,170 --> 00:22:15,960 -Wes Bos: I think just to just to keep an open mind, whenever anything comes out like this, it's easy to poopoo it and be like, no, it's these things are always garbage. But at some point, there's a very smart people working on these things. And at some point, I think the the boundaries between what we've had, like if we use a very cut and dried designer, developer designer builds it hands it off to a developer. And those things are very much blurring right now. And I think that we were due for another blur of what your job actually entails. So keep an open mind to the stuff and check it out. Whenever you see anything like this making waves. - -18 -00:22:15,990 --> 00:22:17,070 -Scott Tolinski: Yeah, absolutely. - -19 -00:22:17,130 --> 00:22:17,700 -Unknown: Yeah, I'd - -20 -00:22:17,700 --> 00:23:03,990 -Scott Tolinski: say that that's a great advice for literally anything. Keep an open mind about it. There's still people I read an article I this is totally unrelated. But I read an article the other day, like saying styled component users think this about CSS and they think that there is the cascade is evil. And it's like, this sounds like some like propaganda rhetoric for like somebody who's insecure about their use of CSS, like, just keep an open mind. I think everyone has valid points. And like, Hey, man, if you like using CSS, and you don't want to use style components, that's cool. But I'm not necessarily going to say one thing about it. But I'm not going to make any grand gestures about a user who might think this or that, you know, yeah, whatever helps you get your job done. - -21 -00:23:04,260 --> 00:23:18,810 -Wes Bos: Almost everything good in the history of the world has come from somebody challenging the norm. And not necessarily saying I know better, but why don't we Why don't we take a look at different approaches. Why are we doing it this way? And some of the best stuff has come out of that. - -22 -00:23:18,930 --> 00:23:30,120 -Scott Tolinski: Yeah, absolutely. That's a excellent point. Cool. So I think that's just about it for this hasty tree. We're pulling up on our 25 minutes or so. Do you have anything additional to add like, at all? - -23 -00:23:30,180 --> 00:23:33,450 -Wes Bos: Nope, I think that's it for today. I think we'll wrap it up here. - -24 -00:23:33,570 --> 00:23:52,860 -Scott Tolinski: Sick. Yeah, I think this was a sick hasty tree here. So we got our next episode coming up. It's a potluck where we answer a ton of your question. So we're going to be doing one potluck episode a month and this coming Wednesday is going to be the potluck so keep your ears open for that on the Wednesday edition of syntax. - -25 -00:23:53,010 --> 00:23:54,600 -Wes Bos: See you then peace. - -26 -00:23:57,090 --> 00:24:06,870 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax7.srt b/transcripts/Syntax7.srt deleted file mode 100644 index 3c26f9263..000000000 --- a/transcripts/Syntax7.srt +++ /dev/null @@ -1,264 +0,0 @@ -1 -00:00:02,820 --> 00:00:08,070 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:13,320 --> 00:00:18,980 -Wes Bos: Welcome to syntax How's everybody doing? This is the podcast full of tasty treats - -3 -00:00:19,020 --> 00:00:20,970 -Unknown: that tastiest treats. - -4 -00:00:22,650 --> 00:00:34,380 -Wes Bos: So, somebody said that the the whole tasty treats part of the podcast was cringy. So Scott and I are going to double down and make them even tastier. It deeply, - -5 -00:00:34,380 --> 00:00:40,770 -Scott Tolinski: deeply upsets me that that would be cringy. Because I love the tasty treats. That's one of my it's one of the best parts. - -6 -00:00:41,159 --> 00:00:59,730 -Wes Bos: So somebody also sent me a link to the always sunny and Phil Yeah. tasty treats, which I really did not think of. I definitely did not think of when I when we came up with the podcast, tasty treats. But now I am dying at how hilarious that scene is. - -7 -00:00:59,760 --> 00:01:13,140 -Scott Tolinski: I did not think of that. So I didn't jeopardize. I don't want to jeopardize the chance of tasty treats making it into the podcast. So that's like one of my all time Greatest TV episodes of any Oh, - -8 -00:01:13,200 --> 00:01:15,660 -Wes Bos: that's that's fine. One of my favorite episodes. If - -9 -00:01:15,660 --> 00:01:16,200 -Scott Tolinski: you're, - -10 -00:01:16,200 --> 00:02:24,780 -Wes Bos: if you're looking for a laugh, open up YouTube and search tasty treats Sunny, and you're you'll see something funny. So today we're going to talk about our origin stories, which is sort of like how did we get started? And what was the path to becoming web developers and whatnot. So apologize if you've heard me on a podcast sort of talk about this before. You can skip mine. Mine goes a little bit more in depth than I ever have on some podcasts. But I have never heard Scott's so I'm interested in that. So we got a sponsor here today. Thanks so much to fresh books for sponsoring fresh books is a easy to use Cloud accounting software that saves small business owners like you and myself, two days a month in paperwork and get some paid up to five days faster. We'll talk a little bit more about them partway through the show. But head on over to freshbooks comm forward slash syntax for a 30 day free trial. And make sure you enter in syntax in the How did you hear about a section so we can get paid? Cool. So Scott, how did you get started to being a web developer? - -11 -00:02:25,710 --> 00:06:30,600 -Scott Tolinski: Oh, yeah. So I feel like I don't know if this is like a theme or whatever. But I feel like, you know, with with web development, being such a interesting career as it is, I think that you're going to find a huge amount of variability in people's origin stories, if you if you talk to them about how they got started. I mean, most people that I know that are devs have either very interesting or just very unusual, they're different stories, and maybe not like, Oh, I went to study computer science. And now I'm a developer, right? I mean, there's certainly a lot of people. But uh, you know, this industry attracts a lot of different people. So I'm sure if you talk to a lot of people, you're going to get some pretty weird stories. But it's definitely not the most normal, so to say. So I started obviously tinkering around with web technologies back in high school and middle school, just building really basic HTML sites. I had a popular band in high school and like our battle of the bands was like, seriously, gigantic deal, it sold out like a huge auditorium every year. And our, our band got like second place our as freshmen in that, like, didn't happen. Like, if you got second place, one year, it was almost guaranteed you're gonna get first place the next year. So then we ended up getting first place for a couple years. And just like really, you know, our band was like a big deal for us in high school. So, you know, I made our site. And then we kept remaking it all the time, because we wanted it to be cooler. We made it in HTML, and then flash through Angel fire. And, you know, we say occasionally we do these, like really ridiculous flash intros to the site. And I made it with a good friend of mine, who I'll get into a little bit more in this episode, but uh, his name is Devin Booker. He was our bassist in the band. He's a super talented guys, one of the smartest people I know. And so basically, we just mess around with that for a long time. And somehow our bands messageboard became like the hotspot in high school for like digital space. So like, our message board was like, it hadn't I don't know if like, it just became like the message board where people in our school would would just chat. So we maintain this like decent message board for our high school for a little bit. And that was just like, you know, that was basically my introduction to web stuff, right? It was just a lot of fun and we were doing it because we wanted to, you know, goof around. We wanted to put some audio clips on Okay, you've got to learn audio stuff you wanted to have a Ridiculous intro you got to learn flash stuff you you want to, you know, learn CSS, you got to learn all that stuff. Obviously the site was probably terrible. I would love to see what the code looks like right now. I have absolutely no idea what the code would look like for that site. I would really love to see it. So yes, so really, from there, just started my interest in actually, our band's name, I should point this out is set focus from the set focus method in Flash. So we stole our band name from flash. Yeah. It's so yeah, so then I just started like building my site I built like Scotland ski.com. Like, I don't know, a whole bunch built it in high school, just for fun, and messing around on Angel fire and whatever. And then, uh, yeah, so that was pretty much it. I didn't really have any ideas of what I wanted to do in life, really, I just wasn't really that motivated or driven. And the my friend Devin, who was in our band, he had heard about this program at the University of Michigan, which was audio and video engineer. Well, it was audio engineering, it was in the School of Music, and they had several different sort of pathways in this program. And so you there was like three people accepted into each of the four majors a year. And that's it. So it was pretty competitive for these three Hots. Yeah. And I'll tell you, the people who I graduated with in my program are like incredible people. So - -12 -00:06:31,860 --> 00:11:23,100 -the different focuses would be like music technology, with a focus in composition, music technology with a focus in performance. My program was music technology, with a focus on media arts. So like video production, I had to take 18 dance credits, I did take a lot of art. I took like sewing just like a whole bunch of random random classes in college. But my buddy Devin, he took the fourth which was audio engineering with a engineering component. So he actually got a science degree and went on to get his master's and stuff like that. So he definitely went way more into the audio engineering spectrum of everything. And I did much more of the multimedia stuff. So while I was there, I took a bunch of music programming classes, which is like my introduction to higher level programming, whereas building things like I mentioned before, like video theramin, like a projection audio synthesizer, and it was an environment where people were just building wacky stuff like somebody built. It was like a drum machine that was with triggers tied into ping pong paddles, so you'd play ping pong and drum beats would be making it was like, it would just like making Wild Wild stuff. And it was a really good environment to be just super creative, and just try to do something totally wild. So yeah, so that was my, my big introduction to music, or programming in general was through music programming. Other than just, you know, basic, basic web stuff. And through this course of this, I wanted to present myself as like, I wanted to, I was trying to do too many things. I wanted to be like a sound designer, I wanted to be a motion graphics designer, a video editor, you know, Photoshop, but what a web developer and so I had a website that was like showing off all my work in those different aspects. And it was just like, totally all over the place. But I just was up with updated all the time with my work and portfolio and whatever. And yeah, so that was it. I was doing the website because I had to, and I would always find it really fun, right? So I graduated from school, not knowing, you know, sort of what to do, should mention, like I said, the people I graduated with are all doing huge, huge things. So like, the guy that stood next to me is he played guitar for 30 seconds from Mars, or 30 Seconds to Mars, which is Jared Leno's band. So he's like hanging out with Jared Leto all the time. And he was their audio engineer, and now he's in his own band and touring all the time. dude's amazing. The girl who's stood next to me is got second place on the voice, Michelle sham. Well, she's like, amazing. And I mean, we knew she was a good singer in school, but her like, her production and her music was always really good. So we didn't know how amazing of a singer she was. So when she was on this show, we were just like, Wow, she's just absolutely incredible. And then my friend Devin is like, he runs his own audio plugin company where they make audio plugins. He does a bunch of mastering. He did the mastering for like albums that have won Grammys and stuff like that. He's like, the big time in the audio mastering industry. And his plugins are used by all sorts of people like flying lotus and some major major producers. So he's doing it everybody's doing big things, really. So it was a really, really interesting program. So after that, I got to basically I had a job for The Guitar World Magazine, where I'd worked there as an intern for half a year doing video production where like, famous rock star would come in, you'd videotape them, you'd edit that you'd, you know, do some motion graphics, and it would go out on a DVD with the magazine. And I got that gig because my uncle was the editor in chief. So it was a really sweet summer job. And they had offered me a job coming out of school. But after graduating, you know, I had, I had been dating my wife for a little bit, and well, my soon to be wife. And at that time, we had to make like a real choice, like, do I take this career in New York? Or do I stay here? Because she was going to get her master's, and eventually her doctorate in Michigan. And, you know, I wasn't counting on the long distance thing working out. So I made I made the CD after you know, she, she really stressed like, 100% do not make this decision because of me. And it obviously, that's, you know, not going to happen that way. So yeah, I made the decision to stay in Michigan, and I turned down that job full time. So I could have been, you know, I could have been my career would have been totally Audio Video Production based at that point. And I could have stayed there. Instead, took a job as an accountant for a record label, ghostly International, and the ghost International, amazing record label. Yeah, I was an accountant. - -13 -00:11:23,789 --> 00:11:24,690 -Unknown: And money guy. - -14 -00:11:24,899 --> 00:13:23,970 -Scott Tolinski: Yes, I was a math and money guy. I ran the accounting, I was the only accountant for the label for an entire year, I had no accounting background, they were just looking for somebody. Like they're basically like, okay, our books aren't that complicated. We, you know, we we push out royalties this way. You know, you manage the QuickBooks this way. Yeah. Like, we're not looking for someone with like, you know, here's how to, you know, then Bell rover. Yeah, yeah, it was. So, you know, basically just monitoring stuff and make sure there's no alarms going off and making sure the artists get paid. I took the job, not because I wanted to be an accountant. I didn't know anything about it. It was a cool company recommended to me by a friend. I love their music. So I got a free record every single week that I worked there. And I definitely took advantage of that got totally stocked up on their catalogue. But yeah, I eventually took a job as a AV tech at the University of Michigan. And this whole time, I'm working on web stuff, right? Working on web working on web, I worked as an AV technician running projectors for the medical school at the University of Michigan. So you know, there'd be some presentation on some messed up medical disorder with like, gross gnarly pictures, and I would have to just run the projector. And I stayed in the projector booth. And I just brought my computer and I worked on stuff. I took freelance clients, I build websites, I was just working on stuff, learning Photoshop, learning coding better, just because it was fun to me, right? I mean, I had nothing to do sitting in that booth. So my parents, were starting a green tea store. I built them their site in Magento. And had to learn about databases, PHP, all that stuff through building this Magento site. Really definitely, like cut my teeth on a ton of CSS and understanding the differences. And I really struggled through it. I mean, I had no technical web programming background at this point. I'm just like, just totally, how long? - -15 -00:13:24,000 --> 00:13:29,309 -Wes Bos: How long ago was this? Just to give you just to give us an idea, like, how long ago was this? Listen, - -16 -00:13:29,340 --> 00:13:37,230 -Scott Tolinski: I was a, let's see. The T website was probably started in 2009. Okay, - -17 -00:13:37,380 --> 00:13:39,570 -Wes Bos: so yes, quite a while eight years ago, - -18 -00:13:39,630 --> 00:16:59,669 -Scott Tolinski: yeah. So while ago yeah. And, you know, I managed a website and they kept that they kept this T star for quite a while. Before closing it up, actually still have the domain for sale. So if anyone wants to buy blooming t.com you could reach out to me because I'm still not to it. Yeah. So So yeah, I mean, that's where I learned all that stuff. And because I got that confidence through building that site, like oh, I can build an e commerce site and accept payments and all this stuff like that. Like maybe I should just make some extra cash here. So I started taking jobs off Craigslist and minor gigs here in there, didn't know what I was doing, you know, got burned by a few clients who weren't interested in paying you know, that kind of stuff. And and just really learned a little bit more about web technologies. Overall, I was reading a lot of a list apart. I believe the book apart books were starting to come out then. So starting to read all those. And then, you know, I was really unhappy at work because, you know, you go there and I'm literally not doing anything. You turn on a projector and then you sit in a room for an hour until the class is over. And then you turn off the projector and then you turn it back on for the next class. I mean, it was just so Oh, it was just so boring, but it gave me a lot of time to work on stuff. So yeah, around 2011 of march of 2011. To be exact. My wife spotted a job opening for a local web dev shop. By not web dev shop, a local creative agency, like 12 people large agency was a place we had walked by a lot. And you'd see that their branding and their logo and you'd say, like, man, I would kill to work there. Because it's beautiful, right? everything they do is great work. They have big name clients. And I applied for the job because she found the job posting, I didn't even look for it, she found it knew I wasn't happy and was like, you need to, you know, you need to apply for this. I did. I had a phone interview with a guy named Ben chef, who is a huge, amazing mentor of mine. He's just one of the most important people in my career. And he took a chance he like, we had a really great phone conversation. And I knew it seemed like it was going pretty well came in to do the in person interview and they gave me a job. And I, I don't think I was a good enough developer at the time to get that job. But he definitely took a chance on me. And I started like that week, or that first week on the job building Drupal and WordPress sites in a professional environment for real clients. And I didn't know what I was doing. I was, you know, asking Ben every step of the way for you know, what he does for this and this and this. And it really like shaped my understanding of this stuff, and led me to getting to explore a bunch of new techniques, I was at a time when CSS three was really starting to come into being a major player in a way that you could actually use it with the prefixes. So we were using a lot of new fancy stuff. And, you know, you know, some stuff was new for both of us. And we could say, Hey, did you see this? Do you see this? And I mean, we sat next to each other in the same room. So we're constantly sharing web resources and cool tech and cool stuff. And just learning I mean, I feel like that was like a rocket ship. accelerated learning just shot me. Yeah, the, the the tech world in a way that I - -19 -00:16:59,700 --> 00:17:09,300 -Wes Bos: my learning was around that time too. And I remember it just being so. so mad, such a magical time when all that CSS three stuff started coming out. So exciting. - -20 -00:17:09,480 --> 00:17:28,230 -Scott Tolinski: I remember the last site that we had to do an image background to do rounded corners on. Like, I don't remember that technique where you'd have like, Oh, yeah, like a div above a div that was just an image of the rounded corners. I remember the doors It was called, was that what it's - -21 -00:17:28,230 --> 00:17:39,720 -Wes Bos: called? It was called sliding doors where you had like a div. You had like to two or three pieces, and then it would it would go horizontally based on how long the text was. Yeah, - -22 -00:17:39,720 --> 00:18:19,680 -Scott Tolinski: yeah. Okay. Yeah. So we were doing interest. I just remember a lot of that stuff. Yeah. And there was no like, web fonts at that point. It was just a lot of like, really big changes coming into web development. At that time. I remember I remember when we had a, the first site we did with web fonts was using. It's owned by Adobe. Now. I forget what it's used to be a big, big, big player. typekit typekit? Yeah, yeah, I think there's a lot of people using typekit still, but I remember when that wasn't even. I mean, we had a subscription to typekit long before it's owned by Adobe. And that was like a huge mind blower right there. See, I - -23 -00:18:19,680 --> 00:18:23,300 -Wes Bos: remember that. I dropped coupon you ever use coupon before - -24 -00:18:23,300 --> 00:18:33,830 -Scott Tolinski: that or see we never we didn't get into the coupon? Miller? Yeah, yeah, we purposely I didn't in some like private projects and stuff like that. But we did not add q - -25 -00:18:33,930 --> 00:20:00,900 -Wes Bos: just want to take a quick break to recognize our sponsor for syntax FM. Thanks so much to fresh books for sponsoring, I use fresh books myself, I've been using it for about seven years now. And it is cloud accounting, that is some of the best out there. So I just want to talk quick about some of the the parts of fresh books that I really like. And I use myself obviously, it's very, very complex software with a lot of going on in there. First one is obviously I use it to create invoices to send off to people, I don't have to mess around with any Excel documents or whatnot. Just pop the user's information in there, how much they want, what currency it's in, it'll send it off and email it off to them. Then I take all my online payments. We've previously talked about the the pain of accepting payments freshbooks interfaces with all kinds of different payment gateways, including stripe, so all my payments, go right into my stripe account, which make it into my bank account. Project deposits are pretty nice. So if you want to build someone for something you need 20% down before you get going, you can get a nice quick deposit with them. And probably my favorite feature of freshbooks is their their insights that shows you if a client has viewed the invoice or not as often I'll get a client being like, Oh, I didn't get the invoice but you can log in and see they actually did get it and they opened it up and then they open it up two or three times and then close it down. So that way you can tell if the person actually has seen your invoice and see why they're there? - -26 -00:20:01,340 --> 00:20:03,420 -Scott Tolinski: So it's always a great thing. Yeah. - -27 -00:20:03,780 --> 00:20:37,710 -Wes Bos: Yeah, actually, another nice thing about fresh books is they have like a automated, like, if someone doesn't pay will follow up with them. But it's like fresh books that it's like a bot that up, follows up with them. So it's not like you are like, tarnishing your relationship with a client with trying to get paid, which I think is is pretty important. So pretty cool, fresh books, check it out for a 30 day free trial, go to freshbooks.com slash syntax and enter these enter syntax in the How did you hear about us? Thanks so much to fresh books for sponsoring. - -28 -00:20:38,520 --> 00:23:33,150 -Scott Tolinski: So the other company I should mention is called que Ltd or que Ltd, I think their real name is quorum. And it was just 1212 people, we were the only two devs there. And we had some pretty big clients like the SIGGRAPH conference was like our biggest client. So that was a pretty high traffic site. And it was went from like, you know, I was making sites for nobody on Craigslist, really. And now all of a sudden, I'm making sites that are getting massive amounts of traffic, having gotten massive amounts of things and just got a lot better. And I hung out in that job for a while, like two or three years. And Ben Ben left actually to take a job as a dev at the University of Michigan, and left me as the senior developer there. Q So I was the senior dev for about a year with some talented dev working with me. This guy, Mike bondra is out in Seattle, now really talented guy. And he was he was on to a bunch of stuff that I wasn't onto. At this point, we were doing a lot of WordPress and Drupal. And he was on to node j s, which was brand brand new. I mean, we went to meetups and stuff like that, and trying to wrap our heads about what working in Node would even mean, and we didn't have a good work or get a good Git workflow either at this place at the time. Git was popular, but not like, totally everywhere, everywhere. So you know, Mike, Mike, and I set up a total Git workflow. And then we decided to start building and Mongo, express and node. And ej s, I believe the site was in whatever when those major template templating languages at the time. So yeah, so that's where I started to learn a little bit more about node stuff, more server side, backend stuff, and we built a really cool site. So from there, Ben, at University of Michigan was, you know, he was getting paid considerably more than I was to do like, work at U of M. and was like, basically, Hey, man, why don't you come over and work at U of M, I could probably get you a sweet gig here. So there was a little bit up in the air with the future of the company, being a small agency, you're sort of living. It's not paycheck to paycheck, but like, the company is definitely surviving on the clients it's getting, and I wasn't confident in the future of the company. They're still around, and they're doing great work. So you know, I you never know, you know, what's going to happen, but I wasn't quite super Sure, you know, how longer how much longer that opportunity would be there. So I took, took Ben up on his offer and gave got me an interview or killed the interview, and started working at U of M as a web developer for what is an internal ad agency of the University of Michigan, basically, we would only be building sites for U of M. But each department UVM operates like a little country. - -29 -00:23:33,180 --> 00:23:37,950 -Wes Bos: Yeah, it's, it's like ridiculous. Universities are like that. They have to like, apply and - -30 -00:23:38,310 --> 00:24:32,040 -Scott Tolinski: yeah, so we still had to bid on projects. So it was like U of M, it enough. We'd be bidding like against my old company and other other people like that. But, you know, they would, you know, we would have client meetings and whatever. And I found the job to be good for a lot of reasons, but like terrible for others. browser compatibility was a completely different, like, we had to support way, way, way further back like IE, so yeah. And then like q we had already dropped IE eight. I mean, we were able to be progressive on that front, because we were writing the contracts. This is University work. So I'm suddenly like, not able to use a ton of the techniques I was looking to use. When was this then if you're dropped? I ate already? 2014 Okay, 15 out of I would maybe want to double check some of these numbers and 15 things. Yeah, - -31 -00:24:32,040 --> 00:24:34,740 -Wes Bos: what, three ish years ago? Maybe? - -32 -00:24:34,950 --> 00:25:32,190 -Scott Tolinski: Yeah. That doesn't make any sense. Then I would have to check my timeline with at least dropped IE seven. So maybe that was it. And I had to just jump into the back end of the IE seven. Oh, yeah. Either way. So we were at University of Michigan and building these sites and there was like it was getting to be no fun because I couldn't use anything progressive. referred to frequently as a hipster developer buy somebody out there some of the people, I should say that there's a lot of everyone that worked there were super cool. But not everyone was super open to new tech. So like, Yeah, I was the only one for a little bit using sass. Well, actually, I shouldn't say only one Ben was using sass as well. But people were actually frequently ripping on me for using sass. Like, that's not real CSS, that's a crutch. It's just like, that's so dumb. And and actually, enough, some of these people to this day probably aren't using that stuff. And still, like sitting on this style. Like, it's - -33 -00:25:32,190 --> 00:25:52,530 -Wes Bos: funny how, how into it. We are. And then you hear stories from people that like someone emailed me the other day, they're like, they're not allowed to use ESX. Yeah. For and not because like, they have actual reasons. It's just because the team is like, no, that's stupid. Why would we do that? Like we're doing things our way. - -34 -00:25:52,770 --> 00:26:21,000 -Scott Tolinski: I interviewed for a job recently. And I was like, Oh, so using ESX. Without that they were just like, No, I was like, why you're using they're using Webpack. They were using no way they were using I'm sorry, they were using gulp. They were using Gulp as a build system. But like, it's a free ad. And then you get a whole bunch of great features. Like why wouldn't you use it? If you it's like that. They're like, Oh, we don't want to deal with compatibility issues. That's not like a thing. Yeah. If you have a it's, - -35 -00:26:21,120 --> 00:26:30,540 -Wes Bos: it's frustrating to hear hear stories like that. But it is I think it's more common than we actually think when people listen to this podcast. Oh, must be nice. But - -36 -00:26:30,660 --> 00:26:33,990 -Unknown: yeah, we're no way I can. Exactly. - -37 -00:26:34,530 --> 00:26:37,770 -Wes Bos: Yeah. So it's so yeah, you're at U of M creative. - -38 -00:26:37,800 --> 00:31:39,090 -Scott Tolinski: Yeah. And I mean, that's where I got to, like, really experience a lot of these issues where you don't get to work on the stuff you want to work on. I found, like the pace of the projects to be extremely slow, like project manager sitting on sites for months. And it's just like, okay, I've completed all of my work for the next like four months, like, What am I supposed to do other than just sit here? So I started learning a lot of Angular stuff at the time. Yep. And so just really going through the front end framework, I learned backbone, I learned Ember, I didn't learn any of them particularly well, except for Angular. But I did enough to like, I got a tour of the front end frameworks at the time, like Marionette and backbone. Ember, and both Ember data was just starting to be a thing. And I liked Angular the best because it was obviously the easiest, it looked a lot like HTML. And it just felt really nice. Right? Okay, this is data binding is pretty amazing. Because doing that, without Angular would have been a pain in the ass. So yeah, I started making a bunch of stuff for fun in Angular, and I loved it. I really enjoyed it. I really like the super powers it was giving me and then I got a sort of out of the blue job requests through I think it was even through LinkedIn. And they were basically saying, hey, how would you like to build for.com? It's just sort of like, well, this is a it's not, it's not an opportunity to say no to I didn't work at U of M created for an entire year. I don't think I think I only worked there for like, eight months total. And I just booked it out to go build for.com. Because, well, I should say it was also like a double in in paycheck. So it was like a huge, huge opportunity, right? And it fell into my lap. Like, here. You know, the interview was like, really nice and easy. You know, always known interviews going well, when you're talking to like the technical manager about some web tech. And they're like taking notes about the stuff you're saying like, Oh, I didn't know. So I felt really good about the interview, got the gig. And I got put on a team of three really good developers. Well, I should say two really good developers, one of which who couldn't cut it got fired and like the first two weeks, and that like woke me in the sky, Jeff Marcel, who was awesome developer from Detroit, it kind of woke us up a whole ton. Like, okay, don't mess this up. huge opportunity. We started building some major, major interfaces for Ford and Angular. And we got to choose the direction technical direction of this entire project. Like if we wanted to do something some way Yeah, he and I could make these choices. Now the caveat here is our work isn't going on for.com. We're a part of a team of people who were developing design experiments and interface experiments. So we would work with the designers who would come up with something not even super radical, but radical for Ford standards, right? And then yeah, it was our job to quickly prototype this up in a way that was like fully usable with real data, and that we could eventually point the other markets to like, China, whoever to say, Hey, this is how you do it. here's the here's our code. Here's our CSS, whatever. And our whole goal was to build out this like style guide full of Angular code. Opponents that were essentially like, this is how you're supposed to do it. But my physical code did not end up on the site, right? It's ridiculous. They have like 90 some markets for for it right. And all of those markets are on their own platform. Like some of them could be Drupal, some of them could be a custom thing, you literally have no idea what these platforms are. So instead of like building a big platform, they're just like, here, you just write the front end code, and we're pushed out, and we'll leave it to their developers to implement it. The bummer of that is, is that some of those developers didn't implement our stuff very well. Some of them didn't, didn't implement it at all. Some of them just flat out refuse thing. They didn't know how we got people saying, I don't know how to do this. I don't know how to make this. So Wow. Also, at the end of the day, you know, they spent a bunch of money on us to do this really great design, exploitative work, and the designers were awesome. We had a team of like 30, some people. You know, one of the guys who worked on like the Domino's app was on it. Like just like people from the industry in our field that were all super good. Jeff and I as developers are super good. And we brought in another developer, this guy, Bobby, from part of Michigan, that Ben lived in, and he was super good. And so we just have a lot of like, really great talent. And Bobby was like, really super into RX js, he was into react, he was into a lot of functional programming stuff and like sort of blew our minds with some of that stuff. Same time. I'm learning Meteor getting into that. Yeah, - -39 -00:31:39,630 --> 00:31:45,090 -Wes Bos: what when? And when did you start level up? tuts? Obviously at this point, you are going on YouTube, right? Yeah, - -40 -00:31:45,090 --> 00:36:23,040 -Scott Tolinski: I totally glanced over that one. So in 2000, in 2011, back when I worked at that small agency que Ltd, I worked with Ben and Ben and I used to like get so mad. We were doing a ton of Drupal work because that's like what our agency like to do. And yeah, we we would be like, oh, x documented feature isn't documented Great. Well, like, why isn't this documented anywhere? So we were just getting really like mad with the state of Drupal docs, and went through and just started making a bunch of tutorials. Oddly enough, he was doing expression engine tutorials and I was doing work or Drupal tutorials, teaching the stuff that we felt like was overlooked and so we both started level up tuts level up tuts at the time now level up tutorials and the logo was designed by our internet cue Mike McMillan who's like a super good designer like he's he's doing freelance right now. So if you need like really excellent design work Mike McMillan I think his website is Mike Nick chillin. Super cool guy but so he did our he did our logo for us and like a hackathon style. And we just built the site and I'd say Ben maybe recorded like 50 ish tutorials for level up tuts before he had a couple of kids. And life was not super easy to record tutorials all the time, obviously, you know, that's like a, he'd get home from work. And last thing you want to do is record a few tutorials. So he had to hit the to bail out but you know, and honestly, I have like an open door policy for Ben. So if he ever wanted to step in, and like record some cuts, I would be 100% anytime he wants to do that. So you know, he and I put in a ton of work on this thing to get going. And we just had this idea of like, hey, tutorials should be easy. There should be more of them. There should be more documentation. Like why don't we just record 100 tutorials really quickly and get that out there in the world just became a thing I did after some time and even though he stopped I never was super interested in stopping so I just kept hammering it through. I started actually the level of tutorials origin story itself is pretty intense. I got a concussion through breakdancing. I have the video on YouTube. It's not public, but I have the video real basically just like drop myself on my head on like tile floor. It sucks. My head bounces off the floor. It's it's totally gnarly. I ended up I did it the day before our engagement photos for my wife and I and I like woke up the next morning and like half my face was bruised and she was just like, come on, man. So we obviously had to reschedule those. But yeah, so because I had a concussion I was out from February to I was out of commission of like doing activities like working out or you know, dancing from February to September. So by February or by March I had already created level up with Ben so I was just like going stir crazy. I'm kind of like, not totally hyperactive, but I you know got to doing stuff. It's like, Ben, I'm going out here. Let's let's just do this right now. Like we both know, this is good idea. So let's just do it. So I, so those are march of 2000. So 2011 No, that would been march of 2012 that we started this. So we started level up march of 2012. And yeah, that's, that's pretty much it. And I just kept it going. So this whole time I'm working at team Detroit, you can follow this progression along in my tutorials. If you look at the level of tutorials like videos, you can see the progression of exactly all of these jobs that I'm talking about. It's actually kind of ridiculous. I'm working at ACU all the videos are about Drupal, I'm working at U of M, the videos are about WordPress, because I was doing a lot of WordPress, I'm working at Ford, the videos are about Angular, working at, you know, at that same time, I'm doing Meteor stuff. So video start to be about Meteor. And then when the Ford gig is over. By that time, because we were doing all Angular, it's when I dove into react, then a video start to be about react. So the level of tutorials like YouTube videos, like absolutely mirror what I'm working on at work, I would work on stuff all day long, come home, record three cuts or whatever. And then call it an evening, my wife was getting her PhD. So like she's studying and working all evening, she had nothing to like she was like off on her own studying. I had nothing to do other than entertain myself, which I'm pretty good at. So - -41 -00:36:24,869 --> 00:40:25,260 -made 1000 tutorials. That's how I Wow. So yeah. So yeah, after that Ford was just a contract gig project is over. The guy who got it the best out of that was Jeff, who is who got hired on to maintain the style guide. And I should put maintain in quotes, because he just sat and looked at it for like half a year and year and got paid for it while doing freelance work. So I wasn't so lucky. So I branched out and I was already living and we moved to Denver, I actually hilarious story we were I was working in Detroit in Dearborn, right at Ford. And I told them, I was like, so I'm gonna be moving to Denver, like expecting them to give like, that'd be my two weeks notice, right? This is my two weeks notice. And they were just like, yeah, we know. So like, just send the computer back when your contracts over whatever. And I was just like, Wait, what? So they, for some reason, erroneously thought that I had already written into my contract that I would be working remotely at some point. I did all. And I did not correct them. It was just like, Yes, I will be working remotely. And we all know that. Yeah, like, let's just continue this idea. And so because of that, I got to come out here and work on the Ford project for like six more months. And that was nice, because, you know, I got to work was really fun. Got to do that work somewhere. And while I was out here, just decided, hey, you know, when this contracts up, I'm gonna try level up full time, and started recording a lot more tutorials doing more premium content, Iran stuff. Yeah, so and, you know, now that I decided to do the level up full time, it was a lot of decisions about really building my own platform. So in the past level up, tut's had been built on Drupal. And we'd sort of maintained it that way, for a long time, because it was easy, you know, there was built in JSON importers and stuff in the Drupal that would drop your JSON directly into your your schema, essentially. And it was really nice, but you know, Drupal has its issues. It's complex, it's kind of a pain in the ass to do anything custom. I mean, there's a lot of abilities to expand and whatever. But like, I remember, Ben, Ben will find this hilarious. He's listening, because there was like a moment we were at a hackathon, or code party or whatever. We were just working on the level up site. And Mike, our designer was like, Hey, why don't you just do it this way? And we both look at each other. And Ben and I are just like, cuz it's Drupal. And he's like, oh, but I got an idea. How about we do it this other way? And then we're just like, because it's Drupal. Like That was our answer for everything, because there's just like a pain in the ass to do anything. So you know, making that decision to move off of that platform, I decided to build my own suite of sites I built the level of tutorial site as well as the store both is like separate Meteor sites that are like totally custom ecommerce store as well as like a totally custom site, of which I actually have recently merged the two because they were sharing a database anyways. But there I mentioned before, there was a lot of complexities and how they handled sharing things across. I mean, there were several components that I literally had to duplicate just because they're in two code bases. And they don't need to be in two code bases. I didn't want to make them a package because it just added a layer of complexity I wasn't super excited about. So both of these sites were built. You know, with the understanding that it would be able to grow and get fully customized. Obviously, you have to maintain both of those sites on like the only developer on all of this stuff the whole time, I built my e commerce platform in a weekend, just like after struggling through that the idea of Should I build this or not. And then I remember, my wife was in psyched about it, I just like, locked myself in a room for a weekend and like worked my brains out until I had a little e commerce platform that was like, it's getting better and better all the time. But it's obviously missing a ton of stuff at the time, but it worked. So - -42 -00:40:26,639 --> 00:41:51,030 -you know, now it's now it's part of the suite of sites. And I love that control of having these platforms that I built in, you know, one day, I would obviously love to have more developers working on them, you know, we'll see if the level of tutorials can support that at any time, and just be able to grow that way. Because the sites are great. I'm really psyched about them and use it as like a playground to try out all the new stuff. And it's always great thing to have is like this, the site that exists that, you know, you have full control over if I want to use x technology for this, oh, if I want to, oh, let me maybe throw in Apollo in there. Maybe I'll just try it out on one collection and see if it works, right. So, you know, these sites exist as a playground for me, but they're also like a huge learning experience. It was the first time I'd ever built an e commerce site outside of CMS outside of Magento, or WordPress, or anything like that. So yeah, you know, you grow exponentially by these projects that you're able to just get get yourself self motivated by right. I'm motivated to build this stuff, because it's a level up tutorials is my baby, right? So I'm so motivated to build these platforms that I'm going to go nuts learning this technology to make these things nice. So you know, some advice there is really just to, like, again, follow your interests and to let those interest drive you into New Tech. Let those things drive you into really like exploring new things. And just growing that way by just purely sheer excitement, right? - -43 -00:41:51,420 --> 00:42:01,710 -Wes Bos: Yeah, I think that's so important. Don't pick up stuff because you think it's what you should be doing. Just keep following what you're excited about. I think that's one common theme you'll hear over and over in this podcast. - -44 -00:42:01,730 --> 00:42:15,980 -Scott Tolinski: Yeah, if you're not excited about something, you're not going to learn it well, and you're not going to be happy doing it. And I've always prioritized personal happiness over like, most things in my work, right? It's like, - -45 -00:42:16,020 --> 00:42:22,190 -Wes Bos: Yeah, well, I think the best way to say that is you can make $150 an hour being a SharePoint developer. - -46 -00:42:22,190 --> 00:42:24,110 -Scott Tolinski: Yeah, exactly. - -47 -00:42:24,150 --> 00:42:28,770 -Wes Bos: Yeah. Apologies to the SharePoint developers in the crowd, but no fun. - -48 -00:42:29,010 --> 00:43:37,650 -Scott Tolinski: It's not fun. And then maybe it is fun for some people. But yeah, it's certainly not fun for me. And like, I like having that freedom and being able to explore all the new new fun stuff. And I still I used that like that hipster developer sort of, like slight I was given at my one job is like, I don't know, I wear that as sort of like a, you know, way to like, bash me fraud. Yeah. badge of pride, right. I mean, I'm not like, I don't know. I'm a developer. Yeah, it's like I was into new, new exciting technologies. I what a huge bummer. That is, right. Yeah. Like I was trying new things and not doing the same thing over and over again. Yeah. And, you know, just to give Michigan some Michigan creative some credit to there was another developer there named Wally Colts, who is like, he was into some really, really cool stuff. And I don't feel like enough people are listening to his direction, right. So he was, he was on some like, what was it when Facebook had released their hip hop thing? Do you know what I'm talking about? - -49 -00:43:37,710 --> 00:43:39,380 -Wes Bos: Yeah. php VM? - -50 -00:43:39,510 --> 00:44:01,170 -Scott Tolinski: Yeah. Is it? Is it hip hop for PHP? Is that what it's called? Yeah. So PHP, transpiler. by Facebook, I mean, he was on that, like, the day it was out. And I remember him, like telling us all about it. And like, I didn't really necessarily understand it at the time, but I don't remember anybody else being super excited about it. And that kind of bums me out to write like a series on some Yeah. - -51 -00:44:02,280 --> 00:44:04,949 -Wes Bos: Why would you rewrite PHP? Yeah, - -52 -00:44:05,280 --> 00:45:30,000 -Scott Tolinski: yeah. Well, yeah. But either way, like, I don't know, they're, you know, they're there are those people and like, if you have that person at work, who's on to some, like, really exciting or interesting stuff, I mean, really reach out to them and, and get up on some of that stuff, too. I mean, those people are happy, typically happy to share what they know. So yeah. And yeah, I worked for a startup for about a year echa which is like a full stack thing that I built entirely myself get@yahoo.com it's not like there yet. I think that they need some money to make it go any further. But really, it's it's basically like a really modern booking app. It's like Instagram meets booking, you find a tattoo artist you like, you want to book them directly from their hairstylist you like you want to book them directly from there. Like I said, it needs a little bit more before it crosses that finish line. So we'll we'll see if that ends up. Going into We're not but yeah so for the past year so I've been doing that it was an opportunity given to me by a friend out here. And the whole time level of tut's right level of tut's has just been hanging out and making content all the time. And so now that the startup is not my, my main thing on my plate anymore, there's a lot more content a lot more improvements. And basically, level up tutorials is 100% the forefront once again, and I'm really, really psyched to be doing it all the time now. - -53 -00:45:31,050 --> 00:45:32,730 -Wes Bos: Wow. Yeah. So - -54 -00:45:32,730 --> 00:45:55,770 -Scott Tolinski: that I mean, it's, it's wild, right? It's not non typical stories, right? I worked as an accountant, and an AV tech, Ken Ham projectors. Yeah. I wanted to do motion graphics full time. That was my like, dream job. And then I discovered that I liked programming more. And now that you can do motion graphics in programming, like, I love motion graphics. Oh, man. Yeah. - -55 -00:45:56,460 --> 00:46:20,820 -Wes Bos: I love that. That's like such a good story. Because it really does show that like, you didn't go to school for this and then became a developer. Like you're all over the place. And one thing led to another little interests led to another thing, and, and you're where you're at right now. And that's probably motivating to someone who's just getting started right now. Yeah, 510 years from now, you might you might not know where you're gonna be, right? - -56 -00:46:20,880 --> 00:47:06,449 -Scott Tolinski: Yeah, I was several years out of college before I even got my first programming job. And I honestly credit all of the major like, Major, big things to my wife, because she found the job for the web developer. She also looked at my website and was like, you are trying to do too many things. Like why do you want to be a sound designer or emotion designer, a graphic artist, like what do you want to be all of these things? Like, just pick one. And obviously, I picked the one that was most like, personally satisfying, which was programming, right? You solve a bunch of problems, and you get all that gratification of everything comes in, you fix all these problems, and you feel good about it. So I picked programming because she made me pick something and I couldn't be any happier with that choice. - -57 -00:47:07,139 --> 00:47:17,790 -Wes Bos: It's amazing. Wow. That is pretty cool. I don't know any any final words lessons learned about about your whole journey? Yeah. - -58 -00:47:17,790 --> 00:48:10,290 -Scott Tolinski: Like, you get the places you get because you, you follow the things that make you excited. And so you know, I followed the technologies that made me excited, I went off and went a little bit rogue, right, you know, we're all doing WordPress or whatever work. I was excited by Angular. I did Angular stuff. I was excited by sass I did sass. Nobody told me that I could do that. And if I couldn't do it for a work project, I was doing it in a side gig. So it's like, he let let the things that excite you pull you into new things. And you know, be Don't be afraid to jump on that you don't want to be the guy who's sitting there building a site with, you know, last 10, I don't know, centuries old tech, thinking like, I can do this forever. Right? You're you you're going to be the webmaster exactly right. I - -59 -00:48:10,290 --> 00:48:57,900 -Wes Bos: think I think one thing that that comes from your story is that like your career is not like an incline your your careers more it is obviously it's an incline. But it's what do you call that it's not a smooth transition. It's May there's major steps that you took in your career, and they were all huge steps up for you. So it's not like you were just doing like, every day you got a little bit better. It's that you took these massive risks and these big jumps from job to job to job where your salary had doubled, or you took on an entirely new technology. And I think that if you see people where you're like, how did they even get there? It's it's almost always like, Oh, I was doing this one thing. And then I totally switch to something else. And that was a huge step up in my career. - -60 -00:48:57,960 --> 00:49:42,360 -Scott Tolinski: Yeah. And is the ability to take risks and to jump into those new things. And, you know, I've got some really good advice from my dad who's had a really great career. He's a automotive engineer. And I asked him, you know, when no, one of the jobs came up with just like, I forget what it I think it was the Michigan creative job came up, I'm just like, I don't know what to do. You know, I really love working for this agency, I have all this freedom, I'm gonna have less freedom at this new place. And he was like, I'm not gonna tell you to do anything in particular, but every time I had an opportunity to jump, I jumped. Yeah, not to jump to a new job, but like jump into something new and exciting. If there's something to jump forward. He said, You know, every time I had an opportunity, I took it so you know not to saying you should take it but you know, who knows? - -61 -00:49:43,079 --> 00:49:45,449 -Wes Bos: Yeah, absolutely. That's really cool. - -62 -00:49:46,619 --> 00:52:41,219 -Scott Tolinski: Okay, and now it's time for a sick pics, in which we give our sick pics, basically the sickest of pics. And since I give my story today, I'll be giving a sick pic and in the West Story, which is part two of this episode, he'll be giving his sick pick at the end of his story. So, yes, my sick pick this week is someone I mentioned before. My buddy Devin Kerr, he started his audio plugin with company, which is good hertz.co was the website hertz is spelled H e, r t z. So good hertz.co he makes up some insanely excellent audio plugins. And what I mean by that is these things aren't really things you're going to find anywhere else. And, you know, I say this as even though this guy's like probably my best friend forever. Yeah, I've known him since like the eighth grade. And we went through college together. And, you know, we keep in touch like crazy. But like, regardless if he was the one making these or not, these things are as as real as it gets, like I mentioned before, you know, artists like flying lotus, and people use his plugins, if you're familiar with the band vulfpeck, you'll notice one of his plugins is the volt compressor, which is made with vulfpeck. He's, uh, he did the mastering for the vulfpeck album. So a lot of his work is like, it's just, it's stuff that doesn't exist anywhere else. Like he he did his master's thesis on, like, 3d sound space. So like, basically, you have an interface where you want to put a sound somewhere, right? Like, you have your headphones, it's for headphones, right? It's a thing called can opener. And you can say like, I want this sound to be in the top left up over here, or like five meters away, or I want this down to be bone over here, like 10 meters away. And like I said, he did all this his his masters work on understanding the positional audio. So these plugins are just awesome. And they're not totally useful for all situations. Like, he has the volt compressor, right, which is a compressor. And if you use two audio plugins, it compresses your audio sort of evens out levels, you can think of it doing a sort of like that, but there's both compressor you would not use for her, like spoken word or something like that. Because it's it's supposed to be made for a very specific sound of like 1970s analog compressor emulation. So, you know, there's like all of these have a very specific use, but you won't find anything else like them. So yeah, good. hertz is excellent, excellent stuff also was designed work for them. I don't think he personally did the design, but like the design on all of the plugins is as good as it gets. None of those like fake skeuomorphic knobs that you have to turn on a lot of audio plugins. So - -63 -00:52:41,790 --> 00:52:42,690 -Unknown: yeah, - -64 -00:52:42,690 --> 00:53:11,219 -Scott Tolinski: it's he took a very different approach to it. He's been doing this stuff for a very long time. And obviously, he knows what audio engineers want to see out of their stuff. So yeah, I highly recommend if you're doing any sort of audio work, you're working with recording music or production. Good hertz. The prices are super reasonable. You're getting some like totally unique plugins and packages and stuff like that. Obviously, this isn't an ad. Andy's a good friend, but if neither of those things were true, I'd still be recommending these plugins. - -65 -00:53:12,150 --> 00:53:12,869 -Wes Bos: sec. - -66 -00:53:13,110 --> 00:53:38,670 -Scott Tolinski: Yeah, sir Keck. Yup. So join us in the part two, where we give Wes his origin story in here. Wes is sick. Head on over to syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player and drop a review if you liked this show. Until next time, - diff --git a/transcripts/Syntax70.srt b/transcripts/Syntax70.srt deleted file mode 100644 index cd7d48cae..000000000 --- a/transcripts/Syntax70.srt +++ /dev/null @@ -1,348 +0,0 @@ -1 -00:00:01,319 --> 00:00:09,600 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West - -2 -00:00:09,600 --> 00:00:48,479 -Wes Bos: boss. Hello, everybody and welcome to syntax the podcast with the tastiest web development treats. Today, we've got a potluck episode, which is when you bring the questions in Scott and I attempt to answer them. I always like these episodes a lot, because we tend to touch upon a lot of a lot of different topics, whether it's soft skill stuff, or related to JavaScript, or just like being a professional in our industry. So today's episode is sponsored by fresh books, which is cloud accounting, and M lab, which will host your MongoDB database. We'll talk about those partway through the episode with me as always, is Scott to linsky. How you doing today, Scott? - -3 -00:00:48,509 --> 00:00:54,570 -Scott Tolinski: Hey, I'm doing super good. Super good. Yeah, I got too much to report here. How about you what's - -4 -00:00:55,349 --> 00:01:42,150 -Wes Bos: not too much, I've just been heads down recording for about two weeks on my advanced react course. And it's going really, really well. I'm super happy. I just finished up the permissions videos a couple days ago, which I'm super happy with how they went. That was probably the hardest part. Because it's kind of this like cyclical thing where in order to manage permissions, you need permissions. But in order to need permissions, you need to manage permissions. And there was really just like a lot to add both like on the client side in order showing components based on permissions and on the server side, which is being actually able to write to database or to update something. So I was really happy to to get those done and how well they came out. Because it's a complex topic, we did a whole episode on it. And it's not an easy thing to just whip up, especially when you're doing it all from scratch. - -5 -00:01:42,179 --> 00:02:14,060 -Scott Tolinski: Yeah, and you're having to show people and explain it and everything like that. That's super good to hear I finished recording my my testing series, I'm just like in editing now. Yeah, and it is it's one of those things, we're working on the stuff that's like, almost the moment you finish recording a video, you really know how well that video is going to turn out. Sometimes you record when you're like, Ooh, I'm gonna have to like really, really fix this in editing, or maybe even recorded a second time or something like that, or, you know, get into it a little bit more. But sometimes you finish a recording, you're like, Ooh, this is gold. - -6 -00:02:14,519 --> 00:02:49,110 -Wes Bos: Yeah, so I feel that way a lot. Sometimes I will record like 35 minutes worth of stuff, and then I'll, I'll start editing it, and I'll just scrap it. And that's the reason why I'll edit the video immediately after recording it. Because I'm in that headspace then. And sometimes I'm like, I find myself a little bit too flustered with all the stuff that's going on. Or, or maybe I hit one one too many bumps in the road, I often will leave my little mistakes in because they're helpful, but too many is is too confusing. So I'll just scrap the entire thing. And start again. And it's often much better after that. Yeah, I - -7 -00:02:49,110 --> 00:03:09,479 -Scott Tolinski: think I have like a rage limit. And then like if you keep like, let's say, just keep messing up really dumb things. And then I'm just like, Okay, this is not happening. Let's stop this. Let's regather myself look, three, gather what I'm doing. Let's look think about it a little bit more. And then like, try it again. It's almost 100% better every single time the second time. - -8 -00:03:09,779 --> 00:04:02,580 -Wes Bos: Totally. That's interesting to hear. All right, I think we're ready to jump into we got a whole bunch of questions. As always, if you have questions you'd like us to answer on a potluck episode I often will defer people from Is that the right word defer people email me questions about their lives all the times. And I'll tell them to send it to the potluck button because then we can answer it and everybody gets the benefit of it. I don't like answering questions in private too often, because it's helpful to do it in the open and for other people to answer. That's why I was such a big fan of Stack Overflow back in the day, because everybody could benefit from you spending a little bit of time on it. But we've got this potluck button, go to syntax.fm. And there's a button in the top right hand corner that says ask a potluck question. You can ask any question you want there? And if it's too big of a question, we'll obviously just turn it into a full episode. So anything you'd like to hear us talk about? Make sure you send it to the Pollak button. - -9 -00:04:02,669 --> 00:04:13,319 -Scott Tolinski: Yeah. And we do one of these episodes a month too. So it's not like, you're going to wait forever to hear your question answered. Although we do have a considerable backlog of questions. We got a lot of cool. Yeah, - -10 -00:04:13,319 --> 00:04:47,850 -Wes Bos: not all of them are great, though. Like, what do we got here? We've got probably 300 questions. And we've answered probably 70 of them. And then I would say another hundred and 50 of them are our questions that aren't great for the show. But but they still help us to get an idea of what are people trying to get out of us, right. Sometimes a question isn't like something you directly answer, but it's something that you can you can sort of hear the motivation behind the question. And that will help us answer and a lot of other questions are duplicate as well, which is also very helpful to see what people want the most. - -11 -00:04:47,850 --> 00:05:07,440 -Scott Tolinski: Yeah, yeah. Well, fear not. We should. If your question is good, we will get it on the air. But we have a host of excellent questions today. Do you want to kick it off from a question that comes into From you gonna butcher it anyways, someone has caught on that we do not do names well here. - -12 -00:05:10,410 --> 00:07:23,250 -Wes Bos: Alright, let's kick it out. So I'm curious why you don't work with TypeScript, I've done a couple bigger react projects now with it, and it saves so much time in the long run. Also, the autocomplete just is obvious on the whole other level, most of the time, I find myself not looking at the docs anymore. If I use TypeScript module since autocomplete works so well, implying that the author has chosen good function names, you're gonna butcher it anyway. So thanks so much, you're gonna butcher it anyway. So maybe we'll start off with first our thoughts on on on TypeScript. It maybe we should explain kind of what it does as well, because I know not everyone who listens to podcast knows what it does. So TypeScript is sort of a language that you write that compiles down into JavaScript. And it's a typed language, meaning that when you define a function, you have to define what are the inputs and the interfaces to that function, and what type of thing that it returns. And by being so rigid with what it takes in and what it returns and all the information about your function and about your package, you get really, really good autocompletion, you get really good compiling, oftentimes, you'll catch errors before it actually goes out to the website. And it's just amazing, because it fixes so many of the the problems that people have with JavaScript. So I'm a big fan of it, I think that it's is really, really neat. I definitely recommend learning TypeScript. I myself, don't use it for my tutorials. And the reason behind that is because we've talked about this before in the past, it's because not everybody knows TypeScript. And I would say that TypeScript does have a bit of a learning curve to it, I wouldn't say it's significant, because you can, it's like, it's one of those things where you can kind of just start to use little bits and pieces, and then kind of go whole hog on it once you once a year you're into it. But I can't do an entire tutorial in TypeScript, because the people who already know TypeScript, they will do the tutorial in TypeScript anyways. And because they already know it, but the people that don't know, TypeScript, it's just another barrier. And there's already a bit of an exhaustion in JavaScript where people go, Oh, I have to learn another thing before I can actually build this thing. I'll likely do a TypeScript tutorial at some point, because I'm such a big fan of it. But it's, it's not something that I'm going to put as a roadblock to someone who's going to be taking my courses. - -13 -00:07:23,430 --> 00:08:38,399 -Scott Tolinski: Yeah, I have it in my notes here. TypeScript is dope. I mean, I love TypeScript. And I put a lot of the same reasons that I don't utilize it in my courses. And the reason I don't have it in my code base is largely that I just don't have the time to move everything over to TypeScript. And maybe it's one of these things that any new component that I'm making should be built in TypeScript. But again, I just haven't, I haven't done it. A it's funny, you did mention it being a little bit more difficult for beginners, or people who haven't used it to to ramp up that learning curve a little bit. It's interesting to me, because when you go from a non type language, a lot of people have JavaScript is like their first programming language. And they're not they don't have the experience with types in general, when you start to get into a type language. And what that means I think it can be a little jarring for people who are so used to just like throwing stuff around wherever they want. And then the benefits definitely outweigh the costs in that regard. So I highly recommend I mean, I've been planning to do TypeScript videos for a little while here. I actually recorded a what is TypeScript video that has not yet made it up onto what is Wednesday just yet, but I think there will be some TypeScript stuff, probably in the free tutorial category coming on level up tutorials at some point in the near future. - -14 -00:08:38,539 --> 00:09:09,529 -Wes Bos: Yeah, totally. I think it's, it's one of those things that you often will hear intermediate advanced developers being like, oh, why did I take so long to learn this, everybody should learn it. And I think the kind of looseness of regular JavaScript, although it does cause many problems, and is a bit of a mess. It does help it I think it does aid in learning, learning JavaScript, because it is so so easy to just get up and running. You don't need to know a whole bunch of stuff. Like, what is a string? And what is a float and integer and all that stuff? - -15 -00:09:09,720 --> 00:09:25,080 -Scott Tolinski: Yeah. Also, we've mentioned in an episode before I was sort of waiting for the like, winner of the typed language horse kind of thing. I think TypeScript is is is pretty has a pretty commanding lead. I don't know. What are the alternatives? TypeScript? - -16 -00:09:25,350 --> 00:09:27,330 -Wes Bos: Hello from Facebook. - -17 -00:09:27,390 --> 00:10:03,049 -Scott Tolinski: Yeah. And reason. Not live reason is like, Okay, so here's my thought I would my thoughts on this is that TypeScript is probably the most popular and the most used at this point. And then reason is really super cool. But I think it's so different from JavaScript that it's going to make it difficult for people to dive into it, and therefore you'll probably see a slower adoption unless something happens and it's like all of a sudden blowing up. But you know, I was really really interested in having reason, friend center, but it's like, I just don't know if If it's going to gain the traction that TypeScript is going to gain, - -18 -00:10:03,330 --> 00:10:47,490 -Wes Bos: Yeah, totally. I think that's pretty good answer so that if What if you have thoughts on TypeScript or any of the stuff tweeted at syntax FM, we'll retweet it to your our followers. Well, how many? Listen, how many followers do we have on our Twitter right now let's pull that up real quick. I really like when people tweet their thoughts to the syntax FM, because like, this is just got nice opinion. And it's not the final word on things. And you're very much welcome to have your own opinions. And also, I really like hearing the insight to it. And when you send it to the at syntax, FM, it's it's helpful for the entire syntax community to hear that stuff. So I think we've got just over 12,000 people 12 point 6000 people on our Twitter followers, so we usually get some decent discussion going on there. - -19 -00:10:47,700 --> 00:12:18,120 -Scott Tolinski: Yeah, absolutely. Cool. All right. Let's get into this next one here. This next one is from man, why did this put this on two separate lines? It's from Matthew Leland, which is an easy name to say, but the name it broke it off into several lines. So it was math, W. And I was like, Oh, is this some sort of? Is this a for name here? Matt? Ellis? No, it's Matthew. Okay, so I'm even butchering the easy ones. How do you recommend work with API's libraries that compete with the DOM, like d3 plus react, or react plus Google Maps? The biggest issue is if you unmount, a component, you lose the ability to update that d3 chart with your parents state. Oh, this is a good question. I do some things like this with the Braintree API that has like these hosted fields that throw onto your page. I don't do much with d3, any sort of charting library, I'm usually going to victory from formidable labs. So sweet charting library. But yeah, I don't know, I don't deal with this any sort of crazy way. I instantiate the I use a What is it the async script loader that loads a script as a higher order component on the page. And then once that script has finished loading, then it renders the page. And that's pretty much all I think about it. But then again, I'm not doing things like visualization. I'm just loading a hosted credit card form. So how do you do this? Wes? Yeah, - -20 -00:12:18,149 --> 00:13:33,750 -Wes Bos: we talked about this a little bit in the React episode, which was last week. And it's a pretty common thing to do. because not everything that you are using, has a react component that is equivalent to it, right. Like, let's say you're using stripes, checkout, there will often be somebody builds like a react stripe, but under the hood, all they're doing is they have to manually listen for the component did mount and the component will unmount lifecycle methods of a react component. And when those things happen, you need to sort of like prepare on component will mount you have to do all of your binding to elements and listening for events. And anything that you would normally do like on a page load, you just have to do that in your component did mount and then when it will unmount, you also have to sort of clean up or tear down stuff. So you have to remove any event listeners that you have. And you have to sort of do it yourself under the hood. So that's why react has these lifecycle methods because not absolutely everything is going to be built in in react often you'll just get a vanilla JavaScript library from a third party that you need to interface with like Google Maps or like d3. And it's just a matter of sort of doing the heavy lifting for you. And it's not as nice as just using plain ol react, but it's not that big of a deal for you to do that. - -21 -00:13:34,020 --> 00:14:59,130 -Scott Tolinski: Yeah, so I don't think either of us do anything fancy for that. Next one is from Luke, and Luke. Your last name, Venables. Venables. That's a cool last name is a cool last name. What is meant by the worst state when referring to view or react? Yeah, it's one of those things where people just toss around Oh, you know, Redux is a state management library, your state state machines state blah, blah, blah with this. And nobody ever really says state is this sort of at in my tutorials, I usually like to just refer to it as like sort of the basic ideas where you think about this, you have an application, right? Your application might have several different components that have state one of these components, the easiest one to visualize is the mobile navigation, right? You could think of the mobile navigation, it's either open, or it's closed, right? Those are the two positions that this can be in, and whether or not it is open or closed, that is the state of that component. Now, you can also think of this as components with data, right? You have data coming in, those components are going to have several different states. They could have a loading state that's like pre data, they could have a data state where the data has been loaded. And they could have an error state if there was an error situation in grabbing that data. So the state is the different ways that these components can be rendered output based on what it should be doing. It's basically like how your interface just is right. - -22 -00:14:59,520 --> 00:15:54,750 -Wes Bos: Yeah, I'm looking At a Facebook post right now, and I'm thinking, Okay, this Facebook post is likely built in react. And what would be the state of that? Well, the the state would have information about who posted it, when they posted it, what they posted any photos about it, how many likes that post has, if the person currently viewing it has liked it, if the person currently viewing it has commented on it, who has comment on it? How many comments are on it, all of the information about that post, as well as any interactions that the user has taken again, that so say, it's the reason why we always say status, because it's kind of hard to describe, but it's generally just a bunch of information that that component needs in order to display itself. And that state is generally specific to the user that is actually viewing it because they might interact with that thing. And then the internal state of that component will have changed. - -23 -00:15:54,899 --> 00:16:31,440 -Scott Tolinski: Yeah, then you can think of this also, it's frequently mentioned as like global or local state, and like a local state would be state that is specific only to that component that nothing else in the application cares about, right, let's say you have an accordion that accordions opening or closing, if your application doesn't care about whether or not that accordion is opened or closed, and that's just local to that component, or you have like a global state that could be if the user is logged in, and what kind of access levels they have is going to change what shows up on the screen. So again, yeah, the state is really just these these different ways that your component can render based on the data provided. - -24 -00:16:31,860 --> 00:21:24,690 -Wes Bos: Next question we have from fudge, which is Hey, guys, just Hey, folks, I didn't know you can say guys to us, because we're both guys. Yeah. So I recently enjoyed the episode on burnout, freelancing and other soft life skills. A feeling I have had lately is being overwhelmed on how to put these soft and hard skills together. Obviously, the answer seems to be to learn gradually, as we will have more experiences. But are there any exercise or situations, we can engage in and try to link these soft skills a little bit faster? And this is from fudge? I think this is this is an interesting question. So I kind of put together a couple of examples for that I've been thinking about in the past little while, like how do you practice these soft skills so that you get better at them? So that when it comes time to actually integrate it with your your professional life? How do you and then you can apply it there? So I myself think about this a lot like how can I take these these skills and practice them in my everyday. So I think that instead of immediately reacting to situation so often, a lot of these soft skills that we talked about are how to best handle when things go south in your life or when things get a little bit overwhelming to you. And instead of just immediately reacting to it just to take a stop and say how can I like better handle the situation? I want an ideal outcome here. Things aren't ideal right now. How can I make this the best possible outcome? And how can I apply it to it. So I've just taken a couple examples of my life in the last maybe six months or so maybe Scott has had some other thoughts on this as well. But one that we talk a lot about is time management, getting things done is the system I think Scott and I both use, I often like to apply that to everything at my house. So I'll maintain either a Trello list or a things list of stuff that I need to get done at the house. And then I'll just sort of burn through it. Taxes I get like letters from the government probably weekly and I often will have a stack of I'll 15 or so things from the government whether it's taxes stuff, whether it's business registration stuff, whether need to remit quarterly taxes, all of this information, and that stuff can stress you out, right. So what I do is I just put them in a stack. And then once every week or two or three weeks, I'll just go through them all. And then I'll write on them this needs to be paid, this needs to be followed up on this needs to be sent to the account. And I'll just batch it and it's it takes me like 20 minutes to get through the mall. And I feel much better about it. So that's the time management that's the batching at play. Another one that I have is is confrontation I hate this is my wife will tell you this if you ever talk to her, but I hate confronting people when when things aren't great. So if you had a restaurant and they they forget something or something isn't right, that's like my worst nightmare to like, call someone over and tell them and yeah, my I would like some Grey Poupon. But I just don't like that, but I want to get better at it. So I try to like work with people that when you're in a non ideal situation. So last week, our car had to go to the garage to get the backup camera replaced and the dealership gave us a rental. So we went over to the rental place and started signing up for it and the girl signed us up and she says okay, just to be sure that you're the only driver on this rental car. I was like No, the only reason I'm getting this rental car so I can my wife can you Do do her regular day to day things because we need a car. Well, this thing is in the shop, she's like, Okay, well, you're going to have to go into the rental one near your house. And and they can put your license on the agreement, right? And I was like, No, my wife is not going to take our two kids drive across town, get them out of the car, or she can't even drive there, I have to drive with her, take her kids out of the car, put the license on the thing, put them back in, drive back all the way home, drop me off. And then she can go back and do her things. I'm like, Listen, like, this is a huge pain to me, I understand that. That's your, your rules. And that's how the system works. But I need you to like, help me out here. Because this is not going to be good for me and for what we need to get done today. And then tell you a couple times, I'm sorry, that's just the way it is. But if you kind of like you don't have to be mean to people, but if you just have to be like, Look, if you're in my situation, this is this is a big pain to me. And this this is not my problem. And then she went inside talk to her manager goes Oh, no problem, just email me a photo of of the license. Right? That was like a good example of sometimes you don't have to take what people tell you. And and just try to work with them and and push it a little bit further than what normally happens. Because almost always there's a somebody can change the rules a little bit or push it a little bit farther than then you have to. Yeah, another one I have sorry, do you have a some sort of, - -25 -00:21:24,990 --> 00:21:27,830 -Scott Tolinski: though I got a lot. So you can keep going if you want to know, kind of - -26 -00:21:27,830 --> 00:22:33,990 -Wes Bos: Yeah, I'm just I got a list here, I won't go through the mall asking for discounts. So sometimes this has happened three times now where the bank will call me and be like, something's wrong with your account, please call us. So like, they'll leave a little message or they'll like have a thing and then you'll call them back and you have to wait on hold for 45 minutes. And then you get transferred around three times. And before you know it, you've spent an hour of your time on this. And it's really frustrating because it's not my fault that they their fraud detection or or something goofed up on their end, and they needed to clarify something with me. So all three of those times that that's happened. I'm like, Look, I just spent an hour on the phone waiting to get this resolve. This is not my fault. What can you do to remedy it, and they've every single time they've given me I think 50 $75 just cash, or they've just applied it to my credit card for my time, which is great. Because like you don't have to deal with people necessarily wasting your time. I didn't know that that was the thing. But I thought like, Huh, I wonder, I wonder what they can do for me in this situation? and turns out if you ask and you're polite and respectful to the people, they will they'll help you out usually. - -27 -00:22:34,350 --> 00:24:34,800 -Scott Tolinski: Yeah, yeah, I use like a ton of these same things in my my day to day, right? If there's, if there is like, if there's something that I have on my task list or whatever, I'm almost always applying the same sort of thing, soft skills that I apply at work to what I'm applying in my personal life. And it does, it just gives you practice with that stuff. I think one of the even like, the biggest ones is like I don't know, if you ever like our kitchen gets really dirty really quickly, not like dirty, dirty, just like cluttered and stuff everywhere. Yeah. And so I'll do the, you know, the 8020 principle and knock out the stuff that's gonna make the biggest difference. That's like the easiest stuff to do. Like simply just like putting away all the spices and putting all the dishes somewhere. And like in organizing stuff, like instantly, we'll make it look better, even if it's like really not that like it's not complete, but it looks better than it did. So I'm always applying stuff like the 8020 principle. So I do the batching and sorting for everything, like we get a ton of mail, junk mail, whatever mail comes in, it goes into a few different piles like a shred pile, I open. I don't even do this every day our mail comes into it falls into a basket in our little front sunroom area. And I can like pull through it. And I just pull out the stuff that's important. And I sit on the table, and I take care of it or I prepare it or I put them in a stack. But everything else just sort of sits there, the non important stuff. And then at the end of the week, we look through the non important stuff and we sorted from just like this goes into recycling this goes into shred pile this goes into stuff we actually have to take care of or whatever. But that batching and sorting and doing things all at once rather than just whenever they fall into your plate is just a huge thing and it'll teach you you know all sorts I mean, you're whether it's your your mailbox out front or it's your inbox on your computer, the same ideas apply, right? You can breeze through email way faster if you're doing email at a designated time than if you're doing it all at once. Or I mean whenever it comes in, right? - -28 -00:24:34,920 --> 00:25:40,590 -Wes Bos: Yeah, go back to Episode 25. We did a whole episode on email on how to do it. I have a bit of a system. I'm not like the best email I still have tons and tons but I definitely feel really good about where I'm at with my email. So check that out on the same topic of mail I get like so much mail coming in that is just annoys me because I'm like why are they sending this to me right. So for I think for like three months. Once Every time I got a piece of mail that I asked myself, why do I get this? I just wrote stop on it. And then I one one day, I took like two hours. And I called every single company that was sending this mail. And I'm like, why are you sending me credit card offers? or Why are you sending me these like, like CA, which is my like, like, it's like AAA in the States. They send me all kinds of stuff. I'm like, stop, stop sending me emails. It's wasteful to the environment, all of this paper. And also, it just is annoying to me, because that you get so much like you have to figure out Oh, is this important what you have to figure out if you have to deal with it. And that really cut down on the amount of not junk mail, but it's just like unnecessary email that comes from the the different companies. - -29 -00:25:40,620 --> 00:25:58,260 -Scott Tolinski: Yeah, and a sick sick tip here. There's an app called paper karma. I don't know if you've ever heard of this app? No, this would save you some time in that regard. You take a photo of the junk mail, and the app automatically tells them to stop sending you that mail. And it works really well. - -30 -00:25:58,410 --> 00:26:00,000 -Wes Bos: Really, I wonder if this works. And - -31 -00:26:00,239 --> 00:26:29,340 -Scott Tolinski: yeah, it could be a US thing. I'm not quite sure, but I've used it in the past. And it works surprisingly well for stopping that junk mail. There's some persistent characters out there, but definitely works very well. So yeah, you definitely need a system for everything in your life. And one of the things in your life that really needs a system is your accounting and bookkeeping. And Wes and I both really love to use fresh books for our accounting and bookkeeping, because it makes everything super duper easy. So with more about fresh books is Wes Bos. - -32 -00:26:29,400 --> 00:28:18,480 -Wes Bos: Hello, yes. So fresh books if you are a freelancer, a small business, or just someone who needs to send off an invoice every now and then you got to check out fresh books at freshbooks comm forward slash syntax. So what does it do you able to have your invoices, you have a list of all of your clients as you can keep track of all of the taxes that both taxes that you've collected, at least in Canada, I know that you I both collect taxes, when when I build somebody that is Canadian, and then I also have to pay out taxes, when when I buy something and I get that tax money back. But I also have to withhold the taxes that I owe. And it's a little bit confusing, because if you pay more taxes, then you Bill then you get money back. But if you Bill more taxes than you pay you then you owe money. And you know how much that is because you should not get it be scared at the end of the year of how much you have to pay. Yeah. And freshbooks is a fantastic I just showing you at any time just being able to click on a report and it'll show you exactly what you owe, at what time how much expenses you have what's coming in, what's going out, what are the invoices that are currently owed, who's paid the invoices, super, super helpful, I love it. I also love that they have a really, really good mobile app. So if you're just out and about and you want to, sometimes I'll go and deposit a check. And I do this all the time where I used to just deposit a check. And then like a month later, I'd be like, did they pay that. And now what I do is every single time I don't leave the ATM until they until I've marked that invoice as paid right from the mobile app. And that has just just solve so many of my problems of trying to figure out if they've done it or not. So check it out@freshbooks.com forward slash syntax for a 30 day unrestricted free trial and use the syntax code in how did you hear about us? Thanks so much to fresh books for sponsoring. - -33 -00:28:18,660 --> 00:30:30,240 -Scott Tolinski: Nice, thank you Freshbooks it Okay, let's get into another one here. Do you guys use different environments like Q and A and prod? Or do you only deploy to quote unquote prod and verify functionality is ready through automated test as well as manual testing locally? What are your thoughts on determining the best approach? Now I do this fairly structurally, I only have a couple people working on the code base. So it's, you know, by no means a large team of people working on this codebase. Right. So my situation is going to be a little bit different from maybe different smaller teams, larger teams, whatever. So I have a development and production environment. That's it development environment runs locally production environment runs on my server. And that's that's all I necessarily worry about. I don't have a QA I don't have a staging environment. But my development environment is as similar to my production environment as it can be. And I test everything pretty thoroughly. I use continuous integration and I use semaphore ci, semaphore ci comm to run my tests. And those run every single time a pull request is created. If someone's requesting code be added to any branch it runs all the tests, and then it also runs on deploy. So what I do is I just push up to master it runs my tests for me, everything's good It continues to deploy. But I also do test manually, but I don't I don't The only things I test manually are mission critical things also Test manually before a major deploy, that you can create, you can sign up, you can become a level of Pro, I checked that, once you did that you get access to the content, and then I manually check that sales work, right, you can purchase something. So there's like business critical things, I will manually test only because I'm ultra paranoid about that stuff not working. Even if all my tests pass, even if I'm superduper confident that my tests are good, I'm still pretty paranoid about it. So I want to make sure that that's working. - -34 -00:30:30,570 --> 00:32:19,980 -Wes Bos: Yeah, I pretty much do the exact same thing I run locally in development, I'll test everything locally, just before it's pushed to prod or as part of the the CI continuous integration pipeline, they will run all the tests and not push to production. That's just me, it's a little operation that people have bigger applications do that, like I've worked on many applications where it's pretty common to have you have your local Dev, and then you have your your staging, which is once like a pull request has been approved by a third party or somebody else, then it is merged into staging, and then the staging. Sometimes people even have just like QA people who just go through the entire site, and make sure everything is good. And then once that's all approved, then it gets pushed through to production. I myself, I'm just development then push to production. I also so running tests will cover most of it, I'll test everything myself, mostly the checkout process. That's the one thing I don't want to really, really break. And the viewing process. I don't want that to break either, because those are the two mission and mission critical pieces that Scott said earlier. And then I'll also monitor my century, which is a sponsor not of this show, but of past shows and future shows. Anytime I do a significant change. I'll monitor century pretty closely, just because that if I have like a spike specific error, I know that okay, I goof something up. And something is weird between the data that I was using and the actual production data that people have in their, their course, users and whatnot. And then also I'll I kind of am lucky because usually when something's wrong, I'll get like a tweet or somebody will DM me or email me. And I'll know immediately because I'll get 20 emails from people saying, Hey, this is broken. Here's the error message. Here's, yeah, here's the browser I was using and the most helpful error reporting. But that's, that's doesn't happen in most industries. - -35 -00:32:20,010 --> 00:32:40,110 -Scott Tolinski: Yeah, yeah. And I mean, I have Sentry and I have a time robot and everything like that everything's up and running. So like, if I do push something and my all my tests pass, and I'm like, seeing some alerts come in. Yeah, like that's a big thing. I'll roll back immediately. And then and then investigate. But yeah, we pretty much are very similar in that regard. - -36 -00:32:40,410 --> 00:33:35,940 -Wes Bos: Awesome. Let's jump into the next question from Alex Nielson. I feel like I need to make everything from scratch, especially as someone trying to break into the field so that I can show I'm a good programmer, how do you decide to just say efit I'm going to use a plug in package whatever someone looking to break into the field will be looked down upon if I'm cobbling together too much of other people's code. I think that's that's a really good question. There's definitely a fine line between doing absolutely everything yourself and just cobbling together too much of prebuilt scripts and plugins because you certainly see it on both ends You certainly see people soldering together their own computers so that they can write a website and you certainly see people kind of throwing 13 WordPress plugins at something and then using what's that like web hook software that everyone uses to string together stuff? - -37 -00:33:36,270 --> 00:33:37,890 -Scott Tolinski: Oh, if this than that? - -38 -00:33:38,010 --> 00:35:46,460 -Wes Bos: No, not it's kind of like if this and that but it's like a little bit more Zapier. So you certainly see people stringing together Zapier, which is like, kind of like if this and that, but it's it's a much more Paul powerful, and I really like Zapier but sometimes you see people like running an entire business of just zaps, zapping one thing, and then that triggers another thing. And that's abs. Yeah, just happened one thing to another, right. So like, like, where do you find a kind of middle ground between that and I'm very much about as Scott and I have said in the past spice blends, meaning that when when I'm cooking, I love using a spice blend of somebody else's figured out? What are the perfect amount of salt and paprika and garlic and cumin. And I can just shake it on there. And it tastes great, right? I think that if you as a programmer, you need to sort of stand on the shoulders of giants. Because often when you reach for an NPM package that's really popular, there's been a whole community making sure that that is the best possible way to approach dealing with a specific problem that people in the crowd, at least for me, they're generally much smarter than than I am. But on the flip side, you can't just be using absolutely everything. So I say if it's an NPM package, go ahead, feel free just using these things. And then I felt as I got to be a better developer I found I found myself reading Less than less for plugins and packages and, and just doing it myself because you have a bit more control. So I don't know that there's something that we can tell you where to draw the line. But I think as you become a better developer, you're going to find yourself being like I shouldn't reach for it, like I found myself in WordPress world, almost never would reach for a specific plugin, because I would always hit a wall being like, oh, the plugin doesn't do this. Or there's no way to like to totally reach in and do the specific way that I want to do it. So I almost always find myself building custom themes. And then I would use custom fields to build my own custom functionality in my own smaller little plugin. So I think it's just fine that will come with time. Don't feel bad about reaching for for pre built solutions. That's totally normal. - -39 -00:35:46,559 --> 00:37:48,960 -Scott Tolinski: Yeah, yeah. And I have a couple of things to add on to this, I think some of the things that get overlooked is that time and budget definitely dictate a lot of these things to Yeah, like sometimes, you really, really want to build your own thing. Or maybe that you have a great idea for how you can build this thing better. But the client needs this thing done today. So if the client needs this thing done today, and they're not going to pay for that extra time, you're going to want to use something that someone else made. I mean, even if you know how, and you want to do something bigger or better, it doesn't always work like that. So time and budget are definitely a big concern when you're choosing whether or not to add things. But there is sort of a, you know, a cost of this weight of using someone else's code. And maybe if this is a long term project, and you need to look down the line and say, Hey, is are we going to lose time and money based on this decision down the road, then maybe it is better to build it and spend that time upfront. Now, a little bit of paying, paying in advance, essentially, for the time to make this thing as nice as possible. But that's definitely something that you need to think about is is there a budget for this kind of work? And then the caveat there is, let's say, if you are asked to build a form system in react or something for a job interview, right, maybe it's like a code challenge. And then you come at them with like a Formic or I think it's Formic. Is that the the big input like that, yeah, you come out there using Formic or something like that, that's probably not going to get you the job. So if someone asks you to make something, don't use a library to do that, if it's like a job challenge, but again, you know, a way cost and time and stuff like that make your decisions. And yeah, I am one of those things that I always do like, like a toggle, like a little quick toggle, I almost always use a library to toggle, which is ridiculous, because they're pretty small. I just don't want to have to write that CSS. I'd rather just style someone, someone else's. Yeah, yeah, it's, it's dumb. - -40 -00:37:49,190 --> 00:38:42,210 -Wes Bos: Maybe that's something you can put on your list for learning being like, oh, man, I use this toggle or use this form library all the time. And it's great, because it's quick, and I love it. And it's perfect for what I need. But maybe I should try to build my own at some point, just so that I know what's going on under the hood. And if I was ever in the situation where I couldn't use an existing, we saw that a lot with jQuery, where a lot of people were unable to build anything without the the crutch of jQuery. And I think at that point it, it becomes a bit of a problem. Because jQuery was great. It took away a lot of the problems that we had, it made us much better developers, we built much better interfaces from it. But if you can't select an element and loop over and listen for a click on a bunch of buttons without it, then then maybe that's something that you should put on your list as a high priority to at least learn how to do it so that you know exactly what's going on under the hood. And what is jQuery doing under the hood? - -41 -00:38:42,479 --> 00:39:43,670 -Scott Tolinski: Yeah, there's a ton of learning possibilities inside of other libraries, especially popular ones, just learn patterns and that sort of thing. All right, this next one is from john Biddle. And john says, here's one to let your imagination fly. Forget for a moment, all the hard work it would take to get there. What WordPress what would WordPress be like if it were built on node and graph qL? Yeah, well, it would probably be more comfortable for myself and another note and developers to take a hacking into it a little bit. I was never like Mr. php, man. I was like never kept in PHP. So for me writing WordPress plugins, writing themes was always sort of a pain because I was always dealing with the white screen, always having to look up how to do things in PHP, and it was never like a blast. So for me, I think it would be hackable, it'd be a little bit more hackable. But other than that, I don't know. I don't know. What do you think Wes? What is your thoughts on this - -42 -00:39:43,679 --> 00:42:12,980 -Wes Bos: one? Yeah, I got some thoughts on this I because WordPress is popular for a reason. I think that if WordPress was built in node and graph qL it for sure would not be where it is today and it would not be as popular as it is because why because PHP is very easy to learn. Especially the the flavor of PHP that WordPress is written in, where you can almost always just jump into a file and start hacking away. If you're coming from I know HTML, now I want to add a little bit of logic, it's very easy, because you can just say, Oh, I see the HTML, and then there's just some extra stuff in it, right? PHP is really cheap to host. That's another reason why PHP was very popular because you just throw a PHP file up. And you can edit that file directly. Like I remember showing people JavaScript, and then they would just like right click Open the.js file in the browser and be confused that it didn't work the same way that PHP works, right, you just visit the file, and then it runs, right, the barrier to entry with PHP is very, very low, especially WordPress, because you can get up and running with not really knowing a whole lot. But then on the flip side, the sky's the limit, you can do a lot of really advanced stuff with it. There's a lot of really, really good developers building complex stuff in WordPress, so and then the theme plugin and ecosystem is huge, right? We just talked about that being able to reach for a theme reach for a plugin. And that's why a lot of people like it. So if it was built in node and graph, you'd have a totally different audience, right? It would have an audience like Scott and I, and we there actually is something like that. It's called ghost and ghost was kind of like the WordPress being rebuilt in, in node and whatever. And they're doing really, really well. They don't have near the popularity, but I don't necessarily think that's a bad thing. Because people who are looking to build that type of website, but prefer a JavaScript stack, and are a little bit more comfortable with the the sort of ideas and also when you build something brand new like like ghost ghost, I think it's probably four or five years old, but they don't take along all of the baggage that WordPress has, because it's been around for so long. So it would have totally different audience, I think. And I think that everything has its place in the different audience that is looking for it. And if you especially if you go to there's this like Facebook group, that's like a WordPress developers, if you take a look at the types of people that are building stuff in there, it's just a totally different set of people who are much more focused on like, building websites and content. Yeah. - -43 -00:42:12,980 --> 00:42:15,690 -Scott Tolinski: Internet Marketing, that sort of thing. Yeah. - -44 -00:42:15,900 --> 00:42:28,500 -Wes Bos: Yeah. Small businesses, really popular in that world. And it's just a totally different where we're very much focused on the tack in the extendibility. And, and the developer experience and whatnot. - -45 -00:42:28,650 --> 00:43:00,210 -Scott Tolinski: Yeah, yeah. It's almost like the audience is a hair between like, something like a full featured platform like Squarespace. And then a little bit more hackable, like WordPress, I would say the audience is closer to that. Squarespace. I mean, like the most of the people building WordPress sites, and not not I'm not talking about like WordPress, devs, and like freelance devs. and stuff like that. I'm talking about like the people who, who fire up a WordPress site, because a book about publishing like told them, that's what you needed to do, right? It is it's a it's a different audience. - -46 -00:43:00,270 --> 00:43:30,090 -Wes Bos: And it's often like a means to an end for people that aren't getting into WordPress, because they want to learn coding, it's because they want to build a website for a friend, or they want to do some internet marketing stuff, or whatever. And often, that is the sort of gateway drug where people realize, Oh, I really like this stuff. Maybe I should be a web developer. Myself, I started off in WordPress, and I think it's kind of a nice little gateway drug that we'll send you looking for more and sort of put you down the rabbit hole of full blown programming. - -47 -00:43:30,090 --> 00:44:19,410 -Scott Tolinski: Yeah, yeah, absolutely. It's great. I mean, WordPress is one of those. Again, it's one of these platforms. That is, I don't know, it's allowed so many people to build so many things so easily. And again, it's probably started more development careers than than anything. And it just takes it takes something that could be difficult, you know, having a database, a front end, having the back end, it takes something like that, and just makes it super easy. And one of our sponsors also does something like that for us. And this is m lab. Yeah, m lab takes the the whole difficult things of hosting and maintaining and managing a database, and it puts it on to a service that allows you to just connect to that database and never have to worry about things like backups, or having security or any of that sort of stuff, the stuff that you don't want to worry about when you host a lot of data in a database. - -48 -00:44:19,500 --> 00:46:52,650 -Wes Bos: Yeah. So m lab is a host for your Mongo DB. It's a Database as a Service, meaning that if you're building a JavaScript application, you might go and host it up on something like sites now or like, you might put it on Amazon Web Services. And you're comfortable with that, because the code of your application, you've got it in git, and you can just redeploy that thing. If something goes awry, you can fix it. The kind of scary part for me is when you have a database, which contains all of your data for your application, and there's there's a whole new set of challenges with a database that not necessarily your skill set and it's not necessarily something that you you care to learn a whole bunch of Past actually learning how to query the database and, and save data to it. So m lab will host the database portion for you, it will do all of the backups, it will do all of the scaling in, you don't have to worry about your database going down or your database accidentally getting deleted or getting corrupt or any of that sort of stuff that that comes along with it. Because that could be that is an entire career for some people just working with databases and to understanding how to best scale them and in how to best work with them. One really cool thing about em lab that I like is they'll send you a slow query report. So you as the JavaScript developer, or, or any developer that's using a MongoDB database, you're writing these queries, right. And you should know some stuff about database performance, like what to index and what are indexes and how they work. But if you're doing something wrong in your database that is causing slow queries on your website, they will send you every week, a little performance report and say, Hey, you did this query so many times over the last week, you had this query 100 times over the past week. And now we you didn't have those things index, well, you can go ahead and index them and you're going to speed up your website so much better. So every week, they send me a little thing. And I can just tweak the indexes of my database within my note application, and it just helps their performance better. And lab does all the backup for you. They do all of that they have really, really, really good support. I've talked about that in the past. So if you are hosting a MongoDB or if you're just trying to like learn node and you're using MongoDB as a database, don't try to install it locally because you have to worry about drivers and brewing, installing and all of that headache, just use em lab set up a one of their free databases in there. They don't require a credit card. So check it out at m lab.com. And thanks so much Tim lab for sponsoring. - -49 -00:46:53,039 --> 00:47:42,930 -Scott Tolinski: Nice cool this next one's from Dennis Dennis says Late Bloomer here, I'm learning JavaScript at 34. Dad, do you think I can learn how to breakdance at 34? Yeah, well, I think you can. There's, it's funny this is this is a hilarious question to me, because I learned when I was old, quote, unquote, which was like 18. So like, at that point, I had already missed the bus on unlike really becoming an elite level dancer in that regard. But there's so many aspects of the dance that don't require the gymnastic stuff. There's something called top rock and something called footwork. If you learn those two things, you can be a sick breakdancer at the age of 34. Just learning it's all about musicality and dance and fun anyways, it doesn't really matter, but you can definitely learn, get out there get busy and yeah, catch the groove a little bit. - -50 -00:47:45,270 --> 00:49:08,850 -Wes Bos: I think we should also at this point, I get a lot of questions where people say I am xx years old, do you think it's too late for me to learn programming to break into it? Because I guess it seems like a young person's industry, which is kind of a bummer, because I don't think like somebody emailed me and said, I'm 28 isn't too late. And like, no, like, you're gonna work till you're 55 at the the best case scenario 65, you have like, more time than you've even spent in your career. Even if you're like, like 50 years old, it's for sure, not too late. And I think that, especially web development is a really, really good industry to get into. Because as much as you might hate it, the pace of our industry is that everything flips over every four to five years. So if you are learning and sort of just getting into it, I've definitely seen people go from, like brand new beginner to add a senior advanced developer in four or five years. So it really doesn't take that long, especially if you are enjoying it. And it's something that you have a have an interest in, you can get up to speed in it in no time. Like this takes years and years to work out something. But if you think about like, where would I like to be in five years, wishing I had learned web development or being really, really good at web development, and if you if you want to just put in the time for a couple of years, then it's going to be well worth it. - -51 -00:49:09,060 --> 00:50:20,760 -Scott Tolinski: Yeah, I you know, is a good one, too. I went to a job interview one time in Tokyo, and the CEO of the agency that I was interviewing for, he was so cool. He was like, You know what, I Well, he said this in Japanese, say this in English, but saying you know, you know, like, I first started my career, I owned a landscaping business. And I was a landscaper and I did that for most of my life. And later in life. And he was like 40 or something. He was like, I kind of want to just do programming. And he was like, yeah, completely left turn for a man who had always done landscaping and was like, You know what, I'm gonna do programming and then here he is. He's the owner of like one of the top agencies in Tokyo and doing some like insane work for some huge clients, and he just looked at it and that that interview to me was really inspiring because I was just sort of like, wow, you can really accomplish anything. You just take the time you put in the work, you get it done, and you make it happen. So yeah, no, there's no too late for anything start now start yesterday, start tomorrow. But you know, don't start a year from now start right now. - -52 -00:50:20,880 --> 00:50:29,550 -Wes Bos: Totally. That's the what's the wise old saying the best time to plant a tree was yesterday, or 10 years ago. And the second best time to plant a tree is today. - -53 -00:50:29,640 --> 00:50:35,730 -Scott Tolinski: Yeah, it is something like that. I don't think you butchered that too badly. I'm pretty sure he was very close. Very close to that. - -54 -00:50:36,000 --> 00:51:13,260 -Wes Bos: On the same note, I'll also say like, as you get older, I think you have more like life wisdom, and you have better soft skills, like we're talking earlier about, like these soft skills in terms of how to deal with like stressful situations and how to deal with people. And that's likely something that people who are older have those skills already. And that's a huge part dealing with Apple, because you'll often see these like, like 22 year old developers, and they're amazing at writing JavaScript, but they don't have that whole, like communication, soft skills dealing with people, which is I would say at least half of having a job. - -55 -00:51:13,530 --> 00:51:15,960 -Scott Tolinski: Yeah, it's a huge, huge part. Yeah, absolutely. - -56 -00:51:15,990 --> 00:52:26,910 -Wes Bos: Next question we have is from Nicholas Jackson, how do y'all handle high level page layout when using styled components? So this is a great question. Because when you have style components, you write CSS that is scoped to that specific component, and the CSS will never leak outside. However, often you do need CSS that needs to apply to the entire page, things like fonts, and padding and specific colors, and you have all of the stuff where it's like building the foundation for your website. How do you how do you deal with that, you just embrace the cascade, like you use CSS for what it was made for to cascade down to the other components on the page. So usually, what I'll do is I'll have global styles for my application that do things like the fonts, the line heights, the colors, the main colors of the page, although sometimes that will go into style component theme as well. And anything that needs to apply to the entire webpage, all of my heading tags, what my emphasis tag looks like, what my strong tags look like, everything like that, I'll do that as a global style. And then everything else that's specific to a component goes into it. So I do a fair amount of embracing the global style. And then getting into the nitty gritty inside of a styled component. - -57 -00:52:27,360 --> 00:54:35,460 -Scott Tolinski: Yeah, yeah. inject global is a is the thing. Yeah, I use basically, yeah, a normalized CSS, I use that sort of stuff. I inject global, I embraced the cascade, my site at once was not using styled components. And now it is. So it was really easy for me to adapt these global styles into thing just drop it in, inject global and take care of it. Yeah. But that's, that's pretty much the answer. And there's nothing nothing crazy there is a stub components is a tool to help you better understand your your system, your design system and have it work within react. And it doesn't necessarily mean it's the right tool for every job. And in that case, you can use its escape hatch to allow yourself to use some global styles here and there for when that makes sense to this next question is from Andre Mac namira. As a junior Dev, do you think I should switch from PHP and Laravel to full stack JavaScript? I love PHP, but j s is taking over? It's a good question. I don't know. Laravel is pretty sweet. I'm a big fan of Laravel. I like systems like Laravel. And it has a big community. So I don't know, if you're getting work in your you're making websites, I think PHP and Laravel is a great thing to do. I mean, the benefits of full stack JS are being able to utilize the the same, the same code on your server side as your client side, like I used my react code for server side. I don't have to deal with PHP templates and react templates, right? Everything is all just the same. But that's it. Like I said, if you're getting work and it's you know, it's it's working out for you I don't I don't see any reason to just drop PHP and Laravel, what I would do is maybe sprinkle in some more full stack JavaScript here and there for no other reason than to give you a different perspective on the work you're doing in PHP. Maybe just expanding your your learning skills a little bit in different directions. I like to do that sometimes just to try something new and to have a different perspective on it. I don't think you need to drop or switch or anything like that. But again, I think it is worthwhile to spend some time with fullstack j. s, if that is, you know, a concern you have. - -58 -00:54:35,640 --> 00:56:58,590 -Wes Bos: Yeah, PHP is absolutely massive. And by that reason, Laravel is is huge, right? Some people are telling me that Laravel is bigger than Ruby on Rails. I'm not sure if that's true or not just doing like, if you look at like GitHub stats, which is really not any anything to look at, but they do have more stars, but then if you do like a Google Trends search or you do a quick job search, it seems to be that it's not as big rails, but Laravel is huge. And there, so is PHP and both of those things are not going away anytime soon. If anything Laravel is going to keep on growing because people who know PHP, which is a lot of people are going to look for ways to build applications. And they'll reach for for Laravel. And I think that if you are just learning and you're looking for a job, it does make sense to sort of stack yourself for keywords. So often, we'll see Bootcamp, students learning react right now, why, because everybody's hiring for react developers, right now, that's a really popular thing to learn. But if you have a good thing going, maybe you have a job where you're building Laravel stuff, you're going to be learning a lot more about programming past what the syntax is of PHP, all of the ideas and concepts and, and building a good thing in Laravel, that's going to totally transition over to to any over any other one. And at the same time, like JavaScript might not be around forever, I do think that JavaScript is going to continue to be as popular as it is, and I'm betting my entire career on it. But that said, if it starts to go another way, if everyone starts picking up Python, or, or rails again, then like, who knows, maybe I'll start to go that way. And I don't sweat that that much. Because I know that I'll be able to, to pick it up. At the end of the day, I've been in this industry long enough that I've seen the popular thing switch over probably six or seven times. And I know that it will, it'll be a constant, constant change. And one more point on that as well as it's also just supply and demand as well. Because Yeah, JavaScript is super popular. But if everyone's switching over to JavaScript, then it might be very lucrative for you to stick around, even if it's something else. And I don't think that PHP and Laravel is going to be like antiquated either, because like, you look at things like single page applications and Laravel is like, totally embraced the view for building those kinds of experiences. So I wouldn't sweat it. - -59 -00:56:59,010 --> 00:57:46,380 -Scott Tolinski: Yeah, I mean, it's funny, because like, it's a good thing that you brought that up, I was at this, like a guy, I don't want to call him a client. So it's just helping him out. And he was really in need of a ColdFusion developer. And this was after, it was kind of difficult to find ColdFusion developers, especially in the area that would be wanting to work on this project. And he basically had a stack of cash sitting there. It was a huge project. And it would have been a big pay day. And he could not find anyone to take his money. He was like, Is there any really good ColdFusion developers available? Like Where? Where can I find them? And I was like, I'm only I'm sorry, like, I don't know. But it's a getting it being that expert in something is always going to pay off. So yeah, no, I think that's a really good point. Cool. So I think that was the last potluck today. - -60 -00:57:46,590 --> 00:57:47,370 -Wes Bos: That was it. - -61 -00:57:48,420 --> 00:57:57,870 -Scott Tolinski: I'm full. That was a lot of questions. I can't wait to do the next one of these. We have so many more. I was like looking at the question sheet. And I was like, dang, we gotta get to some of these. So yeah, I - -62 -00:57:57,870 --> 00:58:08,250 -Wes Bos: already can't wait for the next one. Awesome. Yeah. So answer. Make sure you submit your question at syntax. FM, click on the potluck button and fill out the form. Make sure you tell us how to pronounce your name, because we will butcher it. - -63 -00:58:09,090 --> 00:58:13,410 -Scott Tolinski: Yes, we will butcher it. Oh, if you could put like phonetic spelling in there. That'd be sweet too. - -64 -00:58:13,830 --> 00:58:22,080 -Wes Bos: unless you'd like us to attempt to pronounce your name. Because that's also fun. That's also fun and sick pick today. What's your sick pics? Scott - -65 -00:58:22,110 --> 00:59:49,140 -Scott Tolinski: sukru. There was a it was I was watching. Was it the React rally? Was that the conference that took place this weekend? Yep. Yeah. Or this week? Yeah. React rally and Kent C. Dodds did a talk. And in this talk, he quickly accessed an emoji from his Alfred which got me searching and I don't know if this is what he used or anything like that. But I found one that is really really sick. And it's called Alfred e moje. No, I e m o j and you just install it with NPM and you type a mode and the coolest thing about this is it uses a deep learning to guess which emoji you're going to type so it's not like a string find where you type in fire and it gives you the fire like the Yeah, they their examples are emoji. Give me cats. And there's a whole bunch of cats. I typed in urgent because I wanted something that was urgent and it gave me options that were suitably urgent like aha or stuff like that. So I found this thing to be very smart and we both love Alfred. So this thing works so well with with Alfred you just do emojis I even just type e in a pops up and then you can just start searching from there. You find the emoji one you hit enter and then it copies it to your clipboard. I found that to be way way faster and better than popping open. That's the emoji and symbols panel and stuff like that. So loving this little little elfreda workflow here. - -66 -00:59:49,500 --> 01:00:25,110 -Wes Bos: I use one called rocket which I have it hooked up to the the plus key. So anytime I type plus much like you type a colon on Slack, it will pop open this one They do a really good job at aliasing the emojis. Because the the built in one to Mac OSX is brutal. Like if you want to search for like, like tongue or something then it might not there might not be named tongue. Yeah, brutal. Yeah, it's not very good. So I use the rocket one which pops it up wherever it is that you're typing. But I'll check out this this one as well. Because sometimes you just have like a sentence and you want to put emoji on the annual what one would be the best, right where - -67 -01:00:25,110 --> 01:00:28,530 -Unknown: this captures what I'm trying to get. Yeah, - -68 -01:00:28,530 --> 01:01:37,860 -Wes Bos: I'll check that out. My sick pick today is motherboard, specifically the motherboard YouTube channel. So motherboard is sort of a, a one off from vice. And they do like tech focused videos, they do these tiny little like 20 minute documentaries that go into people that are working in in tech, and one that I specifically like was the hacking tractors, which went into how john deere doesn't allow people to repair their own tractors and like people are often like you're four hours away from the Neela nearest dealership, and you have to get this tractor pulled in when you can't because everything is a computer at the end of the day, and everything is coated at the end of the day, right. So they did a really good one on john deere tractors that I liked. And then they also did another one that covered one of my favorite YouTubers rich rebuilds. He's a guy that rebuilds test like Tesla's that have been salvaged, which is kind of like a dicey area to get into right now because Tesla doesn't like people, other people repairing them. They want to have their thumb on everything. That was a really really good one. I just enjoy it. I like vice a lot maybe because I'm a millennial, but yeah, vices motherboard is super good. - -69 -01:01:38,099 --> 01:01:49,620 -Scott Tolinski: Yeah, I'm always a huge fan of their just production quality in general. So yeah, I don't check out a lot of motherboard but even just like looking at their YouTube homepage, I'm gonna like blow through these things. There's so there's so much good stuff on here. Yeah, - -70 -01:01:49,769 --> 01:02:04,380 -Wes Bos: the latest one this Pyro makes the strongest DIY lasers out in the world of old tech. That sounds super interesting. Yes bowling mechanism keeping America's favorite pastime alive. I'm curious. How does bowling work behind the scenes? - -71 -01:02:04,529 --> 01:02:19,560 -Scott Tolinski: Yeah, I'm very curious about all this. Hey, did you ever watch that Netflix show explained it's done by Vox it's a it's like a weekly show. They do a Netflix now it's like super high production value. It reminds me a lot of sort of ice stuff. It's done by Vox. - -72 -01:02:19,619 --> 01:02:22,290 -Wes Bos: Oh, no, I haven't. I'm gonna have to check that out. - -73 -01:02:22,349 --> 01:02:49,320 -Scott Tolinski: We breeze through every episode of explain the other day when a friend of mine told me to watch it and they're just awesome. They explained the best they explained all sorts of topics but in like really brilliant ways. They have different like celebrity narrators. So you can like always try to guess who's actually narrating it. But yeah, there's like the one episode on Kpop which it gives like the whole history of Kpop and that's super interesting to so many good ones cryptocurrency or whatever and it explains these No, I - -74 -01:02:49,320 --> 01:03:06,420 -Wes Bos: think I've seen that. Yeah, cryptocurrency one. I remember looking at the Kpop app. I so hard to convince my wife to watch these weird Netflix shows. It's all I want to do is watch weird stuff about crime or drugs or on Netflix. And she's - -75 -01:03:06,449 --> 01:03:10,140 -Scott Tolinski: not into it like deep undercover. I've been watching deep undercover. - -76 -01:03:10,229 --> 01:03:27,780 -Wes Bos: Yeah, I love that kind of stuff. Or that or like, like ice Road Truckers and things like that. Yeah, frustrating, but we just watch Home and Garden stuff which it seems like Netflix is finally getting into the like HGTV space. See, I've - -77 -01:03:27,780 --> 01:03:30,570 -Scott Tolinski: not I've not noticed that I gotta get Oh, yeah, - -78 -01:03:30,780 --> 01:03:38,520 -Wes Bos: just just recently they they're doing one where they like go and visit like the world's best Airbnb s and it looks super interesting to us. - -79 -01:03:38,640 --> 01:03:42,720 -Scott Tolinski: And my backyard needs a makeover. It's not bad, but it's just not like, - -80 -01:03:42,870 --> 01:03:45,270 -Wes Bos: it's just not it's not HGTV. Yeah, I'm - -81 -01:03:45,270 --> 01:03:52,890 -Scott Tolinski: gonna throw some aspen trees back there. We're gonna get a little bit of shade going on. Get this thing poppin God, shameless plugs. Today, - -82 -01:03:53,370 --> 01:04:12,060 -Wes Bos: I'm going to just shamelessly plug all of my courses at Wes Bos calm for slash courses. I am feverish Li working away on my advanced react courses coming out in a couple of weeks. I'm really, really excited about it. I know that it's been a long time coming and everyone's super stoked about it. So sit on your hands for a couple more weeks and you're gonna get it, - -83 -01:04:12,450 --> 01:05:07,320 -Scott Tolinski: you're gonna get it, I'm going to shamelessly plug the new course coming out for level up tutorials this month, which is react testing for beginners, and it's going to be super duper nice. We're basically going through all of the stuff that you need to get through if you don't have a ton of experience testing. Overall, we're going to go through testing basics with jest and JavaScript, and then dive into all of the important concepts involved in testing react, and reason Kent C. Dodds awesome library react testing library, my new favorite thing it like vanquished half of the lines, and most of my tests made them easier to read. It's an awesome awesome library that regardless if you're going to take this course you should check out anyways. And that's gonna be available for both purchase and level of pros. So if you sign up to become a levelup Pro, you can sign up for a year save 25% to get access to that, along with the other tons of other pro series as well as 12 additional ones that are going to be coming out over the course of that next year. So check it out, level up tutorials.com forward slash Pro. - -84 -01:05:07,560 --> 01:05:10,560 -Wes Bos: Again. I think that's it for today. Anything else to add? - -85 -01:05:10,560 --> 01:05:11,160 -Scott Tolinski: Nothing. - -86 -01:05:11,160 --> 01:05:15,750 -Wes Bos: Awesome. Thanks for tuning in. We'll see on Monday, he's bass - -87 -01:05:17,609 --> 01:05:27,390 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax71.srt b/transcripts/Syntax71.srt deleted file mode 100644 index 02701af7e..000000000 --- a/transcripts/Syntax71.srt +++ /dev/null @@ -1,400 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. - -2 -00:00:25,920 --> 00:01:01,080 -Scott Tolinski: Oh, welcome to syntax in this hasty treat, we are going to be stumping each other with some intermediate to expert level interview questions on various topics. We're just gonna, we wrote a little script here to randomly pull one of these questions and it's going to try to stump the each other and we're gonna see how this thing goes. It's gonna be pretty darn funny. So nervous. Yeah, I'm nervous too. So to introduce the podcast is the syntax. My name is Scott to Lynskey and with me, as always, is West boss. - -3 -00:01:01,380 --> 00:01:05,430 -Wes Bos: Hello, hello. I'm really excited for this. I think it's gonna be pretty fun. - -4 -00:01:05,640 --> 00:01:10,730 -Scott Tolinski: Yeah, it should be a blast. Now this episode is sponsored by century - -5 -00:01:10,760 --> 00:01:31,740 -Wes Bos: Yes. So century is an error tracking service that's going to it works in any language on the server side or on the client side. And I specifically use it myself for my use it on my node application and and on the front end of all of my applications that are running on my what I call boss monster, which is the course platform that I have you named your course platform boss - -6 -00:01:31,740 --> 00:01:32,670 -Scott Tolinski: monster, - -7 -00:01:33,000 --> 00:01:53,040 -Wes Bos: yeah, Boss monster, which is kind of it's funny, because we've recently chopped it up into smaller application smaller, really, smaller monsters? Well, it's Yeah, it's like three or four applications now that that run in unison, and power all of my, like 11 domain names or whatever. So it's - -8 -00:01:53,040 --> 00:01:58,020 -Scott Tolinski: like my sellers call it the monstars. from Space Jam. Now, there's several of them. They're all deadly. - -9 -00:01:59,610 --> 00:04:02,370 -Wes Bos: Exactly, man Space Jam coats are great. Anyway, century, what I have I have it running. And what it does is anytime that there is some sort of error, either on the server side or on the client side century will log that error into their back end. And then they take as much information about that they take the stack trace will take any source maps that you have, they take information about, obviously, when it happened, if it's on the client side, which is those are the trickiest errors to debug, because they always happen in someone else's browser. So it'll take information about what browser they were on, what the user agent was, what their IP address was, because sometimes you get people doing like malicious stuff on your website. And that intentionally throws errors. And you can say, like, oh, wow, this error through 300 times in the last month, but it's all been one person. So clearly, they're doing something wrong, or they have a Chrome extension that's causing something going on here. But if you see these aggregate of this data that there's a whole bunch of errors going on, you can get, you can kind of peer into it, you can attach errors to specific people. So if you need to contact someone to tell them it's been fixed, or to get some more information from them, it's really, really handy. So check it out@sentry.io forward slash sign up and use the code tasty treat, it's going to get you two months for free. Even if you're already an existing customer. A couple other things about century we've got a whole bunch of information here. I've gone through it and a couple of our episodes already, but it cuts your your resolution time from five hours to five minutes. So you have to pay for it. But it's well worth your money just in how much time it will cut down from figuring out what these issues are. Get multiple people on your team, you can alert different people depending on your your Git history. And then probably my favorite part about it is that it's all open source. So obviously you're gonna you can pay for it@sentry.io. But if you really wanted to, you could spin up a server and run your own version of this, which is really, really cool. So check it out. sentry.io tasty treat coupon that's gonna get you two free months. Thanks so much to Sentry for sponsoring. - -10 -00:04:02,400 --> 00:04:30,950 -Scott Tolinski: Yeah, yeah, Sentry is easily one of my most used services personally. Huge, huge fan. Cool. So So yeah, so we've mentioned the premise here, we have a site here, this is 30 seconds of interviews.org. And there's a whole bunch of different interview style questions here. And they have the answers all hidden. So what we're going to be doing is just sort of randomly pulling a question here or there. And we're going to try to stump each other with these random questions and see what comes up. - -11 -00:04:31,320 --> 00:04:53,250 -Wes Bos: All right, so the first one that I pulled up here, which is what is the difference between the postfix and prefix increment operators. So that means if you have a variable called I, and it's set to one, and you want to increment that you can do i plus plus, but you can also do plus plus i. So Scott, do you know what the differences between those two? - -12 -00:04:53,270 --> 00:04:57,510 -Scott Tolinski: Yeah, I see Wes grinning on the webcam because we already discussed that. I don't know the difference between - -13 -00:04:59,430 --> 00:05:02,010 -Unknown: I was like, let's Put that in the show, because this is great. - -14 -00:05:02,010 --> 00:05:10,800 -Scott Tolinski: Yeah. Now the very first one we pulled, and it's listed as an easy question, which is great. You know, this is really doing good things for my self esteem here. But no. - -15 -00:05:12,140 --> 00:05:12,660 -Unknown: Personally, I - -16 -00:05:12,660 --> 00:05:45,960 -Scott Tolinski: don't use the postfix or prefix increment operators ever. I'm, I'm always doing a, because I'm not, I don't want to mutate the value. So I never used these I always do you know, a new variable is equal to a year number plus your number, or the previous value. So I don't use postfix. And since we're not doing for loops anymore, I haven't used i plus plus, and who knows how long or plus plus? I so yeah, I don't know the difference. I've never I don't know the difference, but I don't It's been too long. - -17 -00:05:46,140 --> 00:06:55,770 -Wes Bos: Yeah. So it's funny because it's probably something you don't use a whole lot. And in given that a lot of us are moving into like functional programming, where you don't mutate variables, you create new variables and return them from the function. And you you don't use for loops all that often. Because you know that we did that show where all about map and all the array methods, right? The difference is that i plus plus will return the value and then increment it and plus plus, I will increment the value and then return it. So the easiest way to visualize this is go into your your terminal real quick, and say var x equals zero, and then type x plus plus, what do you expect is going to get returned from that, it's actually going to be zero in either way. That's weird. I just did x plus plus, well, the x, it gets returned immediately. And then incremented after it's returned, whereas if you if you type in x again, and just to see the value of it, you'll see that it is set to one. But if you were to do plus plus x, then you get two because it increments at first and then returns it. So that's an odd one. I can't even think of the last time i've i've ever had to use that though. - -18 -00:06:55,799 --> 00:07:25,230 -Scott Tolinski: What's funny is that like, I kind of, I feel like this is gonna be for a lot of these things. I kind of knew the answer, like, yeah, you know, you use the one in a for loop and it doesn't increment until the loop runs. I don't know. And, yeah, okay, let's go ahead. Let me fire up this next one here. Okay, this is a good one. Yeah, this is a good one. And. Okay, please, Wes explained to me the difference between a static method and an instance method. - -19 -00:07:25,500 --> 00:08:14,190 -Wes Bos: Oh, that's good. That's that's a tricky one. All right, let me think about this. So a static method is a method that lives on your object and is shared amongst it's either it just lives on the like, the parent, which is like array of, that's a static method. Or it's shared amongst all of them, meaning that every single time that you like, let's say, you had a let's let's use react, for example, if you have a coat rack component, and it's a button, you might have a method on there, that is called increment clicks, that's going to be an instance method, because every single button needs its own instance of that method, whereas a static method is going to share it amongst so you only have one instance of that this is I'm so bad at it. - -20 -00:08:15,179 --> 00:08:19,520 -Scott Tolinski: Yeah, I don't. I don't know if that if that if that counts as an answer are correct. - -21 -00:08:19,530 --> 00:08:32,900 -Wes Bos: Let me hold on, hold on. Let me get one more shot. The static method is shared amongst every single instance. And an instance method obviously gets a copy of its own for every single time that you you make it - -22 -00:08:33,049 --> 00:08:55,980 -Scott Tolinski: okay. Yeah, okay. Look, give me the answer. The answer according to this is a static methods belong to a class and don't act on the instances. While instance methods belong to a class prototype, which is inherited by all instances. So it seems like the static method belongs to the class itself, where the instance method belongs to the prototype. - -23 -00:08:56,250 --> 00:09:01,320 -Wes Bos: Oh, there you go. That that was a tricky one. That was that was under that was hard. Yeah, that was hard. - -24 -00:09:01,350 --> 00:09:05,540 -Scott Tolinski: Yeah. Okay. Well, that that's what you get for given me an easy one that I couldn't get. So - -25 -00:09:07,140 --> 00:09:28,980 -Wes Bos: there you go. Yeah, it gives an example of array.is array that's just on the as a static method, and then you have array dot push, which is an instant method. Very nice. All right. Let's get another one going here. Oh, this is a hard one to throw. I think this is a CSS question. What is a focus ring? What is the correct solution to handle them? - -26 -00:09:29,040 --> 00:10:22,110 -Scott Tolinski: Oh, that's a hard one. That's easy one. And since we're doing our episode on accessibility, next, I have at least researched this a little bit. So focusing is the the outline that appears on an item when it's selected like a button. And many times people say say like outline on none, right? I think it's the property outline none, or Li zero outline yet because they're like, well, what is this blurry blue thing around my button? And well, that's a major problem. for testability, because those things are there for a reason. So the focus ring itself is outline right? That that's Yep, that's okay. So, yeah, that that's what it is it lets the user know what's in focus when they're tabbing through the site. So obviously, if you have those turned off, the user is not going to know what's in focus. So yeah, yeah, that's the focus, right? - -27 -00:10:22,280 --> 00:10:53,070 -Wes Bos: Good answer. I remember back in the day, when you just I would just immediately turn everything that had a focus state and put an outline to zero, because I hated the blue. And now I look back. And I'm like, that was such a mistake. Because like, you need those right? Somebody is sent a pull request this syntax website, turning those off, and I was like, No, we need these. But you can you can turn them off as long as you are replacing it with something else like a box shadow or changing the You can also change the color of the focus as well. Something to give it like, - -28 -00:10:53,700 --> 00:10:57,960 -Scott Tolinski: yeah, this is actually being in focus. Right now. It's being used. Yeah. - -29 -00:10:57,990 --> 00:11:12,120 -Wes Bos: Because you as even as a keyboard user, you should be able to show your users where they are in the application should be very crisp and clear, even if it's not for accessibility sake, just for not using the mouse's sake. Yeah, deaf. All right, what do you got for me? - -30 -00:11:12,210 --> 00:11:22,200 -Scott Tolinski: let's fire up the old random machine. As I hit up and enter, here we go. Oh, this is pretty good. Although we probably already answered this on another question, how does hoisting work in JavaScript? - -31 -00:11:22,410 --> 00:11:26,460 -Wes Bos: Oh, that's a good question. So yeah, we did. When did we do this? We - -32 -00:11:26,460 --> 00:11:28,860 -Unknown: did this in Really? early episodes. - -33 -00:11:28,950 --> 00:12:17,160 -Wes Bos: I think it was in let's let me just find that episode. Real quick. It was the like the jargon show. What was what episode was that? Anyways, so hoisting is when you have an application, or you, you have a function inside of that function, the all of the function values are sorry, all of the names of the functions, and all of the declarations of your variables will be moved up to the top. So before any of your code is run, what JavaScript does is it actually takes those function and moves them up top. That's why you can actually call a function before it's actually being defined. And then it will take the variable creation, not the variable setting of values, but the fact that there is a variable there, it will move them up to the top. - -34 -00:12:17,430 --> 00:12:23,700 -Scott Tolinski: That was episode number 17. And that was a great answer. Yep. Yes, Episode, but - -35 -00:12:23,700 --> 00:12:26,280 -Wes Bos: what was that? Was that a hard or? - -36 -00:12:26,640 --> 00:12:36,810 -Scott Tolinski: That I think was an intermediate? Yeah, I think that would have would have been a lot more intermediate if we had an already done this. And, yeah, this solution. Okay, cool. - -37 -00:12:36,990 --> 00:12:38,880 -Wes Bos: I don't I don't I don't use hosting. - -38 -00:12:39,120 --> 00:12:43,380 -Scott Tolinski: You don't even have to add it's not something that you think about right? Because it's not No, you're doing personally. - -39 -00:12:43,560 --> 00:12:45,420 -Wes Bos: No. Oh, I guess I gotta give you one. Oh, yeah. - -40 -00:12:45,420 --> 00:12:47,250 -Unknown: What you get what you get what you get? - -41 -00:12:47,370 --> 00:12:53,310 -Wes Bos: What are the advantages of using a CSS preprocessor? Oh, yeah, easy question under? - -42 -00:12:53,340 --> 00:14:15,330 -Scott Tolinski: It's an easy question. So pre processors for CSS, for those of you who don't know, is basically a little compiler that runs on your code, whether it's a stylist code, or SAS code, or some sort of CSS like code. It's a compiler that runs on that code and transforms it into CSS. Now, the reason for this is is that well, CSS is a lot cooler, with a lot more features. Like, it's hard. It's hard to even think back to a time when I wasn't writing CSS with the preprocessor. So a CSS preprocessor allows for a ton of additional features being added on to CSS without having to worry about CSS approving those into the spec itself. So because it compiles down to CSS and it takes care of things like prefixing for you allows you to do nested selectors. So you can nest selectors inside of other selectors are greatly reducing, typing and making your code a little bit more organized. It allows for things like variables so you can reuse variables. It allows for things like functions to make your code more concise, mixins. Again, all this stuff to save you a ton of time, if you aren't using some sort of CSS preprocessor via sass, or stylus or whatever, or maybe even a post CSS kind of thing, or even a styled components or emotion or whatever. I highly recommend using something because it's uh, it's important. It makes your life a lot better. - -43 -00:14:15,390 --> 00:14:16,170 -Wes Bos: Good answer. - -44 -00:14:16,380 --> 00:14:24,240 -Scott Tolinski: Thank you. Thank you very much. All right, let's see what we got here. Oh, I gotta go to it. I got another hard one. I'm sorry. - -45 -00:14:24,480 --> 00:14:25,740 -Unknown: Ah, damn, - -46 -00:14:25,740 --> 00:14:36,330 -Scott Tolinski: I know the answer to this one. So I'm gonna hope I'm gonna see if you do what, what is memo ization? memo ization, which sounds like a child saying memorization but - -47 -00:14:36,450 --> 00:14:48,720 -Wes Bos: not Oh, man. I know this, but I don't I it has something to do with like nesting functions inside of each other. Where I don't know. All I know is that something to do with nesting functions inside of each other. That's, - -48 -00:14:49,050 --> 00:15:19,860 -Scott Tolinski: that's all I know about. The word memorization is a clue to because it's basically caching the output of a function calls so that subsequent calls are faster. Again, it's not something that we end up doing really, if you're using a lot of libraries will occasionally do this kind of caching for you. But yeah, memoization is the process of caching the output of function calls. So subsequent calls are faster calling the function again, with the same input will return the cached output without needing to do the calculation again. - -49 -00:15:20,070 --> 00:15:31,230 -Wes Bos: Oh, I've done that before. I didn't know that. That's what that was called. Yeah. Okay. Well, that's a good, that's such a scary interview question. That's - -50 -00:15:31,230 --> 00:15:43,680 -Scott Tolinski: a scary interview question. I feel like if I were given that in an interview, I'd be like, Oh, I don't know. That's why I hate interview questions. Because you know, you can Yeah, you can know this stuff and not know it at the same time, you know, - -51 -00:15:43,890 --> 00:15:54,930 -Wes Bos: totally. Oh, that was a good one. All right, I got a describe the different ways to create an object, when should certain ways be preferred over others - -52 -00:15:55,020 --> 00:16:20,790 -Scott Tolinski: different ways to create an object like instructor pattern and stuff like that? I've been using a I like, pretty much don't use any of them other than, you know, const variable equal to object? Because, yeah, in most situations, I'm using a class otherwise. So yeah, hold on a second. I'm trying to find the question. No cheating. I'm not cheating the answer here. I just want to find the question. So I can have it in front of me. - -53 -00:16:21,150 --> 00:16:22,110 -Wes Bos: Okay, turns out - -54 -00:16:22,110 --> 00:17:04,800 -Scott Tolinski: a lot of these questions. Use the word object. And yeah, this one is always I'm gonna go ahead and just say, I'm gonna do really bad on this question, because it involves memorizing of stuff like this. I don't know. Yeah, there's the constructor pattern. There's prototype pattern, stuff like that, where you're creating an object based on another object, right? Yeah. prototype is the the parent object. So you're creating a like a version of the object that has all of the properties of its prototype? So is, I honestly don't, I'm just totally embarrassed myself here with the constructor pattern? Because I don't honestly know what it means is the constructor pattern creating a new object just based on like, Yes, just creating a new object based on nothing. - -55 -00:17:04,949 --> 00:17:53,790 -Wes Bos: Yeah, you just have, well, you have a function like in the example they have here says a person takes in a name and an age and then and then you can use the new keyword in JavaScript, let's say, say const. person, one equals new person, and then you pass the name and the age. Yeah, from that. And then you after that, you can also augment the prototype of that. So it's, what else do we have here. So there's object literal, which is probably 98% of the time, okay, that we use, and that's object literal, is just you open a curly bracket and close the curly bracket and, and that's where you have it, then you have the constructor pattern, which has sort of been replaced by using classes now. Then you have the factory, a factory function, where you just have a, it's just it's basically just a function that returns an object. And then you have object create, which I don't myself, I never really use all that often. - -56 -00:17:53,810 --> 00:18:07,410 -Scott Tolinski: Yeah, see, it's like so funny, because like, you use this stuff every day. And I could, yeah, do any of these things. But the moment you asked me to define or describe the like, the names of them and stuff like that, it all goes off the rails. - -57 -00:18:07,410 --> 00:18:33,720 -Wes Bos: Totally. Yeah. And I think that's, that's really important to note in this is that, like, these interview questions are often not a good way to show. Maybe we're just backpedaling, because we're so garbage at this right now. But it's not a great way to see someone's skill. I think the proof is in the pudding. When when someone's able to actually look at the code that they write day in day out, rather than knowing these little gotchas. And like little oddities about JavaScript. - -58 -00:18:33,830 --> 00:19:05,360 -Scott Tolinski: Yeah, it's it's funny too, because like, and many times, I might even be nervous. If I were to ask this question to somebody and they were do say, like, give me an like, if they were to give me like a dictionary version of the answer is sort of like, do you actually know what this means in practice? Or do you did you just memorize this this? And yeah, so that that is the tough part with these sort of things is what they are actually doing and what they mean versus you know, the English behind it. All right, let's get one for you going here. What are we at? How many have we done here? - -59 -00:19:05,490 --> 00:19:09,270 -Wes Bos: Maybe we got I think we got a couple more. Let's go for another couple minutes. Cool. - -60 -00:19:09,300 --> 00:19:22,470 -Scott Tolinski: Yeah, I got a good one for you right here. It's an intermediate. So yeah, the tension is building. What is event delegation and why is it useful? Can you show an example using it? - -61 -00:19:22,770 --> 00:21:04,800 -Wes Bos: Yes. So event delegation, I actually like this one, cuz I've explained it many times when teaching JavaScript JavaScript, sometimes, let's say you've got a list of let's say, you've got a unordered list list of to do's on there, and you have three to do's when the page loads. And when somebody clicks on one of those list items, you want to mark it as done right, you want to cross it out, the normal thing you would do is you would say okay, when the page loads, select all the list items, loop over each of them, and then listen for a click on those list items and then toggle them on and off. The problem is that when you add a fourth list item after the page has loaded dynamically via JavaScript That new Li no longer has the event or not no longer it doesn't have the event attached to it unless you were to explicitly bind it every single time. That's, that's a pain in the ass. And you also have like a lot more event listeners than you necessarily need to. So event delegation, what it does is it listens for the event on a higher parent, I always talk about negligent children, meaning that you know that unordered list will be there on page load. So you listen for the click on the unordered list, and then you delegate it down to the actual child that was clicked. That's the whole idea behind bubbling in JavaScript events. And then that way, you only have one event to deal with, it's a click on the UL, and future list items that are added in the future children that are not yet born, are have to will will still be listened to. So that that's actually the way that react does it react actually has just one event? And I think it's on the body or the document not not totally sure. It just listens for events at the very top level. And it reuses that that one event over and over again. - -62 -00:21:04,920 --> 00:21:09,000 -Scott Tolinski: Nice. The children who have not yet been born need to be heard. - -63 -00:21:09,590 --> 00:21:10,800 -Wes Bos: Yeah, it's like - -64 -00:21:12,630 --> 00:21:13,380 -Scott Tolinski: it's a deep mess. - -65 -00:21:13,920 --> 00:21:27,900 -Wes Bos: The parent is responsible for listening for clicks on its children, right? children's don't know any better. There's some of the children are not yet even born yet. But the parent is responsible for handling clicks and he's known did I receive myself on that one? No, I - -66 -00:21:27,900 --> 00:21:38,360 -Scott Tolinski: just saying this is a deep message. We should all take some time to think about it. Alright, let's see what we got next. What's next? I'm ready. Oh, come on. Easy. Give me Oh, Lizzie. - -67 -00:21:38,360 --> 00:21:53,280 -Wes Bos: This is a this is a coding one. This is too hard to do on the podcast. So I'll get you another one. But the question was create a function pipe that performs left to right function composition by returning a function that accepts one. Yeah. Okay. Yeah. No, that's that's too hard to do on - -68 -00:21:53,280 --> 00:22:02,670 -Scott Tolinski: the whiteboard coding, but like speaking it out, speak the function will say the function keyword parenthese. Yeah, yeah. Oh, - -69 -00:22:02,670 --> 00:22:09,960 -Wes Bos: I like this. There's tons of ways you could probably solve this. How do you compare two objects? in JavaScript? Oh, - -70 -00:22:09,990 --> 00:23:25,080 -Scott Tolinski: cool. Okay, I know this. Yeah. Because I've just been recently comparing some objects. So Dude, I have some really cool stuff to show you very soon on. And I'll be showing everyone else soon after that, for some code I've been working on this is very fancy. But um, yeah. So how do you compare two objects? Well, you cannot do the equals operator, right? My, my first inclination would be to just loop over the contents of it, and compare each item key devalue, because for several reasons, I guess, the way out practically do it in like real life, I would pick up lodash. Because lodash has already built a way for me to do that. That's optimized and fast and everything like that. So in real world, I'm gonna, most likely have lodash installed, and I'm going to use a method in lodash. I don't even know what it is. It's probably, like compare something I forget what it is. I always have to look them up. But yeah, so I would I would loop over each item individually, and compare keys and values. Reason being, obviously the equals operator isn't going to work. And some people might, I think you like some people might think that you could do like a, like a to string or like a JSON to string output of this kind of thing. - -71 -00:23:25,140 --> 00:23:30,780 -Wes Bos: Yeah. But that would work. That's like the poor man. It won't work when it No, why not? - -72 -00:23:30,810 --> 00:23:56,820 -Scott Tolinski: Because Wouldn't it like, if you had a a number and a string? Like wouldn't? Isn't there some use case where something could be the same as a string, but not when it's a different type of a different type? Am I am I trippin? Like, am I tripping to say that like a string of an object is different than it was based on the type that shows up? - -73 -00:23:57,930 --> 00:24:23,730 -Wes Bos: That's a good question. Let's see Wes, West one name equals a string of Wes and age equals a number 100. So we just tried it. And I think JSON stringify would would do it. Because if you have like a number of 100, and a string of 100, those are going to be different because it's JSON will obviously keep types when you string a file, which is great. And then things like dates, will will be converted out for you. Yeah. - -74 -00:24:25,230 --> 00:24:26,670 -Scott Tolinski: That wouldn't work. But you're right, - -75 -00:24:27,180 --> 00:24:56,250 -Wes Bos: is probably not the most performant way to do it. There's probably some downsides to doing it. If you look at the example on this website, it's kind of interesting, because the way I would normally just do it is just take the keys from each one. And this is assuming that it's only one level deep, because as soon as you start getting into multiple levels, then you get into recursion, but then you could check all the strings to check all the dates. If you want to check prototypes, you can and then and numbers so - -76 -00:24:56,279 --> 00:25:09,000 -Scott Tolinski: yeah, this is this is why interesting lodash because I'm guessing they would have a D Compare. And if I really wanted to see how that deep compare was being done, I would just check out the source because, yeah, that's how I that's how I roll. Yeah, - -77 -00:25:09,000 --> 00:25:22,110 -Wes Bos: that's not something that I would like this is a huge function to compare two objects. It's not something that I would write myself, just because I know that something like lodash has been battle tested and is the absolute fastest way to - -78 -00:25:22,320 --> 00:26:07,350 -Scott Tolinski: compare a two objects. And not to mention, if you do like code splitting, and just import that one function itself, you're not bringing in like a huge library is that their code is probably going to be smaller than what you'd write anyways for that. So yeah, whoo. That's good. Alrighty, let's get this next one going here. Okay, and this is an this is a coding one, the coding, one was saying create a function that masks string characters. Okay, this one is listed as hard. But I'm gonna go ahead and say this is this is the biggest softball ever. This is actually the definition of a softball. It's large and not so easy to hit, but it's lifted as hard. Okay, can you describe how CSS specific f this word, man, specificity, - -79 -00:26:07,380 --> 00:26:08,160 -Wes Bos: specificity, - -80 -00:26:08,190 --> 00:26:13,050 -Scott Tolinski: specificity? Yeah, I do this for a living specificity works? - -81 -00:26:13,410 --> 00:27:21,570 -Wes Bos: Yes. So in CSS, you have elements and things on the page that you want to grab and apply CSS to it. And and there's this like, kind of actually complicated calculation as to who decides what wins if you give something a background red, and then you have another selector, and it's background green, like, Who decides if it's going to be red or green. And that's, that's what specificity is. So there's a calculation that goes into it. That says like, Okay, if you have a class selector, you get like one point. And if you have an element selector, you get two points. And if you have an element and a class selector and a child selector, you get like three points and where it is in the document. Also, it gives it more specificity or less specificity. So if if a selector comes on after, after another selector, so you say background red and background green, then the green is going to win out if the specificity of those two selectors are are the same. So there's a whole bunch of things that play into it, depending on how specific the selector is, and where it is in your CSS. And that will decide who wins out. - -82 -00:27:21,900 --> 00:27:23,760 -Scott Tolinski: Nice Battle of red and blue. - -83 -00:27:24,029 --> 00:27:43,980 -Wes Bos: Yes, here we go. Let's see what the actual answer says, oh, inline rules. That's one I didn't even talk about, like is the CSS in a separate CSS file? Is it in a style tag? Or is it a style attribute? there? Number of ID selectors, numbers of classes, pseudo and attribute selector. Number of tags. And pseudo element selectors. So - -84 -00:27:44,130 --> 00:27:46,140 -Scott Tolinski: exclamation point, important. - -85 -00:27:47,100 --> 00:27:56,580 -Wes Bos: Good to hear specificity matrix, inline ID, class pseudo tag pseudo element. In the case of equal specificity, the last rules applied, I said that - -86 -00:27:56,700 --> 00:28:12,180 -Scott Tolinski: this question if you if they would ask you to, like write out that matrix. Like, I feel like I could do it from memory. But you know, it might leave out one or two things just because you're not thinking of everything. Hopefully, I could just do that. Just because you have been, you know, from just writing CSS, the matrix is so - -87 -00:28:12,480 --> 00:28:20,760 -Wes Bos: yeah, that's, that's a really good question. I think because if you're hiring someone and you have a large code base, things get messy real quick, if you don't really understand how that works. - -88 -00:28:20,789 --> 00:28:22,410 -Scott Tolinski: Yeah, definitely. Alright, let's - -89 -00:28:22,410 --> 00:28:37,230 -Wes Bos: wrap it up there. If you like this kind of episode, let us know. Tweet us at syntax FM, and I'm at Wes Bos Scott has at St. Lynskey. Yeah, and we will do this again. I really like it. When I first found this website, I was really excited. - -90 -00:28:37,650 --> 00:29:00,570 -Scott Tolinski: If you like seeing a SCORM on like questions that we should be able to answer. I it's so funny, because I it's like we talk about this stuff. But you you you really know how this stuff works deep down, and you use it every day. But when somebody just sits and asks you to explain it. That's where like, then things get rough. Things get very rough, rough and tough. - -91 -00:29:00,780 --> 00:29:17,850 -Wes Bos: Yeah. And if you have your own questions that you would like to see us stumped with. I really like this website. So it's called 30 seconds of interviews.org. And like the It looks like you can just add your own questions on GitHub, which is really cool. So props to the guy who put this together. - -92 -00:29:17,880 --> 00:29:19,320 -Scott Tolinski: Yeah, it's nice. Very nice. - -93 -00:29:19,590 --> 00:29:27,630 -Wes Bos: Yeah. So go ahead and add in your own questions on the GitHub, and that will that will feed future episodes. Sick, - -94 -00:29:27,660 --> 00:29:29,520 -Scott Tolinski: so yeah, cool. Cool, man. That's - -95 -00:29:29,670 --> 00:29:32,790 -Wes Bos: it for today. I guess we'll see on Wednesday stuff. - -96 -00:29:33,630 --> 00:29:35,520 -Unknown: That should be the name of the episode stumped. - -97 -00:29:35,970 --> 00:29:41,460 -Wes Bos: stumped. Yeah. st you MPD. Like it's like pumped. - -98 -00:29:41,520 --> 00:29:44,460 -Unknown: Yeah, dude, that's perfect. Love it. stumped. printed. - -99 -00:29:44,490 --> 00:29:49,290 -Wes Bos: stumped. Northwestern Scott. All right. That's it. Alrighty, we'll see you next episode, please. - -100 -00:29:51,090 --> 00:30:00,900 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you will. Like this show - diff --git a/transcripts/Syntax72.srt b/transcripts/Syntax72.srt deleted file mode 100644 index d8db7c1b3..000000000 --- a/transcripts/Syntax72.srt +++ /dev/null @@ -1,224 +0,0 @@ -1 -00:00:01,319 --> 00:00:03,660 -Announcer: You're listening to syntax the podcast with - -2 -00:00:03,660 --> 00:00:04,590 -Unknown: the tastiest web - -3 -00:00:04,590 --> 00:00:10,530 -development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. - -4 -00:00:10,559 --> 00:01:33,150 -Wes Bos: Hello everybody and welcome to a syntax. This is the podcast with the tastiest web development treats. Today we're gonna be talking all about accessibility. This has been a highly requested topic. And I think it's probably one topic people have actually come up to me in person at conferences most and asked us to do a podcast on so I'm really excited about it. We're going to cover all the ins and outs of accessibility and I think most importantly, how you can make your apps and websites more accessible. Starting today with me as always is Scott to Lynskey. Hey, what's up, what's up, what's up, I'm doing good. And now you just came back from vacation. So we're gonna see how this goes. Usually when we come back from vacations, we have to have lots of cuts in the hobby. So I think this one should be pretty good. I'm feeling good. I was telling Wes, I just brewed a batch of cold brew. And this is like my first time doing it. And I so I just kind of eyeballed the ratios, I just said, screw it, and just throw some coffee in a cup. And then so I don't really know how I would it's like four to one concentrated so it's concentrated. But I have no idea how concentrated so I am solely sipping a glass of concentrated cold here. So Scott starts going off the rails and starts shelling. It starts yelling, accessibility, accessibility, accessibility, let you know why. - -5 -00:01:33,629 --> 00:01:44,880 -Unknown: Exactly. So we're gonna see how this goes I, I couldn't progressively get more intense as this episode goes. That's exciting. That's all part of the process here. So - -6 -00:01:44,909 --> 00:06:33,360 -Wes Bos: this episode is sponsored by cloudinary, who makes they make image hosting, video hosting, transforming, and all sorts of just amazing stuff, super duper easy. As well as dq systems, dq systems is the perfect, they're the perfect sponsor for this episode, because they are all about accessibility, you go to dq.com, that's dqe.com can get a brief little overview of what they do. But we're gonna be diving into both of these sponsors, as this episode goes on. There's a lot of great stuff that we're gonna we're going to dive into and want to thank dq and cloudinary, for sponsoring this episode on accessibility. Awesome. So I also want to give a huge thanks to everybody on Twitter who sort of helped shape up this episode. Because I'm not an expert. When it comes to accessibility, I think I know quite a bit, I've done a couple websites that are legally required to be accessible by the government. Because in Ontario, now, by law, if you make a new or significantly refreshed public website is the words, and you have a company of 50 or more employees, or you are a public sector organization, I think that includes banks as well, which are clearly more than 50 employees, your website must be accessible to anyone who is visiting it so nice. But yeah, it's kind of interesting to see that I'm not an expert. But I put out a call on Twitter, as I often will do before an episode like this. And it was just a trove of amazing information. So if you while you're listening to us, after you listen to this, make sure you check out the link to that Twitter thread just because there's tons of good information and also, like, follow some of the people that reply to it, because it's helpful to be following some of the experts in this. Yeah. Which I think is a good note to start this on is that Wes and I are not experts in the stability. So we're gonna we're gonna do our best here to convey everything as I don't know, as accurate as possible here, but neither of us. I think we we both have training, we both use accessibility features. But you're not you're not a accessibility or now AI expert are us. No, but I think that that's important, because I don't think that you have to be an accessibility expert, because all of us are making websites at the end of the day. And all of us should know enough about accessibility in order to make them accessible to anyone who wants to come and use it right. So obviously, there's always going to be experts in these areas that really know the nitty gritty of it. But I think that it's not something you should sort of stand back from and let the experts take over because it's all of our jobs at the end of the day to make websites accessible for absolutely every single one. And I think like I have this kind of feeling in our industry around accessibility and testing. Both of those areas I think people are a little bit afraid of because you don't want to come off as somebody who's like giving the middle finger to people with someone with a disability. And you also it testing is people are a little bit scared of it because like the repercussions of not having an accessible website or the repercussions of not having a well tested applications are they're very real and they could they could lead to I don't know big downside you can get sued in it in Ontario. If you If you don't have it, right, so it's a big, a big thing to have. But so that's kind of what we're going at today. One little tweet that I got from Amy Carney she tweeted out, I like to encourage people to make changes today doesn't have to be 100% make it more accessible than yesterday, I think that's the perfect idea to encapsulate This episode is that we're all just going to be learning a whole bunch of stuff in this episode. And we just want to make our websites more accessible than it is yesterday. And it doesn't absolutely need to be perfect. Before you push anything live. Yeah, and hopefully, these tools, tips, sort of little things we give you here will inspire you to go make those changes, because a lot of this stuff is is pretty easy to implement in it. And it doesn't take enough of your time where you're going to have to like groan about you know, taking the time to do it. This is stuff that you can add incrementally. Like we said, this stuff you can add and all at once, but at the end of the day, it's not hard. It's just something that takes effort, you know, it takes a little bit of your time. Alright, so let's start off with the way that this episode is going to go is we're going to talk about the basics of accessibility. And then we're going to go through what I like to call easy wins. These are just things that you can do to your website to make sure that you're not accidentally or on purpose, making your application hard to use for anyone. But there's a whole bunch of tools we can use are good for testing accessibility, whatnot. And then we have some resources. And we're going to end it off on just some some ideas. So what is accessibility? I think I was on the W three.org. website. And there's a quote from Tim berners Lee, who is like literally the guy who made the internet. - -7 -00:06:34,770 --> 00:10:43,289 -And I like this quote a lot. It says the web is fundamentally designed to work for all people, whatever their hardware, software, language, location or ability. When the web meets this goal it is it is accessible to people with a diverse range of hearing, movement, sight and cognitive ability. Thus, the impact of a disability is radically changed on the web. Because the web removes barriers. It's so true, right? Like, because there's a lot of things, just the rest of the world that are a huge barrier, whether it's a physical barrier, or whether it's any other type of barrier that someone would have. And those are totally blown down by the internet. So it removes those barriers to communication interaction that many people face in the physical world. However, when websites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the web. So I think I love that that's a kind of a nice little. Yeah, thing. It's not It's not about people think like, Oh, you know, make sure that your website is accessible by buying people. It's just that absolutely everybody should be able to use your website or your web application. Yeah. I mean, who wants to exclude anyone from their audience intentionally? And whether or not you are doing it intentionally by you know, not doing these things, when you know, you should or, you know, just ignoring this entirely or whatever, I think you want everyone who wants to view your content to be able to view it. And that at the end of the day is, you know, really what's important. You know, I actually funny, I was looking at the Li, like, Where did ally come from? Because he had a one one y. And I, for some reason, I don't know, like, I don't know the exact history, or if the word Li was come up with first I guess it probably didn't. But either way, like so the a 11. Y stands for accessibility, where the a and then the next 11 letters, and then the Y so I always just thought it was like, Oh, well, it's like leet leet speak or something for ally. Yeah, I thought that too. For years. Yeah. So it really has that meaning where it's a Hey, accessibility is a long word. It's easier to write a 11. Why? And then you can call it ally two is a nice little catchy thing. So really, ally is just the term for assist ability, right? Yeah, I love that sort of like shorthand Andreessen Horowitz, which is a venture capital firm, they use a 16 Z, because it's Andreessen Horowitz. And there's 16 letters between the A and the C. Yeah, take something like that. And just make it like super duper easy and nice and shareable. I mean, allies a great little, little thing for that. So you've probably seen that a 11. Why around anytime anyone's talking about accessibility. And that's really what it comes down to is that it just means accessibility. And so, you know, we've been talking a little bit about this disability itself, you know, allowing anyone to use your stuff. And particularly, it has to do with like people who have disabilities really, right, because people with disabilities are mainly going to be the people who are having trouble using your site if you're not focused on these accessibility features. So let's talk a little bit about what are the types of disabilities there are? And maybe this gives some examples because sometimes, some of them are obvious, but some of them are maybe less obvious. Yeah. So there's this really great website from valtech design. It's actually medium article, and it's called inclusive design. And they took a little screenshot from Microsoft's inclusive design toolkit. They actually Line the three different types of disabilities, there's permanent disabilities, which is you could have one arm or you could be blind, right? There's a temporary disabilities, which is you could have an arm injury or cataract, which I guess will be solved and their situational disabilities where you could be a new parent, or a distracted driver, right? So there's, you got to think about, it's not just about I think a lot of the examples that we use are our blind users. And I think that's a really important part to, to pay attention to. But there's a whole other aspect of different types of people in different situations, whether it's permanent, temporary, situational, that need to be paid attention to. Yeah, yeah. - -8 -00:10:43,289 --> 00:14:22,679 -I mean, a lot of these, you know, the the situation, or temporary ones are probably stuff that most people in their lives have experienced at some point. So they're very easy to understand. I mean, now, a lot of people aren't ever going to have one arm or be blind or deaf, but, you know, I tore a ligament in my thumb, and I was in a cast for, you know, six months, and I couldn't use my left hand and being left handed I you know, that's one of those things that you go through in life, and you figure out how to do it. And that certainly is like a little minor thing there is even a situational West. I know, you know, with your your two kids when I when Landon was born, I was trying to get some work done on the on the late night, yeah, whenever you could. And here he is sleeping in your arms, and you got your left hand typing, and swiping and doing all that stuff. And you learn how how different it is to try to navigate these things when you're trying to harness a sleeping baby. Some of these good examples, I like this A distracted driver. As an example here for situational two. I didn't I didn't even think about that. But you can think of something like I don't know, if iOS has this. There's the like in Council entertainment systems in cars. And you can get it with iOS or Android Auto. Well, Android, the phone has an Android Auto app that is the exact same as that in Council thing. So if you have your phone on a, like a clip or something, and you have Android Auto up, everything is huge. The buttons are huge. The text is huge. It makes it really easy. Like if you want to just go to a map or click the microphone to talk into your phone, it makes everything at a glance. So you don't have to go and use your phone. And you can even set it. So every time you're in your phone, Android Auto automatically pops up. And that way you have those features that are right in there easy to use. I think that's a great example of a stability that I've never even thought of to be honest. Yeah, like I have a really good example of that. So with iOS, there's CarPlay. But I have a 2015 BMW, and it's not in that. And it costs like three grand to upgrade the whole system. So you can't put CarPlay on your phone. I don't think that there is no it's it's something that hooks up and it mirrors your display. Yeah, from your phone to the car, they should do that. And then they're really helped. There's a bunch of apps. Yeah, I wish I had that. Because like one example is overcast, the podcast app that I have used to be able to tap a podcast and it would start playing. And that was great. Because when you have it on the dock, and you're driving, and you want to just tap it and start playing. But now what they did is they when you tap it, it brings you to the information and then you have to find the little play button, and then and then scroll down and then tap that. And I thought like that's kind of negligent because people everybody's using this in their car. Yeah, not everyone has CarPlay. And it was really frustrating that he would not the Marco arment he would not introduce a like a setting to play it when you tap it right, because I found that to be distracting when I was trying to drive and flip on a new podcast. Yeah, there's nothing worse than trying to find a new podcast while you're driving. You're like, like, I should not be doing this right now. I'm just gonna hit play on something I don't want to listen to right now. Anyways, just just to have something on. Okay, so those are, those are some good examples of different types of disabilities, obviously, you know, we spent some time on the situational and temporary but permanent ones. I mean, there's all sorts of them, you know, like color blindness, Deaf blindness, all that sort of stuff, right? Yeah, yeah. So so those are, those are the types of things that we're going to be needing to make our sites accessible for. And so I like how you wrote in our notes, who is this for question mark, and then everyone? Yeah, it's for everyone. Everyone, at some point will have some sort of temporary or situational disability, and many people will have permanent disabilities. And we want to we will do we don't want to exclude those people from our web experiences. - -9 -00:14:22,740 --> 00:18:41,940 -Yeah. Especially because almost all of this stuff with the exception of I think some of the audio and video transcription stuff, although we'll talk about that in just a second is free like minutes to implement and it's not like a huge thing that you need to undertake and spend weeks and sprints and Sprint's on it's especially if you if you think about the stuff beforehand, it should just be an extra, oh, what was the ARIA attribute for this? Or, oh, what's the best way to approach a pop up to make it accessible, it should be an extra couple minutes here and there to make sure that this stuff works. And I think that going those extra couple of minutes is is really, really important for making sure that your website accessible for everyone. So let's go into like the how, how do you code up a website that is accessible. And I think like the very basic, most easy win that you can have is to write good code and use semantic elements and clean HTML. So when you start to mock up your document, it's important that you use obviously paragraph tags for text, it's important that you use images for actual images of things. I know a lot of people like to use background images instead. And they'll have like a div and they'll put a background image on that. And they'll think that that's, that's, you can call it a day. But at the end of the day, background images are not for actual images, that background images are for things like patterns and design, right, decorate an actual content on the page. Yeah, which is an image tag right and using all of your heading tags, so for you likely will have one h1 tag on the page and a couple h2 tags, like if you think back to when you learn Microsoft Word, you would make sure that you use appropriate headings, paragraph tags, and all of the different things that Microsoft Word gave you. That's the same on the web, you need to whenever you put some content on the page, you must think to yourself, what is the most semantic element that I can use to represent this content on the screen. And not only is that going to make it more accessible, but it's also going to be really good for SEO. And it's also going to make your job of writing CSS to style your content much better, as well. Yeah. So on that same note, too, you're gonna want to respect the hierarchy of these headings, too. Because that hierarchy is directly like translated via screen readers, I was listening to something that was saying, Let basically, if it approaches a heading like a screen reader approaches a heading, you'll give the user the option to skip that content entirely. So imagine you add an incorrect use of headings and your heading wasn't like encapsulating the content there. And then the user who's using a screen reader might think it is and they want to skip that content, maybe they're skipping a whole bunch of extra stuff, just because you didn't have the proper hierarchy of head like heading tags, which is, it's a pretty easy thing to just plan out. Right, take a second to point it out. Another thing on that on that regard, because we mentioned images, and so the distinction there is like decorative verse, actual content, images, right. So you're going to want to not use background images for content images, because you cannot give them all tags. And alt tag is really how these screen readers let these users know what the image is and whether or not they should care about the content, right. But what happens if like, people use an image and it's decorative, maybe you have like a position absolute or something and you're using an image tag for a decorative item, if you have an alt tag with an empty string in it, just like no space, empty string, it'll let the screen reader know that that's purely decorative, and it's going to ignore that entirely. So again, you don't you probably like, if you have like a wallpaper background or something, and it's a div, you probably don't want this screen reader to be like wallpaper background, you know, because that is just like extraneous, they just don't need to know about that. Another thing with images is obviously you need to have alt text on all of your images. So the two things on every image that are absolutely required are obviously the source and the alt, one thing I learned recently is that alt doesn't need, like, if you have a image of a dog, your alt tag doesn't need to say picture of a dog. It just needs to say dog because the screen reader knows that it is a picture. So it's unnecessary to put that in there. And that's I flipped on the React es lint, a 11 why rules? Yes. And that's one thing that it told me it's unnecessary to put picture of, in front of the actual description of it. - -10 -00:18:42,180 --> 00:23:34,950 -Yeah, I'm gonna I'm gonna say that that's, that's a super easy when I have that down here is is to use the ESLint rules for accessibility, the Li SP es lint rules, if you're using react or whatever, because, hey, it just lets you know of any potential issues. Like I was using links as buttons occasionally and and every single time would be like, what are you doing with these button links, like you'd this needs to be a button and stuff like that I almost didn't even think about while I was coding. And so like, it's just really, it's an easy win to turn those things on. It's not like that the you can't just do that and call it a day. Those aren't like the end all be all, but it's it really makes it a lot easier if you have those es lint rules yelling at you about stuff. Totally, let's explain the button versus link thing real quick. Because this is something myself I've done for years and doing it incorrectly where you'll do like a link that goes to a ref pound it goes to nothing. And then and then when you use JavaScript to listen for a click on that, and then when someone clicks that you you do your action, right. And the rule is, is if it goes somewhere, if it has a URL, then it's an anchor link, it's in a tag. And if it doesn't go anywhere, but it just performs an action on the page, then you should use a button and the reason why people often reach for the link that does nothing is because the button has default styles and at the pain to, to unstyled it right? So what most people will do is you'll just get like a class of text button. And just make sure that your button that has that class looks exactly the same way as your anchor links. That's something I did my upcoming react course, the entire navigation is anchor links, except for the button to open the cart, but they need to look exactly the same. So you need to make sure that we're styling the anchor links and the buttons in the nav the exact same way. Yeah, absolutely. Along that we also make sure you're using your html5 input. So don't just use a div on absolutely everything. We have more semantic elements, articles, section header footer aside, all of these tags that we have, they don't do anything special for your HTML, but they are more descriptive as to what the content is inside of them. And as the benefit, you get a enter, you write better CSS and you get an SEO boost on that as well. Yeah, free easy wins on the same regard is proper inputs, right, we have Long gone are the days where we just have a text input and a text area and a submit input. Like we have lots of inputs now from email, to password, to phone to any of that sort of stuff, we have inputs that will match what you're trying to do. And not only those inputs are going to give a more native a visual experience to folks who aren't disabled. But it's also going to be of a better experience for anyone who has these disabilities because your operating system knows how to handle those in those proper situations. Right. these are these are default built in things. So make sure you are using the proper input type for whatever you're using. And again, this is a usability thing that you should have in your your app. Anyways. Next one we have here is the CSS order property. So Flexbox and CSS Grid allow you to rearrange elements on the page. But one downside to that is that it will not like let's say you have a sentence. And then you have another sentence underneath that you want to switch them visually to you, it will show you those sentences in the order and you will read them in that order. However, if you were to either use your select, they tried to select the text with your cursor, or you're using a screen reader, the order is not respected. So only use Flexbox. And grid order property when you want to visually change something and it doesn't affect the actual source order of the content. So you don't want to confuse people. Because at the end of the day, if you were to strip all of the CSS off the page, the content should still stand by itself and still be readable and accessible. Yeah, another good one here is color usage. And this is one that some designers have some problems with, because they like they're like rays on whites and stuff like that. But a color usage for a whole host of reasons. b we have people that are colorblind, I actually worked with a, I worked with a dev at Ford, who was colorblind. And oddly enough, his like, I don't know, I never got around to asking him exactly how he did this. But his colors were always 100% accurate to how they should be, even though he was working with colors that he was blind to. I know, he's just pulling values and stuff like that. But it was still like there was never any weird issues, because he was always on point about it. But I never had any issues where he was, like using the wrong color for something or something I know, it's all it's all hex values and whatever he's pulling from the document, but I was really impressed with his ability to translate the colors, you know, that maybe you had a harder time seeing the difference between but because of color blindness, you don't want to use things that could be potentially ambiguous. I think there's different types of color blindness, right? Do you know the different types? Or do you have that offhand? - -11 -00:23:35,160 --> 00:27:28,500 -I don't I just All I know is my dad can't see purple or something like that. It's probably something worth looking into. Because I ran a test on the syntax website. And it didn't give me any I'm not sure if it checks color blindness or not. But it does check contrast, which is a huge one. Because if you look on the syntax website, all the episode numbers are in a light gray overtop of a lighter gray, and it looks sweet but it called me out on that because it's not enough contrast for for people to be able to see it. There was a like there was a period in time before people were really caring about disability as much as they are now. When like light rays on white or light graze on gray. We're so in and everyone is Yeah, what are you doing like this is this is impossible to read for low contrast. So yeah, you want to do a contrast checker on your colors. There's a billion contrast checkers online so you can check your colors for contrast, a lot of some of the tools that we give you later on are also going to let you know whether or not your colors are able to eat work well together and that regard. So color usage, whether it's for colorblindness or people who have sight issues in general again, this contrast are going to make this way way way way better. Yeah, there's that in OSX I only know this because a friend of the shy I was thinking we should start saying friend of the show a little bit more. Let's do it friend of the show. He goes online Henry have it He said, I don't know if he does this anymore. But he I think he used to go like one day a week on grayscale mode. Because there's a lot of people whether they get headaches or for whatever reason, they don't want color on their screen. So they turn their Mac onto grayscale mode, and then just run it. And I think that's really cool. If you could spend like one day even just like doing it one day and once and trying to see what is the web like in grayscale motor and what is the world like the I think you you would be tuned to a lot more little little things that bug you. And then when you're building your next website, you can take those into account. Yeah, I actually had my phone on grayscale for a little while when I was trying to use it less because people say that's a great way to use your phone, let's see return on grayscale. And it was really interesting. I got really used to it after a little while. But uh, that's an easy thing to do. It's easy to turn it on and just turn off any sort of saturation whatsoever on your display. But you know, what else is really super easy is using cloudinary to host your images. But Wes and I both use cloudinary. And it is a brilliant service. I think it's one of those. It's one of those things that when people try after listening to syntax, it's like Netlify, when people tried it, everyone wants to tweet us and tell us how much they love it if they've never used it. And cloudinary is exactly like one of those things, because everyone who tries cloudinary is just blown away by how easy it is. Yeah, so you can use cloudinary to host all of your images, and actually all of your videos as well. So if you have an application, and you want to host all of your images somewhere else, like go back to the CDN episode, I think that's actually how cloudinary stumbled upon us was we had an episode on using CD ends. And Scott said he uses this thing called Cloud Neri. I had never heard of it. And I actually switched over my websites to using cloudinary. Because obviously, they have a whole API where you can upload images, they have a whole entire client side API, which you can just upload, you don't need to have a back end to actually upload these images, they have this like really cool URL, where you can just put the URL in front of your existing images. And it will sort of suck them up and then host them on their own CDN. So you're not paying for the bandwidth yourself, you can still keep the images in your like repo, if you'd like to do that. One of my favorite features of cloudinary is the you can set the quality and the format of your images when you upload them. And you can set the quality and the format to auto and what it will do is it will automatically like it'll like kind of like compress it as much as it possibly can. It'll do its best job. And then the format is really cool. Because on Chrome, you can use web p, which is this new format. - -12 -00:27:28,950 --> 00:27:30,570 -Unknown: Small to Yeah, it's so - -13 -00:27:30,570 --> 00:27:56,400 -Wes Bos: it's it's a significant savings. And if a huge portion of your website users are using Chrome, then you can web P and it will detect the user agent of the browser and then send back either a web p or PNG and I just love that because like you know, you get into that weird space where like should this be a PNG or a JPEG and you're like it should be a PNG but it's oddly smaller if I save it as a JPEG and I don't know figure it out for - -14 -00:27:56,400 --> 00:28:03,180 -Unknown: me right? Now for me, I haven't figured it out for me is one of my favorite things. I guess I don't care. I don't just figure it out for me, please. - -15 -00:28:03,270 --> 00:31:53,970 -Wes Bos: One other thing. And this is actually why cloudinary is sponsoring this episode, we usually schedule our episodes months ahead of time for sponsors, we don't know what they're going to be. But for some reason, Scott and I totally forgot to schedule sponsors for this, this episode. And cloudinary said, Hey, we are actually putting out a blog post on accessibility, it'd be really cool to be able to sponsor that episode. And it just so worked out. So they just published this blog post called Making media accessible how to automatically generate alt text for images, which is amazing, because we just talked about all text and using machine learning now you can upload your images to cloud Neri and then it will look at the photo and decide what it is. And so they have an example here the upload photo of some people biking and it will spit back and alt text bicycles racing on a city street, which is so cool. There's some code examples on Yeah, I can't believe it. Like, I'm also gonna be talking about the YouTube auto transcripts in just a second. And this stuff is getting really good. And it's just like you really have less and less excuses at the end of the day. this blog post here has examples in Ruby, PHP, Python node, and Java is pretty pretty nifty. You should check it out at cloudinary comm we'll put the link to their blog posts in the show notes. So thanks so much to them for sponsoring. Alright, next up, we're gonna talk about something called Aria dash roles. And in general, you will be able to write your entire website in good clean semantic HTML, that's the absolute best thing you can do is just to code your website up in and clean paragraph tags and heading tags and image tags and unordered and ordered lists. And the idea is if you use clean HTML and use the proper elements, you're automatically accessible to anyone who wants to actually use it. However, that's not the in a perfect world. That would work but there's a lot of like, situations where mantic HTML sort of falls flat And you don't have specific elements for it's generally when you want to build a custom interface. So, of course, each HTML has an input with a type of slider or range, and you get like a little slider, right? But it just has one little dot, it's hard to style. And it's not a it's not as flexible as you would wish. You look at something like the jQuery UI slider, right. So often you find yourself writing these custom inputs, whether it's custom checkboxes, or, or pop up dialogues, or any non standard controls that come along. And if you're using like divs, and spans and allies, and all just a whole bunch of stuff to make a custom interface, there's no way a screen reader is going to be able to understand what's going on is the pop up currently open. What's the lower limit and the upper limit of the slider like if someone's searching for a flight, it's just not able to understand these things. And this is where you need to really make sure that your your interfaces are accessible. So that's where Aria roles come in. There's a whole bunch of ARIA dash roles that you can put on. So there is one specific one that I like to use a lot is Aria dash expanded. So if you're using like if you're building like a navigation for someone, and you want to show that this navigation is currently open, it's like a maybe a drop down menu, or maybe a mobile nebbia that like accordions open and close, you need to tell the user that it's currently open or close. So you can use the ARIA dash expanded is true or false. And myself, I like to use these Aria roles as my selectors in CSS. So instead of giving it a class of nav dash opened, just give it an aria attribute of ARIA Aria expanded equals true. And then in CSS, you can use an attribute selector to select it when it's open. And then and then style it and open it. And that's kind of like accessibility first. I'm a big fan of that. - -16 -00:31:54,000 --> 00:31:58,140 -Unknown: Yeah. And that's one less thing you have to type, then you don't have to have a class on that thing. - -17 -00:31:58,140 --> 00:36:50,310 -Wes Bos: Yeah, like, that's kind of how I think about it. Like, I don't want to have to like manage both the class and Aria. So if I have to put an aria on it, then I'll just use that to do all my CSS, there's a really nice article from the Google Developers website that shows like, sometimes if you don't do a custom checkbox, you can use the ARIA dash checked. Another one that I use fairly often is the ARIA label. And that is, if you by default, a screen reader is just going to read to the person the text inside of inside of an element. So if you have a button, it says developer tools, or you have a link, and it says developer tools, it'll say developer tools. But sometimes you need to give the user more context for what's going on. Or sometimes it's going to be just a visual, like, for example, the slider, the user doesn't know, if they can't see the slider, they don't know what the range is going to be. So if you put Aria label that will override what the screen reader is going to read back to you. And one good example is I was using a screen reader just before this podcast and there was a link that said developer tools, but it read it read it back to me as category developer tools like Oh, that makes so much sense because it's like, giving me a little bit more context to where this link will go, probably will bring me to a category page that shows me all of the developer tools in it. Yeah, another like, really common example would be like a hamburger menu, which you seen those everywhere. And there's typically just like a button with an icon in it, right? And obviously, like just having a label of menu on that a hamburger is going to let the user know that that's like the menu button. Totally. I have a link to develop Mozilla Aria techniques where you can you can take a look at all of them. Usually what i what i do is when I hit a situation, where I don't know what to best put on the ARIA, I'll either Google it and you'll find someone who's asked a StackOverflow question and 300 people have uploaded it, or you post it on Twitter, maybe tag a couple of people that are in the in the accessibility thread that we have there. And they'll be able to say, oh, when when I'm dealing with a navigation that is open, I often like to use Aria expanded. Or if I'm dealing with a div that is clicked, it should be a button. But if you're in some weird situation where it's not a button and you're you're listening for someone to click, you have to give it an aria dash role equals button so that the user knows that it's actually a button and it is something that can be clicked or tapped over to. Yeah, this next one is a really interesting one, because it actually has something to do with one of the questions that we're asking our Monday hasty treat. Yeah, where was the focus? Right, right. And so when you are browsing the website via like a tab key, right, this is this is such an easy one that like this is such an easy one to test is go to a website and just start hitting the tab key and see where the focus goes. And a good website is going to have that focus ring that's going to certainly take you place by place and show you what it's selecting left and right and the way you do this is with something called tabs. index right? In a tab index allows you to specify the index of what is selected whenever you hit the Tab key. And this is going to make your site usable for people who can't use a mouse, right? It's way easier to click a tab key than to use a mouse for anyone with disability. So just being able to tab, tab, tab tab and go through your site is a great way to find out how you stack up using that sort of thing. What if somebody can't use a mouse? How does their website feel? Well go ahead and just start tabbing through it. And that's how it feels. I think this one is especially important because even if you don't have I don't have any disabilities, and I use the keyboard all the time, because I'm a badass, and I don't want to use the mouse, right, wherever I can use a keyboard, I would like to. And if a website has like poor keyboard tabbing, it's really frustrating to have to reach for the mouse and use that, indeed, let's just go over this tab index real quick. Because by default, all of your links, your buttons, your inputs, they will automatically be tagged to in the order that they show up in the document. However, if you want to give something, you can give something a tab index, so you can manually order them yourselves. But it's generally a bad idea. Because like you think I always think back to the there's a house down the street. And they sold half of their property to someone else. So now there's like 12, there's like a 12. And then there's like a 12 and a half because the neighbor is is a 14, or is a 10. Right? It's and that's the problem that you run into is that if you're manually numbering these things, then all of a sudden, you're like, Oh, it's like z index, right? You always get into trouble with that. So if you give someone a tab index of zero, it will allow it to be tab two, and that will just take the order. And then you can it with JavaScript, you can give something a tab index of negative one, which will programmatically bring focus to that element. - -18 -00:36:50,760 --> 00:40:32,940 -Yeah, again, a lot. It's so it's so funny. So many of these, head back to the good clean semantic HTML. Because if you're using the right elements, the right things the right times, then you're not going to have to worry about some of these things as much, right? Because if all your buttons are buttons, and all your headings are properly organized, and everything like that, your tab index is sort of naturally going to traverse the page and in this sort of right way, but sometimes, visually, there are demands that require a bit of customization there. So having those abilities to customize the tab index is a big deal. Yeah, I was just going through the syntax.fm website with the keyboard. And for everything on the player, I've used native elements, meaning the play button is a button, the fastness which is the speed is a I think it's a radio buttons. And then the the volume is also I think it's a I forget what it is under the hood, but they're all just inputs under the hood. And then I've used CSS to style them, the one thing I didn't use an input for was the actual, the progress bar, where it will show you how far you are. And if you want to scrub to faster or slower, if you want to scrub to the end or to the middle or whatever, then you can just click in it. And that is not currently accessible via keyboard. So that's one thing that will be put on the GitHub list, because after trying to use the entire website with a keyboard, I'm actually pretty happy with with how it works. except for that one little piece. Yeah, I feel like after recording this episode, I'm going to open a lot of GitHub issues, you know, there's just a lot of stuff, it's hard to think about all this stuff is there's so many things. And it's it's good to have just a little checklist to go down to or something like that. It's, again, it's stuff you want to be working on all the time. Next up is the skip to Content button. And this is actually pretty simple. It's just that anchor link that is at the very top of your website that links to an ID where the content lives. So if you have a blog post, and you've got your typical blog posts, where you have a header, and you have a navigation with 14 links in it, and then you've got your actual blog posts, what is often a good idea is that, like even on the syntax website, what we should have is that we should have an anchor link at the very top of the website that links directly to the first episode or to the list of episodes. Why? Because most people don't want to spend six minutes tabbing through like the 700 menu items that are in your menu, they want to be able to just skip past the menu, right. And most websites will just put a ref equals pound content. And then that will and then look at an ID of their like main div that wraps around their content and ID of content that will just jump it down. The reason probably you don't have see this is because by default, they are invisible. You hide them with CSS unless they have a focus. And then that will that will give you it'll actually show it and the really good example is if you go to our sponsor today, dq D qu e.com and just load the page and hit tab and as soon as you hit Tab a is huge. Skip the content button will show up in its focus state is you can use CSS to say, when this thing is focused display block or, or visibility shown or opacity, or whatever it is that you're going to use. And then you can just you hit your enter key. And that will actually skip down to the content and pass their their navigation. So that's that's such an easy win and definitely going to be putting that on the syntax website. Because right now you have to tab through the iTunes overcast Google podcast Stitcher, you have to tap through all of the different ways that you can subscribe to the podcast before you get to a list of actual podcasts. - -19 -00:40:32,960 --> 00:40:38,850 -Unknown: Yeah, and what could be the easiest segue of all time is speaking of dq, there are one of our classes. - -20 -00:40:40,020 --> 00:42:41,520 -Wes Bos: And speaking of dq, dq, right, exactly. dq is everything you need to know about accessibility. I mean, if you need training, if you need, if you need resources, you need testers and things like that. All sorts of tools for accessibility. This dq, it's D qu e.com is just the top resource for this sort of stuff. I mean, it is awesome. And again, yeah, if you want to talk to an expert or anything like that, you can you can do so through directly through dq. I mean, you're not alone in this journey here. So with a little bit more about dq is worth Yeah, so dq also emailed me when they saw me tweeting about this accessibility and said, like, Hey, we build x a x e, which is the accessibility, it's the free accessibility testing suite. And that what that will do is it will scan your website and give you any red flags of things like so I ran it against the syntax website, it yelled at me for two things. First, I had bad color contrast on the episodes. And second, I didn't have a Lang attribute on the HTML tag. So they are the ones that build this. They're an entire company surrounded by accessibility, they are the experts in this. And they also have a an enterprise toolset called a test. So I love when companies do this, they they put their their time into building a free tool for the community that is x. And then if you need something for enterprise, they also will put out a paid version of it. It's called a test. So it will allow you to select Custom rules, if you want to customize customize what those rules are, gives you a robust API in our creations. And you can I think, most importantly, is you can test the accessibility of your iOS and your Android applications. He specifically asked that we do an air horn effect here. So Scott, air horn, please remember Barbara burns, Oh, beautiful. People sorry. - -21 -00:42:43,110 --> 00:42:43,800 -Unknown: To cut you off. - -22 -00:42:45,540 --> 00:43:30,210 -Wes Bos: Over 200,000 people already using either x or a test if you use Chrome Dev Tools, they have this lighthouse thing in Chrome dev tools that will scan your website that's actually using x behind the behind the scenes and they also offer training you can go on in and get some training skill up your team on accessibility. So check them out at dq D qu e comm If nothing else, just to hit your TAB key and see what a skip the content link looks like. Also, talk about a beautiful website that sometimes people think like tab indexes give you that ugly blue outline. But this website has all custom focus styles. So you can use the entire website just with your TAB key to move around which is really really cool. Yeah, check it out dq calm - -23 -00:43:30,230 --> 00:43:35,670 -Unknown: and you know what tool is legit when Google is using that tool in - -24 -00:43:36,360 --> 00:48:02,190 -Wes Bos: browser and put that in the tools? It's like not it's not an extension? It's in the tools if you want I mean, lighthouse is one of those things that I use all the time myself so yeah, that's that's a total legitimize are right there. More than anything else. Cool. So uh, I think that's pretty much it. The last one we have here is the ally es lint rules. I know there's one for react, there's probably one for anything that you're using that involves JavaScript. If nothing else, I would check out extensions in your text editor to you know, maybe make you aware of accessibility issues in your code, that sort of thing. But I personally use the React Li es lint rules. And even when they yell at me for doing things, and I'm trying to work quickly, and I get annoyed with the ESN error popping up telling me that I'm using the wrong element. I am always thankful that it's doing that. Because it's like one of those things, it's like, Hey, your your, your your elements wrong. And I'm like, Ah, it is wrong. I gotta fix you know, so I'm one of those people that's obsessed with fixing their ESLint issues and I you know, having something like that yell at us perfect. So now in this episode, I think we want to talk a little bit about the tools so it's a good little introduction and talk about the toast because we've already mentioned a couple of lead the like capital the tools such as x a capital X e x@dq.com. forward slash x is absolutely one of them. those tools extensions that you need in your life. In addition to that, again, we mentioned that behind the scenes, lighthouse is using x for its accessibility tools. So lighthouse is available in your dev tools already without you having to do anything. And to get to lighthouse, all you have to do is, is this a default tab, it's in my default tabs, if it's not a default audits tab, I think, Okay, well, it's, it's the audits tab. But if you don't see an audit tab in your Chrome Dev Tools, click the three little dots. And then it might be under more tools, I'm not positive, it's one of the ones up top, but it's either under more tools, or it's one of the default ones, you're going to look for audits, you can run an audit on your site, no auditing your site is going to do, it's going to check it for a lot of things with progressive web apps and performance sort of stuff. But it also is going to use x to check for accessibility features. And one of the things I love about this is even if you get a score of 100, it also still will have another little thing that says additional items to manually check. Yeah, like, hey, II know, we're giving you a score of 100. These are the things that, you know, we can't necessarily determine for you like the logical tab order. Interactive, keyboard controls are focused double users focus is directed when new content is added to the page, like that sort of stuff. So if you are the type of person who doesn't know what they need to do for accessibility, using something like lighthouse, or x to have these suggestions for you is just totally, totally invaluable. I mean, you could just follow a checklist of stuff to do and then do it. Yeah, I would say even though lighthouse has x built in, I would say, grab the x Chrome extension. Yeah. And it will throw another tab into it, just because it gives you It gives you a syntax highlighting of where it is, it will tell you what to how to solve it, I think I think you just get a bit of a better look into it. And then I also gave me some a couple little I ran it again, syntax, FM, and we got 103 issues. And 97 of those are the contrast of the episode number. So obviously, that's not a that's a that's one line of CSS. And that fixes almost all of it. And then it says the HTML element must have a Lang attribute. Those are the two that Chrome gave me. But then it also tells me page must contain one main line landmark. And that is the the skip to content, I believe that we just talked about page must contain one level one heading. So I guess I'm not using an h1 tag on the syntax website. might not. That's Oh, that's always the The tricky thing is what if your logo is an h1 tag? I don't know the answer to this. I've looked it up previously. But obviously, I dropped the ball here. Because you're you're like, the syntax should be an h1 tag that back in the day, everyone would have an h1 tag. And then they'd use like a background image to replace it. Yep. And then you'd have the text there. You'd have the text and you move the text off screen. Because negative 9999 - -25 -00:48:02,610 --> 00:49:23,190 -Yeah, because if you use display none or any of that stuff, it's it's going to not pick get picked up. So you'd push it off the screen. So you know, as usual, that brings to mind this is hilarious. This is sort of an off story. This is one of the funniest weirdest bugs that I've ever encountered in my entire life. One of our interns at this agency I was working at do was doing that technique and push the text off the screen, right? Yeah, for some reason, I, you know, who's probably just like, I don't know, just thinking it would be no different. He used EMS. And it was like negative 99999 EMS in something about that, because it was on elements used several times on the page was causing a huge performance slowdown. So the entire site would like crawl to it was just crawling, and we're like, what the hell is going on like, and then when we looked at it, we saw the text was pushed off to infinity rather than just a little bit off the page, and just change it that it fixed. It was the weirdest, most difficult bug to solve. I think we probably spent a week trying to figure out what the heck was going on. Wow. Because you think it's like anything, but a text pushed off the screen that would never ever occurred to me that that was it? Yeah, it probably because M's are calculated and they probably got into some weird bug where it was just kept calculating where it was supposed to be. - -26 -00:49:23,220 --> 00:49:23,910 -Unknown: Yeah. - -27 -00:49:24,240 --> 00:49:33,990 -Yeah, I know. Very interestingly. Interesting. So I mean, a near regardless, like, Can we just use an h1 to wrap the image and have the ad with an alt text is that - -28 -00:49:33,990 --> 00:49:34,950 -Wes Bos: I just looked it up? - -29 -00:49:34,980 --> 00:49:37,260 -Unknown: Yeah. Because that's what I do on level up. - -30 -00:49:37,560 --> 00:51:32,100 -Wes Bos: You have an image tag with your source to syntax logo, you have an alt text on that which we have. So check, you wrap that in a link, which is what we have and then you're after that and an h1 tag, so it is fine to have a just an image inside of a link inside of an h1 tag without any text. I'm not sure what SEO is for I don't really care too much about That, but it looks like a lot of people are saying it's fine for SEO as well. So we just need to wrap our logo in an h1 tag, and that will be it. Sick. Sweet. So yeah, I really like this x thing. It's really nice, just, it's almost like a game. It's like that remember, like the web Pitt web speed test page where you're like, Oh, I bet I can't get over in 85, it is hard for me because I get really, like obsessed with it. Like I have to get this number down right now. Like, it is it's it's one of those things that if you if you make it like a checklist for me like that, I'm like going to stop and nothing like, Oh, I can shave another 100 milliseconds off this site, I'm gonna do it, I'm going to spend hours doing it. Next, let's talk about screen readers. And this is really important, because I think a large portion of the people that come and visit your website are going to be using a screen reader. So if if someone is blind, they're obviously using a screen reader or have a low vision or are in any other situation where they cannot read the text. And it needs to be spoken back to them, they will use a screen reader. And this is actually how I got into what I call speed learning or speed speed listening, where you listen to a podcast that 1.5 or 1.75 x because I met someone at a conference who was blind. And he was showing at the talk what his how he used an iPhone, and the iPhone was completely black. Because he's blind. He doesn't need to see anything on the iPhone. So I bet the battery life - -31 -00:51:33,270 --> 00:51:35,490 -Unknown: and sick battery life out of that. Yeah. - -32 -00:51:35,730 --> 00:52:19,410 -Wes Bos: And he's just kind of using his fingers to touch things on the on this black rectangle. And then it was reading back to him and he had it cranked because like he's just learned to listen to the everything really, really quickly so he can get through a website, right. And there's a whole bunch of different screen readers out there. Your iPhone has a really good one built in your OSX has a really good one built in. There are some free ones available for when I think jaws is a big one. But a lot of people were sending me links to this one called envy access, which is a it's a charity from Australia, which is a open source screen reader for Windows just seems pretty. Pretty nifty. - -33 -00:52:19,770 --> 00:52:23,580 -Unknown: Yeah. Android has talkback is the name of the Android one. Yeah. - -34 -00:52:23,730 --> 00:57:11,670 -Wes Bos: talkback. And then Chrome. I think because Chromebooks needed, needed accessibility. Chrome built its own called chrome box. I used it earlier. And I was I was very happy. I was using Chrome box. I was very happy how it did the syntax website. So first tab, and it says a tasty treats podcast for developers you tab again, it says ask a potluck question. And then you can tab through our BIOS and then you can tab through all of the ways to subscribe. So that whole thing should be able to be skippable because then you don't do it. But then once you get into that, it says play fastness which is the how fast it goes, and loudness, which is the volume. And then you can use your arrow keys and it will tell you the current value of the input. And then you can hit tab again and it'll say list of 71 items. And then you hit tab and it will it'll give you Episode 71 hasee, treat stumped interview question. It worked really, really well. I was pretty happy with it. So I'm going to go through it a little bit more with the screener just to make sure that the entire thing is like all of the show notes and the download button. Everything is all accessible as well. If you yourself want to want to take a stab at fixing any of these things on the syntax website, it's obviously all open source. Somebody just sent a pull request in to change the outline color blue to yellow, which I was really happy about. So if you go to syntax.fm on the bottom, there's a link to our GitHub and you can you can submit any, any any pull requests and improvements that you could possibly want. Yeah, I was at a conference once. And the speaker I'm blanking on every conference details or any of that stuff. And the speaker, loaded up the conferences website and started going through it with a voice over activity. And they're like, I'm sorry, this isn't to shame you for your website, but it's not the last one I had open. And everyone was just like cracking up because oh, yeah, it was it was okay. It wasn't it wasn't great. But yeah, this I always feel sorry for conference websites, because they're always the like, worst example of what to do. Oh, yeah. Because they're just put together Yeah, it's that's thrown together quickly, like conference. They have so much stuff on their plate, which is no kidding. Oh, it's funny. But yeah, that's good. Don't Don't make your website inaccessible. That's actually kind of another thing I was thinking about that like a large websites where you're using a lot of data is kind of inaccessible to people who have slow internet. A website that is too taxing is is kind of inaccessible to people who don't have very expensive phones. I guess there's like a whole nother option of that where even if you you can tap their entire website and it's all readable. There's still this other point where like, Can it be used on any device out there? I guess not any device because like you can start whining Oh, it doesn't work on my Dell with IE six. Obviously, we've dropped that browser by now. But that's not my Amazon Kindle. My Yeah. My first generation Amazon Kindle. Yeah, there's a, I guess he needs to know about like, Who is your audience? And am I intentionally excluding somebody from this? Because of their situation in life? We're in unintentionally excluding them as well. All right. All right. Let's keep rolling here. Some we got some resources left, as well as some some important ideas. Yeah, the ally project a one one, why project.com is a community driven effort to make web accessibility easier. They have some brilliant how tos. They have some brilliant myths, some quick tips, some quick tests, sort of technology, a whole bunch of great stuff. I mean, you could spend some time just going through this. And it's awesome. There's just such an endless amount of resources on ally project looks like a great website, actually just reading this, it says, using captioning services for html5 video, that's I, I skipped over a couple of these tools as well. Let me just go over those real quick. The HTML code sniffer is a it's kind of like a linter. For your HTML. Remember, back in the day, you had w three validator. And you can you can use this tool called Paoli, pa 11 y, and that will that will run it you can put it as part of your continuous integration pipeline. So you could fail the build if something doesn't. accessible, just pretty neat. What else do we have here? The transcripts and captions for videos is is one that when I initially put out my stuff, I got a lot of emails, and I was surprised at how many people ask me for captions, because because they were deaf. And so I went out and I paid for captions on all of my videos, I think I've used a couple different services. In the past I've used rev.com speech pad comm they're really good, they have a human go through and actually transcribe it all. My stuff is very technical, but both of them have done a really good job at - -35 -00:57:12,120 --> 01:00:08,910 -doing it about that. Because the auto generated ones have just absolutely slaughter anything technical, like words that we're saying that our libraries are nice or that stuff, they don't know what to do with it. So you had your experience with both speech pad. And both of those are really good. I also have noticed that I turned it on for a YouTube talk that I did on CSS Grid. And I would say it was 99% accurate for for the entire talk, which is unreal. So YouTube, in like we talked about the the auto generated stuff used to be a joke, and kind of an insult to those who need it. But I think it's getting really, really good. If anything, you use those to get you 90% of the way there. And then you have a human comb through the rest, which I think is probably what some of these services are actually doing at the end of the day. Yeah. What's funny is that one of my videos is stuck on Korean thinks it's Korean. So it transcripts transcribed in Korean, and you have to like pay, like I have my default language set to English, like it should know and all my videos are auto transcribed to English but like, come on, and like that one video I'm gonna have to like pay extra for I should be paying for a service for this anyways, I think that's something that needs to happen. Like ASAP. Yeah, it's about I think it's about $1 $1 50 per minute. And generally, I have to get them re transcribed if I change anywhere, because if I put in or cut out, like a minute, a video anywhere in a video, then I have to get it re transcribed because all of the captions are then off by however long, which it'd be cool to like, have some sort of video editing program that had captions attached. Maybe this exists. And then you could just like as you cut the video, the audio and the captions would come along for the ride? I think it would probably I think it would probably have to exist in something like premiere or Final Cut. Like because if you think about it, they're working with subtitles and movies. And yeah, that would although they might just do the subtitling at the end, although I don't I have no idea. I have no idea how that works. I should know. Yeah. I also have found that the captions that I pay for are well worth it. Because even though it costs me, I don't know, hundreds of dollars when I release a like let's say I have a 15 hour course, that's 16 minutes, that's 900 bucks, I have to pay, which is it for I know it's not a not a lot, but it's not a little bit either, right. But I found that I have a lot of users who are just ESL, so a lot of people from India and Brazil, where English is not their first language, and they don't necessarily understand my Canadian accent. So having captions on there is really, really important to them as well. So it's I think it's well worth your money spending it spending it on that. And also it's something I want to get for this podcast at some point as well. Just because they're like searchability Yeah, yeah. searchability obviously you should do people who are Want to go back and find something or anyone that just can't listen to the podcast but still wants to get the benefit of the content? It would be good to get that up and running. - -36 -01:00:08,999 --> 01:00:11,160 -Unknown: Yeah, yeah. Deaf. Alright, so - -37 -01:00:11,160 --> 01:01:54,150 -Wes Bos: what all there are other things that we have here accessibility audit, so head on at hate on works on Twitter. He's a huge accessibility guy. I guess he does these audits of companies websites to see what could be improved. And this one company, bulb energy paid him to do an audit. And it's not cheap to hire someone like this to do a huge audit like this. And they made it totally open source, which is cool, because you can you can see, what does someone who's doing an audit? What do they do? And what do they recommend on how to fix it. So if you just read through this whole thing, you probably would learn a whole bunch of stuff about Oh, there's a navigation issue that we've had here. This is this is the problem. This is why it's an issue, here's how to actually fix it. So I will put the link to this audit in the show notes as well. But I think it's really cool that the company paid for this and then opened it up for others to see what's going on with it. Yeah, really cool. Another great resources, one of one of our sponsors, dq has a brilliant YouTube channel. So we'll make sure to link to that in the video descriptions. Or you can just search for D Q's YouTube channel. Again, that's D, qu e just so you get the spelling, right. But they have awesome stuff like introduction to screen readers, empathy driven development, enabling, I mean, they have a whole bunch of like playlist of different talks from different conferences, but they also have their own videos about digital accessibility. They have interviews, they have all sorts of just really just beautiful content, and catalogue of content as well. So pretty much everything you'd want to see there. If you're a auditory video learner, someone that will listen to, or watch a couple of those videos myself. - -38 -01:01:54,230 --> 01:01:57,230 -Unknown: Yeah, just put a playlist on and then just let it let it. - -39 -01:01:57,450 --> 01:02:00,960 -Wes Bos: Yeah, just like one of those like lunch learns. Or maybe he's just doing - -40 -01:02:01,980 --> 01:02:02,640 -Unknown: lunch and learns - -41 -01:02:02,760 --> 01:02:19,350 -Wes Bos: lunch and learns. That's why I love seeing that people often will take one of my courses as a lunch and learn and they'll send me photos of people having or they call them brown baggers, or that you bring your own lunch. Yep, yeah. And then they'll just like, sit and watch my, my tutorials and do them together, which is so cool to see that happening. - -42 -01:02:19,410 --> 01:02:20,250 -Unknown: That's super cool. - -43 -01:02:20,550 --> 01:06:41,250 -Wes Bos: Yeah, let's wrap it up with some some last ideas and important ideas, this Twitter thread was just a trove of information, I think one of the things that kept coming up was in order to be make a very accessible website, you yourself need to use the website, as someone who's using using the website that is has a disability. So whether that's using a screen reader or using it with one hand and holding a baby or running it in low contrast mode, or any of these things, it's important to use it yourself, or to go and sit with somebody. So because I think about like, we could have a episode on mobile testing and how to how to build stuff for a mobile device. And you shouldn't just sit here and listen to the episode and call it a day, what are you gonna do, you're gonna actually open your website on a mobile device, and try it out and fix it. So you can do that yourself. Especially because a lot of these tools are free. In the last couple years, like I remember, maybe five or six years ago, you had to like buy jaws and it was like, I think it was like thousands of dollars. And it was just kind of this thing where like, oh, people have this screen reader. But and these are the rules that you have, it's totally free, you can turn it on your Mac on your iPhone, on their Android, you can download this chrome box, you can use the free windows one that is out there, go install it and try to actually use your application yourself. I know I've My eyes have been open just in doing research for this this episode. I think that that's one of the biggest, most important things that you can do with your time and more so than even running, I mean running the audit checker and going through and fixing that stuff is great. But even before you do any of that, you know, throw up in a screen reader or try out your tabs and and just try to use your your site that way. And again, it's going to it's not just going to make you aware of these problems, but it's going to make you have an actual reaction to the usage of your site without these things or with these technologies because you're actually going to get to have a like a real visceral reaction to whether or not these things feel okay or not. A couple last quotes that we have here I'm usually not a quotes person. I always roll my eyes when someone's conference talk is just a half an hour worth of quotes. Live laughs design. Yeah, live. Live, laugh, love, Eat Drink. What is the be merry? he marry. We just got back from a cottage vacation and the entire cottage was covered in these like signs but like, kick off your shoes and let the feel the sand between the toes and leave it leave your stresses at home. silly silly quotes, but these quotes are good quotes. So again, Amy Carney on Twitter said also restricting what others have said you really need to be around a diverse group of people. with various various abilities and assistive tech, like that various ability so we've used the word disability so much in this this episode, but you got to think about it maybe the other way around. That's the only real way to get perspective and empathize. Otherwise, you're just shooting in the dark. Yeah, very good. Yeah. I mean, the empathize is just a great word that there was that on the D Q's YouTube, that empathy driven design. Yeah, having empathy for your fellow human beings is the right way to go here distress that. And I got another quote here from Mike banky. And this is, no matter how many tools automated tests you do, nothing will replace having actual disabled users. Use your site app and report back, preferably on their own equipment. So you are explicitly testing the site. I mean, again, this all goes back to you know that there's real people using this stuff. And there's real people that need to use it, and you need to accommodate for everyone. Last one we have here is from moose of letters, as people are jokers on Twitter and change their name. He said, lots of things are accessible by default, it's your task not to break it. So it's true HTML, by default. And all these inputs. It's, it's accessible by default. And then if you get into the world of doing weird stuff with CSS, maybe before or after elements, or maybe you're doing some weird JavaScript stuff, that is all only listened on click, then you're going to break it. So you need to always be mindful of when you're adding custom functionality to a website or doing some sort of snazzy layout. You're flexing, flexing for the boys. You got to make sure that you're not actually breaking it for the rest of the world. - -44 -01:06:41,399 --> 01:06:54,330 -Unknown: Don't Don't break it when you're flexing for the boy. I think that is the quote of the website. We want to list out some quotes here. We should add the one at the bottom. Wes Bos don't break it when you're flexing for the boys. - -45 -01:06:56,880 --> 01:07:20,400 -Wes Bos: Oh, that's good. All right. I'm sick pics. Sick pics. I missed a pic. Yeah, I could totally take pic. It's funny. I was I was doing the the deadlift podcast and we hit we have fit pics, right? Yeah, the deathless podcast. And I was just like, I was talking about how, oh, and we do syntax, we always hit the sick pics. And we're always like, shoot, - -46 -01:07:20,400 --> 01:07:21,030 -Unknown: what are - -47 -01:07:22,680 --> 01:09:19,529 -Wes Bos: we have to pause the episode and go find some sick pics. This is not the case. This time I got lots of sick pics here I got, I got tons to go for a good sick pic that I have ready to go is speed curve.com speed curve, you may have seen them people talk about on Twitter. This is one of these really, really cool sites, see how real people experience the speed of your website. And basically, one of the things I love about this is it's not just like, it's not just another like speed tester, you can put in some of your sites that you would like to compare yourself to, and maybe see how you stack up in different regards. But they're also sending you reports. So I get like a report weekly. That's like your site is 8% faster this week than it was last week. And the the graphs, the charts, the stuff they give you here, if you're this type of person who really loves to look at graphs and charts of the stuff, especially PageSpeed stuff, it's second to none, it's great. And if you're a performance ahead, in that regard, you will really love this site. So speed curve.com I'm a big fan. It's really cool new site. But again, I'm going to sic pick a Netflix series that I've been starting to watch. And it's called Magic for humans. And I don't know if this is Oh, yeah, I haven't done like a look into like, if it's real or not because it's magic on TV is it could be anything right? And it could be actors and whatnot. But it's just really really interesting. The guy it just does like all these things with marshmallows and floating in the air and just blows my mind. I had the reason why I haven't looked into it yet. It's because I don't want to be cynical about it. I'm just enjoying sitting there being like, No way. No way. There's no way he had that many marshmallows in his mouth, you know? So really, really fun one. It's a it's a good one. I think you can a good one to watch with kids. I'm about four or five episodes in really interesting to see how people react and whatnot. So check it out. It's on Netflix. Magic for humans. Nice. - -48 -01:09:19,530 --> 01:09:27,300 -Unknown: Yeah, I've seen that the thumbnail and I thought about watching that son might have to give that one a whirl. Do you have any shameless plugs because I know - -49 -01:09:27,390 --> 01:10:45,770 -Wes Bos: shameless plugs. I'm just gonna shamelessly plug all my stuff. All my courses are at Wes bos.com forward slash courses. I'm actually been working the last couple of months with a developer on having some new improvements to the to the player to this stats, we're going to have a Netflix style skip the intro for those that hate the music at the start of every single episode of my of my videos. So check that out at Wes Bos comm forward slash courses. I'm also on Twitter. Instagram, Facebook, everything at Wes Bos, just find me on whatever you choose to wherever you choose to hang out. And I'll be be happy to hang out with you there. Yeah, hanging hanging. My shameless plug is for my new series on react testing, we did mention testing a little bit of a series. And now, it sort of like this same kind of topic I have like, really, really worked hard to make this series for people that, like they're scared about testing. Yeah, I definitely came from the camp at some point in life where I was scared about testing. I don't edit never felt like I understood that there were so many jargony words, not to mention, there's like people who used the same words for different things, like people use the word mock, and - -50 -01:10:47,550 --> 01:10:48,229 -Unknown: it's - -51 -01:10:48,229 --> 01:12:59,880 -Wes Bos: like everything and nothing and whatever. So I mean, there's just so many jargony terms. And, and if you're trying to get started with this, people just assume you know, a ton of stuff about it already, or you've done sort of testing. So this series specifically assumes you know, nothing. And we start with basic, just testing JavaScript, sort of basic foundational stuff. And then we get heavy into react testing library, which is just an awesome library. So we use just in react testing library, and we talk real world stuff. So we are testing API's, we're testing components, loading data, we're we're we're not shallow rendering anything, we're completely rendering things all the time. We talked about, just in general how to test your react code, but it's all real world stuff. So check out react testing for beginners level up tutorials, comm you can purchase it at the level of tutorial store level of tutorials.com for slash store, or you can come a level of pro get access to all 24 of those videos, as well as every other series for only 19 bucks a month, or 15 bucks a month if you sign up for the year. So sign up for the year and check out that series along with all the other level of tutorials ones, I was just I worked so hard on this series. I'm so glad it's out. And I just want to make testing easier because this series is the definite focus on making it easy on you. Awesome. So that's the end of the accessibility episode. If you made it this far, let's do a hashtag again. What should our hashtag be flexing with the boys? To the end of this get hashtag flexing with the boy that says stupid. isn't any dumber than it tasty? No, it's not this whole podcast stupid. Thanks so much to everyone who chimed in with their information. This is one of those episodes that took quite a bit of research and prep in order to record it just because we're not experts. And we want to approach this topic giving as much good information out as possible because it does really affect people's lives at the end of the day. So thanks so much. If you have your own tips, tricks, anything, please please tweet them at syntax FM on Twitter, and we'll be sure to retweet them out. So everyone can get the benefit of those tips. - -52 -01:13:00,090 --> 01:13:21,449 -Unknown: Yeah, and we'd never say this. But, you know, if you liked this show, head over to iTunes or your overcast leave a review, I listened to so many podcasts and like leave a review. And we do have a little outro But seriously, if you like this podcast, I think it really helps discoverability if you leave a review, you know try to make that review five stars if you like the show, but - -53 -01:13:21,869 --> 01:13:23,850 -you know, obviously be honest with whatever. - -54 -01:13:24,229 --> 01:13:27,449 -We never say stuff like that. So I felt like maybe we need to be so yeah, - -55 -01:13:27,449 --> 01:13:44,670 -Wes Bos: we need to beg you stop right now. We spent a lot of time by episode go give us a five star review. And hashtag flexing with the boys. Yeah, do it. Awesome. All right. I think that's it. We'll see you next week. All right, who's pace - -56 -01:13:46,319 --> 01:13:56,060 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you liked this show. - diff --git a/transcripts/Syntax73.srt b/transcripts/Syntax73.srt deleted file mode 100644 index 683cccc5d..000000000 --- a/transcripts/Syntax73.srt +++ /dev/null @@ -1,192 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. Totally at ski. - -2 -00:00:26,129 --> 00:00:57,960 -Scott Tolinski: Oh, welcome to syntax in this Monday edition of syntax, which is also known as the tasty treat. We're going to be talking all about documentation, how to read documentation, how to understand documentation, how to better parse it, how things are sort of organized and maybe you know how it's the most stuff is, as always, I am Scott to Lynskey, aka te lokk El Toro loco as with me, as always is the Barracuda boss was boss. Haha, you know - -3 -00:00:57,960 --> 00:01:08,400 -Wes Bos: what I went down a rabbit hole of watching Barracuda fishing videos. Oh man, holy those things are so nasty. I wouldn't be so afraid to catch one of those. Yeah. - -4 -00:01:08,810 --> 00:01:17,190 -Scott Tolinski: I mean, the blue barracudas on Legends of the Hidden temple. Is that what it was? Did you did you get that in Canada? Nickelodeon? No, I - -5 -00:01:17,190 --> 00:01:24,510 -Wes Bos: never we I was basic cable when I was a kid. I like 13 channels. We never had Nickelodeon. Dang, man, you - -6 -00:01:24,510 --> 00:03:42,030 -Scott Tolinski: missed out on legends, the hit tab, there's a team on a game show called The blue Barracuda. And that's how I learned that Barracuda were nothing to mess with. There's this sort of like the Wu Tang clan of the fish world. So this episode is sponsored by century now. century is@century.io. And this is one of these tools that Wes and I both use, and that we both absolutely adore. I've been using Sentry for longer than I can remember now. And what Sentry does is it basically helps you track solve and fix your errors. It basically reports your errors and collects them into a system and allows you to really harness them. It allows you to know everything about these errors, whether or not the operating system, what the person was doing, maybe even attach some custom data like a user ID or something to these errors. And it makes solving these things. So incredibly easy, because when you have a lot of people using your stuff, right, there's oftentimes a lot of people using your stuff and you can't always keep track. And maybe not every bug is going to be reported to you via a you know GitHub issue or an email or something like that. You want to be able to stay on top of stuff before it happens. So Sentry takes all of your exceptions, all of your errors all of your bugs, puts them in a spot allows you to track them allows you to know what's going on. And the best of all, you can get started with Sentry for absolutely nothing. You can use the hobbyist program and the plan here and sign up. And really the amount of stuff that you get with the free hobbyist plan is just unreal. So I highly recommend using Sentry. to track your heirs track your bugs. It is one of both of our favorite services. We were just so psyched When they reached out to us to sponsor the show, because we just love this service. And talk about good docs. Sentry has some really good docs. It's searchable, it's organized it, it has everything exactly where you want it to. So it's easy to get started easy to learn. So head over to sentry.io and sign up today and use the promo code tasty treat. All right, that is tasty treat to sign up and get access to century today. Again, the free hobbyist program is unreal for what you get. So check it out at Sentry dot i o and you know, don't let your users be the first ones to report your bugs get on that stuff. - -7 -00:03:42,360 --> 00:04:27,600 -Wes Bos: Awesome. So today we are talking about reading documentation. And I'm actually really excited about this episode because I think that it is such a superpower to have, regardless of where you are in your your journey. And often I find people asking me questions when it could easily be done by by just reading the documentation. And I think that especially with beginners, there's this sort of idea that the documentation is a bit overwhelming. It's a little bit scary. So they just don't they rather find a StackOverflow answer or something like that. And we're here today to help you better read the documentation, be able to tackle some of the overwhelming pages the documentation so that you can become a better developer, right, Scott? - -8 -00:04:27,600 --> 00:06:03,150 -Scott Tolinski: Yeah, in overwhelming is a one of the perfect word I was right about to say overwhelming and then you're like, no, it's overwhelming. So we're on the same page. Because it can be I mean, you look at this stuff. And there's there's a whole bunch of different types of documentation. You don't necessarily know what you're looking to. Maybe you click the docs and it's just an API reference and you're just like, Okay, this is not what I'm looking for. So you know, part of this is going to be a little bit about how to parse what you're looking at, where to go for what type of learner you are and different types of people are going to gravitate towards different types of documentation. Some people are gonna love looking at the source and maybe the sources, all they need is their documentation. So to get started, I guess I want to do a little bit of what are the different types of documentation you'll run into on various websites, sometimes you'll see one, or just a couple of these. So you might not always see these and these don't have like official names or something. I'm just this is how I've decided to classify them. But you would often have something like the tutorials. Right? So Gatsby is a great example of this. The Gatsby site has some really excellent tutorials on how to build with Gatsby and one of the things I loved about the Gatsby tutorials. So just in the top, they have a tutorial link, they have it broken up into different chapters. So like programming basics, Introduction to Gatsby, and SP basics. And so like because they have this broken up into different chapters, it makes it really easy to go through each one of these when you can, rather than just like approaching this whole thing as like a giant mess. You know, is there any sites that you have that have particularly good tutorial documentation, - -9 -00:06:03,420 --> 00:07:13,650 -Wes Bos: I've always liked the React router, documentation, the new reach router, and all of that stuff is is really good, big fan of stripes documentation. Because when we're talking about API's that are language agnostic, meaning like, for example, I work with a Vimeo API. And the Vimeo API can be used with Python or PHP or JavaScript or curl, or any any language that can send a request, it can be used with write, and that's great. But often I stare at the Vimeo documentation and I just like, like, I've spent probably nine hours of my time trying to write a script to Auto Upload captions from to my videos. And it's because they don't like give you enough information, or any examples at all for how to do it. They just say like, do this. And I was uploading it as like, like a an object. And it needed to be like raw blob data and like it nowhere does it say that. So what I love about stripe documentation is that it shows you what the methods are and what you need to pass and then what the types should be. But then it also gives you examples for doing it. No doing it in Ruby doing it in PHP. And that's that's like the perfect documentation for me. - -10 -00:07:13,770 --> 00:08:38,640 -Scott Tolinski: Yeah, one, here's something really hilarious. I just destroys documentation just now to grab a link from it. And it was all in Japanese. I didn't set it to the Japanese. I gave it a refresh. And I went and went away. So it was a nice little fun thing right there. I was almost for a minute like, Huh, okay. But yeah, Stripes documentation is great, in fact that that I mean, Brixton, to the forefront, like a good point about a different type of docs, right, where we had the sort of tutorial based docs, but then you also have the sort of standard, because you'd call it a guide based documentation or a documentation sort of thing where it's less of an API reference, and more of like a, here's little things that you're expecting and how to do them. And this is, in my opinion, the most useful type and stripe is so good about this, because they do they have really identified the things that people are trying to do often. And they let you know how to do them. And it always frustrates me when when documentation leaves out that sort of thing, because it's like, you know why people are using your thing, why not just show them the easiest path to the thing they're trying to do rather than here is just a reference. So I really like that you know, who else is really good about that just has some really good documentation in that regard. They have their guides section, where instead of just being like, here's how to do thing, they have like paragraphs with text and examples that go along with their actual reference, as well as their tutorials sort of stuff. - -11 -00:08:38,970 --> 00:09:36,510 -Wes Bos: I also really like the documentation for next js, because the docs are pretty good. But the GitHub of examples that they have, they have, let me just open it up. If you go to github.com forward slash site, forward slash next j s, and go to the examples folder, they probably have, I don't know 100 150 possible examples of every possible way that you could use it, using it with Express using it with koa using it with the nested components using just a Hello World using it with data fetching, using it with exploiting using custom CSS. And it's amazing because if you are using it in a one specific way, there's no way the documentation can contain all of that. But by having 150 possible little examples, with every single possible permutation of NPM package out there. It's it's super helpful. I often find myself diving into the different versions of next Yes, - -12 -00:09:36,530 --> 00:10:51,170 -Scott Tolinski: yeah. Yeah, love that. Another type of documentation I like briefly mentioned a couple times already is the the API reference when this is just a straight up. Here are the methods, functions, components, whatever available to you in this package. And here are the parameters they accept and maybe like a one sentence on what they do. And this is superduper useful. It's super useful to have But it's not always the most useful when you don't know what you're doing or themes aren't things aren't like named super well, one of the I think some of the like the gold standard for this kind of documentation is in Meteor has in the same regard Apollo, because they use the same system that Meteor has for this for the API Doc's will, they'll show you every single package involved with Meteor. If you select it, there's a little drop down for the version, all that stuff, but there's like a, maybe a paragraph or two about each method. And then it tells you where and how you can use it. And it gives you the even occasionally, like suggested syntax, or maybe some different ways to use it. But it's less of a guide and more of like a straight reference. Here's all the parameters except here's what it does. And here's how it's available to you. So those are pretty much it. Do you have any other types of documentation, maybe a video video documentation could be a category? - -13 -00:10:51,270 --> 00:12:08,880 -Wes Bos: Yeah, I think the video documentation is really helpful. Not a lot of libraries will often put out video documentation and not a lot of libraries will often put out good documentation themselves. Because like I've said this before, the type of person who writes a library is not necessarily the same type of person who is amazing at writing documentation and conveying that to the general public. Because often the people that are building these libraries are absolute geniuses. And it just makes sense to them. And it's all in their head, how it works, right? And, and then trying to like, we've got us regular folks down here trying to use the library. And the thing might be amazing, but we don't know how to actually use it, because there's not a lot of information surrounding that. So if you yourself are someone and this is what I fancy myself as I'm not really a library author, but I am really good at explaining things. So I often will either contribute back to the documentation, or it's a good opportunity to create some extra content on YouTube. I've had many of my YouTube videos just like, like referenced or put into the documentation as here. Here's a good example to get up and running because people learn in different ways. Some people just prefer raw docs, and just to read them and they get it other people prefer, show me an example of how you would actually use it. - -14 -00:12:09,030 --> 00:13:03,600 -Scott Tolinski: Yeah, yeah. And and that's always a nice thing to see, too when your videos get referenced in an official documentation, because that shows that you you know, you did a good job of explaining exactly what the author was intending when they wrote this stuff. But again, that is one of those things that can be so frustrating when you have this library and it doesn't make it clear exactly how you can use it. One of my biggest API gripes is with Braintree, and it's sort of Braintree is fault for just having an obtuse API. But like with stripe and stripe, you could just say, hey, cancel this, this user subscription, right? With the Braintree, you have to say, okay, find the the current amount of allowed months that this user has left on their account and set it to one more than the amount that is that they currently have. It's just like, it's up to us, like, Why just not have a cancelled method or something like that. But personal gripe there. - -15 -00:13:03,780 --> 00:13:48,090 -Wes Bos: Yeah, that's it. PayPal is notorious for having the worst documentation in the world. I just went to their new documentation, and it looks really nice. So obviously, they've heard the cries of us many times on the show. We've we've griped in all developers gripe about finding documentation for PayPal was such a pain because PayPal has like, I don't know, 300 possible different products. And then they're named different things and all of the different countries. And it's impossible just to find document, I myself, I'm still trying to hunt one thing down, and I even have like a, like a pay PayPal person. Yeah, that like, well, like, if I can just call them I have their phone number just because my account, I guess I do enough processing with them. And make - -16 -00:13:48,090 --> 00:13:49,860 -Unknown: enough money with them is what I'm making - -17 -00:13:49,860 --> 00:14:13,830 -Wes Bos: money that I have like a PayPal guy. But he still doesn't they don't even know themselves often. thing. So it looks like the documentation is getting better if you go to the PayPal dock. That's where you can filter by country is that's a frustrating thing, because they have like different products and even different things for different countries. This looks pretty good. Obviously, they're on a long journey to make this stuff much better. - -18 -00:14:13,920 --> 00:14:24,240 -Scott Tolinski: Oh, cool. Why helps, though, because that was always one of the scariest things is when you had to go do something with PayPal API, because you're just like, Oh, no, I have to go to their docks now. - -19 -00:14:24,420 --> 00:14:28,500 -Wes Bos: But yeah, it'll be a good day when I can stop complaining about PayPal be a - -20 -00:14:28,500 --> 00:16:01,800 -Scott Tolinski: very good day. It'll be very, very good. So let's go a little bit about into reading documentation and themselves like where to go. So now you know a little bit about the differences. And I think some of this processes is go back to how well you learn things in different types of ways. So some developers are really, they're, they're very experienced, and they know exactly what they're looking forward, they can go into even the source code and look at it. Or maybe they're just going to go straight into the API reference. They want to check out all of the methods they want to see all of the different parameters, arguments, whatever they want to see See the different like how you use the stuff right? And other people are going to want a fully guided tutorial. And guided tutorials in my mind, there are great way to learn because you can sort of really just take on a small little project the problem with the guided tutorials, if you just follow it step by step by step, you might not necessarily see some of the big picture stuff, which is where sort of the in between the sort of reference docs come into play or that guide to docs where they're sort of like, Hey, this is sort of how you do different things. And maybe I have an idea, like, Hmm, maybe I want to charge this customer's credit card, I'm gonna go look for how to do that. And then so these reference docks are a good way, because instead of being a part of a full tutorial allows you to explore a little bit more. So I think, understanding how you learn, and which one of these sort of things is your best. Best way to make something stick is going to save you a bunch of time when you're looking at the documentation. You want to know, where should I be heading first, right? Where should I go first? Should I head to the tutorial? Should I head to the reference or whatever? But that's, again, a little bit of a personal exploration. - -21 -00:16:01,950 --> 00:16:16,800 -Wes Bos: Totally agree. Let's should we jump into understanding the the parameters? Because this is something teaching in person? This is something that I see beginners trip up all the time. Yeah. So it is like understanding, like when you have a function like what do you pass it? - -22 -00:16:17,130 --> 00:16:29,940 -Scott Tolinski: Yeah. And this is this is in the the API reference, typically the API reference world, where it's just giving you a list of methods, a list of functions, or components or whatever sort of stuff you want. So yeah, like, - -23 -00:16:30,270 --> 00:16:47,970 -Wes Bos: some examples might be, you got MDN. And you want to know all of the array methods that's built into JavaScript. But it might also be you have a library, and that library will have a list of methods that you can call on it. And those methods take different arguments and different parameters that get that get passed in. - -24 -00:16:48,090 --> 00:17:17,130 -Scott Tolinski: Yeah. So what are some of the pitfalls here? Obviously, some of the important information you need is what is the parameter type? Is it a string Boolean object, like, what is this expecting to receive? Right? And if you know what it's expecting to receive, then you know what you would most likely need to give it right. Next, you need to know whether or not the parameter is required or optional. And sometimes this is denoted with a question mark. Is there any other ways that you see this? Other than maybe just yeah, optional in parentheses, - -25 -00:17:17,459 --> 00:19:05,600 -Wes Bos: I just asked on on Twitter, because MDN specifically uses this kind of weird Unix syntax, I just asked on Twitter, like, what is this syntax called? Because if you go and maybe if you're sitting in front of a computer right now, just search MDN array map and open up the syntax part for that. And it says, The syntax for an array is that the first argument is a callback, and that callback will give you the current value. And then I'll give you the index and the original array. And then the second argument to array dot map is you can pass a this argument. And that's pretty simple to understand. But the syntax for that is that when something is not required, they put square brackets around it, which I see all the time people thinking, Oh, you pass it an array, but just knowing that the square bracket syntax means that it's required, or sorry, that it's optional, it's not required, and often the there will be a comma in front of the actual value. So current value is just passed in as current value. But then there is square bracket, comma, meaning that this is required. But if you do have it, put a comma there, and then you get the index. And then you can get the array, which I think is is a little bit confusing for people to read. I myself, I like the question, I don't look at that, I'll either scroll down to the parameters. And and let's read what the parameters are. And they'll just have a tag that says optional beside them. Or I'll just scroll down to some examples because like, I'm example learner, a rather than just seeing, like the cold, hard docs, I rather scroll down and look at six or seven different examples for what it is that I want. And then if I have questions about oh, there seemed to be passing an argument here, I'll scroll back up to the params and see what it is that you are expected to be passed. - -26 -00:19:05,640 --> 00:19:47,010 -Scott Tolinski: Yeah, I'm the same way. Definitely the same type of learner in that regard. There's another way, I guess you could always, I don't know, have any examples off the top of my head. But there's also maybe the required verse optional, where instead of showing which ones are optional, they would declare which ones are required. So which parameter you need to have. And then you would just assume that every other one is optional. Sometimes an exclamation point is used like in graph qL, to determine if something is required. So other things that you might want to pay attention to is the parameter order, for a long time just functions had parameters that were needed to be in a very specific order. It's this than this than this. See less of that nowadays with the new object? What does that object syntax called? I - -27 -00:19:47,010 --> 00:19:50,570 -Wes Bos: always forget it. It's called the structuring. - -28 -00:19:50,600 --> 00:20:12,720 -Scott Tolinski: Yeah. What's the syntax the syntax is called when you have the object property with the same with the same name params. Yeah, default params Not default params we're thinking of different things. But when you have an object, oh, yeah, sorry, value is the same as a variable. So you just get to declare the variable name there. Does it have a name? It's gotta have an eye. Maybe? - -29 -00:20:12,960 --> 00:20:31,050 -Wes Bos: Yeah, I'm not sure exactly where to I thought you're talking about in ESX, we've got the ability to either provide a fallback value, but the order still matters there. Or the other thing is called named params, which is just a kind of just a hack using destructuring. So you pass it a one argument - -30 -00:20:31,950 --> 00:20:40,820 -Scott Tolinski: params, but I was just talking about the technique of not D, structuring the object, but the initial when you're setting the values initially into the object. - -31 -00:20:40,920 --> 00:20:46,850 -Wes Bos: Oh, yeah, that's a that's still is considered destructuring. But it evolved, and we'll call it named params. - -32 -00:20:46,890 --> 00:21:27,510 -Scott Tolinski: Okay. So nowadays, you have things like named params, where you can, you know, actually have an object as your first argument with different parameters that have names, essentially key value properties. So basically making the order in which they're passed in to the method or function or whatever, totally obsolete. And in my opinion, that's the way to do it, right? Because, you know, we are passing it at all times that it's more, it reads better, you can see exactly what's going where. So yeah, that's pretty much, that's pretty much how you understand the parameters that go into this thing. You need to know their types, what they do, if they're required or needed, and the order of them if there is an order at all. - -33 -00:21:27,860 --> 00:22:10,860 -Wes Bos: One other thing I'll add to that, as often documentation will tell you what it returns as well. And that is helpful, too. Because I often see people, like a really simple example is people don't understand when to use for each and when to use map. And if you know that map returns a new array, and for each doesn't return anything that can save you a whole lot of headaches. So if you are interested in capturing the output of a function, always look at what it what the return value actually is. Yeah. And also if it returns a promise or an actual value, because many times my life, I've forgot to await a promise. Yeah. And then I'm trying to call methods on a promise which don't exist. - -34 -00:22:11,040 --> 00:22:53,250 -Scott Tolinski: Yeah. And if you've ever used anything like j s doc or one of these tools that generates documentation based on comments in your code, that's like typically what those things are wanting, they they want, like an overview of what it does. They want the parameters, what they expect, if they're optional, and then they want what it returns and how it returns it. So those are all like the key information. And if you have those those tools and understand all of that stuff, then you should be able to have a pretty good understanding of what this thing is, especially if it's named well and documented well. So you have a point here, it's how to tackle something new, right? Something that you've never seen before, like when you first arrive on a documentation, like what do you what do you do? - -35 -00:22:53,580 --> 00:24:19,980 -Wes Bos: Yeah, so my my approach to this, and I'd be curious to hear what yours is, is, first thing I'll do is I'll look for examples, right? Like, I don't sit there and read the documentation top to bottom, what I'll do is I'll look at a whole bunch of examples about how it works and what's going on. And then when it comes time to to writing my own, I'll do make sure that I do a good scan of all of the documentation, I won't read every single line, but I'll make sure that it goes through every single, every single page in the documentation to understand what is the surface area of this thing, because often if you just use the JavaScript array, it's pretty simple. Because you can just look at the sidebar, look at all of the different array methods. And if there's some that are interesting are some that you don't understand what they'll do, you can click into them and get an idea, you're not going to remember it all. But it helps you get a good surface area of what is possible with this thing. And then when it comes to actually implementing it, you can jump back into the docs and look up the specifics of that. So simple examples first, then scan the entire documentation. That's often how I come up with all these little Hot Tips on Twitter. It's because no one actually reads the documentation or no one reads the release notes of like new browsers, when when a new version of Chrome or Firefox comes out, they'll give you this huge thing of what changed. And if you just dig through that it really helps you stay on top of what's going on and understanding the new things that are in the browser. Yeah, - -36 -00:24:20,010 --> 00:25:16,080 -Scott Tolinski: my strategy is to have something that I want to do in mind, if I want to build a website. Let's say Gatsby, I want to learn Gatsby, I want to build a static site for something like that, I would head to the tutorial first because it's going to give you steps to do here, here and here. But let's say I was looking to do a payment processing on stripe, I would go to stripe documentation, I would look for the specific thing I wanted to do. And I would see if they would have any guides, like if they have any very specific guides on how to charge a credit card. I would start there. And if at that point, it's like too high level I would take a step back and maybe head back to the basics. So I'm definitely one more to dive in and then just try something and then realize I'm in over my head in various directions, and then take a step back, rather than just like, let me read the introduction, no, screw it, screw the introduction, I'm gonna get into some code, I'm gonna make a lot of mistakes. And I'm gonna then reread the introduction afterwards and then realized I probably should have just started with the introduction. - -37 -00:25:17,430 --> 00:25:57,690 -Wes Bos: Yeah, it's similar to how I actually do my, my courses as well. For example, yesterday, I just finished my jest testing video. And we were doing like a very simple example of like, expect this value to equal six, right? And then and then you understand, okay, that's how it worked. You expect something to equal six? And then I say, okay, but like, what if we had an array, and I wanted to check if a value was in that array, and then we circle back into it, let's go to the documentation, take a look at what all of them are. So again, get it working at first, then go to the documentation and get an idea of what are all the 50 different methods that we could possibly use? Because I know that I'm going to run into a situation where I need these at some point. - -38 -00:25:57,720 --> 00:26:14,730 -Scott Tolinski: Yeah, def cool. So you have some other little things in here about maybe some icons in here that you occasionally see it, I noticed these a little bit more on maybe the the MDN MDN. docs when anything else but you you have mentioned that we have like the beaker besides something if it's an experimental API. - -39 -00:26:15,720 --> 00:27:05,580 -Wes Bos: Yeah, there's the the beaker that is experimental. so careful with those don't use those in production applications. There is a trash, which is something that's been obsoleted or deprecated. Again, that's something you should not use. And then there is an exclamation mark, which is a non standard API is often sign Chrome or Mozilla will sneak into their own for whatever reason that they have on there. So it's important to like one of my favorite pastimes is just going to the documentation on MDN. For something like right now I'm on the documentation for the Canvas API, and it's on HTML canvas element, you can read through all the properties that are available. And then on the left hand side, it will show you all of the different methods that are available to you. And it's kind of interesting, because again, like it's, it's just having a good idea of a surface area of, of what is possible, you know, we - -40 -00:27:05,580 --> 00:29:09,660 -Scott Tolinski: should do an entirely separate hasty treat, maybe even in the next tasty treat, if there's interest to do just a listing off our favorite documentation as like a follow up to this. And then just like a list, like I'm going to talk about this one now and then talk about what I like about and then you can give one, you talk about what you like about it. And then we can have just basically a, you know, a documentation Greatest Hits list that people can check out for, like, excellent documentation. So yeah, so the last little header that we have here is what to do when the docs suck, because there's nothing worse than having documentation that's out of date. That's incorrect. Or that's just plain, you know, not helpful. In fact, bad documentation is the reason why I started level up tutorial, I had like a couple of instances in my early career where I was frustrated with the bad documentation. One of them was with a huge library, which was Jango at the time. And so I installed Django and I wanted to learn how to, to, to start to develop in this and I ran into an error on the very first page of the first tutorial on the first documentation page. And I went into the IRC room, and I was like, Hey, I'm trying to follow along with the tutorial, like what's going on here? Like, why is this broken? And they're like, oh, you're using the wrong version of Django? And I say, Okay, well, I just installed it, just like the documentation said, to install it, right, I installed Django, and then I got this error. And that's what the tutorial said to do. So what would happen was, is that the tutorial was for like an entirely old version, and they had never touched it, but it was still sitting there on their homepage. And that was such a frustrating experience, because they expected me to know that the tutorial was with one version, and that the thing was another version, even though I followed the tutorial that was on their homepage directly. So that kind of thing is really what started level up tutorials was me being like, you know what, I feel like there's so many things that go undocumented, that people just assume that other people are going to pick up and you want to to dive into these things. So what do we do if the docks suck? - -41 -00:29:09,720 --> 00:31:12,450 -Wes Bos: So the first thing I'll do when the documentation sucks is I will first look for other people's code that has been written because I again, I'm a big, big examples guy, I like to see other people's code. So I'll either jump into the tests for that library, because the tests often are the documentation showing how each of these things work. So if you can crack open some of the tests, you can see it actually in use, because you need to use it in order to test it. If there are no tests are the tests are too confusing for you. Because that's you still have to understand how tests work. And a lot of people don't necessarily know that in their career just yet, often do a GitHub search for other people using that code. So this is one of my biggest tricks is just go to GitHub, search for like the method that you're looking for. And that's going to bring up lots of code for people. Sometimes you'll have to write little expression In that search, because there's everybody has like copy pasted the, the tutorials example. And then that's all you get. But if you can get rid of that you can actually get into other people's examples. And that will often help you when that fails, I will usually jump into a chat room or or go to Twitter, looking for someone who has it, generally the chat room is better, or the spectrum or the discord or whatever is available, because that's, that's where the the experts hang out. And then finally, when you finally figure something out, take the 10 minutes to like, I hope someone else doesn't spend two hours of their day on this simple little thing. Or they didn't, they didn't understand how it works, go back and update the documentation, submit a pull request, almost every single library has their Doc's on GitHub. And it's it's just a huge service to the community be able to update documentation because the the authors who are writing these libraries, they're often tax to the limit, they don't have the unlimited time, lots of them are taking time away from their families or an evenings or they're doing it instead of doing other things in their life, often doing it for free. So if you can help out with the documentation, that's, that's a huge service to the community. Yeah, hey, and - -42 -00:31:12,450 --> 00:32:02,880 -Scott Tolinski: here's something that you can do to easily contribute to the documentation for anything that I found recently is one of my favorite things. And documentation lately, is creating a basic code sandbox, where all you're doing is the one thing that like maybe using one particular API in a code sandbox, so just make that code sandbox. And then throw it in, submit that PR to the repo. because let me tell you, the React spring API has a code sandbox for every single example that they have in their entire repo. And there's nothing better than when you have an issue, you can go to a code sandbox and compare your code, then you can mess with their code, you can try it out, you can get that experience. And then you can see exactly what you're doing wrong. So if you want to help help rebuild, I say make a code sandbox and submit it as a PR, even if you're not good at writing or whatever, that's immensely helpful, in my opinion. So - -43 -00:32:03,450 --> 00:32:04,110 -Unknown: yeah, I think that's pretty - -44 -00:32:04,110 --> 00:32:33,270 -Scott Tolinski: much it, that we we basically covered everything about reading documentation. There's always stuff here. And not everyone is going to have the same learning style. So a lot of it again, is understanding how you learn best. And then really optimizing for that, if you can now some documentation is going to give you an API reference and call it a day. And sometimes that's a little frustrating, but you know, now that you know how to read the parameters and read the methods, you'll at least have a little bit of tools to help you get through that. Anything else about reading docs, Wes, - -45 -00:32:33,330 --> 00:32:34,200 -Wes Bos: I think that's it. - -46 -00:32:34,470 --> 00:32:43,950 -Scott Tolinski: I got nothing. Thank you so much again for century for sponsoring this episode, this hasty treat. We will see you on Wednesday with a full episode of The syntax podcast, - -47 -00:32:44,190 --> 00:32:44,910 -Unknown: please - -48 -00:32:47,220 --> 00:32:57,000 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax74.srt b/transcripts/Syntax74.srt deleted file mode 100644 index 3162ae3dd..000000000 --- a/transcripts/Syntax74.srt +++ /dev/null @@ -1,244 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,589 --> 00:00:17,300 -Wes Bos: Welcome to syntax. My name is Wes Bos. And with me is Scott to linsky. How you doing today, Scott? - -3 -00:00:17,390 --> 00:00:49,560 -Scott Tolinski: Hey, I'm doing super good. Just hanging out here. We're live streaming this episode. Yeah, on YouTube for the first time ever, just to try it out. So hello to every single person that's watching right now this is pretty sweet. And if you didn't catch this one, we might do this again in the future. Who knows? A little behind the scenes look into syntax right now if you're on the YouTube, but yeah, no, I'm hanging out, man. I'm doing good. I'm just, uh, I'm ready to kick it off. I'm really excited about this episode in particular, because as we were doing the notes, I was just like, yeah, this is good stuff. So I'm, - -4 -00:00:50,519 --> 00:01:44,910 -Wes Bos: I'm doing really, really well. I'm sitting in my office with the webcam on everybody's asking about the boxes of stickers that I have behind here, those nine massive boxes of stickers, they are currently being processed to take out a trademark infringing sticker. That's all I'll say about that. So let's, let's jump into it. Today, we're gonna do the 11 Habits of Highly Effective developers, I thought this is kind of a fun one to do. Because there's obviously that book, which seems super cheesy, I think it's like the 10 habits of highly successful people. It seems cheesy, but it's actually a fantastic book, I really enjoyed it. And we thought we would sort of put together 10 habits, but we didn't have 10, we had 11. So it changed the name, because we do what we want over here. So we're gonna go through them and kind of riff on on each of them. And hopefully, these are some tips you can pick up us to how to apply them to your own career. - -5 -00:01:45,029 --> 00:01:53,850 -Scott Tolinski: Yeah, so we have seven, or how many? How many did we land on? I know you just said it, but like a lot? Is it totally 11? Officially 11? Well, - -6 -00:01:53,879 --> 00:01:57,480 -Wes Bos: yeah, cuz we're using an ordered list here. So yeah, I don't know. Yeah. - -7 -00:01:58,680 --> 00:02:37,470 -Scott Tolinski: Cool. Well, this episode is sponsored by, it's sponsored by one of our longtime sponsors, which is Freshbooks, which is the easiest way to get your cloud accounting set up. It's seriously an awesome service. And it's also sponsored by Sanity, which is a bring your own front end sort of API as a service, allowing you to build in structure and content and everything and allowing you to worry about the front end without having to worry about the back end is really, really cool. We're gonna get into a lot more about both Sanity. And Freshbooks. Later on in this show is 38 inches, man. Yes. 38 inches. - -8 -00:02:38,130 --> 00:02:42,530 -Wes Bos: I opened up the soundboard. Just for a little old time sake on this. - -9 -00:02:42,900 --> 00:02:47,250 -Scott Tolinski: Yeah, yeah, you gotta bring it back. It's for the for the big show big like, awesome. - -10 -00:02:47,610 --> 00:04:10,169 -Wes Bos: So let's get into it. First tip we have here and these are in no particular order, the just the order in which we thought of them. That first tip we have here is that you understand stakeholder and business goals. And this is something I talk about a lot when we talk about freelancing. But I also think it's important for someone who wants to be a good developer. If you want to do really well in your organization, if you want to do really well for the product, or the website, or the application that you're building, you need to understand like, Who is this website or web app for at the end of the day? And what are we trying to accomplish? Because all too often I see people, they get caught up in their own like mama drama about frameworks, and, and all that stuff. And the frameworks and everything matter, they matter for you as a developer, so you can do your job quickly. So you, you don't get too caught up in, in technical debt. That's a really, really important, but they matter because you want to make sure that your end goal and generally that's a business that's trying to make money or or an organization that's trying to get their point across I've given the example in the past, I worked with a food bank website. And the end goal is how do we get people to to the information to use the the food bank, as well as how do we get people to donate goods and money towards this? So I think that's really important understanding stakeholder and business goals. - -11 -00:04:10,230 --> 00:06:19,260 -Scott Tolinski: Yeah, it's easy to lose track of that, too, especially when you're at the lower rungs of maybe a large company. I've worked for at least one agency that had like 2000 3000 employees, and it's really well you know, when you're one of those 2000 3000 employees, or even more than that, it's not always easy to see exactly how everything that you do, like lines up to a core goal of this organization. Maybe this organization is huge, right? But it does every every time that you're you're doing anything with your your job, it is for a reason. I mean, they hired you for a reason. So it's really important that you you understand what your role is in that business and that you do take ownership of that. I mean, obviously, whether or not you do have ownership over that is sort of dependent on how the company views you as an employee, right like that. views expendable. And maybe it's not easy to feel that way. Maybe, you know, you're purposefully not feeling that way. But yeah, at the end of the day, everything you do is you're there because you were hired to do it. Yeah. Number two here is that you are curious and always learning. Now, this is one that we talked about all the time on this show, and this sort of student mentality and always wanting to learn and always being curious about that next thing, because that's what drives us forward, when you lose your curiosity, you lose a little bit of that spark. And when you lose that spark, you sort of lose that drive to improve, you lose the care that you put into your work, you sort of lose any of that stuff. That is really what makes you a good developer at the end of the day. So if you want to continue to grow, you want to continue to learn, you want to continue to be effective. As a developer, you kind of always have to be curious and excited about what's new, what's in the future, what you can be doing, maybe, and maybe it's not something that's new, like tech wise, like maybe not something that just came out, but maybe something that's new to you, maybe you've never done this technique or this technique? Or maybe you wanted to clean up your code or do this or a little bit of that. But at the end of the day, like you have to be curious, you have to be excited about what you're doing, and grow that so that you can be good at what you do. - -12 -00:06:19,290 --> 00:07:16,140 -Wes Bos: Yeah, I think curious is the the best way to describe this approach to learning because you can certainly overdo it. And there's certainly a lot of people who are feeling overwhelmed with all of the different things that are always changing and feeling like they need to learn absolutely everything. We've talked about that in depth on this podcast already. But just always kind of just finding like, Hi, I wonder if I could approach this a better way, or Oh, someone has proposed a new technology or new solution to this, I'm going to take a look at that. And oh, it's just kind of having an open mind to whatever it is and, and always having like some sort of project that you're working on, whether it's a side project or something of your own, that will keep you sharp, because we all know that in your day job you could run into you run into these things where you're just working with the same tack for three or four years, because that's the stack that you're on. And that gap between what is relevant and what is is new. And what you're working on can sometimes get a little bit too big. - -13 -00:07:16,260 --> 00:07:35,370 -Scott Tolinski: Yeah. And that's one of those things that I can't I can't count the amount of times when I was working at agencies where my my hobby projects and like my extra time stuff was the things that were keeping me excited about what I was doing. It wasn't the WordPress site that I had made for the hundredth time, it was, you know, the Angular app that I was hacking together for fun. - -14 -00:07:35,700 --> 00:08:28,890 -Wes Bos: Next one we got here is you have an open mind about new technologies, kind of a nice one to go into after the last one. So all too often, myself included, something new comes out. And you say, That's dumb. Why would you do it that way. And the famous example is when react came out, everybody said that it was dumb, because you put your, your JavaScript in line, like in the same file as your, your templates, and we didn't even know about CSS and JS at that time. And I was like, that's dumb, you have separation of concerns. And we were all really happy about how we were building applications at the time. But react came out and just challenged all of those norms, because they have an open mind to new technology. I think some of the best new technologies that have come out are from people who are just questioning, maybe there is a better way, maybe these best practices that we're all spouting off is maybe not the best way to approach it. - -15 -00:08:28,920 --> 00:09:21,799 -Scott Tolinski: Yeah. Can you imagine if react would have launched with j s in component as part of reactor so like, I think there would have been actual rise. I think that's the first time you would have seen developers taking to the streets because people would have been so concerned. But I mean, I agree. I wrote a little note in here. It's like odd foods, like sometimes, or maybe not even necessarily like odd foods that food you haven't tried or maybe just like, aren't accustomed to, like this is going to sound really stupid. But it wasn't until it was like like after party situation, like in college party, and I was pretty. I had a few. And somebody had laid down hummus on the table and I was like, I'd never had hummus and people were like, what? So then I went to town on this hummus. And it was like the greatest thing because I had never had it right. And before it wasn't sound like it's an unusual food. I just never had it. And then at that point, it was game changing to me. I was like, man, I really want some hummus now from - -16 -00:09:22,399 --> 00:09:39,020 -Wes Bos: is the best food to have after drinking. It is totally what we after the bar. When I went to school in Toronto, we would have like Lebanese shwarma everywhere and you just after the bar, you just get this massive shwarma that just dripped down your hand and it's the best thing ever. Yeah, - -17 -00:09:39,049 --> 00:09:48,120 -Scott Tolinski: yeah. See Exactly. You ever know when the technology that you choose that looked scary to you in the past is going to be the hummus of your future. So - -18 -00:09:49,620 --> 00:09:53,340 -Wes Bos: that's deep. All right. Next one. You want to grab the next one? - -19 -00:09:53,490 --> 00:10:53,760 -Scott Tolinski: Yes. The next one is this one's can be scary for a lot of people. And that's you. You are comfortable asking for help. Help. That's not just like hello from your co workers, but it's helping an IRC chat room, it's helping a slack room to help in a classroom. Maybe you're in a boot camp and you don't understand something. And maybe it seems like every single other person in the class or in the world, for that matter understands the topic. Like I don't know, for a long time Redux was just it seemed like everyone had sort of understood Redux out of the box. But there was like a large amount of people who looked at Redux. And were like, wait, I don't know what I don't know what any of this means. And it was hard for people sometimes to look at that and admit that I don't I don't get this right. When everyone else seems to understand this. So being comfortable asking questions in a any sort of setting in a group setting in a digital setting, any sort of way is such a huge skill. It's like a practical skill you need to do, it's just immensely, I don't know, just immensely important to growing as a developer. - -20 -00:10:53,779 --> 00:12:14,970 -Wes Bos: Yeah. Anything able to, to check your ego at the door, and simply just ask for help. Hey, I don't know how any of this works. And I think that's particularly hard in our industry, because of the flip side of that is often when you do ask for help people come out of it feeling like, I'm not sure I'm glad I asked for help. Because you can get talked down to and there's like, maybe if you are that's our next one is you help others. But there there is a right way and a wrong way to approach someone that that is asking for help. And maybe not necessarily even asking you for help. But I don't know being being able to be vulnerable and being able to let others know that you don't have all the answers. No one has all the answers. And there's there's way more people out there that are especially when you get into like a new area, maybe you are having trouble with like nginx your server configure as wrong. Like that's a perfect time to reach out to someone who does this stuff day in and day out. Or somebody is like we got a an email after the domain name episode, we got a domain name from someone who I'm not sure if I'm allowed to say this or not. But it's someone who runs the DNS for a large Fruit Company. And like, so like you must have said, was Apple, the company could have been our Blackberry. - -21 -00:12:15,480 --> 00:12:16,799 -Unknown: Oh, yes, yeah. - -22 -00:12:17,610 --> 00:12:48,149 -Wes Bos: Anyways, I was just like, so like, wow, like, now I have this person in my email that if I ever have a problem with DNS, and not understanding how these things work, like, we were talking about how propagation sometimes takes long and, and he explained how you can like, never have to wait for propagation. If you if you attack it in a specific way, I should go back to the email and mention it because it was super helpful information. So I think that's that's really cool to be able to reach out to experts stand on the shoulders of giants, as we say. - -23 -00:12:48,299 --> 00:13:40,350 -Scott Tolinski: Yeah, I mean, again, it's just it is it's making yourself vulnerable. And if you have ever asked a question and felt like it wasn't well received, that you were asking a question, then it's really easy to feel down and like retreat into that shell and maybe not ask again. But it is it's incredibly important. And if your co workers, your boss, your teacher are good. They're going to accept any question, basically, no matter what it is, and and help you through that. And another I mean, some of the cool things here is that like, if you use a service like fresh books, if you do need to ask for help, they're incredible at giving you that help, because fresh book one of our sponsors today, I'm so good at their customer service. And Wes, you know, firsthand. We've talked about it before about Freshbooks customer service. Do you want to tell us a little bit more about fresh? Yeah, overall. - -24 -00:13:40,440 --> 00:15:11,789 -Wes Bos: So I think like the Freshbooks the company has an like a really awesome approach to dealing with customer service. And I don't know if this is still the the rule, but I think it is is that everybody on the product. Everyone that works at the company has to spend I think like two weeks. I don't know how he however often two weeks a year, let's just say working in support. And I called them once because I was having a problem with HST being like I had inputted HST like lowercase, but also I had HST is the taxes in Canada and Ontario. So I had put it in lowercase and uppercase and like those were registering as separate taxes. So I called them and they they clearly knew what was a problem. And I think I talked to one of the developers on the phone like they pick up the phone, no problem, support was really good. They say no problem, give me like 20 minutes, we're gonna write a script that's going to convert your data all over to one and I think within 1015 minutes, I got an email back from them and it was all taken care of. So their support is amazing. I very rarely actually contact support, but when I do, it's when I'm incredibly frustrated with something and having someone help you out so quickly just makes me feel like oh, finally like, I know I'm not gonna be in the middle of the night taxes are due the next day and something's gonna go wrong. And in this, in this case, it was my problem the way I inputted the data But they still can help me out. So check them out@freshbooks.com Ford slash syntax for a 30 day unrestricted free trial. Make sure you syntax in the How did you hear about a section? - -25 -00:15:11,850 --> 00:15:33,120 -Scott Tolinski: Yeah, you know, I hit like a also like a service issue too when I was like trying to export data out of my bookkeeping software, and I emailed them and was like, how do I import this? And they're like, oh, there is no way to do that. But we'll just do it, we'll fix it up for you. So and they're, they're pretty amazing. I have to say, in my small experience with fresh books, support staff, awesome stuff. - -26 -00:15:33,149 --> 00:15:33,929 -Wes Bos: So really good. - -27 -00:15:33,929 --> 00:16:18,659 -Scott Tolinski: Yeah. So along that same lines is, you know, asking for help is that you help others. And there's, I want to be kind of clear about this. Because there's a difference between like being the know it all that's like you're doing this wrong, like, that's wrong, that that's wrong, that's wrong, and the person who's like offering help, in all sorts of like constructive ways, because offering offering help to your fellow co workers are doing like trainings or Lunch and Learn sort of stuff where you're getting to share your knowledge is extremely important, especially in a non intimidating way where people can ask you questions, or they can just dive in a little bit more to your code, especially if it's something they want to learn. But again, it's not going to be a situation where you're looking over their shoulders and being like, Oh, hey, by the way, that's wrong. You know? - -28 -00:16:18,780 --> 00:17:34,530 -Wes Bos: Yeah, I think helping others, I think I started teaching in person, seven, eight years ago, is a long time ago. And I noticed that as soon as I started to help others through their problems, and to teach other people, my own skill level became so much higher, because I don't know there's just something about explaining topics to other people and, and helping people out and tackling issues that it makes your own skill level so much higher. And it can also, it obviously really helped me in creating all my video content as well, because it allows me to just anticipate what what the needs are and all that stuff with it. So however you help people, whether that's answering questions for people, whether that's doing something very publicly like blogging, or YouTube videos, or just something smaller, like mentoring, I know there's a lot of people who do just one on one mentoring, and you're not gonna get a whole lot of claps for something like that. But that to that one person who you are mentoring and, and helping them transition into this industry, it probably means the world for them. So however it is that you feel most comfortable helping other people, whatever it is, it's I highly recommend that you, you find a way to do that. - -29 -00:17:34,650 --> 00:18:03,750 -Scott Tolinski: Yeah, yeah, absolutely. And I mean, you you mentioned some things like, like YouTubing, and blogging and stuff like that, and even like answering StackOverflow question. So you can be sometimes Stack Overflow turns into like, a competition is like, who can get to this one the first. But yeah, at the end of the day, like the goal is to be helpful to people. So you, you want to make sure that whatever you're doing is providing help where people need it, not like just trying to appear smart. I think that's a that's a big thing I want to I want to get across - -30 -00:18:03,780 --> 00:19:08,570 -Wes Bos: Yeah, cuz that's, that's another thing I see all the time in volunteering for, like I used to volunteer for ladies learning code for I used to teach at a boot camp called hacker U. And you would, you would find that there was some people that would help that they were really excited about helping but they're just a little bit overbearing. And it was like we had this like, ask for help thing. And then people would like send like private slack questions to me and be like, hey, like, Can you help me like, I don't want to put myself out there because I don't want X, Y and Z to come help me out. Because they're a little bit overbearing, and then they just like, get they get flustered and whatnot. So I think the way to get around that it's just to keep helping more and more people go volunteer for some weekend thing. There's tons and tons of kids learning code, or ladies learning code, or lots of refugee boot camps. There's so many amazing things out there that need someone to give out one Saturday, every six months, they volunteer for this kind of thing. People in the chat room are all saying that they are helping out in boot camps. I think it's such a valuable skill to have. - -31 -00:19:08,730 --> 00:19:11,790 -Scott Tolinski: Yeah, absolutely. All right, what you got the next one? - -32 -00:19:11,910 --> 00:21:17,600 -Wes Bos: Next one is you have a problem solver mentality. So this is a good one. Because software is you're solving problems with software. So someone comes to you with a real world problem and says, How can we make this faster, better, stronger? Whatever it is, how do we automate this task? How do we help our customers who are frustrated at this problem with technology? That's what technology does, right? So there's that piece, but then there's also the piece of like, writing software causes lots of bugs and causes lots of issues and you have to be able to debug it and figure it out. So if you are someone who gets easily frustrated at problems in whatever or being able to to blame things really quickly on that stupid way that this works is dumb, and whatnot. It's, it's not that you can't be a good developer. But being able to work on your problem solver mentality, I think is really important. And being able to break things down into testable components, being able to pinpoint an issue. Sometimes like I see this all the time in, in the real world, I told the story a couple podcasts ago how my daughter was in the hospital, and the lady with the the testing computer couldn't was wiggling the monitor cord when the computer was dead, right? Like, there's just lots of times in the real world, regardless of if it's computers or not, that people just see, oh, it's broken. I don't know where to start, like, what could it possibly be? Whereas like, for me, like, I'll give you a stupid example, we were at a rented a cottage, and the hose wasn't working. And forget who was trying to use the hose. Oh, it doesn't work. And then I'm like, okay, it does. Okay, first, is it the? Is it the actual host thing? No. is the host getting water? No. is the if you turn this on the other way? Is that going to pull water? No. So you just kind of keep tracing it back until eventually, you found a little knob that you had to turn on. And that push the water right through the hose. Right? It's kind of like be able to follow the trail of problems until it is that you can find out where the problem is. And then fixing it is a whole nother problem. - -33 -00:21:17,670 --> 00:23:33,810 -Scott Tolinski: Yeah, yeah, I mean, isolating the problem. And following that trail. And like, those are all such huge, huge skills in this. I mean, because especially when working with code, knowing where to look and knowing what to remove, like you start pulling away things that don't matter, until you just narrow down exactly like what is the singular item that is causing the problem. And then you can dive into that item and figure out why that item is not working. Now, a lot of people don't know this. But before I was a dev, I worked at a University of Michigan, and I was doing AV work, essentially. But I worked at the hospital. And what I was doing at the hospital was someone, I was running lectures for doctors, and there's nobody more technically illiterate than doctors. For some reason, the doctors would be like, I have this USB key and there's this USB port, but I don't know what to do with it. Should I put it in the port? I don't know how I don't know how this works. And like, okay, you just put it in the port. Now it works. Okay, there you go. Congratulations. But so like, that was my job most of the time was troubleshooting. And now this is a huge one, because it's under pressure, right? You have a lecture full of doctors whose times are like, yeah, their time is so important and special, because you know, all the stuff they have to learn and do and whatever. They're constantly running back and forth. So when they're sitting there, and some AV tech isn't working at this lecture hall, like you have to get this done with all these stairs on you. So that was like such a master class for me. And like being cool under pressure when everything is working or not working. And you know that you can probably solve this problem in any sort of situation or normal situation. But it's the same thing in web dev when the server's on fire, and you have marketing and you know, your PMS like screaming at you because of some, you know, bug. Yeah, it's important to keep it cool because your brain is not going to function well, when you're not keeping it. Cool. So I think that's such a huge thing. And this is an interview question I get asked a ton is like, what are some situations where you've been under a high amount of stress and had to troubleshoot a problem? Now luckily, I've had a lot of experience doing that. But it's a huge thing. And you want to think about situations in life where you've had that and when it would have helped to just like remain calm rather than actually freak out - -34 -00:23:33,960 --> 00:24:15,150 -Wes Bos: about it. All these stories remind me of when I was in school, you remember, they rolled in the like VCR, DVD and the TV strapped on that thing? Do you have one of those? Yeah, yeah, so stoked that, oh, we're watching a movie. But it was always, like the only debugging that the teachers had when the movie didn't work was is that on Channel three, that was like, there, we had to put it on Channel three to get the VCR to work. Oh, and I would always have to come in there. And like be like, Okay, if it is analog, and VCR if as a DVD, you got to work on the inputs. And it's so frustrating to see. That's that kind of thing where people just don't know how to how to debug that kind of thing. - -35 -00:24:15,330 --> 00:24:30,270 -Scott Tolinski: You could make an entire career out of being able to set the TV at Channel three. You can do it people will heal you as a tech wizard. I know like I was the tech wizard in my family because I knew he could turn off the computer and turn it back on again, you know? - -36 -00:24:30,630 --> 00:24:35,580 -Wes Bos: Yeah. Oh, that's hilarious. All right, what do we got next year? I guess it's your turn to grab one. - -37 -00:24:35,700 --> 00:26:02,850 -Scott Tolinski: Yeah. Next one is you have fun with what you do. And this is a huge one for me, because I love I mean, I love web development. It's the reason why I do all of this extra content. It's the reason why, you know work so hard at what we do and then grow and everything like that. For me. The fact that I'm having fun solving these problems, learning this new stuff, creating things is maybe one of the number one drivers to learn. I'm always pushing for new stuff or pushing to learn or, or pushing myself and to do good work is really just because, hey, I enjoy it. And it makes us It makes us feel it makes me feel like I accomplished when you were able to solve this problems. It makes you feel like really proud and all this stuff when you're able to come up with a really cool creative solution to something. But at the end of the day, I just have fun sometimes, we mentioned this a couple episodes back, but like sometimes on like a Saturday or Sunday night when I'm trying to wind down, I'll play video games, or I'll go breakdancing or something right, I'll do my things to wind down. But in addition to that, sometimes working on hobby projects, even though you're you're struggling through some code or whatever like that, sometimes coding up some hobby project is relaxing to me, because it's genuinely fun. It's like, I don't feel like I'm working, I feel like I'm solving a creative problem or doing something interesting or whatever I'm, I'm getting that same experience that I would be from playing a video game or something like that I'm, you know, genuinely enjoying it. - -38 -00:26:03,030 --> 00:27:19,050 -Wes Bos: Absolutely. I think that's also a huge driver behind my courses. Because web development can be really, really frustrating with all of the bumps and things that you run into. But it's important to, even if, like, what you're working on is not necessarily fun. Like I would say like most of my Dev, I'm not like Whoo, this is so much fun. But it's those like little those little things where like, oh, man, my database queries are 50% faster. How fun is that? You know? Or, like, oh, man, this new thing came to CSS and I took my lunch to to figure out how to build a little cool thing I was looking the other day there used to be this some easing CSS, there was a proposal for this CSS easing, you know, ease in ease out and bezzie A and everything like that there was like a proposal for like a spring in Safari. And they took it out. And I had coated that up like two years ago when they proposed it. And it was so much fun. And I I brought it out of storage the other day, and they took it out. And I was so bummed, but I was like, oh, it is really fun, like building these little little examples and stuff to make sure you enjoy it. And that's one of those things I don't necessarily know. No, what do you think? Do you think you can learn to have fun with this stuff? Or do you think that's more of like a personality trait? - -39 -00:27:19,229 --> 00:27:49,140 -Scott Tolinski: It's a little bit about sometimes you have to inject some fun into things that aren't fun. because not everything is going to be fun. Like, for instance, I made an easing library for myself. And like easing it, I mean, is easing fun. I don't know, it's fun, if you like messing around with Bezier curves and stuff like that. But to make it fun, I made it an easy, NWA theme that using a library and that made it fun for me. So I mean, personally, I like to make things fun, that aren't fun. And even if it's stupid, it will add a little bit of like extra oomph into whatever you're doing. - -40 -00:27:49,500 --> 00:28:49,410 -Wes Bos: All right, what do we got next? You understand work life balance. So I really like this one. Because I think that a competitive advantage in our industry is being able to have some sort of work life balance, or some some sort of balance, where you do not get burned out. And for every single person, that's going to look a little bit different. I don't want to be the guy that keeps preaching only work however many hours a day, there's different times in my life when I've worked very, very long days and enjoyed it very much. And now and I'm at a point in my life, where I really only work nine to five this morning, I started at 10 because my daughter was up all night and my wife needed to sleep because she was up all night with her. So I started a little bit later. And I think like being able to understand that you should have hobbies, and exercise and all of these other things outside of coding. I think that's really important because of the amount of burnout that comes with such a fast paced industry. - -41 -00:28:49,620 --> 00:30:43,410 -Scott Tolinski: Yeah, it's a big thing. And it's funny, because this goes immediately back to Monday. I mean, you had tweeted out that we didn't know it was Labor Day. And I personally, one of my my bosses and mentors through development my entire career. It was like Halloween or something. And he was just like, I was like, Oh, he said something about today being like a fun day or something. And I was just like, What are you talking about? Man? He's like, Are you serious? Do you don't know that today is Halloween? Like, do you just not and I don't know, any holidays. I just flat out don't remember. I'm so awful at that. But it wasn't until we had that conversation that I was like, Ah, it is a holiday. And you know what, everyone else is not working. And I'm sitting here working on my desk. And I was I was grinding through some stuff and I just sort of it was like noon or something. I just stopped. I was like, You know what, I'm taking the day off. Because everyone else is taking the day off. And I deserve it for all the hard work that I've been doing. So I went on, spend some time in the yard doing adult stuff. I like message. Eric, who's the deaf on the site, and I was just like, Hey, man, I'm gonna go do some yard work. And he's like, oh, you're living the dad life right now. I'm like, Oh, yeah, no, no, no, I'm gonna mow the lawn. I'm gonna clean it up. I'm gonna pick up some leaves. I'm a mom and dad it up. So I took my Labor Day Off to do some, do some, you know, work that way. And it's important to do that stuff. It's hard to do that stuff, especially when you You work so hard and you really like, love what you do. Yeah, it's really hard. But it's important to understand the need to do any of that stuff to take the time off, it's all about balance is really a balance between a front end and a back end. If a website and one of our sponsors today is takes care of the back end of the website for you. And that sponsor is Sanity, they're going to remove any sort of insanity that you have in your balance of things by making the whole I don't know the whole content side of your application. Just so so easy. So with more about Sanity is Wes - -42 -00:30:43,439 --> 00:33:37,530 -Wes Bos: Yes. So Sanity i o is they call it structured content. dunrite. Right, we actually talked about Sanity on our design episode, and we use their website as a beautifully designed website. So just check it out. If he's wanting to look at a really well done website, I really like the font on it. But what does it do. So they are sort of like the CMS back end to your website. So they The best way to explain what it did is they actually went ahead and and created a back end for the syntax website. So what they did is they you log up, log into sanity.io. And you can create a project. And then you start to create your data types with all of the different fields that you want. So we had episodes, and we had sponsors, and we have what people that Scott and I were like we're hosts are a content type, you can link the content types together. And then every single content type will have its own input, which is really, really cool. Because he obviously you get your input type of text and number and whatever. But then you can do custom inputs as much as you want. Because it allows you to input react components that are your own custom inputs, which I thought was super, super cool. So if you are looking to build a website that you want to build the back end for it sort of like a CMS that someone can just log in and manage all the content inside of there, you want to check out Sanity. A couple other things Last time, we said that what they use is gr o que groke. Last time, we said this growth, graph oriented query language, that's the language that you write to actually ping their servers and pull back a list of a list of all the data that you want. So you can do all of your filtering and sorting and everything in that we said that that was built upon graph qL, which is he said, it's not actually so that wasn't true, but they're shipping a graph qL API built on top of that later this fall. So that's really cool. Knowing that you'll be soon be able to build all your applications in just graph qL and pull all that data. The API is real time, which means you can sit and edit the same documents in the studio at the same time, that's really cool. Kind of like Google Docs or Dropbox, paper. They have an awesome image pipeline. There's a link to a CSS tricks article all about that, which is cool. It'll handle all of your image, image assets. And then there's a they also support micro services as well. So if you are building just as, like a real project, or if you just want to try something out, and you need a quick back end, because I know a lot of times people want to just build something in react or view really quickly. And you can't be bothered to do the backend part of it, check out sanity.io forward slash syntax and use the coupon code syntax, which is going to get you the awesome supercharged plan, which is has some beef beefed up API quota. So it's more than just the the free plan quota that you get. So thanks so much to Sanity for sponsoring. - -43 -00:33:37,610 --> 00:33:46,590 -Scott Tolinski: Thank you. Yeah, I was really impressed with the Sandy's like the flexibility and customization. I mean, just the little demo they put together for us was just like really super slick. - -44 -00:33:46,610 --> 00:33:53,130 -Wes Bos: Yeah, big fan of their everything. They're doing their design, the tools that they have. So pretty nifty. - -45 -00:33:53,459 --> 00:35:16,860 -Scott Tolinski: Pretty nifty. Okay, next up here, I believe this is number nine. Number nine, feeling fine if you are empathetic to your co workers and users. And this is a big one. Because empathy a lot of the times is one of those skills that I think just gets lost in the shuffle of things. Or maybe people think if I'm a good enough Dev, that I don't have to treat people well, I don't have to put myself in other people's shoes and stuff like that. But really empathy in general. And understanding and being a good employee and a good co worker to your fellow workers is just such an important skill to have nourish, grow all that good stuff. Because at the end of the day, you want the people you're working with to be their best. You want everyone to be on their best, to do their best work to feel comfortable and to feel inspired. And people aren't going to do that. If you are you know, you're you're not treating your co workers well. You're not understanding their problems. You're not understanding maybe how they learn and you're not treating people with respect. So being empathetic, treating your co workers nicely. Being a good employee is just it's it's a totally undervalued skill, and I can't tell you how many devs I've worked twist that just made me want to quit a job because they were so not not good to work with, they just flat out weren't good work, you know, and you can always do your best. But sometimes people are just they they get stuck in their way. So make sure that you're growing and you're you're learning how to be a good person to your fellow coworkers. - -46 -00:35:16,920 --> 00:36:02,070 -Wes Bos: Yeah, I On the flip side, I've worked with some amazing people who are often will take as much time as it's needed in order to explain something to you where it's, it's clearly my fault, because I can't understand something or not sure how, like, if you're getting kind of skilled up on an existing project, you need to understand kind of how it works, it's really frustrating to feel like you're in a spot and you're, it's, it sucks to feel like you're bothering someone, when you really need some help. So when you have empathy for your co workers, as well as, as your users, you need to understand, like, go back to the accessibility show we did last week and thinking about everybody that's involved in a project from people that are working on it, the designers that you're working on you're working with, as well as people that are using the product. - -47 -00:36:02,190 --> 00:37:05,610 -Scott Tolinski: Yeah, it's big. It's funny, I mean, even like understanding like how to treat people in a work environment, like in regards to this, like I had this boss one time, that was he was he was a fine boss, like in terms of like managing people. But he used to come around, and we were in a desk cluster with a bunch of other departments. And he would come around and make seriously the most inappropriate jokes like not like not like pushing the line inappropriate, but like it would it would be inappropriate in most situations, but especially in a quiet work environment. And and you were either put in that position where like, okay, you He's your boss. So do you laugh at his joke? Or do you act like very uncomfortable and be like this is this is weird, but I remember even like he would leave and like other co workers from other departments would look over and be like, yikes, like, what is that about? And so I mean, you don't want to put your your your coworkers in that position, you don't want to make them feel uncomfortable. So yeah, just being able to have that brain to see like, What is the situation like with my co workers, and how are people feeling is a big deal. - -48 -00:37:06,000 --> 00:38:06,510 -Wes Bos: Absolutely. Next one we have is you have attention to detail. And this one's super important because there's nothing more frustrating when working with other developers or yourself where you finish something and then the client comes back to you or you have to go back to the your coworker and say, like, good, but here's a list of 40 things that are just not right. And this often often happens when you're implementing a design into HTML and CSS, but, but also thinking about all the possible edge case and use cases. So I'm working with a guy on my own course platform right now. And when we're making decisions, you can tell that he thinks about every little possible thing that could happen in terms of like how to best store data, so the queries are quick, or how to not break something, if we're introducing a new way of approaching something. And it's, it's really cool to see that because it's clear that he has very good attention to detail and you don't have to worry about about things breaking because he know that they've thought it through. - -49 -00:38:06,750 --> 00:39:53,210 -Scott Tolinski: Yeah, it's big. It's big. And I mean, it could be even, like, if you think about it, it could be we talked to the design episode about like, pixel perfect design, and like some people finishing a design and being like, Alright, it's done, you're like, no, this isn't even close. Like being able to look at things and realize what exactly needs to be through again, all those little details is a very important thing. And you know, sometimes those little details or even like, code style, or you know, your unit, how you're how you're doing certain techniques, or whatever like that, but it isn't, it's an important thing to, to just, I don't know, to pay attention to all the little things in our industry, what are we doing, there's so many little things to keep track of It's It's nuts, but it's it's one of those things you got to practice you got to do you got to do you got to do. And lastly, we have here number 11. Is there such thing as lucky number 11? Or is that a thing? No, I don't think so. I'm just I'm not good with sayings. But number 11 here is that you are part of the community. And this could be any sort of like any sort of web development community or design community online system or, or even local community or work community. Either way, just being a part of a group of other developers is a big, big thing. Because I mean, I can't tell like how many times has like the most biggest breakthroughs I've had was when I was either at a meetup or a conference or hanging out chatting with some friends about some code stuff. It is such a big deal to talk to other human beings about what you're doing because everyone's brain just functions a little bit differently. And it's extremely important to be able to tap into someone else's brain power, use their brain power with your about brainpower and have some melding of skills and abilities. Yeah, - -50 -00:39:53,210 --> 00:41:16,500 -Wes Bos: totally. And that being part of a community can manifest itself in any number of ways. So we've got some examples here. We've got meetups are a really good way to, to meet them. Even if you go to one every six months or so, lunch and learns, we see often see teams of developers take one of my courses, and they'll just do it together on a lunch or they'll do like, I've also seen people, like rent out a conference room on a Saturday and meet up with 10 of their friends. And they all go through a JavaScript 30 courses, CSS Grid course together. And if you don't have that around you, there's Twitter, I see this hashtag 100 days of code all the time, show up on Twitter, and if people are doing 100 days of code, and that I think it's so cool, because by putting yourself out there and saying what you did every single day for 100 days, it's just has this enormous community around it. And you see such encouragement, you see people starting to like, find their community around them. Because like, that's how when I initially started Twitter, I found the web developer community that was surrounding me. And that's how I actually got some of the first jobs that I ever did. So I think it's really important to find your community, whether that's online, whether that's in person, whether that's going to one conference, a year, whether that's hanging out on chat rooms, or in the YouTube chat right now, we got 200 people chatting away. Yeah, - -51 -00:41:16,670 --> 00:41:37,380 -Scott Tolinski: yeah, it's, it's, it's huge. Because the level I mean, we have a slack room with level up tutorials, and I bounce ideas, people bounce ideas, everyone's talking everyone. So they're growing together. And it's it's big. I mean, just being part of these things is it's going to help you grow as a human being and help you grow as a person. So yeah, be part of a community. - -52 -00:41:37,410 --> 00:42:43,940 -Wes Bos: Let's do it. Awesome. So that's our 11 tips. If you have any more tips, why don't you send them on over to at syntax FM. So sick pic, I'm actually going to pick a book, I was just on vacation, and part of that vacation was my wife's mom came around, or my mother in law came with us and that she took care of our kids for a couple of the mornings. And we had that time to just do whatever it is we wanted. So my wife and I both did professional development. And I read a couple books on money management and investing and just kind of idea I've always I haven't ever talked much about my like thought process behind like saving money and buying cars with cash rather than financing them. And I have all these like thoughts about how to how to best manage money, and it's probably not important. But I did find that this book that I read very much aligned with my thoughts on on how to manage money and how to approach money and its role it plays in your life. And I had been avoiding this book for years because it sounds so stupid. It's called Rich Dad Poor Dad. Oh, which - -53 -00:42:43,940 --> 00:42:45,710 -Unknown: Yes. Have you familiar? - -54 -00:42:45,900 --> 00:43:14,130 -Wes Bos: Yeah. Have you read it? Or just heard of it? Yeah. So I I just didn't it's like a 23 year old buck or something like that, or a 15 year old buckets really old. But all of the concepts in it really stand the test of time. I'm a big fan of it. I'm kind of bummed that I left it for so long, because it was such a cheesy title, but I highly recommend it. I grabbed it on audiobook, I think I flipped it on 1.5 X and I was through it in about five hours of just laying in the hammock and listening to it. - -55 -00:43:14,310 --> 00:43:47,730 -Scott Tolinski: Yeah, it's a good book. It's I mean, again, it's one of those ones you want to listen to with some like context of, of how it fits into your life. Yeah. Especially like, there were there were some of those like some of these finance books they like really say like, this is the way it's this way or no other way. And it's great to like get a very amount of opinions on different stuff. And then I like mix them all together, in my mind. So I love any of those books. I love listening, that sort of stuff. I have a bunch of like podcasts in that regard I listen to. But yeah, Rich Dad, Poor Dad is a classic for a reason. Yeah, definitely one that you want to check out. - -56 -00:43:47,790 --> 00:44:39,090 -Wes Bos: I really liked it because it I'm like, my kids are starting to grow up and I'm starting to have to talk to them about money. Like my daughter found five bucks on the ground the other day. And I was like, oh man, like, we got it. What do we do with this? You know, like, like, all sudden, people are like, Oh, go buy toys. And I'm like, No, we need to like talk to her about saving. And she has this piggy bank. And every time she finds money, she saves it and we want to give part of that away. And there's like a whole bunch of and this really helped me like approach because it's not like he does talk about like investing in real estate and things like that. But it wasn't so much like, do this, like the Tony Robbins book is all about index funds, which are amazing thing. But this is just very much of a mindset about running a business and having your money work for you versus just getting a paycheck every single week and complaining about not making enough money. So I thought it was very, very interesting. - -57 -00:44:39,540 --> 00:47:09,570 -Scott Tolinski: Yeah. As someone who, who has had like student loans forever and ever, I mean, Courtney has a PhD. So that was a lot of schooling. Just being able to budget and work on those loans is just like you really need some good financial foundation to figure that stuff out. So yeah, I think any of these books that they just inspire you look at things like that is just so incredibly important. My sick pick today is going to be sort of a follow up to a sick pick that I did a while ago that a lot of people really, really seem to like, and a sick pick that it was overcooked for the computer for whatever. So my sick pick today was overcooked two, which is the sequel that came out a couple of weeks ago, I think I don't I forget, either way, we have been playing the life out of this game, Courtney and I, we we played overcooked one until we beat it. And then overcooked two, we were already pretty good at overcooked so you know, we're, you know, we're getting better but like this game kicks off and you're making sushi and you're making all sorts of just so fun with the added some like really little like interesting abilities. Like it's so much fun because one of the abilities that they added to is to throw things which it doesn't seem like like in a kitchen, you're you're working you're a little cartoon guy, you're moving stuff around, you're cooking. And this game is so much fun because what you're doing the whole object is to to get the orders out as fast as they come. So you're building and you're cooking things and you're working together with your your teammate to make these orders. And in this second version of the game, they allow you to throw things now. So we're in these kitchens that have like a chasm in the in the like there's a giant hole that you can fall it fall into in the know the kitchen. We're just chucking chucking stuff at each other. And I'm like, I'm like, here's some burgers, burgers, burgers, we're just tossing them in like that we're yelling at each other. And we it is actually really funny. So many principles of things about like keeping cool under pressure. Like when when we're effective and beating the game. Courtney and I are functioning like a real kitchen. And we're like we're intense, but we're very like calm at the same time. We're like the burgers need burgers, but like when we when when stuffs on fire and we're all like freaking out it the whole thing just goes into a total mess. And it's like an episode of some Gordon Ramsay TV show, or something like that. But I absolutely love overcooked too, too. And yeah, the sequel. I love the first one and love over cook too definitely lives up to the hype. So that's my see pic overcoat to lay it. - -58 -00:47:09,630 --> 00:47:11,850 -Wes Bos: Okay, what about shameless plugs? - -59 -00:47:12,810 --> 00:48:22,230 -Scott Tolinski: Shameless plugs, hey, I have a course on react testing called react testing for beginners, I've gotten a ton of great feedback on it. A lot of people have been very, very excited with this course, because it makes testing really easy. Now, you know, I never loved learning testing. I never loved testing that much myself. Until I figured out like really nice practices, I read all of Kent C, Dodds stuff and his react testing library Plus, it just has like, totally transformed how I think about testing and react. So this course is aimed at anyone who's not like great at testing, maybe doesn't love testing, maybe he doesn't know anything about testing at all. And we take you from the very beginnings all the way through Europe, pro in real world testing situations where you can do things like testing API's that come in and mocking data and understanding all the jargony stuff. So check it out, level up tutorials.com Ford slash store, and you can buy react testing for beginners, right now it's on sale until the next series is released, I still release them whenever they are finished. So get on that cuz there's no it's like only going to be on sale for like 20 more days, or you can become a level of pro level up tutorials.com for slash pro incentive for the year save 25% and get access to everything - -60 -00:48:22,380 --> 00:49:12,480 -Wes Bos: awesome. I'm gonna plug my upcoming advanced react graph qL course I just about finished the testing portion as well. And he talked about that. I took some time and added a couple extra videos on some beginner testing stuff just so that I'm not throwing people in and being like, oh, mocks and spies and yeah, test suites into you know, like, so we're kind of like, added a couple of videos that would explain the core ideas behind it. And then we get into testing and mocking the Apollo store and whatnot. So that's almost done. And then the last piece I have which is going to be pretty quick will be the deployment. Then I'm done. All the videos so far are edited up to it. And I'm really excited. It will be at Advanced react.com probably in a couple weeks or as I tell everyone soon. Alright, peace out. - -61 -00:49:15,150 --> 00:49:24,930 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax75.srt b/transcripts/Syntax75.srt deleted file mode 100644 index cb80a7fca..000000000 --- a/transcripts/Syntax75.srt +++ /dev/null @@ -1,244 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,379 --> 00:00:02,160 -Monday, - -3 -00:00:02,219 --> 00:00:06,990 -open wide dev fans yet ready to stuff your face with JavaScript CSS - -4 -00:00:06,990 --> 00:00:08,820 -node modules, barbecue tip - -5 -00:00:08,820 --> 00:00:21,660 -workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob, and Scott l. - -6 -00:00:26,010 --> 00:01:03,120 -Scott Tolinski: o Welcome to syntax and this hasty treat, which is the Monday edition of syntax where we take a small topic and we dive into over the course of let's say, 23.5 to 32.5 minutes or something around there, we had some people timing some of our episodes in the past. And this episode is all about feedback and criticism, which is a topic that we have to deal with a lot as both creative and technical developers, designers and anything in this industry. My name is Scott Tolin ski and with me, as always, is Wes Bos. - -7 -00:01:03,330 --> 00:01:05,340 -Unknown: Hello, everybody. I am a - -8 -00:01:05,550 --> 00:03:32,400 -Scott Tolinski: This episode is sponsored by one of our very most favorite services, which is Sentry, and you can get to sentry@sentry.io and sign up using the promo code a tasty treat. Now, Sentry is the amazing way of keeping track of your bugs and errors in your codebase. They say that you can cut your resolution time down from five hours to five minutes. And this is based on the fact that it gives you a ton of information around all of your errors. It lets you know the operating system, you can attach some data like maybe the user or what browser they're using, or any sort of that stuff that you need, right, they'll give you the stack trace, they'll give you any of the stuff that you need to solve the hairs that are taking place on your site. That way you can take care of them and even be aware of these errors before your users start coming at you with emails, right? You might be getting some emails saying hey, I tried to do this on your site, and it's not working. And maybe you would know that if you had Sentry installed, you get that error sent out to you ahead of time get the alert, go and fix it. You could reply to them and say, Hey, I know about it, it's taking care of you're good to go. So Sentry is just it's such a great service I was I have both been using them for a long time. Again, they have things like noise free and notifications tied to the commit. So you can make sure the right team or person is alerted. There's a really great SDK and API for every single platform. Literally every language, anything you can imagine is taken care of that you can plug into century. So if you're a PHP Dev, you're a no Dev, whatever your react dev get in there, you can use century everyone can use century, it also exposes like I mentioned expose, it exposes the source alongside the context about how they were using it. There's tight integrations to all this stuff, you know, and love like GitHub, Bitbucket, get lab, all that good stuff. And you there's even integrations into services like Slack, or JIRA, or pager duty, all that sort of stuff. And the coolest thing in our minds about Sentry is that it's 100% open source. So it's really, really awesome, then this company exists to really just help us have a better experience for our users. So again, head over to sentry.io sign up using the promo code a tasty treat, and let them know that you came from the syntax.fm. And again, there is a free plan there too, I might as well add, the free plan is a great way to give Sentry a try and not necessarily have to commit to anything. So check it out@sentry.io again, promo code is tasty treat - -9 -00:03:32,579 --> 00:05:06,420 -Wes Bos: wicked. So we're talking all about feedback in criticism today. And we're going to go through on first we're gonna go through getting feedback and how to properly accept feedback and how to parse that cuz it could be coming from very good places, it also can be coming from from bad places. And then we're going to be going and diving into giving feedback, which I think is really, really important. As a developer, you're working with lots of other people. So let's let's jump right into it. I think the first tip that we have, we just got all kinds of tips here we're gonna expand upon the first one is don't assume no malice from someone, I think that this is really important because tone on the internet is very, very easily lost. So whether you're on the internet or slack or email, it's often easy to think that someone is being very terse, or someone is trying to be aggressive towards you, you take it in the wrong way that it that is meant to be given. And I find that especially to be true on on Twitter, because Twitter is you are limited to the amount of characters that you have or people are just typing really quickly. As well as the web development in general is a very international community. And I would say more than half of the web development community is does is using English as a second language. And I think that when you combine both being on the internet and not having English as your first language, often some of the kind of softness of being able to to approach someone and reply to them in a nice way is often lost. So that's one thing I always have to remember myself. - -10 -00:05:06,540 --> 00:06:23,940 -Scott Tolinski: Yeah, it is, it's a big thing is oftentimes even if you're feeling some type of way, right, you're, you're in like a mood, right? Maybe you're like an aggressive mood, or maybe you're an upset mood, or maybe you're just down, you can look at people's feedback in a specific way and look at it differently. Like, you know, it is important to know the lens that you're looking at this feedback from as well, I think it's an extremely important to always take like a neutral tone, or neutral understanding, unless it's implied otherwise, very directly from the person giving that that feedback. Another one is just don't take it personally, even if the person is like, trying to be personal with it. You know, that's, that's a kind of a hard thing is to not take it personally. But chances are the people who are giving you this feedback, they're not intending to make you feel bad. And if they are, then then they're a terrible person. But you know, they're not intending to make you feel bad. And so therefore, they're not criticizing you, yourself, or your abilities in general, they're not saying you can't do this, or whatever. They're basically they're trying to make it about a better product, right? It's not about you, it's business, it's about a better product, it's about a better, better code, better something. And it's about the team making everyone better, right. - -11 -00:06:24,000 --> 00:08:27,570 -Wes Bos: Yeah, it's, it's easy to get wrapped up in being like I wrote this code, you're saying this code sucks, therefore, you say, I suck, and I should not be doing this. And, and you kind of spiral out of control. And some people are much more that way than others. But I think we all have a bit of a tendency to attach ourselves to the things that we make. Because at the end of the day, we're makers, and if you put your stuff out there, you're putting yourself up on the ledge and being like, I'm getting paid for this. I'm an expert at this. And and you're saying it's not good. And that can really hurt. So I think, important thing is to understand the why behind the feedback. And this is, this is gonna be one of the tips and giving feedback and try to tell the person why not just this, like, when I was designing websites, and I was building websites for clients, I would go through lots and lots of feedback from the client. And at first, you would be like, the client will say, I don't like green, or this layout feels busy or, or things like this. And at first I took it like, Oh, they don't like, they don't think that I'm good at this. And I don't feel like I have really have a skill at designing these websites. But if you try to understand the why is that, okay? This person is building a website. And they are trying to clearly communicate something they're trying to sell something they're trying to get more leads. And they feel like this is not the best way to communicate what it is that they're trying to get across on the page. And they feel like it's not getting them across. So trying to understand if they say if they say something like the the logo needs to be bigger, or if they feel that's like the classic one, make my logo bigger, or make the font bigger, or the all of these things that they're trying to tell you make it brighter, make it happier, you have to like sort of like your job is to figure out what do they actually mean behind that? Why are these things coming out? Why are they saying it this way? And then you got to like say, Okay, I from, from what I'm hearing, I think that maybe we should try adding a little bit more padding a little bit more spacing, let's try a different color a different color schemes and understand the why behind it all. - -12 -00:08:27,600 --> 00:09:58,320 -Scott Tolinski: Yeah, and I have that note here is to like look through, look at the situation through the reviewers eyes, like what are they looking at this for they're looking at it, like you said, to increase conversions to do this or that, or maybe even if it's code, they're looking at this code to make sure that it runs correctly, that it's not going to create problems. So you want to look at the problem through your reviewers eyes, and know that they're giving you this feedback for these reasons or reasons that that they're they have problems that they're trying to accomplish or are trying to solve. And you're being put in place to solve those problems. And if you're not solving those problems for them, then that's going to lead to this kind of criticism. So again, it's nothing personal, they have a goal in mind, and they're looking for you to help solve this goal. Another good one here is like, even if you don't agree 100% with the feedback, a lot of times, people who will think they did things the right way I did this the right way. Therefore I'm going to ignore any of the feedback. The fact that there is feedback at all, you know, criticism or feedback or whatever it is mostly just because there's truth in it, and you need to look for that truth. So even if you feel like I 100% knock this out of the park, chances are, you're you're going to be shutting yourself out to the important stuff to the truth. You're going to be overlooking this truth and maybe you don't see it right now. Or maybe you don't want to see the truth right now. But without looking for those kernels of truth and whatever they're saying you're never going to grow in your abilities or your specific assignment. - -13 -00:09:58,550 --> 00:11:50,550 -Wes Bos: Next one I have here is B I open to feedback. So I'm gonna approach this one specifically at someone who sells courses and I put myself out there, I charge people money for these, these most of these courses or half of these courses that I have out there, and I get my fair share of feedback on absolutely everything I do. If I send out a tweet, you get, it's 10, DMS and 30 replies to it, you put up a YouTube video, you get a couple hundred comments on there, you put it of course, people are gonna email you many times a day with their thoughts on on how it went. And it's very overwhelming because sometimes it's negative, often it's it's positive, sometimes it's people who have sort of missed the point or missed the boat, or there there's, there's a lots of feedback that you sort of have to figure out, like, what's good feedback and what's bad feedback. But I've learned just like, be open to absolutely everything. Because in in that huge amounts of feedback, there often is really, really good information that comes in there. And I feel so privileged that people care enough to to be able to take the time out of their day into write up an email, with their thoughts about what they really enjoyed, as well as what they had trouble with and what they stumbled upon. Because that is extremely valuable. And that will make my next course even better. And just little things like I wish there were more examples in this specific topic, or I don't like that there is Intro music at the start of all of your videos, that's really good feedback, because then I can The next one is going to be even better and even better. That's extremely valuable. You don't get that from from anyone and you don't necessarily get that when you ask as well. Like if it just go like Hey, what did everyone think you'll often just say, I loved it great. It was amazing. But if somebody like unprompted, comes and sends you an email that often is the very best feedback. - -14 -00:11:50,700 --> 00:13:40,650 -Scott Tolinski: Yeah, absolutely. I mean, in there some time is feedback that you you can ignore. But it's, it's only when that feedback comes in. And it's non relevant, right. For instance, I had somebody messaged on one of my videos saying that they weren't going to watch the entire series because of how I pronounce the word console. And I'm just like, okay, that's bad feedback. That's not like that's not gonna help me. I'm not going to alter my my speech patterns just because you know, whatever intonation that you don't know, liking is there. So I mean, there is there is certainly some feedback you can ignore. But there is a lot of feedback to again with these courses and stuff like that, that maybe hurts at first, like the war, like this guy's rambling on for two minutes before this content starts. And at first I'm like, Well, whatever, man, like, I thought this was videos good. But in reality, like, man, I did ramble on for two minutes before this before I got into the topic, and maybe it would have been better off to put those ramblings in a separate video that was titled like ramblings about this. But when somebody comes into a video, right, they watch a video that's like how to install WordPress, and then you talk for Yeah, and it's about WordPress, and don't talk about how to install WordPress, they're going to be very upset. So again, like that's a that's something I learned pretty early, because I got a lot of feedback for YouTube comments. And as crass and aggressive as YouTube comments can be there, there certainly can be some truth. And then somebody, somebody just left a comment on my video, like 10 minutes ago on a performance web video, or I was talking about reducing HTTP requests. And you know, like, you can't give a one size fits all answer to that. It depends on what your platform is, right? If it's like WordPress, there's a setting somewhere, right? If you're doing like a web pack, you have to you know, pack everything together, right? Well, this guy writes, you never said how to reduce sucking video. Thank you, man. Like, I really appreciate that feedback. - -15 -00:13:41,280 --> 00:14:29,400 -Wes Bos: Yes, I got a comment from our last live pod, or we did the podcast live. Oh, and someone comment it was it was on the 11th Yeah, it was like on the 11 things that you can do the 11 habits of a developer and he said like, this is better served as a blog article is too long to watch. I was like, Okay, what are you doing watching this video? Watch it man. Don't walk out with it by which is like it's such a there is like lots and lots of useless comments. I often wonder like, I'd love to meet some of these people that spend their day writing these these useless comments. I think that's another skill is being able to differentiate between random trolls on the internet, who are so out to lunch on how it works versus the actual genuine feedback that you can you can understand the whys behind it. Yeah. - -16 -00:14:29,520 --> 00:15:09,570 -Scott Tolinski: And I guess even if even if, you know, here's some here's, you do want to even look for little grains of truth in even those most aggressive absurd comments, right? Because maybe there is grains of truth for instance, that one I just brought up, you know, that guy thing you never said how to reduce it sucking video? Well, you know, maybe would have been better off in that video. If I would have said, hey, there's too many ways to do this. There's too many different platforms to how you might want to explore Marta do this on your platform. It'd be like a one sentence would have prevented somebody from being that rude and aggressive towards me. Again, even in the most asinine sort of responses like that there is grains of truth. - -17 -00:15:09,600 --> 00:15:12,750 -Wes Bos: Yeah, totally. All right, let's move on giving feedback. - -18 -00:15:12,780 --> 00:15:32,400 -Scott Tolinski: Yeah. And this one's really important because part of accepting feedback, right, is that the person giving it knows how to give it in a way that makes it easy to accept, right? If you want people to improve, or if you want people to take things correctly with little effort, then you need to put effort in how you give feedback. - -19 -00:15:32,490 --> 00:17:16,230 -Wes Bos: Yeah, I feel like I've done a pretty good job at this because I taught in person at hacker u in Toronto for 75567 years. And I've taught hundreds and hundreds of students and, and gone through their code with them and help them help them fix problems in their code base. And you're very vulnerable when you're learning to code. And if somebody, especially with someone, like who is the expert, I'm the teacher, I know how to how to do this stuff comes in and tells you Oh, that's not the best way to do it. Here's another way, you don't really have to approach that in a specific way. So one, I put out a tweet asking for any tips from for managers and developers on Twitter and lots of good information on there. I'll link up the tweet in the show notes. But from Dan Blundell, he said, criticize in private praise in public share your own failings, not the failings of other keeps culture and teams respectful. But also I think that I really liked that as well. Because all too often, like on Twitter, I think, because I have a lot of Twitter followers, people don't see me as like actual human. Yeah. And often, people will just sort of start blasting you like, hey, at Wes Bos, so it's meant to go to their entire following. Why is this broken on your website? Or why is this unaccessible? on your website? Do you hate blind people? Yeah. And it's like, Okay, um, thanks. But I would have preferred like a private message or email or even just a direct tweet so that the entire world doesn't have to start throwing their three cents in on this issue is like that's as sometimes I think people get get feel like superior by criticizing in public because this shows that I, I know what I'm doing. I'm an expert in this and look at this guy. He's charging for courses, he doesn't even know what he's doing. Yeah, I - -20 -00:17:16,230 --> 00:17:22,100 -Scott Tolinski: know that. There is like a whole whole army of people that are just waiting to shoot down whatever you say, - -21 -00:17:22,380 --> 00:17:48,320 -Wes Bos: slip up. Yeah, I often put, I put little funny things in my code comments. Because if anyone views source on any of my applications, or, or they, they drill into my like Git repos, or things like that always put, like funny commits and stuff like that, because I think it will, like defuse any situations where people are trying to look coming out swinging and looking for you to mess up and there's plenty, plenty of places I've messed up that you can you can catch me on. - -22 -00:17:48,350 --> 00:19:39,690 -Scott Tolinski: Yeah, it's funny. I mean, Reddit is like the worst place for that where if you say anything, people are gonna be like, ready to jump at you at the well actually. Yeah, it's like there was like a, you know, the latest react, I think was react fire. Is that like the that react? Am I remembering that correctly? The the new version of react Dom that they're talking about? Where allows you to use class instead of class name. And I posted on the Reddit original, I posted that I was looking forward to the demise of class name. And people were just like, hammering me about like, what about, what about the protected name, class, and D, structuring the word class and all this stuff? I'm like, Listen, I didn't I didn't make any comment about that. Like, I didn't give my thoughts about that. I just like that. You don't have to write the word name. And it's similar to HTML, like you can chill out about Yeah, right. like everyone's jumping at the opportunity to one up there. So let's talk about giving feedback, some of the best ways you can do it. I know I think a big one is don't give unrequested feedback. And this is a big, this is big, and like this sort of situation. But like when you're in an organization, where you have the dev who's like trying to be the expert Dev, like, I'm the smart dev here. So I'm gonna go out there and be like, hey, that's wrong, right? So if you're in a code critique, or a code review, or something like that's the perfect time to give someone a critique or a review of their code, but it's not your job to review someone else's code. And they're not asking for help with something, I wouldn't necessarily go out of my way to insult someone else's work or give them feedback. Because maybe, just maybe you're not looking at the final project, right? Sometimes people write things sloppily, or create things in a sloppy way firsthand, just to get it done and then refine it, right? Maybe you're looking at that sloppy one, and boom, ooh, what are you doing? But yeah, you'll just like wait it out and see maybe this mess is going to become something wonderful. - -23 -00:19:39,830 --> 00:19:58,920 -Wes Bos: Yeah, that we it with kids. You see that all the time and unsolicited advice from people like me and my wife were walking to the park one day, and some lady turns her car around, calls us over and says your kids should have hats on and go away. I know what I'm doing here. I - -24 -00:19:58,920 --> 00:20:59,670 -Scott Tolinski: didn't I didn't solicit Your your feedback or your advice here we so we have we have a dog that has dreadlocks. If you watch the live stream of the last episode you would have seen her she's she looks like a white mop. And that's like the breed standard, right? This is the way she's most comfortable being because like with normal dogs with their their formats of immense up to the skin with our dog, it only mats up like an inch away from her skin. So it's really breathable, it's how she how she prefers to be, well, we were taking her for a walk, like one of the first weeks we lived in Denver, and some lady on a bike goes, you're mistreating your dog, your dog. And we're just like my wife, Courtney who's not normally one to speak up in these type of situations. She's just like, that's the braid. Like just like, defending our dog like, because we take very good care of our dog. And it was just like extremely upsetting to have somebody again give us unsolicited feedback on something that they didn't know anything about. Right? She just thought that we were being a hipsters or something like dreadlocks? Yeah, - -25 -00:20:59,880 --> 00:23:27,330 -Wes Bos: yeah, I could see that. Next, no, you know who you're giving feedback to. So this is something when, when you give feedback in like a classroom setting, you really have to make sure that you know the personality of the type of person that you're giving feedback to. Because some people they want, they want everything, they say, Wes, tear this apart, tell me what I'm doing wrong, I really need you just to tell me every single little thing. Whereas some other people are a little bit more fragile. And you can't just come in swing in and give them a laundry list of 80 things that don't necessarily matter all that much. And the probably will learn that at some point. So because there's a lot of people who are very, I'm just speaking in, like when people are learning how to code. They're, they doubt their they doubt themselves so much. And they don't think that they can do it. And they don't think that they're any good. And you sort of have to tiptoe around. And when you when you approach someone like this, you have to know that you can absolutely ruin somebody's day. And I've had my day ruined many times just by snarky comments that people come by, and they don't phrase them the right way, and you just feel like garbage the entire day. So know the type of person that you're giving feedback to. And I think some some ways that you can do that is, is phrase in positives. So I have some examples here. Instead of saying something like this website is totally unusable by blind people, you can say something like, one little tip that I like to use is making sure that all of my images have have alt tags in them. And just by saying like both by by phrasing in the positive, as well as giving examples of your own screw ups. That's another thing I do a lot when teaching is I don't say, Oh, your slider won't be able to be used on mobile, because of xy and z or don't absolute position everything because you're going to be in a world of hurt when you when you go to mobile, I'll say oh, I once built a website. And I absolutely efficient positioned everything. And I was so excited. And then I resize the browser and the entire thing was all off. Or I'll give a little examples of Hey, maybe you should make a reusable component for your social media icons. Because once I had a client where I hard coded the Twitter icon and Seven Spots, and I forgot to update one of them, and they were really mad about that. And just little examples of like, oh, man, I totally dropped the ball here. Don't do what I did. I'm the dummy Haha, that's kind of a nice way to to give feedback but but place the blame on yourself and say don't do it. I did. - -26 -00:23:27,420 --> 00:24:44,820 -Scott Tolinski: Yeah, I mean, that leads perfectly into my next one is don't be an asshole, don't be rude about it. Like Don't be out there collect skulls, your that's not your job, right? You're not it's not your job, to be the predator to go in there in just hammer on everybody, your job is to improve the codebase or improve the design or meet these product goals. So if you're going to be rude to your, your, whatever the person that you're critiquing, right, and one it's going to make you look bad in the eyes of your coworkers, they're going to look at that, that person and be like, hey, Oof, that's the that's the person who doesn't know how to give good feedback. But that's also the person that's just a dick. They're just rude, right? They're just angry, it's also going to not get you any right. Because when people are insulted, personally, they shut down and they don't listen. And when they shut down again, you're not accomplishing any of those goals that you set out to do. And also, if you say something, you might not be able to ever take it back. Right? You might regret what you said. And you might have permanently damaged that relationship with that person. So you need to keep in mind that these are people that you're talking to and don't be rude. There's no reason to be rude. And it's it's if anything, it's making things worse and you're not making things better. - -27 -00:24:45,120 --> 00:25:46,410 -Wes Bos: Next one is to embrace the robot uprising. This is using tools and standards for things like code quality. Yeah, and even like I'm even thinking about like Freshbooks which is not sponsoring this episode, but they have like an automated late payment reminder. And it's so much better when like an automated email robot says, Hey, you didn't pay this bill versus you having to be like, hey, like what's going on? Why are you not paying us? Because it's it's not you, it's somebody else. And I think encoding a lot of feedback, especially in code reviews is this formatting is off this, this is code is messy. So instead of telling someone that their code is messy, or unreadable, first use tools like es lint, and, and prettier to to format the code. So it's automatically in a way, and also just then it puts the blame on someone else, hey, we use these code standards and these tools in our code base, I can show you how to get these things set up so that we're all started coding on the same page, we all code on the same way. - -28 -00:25:46,530 --> 00:27:30,660 -Scott Tolinski: Yeah, I think that's an easy win, right? Because Yeah, now you're not, it's not no longer a problem with you know, what one person is doing these just just removed so many variables. And in my like, experience, when you have a lot of complex things, it the more you can remove that variable, like the better. So if you're removing code, style, code, quality, all that stuff, or even like tests, right has to pass all your testing, you must have this amount of coverage or whatever, if you have these rules in place, that are smart and remove some of those variables, it's going to be a big opportunity to remove any of that opportunity for even, you know, something negative to come up like that. And another big one I have is given opportunity to improve. Sometimes, some people just have off days, or maybe they had the wrong idea. And if they come to you with a review, and you review it really harshly, and then you hold on to a grudge, maybe saying oh, this person can't do this, or they're not good at this, I'm going to stop giving them those projects entirely. Or maybe I'm going to always view that person as this in this in my mind, no, give them an opportunity to rise to the occasion, maybe even throw another one their way. Like let's say they had an issue with CSS specificity spell, gosh, darn it, that word. I think I think I butchered it. Let's say people had an issue with that, and they didn't know, right, you can review their their CSS code and say, Hey, your code could be better if you did this, and this and this. And then instead of not giving them projects that involve that, give them another one and see if they come up big, because chances are people want to do a really good job. And if you if you present it in the right ways, then well, you're gonna make it a better opportunity for everyone to grow as a group. - -29 -00:27:30,750 --> 00:30:01,530 -Wes Bos: Next one I have here is explained the why behind your feedback. So in the getting feedback section, we said try to understand the why. But it's even better if you can just explain the why to somebody. So we want to style our dialog boxes in this this way. Because it's more accessible to everybody on our website, or we had in the past, we've had performance issues, doing X, Y, and Z. And if you explain the why behind it, it doesn't necessarily put it on the the person saying your code is bad. It's just saying, this is the way we do it. Or this is the way that I prefer to be done. Because X, Y and Z and there's this link to a blog post, someone tweeted and it goes to manager tools. Which manager tools is a podcast I used to listen to back in, in university. And this is a blog post from 2008. So yeah, it's 10 years ago, I used to listen to in university because I was doing a lot of these like networking and like big business, like how to wear ties all the time to school and shake hands. And there was there was all these like things about like, how do you send someone an email? How do you shake someone's hand? How do you have a meal with people like like, I often will have meals with people and they'll just dice up their entire steak, and then they'll butter the entire bun and then just start eating it like it's like a subway or something like that. And there's like, there's proper ways to eat a roll when you're out in. Anyways, I thought that was really interesting podcast. But this is the blog post manager tools, which is how to provide feedbacks. And it's a four step ask an employee if they are open to feedback that goes back to don't give unsolicited feedback. Second, describe the behavior example jack, when you roll your eyes in a meeting when others talk, when you say you guys don't get it when you do so describe the behavior describe the impact of the behavior. So when you roll your eyes in a meeting, we lose good people or it frustrates other people in the thing. So explain the impact, and then discuss next steps. So when you bring in a whole bunch of third party libraries to do something, which we already have, it increases the bundle size, which is going to slow down the load for slow down the load for our users and we don't want to do that. So what we'll do now is before we add any more third party dependencies, let's go through this process or just just shoot me a slack message to make sure it's okay. And that's kind of a nice way to say like the here's the the why and the reason behind it and here's how we're actually going to fix it. Rather than just saying like don't put so many Third party libraries in here, - -30 -00:30:01,560 --> 00:30:02,160 -Unknown: huh? - -31 -00:30:02,220 --> 00:31:01,740 -Scott Tolinski: Yeah, again, it's it goes down to like what's being pulled to the team and what's not being helpful to the team are really common saying is to build a sandwich. Somebody even tweeted us that referring to it as a shit sandwich, which I had never heard of it as a shit sandwich before. But it's a sandwich, where you sandwich the negative things in between positive things in this this way, it makes people more receptive to what you're about to say. So you can say, Well, hey, your navigation looks really nice, and it functions really nicely. But you need to have a button for the hamburger menu rather than an anchor tag because of accessibility. Other than that, it looks really great. You know, you could do something like that, where again, the the negative thing is just sandwiched in there. So instead of being like, Hey, man, don't you know that your button is wrong? Like, you know, that's not going to solve any of these problems. So it can you want to make people receptive and open to what you're about to say, before you go and say it. - -32 -00:31:01,830 --> 00:32:16,950 -Wes Bos: Someone else tweeted a link to mpj, friend of the show mpj. And he has a really good YouTube video that came out after StackOverflow finally, finally said, Yes, we understand that people are very mean on StackOverflow, which is mean, we've been saying for years, it's so scary to ask it. And he argues that adding civility or people were arguing that removing civility from technical stuff is better. So if you just get to the nuts and the bolts of the technical topic, and remove anything else, it's the best. And he's arguing the other way, which I totally agree of is if you can add civility if you can add being nice, and the skill of being able to clearly and properly communicate something, I think that goes a long way and actually describing the technical topic. So it's kind of all of what we've been talking about today is that you a lot of people, especially in technical, I don't know why it's so big in our technical in the web development community, but a lot of people come off very harsh, very terse. And they think that just spewing out the facts is the best way to get across information. And I absolutely don't believe that. Yeah, - -33 -00:32:16,950 --> 00:32:30,570 -Scott Tolinski: I mean, it all comes down to what is the thing you're trying to solve, right? If you're on Stack Overflow, stack overthrow? Are you on Stack Overflow to solve someone else's problem, or you an overflow, Stack Overflow? My - -34 -00:32:30,570 --> 00:32:32,670 -Wes Bos: sin stack overthrow. - -35 -00:32:35,940 --> 00:33:49,650 -Scott Tolinski: dyslexia has gone too far read. If you are on Stack Overflow, I almost even said throw them and I'm trying really hard to say, hey, okay, are you on it to solve someone else's problem? Or are you on it to gain points and boost your ego? Because a lot of people think that they're on it to solve problems, but get in there and are only trying to either hurt people's feelings or give an answer without necessarily keeping in mind, like, why they're there. They're there to help the person. And if they attack the person, like, Oh, this is, this is some crap code here, you got to do better this way, or whatever, you're not solving that problem. And so by all means, if you want to be a jerk, and you want to be in there for ego and internet points, then someplace like that isn't the best thing. There's, there's other ways you can get ego points on the internet, then a place that's meant to help other people. So just keep in mind, main main thing is always eyes on the prize, like what are we trying to solve here? What are the problems we're trying to do? If you have that in mind here, just keep in mind, like what's going to help these things get solved and what's going to make it worse, - -36 -00:33:49,680 --> 00:34:14,420 -Wes Bos: like also one other skill that you can have, and I don't know if this is a good thing or not. But being able to kindly but funnily reply to, to feedback is a bit of a skill as well. So often, every day on Twitter, I'll get snarky replies to my tweets. I just tweeted one out, and somebody people always call me I spelled canceled wrong. And - -37 -00:34:15,230 --> 00:34:16,800 -Scott Tolinski: I've been getting a lot of heat for this one. - -38 -00:34:17,130 --> 00:34:52,460 -Wes Bos: Yeah, people Hey, you spelled canceled wrong. Thanks. You know, like, I'm sorry, I can't edit it, that deed is done. It's not a big deal. So I just replied, I prefer the British spelling was pretty good. So I don't know. Like, it's sometimes you just gotta like, take a break and walk away from it because you, you can then like, fight back with a snarky reply. And that's the guts good for no one. But being able to defuse defuse the situation with a little bit of a joke reply, I think is a bit of a skill on its own. Yeah, I've been working on - -39 -00:34:52,500 --> 00:35:29,160 -Scott Tolinski: Yeah, I've been working on that too. Especially on things like YouTube comments where people just like I know something about YouTube or is Something about I think YouTube specifically, that just brings out the very worst in people in the comments. Because they're just Yeah, they're out for blood, man, everyone's out for blood. Again, if you want to see change on whatever platform you are commenting on or working on or whatever, keep that in mind that you're trying to inspire some kind of change other than I mean, keep in mind that that's that's the word there is inspire. You're trying to inspire change, you're not trying to force change into submission by insulting it or something. Yeah, also, - -40 -00:35:29,160 --> 00:35:47,900 -Wes Bos: I think, like, we focus a lot on like negative feedback here. I think it's worth noting that if you if someone does a good something that is good, or if you enjoy something that someone does, send them a little note of positive feedback, say, hey, fantastic job on that. That's it. You don't need a shit sandwich. Just have a Yeah, piece of bread. - -41 -00:35:48,150 --> 00:35:54,900 -Scott Tolinski: Nothing but bread. Everybody likes to hear good things, right? Yeah, toast sandwich you you pronounce console really well, in this video, thank you. - -42 -00:35:55,830 --> 00:36:01,980 -Wes Bos: Oh, get ready. Can I tell you in my react course, I say schema so many times, I cannot - -43 -00:36:01,980 --> 00:36:11,960 -Unknown: wait, you're gonna lose a lot of buyers. Because of that. They're gonna know. schema. schema schema, schema, - -44 -00:36:11,960 --> 00:36:15,150 -like schema, schema schema? - -45 -00:36:16,530 --> 00:36:22,400 -Scott Tolinski: See, what's funny is that you say it like that. But that's how schema a schema schema? - -46 -00:36:24,600 --> 00:36:32,310 -Wes Bos: Oh, you're wrong. I we did a poll on on Twitter many months ago. And it was like, I think like 20% says it my way. I just - -47 -00:36:32,850 --> 00:36:38,420 -Scott Tolinski: I don't believe that. Did you click it 20% of those times? Because I feel like you're the only person that says it that way. - -48 -00:36:38,630 --> 00:36:40,320 -Wes Bos: Let me let me find this poll. - -49 -00:36:41,040 --> 00:36:45,980 -Scott Tolinski: We all know that you're capable of wizardry in the command line two poll results. - -50 -00:36:46,110 --> 00:37:10,080 -Wes Bos: I can't say Twitter poll results, because you need like many Twitter accounts. And all I have is my own account and the syntax account? I don't know. But we did have a poll recently at syntax FM, which said, Do you prefer Elon Musk on Rogan? Or Scott's sponsor? segways on syntax FM, and I'm proud to say 59% of you like Scott 69 - -51 -00:37:10,800 --> 00:37:15,230 -Scott Tolinski: F 59. Yes. And I mean, that face he made when he hit that drawing was pretty funny. But - -52 -00:37:15,270 --> 00:37:25,560 -Wes Bos: okay. If you don't know we're talking about I think the whole world knows. But Elan musk went on Joe Rogan podcast and took a hit of a joint which is so funny. I saw - -53 -00:37:25,560 --> 00:37:43,730 -Scott Tolinski: some interview because I didn't watch the whole thing or any of it for that matter. But where they were like talking about chimps or something and in Joe Rogan was just like, Are you surprised? Like we're on the Joe Rogan podcast? like we talked about chimps like once a week on this podcast, I was just like, Oh my God, - -54 -00:37:44,340 --> 00:37:51,420 -Wes Bos: this should go on YouTube and search for Roe Joe Rogan. And that's all I have to say. That's it for today. It - -55 -00:37:51,420 --> 00:37:52,050 -Scott Tolinski: is good. - -56 -00:37:53,150 --> 00:37:55,320 -Unknown: All right. That's it for today. Anything else to add? Scott, - -57 -00:37:55,350 --> 00:38:01,860 -Scott Tolinski: I don't just you know, again, inspire change, be good. And, you know, give good feedback. Don't Don't be a jerk - -58 -00:38:02,360 --> 00:38:04,830 -Unknown: to each other. Be excellent to each other. I'm - -59 -00:38:04,830 --> 00:38:08,460 -doing the the bill and Ted posts over here. - -60 -00:38:10,670 --> 00:38:13,290 -Wes Bos: Cool. All right. We'll see you on Wednesday. Please. - -61 -00:38:15,690 --> 00:38:25,460 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax76.srt b/transcripts/Syntax76.srt deleted file mode 100644 index f21c5a571..000000000 --- a/transcripts/Syntax76.srt +++ /dev/null @@ -1,224 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,849 --> 00:01:16,110 -Wes Bos: the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. Hello, everybody and welcome to syntax. We are the podcasts with the tastiest web development treats. Today we're talking all about specialization versus generalization. I get questions about this all the time, people who are either in their job for a while and they feel like they're not really good at one thing, and people who are brand new to web development, they don't really know what to focus on, should I get good at absolutely everything, or should I just get good absolute, just like one thing. So we're gonna try to unpack that and give our thoughts as to, to what you should do. Today's episode is sponsored by two awesome companies, fresh books, which is going to help you do all of your cloud accounting, all of your expenses, all of your inputs, all of your outputs, everything that has to do with running a business, and dev lifts, which is going to get you fit. So if you are a developer, and you are looking to get strong or lose some weight, or just kind of get tuned in mentally, because you want to be totally focused, then Daedalus is going to help you out with that little we'll talk about both of those companies partway through this episode. Hello, Scott, how you doing today? - -3 -00:01:16,110 --> 00:01:17,040 -Unknown: Hey, - -4 -00:01:17,399 --> 00:01:35,310 -Scott Tolinski: here Hello to you, as well as I'm doing pretty good. Hey, we have some fantastic news, which is finally public that we can start sharing people syntax live is going to be happening. Yeah, I know. I know. And then the funny thing is, is that we've known about this for a good amount of time now. - -5 -00:01:35,369 --> 00:01:36,990 -Unknown: And people have been like, for months. Yeah, - -6 -00:01:36,990 --> 00:02:00,870 -Scott Tolinski: people have been like, you should do a live show. I mean, we've gotten that a few times. And we just wanted to be like we are but now No, we know we can announce that we're officially doing a live show at the jam stack. com San Francisco, October 30, I believe is when they're speaking the conference of the 29th and the 30th. It's gonna be a blast. We're gonna do syntax live on stage. And I think we're gonna we're gonna try to make it pretty fun. - -7 -00:02:01,019 --> 00:02:55,650 -Wes Bos: Yeah, I'm so excited for it. Because I've first some people thought that we are. I didn't even tell you this, Scott. Some people thought that we were in the same room when we recorded but I have never met Scott. We're on webcam twice a week to do this. And we chat almost every day in chat, but I've actually never met him in person. So I'm really excited about this kind of live, I think it's gonna have really good energy. And there's a whole bunch of other really good speakers as well. There's got to linsky founder of level oils. Wes Bos founder and I didn't give that's the thing about having like a business that I don't is kind of this thing that it's just yourself founder, founder of Wes Bos Enterprises. Yeah. So they just put founder of cindex Chris coiour Jessica Lord Quincy Larson, who's from Free Code Camp a Monica. Let's Let's butcher her last name. Didn't soluis su di NCULS cu - -8 -00:02:55,710 --> 00:02:57,960 -Unknown: I'm sorry, Monica. So sorry. - -9 -00:02:58,650 --> 00:03:13,740 -Wes Bos: Didn't silly was a terrible I wish I knew how to pronounce things. But it's there's more speakers gonna be announced a very very soon as well. So check out jamstack calm calm if you want to meet up with Scott and I in San Francisco. - -10 -00:03:13,919 --> 00:03:47,819 -Scott Tolinski: Yeah, it's gonna be sweet. We're I mean, it's funny because we're not often even in the same country. So yeah, this delay so it's gonna be a blast. I'm really excited about it. And now that we can start talking about it um, yeah, I'm just I'm pumped. I'm glad it's out there. So it really episode we're gonna be diving into this whole specialization verse generalization jack of all trades, master of none sort of stuff. Well, I think you wanted to kick it off here with a little bit of a message that you received from Yeah, general question. - -11 -00:03:47,850 --> 00:05:07,290 -Wes Bos: Just someone someone sent me a DM on Twitter, which, sometimes I read them, I have probably have, like 400 DMS right now I get so many and every now and then I'll just dip into the stream and see what people are saying and try to get as many as I possibly can. And this is one that I got was I've been struggling with deciding Should I aim to be full stack front end or back end? Are there any drawbacks or benefits? This is a question I get all the time for people being like, I don't really know what to focus on. So we're gonna attempt to tackle that and answer that question for you. So let's talk about like, what is a specialist and what is a generalist, um, I like to think of a specialist as someone who is very good at one or two things who are sort of considered experts in a specific area of, of something. And we'll talk about this whole full stack versus front end in a bit because I think even inside of both of those, you can really unpack full stack and in front end and back in. So some examples of someone who is a dev that does just Drupal, they are a Drupal specialist. They will build Drupal, extensions over Drupal sites. They'll have all of the ideas about performance, they'll probably speak at conferences, and anytime that somebody He needs to hire a Drupal developer or someone needs to write a book about Drupal, they are the person that is going to be contacted about that. - -12 -00:05:07,410 --> 00:07:20,070 -Scott Tolinski: Yeah, that is, I mean, that is the specialist. And what it is, is just that they are very, very, very good at one thing. And then that one, one thing is, you know, largely what you become known for. And if you become known for it, then again, you're gonna name is going to come up, and all these sorts of situations, right. And this makes you very hireable for especially like big dollar contract work, where someone says, shoot, we have a problem with this Drupal site. And we don't have anyone to fix it. But we know this guy who is very, very good at Drupal, and we're going to reach out to him and maybe he or she, like knows that how to solve this problem. Or maybe he or she knows a person that can solve this problem, as well. Right? Maybe they know another expert in this situation, and therefore they can reach out to them and put you in touch with somebody who is a master at this work. And so again, these are from very high dollar moments, and Wes has it listed as high dollar. Oh, she moments. One time we had a client who was like a big, big client, right, and it was a small agency, and they wanted search, right. And this is before some services existed that really made it easy. And if you're going to be doing like a very high end search, you really needed a specialist in this sort of thing. But in particular, they had chosen this Google box, it was sort of the Gavin Belson signature edition. You know, it was it was the Google the box, right? And at the time, yeah. Without the phallic logo. But at the time there was like, yeah, you needed to be an expert in this Google box. And this Google box, they bought it. And they did all this stuff without even telling us. They're just like, Oh, it's Google. It's the Google box. We got to have this Google box. And all sudden, we're like, well, how the heck do we connect this to our system? How do we get this thing working, or whatever, and we found a specialist and she, she killed it. One. But she she just went through, she nailed this thing for us. And it was a big, big money contract. She picked up a nice hefty payday because she was the only person who had that experience that we could get ahold of the only person that had that experience that could do the job for us. And because of that she was the master she got paid. - -13 -00:07:20,309 --> 00:09:18,169 -Wes Bos: Yep, being a specialist can be very lucrative and very comfortable if you have taken the time to be well known in your industry in person. So I got a couple examples here. In where I live, downtown Hamilton, every single house has the exact same I think it's like oak strip floors, where it's like this corner sawn oak and they all have the same like little detail inlay. Every corner has these like little kind of like square details. It's so so nice. And every single house has it. And everyone gets their floors refinished, because they obviously they're like 100 years old, they're pretty beat up. But they they've been covered with carpet for most of their life. So you can you can pull them up and get your floors refinished. And every you talk to anybody downtown, and they say get Malcolm, everyone says call Malcolm. And if you even just Google Malcolm the floor guy, cuz like, I'm just like, Who's Malcolm. And if you just Google Malcolm, the floor guy says one guy, and he has just a truck with a whole bunch of Sanders in it. And he knows these floors cold and he's booked six months out in advance. And he just kind of lives his life making good money sanding and restoring these exact type of floors. Everyone knows to hire Malcolm right. It's a perfect example of specializing it. And he says on his truck, it says we don't do repairs. And I also remember this, this is another aside but T Han lakhs, which used to be a really well known design agency here in Toronto. They all went to Facebook a couple of years ago, but they used to have a website and said we don't do this, we don't do search engine optimization, we don't do. And I love that idea of of having a we don't list instead of a we do list because it really shows the person that we are really good at doing, like interface design, or refinishing the hardware floors, and you're gonna hire us because that's exactly what you need. If you need someone to repair your floor. Go find someone else. - -14 -00:09:18,409 --> 00:10:42,510 -Scott Tolinski: Yeah. I mean, there is something to be said about the person who is very good at saying no, I mean, the person who says no to things is the person who's in control of their stuff. I mean, that's a big thing in our world as freelancers is knowing when to say no to a job, but also like when to know that you aren't the right person for the job. It's it's a sign of maturity. It's a sign of like control over your mastery and all sorts of stuff like that. So again, that we don't do this sort of thing is extremely I don't know it's very nice to see because so many times people want to fake the funk and try to do everything. And you can't necessarily do that. No another way that a specialist can be like very, very useful as send something like a code review, especially if you want your devs. To get like the best advice from somebody who's like a master at somebody, you're going to find somebody who only does react and does react very well to do your to check out your front end code and maybe give you a here's how to improve, here's how to go. And then that turns into like a training situation. Instead, these code reviews, I mean, you're essentially get paid to not write any code, necessarily, you're you're just looking at other people's code, making recommendations and that sort of thing. And that seems like a pretty sweet gig, right? I mean, yeah, you are sort of the Gordon Ramsay of someone else's code. And you can just come in there and tune it up and show them how to make the perfect cheeseburger or something. - -15 -00:10:43,649 --> 00:11:53,490 -Wes Bos: I actually just had one of these gigs. A couple weeks ago, somebody was trying to buy a company. And part of their vetting process to buy that company was to have the codebase review to make sure by a third party, make sure that it was it was quality and things like that, and it was a react and graph qL codebase. And I got somebody was like, go talk to Wes, because he will review that codebase for you, because he knows both react and graph QL. So I took, I don't know, four hours or so. And I just read over the codebase and looked at all the patterns and stuff like that. And it was a very fun job to do, because I just got to like, read other people's code and understand how it worked and and then explain that and convey that in a way to the stakeholders of Is it good? Is it scalable? Is it something that's going to? Is this on? It's going to run? How expensive would it be to hire somebody at this level? Like it was a fairly advanced code base? So I had to tell them like, okay, like, you would have to hire someone like me for this. And that would cost X dollars a year. Or if you were to hire someone like that it'd be X dollars an hour. So it's kind of interesting way to go in via specialist. Anything else to say about specialists? Should we go into generalist? - -16 -00:11:53,520 --> 00:12:54,659 -Scott Tolinski: No, I think there Yeah. And along that same line, I got hired to do a technical review for a book, which probably was even easier than that, because all I had to do was read a book, and it was a book I might have been interested in reading anyways. And I just got to make sure they didn't make any technical mistakes, look at the code, whatever. And they're examples. And it was really nice, it was a nice thing. Because Yeah, it's like getting paid to read something that just further solidify some of your knowledge and then general area. So next we have the generalist, so we've gone over the specialist. Now let's talk about the generalist, the jack of all trades, the dev who wants to do it all and know it all. And just to be you know, you know, Master of many domains, rather than just one singular domain, this person, essentially somebody who's not only just going to learn Drupal, or maybe even Drupal and WordPress, because those are pretty similar, but they're gonna learn Drupal, they're gonna learn WordPress, they're gonna learn Django, they're gonna learn rails, and they're gonna try to do all these different things. And they're going to just say that, oh, yeah, I can do that. That's what you're building the site in, I can build that, right? - -17 -00:12:54,809 --> 00:14:28,830 -Wes Bos: Yeah, if I saw somebody had a resume, and they had like, five or six different languages on it, and every framework under the sun listed on it, and all that stuff, I would, that would raise an eyebrow for me for sure. Because I would know that okay, this person, unless they're an absolute genius, they likely do not have like, they're not proficient in all of these languages, and all of these frameworks and know the ins and outs and, and stuff like that. So that's kind of I think what a generalist is, in one way, I think another way that you can look at a generalist is someone who focuses on like a language, but not necessarily a specific area. So I think you could be a just a JavaScript developer who can code up a back end and a front end. And I don't know if you necessarily, this is kind of where I'm at right now. And I am a what I call a full stack developer, I will code up back end, no problem, I can code up the front end, I can write all the CSS that's sociated with it sort of tip to tail, I can do the whole thing. But I don't necessarily think that's a generalist. Or maybe it is considered a JavaScript generalist, but I would be very, very lost if you threw me into the back end of a Python application or you're trying to throw me it like somebody was asking like, when is a machine learning course coming? And I was like, brother, that is so far outside of my wheelhouse. I have I know nothing about that. And it's not anything that I really have interest in. So I don't know what do you thought like, would you think of somebody a year kind of in a similar spot? Would you say yourself as a generalist or a specialist? - -18 -00:14:28,890 --> 00:15:49,860 -Scott Tolinski: Yeah, I I'm probably a bit more of a general than I would like to be but again, all the skills are related. I find myself having a hard time not wanting to do things like oh, there's a new design that needs to be done. I'll do it like, Oh, I should probably hire somebody out for that. But yeah, again, I mean, if you are the generalist You know, there's going to be more jobs available to you if you have like a tighter skills in like very related areas, then then skills and a bunch of non related areas. Again, If you're expanding Django, rails node, all that stuff, then you know, there's gonna be less jobs available to you. Because the the Python, the person who's hiring a Python dev isn't going to be hiring the dev who's a Python and a node and a Rails Dev, they're gonna be hiring the guy who or the girl who's a Python Dev, do you know what I'm saying? So yeah, I think building these related skills is is the most sort of important part, especially because, like when you're on that job, and you're you're doing like, when you're doing very specialized skills, you're going to be doing a lot of heavy lifting, and we're gonna be doing a lot of heavy lifting. If you sign up for deadlifts, which is one of our sponsors this week. It was one of our first sponsors and where they are very first sponsor, I know I asked this question every single time but - -19 -00:15:50,730 --> 00:16:21,210 -Wes Bos: let's let's see, let me take a quick look at that. I'm curious who our very first sponsor was. WP Oh, no. WP migrate DB Pro. On Episode Five was episode three didn't have a sponsor. And yeah, WP migrate. dB Pro is our very first sponsor and then Freshbooks came in right after that, which is interesting to see fresh books that definitely keeps tabs on on the the podcast charts. As soon as a new podcast jumps up. I think that they they try to jump on it. - -20 -00:16:21,240 --> 00:16:45,270 -Scott Tolinski: Yeah. So deadlifts is a it's just a one of those things that we've been they've been friends of the show for quite some time. Now. I myself and I'm just extremely active. And some programs like deadlifts, which are encouraging you to not only be a good developer, but to get your your mind body and everything connected, right. So with a little bit more about deadlifts is Wes Bos. - -21 -00:16:45,450 --> 00:19:48,080 -Wes Bos: Yeah, so DevOps has sponsored a whole bunch in the past. And they're back for a couple more episodes. Now, just to tell you about sort of two programs that they have. So they've got one new program was called fit dot start, which I love because it's like a dot star. It's like a method on fit, which makes me laugh. It's 19 bucks a month. And it's tailored towards a goal. So you if you want to get lean, you want to lose some fat, if you want to do just bodyweight exercises. So if you don't have a gym that's available to you, and you just want to do bodyweight exercises and get a little bit stronger that way, then you totally can. Or if you want to get strong if you want to do compound lifts. So I really like that because you can say like, Okay, I'm a developer, I want to get fit. But here, here are my goals that I want want to go is 100% beginner friendly, your first week is actually just taking a walk to introduce reintroduce some movement into your life. And then you get your workouts via email soon, they're coming out with a mobile app, which I think is going to be really cool. One thing I really like about deadlifts, guys is that they obviously are going to give you your they're going to talk about your goal, and they're gonna tell you exactly what to do. But they're also going to tell tell you what to eat, what you should do is your nutritional Guide, which is, I think, is probably more than actually half of getting in shape. And then if you for that fit start you get if you use the code syntax, you get 50% off your subscription forever, then they also have a premium offering, which is what they've had since the beginning. And this is actually the one that I went through myself where if you want maximum personal personalization and maximum accountability, so if you want to talk with them, tell them what's going on with you. So I sat down with them and said, Hey, I want to lose a little bit of weight, I want to get stronger, because like I was feeling like, ever since I got my kids, I was feeling like I was like my back would start hurting in the morning. And I was like I need to like I need to get stronger because I want to be able to throw these kids in the pool, like 10 feet in the air, right? Yeah, right. Throwing kids in the pool is the best anyway. So that's why I don't I want to lose a little bit of weight, I want to throw my kids 10 foot in the air and not have my back hurt the next day. And then they come back to you with a whole workout. A whole nutrition plan, what you should be eating, things like that. You can have check in video calls with them have a private Slack channel with them. So if you want to be like, Hey, is my critique good if you want to take a little video of yourself lifting or something like that, really, really hands on Taylor there. If you use the code tasty, you'll get 50% off your subscription. But that's only for the first 10 people. So make sure that you you jump on that as well. So if you are developer looking to get fit, and I really want to stress that the the main thing for me with with going through this program was of course you lose a little bit weight and you start to feel better. But what's more, the biggest thing for me was like the mental clarity of just being on not being in a bit of a fog a bit of a days all day long. Where if you want to be a better developer focusing on your fitness is absolutely something that you need to do. So check it out@deadlifts.io and thanks so much to them for sponsoring. - -22 -00:19:48,320 --> 00:20:19,230 -Scott Tolinski: Nice, cool. Yeah, so I think you know, part of it so far is what we're getting into is really that we have the the person who's collecting really narrow skills and related skills And then you have the person who's collecting every single skill that they could possibly have. And maybe like, collecting all of them isn't the right idea, right? Maybe, maybe it's like, it's not like pugs, or Pokemon or something, you don't want to collect all the skills, you want to collect the ones that are all grouped together. And related. - -23 -00:20:19,260 --> 00:21:20,600 -Wes Bos: Yeah, yeah, I think if you're gonna be a generalist, be a generalist with skills that lend themselves together. So I think more and more the, the whole front end versus back end is kind of shifting or moving. Because a lot more logic is happening on the client side, like, it used to be that you would you would write, like, I don't know, 40 lines of jQuery for a website, and you would have a couple sliders and whatnot, and it would be okay. But now more and more the entire, like interface logic, everything is happening in the browser in JavaScript. And then you might have some stuff on the server side as well, you might have to spin up a graph qL server. So I think both of those things are getting a lot more complicated. So if you are going to be having some sort of skills, I think, having skills that lend themselves and you'll be able to transfer from one to another, I love being able to have good JavaScript skills, and then jump onto the back end, jump into the front end being able to understand what's going on over all the the spots there. - -24 -00:21:20,640 --> 00:22:27,270 -Scott Tolinski: Yeah, I think that's one of the reasons why people were so confused. When node took off in popularity, like some back end, people were confused, because they're like, I don't want to do more JavaScript code. If you think about it, it's one way that you don't have to learn something else, I don't have to become a PHP master now to write JavaScript code, or back end code, because I can transfer some of those skills and abilities that I had in JavaScript language over to a whole nother area, right? It makes it bleeds that line between this this sort of back end and front end. Because before, like back end, people were really good at Python, or Ruby, or, or PHP, or any of these server side languages that were like sort of the classical way they worked on the back end. But now since we have access to JavaScript, in the back end, it allows this this blur, ending, blurring, blurring, blurring is a word. Yeah, it allows this blurring of different topics like that. So again, like you said, the front end back end is become a little bit more broad. So let's talk a little bit about maybe some of the front end skills and some of the back end skills and break them into individual skills. - -25 -00:22:27,719 --> 00:23:33,900 -Wes Bos: Awesome. Yeah. So I think with the front end, you can, even inside a front end, you can specialize because as things get more and more complicated, both on the front end and back end, we're starting to see people specialize in just specific parts of of doing the front end. So you could be a specific framework specialist, you could be the React person, the view person, you could be really into Angular, you could be I think, even right now, there's a huge market for Angular one developers, there's some of these companies have these massive applications that have no hope of ever being moved off of Angular one, just because of how large they are. And I often get emails of people asking like, hey, like, Can who do I hire for Angular one Dev, or I need some tutorials for Angular one stuff, because our application is still on Angular one. And we need someone to to help us out. So it's kind of funny, because there's even with any language, like even COBOL, there's people that still are really good at COBOL and get paid handsomely. Because there's not a whole lot of people that specifically do it. So I guess that's a little argument for specializing in a technology that is not so hot. - -26 -00:23:33,960 --> 00:23:34,650 -Scott Tolinski: Yeah. Right. - -27 -00:23:34,650 --> 00:24:16,380 -Wes Bos: What else? What else on front end CSS you could be an expert on. On CSS, there's certainly a lot of people like I think of someone like Harry Roberts, CSS wizardry, who just goes into all of the big companies around the world and schools them on how to structure their CSS how to best approach things, how it works, right, like you think you think like, oh, CSS, it's easy, or something like that. But no, once you start writing enough of it, you need an expert to really lay things out on how it goes. Other things, performance animations, there's all these little kind of like tree branches of front end development that you could really just focus in and be the expert on that one thing. - -28 -00:24:16,469 --> 00:25:20,820 -Scott Tolinski: Yeah. And then again, if you're the expert, you're going to get paid to do some really interesting jobs, you hear about people that get hired to come in and evaluate a CSS on a large application, and then go in and end up removing, you know, 10s of thousands of lines of code just because they're looking at it from a expert perspective. And we're able to see patterns and stuff that will maybe they're the team wasn't because they didn't have the people who had those, those those hardcore CSS skills, right. So again, that's all big stuff. But imagine you're also the animations person, right? Maybe you you go in there and you know how to get 60 FPS animations, you know, inside and out. And next time anyone has a big animation stuff, that's a that's a whole thing in itself. And especially because the will the animations in the web in general are just growing constantly the the amount you can do on the web for for that sort of regard with with normal HTML, JavaScript, stuff like that. And there's a whole other worlds of things like Web GL and canvas and writing games. In the web tech, I mean, there's just so many things, their - -29 -00:25:20,850 --> 00:25:57,390 -Wes Bos: back end as well, we'll go through this real quick web servers, you might be really good at scaling servers, or I think now it's more the people that know how to manage serverless functions, manage boxes on AWS, were you able to scale up those types of things, different frameworks on the back end, you might be really good at Express for one of the other node frameworks, performance databases, Docker, continuous integration, there's so many different areas on this. And like we said earlier, if you are a specific expert on one or two of these areas, you you better bet you're going to be the person that that you call to come on over. - -30 -00:25:57,510 --> 00:26:21,660 -Scott Tolinski: Yeah. And I think part of that, too, is probably making yourself known as the expert of that, like if you are an expert in so and so I would not be afraid to toot your own horn in that regard. And say like, I'm the expert in this rather than I'm a web developer, right, I make this happen. I make 60 FPS animations. Well, you know, while I'm in my sleep, sort of thing, you want to be able to pump your tires a little bit like that. - -31 -00:26:21,780 --> 00:26:49,620 -Wes Bos: So yeah, I was always afraid of doing that. When I was in WordPress, I was like, oh, if I say I'm really good at WordPress, I mean, people are not gonna they're think I'm garbage, everything else. And I think that's important thing is that being an expert at one thing just shows that you're willing to like, hold the torch of that technology. And it means that you're probably really good at it. And you likely are also good at other things. And don't think people are gonna think like, oh, it must be garbage at doing something else. - -32 -00:26:49,650 --> 00:27:52,770 -Scott Tolinski: Yeah, absolutely. So let's talk a little bit about it. Like you had like a camera, you have your focus, right, when you should narrow and widen your focus, like when should you widen the these things to learn more things? And when should you narrow it to learn less things? When are you too crazy so so you want to widen your focus when you are complacent in your mastery, when you feel like you've learned everything in this like bug for learning is sort of going away. And you're not necessarily as excited about the WordPress stuff anymore, because you just you know it inside and out front and back. There's almost how much more WordPress stuff can you do? Right. So at that point, you might be thinking, Okay, it might be a good opportunity to learn a skill, that's going to make me a better WordPress developer, or a better developer in that realm. But not directly necessarily related to WordPress itself. Maybe you're going to learn about server management or something to get your site's performance better. Or maybe you're going to learn about database administration, so that you can do better migrations or things like that. - -33 -00:27:53,009 --> 00:29:27,750 -Wes Bos: You think anytime that you need to get something done is probably the best time to widen your focus and pick something new up, you got to pick the best tool for the job. So whenever you run into a specific problem, you take a step back and say, What would be the best tool to actually solve this problem? Instead of saying these are the skill sets that I currently have? How can I like mash my skills into making this actually work? So I've talked to lots of people who have conferences who say, yeah, our stack is c++ or stack is Ruby, our sack is Python. But we have this specific part of our application that does X, Y, and Z. And node is really good at that. So I talked to someone who ran a company that does captions. And they said node is really good at streaming in this video node is perfect for streams. So when we had to build out this part of our application, we we switch to node for that, or we're doing a whole bunch of machine learning on generating titles for ads. There's this app I've been using called let go. And you take a picture of something you're selling, and it will try to like machine learn from the image what it is. And I always thought that's really cool. I was like, maybe they're like database and back end. And an API is built in Node. But I bet that the machine learning part that looks at an image and figures out what it's in I bet that's built in like Python or something gnarly like that. And that's really good for being able to, I don't really know anything about that. But Python. Doesn't Python sound gnarly, - -34 -00:29:28,050 --> 00:29:31,200 -Scott Tolinski: it's gnarly name because it's a snake. I mean, that's pretty sweet. - -35 -00:29:31,290 --> 00:29:35,010 -Wes Bos: Yeah, I'm gonna do it in Barracuda next time. Oh, yeah, I - -36 -00:29:35,010 --> 00:30:39,390 -Scott Tolinski: need a barracuda language. I mean, another good opportunity to widen your focus is for fun, right? Maybe you just want to get a little bit different perspective on things. For instance, you know, I was bored at my job, and I had completed all of my work. That was the hardest part for me of working at an agency that was in the university was that they'd be I'd be like, Alright, the site's done. They're like, well, this isn't due for like, eight more months, and I'd be like, Okay, great, I guess Just not doing anything for eight months, then like, give me something else to work on. Because they were just so slow, they were so incredibly slow, right? So in that time, I needed something fun to do that was sort of productive. So I picked up Angular, which led to actually a career dirt, not a career change, but a Job Change eventually. But I, you know, at that point in time, I was doing WordPress sites day in, day out, and the whole front end framework thing was still a little mysterious to me. I picked up that new skill, which was front end JavaScript frameworks. And then, I mean, I didn't pick it up because I had to, I picked it up just just for fun just to play around with and I loved working in that sort of environment. So that's ended up where it shifted the general course of my career from that. - -37 -00:30:39,750 --> 00:30:46,500 -Wes Bos: Alright, let's talk a little bit more about the opposite, which is, do you have a camera methodology here of narrowing your focus? - -38 -00:30:46,530 --> 00:30:48,150 -Scott Tolinski: Will you just narrow the focus? Yeah. - -39 -00:30:49,740 --> 00:30:50,250 -Wes Bos: Okay. - -40 -00:30:51,750 --> 00:30:52,920 -Scott Tolinski: That's the camera metaphor. Yeah. - -41 -00:30:52,920 --> 00:31:47,670 -Wes Bos: I was setting you up for an amazing metaphor. Oh, yeah. There was one scenario. Guys, I'm better than that. Anyways, when should you narrow your focus, I think when you when you don't feel control over your skill, so I see this a lot, specifically in beginners, but also in existing developers who have maybe been a little bit complacent for a couple years, and you sort of look up and go, Whoa, everything is moving, everything is changing. If yes, sex and react and graph QL. And, like, it seems like almost every single tech people are using is has changed in the last two years. And if you're sort of feeling that way, it's I think it's best to folk pick one thing and focus down on it, because there's absolutely no way that you're going to be able to, to get good at all of these things. So just pick one thing, double down on it, build a whole bunch of stuff in on it. And and I think you'll start to feel a lot better. - -42 -00:31:47,880 --> 00:32:29,760 -Scott Tolinski: Yeah. And then also might be because like, maybe you have applied and you've gone into several different interviews, and these interviews are for react, and you come in there been like, Yeah, I know, react. I know, Angular, I know, view. And they're like, Okay, well explained to me this about react, and you're like, huh, yeah, that so and then maybe you're missing out on these opportunities, because there's very specific knowledge you're missing out on and, and that's a good indicator that you become too general in these things. So you really want to then narrow down into maybe just react or whatever you're interested in, pick one, become a master at it, and then go back into that job interview and see how well that goes for you, it's gonna be totally different. - -43 -00:32:30,180 --> 00:33:09,210 -Wes Bos: I think another great way is if you want to narrow your focus is if you want to become one of these people, if you want to go maybe the consulting or freelance route, where you want to be the high dollar consultant for someone who is good at this one thing. And if you think you can, sort of take react performance and run with it, if you think you can take be the accessibility person who does these amazing reviews, if you can, you can be the CSS code base person, then I think you should take that and run with it. Because if you like the idea of just having a very small, narrow focus and going deep on that one topic, it's absolutely a good spot to be in. - -44 -00:33:09,300 --> 00:34:14,900 -Scott Tolinski: Yeah. And lastly, I had the same one for when to widen your focus. But for fun, like, if you want to, if you find again, CSS animations, or web animations, or any of that, in particular, if you find that particularly interesting or exciting, dive into it, go further, go deeper, enhance, enhance those skills. And like really, really nail those down. Because it's not going to get less fun, the better you get at it, it's most likely going to be more fun, though, the better you get at it. So again, if you if you get enjoyment from one thing in particular, feel free to run with that. Wes just wrote in our notes here, you know what else is fun? He's setting me up here for an add transition. But I think we should be more or less talking about like when you should get some new and fresh skills, and that you don't want to necessarily have to rely on his bookkeeping skills and accounting skills. It's better that you get a software that does it for you, or not necessarily for you, but helps you do it in a better way. That leads us to our sponsor this week, which is Freshbooks. - -45 -00:34:15,230 --> 00:35:40,860 -Wes Bos: Yes. Freshbooks is the small business accounting software that makes billing painless. So Scott and I both send lots and lots of invoices to various customers specifically, there's tons of invoices, I send them for the sponsorship, I send Freshbooks a sponsor invoice for sponsoring this podcast, which I think is pretty funny that I send it on Friday. Thank goodness, I you. Thank goodness I use fresh books otherwise that would be awkward. I wonder if they ever decline invoices from from other things. But anyways, if you want to send a whole bunch of invoices out if you want to send quotes out if you want to manage all of your clients see where your money is. One of the things I use it the most is figuring out who hasn't paid us yet. So every week or two Go in. And then I'll say like, who hasn't paid us yet. And we'll either use the Freshbooks service, which will automatically remind them that they haven't paid. Or you can send a little follow up email, say, hey, just to let you know, I see that you've seen the invoice because that's another tricky thing. Freshbooks does, it tracks if you're if your clients have seen the invoice, and then it will, you can send them a little reminder saying, hey, make sure you pay this thing. It also does expenses, all of your taxes at the end of the year, you can get a good idea of where your business at at any time from their software. So check it out@freshbooks.com forward slash syntax and use syntax in the How did you hear about us, you're gonna get a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring. Nice, cool. So - -46 -00:35:40,860 --> 00:37:27,110 -Scott Tolinski: I think we've already touched on this a little bit, but I think it's worth elaborating on. And this sort of this sort of mastering something and then expanding upon that. And I like to, like reference this as sort of like satellite skills, right, these sort of skills that are, are sort of circling around the skill you're learning, for instance, you're really good at CSS, well, maybe it's time that you if you would like to grow your CSS abilities, you would take on things like CSS preprocessors, and get really good at those or take on things like design system and understanding how you can improve your CSS and via design systems, or how you can just have a greater handle on the system overall, with your CSS by learning about different strategies for these design systems. Or maybe again, you want to be so good at CSS. And part of that is CSS animations and transitions, you're you're adding on these skills that are are related and are very similar to CSS overall, in general, and might even be in the CSS language, but they're going to just build up your further ability further your abilities in that regard. Another one could be like, if you if you are really good at WordPress and would like to remain a WordPress Master, you'll know that Gutenberg and some things in WordPress are going react. So maybe you want to pick up react now and get good at react. And maybe you want to get better at writing WordPress plugins. So you pick up PHP and you start getting heavy into PHP, or maybe even his basic database, administer it. Or maybe it is server management. And you want to figure out how to tune your server so that it runs your WordPress sites to the best of it. Again, all of these satellite skills are going to work together in harmony I have written here, too, to make you a better developer in that regard. - -47 -00:37:27,270 --> 00:38:40,920 -Wes Bos: Exactly. This is how I approach all of my things. Like I don't even know if I'm a specialist or a generalist, but I do know that this is how I tackle learning things, I will take on it technology, I will master it, I will get pretty good at it. And then I'll sort of look up and then figure out what do I need next. And then you learn another thing. And then you look up and you learn another thing. And before you know it after five years, your breadth of skill is very vast and very large. And you you all sudden feel comfortable at many different technologies rather than looking at someone like me or someone like Scott and saying, Okay, well, I need to learn graph qL, but also also MongoDB. But also express but then I heard expressed is not good. And then I heard this thing and then you're like just get overwhelmed with all of the possible options that you could take, when really you should just focus in on one. And that's even with react is you should not learn react and Redux at the same time. We've talked about this many times over, you should just learn react, and then look a little bit bigger than learn some routing, and then go a little bit bigger and learn about state management and then go a little bit bigger and figure out how do I hook this up to a back end and then go a little bit bigger and say, How do I write my own database? resolvers? And you get the point, right? Yeah, - -48 -00:38:40,940 --> 00:42:10,980 -Scott Tolinski: yeah, absolutely. So I again, I think this is just sort of, I mean, I love the little heading you had your master and expand that that's what you want to do you want to focus in, you want to expand, you want to go from there. So I figured I would talk a little bit about, you know, my my personal journey as like a full stack specialist or a developer in general, because I personally struggled with this topic a lot. And you know, I don't know, back in one of our first episodes when we did our origin stories, I talked a little bit about this, but I was trying to do everything right. I had huge issues with narrowing my focus in general this is before I even decided that I wanted to be a web developer, I was trying, I think my my website said that I was an audio engineer, a graphic designer, a videographer, a motion graphics artist in a web dev altogether, I wound up with all of those hot skills, I wound up being an accountant for a record label. So that's that's where getting a generalist gets you because, you know, nobody wants to hire the guy that does all that stuff. Because, you know, I'm not I wasn't good at anything in particular. I just wanted to do all that stuff. So, Courtney, my wife was basically like, Listen, like what do you want to do? Because you're not doing anything. You're doing too many things. You're you're being an accountant. Obviously, you don't want to be an accountant. So like, what do you really want to do and I looked through all my skills and I did a little bit of an audit to say like, what are the things that satisfied me the most. And in general, it's the problem solving aspect of web development. So I said, Okay, I'm going to take this, and I'm going to go with it. And I focused 100% on web development, not necessarily realizing that it's a gigantic topic. But I just focused on little things like building sites for clients in WordPress, right. So I picked that one little thing, and whether is WordPress, or Drupal or anything like that, I just started focusing on those skills in particular, without knowing it and really like buckled down on foundational HTML and CSS stuff, right, the the foundations of the time of good front end code, were essentially being able to do just solid HTML and CSS and a little bit of jQuery here and there, right. So for me, I was always starting with a little bit of a narrow focus and not necessarily realizing it. And then as you grow, maybe you expand a little too much and expand a little too much. And you need to focus down, I always found it was really helpful to really focus down on whatever I was doing at any of my particular employer. So my first employer hired me because I was a good junior developer level, like I could do HTML, CSS skills really strong, but I hadn't done a whole lot of back end or Drupal there any of that stuff. But at this location, that's pretty much all they did was Drupal. And what they soon found out is that if I would apply myself specifically to Drupal, I would get really good at Drupal really quickly. So I would apply myself 100% to that thing, because that's what we were doing all day at work. My next agency job was all WordPress. So I applied myself hardcore to WordPress, and became really good at WordPress. My next job was with Angular, I applied myself 100% do Angular. And then now I have a node back end and a react front end. And that's all I really focus on. Right, I'm not going off and learning Ruby right now. Because why bother, I'm getting better at JavaScript, I'm getting better react, I'm getting better at all of the stuff I need to. But it's narrowly focused within a group of skills that I need to have right now. So I started out very, very extreme on the one of the generalist side and found out that didn't work and narrowed it down to the point where I know what I'm working on and know what I need to be working on. - -49 -00:42:11,400 --> 00:43:04,170 -Wes Bos: I just thought I wrote a couple notes here cuz that that made me think about like, generalizing sort of like you did, we'll help you figure out really quickly what it is that you don't like. So I think like, if you are just starting out in your career, trying a whole bunch of stuff and sort of generalizing in it is maybe a good idea. Because really quickly, it will show you what you do and do not like like when I first started, like I when I went to university, I went to school for technology, right? And that could have been hardware technology software, that could have been like, technology management, right? Those were kind of the three areas that a lot of people went to focus in on. And then I had a bunch of CO ops in that. And I realized that like I didn't like I realized that I did like software. But I didn't like this specific type of software. I was working in ASP running a whole bunch of day I would write all these DB report, what is the Microsoft database thing called? - -50 -00:43:04,350 --> 00:43:07,460 -Scott Tolinski: No SQL Server, no. SQL - -51 -00:43:07,460 --> 00:43:18,980 -Wes Bos: Server, whatever the Microsoft, my school thing was, I was writing that and I realized, like, I didn't like that. And then I did a, I was writing I think c plus plus c something C sharp. - -52 -00:43:19,020 --> 00:43:22,440 -Scott Tolinski: Yeah, I sort of worked out a lesson I hated it. Yeah. - -53 -00:43:22,610 --> 00:44:49,200 -Wes Bos: Yeah, I was worried. I think I think I hated it, because I didn't really know. And then have a proper introduction to programming. But I was writing like, this is funny. I was writing like, visualizations, and were the tanks, I used to work at an island gas company, and the tanks would fill with gas. And then you'd have to write like a visualization, the issue is show you how full the tanks of gas are. And then, and then do something if the tanks are too high, which is kind of interesting. And I realized I didn't like that either. I didn't like the sort of the culture and I liked working for myself, much better. So then then I was like, always doing web development on the side. So I realized, okay, I definitely like software. And I definitely like doing stuff for the web, because that's where my, where I really like to focus on. And then once you get into to that I was like doing WordPress, but I was also doing Drupal. And I was also doing Joomla, all at the same time. And I realized, like, this isn't too long. No, there's still a conference for Joomla, which is really crazy. So it still has like a, a fan base of people using it. So I figured I'm just gonna focus in on WordPress. And then once I had mastered that, I said, I looked around and said, well, it'd be also really nice if I was really good at JavaScript, because I'm starting to write a lot more JavaScript on the front end. So I focus on that. And then that led me to doing Angular. And that led me to switching over to react. So that whole like, Master, and then look around and say, what's next, I think is, is the way that my entire career path has gone. - -54 -00:44:49,440 --> 00:45:26,130 -Scott Tolinski: Yeah. Well, I think that that segues really nicely into the next section, which is titled What should I focus on because we both talked about like our little journeys that we learned, like how we learned what we wanted to Focus on. And I think this is like a really interesting part of this. This episode here is like, what is this? How did you figure out this stuff? And obviously, we both sort of did it through a little bit of trial and error. And I think that's like really what it needs to happen. But like, what are some ways you can think about it smartly, that you can pick things to focus on? specifically? If it's not just so I want to waste a bunch of time trying these things? or trying to figure this out? - -55 -00:45:26,190 --> 00:47:11,220 -Wes Bos: Yeah, I always hate answering these questions to people, what should I focus on? Because they're sort of putting their entire career in your hands? Right? And and you sort of have to be like, well, little bird, let me push you out of the nest. And you will find your way, right, like any any advanced developer, anyone in their career, can look back at their career and be like, how did I get here? Well, it was just a lot of stumbling around for many years. And I sort of figured it out. And that's why how I got myself here, and, and people who are new to it, say, like, tell me Just tell me exactly what to learn, and exactly what to do. So these tips now, I think are going to be as close as we're ever going to get to telling you exactly what you should do. So first tip, necessity will dictate a lot. What do you need to know right now? So what is it that you're building, if you have a job and are building a specific type of thing in your job, or you're starting to see, oh, we're starting to take on projects that are very heavy in specifically in something not react with help on that's probably something that's probably a time where you should learn a little bit of react. Another tip I have is job postings are a great way to figure out how you can stack the deck in your favor. So people are always going to tell you like should I learn react, or Angular or Ember? And the answer to that is, it doesn't matter. But what you want to hear is that learn react right now, because that's what everybody's asking for six months from now, it might not be. But if you want to stack the deck in your favor and just get a job, that's a great way to just sort of like keyword clickbait stuff, your, your application where you have it. And then once you're in, you can learn anything you want. And you'll be able to transfer those skills from one to another. That's we've talked about that many times. But stacking the deck in your favor is definitely a way to go. - -56 -00:47:11,340 --> 00:49:38,460 -Scott Tolinski: Yeah, I mean, looking at job postings, and knowing what's in demand is such a huge thing. And we just answered the state of the JavaScript survey that comes around every year by Sasha grief. And I love that survey. Because again, it lets you know where the industry trends are headed. And a lot of that stuff ends up being what's hot, and what's looking to be hired. And if you're on top of those skills, you're going to be ready and waiting to be hired. Right? If you were if you put all your chips into backbone right now, not to say you won't be able to get a job writing backbone, because I'm sure there's a lot of apps still using backbone, right or Marionette are one of those. But like, it might not be the the smoothest way to find a job because maybe there's not the most backbone postings that there's ever been before. Again, a lot, the ways that we sort of did it is we just sort of, we did a little bit of all of this stuff. We did it based on what we needed to do at the time. But we also followed our heart a little bit, which has some caveats here. Because I have a funny story about this that actually relates pretty well for SB oh four or spring break, oh four was like my senior year spring break. And we were just me and the members of my band, we were just going to drive to the Outer Banks. And I think it's in South Carolina or North Carolina, I'm sorry, Carolina ins who live in the Outer Banks, I got that round. But we just started driving. And we were maybe like halfway, we were maybe in like, halfway there sort of across the United States. And this is before cell phones that had GPS, or even, we didn't have a GPS unit. And one of the members of our band asks the driver, hey, what's the ETA? Or what do we do next? Or where are we going next? Or what's the route look like? And he goes, Oh, I don't know. I thought you knew. He's like I told you to print out the map. And then you said, I'm just going to follow my heart. And we all thought he was just joking when he said he was going to follow his heart. And sure enough, we were we didn't have a map. We didn't we had to go we had to stop into like a gas station and get a map. I mean, it was like that era of time, because we didn't have any of this stuff. We just assumed he was joking this whole follow your heart thing. So you want to follow your heart, but you want to follow your heart with some bit of direction, whether or not that is these job postings or whatever. Again, if you see all these job postings for a database administrator, and you're like not interested in that, then don't, don't do it just to you know, shove a square peg into a round hole sort of situation. Again, just you know, you want to follow your heart but you want to follow it with a little bit of a map. - diff --git a/transcripts/Syntax77.srt b/transcripts/Syntax77.srt deleted file mode 100644 index 9e78fc497..000000000 --- a/transcripts/Syntax77.srt +++ /dev/null @@ -1,44 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,330 -Unknown: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, and Scott. - -2 -00:00:23,610 --> 00:00:24,570 -Totally at ski. - -3 -00:00:25,950 --> 00:01:04,590 -Oh, welcome to syntax. In this hasty tree, we're all going to be talking about something that, you know is very important in our community that I think often goes under looked and that is positivity and how it can affect both you your work your organization and everyone around you all the communities that you are a part of. So this is syntax, the podcast with the tastiest, tastiest webdevelopment treats coming in. And with me, as always is West boss. What's up everybody? Hey, I am Scott Dylan ski. And Wes and I were just talking this is going to be a fairly hasty, hasty treat. - -4 -00:01:05,730 --> 00:05:00,000 -We were saying that that some of the hasty treats have gotten a little tastier than hasty or lately, so this one might be not super fast, but it's gonna be trimmed down. And what we're gonna be doing is just really diving into how positivity can affect you in your workplace, your communities, all that stuff. This episode is sponsored by a new sponsor the show and one that is really super cool. You're all in one, check out his native script, if you have not heard of native script, it is, well very much akin to other tools like React Native or something like that. But let me tell you why it will. It allows you to build real native apps using either Angular view, or vanilla j s. So you're not locked into a specific platform. You can use Angular view, you can use TypeScript, you can use normal JavaScript, and you can actually build native apps, you know, some tools like PhoneGap, or Cordova, what they do is they throw your stuff in a web, it's like a web view, right? In the in the application. It's actually like a little mini browser. And the application just allows you to connect to API's on the device. Well, native script is not that this is actually building you into real native device, you get native performance, you don't you it's not using web views like that, you're actually using real device API's. It's cross platform. So you can deploy to iOS and Android, it is just really super cool. And you know, one of the things we love about Native script, like so many of our other sponsors is that is 100% open source. So it's 100% open source, it's free to use and it's easy to learn. So head over to native script.org forward slash syntax and get started today. Seriously, it native script is a great way to take your front end skills and move them into real native app territory. This is I love stuff like this, because it's the convergence of what we already know, with some stuff that is difficult to do. And it makes everyone's lives easier. So native script, has a great website, lots of great documentation, check it out. Native script.org is super, super cool. Awesome. So let's jump right into it. We're gonna be talking about positivity in our web development industry. And you might think that's a little bit cheesy. But as Scott said, I think it's really important thing to, to get into and to understand. I'm also often very proud of the web development industry and our community that we have, because we're often like, I feel like if I compare our industry to some friends who work in other industries, I think we're on a bit of a forefront in terms of pushing for things like mental health awareness and, and now and positivity. So we saw we talked about last week, which is StackOverflow has has changed their ways because people have been complaining for years about about all of the negativity and the way that people approach these questions. It's funny because Scott messaged me this morning and said, Hey, what do you think about doing signing on positivity as a hasee? tree? And I said, Oh, yeah. Did you see the Linus Torvalds stuff? And he said, No, what? And it's perfect timing because Linus Torvalds, I think, as I say, Torvalds he's the guy behind Linux and get right like, he's the guy that created Linux. That's why Linux is called Linux because his name is Linus. Yeah. And then he took some time off and built this thing called Get that everyone and use this. So obviously, a huge, huge figure in the industry. And he sort of had this reputation as like he's obviously an absolute genius, but he's had this reputation of not being the most nice guy he's had the reputation of not being very empathetic as to driving people away, that are in the industry and just being very, very brash, very aggressive, very, I would even go as a to be mean to others. - -5 -00:05:00,000 --> 00:10:00,000 -members of the community. And it's funny because we have this word for people who who run these open source projects called BD FL benevolent dictator for life where somebody who just like runs the project for absolutely forever. And it's the people have sort of excused it for a long time because he's such a genius. He, you kind of say, oh, like, Oh, that's, that's Linus or I get like he made Linux. I guess he can be a dick. Right. But Steve Jobs, same treatment, too. Because Yeah, I mean, you heard about that book that his daughter wrote that it was horrifying. I mean, he Yeah, Dick. Yeah, absolutely. So he came out with this letter on on the the Linux kernel mailing list, which was, I want to apologize for people that might behavior, personal behavior that has hurt and possibly drove people away, I'm going to take some time off and get some assistance on how to understand people's emotions and respond appropriately. So I think that's amazing that he stepped up and said this, I think it's really cool that our industry has drove him to understand that it's not okay to to be this even if you are this genius, because like I'm just thinking about like, there's so many open source authors out there that are like a Dan Abramov comes to mind. Immediately, where, obviously genius, amazing. He's one of the lead devs behind react, he has this amazing story about how he didn't know how to program. If you ever listened to his story on a couple different podcasts. It's amazing. And now he's like, one of the core devs to react. And he's the nicest guy in the world. And I think that he's the perfect example of like, a genius, running a very popular open source framework catches a lot of flack from people who have opinions to throw at them. But still, they'll push us forward in the nicest way possible. Yeah. And I mean, you don't have to go very far outside of like GitHub issues to really see the problem occasionally, when people will just come in and just be rude to one people that they're using software that they're not, they're not paying these people to use their software, but they're acting like they're entitled to all of these things, right. And if it doesn't go 100% correctly, for them, they throw essentially a temper tantrum and a GitHub issue. And I would not have the restraint that so many of these open source maintainers have, it's it's unbelievable. Sometimes when I see somebody leave just an extremely rude comment about essentially what is your your hard work, and then they come in and respond very rationally, very reasonably. And sometimes the other person will come in and apologize or something like that. But like, really, it's it's so impressive. It is like a very, I don't know, it's a very honorable skill. It's one of those things that you can only just be appreciative that these people exist that have these abilities, because otherwise it could just turn into a shouting match. And so many times on the internet, it does when people you know, get behind their keyboards and their fingers start tapping, everybody gets a little bit of a no, it is, yeah, it's like a little bit a little bit fiery and fiery, you can probably point the finger at me in no time. Because, like, I know, I've been there many times, if you are having a bad day, or you're being piled on on the internet, sometimes, like, I have 140,000 Twitter followers, and if you say something that people don't agree with, or something that is slightly wrong or out of line, then you get piled on, right. And it's not always the intention of everybody. But the fact that 300 people do it can not, that's not a normal thing to have. And you can sometimes let a little snarky tweet go or say something that you may have regretted it. And I think that's like positivity is something that I'm always striving for in the development industry, because I think that like I see some people who do it to a tee. And I think that it's such so good for our industry, and so good for pushing the web forward. Yeah. Again, it's I don't know what it is without like communities. I mean, whether or not it's Hacker News, or it's Reddit, or it's Twitter or whatever, but when communities of people get together and just start dogpiling. Like, I feel like it might be a good opportunity, anytime you see that dog piling going on, to just stand up for anything, right just to be like, Listen, is this really is this really necessary to be this aggressive? Or to be this angry about something right? That honestly probably doesn't matter? Yeah, yeah. I often see that like, oh, I'll chime in. I like pull Twitter up on the weekend. And I'll see people fighting about CSS again. And CSS modules and whether it's a good idea or not, I'm like, what, what are you doing, like, go build something, go do something constructive. Some people just love to. It's not my personality to have conflict. It's not my personality to forever debate something. I'm very much - -6 -00:10:00,000 --> 00:14:59,910 -Have the personality be like like, Fine, go, I don't care what you use. And this is what I'm using and like, like, I care about why you think that this is the wrong way to approach it. Because obviously, you're likely a smart person to have some good opinions. But when it turns into something where people are just kind of piling on and trying to argue their point to the death, there's a certain point where it just kind of walk away like fine. Live your life, you do you joke, me and my wife always always have each other when, when we don't agree with each other. We just say you do You are laughing? Like, what's gonna win this? Yeah, but just do you live your life to the fullest? Yeah, and whoever wins, I know, this is you're not you and your wife on argue on the internet. But whoever wins internet arguments, like nobody wins internet, are you? No, no. And the only people that do are the people who are charismatic enough to inspire the other person to change, you're not going to win anything by being aggressive, or by being angry, or by being rude. Like, and I get it. Some people even just do it to troll because they want to get a rise out of other people. But like, yeah, that's the world you want to live in, where everyone's just like, aggressive and rude to each other all the time. And like, I get no, yeah, right. People could then take that and be like, Okay, well, this generation is getting soft, or something like that. But like, dang. And like, I just I want to I want to live in a world where people are nice to each other. Like, I want to, I want to see that. You know, I don't it's not that I can't take negativity, it's that I, I'd rather see positivity, on the same point that we're not saying that everybody has to be nice and like, not ever approach something and not ever disagree with someone, because that is how our industry moves forward is that we have discussions about the best way to approach something. And I think that there's very healthy ways to to approach it like another really good example I have right now is john David Dalton, who's author of lodash. And he was very controversial when he came out with lodash. Because underscore already did that. But right now what's happening and like, I think he did it very in a very respectful way. And I think what was cool is he's working on one of the most controversial things right now, which is trying to figure out how to get ESX modules into node. And if you haven't followed this, it's this huge thing where if you want to be able to import and export, like you are doing in browser code, there's a whole bunch of gotchas in how common j s, which is the export default and import that works. It's, it's there's all these trade offs. And he's working on this thing called ESM, which is basically just showing that it can be done. It can be done properly without having these trade offs. And, but he's also on the the the committee that is trying to figure out how to do this. And he's making sure that like, I want to hear from node authors, I want to hear from browser authors, I want to hear from people that aren't necessarily so invested in the JavaScript community, but maybe are a little bit outside. I think it's the best way to approach something that's so controversial, rather than just having a huge tweet storm about why you think something like he's leading meetings and and actually writing code to see if we could solve this in a certain way. So it's really interesting to see that and I think it's very healthy for the community. Yeah, no, definitely. Hey, I, you had a really nice little note here, which, which is like, never assume malice. And this just like, Yeah, really. I mean, anytime that Courtney and I ever have an argument, by all means, we don't even argue that much. But when we do, it's almost 100% of the time because of just some miscommunication. And like miscommunication This is between two people talking in real real time, right? But think about how how many of those human sort of elements are left out of a conversation when you're on the internet, right? And so oftentimes, you're not picking up on body language, you're not picking up on tone, you're not picking up on sarcasm, and and it's easy to miss communicate in real life, just imagine how much more easily it is to just have these miscommunications when you're talking with no tone or any of that sort of stuff. So don't always assume that the way somebody is saying something is, you know, coming off harsher or aggressive or whatever, unless of course, they're personally attacking you, then you can probably assume that they're intending to do that. But like, no, for the most part, like I don't know if you've ever read two sentences, like I could read the same sentence on two different days and on one day, I'm having a terrible day and other day I'm fine and I can read the sentence and I can't give an example off the top of my head but like, okay, here's the here's a good one. Here's a total like, some viewer could comment on my video. your background is blue, and I could respond. Oh, it's blue. Hmm. You think it's blue? Like I have a bad day like is it is grayish? Like I could get really angry but no, like, or I could read that. Yeah, it is blue. Like it just totally depends on your mindset, how you interpret these things. And and if you always just assume - -7 -00:15:00,000 --> 00:15:42,390 -The best rather than for the worst, at least as much as your possibility, then I think, like interactions just become that much easier. Totally. I get questions all the time where people say, Why didn't you use Redux? or Why didn't you use x, y and z? So you could read that as Why didn't you use Redux? You idiot? Or the question is almost always, hey, curious, why didn't you use Redux? Because I would love to hear your opinion. I value it. And I think that would be interesting to hear why you approached it in such a way. And that's almost always the second way. Yeah, I can, like quickly read a tweet or quickly read, especially if it ends in a wink that always gets me for some reason, in a way, like a big FAQ, you know, it doesn't - -8 -00:15:43,560 --> 00:15:49,590 -like finger emoji. Yeah. But it's it's so funny because like the person that's, that's like, saying, it might just be like a little, - -9 -00:15:50,940 --> 00:19:59,970 -like, trying to be funny with me. And you always have to, like, read something over a couple times and be like, I understand. And we talked about a couple episodes ago, where if someone doesn't speak English, they might not know how to properly phrase something. And like, I'm sorry, they obviously speak English. But if the English is not the first language, all of that can be lost. All of that can be thrown up that are never mind all of the stuff that is lost just because it's the internet. So definitely something to think about when you are interacting with someone online. Almost always they are in coming from really good space. Yeah. And if you are on the person, like the side of the person asking that question, like, do keep that in mind. If you're asking Wes why he uses Redux. Maybe don't throw in the word idiot or like, like, Don't Don't make it aggressive. Right? If you actually want to get an answer, that's the whole thing. I'm not convinced that the people who are that rude like, actually want an answer. I think they're just yeah, to be like a look at what I know, kind of thing. And again, what is that doing? That's not doing anything for you? It just makes you look bad publicly. So I don't know. Yeah, keep that in mind when you are asking questions, if you like, actually want an answer how this thing could be perceived. Let's go ahead. And let's go ahead and talk a little bit about I don't know, I think one of the things that I'm so impressed with occasionally is, again, people that I see on a public spaces, whether or not these are celebrities, or other developers, or people who are just really good at maintaining sort of like a positive outlook and things is that they always, essentially RS inspiring people to be better, right? They're inspiring people to change, even the people that are aggressive and rude to them, instead of responding back with rudeness, or aggressiveness, they're responding in a way that is going to make the person who came at you with that heat, it's gonna make that person feel bad for coming at you with that heat. So I think that's such a big thing is that you want to you want to be the person that diffuses the situation if there is is a fire and you want to inspire people to want to be better? Absolutely be the Be the change you want to see. Is that the that's the saying inspired the change that you want to see. Yeah, I think that like that, that's I really, really important to see, because I think that the as much as the negativity is the disease, I think that positivity is very contagious. And if we sort of all work together to to make it to change the tone of voice, whether it's GitHub or Twitter, or, or whatever it is it like even just even just conference talks, sometimes people see people slamming, slamming specific technologies, or I once said at a talk and I said, like, no one uses just CSS like as like, like, I was trying to like, explain, like, I was thinking I was doing a tooling talk, you know? Yeah, like, I was like, so so many people use CSS, or so many people use sass or whatever, right. And I was like, no one uses CSS. And then like, people got all angry about that, because they're like, well, I use CSS, am I a garbage developer? And I had to, like, be careful. Like, obviously, that's not what I meant. I was, I meant to say that a lot of people use pre processors. Yeah, and I didn't mean any malice from that, but people got all up in arms about it. And which is funny because and even especially if you get like a, someone takes a picture of just one slide out of context and, and tweets that out, and then people will gang up. It's thankfully never happened to me, but it's something that can really happen. And it is almost never the intention. So I think if if that was something like that, figure out the intention, and and and try to be positive, but inspire the change that you want to see. Yeah, I mean, your example was just so good because almost everything that you're going to say that's like going to slam something else could be more effective if you take the opposite approach to like, re raise up the things that you support, rather than to put down the things you don't support. Totally, totally awesome. I think that's it for today. If you have any other tips or also if you if you know anyone in the industry. I have some here Chris coiour Addy, osmani, Sarah dresner all these people I look up to and say like you - -10 -00:20:00,000 --> 00:20:43,140 -are amazing for the amount of the amount of heat that you much cut, the amount of conversations you're pulled into. And just handling it really, really well i think is amazing. So if you know of somebody who is awesome at that, make sure you tweet it at syntax FM, because it's it's also worth that these people should hear that they are doing a good job, because it's likely that they've made a decision at some point in their life to push forward this positivity. Yeah, absolutely. Cool. Well, I think that's it again, be excellent to each other and just finish it off on a bill and Ted quote there. But yeah, I don't have anything else that this is a pretty hasty, hasty treat. hasty. Thanks for tuning in. And we'll see you Wednesday, whose face - -11 -00:20:44,970 --> 00:20:54,750 -head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax78.srt b/transcripts/Syntax78.srt deleted file mode 100644 index a9077b0e9..000000000 --- a/transcripts/Syntax78.srt +++ /dev/null @@ -1,516 +0,0 @@ -1 -00:00:01,319 --> 00:00:03,660 -Unknown: You're listening to syntax, the podcast with - -2 -00:00:03,660 --> 00:00:04,590 -the tastiest web - -3 -00:00:04,799 --> 00:00:10,530 -development treats out there. strap yourself in and get ready to live ski and West boss. - -4 -00:00:10,559 --> 00:00:31,289 -Wes Bos: Oh, welcome to syntax today is a potluck episode where we answer your questions. I love these episodes, because it's a we're gonna be covering all kinds of stuff JavaScript questions, React questions. A lot of them are actually JavaScript related, but web development in general. I'm really excited about it. Welcome, Scott. How you doing today? - -5 -00:00:31,319 --> 00:00:44,880 -Scott Tolinski: Hey, I'm doing super good, ready to get this potluck going. I love these episodes, we get to cover a lot of ground. And yeah, if this is your first time listen to this podcast. By the way, we never do this. But this is the syntax where we? Well, once a month we - -6 -00:00:44,880 --> 00:00:45,600 -Wes Bos: do these - -7 -00:00:45,689 --> 00:00:58,799 -Scott Tolinski: potluck episodes where users are listeners, they go ahead and they can submit their questions on our website. syntax.fm. And if we deem your question to be good enough, we will put it on air. - -8 -00:00:59,369 --> 00:01:03,479 -Wes Bos: And we're sure well, do you do anything fun this weekend? No, - -9 -00:01:03,509 --> 00:01:41,070 -Scott Tolinski: no. Landon was sick. Again. He had a he had a fever for the second straight weekend. I have this like tailbone injury that is just not healing. And I'm just going nuts about it. I hurt my tailbone like months ago, and it's just not healing. So I'm just, I'm just not getting to sit down a whole lot. That's really just did. So we didn't do a whole lot. No. And we just took it nice and easy. I actually it was actually pretty nice because I have a hard time not working on the weekends. And I didn't work this weekend, although I did deploy on Saturday, but I didn't work a lot this weekend. So that's pretty good. - -10 -00:01:41,579 --> 00:02:31,050 -Wes Bos: Awesome. Yeah, I went to I live downtown Hamilton, which is kind of this up and coming half a million people it's like a people call it the like Pittsburgh or the buffalo or the the Brooklyn which is a bit of a stretch of Canada. Kind of like it used to be old steel town. And now it's full of artists and musicians and stuff like that. And breweries and beards and stuff like that. So we have this once a year, or once a once a month we have this thing called Art crawl where they the main strip is just like all of the artists are out showing their wares. And all the galleries are open. And there's bands playing. And then there's super crawl once a year, which which was this weekend, and there's bands playing and vendors and cool restaurants are all open. It was awesome. So we went out a couple times and enjoyed that I was big, big fan of that cool. - -11 -00:02:31,280 --> 00:03:13,740 -Scott Tolinski: We actually got out of the house for the first time and who knows how long cuz we don't we don't have a lot of support out here like our families don't live out here. And we don't know a whole lot of babysitters. But we we had one of Courtney's coworkers babysit for us and we got to actually go out. And we went to this. It was like a charity concert for the foundation that is like so Courtney is She's the director of this Testing Center for Mental Illness and mental disabilities. And so basically, she The foundation is putting on this like Big Show. So we got to go this VIP party and have some open bar sort of stuff. And yeah, it was pretty good. The concert was interesting. I'll just leave it at that. Oh, that's - -12 -00:03:13,740 --> 00:03:42,090 -Wes Bos: awesome. Today's episode is sponsored by two awesome company. The first one is sanity@sanity.io n m lab, which is a MongoDB. database hosting and Sanity is a sort of back end as a service. We'll talk a little bit more about them partway through this episode. So first question we have is Scott and Wes, would you ever considering doing a live syntax show? grant? Well, Grant Yeah, absolutely. We've been saving this question forever. Yeah. - -13 -00:03:42,090 --> 00:03:45,630 -Scott Tolinski: Was this question asked? That's what I forgot. When this question. - -14 -00:03:46,169 --> 00:03:46,830 -Wes Bos: Pull it up. - -15 -00:03:46,880 --> 00:03:48,720 -Scott Tolinski: It was asked a couple months ago. - -16 -00:03:49,380 --> 00:03:54,060 -Wes Bos: Oh, 107 28. July 1, first of July. Yeah. - -17 -00:03:54,090 --> 00:04:01,530 -Scott Tolinski: So we've been looking at this question for a little bit. Because we certainly known about this live show since this question was asked Netlify. - -18 -00:04:01,710 --> 00:04:25,640 -Wes Bos: We are doing a live show at jamstack calm, which is put on by our friends at Netlify. Scott and I are going to do a live show there which is going to be really fun. We've got some really fun stuff being cooked up right now for it. So if you are free, October 29 to 30th, head on over to San Francisco and grab your tickets at jamstack. Coffee calm. I think it's gonna be really fun to hang out and to meet everyone. I've heard from a lot of people already that bought their tickets. - -19 -00:04:25,680 --> 00:04:28,110 -Scott Tolinski: Yeah, I'm so pumped. I'm very pumped. - -20 -00:04:28,320 --> 00:04:46,980 -Wes Bos: Next question we have is what are your thoughts on flutter? Does React Native have some solid competition now? And my answer to this is what is flutter one back 10 years ago, flutter was a WordPress plugin that was like the first the UI for custom fields, which I'm assuming that's not what it is. So Scott, what is flutter? Yes. - -21 -00:04:46,980 --> 00:05:19,440 -Scott Tolinski: So flutter is basically Google's answer to something like React Native. Basically, it allows you to build native apps using flutter which is like Mobile App SDK here. It's not using react or anything like that. It's its own thing. It's basically a nicer, more friendly environment for building cross platform applications. I believe the language is Dart. Yeah, yeah. Is it just Dart though cuz it looks like - -22 -00:05:19,640 --> 00:05:32,010 -Wes Bos: make your app come to life with platform API's. Third Party SDK is a native code flutter lets you reuse your existing Java swift and Objective C code across native. That's the same as React Native, you can use native stuff on the native platform. - -23 -00:05:32,040 --> 00:05:48,300 -Scott Tolinski: Yeah. So it, it converts to native code. And both both platforms. I believe the language here is pretty much is just Dart, it says you don't need previous experience with Dart or mobile programming. So it sounds like the the main way of using this is with Dart. - -24 -00:05:48,510 --> 00:06:27,030 -Wes Bos: And we should explain what it what Dart is really quickly. So Dart is Google's like many, probably five or six years ago, Google came out with this thing called Dart, which is a their hope to replace JavaScript. It's a typed language. And it sort of fixes it looks a lot like JavaScript. But it sort of fixes all the stuff. And it never really had huge uptake, specifically in the web development world. Their hope was to put the Dart VM right into Chrome, I think it even was for a little bit. I don't think it's any longer. It does compile the JavaScript if you like. But it's kind of the same idea as TypeScript, except that TypeScript has really taken off in web development world. - -25 -00:06:27,060 --> 00:07:19,770 -Scott Tolinski: Yeah. So we'll let her take React Native seat, I don't know, I actually think something like native script, who is actually one of our sponsors. Now, this is not a sponsor spot here. They're not paying for me to say this. I feel like it has to be said, but I think native script might be a lot closer to taking that role than something like flutter. flutter looks awesome. I don't know what the numbers are like, I haven't dove into the numbers of how many people are using what All I know is that I do hear people talking about Native script a little bit more than I hear people talking about flutter. And maybe it's just because of the Dart barrier to entry vers JavaScript thing. But in my opinion, yeah. A tools that allow you to build native apps with web tech is it's sick. It's sick no matter what. I love it. So this looks great. I might try to use it at some point here. We'll see. Yeah, keep an eye on it. - -26 -00:07:19,830 --> 00:07:58,860 -Wes Bos: Yeah, it's it's pretty interesting to me as well. But I don't think especially in like our circles, which is very JavaScript heavy. And you you have the option to use TypeScript. If you want some type, things like that. I don't think that there is a huge benefit to it unless you see something huge come out of it like, like performance gains, or any of the any of the problems that maybe a React Native has in some situations, but I tend to find that people either use React Native, or if they don't, they have problems with that, then they just go and code the actual native thing. So I will keep an eye on it. Who knows? In a couple years, it might be but also Google just shut down some more stuff. So a couple of weeks ago, - -27 -00:07:58,890 --> 00:08:28,140 -Scott Tolinski: yeah, I had that note on here. Yeah, I would be potentially worried about Google being the forefront of it that said, like, I don't think they've dropped other things like they haven't dropped Polymer. They haven't dropped some ones that have been around for a little bit. But you know, with Google's, I don't know, their frequency of killing off projects. It's one of those things that yeah, if Google stopped maintaining flutter, would it ever get off the ground as an open source project? I'm not quite sure. So who knows? Yeah. - -28 -00:08:28,320 --> 00:08:54,120 -Wes Bos: Yeah. It's something to think about before you pick it. I've definitely been burned. And he definitely seen the people who were on what's the alternative to Firebase parse. People were on parse for the longest time that got shut down. People are a little bit. Firebase seems to be going really strong. And it seems to have huge a push from Google. And it seems that they're always pushing people towards Firebase. I wouldn't be too worried about that. But there's always that kind of, what if this goes away? Yeah, they - -29 -00:08:54,120 --> 00:09:05,370 -Scott Tolinski: just shut down fabric. That was, what was fabric Fabric is a platform that helps mobile teams, build better apps, understand your users and grow your business? That's pretty much what I know about it was - -30 -00:09:05,580 --> 00:09:06,090 -Wes Bos: just that me? - -31 -00:09:06,090 --> 00:09:16,159 -Scott Tolinski: Yeah. Right. I know, you think that people would get better about doing these homepage sentences to tell you what the thing actually is. Like, that's marketing fluff. That's some fluff. - -32 -00:09:16,200 --> 00:09:40,909 -Wes Bos: Yeah. I don't know what it does. But they shut it down. Not cool. It says we're integrating the best of fabric into Firebase to give you a powerful platform. So I think that they had some sort of Crash Reporting built into it. And they're gonna push that into Firebase. But I don't totally understand how that all works. But who knows? We'll see I don't you generally use a whole bunch of Google open source stuff, but we'll see. We'll see where it goes from there. - -33 -00:09:41,190 --> 00:09:49,320 -Scott Tolinski: Word. Okay, cool. We next one we have here is from Alan from Falmouth. Mouth foul mouth. thau. - -34 -00:09:49,350 --> 00:09:53,070 -Unknown: Model mouth sounds like foul mouth. Yeah. So foul mouth. - -35 -00:09:53,659 --> 00:10:45,720 -Scott Tolinski: He does. Yes. Ellen. Ellen asks, What are your website Security Essentials? For static and dynamic sites, what's the deal with forms? Is it bad to put a form on my site with no server side validation? Yes, it's bad to put a form on your site with no server side validation, because client side validation is great for users. But it's not like preventing anything all it does the pert like, it makes your life better for the users, right? Because now they can get like a validation messages on the front end without having to actually even hit the API or take that time to hit the server. Right? So client side validations are great. They're nice little like fence here. But you can still hop the fence. And if you can hop the fence and submit a form with anything in it that no good, so you need to have server side validation on your forums. - -36 -00:10:45,840 --> 00:12:41,640 -Wes Bos: Yeah, you can't even do anything with those forms. Unless you have a server side, right? That was the thing when we were teaching HTML, people would build a contact form and they go, Okay, now, how do I how do I make it work? And then the sad answer was always like, we'd have to sign up for something like wufu, and then make a wufu form and then try to like, surgically move the pieces of wufu over to the form that they had built without taking any of the styles and in logic along with it, it was always kind of interesting there. So forms are a bit of a tricky one. I know there's a bunch of services out there, if you are building just even past sponsor Netlify, they have a form solution as well, because that's one of the sticking points if you're building a static site, forms are often one thing that you will need there. In terms of security, what are things, some things you can do, we actually have a whole security show coming up just on like little things that you can do to protect yourself, but real quick things like limiting requests per IP address, I specifically do that on my signups for my my free courses. So if someone starts hammering it from an IP address, then it will only allow I think it only allows you to do like two requests per 10 minutes or something like that, which is sometimes a problem because I often get emails from people who are trying to make their entire class of 30 students sign up Oh, and they can't, because it's all in the same IP address to stage opt in for if you're doing an email list. CSRF CSRF tokens if you want to ensure that requests are actually coming from a webpage, rather than just a random API captures is another really good one, Google has this invisible CAPTCHA now, which is pretty good. Or you can just click, I'm not a robot, and most of the time, it won't make you do any of its machine learning for you. Except if you're on a VPN, and every single time It makes you do it. And they're super slow. Because if you're on a VPN, for some reason, it just assumes, like, it just assumes you're a robot. So then they it gives you a really long fade out. And it's like 10 second fade out, and - -37 -00:12:41,640 --> 00:12:49,110 -Scott Tolinski: I'm just like one to throw my computer out the window. But yes, but when it works, it's worked. And when it doesn't work, it makes you very upset. Yeah, - -38 -00:12:49,110 --> 00:12:50,309 -Unknown: sir. Some other ones that - -39 -00:12:50,309 --> 00:13:26,610 -Scott Tolinski: I had a good one, while you're thinking is just to obfuscate what the platform is one of the things that I remember, I went to like a Drupal conference back in the day. And they're like, the best way to make Drupal not get hacked is to one Besides, you know, keeping everything up to date, but it's to hide the fact that it's Drupal. Because if your attackers know what they're trying to attack into, then they have a whole list of tools in their tool belt to get into something. So if you hide the fact that whatever the platform is, if it's a WordPress or whatever, if you hide that it's WordPress, then you give those people less ammo ahead of time to even know where to look. - -40 -00:13:26,760 --> 00:14:28,860 -Wes Bos: Yeah, you still have to make sure you're secure. That was one of the thing people didn't WordPress as they just removed the WordPress version meta tag, and then they thought they were safe. But you're still gonna get hacked. If you have unsecured website in there. I can't forget what the other Oh, CloudFlare that was it? No, yeah. CloudFlare will, will often block they have this CloudFlare is really smart about knowing who CD actors are or bots. And they will often block that. Or if you are hammering a website, they'll often like put a little breather 10 seconds in between, for you. So if you use CloudFlare, which is I'll explain what it is real quick. The way that CloudFlare works is that instead of pointing your DNS to your server, you point your your name servers at CloudFlare. And then you tell CloudFlare what your server is, and it sort of sits in the middle. And will it'll give you HTTPS, but it will also stop DDoS attacks, which is one of the more common errors that you can have, or one of the more common things and CloudFlare has a really good free, free tier. - -41 -00:14:29,070 --> 00:14:36,899 -Scott Tolinski: Yeah, cloud cloud flares. That's a hard thing to say cloud flares free. flare is a excellent Yeah, absolutely. Excellent. - -42 -00:14:37,140 --> 00:14:46,200 -Wes Bos: Hey, we should we can all stop putting the word cloud in business names because every time I need to type in cloud flare, I sit there for two minutes being like cloud something. What was it again? - -43 -00:14:46,799 --> 00:14:50,549 -Scott Tolinski: cloud front cloud flare? Yeah, yeah. Yeah, absolutely. - -44 -00:14:50,880 --> 00:15:35,039 -Wes Bos: Okay. cloudinary Yeah. Next question. We have from Dan Boswell. Cool. Last Name Dan Boswell. Do you have a goatee? to stack when building new web apps? If so, how would you go about choosing the right stack for the project? pS syntax is my favorite podcasts to listen to on the way home from work. Thank you. Oh, thank you, Dan. Boss. Well, it's actually I'll mention really quick, it's cool to see people post photos on Twitter or Instagram, have them listening to syntax, like what they're doing. So sometimes people are sitting at their desk. Sometimes people are taking it, they take a screenshot of their phone. Sometimes people are sitting in their car. I always like the car ones, because I like to see, what does the syntax art look like on your car's entertainment system? - -45 -00:15:35,279 --> 00:15:37,320 -Scott Tolinski: Yeah, definitely. Love it. - -46 -00:15:37,549 --> 00:15:39,480 -Wes Bos: So Scott, what's your go to stack? - -47 -00:15:39,659 --> 00:16:43,649 -Scott Tolinski: A Miko to stack is so it depends. If I'm doing like a client site that I might have used WordPress before. They may might maybe they need a back end. Maybe they don't need a back end. But either way the contents not going to update that fast. I'm going straight Gatsby every single time. I love I love the static site generator. I love how fast the sites are, I get so many comments about how fast certain things are with Gatsby. So if I'm building sort of like a static site, I'm going Gatsby, even if it's like a blog or whatever. Yeah, if I'm doing a site that needs like dynamic data, db stuff, user accounts like a little bit more intense, my stack of choices, probably a little bit different than a lot of people's but it's a meteor with Apollo with react, and it uses Mongo on the database, I haven't found a stack that is as fast to get up and running with a lot of essential features is this, because account systems baked right out of the box, everything sort of just works TMS, you know, trademark just works. I like it, - -48 -00:16:43,649 --> 00:18:52,380 -Wes Bos: I like it a lot. I'm somewhat similar. I usually in the last probably two years, I always reach for next .js on the front end over something like create react app, just because next jazz is a it's a react platform. So you can build a react application in it. And you just get up and running immediately. There's no tooling setup, which is like the bane of my existing is getting tooling set up. And then it also comes with a router. So you don't have to configure a router, it's just you just go to a page and you make that folder reminds me much of my PHP days where if you wanted a forward slash about you created an a folder called about and or you created a file called about dot PHP is very similar in next chasse. On the back end, I'll I'll reach for Express. And either I will just use MongoDB, or I've been using this package called disk DB a lot lately. And it just saves the files to a text file. Because a lot of the stuff that I do it just cook up a quick little example, I'm working on a workshop right now for fitc conference in Toronto in a couple of weeks. And the workshop, we're building a react application. And I needed like a back end for something really simple, right? But didn't want to have to go through all of the pain of setting up a database, or in the case of MongoDB, I would actually use something like m lab, but then you got the spotty conference Wi Fi, which you can't guarantee that the Wi Fi is going to work. So if that's the case, then you're screwed because you have no database. Yeah, so I like to run something local that is not hard to set up. And that case, I'll reach for disk dB, which is just a text base. And it has like the find, and save and update and all of the methods that you're used to from MongoDB. Or if it's something that's like a production, I'll either just use MongoDB and express or I'll use Prisma like in my upcoming react course I use Prisma and graph qL yoga, which gives you a graph qL back end. So that's that's usually what I reach for. It always revolves around react and express. Yeah, it because I love Express, there's so many middlewares available for it. I know it really well, that's a huge one. I just know a cold. So I'm really comfortable in it. - -49 -00:18:52,469 --> 00:19:21,350 -Scott Tolinski: Yeah, I know, I actually have the copy of my production DB locally for Mongo as well as in the cloud. So if I ever want to work on my dev site, without the internet connection, I can just fire up the local DB rather than the the remote one. But if I am using the remote dB, you can best believe I am using em lab, which is one of our sponsors today. And yeah, that was the easiest transition of all time. - -50 -00:19:21,989 --> 00:19:23,360 -Wes Bos: Because I was not even planned. - -51 -00:19:23,400 --> 00:19:54,540 -Scott Tolinski: Yeah. I mean, honestly, Wes and I both use em lab to host MongoDB databases. And it just makes everything so so easy. Going along with some of those security concerns that some of these questions that we'll even get to later on in this episode, go. If you're not hosting the DB yourself, there's just so many less things you have to worry about. Right? You don't have to worry about how you're setting it up securely. All you have to know is that how you can connect to it securely. So with a little bit more about him lab is Wes. - -52 -00:19:54,830 --> 00:21:43,440 -Wes Bos: Yeah. So if you are building an application that needs MongoDB like I just said It can be a little bit tough to get MongoDB running on your local computer. In my own node course, I use m lab just because like I show people how to get it up and running. But then I say just use m lab because it shouldn't get in your way. Because you're trying to learn react, or you're trying to learn Express right here, we're not trying to learn how to like, set up Docker containers, or set up the proper permissions or how to get brew installed, and oh, no, you're on Windows, just sign up for em lab, they give you a string, you can create a username and password and they can connect to that directly. So if you're building anything with MongoDB, I definitely recommend that you check out MongoDB. And then in production, I highly recommend you use something like MongoDB because of backups, security performance, like have you ever wanted to be in the situation where your database doesn't scale. And that's someone else's job, right, and you're a full stack Dev, I don't think that that's really going to be in your wheelhouse as understanding how to scale up databases, right, they have this really cool slow queries analyzer. So every week, I get an email from them. And it tells me, these are the queries, here's how many times you've run them in the last week, maybe you should add some indexes here, here's how to add the indexes. And then and then it'll speed up your actual website, they have a telem entry tool, which it gives you real time and historical data about your databases and the underlying VM, things like connections, number of operations, index efficiency, CPU usage, all of that stuff is is brought to the surface for you. So again, check it out at m lab.com ML ab.com. If you are trying to host some sort of MongoDB database. Nice, Cool, thank you for Emma for sponsoring it again, - -53 -00:21:43,440 --> 00:21:51,150 -Scott Tolinski: it always goes back to services that we know and love and use ourselves. So I'm really always just happy to see those services sponsor the podcast. - -54 -00:21:51,570 --> 00:23:42,360 -Wes Bos: Next question we have here is from Anthony Campos, what are your thoughts on the 100 days of code challenge? A big fan of this, I actually didn't know about it until people started tagging me on Twitter. So if you got 100 days of code calm, it's pretty simple. It's the official challenge for someone who wants to code for 100 days straight. And there's only two rules a code a minimum of an hour a day for the next 100 days. And second, tweet your progress every single day with the 100 days of code hashtag. So I love this because it it basically follows exactly in my whole mantra to getting good at web development, because people ask all the time, like how do I get better at x, y, and z? How do I get it? And the answer is always just Just do it. Just put in the time. Just keep building stuff, whatever it is that you're going to be doing. So the hundred days of code, what it does is that you commit for the next just over three months, every single day, I'm going to at least one hour, I'm going to learn something, I'm going to build something, I'm going to read an article, whatever it is that you're doing. And then you're keeping yourself accountable and commit creating community by tweeting out with the hundred days of code hashtag. And it's really cool because I get tagged every single day, I get probably like 2030 people tag me and say like, today, I watched a Wes Bos YouTube video today, I worked on the Wes Bos react course today I and the reason why I got hooked into it at first is because I think at that about the same time that I launched my JavaScript 30 days of learning JavaScript, this also launched and people were like, perfect, that's 30 of the hundred days already. I just have to do one of these a day. And I thought it was amazing. Because it's right along with anything. Like you just have to build stuff every single day, even if it's an hour, even if it's just an hour, and you're involving yourself within the community around your thing. It's just the best way to get better at this stuff. So yeah, what do you think, Scott? - -55 -00:23:42,420 --> 00:24:24,570 -Scott Tolinski: Yeah, I think the the key terms out of this, there's the consistency and the accountability. Like if if I'm looking to accomplish anything in my life, consistency, and accountability are two of the core things that need to be there for me to actually do it. Right. You want to be consistently working towards your goal, you take these little steps at a time, and eventually you get there, right? And then you have the accountability to say, Hey, did you take your steps today, blah, blah, blah. So it's awesome. It's it's inspiring, and it's awesome. And it is definitively if you adhere to it, it's going to make you better at whatever you do. So 100 days of code challenge, really super cool. Yeah, a plus. - -56 -00:24:24,690 --> 00:25:00,930 -Wes Bos: I'm just looking at who's behind this is Alexander Calloway, who is from Toronto. And it looks like he also was involved in Free Code Camp, which is pretty cool. And a dev at pilot, which is pilot is a like an agency from Toronto. And it's actually one of the companies I tried to get a job at when I was first starting and I didn't so if you I don't know if you hear this Alex let them know that they really let me down and never gave me a job when I was trying to get a co op in school. That's actually cool. That's a local local connection there. - -57 -00:25:01,200 --> 00:25:01,890 -Scott Tolinski: Nice. - -58 -00:25:01,890 --> 00:25:02,460 -Unknown: Cool. - -59 -00:25:02,460 --> 00:27:35,220 -Scott Tolinski: Okay, so this next one was asked by a couple of people, which may be the first time that we've had people ask me nearly the exact same question here. So this is by Eric, Eric Zorn. And the question is, I have been learning a lot about react recently and wondering, what's the difference between next js and Gatsby verse vanilla react? And then another question from Alex Nielsen. It says, plain old react next, Gatsby, etc. When and when to use each one. I'm confused exactly what they do with their use cases are, can you give me some ideas about the best choice? So nearly the same question of vanilla react versus Gatsby verse, next, j s. So out of the box, vanilla react using create react app is just front end code allows you to build sort of dynamic react sites get up and running easily is a great starting off point. That said, I think there's probably better platforms for building production applications immediately, which would be something like next j s, which gives you all sorts of additional features into react along with sort of like built in routing, and server side rendering. And it's a really great like full stack, well, not necessarily full stack, but server side and client side, React platform, right. And then lastly, you have Gatsby j s, which is a static site generator as and you write all your stuff in react, and adjust spits out HTML and JavaScript, and you end up having some blazingly fast sites, a hashtag blazing. But when you would use each one, personally, if I'm going in production applications, I would probably choose if it needs to be dynamic. If the content needs to be dynamic, it's changing a lot. It's more maybe more interactive sort of stuff, I would probably pick next js, if it's a blog, if it's a site that's not changing all the time, or maybe even something like the syntax website, where content comes in twice a week or something like that it could be triggered with a web hook rebuild Gatsby is is pretty sweet. Because you don't have a server side component loading your stuff. It's just loading HTML and JavaScript. It's super duper, duper fast. And you get all of the benefits of a server side rendered application. It's a little bit more simple. Not to mention Gatsby has that suite graph qL built in integration. So for me, I would probably reach for next j. s, if it was a little bit dynamic. And the site was the content was a little bit more dynamic. And I would probably reach for Gatsby if it was a little bit more static. - -60 -00:27:35,400 --> 00:27:54,900 -Wes Bos: Yeah. And that's not to say that you can't do dynamic stuff in Gatsby either, because a lot of your logic can happen in the browser. And if it happens in the browser, then you can still do it in react. Yeah, that's right. That's true. Right. Actually, Scott, just run that by you is that Gatsby still ships react, or does it just ship HTML to the browser shift? - -61 -00:27:54,900 --> 00:27:55,620 -Scott Tolinski: react? - -62 -00:27:56,040 --> 00:29:11,790 -Wes Bos: Yeah. Okay. I think so. Yeah. So you can still have all of because with a lot of these static site generators, it just spit out HTML and CSS. But this will still spit out react, which means you can still do a lot of the a lot of your logic in it. Um, yeah, so I'm a big fan of next JS myself. But it's still a fan of Gatsby cuz it gets me as a lot of adapters. It has this whole like community of adapters, where you can like pull from WordPress or something like that, which is pretty interesting as well. Next, jazz isn't really anything all that special, like, it's my go to thing, but it doesn't do much past routing, it comes with it for free. And server side rendering, or it has this specific lifecycle method that adds called get initial props, and we'll get initial props will do is it's an a synchronous lifecycle method that will wait until that resolves, like let's say you needed to fetch some data. And that will not go from the server and send it to the browser until that data is back until that is resolved. So they do have a bit of overlap. But again, like Scott said, a little bit more dynamic. Next even has its own export feature available as well, like Gatsby does, but I think Gatsby is just the the king of or the queen of doing what's called static site generation. Yeah, yeah. It's - -63 -00:29:11,790 --> 00:29:13,680 -Scott Tolinski: a it's a sick platform. It's really great. - -64 -00:29:14,160 --> 00:31:01,980 -Wes Bos: I got these wicked Gatsby stickers sitting right here, Gatsby. And by the way, we should try sell these out. Gatsby has this like, amazing online store. You buy them? It's like very. Yeah, I bought the stickers and the T shirts were like 10 bucks, and they get shipped to Canada. Yeah, it's like a really nice t shirt. Like, even if you don't like Gatsby but you'd like high quality t shirts. Just buy one because it was like black on black, which is my jam. And the stickers were really cool. Yeah, they got 10 bucks for like a wicked Gatsby t shirt. two bucks for a six pack of stickers. Yeah, I think they're pretty shipping. Free. Yeah, the socks to what and and they also if you if you contribute to Gatsby open source, you get free swag. Uh huh. But usually Login with your GitHub account all that's the best. You log in with GitHub and it checks if you've committed to Gatsby and then get free swag. That is such a cool way to do it. I love that you integrate it into the store, and also the store owner what they're using for for their checkout. I think it's Shopify. Yeah, it's Shopify. So anyways, that's a bit I'm going to click the Gatsby stores is something to look at. If you're interested in learning how to build a store. It looks like it's open source as well. And the checkout, the checkout portion seems to be done in in Shopify. Nice. Cool. Yeah. Super cool. birdie sick. All right, next question we have, what are WebSockets? And when should they be used? Yes, I like this question. And WebSockets are pretty interesting to me. And it's I think WebSockets is the reason why node initially got some of its popularity is because WebSockets and node both came out around the same time. So a WebSocket. You can think of it if you think of the internet as a series of tubes. And - -65 -00:31:02,010 --> 00:31:02,910 -Scott Tolinski: yes, please do. - -66 -00:31:04,920 --> 00:32:00,480 -Wes Bos: You let's say you've got a REST API. And you've got, you've got Wes on one end of the tube, and you've got a dog API and the other end of the tube, what I'll do is I'll shout down the tube, oh, can I have some dogs, and that is my request down to the API. And then what will come barking back up the tube is is the the dogs, right? And those are considered two separate requests, I initiate the request, I have all the headers that go along with the requests, and then I send it and then the vice versa when the request comes back. So that's your standard pinging of, or pushing and pulling of data to an API with WebSockets. What it does is it allows you over TCP, it allows you to just maintain an open connection, which is just like you think of it as a pipe where you can at any point in time, send or receive data through this. I mean, picture me with my two fingers up right now and just yeah. - -67 -00:32:01,019 --> 00:32:03,360 -Unknown: Mmm. It's like your air drying with two fingers. - -68 -00:32:03,660 --> 00:34:25,650 -Wes Bos: Kenny? Yeah, picture me air drumming right now. Yeah, those are requests coming back and forth over there over. The benefit to that is that it's it's instant. Meaning that we don't have to, we don't have to do the whole request building base every single time that you have a request, there's this overhead of creating the request, setting all of the headers on that request and then sending it whereas with WebSockets, that that connection is always open. And you can send and receive data at any time. So it's instant. It's it's real time, there's not the overhead of having the headers on there. And I think the most important thing is that you don't have to wait for data. It's based on events. So what you'll do and check out socket IO, if you're if you're interested in learning about WebSockets and node, it's really easy. But you essentially just say like, you have a chatroom, you say chatroom WebSocket, on message. And as soon as you get a message, it's like a it's like listening for a click on a on a button, except you're listening for data on a WebSocket. And you'll immediately get that data, you can immediately push it and then other people who also have a connection to that WebSocket will be able to you still have your server in the middle. But you built a funnel data from one web socket to another almost instantly. Yeah, I've used it in the past with real time drawing. So I did a I think I've told that I tell you the story about the dentist No, in the past No. So I built an application once where we dentists would upload x rays. And then we would draw on the the dentist would draw on the X ray. And then you would have a an expert like a specialist dentists on the other end drawing on it and they'd be on the phone. And they'd be drawing on top of those extra cool. And what we did is we use website, I actually got the job because I did a little YouTube video of real time Canvas WebSocket drawing, and they're like, Hey, we need this for teeth. So it was cool, because you would have two people on the exact same time. And if the internet connection was good, like there's there can be latency. If you're on really poor internet, then everyone would see whatever I was drawing in real time on top of this. And I was just sending data about where the user's mouse was. And if they were drawing what type of like all of the stuff that is related to Canvas. I just sent all of that back and forth between the WebSockets. And then they would be drawn onto the diagram in real time and then saving it to a database. Nice. - -69 -00:34:25,680 --> 00:34:51,920 -Scott Tolinski: Yeah, so basically, the answer is for when is real time you need to do real time. Yeah. WebSockets real time is one of the it's like one of the coolest aspects of the web, I think is this real time thing. And I remember back when Code School was cranking out content, they had a really good course on WebSockets. With node we built like a chat app. And it was just really, really exciting to be able to do stuff in real time like that. So yeah, that's pretty much it. - -70 -00:34:51,960 --> 00:35:13,500 -Wes Bos: I should say Firebase is based on WebSockets and that's why in my my beginner react course react for beginners, calm check it out. The reason Why it's instant is because that's built on a WebSocket. So we simply just save some data to state. We use that rebase package that mirrors it to Firebase. And then Firebase is a WebSocket connection and will immediately update it wherever else it's used. - -71 -00:35:13,710 --> 00:35:59,460 -Scott Tolinski: Yeah. Cool. So this next question is from Seth winters. And this is going to be a really quick answer says, Hey, guys, I love the podcast, I would love to hear your take on progressive web apps. I have done some research. And I'm curious if either you had any experience with building or using them. And Wes is currently manipulating the paper here to try to get me to try to throw me off my game can throw me after the game. I'm in the zone right now. The answer to this question is listen to Episode 50, progressive web apps, which pretty much answers all of your questions. So syntax.fm, forward slash flow, show forward slash 050, forward slash progressive web apps, just just do a command find for progressive web apps on the page yet, Episode Number 50. And, - -72 -00:35:59,460 --> 00:36:00,300 -Wes Bos: yeah, - -73 -00:36:00,300 --> 00:36:02,760 -Unknown: just just listen to that. That's the tip, - -74 -00:36:02,940 --> 00:36:19,130 -Wes Bos: fun tip on the on the syntax website, you can just go to forward slash show forward slash 070. And you can put anything as a slug, and it will still work because the slug is just there for SEO. And it's not actually specific to to the URL and finding the show when you visit it. Oh, - -75 -00:36:19,190 --> 00:37:15,810 -Scott Tolinski: okay. Word Up. Now, you know, now, you know. So sorry, Seth, for that quick answer. I mean, there's a whole episode devoted to it. So you'll get a longer answer there, we made a made quick work of that one. And if you want to make quick work of hosting your data, and having a back end, you're gonna want to check out sanity.io. Sanity is, as they say, structured content done, right. So it's sort of a bring your own front end content, you could call it a content management system. But it's really just a back end for your data. It takes care of all of the stuff that no one likes to do. Like it takes all of the complexities out of setting up an API, and allows you to just get going with some work. It's lightweight, pluggable, it's real time it's open source. And it's it's just like a it's a joy to use. They they're just they put together a little demo for us with this thing. And let me tell you is slick. - -76 -00:37:15,900 --> 00:39:21,650 -Wes Bos: Did you see the most recent addition to it yet? Scott? No, I'm gonna do it. Right just opened it up. Oh, my gosh, Kay, sign in. While I talk I talk a little bit more about, it's not just another content management system, because we all have 1000 different CMS is in and it will spit out something on on the front end. And you're good, right. So what it allows you to do is you can create all of your different content types. So for our podcasts, we created, episodes, hosts, sponsors, and actual podcasts. And then each of those are have their own content types, they all have their different types of input. So you have your text input, and URL input and rich text input and an image output. But you can also make your own inputs because it's all based on react, you can just drop in a react component and use that as the input. So it's kind of cool because it is a service that allows you to host your own, but you can also customize what the actual inputs look like past just doing your standard image, text, rich text, all of those, you have relational data. So you obviously we can have a podcast that's related to episodes which each episode will have hosts and sponsors. And then they have this like query language called groke gr o q, which allows you to query your back end and you can use any of the standard things that you're looking for. So you can do things like fuzzy matching or greater than less than includes the text, you get the point right. And kind of the best part about that I had is that if you go to our syntax studio, which is the what they created for us to show, show us how this works. If you click on the logo, it pops open the it pops up in a when App Player Oh, quiches. Yeah, this is so it basically they pulled in every single episode. They also have CLA import. So if you have data that's somewhere else, like an RSS feed, you can import that into Sanity, which is what they're doing here. But he basically just rendered out the entire winamp skin. And then just like the query the list of episodes, and you can you can listen to the entire syntax episode from this when app react component, which I think is hilarious. It's - -77 -00:39:21,650 --> 00:39:35,360 -Scott Tolinski: awesome. Yeah, I even just when I hovered over the logo on the logo to this little shake, I was like, all these gets the best. And then I clicked on it. And I was just like, this is just great. So love this Sanity is just awesome. It's a great service. - -78 -00:39:35,360 --> 00:40:01,770 -Wes Bos: Yeah. So if you're building any type of front end website, and you just slap together back in really quickly, or you want to build a production ready application, check it out. sanity.io we actually just got an email from them, saying they want to sponsor more episodes, which means that many of you are checking it out, which means that many of you are actually sticking around and using it so you are clearly liking it. So Thanks so much to Sanity for sponsoring. - -79 -00:40:01,860 --> 00:42:33,920 -Scott Tolinski: Yeah, I Oh, and also it goes along a little bit with some of the stuff we were talking about with Gatsby. There's a Gatsby source sanity plugin. So if you're using Gatsby, it's gonna fit right in there to then make it nice and easy to query off your stuff. So that's pretty cool. So this next question is from Jared Keown. Thank you for Jared. Because he he wrote us a little note, it says, it's like you own a key. So I appreciate that. Because I own several keys. And I know how to say the key. So it's Jared Qian, thank you. And the question is, I'm a nervous newbie who's concerned about doing a web app that accepts payments and sensitive information? How can I know I've done everything to create a secure website, I'm also trying to protect myself from being sued by the client. If the website gets hacked. I'm trying to be a jam stack developer. So I'm looking for things like looking at things like snip cart, and stripe. I think one of the best things about this question is that Jared says he's concerned about doing things the right way. He's concerned about sensitive information. And I feel like that is the sign of somebody who wants to do everything the right way. And that's such a valuable skill to have. Because you know, how many websites are out there storing emails and credit card numbers and plain text and not being PCI compliant, and all that sort of stuff. It's like, some people just don't care. So Jared, thank you so much for caring, because that's how these things go away as being problems. One of the things that I liked about your messages that I'm looking at things like snip cart, and stripe, I think these are the best things to do, especially if you're new and concerned. Because companies like stripe, they want to make it easy for you to be PCI compliant and follow the rules. So things like their their hosted forms that are like I framing in it's like their own windows sort of thing. Rather than you writing the form from scratch, it really makes it so you're not touching their information, right. So as long as you have like HTTPS and all the things on your inputs, even though I think with the iframes, their iframes might be HTTPS anyways. But you'll want to just make sure that you're you're secured on your end. And, you know, use the services that make it easy to be secure. Use the services like don't don't write your own account system from scratch, for no reason, use an account system that's vetted, and has been used by many people. Same with this sort of thing. If you don't know what you're doing, use the, I guess the stand on the shoulders of giants sort of situation and use the tools built in that that make it easy for you. - -80 -00:42:34,170 --> 00:45:50,400 -Wes Bos: Totally, I always err on the side of caution with just store only what you need. If I ever need anything more than I will always just reach back into stripe and grab it. But I don't like to store anything that I don't necessarily need past the information that's needed on people's invoices just to show them like what they've what they've purchased and whatnot. So again, like, like Scott says, use other use the services for you. They are employing lots of smart people to make sure that they are doing this properly. There's a lot of situations where you probably shouldn't be doing it yourself. And if you are, then it's up to you to look into all of the different Pepita and all of the different rules in all of the different countries that are out there in terms of what do you need to do in order to mean to responsibly hold your users data word. Next question we have here is from JC Hiatt of Devlin. Every question we have, we've mentioned a past sponsor, JC is the proprietor behind deadlifts. He asked what is a JavaScript generator? I heard that a sink await creates a generator under the hood. Okay, this is a good, good question. So the way that it works is that when you define your function, you put a little asterisk in after the word function. And then inside of that you you do what's called the yielding. And yielding is the ability to return multiple values from a function. So you might have a function that is a funny quotes generator. That's a good example, because it actually is a generator. And inside of that, that function, you would return a funny quote. And then if somebody were to call next on it, then it would return to you the next quote, and then if you call next on it, and you can get the next quote. So you can essentially run it yourself by calling next, next, next, next and every single time that you need one, you can pull it out. And it's actually funny because in my six course, I use the meat counter as an example. So you know, when you go to the grocery store, and you have to stand around like an idiot for half an hour to get like three pieces of prosciutto. Yeah, and there's there's kind of two things going on here where every single time someone pulls a number, it increments it by one and then gives you a number. That's what a generator would do. You pull a number, it'll increment the value and give you your your number 67, your number 68, your number 69 but then at the same time, you also need to know Is there should there even be aligned because there could be known in line and you could be the next number and the Generate have to return that. So that's the idea behind generators where you can sort of pause the function and return multiple values from a single function. In practice, I've never used one in past creating examples for my actual course. Because so soon after generators came out, we got a sink away. And I think a sink await approaches this being able to because you can also return promises from generate, like that was another example I had, where if you want to fetch one thing, and then fetch another thing, and then fetch another thing, then you could use a generator for that. But a sink away handles this so much nicer that I can't think of a situ there probably are situations here or there. But I myself, I can't think of a situation where you would want to use a generator over a sink away. - -81 -00:45:50,429 --> 00:46:07,350 -Scott Tolinski: Yeah, shout us out. Shout us out if you if you know, that perfect use case for generators that we're overlooking, because I'm really interested myself. So let us know if there's something that that we're not seeing here and that you think is like generators are the the thing to use? - -82 -00:46:07,589 --> 00:46:52,620 -Wes Bos: Yeah, I think if you had a situation where you'd need to like keep, whenever you needed something from the function, you would call it, and then it would give you the return value, I could see that being possible option, but I just couldn't think of so many other ways to code a function that would do that as well. The other thing he had here is I heard that a sink await creates a generator under the hood. And I think where that comes from Babel, or Babel, if you if your funny, babble will transpile your cinco wait to browser, browser supported code. And there was a there was some time where most browsers did support generators, but did not support a sink await. So what it would do is it would convert it to a generator for you. I'm not sure if that's still the case. I guess it depends on what your Bible browser support is. - -83 -00:46:52,949 --> 00:49:00,780 -Scott Tolinski: Nice. Cool. All right. Let's get into this next one, which is from Emanuel Siriano is pretty good job. Yeah, this question is, this is the first time I send a question to the podcast. I hope you understand it. First of all, a great job with the podcast. I love it. Well, thank you, Emmanuel. And the other day, I had a discussion with a co worker about the state of web components in late 2018. Are they worth it? Or are they not? The idea of writing component that could be shared between multiple frameworks is awesome. I found a web components.org, which is a library of web components with a lot of information about them, and also with a community. I'd love to hear your thoughts. Hey, my thoughts are web components are pretty sweet. You know, I don't know what the answer is. We know i think i think there's a world where lots of technologies are coexisting and have different approaches to things. So I don't think web components are going anywhere, I think they're probably going to increase in popularity. There's a lot of like, really interesting libraries that use web components. They're used in production on sites like YouTube. So they're not necessarily not going away. And the polymer is a very popular, it's a polyfill for web components built by Google. polymer is pretty sweet. There's also spelt I think that's how you pronounce it SV LTE svelte. I've never said that out loud. So I'm hoping that's correct. But it's basically, they called the magically disappearing framework, it like compiles down to straight up JavaScript, rather than into a framework. But they also have a little flag that you can throw onto your components. And that outputs actual web components, instead of just straight up JavaScript. They say you obviously need a polyfill to get that working on a lot of browsers. But I think there is a lot of room for web components to continue to grow and become more mainstream and used in all sorts of different ways. Again, I don't think react is the number one, you know, best solution 100% of the time for every single person on the planet. That's it. I love react. So yeah, I think web components will continue to grow, their communities are strong, the communities are probably getting stronger. And then the amount of tools around them is probably getting to be better, too. - -84 -00:49:01,049 --> 00:49:48,060 -Wes Bos: Yeah, maybe we should talk about what well come on, sir. Real quick. It's sort of the idea behind web components in polymer is that you'll be able to make your own HTML element components, right? You'd be able to make your elements app, which is the idea behind Angular and Ember and react and all of this stuff, right? You make these components. And the idea is that it would just be native to the browser, and you won't have to use a specific framework. In the meantime, you have to use a polyfill, something like Polymer. So I actually have never ventured down the Web Components route. But that said, I've met many people at conferences who built their entire product on it. So I think it's just the you and your team needs to take a good hard look at what are the options out there, not just because Scott and I say use react because it's up to you to make the right decision for your projects. Yeah, - -85 -00:49:48,060 --> 00:49:48,630 -Unknown: yeah, absolutely. - -86 -00:49:49,649 --> 00:49:52,110 -Wes Bos: Let's talk about ticket nerves. - -87 -00:49:52,589 --> 00:49:54,750 -Scott Tolinski: The question is Exactly, yes. - -88 -00:49:54,779 --> 00:50:32,010 -Wes Bos: How soon will designers replace react developers with the invent of tools like framer x. So the question is, are our jobs in jeopardy with the invent of these tools that seemed to do a lot of the work for us? So we looked at things like framer x, or we looked at things like seven years or 10 years ago, Dreamweaver coming out. And we're, we didn't have to hand code anything anymore. And we're laughing here, because this question comes up all the time, where people say, this is a new tool, our jobs are going to be gone forever. And what is that going to look like? So what do you think about that? Scott? Yeah, - -89 -00:50:32,250 --> 00:51:28,080 -Scott Tolinski: no, I I just wanted to ask if people remember the grid, the grid data. Yeah, like the site tool that was going to like build your entire site for you with AI and everyone is machine learning. Yeah. Yeah. I don't think it worked out that way. No, I the answer to this is not soon. Also, I think you're misunderstanding framer. x because framer x does not output react components. It allows you to create components in react to be used in your design. So it's actually more of a case for react developers being more important because the designers you would have to know react first. It's not the other way around. So it's not that you're designing components. And it's spitting out react code, it's that you are writing react code to build design components. So if anything, framer x makes the case that developers are more relevant, less than less relevant. So yeah, that's my thoughts. Yeah, it's not it's not happening soon. - -90 -00:51:28,320 --> 00:53:41,130 -Wes Bos: Yeah, it's, I think that the industry will continually evolve in how, how we use these tools and what our job is, we'll always continually use, we're not always going to be like, we might not always be hand coding some of the stuff, we might be using some sort of tool to do some of the work ourselves. You never know what it's going to be. But I think the only thing that you do know that will happen is that things will change. And he should not stick to this idea of what your job is and what your job is going to be forever. Yeah, we did see that with way back. People would always brag like hand coded HTML websites was the big thing when when Dreamweaver came out, because Dreamweaver would generate a whole bunch of HTML for you and kick it out. At the end of the day. I think that this our jobs are going to continually change and I saw this screenshot the other day of some guy on Facebook was going off on the new iPhone because the new iPhone now has the ability to change what is it f stop an aperture or Saturn or something about photography, I don't really know much about photography, but I do know that allows you to take a kick ass photo without just knowing much and just kind of pointing and pressing a button. And you see this guy he's like, Whatever happened to real photographers, where we knew how to set up lights and knew how to set white balances and stuff like that. And then the technology is just doing that for you. And I don't think that the job of photographers going anywhere because it's the job of the photographer is changing. And it's like my sister is a photographer and she's super busy. People want more and more photos and I think that just like family photos and wedding photos in the last 10 years have gotten so much better than they were if you look at like your parents or even someone who's been married for 10 years, their wedding photos are like a joke compared to like modern day wedding photos same with coffee I always I love when technology can come along and do something really really well or almost as well as some of their teas and stuff because you see things like like I love going to like the local hipster coffee shop where they hand pour or they have these like vacuum things where like they have like these beakers - -91 -00:53:41,880 --> 00:53:42,960 -Scott Tolinski: Yes, yes like Yeah, - -92 -00:53:42,990 --> 00:53:50,370 -Wes Bos: yeah, I forget what it's called but they like it like pulls a vacuum against the pulse device not the like it's dressed down one - -93 -00:53:51,030 --> 00:53:53,190 -Unknown: person doesn't chemex it - -94 -00:53:53,310 --> 00:54:11,970 -Wes Bos: no like it's this like thing that's built into the built into the countertop. Right? Yes. Like it shows you these bubbling beakers and, and it's like some of the best coffee I've ever had. But then again, the Nespresso you pay 200 bucks for a little Nespresso pop in one of these little pods. Nevermind the environmental harm those things are doing - -95 -00:54:12,000 --> 00:54:18,600 -Scott Tolinski: you recycle. We recycle our Nespresso yellow bag you put them in the bag you ship off the bag, like awesome. - -96 -00:54:18,690 --> 00:54:25,110 -Wes Bos: Oh, yeah, yeah. Oh, I didn't know that. We have just like a espresso machine grinds beans and does it for you we - -97 -00:54:25,110 --> 00:54:27,420 -Scott Tolinski: have an espresso and you do recycle them. - -98 -00:54:27,630 --> 00:55:09,000 -Wes Bos: Okay, good. Well, people turn their nose up at these things because it's not there's not as romantic as like grinding your own and roasting the beans and everything that goes into that but it actually is pretty good coffee at the end of the day and a lot of people like to use these types of things right? So it's, I don't know it's interesting and the baristas job is not going anywhere. If anything, people have more fallen more in love with the whole barista experience and where the beans are sourced from and, and all that stuff so I wouldn't freak out anytime. New Tech comes along sort of challenges and it's gonna we talked with Scott and I were joking about that South Park earlier. They took her journey. Yeah, these robots, man, - -99 -00:55:09,420 --> 00:55:56,670 -Scott Tolinski: these robots using machine learning to generate sites. Now you notice actually, I think a good point too is also like his site builders have gotten better. I mean, the things like Wix and Squarespace are light years ahead of what those same kind of tools were way back when. And so if anything that just makes, like, gives you more opportunity to build easy stuff easily. And it allows you to build more complex stuff easily, and it makes your lives better. I mean, I've never, in my entire career, I'm the most empowered I've ever been with tools. You know, I cannot picture another time in my entire career where I felt as in control of what I wanted to do on the web, just because of how modern and excellent everything is. So yeah, Bring it on, bring on the robot uprising, whatever. Yeah. - -100 -00:55:57,090 --> 00:56:45,090 -Wes Bos: Yeah, it's, it's just our job will will continually be shaped Actually, that's kind of interesting. I would love to talk to someone who's been doing just like content based CMS websites for 10 years and ask them has has like the $2,000 WordPress scene changed because of things like Wix and Squarespace. And I'd love to see that because I think what we're starting to see now is that people are, are starting to need to specialize. If building is very simple website on Squarespace is doable, then clients start to ask for stuff that's a little bit more complex. And you do need custom programming for word. So I don't know if you are have been in that space. If you have any ideas. Is this space changing? Because of of tools? Let us know what you think at tweet us at syntax FM. - -101 -00:56:45,210 --> 00:57:52,320 -Scott Tolinski: Nice. Cool. So we got one last question. If you're cool with that this episode is running a little bit long, but this question should be easy to answer. It's JP Jeter, like Derek Jeter. Thank you, JP, we love these pronunciations, because everyone knows how bad we are this. The question is, have you or anyone you ever known thought about quitting the industry? Because of difficulties that have you've come up to? So the question is really like, have you ever ran into a bug so powerful that you rage quit and just quit the profession entirely? I don't, I have not. And I don't know anyone that has although I've heard stories about technology developers who would maybe just go become a hermit or something for a few years or, you know, just disappear from the internet entirely. But no, I love I love this stuff. I love what I do. I love programming, and the difficulties and the problems and the bashing your head against the keyboard is all part of the game. And it's some of the stuff I love most about it is is solving that problem that really outsmarted you for a long time. And the fact that you were able to overcome that and create something so no, - -102 -00:57:52,350 --> 00:58:45,510 -Wes Bos: yeah, in my early days, I very much had lots of rage quitting times I talked earlier about just like thinking like, I will never get JavaScript, it's so frustrating. It never works. I'm just not the kind of person that's going to ever understand JavaScript. And like very many times I thought like this is just not for me because like now I look back at it and I are now I'm like comfortable in my skills. And I know that it's going to be okay, but when I was first getting started, there's a lot of doubt being like I don't know if I'm any decently good at this, but the thing that kept me at it was that once you chill out, once you come back to it in a day, I always came back hacking on stuff and it was always just the thing that just like wanted me to I always wanted to come back and build more and more stuff. So I did have like little one little hopes for rage quitting, but never anything that was sustained more than a day or so. - -103 -00:58:45,540 --> 00:59:30,090 -Scott Tolinski: Yeah, speaking of rage quitting. I don't know if you've know anything about American football but yesterday the Buffalo Bills are pretty pretty terrible. They've lost both of their games so far this year, and they both of them they just got annihilated. And in the middle of the game, one of their best players just quit and retired in the middle of the game yesterday. They were doing so badly that vontae Davis just just said alright, you know that's it. I retire in the middle of the game. Just like that's it for me. Okay, I don't need to do is his entire career he just retired. Yeah, he just no way retired in the middle of the game because the team is so bad. It's like the ultimate No way. Yeah, that's hilarious. - -104 -00:59:30,090 --> 00:59:35,190 -Wes Bos: No, I didn't I don't really follow football that much. But that is really funny. - -105 -00:59:35,370 --> 00:59:36,330 -Scott Tolinski: Yeah, it's great. - -106 -00:59:36,980 --> 01:00:02,520 -Wes Bos: Although that the the bills come to Toronto every now and then because like the Toronto doesn't have a football day we have the CFL in Canada, which is a bit of a joke. So people want an NFL team in Toronto. And there's there's always been talk of moving the bills to Toronto, and having a for the first Canadian NFL team and every now and then they come I think once a year they come play A game in Toronto. Oh, nice. - -107 -01:00:02,549 --> 01:00:11,760 -Scott Tolinski: Yeah, that's that's sort of like that our outreach the trying to make it so it's not just the the US and they've been doing games in Mexico in London and stuff like that cool. - -108 -01:00:11,789 --> 01:00:12,480 -Unknown: Have they really? - -109 -01:00:12,509 --> 01:00:26,280 -Scott Tolinski: Yeah, they did like one a year in London I think are a couple of year because the sometimes they would send the teams over they weren't very good. And so the lions who are my favorite football team, unfortunately, yeah, yeah, the lions get to play in London or stuff like that. Yeah. - -110 -01:00:26,909 --> 01:00:30,230 -Wes Bos: Interesting. That's cool. What about our sixth pick today - -111 -01:00:30,299 --> 01:02:29,310 -Scott Tolinski: sick pick. So my sick pick is for anyone who needs to maintain a yard or a lawn and you don't have like a service come and do it. I recently had this lawn mower that I've had since Well, my dad had since the early 80s it was a Honda lasted forever, and it died Finally, and you know what I was like, You know what, I'm gonna go go something a little greener this time and and not put out those chemicals into the world that that gas No thanks. So I went with this brand ego. I think it's a Chinese company, but they're produced in Michigan. So that's pretty cool. And I first got the weed whacker. And then I got the lawnmower. And then I got the leaf blower and I progressively got all of these things because each one of them was so darn good. They take a battery and you just plug the battery in so no gas, it doesn't smell like anything. I got the lawnmower, you just plug a battery in and it is awesome. Besides a ton of power. I read some review about this before I bought it and they were like you know what people like always talk about fresh cut grass. But like when you're mowing the lawn, you always just smell fumes. And, and this was actually so pleasant because one it's way quieter. So my headphones aren't cranking I'm not getting that like, I'm not having to turn my podcast way up to here, whatever I'm listening to and mowing the lawn. And you actually get to smell the grass as you cut it which is awesome. Which is a totally like a game changer. So the brand is ego. I'll link to any of the any of the appliances but I have the leaf blower the weed whacker and the lawn mower and I just they're awesome. I bought each one because each one before it was better than the last. So these things are pretty serious. And if you associate like battery powered lawn tools with no power, no, that is not true. The leaf blower like pulls my arm back. It's so powerful. They think there are serious business. So check it out it you can get them on Amazon or Home Depot. I'll link to them on Amazon in the comments. But it's ego agio Pretty cool stuff. - -112 -01:02:29,339 --> 01:03:04,560 -Wes Bos: Cool. I was just thinking about like when I was a kid, I had a lawn mowing business, my first business and I hated using the electric lawn mowers with a huge ass cord and run over it and I still have one on my house now because my backyard is tiny. And I hate having to make sure you don't run over the cord with the electric lawnmower. And I was just thinking like my daughters are never going to know the pain. That is like not having enough extension cord to hit a specific spot or the pain of running over an extension cord and having sparks fly at you. Which is or even like oh funny or even like just - -113 -01:03:04,560 --> 01:03:16,320 -Scott Tolinski: the pain of having to start up a gas powered one because we oh yes powered ones and you're just like pulling the cord and like it's not starting after the winter. Now you just push a button and it turns on it's it's pretty amazing. - -114 -01:03:16,589 --> 01:03:56,790 -Wes Bos: I really like this whole everything going electric because there's there's all that always I'm really looking forward to first electric pickup truck because there's all these good old boys that think you need like a diesel rolling coal thing to tow anything when the reality is is that if you look online and look at reviews for electric chainsaws, these things have crazy torque because of the way that electric motors work right. And I think it's it's gonna be so good when there's like a tractor haul at some back Country Fair. And the guy with the electric truck is just gonna blow everybody out of the out of the water everyone's Cummins is gonna be smoking and this guy's just gonna be winning. - -115 -01:03:56,819 --> 01:03:59,520 -Scott Tolinski: Yeah, no, seriously Yeah, this sick anyways, - -116 -01:03:59,549 --> 01:04:11,370 -Wes Bos: I did see a review for that that ego blower on one of my favorite YouTube channels AV and he always takes things apart and looks at the inside of it. So if you want to look at another review that is kind of interesting. - -117 -01:04:11,459 --> 01:04:14,400 -Scott Tolinski: Oh, he wrote Yes, it blows. He didn't like it. Oh man. I - -118 -01:04:14,400 --> 01:04:32,820 -Wes Bos: love that. This guy is like, industrial like he wants all top quality. Like he takes apart Makita and DeWalt stuff. And then like some of the stuff he says is really good. And then some of the stuff he says but like he took he took a part of like a Dyson vacuum cleaner. It was like this thing is garbage like Dyson's are awesome. Yeah, - -119 -01:04:32,849 --> 01:04:41,910 -Scott Tolinski: yeah, I was gonna say I had some credit I've owned gas powered. I've on electric powered leaf blowers. And this thing's way better than anything else I've ever owned before. So it's cool. - -120 -01:04:42,089 --> 01:06:12,230 -Wes Bos: My sick pick today is going to be a another YouTube channel and the two channels called B is for build. I don't really have an interest in cars. But for some reason, this guy is rebuilding cars on his YouTube channel and he he's uses an X software and engineer so and he looks to be about my age so it's I guess there's there's some some parallels there and it's really interesting because he's very much of the figure at out mentality he's not like a mechanic or anything like that but he quit his I think web development job and is now having full time YouTube channel building cars and right now he's swapping out of M five engine into a 240 z or something like that. And it's really interesting to see how do you take a modern car like a BMW M five and swap it into a into like this tiny little car and he's basically building like a rocket Go Kart. It's just a very interesting channel, not because I necessarily care about car stuff, but just because I like I like his his candor and, and the way that he explains things to the audience. And when he hits he hits problems and how he solves them. So it's just like a very entertaining and informational way on on how to problem solve. So it's called B is for build nice. So he took one of these like Toyota FJ cruisers, which are a little bit funky looking and he built like a, like the most gnarly thing ever. I can't imagine it's good on gas. But I thought it was pretty, pretty cool. So check it out bs for build. - -121 -01:06:12,270 --> 01:07:38,220 -Scott Tolinski: Cool. All right, shameless plugs, I'm going to be plugging level up Pro, if you subscribe for the entire year, you get access to the dining, there's like 21 Premium series on level up pro right now. I mean, there's a lot of content. And there's a new kind of new series every single month. So if you sign up for a year, it's essentially $15 a month, but you sign up for the year, it's like 185 bucks, you save 25% by doing that, and you get access to all of the 20 some series that are out there that are all premium series, and you get access to 12 additional full series now the series each have like anywhere from 20 to 30. videos, they're full in depth, we dive into all sorts of different topics from the latest one was react testing for beginners level to react is a really popular course level one electron, we even get into react basics, we talk a lot about things like Gatsby with pro Gatsby, there's a headless WordPress course a modern CSS course, which is all about CSS Grid, and Flexbox, layouts, React Native, you name it. If you are interested in learning any of these topics, check out level up tutorials, comm forward slash pro sign up for the year save 25% get access to the 20 plus premium series that are there plus 12 additional series over the course of the next year. I have some big, big, big, big, big plans for level up tutorials this year. So in these next 12 months, you should be seeing a lot of content and a lot of new stuff on the site. - -122 -01:07:38,460 --> 01:08:29,789 -Wes Bos: Cool, I'm going to plug my upcoming advanced react course is done. I'm so excited to not burn. This has been like my entire life for probably eight months, almost full time. It's been such a huge course of learning it and all have had a whole bunch of challenges in getting it up. But now it is done. I'm so excited about it. And it's going to be at Advanced react.com. I don't know if it will be launched by the time you hear this. But I have I put it up for early access. I have 400 people going through it right now. And all that's left is any feedback that comes from the early access users. I make a couple little changes to the videos, and then it goes live. So pretty stoked, be in the command are on your advanced react.com because it will be out pretty soon. Nice. - -123 -01:08:29,810 --> 01:08:32,369 -Unknown: I'm excited. I'm excited to see that launch happen. - -124 -01:08:32,550 --> 01:08:51,720 -Wes Bos: Yeah, I'm feeling really good about about this one. Because it's a it's a huge course like I think so it's 11 hours of just regular and then the testing alone is five and a half hours, which is why you don't see a lot of people add testing to their courses, because it's it's almost as big as the entire rest of the course. Yeah, - -125 -01:08:51,959 --> 01:08:54,749 -Scott Tolinski: I have a whole 20 Yeah, do testing course on testing react. So - -126 -01:08:54,749 --> 01:09:14,010 -Wes Bos: yeah, I'm really excited about how I've taken such a huge topic and being able to distill it into something that is reasonably like it's still going to be a feat for you to to undertake this course is going to take you a lot of effort to actually to go through it. But if you want to learn this stuff and you want to be at the top of the industry, then it'll be well worth your time. - -127 -01:09:14,220 --> 01:09:38,430 -Scott Tolinski: def cool, so I didn't have anything else. If you like to submit your questions for the next potluck episode, head over to syntax FM and click that button. The ask a potluck question and let us know what you want to hear about in the next potluck. We are excited to have your questions. The last batch is really good. There's so many good questions. So keep them coming. We'd love to get those and we do a one of these every - -128 -01:09:38,459 --> 01:09:53,930 -Wes Bos: three episodes every four episodes. We do yeah, every four episodes Yes, once a month dope, so answer them. We really appreciate you taking the time to submit your questions because it makes these really fun shows. That's it for today. Thanks so much for tuning in. And we'll see you next week booth pace. - -129 -01:09:55,739 --> 01:10:05,479 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show - diff --git a/transcripts/Syntax79.srt b/transcripts/Syntax79.srt deleted file mode 100644 index d9c5bfe31..000000000 --- a/transcripts/Syntax79.srt +++ /dev/null @@ -1,292 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,329 -Announcer: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ tip workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA. And Scott. - -2 -00:00:25,860 --> 00:00:59,640 -Wes Bos: Welcome to syntax today we're gonna do stumped again, lots of you really enjoyed this one where Scott and I stumble upon seemingly easy questions about web development and fail to answer them. Note, if this is your first time tuning in stumped is where we, we go through some of these interview questions and like see, can Scott and I how would we answer them? Can we even answer them when we're put on the spot? And we start to squirm what our answers like that. So today's sponsor is native script, and Scott's gonna talk a little bit more about them. - -3 -00:00:59,880 --> 00:03:26,460 -Scott Tolinski: Yeah, so we are so excited to have native script sponsoring this tasty treat. Ninja script basically is a platform to allow you to build legitimate real iOS and Android apps using JavaScript or TypeScript. Now, unlike something like React Native, you're not locked into react specifically, right? You can use actual JavaScript, you can use TypeScript, you can use view, you can use Angular, it is really pretty slick. So TypeScript is basically a platform that allows you to work with real API's, it converts your JavaScript code into native code. So instead of some of these other libraries, that all they do is basically throw your website inside of a web view or something like that. Native script is not like that at all is actually compiling your code into legit native code so that it's one, you get these native performance benefits that you get. It's like one of the reasons why things like maybe a Cordova or PhoneGap that are using these web views aren't necessarily the best solutions, because they're still determined, they're still built upon these browser API's where something like native script is actually getting that native performance benefits, all that good stuff, you get to work in a really nice environment with the actual API's on your devices. It's just really super cool. It's also really easy to learn the native script.org has just a ton of awesome resources to for picking this up. So if you're interested in all in building native apps, and you are a fan of JavaScript, the native script is definitely going to be the way to go to check this out. And it makes it so you can write your code once for cross platforms, app apps, right, you can build iOS and Android apps, no more struggling just because you don't know swift or kotlin. You can take this on and with your JavaScript, your view your Angular skills and build some legit native apps. And one of the coolest things about the sponsor like many of our sponsors is that they are 100% open source and free to use. So check out native script at native script.org forward slash syntax. And honestly, this is one of those ones that you just want to try out. I sometimes I have these, these products that we share in here. And really the the proof in the is in the pudding for this one. You just want to get in there. You want to try it out, do some demo projects, and just see how amazing it is Ninja script.org. It's superduper Awesome. All right, - -4 -00:03:26,460 --> 00:03:31,200 -Wes Bos: well, let's get into it. Should we do rock paper scissors for who goes first? - -5 -00:03:31,380 --> 00:03:35,010 -Scott Tolinski: Yeah, let's do a little bit of rock paper scissors here. Let's do it. - -6 -00:03:35,040 --> 00:03:40,410 -Wes Bos: What are you what do you do rock paper scissors, throw a rock paper scissors and throw on on scissors. - -7 -00:03:40,440 --> 00:03:46,560 -Scott Tolinski: We do rock paper scissors. Shoot. I guess that's the American of us to say shots. Yeah, I'm culture apparently. - -8 -00:03:49,710 --> 00:03:51,000 -Wes Bos: Let's do it. - -9 -00:03:51,420 --> 00:03:53,370 -Unknown: All right. Rock Paper, scissors. - -10 -00:03:53,370 --> 00:03:54,600 -Shoot. - -11 -00:03:54,630 --> 00:03:55,470 -Wes Bos: There's a delay. - -12 -00:03:55,470 --> 00:04:03,540 -Scott Tolinski: I can't even see your hand. Scissors too, but you're doing it below the screen. I can't see what you're alright, - -13 -00:04:03,690 --> 00:04:06,960 -Wes Bos: I'll do it again. Alrighty, rock rock, paper, - -14 -00:04:06,990 --> 00:04:07,770 -Unknown: scissors. - -15 -00:04:07,770 --> 00:04:08,610 -Shoot. - -16 -00:04:08,610 --> 00:04:13,500 -Scott Tolinski: I can't see you again. Did you do scissors? scissors? paper. Got that? Okay, - -17 -00:04:13,530 --> 00:04:16,680 -Wes Bos: yeah. Okay, so I'm gonna I'm gonna ask the first question then. Okay, so - -18 -00:04:16,680 --> 00:04:56,670 -Scott Tolinski: maybe we should maybe preface this a little bit more. We mentioned that we try to stab each other with interview questions. These come from 30 seconds of interviews.org. It's not a site we're affiliated with. It's just a nice, cute little site that we we found we have we wrote like a little snippet of JavaScript that allows us to randomly select one of these questions. So needed for us to know the questions ahead of time somebody tried to claim that we would try to answer these questions to make ourselves look good. And if you listen to the last episode is tough. You would know that is not the case. So yeah, no, this is the first time we're seeing all of these questions. And they range from easy difficult to hard CSS, HTML, JavaScript, all that good stuff. So yeah, which got - -19 -00:04:56,730 --> 00:05:11,330 -Wes Bos: we're gonna have to like make our own repo of these at some point because we're gonna To run out of them, but for now we're all kinds of interviews.org. Alright, so first question I have here is what our differ and a sink attributes on a script tag? The intermediate question. - -20 -00:05:11,390 --> 00:05:51,210 -Scott Tolinski: Yeah. So it's basically when the script is going to be loaded, right? Because a lot of times if you just have your script at the head of your document, and you don't want it to be loaded immediately, what like what, let's say a good example of this would be like a Google Analytics, right? The last thing you want to do is sit and wait, while Google Analytics loads that stuff. For you, while you're just like, this is not essential to the loading of my product, right? My site needs to load fast, I don't need to wait for Google before everything else to load. So you can differ different scripts to load after everything else to say, Hey, this is sort of low priority. Is that suitable? - -21 -00:05:51,240 --> 00:06:51,300 -Wes Bos: Yeah. So I always go back to this blog posts, whenever forget this on growing the web.com a sync, it's all about when the script is downloaded and when it's parsed. Right, because there's two parts, you got to download the.js file. And then you actually got to like, you got to run through the JavaScript file and parse all of the JavaScript that's in there. So a sink downloads the file during HTML parsing, and will pause the HTML parser to execute it when it has finished downloading. So it'll download, like, basically, HTML parsing is when the HTML elements are being put onto the page. And then the download of the sync attribute or the async script tag will happen during that, but then it will pause the HTML parsing, well, it while it parses the script tags and then defer, what it will do is it'll still download it during the HTML, but it will wait until HTML is done parsing to parse itself. Nice. One I can never remember. But I just google it right now. - -22 -00:06:51,450 --> 00:07:44,190 -Scott Tolinski: And I found a really interesting website. I'll save this into the description of the video. This thing includes a bunch of graphs that this is actually the most helpful resource I've ever seen on this. And I've never seen this before. But it shows you have like a little timeline, just start parsing HTML, this is no defer async, start parsing HTML. And then it waits while it fetches and executes. And then resumes parsing, no defer async. And then with async, and that it gives every single example this is beautiful. I love this. I this is the kind of thing that I like to see a nice little visual example. So I'll make sure to share this awesome. Good job on that one. No, thank you. It could have been better. I'm disappointed. Okay, let's go ahead and let's run one here. This one is going to go pretty easily for you. I'm going to tell you that right now. Because we just did an episode on this, what are the differences between varlet and const? - -23 -00:07:44,270 --> 00:08:22,770 -Wes Bos: All right, real quick, var is function scoped and can be reassigned when not in strict mode, let and const are block scoped meaning that when they're declared they're only available inside of that block. So an if statement, a function is also a block and let and const cannot be reassigned. So you cannot create a new let or const variable with the same name and the same scope. And then the value of let and const sorry, the value of lat can be changed the value of const cannot be changed unless it is an object or an array in which you cannot change the binding of that value. But you can change the values that are inside of that object or re - -24 -00:08:25,980 --> 00:08:42,570 -Scott Tolinski: Yeah, knocked it out of the park. Yeah, yeah. Well, it doesn't. It doesn't hurt that we just, you know, yeah, minutes ago recorded an episode that I don't like the face. You're making me right now this face? The saying that I'm in trouble. I'm in big trouble. - -25 -00:08:45,000 --> 00:08:47,900 -Wes Bos: What is a callback? Can you show us an example of using one? - -26 -00:08:48,270 --> 00:09:35,900 -Scott Tolinski: Yeah, a callback is a function that executes after he that this stuff happens is often used in asynchronous programming before promises, because what happens is, you go off and you do some stuff. And then usually the last parameter in a function is a takes another function, and that is going to be the function that's called takes a function expression, I should say. And that function expression is going to be called after the actions have taken place. So like an API call would typically go off and do some stuff and then that data the results become available to you in the IF function expression. And then you can go off and do some more stuff with that data, like perhaps another call with another callback and another call with another callback and potentially some other stuff. Now that - -27 -00:09:35,939 --> 00:09:39,480 -Wes Bos: Yeah, all right. Give me a Give me one that we didn't just do a show on. - -28 -00:09:39,630 --> 00:09:45,050 -Scott Tolinski: Okay, this is gonna be a softball that you're getting the easy ones today. But if we haven't drawn this so maybe I'm - -29 -00:09:45,050 --> 00:09:46,440 -Wes Bos: just really good programmer. - -30 -00:09:46,470 --> 00:09:58,040 -Scott Tolinski: Yeah, maybe that's it not that this may be less blue. Well, how about this one then, what is recursion and when is it useful? And when is recursion useful and when is recursion useful? - -31 -00:09:58,439 --> 00:10:51,530 -Wes Bos: recursion is when A snake eats its own tail recursion is when you have a function that will call itself. And generally inside of that function, you have some sort of, always inside of that function, you'll have some sort of logic as to whether that function should call itself again. So some examples of when you're doing this, maybe you're programming a game, and you want to have a function, like take a turn, and that that take a turn, will run and then ask you for like a tic tac toe. And then you put your, put your answer in, and then it will run again, and it'll run again, and somewhere in that take a turn function it will check is this game over? If, if so, then display the score, otherwise call itself and then that will just kind of keep running, it'll run, it's really helpful for when you just need you don't know how many times you need to call something, but you just need to keep running that function until something changes. - -32 -00:10:51,750 --> 00:11:15,090 -Scott Tolinski: Yeah, I've used this in a situation where you're like doing like a page scraping and stuff like that. You can keep calling it over and over again to like, find something or doesn't. recursion is one of those things that's very easy to ruin your your day with, because it's one of those things that you kind of have to have a good handle on. And always make sure that your escape cases running. Otherwise, you're going to have an infinite loop. - -33 -00:11:15,630 --> 00:11:29,430 -Wes Bos: And escape case. I like that. Yeah, cuz that's when you get the maximum call stack size exceeded. That's when the function calls itself forever. And then all sudden, it's like a spinning tire running down the freeway. There's no way to stop it until it crashes into something. - -34 -00:11:29,610 --> 00:12:05,280 -Scott Tolinski: Yeah, there's actually so there's this hilarious meme comic, which is like Winnie the Pooh, I'm trying to find the one that's not an A gift that's impossible to read. But it's like Winnie the Pooh. And he is eating honey or something and tiggers like, oh, poo, that's not Honey, you're eating blank. And then the next panel is like some other thing. And then one of them he goes, you're eating recursion. And then the next panel is all four panels again. And then the next four panels, all four panels again, and that's it's like until infinity. It's just it's like a it's like one of those photos within a photos within a photos. That's hilarious comics have to find this thing. All right, here's one, - -35 -00:12:05,310 --> 00:12:08,490 -Wes Bos: what is the difference between a map and for each? - -36 -00:12:08,640 --> 00:13:34,740 -Scott Tolinski: Yeah, so for each does not create a new array, it just iterates over each item. So dot for each is an array method that is basically a shorthand for doing a for loop. So for each is going to have a callback function for each item in the array. And it's going to go through and give you that value of each item in the array for as many times as there is a new item, right. So it's basically just a looping over your array using an array method. Now a dot map is kind of doing the same thing. It's looping over your array, but it's doing so to create a new array. So each time that you loop over it, whatever your return value is from that callback function ends up being the value. Now you typically use dot map, when you have an array, and you want to augment this into a new array. You'll see it in react when people want to do loops, because you're essentially just outputting an array with JSX code. So you have your data, that's an array, and then you you're using a dot map over that array, you're adding some JSX code to it, and you're outputting a new array dot map is superduper. Useful anytime? Well, anytime you want to augment your array, and again, because it doesn't mutate the original array, it's super duper handy. I use mute map all the time to do any sort of modification to any race stuff. - -37 -00:13:34,800 --> 00:13:47,490 -Wes Bos: Now that I would have hired you after that one. Well, I think you if you like that explanation, go back to Episode 43. That's one of our most popular episodes 20 JavaScript array and object methods to make you a better developer. - -38 -00:13:47,520 --> 00:13:48,090 -Unknown: Yeah, - -39 -00:13:48,150 --> 00:14:06,240 -Scott Tolinski: they will make you much better developer. And in my new JavaScript course, coming out, we talked about all this stuff, too. So check that out. I have a hard one for you. And I really feel like you're probably not going to get this so I'm not got a big smile right now. Okay. What is big O notation? - -40 -00:14:06,570 --> 00:14:07,920 -Unknown: Oh. - -41 -00:14:12,300 --> 00:14:32,640 -Wes Bos: Oh, man. It's funny, because I actually did study up on this before I had my Google interview, like six years ago. Yeah. But obviously, I've since forgotten. It has something to do with measuring the complexity of a program of measuring the complexity of a function. So it's way to describe how efficient something is. Is that true? No, no, tell me. - -42 -00:14:32,880 --> 00:14:52,890 -Scott Tolinski: Yeah, it basically, it's a way to describe the time complexity of an algorithm, the best algorithms will execute in the fastest, and the simplest complexity. So the big O notation is a way of describing your code. Basically, whether or not this will execute quickly. - -43 -00:14:53,160 --> 00:14:55,320 -Unknown: Yeah. Ah, okay. - -44 -00:14:55,550 --> 00:15:09,120 -Scott Tolinski: Let's see if I can get some examples here. Oh, I don't know this stuff is Very confusing to me, because I'm not a computer science major, I feel like this is something that if you did computer science in your life, it would be very easy to answer this question. - -45 -00:15:09,600 --> 00:15:36,480 -Wes Bos: Oh, yeah, I'm just reading to go go to the example. 30 seconds of interviews that origami and take a look at it in JavaScript. Maybe we'll have it. That's what Scott and I were talking about some having some people on the show, who've done computer science, so we can ask them questions like this and just getting their opinion on, on explaining these things. Yeah. What does 0.1 plus 0.2 triple equals 0.3? evaluate to? And why? I feel - -46 -00:15:36,480 --> 00:15:58,620 -Scott Tolinski: like this is a trick question. Because it seems like this should be true. But I'm gonna go ahead and say false, because it feels like a trick question. And what the heck is that going to evaluate to? Is it going to be? Is it going to be one of the weird JavaScript number issues where it's going to be like two point or it's going to be point 002999? Something? Is that what's gonna happen? - -47 -00:15:58,680 --> 00:17:04,770 -Wes Bos: It is one of those. So zero point here, if you just everyone open up your console right now and type in 0.1 plus 0.2. And you get 0.3000000000000004. And soda. That's a everyone always tweets out like, oh, JavaScript, so dumb. It's an issue with floating point numbers. That is I as far as I know, almost all languages have this issue. Because it converts the numbers to binary, I don't totally understand it. I just know that whenever possible. I don't work with floating point, which is decimal numbers. And I just work with integers, which is whole numbers, because it can cause lots of issues. Like I'll give you an example. I had the ability to refund somebody. And what was happening is people had a product that was like, $23 and 33 cents, and I was trying to refund it, and it was trying to refund it. I was like 0000004, right? That was that issue. Right. So that's why I always try to store stuff in cents. Yeah, but that's just I guess that's just how it works. But you're saying it's giving you true? - -48 -00:17:04,920 --> 00:17:24,270 -Scott Tolinski: No, I Well, I didn't that it's weird, because I would typed it myself. And it gave me true and then I copied and pasted it. I must have been doing something wrong. I think I had I had 0.001 plus 0.0. Yeah. 002. Yeah, I had an extra couple of zeros in there. - -49 -00:17:24,630 --> 00:17:32,550 -Wes Bos: Yeah, so that's, that's a little bit of a weird one. If you ever want to see more like funny stuff in JavaScript that is like that. Just look up. WTF jass - -50 -00:17:32,700 --> 00:17:46,770 -Scott Tolinski: wtf j s. And Okay, we got another one hoisting, man, this is gonna be finishing off on an easy one. And I am, I guess I'm okay with that. You're going to get this one. What is CSS bam. - -51 -00:17:47,280 --> 00:18:10,530 -Wes Bos: Oh, alright. css BAM is a way to write your CSS in a way that is modular, so that instead of having CSS selectors that are complex, and that overlap each other and you get into specifity wars, you follow this? so it stands for block element modifier, what kind of words and the specificity? video. All right. - -52 -00:18:10,610 --> 00:18:18,590 -Scott Tolinski: I don't know. I heard you go through really quickly. I hit somebody who told me that it's spelled s A Felicity - -53 -00:18:18,660 --> 00:18:20,910 -Wes Bos: specificity. That's wrong. - -54 -00:18:21,080 --> 00:18:27,510 -Scott Tolinski: They wrote it out. And maybe they're just punking me they're trying to get me They said, this is this is a trouble. This is a problem. - -55 -00:18:28,340 --> 00:18:35,520 -Wes Bos: Yeah, all y'all can start your own podcast and with proper pronunciation of all the words. question here. - -56 -00:18:35,549 --> 00:18:37,410 -Scott Tolinski: How do you pronounce this word? - -57 -00:18:37,410 --> 00:18:43,580 -Wes Bos: Oh, oh, no. How do you say schema will be able to work with you or we're gonna fire you. - -58 -00:18:43,650 --> 00:18:45,320 -Scott Tolinski: Yep, just started sweating bullets. - -59 -00:18:45,800 --> 00:19:46,950 -Wes Bos: Anyways, what is CSS bem TSS bem is stands for block element modifier. And the way that it works is that you take your block, like let's call it a tweet, you give that just a class of dot tweet. And then inside of that tweet, you have elements and you might have like a tweet header, you might have a tweet content tweet timestamp. So you give it a class of tweet, the element is underscore underscore. So you might have dot tweet underscore underscore heading dot tweet, underscore, underscore content, tweet, underscore, underscore timestamp. And then if you ever want to take a heading but maybe make a little bit of a bigger one, that's a modifier. So you'd have dot tweet, underscore underscore heading dash dash large or dash dash special a dash dash pink, and then that will that will change it a little bit more. So it's a little bit verbose. But it's a really nice way to to maintain sanity in your CSS selectors. If you're not using something like scoped CSS style components and something like that, yeah, I - -60 -00:19:46,950 --> 00:19:52,070 -Scott Tolinski: remember being very like not upset but like cool. It's a lot of typing for - -61 -00:19:52,080 --> 00:19:57,900 -Wes Bos: Yeah, I was to, for the longest time I was like, that's dumb. And then I actually used it and I was like, I'm dumb. This is awesome. - -62 -00:19:57,900 --> 00:20:04,610 -Scott Tolinski: This is those so 100 Hundred percent. My experience. This is dumb and then I'm done. Yeah, that is exactly. - -63 -00:20:07,170 --> 00:20:25,050 -Wes Bos: That's why like I've done it so many times in my career where I've written something off because it looks ugly. And then I'm like, What about writing beautiful HTML. But then I like I realized, like it's worse typing a little bit extra to be able to have such slick components and not have to deal with the pain that is specificity. - -64 -00:20:25,580 --> 00:20:29,580 -Scott Tolinski: Nice. Well, you I think you just use crushed that one. I think. Yeah, I - -65 -00:20:29,580 --> 00:20:35,910 -Unknown: think the city we got a question or specificity, specificity. Yeah, I always do. - -66 -00:20:37,980 --> 00:21:04,340 -Wes Bos: Okay, I think that's it for today. If you have, I think we are almost out of questions on this website. So we got to figure out if you have a interview question, tweet it at syntax FM with hashtag syntax interview, and that way we'll be able to pull them up on Twitter, and like in a month when we do this again, so again, tweeted at syntax FM with the hashtag syntax interview, and we'll we'll try to answer some of those as well. - -67 -00:21:04,650 --> 00:21:11,330 -Scott Tolinski: Yeah, yeah, definitely. Because Yeah, we from this episode, we have seen that we are two episodes in and we're already running dry and questions here. - -68 -00:21:11,330 --> 00:21:15,030 -Wes Bos: So yeah, also would you hire Scott nigh tweet us that? - -69 -00:21:17,250 --> 00:21:25,610 -Scott Tolinski: Hopefully, we get hired simply because of my damn map explanation, explanation, and you could get hired killer attempt at a big O explanation. - -70 -00:21:27,510 --> 00:21:37,500 -Wes Bos: Call me Google. Alright, that's it. I think we're almost getting into not so hasty treat territory. So let's wrap it up here. Anything else to add? - -71 -00:21:37,500 --> 00:21:39,350 -Unknown: I got nothing else already. - -72 -00:21:39,450 --> 00:21:40,740 -All right, peace. - -73 -00:21:43,230 --> 00:21:52,980 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax8.srt b/transcripts/Syntax8.srt deleted file mode 100644 index 30caa5e02..000000000 --- a/transcripts/Syntax8.srt +++ /dev/null @@ -1,340 +0,0 @@ -1 -00:00:06,000 --> 00:00:36,320 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. Oh, welcome, welcome, welcome. Today we are wrapping up part two of our two part origin stories where in part one, I talked a bit about my career and sort of non conventional growth in web development. And today, we're going to be hearing Wess origin story, basically, how he got to where he is Wes Bos. - -2 -00:00:36,360 --> 00:02:09,470 -Wes Bos: Awesome. Thanks so much. Cool. Well, I want to start things off quick thanks to our sponsor, which is fresh books, fresh books is easy to use Cloud accounting software is perfect for small businesses. I've been using it myself for about seven years now. A big fan of it. So we'll talk a little bit more about them partway through the show, but hit up freshbooks.com for slash syntax, and use the code syntax in the How did you hear about a section that tells them that syntax listeners are the best? And they will continue to sponsor the show? The very best? The Very Best of you? All right, so let's talk about my my origin story here. Um, I've been at this for quite a long, long time. And I have somewhat of a similar story to Scott, but I thought it'd be kind of interesting to dive deep into all of the different pieces. So I have always been super into computers. My dad was sort of in it all of his life. We always had a computer, we were first Kids on the Block to have internet. And part of being on the internet in the early days. I don't know, I was in I think, when I first really got super interested in building websites was I own about fifth or grade five, or grade six, which is fifth and sixth grade, as y'all say, down in the States. And at the time, I was super into PlayStation two. So maybe I should search that when did PlayStation two, - -3 -00:02:09,630 --> 00:02:11,060 -Scott Tolinski: March 2000? - -4 -00:02:11,340 --> 00:02:46,890 -Wes Bos: march for 2000. So, Wow, I've been building websites for 717 years. Wow. That's, that's a lot. So that was really when I first got into it. I was building. I was visiting all these websites. And I said I wanted to make my own website for PlayStation two in anticipation for it to come out. So I made this website called ps 28. Go calm, it's actually still up if you visited. So ps twenty.itgo.com. - -5 -00:02:46,950 --> 00:02:50,700 -Scott Tolinski: The best site on PlayStation two. I love this. This is great - -6 -00:02:50,730 --> 00:03:25,950 -Wes Bos: that the funniest part is, is that I was hiring. Because at the time I had this like brutal horizontal scroll issue that I couldn't figure out. And I put on the on the front page. I will give you the password and you can help also, if off you know how to obviously my spelling mistakes have not improved in 17 years. If you know how to fix a problem that it is too wide. I would like it if you helped because like I couldn't figure out how to fix the horizontal scroll. Anyways, that was the first website. There was a hit counter on it. I got so crazy traffic to it. I'm voting in your poll right now. I'm - -7 -00:03:25,950 --> 00:03:29,550 -Unknown: gonna vote in your poll. Is the poll still work? I don't know. I'm gonna find out. - -8 -00:03:30,090 --> 00:03:37,050 -Wes Bos: The poll is are you going to buy PS two? Yes, I definitely have mine reserved. But I have to wait in line on October 26. - -9 -00:03:37,079 --> 00:03:45,030 -Scott Tolinski: I love how all of the eyes are lowercase. I'm sorry, Wes. This is great. - -10 -00:03:45,750 --> 00:05:01,520 -Wes Bos: I know. I'm so super happy that it's still up. So that was like my first my first foray into it. And after have using one of these website builders, I thought like it'd be really cool to learn how to build them myself. So I learned about HTML, I learned about how iframes worked. And I built this like pretty bomb diggity website that had like a nav iframe and a header iframe and your main iframe, and I just use that as a place to embed games. put up pictures of me and my friends. Post I don't know, I posted all kinds of different stuff. And it was at Wes bos.tk. Because at the time, I don't know if this is true or not. But that's the only way you could get a domain name that was top level like Wes bos.tk that you didn't have to pay for it. And I was pretty stoked on that at the time. So that's that was me in grade 567 and eight just sort of building stuff fooling around. I was also really into this website called CDN money. And what that was is a money tracking website. I think in the states you have like a Where's what's who's on you? Who's on your dollar bill? - -11 -00:05:02,550 --> 00:05:10,010 -Scott Tolinski: The single dollar Oh man. I don't, I don't carry money with me, man. I know, I don't know, I have no idea to be honest and - -12 -00:05:10,409 --> 00:07:17,100 -Wes Bos: whoever, whoever it was, but it would track money around the world, and you had a stamp, and you would stamp your bill. And it would say, go to CDN dash money.com and input the serial number, and you'd get hits around the world. So at that time, you could you could customize your profile. And I was super into adding custom like fonts and clocks and all kinds of hilarious stuff. So I played around with that stuff for a little while. But when I hit High School, which is grade nine up here, I got really into the music scene that was in the town where I grew up here in Canada called Burlington and I started building websites for a friend of mine had a had a band, so I built them a website. And I'm sort of like the first website that had done for someone else. And as websites started to die off, people started getting my spaces. So I really cut my teeth in understanding how HTML and CSS worked by taking these designs because I was like, kind of initially, like a designer, I was like a huge Photoshop kid, I had learned Photoshop all through grade 678 when I was in grade school, and then it came around to building these websites for these bands. And the way that it worked is you would you would slice and dice it, you would slice it in Photoshop, if you remember that. And then you would take one slice, and replace it with an iframe, and that iframe would scroll. And that's where the content would actually go. And you'd have like image maps on the side for for all of your images. So that was pretty funny. But that started to die off. And I remember MySpace becoming super, super popular. So I learned all of the CSS that you needed to customize these MySpace profiles to sort of match all of the designing of the T shirts and the cdr. And the flyers that I was designing, it's sort of all had to go together. So it's it's funny, because it's probably half of all web developers have gotten their start coding my spaces. - -13 -00:07:18,180 --> 00:07:23,130 -Scott Tolinski: Some bad yeah, I was pretty amazing. The amount of CSS they let you add in there, - -14 -00:07:23,310 --> 00:07:29,910 -Wes Bos: and JavaScript to in the early days, until someone figured out that you could click the Add to friend luck, add friends or whatever. - -15 -00:07:30,210 --> 00:07:38,610 -Scott Tolinski: Yeah, that's a great story to that that guy who wrote the first like Internet worm, like just expecting to get more friends and then like, woke up the next morning with like, several hundred thousand. - -16 -00:07:38,640 --> 00:07:43,410 -Wes Bos: Yeah. And he like, took down MySpace, because the way that it works is it will FBI - -17 -00:07:43,410 --> 00:07:44,520 -Scott Tolinski: showed up to - -18 -00:07:46,170 --> 00:08:10,860 -Wes Bos: like, automatically add a friend. And then it would post in your feed that JavaScript code, which would automatically add all of your friends friends to there. And it just like, within a day, he had added all of my space, which is hilarious. And it's funny, because like, that's how I first understood what JavaScript was. It was like the ability to programmatically do things on on a webpage. - -19 -00:08:11,670 --> 00:08:16,890 -Scott Tolinski: So yeah, I think I only got into that with snippets, like just like, copying and pasting some stuff. - -20 -00:08:17,159 --> 00:09:04,040 -Wes Bos: Yeah, exactly. And the html.org or.com was a big website back then, it had all these like, loading packs and whatnot. But as So I did that for, I don't know, maybe three or four years all through high school, I made decent money going through high school building my spaces, but MySpace started to die. All these punks who are in the websites, or all these punks in the band started to retire and And what happened is that their parents needed websites. So I would start building websites for pool companies. And I remember like a gasket company and all these little businesses, I their parents would come to me and I would start to actually build websites for them. - -21 -00:09:05,300 --> 00:09:06,360 -Scott Tolinski: Did you say gasket gasket - -22 -00:09:06,360 --> 00:09:07,790 -Wes Bos: company, you know just - -23 -00:09:08,609 --> 00:09:16,400 -Scott Tolinski: seals and I also built a site for a gasket company? Much later in like 2011 Yeah, - -24 -00:09:17,030 --> 00:09:18,870 -Wes Bos: I know. Oh, man. So I know. I couldn't - -25 -00:09:18,870 --> 00:09:23,490 -Scott Tolinski: believe it. When you said a gas gate coming. I'm like, What? How many people? How many guests good companies are there? - -26 -00:09:23,540 --> 00:10:38,190 -Wes Bos: It's a big business apparently. Just people yeah. seals. Um, so all through high school, I had done that. And I had loved graphic design and I had love web development. At that time I was I still considered myself more of like a designer then actually someone who is a web developer the CSS in and doing the web stuff was just sort of necessary to get it online. And when I went to university I had applied for for quite a few like graphic design and like packaging programs, but I didn't get into any of them. But at the same time, I was like Very computer savvy. So I applied to a bunch of different it programs as well. And I ended up getting into Ryerson University for a program called Business Technology Management. Which if you know me is like exactly me it's it's a business degree, heavily focused on the tech that runs, large corporate businesses. And I had all my professors worked for BMW and Zahra and stuff like that. It's interesting to like, people love Zahra because of the clothes but if you like, Look, if you read into how Zara works, it's all tech run, which is it's amazing to hear. - -27 -00:10:38,340 --> 00:10:39,990 -Scott Tolinski: So what is that? - -28 -00:10:40,080 --> 00:10:41,820 -Wes Bos: You know, Zahra? Sara clothes? - -29 -00:10:41,820 --> 00:10:43,020 -Scott Tolinski: No, - -30 -00:10:43,550 --> 00:10:52,980 -Wes Bos: no. Oh, it's like it. You know, it's like one of the biggest clothing companies in the world. It's it's like h&m, but like a little higher tier. - -31 -00:10:53,490 --> 00:10:56,790 -Unknown: I don't know if we get them? Nobody? I don't know. - -32 -00:10:56,880 --> 00:11:00,780 -Wes Bos: I guess in Colorado, everyone just does Rei. And yes, no, that - -33 -00:11:00,780 --> 00:11:15,810 -Scott Tolinski: is a more accurate north, you know? Yeah, it's it's a Patagonia Rei. There's the Rei flagship store has its own like river to test out products here and stuff. It's just like, just everyone's wearing hiking boots all the time. - -34 -00:11:15,870 --> 00:11:17,070 -Wes Bos: Okay. Yeah. - -35 -00:11:18,540 --> 00:11:22,530 -Scott Tolinski: That was a very accurate portrait portrait of Colorado right there. - -36 -00:11:22,560 --> 00:15:52,800 -Wes Bos: So, um, I was super excited about this Ryerson University going for Business Technology Management. It was a four year program, but I opted to go for a five year program, which was four years and co Ops, sort of, sprinkled in between. So it was four years of learning, and then an extra year, plus summers of actual co ops getting paid, which was sort of ideal for me. So I, at that time, sort of throughout the thing, really what they're they're grooming you for in in the business technology program was to be like IT manager to build these really big. So I was in university, I was still doing some design and some some stuff over there. But I started to transition more into to doing freelance work. So at that time, I had picked up WordPress, and I started getting really, really involved in the local agency scene. So in the last episode, we talked about doing freelancing and all that good stuff. So that's really where I started to meet all the different people at the agencies and to do a lot of work with agencies as well as work that they had had passed on. So I was pretty excited about that all doing all that freelancing. And I had sort of decided at that point that I wanted to be a web developer. But I also had to do these four different co ops that I was doing through university. So my first Co Op, I had worked at an investment bank, which is pretty cool. I worked on the trading floor, which would, I worked with Microsoft Access building reporting for all the traders that were, were buying and selling different stock options and bonds and whatnot. So that was a pretty cool experience. I worked there for about a year. Then I moved on to working at Exxon Mobil, which I learned really valuable lesson, which was it doesn't matter how much money you're making, is if you're miserable, it doesn't all because I was I was a intern getting paid 28 bucks an hour, which was crazy. Most of my friends were getting paid 15 bucks an hour for their co ops. And I was making all kinds of money, but I just just hated the culture, people there didn't really seem to like their jobs, they were sort of just it seemed like they were in it because of how much money they're making. And they obviously can't move, obviously, oil and gas is a huge, huge company. So at that time, I had just been sitting at my desk in in between tasks that they gave me I read the entire WordPress Codex. And I got really, really good at WordPress, just by sort of taking in all of the possible information that I had had learned. So by the time it came around to getting my third Co Op, I worked with a little agency, a video agency in Toronto, that called angle Media Group. And they did quite a bit of web work sort of along with the video work that they had done. And I was just building websites for them, which is amazing because they brought me on and I can basically just do any of the stuff we do. We often pitched projects to people including web work, just because we now had that skill on I was the only web developer there. So it was pretty neat. And obviously at this time I was still doing freelancing during the nights and weekends and stuff like that. And by the time I got to the end of my third Co Op, I had the option of staying with the that agency. But I really what was happening is I would work all day at the agency. And then I will go home at night into freelancing. I was making more money at night on the freelancing stuff than it was during the agency job. So I actually sat down with my my co op coordinator, and I said, like, Look, I don't want to do another Co Op, I know what I want to do with my life. I'm already doing it. I just have to finish up two more years of school. Let me Co Op for myself. And they they went ahead and said, Sure, you can you can call for yourself as long as you write your own Co Op review. - -37 -00:15:53,130 --> 00:15:58,080 -Scott Tolinski: That seems pretty reasonable. Yeah, like for them to just say cool to that, like that seems pretty reasonable. I - -38 -00:15:58,080 --> 00:17:12,660 -Wes Bos: know. It was great. And I like showed them I was like, I had gotten, I think it was like $3,000 from the government to like start a small business through a program that they had a pod $3,000 laptop. And and I just like went full blast. I was still in school at this time. But I went like full blast into being a freelance developer and I had, I was making pretty good money at the time, I had really good contacts with the people I was working with an agency here in Toronto called jet Cooper, which got bought out by Shopify it and it is now Shopify Toronto, it is huge. I was doing a lot of Facebook applications. So I finished up that last Co Op that was co opting for myself. And I was like, at that time full blown into being a freelancer running my own business. I have one more year of school done. And at that time, I sort of, I didn't check out of school, but I stopped caring all that much. I got decent grades, but I wasn't as focused on it as some of my my friends were, because I knew exactly that I wanted to be a developer and I wanted to double down on running my own business. Yeah. - -39 -00:17:12,660 --> 00:17:37,500 -Scott Tolinski: And that's really hard. I mean, I remember being in school and I had to take, like, musicology. I remember taking musicology is like the history of music. And like, I had to memorize all this stuff about all these pieces of music. And like, I nearly failed out completely, because all I was doing all class was programming, like I'm sitting in the class, get a seat in the back. Yeah. And program because that's what you want to do. Right? You're doing that. - -40 -00:17:37,680 --> 00:22:27,180 -Wes Bos: Exactly. And I was like, just so I really liked school because it gave me that time to just explore and be happy A lot of people ask me like, should I go to school, or should I just like go straight into this. And at the time, I didn't have those stresses of having to pay bills or anything like that I was just in school, having fun, hanging out my friends and learning to code. So I really picked up a lot of that at the time. I'm gonna take a quick break and talk about our sponsor, our sponsor is fresh books, fresh books is cloud accounting software that I use myself, to invoice all of my clients to invoice anytime maybe I go to a conference and I have to build someone for some of the maybe a workshop that I have done or maybe a flight that in to be reimbursed for. So fresh books is where I do all of my accounting, all of my expenses go into fresh books I, at the end of the year, I often end up having three or four different currencies that I've built in to people and it's just the best way to manage your online invoicing and accounting software. At the end of the year, I just give one big export to my accountant and he's super happy with that. So if you are and what I'm really happy about Freshbooks is that when I first started when I was just small fry, I started with Freshbooks and it's sort of grown with me over the time. And I'm happy that it didn't start off just using Microsoft Excel or something like that, because I can look back on years and years of data as to how I've done and how my expenses have grown and shrunk and all that good stuff. So if you're looking at billing someone check out fresh books@freshbooks.com for slash syntax, make sure you pop in syntax in the How did you hear about us, you'll get 30 free days. All right, so back at it, um, where were we? Oh yeah, so I was had about a year left of school. And at the time, if you remember it was the popular things on the internet were Groupon and all of these daily deal websites. So I had love these daily deal websites because I was dating my wife at the time and we were poor. So we would buy this like sushi Groupon and then go and redeem it at the sushi restaurant and go for it. dates all via Groupon. And I had hated checking all the websites and I had hated getting the email. So I built this little PHP script that would sort of just collect all of the different daily deals and put them into one website. And it was like just deal page, it was called deal page, I think it was deal page.ca it later moved to deal page dot m e. And it just showed us all and the really cool thing about that is that it would scrape all of the deals, it was just a brutal PHP script that would would run every single time someone went to the website, it was so slow, I learned later learned what caching was. And then it would click on affiliate links. So almost all of these daily deal websites would either give us cash, when somebody bought the deal, or they would give us credit. And it was amazing, because people would go to the website, they would buy one of the daily deals, and you would get like a cut of it. Or you would get like a $10 signup credit. So after a year or so of actually running this thing on my own, I was just just raking in the affiliate, like I had something like $7,000 worth of credit to one of these websites, I had thousands of dollars in Groupon bucks. And I was getting all these different affiliate checks coming in every single month from from these websites. And I thought this is this is awesome. Like, I'm really excited about this. And people started telling me I had a startup. And I was like, wait, I have a startup that I put together. But it was pretty cool. So um, I at the time, I was just like, kind of like still learning like what like real web development was. And I had a really good friend of mine, Darcy Clark, who also had was like the the only employee of jack Cooper at the time. And he was just teaching me all kinds of stuff, I really owe a lot to him in terms of like getting me up to speed on on different web technologies. And he basically came to me and was like, look like, you need to build this thing properly. And you need to scale it to all the different cities that there possibly are. Because if you're making thousands of bucks on one, one actual website that or one city like Toronto, like there's lots of cities in the world that you could this could work for, right? - -41 -00:22:27,270 --> 00:22:28,830 -Scott Tolinski: Yeah, right. Yeah, seriously. So - -42 -00:22:28,830 --> 00:23:33,270 -Wes Bos: we, we he he came over and he taught me codeigniter, which is a PHP framework, sort of like Laravel. And we built this like really sweet scraper thingy that would like, go off and scrape all the websites at 7am. In the local time on that one, I had built all of the actually didn't know what transactional email was at the time, which is like sending one of emails. So I use the MailChimp API to create a list for every single city, you would sign up for a city and then the MailChimp API would hit every single city list, and then make an email of all the deals and then send it off to each of those people, which is pretty cool. So we built this pretty sweet thing. I learned so much doing that, and then ultimately just tanked because the whole daily deal industry then tanked people stopped paying their affiliate checks in. And all of these websites went under or got bought out by by actual Groupon. - -43 -00:23:34,020 --> 00:24:07,410 -Scott Tolinski: Yeah, my my brother actually worked at Groupon for a long time, did he? Before getting out and I remember the culture there along the time was getting a little scary. Like he didn't know, you know what he should be doing? He obviously left before. I mean, Groupon still going and everything like that. Yeah. Remember, there's a while where you're like checking in on him every month, like so. Like, are you looking for something else right now? Or like, you know, because you just didn't know what the that was gonna happen. Because all that stuff was just sort of blew up got huge. And yeah, you know, it was - -44 -00:24:07,410 --> 00:25:55,350 -Wes Bos: it was a crazy time because like people all over the place. We were like talking about like buying it from us. And like I had no idea about any of this stuff at the time. And if I was smart, I probably would have flipped it for some cash, but it's sort of just just died. It's done its own death. And I had a really, really cool experience. In building it. I learned a lot about it along the way. And once once I had sort of wrapped that up. I had finished school. And it was time for me to to go full blown. I proposed to my right wife right out of school. And it was time to sort of double down and start building this business that was mine. So probably for maybe about three, three or four years. I was doing lots of WordPress. I had gotten pretty heavily into JavaScript at that time. So I was being hired for a lot, a lot of front end stuff, I started to really figure out the like, freelancing thing, like where the good paying clients are, and whatnot. And I was also like, super getting involved with the community. I was attending a lot of meetups. I was part of this like back channel. I was like, super into IRC at the time, which I was in the jQuery IRC room. And we would just help people with whatever jQuery questions they had, I was really big on Stack Overflow. And that opened up some doors where I got invited to this like sort of back channel, jQuery IRC channel where a lot of my like heroes, Paul, Irish, and whatnot, all of those folks were hanging out in there. - -45 -00:25:55,740 --> 00:25:58,050 -Scott Tolinski: Yeah, to remember the yay, yay, query - -46 -00:25:58,050 --> 00:26:01,680 -Wes Bos: show. It was although a query, folks. Oh, yeah, I - -47 -00:26:01,680 --> 00:26:04,500 -Scott Tolinski: know. That was like, that was the show that was the best. So - -48 -00:26:04,500 --> 00:28:09,390 -Wes Bos: it was so good. So what happened after that? Yeah, I was I was like, just loving how especially like looking at people like Addy osmani and Paul Irish. And they wanted, they were just like, helping people understand how it worked. And I was like, That's amazing. I would like to do that as well. So I started whipping up some screencasts. I got a YouTube account, I started doing like some WordPress screencasts. I started doing blog posts about different WordPress things here and there. And what happened is, in Toronto, we have this thing called ladies learning code, which is a not for profit that does these like Saturday workshops that help women learn how to code. It's pretty straightforward there. Obviously, they've expanded into Kids Learning code and girls learning code now. And we had run one of the first weekend workshops on WordPress, and they had asked me to actually lead it. And I remember being like no way That's so scary to be able to do that. But I ended up doing it. And I loved it. I love being able to stand up there and explain to people how queries in the loop worked and how different the different theme files came all together. And, and people like the way that I explained it, I remember being like, Oh, I have to like, study how how teachers teach and stuff like that. And then I was just like, what if I just explain it, how I understand it. And that was a huge breakthrough moment for me because I realized that he don't have to be so academic about teaching people and it doesn't have to be so stodgy. I remember reading tutorials, and all these like technical books, and just being like, I don't understand how any of this works. But if I can explain how I understand it, and in ways that makes sense to just regular people, maybe that is something that will like and that's initially what started my whole training tutorial. Empire profits an empire? - -49 -00:28:09,870 --> 00:28:49,560 -Scott Tolinski: No, I mean, this is same thing. I mean, I totally understand that, right? Like this, this this space of teaching where you don't know how to teach. And that's a huge benefit. For me. I, you know, I thought about it like you, but it's really like you came down, you just started making this stuff. And I was surprised at how many like, I'm surprised at comments, I get on videos from 2012, where people are like, this is the best video on this topic. I'm like, I made this when I had no idea. Yeah, what I was doing, right. I mean, and I think that's a huge benefit for both of us is just that we're teaching things, how we understand it, or how we are, you know, how we think and it just resonates. - -50 -00:28:50,010 --> 00:32:26,460 -Wes Bos: Exactly, exactly. So the laser encode thing was going really well. We're doing it a couple times, we're iterating on the WordPress content, that content started to be used by people all over Canada. And then we sort of had this idea, like people were like, like, all amped up after the workshop, and they're like, Where do I learn more? And we're like, well, like, we don't really have anything. So we toyed with this idea of doing like evening workshops that were paid with ladies learning code. And we did a bunch of them. They're they're pretty good. But it just like wasn't like media enough for for what we want it. So sort of what came out of ladies learning code was this thing called hacker U. And what hacker u was, was sort of like evening classes that teach people web development. They're there. We didn't realize it at the time, but it is what a coding bootcamp is today. So we started up this thing called hacker U is myself as the only instructor and then the girls that had founded ladies learning code started up hacker u and I wrote all the like, sort of like The intro to HTML and CSS content. And from there, we had delivered that a whole bunch of times after a couple years, they decided to do a boot camp because we were just doing them on evenings. And then they I wrote all the content for the first boot camp, I delivered the first boot camp took a bit of a break from the boot camp. After that, I did come back and do a second boot camp a year later. But I had I had liked doing my client work as well. So I didn't want to be doing that, that totally full time. And just over these years of being a teaching people I really like had focused in on like, how people understand and what are common trip ups for people and being able to be there in person and see the look on someone's face when they're confused. And see the look on someone's face when they have enlightenment. It really like helped me hone in on like how best to explain a topic to someone and how much to explain at once. And what type of exercises will actually click versus like, what totally just gets blank stares back. So at that, after that I was super into Sublime Text. And I was doing, again, like I got into ladies learning code because I was blogging about WordPress. And then I started blogging about Sublime Text. And those Sublime Text blog posts got super popular, I got there getting tons and tons of traffic to them. And like you write any blog post, I didn't know this at the time. But if you write any blog posts, you instantly have publishers knocking on your doorstep asking if you want to write a book for them. And I was, I was thrilled at the time, I remember telling my parents I'm going to write a book and stuff like that. But then like, we this is probably another topic. I like that a little bit of talking to people and I realized that the whole technical publishing industry is it's it's great. It's, it sucks. Yeah, it's, it's, it's a bit of like a, they just throw a whole bunch of spaghetti at the wall and see what sticks. And you don't get paid very much at all for these type of things. And it's just like kind of a bum deal. To write a textbook through a major I - -51 -00:32:26,460 --> 00:33:20,880 -Scott Tolinski: did a video series through a major publisher. And outside of my I forget, it was probably like 2012 ish. Yeah, 2013 I just got my first royalty check. Last quarter. It has been that long. And the most depressing thing is you see, because they give you all the sales information. So you see how many it sold, how much money it makes. And then you know, they give you an advanced my advanced with $1,000 in your royalty limit where your growth rate was so tiny, that you're just like chipping away at that thousand dollar advance for what like, you know, several years, like four or five years until you finally see additional money. And it's like $1,000 for you know, 30 plus video series is kind of, it's just not worth it at all. Yeah, so much time. Yeah, - -52 -00:33:20,910 --> 00:33:52,830 -Wes Bos: it's I remember talking to them, and like really giving them the gears because they really dance around like what I'm like, how much money can I make. And what ended up happening is that the way that were they explained it to me and I talked to maybe I talked to every major publisher out there is that, like if a book sells for 30 bucks in a bookstore, the the publisher gets about 15 of that. And then you as the author gets about 10% of that. So every time someone's buying your $30 book, you see about a buck 50 in your pocket. - -53 -00:33:53,850 --> 00:34:02,760 -Scott Tolinski: And that's subtracted from here or your your advance to if they give you an exactly exactly most likely unless of course it's different in your contract. So - -54 -00:34:02,760 --> 00:37:08,250 -Wes Bos: what I did as his blog post, we're getting super popular about some on taxes I just threw up. I just threw up a email, MailChimp signup form, saying like I'm writing a book, and people started subscribing like at a pretty rapid pace. I said like I'm writing a book if you're interested in it, I'll send you a coupon when it launches. So I started writing this book because people started signing up and it took me a year and a half because I didn't know how to write a book and I wasn't all that motivated because I thought it would wouldn't go very well and halfway through someone else released the sublime text book and I was like oh no, like it's already out there which is like lesson number one like it doesn't matter if someone else has already done the same thing. People will like yours for whatever reason you'll find your little crew that that likes your stuff better than whatever is out there and I was pretty cool for me to to learn but actually After a year and a half, I released my sublime text book, I also was realizing that some of the stuff was hard to describe in text. So I recorded a bunch of videos along with that, and I released it. And it didn't really well, I had like 2000 people on my email list. And I think like 300 people bought it, which is it, you can't even think of conversion rates that high these days. But it was like really what I needed to like to understand that you can make your own content, you can, you can go out on your own and be able to, without anybody else's platform, or whatever it is, if you can put a little bit of time into to building an email list and to building a bit of a following online, because you seem to be a bit of an expert at this, because you're blogging about it, it will really, really pay off. So that was a sublime text, book and videos. And what I realized from that is that I hate writing books, and I love making. So I decided to never write a book again. Because it's not much fun. I don't even know how many people actually read through it, there is a certain group of people who like to read books much better, but I like creating videos much better. So I was I started to go into that a lot more. So from that, I created a free course called command line power user, which was meant purely to drive traffic to my sublime text book. And if you view any of the videos today, on my command, line one, at the end of every video, it will say if you like these, check out my sublime text book. And that worked surprisingly, really, really well. And I sort of like figured out like, Oh, I get this whole I since learned that this is like a common marketing technique. But give something away for free. That is like really good quality. And people will buy your other stuff because they they like the way that you teach or they like the sort of content that you cover. - -55 -00:37:10,080 --> 00:37:15,330 -Scott Tolinski: Unless, of course you release like 1000 things for free. And then people don't want to buy anything. - -56 -00:37:17,010 --> 00:37:54,650 -Wes Bos: Oh, yeah, I guess that that can be a bit of a problem, too, as well. I guess that's a another show. But yeah, right. was saying so yeah, I had this command line power user book or video series that came out it was doing pretty well. The sublime book was continually selling pretty well. And at the time, I was like soup doing a lot of client work in Angular. And Angular was in that weird time, you'll probably remember this where they like announced Angular two was going to be totally different than Angular one. But it's not going to be released for 12 years. They said, - -57 -00:37:54,650 --> 00:38:17,850 -Scott Tolinski: yeah, it was absolute chaos. Because everyone was like, Oh, I'm, I'm done. Like, I don't want to do this. I don't want to make this change. And then there's people who are like, well, let's give it a chance, you know, and like nobody, at the end of the day knew what the hell was going to happen. Yeah, nobody knew anything. So I just remember being very concerned that I wasn't going to be on Angular anymore. And sure enough, I left Angular, you know, - -58 -00:38:17,879 --> 00:43:04,460 -Wes Bos: yeah. So without I was like, I was building all this stuff. for clients with Angular, we had some pretty big apps in Angular, and then like, angular two was gonna come out and like, it was actually like, two years or a year and a half. And I was like, I'm not gonna, like sit on my head, I'm not gonna put any more time into Angular one. I'm not gonna sit here and wait for Angular two. And I sort of, like I said, Who else is out there. And at the time, React was just becoming super popular. I went in, and I built a couple things in react, I really liked it. And I was pretty happy about it. So I decided that would be my, my next big, you know, before that, before that, I did a Flexbox series. That was that was huge for me as well, because, like, sort of like my advice to anybody, if they're looking at doing this is just like jump on some new tech. And just like ride that way. Because I put out that Flexbox series for free. And it just ballooned my email list. Because at the time, a, it was really good. And B, what is b? It was really good. And people, everybody had to know how it worked at the time, right? Because whether you're brand new to web development, or been at it for 10 years, Flexbox was new to absolutely everybody. So yeah, mysterious. Exactly. So I built my react series after that. And it was obviously much better than the Sublime Text videos in terms of production quality and whatnot on my email list had grown quite a bit because of the the free series And then I started to learn a couple things here and there about email marketing. I was continually doing quite a bit of hot tips on Twitter, which is mostly how I grew my Twitter following by posting Hot Tips on Twitter. So like I had realized, like, I have this bit of audience. And it's a, it's great for me to be able to launch these courses by myself. So I launched that react one. And I think for about two years after I launched the React one or a year and a half, I still did a whole bunch of client work. And then just as I was getting ready to launch my next free, or my next paid one, which was the s6 for everybody, I put in my I was doing a lot of contract work for Red Hat at the time, Red Hat software. And I had a whole bunch of other different clients as well. And I had spent about six months sort of sunsetting those relationships and passing them on to other people, because I decided, it's the time to go full blast into these training series I are I've done it twice now. And both of them have been more successful than I ever thought they would be. So obviously, I can just keep doing this and keep creating really good content. So I released my yes six series, I got a whole bunch of other different free ones that were sort of in between there as well. And I released my sort of the huge one for me, like the ESX. One, the React one doing really, really well. My Flexbox one was doing really well. But all through doing ladies learning code, all through hacker you also doing my own, I realized that like, people were having sometimes trouble doing any of this stuff, because their fundamental JavaScript was not a strong. And they were also just asking me like, Great, thanks for showing me this. How do I do more? Or like, what do I do to get better? What book do I sleep on? to do more? So I kept telling people, like, just keep building stuff, keep building stuff? And they're like, Yeah, but like, what, what do I build Wes? So I had for probably about two years, I've been keeping a list of like, what do I build? And it was just a list of things that people should build. And then I would give that to people. And they'd be like, well, like, Where's the answers? So I was finally like, oh, okay, listen, I'm gonna build 30 things that you should also build. And I'm going to release it. And I decided to call it JavaScript. 30 is a 30 day challenge. I had listened to a podcast about these green smoothie girls that did this, like 30 days green smoothie challenge, and we're just blown it out of the water in terms of like, getting people on board and how much enthusiasm was behind this 30 day green smoothie challenge. I was like, well, we can do 30 day JavaScript. So we did that. And it blew up. Like, I didn't realize it at the time. I knew it would do well, but like, I think we had something like 30 or 40,000. I say we it's just me here. I don't have people. - -59 -00:43:05,880 --> 00:44:51,420 -But I think we had 30 or 40,000 people sign up for it in the first week. It's well over 100,000 now signing up for it. And it's just like exactly what people needed. No one was really all that much asking exactly for that. But by by putting yours in with laser encode and hacker you just like kind of like, seeing that little those little pain points here. And there. People are like, this is exactly what I need I just need is 30 different things that I could build so that I can get better at just vanilla JavaScript. So that that worked really, really well that again, had ballooned, my is about 100,000 people subscribe to it, probably 60,000 of those are the first time someone's ever heard of me, which was massive for my email list massive for people discovering my other series, like once they had finished JavaScript 30 they go, Oh, I like I actually finished something that was fun. Like, what else can I learn from less? So that did while I released my node course a couple months ago. And now I'm starting to get a handle on like, What does running this business? I'm done client work. And now I'm starting to get a handle on like, how do I run a business? What is how do you market this thing? And how do you find out how do you teach? Well, all these things that come along with with running a training business. I'm sort of like this is not just a fun thing. I'm doing sort of like you said last clot last episode. It's not like a fun thing or doing any more for side money. Like this is my actual business now and I'm doubling down on that. So I think that's, - -60 -00:44:52,020 --> 00:44:57,510 -Scott Tolinski: that's my origin story. brings us to today where we started a podcast now. - -61 -00:44:57,510 --> 00:45:46,380 -Wes Bos: Exactly. Well, that's it. That's it. My whole, um, maybe maybe that's why I should say as well, like, my whole philosophy behind these things is that if I'm going to try and help someone, if I'm going to try and explain something to someone, I want everybody to have access to it regardless of where it's at, so I what I mean by that is not that like, it should be free to everyone, because obviously my courses are paid. But what I mean is that, like, I don't like doing too much one on one or too many answering emails or too many coffee dates, because I much rather do it on a podcast where 20 30,000 other people can can benefit from some of this information, whether it's good or not. Really? - -62 -00:45:46,410 --> 00:45:48,150 -Scott Tolinski: Yeah. Yeah. - -63 -00:45:49,050 --> 00:45:49,770 -Wes Bos: So Well, yeah, - -64 -00:45:49,770 --> 00:46:10,800 -Scott Tolinski: that was a done. That's great. I mean, I think I said this before the first episode, just that there's so many, like non conventional or different ways to get into this career path. Yep. And like, I mean, just a totally different, totally different experience. Totally different example yet, you know, here we both are. So it's it's pretty. It's pretty amazing. I love hearing stories like this. - -65 -00:46:10,830 --> 00:46:59,070 -Wes Bos: Yeah, exactly. And if I think if I think about, like, what the takeaways are, is, like Scott said, do what you're excited about, and sort of run and follow that. And also just help people like almost absolutely everything that I've done. all boils down to every sort of door that opened for me, is because I initially tried to help someone for free first. And, and people were happy about that, because I was in jQuery chat room, which got me into this, like private chat room, and I was answering Stack Overflow questions, and I was writing blog posts and answering questions on Twitter and, and all of that sort of reciprocity starts to build up. And people really appreciate. Appreciate you for it. - -66 -00:47:00,030 --> 00:47:00,960 -Scott Tolinski: Yeah, definitely. - -67 -00:47:00,990 --> 00:48:06,870 -Wes Bos: So that's, that's it, I've one thing that was totally different Scott is I've actually never had a job I've, I obviously had those co ops in school. But outside of those co Ops, I had always worked for myself. And that's, that's not just something I stumbled into, though, I had always grown up being entrepreneurial. I just remember being a kid and just every night out count my money, which sounds kind of dark. But I was just like, I remember just like sitting there like thinking like, how can I make more money, I would go to my neighbor's what go to my neighbor's like pear tree and pick up the pears and sell them on the side of the road. And I would in grade school, we would like hustle these chocolates for charity and they would give you two bucks per box sold like a huge box. And I would just like go every night, I would go out for hours and hours just selling and selling. And I just remember having this fistful of $2 bills at the end of the day. So it entrepreneurial aspect is sort of always been always been with me. And then the web development stuff I've picked up as we go. - -68 -00:48:07,770 --> 00:48:37,590 -Scott Tolinski: And I sort of the opposite. I had to learn that, like, I always had a job. So you know, level up, tuts was like, oh, we'll just put out everything for free into the world. And I'll put ad revenue and you know, maybe suborn myself on that ad revenue someday, like not knowing that that ad revenue is like a drop in the bucket and like nothing, really. So it was like, Okay, now I have to figure out how to sell and market my products. And that's like been a huge learning experience for me. Yeah. - -69 -00:48:38,250 --> 00:49:15,510 -Wes Bos: Yeah, it's, it's, we should have like some sort of, I don't even know what that show would be called tweet us if you understand what the show would be called. But like something about marketing or how to figure out what to charge and whatnot, because it's, it's a whole nother another skill set that you obviously have to learn. learn along the way, especially with marketing is there's so many, it's just a dirty word to say, especially with developers are fairly allergic to marketing. So like, how do you be genuine and for me, it just ended up being great, awesome, free shit. And people will buy the other ship. - -70 -00:49:16,410 --> 00:49:28,950 -Scott Tolinski: Yeah, I know. I had like a really hard time like asking people to buy my things just because I had never done it before. Right? Yeah, that's definitely when the skills you have to you have to get somewhere. - -71 -00:49:28,980 --> 00:49:36,900 -Wes Bos: Yeah, yeah, totally. But uh, that's cool to see that you got past that? A little bit. A little bit. Still still along the way. - -72 -00:49:37,620 --> 00:49:43,620 -Scott Tolinski: I like cringe a little bit. Anytime I send out an email that's like, please buy my stuff. Like, Oh, do I want to hit send? Yes, - -73 -00:49:44,310 --> 00:49:46,110 -I guess I want to eat this week. - -74 -00:49:46,589 --> 00:53:21,540 -Wes Bos: Me too. Like everybody like everybody. I don't send a whole lot of email. And whoever I talk to about my strategy, they're always like, you should be emailing like every other day. They have to know who you are. Like they say all this stuff and I was like, I hate diet, like, I feel I don't, I don't want to bug people too much. And I don't, I don't feel good about that. So like, there is a delicate balance that you need to hit in between, like, feeding your family, but also like feeling good about like, absolutely everything that you put out there. Cool. Um, my let's talk about sick picks. Scott did his sick pick during his origin story. I'll do mine now. So a couple years ago, I'll start us off a little story. I was at a conference. And there was a blind iPhone user there. And he was his talk was demoing, how do blind people use their phone. And it was really cool, because first of all, the battery life is amazing, because it's just a black screen, he doesn't use the screen. But he just touches the black screen and sort of moves away around. And I'm sure you can look up a YouTube video of how blind people use an iPhone. But what I took away from it was that the voiceover where if you touch a button, it tells you what that button is. The voiceover he had was cranked up, it was so fast. And I was like, how do you like, how do you understand that and he said, like, obviously, I can't see. But my like, my ability to understand very quickly read sentences is really good is that the your brain can adjust too fast. So I got really into that. I'm like, Well, I hate reading. I never read books. But I like audiobooks. I just don't have a whole lot of time for it. So I started just speeding up anything that I was taking in any YouTube video or audio book or podcasts, I would speed it up to like 1.25. And initially it sounds like chipmunks. But over time over maybe a year or two, you just train your brain to be able to listen to stuff at 1.5 1.752 x two and a half x depending on who it is, who's speaking how clear they are, if there's fast talker normally or not. So I'm just like, I don't listen to anything at one x now. And I listened to most stuff 1.5 to two x. And the one thing that always pains me is that when I'm on my desktop, I have like a video speed extension. But um, when I'm on my iPhone, if I want to watch a YouTube video, like it doesn't speed it up. So there's this really great app I found called motor read. And what it will do is you can put like, you can hook it up to your pocket, you can put text articles in it, but what I use it for is that you add a YouTube video to it and you can just like playback the YouTube video at a much faster speed. And then what I mostly use it for is that you know, like when you're trying to listen to something on YouTube on your phone, but you want to lock your phone and put it in your pocket. And like stops YouTube, this will keep playing the audio for you. Well, it's in your pocket. So TED Talks, things like that, that you don't necessarily want to watch the video for. It's gonna gonna do that for you. So it's called motor read. I think it's, I think you got to pay for it if you want to do a certain amount per week or per month, and I just just started using it as using sine previously. Yeah, - -75 -00:53:21,780 --> 00:53:29,850 -Scott Tolinski: I actually heard that YouTube is going to be adding in native functionality to increase the playback speed in their native apps. - -76 -00:53:29,880 --> 00:53:30,930 -Wes Bos: Oh, I hope so. - -77 -00:53:31,710 --> 00:54:32,880 -Scott Tolinski: I know me too. I know actually is really funny. I know. That's like a tip you like to use for podcasts, right is to listen to them at like 1.2 times the speed or something like that. I don't know what your number is. I have a number that I prefer as well. I was like, I was actually recently reaching out to some editing forums like is there any way to make Final Cut Pro just like playback all audio at 1.2 in playback, but not in real life? Just so like editing can be a huge pain. Yeah, just sitting and listening to that. All right. So like if I could listen to everything a little bit faster, I'd get editing done a little bit faster. Obviously there isn't a way to do that. But like there's not I love No, no, there isn't I was really well. If you know of a way again, reach out to me because I did some research on Creative cow and looked around and I could not I found most of the time. If I were asking the question, the answer would be like, why? Oh, yeah, you want to do that. Because when I editing large amounts of blank text, you know, you know text? - -78 -00:54:33,450 --> 00:55:15,900 -Wes Bos: Well, when I because when I edit my screencasts I need to make sure that I didn't accidentally leave like a swear word in our screw up. And so what I do is I'll just, I'll hit l on my keyboard and that will speed it up. I use ScreenFlow which is totally different. But yeah, it's super popular and even like, like last week when I had to do the show notes for this own podcast. I put it out to people point nine x. And it just like it's an hour long podcast, but I got through it in about 1520 minutes. And it was fast enough that I could still listen to what it was. And then I could go out and get the links for the show notes. As I went through it, you can - -79 -00:55:16,140 --> 00:55:18,210 -Scott Tolinski: you can do that in ScreenFlow. He said, - -80 -00:55:18,240 --> 00:55:24,630 -Wes Bos: Yeah, yeah, you hit l on the keyboard and it will it will speed up there. It's kind of choppy. It doesn't sound as good as Okay, - -81 -00:55:24,660 --> 00:55:35,160 -Scott Tolinski: like quick time if I don't cook and do that. I don't cook and do that as well. But it to me, I think that might be a little bit fast. I don't know if ScreenFlow speeds or maybe just a little bit slower. But - -82 -00:55:35,549 --> 00:56:02,670 -Wes Bos: yeah, I think it goes like 1.5 to 1.7 to one point or to two. So there's different levels that you can use to increase your playback. Cool. Um, so that's my sick pick, check it out motor read. Other than that, that's the end of this podcast. Thanks so much to fresh books for sponsoring. And we'll see you in the next one. If you've got ideas for the show or you have any feedback whether you think tasty treats is cringy or not tweet us at Wes - -83 -00:56:02,670 --> 00:56:09,780 -Scott Tolinski: Bos esbls. Scott is an ad s kolinsky stll i NSK - -84 -00:56:09,840 --> 00:56:19,170 -Wes Bos: i and our own Twitter is syntax FM. If you want to follow that we just broke 2000 followers. Head on over to - -85 -00:56:19,170 --> 00:56:29,130 -Scott Tolinski: syntax FM for a full archive of all our shows. Don't forget to subscribe in your podcast player. Drop a review if you'd like the show. Until next time - diff --git a/transcripts/Syntax80.srt b/transcripts/Syntax80.srt deleted file mode 100644 index cbc9cea6d..000000000 --- a/transcripts/Syntax80.srt +++ /dev/null @@ -1,412 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Announcer: You're listening to syntax the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,949 --> 00:00:19,820 -Scott Tolinski: Welcome to syntax the web development podcast with the tastiest treats around with me as always is Wes Bos. - -3 -00:00:19,889 --> 00:00:21,390 -Wes Bos: Hello. Hey, Wes. - -4 -00:00:21,390 --> 00:00:45,479 -Scott Tolinski: My name is Scott Tolinksi. And today we're going to be talking all about nine of our favorite top 18 new JavaScript features. Basically, we have a top 18 List of new JavaScript features that we absolutely love use all the time, and we're going to be splitting it up into two episodes. Because this is too tasty for one episode. It's just jam packed. And we're gonna - -5 -00:00:45,479 --> 00:00:50,909 -Wes Bos: have a sponsor between every single one like one of those, you know, those like Forbes articles? - -6 -00:00:53,070 --> 00:00:54,210 -Scott Tolinski: Yeah, okay, we're - -7 -00:00:54,210 --> 00:00:54,869 -Unknown: not going to do - -8 -00:00:55,590 --> 00:01:21,540 -Scott Tolinski: like a 15 minute YouTube video where they like inserted like 15 ads. She just got an ad every couple of seconds. No, thanks. We're not doing that. This episode is sponsored by to a very excellent sponsors Freshbooks, which we all know is amazing cloud accounting software that Wes and I both love and use, and M lab, which is the perfect place to store your database in the cloud as another service that both West and I have been using for a long time. - -9 -00:01:22,680 --> 00:01:27,780 -Wes Bos: Today, our longtime user, and they also came on a sponsor, so it's pretty cool. - -10 -00:01:27,810 --> 00:01:39,030 -Scott Tolinski: It's really cool. Yeah. So we'll be getting into Freshbooks and and lab a little bit more on in the episode. But yeah, let's let's kick it off with a little bit. How you doing? It's a Tuesday today. - -11 -00:01:39,240 --> 00:02:38,310 -Wes Bos: Yeah, I'm doing pretty good. Just got over a little bit of a cold. It might sound a little Froggy or boomy to today, but just got getting through that and pretty excited that I've got like so much stuff that's almost done. I've got an intermediate react workshop that had been cooking out for last like week and a half, I've got a talk on what's new in react that I'm going to be giving next week. So I've got a talk and a workshop in Toronto. And then I also am just, I'm having my course reviewed by everybody right now, which is really exciting. There's a couple people have gone through the whole thing, getting some really good feedback, just to some small little edits, little hiccups, little things where I left myself, like a like a false start, you know, explain something and then I go back, I left a couple of those in. So at that point, then it's done. Like I'm like right on the verge of finishing, like my life's work for the last like, month, and I'm so excited to get it all out. And then to move into some some new exciting stuff. And for people to get access to the content, let them been working on for so long. - -12 -00:02:38,520 --> 00:02:55,860 -Scott Tolinski: Yeah, it's it's funny, because no matter how many times you listen, when you're editing, you missed some things like that, there's almost it's inevitable that you're gonna miss stuff like that. And I've edited now, like two and a half thousand videos or something. And I still miss those things all the time. And I pay close attention what I mean like, it's just so easy. Yeah, I - -13 -00:02:55,860 --> 00:03:12,630 -Wes Bos: don't know how I luckily didn't I left the F bomb in one. So it's just funny because like, I don't swear a lot. But I was so frustrated once in a video and I was like, damn it. And I let one fly. And I left it in. And luckily someone who was cool, caught it nice and early. And I was able to cut it out. - -14 -00:03:13,289 --> 00:03:26,669 -Scott Tolinski: Yeah. And on another episode, I left a scream into my microphone when I have a guest editor. Yeah, he's pretty shocked. As always, it's always good to be careful about what you're, you're putting out. Yeah. - -15 -00:03:27,330 --> 00:03:30,509 -Wes Bos: So you just did a talk yesterday at what startup - -16 -00:03:30,509 --> 00:04:43,470 -Scott Tolinski: Denver, it's a Denver Startup Week, which is awesome. If you're in the Denver area, or in Colorado in general, should check out Denver Startup Week, next year, because by the time you're listening, this is gonna be over. But it's an entire week of free conference talks is seriously Monday through Friday, full days. And it's all over the city. And there's like six different tracks. There's like an entrepreneurial like a marketing, like design, track and development track, all sorts of stuff, right. And the fun thing is, is that this is all over the city. So it's not like you're just like sitting in a conference hall and just watching a bunch of talks like the conference room that I talked that was the only talk of the entire day at that location. So it like forces you to spend time in all these different startups offices around 10 verse, so you're just walking around downtown, hitting up all these different places and getting to check out different offices, different situations, and just seeing a ton of good talks. And the best part, it's like totally free. So Denver Startup Week was just awesome. I talk about my I was basically like the learning episode we did here on syntax, and I met a lot of awesome syntax listeners at Denver Startup Week. So shout out to all of you. Thank you for checking out my talk. - -17 -00:04:43,560 --> 00:05:07,170 -Wes Bos: That's cool. I always love seeing people's offices and kind of the the snacks and the like stuff that that we should actually ask if you work in an office and you have good snacks or something like that. Tweet a pic and at syntax FM hashtag syntax snacks and we want See what your office snack Hall looks like? Yes, I'm always jealous. I have a tiny little wine fridge that I put my Lacroix in. And that's it. - -18 -00:05:07,170 --> 00:05:18,260 -Scott Tolinski: It's such a good use for a wine fridge. I caught some trail mix that had some dried mango in it and stuff. It was kind of good. Yeah, that's pretty good. And this place had some good snacks. - -19 -00:05:20,190 --> 00:05:57,060 -Wes Bos: Awesome. All right, let's stop goofing around and get into this. We've got man, this is a huge list of the Top 18 things that are new in jazz. So over the last, what, maybe two, two and a half years, obviously, we've had ESX. That's where most of these things are coming from. But JavaScript in general has has really evolved. And I think over the last like, like, obviously, they've been out for a couple years. But we've been seeing like serious momentum and people picking up these features in the last, I don't know, a year, year and a half. So really excited to dive into all the different parts. So let's kick it off. You want to grab the first one there, Scott? - -20 -00:05:57,090 --> 00:07:14,550 -Scott Tolinski: Yeah, this is like maybe the most the good intro, it's the most basic sort of new feature in JavaScript recently, which is constant let, which are the new variable declarations that allow us to have some variables in my opinion, that are just a little bit easier to control because they they're sort of a little less overreaching. In some ways, for instance, both constant let, they can't be redeclared. So you're gonna see an error. If you define a variable with let Scott is equal to I don't know a number, maybe it's my age, right. And then if you try to define it again, you're going to run into trouble because you can't read declare another variable and const in particular can't have its value changed as in you can't assign a variable with, let's say, const. Scott is equal to my age. And then you can set it to Yeah, 42 though Debbie wild if I was 42. But it didn't you then you can't go ahead and then do Scott is then equal to something else, you can't do it. That said const isn't immutable as then it's not going to like complain, if you're mutating something like the array or the object or whatever, it just can't be rebound. So you can still change properties in it, you just can't, or you just can't like rely on it as being like totally immutable. - -21 -00:07:14,910 --> 00:08:12,060 -Wes Bos: Yeah, that's it's custom sort of the confusion to people. And the example I always like to give is, if you make a const, Wes is equal to an object properties on websites like my name, my age, my hair color, my height, all of these properties are on Wes, and they can be changed. But if another West was born, it would not be possible to wipe out my variable called West and replace it right? So the binding to the object or the binding to the array cannot change, but the properties inside of that can change and, and when it's the case of like a string or a number or Boolean, then it's just a value. And in that case, you can't change anything about it. One other thing we said about constantly is that they are block scoped instead of being function scoped like var is. And it's kind of interesting because of our like function scope is also a block a block is anytime you've got curly brackets, or I like to think of them as little fences, right? And they keep your variables in - -22 -00:08:12,060 --> 00:08:13,620 -Scott Tolinski: a secured analogy. Yeah, - -23 -00:08:13,650 --> 00:09:04,710 -Wes Bos: yeah. So any, anytime that you have like a block, if statement, a for loop, anything like that, if you declare the variable inside of that block, then you cannot reach it outside of it. So because of that, sometimes you have to, outside of the block, declare a variable as let, and then you can go back and update that inside of a block. So it's kind of interesting. I think it solves a lot of accidental scope hoisting with variables and it I myself use that maybe we should talk about this, like what do you use in your everyday I'm personally, I use const by default, and then I use let only when I need to re declare it, and I feel like that stops me from accidentally overwriting x. I'm a bit of an idiot. I do stuff that I can't think of variable names, and I could Yeah, accidentally overwrite it. Yeah, - -24 -00:09:04,740 --> 00:09:21,600 -Scott Tolinski: I always use const pretty much like I pretty much I'm trying to think of when I even use let, it's not very often but if I do need something that's not a const I will use let rather than var. I've pretty much eliminated var from my vocabulary usage entirely at this point. - -25 -00:09:21,919 --> 00:09:49,399 -Wes Bos: Yeah. And that's not to say that you should do that as well. You do your own research and yeah, I'm sure you can write perfectly fine. There's a lot of people out there that say like, var is dead it's a terrible it's like a go as far to say it's harmful. It's a bad practice and like Meanwhile, we were writing perfectly fine applications before we had cotton Lutz So yeah, I trust you. You're probably if you are still using var that's not bad. You probably can get in use it and be perfectly fine with with it. - -26 -00:09:49,500 --> 00:11:02,760 -Scott Tolinski: Yeah, I know. I would be weary of anybody with extreme views on anything like that, like never do this or whatever. Just do your own research in that regard. Cool. So let's get into it. Number two, which is actually I love this one, because this is one of those features that makes your life easier. And just a little bit of ways constantly. And this is template literals and template strings. And this is basically through the use of backticks, to allow you to insert variables into your strings via dollar sign, curly bracket, then your variable name, bracket, as opposed to having to have one string, a plus sign, another string, a plus sign. And one of these things that this kind of low key fixes is the, you know, sometimes when you had a variable, and then you had a space, like a string space, and then another variable, you had to do like a plus. And yeah, I've been string with this space. And then a plot like this just saves so much of that by allowing you to use your variables directly into your script. And this is one of those things that like when it was in CoffeeScript, I remember being like, I love this feature. And then obviously now that it's in JavaScript, I can't can't not use it enough. - -27 -00:11:02,850 --> 00:11:28,950 -Wes Bos: I can't believe how handy This feature is for myself, because concatenation was always so hard just because you have to open and close your quotes. And another upside to backticks is that you almost never actually have to type a backtick. Whereas if you use single quotes, sometimes you need a single quote inside of that. And you got to, you got to like escape it or vice versa with the double quotes. I've met some people that only use backticks. I haven't gone there. I'm not sure why I haven't gotten that. Like, - -28 -00:11:29,220 --> 00:11:34,380 -Scott Tolinski: there's any I like I like linters that change all of your quotes to backticks. I like that. - -29 -00:11:34,439 --> 00:12:42,330 -Wes Bos: Yeah, maybe I should, I should take a look at that. The reason why we love this so much is because the concatenation operator, the plus operator is so loaded, because it's for concatenating strings, but it's also for adding numbers together. Yeah, same thing. So that's a little bit weird. I'm a big fan of having to do that. And the other thing that we have is tagged template literals. So along with using template literals, which is backticks, you can also put a You can also tag it, which is kind of like a function, the way that will work is that style components uses this. So you can say like style dot div and then backticks. And the style, that div is kind of like the function name. And what that allows you to do is you can define a function. And when that runs, it's going to give you the entire template string and all of the pieces as well as all the variables that were given to you. So if you want it to not just interpolate your variables directly, but you want it to perform some sort of no special work on them, like creating a styled component, then you could totally do that. I don't use that all that often. But I have seen some some clever use cases of it, especially in stock components. - -30 -00:12:42,360 --> 00:13:18,450 -Scott Tolinski: Yeah, yeah, stock components was the first time I saw that technique. And I remember being like, Oh, this is kind of cool. And again, I don't necessarily write that much code that uses it that myself other than the things in stock components or libraries that are using it, but it isn't really neat feature. So just realized I had a little bit of a operational, if you could call it that issue, I said, I can't not use it enough, which I guess is like to know, like, if this was JavaScript, I'd have to write that out. I can't use it enough. I was just, I was just trying to be clever. And I ended up shooting myself in the operational foot. - -31 -00:13:19,590 --> 00:13:51,390 -Wes Bos: One other thing I want to while we're talking about quotes here is there's this toggle quotes extension that it used for VS code, and it will toggle you between single quotes, double quotes and backticks. And you just set up a little, you set up a little keyboard shortcut for it, and it will just kind of cycle you through all of those. So I use that all the time, especially when you have a single quote and you go, Oh, I need to interpolate something here now had to switch it back to back ticks from single quotes, which is maybe a an argument for just always using backticks. But I use this little keyboard shortcut all the time. You know, - -32 -00:13:51,390 --> 00:14:07,529 -Scott Tolinski: I just love my I love that when my linter fixes it all for me. Because sometimes it's even faster to just write like, if you're just concatenating one at the end. Yeah, just variable plus and then your variable, and then you click Save, and then it automatically puts it interpolated like that. I like that a lot. - -33 -00:14:07,590 --> 00:14:11,220 -Wes Bos: Yeah, prettier. So prettier does that if you have prettier, I was - -34 -00:14:11,220 --> 00:14:14,940 -Scott Tolinski: not sure if it's es lint or prettier. That's doing some things for me. Oh, - -35 -00:14:15,690 --> 00:14:26,820 -Wes Bos: yeah, prettier is awesome for that because I agree. Sometimes it's faster, just to quickly concatenate something on the end of a string and then just save it and then it will convert it for you. I just funny that I do the exact same thing. - -36 -00:14:27,120 --> 00:16:00,570 -Scott Tolinski: Alright, let's see. Number three is object D structuring. And this one gets a lot of use, for me, particularly in my front end react code. But pretty much anytime I'm doing any sort of, I don't know any sort of work with objects, which is very frequently and even through use of of passing in named parameters, which we'll get into, I think down the line here. But really, object destructuring is basically I like to think of it as you have an object and you're pulling things out of the object. Without having to be you don't have to you don't have to read it click I mean, you're essentially declaring a variable. So basically, here's the syntax. Let's say we have an object, which is hosts. inside of that there's a property Scott and a property. Wes right. And we wanted to pull out Scott, in particular from that object, you could do const, curly brackets, and inside of those curly brackets, Scott is equal to and then hosts. And this is going to save you from doing Scott is he or const, God is equal to host stat Scott or something like that, and basically allows you to pull out properties from your object in a really nice, concise syntax. And again, it just gets so much use for me because you end up your code ends up just being so much more readable. If you're looking at Scott, Dodd, whatever the properties rather than hosts that, Scott, whatever, it cleans up your code just a little bit, it makes things a little bit more explicit, in my mind just a little bit more clean. - -37 -00:16:00,750 --> 00:17:47,280 -Wes Bos: Yeah, having top level variables instead of an object where you have a property inside of it is often really clean for templating. So I'll often have a function that returns an object, and I need to pull like it returns a person. And on that you have a name and age and a height, and you only want to pull the name and the age, you can just say const name, comma age equals get person and because that get person function returns an object, you can just immediately D structure the result of that into their own top level variables. And while we're on that as well, often I'll have a Ajax function that's like a get hosts, and what the what that will return axios does this they return you a data, right, and I hate having like a variable called data. Yeah. So you could if you think it's like a response dot data is what you have. So first of all, I want to I don't care about the response, I just want the data. So you can D structure data into a tupple variable. But then again, data is not a great variable name. So you can also when you're destructuring, something, you can rename it at the same time. So say const, curly brackets, data, colon names, equals get hosts, it's a little bit much to like, look at the syntax for this because it's there's a lot going on there. But if you really break it down, okay, okay, this is a function that returns an object. This is destructuring data, and then I'm just renaming it immediately into a variable called names. Because often, like, if you try to destructure something into a variable name that is already in scope, then you have a problem, because you are are overwriting it, or you run into an issue where you have the same variable name in a different scope. Yeah. And that's, that's not that's gonna be confusing, right? I have an excellent rule that makes sure I don't do that. - -38 -00:17:47,300 --> 00:18:32,160 -Scott Tolinski: Yeah, I know, that could be like, for me, personally, when I use Apollo, your data comes in as data, right. And if you have to multiple queries, or data coming in from two different places, they're intersecting there, that's definitely a big time way to rename things, or I do I use this a lot in I mean, I use destructuring, all the time to pull out the properties in from this dot props, right. So you don't have to write this props, or from states, you don't write this dot state in react, all that sort of stuff. I'm, I'm a huge, huge fan. And I'm also a huge, huge fan of one of our sponsors today, which is Freshbooks. Makes cloud accounting software just so incredibly easy, and they have some of the world's best customer support. It's one of those things that people just talk about, because of how good it is. - -39 -00:18:32,460 --> 00:19:46,310 -Wes Bos: Yes, so freshbooks.com forward slash syntax is where you're gonna want to go to sign up for a free trial. I think it's a 30 day unrestricted free trial. And this is something that you need if you're sending an invoice if you're trying to keep track of expenses for anyone, whether you are a small business, you got a couple employees, whether you are a freelancer, or someone that's just doing a couple little side jobs, you need to keep track of it. Because we all know how stressful that is, at the end of the year when you need to do your taxes. And you know that you've had income from a couple different sources, but you don't necessarily have invoices for them. Or maybe your invoices were done in Microsoft Excel, and you can't really find them. Freshbooks will keep all on the up and up nice and clear. You know, always it's kind of neat, because like at the end of the last time we recorded this, Scott and I went into my fresh books because I do a lot of the billing for the sponsors. And we just kind of went through them all and said, okay, who's paid, who hasn't paid? What do we have? And then I sent Scott over or sorry, Scott sent me over an invoice so we can split the income from our sponsors. So if you are looking to do any sort of invoicing, billing expenses, check out fresh books, and make sure you enter in syntax in the How did you hear about us section? - -40 -00:19:46,550 --> 00:19:47,940 -Scott Tolinski: Nice. Nice. - -41 -00:19:48,000 --> 00:20:57,180 -Wes Bos: Yes. I got one more thing about object destructuring here. Yeah, no, it's okay. That you had a smooth transition. So we can't we can't get in your way. When you've got those The fallback values. So when you destructure, something, it's possible that value will come back as undefined. And if that's true, you can always set a fallback value in there. And this is kind of similar to default function arguments. But this is in destructuring. So you don't have to have an if statement, or you check if there's nothing in there. And then you set it to the default, you can simply just say const, curly bracket data. And then inside of that, you can say, like the data equals and set that to your fallback value. I don't go too deep with this, just because it gets hairy really quickly with lots of like, you can do fallback values, multiple levels. But at that point, it's too hard for someone, myself included to get up to speed on what's actually going there. And I think you're just trying to show off at that point. Yeah. So I, I tend to just like, prefer, if it's more than one or two levels, I'd prefer more explicit if statement that sets some fallbacks. - -42 -00:20:57,209 --> 00:21:32,360 -Scott Tolinski: Yeah, yeah, I'm and this is one of those things that can save your butt a whole bunch of this along with sort of the the default parameter values, or default arguments, it just, it makes it makes your code just way less verbose sometimes, because you don't know that like variable checking and stuff like that you are doing before it just goes out the window. And to me, I it makes me write less buggy code, less code that runs into less issues. But again, you do want to be cognizant all the time of what you're doing in that regard. Okay, number four, here, numbers are so messed up here, what is going on? - -43 -00:21:33,350 --> 00:21:36,830 -Wes Bos: We use Dropbox paper, and it cannot figure out - -44 -00:21:37,049 --> 00:21:52,350 -Scott Tolinski: it got to do 1235123. Okay, so number four here, is going to be array D structuring. And this is pulling out values from an array - -45 -00:21:52,559 --> 00:21:54,900 -Wes Bos: as basically their index, right? Yeah, - -46 -00:21:54,959 --> 00:22:33,480 -Scott Tolinski: yeah. I don't know how much I end up using this. To be honest, I use it occasionally. But I don't feel like it's one of those things like object destructuring that I'm using all of the time. And maybe that's just because I'm dealing with maybe more object based stuff, I'm not quite sure. But I don't find myself using this, this is useful. If you want to say like, let me just get the very first item out of the array or something like that, or let me pull out the first two items. And then along with the use of the spread operator, which we'll get into, you know, maybe you can do something with their the rest of them. But for me, I don't know, what sort of ways do you find yourself using this one, it's basically again, it's just being able to pull out the items via their index. - -47 -00:22:33,539 --> 00:24:09,240 -Wes Bos: Yeah, I, I use this a lot. When I only care about the first item, I'll give you an example. In my advanced react course, we have two queries item in items. And the item query can only be used with unique values, which is the ID of the item. But if I have a query where I want to find something else based on maybe its slug based on its price based on the title, and I know that if I want to be able to query that I can't query it based on the single item, because there's a possibility that there'll be multiple matches, and the query just doesn't support that. So I need to use a query that will is items with an S in that will return almost always in my case, I knew that it would always return to me an array of one thing, or if they return multiple items, I just wanted the first one. So I'll often say const, square bracket item equals and then you write your query and then that will immediately take the first item that was in the returned array, and throw it into a variable called item. So I thought that's, that's pretty much where I use it. And the other option that I'll use it is with the rest, which we're going to be talking about what the rest is, that's the three little dots that you often see, that's that can be a spread or can be a rest. We'll talk about that. Oh, I just got one more swapping array values. I don't use this all the time. But sometimes you have two variables that need to be changed, like swapped between the two, right? Like so. If you have like two people that are currently playing a game, and somebody is serving and somebody I don't do you ever play volleyball? What's the name for someone that's not serving? - -48 -00:24:09,779 --> 00:24:15,660 -Scott Tolinski: Oh, I guess you'd probably say I there might be an official name for it. But I would have just said receiving Yeah, okay, well - -49 -00:24:15,660 --> 00:25:07,650 -Wes Bos: come server and receiver. And you can have like, we'll say like, let server equals Wes and let receiver equal Scott. And then a certain point, we need to switch those, right. And what we could do in that case is you can swap values by destructuring. It and this might be a little bit this is we're trying to code on the podcast here, but you say let square brackets server comma, receiver equals to array receiver comma server and what they'll do is you just you make a quick array, the opposite values, and then you can just destructure them immediately into it and they have to be lat because you have your reassigning the value there. But I thought that was a pretty neat way because before you had to have a third variable that would like temporarily hold The other person, the other one, and then it's a bit of a pain. I don't I very rarely actually run into having to do that, though. - -50 -00:25:07,680 --> 00:25:34,050 -Scott Tolinski: Yeah, I think that's one of those ones that like when I would hit that I would look it up and be like, Oh, that's clever and then not use it again for a little while. I think for me, the, the like the the time I find myself using it is like when an API brings back data, and sometimes like, it gives you a success message, maybe first or foremost, and then the data second or whatever, and then maybe some other stuff that you don't care about, necessarily. Maybe that just the data comes back that way, you could pull that first item out. - -51 -00:25:34,260 --> 00:26:09,090 -Wes Bos: That's a perfect example is object dot entries, and promise dot all both of those return. Let's talk about promised all if you promise dot all and array of three promises, one for the weather, one for sports scores, and one for your GitHub promise that all is going to return to you. When did they all resolve it's going to return to you an array of three pieces of data. And you could destructure those three, it's always in the order at which you passed it. So you could just destructure that into weather sports and GitHub variables immediately. Interesting. Bam, - -52 -00:26:09,120 --> 00:26:19,320 -Scott Tolinski: bam, man. I don't use the data. I don't use the all promises. Really. I don't know why I don't I just don't ever find myself needing to do that. Maybe I will at some point. - -53 -00:26:19,650 --> 00:26:34,800 -Wes Bos: It's awesome for when you need to wait on multiple pieces of data that are not related. Yeah, they fire off at the same time. Because if you were to a sink await it, then then you'd have like this kind of waterfall that's unnecessary. Yeah, - -54 -00:26:34,920 --> 00:26:55,260 -Scott Tolinski: it's so weird. Because like a lot of some of these things, even like race conditions with data and stuff a lot. That stuff has been totally evaporated for me because of Apollo and graph QL. And I'm so sad. It's like the server's handling it. And I just, I mean, I wrote the server code. But still, it's like, I don't have to think about any of that stuff anymore. I just tell it what I want. It gives it to me. It's so nice. - -55 -00:26:55,290 --> 00:27:17,070 -Wes Bos: It's interesting to like, it depends on like, the type of stuff you're working with, right? Because Oh, another good example of array destructuring is you're working with Canvas. And if you loop over Canvas pixels, you get RGB a right. So you could destructure them in two variables called red, green, blue alpha, because they are sequential. - -56 -00:27:17,160 --> 00:27:19,650 -Scott Tolinski: Nice, man. Fine. Yeah. Fine on this exam line. - -57 -00:27:19,650 --> 00:28:29,640 -Wes Bos: Yeah, tons of examples. All right, next one we have is number five, yes, is function puram D structuring. And or maybe this is called function argument destructuring. Because a parameters when you define the function in a argument is when it's called. So function argument. destructuring is when you get, you have a function, and it gives you like a payload. And this is something that happens in Apollo all the time, the Apollo will give you a payload and inside of that payload, you'll get a data property, you'll get an error property, you'll get a loading property. And then you can also get some like methods inside of there for re fetching data and pagination and whatnot, right. And often, you don't want the entire payload, you just need a couple things, you want it you want the error state, you want the loading state, and you want the data that came back, right. So when you define the function, you can immediately destructure that payload into three separate variables, data loading, and error. And then that will is much nicer. Same with like props, if you have a stateless functional component and react. Your function gives you props, but you can destroy it. Sorry, it is pram, it's not, it's not arguing. - -58 -00:28:30,510 --> 00:28:31,740 -Scott Tolinski: I was gonna say something. But - -59 -00:28:32,280 --> 00:28:44,790 -Wes Bos: yeah, I don't know I'm doing you take your prop. And you don't say like props dot name, or props dot age, you can just restructure props into name and age variables directly when you do define your function. - -60 -00:28:44,970 --> 00:30:10,410 -Scott Tolinski: Yeah, I use this 24 seven, seriously 24 seven, every single file that I write, because I'm almost never passing in arguments anymore, are into functions like I never have parameters, essentially, that aren't named parameters anymore, and maybe not never. But a lot of the time, I'm using a named parameters, which we'll get into in a little bit. And like, this just makes that process so easy. Everything is named, everything comes out named, you don't even worry about there being an object. You don't care about the order, and you don't care about the order, it just is so much more organized, and in my opinion, so much more readable. I use this again, constantly, especially because I'm using Apollo. And these render prop functions. It's like the perfect use case for that. A lot of the libraries I use the stuff that makes it like react spring is what I use to do all of my animations and react spring spits out essentially you have a transition component or a spring component or whatever. And then you have your render prop. And that function just spits out essentially your CSS values that are animating. So instead of having well if you're animating all values for one thing, you just use the styles object that gets spit out there and throw it on your component and animates all those styles. Or if you only want like the x value, you could D structure the x throw it in your style, specific And watch it like animate. I use this 24 seven. Yeah. Um, okay, so let's get into the next one, which I would say this is a pretty big this is this is a big one right here. - -61 -00:30:10,410 --> 00:30:11,400 -Wes Bos: That's a biggie. - -62 -00:30:11,400 --> 00:30:44,880 -Scott Tolinski: It's a biggie. Yeah. And this is promises. Now, promises are one of those things that if you're a new developer, you might not understand the necessary like the why. It's only when you run into situations where you have code that needs to run asynchronously that you run into why I need promises, or maybe you've done a couple callbacks. And you're like, I don't see what's so bad about callbacks. Like they're like, could they say callback hell, but this is this is just swell. You know? What? Yeah, it's pretty good. I came up with that just now. - -63 -00:30:45,270 --> 00:30:47,190 -Wes Bos: make that up. You bet. I should be a sticker. - -64 -00:30:47,250 --> 00:31:16,080 -Scott Tolinski: There should be a sticker. Yeah. But it's not very long in your dev career before you hit a situation where you have a callback instead of a callback, and you have a callback. And you're trying to figure out how the heck to get that data out of those callbacks to go do something else with it or something else? And and you're just sort of like, Huh, well, I gotta return, like, what do I do with all this, this nested functions inside of a function is out of a function inside of a function. And that, my friends is callback hell. So income promises, - -65 -00:31:16,170 --> 00:32:50,430 -Wes Bos: yes, promises are sort of like an IOU for something that's going to happen in the future. And the reason why we need promises is because if your function will not immediately return a value, either have to you can't just like that function won't stop, right? Like if you need to, if you have a function that needs to return a value in three seconds, or it needs to go to an API or return a value. After it's returned from the API, those functions don't wait, I always say JavaScript waits for no one, right? Because Because of its a synchronous nature, so what you can do is you can return a promise immediately, if you give them like a little IOU here, I promise, I'll bring you something back at some point, or I'll drop the ball and reject it. And then you can, and then you can listen for that promise to the words that we use our resolve, that's when it went right or reject, something went wrong. And you can then listen on those promises with a dot then. And what's so nice about that is that you can chain these promises at one level deep, and then you can if you have a bunch of like sequence sequences that need to happen, you can just kind of keep chaining, then then then at one after another, I have a talk if you go to YouTube and search for a sink. Oh, wait, Wes Bos. Yeah, if you search a sink await Wes Bos and the first one that comes up, I believe there's a talk that I did a conference, it's 15 minutes long, I'm actually pretty proud of that one. And it goes into what promises are, what the ideas are, and then and then further into a sink await. So it'll give you a kind of a good idea of what this really is. Nice. Again, I - -66 -00:32:50,430 --> 00:33:27,750 -Scott Tolinski: love the the whole, like we like the word promises can like scare people. But until you think about it as an actual promise, it makes so much sense, hey, I promise I'm gonna do this tomorrow. And you're either gonna do it or you're not. But you either resolve that promise, and everything's all good. Or again, like you said, you reject it, and things aren't all good. And then you you know how you can move on from there with the cat, right? promises are one of those things that they came first in like several different libraries. And everyone was using them almost immediately, the libraries got huge, and then it got added to JavaScript. And everything's been all good since and it's just been getting better and better. - -67 -00:33:27,810 --> 00:34:04,560 -Wes Bos: Yeah, it's one of those things that we've had promises for a long time, we had lots of libraries that did promises, but it never really caught on huge until it got into the language because it required actually with the sink await specifically required, like a change to the language and new syntax, the language and as well as with promises. They're all they're all interchangeable. Now. If you just use standard ESX promises, then the fact that somebody else has a library, all they have to do is return a promise, and you don't have to worry about what type of promise is this? Is that a bluebird promise or some other library? That's great. Everything works in harmony? - -68 -00:34:04,590 --> 00:34:26,880 -Scott Tolinski: Yeah. You know, I think the biggest use case for this is when you're doing anything that is asynchronous. And primarily when we're doing that sort of stuff, it's usually working with like API calls or calls out to another library or another service that's maybe fetching us some data performing some action, like charging a credit card. And these are probably primarily the the most common like day to day use cases for this. - -69 -00:34:27,150 --> 00:34:29,280 -Wes Bos: You know what else I use promises for? - -70 -00:34:29,280 --> 00:34:33,920 -Scott Tolinski: You could have said for sending money, and that would have been a good transition into Freshbooks. - -71 -00:34:34,110 --> 00:34:49,170 -Wes Bos: Oh, but we did the Freshbooks one already. I know. So we gotta save this. You know, what else I use promises for querying databases. Do you know okay, I I should not be allowed to do this transition. - -72 -00:34:49,830 --> 00:34:51,000 -Scott Tolinski: It was it was - -73 -00:34:51,440 --> 00:36:16,460 -Wes Bos: pretty good. All right. Well, one of our sponsors today is m lab and M lab hosts your MongoDB database. So if you are doing Anything in MongoDB, and specifically myself is a node package called mongoose. And what mongoose will do is it'll allow you to define your models and define what your data looks like. And then you can have like your customers or your users or your items. And then based off of that, you can then query things. However, those queries aren't going to lock up your entire server while they're happening. So if you query a list of items, the rest of your web server should still be working at the same time, right? So what mongoose will do is it will return to you a promise. And then you can listen for that promise to resolve you get your data back or reject something went wrong. And then you can you can work with the data. So if you're using MongoDB, I highly recommend that you use a service called m lab and they will host your MongoDB database for you. They have free ones that you can use just in development mode, and then they have production ready ones that will handle all of your your scaling, all of your performance, all of your security, all of your backups for you, it's great just takes the the stress of having to have a database behind your application totally outside of it. So check them out at em lab a.com. Sign up for a free one. Whenever you do your next little project as well as if you need to put one into production. Check them out for that. Sick. - -74 -00:36:16,500 --> 00:36:21,030 -Scott Tolinski: Yeah, one of my very most favorite services been using it for a very long time. - -75 -00:36:21,330 --> 00:37:47,730 -Wes Bos: Totally. What else do we got next. So next, we have a sink away, and we've done a whole show on a sink away so you can check it out. It's episode number 28. That goes into the ins and outs of how a sink await works. But a sink await is just we call it syntactic sugar on top of promises, so promises the whole idea behind promises of something like an IOU that comes back in the future, it either resolves or reject. But using them can be a little bit clumsy, because the way that you listen for a promise to resolve is you chain a dot then on the end, and then if any code needs to happen after the promise resolves, it needs to go inside of your job then. So it's it's not the greatest syntax. So we have a sink await, which allows us to mark a function as a sink. So you just type the word a sync in front of the function, or there's a couple different ways to type it in case it's an arrow function, or if it's a method on an object. And then you have inside of that you can simply just type the word await, which means a synchronous way, meaning that it will kind of like pause the function from running while it waits for that promise to resolve or reject itself. And then it will continue on. And the benefit of that is you can say something like const Scott equals await, get Scott's info. And if get Scott's info returns a promise, you can await it and wait for it to resolve and then you can just stick it in the variable. It's probably my favorite thing that's been added to JavaScript. Yeah, ever. - -76 -00:37:47,730 --> 00:38:43,730 -Scott Tolinski: It's same same here. You know what, like, my very most favorite thing about a sink await is how transparent it is. Because it's not like it's it's not like it's hiding itself. And you don't know that the function that's returning is returning a promise, like, because you have that await keyword in front, it lets you know instantly that that's going off and doing some async stuff, right. But at the same time, it uses the same syntax that we're used to, to defining variables. Like if I say cons data is equal to await and then database call like that, to me is just so much easier to parse easier to understand, easier to read. And it just makes so much more sense in the context of normal JavaScript, then using a dot then or a dot catch. And I mean, I like a sink await so much that I almost don't find myself using that beginner catch really ever anymore. I'm just such a such all in on a sink await that, you know, that's where it is, for me. - -77 -00:38:43,920 --> 00:39:52,190 -Wes Bos: Totally. One cool thing about async functions is that they themselves return a promise. So you can actually await and a sync function. And then also, there's error handling is like one of the ones one of the things that is not as explicit as just regular promises are because regular promises was kind of nice, where at the end of all of your events, you just put one single catch, and if anything goes wrong, anywhere along the line, it'll fall to this catch. And you can deal with the promise there. With a sink await there's a couple different there's trycatch that you can use, you can still use cash, but also use a weight on it. So that's that's one I use, you can use higher order functions. And we're actually going to do an entire, probably a hasty tree, diving into some of the different ways that you can handle errors, because it's a pretty interesting space. And you can do some pretty neat stuff by depending on where you need to handle the errors if you need to handle them at call time. If you need to handle them at function definition. If you need to handle them at like a middleware and express it's kind of cool. There's some some really neat options that just take away the messiness of having to think about errors in the code that you're writing and just just ship them off somewhere else and deal with them - -78 -00:39:52,190 --> 00:40:11,310 -Scott Tolinski: somewhere else. And yeah, and I'm interested in learning a little bit of different practices for error handling because I do use just try catch and It's fine, it works great. And it's nice. But I do feel like it adds a little too much like additional stuff. And it adds like another layer deep. I don't know. Yeah, it also - -79 -00:40:11,460 --> 00:40:53,550 -Wes Bos: creates a new block, right, the try catch, like we just talked about constantly, our block scoped try catch is a block. So in most cases, that's you don't sweat that it's not a big deal. You just wrap all of your code in a try, catch. But there are some pretty nifty, nifty little things in my upcoming advanced react course, we specifically use a wait for the result value and catch for if something were to go wrong. That's just, it's just pretty cool. So we could just catch and throw up an alert box or throw up a modal. So I won't give too much a mark. Because that's, that's an entire show. And I often want to do just an entire conference talk on a sink away error handling, because I think that there's a lot to learn. They're - -80 -00:40:53,610 --> 00:40:56,690 -Scott Tolinski: sick, absolutely sick. Yes, definitely. - -81 -00:40:56,820 --> 00:40:58,460 -Wes Bos: All right, what do you got next, - -82 -00:40:58,460 --> 00:42:53,400 -Scott Tolinski: next object, computed property name, a lot of these things have like, really, you know, it's funny because they have scary names. Like all this stuff, when you look at the new features in ESX. And you didn't know what they were like, I can imagine a lot of new developers looking at that. And being like, Man, these are some big, big scary things, right? Because they have big, long, scary names that are full of jargon. This one is not scary at all, it's basically being able to define a property name via a variable in your objects for a very long time. If you were creating a new object, and one of the properties had to be named off of a variable, you had to define the object, then do object dot set of brackets, then the variable name is equal to and then your value, right, it's almost creating a second declaration, because you would create your object, then you add that property to that object. And now you can do all that in one fell swoop by adding just simply bracket variable name, a bracket or not. And then there there the flat bracket, square brackets, I'm doing bracket I'm gesturing over here with some bracket shapes, I forget that this is not a visual medium. And so basically, it allows us to do that inside of the object. Now, instead of outside of the object in the second declaration, again, this is this one is a Wes mentioned that it's handy. When used in react, people use it all the time for like a generic input on change. Or you can set a value in your state based on maybe the input name or something like that, and the name becomes the property. and the value becomes the thing that you're setting the state to. This is something that you see all the time in form libraries, again, anytime you have a generic method that you're creating. So yeah, this is a really cool one, and definitely one that you probably will find yourself using a whole bunch. - -83 -00:42:53,550 --> 00:44:26,280 -Wes Bos: I'm a big fan of the square bracket. Also, when I taught and I showed people the other way, before we had this, people would immediately think it's an array because you have your object square brackets, and they're like, Oh, it's it's an array, it's square brackets, and you're like, no, it's actually, that's how you that's a second way. Because if you don't know, there's two ways to access properties on an object, there's the dot notion. So you have my object dot name. And then you have the square bracket notation, which is my object, square brackets, quotes, name, and those are the exact same thing. And the reason why we have square brackets is because if you know if name in a string is not actually name of a string, but within a variable, then you can, you can pull it out via that sick. Last one we have here before we we break, and we've got nine more after this is the object methods syntax. So this is just a sort of a nice little syntactic sugar. If you have a method inside of an object, so const, Wes equals curly bracket, so I have an object and then want to put a method on there that says, say, Hi, normally, what you'd have to do is you say, say, Hi, colon, and then you have the whole word function, and you have your whole function set up there. Now you simply just need to say const, West equals curly brackets. And then inside of that, we just have, say, Hi, parentheses, and then you open up your function block. So a lot of people confuse that with being an arrow function. It's not it's a regular function, with all of its regular scoping and binding. It's just a sort of a shorter syntax to be able to do that. I'm a big fan of that one. - -84 -00:44:26,340 --> 00:44:40,410 -Scott Tolinski: Yeah, I love how a lot of these features are just making our lives easier. It's like more concise syntax to do things that we do all of the time. Anyway. So I think that that, for me is somebody who likes that sort of thing. It's it. These are all just big, nice things. - -85 -00:44:40,530 --> 00:45:24,870 -Wes Bos: I wonder if you can combine those last two? No, you cannot combine the last one, which is computer property name, and the new short syntax, method syntax. I was hoping you could but that would be weird. I don't know when you would ever need to use that but so that is the first time Nine coming up next week we've got spreads rest arrow functions arrow functions and scoping of this default function arguments named params. Modules classes as well as a couple things that we never use that are new to the language but it just never comes up for me to use in Scott it be curious to hear what what things you were maybe excited about but never ended up using. Tweet us at syntax FM. - -86 -00:45:24,930 --> 00:45:29,820 -Scott Tolinski: Yeah, spoilers. Those are some spoilers, Wes. Just spoil the next episode. - -87 -00:45:30,330 --> 00:45:32,280 -Wes Bos: All right. What about sick pick today - -88 -00:45:32,310 --> 00:45:35,130 -Scott Tolinski: sick pick. I'm looking around. - -89 -00:45:35,160 --> 00:46:59,670 -Wes Bos: Alright, my sick pick today is going to be a coffee machine. So we talked we talked about coffee, but how about like these machines do a pretty decent job at making coffee. We have an I was just like thinking the other day about like the machine that we have. And I ran the stats on our machine that said that we've poured almost 9000 cups of coffee on it nice and I thought like holy smokes, this thing is put in work for us. So the coffee machine we have is a Jura impressa. And it's like a it's one of these things where you put the beans in you put the water in. And then when you want a cup of coffee, you just hit the button and it will pour you a cup of coffee or make you an espresso and there's a milk frother line on it. We never use that. It's not one where you like pour the milk in it keeps it cold and stuff, but we caught it for like 200 bucks on Craigslist. This theater like 3000 bucks new so that part of what I love to do is just have running searches for very expensive stuff that people just want to get rid of quickly on Kijiji, and this was one of those, we bought it maybe four or five years ago. I got it for 200 bucks. And it's been just amazing for us. And we've been we're thinking like it when this thing goes. And we're not able to find a used one. Like would we want to spend the money on it? And it's it's a tough pill to swallow, but we just love this thing so much. So it's the Jura impressa. The what we have is called like an ad, but I don't think they even sell it anymore. But you can you can look it up online. See all the different models. - -90 -00:46:59,730 --> 00:47:04,320 -Scott Tolinski: Nice. That's pretty sweet. That like tells you how many cups of coffee you've been bird. - -91 -00:47:04,620 --> 00:47:05,250 -Wes Bos: Yeah, it's - -92 -00:47:05,250 --> 00:47:06,060 -Scott Tolinski: pretty sweet. - -93 -00:47:06,180 --> 00:47:23,190 -Wes Bos: I found somebody online that was selling like a commercial unit. And they're like 15 1015 grand. And it like keeps the milk cold. And you can have many different types of beans and they had like something like 6000 cups on it. And they were still selling it for like six grand. Nice. - -94 -00:47:23,550 --> 00:48:56,760 -Scott Tolinski: Nice. Well, I have a pretty sick sick pick today. This one is like legitimately sick. So every single year, there's what is the largest breakdancing competition for one on one as in the 16 best in the world and the breakdancing world here that they compete in a different city than this year. Where is it this year, it's a new city every single year. And it's rarely in the US. So let's see where it is. This year, it's in Zurich. So it's going to be just amazing. And it takes place on September 29. So it's going to happen after or before you listen to this episode. But all of the videos will be available. So I'll have to make the video links available on YouTube or whatever, so that you can find these easily. These are the 16 best break dancers in the entire world. There's people from Morocco, Holland, the United States, Venezuela, Korea, just all sorts of places to competing for essentially, the coolest breakdancing competition. I don't know if there's like a an old clip. It used to be like super viral, where there was this guy who was doing the push ups without his legs on the ground and stuff like that. It was like a Nike commercial or something. So that was actually from this competition like 10 years ago. It's basically the most insane stuff you'll ever see the 16 people in a bracket style tournament to compete for the world's best. - -95 -00:48:57,120 --> 00:49:00,000 -Wes Bos: Awesome, that sounds pretty gnarly. - -96 -00:49:00,210 --> 00:49:03,480 -Scott Tolinski: It's super gnarly. Yeah, it's amazing. All right, what - -97 -00:49:03,480 --> 00:49:58,230 -Wes Bos: about shameless plugs, I've got some today, I'm gonna actually plug some of my conference talks that I've done in the past, because a lot of times you spend like, a week or so building a conference talk and you give it I don't know, four or five times to couple hundred people each time, but I'm big on just letting people like everybody get the content, right. And I've often thought about, like, just doing my conference talks. But yeah, luckily, sometimes they are recorded. And I'm gonna just gonna shamelessly plug two of those right now. So my CSS Grid talk I did at layer con is I called it CSS Grid and 45 minutes, versus the like many hours that my actual courses. And so that's there that'll be link in the show notes. And then as well, my async await talk that it did back in December of last year, but still very, very relevant. pretty proud of both of those talks. So if you are looking for a little bit of extra tasty treats, check out those talks. - -98 -00:49:58,410 --> 00:51:18,180 -Scott Tolinski: Yeah, that's great. Definitely. especially related to what we're talking about today. Now also related about to this episode I'm editing right now it should be out by the time you're hearing this, of course, I'm tentatively titling better JavaScript, I don't have the time it's not locked in yet, I'm thinking that it's going to be called better JavaScript. And the whole purpose of the course is to use some of these new features. So we go over a lot of the features that we even talked about in this episode. But we also go over a lot of other things like how to properly name things, and some functional programming concepts like pure functions, and why those things are important and why this idea of functional programming isn't some big scary concept, but it's actually very simple. And some of these things that we can do in our programming to make our JavaScript in particular, less brittle, less error prone, and more likely to just make you a better developer easily more easily testable, all those good things. So again, I'm tentatively titling this course better JavaScript, it's going to be available at level up tutorials.com forward slash store. Or if you want to become a levelup pro get access to this along with the other 300 plus pro videos available right now. You can sign up for an entire year, and then get access to a whole year's worth of pro videos as well. As they come out. Save 25% when you sign up for the year at level up tutorials.com forward slash Pro. Thank you so so much for that. Check it out. It will be out later this month. - -99 -00:51:18,390 --> 00:51:19,110 -Unknown: Sweet. I - -100 -00:51:19,110 --> 00:51:21,600 -Wes Bos: think that's it for today. Anything else to add? - -101 -00:51:21,780 --> 00:51:24,090 -Scott Tolinski: Nothing? Nothing, right? Yeah. - -102 -00:51:24,090 --> 00:51:28,350 -Wes Bos: All right. Thanks for tuning in. We'll see you next week whose face - -103 -00:51:30,210 --> 00:51:39,960 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax81.srt b/transcripts/Syntax81.srt deleted file mode 100644 index 5c957d764..000000000 --- a/transcripts/Syntax81.srt +++ /dev/null @@ -1,180 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,350 --> 00:00:02,160 -Monday, - -3 -00:00:02,160 --> 00:00:21,660 -open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ tip workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. - -4 -00:00:23,610 --> 00:00:24,450 -Totally at ski. - -5 -00:00:25,890 --> 00:00:57,930 -Scott Tolinski: Oh, welcome to syntax in this Monday heastie treat, we're going to be talking all about hack tober Fest, which is a great way to get into the open source community. We're gonna be talking all about it some of the cool things that you can do to participate in hack tober fest. Now this is syntax. And like I said, we're on the Monday episode, which is the hasty treat. So these are maybe like a little 20 minute episode here for you somewhere around there. And my name is Scotland's gay. I'm a full stack developer from Denver, Colorado. And with me, as always, is Wes Bos. - -6 -00:00:58,020 --> 00:01:01,020 -Unknown: Hello, everybody. Hey, yeah. So - -7 -00:01:01,020 --> 00:02:38,060 -Scott Tolinski: this episode, this hasty treat is sponsored by native script. Now native script is the great way to build real native apps using your JavaScript skills. And you went west, this native script in between the recording of this episode and the last episode, they got the website, they Oh, nice, new, nice new website. So that's even if you check native script out last week, check it out, again, because they got a fancy new website. And it's looking really good. So like I said, scrip is a great way to build real native applications using JavaScript, TypeScript, view, Angular, all that stuff, you know, and love. And again, these are large some sort of web view application like, like PhoneGap, or something like that. It's not like a website, in a browser in an app. It's an actual native app, just like, it basically allows you to take your code and it converts it into real native code for both iOS and Android. So you're not leaving any platforms out when you're coding with native script. So check it out native script.org, forward slash syntax. Again, it's the great, awesome, just a easy way to pick up with the skills you already have for front end Dev and get into building native apps, get that app on that app store, Google Play Store, make some make some sweet cash with that stuff. So head on over to native script.org forward slash syntax again, check it out. Again, if just check it out. They're cool new website, they have a lot of really great documentation here. Easy to pick up. Love, love, love this stuff. - -8 -00:02:38,370 --> 00:03:49,230 -Wes Bos: Alright, let's get into it. Let's talk all about hack tober fest. And I actually listened to a really great podcast last night on the change log podcast, which is another really good one, if you're looking for some more web development, listens. And how Oktoberfest is, it's apparently in the fifth year. And what it is, is put on by digitalocean. github in Twilio. And the idea is that you submit five pull requests to open source projects on GitHub, over the month of October. And if you do that, and you're one of the first I think, 50,000 people to do it, you're gonna get a free t shirt. Now, we're not sponsored by digitalocean, GitHub, or Twilio, this is something that's put on by a company. But I think that it's such a cool thing that they're doing. And I think like last year, myself, I saw a huge influx of pull requests on my repos. And they were extremely helpful, as well as it really gets people into open source. Because there's a lot of people that are kind of maybe uncomfortable with, with diving into open source, and this Oktoberfest is going to, I think, really push people to do it. Because like t shirts and stickers are the currency for for web developers, aren't they? - -9 -00:03:49,320 --> 00:04:42,060 -Scott Tolinski: Yeah, absolutely. And again, anything that will get you to push you over that that sort of comfort barrier, where you're like, I don't know about submitting pull requests these projects, well, if somebody is dangling a carrot in front of you, it might get you to make that jump a little bit easier. And once you do it once, you're going to see Oh, well, hey, this isn't so hard. And this is pretty fun. And now I have some work that's in this project. And maybe it's a small time project. Or maybe it's a big time project, but you your contribution just did something to that project that push it forward in a sort of way. I always like to think about this as like you have like a circle. And if everybody nudges the edges of that circle out just a little bit with their contributions, the circle continues to grow. So every single little nudge is going to grow that circle. So don't ever think that your little nudge is insignificant, or something like that. - -10 -00:04:42,060 --> 00:05:42,570 -Wes Bos: Absolutely. So if you want to pull up the website, it's hack tober fest dot Digital Ocean Comm. The way that it works is that you sign in with your GitHub account, and then it will track your pull requests that are on public repos over the month of October, and they will not by default, they don't get access to your GitHub repo except that you Your email. And by default, the checkbox for Digital Ocean signing you up for info about Oktoberfest and they say Digital Ocean products. They are a company trying to advertise their own products at the end of the day that is unchecked. So you don't have to worry about them having access to your code base as well as you don't have to worry about them, emailing you, if you're if you're not interested in something like that. Yeah. So that said, let's let's dive into kind of like the ideas of it. So they said last year, they had 30,000 shirts that they shipped in this year, they're gonna do 50,000 shirt, which blows my mind, that's like 10 bucks a shirt. Plus, they'll ship them anywhere in the world, that's probably at least half a million bucks that they're spending on T shirts. Yeah, - -11 -00:05:42,570 --> 00:05:46,980 -Unknown: to send them all over the world to promote open source. That's what it's all about. - -12 -00:05:47,130 --> 00:06:24,690 -Wes Bos: Yeah. So the way that you can, you can make pull requests to any open source that they are October 1 projects on the website, oktoberfest@digitalocean.com. So you can look on there, you can also look on GitHub for issues that are tagged with the Oktoberfest tag, right before this podcast this morning, about two, two and a half hours ago, I went on to the syntax podcast in a route I rattled off like six issues that could be possibly done. Like these are things that need fixing. And like before we could even do the podcast they were all spoken for, and the people are already working on them. And there's some pull requests in already. for them. - -13 -00:06:24,780 --> 00:06:55,260 -Scott Tolinski: my inbox is slammed from people Boric was this morning. So it's already exciting to see, I'm actually it's funny, because of this, I'm bummed out that level up tutorials or the front end of level up tutorials is an open source. That might be something it might be worth looking into in the future for me open sourcing some of that platform, because it's just awesome to see how many people are wanting to contribute things. And so thank you to anyone who's submitted a pull request this syntax. I mean, that's just awesome to see. Yeah, it's, - -14 -00:06:55,260 --> 00:07:31,710 -Wes Bos: it's really cool, because like, obviously, we are our podcast, we should be taking care of our own website. But it's kind of cool to see people chipping in their own expertise, fixing things, especially I love having the show notes up on GitHub, I do this with all of my blog posts, as well as all of my captions for my videos, I try to put almost everything on GitHub, because rather than somebody taking the time to email you to tell you that there's a spelling mistake, or maybe a possible clarification that you made, they can just fix it for you and submit you a pull request. And then that's the beauty of open source is that everyone can chip in a little bit, and it makes it better for the whole. - -15 -00:07:31,919 --> 00:07:53,910 -Scott Tolinski: Yeah. So let's talk a little bit about what are some things that you can contribute to like, if you are lost? And you're thinking? I don't know, I don't I don't know, this is all seems a little bit overwhelming to me. What are some easy things or maybe not even easy things? But just things that are? I don't know, low barrier to get into? Like, what are what are some fun stuff that you can PR? - -16 -00:07:54,450 --> 00:10:07,620 -Wes Bos: Yeah, absolutely. So what we did on the syntax is we had one for adding a skip to content accessibility link, which is that's the easy, that's a quick one. Obviously, there was one for making the scrubber bar of the audio player accessible with the arrow keys. Because currently, that's the one thing we talked about that in our accessibility podcast. That's the one thing that's not keyboard movable. So there's that there's a couple other things of like the mobile layout, now that we have so many podcasts, the mobile layout is unusable on the on the syntax website. So somebody is working on that. Just little things like that, that I explicitly went and asked for, it's nice when you can find something that someone is specifically asking for. But if you don't have any, anything to do, obviously code changes you can do those can be a little bit intimidating if you don't necessarily know the project. If that is your project, if it is and you're unsure about how to make a pull request, there's usually a contributing MD file or something in the readme that will tell you how to submit a pull requests if there's a specific process to doing. So that might make it a bit better. Otherwise, things like documentation is always needed in all projects. We talked about that on our documentation, one, grammar mistakes, typos, little things like that accessibility features, often even the syntax site itself, there's little things that get overlooked. And all you could do is go to a website that you know is open source, throw the x thing on it and and it'll spit out a list of things that are wrong. And you can go ahead and go ahead and fix them. Or even just adding tests, clarifying tests, adding extra tests, to different repos is well needed. So really, you can pull requests almost anything. Scott has some some notes here on things you should probably shouldn't pull requests, but it's not bound by the list. I should say this as well. There is also a tag. If you are a like an author of a repo, and people are requesting just like nonsense just to get their five and get a free shirt. You can invalidate those with a special tag on a pull request because it the pull request does not need to be merged in order to make it worth it. You just need to open the portal Because like I know this myself, all of my projects have many pull requests open, and there's just not enough time in the day. Yeah, to do that. I - -17 -00:10:07,620 --> 00:11:45,960 -Scott Tolinski: know that is actually, the hardest part for me about maintaining any sort of repo that's being worked on by multiple people is like the managing of the pull requests. So it is it is nice that they don't have to be marched. But again, I think the some of these things, you know, are worth reinstating, like that accessibility one is the easiest one, in my opinion, because again, you can just run that checker, and it's going to give you a checklist of stuff that you can do. I mean, that's almost like a to do list right there. But you don't need permission to go run that on someone's site, and then just see, oh, maybe, you know, this could be better these sort of ways. I think one of the best poll requests I've ever gotten for level up tutorials, was, it took my assessed ability score from like a 60%, to like a 95%. And it was just like, this is the easiest improvement that I'm ever going to make to this site. And like, thank you so much, Jamie, for doing that. So it was really just it. Like those kind of things they make you they make it just really nice, right? So again, people might think grammar mistakes, and typos are meaningless to fix. But those things they pop up all the time. And oftentimes maintainers, like don't even want to think about that stuff. They don't care. Or it's not that they don't care. But they have other things to worry about, like maintaining the actual code of the project. So if somebody else is going to say, well just fix that stuff, instead of asking to fix that stuff, then it's just going to make the whole repo and everything better. So don't hold back on that sort of stuff. Even if it feels like it's cheating, because it's not code or something. It's much appreciated, people are going to love it, if you use and it's a pull request to fix a typo or something or fix a broken link, or something like that. - -18 -00:11:46,290 --> 00:12:32,430 -Wes Bos: Here's another good example of what to do is a JavaScript libraries are constantly becoming out of date. And often there's lots of examples pushed up to GitHub. And then those examples are just left and right. So that's a big one. Yeah, if you just do a search on GitHub for next j s 6.0, upgraded to seven, do a search for react 15 point, whatever. And then you'll find projects that are a couple of versions old out of date, usually what you get to do is you clone it locally, you upgrade the thing, and then you test it out, run the tests, or just test it yourself to make sure it still works. Sometimes you'll have to look at the change log of the the version bumped to see if there's any breaking changes. That's a huge, huge one. And I bet that's a huge help for people that are looking for example code. - -19 -00:12:32,520 --> 00:14:17,250 -Scott Tolinski: Yeah, I know. Because maintainers, they, they create this new version, the new version comes out. And then all of a sudden, all of their examples are maybe invalidated just a little bit. And then somebody comes I did the example code, and it's not working. So yeah, it's a huge learning tool. And something that is very important to keep up to date. So people will love it if you update their examples. I did have a note on here of things not to PR. Again, we mentioned that there is this tag to invalidate your pull request if it's not following the rules, because you know, there are going to be people whenever there's a system like this, there's going to be people who try to game the system. And that's not what this is about this, this whole hack tober fest is not about the T shirt. It's about contributing to open source, right. So if you are just in it for the T shirt. Yeah, that's that's a little bit of a bummer. But these are things that are not going to fly, I think as as pull requests, like let's say someone adds, well, some meaningless bit of code, like some code that essentially does nothing, or even worse, maybe just like comments, or something like that. They're adding something to the code base that does nothing that is not going to fly, right? Because obviously, you're just submitting something to submit something, not to mention, let's say you have a feature that you're working on, and you submit it into five separate pull requests, like, Hey, I'm changing this button to be blue and one poll request for each line of CSS. There's something like that to add, like, That's not good. Yeah, either. That's, that should be I mean, again, you want to keep the spirit of this thing which is contributing and and being a part of the community and working on open source work that everyone can take advantage of. So yeah, just Don't be a jerk about it and submit stuff that's actually worthwhile. - -20 -00:14:17,459 --> 00:14:42,510 -Wes Bos: Totally. Because this this whole thing is very game mobile, you could get a friend, you probably make your own repo and pull requests your own repo to get them they probably have some some checks in place at some point but it's worth trying to do what you got four weeks in October. Do do one today and then one for the rest of the weeks. I guess this comes out next week. So by the time you hear this, you better a better start hustling. - -21 -00:14:42,540 --> 00:14:43,500 -Unknown: Yeah, do do a couple. - -22 -00:14:44,370 --> 00:16:14,340 -Wes Bos: Yeah, you get your you'll get your five in the 50,000. I kind of feel like those that will go if they did 30,000 last year. I bet the logo pretty quick on on the 50,000 because this is the fifth year and this is only the the second year. I've actually heard of it. Last year. I heard of it. Just because people people are sending me messages, hey, do you have anything that I can fix? Or do you have any any little issues and I've got tons of these little repos, like I have keyCode dot info, which shout out to palash Mondale, I might have butchered his name, but he recently just like totally revamped the entire key code. He went through something like he's one of these like issue warriors where, like, I have some pull some repos that have like 100 issues and 100 pull requests on them. And then he's one of those people that will just go through every single one, give him access to my repos, and they'll go through all of them and be like, this is good, he'll merge it in. This is no good, could you refactor it a whole whole deal with merge conflicts, which is so cool. And I don't know if he got to start doing this in Oktoberfest. But it's exactly the kind of attitude that you need to have, as I see that I can help out here, it's, it's actually kind of a shame that this doesn't work towards, like somebody also chipping in to manage our repo. Because even if you're committing code, there's often repos that are overwhelmed with issues and pull requests. And that's kind of the unsung heroes as well as people that can wade through all of that and keep on top of it. Yeah, it would be amazing if someone could go through my repo, - -23 -00:16:14,939 --> 00:16:43,320 -Scott Tolinski: merge pull requests, and then do a little once over a manual test, run all the tests, confirm, everything's all good. I have ci setup. So it's not like, I'm not getting those tests run automatically. But to have all that confirmation. So because of that, you know, that takes a long time. I actually, like I said, that actually was one of the biggest times things for me is managing and merging code, because I have these features that just sit there like oh, ready to merge. Shoot, yeah, you gotta wait for it. Yeah. Would it be worth - -24 -00:16:43,350 --> 00:16:51,960 -Wes Bos: having? Because I'm sure there's people listening to this podcast right now who are like I would kill to be able to spend a few hours helping Scott out would like, would that be something you'd be interested in? - -25 -00:16:52,200 --> 00:17:05,250 -Scott Tolinski: Do would be Yeah, I think it would have to be somebody would have maybe a little bit of experienced testing that stuff is, you know, oh, yeah, we're both of the same where, where it's hard for us to go up control of our little totally, or our babies. So - -26 -00:17:05,430 --> 00:17:07,230 -Wes Bos: I feel the same way. - -27 -00:17:07,260 --> 00:17:24,930 -Scott Tolinski: Yeah. And I have contributors to level up tutorials, you know, I have, like a 50 50% time dev working on it. And like, it's great, but I know, I know, his code style. And I know what he's gonna do and everything like that. So like opening it up a little bit more scares me is definitely Yeah, yeah, - -28 -00:17:25,290 --> 00:17:55,310 -Wes Bos: totally finding someone that you trust on this stuff is, is invaluable. So we've went through finding pull requests, things support requests, if you are an author of repos, maybe spend a little bit of time going through all of your there's this other thing, like there's like a tag, it's like what first timers welcome or first pull request, because often I'll get messaged me, they'll message me and say, Hey, that was my first pull request. Thank you. And I love hearing that, because that's the gateway drug. Helping out? - -29 -00:17:55,610 --> 00:18:04,710 -Scott Tolinski: Yeah, I think there is a little bit of a mist of mystery around pull requests if you've never done one. And I guess we didn't kick that off this program off with a little bit - -30 -00:18:04,710 --> 00:18:06,660 -Unknown: about how that works. - -31 -00:18:06,900 --> 00:19:27,800 -Scott Tolinski: Yeah, so typically, what you're going to be doing is forking the library or whatever you're working on, right. And what that does is it basically makes a copy of it that you're in control of, and you have that on your local machine that you can make modifications to. And then when you are ready to submit your poll request, you basically on GitHub, that you create a new poll request, you say, hey, use my code base as the code base to draw the changes from and merge them into this code base. Right? Now, what that does is basically creates what is called a pull request, which is basically all of the commits that have had gone in to those changes description of the changes, because it's like a, it's almost like filing a GitHub issue where you get to write your own description of it. And it allows the contributors or allows the maintainers, to sort of see exactly what code was changed, and allows them to write back and forth, maybe you can request changes on some stuff, like let's say, someone didn't follow the rules of formatting, they weren't using prettier, something, you could go ahead and say, Hey, run prettier on this, and then resubmit and all approve it. So basically, it allows you to get code merged into a project. So once the maintainers sort of see that all of your code is all good, and everything works, then they can just go ahead and merge that in. And they go - -32 -00:19:27,860 --> 00:20:34,710 -Wes Bos: awesome. A couple more things I'll add to that is when you fork a repo, this might be like totally beginner stuff. But if you don't know that a lot of people don't totally understand the process of it. When you fork a repo repo by clicking fork on it, you get your own copy, and you can make commits and push your own changes up to your own repo and the owner of the main repo will not be notified of those until you actually create a pull request. And that's generally when you're looking at the main repo, there'll be a button that says make a pull request and you can say pull it from the Master of my branch to the master of the master of my repo to the master of their repo. So that's the one thing. The other thing is like, Don't sweat it, if you feel like you've committed too much, sometimes people are working on it will have seven or eight commits. And if those commits are meaningful, and they each clearly do one thing, you can leave it like that. But if you find like, Oh, it's just like a whole bunch of stuff. And I would like it to just be one commit, you can look into what's called Git squashing, you can squash that down into a single commit before you make a pull request. And then that way, it will show up to the repo author as just one commit that will be put in their history. - -33 -00:20:34,770 --> 00:21:03,390 -Scott Tolinski: Yeah, I mean, I'm not saying no, don't do a bunch of like, don't do Don't touch a bunch of different files in one pull request, if they're totally unrelated. Like, yeah, for the most part, keeping things in related. Because like, sometimes you're like, Oh, I, sometimes you'll, you'll commit something. And people want to use one part of it. Oh, I added these accessibility features. Great. Oh, but I also redesigned this button. And now it's hideous, no, but I don't want that. Yeah, so keep those sort of things separate, right? - -34 -00:21:03,590 --> 00:21:49,470 -Wes Bos: Totally, that that's a really good point as well as you can make. If that's the case, you need to look into branches. Because sometimes, if you have one pull requests and your pull requesting your master to their master, and then you make and then you start making more changes on your master branch and you push those up, those will automatically flow into that same pull request. So if you have to separate generally, what you'll want to do is you want to branch off of the work that you just did into a new branch, and then make those changes. And then when you make the pull request for that second feature, it will still show that first commit until it's merged. And then you'll you'll see your your new commit. And by having branches, you'll be able to do that word. Cool. I think that's it any repos you want to shout out, you could use some help on - -35 -00:21:49,770 --> 00:22:25,830 -Scott Tolinski: a No, not necessarily. I, I don't I have some some repose on level up tutorials. But sometimes I'd like to keep those reposts like, the exact same as what's in the video, even if it's outdated. And then yeah, no, redo the video. So yeah, I would, I would say not necessarily No. But if you are interested in working on level up tutorials, you can reach out to me, I do just have a little bit of an agreement and operators agreement assigned. But other than that I do like and let people work on the site, especially if you have stuff to contribute. That said, I don't think you'll be getting hacked tober fest points for because it is a private repo. And I'll look into open sourcing the front end of it at least - -36 -00:22:26,010 --> 00:23:40,770 -Wes Bos: Yeah, for mine, my ESX course I had every single video turned into a blog post. And those just have mostly been reviewed. And I've posted most of those to my blog, but there's still 20 or 30 of them that that have to have like a good read through just to make sure that like code is good, as well as just any like grammar or whatever mistakes. So because the way that it worked is that I had them transcribed by a professional. And then I had a technical author, turn them into blog posts, but they just need like one more, one more set of eyes to, to read through them. So if you're interested in learning ESX, for free, you could just read the articles. And if there's any issues, you can edit them directly on GitHub, and you still get points for that. So the syntax show notes, we said is really good. I've got just a whole bunch of little repos as well. keyCode dot info is up on GitHub, CSS cursor dot info is up. It's just a website that shows you all the different cursors I don't sure if there's much there. But you can just take a peruse through all of my repos. And there's likely some stuff that could be updated or fixed or whatever. And, but if not, take a look at the Oktoberfest hashtag or the label on GitHub, because there's likely people that need need a helping hand as well. - -37 -00:23:40,890 --> 00:23:53,490 -Scott Tolinski: Yeah, it's a great way to get experienced go forward, I highly recommend diving in and even if you've never done it, do it, do it, do it. It's a lot of fun. And if you need that T shirt as a little push over the edge, go for it. Get that T shirt. - -38 -00:23:53,970 --> 00:23:55,590 -Wes Bos: Are you gonna get that T shirt, Scott, - -39 -00:23:55,680 --> 00:24:17,190 -Scott Tolinski: I probably not. I have a lot of things to do. I have a lot of, I have a monthly tutorial series to record, I have level up tutorials to work on. I would love to trust me. I would love to get under this mountain of stuff I have to do, but I didn't know right now. And maybe next October. - -40 -00:24:17,340 --> 00:24:27,600 -Wes Bos: I'm gonna do it. I'm gonna try to do it all on. Maybe I'll try to make it all code examples or like all documentation focus or science that we'll see. I'll report back. Yeah, - -41 -00:24:27,600 --> 00:24:34,140 -Scott Tolinski: I think Courtney would actually she would actually not allow another t shirt. Oh really my - -42 -00:24:34,140 --> 00:24:54,210 -Wes Bos: way this house hate. My whole family is like clothes and tech t shirts. And then you bet. Yeah, I have like hundreds of them. But I will always accept another one because I love them. Yeah. Also, when you're at the I wear them to the gym all the time all the time. You get a little head nods from the other developers at the gym. You're like, Hey, we're part of that. It's like wearing a band t shirt. - -43 -00:24:54,240 --> 00:24:59,130 -Scott Tolinski: Yeah. Hey, oh, you're wearing a Rackspace shirt. I'm wearing a Digital Ocean shirt. Yeah, - -44 -00:24:59,160 --> 00:25:08,550 -Wes Bos: hey, yeah. Look up. We know we know servers. Yeah, right. Alright, that's it for today. Thanks for tuning in and we'll see you on Wednesday. - -45 -00:25:11,040 --> 00:25:20,790 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax82.srt b/transcripts/Syntax82.srt deleted file mode 100644 index a7f29ec89..000000000 --- a/transcripts/Syntax82.srt +++ /dev/null @@ -1,436 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Unknown: You're listening to syntax the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. - -2 -00:00:10,589 --> 00:00:32,539 -Wes Bos: Welcome to syntax. My name is Wes Bos and with me is Scott to Lin ski. This is the tasty treat web development podcasts where we talk about all things web development. Today we're doing the second half of our top 18 new things in j s, I think 18 maybe 17? Maybe, maybe 20. Who knows? What do you want? - -3 -00:00:32,570 --> 00:00:33,240 -Scott Tolinski: Yeah, - -4 -00:00:33,269 --> 00:00:33,900 -Wes Bos: and yeah, - -5 -00:00:33,900 --> 00:00:35,180 -Scott Tolinski: we want Yeah, - -6 -00:00:35,249 --> 00:01:02,909 -Wes Bos: we do everyone. If you missed the first half, make sure you go back to last week's episode, which is part one, this is part two, we're going to pick it up right from spreads and move it all on through functions, arrow functions, name params. Couple other tasty treats in there. today. We are sponsored by two awesome companies Freshbooks Cloud accounting and graph CMS, which is a graph qL based CMS. We'll talk a little bit more about both of those companies partway through. But how are you doing today, Scott? - -7 -00:01:02,909 --> 00:01:03,450 -Unknown: Hey, - -8 -00:01:03,689 --> 00:01:04,439 -Scott Tolinski: doing pretty good. - -9 -00:01:04,469 --> 00:01:06,120 -Wes Bos: Yeah, yeah, yeah, it's starting. It's - -10 -00:01:06,120 --> 00:01:32,280 -Scott Tolinski: starting to be that time of the year we're getting some some chilly temps here definitely layering up a little bit, which is wild. It was like 90 degrees last week. This This would Denver's like it was like 90 Diaz sunny and now it's like very cold. So it's it's getting to be that time of the year, but I'm loving it. You know, I'm getting a bust out bust out some of my my layers, which you know, you always plan on large layers. Yeah. Pull out those. Yeah, yeah. Yeah. How about you? - -11 -00:01:32,639 --> 00:02:04,740 -Wes Bos: I'm doing pretty good. I just got back from web unleashed, which is fitc conference here in Toronto. And it was great. I did a Sunday workshop is the first time I delivered my new intermediate react workshop. And then it gave a new brand new talk as well, which was a what's new in react the which I think we should spin that into an episode or two, because there's been in the last year or so there's been a lot of new stuff that's been added. And specifically some of the new stuff. It's not even out yet but around react suspense. Yeah. Have you looked into that at all? - -12 -00:02:04,859 --> 00:02:31,880 -Scott Tolinski: Yeah, yeah, I've watched all the demos. I watched the talk. I spoke not directly after but like a couple people after Andrew Clark is I got to watch his talk from backstage. Actually, you know, they projected from the back on those big screens. And it's Oh, yeah, I got to watch the whole talk backwards, which is pretty sweet. So no, I'm, I'm I'm looking very much forward to that sort of stuff. You know, me, I'm always on the new stuff. I like the new stuff. So I got my eye on it. I'm just excited to see it get in just just - -13 -00:02:31,880 --> 00:03:06,150 -Wes Bos: as a little easing. You're, if you're listening to this, it's not going to change how react works. It's just going to add some new stuff into some edge cases around loading data in a synchronous data fetching. Yeah, it's pretty exciting. We'll have a whole episode, I think we can probably do an entire episode. We might wait until it's it's officially released, just so that we can make sure that it was funny. I gave my talk in 20 minutes after my talk, they announced that they had renamed a simple cache to react cache is already out of date. We'll wait until it's all finalized before we start talking about it. - -14 -00:03:06,179 --> 00:03:27,960 -Scott Tolinski: That's life right there. Yeah, that's like, Dev. Yeah, I think. I think that's I don't know, it's a great idea for show cuz I did my level to react course it covered like pretty much everything except for the new stuff. So I have such a fondness for so many of the new features that reacts added. So I'm yeah, would love to that maybe we can make that. I think the next episode we're doing is a fitness episode, but maybe the one after that - -15 -00:03:28,079 --> 00:05:09,690 -Wes Bos: done. Alright, let's jump into it. The first item in our second part is ESX. Spread a spread is a way to take an iterable. And iterable is just something with a length in it. And most likely, that's going to be like an array, if you have a group of items that have a length to it. Or if you have a set, which is a set as a new part of ESX is kind of like an array except it's unique, as well as there's some other advantages to it. But the idea with a spread is that you can spread into a function meaning that if you have an array of three things, like you have a first name, a last name and an age, and you have a function that takes three arguments in sequential order, first name, last name, age, you can spread which means the dot dot dot the array name, that will pass each of those items in your array as a as a function parameter. You can also use a spread and this is probably where I use it most likely to add items to an array. And where I use this most often is if you have an item and you want to add it to a new array, not just push it into the old array because that gets into the whole immutability thing. But if you want to create a new array, and add it in, what you can do is you can you can create a new array literal square brackets, you put your new item in it, let's say name of West string, and then you want to put all the rest of the items from the old array and then you just dot dot dot names or dot dot Got the array of names. And that will not put a nested array in your new array, it will take all of the items from the old array and put them as new items in your new array. - -16 -00:05:09,810 --> 00:05:24,200 -Scott Tolinski: Yeah. And this is one of the things that you mentioned, you said premiere, I use it primarily for objects, which we know is in stage four. For those of you don't know, stage four means it's basically it's basically in JavaScript. It's just not finalized yet. It's just not. - -17 -00:05:24,240 --> 00:05:25,820 -Wes Bos: Is it not finalized yet? Because Well, - -18 -00:05:25,830 --> 00:05:33,660 -Scott Tolinski: no, I mean, node it's in. It's finalized. I think the API is finalized. But it's not like in JavaScript - -19 -00:05:33,870 --> 00:05:36,240 -Wes Bos: in in every browser yet. Is that what you mean? - -20 -00:05:36,420 --> 00:05:43,950 -Scott Tolinski: stage four isn't stage four that it hasn't been like in the current release, it hasn't been released, essentially, take a look here - -21 -00:05:43,950 --> 00:05:54,450 -Wes Bos: object spread, because I was under the impression that it was good to go because node released it as part of their stable, they're stable thing. So if it's in node, it should be. - -22 -00:05:54,540 --> 00:05:59,610 -Scott Tolinski: Yeah. But like, is it in the EAS version? Like Yes, 2018 or something? - -23 -00:05:59,820 --> 00:06:00,450 -Wes Bos: Oh, - -24 -00:06:00,540 --> 00:06:02,610 -Scott Tolinski: is that that's what I'm talking about. - -25 -00:06:02,880 --> 00:06:15,990 -Wes Bos: ECMO script, ECMO script 2018, standard object initializer. So maybe, is somebody else who's listening can can let us know by looking it up. But you looked it up at stage four. - -26 -00:06:16,200 --> 00:07:41,310 -Scott Tolinski: Yes. Spread syntax. Let's see the rest spread properties. And object literals proposal stage four ads spread properties to object literal literals. Yeah, so it is in stage four, the rest spread properties ECMO script, I have the proposal right here. But it doesn't matter. Because the API is not changing, or it's not changing, it's going to be a JavaScript. It is an ECMO script proposal, but it is good to go I'm using I've been using it for a long time. And if you're been using react, you've probably been using it at some point. But basically, this is the same sort of thing where you can pull out well, like we had, when you're talking about destructuring, you could pull out individual items from an object, well, this gives you the access to pulling out the rest of it. So it's like you pull out one or two things, you can pull out each individual property from an object. I primarily use this to Well, besides passing props and stuff like that, but I primarily use this to create a new object. Again, if you want to, if you want to duplicate an object and maybe add some properties, or maybe you're sending all of the properties from an object along to another function or something like that, you would just pass along your new properties inside of an object and then do dot dot dot than the object. And then that allows you to pass along each individual property from the the original object along to a new created object instead of mutating the object that you're working on. - -27 -00:07:41,430 --> 00:08:22,950 -Wes Bos: Yeah, under the hood, this does an object dot assign, which is allows you to do what's called a shallow copy of an object, meaning that all of the first level properties of an object will be copied in and not just referenced. And if you were to change the original object, the new object would not update, that is not true for the nested objects inside of that object. If you do need a, if you need a full copy, a deep clone, then you need to reach for something like lodash, which will give that for you. So super helpful to do that whenever you need to just grab a copy of an object. And again, because of like Scott said, because of the immutability aspect of react, this has become extremely popular in react and last little bit. - -28 -00:08:23,250 --> 00:08:39,570 -Scott Tolinski: Yeah, absolutely. is basically used to pass along a bunch of props that you're you maybe aren't using in this component, but maybe you're using in the child component and your dot, dot dot props on your components, we just pass along the rest of them. Again, it's just functioning the exact same way it just inside of JSX instead of in JavaScript. - -29 -00:08:39,799 --> 00:11:45,510 -Wes Bos: Next we have the rest, which is the same syntax as a spread, but it's it's sort of the flip side. So the dot dot dot means it's either a spread or it is a rest. And whereas spread is allows you to take items out of an iterable or take items out of an object a rest will allow you to collect items from either a function or from when you're destructuring, an array or I believe an object, let's let's check that. But so the way that it works is if you have a function definition, you could say dot dot dot, and then you can have a variable for it called everything. And then what that will do is that whenever someone calls that function, regardless of how many arguments they pass it, it will all be collected in to one single variable for you, which is pretty cool. There are some differences between that in the the argument variable, I don't remember them off the top of my head, there is a difference between a function rest and an argument, which is that the argument object inside of a function if you don't know there's this like magical thing called arguments, and it will actually give you access to all of the arguments that were passed in that function as well as the name of the function that was called or access to the function was called called Kali. I actually don't use that all that much myself. I What arrest will do is you can say like, this is a function where the first thing, first item that is accepted is I always do this as an example of when you have a team. So the first person that's passed is the team captain, the second person that gets passed is the Assistant captain. And then the rest of the people that get passed, are gonna be there. Yeah, they're gonna be collected into an array called grunts, data dot grunts, right. And then when you're inside of your function, you have access to just that. And then that's a true array, whereas an arguments object is not. And in this case, it will only it has to be the last thing in your function. And then it works the same way with an array, where if you're destructuring, let's say you have an array of 20 people, you could say const, square bracket, Captain, comma, Assistant, comma, dot, dot dot team. And that will, the first thing is the captain. The second thing is the assistant and the rest of them are just going to be put into an array called team, this will also work for object spread as well. So if you're trying to D structure some properties from an object, so if you have a object with a first name, a last name, and then you have like, maybe other properties that you don't know what they are surname, middle name, family name, you could say like const, first, comma, last comma, dot, dot, dot other. And that will that will do is it will collect any objects that were not any object properties that were not destructured previously to that, and then just collect them into an object for you. So that you can, you could loop over and show it to the user. So the rest is usable for both functions, and arrays, as well as objects. - -30 -00:11:45,570 --> 00:14:16,049 -Scott Tolinski: Nice, cool, we have a dog situation going on here. So I'm gonna, I'm gonna just try to power through this, hopefully, it's not too loud in the mic here, I'm gonna real close to the mic. Now, the next one is going to be arrow functions, which we haven't necessarily talked about yet where arrow functions were sort of the new function syntax that was added in. And when they first dropped, I think a lot of beginner JavaScript users were looking at us like, Oh, it's a shorthand for functions. Yes, not necessarily shorthand for functions, it basically doesn't create a context like a normal function does, making them super useful if you've ever done the var that is equal to this to access this inside of a function, right? So basically allows you to create these, these functions that don't have this sort of context. And the cool thing is, is that there's a lot of neat little features that make them nice and lightweight, makes them a little bit more concise syntax. And some of these things people don't love. Some of them people do love, for instance, the implicit return this is when you do not have curly brackets after your arrow and your function. And it's basically denoting that it's returning whatever immediately proceeds that so if you have an arrow, and then parentheses, right, then it's going to return whatever is inside of those parentheses. Or if you just have a one liner, it can return a directly, whatever your thing is. Now, this is exceedingly handy. And things like maybe like a map, or any of these array functions where you're looping over stuff, like you could do a one liner that iterates over your entire array, and then just simply multiplies every number in the array by two simply with just an arrow function as the iterator and then the value arrow, and then value times two. That's it, every time it goes over there, it's going to return this, I use the implicit returns all the time, because I like it. Although I know a lot of a handful of people are gonna say, well, maybe it adds some confusion. So we'll just do brackets, and then a return after that anyways, because the thought thought process behind there is like, maybe there is some confusion if it's, if people are expecting it to implicitly return an object that doesn't work, you can have arrow functions, and then the brackets and then your object and expect that to just return an object, you need to wrap that object in parentheses. So the fact that there's sort of like discrepancies there, I think, some people don't like that. And therefore, we'll just always use the explicit return like a normal function. But I personally don't mind that. And I love the implicit return, use it all the time myself. - -31 -00:14:16,649 --> 00:15:18,179 -Wes Bos: We were talking about this at my workshop on Sunday, where you've got arrow functions, and you have your implicit returns. And then you have the ability to take the parentheses off of your arguments if it's a single argument. But then you can also destructure that and you can D structure multiple levels deep if the thing that you're looking for is a couple levels deep and this is all extremely handy. However, when you put it all together, sometimes it can make extremely unreadable code, especially if the code base that you're working on is people aren't familiar with it. I found that it took me I don't know three or four months to really get comfortable working with arrow functions in in JavaScript and they can those implicit returns can be really hard to debug. There's some little tricks around that but I would say other than the fact that the This is not scoped. That's the real feature there. The rest of it is just what it looks like. So you can make your own decisions there and just use an arrow function, when it is that you don't you need the parent scope of this word. I personally love them. I use them everywhere. But I totally understand why some people don't like them. - -32 -00:15:18,299 --> 00:15:47,159 -Scott Tolinski: Yeah, I know, I feel like I almost never not use arrow functions. And maybe that's like a thing for me where it's like, I'm just, I'm consistent in my use of them. So I always know how it's going to work rather than mixing it up. And again, I just like them. I know there's there's a little bit of there. There's, but yeah, I don't I don't know, I think one of it is as long as you know why it's doing what it's doing. And you're aware of sort of the differences there, then, as long as you have that in your mind when you're using them, then it's all gravy. - -33 -00:15:47,399 --> 00:17:10,650 -Wes Bos: Well said. Next one we have is default function arguments. And this is a really neat one, when you're defining your function, you can define that argument. If arguments are not passed, or they are passed as undefined, then they will fall back to what the default is. And this is really handy for functions that may be taking a bunch of settings, you want to want to fall back to some settings if they're not passed, I also find myself be getting bitten by this every now and then. Because like most conditionals, in JavaScript, we often look for falsy, not just false, or not just undefined, but falsy. And what falsie means is that if something is passed as zero, false, undefined, an empty string, or what else think that's true, we look I think we've done this on the show before falsy values. Let's look it up real quick. False. I said that zero, an empty string, undefined Oh, no, and Nan, yeah, are also falsy. But in default function arguments. Only undefined is the one that that works there. Why? Because you might want to pass false zero, null or Nan, those might be very valid values, right? The only thing that is not a value in JavaScript is undefined. So you have to kind of make sure that you're not assuming that false values will be put there. - -34 -00:17:11,040 --> 00:21:05,190 -Scott Tolinski: Yeah, I use this all the time, I use it all the time, I'm a big fan of these, these default, I think is you have again, it, it just it just reduces the amount of time you have to check for things if they're there, because well, now you can have that default, that default value in there, I use it, I don't know how to use it pretty much all over, I'm trying to think of situations where like, for instance, like server side rendering or something like that, I have in my API, it returns an object in context, right for the user, if the user context exists, but if the user context doesn't exist, it actually returns undefined. So to have that context, always have a default value of an empty object. And then I could just check to see if there's an ID in that object, rather than having to deal with undefined and then having it you know, oh, there's there's no object This is undefined and therefore breaks any sort of my my server side rendering code, but I can I use this all the time. And another thing I actually use all the time is graph CMS. That was, oh, I use graph CMS all the time. In fact, you can even find it in the level one Apollo course where I teach you Apollo client as we use graph, CMS is just a quick back end to get up and running. It's an excellent way to not only get an introduction in graph qL, but a great way to build out your own graph qL front ends without having to worry about setting up a graph qL server yourself because what graph CMS is it's an API first CMS of the future. If you've liked all of the sort of nice things about having a back end interface for a CMS without any of the pain like you get from something like WordPress, check out graph CMS a graph cms.com. Again, this thing is basically a CMS without a front end, allowing you to build your front end in whatever you would like whether that's Gatsby or next j s or or view or anything that can consume a graph qL API, they're trying to build the world's most developer friendly CMS, the only graph qL CMS that even supports mutations. So if you want to explore more of graph qL without having to set up a server, or if you're looking for a CMS style back end for your site that outputs a graph qL API, then check out graph CMS a graph cms.com forward slash syntax FM let them know where you heard about graph CMS first, again, you're going to be really blown away by the niceness of their design. The website looks beautiful. Again, if you've taken my course you've probably seen this once before and how cool it is. There's a lot of stuff here. So check it out at graph cms.com one more time forward slash syntax FM. Thanks so much for graph CMS for sponsoring. So next we're going to get into named params. Which name params is basically a way that is allows you to name your parameters by passing in essentially an object as the first value or maybe potentially only parameter in your function. And instead of having, let's say, a function that has five parameters in a specific order, you now have an object as one parameter. And inside of that object is different properties. And basically, this allows you to one of your code way more readable. But now the order in which you're passing in those properties into your function, it doesn't matter anymore. So it's now way less brittle. Because maybe you, for some reason swapped in a value here or there, you call it a function. And well, well, you pass the wrong property into the wrong parameter, and everything's broken down. But it also makes your code waymarks Blissett. You can look at your code. And when you have a function, you can see that, okay, here's the name, or here's the value or whatever. And you can have everything basically just listed right there. I use this all the time. 24. Seven, it makes your code way more self documented, it makes it easier. Yeah, it makes it way less brittle. I love this name parameters are like easily one of my most used things and modern js. - -35 -00:21:05,249 --> 00:21:57,810 -Wes Bos: Yeah, if you look at some other languages, it's specifically graph QL. They don't have the ability to not have named parameters. So everything is named, that comes into your function. And that means that you can pass it in at any order. And you combine that with things like defaults, and destructuring. Here, you can, you can make some really powerful functions there. Next up is we have modules. Yeah, modules is one of my favorite parts of JavaScript. Because we've had modules in JavaScript for a long time, the two big ones were common j s, which is what we use in Node currently. And then the other one was require j s, which is a pretty popular one. And because of things like Babel, we're able to sort of intermix the use of common j. s, which is a lot of stuff used to be written in a lot of node stuff still is written in common j. s, because we don't have modules in Node just yet. - -36 -00:21:57,810 --> 00:21:58,560 -Scott Tolinski: You don't? - -37 -00:21:58,560 --> 00:22:05,670 -Wes Bos: I do? Yes. Scott does. I'm waiting for them to to figure it out yet. - -38 -00:22:05,760 --> 00:22:34,260 -Scott Tolinski: Yes. So one of my favorite things about Meteor is that they've always had the exact same year Babel settings for front end and back end have always been the exact same. And so without like having zero config, we've had like import with CSS, we've had our Nastase we've had JavaScript modules in Meteor for the past, like two years with like, no configuration whatsoever. So I'm just so used to it whenever I use node outside of Meteor. Now, I'm always just like, she has this requires a deck. What is the - -39 -00:22:34,260 --> 00:24:05,430 -Wes Bos: deal? What does it look like? Yeah, that's always frustrating to think about, like, oh, how do I do this equivalent in because they're not one to one mappings, right? Babel makes some kind of one to one mapping. But that's the reason why notice is taking so long is because they're not exactly the same thing. But we'll talk about ESX modules in JavaScript, you have imports, which you import other modules into, and it's code that you need for your dependencies, and you have exports things that need to be available from that module. And the benefit of this is that you never like back in jQuery days, we always needed to make sure that you you loaded your JavaScript in the right order, you're like, Okay, firstly load jQuery, then I load all of my jQuery plugins, then I load my my own JavaScript, and those had to happen one after another, they couldn't all be loaded at the same time. Because like the plugins needed your code needed jQuery plugins and jQuery plugins needed jQuery core, you need to make sure that they ran the benefit of using imports and exports is that every module that you're right will explicitly state its dependencies. So that if you ever just stop using like you've stopped using a react component, you stop using a react or a view component. And that has a dependency and it's not used anywhere else in your application, then you just nice cleanly drop that dependency from your final build. There's never any confusion over whether you should whether he should be using it like we've all have you been in that case before we're like, are we using the CSS? Are we using this JavaScript plugin anymore? Yeah, better not remove it? - -40 -00:24:05,610 --> 00:25:00,870 -Scott Tolinski: Yeah, yeah, I know, it's I was actually when I first started using JavaScript modules. I was like, I was very confused about it. Because you're so used to everything just being in sort of it's, it's, you're so used to everything just being there and available, and whatever. And then you create your own scopes, and all this sort of stuff. But the fact that I didn't necessarily see the benefit until I started building larger applications, or even just like full on JavaScript applications, it just I didn't see the benefit when I was just basically doing really, really crude Angular stuff right before is built in full applications. And then once you start to build out real real applications, it becomes very obvious that like, keeping everything organized, separated, and in its own sort of context, is extremely important. So again, this is one of those things that like if you don't necessarily see the benefit of moving everything out into its own files and the importing and exporting it, just wait till you work on a bigger project that uses it and tried to do it without them. It would be a giant giant giant mess. - -41 -00:25:00,990 --> 00:25:24,300 -Wes Bos: Yeah. So currently to actually work with modules, you need something like a web pack or parcel, or one of these bundles that will bundle everything up into one big JavaScript file or many little code split bundles for you. But the the idea is, is that at some point, we are going to be able to use modules in the browser. And I believe, I think, sorry, already, this chrome have - -42 -00:25:24,300 --> 00:25:27,570 -Unknown: it now as well. I think chrome does. But I'm not positive about that. - -43 -00:25:27,750 --> 00:26:10,590 -Wes Bos: That's pretty exciting. And that's really cool. Because we're with the addition of HTTP two, where you can request multiple assets at once. The fact that you import six.js files into a single module won't matter. And that's at least the dream, because HTTP two will allow you to request a whole bunch of stuff at once, and it will just send it along in a single package from the server. So that'll be the day when you can just open up an HTML file and start writing. Yes, six modules inside of it. That's actually how parcel works right now, is that you can just start writing HTML, you can have a script tag that is your main import. And then you can start importing from there, it just works for you. There's no setting up of anything like that. - -44 -00:26:10,650 --> 00:27:13,920 -Scott Tolinski: Yeah, that's my favorite thing about parcel. If I'm reaching for anything, when I start a new project, I usually reach for parcel for those reasons. It just to get up and running just to get get moving on it. Right. Let me let me get on my little talk about Meteor again here a little bit. Because one of the cool things that they launched in the last version of Meteor, I think is like one seven, is that you can have a legacy build and a modern build. So the idea would be that you could have a modern build of .js, that would load on the only the modern browsers, and then it's way faster and smaller. So you could get those sort of native imports and exports without having to compile in all your stuff. Wherever it works. It's really slick. It's sort of like, I guess it's sort of like it's creating separate bundles for older browsers or different browsers to handle this sort of stuff. That way, you don't have to send a bunch of JavaScript on the line that the the browser, you know, can handle in a better way. And it just I think that's like such a cool idea. So I big ups to the meteor team on that one, this little cool little sort of future thing that I don't think a lot of other bundlers are doing right now. - -45 -00:27:14,070 --> 00:28:02,040 -Wes Bos: Let's talk about we talked about defaults and No, we didn't actually yet. So when you have a package, you have kind of two things, you have a default export and a default import. And then you have a named imports and named exports. And your files can always export one default thing. And like that, you can export anything a number, an array of function, and object, and then whoever is importing it from your module, they can import it as anything that they want. And they don't need to know the name of the function or the variable that you export it as, because it was a default. On the flip side, if it's a named import, that's where you use the curly brackets. When you import something, you have to know the name of the thing that you're trying to import. You can rename it on the fly using the as import Scott as Scotty. And from God's package. - -46 -00:28:02,880 --> 00:28:07,170 -Scott Tolinski: From a Yeah, you're importing Scott from Scotts package. That's great. Okay. - -47 -00:28:08,130 --> 00:28:46,560 -Wes Bos: Anyways, I didn't mean to say that I apologize, folks. You get the point, though. But there is some opinions out there that you should only use named imports and exports, because first, it makes tooling really easy. Because the tooling, tooling will know the name of the thing. And if you're trying to import something, a lot of tooling will be able to search through your possible modules and find the thing that you're importing, which is pretty cool. There's some opinions out there, if you want to read a blog post about it is someone says default exports considered harmful, I think is the name of the blog post, which I always roll my eyes. - -48 -00:28:46,650 --> 00:28:52,560 -Scott Tolinski: I think I just knocked my head off. I just lifted off my head. Yeah. - -49 -00:28:52,890 --> 00:29:00,450 -Wes Bos: I don't mind default imports and exports, I don't really have problems with them. I can see the point about possible tooling. What are your thoughts on that? - -50 -00:29:00,630 --> 00:31:00,300 -Scott Tolinski: I use default exports all the time, it depends on the context. For me, if I have a file, that's a react component, that's all it is like, there's no reason not to use a default export. Everything's named the same. And I get it, I get the arguments against it or whatever. But it's just so easy for me to have here's a file, the name of the file is the same as the component, the name of the get on? And is what's going to be the name that I'm calling this everywhere. So do I really need to give this an explicit name somewhere else? I don't know. Maybe not. You know, again, it's it's one of those things I get, but I just I don't see a use for it. In my mind. What I do. One of the cool things that I do on a little site here is I like to sometimes have essentially sort of modules that are comprised of a bunch of smaller modules. So like, I'll have a folder full of styled components. And let's say this is all my styles components, right? And then so I'll use this syntax that's export estrus from and then the file right so what that's doing is it's basically importing and then immediately export All of your named exports from one file from the index file. And so I'll have a index dot j s, and then I'll just have a whole bunch of those export asterisks, whatever. And then now I can import any of my stub components from the elements module, essentially. So I'm doing import bracket, I just bring in any sort of styled component I have from, and then the elements. Now granted that can if you're including a ton of stuff in there that could do maybe harmful things to your code splitting, because you're not splitting things up as small as it gets. But generally, for me, it's mostly pretty small components and pretty small amount of code here. So it's not exactly crushing me there. But I do love that technique. And I've seen some people use that technique in like feature folders will, they'll have a feature folder. And inside of that, they'll have an index file, where they're exporting all of their react components from that particular feature. So you can access them from a folder, rather than from a specific js file. - -51 -00:31:00,390 --> 00:31:38,070 -Wes Bos: While we're talking about code split bundles. I can also talk about what's probably coming to JavaScript, and that is what's called dynamic imports. This is already a thing in many module bundlers. Webpack has it parcel has it, this will allow you to dynamically import your bundles when they're needed. So an example might be is when a user is just about to click on the cart button or when someone clicks on the cart button. You can import the cart JavaScript, just on demand, rather than having to load it all on page load or load all on the on the homepage. So there is a standard that's called import. It looks like all of like web pack and parcels already implemented it. - -52 -00:31:38,100 --> 00:31:39,750 -Scott Tolinski: Yeah, me, too. Yeah, - -53 -00:31:39,960 --> 00:31:52,290 -Wes Bos: the the React suspense stuff that's going to come out is really going to help this because you'll be able to pre load specific things as well. And as well as load before a specific render actually shows. Yeah, - -54 -00:31:52,320 --> 00:33:09,810 -Scott Tolinski: I love this. I use dynamic imports right now and level up, especially because I have a whole ecommerce platform. And you can imagine the commerce platform includes a bunch of, you know, JavaScript that I wouldn't want in the normal site, like I don't need, you know, all the Braintree stuff, I love the shopping cart stuff, I don't need that on every page of the site. So again, I split out all of my modules into that use the dynamic imports, then I use react loadable, to bring it all in. And I even have those code, split modules and everything with server side rendering and stuff. It's all pretty slick. But I'm a huge fan of this stuff. Again, part of the arguments against using front end frameworks in general is that you end up having like a large JavaScript bundle at the end. But hey, if you are code splitting, you're using these dynamic imports, and you're sending smaller bundles that can be pre fetched and all sorts of stuff like that, hey, that removes a ton of the arguments right there for against using anything like that. And for me, it's it's one of those things that like, Hey, if you're increasing the loading time, your speed, and you're getting all these great features, and why wouldn't you be using these kind of front end frameworks for doing that kind of thing? And another thing, you know, why wouldn't you be using is Freshbooks? Why wouldn't you be using Freshbooks? Because it's really the easiest way to get paid faster. And it's the easiest way to have cloud accounting. So with a little bit more about us. - -55 -00:33:10,140 --> 00:34:47,100 -Wes Bos: Awesome. Yes. So what we're talking about Freshbooks, this time is Freshbooks will allow you to get paid faster. And I know that is true. cuz I've been using Freshbooks for, I think about 10 years now. And the reason why you get paid faster when you're using fresh books versus just like creating like a Microsoft Word document or Excel is you don't want to make it a pain in the butt for your clients to pay you they want you want to make it easy for them to pay you. So what Freshbooks will do is they have a couple of things, they've got online payment, so someone can pay right away with their credit card, I found that as the best way to just get paid really quickly. Because sometimes if someone has to cut you a check, or make a bank transfer, then they got to get accounting involved and and then you have to get a purchase order number. And often people just put their credit card company credit card in and pay it immediately. And it's done with they have a payment reminder. So it will automatically remind your clients Hey, this thing is due in a couple days or this thing is overdue. it'll it'll sort of follow them up and then also has messaging because often not all the time, but sometimes my invoices don't have the correct purchase order number on or it doesn't have the correct company name or needs the address or it needs to specify anything. And by having being able to message back and forth on a specific invoice. We'll make sure that all of that communication is up front right on the invoice. So check out freshbooks.com Ford slash syntax for a 30 day unrestricted free trial and enter in syntax in the How did you hear about a section Thanks so much to send out a note to Freshbooks for sponsoring. Thanks so much to syntax for sponsoring. What do we got next? - -56 -00:34:47,150 --> 00:35:13,800 -Scott Tolinski: Oh here on something. It's funny, like just along the same lines about a couple minutes ago. It looks like Andy Clark had a talk at framework summit. And yeah, there's something called the lazy react Dom Lazy that's coming into react. And it looks like it's basically code splitting with just a lazy and dynamic import. So really cool looks like some code splitting and dynamic import is coming into react itself. - -57 -00:35:13,830 --> 00:35:17,730 -Wes Bos: Wow, that's like, hot off the press hot off the press. - -58 -00:35:17,760 --> 00:35:25,650 -Scott Tolinski: I just saw a tweet about it. It's so easy to just assume everyone's on Twitter. Sometimes I'm like, Oh, yeah, I sent out a tweet about this course. So everyone should know that it exists. Now I - -59 -00:35:26,400 --> 00:35:31,880 -Wes Bos: know, people lose a lot of people with better self control than us that don't go on Twitter. - -60 -00:35:32,100 --> 00:35:33,750 -Scott Tolinski: Yeah, right. I wish I had that. - -61 -00:35:34,080 --> 00:35:42,090 -Wes Bos: Yeah. Next up, we have classes. Do you want to I know that you just finished up a sort of a course on this. I want to give us a quick rundown. - -62 -00:35:42,150 --> 00:37:16,380 -Scott Tolinski: Yeah. So classes is sort of the the new way of? Well, I mean, so Well, let's talk about classes overall, right? Because classes have been in a lot of other language for languages for a long time, and is basically a lot of the things that we used, like object prototype before, where you're creating objects, essentially. And you were sort of treating them like classes and other languages are now well, essentially a class. And some people don't like this, because again, they say it's like syntactical sugar, right? It's just like a way of sort of masking something that we're doing. But classes are really just a way of creating a thing, right? I like to think of it as like a thing. And in my example, in our course, we create a team, right? And that team has some properties. And those properties are added to it in its constructor. And then you can have methods and functions inside of that, that class that do things for that team, right? Maybe the team scores a goal or something like that. When then you can extend the functionality of a class into a new class. If this is something familiar, it's chances are you've probably used classes in react with your components, right? So we say, Okay, we have a team, and you could extend it team. So you could say class hockey team extends team. Well, now hockey team is going to get all of the properties and all the good stuff from team. But you can add new things that are specific to a hockey team, right. And so again, primarily, you're going to see classes being used all over the place. Now you're going to see it in all of these front end frameworks, because it's really the, in my opinion, the best way to contain all of these things within one thing, right? I'm using the word thing a lot. - -63 -00:37:18,510 --> 00:39:10,940 -Wes Bos: Yeah, absolutely. I think another thing, there's there's thing again, one thing about classes in ESX, that we don't have just yet that's been a huge pain point in react is the ability to have like instance, properties, yeah, that are somewhat easy, we can have them. So if you the problem with classes, if you want to access this, if you want to access the instance of a class. So if you have a class called dog, and you make a new dog called Snickers, and you make a new dog, what's your dog's name? Lucy, Lucy, you make a new dog called Lucy, if you want to give like a name to each of those, you have to, if that that's, that's an instance property, they each have their own property called name, you have to do that inside of the constructor. And that's a bit of a pain, when you want to have a method on that class that can access this, it accesses the actual instance. And that's, that's very helpful in react because often you need to access this dot state, this dot props, this set state, right, you need to access event handlers that are on this. So the way that you had to do it in the past is in the constructor of your class, you have to assign your class properties. And then in the constructor of the class, you also have to bind all of your methods to the instance of this. And the way around that is proposal to ESX classes, which is just having an equal sign. So instead of having like render parentheses, curly brackets, that's a that's a method you will have, which by the way, render is actually bound to the instance just because react does it under the hood. But the equal sign will allow us to assign instance properties to to it. So you can say things like state equals or a handle event equals and you use an arrow function, and that will make sure that all of those are automatically bound. It looks like it's gonna make it into to JavaScript. And it's been widely used in in react land for probably almost two years now. - -64 -00:39:10,979 --> 00:39:38,550 -Scott Tolinski: Yeah, and I've been using it with the Babel plugin transform class properties, you can give it like a static default props is equal to an object with your default props. And then you could also even have your state just state is equal to it's just so nice. It's so nice. So yeah, I'm looking forward to that being in there. But in case you want to use it already, go ahead and use that Babel plugin Babel plugin transform class properties. I use that very frequently pretty much anytime using any sort of react or class based anything. - -65 -00:39:38,820 --> 00:39:46,590 -Wes Bos: It comes for free and in next it comes for free and create react app. Oh, by the way create react app to know man were yesterday - -66 -00:39:46,590 --> 00:39:48,690 -Unknown: that was talking about the news. - -67 -00:39:49,020 --> 00:39:57,480 -Wes Bos: Yeah, we got the news. He could react to came out which has support for sass and you want to should we rehash it just real quick. - -68 -00:39:57,650 --> 00:39:59,960 -Scott Tolinski: Yeah, let's pull it up. Let's pull it up. - -69 -00:40:00,299 --> 00:40:15,900 -Wes Bos: So it's got a whole bunch of stuff in it. Obviously, it has sass and CSS modules out of the box. That's the biggest reason why people would eject from create react app. The updated Babel seven, which gives us the fragment syntax of closing brackets, - -70 -00:40:15,920 --> 00:40:23,850 -Scott Tolinski: the fragment syntax, I use it all the time. You don't have to use the word fragment, you just yeah, you just use an open and closing are those called brackets, plat bracket, no, - -71 -00:40:24,059 --> 00:40:25,500 -Wes Bos: not flap angle bracket, angle - -72 -00:40:25,500 --> 00:40:39,540 -Scott Tolinski: brackets, yeah, use an open and close angle bracket, I use that I've been using it and I absolutely love it. And not being able to use it inside of create react app was a huge bummer to me. So that's a nice and easy, nice and easy little win there. It's using Webpack for under the hood, - -73 -00:40:39,779 --> 00:40:42,380 -Wes Bos: splits j s bundles more intelligently. And that's good. - -74 -00:40:42,440 --> 00:41:10,770 -Scott Tolinski: Yeah, one of my actually favorite things about this is the use of Babel macros, because you can now import graph qL files, which was like a thing that was a giant pain, I actually had to eject to import graph qL files in my react and Apollo course. So for those who don't know, you can write your Apollo queries and dot graph qL file and import it, and then use that query in your component rather than writing the query in the code itself. I absolutely adore that. So I'm a big fan. It seems like all of these things are big, big improvements here, - -75 -00:41:10,770 --> 00:41:45,270 -Wes Bos: you can now optionally get a smaller CSS bundle. If you plan to target modern browsers. That's good, because I guess they compile the CSS for you. Service Workers are now opt in something that's built me by default, the Create react app will register a ServiceWorker. And then if you accidentally run something else on the same port, that ServiceWorker will still be there. So that's good. And it uses Google's work box, which is a much more friendly way at building service workers than the actual service worker spec. So pretty cool. I'd be pretty excited to try this out. - -76 -00:41:45,359 --> 00:41:51,270 -Scott Tolinski: Yeah, you know, I will be I love create react app, anything that saves you that kind of time to get started. So I'm a big fan. - -77 -00:41:51,689 --> 00:42:01,710 -Wes Bos: All right, let's finish it up with things that are part of ESX. And maybe you're really excited about them at first, but you just don't find a huge use case for them just yet. - -78 -00:42:02,129 --> 00:42:33,510 -Scott Tolinski: Yeah. And this one for me isn't necessarily I don't have a huge use case, or I don't find it helpful. I don't use dot den or dot catch very much. I don't know why I don't but I just don't I pretty much I'm always using a sink await just because I like the syntax more like, it's easier to read for me. So I pretty much am just not using dot then or dot catch, like really at all. So if you love that, then that catch nothing against you. Because I think it's fantastic either way, in any way of doing it. But yeah, it just used to sneak away. I don't know why. But I just like it. - -79 -00:42:34,199 --> 00:43:26,820 -Wes Bos: You know, what I've been been doing a lot lately is I use a sink await and I await the actual result. But then if there is something that would go awry, I still chain a dot catch on to it. So instead of like if I have a method that's called like, fetch users, and that's an async method, I have to await instead of wrapping the entire fetch users in a try catch, because I'll often be doing it right in like a little arrow function on side of a button. I'll just, I'll say a wait there. const users equals await fetch users, and then I'll dot catch, handle error. And then just putting that tiny little dot catch handle error onto the end of all of my sync methods will allow me to nice and cleanly catch any errors that might happen, but still get the benefit of using a single way. Yeah, and I've been a big fan of that kind of a kind of mix and match. Path promises half of sync away. - -80 -00:43:26,879 --> 00:43:27,690 -Unknown: Yeah, right. - -81 -00:43:28,439 --> 00:44:12,510 -Wes Bos: One thing that I said I didn't use in a previous episode was generators. And a couple people tweeted me some really good examples of using generators. Yeah, the thing is, is even though I read those examples, like, I'm not doing that stuff, so that's probably why I'm not you know, using Yeah, it's not that I don't like them. It's just the fact that I don't write a really good example. So Jake Archibald said, he wrote the game logic for Minesweeper and use a generator to iterate over this squares around a square, which is pretty neat. And he put a link to the code where he does that. So I could definitely find myself in a use case where I need a generator, but I don't think that's an everyday occurrence for the type of code that I'm writing. Yeah, I - -82 -00:44:12,510 --> 00:44:14,730 -Scott Tolinski: think that's gonna be one of those learning when you need it once. - -83 -00:44:15,029 --> 00:44:20,280 -Wes Bos: I'm gonna be so excited when I finally do, we will have a whole episode on what is the generator? - -84 -00:44:20,429 --> 00:44:35,190 -Scott Tolinski: It seems like they use them really like them. So you know, I hear nothing but good things about generators, right? Like not everything in es six plus you hear good things about all the time, but I feel like generators specifically, I hear a lot of good things about them. I just don't have the use case yet. - -85 -00:44:35,249 --> 00:46:05,790 -Wes Bos: Yeah, one other thing I have on here as well is that I don't use is the the for of loop. So we used to have the four in and then there is now a four of loop. And the four of will allow you to loop over almost anything, which is pretty cool. You can loop over the strings, arrays, array like objects, which are like node lists, arguments here, but you know, we'll talk about those already. ish things on the thing, maps, sets, things like that. And I believe you can also use a for have to loop over a generator, which is pretty cool. Let me just take a quick look, yeah, you can use it to loop over a generator as well. And that's kind of cool because a generator might not necessarily have a definitive end to it, because the generator will just you just keep calling next, next, next, next on a generator, and at some point, the generator will tell you that it's finished. But the generator itself could be adding more items as as it's going, right. So you could say, for like, I talked about the meat counter example before. So for current user of meat tickets is a generator, and you just kind of you just will just loop over that sucker until the generator runs out of out of things to give you. So I thought that was a pretty cool example. But that's that's the one thing that I don't really use all that often. And I think it all boils down to things we've talked about before is that I'm much more using of things like map filter reduce, when I'm when I'm trying to loop over items. - -86 -00:46:05,880 --> 00:46:12,060 -Scott Tolinski: Yeah, I'm pretty much am to love this stuff. It's like when you have the use case for it, I think it it all clears up. But yeah, - -87 -00:46:12,120 --> 00:46:27,210 -Wes Bos: well, I should say that. Because you can use for have to map over an object. But if that was the case, I use object keys, object entries, object values, right? And those will those will give you a raise of keys, values, or both, which is entries. - -88 -00:46:27,420 --> 00:46:34,200 -Scott Tolinski: Yeah. And you can also use it to iterate over the one of the other things, we haven't really used that much, which are maps and sets. - -89 -00:46:34,350 --> 00:47:15,510 -Wes Bos: Yeah, maps. And sets are really interesting. Because maps are kind of like a an object. And sets are kind of like an array, they all have their they all have their benefits. I think it's one of those things where I've just always reached for an object into an array where I need to like maybe stop myself and say, Hey, would it would be better here to pull that up? One huge benefit of a set is that it's unique. So if you push the same value into an object twice, it will just D dupe it. That's actually a kind of a little sneaky way to D dupe an array where you can spread a set into an array. Now you can take an array, put it into a set and then spread it back into an array and that will D dupe all of the extra things that you have in there. - -90 -00:47:15,660 --> 00:47:16,950 -Scott Tolinski: It's pretty sweet word de doop - -91 -00:47:17,160 --> 00:47:17,760 -Wes Bos: de doop - -92 -00:47:17,760 --> 00:47:21,720 -Scott Tolinski: Onomatopoeia isn't that I don't know it sounds like a - -93 -00:47:21,780 --> 00:47:29,790 -Wes Bos: amount of pm did alright, let's talk about some or do you have anything else to add? Or should we move into some sick pics? - -94 -00:47:29,850 --> 00:47:33,120 -Scott Tolinski: Le Moon is sick Pixie I have nothing else to add here. - -95 -00:47:33,270 --> 00:47:34,170 -Wes Bos: All right. - -96 -00:47:34,320 --> 00:47:45,540 -Scott Tolinski: I have a sick pic here. My sick pic is going to be fun. It's gonna be very fun. It's the everything but the bagel sesame blend from t J's from Trader Joe's. It's basically - -97 -00:47:46,560 --> 00:48:17,760 -Yeah, if you've you know if you like an everything bagel and you were thinking hey, wouldn't be great if this everything bagel seasoning was inside of like a shaker like a salt shaker. Well that's what this is. So it's at Trader Joe's it's called everything but the bagel blend. I was just put this on like French fries yesterday and I was like this is awesome. I have everything bagel french fries right now. So I'm a big fan of this. It's just like everything you do with like sesame and onion and all that sort of poppy seed or whatever that's in the everything bagel. So everything bagel, everything but the bagel sesame blend. That's my sick pick - -98 -00:48:18,180 --> 00:48:54,600 -Wes Bos: this week. You know what I'm gonna I'm gonna follow your lead as tick pika trader. We don't have trade shows in Canada. But every time I go down there we've got a couple like staple items that we have. And a couple months ago I was down there and I discovered the like jalapeno like the green jalapeno hot sauce, which was unlike any hot sauce I've had before because most hot sauce are like Chili's and they're or it's a Chipotle a which is like a roasted jalapeno. But this was like a fresh, yes, green jalapeno and it's like it still has like a really nice texture to it. And I just destroyed a bottle of it. It's what is it called here? It's called the green dragon Green - -99 -00:48:54,600 --> 00:48:56,430 -Scott Tolinski: Dragon. Yeah, it's got a dragon on it. - -100 -00:48:56,970 --> 00:48:57,750 -Wes Bos: That's so good. - -101 -00:48:57,750 --> 00:49:00,840 -Scott Tolinski: Yeah, we got that stocked. We got that stock here. - -102 -00:49:01,020 --> 00:49:33,000 -Wes Bos: We so I ran out and I put out an SOS on Instagram and my boy, Patrick, he says lesson two point I can't I'm I'm sorry. He's the guy that design the stickers for my upcoming batch. He sent me like eight bottles or something like that. So I am stocked for at least I don't know, you go through about a bottle a month at our house. We call it hiccup sauce at our house because I always get the hiccups when they eat something too spicy, but it's probably my body telling me to stop but I just enjoyed so much. - -103 -00:49:34,170 --> 00:49:59,190 -Scott Tolinski: It's It's good. It's very good. I don't know if you or other people know this, but I'm dyslexic. So specificity is like the most nightmarish word in the world to try to read just because there's so many similar letters and like one can spines, like I look at that and I just goes, Okay, it's bad. And then the rest of it. I don't know about it. So I gotta say it like 100 times before it just drills it into my brain. - -104 -00:49:59,490 --> 00:50:14,730 -Wes Bos: If I try to honestly didn't even know that I was saying it wrong my entire life like and I've been teaching CSS for like nine years. And I didn't know that. But it was funny people on Twitter had such a good attitude about it. They're all everyone's howling over us, like pronounce these words. - -105 -00:50:14,760 --> 00:50:26,580 -Scott Tolinski: Yeah, people don't know if we're punking them. And then like, I'm like, No, this is genuine. Like, yeah, they're just some words, man, I don't know about it. That's one of those words, but I'm in I'm in it, - -106 -00:50:26,639 --> 00:51:14,550 -Wes Bos: I got it. Words are hard. Let's talk about some sick pics, I'm gonna sick pic because of we've been learning about JavaScript. And I have a course called es six for everybody. And it's at esx.io. And it will detail it goes into every single piece of what is new in JavaScript in ESX. And I actually updated it maybe about four or five months ago to include a sink await, which is not part of ESX. But it's such a huge thing in JavaScript now. As well as some some things like class properties, I explained that. And some of the some little things like exponential operator and function arguments, trailing comma object entries, object values, I added those as well. So if you need to get up to speed, you can just cherry pick the videos in this the things that you need to learn. It's at esx.io. Nice, - -107 -00:51:14,849 --> 00:52:36,180 -Scott Tolinski: cool, and I am going to shamelessly plug my new course, which is called better JavaScript, which is actually it's funny because it's called better JavaScript, the whole thing isn't necessarily focused on writing better JavaScript, maybe like half of it is it's a lot of ESX plus stuff, where we do get into usage of things like classes, we get into usage of things like a sink await. But we also get into some even like core JavaScript stuff, which is like why you'd use an event listener versus event method or something like that, we get into just basically aspects of JavaScript that you use frequently. And then there's a whole ton of functional programming in sort of clean code things in here. So we talk about writing functions that are less brittle, we talk about how to write code that is a little bit more bulletproof and easy to test. And maybe some code smells like some things where you're thinking like, Ha, when I think about testing, or when I think about how this code works, why does it make me want to cry? So basically, we go through a lot of these things and, and write code that is easy to test, easy to understand less brittle, and we talk all sorts of about some difficult topics like functional programming and in a very, like layman's sort of way about why you would even want to learn this stuff, so check it out, it's at better JavaScript, it's on level up tutorials. COMM you can get it by subscribing if you sign up to be a yearly subscriber, you can save 25% so check it out, level up tutorials.com forward slash Pro. That's all I got - -108 -00:52:36,209 --> 00:52:53,910 -Wes Bos: beautiful. Alright, that's it for us today. If you enjoyed it, make sure you give us a follow at syntax FM. Also hit Scott and I up I'm at Wes Bos on Twitter and Instagram. Scott is at St Lynskey and correct level up tuts awesome, and we'll see you next week. Please - -109 -00:52:55,890 --> 00:53:05,610 -Scott Tolinski: head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax83.srt b/transcripts/Syntax83.srt deleted file mode 100644 index e1c1a7d9b..000000000 --- a/transcripts/Syntax83.srt +++ /dev/null @@ -1,196 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,600 -Announcer: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally in ski. - -2 -00:00:25,950 --> 00:00:38,360 -Wes Bos: Welcome to syntax. Hopefully you are doing well today. My name is Wes Bos. I'm a full stack developer with me as always is Scott to Lynskey, who is also a full stack developer. - -3 -00:00:38,489 --> 00:00:39,180 -Unknown: Hey, - -4 -00:00:39,180 --> 00:00:41,040 -Wes Bos: how you doing today? - -5 -00:00:41,310 --> 00:00:49,440 -Scott Tolinski: Good, good. Well, I'm actually I'm sick, so I'm not doing great, but uh, good, pretty good. Let's get going. Yeah. - -6 -00:00:50,400 --> 00:02:15,990 -Wes Bos: Today, we're gonna be starting off a series of three hasty treats. Actually, it's funny in the last like, I don't know, maybe a week or so I've gotten like four or five people suggest that we do like, mobile testing old browser supporting old browsers polyfills, all that kind of like stuff like, how do you use this cool stuff that we talked about every single time, but still support the older browsers that are from a couple years ago. So we're gonna be breaking that down into three sections. We've got supporting and testing old browsers, you've got supporting grid Flexbox, and other new features. And then we have a big one at the end, which is transpiling and polyfills. Talking about the differences between though what are some of the approaches into that? So today, we are sponsored by view school, your member view school came a couple, maybe a couple months ago, they sponsored the podcast for a bunch of episodes, and they have that view jazz masterclass. Well, they've launched a new website with new subscriptions. Now you can get access to their entire catalogue, which has over 160 lessons, including the Vue JS masterclass for only 12 bucks a month. So you can get that entire thing that we were talking about before, as well as this new subscription. every single week there. They're publishing new lessons, best practices form validation, advanced component design. Sounds like I need to take this because I need to learn view myself, it's sort of a running joke that the view episode is coming at some point. - -7 -00:02:16,800 --> 00:02:18,410 -Scott Tolinski: Right? At some point, at some point, - -8 -00:02:18,440 --> 00:03:14,550 -Wes Bos: well, maybe maybe I'll chat with these folks from the school and see if I can learn a thing or two of you anyways, if you are learning interested in learning view, you as a syntax listener can get the first month for only five bucks. So you can really, you can really just try it out at view school.io forward slash syntax you learn from industry expert and core team members. So check it on out sick. Yeah, thanks so much to view school for coming on for a bunch more episodes really excited to have you on as a sponsor. All right, so let's jump on into it. We'll be talking in this episode about supporting and testing older browsers. This is something that's never really exciting to talk about. Because it's not that it's fun. Yeah, it's not that fun, and it sucks. And often you we talk about these new things, and then some Debbie Downer or what's the male version of a Debbie Downer? downer? - -9 -00:03:14,579 --> 00:03:15,390 -Scott Tolinski: Yeah, I'm trying to think of - -10 -00:03:16,410 --> 00:03:30,600 -Wes Bos: this Debbie Downer, male Adani down, Dani downer. No bid Dani downer, some Donnie Danner comes out of the woodwork and says cool, but I have to support it for my work. And I can't - -11 -00:03:32,490 --> 00:03:40,560 -Scott Tolinski: disappoint. Like that. Like I e6. At this point, I would just be like, I quit IRS. I quit. I'm sorry, - -12 -00:03:40,680 --> 00:04:06,930 -Wes Bos: man. As an aside to that. I watched a movie on the weekend called something dogs war dogs. And it's about these guys who like went on like the Pentagon website and found these like, they were like suppliers of guns to the Pentagon. And because it took place in like 2000 to 2003. They were using Windows XP and IE six now in the thing, and I just kept thinking like the the people that had to code the website, - -13 -00:04:06,930 --> 00:04:08,100 -Unknown: like, you know, funny, - -14 -00:04:08,400 --> 00:04:43,010 -Wes Bos: they had to code this thing as if it were 2003. And I thought that was so interesting, because they had to find old computers and run Windows XP on them. And then build a website that was only work and also look like it was built for iecex. I thought that was so interesting. My wife's like, You're such a nerd, because I always call out when things yeah, things happen in videos that are not technical. Like somebody was texting an Android phone, and then the person on the iPhone had blue messages. I was like, if it was Android, it would be green. Just like you always ruin the entire video, but this I was very appreciative of it. - -15 -00:04:43,680 --> 00:05:05,820 -Scott Tolinski: That's hilarious. Yeah, I know, think about like, you wouldn't be able to hire somebody who just came out of a boot camp today because they would be like, I don't know, like, what did everything's broken. You'd be somebody who's building sites in that era. And that's like my old man moment right there. But you got to have the expert, someone who's used to some of these things that we're gonna be talking about over the course of the next three episodes here. - -16 -00:05:07,290 --> 00:05:14,100 -Wes Bos: Exactly. So let's jump on into it those first I'll ask you a question, how do you decide if you support an older browser or not? - -17 -00:05:14,270 --> 00:06:42,360 -Scott Tolinski: Yeah, I think the biggest thing is to know your audience. And I mean, knowing your audience is important. For a host of a lot of reasons, you can find out a lot of information about your your audience by your analytics data. I don't know so many like, I feel like I've never made a site without Google Analytics. So Google Analytics is a big thing, because it's going to give you a little bit of insight on who's using your site and stuff like that. But also, knowing your audience, just in general, who's going to be visiting your site, right, if it's a government or an educational site, you know, you're probably going to need a lot of old browsers support, because a lot of times, those computers are really locked down into being old, old operating systems, old everything, because that's how the the security folks aren't progressing it. And me personally, I know that my website level up tutorials is primarily going to be consumed by developers. And I can't imagine developers using IE seven or IE eight, or any of that stuff. So guess what, I don't have to support anything that's not a modern browser, because my target audience isn't going to be using those things. Not to mention, we're going to be talking a lot about mobile too, right? I know, people do consume my content on mobile, but it's primarily consumed on the desktop or their iPad or something like that. So even Furthermore, you got to know how to tell tailor your experience in your design to how people are using your content. And you can get information like that, again, from things like Google Analytics, or other types of analytics, or just simply by understanding your audience and who's using it. - -18 -00:06:42,780 --> 00:09:25,500 -Wes Bos: Yeah, I agree as well, I usually take a look at my Google Analytics data. And again, because I primarily support a developer audience, I don't have to reach back into it. But I will tell you that I, I have run into many situations. So I looked at my Google Analytics data. And I knew that there was like a very small, like 1% of, or maybe less than a percent of people who are visiting my website, we're doing it in IE 11, whatever the people that were actually visiting an island, they were the people that were trying to buy my most expensive team licenses that are hundreds, if not thousands of dollars. And I was getting, I was getting messages from them being like, it doesn't work. And I was like, oh, shoot, I better actually fix that. Because even though it is such a small fraction of my traffic, that makes up for such a huge portion of my actual income, that I did go back in and make sure that I didn't make sure that it looked amazing. And everything worked, I just made sure that I'm the most important features, which is buying the actual course gain by signing the spots to the developers. Those are the two main features I made sure I had to go back in and we'll talk about that in I think the third episode, how I actually fixed it, it was actually just a quick little polyfill. And I was back up and running. Nice. I think the other thing we really need to talk about is like is it worth it, time versus money. So if it's going to take you an extra week to make sure your application works in an older browser. And we keep using iE 11 for this. And I think the reason we keep using I 11 for this is because in my like world at least that's the like the one last holdout. Like when I started, it was all about iecex. And over the years, we've slowly seen them drop off and off and often now that most people who will walk into Best Buy and buy a computer are on edge, i think i think i think that this is not gonna be true across the board. But I think this is going to be a bit of a thing of the past because edge will auto update. Now. Finally, yeah, you never see people being like, oh, someone's on the old version of edge. It's similar to Chrome how in most cases, I've certainly stumbled upon people using my courses that are on a two year old version of Chrome, for whatever reason, usually, it's a employer that locks it down. But in most cases, this will, uh, will auto update. And these these supporting, like browsers that are four or five years old, is not really going to be a thing in the future, which is really cool. But yeah, my original point, is it worth spending the extra time on that? Yes, that's a question you have to have with the business that you're working with, or the team that you're working with, because certainly it could be a small percentage, but it could make up a significant amount of profit for the business that's running. - -19 -00:09:25,550 --> 00:10:45,050 -Scott Tolinski: Yeah. And sometimes I think, you know, you might feel a little bit locked into things. I remember when I was working at agencies we would be we have to support this. We have to support this and this and this. And then I remember very specifically, me and the other developer, were basically sat down with management showed them the browser usage statistics, and we're like, Listen, ie seven is now used by this percentage. It was it was a while ago, ie seven is now used by this percentage of people. Okay, this is such a miniscule tiny little percentage. We need to know say in all contracts going forward, that We will not be supporting IE seven, regardless of your needs, and whether or not we get jobs or not because of that, it's not something that we were willing to do. We weren't willing to waste the time that the agency was wasting supporting those browsers or the point 5% of the people using IE seven still. So I still remember that day when he came out of that meeting, and the management had approved that jump to not support IE seven anymore. And I just remember being like, yes, this is going to make our lives so much better. Because again, we were just spending so much time on trying to build modern applications and modern interfaces in non modern browsers. And it was just sort of, again, it was just costing the agency a lot of our time. And that was the the argument that we use there. - -20 -00:10:45,329 --> 00:11:34,740 -Wes Bos: So now that we've talked about, should you support older browsers, there certainly is another issue, which is I just support the latest browsers. But even between those browsers, there's still a lot of stuff that can go wrong, right? Like this happens less and less, I found, I don't know if that has anything to do with me becoming a better developer or browsers becoming much more consistent. But there still is the odd case where you open up a browser, or you open up a website in another browser, and it doesn't work. And it looks funny, something's off. There's just these little kind of things that differ between browser to browser. So you still have to test your website in every single browser that's out there to make sure that you're in good shape every single browser that you're supporting. So let's talk now about like, how do you actually you do that both for desktop as well for mobile? What's your strategy? Scott? - -21 -00:11:34,889 --> 00:12:46,050 -Scott Tolinski: Yeah, I mean, my strategy is emulation is great. But there's no substitute for the real thing. You know, whether it's having a like a Windows PC handy that you can have some of these older browsers installed on, or I mean, a, you know, something like a virtual machine or something. I don't have a Windows PC here, but my wife has one for her work. So I'll pull up her computer and try things on it. And and that seems to work fine. For me, I like to just use my stuff on as much different hardware as possible. Just because there's there's are going to be things that you just don't anticipate. And emulation is great. But sometimes it really is nice to see how the users are using it on different hardware specifically. So I have a, you know, I have an iPad sitting around here, because I know a lot of people use my application on an iPad, I have an iPhone, I have Android phones, I have an Android tablet, I have a Mac computer, I have a large monitor, and I have a Windows PC installed on a desktop, all of which I use to test things out. Because I like feeling that that Real Usage sort of stuff. Rather than emulating everything, even though emulating can often be easier and cheaper. - -22 -00:12:46,229 --> 00:14:59,730 -Wes Bos: Yeah, so I follow pretty much the same way, I like to get it as close to the actual user. And it's funny that we say this, because this is very much how a lot of like, just like actual unit testing is going these days or website testing is going to try to get as close to how the user will use your website, because that's where you're going to experience any issues that user has. So I've got a little Windows laptop here that all all spin up every now and then just test it on on all the versions that we have. If I don't feel like getting that out, or it's out of battery or something like that, I'll spin up a virtual box. So Virtual Box is a free virtual machine that will allow you to sort of like install Windows or Linux. And actually, you can actually install Mac OSX to it as well. And it will sort of make a fake computer for you. And what you can do with that is that you can have all of these different versions of Windows saved as images. And then when you have a specific issue with a specific version of Windows, so I would usually just have like a Windows 10 and Windows eight and a Windows seven. And then I used to have way before that, but I've since deleted them, because they they take up gigs of space on your computer. And then you can boot those up. You can also save little snapshots for each one so that you can like save it before it's been been updated to a certain version of a browser. I'll usually boot that up. This is my iE 11 machine. This is my edge machine. This is my I used to have an IE 10 machine, and then even like testing it on Chrome because like font rendering in Windows is so much different than font rendering on OSX. That's since been mostly fixed. But sometimes fonts do look a little bit different from from computer to computer. So I like to have these windows makes available to you all of these virtual images. So you don't actually have to pay for any version of Windows to test it. They they give you like these 90 day free images of windows which you can download from I think it's modern.ie. Let's just triple check. That's still the website. Yeah, you can still go onto modern.ie and pull down all these images of older versions of Windows. What thing I like to tell people is take a snapshot on day one, because once you hit that, whatever 90 day window or whatever, you can always roll it back to where you initially had it. - -23 -00:15:00,000 --> 00:15:03,750 -Scott Tolinski: That will work really well. Yeah, the snapshots are lifesaver in that regard. - -24 -00:15:03,930 --> 00:15:26,040 -Wes Bos: Yeah, big fan of that, it's pretty cool. Because you can really quickly get it up and running, I also haven't really had much issue with it being very slow my desk, I have made this because I have a pretty good computer. But when I am having like a really fussy issue, I will bring out the computer because I just there's nothing better than having like a actual keyboard and an actual machine that is dedicated to that browser. - -25 -00:15:26,160 --> 00:15:29,460 -Scott Tolinski: Yeah, because it's gonna be the real experience. Yeah, - -26 -00:15:29,580 --> 00:16:37,170 -Wes Bos: there's also a whole bunch of other testing services out there. So there's like, I think browser stack, cross browser testing Sauce Labs, there's a bunch of these other services out there, where you can actually just like do it from the website, and it will sort of stream what's happening on that computer into your browser. And that's pretty cool, because you're gonna have access to literally thousands of different devices and desktop computers. But the downside to that is I've always found them just painfully slow to work with because they're, they literally are streaming the desktop into your browser from like a machine that's server racked somewhere. And I've found them to be very slow. And and I've never been a huge fan of them. Also, like the keyboard shortcuts never work quite right in the inspecting. And there's also services that will just send you screenshots of your website, in all these different browsers. But that's really frustrating. Because if something's broken, what do you do? You try to fix something. And then it's like debugging before dev tools, you just kind of pick something and refresh the page and hope it worked. So nothing better than than the real thing. It sounds like I can't believe it's not butter. - -27 -00:16:39,810 --> 00:17:51,900 -Scott Tolinski: Nothing better than the real thing. Yeah, I know, it's great. Another like strategy here, I guess could be just simply even knowing what kind of issues you're going to have before you have them, right? Because a lot of this stuff is testing and you're figuring out things to make sure their work. But a lot of it is you know what's going to work ahead of time, then you can write your fallbacks or use your polyfills, or stuff that we're going to get into later, without having to like even necessarily test to figure out that you're doing something wrong. So a great resource for learning about what browser support what is can I use? And can I use comm is something that I mean, we I feel like we almost always have Can I use open window regarding this podcast just to reference certain things. It's it's incredibly helpful website, where you can basically type in features and see what browsers support them. So it's just a basic search bar, can I use? Let's say you wanted to use the fetch API, can I use, you can just type in fetch. And you can see that Well, okay, I 11 does not support fetch. So you need to polyfill for that upper mini doesn't support it. But it gives you a nice little color coded table to show you what versions of web browsers, it's a great way to learn about the sort of modern features and know exactly what you're getting into before you get into it. Yeah, - -28 -00:17:51,900 --> 00:18:20,460 -Wes Bos: I'm constantly surprised at people who don't know about Can I use anytime I have a tweet anytime I have a screencast or a course or anything like that I don't, I specifically don't go into browser support, because that will immediately date the content, regardless of where you're posting it. And I would assume that developers can figure it out all by themselves. Oh, I'm using this feature. Is it available on the browser that I'm trying to support? Can I use comm is invaluable in figuring that out? - -29 -00:18:20,519 --> 00:18:21,690 -Scott Tolinski: Yeah, absolutely. - -30 -00:18:21,830 --> 00:19:24,300 -Wes Bos: Let's talk about mobile devices as well. Um, this is sort of as we sort of wave goodbye to the the problems that we have on desktop, we usher in a huge new amount of headaches, which is trying to get it to work everyone's different mobile device, which has all kinds of different screen sizes, all kinds of different speeds and CPUs in these phones. And then most importantly, all of these phones have different types of browsers on them, right? Like, on your iPhone, you can have iPhone is pretty good, because they all will run the safari core, even if you use Chrome on your phone, it will still use that behind the scenes. But in Android world, there's all kinds of different browsers with all kinds of different actual engines behind them. And if you need to support some of these older devices, or if you need to support some of these devices, where someone went and got a free android phone from from their carrier, it might come like what is there's some of these phones with like these very bizarre browsers that you might not have heard of? Or if you're if you're doing like a global that often in different countries, there's there's browsers that you might not have heard of, as well. - -31 -00:19:24,509 --> 00:20:13,740 -Scott Tolinski: Yeah, mobile's a tough space again, because, like you said, there's just so many different things. And that's a good thing and a bad thing, right? Because it allows for all these different approaches, potentially lead to innovation, but at the same time, like how many of these things do you need to worry about and need to download? I personally, I mean, I have an Android phone. And while I could download a whole bunch of mobile browsers onto it, I just have Chrome and Firefox because those are really the only browsers I'm really worrying about. And if we're being entirely honest, the mobile browser that I've had the worst time with is Safari. Safari is constantly Assume weird bugs that have just existed for a long time. That is just makes me frustrated because you think that they would have it down at this point. But I don't know if I'm having any trouble with any browser, it's almost always mobile Safari. - -32 -00:20:13,920 --> 00:21:23,730 -Wes Bos: Yeah, I find that as well. There's, there's always just weird edge cases, I think the latest version, iOS 12 really fixed a lot of those issues, which I was really excited about. And the nice thing about iPhone is that almost everybody upgrades iOS in within a month or two. So as soon as the fixes out for these things, it's almost not an issue to have to figure it out. That said, you still should lean on any of your bug reporting services that you use, because things can pop up in weird corners of your website. And that will quickly show you where where that issue is happening. Personally, I like to have a drawer full of devices. So I've got just a drawer here, my office that has, I don't know, probably 1520 different phones, I don't reach for it as often as I used to, I think just because things aren't getting much better. But I often will have have issues with a version of Android, that is being weird or something on one version older if I'm on iOS 12. Now I'll make sure I keep an iOS 11 device around until we go to iOS 13. And then I'll upgrade that one, just so that we're always in good shape, make sure that you can have all devices because nothing is worse than having to ask somebody who has that device to run some some. - -33 -00:21:23,730 --> 00:21:27,210 -Scott Tolinski: You please try this out and tell me what happens. Yeah, - -34 -00:21:27,390 --> 00:22:09,690 -Wes Bos: yeah. I've done it many times before. I'm very thankful that my audience is developers, because people are often very willing to to help put those down. If you do have an issue on your phone, though, like like, how do you how do you get around that? Well, that's where you need to reach for what I call remote debugging you so on, if you open up Safari on your Mac, and you have an iPhone connected via a USB cable, you'll be able to open up full dev tools. And then you can actually just use the screen instead of your monitor. It's kind of funky because there's no Inspect Element, because it's actually on your phone. And then Android for forever has had a wireless remote debugging. You do have to get the is this still true? Maybe Scott knows. You still have to install ADB. - -35 -00:22:10,080 --> 00:22:29,280 -Scott Tolinski: Oh, the ADB? Yeah, I don't know if you still have to. I've always had it installed. So I haven't like gone back to a time where I'm setting this up fresh. Yeah, yeah, yeah, I always have the Android Developer Tools installed, because I actually did a little bit of Android development for a little while. So I have like a little dev environment set up there. I'm not quite sure. - -36 -00:22:29,310 --> 00:23:04,320 -Wes Bos: Yeah, I don't know, I would assume you still have to have that installed, it's not a big deal, you can whip it up. And then you can have full access to. And that's ideal, because, like, another thing that we have here for testing is you just resize your browser. And then you can also emulate different shapes of phones in your Chrome Dev Tools. But at the end of the day, that's still using Chrome as actual browser, it's not actually mimicking the device and the how the browser works on your device. So having it right on the on the phone, or the tablet that you're trying to test is ideal. And then opening up the console and fiddling with the CSS right from your phone is ideal. - -37 -00:23:04,410 --> 00:24:09,660 -Scott Tolinski: Yeah. And while even on that same regard, you can also emulate the actual browsers in your your desktop by installing the developer tools for either those browsers. Now granted, these things are going to take up a lot of space. Like one way is, if you have a Mac, you can use Xcode, and you can pop up in the simulator, which is going to be an actual device, virtual machine, which is going to be way more reliable than using any sort of like in browser chrome view of that device. Yeah, because it's actually going to be running the heart or running the actual software. And same thing with the Android you can pop up and I think there's the cool thing about Android is you can have a, it's not just the official like Xcode developer tools or something like that. It's also you can download different I think Guinea motion is one of them or something like that. But you can you can download third party emulator. So there's a whole bunch of different virtual machines for Android that you can download to some of which are faster than the others. But you can have like actual virtualized copies of the operating system, which in my opinion, is probably one of the better ways to do it. If you you have hardware that can support those things. - -38 -00:24:09,810 --> 00:24:49,860 -Wes Bos: Yeah, that's that's one huge benefit, I would say, for getting a Mac because that you can download Xcode for free. And if you don't have an iPhone, you can still run the Xcode emulator, and you can run all of the different versions of it. And in my experience, I've never had an issue where something worked fine on the emulator, and it didn't work fine on the device, and even the Xcode emulator in my JavaScript 30 course we try to fake a geolocation. And we want to fake a geolocation updating frequently, meaning that someone's actually driving or riding a bike. And the only way I found to do that is via the Xcode developer tools. You can fake it in Chrome Dev Tools, but you can't fake it changing. You can't fake you can't emulate somebody turning corners and suddenly, that's cool. - -39 -00:24:49,980 --> 00:24:50,730 -Scott Tolinski: That's really cool. - -40 -00:24:50,790 --> 00:24:58,230 -Wes Bos: Yeah. So that's browser, mobile and desktop testing and support part one of what you have. Do you have anything else to add to that? - -41 -00:24:58,380 --> 00:25:30,450 -Scott Tolinski: Yeah, I guess I don't, again, If you're serious about testing if you're very serious, and there's just nothing that can beat the feeling of device in hand, once I realized how many people browse level up tutorials on their iPad, to have it as like a second screen while they're coding, the first thing I did was just go buy an iPad, I didn't have one sitting around. So when bought one just to feel how the site used, like felt and really worked in my hands in it. And it was just kind of eye opening, and I ended up changing a whole bunch of stuff because of it. But like, again, there's nothing that's going to be that feel of device in hand, or testing. - -42 -00:25:30,660 --> 00:26:32,940 -Wes Bos: Totally. Uh, one other tool I often talk about on this is browser sync. And what browser sync will do is you can you can spin up a browser sync instance. And then you can proxy any existing application that you have. So whether that's a WordPress or whether it's a node application, you can set your browser sync to sit on top of that application. And then what it will then do is it will make it available on your both your local network as well as if you want, you can tunnel it to the outside world. And it's really cool because it will sync changes, meaning that you change your CSS, it will update on all of the devices, it will sync scroll. So if you scroll on one of your websites, all the other devices will it'll sync form Submit. So if you're trying to like test on six or seven different devices, you can set up browser sync, open them up on all your devices. And check it all out. I've certainly used that a lot when I've I've run into styling issues on different devices, I'll just open them all up. And then instead just have my code open on my computer and just hack away at it until it looks good on all the different screen sizes and browsers. - -43 -00:26:33,090 --> 00:27:08,610 -Scott Tolinski: I was using something called ghost lab to sync basically your local dev environment across a whole bunch of different machines. And it would Yeah, same thing like keep scrolling up to date. And then I you people who've been a fan of level up tutorials for a long time would have seen my device lab, back when device labs were like a thing everyone was talking about, I built this whole wall full of phones that included a whole bunch of different phones and tablets where I could see instantly whenever I save things update that those changes going across all the devices. It was pretty sweet. It wasn't insanely practical. But it did. It was like really cool to see how to design looked across different different devices all at a glance, you know? - -44 -00:27:08,700 --> 00:27:56,730 -Wes Bos: Yeah, totally. I'm a big fan of of using those. Even if it's just locally on your computer, I've always struggled to get things like live reload up and running. And I know there's a whole bunch of different solutions. But browser sync has never let me down. And it's always had the little there's a lot of little things inside a browser sync like proxying existing websites, but adding in your own CSS. That's something I know if people have frequently where like you're working on a corporate website, there's absolutely no way for you to get it running locally on your own computer, but you are tasked with with writing new CSS against it. And what you can do is you can take the existing website in its live form, proxy it locally and then add your own CSS on top of that and it will it will show you what that website looks with your your added CSS, which I thought was pretty neat. Nice. - -45 -00:27:56,790 --> 00:27:57,600 -Scott Tolinski: Nice. Yeah. - -46 -00:27:57,600 --> 00:28:00,240 -Wes Bos: I think that's it for today. Anything else to add? - -47 -00:28:00,300 --> 00:28:12,570 -Scott Tolinski: No, no ready to get into Part Two and part three. So yeah, keep your ears open the next Monday, Monday after that part two and part three are coming in the same series I guess about old browsers and what we want to do with them. - -48 -00:28:13,320 --> 00:28:16,440 -Wes Bos: Let's get right CLN whose face - -49 -00:28:18,270 --> 00:28:28,050 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax84.srt b/transcripts/Syntax84.srt deleted file mode 100644 index 2866b7c32..000000000 --- a/transcripts/Syntax84.srt +++ /dev/null @@ -1,444 +0,0 @@ -1 -00:00:01,319 --> 00:00:04,590 -Unknown: You're listening to syntax the podcast with the tastiest web - -2 -00:00:04,829 --> 00:00:52,619 -Scott Tolinski: development treats out there, strap yourself in and get ready to live ski and West boss. Welcome to syntax. In this episode, we're gonna be talking about fitness. Now those of you who are longtime listeners will know that one of our first couple of episodes was actually about fitness. And it was one of our favorite episodes. It was a really popular episode that we did pretty early. And now that it's been over a year, we figured that we would come back with an update on all of our fitness stuff and talk about how it's going in the year 2018 in October, how everything's evolved, how we've done essentially keeping up with their fitness goals and maybe some of the things that you can do to become more fit and healthy yourself. So my name is Scott to Lynskey. I'm a full stack developer from Denver, Colorado and with me as always is West boss. - -3 -00:00:52,649 --> 00:00:54,420 -Unknown: What's up everybody? What's up, Wes, - -4 -00:00:54,629 --> 00:00:55,140 -how you doing? - -5 -00:00:55,349 --> 00:01:12,980 -Wes Bos: I'm doing pretty good. Just got through Canadian Thanksgiving, which is funny. I tweeted out Happy Thanksgiving, everyone. And everyone's like, Wait, what? What's it's not Thanksgiving yet. So Canada has Thanksgiving in October, which apparently has nothing to do with American Thanksgiving other than being thankful. - -6 -00:01:13,049 --> 00:01:21,720 -Scott Tolinski: Yeah, I'm wondering a lot about that. Because Courtney came up to me and was like, so what's the deal with Canadian Thanksgiving? Like, I would know the answer is that I don't no idea. - -7 -00:01:22,409 --> 00:01:54,090 -Wes Bos: Yeah, it's just being thankful for the harvest. Which is funny because my brother in law's actually a farmer. And he couldn't come because he was too busy actually harvesting. So we. So we had Thanksgiving without the only farmer in the family. That's hilarious. Yeah, but uh, yeah, I don't know what the deal is. It's a little bit early. I saw one person tried to have like a cyber monday sale for Thanksgiving. But we still do now Canada still does Black Friday, at the same time as the American Thanksgiving. - -8 -00:01:54,090 --> 00:01:58,140 -Unknown: Yeah, just because the corporations are too lazy to try to set that up twice. - -9 -00:01:58,140 --> 00:02:14,250 -Wes Bos: Yeah, yeah, we just piggyback on all the hype that comes from from down there. But it is a fun time to get to hang out my family. My sister has a bunch of kids. She came down and just enjoyed some good meals. Fun, man. That's great. Yeah, yeah. How's it going with you? - -10 -00:02:14,250 --> 00:03:01,229 -Scott Tolinski: Oh, I just, I'm sick. Apple has had my computer for a whole week now to fix the keyboard. Seems a little outrageous to me. So I'm a little I'm, I can't say I'm necessarily struggling. But I have to get this next series done before the end of the month. And I haven't started recording even though it's all planned out. I just need my computer back. Because this one can can't even have like it can't even handle development, not let alone development and recording on it. It's it's an old laptop, and it is it's struggling. So maybe it's struggling and I'm struggling because of it. And the universe decided to get me sick on top of that. So you know, I've had that I've had better weeks, but uh, I'm positive man, I'm feeling the strength, I'm ready to, to just keep it going and turn things around here. So I'm excited. - -11 -00:03:02,789 --> 00:03:33,240 -Wes Bos: Awesome. Today, we have two awesome sponsors. First one is dev lifts, which is going to get you fit as a developer and the second one is Freshbooks. Which is going to get your business finances in, in shape. Is that a good? A good one they do they do cloud accounting. We'll talk a little bit more about both of those awesome companies partway through the episode. Let's kick it off and just talk about like, why is it important to pay attention to fitness as a developer? Maybe give it a shot? And then I'll follow up with my thoughts. - -12 -00:03:33,300 --> 00:04:43,230 -Scott Tolinski: Yeah, so I mean, really, we spend so many times like in offices and chairs in the people's sometimes do standing desks, maybe you're sitting and standing. But the web development is a career is by default, not the most healthy career, right? Some jobs, you're you're picking things up, you're moving around, you're active. In other jobs, you are potentially sitting in a cubicle all day, and maybe eating some snacks, having a couple pops here, or sodas or whatever you call them. And it's not always the the best career for staying in shape. So we think that the healthiest way to be essentially a developer or even like a productive person is to take care of yourself. because trust me, when you're not taking care of yourself and you're not feeling good, everything is going to suffer your your performance at work is going to suffer, your mental health is going to suffer and you're going to feel less positive overall about the work you're doing. So I really think it's important to be active to be to be healthy in that regard. Because you want to be the best you can at what you do. And I think that's just a large part of it that sometimes people overlook. - -13 -00:04:43,440 --> 00:05:51,930 -Wes Bos: Yeah, I agree. I think that all jobs have have their aspects of stress. But I definitely feel that being a developer there is a lot of stress going on. There's a lot of stress with learning what you have to wait you have to keep up what you have to build working with coworkers supporting iE 10 There's loads of these things coupled with, like, I know that a lot of people that listen to this podcast are actually in really good shape and are very healthy. But there is that there is a stereotype of developers who eat Cheetos and slam cokes. Because it is partly true. A lot of us computer nerds are not the most healthy people in the world. And I think that there is a huge benefit to being healthy being in shape, because of the things that being a shape will do for you, it's sort of a huge productivity hack, where you're gonna, your focus will improve, you're going to have a lot more energy, and you're going to be in an all around better mood, when you are in good shape. So we've sort of outline this, we're gonna give some updates as to where we're at both in terms of working out as well as nutrition. We'll talk about some supplements, and as well as our plans for the future. So anything else to add to that before we get rolling? Scott? - -14 -00:05:52,050 --> 00:06:20,610 -Scott Tolinski: No, no, I don't think so. I just want to echo everything, man, we basically said a lot of the same stuff, just that you will be a better version of yourself mentally, if you are putting your body through work physically, as well as mentally so yeah. So let's get into it. I know that you're working out update has taken a bit of a different path than maybe what you would have expected. Can you give us an update, and maybe talk a little bit about what you were doing before and where what you're doing now? - -15 -00:06:20,640 --> 00:06:56,400 -Wes Bos: Yeah. So last time we recorded this, I was working out about three or four times a week, I was feeling really good. I had lost a bunch of weight, I had gotten a lot stronger. And I was pretty happy with where I was at. And I'm actually still pretty happy with with where I'm at right now. But it hasn't taken the the best approach forward or hasn't taken the it hasn't gone as well as I had hoped to go I've had a couple little setbacks. So I'll talk about what those are and sort of where I'm at right now. So the first one is I had a little bit of pain in my shoulder, which I thought I tore my rotator cuff and I was googling like from - -16 -00:06:56,520 --> 00:07:01,650 -Scott Tolinski: rotator cuff did it happen from benching because that's like a really common injury, that shoulder impingement. - -17 -00:07:01,710 --> 00:07:18,090 -Wes Bos: Yeah, I'm not sure what it happened from. But what had happened is I had pain in my shoulder when I lifted my my arm above my head, which is benching. And then I also had like a click in my shoulder when I did it did exactly what it was - -18 -00:07:18,090 --> 00:07:29,310 -Scott Tolinski: I had the same injury. Yeah, it's very common and often kind can come from maybe like overloading the bench, or just like maybe not being warmed up. Or that's not to say that that is how it happened. But it's very common. Yeah, - -19 -00:07:29,310 --> 00:12:43,830 -Wes Bos: yeah, yeah. So I immediately stopped because I've always heard these, I've watched enough documentaries in my day and talk to enough people who have like blown out their shoulder and then they can't do it for the rest of their life. And never mind lifting weights just like helping your buddies move or during your kids in the pool or things like that. I was like, I don't want this to get into something bigger. So I stopped immediately stopped lifting immediately and headed off to physio to figure it out. And he first of all, he's like this, you did not tear your rotator cuff. This is like the most common thing that happens all the time. So the physiotherapists gave me a bunch of stretches, I went, I think I went weekly for about two months or so. And he gave me a bunch of exercises, he did some acupuncture on it, which is really cool. He did an ultrasound on it and I think the both stopping for a little while as well as the the physiotherapy totally healed it and I feel really great right now and I am back to the gym since that so I was really happy about that, that was probably about three months where I just stopped going to the gym entirely because it was really hurting and it was it sucked because I wanted to lift my kids and I didn't want to have to do that. So that was set back number one. And then the other one is just like life has just been kicking me in the butt lately in terms of energy just because my kids have not been sleeping at all and I totally was not prepared in life for how tiring being a parent would be and I know like so many people listening to this have gone through this and I know there's probably people with teenagers right now just shaking their head being like yeah, you're learning but brother but my kids are I've got two kids one's three years old and one just turned turned two years old and the three year old actually sleeps pretty well but the two year old in the last six months or so has been going through all the you get the sleep regressions when you have kids where everything's going fine and then all sudden they wake up in the middle of the night and they have you up for a couple hours and just like even if they're only out for two hours just having that like split in between your sleep really makes the mornings really really tough. And then sometimes my wife is off and then I start work late because I let her sleep in which is the best benefit ever of working for yourself. But just that whole not sleeping as well as they're going to bed really late. It's hard to get them down to sleep. It's just been we used to go to the gym in the evenings and now we don't have time for that. It looks like things are getting better and I'm really looking forward to it. The plan with my wife is to be able to like right now we both take a kid and put it put each one to bed but the age Yeah, is that we take turns and putting them to bed right now, it's just not possible with how much attention that they need. But the end game is that we'll split our evenings and then we'll get back those those evenings. The way that it worked is I used to go twice a week at night, and once a week during the day, I would take time out of my work schedule to go. But given that the evenings have been gone, and then often starting late, I found it really hard to break away in terms of trying to get my work done, but also pay attention to that. So those have been my two big setbacks, which is been frustrating, but I've learned to sort of be okay with it just because like life is full of setbacks, and I initially was not okay with it. Because I haven't had a whole lot of like, huge setbacks. In my life, I've always had very good momentum in most things that I pick up, whether it's my career, or whether it's things like that I've always had really good momentum and be able to keep it up once I pick something up. But this was definitely a bit of a setback to me, which was frustrating at first, but I know that like, obviously, my family comes first. And it that's not to say that I had unraveled all of the work that I had done, because I was very cognizant of being like, Okay, this is I'm not going to be able to get to the gym as often as I want. And I'm going to be much tired, which often leads to poor eating habits, but I don't want to lose all of the hard work I have done. So I'm still really proud that I still feel very strong. Like before I started working out, I would often have like a sore back when I woke up just carrying the kids around and stuff like that. But ever since I started working out I have no I haven't had a sore back or anything like that, which is great because I don't want to have to have that from from carrying my kids up and down the stairs or, or wrestling with them on the floor or something like that. And then I also still have a good stamina. So in place of working out at the gym, I've I've replaced that with just a bunch of cardio in the summer, I really like to do cardio because it's beautiful outside, I live right near the water, I can jog down the water, we often go to Kota cottages, and I do a lot of swimming there. So I've sort of replaced that with trying to do as much cardio as I want. Last thing where I'm at right now I'm back to lifting weights. I am hoping Fingers crossed, my kids are starting to sleep better. Nice. Yeah, it's been last night wasn't a good night. But it's down to about twice a week now that we have to get up in the middle of the night. So I think we've talked to a whole bunch of other parents about similar instances they have and they said don't worry, it'll it'll end in a couple months. So I'm back to it. Lifting weights, I'm doing a lot of hit I've been really enjoying the just how I feel after doing it is high intensity interval training, where you just give or whether you're on the cardio or whether you're on a bike and you just go go go as hard as you possibly can take a 62nd break and then go go go as hard as you can. I really like that just of how it makes me feel I've really good energy after I do that. - -20 -00:12:43,890 --> 00:12:46,440 -Scott Tolinski: It's really an interview is really effective. - -21 -00:12:46,470 --> 00:12:47,850 -Wes Bos: Yeah, yeah. Big fan of that. - -22 -00:12:47,880 --> 00:13:33,870 -Scott Tolinski: Yeah, I'm a big fan. I mean, we used to do the insanity videos from Beachbody where they would, it was like always, that's like one of the things that really brought in like hit was one of the first times that was like really super popular. So we used to do those and just get our butt kicked. But even Courtney still does like a couple of hit videos a week on fitness blender, I think and and that stuff. Every time I joined in with her, it's always kicks my butt. The coolest thing about those those hit stuff is you can do the workout. And you can do it on sort of lightly and they can kick your butt. And then if you're feeling like particularly like strong that day, you can do the exact same workout, but just with more intensity. And so it's like they scale really well, if we're like talking like, if this was a database, this database would scale so well. It's as hard as you want to do you know? - -23 -00:13:34,049 --> 00:14:02,220 -Wes Bos: Yeah, that's awesome. Yeah, I'm pretty interested. And there's this thing that opened up near me called function 45, where it's like, it's just like this 45 minute crazy hit workout kind of interested in trying it out. It seems to be pretty expensive, though, like 200 bucks a month where I'm pretty sure I could just do that by myself or talk to the guys at deadlifts and and they could put together a sort of something like that. Or you can do that in your house or do that just at the gym that you only pay a 20 3040 bucks a month for? - -24 -00:14:02,399 --> 00:14:07,169 -Scott Tolinski: Yeah, cool. Well, I mean, that sounds positive and positive, despite the setbacks. - -25 -00:14:07,200 --> 00:14:34,529 -Wes Bos: Yeah, it's true. Like that kind of stuff happens. But I think what's important is just kind of keeping at it and not letting it unravel too hard. Because it's easy to feel sorry for yourself. And it's easy to feel like just pooped and exhausted at the end of the day. And then you just want to eat garbage and, and not go to the gym. But always remember that like yeah, if you just keep at it, it just kind of keep your head above water for now, so that when you do get back into it, you're not going to feel like you had wasted all that time before. - -26 -00:14:34,549 --> 00:15:55,500 -Scott Tolinski: Yeah, it makes such a big impact. So yeah, for me, my update is, is I'm probably in maybe not right now. No, but for the past like month or so I probably in some of the best shape I've ever been in in terms of working out because I've maintained three times a day at the gym schedule for a couple months, three or four months I had it going without missing a date despite like a ton of really awful setbacks. So So if you've been listening to the show For a little while you you would have heard in some of my crazy stories about weird infection that I got into that like, like, Yeah, well after that, what I haven't really necessarily talked about on the show is that I got strep throat four times in two months. But who knows why it just wouldn't go away. And I was just basically on antibiotics for maybe like two and a half months, I was pretty much on antibiotics. And that sort of came to a head when they were sort of like, well, we're gonna have to take your tonsils out. And I was great. Okay, that that sounds terrible. But what they did, instead of taking my tonsils out, they're like, well, we can do one last hit where we basically give you prednisone, and we give you three weeks straight of antibiotics and just see if we can just like hammer it into the ground, right? Just knock this thing out. And ever since then, I have not gotten strep throat. Now that's been maybe like two months since that happened. And I I still wake up every morning, like, do I have strep throat? Like - -27 -00:15:55,529 --> 00:15:56,490 -Unknown: I don't, man, it's - -28 -00:15:56,490 --> 00:17:14,810 -Scott Tolinski: so I'm so paranoid about it. But on top of all of that, I have found time to go to the gym somehow. And because of that my lifts have improved all of my stuffs improved sort of constantly, I'm changing my workouts, I do three lifting three times a week. So I'll do like chest and triceps on Monday. And then I'll do shoulders and biceps on Wednesday. And then I'll do back and legs on Friday, I sort of just made up this routine. It's not like a really solid routine or something. But it's all compound lifts, I'm doing overhead presses and squats and rows and bench press, all the big stuff. And I'm not keeping it crazy heavy on weights, I'm not like hitting my maximum weights, I'm more or less focused on form and making sure I hit the weight, okay. And if it felt bad this week, then I'll do the same way next week or until it starts to feel good on my one lift that's been going really well as my overhead press. I'm up to like 150 pounds on the overhead press, which is pretty good. For me, it's pretty much the highest. I've been on that. And I'll do three sets of five for 150. So overhead press is definitely like where it's at for me. But I spend a lot of time in handstands and stuff. So that's probably to be expected. I've also been switching things up a little bit and some of the body weight regards to my workout, I have what's called Swedish style bars, which look like a giant sort of ladder. And I'll do these hanging leg raises. If you want to see me do these I have video on Instagram where Oh, I - -29 -00:17:14,810 --> 00:17:16,170 -Wes Bos: saw that that's insane. - -30 -00:17:16,199 --> 00:20:18,390 -Scott Tolinski: Yeah, well, it's taken a while because even just doing the normal leg lifts, it sucks at the beginning. And like eventually gets easy, and then easy. So you just tried to make it harder. And that's the cool thing about the Starburst is you can consistently make these leg lifts harder. So now the way I do it is only my shoulders are resting against the back bars. And I'll do these leg lifts. And so you end up getting even just, it's so core intensive. But I'll do toes to the bar now instead of just lifting them or I'll do these like circles. Or I'll do this sort of like sort of suspending myself sort of stuff. And it's just it's gives it another level because it's now just not an exercise where I'm trying to hammer my core. It's like, Oh, I wonder if I can do this. It's like a challenge to me, can I get this can I do left five circles without you know, screaming or something, you know, so the light glows there have been really good. I've been doing a lot of pull ups, a lot of dips, I have some gymnastic rings. So I do dips on the gymnastic rings ends up being pretty, pretty tough, but overall just hitting the gym a lot. And my cardio has taken a little bit of hit I have been able to go breaking on top of all of my strep throat I let's see, in December, I hit my tailbone really hard. And then I hit it again snowboarding. And then it was sort of Okay, my tailbone was just sort of aching here and there. And then I flew to Iceland. And on that plane trip by the end of the flight was like eight, nine hours or whatever. By the end of the flight. I was just screaming in pain because of my tailbone. And so essentially, I have a stress fracture in my tailbone, which makes the sitting on anything awful. So I haven't been able to do a lot of things like deadlifts or whatever, where it's going to be irritating that tailbone area. And just like you have been seeing a physical therapist for it. So I've been seeing a physical therapist just because I've now had this tailbone injury for almost a year. And they just like weren't sure what to do it and I actually just went got a CAT scan and an MRI in the past two weeks, and everything sort of looks good. So they're sort of they were concerned that it wasn't healing because maybe something was pushing on it that shouldn't be pushing out of there something and now it's just Well, it's just not healing. So I guess you just have to deal with it. So just I'm dying over here with my my tailbone injury, which is just so stupid, and snowboarding seasons coming up and I'm just I already have my Season Pass. And the last thing I want to be doing is like having a season pass and not being able to go out to the mountains. So I just got to get this thing healed between the sickness and the injuries. I am able to continue to go to the gym and stuff like that. But it's not nearly as awesome as it's as it's been in the past that said, Our son Landon, he sleeps really well. So I don't want to brag about it and it but it's like I understand because sleep is maybe the one thing more than an injury or sickness that can just put you on your butt for the rest of the day mentally, physically or whatever. And me personally Since I've had a concussion, if I don't get my sleep, I'm just totally worthless, I end up having all sorts of brain fogginess and such a bad thing. So I really need sleep. And I'm just endlessly thankful. Hopefully he doesn't have any sort of regression anytime soon here. But so far, he's been good man. He's been he's been pretty solid. - -31 -00:20:18,479 --> 00:20:51,300 -Wes Bos: That's good. That's it's funny. Like if me and my wife get like three nights of not being woken up where she's jogging in the morning, and we're feeling great. And we're like doing projects around the house. And like, you know how, like, when you're down and out, you feel like everything is just like, piling on you. And then and then as soon as you get a couple good days in, it's funny to start thinking about side projects again, and going for a jog and cooking these really nice meals. It's Yeah, it's crazy how how sleep can affect just like, absolutely everything in your life. Yeah, absolutely. You - -32 -00:20:51,300 --> 00:20:54,540 -Scott Tolinski: might even start thinking about getting a deathless subscription. - -33 -00:20:54,989 --> 00:20:58,100 -Wes Bos: Or so there you go. Nice intro. - -34 -00:20:58,140 --> 00:21:06,300 -Scott Tolinski: Yeah. Yeah, so sponsoring today's episode is the sponsor Actually, we had last time we did a fitness episode, one of our first sponsors, deadlift, - -35 -00:21:06,350 --> 00:24:45,690 -Wes Bos: deadlift is responsible for getting me into shape and getting me excited about being working out as well as nutrition in the first place. So what develops is it's JC and dad, both of them are super into fitness. And JC is also a developer as well. And they've put together a whole bunch of these plans that are tailored towards different lifestyles of developers that want to get fit. I went through it myself, I went through the devilish premium, I'll talk about the plans in just a second. But it was awesome. Because what they did for me is that they sort of talked to me the ask you what your goals are, if you want to lose fat, if you want to get stronger, if you want to do it at home, or if you want to do it at a gym, sort of like what does your life look like? And what are your goals, and then they just give you like the recipe to make that happen, which is exactly what I need. And I think exactly what a lot of developers need, where they say, go three times a week, here's on Monday, you do this on Wednesday, you do this on Thursday, you do this, here's how many times you lift, these are the different exercises you need to do, here's what we recommend for your nutrition. And it was exactly what I needed, because like I don't necessarily need like a personal trainer at the gym, because I can figure this stuff out. But I just need someone to spell out exactly what I should be doing. And then you just sort of work your plan, you just sort of follow exactly whatever it is that you need to do. And that's exactly what what deadlift is going to do. So deadlifts has two options. Now they've got the fit dot start plan, which is 19 bucks a month is tailored towards a goal, whether you want to get lean, or you want to lose some body weight, or sorry, not if you want to lose if you want to lose some, if you want to train with body weight, or if you want to get strong you're doing doing compound lifts, all of those plans are 100%, beginner friendly, they'll give you a nutrition guide, as well as a workout guide for this. One cool thing that they do is that if you are a contributor to their open source projects, they're also doing Oktoberfest right now you get it for free. So if you contribute anything on the dev list, GitHub, you get access to this for free. It's also free for students, which is super cool of them, because they see like the the benefit, I first got into working out when I was in school. And I'm really thankful that I did that if you use the code syntax, you're going to get 50% off your subscription forever. So that's the fit start, then they have the premium. This is the one that I went through, it's 199 a month. But if you use the coupon code, tasty, you're going to get 50% off your subscription. It's only 10 spots for that. So if you're interested in grabbing that one, go ahead and run it. So Delos premium is for people who want a maximum personalization, maximum accountability. You can you can book calls with JC and dad and have check ins you get a private slack. So I often had questions about specific exercises that I've been doing, or like maybe one of the machines wasn't available at my gym, and I took a picture of the one that I thought I could swap out Oh, that's a good substitute. That's not a good substitute, because you're essentially working the same muscle twice now. So I want you to do this. And just like little things like that, where I would have never have known that and I would have not been working one of the muscles and twice as much working the other muscles. So pretty cool. If you are looking to to get in shape, I recommend you check out deadlifts@deadlift.io if you're not sure which plan, maybe just just talk to them and say, Hey, this is what I'm looking to do. And they'll recommend something as exactly for you. I went through it myself, I lost a lot some weight, I got much stronger. I think most importantly, just like the focus overall focus in the overall energy that you get from even just like a month or two of working out and being on solid nutrition, I think is extremely helpful to your career as a web developer. So check it out, Dev list.io. - -36 -00:24:45,750 --> 00:24:54,600 -Scott Tolinski: Yeah. So speaking of tasty, let's get into some of our nutrition. Here. A little bit transition back here we transition back - -37 -00:24:54,780 --> 00:24:56,940 -Wes Bos: to starting to transition in and out. - -38 -00:24:56,940 --> 00:25:03,690 -Scott Tolinski: I don't know that's the first time and I'm considering it. Step up the game gotta gotta keep evolving. You never stop evolving. - -39 -00:25:03,930 --> 00:25:30,000 -Wes Bos: Awesome. So here's my nutrition update. I really like the nutrition part of fitness because I love cooking. And I also think that it's a, it's a very easy thing to do with nutrition because it's not about doing stuff, it's just about not doing bad stuff is not about it's about not eating a garbage food. And I think that it's pretty underrated in in having energy and losing weight, it's the nutrition, I think, is what we say at least half of it. - -40 -00:25:30,150 --> 00:25:46,650 -Scott Tolinski: Yeah, it's just a big portion of it, because it is going to change the game. And if you if you get one of those two aspects, the the movement or the nutrition part, you're going to see improvements. And if you could double of them, you get you get double improvements that much faster. So it is it's a big, it's a big part of it. - -41 -00:25:46,920 --> 00:28:15,240 -Wes Bos: So my nutrition update was so I was doing keto, which keto is a sort of a high fat, low carb thing. It's becoming a really, really popular I think, because of the the Joe Rogan podcast, he brings on a lot of people who who are big for that the idea behind keto was that you eat things like fatty foods like bacon, and sausage and steaks and chicken thighs, and most of your macronutrients are coming from that and you eat very, very low carb, so you don't eat a lot of bread, a lot of pasta, and even things like like peppers will have a lot of sugars, which are then carbs in them. So I really, really enjoyed that just because of the way that I like to eat, I really liked how it made me feel I have switched since to just doing low carb, it's actually Devlin initially said just go on low carb or what's called modified keto in with that I think it's like 80 carbs a day, which is tons like and I went full on for four or five months, something like that. And I felt great, it really really worked well for me. And I've switched transition just into low carb just because of the way that it makes me feel. Some of the benefits that you get from keto or low carb is that you get a The idea is that your body will run off of its its fat storage rather than having to work off of carbs. And some of the benefits is that you get much more consistent energy burn, I definitely felt that I had like I had no energy spikes is just kind of a smooth burn throughout the entire day, as well as I found that I had really good focus while I was at work. So because of those things, those things are pretty important to me, I've sort of stayed on that. I definitely did enjoy the summer, though, I think that's kind of one of the things that I really enjoy is that when summer comes around in Canada, you crack the beers, you have burgers and all that stuff. So definitely didn't let that affect any of like barbecues with friends. But when it's just time to eat at your house, I definitely make sure that it is sticking low carb just because when I do and I am so happy that I actually did this keto, like full time for four or five months because it really gave me enough time to realize when you do switch back to eating a lot of sugar eating a lot of carbs, or you have a bunch of pizza or something like that. It definitely does make you feel like garbage. And it's crazy how how different you feel. When you you go from one thing where it's not eating very many carbs at all to eating a whole bunch and you just feel sluggish and you're grumpy and you just don't have an overall good outlook on things. Yeah, - -42 -00:28:15,480 --> 00:28:53,910 -Scott Tolinski: it can really have an overall effect of sense sometimes, like if you're having a bad day, and you're gonna go get like a crappy meals make you yourself feel a little bit better. Whatever it Let's go. Yes, never like it temporarily helps while you're eating, but it almost makes things worse in the long run. And I'm so guilty of that, like after, like, Major, you know, things in life, I would be like, Alright, I need to go get a Big Mac or something because I'm feeling really down about Dell life right now. So I'm gonna go get a Big Mac. Like, yeah, it would almost always make me feel worse, almost always. So like, I don't know, just being able to be present with that state of mind. Just like how you feel about this stuff is is always important. Really. - -43 -00:28:53,910 --> 00:29:14,340 -Wes Bos: Yeah, I think that that's an important point is like you shouldn't reach for that stuff. When you're reaching for it as a comfort. It's totally fine to like you're out with your friends. Oh, yeah. After the bar. Go get some McDonald's like you enjoy life. It's not good for you, by far, but you also want to enjoy life while you're at it. So that's important one. - -44 -00:29:14,520 --> 00:29:17,820 -Scott Tolinski: Yeah, yeah. Nobody's gonna follow you for a cheat day here. And they're - -45 -00:29:17,880 --> 00:32:21,270 -Wes Bos: totally thought it just goes through some of my like, what sort of stuff I've been eating breakfast every single day. I have eggs for breakfast. Nice. And then along with those eggs, I'll either have smoked salmon. I'm been really loving lately, and my kids have been absolutely loving eating smoked salmon for breakfast, which is like amazing. They stink a bit, but it's super good for you. So I've been super happy when they have that every now and then we'll do sausage bacon for breakfast as well. But usually it's eggs, I don't know three days a week and then eggs plus salmon sausage bacon, two or three other other days a week. That's pretty awesome. Yeah, that's been it's been a nice breakfast. Luckily, I absolutely love eating eggs so that that's been good for lunch. Usually we have like an awesome salad bar around the corner from us at one of the grocery stores. So usually at lunch, I'll need a break anyway. So we'll just walk the 10 minutes it takes to go get their makeup, a nice little salad. Sometimes I'll reach for the the shimmy that they have, they're nice or if it's a special day I'll reach for the full sushi I love eating sushi but the white rice isn't the best stuff in the world for you. So I'll try to just go for the the straight to see me What else do we have here. Other than that, it's pretty much just eating lots of meat, lots of wheat mostly chicken at our house with pork and pork and steak every maybe once or twice a week. And then along with that we do lots and lots of vegetables just got through an awesome summer of brussel sprouts Asparagus those things are have been in season tasting super good. A lot of chicken salads at our house as well. Really really enjoying those I'm a huge into barbecue. I know a lot of people already know that but I love barbecuing stuff smoking stuff in my backyard. So it's it's really fun to be able to do that. I've really enjoyed the whole cooking part of it because I'm huge into it. And I think that also going low carb has has introduced me to this whole other flavor profile that is sort of like how can you get things that taste amazing without them being terrible for you. So that's really opened up this whole like sour, crunchy fermented area for me. I've always been a huge fan of like kimchi, which is a kimchi is like a Korean fermented cabbage. It's spicy and crunchy and has a bit of a tang to it kombucha pickles been super into all of us lately. And then just like finding finding like alternatives for like barbecue sauce is a big one for me where EPO barbecue sauce on a lot of stuff but it Berkey sauce is full of sugar is not good for you. But you can make some pretty tasty stuff I've been big fan of. If you buy the no sugar added ketchup. I usually buy that and mix it with equal parts apple cider vinegar and mustard. And it makes the best like mustard barbecue sauce that you're seeing really really good for you. We call it Lily pop because it's named after my kids. My kids love it as well because they are loving the whole like apple cider vinegar shows asked my daughter always asked me Can I have some applesauce vinegar and she just has like a little shot of it's - -46 -00:32:23,040 --> 00:32:50,160 -Scott Tolinski: I like that stuff for some reason. I know I really like it does mean a lot of good personally, but for some reason. Yeah, the taste of it. I can't do it. And like if I need like sometimes I'll need like a neutralizer for my stomach or something and I'll go straight for the ACV and I'm just like Yeah, no, Oh, come on. And like corny doesn't think it's bad at all. But no, I'm just I had to really just I have to psych myself up for it for some reason. I don't know what it is that I'm talking about the the taste. - -47 -00:32:50,190 --> 00:33:11,160 -Wes Bos: Yeah, it's funny that I'm really thankful that I've been able to like years, maybe five or six years ago I went black coffee. I just drink my coffee black. Yeah, that's what I do. And I was really happy that I could acquire a taste for that. And And ever since going there every time I find something that is maybe a little bit like weird tasting like, I eat a lot of sardines as well who - -48 -00:33:11,280 --> 00:33:12,300 -Scott Tolinski: actually would like Dan. - -49 -00:33:12,390 --> 00:33:21,030 -Wes Bos: Yeah, sardines are awesome. You can find them in all kinds of different flavors. You've got to make sure that they're some of them are packed in like sunflower oil, or like canola oil I use - -50 -00:33:22,290 --> 00:33:24,860 -Scott Tolinski: in cooking, so I get that sardine flavor and a lot of stuff. - -51 -00:33:25,020 --> 00:33:29,940 -Wes Bos: Oh yeah, man fish sauce on brussel sprouts. Yeah, with a little sesame oil. - -52 -00:33:31,230 --> 00:33:32,010 -Scott Tolinski: Please. Yeah. - -53 -00:33:33,480 --> 00:34:02,430 -Wes Bos: What was I gonna say? Yeah, I think if you're listening to this, and you're like, oh, man, I would love to like eat a bit better. But I hate the taste of anything that is not pizza. Oh, definitely. Like slowly we're it might take like three or four years but slowly work yourself up into acquiring these tastes for things that are not necessarily full of full of calories are full of carbs. And I'm really happy that I've been in this whole fermented pickled sour, crunchy area. - -54 -00:34:02,460 --> 00:34:05,100 -Scott Tolinski: Yeah, there is so much there. Is that it for your year? - -55 -00:34:05,130 --> 00:34:34,440 -Wes Bos: Yeah, I think so. I've got a couple more points here. Avocados. I eat a lot of avocados. I really like to put it on anything. A lot of sour cream. Put that on anything, as long as you like are fine with like not having the same like if someone's having tacos. Just make a taco bowl. Or if you're having a burger at a restaurant, ask for it wrapped in like a lettuce wrap or put tons of veggies on top of it. It's just it's a little bit weird at first to figure out how do you order something that's a little bit more low carb but well worth it in my experience. - -56 -00:34:34,530 --> 00:36:37,380 -Scott Tolinski: Yeah, and you get acclimated to it for anyone who doesn't love it like you might not love it for a week or so. But like just with anything once you learn to love the the nuances or you learn to love the flavor, you're going to like realize that everything else is just overly either overly sweet or overly this or that. I mean, Courtney and I have been really dialing back on sugar a ton and we got some Halloween candy. We just like put it in a bowl for when the kids come and we're like oh girl Have a little bit of Halloween candy here. And we're both like this is too sweet like this, I can't even handle this this is this is. So it's funny how your palate just changes when you get used to stuff. So for my, my nutrition I was doing Last time we talked, I was doing intermittent fasting, I was exploring that a little bit. And I took a break from intermittent fasting for like six months or so just two, maybe even longer than that. But really just because maybe travel was hectic, or it's difficult to keep up with it. And in the past couple of months here, I just read out into intermittent fasting. And the rules are for me is that I'm not going to eat after dinner, and I'm not going to eat before 10 o'clock. And this intermittent fasting has shown just so many incredible benefits from life extension to you know, better train of thought you suppress your, your need and want for for your appetite. You know, like some people get like, they get like blood sugar spikes or spikes when they're not eating and it makes them really hungry, right like that's like a biological hungriness. Well, like training, intermittent fasting can remove all of that. And last time we did this episode, I mentioned that Courtney was saying, keep me away from intermittent fasting. I'm not doing that. Don't make me do that. I don't want to do it. And I was like, Okay, I'll do it. That's cool. And since then, she tried it for a couple of months. And you know what she said, it's not hard, and that it wasn't a big deal, and that she got over it in no time after thinking that she was going to crash and burn. So intermittent fasting for her. I was really impressed that she was just like, Yeah, well, this is way easier than I was expecting it to be. There's only like, I think there's like a week or two of where you're just like, well, I really like to have something to eat right now. Here. Yeah. Yeah. But yeah, there's - -57 -00:36:37,380 --> 00:36:53,130 -Wes Bos: that couple weeks that you need to get through. That was with keto as well. They call it the keto flu, where you're just like, I'm so grumpy and dizzy, and I don't feel good. But that's just your body trying to like put you back into that state that you were in. But if you can get past that sounds like the benefits are amazing. Yeah. - -58 -00:36:53,130 --> 00:37:37,320 -Scott Tolinski: And it was like it was even like some days, like a Saturday, I'd been up since like, 637 o'clock. I'd been up for a long time. And it was like rolling into 1112 o'clock. And I was like, Oh, I haven't eaten anything today. And I didn't even think about it. Keep in mind is not starving yourself. You're still eating full meals. When you eat meals. That's just restricting the window in which you're eating by restricting that window. It trains your body in all sorts of different ways. It's really, really cool. The science behind it is really interesting. And there's a ton of material look up if intermittent fasting if you want to learn more about that. Another thing I've been doing I've been having salads for lunch, I put a salad with some chicken in it. We buy rotisserie chicken from Costco, and then we buy big bags of lettuce and then we just make salads for the week. And - -59 -00:37:37,880 --> 00:37:38,550 -Unknown: I love it. - -60 -00:37:38,609 --> 00:38:58,500 -Scott Tolinski: I didn't think I would ever like salads. For lunch. I was definitely a lunch salad kind of person or maybe a Panda Express for lunch kind of person. I used to just send one of my coworkers, Panda emojis, or panda images, sometimes like a panda eating a GIF. And he would know that it was time to go to Panda Express. So I have transformed as someone who's been dying to go to Panda Express is someone who eat salads every day for lunch and I love it. I just absolutely I'm looking forward to my salad right now actually, which is it's hard to believe for me exactly. So we didn't eat like I mentioned a lot of low sugar. So we're looking for stuff that has no too low sugar, we got these great protein bars from Costco that are they've a decent amount of protein in them and they only have one gram of sugar and so I've been going nuts on those I'll usually have that as my first little thing of the day just to you know once I hit that 10 o'clock window to just have something so been going very low sugar very very low sugar note no sweets or whatever and then we've been really loving they opened up a new poke a place which is it's kind of a thin walking distance but we drive it's a I've been loving okay because we just go in there and we say hey give give me the tuna or whatever and then give me everything just give me all the toppings and it's you know seaweed and whatever and you know I've always been a big fan of sushi but - -61 -00:38:58,530 --> 00:39:04,110 -Wes Bos: you want to describe what polka is because I'm going to talk about pokey as well yeah all right. was - -62 -00:39:04,110 --> 00:39:13,500 -Scott Tolinski: okay is its origins I mean it's it sounds like a Japanese where it's a white lion Yeah, yeah, so it's it's sort of like a Roth fish salad is that - -63 -00:39:13,530 --> 00:39:16,740 -Wes Bos: yeah it's it's basically a bowl of sushi - -64 -00:39:16,740 --> 00:39:17,250 -Scott Tolinski: Yeah, - -65 -00:39:17,280 --> 00:39:31,500 -Wes Bos: so instead of having sushi all wrapped up, they usually have like a rice bed and then on top of that they'll put your your fish tuna or whatever it is that you want to eat and then and then all kinds of toppings like at a mommy and jalapenos and kimchi - -66 -00:39:31,500 --> 00:39:32,250 -Unknown: have and - -67 -00:39:32,280 --> 00:39:33,920 -Wes Bos: pumpkin seeds oh yeah and - -68 -00:39:33,920 --> 00:39:35,550 -Unknown: Monday we tons of seeds Yeah, - -69 -00:39:35,609 --> 00:39:42,300 -Wes Bos: so good. The place near me does it on cucumber noodles which is amazing because you don't even have to have it on rice. Yeah, we - -70 -00:39:42,300 --> 00:42:05,280 -Scott Tolinski: get these Korean glass noodles that are really good. I like I said we just go there and tell them to put every single topic they have on it and it's awesome. And you feel so good eating it because it's a salad it's all fresh and light. And I was just so it's like sort of occasionally like citrusy depending on the cabbage dressings you get on it. I was just so blown. Run away by how good it was. And now I want to go there all the time. So I'm a big fan of okay. I've also become a huge fan of fermented drinks. So I drink keefer. I have a glass of keeper every day, which is really it's basically like a yogurt drink that gets you a lot of good stomach bacteria and stuff like that some of the benefits of having maybe like an Icelandic yogurt or something, but it's really nice. You can get a bunch of different flavors, low sugar, low dairy, all that stuff. And I've been drinking a lot of kombucha lately. We have a really dope farmers market, like a block from our house that we walk to every every Sunday, although now it's getting, I think there's only a couple left, or maybe it's done by now. But we'll just take our little jug, we'll get it refilled. It's like a local, local place, local beach place. And so I've been drinking a lot of booja a lot of Kiefer. And recently, this is a new update. Because I've been having a lot of just man, I've had a lot of weird issues, just in general, like, health wise, right. So I decided because my mother has a gluten intolerance. She's been to the doctor about it. And I've even been tested for celiac before. Out of all the things if I keep a food journal, it's like if I'm eating gluten, or wheat, or gluten or wheat it like it really kind of messes my day up or the next day up, I should say. So we did all those things where you keep a food journal. And yeah, it turns out, I might have a gluten intolerance just like my mother. So for anyone who thinks that like the gluten thing, or the gluten free lifestyle is, I don't know, some people think it's BS. Let me tell you this. I do not want to be eating gluten free. Like, I can't imagine anybody who has to eat gluten free wants to do it. Because it's not fun, man, I can't have beer. I love beer. I can't have you know, any of my favorite breads or sandwich places. And I did gluten free for a whole year once when I was in college. And now I'm going to be doing it again. I've been on it for maybe like a three, three weeks right now. And it's been fine, right? It's been fine. But man, it sucks. And it sucks that it makes me feel that much better. That's the thing hate is that, - -71 -00:42:05,790 --> 00:42:08,100 -Unknown: that affects that at work. Yeah, it sucks that it works because - -72 -00:42:08,100 --> 00:42:23,460 -Scott Tolinski: I really was hoping that it wasn't that and we'll see how I'm gonna do a couple of weeks as an experiment here. I'm seeing a gastro doctor about it. And it's like, man, I just want I want to I want to eat normal stuff. But yeah, here I am gluten free. And that's the way it is. So yeah, - -73 -00:42:23,730 --> 00:43:17,130 -Wes Bos: it's funny. There's a ramen place around the corner from me and they have a gluten free version of ramen. And it's instead of just noodles, it's it's cabbage. They just like shred cabbage. And it's actually really, really good. And then they recently just renamed it from the gluten free option to the keto option, because you can tell it's like bouncing on the tide. The tide is changing, which I thought was hilarious that they did it but I got it and it was actually awesome. Because I love cabbage and I love ramen. But the thing I always hated about ramen and pho is that it's just like such a it's mostly noodles. Yeah, and that's that's not the greatest for you. I miss mine we also got an instant pot and we've been doing every now and then we do our own yogurt. My kids love yogurt and we don't buy the stuff with the sugar added we just buy them the plain stuff and put like what is it? - -74 -00:43:17,790 --> 00:43:22,290 -Scott Tolinski: Oh, just granola or like honey or something? Because we do that yeah, - -75 -00:43:22,320 --> 00:43:43,740 -Wes Bos: yeah, we book granola honey, cinnamon on top and they really like that. I really like that really thick Greek yogurt and I also use I use that to make a lot of sauces when I'm cooking because it's super good for you just have yogurt. Yeah, like lemon, a bunch of salt bunch of spices and you have like an amazing crack sauce that is good on flip flop as my buddy got - -76 -00:43:46,770 --> 00:44:18,300 -Scott Tolinski: funny we have a dropper on our house is that is that Courtney is paid for by the by the yogurt big yogurt flowers to say Where's big Where's big yogurt sending the check this week because she not only puts yogurt in everything, but she'd never like she never takes and like she never leaves an opportunity on the table to talk about how good yogurt is. Oh, and then she's she's given our son yogurt every morning and she's given teaching me the benefits of yogurt. I'm like, man, how much do they pay you right now? Big yogurt. She's in? She's in their pocket. That's for sure. - -77 -00:44:18,510 --> 00:44:20,220 -Wes Bos: Oh, that's hilarious. Yeah, - -78 -00:44:20,250 --> 00:44:27,510 -Scott Tolinski: well, let's talk about money and yogurt. And let's talk a little bit about our sponsor today fresh books. They're gonna make sure that you get your money in your pocket. - -79 -00:44:27,810 --> 00:45:22,830 -Wes Bos: Absolutely. freshbooks is cloud accounting software for anyone trying to run a small business you're just a freelancer running a small business you had a couple clients anytime that you need to invoice someone freshbooks is there anytime you need to manage all of your expenses, maybe import them from a credit card freshbooks is their intermediary to follow up on an unpaid, unpaid invoice. freshbooks is there so if you are any type of small business that needs to be sending out invoices and stead of chasing after clients and doing all keep it all inside of Freshbooks and it will make your life so much easier. You'll get paid Faster, and you'll be able to have more time to spend on your actual business rather than spending time working in the business, which is doing your books because let's face it, that's not moving your company any further ahead. So check out freshbooks.com for slash syntax and use syntax in the How did you hear about a section, you're going to get a 30 day unrestricted free trial. Thanks so much to Freshbooks for sponsoring. - -80 -00:45:22,950 --> 00:45:41,880 -Scott Tolinski: Thank you. Cool. Okay, so we've gone over our fitness stuff, we've gone over our nutrition stuff, and then we have a couple more this episode's running a little bit long. I think that's okay. We can talk about supplements and then we're going to talk about plans for the future and we can sort of go quickly and these things is not superduper deep topic. So what kind of supplements are you supplementing with right now? Yeah, - -81 -00:45:41,880 --> 00:46:03,510 -Wes Bos: right now I am on just the multivitamin, just making sure that you get everything especially as The Winter's coming. So in the summer, it's easy to forget about taking it but I hate getting sick, especially in the winter, whenever it's all sniffily and stuff like that. So definitely taking the multivitamin fish oil, so just like salmon oil or something like that. I don't know. I don't know specifically which one that is what - -82 -00:46:03,510 --> 00:46:05,550 -Scott Tolinski: was the fish's name that the oil came from - -83 -00:46:05,580 --> 00:47:15,360 -Wes Bos: the oily the oily the salmon dumped upstream? Oh, got all oily. The multivitamin that I'm still taking is called the Vita, Jim, J y m, which is a, I was talking to JC and he said, some of these vitamins don't really have much in them. They're just a little bit of everything. But he's like a good vitamin used to make your stomach hurts if you take it without really liking that when still, whenever I am in the gym, I take the bcaas is just a block chain amino acids. And that is supposed to, to assist in sort of like taking away the soreness and repairing the muscles. I really like it, I use one called amino energy. Because what it does is it has caffeine in it. And I'm drinking water all day long. I've got this huge Yeti thing. So I'll usually put a scoop or two in there and sip on it makes it taste great. And it gives you super good energy without having to it's got caffeine in it, but I drink rather than drinking coffee all day. I might as well throw it into my water. - -84 -00:47:15,390 --> 00:47:16,650 -Scott Tolinski: Nice. Cool. - -85 -00:47:16,800 --> 00:47:23,940 -Wes Bos: I think that's it every now and then I get coke done before a workout. I'm super tired. What's I forget the name of it. - -86 -00:47:24,450 --> 00:47:26,730 -Scott Tolinski: It's like a pre workout. Oh, yeah, - -87 -00:47:26,760 --> 00:47:57,780 -Wes Bos: mutant killer coke up. It's they usually have like an O like not all these things have not nitrous oxide in it. And it really just gets you pumping and makes your skin itchy. And then you go to the gym with the Bros. Yeah. So every now and then it's it's all of these supplements are so hilarious, because they all have these like, like brought out bro he names to them. And it seems really silly. But if you can get past that and sort of pull back the curtain and understand what is in these things. You can find some pretty good ones. - -88 -00:47:57,810 --> 00:47:58,740 -Unknown: Yeah, yeah, that's - -89 -00:47:58,740 --> 00:48:58,440 -Scott Tolinski: funny. I actually make my own pre workout. I just bought the things individually. Because a lot of people like have the Yeah, because I have enough caffeine from other stuff in the day to day like tea or whatever. I just didn't want to have an extra dose of caffeine but I wanted all the other stuff. So I basically I bought the citrulline malate I think de citrulline malate which is one that's in all of them. That's the nitric oxide stuff. I get the bait okay to alanine individually, which is the stuff that makes your your skin tingle a little bit that stuff is really clinically just shown to be improved muscle memory and muscle recovery. It's great. And then the creatine so I have three of the ingredients commonly found in a lot of pre workouts and I just scooped them myself. I have you know my little scoopers. I know how much of each to put in. And I'll take that as a pre workout just the same thing without caffeine not because I don't like caffeine, but because, you know, I already get supplemented caffeine in my my day to day. So the last time we had this episode, we actually talked a little bit about how I was taking caffeine via like a pill, which like - -90 -00:48:58,530 --> 00:49:02,670 -Wes Bos: sounds like a sleeping bag of it on like sketchy supplements. - -91 -00:49:03,390 --> 00:51:41,160 -Scott Tolinski: It was bulk supplements, it was on Amazon and it's like, eat Okay, 200 milligrams of caffeine. Now, granted, that's a good amount of caffeine. But that's like a couple cups of coffee. And if you were to have one of those pills a day, you know, it's pretty, it's pretty darn easy and cheap as far as like caffeine supplementation goes compared to like coffee and all that stuff. But I'm going to say I have stopped doing that I was reading a lot about like caffeine without coffee or without tea. And it's not well one caffeine isn't great for you anyways, but the fact that you're supplementing without those things, it's, it's just really not good. So I've gone to different lengths to get my caffeine I now just pretty much drink straight green tea, or I'll drink a brew or a cold brew. So I've been doing a lot of cold brew, I can't do normal coffee, my stomach can't handle the acidity. So that's why I go cold brew. So I've been doing my own cold brew or I'll go get one at the coffee shop or I'll make a ton of green tea to get my caffeine. So I am staying caffeinated. Not like I'm dropping caffeine but I've dropped that 200 milligrams spike of caffeine in the morning, I just don't think it's the best thing in the world for you. So I've dropped it, I had granted, I still have the caffeine here, I'm just not, I'm not going nuts on it, I don't find it myself, I need it. I've started also taking ashwagandha. And I don't take this daily. But ashwagandha is like really good for focus and anxiety, I have a lot of high level of just sort of general anxiety. You know, it's just like a, it's hard to sort of chill out sometimes. So the ashwagandha, I found, if you do a little bit of reading about ashwagandha, people have different experiences with it. And for me, it adds a perfect level of like rounding off that top sharpness of somebody anxiety, and some of that stuff and just helps me improve focus and mood a little bit. Now, other people, I think, respond differently to it, you'll see all sorts of like sort of response patterns all over the map work. But I really like this supplement. It's when I've been taking for a few months now. And I found just nothing but great improvement on it just really, really positive for me. I'm also taking a probiotic with dinner every night. And I actually started taking probiotics along with the Kieffer and stuff like that, because I was on antibiotics for three months, right. And so that wipes out your gut bacteria. So I've just been really working hard to make sure my bacteria has been at a good level. So I know there's a lot about probiotics, both good and bad, whether or not they're effective or not. But I've done my research. And I feel like the probiotic I'm taking is good for me. And it's doing positive things. And on top of that, I'm just taking a lot of water, just lots of water. I've always drink a lot of water. But yeah, just keeping hydrated is such a big thing. And it's really easy to just not do it. But it's also really easy to do it. So that's pretty much it for supplementation for now, for me, - -92 -00:51:41,370 --> 00:53:53,130 -Wes Bos: awesome. Let's finish her off with plans for the future. So like maybe we'll do another follow up episode in six, eight months, kind of see where we're at. And because this is like a like, we're not experts, the reason why we're doing this podcast is not because we've got it figured out, obviously, but the reason why we're doing this podcast is that we can share our life and how we're journeying through these things, because I think it does, it is such a huge part of you and part of your life. And I think if you're trying to really slam dunk being a web developer, you're going to have to figure this out at some point in your life. So we're just sharing what's going on. So plans for the future I'm looking to as it gets to get colder, I'm almost I probably got a couple more weeks of jogging outside, and then I'm back at the gym, it's kind of a nice little change of pace, where I went back to the gym last week for the first time and a couple months. Because I was just outside doing doing jogging, and I was like, Oh, it's nice to like, have a bit of a switch up in what you're doing. So I'm going back, hopefully three times a week to the gym routine. I'm looking at twice during the week, once at night, fingers crossed if kids start sleeping. The biggest thing for me is I just keep forgetting how amazing I feel. I always come back from the gym. And I tell my wife like Oh man, I feel amazing. Why don't I do this every day. And like I know, I know in my head that it always makes me feel good. But actually going is a very hard thing to force yourself to do when you get out of it for a week or two. You're like, oh, shoot, get back into this. And then as soon as you're you're in it for a couple weeks, it's very hard to break that continuing going low carb. It's been working really well for me. I feel great. I feel great. I love the food. been really happy with that. So that's that's my plans for the future. Oh, the last thing is, I want to get into deadlifting that's one thing I don't do. I know you do that as well. Yeah. Although I haven't been I've always been a little bit like, yeah. I've always been a little bit like afraid or like, like it's it's kind of a scary spot in the gym. Where Yeah, yeah, I need someone to like, I needed to just like grab someone at the gym and be like, Hey, can you show me how to do this for I don't want to hurt myself. And I just need I need someone to like Come with me at the gym, maybe do it a couple times, or just watch some videos online and get into it. So it's that's maybe my thing for the winter is I'm gonna get into deadlifting - -93 -00:53:53,160 --> 00:54:51,390 -Scott Tolinski: Yeah, do it. It's one of those things that well, it can be over quickly, because you're typically going pretty heavy with it. So it doesn't take very long and it's so it's like maybe the most like the biggest bang for your buck exercise as in like the amount of time you put into it and the amount you get out of it. Yeah, the most I've ever deadlifted was one set of five, or 300. I've never done like a one rep max. So the most weight I've ever done is 300 pounds, but I did it for five reps. So I just remember like, every time I got done deadlifting you just feel wiped out. But it feels it's like the fastest way to getting that like excellent wiped out feeling where you just like Yeah, I just put on some serious, huh. It's not that hard. Once you get like the mechanics of it and you understand like the little form things. And after that, it's like once you understand how not to hurt yourself with it, the little tweaks in your form are just going to make it so you can lift more weight with like less effort, essentially. So it's a sweet exercise. I wish I was doing it right now. I might have to get back into it soon. We'll see how I started healing up here. - -94 -00:54:51,810 --> 00:54:53,190 -Wes Bos: What about your plans for the future? - -95 -00:54:53,220 --> 00:56:57,630 -Scott Tolinski: Yeah, I'm gonna continue my three days a week lifting. I'm just gonna keep on with the numbers. I like the progress and seeing like everything that I'm sorting Seeing out of it. I'd like to get more cardio and breakdancing in for those of you don't know, I've been breaking for like 15 years now or something. And the tailbone stuff, the injuries, the sickness, it's all been like very difficult to go to practice. And so I'm just really dying to get back there I went on Tuesday last week, I felt really slow and old. But you know that once you continue to keep it up, it's gonna be easier and easier. So I need to make sure that I stick weekly to breaking weekly to cardio just to keep it up. And then I want to I want to start doing more yoga when I had my concussion in 2012. One of the things that like the only things I could do to workout was yoga. And I joined like a yoga group and I went twice a week. And I felt great. And like now that I'm having all these weird injuries in the tailbone stuff, I think yoga might be a great way to start healing and a nun way where I'm going to I'm not going to be putting pressure on the way that's going to be damaging it. And I think it will stretch things out in that area and stuff like that. So I think I might join a yoga yoga gym or yoga group over here, maybe something I can walk to and, and maybe do a couple times a week, we're gonna see I'm sort of spying him out right now. I like to do yoga where you do a lot of handstands. So it for me, it's like finding the right class. You know, I always I had a class in Michigan, that was like really good, because the teacher knew what I was capable of doing. So she would be like, Alright, everyone do this. And then Scott, you can go into a headstand if you'd like, like, okay, now, I can't do this, if you'd like an O. And Scott, I have this, this move for you. If you want to try this at home, like, I want to find something that will challenge me like that, rather than just doing the same old stuff. Because I've been doing yoga for a long time. And you know, the the sort of general moves are great, and they make you feel good, but I like to be challenged a little bit. So the whole, the whole plan for me is to get healed to stop getting hurt, which is, you know, a tall order for me. I get hurt all the time. So just take it easy, and try to heal up here and keep on schedule. Keep making those gains. - -96 -00:56:57,810 --> 00:57:03,240 -Wes Bos: Oh, man, there's one thing I just thought of is around the corner from me. There's a float tank place. - -97 -00:57:03,300 --> 00:57:09,450 -Scott Tolinski: Oh, yeah, I tried that. But I want to try that. And the freezing stuff for you. Yeah, no cryogenic freezing chamber. - -98 -00:57:09,480 --> 00:57:41,520 -Wes Bos: So the float tank is just like little pod that's full of like 6000 bags of salt, and a little bit of water. And it's all diluted and you just lay in it and because it's so salty, you float. And then it's like a sensory deprivation thing, because you can't hear anything. You can't see anything. You're just alone with your thoughts. And seemed pretty cool. Yeah, I definitely want to try it out. It's like so close to me, though. I just need to find like an hour that I can can go try it out. If you've tried it out yourself tweet at syntax FM. I'd love to hear your experiences. Yeah, - -99 -00:57:41,550 --> 00:57:47,190 -Scott Tolinski: absolutely. Cool. Do you have any sick picks other than the exception of vegetables? - -100 -00:57:48,540 --> 00:59:49,440 -Wes Bos: My sick pick is Dr. Peter at tea. So there's a lot of like podcasters out there that talk about this sort of stuff, whether it's ketones in your body or aging or cholesterol or cardiovascular disease and intermittent fasting. And there's a lot of podcasts that talk about it. And most notably, the probably the two big ones are Tim Ferriss, and Joe Rogan. And Kevin Rose is the big guy. He also talks a lot about him, I really like him. And these are great, but these people are not doctors, they're just, they're just people. And sometimes if you talk about them, people start rolling their eyes and start chanting bro science because it's just a bunch of dudes talking about what's worked for them. Right. So this Peter T is actually the doctor for a lot of these guys. And he has his own Instagram, he has his own Twitter and he has his own podcast recently. It's called the drive by Dr. Peter atea. And it's really interesting, because he'll always answer questions on Twitter. He'll also always show what he's eating on Instagram. And then he just he dives deep into the whys in the house of it and he's actually a doctor so if you if you want to check out more information, rather than just people sharing their experiences where he actually has researchers and and this is his entire life's work. You can check out his podcast it's called the drive by Dr. Peter T. He's really cool. He's really down to earth sometimes like especially Tim Ferriss I find will come off as very I don't know he's a bit much you know, like and a lot of the things how he talks about it like he comes off a little much where this guy is he's really down to earth he talks about it. He has got kids himself, which I always find find helpful going he talks about like like I often find that Tim Ferriss is just in this like this like ideal world where he has control over absolutely everything. Whereas that's not the situation where most of us are in so they have a diary like a personal doctor that they can check with every other day about their levels. Yeah, - -101 -00:59:49,470 --> 00:59:51,330 -Scott Tolinski: yeah, I know. Exactly. Yeah. - -102 -00:59:51,450 --> 00:59:54,810 -Wes Bos: So big fan, check out Peter atea on everything cool. - -103 -00:59:54,840 --> 01:00:45,930 -Scott Tolinski: My sick pick is going to be fitness blender.com Fitness Blender comm so I said this is We're corny goes for all of her like cardio workouts or HIIT workouts. There's a lot of great stuff on here for free. There's workout programs, there's meal plans, there's videos, and it's insane amount of content for free is all I gotta say, the amount of stuff on here is perfect for sort of any level, any skill level, and they can sort of approach any area you want to approach. And you could probably get your entire workout done just via fitness Blender videos, seriously, there's more on here than you could possibly account. So if you're into the video thing, which you know, can be really motivating and really excellent, check out fitness blender.com we're not associated with them in any sort of way, but they just have great, great content. And like I said, my wife, Courtney absolutely loves this stuff. And every time I do one of these videos with her, it kicks my butt. - -104 -01:00:46,290 --> 01:00:49,500 -Wes Bos: Awesome. Mine is to check that out. Sounds like some some good resources there. Yeah, - -105 -01:00:49,500 --> 01:00:52,080 -Scott Tolinski: cool, man. Any shameless plugs, - -106 -01:00:52,260 --> 01:01:23,280 -Wes Bos: I'm just gonna shamelessly plug my advanced react course it might be up by the time you see this depending on I'm hoping to get it up. It'll be at Advanced react calm depending on when you're listening to this. It's not Everyone listen to it. On the launch day, it's going to be my latest course on all things, advanced react and graph QL. So we build a full stack application that is a online store, it has a cart that has actually checking out with real credit cards using stripe, really, really proud of this one, it's going to be at Advanced react.com. So check it out. If you're interested in that. - -107 -01:01:23,520 --> 01:02:24,120 -Scott Tolinski: Sick, I'm really excited for it. I'm going to shamelessly plug my level up pro accounts where you can go level up tutorials.com forward slash pro and get access to like 350 plus video tutorials premium video tutorials with a new video tutorial series being added every single month. The most recent series added at the time of recording this video, or this podcast is better JavaScript and se series that we focused on writing better JavaScript code. We talk a lot about functional programming concepts functions with single responsibilities. How do we even name things like in your code? What are good ways to name things right? And what are bad ways to name things. We talk a lot about different clean code philosophies. And we talk a lot about iOS six plus stuff to make your life a little bit easier. So we focus on writing less brittle, more testable, stronger JavaScript code and better JavaScript. Check that out today at level up tutorials.com forward slash pro sign up for the year and save 25% so that's pretty sick. So check it out level charles.com forward slash Pro, - -108 -01:02:24,480 --> 01:02:26,160 -Wes Bos: wicked. I think that's it for today. - -109 -01:02:26,190 --> 01:02:26,850 -Scott Tolinski: That's it for me. - -110 -01:02:26,850 --> 01:02:29,820 -Wes Bos: Thanks for tuning in. I'll see you next week whose face - -111 -01:02:31,650 --> 01:02:41,400 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax85.srt b/transcripts/Syntax85.srt deleted file mode 100644 index 0a9e787f8..000000000 --- a/transcripts/Syntax85.srt +++ /dev/null @@ -1,176 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,450 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Tolinksi ski. - -2 -00:00:25,950 --> 00:01:26,730 -Scott Tolinski: Oh, welcome to syntax. It's that time again for a another Monday heastie treat the syntax episode where we like to take things, maybe a little bit smaller chunks and talk about them for anywhere from you know, 22 to maybe like 26.5 minutes or something like that. But we take these small topics, and we break them down. And in this episode, we're going to be continuing the we did in the part one of last week, which was talking all about old browsers polyfills and fallbacks. And that said, we're going to continue that talk. And we're going to be talking a little bit more about CSS features, because CSS has evolved in all sorts of ways that we all know have made our lives so much easier. But not all of these ways have great fallbacks not all of them have just have a one liner that you can just drop in and have your code working. So we're going to be talking about various CSS Grid Flexbox. Other new features fallbacks old browser support and what you need to know about that. So my name is Scott Tolinksi. I'm a full stack developer from Denver, Colorado. And with me, as always, is Wes Bos. - -3 -00:01:27,090 --> 00:02:53,010 -Wes Bos: Hello, everybody. Today, we are sponsored by view school and view school is a awesome, they sponsored a couple times before but and that's when they had the Vue JS masterclass. They since transitioned into doing sort of a subscription where they have tons and tons of content all related to view, which I think is pretty cool. So you can get access to the entire catalogue, which has over 160 lessons, for only 12 bucks a month, new lessons are published every week, you can learn real world practices, proper form validation, advanced component pattern designs, all that kind of good stuff is from industry expert and core team members. So you can trust that the content is going to be good, if you are a syntax listener get the first month for only five bucks. And they also just mentioned to me that they are offering parody purchasing power discount boom, which is something that I rolled out a couple years ago and seems like almost every every course creator now is now doing that. And then what that is, is if you come from a country that doesn't have the purchasing power of something like Canada, or the US or UK or Europe or even parts of Europe, the the wages just aren't as high as they are over here in North America. So if that's the case, they offer a bit of a discount, depending on which country you are coming from. That's that's pretty cool of them. Check it out at view school.io forward slash syntax, and thanks so much to them for sponsoring sick. - -4 -00:02:53,040 --> 00:04:30,260 -Scott Tolinski: So let's get into it with talking about our browsers. What do we do with all these hot new features? And all these old crappy browsers? What What do we do about this? So I think the first thing that I want to talk about was a little bit about CSS Grid and Flexbox. So like with any of this stuff, the first thing I do is I open up a can I use? And so if you haven't ever done this, I highly recommend if you're at a computer, just pop open, can I use calm? And we mentioned this in the last episode, but it again, it's it's important to reiterate and we just Google in Can I use CSS Grid, okay. And if you look that up, it pops out to grid layout. Now, here is a table of everything that supports CSS Grid. Now, some of these are more important than others. And some of them have partial support and full support. And all that stuff. For instance, like a situation where support isn't even important is mobile browsers because well, chances are, you're not doing a whole lot of grid stuff. And maybe like the fallback is just that it falls into a single column in these mobile browsers. But for the most part, we see our support for CSS Grid, we got a green and edge as of 17, a green and Firefox as a 52. And 53. I'm sorry, edge headed at 16. Chrome has had it since version 57, which is a long time ago, Safari is headed since version 10.1. OPERS, had it since version 45. And so on and so forth with the big, you know, issue being Internet Explorer, as I feel like that sentence could have been said, anytime in web development history, except for after Yeah, Internet Explorer first came out. - -5 -00:04:30,360 --> 00:06:41,880 -Wes Bos: Yeah, I think it's kind of interesting. I get emails about this stuff all the time. And people are asking, like, Is there a polyfill for grid and or is there a something for for Flexbox? And the answer at the end of the day is not really because grid grid does so much crit is massive. There's so much that goes into grid. And same thing with Flexbox. There is nothing like a JavaScript library that you can just include on your page that will just recreate the ability to do that just because this is very low level and how the browser Actually renders these things out. That said, there are some little things you can do where if you have a very simple grid layout, you can try to recreate that in Flexbox, or recreate as close as you possibly can. In Flexbox. That certainly is an option. I think some of the the popular options for when you can't use Flexbox, or grid. So first of all, if you are supporting grid in an older browser, if that is IE, you can just use the old grid spec. So Microsoft was actually on the forefront of trying to push grid forward and get it into the browser. And there was a sort of an initial spec for grid that was totally abandoned. And it was under browser prefixes, which is what the point of browser prefixes are, because we're just testing it out and putting it into the browser to see if it will work. But it never worked out. But if you want to use grid and some of these older browsers, it's not the exact same grid. But if you use autoprefixer, it will try to convert as much as the possible new syntax to the old dash ms syntax. And that will give you pretty good support in in IE 10 in IE 11. But if you don't want that, or for some reason, are still supporting a browser that is older than iE 10. What are some of your options for supporting grid and supporting Flexbox? Some people say just serve the mobile layout to them. So like Scott said, just put a whole stack on there. You can just display block on all your content. I don't know if that's really a good good layout. Yeah. Especially like, it sounds good, because they're like, screw you for using our website. Yeah. But like, we have a business to run and you don't want to give a middle finger to everyone, especially if they're trying to China actually use the website and get information from it. Right? Yeah, I - -6 -00:06:41,970 --> 00:07:02,010 -Scott Tolinski: did. I think users are the enemy is like, it's an idea that I think can sometime perpetuate, right? It's like, dumb Internet Explorer users using their old Internet Explorer browsers are so dumb, but like, if they're using your thing, man, like, I don't know, for me, it's their users, not the enemy. So don't punish them for for no reason. - -7 -00:07:02,190 --> 00:08:41,580 -Wes Bos: Yeah. Another one is you can just code a separate layout that you'll eventually delete. So using CSS at supports, you can check if CSS Grid is supported, or you can if add supports isn't supported, which is kind of its own thing, you can use some JavaScript that detects which browser it is, you can have a separate layout that if it sometimes it's just like, maybe an extra 20 minutes to to get a layout working. It doesn't have to be perfect, but it can look close enough. And that's a separate layout that you code, maybe a code it up and floats, it looks pretty similar. And you can eventually delete that once you actually go ahead and drop it. At the end of the day. I always tell people, if you don't want to create an entirely separate layout, then just don't use these things until you are able to actually go ahead and support it. Because it seems in some cases, a little bit more more work than it's worth. Another thing I should say is, there's always this like question of does a website need to look exactly the same in every browser? I think there's even like one of those funny websites. Does website need to look? That's a long URL, find it? There we go. Yeah, the website is do websites need to look exactly the same in every browser.com? And the answer is always No. So you have all of these different targets, which are different browsers, you don't have to make it look exactly pixel perfect. In every single browser, every single device, all of our devices are different different capabilities. They have different screen sizes, and, and whatnot. So it doesn't need to look exactly the same, especially for someone who's is coming in on an older browser. They're probably used to the web not working exactly how they want it. It has to work. It just doesn't have to look a pixel perfect in every browser. - -8 -00:08:41,610 --> 00:09:41,220 -Scott Tolinski: Yeah. And so okay, you briefly mentioned using JavaScript to detect if at the port, yeah, doesn't work. So many times people think that is like, I should be using a code to determine whether or not this is Internet Explorer. If this isn't an explorer, I'm going to do X, Y, and Z. In fact, that's how it was done for a long time. I remember looking at style sheets, and there'd be a little comment, be like this is the Add IE six stuff. This is the Add IE seven stuff. But nowadays, and for a long time now we've had something called moderniser, which allows us to essentially add classes for feature flags essential is that what features are supported. So if you can't use add supports, and my recommendation there, instead of looking at what browser is, is supported, or what browser your users are using, look at what features their browsers load to have. So then you can have a dot Flexbox or whatever, and then use your Flexbox code inside of there. Rather than is not Explorer, Internet Explorer or whatever. - -9 -00:09:41,340 --> 00:11:34,890 -Wes Bos: Yeah, moderniser will append a class of like supports Flexbox or supports grid to the usually to the body or the HTML tag. And then you can you can write conditional CSS that will be only applied in those specific cases because like Scott says, that's that's a game that you will for sure lose is trying to chase down browsers because like, it's fine, you think, Oh, we got Safari, Firefox, Chrome and IE. But then you open up the world of her, when you look into all of the different mobile browsers which have, sometimes the user agents of them are being faked, because they don't want websites didn't intentionally block them. Which is funny though, when opera had its own engine, there was this massive list of JavaScript fixes that would intentionally trick browsers into thinking it was chrome or intentionally trick browsers into thinking it because what people would do is they would test to see if it was Chrome or Firefox. And if it was anything else, it would just block and say, Please use a different browser. Lots of bank websites did this. And opera was sad, because like we can support it just no one, no one knew about opera no one knew to test it in opera, or they didn't feel like supporting offer, even though it was really good. So they had this like huge JavaScript file that would intentionally trick websites into thinking they were Chrome or Firefox or that they had specific features. Even Firefox did that they they now support a lot of the dash WebKit browser prefixes because people were coding only in web prefixes. And then it wasn't working in the standard, which is why their browser prefixes are almost a thing of the past. Now, yeah, new features are always behind flags in browsers now. And then once they're done, they're done. And then they're released to the general public. So if you want to test it, you don't use a browser prefix anymore, you turn on a flag in your browser, I think there was like, it was a very, like frustrated time in web development, - -10 -00:11:34,890 --> 00:12:36,120 -Scott Tolinski: when you'd go to a Stack Overflow post or a tutorial. And they would only include the WebKit prefix in their solution. And I just wanted to be like, there are more browsers than WebKit browsers like remember, Paul Irish, this site, CSS three, please was allowed you to basically copy and paste all of the prefixes for any given CSS three property when it came out the site was an absolute lifesaver for me. But nowadays, we have things like autoprefixer, which this is a good argument for never not using autoprefixer. Because honestly, autoprefixer has taken some aspect of coding for me, which was browser prefixes, and turned it into an absolute non concern. And something I don't even think about ever. I just have autoprefixer thinking about it for me. And then now I've never ever ever writing another browser prefix. It doesn't show up in my code. So it's not as messy. If you're not using autoprefixer. in some regard in your CSS, you should be doing that. Absolutely. - -11 -00:12:36,149 --> 00:13:02,670 -Wes Bos: Let's talk about CSS variables. So this is another feature that is in CSS, how do you support something that like sometimes with JavaScript, and we're going to be talking about this in the next episode, you can polyfill something mean that you can you can make it work in older browsers. But often in CSS, you can't make these things work, just because it has to be added to the browser before you can use it. Although we should do an episode on CSS Houdini, have you been been looking into this at all seen - -12 -00:13:02,670 --> 00:13:03,390 -Scott Tolinski: the words? - -13 -00:13:04,139 --> 00:13:36,420 -Wes Bos: Yeah, it's like the ability. Real quick aside, CSS. Houdini is the ability to code your own CSS API with JavaScript and less sort of a Canvas API. And then you'd be able to be like, display Scott or display triangle, or you can create any anything in CSS. And then if it's not a natively supported feature, it will then look in your custom JavaScript, because you basically get access to the lower level paint API school in the browser is very well done. Well, maybe we'll build something and do an episode. I - -14 -00:13:36,420 --> 00:14:16,230 -Scott Tolinski: really liked this aspect of stylist that was one of like, the main reasons why I use stylist because because you'd have these transparent mix ins, which essentially just ended up being custom properties. Like I had a position, was it? No, I'd have a fixed property and fixed would automatically output position fixed, and then top and left or whatever, based on the values that I gave it. So I could just say, in my CSS, I could JS say fixed 00 and then do position fixed top zero left zero, it was like an awesome shorthand that I really missed about not using styles anymore. No, I do it with like a function instead of this component, or styled components, but having that as like a property with my own custom CSS Houdini JavaScript. Mom, I'm into that I'm very into that. - -15 -00:14:16,259 --> 00:14:29,220 -Wes Bos: Yeah. And And plus, you'd be able to do stuff that's not possible. Like it's not just syntax as well. It's It's the ability to code anything you want, obviously, slant, yeah, slant 40 degrees and or like, - -16 -00:14:29,399 --> 00:14:32,550 -Scott Tolinski: you know, your, your platform. So - -17 -00:14:33,000 --> 00:14:50,730 -Wes Bos: yes, you have full access to JavaScript be pretty cool. I can imagine somebody releasing, like, their own version of CSS that you code in. And as long as you include this Houdini script in your website, you can just code in that CSS, right? people complaining about CSS, no more. Make your own CSS. You can. Yeah, with Houdini. - -18 -00:14:50,760 --> 00:14:55,770 -Scott Tolinski: It's just like what like post CSS had the Canadian style sheets. You could have Canadian style sheets. - -19 -00:14:58,560 --> 00:16:03,570 -Wes Bos: That's Yeah, that was great. So next CSS variables, how do you deal with something that is totally unsupported? Like CSS variables. In this case, you do like what I like to call a double defined well defined, double defined. So you can either just use sass variables and not allow them to be changed. They aren't the same, yeah, they're not the same. Because a CSS variables can be changed in the browser, they can be changed with JavaScript. So if you were to change, like a color or a slider, or anything like that, it would automatically update in in the browser. Whereas with sass, it's done at compile time, and then you're out of luck. So it's not really a feature that you can take advantage of, until all of the browsers support it that you're targeting. But if you are doing it like something like grid, or Flexbox, you can do what's called a double define, where you simply just display block, and then you display grid, when the browser hits display block, it will be set, and then it will hit the next line over hit display grid. And if the browser supports grid, it will work. If it doesn't support grid, it will just puke that line up and move on to the next line. And you just fall back to that display block. Yeah, - -20 -00:16:03,840 --> 00:16:25,710 -Scott Tolinski: I use this in production. I use CSS variables in production, and I do so via the double define. It's not the greatest thing in the world to double define. I don't love that. But I love that when I don't have to worry about CSS variables being supported anymore, I can just remove any of my double defines. And then I'll have all the benefits of the CSS custom properties, which is I think that's the official name is custom properties. - -21 -00:16:25,740 --> 00:16:26,550 -Unknown: Yeah, yeah. I - -22 -00:16:26,550 --> 00:16:28,440 -Scott Tolinski: always want to call them variables, even though they're - -23 -00:16:28,590 --> 00:16:48,360 -Wes Bos: custom properties. custom properties. Yeah, we should do a little. We've done a couple episodes on CSS variables. But we should do like a hasty treat on like, Here's 10 cool things, you can do a CSS variable. Yeah. Because I would be seeing people come out with new use cases for them. I'd be very into them. Yeah. All right. Let's do it. I'll put on the list. Cool. - -24 -00:16:48,600 --> 00:17:58,470 -Scott Tolinski: Okay, so we did mention that we could have like a JavaScript callback, adding classes based on browser features and stuff like that. But we also briefly mentioned at supports. And so let's take some time to dive into add supports a little bit. So for those of you who don't know, add support is is the closest thing you could consider it as like a media query, right? We've all used media queries, where we've been able to define that that browser width, or I mean, defined CSS based on a browser width, well, at supports functions the exact same way where you have an app sign, then supports, and then you have the CSS properties. So for instance, if you wanted to check to see if the browser supports flex, or maybe, let's say grid, because we've been talking about grid, you could say app supports, and then the parentheses display colon grid. And then inside of there, it wraps around your CSS. So just like a media query, any CSS that you have inside of there is going to be processed in a browsers that support grid. And then there's also a nice little flag that says not. So if you want to target anything that doesn't support grid, you can say, app supports space, not space, parentheses, your properties, and then wrap that around just the immediate query, right? - -25 -00:17:58,770 --> 00:19:01,610 -Wes Bos: Yeah, it's, it's pretty helpful when you want to check in it goes in just in properties, like display grid, or you can go pretty deep like, transform style, preserve, or display table. So I'm just looking at the docks right here, if you want to check if if you're able to set a specific unit of something, if you want to use the new ch unit on something, you could add supports font size to ch and if it doesn't support it, it will just not go ahead and use it. You can chain them together using the and or or ones that you have, you can test for specific animations that you have. If it is prefix, you have to check for all of the different prefixed versions, but I imagine that something that you could automate real quickly with autoprefixer. And then finally, if you want to check for CSS variables, you can just say at supports dash dash name, or dash dash age colon 10. And that will check if you're able to set a variable and it will go ahead and use so it's kind of a weird because you have to wait until supports is in the browser. - -26 -00:19:01,770 --> 00:19:04,380 -Scott Tolinski: Which Guess who doesn't support supports? - -27 -00:19:04,529 --> 00:19:20,490 -Wes Bos: Yeah, ie doesn't support it, but it looks like pretty good support otherwise. So I think at this point, we're almost close to maybe we should have like a little a podcast to celebrate when iE 11 officially dies because I feel like we're gonna be flying. Once that happens. - -28 -00:19:20,550 --> 00:19:41,490 -Scott Tolinski: What is the usage percentage? I remember there was a website that we used to just like I all the time for when it was IE sevens time to go. And we were just like, Okay, once it hits below this, we can make the correct pitch to our agency to stop using it. Alright, it dipped below. Let's pitch it. All right. We don't use it anymore. It was like, it was like, let's celebrate at the office kind of day. - -29 -00:19:42,420 --> 00:20:18,180 -Wes Bos: Yeah, ie 11 is globally 2.53%. And then iE 10 is 0.07% which is amazing. Amazing. Again, this this has to do with who your customers are. Don't take these numbers. Take your own Google Analytics for your website. Because like I even A couple years ago, I met somebody who was developing a game and they had to make it work on IE six min cousin, it was huge in China. And everyone in China had hacked Windows XP running on these old computers. And it was just like this weird situation where they needed to still support iecex. And I was like, that's - -30 -00:20:18,480 --> 00:20:20,970 -Unknown: a nightmare. Not said that is my Yeah, - -31 -00:20:21,080 --> 00:20:35,190 -Wes Bos: but they did x, they're making lots and lots of money off of the game. Right? So props to developers who are still in the trenches doing that, but like, 2.53% that's not nothing but i think it's it's it's almost gone. Whereas what is what is edge right now? Let's look oh, - -32 -00:20:35,220 --> 00:20:38,190 -Scott Tolinski: shoot my hands like not loading for some reason. Edge - -33 -00:20:38,220 --> 00:20:44,310 -Wes Bos: edge is 1.6%. So more people still use iE 11. Then use edge. Wow. - -34 -00:20:44,310 --> 00:20:45,590 -Unknown: What is? - -35 -00:20:45,960 --> 00:20:48,390 -Yeah, that's a bit of a bummer to find out as a bit of a bummer. - -36 -00:20:48,630 --> 00:20:51,560 -Scott Tolinski: Because the edge team has been working so hard on edge. - -37 -00:20:51,590 --> 00:21:35,360 -Wes Bos: Yeah, they've been killing it. But it's it's only a matter of time. It's just you just have to wait until those people get their new computers, right, which I could see as a problem. Because I think a lot I know a lot of people who are who have computers that are five, six years old, and they're still good, you know, like, yeah, the processors are still getting better, but the needs of people are not still growing. So I think the being able to go on Facebook and do whatever it is you need to do your QuickBooks for your business is is all people need to do is find your business. Yes. Yes, use your I'm thinking of my all of my friends who have like desktop software, and are very old and antiquated, which I will quickly transform them over to using fresh books. - -38 -00:21:37,950 --> 00:21:39,720 -Unknown: Oh, cool. Well, yeah, - -39 -00:21:39,830 --> 00:21:43,770 -Wes Bos: um, anything else to add for supporting older browsers? - -40 -00:21:43,820 --> 00:22:09,540 -Scott Tolinski: I don't have anything on this topic. We do have a whole nother episode of awesome old browser stuff to talk about. And I'm excited for that stuff. So yeah, no, I think that's pretty much it. Right. Your fallbacks if you don't have any or don't use the stuff. And again, I think one of the important things that we've said a couple times in other episodes is know who is using your site and how they're using it, have your analytics and work towards those people and know what maybe percentages of those people you want to support now important that is - -41 -00:22:09,779 --> 00:22:22,830 -Wes Bos: totally in the next episode, we'll be talking about supporting older JavaScript in the browser. And it's actually pretty good. It's pretty easy to support both new API's as well as new syntax in older version, so get ready for that. You're - -42 -00:22:22,830 --> 00:22:25,140 -Unknown: ready. Monday, Monday, - -43 -00:22:25,740 --> 00:22:33,090 -Wes Bos: Monday, Monday, Monday. Alright, have a good weekend. We'll see on Wednesday. All right, who's please - -44 -00:22:34,950 --> 00:22:44,700 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax86.srt b/transcripts/Syntax86.srt deleted file mode 100644 index 60cd75baa..000000000 --- a/transcripts/Syntax86.srt +++ /dev/null @@ -1,216 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Announcer: You're listening to syntax, - -2 -00:00:02,820 --> 00:00:10,530 -Unknown: the podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. - -3 -00:00:10,530 --> 00:03:54,449 -Wes Bos: Welcome to syntax. How's everybody doing today? Hopefully you're doing well. This is a potluck episode of syntax where we answer your questions, I'm super excited to be getting into it. Today, we are sponsored by two awesome company. First one is Sentry, it's going to track all of your errors and exceptions. And second one is dot tech domain names, which is you're finally gonna be able to get a decent domain name without them all being taken. So with me, as always, is Scott Tolinksi. How you doing today, Scott? Hey, I'm doing good. I, for anyone who's been following me on Twitter, you've seen that I've been doing without my computer now for like, I don't know, six, seven business days. So therefore, like nine normal days, which for someone who's addicted to their computer and doing this stuff is very tough. Trying to run a business yet. Yeah, kind of run a business, right. And so I've been like dying, because I've really had to start recording my next tutorial series for this month. And I've just been sitting here being like, apple, when are you going to fix this and it like turns out that what happened was, I don't know they sent my keep my computer to be in a double key press, like i'd press the E key. And every single time I press the E key, two E's would pop out, which you can imagine is extremely frustrating. So I would use just an external keyboard. And then eventually it was like, You know what, I got to get this fixed at some time. Let's get this fixed right now before heading to a couple conferences and stuff like that. I don't want to have any pain with this computer while I'm there. Well, and it just no updates from Apple. And it was just taking forever. And I had to call and get through like two layers of support people before I even found out the status. And what happened was, apparently they broke my screen during every pair. Oh, they had to like wait extra days to get a new screen and then fix that. And nobody told me Nobody told me any of this. So I'm happy to have it back. I'm just excited. But now I'm like under the gun here to start recording for my next series. Yeah. Which I'll be doing lots of today. And you lost all your stickers when they did that. Oh, yeah, this thing is pristine. Yeah, it is absolutely clean. When they told me they broke the screen. That was the first thing I thought of, I have this like, I have this really great sticker from my friend, Jeff Marcel. It turns out I know, to sticker mogul. So I'm in good hands. But Jeff, Jeff got really popular for making this dirt right baseball cat's sticker. And Detroit is hilarious. And I've always had a Detroit baseball cats as sort of a plan the Detroit Tigers. And I've had this sticker on my computer. And I was so bummed because it was my last one. So I first thing I did is I messaged Jeff, and I said, Jeff, please tell me you have more stickers. And he's like, I got you. I got a box of those come in. And I'm pretty psyched about it. That's what I did. I launched my course Finally, I'm so excited. My advanced react course is finally up. Advanced react.com It was a long time coming this course I had worked on for I was looking back at the commits. many moons met like over a year and there was like big gaps in that because I had to like stop the shelf the whole thing a couple times while the Yeah, like the initial thing was built on like graph cool. And Apollo one. I think every single tech that I had initially started with had like totally rolled over into something totally different. Yeah, shifting shifting ground there. Yeah, I'm super excited. Thank you so much to everyone who was patient with it. And thank you so much everyone who actually bought the course the response has been amazing. It's sold a ton of copies so far. And I'm super excited. Oh, and whenever I one thing I realized is we never give out coupon codes to to the podcast, which is kind of, I feel like we're leaving something on the table there. So I'm gonna start throwing out a coupon code syntax for an extra 10 bucks off if you want to grab it yet. Yeah, yeah. Hey, I'm gonna do that to go for it - -4 -00:03:54,690 --> 00:04:02,819 -Unknown: was gonna be x. I'll just do 10% 10% off with the syntax coupon. I'm gonna add it right now. Good off of the AppStore - -5 -00:04:04,500 --> 00:04:33,140 -Wes Bos: Alright, let's let's jump into the potlucks. If you've never listened to a potluck before, this is where we answer your questions. They can revolve anything around .TECH, JavaScript web development, barbecue tips, breakdancing, or soft skills. So if you have your own question, make sure you go to syntax.fm on the top right hand corner, there's a button that says ask a potluck question. Go ahead and fill it in there. Also, if you just have like suggestions for shows, someone just submitted a huge question with like the entire, like most nicely formatted - -6 -00:04:33,179 --> 00:04:35,370 -Unknown: question I've ever seen. It's so good. Yeah, - -7 -00:04:35,390 --> 00:04:51,720 -Wes Bos: it's like, uh, can you please do a show on CSS positioning and sizing? And then they broke down the entire question into like, thank you. We're just gonna take your entire outline into a show. Yeah, thank you. - -8 -00:04:51,720 --> 00:04:55,620 -Unknown: It's a hard way to get your topic into a show is if you make an outline for - -9 -00:04:56,610 --> 00:08:18,000 -Wes Bos: the entire thing. Also, if you could just record the podcast for us as well. Push it out, put the sponsors on it push it out. Our first question is from Eddie, you think question is how can you help a designer understand how styling works? And how layout works on the web? what's possible, what's not possible, why something may take longer than something else? Why animations by Embree credibly hard to make responsive and perform well, etc? In other words, how do I explain my boundaries as a front end dev to a designer? I think this is a really good question. Because I think a couple years ago, I think design is changing how we do it right now. And there's still a lot of people who are still building it the way this might be efficient way for you. So it's not necessarily wrong, but you design the entire thing. And then you finish it up, and then you give it off to a front end developer, and then they try to implement that thing. And when I worked this way, I was always like, the designer was a bit of the enemy, because it always be like, Oh, the designer, like doesn't know what's possible. And they're doing all these crazy things. And there's no way we can possibly make that layout work, especially if you're trying to go responsive or, or they give you like a mobile layout. And the layout is like totally different than then your, your, your main layout, and you're like, that's not how responsive works. It's the same markup. And we can kind of do a little bit of reordering with Flexbox, or grid, but it doesn't work that well. But I don't necessarily think that's the case anymore. Because I think like it's the job of the designer to take the information that needs to be to be presented, the problem that they're trying to solve, like, a designer's job is to communicate to the user that that's trying to use the interface in the most effective way. Right? That's, that's their job. And issue, obviously supposed to keep it on brand and make it appealing and make it easy to navigate about and all that stuff like that, well, that's their job. And it's your job as the front end developer to, to actually implement this thing, right, it's your job to figure out how to actually input that said, there is still many use cases where you get something from a designer and you go, like, there's no way that we can implement this. Or if we were to implement this, it would cause the page load to be 10. Meg's and it would be super laggy. And it's just not going to make for a good experience. And at the end of the day, that comes back on the designer, because they're trying to make a good experience. Right. So some tips here, I think working closely with the designer is super important. I know that a lot of companies I think Shopify does this for they have these pods, where you just sit at the same desk, as I think he like a project manager, a couple developers a designer or two. And they're all working on the same project. And just being close with the designer allows you to sort of have this back and forth like, Hey, is it is it possible to do this thing? Or, hey, you see how I'm trying to transform this little color outside of the bounding box? Is that going to have any implications there. But I think at the end of the day, allowing the designer to do their thing, they should know what's possible here and there. I think it's it's really pushed myself as a developer, just getting stuff from a designer that has no clue because it really pushes you pushes you past your limits, and you have to figure out okay, how will I implement this thing? And, and how do I make sure that it is performant and etc, I think also CSS Grid Flexbox, custom fonts, transforms, a lot of that has gone away. A lot of stuff is now possible in the browser, but let them push you a little bit. I think what what do you think about that, Scott? Yeah, - -10 -00:08:18,000 --> 00:13:19,169 -I have pretty much notes on basically everything you just said, like total agreement. I mean, I would say that it is right now in terms of like what we're able to do on the web, but we have the most flexibility and freedom to create layouts and animations and stuff like that than we've ever had before. So I think even right now more things are possible than have ever been possible before. But that said, like, I like to think of it as opportunities for things like pair programming, where you can work with a designer, I think one of my most positive experiences in this regard was when I worked at Ford, and I sat down with one of the designers. And we seriously, we talked easing curves, and transition durations for you, maybe 30 to 40 minutes or so. And it wasn't that much of my day. And we basically sat through. And this is before any of the design apps had animation stuff built in. So we couldn't just try it in a design app to see prototyping animations. So what I was doing is I was sitting there coding quickly, and he would say, Okay, let's see this now at point four seconds. All right, we both look at it, we evaluate it. Okay, let's see this at point, point three. All right, now let's see this with this kind of easing curve. And the designer and I sat down and we worked it out together. It was like a combination of technical skills, designers skills, and we both had our eye on it. And we both discussed the merits of it. I think these kind of things don't happen enough in our industry, and too often were grouped into the designers and the developers, when really there's so much blur between the two that I think the more you can eliminate those the sort of gaps between the two, the better off your products going to be just finding like a joint solution, right. Also, like you said about boundaries, right. Don't be afraid to have your boundaries pushed, I think some of the most difficult, exciting and Just all around technical challenges I've ever had, where because a designer did something that I would never have done, because I would have known it was a bad idea. And then they've already shown it to the client. And here I have to develop up this quote unquote bad idea. But it's not a bad idea. I was just lazy, right? So then, so designer comes here, and it says, This is how we have to do it. And now because the clients approved it, that's how we have to do it. And then I have to figure out how to use my skills to the best of their abilities, and really grow as a developer to make it happen. So I think that is there's opportunities to grow as a developer through, you know, difficult designs. But I also think there's tremendous opportunities for learning experiences. Yeah, so take an opportunity to also do something like a brown bag lunch, and maybe do a mini presentation or put something on the TV, a YouTube video or something that is about responsive design, if you feel like your designers aren't getting it, but take opportunities to educate your team. Don't just build grudges, because XY and Z doesn't know how to do a responsive design correctly, or they're not using proper techniques and make sure that you're you're teaching and you're growing, because that's how the agency overall gets better. I think the last little tip that I have is show them things that are potentially taxing. So try to implement something that that they're asking for, and then show them Oh, this is slow because of this, like one good example is my advanced react course, I just launched it. And like I always go to town on drop shadows and border radius and transforms and stuff like that. And if you go to my advanced react course, you'll see that I have this like this one div that's, that's tilted. And then it also has a drop shadow on it. And it also has a background pattern. And I had used that exact same layout on on my node course. And it had worked fine. But for some reason, when I swapped out the background pattern with this new background pattern that I was using on my advanced react course, only on the latest Safari it chugged It was like, you could hardly scroll through this thing without it being like. And the auditory representation of a janky site right there. I couldn't figure it out. Like I knew that it was happening. I had a couple of people being like, Man, that West this thing is chugging on safari, what's going on and I opened it up and I had Jonathan snook dming me, he was like godfather of CSS knows everything I was like, like, we narrowed it down to being the background pattern. If I took the background pattern off, it worked fine. Or if I took the rotation off and kept the background pattern a worked fine. But the combination of those two, I switched the SVG background to a PNG background. And that didn't do it. And then I just I swapped it out with another SVG background, just a different pattern altogether, which was less complex and went back to scrolling fine, but such a weird little edge case that I should have caught it because I did test it in Safari. But for some reason, I didn't catch it. And I opened it up again in the latest Safari and I was like, Oh, this is this is brutal. Like almost on you. And it's only those two spots. But like I only tell you that because like that's a good example of urine think oh man, Wes once had an issue with with scrolling performance. It was because he was trying to flex a little too hard on the rotations of background patterns. And maybe that's something that is a little bit pushing it too far. Krishna too hard with that flex and I understand. - -11 -00:13:20,429 --> 00:13:21,870 -Unknown: Okay. All right. - -12 -00:13:21,870 --> 00:13:28,710 -So this next question is from Ashkan. And this question is, hi, how do you manage your time for learning new things when - -13 -00:13:28,710 --> 00:18:05,640 -Wes Bos: you already have children, I also have a daily eight hour job. I've recently changed country for a better life. But my new job is quite boring, very old stack tech spaghetti code all over the place. I don't really learn anything new. Therefore, I feel like I'm lagging behind the industry. I want to learn everything. But it's really hard to find some time with my boring job. When I have children at home. I put my learning times for when my kids go to sleep. But this has proven to be not efficient, because I usually end up falling asleep watching a tutorial on my phone or trying to code on my laptop. Yeah, this is this is very relatable. I mean, though, because then I both have kids. So yeah, this is home. And it is when especially when you know when when Landon goes to bed like last thing I want to do is bust out my laptop at this point before I had kids and it was like seven o'clock. I was like yeah, let's go. Yeah. And then now I'm just like, I'm exhausted. Like, I just want to watch master chef. Yeah, yeah, I want to watch master chef. Right. Exactly. Yeah. And so just something to get your your mind away from it. So how do you keep up I talked about this in one of my my learning talks. I think it's important to to find ways to to learn on the job and get paid for learning because in this industry, we all know that our skills need to be constantly being honed to use a little bit of knife language I learned from Wes, you get a hone right. Oh, there you go. You got to hone and sharpen those skills. Yeah, honing and sharpening are not the same thing. But Yes, correct. You got i was i was Yeah. Do you know that? Yes. I was going there. Yeah. Okay. So and So what I mean by that is really you want to figure out a way way that you can be both beneficial to you and your organization, and a way that makes it so you're still productive at work. And I know some people will think that this can't be done. But really how many things in your day Have you like been slow on or maybe could have done a little bit more efficiently, or maybe just maybe an hour or two here or there or work where you're just goofing off or something like that you're not 100% on point. I know, people tell me they can't take any time when they're at work. But I really don't believe that everyone is 100% on point all the time at work, I honestly just don't believe it like, so you can have time while you're getting paid. And if you can convince your boss that it's worthwhile for you to be learning, that's great. That's the best possible thing. Maybe you're doing a project internally or something like that. If you can convince your boss to do it, that's awesome. If you can't convince your boss to do it, I would suggest this might be a little bit iffy territory. But I would suggest, you know, like James Bond going rogue a little bit and get your stuff done, get it done quickly. And then any extra time, take that time to learn at work. Even if it's not approved. Don't get fired, don't come at me if you do get fired. You know, I think it's important because that's always how I learned, especially when I had a nine to five is I would either convince my boss that I needed time for learning. Or I would make damn sure that I got all of my stuff done. So that if I did take that time to learn each week, they came in me I could say, Listen, I got my stuff done, I'm bettering my skills, it's getting better this organization, how can you complain about that? I'm very much of the same thought process, like First of all, props to doing family first, because it's really tough when like, you obviously have a family, which you want to give your time to. But you also have like goals and you need, you want to move forward with your career and you want to enjoy exactly what you're doing. And it's, it's really soul sucking when what you do for eight hours a day is something you don't enjoy, it can really like spill out into other areas of your life. And then that's not good for anyone. So a couple tips I have here. First of all, I think your spaghetti stack that you're working on is a huge opportunity, you just need to be able to convince whoever is at stake that is worth spending some time on it. So you can tell them, hey, like we're gonna be in big trouble, this is really going to drag us down. And if a competitor is going to come out with a more modern stack, which allows them to move much more quickly and allows them to build better experiences, you're going to be in in big trouble. Like I think of something like libsyn. Right now, where we host our podcast is rudl. It's too late, I'm sorry, the brutal, brutal, brutal, the worst experience I've ever had to use libsyn. And right now there's all kinds of startups popping up with better analytics, better interfaces, better applications, better prices, all of that stuff. And almost anyone that's starting a new podcast isn't going with Lipson. Right now we're kicking ourselves for going with Lipson because the interface with all these other ones are much better, right. So if you tell your boss, hey, we're gonna be in big trouble, we have this big spaghetti stack, we need to start chipping away and modernizing this codebase and building into something that is going to allow us to move much more. So you need to you do have to like be able to explain it to your boss, like, Look, I actually care about this company, and I want to work on it. - -14 -00:18:05,670 --> 00:19:40,200 -I think that's the angle that Yeah, I want this this company, I want my skills to be better. I want our tech stack to be better. And like I get people have requirements, they need to meet in constant features and improvements and stuff like that. But yeah, I mean, you're dead on with that opportunity in there's like a lot of even like small opportunities to improve things that aren't going to affect the codebase in any sort of like crazy way that you can do to improve things and grow your skills a little bit I think that's dead on my other tip here is like talk to your your significant other because like if your goal is to get better to get a better job to move forward in life, because the reason why you're likely doing this is because you want your family to have a good life, right? It sounds like you just changed countries to have a better life and you want to be able to provide for your family. So if that's the case, it's worth having a talk with your significant other and saying, like, look like one to two times a week, whether you wake up early, whether like one thing my wife and I are discussing right now just to get a little bit more time to go to the gym is we're gonna trade off nights putting the kids to bed so that we each will have a couple nights free every night to do whatever we want. Go to the gym, work on side projects, just like do a puzzle, it doesn't matter what it is. It's just that like you need to like have like that talk with you. So you know other and say like, I'm doing this for for the family, and we need to be able to move forward. So there's like some sacrifice, there's something always has to give when you don't have enough time for something. And I think there's some creative ways you can go around that which at the end of the day is going to make it better for everyone. It might be short term pain, but as they say long term gain - -15 -00:19:40,260 --> 00:19:43,200 -Unknown: nice nice little slogan at the end there. Yeah, cap it off. - -16 -00:19:44,330 --> 00:20:04,310 -Wes Bos: Next one we have is how do you deal with burnout in this constantly evolving front end tech ecosystem. So we have a couple episodes already on we have one Keeping Up With The Kardashians let me get this the episode number for that. That's got me that up by the way which Almost next because I thought that was dumb. And that's me giggling - -17 -00:20:06,690 --> 00:20:08,330 -Unknown: about it. Yeah, I know. - -18 -00:20:08,360 --> 00:21:59,670 -Wes Bos: Let me find the number keeping. Episode 35 is keeping up the Kardashians dealing with her fast paced industry. And then we also have a episode on burnout, preventing and dealing with burnout as Episode 41. So if you want to go back and listen to those two episodes that has some good but Scott and me are gonna lay down some quick tips, what do you got quick tip on hobbies away from your computer. Because when you're on your computer, really easy to want to work on stuff. And it's really easy to want to learn stuff if you're excited by this industry. So I like to find things away from my computer. And if you're like a video game fan or something like that, and Nintendo Switch or something will pull you away from it, even though it's like screen time to like pulls you away from your actual computer. I personally like a little bit more of like an athletic in a physical way of doing things. So I go to a breakdancing practice twice a week or I go to the gym three times a week, I find hobbies and I find things to do that aren't in front of my computer that aren't coding, and that exert like physical energy. And that's how I avoid burnout. I take that time to rest and stuff like that to recharge via stuff I like totally, I think another good point other than having other hobbies is that's really important, being able to totally disconnect from it. Because when you feel like things are moving too quickly, your first thing is like I just must spend more time on this. But that's probably the worst thing to do just because of the burnout that inevitably creeps in and, and causes you to start to hate this thing. So also fun projects that you have. So like it is constantly evolving in the answer isn't just to stick your head in the sand. But if you can pick up a fun project, you can do a little side project I've talked on all the time. I'm like little problems I've had in my life, whether it's trying to buy stuff on Kijiji or Craigslist or trying to make my own, just solve my own problems, pick up a project like that, and you'll be able to have a little bit more fun with it. Other than that, check out those two other episodes. Lots of good stuff in there. - -19 -00:21:59,759 --> 00:22:00,540 -Unknown: Yeah, yeah, I - -20 -00:22:00,540 --> 00:24:10,650 -Wes Bos: know. It's like Actually, it's like super easy to get like burnt out if you're like constantly like thinking about all of your projects. Yeah, and especially if you like maintain like a long term project or something like that. Maybe you're just like your heads in the clouds about potential bugs or stuff like that. And that's why one of our sponsors today is just so so incredibly useful. Because century allows you to have all of your bugs, all of your errors, logged, categorized and just kept in one central spot. So you don't have to fret over these things, when you shouldn't be thinking about them right? century's got your back in that regard, they're going to capture all of your errors and exceptions, and let you solve them. When you have the time and ability to solve them. Big fan of century myself, I use it on my own course platform whenever anything goes awry. First thing I do is jump into century. One thing I've also been doing recently now that my courses out one of my next goals is to go and tackle some of these commonly thrown errors and figure out why they're happening. Sometimes errors show up and they're nothing right. Sometimes they happen from Chrome extensions and stuff like that. And you'd be able to filter those out, you can mute them, because they're not important. But the other one, sometimes I get errors that are coming in, and they're just little bugs that people hit on the back end, whether they're on an older browser, or whether they're actually hitting a real issue. And you can go through those you can assign them to different people on your team, they'd be able to do it, you can you can smartly assign them which means that like if somebody introduced some code, and then that code started via get if that code started to go awry, then it could automatically like wind it back to the person that introduced the code, which is super, super cool. If you write your code in ESX modules, or you use something like TypeScript, you'll be able to open up source maps and see actually where is authored it's just amazing for being able to figure out what went wrong. So check it out@sentry.io sC n, try and use the coupon code tasty treat, that's going to get you the first two months free. And the nice thing about that coupon code is that if you already a century user, you can still use that coupon code so it's not just for new signups which is great. I love when companies do that. Check it out. sentry.io Thanks so much to Sentry for sponsoring. - -21 -00:24:10,710 --> 00:24:14,670 -Unknown: Nice Oh, some good spelling. I was like some very, very easy and - -22 -00:24:14,910 --> 00:24:23,400 -Wes Bos: try. You don't want to know how to spell tasty treat to ta s t yt. r e a t no spaces now. Wow. I mean, I - -23 -00:24:23,400 --> 00:24:26,850 -Unknown: say like I'm jaws agape here. I'm definitely blown away by that. - -24 -00:24:26,880 --> 00:24:30,300 -Wes Bos: I'll spell anything you want to submit it via the potluck button. I'll spell it for you. - -25 -00:24:30,510 --> 00:24:33,120 -Unknown: I will not sell anything. I will not do that. - -26 -00:24:34,740 --> 00:24:41,430 -Wes Bos: We were joking in my chat room the other day that my my tombstone is going to have a typo on it. Dude, Yeah, - -27 -00:24:41,730 --> 00:24:47,340 -Unknown: dude, everything. Everything I do has a typo on it. So rest in peace in PE - -28 -00:24:47,340 --> 00:24:49,200 -Wes Bos: I see he - -29 -00:24:49,590 --> 00:24:56,520 -Unknown: Oh boy. I thought you were being serious for like one second then I was just like, oh, he's doing a joke. - -30 -00:24:59,220 --> 00:27:31,800 -Wes Bos: Next question is Also from Gerard de Goss, who did the previous question or Degas, whatever, choose your pronunciation? And this question is, do you code at night past at 9pm? I find that if I do, I have trouble putting my mind to rest. And I also don't sleep very well, in general. Yeah, this is a very real one, I mean, that there's actually like, a name for this, when you like, shoot, there's like a, somebody is gonna know the name of what this is called, there's like an actual thing for when you're like concentrating on one thing, before bed so much that when you even do fall asleep, you're like dreaming about it, and you're like, can't get it off your mind. And it's like consuming your brain, it's like definitely a very real thing. And for the most part, I think the best solution to this is set your wind down time earlier. That's, that's it. And if you want to get extra work done, that's not nine to five, then wake up earlier and do it, then go to sleep earlier, quit your work earlier, if you can. And then and then do it that way. In fact, like, I found mostly that sometimes, like, I used to have a lot of problems when I was trying to solve a problem before bed, and I would just think, five more minutes, and I'm going to fix this bug. All right, 10 more minutes, I'm gonna fix this bug. 20 more minutes, I'm gonna fix this bug, I swear to God, I'm gonna go to bed after I fixed this bug, just one second. And then it'd be like, you know, midnight, one o'clock in the bugs, not fixed, and I didn't get anywhere. And then I had a bad time sleeping. And then I had a bad time trying to work on it the next day, right. So what I should have done is at seven o'clock, I should have just stopped and said, You know what, I'm going to just take a break for now and just quit right and go to sleep. Because what happens is, you don't realize this, but your brain is actually working to solve these problems while you're sleeping. And while you're away from it, it's part of the reason why we tell people to go on a walk, if they're having trouble figuring out something, just take a little brief walk, because your brain is going to be working on these problems without you having to sit in front of your computer and try a whole bunch of stuff. And most likely, sometimes you need that time away for this thing to be solved. So I would put it on hold, find something else to occupy your mind with and relax, wine down, go to bed, and then try it again. First thing in the morning. And chances are you'll spend less time getting this thing working than you would have if we would have stayed up all night trying to get it working. Yeah, I think Another good tip is make sure that you mix your uppers and downers appropriately. So if you haven't read three beers the night before four coffees in the morning, whatever, we're joking. No, - -31 -00:27:31,800 --> 00:27:33,180 -Unknown: I don't do that. - -32 -00:27:33,210 --> 00:32:24,960 -Wes Bos: Yeah, the same, right? Don't do that I have the same problem. I can't code at night. Like last week, when I was trying to launch my course, I was whipping out the laptop after I put the kids to bed and that I was just jacked all night, because I was just like all excited about and I couldn't stop thinking about solving different problems and what I had to do. And one little tip if you do have to work late because sometimes you do have to work late. And sometimes you want to like get this extra coating in because you're trying to learn something. But my tip is to just get it out of your head. And we've talked about this on our getting things done episode where have like a to do list. And if something is bugging you, if there's a problem, make sure you document all of that in your to do list out of your head out of your mind. And I find that helps you sleep a little bit better, because then you're hopefully stop thinking about it. But then again, I still sometimes even when I do that, I still can't do it. So I just try not to code late at night, I often like to switch over to something like a podcast or an audiobook because I still want to use that time for something productive. If I'm listening to say this podcast or an audiobook or something like that, it's well worth it. Otherwise, just just something mindless, like watching master chef is as I like to do as well. Yeah, it was funny, because last night, Courtney and I were just talking about everything we had to do for the week. And she was just like, I'm just so my brain is filled with like everything I have to do for the week. And she's like, Well, you know, like, what do you have to do? And I was like, You know what, honestly, there's too many things on my list that I have to do this week for it to be in my brain and comfortably. So I have expelled all of them to my to do list. Because otherwise I'm not getting to sleep. So if you have something like that, like it's so I think in my opinion, such good advice is to get it out of your brain onto a to do list, because that sort of marks it off is like done kind of it's like a check. Like, hey, I'd kind of did this, this thing's not done, but at least it's accounted for. And if everything's accounted for, then you don't have all this minutia floating around in your brain. So I think that's a definitely an important point to emphasize. Next question is from Shahid Khan. It's just how do you compress your video and audio for your courses and tutorials? I think this is a great question. I totally haven't figured this out because when you export from ScreenFlow by default, it tries to give you 3000 kilobits a second, and which is like three megabits, something like that. And Vimeo tells you to do it at like somewhere between like 15 and 20. So whenever I export the default from ScreenFlow, it looks like garbage, especially like when you have your code editor up, it tries to aggressively compress it because it's very such as such simple colors. That's why like I always tell people about like video compression. Like when I was downloading family guy back in the day, Family Guy episodes are always really small because they're very simple colors. And they're like, yeah, like like 103. Meg's for episode, whereas a good episode of Seinfeld was much bigger because it wasn't simple colors. But whenever I would compress it like that the it would look, I would get a lot of artifacts on it, and the the text wouldn't be nice and crisp. So what I do now is I export it at extremely high bit rate, and I export it at 1080 P, I recorded that double that if you go back to our episode on courses, I talk a little bit more about that. And then what I do is I just throw it into Vimeo and let Vimeo figure it out. Because they do millions and millions of videos. They're really good at compressing video. And they will also compress it for different speeds, meaning that if you're using the Vimeo player, which I've since moved to, it'll go up and down depending on your connection speed. So that's how I do that. And then for the downloads, some people like to watch my stuff offline, I use handbrake and choose the fast 1080 p setting that will go ahead, but I still haven't I'm still not super happy with it. Because Because exporting them at such a high bit rate, it takes forever to export. And anytime I need to re export a video it takes like I don't know, maybe like 20 minutes, 25 minutes per video. That's like 20 minutes long. So I haven't figured it out yet. Yeah, I have it down to a little bit of a science that I largely like to use the software to do all the hard part for me. So for one, I don't use ScreenFlow. So I use a real video editor. Okay, so I'm currently using DaVinci Resolve I've been using Final Cut with compressor though. In both instances, I'm always using presets, like whatever the presets are DaVinci. Resolve has some of the best presets way even better than I found on other platforms where I can say, Hey, give me the 4k YouTube preset. And it does that. And you know what I honestly I like the 4k YouTube preset for video downloads as well. So I'll watch it there at the 4k YouTube preset. I'll upload it to YouTube. And if I want a 1080 version for download sales, I'll actually rip it from YouTube and get the mp4 that YouTube is already compressed for me because like you said, they have compression down to a science and it looks and sounds good. So that's what I end up doing is I let the platforms who have it figured out do it for me. Yeah, I get basically the highest 10 ATP version that YouTube has to offer. And I use any of my presets with them I compressor. That's pretty much it though, for me. - -33 -00:32:25,080 --> 00:37:12,330 -Good. I need to check out this Da Vinci editing software, I'm so fast and comfortable in ScreenFlow. I have a couple little gripes in there that have since been fixed in the latest version of ScreenFlow. But this Da Vinci looks really really nice, I think you'll be able to just be me up to Da Vinci is free to to use, it's really sick. But I mean, again, it is like a like conventional editing software. So if you are used to something like ScreenFlow, there is going to be a huge learning curve concerning like what this thing is capable of. There's just a lot of bells and whistles, and there's a lot different maybe have a workflow that something like ScreenFlow that's always the million dollar question is do I spend time relearning a new piece of software? Or do I just keep trucking along at my extremely fast pace right now? Yeah, right. Cool. Okay, let's get into the next one. from Michael. And it says, it seems like the web dev community a lot of people give WordPress crap. Any idea? Why is it just because people feel like it makes the web dev to simple Thanks for everything you do with the development community. I you know, I think it's not necessarily like a new trend or something. But like, I think WordPress is great. The reason why people might be Pooh poohing at any given point now is because what you have, like new page reloads for every single page, you're loading instead of like a front end JavaScript framework that's not doing any sort of additional page loads. But then again, you could always do headless WordPress, we still get the WordPress back end, you can do the front end and something like Gatsby or next. WordPress itself is dope. Okay, so don't let anyone tell you otherwise WordPress is evolved. And it's continuing to grow. And it's a really great platform. I mean, otherwise, the most of the web wouldn't be powered by it. I like to think it's like I said, it's not a new trend, but it's like almost like a sports team situation. There's like a hilarious comic where one guy has a flag, and it's just like TMA. And another guy has a flag that says Team B. And then the third panel is the guy saying, Wow, that guy just like you already, like, you just hate this person because of their association with something without actually like, just because it's like a my team's better than your team kind of thing. And for the large part, I think this industry needs to cut that out. That's one of my least favorite things on Reddit is when you see like a post that's like react versus view and then everyone's just like, React better. No views better, like who cares, man? Yeah, like, it's not your sports team. It's a tech stack. Like Yeah, I always wondered this as well. And I think I've narrowed it down to a lot of people. The first thing that they had ever learned in web development was learning to build a WordPress theme and also, you Usually what they do is they take some huge massive theme that does everything under the sun, and then they crack it open to try to change it to make it look what they want to do. Someone else has written all the code and their style. And that leads to both being a new developer and trying to work on someone else's code leads to a lot of frustration. And it usually leaves a bad taste in people's mouths. And they look back on it and say, Oh, I hate WordPress, because that was a very like dark time in their career when they're really frustrated and trying to learn to code. And the reality is that it's just you probably weren't a good developer when you were first trying to trying to pick that up. Other things about that is that you can do a lot of bad stuff in WordPress, I think that it by its very nature of how easy it is to get up and running. You do see people just slinging stuff together as a lot of people just like kind of putting a whole bunch of plugins together. And that can go awry, that can cause it to be extremely slow. Often WordPress is hosted on like oversubscribed, for $1, a month hosting platform that just can't handle the load of all of this kind of stuff. It can be really slow like that, it generally because WordPress has such a low entry, it usually attracts a lot of people who are just stringing stuff together, which is there's nothing wrong with that I first learned I think a lot of people listening first got their start with WordPress and men might still be in it. And I think people are a little bit proud to be like, Oh, I'm a much better developer than that. I don't I don't want to work in that sort of kiddie pool of web development. So none of that stuff is true. I absolutely love WordPress, I think that it's it's an amazing thing that you can get up and running in it. Do you need to use it? No, I anytime I hear somebody bashing any tech platform, I see right through that. And I see insecurity of zero skills and things like that. So if you don't like it, don't use it. But I do know that there are I've talked to a lot of people that run huge like, like 10 up as a good example. So it 10 up is this massive web development. I think they're an agency, they work for huge companies. And all they do is WordPress, and they build some of the best WordPress stuff out there. So it can be done really, really well. If you have competent PHP developers and in good systems on how to approach this kind of thing. Yeah, - -34 -00:37:12,360 --> 00:40:25,560 -yeah. And I mean, like, if you want to work on a WordPress site or otherwise, and a great place to host your thing, if you're looking for a domain, it would be a dot tech domain, which we talked about is there's just a lot of availability and dot tech domains that is just totally blowing your mind for what kind of actual domains you can you can get with one of these Tech's Yeah, so you know, remember, when did.io start to become popular, it was like, maybe six or seven years ago, yeah, we thought you'd spend so much money on.io or something I you know, it used to be 100 bucks. And I remember I bought west.io. And I still have it, I use it as my URL shortener. And I was so happy to have have grabbed that because like, I have friends who've sold di o domain names for many, many thousands of dollars. And it's almost impossible to grab a domain name anymore. So dot tech is coming out swinging and trying to be the the next sort of place that people in technology go for grabbing a domain name. So if you're looking for a domain name for your startup, for your side project for something, I suggest you check out dot tech because the availability of maybe your first name, last name .TECH is likely going to be available. Fortunately, somebody already grabbed West tech, the quality of domain name is going to be good. You don't have to have any funny spelling or anything like that. And then the relevance is going to tell people that you are a technology company. So there's a whole bunch of startups that already have grabbed tech domain names that have some funding, it seems to be kind of cool that it's in the startup space dot tech domain names are starting to become really popular Avaya comm has a whole bunch of open source. And they have Viacom dot tech, I always like this when a company has a bunch of open source. And instead of having their like regular.com, forward slash open source, they just have a separate domain name for it. So via count dot tech, the consumer technology association is a technology trade association representing 290 $2 billion with a consumer debt technology at CTA dot tech, the CES every year, that huge trade show that CES tech, Intel has insight dot tech, I think it's pretty interesting that you can grab these really short memorable dot tech domain names. And I'd be really interested to see if this is the next.io that's bringing us one really kind of interesting thing we talked about .TECH dot IO domain is being really expensive dot tech domain. For syntax listeners, you get 90% off both one and five year registration. So if you want to go to get dot .TECH, which I guess they got the best domain name for their signup process, get dot .TECH. You get one year for 499 or five years for 2499 which is which is incredible. So might as well just sign up for five years and get 25 bucks go to go dot tak if this is our This is the syntax tracking link to show them that the sponsorship is working. So make sure you go to go dot tech forward slash syntax and use the code syntax to get those sweet deals. Thanks so much to tech for sponsoring. If you sign up for a dot tech domain name yourself make sure you tweet us at syntax FM, we'd love to see what you're working on with your your dot tech domain names sick so yeah, thank you. Thank - -35 -00:40:25,560 --> 00:40:36,720 -Unknown: you dad tech. Really, really cool. Next one, let's get into it is from Mark Bosque Berg. I hope that's correct. This has a j in the middle of it. He's from Denmark, I'm sorry, Mark. - -36 -00:40:36,720 --> 00:45:02,220 -Wes Bos: If we mess that one up documentation always a hassle. What are your best tips to ease up on writing documentation. I tried to write it along the way. But I need some tips and tools and extensions that might help me specifically in developing a j. s plugin at the moment and want to publish it. So the docs need to be nice. In my opinion, you'll want to start with at least the you know, the API docs like some very just core API docs you can do that I think is like .js doc as that that's a big one. If you use any of these different automated doc platforms, it's typically you write like a comment above the code. And it tells what the inputs and the outputs are, what the types are expecting that sort of thing, it will generate your ducks for you. So I know j s doc is a big one. But if you use a different one that you like it, please tweet us out of the show, because I don't have a ton of experience with these. So I would start first with the API docs and then get into some examples. Because people if they're going to be using your thing, chances are they want to see examples of how it's used in action more than so than just standard API Doc's. Now, my new favorite way of doing this is through something like code sandbox code sandbox is a, it's kind of like code pen where you can have some code up in there. And it makes it really easy to have different, like a full on project. But every single time I land on a new library that has a code sandbox in it, that shows me how to use the library, I'm so thankful because then I can just pop open the code sandbox, I can see some code in action, I can see it working in action. And I can try it and I can mess with it. So I would start with the API reference, then I would go to actual working examples in to like a code sandbox or something. And then I would go into maybe like more of an article style, like, here's some nuanced things like here's a bit of snippet, and here's maybe some text explaining it. And then from there, if you wanted to get better and better with it, you could have like a react storybook type of thing where you have like a full on visual documentation. Maybe like we see when the design system sort of just like a full on documentation page. Or you could even get into things like adding video tutorials and stuff like that. So I think there's various degrees in which you can start and then improve upon that perfect, I don't really have much experience writing documentation for my own stuff. I know that people are a big fan of things like swagger as well, which will document your API of like an express application, something like that. So check that out. Otherwise, check out Episode 73 of syntax where we do talk about some of these other things for writing documentation. We mentioned a couple different alternatives that you have there, except we have a question from Todd goats greatest of all time, what are some good questions or techniques to better understand a client's requirement? I find that many clients have a hard time describing what they want developed? And I like this question. I've talked about it a few times on here before, but I think that if you are working with a client, it's your job as a web developer to understand what it is that they want out of a website. So I see a lot of people approach clients and say, Tell me what you want, what are your what are the pages that you want? What are the functionalities that you want? How do you want to structure this thing, like, I'm helping out a friend with a website right now. And he was I went, I met up for coffee with him just to give him some advice. And he's telling me like, like, he's trying to, like, tell me exactly how he wants to have it laid out. But I was like, Don't tell me like what you want it to look like, tell me like, What is your problem that you're trying to solve. And the problem was that they had all these different pieces of content. And they needed a way to surface it to the user, because it was really confusing to the user. Like, they had all these resources and podcasts and different types of podcasts. And you need to be able to show people new stuff, but group together older stuff together. And it was kind of interesting, because I was like, just tell me what your woes are. Tell me what your problems are. And tell me what the problems are for people visiting the website and tell me what you want to be done when a user visits your website. And it's your job to know like, how does the business work? Why are people coming to the website and just like let them unload on you all of their problems. And then you can take that and you need to turn it around into solutions. Part of a developer is solving problems with technology and you give them solutions. right past that. I think questionnaires are really good because they make people start thinking about their entire website. Sometimes people will just look at a competitor's website and say I want an about page and a store page and that's it. But if you give them a questionnaire, it really gets them thinking about different pieces of their website and different ways. They get approached processes in their business. - -37 -00:45:02,310 --> 00:45:51,780 -Yeah, I think that's a great answer. The only thing I would add to it is like is to find out what sort of things they like, what kind of comparables, you know, maybe this person's been like really eyeing a specific site or design or style or whatever. And that's like a guaranteed way to sort of know what they're going to enjoy when they see yours. And maybe you can sprinkle some of that in here and there, if it's appropriate. If it's not appropriate, maybe it's time to have that talk about why it's not appropriate. But you know, for the most part, again, I think you nailed it on most of your aspects. So yeah, just maybe find out what they like and enjoy from other work, and you sprinkle some of that in there. Alright, so this next question comes from a name that we're not entirely convinced is not a troll here. And if this is your last name, I apologize ahead of time, but we googled you, and we can't find you. And we only find people with joke accounts. So this is from D, crap and shits. - -38 -00:45:51,780 --> 00:45:52,560 -Unknown: I'm - -39 -00:45:54,990 --> 00:49:57,360 -Wes Bos: sorry, Mr. Mr. Crap in sheds. Hey, do you guys have any tips for taking over maintenance and development of existing websites? Where the previous developer is no longer contactable? Do you generally try to work with and learn wherever libraries old devs use? And would there be a preference to slowly migrate to a stack that matches your strengths? I like this question. I think this is interesting thing. This is a problem that so many people have faced this is a problem that I faced especially early in my career, I'd work for an agency and as the new guy they'd sticky with the account that was nobody wanted to work on, like, oh, give the new guy this account. It's all individual HTML files, and there's hundreds of them and the CSS is barely hanging on by a thread, go to town. Good luck. And so it depends on a lot of things, my answer would be first to take time to assess the entire code base before you just start writing stuff. Because you might think things are away just at first glance, but chances are these platforms have been built on and built on and built on. And many times over, like carelessly over the time of many years, or many months, like where people just add things in here and there. And now you You are the one who's you know, looking at this and looking at this jumbled mess of stuff. And you might think, hey, that pipe over there, that's not attached to anything, it's not doing anything, let me just rip it out. And then next thing, you know, the basements flooding, so like, don't just start ripping stuff out without truly understanding what's going on. And that said, it depends on how much time you're going to be spending in this code base, and how much time it's going to take you to start refactoring things. Because if you are only going to be spending a little bit of time in this code base every once in a while sort of thing, well, maybe it's just better to sort of let it being a heaping pile of crap. And then just to work on it a little bit here and there, here, and they're here. And they're, rather than to rewrite the whole thing, let's say you rewrite the whole thing, and then you never touch it again, like you just wasted a whole bunch of your time. So I'd say you have to weigh the cost benefit analysis of doing any sort of rewrites or whatever. But maybe don't leave it worse than you found it. I guess that's the best advice. Yeah, developers are often very quick to call someone else's code base crap. And I think you have to give it a good look over is it just something a different way that you normally code because sometimes you can really learn a lot by trying to understand how did this developer approach these problems, if you can't totally understand how somebody had approached, if solving a problem, maybe it's worth taking a look. And going through that, give it an honest go try to actually go up to speed. And if you can, maybe there's something that you just don't like about how they wrote the CSS or you don't like how they approached doing that that's a perfect time to start just refactoring it, you don't necessarily always have to rewrite things from scratch, it could be a point where you just go ahead and start to refactor out some of the functions, maybe the folder structure, maybe the pipeline that you have that's compiling everything. It really just depends. And I like the way that this question was asked, because it doesn't sound like I inherited this crappy code base. It's I just can't get in touch with the guy. And there's probably no documentation. So it's hard jumping into a existing code base without anyone being able to guide you through how it all works. Yeah, yeah. Take that time. Figure out what's going on. Assess, assess what it is assess the damage, if there is any, and go from there. Cool. Well, that is our potluck episode for today. So we do one of these a month. So if you have any additional questions, head on over to syntax FM, submit your questions, we get a lot of questions. I apologize if your question has not been read on air, there's a lot of questions that go through, we try to pick the ones that we think are going to be very helpful for the audience. So like I said, you know, and sometimes will even turn your questions into full on episodes like we mentioned in the beginning of the show, so submit your questions@syntax.fm for future potluck episodes, and we hope to get to everyone's question, but again, there's just too many to get through all of them. Next part of the show is called sick picks where we give our sick pics stuff that we really like stuff that we like in all facets of life and I have a really sick sick pic today. I was instagramming about it. - -40 -00:49:57,629 --> 00:49:59,160 -Unknown: Is this is this is like this is - -41 -00:49:59,160 --> 00:50:03,630 -a an adult Sick not like adult adult but like as an adult, I'm sick. - -42 -00:50:04,020 --> 00:50:05,010 -Oh god, - -43 -00:50:05,190 --> 00:50:53,730 -Wes Bos: yes. Great. And what it is is a scrub brush that attaches to the end of a drill. So I have like the the standard the wall like drill kicks it's got a ton of power and stuff like that what this is is basically a scrub brush with an attachment that goes on into your standards or like the Is it a hex or whatever it is inside of a drill and I just used this to clean the tile in our kitchen and holy crap it is good. Like our we didn't even understand how dirty our kitchen tile was till I took this brush on a drill and just went over it and like Wow, so I'm using this thing to clean literally everything in my house that can't be scratched like the cooktop some of the walls with the paint the tile the bathrooms I'm like I turned into a cleaning wizard because instead of like what the toothbrush or another brush I just have a power drill I - -44 -00:50:53,730 --> 00:51:05,190 -Unknown: feel like a total like Tim the tool man Taylor just you know, just going nuts on these walls here so they are so stinking cheap. There was like it was like 10 to 14 bucks. There's - -45 -00:51:05,190 --> 00:55:03,360 -Wes Bos: 100 brands of these things on Amazon I'll I'll share the one that I bought. And they just like really, really made cleaning to be a lot of fun as like because I'm gonna you know, an adult child here so I need you need power tools to clean apparently but I was having a blast with it. And I was just like, like cleaning tile like oh, Courtney you have to see how good this tile looks and she's just like my god that's awesome. I actually had bought one of those A long time ago and I was looking for it like a week ago because I needed to clean or the our oven like the the window of it was getting really and I was like I need need more power. And I couldn't find it and in the massive one, which I'm for sure gonna buy that one. It's like a couple bucks. And you can just click it into your drill and go nuts on it. Yeah, more power man. Also if you if you like the sound anyway, stick pics use our Amazon referral links into syntex.fm. We post our referral links in anytime we have something we're not we're not doing this to sell you guys things. But hey, it helps the show if you use our referral links if you're interested in buying some of this stuff. So just a heads up there. All right, my sick pick is going to be the sovereign 10 watt wireless fast charger. So I finally got the new iPhone, which is the 10 x max plus whatever it's called. Yeah, the biggest baddest one that you can buy. And it's been amazing. I'm really, really enjoying it. And one thing I had never had on the phone before which I know Android people have had it for like 15 years or so is the wireless charging or you can just like lay it down on this charger and it will it will work. So I had this company sovereign reached out to me and they're like, hey, do you want to see people send me stuff all the time and I don't usually review it because it's if it's not very good or like it just feels weird to like Oh, thanks for the free thing. Let me let me know just shout it out on the podcast right? sponsorship is 1000 bucks in episode but for your $30 free thing. But this one was actually really good and I was really happy with it. So sovereign is like a company it seems to be sort of like outside either one anchor hummus. So Sabra, Sabra hummus is really good. And so the way it works is that the the lid of the hummus will charge your phone and then you can sip your pretzels in the hummus. Yeah, you're charging your phone it looks to be kind of like a bunker kind of company where they sell like chargers and stuff like that. And they they sent me this wireless one and it's been working great. The only thing I hate about it is that it's got this like ring around, it's got this light up ring and if you put it in you're like I want it to put it on my nightstand but it's just like lights up the entire and it like is constantly moving and like light it's like a Christmas tree in my that is anaka going around and around so I can't You can't put it in your anywhere that you're sleeping, which sucks. But I do have it just have it right on my desk here and just lay my phone on it every time that I have it and I did also try to convince my wife I taped it underneath a glass coffee table and it still works through the coffee table. I don't know if that's gonna set the house on fire or something like that. But we see that under their coffee table tables a couple of days ago. Yeah, yeah. So cool that you can just lay your phone down on a surface and it will charge through the glass coffee table. I'll give you a real quick tip here for wireless charging. Here's that here's a here's a tip wireless charging from an old Pro. Get a wireless charging phone dock for your car. Oh, like an art like when normal arms that sticks on your window but it plugs into the USB or cigarette holder charges or phone every time she drives Her phone's being charged wireless you just throw it in that's it's so good. I got it for Christmas and it's like low key one of those like small like Christmas gifts that makes your your daily life better forever and ever just because you never realize how much your phones and your dock and especially if he's driving to work Something man, that's great. Do you know the name of that one? - -46 -00:55:03,510 --> 00:55:05,670 -Unknown: I don't, there's a whole bunch of I can find it. - -47 -00:55:05,790 --> 00:55:38,970 -Wes Bos: Okay, maybe it will Scott will link it up in the show notes if he finds it before this episode goes goes live cuz I would definitely like to get one of those dogs for my car as well because I right now I have the one that I sic picked a bunch of episodes ago that goes into the CD player. And I've been loving that one because no one uses a CD player and the way that my car works is that it works perfectly sometimes like cars are really bad at these like vent mount ones and I have one that you can't vent mount at all. Same with like Jeeps, Jeeps have these like vents that just like spin forever, and he can't vent mount something on a Jeep like that. So though the one that CD player - -48 -00:55:41,130 --> 00:55:45,870 -Unknown: last one, so I will link to it The brand is ay ay ay t. - -49 -00:55:46,140 --> 00:55:48,060 -Wes Bos: It's one of those like, yeah, Amazon brands. - -50 -00:55:48,330 --> 00:55:57,030 -Unknown: Yeah, in fact, I think there's a whole bunch of different ones, I'll just link this one, even though it's currently unavailable it like links to a whole bunch of other ones from this page. That's - -51 -00:55:57,180 --> 00:58:29,970 -Wes Bos: really cool. Definitely going to be buying that Li Stay tuned for my full review. So that's my What about any shameless plugs, I have shameless plug which is level up tutorials, subscription services level of Pro. So if you had to level up tutorials.com forward slash Pro, you can check it out. With this subscription, you get access to a ton of tutorial series and a new one coming each month. So let me tell you, if you sign up for the year, you get access to I think there's like 23 or something, I should have this number down pat, there's like 23 something premium tutorial series that you get access to each one has like anywhere from 24 to 30 videos in it, you get access to the code, the videos, watch it offline. And if you sign up for the year, you save 25%. And then you get access to 12 additional courses that are made coming out throughout the next year. And let me tell you, I have some really exciting courses coming throughout the end of this year into next year. So if you sign up for the year, you aren't going to be disappointed, the content is just going to keep coming in, it's going to keep getting better. And you don't want to miss out on some of the stuff I got coming up. Awesome. I'm gonna pick my advanced react course. So this is the course that I've been working on for for my entire life. And it's a really big core. So it teaches you advanced react concepts using graph qL, both on the client side with something called Apollo client. Now, Apollo client is like we've talked about on the episode before but Apollo client is something it's going to fetch the data for you it's going to cache the data for you. You can do local state management as well as caching Server Data. Then we also do graph qL on the server with something called Prisma and graph qL yoga that's kind of like an express server. So all the stuff you learn in my node course will move over if you need to write any custom middlewares or custom handlers, we do the full blown authentication with JW t logging in with JW t tokens. We have a cart yeah add items to the cart you'll be able to check out we use charger stripe to charge everything to stripe by the way had a couple people ask if stripes not available in your country, you can still use a stripe test account to do the course you just can't actually deploy a real checkout website if stripes on available in your country but stripe has this thing called stripe Atlas which solves that as well. So you're good there. There's testing six hours of testing videos in there really happy about that really proud of those videos. So if you are learning to to be a better JavaScript developer if you want to learn react and graph qL building server side stuff and client side stuff, check out advanced react.com and use the coupon code syntax for 10 bucks off because I'm so so excited to get this thing launched and everybody's been have been really receptive of it. So far, the reviews so far have been amazing. Sick. - -52 -00:58:29,970 --> 00:58:35,160 -Unknown: I'm so glad that you have that released. I'm excited because then we're now we're gonna get less potluck questions being like - -53 -00:58:35,160 --> 00:59:01,020 -Wes Bos: when's the now cars stoked I'm stoked that it's finally out. So again, if you like this content on syntax, and you like our content on our channels or various things, go ahead and head over to pick up voices course subscribe to level up pro support us creating this content so we can continue to produce high quality work. We appreciate it very, very much. Thank you so much. Cool. That's it for today. We'll see you next week - -54 -00:59:01,109 --> 00:59:14,130 -Unknown: later. Please head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax87.srt b/transcripts/Syntax87.srt deleted file mode 100644 index fdec01bf9..000000000 --- a/transcripts/Syntax87.srt +++ /dev/null @@ -1,180 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,329 -Unknown: Monday Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot. Here is Sarah CUDA, Bob and Scott - -2 -00:00:23,610 --> 00:00:24,480 -Tolinksi ski. - -3 -00:00:25,829 --> 00:00:43,860 -Scott Tolinski: Oh, welcome to syntax in this Monday heastie treat. We're gonna be finishing out our old browsers fallbacks. polyfills episode series by talking about transpiling and poly filling. My name is Scott winsky. And with me as always is Wes Bos. - -4 -00:00:43,890 --> 00:00:55,650 -Wes Bos: What's up? How's everybody doing? Hopefully you're doing fine and enjoying this three parter. hasee treat? Well, I don't know, what do you call a hasty treat? That's three parts. Oh, by three course. - -5 -00:00:55,650 --> 00:00:56,790 -Scott Tolinski: a three course meal. - -6 -00:00:57,030 --> 00:02:15,330 -Wes Bos: Yeah, that's good. Hopefully you're enjoying this three course meal. Today we're gonna be talking all about transpiling and poly filling. This is mostly going to be focused on running modern JavaScript in the older browsers that don't support it. Today's episode is sponsored by view school, a few school sponsored a whole bunch of episodes so far. So obviously, it turns out that a lot of you are buying the view school course, they sponsored a couple of months ago and they had the Vue JS masterclass, which was a way to learn Vue js, you can now get the entire view school course catalog for just 12 bucks a month, that's over 160 lessons in Vue JS as well as the entire Vue JS masterclass that we talked about last time, the new lessons are published every single week, you're gonna learn best practices form validation, advanced component patterns. So many people ask me all the time, like, I know how to write JavaScript, but like, I don't know, if I'm writing good JavaScript, or if I write a lot of it, how do I make sure that it's, I'm writing it in a correct way like patterns are, are a whole nother level to learning how to code. So if you're interested in learning view, check out view school.io, four slash syntax. And as the syntax listener, you're going to get the first month, just for five bucks. It's got industry experts and core team members from view. So check it out at view school.io, forward slash syntax, and thanks so much to them for sponsoring. - -7 -00:02:15,380 --> 00:03:17,700 -Scott Tolinski: Thank you. Cool. So let's get into it. And I think we wanted to start off with a little bit of talking about I guess, in this episode, we're going to be really getting into polyfills and transpiling your code into something that modern browsers can read. So I guess, the first thing we have in here is the difference between what a polyfill is and what transpiling is now. transpiling is when you take your code, like right now we're writing our code with features that are either in modern browsers are assumed to be in modern browsers that aren't in all these other browsers. And then we run it through some sort of build process that transpilers that into JavaScript that is readable by more browsers. And in some cases, you're determining which browsers you're supporting. So maybe you're getting not all of the features are actually being transpiled. And some of them are coming through as their actual the way you're writing it. But really, it's taking code that does not essentially make sense to some browsers. And making it makes sense to all browsers by essentially changing the code to have it do the same thing with the more supported syntax. - -8 -00:03:17,730 --> 00:04:55,050 -Wes Bos: Yeah, I think it's important to note that transpiling is just for syntax. And that's what Babel does, right? If you have a VAR or sorry, if you have a const. Or let or if you have a class or you have all of the other new syntax, you have a sink await in there. That is syntax that is an addition to how the language actually looks. And if an older browser were to try to parse that it would just trip on the word and the entire JavaScript file would would be broken. The other side to that is is what's called poly filling. So that is where it's not necessarily new syntax, but it is new additions to the language, whether that's something as simple as using like the new dot scroll to in, you can take an element, you can call a method called dot scroll into view, right? That's a new thing in the browser, not all the browsers have it. But if you want to have all browsers to have it, you can get something that's called a polyfill. Same with with promises can be polyfilled. Whereas this is a perfect example. Promises can be polyfilled. Because promises is just syntax, right? You've got your capital P promise, it's just a variable that's in the window, you have your dot then methods, those are just methods that's just regular old JavaScript, you can recreate those new API's with the polyfill. Whereas a transpile something like a sink await, because the actual words a sink and await have been added to the language that is new syntax, you need to make sure you transpile it. So as a general rule of thumb Babel is for transpiling. Although they do have a little bit they do do a little bit of poly filling. And then there's some other libraries out there that will do the the poly filling for you. And we'll talk about those in just a second. - -9 -00:04:55,070 --> 00:05:57,450 -Scott Tolinski: Yeah, I like to think of poly fill is like there's like a gap right and you're filling in that gap. With something that doesn't exist in some browsers, there's just a hole here, whatever this variable is supposed to be, or this function is supposed to be in the polyfills gonna come in and fill in that gap where one particular browser doesn't actually have that information there. So yeah, so we had, what are some, like polyfills that have been used, and you have like a little back in the day section. And these are really funny, because I remember so many of these. And I don't know how many people were trying to do fonts before, we had web fonts. But it was such a tremendous pain. And there were so many different polyfills and methods to do web fonts, such as using Flash, we used to have a flash replacement that would essentially take your text, turn it into like, a SWF or whatever, and replace it so that you could have custom text and submit like, imagine running flash just for a custom. Yeah, font. And then there was also the whole coupon and I don't I actually don't know what coupon did I never used coupon myself. So - -10 -00:05:57,450 --> 00:06:06,570 -Wes Bos: did the flash thing. Oh, it took your tax and replaced it with a embedded swiff. That was your actual font. Oh my god. - -11 -00:06:06,570 --> 00:06:17,790 -Scott Tolinski: Yeah, that's the thing. That's how it worked. And everybody used it. It was great. You know what, I just used images instead. And I'm, like cringing so hard at that for all those extra images I had just for custom fonts. - -12 -00:06:19,110 --> 00:06:52,680 -Wes Bos: Another one we had was IE six didn't support PNGs that had transparency. So if you wanted to like the big thing was like used to have like a Twitter bird. And a little Twitter bird would like sit on top of the like div that had the tweets in Oh, yeah. And that Twitter bird was like I had like a transparent background. And if you open it up in iecex, it would just be white or black or something like that. So there was this hack called PNG fix, or you gave it like a one pixel transparent GIF, GIF GJ if or sorry, g i have - -13 -00:06:53,010 --> 00:06:55,920 -Scott Tolinski: both will just a piece both of the sides. I don't even - -14 -00:06:55,920 --> 00:07:12,660 -Wes Bos: know I would love to go back and see how this actually worked. But this PNG fix would basically take that transparent GIF and put it into every single pixel where the transparency should have gone. And then it actually made it work, which is crazy. See what the border? Do you remember this one border radius? Yeah, we - -15 -00:07:12,660 --> 00:07:27,810 -Scott Tolinski: used to have HTC. I don't know if this is what you're referring to. But we used to use like an image on the top that had the rounded edges and the background color and then an image on the bottom that also had the rounded edges in the background color. Is that what you're referring to in this because that's how we know rounded edges, - -16 -00:07:27,840 --> 00:09:33,390 -Wes Bos: those were the days as well, where you you would have like a one of the color, like sliding doors where you'd have nine different pieces, you'd have like a border, right? top or the bottom corner, the corners, the sides, and then the middle. That's not what I'm talking about. There used to be this thing in IE, called behavior. And you would link out to these separate dot HTC files. And that would make border radius work in I think it was IE seven, ie eight. And you would just have to I don't even know what is in this HTC file. I wish I could find it. I'm just looking around right now, I can't find it online. But that would somehow I used to have all of these little proprietary hacks that you could use to make these things work. But that was always fun, you load this HTC file are not fun at all. And yeah, so those are just like some some of the the old ones that we did back in the day. But more modern ones are things like methods like object dot entries, object keys, some of the new array methods, array dot from array.of, fetch, fetch, these are all new JavaScript API's that come default with the browser. But because of the way JavaScript works, because the way that you can modify anything in JavaScript, you can modify prototypes of built ins, if you ever hear people saying, Don't modify built ins. And what they mean by that is, if you have an array, you can actually modify the the prototype of the array so that every single array that you create could have like a like array dot Scott, and you could like if you called it, it would just replace every single one with the word Scott. Or you could just make your own methods on an array. And in general, that's bad. But the fact that we're able to do that means that we can go into older browsers that don't have dot map, or we can go into older browsers that don't have any of these new array methods. And we can backfill them, we could polyfill them with just regular JavaScript. And almost always, if you just go to MDN, Mozilla Developer Network, you'll see these new features, they'll often provide you with a little polyfill that makes it work in all of your browsers. - -17 -00:09:33,410 --> 00:10:12,240 -Scott Tolinski: Yeah, yeah, I think for me, like the most used of these is the fetch one because I use fetch on everything. And well, you want everyone to be able to access your API and just dropping in a little fetch polyfill is the easiest way to go. I actually found this really great list on modernizers GitHub, it's on github.com. I'll have the link in the course notes, but it's it's a list of HTML five cross browser polyfills and there is a tons of stuff in here. So if you're like looking for a big old list of polyfills, this thing is massive list of polyfills that exist here is pretty cool links to all of them and tells you a little bit about them. - -18 -00:10:12,290 --> 00:11:39,030 -Wes Bos: I'm just looking at the IE eight local storage, there's a polyfill. for local storage, I don't I wonder how it works. It just says this is done using a lot of different techniques that enables persistence, synchronous storage in one way or another. So that's kind of the the nice thing about it. And even when we first got webcam, there was a polyfill for the get user media API, that would just fall back to flash and you still use JavaScript to to work with it. But the API would just talk to a flash camera thing that was on the page at the time. So let's talk real quick about like, what are some of the different ways to get polyfills in it, the very basic way to get a polyfill in is just go to MDN, find the polyfill that you're looking for copy, paste it in somewhere into your application. And what that will do is it will go off into the window or into the prototype of all the built ins. And it will create these things like capital F fat or capital P promise, or it will go into array methods, or it will go into object and put a static method called entries onto it. And that's a very basic way. But likely, you're going to want to use something like core j s is a listing of all of the different polyfills. You can import them as you need them, you can use polyfill.io, which will do a browser detection. And based on what your browser's user agent is it will deliver those polyfills to you just kind of nice, you just pop a little script tag above your other scripts, and it will first load all of those before you load your other ones. - -19 -00:11:39,060 --> 00:12:28,860 -Scott Tolinski: What exactly a dream for me because like, I remember we used to talk there was like an error. I think I mentioned this on the show before but there's like an April Fool's joke one time and they're like, this is it's this magical polyfill, where all you do is include a script and it takes care of everything for you. And it had all these things that it fixed and this polyfill that IO like does everything that that joke said it did. And it's real. So I I love. I love our community, because everyone just creates things to make our lives easier. I just I transpile. And I'm aware of what things need to be polyfilled. And I polyfill them by installing via NPM. And then just including that, like one of the first things in my startup process. So I don't really I don't use any services like this. I don't have a ton of stuff to polyfill. Yeah, and yeah, that's pretty much it. I think the only thing I'm probably filling is fetch to be honest. - -20 -00:12:28,949 --> 00:13:41,760 -Wes Bos: Yeah, I will use polyfill.io on more like client like, because of my audience is web developers, I don't use it a whole lot. But I do know that other websites that I work on, I usually just put up polyfill.io in there, because like performance is not really a huge issue for us. For most people, it's going to be a.js file with nothing in it because there is no polyfills to load. And then you just have peace of mind that it will work regardless of what browser the user is using. I've also used it on my own back end, I've used polyfill.io, because I specifically use the new form data API, which is a if you're about to send a request. And you need to convert an entire form into an object to convert that form into an object. It's actually a bit of a pain. But the new form data API is a great way to get key value pairs of all of the inputs of a form. It was great, and I love it, but it wasn't available, I think on iOS 11. So it just popped in polyfill. That IO, I had to do a little adding because it doesn't come with polyfill.io by default, because that's not a that's not something that most people use. That's not something that most people are going to be using on a website. So you need to make sure that I modified my polyfill IO script tag. But once I had it in there, it just immediately started working interesting. - -21 -00:13:42,210 --> 00:14:20,940 -Scott Tolinski: Yeah, so Okay, so we talked a little bit about poly filling. Let's talk a little bit about transpiling. And I personally mostly rely on transpiling. For all my stuff. I use Babel. Well, in addition to Babel, preset envy basically allows you to determine which browsers you want to support and will compile your code into code that those browsers are going to read themselves. I do use any Babel plugins for maybe features that aren't inside of any of these things. Because I definitely I use a few Babel plugins specifically for like class properties. So I can use that whole static class properties and stuff and react. But what kind of stuff do you use? - -22 -00:14:21,000 --> 00:15:43,530 -Wes Bos: Yeah, I use the Babel preset Nv. And what that will do is it will it will check a list of browsers that you have specified and it will just say I'm supporting these browsers arm supporting node, and it will know what to transpile and what to just keep as vanilla JavaScript because at a certain point, maybe we'll never have to transpile anything, it will just all be native, right? Yeah, so I use the preset EMP. I use the class properties as well. Most people who listen to this probably won't be familiar with that. Because you're probably using something like create react app, or Gatsby or next and I know both create react app and get sorry and next have their own Babel preset that has all of the these things included for you. Because maybe I should explain a little bit more. Babel has this idea of plugins, and a plugin will transpile a specific feature. So if you have a sink away, that's a feature. If you have generators, that's a feature, if you have, what's that what's another feature class properties, classes and any part of ESX, those are all plugins. And then they're grouped together into what's called a preset. And you can have different types of preset, like you used that we used to have like a, an es six preset and things like that. But we've since moved to just preset E and V, which means Tell me what I need. These are the browsers I'm supporting. I don't want to have to figure out what I need. And what I don't need you tell me I just tell you what browsers and services I'm supporting. So those are the only ones does this Gatsby have a Babel preset for you as well? - -23 -00:15:43,860 --> 00:16:17,520 -Scott Tolinski: Yeah, let me see if it's accessible. No, if it is accessible out of the default, it might just be on the config. Yeah, I think it's just in the config here. I'm not quite sure what theirs is to be honest. But it does that allow for usage like it's the latest version of Babel. So it allows for usage like, well, at least Gatsby two, I should say, allows for things out of the box like fragments? Yep. I haven't tried to do static. I haven't tried to do class properties in Gatsby for some reason. In fact, let me even see that I have a Gatsby site open? Well, I don't know this might be too much work. Yeah, sorry. Scratch that. That's gonna say I'll just try it. But it's not up and running or anything. - -24 -00:16:17,910 --> 00:16:45,360 -Wes Bos: I'm just on their website. They say Gatsby supports default, the two latest browsers of IE nine as well as any other browser, and then it tells you to do so it looks like they just use Babel preset Nv with IE nine and up and that will just automatically pull in whatever it needs. I would be surprised if they're not using the custom properties. Because that's such a almost like a standard in the React world, even though it's not in the language just yet. Almost everybody uses a class property. So I would think they would do that. - -25 -00:16:45,390 --> 00:17:51,480 -Scott Tolinski: Yeah, I don't know where I'd be without that. I also use a plugin for react loadable as well, to make sure that my code splitting does everything it needs to be. I also use a plugin for styled components. Oh, yes, yeah, for server side rendering, essentially, and styled components. So there's like a lot of like interesting little things that you can have for your code to make your the translation of your code more aware of like what's in the code, so it can better determine or change it into something that's either more optimized or just functions better. I also should note that the latest not the latest version. But the second to last latest version of Meteor, which is what I'm running actually has a way to I mentioned this in a couple episodes now bundle based on different browsers on demand. So you don't have to transpile the code that doesn't need to be transpiled to some browsers that don't need it, saving you, j s base and all that good stuff. So there's this some really cool little features and, and how modern JavaScript is, is being read by the browser as things are being supported and whatever, because it would suck to have everything transpiled and have these larger bundles, when the browsers or some browsers are actually supporting this stuff, you know, - -26 -00:17:52,020 --> 00:19:32,910 -Wes Bos: some stuff can be polyfilled, but you need to watch out for performance. So don't always just go willy nilly grabbing a polyfill off the shelf and going ahead and using it because what is happening with these polyfills is someone is figuring out how to make it work in old browsers with the given JavaScript that we have. And like, let me give you an example of intersection observer intersection observer is a new JavaScript API that will allow you to monitor DOM elements. And when they come on screen partially or fully, or when they go off screen partially or fully, it will tell you when that happened, right. And the way that we used to do that is we just have to run like a set timeout or listen to window on scroll. And whenever someone scrolls, you check if those elements are on the page or off the page. And the reason why everyone's really excited about intersection observer is because the browser knows when your DOM nodes are on the page, because it's doing the painting, and it will be able to efficiently tell you when things are on the screen. Whereas if you're just manually checking every 20 milliseconds, or if you're checking on every scroll, you could, I'm not saying you always well, but you could run into some performance issues, where you're just overloading the scroll or, or running too much logic at once. So same thing with resize observer, there's currently only one way to know when an element is resize if when the window gets resized, or every second or so check the size of all of your elements, whereas we now resize observer will tell you when something is being resized. So just be aware of that if you are reaching for some of these other polyfills just know that they could potentially introduce some performance bottlenecks. And you should test the application on a browser where you are using the polyfill and not the native. - -27 -00:19:32,940 --> 00:20:22,850 -Scott Tolinski: Yeah. Cool. And let's talk about some stuff that can't be polyfilled because not everything you can just drop in a one liner of JavaScript and have your your everything be fixed. And you know, it's funny, because I always thought, well, I still think this but that that grid CSS Grid couldn't be polyfilled. But I on that list of the GitHub thing I found two separate grid polyfills. Now I haven't tried either of these, and I'm guessing Okay, I'm gonna go ahead and say this. Okay, this one's defunct it last commit was 2014 I saw this up And I was like, Huh, I never heard of this CSS Grid polyfill. And then it's like 2014. Oh, nevermind. Okay. So yeah, there's some things that you can't just do it in one of those. We talked about this in the last episode with CSS, like things like variables or custom properties or CSS Grid. Unfortunately, you'll you will have to write your own custom fallbacks for those rather than just throwing in a JavaScript. - -28 -00:20:22,920 --> 00:21:15,590 -Wes Bos: Yeah, a lot of the CSS stuff cannot be we talked about this last episode, it cannot be polyfilled. Even when there is a polyfill, they're doing some funky stuff with absolute positioning. Because this is lower level, whereas JavaScript will happen in the browser, you do get access to be able to at least recreate the logic that's that's happening there. Other things device access can't always be mimicked something like a geolocation, sometimes you can fall back to like an API that will use the IP address to find the geolocation inline video on old iOS. So it's, it's been a couple iOS has now that we've had this plays in line attribute you can put on a video, and as long as it's muted, you can autoplay it as well, that can't be because old iOS only lets you play video if you kick them off to the external player. So there is no solution to that I ServiceWorker. I actually don't know, is this true? There's no polyfill for serviceworkers back, - -29 -00:21:15,660 --> 00:21:16,380 -Scott Tolinski: I haven't tried. - -30 -00:21:16,580 --> 00:21:38,640 -Wes Bos: I was talking with someone on Twitter the other day, and they said, Can I put templates in local storage? And I said, Sure, but like, what are you doing? And he said, like, Okay, I need to like, I need this to work offline. And I need to store them somewhere. And I was like, well use a ServiceWorker. for that. That's what it's for. I said, Oh, I'm supporting older browsers, and I can't get the ServiceWorker working. I'm going to look now - -31 -00:21:38,700 --> 00:21:44,250 -Scott Tolinski: I see something about it on developer.mozilla.org. - -32 -00:21:44,310 --> 00:21:50,850 -Wes Bos: I don't the cache API is not supported in every browser use Google's to pekah demo. Yeah. I - -33 -00:21:50,850 --> 00:21:52,200 -Scott Tolinski: have not heard of Topeka. - -34 -00:21:52,380 --> 00:22:32,070 -Wes Bos: I don't know. Yeah, yeah, I know. I'm I'm so if you if you've if you've worked on a ServiceWorker where on older browsers tweet us at syntax FM, I'm sure we could figure it out here. But we're not gonna stick around and do too much research. Let us know your real world experience with it. Because sometimes it's as quick like Google is there a polyfill available. And it's it looks like there is but once you get into the nitty gritty of it, it doesn't work so well, or it doesn't work as you had hoped. So usually, what I like to do is I'll put the word out to Twitter, and you get people who have actually built a project with it and say, it was great, or Yeah, it works. Okay, but watch out for X, Y, and Z. - -35 -00:22:32,160 --> 00:22:37,890 -Scott Tolinski: Nice. Cool. Well, that's pretty much all I have. I don't know you have any additional polyfills and transparent? No, I, - -36 -00:22:38,130 --> 00:22:48,780 -Wes Bos: I think that's it. I think the I think the reason why we have such a good uptake of JavaScript is because of things like Babel, or do you remember when it used to be called 625? Yeah, 6258. - -37 -00:22:48,780 --> 00:22:49,560 -Scott Tolinski: Yeah, - -38 -00:22:49,560 --> 00:22:50,310 -Unknown: yeah. Can - -39 -00:22:50,310 --> 00:23:05,520 -Scott Tolinski: we just give a big, big round of applause everyone, if you're, if you're except for if you're driving, if you're driving, don't do this, just start clapping wherever you are for the Babel team, because everyone who commits and works on Babel is just a brilliant, brilliant human being. So thank you so much for the boundary. - -40 -00:23:05,520 --> 00:23:34,950 -Wes Bos: Oh, yeah, like the amount of amazing stuff that Babel has done for JavaScript. Because if Babel did not exist, we really wouldn't be able to like we'd be sitting on our hands and being like, oh, can't wait to us. Yeah, can't wait for promises. And like, we will be so far behind for this kind of stuff. And it's pretty amazing. something new comes out in JavaScript, you flip on a Babel plugin, and you're using it and you can still support older browsers. So it's pretty amazing that that it works like that. - -41 -00:23:35,130 --> 00:24:08,700 -Scott Tolinski: Yeah, I know it is. It's a dream compared to where we were in the past. So yeah, huge, huge fan. Again, unless you're driving, give them a round of applause. Thank them on Twitter, or whatever, but appreciate it all the hard work. So that's it for me. I don't have anything else here. Yeah, I think that's it. That wraps up this week's hasty treat. on a Wednesday, we're going to be talking all about a checklist for browser launching for when you're launching your application, we're going to be giving you all of our tips and tricks for stuff that you need to make sure you do before you launch something. - -42 -00:24:08,760 --> 00:24:26,940 -Wes Bos: And Scott and I are also just about to get on a plane in about a week. Yeah. And we're heading off to San Francisco for jamstack cough by the time you listen to this, it will be over but just a heads up that we are going to have a live episode out pretty soon, which would be really fun. And Scott and I are going to be meeting each other for the first time. - -43 -00:24:28,860 --> 00:24:37,470 -Scott Tolinski: Nice. Yeah, you'll get to hear that too. Because that's also we're recording the episode live so it will be on the normal stream as a normal episode for those of you can't make it to San Francisco. - -44 -00:24:37,650 --> 00:24:40,170 -Wes Bos: All right, that's it see on Wednesday, boos bass, - -45 -00:24:42,120 --> 00:24:51,930 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax88.srt b/transcripts/Syntax88.srt deleted file mode 100644 index dc599624b..000000000 --- a/transcripts/Syntax88.srt +++ /dev/null @@ -1,448 +0,0 @@ -1 -00:00:01,319 --> 00:00:06,480 -Unknown: You're listening to syntax podcast with the tastiest web development treats out there. strap yourself - -2 -00:00:06,480 --> 00:00:09,600 -in and get ready to live ski and West - -3 -00:00:09,600 --> 00:00:10,530 -boss. - -4 -00:00:10,530 --> 00:00:18,090 -Wes Bos: Welcome to syntax. My name is Wes Bos, I'm a full stack developer with me as always is Scott to Lynskey. How you doing today, Scott? Hey, - -5 -00:00:18,090 --> 00:00:23,250 -Scott Tolinski: I'm doing super good. Ready to get started on this episode here. It's a lovely Monday morning. - -6 -00:00:23,339 --> 00:01:07,200 -Wes Bos: Yeah, I'm excited about it too, I just went through obviously went through a huge launch with my advanced react course. And we should talk about what we're talking about. We are doing sort of like a pre launch checklist, website. These are things that you should check before you push a website live to the world. And this is mostly from experience with things that I've dropped the ball on myself many times over. Today's sponsor is two awesome companies. First one is Sentry, which is going to help you track down all of those errors both on your client side and your server side as well as dot tech domain names, which is going to allow you to find a decent domain name with a dot tech extension. So the way that we sort of structured This episode is we're just gonna sort of run through all the little things that you should try to figure out before or check yourself before you go live. So - -7 -00:01:07,200 --> 00:01:13,200 -Scott Tolinski: we're looking at person performance stuff, some you shouldn't you miss an opportunity for check yourself before you wreck yourself. - -8 -00:01:15,720 --> 00:01:44,580 -Wes Bos: Wow, that's good. What else we've got some tips from the trenches compatibility, content, accessibility, SEO, analytics server stuff, you should check yourself different company processes, there's a whole bunch of stuff that you should be checking before you actually launch a website. And it's easy to accidentally forget about some of these things, or it's easy to have these things where it looks works fine on my machine, and you're not actually thinking about the broader world. We're gonna be going through all of those. You want to kick her off there, Scott? - -9 -00:01:44,580 --> 00:02:06,960 -Scott Tolinski: Yeah, let's do it. I think a good overall tip for this stuff is to let some robots do some work for you. Because we have some of these auditing tools that exist both on individual websites along with in browser extensions and stuff like take advantage of these tools. Like lighthouse, I think is lighthouse is built in to Chrome, I think you can - -10 -00:02:06,990 --> 00:02:08,280 -Wes Bos: use Chrome Dev Tools. - -11 -00:02:08,280 --> 00:02:54,360 -Scott Tolinski: Yeah. and run it on mine as well. I think it's under the audit tab. Right? Yeah, yeah. And so you'll want to take advantage of those things. There's SEO checkers, there's like a billion SEO checkers that although make sure that your your SEO content and all that stuff is as it should be. And then you know, you have accessibility checkers as well, both built into lighthouse. But there's also acts outside of lighthouse. But really the the overarching point is these things are going to give you a checklist essentially, of things that you haven't done, it's going to alert you when there's things that you haven't haven't done. So overall, if you're feeling like, Oh, I don't know what to look at next, go and hit up some of these tools, specifically lighthouse and just go through some of the things that it's letting you know that you still need to do because I think that's an easy, easy, super easy win right there. - -12 -00:02:54,509 --> 00:05:05,570 -Wes Bos: Next one we have is performance. This is really important because often we're just developing websites locally on our computer, and they load instantly because everything is local to our computer, right. But as soon as you put that sucker up online, you start to get people complaining about performance, maybe the websites loading really slowly, maybe forgot to I see this all the time, especially in like bootcamp students, where they don't necessarily know that their website's going to be slow to load. And they have like a six Meg header, JPEG that needs to load before anything looks decent. So either flipping on the slow performance tools in your Chrome Dev Tools, or just putting it up online and trying to load it from without any sort of cache installed yourself. And that will often arise little performance issues, as well as little things where Oh, maybe the first time it loads, it doesn't actually work. And the second time around, does actually work. So what can you do for that what I do every single time before I launch a website is I'll open up Chrome Dev Tools, I'll go to the Media tab, and I'll do a hard refresh of the website. And then I'll look at all of the assets and I'll look at like the top like 12% and say like that's way too big for an image or that PNG should be a JPEG or this mp4. I often have autoplaying. mp4 on my course website. Those shouldn't be loaded on page load, they should only be loaded, like after the page is actually like, like lazy loaded in or only when someone scrolls to it or only when someone clicks on to it. So how can you do that build processes, you can have something built right into it that will compress all of your images. You can use something like cloudinary which will you just put a little URL in front of it or upload your images to cloudinary image optim is another really good free one. What's that one that I always use with with my Gulp tasks that will compress my images? Oh, I don't remember Yeah, image min. Image min. Image min. Min. is awesome. So if you haven't used image min before, you can use it with golf or Webpack or anything like that. And you can just kind of suck up all of your images. And then it will pipe them through all of the different like mas JPEG is a really good one for JPEGs SVG Oh is a good one for SVG files. There's a good PNG one. I know it just kind of sort of crank down the compression on all of those Images and it's worth sending all of your stuff through one of those, if you're not using a service, - -13 -00:05:05,610 --> 00:06:15,540 -Scott Tolinski: yeah, that already does it for you the additional compressing to make sure that the sizes are correct. If you're not using like a picture fill to serve up the correct sizes for the correct browser sizes. If you're throwing up a image, it's 2000 pixels wide, or something like that. Don't do that, like the biggest mistakes I see like occur very frequently is people just don't pay attention to the size of images. So if you're not using something like cloudinary, that's going to automatically give you the correct sizes, or you're not using a picture fill to host several different sizes, the largest size, whatever you're hosting, just make sure it's reasonable. I remember that was maybe the first mistake that I launched with when I was like maybe my very first site project, like very first site project is just like, oh, you just link up an image. And there it is. Okay, never think about it ever again. And this was way back in like, way, way, way, way, way back. And somebody was just like, Oh, you know, Dreamweaver has a button built in, you just click it and it makes the image the right size. Oh, cool. Cool. Man. That was my first experience with like, loading up a giant, giant image. On my very first website, you know, I just didn't even think about it. So that's an easy one to do when you're a new developer. - -14 -00:06:15,720 --> 00:07:32,310 -Wes Bos: Totally. There's another one of these image processing companies image IX, I met them. I was at fitc conference and they had a booth there. And as I do at conferences, I always go around and get all the swag from the guys. I need more stickers and pens. Yeah. And I was just just chatting with it. And it seems like they do kind of a similar thing to cloudinary does where you can compress your images on the fly with it with an API call. I haven't used them yet. I don't know if it's any good or not. But I just thought I'd mentioned that if people are looking for options. So there's lots of good options there. Just make sure that you compress everything as small as you possibly can. Especially if you're a developer on like a fiber line where everything works fine for you. But it can be pretty expensive on especially if someone's on like a cell phone and you like someone loads the page. They have no idea how big that page is going to be until they've actually loaded it. And in Canada, if you go over your like your budget, I think it's like per, I think it's like $20 per 100. Meg's Yeah, so like, like, yeah, easy, easy. You can accidentally do 2025 Meg's if you don't compress your images on a website, obviously way too large. But like, I've definitely seen websites that do that. And so like that just cost someone five bucks to load your website. That's he had to be really careful about that. Yeah, - -15 -00:07:32,340 --> 00:07:34,380 -Scott Tolinski: yeah, definitely. It's like irresponsible. - -16 -00:07:34,440 --> 00:08:35,309 -Wes Bos: Yeah, one other things to do, obviously, minify your code. So whether you're running that through uglify, or any of these other things that will minify your JavaScript as well as your CSS, what else you got here code splitting, that's probably something you should be thinking about when you're designing the architecture of your application. So if there's a hunk of code, I was your shopping cart example, if you don't need to load that until someone hovers over a Buy button or someone visits the shopping cart button, then then load that thing in PageSpeed, the Google Page Speed Test is also another really good one, that one I really like because it will often surface different like caching settings on your server that you don't necessarily know about. And those are often like a quick copy paste from Stack Overflow in your ht access or something like that, to get them going. And then the last one we have here is don't service worker on launch. Actually don't run service workers on my own website, I kind of feel like I should, especially on like the back end, my dream would be to service worker, the videos and everything I've talked about this, if you go back to the what's episode we did on like web apps or something like that - -17 -00:08:35,310 --> 00:08:37,019 -Scott Tolinski: i progressive web apps, that was - -18 -00:08:37,039 --> 00:09:41,940 -Wes Bos: Episode 50. On progressive web apps, we talked about what service workers are and whatnot. But the thing about service workers is that you can cache your entire page or just parts of it, but most people just cache the entire page. And then when someone visits that website, again, it will serve up the cached version immediately. And then in the background, it will go and check if there's a new service worker available. And that can be a bit of a pain. If you are making quick changes, like often I'll launch and I'll notice a little spelling mistake, or I'm getting lots and lots of the same questions. So I'll quickly read a play a fix for that. And that would have to require somebody to manually reload the page again, provided that you actually in the background, were invalidating the old cache in your ServiceWorker. Because that's how service workers work is that when you load the page, that's a cached version, it will in the background check if there's a new ServiceWorker available, like an updated version, and in that new ServiceWorker, you have to then manually invalidate all of the old files, and then pop up some sort of alert box or something. Or you can do window dot location dot reload to actually manually reload the page. But that's kind of a pain to your user. - -19 -00:09:42,000 --> 00:10:01,980 -Scott Tolinski: Yeah, definitely makes more sense. And like an application style, like, like to do is store Tweet Deck or some of those that are like, would you like to run the new version of this application? Like that? Yeah, seems very different to me than like a website, you know. So I guess the next thing we have on the list is Oh, actually, before we get to Next, I do Want to talk with one thing about code splitting to? - -20 -00:10:01,980 --> 00:10:02,669 -Wes Bos: Like, - -21 -00:10:02,669 --> 00:10:20,029 -Scott Tolinski: I don't know, I was thinking about like code splitting and how awesome it is. But wouldn't it be great if you just didn't have to do any of that yourself? Like, if you didn't have to determine when it code splitting? It just did it all for you. Like, that would be great. It just, uh, it doesn't do it. There's no, there's I'm not I don't have like something to present to you. That's man. - -22 -00:10:20,730 --> 00:10:26,010 -Wes Bos: I thought you were trying to transfer it to an ad or something. I was like, What are you doing? Yeah, - -23 -00:10:26,549 --> 00:10:27,750 -Unknown: no, no, I was just, - -24 -00:10:27,750 --> 00:10:35,850 -Scott Tolinski: I was just pontificating over here a little bit about a world where everything splits for you. And it only loads where it has to and all that good stuff. So - -25 -00:10:36,020 --> 00:10:49,950 -Wes Bos: no, it is good. splitting the bill with Freshbooks. Yeah. No, that would be cool. It what you can do, obviously, you have to use dynamic imports. Right? And then you have to import that thing at the top. React suspense will help with that, actually. Yeah, - -26 -00:10:49,980 --> 00:10:50,520 -Scott Tolinski: yes, - -27 -00:10:50,520 --> 00:11:19,679 -Wes Bos: I'm excited because you just kind of will have a show on react suspense, kind of help that but yeah, it would be neat. If it just kind of figured it out all for you. It's much better than it used to be you used to have to like, set up manual code bundles be like, Okay, my cart goes in this one and this one. And now if you just use dynamic imports, your bundle tool will be able to figure out how to actually split it up. But you still have to figure out yourself, where should I be using a dynamic import? And where should I be using a regular import? What's a regular import called static? - -28 -00:11:19,740 --> 00:11:21,299 -Scott Tolinski: Just a II? - -29 -00:11:22,020 --> 00:11:22,890 -Wes Bos: Guess normal? - -30 -00:11:23,100 --> 00:13:31,049 -Scott Tolinski: Yeah, Allah. Yeah, import? Yeah, I use that pretty much for the same way you said, where I have my shopping cart, any of those libraries behind a dynamic import, and what react loadable. And you can get all great grade server side rendering and all that stuff with it, too. So next, we want to get into compatibility, which is one thing that we've been touching on in the hasty treats for the past few episodes. browser compatibility is maybe not something you want to leave entirely for the end. But it's definitely something that you need to check at the end of the line here before you're launching, because maybe even you, you deployed a change, and it had a small little thing in it. And maybe that library or whatever you added all of a sudden has some sort of begin compatibility. So you do want to, you do want to test pretty heavy on actual browsers that need to be supported. We used to have various machines in the office to test on older browsers or something like that, I think it is important to fire it up on an ie ie, you know, 11, or I 10, or whatever you're supporting at that time, and Edge browser or Safari, whatever just fired up, make sure everything's works, make sure everything's looking fine, there's always going to be one or two little things that you could not prepare for. Even if you feel like you have a great grasp on compatibility, there's just your brain just isn't always going to have 100% coverage on all of the compatibility issues. I also like to have if you have like a staging environment, that's somewhat public, I like to have other people use it on their phones, I'll frequently ask my wife Courtney to try it out on her phone before I go up in my staging environment, say, Hey, can you just fire this up and make sure everything feels fine to you. And then she'll just try it out. And you know, she's a normal user. So she's going to try it out as if a normal user is and she's not going to know where to press and what to do. And everything's going to feel a little bit different for her. So having her test out, the compatibility in those sort of ways is a big help. So if you can find someone in your office that's maybe not like, the most tech savvy person, or maybe not the developer, or someone who's had their hand in their code, and just ask them to use it on whatever browser they have on their phone, or whatever, that's good. You can also use a service like browser stack. I don't use browser stack myself. I know you don't either. Wes, is that correct? - -31 -00:13:31,200 --> 00:13:50,370 -Wes Bos: I've definitely used it in the past. It's kind of expensive. So what I've done maybe six or seven times in the past, as I've just like, dipped in for a month, done my work and then cancelled my subscription. Yeah, just when I specifically need it. But I'd much rather like we've talked about in the AC trees, much rather have the hardware or VM of the actual browser or the real device in hand. - -32 -00:13:50,460 --> 00:14:06,149 -Scott Tolinski: Yeah. So browser stack is a service that allows you to test your stuff on 2000 plus browsers and Android to iOS and Android devices. So you know, check that out. If you're looking for more of like a service as a solution there for compatibility testing. - -33 -00:14:06,299 --> 00:15:48,779 -Wes Bos: One other thing I've run into is just ratios. So I have my checkout form. And I had tested it. And I always use like, I almost always just use media queries that are based on the width, right. But I ran into some situation where if people on like 11 inch MacBook Airs, their screens are like wide and not as tall. And I was running into a situation where there was like, maybe, like 50 pixels of screen sizes where you couldn't press the actual Buy button on the checkout form. And it was because I had not been testing it on. I just been testing it on width, right. And I also checked, I also tested it on heights, but there was like a, like a golden ratio of width and height where Mirman wasn't working. Luckily, the developers like By the way, I just used inspect element and figured it out. Yeah, and I press the button myself, met a developer go back and fix it. Other thing is busting caches. So if you have a style that CSS another problem I had on my advanced reactors, I had like a sale banner at the top. And then I have a login button on top right corner. And I had some CSS to say if there's a sale button, if there's a sale banner and a login button that are siblings, then you can then move the button down or so. So it's not there. But something went wrong with it, I had one or two lines of CSS, and I fixed it. But then everyone has the old cached version of yours, your CSS. So I just go my way of busting caches, I just put a little query parameter on the end of CSS, just Question Mark V equals 27. And then that will signal to the browser that it's an old, there's a new version of CSS available because of query parameters, a new URL, and then it will just delete the old one, download the new version of it. - -34 -00:15:48,899 --> 00:15:51,630 -Scott Tolinski: Nice West boss bust in cache - -35 -00:15:51,659 --> 00:15:55,950 -Wes Bos: busting caches. Yeah. nashim busting cache. - -36 -00:15:59,640 --> 00:17:05,059 -Scott Tolinski: So next, we have a one that it says this is something that we both definitely run into this more so than a lot of other maybe sites because we both running ecommerce platforms. And if you're running into things with sales, where you're taking credit cards and charging, this is actually one of those things that is a little scary. I think in terms of going live, if there's one thing that I manually test more than anything on my site, it's the checkout, I make sure that the subscription form works and I make sure that the credit card checkout works. And I do so very, very intensely. So there's one thing that I really test is to make sure that my checkout flow is working correctly. And this one is sort of interesting. I think different platforms between stripe, Braintree, PayPal or whatever they all make it a varying degrees easy to test these things. I think stripe makes sales the easiest to test, Braintree probably makes them not so easy to test. And then I know from experience from subscriptions stripe does not make testing subscription super easy. Oddly enough, where Braintree actually makes it way easier. So what are some things that you think are important before dealing with credit cards and things like that. - -37 -00:17:05,089 --> 00:19:21,540 -Wes Bos: This is just from personal experiences. First one is have multiple people test the checkout. Like one story, I think I've told us on the podcast before but when I launched one of my courses way back a couple years ago, I had installed this node package that would charge PayPal, it was like a third party node package. I know I complain a lot about PayPal. But this is not people's problem. And I did an npm install. And then I deployed it to my server. And this was before we had the NPM package lock. Or you could specify exact versions of NPM package. And what had happened is the author had released a new version of the package, but didn't understand how the new let let and const variables were scoped. So what was happening is that everybody who on the server, everyone was using the same PayPal checkout token, and people are getting this error like this token has already been used, because of the way that the variables were being scoped. And I was like, what is going on with this thing, it works fine locally. And it was because between me installing it locally and working it and pushing it up to my server and NPM, installing it, there had been a new version of this package, just a minor version bump, and that had introduced and I found this out by going through the GitHub commits and seeing the changes that had been introduced. And so I quickly just like just jumped into my node modules folder, and just like monkey patched it really quickly, and then send a pull request to the actual repo and how to fix but that's just like a perfect example of like, and that's everyone's horror of using all of these third party packages, where you just like use the kind of a, you know, just give me the latest version of the little Tilda that I'm using or the little little carrot in my NPM packages, somebody could actually introduce a breaking change into your code. But that's been since solved with the package lock, that's what package lock will do is we'll make sure that you're using the exact version all the way down through the dependency tree. That's one problem I've run into the other one is make sure that the name of what shows up on people's credit card bills is that they know it. So a big problem that I have is people open their credit card bill like a week or two after buying and they say like what is my company name is boss type Inc. What is boss type Inc. And it's either somebody from accounting in the company, or it's a spouse of the person who shares a credit card with it. And unfortunately, sometimes they'll just dispute it because they have no idea what that is. Right? I think - -38 -00:19:21,540 --> 00:19:25,800 -Scott Tolinski: you're a typography company. Yeah. So slang and fonts. - -39 -00:19:26,880 --> 00:19:40,100 -Wes Bos: No, the reason why it's called boss type is because my wife is actually a print designer, which has type and I'm a programmer, which also has types name his boss like that. I do. So they both have types and - -40 -00:19:40,499 --> 00:19:43,260 -Scott Tolinski: careers. It's illuminating. Yeah, I finally get it now. - -41 -00:19:44,300 --> 00:20:37,500 -Wes Bos: There you go. Anyways, I don't put that on people's credit card bills anymore. I think it shows up as Wes Bos slash react or Wes Bos slash the actual course that they're working on. Somebody actually showed me that a photo of me now shows up on some banking websites, which is hilarious. They know. And the other thing we did is if it does show boss type, we also have our phone numbers listed on that. We just have a simple boss type comm website, we threw up like four or five years ago when we made the corporation and then that just has quick phone number all the time I get cards, hey, I'm in accounting from company XYZ, what do you do your developer probably bought something? Oh, yeah, no problem. I'll follow up with them. And then they hang up. And that that stops a lot of unnecessary chargebacks. Because it's a pain. If someone accidentally chargeback something, you get charged 15 bucks, and it goes in for review. And then you have to contact the person. They have to contact their bank and have it revoked and it's just a nightmare. - -42 -00:20:37,610 --> 00:21:30,930 -Scott Tolinski: Yeah, absolutely. I know, whenever I get an email that says a chargeback, I'm like, oh, what do I do now? Okay. So okay, so we got sales and credit cards. So I mentioned that this is something that I personally test very intensely, because it's a key component to my business. And most of the things that are key components to my business, I really make sure that I have a handle on the errors, and sort of the things that are coming up when people are actually using the sites. And that's one of the reasons why I use Sentry, personally, to actually make sure that if something's happening on the live site, that I did not plan for that I'm not only alerted, but I have a catalogue of it. I know who and what browser is happening to them on and I can really catalog these and file issues and get these issues taken care of. So century@sentry.io is one of the essential parts of my workflow. And I know Wes, you use Sentry yourself. - -43 -00:21:30,960 --> 00:23:12,570 -Wes Bos: Yeah, that's when I launch a course you better bet that I actually have Sentry open, because it's the first time that lots of people are in production are going to be going through likely a new codebase. And that's where you often run into a bunch of issues. So I'll sort of keep my eyes on Sentry, I'm about to launch a big update to my player, as well as a big update to the back end management. And when I push that code, I'll be watching my Sentry dashboard to see any errors that will pop up any any commonalities between them. I've mentioned before in the past that I've been quickly been able to figure out there is an error on this specific version of iOS only on an iPad, and I was able to find that bug and be able to fix it. So Sentry is awesome, just because you don't have to worry about your users telling you there's an error like we joke it's nice to have developers as an audience. But most people don't have web developers, that audience or web developers might not might not even care to let you know something's gone wrong. Look, close the tab and move along with your life, you just lost the sale. Right? So sign up for century error tracking, I haven't installed both on my client side that catches all the JavaScript in the browser have installed on my server side, no handy handle any says that any errors actually happened on my server, you can get two months free essentially does have a free plan that you can sign up for, but you're gonna get an upgraded plan. So if you go over in the free plan, you sometimes will go over the amount of alerts that you can add, especially if you write terrible code like I do. So you can get two months free@sentry.io using the coupon code, tasty treat. And that's for anyone, not just new users. So if you have an existing account, you can still take advantage of that the coupon code is tasty treat all one word. So thanks so much to centuries for sponsoring. - -44 -00:23:12,630 --> 00:23:29,970 -Scott Tolinski: Thank you. Yeah, again, it is so key that if you launch and you have a bunch of errors that you at least can determine where those errors are coming from and how to solve them. Because there's nothing worse than getting those reports. It's not working. And you're like, oh, but it is working. No, it's not working. Oh, what am I often - -45 -00:23:30,000 --> 00:23:55,860 -Wes Bos: even amazed at developers who email me saying it doesn't work, or there's an error? Or Yes, yeah, it's the worst says it's glitchy. Like, what is glitchy? What does that mean? More like, what browser are you using? Like? Are you not a web developer? Do you not know that people need more information to solve it? Like if you just tell me it's not working? I go Oh, sorry. Let me turn the working. Switch back on. I had tripped over that. - -46 -00:23:55,890 --> 00:24:29,370 -Scott Tolinski: Yeah, I hit somebody that was using it as I was like a hostage for like a hostage situation for a free account. They were like, do you have bug on your site? I was just like, Okay, can you can you tell me what what this is? Or like, what the idea is here, and they're just like, if you give me a free subscription, I will tell you what the bug is. Uh, I don't know how to even address that because like, I chances are if you would have just told me what the bug is, I would have been you know, grateful and I probably would have hooked you up but the fact that you're like holding it hostage is like not the right idea. That's Yeah, - -47 -00:24:29,370 --> 00:24:36,330 -Wes Bos: no, that's not cool at all. There's there's definitely like way better ways to get in good with somebody than - -48 -00:24:38,220 --> 00:24:53,250 -Scott Tolinski: at Haas actually got it out of them too. And it was like it was something that was by design. It was like not even a bug and I was just like, come on, like this is Oh, yeah, yeah, it was weak. Okay, so next we have, Sir, did you want to do this tip from the trenches now or do you want to do moving on? - -49 -00:24:53,280 --> 00:24:56,520 -Wes Bos: Yeah, let's do it. Now. I think it's interesting to put it in them in the middle. - -50 -00:24:56,700 --> 00:25:52,050 -Scott Tolinski: Okay, so next we have something that we're calling tips from the trenches. Which is just some generic some sort of interesting things. There's sort of like all over the place about just things that we've run into personally, or maybe not personally, but you know, others have. And one of these things that I think is extremely important, this isn't necessarily anything I've had a problem with. But you'll want to make sure that your API endpoints are totally secured, you do hear horror stories of people launching, and they think that no one's going to backwards engineer, reverse engineer their API or something like that. Yeah, people will, people will try to do anything. So make sure your API endpoints are secured, make sure that you only have access, the people who need access and whatever get access, and no one else does. So double check your API endpoints. If you're working on a server side application, or a full set full stack application, client side validation is not enough, it is certainly not enough. - -51 -00:25:52,110 --> 00:26:54,570 -Wes Bos: No other things scale up your box, just in case. So if you're using a hosting platform, I specifically am currently on Digital Ocean. And I was on their $5 plan for a long time. And the thing that kills me and the $5 plan is is works fine in almost all day long. Except when I use my email list and DDoS myself by sending many like, like 7000 people to the website at one time. So just scale it up, you can always scale it back down when you need it. But if you're I know that a lot of services will auto scale, that's even better. I'm looking at moving over to something like that. But just so you don't actually have anything fall over on you and just be safe, spend an extra 20 bucks a month to scale it up. And then you can scale down if you need it. Other things I've done in the past early access my my advanced react course I put up for early access about three weeks before I actually launched it. And then the way that I did it was that I just told people click soon 30 times. So it was the it just said coming soon. And you could click the word soon 30 times and then it would pop open a button to buy it. - -52 -00:26:54,600 --> 00:27:04,950 -Scott Tolinski: I think I clicked it like a couple hundred times when you told me that and it just kept going. I was like, Oh lucea limit and I just kept going and it filled the screen with a hose. And then I was just like, Ha, yeah, stop. - -53 -00:27:05,490 --> 00:28:10,170 -Wes Bos: The cool thing about that is I've just posted it in my slack room. And I said don't tell anyone how to get access to it. Because if they don't read this message, I don't want them testing my course. And it was the best because people all day long. We're like it doesn't get access to it. It just says coming soon. And they're like, Did you not read the three sentences I posted, then it's not for you because you can't follow some simple directions. And then I also had people a lot of people view source and find the code and read through the code and figure out how to Oh, this is what the code does. Let me now go ahead and and that for sure. I want you testing my course you've great attention to detail. So it's kind of a nice way to go about it. And then the night before I launch, I just push it live. And what's what's nice about that is that it's just Australians, I'm pretty sure that's all who's awake Australians and Russians on the website, and then you wake up in the morning with a couple sales because people have found people are just checking the website, we're looking for it to go up, as well as you sort of soft launch it and then wake up to three or four emails of little bugs here and there that you haven't caught. Yeah, it's helpful to see that - -54 -00:28:10,260 --> 00:29:24,660 -Scott Tolinski: this might be a surprise to some level of pro subscribers or even people on the level up tutorials, subscription. But I typically am launching my courses quite a bit before I announce that I've launched them, because I want to launch them. And I want the subscribers who just see it up there, right? I want them to test it out and run everything. And then if I don't want my users to obviously test the thing. So things are going to be working when they're up. But let's say there's something catastrophic going on, then that way, I didn't just blast out to all of my followers and everyone else that you know, this thing is up and going and then have a whole bunch of people coming there at once when there's a thing and then maybe they won't ever come back. Right. So again, I like the soft launch. I like launching and then maybe not necessarily announcing it until you know for sure that everything is 100% feeling all right and looking good. Another one I have is make sure your URLs are accurately coded. Sometimes people in the flow of things will just put a URL into their site or maybe it's like a WordPress site where the URLs are like written from the database. But occasionally you'll see that situation where you'll have a localhost forward slash images forward slash Scott dot png and maybe your server is currently running on your local host at that moment you'll - -55 -00:29:24,660 --> 00:29:25,860 -Wes Bos: your local servers. - -56 -00:29:25,890 --> 00:29:49,440 -Scott Tolinski: Yeah, and so you're like well, it looks fine on my machine. All the images are loading and then someone else somewhere else who doesn't have a localhost 3000 running with your images. They're like, what the heck is this all the images are broken. So make sure your your URLs for your images are written correctly. Obviously, don't use any sort of local or staging or whatever environment you want those coded correctly so that it's pulling the actual full path, full route URL to your site. - -57 -00:29:49,650 --> 00:31:18,860 -Wes Bos: Other things is just keep your eye on your email. I've had people like when you launch something people always try to reverse engineer figure out how it works. I had somebody figure out that my free course says that he could change the course code of the free course and get access to my paid courses, which was amazing. And I was like, oh, man, it's amazing. I actually ended up paying out that guy, some cash because of that report that could have costed me a tons of that got out because people could have been signing up for my paid courses all day long. Mm hmm. So keeping your eye on your email when stuff like that keeping your Twitter, I have my Twitter DMS open all the time, which is probably not a great idea, because I get a lot. But when I launched something, I always keep my eye on it just in case, because people will often say, hey, something's wrong. And I really appreciate that. I appreciate that. Because nothing is worse than launching something. And all of the replies to your launch tweet being, hey, this doesn't work. It's broken. Is this funny? Looks like you're missing this. And it's like, Oh, thanks. I just spent my last nine months on this. And now all of the replies because I also pin those tweets to my profile. I want all of the tweet replies to be common questions, or people reviewing it, things like that. And that Yeah, high praise. Yeah, I want it to be good things, right. So one little way around, that is just not replying to replying to them out of the thread, so that they don't get bumped up in the tweet reply way. So that's my little, little way around that. But it always is such a bummer when you're you launch something and all of the replies are like you're missing. You're missing an L in the word cool. hear somebody like? - -58 -00:31:20,490 --> 00:31:57,720 -Scott Tolinski: Yeah, and you will hear about those. That's for sure. And I get that. Yeah, just right into our next one, which is like the content, right? I mean, that's a perfect lead in I don't know if you're attempting to do that. But no errors in grammar is a big one. And is someone like myself, who cannot spell things to save their life. You want other people to evaluate these or even better have spell checkers have stuff like that. But again, have people proofread your stuff, because if you're writing it or the content writers writing it, maybe they're just so engrossed in whatever they're doing that maybe they missed something or have some fresh eyes on it. Basically, make sure someone's looking over your content for spelling or grammar errors. Somebody who knows what they're doing in that regard. - -59 -00:31:57,840 --> 00:32:24,030 -Wes Bos: Yeah, I always have people who are very like, I have a list of people in my email who are so nitpicky. Anytime somebody cares enough to send me like a huge email full of all of the grammar, spelling clarifications, I always save that because those are the kind of people I need going through my website right before I launch it, because they have such a keen eye for that night. I don't we're joking that my gravestone is going to have a spelling mistake on it. Yeah. Yeah. So - -60 -00:32:24,990 --> 00:32:50,070 -Scott Tolinski: funny, because I can count on Courtney for that. Because like she she is the absolute master of like, I'll show her design. And it's just for an aesthetic purpose only I'll be like, it'll be in like figma. I'll be like, really rough mock up. And I'll be like, what do you think of this general design idea? You see, I was component wrong. I don't know what I'm asking. So that definitely happens. But do you want to find somebody who has that high? Like that is the ideal situation for that? - -61 -00:32:50,100 --> 00:33:02,430 -Wes Bos: Yeah, those people I feel for those people, because it must be hard for them to live in this world where that stuff bugs them so much. But I also really appreciate them because it's so helpful. It's finding those little things for people like us. Yeah, yeah, - -62 -00:33:02,460 --> 00:33:26,670 -Scott Tolinski: I need all the help I can get. Next, you'll want to make sure that you have a 404 page working accurately, to let users know where their content like where there's no content, right? Because, you know, they browse to a maybe a misspelled URL route or something like that. And it's porn to get them back on track to where they need go. really helpful. four pages can be dope to where they're like, Did you mean to say this, although that is quite a bit more extra work, you know, - -63 -00:33:26,730 --> 00:34:07,320 -Wes Bos: totally leftover placeholder text. One thing I always do when I'm building a new course site is I take the last course that I worked on, I drop it over, and then I just start changing it and often all accidentally leave in an FAQ or like the, if someone tweets out a social link, it's to the old URL, things like that. So making sure that you don't have any leftover placeholder tax or leftover content from something else. I've even seen it very embarrassing. I've seen people launch course websites with my own FAQ, because they clearly just like copy pasted it. I've had words with them. Obviously, that's awesome. But yes, like, make sure you're not like straight up jacking other people's content or a placeholder text. - -64 -00:34:07,350 --> 00:34:37,980 -Scott Tolinski: Yeah, I think that's an ultimate like if you've ripped off someone's design, and then you look at their meta tags and their keywords and it says, Scott to Lenski is a full stack developer their code, you're just like, Huh, I wonder where you copied and pasted this from? Also, yeah, do a quick Command F find across your entire project for ipsum. Because like, like leaving lorem ipsum in your site is is like a guaranteed iral when somebody launches something new and you see that it's um, you're just like, oh, they did not even they did not even touch this. - -65 -00:34:38,100 --> 00:35:34,460 -Wes Bos: Next up, we have accessibility. So we just did an entire podcast on accessibility. It got some really good reception. So go back and listen to that if you're interested. But Scott said run it through the x accessibility checker, check that all of your images have alt text on it, run the color contrast checker, that will that will show up in X, tab order things like that. By the way, we have have we had a pull request to add this Skip to content to the syntax website, which is amazing. And we also have currently 45 pull requests in the syntax. Because of October best. Yeah, thanks to everybody we have somebody is just dming me asking if we need some help wading through all those pull requests, I'm gonna get some help on that. Oh, that's great. Yeah, it's been amazing people have been pulled, requesting left and right, all kinds of helpful accessibility stuff, new features, little fixes. It's been great. Yeah, so just go through the entire accessibility podcast and make sure that you have all of that stuff squared away, because that's not something that you want to goof up online. - -66 -00:35:34,460 --> 00:36:17,340 -Scott Tolinski: Yeah, use that a keyboard, like use the site with gesture keyboard like that. That's a good indicator of if things are going okay, and you're very frustrated if like you can't get around your site with just a keyboard. Next up, we have SEO in a really good part of having good SEO is having an excellent domain name. And one of the great ways that you can get a great domain name is through dot tech domains, because dot tech domain names while that not only describes perfectly what we're doing in tech here, but there's also a ton of excellent availability for some of those URLs and domain names that you might not have been able to get with maybe a.io. That's super duper expensive, or I'll, you know, bought up at this point and things like that. And that tech did some good prices on some of this stuff. - -67 -00:36:17,370 --> 00:37:34,080 -Wes Bos: Yeah, so we've all been there, it's impossible to find a domain name that is available and you end up creating a company that's called like tutorial or lose lottery, or how wide everything or all the.io 's are almost all snapped up. Right now. There's, there's even this like guy who runs a.io reseller website making bank off of that, just because of the demand for tech domains is huge, right? So dot tech is coming out, it's one of the new tlds top level domains for you can go ahead and I if I were you, I'd probably go ahead and grab the dot tech of your own name, or maybe even your first name is still available, I would definitely check that out. This is really cool. Because the.io, which is pretty popular, it's really expensive, used to be 99 bucks a year the.io czar still like I think 4945 bucks a year. If you want to use the code syntax at get dot tech, that's where you're gonna go to register this thing, get dot tech, you're gonna get the first year man, that's pretty sweet for one year for 499 or five years for 2499. So you can get it for five years for half the price of one year of a.io. domain name. So check it out at get dot tech and let us know if you register your own tech domain name. So thanks so much them for sponsoring. - -68 -00:37:34,170 --> 00:38:17,210 -Scott Tolinski: Yeah, yeah, thank you. So let's get into this SEO. So you've got your excellent a new dot tech domain name that says exactly what you're doing with your your thing. So it becomes nice and searchable. What are some other SEO tips we can have before launch? I think one of the biggest ones is to make sure that you have a sitemap that is current modern and one of those ones that you don't have to like update yourself. I know if you have any sort of full stack platform. Or maybe you're even using like a Gatsby site, there's a Gatsby plugin that just generates a sitemap for you. But either way, having that ability to have a sitemap created and uploaded to it. It's this so called Google Webmaster Tools, or is it called search console or one of those things, but make sure it's uploaded to the Google Webmaster Tools. And they your sitemap is accurate and up to date. - -69 -00:38:17,400 --> 00:40:05,610 -Wes Bos: There's a whole bunch of different SEO checkers you can get out there. It really depends if SEO is something that you are concerned about one big one, especially if you're launching a new application, where you've done the routing yourself is you make sure that if you have two different URLs for the same page that they point back to each other that's called a canonical domain name, especially things like WordPress will automatically do this for you. If there's the possibility of reaching that domain name via like an ID, but also via like a slug, then make sure that those are pointing all in the same same way. If you're doing react, and you care about SEO, make sure that all of your server side rendering is up. One big one is making sure all of your meta tags are properly filled out, I often will just say test test test or fill this in later. And then forget to do that. So making sure that those are all filled out, as well as your meta tags for Open Graph or for sharing. So every time someone shares your website to Twitter, or to Facebook, or to Pinterest, or LinkedIn, you know, they pull up a photo, you can manually set those via the meta tags or the Open Graph meta tags. And what often happens is that you have an old domain name that has a cached version of those meta tags and that image, or you've launched it, and since changed the design of that like banner image. So what you need to do is just go to all of the tools, I think it's called the Facebook debugger. And Twitter has a version of this as well. And I think LinkedIn does as well. And you can just put in the URL of your website and then clear all of the cached values for that. And that will make sure that if you have a new website and you share it out your old logo or your old banners not going to be showing up on there and that's especially helpful sometimes you don't those are the last things you do. And if someone if someone were to share that website to Twitter before you've done it, then the unfinished version would be cashed in there. And that can lead to some headaches. - -70 -00:40:05,670 --> 00:40:46,920 -Scott Tolinski: Yeah, definitely headaches. That's one thing else. So you want to make sure that you have both both images in case you're What are they called, like the device images, shoot, I know this isn't necessarily an SEO thing. But it's in the same sort of realm of meta tags, like the meta, the meta, yeah, the meta images for when people save your site to the desktop or bookmark it, because that shows up as an icon. And I don't know how it works on iOS, I'm sure it's the same thing. But when you save a website to your homepage, in Android, it looks like any other icon on your home page. So that's definitely something that you want to make sure is there for those users. Last thing, you want to send some sort of generic image in that place. Because people do when I bookmark things and save them to my desktop. If it has like a nice little app icon. I'm always pleasantly surprised. Next we have analytics. - -71 -00:40:47,580 --> 00:40:52,260 -Wes Bos: Hold on. I got it. I found it. It's called the apple touch icon on iOS. Yeah, - -72 -00:40:52,290 --> 00:40:59,630 -Scott Tolinski: yeah. So there's generators that will just produce all of those for you with a favicon. And all that stuff. You just pass it an image and it shoots out a whole bunch of stuff. - -73 -00:40:59,670 --> 00:41:08,580 -Wes Bos: Yeah, definitely check those out. Yeah, one thing I actually don't do with my own is set the theme color. Is this on Android where it sets the top bar color? Yeah, your website? I - -74 -00:41:08,580 --> 00:41:16,710 -Scott Tolinski: don't I need to do that. Do it. It's so easy. I have the theme color set. And it makes my site look so much more lovely. On Android devices. I don't know why iOS doesn't do that. - -75 -00:41:16,770 --> 00:41:25,320 -Wes Bos: Yeah, that would be really an another thing I haven't done yet. As I have the new iPhone with the notch in it. I've not made my websites not friendly, huh? Yeah, - -76 -00:41:25,350 --> 00:41:38,760 -Scott Tolinski: I have not done that either. I used to I should probably just get one of those phones to have sitting around just to test it on notch phone. Although the pixel three and that has a notch. I wonder if it does the same exact. I wonder how it deals with it. Yeah, hopefully, - -77 -00:41:38,760 --> 00:41:50,760 -Wes Bos: I hope it's not anything. That's the problem with these five icons is you need a generator to the coverage them all, they all implement their own custom version. Hopefully, there's no like eight different versions of notch the SS they have to put in to make it work. - -78 -00:41:51,150 --> 00:42:21,360 -Scott Tolinski: notch dot CSS. Next we have is analytics, which is I don't know the last time I've launched a site without having Google Analytics set up. It's super easy. You just sign up for your account, you put it in, you put the tracking code in. And yeah, just the analytics is nice to have. And Google Analytics is so easy to set up. There's a whole host of other analytics, I don't know, if you use any other different types of analytics, I had heap analytics set up for a little bit. But I haven't necessarily gotten too much into it. Other than that, but I personally, I don't remember the last time I watched your site without having a Google Analytics key in there. - -79 -00:42:21,380 --> 00:44:04,890 -Wes Bos: Yeah, well, another this dives into whether or not you hate Facebook or not, but most people will recommend as the pup of Facebook tracking pixel in there. Because even if you're not doing Facebook ads, at the time, having lots of traffic go through your Facebook tracking pixel will allow you to in the future, you can say okay, 6000 people have been to my website, I can track I can now try to do Papa Instagram or Facebook ad in their feed for my product. But I can also take those 6000 people because those are my actual 6000 customers. And you can create audiences based off of that. So maybe 60,000 people who are very similar to that. So I've tried that it doesn't work very well, for web developers. Also, I found that my all of my tracking all of my analytics is garbage. Because almost everybody who visits My website is running an ad blocker No. So they're being blocked anyway. So I haven't used that all that much. But I do still run them. Just in case. At any point, if I want to try this stuff, you need like a really good sample size before you even get into that word. Last one is your server config and access. So you have your ht access file, if you're running an Apache server, make sure you put any redirects in there. So if you have an old version, this is something that I found myself is since I've changed my application over three or four times since I've started producing courses, I have all of these legacy URLs, because what happens is people open a four year old email the link, and that doesn't work. And then they they say, hey, this URL doesn't work anymore. So I need to make sure that I have old redirects in place. I actually don't do this at an ht access level. That's probably some more something like if you were to change a directory of where you've installed WordPress or something like that, you might want to do a mass switch. In my case, I just do it at a in my application. - -80 -00:44:04,950 --> 00:44:32,940 -Scott Tolinski: Yeah, yeah. In addition to that, you want to check to make sure your robots dot txt file has all of the correct information in terms of what URLs you don't want crawled, because it's important, right? There's not everything. Even if you're going for SEO on your site, there's chances are not everything on your site, you'll want crawled by a Google spider or any sort of other web search engine. So make sure your robots txt prevents indexing of the pages that you don't want to be indexed. - -81 -00:44:33,030 --> 00:45:33,000 -Wes Bos: other little things. It's funny that we talked about like HD access and jesup. And caching a lot of this stuff if you use like something like Heroku or xlights. Now, so easy, yeah, you don't have to worry about these. So if you use your own platform Netlify you don't have to worry about any of this stuff. But if you are still running your own server, make sure you have caching turned on make sure you're enabling g zip what Jesus moosh explain that real quick g zip what what it will do is like let's say you have a Java script file, and it says, I love to eat cookies. And then you have a nun later in that JavaScript file, it says I like to eat pizza, the word I like to eat is now twice in that JavaScript file. And what Jesus will do is it will just sort of be like, Oh, I like to eat is sort of like a variable, instead of having sending the text twice, let's just replace that with a reference to where we put it once. And that anytime you have duplicate content, say what, like CSS selectors or something like that, it will compress it. And you can have significant savings if your server has jesup turned on. - -82 -00:45:33,120 --> 00:46:11,670 -Scott Tolinski: Yeah, it's a big one. Definitely. And I like, again, I prefer any services that do this stuff without me having to do it myself. But if you are the server management type, go ahead and take care of all of this stuff yourself. Another good thing to check in that regard is to make sure you have your CDN correctly functioning, whether or not you're using CloudFlare and other CDN, first, a lot of reasons for your content access and your content delivery, but also for that, like CloudFlare DDoS, protection and that good stuff. So if you I mean, it's free to get started. So I would, I would definitely recommend using CloudFlare or some other CDN in front of your site. And it's not a bad thing to do at the very end, too, because it's a nice little optimization. - -83 -00:46:11,760 --> 00:46:36,780 -Wes Bos: Finally, we have here, just company processes, make sure that everything internally, this is should be part of your development workflow anyways, but make sure your tests are obviously passing, make sure the Git Git issues are closed, any pull requests that need to be merged. Obviously, those should be merged as well. Scott has a note here on documentation. I think that's a really good point. Because when you're in the headspace of this thing, it's best to write it down at that point, I think, yeah, - -84 -00:46:36,870 --> 00:47:42,780 -Scott Tolinski: yeah. And I think so too. It's, it's also good to have like your, like your processes, like, here's how to deploy this, here's how to update this, here's how to do this, because maybe you've just updated this site, and it's working for one week, and you're like, Okay, everything's working, it's time for me to take my vacation, and then you leave, and then something is going wrong. On the second week, maybe you had a variable that is self destructs. After one week, for some reason the whole thing blows up, it's important to know exactly how to fix this if someone else needs to step in and fix this, and how to how to work inside of this project. So yeah, readmes documentation processes, make sure all that stuff documented correctly. Also, some places, it's a great idea to have a staging environment that you can push to push to a staging environment, that's essentially the same kind of server as your production server, you would push the production build there, it's probably going to be password protected and not crawled. And then you can test out your site and an actual environment to make sure that the production build is going to be as expected. That way you don't run into any of those little weird issues with correct dependencies, not loading. Like we had mentioned before, before the package dot lock thing, - -85 -00:47:42,930 --> 00:48:34,110 -Wes Bos: I just thought a couple more things here. This has nothing to do with company processes. But DNS propagation, don't flip over your DNS like right before launch, because it might work for you. But it might not work for everyone around the world. So try to do that least a day or two ahead or have it set up where you can just swap the A records of your domain name and that will be instant rather than having to wait for DNS to propagate check it in different countries. This is something that I ran into, when I soft launched my course I didn't have my CloudFlare installed and people weren't able to get the country code discounts. I didn't even think about that. And luckily, it was just a quick flip on of CloudFlare. And everything started to work. But just like little things you think about like, what different devices are people on what different countries are people on? What different speeds are people on what different size monitors are people on you have to think about? It's not just your ideal production environment that's running on your computer? - -86 -00:48:34,140 --> 00:48:56,100 -Scott Tolinski: Yeah, I want one tiny little last one, make sure that there's no unwanted console logs or console errors left in your code that you ask your users to see the maybe you're logging out the entire object of something just to debug it. Or maybe you just had some little, little debug and to do later sort of stuff in there. And yeah, just get rid of that stuff. You don't need it in there. And obviously, it's - -87 -00:48:56,190 --> 00:49:17,910 -Wes Bos: you can really run into some issues too. Because if you have like a console log of like an object, and it's in a route and you have 10,000 people hit that route, your server logs can get into gigs real quick. Oh, yes. If you're running like a little SSD, or you're running like a little digitalocean droplet, you can run out of space pretty I think they gave me about 20 gigs. That happened to - -88 -00:49:17,910 --> 00:49:25,830 -Scott Tolinski: me before. Yeah, that's happened to me on my server logs filled up. And I was like, what, how is my droplet full? And then I was like, Oh, dang, locks. Yeah, - -89 -00:49:25,830 --> 00:50:00,330 -Wes Bos: you gotta be careful with those. Those console logs. You think God server side knowing I'll ever see it, but that will likely go into your server logs. And then before you know it, you have a six gig dot txt file, or dot log file. It's you have to just nuke the it's easy to get rid of right? But it could cause your I've totally run out of space on my droplet before and it just stops when I run out of space. It stops serving JavaScript files. Yep. So the website still works, but the JavaScript doesn't work and people are all really confused. It's just not a good space to be in. Cool, I - -90 -00:50:00,330 --> 00:50:15,150 -Scott Tolinski: think that's it. I think that's pretty much everything. If we left something off here, tweet us out. Let us know that what sort of pre launch stuff you like to do that maybe we didn't cover and we'll we'll give you a big ol retweet right there so yeah, any final things or is that it for you? - -91 -00:50:15,270 --> 00:50:16,680 -Wes Bos: I'm ready to talk about sick pics. I - -92 -00:50:16,680 --> 00:50:56,130 -Scott Tolinski: got a good one. Hey, I got a good one, two and this is my my good one is for those of you who like the dark net diaries podcast. I know. A ton. Oh, yeah, I really like that podcast. And this podcast was actually suggested to me by the creator of darknet diaries. So So this podcast is a very similar audience for that. In fact, the presentation is really excellent. This is it's called swindled, so swindled podcast calm or you could just google swindled and the podcast player. It's about basically people who are swindling other people. And the latest episode, which is on the fire festival. I don't know if you know anything about the fire festival. But it was such a good listen. - -93 -00:50:56,160 --> 00:50:56,700 -Wes Bos: Yeah, - -94 -00:50:56,700 --> 00:51:32,010 -Scott Tolinski: I knew the rule. Yeah, it was weird job rule. And this super rich kid. Were you rich loser who's basically swindling people his whole life. And they put on this concert, the whole thing was outrageous, actually, one of the most outrageous aspects of the story, as they mentioned, that was it one of the the Kardashians or Jenner's or whoever was paid $250,000, just to have an Instagram post saying they were going to it. And they didn't disclose that it was an ad. They just said, Hey, I'm going to this thing and they were paid $250,000 did not holo smile, - -95 -00:51:32,010 --> 00:51:32,550 -Wes Bos: did - -96 -00:51:32,550 --> 00:52:48,720 -Scott Tolinski: not go didn't get in trouble for that at all. And got to keep that money after the fact. That's outrageous to me that you could just fake it. You could like do a non transparent advertisement like that and get away with but besides the point, this podcast has some magical story element or storytelling elements to it. I cannot express how cool it is. He goes through these like stories that are search tangentially related, and they'll sort of like weave its way into the main storyline. And then all of a sudden, you're in the main storyline. You're like, How the heck did we get here? There was like one where the he was talking about, like john edwards, a political candidate. And he was cheating on his wife with this woman who was like, doing his videographer. And her dad had hired someone to kill the family horse. The guy that killed the family horse was a part of a horse killing, like not like it was like a group of people. There's something that went around killing horses for insurance money. Another guy who was also doing that was then involved in the main story of this podcast. So like, Did this like weaving its way and then all of a sudden, you're at the main story of the podcast, and you're like, Wow, this is so wild how we got here. But the storytelling is incredible. It is very similar to the dark net diaries and how he goes about things. And the atmosphere of it. I've just loved this podcast, - -97 -00:52:48,720 --> 00:52:57,810 -Wes Bos: man. I can't wait. I was looking last night. I was like, I need something like dark net diaries. I just need something that's entertaining, rather than all the business podcasts that I listened to all the time. - -98 -00:52:57,840 --> 00:53:04,260 -Scott Tolinski: Yeah, this swindled the fire festival one is a great first listen, it totally tells the whole story of everything. It's awesome. - -99 -00:53:04,320 --> 00:53:28,620 -Wes Bos: My sick pick is going to be what's called feefo bottles, which feefo if you've worked in the restaurant industry ever since for first in first out, meaning that if you get a shipment of strawberries and then two days later, you get another shipment of strawberries you obviously use the strawberries that were first in. They are the first out right Make sense? I don't know this is in the States. You have subway where they've got the bottles. Yeah, - -100 -00:53:28,620 --> 00:53:30,330 -Scott Tolinski: the squeezy? Yeah, - -101 -00:53:30,420 --> 00:55:11,910 -Wes Bos: that's my sick pick. These are called feefo bottles. And I've had these for about two, two and a half years. I got them for Christmas, which is a weird Christmas gift. But I basically told my wife kailyn, I said, I want our house to be like subway. Because I hate you buy ketchup, and it's in the stupid bottle, and it squirts all the time. And then you buy mustard, and then the mustard is stand straight up, and you have to like shake it to get it out. And then you have like Mayo, you got to get a knife and you get all over your wrist. And it's terrible, right, you don't get a response. But so what these people bottles are is that they're bottles that stand straight up, the squeeze part is at the bottom of the bottle, and then there's a thing that you take off on the top, and then you just put the ketchup or the mustard or the mayo or the barbecue sauce into the top and then the bottles are always you never have to flip the bottle over because you just pick it up, do a little squeeze, throw it back in. And that the added benefit of that means that you're you're obviously getting the oldest stuff first. And then the benefit of that is that your your fridge is just like all of the same bottles, right? You don't have like a weird Mayo that's huge. Or if you have like you buy a new mayo and you can just put it into the old one, just put it in it'll make sure that you don't have to finish the other one first. And anytime I make like a custom sauce, I just grabbed a little FIFA bottle and fill it up. I got them about two years ago I think and they've worked really well. They've never fallen apart. The seals on them are really good. They're high quality. The weird thing about it They're made in Canada, but they're like so expensive. I think I got a 12 pack for like 70 bucks back then. And then I just looked on the American Amazon and you can get a six pack for 14 bucks. - -102 -00:55:12,720 --> 00:55:15,480 -Unknown: Yeah, that's the sound of me going to Amazon right now. - -103 -00:55:17,609 --> 00:55:24,600 -Wes Bos: So I just got to get your content life in order if you want to be a good web developer, you got to start with your condiments in your fridge. - -104 -00:55:24,629 --> 00:55:26,640 -Unknown: I'm all about education and yeah, is - -105 -00:55:26,640 --> 00:55:45,300 -Wes Bos: a big thing. Just optimize it. You got to standardize your bottle so everything is exactly the same. Cool, I'm all in on this. I like it sick big fan. I've got a couple more like little kitchen picks that I'm gonna gonna drop because people in the fitness episodes said they enjoyed the cooking tips. So I'm gonna drop a couple more kitchen sick tip can't wait. - -106 -00:55:45,539 --> 00:57:07,200 -Scott Tolinski: Can't wait. Cool. So shameless plugs. I'm going to be plugging level up tutorials Pro. It's the pro subscription, you get access to all of the premium level of tutorials content, there's like over 300 plus videos right now, not to mention a new series every single month, this month series that's coming out in October is pro Gatsby two. It's the follow up to the very successful pro Gatsby course everyone really loved pro Gatsby. Well, Gatsby came out with a hot new version version number two in pro Gatsby two. Now only make sure that you are covered with all of the new awesome stuff inside of Gatsby two. But it's also basically you can imagine getting a do over on something that was already very good. So I think I'd knocked the first one out of the park when I made that tutorial series. And basically, I got to look at that series and say, all right, what could have been better about this for this pro Gatsby two. And I really think this is one of my best courses ever. So pro Gatsby two is going to be coming out in October, we're gonna be covering all the little things about Gatsby. And by the end of it, you're going to be a total Master, you're going to know exactly what to do, how to do how to get these super duper blazingly fast sites in Gatsby. So check it up at low load tutorials.com forward slash Pro, you can sign up for the year and save 25% get access to 12 new tutorial series along with all of the existing tutorial series that are up right now. - -107 -00:57:07,200 --> 00:57:29,400 -Wes Bos: Awesome. I got a sick pick or no I'm not sick picking I'm shamelessly plugging my advanced react course if you didn't hear last week, I finally launched it at Advanced react.com. It's the long name of it is full stack advanced react and graph qL which some guy on Twitter lovingly called it a verbal vomit of tech buzzwords. That's awesome. That's good. - -108 -00:57:30,600 --> 00:57:31,920 -Scott Tolinski: Reviews page just like that. - -109 -00:57:31,920 --> 00:58:22,170 -Wes Bos: But anyways, we are building a full stack application, we build a graph qL server on the back end with no jazz. So if you if you know any of the Express stuff that we've learned in my node course, all of the middlewares all of that will apply. We use react and Apollo on the front end for managing all of my data. A lot of people have been asking what about Redux? Apollo is sort of a replacement for Redux, in which it will fetch the data from from the server will do caching on the server, or sorry, I'll do caching on the client, we'll be able to define how stuff gets update, you can do local data as well as Server data. So it's sort of the whole thing we build an online store, we actually check out with credit cards, which is pretty cool. I'm really proud of it. People are really, really enjoying it so far. It's that advanced react.com and use the coupon code syntax and get 10 bucks off sick, sick. That's it for today. Anything else? - -110 -00:58:22,200 --> 00:58:27,360 -Scott Tolinski: No, that's it. launch your sites with confidence. No more. No more O's. - -111 -00:58:28,170 --> 00:58:31,680 -Wes Bos: All right. Good luck, and we'll see you next week later, please. - -112 -00:58:33,540 --> 00:58:43,290 -Scott Tolinski: Head on over to syntax.fm for you full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax89.srt b/transcripts/Syntax89.srt deleted file mode 100644 index f5b94cf52..000000000 --- a/transcripts/Syntax89.srt +++ /dev/null @@ -1,336 +0,0 @@ -1 -00:00:00,359 --> 00:00:03,420 -Unknown: Monday Monday Monday open wide dev fans - -2 -00:00:03,420 --> 00:00:21,329 -yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott - -3 -00:00:23,610 --> 00:00:24,480 -Tolinksi ski - -4 -00:00:25,890 --> 00:00:50,640 -Scott Tolinski: coming to you live, while sort of llanera Yes, not really, from the JW Marriott in San Francisco is is the first ever syntax recorded in the same space is the same physical space here, we have a tasty treat for you today is the Monday edition of syntax. My name is Scott winsky. And with me in person in this hotel room is West ba This - -5 -00:00:50,640 --> 00:01:21,780 -Wes Bos: is weird. For those who don't know, I've never actually met Scott and we are ramping up tomorrow we're doing a full version of a full tasty treat of the syntax podcasts at jam stack calm. And we figured might as well just try record a little hasty treat as well. So Scott brought his focus, right, we both brought our microphones, we had to run to the store and buy a XLR cable for Scott's mic. And now we're trying it so the audio probably won't be as good because we don't have all of our mixers and everything with us right now. But it'll still be good. - -6 -00:01:21,810 --> 00:01:52,530 -Scott Tolinski: Yeah, I think there's some major, major hiss coming through from my mic. So chances are, this might not be the prettiest in terms of audio quality episode that we've done here. But it should be fairly personable. So today we're going to be doing what we like to call stumped, which is where we give each other JavaScript interview questions or interview questions at that. We're going to be pulling questions today from flash cards for developers.com is a new sort of website that we're using here for these. So hopefully, we don't get any repeat questions. And yeah, - -7 -00:01:52,740 --> 00:03:43,200 -Wes Bos: today's episode is sponsored by email octopus. And this is actually kind of an interesting way to do email. Because if you want to run email marketing, and you want to do like a newsletter person, let's say, you've got like a couple options where you can go full blown and host your own version of some sort of hosted thing. And that's great, because it's, it's very, very cheap. And all you really need is something like Amazon, or does the CSS simple email service. And you can send dozens and dozens and thousands of emails for just like, I think it's like 10,000 emails for a buck or something like that. The downside of that is you have to host your own version, you can go all the way to the other side of it and use something like a MailChimp or whatever, that gets very expensive. I know myself that gets really expensive when your email list gets huge. So sort of the the sweet spot in the middle is using something like email octopus, which you still use your own Amazon SES key. So you still pay just the wholesale cost of sending those email, but you use a hosted service to actually manage sending your emails, your unsubscribes, all of that stuff that comes along with it. So it's kind of really cool, because it's going to be so much cheaper than running a plan if like, let's just go on here. 2500 subscribers on the shrimp plan, it's free tuna plan 10,000 subscribers, just 19 bucks a month, 50,000 subscribers, 39 bucks a month, I'll tell you, if you look at 50,000 subscribers on anything else is going to be much more expensive. So if you are looking for an affordable way, especially if you're someone who doesn't send email out all that often. And usually what happens is these email newsletter places they'll charge you by the month based on how many people you're sort of like holding in your list. And if you're just sitting on I'm not sending out a whole bunch of email, it can get fairly expensive for for doing nothing. So check it out at email octopus.com and thanks so much for them for sponsoring. - -8 -00:03:43,649 --> 00:03:56,910 -Scott Tolinski: I like the tuna plan, or the shrimp plan. We just got some ramen. So that's Yeah, that was delicious. Absolutely. Cool. So we got some interview questions here. Do you want me to kick it off? Yeah, - -9 -00:03:56,910 --> 00:04:00,240 -Wes Bos: hit me with your best. Best stumper. Okay, - -10 -00:04:00,360 --> 00:04:06,180 -Scott Tolinski: this is the stumper. The stumper is, what's the difference between a synchronous and synchronous code? - -11 -00:04:06,240 --> 00:05:38,580 -Wes Bos: Ah, that's good. Okay, so when synchronous code is run, it will sort of lock up the browser and stop any other JavaScript code from running. And the perfect example of this, if you want to understand what a synchronous code is, put out like a timer on your website where every 300 milliseconds, it will update, like update something on the page. So you can see that it's removing or use a set timeout and every second, increase the number of seconds by one and then take something that is synchronous in JavaScript. And some good examples of synchronous stuff in JavaScript are alert, confirm and prompt. That's why we don't like to use those to teach because they are unlike most things in JavaScript. They're synchronous. And what that will do is it will actually stop all of the timers on the page from running. If you have any other like Ajax requests in the background running if you have any other JavaScript that needs to happen, maybe some fetching or refreshing of data, none of that can run because you sort of locked it up with things cretinous as synchronous is the opposite of that, where it will fire off a request. And then it will only come back when that thing has been finished. And that's where you use a promise that's reuse a single way. That's where you use a callback, you can basically just fire off a request, you can fire off saving a file. That's another good example. Like if you have a synchronous, no jazz has an API for write file. And then they also have an API for write file sync. And the downside to write file sync is that nothing else can happen when that thing is running. Generally, you want to just kick off the saving of the file, let that run sort of in the background, and then come back with the name of the file once it's been saved to disk. How did I do? Yeah, I - -12 -00:05:38,580 --> 00:05:44,670 -Scott Tolinski: think this is good. Yeah, I think you can breathe now. I think that was a great explanation. Yeah. No, a plus. - -13 -00:05:44,700 --> 00:05:59,820 -Wes Bos: All right. Here is I like this one. I don't know if you know this one. Because this is one of those like classic interview questions, which very rarely will ever have to like, use it. Or if you need to use it, you just look it up. So what is the difference between call and apply? Oh, I - -14 -00:05:59,820 --> 00:06:08,790 -Scott Tolinski: never used calling apply? I don't know why I never use it. This is gonna be embarrassing. No, I don't use these very much. So I don't know. Yeah, please read me the answer. This is embarrassing. - -15 -00:06:08,970 --> 00:06:47,610 -Wes Bos: Yeah, well, so when you're trying to like find a method, it may be the reason why is because like you use react to use a lot of functional programming, right? Where you don't have to use the keyword this all that much. So it all boils down to what does this equal to? Right? So when you have dot bind calling apply, you can you can figure out how to invoke a function against that. So the answer here is both call and apply are used to invoke functions. And the first parameter will be used as the value of this within the function. The call argument will take a comma separated arguments as the next arguments and apply takes an array of arguments. So I very rarely ever have to use that myself. Yeah, - -16 -00:06:47,640 --> 00:06:49,620 -Scott Tolinski: dang, I feel dumb for not knowing that. - -17 -00:06:50,520 --> 00:06:56,700 -Wes Bos: That's, that's why it's like a classic interview question that you probably don't use all that often or ever. Yeah. And your entire career. He's - -18 -00:06:56,700 --> 00:07:11,700 -Scott Tolinski: dot bind, or whatever. But yeah. Okay. So here's an easy one. And I'm giving you I'm giving you light ones today. That's the computers. Getting getting me the good questions here. How do you share code between files? - -19 -00:07:11,760 --> 00:08:04,050 -Wes Bos: Oh, I like that. This is actually something I get questions about a lot. Because people like yeah, I get it. Wes, you have a script tag on HTML page, and whatever. But how do I actually architect an application that's like, a little bit bigger. So probably the most modern way to share code between files is just using a module system ESX modules common j s, require j s. Other ways that you can do it is via namespacing. So if you put like a, what I used to do a lot is I'd have like a window dot app, and you'd have like one big namespace for your entire application as a global variable. And then anytime you wanted to put some code that shared between it, you just put all of your methods in all of your variables as methods and properties on an object you have like app dot, fetch new users and app dot save user and app dot current users would be like an array of users and you kind of namespaces that way. Don't use that anymore, just because of modules are much, much easier to use. - -20 -00:08:04,710 --> 00:08:05,670 -Scott Tolinski: Yeah, way easier. - -21 -00:08:05,670 --> 00:08:07,440 -Wes Bos: How's that? Was that decent? - -22 -00:08:07,830 --> 00:08:10,380 -Scott Tolinski: Yeah, was absolutely sufficient. Perhaps. - -23 -00:08:11,310 --> 00:08:24,870 -Wes Bos: That's the, the, if you were to describe my life, absolutely sufficient. There's a little softball, what's the difference between double equals and triple equals? Oh, yeah, well, and the, - -24 -00:08:24,870 --> 00:09:05,130 -Scott Tolinski: I think, is just beginner developers who are specifically JavaScript, right? We're always taught that to not trust the double equals and sort of banish it to the Shadow Realm. You never need to use the double equals because it's not reliable, which is kind of hilarious, because well, now you have to have three equal signs to Yeah, actually have things be equal to what you were expecting, right? Right. If the the number three should not be equal to the string three, or whatever. So what are the each individual characteristics? I don't know what it's a good example of one of the ones that's a false equivalence with the double equals I'm like, I haven't ever used the double equals in my entire life. - -25 -00:09:05,130 --> 00:09:11,580 -Wes Bos: Yeah, no, I think that there's like a type of Nolan type of undefined. Or if you use a double equals something like that. - -26 -00:09:11,580 --> 00:09:30,240 -Scott Tolinski: Yeah, there's a handful of cases where the double equals is not necessarily reliable in the sense that the, the conditional comes out to unexpected results for what you're not expecting. So the the triple equals is pretty much the one you're going to use every single time because that is what gives you the correct ones. Let - -27 -00:09:30,240 --> 00:10:01,200 -Wes Bos: me Yeah, like if you do zero equals equals false, you get true, right? Because zero is falsie. But it's not the same thing. Yeah, that we should say that the difference is that double equals we'll just check the value if they're the same, and triple equals we'll check both the value as well as the type. So the fact that zero equals equals false is true because the value of those are both falsy. But the the types of them one of zeros, a number and falses, a Boolean so they don't line up. That's why triple equals is better? Yeah, - -28 -00:10:01,230 --> 00:10:02,660 -Scott Tolinski: yeah. more explicit. - -29 -00:10:03,150 --> 00:10:33,600 -Wes Bos: Yeah, that's it. One other fun funny thing that I find when I'm teaching beginners JavaScript is they use just use one equals, and they say if name equals Wes. And you're just basically saying like, if you can set a variable to be equal to West, then go ahead and back in var days. Was that always happen? Because you could always reassign a variable now with const? You will least complain a little bit. Yeah, it'll throw an error and you can figure out what's wrong because I've been there myself with some head scratchers. Why is this always true? Yeah, that is a beginner bug. Right. - -30 -00:10:33,600 --> 00:10:43,400 -Scott Tolinski: There that happens. Let's see what I got here for you. As we fun and pretty easy. What's the difference between no undefined in undeclared? - -31 -00:10:43,439 --> 00:10:44,400 -Wes Bos: Oh, - -32 -00:10:44,520 --> 00:10:46,380 -Scott Tolinski: that's a classic one too. It's a - -33 -00:10:46,550 --> 00:10:47,610 -Wes Bos: Yeah, an - -34 -00:10:47,660 --> 00:10:52,620 -Scott Tolinski: undeclared? undeclared, just as an undeclared variable. It's not like a keyword. - -35 -00:10:52,740 --> 00:11:29,520 -Wes Bos: Oh, okay. Okay, I see. No, I always think of as actual an actual value of nothing. So if you want to explicitly set something to be nothing you set it to be no or as undefined is if you make a variable but don't set it to anything. You'd say var name that's undefined, right? Like the it's been created. But there is no it hasn't even not yet defined what the value of it is, and then a undeclared variable is is gonna actually going to error out because if you have a variable that you're trying to use it, it will throw you an error saying that it's not yet been created. Yeah, it just simply. It's not something that - -36 -00:11:29,790 --> 00:11:30,630 -Scott Tolinski: doesn't exist, right? - -37 -00:11:30,660 --> 00:11:32,730 -Wes Bos: Yep. Yeah. That's pretty good. - -38 -00:11:32,790 --> 00:11:42,810 -Scott Tolinski: Yeah, that's good. Definitely good. Yeah. It's like you're trying to use your new account to log of West, but you've never even had a variable West anywhere else. Yeah, gonna be like, what the hell is Wes, - -39 -00:11:42,900 --> 00:12:10,080 -Wes Bos: we just say that something is never know by default. Whereas undefined is something by default, if you just create a variable and don't set it to something, it's undefined. Or as you did developer or program has explicitly set something to be no, in order for it to for that to happen. Null is often useful in situations where like, you can't use like false or zero or something like that. Because those could be legitimate values, where if you need something that is not a value, then you set it to No, yeah, - -40 -00:12:10,140 --> 00:12:32,250 -Scott Tolinski: yeah. Yeah, this is something that you used to use a lot more even. And back in, like jQuery days, when you'd have like your, you wanted to make sure our jQuery and all your scripts were loaded before you ran them. This is just basically saying, hey, when the document loads, we can now do this. So you're not trying to essentially perform actions on things that don't exist. Right. Let's say the document is not - -41 -00:12:32,280 --> 00:12:55,470 -Wes Bos: ready. David, already the same thing document already is that was in jQuery. And that was under the hood, what are we doing is using it was firing an event called DOM content loaded? Yeah. And that would wait for all of the HTML to be downloaded. And that was important, because sometimes you would run your JavaScript, right? Or you're looking for something that didn't exist any way for it. But the load event, - -42 -00:12:55,949 --> 00:13:02,040 -Scott Tolinski: I feel like that's the only time I've ever used anything waiting for the document to be loaded. was with jQuery. - -43 -00:13:02,070 --> 00:13:08,040 -Wes Bos: Yeah, back in the back in the day, because almost always now we just put our scripts after the HTML has right - -44 -00:13:08,040 --> 00:13:09,060 -Scott Tolinski: at the bottom. Yeah, - -45 -00:13:09,090 --> 00:13:31,500 -Wes Bos: yeah, exactly. Or you could you could Oh, yeah, some of these second differs. But then that's the DOM content loaded or document ready in jQuery is not the same thing as load load will wait for CSS to be loaded, wait for all of your images to finish. So that where I have use load before, if you want to wait until an image is done downloading so you can get its resolution or you can get its width and height so that you can work with it. - -46 -00:13:31,590 --> 00:13:48,990 -Scott Tolinski: Yeah, man. It's so funny because you do you work in these these frameworks, you have the lifecycle methods, and like, how much JavaScript have I written that's not been in react or Angular or whatever, in the past, you know, X amount of years. It's so funny, because it's like, oh, man, you just, you just end up losing some of this stuff. - -47 -00:13:49,020 --> 00:14:09,030 -Wes Bos: Yeah, you just never have to use it. So it's not something it I always categorize the stuff as up to knowledge. Because, yeah, you need to know it. But that's just because that's the way the language works. And if something nicer comes along, that makes you not have to know these, like, you don't have to be a drug dealer of these little facts about how the browser works. It just, it just works. Like Yeah, what I know - -48 -00:14:09,030 --> 00:14:14,370 -Scott Tolinski: because it's funny is it does not affect my day to day building code, right? Like build stuff. - -49 -00:14:14,400 --> 00:14:16,680 -Unknown: Yeah. Okay, okay, I - -50 -00:14:16,680 --> 00:14:19,710 -Scott Tolinski: got one for you. This one's fun. What is the event loop? - -51 -00:14:19,710 --> 00:15:31,650 -Wes Bos: Oh, that's a good one. So before I even say this, there's an really, really good talk on YouTube. Let me find the name of it. I've sick pick this in the past. Philip Roberts, what the heck is the event loop anyway? And apparently, Jake Archibald also has a good talk on it as well. I haven't watched that one yet. I should, because he's always good at breaking down these complex things. So essentially, you have functions and stuff that get called in the browser and they get sort of queued up to be called. And the order in which they are called they're sort of added to the the event loop. So that's one of the reasons why we sometimes have to Use a set timeout zero, in JavaScript or in some of my courses, I just have a weight weight zero, and you just have a single await for zero seconds. And what that does is it makes sure that the next code will be put at the end of the, at the end of the event loop and the end of the call stack. So I don't know if that was a really good example. It's kind of a very obtuse thing to talk about. So I would recommend if you are still scratching your head, check out this this talk, because I remember I watched that talk from Philip. Robert sounds like this is very good. Yeah, actually, I've - -52 -00:15:31,650 --> 00:15:34,680 -Scott Tolinski: gotten this question in an interview before Have you Yeah, - -53 -00:15:34,950 --> 00:16:00,720 -Wes Bos: it's it's really good to know, how does how the browser works with this kind of, and this kind of comes back to the synchronous versus synchronous, because if you're coming from something like PHP, where your code just reads top to bottom, you don't really run into problems like this. But knowing how the browser queues up functions being called and a synchronous versus synchronous is really important to being a JavaScript developer. dope. All right. What do we got going on? Do one more each? - -54 -00:16:00,720 --> 00:16:02,220 -Scott Tolinski: Yeah, let's go for it. All right. - -55 -00:16:02,220 --> 00:16:21,360 -Wes Bos: Why is extending built ins in JavaScript not a good idea. And when they say never extend built ins, they mean, don't take stuff that comes with JavaScript like array, and just start adding your own methods to it. So like, if you have an array and you add like.to? Scott, you can just start it. So why is that? Not a good idea? - -56 -00:16:21,600 --> 00:16:54,330 -Scott Tolinski: Yeah, I guess it could be maybe for a few reasons. I don't know what maybe the the not good reason. But to me, it seems like you might one be potentially overriding some potential functionality, either future or current functionality, whether or not you know what you're doing or not? Like, I guess that's probably a lesser concern. But for me, I guess it would be you are using sort of, like non standardized API's, when things could be in a separate library broken out? What would be I don't know what what is the bad reason for doing it other than that, - -57 -00:16:54,360 --> 00:17:24,000 -Wes Bos: well, so in the past, what has happened is if you extend an array, and you add like a he taken around, you add a method called, like, find names or something like that. And then somebody else comes along, and you have like a plugin, and they also write have their own and they override it. Like you said, you could have a naming collision. And that's why things like jQuery was in its own variable dollar sign. And that's why things like lodash are in their own variable underscore. And what had happened with - -58 -00:17:24,030 --> 00:17:30,110 -Scott Tolinski: I think it was mootools is mush. Yeah, or her wallet did not smoosh. But much note that this mush gate - -59 -00:17:30,390 --> 00:18:02,910 -Wes Bos: mootools extended the the prototype, right, and they added contain Yes. And the reason why it's not contains in the ESX back and it is dot includes is because of mootools. And they didn't want to break existing website. So generally just don't touch you can touch that. We talked about this last episode, when when should you touch the prototype when you're poly filling, right? You should extend built ins by poly filling them with standard JavaScript API's. But don't do it for your own willy nilly stuff. Just go ahead and then make your own function somewhere else. - -60 -00:18:02,940 --> 00:18:04,500 -Scott Tolinski: Yeah, well, smartgate was the same thing. But - -61 -00:18:04,500 --> 00:18:08,520 -Wes Bos: for flatten, flatten will explain that. I didn't really get into that. - -62 -00:18:08,600 --> 00:18:11,940 -Scott Tolinski: Okay. Yeah, it was it was like a Twitter thing couple months ago. - -63 -00:18:11,970 --> 00:18:13,850 -Wes Bos: Yeah, we're watching a little bit of it. Yeah. - -64 -00:18:13,850 --> 00:19:07,770 -Scott Tolinski: So there was a proposal for a new language feature called array dot flatten. Yeah, to flatten an array. The problem is, is that mootools also had a flatten. And so the the proposal, the proposal author jokingly suggested renaming a flatten to smush compatibility issues, but then it led to this whole conversation of is a smush. to demo name for this kind of thing. Or is a flatten Is it fine to just start using flat and break a whole ton of sites that are using mootools? This? Yeah, it's basically the exact same sort of conversation, right? And so I guess that that makes a lot of sense, especially with libraries in your own individual code base. I guess maybe there's less of a scary reason to, to override stuff but I guess you probably just shouldn't anyways, yeah, - -65 -00:19:07,770 --> 00:19:11,610 -Wes Bos: you never want to get that call from like a client like six years later, right? And like, - -66 -00:19:11,610 --> 00:19:12,180 -Unknown: um, what's - -67 -00:19:12,180 --> 00:19:12,930 -Wes Bos: going on? I - -68 -00:19:12,930 --> 00:19:20,640 -Scott Tolinski: just added a smash. Yeah. method to array and now there's an actual smash method and everything's breaking. There's - -69 -00:19:20,640 --> 00:19:25,650 -Wes Bos: lots of variables out there. You can just make your own namespace right make your own functions. Yeah, I - -70 -00:19:25,650 --> 00:19:38,670 -Scott Tolinski: think that that is the best answer is that it just comes down to namespacing in general. Yeah. Yeah, I think that concludes our hasty tree here is not my best showing I study up on these flashcards these next ones - -71 -00:19:38,940 --> 00:20:05,400 -Wes Bos: No, I like I think people have been been saying like, it's, it's fun to see us, like goof off or not be able to totally like when we're put on the spot to explain these things. It's not always as as smooth as it would be in a tutorial where we can take six or seven like sometimes I'll take like seven or eight shots at trying to explain something and then the best one will We'll make it into a tutorial. But these ones are just off the cuff as they would be in an interview. Yeah, it's - -72 -00:20:05,400 --> 00:20:29,360 -Scott Tolinski: funny because in an actual interview, I think, like one of the worst things you can do is just start to bullshit your way through some of these answers. And instead of just saying, I'm not quite sure, you know, give me give me an explanation of this. And we can talk about it or something. I don't know what the best route is there. But sometimes an interview, the last thing you want to do is, is like, act like you know something when you don't - -73 -00:20:29,400 --> 00:20:46,200 -Wes Bos: totally. Alright, that's it for today. Thanks for tuning in. We'll look forward to Wednesday, where we have the Live podcast, we've got some really fun stuff up for the live version of the podcast. It's gonna be hilarious. And even if you're not obviously not going to be there, it's still going to be very fun to listen to. - -74 -00:20:46,470 --> 00:20:52,610 -Scott Tolinski: Yeah, if you're not going to be there. You should next time. I don't know is there there's not next time lined up? - -75 -00:20:52,650 --> 00:21:02,060 -Wes Bos: No. We've been tweeting them telling them to do jam stack UK. Oh, yeah. And there's a lot of jam I think what do you call like crumpet cough or something like that? - -76 -00:21:04,710 --> 00:21:05,810 -Scott Tolinski: Tea and jam stack? - -77 -00:21:05,840 --> 00:21:06,830 -Unknown: Yeah. Oh, - -78 -00:21:06,990 --> 00:21:07,770 -Scott Tolinski: that's pretty good. - -79 -00:21:07,980 --> 00:21:10,470 -Wes Bos: Oh, that's a really good idea. pinkies up cough - -80 -00:21:10,500 --> 00:21:12,180 -Scott Tolinski: Yes. pinkies up. - -81 -00:21:13,200 --> 00:21:19,980 -Wes Bos: Well, well, if you want that to happen, tweet at Netlify and tell them we'll see how this one goes tomorrow first. - -82 -00:21:21,590 --> 00:21:29,910 -Scott Tolinski: But yeah, so hopefully this audio wasn't too bad for you. We will catch you again in the live show on Wednesday and then back for another regular hasty treat on Monday. So I guess that's it - -83 -00:21:30,210 --> 00:21:31,290 -Unknown: sounds good. Please. - -84 -00:21:33,660 --> 00:21:43,380 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax9.srt b/transcripts/Syntax9.srt deleted file mode 100644 index b41c2174f..000000000 --- a/transcripts/Syntax9.srt +++ /dev/null @@ -1,472 +0,0 @@ -1 -00:00:05,970 --> 00:00:11,220 -Scott Tolinski: Welcome to syntax where we deliver tasty treats for web developers. - -2 -00:00:14,219 --> 00:00:39,060 -Wes Bos: Welcome everybody. How's everybody doing? Hopefully you're ready for a another syntax. Today we're gonna be talking about JavaScript utility libraries, which it's, it's truly a tasty treats episode because they're just gonna rattle through, I don't know, a couple half dozen or a dozen or two different utility libraries, things that we use that make your life a little bit easier things that make you go Hmm, that's handy. So hi, how you doing, Scott? - -3 -00:00:39,060 --> 00:00:49,710 -Scott Tolinski: I'm doing really, really good here. Just uh, you know, live in the live in the code, live coding, recording videos, you know, doing all that good stuff. Yeah, how about you? - -4 -00:00:50,699 --> 00:01:06,090 -Wes Bos: I'm doing good. Doing good. Just getting getting ready for fall. Yeah, end of August here and certainly get the flannels out of storage. For primetime. That's good. Anything special you're working on these days. - -5 -00:01:06,330 --> 00:02:04,470 -Scott Tolinski: I'm, uh, I'm working on that cart, rebuild the shopping cart rebuild, and I have some I'm so excited to get this done. Because I don't know if you follow me on Instagram or anyone who follows me on instagram will maybe see some of these like little sneak peeks I'm giving of it but the thing is, is pretty sweet. It's it's in react, and it's as its mounting, it animates in from both sides it like flies in and a really interesting way and does some really like practical but nice effects while things are loading. It's obviously like, I'm trying to make it so it's, you know, sort of inspo worthy, right, I want people to talk about it, but I don't want to make it totally overblown and totally, you know, have those things. Yeah, way. So I'm just working on that I have at the front end like 99% done and I've started the API and back end for it. And it's it's cruzan I just got to get it done and then work on the subscriptions part of it all and then you should be able to see it in the level up tut's store soon, hopefully by pretty sweet episode or two. Yeah. How about you, - -6 -00:02:04,500 --> 00:02:10,500 -Wes Bos: though, for the back end? Did I got a question about this? Did you end up going with Braintree or rewriting it? - -7 -00:02:10,530 --> 00:03:09,750 -Scott Tolinski: Yeah, that's actually why I chose to rewrite it is to go with Braintree to sort of simplify my offerings between PayPal and before and credit card right. So before I was using stripe for credit card, PayPal for PayPal, and yeah, managing two entirely separate API's really had, you know, Braintree doesn't take away all of that pain so far, but it has made it really nice and easy. And I do like some of the things they offer like there's the hosted fields. thing. I don't know if we've talked, we didn't we didn't talk about that in our episodes. We haven't really dove much into Braintree. But there's basically you you code up some divs with IDs of fields, and then say, Hey, hey, Braintree, these are going to be my secure fields. And then Braintree sort of injects a form iframe into that. But it uses the style of your divs as the style of the inputs. So you can have a really customized secure form or whatever. And without having to worry too much about what you're doing. Other than that. - -8 -00:03:10,020 --> 00:03:33,330 -Wes Bos: That's pretty sweet. Another thing I was looking into, because we talked about one of the challenges of moving from stripe to Braintree, if you already have like recurring billing happening in stripe, how do you get out. And apparently, if you do contact stripe, they will migrate it for you to a another approved vendor. Interesting. So there it is possible to get that data out. I was considering just - -9 -00:03:33,330 --> 00:03:42,660 -Scott Tolinski: something that was maintaining a legacy subscription model. And just because I mean, it works, so just keep it there and hold on to it. Yeah, but I'll have to look into that. I wasn't aware of that. - -10 -00:03:43,290 --> 00:04:41,790 -Wes Bos: Yeah, so I was I thought that I don't even have recurring billing, but I just thought that was interesting to to not be locked into one. So yeah, nice. on my end, I am. I am full blown. I've been mentioned this a couple of times ago, but I sent an email out about it a couple days ago is I'm full blown working on a sort of an advanced react course I think I'm going to call it which is primarily focused around using graph qL and charging credit cards. So I'm sort of deep into that. Feeling a couple of pain points. It's it's definitely early days for for graph qL and some of the services so I'm definitely running into lots of like little little hiccups along the way, I've logged a couple bugs in a couple of libraries, and they've since been fixed. So it's definitely definitely early days for the stuff but it's it's also starting to feel fairly stable. The stuff I'm finding is just minor little edge Casey stuff. So pretty happy about that. - -11 -00:04:41,819 --> 00:05:14,939 -Scott Tolinski: Nice. Yeah, that's got to be really exciting to dive into a bunch of new tech like that. So I'm really excited for this graph. qL graph qL episode we're gonna do where Wes, who is, you know, at this point, much more knowledgeable but it's still a you know, growing in it and I am I haven't really dove into it at all yet other than the basics of what it is, I'm going to just sit down and ask us all a whole bunch of questions. And maybe we can take some questions we get over Twitter that people have over two, and we can both try to solve and figure out what these answers are. Yeah. Yeah, it's - -12 -00:05:14,939 --> 00:05:30,629 -Wes Bos: gonna be a good a good episode, because I still like, I still remember all of my questions about graph QL. So we can, we can talk about it as it's fresh, which is sometimes better than someone who's been in it for four or five years. And it's all second nature to them. Yeah. - -13 -00:05:30,660 --> 00:05:33,449 -Scott Tolinski: So I find that to be the case most of the time. - -14 -00:05:34,079 --> 00:07:01,110 -Wes Bos: Awesome. Well, let's kick it off with our libraries. We want to say thanks so much to fresh books for sponsoring fresh books is cloud accounting software, we'll talk a little bit more about what they are. But if you go to fresh books calm for slash syntax, and sign up, you can get 30 day free trial. So thanks so much to them for sponsoring. So today we're talking about JavaScript utility libraries, what is the utility library? Well, it's it's kind of this like loose idea of something that is not necessarily for maybe dealing with the DOM or not necessarily for processing payments. But it's just a library that helps you get stuff done. So whether that's working with this specific type of data, or maybe you have a task that is fairly repetitive that you need to do over and over again, these libraries make life a lot or a little bit easier on us. So probably the most popular utility library out there is a library called lodash. And if you've never heard of it before, essentially, it's just a collection, a huge collection of handy methods that allow us to work with different types of data. So there's a whole bunch of methods for dealing with arrays, there's a whole bunch of methods for dealing with objects, a whole bunch of methods for dealing with functions, and functional programming and all kinds of really nice stuff in it. So are you a lodash? user there, Scott? - -15 -00:07:01,290 --> 00:08:49,470 -Scott Tolinski: Yeah, for a good amount of time. I feel like I caught the lodash bug, just as it was, like firing up. I mean, for a long time, everyone was on underscore lodash was sort of the the second generation of something a tool like underscore. And yeah, I pretty much at first, I remember seeing it and looking through these JavaScript functions back when I wasn't doing a ton of like heavy JavaScript stuff, I still wasn't doing any, like single page application stuff. And I just remember thinking, yeah, maybe I'll use this, but none of this stuff seems super useful. And then I started doing this world of, of these larger JavaScript applications. And I remember the first time the light bulb clicked for me with lodash, and I was just like, holy cow, this thing makes my life so much better. And, and ever since then, it's just been like a constant I, you know, you you end up importing only what you need, or whatever, from lodash. But, you know, I there's just some things that it just, it takes all of the guesswork out, it takes away all this like mundane sort of JavaScript stuff that you may potentially had to memorize some sort of, you know, strategy, right, even like finding a specific item in a collection of objects, right? You didn't know more have to iterate over things like that, you can just find as if it was like, even like a Mongo query or something like that, that sort of style. So I think lodash is just one of those things that, then when you start really utilizing the full power of it, it can just save you an endless amount of time. And then the best part is to they've already gone through and done all of these, you know, best practices and optimizing. And, and so you don't have to worry about whether or not the code is going to hold up. Because, you know, it's, it's being constantly improved. - -16 -00:08:50,270 --> 00:09:57,240 -Wes Bos: Yeah, and anytime that you have like a specific set of data, whether it's an array of values, an array of objects, an object with that's deeply nested inside of each other anytime you're like, Hmm, this is either hard to work with, or I have this specific situation where I need to find an item inside of it or flatten this data or find the difference between two arrays. And it's all over the place. They have all kinds of really helpful little methods inside it. Anytime you have that question. More than likely, there's going to be a lodash method that lives inside of it. And sometimes you hear criticism for for lodash being like, well, you can do that with ESX. But really, if you if you dive into it and realize what all of the different methods are, maybe just spend 1020 minutes after this podcast or while you're listening to this podcast, going through all the documentation and figuring out what all the different methods are. It's good to know that sort of everything that lodash does, then when you run into situations, you're not going to going to hack something together for yourself. You're just going to reach for whatever handy method lives inside of lodash - -17 -00:09:57,289 --> 00:10:24,289 -Scott Tolinski: I was gonna say those methods can just they can Increase your code readability make everything wait cleaner and easy to sort of understand. I mean, if you're writing your own version of all this stuff all the time, that code is going to take up a lot more space. But then if you're writing, let's say, a poll at and you want to pull a specific object, add something, you know, you could just drop in, pull, add or find or whatever, and it just drops in there, instead of having to rewrite that code, or having take up that space in your project. - -18 -00:10:25,140 --> 00:12:05,909 -Wes Bos: Exactly, and dealing with unique values is I want us to do is I would always be like, Hi, I need to like unique an array, I would go to stack overflow copy, paste that little helper function. And then I'd have these like, at the have like a helpers file that had all these random different functions that are not necessarily battle tested, maybe you run into a weird edge case at some point, or you're gonna run into performance problems where you don't know if there's a memory leak, or it's not the best way to approach this with an extremely large data set. JOHN, David Dalton, who is behind lodash, he is extremely performance minded in all of this stuff. And what we're lodash initially came from was there's another library called underscore that everybody used with with backbone, or you could use it on your own. And he just rewrote the entire API as a drop in replacement for underscore but it was like extremely performant, which is pretty neat. It's it's, it's far past that now it has added all kinds of really nice stuff to it as well. And then one other thing, I guess, we should say about lodash, is that you can also just pluck no different methods that you like, so even the other day, I knew this, but the other day, I asked on Twitter, what's the best? what's called like a nested get like rumor. Sometimes you have an object that's like six or seven levels deep. And you don't know if all of those six or seven levels deep are gonna like you don't know if there's going to be a person object. And even when you have a person object, you don't know if there's going to be a name, object. And then on that you don't know if there's going to be a last name. So like, you always have to check for everything along the way. Otherwise, it's gonna break - -19 -00:12:05,970 --> 00:12:15,929 -Scott Tolinski: No, as I say that's, that's like a, a guaranteed ticket to a big old error if you're looking inside of it a nested nested nested object, right? If you're not checking any of that stuff, right? - -20 -00:12:16,919 --> 00:12:59,820 -Wes Bos: Exactly. So I asked like what's the best like standalone library for this because I'm always I'm still have like the mindset like don't bring a monolith library with you, where you can just like take a little helper function, but lodash will actually export every single one of its function with only the little piece that you actually need. So you can always just like grab a little, like, sort of like tear off a function from lodash. And just put that one piece into your app, you can npm install lodash dot has lodash dot get lodash.an arc or over or any of these different arguments that it has. So there's no reason to have that sort of like bloat example that you've had before. - -21 -00:12:59,850 --> 00:13:37,500 -Scott Tolinski: Yeah, and if you're working with sort of, like, you know, modern code splitting, and you know, all that sort of stuff, you can install the entire lodash package. And if you look in your, if your in your packages folder, for lodash, each one of those functions has its own file, so you can import the function directly from its own file, and not have to import the entirety of lodash. So that way, if your, your files are code splitting wrapped up correctly, you're only getting that one thing. Well, and then you have access to the entire library to so mean a lot of different strategies for not having to load the entire library itself. - -22 -00:13:38,190 --> 00:13:59,730 -Wes Bos: Exactly. That's sort of the beauty of using common j s or ESX. Modules so that you just grab the one thing that you want and and you'll you can be sure that the module that you want will go off and get its dependencies. Maybe it has shared dependencies through a couple other modules, and it will pull those in. So big fan of lodash. If you haven't checked it out before or haven't used it before, definitely take a look at it. - -23 -00:13:59,850 --> 00:14:37,950 -Scott Tolinski: Cool. Yeah. Next up, we have one library that's extremely popular, takes care of something that basically is sort of a pain to work with on your own is dates and JavaScript, and date and time and all that stuff, time zones. And that's moment. Moment. js is a very popular library for working with date formats, it makes it really easy to change between time zones, format, your dates, sort of pull dates, create dates add to any sort of manipulation of time is moments strong suit, right, it becomes a really, really nice way of working with date and time. - -24 -00:14:39,510 --> 00:15:34,440 -Wes Bos: Yeah, it's, it's both for formatting time. So if you're coming from PHP world, where you have this really nice date function that you can pass like all these different like and and i in capital Y and get all the format of date from that you can pass those values to dot format on moment and then it will then kick out the format. For you. But the other things that it does is it does relative time, which is like, if you have like a blog post and you wrote it two seconds ago, it's gonna say two seconds ago. But if you wrote it three years ago, it's not going to say 3000 seconds ago, it's going to say six years ago, or however many years ago you wrote it. So you don't have to, like worry about all those if statements that I myself have written 100 times if the number of seconds is greater than show a day. And if it's, if it's more than six days and show a week, and you get the point, right? - -25 -00:15:34,710 --> 00:15:42,570 -Scott Tolinski: Yeah, absolutely. And it's, like I said, it's no fun working in in time and date, usually in moment takes so many of the stressors out of it. - -26 -00:15:43,679 --> 00:17:29,810 -Wes Bos: Yeah, um, one example I want to give one I've recently used it is, I built like a reporting dashboard for myself. So I could see like how many sales I got in a specific day or whatever. And then I have a calendar picker, which is great. And you can pick different things. But then I put these like little handy buttons along the bottom that say today, yesterday, two days ago, this week, last week, last seven days, last 30 days, last 60 days, this month, last month, and then all the years and whatever. And those buttons were really easy to to make, I didn't have to do any calculating, I just said, for each of those buttons, like let's take last week, for example, what I would do is I would say give me now, which is a moment, whatever today is, and then go to the start of last week or something like that. And then you can also include the entire week as well. Or, if you want to do today, you can say give me from whatever now is it's 251. And you can go Go to Start of today, you can go to end of day, or go to start of 30 or add seven days or subtract seven days, you get the point, right, you can do math as if it were English, but it will figure out all of the the milliseconds at timing and including I also a couple months ago, I had a reporting bug in my affiliate system where I was not giving people affiliates for like, I think the last four hours every on what the bug was, but I had to go back and pay out a couple people that I had had missed there. And that was because I had tried to do the adding of the time myself, whereas using moment, it would be way easier. - -27 -00:17:30,240 --> 00:17:59,060 -Scott Tolinski: Yeah, it's actually funny. You know, we both did the same technique there for our admin dashboards. It's funny because we we've both built our own platforms for e commerce. And we've done it entirely separately, but it's hilarious to see how many like the same choices we've made. So I also did that exact same thing, I have that row of buttons. I mean, obviously stole the idea from you know, stripe or YouTube, whoever has all those buttons and but yeah, same exact thing. And in moment makes all that stuff easy. - -28 -00:17:59,670 --> 00:18:46,550 -Wes Bos: That's really sweet. So we should also talk about an sort of new ish library called date functions date dash f n s. And it's sort of aims to be sort of the lodash, as lodash was like a an answer to some of the problems that underscore had, one of the problems that moment has is that it's starting to become a bit of a large library. And it's not extremely modular at the moment. And that's probably going to change. But somebody has written date functions, which is a sort of a modular version of moment, it does all the same stuff, that moment does, however, you can just cherry pick the different pieces of the library that you actually want to bring in from the library. Now, - -29 -00:18:46,580 --> 00:19:13,290 -Scott Tolinski: I haven't looked at date FNS enough. I mean, you shared it with me the other day, and I was really excited to see that this exists. But do you know about how it modifies the date, because in moment, if you're working with the date, and you're changing, you're constantly having to use that that clone method to create a new one, to create a new date to prevent you from manipulating something without setting it to a variable? Does date FNS function like that as well? Are you aware? - -30 -00:19:13,770 --> 00:20:02,130 -Wes Bos: Yeah, it's one of the big reasons people have moved away from moment is that it's it's mutable, you can mutate the actual data. That's what happens when you when you run a function against it. And the whole chant of the functional programming is make sure that everything is immutable, meaning that if you have a method that runs against an object, it shouldn't modify that original object, it should just return a new version of that. So one of the benefits to date functions is that it's immutable. It's a pure function, meaning that it's not going to overwrite the old one, it will just return you an actual a new version of it. So you can really shoot yourself in the foot sometimes there where you don't necessarily know if a function is going to mutate your data or not. And you can sleep easy With date functions knowing that it is immutable. - -31 -00:20:02,160 --> 00:20:30,510 -Scott Tolinski: Yeah, that's, that's really nice. Because I can't tell you how many times, you know, not having moment be immutable has, has caused, you know, bugs here or there or just sort of weird mysterious things. You're like, why is this? Oh yeah, I forgot it mutated the data I wasn't expecting it to. And, you know, even though you, you set it to a new variable, it's still mutated the original, causing you a whole bunch of headaches. So yeah, really excited to see that. I'll have to be checking this out pretty significantly. - -32 -00:20:31,530 --> 00:21:08,670 -Wes Bos: Yeah, it seems to be at a point where if if you were needing a date function, right now, I would probably reach for date functions instead of moment. That's not to poopoo anything moment has done obviously, that they have absolutely changed the way developers have have worked with dates. But it looks like date functions is a bit more of a modern library for working with dates. And as far as I have worked with it, the examples that I gave earlier, were actually all done with day functions, not with moment. All of the stuff has has been transferred over to the date function. So all the functionality is there. - -33 -00:21:08,700 --> 00:21:24,830 -Scott Tolinski: Nice. Yeah. And I heard a moment is well, I didn't just hear this it's been this way for like the past two years now or three years, whatever moments not going there's there's no updates to moment really is there. There's nobody at the helm. Or has that changed? Had you know about? - -34 -00:21:24,859 --> 00:21:35,790 -Wes Bos: I don't know. Let's, let's see. Let's look at the commit history. I haven't heard that myself. Um, the command history looks pretty. Pretty popular. - -35 -00:21:35,879 --> 00:21:41,550 -Scott Tolinski: So it's still being updated. Maybe it may be the original creator had abandoned it or - -36 -00:21:41,639 --> 00:21:42,630 -Wes Bos: move on. Okay. - -37 -00:21:42,630 --> 00:21:48,300 -Scott Tolinski: I you know, I'm not positive. remember seeing some posts about that, but it was a couple years ago. So maybe that's since changed. - -38 -00:21:48,540 --> 00:21:58,619 -Wes Bos: Maybe that's it. It looks like it's on its own like GitHub repo now, like moment, forward slash moment. So it probably is being actively worked on. So couldn't write it off just yet. Yeah. - -39 -00:21:58,619 --> 00:22:01,230 -Scott Tolinski: Community takeover. Good. Yeah. - -40 -00:22:02,640 --> 00:23:29,849 -Wes Bos: Cool. What do we got next in our list of things. One is called slug fi and all, I'll give you a little hilarious story about how I came across this library. So a slug is if you've use WordPress or anything like that, if you want to make a sentence into a URL friendly sentence without any of those, like percent 20. When you have a space, you need a slug library, that's going to convert it now. Most slug libraries come with the entire like the entire Unicode list, meaning that if you have like a heart, it will say like I heart you instead of like I emoji heart or it will convert any Unicode symbols emojis to the actual English representation of them. And that's really cool. But I was doing a react application on the client side where I needed that and it actually ended up making my bundle almost three. Meg's Yeah, so it's not something you can do. So sometimes you just reach for these libraries. npm install it, and you use it. And it works great locally, because it's instant. But you have to be careful about the the bundle size at the end of the day. So there's this library called slugga phi that doesn't include any of that it's a really small implementation of doing slugs, it does have the option to bring in Unicode if you need it on server side, but without it, you don't necessarily, you don't need it on the client side. So it's pretty simple. takes in a sentence will export out a URL friendly slug, that looks really nice. - -41 -00:23:29,910 --> 00:23:40,349 -Scott Tolinski: Yeah. And so I actually use a different library for this same thing. I use a called one is speaking URL. It's just all one word speaking URL. - -42 -00:23:40,560 --> 00:23:42,359 -Wes Bos: And I've heard of this. Yeah. - -43 -00:23:42,390 --> 00:24:15,990 -Scott Tolinski: And for me, I really only using this slug of five sort of technique, I'm pretty much only using it on the server. So I didn't look too hard at the bundle size, because it's not affecting my client bundle. But it's pretty feature complete has a lot of language stuff. And it was a nice and easy use for me just simply gets logged. That's it. So for me, I use a speaking URL. It's it's fairly popular, has a good number of stars and seems to be really active in development. So - -44 -00:24:17,700 --> 00:24:44,430 -Wes Bos: that's pretty sweet. It looks like it says on the NPM repo that it is or client and browser, or sorry, client and server side. So you're up and running. Cool. That's good off to check that one at the end of the day. Like sometimes these things do the exact same thing. And people love to talk about the differences between the two but they they often just do the exact same thing, which is replacing spaces with dashes. Yeah, and comments, stuff like that. Yeah, - -45 -00:24:44,430 --> 00:25:18,420 -Scott Tolinski: right. Yeah. Okay, it looks like speaking URL is 12 K, normally and 6.2 k g zipped. So not not too big there but yeah, I only use it server side. But yeah, I mean, same, same for same for here. It's whatever works for you works. And if you don't need a library to make your slugs, you know, totally get it if your slugs are very simple if you want to make sure and you know, take care of edge cases, like what emojis and our languages and all sorts of stuff like that, you might need a library to save yourself some time. - -46 -00:25:19,619 --> 00:26:35,099 -Wes Bos: Totally. Next up, let's talk about data fetching. So on the client, we now have fetch, which is a built in, maybe we'll talk about the olden days, the olden days, we had jQuery is dollar dot get or dollar dot Ajax, which it was a really nice API for actually fetching data. And then along came fetch built into the browser. And it's great, but sort of the downside to using fetch in the browser is that the, there are no good defaults, meaning that often these libraries will default to using JSON. And if you don't tell it that you're using JSON, or if you don't parse the JSON response, in a second promise on fetch, it will break. So you have to make sure that you do that. And specifying headers and whatnot isn't necessarily the easiest. So when I am doing any sort of serious Ajax, if I'm just doing quick demo, I'll use fetch. But whenever I'm doing some serious Ajax in the browser, I will reach for a library called axios, which is by far in my opinion, the best library both on the client and on the server for fetching data, pinging URLs, posting data to REST endpoints, or submitting forms or anything like that have used axios before - -47 -00:26:35,099 --> 00:27:18,300 -Scott Tolinski: No, I've always used just fetch with the the fetch polyfill from GitHub, you know, for browser support, but I haven't, I mean, the stuff you just said, hit close to home with the you know, the nice defaults. You know, there's absolutely nothing fun about setting your headers all the time and stuff like that. So no, I'm gonna give this library a look, I haven't, you know, I haven't done a ton of data fetching, to be honest, I work mostly with the YouTube API. But even then, you know, my systems in Meteor and Meteor has their own fetching library, which is just HTTP GET, which is really nice. And so for me, I haven't had crazy amount of use for this. But I can see, you know, the benefits almost immediately and be totally psyched to use this. - -48 -00:27:19,230 --> 00:28:08,970 -Wes Bos: It's, it's really nice and especially on when you're on the server side with node, whatever you use for long size, a library called request. And axios is all promised based, meaning that you can use it with dot then or you can use a sink await, if you haven't a sync function. And then also has the ability to use something called cookie jar, which is you can sort of fake or hold cookies, if you're doing server side requests, you don't really have the concept of cookies in your browser. So you can use this thing called cookie jar, which will allow you to save cookies and or fake cookies and submit them on every single request. So if you're doing any sort of scraping or logging into systems, that's going to be super helpful. They're nice. I like the name to cookie jar. Yeah. Some about JavaScript there. People are really good at naming their naming their projects. - -49 -00:28:09,000 --> 00:28:19,980 -Scott Tolinski: Yeah, I know, there is an influencer whether or not I'm excited to use a library or not, it's got a sweet name, maybe just a little bit more excited to use it. Yeah, exactly. There's - -50 -00:28:19,980 --> 00:28:44,160 -Wes Bos: also this is something I haven't used before. But there's there's a caching plugin for axios as well. So sometimes, I implement my own caching. And I think like, maybe it'd be easier if there's just like something I could plug into the the GATT library. So if I were to, to ping this URL again, then it would maybe Deliver me a cache of that actual data. So pretty sweet. Check it out. axios is really, really good. - -51 -00:28:44,940 --> 00:29:21,570 -Scott Tolinski: Nice. Yeah. Next I have a, I have one that's working with local storage variables. And this is just store dot j s. And it makes working with local local storage as easy as like store dot get or store dot set. And because of that, you don't have to worry about any sort of browser versions or you don't have to worry about any of that stuff. It just makes setting and saving information to local storage as easy as possible. I you know, basically could not work with local storage as smoothly as without this. - -52 -00:29:22,830 --> 00:31:04,920 -Wes Bos: That is pretty sweet. I have actually have a local storage one as well. And this is something I use heavily on my website, since the way that I do my courses is that I have a new domain name for every single one. I have a bit of trouble with sinking data between all of my actual websites. So we'll cross storage cross charges from Zendesk. So if you've ever had to do ever had like a chat pop up on a website or had to do like, if you had like a file an issue with someone's like a help desk software, they have this library called cross storage. And essentially the way that it works is that you create a hub. So you create a hub on on what website, and that is your local storage hub. And then you can give it permissions on all of these other domains, which you wish to share local storage between the two. So essentially, it will just pop up a little iframe in every other domain name. And then if you set local storage on one of your domain names, or if one of the other domain names set some data, it will sync between all of your domain names as if you are on a single domain name. But it will sync up between everyone. So I use that fairly heavily on on my websites. Nice. Yeah, that's pretty immediately super handy if you're working on a cross cross domain stuff. Yeah, you don't really have to, it's, it's pretty good in terms of telling you about the security of that. But you definitely need to, like check your stuff three times over. Because whenever you're doing anything that is cross domain, you need to be careful that you're not accidentally giving access to other domain names that should not have access to that data. - -53 -00:31:05,010 --> 00:31:06,150 -Scott Tolinski: Mm hmm. Absolutely. - -54 -00:31:06,210 --> 00:31:32,310 -Wes Bos: Like, if if Scott were to if you were to visit Scott's website, he shouldn't be able to load up my website in iframe and grab all of the local storage data from that'd be huge security issue word. Yeah. Next up, what do we got here? I got one called Faker j. s know if you've ever needed to create a bunch of fake data, whether it's names, last names, profiles. Let's take a look here. Well, - -55 -00:31:32,609 --> 00:31:55,170 -Scott Tolinski: yeah, Faker is one of those libraries that if you are doing any sort of testing, or you're building out some default data in your system, you've probably come across Faker is really just a, it's one of the coolest things ever to basically just implant a whole bunch of fake data. And it can come from anything from photos to names to locations to any sort of data that - -56 -00:31:55,170 --> 00:32:23,910 -Wes Bos: you want addresses. Yeah, postal codes, Country, Country codes, account names, credit cards, abbreviation verbs, images, you get the point, right, it's tons and tons of fake data. And I'm, I always love using, like good data when I'm even when I'm making something. So rather than just like mashing your keyboard, it's nice to be able to fill it with some some real world looking data. - -57 -00:32:25,230 --> 00:32:38,670 -Scott Tolinski: Yeah, absolutely. And if you I mean, if you're working in teams, and you need like, a default set of data, you know, couldn't make it any easier to populate that database, right? So yeah, yeah, absolutely. Faker is a big, big one. - -58 -00:32:39,840 --> 00:33:52,140 -Wes Bos: Big fan of that, um, I am going to take a break and talk about our sponsor. So a sponsor is fresh books, which is cloud accounting software, I use it myself to send out invoices to clients of mine, anytime I need to be reimbursed for travel. Anytime I have an expense, what I'll do is I'll quickly if I got a receipt in my pocket, I'll open it up, I'll snap a picture of the receipt, I'll input how much it was. And I can I can archive that receipt or throw it in the garbage. So anytime I have any sort of invoice that comes in any sort of expense. At the end of the year, what I do is I just hit export on all the data, from all of my invoices, all of my expenses, all of my clients, all of the different currencies. I know I have three or four different currencies at the end of the year. Give that all to my accountant and he's really happy with that I don't have to spend any time and I hate doing book stuff like that. I understand it. I just don't like doing it at all, because I'd rather be actually coding so big fan of fresh books. I've been with them for about seven years. If you want to get a 30 day free trial, go to fresh books comm forward slash syntax and make sure you enter in syntax in the How did you hear about a section? Thanks so much for them to sponsoring. - -59 -00:33:54,540 --> 00:35:04,170 -Scott Tolinski: Cool, so let's get back into these uh, utility libraries. I have a basically, I don't know if you've if you've migrated over to react router for for your stuff yet? Yes, I have. Yeah. Yeah, I was pretty bummed to learn that they don't have URL parameters anymore. Like query parameter parsing? Yeah. Yeah. So they sort of I mean, I understand the take, right. So it's, why include this when you could, if you need it, include it yourself, right? So yeah, luckily, there's no in the browser a way to basically pull out these query parameters from your string from your URL, but it's not totally browser compliant. So one thing I pretty much use all the time is this URL search params polyfill. And there's a couple of libraries here I use the one that's URL hyphen, search, hyphen, params hyphen, polyfill. However, there's also one without the word polyfill. That looks pretty popular as well. I don't know the difference between the two. I haven't really investigated that much. But it basically allows you to just parse your URL and grab out the query parameters or pretty much Anything as you need without having to worry about browser compatibility, - -60 -00:35:04,800 --> 00:35:20,960 -Wes Bos: I did not know that this was coming to the browser. So you're saying that, and this was actually one of my pics later. But if I have like a gnarly URL that's got a whole bunch of search params in it like three or four, it will parse that, like, it'll parse the string. - -61 -00:35:21,030 --> 00:35:41,730 -Scott Tolinski: Yeah. So check out a developer dot mot. Well, whatever. The Mozilla developer, it's called URL search. params. Basically, it's Yeah, it's utility methods for working with a string URL string allows you to get get all has keys set sort to string values. Oh, - -62 -00:35:42,960 --> 00:35:44,010 -Wes Bos: that's pretty sweet. - -63 -00:35:44,360 --> 00:35:48,540 -Scott Tolinski: Yeah. I guess more of a polyfill than a library. But you know, - -64 -00:35:49,530 --> 00:36:22,350 -Wes Bos: exactly. Well, I guess like, the tip would be that the browser now has or will have this thing called URL search. params. Which, if you've ever tried to parse the URL yourself, like, I always like, oh, how hard can it be split it on the ampersand and, and then and then split it each one of those on the equal sign, and you can call it a day. But there's so much that goes into dealing with URL search params. So that is pretty neat. It looks like it's a iterable as well, yeah, I - -65 -00:36:22,350 --> 00:36:37,880 -Scott Tolinski: discovered this when I was just trying to solve that react router four issue found an issue queue about asking about query parameters and react router, and someone recommended it in the in the issue queue. I'm just really psyched to learn that it exists. So nice. That's pretty cool. - -66 -00:36:38,360 --> 00:37:34,050 -Wes Bos: Well, along the same, I guess the same idea of that is, there's a library called or this little snippet called parse u ri, which if you have an entire string, and you need to get what is the domain name, what is the origin? What is the path? What is the hash? What is the not just the this search query after the question mark, this library will give you absolutely all of that, which is pretty sweet. And then I also when I was doing this, I also found out that someone said that you can just create do a document, create element and create like a blank link, and then set the href to whatever it is that you want. And then you can you can take that link and look for the protocol, hostname port, path name search, and hash, which is pretty neat. And the one thing that does not do is the IT WILL NOT chunk up your your actual search. So if you have three or four things in your search, then you need to use your actual library there. - -67 -00:37:34,110 --> 00:37:35,940 -Scott Tolinski: Gotcha. Cool, - -68 -00:37:36,000 --> 00:37:37,290 -Unknown: pretty sweet. - -69 -00:37:37,320 --> 00:38:34,730 -Scott Tolinski: Yeah, um, here's a library I use all the time for working with web hooks is the is n grok. I don't know how to say this. It's mg R, okay. And it basically just exposes, it connects here a port, and opens it up so that you can hit that port. So if you're working locally, and you need to test out your web hooks, what did I used to use, I used to use local tunnel and local tunnel would essentially crash for me every 20 minutes to an hour. And each time it restarted, it would generate a new URL. So then you'd have to go back into stripe, reset your web hook, reset your URL. And luckily, I've just shared asked around on Twitter what people use. And this end graph is by far the most Suggested Use it haven't had any issues with crashing, keeps the tunnel open, and has been making my life a lot better with working with web web hooks there. - -70 -00:38:35,730 --> 00:39:06,030 -Wes Bos: That's pretty sweet. I should say before we get 1000 are Twitter replies that local tunnel does allow you to specify a domain name, so that it will be consistent across it will if you do not give it a domain name, it will it'll give you a random key every single time. But it will allow you to say like Wes Bos, and then it'll try to give you Wes Bos dot local tunnel.me if it's available. And then that's what I've used previously to keep your web hooks consistent. - -71 -00:39:06,030 --> 00:39:10,190 -Scott Tolinski: Oh, nice. So you don't have issues with it. It's stopping after a period of time. - -72 -00:39:10,560 --> 00:39:45,990 -Wes Bos: And no, I've been I've been I I've heard a couple other people, which is why people really like and grok. So I've heard it's really good. But I am a big fan of a tool called browser sync. And browser sync has a local tunnel baked right in and you can just pass it a URL and I use I use that a lot because if I need to either do a web hook or show somebody a website that is only local or want to open it up on my phone and it's only on my computer, it will just expose it via an external URL. I guess what we'll do a whole show on like, kind of cool tools like that as well though. - -73 -00:39:45,990 --> 00:39:47,520 -Scott Tolinski: cool tools. - -74 -00:39:48,170 --> 00:39:48,690 -Wes Bos: Cool to - -75 -00:39:51,090 --> 00:39:58,620 -Scott Tolinski: tasty, delicious, cool tools. Okay, cool. So, yeah, what else we got here? Um, - -76 -00:39:58,620 --> 00:42:03,600 -Wes Bos: I got one called a sale. Which was massive in the node community a couple of years ago. And it's still really, really popular. A lot of people don't use it anymore, because we now have promises and async await. But there's this library called a sink. And it essentially allows you to do really good flow control in your application. So like, let's say, for example, you're trying to charge somebody's credit card and create an account, there might be four or five steps where you validate their data, you, you charge the credit card, you create an account, you check if there's actually an account, or whatever needs to go on in between that. And if you were doing that, just with callbacks, it would really quickly get into what's called callback hell. So what a sink allows you to do is like, there's all these different methods that live inside of a sink like there is, you can run parallel, you can run them after series, you can run them in waterfall, where you do one, you pass the result to the next one, and you pass the results. The next one, a lot of these are now are now obsoleted by a sink away, but some of them were if you need to do some like really heavy stuff, like for example, I was updating 100,000 Records. And my computer couldn't do all of them at once. But I also didn't want to do one app at a time. So there's, I think there's like you can do like, forget what it is. But you can say like, do at least five at once or do at most 12 at once. And if you ever have any sort of like complicated flow control, where you need your code to run as fast as possible and make a lot of sense, take a look at the methods of a sink. So well the way I think about it is that like lodash is this like helper methods for dealing with data. A sink is a whole bunch of helper methods for dealing with complicated flow control where things need to happen a synchronously and, and a synchronous synchronously at different times. Nice, yeah, big fan of it. What else we got from you, Scott, anything else? - -77 -00:42:11,100 --> 00:43:03,150 -Scott Tolinski: tier might have hit my limit of utility library. I don't know, I think a good suggestion is to also don't be afraid to roll your own utility library. I know we mentioned before that, you know, you might end up building up a maybe there are a large file or folder structure of files. But even creating helpers for your own code, whether it's you don't like a particular libraries API, and you want to maybe change it or there's one particular function that you're reading all the time, and you want to write some defaults for yourself. writing these like helper methods or helper functions for yourself, could be a really super useful way to save yourself some time overall, as long as it's, you're using things like bundling and stuff like that you're not bundling a whole bunch of helper functions that you don't need, you know, so yeah, don't I guess it's not necessarily library. But yeah, don't be afraid to write your own helpers. - -78 -00:43:04,130 --> 00:43:37,610 -Wes Bos: I think that's really important, especially if you are in the interviewing stage right now. Because often, what interview questions are, are these things that you go, I don't, I don't know, I would have just used lodash for that. So if you can, like, be like, Hi, I wonder how I would do that without lodash is sort of like when we transition from jQuery to vanilla? Or like, how would I do that without jQuery? Maybe challenge yourself and say, like, how would I do that without? Without lodash? How would I just write that in just vanilla JavaScript. And the best part about all - -79 -00:43:37,610 --> 00:44:12,180 -Scott Tolinski: of that is, is you have a really awesome answer sheet, if you like, you challenge yourself to do this. And then you can go look at the code of lodash and just say, Oh, this is how they're doing it. And you know that because of you know, who's behind lodash, you know that their solution is going to be top notch, like, so you can look at that code and learn so much about JavaScript, and maybe compare yours to that and think about how could you have changed your thinking to make it a little bit better based on what they're doing in other libraries, right, - -80 -00:44:13,800 --> 00:46:08,130 -Wes Bos: though? Totally, totally. So I got one more here that I'll say I've got a couple others, but I think that they're better suited to a different episode. But this one is called blink. j. s. And it's not even a library. It's just a just from Paul Irish that he he made this years and years ago. And essentially what it is it when we move over or if you've moved over from jQuery, you're used to like the the dollar sign selector to grab things and you're used to the nice.on method, which will bind to add event listener. So what blink dot j S will do is it will make window dot dollar equal to document dot query selector So, so instead of saying document I query selector all, you will just say dollar, and then that will go off and select all the items. If you've done my node course, you know that this is actually, we use a bit of a modified version in my node course of this just because it's so much easier. And then it will also modify the prototype of a node with just every element on the page. It will just, it basically just takes dot add event listener, and makes it.on. So you can, you can just chain.on onto your elements. And then there's a couple other things that it does, oh, yeah, if you can use on, which will loop over. So like, for example, if you've had, if you have a node list, that's six or seven items, you know, you have to loop over and attach an event listener to each one, this will just say.on. And will, it'll attach that event listener to every single one of them without you having to explicitly loop on it. So it's tiny, it's 15 lines long. But it makes life a lot easier, especially if you're used to the nice API that jQuery gives you. And the vanilla API is is not so nice. - -81 -00:46:08,490 --> 00:46:37,230 -Scott Tolinski: Nice. Yeah, love that. I mean, anyone who's grew up with jQuery, or has used jQuery extensively, you know, this some of this stuff, is, is one of the main reasons why you didn't want to go to just plain vanilla j. s, right? Just having that those long, sort of just methods that you have to remember, the techniques a little bit different, you have to worry about browser edge cases. So it's nice having stuff like this, to sort of ease that pain a little bit. - -82 -00:46:38,070 --> 00:47:19,620 -Wes Bos: Yeah, and there have been people that have taken this and and built it out a little bit further. So if you look up blink j. s, you'll also find some GitHub repos, I believe what they also do is, I believe what they added was the ability to if you select a node list, and there's nothing found and you try to chain on or to add event listener to it, it will fail silently, which is again, that's what jQuery does. And if you try to call the Add event listener against an empty node, or something that is undefined, you're going to get that problem cannot read property or cannot call mended. addEventListener of undefined. So it's, I don't know, it's kind of a slippery slope, because then your mind starts going. And before you know it, you've created your own jQuery. Yeah. - -83 -00:47:22,260 --> 00:47:31,440 -But I think adding a couple lines to your code base for boiling jazz is totally worth it if you're doing a lot of vanilla Dom interaction stuff. - -84 -00:47:32,610 --> 00:47:40,440 -Scott Tolinski: Cool. Love it. Awesome. I mean, these these, there have been some tasty, tasty utility treats. - -85 -00:47:43,230 --> 00:47:45,810 -Wes Bos: Well, let's move into our sick picks. - -86 -00:47:45,840 --> 00:47:46,500 -Scott Tolinski: Mm hmm. - -87 -00:47:46,500 --> 00:47:49,860 -Wes Bos: What do you got for a sick pick today, Scott? Yeah, today, - -88 -00:47:49,890 --> 00:48:37,800 -Scott Tolinski: my sick pick is a techy USB hub. So so touchy makes some really nice looking products, by the way. They just discovered them when we Wes and I both recently got the new MacBook Pros, which have a bunch of USB C ports, which obviously don't connect to a whole lot. So you know, we were We've been living the dongle life, and Wes recommended the Cal digit past couple of videos ago. And that one is a brilliant solution for if you need a lot, right? You're driving two monitors, right? And it has it powers itself. So it functions your power cord and stuff like that. I didn't need all that stuff. I'm only driving one monitor. Granted it is a ultra wide weak. Yeah. - -89 -00:48:38,820 --> 00:48:43,050 -Wes Bos: Okay, it's a 4k. ultra wide. Yeah. Wow. Okay, carry on. It's - -90 -00:48:43,050 --> 00:48:49,470 -Scott Tolinski: 38 inches, man. Then this thing is huge. It's seriously ridiculous. - -91 -00:48:50,040 --> 00:48:51,360 -Wes Bos: But is it 4k? - -92 -00:48:51,360 --> 00:48:58,680 -Scott Tolinski: It's it's not they say is 4k, but it's not truly 400 pixels. I would have to check the exact dimensions. - -93 -00:48:58,710 --> 00:49:00,300 -Wes Bos: It's close. It's long. It's - -94 -00:49:00,300 --> 00:50:01,710 -Scott Tolinski: Yeah, it's close. Because it's long. Yeah, it's three 344 by 1440 1440 tall. It's it's super wide. And it's curved. It's awesome. But either way I didn't need to drive multiple monitors just one and yeah, this thing's great because it has power pass through. So you plug your MacBook power into one end of it. And then it has three USBs it has Ethernet and it has HDMI and then an SD card and a micro SD card. So they make a whole bunch of different ones and all different shapes and sizes based on your needs. But the one I got was this type C 4k. Ethernet adapter is 89 bucks has really stepped up my dongle game. Pretty heavy. I actually recently got gigabit internet over here. So I got 1000 up and 1000 down. Wow in my office. Yeah. So I really needed that Ethernet wired up to take full advantage of that. So this thing has been making My network fly. - -95 -00:50:02,550 --> 00:50:13,170 -Wes Bos: That's sweet. So you just plug this little thing. Am I looking at it right now where it has two USB C connectors and it kind of just clips into the side? - -96 -00:50:13,290 --> 00:50:38,670 -Scott Tolinski: No. So I got the the Type C multi port adapter. It's it. I see it. Yeah, so it only takes up one I didn't want to take up to the other one potentially could have taken up your headphones or your headphone jack and stuff on the one side. So this one's a little bit more flexible. Maybe a little less features. I'm not quite positive about that. But it has served me well in these past like week or week, two weeks that I've had it. - -97 -00:50:39,900 --> 00:50:42,000 -Wes Bos: Pretty sweet. What color did you get? Oh, I - -98 -00:50:42,000 --> 00:50:48,090 -Scott Tolinski: got the Space Gray. Because you got to get matchy matchy matchy with the laptop. The only way you can go yet I - -99 -00:50:48,090 --> 00:50:49,620 -Wes Bos: got space. Great there. Oh, yeah. - -100 -00:50:49,950 --> 00:51:01,200 -Scott Tolinski: Yeah. I don't know why Apple didn't do this sooner with I mean, I think people have been asking for like a black or a darker aluminum laptop forever. So I'm pretty psyched about the Space Gray. - -101 -00:51:02,430 --> 00:52:26,070 -Wes Bos: Cool. Well, my pick of the sick pick, not pick the day sick pick is a book called essential ism. And this is a book that I actually I read or audio booked, maybe six months ago, and I'm getting back into it again. I'm just gonna give it another listen. Because it was so good. I often don't like leave books been like, wow, that was amazing. But this essential ism book essentially just looks gives makes you look at your life and cut out the stuff that you don't need. So I think everybody's a little bit over subscribed these days. I think as I get busier, I realized that like, I like to say yes to a lot of things. But then I often find myself looking back and be like, why did I say yes to this, or, Oh, it's so annoying that I got to spend a whole day doing X, Y or Z or I'd much rather just be doing the core fundamental thing that is running my business, which is creating courses that's at the end of the day. That's what all it is. So this essential ism book is is fantastic in that it shows you how to cut out stuff, and how to evaluate the different things in your life of whether they would be worth doing or how to evaluate what you should actually be spending time on in both your business and your life. So So is this it's a fantastic book. Yeah, go ahead. Is - -102 -00:52:26,070 --> 00:52:32,640 -Scott Tolinski: this the centralism? The disciplined pursuit of less is this. That's it. Okay, cool. Just making sure I'm looking at the right one. - -103 -00:52:32,970 --> 00:53:01,380 -Wes Bos: Greg McCowan is is the author of this one. And I again, I got it on audiobook about six months ago. I definitely recommend the audiobook or the hardcover if you prefer to read but it's it's something that I'm constantly doing. There's a really good quote by it. The quote is if it's not a hell yes, it's a no. Hmm. And that's by let me get the author of that - -104 -00:53:01,590 --> 00:53:04,890 -Scott Tolinski: already. Like that, quote. Sitting well with me right now. - -105 -00:53:06,720 --> 00:53:15,690 -Wes Bos: Um, it's like one of my favorite people ever. It's just the guy behind CD, baby. Oh, - -106 -00:53:15,720 --> 00:53:17,070 -Scott Tolinski: yeah, I remember CD Baby. - -107 -00:53:19,650 --> 00:54:00,330 -Wes Bos: Okay, I gotta figure this out. It's gonna bug me, Derek Severs? He said, If it's not a hell, yes, it's a no. And he has another really good book that I'll probably recommend another one. But essentially, if something is not getting you super excited, then it's probably not something you should be taking on. And I'd be careful with that. Because sometimes people shy away from stuff because they're a little bit intimidated or they're nervous, about about taking on something that's a little bit past them. But I often find myself regretting items that were only like, uh, huh, I could be cool. I'll do it. But when really it should have been. This is not a hell yes, I'm cutting it out of my life. Yeah. And - -108 -00:54:00,330 --> 00:54:38,520 -Scott Tolinski: that's one of those things you have to practice. I am the exact same way and as many times as you actually, you know, can, you know, praise yourself for saying no to stuff? It is really easy to creep back in and then you know, you'll find yourself a month later being like, Oh, wait, I should have said no to all this stuff. I thought I was doing really well. I know. I'm the exact same way I say yes to way too much stuff. And it cheapens everything you do, right, because no longer you're gonna get to do that much attention to any individual thing. So I'm gonna have to read this. Yeah, I have not, I will put it on audiobooks. I'm not a talented reader. So - -109 -00:54:39,600 --> 00:55:27,690 -Wes Bos: awesome. Let's move on to our last section, which is shameless plugs. And I actually don't want to plug my own stuff today. I want to plug a friend of mine. I don't know. I'll call him a friend. And I'm gonna totally butcher his name. Denise gajar. I'm so sorry. If I just Totally butchered that. But what happened is that every time we release a syntax episode, he creates this really cool like photoscape of what the episode is about. So for example, like the tooling one, he got it, he got a picture of his iPhone, he put a bunch of tools around it. Or for, for my origin story, he got a like, kind of like a superman but with like a really hilarious shirt that I would wear and put it underneath. - -110 -00:55:27,720 --> 00:55:29,460 -Scott Tolinski: So That sure was on point. Yeah. - -111 -00:55:31,710 --> 00:56:14,820 -Wes Bos: Or like the money one, he put like the picture of the iPhone, and it looks like Wi Fi, but with actual money on top. So he spends a lot of time on these. I think they're, they're really pretty cool. I've actually since hired him to do some design work for me, which is, I guess, a pro tip on how to get noticed. It's worked well. But the stuff he's been doing is just amazing. And also if you go on Instagram, it's Denise DHANHGA jj AR. He's right now he's doing the CSS flags, where he's doing every flag in the world in pure CSS. And it's just blowing my mind of how cool it is. Yeah, - -112 -00:56:14,820 --> 00:56:26,400 -Scott Tolinski: I've been telling is I really liked his, uh, his solutions to some of that stuff. So like when he runs into maybe a tricky, tricky flag. I've been really liking to see what he comes up with. So yeah, - -113 -00:56:26,460 --> 00:56:45,690 -Wes Bos: yeah, it's, it's very, He always talks about like, like, problems that he's having, which I love seeing people work out in the open like that. So definitely check out his Instagram, he posted to Twitter as well. But the Instagram is, I think kind of he's got almost 6000 followers on Instagram. So that's probably quite a few of you already following him. So - -114 -00:56:46,230 --> 00:57:53,250 -Scott Tolinski: yeah, so my shameless plug, I'll follow your lead and plug something that's not my own. Actually, it's kind of my own. In a way. I made a video on level up tutorials last week, you can check it out right now about easy snippets. Yeah. So this tool was created by Pavel Gish back. And it's basically a website that allows you to paste in some code. And then there's three tabs, there's a VS code, a sublime or an atom tab, and it outputs the snippets syntax. So if you're making the writing code snippets, and then neither of those editors, you will know that especially in VS code, it's a pain because each new line has to be its own string, you can't do like a multi line string with it, like you can add them. So this just takes away all of that stuff. You just enter the snippet name, you paste in your code and you know, blow up your your snippet. Shout out to you that you can just paste right into VS code. So awesome. Worked by Pavel there. I've been just tweeting about it. I've had it on my YouTube channel. So if you follow me in any capacity, you've probably seen this already. But seriously, excellent. Is the - -115 -00:57:53,250 --> 00:57:54,240 -Unknown: URL for it. - -116 -00:57:54,300 --> 00:58:16,950 -Scott Tolinski: It's his website, you'll want to just either go to my channel, go to the video and click on it. Or hit up shownotes Yeah, show notes. Exactly. Well, we'll link to it in there. So it's pavlos website. He's has a Polish last name. So I don't want to have people try to try to type that out every time you know, as someone with a Polish last name themselves knows the how well that works out. - -117 -00:58:18,000 --> 00:58:47,940 -Wes Bos: Yeah, I think everybody gets their last name, butchered, butchered, I often get both. Both. Yeah, yeah. Makes sense. But it's boss. Cool. Well, that's it for this week. Hopefully you enjoyed it. If you have ideas for the show. Anything you'd like to see us covered. Make sure you hit us up. We're on Twitter. I'm at Wes Bos and Scott is at s total insky. Awesome. Well, thanks so much. And we'll see in the next one. Head on over to - -118 -00:58:47,940 --> 00:58:57,900 -Scott Tolinski: syntax FM for a full archive of baller shows. Don't forget to subscribe in your podcast player. Drop a review if you'd like the show. Until next time - diff --git a/transcripts/Syntax90.srt b/transcripts/Syntax90.srt deleted file mode 100644 index 3c6726faf..000000000 --- a/transcripts/Syntax90.srt +++ /dev/null @@ -1,1416 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax podcast with the tastiest web development treats out there. strap yourself in and get ready to Lansky and West boss. - -2 -00:00:10,559 --> 00:02:02,850 -Okay, I think I think we've managed to do the furniture moving in record time. I'll be honest, that would have been a whole lot quicker heard Western Scott not demanded that we got them a shrubbery. They were it was it was a deal breaker. I'll be honest, I'm so I'm so excited about about this as the way to finish the day, when we first talked about doing jams calm. We spoke to Western Scott really soon and said, you know, would you be prepared to come and record one of your podcasts live here, apart from anything else? West Scott on syntax FM, we've just been incredibly supportive for Netlify and Netlify, sponsored the podcast for a little while. And the thing that's just been amazing to us is not just how many people have discovered it discovered Netlify through syntax FM, but how loud they are, when they find it. They like shouting to the world. Not only that the founder, but they found it through syntax FM, the very very vocal user basis really excited, exciting. We had several talks throughout the day that I've kind of touched on education, Quincy Larson just a moment ago, really inspiring stuff talking about his mission to spread education about about coding, if it's so nicely that we've got West and Scott both here, because Wes Bos is just another one of these annoyingly prolific people who just like churns out doesn't just churn out content. It's so good, like learning all kinds of things about development, really prolific. It's just like a go to resource for from Wes Bos. And then Scott Tolinksi is just the same, you know, with with his tutorials are just all over the web, really, really good quality. And somehow for for how many? How long? Have you been doing syntax FM? About a year and a half they've been doing this podcast, and they never met until we brought them together. So so so there was a couple of hours. - -3 -00:02:04,710 --> 00:02:05,760 -Oh, oh, - -4 -00:02:07,680 --> 00:02:27,870 -I can't decide if that's pride or or biol. Rising is a lovely moment. So we're just so excited to have them here. I think we can have lots of fun hearing from them. I think there might be microphones in the audience at some point. So brace yourself, please get involved. Give them a huge round of applause. Scott Tolinksi. And Wes Bos are - -5 -00:02:30,180 --> 00:02:33,990 -not gonna miss that. Hey, Hey, - -6 -00:02:35,000 --> 00:02:36,270 -Scott Tolinski: Hey, Hey, - -7 -00:02:36,380 --> 00:02:40,440 -Wes Bos: good to see everyone. Just gonna get this is two ferns with Wes and - -8 -00:02:40,440 --> 00:02:42,630 -Unknown: Scott. Yeah, this reason - -9 -00:02:42,660 --> 00:03:19,650 -Wes Bos: this is really weird, because we've never like met, and also have never recorded in person, let alone being in front of many hundreds of people. We're really excited to be here. So thanks so much for coming on out. So for those who don't know, we are a podcast called syntax. We're available at syntax out FM, we we do web development. We talk about web development twice a week. So on Mondays we have this thing called hasty treats, which is a dumb way of saying it's a small podcast, usually it's like 2025 minutes. We were hoping it would be like 12 minutes, but sometimes they're like 45 minutes. And then on Wednesdays - -10 -00:03:19,680 --> 00:03:35,789 -Scott Tolinski: Yeah, on Wednesdays we have a tasty treats, which is also a dumb way to say a longer podcast, which is where we take an individual topic and spread it out over the course of an hour. So depends. Yeah, sometimes a little bit longer as well. But you know, we don't like to to limit. - -11 -00:03:36,120 --> 00:03:39,690 -Wes Bos: Totally. So we are sorry. Nope, that's wrong. Yeah, - -12 -00:03:39,690 --> 00:03:40,979 -Scott Tolinski: we are not Scotland ski. - -13 -00:03:43,560 --> 00:03:54,780 -Wes Bos: By the way, Adam, cut that out. Yeah, we have an editor named Adam. And we may sound like we're very good at podcasting, but we're not and Adam cuts everything out. So we might have a couple little item. Cut that out. - -14 -00:03:54,810 --> 00:04:08,819 -Scott Tolinski: Yeah. My name is Scott Tolinksi. I'm a web developer. I'm from Denver, Colorado. You can find me at St Lynskey on Twitter, Instagram. I'm also at level up tuts or level up tutorials all over the web on YouTube, Instagram, all that good stuff. - -15 -00:04:09,720 --> 00:04:46,560 -Wes Bos: My name is Wes. I build web development courses most recently released one on advanced react. Anyone ever taken one of my courses before? Awesome. I'm from Canada, which is why I say JavaScript funny. And I apologize for that. I'm at Wes Bos on Twitter and Instagram. So we're here at jam SATCOM, which you obviously know, but there's 30,000 other people listening to this podcast right now that don't know that maybe we're at a conference right now. And jam stacks stands for JavaScript API's and markup and we've seen some amazing talks today that really dove into I think what the future of web development is going to be looking at. - -16 -00:04:46,580 --> 00:05:42,570 -Scott Tolinski: Yeah, and speaking of jam stack, this conference is sponsored by Netlify. Now Netlify is not only an excellent podcast, or an excellent host for your website, they're also an active a host of this conference and everything. So we we both love, I know you've listened to the podcast a while you realize how much we both love Netlify so much. I personally host everything that I can at Netlify anything anytime you need front end code, but not just front end code, you have access to the serverless functions, you have access to the content form, you have access to identity, all that good stuff. If you need a host seriously, the first place you should be looking at is Netlify. And I mean, if you know me or listen to the podcast at all, then you would know that I'm not saying that because they're a sponsor. I truly love this service. So thank you so much for Netlify for sponsoring today's episode of syntax. - -17 -00:05:42,930 --> 00:05:45,240 -Wes Bos: How many of you do listen to the podcast? - -18 -00:05:45,870 --> 00:05:47,100 -Scott Tolinski: Awesome. Oh, Dave, you - -19 -00:05:47,100 --> 00:05:50,130 -Wes Bos: were excited to see a Scott ad transition in person. - -20 -00:05:55,290 --> 00:06:02,550 -So today, what are we gonna do today? We're pretty much just gonna goof around for an hour. And then that's the end of the conference? No, really, we're - -21 -00:06:02,550 --> 00:06:20,280 -Scott Tolinski: gonna break it down into a couple things. We're going to start with what we call spicy jam tips, some Hot Tips for building jam stack applications, then we have a game that we're calling this, that or both. And I think you were all gonna have a ton of fun with this. We were cracking up when you're making this. So this is I'm excited. We think it's funny, hopefully - -22 -00:06:20,280 --> 00:06:43,200 -Wes Bos: Yeah. Then we're gonna play stumped. Is this something we do on the podcast? Where Scott and I try to answer interview questions without any sort of preparation. And we usually fail horribly. So this time, instead of embarrassing ourselves, we're going to ask you from the members, a couple of brave souls to come on up, we'll ask you some tricky JavaScript or web development related questions. And we've got some pretty sweet prize. - -23 -00:06:43,230 --> 00:06:59,370 -Scott Tolinski: Yeah, prizes. After that we have underrated or overrated, or overrated or underrated, which is a segment that we're going to be talking about maybe new stuff, fun stuff, or just funny stuff. And we're going to maybe discuss a little bit whether or not we think it's underrated or overrated. - -24 -00:07:00,270 --> 00:08:04,520 -Wes Bos: Finally, we're gonna wrap it up with a q&a with Scott and WEF. Thank you, man, that makes me feel so good. All right, so let's get into the first section, which is spicy jam tips. These are some hot tips for getting started with the jam stack we just kind of came up with over building apps over the last couple years, here's a couple little hot tasty tips that we've been working with. First one that I have is set your auth tokens by default. So something that happens in your application, when you want to ping one of your services, often, what will need to happen is you'll need to like reach into local storage or somewhere else and grab your API key or your JW T or your bearer token, and then send that along for the ride with your request. So whether you're using Apollo or axios, or any other sort of like, fetching library, you can usually in these, you can set it up so that every single request will automatically grab that token and send it along for the ride. So you don't have to do that in every single request. It's a small thing, but it really cuts down on how much code you need to write on every request. - -25 -00:08:04,920 --> 00:08:37,909 -Scott Tolinski: Yeah, next, I would say a lot of times when people first hear jamstack, they may be go towards static or static sites, and even the static sites that you might build with the jam stack. I think people maybe corner themselves into this static territory. But not only can static sites be as dynamic as you need them. But really working with the jam stack can be as large as you need it to be. I mean, it's not for small, just small projects, quick projects, it's for any project, especially things that you're working with outside API's and just need to be as fast as possible. - -26 -00:08:39,210 --> 00:08:58,399 -Wes Bos: Next one is don't wait to use new tech. So sometimes we talk about all of this new exciting, this is not necessarily just jam sack. But it's really important to figure out how do we progressively enhance where we can make the experience better for people who do have these newer browsers? Or how do we fall back in gracefully degrade Where is needed. - -27 -00:08:59,419 --> 00:09:38,899 -Scott Tolinski: The next is there are many jam stack libraries in the sea. I mean, really, the idea here is that there's a ton of stuff around the jam stack. So if you've only experienced one particular library or one particular platform, even if you're not comfortable in other areas, or other platforms, venture out and see what else is out there and try different things. And really just see what works best for you. Because sometimes you might pick something up because it's the first library platform that you've used. But in reality, there might be one that you're even faster with or maybe it connects to you in a better way. So feel free if you have small projects or whatever, try them out, try out a whole bunch of different stuff because there's there's so much great stuff around the the jam stack ecosystem, - -28 -00:09:39,799 --> 00:10:08,250 -Wes Bos: along with trying stuff out his side projects, I think it's a key to to both learning, because it's intimidating to take on this new tech, especially if you're trying to like stick your neck out and suggest to other people on your team. This is what we should use. It can be hard to convince other people we've always done it this way. There's nothing wrong with this way. Why would we need to move it over. So I always recommend you just build a couple little side projects, so you have something to show. And you're when you're going into much larger potentially client projects, you're gonna feel a lot more comfortable with it. - -29 -00:10:08,880 --> 00:10:11,070 -Scott Tolinski: Cool. All right now, - -30 -00:10:11,070 --> 00:10:27,149 -Wes Bos: I'm really excited for this. This is a segment that we're calling this, that or both. To give you a little bit of heads up what this is. So we are going to give you the name of a possible web development library or framework. And you - -31 -00:10:27,270 --> 00:10:31,909 -Unknown: all get to vote on whether or not it's real, or we're just pulling your leg. - -32 -00:10:33,020 --> 00:10:34,399 -So head on over to - -33 -00:10:34,399 --> 00:10:51,750 -Scott Tolinski: take your phone out. Yeah, pigeonhole.at forward slash tasty. And you're gonna be able to vote as we go here. And then we'll have all of the results live on the screen here so we can see what everybody is thinking. - -34 -00:10:52,890 --> 00:11:01,830 -Wes Bos: So once you go to that, there's going to be a this stat or both. Click on to that. Click through to that. There we go. Five people. 11 people. 12 people. There we go. figured it out. - -35 -00:11:05,669 --> 00:11:06,240 -Unknown: Cool. - -36 -00:11:07,559 --> 00:11:11,460 -Wes Bos: I don't know how long we need to wait. We'll see. Wait till we get to we'll wait - -37 -00:11:11,460 --> 00:11:14,370 -Scott Tolinski: till it stops increasing. This might be time for an NBA Jam joke. - -38 -00:11:14,490 --> 00:11:27,330 -Wes Bos: Okay, what do you got? So not everyone? Yeah. When we first talked about this, Scott got his notebook open is like, I don't know what we're gonna talk about a jam stack. But I need to have an NBA Jam, Joe. Yeah. - -39 -00:11:27,360 --> 00:11:34,080 -Scott Tolinski: My first the very first note I wrote was make NBA Jam joke. And then last night, I was like, Hmm, I really need to come up with an NBA Jam. - -40 -00:11:36,120 --> 00:11:44,340 -Wes Bos: We hit 100. Now we're dipping. Alright, I think that's good. Let's let's start off Scott. Can people still join as it goes? Yes. Yeah, people can still okay. - -41 -00:11:44,340 --> 00:11:54,149 -Scott Tolinski: All right. Well, we'll still climbing. All right, let's start this quiz. The first one. Is Evo RX. - -42 -00:11:55,350 --> 00:11:58,260 -Wes Bos: Is it a high end carbon fiber roadbike - -43 -00:11:58,679 --> 00:12:07,770 -Scott Tolinski: or a Redux lid for asynchronous and event based operations? I'll give you a couple of seconds here. Oh, man. 140 people in? - -44 -00:12:10,080 --> 00:12:15,390 -Wes Bos: Oh, tell you how many votes there are? Yeah, a lot of votes are climbing. It's your votes and get your votes in? - -45 -00:12:15,390 --> 00:12:20,970 -Scott Tolinski: Is it a high end carbon fiber road bike or a Redux library for asynchronous and event based operations? Or both? - -46 -00:12:21,000 --> 00:12:41,159 -Wes Bos: I guess yeah, it can be most of these will have an option for both of where they are both. Alright. I think that's good. Let's see. It is a car of a high end carbon fiber road bike. 66.6%. Good job. All right, next one. Next one jumpsuit. Is it a rap rock group from Flint, Michigan? - -47 -00:12:41,640 --> 00:12:45,929 -Scott Tolinski: Or a minimal react and Redux framework? Or both? - -48 -00:12:52,470 --> 00:12:56,940 -Wes Bos: I'm really impressed with that last one. Everyone got 66% of you. - -49 -00:12:58,320 --> 00:13:05,520 -Scott Tolinski: Alright, let's see it. All right, going to reveal get your votes in a minimum. - -50 -00:13:07,260 --> 00:13:20,850 -Wes Bos: So 60% voted both but the correct answer was only 26% of you knew that it was a minimal react Redux. That would be an awesome rap rock group. - -51 -00:13:20,880 --> 00:13:22,020 -Unknown: It's perfect. Yeah, - -52 -00:13:22,020 --> 00:13:30,750 -Scott Tolinski: I ideal name. Next one, is Afro dating? Is it a react styling library - -53 -00:13:30,779 --> 00:13:33,870 -Wes Bos: or at best selling a erotic novel? - -54 -00:13:44,429 --> 00:13:50,370 -Yeah, that was one of the prizes is the actual copy copy of the novel. Signed by me. - -55 -00:13:50,460 --> 00:14:01,169 -Scott Tolinski: All right. All right. So yeah, revealing Oh, two bits to be fair, isn't very likely a chance to actually ride along at - -56 -00:14:01,169 --> 00:14:09,570 -Wes Bos: home. 58% of you voted both which was wrong. As 27% of you voted as a rack styling library. - -57 -00:14:12,390 --> 00:14:13,620 -Scott Tolinski: Alright, next. - -58 -00:14:13,860 --> 00:14:19,590 -Wes Bos: Next is you go Is it a static site generator but built in Oh, camel, - -59 -00:14:20,010 --> 00:14:44,970 -Scott Tolinski: or is it a mini hatchback built in the former Yugoslavia? Your votes in? All right, we got revealing the answer. All right. Oh, winner. It's a winner winner. - -60 -00:14:44,970 --> 00:14:51,960 -Wes Bos: So 46% of you correctly guessed that it is a mini hatchback built in the former Yugoslavia. Which is true. - -61 -00:14:51,960 --> 00:15:07,020 -Scott Tolinski: All right, number five. We have C control. Is this a modern state management library. For web components, or is it a studio headphone mixer? Or both? - -62 -00:15:07,529 --> 00:15:08,130 -Wes Bos: Both. - -63 -00:15:14,279 --> 00:15:14,970 -Unknown: Alright. - -64 -00:15:16,859 --> 00:15:24,120 -Scott Tolinski: Alright, lock those votes in. Here we go. Oh yeah 4.8% correctly - -65 -00:15:24,120 --> 00:15:27,630 -Wes Bos: guessed it's a studio headphone mixer. Correct. Job. - -66 -00:15:28,890 --> 00:15:29,640 -Scott Tolinski: Number six. - -67 -00:15:29,669 --> 00:15:31,529 -Unknown: Next is the Yak back. - -68 -00:15:32,010 --> 00:15:40,950 -Scott Tolinski: Is it a recordable HTTP testing interface? A popular 90s electronic toy? Or both or both? - -69 -00:15:47,370 --> 00:15:48,450 -honored 53 - -70 -00:15:50,940 --> 00:15:52,590 -Unknown: Oh. - -71 -00:15:54,510 --> 00:16:00,049 -Scott Tolinski: All right. Ready for the reveal? Oh, - -72 -00:16:00,270 --> 00:16:14,130 -Wes Bos: incorrect. It is both. Most of you knew that it was the electronic toy who had a yak back when they're a kid. Yeah, no, we're not so much fun. But it also is a recordable HTTP testing interface. Also, - -73 -00:16:14,130 --> 00:16:25,440 -Scott Tolinski: yes. All right. Next one. Juice. And this is spelled j o s e for those of you playing at home? Is this a East Coast juice bar with six locations? - -74 -00:16:25,950 --> 00:16:29,549 -Wes Bos: Is it a meta object system for JavaScript? Or - -75 -00:16:29,580 --> 00:16:32,100 -Unknown: a popular Instagram? vape. Daddy? - -76 -00:16:33,179 --> 00:16:37,320 -Wes Bos: He's got over 600,000 followers, or all three? - -77 -00:16:41,159 --> 00:16:42,210 -Unknown: Juice. - -78 -00:16:47,100 --> 00:16:49,950 -Scott Tolinski: All right, lock those votes in here we go. - -79 -00:16:54,149 --> 00:16:56,299 -Unknown: Ah, - -80 -00:16:58,529 --> 00:16:59,580 -set so 50 - -81 -00:16:59,610 --> 00:17:14,220 -Wes Bos: only 15% of you did it right, which was a meta object system for JavaScript 20%. We thought it was a vape daddy from Instagram. Oh, and most of you thought it was all three. - -82 -00:17:14,280 --> 00:17:23,190 -Scott Tolinski: I had to Google. This wasn't an actual juice bar. Before we did this because I was not convinced. Next we have easy router. - -83 -00:17:23,810 --> 00:17:41,730 -Wes Bos: Is it a client side object oriented router written in vanilla JavaScript? Or a drain cleaning apparatus popular amongst local plumbers? Oh, some of these? I'm just like, what is it? A guy we have the right answer on here. - -84 -00:17:46,230 --> 00:17:57,800 -Scott Tolinski: Yeah, when we went back through this afterwards, and we were trying to bold the right answers, and some of them I was just like, I'm gonna let's do this. What's the right answer? All right, what do we got? Alrighty. Revealing this answer. - -85 -00:17:57,830 --> 00:18:13,740 -Wes Bos: Oh, 50%. Of You guessed correctly a drain cleaning apparatus. I thought router would be like very tricky because it's object oriented. So instead of having double Oh, yeah, blow in there. Yeah. Yeah. So you want to make an object oriented router. Please go ahead. And - -86 -00:18:13,770 --> 00:18:19,470 -Scott Tolinski: yeah, I think it's an open open namespace. It totally is. Okay, next. Okay. - -87 -00:18:19,950 --> 00:18:27,240 -Wes Bos: We got aqueduct. Is it a server rendered ORM and OAuth 2.0 based framework built in Dart? Or - -88 -00:18:28,530 --> 00:18:48,660 -Scott Tolinski: is it an early 2000s pop group hailing from Venice Beach. Okay, let's see. Let's see. Let's see. All right, then. Ready to reveal? Oh. - -89 -00:18:50,700 --> 00:19:03,420 -Wes Bos: So it is a server rendered RM and OAuth 2.0 based framework built in Dart? 54%. Has anyone ever used that? No one. That's impressive. Yeah. Yeah. - -90 -00:19:05,490 --> 00:19:13,290 -Scott Tolinski: All right. Number 10. Gort? Is this a 1980s animated cartoon series villain, or is it a ccli - -91 -00:19:13,290 --> 00:19:17,330 -Wes Bos: toolkit for Robo Robo ops written in go? - -92 -00:19:19,020 --> 00:19:23,280 -Scott Tolinski: Or both? It's a tricky one. - -93 -00:19:29,640 --> 00:19:51,350 -All right, lock those votes in here it comes. Oh on Yes, there is a caveat here. Gort is apparently a transformer. But it's it's one of the Autobots. It's one of the good guy. I don't know why not a villain. I found that after googling It was like, Yeah, not a villain. - -94 -00:19:51,660 --> 00:20:04,650 -Wes Bos: So 50% of you guys both which is incorrect. And then second place 26% of you see a lie tool kit for Robo ops written in go Robot row robot robot robot robot. What - -95 -00:20:04,650 --> 00:20:06,450 -Scott Tolinski: did I say? Robo Adam cut - -96 -00:20:06,450 --> 00:20:07,080 -Unknown: that out. - -97 -00:20:07,080 --> 00:20:12,780 -Scott Tolinski: Cut it out. Yeah. Yeah. All right. Last one we - -98 -00:20:12,780 --> 00:20:19,050 -Wes Bos: have is Raptor eyes. Is it a jQuery plugin for playing of lat velociraptor screech, - -99 -00:20:19,289 --> 00:20:22,800 -Scott Tolinski: or a popular DIY spray on truck? bedliner. - -100 -00:20:26,840 --> 00:20:28,920 -Wes Bos: The last one don't drop out here. - -101 -00:20:30,080 --> 00:20:40,070 -Scott Tolinski: Your last chance. Last chance. All right, right. got ready. - -102 -00:20:41,550 --> 00:20:44,360 -Wes Bos: Whoa, this is the closest one - -103 -00:20:44,970 --> 00:20:45,780 -Scott Tolinski: is a tight race. - -104 -00:20:46,230 --> 00:21:03,660 -Wes Bos: Correct at 37.8%. Most of you guessed it is yes. A jQuery plugin for playing velociraptor screech. But 29 and 33% of you thought it was either both or a popular DIY spray on truck. bedliner. That's great. Thank - -105 -00:21:03,660 --> 00:21:09,350 -Unknown: you so much for playing. Oh, we had a ton of fun making this. Everyone had a - -106 -00:21:09,350 --> 00:21:29,010 -Wes Bos: blast. probably could have just done an hour of this. Yeah. All right. So now we need your participation. We're gonna play stumped. And if you're interested in winning a sticker pack with 18 web development stickers, a GitHub, Hugh bot or a or an A? Yeah, - -107 -00:21:29,040 --> 00:21:32,840 -Scott Tolinski: every every winner gets a level up tutorials t shirt here. So So - -108 -00:21:32,880 --> 00:21:42,480 -Wes Bos: come on up. start lining up right here. They're not that hard. We're not gonna embarrass you. Right, embarrass you. Come on line up. Yeah, we got a couple. - -109 -00:21:44,640 --> 00:21:48,030 -Scott Tolinski: Maybe you'll get lucky. Get an easy one. - -110 -00:21:48,420 --> 00:22:25,500 -Wes Bos: There we go. All right line on. Can we grab a microphone? No. No, it's 123456. We got six questions. And if someone gets it wrong, we're just gonna bring the next one up. So come on up. First one, what's your name? cam. All right, cam, you're ready for your question? Question number one. We have this JavaScript code let age equals 26. Age forward slash equals to console log age. What does age console log to be? - -111 -00:22:34,380 --> 00:22:36,750 -Unknown: 26. No. - -112 -00:22:36,780 --> 00:22:41,340 -Wes Bos: Incorrect. Next one up. Thank you for trying. Should we want to try give this one a shot? - -113 -00:22:41,910 --> 00:22:48,060 -Scott Tolinski: Or should we have somebody just raise their hand? Who knows it for these? Yeah. We don't just burn through the line. Okay, good. Who in - -114 -00:22:48,060 --> 00:23:13,620 -Wes Bos: the audience knows that? yell it out? Yeah. 13 nailed it. Did you know I did not know this until last week. In javas. Looking for the screen. It's not right there. And in JavaScript, the like the plus equals also you can do minus equals and times equals and if you're mutating the variable, it's probably not a good idea. But it's I thought it was kind of awesome. What's your name? Tom. - -115 -00:23:15,240 --> 00:23:20,070 -Unknown: Tom, question number two, name all seven types in Java. - -116 -00:23:22,410 --> 00:23:31,140 -Number, string, Boolean symbol. - -117 -00:23:31,680 --> 00:23:34,530 -Wes Bos: That's the one everyone forgets good. No. - -118 -00:23:36,060 --> 00:23:37,860 -Unknown: undefined. And - -119 -00:23:40,260 --> 00:23:41,490 -Wes Bos: don't say object. - -120 -00:23:48,000 --> 00:23:49,230 -Good job, Tom. - -121 -00:23:51,690 --> 00:23:58,350 -Scott Tolinski: I should say for the T shirts. I don't have them here. I'll ship them out. So after come find me get your address. We ship out the T shirts. - -122 -00:23:59,100 --> 00:24:09,960 -Wes Bos: It's funny because we wrote that question. I couldn't even remember them all. So look it up to write it. What's your name? Amir? Amir. Question number three. pronounce this word. - -123 -00:24:14,070 --> 00:24:15,630 -Scott Tolinski: Should I pronounce it the right way or the way? - -124 -00:24:17,700 --> 00:24:18,840 -Unknown: specificity? - -125 -00:24:25,830 --> 00:24:31,560 -Wes Bos: specificity. Oh my god. It's specificity. - -126 -00:24:32,070 --> 00:24:32,580 -Unknown: I got it. - -127 -00:24:33,810 --> 00:24:35,190 -Yes, I can't say it. - -128 -00:24:37,200 --> 00:25:13,350 -Wes Bos: No. All right. Next one up. What's your name? Neil. Neil, question number four. What is event delegation and when might you use it? Wow. Yeah. I'm gonna get this wrong just for fun. Um, what does bento I guess you might want to use event delegation for I guess, clicks and one out on the page or one you delegate certain events on the page. Why? Why would you not listen to an event directly on an element but delegate it? Okay, in case you want to dynamically create the elements on the page, ding, ding, ding, ding, awesome job. - -129 -00:25:17,820 --> 00:25:20,400 -Scott Tolinski: All right. Oh, it's good. What do we got next? - -130 -00:25:20,820 --> 00:25:24,840 -Wes Bos: What's your name? My name is Adam. Adam. Yeah. Number five. - -131 -00:25:25,020 --> 00:25:28,980 -Scott Tolinski: All right. What is CSS add supports for? - -132 -00:25:30,720 --> 00:25:40,860 -Unknown: This was a mistake. If I had to guess, though, - -133 -00:25:41,340 --> 00:25:47,430 -Scott Tolinski: probably something to do with supporting older browsers, potentially, that don't have newer features. - -134 -00:25:48,510 --> 00:25:49,170 -Wes Bos: What do you think? - -135 -00:25:50,460 --> 00:25:51,450 -Unknown: It's close. - -136 -00:25:52,470 --> 00:26:09,540 -Wes Bos: Audience should we give it to them? Yeah. It's like, guy. It's kind of like a media query for features. You can you can test if the features are available on a browser. Yeah. Beautiful. So yeah. Good job. All right. I think this is the last one. Is it? I don't even know what we're doing here. I'd - -137 -00:26:09,540 --> 00:26:10,530 -Unknown: have like, What's your name? - -138 -00:26:11,160 --> 00:26:11,820 -I'm sorry. - -139 -00:26:12,239 --> 00:26:34,800 -Wes Bos: Sorry. I got this function here. You know, if the look on here, const. calc all equals. It's an arrow function that is empty. And then below it. I have calc all I just pass it one. And then I have calc all I pass it like six or seven arguments. How might I modify this calc all function to accept any number of arguments passed? - -140 -00:26:36,090 --> 00:26:44,940 -Unknown: Using the spread operator to spread the number so kind of how I've always like spread? Argh. So it just splits them all out? - -141 -00:26:45,390 --> 00:26:46,260 -A spread? - -142 -00:26:47,940 --> 00:26:49,800 -Wes Bos: We should give it to him. Because Scott did this. Take - -143 -00:26:49,800 --> 00:26:51,210 -Scott Tolinski: this to Iowa. I was - -144 -00:26:52,800 --> 00:26:54,570 -Unknown: getting it backwards. Yes. The other way around. What - -145 -00:26:54,570 --> 00:26:55,290 -is it called? - -146 -00:27:00,060 --> 00:27:01,080 -Wes Bos: starts with an R. - -147 -00:27:01,320 --> 00:27:03,480 -Scott Tolinski: It does your clothes. - -148 -00:27:04,140 --> 00:27:05,340 -Unknown: rash breast - -149 -00:27:05,370 --> 00:27:33,360 -Wes Bos: there? Yeah, it will give it to him because it's the same three dots. Why is it different things around applause. All right. That's how you would you would do it. And the reason why I did that, what does someone else have another solution to that? Yeah. Array from arguments. But that wouldn't work because arrow functions don't have an arguments object. See? - -150 -00:27:33,360 --> 00:27:37,290 -Scott Tolinski: Hmm, yeah, it's tricky. All right. Number seven. - -151 -00:27:38,310 --> 00:27:41,190 -Wes Bos: What's, what's your name? Tina. Tina. - -152 -00:27:41,250 --> 00:27:45,390 -Scott Tolinski: Oh, what is the difference between slice and splice? - -153 -00:27:45,750 --> 00:27:57,900 -Unknown: slice allows you to select a portion of an array, for example, where a spice allows you to do the format plus put something in at a specific point and rejoin it, - -154 -00:27:58,440 --> 00:28:10,050 -Wes Bos: put something in into the array into the new array. Is that right? Yeah. So I have mutation. Yes. Yeah, there's a mutation. So you are you're - -155 -00:28:10,050 --> 00:28:13,440 -Scott Tolinski: looking you're like listening for the word mutation? And then like, not me, yeah. - -156 -00:28:15,330 --> 00:28:26,130 -Wes Bos: Awesome. Good job now. Sorry. Not even a hesitation. They're beautiful. Oh, we got one more. wants to do another one. - -157 -00:28:27,060 --> 00:28:32,370 -Scott Tolinski: Yeah. All right. Question number eight. What's your name? - -158 -00:28:33,000 --> 00:28:33,570 -Unknown: Josh. - -159 -00:28:33,570 --> 00:28:41,640 -Wes Bos: Josh. How would you calculate the number of milliseconds since midnight of January 1 1970? - -160 -00:28:52,530 --> 00:28:54,840 -Unknown: I'm not sure if this is this a trick question is this one? - -161 -00:28:56,490 --> 00:28:57,090 -Wes Bos: Question. - -162 -00:28:58,890 --> 00:29:01,050 -Scott Tolinski: I told I told you this would make people mad. - -163 -00:29:01,110 --> 00:29:05,700 -Unknown: I know. I know. There's some data around that time where time started in computer language. - -164 -00:29:05,999 --> 00:29:07,170 -Wes Bos: So when God created the earth, right, - -165 -00:29:07,170 --> 00:29:10,260 -Unknown: when when, when mankind created machine time, - -166 -00:29:10,320 --> 00:29:10,860 -yeah. - -167 -00:29:11,759 --> 00:29:15,090 -So I don't know. You would? - -168 -00:29:15,210 --> 00:29:32,910 -Wes Bos: Yeah. New time. Close. That's not milliseconds. Yeah. Convert data. No, that wouldn't give it Yeah. De dot now. No, big plus one. Is it plus one? - -169 -00:29:32,940 --> 00:29:33,540 -Unknown: I don't know. - -170 -00:29:34,950 --> 00:29:36,090 -Scott Tolinski: I've never done now. I - -171 -00:29:36,090 --> 00:29:39,330 -Wes Bos: looked it up in the MDN. You can have some stickers. Anyway. - -172 -00:29:45,780 --> 00:29:48,360 -One more who's got it. I love it, though. You - -173 -00:29:48,360 --> 00:29:49,890 -Scott Tolinski: forgot how many questions? I don't know. - -174 -00:29:51,810 --> 00:29:52,410 -Unknown: I told you. - -175 -00:29:54,000 --> 00:30:13,020 -Wes Bos: Is this the last one? I don't know. This is the last one. So what was your name Veronica? Her ronica so we've got this right here. const age equals console dot log 100 or 200. Console dot log age. What does age console log in? Why? - -176 -00:30:19,980 --> 00:30:22,380 -or if you just want to take a 5050 guess? - -177 -00:30:23,550 --> 00:30:30,510 -Unknown: Well, I would think that it's 100. Because it's first. - -178 -00:30:32,130 --> 00:31:01,740 -Wes Bos: All right, let's see. That would make sense. Oh, there's no answer. They answer it is 200 100. And the reasoning is because console dot log will return nothing, which is falsi, which will then make the or fall back to 200. And it's kind of a little trick that we use in react land to console log in implicit returns. So it's a bit of an obtuse knowledge. Great job. And I gotta thank you. - -179 -00:31:05,760 --> 00:31:09,630 -Scott Tolinski: Thank you so much for anyone who came up there and putting videos out there like that. - -180 -00:31:10,050 --> 00:31:10,950 -Wes Bos: I would have done that. Yeah. - -181 -00:31:10,950 --> 00:31:21,090 -Scott Tolinski: Likewise, oh, yeah. Although, we have a, we have an episode of stumped coming out, I think in a week or so. And I think I get every question. And they're all really easy. So - -182 -00:31:21,990 --> 00:31:41,220 -Wes Bos: yeah, interview questions are are weird. All right. Now we're going to a section called overrated or underrated or Scott and I will give our own opinions on if things are overrated or underrated and why. So the first one is arrow functions, overrated or underrated? No, I mean, they're - -183 -00:31:41,220 --> 00:31:43,290 -Unknown: they're graded, they're rated the third grade - -184 -00:31:44,640 --> 00:31:46,020 -I think could be not the game. - -185 -00:31:46,050 --> 00:32:09,690 -Scott Tolinski: I know they could be considered underrated because I love them. I you know, I think sometimes, like people might get hung up on maybe the implicit returns and whether or not that's the easiest way to read things. But personally, I love that that easy return. I love the shorter syntax. I love how it handles this. Me personally, I'm reaching for an arrow function most of the time, and I would say they're underrated. I love arrow functions. Yeah, - -186 -00:32:09,719 --> 00:32:18,750 -Wes Bos: yeah. I would say underrated. They're, they're really good. You don't have to reach them for them, like by default or all the time just know when to use them. And they're really helpful tool in JavaScript. - -187 -00:32:18,780 --> 00:32:23,820 -Scott Tolinski: Yeah. All right. Next we have downtown scooters, overrated or underrated. - -188 -00:32:24,150 --> 00:32:43,230 -Wes Bos: I'm gonna say underrated. I've never ridden one. But I see these startup boys whizzing around on them. And downtown. And it seems super fun. I want to take one off some jumps. Maybe later after we have some beers. And it just seems like a cool solution to a transportation problem that a lot of cities have. What do you think? - -189 -00:32:43,259 --> 00:32:52,620 -Scott Tolinski: Yeah, I mean, I I also have not written one. But everyone always looks like they're having a lot of fun on them. But you see them zoom in down there, like, a great time like, Yeah, I would say underrated too. They're - -190 -00:32:52,620 --> 00:32:53,130 -Unknown: cool. - -191 -00:32:53,249 --> 00:32:54,180 -Scott Tolinski: Yeah, they're sick. - -192 -00:32:54,360 --> 00:32:55,110 -Unknown: Next one, - -193 -00:32:55,110 --> 00:32:59,010 -Scott Tolinski: are you using sass inside of styled components? - -194 -00:32:59,040 --> 00:33:21,600 -Wes Bos: I'm gonna say this is overrated. So you can use sass and style style components. But sass itself has or sorry, style components itself has all of the features all of the nested selectors, variables, things like that. I think the only use case for it is if you have an existing sass, codebase. You're trying to move it over style components. You don't want to rewrite the entire thing. You can put them in in there for now. What do you think? - -195 -00:33:21,630 --> 00:33:30,300 -Scott Tolinski: Yeah, I love the same. Same same idea there. Yeah. I mean, you have all that stuff. JavaScript, very powerful anyway. So I personally would not reach for sass inside of stuff, an - -196 -00:33:30,300 --> 00:33:32,190 -Wes Bos: entire programming language inside of your CSS. - -197 -00:33:32,190 --> 00:33:35,640 -Scott Tolinski: It's amazing. Pretty sweet. And yeah, we should just put everything. - -198 -00:33:37,980 --> 00:33:39,510 -Wes Bos: Everything should be in JavaScript. - -199 -00:33:40,050 --> 00:33:45,390 -Scott Tolinski: Yeah. Okay, so websites that play sound in the interface, - -200 -00:33:45,450 --> 00:34:09,480 -Wes Bos: you're gonna hate me for that spider man say, underrated. It's a very, it can be very terribly done. But if tastefully done, if done well, if it's used to alert the user that something is happening or give some sort of additional feedback, I think it can be done. Well think about the vibration on your iPhone when something happens. How nice is that as an extra piece of information that something's happening? I think sound can be used for that as well. - -201 -00:34:09,540 --> 00:34:46,590 -Scott Tolinski: You know, I'm of the same opinion, which is a controversial opinion. But like, I think with the user's consent, that you're going to be playing audio don't just like start blasting, like, tech notes, or something. Yeah, like, in the background of their site. I mean, it's pretty good. It's another it's another sense that we need to explore a little bit more and interfaces, but like, again, it has to be done right? You're if you if you do it, if you just put a whole bunch of seasoning on that in that soup or something, you're gonna ruin it. So just do actually, I'm gonna I'll send a level of T shirt to the first person who does a pull request to add like a button on any of the the sounds on any of the buttons on syntax. Yeah, - -202 -00:34:47,070 --> 00:34:59,850 -Wes Bos: that would be really nice. like a like a like on mouse down and on mouse up. So to do this, there has to be that like somebody take the audio from the podcast, and add it to all of the buttons on the thing. Yeah. - -203 -00:34:59,850 --> 00:35:01,460 -Unknown: The sun and then when - -204 -00:35:01,460 --> 00:35:02,100 -Wes Bos: you scroll, because - -205 -00:35:04,670 --> 00:35:06,360 -Scott Tolinski: when you click the play that Yeah. - -206 -00:35:07,290 --> 00:35:08,820 -Wes Bos: What else do we want? Let's just add or - -207 -00:35:12,509 --> 00:35:13,980 -Scott Tolinski: we might change our opinion on this - -208 -00:35:14,669 --> 00:35:15,330 -Unknown: choice, - -209 -00:35:18,150 --> 00:35:21,750 -Wes Bos: overrated or underrated stress over new JavaScript frameworks. - -210 -00:35:21,920 --> 00:35:54,150 -Scott Tolinski: Yeah, I think this is overrated, because like, it's like, you're gonna complain about having too many cookies. Like there's lots of, there's lots of stuff here. There's so much that you can pick and choose whichever one you want. And you don't have to use all the frameworks, you can use one and be good at it. And if there's iterations, there's a whole lot of different stuff, then I'm of the mind that like excellences is born through iteration and constantly creating things and stuff like that. So by all means, create another one. No one's test. Yes, it is the only Yeah, - -211 -00:35:54,170 --> 00:36:09,900 -Wes Bos: there's some really smart people out there that are trying to like they're looking at our frameworks and be like, Oh, I think I could do that better. I think I could approach it in a different way. Let them do their thing. And if it catches on, then great. We'll all be using that in five years, and our websites will be better for it. - -212 -00:36:10,290 --> 00:36:14,310 -Scott Tolinski: I guess also support current ones too. If you'd like the ones Yeah. - -213 -00:36:14,310 --> 00:36:16,110 -Unknown: Okay, so yeah, like the one - -214 -00:36:16,110 --> 00:36:20,040 -Scott Tolinski: you don't want to say like if you have beef just instantly jumped ship. - -215 -00:36:20,420 --> 00:36:23,730 -Wes Bos: Yeah, yeah. Don't just make your own because we've been there before. - -216 -00:36:23,760 --> 00:36:25,170 -Unknown: Sorry. Additional note there. - -217 -00:36:26,420 --> 00:36:28,290 -Wes Bos: Graph QL. overrated underrated? - -218 -00:36:29,210 --> 00:36:31,650 -Scott Tolinski: I think the last one I was supposed to ask you this. Okay. - -219 -00:36:31,650 --> 00:36:34,530 -Wes Bos: You asked me Okay, Adam, cut that out. Yeah, cuz - -220 -00:36:37,500 --> 00:36:40,190 -Unknown: a graph qL is it underrated or overrated, - -221 -00:36:40,230 --> 00:37:03,060 -Wes Bos: I'm gonna say underrated. Graph. qL has a bit of a barrier to entry. Some people don't immediately see why they might need something like that. But once you get past setting it up, there's a lot of really great tools being built right now, which takes that barrier of entry, just all the way away. And I think once you once you're in it, you start singing the praises of it. I'm really excited for what graph qL is going to do in the next couple years. - -222 -00:37:03,110 --> 00:37:36,380 -Scott Tolinski: Yeah. For those who've listened the podcast, you probably know I'm a huge fan, I would I'm gonna say it's underrated to once you crack that hard candy shell, you get into that chocolate. It's a again, it's a there's a little bit of a learning curve. I'm not hungry. By the way. I've got like three food metaphors. Yeah, I'm not hungry. But no, I love graph qL I think it's underrated. I think we're just going to continue to see everything around graph qL get better and better and better as more and more take hold of it. And you just see it more places I use it personally love it can't get enough of it. All right, yes, six D structuring, - -223 -00:37:36,780 --> 00:38:14,100 -Wes Bos: I'm gonna say underrated. There's a bit of not hate, but people don't necessarily like it because of the added syntax that it adds. And if you don't know what it's doing, if you're trying to de structure, some arguments of a function, or you're trying to structure some properties off of an object or you're destructuring some values of an array. There's just a lot of new syntax. And sometimes it's hard to just look at what what's happening in your JavaScript code to and to understand. So if it takes you longer to look at it, then the regular JavaScript way, then probably not worth it. But I think in a lot of use cases that can really clean up our code. - -224 -00:38:14,609 --> 00:38:32,580 -Scott Tolinski: Yeah, I think a lot myself, like many other people, when they looked at it at first they were like, I don't I don't think this looks as clear to me as seeing the argument right there the parameter right there like, but once you use it, and once you get used to once you get acclimated I can't live without it. I just I honestly I can't live without Love it. Love it. - -225 -00:38:33,960 --> 00:38:38,360 -Wes Bos: A CSS Houdini underrated overrated? - -226 -00:38:38,730 --> 00:38:54,230 -Scott Tolinski: Yeah. So for those of you who don't know, CSS, Houdini is basically a way that you can write custom properties in CSS using JavaScript and CSS. It's it's coming It's It's the new gonna be the new new hotness, - -227 -00:38:54,230 --> 00:39:14,850 -Wes Bos: in my opinion. I like using the Canvas API. So you could be like, display a triangle with Kate Scott. And like, the text will just like wrap itself around the outline of Scott's body. Like you could just make up stuff in CSS with with Houdini and then you just write the how to paint it. You get access to the browser's low level API. Yeah, painting. - -228 -00:39:14,850 --> 00:39:25,670 -Scott Tolinski: I think it's underrated. Yeah, I think CSS Houdini is gonna have to call in sick to work because it is sick. It is way too sick. And I'm a I'm a huge, huge fan, and I can't wait to see I think it's - -229 -00:39:25,670 --> 00:39:34,230 -Wes Bos: underrated as well. People always complain about how CSS works and once we have CSS Houdini, we're just gonna be like write your own then because - -230 -00:39:34,290 --> 00:39:48,380 -Scott Tolinski: you so there's like a CSS Houdini gallery and like one of the things was like a highlighter in the highlighter had all sorts of different properties like a like a selection highlighter behind it. And you could choose like how dry the highlighter was. And it was so awesome. - -231 -00:39:48,380 --> 00:39:55,880 -Wes Bos: I was just like, this is so cool. I'm going to use it. He's like, get your selector highlighter, dashed dryness. Yeah. 40 drops, - -232 -00:39:56,190 --> 00:40:03,690 -Scott Tolinski: and they have little sliders. You could try it out. It's great. That's cool. Yeah. Alright, service workers and offline applications, - -233 -00:40:03,750 --> 00:40:35,280 -Wes Bos: I'd say underrated. Because I think we take for granted speed, and always being connected and all of that stuff where the reality is, is a lot of people, whether you're in different countries, or even, you're just taking the subway, where you go offline and online, you have flaky internet connection. It's the worst when you can't access the thing. So just a couple lines of code. At the very minimum, you can make your entire website cache. So let someone's coming back to it when they're in offline mode to be able to still read the content that's on your site. Yeah, - -234 -00:40:35,310 --> 00:41:27,060 -Scott Tolinski: I mean, I totally agree. I think it's actually funny that we agree on all of these. Yeah. Yeah, I think that's why the podcast works, right? Like, no, that's overrated, underrated. No, we didn't argue about any of these. I think we maybe should have added some that we argued about. But yeah, I, you know, service workers and offline applications. It's one of those things that it's, it's easy to be in the United States and have like fast internet, I have like gigabit internet at home. And like, I just totally forget what the internet's like, and the rest of the world. So this kind of thing is just such a huge, important aspect of web development general to make our sites more accessible to everyone. The offline stuff is just I think that's a that's a an aspect of web that's just going to continue to grow and become more and more important, as the tools become more and more utilized throughout the industry. Yeah. Big fan. - -235 -00:41:27,359 --> 00:41:58,560 -Wes Bos: final one is optional chaining proposal. So this is a proposal to JavaScript that will allow you to deep check properties inside of an object where you don't have to check all the way along. So if you've ever had that, like cannot read property, blah, blah, blah, of undefined, that will become a thing of the past with this new syntax, where you put a question mark after everyone, and it will first check if that property is there before it keeps going. Highly underrated obviously. I'm super excited. This is the last thing from coffee script that I miss. What am I Oh, yeah, - -236 -00:41:58,560 --> 00:42:23,690 -Scott Tolinski: I think this is so underrated. Again. I love this thing. I gotta have it. In fact, I'm gonna like go install this in my the Babel plugin for this and my repo right after we get off set home. Just hack it in there right now. I can't wait to just start using this because honestly, who loves to use whatever you're pulling in has from lodash or people and and and Wes and and names and whatever. You know, like, I don't know the top. No way to live - -237 -00:42:23,690 --> 00:42:24,650 -Wes Bos: your life. Yeah. - -238 -00:42:25,649 --> 00:42:27,420 -Scott Tolinski: It's no way to live your life. Yeah. - -239 -00:42:29,100 --> 00:42:32,900 -Wes Bos: All right. What do we only have like 20 minutes left? We're doing pretty good here. All right, Bruce, - -240 -00:42:32,900 --> 00:42:33,960 -Scott Tolinski: it, Chris in the US. Oh, - -241 -00:42:34,140 --> 00:42:55,440 -Wes Bos: now we're gonna have some q&a with Scott and West. So on the on the podcast, we like to call this a potluck where you bring the questions and we will attempt to answer them. So we got some mic runners running around. I got another one right here. If you want to just put your hand up and go ahead and ask us some questions. Nothing like those interview questions, though. That would be too hard. Yeah, - -242 -00:42:55,460 --> 00:42:58,230 -Unknown: that's a caveat. Yeah. Hey, guys, how are you? Good. How - -243 -00:42:58,230 --> 00:43:13,680 -are you? Nice, entertaining talk. And my first Mars first question is, since you guys met each other first. What was the thing that was like, wow, I was not expecting that from him. More like I thought he was different. But now I did. I so I don't know. I mean, - -244 -00:43:13,680 --> 00:43:19,800 -Scott Tolinski: anything. You know, what's that really reflective sunglasses on? I was like, Wow, those sunglasses are really reflective. - -245 -00:43:21,810 --> 00:43:32,580 -Wes Bos: I don't think there was anything about Scott that I didn't expect because we talk on zoom for like, what, three, three and a half hours every single week. And - -246 -00:43:34,500 --> 00:43:36,000 -Scott Tolinski: maybe you don't see how much I move around. - -247 -00:43:36,030 --> 00:43:50,940 -Wes Bos: Yeah, he's true. He's very anti guy trying to do beep ops. And yeah, yeah, Lipson. Just got to break the answer. We don't know. So after this, we will. We'll have a competition. Me versus Scott. Yeah. - -248 -00:43:51,960 --> 00:43:52,770 -Scott Tolinski: Sign up for that. - -249 -00:43:54,030 --> 00:43:59,730 -Wes Bos: Next question. Yeah. All right here, grab the mic. - -250 -00:44:02,070 --> 00:44:06,720 -Unknown: If there's any tycoon game you could create. Which one would you create? Oh, - -251 -00:44:06,749 --> 00:44:10,320 -if there's any tycoon game are you familiar with the genre was like like RollerCoaster - -252 -00:44:10,320 --> 00:44:12,300 -Scott Tolinski: Tycoon like roller coaster tycoon. - -253 -00:44:12,780 --> 00:44:26,700 -Wes Bos: Those rolling? What other kind of tycoons are there? A lot of them? I would make sticker tycoon. And I would be a businessman sailing the world bringing stickers to all web developers around the world. - -254 -00:44:27,330 --> 00:44:35,700 -Scott Tolinski: Yeah, I would have to do I would have to do tutorial tycoon where you create one by the end of the day or else your tutorial shop blows up? Yeah. - -255 -00:44:36,660 --> 00:44:41,460 -Wes Bos: And you get and one of like, the bad things that will happen is d monetize. You know? - -256 -00:44:42,120 --> 00:44:44,640 -Scott Tolinski: So long YouTube comment made you cry. - -257 -00:44:46,590 --> 00:44:54,210 -Wes Bos: Bad news react was updated. Everything is now obsolete. That'd be great. - -258 -00:44:54,210 --> 00:44:55,560 -Scott Tolinski: That's good. Yeah, - -259 -00:44:55,680 --> 00:45:01,950 -Wes Bos: my life actually More questions? - -260 -00:45:07,140 --> 00:45:25,890 -Scott Tolinski: Okay, in 2018, how much do you think we should still worry about supporting the no JavaScript experience on some of this stuff? Oh, I don't know. I see people complain about, like, I don't have JavaScript turned on. And this looks crappy. I'm like, Well, how does the rest of the internet look to you like this, this whole thing was terrible. Like, - -261 -00:45:25,890 --> 00:45:34,770 -Wes Bos: I always want to go off on those. And then someone comes out with like, a, but this, like, blind people use this thing. And then I do hate find me. I'm like, No, but - -262 -00:45:34,770 --> 00:45:52,230 -Scott Tolinski: the whole idea is, is to make things as accessible to make them load as fast as possible. And like, honestly, if you have the server side rendering going, you have all your accessibility things worked out, and you have all that stuff work that I guess it doesn't necessarily matter, because it can still work with - -263 -00:45:52,230 --> 00:46:11,730 -Wes Bos: things like like forums and stuff. Like if you've got like, React forms, that's not gonna work. Yeah, with like a POST request, right to the server. So, uh, no, I don't, I don't care for people that have JavaScript turned off at all? Yeah. Well, if you owe some fancy, it's a very, like, - -264 -00:46:12,629 --> 00:46:23,610 -Scott Tolinski: I care a little bit more than you do. But okay, were to email and be like, I can't use your site without JavaScript. Unless it was like a, you know, disability thing. Yeah, just hit. Delete. - -265 -00:46:23,820 --> 00:46:38,490 -Wes Bos: Yeah, well, let's also say like, I, I make JavaScript tutorials for living. So no one's gonna come to me and be like, Oh, yeah, I don't have JavaScript on well, then you can't learn JavaScript. So that's a definitely an interesting one. - -266 -00:46:41,760 --> 00:46:47,580 -Unknown: Yeah. That's how - -267 -00:46:47,580 --> 00:46:52,050 -many spaces Do you think should be qualified as a tab? Oh, - -268 -00:46:53,100 --> 00:46:53,700 -I? - -269 -00:46:54,960 --> 00:46:58,320 -Wes Bos: Yeah, it's a trick. This is gonna be more fiery than the last one, I - -270 -00:46:58,320 --> 00:47:09,720 -Scott Tolinski: use four spaces as a tab because it's the same as a tab like that way, the spacing is the same. Yeah, I did. I set it up like that a few years ago. And I've never ever thought about it ever again. - -271 -00:47:10,170 --> 00:47:27,420 -Wes Bos: I think four is best, but I used to, because I don't have enough room on my screen. When I'm recording tutorials. I don't have enough room when I'm trying to do pain by pain. Like it's always at a premium. And then if you use four, it's like, it's way too big. So I used to there. I don't really care. - -272 -00:47:27,450 --> 00:47:39,960 -Scott Tolinski: I should say, I don't care. Like if if someone were to like, be like, do you need to use this, I might say, oh, I'll get whatever, like, it's not gonna be like my tab spaces, whatever. It's not going to cause anything to blow up. - -273 -00:47:39,990 --> 00:48:02,490 -Wes Bos: We have a whole episode in our list called bike shedding, where we'd spend the entire bike shedding means like, what's the saying, like you spend more time worrying about what color to paint the bike shed something like something like that, where you just like talk about stuff that doesn't actually matter at all. Like, like tabs versus spaces. At the end of the day, it doesn't really matter all that much. But it's fun to talk about. Because we're developers, we have to nerd out on that stuff. - -274 -00:48:02,550 --> 00:48:15,690 -Scott Tolinski: Yeah, I will say a GIF or GIF, depending on who I'm talking to just to appease them. I don't care either. It's people, people really where we should go. Somebody says God me back. If somebody says GIF, I'll say GIF back. It's all lost. It's all good. - -275 -00:48:17,730 --> 00:48:18,300 -Unknown: Yeah. - -276 -00:48:19,980 --> 00:48:36,750 -In the JavaScript world, and this jam stack, where do you Where do you guys see the direction of testing and especially integration testing going? And do you think it's important? Do you think it's not important? What are your just opinions on integration testing and this new jam stack decentralized ecosystem? - -277 -00:48:36,780 --> 00:48:37,500 -Wes Bos: Yeah, yeah, - -278 -00:48:37,500 --> 00:49:37,560 -Scott Tolinski: I love I love testing. And in like, for me, I've been like, historically, a person that hated testing. And what's changed for me is that the technology around the modern testing stuff has just gotten better and better, in my opinion. So like, as far as the jam stack stuff goes, I would just use Cypress to, if you don't know, cypress.io gives you the visuals, you can see that everything's working. And it's so easy. It's like a jQuery type interface to interact with your site, and you get the browser right there. I think the only drawback to using Cypress was at some point they will for most of the time, they weren't supporting Firefox, but I'm pretty sure that's changed now. So I think, in my opinion, if I was testing a site, like a jamstack site, I might use react testing library to test the components, and do just straight up integration testing, never any sort of shallow rendering that way. And then Cypress for like full on end end testing kind of thing. But that's, I think, I think the libraries and stuff around testing are the best they've ever been in JavaScript for react. - -279 -00:49:37,680 --> 00:50:05,280 -Wes Bos: Yeah, I think it's, I think it's getting so much easier to test yourself. The fact that we're having these serverless functions that just do one thing, they accept a request, they spit something back out. That's such an easy thing to test all of your integration testing with your application. It's it's easier than ever, and I think also more important than ever, because we're starting to build applications that are much more complex than the things we've built. In the years past one right here, or is there another one? - -280 -00:50:05,309 --> 00:50:06,450 -Scott Tolinski: We got one over here? - -281 -00:50:07,319 --> 00:50:10,200 -Wes Bos: Everyone's heating up now. Yeah, right here. Okay. - -282 -00:50:11,670 --> 00:50:12,810 -Unknown: I don't care. I feel - -283 -00:50:12,810 --> 00:50:15,120 -Scott Tolinski: like we've been pretty hard on this side of the room. So yeah, this - -284 -00:50:15,120 --> 00:50:19,050 -Wes Bos: is much better. Hey, I was a No What's that you - -285 -00:50:19,050 --> 00:50:22,650 -Scott Tolinski: just can't see it because the lights there. sure you're blinded by the light yet? - -286 -00:50:22,680 --> 00:50:25,200 -Unknown: I wonder what your thoughts are on - -287 -00:50:25,740 --> 00:50:26,280 -the new - -288 -00:50:26,310 --> 00:50:28,260 -react hooks API. - -289 -00:50:29,310 --> 00:50:32,250 -It is underrated. underrated. Yeah, - -290 -00:50:32,580 --> 00:50:33,210 -Wes Bos: I know. It's sweet. I - -291 -00:50:33,210 --> 00:50:56,490 -Scott Tolinski: don't know that. You know, some people on Twitter are like, well, don't don't hype it up too much. But like, Oh, it's really cool. And it's again, it's just a new way of doing things. And I think we're at like Day Zero of how cool it's going to be or how useful it's going to be and give it a couple of months. And actually, you know, see how people are using it and see what comes of it. And I think it could be potential to be sick. Yeah, the - -292 -00:50:56,490 --> 00:51:30,300 -Wes Bos: the hooks in reactor are really cool. Because it takes all this like weirdness that surrounded react and classes and state and like initial state and all this like weird stuff. And it makes it just like really, really simple. And like part of react developers are bummed because they've become like drug dealers have this obtuse knowledge. You know, like, what, like, you all know, like finding in the arrow functions and all that stuff. And it's just much easier now. And it's probably how it should have been from the start. So I'm pretty excited about it. - -293 -00:51:30,930 --> 00:51:34,530 -Scott Tolinski: Yeah, I can't wait to use them. I just want to try it out. Yeah, I've not done that yet. - -294 -00:51:34,650 --> 00:51:47,610 -Wes Bos: Is anyone anyone used hooks yet? No one, no one, one guy? Or maybe he just has a question. Who's got the mics? Oh, yeah, go for it. - -295 -00:51:48,120 --> 00:52:10,080 -Unknown: All right. So earlier, Chris coiour was talking about how serverless functions make it easy for developers, front end developers to do a bunch of back end kind of stuff and how it makes us more powerful. I'm just wondering if there's any concern that he may have inadvertently unleashed? You might call it like a serverless function, architecture apocalypse. - -296 -00:52:12,450 --> 00:52:16,230 -Wes Bos: So he said, What was it? any concern? That's - -297 -00:52:17,760 --> 00:52:20,070 -Unknown: serverless function architecture apocalypse? - -298 -00:52:21,390 --> 00:52:26,430 -Wes Bos: Are we gonna have an apocalypse? Because of, of where everything is? You mean? - -299 -00:52:27,750 --> 00:52:33,870 -Unknown: I'm not sure we might end up with these like really complicated architectures of serverless functions talking to other serverless functions to make a comment. - -300 -00:52:33,900 --> 00:53:51,480 -Wes Bos: Yeah, you can like imagine, like being like, like a, you know, when they like go on a murder movie. And they have like a yarn. And they're like, that's the 711. And then they're here. And this is into slack. And then the slack posted to this thing. And there's 40 services, and that cost me $400 a month for my own website. Right. So yeah, definitely, I think it was important that Chris said, it's not the solution all of the time, you have to have the actual problem, I think the biggest thing I hear from people is, okay, I understand what server serverless is, but like, why do I need that? And I think it's one of those things will, you'll know when you need it, because you're going to start, you're going to be hitting these growing pains, or it's going to cost you way too much to do this. Like one, you're running a server to send email, and you're paying 15 bucks a month for it, right. So I think that you will, as you build these applications, and you start to figure out where you you need to reach for serverless function, that specific use case. So there's, there's definitely I definitely see that we'll probably be sitting at this conference in four years. And someone's going to have a talk called, like, on spider webbing your serverless functions, you know? What do you think? - -301 -00:53:51,870 --> 00:53:55,770 -Scott Tolinski: Yeah, I mean, he I think you've covered up. All right. I totally agree. - -302 -00:53:58,350 --> 00:54:02,460 -Unknown: So do you plan guys to have a course maybe together? a spouse and Scott? - -303 -00:54:02,640 --> 00:54:15,000 -Wes Bos: Oh, of course the other. We've never talked about it before. Maybe at some point, we could do one where I say a sentence. And I say a sentence. Erica, what do you want to learn from us? Like we could both - -304 -00:54:15,540 --> 00:54:19,860 -Scott Tolinski: barbecue, we could both be controlling the mouse via the internet. So the mouse is like always fighting. - -305 -00:54:21,990 --> 00:54:28,290 -Wes Bos: It wouldn't be a fun YouTube video if we just tried to like build something together. Yeah, pretty, pretty fun. Yeah. So maybe - -306 -00:54:33,210 --> 00:54:45,240 -Unknown: a lot of libraries in last five years have been promoting this component based, you know, design and that kind of stuff. How do you how do you guys think big web web components are going to fit into that in starting now? What do you think about them? And how do you think the future is going to be? - -307 -00:54:46,500 --> 00:55:39,030 -Scott Tolinski: Yeah, this one's kind of a, I guess, a little spicy topic. Yeah. And with spicy topics, I always like like to take the sort of middle approach here in this kind of thing. Like, I don't know, I'm in a wait and see kind of mode. personally. I like Like that they're working with libraries, like react and to maybe borrow ideas or talk about ideas. And I think that's really what it comes down to is like sharing the ideas and figuring out what these things like the best approach to them is that way, they don't just create something that gets gets like okay, that's great. Are you go back here and just stand over there the photos over here. And like everyone, all the web frameworks are smiling, laughing having a good time. Yeah, web components are over there. But no, I don't know. I'm a wait and see kind of guy. We'll see what happens. And I like Yeah, I like I like, I know, I've used web components with polymer before. And I like it, but I'm not reaching for it right now. So we'll see. Yeah, - -308 -00:55:39,060 --> 00:56:21,570 -Wes Bos: yeah, I don't know. I've never used it before. And it's it's one of those things where I'll just sit on my hands, wait for it to come out. And then and then give it a shot. And I think that's where probably a lot of of you should be as well is it's sometimes a little bit stressful to keep yourself on the edge and be learning about all these new things and, and be involved in the process. And there's it's important to be involved in the process. But at a certain point, you just kind of just sit on your hands and wait for it to be finished and see how that works. Yeah, let it mature a little bit the space. Yeah, totally. What? support, support and everything's a bit she says it's a bitch. Yeah. Oh, my laptop went to sleep. - -309 -00:56:23,070 --> 00:56:24,810 -Scott Tolinski: Let's get it's kind of a nice little background there. - -310 -00:56:28,470 --> 00:56:36,630 -Wes Bos: Sure. Well, we got here. We got six minutes like thing here. Like, this is the actual box that counts down from an hour. And like, how much does that cost? Is - -311 -00:56:36,630 --> 00:56:39,900 -Unknown: there a web app? That would do like there's like a red light? - -312 -00:56:40,050 --> 00:56:41,250 -Yeah, we're - -313 -00:56:42,600 --> 00:56:49,140 -Wes Bos: gonna close that sucker in 10 minutes. That's cool. Yeah. A couple more questions. We'll wrap it up. Maybe two more? Yes. So - -314 -00:56:49,140 --> 00:56:56,610 -Unknown: what's your least favorites? jam like in the spreads? Not the operator like on the bread. - -315 -00:56:57,480 --> 00:57:01,110 -Wes Bos: The least favorite least favorite jam? least favorite jam in the? - -316 -00:57:01,380 --> 00:57:17,460 -Scott Tolinski: Yeah, well, this is funny for I like I'm gonna say like, what is it like? Orange but like, or is it tangerine or something? But like, it's not like oranges and tangerines. But like if there's like tangerine, there's raspberry. And there's like poison Berry. I'm probably gonna reach for the other ones. - -317 -00:57:17,460 --> 00:57:34,530 -Wes Bos: Yeah, my neighbor gave me one that was like, really tart. I don't know what it was called. But there's some sort of red berry. But I hope you're asking which companies we don't like and what actual jams we like. Alright, last last one, or Oh, who's got them? - -318 -00:57:34,530 --> 00:57:35,850 -Unknown: I have a mic if it's on. - -319 -00:57:36,390 --> 00:57:37,050 -Who are you? - -320 -00:57:42,690 --> 00:57:48,570 -What would be your go to for a headless CMS in your jam stack? Oh, - -321 -00:57:49,590 --> 00:57:50,520 -sponsors here? - -322 -00:57:50,550 --> 00:57:56,790 -Scott Tolinski: Yeah. My go to would be a combination. - -323 -00:57:59,190 --> 00:58:03,450 -Wes Bos: Yeah, just grab a little capsule. And I'm lab contentful. github. Yeah, - -324 -00:58:03,450 --> 00:58:04,290 -Scott Tolinski: I know if I see him. - -325 -00:58:04,680 --> 00:58:44,160 -Wes Bos: Talk to each other. Yeah, all of them? You know? Um, that's a great question. I'm still really holding out for headless WordPress. I know that we saw some graphs saying it's going down. But I know that there's literally millions of WordPress developers out there who are good at writing PHP, who are good at writing all the hooks who are comfortable. All of their content is in it. their clients absolutely love the interface that's there. So I haven't used it yet. I'm looking at it right now. Because I'm going to redesign my own website and looking at what are all the different available options that we'll have. So I don't know. We'll have to wait. And yeah, - -326 -00:58:44,160 --> 00:59:29,070 -Scott Tolinski: I I honestly have no good answer for this. Other than that I, the headless sites that I've built have all been headless WordPress, but only because the client already had a WordPress install. And it's like, oh, we can throw we can throw Gatsby on top of that you already have all of the content and everything in there. So for me again, yeah, I mean, like WordPress is there and so many people use it and somebody's content editors use it. Like, I think that's a big thing is matching the back end experience of WordPress to the point where you could have somebody who's never picked up one of these things, pick it up and login and edit it and manage it like they would a WordPress site and be comfortable. Because I even know like, passing some Drupal sites off to WordPress people. They'd be like, what do I do with this? Yeah, - -327 -00:59:29,070 --> 01:00:01,650 -Wes Bos: well, that's that's also like the downside to WordPress is that the the back end interface for the current like WordPress organs, is still built in PHP. And if you want to build like custom stuff, you either got to reach for jQuery or you have to build a react component. And some of the CMS is are built like react first so that you can just take a react component and drop it in and, and start to build your own custom back end inputs, right because we've all been in that situation where the WordPress inputs are just a nightmare to use because it's just a drop down with 40,000 blog posts in it something like that. - -328 -01:00:01,710 --> 01:00:18,090 -Scott Tolinski: Yeah, I also want to say this. It's a space. That's like, growing so much. Yeah. So like, it's so exciting to me. We were just both talking about how awesome it is that space is just getting larger and better and better. So yeah, we'll see. I mean, I mean like this again, this space is only room to grow. - -329 -01:00:18,120 --> 01:00:20,580 -Wes Bos: I'm happy that there are lots of people working on Yeah, - -330 -01:00:20,580 --> 01:00:24,030 -Unknown: the whole CMS thing right now. They're, they're all my favorites. Yeah. - -331 -01:00:26,220 --> 01:00:31,860 -Wes Bos: How do we do we invited back next year. Any other questions? Yeah, we - -332 -01:00:31,860 --> 01:00:33,360 -Scott Tolinski: got time for I think one more. We got two minutes. - -333 -01:00:33,360 --> 01:00:34,230 -Wes Bos: According to this - -334 -01:00:34,710 --> 01:00:35,640 -Unknown: black box here. - -335 -01:00:36,000 --> 01:00:38,640 -Oh, it's yellow now. Oh, - -336 -01:00:39,090 --> 01:00:47,340 -Scott Tolinski: we got Yeah, Sean's got one. Okay. Well, you were like, right in light. Like, - -337 -01:00:47,480 --> 01:00:49,380 -Unknown: can't see and he looks like an angel right now. - -338 -01:00:51,810 --> 01:00:58,230 -You guys tend to agree on water is or what is the biggest technical thing you guys disagree on? - -339 -01:00:58,920 --> 01:00:59,520 -Scott Tolinski: Ah, - -340 -01:01:01,650 --> 01:01:03,630 -Wes Bos: what is it the meteor? - -341 -01:01:03,660 --> 01:01:06,510 -Unknown: Yeah, it's gonna say the same thing we all agree we don't agree on. - -342 -01:01:09,720 --> 01:01:10,380 -Yeah, - -343 -01:01:11,480 --> 01:01:20,640 -Wes Bos: it's not because I don't like Meteor, it's just that my own stack has always been custom cooked Express stack. And Scott stack has always been a meteor one. - -344 -01:01:20,640 --> 01:02:15,000 -Scott Tolinski: I, in my opinion, I feel like people drop Meteor after, when it first came out. It was all real time. And there was no NPM support and all this stuff like that. And what they don't realize is like, now, you can fire up a meteor site. And it's just like any other node platform. And it's basically Meteor is almost essentially like a glorified build tool, with accounts and database support baked in. So like it for me, if I'm even starting like an Apollo based site, or react site, or whatever, I can get, like an Apollo server, setup it with like two lines of code, I can get server side rendering, I can get code splitting. And as a build tool, it's awesome. So I think I think people have the, like, a wrong idea of what Meteor is. And so you know, who knows if it will ever recover from that misconception? And who knows, I still love working in it. And I know you haven't worked in it. So maybe that's Yeah, - -345 -01:02:15,030 --> 01:02:30,270 -Wes Bos: I think that's that's also what makes it a good podcast as well is that we're not we're both aren't very, like, overly opinionated about things. Like we'll talk about our thoughts on things if it's underrated or overrated, but like, if you disagree, that's fine. I don't care. Yeah, right. - -346 -01:02:30,330 --> 01:02:36,450 -Scott Tolinski: So like, chillin right now. Yeah. I mean, I think that's totally Yeah, that's, I think that is that is very much accurate. - -347 -01:02:36,479 --> 01:02:39,360 -Wes Bos: Well, the box is being read. - -348 -01:02:39,390 --> 01:02:43,020 -Scott Tolinski: So good, right. If that was an interface with sound, it might be actually beeping. - -349 -01:02:44,340 --> 01:02:55,620 -Wes Bos: Exactly. So thanks so much for coming out. This is really fun to do. I brought a whole whack of stickers. I'll be in the hallway after I go grab them. If you want to come say hi. I'd love to meet all of you. - -350 -01:03:06,270 --> 01:03:07,290 -Scott Tolinski: Both of my favorite - -351 -01:03:10,470 --> 01:03:11,280 -Unknown: little more applause I - -352 -01:03:11,280 --> 01:03:13,440 -think for Wes Bos, and Scott to Lynskey. - -353 -01:03:18,900 --> 01:03:19,860 -Thank you gentlemen. - -354 -01:03:22,170 --> 01:03:31,890 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax91.srt b/transcripts/Syntax91.srt deleted file mode 100644 index 48a1189d4..000000000 --- a/transcripts/Syntax91.srt +++ /dev/null @@ -1,192 +0,0 @@ -1 -00:00:00,359 --> 00:00:21,660 -Unknown: Monday, Monday Monday open wide dev fans yet ready to stuff your face with JavaScript CSS node module BBQ Tip Get workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. - -2 -00:00:23,610 --> 00:00:24,480 -Totally at ski. - -3 -00:00:25,950 --> 00:00:26,700 -Oh, welcome - -4 -00:00:26,700 --> 00:03:57,480 -Scott Tolinski: to syntax in this Monday hasty treat. We're gonna be talking all about how Wes Bos became a sticker mogul. Taking over the sticker game, like a hurricane non stop like that. So this episode is gonna be all about what's his process for, it's gonna be a nice little inside look into the sticker biz. Of those of you who don't know, Wes is an absolute monster. When it comes to these stickers, he sold an insane amount of which we're going to get into in very little time. So we'll be talking all about the process that went along there. And how this thing went down to sort of a nice little how to here. So this episode is sponsored by Log Rocket. Now Log Rocket is an amazing service that helps you better find bugs and understand them in your code. This one is really, really cool, because not only does it integrate with some of your other services, of which we talked about Sentry on this podcast, Log Rocket actually works with Sentry, to help you better understand your code. But Log Rocket itself is basically a tool to help you better understand the bugs that are happening in your front end code. What it does is it gives you this really awesome what's called a session replay, which gives you a pixel perfect replay of what the user saw when they were actually manipulating their site and actually using your site, how many times you get an error message. And you're looking at this message in the code and you say how the heck did the user manage to do this, I don't quite know what they were doing. But I understand where the error is in the code and maybe understand who did it and what page they were on or something like that. But you don't have that full visibility, you're not saying what they're saying. So Log Rocket is a perfect way to not only get access to the video of the session, but you also get access to the council log and errors, you get access to the network activity, basically just giving you full visibility to solve some bugs. Now, that sounds extremely appealing to me. Because again, so many times in these situations, you've been given visibility through some of these tools, you know, what the bug is, who the user is, and all that sort of stuff, but you don't have full visibility. And this again, works with those tools, any of the air tools that you might already be using, whether that's something like century that we talk about on syntax here, or something like robar bugsnag, New Relic, JIRA, Zendesk, Salesforce, Trello, GitHub, it integrates with all of these tools that you know, and love to just make your processes that much better. Not only that it works with any of the front end frameworks or front end code in your stack, whether it's react Angular, just plain JavaScript, Redux, Ember, or Vue js, pretty much anything you could possibly be building your site in with JavaScript works with Log Rocket. So Log Rocket, in my mind is just one of these amazing tools that just going to help you figure out bugs, solve them faster, and gain visibility to what your what your users are seeing. And really just take your skills as a bug finder to the next level. So if you want to check out Log Rocket, head on over to Log rocket.com, forward slash syntax, and you will get 14 days free to check out Log Rocket. And I think you're gonna be pretty dang impressed with the service they have gone on over there. So check it out, Log rocket.com forward slash syntax get 14 days for free. So now let's get into our regularly scheduled program where we get to learn about how to become a sticker mogul from Wes Bos. - -5 -00:03:57,810 --> 00:05:03,020 -Wes Bos: All right. So this is something I get questions about all the time. So it's kind of weird to do a whole podcast on how to make stickers. But I thought I would just detail every single step in here so that when people ask me questions, I don't have to spend 20 minutes writing an email to them, I can just point them to this podcast, because it's something that a lot of people want to do. And it's a fun thing to do. So I encourage you to to become your own sticker mogul. So stickers and it's like merchant in web development general are kind of a funny thing, because people go absolutely nuts for a 30 cents sticker. Whereas if you were just walk over to a developer and hand them like a $20. Bill, the bill thank thanks. That's fun. But a sticker is like the best thing ever. So it's like the currency of web developers. And sometimes I feel a little bit silly doing all of this sticker stuff, but people absolutely they love it. They love putting the stickers on their laptop. It's like a sense of identity. You can like see other web developers at a coffee shop and sort of give them a heads up. I myself have talked to just random people at coffee shops. Just Based on the stickers that were on their laptop, - -6 -00:05:03,060 --> 00:05:14,010 -Scott Tolinski: yeah, I'm pretty sure if I saw a West boss sticker at a local coffee shop, I would, I would definitely go introduce myself to that person. So I think it's it is it's like a little tattoo for your computer or something like that. - -7 -00:05:15,389 --> 00:08:26,070 -Wes Bos: Exactly. So for those who don't know, I have run probably for like five or six years I've been like printing stickers and just kind of giving them away. And about three years ago, I got serious about it because I was like, these stickers are so expensive, I want to be able to to give them to everybody or I want to be able to sell them for a couple bucks. So I did a whole bunch of research into how to get stickers affordably how to package them, how to ship them around the world, how to sell them what to do with the envelopes all that stuff. So that's what we're gonna be going through a couple times a year, maybe once or twice a year at boss dot A f I print out a huge batch of stickers and then sell them and then once they're done selling I ship them all over the world night just finished I got back the other day from shipping out the last batch so it's all fresh in my mind I thought I thought I would just go through it all so first we're gonna start with designs first if you want to print stickers, you need some sort of designs. Most of the stickers I've designed to myself either in in Photoshop in for some reason I I've just done them in sketches. I'm not like a great designer but I'm not like comfortable in Illustrator which is the tool that you should be using. But I have designed most of them myself and then just convert them over to ups or PDF or something like that and give them to the printer. This last last batch I had Patrick deployant de PU y DT I don't know how to say his last name but he is an awesome designer and hot sauce brother and he he did a whole bunch of the latest ones which is pretty funny to the what the full snack dev he did the code love one he did the bug hunter one there's a couple of the CSS holographic one. And I did the React one I did the idle hands build nothing one the syntax Lacroix Can I did myself. So there's all kinds of like fun ones that were in the last one. A lot of people ask me what about licensing for these logos because I often will print like a react logo or the .js logo or a few logo, those logos, you have to make sure that they are licensed that you can re reprint, distribute and sell them. So all of the RAC logo, the view logo, the J s logo, those are all licensed on GitHub, you can look it up don't parody logos I've learned in the last. So I printed a popular outdoors outfitter, I kind of made like a parody logo, because I love I love the company. And they did not like that. And I got some some legal letters from them, which I was a huge bummer because I printed 10,000 packs, and every one of those 10,000 packs had one of these offending stickers. Luckily they had, they're really cool about it, and they let me know before I sold them. So it cost me a couple thousand bucks in just labor alone of having someone cut them open, pull the offending sticker out, and I had to buy a sealer. And I had to reseal the entire package. So I thought I was like covered under parody because everybody does it. But think about copyright is that if you don't defend your copyright, then you lose it. So these companies are obligated to do it. So it was stupid. But luckily, I hadn't hadn't sent them out or anything like that. And the company was pretty cool about it. So don't use parody logo of anything like that. - -8 -00:08:26,189 --> 00:09:13,080 -Scott Tolinski: I think that's an important point. Because people sometimes get mad at the companies for these things when companies go like it's especially true and all sorts of little things where companies will go after a small time person making a small time thing with their logo. And you're thinking yeah, there's big mega corporation is infringing on my thing here. But no, it's it. If they do not protect their IP, then they cannot protect it in the future. They are required essentially that if they know that this is going on, they're required to do something about it. Otherwise, it hurts them in the future if they're ever trying to defend their IP from someone else. So it's not the company's fault. Well, it would be cool if they were cool about it. I like yeah, I billion times understand the situation. I think most people need to be a little bit more educated in that department. Yeah, - -9 -00:09:13,080 --> 00:09:57,570 -Wes Bos: everyone was all mad when I said that I had to take them out because everyone was excited to get them but it's their job and I was wrong in that. So lesson learned there. Next one is printing the actual stickers. So once you have your designs done, you need to find a printer so I in the past have used sticker mule for all of my stickers, they are sticker meals awesome. They do most most of the stickers that you get are probably printed at sticker meal, the quality is extremely high. They look really good. The printing and shipping to your house is extremely fast. So for most people I recommend just go ahead and use sticker meal. I know that the owner is like a huge Trump supporter and and people are boycotting them along with like all the other businesses there. So there's that which like the Do you remember that like on Twitter a couple of years ago, - -10 -00:09:57,630 --> 00:09:59,250 -Scott Tolinski: I didn't know that, to be honest. - -11 -00:10:00,000 --> 00:11:00,510 -Wes Bos: Like odor went off on some like massive rant about Trump supporting and making jobs and everyone freaked out and was was banning them. So that was a, that was a huge thing. I'm not gonna cast any judgment either way, because I don't use them anymore. I know their their quality, their product quality is really good. But I took about a year to do a whole bunch of samples on Alibaba. So if you've never used Alibaba before, it's this website where you can source manufacturers of anything. So if you want to get some fishing rods made, or you want to build a scale, or if you want to build your own microphone, or most of the stuff that you buy on Amazon, that is this like weird brand, what people are doing there is like, let's say if you go buy like a cell phone mount for your car, you're gonna notice that there's eight different kinds of cell phone mounts on Amazon, they all look exactly the same, and they just have their own brand printed on them. That's because people are going to Alibaba ordering up 10,000 of them getting their logo screen printed on them, and then selling them on Amazon. - -12 -00:11:00,570 --> 00:11:02,010 -Scott Tolinski: I have a funny story about this. - -13 -00:11:02,100 --> 00:11:03,240 -Unknown: Yeah, go ahead. - -14 -00:11:03,240 --> 00:11:56,010 -Scott Tolinski: So my my parents at one point, they started a Green Tea Company because my dad wasn't sure of his situation with the his job. So like, oh, we're going to start this Green Tea Company, he was going to China a lot. He had a really good idea for these blooming teas that would, they weren't really popular in the United States or anything. So hey, we're going to introduce these blooming teas into the United States essentially, like a T ball that blooms into a flower in a tea pot. It's like a really nice, decorative thing. So we were like, okay, we're gonna make a tea set to go along with this. And my dad had some Starbucks, like, it would come with some mugs and stuff like that. And so he had this Starbucks mug he really liked he went to the source on Alibaba, and was basically like, I really liked this mug. Can we do something similar to this? And they're like, yes, no problem. So then they send us a huge box of test mugs, big box, and all of the mugs came back with the Starbucks logo. We're just like, oh. - -15 -00:11:58,830 --> 00:12:01,680 -Wes Bos: Oh, man. So what did you have to destroy them then? Yeah, - -16 -00:12:01,680 --> 00:12:02,670 -Scott Tolinski: we destroyed that. Yeah. - -17 -00:12:03,210 --> 00:12:03,990 -Wes Bos: Oh, wow. - -18 -00:12:03,990 --> 00:12:04,650 -Scott Tolinski: Yeah, - -19 -00:12:04,800 --> 00:17:36,990 -Wes Bos: that's so Alibaba, there's lots of Chinese manufacturers on there. And what a lot of people don't know is that most of your printing, if you go to store and get like a paper bag, or if you get a box with a product, and all of that stuff is most likely printed in China. And there is a whole city in China that is like a special specific area of China that is just the like packaging industry of China. And there's like thousands and thousands of factories that do everything from bags, and stickers and, and notebooks and anything that is surrounds paper. So I went on there and I looked up like I don't know, seven or eight suppliers that do labels and adhesive things. And I said, Hey, send me send me a whole bunch of samples, give me everything you want. This is the kind of stuff that I'm working on. And usually what would happen is you'd pay like 70 bucks for a FedEx envelope overnighted to you. So I spent 70 bucks a couple times over for a different a whole bunch of different suppliers. And then they would FedEx you just this huge envelope full of stickers that they want. And then what I did is I took each of those stickers, the ones that I liked, I put them on a laptop, I put them on like just like kind of like wearing surfaces that that I would have put them on my phone, things like that. And I just like saw, like what's the quality? What is it like when you peel the sticker off because there's like you can get really cheap stickers that are like paper based. But as soon as they get wet, or as soon as you rip it off, it doesn't rip off nicely, things like that. So I did that. I also got quotes I said, Okay, if I order 6000 stickers from you, how much is it going to be and you get a kind of an idea of what the prices are. From there. I settled on one printer that had been using now which is zigge pack. And it's funny if you go to their Alibaba, all of my stickers are are on display as they're like, this is what we can do for you. Just funny funny, I was just looking at it. There's a whole bunch of like GitHub and Amazon stickers on there now so I've been telling people what printer I use for a couple years now and it seems that a couple other tech folk have picked up on it and also use this to get stickers printed, which is pretty cool. So the pricing of these stickers is much cheaper than something like sticker mule. I think it's like a third or a fourth of the actual cost of doing something like like sticker mule, so quite a bit cheaper. I have noticed that as I last time, I think I ordered 180,000 stickers, the price is significantly cheaper than when you order like 1000 packs versus 10,000 packs. So the more you order the way much cheaper it gets. You do need to make sure that the quality you really got to keep your thumb on the quality. So I've had lots of quality issues in the past where I always print my mat and there's another option to print them shiny. What sticker mule does is they print the mat so I made sure that they were matte and then I one time a whole bunch of them came back shiny and they had to read print them and send them. I've in my last batch, not this batch, but my last batch I had a bunch of the little ones are really hard to cut because they're so small, and the machine that punches down and cuts them was off by a few millimeters. But that meant like some of the stickers were just totally cut wrong. So that's something that I had to deal with. And make sure that this time around, the way that you communicate with these printers is via Skype, so you gotta like make sure you're on Skype late, late at night or early early in the morning. Because I think that a lot of these like Chinese manufacturers, they'll just do it. And if you're not like on them about the quality and making sure that you get everything, everything absolutely right, then they don't care, right, they're just gonna gonna ship it off to you What else is there there's import costs. So you're obviously shipping things from China into I ship them into Canada, which there is no trade agreement with China. So the border will see what the value is of the stickers and then they will charge you I don't know what the how it works. But usually it's a couple hundred, a couple thousand bucks on import charges alone just on these things coming into the country just because that's the way it works. If I were to print them locally, they wouldn't. What else we got here type of stickers. So most stickers that I print are this thing called PVC. Most people refer to them as vinyl stickers, but they are PVC. But the kind of cool thing about going with a printer in China is that they have access to absolutely everything because they live in this city where the entire printing industry of China is from. So the first time around, I asked them to do gold foil stickers. And then they went to like a different printer and got them done and brought them back and they were great except that they're not waterproof, because they were they were like a paper foil. And I saw a lot of people like put them on a water bottle and then they threw it in the wash and then the whole thing sort of came off. So I also noticed that they they do security stickers, which is really cool. You know, like if you buy like a laptop, they put like a little security sticker on if you peel it off or something yeah. Or if you buy like a nice shirt and on the on the label. It'll have like a holographic one. So I said like, Can you just print like a really big holographic sticker for me and like of course we can do anything you want. So I they say you send us three layers. And we will print a holographic sticker with that. So the first time I did a JavaScript sticker the second time I did a CSS sticker and it's really cool because the angle that you you do this holographic thing, you see different things in it depending on on what you have in there. So I thought that was really cool. They also sell like these epoxy stickers, which are kind of like a bubble label. They sell those remember those puffy stickers from when you were a kid? Yeah, yeah. nobody's doing puffy dev stickers, JavaScript puffy stickers, if - -20 -00:17:36,990 --> 00:17:41,570 -Scott Tolinski: you if you don't have your dot tech domain, puffy dev stickers, that tech. - -21 -00:17:43,980 --> 00:20:30,480 -Wes Bos: That would be amazing. They've got all kinds of different things, they can pretty much do anything that you want, they can do huge one that can do tattoos, anything you can think of. Whereas if you go with a normal like sticker mule printer, they have one type of sticker they all they have like circle stickers and clear stickers, they had a couple different kinds. But the sky's the limit when when you go with one of these types of printers, because you can you can pick whatever you want. Once you have the actual stickers printed and you kind of crank down on the quality, I have them bag them as well. They give me a what are called poly bags, they have a whole kinds of different bags, what I did is they just went to the dollar store. And I took pictures of all the different kinds of bags like you can buy crayons for your kids and these like foil bags, but they're not very recyclable. So I was kind of aware of that they have like these like plastic bags as well. So I ended up on the polybag. So it's nice and clear, they print a cardboard header and then fold it, they pay some poor soul to stuffed them into bags and staple the top. The first time I ever did it, there was a miscommunication. And they shipped me the tops and the bags and a bunch of staplers and not the actual packed and I it took hours and hours like I think I only printed 2000 packs that time and it took like 40 hours to pack them all. So I make sure that they pack them themselves into all of these bags just because it's funny that the scale that I'm doing that now is just everything takes so long and you can't just like oh, whatever, I'll pack them myself because the 10,000 packs probably would have taken me like 200 hours or something like that. I think they also have like some sort of machine that will pack them for you as well. Once they're packed into the bags, they get shipped over to me I get they get FedEx over it takes about a week to get here from China depends on the customs and all that stuff as well. And then some poor guy in a FedEx man shows up with like 400 boxes of stickers, and I have to spend an afternoon schlepping them up to my office. Then I go ahead and sell them so I put them up on my website and I sell them all at once just because of the logistics that is shipping. It's not something that I can just simply do like every day dip into it dip out and send a few off. So what I do is I'll just sell them all at once. I'll have a limited amount of stickers. This time I had 7500 packs and they sold out way faster than I had hoped. It's sold out in eight hours which is blows my mind how quickly went Are you My own course platform, so that's free, you can use something Shopify or whatever, I use stripe and PayPal, they take about 50 cents. So that's one thing I didn't really consider is that when you're selling something for such a low value, like $5, PACA, stickers, stripe and PayPal still take their cut, which is 2939 cents plus whatever percent, like 2.9% on top of it. So that's 5060 cents at the end of the day for that one, though, which is why I think like, you go to the, you go to the store, the corner store to buy a pop, and they, they, - -22 -00:20:30,480 --> 00:20:39,750 -Scott Tolinski: they say no credit cards under $5, because or they just get really, really passive aggressively mad at you and roll your eyes when you have done a credit card, just like - -23 -00:20:41,640 --> 00:21:22,710 -Wes Bos: so knowing the other thing you need to be worried about is that selling something so cheap is a magnet for people to test stolen credit cards, because usually when someone has a stolen credit card, they want to test it on something cheap. And then if it works, and they go buy like a TV and a $5 pack of stickers is a really good way to test if a card is good or not. So I haven't had too much of an issue because they don't have this open ended sale. It's just a very pointed sale and I email people and they sell really quickly. But every now and then people still do buy it with a stolen credit card. In that case, you lose your five bucks, you lose your $15 for the dispute fee, as well as sometimes they still I don't know why they gave me their address, I shipped a guy a bag of garbage once when he used the stolen credit card to do - -24 -00:21:22,710 --> 00:21:26,280 -Scott Tolinski: so services, they'll let you send like poop in a box. - -25 -00:21:26,300 --> 00:21:29,550 -Wes Bos: So yeah, or like a glitter send glitter to your enemies in glitter. - -26 -00:21:29,550 --> 00:21:30,540 -Scott Tolinski: Yeah. - -27 -00:21:32,360 --> 00:24:53,670 -Wes Bos: Then once they're all sold, it's time to to pack them and put them into envelopes. So the first time I ever did this, I thought oh, just I'll just run some envelopes through my own. I have like a pretty nice laser printer. And it has an envelope feed so you can put them in. But I have I figured out that you can only put 10 envelopes in at a time and like one every 20 it would jam. And then you'd have to reprint that specific one. And it was just a nightmare. So what I figured out is I wrote a script, it's actually a jade file in my own course platform that takes everyone's address, and it just automatically generates all of the envelopes for the people that need to ship them to it figures out how much postage needs to be put on in the top right hand corner, puts my return address in the top left hand corner, and then I get this PDF of 5500 envelopes doesn't wasn't what it was last time. And then I send that to a printer. And then the printer takes this time it was a couple days last time it was a couple hours a whole week, it takes them a whole week to print them on to actual number 10 envelopes. And that's about 10 to 20 cents per envelope depending on how many are actually ordering. So that's a 10 20% cut into the $5 that it is because I sell them $5 with free shipping anywhere in the world. A lot of people ask me like, why don't you just use like a dynamo printer where you can like print the labels. And the answer to that is that that would take way too long, because you have to peel them and stick them onto every single envelope. So I rather just print it directly onto the envelope that we'd have there. And also that's a huge added cost as well those those labels, those Dynamo labels are sometimes like 20 cents, 30 cents an actual envelope and and when you have $5 to ship a pack of stickers around the world, I like to do them cheap, right like there's a lot of people selling stickers online, you get like two or three for eight or 10 bucks. But I love the idea that I can sell 18 stickers for five bucks shipped anywhere in the world. Because it's it's not something you have to like sweat about, everyone can have a $5 pack of stickers. Next up is stamping. So once they're in the envelopes, I have my assistant she takes the number of packs on the envelope itself, I print the number of packs that are needs to go in that envelope, I sell them in packs of one three or six, pack them into the envelope, then you take a cloth, run it against or liquid, I don't think you can look too many of them though. So we stick them in envelopes, you seal it up, and you flip it over. And then it's time to actually stamp the envelope once they've all been packed into the envelopes that's takes between stamping and unpacking the envelopes. I think last time it took us about 50 hours, which is a huge amount of time when it comes to stamping, you need to figure out how heavy is the thing. So I have like a scale here. And you also need to figure out the weight of it. So if you stack the stickers on top of each other, the it can get really thick. And once you pass the thickness of it, then you go into a different mail class. So I shipped them via US Postal Service mostly. And I've been on their website because you have to make sure you're well within the weight as well as within the thickness. So I have like these digital calipers that measures the thickness of the envelope tank. It's so involved in aeration, all of the stuff that I've figured out. So based on the thickness and the weight, we know how many stamps to put on the envelope every time we've done it so far, we've just manually stamped them. So we go to the post office and we buy or you go online, you buy 5000 this time was almost $5,000 worth of stamps alone, which I've been trying to automate. So here I'll talk about all the different options. Everyone says use stamps calm, you idiot. So I signed up for stamps.com and pass it - -28 -00:24:53,670 --> 00:24:56,070 -Scott Tolinski: on to this podcast and then you might use how they - -29 -00:24:56,070 --> 00:25:56,520 -Wes Bos: share it because it's garbage service. So the way that it works is that you, you find this there sheets of stamps, which is 30. And then you have to upload all of your addresses to their like crappy desktop software, and then it will like print out 30 at a time. So that's the same, it's extra work to upload them all. It's extra cost to buy their custom stamps, comm sheets, and then you're still peeling them off this like sheet and sticking them on yourself. Or as with the stamps, you can get into a really good rhythm where you just peel stick, peel stick, peel stick, and you can do them like real real quick. So there's that My dream is to use some sort of API to ping the API with the thickness, the weight and the address, and the API will come back to me with like a barcode that I will include in my printing, and a couple options for that. There's like endicia.com, which had a phone call with them in Disha. That's, I think that's right. I - -30 -00:25:56,520 --> 00:26:00,570 -Scott Tolinski: don't use that I use the service for sending t shirts. That's what I use. - -31 -00:26:00,660 --> 00:26:14,250 -Wes Bos: Okay, good. So I like basically got on the phone with them. And I said, Okay, I want to do it, but not for shipping. I want to do it for stamps. And they're like, that's what stamps.com was for, but I'm like, but that sucks. But - -32 -00:26:14,279 --> 00:26:17,550 -Scott Tolinski: stamps.com please sponsor this podcast, by the way, please, please don't - -33 -00:26:17,550 --> 00:27:22,860 -Wes Bos: it sucks. Yes. So my other my other way was, I got a message from Sarah cope or co pay, who said she did all the merge for CSS tricks, and code pen and all of Chris coiour stuff. And she says we use shipstation. So I looked into shipstation. And it actually seems to be exactly what I want. And shipstation has an API that you can ping, and you can create an order. And then apparently, you can get back an actual label, which I'm assuming I can save that label and then put it into my printing. So that's what I'm going to try next. Because it's cheaper. If you have like a corporate account with these post offices, you can you can just print the exact amount of postage that you you need. Because sometimes you go over on the postage, because it's only $1 15 for an international stamp. And if you need like $1 80 you just have to go over it because you can buy like one there 10 cent stamps, then that's it's too much work. That's what my next little thing is is trying to figure out how do I integrate the shipstation API? And also like I'm Canadian as well, I drive across the border to Buffalo to ship all of these because Canadian postage is is so expensive, and they're on strike right now, which - -34 -00:27:22,860 --> 00:27:54,420 -Scott Tolinski: is the border. When you do this in you have like boxes full of stickers in your car. Yeah. Really scrutinized anytime we used to go to Windsor to drink. Because when you were like 19, you could drink in Canada, right? Yeah, if you went to Windsor, and it was only like, you know, an hour long drive or something. And so we would, we would just pop over the bridge. And they would be like, so why are you coming to Windsor? And we'd be like, visiting family? And they'd be like, okay, you kids. Okay, sure. And they would, they would always go through the car to make sure that you we weren't like bringing in a bunch of bunch of stuff. - -35 -00:27:54,480 --> 00:29:09,600 -Wes Bos: Yeah, no, it's so it's totally allowed. I made sure of that before I, I did it. There's many companies in Canada that do this exact thing. There's a lot of eBay sellers that will just print us postage, and then they'll throw it on this truck. And the truck will drive across the border and dump all the mail because it's such a common thing to do. So it's totally allowed. The only thing is that some entries make you go through the commercial line because you are business so you have to go with the trucks in the commercial line and pay like there's a fee to use the bridge but that has nothing to do that's just the bridge that has nothing to do with like being able to cross into into it. So every time I cross we say hey, like what are you doing? I'm like I'm shipping a whole bunch of letters they see it that you rolled on your Windows the entire car is full boxes. And he said he said oh yeah, people do this all the time. It's totally allowed just sometimes you'll be asked to go through the commercial line instead of the just the regular line so surprising to me that that it was allowed as well. But I made sure that it was before I I tried it. Yeah, what else you need to make sure that the thickness and weight does not get at a certain point I used to sell 10 packs, and I accidentally I didn't know that when you ship a 10 pack. It's big enough to be considered a parcel there's letter there's flat and there's parcel and you can send it via parcel no problem. You pay the postage, it's okay when bundling. What is what is that? - -36 -00:29:10,259 --> 00:29:12,180 -Scott Tolinski: Talking about the parcel? Oh, parcel - -37 -00:29:12,180 --> 00:29:57,180 -Wes Bos: contract and web dev. I had to fill out a whole bunch of customs forms for the 10 packs. So now I only have six packs, which is the very depending on how many stickers I print. The six pack this time was the maximum I could put in an envelope without be declared a parcel sitting having to fill out customs forms. mailing I drove to Buffalo ship on there I met all the Canadian ones out of Canada just because it's cheaper to do that still. And then finally you wait a couple days they start showing up at everyone's home because I mail them all around the world. This time I had 92 countries that ordered them, especially India and Colombia they take for forever to show up because the mail system is just like not good in those countries, I guess. So sometimes they don't show up at all. Sometimes they take up to two months to show up. - -38 -00:29:57,210 --> 00:30:05,100 -Scott Tolinski: Yeah, I shipped a Shi t shirt I wanted that took two months. And then arrived back at my door in the package, it looked like it had been around the world. So yeah, - -39 -00:30:05,130 --> 00:33:25,350 -Wes Bos: I still get them back like 11 months later, I still get them returned. Or sometimes I see people, Hey, I got them 11 months later, that's in the minority, most people get them within a couple days. But sometimes they do. That's just how it is because of the way I send them, I send them very cheaply via stamps. If I were to do them as parcels and have a tracking number, it would be much more expensive to actually do that. So it's not really something I'm interested in getting into. I've thought about closing sales to countries like India, and Colombia, and even Mexico takes a long time. But where I'm at right now is they just tell people, hey, this might take forever to get to you, I'll give you your money back if they never shows up. But they'll probably show up at some point. And that's kind of what I've been, I've been sticking with lots of them get returned, maybe like 1%. But 1% of 5000 is yes, 50 of them come back. So now you have this added burden. So I have a peel box, which I pay a couple hundred bucks a month for those come up on my peel box. And then I have to pay my assistant to contact these people and tell them hey, it came back. And most cases people goof up their email address, or they go goof up their address or they have an auto fill that was incorrect. So I will have these hilarious checkboxes when you buy the stickers that say, I did not put in the wrong address, I will not email you, when I realized put in the wrong address. I actually read the two above boxes, because people were just buying them and then emailing me being like, Oh, no, I screwed it up. here's here's the update. And I should probably code something in my back end that allows people to update their address. But what happens is that they sell. And by the time that I'm done selling them, within a couple hours, I have the envelopes off to the printer to be printed. And at that point, it's too late. So if that's the case, I just refund the person's money and I eat the eat the shipping costs and the stickers cost. So you have to eat the cost a lot with people goofing it up. But even though it's their problem, you kind of have to be cool about it. I think that's about it. The other thing is some of them have to be mailed out of Canada, specifically Iran, you cannot send mail from Iran to their from us to Iran, because there's some sort of block on and there's like there's a whole bunch of countries that have like a what's it called like embargo or something like that where you cannot send mail, so you have to make sure that the ones that are addressed to those countries are sent out of Canada instead. So it's a huge thing of all of this stuff. But that is how I do stickers, all of the stuff I've talked about, I've learned over the last three years. And at this point, it's a very efficient operation. I probably in the last package of stickers between doing the designs talking to the printer and driving to Buffalo, I probably only put about 10 hours of my own time into it. And the rest of it is just a process that I've built up over the time, which is kind of fun. Future I'm wanting to do like more stuff, just because it's fun to every now and then like you're sick of coding, you want to do something else. But also like it's fun to like, try to solve the problem of all of this logistics with code. Like that's what developers are right? So I want to figure out how to do a little bit more I've been thinking about like, we want to do syntax t shirts at some point. Yeah, a couple of times. I have a friend that has the actual clothing company, and he does cut and sew in Peru. So I'm talking to him about doing some like kind of cool stuff, because everyone has 1000 like gildan t shirts with the logo screen printed on it. But what I really want is like cool, nice hoodies and nice t shirts and like proper fitting shirts that are like modern and stuff like that right stuff - -40 -00:33:25,350 --> 00:33:27,330 -Unknown: that you want to wear that you - -41 -00:33:27,330 --> 00:33:48,090 -Wes Bos: would want to wear. Yeah, cuz there's a there's a lot of web developer stuff out there that just says like, drink coffee all day. And it's just like blasted. And like that's not something I would ever were. And I know that most of web developers, I don't know, some people like cheesy t shirts, but I've never been a fan of, of cheesy t shirts. So I want to do something that's that's really nice. I'm talking to him like that. Right now. Yeah, we - -42 -00:33:48,090 --> 00:33:48,990 -Scott Tolinski: got a style on him. - -43 -00:33:49,050 --> 00:34:09,150 -Wes Bos: Yeah, I just ordered some pencils. Because I was like on this website, and for like 500 pencils. It's like $100 or $150. I forget what I put on it. It's just like, never stop learning or something like that. Or never stop making things. That's what it says. I'm gonna have some pencils coming my way. I just working on some some like Christmas gifts for some of my web developer friends that I'm going to give them, - -44 -00:34:09,270 --> 00:34:11,850 -Scott Tolinski: man. It's sick. It's a great idea. - -45 -00:34:11,940 --> 00:34:49,560 -Wes Bos: Yeah, I like it. So that's kind of something that I'm interested in. Hopefully that clears up any questions you have about how all the stickers work. Obviously, it is a huge logistical hurdle. I didn't know it going in. But I think about like, what do people that actually have ecommerce companies do? They must have like amazing processes for handling all of the stuff because I'm just a guy with one pack of sticker, one single skew trying to mail them around the world whereas people have returns in different amounts and things that are in stock and things that need to be shipped later. And the logistics that goes into actually getting a physical product to someone is is amazing. It takes a lot of work. - -46 -00:34:49,590 --> 00:34:53,310 -Scott Tolinski: It takes so much work that I think we just broke our record for the longest tasty treat. - -47 -00:34:53,880 --> 00:35:10,050 -Wes Bos: It's not very hasty. Alright, well that's it today. Hopefully you enjoyed it. Again, all of the links To my printer and everything will be at bas dot A AF that is the link so you can you can get in touch with the the printer and all that sick, sick bass please - -48 -00:35:11,940 --> 00:35:21,690 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax92.srt b/transcripts/Syntax92.srt deleted file mode 100644 index 9fe6f6946..000000000 --- a/transcripts/Syntax92.srt +++ /dev/null @@ -1,416 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,530 -Unknown: You're listening to syntax, the podcast with the tastiest web development treats out there, strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,559 --> 00:00:44,250 -Wes Bos: Welcome to syntax everybody. Hopefully you're doing just fine today. Today we're gonna be talking all about react hooks. This is a much requested episode, React came out with this new API in the last what like week, week and a half about react by timing here, this will probably be out for a couple weeks just yet. And we're going to attempt to distill all the information about what react hooks are, why you might want to use one what the differences are between that and regular classes and sort of just give you a nice primer on on how they all work with me as always is Scott Pinsky. How you doing today, Scott? - -3 -00:00:44,399 --> 00:01:21,780 -Scott Tolinski: Hey, I'm not doing great. I'm gonna be entirely honest here. I was supposed to be speaking at graph qL summit this week. And I came down with the stomach flu, and I looked at getting onto a plane and then I was stuck in bed and I was like, You know what, there's no possible way that I'm going to be able to get out of bed to get on an airplane and to go stand up and talk. I am. I am just not doing I'm heavily medicated on some anti nausea meds right now. Oh, man. Yeah, I could be doing better. It seems like every time I travel anywhere, I just get sick. So here it is. Here's the time that I'm getting sick after - -4 -00:01:22,109 --> 00:01:33,360 -Wes Bos: traveling. There you go. Yeah, cuz we just got back. What about, uh, about a week ago, we got back from San Francisco where we did our live show. That was the last one. Last week's show. We just released that. That was really, really fun. - -5 -00:01:33,479 --> 00:01:47,730 -Scott Tolinski: Yeah, no, that was a blast is so much fun. I think it comes out in the audio. And once the videos released, they'll probably be released. By the time this is up. I think once the video is released, I think everyone's gonna see just how much fun we were having on stage if you totally couldn't hear it, because it was it was definitely a blast. - -6 -00:01:47,789 --> 00:02:03,560 -Wes Bos: It was a lot of fun. The only thing I noticed is that that when the audience roared, it was just kind of like, it sounded like a couple people were like clapping or something like that, because you didn't we didn't have a microphone on the audience itself. But don't worry if people were actually laughing at our jokes. Yeah, yeah. - -7 -00:02:03,749 --> 00:02:10,800 -Scott Tolinski: Yeah. Next time, we just need someone in the audience who asks really hard, and we just need to put a microphone by them. So we can mix it in recording. - -8 -00:02:11,429 --> 00:04:05,610 -Wes Bos: Awesome. Well, today's show is sponsored by fresh books, which does cloud accounting in a century, which is going to track all of your errors and exceptions on your server and on your client. I'll talk about both those companies partway through the show. So let's just jump on into it. React hooks, this is something that has been sort of being cooked up for a couple months yet and has just been released to the public from Facebook, it's not confirmed yet, it looks like it's going to be going ahead. But it's not in any stable version of react currently, if you want to use it, you have to install an alpha version of react 16.7. And you will have it and I thought we just kind of go into what are hooks, what are the different types of hooks, when might you want to use them. So before we even get into to what hooks are let's talk about right now about the ways that we can create a component in react, we've got two ways to create a component, right, you have your your typical what your classes. So class, Scott extends react component. And inside of there, you can have your state, you can have all of your lifecycle methods. And then of course, you have a render function. And then the other one that you have is what we call a stateless functional component, or what we called a stateless functional component. I'll talk about that in a second. And that simply was just a function that accepted in props and returned some JSX. Right, it just like rendered out some some HTML from that the resume call that stateless functional component is because it did not have any state, you're not able to have context inside of it, you're not able to do any of your component will mount component did update component will unmount, all those lifecycle methods are not available. So that's kind of what we have right now. And the pain that we have is that with those, let's call those function components, because that's what that's what react is. Now moving into the pain that we have with that is if you want to add state or add some sort of logic lifecycle hook to one of these function components, you have to then convert it to a regular class based component, right? - -9 -00:04:05,630 --> 00:05:16,700 -Scott Tolinski: Yep. And we all have that pain of will you make a simple component Now listen, in this simple component needs additional functionality. So then you have to turn it into a class and then that conversion isn't the most fun thing in the world, not automatic. I think there is some like plugins now in VS code that will do it for you, but was never the most fun thing to do. And you know, even that, I've resorted to essentially just making every component A class component just because, well, at some point, who knows, maybe this thing is going to grow. And since you weren't getting any sort of performance benefits from a stateless functional component. Anyways, I was just using straight up class components for everything, even if it didn't require state or lifecycle methods or anything. So now, that brings us to react hooks, which is well basically the solution to using all of those good things that we just mentioned in functional components. So we now have the ability to use what are essentially some lifecycle methods, but not lifecycle methods, as well as state as well as context and some other fancy stuff, as well as custom hooks rafts and all sorts of things that we're going to get into in this episode. In these functional components, they used to just be sort of dumb, dumb components. - -10 -00:05:16,740 --> 00:05:35,520 -Wes Bos: Yeah. So anytime that you want to inject or share logic or functionality into a component, let's talk about like, how did we do that? In the very first one, we had react create class, before we even had classes in react, we would use mix ins to inject functionality or data into a component. - -11 -00:05:35,550 --> 00:05:42,450 -Scott Tolinski: Yeah. And did you like big sense, cuz I like mix ins. I mean, I did, why they went away. But I liked mix ins. Yeah, - -12 -00:05:42,480 --> 00:06:47,580 -Wes Bos: I really liked them, they were very simple, simple way to add in, like, if you wanted to add a router, or the information of a router into a component, you could just have a mixin. And they obviously remove those because of it's hard to compose things, when you have mixes, there's a whole bunch of issues around them. So we moved into from that to high order components. And a high order component is just a function that will wrap your component. And then via that component will introduce things like functionality or data, like maybe a router, routers, methods and data about the current route that will inject it via props. So you just wrap your component in that function. And then the that data and functionality will be surfaced via this dot props dot, whatever, yep, then those are still popular, but they sort of fell out of favor with render props now in render props for this idea of you have a component and you could put that anywhere in your component. And then the child of that render prop component will then expose to you data and functionality via this kind of child function from which you can return. Yeah, more JSX? - -13 -00:06:47,670 --> 00:07:48,480 -Scott Tolinski: Yeah, I don't know how many people listening have seen their codebase go through all of these transformations, because level up tutorials has used make sense, then higher order components. And then now it's using render props to fetch this data from Apollo, right. So I, for one, have seen this transition happen from one to one to one. And yeah, when you when you did get to the current render prop situation, things felt very nice for a lot of reasons. But at the same time, one of the big problems with render props is you end up just having some bloat in your component tree, your component tree ends up having a billion components nested deep. And if I look at my react dev tools, it's almost impossible to really like navigate my component tree, and then any sort of meaningful way. And to me that it became not necessarily a big problem. But it did become an annoyance in development and debugging and trying to understand where my data is coming from and how it's living. I mean, I like the way that they they look and sort of feel in my codebase. But at the same time, I've never felt like the perfect solution. - -14 -00:07:48,600 --> 00:09:09,840 -Wes Bos: Yeah, that's the solve the problem well, but it also introduces a whole bunch of frustration in debugging, as well as render props writing them, if you've got three or four mutations or queries in Apollo, something like that, then there's solutions to it. But there, it's not the greatest thing in the world. So it's kind of interesting that that react now has come out with this idea of hooks that allow us to use things like state contacts, effects, which is going to be side effects. And you can write your own hooks. And they will allow us to access state and to access context and to access reps and reducers without any of these render props or higher order components, or the the need for making, making a class and then using all of those. So before we even get into any of that, though, I want to say like react is very they understand that people are probably hearing this right now and going Oh, good. I get to rewrite my entire code base. Now, thanks react for changing it. Again, this is where JavaScript fatigue comes in, because they keep changing things. So hooks are 100% opt in, and classes aren't going anywhere. So this is not something where you have to go in and rewrite all of your code. But in in many use cases, this is solving a problem. So like I probably wouldn't go out and rewrite all of your components. Unless you say, Yes, I have that problem. And this is going to fix it. - -15 -00:09:09,919 --> 00:09:56,659 -Scott Tolinski: Yeah, when I love that about react, it's one of my favorite things about react, it allows for these incremental changes, you can try it out and see how much you love it. And if you don't love it, you don't have to opt in to use it. And to be honest, any of these features are essentially able to stick around, you could still be using mix ins if you are on an old version of react, you know, it's like there was a conference I was at and they were raising hands about what versions of react people are on. And I wasn't super surprised. But it was interesting to see how many people were running old versions of react and probably aren't taking advantage of a lot of some of the newer stuff in react or even newer techniques and still potentially using some of the older techniques. So you don't have to jump into this stuff. And if you're still using mixins Well, you want to upgrade to hooks then now you've just missed the two other upgrades. - -16 -00:09:57,270 --> 00:09:59,130 -Unknown: Do you Yeah, you - -17 -00:09:59,130 --> 00:10:12,409 -Scott Tolinski: would write it Maybe if you skip hooks, you'll jump right to the next one. No, who knows? I think hooks seemed like they're a really good solution and probably going to be sticking around for a little while. But you know, you can't have a I almost call it a future ball. What is it called? - -18 -00:10:13,590 --> 00:10:14,460 -Wes Bos: Like that? No, - -19 -00:10:14,490 --> 00:10:23,070 -Scott Tolinski: like a soothsayer? Or like, a fortune teller would use a crystal? Oh, yeah, not a future ball. Future ball sounds like a sweet like future sport, though. - -20 -00:10:23,270 --> 00:11:02,610 -Wes Bos: Yeah. And also like, I wouldn't start rewriting your entire application. If you have a large production application, I would probably just sit on your hands for a couple months. First, let it hit production. Second, let everyone figure out what are the best sort of use cases around it because it comes with a couple hooks out of the box. But it also comes with the ability to create your own hooks, which is great, because I bet in a month or two, we'll probably have another another show that will say here are some of the amazing thing that people have built with hooks. And here's some amazing ways to approach specific problems that we've had in it. So maybe just sit on your hands for a couple months until we see what has come out of the community via hooks. Yeah, it's - -21 -00:11:02,610 --> 00:11:31,649 -Scott Tolinski: always funny to see how best practices develop, because something will be released. And then people say, Oh, this is how we do it. Oh, did you notice this pattern or this pattern or this pattern, these patterns that only come out from just trying and experimenting and someone having an idea and how to use these things? It's just a little bit different than maybe how other people envision them. So yeah, I think best practices will come and evolve, and I'm excited, it's going to be a it's gonna be a wild ride here. And it's gonna be a, it's gonna be sweet. - -22 -00:11:31,740 --> 00:11:56,309 -Wes Bos: I saw that as well with tag template strings, when they first came out. Everyone was like, This is awesome. But what do we what do we use them for. And then I saw after maybe even just after a year of tag templates, we started seeing like style components is using them in a really neat way. And a couple other libraries are using them in in pretty interesting ways that I would have never have thought of when I was initially sat down and was trying to build up some examples. - -23 -00:11:56,399 --> 00:12:22,380 -Scott Tolinski: So the first one we want to get into is probably going to be one of the most used and maybe most accessible hooks that exists in this, which is going to be the use state hook, which is essentially going to allow us to use state function components. Now each state is essentially a replacement for what is typically set state in a class based component with some differences in syntax. - -24 -00:12:22,409 --> 00:14:21,450 -Wes Bos: Yeah. So the way that it works is maybe we should explain a hook in react is just going to be a function that you run right before you return. So you have a I've got an example here, right now, if you're driving trying to visualize this, I just have a function called Simple counter. And it says I am age years old. And age is a variable. And when you click on a button, it's going to increment it over and over right, you click a button to increment a counter simplest example that we have. Now, if you have a component that has someone's age, in it, you have a render, which is I am however many years old, but then you also have state that is inside of that. And then you also have an event, that is when somebody clicks it, you need to increment that. So the way that the new state works is that you don't say like state equals an object where it has an age property, and you set that to zero. And then you write some sort of method that will call dot set state and update it. The way that it works is before you return your JSX, you say you state and you pass it your initial state. So here, I say you state and I pass it zero, and that will set it up a new piece of state in that component to be equal to zero. And then that you state is going to return two things, it's going to first return the piece of state, I'm going to call that age. And the second thing it's going to return is going to be the updater function. And you can call that whatever you want. The really neat thing about this is that they don't, it doesn't return you an object, but it returns you an array where the first thing is your piece of state. And the second thing is your updater function. And by returning an array that allows you to destructure into your own named variables. So I'm saying const square bracket age, comma updated update age equals use state zero, and then that will that will return me both the age which I can then go ahead and use that age variable directly in my JSX. There's no this dot State DOT age or props that age or anything like that. It's simply just a variable called age. And then when I want to update age, I simply just call that update age function and pass it the new value. It's really clean and really simple. - -25 -00:14:21,510 --> 00:15:39,570 -Scott Tolinski: Yeah, and I think a couple of interesting points here is that in the past, we've always said state on an object right where the object itself was a property and a value. And here we're passing in a single value to essentially a single function rather than one set state function that exists for our all of our state, we have an individual set state for this particular state value. So we don't need an object and a property, we can just pass in a value. Also, I think that multiple return thing is just really interesting. And I think potentially that destructuring and array might confused new people who haven't done a lot of D structuring arrays. But again, it's essentially just basically because it's returned. A couple of values and we want to be able to name them whatever makes sense, right? We don't want to be locked into anything. So I think there's some really interesting things about this pattern. And at first glance, to me, if you ever see a comparison between this and class based stage or anything like that, you'll instantly notice things looking cleaner. And I think that maybe holds true through most of the hooks and conversions that you'll see of class components to function components using hooks. Typically, I think the code just looks cleaner. And I'm sure it's hard to visualize. We're a podcast here, I'm sure you'll see lots of videos and code examples about it. But it to me, the syntax of this is just really nice. It's really nice and clean. - -26 -00:15:39,630 --> 00:16:58,200 -Wes Bos: Yeah, it's very simple. And you don't have to do that. The other thing I should mention is that you can have multiple use states inside of a component. So if you have three or four pieces of state, you don't have to put one big object into that use state, you could have like age equals use state seven. And then name equals use state Wes. And then like last name, like you'd have different pieces of state for every little piece of state that you want, which is kind of cool. And then you have separate updater functions for each one. One other thing I wanted to note is that if you look at this, and this is what happened to me at first, so I looked at it, and I was like, Okay, this is a function that runs and when the function runs it initializes, my empty state or my initial state, which is the age of zero, and then it says I am zero years old. But what happens when that function runs again, because something goes updated, does it just reset it back to the initial state. And the kind of the cool thing about react hooks is that normally variables disappear when a function exit, but state variables are preserved by react. So I thought that was pretty cool. The first time that you call use state, it will initialize a blank state. And then the second time that you call you state, the second time that function is run, it will have known that you've already initialized that state, and it will be able to preserve those values and pull them back from what we've had. - -27 -00:16:58,289 --> 00:17:20,490 -Scott Tolinski: Yeah, super cool. And it's funny, I mean, you have a little note here that it memorizes it, which is a fun word. And for those of you who are, it's basically you could think of it as like caching, right, it's like cache value, I always like to just add an R into that word and say memorize, because that's sort of what it does. You know, for those of you who hear the word memorizing or never quite sure what it means. - -28 -00:17:20,600 --> 00:18:45,830 -Wes Bos: The other thing that I tripped up on with this new update state is, you know, on set state, where if you were to have three items in your state, and you were to update a piece of one of them, the other two would, would just be merged into it. That's not the way that these new state update or functions work. And the idea is that every piece of your every top level piece of state will be have its own updater function. However, if you have, let's say, an object inside of a piece of state, so const person and update person equals use state, and then you, you you, you put Wes in there, if I wanted to update just a piece of the person a piece of West, what you would need to do is you need to spread the old state and then after that pass in the new property, which you want to overwrite it. And then there's two ways that you can do that, you can simply just spread it and then pass the secondary property, or just like in react sets the how we had callback functions, you can also pass your update or a function that will give you access to your previous state and then return the new state from that. And the differences between the two are because set state and update state are a synchronous, sometimes you can get into the situation where the current state in your component isn't the most recent because the the last update state hasn't finished yet. So it's a bit of a weird thing you can look into a little bit more. It's kind of hard to describe on on a podcast. - -29 -00:18:45,900 --> 00:19:02,600 -Scott Tolinski: Yeah. Yeah, that's so funny. You like coding podcasts, right? Like, how do we show these things verbally? Because a lot. Yeah, is syntax, as the name of our show would suggest, but a lot of these things are like syntax based and potentially difficult to describe over. Oh, - -30 -00:19:02,880 --> 00:19:25,850 -Wes Bos: yeah, I think the React documentation has lots of good examples. And it's worth going and reading through that. Or I'm hoping to do a little YouTube video on just on how this stuff works. So you can see the syntax, but it's more of the ideas here where you have a function that returns some JSX. And if you want to introduce some state to it before you return the JSX, you simply just run a little bit of JavaScript before that you state in front of it. - -31 -00:19:25,920 --> 00:19:36,630 -Scott Tolinski: Yeah, well, this is the certainly the the freshest way to write new components in state. the freshest way to manage your cloud accounting software is Freshbooks. - -32 -00:19:36,660 --> 00:21:38,640 -Wes Bos: Wow, that's good, good hook into audible. So Freshbooks is our sponsor today and they do cloud accounting. If you've never heard of Freshbooks you haven't listened to any of our thousands of podcasts where they've been a sponsor on it is the small business accounting software that makes billing painless, I use it myself to send out all of my invoices Actually, it's it's really funny because let me tell you a little story about Freshbooks. They called me a couple weeks ago, and we're like, Hey, how's it going? This is whoever from Freshbooks. We're thinking about adding a couple new features, and we just wanted to get your feedback on them. And they had no idea that I was like, they had sponsored my podcast, like it was someone's from the totally different part of so I was just talking to them about basic. So like, what do you mostly use Freshbooks for? And I was like, well, mostly use it for billing Freshbooks. He's like, whoa. But I thought that was so cool. Because they're just calling up their customers at random. I don't have a very like, I'm not like a top shelf customer. I think I have their cheapest or second cheapest plan. And they're just calling up their customers at random because they want to get more out of their customers. They want to understand like, how can we make this product better. So let's just get on the phone and talk to them about how they're using our product, maybe some of the pain points that they haven't the thing that they're I'm not even sure from muscles to say this or not, but they were asking me about reoccurring billing. If they could make away right now you can send recurring invoices, but there, there's a way to also just add a recurring actually charged the customer. So they're asking if that would be helpful for something like that for me. So I just love fresh books, it's awesome. If you are trying to build someone and send them an invoice, if you're trying to log all of your expenses for the year, if you're trying to time track, that you're working on a project with the different rates, it is the software that you need. So check it out@freshbooks.com for syntax, and use the syntax in the How did you hear about us, you're gonna get a 30 day unrestricted free trial. Thanks so much Freshbooks, for sponsoring. - -33 -00:21:38,790 --> 00:22:08,940 -Scott Tolinski: Thank you. Cool. Okay, so we we talked a little bit about our new state and how we're going to be using state inside of function components with use state, I think the next one to get into is one of the I think maybe one of the more interesting ones as well, which is the context hooks. So context itself was pretty recently introduced into react. And at first it was using the render prop sort of right, we had our provider we had our consumer, we talked a little bit about on this podcast at once. Yeah, - -34 -00:22:08,940 --> 00:22:11,940 -Wes Bos: maybe we should give a quick rundown of what context is. Yeah. So - -35 -00:22:11,940 --> 00:22:36,030 -Scott Tolinski: context is basically a way to share state throughout your application, it's a way to set essentially a variable somewhere and access that variable somewhere else to avoid things like prop drilling, where you're passing it down 100 components, or maybe you're sending it from one totally separate area of your application to another right things that aren't connected by the component tree in any sort of way. You can share also not - -36 -00:22:36,030 --> 00:22:54,750 -Wes Bos: just state, you can share anything, you can share update or functions, you could share refs, anytime that you want to sort of like take some sort of info, variables, state or anything else, or reducer even. And you want to surface that thing somewhere else lower in your application. Yeah, context is what you want for that - -37 -00:22:54,780 --> 00:23:36,570 -Scott Tolinski: word. Yeah. And so now we have what is going to be used context, which essentially is a hook that accepts a context object, and returns essentially the current context, basically allowing us to access the current context values that we want to be accessing, whether that's the data or the functions or whatever, it allows us to access that stuff, just by a simple function, rather than having to do a render prop wrapping our code, basically, again, cluttering up our component tree, which again, is a common theme throughout most of these, a lot of these things are going to be taking things that would have been components with render props, and turning it into a function that just returns something that we can use in our function. - -38 -00:23:36,750 --> 00:24:10,620 -Wes Bos: Yeah, I really like this because I'm a big fan of context myself, I use it in my own application, as well as I've done a couple workshops on it, where you can add a very high level, you can store a bunch of data, a bunch of data functions, and then surface them anywhere in the way that we surface them always was just the render Prop, or you can turn that render prop into a higher order component. Now it's so much nicer, you simply just say like const, age equals use context, age context, and that will give you the actual age break before you go ahead and your render, you're not muddying up your templating or your JSX with a render prop in that regard. - -39 -00:24:10,740 --> 00:24:15,420 -Scott Tolinski: Yeah. And you get that nice rerender in case anything, updates, right? Yep. Yeah, - -40 -00:24:15,450 --> 00:24:22,590 -Wes Bos: so there's not too much to that, it's, it's pretty simple. It's just a easier way to surface your context. Instead of using a render Prop, - -41 -00:24:22,710 --> 00:25:03,840 -Scott Tolinski: I think this one's making it more likely for me to want to use context more often. Right now, I pretty much just use Apollo state link for everything, right? I don't end up you. I mean, I think they uses the context or the hood anyways, but I personally don't end up using context that much because of this dirt, everything in Apollo state and it maybe I still will, once you know, we'll see what Apollo's hook situation looks like. But uh, this to me makes context way more accessible. And I'm actually excited because I think it's going to make it easier to teach as well. I think people who are new to react are going to have a lot easier time understanding function, use context, rather than what is the whole render prop syntax and having your app In the consumer and provider stuff, it's a little less jargony. In my mind, - -42 -00:25:03,930 --> 00:25:38,130 -Wes Bos: I'm really excited about that you still do have to wrap your application in a provider, but the actual consuming of the data is done via the use context. So pretty excited about that. I'm also really excited to see what Apollo does in terms of because they are like probably the most heavy user of render props, they move their entire API over to mutation and query components, which then expose the data or the functionality via a render prop. So this is this is a prime use case for actually using hooks where I'm assuming that they will eventually roll out their own hooks support. - -43 -00:25:38,160 --> 00:26:08,040 -Scott Tolinski: Yeah, if I were to list the things I'm most excited about, it would be Apollo using hooks. And the number two form libraries using hooks, of which there are already a few using hooks. And the results, in my mind look amazing. So I'm excited for both of those two things. Specifically, we will see again, how this space evolves. But I'm just pumped for the future of how all this stuff shakes out. So next, we have effect hooks, which is use effect and use effect is basically how you're going to be writing your own custom hooks. Right? - -44 -00:26:08,070 --> 00:26:21,000 -Wes Bos: Yeah, anytime that you're not using one of the built in hooks, you want to make your own hook, you're going to be doing that via you can either just write an effect yourself, or you can make your own hook, which under the hood will use use effect. - -45 -00:26:21,330 --> 00:26:39,030 -Scott Tolinski: Yeah, right. And so many of the libraries that you end up consuming are just probably going to be using use effect. Right. And I think this one is the, in my mind, I think a lot of the hooks have potential for a lot of interesting things. But in my mind, the use effect hook I think might have the most potential for maybe exciting developments. - -46 -00:26:39,060 --> 00:28:35,550 -Wes Bos: Yes, let's talk about how it works. So what is the effect for the idea behind effect is that anytime that you have a side effect, so what is a side effect, a side effect is when you reach outside of your function and and do something right and and we often refer to functions that reach outside and do something as unpure functions, meaning that the function just doesn't take in info and return something. It also does something outside of the function that the most basic example is a console log. Or if you were to reach outside of your function and update a div the text inside of that or update the title tag, or in some examples we have here, if you want to listen for a click on a div, if you have a database call where you need to subscribe for events from the database call if you want to do some JavaScript animation, if you've got a third party library, all of these things like if you're trying to embed a Google map, that's if you don't have a react component. For that you have to you have to write some just regular Google Maps code. At some point, all of these things are what we call side effects, meaning that they are when the component is in some sort of state, meaning that when the component is mounted, or when the component is updated, some of the data in the component was updated. Or when the component is about to be torn down unmounted, we need to run some additional JavaScript in order to make that happen. And and traditionally, we've been using what are called lifecycle methods in react to do that. So we have the three big ones that are being replaced by this use effect hook our component did mount that's when the component initially mounts component did update, that's when some of the data inside of that component changes and it needs to rerender and then component will unmount. And that's just before that function is ripped off the page. And usually in your unmount, you need to do some cleanup, like you need to if you're listening for clicks in your did mount or if you're setting up a Google map, and you're binding, or you're listening to a database and your did mount, you will need to remove those bindings and clean everything up in your unmount. Mm hmm. - -47 -00:28:35,580 --> 00:29:12,720 -Scott Tolinski: I think one of the most common use cases that I see this replacing is the standard hidden API, get your data set your data is the state and then render that data, this is going to sort of replace that that whole flow of now we can essentially access information from our API or anything like that without having to worry about essentially, in my mind, it's without having to worry about these lifecycle methods. Granted, it's a very similar concept. But to me, we have to worry about less things. We don't have to worry about mount verse update, verse unmount, that sort of thing. We're just worrying about the component loading and when it needs that data. - -48 -00:29:12,860 --> 00:30:18,300 -Wes Bos: One other cool thing I think about these hooks is that previously, if you've have a few things that need to happen on Mount and a few things that needs to happen on unmount, and a few things that need to happen on update, usually just cram those all into your different lifecycle methods. And your lifecycle methods just start to become the sort of collection of different things that happen, which is not the worst thing in the world. But with hooks, what it's going to do is we'll just be able to take all of that logic and put them into their own hooks, so that we don't really have to cram everything into your did update, especially like sometimes in the did update function, you'd have to run a whole bunch of logic inside of those to check which of the hooks you want to you want to run. Now let's talk about the syntax of of it a use effect is one argument and that argument is a function that will run and that function will run both when the component does mt as well as when the component updates and then the the unmounting. If you ever want to clean up when that thing if you return a function from that first function react will will know to call that function for you when everything's about to be torn down when a component is being removed from the page. Yeah, - -49 -00:30:18,330 --> 00:31:26,360 -Scott Tolinski: I think the the syntax here, the fact that it what it does is allows us, we should mention allows us to store these things as essentially functions, right? So because we we can, we can do that we can keep them in a different place. And we can use them throughout our application, basically making this sort of logic that's happening here. Totally reusable. None of that point. Yeah, no, yeah, not only reusable, but it's shareable. And to me, that's the most exciting part of this whole thing is, it's what it's what enables, you know, future future hooks to essentially go off and fetch data almost magically right, we're going to be passing in, if you could imagine a situation where this is a graph, qL query or something like that, and you just have a single function, you pass in the query, and then it returns the data and state just like it would almost with the render Prop, but in a much more simpler way, where we end up having essentially just a single function here. So to me, the most exciting part is the fact that we can store these functions and share them and keep them in a, that sort of way, I think it's going to clean up a lot of code, it's going to allow for a lot of reusability. And it's going to allow for a lot of like, really interesting library situations. - -50 -00:31:26,460 --> 00:31:56,670 -Wes Bos: Alright, so that's the effect hook. I've only built a couple quick little things. And this is why I think it's important that we come back in in maybe a couple of months and do another show on this just see what have other people built, what have we learned ourselves? What sort of issues have we run into because it's one thing to click a button and update a number or, or display some some data about a person. But it's another thing to actually build a real application in it, use it in our production applications and see what are the things that we've run into. So look forward - -51 -00:31:56,670 --> 00:32:30,780 -Scott Tolinski: to that? Well, and I think one of the things that the use effect, like we mentioned, is going to clean things up a little bit, it's going to allow you to store things and return I think your codes probably going to be easier to read and be less buggy and with less bugs is always a great thing. And another way that you can have less bugs in your code is by using a service like century now century Yeah, century is an amazing service for logging and tracking your bugs, your errors in not only your front end code, but your backend code, all of your code, any code that you write century's got your back, because they they take care of every single platform, - -52 -00:32:31,080 --> 00:36:08,580 -Wes Bos: century is awesome for tracking all that goes wrong in your application. They say, essentially, nine cut resolution time from five hours to five minutes. And I actually believe it, I use it in my own application. So the way that it's gonna work is that you install century to your application, I run it both on my node back end and run it on the JavaScript on my front end, they have you don't have to run just JavaScript, they've got things for PHP, and Python and Ruby and every language out there, you can install it, and then it will sort of just catch all of the exceptions that happen, and then store them in the back end. And once you log in, you'll be able to take a look at what are the issues that are happening. So I'm just looking at my boss mostre front end right now. And I'm seeing I'm seeing like an error that just spiked in the last little bit where some code that is related to how the how the page scrolls, when somebody watches a video, I want to scroll the girl the currently watched video to the top of the user list and I'm getting a error cannot read property top of undefined. That's happened in the last couple days, it's happened almost 20,000 times. So obviously, I wrote some bad code there, it happened to 7.5 thousand people. It's not a critical error, obviously, since it's not breaking it, but it could run into other issues. So I can go a little further and say, okay, it happened to not just one user. So sometimes you're going to get these errors that are happening all the time, but just to like one or two users. And if that's the case, you can investigate and say, Oh, just ignore this error. Because it's it's something to do with maybe a Chrome extension that they have installed or something that's on the actual user, because that's the thing about front end development is that you can't control the actual place where your code is being run. So I can take a quick look, I'm seeing that it's it's always happening on Chrome. It's never happening on Firefox. Okay. No, it's a chrome specific issue. It's not happening in any of my other Actually, it's 1% opera, which is the same engine as Chrome. And it's happening on all kinds of different devices. And they are all smartphones. Okay, so now I know that it's, it's happening on just just Android devices that are running Chrome. So this is great. Like, immediately, I've said this error is happening a lot of times, but it's only happening on these specific devices. On this specific browser, you can dive a little bit deeper into all the details on that. And I just spent, what, like 30 seconds on this ad just figuring out where this error is happening, rather than me having to email people and say, hey, what browser are you using? This is a weird one, I don't see it on my build is that are you sure you're still see it, can you try clear your cache all this annoying stuff, I can just get right into it. I'm going to open the drawer after this podcast and they get my Android phone out booted up. And I bet I can fix that issue. So, so quick to fix all these issues, it collects all of the information that you could possibly want. I specifically attach users, you can go into your back end. And if you have a user account, you can attach users to specific errors. If you wanted to, you could reach out to that specific end user and let them know it's been fixed, which is great. So check it out@century.io s s e n try.io, and use the code tasty treats and you're going to get two months free, which is great. They do have a free plan, but you're going to get a boosted free plan, which is great, because you get a little bit more if you have a lot of errors like I do. You're gonna get a you're not going to run out of your quota too quickly if you get this that also works for existing users, which is really cool. So I know a lot of you have signed up for century when I did my Redux digram course a couple years ago, if you still have that account, you can still use this code tasty treat. So thanks so much to Sentry for sponsoring. - -53 -00:36:08,610 --> 00:37:00,900 -Scott Tolinski: Yeah, I think one of my most favorite things about Sentry, even though the Add rate is done, I just want to talk about Sentry is that it shows you how many users and how many times in the past 24 hours or past 14 days or whatever, that this error has occurred. So that you can you can really see which ones are maybe like a one off weird sort of situation and which ones are clearly like a reoccurring issue. I am a big fan of that. Cool. Okay, so let's get back into it with some more hooks because there's a bunch of hooks that aren't maybe necessarily going to be the most used hooks are the most talked about hooks, I guess maybe this one might be most used and talked about, we haven't gotten into some of the other ones just yet. But reducer, which is the reducer hook is going to essentially allow you to have a little bit more control than the set state hook that we'd be using. Or the use state episode. It's just called state hook. I guess it's just called state hook. - -54 -00:37:00,960 --> 00:37:15,150 -Wes Bos: It's going to be hard to grab the state hook. Yeah, the state hook will give you your both your state and your your updater function. It's gonna be hard just to not refer to it as that state like I'm so used to but yes, yeah, yes. It's gonna you have to catch yourself before you wreck yourself. - -55 -00:37:15,170 --> 00:37:18,110 -Scott Tolinski: Yeah, and I'm gonna wreck myself on these new words. So - -56 -00:37:19,590 --> 00:39:13,350 -Wes Bos: so what what is a reducer Redux really popularized the idea of reducer. And the idea of a reducer is that it takes in some stuff and then returns you your your new state. So in the example of Redux, usually what happens are in this use reducer. So this doesn't even have to be in Redux, which a lot of people are saying, maybe rip Redux because between context and now being able to have these really slick reducers, in react that replaces a lot of the use case that people had for for Redux. So a reducer is a function that takes in the current state as well as an action. And an action is something where you're like, maybe somebody incremented a number, or decremented, a number or somebody added something to cart, or someone added a comment or removed a comment or liked a certain post, that's what we use in my Redux course, we have a huge array of posts, and each post has a number of likes, and that number of likes on that specific post needs to be updated. So that's a fairly complex state update function, where somebody you dispatch an action, let's call that a like, and then you might also pass along an ID of that post. And then inside of your reducer, you have a bunch of different use cases. So a case of somebody liking a photo, in that case, you are going to find that specific photo, update the number of likes, and then return the updated state. But you could also be somebody deleting a comment, it could be somebody adding a comment, it could be somebody editing a comment and all of the logic of how do you take an array of something and update the data inside of that array is sometimes a little bit complex, and can sometimes be better suited to moving it outside of your your actual function component and into its own function that is called a reducer. So it's pretty interesting if you could take a look at the docs for a couple more examples that they have if that one didn't totally make sense. - -57 -00:39:13,380 --> 00:39:23,400 -Scott Tolinski: Yeah, I wonder how Redux survives this personally, because what now does Redux give you that you can't necessarily do here other than maybe the the dev tools, you know, - -58 -00:39:23,460 --> 00:40:09,180 -Wes Bos: yeah, the dev tools was really cool, where you could time travel back and forth. But if I talk to people why they're using Redux, it was a because they can inject data at any level. Now context replaces that and be it was because they have this nice idea of nice, clean reducers. Yeah, it was so easy to test all of your logic because it's just a function that returns data. And that's like the easiest thing in the world to actually test. It's pretty cool. As well as we'll do another show on react suspense, which is coming up pretty soon as well. I think between those two things, I don't want to say Redux will die because lots of people are using it loss people are getting good use is that it is still one of my Most Popular courses, even though it uses the older react, create class API, a lot of people ask me if I'm gonna be updating that. And I'm kind of just sitting on my hands waiting to see. Yeah, well, how - -59 -00:40:09,180 --> 00:40:11,150 -Scott Tolinski: do wait till everything's analyze? Yeah. - -60 -00:40:11,190 --> 00:40:17,310 -Wes Bos: So if you have thoughts about about Redux, tweet us at syntax FM, if you think Redux will stay around or not. - -61 -00:40:17,400 --> 00:42:12,440 -Scott Tolinski: Yeah, I'm interested. I'm interested in the future. Again, I think the most exciting things about all of this is what the future will hold for it, rather than what it looks like. I don't know, I guess what it looks like right now is all very exciting as well. But what the future holds is also very exciting. It's a really good time to be a react developer. Right now, I think, with all this new new fun stuff, especially if you like new fun stuff. Next, we have the ref hook for those of you who have liked and use refs at any given point, a ref is basically a way to reference a DOM element in it, the way we did it originally was a ref prop on a component or a DOM element. And that was just a string value. And then there was some sort of magic behind the scenes where that would then become available as this dot refs dot the string name that you had. And while that was an easy API to understand, and it was pretty easy to use, in general, it made for some clean looking code, it didn't necessarily make a ton of sense, like magic strings, just sort of existing now on the rafts object, right. So what happened is, well, we eventually moved into sort of this dot a value assigning things onto the class itself. And then using a function to get the object essentially in an arrow function or whatever, you're passing the the DOM element to assign it to that class property. So like this dot input is now going to be equal to the ref itself in the function, it's hard to explain, it's even hard to explain on video, because the syntax doesn't look great. And it was always sort of confusing for new people to look at. And recently, React introduced some newer ways of working with refs. But I think the use ref or the ref hook is probably the best way that they've come up with so far to interact with refs. Basically how it works is you have a use ref hook that can accept initial value, many times, I feel like that's going to be just null, right, and - -62 -00:42:12,510 --> 00:42:18,230 -Wes Bos: you don't have to pass it anything, or you just don't pass it, you pass it nothing, and the initial state will be nothing, right. - -63 -00:42:18,270 --> 00:43:43,380 -Scott Tolinski: And so that gets stored to a variable, then use that variable in your ref Prop, just like we did sort of with those magic strings. But instead of being a string, it's an actual variable. So ref is now equal to the new variable you just created. And boom, you then now have access to that DOM element under the variable name dot current. So if you want to set a ref on an input or something like that, you could set focus to that element by saying that variable dot current dot focus and a function or something like that, that's going to then set set the focus into that particular element. As a side note, I keep saying the word set focus, my band in high school was named set focus based after a flash method. I think that was an excellent script for is ActionScript sorry, not ACMA script. So it's kind of hilarious for me to be using that word right now. But just a side note. Yeah. So I like this one, because I honestly, I don't think every input or every form needs to be controlled in but, and for a long time, people were saying rafts are an anti pattern. And I've always liked drafts. Because it was a really easy way to work with really dumb forms, you have a contact form or something like that, you just need the values, it was always really easy to set reps. Even though this magic string value thing was sort of weird. It was always really easy to say this dot refs dot name, this dot, refs dot whatever and pull out those ref values. So I'm personally excited to use this, especially for dumb input values, or just working with the DOM elements. in general. - -64 -00:43:43,440 --> 00:45:26,220 -Wes Bos: That's a perfect example of people chant, never touch the DOM, never touch the DOM. And then they intentionally don't use wraps because of it. Like in most cases, you probably want like a an update or function that mirrors that value to state. But every now and then you need to, like grab an element you need to focus like a perfect example is focusing in on an input. If you want to focus an input, you need access to that input. So you can call the dot focus method that's on it. Or if you want to scroll something into view, these are all Dom methods. And you need the DOM object in order before you can actually call any of the DOM methods. There's this website use hooks comm which is put out by Gabe Ragland, and I think this is the I love it's very specific websites. So we came out with this website and it's a new hook recipe every single day. I signed up for it, you put your email in or you can just read them right on the website. And the one example he has today is called use on click outside. So you know like this, if you have a modal box and you want someone to be able to click outside of it, and it closes itself. Yes, if that's the case, you need to listen for some a click on the outside of of the element, right. So this is really good example of first using a ref hook to grab the actual like DOM element that is the the entire box and then like a modal pop up and then using a nother custom hook to actually listen for the clicks on side of it. So a ref hook to grab the element and then a custom use on click outside effect to do the listeners for clicking outside and the listener. So it's all three of those things that we just talked about, which is reps custom effect, and a clean up - -65 -00:45:26,250 --> 00:45:40,050 -Scott Tolinski: effect as well. And it's so cool. It almost seems like cheating, because that's going to make it so easy to do that sort of thing. This is like, this is why people are hyped about hooks. Not only that just signed up for that I am I'm geeking out about this right now. I think that's Yeah, - -66 -00:45:40,110 --> 00:45:57,960 -Wes Bos: you should definitely it's use hooks comm go sign up for it right now. Because I love when when people put out such helpful because this is something I didn't think of were like hooks can be used together. Right? And this is why I'm waiting to see what what are people coming up with. It's just lots of different real real use cases. Wow, super cool. - -67 -00:45:57,990 --> 00:46:07,440 -Scott Tolinski: Yeah. Okay, so let's get into some of the other additional hooks that we have just sort of hanging out here. We have use imperative methods. Can you talk a little bit about use imperative methods? - -68 -00:46:08,220 --> 00:46:17,040 -Wes Bos: I can't. Oh, no. Hold on. Let me Google this. Yeah, these uh, these are the ones that I there's a whole bunch of other ones that come along with react. - -69 -00:46:17,160 --> 00:46:18,960 -Scott Tolinski: Did you like I pass that one off onto you? - -70 -00:46:18,990 --> 00:46:39,570 -Wes Bos: Yeah. Use imperative method customizes the instant value that exposed to the parent component when component when using a wrap, as always imperative code, using ref should be avoided, in most cases use imperative method should be used with for ref. So there you go. There you go. Now, I'm not really I have to see there's a whole bunch of other ones here use mutation. - -71 -00:46:39,600 --> 00:47:27,390 -Scott Tolinski: Yeah, you can use layout effect, there are various that are related. And they're actually identical nearly to use effect. So they're sort of very closely tied into use effect. So they use mutation effect is basically another version of essentially use effect. But it fires synchronously, synchronously, during the same phase that react is doing its Dom mutations before the sibling components have been updated. So they're saying here that if you are going to be modifying or working with the DOM, then you should probably be using use layout effect rather than use mutation effect. Again, if I'm saying anything dumb about these, this is still early days. And I need to personally have a little bit better handle on these two. But and they're they're just different versions of use effect for different use cases, essentially, - -72 -00:47:27,720 --> 00:47:56,820 -Wes Bos: these are the kinds of things where you'll run into a problem, you'll ask around, hey, got this problem with hooks. And someone will say that's, that's a use case for one of these lesser used actual hooks that you have there. And also, I think that these are often are probably going to be more lower level ones, where you'll just use a third party library, you'll NPM, install some magic hook, and then sort of down underneath the hood, the smarter people than us will know how to use these, we'll be using them for us. - -73 -00:47:56,940 --> 00:48:37,080 -Scott Tolinski: Yeah, I can't wait for that. It's cool. So let's get into I had a little section here, it's called Library's already using hooks, there's a really great repo called re hooks. So give re hooks a check. It's basically a listing of a bunch of hook libraries. But there's also a repo inside of that, which is awesome react hooks, which contains not only some tutorials, some discussions, some videos, some tooling, but it also includes a gigantic listing of packages that are already using hooks. So I could list a few of these, but many of these are ones that are are just really super cool. So far, libraries, like react spring, I've already dove into using hooks. - -74 -00:48:37,260 --> 00:48:39,210 -Wes Bos: Yeah, animations is a big use case for - -75 -00:48:39,210 --> 00:49:37,320 -Scott Tolinski: something we didn't talk about. But if you're using like a third party animation library, it's gonna make things really nice. And you know, I love animation. So for me, I'm geeking out about that stuff. React measure, which we all know is used for measuring everything Formic, which is the like the sort of most used form library is already using react hooks, em, or there's just an unbelievable list of libraries here that are already using hooks. Some of the stuff looks amazing. I saw Easy peasy is a new library for global state for react. It's a very nice and simple API. So if you like easy API's, that kind of thing. Oh, check out Easy peasy. There's just so many good ones in here. Even some brand new form libraries that are just popping up here and there. Yeah, local storage, network status, online status, scroll position, all that good stuff, man. These libraries were like popping up as the convention was going on. So I'm so excited for all of this stuff coming in here. - -76 -00:49:37,530 --> 00:49:55,320 -Wes Bos: I'm amazed that people put it out because like I consider ourselves to be pretty on the cusp of this stuff. And it's amazing that people have actually already written libraries and launch side project website with mailing lists and this is only been out for like a week so far as we record this. So it's pretty amazing. - -77 -00:49:55,350 --> 00:50:23,940 -Scott Tolinski: Speaking of I don't know if this is if this is any good, but as we as you just said, That little tweet just came into my twitter and it was a VS code extension for react hooks snippet. Of course, it has one install, so it's very fresh. So maybe give that a check. I haven't looked at the so I'm not necessarily endorsing this, but it is here. So this stuff is still, like I said in the infancy and this stuff, just gonna just blow up even more than it already has. - -78 -00:50:24,030 --> 00:51:01,650 -Wes Bos: Let's talk real quick about some other resources. So if you if you want to get a more of a primer on how all this works, Dan Abramov has a awesome talk at react cough is just search react hooks on YouTube, and it probably be the first one. Other than that, I watched some nice videos from Harry Wolf, React hooks, a complete introduction. And then a wad has, every time I search anything on YouTube, there's been a wide guys been popping up, which is amazing. So check out Ben aois YouTube channel, he's got a whole bunch of nice little crisp, tiny little videos detailing all the different hooks and in what we have. So I found those to be helpful as well, just to get a little primer on how it all works. - -79 -00:51:01,770 --> 00:51:21,750 -Scott Tolinski: Yeah, and I did already mentioned that Austin react hooks, but check it out. It's at re hooks, forward slash awesome react hooks on GitHub. Again, big ol listing all this stuff, just like all those awesome any sort of whatever you're trying to do. So yeah, lots of excellent stuff for hooks. I'm gonna start using them. I've decided I'm going to start using them right now. You know what I'm gonna do? I'm gonna convert my entire code base tonight. I - -80 -00:51:21,750 --> 00:51:22,500 -Wes Bos: bet you are. - -81 -00:51:24,450 --> 00:51:28,380 -Scott Tolinski: I'm not being serious. But I'm going to I'm going to certainly start using them. - -82 -00:51:28,800 --> 00:52:04,440 -Wes Bos: Totally. I will probably other people have been emailing me already. Hey, are you gonna rerecord your entire advanced react course to be with hooks. so important to say that classes aren't going anywhere render props aren't going anywhere, but they are going to make it useful. So probably once everything settles down with hooks. And once all the libraries have released sort of a mature hook API, making sure that's not going to change. I'll probably have either a update video on on how to do it with hooks, or I'll just re record the entire thing. That will be a huge undertaking, though. So we'll have to see on that. - -83 -00:52:04,680 --> 00:52:19,320 -Scott Tolinski: Yeah, I will also be redoing my courses, or at least to some extent, to use hooks whenever the API is mature. I think that's just waiting for it to officially release. Hopefully. Yeah, so do you have any sick pics? - -84 -00:52:19,530 --> 00:53:06,300 -Wes Bos: I am going to just sick pick Scott's picks from the last couple weeks. So first of all, Scott sick pick the swindled podcast. Holy smokes that raising? Yeah, it's so it's a podcast that dives into all these different times in history where people have have been swindled or people have stolen money from people where people have had these like crime rings, it's incredible, as in the storytelling is just amazing in it, he always starts it off with a story and then has a different story. And sometimes they connect to each other. And it just blows my mind. So very, very good. Very high quality, very much like the Darknet diaries podcast that we all know and love, which is cool. So I'm gonna pick that in a second. I also just ordered the thing you put in your drill, what was it, - -85 -00:53:06,480 --> 00:53:09,330 -Scott Tolinski: it was a brush set for your brush that - -86 -00:53:09,390 --> 00:53:29,190 -Wes Bos: you put in your drill off of Amazon because I think that's probably the sixth pick that most people have bought ever. Which is this brush that you put in your drill and it makes cleaning very, very easy. My wife is not sure about it, but I'm really excited about it because yeah, that my the gas stove is the hardest thing to clean. - -87 -00:53:29,490 --> 00:53:34,230 -Scott Tolinski: I use it on the glass, we have a glass one it's not gas, but I used okay and it's hard to clean. - -88 -00:53:34,290 --> 00:53:36,960 -Wes Bos: I mean it doesn't scratch the glass or anything like that know well - -89 -00:53:36,960 --> 00:53:55,800 -Scott Tolinski: enough. They have different bristle. You can buy ones with different hardness for the bristles. And they'll tell you Okay, on the box or in the description what surfaces each one can be used with. So say this one's for concrete, or this one's for you know, wood floors or something like that. So you can buy ones that are less stiff for different surfaces. Oh yeah, - -90 -00:53:55,830 --> 00:54:18,570 -Wes Bos: yeah, I'm gonna I'm looking at getting a pretty soft one cuz I also want one for doing my my rims on our car because it's so hard to break into like races. Yeah, yeah, I'm gonna hopefully keep one for that. And then like the cast iron grates on our range are always so hard to clean because you shouldn't really use soap on them. And they've got all these little crevices here and there that are hard to get all the grease out of it. So - -91 -00:54:18,570 --> 00:54:19,170 -Unknown: grease. - -92 -00:54:19,170 --> 00:54:25,590 -Wes Bos: I'm excited about that. I hope it's coming in tomorrow. I'm sick picking it before it even showed up. So nice, excellent. - -93 -00:54:25,860 --> 00:55:04,440 -Scott Tolinski: They work really well. I'm telling you, we had this like tile floor. And I used to do a cleaner tile floor and it it's almost it's an entirely different color than I even knew what it was because when we moved in, I didn't know it was a different color. And then we're like, Huh, is this dirt? Maybe it's dirt you get with an old house. But you know, my sick pick for today is going to be a book. And this book is really super good. They came up on my recommended on Audible. So if you're on Audible check it out. It's called Bad Blood Secrets and Lies in a Silicon Valley's startup Bad Blood is basically the story of what is the startup name? - -94 -00:55:04,920 --> 00:55:14,130 -Wes Bos: Hold on one second. I actually saw you tweet about this. And I have also started listening to it as well. It's very much down the it's very much like the two podcasts. We just talked about - -95 -00:55:14,130 --> 00:56:29,070 -Scott Tolinski: it really good storytelling is great. It's about theranos, which is like a medical supply company. If you haven't heard the story, the thing that is shocking to me most about the story is just how big this company was able to get on sort of basically nothing just through sheer bullshit alone, they were able to become one of the richest companies it's it's just an absurd story. And every step of the way, you're just going to be like, holy cow. How is this thing going to continue? Like I got through the second chapter. I was like, how is this book gonna be this long? And then by the end of the year, the book you're just like, oh my god, that is insane. So the whole story is bananas, and includes a ton of Silicon Valley startup folks and investors and people who have been involved in different companies and you get to see some some really giant horror story of a company that really had nothing and sold everyone on it. Basically, nothing is it's just it's a brilliant book. Again, excellent storytelling really well right if you like audiobooks, so I was a huge fan of this book I finished a little bit ago and it just been I've been looking for another good one like this so I'm like that this book came around to check it out bad blood Secrets and Lies in a Silicon Valley startup. - -96 -00:56:29,100 --> 00:56:38,820 -Wes Bos: Yeah, if you are listening and you know more stuff like this like I'm hooked on these I don't know what do you even describe these types of podcasts storytelling us? - -97 -00:56:38,850 --> 00:57:02,550 -Scott Tolinski: I have no idea it's sort of it's almost like True Crime meets like tech world. It's like Yeah, true crime in a sort of way. Either like hacking or or that sort of thing. I don't know they're some of them are just so good it when it's good. It's really good. I mean, that's when they'll podcast I purposefully saved a bunch for our trip for the jamstack calm and so I've just just like blasting through those on the the flights and everything like that. - -98 -00:57:02,760 --> 00:57:09,780 -Wes Bos: Oh, dirty john. That's I wreck I said pick that like a year ago, the dirty john podcast was very similar as well. Do you listen to that one yet? - -99 -00:57:09,900 --> 00:57:12,780 -Scott Tolinski: Never heard of it. Oh, no. I have heard of it. And you sick picked it? Yeah, - -100 -00:57:12,900 --> 00:57:25,650 -Wes Bos: yeah. Dirty john podcast. I did not listen to it though. We're gonna be recommending ourselves out of a podcast here. We should better stop. Alright, what about shameless plugs, shameless plugs, I - -101 -00:57:25,650 --> 00:58:37,560 -Scott Tolinski: have a new course out level up tutorials, comm Lopes torrijos.com forward slash pro to get access to all of the courses, which by means there are a new one every single month. So by now there's 2425 Premium courses. But the latest course is pro Gatsby two. This is the course for anyone who's been wanting to learn Gatsby. First and foremost, I should mention that this isn't an intermediate course this is a beginner course for learning Gatsby. And it's for learning Gatsby version two, because when Gatsby version two came out, there was enough breaking changes that it made more sense to just rerecord the course. So what's really nice about this course for me is that I could I could then I could look back at the previous pro Gatsby course and adjust, adjust things I felt like could have been better about it and could have worked differently. So I spent a lot more time on maybe core foundational concepts in Gatsby rather than moving the external libraries or external things a little bit quicker. So I feel like you get a much better handle on Gatsby itself. I feel like you're going to become a more competent Gatsby developer after watching this. So check it out pro Gatsby two, you can purchase it as well at level up tutorials.com forward slash store or become a pro subscriber sign up for the year and save 25% so check it out. - -102 -00:58:37,680 --> 00:58:42,030 -Wes Bos: Awesome. I think that's it for today. Thanks so much for tuning in. And we'll see you next week. - -103 -00:58:44,520 --> 00:58:45,330 -Unknown: Head on over to syntax.fm - -104 -00:58:45,330 --> 00:58:54,270 -Scott Tolinski: for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax93.srt b/transcripts/Syntax93.srt deleted file mode 100644 index fb3d22cc9..000000000 --- a/transcripts/Syntax93.srt +++ /dev/null @@ -1,136 +0,0 @@ -1 -00:00:00,359 --> 00:00:06,990 -Unknown: Monday, Monday, Monday open wide dev fans yet ready to stuff your face with JavaScript CSS - -2 -00:00:06,990 --> 00:00:07,590 -node - -3 -00:00:07,590 --> 00:00:09,060 -module BBQ Tip Get - -4 -00:00:09,060 --> 00:00:19,980 -workflow breakdancing soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah Khuda - -5 -00:00:19,980 --> 00:00:22,290 -ba and Scott El Toro. - -6 -00:00:25,920 --> 00:03:37,830 -Scott Tolinski: Welcome to syntax. Today's episode is a hasty treat in which we're going to tell you how to be well liked at work, which in my opinion, is an extremely important part of the whole deal. Instead of just being a good developer. It's also good to be a good person and to be to be admired by your coworkers. And a good way to be well liked by your co workers is to use something like Log Rocket Log Rocket is today's sponsor of this episode. And it's an incredible way that you can set up your error tracking to give you so much incredible insight. Again, their headline says stop guessing when bugs happen. And that's such a key thing with Log Rocket, because Log Rocket not only gives you key insight into what's going on with the bugs and errors in your site, but it works with all of the tools that you're already using from it century, which is another sponsor of the syntax to bugsnag robar, New Relic, JIRA, intercom, Zendesk, Trello, GitHub, all this stuff, it works with all of it, and it works really well. It also works with any of the stack languages that you might have, or platforms such as react Angular, or just plain JavaScript, Redux Ember view, j. s, it works with everything. Now, Log Rocket is for your front end code to see exactly where bugs are taking place. And if you use a system like century, you'll know that it's great for locking bugs. But how, in addition to that, can you figure out what exactly visually was going on? Well, Log Rocket makes the visual aspect of this so so nice, it gives you access to an exact video of what the user was seeing. It's a pixel perfect replay of what your user saw called session replay. And to me that is a sick sick feature. That's how many times have you gotten a bug? And you're looking at the stack traces, you're like, Okay, well, I understand why this bug happened. But how the heck did they even get to this thing to push this button to make this thing happen at this particular point, the interface, and this thing solves all of those because you get access to see exactly what's going on in your application when the error took place, as well as the council and errors as it's happening. And network activity as it's happening. And Redux, you can expect any of your actions at any given point in time, Log Rocket is so incredibly sick for getting the complete picture as to what's going on. And again, you don't have to replace your existing tools. If you're already using Sentry, you just add it on. And then you can use it and have the combined power of both of them. It's unbelievable. So Log Rocket is so so sick. And if you want to check out Log Rocket, head on over to Log rocket.com forward slash syntax and get 14 days for free. Again, this thing is going to help you understand exactly what's going on in your application. And it is so so cool. I'm a visual person myself. So having more information as to exactly what's going on in the visual replay is just a killer feature for me. So again, check out Log Rocket at Log rocket.com forward slash syntax get 14 days free. All right, so let's get into this how to be well liked at work. - -7 -00:03:37,890 --> 00:03:42,210 -Wes Bos: Yeah. So this is your idea for the episode. What was your motivation behind this? Yeah, I - -8 -00:03:42,210 --> 00:04:39,420 -Scott Tolinski: think we all have had coworkers at some given point that were maybe difficult to not only work with, but even just to be around, right? And imagine the situation where you're that coworker and maybe you don't know it, and maybe you don't realize that everyone who's working with you is upset that they're working with you. Or maybe you're just don't understand that, like what you could be doing better to be more Well, maybe you're just not fitting in, in the company culture. So I think some of these ideas are going to be sort of just general tips that we have for working with other people to make everyone's life easier. And when everyone's life easier when you're working on a project, the work that comes out of it is always going to be way better. Right? I've been on teams where people are just sort of iffy about each other. And I've been on teams where every single person on the team had each other's back. And the output of those projects was tremendously different. So I think it's a key important part about working on a successful team and creating successful design and development work. - -9 -00:04:39,540 --> 00:06:22,020 -Wes Bos: Yeah, I've worked on quite a few teams as a consultant. So I have a bit of a lot of experience of like being the new guy on a team and a lot of experience. Like when you're in a spot where you need help or you're trying to work with someone to get to, to fix something or to build something together. There's there's a lot of things you can do in order to make that relationship really good. First tip we have here just kind of gonna rattle through a whole bunch of tips that we have my first tip that I have is foster a culture of asking why and how. So one thing that I find coming into a new job, and if you are the person where someone else's new is coming in, there's often going to be lots of questions about, like, why do we do it this way? How do we do it? How do you approach it? What's the best approach for editing this specific component on the page? Or, or anything, right? Like, you just have to, like, get to know this sort of flavor of development as, as it works? Or how do we deploy these things? Or there's often lots of acronyms or lots of Like, who do I even talk to about like the last project I worked on, there was like a whole separate team that worked on the API versus the the team I was working on, which is actually building the website. And often there was no documentation, which another show we've had before. And I just didn't know how it works. I'm like, Who do I even talk to about getting this thing? So I was really lucky in that there was a really good culture of being able to ask questions of, there's like, no stupid questions, being able to ask why do we do it this way? Or what's the benefit of doing this way? And just having that because it's kind of scary asking, asking questions to people, if you think like, they're gonna get annoyed or think you're an idiot. So having that culture of asking why asking how is really important? - -10 -00:06:22,110 --> 00:07:56,340 -Scott Tolinski: Yeah, I agree. And to go along with this, I have a note, as we've talked about this before in other episodes, but don't offer unsolicited advice. And in terms of like, asking questions and stuff like that. I think asking and asking for those kind of things is the important part, not telling other people, right? So asking, Why and how is great telling people why and how maybe not so great. In fact, you can ask for their consent to give that advice like, hey, later, I have some cool ways to do this. Do you want to check them out? And if they say, no screw off, or whatever, you can say, okay, but don't be like, no, but let me really show you. Because I think it's a it's important that everyone is on the same page, and everyone's receptive to getting the information that you want to be giving over that just like giving it willy nilly. So again, don't offer unsolicited advice, because you will, in fact, come off as a know it all, and instead of being helpful, and the last thing people want to work around is the person who every time they talk to them is going to be telling them how much their code sucks, or what they can be doing better. Again, having the the sort of the student mentality is a great thing. But just keep in mind that like you can't put yourself in someone else's shoes and just expect them to be receptive of what you're showing them at all given times can ask for maybe if they have some time for you to show them something if they are interested. If not, don't take it personally, don't push it on them. And don't be pushy. That said none of this advice necessarily applies during code reviews. If someone has some code being reviewed, you can give them advice about what's going on with their code. Because again, that isn't unsolicited. At that point. It's part of the process. - -11 -00:07:56,429 --> 00:08:53,460 -Wes Bos: Next one I have is showing your mistake, I've talked about this before where it's important, whether you're teaching in person, or you are teaching on a video or you're just working on a project with someone, it's important to show people when you goof up, because I think having that vulnerability with them showing like oh, I always screwed this up. Or if you're trying to get a point across about Oh, one time I did a database query like this. And I didn't use an aggregation, I just use a for loop in JavaScript. And the query when it got really big, took 30 seconds to execute. And that was super unreliable. And one time it even crashed the server because I ran out of memory. And that's good because it offers some advice as to what to do in specific situations, as well as being able to show people that I've totally messed up lots of times, and it's fine to come to me with question, especially in a senior developer junior developer relationship, it's fine to come to me with maybe goof ups that you have, and we can figure out a solution to going through it. - -12 -00:08:53,780 --> 00:10:31,620 -Scott Tolinski: Yeah, I think this is a big one too many times. I think that even just shows that you're a you're a human being you're a person, right, you're making mistakes, everyone's making mistakes, but it also gives everyone an opportunity to learn from your mistakes. I totally 100% agree with this showing your own mistakes is a big one and being you know, not too cool for anything. I don't think I've ever been too cool at any of my jobs. Like Like, I'm not too smart for any of this stuff. I'm always down to, to learn and grow from, from my mistakes. We all make, you know, mistakes. I think the next one is to be understanding of people's life situations and try to accommodate them accordingly. Not to say don't go into someone's business, if they're not inviting you into their business, right? You don't know what's going on. Obviously, don't be you know, try to know what's going on or don't whatever, but you don't know what people are going through outside of work. And maybe there's some things happening in their personal life or maybe even their work life. Maybe they just got a bad performance review or something and they're really upset. And what I mean by this is don't poke and prod here, just be empathetic and take your time and if you can see someone's having a hard time on that particular day. Do not give them any more shit get out, there can be other times for attentionally talking to somebody about any of their stuff. But when somebody is having a bad day, it's not going to do anything to help again. So just just be cognizant of people's days and how they're feeling and how they're acting and what they're sort of body language is giving you if they're, they're giving you the porcupine stay away, sort of, you know, position, then you're gonna want to stay away. I think that's a thing, just again, being empathetic to what what was happening in other people's lives will make you a more well liked person. - -13 -00:10:31,710 --> 00:11:29,820 -Wes Bos: The thing if somebody is like that, though, I think it might be worth trying to find out like, why what's going on with them? Because I think a lot of times, there's stuff going on in your life, whether I know people go through like a divorce or problems in their family or a family member is ill or they're stressed out because of any number of things that's going on in your life. And sometimes that can always play itself out in your work. So I think it can be worth asking people at some point, Hey, what's going on? Do you need some help? If you need to take off a little bit early? Or is there any way that I can lighten your load at some point, because these are people you're going to know for probably four or five, six, sometimes you work with them for your entire career and being tuned in and empathetic to what's going on in their life. Because everyone's going to go through hard times in their life where they're just not their head isn't in their work entirely because of what's going on at that time. So just being able to be tuned into whatever else is going on in their life and how you can help in that specific situation. - -14 -00:11:29,850 --> 00:11:33,390 -Scott Tolinski: Yeah, I think asking how you can help is always a decent strategy. - -15 -00:11:33,689 --> 00:12:40,590 -Wes Bos: Yeah, I agree. Next one we have here is be okay with people taking up your time. This is one thing that I have all the time where I'm Mr. productivity, I love not being bugged. And I want to get as much done as possible. And sometimes that's to the detriment where people say like, so sorry to bug you. I know you're super busy. I know you've got a lot going on. I know you get 5000 emails, and sometimes like, oh, like, I don't want to be this, like, I'm so busy. I don't have time for anybody. Like I would love to be able to help everybody out when they need it need specific help and specific advice or need help working through a specific bug that they've been hammering on for for two weeks, or even just the people that are working with me on on my specific stuff. They're like, Ah, sorry to bug you like, it's so annoying. So I have this problem as well. With freelancing people will say, Oh, I know you're super busy. So I didn't even ask if this project was something you're interested in. And I'm like, oh, man, I would have totally took that project. So be aware of if you're putting up this don't bug me I'm so busy wall because you could be unknowingly driving people out or keeping them away. - -16 -00:12:40,770 --> 00:14:18,690 -Scott Tolinski: Yeah, it's funny, because I think this is this is one of those things that people occasionally where it's like a badge of honor, I'm so busy that I can't do anything, I can't even do this or that. And it's not I'd prefer not to be busy. So like, I think you do want to be cognizant, if you are putting up that persona, that you are the busy person, you know, who hasn't doesn't have time for anything in the same regard. Don't be the person taking up everyone's time. Yeah, don't be that person that shows up at someone's desk and just starts telling a bunch of stories that are unrelated to work when you're not catching the vibes that that person is maybe in the zone and working because this is like or even in the same regard. Don't be the person that's scheduling a bunch of meetings, when no one else is if you are the person scheduling all of the meetings when maybe you need to, like look at, you know, what's the point of all of these meetings? And can they be expedited or changed or organized in a different manner. But again, just don't be that person who's making everyone else busy by taking up their time. I had this, I don't even know what to describe him because he wasn't even he was tangentially related to the project that we were on. And he would just come by three of our desks and just sort of stand their hands on his hips. And it was almost like the office space the way he talked when he was like, yeah, and he wasn't saying anything negative. And he wasn't being negative. But he just went on to tell these stories. Sometimes they were like, inappropriate. And he would just tell these long stories, and he would tell them so slowly. And I think all of us would just be like, get out of here, man. Like we don't want to do we don't want to listen to the city while we're trying to work. So don't be that guy. Don't do that. Yeah, - -17 -00:14:18,810 --> 00:15:24,240 -Wes Bos: I was funny. I just listened to a podcast with Adam Grant who I don't really know who this is. I'm just looking it up. He has a book called give and take. And in the podcast, he was talking about how in our work environments we often have like givers and takers. And sometimes the people who are like people pleasers and want to give give give, they're often the worst performers in the entire team because they're often taken advantage of because they're those people that just want to give give give. And then on the flip side, you also have takers which are all about them and they just want to do everything and they were in people think oh, they're probably the top performers because they're all about getting what they need done. And it turned out that the the takers weren't the top Performance either where there was these people that found a really good balance of how can I be generous with my time and how can I help people, but also still get my own work done and still work towards the goals that I have there. So it's just kind of a nice little podcast I had on I was at the gym the other day, I thought that was a really interesting thing where there's givers and takers on both sides of the spectrum. And you don't want to be either of those in the workplace. - -18 -00:15:24,360 --> 00:16:49,770 -Scott Tolinski: I think with a lot of things, you never want to be on any extreme end of any spectrum, right? You know, you always kind of want to find it, not necessarily always a spot in the middle. But you definitely don't want to find a spot on either end, because I think the ends are always a little too nuts a little too crazy. I think that what you had that as an R sub node, which is just be nice. Be nice. People. Yeah, it's something that goes overlooked. You just be nice to people, just don't be rude. Don't be a jerk. And try to be cognizant of whether or not you are or not being mean or rude. I have another note here, which is share things. Everyone likes stuff like this, like, you know, if you bring in tea, I'd be like, Hey, everyone, you know, feel free to try some of my new fancy tea that I brought in. And you know, people aren't into tea, no big deal. But you're making that be known that it's, you know, something that you can give people and people like to receive things I had somebody bring in a trace leches cake one time to work from a bakery in Detroit. And it was like the greatest thing I've ever had. And I always looked at that person favorably after that, even though I didn't know them. They weren't even my department. They're just like, Hey, guys, we got this trace late cheesecake. And I'm like, I'm all about that. Tres leches cake. Again, I'm bringing doughnuts, who cares, bring in something fun like that, and just say, Hey, I just figured I was picking up some breakfast for myself. So I might as well pick up a box of doughnuts for everybody go to town, I think that's just a fun thing that you can do, unless, of course, your company is for some reason mean and for bids, that kind of thing. But again, everyone's gonna like somebody that shares something with them. - -19 -00:16:49,830 --> 00:16:58,740 -Wes Bos: Next one you have here, I'm gonna default to you on this one, which is respecting people's personal space, I've always worked remotely, so I don't have a whole lot of experience on this. - -20 -00:16:58,770 --> 00:18:02,300 -Scott Tolinski: Yeah. And this even goes back to the story I told about the guy who's talking really too long, is that you need to respect people's personal space, both physically and like their desk, right, their desk is an extension of their personal space. And the last thing you wanted to be doing is the person that maybe sits on the edge of the desk and starts talking, like if somebody sits on my desk, I'm just gonna be like, come on, like, don't do that. Like because it feels like you're invading your you're invading your little sanctuary at work, again, is going to be people who maybe get a little too close while talking or something like that, again, invading personal space in general is not a great idea. And again, the extension of that being your desk, your workspace and stuff like that, don't go through somebody else's things, obviously, I feel like that shouldn't even need to be said, but don't like, you know, grab a pencil from somebody's desk without asking them say, Hey, can I borrow a pencil or something like that? I don't even know. But I feel like I shouldn't even have to say a lot of these things. But you've been in work culture is in people do this stuff. And they don't even think about it. So again, respect someone's personal space, whether that is in both their desk or their physical personal space, - -21 -00:18:02,460 --> 00:18:48,800 -Wes Bos: I think something I thought about that, not necessarily personal space, but like time as well. I know that a lot of people like to work after hours and send emails really late at night. And I know some people get really stressed out when they see an email Come come through. And I think that's something that you the person needs to work on, like being okay with having emails come through, and just leaving them till the next morning. But if you know that, that will stress somebody out, and they know that it might ruin their night, it's 830, they just sat down, I'm trying to watch master chef, and then the email comes through, then they feel like they have to look at it to go through it. So I know a lot, a lot of email clients will have the ability to just send in the morning or send later at night. So if that's something that is possible, maybe just draft it and schedule it to send out a later time where it's not going to be stressing someone out. - -22 -00:18:48,930 --> 00:19:27,080 -Scott Tolinski: Yeah, I had a startup partner once who is really loved to send me emails at like 10 o'clock, 10pm on a Sunday, about some bug that didn't even matter on a product that wasn't even live yet. But it needed to be fixed at 10pm on a Sunday, or else off with my head or something. And do you know, do you know what that was? Like the instant I was like, Nope, I'm done, you know, because like, there's no faster way to lose somebody than to start invading their time like that. And just because you are working on it at that particular time does not mean that everyone else is you should respect the normal business hours again, I like that one a lot. There's nothing that's going to harm you from just waiting to send that in the morning. - -23 -00:19:27,270 --> 00:20:16,230 -Wes Bos: Yeah, being respectful of people's times is is really important because I've always I've had many clients in the past who it was back when blackberries were popular, and they would just send every thought that came through their head as a brand new email or anytime that we had a website and they would just like Send Feedback like just it would just kind of come in whenever and I had to be like look, you need to just put this all into a single email and send it at once because it's too much for me to have to collect all of your whims and thoughts that came in over the last two weeks. And you just to collect it all into one nice document. We can go through it together and totally understand it. So people that don't respect your time are they're not good. That's the best way I can put it. Yes, is that it's really important that you respect people's time and know that I know you're busy. But yeah, they're likely everybody's busy. Everyone's got lots of stuff going on. - -24 -00:20:16,410 --> 00:21:05,010 -Scott Tolinski: Do you know all right, my favorite features of the latest Android operating system is the digital well being section of the operating system. Because you can set like a timer, a wind down and wind up timer. And if you have your like wind down timer starting at like, let's say 10pm or something like that, or 8pm at 8pm, you can have it do a bunch of stuff like turn your phone automatically to do not disturb mode and stuff like that. So I have my digital well being on so I don't get emails, I don't get notifications of any kind unless I really would like unless I'm expecting them because I'll turn off the Do Not Disturb. But I don't get that anytime. I don't even think about it because I set up digital wellbeing once when I first got my phone and now it turns off notifications until nine to five I you know nine to five comes up all my notifications come in. And that's when I take care of things. - -25 -00:21:05,040 --> 00:21:25,550 -Wes Bos: Yeah, I have all of my notifications turned off all the time except for email. Yeah. And I get an email that I'm it doesn't stress me out that an email will come in because like I have someone processing that all for me. Yeah. When like, I don't have tweets. I don't have Instagram. I don't have desktop notifications on for anything is all just off. Yeah, I turned off all find it. It's great. - -26 -00:21:25,610 --> 00:21:44,730 -Scott Tolinski: Yeah, turning off social media. Notifications. It seems like it like when you first do it. You're like, Oh, I don't know. But do it. Just do it. Do it yesterday, better yet. Delete the accounts. But like I when the moment I turned off all of my social media notifications, I started using social media so much less and it made my life better. So that's a sick tip. - -27 -00:21:44,970 --> 00:21:48,540 -Wes Bos: Sick tip. All right, I think that's all the tips. I have anything else to add here? - -28 -00:21:48,570 --> 00:21:54,330 -Scott Tolinski: No, I think everything sort of hovers around Be respectful, be nice. And you know, I think that's it really - -29 -00:21:54,540 --> 00:22:43,320 -Wes Bos: awesome. Well, if you have any tips on like, maybe right now think about that one person who you you really like my wife, and I do this all the time, we have one friend who anytime we see him at a party, we leave the party and we're like, Don't you just love that guy? And we're like, we're trying to like, like, why do we love him? Why does everyone love him so much? And it's because we distilled into he asks the best questions about you? And he says, How was your trip to Buffalo or like, the best questions about what's going on with you. And then he remembers things from the last time you met. And we'll always make sure to follow up on that. And we made a point to ourselves to do that to other people now because of the way that he makes us feel. So if you have a co worker who you just love, try to like reverse engineer them and figure out why is it that you love them? And then tweet your tips that syntax FM? - -30 -00:22:43,470 --> 00:23:39,990 -Scott Tolinski: Yeah, I think that's so key, that it's such an important thing. We do have friends like that, that every time you leave being run you're like, yeah, and so it just so nice. Yeah, they again, they just the thoughtfulness of you can tell they actually like care about you in some sort of way, rather than Yeah, you know, other people, or maybe just giving you like an interview style question list or something like that, you know, it's like they have the questions pre determined that they read off of How to Win Friends and Influence People. Or maybe they're just, you know, not paying attention at all, at the worst case, that spectrum. So I like that. I like that tip a lot. Most of us, we are good at reverse engineering, our engineering things based on this stuff. So you can use those skills in social aspects as well to figure people out. So super cool. I like that one a lot. I again, I think this is a good, good episode. Everyone needs to be a good employee, a good co worker to their fellow co workers. And again, your work output is just going to be that much better. Do you have anything else to add to this tasty treat? - -31 -00:23:40,110 --> 00:23:41,760 -Wes Bos: I don't think so. Either. - -32 -00:23:41,880 --> 00:23:54,690 -Scott Tolinski: Already. I'll see you next on Wednesday, where we have a sick potluck episode coming up or answer a lot of great questions for you. So stay tuned for that. On Wednesday, it's going to be out with the potluck. Thanks for watching and we'll see you the next slide. - -33 -00:23:54,810 --> 00:23:55,920 -Wes Bos: Please, please - -34 -00:23:57,930 --> 00:24:07,710 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax94.srt b/transcripts/Syntax94.srt deleted file mode 100644 index 816bbbade..000000000 --- a/transcripts/Syntax94.srt +++ /dev/null @@ -1,284 +0,0 @@ -1 -00:00:01,319 --> 00:00:10,560 -Announcer: You're listening to syntax podcast with the tastiest web development treats out there. strap yourself in and get ready to live ski and West boss. - -2 -00:00:10,589 --> 00:00:19,980 -Wes Bos: Welcome to syntax the tastiest web development treat podcast out there. My name is Wes Bos. I'm a full stack web developer and with me as always, is Scott Tolinksi. How you doing today, Scott? Hey, - -3 -00:00:19,980 --> 00:00:28,980 -Scott Tolinski: I'm doing super good. It's snowing like crazy here today. So it's a nice little winter wonderland out there. Can't wait to get out to the mountains at some point. How about you? - -4 -00:00:29,009 --> 00:00:43,170 -Wes Bos: That's exciting. I'm just laughing about the snow because last time this year we're talking about Blizz x. Oh yeah, I just bought a new set of winter tires to go on our car and I bought Blizz x because I thought of how hilarious That was last year, you - -5 -00:00:43,170 --> 00:00:45,509 -Scott Tolinski: just have to shout blizzak baby - -6 -00:00:45,929 --> 00:01:23,280 -Wes Bos: Liz. So I got the got the blues x getting put on on the shop right now it was snowing a little bit this morning. But we sometimes don't get snow until like January, February. About half the years we get we don't get it until the new year. So we'll see if we get some this year. Nice. This episode today is sponsored by two types of books. The first one is Manning books is coming on for a couple episodes to sponsor they are sponsoring today with their react in action book. It's gonna teach you react from a book. We'll talk a little bit more about that. And then the second type of book is Freshbooks. is sponsoring today. And they do it's the cloud accounting, I can - -7 -00:01:23,280 --> 00:01:26,700 -Scott Tolinski: tell you really proud that two books. - -8 -00:01:28,020 --> 00:02:07,440 -Wes Bos: two books are sponsoring today. Fresh books and Manning bucks love it. So today is a potluck, we're going to rattle through a whole bunch of different questions that you submit. If you have anything that you'd like us to ever talk about on the show, even if you think it's a big topic, put it in the potluck button, which is that syntax RFM you can fill out the form, put your name in, put your question in, and we will answer it on the show some of these questions are really good ideas like somebody asks, How do you handle licensing? And what are the different licenses mean? Or like that's a good idea, we should do an entire show on all the different types of licenses out there and how to properly attribute work that has been licensed under something. - -9 -00:02:07,470 --> 00:02:27,240 -Scott Tolinski: Yeah. So if you're if your question doesn't get answered, it might get answered in more detail over the course of an entire episode. So don't worry about that. But also just feel free to submit anything we have. It's an infinity room on the question button. So just go ahead and submit all your questions, and we will pick the ones that we think are going to be useful to everyone. - -10 -00:02:27,600 --> 00:02:59,789 -Wes Bos: All right. First question is from our Lemieux which brother to Mario Lemieux? Yes. That's the only thing I know about hockey. Yeah. The question is, I listened to your episode on freelancing. And I was wondering how to justify an increase in my hourly rate, you mentioned that you increase to 100 bucks an hour and nobody griped. But I seem to have a steady stream of clients who want things for free or nearly free. And I usually have that fear that if I charge them more than it won't get business thoughts. - -11 -00:02:59,819 --> 00:04:34,130 -Scott Tolinski: Yeah, this one's tough, because obviously, you don't want to just be like, Alright, here's your invoice, it's $100 an hour now pay it because that's gonna piss people off. So I think they're the real thing here is don't increase your rate, dramatically one, so don't increase it dramatically, too, don't increase it in the middle of a project. Like if the, if the project was agreed upon, at one rate, finish out that project before increasing it, I think in an ideal world, you would be doing some value based pricing. And that way, you're not haggling over an hourly rate. That way the client is paying for the value in that way. Maybe you can low key set up what your hourly is in maybe a more favorable manner for you that regard. And you could present that as well. The project's here, I think would be better off if we were to bill on like a project basis or something for the next project, and then try to get your clients agree to that rather than have them agreed to All right, well, I was paying you 50 bucks, and now you're going to be paying me 100 bucks. So I don't think that would work very well. Another thing is I wouldn't jeopardize a reliable client. Now, if it's an unreliable client, again, someone who's asking you to do a bunch of stuff for free, it sounds like I might jeopardize that client and just straight up, tell them, hey, my rate has now increased to this amount for the next project and see how they respond. I don't for me, the fact that the client is asking for a lot of stuff for free is kind of a red flag. I guess that is sort of their duty as a business owners to try to get it as cheap of price for things as possible. But I don't know that that makes me a little worried. - -12 -00:04:34,320 --> 00:06:28,350 -Wes Bos: Yeah, I think the way that I did it was new clients get new rates. So as you bring on new clients, when I said that I increased mine from 50 to 100 bucks an hour, I didn't just go to all my existing clients and do that. And at that time, most of my clients were doing value based billing already. But for those who wanted hourly based billing, because you were working on a larger team, and you couldn't really just like work on a feature and quote it out because there are so many moving parts. Just new clients would get that that amount And then existing clients would would just get like maybe every, I think every year, I would just do an increase of my hourly rate and say, Hey, this is my amount, I always wanted to make sure that you're okay with it, let me know your thoughts on that, and increase it, maybe 20 $30 an hour going up on there, at some point, you might have to say, See you later to some of your clients just because they, they just can't afford it, or they're not willing to do it, or they don't value your stuff. And that's fine. Because you're gonna have, you're gonna have turnover on your clients. And you're gonna start to weed out some of these bad clients that sounds like that you have that are expecting things for free. That might not also also be the case, then a lot of people think like, Oh, I'm going to be totally gone, and my business is there. And if that's the case, you're probably not worth what you're charging. But it's worth trying, trying it out with your clients. It's kind of like a game of chicken, because your client doesn't want your rates to go up. And you do want them to go up. But your client doesn't want to see you go because you're likely doing good work. And they don't want to have to find someone and train them and skill them up. So we have to do this with our sponsors this year as well. Because next year, our sponsors aren't going up 200 bucks per episode. So we have existing sponsors who want to come on for new ones, and we say, hey, the price is going up. Are you still okay with this? And here is why, here's why we're getting much more views than we were initially, you're getting really good value out of it. So just want to run that by you as well, in most cases, if they're still seeing value, if the calculations still work out, then then they'll stick with it. - -13 -00:06:28,410 --> 00:09:40,260 -Scott Tolinski: Yeah, I think that's a good a good point to the whole value of everything the value, like selling the client on the value of the work, right gsra. Over time, you've gotten better at your skills, and therefore you're potentially in in more demand and can request probably faster, probably faster, right? So you're, you're able to provide the same amount of value in a shorter amount of time. So I think those are all all key things to think about here. Okay, next one we have is from AJ. AJ says, I started a YouTube web development channel. Recently, I was approached to produce content for money for another website. For some reason, I immediately thought I might be taken advantage of, I'm pretty new. And to be offered something like this so quickly know, if accepting, what do you think? Should I create content for a small website that I've never heard of, or continue with YouTube? Or both? I have a lot of unique thoughts on this, specifically, because I've ran a YouTube channel and I've done content for myself, and I've done content for other publishers, YouTube does not pay the bills. First and foremost, you can have, you know, 200,000 subscribers, and YouTube is not going to pay your rent, you know, so I wouldn't rely on YouTube to make a ton of money that people that you see making a ton of money on YouTube, or most likely making money outside of YouTube via brand deals and sponsorships. So again, I wouldn't rely on YouTube to make money, I would have YouTube be more of a marketing tool, have it be for fun, have it be to provide free content for the community, that sort of thing. For as terms of working with a publisher, I did a course for an publisher that I'm going to not name and they paid me $1,000 advance. And then well turns out I learned a big lesson in royalties, even though I sort of understood royalties at the time, I actually, I did royalties for a record label, I for some reason did not take into account the situation. And basically, I wasn't getting paid anything additional for sales for my course, until the percentage that I earned, which was the small percentage paid off the advance that I received. So even though the advanced is only $1,000, it took a long time with the rate that I was getting from the core sales, and I wasn't seeing any money. So it was really frustrating to see that they sold, you know, hundreds of copies at this price. And I was getting nothing for this still. Now that said fast forward. You know, five years later, I'm getting $200 in the male every quarter for royalties for this thing that met my limit, but I would definitely say that definitively wasn't worth it. I think you need to calculate whether or not to quote an excellent movie if the juice is worth the squeeze right? Because like if it is worth it, if it's worth your time your new person maybe you're going to get some experience doing this if it's worth your time go for it right just be you know, way that the benefits to the the outcomes. I don't know about getting scammed here. Again, just make sure you have contracts, make sure you understand the agreement, and make sure you understand what you'd be getting paid. That's it level up tutorials is looking for new content and creators. So if anyone is doing good content and would like to get paid to do it for level up tutorials, reach out. Yeah, - -14 -00:09:40,320 --> 00:11:17,700 -Wes Bos: yeah, this is an interesting one because I get contacted all the time by people who want me to the biggest one is people with these unknown platforms want me to take my content and put it on their platform and they'll take a generous 80% cut or 50% cut or whatever it is that they want. The reason behind that is because it's free. It's really hard to find content creators that are both really good. And they're willing to do they're willing to do it for somebody else. Yeah. So what they're likely doing is that they're, they're just cruising YouTube, looking for people, like your stuff is probably really good. There's no link here, but I'm assuming they said, this guy's brand new, but the stuff is really, really good. This is some undiscovered talent, I'm going to try and and bring them on. So that's good. Because you could if you want to make a little bit of money, if you want to get some experience in that regard, it's it's, it's a way you could make some some quick money on that. But in my career of making content, and I go back to writing blog posts, over the years, I've spent, I've written maybe four or five blog posts for different people around the world. And for that, you get a couple hundred bucks. And in the long run, it's almost always been worth it for me to write the blog post and put it on my own platform, and then get the long tail effect of that have links to my courses, people finding it in SEO. While I didn't get like a huge bang right away the long tail of that the Twitter followers, the the site traffic that link backs, all that stuff was was well worth it in the long run. Hey, that said there's been Sorry, go ahead. - -15 -00:11:17,880 --> 00:11:30,510 -Scott Tolinski: I was gonna say like, what what about exclusivity deals? Like, what if they were to say, hey, we'll give you $200 to put this on our site, but you can also put it on yours? That seems like a that seems like a win win? Does anybody do that? Yeah, - -16 -00:11:30,570 --> 00:13:32,610 -Wes Bos: like a redistribution? Yeah, I got actually an email in my inbox about that right now. Or somebody just wants to take some of my free stuff and put it on their website. I see this all the time with universities who want to package up my courses and offered as part of the curriculum in there. So it's hard to say because like, I've also like, early in my career, I wrote a blog post for CSS tricks on Sublime Text. That was huge for me, I got tons of traffic, I made tons of sales, I got tons of followers from that. So obviously, if there's something big, like CSS tricks, I would totally go for it. But I think if you're not hurting for money, it's definitely worth just trying to stick it out and stay on your own platform and sort of own the content yourself. Because I think in the long run, it's gonna be well worth it for you. Word. Yeah, I know, it's kind of an interesting thing, where there's lots of people out there who are trying to just like gather content creators. And then there's, there's lots of people out there who are content creators and just want to do it themselves. And if you have the time, I say do it yourself. But also like, like egghead just rolled out this they got Did you get the email Wes Bos as a service they rolled out, which is apparently a problem that egghead is having is that people are looking at, like people like me who are selling courses by myself, and saying, like, why would I do a course for you if I could just do what Wes is doing and do it by myself. And the answer to that is that I've spent years building my own course platform, I have my own audience and stuff like that. Whereas like most people don't necessarily have that an egghead is going to provide infrastructure and marketing and design support and, and all of the e commerce that comes along with it, and the support email and all that other kind of heavy stuff that's hard, that don't necessarily always talk about which is part of running it. So there is a spot for people who are trying to help you with your content. And then at the same time, like you've done videos for sketch as well, sometimes people just contact me and say, like, I just need someone to go through our own product and make tutorial videos on how to use our product, we need to be able to send them to this to our clients. - -17 -00:13:32,640 --> 00:15:27,210 -Scott Tolinski: Yeah. And that's always been in been great for me to do content for companies like that, that need tutorial material. Again, I think it's for me, creating content isn't that difficult, especially on things that I use every day? So it's not like a huge time sink for me to make some of those videos. It's a good return. Yeah, again, it there's a there's a lot of factors to be considered in regards to any of this stuff. But I think we think we nailed it on most of those. Next we have from Richard Kaufman. The question is I've read on Twitter, that react context can be a good replacement for Redux. Why? And I think the the key word in your question is can because it absolutely can be a good replacement for Redux. I think a lot of things can be a good replacement for Redux. And other ones, maybe not so much, right? Redux offers, for those of you who don't know, basically a way to manage your state throughout an entire application in one sort of large store, that's easy to sort of understand, it's easy to understand where the data is being loaded, how it's being loaded. There's some nice little features with the dev tools and getting that sort of time travel stuff. But the reason why people would say context is a good replacement for Redux is specifically because it allows you to manage the state of your application and take state or data from one part of your application and use it in another part of your application without an external third party library. Now granted Redux is very ingrained in the React community is that Really like you're adding something that who knows if it's going to go away at any time or whatever. But it basically allows you a lot of those features without having to add an external library is I think the big thing. It's part of react, right. So I think that's, that's why people would say it's a good replacement. That said, it doesn't replace all of the functionality. Again, it's a different way of doing your your state throughout your application. But again, it does provide you with that ability. - -18 -00:15:27,510 --> 00:16:13,080 -Wes Bos: I think people use Redux just for the ability to inject it via the high order component. Now, the fact that you can just inject data, wherever it is that you want, with contacts is really good. And now with hooks, we did episode last week on hooks, we have the ability to use reducer. So you can even take some of your complex reducer logic, and and all of your actions and stuff that get fired off and dispatched, you can just move that into its own. So I definitely see between hooks and context and the suspense stuff that's coming up. I don't really see a lot less people reaching for Redux in the next little bit, which is great, because I think that for most people Redux is too complex. And it's unnecessary in a lot of use cases. So it will be exciting to see that the stuff gets easier. - -19 -00:16:13,110 --> 00:16:47,909 -Scott Tolinski: Yeah, well, I use Redux when you can use something fresh like hooks, that brings me into our first sponsor today, which is fresh books. I don't sincerely mean that you can Redux is great. Still, I don't want people to think that I'm like, use hooks don't use Redux. But yeah, so fresh books, as longtime sponsors, sintex. And let me tell you, that's just a great way to manage your accounting, which I should know, because I actually worked as an accountant at one point in my life. And it was no fun, probably because we weren't using fresh books. So it's a little bit more about fresh books is Wes Bos. - -20 -00:16:48,149 --> 00:18:38,060 -Wes Bos: Yeah. So if you are trying to get paid nice and quickly from your clients from anyone that is there, trying to collect money from Freshbooks, is what you're going to need to in order to do that. So I use Freshbooks. Myself, I just log in, I create an invoice, send it over to the user able to pay via credit card, if I have that set up, I've a bunch of different types of currencies that people can pay me in. Sometimes I have to fly to the UK, and I need to be reimbursed for a flight. So what I'll do is I'll put in my flight into my expense, and then you can take that expense, it automatically turn it into an invoice, you can attach specific expenses to specific customers, and that will then turn it into into an invoice for you, you can get paid in all those different currencies, you can have automatic billing reminders. So if someone forgets to pay it, they can do that. You can see if someone's seen your invoice yet. So if you log in and someone hasn't paid, you can say Oh, they haven't even looked at it, they didn't get the email, or they looked at it three times and haven't paid me yet. And maybe it's time to, to start knocking on their door to see what's going on. Bump, bump Bump. So if you're trying to run any type of business, you're trying to log your hours, you're trying to send invoices trying to manage all of your expenses with the different types of taxes. I love Freshbooks for this because at the end of the year, tax time is coming up in a couple months for me and I just need to simply export all of my all of my CVS or CSV files. And my accountant is super happy with that. So try it out@freshbooks.com forward slash syntax and use the code syntax and how did you hear about us, you can get a 30 day unrestricted free trial. And that's not one of those trials where you have to put your credit card in and then they start charging you when you forget about it. You don't even need a credit card to sign up for this. So check it out. Thanks so much too fresh books for sponsoring. - -21 -00:18:38,520 --> 00:18:48,350 -Scott Tolinski: Thank you. Next up we have a question from Christopher Robin. Christopher Robin asks, yeah, Wes Bos is smiling. Are you smiling because of the Winnie the Pooh thing? - -22 -00:18:48,630 --> 00:18:51,180 -Wes Bos: I'm pretty sure it's Winnie the Pooh that asked us Yeah, - -23 -00:18:51,240 --> 00:18:54,830 -Scott Tolinski: okay. I'm sorry, Chris. If you've been getting that your entire life. - -24 -00:18:54,830 --> 00:19:00,320 -Wes Bos: I'm sure that if that's his actual name, his entire life, his people making Winnie the Pooh jokes at him. I know. - -25 -00:19:02,970 --> 00:20:12,990 -Scott Tolinski: I don't want to perpetuate that. Here's the question. What's it like running a podcast? And I love this. This is a fun question. We often do a lot of technical questions were is is a fun question. Because running a podcast is a lot of fun. You know, personally, it gives me an outlet to just blab on about things that I love without having to bug my wife about it, right? So like, I can't even count the amount of times I've been like, hey, Courtney taught Let me tell you about this technical thing that you don't care about until just like gloss over. Right. So for me, it gives me an outlet to just blab about this stuff without having to I don't know, we're getting to talk to what is an audience that is also excited and interested about it, right? Because, to me a lot of this web dev stuff, the new things in web dev while you know it can often be seen as like maybe JavaScript fatigue, he or you know too much stuff to me, it just excites me. There's a lot of great stuff always coming out. And honestly, if I can just talk about it once, twice a week, whatever. It really sucks. me up. So for me running a podcast is a lot of fun. You get a lot of opportunities to spend some time learning things. And to be honest, it's just I don't know, it's it's been a blast. And I hope it continues to be a blast, because it's been great so far. - -26 -00:20:13,230 --> 00:21:10,710 -Wes Bos: Yeah, I've, I've been really enjoying it as well. I think that for me, the biggest thing with the podcast is just a lesson in consistency. The fact that you I both have Scott to record with every week, as well as I have the sponsors who have paid for the episodes ahead of time, you need to make sure that you actually make the content. Otherwise, you're pooched. And you have to give the money back to the sponsors and things like that. So the fact that we've just been consistently doing it for what, a year and a half so far, and we've only I think we missed one week, somebody like did a visualization of our RSS feed over the podcast, and just showed that we've been doing it for so long. And there's only one week where we've missed it. And I thought that was pretty cool. Because we travel a lot, we get sick a lot. We've got kids, we have bad, bad sleep nights, and we've been able to make it work. And I think that's just a lesson for anyone where if you want to make something work like this, just keep at it and just do it. week in week out. It's not always easy. Sometimes we have unlimited topics to talk about. And other times, we're like, what should we talk about today? What's something that's, that's interesting? - -27 -00:21:10,770 --> 00:21:38,130 -Scott Tolinski: Yeah, there's always that person that gave up one week too soon, right? Like, I've been making content for, you know, seven months, every single week, and I haven't seen any movement. Well, maybe you were like one video away from the one that like broke out and gained you a ton of subscribers or something like that. For me. Again, the consistency has always just been such a key thing and most things that I do. So again, yeah, I totally hear you with the consistency aspect of this, it's time to make the donuts - -28 -00:21:38,400 --> 00:22:48,720 -Wes Bos: totally. Well. The other thing I really liked about the podcast is the community. It's interesting, because those who are listening to it, they listen to us like for probably an hour and a half every single week. And then you meet people at conferences, or you get emails from people and they feel like they really know who you are because they listen to the podcast so often. And this community is awesome. Because there's people that are sort of helping each other. I know that we don't have like a discord or slack or effect drum or anything like that. But even just like through Twitter, through people talking about the podcast is really cool to see that on Twitter sponsors is another really cool thing, like the people who sponsor this podcast, are mostly just web development companies trying to make the lives of us web developers easier, trying to make things like billing much easier. And I think that's really cool as well that we can have an audience and share things even like like Netlify is a really good example. as well. We can share these, these products that we're excited about that are actually helpful to our users and our users can discover them. So it's cool that you can help other companies grow as well. And I know that's sometimes a weird thing for people because like these are businesses and they're corporations trying to make money. But at the end of the day, they are meet the people behind these companies, and they're just trying to make it work and they're trying to help developers. - -29 -00:22:49,020 --> 00:23:08,730 -Scott Tolinski: Yeah, we really do love our sponsors. I've never ever felt like morally questionable about, you know, doing an ad read or anything like that. I've never been like Garth from Wayne's World decked out and Reebok. Like it's, for me, it's like, always stuff that we use and love. And it feels genuine because it is genuine. - -30 -00:23:09,060 --> 00:23:48,120 -Wes Bos: Totally we've and people say like, would you turn down sponsor like that? And the answer is, yeah, we totally would. But we also don't have anyone who's running these like sketchy companies willing to like it's expensive to sponsor this podcast. So it's only companies that know it's going to absolutely work work well for them. I also just like the like sick pics and everything just like the the stuff that is like tangentially related to web development whether how many people bought Scott's stupid drill brushes. They're awesome. How many people bought the squeeze bottles that are recommended a couple of weeks ago, like these are just like, we're all humans. And we all love the fun stuff like that. So I think that's a really fun part of the podcast as well. - -31 -00:23:48,150 --> 00:23:56,850 -Scott Tolinski: Yeah, speaking of steak picks, my sick pick today is very wholesome. I can't wait is bordering on weird, but I'm excited for it. So - -32 -00:23:58,830 --> 00:25:38,160 -Wes Bos: let's keep going to the next question. I like that one. Thanks for that question. Chris Webb asks, I've seen a rise in the term full stack designer. Is this the title you've you think will become a real thing? Is someone capable of overseeing a project from concept to prototype? Thanks. So it's funny that people always get bent out of shape over titles like this. And people say no, that shouldn't be a thing. Even the word full stack really irks a lot of people in it. I think with the exception of engineer, which I understand when people get irked about it because an engineer is someone who's in most cases, legally responsible and and goes to school for however many years to get the certification passed that job titles are just job titles. You can call yourself whatever you want. The idea of a full stack designer is kind of interesting. Like for sure, we will see people and there are lots of people who can design an amazing thing, prototype and amazing thing, pull it together, build up the entire scalable back end as well as do a really nice front end. I don't think That will be as popular as as you think it will be. Because just because like, that's a huge breadth of knowledge that you have to understand, what I do think that we are going to see is designers who can make a really nice thing, but also can implement it, maybe they can prototype with react or use some of these tools and build out the entire application. And then you can lean on the services that are maybe serverless functions, or, or maybe something like Sanity io or Netlify, CMS or any of these, like sort of like back ends that will do the heavy lifting for you. And you can sort of just lean on them to pull in the data. So that's my thoughts around that. - -33 -00:25:38,190 --> 00:26:07,200 -Scott Tolinski: Yeah, I know, I largely see it as a vanity title. I mean, most titles are kind of vanity titles in a lot of ways, right? I know what you're saying, like with the whole, everyone gets hung up on the title, I get that, you know, I get it. Like, I became, quote, unquote, a senior developer early on in my career simply because the guy above me quit. I was in that role, right? Like, but if you were to put me up against another senior developer, who knows, it's all like, it doesn't really matter. - -34 -00:26:07,470 --> 00:26:14,490 -Wes Bos: Yeah, some people want like the government to come in and start, like, controlling what people are called senior developers. Seriously, - -35 -00:26:14,490 --> 00:30:14,550 -Scott Tolinski: I totally agree. And it's, I largely see this vanity, this full stack designer as like a vanity name or whatever, again, you're gonna want to have a lot of these skills if you're a designer, and no, it depends on the size of the agency or the company you're working at. Many times, I've worked in companies where a full stack, quote unquote designer was just a designer, just a good designer, right? It was you needed to be able to do all of those things, because there was only six people working at this company, and we don't have the money to pay, you know, someone to just do UX design, you better do all of it. So for me, it doesn't really matter. Again, I wouldn't get hung up on any of this stuff. Everyone who's a full stack developer has, like one area that they're the most strong in anyways. And it's going to be the same thing for designers. So again, like I could refer to myself as a front end developer, but I work on the full stack of my application. Therefore, I'm a full stack developer. Am I good at the full stack? I'm decent at the full stack? Am I the best at it? No, I'm probably not the best at it. But you know, I think again, it's worth saying that it's it's really just, it doesn't matter. It's vanity. You can call yourself whatever you want. At the end of the day, my first job title was an interactive producer. And I held on to that for a little bit. It was totally meaningless. Okay, so next up, we have Mike, I want to say this is Roche, but this is how my dad spells his first name aro ch and my dad pronounces it rock, there's a st rock in some sort of I don't know what the same rock is from, but that's how he pronounces it. So it's either Mike rock, or Mike Roach. I'm sorry, if people call you one or the other. The question is, what has been the most awkward situation you've been in as the dev I've been? I've been it's a fairly awkward situations in agency life. And I'm not going to name the agency or the people involved in this. But if any of my co workers are listening to this podcast, they've probably very aware of this situation. One time, we were in a meeting, maybe like a year into a very in depth project. It's a big project, big team. And we we were very intensely into this project. And all of a sudden, an argument broke out in one of our team meetings where there's like 30 people sitting around a table, and my boss, and it was basically, you know, our boss, who's the boss of the devs. And then there's three devs. below him, he starts going off at the project manager, like berating her, just like yelling at her in a very inappropriate way about Photoshop files, it was so meaningless. And he just he went off, and I'm sure he was gone through some personal stuff, or whatever that led to that situation. But it was super uncomfortable for everyone in the meeting, he then stormed out of the meeting, she quit the project. I mean, she didn't quit the company, she asked to be assigned to a different project, rightfully so. And then we just sort of came into work for two weeks, where our boss was then put on like a leave. And we came into work for two weeks without any knowledge of like, what's gonna happen to him? Or what's gonna happen to our project or what's gonna happen? And we just sat there we come into work every day. Do you guys hear anything get? I don't know, we'd see. Like, we'd see, you know, higher ups talking sort of by us and maybe pointing at us, like, was so uncomfortable for about two weeks. And then all of this is like two weeks later, the boss of our boss or I don't even know what this guy's roles he took us into a conference room. He's like, so your boss has been put on leaf for about a month, and we're just like, Okay, what are we gonna do? And then unceremoniously, like, a little bit through that time, they're just like, Oh, yes, by the way, he's been fired. You're just like, Okay, great. So we had no but I'm pretty stoked. Remember ever getting another we ended up just managing ourselves for the rest of the project, it was totally bizarre. And it was super awkward. And it was definitely an awkward couple of weeks while we were just sort of sat in limbo. That was that's definitely the most awkward situation I've been in as a developer. - -36 -00:30:15,060 --> 00:31:15,390 -Wes Bos: I haven't been in a whole lot. But though the one that sticks out to me, that makes me want to stick my head in the sand is, luckily I didn't do this. But I was on a work in an agency during my co op, and the client was being really difficult. And the emails were getting a little fiery back and forth, because they just weren't understanding what was going on. And the PMO the project, replied all and they meant to just reply to our team on the thread. They said something about how like client was being dumb, and I think they put a swear in there. And like, like, 20 minutes later, once everyone realized what had happened, we're kind of sitting there being like, what do you do to come back from that? Or you just called out the client to their email? Oh, you don't. And they sent a follow up email being like, Look, everyone, let's get through this. I totally forgot what it was. But they save this somewhat saved it, but I I just, I'm just cringing right now. Just thinking about that happening again. And I was like, probably, like, 10 years ago that that happened. Oh, that's - -37 -00:31:15,390 --> 00:31:16,410 -Scott Tolinski: so bad. - -38 -00:31:18,420 --> 00:33:29,460 -Wes Bos: Yeah. Next question we have here is from Nate Spillman. Do you have any good resources on JW T, I'm unclear when my front end needs to send what to my back end to ensure sites, sites and only my sites can get the data requested from my server. Thanks for everything you do. Alright, so JW. T stands for JSON Web tokens. It's a way that you can do authentication from your client to your server. Basically, the way that it works is when you sign in, you get back this token from your back end, and you store that token either in a cookie or in a your local storage. And then every time you make a request from your back end, to your front end, then you send that jadibooti along for the ride. And that's how you know that you are signed in the database kind of cool as well. Because you can put information in uj wt things like you could put like an avatar, most likely, you're going to put your users ID in there, you could put a list of permissions, things that are just handy info about the user that you need, without having to make a round trip to the server to request info about the user resources on that I use it on my new advanced react.com course we do jadibooti from scratch so that it's not using auto or any like existing solution, or passport jass or anything like that. It's just right from scratch, surprisingly simple to implement. We don't implement all of the different features that you can, which is like you can like make them not expire, but you can make like a blacklist, Adam wathan has a really good podcast called full stack radio. And he just did a really good episode, let me pull up the name of it real quick, Episode 98, with Ryan chinky, securing single page applications that was a really good look into all of the different upsides and downsides to using jadibooti over something like sessions and cookies. But to answer the other part of that question, how do you make sure that only your back end can get data that requests a server that's where course starts to come in. Generally, when you set up your back end server, you will list a bunch of domain names that are allowed to make requests from yours. And that's that's how you make sure that you can only send them from that domain name and anyone else who were to get access to that JW t can't send them from different domain names. - -39 -00:33:29,790 --> 00:34:13,830 -Scott Tolinski: Nice. Yeah, cool. And I mean, if you're interested in learning react via video, you can check out what is advanced react.com course. But if you're interested in learning react via a book. Well, I think we have a great place for you to do there you go. Yeah. Which is manning.com forward slash books forward slash react hyphen in hyphen action, aka react in action via Manning publications, is a great way for you to learn react if you're the type of person who prefers to learn from a book, which I know there is a ton of you because so many people messaged me saying I don't want to learn from video. And I say, well, tough because I can't write books. But Manning, they have authors who are very talented at writing books. So it's a little bit more about react in action as Wes - -40 -00:34:13,940 --> 00:35:26,820 -Wes Bos: Yeah. So you want to check us out. I get this all the time as well, people email me like I would love to do your video. But that's not the way I learned. And I totally understand that not everyone likes to learn coding from watching videos, they might much rather just sit down with a book and a pencil and read through the entire book. So this is an awesome book, if you want to check out learning react via a book. It's called react in action by Mark Thomas. And it's a 360 page book. So it's a pretty hefty book. It goes into everything about from scratch. So you learn react, you build your hello world component, you'll learn about data flow, passing data through it, you'll learn about all the lifecycle methods inside of react, working with forms inside of react, integrating third party libraries for react all the way through if you go to the end of the series, Looking at using things like react and Redux together using different state managers using react on the server. So check it out@manning.com forward slash books forward slash react in action, and there's dashes where the spaces would normally go. Thanks so much to Manning for sponsoring, they're gonna they've got a bunch of shows coming up, and we're gonna be sort of spotlighting a different book on every single one that we have. So thanks so much to them for coming on for that. - -41 -00:35:26,850 --> 00:35:32,070 -Scott Tolinski: Yeah. Thank you, man. First time bouncer. This is the first time they've sponsored an episode, I should say. So thank you. - -42 -00:35:32,100 --> 00:37:59,900 -Wes Bos: Yeah. How do you move selected text horizontally or vertically in VS code? I've seen it and watched his videos. I tried to ask him on Twitter. But I'm sure that's a chore to keep up with. Yeah, sometimes people ask me questions late at night, or on weekends. And then by the time I come, my Twitter feed is much past that. So I don't see them all that come in my Google Aton. I didn't see any thing. All I found was an extension that adjusts auto indentation, which is not what I'm after. So this is a question I get all the time. It's one of my favorite features of VS code. I'll start with the vertical moving of the text. That's something called a call line bubbling. If you just Google Wes Bos line bubbling, I have a video on how to do it in Sublime Text. But it's exactly the same in VS code. Basically, you just select your lines that you want. So you could either just put your cursor on one line, or you could select multiple lines, then in at least in my editor config, you hold down the Option key and hit your arrows and just use your your arrow keys to go up and down. And that will just swap out your lines. I much prefer that line bubbling versus like cutting code and pasting it in. Yeah, like I can see where it's going. That's one of my favorite VS code shortcuts. The other one that I have is how do you move text horizontally, generally, what people are referring to because they see that they see me do this in my tutorial, it's where you you select a bunch of text on multiple lines, like if you have like a label, and the for attribute is like for name for a phone number for email, copy name, phone number, and email. And then what I'll do in that case is I'll just copy it, and then use my arrow keys to move my cursors to the right of that, and then I'll paste it in. And if you have the same amount of items in your clipboard as you have cursors on your page, so if you have three items in your clipboard, and you have three cursors on your page, and you paste it, then they will not pace that those three items three times over, they'll paste the first item on the first line, the second item on the second cursor, and the third item on the third cursor. That's one I think a lot of people know about. And it's extremely helpful when you're doing repetitive coding like like trying to do forms on a page. Where so yeah, big fan of that. That's how I do it. I will at some point, do a VS code course because people ask me all the time, how I do these things and these little tricks. And it's frustrating because I also use the Sublime Text, keyboard shortcuts. So if I even tell somebody what I'm touching on my keyboard, it's not not necessarily the same thing for them. I - -43 -00:37:59,900 --> 00:38:02,340 -Scott Tolinski: know for vertically, it is option option up down. - -44 -00:38:02,520 --> 00:38:40,880 -Wes Bos: Yeah, shut up down as with sublime, it was a different one. But I just used the VS code one, which is good. My only recommendation to people is that when you're trying to do something, just open up your command palette, and just type like, move up. I just typed move up, and I found it in my command palette move lined up, and then it tells you what the keyboard shortcut is. And there you go. So it's not this like hidden thing where I have access to all of these shortcuts that no one else could possibly know. It's the fact that if I don't know how to do something, I look it up in my command palette, and then I look at what the keyboard shortcut is. And then I use that and then I do that like 10 times. And then hopefully someday I will remember it and I don't have to look it up. - -45 -00:38:40,920 --> 00:38:47,850 -Scott Tolinski: Yeah, and for those of you don't know the command palette is opened by Command Shift p, bring it up. And if you're on Windows, just - -46 -00:38:47,850 --> 00:38:53,460 -Wes Bos: go buy a Mac, and then check in there's some keyboard shortcut, as well. - -47 -00:38:54,920 --> 00:39:23,960 -Scott Tolinski: That's gonna get some emails. Okay, next time we have somebody who did not leave their name, but the question is good. It's also a question that we sort of answered before in the last episode, I believe so but I want to I want to take some a little bit more time on this one. The question is, how do you recommend providing feedback on bad code to a developer more experienced than you without coming off as uppity? No at all jr? Who just read a bunch of textbooks and digging into a codebase that is full on spaghetti not that not that tasty? Kind of like a little side note without like taste? - -48 -00:39:23,960 --> 00:39:33,300 -Wes Bos: Oh man spaghetti looks a side note. Spaghetti is the only food in the world that I will not eat it makes me want to puke that's messed up. Disgusting. Yeah, - -49 -00:39:33,330 --> 00:42:14,880 -Scott Tolinski: yeah, that's that's messed up full of enormous tightly coupled files, doing multiple things in lengthy terribly named functions and is sopping wet, repetitive mess. So much bad practices going on here. I have no idea how this is supposed to scale. It's a client product. So it is supposed to. I'm not an expert. I didn't build this house but I'm supposed to live here. So help. Okay, yeah. So this one, it's important because again, the thing you don't want to do is you don't want to go to the more experienced developer and blog WTF man? Like, what's up with this? Where why'd you do this stuff? Why'd you do this? Because you don't know the history of this project. If anything, I would ask them what's like the history of the codebase. And what's the situation, maybe they were given like, one day to do it and just had to cobble together something. Maybe they were handed this codebase, from another developer from who got it from another developer who got it from another developer, I've experienced all of these things in my time working in agencies, where you might think that someone is responsible for something but who knows, it was actually the guy for people before them. And well, they didn't leave any, any anything good behind. And everyone's just sort of been dragging this project along ever since every developer who's ever touched it. So for me, the last thing you want to do is start blaming or assuming that anyone in particular is responsible for anything. Next, I would say like how you said, it has to scale as in this is a long term project, I guess, to what extent does it have to scale it has to scale a lot, and you can provide the resources to start rewriting things, then I might go for that. But I would only do so with permission, I wouldn't say just start doing it going rogue, you're not James Bond going rogue here, you should ask your boss, whether or not like that's a good idea. Because you have some concerns. In either case, I think if you notice, this is a pattern with this particular developer, maybe you know, for a fact that they wrote this project, and maybe they wrote a couple of other bad projects, I wouldn't go to that developer anyways, I wouldn't do that, I would go to your manager. And I wouldn't necessarily say tattle on them or something like that. That's not what this is about, say maybe you have some concerns about so and so's projects for maybe these reasons. And maybe we could work together to resolve it. Because chances are, maybe it's maybe it's laziness, maybe it's the person, or maybe it's just the person not realizing that other people are looking at their code and thinking it's bad. But either way, I would take all of the blame out of everything. It's not a blame situation, it's a team thing, and you want the team to be best. So again, don't go to your boss and tattle on this person. But maybe just ask some questions and see if you and the rest of your team can work together to improve this code base. - -50 -00:42:15,030 --> 00:45:08,790 -Wes Bos: I agree, I have nothing really to add to that. It's definitely a hard place to be in where the person who is supposed to be supposed to be able to mentor you and move you where the code is just not very good. And it's a hard place to get through. But I think what Scott said is really important to think about first. Next question is from Ryan, how do you set up an IP whitelist, I'm getting started managing databases, and I am using Mongo Atlas. So this is actually a bit of funny, you know, m lab, one of our past sponsors, and the host I've used for my own MongoDB host. They got bought like a week after we did the the sponsor podcast for them. And they got bought by MongoDB. They've had their own product called Atlas. Just kind of interesting, because MongoDB just bottom up, because m lab was awesome. That's an aside which people a lot of people have been asking, like, Hey, what are your thoughts on M lab being bought? And I'm like, I think I'm happy about that. Because that means that the quality of M lab will hopefully be moved over to the the product that MongoDB has, which is called Atlas, they require an IP whitelist for all connections developing from my computer is fine, because I can just add my IP to the whitelist. But what do I do if I actually want to make my API or website public? Just whitelist? Everything? That sounds like a terrible idea. All right, this is a good good question here. Generally, you do want to whitelist your your database, which means that no one can have access to your database, even if they have the username and password, unless their IP address is on a list of accessible IP addresses. And for a public facing website, you generally don't have your public directly access your database. Generally, what happens is that your your users access your server, and then your server just talks to your database. And in WordPress land, a lot of times your database and your your database and your your code is even running on the same machine. But in a lot of use cases, your database runs on one server somewhere and then your actual code runs on a different one. But you need to figure out what is the IP address of your server as well as what is the IP address of your your develop machine development machines. A lot of companies make you sign into a VPN before you even do any of this work that the reason behind that is because they only want access through their company's network, not through some random rogue coffee shop Wi Fi where you could be sniffed in the middle. So that's the answer to that is that you don't need you just have to whitelist your actual server as well as your development machines which are directly connecting to that. And then you don't have to whitelist your actual server itself. There's things you can do there in terms in making sure that you don't Get DDoS or someone doesn't take advantage of your API. That's a whole nother show. We'll probably do at some point. But you don't need to worry too much about that. - -51 -00:45:09,150 --> 00:45:25,770 -Scott Tolinski: dope. Yeah, I think this, this leads into a bigger point is that we need to do an episode on security stuff which we have in our listing, I think it just needs to happen, sometimes sooner where we can talk about just some things as front end or full stack developers that you need to be aware of when dealing with security. And yeah, - -52 -00:45:25,950 --> 00:45:44,850 -Wes Bos: I think that that's a really good point. It's just like knowing about all of these different things that you don't necessarily like these are the things you need to do what you should be aware of IP whitelisting, you should be aware of rate limiting, and you should be aware of like different types of rate limiting and, and what a DDoS attack is and why it could could pull you down. So coming up, - -53 -00:45:45,120 --> 00:45:53,760 -Scott Tolinski: common app. All right. Also coming up is sick picks. I see you have a nice little sick pic here. So do you want to go first with your sick pick? Yes. - -54 -00:45:53,760 --> 00:46:59,070 -Wes Bos: So a couple podcasts ago, I sic picked my feefo bottles for the kitchen. And I said I've got a whole bunch of little kitchen gadgets that I find really helpful. And generally my kitchen gadgets boil down to what do they actually use in restaurants, because that's, I think that's the most productive thing you can use and the best quality you can use. So my next one is on baking sheets and parchment paper. So in terms of baking sheets, I never like to use the like black colored cheap baking sheets, because the metal that's used in those baking sheets are really thin. And what happens is when you heat them up, if they're the really thin kind, they'll start to warp, which is not a big deal. But sometimes you hear like something in your oven go punk. And then because your baking sheet has has worked, and that's usually Okay, sometimes you got juices in that but the scary part is when you take it out, and it starts to cool down, it warps back. And if you've got like hot juices on the baking pan, I've had it happen to me before where it warps back and goes blank. And then and you get hot juices going everywhere. You - -55 -00:46:59,070 --> 00:46:59,910 -Unknown: don't want that. - -56 -00:47:00,720 --> 00:48:05,580 -Wes Bos: So that's my sick pick there. And then my real sick pick today is when you buy these baking sheets that are like silver, and they're like really thick. You I often put parchment paper down before I cook anything and it's a pain because the partial paper that you get at the store is not like cut to fit these like restaurant baking sheets. So what I do and then when I used to work at I used to work at Tim Hortons, which is like the donut shop the most Canadian job ever the most Canadian job ever. But we had these pre cut parchment paper that you would just grab a sheet and throw it on the the baking sheet and it would fit perfectly and then you just crumple it up and throw it out and you're done. And I love that because you never have to like have misfitting partial paper or sometimes depression paper doesn't rip off on the box properly. And if you have a big leaf of paper flopping around in the oven that can catch on fire. So I just went and bought I think a sheet 500 sheets of pre cut parchment paper. And it's like make makes my life so much better. So that's my sick pick today. - -57 -00:48:05,610 --> 00:48:10,140 -Scott Tolinski: That's like yeah, Tim Hortons pro tip. Nice, sick. - -58 -00:48:10,230 --> 00:48:11,460 -Wes Bos: Tim Hortons pro tip. - -59 -00:48:11,550 --> 00:48:24,330 -Scott Tolinski: Yeah, actually, that's one of the things I miss about living in Colorado, because we had Tim Hortons all over Michigan right there. Because we're so close to the border right there. And Colorado. Nope, nothing, nothing. Nothing. There's - -60 -00:48:24,330 --> 00:48:27,510 -Wes Bos: one in Dubai, which is funny. There's not even one in Colorado. - -61 -00:48:27,540 --> 00:48:45,180 -Scott Tolinski: I don't know if there's not one but that they were like everywhere. And like they're in the frequency of Tim Hortons would be like not necessarily Starbucks level but definitely approaching it in in Michigan. And they're they're very frequently all over the place. Yeah, I'm sure there might be one here somewhere that I would have to like drive 20 minutes to get - -62 -00:48:46,140 --> 00:48:47,310 -Wes Bos: or live in that good. - -63 -00:48:47,310 --> 00:48:48,810 -Unknown: No, it's the kind - -64 -00:48:48,810 --> 00:48:51,450 -Wes Bos: of the idea about Tim Hortons ears. Like that's okay. - -65 -00:48:51,480 --> 00:48:53,520 -Scott Tolinski: Yeah, that's about it. Some timbits - -66 -00:48:54,030 --> 00:48:57,660 -Wes Bos: Yeah, it's okay. It's fine. It's, it's, it's fine. - -67 -00:48:57,900 --> 00:51:06,330 -Scott Tolinski: Yeah. Okay, so my sick pick is bordering on like, it's exceedingly wholesome. is the only way I can describe this. It's a YouTube channel. This YouTube channel has 600,000 subscribers. It's big time YouTube channel. And I don't know how to pronounce this. I'm guessing it's gel. J e Ll e gels. Marble runs, which is this is gonna sound absolutely ridiculous. And I'm already like laughing at the fact that this is my sixth pick, but it is YouTube videos of marble races. This guy sets up these courses have marbles racing. And then they have a commentator who is as good as any professional sports commentator commentating these things. All of the marbles have names, but they have fake stands in the audience where like there's a fake audience of marbles watching. And he refers to these barbells as if they're like human beings. So it's like the marble falls off the course. They'll be like, oh, they're gonna be thinking about that when in the offseason, and and the whole thing is bordering on complete. absurd, but I guarantee you, if you put one of these on, it is hard to shut off. I ended up watching, like I would be embarrassed to tell you how many marble runs I watched when I was sick with the stomach flu. And I was like I was maybe even delirious by the end of it. I was sitting on the couch, watching it and just cracking up. And currently you'd be like, are you watching another Marble Run? Are you actually sitting down to watch this? I'm like, I've been watching it all day. I have this on all day. These things are awesome. They have the marble Olympics, which are very entertaining. The marble Winter Olympics. They have just generic like runs down like a sandy Hill and then they have some like more ridiculous courses. Either way, this thing sounds like it's the most absurd thing on the planet. Just watch a video. It's totally Bizarro and in my opinion, extremely entertaining. I think that's probably exceedingly subjective. So check it out. If you are the if you're interested in some good wholesome YouTube content that may take you down a rabbit hole of watching marbles race each other for hours. Awesome. Shameless plugs. today. I'm - -68 -00:51:06,330 --> 00:51:36,480 -Wes Bos: gonna plug my react course again, advanced react.com I also am going to plug upcoming Black Friday sales. So a lot of people have been asking me Hey, are you gonna have a Black Friday sale? Again? Answer that is yes. It will be around Black Friday. When is Black Friday? A couple weeks? We Yeah, I think week for now. I think maybe by the time this comes out, it will just be a couple days. So get ready for that. Yeah, all of my courses are going to be on sale for Black Friday. Look out for some annoying emails with big countdown timers from me soon. - -69 -00:51:36,600 --> 00:52:25,500 -Scott Tolinski: Yeah, I'm gonna go ahead and also give a large black friday shameless plug here, I'm going to be doing Big Black Friday sales as well for both the subscriptions and all of my courses. So either way that you like to consume my content. If you are interested in a yearly subscription, I would suggest heading over to level up tutorials comm for the Black Friday sales. Again, all of the same things was just said with the big ol annoying countdown timer and stuff. So yeah, check it out. Black Friday's coming up. And I also have a new course this month, which was pro Gatsby to a recreated version of pro Gatsby in which we actually use Gatsby to and we spend a lot more time on the core foundational concepts of Gatsby to give you a little bit more of a knowledge base there. So check it out, level up tutorials, comm forward slash pro and that's all I got today. How about you? - -70 -00:52:25,500 --> 00:52:28,830 -Wes Bos: That's it. See you next week, the PCs - -71 -00:52:30,750 --> 00:52:40,530 -Unknown: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax95.srt b/transcripts/Syntax95.srt deleted file mode 100644 index f07ef7c7a..000000000 --- a/transcripts/Syntax95.srt +++ /dev/null @@ -1,136 +0,0 @@ -1 -00:00:00,359 --> 00:00:01,350 -Unknown: Monday, Monday, - -2 -00:00:01,379 --> 00:00:02,580 -Monday, open wide - -3 -00:00:02,580 --> 00:00:06,990 -dev fans yet ready to stuff your face with JavaScript CSS - -4 -00:00:06,990 --> 00:00:07,590 -node - -5 -00:00:07,590 --> 00:00:08,820 -module, BBQ Tip - -6 -00:00:09,059 --> 00:00:21,660 -Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA bombs and Scott Taylor. - -7 -00:00:23,610 --> 00:00:24,450 -Totally at ski. - -8 -00:00:25,950 --> 00:00:53,880 -Scott Tolinski: Oh, welcome to syntax on this Monday hasty treat, we're going to be talking about libraries. And when you should roll your own or install a dependency, the sort of classic question of should I do this? Or should I let somebody who's already done this, take care of it for me and just use their work. It's part of what makes open source software. So excellent. My name is Scott winsky. I'm a full stack developer from Denver, Colorado. And with me, as always, is Wes Bos. - -9 -00:00:53,940 --> 00:00:55,380 -Wes Bos: Hello, everybody. Hey, Wes. - -10 -00:00:55,380 --> 00:02:17,100 -Scott Tolinski: This episode is sponsored by Log Rocket. Now, I've been using Log Rocket for a little bit here. And let me tell you, my favorite thing about Log Rocket is the session replay, where you can see exactly what went wrong and why a lot of times, you'll just get an error stack. And you don't know exactly how that error was triggered. And maybe you're thinking, how could they possibly gotten that error? I don't know. With session replay, you not only get a video of what happened that led up to that error happening. But you also get access to the network activity that counsel errors and logs. And if you are using Redux, you get access to the Redux actions and things like that as well. So let me tell you Log Rocket is superduper. Excellent. And if you want to learn more about Log Rocket, you can check it out at Log rocket.com forward slash syntax, sign up today at Log rocket.com forward slash syntax and get access to 14 days for free. Try it out, and you won't want to quit. Cool. So let's talk about the topic of this particular episode, which is a should you roll your own or install a dependency. And I think we wanted to start off with Hey, here are some reasons to roll your own. Here's some reasons to not roll your own. And maybe some situations where you may or may not want to fork them. And then we're gonna get into some examples. So do you want to kick it off here with one of the reasons about why you might want to roll your own? - -11 -00:02:17,130 --> 00:03:39,450 -Wes Bos: Yeah, I find myself in the situation all the time, where especially now with NPM, it's so very easy to quickly NPM, install something and get access to something that someone else has built in that functionality is immediately there for you. And that's often a really great and the right choice. But there's some situations where you might want to have what we call roll your own, where instead of like taking somebody else's library and including that entire library and the overhead that comes along with that and maintenance of from somebody else, sometimes it's better just to go ahead and write your own function that does what you want. So let's talk about first of all reasons to roll your own. I think that I have learned in the past quite a bit from being able to solve a problem myself, because generally, when you reach for an external dependency, it's because you have a specific problem that needs solving. And you say, oh, something already does that for me. And we see that a lot in the WordPress world as well. Or when I first started, I would always reach for a plugin that did what I thought it did. And then you kind of get a little bit further along in it and you realize, ah, doesn't do exactly what I want. I guess we'll talk about when we talk about forking. So I think you can learn a lot by just rolling your own function, writing it out. And even sometimes when I'm doing something, I'll just open the source code of a library that does what I'm trying to do and see how they've approached us specific plan. - -12 -00:03:39,810 --> 00:04:55,230 -Scott Tolinski: Yeah, there's nothing wrong with taking what somebody else has done an open source and just making it more of what you are personally looking for. If you hate the API for something and know how you can change it, I mean, there's always a good thing that you maybe you want to rewrite and change it. I think that's a great one learning experience is such a big important thing. Like sometimes I just want to see if I can make this thing, hey, there's this interaction I need there is a library for it, I have some extra time. Let's just see if I can make it let's push my skills a little bit more. And let's see if it's something that like I am capable of doing. And largely with front end frameworks nowadays, you can pretty much do anything you want. Now the tools are there. So now with everything is as easy as it is, chances are, there's a lot of opportunities to gain some experience there. Next one I have is for this sort of even goes along with that. And this one that only takes place if you have the time to have fun rolling your own dependency. Because just like a learning experience from rolling your own thing, it could be a fun challenge. You know what's better than doing like a code wars challenge an actual challenge in your real codebase that you can actually have something to show for it at the end of the day. So for me having a challenge like this is just super duper fun and that is a reason why I might roll my own but again, this is only something you want to do if you have the time for it. - -13 -00:04:55,500 --> 00:06:08,610 -Wes Bos: Next up we have features this is something I get bit by all the time you look at something and from On the surface, you know, I could build that in a minute, I could build that in a weekend, that should only take a quick little bit to actually do that ourselves when the reality is, is that you start to get into lots and lots of use cases, I'll give you a perfect example. So many times in my career, I've said, I don't need a slider plugin, I'll build my own slider, yeah. And you, you got a bunch of divs, you, you give them a class of current and next and previous, then you get into this weird situation where if you want to transition them you need far next and far previous Yeah. And then if you want to loop it, like, if you're on the last slide, the next slide is going to be the first one. But that looping should only be an option. And then sometimes you want video inside of them, and they need to size themselves based on it on how many is in or if you want to show three slides at once. And before, you know, you say wow, I thought this was just simply adding or removing classes. And this slider is so involved. And before you know it, you've built your own entire slider plugin that has all of the bugs that you didn't even know that you would be coming there. So the features of somebody who has already built something is probably a huge reason there. - -14 -00:06:08,790 --> 00:06:43,050 -Scott Tolinski: Yeah, so I you know, for me, maybe a library doesn't have the stuff that you want it to do specifically, yeah. And it's going to be easy to build your own. That just does that one little thing just a little bit differently. And so for me, like if I have something that I can see that libraries have no plans to add the features that I want them to have, and it won't be too much of an investment for me, I will attempt to add those features and have my own thing that does what exactly what I needed to do rather than sort of what I needed to do bunch a whole bunch of stuff I maybe don't need it to do, - -15 -00:06:43,230 --> 00:07:12,450 -Wes Bos: I found I ran into this a lot more and WordPress world because in WordPress, you would get plugins, and they would do this thing. And if it didn't work exactly how you wanted it, it would be really frustrating. I find this less in the node world just because node tends to follow these smaller packages that do one thing and one thing well, that means that you end up installing a lot more packages, but it's because they do less things. And you can sort of pick and choose these little pieces as you need them. - -16 -00:07:12,570 --> 00:08:08,040 -Scott Tolinski: Yeah, cool. Last one is maybe you want something more lightweight. For instance, I find myself I think is a react power plug is the name of the library react power plug. It's like a whole bunch of render prop in different utilities, render list container, a whole bunch of just like interesting stuff. But I found out when I was like, when I first installed this library, I was like, yeah, I'm gonna use this stuff all the time. Because, oh, I did use this stuff all the time. And then when I went through it, I found that I was really only using a couple of them all the time. And therefore I didn't need a library with all of these installed in it. Even though there is tree shaking and stuff like that, I just decided, Hey, you know what my use cases are simpler enough that I don't need a library to do this. I wrote my own versions of those components that I was using. And I use those instead of maintaining another library with versions I have to keep track of and stuff like that. So that way I can code split it myself if I need to and not have to worry about any additional dependencies or anything else. - -17 -00:08:08,100 --> 00:08:53,970 -Wes Bos: All right, let's switch over to reasons not to roll your own. So when should you reach for something that's off the shelf? I think the biggest reason for me in this is that the packages that are out there, specifically, if I think about things like date, FNS, which is kind of like a moment jazz, or I think about lodash, or I think of these like libraries where people are very testy, whether you should use them or not, I always reach for them, because they are battle tested, they've run into every single bug, they have millions of people using them on millions of different websites, they have seen it all and specifically in the use case of like lodash and date functions is they've been tested so much that you know that they're both going to both work, but they're also going to be performant in a lot of really weird edge cases. - -18 -00:08:54,000 --> 00:09:00,480 -Scott Tolinski: Yeah, that's a big one, you have a lot of eyes on something, it's gonna get refined, it's gonna get refined like a diamond. And I'm not even - -19 -00:09:00,480 --> 00:09:05,760 -Wes Bos: as good of a developer as the people that build lodash. So I'd rather lean on them for that kind of thing. - -20 -00:09:06,020 --> 00:09:33,410 -Scott Tolinski: Yeah, yeah, leaning on the people who are smarter than you is a strategy that will make your career a lot better. Another one I have in here is is not only are they battle tested, but they're actually tested. You don't have to write your own tests for this code. Because a lot of the times, the tests are already there, you know, it's gonna work. And if there's a bug happens, then there's a whole open source community of people who can not only find and solve the bug, but then test to make sure it doesn't happen. So actually tested is a big reason to use a library. - -21 -00:09:33,689 --> 00:10:18,530 -Wes Bos: Next up is a time and money. These are things that not everyone has time to sit around and build these beautiful things yourself. A lot of us have to get work done and things need to ship that's a pretty underrated one is the fact that you can take something off the shelf, it does what it says on the box, it probably is not going to bloat your code all that much, especially if we're talking about things that you can be easily tree shooken and you can just use that one little piece that's that's the argument people have for lodash All the time. Why would you include a whole library just for that one function? Well, the reality is that a lot of these libraries, you can either just import the one thing that you want cherry pick it, or you can tree shake the pieces that are unused out of your application. So that's not a huge argument and a lot of use cases. - -22 -00:10:18,720 --> 00:11:25,410 -Scott Tolinski: Yeah, I think that's an important one. You know, and oftentimes, I think people overlook that they say, what's the budget? The budget is $5,000. Okay, well, I'm thinking a custom back end platform with this and this and this all from scratch, you know, like, no, that's not that's not going to work. So not every project. Not every budget allows for the usage of totally custom code. And not everyone needs it, to be honest. So the next one I have on here is experience, like maybe you just flat out can't do it, right. So there's no harm in downloading a slideshow plugin for react or for WordPress, or for view or whatever. There's no harm in doing that if you aren't capable of coding that. And just like what Wes said before, a lot of the times these authors for these communities around these things have done it in a way that works really well. And they're going to do it better than you anyways. So maybe you just flat out don't have the knowledge or experience required. And that's not a problem. It's only a problem if your site ends up becoming way too slow, because of too many dependencies. But honestly, I just don't think that everyone needs to tackle every problem over and over again. Absolutely. - -23 -00:11:25,410 --> 00:11:40,920 -Wes Bos: Now, let's go to the third option, which is forking, when do you take something that someone has built and fork it, which means make your own version of it and either stick it in your project or publish it as a new dependency? It's the kind of the beauty of open source. When do you do something like that? - -24 -00:11:41,100 --> 00:12:43,230 -Scott Tolinski: Yeah, I had, um, one library that was a react calendar, I believe it was like react big calendar or something, I forget the library. Either way, this thing did almost everything, I needed it to do almost everything. And the code base was elegant and really nice. When I looked into the source, that all made sense. And if I was going to be building my own calendar from scratch, I probably would have ended up looking something very similar to what theirs looked like, it was just really good. So the last thing that I wanted to do was to write my own when they already had a nice structure for me. So I basically I took the React calendar, I forked it. And then I added all of the features that they were not planning on adding anyways, granted, if they were wanting these features to be added, I would have submitted a pull request or done a little bit differently. But for me, a lot of it was like I need these very specific functionalities that a lot of other people aren't going to need. And it's not worth you know, clouding up the current library for it. So you can fork it, you can change it, and you can make it into something of your own. - -25 -00:12:43,260 --> 00:14:41,580 -Wes Bos: Yeah, ideally, some of these libraries, like even think about Redux Redux allows people just to build their own add ons for it, it's important to first check, can I upstream these changes? Meaning Can I make a pull request and add these features? In a lot of cases? The answer is yes. But in some cases, the answer is no, it's not. That's not where the direction that this package is going. And it's fine to to fork it and make your own version of it. I think we'll finish this up with just some examples of like, these are things that I've gone through in my own my own working, and we'll see what Scott thinks about them as well. So one of them, I tweeted the other day, a little example of using fetch, so I was doing like a little working on my upcoming JavaScript beginner course. And I was I was building something that needed to fetch data from a back end, because they're building like a simple little crud app. And we were using fetch there. But with fetch, there's a couple things first, you have like that double double promise with fetch where you have to fetch it. And then you also have to turn it from the return data into JSON. So those are get to do the double return there or the double await. Yeah. And then there's also when you want to post some data to a back end, you have to like set some headers that tell it that it's JSON. So it's kind of annoying, because it's ugly, and it looks gross. So I just made like a quick little, like, fetch JSON function that set those defaults and got rid of the double await and return the data. And people were like, why not just use axios. And they're all offended. I didn't use axios. There. And in that case, all I needed to do was make a little function that was 12 lines long. And that was it for that entire example, if I needed anything that axios gave you, then I would for sure, reach axios because before you know it, you start adding features to these functions. Before you know it, you've built your own library, and you've reinvented the wheel. And that's where I would probably reach for axios when you need more, but in a lot of examples, it's you can just code up a quick little 12 line function. And that's going to be good enough for your your specific use case. - -26 -00:14:41,760 --> 00:15:05,490 -Scott Tolinski: Yeah, and I don't understand the like, why would you use that? Why wouldn't use five always use fetch personally, maybe I just don't understand the use case as much for using axios just probably because I haven't yet used it. But he to me. Yeah, I mean, it's in the browser, man. You don't need any extra stuff. And if you can do that little extra little fun And then then that's not really adding a dependency to your library. So, yeah, - -27 -00:15:05,520 --> 00:15:20,700 -Wes Bos: totally. Plus you learn, like the whole point of that is also showing people, how do you make your own functions that are our sync functions, but internally have promises? And how can you then await that function? So as another added benefit, is you're going to learn something by being able to use that function? - -28 -00:15:20,850 --> 00:16:06,050 -Scott Tolinski: Yeah, that goes back to one of our earlier points. Yeah. And the next one is you had date FNS versus StackOverflow, copy and pasta, or copy and paste, which I think is hilarious, because it really is super duper accurate to how you work with dates in in JavaScript. And for me, I am always reaching for date FNS, just because dates are one of those things that are such as severe pain in my butt that I just don't want to have to think about it, I want it to be nice and easy. I want to have a little format function with some format strings in there and let date FNS take care of the rest of it for me. So for me, I'm always reaching for this. It's modular, you know, it supports tree shaking and stuff like that. So why would you use it based on not using a library, it's very small, - -29 -00:16:06,090 --> 00:16:29,850 -Wes Bos: I was shaking my head the other day where I had to maintain my own array of months, there's no way in the browser unless I'm mistaken, to get a list of months. Yeah, the string like like January or Jan, like in PHP, just format a date and you pass it all like your m, capital R or whatever. And it just kicks out the date as you want. And I'm wrong about that, where you can't have you can't just get an array of possible months, - -30 -00:16:29,880 --> 00:16:36,480 -Scott Tolinski: I don't think so I think people just always do it like a you always just see it hard coded and like a string or something in there. html. - -31 -00:16:36,570 --> 00:17:47,810 -Wes Bos: Yeah, that's what I do. Because it'll return like zero base index of what month it is. And then you have to reference that against some array that you're keeping with the names of all the months. And then if it's a different language, then you have to internationalize that array. And it's just such a pain in the butt working with dates in JavaScript. So I will also reach for date functions. And we I know we talked about this a lot. But if you're new date functions is a library that is very compatible with moment j s, but it's built in kind of a functional way. And it also supports tree shaking. So if you are building any type of application going forward, I would probably reach for date functions. Yeah. Likewise, the last one we have here is lodash versus your own. So my approach to this is, in most cases, it's very simple. I just tried to use MapReduce filter, go back to the episode, we talked about array and object methods. But every now and then I reach for like a very odd use case where I have some data and I need to change it or search it or are migrated in some way. And if that's the case, I will always reach for the lodash function in there, because I know that it is going to be fast and absolutely battle tested, especially if you're dealing with thousands and thousands of pieces of data, you write your own function that might be really inefficient. - -32 -00:17:47,940 --> 00:18:38,790 -Scott Tolinski: Yeah, I can't write that better than they wrote it. So again, I use this and you can pull out each individual one that you need, and use them as you see fit. So I again, I use this all the time again, I can't write this better. And it saves me a lot of time for when I need it. So again, yeah, MapReduce filter is always my go to first again, if you need anything more deep, like more in depth than Yeah, lodash is where it's at. So yeah, this is pretty much it for this topic. I mean, there's probably other reasons for why you might want to or not, that might be personal, or maybe whatever. But I think these are good reasons to live by or just in essentially developed by men. A lot of this stuff just goes to show you how successful and amazing open source software is in general. So without having the access to the source. I think most of the things on this list wouldn't even be possible. So I'm really just happy for the current state of open source in our own web development world. - -33 -00:18:38,880 --> 00:18:44,250 -Wes Bos: Awesome. So I think that's it for today. Thanks for tuning in. And we will catch you on Wednesday. - -34 -00:18:44,300 --> 00:19:05,670 -Scott Tolinski: Yeah, we're gonna be giving you a developer Gift Guide. So check that out. It's gonna be a lot of fun gonna be really fun episode. Alright, so we'll catch you in the next one peace. Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax96.srt b/transcripts/Syntax96.srt deleted file mode 100644 index f4ac38588..000000000 --- a/transcripts/Syntax96.srt +++ /dev/null @@ -1,524 +0,0 @@ -1 -00:00:17,039 --> 00:00:18,570 -Unknown: Oh, - -2 -00:00:20,070 --> 00:00:33,030 -Wes Bos: Merry Christmas. Welcome to syntax the podcast with the tastiest web development treats out there. My name is Wes Bos, I'm a full stack developer and with me as always, is Scott tone ski. How you doing today, Scott? Hey, - -3 -00:00:33,090 --> 00:00:56,610 -Scott Tolinski: I'm doing super good, really happy to be here. This is just a great time of year, things are starting to feel a little bit more seasonal and things like that. So I'm psyched. And today, we have a really awesome holiday gift guide for you all. So this is going to be a really fun and exciting episode for me, because it's going to be like sick pics on steroids. And I know a lot of people love our sick pics. So you're about to get a whole lot of them. - -4 -00:00:56,640 --> 00:02:12,120 -Wes Bos: So these are going to be things that are ideas, experiences, products, things that are good to get a developer or, or maybe just anyone who's techie in your life, it's not going to be all gadgets. But things we've noticed from just sick picking for a year and a half is that even if it's totally unrelated to web development, there's certain types of like little gadgets or little gifts or little experiences that us as developers tend to like. So we're really excited about that this is going to be a gift guide, we're going to kind of explain our thoughts behind all of the different purchases and things here that you could get for people. Or you could send this list to a significant other who's trying to shop for you. And then as well as the list of this is also going to be in the show notes. So if you need like actual paper copy of this to print out, or to find the links to the actual products, they have them in there. Important to note that none of the companies in this in these recommendations are paying us a couple of them are freebies that I've got every now and then Scott and I will get some freebies sent to us, which is for honest review. And we'll always make sure that we're upfront and clear about that. So whenever I have a free product, we'll let you know. And the products that are garbage that gets sent to us or not part of this gift guide. Anything else you want to say before we get into Scott? - -5 -00:02:12,530 --> 00:02:50,610 -Scott Tolinski: Yeah, our sponsors today for this episode are going to be content full and fresh books. So to really, really great companies content full is a sort of a back end is a great way to host data to store data and all sorts of stuff, we're going to be getting into that quite a bit more. It's a maybe the perfect place for your front end site, like maybe a headless WordPress or something like that. And then we also have fresh books, which those of you who've listened to syntax for any bit of time know that Freshbooks is one of our longtime sponsors, it's cloud accounting software. And both of those we're going to be talking more about later on in the episode. - -6 -00:02:50,639 --> 00:03:49,289 -Wes Bos: All right, so we're gonna break it down into a whole bunch of different categories. We have stuff for foodies, we've got experiences, which is the new hot thing, don't buy stuff, buy experiences, their subscriptions, we've got books, clothes, shoes, working out gear, gadgets, smart home, coffee, grooming and wellness, and then high end where I remember being a kid and like, I would get like, like a pair of gloves and like a like a PlayStation game for Christmas. And like that would be it. And then like you go back to school in January, and your friends would be like, Oh, I got a TV and a PlayStation and Xbox and going to Florida or like, Oh, good. So if you're the type of person who spends thousands of dollars on Christmas, those will be the things for you. But we try to keep all most of the pics here to I don't know, anywhere from a couple bucks up to 5070 bucks. So things that are actually attainable is sometimes you see like these gift guides and it's like, oh great a $600 pair of headphones. Oh, they would love that. Anyone would love that. - -7 -00:03:49,319 --> 00:04:34,800 -Scott Tolinski: Yeah. Right. I know. I know. I hopefully there's something for everyone here. So yeah, let's get into it for the foodie in your life. The person who loves food. I think a good one is something to add on to your food, which is hot sauces. Now my personal favorite hot sauce is Murph and Murphy is straight out of Colorado here. And they have a variety for pack on Amazon and my favorite is the electric line. Which tastes exactly like what that sounds like electric. It's slimy. It's awesome. There's also some other good ones like jam berry Sriracha and stuff like that. They're all excellent. I'm a huge fan, I would go with the variety pack specifically for the electric line but so good. - -8 -00:04:34,859 --> 00:05:31,200 -Wes Bos: I also have a couple hot sauce here. So one thing I like to do every now and then is go go to the kind of a specialty store near me and buy every cholula so cholula is a really nice hot sauce. And they have I don't know, like four or five different kinds. My favorite is the chili lime, but I don't discriminate. I try them all on my wings and everything. So it's not an expensive way each bottle is just a couple bucks if you were to buy all of them That makes a really cool present I think same with there's this new one that I tried out is called Blue top creamy buffalo. And sounds good. It's amazing. I found it at the local Co Op near me and they make have like five or six different kinds of these creamy hot sauces and I put it up on Twitter the other day that I was really enjoying it. It does have a little bit of sugar in it, which would bum me out because I don't like to have sauces that have sugar in it, but upon tasting it, it tastes great. So check out the blue top hot sauces, - -9 -00:05:31,469 --> 00:05:57,839 -Scott Tolinski: blue tap. Yeah, I tend to stay away from sugary things like that myself. We also have another one which is fun, which was the everything but the bagel Trader Joe's seasoning that we talked about as one of my sick picks. This thing is really great. It's basically if you've forgotten everything bagel, it's sort of like a seasoning blend with all of the things that you would typically find on an everything bagel. It's very yummy. I put it on a lot of things. And I love it. Scott - -10 -00:05:57,839 --> 00:06:17,370 -Wes Bos: bought this for me. And he brought it to me when we met up in San Francisco and I've been trying to and everything in my favorite so far is putting it in Greek yogurt makes a really good sauce for 13 veggies in and then I also a little unorthodox but I sprinkled in on wings and then smoke the wings and it was unreal. So sounds good. - -11 -00:06:17,399 --> 00:06:18,810 -Scott Tolinski: I've been putting on french fries. - -12 -00:06:18,870 --> 00:06:20,370 -Wes Bos: Love. Oh, that's good idea. - -13 -00:06:20,700 --> 00:07:11,010 -Scott Tolinski: Yeah, yeah. Another one I have here is loose leaf teas. Now I drink tea all day. It's low in acidity, it's lower in caffeine. And you can sip on a cup of the receipt leaves over and over again. So I like to get my teas from a store called tea house tea house, which is TEAH au s and this is a store from Ann Arbor, Michigan. It's my favorite tea store in the country. And they have a ton a ton a ton of different teas there. Or any type of person whether you like actually like classic green teas or things like that. Or if you like more flavored stuff, the only thing is none of these are filled with sugar like they were typically in someplace like teavana, or one of those bigger companies. So tea house teas are my absolute favorite place to get loose leaf teas. - -14 -00:07:11,250 --> 00:07:28,800 -Wes Bos: I'm a big tea fan as well, especially when the winter comes around. I like to reach for all kinds of different teas and I have this thing called the Adagio tea steeper, which this is I've had this thing for like probably 10 years because this is back when Kevin Rose was running diggnation Do you remember that podcast? - -15 -00:07:29,099 --> 00:07:36,020 -Scott Tolinski: Yeah, so I remember diggnation. And I remember Digg very well, but I don't think I ever listened to it personally, oh, - -16 -00:07:36,020 --> 00:08:06,870 -Wes Bos: man, I listened to it for the longest time. And Kevin Rose was super into teas at the time. And he had this like cool steeper mug and I got it like 10 years ago. And I still use it to this day. So it's super good quality from Adagio tea. And I think it was only like, let me just double check the price. 20 bucks for this thing. And the way that works is you put your tea leaves in it, you fill it with hot water, you sit on your desk for a little bit. And then as soon as you're ready, you just pop the steeper right on top of your mug, and it will drain all of the tea right into your mug, which is I really like that so you don't have to deal with like tea balls or anything like that. - -17 -00:08:07,290 --> 00:08:29,730 -Scott Tolinski: Yeah, I actually have a different one that I have on here too. So if you're looking for an alternative, mine is more looks like a normal mug. And it has a steeper that sits in the mug. And what's cool about this mug is it has a lid and the lid sort of collects the steeper so you take the lid off and then you set the steeper on the lid and it like makes it so water and tea doesn't get everywhere. Oh - -18 -00:08:29,730 --> 00:08:39,480 -Wes Bos: man, this one's really nice. And then you don't have to because the thing with mine is that you've got like a steeper and then you got a mug dirty with this huge Deep End drink out of the same one. Yeah, yeah, it's - -19 -00:08:39,480 --> 00:08:47,070 -Scott Tolinski: great. We have a couple of these in the house and, and really like them. I have the black graph model. So it looks really nice. Awesome. - -20 -00:08:47,100 --> 00:08:56,010 -Wes Bos: I also have in the past got flavored salts, which is kind of fun. So I think you could just find the mat. It's called winners here in Canada, what's it called in the States? - -21 -00:08:56,010 --> 00:08:57,240 -Scott Tolinski: I have no idea what that is TJ - -22 -00:08:57,240 --> 00:09:00,650 -Wes Bos: Maxx one of those like home goods stores. - -23 -00:09:01,020 --> 00:09:21,650 -Scott Tolinski: We have a we have something that we call the savory spice store here in Colorado. And there's a couple of other locations. That's where I actually sent you your blends from last. Oh, I love those. Yeah, everything you could possibly imagine. So if you want like a lot of interesting flavor, things like that, check out the savory spice shop. - -24 -00:09:21,690 --> 00:09:33,840 -Wes Bos: I really like that because you gave me like eight different spice blends and then we get to dry them all. And the funny thing is my cupboard is full of spicy spice blends and I love them but I can never cook with them because my kids and family can't. - -25 -00:09:35,030 --> 00:09:36,330 -Scott Tolinski: Nice. Yeah. - -26 -00:09:36,360 --> 00:10:59,640 -Wes Bos: Other things I really like is just this idea of rain beers. So go to your your local place that sells beer and get somebody a six pack made up of six different craft brews. And then using pipe cleaners and little eyes, you make them into reindeers and then it's called rain beers. That's a fun one if you have like a gift exchange with some friends, where you don't want to spend more than 2025 bucks. You can put together some really, it's really cool because like if you know about craft beer, you can be like, Oh, this is this is curated by me. And these are some really nice, I've always found that to be an awesome gift, which is like a hand selected bunch of craft beers. Now what else we have here beer making kit, you can grab these off Amazon or whatever, where you can, if somebody is interested in making their own beer, you can get like a kit for 2030 bucks and try it out in your basement. Finally, I've got one more here is called the whoo my dry, dry aging bag. So this is something I haven't tried out, but I've been looking at it or I want to learn how to dry aged steak. And if you want to learn how to dry age, a piece of meat you have to get like thermometers and all kinds of stuff to make sure that it works. But these bags is kind of like a cheating way to do it where you can vacuum pack them in these bags and the moisture will leave the bag but nothing can go in. And it seems like a really neat way to take even like a somewhat inexpensive piece of meat. Ideally, you do with a really nice steak and make it sort of age itself. It just in your frigerator - -27 -00:11:00,870 --> 00:11:02,910 -Scott Tolinski: cool. Yeah, that sounds dope. - -28 -00:11:03,030 --> 00:11:26,160 -Wes Bos: Yeah, there's a lot of like little little foodie things that are not all that expensive, but really interesting. But you have to like I'm a foodie. And when people try to buy stuff for me, it's often frustrating because they have no idea what's cool or what's neat. So they don't know what to get me. But if you can take some of these kinds of these, like I am a foodie. And these are the things that Scott and I recommend. If you have a foodie in your life, go grab these for them. - -29 -00:11:26,760 --> 00:11:50,010 -Scott Tolinski: Yeah, okay, let's continue along. Some of these even fit into almost the foodie space. Some of them don't. But the next one we have is experiences. And a lot of times experiences get overlooked when you're thinking about giving a gift. They think some of this stuff is is just an absolutely awesome, awesome gift. And I see you have some some of your knife skills stuff up top here. Yeah, this is an interesting one to me. - -30 -00:11:50,070 --> 00:13:09,510 -Wes Bos: My wife bought this for me, about a year and a half ago, she bought me a class with a local chef and went to their kitchen, she had this beautiful mansion, and we got to go into the mansion. And they had this amazing kitchen. And then they give you a I think an eight inch chef's knife, which is not the best knife. It's like a utility commercial grade knife, but it's good. Like I use it all time, you should make sure you sharpen it properly. They teach you how to sharpen it, how to hone it. And then they have all of these different things that you learn to cut like chicken and hard root vegetables like how do you how do you cut a cabbage without slicing your fingers off? Or how do you hikma how, yeah, exactly like they have all these different types of things. And then they also, once we had diced all this stuff up, she taught us how to like make it into a soup and then how to like figure out what kind of sauces go with the soup. And it was just like, think of my wife paid like 150 bucks for it, you got a knife out of it. And like that was like some of the best skills I have from dealing with knives. There's also a local place that now is starting to do butchering classes, they're a little bit more expensive, because you have to pay for like half a pig or an entire chicken. But I'm looking at doing that as well. Because I think it'd be interesting to learn. If you were to go to a local farm and just buy half a pig. How do you break that down? - -31 -00:13:09,930 --> 00:13:19,560 -Scott Tolinski: As long as I'm not picking out the pig when it's alive? I think I could do that. This is not for your vegetarian or vegan friends. Please don't do that. - -32 -00:13:19,620 --> 00:13:20,610 -Wes Bos: Don't Yeah, - -33 -00:13:20,700 --> 00:14:02,280 -Scott Tolinski: that was a mistake. That would be a mistake. We shouldn't have to say that. The next is a cooking classes. I actually one of the best retreats I ever did for the one of the agencies I worked at, it was the most fun, we went to this house on a lake and we hired a chef and that chef came in and gave us private cooking classes similar to your knife skills classes, or whatever, we made a three course meal and everything we made was excellent. And it opened my eyes to some different ingredients and different techniques than we had used before. They were making sort of interesting things that I wouldn't have thought of personally, and definitely expand your horizons and give you a little bit more of a foundation in case you've just been sort of winging it. Like I have for the most part. - -34 -00:14:02,700 --> 00:14:14,070 -Wes Bos: I've even heard people go to Thailand for like a couple weeks and you you like live at this resort and someone teaches you how to how to cook there. I think that would be kind of interesting to do it. So I want my life. - -35 -00:14:14,100 --> 00:14:17,490 -Scott Tolinski: Yeah, cuz we we make a lot of Thai food at our house. So - -36 -00:14:17,550 --> 00:15:03,240 -Wes Bos: that would be sweet. Oh man. I remember when I was in first in university, like I grew up in like a super white suburb. And I had learned I moved to Toronto and learned about Pad Thai. And my just like blew my mind. And now I look back at them like Oh, that's so cringy what I was doing. Pad Thai. What else float tank, a couple floats in a float tank. So this is something I've been wanting to try for a long time where you you go in the sensory deprivation tanks that you float in salt, and I've just never done it because I've never actually actively gone out and paid the money to try it. But if someone were to give me a gift, that's like three free floats or something like that, I would for sure really enjoy that. So if that's the kind of person that you're trying to For I would, I would definitely look up local float tanks. - -37 -00:15:03,690 --> 00:18:17,010 -Scott Tolinski: Yeah. And those seem to be a little bit everywhere in major cities now. So definitely something I'd be interested in trying as well, especially that one's good for the stressed out dev in your life, because things will probably be a nice little meditation space. Another good thing for the stressed out Devin your life would be to get a massage. Now, I actually am a huge fan of getting massages, I've actually been getting professional massages for a long time, just because breaking has like destroyed my body in so many ways. It was actually great. When I used to dance for the Detroit Pistons, we had access to their professional massage therapist. So we could like go to the palace of Auburn Hills anytime we wanted to and just get a massage via like the guy who massages the players. So I'm a huge for this, this is really great for really just anyone who's stressed out or maybe they have bad posture, or maybe they could just again, this is maybe one, you'll want to make sure that they're comfortable with a massage too. Not everyone's comfortable with it, that I personally feel like this is one of the most recharging experiences you can have. So a good massage will go a long ways. And I think this is a great gift here. Another great gift would be potentially, for that person who's trying to figure out where to store their data is a content full, I guess you'd call it a subscription, a content full account. Now content fall is a great way that you can manage all of your data. And in fact, it works like sort of the back end of any sort of CMS, right? It's beyond a headless CMS, it gives you a ton of flexibility, and a ton of reliability. And everything that you need to really build excellent front end content without having to worry too much about the back end of your site, I actually used content fall in one of my tutorial series. And I was really impressed with in general, just how easy it was to not only just to get set up and get started, but to just use it and not even have to like, I don't think I even consulted the documentation more than a couple times because everything felt very intuitive. So me personally, I really, really like using content fall and would easily reach for it again in a heartbeat. So some of the cool things about content fold is that they give you access to different environments, sort of Production Development sort of thing. So you can easily mess around in development without having to worry too much about your production flow. There's also a graph qL API coming very soon, which is going to be awesome. So far, I've been using sort of content flow plugins and things like that to get the data in. So I'm psyched that there's going to be an actual graph qL API coming soon. It's currently in alpha, and might be in beta by the time you're hearing this. But again, something to keep your ears open for sounds really, really cool. So if you want to check out content, I'll head on over to content fold that com forward slash syntax. And if you sign up, you'll get a free pair of content full socks and both Wes and I were rockin our content sucks over at the jam stack calm So these things are really super cool. So head on over to content vault comm forward slash syntax and get your free pair of socks while you're checking out content vault. So thank you so much for kinda fall for sponsoring. - -38 -00:18:17,040 --> 00:18:22,260 -Wes Bos: So Scott's got a couple subscriptions here and then I've got a couple at the end. So why don't you just rattle through some of the ones you have here? - -39 -00:18:22,530 --> 00:20:34,020 -Scott Tolinski: Yeah, absolutely. I've been given a headspace subscription before and this was an actually a great gift. Add spaces. Again, another one for the stressed out or maybe overly anxious person or Devitt Dev, or pretty much literally anyone, any. Anyone who's getting stuff done could benefit from any sort of meditation practice. And meditation is one of those things that's tough to keep yourself to do it. But if you can have an app with a beautiful interface, let you know exactly what to do when to do it. Listen to this thing and just follow the instructions. It makes it super easy. So headspace is a great one. Next is a Spotify subscription. Everyone loves listening to music. I think headspace is owned by Spotify. Now, I think you can I actually don't know if that's true. But I think you can bundle those subscriptions. So if you're looking to do a headspace and a Spotify, I think you can do those at one price. There's HBO Go, you know who doesn't love hbos content is just always top notch. HBO Go is easy way to sort of just watch it on your phone, your TV or whatever. Courtney and I we actually have all of our TV through YouTube TV and we've been big fans so if you are looking for someone who maybe wants to try something new there TV, YouTube TV is a good good platform. I've been very impressed. Me undies is a good one too. We both been subscribing to me undies for a little while. They don't sponsor this podcast like they do many other podcasts but the underwear is great. It's awesome quality. We both love it. We both have stayed subscribed. So Mandy's this has been a really good subscription for both of us and it could be good for you next is for that high performer and your life that person who's always trying to learn stuff. Memorize is a really excellent learning platform. You could think of it as a Duolingo, or learning anything, you can learn anything. You can learn command line syntax via memorize. And it has this really great algorithm that knows when to give you what timing and stuff like that so that you don't forget things. For the security focused person, or maybe the person who needs to be more security focused, you can get them a subscription to LastPass. Yeah, offers like really nice sharing features, it generates passwords and stores them in a vault, I have an account for this. And they're actually going to be upgrading it so that Courtney and I can start sharing passwords on and stuff like that I - -40 -00:20:34,020 --> 00:21:11,730 -Wes Bos: do this all the time. This is something that you should maybe just do for your family who's not security focused, because people just use the same password over and over again, on all their accounts. They write them down in a book or something like that, or on a post it note on their monitor. So if you are there at Christmas, giving them this, it's a great time to set them up and show them how it works. Especially now that the iPhone, Touch ID and face ID will autofill it. Yeah. Which is amazing. So I think it's a good time to people use to say when you're home at Christmas, make sure you upgrade your parents browser. When you're now in your in your home at Christmas, make sure you sign them up for like a password manager. - -41 -00:21:12,180 --> 00:21:13,350 -Unknown: Nice. Yeah, that's a good one. I - -42 -00:21:13,350 --> 00:22:46,590 -Wes Bos: also like to get people magazines. I know it's a bit of an older thing. But I still like getting magazines. We get my kids get the National Geographic Kids ones, I get my wife a couple homestyle ones and fashion ones that she gets in there usually discounted around Christmas. So might as well sign up, then there's all these different like crates that you can buy for people. Yeah, great. Yeah. I don't subscribe to any of them. But one of the ones that I've been watching for a while and I actually maybe seven, eight years ago, I got asked to build the site for them. It never worked out. But the mantry has these these boxes that are full of food, whether it's like hot sauce, or barbecue sauce, or beef jerky or neat chocolate or anything like that. So for the kind of foodie in your life, check out mantry it comes in this like thing kick. So it comes in this like but like this actual box. When I met them, they were reusing old oyster boxes to ship them out around. I don't think they're doing that anymore now that the scale has been that much. And then there's these kits crates we've been looking at for our kids for Christmas, right now. It's from Kiwi co at Kiwi co.com. And they are stem focused, meaning that science technology, engineering and math and I go to a stem club with my oldest daughter, once a week we go to the library and we we learned about something like gravity or or wind power or electricity, or we just learned about all kinds of different sounds or how flowers work. We plant and we watch the flower grow. And I think that this box would be a nice little addition to that because it does all kinds of like little things that you can make as well as learning something about science, technology, engineering and math along the way. - -43 -00:22:46,950 --> 00:22:49,980 -Scott Tolinski: Yeah, that's great. I love that. That's really super cool. - -44 -00:22:50,010 --> 00:23:02,160 -Wes Bos: Yeah, there's a whole bunch of different kind of crates for different ages. And it looks like it starts to get really fun at about age five. So even though my daughter's almost, it's just three and a half. I think we might just go for the five year old one. - -45 -00:23:02,160 --> 00:23:02,970 -Unknown: Yeah, get - -46 -00:23:02,970 --> 00:23:03,900 -Wes Bos: to build stuff. - -47 -00:23:04,020 --> 00:23:50,040 -Scott Tolinski: Yeah, definitely. Next, we're gonna get into some books, or maybe audiobooks. I know, I'm an audiobook fan moreso than a book fan, just because it's easier for me. But what are some of these books, the first one I had in here was bad blood. Now Bad Blood was one of my sick pics a couple weeks ago, or maybe last week, it's a book about this Silicon Valley startup that was basically just faking everything. It was like, it's just a really brilliant story. And they became just a billion dollar company and stuff like that. It's absolutely absurd. The amount of people who this company was able to sort of pull one over on everybody. But this book to me was gripping, I thought it was really super interesting. And for those of you who are in the startup scene, I think it's sort of a must read. My - -48 -00:23:50,040 --> 00:25:35,310 -Wes Bos: next one is only in book format. And this is actually one of the very few books I ever have read. It's called beat the bank. And this is only for Canadians. But as I'm getting older, I'm starting to think about like, what do you do with all of your retirement savings? And how do you best invest them. And there's this really, even if you start to look around, you're starting to see a lot of these like robo advisors, the robo advisor will manage the money for you, instead of you having to go to the bank and have them take it. And the whole idea behind these Robo investors is using ETFs or index funds and instead of using a mutual fund, which has a what's a high m er which is a management expense ratio, and this beat the bank book explains it really really clearly as to like why you should probably go this way even if you're not young, and they explain that there's like this like thing called a T rex score, which is even if your your mutual fund is taking like a 1% expense fee to to manage your money that 1% compounded over 20 years. 30 years before you retire could end up with you losing millions of dollars or or depends on how much you have invested but it could be as much as like 20 5% of your actual income at the end of the day. So it's a really good thing to be aware of, especially if you are young and thinking about saving for retirement because there's lots of stories of people who just trust their local banker, and they take 1% of your money every single year, year over year. And it's not just that money. It's the the possible interest that could have been earned on the money that they took over 2030 years. So I really enjoyed that. Also, there's a this is a bit off topic, but there's a podcast called the Canadian couch potato, which is kind of talks about this as well. A lot more interesting. - -49 -00:25:35,520 --> 00:25:36,540 -Scott Tolinski: Yeah. Cool. - -50 -00:25:36,570 --> 00:25:48,090 -Wes Bos: Yeah. I don't know what the the equivalent Sorry, I took it off. I don't know what the interval is for Americans. I know Tony Robbins has one on this kind of the same ideas of index fund. So maybe you could check that one out. - -51 -00:25:48,450 --> 00:26:54,600 -Scott Tolinski: Yeah, I was gonna say I needed a the American. The red, white and blue version of the next one I have is honestly my favorite book that I've read this year, which is American kingpin, the epic hunt for a criminal mastermind or for the criminal mastermind behind the Silk Road. If you've heard this sort of the like bare bones story of the Silk Road, that you know, it's a very interesting story. But this book goes so deep. And for those of you who like the dark net diaries, you're going to absolutely love this. Because this is like a long, long, long version of a dark net diaries podcast, it is so dang good. The author goes in depth. The whole story weaves all of the stories of every single person involved in the entire time. It paints a really good picture of the Dread Pirate Roberts life in general, it sort of sets everything up really well. This isn't just like a retelling of the situation. This thing is crafted like a true story. So American kingpin is easily my favorite book the year so I highly recommend this - -52 -00:26:54,600 --> 00:27:22,290 -Wes Bos: one. The next one is I'm sick pick this in the past Rich Dad, Poor Dad sounds super cheesy. But again, if you are like, this one is more about how am I going to raise my kids to think about money and things like that, how to how should they be saving and whatnot, I really enjoyed this one. Even if you don't have kids, if you're just thinking about how to how to save your own money. I know most people have probably read this one already. But if you haven't checked it, pick it up for that person, it's kind of it might be a bit of a passive aggressive gift to give somebody. - -53 -00:27:23,370 --> 00:27:24,660 -Scott Tolinski: Hey, you're bad with money. - -54 -00:27:24,689 --> 00:27:37,470 -Wes Bos: You're bad with money. You should read this, but maybe tread lightly on that one. But if it is somebody who like I for sure would not feel offended if someone were to give me a finance book and be like, this is awesome. I really enjoyed this. I think you will too. - -55 -00:27:37,890 --> 00:27:42,540 -Scott Tolinski: Yeah. And it's a classic to me as like a gazillion reviews and it's been around forever. I've - -56 -00:27:42,540 --> 00:27:49,410 -Wes Bos: been around forever. And I what I really like about it is that they don't focus on tactics. It's more of a mindset, which makes it timeless. - -57 -00:27:49,709 --> 00:27:57,690 -Scott Tolinski: It's a state of mind. This next book really opened my eyes to how many books are named kingpin. And just how many of those books are erotic novels. - -58 -00:27:58,830 --> 00:28:00,000 -Wes Bos: Apparently like God, - -59 -00:28:00,570 --> 00:28:51,810 -Scott Tolinski: yeah, there's apparently a huge market for drug kingpin related erotic novels. This is not one of those. But if you look for this on Audible, most of the things that come up will be like my love to the kingpin and stuff like I don't know, it's outrageous, but this book is called kingpin. So it's another kingpin title, how one hacker took over the billion dollar cybercrime, underground. And again, for those of you who like darknet diaries, I know a lot of people did This thing is awesome. Hacking stories, apparently is a subclass of nonfiction books that I didn't know that was my favorite thing in the whole world. So this book is great. Again, if you're interested in the hacking culture, or hackers, or the history of some of this stuff that how it went down. This book again, is narrated really well, is told as a story really well. And it's a very interesting book. - -60 -00:28:52,080 --> 00:29:42,090 -Wes Bos: I got three more here, I'll rattle through them real quickly. Anything you want is by Derek Severs. He's the guy behind that, quote, if it's not a hell, yes, it's a no. So if you have someone in your life who wants to get into business and run their own show, and not build up a huge thing, that was a really good book. essentialism is a awesome book for anyone looking to pare down their life, maybe a bit too much going on. And then the E myth revisited. So somebody who is looking to start a business or who has recently started a business and needs to divide their attention between being the the worker, which is like someone who's making cupcakes and the manager, which is someone who's actually trying to run the business, I would probably put the E myth revisited at top three books I read this year, so I would highly recommend that one. Nice, I'm gonna have to get that one. - -61 -00:29:42,090 --> 00:30:41,640 -Scott Tolinski: Yeah. Next, we're gonna move on to the next topic, which is something a little bit more tangible. We're going to be talking about some clothes. And again, we're both dudes. So unfortunately, I think a lot of these are going to be dudes close. So I apologize. I'm gonna try to keep it maybe a little bit less like that. I personally, I know you have a lot of jeans on here. If I'm buying jeans, I usually I have a hard time going straight raw denim because I like to move around so much in raw denim. Yeah, and always like the most flexible. I remember I bought my first pair of raw denim jeans and I went to a football game and I like couldn't walk up the steps. It was almost like it was like hilarious episode of some sitcom or something. I was like, I can't even lift my feet to walk up the steps. So I really like these unique low I don't know if they're, they're technically raw denim, but they have the raw denim look, you know, you flip up the little the ends of them, they have that little look, but they have elastic in them. So that for me is like a big deal because I need to be able to to be a little bit more agile. So if you're like it feel like need me and need to like move around a little bit more. Check out unique clothes for their elastic jeans. - -62 -00:30:41,670 --> 00:31:04,470 -Wes Bos: Awesome. I should say on the this stuff is for dudes. My wife is a actually a fashion blogger. And she's putting together a killer Gift Guide right now. So if you are a woman and would like to find out what are some some good gifts, I'll put a link to that in the show notes as well. Or if you are a dude looking to buy a woman something that would be a good, good place to start as well. - -63 -00:31:04,860 --> 00:31:24,360 -Scott Tolinski: Yeah, a coordinate. Thanks. Thanks to your wife, Kate. My wife, Courtney has been just buying a lot of stuff. She loves everything that's out there. Yeah, no, no worries. It's great. It's all nice stuff. That's the thing. It's all it's all nice stuff. So yeah, I've been loving a lot of her suggestions. - -64 -00:31:24,390 --> 00:31:40,560 -Wes Bos: She really focuses on like well made reputably made not in a sweatshop. So it's you're not going to find like h&m and stuff like that. And here, it's unfortunately going to be expensive. But it's going to be something where you only have six dresses or something like that. And you have them for years and years. - -65 -00:31:40,890 --> 00:31:42,240 -Scott Tolinski: Yeah, that's the way to do it anyways, yeah, - -66 -00:31:42,240 --> 00:33:52,260 -Wes Bos: a couple things I've got here. So talk about raw denim, I'm huge into jeans, I'm huge into raw denim. And when I go out and buy a new pair, I'm either buying a pair of naked and famous, which they are made in Canada, some of the best jeans you can buy. They've got a bunch of different cuts. I personally wear the skinny guy, but if you are a bit wider calves, then you could probably go for the weird guy. Both of them have a really good, they don't look that great immediately. And they don't feel that great immediately, as Scott said. But the idea the idea with raw denim is that you you wear them you never wash them. You wear them every day. And then about a week and a half in they become like a like they mold to your body. And they're like the most comfortable jeans and you you also get some really nice fade lines on it. So negative famous is my favorite pair of jeans. I also will often buy nudie jeans. nudie jeans have this really bright orange stitching and this really elaborate detail on the back pocket, which I really like. And naked and famous have none but the whole idea of naked and famous is that they're playing on nudie because nudie is nudie jeans. And they have all kinds of like embellishments on the pockets. Whereas naked and famous is just really good Japanese raw denim made in Canada. And then the folks behind naked a famous the designer, he also has the exact every single pair of naked and famous jeans, like all the different like the the weird guys, skinny guys, super skinny guy, they have a couple different cuts. You can buy the exact pair of jeans, the exact same quality, but made in China, and they're called unbranded, so they're exact same pair of jeans, they're just made in China, and then they are significantly less, I've had a bunch of pair of those. And there's no difference in the actual quality. The only reason I still buy naked and famous is because they always put out these like Chinese New Year or red. They have all kinds of like different like one offs where they'll like though we have a special color into it. And then when they wear the red starts to show through or they'll do like a glow in the dark pair. Those have fun, different kinds of pairs. So that's why I like to buy naked and famous. What else is the custom leather belt? So did you see my tweet or Instagram about my belt - -67 -00:33:52,260 --> 00:33:56,280 -Unknown: that I got? Yeah, the JavaScript heads a heads and bass on there. So - -68 -00:33:56,280 --> 00:34:57,710 -Wes Bos: there's this website. I love having a nice thick leather belt in my jeans. And in the past, I've bought them at yard sales from unfortunately old men who've passed away because these are they're expensive to get like a really nice leather belt. And my current one is starting to die and I thought okay, Where can I buy a nice good quality leather belt? I stumbled upon this website called gavia leather ga v e r e leather dotnet. And they have made in the USA belts that have all these designs flowers to deer to butterflies to trucks to pigs. These are meant for like your deep south Texas trucker to where Yeah, so I ordered one and I got JavaScript stamped on the back. Then it's got fish and bass jumping out of the water and someone's for catching a fish on the pole. And it was 38 bucks for a very good quality leather belt made in the US. So if you have somebody in your life, you can also get them with like your last name stamped on them. You don't have to do something stupid like at JavaScript put on them. - -69 -00:34:58,110 --> 00:35:00,480 -Scott Tolinski: Yeah Office - -70 -00:35:01,380 --> 00:35:02,610 -Wes Bos: What else do you got this more? - -71 -00:35:03,060 --> 00:35:05,880 -Scott Tolinski: I don't you you sort of rock in the clothing section. All - -72 -00:35:05,880 --> 00:36:20,219 -Wes Bos: right, well keep going then the north face has a really nice windbreaker called the fan rack and this is just a really nice pullover windbreaker the whole thing goes into the front pouch and then you can clip it around your waist if you want. It comes with like clips so you can put it on I have a camouflage one that's the one I was wearing when I met Scott but they have them in less Gowdy designs as well. hoodies I'm a big hoodie fan myself. They Adidas has a black on black and Md crewneck if you are big into the black on black, they make a really nice soft crewneck that has I think it says the one with the three stripes in black across the front I'm a big fan of that. And then champion which champion is a funny brand because champion can be sold gym and sold at Walmart and you can get like a pair of champion sweats for like eight bucks. But champion also is a coming up as a like a streetwear brand right now and they make some really yeah, they make some really nice thick high end hoodies and what I like about them is that they're really heavy. The cuffs on them are extra long. The hoods are nice, the strings are really nice and they're all nicely embroidered. So if you want to give someone like a someone who's like a hoodie connoisseur or grab them a Adidas one or a champion one, - -73 -00:36:20,219 --> 00:36:20,940 -Unknown: nice sneakers - -74 -00:36:20,940 --> 00:36:59,310 -Wes Bos: I know you're super into sneakers. I have bought a few pairs of sneakers this year and my favorite so far have been the new Air Max 270s these are a new pair of Nike sneakers that came out this year and I bought them in a like a white and green colorway I think I'm gonna get the black ones as well once once these ones start to go but they are a brand new pair of Nikes and they are super comfortable. And they're pretty readily available to you don't like these are not like Yeezys are something where you can't buy them or you have to buy them for $100 on eBay. These are just regular sneakers that anyone can walk into footlocker and buy so big fan of the Air Max 270s Yeah, - -75 -00:36:59,340 --> 00:37:48,690 -Scott Tolinski: I bought some. I think they're done trip Jordans, they're calling them just done. And I love these things but these shoes aren't for everyone. They're sort of for the Fresh Prince kind of sewer and your life the person who likes that sort of style. They look straight at the 90 so I've been a big fan of these kind of shoes again. The Jordan ones are obviously my favorite sneakers are hard you got to kind of know the person's sensibilities. One of my best friends gave me a pair of Orlando Magic Jordan ones once for Christmas. And like I don't even love I don't even like I should say the Orlando Magic but he shoes were like absolutely tailored for my taste. So don't buy this for someone who you don't know exactly what they're going to love. But I like those kind of shoes myself and you can always go big with some some nice shoes also - -76 -00:37:48,690 --> 00:38:17,310 -Wes Bos: pair Ray Ban mirrored Ray Bans I'm really into right now the wayfarer is the kind I wear but you can buy mirrored ones and the aviators if that's your your style, nice underwear. I know Scott sick pick me undies earlier but I also like getting the Under Armour or Reebok boxer jocks, which are super comfortable. And I just want to give a shout out for Travis who runs developer.io d v LPR. He's got a bunch of T shirts and hats and stuff that are developer related. So check those out. - -77 -00:38:17,730 --> 00:38:20,280 -Scott Tolinski: Yeah, straight out of Colorado. - -78 -00:38:20,310 --> 00:38:24,540 -Wes Bos: Oh, really? Wow, Scott, that sure sounds fresh. Hey, - -79 -00:38:24,540 --> 00:38:30,710 -Scott Tolinski: was it Do you know it also is also fresh, fresh, fresh, yes, fresh books is fresh as well. - -80 -00:38:30,750 --> 00:39:05,400 -Wes Bos: Fresh books is the cloud accounting software you need. This should maybe be something that you can get somebody. I'm not sure I would really like this as a Christmas Christmas gift but it's something that you can get. So Freshbooks does cloud accounting software if you are trying to run a small business or you're just trying to build a couple people here and there if you need to keep track of all of your invoices, all of your expenses, get paid online, get paid on time, send reminder emails all that good stuff around managing your finances as a business you want to check out freshbooks.com force a syntax for a 30 day unrestricted free trial make sure you syntax in the How did you hear about us section - -81 -00:39:05,790 --> 00:39:33,710 -Scott Tolinski: sick. Alright, so the next section is going to be for those of you who love gadgets. I know we all love gadgets here, one of my first ones is going to be taking a look at mechanical keyboards who doesn't love a nice keyboard. I personally use the code keyboard. And although I've been looking at the air go docs, which is like a split it's got two hands like a two hand thing with like extra keys that you can program to every one It looks like - -82 -00:39:33,750 --> 00:40:11,460 -Wes Bos: I also just got a mechanical keyboard shout out to Adam who sent it to me because I have always been of the thing that I say these keyboards are too loud for me to do tutorials with and but although I would love to be able to program them myself. So I got the control keyboard. I haven't spent too much time setting it up yet, but that's something I'm gonna hopefully do over the holidays make some pretty sweet keyboard combinations because there's only so far you can go with your custom keyboard shortcuts but if you have access to access Like firmware on the keyboard, which is what all of these mechanical keyboards do, you can set up some pretty sweet keyboard shortcuts. And I know they're mostly for gaming. But I think developers can really take advantage of these as well. - -83 -00:40:11,820 --> 00:40:12,650 -Unknown: Nice, cool. - -84 -00:40:12,659 --> 00:42:57,780 -Wes Bos: So, a couple other there's a like the W A, S, D, the Ergo docks, there's a couple other keyboards that we have on here, we won't list them all but just take a look at which ones that you have. Next one we have is a wireless charger. I've got two of these now and I can't believe how handy they are. So I got one of them for free in the jam stack swag bag, which is amazing that a conference swag will give you a wireless charger. And then also I got the sovereign one which I sic picked a couple weeks ago, they sent me this one for free. And I tried it out for a month before I said anything about it. And it is awesome. It's working rock solid. The only thing I don't like about it is that the light is super, super bright. So you can't put it in your you can't put it in your bedroom because it'll just light up the entire bedroom. But I have it right here in front of me. And what I do when I sit down at my computer, I just popped my phone on it. And it just charged my phone. Now I'm I'm wishing that my air pods and my Bose headphones also had wireless charging, because I just want to like lay them on this pad when I leave for the day and come back in the morning and they be charged. So yeah, that's a huge, huge one. Actually, while I'm on that as well. Anything USBC is super handy for developers. Just because you need a little USB C adapter USB C memory stick, I don't know USB, AC anything because people don't have anything USB yet. And they're likely having one of these new laptops that are USBC. The Koumas car mount I've picked this before in the past, it's a car mount that is magnetized and it goes into your CD player, which is nobody uses a CD player anymore in their car. So it works great because I've tried all of those event matte ones, and they just don't work in my car just because the way that the events work. And I've been super happy with these magnet car mounts, you do have to put a huge piece of steel on the back of your phone, which I thought would be a problem because that would then interfere with the wireless charging. But if you put the piece of steel at the very bottom of your phone, it still works good because the magnet on this thing is super tough. So happy about that portable batteries, I travel a lot. And I find that I somebody once gave me an anchor portable battery as a speaking gift. And that thing I use all the time because it's small enough that I can just throw it in my bag and but it's long enough to get me like one or two charges of my phone. And I always have that thing charged ready to rock. Next we have a extra long braided cables. So whether you're an Android or iPhone user, you can find these all over Amazon just get these like what six foot long, eight foot long, braided cable, they're extra tough, and we use them personally underneath our couch. So that whenever you need to charge your phone, when you're sitting on the couch, you can just pull this this thing out, and it makes sure that it reaches all the way, - -85 -00:42:58,320 --> 00:42:58,829 -Scott Tolinski: say anchor - -86 -00:42:58,829 --> 00:44:01,829 -Wes Bos: powered USB hub. I really like this thing, it's a little box that plugs in via two prongs into your wall. And then it just gives you I think, five 710. They have all kinds of different combinations of them extra USB ports. And this is handy because I have to charge at the church, my phone, I have all of my other devices, I have to charge an iPad at the church by headphones. So there's all these different things that I want to charge. And then we also have another one in our living room. Because if there's two or three people sitting on the couch, or we have a baby monitor, and we have a phone, you need to be able to charge multiple things at once you just it's just great to have tons of extra little spots. So instead of carrying around like seven, eight of these nubs, or just switching your cables by one of these, and they also have the option to I think it's like IQ charging, I'm not sure if that's the same thing as fast charge. The way basically the way it works is it will just keep increasing the amount of power that it sends to your phone until your phone says no more. And that used to be the hack where you charge your phone with an iPad charger. This thing will just charge it as fast as the device can possibly take it. - -87 -00:44:02,070 --> 00:44:59,550 -Scott Tolinski: Nice. Cool. So I have one here. I shouldn't mention that. They're sending me one of these. But this didn't encourage its place on the list or anything. I haven't gotten it yet. So I don't know how cool it is. But it seems really cool. This is this Tello drone, it has a camera in it. The coolest thing about it is it's based on like some sort of like coding platform uses scratch I believe, which is like a visual coding interface. So not only is it a drone with a camera, but it's a drone that you can at least do some sort of programming with. And since it's in Scratch, it's not like a Python or something like that. Chances are if you have kids or people who are interested in learning how to develop things or even work in basic programming concepts, I really think that something like scratch is a great way to introduce some of those concepts conditionals that sort of things. So I'm really looking forward to for mine to arrive so hopefully this thing is really cool, but it's the this Tello drone with camera and everything like that really super cool thing - -88 -00:44:59,550 --> 00:45:16,920 -Wes Bos: is like 80 bucks, right? It's pretty, like $1,000 drone that's going to be able like it only flies for like, like 10 or 15 minutes or something like that 720 p camera. And so it's not like this like high end thing that you're going to be scared. It's kind of a fun thing that you can play with it, I guess it's called a toy drone. - -89 -00:45:17,280 --> 00:45:18,210 -Scott Tolinski: Yeah, it looks like fun. Next - -90 -00:45:18,210 --> 00:46:35,760 -Wes Bos: up Wi Fi hotspot, this doesn't really apply to Americans, because they know you can get really good roaming. But in Canada, if you go to the states or any other country, it's so expensive. So I have a external Wi Fi hotspot called the skyroam. Solis and I've been loving it, I have like a, I think you just pay by the gig, which is great, because every time you run out of it, you just buy another gig. And it's so much cheaper than using the roaming on actual phone. Another one that I have is a breakaway USBC cable. So I picked these A long time ago, they're still working pretty well. I don't use it to power my main laptop all that often because it's just sitting on my desk and I power that VMI USB hub. But these breakaway USB C cables are really cool. They come with these little nubs that you put into your USB C or USB micro ends, I also have a one on my headphones, and then you have a magnet charge and it will just click into place like the old magsafe would and they're pretty cool. I've been a big fan of of them. The only thing you need to know about these is that if you want one for powering your laptop, you have to make sure that is the special expensive kind for powering your laptop USBC that handles 87 watts, any USB C cable won't work because of the power demands that your laptop actually requires - -91 -00:46:36,030 --> 00:46:56,760 -Scott Tolinski: word. So next you had a fun one, this will this is not really that fun. But a high end mini screwdriver said this is one of those ones that I think I personally need. Because there's so many times where I'm like, I wish I had the right screwdriver for this or I have a crappy one that came with my glasses or something and it hurts to hold. So I'm interested to see which ones you're going to recommend here. - -92 -00:46:56,790 --> 00:47:55,170 -Wes Bos: Yeah, so there's this one called the max craft seven and one, which I have, it's pretty handy because the bits go inside the screwdriver and just can carry it around. And then I have another one I don't know what the name is. But that one has, I think about 40 different bits in it. And they have all of the Pentalobe and all of the torques. And if you are trying to open any Apple product, you need either Pentalobe or torques. And you need the whole gamut of different sizes. So I've definitely strip bolts before or I've stripped screws before because of having the wrong screwdriver. And it was ever since getting a really nice set that has like 60 or so or 30 different ones in it, it's been so much better. I fix it has a 64 bit set for about 30 bucks. So I think that if you're looking for like a 25 $30 gift, that would be an amazing gift because then you know you'll always have the proper screwdriver. And you're not like just digging through your screwdriver box looking for the the proper bit. Nice, let's just go to smart home. Okay, - -93 -00:47:55,560 --> 00:48:55,920 -Scott Tolinski: next is sort of in the same category but a little bit more focused, which is going to be smart home stuff. Now you and I are both pretty interested, we still need to do our whole smartphone episode or something like that. But one of my favorite things in my smart home, if you could even call my house, that would be my Google Home, which is like really sort of the basic of anything that you need to just some sort of smart speaker, whatever to talk, we have these sprinkled throughout our house, we have one in our gym, one of the things I really love about the Google Home is that you can set up in groups. So I have a group of them in the upstairs. And I can Chromecast a podcast to all of my upstairs Google homes. And then I can walk around the house all day and never have to wear headphones. I can listen to this one podcast in every single room. And no matter which room I'm in there it is that music or that music that podcast, whatever is going to be there. So I love the Google Home. It is cheap, cheap, cheap for the Mini. I only have the mini ones. And I love it. So big fan. - -94 -00:48:55,949 --> 00:49:48,360 -Wes Bos: I have the full Google Home. And it's amazing. It's I can't believe it's like one of those things along with air pods that it's just like, wow, technology is getting really, really good. It's super cheap. All of my family, even my Oprah who doesn't even have like, he's not even on his computer all that much. He has a Google Home in his place. And one of the cool things is if you get a Spotify family subscription, you get I think five spots for about 15 or 20 bucks a month. And that kind of needs to go along because often we gave him this Google Home and he's like, okay, I don't even have like he doesn't even have a phone like he just has like a regular like, so he's like Hi, I can't set it up. And I can't use it because there's nothing so we had to go set it up with my dad's phone. Then I gave him one of the spots in our Spotify family subscription. And he uses it all the time to check the weather and to play classical music. on - -95 -00:49:48,540 --> 00:49:54,659 -Scott Tolinski: Spotify, we always tell our us to play the alphabet song for Landon, and he loves it. So I think that's a great, great thing to get. - -96 -00:49:54,690 --> 00:50:01,560 -Wes Bos: We have our Spotify hooked up to my own Spotify. So my Spotify recommendations are awesome. goofed up from Yeah, - -97 -00:50:01,590 --> 00:50:05,159 -Scott Tolinski: likewise, alphabet song might like the letter S song. - -98 -00:50:06,030 --> 00:51:14,699 -Wes Bos: Smart Home doorbells are really handy we have the ring doorbell, I have a ring doorbell and a ring floodlight. Both of those were sent to me by ring for free. But I also have heard amazing things about the nest doorbell as well, which is from Google, I just love having them as like a security camera because you could do whatever is going on. I had somebody steal a bike the other day, and I had really crisp flooded footage of the person. Oh, wow. coming in and and see on the bike. So I was able to get that to the police, which is pretty cool. What else eco Be smart thermostat. We also really like that sometimes we leave the house and forget to turn it turn it down. Or if we want to crank the heat right before we come home. Or if you're just like laying in bed and it's too hot, you just whip out your phone and scroll it down. I really liked the Eco B because you can buy extra sensors, which will will tell if you're home or not. So we have a sensor on each floor. And then when someone walks by it, it just sends a little signal down to you. And the sensors just run off a little coin cell and they're good for about a year. And it's good because it will automatically turn down the furnace if nobody's home. So a big fan of that. Yeah, I - -99 -00:51:14,699 --> 00:51:28,530 -Scott Tolinski: also have an eco B and I'm a huge fan. I like that you can it's a little bit more programmable than maybe some of the other ones. So for that maybe techie or person in your life, the Eco B is a pretty cool little option as excited as one can get about a thermostat. - -100 -00:51:29,909 --> 00:52:17,130 -Wes Bos: A little hack that we use it for is we're wondering if my sister in law was home. And because we hadn't heard from her, but I have if this and that to log every time someone walks by the Eco B sensor on the second floor. So I pulled up the spreadsheet and I was like yeah, she's home. She's walked past the sensor at like 870 4pm Nice, nice, nice WeMo plugs. These are kind of like a nice gateway drug to smart home. Because you can just take your existing lamps and plug them into these WeMo plugs and they will you can say okay, Google turn off the lights are okay, we'll turn on the humidifier or whatever. And they'll just switch power back and forth to these things. So they're they're pretty cheap. I think you can get them for 1520 bucks, get make any lamp smart. - -101 -00:52:17,520 --> 00:52:26,550 -Scott Tolinski: Nice. I really wish our house doesn't have the wiring for any smart anything really in terms of the the dimmers or any of that stuff. And it drives me nuts. Oh, yeah, - -102 -00:52:26,550 --> 00:54:43,079 -Wes Bos: we recently got our entire main floor redone. And I had them put in, they have LEDs throughout the entire house. So you can't just go and buy it like people always recommend these Li FX Li FX bulbs, but you can't just go buy like what 14 or 20 bulbs to put in the year led spotlights. So what we ended up doing is getting these levithan smart dimmers which we have two different sets of spotlights and we hooked them up to our Google Home. And that's kind of my rule with home stuff is that they have to be dumb. Like they just work as normal lights which work without the Google Yeah. And then you can also use the Google Home voice and timers and all that stuff. And the kind of cool thing about the smart dimmers is that if you've ever had a dimmer that's a three way switch. You'll know that if you turn it on on the one switch and it's dimmed at the other one Oh yeah, it's like a sucker. But these these smart dimmers, we had a run an extra thing. I don't understand how electricity works, but they sync dimness. So you can dim from either one or user voice which we use our voice all the time. So nice. Yeah. And then finally the sawn off $5 Wi Fi switch. So if you look online and look for the sawn off Wi Fi switch, you'll find that you can get these little micro Wi Fi microcontrollers that are about five bucks each and then the way that it works is the open it up you have to take like an extension cord and splice it and then take all the obviously the insulation the wiring off and you have to wire this thing yourself and then basically you can go to the dollar store and get a $2 extension cord and you take this $5 sawn off switch and then you make a kind of like a smart plug and I went and bought one I bought one for myself, I bought one for my dad and we wired them up and they've been working great for over a year The only thing you need to know is if it's a grounded appliance, you need to run your own ground pass this switch. So I just use lamps so I'm not using that myself. And then also like you have to be aware that like these are if you're wiring your own things, you have to be aware of the liability that comes along with that but they are pretty popular in the DIY crowd for adding Wi Fi to absolutely anything so pretty, pretty neat little thing that I use there. Second last section we have here is grooming and wellness is there some Scott Lowe has got some nice like makeup and stuff that he puts on so let's see what here we have. - -103 -00:54:43,440 --> 00:55:13,619 -Scott Tolinski: Oh yeah. Oh, he's gonna have some good makeup. I one of the things that I really like I know developers, sometimes we can get a little bit maybe you're you work these long, stressful hours. It's nice to have good fingernails, which is actually like a sort of a weird thing to say but I bought some of these Japanese clippers that are made by sechi and the Seki edge Grooming Kit they are expensive 60 bucks for clippers yeah I got mine right here West he convinced me - -104 -00:55:13,679 --> 00:55:16,050 -Wes Bos: I'm you lost me the key please convince me. - -105 -00:55:16,530 --> 00:56:02,699 -Scott Tolinski: Yeah so for those of you don't know Japanese finger they take their their clippers very seriously. It's almost like a Hattori Hanzo, blade steel sort of thing situation. And so I've only ever bought, you know normal like Walgreens clippers before these things are heavy duty if like not only are they just very heavy, but it's one of those things that I feel like you almost have to try out. I tried out Japanese clippers before that someone else had and I was totally convinced. But for me these things, they've lasted forever, but they just they feel like nothing else in terms of the the clipping. So again, this is going to be sort of a weird one. But I really love these Japanese clippers and the Seki edge is definitely definitely some some nice hardware - -106 -00:56:02,730 --> 00:56:08,550 -Wes Bos: here. Awesome. That might be a gift I will ask for at some point when I've run out of ideas. - -107 -00:56:10,800 --> 00:56:22,170 -Scott Tolinski: Well, you can get just one of them. I think this they're not usually that expensive like because you can buy one of the individuals in the two pack for $12. Link one of the individuals ones - -108 -00:56:22,199 --> 00:56:27,000 -Wes Bos: it says $60 plus 20 import to Canada. So $80 for a pair of - -109 -00:56:27,030 --> 00:56:32,489 -Scott Tolinski: Yeah, I'm gonna go ahead and remove the one I have on here because that is probably not a great price, but these single ones for 12 bucks. - -110 -00:56:32,940 --> 00:56:33,599 -Unknown: Not too bad. - -111 -00:56:33,599 --> 00:57:26,909 -Scott Tolinski: Yeah, definitely worth it. Also, this is one for anyone who has legal marijuana in their state. I have been using CBD balm for my tailbone injury. It's sort of like a chapstick like thing and I just put it on my tailbone. I've also used the CBD tincture. That's how you say that word is that you say that word? I don't know. Sure. It's like the pure oil, whatever you put a couple drops underneath your your tongue and gives you some really nice sort of what is it anti inflammatory properties that aren't like a Tylenol or an Ibu or something like that. So I was using this again, to heal from my tailbone injury, it does not get you high, there's nothing in it that's going to make you feel any different. It doesn't make you feel any sort of high at all. So if that's what you're worried about, don't worry about it. But I personally really liked especially the balm for my tailbone, but I found this stuff if you have pain or anything like that to be very, very useful. - -112 -00:57:26,940 --> 00:57:56,820 -Wes Bos: Yeah, even in states where it's not legal, I know that you can buy it. It's weird. It's just like CBD is this weird thing where there's no you can buy it with no THC in it. But it's still classified as like as the same as heroin. It just became legal in Canada, medicinal and recreational. And I didn't even know that you have this, but I just I'm trying out the drops for headaches right now. But I've only been at it for a week so far. So I can't conclusively say if it's worked or not, but I'll be sure to I've been trying out for like five, six months. So - -113 -00:57:56,849 --> 00:57:59,280 -Unknown: yeah, a little bit in and I'm a fan. Yeah. Wow. - -114 -00:57:59,280 --> 00:58:01,860 -Wes Bos: That's cool. Well, stay tuned for that. What else you have here. - -115 -00:58:02,250 --> 00:58:20,520 -Scott Tolinski: I have a nice comb. I got a comb that was made out of a old surfboard. And I trust me I love having a comb on her. I like grew up with cheap combs and stuff like that. But having a nice comb for some reason feels really nice. I don't know what it is to say about it. Other than just a nice comb is is a great gift. - -116 -00:58:20,550 --> 00:58:54,300 -Wes Bos: I think my only grooming and wellness since I don't take care of myself is just Burt's Bees lip balm. I'm a big fan of it. I keep it in my pocket all the time, which is people were joking but I had a little I have a little ring in the back of my pocket because it wears ring in and people are like is that so that is that a can of dip or a condom or whatever, but it's just lip balm. I like it in the tin. But you can't buy the tin in US or Canada anymore. But people sent me a link so you can still buy it in UK and Germany. So big fan of that one. That's a nice little stocking stuffers, just a couple bucks. And it's just like the nicest lip balm you - -117 -00:58:54,300 --> 00:59:24,150 -Scott Tolinski: can buy. Nice, a nice guy and do some high end stuff. Some big big, big big money stuff. Some of this is bigger money than others so we can kick it off with the air pods which actually have some myself now finally, and yeah, I get a lot of what the hype is. They are easy. They are nice. They feel good in your ears. They sound nice. The battery sucks. I'm gonna just go straight. Battery is terrible. Yeah. How long are you getting on your battery, like five hours or something? I don't know. Like not that long of continuous listening, man. - -118 -00:59:24,179 --> 01:00:09,540 -Wes Bos: So well. I thought the battery is awesome. I don't know how long I get probably I get about eight hours out of mine. But the thing is, I never use them for that long. I usually use them for only three or four hours at a time whether I'm at the gym, or like walking to the gym, at the gym, going grocery shopping and then coming home that's like three or four hours and they charge super fast like the case itself has like enough for like three or four full charges. The air pods themselves charge to full I think in about 10 minutes or 15 minutes but like you can usually get like, if you need an hour worth of listening. Just throw them in the case for like three or four minutes. Yeah, I think AirPods is probably one of the best technological improvements in the last like I want to say three or four years it's unreal how how amazing that they are. - -119 -01:00:09,869 --> 01:00:27,449 -Scott Tolinski: Yeah, I should say I'm a fan. Yeah, I just the I was listening to him one day I was like a Friday and Courtney was home so I didn't want to be blast and stuff so I just had podcasts on them all day. Yeah, I'm like halfway through my workday they just out Oh, yeah, well surprised. But uh, other than that, they're they've been they've been awesome. Oh, yeah. - -120 -01:00:27,480 --> 01:01:21,420 -Wes Bos: Yeah, I guess I just always throw them in the case when I'm not using them even if you just like go to the bathroom, throw them in the case go to the bathroom, grab a coffee and by the time you're back, they're usually boosted back up to 100% Big fan especially how easily they connect on the on the iPhone. And you flip the case open on the iPhone and it will automatically just show you the the battery percentage of each earphone and the thing it's so good I can't believe it. I have a dog on here. That's just chuck don't get well you might want to get your family a dog that'd be pretty cool headphones as well. Bose QC 35 they are 449 bucks Canadian so I bet you probably get them for under 400 bucks American. They are so expensive. But again one of the best things I've ever spent money on in the last couple of years. I've had my pair for probably about a year and a half and they are rock solid. The battery lasts me I think like 1517 hours I probably charge them once every few days and I have them on the entire day. - -121 -01:01:21,510 --> 01:01:24,119 -Scott Tolinski: Listen to my kind of headphone yeah battery life. - -122 -01:01:24,119 --> 01:01:48,090 -Wes Bos: Yeah, I think just because they have room for it. I am worried a little bit about when the battery starts to degrade because I want to these are expensive headphones. I want to have them for I don't know like at least five or six years given how expensive they are. So I am worried about that because there's no replace replaceable battery. But well I'm sure we'll start to see people figuring out how to crack them open and solder in a new battery. When that's - -123 -01:01:49,739 --> 01:02:49,650 -Scott Tolinski: the last one I have on here is the very highest end I figured we'd go out on a bang I recently got a Samsung 4k q LED TV and yeah, a cute I'm gonna say q LED is like a fake word. It's fake. It's just because they couldn't compete with OLED so they were like well just have it be a Q lead even though it's not an O lead or any other technology that's not an LCD LED TV so like okay, don't let the marketing fool you. But regardless, this TV is awesome. I'm just such a huge fan. The picture quality is great. The contrast levels are great. Everything about it's great. The internal software is great. can install YouTube TV, the remotes awesome. Everything about it is awesome, except for Samsung's like want to be Google Assistant named Bixby which sucks. Sucks really badly. accordin used to have Bixby on our phone and we both grown to hate Bixby so that's the only downside about this TV. So if you're the type of person that wants to spend $1,000 on somebody then check out these TVs because they are slick. - -124 -01:02:49,679 --> 01:03:15,230 -Wes Bos: Yeah, we have two of them in our house. I initially bought the Costco I don't know some cheap Costco and I'm like whatever 4k TVs a 4k TV. It'll work. Yeah, the the picture wasn't that good. And HDMI kept flaking in and out. And I like didn't even switch my USB or Mm hmm. Cable. And this new Samsung one is amazing. And I know developers love to hate the built in apps on these TVs. But the built in Apps there are amazing. They're great. - -125 -01:03:15,270 --> 01:03:25,800 -Scott Tolinski: Yeah, yeah, though. It is like 4k Netflix built in. And it's superduper fast, not even hooking it up with Ethernet. I'm like, how are you even doing this? How is this picture? this good? - -126 -01:03:25,829 --> 01:03:48,960 -Wes Bos: Yeah, the interfaces like super responsive. They're just great. We got a big one in our basement. And then about a year later, we bought another smaller one for my wife's office. So yeah, big fan of the Samsung TVs. Although I did I bought a Samsung 4k monitor. And it sucked. So I returned it and bought an LG one. So I guess you always have to do your research on that. Mm hmm. All right. Do you have any sick pics? - -127 -01:03:49,590 --> 01:03:53,369 -Scott Tolinski: I have a whole episode of that. So I think we're good here. I think - -128 -01:03:53,550 --> 01:03:56,099 -Wes Bos: that's it for today. Thank you for tuning in - -129 -01:03:56,280 --> 01:04:37,730 -Scott Tolinski: anything to plug, I have a new course coming out, which is level one TypeScript, and it focuses just on TypeScript. So for those of you who are interested in learning a little bit more about the basics in a non intimidating way. This is the course for you. So we're going to be talking all about the syntax in TypeScript, and basically how to get started with it, how to use it and how to understand it. Again, this is this course is geared for anyone who maybe has thought about learning TypeScript, but even the idea of it is maybe a little confusing, or a little to over their head. So this is all just about syntax and how to do things in TypeScript, how to read and how to use it. So check it out, level of tutorials.com sign up for the whole year and save 25%. So yeah, check it out sick. - -130 -01:04:37,770 --> 01:05:10,139 -Wes Bos: I'm gonna go into plug some updates that are coming to my course platform I've been working like for the last three or four months with the developer on a whole bunch of new updates to the player and the back end management, the whole back end is being rewritten in react, which is really cool. The whole checkout experience is written rewritten in react. So it's just going to be fixing a bunch of little bugs as well as rolling out a bunch of new features. So If you already have taken one of my courses get ready for that as well as all of my courses are at Wes bos.com forward slash courses. I think that's it for today's sales guy. Nothing. All right peace. Please - -131 -01:05:12,269 --> 01:05:22,020 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax97.srt b/transcripts/Syntax97.srt deleted file mode 100644 index 4550ef1a5..000000000 --- a/transcripts/Syntax97.srt +++ /dev/null @@ -1,184 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,480 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node modules, barbecue tip workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA, Bob and Scott Taylor. Totally ski. - -2 -00:00:25,980 --> 00:00:58,080 -Scott Tolinski: Oh, welcome to syntax. In this hasty Monday treat. We are going to be talking all about CSS variables, aka custom properties in CSS, why you might want to use them why they're better than your CSS preprocessors variable system and some of the pitfalls that you could run into while using them. My name is Scott Tolan ski at stolen ski at all of the social medias. And I am a full stack web developer from Denver, Colorado. And with me, as always, is Wes Bos. - -3 -00:00:58,080 --> 00:01:03,750 -Wes Bos: Everybody. Hopefully you're doing well on this Monday morning, or afternoon or whenever you're listening to it? - -4 -00:01:03,840 --> 00:01:32,430 -Scott Tolinski: Yes. Or maybe it's not even a Monday, maybe you time traveled. Maybe you're just listening to it later. I guess that's a more reasonable assumption. So this episode is sponsored by Kyle, Prince, loose freelancing course, everything you need to know to master freelancing. And this thing is a bundle to take you to that next level into making more money, doing a better job and all around just being a better freelancer. So with more about that course, as Wes - -5 -00:01:32,490 --> 00:03:00,210 -Wes Bos: Yeah, so if you go to study web development comm for slash freelancing, you're going to see Kyle's bundle on everything you need to know to master freelancing and know a lot of you are looking to earn a little bit of side income, maybe just to supplement your income or you eventually want to go off on your own or Scott and I did as well. We both freelanced while we were trying to build our own businesses, because it's a great way to sort of make money while you are trying to build a product or something else that that's your end goal. So if you need help, I know that we get questions all the time about freelancing, check this out, you're in the bundle, you're gonna get freelancing and beyond ebook, you're gonna get a bunch of website templates that should get you off and running, you get the Facebook community, the slack community, a portfolio website, template, a conversion centered guide, all kinds of stuff, I'm not going to read through all of the different things here. But if you are interested in learning more about freelancing, check it out, study web development, comm forward slash freelancing and use the code syntax all caps for 25% off the bundle price there, thanks so much to them for sponsoring. So today, we're gonna get into it CSS variables, or CSS custom property with CSS custom properties is the actual name Scott and I were talking about this beside the show, they should have just called them CSS variables. That's what everyone calls it. It's like ESX. It's not actually called ESX. anymore. It's, it was es 2015. But everyone calls it that anyway. So we know that that's wrong, but we don't care. We're just gonna continue to use it. - -6 -00:03:00,870 --> 00:03:13,980 -Scott Tolinski: Yeah, they've been variables, since pre processors is like, what's the purpose of changing the name at this point? I guess it maybe it is a little bit more correct. In terms of what's happening here, but like variables Come on. makes more sense. Yeah. - -7 -00:03:14,340 --> 00:03:46,920 -Wes Bos: So let's kick it off with talking about what they are, if you don't know what they are, if you do feel free to skip ahead a minute or two, we're gonna dive into some kind of cool use cases that you might not necessarily have thought about them for. So the idea is, is that you have a variable in your CSS, like, it could be a font size, it could be a color, it could be pretty much anything that you can think of, and then if you need to use that value anywhere inside of your code, you can just reference it and the syntax to use this is the syntax is a little bit funky. There at - -8 -00:03:46,920 --> 00:03:51,000 -Scott Tolinski: least it it's funky if you're coming from sass or stylus with - -9 -00:03:51,000 --> 00:03:52,860 -Wes Bos: like $1 sign Yeah, yeah, - -10 -00:03:52,880 --> 00:04:09,750 -Scott Tolinski: because it's a little bit it's a little bit less sleek. You know, it's it's not that sleek sports car it's a little bit more of that that blocky Volvo but it definitely I think it has it has its benefits enough that we'll go into as to, to make up for some of the the less sleek Yeah, aspects of it. - -11 -00:04:10,109 --> 00:04:58,230 -Wes Bos: And I honestly don't mind it that much. I've been using it for over a year now. And I've grown to like it, I've become fond of it. So the syntax is like when you want to define your variable, you use dash dash and then your variable name. So it could be dash dash color, dash dash size, dash dash, like gray and you have a specific gray that's attached to that. And then you just use a regular CSS property, their colon, you give it your value, whether that's a color, whether that's a unit or a size, or even just like a CSS Grid area name or, or a bunch of repeaters that you want, and then when you want to use it, you just go to your value. So if you say like grid template columns, you var and then use parentheses. And then inside of that, you just use the name of your variable. So dash dash like you named it and the name of your variable. It's it's fairly straightforward. - -12 -00:04:58,289 --> 00:05:57,510 -Scott Tolinski: Yeah, and I think this is where more or less The cool things about it just being CSS come into play, because if you wanted to override it, the same rules of CSS specificity still apply. So you can override it just by simply redefining it in a lower aspect, or more specific area of your CSS, whether or not that's in another selector or something like that. In addition to that, you can also change them via just straight up JavaScript, I mean, the same way that you would append a style or some sort of CSS property in normal JavaScript, you can do that with your custom properties. And those will then update throughout the rest of your site. Of course, we're going to get into some of those cool things in a minute here. But the I think the interesting aspects of CSS custom properties, is really just that it's just CSS. And since you're defining these custom properties, it functions like the CSS, you know, and love, rather than something that's foreign or different out there - -13 -00:05:57,510 --> 00:07:08,520 -Wes Bos: or something, it's sure there's no new JavaScript that you need to learn to update these things. And there's no new CSS that you need to really learn other than using the dash dash in front of it. And other than using the var, if you want to update a variable in JavaScript, and this is one of the benefits of using CSS variables is that they are live meaning that in sass or any preprocessor, you use a variable that gets compiled, and then it's stuck, you can't change it unless you were to recompile your sass. And in JavaScript, you can just use your grab a DOM element or grab the root of your document and use the style set property method. And on that, you can just set the property like you would normally change the background or the font size, you would just use dot style dot set property, dash dash color, and then set it to the new color that you want. And then anywhere that that variable is used within scope will be then update and we'll talk about scope in just a second. So it's it's pretty cool that we're able to have this sort of now flexible CSS that isn't just figured out at author time, it's figured out whenever the variables that are used inside of your CSS change. - -14 -00:07:08,640 --> 00:07:55,260 -Scott Tolinski: Yeah, yeah, absolutely. And I think some of those things that we were talking about a minute ago about the there's no new syntax thing, I think one of the other new syntax II things that, you know, might seem a little bit foreign is defining these add looks sort of the root level. And so we mentioned that it functions very much like a CSS property in terms of specificity. And like, you can define it inside of a selector by defining your custom property inside of that selector. And therefore, it's like scoped inside of that selector. But if you wanted it scoped to your entire document, you would specify it as part of the route. And you would do that with a colon, the word route, and then brackets and then inside of there, you would specify your custom properties, allowing you to use them throughout your entire application, or maybe override them later or something like that. - -15 -00:07:55,289 --> 00:08:54,600 -Wes Bos: Yes, it's kind of like JavaScript, sometimes you need global variables, or at least module wide variables that are available in the entire module. Because those are things that are used everywhere throughout your entire application, you always need access to them. If that's the case, then you you scope them to the root, and then they're available anywhere you write CSS, otherwise, you would go ahead and scope them a little bit lower, maybe you only need a specific font or size or color or something within a specific widget. And if that's the case, like you have a Twitter widget in your sidebar, you say dot tweet, you can set a variable on that. And that's going to be available both inside of that selector, as well as any elements that are a child of that selector will have access to it. So it's pretty cool. They can be overwritten, like Scott said, you can overwrite them at any level down. And just like regular CSS, if you set a font size on your body, and then later on, you set a font size on a very specific selector, then you're obviously you're just going to overwrite that value, just like CSS spec of 50. Works. - -16 -00:08:54,630 --> 00:10:35,520 -Scott Tolinski: Yeah, and I've already said it correctly, twice this episode. So now that I'm nailing it, it's officially part of my lexicon, it is in there, and it's not coming out, it is forever embedded in my brain. Okay, so we have gone over a little bit so far of the why you might want to use this. But let's get into this a little bit more, now that maybe we understand a little bit more about how this thing is working. And a lot of these things do carry over from CSS preprocessors. And so the cool thing that CSS preprocessors did is it sort of opened everyone's eyes to sort of really some of the benefits of using a variables in CSS. I remember that was one of the most killer features when I started learning sass myself was to say, hey, you can now store these values in CSS and access them later at another time. In some of the lessons that we learned from sass and stylist and things like that carry directly over into CSS custom properties, for instance, it can often make sense to both define your custom properties as what they are as more or less what they do as well. So for instance, you could define a custom property Guess like this is the brand color of yellow, right. But you could also define the custom property as what it does. Maybe this is an accent, right? This is the primary color or something like that. And so these sort of lessons that you had from CSS variables within preprocessors, they do carry over. And you can develop these sort of designed systems around your custom properties, the same sort of way you did with CSS variables in pre processors. I think this is one of those use cases, that should be obvious because we've been doing it now for a little while. But if you've never touched a preprocessor, it might seem Well, a little bit more foreign. I like - -17 -00:10:35,520 --> 00:13:07,560 -Wes Bos: to use that instead of using like color names when you're doing theming. Like, if I'm just doing my own website, I know that it's going to be yellow, and I'm not going to change that I've only got into some hot water before with sass, where you have a variable called Blue, and then it's inevitably set to orange, because you use the same kind of style guide on another client's project. And it's totally different. So having like primary accent, secondary variables like that are really nice, because then you can use them for theming, entire values like that. Another thing, and this is probably my favorite piece in CSS, you sometimes get into a situation where you can't independently control parts of a CSS property. So the biggest two are if you have a transform that has two values, so you have a transform that rotates something and something that scales something, if you want to change the value of the rotation, or the value of the scale on let's say, hover, or when you add a class, there is something coming to CSS called independent transform properties, which will allow us to get rid of the whole transform, rotate, and it will just be simply rotate 30 degrees, that makes my life so much better. I cannot wait. It was in Chrome for the longest time, and then they yanked it and a whole bunch of my demos broke, because it wasn't ready for primetime. But the way around that right now is that you write your CSS like this, you say rotate var dash dash, rotate, scale var dash dash scale, so you just set them to variables. And then in the same selector, you set your rotate in your square scale variables. And then when you want to change one of them, let's say on hover, the only thing you need to do is not reapply your transform, you just need to change your variable on hover. And that will be enough to actually trigger it. And the nice thing about that is that you don't have to, like I've been in situation before where I'm like, okay, I only want to change the Rotate value right here, but not the not the scale value. So you just like have to like copy paste the scale value over. And then if you change the first scale value, the second one doesn't make it over right, you can, you can see the problem that we have there. So that's amazing. Same with like box shadow, or what is it text shadow, you have your x, your y your blur your spread and your color when you have a box shadow or, and that's what that's five properties that you need to take care of. And if you want to change one of those things on hover, or when you add a class or even with them, if you have like a slightly like larger size, and you only want to change the amount of the box shadow and not the other things, you can simply just change the variable and they will then be applied. - -18 -00:13:07,590 --> 00:13:35,130 -Scott Tolinski: Yeah, that's brilliant. I'm like loving that. Because that's a very real use case that anyone who modifies CSS at any given point for animations, or really, anytime you're you're hovering your transitions or something like that. I do want to say to that that transform thing is amazing simply for the fact that every single time I go to write, translate, or transform, translate, I always write translate colon, and I'm like, Oh, crap, it's transform, translate, not translate - -19 -00:13:35,160 --> 00:13:37,020 -Wes Bos: trans. never remember which one it is. - -20 -00:13:37,920 --> 00:15:04,980 -Scott Tolinski: Similar to me either. Not that similar, but they're similar enough. I think, another great thing that that obviously, we're going to see benefit from this is very closely related to what you're talking about. But just the ability to change these properties during your application. Like I mean, you could think of an immediately applicable way to do this would be maybe you have a dark theme. And maybe that dark theme or whatever that visual theme is, is triggered by the user input. You know, I personally use a lot of applications like to do list. And to do this as my to do list application. One of those things is a settings. And you can change the entire theme of the app. And this is not like, this is not like a revolutionary thing. There's tons of apps that do this, right. And so there's a whole bunch of 10 different color themes, that theme the entire app head to toe, right. And I can just think of how much easier that would be to change five or six custom properties in reskin your entire app with changing five properties. If you imagine having to go through your classes or whatever and find every single time those colors are used and update that to change your theme. It just sounds like a total nightmare. And it's something you'd have to like plan your CSS around from the very start, where with custom properties, you're just setting your custom properties and you're able to change them and you don't have to change the way you're writing your CSS or organizing it. So I think themes in general unroll Thema bowl content and things like that are going to be just so much easier with custom properties. - -21 -00:15:05,010 --> 00:16:11,820 -Wes Bos: While you're talking about those themes. We are also soon, one day, I don't know the what the status is of it right now. But we are getting the color functions inside of CSS. So you could theoretically just take that brand yellow, and then calculate your lighter values, your darker values, your opposite values, your saturation, because we're gonna have all these functions that are like opacity and alpha. And you can make something a little bit more red or a little more green, or has tint or shade or blend two colors together or adjust the contrast. It's awesome. Because theoretically, you could just have one color and your entire project and just use math and these color functions to calculate all of the other colors. I'm sure it's obviously not that easy. That's why we have designers, but that's kind of neat that you'll be able to, and you can do this in SAS already, you can just calculate like, oh, if it's a red than what should the box shadow be? Right? Yeah, I always just use RGBA, black or white and then adjust the alpha channel. Yeah, so that it looks good. But I know that it's better performance, if you actually just give it a solid color instead of that transparency there. And that would be one use case for this. Yeah, - -22 -00:16:11,820 --> 00:16:45,420 -Scott Tolinski: I use those like crazy and stylus to just be like, here's my read and on hover, you're going to get a red plus 10. And then it just gets a little bit lightened version of that red. So I would definitely be down for that. I love how CSS has learned so many lessons from the pre processors. And it seems to be embracing that rather than shutting the door on that. Now, granted, it takes a long time for any of this stuff to come through the gates, but like just the fact that it's evolving in that direction at all is is just brilliant. And it makes writing CSS just a lot, lot better. - -23 -00:16:45,870 --> 00:17:10,800 -Wes Bos: Totally. We saw that with JavaScript as well. Like we have almost all of jQuery now available in the browser. It's not as nice as jQuery was, but it works just great. And you don't need to reach for those things. And I think probably someday we will have to reach for a preprocessor because we will just be using I don't know if that one day will ever come because we're will probably always want to be using whatever is coming. Two years ahead. Yeah. But uh, we definitely are catching up. - -24 -00:17:10,820 --> 00:17:48,000 -Scott Tolinski: We are. Yeah. And I mean, we do have a whole section of this episode called bombers, which we'll talk about some of the bombers in relation to CSS custom properties. Do you have anything else under your use cases for why? Yeah, I think personally, the for me, the killer features are really just the ability to change them and have them affect every time it's been used. And now that CSS is so more tightly ingrained into JavaScript with things like styled components, or scoped CSS or whatever, I think we'll be seeing the rise of JavaScript controlling CSS properties in an easier manner more. So I guess, then before? - -25 -00:17:48,150 --> 00:18:38,060 -Wes Bos: Yeah, I think another kind of cool thing, and this might trigger some of you so be prepared, but you can overwrite variables in line as you author the HTML. So you write all of your CSS, and maybe you set up a paragraph tag to have 14 font size and be black. If you ever wanted to overwrite that, you can just use a style attribute on your paragraph tag and set the variables in the style tag. And then they will then be overwritten because it's more specific inside of a style attribute than it is inside of style tag or external CSS file. And that will then overwrite it, I've used that quite a bit myself, just because like, I'm authoring HTML right here, I know what I want it to look like I it's kind of full circle, because we're kind of coming back to the font tag of eyes and color attributes. But I can see it - -26 -00:18:38,060 --> 00:19:34,310 -Scott Tolinski: is more useful, unlike a larger container basis, like all of the text within this container needs to be this property, and therefore you're like changing it in a larger sense. And then more scoping. It kind of triggers me on a smaller level. But I think a lot of this stuff is using it and seeing is believing kind of thing. Now granted, you don't need to to see CSS properties or variables to understand why you need to use them. But I think some of the the magic with CSS custom properties being able to be changed, like this is definitely a useful time to use them. Now, we haven't really talked about some of the other cool things that have been recently added to CSS, like calc, and what we can do with custom properties in calc, because if you have used CSS variables and pre processors before, you know the powers of you have a variable and you can manipulate it with math or whatever. And now we have the ability to do so with things like calc, right, - -27 -00:19:34,340 --> 00:20:06,320 -Wes Bos: yep, you can pipe your variables right into a calc, which is really cool. Because with calc, you have the ability to mix and match percentages and pixels. Yep. Which is great. You could take like 80% minus 20 pixels, it's amazing, the RAM, and it will all just work out. Another really cool part about that is that you can use them in partnership with transitions, which will give you a really, really neat animation. So if you have an animation that's all based on variables and you change one of the those variables and you have a transition on those properties, then it will just animate for you. It's a whole new world with the stuff. - -28 -00:20:06,350 --> 00:21:02,160 -Scott Tolinski: There's a whole new world and getting into that whole new world thing. What are the bummers here that are going to keep you sidelined from this whole new world? Because after pumping you up for this whole episode, now we get to tear it down a little bit. I think the big problem is that they're they're supported pretty well. But they're not supported by iE 11, which is a gigantic bummer. Because, yeah, there's not a great fallback system for this kind of thing. And so I don't know, like what you do personally, but I ended up just declaring CSS properties twice. Because what happens is, is that I 11 will get to the one with the var and say, Hey, I can't read this stuff. I don't know what this means. And then just move up to the next one in line, where we'll read it with the correct color. And this means your CSS authoring is now clunky, and unnecessarily long. And now all this extra stuff. I don't have a solution for that, other than not supporting iE 11. - -29 -00:21:02,400 --> 00:21:33,320 -Wes Bos: We talked about this on our browser support one podcast tasty treats about a month or two ago, where the CSS there's not a lot of great fallbacks for CSS, whereas JavaScript, you have access to the actual prototype of everything. And you can polyfill almost everything. It's not the case with CSS. So you just got to sit on your hands, because this has been around for a couple years. And it's only becoming popular recently, just because we're starting to see people kiss that last iE 11. Goodbye. And then we're racing and we're in good shape. - -30 -00:21:33,480 --> 00:21:40,340 -Scott Tolinski: Yeah, I'm wondering what my 11 usages right now, if it gets to it, let's open up our Google. Hello. - -31 -00:21:40,380 --> 00:22:07,230 -Wes Bos: Yeah. So Scott, and I just opened up some website data. I'm looking at my advanced rap Comm. Course, which has had probably the most traffic in last couple months. Actually, this is just one week, and out of 20,000 people who visited it 58, which is 0.3% or on IE, and of those 5853 of them were on iE 11 and five of them were on IE eight like it. - -32 -00:22:07,650 --> 00:22:33,210 -Scott Tolinski: Yeah. So very, very small for me. Similarly, I have point two 5%. Internet Explorer usage. Oh, even last, wow. Yeah. Where 70% of those are on iE 11. And, and a very small percentage of users on IE eight, which let me tell you, if you are using level up tutorials on IE eight, it is not going to work. Well. - -33 -00:22:33,660 --> 00:22:35,970 -Wes Bos: That must be a bot. There's no way. - -34 -00:22:36,060 --> 00:22:47,790 -Scott Tolinski: Yeah, I was still using IE, I'm using CSS Grid with absolutely no fallback because, well, if you're learning web development tutorials, especially the React sort of stuff, you're probably not - -35 -00:22:47,820 --> 00:22:49,200 -Wes Bos: going to the browser - -36 -00:22:49,260 --> 00:22:52,560 -Unknown: top browser. I think he's easily Chrome. Let me - -37 -00:22:52,860 --> 00:23:08,460 -Wes Bos: come on Chrome at 74% is chrome 16%, Safari 5%. Firefox, and then you got you got the mobile browsers coming in after that. And then very edge edges beating out, ie - -38 -00:23:08,490 --> 00:23:14,970 -Scott Tolinski: 75% of that room for me. 15 miles Safari 5%. Firefox, - -39 -00:23:15,180 --> 00:23:17,700 -Wes Bos: I'm surprised that it's not more Firefox. - -40 -00:23:17,730 --> 00:23:20,430 -Scott Tolinski: I'm surprised that so much sorry, Jonas? Yeah, - -41 -00:23:20,430 --> 00:23:26,100 -Wes Bos: me too. Yeah, interesting. Cool. All right, well, anything else to add a bummer surrounding it. - -42 -00:23:26,490 --> 00:24:53,460 -Scott Tolinski: So I do have one more thing there is, we did mention that there's no great way to do a fallback. But there is an interesting post CSS package, if you are using post to CSS, which those of you don't know, is basically like a CSS preprocessor. But it's a post processor. The distinction is not really that important. But really, what this allows you to do is to define custom properties. And it looks like it spits out. Yeah. Okay. So you define your custom properties, as is normal custom property syntax, and it spits out the actual CSS. So you do lose the benefits of Yeah, the CSS custom properties, in my opinion, in an ideal world, what this would have done instead was spit out the value plus the left to the CSS custom properties syntax in there. Oh, no, wait, it does. It does do that. Oh, nice. There's a little there's a way that it does do that. That way, you can take advantage of that fallback. And this now makes me wish that stub components had post CSS plugins, because you could just throw this in here and get instant backwards compatibility. So this, to me looks like the closest thing to backwards compatibility, or some sort of, you know, polyfill type of thing. So it's a post processor. Granted, you have to be using post CSS to make this happen, but looks like a cool project. I'll link that up in the description of this or the the notes as we say, - -43 -00:24:53,670 --> 00:25:07,080 -Wes Bos: That's it for today. Hopefully, you enjoyed it. If you have any other kind of creative use cases for CSS variables, let us know at syntax FM I'm at Wes Bos Scott is at St Lynskey. Make sure you follow us up on Twitter and Instagram, and we'll talk to - -44 -00:25:07,080 --> 00:25:08,580 -Scott Tolinski: you next week later. - -45 -00:25:08,580 --> 00:25:09,750 -Unknown: Peace please - -46 -00:25:11,759 --> 00:25:21,510 -Scott Tolinski: head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax98.srt b/transcripts/Syntax98.srt deleted file mode 100644 index e8485c2ae..000000000 --- a/transcripts/Syntax98.srt +++ /dev/null @@ -1,840 +0,0 @@ -1 -00:00:01,319 --> 00:00:02,820 -Unknown: You're listening to syntax, - -2 -00:00:02,849 --> 00:00:10,530 -the podcast with the tastiest web development treats out there. strap yourself in and get ready. Here is Scott, ski and West boss. - -3 -00:00:10,530 --> 00:00:47,009 -Wes Bos: Hello everybody and welcome to syntax the podcast with the tastiest web development treats out there. We today we're talking all about the state of JavaScript, which is a survey that goes out every single year. And the results were just released. And we're gonna kind of go through some of the more interesting web development or front end related results and then just talk about what we think about them and what that might mean for our industry. This is definitely something you probably want to pay attention to if you are looking for a job or looking for that next tech to move on up. So uh, with us, as always, is Scott to Lynskey. We always have him Yes, you do. - -4 -00:00:47,039 --> 00:00:48,420 -Scott Tolinski: Yes. Yeah. Today, - -5 -00:00:48,629 --> 00:00:59,430 -Wes Bos: we have our first ever guest on the podcast. We don't we're not really a guest podcast. But so we have with us as Sasha Greif, who is the proprietor or the What do you call yourself Sasha behind this thing? the - -6 -00:00:59,430 --> 00:01:01,590 -Unknown: originator I guess, the founder, - -7 -00:01:02,549 --> 00:01:03,360 -Scott Tolinski: the webmaster? - -8 -00:01:03,449 --> 00:01:05,550 -Unknown: Yeah. Well, that sounds good. I'll take that. - -9 -00:01:06,620 --> 00:01:14,640 -Wes Bos: So Sasha is here today, just to help chime in on some of the ideas behind a best he's been doing this for you been doing this for three years? Right? - -10 -00:01:14,670 --> 00:01:17,700 -Unknown: Well, two years. And this is. So this is the third year, third edition. - -11 -00:01:17,760 --> 00:01:29,970 -Wes Bos: This is the third year. Okay. So he has data now from three years. And we are interested to see his thoughts over time, as well as like the tech stack behind this thing. Like because it's just a lot of data, right? There's - -12 -00:01:29,970 --> 00:01:40,440 -Unknown: how many people have taken the survey. So this year about 20,000? So yeah, that's a lot of data. And each entry has many, many questions, like maybe a couple hundred data points. - -13 -00:01:40,470 --> 00:01:48,510 -Wes Bos: Wow. So why don't you just give us a little bit of an introduction to who you are, what you do. And then we'll, we'll dive a little bit more into the survey and the stack behind - -14 -00:01:48,510 --> 00:02:44,430 -Unknown: that. Sure. So my name is Sasha Greif. I'm a developer designer, kind of solo entrepreneur. And I currently live in Japan in Kyoto, originally from Paris, France. And I've been doing this a lot of different projects, mostly on my own for a while now, a while back, I wrote a book about the meteor JavaScript framework, I also have my own JavaScript framework called Vulcan j. s. And then I ran this survey the state of JavaScript survey every year. And yeah, originally started this survey by myself. But since then, I've been joined by two other also French, also living in Japan, developers. It's kind of a coincidence. Right now and Michael. And so yeah, this year, we just published the last edition of the survey results. And there's lots of pretty interesting data. We also did a lot of work on that data visualization, and data processing and all that. - -15 -00:02:44,610 --> 00:02:55,259 -Wes Bos: Yeah, I have to say that this Yours looks amazing. It's incredibly easy to digest. And just look at these graphs are beautiful. The whole website is amazing. It's a nice dark theme. Yeah, - -16 -00:02:55,259 --> 00:03:16,979 -Scott Tolinski: it's beautiful overall, is the biggest is the first thing that I saw immediately, just and there's so many fun little cool things like when you click the little elements, when you're on one of the pages, and they just sort of flutter and bounce around your screen. There's so many like awesome little elements to the design of the site that it makes the whole thing like a joy to pop through - -17 -00:03:17,009 --> 00:03:18,990 -Wes Bos: some Asian traits in here for sure. - -18 -00:03:19,020 --> 00:03:34,380 -Scott Tolinski: Yeah, in addition to the data in the presentation of the data itself, the presentation of just everything about it is just beautiful. So just cheers on that. It's just looks great. It looks great every year, but this year, in particular, You've outdone yourself. It looks awesome. - -19 -00:03:34,560 --> 00:04:07,979 -Wes Bos: Oh, thanks so much. We should say that it's at state of .js dot com. That's where you can follow along from home, we're not going to get to nitty gritty into the actual numbers, because you might be driving and be bored. But we're just talking about the overall kind of ideas and oh, wow, this thing went way up, or this thing seems to be declining year over year. So do you want to? Let's just talk about the tech behind it. Because I'm quite frankly, I'm very interested in like a How did you collect all of this data be? How did you process all of this data? How did you analyze it? And and then finally getting it out to the web? - -20 -00:04:08,130 --> 00:04:59,760 -Unknown: Sure. So I guess yeah, like you said, the first step is collecting the data. And for that, we use the type form, which is a survey or form service, kind of like wufu. Another one is Survey Monkey. But type form is really cool, because they have a great UI. They have keyboard shortcuts that let you answer the survey with just using your keyboard. It works pretty well. Now, because we have such a long survey, we actually ended up not using the actual type form dashboard to create the form, but I made like a small command line tool that just takes a yamo and then translates that into a type form survey. And that helped us a lot because before that we if we wanted to change like one word, and all the questions, basically you had to do it question by question. And now you can just Yeah, yeah, change the YAML and rerun the script and it does it for you. It's true. - -21 -00:05:00,000 --> 00:05:01,170 -Wes Bos: For our work right there. - -22 -00:05:01,880 --> 00:05:13,560 -Unknown: Yeah. And you know, a lot of the time I, I'm a big proponent of doing things manually first and not trying to automate everything. But this was a situation where really it wasn't doable by hand anymore. - -23 -00:05:13,680 --> 00:05:29,040 -Scott Tolinski: Yeah, I think collecting this much data on this kind of level is like, it's one of those things that you don't want to, I don't know, you don't want to put in jeopardy of luck. You want it to be easy, so that people when they get there, everything just works. And they don't have to think about it. So I think that's like a very important point there. - -24 -00:05:29,160 --> 00:05:49,650 -Wes Bos: Yeah, I hate taking surveys. And this is one that I actually did myself, because it's it's so easy to to glide through it. Yeah. Take a survey. And you're like six questions, any, like, how long is this thing through this? Yeah. So once you've you've collected it, how do you get 20,000 people to actually respond to this thing? You I guess you have an email list, right? - -25 -00:05:49,680 --> 00:06:39,720 -Unknown: Yeah. So we have an email list accumulated over the years, we have some people like yourself, who helped us retweet the survey and kind of reach broader audiences, we post it to like Reddit Hacker News every year as well. So altogether, you know, it's kind of an organic way of collecting responses, which I guess we should say, because some surveys, they will like pick specific people to answer the survey, if they have a specific like gender breakdown or demographic breakdown in mind, they'll take care to target that. But that's not what we're doing. Really, we first for practical reasons. Like, we don't have the logistics to do that. And also, just because the goal is to reach as many people as possible. And this year, we had 20,000. But hopefully next year, as we keep increasing and reach every single person that has ever wrote a line of JavaScript in their life. - -26 -00:06:39,870 --> 00:07:12,180 -Wes Bos: Yeah, well, that would be ideal, right? Because sometimes you hear people like yeah, the survey is really weighted towards react developers or really weighted towards back end devs or something like that. You're like, well, like you've spread it out to the masses as far as you possibly can. Yeah. And it's, it's hard, unless like, every single developer who's ever written a line of code in JavaScript can answer this thing. It's hard to pin it down. But I think that that sample size of 20,000 is fairly large enough. Yeah, seriously. So once you've collected all that data, what is the analyzation, and the creation of the graphs look like? - -27 -00:07:12,210 --> 00:08:09,630 -Unknown: So the next step, again, we have like a small script that will actually download the data through TypeScript API. And then actually a Raphael, who's the creator of the data visualization library that we use. He's also in charge of processing the data using Elastic Search. So because the first year in 2016, I did it myself and like a Google spreadsheets. Wow. And that was that wasn't very scalable. So I know very little about, like, actual data processing. So he's been a huge help to kind of streamline that effort, kind of make it a lot more automated, although there's still a lot of like manual normalization. Because, you know, sometimes, when we ask people, what other library Do you use, somebody will type in whatever Angular and somebody else, angular two and angular three, and we want to normalize them to the same answer. Maybe Angular is probably a bad example. Because it's confusing. And we can talk about that more. But you get the idea. Like for other things, we have to kind of massage the data to make it coherent. - -28 -00:08:09,660 --> 00:08:14,130 -Wes Bos: Yeah. Even just spaces, capitals. Yeah. spelling mistakes, things like that. - -29 -00:08:14,160 --> 00:08:28,830 -Scott Tolinski: Yeah. So speaking of the visualization library, I think that's one of the cooler things about this site in general is the visualizations are just so well done. You mentioned Raphael is using his own library, what what is he using to do this? Or what are you guys using for this? - -30 -00:08:28,860 --> 00:08:44,249 -Unknown: So it's their library is called nivo. And it's built on top of d3. And then the really cool part is that it can render to like SVG or canvas or even sometimes, like just HTML elements, depending on the type of chart or what do you need to do. - -31 -00:08:44,420 --> 00:08:47,270 -Scott Tolinski: So how do you spell that? nivo and IV? Oh, - -32 -00:08:47,279 --> 00:08:52,440 -Wes Bos: cool. It's at nivo dot rocks. This is beautiful. I had never, never heard of this. - -33 -00:08:52,470 --> 00:09:03,480 -Scott Tolinski: d3 is one of those things that I pick up over and over again. And then like, never get anywhere with like, I'll make like a basic chart with it. And then they're like, okay, but how do you make something amazing with it? This looks awesome. Yeah, it's - -34 -00:09:03,480 --> 00:09:22,140 -Wes Bos: really I like the fact that I like the fact that you can render out to what SVG or canvas or sometimes HTML elements, because that's always the the trade off that you have, you're like, well, Canvas is nice, and like portable. But SVG is like is a bit better. Because you can like actually get into it. That's pretty neat. I'm gonna check this out. nivo dot rocks. - -35 -00:09:22,140 --> 00:09:23,730 -Unknown: Yeah. And it's all react. - -36 -00:09:23,850 --> 00:09:59,299 -Yeah, it's a really cool library. And it's pretty flexible. And I guess especially since you know, Raphael is the author, so he can add features. It's pretty handy layout. So some charts we like, sometimes add HTML elements, or like tooltips inside the chart, which doesn't work hundred percent of the time, but it's still cool to be able to do it. And overall, I just think like react works really well for charts, because each in a bar, each label can be a component, and you can, that whole component based approach works well. But yeah, it's just a cool tool. Like if you're looking for a visualization library, you should definitely check it out. - -37 -00:09:59,399 --> 00:10:01,260 -Scott Tolinski: Yeah. Yeah, like in the looks, - -38 -00:10:01,380 --> 00:10:07,669 -Wes Bos: the site itself is you said it's just a static site generated, like, what's the tech behind that? Is it a react site? - -39 -00:10:07,679 --> 00:10:43,039 -Unknown: Yeah. So we're using Gatsby. So react side. And Gatsby is pretty cool. So of course, you have the whole static site aspect. Also, like all the blowing optimizations that Gatsby do, like where you can load the homepage, and it will keep loading the other pages in the background, and kind of speed up the whole process. And also, like the whole data pipeline with graph QL. So I wouldn't say it's like, perfect, there's still some limitations. Like I found out, you can't really do like a dynamic graph qL query for a specific component. So it has to be like at the page level, just, you know, - -40 -00:10:43,260 --> 00:10:47,659 -Wes Bos: the data from that's being served from Elastic Search. You said, Oh, well, first, - -41 -00:10:47,669 --> 00:10:49,140 -Unknown: we convert it to Jason's. - -42 -00:10:49,140 --> 00:10:49,740 -Okay, - -43 -00:10:49,740 --> 00:10:58,740 -we're YAML files. So it ends up as static files. But then yeah, that does get translated into a Gadsby song. You own it. You've - -44 -00:10:58,740 --> 00:11:05,039 -Wes Bos: hosted it on Netlify. Yeah, we do. This is like Scott, love child of technology. - -45 -00:11:06,659 --> 00:11:11,700 -Scott Tolinski: I'm a huge fan of everything. That was just all those words. I just throw those words in my basket there. Yeah. - -46 -00:11:12,600 --> 00:11:24,570 -Unknown: Yeah, I think it's a stalking. It's pretty trendy these days, like having your data kind of be separate from your static from then, like the whole jam stack? I guess you guys would know something about that. - -47 -00:11:26,070 --> 00:11:39,000 -Wes Bos: Yeah, we just got through the whole jam stack conference. So Wow, this is actually a really good example of a like a jam stack website, then yeah, that a lot. Cool. Anything else you want to tell us about the stack? Or should we jump into into the - -48 -00:11:39,390 --> 00:12:16,080 -Unknown: Well, one thing that's that's pretty cool is how we generate like a screenshots or or images for each chart to make them shareable. So yeah, we have, yeah, puppeteer scripts that just runs like locally on our own machines, and generates previews for each image, or each chart. And then we upload that. And we actually create like fake pages that only contain meta meta tags pointing to that image, and then that's the image or the page that gets shared. And then that page redirects to the actual chart in the survey. So it's kind of the whole like, process that's called redirections. And meta tags. - -49 -00:12:16,230 --> 00:12:50,760 -Scott Tolinski: I think that's like one of the coolest like parts about this, it adds so much when you see somebody shared on Twitter or something and the charts, right, they're like, there's nothing like if somebody was just sharing a link with some, some text about a chart or something like that to me, like when I see the state of .js charts pop up in a tweet, and there's discussion about it. I think that's like one of the coolest things about this, it's so makes you want to dive in to whatever is being like talked about a little bit more. I think that's just whatever effort that you guys did to make that happen was well worth it. I think that is like one of the cooler aspects. Yeah, - -50 -00:12:50,760 --> 00:12:54,330 -Unknown: I did take a little bit of work. But I agree, I think it was worth it. Alright, so - -51 -00:12:54,330 --> 00:13:09,120 -Wes Bos: you want to just give us a quick rundown about how you like what questions Did you ask to actually collect this data? And know that when you go through it, there's all this like, never heard of it heard of it not interested? Just so we can sort of have some context for what the data actually means coming up? - -52 -00:13:09,149 --> 00:14:03,659 -Unknown: Sure. So you know, when I started the survey in 2016, I looked at other surveys, of course, and I noticed a lot of them asked questions like, Well, what do you use? Are you using like, React right now? And that that was a good first step, but they didn't really tell you like, okay, people are using react, but are they happy with it? Like, is it worth Yeah, investing my time into this? Is it going to be around like two years from now? So that's why I wanted to ask people, not only what they use, but would they keep using it. And that's how we ended up with like that the five questions or the five options you have for each technology. Number one, you've never heard about technology at all. Number two, you've heard about it, but you're not especially interested in learning it. Number three, you've heard about it and wants to learn it at some point. Number four, you've tried it, but you wouldn't use it again. And finally, you've tried it, and you would happily use it again. So those are the five choices. - -53 -00:14:03,750 --> 00:15:48,120 -Scott Tolinski: Yeah. So I mean, now that all sounds pretty cool. And the surveys were you're doing obviously a lot of data collection and sending it back to one particular place to analyze. One of our sponsors does a really good job of that as well. And it's century century allows you to track all of your errors and bugs in your own software and it categorizes them, catalogs them and makes them easy to solve amongst your team mates and easy to understand what the heck is going on in your application. One of my favorite features about century is the ability to take an issue on century let's say you have some sort of blank is undefined bug century captures that and it gets sent in logged into century, you can then look at that blank is undefined, whatever is undefined. And you can click directly in there to turn that into a GitHub issue. So even if you are the person who's pawing through century doesn't mean that you have to be the person who's trying to fix the problem, maybe that's somebody else's problem. So what you can do is you can then create a GitHub issue directly from that century issue, and assign it to whoever you want and track it both within your normal GitHub or whatever sort of version control software you have. It's just one of those things that's totally invaluable. I use this all the time, whenever I find issues, and I don't want to do them myself assigned to someone else, or I just want to take keep track of it for later. So if you want to check out century, head on over to sentry.io, and sign up with the coupon code, tasty treat, where you will be getting two months for free, that is a tasty treat. All one word, no spaces. So head on over to century.io Sign up today and get two months free with tasty treat. So thank you so much for a century for sponsoring. - -54 -00:15:48,270 --> 00:15:56,250 -Wes Bos: Yeah, we're just talking to Sasha before the show. And he is telling us how many of our past sponsors he's used. And you said, You are a user of Sentry now. - -55 -00:15:56,279 --> 00:16:05,490 -Unknown: Yeah. And I have to say, I really hate it. Because now I have to see every error, everything is tracked, and I can't pretend my app works anymore. - -56 -00:16:07,980 --> 00:16:09,960 -Scott Tolinski: You can't hide from your bugs. Yeah, - -57 -00:16:10,049 --> 00:17:04,680 -Wes Bos: there's some blissful ignorance, when you're not tracking it, it seems like everything is working just fine. Alright, so this survey has like the stats behind it is there's tons of tons of stats that you could go through, I recommend that you take grab a coffee go take 20 minutes, half an hour to read through the entire thing, or we're going to do now is we're going to go through some of our favorite parts parts that we think that relate best to our audience and and kind of talk about it. So first thing is you asked about JavaScript flavors and the possible flavors that you asked about. We're ESX TypeScript flow reason, Elm and closure script ESX. Having in 86.3% have used it would use it again. So it's by far the most used in there and following probably about half of that 46% is TypeScript, and then pretty much Peters off with flow reason, Elm and closure script past that. - -58 -00:17:04,770 --> 00:17:13,230 -Unknown: Yeah, I think actually, next year, we probably stop asking about ESX. Because, you know, yes, it's up to what s nine or it's just - -59 -00:17:13,919 --> 00:17:15,180 -Wes Bos: an array. Yeah. - -60 -00:17:15,180 --> 00:17:24,240 -Unknown: So I think what we'll do next year, is just ask about each features like, are you using, you know, async await are using the three little dots whose names I always forget to spread? - -61 -00:17:24,830 --> 00:17:26,910 -Scott Tolinski: Which I always get backwards? Yeah. - -62 -00:17:28,169 --> 00:17:38,790 -Unknown: But yeah, TypeScript is certainly doing really well, this year, I was just at an event where like, half the talks were about TypeScript. So it really feels like you know, it's the latest big trend. - -63 -00:17:39,350 --> 00:18:08,250 -Wes Bos: One of the cool things you have here, if you if you click through to each of the JavaScript flavors, if you take a look at ESX, you see from 2016 to 2017, ESX got a large amount of adoption, but from 2017 to 2018. There was a Oh, it dropped in adoption. I'm assuming that's because of TypeScript adoption. Is that true? It went down? Very few, that's probably just a few people said they aren't using it anymore. But do you think that's because of the adoption of TypeScript? - -64 -00:18:08,360 --> 00:18:18,240 -Unknown: It could be? Or maybe people are just like, well, I'm on EAS nine now. So I'm not using ESX anymore, you know, that's dropping is just maybe a little bit confusing as a nomenclature. - -65 -00:18:18,420 --> 00:18:46,850 -Wes Bos: Yeah, that's true. And then if you look at TypeScript from 2016, to 2017, it went up 13%. And then from 2017, to this most recent one, and went up again. 13%. So it's, it's growing steadily year over year, we're starting to see a lot of people adopt it. And that's, I'd say, That's true with what I'm hearing from people ask me about as well, because I, I feel like I've got a pretty good thumb on the pulse of what people are looking for and what people are using, and definitely hearing a lot of TypeScript in the last year or so. - -66 -00:18:46,890 --> 00:19:05,600 -Scott Tolinski: Yeah, absolutely. I've been I've been personally looking at reason, a ton myself. And it was really excited to see the bump up and people who are interested in learning reason. It's something that I've considered teaching at various points. So reason is one of those things that I've had my and I've tried out a little bit, and it's, it's really pretty cool. So do - -67 -00:19:05,600 --> 00:19:08,300 -Wes Bos: you want to if you want to give a explanation, what is reason? - -68 -00:19:08,430 --> 00:19:53,760 -Scott Tolinski: Yeah, I can go region is basically another flavor of typed JavaScript. It's not really JavaScript. It's like JavaScript mixed with Oh, camel, which is another programming language. And so basically, the combination of these two sort of ideas, at least did this really sort of interesting syntax that looks a lot like JavaScript in some aspects and doesn't look like JavaScript and others. I think the Facebook team said at some point that react was originally planned to be in reason or something I don't I don't want to state that as fact. There's rumblings about that or something. But reason reason react. It's a it's a basically another way that you can have typed JavaScript, but it's almost like a new ish language rather than a superset of JavaScript like you would have in TypeScript. - -69 -00:19:53,910 --> 00:20:35,730 -Unknown: Yeah, I think that's gonna be a big trend. Like, I think there's a future where we don't even write actual JavaScript anymore. We're Everybody has their own flavor or different language altogether that compiles to JavaScript or to things like, you know, webassembly. Obviously, for now, JavaScript is still here. But I find it really interesting to see that people are not really limited to, you know, that one language anymore. Yeah, I think it's, I think reason specificly is gonna do pretty well, for a number of reasons. Like it has super high satisfaction. It's from Facebook. So it's a good team, they have lots of resources they have, or they already have, like two hits on their hands with react and graph QL. So I'm pretty optimistic about reason. - -70 -00:20:35,880 --> 00:20:45,750 -Scott Tolinski: Yeah, yeah, I like the way it looks. Again, I'm one of those ones, I want to keep my eye on to look at the growth before I like make any decisions about it. But I like overall, the way it looks. - -71 -00:20:45,750 --> 00:21:31,550 -Wes Bos: One of the interesting parts about each of these sections is you have a overall happiness graph that shows people's happiness on a score of one to five, how happy you are. And on a lot of these happiness graphs, they've gone up over time. So looking at JavaScript flavors in general, how happy are you? It went from 3.9 in 2016, to four in 2017, to 4.2. And I was thinking about that I was like, I'm definitely much happier than the last. Like, we've had a lot of groaning a lot of aches and pains, a lot of growing pains, a lot of things changing very quickly. A lot of Webpack configs. Mm hmm. And I feel like everything has just gotten like really good. And like maybe even just like last six months or so even things like did you know, parcel is under a year old. He didn't even know that. Yeah, well, - -72 -00:21:31,550 --> 00:21:59,670 -Scott Tolinski: we were talking a parcel it came out right around the time that the state of JavaScript survey came out, because I was on the live stream that Sasha did. And I was talking about parcel because it had just been talked about or just released or something. And I was talking about how I think the future is going to be less configuration, write less writing giant Webpack config files, and whatever that means by having tools like parcel that make it really easy to get up and running. - -73 -00:21:59,760 --> 00:22:17,190 -Unknown: Yeah, I think parcel did really well this year. So we don't have like a dedicated section for build tools. We have like, other tools page, and it's not quite up there. But I think is gonna go up pretty fast. The next year, I wouldn't be surprised if it's like, you know, second or third after like maybe Webpack. And gulp. - -74 -00:22:17,220 --> 00:22:42,510 -Wes Bos: Yeah, and for those who don't know, parcel is a web pack alternative that just works. So you have an HTML file, you've got a script tag, you've got a link tag that links to a sass file, like you just write your HTML, like you were importing as a sass file in some TypeScript or some JavaScript, and then you just type parcel index dot HTML, and it will just compile it all for you. Yeah, and you're ready, you run, parcel build. And that's it. - -75 -00:22:42,540 --> 00:23:11,640 -Scott Tolinski: My favorite thing about it, I used it in my upcoming TypeScript series that I just recorded. And like, my favorite thing about it is, yeah, you make an index dot HTML file, it links to a.ts file. And then parcels, like, Don't worry, I got you. And like, you don't get the type. You don't get the type checking on build or something without a plugin. But without a plugin, you do get compilation and building directly into your site. It loads and it's blazing late, quote, unquote, blazingly fast so yeah, no, I'm a big fan. All right, let's - -76 -00:23:11,640 --> 00:23:40,080 -Wes Bos: keep going. Then let's talk about frameworks. So front end frameworks, specifically, the the big frameworks that were talked about where react view Angular preact, which is a pre Act is a react compatible clone, not I don't know, like it, basically, it's, you can take your react code, and then just drop in react, and you get some big performance benefits from it. And then we had Ember and polymer from that this one's interesting, because it has salary breakdown as well, which is kind of cool. - -77 -00:23:40,080 --> 00:23:58,260 -Scott Tolinski: I noticed a lot of polymer developers make a lot of money. And I was wondering if it's because it's a Google thing, right? Like, if you're using Polymer, maybe you're internally working at Google, and I think they probably pay pretty well. So I don't know, I have no idea if that's, if that's just totally making that up. - -78 -00:23:58,740 --> 00:24:11,550 -Wes Bos: Same thing with the free act. As soon as you go over 100 grand pre act starts to become more popular over react. So maybe that's something to say, if you want to focus on perf, your salary will increase, maybe, - -79 -00:24:11,820 --> 00:24:49,770 -Unknown: I think, you know, so that's something we know this. And I think what it is, is smaller libraries, like they are used more by more experienced developers, because if you're just starting out, you're not gonna start with preact or polimer. Right? You're gonna start with Yeah, yeah. And react to that kind of drags the average down. And on the other hand, if you're a more experienced, you have maybe a little bit more time to explore, maybe you have more perspective, and you can, you know, you're better able to see the advantages of something like react. And that's why you cannot have these numbers. I don't think it means that if you do start using preact, or polymer now you will earn more money necessarily. Right, - -80 -00:24:49,800 --> 00:24:50,460 -Scott Tolinski: right. Yeah. - -81 -00:24:50,610 --> 00:25:25,110 -Wes Bos: Another thing I want to talk about is the fact that Angular got pretty beat up on this, this whole survey all around. So we're looking at the overall results for front end frameworks for react 65% would use it again, view 28% would use it again. But overwhelmingly 47% have heard of it would like to learn it. So, you know, a lot of people are like, I've been hearing a lot about view, I'd love to learn it. But Angular got only 23% would use it again, and 34% would not use it again. So that's what do you think about that Sasha? - -82 -00:25:25,200 --> 00:25:46,710 -Unknown: So part of it, I think is a true trend. And part of is kind of my fault. So what happened is that in 2016, and 17, we asked separate questions about Angular j. s. Okay, so Angular is like the new I guess, Angular, whereas Angular j. s is the legacy version. And the naming is very confusing, I think. Yeah. - -83 -00:25:47,010 --> 00:25:48,090 -Scott Tolinski: It's very confusing. - -84 -00:25:48,450 --> 00:26:21,540 -Unknown: But so what happened is this year, we were like, well, angular j. s, is pretty old. Like, it's deprecated, we can probably drop it from the survey, we're not going to have like two anglers forever. So we simply didn't mention AngularJS. We only mentioned Angular. But then what happened is people, all of them assumed that Angular meant AngularJS, I think, and the answer is for AngularJS. So you know, okay, maybe people who tried Angular back when it was Angular j. s, they didn't like it. And they haven't tried it since they still answered the angular question. - -85 -00:26:22,110 --> 00:26:26,100 -Wes Bos: Yeah, it's true. Someone might have been like, four years back, right. Yeah. Yeah, - -86 -00:26:26,100 --> 00:26:29,250 -Scott Tolinski: I know, for a fact that I did answer it that way, personally. - -87 -00:26:29,310 --> 00:26:32,100 -Wes Bos: Okay. So that might be a bit of a bias there. Sorry, go ahead. - -88 -00:26:32,280 --> 00:27:30,180 -Unknown: And then what happened, that kind of compound. And the mistake was that we didn't realize that right away. Because, you know, we have all that data. And we're not focusing necessarily on every single chart. And then, so we didn't clarify that in the description. And then when people started asking questions about it, we didn't have like a really clear explanation, like I just told you. So I think it didn't help things that we weren't able to just like rectify the situation right away. And then in the conclusion, we write something about how the, the transfer Angular is a little bit worrying because it doesn't have as much momentum, which I still think is true. But I can see how people would think it's misleading to write that conclusion next to this data, even though the data is not it's not like there's a mistake in the data. It's more like the wording was ambiguous. But at the end of the day, like, Well, what do you call Angular, right? Like, what should we put on this survey? Because Angular is still the official name? So I'm not sure what the answer is here. - -89 -00:27:30,360 --> 00:27:59,460 -Scott Tolinski: Yeah, yeah, I feel, ya know, and then the whole, I think the whole situation was confusing for a lot of people. So I think in a survey like this, especially when you're trying to get this data of who's writing Angular, Angular JS, or what they're thinking, I think that's really tough to account for. I mean, even amongst libraries that have changed substantially, I think there's been no other framework that had such a great shift that Angular had from version one to two that I think maybe they would have been better off just naming it something else entirely. - -90 -00:27:59,490 --> 00:28:10,350 -Unknown: Yeah, I was thinking about that. I'm sure there must have been people in the Angular team who wanted a new name, and then people who wanted to keep the same name. And then maybe what we have now is like a compromise that makes nobody happy. - -91 -00:28:10,590 --> 00:28:35,940 -Wes Bos: Yeah. Any stats you want to talk about for us react specifically, because we're all three of us are react developer. So if you click in through to react, you see upward trend of people using react, which is good to see. You also have lots of things like most liked aspects of react, which is the most like is elegant programming style and patterns, and the most disliked is clumsy programming style. - -92 -00:28:37,980 --> 00:28:39,330 -Scott Tolinski: Seems like those are at odds. Yes. Love - -93 -00:28:39,330 --> 00:28:43,470 -Wes Bos: it or hate it, I guess. Yeah. And anything you want to talk about there? - -94 -00:28:43,620 --> 00:29:40,230 -Unknown: Yeah, maybe those two items are a bit too vague, like when we wanted to capture is, you know, with something like I don't know, functional programming, a lot of people say it's more elegant, or they just like the looks better. And it's hard to put into like actual, you know, data, like what's functional programming is not necessarily faster, but it does make your code cannot, you know, easier to understand sometimes. So that's what we were driving at with those two items. But obviously, it's super subjective. So that's why we have both. And at the same time, I agree that there's aspects of react that are elegant and some that are clumsy like I think JSX for example, a works great, but I do think it's kind of clumsy, like when you write it, it doesn't look super, you know, concise and nice. You have those. You have curly braces everywhere. You have ternary operators everywhere nested inside each other. So yeah, it doesn't look or feel good. So that's definitely like something I would say is clumsy about react. - -95 -00:29:40,380 --> 00:30:07,860 -Wes Bos: One kind of cool. Other thing I really like about this is if you look at react usage by country and you look at view usage by country, it's like night and day. So react is extremely popular in Canada, US, Australia, Sweden, Norway, and then you flip over to view it's like the opposite. map. It's like a very popular Mexico, Brazil, Russia, China, obviously, because views very popular with Alibaba, is that true? - -96 -00:30:08,040 --> 00:30:13,830 -Unknown: Yeah, yeah, yeah, I think that's the plot of the new Command and Conquer series, it's gonna be react versus view. Well, - -97 -00:30:18,510 --> 00:30:43,110 -Scott Tolinski: that's awesome. All right, so this ad transition comes courtesy of Sasha here. And if you want to get your salary bumped up, maybe it's time to start your own business, and the one thing you're going to need, if you are an independent contractor, or you're working or freelance or anything, you want to bring in some of that extra react or react money, like we've talked about here, then you're going to want to go ahead and get yourself to a freshbooks account. - -98 -00:30:43,260 --> 00:31:45,990 -Wes Bos: Definitely. So right before this podcast, Scott and I were sitting on slack doing a ledger of which sponsors have paid which sponsors that paid Scott, which sponsors have paid me and trying to like even out and make sure to see who owes who money. And all I had to do is log into my Freshbooks filter invoices by paid, see which ones are paid, I put them into our spreadsheet, see which ones are unpaid follow up on those. And then it would probably wait like 20 minutes, and we had all of our our ledger filled out for us no problem. And we were able to square each other way. So that's just like the perfect example of like, I don't want to do this because it's the business not I rather be coding, I'd rather be working on a podcast or rather be doing like actual tech stuff. I don't want to be bothered by like, oh, did this person pay or not, and things like that. So it's so easy just to log in, see what's going on with your world. Keep it all nice and tidy. I know tax times coming up in a couple months, and I'm ready for it. So check it out@freshbooks.com forward slash syntax for a 30 day unrestricted free trial. And thanks so much to Freshbooks for sponsoring. - -99 -00:31:46,140 --> 00:32:27,540 -Scott Tolinski: Cool, nice. Okay, cool. So let's move on into the next category, which is data layers. And this one was really interesting to me as well. And especially because, you know, there's a lot of I think growth in this area, we're seeing with a lot of graph qL libraries and things like that. So we have the Redux, which a lot of people have been using for a long time. And it has a high adoption rate at this point. And even when you think that a lot of people know Redux already, it's there's still 26% that says they've heard of it and would like to learn it. So I thought Redux was amazing. And how many people still want to learn Redux? And how many people have learned Redux already? I think that the numbers are big, big, big for Redux. - -100 -00:32:27,570 --> 00:33:02,430 -Unknown: Yeah. Well, I mean, speaking for myself, I have learned Redux. But I still want to learn it because I didn't understand the first time around. So yeah. Yeah, I think Redux is doing good. But I think the number of people who don't want to use it is also increasing. And that might be because it's getting replaced by simpler solutions, and especially things like Apollo, which now handles its own state. And I got a question whether most apps really need something as powerful as Redux. For their state management. I think it might be overkill for a lot of use cases. - -101 -00:33:02,580 --> 00:33:23,550 -Scott Tolinski: Yeah, it does look like most of the people have heard about Apollo want to learn it. I thought that was pretty interesting. There's like a very small percentage of people who have heard about it, but aren't interested in learning it and, and even like miniscule percentage of people who have used it and would not use it again. So it looks like Apollo is definitely just shooting up in popularity to - -102 -00:33:23,580 --> 00:33:53,430 -Wes Bos: Yeah, I'm impressed to see that I think that the only hurdle that we're gonna see over the next couple of years is people actually implementing graph QL. back end, yeah, in order to actually have to use it. Because I think that kind of stuff where it doesn't require a rewrite of your back end, because you, you certainly can stick a graph qL server in front of your existing REST API or something like that. But definitely does require a lot more involvement than just slapping in something like Redux where the back end team doesn't care what you use that you're pulling in. - -103 -00:33:53,580 --> 00:34:10,110 -Scott Tolinski: Yeah, and there's the Apollo rest stuff. I haven't used it before. But it looks really slick. So I mean, there's a way to consume a REST API easily enough with Apollo for those of you who are scared of having an Apollo back end, I actually have users in the level of slacker movies did and it seems okay, slick. So - -104 -00:34:10,130 --> 00:34:39,570 -Wes Bos: I haven't tried that either. If you have tweet us at syntax FM, tell us your experience with Excel. I always like to hear real world stories. What other data layer they had graph qL, Apollo Redux. Those are the big three mob x relay, modern relay, or some of the two other ones, they don't seem to have a whole lot of traction, but when they do have traction seems to be in the high income. This is very much like some of the other ones where they're very small, little bit unheard of. But the people who do use them are in the high income earning bracket. - -105 -00:34:39,920 --> 00:34:50,250 -Scott Tolinski: Yeah, and I think again, relay is used pretty heavily at Facebook. I mean, it's their own product. So again, maybe that's a Silicon Valley salaries right there. Yeah. - -106 -00:34:51,380 --> 00:35:26,070 -Wes Bos: Moving over to back ends. This one is just dominated by Express, express this kind of like seeing this just because there's been fairly steady back end in red are in JavaScript land for a couple of years now and it's been expressed, there's some other there's koa Meteor sails feather, you can talk about Vulcan as well. But Express has definitely been around for a long time. Huge user base. And a lot of people are just happy with how it's working. It does show next j. s showing up on here quite a bit, which I don't know if I will call that a back end framework or not. But it's definitely seems to be gaining popularity as well. - -107 -00:35:26,310 --> 00:36:10,830 -Unknown: Yeah. So usually we try to avoid featuring tools that are specific to one ecosystem. You know, like next year's is only for react. Yeah. But we really wanted to capture, we think it's kind of a new development to have these. Yeah, maybe they're not backends. But there's all they're also not like static site generators. So next door. Yeah. We were curious to see like, what that represents in the ecosystem. So we decided to include Max, we didn't include Knox, maybe we should have, I'm not sure that that's something you know, sometimes we can add new things just to test the waters a little bit. So that's what next was. And it does turn out that a lot of people are interested in it, or even use it like it's the second most popular option after Express, even though it's react specific. - -108 -00:36:11,729 --> 00:36:21,420 -Scott Tolinski: Hmm, wild. Yeah, this is one of those ones. I've been wanting to dive into a lot just because it seems like a great platform, but I haven't yet. It's on my list of things to just mess around with. - -109 -00:36:21,510 --> 00:36:30,920 -Wes Bos: It should check out the syntax website. It's built the next No, I was talking about nuxt. Oh, knucks. Not next. Yes. Is the view equivalent of next? Yeah, - -110 -00:36:30,920 --> 00:36:38,340 -Scott Tolinski: I've used next in a lot of stuff actually, like in levelup tutorial series. So now I'm very familiar with next very popular. - -111 -00:36:38,490 --> 00:37:13,320 -Unknown: Yeah, I think it makes sense to to do like one thing and do it really well, like next or next do. And it's also very clear, what those tools are for maybe a problem with the other like back end frameworks is they don't make it clear enough what their advantage over Express, for example, would be like cola or sales. And like Meteor, I think had a really clear story in the beginning. But these days might be less, you know, less obvious why you should use it. It's a little bit less differentiated, which is a shame, because it's still really cool. And probably more powerful than it was before. But yeah, I - -112 -00:37:13,320 --> 00:37:20,820 -Scott Tolinski: think they got a I think people probably have the wrong idea of what Meteor is at this point, just because of how much it's changed since when it was released. Yeah, - -113 -00:37:20,879 --> 00:37:42,060 -Wes Bos: you know, what I'm bummed about is Keystone j s only got 12 votes on this entire thing, which I was big on Keystone a couple years ago. And it didn't, it seemed to have fizzled out. It was like a react base, full stack Express based CMS with authentication built in. But that's also what you're working on with Vulcan as well. Right? Sasha? - -114 -00:37:42,090 --> 00:37:53,550 -Unknown: Yeah, exactly. I also really liked Keystone. I looked at what they were doing a while back. And I think max from that team went on to create a style components, right? Oh, yeah. - -115 -00:37:53,580 --> 00:37:59,730 -Scott Tolinski: Yeah. I wonder about like ghosts, or something like ghost fits in there. Are you guys familiar with that? - -116 -00:38:00,230 --> 00:38:04,020 -Wes Bos: Yeah. Ghost is the like WordPress but built in Node. Right. - -117 -00:38:04,050 --> 00:38:11,360 -Scott Tolinski: Yeah. I'm wondering where that fits in here. If that would fit in this kind of thing or not? I'm surprised to not see it show up, at least in some regard. - -118 -00:38:11,580 --> 00:38:17,460 -Unknown: Yeah. I don't know if it's, yeah. Like, there's always this difference between backends. And CMS is on frameworks. - -119 -00:38:17,480 --> 00:38:21,810 -Wes Bos: Yeah, yeah. I would say it's a CMS. Yeah, I think so. - -120 -00:38:21,920 --> 00:38:23,210 -Scott Tolinski: I suppose that is true. - -121 -00:38:23,550 --> 00:38:27,230 -Unknown: So just to bring it back to volken. Like, yeah, I think, - -122 -00:38:27,270 --> 00:38:37,830 -Wes Bos: yeah, you want to you want to tell us like what Vulcan is because previously on the podcast, I said, like, why don't we have a Ruby on Rails for JavaScript? And you said, we do I make it. It's called Vulcan. - -123 -00:38:38,420 --> 00:40:02,190 -Unknown: Yeah, so that's really the goal. And I think I keep hearing that, like, oh, graphical is too complicated, like setting up a server is hard. And we need a Rails for graph QL. So I completely agree. And that's what we're trying to build. So like at the stack level, Vulcan is built on top of Meteor. So you know, we were just talking about Meteor, but I think it's better than ever, as a build tool and kind of as a as a delivery system for for apps. But we don't use the actual Meteor data layer anymore, because we use graph QL. And that's a really good combination, also, with react on the front end. So the goal is really to deliver this whole package, this whole stack that just works out of the box. So you don't need to do any of the plumber, you know, plumbing, sorry, and duct tape things together and configure Webpack and do this and that. And the other thing that Vulcan does is because we have that whole view on the whole stack and that control over the whole stack, we can give you premade components for things like data loading forms, showing data tables search, and that makes for a really good developer experience, in my opinion, where you can just, you know, use premade components and have something that works really quickly. So it's kind of the original vision of Meteor where they wanted to give you lots of things that just work but adapted for a more modern ground. qL slash react stack. - -124 -00:40:02,400 --> 00:40:04,050 -Scott Tolinski: Nice. Yeah, I love it, - -125 -00:40:04,170 --> 00:40:36,650 -Wes Bos: putting it on the list of things to try. That's great. All right, so we're gonna move into the section, which is other tools, I thought this was actually kind of cool because like, as far as if you don't listen to this podcast is you're only like outlet of stuff. Not everything is built in JavaScript. And you might just use JavaScript for parts of your application, or just the front end or just a specific piece of it. So you also asked about other utilities that you're using day to day, and it looks like over a quarter of the people are using either Python or and or PHP, which I thought was pretty interesting. - -126 -00:40:36,810 --> 00:41:05,630 -Unknown: Yeah, so this question wasn't worded in the same terms as the other one. So it's just asking people, you know, do what do you use? So they might not necessarily use Python? Like, as much as they used JavaScript? Or PHP, but yeah, it's like, I'm definitely still very present. And I think that makes sense. Like, it's rare to find developers that only do TypeScript. Maybe there's more and more of them. Yeah. But especially on the back end, I think you still need a mix. Sometimes. - -127 -00:41:05,670 --> 00:41:16,710 -Wes Bos: I'm surprised that Python I would have, I would have guessed that at least a quarter of the people also write PHP, but I'm surprised that Python as well, I guess, those circles I've done yeah, I - -128 -00:41:16,710 --> 00:41:24,480 -Scott Tolinski: don't think I'm that surprised about it. I mean, it's used a lot in enterprise and all sorts of stuff. I mean, there's a lot of amazing stuff built with Python. So - -129 -00:41:24,600 --> 00:41:47,610 -Wes Bos: yeah, it's it's used a lot in enterprise. And it's used a lot in like academic circles. It's one of the weird things about my sublime text book, it's still sells really well to Python developers that work at universities that are just doing data analysis, which is amazing. Like, they're not web developers at all. They're just analyzing data with Python, and they need to know how to use Sublime Text. That's the editor for Python. - -130 -00:41:47,630 --> 00:42:34,230 -Scott Tolinski: I used it for 3d stuff when I was in school. So yeah, I think Python is pretty versatile. Oh, yeah. I mean, I think one of the not so shocking ones is the text editors, one where you can see that nearly like the sheer amount of people using VS code just absolutely dominates the charge vs. Code is what is the I don't even know what the percentage here but is like 14 and a half thousand percent? Yeah, it is absolutely crushing it. And it's not surprising if you use VS code. You know why if you don't use VS code, you should maybe take this chart as a little bit of a hint, because it is really, it's pretty darn slick. So I didn't think that was that surprising. But I think it might have been a little bit surprising just how dominant it was. - -131 -00:42:34,290 --> 00:42:41,630 -Unknown: Yeah, I actually started using VS code. After listening to you guys podcast. True story. - -132 -00:42:41,760 --> 00:43:10,770 -Wes Bos: I don't want to toot our own horn. But I think we've converted quite a few people after that podcast, which is why but a year and a bit ago, we converted a lot of people because like, that was always the thing. We were like, What's so much better about it. And it's hard to talk to someone like you need a full hour to sit someone down and be like, these are the freakin awesome pieces of VS code. And this is why it's so much better than anything out there. It's It's It's insane how popular it's become in just like two years. It's It's funny, because there's like stages of VS code usage. There's - -133 -00:43:10,770 --> 00:43:47,610 -Scott Tolinski: the well, I'll check it out. People are talking about it. Okay, I hate it. I quit this forever. Let me go back to sublime or atom. And then you're like, oh, okay, we were still talking. Maybe I'll try it again. Oh, I get it. I feel like that's happened to like most people who picked it up because they're so used to whatever they're using, but it's like ID light. I mean, it's like using something like WebStorm with having a nice interface and more customization options and stuff like that without maybe some of the overhead. And it's free on top of that as a pay supposed to like a paid ID. So I think it's once you use it and understand it's easy to see it takes off. It's a great platform. - -134 -00:43:47,640 --> 00:43:53,550 -Wes Bos: I had zero qualms with Sublime Text. I was like, I'm so happy of Sublime Text. - -135 -00:43:53,550 --> 00:43:58,560 -Scott Tolinski: I had problems with you using Sublime Text, because I knew I knew how much better vs. code was. And I - -136 -00:43:58,560 --> 00:44:12,990 -Wes Bos: just tried it. I was like, Where has this been all of my life? What if I've been missing this amazing, and but it really frustrates the vim people, because they've had that for since like, 1920, or whatever. But it's amazing. - -137 -00:44:13,379 --> 00:44:24,780 -Unknown: Yeah, I like that I still discover new things like every week, like I'll get a random key combination, and then a little menu pops up. And he's like, do you want to eliminate old bugs from your code? Yes, - -138 -00:44:24,900 --> 00:44:36,330 -Wes Bos: yeah, you just mash your head against the keyboard or like, That should be your thing, like once a day, open up the command palette and find one thing in there that you don't know what it does and figure out how to use that because it's so helpful. - -139 -00:44:36,570 --> 00:45:22,890 -Scott Tolinski: I think one of the I don't know if this is surprising. We did talk a little bit a little bit about at the very beginning, but how most people seem to feel that JavaScript is moving in the right direction. Most people feel like JavaScript, I would say less people than the past two years feel like JavaScript is overly complex. So people are really starting to come to terms with the complexities of building apps in JavaScript. And I think The the enjoyment has gone up how much people agree with that they enjoy building apps with JavaScript. Yeah. And, and to me, I don't know if any of these things are surprising, because I feel the same way. I feel like things have gotten better. But at the same time, you know, you see online and people complain about things and whatever. So it's nice to see that overall, look, community feels like things are getting better. - -140 -00:45:23,040 --> 00:45:48,360 -Unknown: Yeah, and I think JavaScript developers, like we always have this complex are always another real language it was created in a week. And when you look at that, it kind of tells you that Actually, no, people do like it. And it's you don't have to be ashamed of using JavaScript, like, especially now with all the new developments in the field. I think JavaScript is just really like a real language. Like, there's no, there's no way around it. it's here to stay. You know, - -141 -00:45:48,660 --> 00:45:52,200 -Scott Tolinski: again, we got types, we got types now in TypeScript. So there, yeah, - -142 -00:45:52,470 --> 00:45:53,010 -Unknown: yeah. - -143 -00:45:53,010 --> 00:45:54,270 -It's a it's a - -144 -00:45:54,270 --> 00:46:01,050 -real language unless it gets replaced by like, you know, an evolution of diverse bit like reason, but it is pretty cool. - -145 -00:46:01,140 --> 00:47:12,630 -Wes Bos: Yeah, yeah, it very well might happen. And but it's not something to people email me about this all the time. They're like, what if it changes and all of my all of it is out of like, what if I'm obsolete and all this, like, we will for sure, see it happening like three, four years, like we saw react coming for versary or four years, and at the time it became popular, then it's just time to pick it up. So I don't think it's really something that you need to sweat because if something like reason pops up, you'll hear about it on the show quite a bit is the same thing with like, I was thinking about that the other day with electric cars, where people are like, oh, all those technicians that work on these, like old cars are gonna be out of a job in two years. And it's like, no, like, they're probably just gonna move over to servicing, like, the good ones are just gonna learn to service electric cars, some of them are going to move into doing other stuff that is somewhat tangentially related to the automotive industry. And then the ones that like dig their feet in and and forever, hold on, there'll be a couple of them that maintain the old gas cars for the next 80 years. And then the other ones will just probably fall by the wayside. But there will be plenty of time that you will see that sort of thing coming. Yeah, those - -146 -00:47:12,630 --> 00:47:17,340 -Unknown: guys will go work as a high paid consultants for large enterprise companies. - -147 -00:47:17,370 --> 00:47:29,640 -Wes Bos: Yes. That's true. I often wonder about that. That's one thing I was like, like, how many people out there are slinging like Angular one. I know. There's lots and lots of Angular one app still out there. - -148 -00:47:29,670 --> 00:47:30,870 -Scott Tolinski: Yeah. If you're the expert, - -149 -00:47:31,020 --> 00:47:44,520 -Wes Bos: and there's some x there's a couple experts out there that are because some of these apps are huge. There's no like he entire banking websites have been built on Angular. You can't just switch that whole sucker over into Angular two. It took them years to build this thing. - -150 -00:47:44,700 --> 00:47:45,690 -Scott Tolinski: Yeah, word. - -151 -00:47:46,590 --> 00:47:50,100 -Wes Bos: last little section I want to go to is the award section. I really like this so - -152 -00:47:50,100 --> 00:47:53,280 -Scott Tolinski: cute. I'm gonna just gonna say it's super cute off the top the - -153 -00:47:53,280 --> 00:47:59,190 -Wes Bos: cutest thing I've ever seen. Yeah, why don't we each pick a couple and just wrap it? Well, let's each pick two of our favorites. - -154 -00:47:59,220 --> 00:48:40,350 -Scott Tolinski: So for the people who aren't looking at this screen, there's like little boxes with question marks and you hover over it, it gives a nice little pause. And it sort of like a reveal. Like I have all this stuff that makes it like fun to look at. Because it's like a reveal. In the end, I think awards are one of those things that are always like nice to have a nice little celebration or presentation. So highest satisfaction award, the awarded to library with the highest percentage of satisfied users goes to jest with 60 or 96.5 percentage of users will use it again. And I'm adjust user I love just I moved over from mocha, and I used react testing library with jest and I couldn't be any happier with it. So I'm part of that. 96% right there, - -155 -00:48:40,380 --> 00:48:50,880 -Wes Bos: the runners up, Express 94.3 in graph qL 94.2%. So some very satisfied users on Jess, express and graph QL. - -156 -00:48:50,970 --> 00:48:55,710 -Scott Tolinski: Yeah, I am not really surprised on any of those to be honest. Maybe Express No, not the other ones. Yeah. - -157 -00:48:55,980 --> 00:49:05,190 -Wes Bos: What's another one that we got here? Most mentioned awarded to the library. I mentioned the most in the other libraries view x. I don't know what is view x? - -158 -00:49:05,250 --> 00:49:07,350 -Scott Tolinski: Is it a redex view? Yeah, type thing? - -159 -00:49:07,380 --> 00:49:14,010 -Unknown: Yep, exactly. It's the view state management library. That's pretty neat. It's pretty neat. Talked about - -160 -00:49:14,010 --> 00:49:17,790 -Wes Bos: you have any ones that really surprised you here Sasha. - -161 -00:49:18,030 --> 00:49:28,770 -Unknown: I thought the highest interest one was neat like graph qL and then runners Ops, storybook and electron like graph qL I kind of expected that storybook took me by surprise storybook. - -162 -00:49:28,830 --> 00:49:39,090 -Wes Bos: Yeah, that does Yeah. Wow. And storybook is the React component tool where you you write your components in isolation and you can view them in their different states - -163 -00:49:39,330 --> 00:49:42,720 -Unknown: it's not just react actually no it works for view then I think - -164 -00:49:42,840 --> 00:49:43,440 -Wes Bos: Oh really? - -165 -00:49:43,440 --> 00:49:46,860 -Scott Tolinski: Yeah they it's no longer react storybook. It's storybook. Sorry, - -166 -00:49:47,100 --> 00:49:48,150 -Wes Bos: it works with what now? - -167 -00:49:48,959 --> 00:49:51,600 -Scott Tolinski: Anything react Angular view, Ember. - -168 -00:49:51,749 --> 00:50:23,460 -Wes Bos: I did not know that. All right, with anything you're you're gonna get some some criticism. One thing I saw there was a whole YouTube Video devoted to how Angular was not properly represented in here. Yeah. And that very well may be the case, it's hard to like get out of the React circle, I find myself hard to get out of the React circle, because that's my thing. I teach people how to learn react, and I kind of get into the React circle. So added, I'll just put the video in there for for their own sake. I think we talked a little bit more about that as well. - -169 -00:50:23,550 --> 00:50:41,880 -Scott Tolinski: I almost left a comment on the video about how react routing is not bad or confusing. He seemed very confused about react routing. It's like, you don't have to use react router one, but two, like it's not confusing at all. Like, I don't understand that complaint. But I held back. I did not know leave a comment. - -170 -00:50:42,480 --> 00:50:45,510 -Unknown: Yeah, I haven't seen that video. I'll take it out after - -171 -00:50:45,840 --> 00:50:52,800 -Wes Bos: Oh, it's some hot drama. It's gonna get you again, get you real spicy. Make sure you go for a cool down walk right after? - -172 -00:50:53,460 --> 00:51:04,530 -Scott Tolinski: Yeah, there's some hot takes. I mean, I think there are probably valid points. But like, at the same time, it's not like you limited the survey in any sort of way to the React community. It was it was definitely spread far and wide. So - -173 -00:51:04,680 --> 00:51:40,560 -Wes Bos: yeah, I'm also on Twitter can see dodge just as ask about what they're going to do to make it representative of the community and not just the involved slash Twitter community? I don't know, I think we kind of talked about that. I've emailed about this thing before to my list. And my email list is definitely not just Twitter users, because it's much larger than that. And like, I think that it does a good job at I do a good job of raking in people who are not on Twitter every single day at the end are it's sort of hard to like, what are you gonna go start knocking on people's doors or making it part of a government mandated poll or something like that? - -174 -00:51:40,590 --> 00:51:46,950 -Unknown: Well, I just tell people, it's your fault. Like, well, all the people came from West his mailing list to ask him. - -175 -00:51:49,560 --> 00:52:01,500 -Wes Bos: Yeah, and I don't know if you have stats on how many people have come from my mailing list or not. But like that would also probably skew it a little bit more in the React direction as well, since that's kind of my thing as well. That being said, like, - -176 -00:52:01,620 --> 00:52:17,850 -Unknown: I think Laurie vos from NPM was saying on Twitter that our stats match, there's so it's not like, you know, that's like we are showing 90% for react and then everybody else is showing 50% I think all the different surveys kind of show similar numbers. - -177 -00:52:17,850 --> 00:52:18,540 -Scott Tolinski: Mm hmm. - -178 -00:52:18,810 --> 00:52:36,300 -Wes Bos: The other stat that everyone's talking about is the gender breakdown. This happened to the StackOverflow survey as well, where it comes out and it's overwhelmingly male. So I don't really know, too much to say about that maybe with three white dudes on a podcast can try to figure this out together. - -179 -00:52:37,110 --> 00:53:56,400 -Unknown: Yeah, I was surprised to be honest, like I knew about the gender gap problem, obviously. But I thought it was more like, you know, 90% women or 15%. But in our result, it's like 5%, and stack overflows, results, it's six or 7%. So it's really tiny. And I think, even if you know not to get political, but even if you believe that, oh, women are not interested in coding, or it's not their thing, and I don't believe that, but even if you do you have to admit that 5% there's got to be like other factors, right? Like, that seems really, really low. Yeah, it means that there's definitely things we can do. There's, it's kind of gotta be like low hanging fruits to get that up to at least 15 20% as a as a first step. And, like, I don't know what that is. And another thought I had about this is like, I think it's kind of a paradox, in a way, because all the events, recently have been doing a really great job of promoting diversity, women, minorities, and so on. So I kind of had the problem in the overall ecosystem, because like, yeah, most of the conferences I go to, or I see on YouTube, have a lot of women, speakers and a good chunk of women in the audience as well. And then you see stats like this one, and they can kind of brings you down to back to Earth. Like, Oh, actually, - -180 -00:53:56,400 --> 00:54:12,810 -Scott Tolinski: we're not doing so great. After all, well, maybe it's maybe it's a problem, too, that we are addressing in a better way now, so that in the future, it's better. And we might not see the results of the efforts until later, you know, maybe a couple years down the line. But yeah, no, I totally agree. - -181 -00:54:12,900 --> 00:54:30,960 -Wes Bos: I'm just trying to look for my stats on Twitter and YouTube, my Twitter audience is 80% male and 20% female. So that's good to see. It's, it's, it's not perfect, but it's it's much higher than the respondents to the survey, and I don't know what they look like on YouTube. I don't know where to find it. - -182 -00:54:31,020 --> 00:55:15,420 -Unknown: Well, Wes, I think you do a great job of being like, approachable and like, you know, welcoming to everybody. And I think that's super important. Because often people think, well, if you want to have more x people, you have to tailor your content to x. And I think that's not true. Like if if you want more minorities, women, you have to make yourself more approachable. You know, not use jargon. Not use words. Like you know, obviously it's easy to see that to do this and that that's kind of already targeting your contents to people who are in the know, in a way. And all these little things I think are super important. And they're not so much about targeting a special group of people who you want to attract, but more about making yourself more friendlier. And, um, yeah, - -183 -00:55:15,600 --> 00:55:39,480 -Wes Bos: yeah, I firmly believe that being friendly, being approachable. That's one thing I learned. When I first got my start in teaching was was through ladies learning code. And it wasn't about like, trying to cater or something like that. It was it was just about like, be a good person. Listen to what people are saying and try to be as helpful and approachable as you possibly can. Yeah, exactly. Be excellent to each other. - -184 -00:55:39,600 --> 00:55:44,640 -Scott Tolinski: Yeah, I think that we said that so many times on this show. Just be cool. Just be cool. Come on. - -185 -00:55:45,030 --> 00:55:50,610 -Wes Bos: Alright, let's move into our last section, which is sick pics. Sasha, did you bring a sick pic for us today? - -186 -00:55:50,850 --> 00:55:51,360 -Unknown: Oh, yeah. So - -187 -00:55:51,360 --> 00:56:26,970 -my sick pick would be like, just DIY stuff. And woodworking because I've always done stuff on the computer. And I think it's different in the US. But like, living in a big city in Paris, it was really not common to have a garage or a shop and house with Well, you have no garage, you have like a tiny apartment. So woodworking or any kind of DIY stuff isn't really common there. And recently, I've started picking that up mainly to build myself like training equipments for climbing like climbing boards, stuff like that. Yeah, I - -188 -00:56:26,970 --> 00:56:28,530 -Scott Tolinski: see your pegboard behind you. - -189 -00:56:28,560 --> 00:56:29,910 -Unknown: Yeah, yeah, I - -190 -00:56:29,910 --> 00:56:31,470 -Scott Tolinski: wanted to make one of those. - -191 -00:56:31,530 --> 00:57:21,720 -Unknown: It wasn't hard to make. But it was a Well, except that I messed up, like every single step will actually it's kind of interesting, because when you code or when you design online, on the computer, you have undo. And it really makes you work in a way, at least for me, that's very like, free form. And I can just start hacking and fix bugs later. And then when you do woodworking that doesn't work at all, like, you know, if you draw them in the wrong place, like that's it, you're screwed, like you have to start over with a new board. And it really forces you to to slow down and make plans and measure things. And be sure that you're doing the right thing at the right place at the right time. And I think that's that's almost like therapy for me, because it's like helping me shore up my weakness in that area. - -192 -00:57:21,899 --> 00:57:27,300 -Scott Tolinski: Yeah, you're like working with intention? Yeah. Rather than just like yeah, going for it. That's this cool. - -193 -00:57:27,540 --> 00:58:03,690 -Wes Bos: My sick pick is just because of your French accent. So there's a YouTube channel I watch called Alex French guy cooking. And he's a x engineer turned like YouTube cooking personality. And he always goes into the actual science and, and building of the tools that he needs to cook it. And also, it's funny that you say that because like running around Paris, he is in Paris. And he still manages to make these things work out of his tiny little studio. So fantastic recommendation. It teaches you a lot about cooking his presentation as well as great as well as the actual things that he builds to help him cook. Yeah, - -194 -00:58:03,930 --> 00:58:10,140 -Unknown: I love his channel as well. Of course, I know him very well, because we're both French so as you can imagine, yeah. - -195 -00:58:11,310 --> 00:58:12,930 -Wes Bos: Neighbors you went to school together? - -196 -00:58:13,170 --> 00:58:17,190 -Unknown: No, I didn't know him. But I liked his series on ramen, and passed on. - -197 -00:58:17,430 --> 00:58:18,030 -Wes Bos: Oh, yeah. - -198 -00:58:18,210 --> 00:59:39,870 -Scott Tolinski: That was amazing. Nice. My sick pick is since you did YouTube, I'll do YouTube. This is something that took place a couple of weeks ago, probably by the time you're hearing this, like at least a month ago. And this is the silverback open is a B boy breakdancing battle. There was like the best in the very best in the world in a, in a just an awesome competition, maybe some of the greatest physical stunts you're ever see. And so there's a playlist that has all the videos from it. But some of this stuff's amazing. And if you really want to see some amazing stuff, it's probably going to be maybe a little less impactful for those of you who have never watched breakdancing before. But there's a the B girls the the women's competition, just saw an absolute explosion of talent this year. And like, there was basically one B girl who you just assumed she was going to win because she's dominant. And then all of a sudden, there's like people coming out of nowhere who were like 16 years old and just unbelievably good. And the competition's great. It's some of the most extreme athletic stance, you'll see. If you don't watch anything in this watch the amazing moments at silverback open video, I'll post that in the thing here, the amazing moment that silverback open is absolutely mind blowing. So definitely something to check out if you're interested in human movement at all. - -199 -00:59:40,410 --> 00:59:42,420 -Wes Bos: Awesome. What about shameless plug Sasha? - -200 -00:59:42,540 --> 00:59:59,850 -Unknown: So I think I already applied like Vulcan js, my framework, so I'm going to go with that. Yeah, it's pretty ambitious. I think what we're trying to do, but I would really love for people to try it and tell us what they think. You know, it's free open source. There's a tutorial that you can do in like 30 minutes, so you don't have too much to lose. Yeah. - -201 -00:59:59,850 --> 01:00:09,570 -Wes Bos: I'm just gonna shamelessly plug all of my courses Wes Bos calm for slash courses. If you want to learn anything about JavaScript or react ESX node, it's I will teach it to you. - -202 -01:00:09,930 --> 01:00:37,560 -Scott Tolinski: Yeah, I'm gonna plug my yearly subscription level up pro level up tutorials, comm forward slash pro sign up, you get access to all of my tutorial series. There's a new one every single month including the latest one, which is going to be level one TypeScript for those of you who have seen TypeScript, epic rise in popularity inside on the state of JavaScript and want to learn coming from somebody who maybe has never even considered learning TypeScript. This course is for beginners. So level one. TypeScript is available level up tutorials for pro subscribers. - -203 -01:00:37,800 --> 01:00:56,760 -Wes Bos: Awesome. So that's it for the episode. Thank you so much to Sasha, for taking time out of your Wednesday. This is recording this on a Tuesday night. It's 10pm. My time obviously Sasha is in Japan, we've always tried to link up but it's it's almost impossible just because of the huge time difference. But thanks so much for coming out. - -204 -01:00:56,940 --> 01:01:03,210 -Unknown: Yeah, thanks so much for having me. I know you guys don't usually have guests so I really appreciate you making room for me. - -205 -01:01:03,510 --> 01:01:05,370 -We don't absolutely have guests this is - -206 -01:01:05,400 --> 01:01:42,150 -Wes Bos: we've never before. If you liked this tweet us at syntax FM if you don't like it also tell us because we are thinking about not if you just don't like Sasha don't tell us that but we are thinking about having guests on in the future. But not like your typical the same guests talk about the same thing. We're actually interested in like interesting stories like, like Sasha told us about how did you actually build this thing? So we've got a huge list of possible one. So if you're interested in that, make sure you tweet us let us know your thoughts. Word. That's all I got. That's it. All right. Thanks for tuning in. See you next week. Hey, space, - -207 -01:01:42,390 --> 01:01:43,740 -Scott Tolinski: can we get a piece Sasha? - -208 -01:01:43,740 --> 01:01:45,600 -Wes Bos: Can you say peace, peace? - -209 -01:01:45,630 --> 01:01:47,880 -Unknown: Yeah. See ya. - -210 -01:01:49,980 --> 01:01:59,670 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/transcripts/Syntax99.srt b/transcripts/Syntax99.srt deleted file mode 100644 index 5e88003ae..000000000 --- a/transcripts/Syntax99.srt +++ /dev/null @@ -1,260 +0,0 @@ -1 -00:00:00,359 --> 00:00:24,600 -Announcer: Monday, Monday, Monday, open wide dev fans yet ready to stuff your face with JavaScript CSS node module, BBQ Tip Get workflow breakdancing, soft skill web development hasty as crazy as tasty as web development treats coming in hot here is Sarah CUDA boss and Scott Taylor. Totally in ski. - -2 -00:00:25,920 --> 00:01:19,950 -Wes Bos: Welcome to syntax. This is the hastiness, the tastiest web development podcast out there. Today, we're gonna be talking about the costs of running a business. One of the podcast I love to listen to is Chris coiour is code pen radio. And they always dive into different aspects of actually running a startup in a business like that. And they just did, did one called software we pay for and just went through all the different subscriptions and software that they pay for. And I thought it was kind of interesting to see like, what does a big business like code pen or I don't know how many employees they have. But it's more than just Scott and I, which is just one. So I thought it'd be interested to also share sort of what does it cost to run a business when you're trying to do the solo print printer type of thing that Scott and I do. So looking forward to that today's episode is sponsored by contentful. And they've got some sweet socks coming your way. You want to talk a little bit about that, Scott? - -3 -00:01:19,980 --> 00:02:57,270 -Scott Tolinski: Yeah. So content Ville is one of those services that makes working in the sort of modern web just super duper, duper easy, because a lot of times, what we're working with is front end code. And we really struggle with some place to not only hold our data, but access it easily. In relational data, just sort of all sorts of things that you might be working with. It's it's beyond just like sort of blog content or something like that. It's really the answer to the modern CMS. So content fall is, as they say, it's beyond the headless CMS, it basically allows you to store all of your data and access it very easily from whatever your front end code may be, whether that's a native app, whether that's a watch, whether that is a website, or literally anything, maybe it's a drone, maybe it's a drone that's hitting this API and doing something with it. It's just the the beauty of this sort of decoupled sort of modern stack. So content, fall is a great place to keep your data, the interfaces amazing. And it just makes working with data super duper, duper easy. So for those of you who have worked in something before, like a CMS, Drupal or WordPress or something, and you're wondering, how does this all fit into sort of the modern headless stuff, check out content fall at content fall.com forward slash syntax FM, if you sign up to content full with this URL, you will get a free pair of socks so you just don't enter your name and stuff like that you need to have a content full account before you do this. So sign up for content full collect a free pair of socks and Wes and I both have these socks. They're amazing. I was wearing Ahmed syntax ly - -4 -00:02:58,560 --> 00:02:59,280 -Wes Bos: very cool. Yeah, - -5 -00:02:59,310 --> 00:03:16,200 -Scott Tolinski: yeah, I'm a big fan. They they look really super cool. So either way contentful again is a great way for you to store your data in open source of flexibility involved there. So again, content fold.com forward slash syntax FM or check the show notes for a link to more information there. - -6 -00:03:16,440 --> 00:03:35,700 -Wes Bos: Yeah, we should also say this is not one of those you have to sign up with a credit card and then cancel it signups This is one of those to sign up for it try it out. See what it's like and grab your pair of socks. Yeah, that is seems to be the swag recently seems to be overtaking t shirts. At the last conference. I got more socks than I did t shirts. Yeah, just an interesting t shirts got - -7 -00:03:35,700 --> 00:03:40,290 -Scott Tolinski: lots of socks, but I'm pumped because I got too many t shirts now that sucks. - -8 -00:03:40,380 --> 00:04:16,110 -Wes Bos: There you go. Alright, let's jump right into it things that we are running business we're just going to kind of go category by category and talk about we have the first one is email I personally use G Suite to run my own email and I actually signed up for it before it was like a paid product same or before you knew paid for it like at the very small level I think now it's about five bucks a month per user. I really like it because you can like have multiple domain names so I have Wes Bos calm I have my wife so main name I have our business name and you can just alias those and have Wes at all of these different names that you have. You use G Suite as well Scott - -9 -00:04:16,130 --> 00:04:24,750 -Scott Tolinski: Yeah, I think it would might have been after it was even cost money but at the time I purchased my domain It was like get a free G Suite account with every domain you buy. - -10 -00:04:24,870 --> 00:04:25,860 -Wes Bos: That's for life. - -11 -00:04:25,880 --> 00:04:27,300 -Scott Tolinski: Yes for life. Yep, - -12 -00:04:27,300 --> 00:05:49,830 -Wes Bos: that's really good. I know you if you also are a not for profit, you can get validated. In Canada there is a thing called TechSoup which will validate you as a not for profit. And then you can take that TechSoup number and apply for a free Google Apps account which it took me a couple months to get through all the paperwork but well worth it for that nice also with email I use something called missive. So I have an assistant who tries to process most of my email. I get emails probably my biggest pain point in my life where I just get so much of it. I probably get like 300 a day. And a lot of it is just a quick little questions that my assistant can answer. And what we do is we use this thing called missive which hooks into your email inboxes. And it sort of provides this chat interface that allows you to talk alongside email, my assistant and I can comment on emails sort of right in line with them, like this person had bought it, but they forgot to put the coupon code make sure you refund them or, hey, I talked to this person on the Instagram make sure you send him a pack of stickers or something like that. And and then they will then reply. And it's cool because they can reply from their own address. They can reply as me which we don't really do because i don't i don't think that often sounds good. So it just it gets sent off as as my assistance name under the support email address. So I pay for that monthly looks nice, too. Yeah, it looks nice. It's really nice. - -13 -00:05:50,039 --> 00:06:06,450 -Scott Tolinski: I it's funny because I met their website right now, just get checking out some features because you know, I might need to look at something like this myself. And right up there. Right below one of the first images is a quote from Wes Bos. Is it really I've been loving missive app for email. Yeah, - -14 -00:06:06,659 --> 00:06:52,380 -Wes Bos: I didn't even know that I was on this. It's fantastic. That's I guess I tweeted that out about a year ago after I had been using it for about a month. And I do really love it. It's great. It's built by like actual very technical folk, like, obviously the developers that build it. But I think like everybody at the company, I think it's built in react. So you can run it on the in the browser or on the desktop. There's a nice iPhone client for it as well. So I've been been liking it a lot. A lot of people also use one called front front app. The one thing that does that I wish it did is it hooks into Twitter, DMS, that's one area that is just a nightmare for me is I have open DMS and I'll get like 30 a day and I can't I can't possibly make them all and missive doesn't do that. But I just love Missa for everything else. So if that's a good one, what else for email? - -15 -00:06:52,530 --> 00:07:26,580 -Scott Tolinski: Yeah, for well for like sending emails like this is the next category which I personally am just using MailChimp and mandrill still, which we've talked about this like a year ago, and I mentioned I was yet looking to get off of them. I just don't have the time to migrate any of that stuff. And you would told me about mandrel rewriting URLs. And now like totally freaks me out. Like, I'm totally freaked out about getting off mandrill because my URLs have been rewritten. So like, bite that bullet right now? Or do I figure out some sort of a fix for it? I don't know, I'm just mad about that. - -16 -00:07:26,760 --> 00:08:15,180 -Wes Bos: I just say like, the problem I had with mandrill is that I moved away from them. And then they close their free account, right. And all of my URLs stopped working. But the fix was to formally close my account. And then the Euro started working again, interesting. Like they still respect those like four or five year old URLs that I sent out. And they still work now. But I had to formally close my account to get it working. And now I intentionally don't use like, I use postmark for sending my transactional emails. And they have the ability to rewrite your URLs to track if people have clicked on them. Yeah. And I don't think I use that just because I'm a little bit scared of a company like this going under right and then breaking all of my past URLs because that's a huge support nightmare. It's amazing how many people go back to five year old emails and reply to it like, hey, this link isn't working or something like that. - -17 -00:08:15,210 --> 00:08:25,590 -Scott Tolinski: Right. That makes me a lot less concerned. And I think that opens up. I like postmark anyways, I've been eyeing postmark, I haven't a postmark account. So yeah, I needed to just move over. - -18 -00:08:25,650 --> 00:09:27,990 -Wes Bos: Yeah, postmark is good. It's so postmark is very cheap. Most of these things, sendgrid, mailgun, all of them are pretty cheap. I think for 1000 cents, it's like $1, or something like that. So transactional email is not really a line item in the budget, what is really expensive, by far my biggest cost is sending marketing email, which I use drip for. And drip is awesome, because it It allows automation, as well as very fine grained control over emailing people who have watched certain videos or have watched a certain amount of time or all that kind of information. So I really like drip. I'm currently pruning my email list just because I think it cost me like, like $26,000 a year or something like that, just to maintain my email address is like, insane. It is. But they say, you should never complain about your email list cost. Because if you have an email list that big, you should be making at least that much back from it. So yeah, I'm calling the list right now just to get rid of 40,000 people or something that will save me a couple couple thousand dollars a year. So I'm excited about that. - -19 -00:09:28,229 --> 00:10:03,290 -Scott Tolinski: Yeah, I'm still on MailChimp for sending those kind of marketing emails out. I don't love it. They've been changing the interface up, you know, and I'm typically not one to complain about interface changes being good or bad or whatever. And it's not a problem. But I'm just just like, I don't know. I don't know. I don't know how I feel about it. I mean, I like MailChimp To be honest, but I'm not like head over heels about it. So I'm looking for something maybe different. I don't know that the whole email list thing is is expensive and it's a big big time sink and having to reenter To use all my templates and stuff like that, so I don't know, we'll see. - -20 -00:10:03,570 --> 00:10:34,040 -Wes Bos: It's really frustrating this stuff because I don't like spending time on this stuff. I'd much rather just make more content. And as a business owner, you sort of have to spend at least some time on it because it works so well. But you're right, I kind of rather just just spend my time on making more content. Like I could see people email me all the time, like, why are you not doing Facebook and putting way more automation into your email list? You could be like, I'm like, Ah, yeah, I could. But also, I love just making stuff. So I'd rather just build more courses, - -21 -00:10:34,040 --> 00:11:26,730 -Scott Tolinski: I just want to pay an expert to do it all for him. Yeah, you just take care of it. Because seriously, it's one of my least favorite things to do in the entire world. Okay, so next, we have sort of transitional costs, which we both we both work with payment processors. So basically, anytime you're accepting money on the internet money comes in, and the fact that your credit card needs to be processed or charged, or PayPal has server fees, or things like that, these companies make what's called like a merchant fee. So the merchant fee comes out as a percentage of whatever's coming in, whether it's a few cents here or there, it adds up. And it's one of those things that well, you you just sort of accept because that's the only way to get paid via credit card. It's been this way before the internet, when you have physical machines do accept credit cards and anything like that. So it's not like a big fee, it cuts in just a little bit. But again, you know, it's just a line item in your budget sheet at the end of the year. So - -22 -00:11:26,970 --> 00:12:15,060 -Wes Bos: it doesn't hurt as much because it comes off of the money coming in, you never have to pay it out. But it does. If you add it up at the end of the year, it is quite a significant amount. So stripe and PayPal are both 2.9% plus 30 cents of every transaction, I also pay a higher fee than that on paypal. So if you ever like sitting there wondering, should I use PayPal? Or should I use stripe? Please use stripe on my website. PayPal is I think at least 1% more expensive unless you're from Canada, because I'm a Canadian merchant charging us to everybody else. So they they get you on that which is pretty, pretty expensive. But I understand people people still like to use PayPal, because their credit card is saved inside of their PayPal. So they a lot of people still pay by credit card, but use their paypal account to check out. - -23 -00:12:15,360 --> 00:13:25,470 -Scott Tolinski: Yeah. And Braintree has got 2.9% at like a 30 cent fee per one. And again, same thing with me. I mean, I noticed that a lot. A lot of credit cards are done through PayPal itself. It's not just like your PayPal budget. Next is software. This is actually a big one for me, I end up buying a lot of software. I guess that's one of the cool things about having a tech company is that you sort of I don't know me personally, I know what kind of work goes into writing good software. And so when somebody makes good software, I don't hesitate to buy it really quickly, and then see if I like it. I don't spend service for frivolously on software, anything, but I definitely I like to take extended trials with things and oftentimes that means purchasing it. So what kind of stuff do do I buy? I think we both have a design software on here, actually have a couple of design software's that I've purchased. I've purchased sketch, you know, I subscribe to it. I've purchased figma. And those are my two main users. I use figma pretty much 24 seven. I don't know when the last time I've opened sketch was it was probably two, it was probably to check on something and one of my tutorial series or something like that. But for the most part, I just don't even think of sketch. It's not even in my my dock anymore. - -24 -00:13:25,650 --> 00:14:14,310 -Wes Bos: Yeah, I'm on sketch right now, I really like sketches model because you pay for one year worth of updates. And then it just you're just stuck on that last update. So I actually ran out of updates, but I was just happy with with what was going on with sketch. I wasn't using it heavily. And then I just sat on the an older version, probably three or four months. And then I renewed for another year, just last week because I wanted some of the new features. So I love that pricing model pay once get it forever, or get it for get updates for a year. And if you want updates fast that Yeah, I'm not a huge fan of the monthly payment. I know that a lot of businesses need to do that to stay afloat. But something like I use text expander and text expander like over two years ago moved to a monthly purchase wheel on an old version of text expander it seems there's no way I want to pay like eight bucks a month to spend snippets. - -25 -00:14:14,310 --> 00:15:01,170 -Scott Tolinski: It is weird for an app like text expander. That's an app where like so figma is free to just flat out use. Like if you want to use figma like you use sketch, it's free. And you get full featured, you can do everything you want to do, what you end up paying for is the team sharing in like sort of cloud storage between teams features, like it like I can have shared component libraries between my team and draw these files and you can have a whole bunch of people on it. And at that point, you can understand paying monthly because it is it's it's hosting content on their servers. It's doing all that sort of stuff that is is less of using it like an app and more of it like a web service. Where like text expander man it's it's just an app. Like Yeah, yeah, I can't imagine they're paying too much to store Anything if they are - -26 -00:15:01,200 --> 00:15:45,660 -Wes Bos: Yeah, they have like a, like a cloud off, which is used to be able to just sync it with Dropbox. Yeah. But now they have like some sort of cloud thing, which, which stores like that. Yeah, I get it because they have to update it every time there's a new operating system, they have to update it and release bug fixes for it. And something like things, I use things for my to do list manager, and on things version three, and I think I was on things version two for like, seven years or something. And I finally just paid it and something like that. I paid for that thing. Like, like 30 bucks twice in my life. And it's, it's an app I use every single day. And I feel like they probably don't charge me enough for that. Yeah, it's kind of those weird, weird spot where you want to charge people as much as you possibly can. without pushing too hard on there. - -27 -00:15:45,689 --> 00:17:01,980 -Scott Tolinski: Yeah, for my to do list app, I used to do it I've been using it forever and ever and ever. I also pay for that just gives you a little bit extra features. It's it's like one of the they do a really good model where they give you like a full app out of the box for free. And then like the the additional features that you pay for are good. But they're not necessarily like the most incredible things in the world. It's almost like you're paying for it to help support and get some extra stuff. I also use an app called notion which I had as a stick pick, I actually don't know if that episode has aired yet. So a notion is an notion is an app that basically is like sort of like a database. For web developers, it feels very much like creating web pages, because you can link between documents and stuff like that. You can import a whole bunch of default templates from to do lists to cabanne boards to database tables and things like that. You can do like references and calendars. And it's like a playground for general note taking application is just super cool. It currently runs my entire life. So yeah, check out notion have a link in the what's it called in the description. And yeah, again, it's my new favorite app. It's sort of like living in this app. Right now. I'm just a big fan. - -28 -00:17:02,250 --> 00:18:31,050 -Wes Bos: Next up, we have services, just one thing under here, I pay for a peel box every year, he has about 300 bucks. And that's just because if I want to put my address on something, or if I want to my stickers get sent back to the Pio box. So that's just like one little cost that you have there. Next up, we have domains, where do you register most of your domains got nearly all of my domains are at name. COMM. So yeah, mostly hover. Although Pretty soon, I have a couple at name calm, I have a couple on Gandhi the.af. One, you can only register there. So if like a couple like in weird spots, because you can only register them in some places. But I've been a big fan of hover, although I am going to be moving them all over to CloudFlare. As soon as I get accepted into the CloudFlare domain. If you haven't heard CloudFlare is becoming a registrar. And they're going to do the Mac cost, which is amazing. A bit of a deathblow to a lot of these domain companies, maybe we'll see what that's like, I think people will still just buy their domain name wherever they buy their hosting. But for someone like me domain names is one of the most expensive things I have to pay every single year because I have probably like 40 or 60 of them that I just sit on. Some of them are common misspellings of my courses. Some of them are possible courses that I might want to do at some point. Like I own all of the for beginners calm Angular, for beginners, Ember for beginners, I just like grabbed them when I when I put out react for beginners, just because if I ever did want to venture down that way, I wanted to keep that. That naming conventions. Yeah, domain names are pretty expensive one. But - -29 -00:18:31,070 --> 00:18:49,850 -Scott Tolinski: yeah, if I'm like if I have a side project that I'm thinking about, or if I've had like, a couple of beers, and I've like brainstorming on something, and I'm shopping for domains that you best believe Oh, yeah, I'm buying a couple domains just to sit, like, Oh, this is a great idea that I'll never have time to do and let's just scoop it up. - -30 -00:18:49,920 --> 00:18:56,190 -Wes Bos: Someone wants tweeted that. Domain renewals are such a good reminder of things. You are almost really excited about one year - -31 -00:18:56,190 --> 00:19:07,710 -Scott Tolinski: ago. Yeah. So it's perfect. It's perfect. It's exactly correct. And sometimes, like I feel like it's almost like spring cleaning to get rid of them. And I'm like looking at it's like a T shirt that I have in my closet like, hmm, am I ever gonna - -32 -00:19:07,710 --> 00:19:08,430 -Unknown: wear this? - -33 -00:19:08,430 --> 00:19:13,260 -Scott Tolinski: I don't know, am I gonna wear this or not? Like, maybe I should just get rid of it. Okay, let's get rid of it. You know, - -34 -00:19:13,440 --> 00:19:23,160 -Wes Bos: I'll turn off the auto renew on domain names that I'm not super excited about. Oh, yeah. When it comes up for renewal, then it's a gut test of whether actually want to keep it or not. Yeah, that's a good one and like - -35 -00:19:23,160 --> 00:20:26,910 -Scott Tolinski: turning it backwards. Okay, so let's get into the next one, which we had sort of backups. And we both store a lot of data. I personally keep a lot of data because video files are huge. And I do a new course every month. So I think even like first and foremost so we're going to the the big things I have for data is like off a service data backup. So like a NASS drive. So I have a NASS drive in my office that has 16 terabytes of data availability, so I'm not running out anytime soon. It does like double redundancy, backups, so there's no chance of losing any of my content ever. So I store all of my raw video files, all of my produce video files seriously everything on my NASS drive takes care of everything. I host all of my stuff, though, for download and backup and whatever, on both backblaze as well as Amazon s3, I use both because I'm sort of transitioning to backblaze. But at the same time, I have some systems in my site that rely on s3. So I haven't had the time to move everything off just yet. - -36 -00:20:27,050 --> 00:21:35,550 -Wes Bos: I'm almost exactly the same. So I unpopularity run all of my code out of Dropbox. And then people get mad at me for that, because it it spins up your CPU and goes crazy with your node modules when you install, but I don't notice it because I have a very fast computer. And that is a nice little like passive backup for me. If I accidentally nuke a code file, in between get commits, I can always bring that back, which is great. And then for my whole entire computer, I pay for backblaze every single month that is kind of like Dropbox for your entire computer. It works really well it saved my butt more than a few times I've accidentally deleted something or I've accidentally corrupted an entire video project, I was able to just go back to backblaze and download the archived version. I also use back backblaze b two which is their kind of like Amazon hosting. Yep, competitor. It's extremely cheap. I think Scott is moving over to it because it's way cheaper, cheaper than what it used to use, which was Amazon s3. So if you want to download the zip files of any of my courses, they are almost all hosted on backblaze. I still maintain a couple on Amazon s3 just because I'm a bit lazy to move them over. - -37 -00:21:36,420 --> 00:21:48,000 -Scott Tolinski: Yeah, it's it's not like not the super most easiest thing ever. Although, I don't know how you put things up under v2. But I just use FTP. It's like the only thing I use FTP for that in s3. Yeah, I - -38 -00:21:48,000 --> 00:21:50,970 -Wes Bos: use a cyber duck. Oh, yes. Cyber duck. I - -39 -00:21:50,970 --> 00:21:52,710 -Scott Tolinski: use transmit because I bought it. - -40 -00:21:53,640 --> 00:21:56,700 -Wes Bos: Oh, I have transmitted does this support? Yeah, please. Yeah, there's - -41 -00:21:56,700 --> 00:21:58,770 -Scott Tolinski: like, like a shortcut for it. - -42 -00:21:58,980 --> 00:23:01,950 -Wes Bos: Oh, shit. Well, why am I using cyberduck I've paid for transmit like 40 years ago when I was doing WordPress ever has another application that I still use panic man, Muay Thai great abs. Yeah, panic is awesome. Yeah. Next up, we have labor, which is paying for people. I have an assistant who works for me part time does all of my email does all of expenses, pretty much any any like kind of stuff that takes me out of working on the business and makes me working in the business. So anything that I don't feel like doing, I'll just pass off to her. And she'll take care of all that. And then I also have a part time developer for the last little bit been working on some improvements, my course platform as well, that's working pretty well. So that's fairly new to me in the last year or so having the increased cost of paying these people, which is always a scary thing, because you have to make sure that the business keeps going in order to pay these people as well as the whole like management aspect of it. And, and hardware as well. I bought my assistant like a laptop, things like that. So nice. I know, people have huge companies and do this as well. But it's the first time I've ever had a foray into that. - -43 -00:23:01,980 --> 00:23:59,670 -Scott Tolinski: Yeah. So I have one developer working on level up tutorials. And he works on it part time and does freelance part time otherwise. And so yeah, he's one contract developer, I'm also contracting out some design work, although I'm also doing quite a bit of design work myself. So just to get some, like extra help here and there, because some of the stuff I think in the site needs more work. So that's pretty much it. I what I really need is an assistant like I really need an assistant when it comes down to because of email, and just sort of managing things like I'm I'm good at creating content. But that's, that's my strong suit. My Strong Sense isn't necessarily communication and things like that. So if I had somebody to help me with that, I think things would be a little bit more complete. I would also I think I'm, you know, looking to do more of like social media help, or even marketing help and stuff like that. Because, again, yeah, I spend so much time creating content that I don't get to spend the time on the other things that I could do, if I had the time to do it. - -44 -00:24:00,090 --> 00:24:24,060 -Wes Bos: We'll do a hasee tree on things I've learned as an assistant. And maybe you can go through that that whole process as well. Because it was a whole idea of making what's called SOP, standard operating procedures, and like taking all of the ideas out of my head. Yeah, building lots of tooling so that somebody else can manage these things. And yeah, it's kind of interesting. Yeah, maybe we'll do an entire episode on them - -45 -00:24:24,060 --> 00:25:06,510 -Scott Tolinski: with a custom system like ours, you know, it's like in my back end system. There's no reason for me to build in certain features when I could go look things up in a database query myself, yeah, just take care of it, rather than like, Okay, well, you needed an interface for this now, which is, you know, again, just more more work. So I'm actually having our developer I'm having him work on some of those interfaces right now because they're not essential and like they're going to be paying dividends in the long run. Next, you have insurances, my insurance sort of stuff is really simple. I use Courtney's insurance for everything for medical And all that good stuff. So I don't buy insurance separately, we just use her her professional insurance through work, - -46 -00:25:06,599 --> 00:26:37,800 -Wes Bos: that's good, I have to pay for all of my own insurance. But in Canada, it's that much easier. So health insurance in Canada for my entire family is like, they're under 50 bucks a month or something like that, I know that it's probably like 567 times that in in the US, which is a such a frustrating thing for entrepreneurs who want to go off on their own, they can't do that in Canada, we get health care, so we get the doctors for free, but you don't get prescriptions or the dentre, dental optical things like that are often much more expensive. So we pay into that, and then we try to use, we try to use that all back. Yeah, by going to the dentist as much as possible and getting new glasses as frequently as we possibly can and, and things like that, or you need to dip into it. So I've done the numbers, and we almost always just use everything back that we pay into it. So it's pretty efficient system. Other things we have here is my home insurance is I think 1500 bucks a month higher because I run a business, it's so silly, because I don't have people coming to my house that are gonna slip on a slip on something, or whatnot. But there's still a just because I run a business from my home, there's still an increased elevated sense of risk from the insurance companies. So my house insurance is quite a bit more than it would be if I didn't run a business from here. So that's just like another added causes. It's kind of like the interesting thing about running a business is so nice, super like, oh, it must be nice to just like run this thing and make your own hours and whatnot. But like there's added costs to running a business at every single corner - -47 -00:26:37,859 --> 00:27:37,350 -Scott Tolinski: added costs and added stress that literally every corner. Yeah, I mean, like your weekends, it makes it very difficult to claim your weekends. I know it's important to do, but it makes it more difficult. Okay, next we have professional fees, which again, running a business, you you end up having a lot of professional fees, I have an accountant, I do have a lawyer on retainer, and help with both entity things as well as just general questions or legal privacy policy, that sort of stuff. I also have a bookkeeping service because my books are complex enough that I have to, they make sure that I get all those little deductions like the merchant fees and stuff like that listed as expenses and things like that, rather than just you know, sort of however the sort of caveman ik way I would have tried to do my own accounting. So that's pretty much it for me I just haven't a lawyer and accountant and a bookkeeper I think the bookkeeper is the only one I pay like actually monthly for it because they they keep my books up to date they have full access to everything and yeah, he informed - -48 -00:27:37,499 --> 00:29:06,540 -Wes Bos: my accountant is worth or however much they spend I think it's a couple thousand dollars a year I pay for my accountant but takes care of everything answers all my questions regarding to to like how to pay yourself at the end of the year Whoa, whoa, whoa, look at like our both our personal and the business and figure out how to do that through him I have a lawyer that does corporate stuff that you need to do make sure that you're all on the up and up with that. And then I have foreign effects. So I build everything in almost everything in us and I need to convert that to Canadian to go to the store and buy food. And in order to do that I if you go to your own bank and try to convert currency, they're going to nalia and if you go to paypal and try to convert your own, they're going to take most of it so there is smaller companies that you can find I got referred to it's a big thing here in Canada because a lot of people run businesses in us and and convert it so it pay them or I don't pay them but they take a cut a very small cut of everything it's anytime I talk about transferring money people always email me and say you should check out transfer wise or etsy.com or any of these things and those transferwise is very very good. It's much better than it's much better than just using your bank or PayPal or something like that buy like a couple cents on the dollar. But I is still using a private firm to do this yourself. You still get the by far the best price ever I've because my entire income comes in in us like half a percent or half a cent is like a vacation for me and some use cases. So I pay I'm figuring this out and I'm very happy with that my setup that I have now. - -49 -00:29:06,569 --> 00:30:19,560 -Scott Tolinski: Okay, next we have hosting. Moving right along. And this is good a lot of hosting. I mean, we mentioned that I use B two for video hosting download hosting s3 for download hosting. The level of tutorials is hosted on Meteor galaxy, which is just tuned to be a little bit easier to work with Meteor and stuff like that I have considered moving it off of galaxy it used to be hosted on Heroku before that, and Galaxy was cheaper and easier. So I've moved it. I think that's pretty much it for me for hosting. I don't host my video anymore. I guess I do pay for a CDN via CloudFront but other than that I might have one thing on digitalocean still I don't very good a ton of stuff Yeah, cuz I pretty much the stuff that was on digitalocean for me is now on Netlify. So I was like managing my own you know server when I needed to do was maintain some front end code. So Netlify saved my bacon there. So yeah, that's pretty much it for me. I don't really pay very much in hosting I think oh, db hosting, I do pay I my database is hosted at composed, composed IO. I believe it's owned by IBM. Now I've considered moving off composed several times. But like anything, it's been there since the inception of level up so it worked fine - -50 -00:30:19,560 --> 00:30:20,520 -Wes Bos: works. Yeah, - -51 -00:30:20,549 --> 00:30:30,930 -Scott Tolinski: yeah, it works fine. There's really no practical reason other than I have lots of other things hosted at Atlas already, or M lab. So well, what was m lab? So yeah, that's pretty much it. - -52 -00:30:31,109 --> 00:30:50,550 -Wes Bos: Awesome. I use Vimeo to host all of my streaming videos. I talked earlier about how I was on the Vimeo like their business plan, which was like four or 500 bucks a year. Yeah. And I was streaming it directly into my own HTML player. And they said I was using 40 terabytes a month. And you can't do that will be - -53 -00:30:51,029 --> 00:30:58,610 -Scott Tolinski: totally changes which video they're serving, right? Whether they're serving the right quality for the right network and stuff, or no, yeah, it was - -54 -00:30:58,610 --> 00:31:59,520 -Wes Bos: because I was just serving up straight mp4. Yeah, I did use their compression on it, which is good because Vimeo, especially is a very good writer, the Vimeo player will auto degrade based on speed and device and all this amazing stuff. So I switched over to using Vimeo I'm on the $800 a year plan currently, which is I had to upgrade that more recently, because whenever I post a big course, they only allow you to upload so much in a week. So I had to upgrade that I probably I could probably downgrade it at some point. But that's a big one for me. I host my own website on Digital Ocean. So that's a I think I paid probably 40 bucks. 50 bucks for a couple different droplets and a floating IP there. Yep, I host the syntax website on now. Sh, which is on now just rolled out there. Yeah, now too. And it was kind of interesting. They're moving more towards serverless. But they have this idea of you can take any existing application that you have, and it will automatically serverless it, which is kind of cool. Yes. I love sites so much. But it doesn't work. - -55 -00:31:59,550 --> 00:32:10,610 -Scott Tolinski: Yeah, I'm skeptical because like I had dreams of moving level up to now. And then like this new platform makes that totally impossible. Yeah, it makes it totally impossible with my setup. So - -56 -00:32:10,680 --> 00:32:57,540 -Wes Bos: I'm in the process right now of moving it to now. And then they rolled this out at the at this time, because I was moving my I love I love their hosting platform. It's amazing. And I had done all this work to host and move all of my domain names and over to them, and then they rolled out this 2.0 you can still use 1.0. But for how long? I don't know if it's worth it or not. I do have faith that they will fix the issues that we have with it currently. But yeah, I'm just kind of looking for where do I go now? I know there's something like Heroku. But these kinds of things, they they get expensive really quickly. Especially when you're trying to just host a lot of like silly little node projects that you're not necessarily making any money off of right we have a whole nother episode will do on I was on Twitter asking for recommendations, and people recommend Doku or Doku. Have you heard of this? Oh, no. - -57 -00:32:57,600 --> 00:32:58,470 -Scott Tolinski: I saw it listed. - -58 -00:32:58,610 --> 00:35:25,400 -Wes Bos: No posted Heroku Oh, okay. Yeah, really cool. I saw a whole episode on it. Because it's pretty cool. I also use Bluehost to host my own website. That's WordPress. I've signed up for that when I was like six years old and still have it. I don't love it. What happens is that if I email out a link to my own website, I will crash my server and then two minutes later, they'll they'll scale up. Yeah, the scaling up in that two minutes. I have 40,000 people emailing me that my website is down. And it drives me crazy, because I have all this unnecessary email of people sending me screenshots of a broken WordPress, I'm redesigning my website right now I am looking at doing it in Gatsby which I'm pretty excited about. So that will probably be deprecated at some point from my Bluehost it's not cheap. I think it's like a couple hundred bucks a year which is frustrating. And especially if you want to like host your own SSL certificate, they make you pay for like a Yeah, that's rough your own IP address, which is is frustrating. I don't really like Bluehost as a company anymore. They did some shady stuff with their like aggressive caching that wasted a couple days of mine. So that was that. And then database hosting was I host on M lab, which is now owned by MongoDB Atlas big fan of M lab probably will just stick with with them when they move over to Atlas just because I've been so happy with it word last up we have just travel this is kind of somewhat related to to the business as well. So I do a lot of traveling. I go to conferences and and do a lot of training and workshops. So in doing workshops and training and speaking at conferences, you usually if you speak at a conference, they'll pay for at least the hotel and your travel which is your flight but it's I was like thinking about it like this is still pretty expensive. If they're not paying you anything past that because you have to pay for a taxi or someone to drive you to the airport and then you also have to pay for like an Uber from the airport like San Francisco Airport to downtown was like 30 bucks. You do that twice. That's 60 bucks. It's not cheap. You have to often pay for a couple other meals that aren't covered by the conference, all that kind of stuff that surrounds Speaking at it, which is often while honest, I will still ask for not every conference but off to ask for like a little bit of money for conferences I don't mind speaking for for free because I really enjoy it. But those added costs on top of it are are a little bit inaccessible. Especially like I have a business and I make the money for it. But some people want to speak at conferences, and they don't necessarily have an extra two 300 bucks to spend on this kind of thing. So there's that added expense to running a business as well. - -59 -00:35:25,460 --> 00:35:30,330 -Scott Tolinski: Word. Well, this has been a big old hasty treat. This has been a Yeah, - -60 -00:35:30,840 --> 00:35:33,690 -Wes Bos: yes. 30 minutes. Yes. Okay, cool. - -61 -00:35:33,690 --> 00:36:01,400 -Scott Tolinski: Well, I have nothing to add to there. So we can wrap this up. As you can see, here, they're running a business is not easy. There's a lot a little thing there is a lot of things, I don't know, would sound like we're spending a crazy amount of money here. But it adds up. And there's certainly a lot of things to consider and whatever. So yeah, just hope this gave you a little bit more insight into sort of what it takes to do what we're doing and some sort of financial regard or even organizational regard. It almost feels like we just did a complete outline of running our businesses. - -62 -00:36:01,460 --> 00:36:31,350 -Wes Bos: Yeah, it's good for you. Because what it usually do at the tax time as I go through all my expenses, I'm like, seriously, I'm spending that much on domain names, or Yeah, and that really got it that really added up or that came out of nowhere, especially a lot of these surfaces that don't email you when they renew, because they don't want you to cancel them. I've had a few like that where I'm like, ah, shoot, I forgot to cancel that thing. And they billed me nine bucks for eight years. And it sort of gets away from you. With all these like little death by 1000 cuts with these type of things. So gotta keep an eye on it. Sure. - -63 -00:36:31,380 --> 00:36:32,820 -Scott Tolinski: Cool, man. All right. Well, that's it. - -64 -00:36:32,940 --> 00:36:36,090 -Wes Bos: All right. Thanks for tuning in. See you Wednesday, use pace. - -65 -00:36:38,040 --> 00:36:47,820 -Scott Tolinski: Head on over to syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show. - diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 000000000..f70624e72 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,20 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "noErrorTruncation": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "importsNotUsedAsValues": "preserve", + "preserveValueImports": false + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in +} diff --git a/vercel.json b/vercel.json new file mode 100644 index 000000000..db8832ab9 --- /dev/null +++ b/vercel.json @@ -0,0 +1,12 @@ +{ + "crons": [ + { + "path": "/webhooks/transcripts", + "schedule": "*/10 * * * *" + }, + { + "path": "/webhooks/ai", + "schedule": "*/5 * * * *" + } + ] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 000000000..3d3a6cc6e --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,33 @@ +import { sentrySvelteKit } from '@sentry/sveltekit'; +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + plugins: [sentrySvelteKit(), sveltekit()], + test: { + include: ['src/**/*.{test,spec}.{js,ts}'] + }, + css: { + devSourcemap: true, + preprocessorOptions: { + postcss: { + additionalData: ` + @custom-media --below_small (width < 400px); + @custom-media --below_med (width < 700px); + @custom-media --below_large (width < 900px); + @custom-media --below_xlarge (width < 1200px); + + @custom-media --above_small (width > 400px); + @custom-media --above_med (width > 700px); + @custom-media --above_large (width > 900px); + @custom-media --above_xlarge (width > 1200px); + ` + } + } + }, + resolve: { + alias: { + '.prisma/client/index-browser': './node_modules/@prisma/client/index-browser.js' + } + } +}); diff --git a/why_do_i_need_this.mjs b/why_do_i_need_this.mjs new file mode 100644 index 000000000..28d2954a9 --- /dev/null +++ b/why_do_i_need_this.mjs @@ -0,0 +1,17 @@ +#!zx + +const LOCAL_BUILD_PATH = '.svelte-kit/output/server/'; +const VERCEL_BUILD_BASE_PATH = '.vercel/output/functions'; + +const vercelFuncDirs = (await $`ls -1d ${VERCEL_BUILD_BASE_PATH}/*.func`).stdout + .split('\n') + .map((v) => v.trim()) + .filter((v) => v !== ''); + +const outputDirs = [...vercelFuncDirs, LOCAL_BUILD_PATH]; + +for (const outputDir of outputDirs) { + await $`cp node_modules/@ffmpeg.wasm/core-mt/dist/core.wasm ${outputDir}`; + await $`cp node_modules/@ffmpeg.wasm/core-mt/dist/core.worker.js ${outputDir}/core.worker.cjs`; + await $`cp -r ./src/server/transcripts/audio ${outputDir}`; +}